/* ============================================================================
   StridorRT · ui/tokens.css — the design token layer (Step 1 of the revamp)
   ----------------------------------------------------------------------------
   SOURCE OF TRUTH: sims/vent-trainer.html (StridorVENT), the platform's design
   high-water mark. Every color below is lifted verbatim from the sim's CSS, or
   composed from a sim color via an alpha tint. Nothing is invented.

   NAMESPACE: every token is prefixed `--s-`. The legacy sheets (pulse.css,
   shell.css, app-extra.css, student-bg.css) define un-prefixed vars with the
   SAME NAMES as the sim (--canvas, --accent, …) but DRIFTED VALUES — pulse's
   accent is #24c9a0, app-extra's is #24c9a0 via --x-accent, the sim's is
   #22e0b0, and companion.html carries a fourth (#3df0b4). The --s- prefix lets
   this file load everywhere TODAY with zero cascade interference; surfaces are
   migrated onto it one at a time in Steps 2–5.

   MIGRATION MAP (legacy var -> token), applied per-surface in later steps:
     --canvas            -> --s-bg-0          --accent      -> --s-teal
     --bg-2              -> --s-bg-1          --accent-d    -> --s-teal-2
     --surface           -> --s-bg-2          --accent-ink  -> --s-on-teal
     --surface-2         -> --s-bg-3          --good        -> --s-ok
     --raise             -> --s-bg-4          --warn/--mid  -> --s-warn
     --ink / --x-ink     -> --s-ink           --risk/--x-risk -> --s-danger
     --sub / --x-sub     -> --s-ink-2         --r           -> --s-r-lg
     --mute / --x-mute   -> --s-ink-3         --sh          -> --s-elev-1
     --faint             -> --s-ink-4         --sh-lg       -> --s-elev-2
     --hair / --x-hair   -> --s-line          --x-bg        -> --s-bg-0/1
     --hair-2 / --x-hair2-> --s-line-2        --x-card(2)   -> --s-bg-2/3

   FONTS: self-hosted below (public/ui/fonts/, SIL OFL — licenses alongside).
   Same families and weights the pages previously pulled from Google Fonts, so
   the swap is visually inert while making the app work fully offline.
   ========================================================================== */

/* ---- Plus Jakarta Sans — prose / UI sans (was Google Fonts CDN) ---------- */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2')}

/* ---- JetBrains Mono — the numeric / instrument face (kept, self-hosted) -- */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2')}

:root{
  /* ======================== COLOR · NEUTRAL LAYERS =========================
     Five canvas depths, deepest -> most raised.  (sim :root --canvas … --raise) */
  --s-bg-0:#05070b;              /* page canvas                                */
  --s-bg-1:#0a0e14;              /* recessed strip / alt canvas                */
  --s-bg-2:#0e1520;              /* surface: cards, inputs                     */
  --s-bg-3:#131c28;              /* raised surface: hovered card, chip base    */
  --s-bg-4:#1c2938;              /* highest: active/raised element             */

  /* Panel + well gradient endpoints (sim .panel / .scal backgrounds)         */
  --s-panel-hi:#0f1621;  --s-panel-lo:#0a1017;
  --s-well-hi:#0b1017;   --s-well-lo:#05080d;
  --s-ctl-bg:#0c131d;            /* control resting fill (sim .tbtn/.modebtn) */

  /* ============================ COLOR · INK ================================ */
  --s-ink:#eef4fb;               /* primary text            (sim --ink)       */
  --s-ink-2:#a4b4c4;             /* secondary               (sim --sub)       */
  --s-ink-3:#778a9b;             /* muted — smallest body text that must read */
  --s-ink-4:#556472;             /* faint — decorative/large labels only (AA:
                                    fails for body sizes; never use on prose) */

  /* ========================== COLOR · HAIRLINES ============================ */
  --s-line:#18222f;              /* subtle rule             (sim --hair)      */
  --s-line-2:#24303e;            /* strong rule / control border (--hair-2)   */
  --s-panel-line:#1a2432;        /* panel edge              (sim .panel)      */

  /* =========================== COLOR · ACCENTS =============================
     The sim's four instrument tones. Each ships base, dim, on-color ink, and
     an RGB triplet for alpha tints: rgba(var(--s-teal-rgb), .12) etc.        */
  --s-teal:#22e0b0;   --s-teal-2:#12c79a;   --s-on-teal:#04231b;   --s-teal-rgb:34,224,176;
  --s-amber:#ffcf47;  --s-amber-2:#f2b23a;  --s-on-amber:#2a1c06;  --s-amber-rgb:255,207,71;
  --s-blue:#5cb4ff;   --s-blue-2:#2a6aa8;   --s-on-blue:#041a2e;   --s-blue-rgb:92,180,255;
  --s-violet:#c99bff;                       --s-on-violet:#1d1230; --s-violet-rgb:201,155,255;

  /* Blue "command" fill pair (sim --cmd/--cmd-2/--cmd-b): push-to-class acts */
  --s-cmd:#1a5590; --s-cmd-2:#0f3865; --s-cmd-line:#2a6aa8;

  /* ========================== COLOR · SEMANTIC ============================= */
  --s-ok:#2fe3a0;      --s-ok-rgb:47,227,160;      /* sim --good/--flow       */
  --s-warn:#f2b23a;    --s-warn-rgb:242,178,58;    /* sim --warn              */
  --s-danger:#ff5a4d;  --s-danger-rgb:255,90,77;   /* sim --risk              */
  --s-danger-ink:#ffb0a4;                          /* alert numerals (.alert) */
  --s-info:#5cb4ff;    --s-info-rgb:92,180,255;

  /* ================== COLOR · CLINICAL TRACES (do not remap) ===============
     Waveform identities from the sim; students learn these associations.
     Pressure=amber, Flow=green-teal, Volume=blue. Values, not decoration.    */
  --s-trace-paw:#ffcf47;
  --s-trace-flow:#2fe3a0;
  --s-trace-vol:#5cb4ff;

  /* ============================== FOCUS ==================================== */
  --s-focus:#63b6ff;             /* trigger-blue: visible against every tone  */
  --s-ring:0 0 0 2px var(--s-bg-0),0 0 0 4px var(--s-focus);

  /* ============================ TYPOGRAPHY ================================= */
  --s-font-sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --s-font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* Modular scale anchored to the sim's actual sizes:
     10/11 micro-labels · 12.5 controls · 14 body · 17 lead · 20 h3 ·
     25 h1 · 33 chip value · 42 room-scale chip value                          */
  --s-fs-2xs:10px; --s-fs-xs:11px; --s-fs-sm:12.5px; --s-fs-md:14px;
  --s-fs-lg:17px;  --s-fs-xl:20px; --s-fs-2xl:25px;  --s-fs-3xl:33px; --s-fs-4xl:42px;

  --s-lh-tight:1.1; --s-lh-snug:1.3; --s-lh-body:1.5;
  --s-track-tight:-.02em;        /* display headings (sim h1/.vb-mode)        */
  --s-track-label:.12em;         /* mono micro-labels (sim panel h3, chips)   */
  --s-track-wide:.18em;          /* eyebrows / join codes                     */

  /* ============================== SPACING ================================== */
  --s-sp-1:4px; --s-sp-2:8px; --s-sp-3:12px; --s-sp-4:16px;
  --s-sp-5:20px; --s-sp-6:24px; --s-sp-8:32px; --s-sp-10:40px;

  /* =============================== RADIUS ================================== */
  --s-r-sm:8px;                  /* inner chips, kbd, small buttons           */
  --s-r-md:11px;                 /* controls, inputs, seg buttons             */
  --s-r-lg:14px;                 /* cards, wells (sim --r)                    */
  --s-r-xl:18px;                 /* panels, modals (sim .panel)               */
  --s-r-pill:999px;

  /* ============================= ELEVATION ================================== */
  --s-elev-1:inset 0 1px 0 rgba(255,255,255,.03),0 1px 2px rgba(2,6,11,.5),0 5px 16px rgba(2,6,11,.4);
  --s-elev-2:inset 0 1px 0 rgba(255,255,255,.03),0 18px 44px rgba(0,0,0,.32);   /* sim .panel */
  --s-elev-3:0 24px 90px rgba(0,0,0,.72);                                       /* sim zoom   */
  --s-inset-well:inset 0 0 34px rgba(0,0,0,.55);                                /* sim .scal  */

  /* Accent glow recipes (sim .btn.primary / .tbtn.on / slider thumb)         */
  --s-glow-teal:0 4px 16px rgba(var(--s-teal-rgb),.3);
  --s-onring-teal:0 0 0 1px rgba(var(--s-teal-rgb),.35),inset 0 0 22px rgba(var(--s-teal-rgb),.06);

  /* =============================== MOTION ==================================
     Short, eased, purposeful. Nothing bouncy.                                */
  --s-dur-1:120ms; --s-dur-2:180ms; --s-dur-3:260ms;
  --s-ease:cubic-bezier(.4,0,.2,1);
  --s-ease-out:cubic-bezier(.16,1,.3,1);

  /* ============================== Z-INDEX ==================================
     Slots chosen around the shell's existing stack (scrim 95 · nav 100 ·
     login 200 · sim zoom 290–310).                                           */
  --s-z-raised:10; --s-z-sticky:60; --s-z-nav:100; --s-z-modal:320; --s-z-toast:400;

  /* ============================ CONTROL SIZING ============================= */
  --s-ctl-h-sm:32px; --s-ctl-h:40px; --s-ctl-h-lg:48px;
  --s-tap:44px;                  /* minimum touch target on student phones    */

  /* ======================= PAGE ATMOSPHERE (opt-in) ========================
     The sim's signature backdrop: cool glow top-center, faint teal top-right,
     over the deepest canvas. Surfaces adopt it in Steps 2–4 via
     `background:var(--s-page-glow);`                                          */
  --s-page-glow:
    radial-gradient(1200px 560px at 50% -14%,rgba(24,72,120,.32),rgba(5,8,12,0) 60%),
    radial-gradient(900px 520px at 92% 0%,rgba(20,120,96,.10),rgba(5,8,12,0) 55%),
    #05070b;
}

/* Honor reduced motion everywhere the tokens are consumed. Durations collapse
   to a near-zero (not exactly 0, so any transitionend hooks still fire).     */
@media (prefers-reduced-motion:reduce){
  :root{--s-dur-1:.01ms;--s-dur-2:.01ms;--s-dur-3:.01ms}
}


*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--s-bg-0);color:var(--s-ink);font:13.5px/1.4 var(--s-font-sans);-webkit-font-smoothing:antialiased}
.app{display:grid;grid-template-rows:48px 70px minmax(0,1fr);height:100vh;
  background:radial-gradient(1100px 520px at 80% -12%,rgba(var(--s-teal-rgb),.07),transparent 60%),var(--s-bg-0)}
.top{display:flex;align-items:center;gap:18px;padding:0 20px;border-bottom:1px solid var(--s-line)}
.word{font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--s-ink)}
.word b{color:var(--s-teal);font-weight:800}
.crumb{color:var(--s-ink-2);font-size:13px}.crumb b{color:var(--s-ink);font-weight:600}
.sp{flex:1}
.pill{font:600 11px/1 var(--s-font-mono);letter-spacing:.08em;padding:7px 11px;border-radius:999px;border:1px solid rgba(var(--s-teal-rgb),.35);color:var(--s-teal);background:rgba(var(--s-teal-rgb),.07)}
.tbtn{font:600 12.5px var(--s-font-sans);padding:8px 13px;border-radius:var(--s-r-md);border:1px solid var(--s-line-2);background:var(--s-ctl-bg);color:var(--s-ink)}

.pt{display:grid;grid-template-columns:auto auto auto auto minmax(0,1fr) auto;border-bottom:1px solid var(--s-line);background:linear-gradient(var(--s-panel-hi),var(--s-panel-lo))}
.pt>div{padding:0 22px;border-right:1px solid var(--s-line);display:flex;flex-direction:column;justify-content:center;min-width:0}
.who{flex-direction:row!important;align-items:center;gap:14px;justify-content:flex-start!important}
.bed{font:700 13px/1 var(--s-font-mono);color:var(--s-ink-2);border:1px solid var(--s-line-2);border-radius:9px;padding:8px 9px;background:var(--s-bg-2)}
.nm{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.15}.nm small{display:block;font-size:12.5px;color:var(--s-ink-2);font-weight:500}
.k{font:600 10px/1 var(--s-font-mono);letter-spacing:.1em;color:var(--s-ink-3);margin-bottom:7px}
.v{font-size:15px;font-weight:600}.v.mono{font-family:var(--s-font-mono)}.v.dg{color:var(--s-danger-ink)}
.dx{color:var(--s-ink-2);font-size:13px}
.clock{border-right:0!important;flex-direction:row!important;align-items:center;gap:12px;padding-right:20px!important}
.clock .t{font:700 24px/1 var(--s-font-mono);color:var(--s-teal)}
.clock .t small{display:block;font:500 10.5px var(--s-font-mono);color:var(--s-ink-3);letter-spacing:.08em;margin-top:6px}
.clock button{width:34px;height:34px;border-radius:10px;border:1px solid var(--s-line-2);background:var(--s-ctl-bg);color:var(--s-ink);font:600 15px var(--s-font-mono)}
.scrub{width:200px;height:34px}

.body{display:grid;grid-template-columns:minmax(0,1fr) 540px;gap:16px;padding:16px 20px 20px;min-height:0}
.panel{background:linear-gradient(var(--s-panel-hi),var(--s-panel-lo));border:1px solid var(--s-panel-line);border-radius:var(--s-r-xl);box-shadow:var(--s-elev-2);min-height:0}
.left{display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;min-height:0}
.tabs{display:flex;gap:4px;align-items:center}
.tab{padding:9px 14px;border-radius:var(--s-r-md);color:var(--s-ink-2);font-weight:600;font-size:13.5px;border:1px solid transparent}
.tab[aria-selected="true"]{background:var(--s-bg-3);color:var(--s-ink);border-color:var(--s-line-2)}
.tab .n{font:500 11px var(--s-font-mono);color:var(--s-ink-3);margin-left:6px}
.sections{display:flex;gap:6px}
.sec{font:600 11.5px var(--s-font-sans);padding:6px 10px;border-radius:999px;border:1px solid var(--s-line-2);color:var(--s-ink-3)}
.sec.on{color:var(--s-ink);border-color:var(--s-line-2);background:var(--s-bg-3)}
.sec i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:6px;vertical-align:0}

/* flowsheet grid */
.fs{padding:0;overflow:hidden;display:flex;flex-direction:column}
.fs .scroll{overflow:hidden;flex:1}
table{border-collapse:collapse;width:100%;table-layout:fixed}
col.lab{width:200px}col.tr{width:96px}
th,td{height:25.5px;padding:0 12px;white-space:nowrap;border:1px solid #1b2633}
thead th{height:44px;text-align:right;font:600 13.5px var(--s-font-mono);color:var(--s-ink);background:var(--s-bg-1);border-bottom:2px solid var(--s-line-2)}
thead th.lab{text-align:left;font:600 11px var(--s-font-mono);letter-spacing:.08em;color:var(--s-ink-3)}
thead th.now{color:var(--s-teal);background:rgba(var(--s-teal-rgb),.10);border-bottom-color:var(--s-teal)}
thead th.now small{display:block;font:600 9.5px var(--s-font-mono);letter-spacing:.1em;color:var(--s-teal)}
td{text-align:right;font:500 13px var(--s-font-mono);color:var(--s-ink)}
td.lab{text-align:left;font:500 13px var(--s-font-sans);color:var(--s-ink-2);background:var(--s-bg-1)}
td.lab i{font-style:normal;color:var(--s-ink-4);font-size:11px;margin-left:6px;font-family:var(--s-font-mono)}
tbody tr:nth-child(even) td:not(.lab){background:rgba(255,255,255,.018)}
td.na{color:var(--s-ink-4)}
td.now{background:rgba(var(--s-teal-rgb),.08)!important}
td.al{color:var(--s-danger-ink);background:rgba(var(--s-danger-rgb),.16)!important;font-weight:700}
td.calc span{display:inline-block;width:38px;height:13px;border:1px dashed #36485b;border-radius:4px;vertical-align:-2px}
td .cm{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--s-teal);box-shadow:0 0 6px var(--s-teal);margin-right:7px;vertical-align:2px}
tr.grp td{height:32px;font:700 11px var(--s-font-mono);letter-spacing:.12em;text-align:left;border-left:0;border-right:0;padding-top:2px}
tr.grp td .chev{float:right;color:var(--s-ink-3);font-weight:500;letter-spacing:0}
tr.sub td{height:22px;font:700 9.5px var(--s-font-mono);letter-spacing:.14em;color:var(--s-ink-3)!important;text-transform:uppercase;background:var(--s-bg-0)!important;border-left:0;border-right:0}
tr.grp.collapsed td{color:var(--s-ink-3)!important;background:transparent!important}
td.tr svg{display:block;width:100%;height:16px}
.legend{display:flex;gap:20px;padding:10px 16px;color:var(--s-ink-3);font-size:12px;border-top:1px solid var(--s-line)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}

.right{display:grid;grid-template-rows:330px minmax(0,1fr);gap:16px;min-height:0}
.mon{position:relative;border-radius:var(--s-r-xl);overflow:hidden;border:1px solid var(--s-panel-line);box-shadow:var(--s-elev-2)}
.vent{display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
.vhead{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:14px 16px 12px;border-bottom:1px solid var(--s-line)}
.vhead .mode{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.vhead .mode b{font-weight:800;font-size:16px}.vhead .mode span{font:600 10.5px var(--s-font-mono);letter-spacing:.1em;color:var(--s-ink-3)}
.ro .k{margin-bottom:5px;font-size:9.5px}
.ro b{display:block;font:700 22px/1 var(--s-font-mono)}
.ro b small{display:block;font:500 9.5px var(--s-font-mono);color:var(--s-ink-3);margin-top:5px}
.ro.al b{color:var(--s-danger-ink);text-shadow:0 0 12px rgba(var(--s-danger-rgb),.5)}
.alarm{grid-column:1/-1;margin-top:8px;padding:8px 11px;border-radius:10px;background:rgba(var(--s-danger-rgb),.12);border:1px solid rgba(var(--s-danger-rgb),.35);color:var(--s-danger-ink);font:700 11px var(--s-font-mono);letter-spacing:.06em}
#scal{padding:10px 12px 12px;overflow:hidden}
#scal.vs-scope .loops{display:none}
#scal.vs-scope .scalars{gap:8px}
#scal.vs-scope .scal{padding:4px 8px 2px;border-radius:12px}
#scal.vs-scope .scal canvas{height:108px}
#scal.vs-scope .scal-lab{font-size:10px;top:7px}

.left{grid-template-rows:auto minmax(0,1fr)!important}
.pane{padding:0;overflow:hidden;display:flex;flex-direction:column}
.subtabs{display:flex;gap:4px;padding:12px 14px;border-bottom:1px solid var(--s-line)}
.subtabs span{padding:7px 12px;border-radius:9px;font:600 12.5px var(--s-font-sans);color:var(--s-ink-2)}
.subtabs span.on{background:var(--s-bg-3);color:var(--s-ink);box-shadow:inset 0 0 0 1px var(--s-line-2)}
.subtabs .sp{flex:1}
.subtabs .note{font:500 11.5px var(--s-font-sans);color:var(--s-ink-3);align-self:center}
.grid2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:12px 14px 14px}
.mini{border:1px solid var(--s-panel-line);border-radius:14px;background:var(--s-bg-1);overflow:hidden}
.mini h3{margin:0;padding:9px 12px;font:700 10.5px var(--s-font-mono);letter-spacing:.1em;color:var(--s-ink-2);border-bottom:1px solid var(--s-line);display:flex}
.mini h3 span{margin-left:auto;color:var(--s-ink-3);font-weight:500}
.mini table td,.mini table th{height:26px}
.mini td.lab{width:46%}
.flag{color:var(--s-danger-ink)!important;font-weight:700}
.flagw{color:var(--s-amber)!important;font-weight:700}
.chips{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-start}
.chip{font:500 11px var(--s-font-mono);padding:3px 7px;border-radius:7px;background:var(--s-bg-3);border:1px solid var(--s-line-2);color:var(--s-ink-2)}
.chip.am{color:var(--s-amber);border-color:rgba(var(--s-amber-rgb),.3);background:rgba(var(--s-amber-rgb),.06)}
.chg{display:block;font:500 11px var(--s-font-sans);color:var(--s-ink-3);margin-top:3px;white-space:normal}
table.abg td{height:auto;padding:9px 12px}
table.abg td.big{font:700 15px var(--s-font-mono)}
table.abg td.set{text-align:left;font-family:var(--s-font-sans)}
/* MAR */
table.mar td,table.mar th{height:34px}
table.mar td.lab{width:250px;line-height:1.25;padding:5px 12px}
table.mar td.lab b{display:block;color:var(--s-ink);font-weight:600;font-size:13px}
table.mar td.lab small{font:500 11px var(--s-font-mono);color:var(--s-ink-3)}
table.mar td{text-align:center;padding:0 2px;position:relative}
table.mar td.lab{text-align:left}
.dose{display:inline-flex;align-items:center;gap:5px;font:600 11.5px var(--s-font-mono);padding:4px 7px;border-radius:7px;background:rgba(var(--s-teal-rgb),.12);color:var(--s-teal);border:1px solid rgba(var(--s-teal-rgb),.3)}
.dose.prn{background:rgba(var(--s-blue-rgb),.1);color:var(--s-blue);border-color:rgba(var(--s-blue-rgb),.3)}
.dose.once{background:rgba(var(--s-violet-rgb),.1);color:var(--s-violet);border-color:rgba(var(--s-violet-rgb),.3)}
.due{font:600 11px var(--s-font-mono);color:var(--s-ink-3);border:1px dashed var(--s-line-2);padding:3px 7px;border-radius:7px}
.bar{position:absolute;left:0;right:0;top:50%;height:16px;transform:translateY(-50%);background:rgba(var(--s-violet-rgb),.16);border-top:1px solid rgba(var(--s-violet-rgb),.45);border-bottom:1px solid rgba(var(--s-violet-rgb),.45)}
.bar.start{left:50%;border-left:1px solid rgba(var(--s-violet-rgb),.6);border-radius:5px 0 0 5px}
.bar b{position:relative;z-index:1;font:700 11px var(--s-font-mono);color:var(--s-violet)}
table.mar td.rate{z-index:0}
table.mar td.rate span{position:relative;z-index:2;font:700 11.5px var(--s-font-mono);color:#e6d4ff}
table.mar td.past{opacity:1} table.mar td.fut{opacity:.45}
.nowline{position:absolute;top:0;bottom:0;width:2px;background:var(--s-teal);box-shadow:0 0 10px var(--s-teal);left:33%;z-index:3}
/* notes */
.notes{display:grid;grid-template-columns:330px minmax(0,1fr);min-height:0;height:100%}
.nlist{border-right:1px solid var(--s-line);overflow:hidden}
.ni{padding:12px 16px;border-bottom:1px solid var(--s-line)}
.ni .t{font:500 11px var(--s-font-mono);color:var(--s-ink-3)}
.ni b{display:block;font-size:13.5px;margin:2px 0}
.ni span{font-size:12px;color:var(--s-ink-2)}
.ni.on{background:rgba(var(--s-teal-rgb),.07);box-shadow:inset 3px 0 0 var(--s-teal)}
.reader{padding:20px 28px;overflow:hidden;max-width:820px}
.reader h2{margin:0;font-size:20px;letter-spacing:-.01em}
.reader .by{color:var(--s-ink-2);font-size:12.5px;margin:4px 0 16px;font-family:var(--s-font-mono)}
.reader h4{margin:16px 0 6px;font:700 10.5px var(--s-font-mono);letter-spacing:.1em;color:var(--s-amber)}
.reader p{margin:0 0 8px;color:#d8e2ec;font-size:14px;line-height:1.6;max-width:72ch}
.reader table td{height:26px}
/* imaging */
.img{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:0;height:100%}
.study{padding:12px 16px;border-bottom:1px solid var(--s-line)}
.study b{display:block;font-size:13.5px}.study .t{font:500 11px var(--s-font-mono);color:var(--s-ink-3)}
.study span{font-size:12px;color:var(--s-ink-2)}
.study.on{background:rgba(var(--s-teal-rgb),.07);box-shadow:inset 3px 0 0 var(--s-teal)}
.viewer{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0}
.film{margin:14px;border-radius:14px;border:1px dashed #33465a;background:repeating-linear-gradient(135deg,#070a0f 0 14px,#090d13 14px 28px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--s-ink-3);text-align:center}
.film b{font-size:15px;color:var(--s-ink-2)}
.film small{max-width:380px;font-size:12.5px;line-height:1.5}
.film .ic{width:46px;height:46px;border-radius:12px;border:1px solid var(--s-line-2);display:grid;place-items:center;color:var(--s-ink-3)}
.report{margin:0 14px 14px;padding:14px 16px;border-radius:14px;background:var(--s-bg-1);border:1px solid var(--s-line)}
.report h4{margin:0 0 6px;font:700 10.5px var(--s-font-mono);letter-spacing:.1em;color:var(--s-ink-2);display:flex}
.report h4 span{margin-left:auto;color:var(--s-ink-3);font-weight:500;letter-spacing:.04em}
.report p{margin:0 0 6px;font-size:13.5px;line-height:1.55;color:#d8e2ec}
.report p b{color:var(--s-ink)}
.rail-mini{border-radius:var(--s-r-xl);border:1px solid var(--s-panel-line);background:#000;display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px 6px;position:relative}
.rail-mini .expand{width:40px;height:34px;border-radius:10px;border:1px solid var(--s-line-2);background:var(--s-ctl-bg);color:var(--s-ink);font:600 15px var(--s-font-mono)}
.rail-mini .adot{width:9px;height:9px;border-radius:50%;background:var(--s-danger);box-shadow:0 0 10px var(--s-danger)}
.rail-mini div{text-align:center}.rail-mini small{display:block;font:600 9px var(--s-font-mono);letter-spacing:.08em;color:#7e94a7}
.rail-mini b{font:700 20px/1.1 var(--s-font-mono)}
.rail-mini hr{width:60%;border:0;border-top:1px solid var(--s-line-2);margin:2px 0}
.rail-mini .mlab{margin-top:auto;writing-mode:vertical-rl;transform:rotate(180deg);font:600 10px var(--s-font-mono);letter-spacing:.14em;color:var(--s-ink-3)}
.mini table th{height:24px;text-align:right;font:600 10px var(--s-font-mono);color:var(--s-ink-3);background:var(--s-bg-1)}
.dev td{height:auto;padding:11px 12px;text-align:left;white-space:normal;font:500 13px var(--s-font-sans);color:var(--s-ink)}
.dev td.m{font-family:var(--s-font-mono)}
.dev td small{display:block;color:var(--s-ink-3);font-size:11.5px;margin-top:2px}
.dev .ty{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.dev .ty i{width:9px;height:9px;border-radius:3px}
.st{font:600 11px var(--s-font-mono);padding:3px 8px;border-radius:7px;background:rgba(var(--s-ok-rgb),.1);color:var(--s-ok);border:1px solid rgba(var(--s-ok-rgb),.3)}
.st.w{background:rgba(var(--s-danger-rgb),.12);color:var(--s-danger-ink);border-color:rgba(var(--s-danger-rgb),.35)}

.right{position:relative}
.case{display:none;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border-color:rgba(var(--s-teal-rgb),.35)!important;box-shadow:0 0 0 1px rgba(var(--s-teal-rgb),.12),var(--s-elev-2)!important}
body.casemode .vent{display:none}body.casemode .case{display:grid}
.case .ch{padding:14px 18px 12px;border-bottom:1px solid var(--s-line);background:radial-gradient(380px 120px at 0 0,rgba(var(--s-teal-rgb),.10),transparent)}
.case .ch .k{color:var(--s-teal)}
.case .ch h3{margin:0;font-size:18px;letter-spacing:-.01em}
.case .ch p{margin:4px 0 0;color:var(--s-ink-2);font-size:13px}
.case .qs{padding:6px 18px;overflow:hidden}
.cq{padding:12px 0;border-bottom:1px solid var(--s-line)}
.cq:last-child{border-bottom:0}
.cq .n{font:700 10px var(--s-font-mono);letter-spacing:.1em;color:var(--s-ink-3);margin-bottom:4px}
.cq .q{font-size:14px;font-weight:600}
.cq .ans{margin-top:8px;padding:9px 11px;border-radius:10px;border:1px solid var(--s-line-2);background:var(--s-bg-0);font-size:13px;color:var(--s-ink);line-height:1.45}
.cq .row{display:flex;gap:8px;margin-top:8px;align-items:center}
.cq .in{width:90px;height:36px;border-radius:9px;border:1px solid rgba(var(--s-ok-rgb),.5);background:var(--s-bg-0);display:flex;align-items:center;padding:0 10px;font:700 15px var(--s-font-mono)}
.cq .ok{font-size:12.5px;color:var(--s-ok)}
.opt{display:flex;gap:10px;align-items:center;margin-top:6px;padding:8px 10px;border-radius:10px;border:1px solid var(--s-line-2);font-size:13px;color:var(--s-ink-2)}
.opt i{font:700 11px var(--s-font-mono);font-style:normal;width:20px;height:20px;border-radius:6px;border:1px solid var(--s-line-2);display:grid;place-items:center}
.opt.sel{border-color:var(--s-teal);color:var(--s-ink);background:rgba(var(--s-teal-rgb),.07)}
.opt.sel i{background:var(--s-teal);color:var(--s-on-teal);border-color:var(--s-teal)}
.case .cf{padding:12px 18px;border-top:1px solid var(--s-line);display:flex;align-items:center;gap:12px}
.case .cf span{font-size:12px;color:var(--s-ink-3);flex:1}
.case .cf b{font:700 13px var(--s-font-sans);padding:10px 16px;border-radius:11px;background:var(--s-teal);color:var(--s-on-teal)}
.casebtn{font:600 12.5px var(--s-font-sans);padding:8px 13px;border-radius:var(--s-r-md);border:1px solid rgba(var(--s-teal-rgb),.45);background:rgba(var(--s-teal-rgb),.1);color:var(--s-teal)}
.fstool{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--s-line)}
.fstool .tl{font:600 10.5px var(--s-font-mono);letter-spacing:.08em;color:var(--s-ink-3)}
.fstool .sp{flex:1}
body.casemode .right{grid-template-rows:236px minmax(0,1fr)}
.cq{padding:9px 0}.opt{padding:7px 10px;margin-top:5px}

/* ===== working-app additions (loaded before app-extra.css so its phone rules win) ===== */
.pt{grid-template-columns:auto auto auto auto auto minmax(0,1fr) auto}
.pt .spc{border-right:0!important}
.crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.top .sp{min-width:8px}
/* panes */
.pane{display:flex;flex-direction:column;overflow:hidden}
.pbody{flex:1;min-height:0;overflow:auto}
.blk{padding:0 14px}
.grid2.one{grid-template-columns:minmax(0,1fr);max-width:900px}
.subtabs{flex-wrap:wrap;align-items:center}
.subtabs button{padding:7px 12px;border-radius:9px;font:600 12.5px var(--s-font-sans);color:var(--s-ink-2);background:none;border:0}
.subtabs button:hover{color:var(--s-ink)}
.subtabs button.on{background:var(--s-bg-3);color:var(--s-ink);box-shadow:inset 0 0 0 1px var(--s-line-2)}
.notes,.img{flex:1;min-height:0;height:auto}
.nlist{overflow:auto}
.ni,.study{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--s-line);font:inherit;color:inherit}
.ni:hover,.study:hover{background:rgba(255,255,255,.02)}
.reader{overflow:auto}
.viewer{overflow:auto}
.film{min-height:260px}
b.gt{display:block;font:700 13.5px var(--s-font-mono);color:var(--s-ink)}
table.abg td.lab{white-space:normal}
td b.done{color:var(--s-teal);font-weight:700}
td.calc{cursor:pointer}
.st.a{background:rgba(var(--s-amber-rgb),.1);color:var(--s-amber);border-color:rgba(var(--s-amber-rgb),.35)}
.off{font:700 11px var(--s-font-mono);color:var(--s-ink-3)}
.dev td{white-space:normal}
/* flowsheet */
#fs td{overflow:hidden;text-overflow:ellipsis}
#fs th.dchg,#fs td.dchg{border-left:2px solid var(--s-line-2)}
#fs thead th.trh{text-align:left}
#fs td.wn{color:var(--s-amber);font-weight:700}
.sheet .sv b.al{color:var(--s-danger-ink)}.sheet .sv b.wn{color:var(--s-amber)}
.sheet .hist td.al{color:var(--s-danger-ink);background:none!important}.sheet .hist td.wn{color:var(--s-amber)}
.legend{flex-wrap:wrap;row-gap:6px}
.legend i.dot{width:6px;height:6px;border-radius:50%;background:var(--s-teal);vertical-align:1px}
.legend .lg-r{margin-left:auto}
.sections{flex-wrap:wrap}
/* bedside */
.right{grid-template-rows:330px minmax(0,1fr)}
.rail-mini .adot{flex:none}
.rail-mini .expand{cursor:pointer}
/* case */
.case .cf .go{font:700 13px var(--s-font-sans);padding:10px 16px;border-radius:11px;border:0;background:var(--s-teal);color:var(--s-on-teal)}
.case .cf .msg{flex-basis:100%;font-size:12px;color:var(--s-amber)}
.case .cf .reset{margin-left:auto;font:600 11px var(--s-font-sans);color:var(--s-ink-3);background:none;border:0;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.stagebar button{flex:1;height:16px;border:0;padding:0;background:linear-gradient(transparent 5px,var(--s-bg-4) 5px,var(--s-bg-4) 11px,transparent 11px);border-radius:3px}
.stagebar button.on{background:linear-gradient(transparent 5px,var(--s-teal) 5px,var(--s-teal) 11px,transparent 11px)}
.stagebar button.cur{box-shadow:0 0 0 1px rgba(var(--s-teal-rgb),.6)}
.stagebar button:disabled{cursor:default}
.opt.isright{border-color:var(--s-ok);color:var(--s-ink);background:rgba(var(--s-ok-rgb),.08)}
.opt.isright i{background:var(--s-ok);color:#03251a;border-color:var(--s-ok)}
.opt.iswrong{border-color:rgba(var(--s-amber-rgb),.6)}
.opt.iswrong i{background:var(--s-amber);color:var(--s-on-amber);border-color:var(--s-amber)}
.cq .no{margin-top:6px}
.cq .row .ok{font-weight:600}
/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:80;padding:11px 16px;border-radius:12px;background:#0f1a26;border:1px solid rgba(var(--s-teal-rgb),.45);color:var(--s-ink);font:600 13px var(--s-font-sans);box-shadow:0 18px 50px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* laptop widths */
@media (max-width:1440px){
  .body{grid-template-columns:minmax(0,1fr) 440px}
  .right{grid-template-rows:290px minmax(0,1fr)}
  .pt>div{padding:0 16px}
}
@media (max-width:1180px){
  .body{grid-template-columns:minmax(0,1fr) 380px}
  .pt .hide-l{display:none}
  .crumb{display:none}
  .vhead{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:12px}
  .ro b{font-size:18px}
  .scrub{width:150px}
}
@media (max-width:900px){
  .toast{bottom:92px}
  body.v-case .left{display:none}
  body.v-case .right{display:grid!important;grid-template-rows:auto}
  body.v-case .mon,body.v-case .vent{display:none!important}
  body.v-case .case{display:grid!important;max-height:none}
  body.v-bedside .vent{display:grid!important}
  body.v-bedside .case{display:none!important}
  body.v-bedside .right{grid-template-rows:280px auto!important}
  .vent{min-height:330px}
  .case .qs{overflow:visible}
  .pane{overflow:visible}
  .pbody{overflow:auto}
  .fs .scroll{max-height:none;overflow-x:auto}
  #fs td,#fs th{height:38px}
  #fs td{font-size:14px}
  .legend .lg-r{margin-left:0}
  .notes,.img{display:block}
  .reader{max-width:none}
  .grid2.one{max-width:none}
  .subtabs{overflow-x:auto;flex-wrap:nowrap}
  .subtabs .note{display:none}
  .left{min-height:calc(100vh - 260px)}
  .panel.pane{min-height:60vh}
  table.mar td.lab{width:200px}
  .dev{min-width:720px}
}
/* MAR + imaging fixes */
table.mar tr.grp td{text-align:left}
table.mar td.lab{white-space:normal}
.bar.start ~ span{margin-left:50%}
.film{max-height:520px}
body.casemode .right{grid-template-rows:272px minmax(0,1fr)}
#pane.fs .scroll{flex:1;min-height:0;overflow:auto}
#fs tr.grp td .gname{position:sticky;left:14px;display:inline-flex;gap:14px;align-items:center}
#fs tr.grp td .chev{float:none}
#fs thead th small{display:block;font:600 9.5px var(--s-font-mono);letter-spacing:.08em;color:var(--s-ink-3)}
#fs thead th.now small{color:var(--s-teal)}
#fs td.tx{font:500 12px var(--s-font-sans);letter-spacing:-.01em}
#fs tr.grp td{overflow:visible}
table.mar thead th small{display:block;font:600 9.5px var(--s-font-mono);letter-spacing:.08em;color:var(--s-ink-3)}
table.mar thead th.now small{color:var(--s-teal)}
.app{grid-template-columns:minmax(0,1fr)}
.body>*,.left>*,.pane,.pane>*{min-width:0}
@media (max-width:900px){
  .app,.body,.left,.pane{max-width:100vw}
  .pt{grid-template-columns:minmax(0,1fr) auto}
}
@media (max-width:900px){
  #fs col.lab{width:118px} #fs col.tr{width:64px}
  #fs td.lab{white-space:normal;line-height:1.15;font-size:12.5px}
  #fs td.lab i{display:block;margin:1px 0 0}
  body.v-bedside .right{grid-template-rows:360px auto!important}
  table.mar col:first-child{width:160px} table.mar td.lab{width:160px}
}
.clock .t{white-space:nowrap}
.case .cf .msg:empty{display:none}
@media (max-width:1440px){ .pt .hide-l{display:none} .clock .t{font-size:21px} }
@media (min-width:901px) and (max-height:820px){
  body.casemode .right{grid-template-rows:minmax(0,1fr)}
  body.casemode .mon{display:none}
}
@media (min-width:901px) and (max-width:1440px){ .pt{grid-template-columns:auto auto auto auto minmax(0,1fr) auto} }

/* ===== StridorICU app layer (on top of Stridor tokens + approved concept styles) ===== */
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--s-teal);outline-offset:2px}
.tab{background:none;cursor:pointer}
.tab:hover{color:var(--s-ink)}
.sec{background:none;cursor:pointer}
.casebtn{cursor:pointer}
.casebtn[aria-pressed="true"]{background:var(--s-teal);color:var(--s-on-teal)}
.tbtn[aria-pressed="true"]{border-color:var(--s-teal);color:var(--s-teal)}
.clock button:disabled{opacity:.35;cursor:default}
.scrub{cursor:pointer}
.body{grid-template-columns:minmax(0,1fr) 540px}
body.railmini .body{grid-template-columns:minmax(0,1fr) 84px}
body.railmini .right{display:none}
body:not(.railmini) .rail-mini{display:none}
.rail-mini{cursor:pointer}
.right .collapse{position:absolute;top:10px;right:10px;z-index:4;width:30px;height:28px;border-radius:8px;border:1px solid #2b3a4d;background:rgba(6,10,15,.85);color:var(--s-ink-2);font:600 13px var(--s-font-mono)}
.mon .me-mon{border-radius:var(--s-r-xl)}
/* flowsheet interactions */
.fs .scroll{overflow:auto}
.fs td{cursor:pointer}
.fs td.lab,.fs td.tr,.fs tr.grp td,.fs tr.sub td{cursor:default}
.fs td:not(.lab):not(.tr):hover{outline:1px solid rgba(var(--s-teal-rgb),.5);outline-offset:-1px}
.fs td.sel{outline:2px solid var(--s-teal)!important;outline-offset:-2px}
.fs thead th{position:sticky;top:0;z-index:2}
.fs td.lab,.fs thead th.lab:first-child{position:sticky;left:0;z-index:1}
.fs thead th.lab:first-child{z-index:3}
tr.grp td{cursor:pointer!important}
.empty{padding:40px 24px;color:var(--s-ink-3);text-align:center;font-size:14px}
.empty b{display:block;color:var(--s-ink-2);font-size:15px;margin-bottom:4px}
/* trend sheet */
.sheet-bd{position:fixed;inset:0;background:rgba(2,4,8,.55);z-index:60;display:none}
.sheet{position:fixed;z-index:61;right:20px;top:136px;width:440px;max-height:calc(100vh - 160px);overflow:auto;border-radius:20px;border:1px solid #263447;background:linear-gradient(#111a26,#0b111a);box-shadow:0 30px 80px rgba(0,0,0,.6);padding:16px 18px 18px;display:none}
body.sheeton .sheet,body.sheeton .sheet-bd{display:block}
.sheet .x{position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:9px;border:1px solid var(--s-line-2);background:var(--s-ctl-bg);color:var(--s-ink-2)}
.sheet .sk{font:600 10px var(--s-font-mono);letter-spacing:.1em;color:var(--s-amber)}
.sheet h3{margin:4px 0 2px;font-size:19px;letter-spacing:-.01em}
.sheet .sv{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.sheet .sv b{font:700 36px/1 var(--s-font-mono)}
.sheet .sv span{color:var(--s-ink-2);font-size:13px}
.sheet .chart{margin:12px 0;border-radius:14px;background:var(--s-bg-1);border:1px solid var(--s-line);padding:6px}
.sheet .chart svg{display:block;width:100%;height:160px}
.sheet .src{padding:10px 12px;border-radius:12px;background:var(--s-bg-2);border:1px solid var(--s-line);font-size:12.5px;color:var(--s-ink-2)}
.sheet .src b{color:var(--s-ink)}
.sheet .hist{margin-top:10px;width:100%}
.sheet .hist td{height:26px;font:500 12.5px var(--s-font-mono);border:0;border-bottom:1px solid var(--s-line);cursor:default}
.sheet .hist td:first-child{text-align:left;color:var(--s-ink-3)}
/* case panel (interactive) */
.case .qs{overflow:auto}
.cq input[type=text],.cq input[type=number]{width:96px;height:36px;border-radius:9px;border:1px solid var(--s-line-2);background:var(--s-bg-0);color:var(--s-ink);font:700 15px var(--s-font-mono);padding:0 10px}
.cq textarea{width:100%;min-height:64px;margin-top:8px;border-radius:10px;border:1px solid var(--s-line-2);background:var(--s-bg-0);color:var(--s-ink);font:13px/1.45 var(--s-font-sans);padding:9px 11px;resize:vertical}
.cq .chk{height:36px;padding:0 14px;border-radius:9px;border:1px solid var(--s-line-2);background:var(--s-bg-3);font:600 12.5px var(--s-font-sans)}
.cq .ok{color:var(--s-ok)}.cq .no{color:var(--s-amber);font-size:12.5px}
.cq .unit{font:500 11px var(--s-font-mono);color:var(--s-ink-3)}
.opt{width:100%;text-align:left;background:none}
.opt:disabled{cursor:default}
.locked{margin-top:8px;font-size:12.5px;color:var(--s-teal)}
.unlock{display:flex;gap:8px;align-items:center;width:100%}
.unlock input{flex:1;min-width:0;height:38px;border-radius:10px;border:1px solid var(--s-line-2);background:var(--s-bg-0);color:var(--s-ink);font:700 14px var(--s-font-mono);letter-spacing:.12em;text-transform:uppercase;padding:0 12px}
.unlock button{height:38px;padding:0 14px;border-radius:10px;border:0;background:var(--s-teal);color:var(--s-on-teal);font:700 13px var(--s-font-sans)}
.unlock .msg{font-size:12px;color:var(--s-amber)}
.case .cf{flex-wrap:wrap}
.stagebar{display:flex;gap:6px;margin-top:10px}
.stagebar span{flex:1;height:5px;border-radius:3px;background:var(--s-bg-4)}
.stagebar span.on{background:var(--s-teal);box-shadow:0 0 8px rgba(var(--s-teal-rgb),.5)}
/* MAR live */
table.mar td.nowc{background:rgba(var(--s-teal-rgb),.06)}
/* present mode: larger for the projector */
body.present{zoom:1.12}
/* bedside readouts when not ventilated */
.novent{padding:18px;color:var(--s-ink-2);font-size:14px}
.novent b{display:block;color:var(--s-ink);font-size:16px;margin-bottom:4px}
/* ===== phone ===== */
.tabbar{display:none}
.more{display:none}
@media (max-width:900px){
  html,body{height:auto;min-height:100%}
  .app{grid-template-rows:auto auto auto;height:auto;min-height:100vh;padding-bottom:84px}
  .top{height:52px;padding:0 14px;gap:10px}
  .top .crumb,.top .pill,#presentBtn{display:none}
  .pt{grid-template-columns:1fr auto;grid-auto-rows:auto}
  .pt>div{padding:10px 14px;border-right:0;border-bottom:1px solid var(--s-line)}
  .pt .who{grid-column:1/-1}
  .pt .hide-m{display:none}
  .pt .clock{grid-column:1/-1;justify-content:space-between}
  .scrub{display:none}
  .body{display:block;padding:10px 10px 0}
  body.railmini .body{display:block}
  .left{display:block}
  .tabs{display:none}
  .fstool{flex-wrap:wrap}
  .fstool .tl{display:none}
  .right{display:none!important}
  .rail-mini{display:none!important}
  body.v-bedside .left{display:none}
  body.v-bedside .right{display:grid!important;grid-template-rows:280px auto;gap:10px}
  body.v-bedside .right .collapse{display:none}
  body.casemode.v-bedside .right{grid-template-rows:200px auto}
  #scal.vs-scope .scal:nth-child(3){display:none}
  #scal.vs-scope .scal canvas{height:96px}
  .vhead{grid-template-columns:repeat(5,minmax(0,1fr))}
  .vhead .mode span{display:none}
  .ro b{font-size:18px}
  .grid2{grid-template-columns:1fr}
  .notes,.img{grid-template-columns:1fr}
  .nlist{max-height:240px;overflow:auto;border-right:0;border-bottom:1px solid var(--s-line)}
  .reader{padding:16px}
  .film{min-height:200px}
  table.abg{min-width:760px}
  .pane>div{overflow-x:auto}
  .sheet{left:0;right:0;top:auto;bottom:0;width:auto;border-radius:24px 24px 0 0;max-height:82vh}
  .tabbar{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:50;height:76px;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--s-line);background:rgba(10,14,20,.97);padding:8px 4px 16px}
  .tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;font:600 10.5px var(--s-font-sans);color:var(--s-ink-3)}
  .tabbar button svg{width:22px;height:22px}
  .tabbar button[aria-current="true"]{color:var(--s-teal)}
  .more{position:fixed;left:0;right:0;bottom:76px;z-index:55;background:#0c131d;border-top:1px solid var(--s-line-2);padding:8px;display:none;grid-template-columns:repeat(4,1fr);gap:6px}
  body.moreon .more{display:grid}
  .more button{padding:12px 4px;border-radius:12px;border:1px solid var(--s-line-2);background:var(--s-bg-2);font:600 12.5px var(--s-font-sans)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== v2: the case comes first (task panel | chart | bedside) ===== */
.body{grid-template-columns:400px minmax(0,1fr) 440px}
body.railmini .body{grid-template-columns:400px minmax(0,1fr) 84px}
.right{grid-template-rows:250px minmax(0,1fr)}
.go{font:700 13px var(--s-font-sans);padding:10px 16px;border-radius:11px;border:0;background:var(--s-teal);color:var(--s-on-teal)}
.linkbtn{background:none;border:0;padding:0;color:var(--s-teal);font:600 12.5px var(--s-font-sans);text-decoration:underline;text-underline-offset:3px}
/* task panel */
.task{display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;min-height:0;border-color:rgba(var(--s-teal-rgb),.35)!important;box-shadow:0 0 0 1px rgba(var(--s-teal-rgb),.1),var(--s-elev-2)!important}
.task .th{padding:16px 18px 12px;border-bottom:1px solid var(--s-line);background:radial-gradient(420px 140px at 0 0,rgba(var(--s-teal-rgb),.10),transparent)}
.task .th .k{color:var(--s-teal);margin-bottom:6px}
.task .th h2{margin:0 0 6px;font-size:20px;letter-spacing:-.01em;line-height:1.2}
.task .th p{margin:0;color:var(--s-ink-2);font-size:13px;line-height:1.5}
.task .trow{display:flex;align-items:center;gap:10px;margin-top:9px}
.task .prog{margin-left:auto;font:600 11px var(--s-font-mono);color:var(--s-ink-3)}
.task .qs{overflow:auto;padding:2px 18px 14px;min-height:0}
.task .cq{padding:14px 0}
.cq .n{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.cq .num{flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:var(--s-bg-3);color:var(--s-ink-2);font:700 11px var(--s-font-mono)}
.cq.isdone .num{background:rgba(var(--s-ok-rgb),.15);color:var(--s-ok)}
.where{margin-left:auto;background:rgba(var(--s-amber-rgb),.08);border:1px solid rgba(var(--s-amber-rgb),.35);color:var(--s-amber);font:600 11.5px var(--s-font-sans);padding:4px 10px;border-radius:999px;letter-spacing:0;text-transform:none}
.where:hover{background:rgba(var(--s-amber-rgb),.16)}
.cq .q{font-size:14.5px;line-height:1.4;font-weight:600}
.fb{margin-top:8px;padding:9px 11px;border-radius:10px;font-size:13px;line-height:1.5}
.fb.ok{background:rgba(var(--s-ok-rgb),.08);border:1px solid rgba(var(--s-ok-rgb),.3);color:#d6f7ea}
.fb.ok b{color:var(--s-ok)}
.fb.no{background:rgba(var(--s-amber-rgb),.08);border:1px solid rgba(var(--s-amber-rgb),.35);color:#ffe7a6}
.fb.shown{background:var(--s-bg-2);border:1px solid var(--s-line-2);color:var(--s-ink-2)}
.fb.shown b{color:var(--s-ink)}
.cq .linkbtn{display:inline-block;margin-top:7px}
.checks{display:grid;gap:6px;margin-top:8px}
.chkitem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border-radius:10px;border:1px solid var(--s-line-2);background:none;font-size:13px;color:var(--s-ink-2)}
.chkitem i{flex:none;width:20px;height:20px;border-radius:6px;border:1px solid var(--s-line-2);display:grid;place-items:center;font:700 11px var(--s-font-mono);font-style:normal}
.chkitem small{margin-left:auto;padding-left:8px;font:600 10.5px var(--s-font-mono);white-space:nowrap}
.chkitem.on{border-color:var(--s-teal);color:var(--s-ink);background:rgba(var(--s-teal-rgb),.07)}
.chkitem.on i{background:var(--s-teal);color:var(--s-on-teal);border-color:var(--s-teal)}
.chkitem.isright{border-color:var(--s-ok);background:rgba(var(--s-ok-rgb),.07)}
.chkitem.isright i{background:var(--s-ok);border-color:var(--s-ok);color:#03251a}
.chkitem.missed{border-color:rgba(var(--s-amber-rgb),.6);border-style:dashed;color:var(--s-ink)}
.chkitem.missed i{color:var(--s-amber);border-color:var(--s-amber)}
.chkitem.missed small{color:var(--s-amber)}
.chkitem.iswrong{border-color:rgba(var(--s-danger-rgb),.6);background:rgba(var(--s-danger-rgb),.06)}
.chkitem.iswrong i{background:var(--s-danger);border-color:var(--s-danger);color:#fff}
.chkitem.iswrong small{color:var(--s-danger-ink)}
.chkitem.quiet{opacity:.45}
.chkitem:disabled,.opt:disabled{cursor:default}
.opt{align-items:flex-start;width:100%;text-align:left}
.opt>span{display:block;min-width:0}
.opt i{flex:none}
.opt .why{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--s-ink-2)}
.opt.isright .why{color:#cdeee0}
.outcome{margin:8px 0 6px;padding:12px 14px;border-radius:12px;background:rgba(var(--s-blue-rgb),.07);border:1px solid rgba(var(--s-blue-rgb),.3)}
.outcome .k{color:var(--s-blue);margin-bottom:6px}
.outcome p{margin:0;font-size:13.5px;line-height:1.55}
.outcome.sum{background:rgba(var(--s-teal-rgb),.07);border-color:rgba(var(--s-teal-rgb),.3)}
.outcome.sum .k{color:var(--s-teal)}
.task .cf{padding:12px 18px;border-top:1px solid var(--s-line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.task .cf>span{font-size:12px;color:var(--s-ink-3);flex:1;min-width:140px;line-height:1.4}
.task .cf .msg{flex-basis:100%;font-size:12px;color:var(--s-amber)}
.task .cf .msg:empty{display:none}
.task .cf .reset{font:600 11px var(--s-font-sans);color:var(--s-ink-3);background:none;border:0;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.task .unlock{flex:1}
/* "where do I look" highlight */
.hl{box-shadow:inset 0 0 0 2px var(--s-amber)!important;background:rgba(var(--s-amber-rgb),.18)!important;color:var(--s-ink)!important;animation:hlp 1.1s ease-in-out 4}
@keyframes hlp{50%{box-shadow:inset 0 0 0 2px var(--s-amber),0 0 22px rgba(var(--s-amber-rgb),.65)}}
#ptHt{border-radius:10px}
tr.hl{box-shadow:none!important;background:none!important;animation:none}
tr.hl td{background:rgba(var(--s-amber-rgb),.13)!important}
tr.hl td:first-child{box-shadow:inset 3px 0 0 var(--s-amber)}
/* empty flowsheet sections */
#fs tr.emptyrow td{height:34px;text-align:left;font:500 12.5px var(--s-font-sans);color:var(--s-ink-3);background:var(--s-bg-1)!important;overflow:visible}
/* centered pop-ups */
.modal-bd{position:fixed;inset:0;background:rgba(2,4,8,.66);z-index:70;display:none}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:71;width:min(580px,calc(100vw - 24px));max-height:min(88vh,780px);overflow:auto;border-radius:22px;border:1px solid rgba(var(--s-teal-rgb),.35);background:linear-gradient(#111a26,#0b111a);box-shadow:0 40px 120px rgba(0,0,0,.7);padding:24px 26px 20px;display:none}
body.modalon .modal,body.modalon .modal-bd{display:block}
.modal .x,.sheet .x{position:absolute;right:14px;top:14px;width:32px;height:32px;border-radius:9px;border:1px solid var(--s-line-2);background:var(--s-ctl-bg);color:var(--s-ink-2)}
.modal .mk{font:600 10.5px var(--s-font-mono);letter-spacing:.1em;color:var(--s-teal)}
.modal h2{margin:4px 0 14px;font-size:24px;letter-spacing:-.015em}
.modal p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:#d8e2ec}
.modal .role{color:var(--s-teal);font-weight:600}
.modal h4{margin:16px 0 6px;font:700 10.5px var(--s-font-mono);letter-spacing:.1em;color:var(--s-amber)}
.modal ol{margin:0 0 12px;padding-left:20px}
.modal li{font-size:14.5px;line-height:1.6;color:#d8e2ec}
.modal .small{font-size:12.5px;color:var(--s-ink-3)}
.modal .what{margin:2px 0 16px;padding:14px 16px;border-radius:14px;background:rgba(var(--s-blue-rgb),.07);border:1px solid rgba(var(--s-blue-rgb),.3)}
.modal .what h4{margin-top:0;color:var(--s-blue)}
.modal .what p{font-size:14px}
.modal .you.ok{color:var(--s-ok)}.modal .you.diff{color:var(--s-amber)}.modal .you b{color:var(--s-ink)}
.modal .mf{display:flex;justify-content:flex-end;margin-top:10px}
.sheet{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(480px,calc(100vw - 24px));max-height:min(84vh,720px)}
/* ventilator: scalars + loops */
#scal{overflow:auto}
#scal.vs-scope .loops{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
#scal.vs-scope .scalars{gap:7px}
#scal.vs-scope .scal canvas{height:72px}
#scal.vs-scope .loop{padding:6px 8px;border-radius:12px}
#scal.vs-scope .loop canvas{height:132px}
#scal.vs-scope .loop .scal-lab{font-size:9.5px}
/* wide laptop */
@media (max-width:1600px){
  .body{grid-template-columns:370px minmax(0,1fr) 410px}
  body.railmini .body{grid-template-columns:370px minmax(0,1fr) 84px}
}
/* laptop: bedside becomes a drawer over the chart */
@media (min-width:901px) and (max-width:1366px){
  .body,body.railmini .body{grid-template-columns:340px minmax(0,1fr) 84px}
  body:not(.railmini) .rail-mini{display:flex}
  body:not(.railmini) .right{position:fixed;top:128px;right:108px;bottom:16px;width:440px;z-index:45;padding:10px;border-radius:var(--s-r-xl);background:var(--s-bg-0);border:1px solid var(--s-line-2);box-shadow:0 30px 90px rgba(0,0,0,.75)}
}
@media (min-width:901px) and (max-height:820px){ .right{grid-template-rows:220px minmax(0,1fr)} }
/* phone */
@media (max-width:900px){
  .task{display:none}
  body.v-task .task{display:grid;grid-template-rows:auto auto auto;margin-bottom:12px}
  body.v-task .left{display:none}
  body.v-task .task .qs{overflow:visible}
  #ptHt{display:flex}
  .sheet{left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);border-radius:20px;width:calc(100vw - 20px)}
  .modal{padding:20px 18px 16px}
  .modal h2{font-size:21px}
  #scal.vs-scope .scal:nth-child(3){display:block}
  #scal.vs-scope .loop canvas{height:120px}
  .vent{min-height:0}
  #briefBtn{display:inline-flex}
}
/* v2 fixes */
.right{grid-template-rows:228px minmax(0,1fr)}
#scal.vs-scope .scal canvas{height:94px}
#scal.vs-scope .loop canvas{height:122px}
table.abg{width:100%;min-width:640px}
table.abg td.big{font-size:14px}
table.abg td.set .chips{flex-wrap:wrap}
.grid2{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.mini td,.mini td.lab{white-space:normal;line-height:1.3;padding-top:4px;padding-bottom:4px}
.mini td.lab i{display:block;margin:1px 0 0}
@media (min-width:901px) and (max-width:1366px){ body:not(.railmini) .right{grid-template-rows:262px minmax(0,1fr)} }
@media (max-width:900px){
  #mon .me-vitals{flex-direction:row;flex-wrap:nowrap}
  #mon .me-vit{flex:1 1 25%;padding:6px 8px;border-bottom:0;border-right:1px solid rgba(255,255,255,.05)}
  #mon .me-v{font-size:20px}#mon .me-v.me-sm{font-size:14px}
  body.v-bedside .right{grid-template-rows:330px auto!important}
}
@media (max-width:900px){ #mon .me-body{grid-template-rows:minmax(0,1fr) 70px} #mon .me-vitals{border-top:1px solid rgba(255,255,255,.06)} }
/* ===== bedside monitor: the Stridor case-page monitor ===== */
.mon{background:#04080c;--hr:#5fd0ff;--spo2:#46e0a0;--rr:#ffd166;--bp:#ff7a8a;--co2:#c9b3ff;--alarm:#ff5b5b;--warn:#ffb020}
.mon .monitor-fixed{position:absolute;inset:0;padding:10px 12px 12px;display:flex;flex-direction:column;min-height:0}
.mon-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 4px 9px}
.mon-tools{display:flex;align-items:center;gap:10px}
.mon-pt{font-size:14px;font-weight:700;line-height:1.15;min-width:0}
.mon-pt span{display:block;font-family:var(--s-font-mono);font-size:10px;color:#7f93a6;letter-spacing:.08em;text-transform:uppercase;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-clock{font-family:var(--s-font-mono);font-size:14px;color:var(--s-teal)}
.fs-btn{font-family:var(--s-font-mono);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--s-teal);background:rgba(61,240,180,.08);border:1px solid rgba(61,240,180,.25);border-radius:7px;padding:6px 10px;white-space:nowrap}
.fs-btn:hover{background:rgba(61,240,180,.16)}
.mon-screen{display:flex;flex-direction:column;background:#000;border:1px solid #1a2630;border-radius:10px;overflow:hidden;flex:1 1 auto;min-height:0}
.mrow{display:flex;flex:1 1 0;min-height:0;border-bottom:1px solid #0e161d}
.mrow:last-child{border-bottom:none}
.mrow .wlane{position:relative;flex:1 1 auto;border-right:1px solid #141e26;min-width:0}
.mrow .wlane canvas{position:absolute;inset:0;width:100%;height:100%}
.mrow .numblock{width:128px;flex:none;padding:4px 11px;display:flex;flex-direction:column;justify-content:center;min-height:0;overflow:hidden}
.wlbl{position:absolute;top:3px;left:6px;font-family:var(--s-font-mono);font-size:10.5px;font-weight:700;z-index:2;opacity:.9}
.nb-top{display:flex;justify-content:space-between;align-items:baseline}
.nb-lbl{font-family:var(--s-font-mono);font-size:11px;font-weight:700;letter-spacing:.04em}
.nb-sub{font-family:var(--s-font-mono);font-size:9px;color:#5d7184}
.nb-val{font-family:var(--s-font-mono);font-weight:700;font-size:clamp(22px,3.6vh,40px);line-height:.95;letter-spacing:-.02em;transition:color .4s;text-shadow:0 0 14px currentColor}
.nb-val.bpval{font-size:clamp(16px,2.3vh,24px);letter-spacing:0}
.nb-map{font-family:var(--s-font-mono);font-size:11px;color:var(--bp);opacity:.85}
.mrow.hr .wlbl,.mrow.hr .nb-lbl,.mrow.hr .nb-val{color:var(--hr)}
.mrow.spo2 .wlbl,.mrow.spo2 .nb-lbl,.mrow.spo2 .nb-val{color:var(--spo2)}
.mrow.bp .wlbl,.mrow.bp .nb-lbl,.mrow.bp .nb-val{color:var(--bp)}
.mrow.rr .wlbl,.mrow.rr .nb-lbl,.mrow.rr .nb-val{color:var(--rr)}
.mrow.co2 .wlbl,.mrow.co2 .nb-lbl,.mrow.co2 .nb-val{color:var(--co2)}
.nb-val.crit{color:var(--alarm)!important;animation:flash 1s infinite}
.nb-val.warn{color:var(--warn)!important}
@keyframes flash{50%{opacity:.5}}
.mrow.co2 .nolane{display:none;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font:600 10.5px var(--s-font-mono);color:#4c5e6e;letter-spacing:.06em}
.mrow.co2.off .nolane{display:block}
.mrow.co2.off canvas{visibility:hidden}
.monitor-fixed.fs{position:fixed!important;inset:0!important;z-index:300;background:#000;padding:22px 26px;border:none}
.monitor-fixed.fs .nb-val{font-size:80px}
.monitor-fixed.fs .nb-val.bpval{font-size:44px}
.monitor-fixed.fs .nb-map{font-size:18px}
.monitor-fixed.fs .nb-lbl{font-size:18px}.monitor-fixed.fs .nb-sub{font-size:13px}
.monitor-fixed.fs .wlbl{font-size:15px}
.monitor-fixed.fs .mrow .numblock{width:260px}
.monitor-fixed.fs .mon-pt{font-size:20px}.monitor-fixed.fs .mon-clock{font-size:20px}
.right{grid-template-rows:330px minmax(0,1fr)}
@media (min-width:901px) and (max-height:900px){ .right{grid-template-rows:300px minmax(0,1fr)} }
@media (min-width:901px) and (max-height:780px){ .right{grid-template-rows:270px minmax(0,1fr)} }
@media (min-width:901px) and (max-width:1366px){ body:not(.railmini) .right{grid-template-rows:300px minmax(0,1fr)} }
@media (max-width:900px){ body.v-bedside .right{grid-template-rows:380px auto!important} .mrow .numblock{width:104px} .mon-pt span{white-space:normal} }
.tabs{min-width:0;overflow:hidden}
.tabs .tab{white-space:nowrap}
#railBtn{white-space:nowrap;flex:none}
@media (max-width:1600px){ .tabs{gap:2px} .tabs .tab{padding:8px 10px;font-size:13px} #railBtn{padding:7px 10px} }

/* ===== live class additions (student app) ===== */
[hidden]{display:none!important}
.conndot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#556472;flex:none}
.conndot.up{background:var(--s-ok);box-shadow:0 0 8px var(--s-ok)}
.conndot.down{background:var(--s-amber);animation:flash 1.2s infinite}
.conn.up{color:var(--s-ok)}.conn.down{color:var(--s-amber)}
.qst{margin-left:6px;font:600 10px var(--s-font-mono);letter-spacing:.06em;padding:3px 7px;border-radius:999px;border:1px solid var(--s-line-2);color:var(--s-ink-3);text-transform:uppercase}
.qst.open{color:var(--s-teal);border-color:rgba(var(--s-teal-rgb),.5);background:rgba(var(--s-teal-rgb),.08);animation:flash 1.6s infinite}
.qst.sent{color:var(--s-blue);border-color:rgba(var(--s-blue-rgb),.4)}
.qst.done{color:var(--s-ok);border-color:rgba(var(--s-ok-rgb),.4)}
.cq.isopen{margin:0 -10px;padding:14px 10px;border-radius:14px;background:rgba(var(--s-teal-rgb),.05);box-shadow:inset 0 0 0 1px rgba(var(--s-teal-rgb),.35)}
.cq.focus:not(.isopen){box-shadow:inset 3px 0 0 var(--s-blue);padding-left:10px}
.cq .hint,.trb .hint{margin-top:7px;font-size:12px;color:var(--s-ink-3)}
.opt .pct{margin-left:auto;padding-left:8px;font:700 12px var(--s-font-mono);font-style:normal;color:var(--s-ink-3);align-self:center}
.opt.isright .pct{color:var(--s-ok)}
.opt:disabled:not(.sel):not(.isright):not(.iswrong){opacity:.75}
/* docked question (phones) */
.tray{position:fixed;left:8px;right:8px;bottom:84px;z-index:58;max-height:62vh;overflow:auto;border-radius:18px;border:1px solid rgba(var(--s-teal-rgb),.5);background:linear-gradient(#111c28,#0b121b);box-shadow:0 -10px 40px rgba(0,0,0,.6)}
.tray[hidden]{display:none}
.trh{display:flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;border-bottom:1px solid var(--s-line);position:sticky;top:0;background:#111c28;z-index:1}
.trtoggle{flex:1;display:flex;justify-content:space-between;align-items:center;height:36px;background:none;border:0;color:var(--s-teal);font:700 13px var(--s-font-sans);text-align:left}
.trtoggle span{font:600 11px var(--s-font-mono);color:var(--s-ink-3)}
.trx{width:34px;height:34px;border-radius:9px;border:1px solid var(--s-line-2);background:var(--s-ctl-bg);color:var(--s-ink-2)}
.trb{padding:10px 14px 14px}
.trb .q{font-size:14.5px;font-weight:600;line-height:1.4}
body.trayon .app{padding-bottom:calc(84px + 30vh)}
/* ECG */
.ecglist{display:grid;gap:14px;padding:14px}
.ecgcard{border:1px solid var(--s-panel-line);border-radius:14px;background:var(--s-bg-1);overflow:hidden}
.ecgcard h4{margin:0;padding:10px 14px;font:700 10.5px var(--s-font-mono);letter-spacing:.1em;color:var(--s-ink-2);border-bottom:1px solid var(--s-line);display:flex;gap:10px}
.ecgcard h4 span{margin-left:auto;color:var(--s-ink-3);font-weight:500}
.ecgpaper{background:#fff7f6;overflow-x:auto}
.ecgsvg{display:block;width:100%;min-width:640px;height:auto}
.ecgcard p{margin:10px 14px 0;font-size:13.5px;line-height:1.55;color:#d8e2ec}.ecgcard p:last-child{margin-bottom:12px}
.ecgcard p.pend{color:var(--s-amber)}
.hlblk{box-shadow:0 0 0 2px var(--s-amber),0 0 24px rgba(var(--s-amber-rgb),.35);border-radius:14px}
.mon.hl{box-shadow:0 0 0 3px var(--s-amber),0 0 30px rgba(var(--s-amber-rgb),.5)!important}
/* BiPAP patients: no ventilator scalars, so the monitor gets the room */
body.noscal .right{grid-template-rows:minmax(0,1.4fr) auto!important}
body.noscal .vent{grid-template-rows:auto}
/* projector chart view (iframe): no case panel, bigger type */
body.watch .task{display:none!important}
body.watch .body{grid-template-columns:minmax(0,1fr) 440px!important}
body.watch.railmini .body{grid-template-columns:minmax(0,1fr) 84px!important}
body.watch .top,body.watch #briefBtn,body.watch .pill{display:none}
body.watch .app{grid-template-rows:70px minmax(0,1fr)}
body.watch .tabbar,body.watch .more{display:none!important}
body.watch #fs td,body.watch #fs th{font-size:14px;height:29px}
/* loading + join pages */
.loading{position:fixed;inset:0;z-index:300;display:grid;place-content:center;text-align:center;background:var(--s-bg-0);gap:10px}
.loading .word{font-size:28px}.loading p{color:var(--s-ink-2)}.loading a{color:var(--s-teal)}
body.joinpage{min-height:100vh;display:grid;place-items:center;background:radial-gradient(900px 500px at 50% -10%,rgba(var(--s-teal-rgb),.1),transparent 60%),var(--s-bg-0)}
.join{width:min(420px,92vw);text-align:center}
.word.big{font-size:38px}
.join .lead{color:var(--s-ink-2);margin:6px 0 26px}
.joinbox{padding:24px;border-radius:20px;border:1px solid var(--s-line-2);background:linear-gradient(var(--s-panel-hi),var(--s-panel-lo));text-align:left}
.joinbox label{display:block;font:600 11px var(--s-font-mono);letter-spacing:.1em;color:var(--s-ink-3);text-transform:uppercase;margin-bottom:8px}
.joinbox input{width:100%;height:64px;border-radius:14px;border:1px solid var(--s-line-2);background:var(--s-bg-0);color:var(--s-teal);font:800 32px var(--s-font-mono);letter-spacing:.3em;text-align:center;text-transform:uppercase}
.joinbox .go{width:100%;height:52px;margin-top:12px;font-size:16px}
.joinbox .fine{margin:12px 0 0;font-size:12px;color:var(--s-ink-3);text-align:center}
.teachlink{display:inline-block;margin-top:22px;color:var(--s-ink-3);font-size:13px}
@media (max-width:900px){ .conndot{margin-left:auto} .top .pill{display:none} }
.novent{grid-column:1/-1}
body:not(.solo) #presentBtn{display:none}
@media (max-width:900px){ #monFs{display:none} .mon-top{gap:8px} }
/* phone + tablet-portrait polish */
@media (max-width:900px){
  body.noscal.v-bedside .right{grid-template-rows:360px auto!important}
  .toast{bottom:auto;top:64px}
  .app,.body{max-width:none}
  .body{max-width:760px;margin:0 auto;width:100%}
  .pt{max-width:none}
}
.subtabs button,.qst,.tab,.sec,.chip{white-space:nowrap}
.cq .n{flex-wrap:wrap;row-gap:6px}
.where{white-space:nowrap}
@media (max-width:420px){ .cq .n .where{margin-left:0} .qst{font-size:9.5px} }

.howbtn{display:inline-block;margin:6px 0 2px;padding:4px 10px;border-radius:999px;border:1px solid rgba(var(--s-blue-rgb),.4);background:rgba(var(--s-blue-rgb),.08);color:var(--s-blue);font:600 12px var(--s-font-sans)}
.howbox{margin:6px 0 4px;padding:9px 12px;border-radius:10px;background:rgba(var(--s-blue-rgb),.06);border:1px solid rgba(var(--s-blue-rgb),.3)}
.howbox p{margin:0 0 4px;font:500 13px/1.45 var(--s-font-sans);color:#d6e6f5}.howbox p:last-child{margin:0}
/* sticky flowsheet header: opaque so rows never show through while scrolling */
#fs thead th{background:var(--s-bg-1)}
#fs thead th.now{background:linear-gradient(rgba(var(--s-teal-rgb),.12),rgba(var(--s-teal-rgb),.12)),var(--s-bg-1)}
#fs thead th.hl{background:linear-gradient(rgba(var(--s-amber-rgb),.18),rgba(var(--s-amber-rgb),.18)),var(--s-bg-1)!important}
#fs thead th{top:-1px;box-shadow:0 -6px 0 var(--s-bg-1)}
#fs td.lab{box-shadow:inset -1px 0 0 #1b2633}
.cq.notyet .q{color:var(--s-ink-3);font-weight:500;font-size:13px}
.cq.notyet .num{opacity:.55}

/* ===== scrollbars that match the app (thin, dark, rounded; no OS chrome) ===== */
*{scrollbar-width:thin;scrollbar-color:#2a3a4e transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#243244;border-radius:999px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#34506b;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-corner{background:transparent}
*::-webkit-scrollbar-button{display:none;width:0;height:0}
html{background:var(--s-bg-0)}
@media (hover:none){*::-webkit-scrollbar{width:4px;height:4px}*::-webkit-scrollbar-thumb{border:0;background:#2a3a4e}}