/* ============================================================
   YUBA SKIES — app.css
   Design system per Final Build Spec v1.
   Dark is the default. Light via prefers-color-scheme, and
   :root[data-theme] overrides must win in BOTH directions,
   so they are declared AFTER the media query.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  --surface-0:#0B0E13; --surface-1:#12161D; --surface-2:#1A2029; --surface-3:#232B36;
  --void:#07090C;
  --hairline:rgba(255,255,255,.07); --hairline-strong:#2A323D;
  --text-hi:#EEF2F7; --text-mid:#A3AEBD; --text-lo:#7B889A; --text-dim:#4A5665;
  --accent:#4CC2FF; --accent-press:#2FA8E8; --accent-glow:rgba(76,194,255,.18);
  --ok:#3DD68C; --warn:#FFB020; --alert:#FF4D5E; --alert-weak:#341417;
  --halo:rgba(6,9,13,.88);
  --shadow-1:0 2px 8px rgba(0,0,0,.35);
  --shadow-2:0 12px 40px rgba(0,0,0,.55);
  --glass:rgba(11,14,19,.72);

  --t-2xs:.6875rem; --t-xs:.75rem; --t-sm:.8125rem; --t-base:.9375rem;
  --t-md:1.0625rem; --t-lg:1.375rem; --t-hero:clamp(2rem, 1.4rem + 2vw, 2.75rem);

  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-full:999px;

  --ui:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;

  --panel-w:380px;
  --row-h:56px;
  --sheet-y:calc(100% - var(--peek));
  --peek:calc(104px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-color-scheme: light) {
  :root {
    --surface-0:#FFFFFF; --surface-1:#F4F6F9; --surface-2:#EBEFF4; --surface-3:#DDE4EC;
    --void:#E7EBF0;
    --hairline:rgba(9,14,20,.09); --hairline-strong:#C9D1DA;
    --text-hi:#0D1218; --text-mid:#495563; --text-lo:#66727F; --text-dim:#9AA5B1;
    --accent:#0B6FB8; --accent-press:#095891; --accent-glow:rgba(11,111,184,.14);
    --ok:#0F8F55; --warn:#B87400; --alert:#D32536; --alert-weak:#FDECEE;
    --halo:rgba(255,255,255,.90);
    --shadow-1:0 2px 8px rgba(9,14,20,.16);
    --shadow-2:0 12px 40px rgba(9,14,20,.26);
    --glass:rgba(255,255,255,.74);
  }
}

/* Explicit overrides win in both directions */
:root[data-theme="dark"] {
  --surface-0:#0B0E13; --surface-1:#12161D; --surface-2:#1A2029; --surface-3:#232B36;
  --void:#07090C;
  --hairline:rgba(255,255,255,.07); --hairline-strong:#2A323D;
  --text-hi:#EEF2F7; --text-mid:#A3AEBD; --text-lo:#7B889A; --text-dim:#4A5665;
  --accent:#4CC2FF; --accent-press:#2FA8E8; --accent-glow:rgba(76,194,255,.18);
  --ok:#3DD68C; --warn:#FFB020; --alert:#FF4D5E; --alert-weak:#341417;
  --halo:rgba(6,9,13,.88);
  --shadow-1:0 2px 8px rgba(0,0,0,.35); --shadow-2:0 12px 40px rgba(0,0,0,.55);
  --glass:rgba(11,14,19,.72);
}
:root[data-theme="light"] {
  --surface-0:#FFFFFF; --surface-1:#F4F6F9; --surface-2:#EBEFF4; --surface-3:#DDE4EC;
  --void:#E7EBF0;
  --hairline:rgba(9,14,20,.09); --hairline-strong:#C9D1DA;
  --text-hi:#0D1218; --text-mid:#495563; --text-lo:#66727F; --text-dim:#9AA5B1;
  --accent:#0B6FB8; --accent-press:#095891; --accent-glow:rgba(11,111,184,.14);
  --ok:#0F8F55; --warn:#B87400; --alert:#D32536; --alert-weak:#FDECEE;
  --halo:rgba(255,255,255,.90);
  --shadow-1:0 2px 8px rgba(9,14,20,.16); --shadow-2:0 12px 40px rgba(9,14,20,.26);
  --glass:rgba(255,255,255,.74);
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ font-size:16px; }
body{
  font-family:var(--ui);
  background:var(--surface-0); color:var(--text-hi);
  height:100dvh; overflow:hidden; overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
button,input,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
.tnum,[data-num]{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.mono{ font-family:var(--mono); letter-spacing:.02em; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:inherit; }
:focus:not(:focus-visible){ outline:none; }

/* ---------- 3. APP GRID ---------- */
#app{
  display:grid; height:100dvh;
  grid-template-rows:52px 1fr; grid-template-columns:1fr;
}
#map{ position:relative; grid-column:1; background:var(--void); min-height:0; }
.leaflet-container{ background:var(--void); font-family:var(--ui); outline:none; }

@media (min-width:1024px){
  #app{ grid-template-rows:56px 1fr; grid-template-columns:1fr var(--panel-w); }
  #topbar{ grid-column:1 / -1; }
}
@media (min-width:1440px){ :root{ --panel-w:420px; } }

/* ---------- 4. TOP BAR ---------- */
#topbar{
  position:sticky; top:0; z-index:400;
  display:flex; align-items:center; gap:12px; padding:0 12px;
  background:var(--glass); backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid var(--hairline);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #topbar{ background:var(--surface-0); }
}
.brand{ display:flex; flex-direction:column; justify-content:center; line-height:1.15; min-width:0; }
/* h1 exists for document structure only; .brand b supplies all typography.
   The margin reset is REQUIRED — .brand is flex/column, so default UA h1
   margins would shift the top bar. Result is pixel-identical. */
.brand h1{ margin:0; font:inherit; }
.brand b{ font-size:var(--t-sm); font-weight:600; color:var(--text-hi); letter-spacing:.02em; }
.brand span{ font-size:var(--t-2xs); color:var(--text-lo); }
@media (max-width:599px){ .brand span{ display:none; } }

.stats{ display:none; gap:20px; margin-left:16px; }
@media (min-width:1024px){ .stats{ display:flex; } }
.stat{ display:flex; flex-direction:column; line-height:1.15; }
.stat i{ font-style:normal; font-size:var(--t-2xs); text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:var(--text-lo); }
.stat b{ font-size:var(--t-md); font-weight:600; color:var(--text-hi); font-variant-numeric:tabular-nums; }
.spark{ display:block; width:60px; height:16px; }

.tools{ margin-left:auto; display:flex; align-items:center; gap:2px; }
.iconbtn{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:var(--r-md); color:var(--text-mid); position:relative;
}
.iconbtn:hover{ background:var(--surface-2); color:var(--text-hi); }
.iconbtn[aria-pressed="true"]{ color:var(--accent); background:var(--accent-glow); }
.iconbtn svg{ width:22px; height:22px; }
.iconbtn .badge{
  position:absolute; top:7px; right:7px; width:8px; height:8px;
  border-radius:var(--r-full); background:var(--accent); display:none;
}
.iconbtn.has-filters .badge{ display:block; }

/* ---------- 5. MAP OVERLAYS ---------- */
.ovl{ position:absolute; z-index:500; }
#livePill{
  top:16px; left:16px; display:flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:var(--r-full);
  background:var(--glass); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--hairline); box-shadow:var(--shadow-1);
  font-size:var(--t-xs); font-weight:600; color:var(--text-hi);
  font-variant-numeric:tabular-nums;
}
#livePill .dot{ width:7px; height:7px; border-radius:var(--r-full); background:var(--ok); flex:none; }
#livePill[data-state="warn"] .dot{ background:var(--warn); }
#livePill[data-state="alert"] .dot{ background:var(--alert); }
#livePill[data-state="ok"] .dot{ animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

#mapctl{
  right:16px; bottom:16px; display:flex; flex-direction:column; gap:1px;
  border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-1);
  border:1px solid var(--hairline);
}
/* On phone the sheet covers the bottom of the map, so the control cluster has
   to ride above it — otherwise the lower buttons (home, follow) sit underneath
   the sheet and cannot be tapped. --sheet-visible is how much of the sheet is
   currently on screen, updated by the sheet code on every detent AND drag. */
@media (max-width:1023px){
  #mapctl{
    bottom:calc(16px + var(--sheet-visible, 0px));
    transition:bottom .22s cubic-bezier(.2,.8,.2,1);
  }
  #panel.dragging ~ #map #mapctl, #app.sheet-dragging #mapctl{ transition:none; }
  /* Past roughly half the screen there is no usable map left; hide the cluster
     rather than letting it collide with the top bar. */
  #app.sheet-tall #mapctl{ opacity:0; pointer-events:none; }
}
#mapctl button{
  width:44px; height:44px; display:grid; place-items:center;
  background:var(--glass); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px); color:var(--text-mid);
}
#mapctl button:hover{ color:var(--text-hi); background:var(--surface-2); }
#mapctl button[aria-pressed="true"]{ color:var(--accent); background:var(--accent-glow); }
#mapctl svg{ width:20px; height:20px; }

#legend{
  left:16px; bottom:16px; padding:10px 12px; border-radius:var(--r-md);
  background:var(--glass); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--hairline); box-shadow:var(--shadow-1);
  max-width:240px;
}
#legend .bar{ width:200px; height:12px; border-radius:3px; margin-bottom:5px; }
#legend .ticks{ display:flex; justify-content:space-between; font-size:var(--t-2xs); color:var(--text-lo); font-variant-numeric:tabular-nums; }
#legend summary{ cursor:pointer; font-size:var(--t-2xs); color:var(--text-lo); margin-top:7px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
#legend .bands{ margin-top:7px; display:flex; flex-direction:column; gap:4px; }
#legend .band{ display:flex; align-items:center; gap:7px; font-size:var(--t-xs); color:var(--text-mid); }
#legend .sw{ width:12px; height:12px; border-radius:3px; flex:none; }
@media (max-width:599px){ #legend{ display:none; } }

#attrib{
  right:16px; bottom:2px; font-size:var(--t-2xs); color:var(--text-lo);
  text-shadow:0 1px 2px var(--halo); pointer-events:none;
}
@media (max-width:1023px){ #attrib{ display:none; } }

#swCanvasStatic,#swCanvasLive{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:450;
}
#swCanvasStatic{ z-index:440; }
#swCanvasLive.zooming{ opacity:0; }

/* ---------- 6. PANEL ---------- */
#panel{
  background:var(--surface-0); display:flex; flex-direction:column;
  min-height:0; container-type:inline-size;
  border-left:1px solid var(--hairline);
}
@media (max-width:1023px){
  #panel{
    position:fixed; inset-inline:0; bottom:0; z-index:600;
    height:92dvh; border-left:0;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    box-shadow:var(--shadow-2);
    transform:translate3d(0,var(--sheet-y),0);
    will-change:transform;
    transition:transform 220ms cubic-bezier(.2,.8,.2,1);
    padding-bottom:max(12px,env(safe-area-inset-bottom,0px));
    max-width:640px; margin-inline:auto;
  }
  #panel.dragging{ transition:none; }
}
@media (max-width:599px){ #panel{ max-width:none; } }

#grabber{ display:none; }
@media (max-width:1023px){
  #grabber{
    display:grid; place-items:center; height:40px; flex:none;
    touch-action:none; cursor:grab;
  }
  #grabber::before{ content:""; width:36px; height:4px; border-radius:var(--r-full); background:var(--text-dim); }
}

/* landscape phone -> left drawer */
@media (max-height:520px) and (orientation:landscape) and (max-width:1023px){
  #panel{
    inset-inline:0 auto; top:0; bottom:0; height:100dvh; width:300px;
    max-width:none; margin:0; border-radius:0 var(--r-xl) var(--r-xl) 0;
    transform:translate3d(var(--drawer-x,-300px),0,0);
  }
  #grabber{ display:none; }
  #drawerTab{ display:grid; }
}
#drawerTab{
  display:none; position:fixed; left:0; top:50%; z-index:601;
  transform:translateY(-50%);
  width:32px; min-height:44px; place-items:center; padding:12px 4px;
  background:var(--surface-1); border:1px solid var(--hairline); border-left:0;
  border-radius:0 var(--r-md) var(--r-md) 0; color:var(--text-mid);
  font-size:var(--t-2xs); font-weight:600; writing-mode:vertical-rl;
}

#panelScroll{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
/* The sheet is a fixed-height block translated down, so below the full detent a
   slice of it sits under the bottom of the screen. Without this inset the
   scroller reaches its end while that slice is still unreachable — you could see
   more content by dragging the sheet up, but never by scrolling. */
@media (max-width:1023px){
  #panelScroll{ padding-bottom: calc(var(--sheet-hidden, 0px) + max(12px, env(safe-area-inset-bottom, 0px))); }
}
@media (max-height:520px) and (orientation:landscape) and (max-width:1023px){
  #panelScroll{ padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
}

/* status row */
#statusRow{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px;
  height:40px; padding:0 14px; background:var(--surface-0);
  border-bottom:1px solid var(--hairline);
  font-size:var(--t-base); color:var(--text-mid); flex:none;
}
#statusRow .cnt{ color:var(--text-hi); font-weight:600; font-variant-numeric:tabular-nums; }
.feeds{ margin-left:auto; display:flex; gap:10px; align-items:center; }
.feed{ display:flex; align-items:center; gap:5px; font-size:var(--t-2xs); color:var(--text-lo); font-weight:600; }
.feed .d{ width:7px; height:7px; border-radius:var(--r-full); background:var(--ok); }
.feed[data-s="warn"] .d{ background:var(--warn); }
.feed[data-s="alert"] .d{ background:var(--alert); }
.feed[data-s="dead"] .d{ background:none; border:1.5px solid var(--text-dim); }

/* search + controls */
.controls{ padding:12px 14px 4px; display:flex; flex-direction:column; gap:10px; }
.search{ position:relative; }
.search input{
  width:100%; height:44px; padding:0 38px 0 38px;
  background:var(--surface-1); border:1px solid transparent;
  border-radius:var(--r-md); color:var(--text-hi); font-size:var(--t-base);
}
.search input::placeholder{ color:var(--text-lo); }
.search input:focus{ border-color:var(--accent); background:var(--surface-0); }
.search .ic{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-lo); pointer-events:none; }
.search .clr{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:32px; height:32px; display:none; place-items:center; color:var(--text-lo); border-radius:var(--r-sm); }
.search.has-val .clr{ display:grid; }
.searchInfo{ font-size:var(--t-xs); color:var(--text-lo); padding:0 2px; }

.pills{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.pills::-webkit-scrollbar{ display:none; }
.pill{
  flex:none; height:32px; padding:0 12px; border-radius:var(--r-full);
  background:var(--surface-1); color:var(--text-mid);
  font-size:var(--t-xs); font-weight:600; letter-spacing:.03em;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.pill:hover{ background:var(--surface-2); color:var(--text-hi); }
.pill[aria-pressed="true"]{ background:var(--accent); color:#fff; }
:root[data-theme="light"] .pill[aria-pressed="true"]{ color:#fff; }

/* sections */
.section{ margin-top:8px; }
.section > h3{
  margin:0; padding:10px 14px 6px;
  font-size:var(--t-2xs); text-transform:uppercase; letter-spacing:.06em;
  font-weight:600; color:var(--text-lo);
  display:flex; align-items:center; gap:6px;
}
.section.collapsible > h3{ cursor:pointer; }
.section.collapsible > h3 .chev{ margin-left:auto; width:16px; height:16px; transition:transform .18s; }
.section.collapsed > h3 .chev{ transform:rotate(-90deg); }
.section.collapsed .rows{ display:none; }
.section.empty{ display:none; }

/* rows */
.rows{ display:flex; flex-direction:column; }
.row{
  display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:10px;
  min-height:var(--row-h); padding:6px 14px; text-align:left; width:100%;
  border-bottom:1px solid var(--hairline); contain:layout style;
  position:relative;
}
@media (pointer:fine){ :root{ --row-h:44px; } }
:root[data-roomy="1"]{ --row-h:72px; }
.row:hover{ background:var(--surface-2); }
.row[aria-selected="true"]{ background:var(--surface-3); }
.row[aria-selected="true"]::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--rowband,var(--accent));
}
.row .sil{ width:34px; height:34px; display:block; }
.row .l1{ font-size:var(--t-base); font-weight:600; color:var(--text-hi); display:flex; align-items:baseline; gap:6px; min-width:0; }
.row .l1 .op{ font-size:var(--t-xs); font-weight:400; color:var(--text-mid); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .l1.degraded{ font-family:var(--mono); color:var(--text-mid); font-size:var(--t-sm); }
.row .l2{ font-size:var(--t-xs); color:var(--text-mid); display:flex; align-items:center; gap:6px; margin-top:2px; }
.row .rt{ text-align:right; }
.row .alt{ font-size:var(--t-md); font-weight:600; color:var(--text-hi); font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:4px; justify-content:flex-end; }
.row .spd{ font-size:var(--t-xs); color:var(--text-mid); font-variant-numeric:tabular-nums; }
.row mark{ background:var(--accent-glow); color:var(--text-hi); border-radius:2px; }
.trend{ width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; }
.trend.up{ border-bottom:6px solid var(--ok); }
.trend.dn{ border-top:6px solid var(--warn); }
.trend.lv{ width:8px; height:2px; background:var(--text-lo); border:0; }

.chip{
  font-size:var(--t-2xs); font-weight:600; letter-spacing:.04em;
  padding:2px 6px; border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--text-mid); flex:none;
}
.chip.uat{ background:rgba(61,214,140,.16); color:var(--ok); }
.chip.mlat{ background:rgba(255,176,32,.16); color:var(--warn); }
.chip.tisb{ background:rgba(123,136,154,.18); color:var(--text-lo); }
.chip.mil{ background:rgba(255,77,94,.16); color:var(--alert); }
.chip.pia{ background:var(--surface-3); color:var(--text-mid); }

/* empty / skeleton */
.empty-msg{ padding:24px 16px; text-align:center; color:var(--text-mid); font-size:var(--t-base); line-height:1.45; }
.skel{ height:var(--row-h); border-bottom:1px solid var(--hairline); padding:10px 14px; display:flex; gap:10px; align-items:center; }
.skel i{ display:block; background:var(--surface-1); border-radius:var(--r-sm); animation:sh 1.4s ease-in-out infinite; }
@keyframes sh{ 0%,100%{opacity:.55} 50%{opacity:1} }

/* ---------- 7. EMERGENCY BANNER ---------- */
#emg{
  display:none; align-items:center; gap:12px; padding:12px 14px;
  background:var(--alert-weak); border-left:2px solid var(--alert);
  font-size:var(--t-sm); color:var(--text-hi); line-height:1.4;
}
#emg.on{ display:flex; }
#emg button{ margin-left:auto; flex:none; min-height:44px; padding:0 14px; border-radius:var(--r-md); background:var(--alert); color:#fff; font-weight:600; font-size:var(--t-xs); }

/* ---------- 8. DETAIL ---------- */
#detail{ display:none; flex-direction:column; min-height:0; flex:1; }
#panel[data-mode="detail"] #listMode{ display:none; }
#panel[data-mode="detail"] #detail{ display:flex; }
.dhead{ display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid var(--hairline); flex:none; }
.dhead .back{ width:44px; height:44px; display:grid; place-items:center; border-radius:var(--r-md); color:var(--text-mid); flex:none; }
.dhead .back:hover{ background:var(--surface-2); color:var(--text-hi); }
.dtitle{ min-width:0; }
.dtitle b{ display:block; font-size:var(--t-lg); font-weight:700; color:var(--text-hi); line-height:1.15; }
.dtitle span{ display:block; font-size:var(--t-sm); color:var(--text-mid); }
.dchips{ margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }

/* Columns are sized by the CONTENT's needs, not a guessed breakpoint: auto-fit
   drops 3-up to 2-up whenever a column would fall under 140px. A 6-character
   altitude ("21,650") at tabular figures needs ~3.6x the font size in width, so
   a fixed 3-up in a 380px panel collides — which it did. */
.hero{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(125px,1fr));
  gap:14px; padding:16px 14px;
}
.hero .h{ min-width:0; }
.hero i{ font-style:normal; display:block; font-size:var(--t-2xs); text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:var(--text-lo); }
/* cqi tracks the panel's own width (it is the inline-size container), so this
   scales with the panel rather than the viewport — correct in the desktop
   sidebar, the phone sheet and the landscape drawer alike. */
.hero b{
  display:block;
  font-size:clamp(1.5rem, 8cqi, 2.25rem);
  font-weight:700; line-height:1.05; letter-spacing:-.01em;
  color:var(--text-hi); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.hero small{ display:block; font-size:var(--t-xs); color:var(--text-mid); font-variant-numeric:tabular-nums; }

.doing{ margin:0 14px 14px; padding:12px 14px; background:var(--surface-1); border-radius:var(--r-md); font-size:var(--t-base); line-height:1.5; color:var(--text-hi); }
.sparkbox{ margin:0 14px 14px; background:var(--surface-1); border-radius:var(--r-md); padding:8px; }
.sparkbox svg{ display:block; width:100%; height:64px; }
.sparkbox .cap{ font-size:var(--t-2xs); color:var(--text-lo); padding:2px 4px 0; }

.dsec{ border-top:1px solid var(--hairline); }
.dsec > summary{
  min-height:44px; display:flex; align-items:center; gap:8px; padding:0 14px; cursor:pointer;
  font-size:var(--t-2xs); text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:var(--text-lo);
  list-style:none;
}
.dsec > summary::-webkit-details-marker{ display:none; }
.dsec > summary .chev{ margin-left:auto; width:16px; height:16px; transition:transform .18s; }
.dsec[open] > summary .chev{ transform:rotate(90deg); }
.kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; padding:4px 14px 14px; font-size:var(--t-sm); }
.kv dt{ color:var(--text-lo); }
.kv dd{ margin:0; color:var(--text-hi); text-align:right; font-variant-numeric:tabular-nums; }
.kv dd .gloss{ display:block; font-size:var(--t-xs); color:var(--text-mid); }
.note{ margin:0 14px 14px; padding:10px 12px; background:var(--surface-1); border-radius:var(--r-md); font-size:var(--t-xs); color:var(--text-mid); line-height:1.5; }

.rssi{ display:flex; gap:3px; align-items:flex-end; height:16px; }
.rssi i{ width:5px; background:var(--surface-3); border-radius:1px; display:block; }
.rssi i.on{ background:var(--ok); }

.acts{ display:flex; flex-wrap:wrap; gap:8px; padding:14px; }
.acts button{ min-height:44px; padding:0 14px; border-radius:var(--r-md); background:var(--surface-1); color:var(--text-hi); font-size:var(--t-xs); font-weight:600; }
.acts button:hover{ background:var(--surface-2); }
.acts button[aria-pressed="true"]{ background:var(--accent); color:#fff; }
.ext{ padding:0 14px 20px; }
.ext h4{ margin:0 0 8px; font-size:var(--t-2xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-lo); }
.ext a{ display:inline-block; margin:0 8px 8px 0; font-size:var(--t-xs); color:var(--accent); text-decoration:none; }
.ext a:hover{ text-decoration:underline; }

/* ---------- 9. SHEETS / MODALS ---------- */
.modal{
  position:fixed; inset:0; z-index:900; display:none;
  background:rgba(0,0,0,.5); backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  align-items:flex-end; justify-content:center;
}
.modal.on{ display:flex; }
@media (min-width:1024px){ .modal{ align-items:center; } }
.modal .box{
  background:var(--surface-0); width:100%; max-width:520px; max-height:88dvh;
  overflow-y:auto; border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:var(--shadow-2);
  padding-bottom:max(16px,env(safe-area-inset-bottom,0px));
}
@media (min-width:1024px){ .modal .box{ border-radius:var(--r-lg); } }
.modal h2{ margin:0; padding:16px 16px 8px; font-size:var(--t-md); font-weight:600; }
.modal .close{ position:absolute; top:8px; right:8px; width:44px; height:44px; display:grid; place-items:center; color:var(--text-mid); border-radius:var(--r-md); }
.modal .box{ position:relative; }
.opt{ padding:10px 16px; border-top:1px solid var(--hairline); }
.opt > b{ display:block; font-size:var(--t-2xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-lo); margin-bottom:8px; font-weight:600; }
.seg{ display:flex; gap:4px; flex-wrap:wrap; }
.seg button{ min-height:40px; padding:0 12px; border-radius:var(--r-md); background:var(--surface-1); color:var(--text-mid); font-size:var(--t-xs); font-weight:600; }
.seg button[aria-pressed="true"]{ background:var(--accent); color:#fff; }
.rowopt{ display:flex; align-items:center; gap:10px; min-height:44px; font-size:var(--t-sm); }
.rowopt label{ flex:1; }
.rowopt input[type=range]{ flex:1; accent-color:var(--accent); }
.rowopt input[type=checkbox]{ width:20px; height:20px; accent-color:var(--accent); }
kbd{ font-family:var(--mono); font-size:var(--t-2xs); background:var(--surface-2); border-radius:var(--r-sm); padding:2px 6px; color:var(--text-hi); }

/* ---------- 10. MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------- 11. NOSCRIPT ---------- */
.noscript{ max-width:60ch; margin:0 auto; padding:24px; color:var(--text-mid); font-size:var(--t-sm); line-height:1.7; }
.noscript h2{ color:var(--text-hi); margin:0 0 12px; }