/* ============================================================
   Auxillium POC — shared design system
   Tokens mirror docs/design/brand-foundations.md (:root block).
   Mid-fidelity, mock data. Not for clinical use.
   ============================================================ */

:root{
  /* brand */
  --aux-teal:#14A4B4; --aux-teal-600:#0E8593; --aux-teal-tint:#E5F6F8;
  --aux-navy:#16243F; --aux-navy-700:#1E3358; --aux-navy-900:#0F1B30;
  /* surfaces + text */
  --bg:#F4F6F8; --surface:#FFFFFF; --surface-2:#FAFBFC; --border:#E3E8EE;
  --text:#16243F; --text-muted:#64748B; --text-faint:#94A3B8;
  /* severity (semantic) */
  --sev-green:#2E9E5B; --sev-yellow:#E0A800; --sev-orange:#F26B21; --sev-red:#E03E3E; --sev-black:#1A1A1A;
  --sev-green-t:#E6F4EC; --sev-yellow-t:#FBF1D6; --sev-orange-t:#FDEADF; --sev-red-t:#FBE3E3; --sev-black-t:#E7E9ED;
  /* status */
  --ok:#2E9E5B; --warn:#E0A800; --danger:#E03E3E; --ai:#7A5AF8; --ai-t:#EEEAFE;
  /* shape */
  --r-card:12px; --r-ctrl:8px; --sp:8px;
  --shadow-card:0 1px 2px rgba(22,36,63,.06), 0 1px 3px rgba(22,36,63,.04);
  --shadow-pop:0 8px 24px rgba(22,36,63,.12);
  --font-display:'Poppins',-apple-system,sans-serif;
  --font-ui:'Inter',-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-ui); color:var(--text); background:var(--bg);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 1px 1px, rgba(22,36,63,.025) 1px, transparent 0);
  background-size:22px 22px;
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; color:var(--text); line-height:1.2}
a{color:var(--aux-teal-600); text-decoration:none}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--text-muted)} .faint{color:var(--text-faint)}
.mono-label{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); font-weight:600}

/* ---- POC banner ---- */
.poc-banner{
  background:repeating-linear-gradient(45deg,#FFF7E6,#FFF7E6 12px,#FEF0D0 12px,#FEF0D0 24px);
  border-bottom:1px solid #F0D9A8; color:#8A6D2F; font-size:12.5px; font-weight:600;
  padding:6px 16px; text-align:center; letter-spacing:.02em;
}

/* ---- top bar ---- */
.topbar{
  background:var(--aux-navy); color:#fff; height:60px; display:flex; align-items:center;
  gap:16px; padding:0 20px; position:sticky; top:0; z-index:30;
}
.topbar .brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:18px}
.topbar .ctx{color:#A9B6CC; font-size:13.5px}
.topbar .spacer{flex:1}
.topbar .pill-live{display:flex; align-items:center; gap:7px; font-size:13px; color:#CBD5E6}
.topbar .pill-live::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(46,158,91,.25); animation:livepulse 2s infinite}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.5}}
.topbar .user{display:flex; align-items:center; gap:8px; font-size:13.5px; color:#E2E8F2}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--aux-teal);display:grid;place-items:center;font-size:12px;font-weight:600;color:#04313A}

/* logo mark */
.logo-mark{width:30px;height:30px;flex:none}

/* ---- surface switcher (click-through nav) ---- */
.switcher{display:flex; align-items:center; gap:6px; background:var(--aux-navy-700); padding:8px 20px;
  position:sticky; top:60px; z-index:29; border-bottom:1px solid rgba(255,255,255,.06)}
.switcher a{color:#AEBBD0; font-size:13px; font-weight:600; padding:6px 14px; border-radius:999px; transition:background .15s,color .15s}
.switcher a:hover{background:rgba(255,255,255,.09); color:#fff}
.switcher a.active{background:var(--aux-teal); color:#03313A}
.switcher .sw-case{margin-left:auto; color:#8FA0BC; font-size:12px; display:flex; align-items:center; gap:8px}
.switcher .sw-case .dot{width:8px;height:8px;border-radius:50%;background:var(--sev-orange)}
@media(max-width:680px){.switcher .sw-case{display:none}}

/* ---- layout ---- */
.page{max-width:1480px; margin:0 auto; padding:22px}
.grid-2{display:grid; grid-template-columns:380px 1fr; gap:18px}
.grid-cmd{display:grid; grid-template-columns:1fr 340px; gap:18px}
@media(max-width:1100px){.grid-2,.grid-cmd{grid-template-columns:1fr}}

/* ---- cards ---- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card)}
.card-pad{padding:18px}
.card-head{display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border)}
.card-head h3{font-size:14px} .card-head .spacer{flex:1}

/* ---- severity chip ---- */
.sev{display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:12.5px;
  padding:3px 10px 3px 8px; border-radius:999px; white-space:nowrap}
.sev .dot{width:9px;height:9px;border-radius:50%}
.sev-green{background:var(--sev-green-t); color:#1C6B3C} .sev-green .dot{background:var(--sev-green)}
.sev-yellow{background:var(--sev-yellow-t); color:#8A6A00} .sev-yellow .dot{background:var(--sev-yellow)}
.sev-orange{background:var(--sev-orange-t); color:#B24A12} .sev-orange .dot{background:var(--sev-orange)}
.sev-red{background:var(--sev-red-t); color:#B02525} .sev-red .dot{background:var(--sev-red)}
.sev-black{background:var(--sev-black-t); color:#1A1A1A} .sev-black .dot{background:var(--sev-black)}

/* ---- status indicator ---- */
.status{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600}
.status .dot{width:8px;height:8px;border-radius:50%}
.status.ok{color:#1C6B3C} .status.ok .dot{background:var(--ok)}
.status.warn{color:#8A6A00} .status.warn .dot{background:var(--warn)}
.status.danger{color:#B02525} .status.danger .dot{background:var(--danger)}

/* ---- buttons ---- */
.btn{font-family:var(--font-ui); font-weight:600; font-size:14px; border:1px solid transparent;
  border-radius:var(--r-ctrl); padding:10px 16px; cursor:pointer; display:inline-flex; align-items:center;
  gap:8px; justify-content:center; transition:transform .05s, background .15s, box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--aux-teal); color:#03313A} .btn-primary:hover{background:var(--aux-teal-600); color:#fff}
.btn-navy{background:var(--aux-navy); color:#fff} .btn-navy:hover{background:var(--aux-navy-700)}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--text)} .btn-ghost:hover{background:var(--surface-2)}
.btn-ack{background:var(--ok); color:#fff; font-size:15px; padding:13px 20px} .btn-ack:hover{filter:brightness(1.05)}
.btn-xl{font-size:20px; padding:20px; border-radius:14px; width:100%}
.btn-block{width:100%}

/* ---- vitals ---- */
.vitals{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.vital{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px 12px}
.vital .k{font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); font-weight:600}
.vital .v{font-size:22px; font-weight:600; font-family:var(--font-display); margin-top:2px}
.vital .u{font-size:12px; color:var(--text-faint); font-weight:500}
.vital.abn{background:#FFF8EC; border-color:#F2DDB0} .vital.abn .v{color:#B26A00}
.vital.abn .flag{color:#B26A00; font-size:12px}
.vital.crit{background:var(--sev-red-t); border-color:#F2C4C4} .vital.crit .v{color:#B02525}

/* ---- AI draft block (safety-critical) ---- */
.ai-block{border:1.5px solid #D9CEFB; border-radius:12px; overflow:hidden; background:#fff}
.ai-head{display:flex; align-items:center; gap:9px; padding:10px 14px; background:var(--ai-t); color:#4B36A8; font-weight:600; font-size:13px}
.ai-badge{display:inline-flex; align-items:center; gap:6px; background:var(--ai); color:#fff; font-size:11px;
  font-weight:700; letter-spacing:.04em; padding:3px 8px; border-radius:6px}
.ai-head .spacer{flex:1} .ai-head .note{font-weight:500; color:#6B5BB0; font-size:12px}
.ai-body{padding:14px; font-size:14px; line-height:1.55}
.ai-body .sug{color:var(--aux-navy); font-weight:600}
.ai-actions{display:flex; gap:8px; padding:0 14px 14px}
.ai-reviewed{border-color:var(--border)} .ai-reviewed .ai-head{background:var(--surface-2); color:var(--text-muted)}

/* ---- incoming queue ---- */
.queue{display:flex; flex-direction:column}
.qrow{display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--border);
  cursor:pointer; position:relative; transition:background .12s}
.qrow:hover{background:var(--surface-2)}
.qrow.sel{background:var(--aux-teal-tint)} .qrow.sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--aux-teal)}
.qrow .sev{flex:none}
.qmain{flex:1; min-width:0}
.qmain .nm{font-weight:600; font-size:14.5px}
.qmain .sub{color:var(--text-muted); font-size:12.5px; margin-top:1px}
.qrow .eta{flex:none; align-self:center; text-align:right; font-weight:600; font-size:13px; white-space:nowrap}
.qrow .eta small{display:block; color:var(--text-faint); font-weight:500; font-size:11px}
.qrow.new{animation:slidein .5s ease}
@keyframes slidein{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}
.qrow.crit{box-shadow:inset 0 0 0 1px #F2C4C4}

/* alert banner */
.alert-banner{display:flex; align-items:center; gap:10px; background:var(--sev-red-t); border:1px solid #F2C4C4;
  color:#B02525; font-weight:600; font-size:13px; padding:10px 14px; border-radius:10px; margin-bottom:12px; animation:pulseonce 1.2s ease}
@keyframes pulseonce{0%{box-shadow:0 0 0 0 rgba(224,62,62,.4)}60%{box-shadow:0 0 0 8px rgba(224,62,62,0)}}

/* ---- key/value detail ---- */
.kv{display:grid; grid-template-columns:130px 1fr; gap:8px 14px; font-size:14px}
.kv dt{color:var(--text-muted)} .kv dd{font-weight:500}

/* ---- map ---- */
.map-wrap{position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#EAF0F2}
.map-wrap svg{display:block; width:100%; height:auto}
.map-legend{position:absolute; bottom:10px; left:10px; background:rgba(255,255,255,.92); border:1px solid var(--border);
  border-radius:8px; padding:8px 10px; font-size:11.5px; display:flex; gap:12px; backdrop-filter:blur(4px)}
.map-legend span{display:inline-flex; align-items:center; gap:5px}
.map-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}

/* ---- fleet table ---- */
.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
.tbl th{text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted);
  font-weight:600; padding:10px 14px; border-bottom:1px solid var(--border)}
.tbl td{padding:11px 14px; border-bottom:1px solid var(--border)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--surface-2)}
.tbl tbody tr.sel td{background:var(--aux-teal-tint)}
.tbl tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--aux-teal)}
.unit{font-weight:600; font-family:var(--font-display)}

/* ---- device frame (paramedic) ---- */
.devices{display:flex; gap:28px; flex-wrap:wrap; justify-content:center; padding:8px}
.device{width:380px; max-width:100%; background:var(--aux-navy-900); border-radius:34px; padding:12px;
  box-shadow:0 20px 50px rgba(15,27,48,.28)}
.device .screen{background:var(--bg); border-radius:24px; overflow:hidden; height:760px; display:flex; flex-direction:column;
  background-image:radial-gradient(circle at 1px 1px, rgba(22,36,63,.025) 1px, transparent 0); background-size:22px 22px}
.device .label{text-align:center; color:#fff; font-size:12px; font-weight:600; padding:6px 0 2px; opacity:.85}
.pbar{display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--surface); border-bottom:1px solid var(--border)}
.pbar .spacer{flex:1}
.pbody{padding:16px; overflow:auto; flex:1}
.pbody h4{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin:4px 0 10px}
.case-mini{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px; box-shadow:var(--shadow-card)}
.case-mini .nm{font-family:var(--font-display); font-weight:600; font-size:18px}
.tiers{display:flex; flex-direction:column; gap:7px; margin-top:6px}
.tier{display:flex; align-items:center; gap:9px; font-size:13px}
.tier .ic{width:18px; text-align:center}
.tier.done{color:#1C6B3C} .tier.prog{color:#8A6A00} .tier.wait{color:var(--text-faint)}
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.cat{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 8px; text-align:center;
  font-weight:600; font-size:13px; cursor:pointer}
.cat.sel{border-color:var(--aux-teal); background:var(--aux-teal-tint); color:var(--aux-teal-600)}
.cat .emo{display:block; font-size:22px; margin-bottom:6px}
.sev-pick{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.sev-btn{border:2px solid var(--border); border-radius:12px; padding:14px 4px; text-align:center; cursor:pointer; font-weight:700; font-size:12px; background:#fff}
.sev-btn .sw{display:block; width:100%; height:26px; border-radius:6px; margin-bottom:7px}
.sev-btn.sel{border-color:var(--aux-navy)}
.record{display:flex; flex-direction:column; align-items:center; gap:12px; padding:10px 0}
.record .mic{width:96px;height:96px;border-radius:50%; background:var(--sev-red-t); border:2px solid #F0BcBc; color:#B02525;
  display:grid; place-items:center; font-size:30px; box-shadow:0 0 0 0 rgba(224,62,62,.35); animation:pulseonce 1.6s infinite}
.transcript{background:var(--surface); border:1px dashed var(--border); border-radius:12px; padding:12px; font-size:13.5px; color:var(--text); font-style:italic}

/* ---- ED capacity strip (FR-HOSP-09) ---- */
.capacity{display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:14px 18px}
.capacity .cap-title{font-weight:600; font-family:var(--font-display); display:flex; align-items:center; gap:8px}
.cap-item{flex:1; min-width:150px}
.cap-item .cap-row{display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:5px}
.cap-item .cap-row b{font-weight:600}
.cap-bar{height:8px; border-radius:999px; background:var(--border); overflow:hidden}
.cap-bar i{display:block; height:100%; border-radius:999px}
.cap-ok i{background:var(--ok)} .cap-warn i{background:var(--warn)} .cap-full i{background:var(--danger)}

/* ---- patient-identity banner (FR-HOSP-08, NHS CUI) ---- */
.patient-banner{display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--surface-2);
  border:1px solid var(--border); border-left:4px solid var(--aux-navy); border-radius:10px; padding:12px 16px; margin-bottom:14px}
.patient-banner .pid{font-family:var(--font-display); font-weight:600}
.patient-banner .seg{font-size:13px; color:var(--text-muted)} .patient-banner .seg b{color:var(--text); font-weight:600}
.patient-banner .ref{margin-left:auto; font-size:12px; color:var(--text-faint); font-variant-numeric:tabular-nums}

/* ---- AI confidence chip ---- */
.conf{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; border:1px solid}
.conf-low{color:#B02525; border-color:#F2C4C4; background:var(--sev-red-t)}
.conf-mod{color:#8A6A00; border-color:#F2DDB0; background:var(--sev-yellow-t)}
.conf-high{color:#1C6B3C; border-color:#Bfe3CC; background:var(--sev-green-t)}

/* ---- annotation callouts ---- */
.anno{font-size:12px; color:#6B5BB0; background:var(--ai-t); border:1px dashed #C9BCF6; border-radius:8px; padding:7px 10px; margin-top:10px}
.anno b{color:#4B36A8}

/* ---- landing ---- */
.hero{max-width:1000px; margin:0 auto; padding:46px 22px 10px; text-align:center}
.hero .kicker{color:var(--aux-teal-600); font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:12.5px}
.hero h1{font-size:40px; margin:12px 0; color:var(--aux-navy)}
.hero h1 em{color:var(--aux-teal); font-style:normal}
.hero p{color:var(--text-muted); font-size:17px; max-width:640px; margin:0 auto}
.surfaces{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1100px; margin:34px auto; padding:0 22px}
@media(max-width:900px){.surfaces{grid-template-columns:1fr}}
.surface-card{display:block; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px;
  box-shadow:var(--shadow-card); transition:transform .12s, box-shadow .12s; color:inherit}
.surface-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-pop)}
.surface-card .tag{font-size:12px; font-weight:600; color:var(--aux-teal-600)}
.surface-card h3{font-size:20px; margin:8px 0 6px}
.surface-card .arrow{margin-top:14px; color:var(--aux-teal-600); font-weight:600; font-size:14px}
.story{max-width:1100px; margin:0 auto 50px; padding:0 22px}
.story .card-pad{display:flex; gap:20px; align-items:center; flex-wrap:wrap}
.badges{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px}
.badge{font-size:12px; font-weight:600; color:var(--aux-navy); background:#fff; border:1px solid var(--border); border-radius:999px; padding:6px 14px}

.foot{color:var(--text-faint); font-size:12px; text-align:center; padding:24px}
hr.soft{border:none; border-top:1px solid var(--border); margin:14px 0}
.row{display:flex; gap:10px; align-items:center} .wrap{flex-wrap:wrap} .end{justify-content:flex-end} .gap-s{gap:6px}
.mt{margin-top:14px} .mt-s{margin-top:8px} .mb{margin-bottom:14px}

/* ── EMS ↔ ED secure chat thread (FR-PAR-09 · AUX-101) ───────────────── */
.chat-panel{border:1px solid var(--border); border-radius:var(--r-card); padding:12px 14px; background:var(--surface)}
.chat{display:flex; flex-direction:column; gap:8px}
.msg{padding:8px 12px; border-radius:12px; max-width:80%; font-size:13px; line-height:1.4}
.msg.them{align-self:flex-start; background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-bottom-left-radius:4px}
.msg.me{align-self:flex-end; background:var(--aux-teal-tint); color:var(--text); border-bottom-right-radius:4px}
.chat-input{display:flex; gap:8px; align-items:center}
.chat-input input{flex:1; min-width:0; padding:8px 12px; font-size:13px; font-family:inherit; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-ctrl)}
.chat-input input::placeholder{color:var(--text-faint)}
.chat-input input:disabled, .chat-input button:disabled{opacity:.65; cursor:not-allowed}
/* paramedic-app compact chat affordance */
.chat-preview .cp-line{display:block; font-size:13px; color:var(--text-muted)}
.chat-preview .cp-line strong{color:var(--text)}

/* ── Ambulance status taxonomy chips (FR-CMD-05 / AUX-106) ──────────────
   Operational (non-clinical) unit status. COLOUR RULE: uses ONLY system
   hues (--ok/--aux-teal/--aux-navy/--ai/--text-muted/--danger) — never the
   clinical --sev-* palette. Pattern mirrors .status: coloured dot + label,
   subtle light tint, pill shape. */
.ustatus{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  padding:3px 10px; border-radius:999px; line-height:1.4; white-space:nowrap}
.ustatus .dot{width:8px; height:8px; border-radius:50%; flex:none}
.us-available{background:color-mix(in srgb, var(--ok) 12%, #fff); color:#1C6B3C} .us-available .dot{background:var(--ok)}
.us-enroute{background:color-mix(in srgb, var(--aux-teal) 12%, #fff); color:var(--aux-teal-600)} .us-enroute .dot{background:var(--aux-teal)}
.us-onscene{background:color-mix(in srgb, var(--aux-navy) 10%, #fff); color:var(--aux-navy)} .us-onscene .dot{background:var(--aux-navy)}
.us-hospital{background:var(--ai-t); color:#4B36A8} .us-hospital .dot{background:var(--ai)}
.us-idle{background:color-mix(in srgb, var(--text-muted) 12%, #fff); color:var(--text-muted)} .us-idle .dot{background:var(--text-muted)}
.us-offline{background:color-mix(in srgb, var(--danger) 12%, #fff); color:#B02525} .us-offline .dot{background:var(--danger)}
/* legend in Fleet Status card-head */
.ustatus-legend{font-size:11px; color:var(--text-faint); font-weight:500; letter-spacing:.01em}

/* ── Photo / ECG capture thumbnails (FR-CAP-04 / AUX-102) ──────────────
   Attach-media affordance in the offline new-case flow. Thumbs are small
   cards mirroring .cat / .transcript surfaces; the ECG trace uses the
   clinical --sev-red palette (it IS clinical content). The add tile uses a
   neutral dashed border + --text-muted (non-clinical affordance). */
.thumbs{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.thumb{width:96px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:8px; text-align:center; font-size:11px; color:var(--text-muted)}
.thumb svg{display:block; width:100%; height:40px; border-radius:8px; background:#fff}
.thumb .cap{margin-top:6px; font-size:11px; color:var(--text-muted)}
.thumb.add{display:flex; align-items:center; justify-content:center;
  min-height:64px; border-style:dashed; color:var(--text-muted); font-weight:600}

/* ---- paramedic interactive flow ---- */
.pm-stage{display:flex; gap:28px; align-items:flex-start; justify-content:center; flex-wrap:wrap}
.pm-aside{width:320px; max-width:100%}
.pm-steps{margin:8px 0 0 0; padding-left:18px; font-size:13.5px; color:var(--text-muted); line-height:1.9}
.pm-steps b{color:var(--text)}
.pscreen{animation:fadein .2s ease}
@keyframes fadein{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
.pm-back{background:none; border:none; font-size:24px; line-height:1; color:var(--aux-teal-600); cursor:pointer; padding:0 4px; font-weight:700}
.pm-toggle{background:none; border:1px solid var(--border); border-radius:999px; font-size:12px; font-weight:600; color:var(--text-muted); padding:4px 12px; cursor:pointer}
.pm-toggle:hover{background:var(--surface-2)}
.hosp{border:2px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:10px; cursor:pointer; transition:border-color .15s, background .15s}
.hosp:hover{background:var(--surface-2)}
.hosp.sel{border-color:var(--aux-teal); background:var(--aux-teal-tint)}
.hosp-cap{font-size:12px; color:var(--text-muted); margin-top:6px}
.cat,.sev-btn,.hosp{user-select:none}

/* ============================================================
   Command-centre drill-in: video feed · AI vision · traffic · timeline · VIP
   ============================================================ */
/* critical alert banner (top of command) */
.crit-alert{display:flex; align-items:center; gap:12px; background:var(--sev-red); color:#fff; font-weight:600;
  padding:12px 18px; border-radius:12px; margin-bottom:18px; box-shadow:0 6px 20px rgba(224,62,62,.35);
  animation:critpulse 1.4s infinite}
@keyframes critpulse{0%,100%{box-shadow:0 0 0 0 rgba(224,62,62,.5)}50%{box-shadow:0 0 0 10px rgba(224,62,62,0)}}
.crit-alert .x{margin-left:auto; cursor:pointer; opacity:.85; font-size:18px; background:none; border:none; color:#fff}
.crit-alert .btn-light{background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.4); padding:6px 12px; border-radius:8px; font-weight:600; cursor:pointer; font-size:13px}

/* row affordances */
.vip-badge{display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; letter-spacing:.04em;
  background:var(--aux-navy); color:#fff; padding:2px 7px; border-radius:5px}
.qrow.crit-row{animation:rowpulse 1.6s infinite}
@keyframes rowpulse{0%,100%{background:transparent}50%{background:var(--sev-red-t)}}
.drill-link{font-size:11px; color:var(--aux-teal-600); font-weight:600; cursor:pointer}

/* drill-in overlay */
.drill{position:fixed; inset:0; background:rgba(15,27,48,.55); backdrop-filter:blur(3px); z-index:60;
  display:flex; justify-content:flex-end; opacity:0; pointer-events:none; transition:opacity .18s}
.drill.open{opacity:1; pointer-events:auto}
.drill-panel{width:min(720px,96vw); height:100%; background:var(--bg); overflow-y:auto; box-shadow:-12px 0 40px rgba(15,27,48,.3);
  transform:translateX(24px); transition:transform .22s}
.drill.open .drill-panel{transform:none}
.drill-head{position:sticky; top:0; background:var(--aux-navy); color:#fff; padding:16px 20px; display:flex; align-items:center; gap:12px; z-index:2}
.drill-head h2{font-size:19px; color:#fff} .drill-head .spacer{flex:1}
.drill-head .x{background:none; border:none; color:#fff; font-size:22px; cursor:pointer; opacity:.85}
.drill-body{padding:18px; display:flex; flex-direction:column; gap:16px}
.drill-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:620px){.drill-grid{grid-template-columns:1fr}}

/* animated "video" feed */
.feed{position:relative; aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:#0c1626;
  background-image:radial-gradient(120% 80% at 50% 20%, #1b2c4b 0%, #0c1626 70%); border:1px solid var(--aux-navy-700)}
.feed .scene{position:absolute; inset:0; opacity:.9}
.feed .scan{position:absolute; left:0; right:0; height:30%; background:linear-gradient(180deg, transparent, rgba(20,164,180,.08), transparent); animation:scan 4s linear infinite}
@keyframes scan{0%{top:-30%}100%{top:100%}}
.feed .grain{position:absolute; inset:0; opacity:.05; background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0); background-size:3px 3px}
.feed .live{position:absolute; top:10px; left:10px; display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:#fff; letter-spacing:.05em}
.feed .live i{width:8px;height:8px;border-radius:50%;background:#ff5d5d; animation:livepulse 1.2s infinite} /* recording-indicator red — device-display convention on the dark feed (see AUX-133), not a clinical sev token */
.feed .ts{position:absolute; top:10px; right:10px; font-size:11px; color:#cdd8ea; font-variant-numeric:tabular-nums}
.feed .ecg{position:absolute; bottom:0; left:0; right:0; height:46px}
.feed .ecg polyline{stroke:#3ddc97; stroke-width:2; fill:none; filter:drop-shadow(0 0 4px rgba(61,220,151,.6))}
.feed .ecg .sweep{stroke-dasharray:600; stroke-dashoffset:600; animation:sweep 3s linear infinite}
@keyframes sweep{to{stroke-dashoffset:0}}
.feed .caption{position:absolute; bottom:54px; left:10px; right:10px; font-size:11px; color:#aebbd0}
.feed.locked{display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:#aebbd0}
.feed.locked .lockicon{font-size:30px}
.feed-sm{aspect-ratio:16/9}
.feed-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px;
  border-radius:50%; background:rgba(255,255,255,.92); color:var(--aux-navy); border:none; font-size:16px;
  cursor:pointer; display:grid; place-items:center; box-shadow:0 4px 16px rgba(0,0,0,.35); transition:transform .12s, background .12s; padding-left:3px}
.feed-play:hover{background:#fff; transform:translate(-50%,-50%) scale(1.08)}

/* AI vision panel (Gemini-style) */
.aivision{border:1.5px solid #D9CEFB; border-radius:12px; overflow:hidden; background:#fff}
.aivision .h{display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--ai-t); color:#4B36A8; font-weight:600; font-size:13px}
.aivision .h .spacer{flex:1} .aivision .h .pill{font-size:10px; background:var(--ai); color:#fff; padding:2px 7px; border-radius:5px; font-weight:700}
.aiobs{padding:12px 14px; display:flex; flex-direction:column; gap:7px}
.aiobs .o{font-size:13px; display:flex; gap:8px; align-items:flex-start; opacity:0; animation:obsin .4s ease forwards}
.aiobs .o .b{color:var(--ai)} .aiobs .o.flag{color:#B02525; font-weight:600}
@keyframes obsin{to{opacity:1}}
.aivision .foot{font-size:11px; color:#6B5BB0; padding:0 14px 12px}
.transcript-live{background:var(--surface-2); border-top:1px solid var(--border); padding:10px 14px; font-size:12.5px}
.transcript-live .ln{margin-bottom:4px} .transcript-live .who{font-weight:600; color:var(--text)}

/* route + traffic */
.routebox{position:relative}
.traffic-svg{width:100%; height:auto; border-radius:12px; border:1px solid var(--border); background:#EAF0F2; display:block}
.traffic-leg{display:flex; gap:14px; font-size:12px; margin-top:8px; flex-wrap:wrap}
.traffic-leg span{display:inline-flex; align-items:center; gap:5px} .traffic-leg i{width:10px;height:4px;border-radius:2px}
.alt-route{margin-top:10px; background:var(--sev-green-t); border:1px solid #Bfe3CC; color:#1C6B3C; font-weight:600;
  font-size:12.5px; padding:9px 12px; border-radius:10px; display:flex; align-items:center; gap:8px}

/* coordination timeline */
.timeline{position:relative; padding-left:4px}
.tl{display:grid; grid-template-columns:52px 18px 1fr; gap:8px; align-items:start; padding:6px 0}
.tl .tm{font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; text-align:right}
.tl .ax{position:relative}
.tl .ax::before{content:""; position:absolute; left:6px; top:3px; width:7px; height:7px; border-radius:50%; background:var(--text-faint)}
.tl.amb .ax::before{background:var(--aux-teal)} .tl.hosp .ax::before{background:var(--aux-navy)} .tl.eta .ax::before{background:var(--text-faint); box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--text-faint)}
.tl .ax::after{content:""; position:absolute; left:9px; top:10px; bottom:-12px; width:1px; background:var(--border)}
.tl:last-child .ax::after{display:none}
.tl .ev{font-size:13px} .tl .ev .tag{font-size:10px; font-weight:700; letter-spacing:.04em; padding:1px 6px; border-radius:4px; margin-right:6px}
.tl.amb .tag{background:var(--aux-teal-tint); color:var(--aux-teal-600)} .tl.hosp .tag{background:#E7ECF5; color:var(--aux-navy)} .tl.eta .tag{background:var(--surface-2); color:var(--text-muted)}

/* break-the-glass */
.btg{background:#fff; border:1.5px solid #F2DDB0; border-radius:12px; padding:16px; text-align:center}
.btg h4{font-size:15px; margin-bottom:4px} .btg p{font-size:12.5px; color:var(--text-muted); margin-bottom:12px}
.btg .pin{display:flex; gap:8px; justify-content:center; margin-bottom:10px}
.btg .pin input{width:42px; height:48px; text-align:center; font-size:20px; border:1px solid var(--border); border-radius:8px}
.btg .reason{width:100%; border:1px solid var(--border); border-radius:8px; padding:8px; font-size:13px; margin-bottom:10px; font-family:inherit}
.btg .warn{font-size:11.5px; color:#B26A12; margin-top:8px}

/* ============================================================
   AUX-132 · Icon system — inline SVG sprite (injected by app.js)
   Usage: <svg class="icon" aria-hidden="true"><use href="#i-name"/></svg>
   Icons inherit currentColor; symbols carry no stroke/fill of their own.
   ============================================================ */
.icon{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  display:inline-block; vertical-align:-3px; flex-shrink:0}
.icon-sm{width:13px; height:13px; vertical-align:-2px}
.icon-lg{width:20px; height:20px; vertical-align:-4px}

/* ============================================================
   AUX-133 · Multi-angle camera feed (.mfeed) + expand lightbox (.vmodal)
   Stage + thumbnail filmstrip (the VMS "hotspot" pattern): one main feed,
   the other cameras stay alive as thumbs; the active thumb gets a teal tally
   ring (brand accent — NOT severity red, per the colour-safety rule).
   Scene art + monitor-trace hues (#3ddc97 ECG · #4CC9F0 SpO₂ · #FFD166 RESP
   · #ff5d5d taillights/LIVE dot) are device-display conventions scoped to the
   dark feed background — exempt there, never used in light UI.
   Markup generated by app.js multiFeed(). Appended as one block per POC rules.
   ============================================================ */
.mfeed{display:block}
.mfeed .mf-stage{display:block; width:100%; cursor:zoom-in}
.mf-scenes{position:absolute; inset:0}
.mf-scene{position:absolute; inset:0; opacity:0; transition:opacity .15s ease} /* ~150ms crossfade on camera swap */
.mf-scene svg{width:100%; height:100%; display:block}
.mfeed[data-active="cabin"] .mf-scene[data-scene="cabin"],
.mfeed[data-active="road"] .mf-scene[data-scene="road"],
.mfeed[data-active="rear"] .mf-scene[data-scene="rear"]{opacity:1}
.mfeed .mf-stage .ts{right:46px; top:15px}
.mf-expand{position:absolute; top:8px; right:8px; z-index:4; width:28px; height:28px; display:grid; place-items:center;
  background:rgba(11,20,36,.72); border:1px solid rgba(255,255,255,.22); color:#cdd8ea; border-radius:8px; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s}
.mf-expand:hover{background:var(--aux-teal); border-color:var(--aux-teal); color:#03313A}
.mf-caption{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-muted); margin-top:7px}
/* thumbnail filmstrip — inactive thumbs slightly dimmed; active = tally ring + filled chip + LIVE dot */
.mfeed-thumbs{display:flex; gap:8px; margin-top:8px}
.mthumb{position:relative; width:88px; padding:0; background:#0c1626; border:1px solid var(--aux-navy-700); border-radius:8px;
  overflow:hidden; cursor:pointer; font:inherit; filter:brightness(.85) saturate(.85); transition:filter .15s, box-shadow .15s}
.mthumb:hover{filter:brightness(1) saturate(1)}
.mthumb svg{display:block; width:100%; height:auto}
.mthumb-bar{display:flex; align-items:center; justify-content:space-between; gap:4px; padding:3px 6px 4px;
  font-size:8.5px; font-weight:600; letter-spacing:.05em; color:#8fa0bc}
.mthumb-bar .lbl{border:1px solid #2f4a7a; border-radius:3px; padding:0 4px; color:#aebbd0; font-weight:700}
.mthumb-live{position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:50%; background:#ff5d5d; opacity:0}
.mfeed[data-active="cabin"] .mthumb[data-scene="cabin"],
.mfeed[data-active="road"] .mthumb[data-scene="road"],
.mfeed[data-active="rear"] .mthumb[data-scene="rear"]{box-shadow:0 0 0 2px var(--aux-teal); filter:none}
.mfeed[data-active="cabin"] .mthumb[data-scene="cabin"] .lbl,
.mfeed[data-active="road"] .mthumb[data-scene="road"] .lbl,
.mfeed[data-active="rear"] .mthumb[data-scene="rear"] .lbl{background:var(--aux-teal); border-color:var(--aux-teal); color:#03313A}
.mfeed[data-active="cabin"] .mthumb[data-scene="cabin"] .mthumb-live,
.mfeed[data-active="road"] .mthumb[data-scene="road"] .mthumb-live,
.mfeed[data-active="rear"] .mthumb[data-scene="rear"] .mthumb-live{opacity:1; animation:livepulse 1.2s infinite}
.mfeed-lg .mthumb{width:122px}
/* monitor-strip SVG text */
.mfeed .mf-mlab{font:600 6.5px var(--font-ui); letter-spacing:.08em}
.mfeed .mf-mval{font:700 10px var(--font-display); font-variant-numeric:tabular-nums}
.mfeed .mf-munit{font:500 6px var(--font-ui)}
/* scene animations (per-instance sweep speed via inline --sweep set from VITAL_PROFILES) */
.mfeed .mf-trace{fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:600; stroke-dashoffset:600; animation:mf-sweep var(--sweep,3s) linear infinite}
@keyframes mf-sweep{to{stroke-dashoffset:0}}
.mfeed .mf-breathe{transform-box:fill-box; transform-origin:50% 100%; animation:mf-breathe 3.2s ease-in-out infinite}
@keyframes mf-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.045)}}
.mfeed .mf-sway{transform-box:fill-box; transform-origin:50% 92%; animation:mf-sway 4.6s ease-in-out infinite}
@keyframes mf-sway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(1.6deg)}}
.mfeed .mf-glow{animation:mf-glow 2.1s ease-in-out infinite}
@keyframes mf-glow{0%,100%{opacity:1}50%{opacity:.7}}
.mfeed .mf-lane{animation:mf-lane 1.1s linear infinite}
@keyframes mf-lane{to{stroke-dashoffset:-44}}
.mfeed .mf-posts-l{animation:mf-posts-l 1.4s linear infinite}
.mfeed .mf-posts-r{animation:mf-posts-r 1.4s linear infinite}
@keyframes mf-posts-l{to{transform:translateX(-34px)}}
@keyframes mf-posts-r{to{transform:translateX(34px)}}
.mfeed .mf-tail{animation:mf-tail 1.8s ease-in-out infinite}
@keyframes mf-tail{0%,100%{opacity:.95}50%{opacity:.45}}
.mfeed .mf-shake{animation:mf-shake .4s steps(2) infinite alternate}
@keyframes mf-shake{from{transform:translateY(-.6px)}to{transform:translateY(.6px)}}
.mfeed .mf-doorsweep{animation:mf-doorsweep 6s linear infinite}
@keyframes mf-doorsweep{0%,72%{transform:translateX(-36px) skewX(-18deg)}88%,100%{transform:translateX(96px) skewX(-18deg)}}
/* expand lightbox — shared element appended to <body> lazily by app.js */
.vmodal{position:fixed; inset:0; z-index:70; background:rgba(15,27,48,.62); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:22px; opacity:0; pointer-events:none; transition:opacity .18s}
.vmodal.open{opacity:1; pointer-events:auto}
.vmodal-panel{width:min(900px,94vw); max-height:92vh; overflow-y:auto; background:var(--surface); border-radius:var(--r-card);
  box-shadow:var(--shadow-pop); transform:translateY(14px) scale(.98); transition:transform .22s}
.vmodal.open .vmodal-panel{transform:none}
.vmodal-head{position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:10px; padding:14px 18px;
  background:var(--aux-navy); color:#fff}
.vmodal-head h3{font-size:15px; color:#fff}
.vmodal-head .vm-gate{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#aebbd0; margin-left:auto}
.vmodal-head .x{background:none; border:none; color:#fff; cursor:pointer; opacity:.85; display:grid; place-items:center; padding:4px}
.vmodal-head .x:hover{opacity:1}
.vmodal-body{padding:18px}
.vmodal .mf-expand{display:none}
.vmodal .mf-stage{cursor:default}
/* reduced motion: freeze the scenes but keep meaningful static frames (traces fully drawn) */
@media (prefers-reduced-motion: reduce){
  .mfeed .mf-trace,.mfeed .mf-breathe,.mfeed .mf-sway,.mfeed .mf-glow,.mfeed .mf-lane,.mfeed .mf-posts-l,
  .mfeed .mf-posts-r,.mfeed .mf-tail,.mfeed .mf-shake,.mfeed .mf-doorsweep,.mthumb-live{animation:none}
  .mfeed .mf-trace{stroke-dasharray:none; stroke-dashoffset:0}
  .mf-scene{transition:none}
}

/* ============================================================
   AUX-134 · notification system — toasts, bell, notification centre
   Tier mapping (EEMUA 191 / ISA 18.2 · PagerDuty urgency split):
   crit = persistent until ✕/click, --sev-red border (clinical escalation —
   the one sanctioned sev-token use here) + single pulse; warn/ok/info
   auto-dismiss via the 6s .tprog bar (paused on hover, JS dismisses on
   animationend). Layering: .toasts z-50 / .npanel z-55 sit above page
   content (topbar z-30) and BELOW .drill (z-60) and .vmodal (z-70) so
   overlay interactions are never blocked.
   ============================================================ */

/* -- toast stack: fixed top-right, clear of banner + sticky topbar/switcher -- */
.toasts{position:fixed; top:134px; right:18px; z-index:50; display:flex; flex-direction:column; gap:10px;
  width:min(360px, calc(100vw - 32px)); pointer-events:none}
.toast{pointer-events:auto; position:relative; overflow:hidden; display:flex; gap:11px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--aux-teal);
  border-radius:var(--r-card); box-shadow:var(--shadow-pop); padding:12px 36px 13px 14px;
  animation:toast-in .26s cubic-bezier(.21,.8,.35,1) both}
.toast.click{cursor:pointer}
.toast.click:hover{background:var(--surface-2)}
.toast > .icon{flex:none; margin-top:2px; color:var(--aux-teal-600)}
.toast .tx{min-width:0; flex:1}
.toast .tt{font-weight:600; font-size:13.5px; line-height:1.35; color:var(--text)}
.toast .tb{font-size:12.5px; color:var(--text-muted); margin-top:2px; line-height:1.4}
.toast .tclose{position:absolute; top:9px; right:8px; background:none; border:none; cursor:pointer;
  color:var(--text-faint); padding:3px; border-radius:6px; display:grid; place-items:center}
.toast .tclose:hover{color:var(--text); background:var(--surface-2)}
/* status-token tiers (non-clinical) */
.toast.t-ok{border-left-color:var(--ok)}     .toast.t-ok > .icon{color:var(--ok)}
.toast.t-warn{border-left-color:var(--warn)} .toast.t-warn > .icon{color:var(--warn)}
/* crit tier — clinical escalation: --sev-red is correct here; persistent + one subtle pulse */
.toast.t-crit{border-left:4px solid var(--sev-red); background:var(--surface);
  animation:toast-in .26s cubic-bezier(.21,.8,.35,1) both, toast-pulse 1.2s ease-out .3s 1}
.toast.t-crit > .icon{color:var(--sev-red)}
.toast.t-crit .tt{color:var(--sev-red)}
/* 6s auto-dismiss progress bar — hover pauses; animationend triggers JS dismissal */
.toast .tprog{position:absolute; left:0; bottom:0; height:2.5px; width:100%; background:var(--aux-teal);
  transform-origin:left; animation:tprog 6s linear forwards}
.toast.t-ok .tprog{background:var(--ok)}
.toast.t-warn .tprog{background:var(--warn)}
.toast:hover .tprog{animation-play-state:paused}
.toast.out{animation:toast-out .28s ease-in both}
@keyframes toast-in{from{opacity:0; transform:translateX(16px)}to{opacity:1; transform:none}}
@keyframes toast-out{to{opacity:0; transform:translateX(18px) scale(.97)}}
@keyframes tprog{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes toast-pulse{0%{box-shadow:var(--shadow-pop), 0 0 0 0 rgba(224,62,62,.4)}100%{box-shadow:var(--shadow-pop), 0 0 0 14px rgba(224,62,62,0)}}

/* -- topbar bell + unread badge -- */
.bell{position:relative; flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#E2E8F2; cursor:pointer;
  transition:background .15s}
.bell:hover{background:rgba(255,255,255,.16)}
.nbadge{position:absolute; top:-4px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:999px;
  background:var(--danger); color:#fff; font-size:10.5px; font-weight:700; line-height:1;
  display:grid; place-items:center; border:2px solid var(--aux-navy)}
.nbadge[hidden]{display:none}

/* -- notification centre dropdown (right-aligned card; position set by app.js from the bell rect) -- */
.npanel{position:fixed; z-index:55; width:min(372px, calc(100vw - 24px)); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-pop); overflow:hidden;
  opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity .16s, transform .16s}
.npanel.open{opacity:1; pointer-events:auto; transform:none}
.np-head{display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border)}
.np-head .icon{color:var(--aux-teal-600)}
.np-head strong{font-size:13.5px}
.np-head .spacer{flex:1}
.np-clear{background:none; border:none; color:var(--aux-teal-600); font:600 12px var(--font-ui); cursor:pointer;
  padding:4px 7px; border-radius:6px}
.np-clear:hover{background:var(--aux-teal-tint)}
.np-list{max-height:330px; overflow-y:auto}
.nitem{display:flex; gap:10px; padding:10px 14px; border-bottom:1px solid var(--surface-2); align-items:flex-start}
.nitem:last-child{border-bottom:none}
.nitem .icon{flex:none; margin-top:2px; color:var(--text-faint)}
.nitem.n-info .icon{color:var(--aux-teal-600)}
.nitem.n-ok .icon{color:var(--ok)}
.nitem.n-warn .icon{color:var(--warn)}
.nitem.n-crit .icon{color:var(--sev-red)} /* clinical escalation entries only */
.nitem .nx{flex:1; min-width:0}
.nitem .nt{font-size:13px; font-weight:600; line-height:1.35}
.nitem.n-crit .nt{color:var(--sev-red)}
.nitem .nb{font-size:12px; color:var(--text-muted); margin-top:1px; line-height:1.4}
.nitem .ntime{font-size:11px; color:var(--text-faint); white-space:nowrap; margin-top:2px}
.nempty{padding:22px 14px; text-align:center; font-size:13px; color:var(--text-faint)}
/* toggle rows: Demo events · Critical sound */
.np-toggles{border-top:1px solid var(--border); padding:6px 8px; display:flex; flex-direction:column; background:var(--surface-2)}
.np-tog{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  background:none; border:none; padding:8px 7px; cursor:pointer; font:500 13px var(--font-ui); color:var(--text);
  border-radius:var(--r-ctrl); text-align:left}
.np-tog:hover{background:var(--surface)}
.np-tog .tog{position:relative; flex:none; width:34px; height:19px; border-radius:999px;
  background:var(--text-faint); transition:background .15s}
.np-tog .tog::after{content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
  background:var(--surface); box-shadow:0 1px 2px rgba(22,36,63,.3); transition:left .15s}
.np-tog .tog.on{background:var(--aux-teal)}
.np-tog .tog.on::after{left:17px}

/* reduced motion: drop slide/pulse, keep the 6s dismissal bar (it drives the timer) but step it */
@media (prefers-reduced-motion: reduce){
  .toast,.toast.t-crit{animation:none}
  .toast.out{animation:none; opacity:0}
  .toast .tprog{animation-timing-function:steps(8, end)}
  .npanel{transition:none; transform:none}
}

/* ================================================================
   AUX-135 · live-demo believability pass — simulated clock chip,
   ticking-ETA pulse, vitals-drift flash, fleet-map patrol drift,
   keyboard-focus polish. One appended block; reduced-motion safe.
   ================================================================ */

/* topbar clock chip (command) — operational chrome on the navy bar, brand-neutral */
.clock-chip{display:flex; align-items:center; gap:6px; flex:none; padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#E2E8F2;
  font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums}
.clock-chip .icon{color:var(--aux-teal)}

/* ETA under 60 s — operational urgency, so the amber status token (never a --sev-*).
   !important lets it win over the inline-styled <strong> in the route line. */
.eta-soon{color:var(--warn) !important; animation:eta-soon-pulse 1.3s ease-in-out infinite}
@keyframes eta-soon-pulse{50%{opacity:.5}}

/* vitals-drift flash — brand-teal "data refreshed" wash fading over 0.6 s
   (inset shadow overlays the cell's own bg, incl. .abn/.crit clinical tints) */
.vital.tick{animation:vital-tick .6s ease-out 1}
@keyframes vital-tick{from{box-shadow:inset 0 0 0 999px var(--aux-teal-tint)}to{box-shadow:inset 0 0 0 999px transparent}}

/* fleet-map patrol drift — ±8px along each unit's route bearing; the `translate`
   property composes with the marker's transform attribute, so positions hold.
   Distinct 31–44 s alternating loops keep it subtle; A-105 (idle) has no class. */
.mdrift1{animation:mdrift1 38s ease-in-out infinite alternate}  /* A-102 → City: ENE */
.mdrift2{animation:mdrift2 31s ease-in-out infinite alternate}  /* A-108 → City: ESE */
.mdrift3{animation:mdrift3 44s ease-in-out infinite alternate}  /* A-107 → Tygerberg: E */
.mdrift4{animation:mdrift4 35s ease-in-out infinite alternate}  /* A-104 on scene: small wander */
@keyframes mdrift1{from{translate:-8px 5px}to{translate:8px -5px}}
@keyframes mdrift2{from{translate:-8px -5px}to{translate:8px 5px}}
@keyframes mdrift3{from{translate:-8px -3px}to{translate:8px 3px}}
@keyframes mdrift4{from{translate:5px -3px}to{translate:-5px 3px}}

/* keyboard-focus polish — visible teal ring on every button variant */
.btn:focus-visible{outline:2px solid var(--aux-teal); outline-offset:2px}

/* reduced motion: stop drift / pulse / flash — countdown + clock text still tick */
@media (prefers-reduced-motion: reduce){
  .mdrift1,.mdrift2,.mdrift3,.mdrift4{animation:none}
  .eta-soon{animation:none}
  .vital.tick{animation:none}
}

/* ================================================================
   AUX-136 · live map interactivity — GPS pulse rings, hover info
   card (.map-tip), click/keyboard-to-drill markers.
   Severity colours appear only as per-marker ring echoes of the
   unit's clinical dot (set as stroke attrs in the SVG); all card
   chrome stays on surface/brand/status tokens. Reduced-motion safe.
   ================================================================ */

/* expanding-fading "current location" ring behind each active marker —
   two staggered rings per unit (scale 1→2.6, .55→0 over 2.4 s); the idle
   A-105 gets a single slow grey breath. pointer-events:none keeps the
   hover/click hit-area on the dot itself, not the travelling ring. */
.gps-ring{fill:none; stroke-width:2.5; opacity:.55; pointer-events:none;
  transform-box:fill-box; transform-origin:center;
  animation:gps-ring 2.4s cubic-bezier(.3,.55,.5,1) infinite}
.gps-ring2{animation-delay:1.2s}
.gps-ring-sm{stroke-width:2}                /* hospital mini-map (smaller marker) */
.gps-idle{animation-duration:6s}            /* A-105 — one slow grey pulse */
@keyframes gps-ring{from{transform:scale(1); opacity:.55}to{transform:scale(2.6); opacity:0}}

/* destination-hospital soft static glow (hospital mini-map) — brand-navy halo, no motion */
.dest-glow{fill:var(--aux-navy); opacity:.16; filter:blur(3px); pointer-events:none}

/* markers act as buttons — pointer affordance + visible keyboard-focus ring */
.map-marker{cursor:pointer}
.map-marker:focus-visible{outline:2px solid var(--aux-teal); outline-offset:3px}

/* hover info card — ONE per map container, lazily appended by bindMapTips();
   positioned from the marker's live rect (patrol drift included), clamped
   inside the map, flipped below at the top edge (.below moves the arrow). */
.map-tip{position:absolute; z-index:5; min-width:150px; max-width:240px; padding:9px 12px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow-pop); font-size:12.5px; line-height:1.45; color:var(--text);
  opacity:0; visibility:hidden; transform:translateY(3px); pointer-events:none;
  transition:opacity .14s ease, transform .14s ease}
.map-tip.show{opacity:1; visibility:visible; transform:none}
.map-tip::after{content:""; position:absolute; left:50%; bottom:-5px; width:8px; height:8px;
  background:var(--surface); border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  transform:translateX(-50%) rotate(45deg)}
.map-tip.below::after{bottom:auto; top:-5px; border-right:none; border-bottom:none;
  border-left:1px solid var(--border); border-top:1px solid var(--border)}
.map-tip .mtl{display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:2px}
.map-tip .mtl strong{font-family:var(--font-display); font-weight:600}
.map-tip .mtl .sev{font-size:10.5px; padding:2px 8px}
.map-tip .mtl .sev .dot{width:7px; height:7px}
.map-tip .mtc{color:var(--text-muted)}
.map-tip .mtc .icon{vertical-align:-3px; color:var(--aux-navy); margin-right:2px}
.map-tip .mt-lock{color:var(--aux-navy); font-weight:600}

/* reduced motion: rings hold as a static halo (location still marked), card snaps */
@media (prefers-reduced-motion: reduce){
  .gps-ring{animation:none; transform:scale(1.5); opacity:.3}
  .gps-ring2{display:none}
  .map-tip{transition:none; transform:none}
}

/* ================================================================
   AUX-137 · no-dead-clicks pass — queue/fleet filters, shared mini
   dropdown, voice-note playback, AI-draft inline edit, internal
   notes, paramedic chat sheet + attachments, map-legend filter.
   One appended block; operational chrome only — brand/status tokens,
   never --sev-* for non-clinical UI. Reduced-motion safe.
   ================================================================ */

/* filtered-out rows (hospital queue + fleet table) — !important beats .qrow's display:flex */
.qhide{display:none !important}

/* active-filter button state — brand teal (operational, not clinical) */
.flt-on{border-color:var(--aux-teal); color:var(--aux-teal-600); background:var(--aux-teal-tint)}

/* shared mini dropdown (profile chip · region picker · queue filters) — z-58: above npanel (55), below drill (60) */
.auxmenu{position:fixed; z-index:58; min-width:200px; background:var(--surface); border:1px solid var(--border);
  border-radius:10px; box-shadow:var(--shadow-pop); padding:5px; animation:fadein .12s ease}
.auxmenu-it{display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%;
  background:none; border:none; border-radius:7px; padding:8px 10px; cursor:pointer; text-align:left;
  font:600 13.5px var(--font-ui); color:var(--text)}
.auxmenu-it:hover{background:var(--surface-2)}
.auxmenu-it .s{font-size:11.5px; font-weight:500; color:var(--text-muted)}
.auxmenu-it.active .l::after{content:" ✓"; color:var(--aux-teal-600)}
.auxmenu-it.locked{opacity:.55}

/* topbar profile chip — clickable affordance on the navy bar */
#user-chip{cursor:pointer; border-radius:999px; padding:4px 10px 4px 4px}
#user-chip:hover{background:rgba(255,255,255,.08)}

/* voice-note playback — tiny determinate bar inside the button; note highlighted while "playing" */
.vn-prog{width:46px; height:5px; border-radius:999px; background:var(--border); overflow:hidden; margin-left:6px}
.vn-prog i{display:block; height:100%; width:0; background:var(--aux-teal); animation:vn-play 3s linear forwards}
@keyframes vn-play{to{width:100%}}
#d-note{border-radius:8px; transition:background .25s, box-shadow .25s}
.note-live{background:var(--aux-teal-tint); box-shadow:0 0 0 6px var(--aux-teal-tint)}

/* AI-draft inline edit — dashed brand-teal outline = draft being changed (still pre-review) */
.ai-editing{outline:2px dashed var(--aux-teal); outline-offset:4px; border-radius:6px; cursor:text}

/* internal notes under the paramedic note */
.inote-row{margin-top:8px}
.inote-row input{width:100%; padding:8px 12px; font:500 13px var(--font-ui); color:var(--text);
  border:1px solid var(--aux-teal); border-radius:8px; background:var(--surface)}
.inote-row input:focus{outline:3px solid var(--aux-teal-tint)}
.inote{margin-top:8px; font-size:12.5px; color:var(--text-muted); background:var(--surface-2);
  border:1px solid var(--border); border-left:3px solid var(--aux-teal); border-radius:8px; padding:7px 10px}
.inote b{color:var(--text)}

/* paramedic phone — tappable case card + bottom-sheet chat scoped to the device frame */
.device .screen{position:relative}
#pm-casecard{cursor:pointer; transition:box-shadow .15s}
#pm-casecard:hover{box-shadow:var(--shadow-pop)}
#pm-casecard:focus-visible{outline:2px solid var(--aux-teal); outline-offset:2px}
#pm-chatpre{cursor:pointer; border-radius:8px}
#pm-chatpre:hover .cp-line strong{color:var(--aux-teal-600)}
.pm-sheet{position:absolute; left:0; right:0; bottom:0; z-index:6; background:var(--surface);
  border-top:1px solid var(--border); border-radius:18px 18px 22px 22px; padding:12px 14px 14px;
  box-shadow:0 -14px 34px rgba(22,36,63,.22); transform:translateY(106%); transition:transform .25s ease}
.pm-sheet.open{transform:none}
.pm-sheet-head{display:flex; align-items:center; gap:8px; font-size:13px}
.pm-sheet-head .icon{color:var(--aux-teal-600)}
.pm-sheet-head .spacer{flex:1}
.pm-sheet-x{background:none; border:none; font-size:15px; color:var(--text-faint); cursor:pointer; line-height:1}
.pm-sheet-thread{max-height:180px; overflow:auto; padding:2px; margin-top:8px}

/* command map-legend filter chips + dimmed markers (visual filter — opacity .25) */
.map-legend span.lgnd{cursor:pointer; border-radius:6px; padding:2px 5px; margin:-2px -1px; user-select:none}
.map-legend span.lgnd:hover{background:var(--aux-teal-tint)}
.map-legend span.lgnd.on{background:var(--aux-teal-tint); box-shadow:inset 0 0 0 1px var(--aux-teal)}
.map-marker.mdim{opacity:.25; transition:opacity .2s}

/* reduced motion: progress bar steps, sheet/menu snap */
@media (prefers-reduced-motion: reduce){
  .vn-prog i{animation-timing-function:steps(6, end)}
  .pm-sheet{transition:none}
  .auxmenu{animation:none}
}