/* ═══════════════════════════════════════════════════════════════════════════
   Drone Ops — clean, minimal, monochrome dark. White on black, hairline rules,
   tabular numerics. Colour is used ONLY for genuine flight warnings (amber /
   red) and the crowd-risk scale — everything else is grayscale.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   One source of truth for colour, type and space. Every value below is a
   decision; nothing in the component rules should invent its own.

   SURFACES ARE DEEP GREY, NOT BLACK.
   This screen is watched for a whole shift. Pure #000 against pure #fff is
   the maximum contrast a display can produce, and sustained maximum contrast
   is what makes eyes ache by hour three -- the standing guidance for control
   rooms is deep grey surfaces with a softened white, which is what these are.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* ---- surfaces, darkest to lightest ---- */
  --bg:#0a0c10;          /* the page */
  --panel:#111520;       /* a card sitting on the page */
  --panel-2:#171c28;     /* something raised on a card */
  --panel-3:#1e2532;     /* hover / pressed */

  /* ---- hairlines ---- */
  --hair:rgba(255,255,255,.07);
  --hair-2:rgba(255,255,255,.13);
  --hair-3:rgba(255,255,255,.22);

  /* ---- text, three levels and no more ----
     Any more and "slightly dimmer" stops reading as a level and starts
     reading as an accident. */
  --ink:#e8ecf4;         /* primary */
  --ink-2:rgba(232,236,244,.68);   /* supporting */
  --ink-3:rgba(232,236,244,.42);   /* meta, labels, units */

  /* ---- one colour per meaning ----
     There were four different reds in this file doing one job. */
  --ok:#4ade80;          /* normal, clear, running */
  --info:#60a5fa;        /* live measurement, neutral emphasis */
  --amber:#f0b849;       /* caution, advisory, degraded */
  --red:#ff6b6b;         /* critical, blocked, alert */
  --ok-dim:rgba(74,222,128,.14);
  --info-dim:rgba(96,165,250,.14);
  --amber-dim:rgba(240,184,73,.14);
  --red-dim:rgba(255,107,107,.14);

  --accent:var(--info);
  --glass:rgba(10,12,16,.72);

  /* ---- type scale: six steps ----
     The file previously held twenty-odd sizes, several separated by 0.02rem.
     A difference that small is invisible as hierarchy and visible as sloppiness.
     Body was ~10px; it is 13px here, which is the smallest size anyone should
     be asked to read repeatedly. */
  --t-micro:.75rem;      /* 12px - units, timestamps, chart ticks */
  --t-label:.8125rem;    /* 13px - field labels, badges */
  --t-body:.875rem;      /* 14px - default reading size */
  --t-lead:1rem;         /* 16px - card titles, emphasis */
  --t-head:1.25rem;      /* 20px - section headings */
  --t-display:1.875rem;  /* 30px - the one number a card is about */
  --t-display-lg:2.75rem;/* 44px - the number a whole page is about */

  --w-normal:400;
  --w-medium:500;
  --w-semi:600;
  --w-bold:700;

  /* ---- space: a 4px grid ----
     Every padding and gap is one of these. Arbitrary 7/9/11/13px values are
     what make a layout feel hand-placed rather than designed. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s8:32px; --s10:40px;

  /* ---- CONTROL HEIGHT ----
     Every inline control in a row -- button, pill, number input, segmented
     toggle -- is exactly this tall. Without it each one sizes itself from its
     own font and padding, so a 26px status pill sits beside a 35px button,
     centre-aligned, sharing no edge. That is what "not aligned" looks like.
     44px on touch, which is the smallest target a finger hits reliably. */
  --ctl-h:36px;

  /* ---- radii ---- */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;

  --shadow:0 8px 24px -12px rgba(0,0,0,.7);
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
}

/* Photo safety controls carry operational evidence, so keep secondary actions readable. */
#photoSafety .cc-btn.ghost{color:var(--ink-2);border-color:var(--hair-3)}
#photoSafety .ds-foot{color:var(--ink-2)}
#photoSafety .dv-ctrls{margin:14px 0}
#photoSafety .dm-bar-row{margin:18px 0}
#photoSafety input[type="checkbox"]{accent-color:var(--ink);vertical-align:middle}
#photoSafety button:disabled{opacity:.5;cursor:wait}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:var(--t-body);line-height:1.5;
  overflow:hidden;font-feature-settings:"tnum";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{display:flex;flex-direction:column;height:100dvh}
#appRoot{display:contents}
[hidden]{display:none !important}

/* ───────────── top bar ───────────── */
.topbar{display:flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:7px 12px;padding-top:max(10px,env(safe-area-inset-top));
  background:var(--bg);border-bottom:1px solid var(--hair)}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.title{font-weight:600;letter-spacing:.14em;font-size:9.5px;color:var(--ink);white-space:nowrap}
.spacer{flex:1 1 0;min-width:0}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:0 0 auto;transition:background .3s}
.dot.ok{background:var(--ink)}
.dot.warn{background:var(--ink-2)}
.dot.bad{background:var(--ink-3)}
.dot.live{animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.4)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

.pill{font-size:9.5px;font-weight:500;letter-spacing:.03em;color:var(--ink-3);
  background:transparent;border:1px solid var(--hair);padding:3px 9px;border-radius:999px;
  white-space:nowrap;flex:0 0 auto}
#latencyPill{color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:52px;text-align:center;
  border-color:var(--hair-2)}
.pill.clock{font-variant-numeric:tabular-nums;letter-spacing:.06em}
.pill.install{background:var(--ink);color:#000;border-color:var(--ink);font-weight:700;cursor:pointer}
#adminPanelBtn,#logoutBtn{cursor:pointer}
#adminPanelBtn:hover,#logoutBtn:hover,.pill.install:hover{background:rgba(255,255,255,.10);color:var(--ink)}
.pill.install:hover{background:rgba(255,255,255,.85)}

.viewtoggle{display:inline-flex;background:transparent;border:1px solid var(--hair);
  border-radius:999px;padding:2px;margin-left:4px;flex:0 0 auto}
.vt{background:none;border:none;color:var(--ink-3);font:600 9.5px/1 inherit;letter-spacing:.09em;
  padding:5px 11px;border-radius:999px;cursor:pointer;transition:all .15s}
.vt.active{background:var(--ink);color:#000}

.dronesel{flex:0 0 auto;background:transparent;color:var(--ink-2);border:1px solid var(--hair);
  border-radius:999px;padding:4px 10px;font:600 9.5px/1 inherit;letter-spacing:.07em;cursor:pointer;
  outline:none;-webkit-appearance:none;appearance:none;max-width:150px}
.dronesel:focus{border-color:var(--hair-2)}
.dronesel option{background:#0a0a0b;color:var(--ink)}

/* ───────────── panels ───────────── */
.panel{position:relative;background:var(--panel);border:1px solid var(--hair);border-radius:8px}
.panel-page{flex:1 1 auto;min-height:0;position:relative}

/* ───────────── LIVE OPS layout ───────────── */
#panelLive{display:flex;flex-direction:column}
.ops{flex:1 1 auto;min-height:0;display:grid;gap:10px;padding:10px;
  grid-template-columns:minmax(0,1fr) 320px}
.stagecell{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}

.stage{position:relative;flex:1 1 auto;min-height:0;background:#000;overflow:hidden;
  touch-action:none;border:1px solid var(--hair);border-radius:8px}
.stageMain{position:absolute;inset:0}
.stageMain video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;
  transform-origin:0 0;will-change:transform}

/* HUD — thin, white, minimal */
.hud{position:absolute;inset:0;pointer-events:none;z-index:5;font-family:var(--mono)}
.hud.off{display:none}
.hud-corner{position:absolute;width:22px;height:22px;border-color:rgba(255,255,255,.28);border-style:solid}
.hud-corner.tl{top:44px;left:44px;border-width:1px 0 0 1px}
.hud-corner.tr{top:44px;right:44px;border-width:1px 1px 0 0}
.hud-corner.bl{bottom:44px;left:44px;border-width:0 0 1px 1px}
.hud-corner.br{bottom:44px;right:44px;border-width:0 1px 1px 0}
.hud-cross{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.hud-cross span{position:absolute;background:rgba(255,255,255,.4)}
.hud-cross span:first-child{width:22px;height:1px;left:-11px;top:0}
.hud-cross span:last-child{width:1px;height:22px;left:0;top:-11px}
.hud-top{position:absolute;top:10px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.hud-bottom{position:absolute;bottom:10px;left:14px;right:14px;display:flex;justify-content:space-between;
  color:rgba(255,255,255,.75);font-size:10.5px;letter-spacing:.06em;text-shadow:0 1px 3px #000}
.hud-chip{background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.85);
  font-size:9.5px;letter-spacing:.14em;padding:3px 9px;border-radius:999px;backdrop-filter:blur(4px)}
.hud-chip.rec{color:var(--red);border-color:rgba(255,107,107,.4)}
.hud-chip.rec i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);
  margin-right:5px;animation:pulse-red 1.4s infinite}
@keyframes pulse-red{50%{opacity:.25}}

.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:8;
  background:rgba(0,0,0,.82);padding:24px;backdrop-filter:blur(2px)}
.card{text-align:center;max-width:300px}
.big{font-size:14px;font-weight:600;letter-spacing:.04em;margin:18px 0 8px;text-transform:uppercase}
.muted{color:var(--ink-3);font-size:12.5px;line-height:1.5}
.spinner{width:28px;height:28px;margin:0 auto;border-radius:50%;
  border:2px solid var(--hair);border-top-color:var(--ink);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn{margin-top:20px;background:var(--ink);border:none;color:#000;padding:11px 28px;border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer}
.btn:active{transform:scale(.96);opacity:.85}

.fs-latency{position:absolute;top:10px;right:10px;display:none;z-index:9;color:var(--ink);
  font-variant-numeric:tabular-nums;background:var(--glass);backdrop-filter:blur(6px);
  border:1px solid var(--hair)}
.stage:fullscreen .fs-latency{display:inline-block}
.stage:-webkit-full-screen .fs-latency{display:inline-block}

.floats{position:absolute;right:12px;bottom:12px;display:flex;gap:8px;z-index:9}
.fbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--hair-2);background:var(--glass);
  color:var(--ink);font-size:15px;backdrop-filter:blur(8px);cursor:pointer}
.fbtn:active{transform:scale(.93)}
.fbtn.on{border-color:var(--ink)}

/* map (PiP ⇄ main) */
.mapwrap{position:absolute;z-index:10;overflow:hidden;background:#050505;touch-action:auto}
.mapwrap.pip{left:12px;bottom:12px;width:min(290px,42%);aspect-ratio:16/10.5;
  border:1px solid var(--hair-2);border-radius:7px;box-shadow:0 12px 30px rgba(0,0,0,.6)}
#mapBox{position:absolute;inset:0;background:#050505}
.map-tools{position:absolute;top:8px;right:8px;z-index:800;display:flex;flex-direction:column;gap:6px}
.mbtn{width:34px;height:34px;border-radius:999px;border:1px solid var(--hair-2);cursor:pointer;
  background:rgba(0,0,0,.7);color:var(--ink);font:600 11px/1 inherit;backdrop-filter:blur(6px)}
.mbtn.on{border-color:var(--ink)}
.map-offline{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:700;
  color:var(--ink-3);font:600 11px/1 inherit;letter-spacing:.22em;background:rgba(0,0,0,.7)}
.leaflet-container{font:inherit;background:#050505;filter:grayscale(1) contrast(.92) brightness(.95)}
.leaflet-control-attribution{background:rgba(0,0,0,.55)!important;color:rgba(255,255,255,.4)!important;font-size:9px!important}
.leaflet-control-attribution a{color:rgba(255,255,255,.6)!important}
.leaflet-left .leaflet-control-zoom{display:none}
.home-ico{width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.8);border:1.5px solid #fff;
  color:#fff;display:flex;align-items:center;justify-content:center;font:700 10px/1 inherit}
.laser-ico{color:var(--red);font:400 18px/1 var(--mono);text-shadow:0 0 6px rgba(0,0,0,.9)}
.rc-ico{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.2);border:1.5px solid #fff}

/* bottom telemetry strip */
.tstrip{flex:0 0 auto;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.tstrip::-webkit-scrollbar{display:none}
.ts{flex:1 1 0;min-width:82px;background:var(--panel);border:1px solid var(--hair);border-radius:7px;
  padding:8px 12px 9px}
.ts label{display:block;color:var(--ink-3);font-size:8px;font-weight:600;letter-spacing:.1em;margin-bottom:5px}
.ts b{font-size:14px;font-weight:500;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--ink)}
.ts s{text-decoration:none;color:var(--ink-3);font-size:9px;margin-left:3px}
.ts.warn b{color:var(--amber)}
.ts.crit b{color:var(--red)}

/* ───────────── telemetry sidebar ───────────── */
.sidebar{display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;padding-bottom:2px}
.tpanel{position:relative;background:var(--panel);border:1px solid var(--hair);border-radius:8px;
  padding:12px 14px 13px;flex:0 0 auto}
.tp-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.tp-head span:first-child{color:var(--ink-2);font-size:8.5px;font-weight:600;letter-spacing:.13em}
.tp-head span:last-child{color:var(--ink-3);font-size:9.5px;font-variant-numeric:tabular-nums}
.tlink.ok{color:var(--ink)} .tlink.bad{color:var(--ink-3)}

.mode-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mode-chip{display:inline-flex;align-items:center;background:rgba(255,255,255,.08);border:1px solid var(--hair);
  color:var(--ink);font-size:9.5px;font-weight:600;letter-spacing:.07em;padding:5px 10px;border-radius:999px}
.mode-chip.off{background:transparent;color:var(--ink-3)}
.mode-chip.rth{border-color:rgba(230,180,80,.5);color:var(--amber)}
.mode-chip.gear{background:transparent;color:var(--ink-2)}
.mode-chip.sim{background:transparent;border-style:dashed;border-color:rgba(230,180,80,.5);color:var(--amber)}

.alert-stack{display:flex;flex-direction:column;gap:5px;margin-top:9px}
.alert-stack:empty{margin-top:0}
.t-alert{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:500;letter-spacing:.02em;
  padding:6px 10px;border-radius:8px}
.t-alert::before{content:"▲";font-size:8px}
.t-alert.warn{background:rgba(230,180,80,.08);border:1px solid rgba(230,180,80,.28);color:var(--amber)}
.t-alert.crit{background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.32);color:var(--red)}

.inst-row{display:flex;gap:10px;justify-content:space-around;align-items:center}
.inst-row canvas{width:124px;height:124px;max-width:45%}

.bat-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.bat-bar{flex:1;height:13px;border:1px solid var(--hair-2);border-radius:999px;position:relative;overflow:hidden;
  background:rgba(255,255,255,.04)}
.bat-bar i{position:absolute;inset:0;width:0%;border-radius:999px;transition:width .6s;background:var(--ink)}
.bat-bar.warn i{background:var(--amber)}
.bat-bar.crit i{background:var(--red)}
.bat-bar em{position:absolute;top:-2px;bottom:-2px;width:1.5px;background:var(--amber);opacity:.8}
.bat-bar em.land{background:var(--red)}
.bat-row b{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;min-width:50px;text-align:right}

.kv3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:9px}
.kv3 label{display:block;color:var(--ink-3);font-size:8px;font-weight:600;letter-spacing:.1em;margin-bottom:3px}
.kv3 b{font-size:11.5px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.kv3 b.small{font-size:10.5px;font-family:var(--mono);font-weight:500;color:var(--ink-2)}
.kv3 b.warn{color:var(--amber)} .kv3 b.crit{color:var(--red)} .kv3 b.ok{color:var(--ink)}

.gimbal-row{display:flex;align-items:center;gap:10px}
.gimbal-row label{color:var(--ink-3);font-size:8px;font-weight:600;letter-spacing:.1em}
.gimbal-bar{flex:1;height:7px;border:1px solid var(--hair);border-radius:999px;position:relative;background:rgba(255,255,255,.04)}
.gimbal-bar i{position:absolute;top:1px;bottom:1px;width:3px;border-radius:2px;background:var(--ink);left:50%;transition:left .4s}
.gimbal-row b{font-size:12px;font-variant-numeric:tabular-nums;min-width:44px;text-align:right}

.side-btns{display:flex;gap:8px;margin-top:11px}
.sbtn{flex:1;background:transparent;border:1px solid var(--hair);color:var(--ink-2);
  font:600 9.5px/1 inherit;letter-spacing:.07em;padding:9px 8px;border-radius:999px;cursor:pointer;transition:all .15s}
.sbtn:hover{color:var(--ink);border-color:var(--hair-2)}
.sbtn.sim{border-style:dashed}
.sbtn.sim.on{color:var(--amber);border-color:rgba(230,180,80,.5)}

.hint{color:var(--ink-3);font-size:10px;line-height:1.55;margin-top:9px}
.hint b{color:var(--ink-2)}
.ok-text{color:var(--ink-2)}

/* ───────────── AI Analytics ───────────── */
.cc{overflow-y:auto;-webkit-overflow-scrolling:touch}
.cc-wrap{max-width:1160px;margin:0 auto;
  padding:16px 16px calc(40px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:15px}
.cc-header{display:flex;align-items:center;gap:12px}
.cc-logo{width:36px;height:36px;border-radius:9px;overflow:hidden;border:1px solid var(--hair)}
.cc-logo img{width:100%;height:100%;display:block;filter:grayscale(1) brightness(1.4)}
.cc-title{font:600 1.05rem/1.15 inherit;color:var(--ink);letter-spacing:.04em}
.cc-sub{font:400 .72rem/1.3 inherit;color:var(--ink-3);margin-top:3px}
.cc-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  border:1px solid var(--hair);background:transparent;color:var(--ink-2);font:600 .66rem/1 inherit;letter-spacing:.1em}
.cc-dot{width:6px;height:6px;border-radius:50%;background:var(--ink-3);transition:background .2s}
/* LIVE only when the feed is really flowing — never a decorative 'always on' */
.cc-pill{color:var(--ink-3);border-color:var(--hair)}
.cc-pill.live{color:#4ade80;border-color:rgba(74,222,128,.45);
  box-shadow:0 0 0 1px rgba(74,222,128,.12),0 0 12px rgba(74,222,128,.22)}
.cc-pill.live .cc-dot{background:#4ade80;animation:pulse-green 2s infinite}
@keyframes pulse-green{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}
  70%{box-shadow:0 0 0 6px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.cc-step{font-size:9.5px;color:var(--ink-3);font:600 .66rem/1 inherit;text-transform:uppercase;letter-spacing:.13em}
.cc-step span{color:var(--ink-2);text-transform:none;letter-spacing:.03em}

.cc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cc-card{position:relative;background:var(--panel);border:1px solid var(--hair);border-radius:8px;
  padding:13px 15px 14px;overflow:hidden}
.cc-card.hero{border-color:var(--hair-2)}
.cc-clabel{color:var(--ink-3);font:600 9.5px/1 inherit;text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px}
.cc-cval{color:var(--ink);font:500 1.32rem/1 inherit;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cc-csub{color:var(--ink-3);font:400 .62rem/1.35 inherit;margin-top:6px}

.cc-fruin{background:var(--panel);border:1px solid var(--hair);border-radius:8px;padding:13px 15px}
.cc-fruin-head{display:flex;justify-content:space-between;color:var(--ink-3);
  font:600 9.5px/1 inherit;text-transform:uppercase;letter-spacing:.11em;margin-bottom:10px}
.cc-fruin-head span:last-child{color:var(--ink-2);text-transform:none;letter-spacing:.03em}
.cc-fruin-bar{display:flex;gap:6px}
.fseg{flex:1;text-align:center;padding:10px 0;border-radius:8px;background:rgba(255,255,255,.04);
  border:1px solid var(--hair);color:var(--ink-3);font:600 10.5px/1 inherit;letter-spacing:.08em;transition:all .15s}
.fseg.on{color:#000;font-weight:800}
.fseg.on.lvl-A{background:#dfe6e9;border-color:#dfe6e9}
.fseg.on.lvl-B{background:#c8d0cc;border-color:#c8d0cc}
.fseg.on.lvl-C{background:#e6b450;border-color:#e6b450}
.fseg.on.lvl-D{background:#e08a3c;border-color:#e08a3c}
.fseg.on.lvl-E{background:#ff8a6b;border-color:#ff8a6b}
.fseg.on.lvl-F{background:#ff6b6b;border-color:#ff6b6b}
.tfruin.lvl-A,.tfruin.lvl-B{background:#dfe6e9}.tfruin.lvl-C{background:#e6b450}
.tfruin.lvl-D{background:#e08a3c}.tfruin.lvl-E{background:#ff8a6b}.tfruin.lvl-F{background:#ff6b6b}

.alert-row{display:flex;flex-wrap:wrap;gap:8px;min-height:4px}
.achip{padding:5px 11px;border-radius:999px;font:600 10px/1 inherit;letter-spacing:.04em}
.achip.bad{background:rgba(255,107,107,.09);color:var(--red);border:1px solid rgba(255,107,107,.32)}
.achip.warn{background:rgba(230,180,80,.08);color:var(--amber);border:1px solid rgba(230,180,80,.3)}

.cc-tabs{display:flex;gap:24px;border-bottom:1px solid var(--hair)}
.cct{background:none;border:none;color:var(--ink-3);font:600 .8rem/1 inherit;padding:12px 0;cursor:pointer;position:relative}
.cct:hover{color:var(--ink-2)}
.cct.active{color:var(--ink)}
.cct.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}

.cc-stage{position:relative;aspect-ratio:16/9;max-height:56vh;border-radius:8px;overflow:hidden;
  border:1px solid var(--hair);background:#000}
.cc-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.cc-fs{position:absolute;right:12px;bottom:12px}

.cc-chart-title{color:var(--ink);font:600 .8rem/1 inherit;margin:14px 0 8px;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cc-chart-now{color:var(--ink);font:600 .88rem/1 inherit;font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-chart-now small{color:var(--ink-3);font-weight:500;font-size:.75em}
.cc-chart{width:100%;height:200px;background:rgba(255,255,255,.02);border:1px solid var(--hair);border-radius:7px;display:block}

.cc-table-wrap{max-height:60vh;overflow:auto;border:1px solid var(--hair);border-radius:7px;background:var(--panel)}
.cc-table{width:100%;border-collapse:collapse;font:500 .8rem/1 inherit}
.cc-table th{position:sticky;top:0;background:var(--panel-2);color:var(--ink-3);text-align:left;padding:10px 12px;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--hair)}
.cc-table td{padding:9px 12px;color:var(--ink-2);border-bottom:1px solid rgba(255,255,255,.05);font-variant-numeric:tabular-nums}
.tfruin{display:inline-block;min-width:1.3em;text-align:center;border-radius:4px;padding:1px 6px;color:#000;font-weight:800}

.cc-advisory{background:var(--panel);border:1px solid var(--hair);border-left:2px solid var(--ink-3);
  border-radius:7px;padding:12px 14px;color:var(--ink-2);font:400 .84rem/1.55 inherit;margin-bottom:12px}
.cc-advisory b{color:var(--ink);font-weight:600}
.cc-verdict{display:flex;flex-direction:column;gap:3px;border-radius:7px;padding:14px 16px;margin-bottom:12px}
.cc-verdict b{font:700 .98rem/1.2 inherit}
.cc-verdict span{font:400 .8rem/1.3 inherit;color:var(--ink-3)}
.cc-verdict.ok{background:rgba(255,255,255,.03);border:1px solid var(--hair)}
.cc-verdict.ok b{color:var(--ink)}
.cc-verdict.bad{background:rgba(255,107,107,.06);border:1px solid rgba(255,107,107,.3)}
.cc-verdict.bad b{color:var(--red)}
.cc-details{margin-top:12px;border:1px solid var(--hair);border-radius:7px;background:var(--panel)}
.cc-details summary{padding:11px 14px;color:var(--ink-2);font:600 .8rem/1 inherit;cursor:pointer}
.cc-details-body{padding:0 14px 14px;color:var(--ink-2);font:400 .78rem/1.6 inherit}

.cc-ctrls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.cc-btn{background:transparent;color:var(--ink-2);border:1px solid var(--hair);border-radius:999px;
  padding:10px 16px;font:600 .8rem/1 inherit;cursor:pointer;transition:all .15s}
.cc-btn:hover{border-color:var(--hair-2)}
.cc-btn.primary{background:var(--ink);border-color:var(--ink);color:#000}
.cc-btn.danger{background:transparent;border-color:rgba(255,107,107,.4);color:var(--red)}
.cc-btn.ghost{background:transparent;color:var(--ink-2)}
.needs-control{display:inline-flex;flex-wrap:wrap;gap:8px}
.cc-ctrl-status{font:600 .64rem/1 inherit;color:var(--ink-2);padding:7px 11px;
  background:var(--panel);border:1px solid var(--hair);border-radius:999px}
.code-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.code-row code{flex:1;background:rgba(255,255,255,.03);border:1px solid var(--hair);border-radius:8px;
  padding:8px 10px;color:var(--ink);font:500 .76rem/1.35 var(--mono);word-break:break-all}
.pilot-qr{margin-top:10px;display:inline-block;background:#fff;padding:10px;border-radius:7px;line-height:0}
.pilot-qr svg{width:150px;height:150px;display:block}
.pilot-qr:empty{display:none}

/* ───────────── auth gate ───────────── */
.auth-gate{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;padding:24px;background:#000}
.auth-card{width:100%;max-width:360px;padding:32px 26px 26px;text-align:center}
.auth-logo{width:56px;height:56px;margin:0 auto 14px;border-radius:14px;overflow:hidden;border:1px solid var(--hair)}
.auth-logo img{width:100%;height:100%;display:block;filter:grayscale(1) brightness(1.4)}
.auth-title{font:700 1.02rem/1.15 inherit;color:var(--ink);letter-spacing:.13em}
.auth-sub{font:600 .6rem/1.4 inherit;color:var(--ink-3);margin:9px 0 22px;letter-spacing:.13em}
.auth-in{width:100%;box-sizing:border-box;background:rgba(255,255,255,.03);border:1px solid var(--hair);border-radius:7px;
  padding:13px 14px;margin-bottom:11px;color:var(--ink);font:500 .92rem/1 inherit;outline:none;transition:border .15s}
.auth-in:focus{border-color:var(--hair-2)}
.auth-btn{width:100%;border:none;border-radius:7px;padding:13px;font:700 .82rem/1 inherit;letter-spacing:.12em;
  cursor:pointer;margin-top:4px;transition:filter .15s}
.auth-btn.primary{background:var(--ink);color:#000}
.auth-btn.primary:active{filter:brightness(.85)}
.auth-link{margin-top:15px;color:var(--ink-3);font:500 .8rem/1 inherit;cursor:pointer}
.auth-link:hover{color:var(--ink)}
.auth-err{color:var(--red);font:500 .8rem/1.3 inherit;min-height:16px;margin:2px 0 7px}
.auth-ok{color:var(--ink-2);font:500 .8rem/1.3 inherit;min-height:16px;margin:2px 0 7px}
.auth-foot{color:var(--ink-3);font:500 .7rem/1.5 inherit;max-width:340px;text-align:center}

/* ───────────── super-admin panel ───────────── */
.admin-panel{position:fixed;inset:0;z-index:9100;display:flex;align-items:flex-start;justify-content:center;
  padding:24px 16px;background:rgba(0,0,0,.75);backdrop-filter:blur(4px);overflow:auto}
.ap-card{width:100%;max-width:540px;overflow:hidden;background:var(--panel);border:1px solid var(--hair);border-radius:14px}
.ap-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  border-bottom:1px solid var(--hair);font:600 .88rem/1 inherit;letter-spacing:.11em;color:var(--ink)}
.ap-x{background:none;border:none;color:var(--ink-3);font-size:18px;cursor:pointer;padding:4px 8px}
.ap-x:hover{color:var(--ink)}
.ap-body{padding:8px 20px 22px;max-height:78vh;overflow:auto}
.ap-section{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.ap-section:last-child{border-bottom:none}
.ap-section h4{margin:0 0 11px;color:var(--ink-2);font:600 9.5px/1 inherit;text-transform:uppercase;letter-spacing:.12em}
.ap-list{display:flex;flex-direction:column;gap:7px}
.ap-row{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.03);border:1px solid var(--hair);
  border-radius:8px;padding:9px 12px}
.ap-row span{flex:1;color:var(--ink);font:500 .84rem/1.3 inherit;word-break:break-word}
.ap-row .act-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--ink-3)}
.ap-row .act-dot.on{background:var(--ink)}
.ap-row .ap-uname{flex:1}
.ap-row .dev-badge{flex:0 0 auto;font:600 .7rem/1 inherit;color:var(--ink-3);white-space:nowrap}
.ap-empty{color:var(--ink-3);font:500 .8rem/1 inherit;padding:4px 2px}
.ap-btn{border:1px solid var(--hair);background:transparent;border-radius:999px;padding:8px 13px;
  font:600 .76rem/1 inherit;cursor:pointer;color:var(--ink)}
.ap-btn.ok{background:var(--ink);color:#000;border-color:var(--ink)}
.ap-btn.no{background:transparent;color:var(--red);border-color:rgba(255,107,107,.35)}
.ap-btnrow{display:flex;gap:8px;margin-top:10px}
.ap-lockrow{color:var(--ink-2);font:500 .84rem/1.3 inherit}
.ap-card .auth-in{margin-bottom:9px}

/* ───────────── responsive ───────────── */
@media (max-width:1020px){
  .ops{display:flex;flex-direction:column;overflow-y:auto}
  .stagecell{min-height:52vh}
  .sidebar{overflow:visible;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
  #tpStatus{grid-column:span 2}
  #panelLive{overflow-y:auto}
  .ts b{font-size:15px}
}
@media (max-width:700px){
  .sidebar{grid-template-columns:1fr}
  #tpStatus{grid-column:auto}
  /* strip wraps into a clean 4-col grid (2 rows) instead of scrolling sideways */
  .tstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;overflow:visible}
  .ts{min-width:0}
  .cc-cards{grid-template-columns:repeat(2,1fr)}
  .cc-cval{font-size:1.2rem}
  .cc-stage{max-height:40vh}
  .cc-title{font-size:1rem}
  .cc-tabs{gap:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cc-tabs::-webkit-scrollbar{display:none}
  .cct{white-space:nowrap;padding:11px 0}
  .cc-chart{height:170px}
  .fseg{padding:10px 0;font-size:12px}
  .inst-row canvas{width:118px;height:118px}
  .mapwrap.pip{width:min(230px,46%)}
  }
@media (max-width:860px){
  #modePill,.pill.clock,.topbar .install{display:none !important}
  .topbar{gap:7px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));
    overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .topbar::-webkit-scrollbar{display:none}
  .topbar .title{display:none}
  .topbar .spacer{display:none}
  .topbar > *{flex:0 0 auto}
  .vt{padding:6px 11px;font-size:10px}
  .dronesel{font-size:10px;padding:5px 10px;max-width:112px}
  #latencyPill{min-width:46px;padding:3px 8px;font-size:10px}
  .ops{padding:8px;gap:8px}
  .ts{min-width:76px;padding:7px 10px 8px}
}

/* ---- autonomous crowd survey: video-tap overlay -------------------------- */
.sv-overlay { position:fixed; inset:0; width:100%; height:100%;
              pointer-events:none; z-index:135; display:none; }
body.sv-marking .cc-stage::after {
  content:'DRAW MODE — TAP THE CORNERS OF THE CROWD';
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.6); border:1px solid var(--hair-2); color:var(--ink-2);
  font:600 8.5px/1 inherit; letter-spacing:.12em; padding:5px 9px; border-radius:4px;
  pointer-events:none; z-index:20; white-space:nowrap;
}
body.sv-marking #video, body.sv-marking #aVideo { cursor:crosshair; }

/* ---- autonomous crowd survey bar ---------------------------------------- */
.sv-alt { display:inline-flex; align-items:center; gap:.3rem; color:var(--ink-3); font-size:.64rem; letter-spacing:.06em; }
.sv-in { width:56px; background:#12131b; border:1px solid #262835; color:#e6e8f0;
         border-radius:999px; padding:.25rem .4rem; font-size:.82rem; }
.sv-note { color:var(--ink-3); font-size:.68rem; margin-left:.5rem; flex:1 1 100%; }

/* ---- map hide (clean fullscreen video on LIVE OPS) ----------------------- */

/* ---- SIMULATED data must be unmistakable, never mistaken for a real flight -- */
.badge.sim, .fs-sim{background:rgba(230,180,80,.16)!important;
  border-color:rgba(230,180,80,.65)!important;color:var(--amber)!important;font-weight:700}
.cc-pill.simulated{color:var(--amber);border-color:rgba(230,180,80,.6)}
.cc-pill.simulated .cc-dot{background:var(--amber)}

/* ═══════════ map panel in the sidebar (replaces the video-overlay PiP) ══════ */
.tpanel-map{padding:0;overflow:hidden}
.tpanel-map .tp-head{padding:9px 12px 8px}
.tpanel-map .mapwrap{position:relative;width:100%;aspect-ratio:16/11;
  border:none;border-radius:0;overflow:hidden;background:#0b0c10}
.tpanel-map #mapBox{position:absolute;inset:0}
.tpanel-map .map-tools{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:6px;z-index:500}
.mfs{background:transparent;border:1px solid var(--hair);color:var(--ink-3);
  border-radius:999px;width:22px;height:22px;line-height:1;font-size:10px;cursor:pointer;padding:0}
.mfs:hover{border-color:var(--hair-2);color:var(--ink)}

/* full-screen map: overlays the workspace, click ⛶ again to return to the rail */
body.mapfs .tpanel-map{position:fixed;inset:10px;z-index:120;background:var(--panel);
  border:1px solid var(--hair-2);border-radius:8px;display:flex;flex-direction:column}
body.mapfs .tpanel-map .mapwrap{flex:1 1 auto;aspect-ratio:auto}
body.mapfs .ops{filter:blur(1px)}

/* ═══ HEADER: ONE type size for everything in the bar (= Admin / Sign out) ═══ */
.topbar .title,
.topbar .vt,
.topbar .dronesel,
.topbar .pill{font-size:9.5px!important;letter-spacing:.09em}
.topbar .vt{padding:5px 12px}
.topbar .dronesel{padding:4px 11px}
.topbar .pill{padding:4px 11px;border-radius:999px}
.topbar .viewtoggle{border-radius:999px}
/* the drone status chip is a pill like the rest */
#modePill,#latencyPill,#userChip,#misClock{border-radius:999px}

/* ═══ survey draw mode: full-bleed feed + strobing lock state ═══ */
body.sv-full .cc-stage{position:fixed;inset:0;z-index:130;max-height:none;
  border-radius:0;border:none;background:#000}
body.sv-full .cc-stage video{object-fit:contain}
body.sv-full .surveyBarFloat,body.sv-full #surveyBar{position:fixed;left:0;right:0;bottom:0;
  z-index:140;background:rgba(0,0,0,.82);border-top:1px solid var(--hair);
  padding:10px 14px;margin:0;backdrop-filter:blur(6px)}
.sv-lock{display:none}
body.sv-marking .sv-lock{display:block;position:fixed;top:14px;left:50%;
  transform:translateX(-50%);z-index:150;padding:7px 14px;border-radius:999px;
  font:700 9.5px/1 inherit;letter-spacing:.14em;white-space:nowrap;
  border:1px solid var(--hair-2);background:rgba(0,0,0,.72)}
.sv-lock.ok{color:#4ade80;border-color:rgba(74,222,128,.5);
  animation:lockstrobe 1.6s ease-in-out infinite}
.sv-lock.warn{color:var(--amber);border-color:rgba(230,180,80,.6);
  animation:lockstrobe .9s ease-in-out infinite}
.sv-lock.bad{color:var(--red);border-color:rgba(255,107,107,.6);
  animation:lockstrobe .7s ease-in-out infinite}
@keyframes lockstrobe{0%,100%{opacity:1}50%{opacity:.45}}
body.sv-marking #aVideo{cursor:crosshair}
/* LIVE view stays clean: no survey overlay there at all */
#panelLive .sv-overlay{display:none!important}

/* auto-mode coverage progress */
.sv-prog{display:inline-flex;align-items:center;gap:8px;min-width:150px}
.sv-prog i{flex:1 1 auto;height:4px;border-radius:999px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
.sv-prog i::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--p,0%);
  background:#4ade80;transition:width .4s}
.sv-prog b{font:700 9.5px/1 inherit;color:var(--ink-2);letter-spacing:.08em;min-width:34px;text-align:right}

/* marks + forming polygon must read clearly over bright aerial video */
.sv-overlay polygon{filter:drop-shadow(0 0 3px rgba(0,0,0,.85))}
.sv-overlay line,.sv-overlay polyline{filter:drop-shadow(0 0 3px rgba(0,0,0,.85))}
.sv-overlay circle{filter:drop-shadow(0 0 3px rgba(0,0,0,.9))}
.cc-btn.busy{opacity:.55;pointer-events:none}

/* violence card: score + explicit safe/unsafe verdict */
.vio-banner{margin-top:7px;display:inline-block;padding:3px 9px;border-radius:999px;
  font:700 9.5px/1 inherit;letter-spacing:.12em;border:1px solid var(--hair);color:var(--ink-3)}
.vio-banner.safe{color:#4ade80;border-color:rgba(74,222,128,.5);background:rgba(74,222,128,.08)}
.vio-banner.unsafe{color:var(--red);border-color:rgba(255,107,107,.6);background:rgba(255,107,107,.10);
  animation:lockstrobe 1s ease-in-out infinite}
/* transient red warning toast */
.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:200;
  background:rgba(40,8,10,.94);border:1px solid rgba(255,107,107,.75);color:#ff9a9a;
  font:700 10px/1.35 inherit;letter-spacing:.09em;padding:10px 16px;border-radius:999px;
  box-shadow:0 6px 24px rgba(0,0,0,.5);animation:toastin .18s ease-out}
@keyframes toastin{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ═══════════ ACTIONS panel — survey results a commander can act on ════════ */
/* Danger must be visible from any tab, so the tab button itself carries it. */
.cct-badge{display:inline-block;margin-left:6px;min-width:16px;padding:1px 5px;border-radius:999px;
  background:var(--red);color:#1a0507;font:700 9px/1.5 inherit;vertical-align:middle}
.cct.alarm{color:var(--red)}
.cct.pulse{animation:insPulse 1.1s ease-in-out 3}
@keyframes insPulse{0%,100%{opacity:1}50%{opacity:.35}}

.ins-unavail{color:var(--ink-3);font:400 .72rem/1.6 inherit;background:var(--panel);
  border:1px solid var(--hair);border-radius:8px;padding:14px 16px}
.ins-sim{margin-bottom:12px;padding:10px 14px;border-radius:8px;font:700 10px/1.5 inherit;
  letter-spacing:.09em;color:var(--amber);background:rgba(230,180,80,.10);
  border:1px solid rgba(230,180,80,.55)}

.ins-alert{margin-bottom:14px;border-radius:8px;padding:13px 15px;
  background:rgba(255,107,107,.09);border:1px solid rgba(255,107,107,.55)}
.ins-alert-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.ins-alert-head b{color:var(--red);font:700 11px/1 inherit;letter-spacing:.12em}
.ins-alert-head span{color:var(--ink-2);font:400 .68rem/1.4 inherit}

.ins-pin-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 0;
  border-top:1px solid var(--hair);cursor:pointer}
.ins-pin-row:hover{background:rgba(255,255,255,.03)}
/* EVERY pin is at or above the intervene-now threshold, so none of them are
   merely "caution" — amber would under-signal a location needing action. */
.ins-pin-n{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--red);color:#1a0507;font:700 10px/1 inherit}
.ins-pin-n.sev{background:#ff2d2d;color:#fff;box-shadow:0 0 0 2px rgba(255,45,45,.35)}
.ins-pin-n.ok{background:rgba(74,222,128,.9);color:#04160a}
.ins-pin-d{color:var(--ink);font:600 .82rem/1 inherit;font-variant-numeric:tabular-nums}
.ins-pin-d i{color:var(--ink-3);font-style:normal;font-size:.66rem}
.ins-pin-p{color:var(--ink-3);font:400 .68rem/1.3 inherit;flex:1 1 140px}
.ins-pin-c{color:var(--ink-2);font:500 .68rem/1 var(--mono);letter-spacing:.02em}
.ins-copy{padding:.18rem .5rem;font-size:.64rem}

.ins-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cc-cval.ok{color:#4ade80} .cc-cval.warn{color:var(--amber)} .cc-cval.bad{color:var(--red)}
.cc-csub.warn{color:var(--amber)}

.ins-sec{margin-top:16px}
.ins-sec-head{color:var(--ink-3);font:600 9.5px/1 inherit;text-transform:uppercase;
  letter-spacing:.11em;margin-bottom:9px}
.ins-notes{margin:0;padding-left:16px;color:var(--ink-3);font:400 .68rem/1.6 inherit}
.ins-notes li{margin:3px 0}
.ins-savebar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.ins-savebar .sv-in{width:210px;border-radius:8px}
.ins-rec{margin-top:10px;padding:11px 14px;border-radius:8px;color:#4ade80;
  font:600 .74rem/1.5 inherit;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.35)}
.ins-stale td{opacity:.55}
.cc-table td.bad{color:var(--red)} .cc-table td.warn{color:var(--amber)}
.cc-table td.ok{color:#4ade80}
.hint.warn{color:var(--amber)}

/* map pins for hotspots + clear ground */
.ins-pin{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--red);color:#1a0507;font:700 12px/1 var(--mono);
  border:2px solid rgba(0,0,0,.55);box-shadow:0 0 10px rgba(0,0,0,.6)}
.ins-pin.sev{background:#ff2d2d;color:#fff;animation:insPulse 1.2s ease-in-out infinite}
.ins-clear-pin{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:rgba(74,222,128,.92);color:#04160a;font:700 12px/1 inherit;
  border:2px solid rgba(0,0,0,.5)}

@media(max-width:760px){.ins-cards{grid-template-columns:repeat(2,1fr)}}
/* a caution must never be mistaken for a green-light instruction */
.ins-rec.blocked{color:var(--amber);background:rgba(230,180,80,.08);
  border-color:rgba(230,180,80,.45)}

/* ---- verdict bar: the three-second answer ------------------------------- */
.ins-verdict{margin-bottom:14px;border-radius:8px;padding:13px 15px;
  background:var(--panel);border:1px solid var(--hair)}
.ins-verdict.ok{border-color:rgba(74,222,128,.45);background:rgba(74,222,128,.06)}
.ins-verdict.warn{border-color:rgba(230,180,80,.5);background:rgba(230,180,80,.07)}
.ins-verdict.bad{border-color:rgba(255,107,107,.55);background:rgba(255,107,107,.08)}
.ins-vhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ins-vlevel{font:700 13px/1 inherit;letter-spacing:.13em;color:var(--ink)}
.ins-verdict.ok .ins-vlevel{color:#4ade80}
.ins-verdict.warn .ins-vlevel{color:var(--amber)}
.ins-verdict.bad .ins-vlevel{color:var(--red)}
.ins-vwhy{color:var(--ink-3);font:400 .7rem/1.4 inherit}
.ins-vlist{margin:9px 0 0;padding-left:16px;color:var(--ink-2);font:400 .72rem/1.65 inherit}
.ins-vlist li{margin:2px 0}
.ins-vlist b{text-transform:uppercase;letter-spacing:.08em;font-size:.62rem;margin-right:6px}
.ins-vlist b.ok{color:#4ade80} .ins-vlist b.warn{color:var(--amber)}
.ins-vlist b.bad{color:var(--red)}

/* ---- what this covers --------------------------------------------------- */
.ins-mini{float:right;padding:.18rem .55rem;font-size:.62rem;text-transform:none;letter-spacing:0}
.ins-mini.on{color:#4ade80;border-color:rgba(74,222,128,.5)}
.ins-cover{display:flex;flex-direction:column;gap:1px}
.ins-cov-row{display:flex;gap:11px;align-items:flex-start;padding:9px 11px;
  background:var(--panel);border:1px solid var(--hair);border-radius:6px}
.ins-cov-row.ok{border-color:rgba(74,222,128,.3)}
.ins-cov-row.warn{border-color:rgba(230,180,80,.4);background:rgba(230,180,80,.05)}
.ins-cov-i{flex:none;font-size:14px;line-height:1.3;color:var(--ink-3)}
.ins-cov-row.ok .ins-cov-i{color:#4ade80}
.ins-cov-row.warn .ins-cov-i{color:var(--amber)}
.ins-cov-row b{display:block;color:var(--ink);font:600 .74rem/1.4 inherit}
.ins-cov-row span{display:block;color:var(--ink-3);font:400 .68rem/1.55 inherit;margin-top:2px}

/* ---- trend & forecast --------------------------------------------------- */
.ins-tr{background:var(--panel);border:1px solid var(--hair);border-radius:8px;
  padding:12px 14px;margin-bottom:9px}
.ins-tr-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.ins-tr-head b{color:var(--ink);font:600 .82rem/1 inherit}
.ins-tr-badge{padding:2px 7px;border-radius:999px;font:700 8.5px/1.6 inherit;
  letter-spacing:.1em;border:1px solid var(--hair);color:var(--ink-3)}
.ins-tr-badge.ok{color:#4ade80;border-color:rgba(74,222,128,.45)}
.ins-tr-badge.warn{color:var(--amber);border-color:rgba(230,180,80,.5)}
.ins-tr-badge.bad{color:var(--red);border-color:rgba(255,107,107,.55)}
.ins-tr-n{margin-left:auto;color:var(--ink-3);font:400 .64rem/1 inherit}
.ins-tr-rate{font:600 1.05rem/1.2 inherit;color:var(--ink);font-variant-numeric:tabular-nums}
.ins-tr-rate.ok{color:#4ade80} .ins-tr-rate.bad{color:var(--red)}
.ins-tr-rate i{color:var(--ink-3);font-style:normal;font-size:.62rem;font-weight:400}
.ins-tr-sum{color:var(--ink-3);font:400 .68rem/1.5 inherit;margin-top:4px}
.ins-tr-wait{color:var(--ink-3);font:400 .68rem/1.55 inherit;font-style:italic}
.ins-tr-fc{margin-top:9px;padding:9px 11px;border-radius:6px;font:400 .7rem/1.5 inherit}
.ins-tr-fc.warn{color:var(--amber);background:rgba(230,180,80,.08);
  border:1px solid rgba(230,180,80,.35)}
.ins-tr-fc.bad{color:var(--red);background:rgba(255,107,107,.09);
  border:1px solid rgba(255,107,107,.45)}
.ins-tr-fc b{letter-spacing:.1em;font-size:.62rem;margin-right:6px}
.ins-tr-cav{display:block;margin-top:5px;color:var(--ink-3);font-size:.64rem;line-height:1.5}
.ins-tr-drift{margin-top:8px;color:var(--ink-2);font:500 .7rem/1.5 inherit}

/* replay: real recorded data, but not live — distinct from the sim warning */
.ins-replay{margin-bottom:12px;padding:10px 14px;border-radius:8px;
  font:600 10px/1.55 inherit;letter-spacing:.06em;color:#93c5fd;
  background:rgba(96,165,250,.10);border:1px solid rgba(96,165,250,.45)}

/* ---- scene chip --------------------------------------------------------- */
.ins-scene{margin-bottom:12px;padding:10px 14px;border-radius:8px;
  background:rgba(255,255,255,.03);border:1px solid var(--hair)}
.ins-scene b{display:block;color:var(--ink);font:600 .78rem/1.3 inherit}
.ins-scene span{display:block;color:var(--ink-3);font:400 .68rem/1.55 inherit;margin-top:3px}
.ins-scene.undeclared{border-color:rgba(230,180,80,.4)}

/* ---- withheld, with reasons -------------------------------------------- */
.ins-na{display:flex;flex-direction:column;gap:1px}
.ins-na-row{display:flex;gap:12px;align-items:baseline;padding:7px 11px;
  background:var(--panel);border:1px solid var(--hair);border-radius:6px}
.ins-na-row.scene{border-left:2px solid rgba(96,165,250,.55)}
.ins-na-row b{flex:none;min-width:150px;color:var(--ink-2);font:600 .7rem/1.4 inherit}
.ins-na-row span{color:var(--ink-3);font:400 .67rem/1.5 inherit}
.ins-std{margin-top:14px;color:var(--ink-3);font:400 .62rem/1.5 inherit;
  padding-top:10px;border-top:1px solid var(--hair)}

/* ═══════════════════════════════════════════════════════════════════════════
   ACTIONS — redesigned.
   Read top-down and abandonable at any point: verdict, dispatch, pillars,
   then everything else folded away. Calm by default so that colour means
   something when it appears; generous spacing so it survives being read at
   arm's length on a bright field tablet.
   ═══════════════════════════════════════════════════════════════════════════ */
.ax-unavail{color:var(--ink-3);font:400 .78rem/1.65 inherit;background:var(--panel);
  border:1px solid var(--hair);border-radius:14px;padding:20px 22px}

.ax-flag{margin-bottom:14px;padding:12px 16px;border-radius:12px;
  font:600 10.5px/1.55 inherit;letter-spacing:.06em}
.ax-flag.sim{color:var(--amber);background:rgba(230,180,80,.10);
  border:1px solid rgba(230,180,80,.5)}
.ax-flag.replay{color:#93c5fd;background:rgba(96,165,250,.10);
  border:1px solid rgba(96,165,250,.42)}

/* ── 1 · VERDICT ─────────────────────────────────────────────────────────── */
.ax-verdict{border-radius:18px;padding:24px 26px;margin-bottom:14px;
  background:var(--panel);border:1px solid var(--hair)}
.ax-verdict.ok{background:rgba(74,222,128,.07);border-color:rgba(74,222,128,.34)}
.ax-verdict.warn{background:rgba(230,180,80,.08);border-color:rgba(230,180,80,.42)}
.ax-verdict.bad{background:rgba(255,107,107,.09);border-color:rgba(255,107,107,.48)}
.ax-v-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.ax-v-word{font:700 2.1rem/1 inherit;letter-spacing:-.03em;color:var(--ink)}
.ax-verdict.ok .ax-v-word{color:#4ade80}
.ax-verdict.warn .ax-v-word{color:var(--amber)}
.ax-verdict.bad .ax-v-word{color:var(--red)}
.ax-v-why{color:var(--ink-2);font:400 .82rem/1.4 inherit}
.ax-v-because{margin-top:11px;color:var(--ink-3);font:400 .73rem/1.6 inherit;max-width:78ch}

/* ── 2 · ACT NOW ─────────────────────────────────────────────────────────── */
.ax-act{border-radius:16px;padding:18px 20px;margin-bottom:14px;
  background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.45)}
.ax-act-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px;
  font:700 11px/1 inherit;letter-spacing:.14em;color:var(--red)}
.ax-act-h em{font:400 .7rem/1.4 inherit;letter-spacing:0;color:var(--ink-3);font-style:normal}
.ax-act-row{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:10px 0;
  border-top:1px solid rgba(255,255,255,.07);cursor:pointer}
.ax-act-row:first-of-type{border-top:0}
.ax-act-row:hover{background:rgba(255,255,255,.03)}
.ax-act-n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--red);color:#1a0507;font:700 10.5px/1 inherit}
.ax-act-n.ok{background:rgba(74,222,128,.9);color:#04160a}
.ax-act-d{color:var(--ink);font:600 1rem/1 inherit;font-variant-numeric:tabular-nums}
.ax-act-d i{color:var(--ink-3);font-style:normal;font-size:.66rem;font-weight:400}
.ax-act-t{color:var(--ink-3);font:400 .7rem/1.4 inherit;flex:1 1 140px}
.ax-act-c{color:var(--ink-2);font:500 .7rem/1 var(--mono);letter-spacing:.02em}
.ax-act-b{background:transparent;border:1px solid var(--hair-2,var(--hair));color:var(--ink-2);
  border-radius:8px;padding:.3rem .6rem;font:500 .64rem/1 inherit;cursor:pointer;
  letter-spacing:.06em}
.ax-act-b:hover{border-color:var(--ink-3);color:var(--ink)}

/* ── 3 · THE THREE PILLARS ───────────────────────────────────────────────── */
.ax-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.ax-tile{background:var(--panel);border:1px solid var(--hair);border-radius:16px;
  padding:20px 22px;transition:border-color .2s}
.ax-tile.ok{border-color:rgba(74,222,128,.32);background:rgba(74,222,128,.05)}
.ax-tile.warn{border-color:rgba(230,180,80,.4);background:rgba(230,180,80,.05)}
.ax-tile.bad{border-color:rgba(255,107,107,.48);background:rgba(255,107,107,.07)}
.ax-t-l{color:var(--ink-3);font:600 9.5px/1 inherit;text-transform:uppercase;
  letter-spacing:.14em;margin-bottom:13px}
.ax-t-v{color:var(--ink);font:600 2rem/1 inherit;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums}
.ax-tile.ok .ax-t-v{color:#4ade80}
.ax-tile.warn .ax-t-v{color:var(--amber)}
.ax-tile.bad .ax-t-v{color:var(--red)}
.ax-t-s{color:var(--ink-3);font:400 .68rem/1.5 inherit;margin-top:11px}

/* ── 4 · SECONDARY MEASUREMENTS ──────────────────────────────────────────── */
.ax-sub{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.ax-sub-i{background:var(--panel);border:1px solid var(--hair);border-radius:12px;
  padding:14px 16px;display:flex;flex-direction:column;gap:5px}
.ax-sub-i span{color:var(--ink-3);font:600 9px/1 inherit;text-transform:uppercase;
  letter-spacing:.13em}
.ax-sub-i b{color:var(--ink);font:600 .95rem/1.2 inherit;font-variant-numeric:tabular-nums}
.ax-sub-i b.ok{color:#4ade80} .ax-sub-i b.warn{color:var(--amber)} .ax-sub-i b.bad{color:var(--red)}
.ax-sub-i em{color:var(--ink-3);font:400 .65rem/1.45 inherit;font-style:normal}

/* ── 5-8 · FOLDS — present but out of the way ────────────────────────────── */
.ax-fold{background:var(--panel);border:1px solid var(--hair);border-radius:12px;
  margin-bottom:8px;overflow:hidden}
.ax-fold>summary{cursor:pointer;padding:13px 18px;color:var(--ink-2);
  font:600 .74rem/1 inherit;letter-spacing:.02em;list-style:none;
  display:flex;align-items:center;gap:12px}
.ax-fold>summary::-webkit-details-marker{display:none}
.ax-fold>summary::before{content:'›';color:var(--ink-3);font-size:1.05rem;line-height:1;
  transition:transform .18s;display:inline-block}
.ax-fold[open]>summary::before{transform:rotate(90deg)}
.ax-fold>summary:hover{color:var(--ink)}
.ax-fold>*:not(summary){padding:2px 18px 18px}

.ax-mini{margin-left:auto;background:transparent;border:1px solid var(--hair);
  color:var(--ink-3);border-radius:999px;padding:.24rem .62rem;font:500 .62rem/1 inherit;
  cursor:pointer}
.ax-mini.on{color:#4ade80;border-color:rgba(74,222,128,.5)}

.ax-cover{display:flex;flex-direction:column;gap:8px}
.ax-notes{margin:0;padding-left:17px;color:var(--ink-3);font:400 .68rem/1.65 inherit}
.ax-na{display:flex;flex-direction:column;gap:6px}
.ax-std{margin-top:14px;color:var(--ink-3);font:400 .62rem/1.55 inherit;
  padding-top:12px;border-top:1px solid var(--hair)}

.ax-savebar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.ax-in{background:#12131b;border:1px solid #262835;color:#e6e8f0;border-radius:9px;
  padding:.4rem .7rem;font-size:.78rem;width:220px}
.ax-btn{background:var(--ink);color:#05070b;border:none;border-radius:9px;
  padding:.42rem .85rem;font:600 .7rem/1 inherit;cursor:pointer}
.ax-btn.ghost{background:transparent;border:1px solid var(--hair);color:var(--ink-2)}
.ax-btn.ghost:hover{border-color:var(--ink-3);color:var(--ink)}
.ax-rec{margin-top:11px;padding:12px 15px;border-radius:10px;color:#4ade80;
  font:600 .74rem/1.5 inherit;background:rgba(74,222,128,.08);
  border:1px solid rgba(74,222,128,.35)}
.ax-rec.blocked{color:var(--amber);background:rgba(230,180,80,.08);
  border-color:rgba(230,180,80,.45)}

/* ── SURVEY DRAWER — hardware, below safety, shut by default ─────────────── */
.ax-drawer{background:var(--panel);border:1px solid var(--hair);border-radius:12px;
  overflow:hidden;margin-top:4px}
.ax-drawer>summary{cursor:pointer;padding:14px 18px;color:var(--ink-2);
  font:600 .76rem/1 inherit;list-style:none;display:flex;align-items:center;gap:12px}
.ax-drawer>summary::-webkit-details-marker{display:none}
.ax-drawer>summary::before{content:'›';color:var(--ink-3);font-size:1.05rem;line-height:1;
  transition:transform .18s;display:inline-block}
.ax-drawer[open]>summary::before{transform:rotate(90deg)}
.ax-drawer>summary em{font:400 .68rem/1.4 inherit;color:var(--ink-3);font-style:normal;
  margin-left:auto}
.ax-drawer>summary:hover{color:var(--ink)}
.ax-drawer .cc-ctrls{border:0;padding:2px 18px 18px;background:transparent}

@media (max-width:820px){
  .ax-tiles,.ax-sub{grid-template-columns:1fr}
  .ax-v-word{font-size:1.7rem}
}
@media (prefers-reduced-motion:reduce){.ax-fold>summary::before,.ax-drawer>summary::before{transition:none}}

/* ---- survey count-mode selector ---------------------------------------- */
/* A segmented control rather than a checkbox: the two modes are peers, and the
   operator should see both names and pick, not decode what "on" means. */
.sv-mode{display:inline-flex;border:1px solid #2a3342;border-radius:8px;overflow:hidden}
.sv-seg{background:transparent;border:0;color:var(--ink-3);cursor:pointer;
  font:500 .72rem/1 inherit;padding:.44rem .7rem;white-space:nowrap}
.sv-seg + .sv-seg{border-left:1px solid #2a3342}
.sv-seg:hover{color:var(--ink)}
.sv-seg.on{background:rgba(96,165,250,.16);color:#bfdbfe}
.sv-photo-note{font:400 .68rem/1.5 inherit;color:var(--ink-3);margin-top:6px;
  padding-left:10px;border-left:2px solid rgba(96,165,250,.5)}
.sv-photo-note b{color:var(--ink);font-weight:600}

/* ---- the planning photo the survey area is drawn on --------------------- */
/* The still is the measuring instrument here: a corner clicked on it becomes a
   corner of the ground that gets flown. So it gets the full width of the
   drawer and a crosshair, and the drawn shape is never dimmer than the photo
   underneath it. */
.sv-photo{flex:1 1 100%;margin-top:10px;border:1px solid var(--hair-2);
  border-radius:10px;background:var(--panel-2);overflow:hidden}
.sv-photo-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 10px;border-bottom:1px solid var(--hair);
  font:600 .74rem/1.3 inherit;color:var(--ink)}
.sv-photo-meta{font:400 .68rem/1.3 inherit;color:var(--ink-3)}
.sv-photo-stage{background:#05070a;text-align:center;line-height:0;padding:0}
/* Shrink-wraps the photo so the SVG overlay and the picture are the same box.
   The whole still is always visible -- it is bounded by height as well as
   width -- because an area has to be drawn around a crowd that is in frame,
   and a picture you have to scroll is one you cannot draw around. */
.sv-photo-canvas{position:relative;display:inline-block;max-width:100%}
.sv-photo-canvas img{display:block;max-width:100%;max-height:62vh;
  width:auto;height:auto;cursor:crosshair}
/* Before a still has arrived there is nothing to show: a broken-image icon
   would read as a failure when the aircraft is simply still uploading. */
.sv-photo-canvas img:not([src]){display:none}
.sv-photo-canvas svg{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none}
.sv-photo-msg{font:400 .7rem/1.5 inherit;color:var(--ink-2);padding:8px 10px;
  border-top:1px solid var(--hair)}
.sv-photo-msg.bad{color:var(--red)}
@media (max-width:760px){.sv-photo-stage{max-height:48vh}}

/* ═══════════════ CRUSH LOCATIONS ═══════════════
   The panel a commander reads under pressure. Type is large enough to read at
   arm's length, the threshold is the only red line on the chart, and a
   coordinate is always monospaced so digits line up between rows. */
.cx{display:flex;flex-direction:column;gap:14px}
.cx-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.cx-title{font:600 1.02rem/1.2 inherit;color:var(--ink)}
.cx-sub{font:400 .72rem/1.5 inherit;color:var(--ink-3);margin-top:3px}
.cx-thr{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:250px}
.cx-thr label{font:500 .64rem/1 inherit;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.cx-sel{background:#12131b;border:1px solid #2a3342;color:#e6e8f0;border-radius:8px;
  padding:.4rem .6rem;font-size:.78rem;min-width:250px}
.cx-thr-note{font:400 .66rem/1.45 inherit;color:var(--ink-3);text-align:right;max-width:270px}

.cx-unavail{background:rgba(255,255,255,.03);border:1px solid #262835;border-radius:10px;
  padding:16px 18px;color:var(--ink-3);font:400 .78rem/1.6 inherit}

/* headline state */
.cx-state{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  border-radius:10px;padding:14px 16px;border:1px solid #262835;background:rgba(255,255,255,.02)}
.cx-state b{font:700 1.06rem/1 inherit;letter-spacing:.02em}
.cx-state span:last-child{font:400 .78rem/1.5 inherit;color:var(--ink-3)}
.cx-state.ok{border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.06)}
.cx-state.ok b{color:#4ade80}
.cx-state.warn{border-color:rgba(230,180,80,.45);background:rgba(230,180,80,.08)}
.cx-state.warn b{color:var(--amber,#e6b450)}
.cx-state.bad{border-color:rgba(255,90,90,.55);background:rgba(255,90,90,.10)}
.cx-state.bad b{color:#ff6b6b}
.cx-dot{width:9px;height:9px;border-radius:50%;flex:none;background:#4ade80}
.cx-dot.warn{background:var(--amber,#e6b450)}
.cx-dot.bad{background:#ff5a5a;animation:cxpulse 1.5s infinite}
@keyframes cxpulse{0%,100%{opacity:1}50%{opacity:.35}}

/* chart */
.cx-chart-wrap{border:1px solid #262835;border-radius:10px;padding:12px 14px 8px;
  background:rgba(255,255,255,.02)}
.cx-chart-head{display:flex;justify-content:space-between;align-items:center;
  font:500 .64rem/1 inherit;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px}
.cx-legend{display:flex;align-items:center;gap:8px;letter-spacing:.04em;text-transform:none}
.cx-lg-line{display:inline-block;width:16px;height:2px;background:#ff5a5a;vertical-align:middle}
.cx-lg-area{display:inline-block;width:16px;height:2px;background:#60a5fa;vertical-align:middle}
.cx-chart{width:100%;height:200px;display:block;overflow:visible}
.cx-ch-grid{stroke:#1f2630;stroke-width:1}
.cx-ch-tick{fill:#6b7280;font-size:9px;font-family:inherit}
.cx-ch-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.cx-ch-line.s0,.cx-ch-dot.s0{stroke:#60a5fa;fill:#60a5fa}
.cx-ch-line.s1,.cx-ch-dot.s1{stroke:#a78bfa;fill:#a78bfa}
.cx-ch-line.s2,.cx-ch-dot.s2{stroke:#34d399;fill:#34d399}
.cx-ch-line.s3,.cx-ch-dot.s3{stroke:#fbbf24;fill:#fbbf24}
.cx-ch-line.s0,.cx-ch-line.s1,.cx-ch-line.s2,.cx-ch-line.s3{fill:none}
.cx-ch-thr{stroke:#ff5a5a;stroke-width:2}
.cx-ch-thrlab{fill:#ff8080;font-size:9.5px;letter-spacing:.1em;font-family:inherit}
.cx-ch-empty{fill:#6b7280;font-size:12px;font-family:inherit}
.cx-xaxis{display:flex;justify-content:space-between;font:400 .62rem/1 inherit;
  color:#6b7280;margin-top:6px}

/* incident rows */
.cx-sec-head{font:500 .64rem/1 inherit;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-top:4px}
.cx-row{display:flex;align-items:flex-start;gap:12px;padding:11px 13px;cursor:pointer;
  border:1px solid #262835;border-radius:9px;margin-top:8px;background:rgba(255,255,255,.02)}
.cx-row:hover{border-color:#3a4354}
.cx-row.is-alert{border-color:rgba(255,90,90,.5);background:rgba(255,90,90,.07)}
.cx-row.is-rising{border-color:rgba(230,180,80,.45);background:rgba(230,180,80,.05)}
.cx-n{width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font:700 .7rem/1 inherit;background:#2a3342;color:#e6e8f0}
.cx-row.is-alert .cx-n{background:#ff5a5a;color:#140505}
.cx-row.is-rising .cx-n{background:var(--amber,#e6b450);color:#140f05}
.cx-main{flex:1;min-width:0}
.cx-r1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cx-r1 b{font:700 .96rem/1 inherit}
.cx-r1 b.ok{color:#4ade80} .cx-r1 b.warn{color:var(--amber,#e6b450)} .cx-r1 b.bad{color:#ff6b6b}
.cx-r2{font:400 .7rem/1.5 inherit;color:var(--ink-3);margin-top:4px}
.cx-state-chip{font:600 .58rem/1 inherit;letter-spacing:.1em;padding:3px 7px;border-radius:999px;
  border:1px solid #2a3342;color:var(--ink-3)}
.cx-state-chip.alert{border-color:rgba(255,90,90,.6);color:#ff8080}
.cx-state-chip.rising{border-color:rgba(230,180,80,.6);color:var(--amber,#e6b450)}
.cx-up{color:#ff8080;font:600 .68rem/1 inherit}
.cx-dn{color:#4ade80;font:600 .68rem/1 inherit}
.cx-flat{color:#6b7280;font:400 .68rem/1 inherit}
.cx-eta{color:var(--amber,#e6b450);font:500 .68rem/1 inherit}
.cx-coord{font:400 .66rem/1.5 'JetBrains Mono',ui-monospace,monospace;color:var(--ink-3);
  text-align:right;flex:none;white-space:nowrap}
.cx-empty{color:#6b7280;font:400 .74rem/1.6 inherit;padding:10px 2px}

/* alert history */
.cx-feed{display:flex;gap:10px;align-items:baseline;padding:7px 0;
  border-bottom:1px solid #1c1f2b;font:400 .7rem/1.5 inherit;flex-wrap:wrap}
.cx-fw{color:#6b7280;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.64rem;flex:none}
.cx-fk{font:700 .58rem/1 inherit;letter-spacing:.1em;padding:3px 6px;border-radius:4px;flex:none}
.cx-feed.alert .cx-fk{background:rgba(255,90,90,.16);color:#ff8080}
.cx-feed.worse .cx-fk{background:rgba(255,90,90,.26);color:#ffb0b0}
.cx-feed.cleared .cx-fk{background:rgba(74,222,128,.14);color:#4ade80}
.cx-ft{color:var(--ink-3);flex:1;min-width:200px}
.cx-fc{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.62rem;color:#6b7280;flex:none}

/* map pins */
.cx-pin{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font:700 12px/1 system-ui,sans-serif;color:#0b0b0f;
  background:#9aa0b5;border:2px solid #0b0b0f;box-shadow:0 0 0 2px rgba(0,0,0,.5)}
.cx-pin.ris{background:#e6b450}
.cx-pin.sev{background:#ff5a5a;color:#fff;animation:cxpulse 1.5s infinite}

/* ═══════════════ DENSITY MAP ═══════════════ */
/* The overlay sits on the video CONTENT box, not the element box: with
   object-fit:contain the picture is letterboxed, and an overlay stretched to
   the element would sit off the crowd by the height of the black bars. */
/* NORMAL compositing, deliberately not `screen`. Screen can only lighten, so
   it flattens the picture underneath and the crowd stops being legible through
   its own heatmap. Plain alpha keeps the frame readable and makes the slider
   mean what it says. */
.dm-canvas{position:absolute;pointer-events:none;z-index:3;
  image-rendering:auto;border-radius:6px}

.dm{border:1px solid #262835;border-radius:10px;background:rgba(255,255,255,.02);
  margin-top:16px}
.dm>summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;
  align-items:baseline;gap:12px;flex-wrap:wrap}
.dm>summary::-webkit-details-marker{display:none}
.dm>summary::before{content:'▸';color:var(--ink-3);font-size:.8rem;
  transition:transform .18s ease;display:inline-block}
.dm[open]>summary::before{transform:rotate(90deg)}
.dm-title{font:600 1.02rem/1.2 inherit;color:var(--ink)}
.dm-sub{font:400 .72rem/1.5 inherit;color:var(--ink-3)}
.dm-body{padding:0 16px 16px;display:flex;flex-direction:column;gap:12px}

.dm-bar-row{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap}
.dm-stat{display:flex;flex-direction:column;gap:3px}
.dm-stat label{font:500 .6rem/1 inherit;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3)}
.dm-stat span{font:600 .96rem/1 inherit;color:var(--ink)}
.dm-peak.ok{color:#4ade80} .dm-peak.warn{color:var(--amber,#e6b450)} .dm-peak.bad{color:#ff6b6b}
.dm-op{display:flex;align-items:center;gap:8px;margin-left:auto;
  font:500 .6rem/1 inherit;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.dm-op input{width:120px;accent-color:#60a5fa}
.dm-op span{font:600 .72rem/1 inherit;color:var(--ink);letter-spacing:0;min-width:34px}

.dm-note{border-left:2px solid var(--amber,#e6b450);padding:8px 0 8px 12px;
  font:400 .7rem/1.55 inherit;color:var(--ink-3)}

/* legend: stops sit at real densities, so the scale is readable as physics */
.dm-legend{display:flex;flex-direction:column;gap:5px}
.dm-bar{display:flex;height:12px;border-radius:3px;overflow:hidden;border:1px solid #262835}
.dm-bar i{flex:1;display:block}
.dm-ticks{display:flex;justify-content:space-between;font:400 .62rem/1 inherit;color:#6b7280}
.dm-ticks .dm-thr{color:#ff8080;font-weight:600;letter-spacing:.04em}
.dm-hint{font:400 .68rem/1.6 inherit;color:var(--ink-3)}
.dm-hint b{color:var(--ink);font-weight:600}

/* ═══════════════ DIVERT ARRIVALS ═══════════════ */
.dv-overlay{position:absolute;z-index:4;pointer-events:none;overflow:visible}
body.dv-drawing #aVideo{cursor:crosshair}
.dv-l{stroke-width:3;vector-effect:non-scaling-stroke}
.dv-l.wait{stroke:#9aa0b5;stroke-dasharray:6 5}
.dv-l.ok{stroke:#4ade80}
.dv-l.sat{stroke:#ff5a5a}
.dv-c{stroke:#0b0b0f;stroke-width:2;vector-effect:non-scaling-stroke}
.dv-c.wait{fill:#9aa0b5} .dv-c.ok{fill:#4ade80} .dv-c.sat{fill:#ff5a5a}
.dv-t{fill:#fff;font:600 22px system-ui,sans-serif;paint-order:stroke;
  stroke:#0b0b0f;stroke-width:5px}

.dv .dm-title{color:var(--ink)}
.dv-verdict{border:1px solid #262835;border-radius:10px;padding:14px 16px;
  background:rgba(255,255,255,.02);display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.dv-verdict b{font:700 1.02rem/1 inherit;letter-spacing:.02em;color:var(--ink-3);flex:none}
.dv-verdict span{font:400 .78rem/1.55 inherit;color:var(--ink-3);flex:1;min-width:240px}
.dv-verdict.act{border-color:rgba(255,90,90,.55);background:rgba(255,90,90,.09)}
.dv-verdict.act b{color:#ff6b6b}
.dv-verdict.act span{color:var(--ink)}
.dv-verdict.hold{border-color:rgba(96,165,250,.35);background:rgba(96,165,250,.05)}
.dv-verdict.hold b{color:#93c5fd}

.dv-ctrls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dv-hint{font:400 .7rem/1.5 inherit;color:var(--ink-3)}

.dv-row{border:1px solid #262835;border-radius:9px;padding:11px 13px;margin-top:8px;
  background:rgba(255,255,255,.02)}
.dv-row.actionable{border-color:rgba(74,222,128,.3)}
.dv-row.complete{border-color:rgba(74,222,128,.5)}
.dv-head{display:flex;align-items:baseline;gap:10px}
.dv-head b{font:600 .92rem/1 inherit;color:var(--ink)}
.dv-time{font:400 .64rem/1 inherit;color:var(--ink-3);margin-left:auto}
.dv-x{background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:.8rem;
  padding:0 2px;line-height:1}
.dv-x:hover{color:#ff6b6b}

/* progress: the tick marks where the measurement becomes usable */
.dv-bar{position:relative;height:5px;border-radius:3px;background:#1c1f2b;margin:9px 0 8px}
.dv-bar i{display:block;height:100%;border-radius:3px;background:#60a5fa}
.dv-bar u{position:absolute;top:-3px;width:2px;height:11px;background:#4ade80}

.dv-r1{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dv-r1 b{font:700 1.12rem/1 inherit;color:var(--ink)}
.dv-u{font:400 .66rem/1 inherit;color:var(--ink-3)}
.dv-pm{font:400 .7rem/1 inherit;color:var(--ink-3)}
.dv-chip{font:600 .58rem/1 inherit;letter-spacing:.1em;padding:3px 7px;border-radius:999px;
  border:1px solid #2a3342;color:var(--ink-3)}
.dv-chip.ok{border-color:rgba(74,222,128,.45);color:#4ade80}
.dv-chip.sat{border-color:rgba(255,90,90,.6);color:#ff8080}
.dv-r2{font:400 .7rem/1.5 inherit;color:var(--ink-3);margin-top:4px}
.dv-rej{font:400 .66rem/1.5 inherit;color:var(--amber,#e6b450);margin-top:5px}

/* time-to-critical meter, inside a crush row */
.cx-ttc{flex-basis:100%;margin-top:8px;padding-top:8px;border-top:1px solid #1c1f2b;
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font:400 .7rem/1.4 inherit}
.cx-ttc b{font:700 1.18rem/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.02em}
.cx-ttc span{color:var(--ink-3)}
.cx-ttc i{font-style:normal;font-size:.6rem;letter-spacing:.1em;padding:3px 7px;
  border-radius:999px;border:1px solid #2a3342;color:var(--ink-3);margin-left:auto}
.cx-ttc.live b{color:#ff8080}
.cx-ttc.live i{border-color:rgba(255,90,90,.5);color:#ff8080}
.cx-ttc.proj b{color:var(--amber,#e6b450)}
.cx-ttc.proj i{border-color:rgba(230,180,80,.55);color:var(--amber,#e6b450)}
.cx-ttc.at{color:#ff6b6b;font-weight:700;letter-spacing:.04em}
.cx-ttc.none{color:#6b7280}
.cx-esc{color:var(--amber,#e6b450);font-weight:600}

/* ═══════════════ DISTURBANCES ═══════════════
   First in Actions. Amber throughout and the word ADVISORY on every row: this
   must never be mistaken for a crush alert, which is red and means act now. */
.ds{display:flex;flex-direction:column;gap:12px;padding-bottom:16px;
  border-bottom:1px solid #1c1f2b;margin-bottom:16px}
.ds-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.ds-title{font:600 1.02rem/1.2 inherit;color:var(--ink)}
.ds-sub{font:400 .72rem/1.5 inherit;color:var(--ink-3);margin-top:3px}
.ds-state{display:flex;align-items:center;gap:8px;border:1px solid #262835;
  border-radius:999px;padding:6px 13px;background:rgba(255,255,255,.02)}
.ds-state b{font:700 .7rem/1 inherit;letter-spacing:.1em;color:var(--ink-3)}
.ds-dot{width:8px;height:8px;border-radius:50%;background:#6b7280;flex:none}
.ds-state.ok b{color:#4ade80} .ds-state.ok .ds-dot{background:#4ade80}
.ds-state.learn b{color:#93c5fd} .ds-state.learn .ds-dot{background:#60a5fa}
.ds-state.on{border-color:rgba(230,180,80,.6);background:rgba(230,180,80,.09)}
.ds-state.on b{color:var(--amber,#e6b450)}
.ds-state.on .ds-dot{background:var(--amber,#e6b450);animation:cxpulse 1.4s infinite}

.ds-unavail,.ds-learn{border-left:2px solid #60a5fa;padding:9px 0 9px 13px;
  font:400 .74rem/1.6 inherit;color:var(--ink-3)}

/* an advisory */
.ds-ev{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;margin-top:8px;
  border:1px solid rgba(230,180,80,.45);border-radius:10px;background:rgba(230,180,80,.07)}
.ds-ic{width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:1rem;background:rgba(230,180,80,.2);
  color:var(--amber,#e6b450)}
.ds-evmain{flex:1;min-width:0}
.ds-evtop{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ds-evtop b{font:600 .92rem/1 inherit;color:var(--ink)}
.ds-adv{font:700 .55rem/1 inherit;letter-spacing:.14em;padding:3px 7px;border-radius:999px;
  border:1px solid rgba(230,180,80,.55);color:var(--amber,#e6b450)}
.ds-when{font:400 .64rem/1 inherit;color:var(--ink-3);margin-left:auto}
.ds-evtext{font:400 .74rem/1.55 inherit;color:var(--ink-3);margin-top:5px}
.ds-evmeta{font:400 .64rem/1.5 inherit;color:#6b7280;margin-top:4px}
.ds-evact{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:none}
.ds-look,.ds-ack{background:transparent;border:1px solid #2a3342;color:var(--ink-3);
  border-radius:7px;padding:.32rem .6rem;font:500 .66rem/1 inherit;cursor:pointer;
  white-space:nowrap}
.ds-look{border-color:rgba(230,180,80,.55);color:var(--amber,#e6b450)}
.ds-look:hover{background:rgba(230,180,80,.12)}
.ds-ack:hover{border-color:#3a4354;color:var(--ink)}
.ds-conf{font:500 .64rem/1.4 inherit;color:#4ade80;text-align:right;max-width:130px}
.ds-noloc{font:400 .62rem/1.4 inherit;color:#6b7280;text-align:right;max-width:130px}

/* the meters: proof the system is watching during the quiet hours */
.ds-sec{font:500 .6rem/1 inherit;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-top:4px}
.ds-meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.ds-m{border:1px solid #262835;border-radius:8px;padding:8px 10px;
  background:rgba(255,255,255,.02)}
.ds-m.near{border-color:rgba(230,180,80,.35)}
.ds-m.on{border-color:rgba(230,180,80,.7);background:rgba(230,180,80,.09)}
.ds-mtop{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.ds-mtop span{font:500 .66rem/1.2 inherit;color:var(--ink-3)}
.ds-mtop b{font:600 .68rem/1 'JetBrains Mono',ui-monospace,monospace;color:var(--ink-3)}
.ds-m.on .ds-mtop span,.ds-m.on .ds-mtop b{color:var(--amber,#e6b450)}
.ds-mbar{height:3px;border-radius:2px;background:#1c1f2b;margin-top:6px;overflow:hidden}
.ds-mbar i{display:block;height:100%;background:#60a5fa;border-radius:2px}
.ds-m.near .ds-mbar i{background:var(--amber,#e6b450)}
.ds-m.on .ds-mbar i{background:#ff8080}
.ds-foot{font:400 .68rem/1.6 inherit;color:var(--ink-3)}
.ds-foot b{color:var(--ink);font-weight:600}
.ds-pin{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;
  justify-content:center;font:700 13px/1 system-ui,sans-serif;color:#140f05;
  background:var(--amber,#e6b450);border:2px solid #0b0b0f;
  box-shadow:0 0 0 2px rgba(0,0,0,.5)}

/* ── convoy routes ─────────────────────────────────────────────────────── */
.rt-overlay{position:absolute;z-index:4;pointer-events:none;overflow:visible}
body.rt-drawing #aVideo{cursor:crosshair}
.rt-line{fill:none;stroke-width:3;vector-effect:non-scaling-stroke}
.rt-line.clear{stroke:#4ade80} .rt-line.blocked{stroke:#ff5a5a}
.rt-band{fill:rgba(74,222,128,.10);stroke:none}
.rt-band.blocked{fill:rgba(255,90,90,.16)}
.rt-node{fill:#e6e8f0;stroke:#0b0b0f;stroke-width:2;vector-effect:non-scaling-stroke}
.rt-lab{fill:#fff;font:600 20px system-ui,sans-serif;paint-order:stroke;
  stroke:#0b0b0f;stroke-width:5px}

.ds-routes{border:1px solid #262835;border-radius:9px;padding:11px 13px;
  background:rgba(255,255,255,.02)}
.ds-rhead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ds-rhead span{font:500 .62rem/1 inherit;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}
.ds-mini{padding:.3rem .6rem;font-size:.68rem}
.ds-rhint{font:400 .66rem/1.5 inherit;color:#6b7280;margin-top:6px}
.ds-r{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 10px;
  border:1px solid #262835;border-radius:8px}
.ds-r.blocked{border-color:rgba(255,90,90,.55);background:rgba(255,90,90,.08)}
.ds-r b{font:600 .8rem/1 inherit;color:var(--ink)}
.ds-r span{font:400 .68rem/1.45 inherit;color:var(--ink-3);flex:1}
.ds-r .st{flex:none;white-space:nowrap;font:700 .55rem/1 inherit;letter-spacing:.12em;padding:3px 7px;
  border-radius:999px;border:1px solid rgba(74,222,128,.45);color:#4ade80}
.ds-r.blocked .st{border-color:rgba(255,90,90,.6);color:#ff8080}
.ds-rx{background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:.78rem}
.ds-rx:hover{color:#ff6b6b}

/* ── notifications ─────────────────────────────────────────────────────── */
.ds-n{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;margin-top:7px;
  border:1px solid #262835;border-radius:9px;background:rgba(255,255,255,.02)}
.ds-n.alert{border-color:rgba(255,90,90,.5);background:rgba(255,90,90,.07)}
.ds-n.advisory{border-color:rgba(230,180,80,.4);background:rgba(230,180,80,.05)}
.ds-n.info{border-color:rgba(74,222,128,.35)}
.ds-nmain{flex:1;min-width:0}
.ds-ntop{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ds-ntop b{font:600 .86rem/1.2 inherit;color:var(--ink)}
.ds-nwhen{font:400 .62rem/1 inherit;color:#6b7280;margin-left:auto}
.ds-nbody{font:400 .72rem/1.55 inherit;color:var(--ink-3);margin-top:4px}
.ds-ncoord{font:400 .66rem/1.5 'JetBrains Mono',ui-monospace,monospace;
  color:#93c5fd;margin-top:4px;cursor:pointer}
.ds-ncoord:hover{text-decoration:underline}
/* the VLM caption, always labelled as a machine description */
.ds-vlm{margin-top:7px;padding:7px 10px;border-radius:7px;
  background:rgba(96,165,250,.09);border-left:2px solid rgba(96,165,250,.6)}
.ds-vlm i{display:block;font-style:normal;font:600 .55rem/1 inherit;
  letter-spacing:.13em;color:#93c5fd;margin-bottom:4px}
.ds-vlm p{margin:0;font:400 .73rem/1.55 inherit;color:var(--ink)}
.ds-vlm.wait p{color:#6b7280;font-style:italic}

/* ── toasts ────────────────────────────────────────────────────────────── */
.nt-host{position:fixed;right:18px;bottom:18px;z-index:9000;display:flex;
  flex-direction:column;gap:9px;max-width:390px;pointer-events:none}
.nt{pointer-events:auto;border-radius:11px;padding:12px 14px;
  background:rgba(16,18,26,.97);border:1px solid #2a3342;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.85);animation:ntIn .22s ease}
@keyframes ntIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.nt.alert{border-color:rgba(255,90,90,.7)}
.nt.advisory{border-color:rgba(230,180,80,.65)}
.nt.info{border-color:rgba(74,222,128,.5)}
.nt-top{display:flex;align-items:baseline;gap:9px}
.nt-top b{font:700 .82rem/1.2 inherit;color:var(--ink)}
.nt.alert .nt-top b{color:#ff8080}
.nt.advisory .nt-top b{color:var(--amber,#e6b450)}
.nt-x{margin-left:auto;background:none;border:0;color:#6b7280;cursor:pointer;
  font-size:.9rem;line-height:1}
.nt-x:hover{color:var(--ink)}
.nt-body{font:400 .72rem/1.5 inherit;color:var(--ink-3);margin-top:4px}
.nt-coord{font:400 .64rem/1.4 'JetBrains Mono',ui-monospace,monospace;
  color:#93c5fd;margin-top:5px}
@media (prefers-reduced-motion:reduce){.nt{animation:none}}

/* ═══════════════ OBSTRUCTION CONFIRMATION ═══════════════
   The one prominent popup in the app. It is a QUESTION, and a question nobody
   sees is a question nobody answers -- but it is still dismissible and never
   covers the video. */
.cf-host{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:9500;
  display:flex;flex-direction:column;gap:12px;width:min(460px,calc(100vw - 32px));
  max-height:calc(100vh - 44px)}
.cf{border-radius:13px;overflow:hidden;background:rgba(14,16,23,.985);
  border:1px solid rgba(230,180,80,.75);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.9);animation:cfIn .2s ease}
@keyframes cfIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cf-head{display:flex;align-items:center;gap:10px;padding:13px 15px 6px}
.cf-head b{font:700 .98rem/1.25 inherit;color:var(--amber,#e6b450);flex:1}
.cf-x{background:none;border:0;color:#6b7280;cursor:pointer;font-size:.95rem;line-height:1}
.cf-x:hover{color:var(--ink)}
.cf-sub{padding:0 15px 10px;font:400 .7rem/1.5 inherit;color:var(--ink-3)}
.cf-img{display:block;width:100%;max-height:44vh;object-fit:contain;background:#000}
.cf-noimg{padding:26px 15px;text-align:center;color:#6b7280;font:400 .74rem/1.5 inherit;
  background:#0a0d12}
.cf-vlm{margin:10px 15px 0;padding:8px 10px;border-radius:7px;
  background:rgba(96,165,250,.1);border-left:2px solid rgba(96,165,250,.6)}
.cf-vlm i{display:block;font-style:normal;font:600 .55rem/1 inherit;letter-spacing:.13em;
  color:#93c5fd;margin-bottom:4px}
.cf-vlm p{margin:0;font:400 .73rem/1.5 inherit;color:var(--ink)}
.cf-tally{padding:9px 15px 0;font:400 .66rem/1.4 inherit;color:#6b7280}
.cf-tally b{color:var(--amber,#e6b450)}
.cf-btns{display:flex;gap:9px;padding:11px 15px 14px}
.cf-btns button{flex:1;border-radius:9px;padding:.62rem .5rem;cursor:pointer;
  font:600 .8rem/1 inherit;border:1px solid #2a3342;background:transparent;color:var(--ink)}
.cf-btns button:disabled{opacity:.45;cursor:default}
.cf-yes{border-color:rgba(255,90,90,.7)!important;background:rgba(255,90,90,.14)!important;
  color:#ff9b9b!important}
.cf-yes:hover:not(:disabled){background:rgba(255,90,90,.24)!important}
.cf-no{border-color:rgba(74,222,128,.55)!important;color:#4ade80!important}
.cf-no:hover:not(:disabled){background:rgba(74,222,128,.12)!important}
@media (prefers-reduced-motion:reduce){.cf{animation:none}}
.cf-more{padding:0 15px 12px;font:400 .64rem/1.4 inherit;color:#6b7280;text-align:center}

/* ═══════════════ VEHICLE ANALYTICS ═══════════════ */
.panel-page.vh{padding:16px 20px 28px;overflow-y:auto}
.vh-unavail{margin:0 0 14px;padding:12px 14px;border-radius:9px;
  background:rgba(255,90,90,.1);border:1px solid rgba(255,90,90,.35);
  color:#ff9b9b;font:400 .8rem/1.5 inherit}
.vh-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px}
@media (max-width:1100px){.vh-grid{grid-template-columns:1fr}}
.vh-stage{background:var(--panel,#0d1017);border:1px solid #1d2430;border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column}
.vh-head{display:flex;align-items:center;gap:10px;padding:10px 13px;
  border-bottom:1px solid #1d2430}
.vh-head b{font:700 .85rem/1 inherit}
.vh-head .spacer{flex:1}
.vh-state{font:600 .62rem/1 inherit;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 8px;border-radius:5px}
.vh-state.on{background:rgba(74,222,128,.16);color:#4ade80}
.vh-state.off{background:rgba(120,130,150,.14);color:#8b95a7}
.vh-state.err{background:rgba(255,90,90,.16);color:#ff9b9b}
.vh-btn{border:1px solid #2a3342;background:transparent;color:var(--ink,#dfe6f2);
  border-radius:8px;padding:.45rem .8rem;cursor:pointer;font:600 .75rem/1 inherit}
.vh-btn:hover{background:rgba(255,255,255,.05)}
.vh-btn.go{border-color:rgba(74,222,128,.5);color:#4ade80}
.vh-btn:disabled{opacity:.5;cursor:default}
.vh-video{background:#000;aspect-ratio:16/9;display:flex}
.vh-video video{width:100%;height:100%;object-fit:contain}
.vh-meta{padding:8px 13px;font:400 .68rem/1.4 inherit;color:var(--ink-3,#8b95a7)}
.vh-note{margin:0 13px 12px;padding:8px 10px;border-radius:7px;
  background:rgba(230,180,80,.1);border-left:2px solid rgba(230,180,80,.6);
  font:400 .72rem/1.5 inherit;color:#e6b450}
.vh-err{margin:0 13px 12px;padding:8px 10px;border-radius:7px;
  background:rgba(255,90,90,.1);color:#ff9b9b;font:400 .72rem/1.5 inherit}
.vh-side{display:flex;flex-direction:column;gap:14px}
.vh-card{background:var(--panel,#0d1017);border:1px solid #1d2430;border-radius:12px;
  padding:13px}
.vh-cardhead{display:flex;align-items:baseline;gap:10px}
.vh-cardhead b{flex:1;font:700 .82rem/1 inherit}
.vh-total{font:700 1.7rem/1 inherit;font-variant-numeric:tabular-nums}
.vh-total.live{color:#7dd3fc}
.vh-total.cum{color:#4ade80}
.vh-hint{margin:6px 0 0;font:400 .66rem/1.5 inherit;color:var(--ink-3,#8b95a7)}
.vh-cats{margin-top:10px;display:flex;flex-direction:column;gap:5px}
.vh-cat{display:flex;align-items:baseline;gap:9px;padding:5px 8px;border-radius:6px;
  background:rgba(255,255,255,.025)}
.vh-cat .vh-n{min-width:2.6em;text-align:right;font:700 .95rem/1 inherit;
  font-variant-numeric:tabular-nums}
.vh-cat.live .vh-n{color:#7dd3fc}
.vh-cat.cum .vh-n{color:#4ade80}
.vh-cat .vh-l{font:400 .72rem/1.3 inherit;color:var(--ink-2,#b6c0d0)}

.vz-wrap{margin-top:18px;background:var(--panel,#0d1017);border:1px solid #1d2430;
  border-radius:12px;padding:14px}
.vz-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vz-head b{font:700 .85rem/1 inherit}
.vz-head .spacer{flex:1}
.vz-head .vh-hint{margin:0;max-width:52ch}
.vz-summary{margin:12px 0 0;padding:10px 12px;border-radius:8px;
  background:rgba(74,222,128,.08);border-left:2px solid rgba(74,222,128,.5);
  font:400 .74rem/1.6 inherit}
.vz-pending,.vz-blockedlist{margin-top:4px;font-size:.7rem;color:var(--ink-3,#8b95a7)}
.vz-blockedlist{color:#ff9b9b}
.vz-list{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:11px}
.vz-none{color:var(--ink-3,#8b95a7);font:400 .74rem/1.5 inherit;padding:8px 0}
.vz{border:1px solid #223046;border-radius:10px;padding:11px;background:rgba(255,255,255,.02)}
.vz.bad{border-color:rgba(255,90,90,.55);background:rgba(255,90,90,.06)}
.vz-top{display:flex;align-items:center;gap:8px}
.vz-top b{flex:1;font:700 .8rem/1.2 inherit}
.vz-kind{font:600 .55rem/1 inherit;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 6px;border-radius:4px;background:rgba(120,130,150,.16);color:#8b95a7}
.vz-kind.emergency{background:rgba(255,90,90,.16);color:#ff9b9b}
.vz-area{font:400 .62rem/1 inherit;color:var(--ink-3,#8b95a7)}
.vz-x{background:none;border:0;color:#6b7280;cursor:pointer;font-size:.8rem;line-height:1}
.vz-x:hover{color:#ff9b9b}
.vz-empty{margin-top:8px;font:400 .7rem/1.4 inherit;color:#6b7280}
.vz-clear{margin-top:8px;font:700 .8rem/1 inherit;color:#4ade80}
.vz-blocked{margin-top:8px;font:700 .8rem/1.3 inherit;color:#ff9b9b}
.vz-counts{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px 12px;
  font:400 .68rem/1.4 inherit;color:var(--ink-2,#b6c0d0)}
.vz-counts b{color:var(--ink,#dfe6f2);font-variant-numeric:tabular-nums}
.vz-tot{margin-top:5px;font:400 .72rem/1.4 inherit}
.vz-tot b{font-size:1.05rem}
.vz-unplaced{margin-top:6px;font:400 .64rem/1.45 inherit;color:#e6b450}
.vz-plan{margin-top:8px;font:400 .65rem/1.5 inherit;color:#7dd3fc}
.vz-warn{margin-top:4px;font:400 .64rem/1.5 inherit;color:#e6b450}
.vz-btns{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.vz-btns button{border:1px solid #2a3342;background:transparent;color:var(--ink,#dfe6f2);
  border-radius:7px;padding:.36rem .6rem;cursor:pointer;font:600 .66rem/1 inherit}
.vz-btns button:hover{background:rgba(255,255,255,.05)}

/* ═══════════════════════════════════════════════════════════════════════════
   SYSTEM LAYER — one visual language across every tab
   ───────────────────────────────────────────────────────────────────────────
   Live Ops, AI Analytics and Vehicle Analytics grew at different times and
   ended up looking like three products: uppercase letterspaced labels in one,
   sentence-case bold in another, different card padding, radii and type in
   each. This layer states the shared patterns once, in tokens, and every tab
   inherits them.

   It is appended deliberately: the cascade lets it harmonise the existing
   components without hunting down and rewriting a thousand earlier rules,
   which is how layouts get broken.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────── 1. SURFACE: one card, everywhere ───────────── */
.cc-card, .cc-fruin, .tpanel, .vh-card, .vh-stage, .vz-wrap, .vz,
.cx, .ds, .dm, .dv, .panel{
  background:var(--panel);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
}

/* ───────────── 2. THE METRIC PATTERN ─────────────
   Every number in this application reads the same way:
       LABEL      what it is        11px, uppercase, muted
       value      the number        28px, dominant
       caption    what it means     13px, supporting
   Previously the label was 9.5px and the caption 10px, so a card was mostly
   empty space wrapped around text too small to read at a glance. */
.cc-card{padding:var(--s4) var(--s5) var(--s5)}
.cc-clabel{
  color:var(--ink-3);
  font:var(--w-semi) var(--t-micro)/1 inherit;
  text-transform:uppercase;letter-spacing:.09em;
  margin-bottom:var(--s3);
}
.cc-cval{
  color:var(--ink);
  font:var(--w-semi) var(--t-display)/1.05 inherit;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.cc-csub{
  color:var(--ink-3);
  font:var(--w-normal) var(--t-body)/1.45 inherit;
  margin-top:var(--s2);
}
/* the card the page is actually about gets the larger number and a rule */
.cc-card.hero{border-color:var(--hair-2)}
.cc-card.hero .cc-cval{font-size:var(--t-display-lg)}
.cc-card.hero::before{
  content:"";position:absolute;inset:0 auto 0 0;width:2px;
  background:var(--accent);opacity:.7;
}
.cc-cval.ok{color:var(--ok)} .cc-cval.warn{color:var(--amber)} .cc-cval.bad{color:var(--red)}
.cc-cards{gap:var(--s3)}

/* ───────────── 3. THE SEVERITY RAMP ─────────────
   The A-F scale used to be six identical grey blocks until one lit up, so at
   rest it told the operator nothing -- not even which end is bad. The ramp is
   now always visible in muted form, so the scale reads as a scale, and the
   ACTIVE level is what changes rather than what appears. */
.cc-fruin{padding:var(--s4) var(--s5)}
.cc-fruin-head{
  color:var(--ink-3);
  font:var(--w-semi) var(--t-micro)/1 inherit;
  text-transform:uppercase;letter-spacing:.09em;
  margin-bottom:var(--s3);
}
.cc-fruin-head span:last-child{
  color:var(--ink-2);font-size:var(--t-body);
  text-transform:none;letter-spacing:0;font-weight:var(--w-normal);
}
.cc-fruin-bar{gap:var(--s1)}
.fseg{
  padding:var(--s3) 0;border-radius:var(--r-sm);
  font:var(--w-semi) var(--t-label)/1 inherit;letter-spacing:.06em;
  border:1px solid transparent;
  color:var(--ink-3);
  transition:transform .15s ease, box-shadow .15s ease, color .15s ease;
}
/* the ramp, always readable */
.fseg.lvl-A{background:rgba(223,230,233,.13)}
.fseg.lvl-B{background:rgba(200,208,204,.15)}
.fseg.lvl-C{background:rgba(240,184,73,.15)}
.fseg.lvl-D{background:rgba(224,138,60,.17)}
.fseg.lvl-E{background:rgba(255,138,107,.19)}
.fseg.lvl-F{background:rgba(255,107,107,.21)}
/* the level we are actually at */
.fseg.on{color:#0a0c10;font-weight:var(--w-bold);transform:translateY(-1px)}
.fseg.on.lvl-A{background:#dfe6e9;box-shadow:0 0 0 1px #dfe6e9}
.fseg.on.lvl-B{background:#c8d0cc;box-shadow:0 0 0 1px #c8d0cc}
.fseg.on.lvl-C{background:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.fseg.on.lvl-D{background:#e08a3c;box-shadow:0 0 0 1px #e08a3c}
.fseg.on.lvl-E{background:#ff8a6b;box-shadow:0 0 0 1px #ff8a6b}
.fseg.on.lvl-F{background:var(--red);box-shadow:0 0 0 1px var(--red)}

/* ───────────── 4. PAGE + SECTION HEADINGS ───────────── */
.cc-head h1, .cc-title{font:var(--w-bold) var(--t-head)/1.2 inherit;letter-spacing:-.01em}
.cc-sub{color:var(--ink-2);font:var(--w-normal) var(--t-body)/1.5 inherit}
.cc-step{
  color:var(--ink-3);font:var(--w-semi) var(--t-micro)/1 inherit;
  text-transform:uppercase;letter-spacing:.09em;margin:var(--s6) 0 var(--s3)
}
.tpanel-h, .tp-h{
  color:var(--ink-3);font:var(--w-semi) var(--t-micro)/1 inherit;
  text-transform:uppercase;letter-spacing:.09em;
}

/* ───────────── 5. SUB-TABS ───────────── */
.cc-tabs{gap:var(--s1);border-bottom:1px solid var(--hair);margin-top:var(--s6)}
.cct{
  font:var(--w-medium) var(--t-body)/1 inherit;
  padding:var(--s3) var(--s4);color:var(--ink-3);
  border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;
  transition:color .12s ease,border-color .12s ease;
}
.cct:hover{color:var(--ink-2)}
.cct.active{color:var(--ink);border-bottom-color:var(--accent);font-weight:var(--w-semi)}

/* ───────────── 6. TOP BAR ───────────── */
.topbar{padding:var(--s2) var(--s4);gap:var(--s2);background:var(--bg)}
.brand .title{font:var(--w-bold) var(--t-body)/1 inherit;letter-spacing:.08em}
.viewtoggle{gap:var(--s1);background:var(--panel);border-radius:var(--r-pill);padding:3px}
.vt{
  font:var(--w-semi) var(--t-label)/1 inherit;letter-spacing:.05em;
  padding:var(--s2) var(--s4);border-radius:var(--r-pill);
  color:var(--ink-3);border:0;background:none;cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.vt:hover{color:var(--ink-2)}
.vt.active{background:var(--panel-3);color:var(--ink)}
.pill{
  font:var(--w-medium) var(--t-label)/1 inherit;
  padding:var(--s2) var(--s3);border-radius:var(--r-pill);
  border:1px solid var(--hair);color:var(--ink-2);background:transparent;
}

/* ───────────── 7. BUTTONS ───────────── */
.vh-btn, .vz-btns button, .cx-sel, .btn{
  font:var(--w-semi) var(--t-body)/1 inherit;
  border-radius:var(--r-md);
  border:1px solid var(--hair-2);
  background:var(--panel-2);color:var(--ink);
  padding:var(--s3) var(--s4);cursor:pointer;
  transition:background .12s ease,border-color .12s ease;
}
.vh-btn:hover, .vz-btns button:hover, .btn:hover{
  background:var(--panel-3);border-color:var(--hair-3)
}
.vh-btn.go{border-color:rgba(74,222,128,.45);color:var(--ok);background:var(--ok-dim)}
.vh-btn.go:hover{background:rgba(74,222,128,.2)}
.vz-btns button{padding:var(--s2) var(--s3);font-size:var(--t-label)}

/* ───────────── 8. STATUS BADGES — one shape, colour carries the meaning ── */
.vh-state, .ds-badge, .cx-badge, .nt-badge{
  font:var(--w-semi) var(--t-micro)/1 inherit;
  letter-spacing:.08em;text-transform:uppercase;
  padding:var(--s2) var(--s3);border-radius:var(--r-sm);
}
.vh-state.on{background:var(--ok-dim);color:var(--ok)}
.vh-state.off{background:rgba(255,255,255,.06);color:var(--ink-3)}
.vh-state.err{background:var(--red-dim);color:var(--red)}

/* ───────────── 9. VEHICLE ANALYTICS — same language as the rest ───────── */
.panel-page.vh{padding:var(--s5) var(--s6) var(--s8)}
.vh-grid{gap:var(--s4)}
.vh-head{padding:var(--s3) var(--s4);border-bottom:1px solid var(--hair)}
.vh-head b{font:var(--w-bold) var(--t-lead)/1.2 inherit}
.vh-card{padding:var(--s4) var(--s5)}
/* the two count cards now read exactly like the crowd cards */
.vh-cardhead b{
  flex:1;color:var(--ink-3);
  font:var(--w-semi) var(--t-micro)/1 inherit;
  text-transform:uppercase;letter-spacing:.09em;
}
.vh-total{font:var(--w-semi) var(--t-display)/1 inherit;letter-spacing:-.02em}
.vh-total.live{color:var(--info)}
.vh-total.cum{color:var(--ok)}
.vh-hint{color:var(--ink-3);font:var(--w-normal) var(--t-body)/1.5 inherit;margin-top:var(--s2)}
.vh-cats{margin-top:var(--s4);gap:var(--s1)}
.vh-cat{padding:var(--s2) var(--s3);border-radius:var(--r-sm);background:rgba(255,255,255,.03)}
.vh-cat .vh-n{font:var(--w-semi) var(--t-lead)/1 inherit;min-width:3em}
.vh-cat .vh-l{font:var(--w-normal) var(--t-body)/1.3 inherit;color:var(--ink-2)}
.vh-meta{padding:var(--s3) var(--s4);color:var(--ink-3);font-size:var(--t-label)}
.vh-note{
  margin:0 var(--s4) var(--s4);padding:var(--s3);border-radius:var(--r-sm);
  background:var(--amber-dim);border-left:2px solid var(--amber);
  color:var(--amber);font:var(--w-normal) var(--t-body)/1.5 inherit;
}
.vh-err{
  margin:0 var(--s4) var(--s4);padding:var(--s3);border-radius:var(--r-sm);
  background:var(--red-dim);color:var(--red);font-size:var(--t-body);
}
.vz-wrap{margin-top:var(--s5);padding:var(--s5)}
.vz-head{gap:var(--s4)}
.vz-head b{font:var(--w-bold) var(--t-lead)/1.2 inherit}
.vz-summary{
  margin-top:var(--s4);padding:var(--s3) var(--s4);border-radius:var(--r-md);
  background:var(--ok-dim);border-left:2px solid var(--ok);font-size:var(--t-body);
}
.vz-list{margin-top:var(--s4);gap:var(--s3)}
.vz{padding:var(--s4);border-radius:var(--r-md)}
.vz.bad{border-color:rgba(255,107,107,.5);background:var(--red-dim)}
.vz-top b{font:var(--w-semi) var(--t-body)/1.3 inherit}
.vz-kind{
  font:var(--w-semi) var(--t-micro)/1 inherit;letter-spacing:.08em;
  padding:3px var(--s2);border-radius:var(--r-sm);
  background:rgba(255,255,255,.07);color:var(--ink-3);
}
.vz-kind.emergency{background:var(--red-dim);color:var(--red)}
.vz-area{font-size:var(--t-micro);color:var(--ink-3)}
.vz-counts{margin-top:var(--s3);gap:var(--s1) var(--s4);font-size:var(--t-body);color:var(--ink-2)}
.vz-tot{margin-top:var(--s2);font-size:var(--t-body)}
.vz-tot b{font-size:var(--t-lead);font-weight:var(--w-semi)}
.vz-clear{margin-top:var(--s3);font:var(--w-semi) var(--t-body)/1 inherit;color:var(--ok)}
.vz-blocked{margin-top:var(--s3);font:var(--w-bold) var(--t-body)/1.3 inherit;color:var(--red)}
.vz-empty{margin-top:var(--s3);font-size:var(--t-body);color:var(--ink-3)}
.vz-unplaced,.vz-warn{margin-top:var(--s2);font-size:var(--t-label);color:var(--amber);line-height:1.5}
.vz-plan{margin-top:var(--s3);font-size:var(--t-label);color:var(--info);line-height:1.5}
.vz-btns{margin-top:var(--s3);gap:var(--s2)}

/* ───────────── 10. ACTIONS: cards, not a document ─────────────
   The Actions tab was a flat vertical stack of prose, so a live crush alert
   had the same visual weight as an idle density map. Each feature is a card,
   and severity is carried by a left edge -- the eye finds a coloured rule in
   peripheral vision without having to read anything. */
.cx, .ds, .dm, .dv{padding:var(--s5);margin-bottom:var(--s4);position:relative}
.cx-title, .ds-title, .dm-title{
  font:var(--w-bold) var(--t-lead)/1.2 inherit;letter-spacing:-.01em
}
.cx-sub, .ds-sub, .dm-sub{
  color:var(--ink-2);font:var(--w-normal) var(--t-body)/1.5 inherit;margin-top:2px
}
.cx.alert, .ds.alert{border-color:rgba(255,107,107,.45)}
.cx.alert::before, .ds.alert::before{
  content:"";position:absolute;inset:0 auto 0 0;width:2px;
  border-radius:var(--r-lg) 0 0 var(--r-lg);background:var(--red);
}
.cx-sel{padding:var(--s2) var(--s3);font-size:var(--t-body)}
.cx-thr label{color:var(--ink-3);font:var(--w-semi) var(--t-micro)/1 inherit;
  text-transform:uppercase;letter-spacing:.09em}
.cx-thr-note{color:var(--ink-3);font-size:var(--t-label);line-height:1.5}

/* ───────────── 11. TELEMETRY STRIP ─────────────
   Eight cards, each previously holding a 9px label above a dash, most of the
   card empty. The label is readable now and the VALUE is what the eye lands
   on -- which is the whole point of a telemetry strip you read at a glance. */
.tstrip{gap:var(--s2)}
.tstrip .ts{padding:var(--s3) var(--s4);border-radius:var(--r-md)}
.tstrip .ts label{
  display:block;color:var(--ink-3);
  font:var(--w-semi) var(--t-micro)/1 inherit;
  text-transform:uppercase;letter-spacing:.09em;
}
.tstrip .ts b{
  display:inline-block;margin-top:var(--s2);color:var(--ink);
  font:var(--w-semi) var(--t-lead)/1.1 inherit;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.tstrip .ts s{
  text-decoration:none;color:var(--ink-3);
  font-size:var(--t-micro);margin-left:3px;
}

/* ───────────── 12. NOTIFICATIONS + POPUPS ───────────── */
.nt, .cf{border-radius:var(--r-lg)}
.nt-top b{font:var(--w-semi) var(--t-body)/1.3 inherit}
.nt-body{font:var(--w-normal) var(--t-body)/1.5 inherit;color:var(--ink-2)}
.nt-coord{font:var(--w-normal) var(--t-label)/1.4 inherit;color:var(--ink-3)}
.cf-head b{font:var(--w-bold) var(--t-lead)/1.25 inherit}
.cf-sub{font-size:var(--t-label);color:var(--ink-3)}
.cf-btns button{font:var(--w-semi) var(--t-body)/1 inherit;padding:var(--s3)}

/* ───────────── 13. FOCUS — visible, for keyboard and for accessibility ─── */
:where(button,select,input,a,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)
}

/* ───────────── 14. MOTION — respect the setting ───────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ───────────── 15. REFINEMENTS FOUND BY LOOKING AT IT ───────────── */

/* A placeholder is not a reading. An em-dash at 40px reads as a broken
   number; muted and small it reads as "nothing yet", which is the truth. */
.cc-cval.empty{
  color:var(--ink-3);
  font-size:var(--t-head);
  letter-spacing:.08em;
}

/* Collapsed disclosure rows were ~100px tall to hold one line of text,
   because the card padding and the summary padding stacked. A collapsed
   section should cost one row. */
details.dm, details.dv{padding:0}
details.dm > summary, details.dv > summary{
  display:flex;align-items:baseline;gap:var(--s3);
  padding:var(--s4) var(--s5);
  cursor:pointer;list-style:none;
}
details.dm > summary::-webkit-details-marker{display:none}
details.dm > summary::before{
  content:"";flex:0 0 auto;width:6px;height:6px;margin-right:var(--s1);
  border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:rotate(-45deg);transition:transform .15s ease;
}
details.dm[open] > summary::before{transform:rotate(45deg)}
details.dm > summary:hover::before{border-color:var(--ink-2)}
details.dm > summary .dm-title{font:var(--w-semi) var(--t-body)/1.3 inherit;color:var(--ink)}
details.dm > summary .dm-sub{color:var(--ink-3);font:var(--w-normal) var(--t-body)/1.3 inherit}
.dm-body{padding:0 var(--s5) var(--s5)}

/* Cards that are only holding a "not available" notice do not need the
   height of a populated one. */
.cx-unavail, .ds-unavail, .dm-unavail, .cx-empty{
  margin-top:var(--s3);padding:var(--s3) var(--s4);
  border-radius:var(--r-md);background:rgba(255,255,255,.03);
  color:var(--ink-3);font:var(--w-normal) var(--t-body)/1.5 inherit;
}

/* The threshold picker is a decision about how loudly the system speaks.
   It reads as a labelled control, not a stray dropdown. */
.cx-head{display:flex;align-items:flex-start;gap:var(--s5);flex-wrap:wrap}
.cx-thr{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2);
  margin-left:auto;max-width:min(46ch,100%)}
.cx-thr-note{text-align:right}

/* ───────────── 16. SIGN-IN — the first thing anyone sees ───────────── */
.auth-gate{background:radial-gradient(1200px 700px at 50% -10%,#141a26 0%,var(--bg) 62%)}
.auth-card{
  padding:var(--s8) var(--s8) var(--s6);
  border-radius:var(--r-lg);background:var(--panel);
  border:1px solid var(--hair-2);box-shadow:var(--shadow);
}
.auth-title{
  font:var(--w-bold) var(--t-head)/1.2 inherit;
  letter-spacing:.1em;margin-top:var(--s4);
}
.auth-sub{
  color:var(--ink-3);font:var(--w-medium) var(--t-micro)/1.5 inherit;
  letter-spacing:.12em;margin-top:var(--s2);margin-bottom:var(--s6);
}
.auth-in{
  width:100%;margin-bottom:var(--s3);
  padding:var(--s3) var(--s4);border-radius:var(--r-md);
  background:var(--panel-2);border:1px solid var(--hair-2);
  color:var(--ink);font:var(--w-normal) var(--t-body)/1.2 inherit;
  transition:border-color .12s ease,background .12s ease;
}
.auth-in::placeholder{color:var(--ink-3)}
.auth-in:focus{outline:none;border-color:var(--accent);background:var(--panel-3)}
.auth-btn{
  width:100%;margin-top:var(--s2);
  padding:var(--s3) var(--s4);border-radius:var(--r-md);
  font:var(--w-bold) var(--t-body)/1 inherit;letter-spacing:.08em;
  cursor:pointer;border:1px solid transparent;
  transition:background .12s ease;
}
.auth-btn.primary{background:var(--ink);color:var(--bg)}
.auth-btn.primary:hover{background:#fff}
.auth-link{
  margin-top:var(--s4);color:var(--ink-3);
  font:var(--w-normal) var(--t-body)/1.4 inherit;cursor:pointer;
}
.auth-link:hover{color:var(--ink-2)}
.auth-err{color:var(--red);font:var(--w-normal) var(--t-label)/1.5 inherit;margin:var(--s2) 0}
.auth-ok{color:var(--ok);font:var(--w-normal) var(--t-label)/1.5 inherit;margin:var(--s2) 0}
.auth-foot{
  margin-top:var(--s5);color:var(--ink-3);
  font:var(--w-normal) var(--t-label)/1.5 inherit;text-align:center;
}

/* ───────────── 17. RIGHT-HAND INSTRUMENT PANELS ───────────── */
.tpanel{padding:var(--s4) var(--s5);margin-bottom:var(--s3)}
.tp-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  color:var(--ink-3);font:var(--w-semi) var(--t-micro)/1 inherit;
  text-transform:uppercase;letter-spacing:.09em;margin-bottom:var(--s3);
}
.tp-head span:last-child{
  text-transform:none;letter-spacing:0;color:var(--ink-2);
  font-weight:var(--w-normal);font-size:var(--t-label);
}
.mode-chip{
  padding:var(--s2) var(--s3);border-radius:var(--r-sm);
  background:rgba(255,255,255,.06);color:var(--ink-2);
  font:var(--w-semi) var(--t-micro)/1 inherit;letter-spacing:.08em;
}

/* ───────────── 18. ADMIN PANEL ───────────── */
.ap-card{padding:0;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.ap-head{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--hair);
  font:var(--w-bold) var(--t-lead)/1.2 inherit;
}
.ap-x{margin-left:auto;background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:var(--t-body)}
.ap-x:hover{color:var(--ink)}
.ap-body{padding:var(--s5)}
.ap-section{margin-bottom:var(--s6)}
.ap-section > h4, .ap-section > .ap-h{
  color:var(--ink-3);font:var(--w-semi) var(--t-micro)/1 inherit;
  text-transform:uppercase;letter-spacing:.09em;margin:0 0 var(--s3);
}
.ap-btn{
  padding:var(--s2) var(--s3);border-radius:var(--r-sm);
  border:1px solid var(--hair-2);background:var(--panel-2);color:var(--ink);
  font:var(--w-semi) var(--t-label)/1 inherit;cursor:pointer;
}
.ap-btn:hover{background:var(--panel-3)}
.ap-btn.ok{border-color:rgba(74,222,128,.4);color:var(--ok);background:var(--ok-dim)}
.code-row{
  display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2);
  background:var(--panel-2);border:1px solid var(--hair);
  border-radius:var(--r-md);padding:var(--s2) var(--s3);
}
.code-row code{
  flex:1;font-family:var(--mono);font-size:var(--t-label);
  color:var(--ink-2);overflow:auto;white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. CONTROL ROWS — everything on a row shares one height
   ───────────────────────────────────────────────────────────────────────────
   In "Survey & flight controls" the status pill was ~26px, the buttons ~35px
   and the altitude input ~28px, all centre-aligned in a flex row. Centring
   things of different heights lines up their middles and nothing else, so no
   edge agrees with any other edge and the row reads as crooked.

   One height for every control in the row fixes it at the source rather than
   nudging margins.
   ═══════════════════════════════════════════════════════════════════════════ */
.cc-ctrls{gap:var(--s2);align-items:center;margin-top:var(--s2)}
.cc-ctrls > *{margin:0}

.cc-btn, .cc-ctrl-status, .sv-in, .sv-mode, .sv-alt{
  height:var(--ctl-h);
  display:inline-flex;align-items:center;
  box-sizing:border-box;
}
.cc-btn{
  padding:0 var(--s4);border-radius:var(--r-pill);
  font:var(--w-semi) var(--t-label)/1 inherit;
  border:1px solid var(--hair-2);color:var(--ink-2);background:transparent;
  cursor:pointer;white-space:nowrap;
  transition:border-color .12s ease,background .12s ease,color .12s ease;
}
.cc-btn:hover{border-color:var(--hair-3);color:var(--ink)}
.cc-btn.primary{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.cc-btn.primary:hover{background:#fff;color:var(--bg)}
.cc-btn.danger{border-color:rgba(255,107,107,.45);color:var(--red);background:var(--red-dim)}
.cc-btn.ghost{border-color:var(--hair);color:var(--ink-3)}
.cc-btn.ghost:hover{color:var(--ink-2)}

.cc-ctrl-status{
  padding:0 var(--s4);border-radius:var(--r-pill);
  background:var(--panel-2);border:1px solid var(--hair);
  color:var(--ink-3);
  font:var(--w-semi) var(--t-micro)/1 inherit;
  text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;
}

.sv-alt{
  gap:var(--s2);padding:0 var(--s3);border-radius:var(--r-pill);
  background:var(--panel-2);border:1px solid var(--hair);
  color:var(--ink-3);font:var(--w-medium) var(--t-label)/1 inherit;
  letter-spacing:0;white-space:nowrap;
}
.sv-in{
  height:calc(var(--ctl-h) - 12px);width:62px;
  padding:0 var(--s2);border-radius:var(--r-sm);
  background:var(--bg);border:1px solid var(--hair-2);color:var(--ink);
  font:var(--w-semi) var(--t-label)/1 inherit;
  font-variant-numeric:tabular-nums;
}
.sv-in:focus{outline:none;border-color:var(--accent)}

.sv-mode{
  padding:0;border-radius:var(--r-pill);overflow:hidden;
  border:1px solid var(--hair-2);background:var(--panel-2);
}
.sv-seg{
  height:100%;padding:0 var(--s4);border:0;background:transparent;
  color:var(--ink-3);cursor:pointer;white-space:nowrap;
  font:var(--w-semi) var(--t-label)/1 inherit;
  display:inline-flex;align-items:center;
}
.sv-seg + .sv-seg{border-left:1px solid var(--hair-2)}
.sv-seg:hover{color:var(--ink-2)}
.sv-seg.on{background:var(--info-dim);color:#bfdbfe}

.sv-prog{height:var(--ctl-h);display:inline-flex;align-items:center;gap:var(--s2);min-width:160px}
.sv-prog b{font:var(--w-bold) var(--t-micro)/1 inherit;color:var(--ink-2);min-width:38px;text-align:right}
.sv-note{
  flex:1 1 100%;margin:var(--s2) 0 0;
  color:var(--ink-3);font:var(--w-normal) var(--t-label)/1.5 inherit;
}

.ax-drawer{border-radius:var(--r-lg);margin-top:var(--s3)}
.ax-drawer > summary{
  padding:var(--s4) var(--s5);gap:var(--s3);
  color:var(--ink);font:var(--w-semi) var(--t-body)/1.3 inherit;
}
.ax-drawer > summary em{
  font:var(--w-normal) var(--t-label)/1.4 inherit;color:var(--ink-3);
}
.ax-drawer .cc-ctrls{padding:0 var(--s5) var(--s5)}


/* ═══════════════════════════════════════════════════════════════════════════
   20. MOBILE
   ───────────────────────────────────────────────────────────────────────────
   This block is LAST on purpose. The system layer above restyles components
   that older breakpoints further up the file had already adapted for small
   screens; because a media query adds no specificity, those older rules lost
   to the newer ones and the phone layout regressed. Everything small-screen
   is therefore re-stated here, after everything else, where it wins.

   Three sizes: tablet/landscape (<=1020px), phone (<=760px), narrow (<=420px).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Touch: a 36px control is comfortable with a mouse and small for a finger.
   Anything the user taps grows to 44px. */
@media (pointer:coarse){
  :root{--ctl-h:44px}
  .cc-btn, .vh-btn, .vz-btns button, .cct, .vt, .auth-btn, .ap-btn{
    min-height:44px;
  }
  .cct{padding-left:var(--s3);padding-right:var(--s3)}
}

@media (max-width:1020px){
  /* the ops workspace stacks; the sidebar becomes two columns of instruments */
  .ops{display:flex;flex-direction:column;overflow-y:auto;padding:var(--s3);gap:var(--s3)}
  .stagecell{min-height:48vh}
  .sidebar{overflow:visible;display:grid;grid-template-columns:1fr 1fr;
    gap:var(--s3);align-content:start}
  #tpStatus{grid-column:span 2}
  #panelLive{overflow-y:auto}
  .panel-page.vh{padding:var(--s4)}
  .vh-grid{grid-template-columns:1fr}
  .cc-cards{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  .sidebar{grid-template-columns:1fr}
  #tpStatus{grid-column:auto}

  /* the page's own padding shrinks so content keeps the width */
  .panel-page.cc{padding:var(--s4) var(--s4) var(--s8)}
  .panel-page.vh{padding:var(--s4) var(--s4) var(--s8)}

  /* metrics: two up, and the display number comes down a step so a
     four-digit count still fits its card */
  .cc-cards{grid-template-columns:repeat(2,1fr);gap:var(--s2)}
  .cc-card{padding:var(--s3) var(--s4) var(--s4)}
  .cc-cval{font-size:var(--t-head)}
  .cc-card.hero .cc-cval{font-size:var(--t-display)}
  .cc-csub{font-size:var(--t-label)}

  /* the telemetry strip wraps into a grid instead of scrolling off-screen */
  .tstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);overflow:visible}
  .tstrip .ts{min-width:0;padding:var(--s2) var(--s3)}
  .tstrip .ts b{font-size:var(--t-body)}

  /* sub-tabs scroll horizontally rather than wrapping into a ragged block */
  .cc-tabs{gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cc-tabs::-webkit-scrollbar{display:none}
  .cct{white-space:nowrap;padding:var(--s3) var(--s3)}

  .cc-fruin{padding:var(--s3) var(--s4)}
  .fseg{padding:var(--s3) 0;font-size:var(--t-label)}
  .cc-chart{height:180px}
  .inst-row canvas{width:118px;height:118px}
  .mapwrap.pip{width:min(230px,46%)}

  /* the threshold picker stops hugging the right edge and gets its own row */
  .cx-head{flex-direction:column;gap:var(--s3)}
  .cx-thr{margin-left:0;align-items:stretch;max-width:100%}
  .cx-thr-note{text-align:left}
  .cx-sel{width:100%}

  /* survey controls: full-width buttons beat a ragged wrapped row */
  .ax-drawer .cc-ctrls{padding:0 var(--s4) var(--s4)}
  .cc-ctrls{gap:var(--s2)}
  .cc-ctrls .cc-btn{flex:1 1 auto;justify-content:center}
  .sv-mode{width:100%}
  .sv-seg{flex:1 1 0;justify-content:center}
  .sv-prog{width:100%}

  /* vehicle analytics */
  .vh-head{flex-wrap:wrap;gap:var(--s2)}
  .vh-head .spacer{display:none}
  .vh-btn{flex:1 1 auto;justify-content:center}
  .vz-head{flex-direction:column;align-items:stretch;gap:var(--s2)}
  .vz-head .spacer{display:none}
  .vz-list{grid-template-columns:1fr}
  .vz-btns button{flex:1 1 auto;justify-content:center}

  /* the confirmation popup is the one thing that must never be cut off */
  .cf-host{left:0;right:0;transform:none;width:auto;padding:0 var(--s3);bottom:var(--s3)}
  .cf-img{max-height:38vh}
  .nt-host{left:var(--s3);right:var(--s3);width:auto}

  .auth-card{padding:var(--s6) var(--s5) var(--s5);margin:0 var(--s4)}
  .ap-body{padding:var(--s4)}
}

@media (max-width:420px){
  /* one metric per row: two 30px numbers side by side on a 360px screen
     leaves neither of them readable */
  .cc-cards{grid-template-columns:1fr}
  .tstrip{grid-template-columns:repeat(2,1fr)}
  .vh-cat .vh-n{min-width:2.4em}
  .cc-fruin-head{flex-direction:column;align-items:flex-start;gap:var(--s1)}
  .fseg{font-size:var(--t-micro);padding:var(--s2) 0}
  .topbar{padding:var(--s2) var(--s3)}
  .brand .title{font-size:var(--t-label)}
}

/* Landscape phone: vertical space is the scarce thing, so the video keeps it */
@media (max-width:900px) and (orientation:landscape){
  .stagecell{min-height:70vh}
  .cc-stage{max-height:64vh}
}

/* An inherited threshold is a decision someone else made on another day.
   It reads as a caution, not as body text. */
.cx-thr-note.inherited{color:var(--amber)}