/* STIKDEX v0.04 Part 7 — staging-only mobile Analytics presentation. */
.analytics-mobile-modes{display:none}
.analytics-load-state{min-height:88px;place-items:center;align-content:center;gap:8px;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--muted);text-align:center}
.analytics-load-state:not([hidden]){display:grid}
.analytics-load-state strong{font-size:11px}
.analytics-load-state button{min-height:40px;padding:0 16px;border:1px solid rgba(75,196,239,.42);border-radius:10px;background:rgba(55,160,215,.13);color:var(--text);font:900 9px inherit}
.analytics-spinner{width:24px;height:24px;border:3px solid color-mix(in srgb,var(--line) 78%,#43c7ff 22%);border-top-color:#43c7ff;border-radius:50%;animation:analytics-spin .8s linear infinite}
.analytics-load-state[data-state="error"] .analytics-spinner{display:none}
@keyframes analytics-spin{to{transform:rotate(360deg)}}

@media (max-width:760px), (pointer:coarse) and (max-width:960px) and (max-height:600px){
  #analyticsView .analytics-shell{gap:11px;padding:10px max(10px,env(safe-area-inset-right)) calc(var(--pocket-nav-height,76px) + env(safe-area-inset-bottom) + 18px) max(10px,env(safe-area-inset-left))}
  #analyticsView .analytics-head{display:grid;gap:10px;padding:14px}
  #analyticsView .analytics-head h2{font-size:24px}
  #analyticsView .analytics-head-status{grid-template-columns:minmax(0,1fr) auto;justify-items:start;align-items:center}
  #analyticsView .analytics-head-status span{grid-column:1}
  #analyticsView .analytics-head-status .analytics-refresh{grid-column:2;grid-row:1/3}
  #analyticsView .analytics-tabs{display:none!important}
  #analyticsView .analytics-mobile-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #analyticsView .analytics-mobile-modes button{min-width:0;min-height:88px;display:grid;align-content:center;gap:4px;padding:11px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,var(--panel),var(--panel-soft));color:var(--text);font:inherit;text-align:left}
  #analyticsView .analytics-mobile-modes button:last-child{grid-column:1/-1;min-height:70px}
  #analyticsView .analytics-mobile-modes button span{color:#66d5ff;font-size:8px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
  #analyticsView .analytics-mobile-modes button strong{overflow:hidden;font-size:16px;text-overflow:ellipsis;white-space:nowrap}
  #analyticsView .analytics-mobile-modes button small{color:var(--muted);font-size:8px}
  #analyticsView .analytics-mobile-modes button.active{border-color:rgba(75,196,239,.48);box-shadow:inset 0 0 0 1px rgba(75,196,239,.18)}
  #analyticsView .analytics-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #analyticsView .analytics-metric{padding:11px}
  #analyticsView .analytics-metric strong{font-size:19px}
  #analyticsView .analytics-split-grid{grid-template-columns:1fr}
  #analyticsView .analytics-card{padding:12px}
  #analyticsView .analytics-live-row{grid-template-columns:minmax(94px,1fr) auto;grid-template-areas:"name platform" "activity duration";gap:5px 9px;align-items:center}
  #analyticsView .analytics-live-row strong{grid-area:name;font-size:11px}
  #analyticsView .analytics-live-platform{grid-area:platform}
  #analyticsView .analytics-live-mode{display:none}
  #analyticsView .analytics-live-activity{grid-area:activity;font-size:9px}
  #analyticsView .analytics-live-duration{grid-area:duration;justify-self:end;font-weight:900}
  #analyticsView .analytics-session-head{grid-template-columns:minmax(100px,1fr) auto}
  #analyticsView .analytics-session-summary,#analyticsView .analytics-session-signals{grid-template-columns:1fr 1fr}
  #analyticsView .analytics-empty{padding:20px 12px}
}

@supports (-webkit-touch-callout:none){
  #analyticsView .analytics-head,#analyticsView .analytics-card,#analyticsView .analytics-mobile-modes button{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;will-change:auto!important}
}
@media (prefers-reduced-motion:reduce){.analytics-spinner{animation:none}}
