/* =============================================================================
   Interactive Neurosonology Workshop — clinical ultrasound theme
   -----------------------------------------------------------------------------
   TWO TIERS OF SURFACE:
     • CHROME   (--bg/--panel/--ink/--line …) — header, guide drawer, controls,
                  buttons. Re-themed light/dark via [data-theme].
     • INSTRUMENT(--inst-*) — the spectral / PMD / 3D / duplex "screens" and the
                  numeric readouts. ALWAYS DARK, both themes (a real machine keeps
                  dark displays in a bright room).
   LECTURE SCALE: --s multiplies reading-critical type; html.present bumps it and
   reflows density. Canvas labels/strokes scale in JS (see theme.js TCD.ui).
   Accent + flow colors are also written from theme.js so JS & CSS never drift.
   ============================================================================= */
:root{
  /* chrome — dark (default) */
  --bg:#070b11; --panel:#0b111a; --panel2:#0f1825; --raise:#13202f;
  --line:#1d2c3e; --line2:#2a3f56;
  --ink:#dde8f4; --dim:#8ca2b8; --faint:#5f7488;
  --shadow:0 10px 36px rgba(0,0,0,.55);
  --card-shadow:0 1px 0 rgba(255,255,255,.02), 0 8px 22px rgba(0,0,0,.30);

  /* instrument screens — fixed dark in both themes */
  --inst-bg:#05080c; --inst-panel:#0a0f17; --inst-panel2:#0b111a;
  --inst-line:#16243422; --inst-line2:#243a52;
  --inst-ink:#dde8f4; --inst-dim:#8ca2b8; --inst-faint:#5f7488;

  /* accents + state (also set by theme.js) */
  --accent:#36e0c8; --accent2:#4a9bff;
  --flow-red:#ff5266; --flow-blue:#468cff;
  --good:#46d18a; --warm:#ffce5b; --hot:#ff5d6c;
  --on-accent:#04141a;

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

  --s:1;                 /* lecture scale multiplier */
  --r:12px;              /* card radius */
  --header-h:60px;
}
:root[data-theme="light"]{
  --bg:#eef1f4; --panel:#ffffff; --panel2:#f4f7fa; --raise:#e9eef3;
  --line:#d6dde6; --line2:#c2ccd8;
  --ink:#16222e; --dim:#52677b; --faint:#8295a8;
  --shadow:0 10px 30px rgba(40,60,85,.16);
  --card-shadow:0 1px 0 rgba(255,255,255,.7), 0 6px 18px rgba(40,60,85,.10);
  --on-accent:#04141a;
}
:root.present{ --s:1.32; --header-h:72px; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 78% -10%, color-mix(in oklch, var(--accent) 9%, transparent), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, color-mix(in oklch, var(--accent2) 8%, transparent), transparent 60%),
    var(--bg);
  color:var(--ink); font-family:var(--sans); font-size:calc(15px * var(--s)); line-height:1.55;
  overflow:hidden; -webkit-font-smoothing:antialiased;
  transition:background-color .3s ease, color .3s ease;
}
kbd{font-family:var(--mono); background:var(--raise); border:1px solid var(--line2);
  border-radius:4px; padding:0 5px; font-size:.78em; color:var(--ink)}

/* ============================ header / brand ============================ */
.app-header{
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between;
  padding:0 calc(22px * var(--s)); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, color-mix(in oklch, var(--panel) 88%, transparent), color-mix(in oklch, var(--bg) 60%, transparent));
  backdrop-filter:blur(8px); position:relative; z-index:40;
}
.brand{display:flex; align-items:center; gap:calc(13px * var(--s))}
.logo{
  position:relative; width:calc(30px * var(--s)); height:calc(30px * var(--s)); flex:none;
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 34%, color-mix(in oklch, var(--accent) 70%, #fff 30%), var(--accent) 42%, color-mix(in oklch, var(--accent) 45%, #04303a) 100%);
  box-shadow:0 0 0 1px color-mix(in oklch, var(--accent) 50%, transparent),
             0 0 18px color-mix(in oklch, var(--accent) 45%, transparent),
             inset -3px -4px 8px rgba(0,0,0,.35);
}
.logo::after{ /* the bright "acoustic window" crescent */
  content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 215deg, transparent 0 50%, color-mix(in oklch, #04181c 70%, transparent) 50% 100%);
  mix-blend-mode:multiply; opacity:.55;
}
.logo-pulse{ position:absolute; inset:-5px; border-radius:50%;
  border:1.5px solid color-mix(in oklch, var(--accent) 70%, transparent);
  animation:logoPulse 2.6s ease-out infinite; opacity:0;
}
@keyframes logoPulse{ 0%{transform:scale(.72); opacity:.0} 18%{opacity:.7} 100%{transform:scale(1.5); opacity:0} }
.brand-text h1{font-size:calc(16px * var(--s)); margin:0; letter-spacing:.2px; font-weight:680;
  display:flex; align-items:baseline; gap:8px; line-height:1.1}
.brand-dot{color:var(--accent); font-weight:400}
.brand-sub{font-size:calc(11px * var(--s)); font-weight:600; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--accent)}
.app-header p{margin:2px 0 0; font-size:calc(11.5px * var(--s)); color:var(--dim)}
:root.present .app-header p{display:none}
.header-right{display:flex; align-items:center; gap:calc(12px * var(--s))}
.header-hint{font-size:calc(11.5px * var(--s)); color:var(--dim)}
:root.present .header-hint{display:none}

.icon-btn{font-family:var(--sans); font-size:calc(15px * var(--s)); line-height:1; cursor:pointer;
  color:var(--dim); background:var(--panel2); border:1px solid var(--line); border-radius:9px;
  width:calc(34px * var(--s)); height:calc(34px * var(--s)); transition:.15s; display:grid; place-items:center}
.icon-btn:hover{color:var(--ink); border-color:var(--line2)}

.present-toggle{font-family:var(--sans); font-size:calc(12.5px * var(--s)); cursor:pointer; color:var(--ink);
  background:var(--panel2); border:1px solid var(--line2); border-radius:9px; padding:calc(7px*var(--s)) calc(13px*var(--s));
  font-weight:600; transition:.15s; white-space:nowrap; display:flex; align-items:center; gap:6px}
.present-toggle:hover{border-color:var(--accent); color:#fff}
:root[data-theme="light"] .present-toggle:hover{color:var(--ink)}
:root.present .present-toggle{background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700}
:root.present .present-toggle::before{content:"● "; color:var(--on-accent)}

.guide-toggle{font-family:var(--sans); font-size:calc(12.5px * var(--s)); cursor:pointer; color:var(--on-accent);
  background:var(--accent); border:1px solid var(--accent); border-radius:9px; padding:calc(7px*var(--s)) calc(15px*var(--s));
  font-weight:680; transition:.15s; white-space:nowrap}
.guide-toggle:hover{box-shadow:0 0 16px color-mix(in oklch, var(--accent) 40%, transparent)}
body.guide-open .guide-toggle{color:var(--ink); background:var(--panel2); border-color:var(--line2); font-weight:500}

/* ====================== layout: console + guide drawer ====================== */
.split{display:flex; height:calc(100vh - var(--header-h)); position:relative}
.panel{padding:calc(16px * var(--s))}
.console{flex:1; min-width:0; display:flex; flex-direction:column; gap:calc(11px * var(--s)); overflow-y:auto}

/* DOCKED two-pane: the guide is a real left column that reflows the console (does NOT overlay it),
   so slide text + the live machine are on screen together — the whole point of the tool.
   Collapsing animates the width to 0 → console goes full-width (console-as-hero when you want it). */
.learn{
  position:relative; flex:0 0 auto; align-self:stretch; display:flex; flex-direction:column; width:clamp(390px, 30vw, 460px); z-index:30;
  overflow-y:auto; overflow-x:hidden; border-right:1px solid var(--line2); padding:calc(18px * var(--s));
  background:linear-gradient(180deg, color-mix(in oklch, var(--panel) 97%, transparent), color-mix(in oklch, var(--bg) 96%, transparent));
  transition:width .28s cubic-bezier(.2,.7,.2,1), padding .28s cubic-bezier(.2,.7,.2,1), opacity .2s;
}
:root.present .learn{width:clamp(440px, 34vw, 560px)}
body:not(.guide-open) .learn{width:0; padding-left:0; padding-right:0; opacity:0; border-right-width:0}
/* narrow screens (laptops/tablets): fall back to a floating overlay so the console isn't crushed */
@media (max-width:1000px){
  .learn{position:absolute; top:0; left:0; bottom:0; width:clamp(320px, 84vw, 460px);
    padding:calc(18px * var(--s)); opacity:1; border-right-width:1px; box-shadow:var(--shadow);
    transition:transform .26s cubic-bezier(.2,.7,.2,1)}
  body:not(.guide-open) .learn{transform:translateX(-112%); width:clamp(320px, 84vw, 460px);
    padding:calc(18px * var(--s)); opacity:1}
}
.learn-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
  position:sticky; top:0; background:linear-gradient(180deg, var(--panel) 70%, transparent); padding:6px 0 10px; z-index:2}
.lh-title{font-size:calc(11px * var(--s)); letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); font-weight:700}
.guide-close{background:var(--panel2); border:1px solid var(--line2); color:var(--dim);
  border-radius:7px; cursor:pointer; padding:4px 11px; font-size:calc(13px * var(--s)); line-height:1.2; transition:.15s}
.guide-close:hover{color:var(--ink); border-color:var(--accent)}
.lh-actions{display:flex; align-items:center; gap:6px}
.lh-btn{font-family:var(--sans); font-size:calc(11px * var(--s)); cursor:pointer; color:var(--dim);
  background:var(--panel2); border:1px solid var(--line2); border-radius:7px; padding:4px 9px; transition:.15s; white-space:nowrap}
.lh-btn:hover{color:var(--ink); border-color:var(--accent)}
.lh-btn.active{color:var(--on-accent); background:var(--accent); border-color:var(--accent); font-weight:650}

/* speaker notes — presenter cue below the slide, hidden until toggled (N) */
.speaker-notes{display:none; margin:14px 0 4px; padding:calc(11px*var(--s)) calc(13px*var(--s));
  border-left:3px solid var(--warm); border-radius:0 10px 10px 0;
  background:color-mix(in oklch, var(--warm) 9%, transparent); color:var(--ink);
  font-size:calc(13.5px * var(--s)); line-height:1.5}
body.notes-on .speaker-notes:not(:empty){display:block; animation:slideIn .2s both}
.speaker-notes::before{content:"◈ Speaker note"; display:block; font-family:var(--mono);
  font-size:calc(9.5px*var(--s)); letter-spacing:1px; text-transform:uppercase; color:var(--warm);
  font-weight:700; margin-bottom:6px}
.speaker-notes em{color:var(--accent); font-style:normal; font-weight:600}

/* slide overview / jump grid */
.overview{position:fixed; inset:0; z-index:130; background:rgba(4,8,14,.82); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center}
.overview[hidden]{display:none}
.overview-panel{width:min(1040px,94vw); max-height:90vh; background:var(--panel); border:1px solid var(--line2);
  border-radius:16px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.65)}
.overview-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  border-bottom:1px solid var(--line); font-weight:650; font-size:calc(15px*var(--s)); color:var(--ink)}
.overview-close{background:var(--panel2); border:1px solid var(--line2); color:var(--dim); border-radius:7px;
  cursor:pointer; padding:4px 11px; font-size:14px}
.overview-close:hover{color:var(--ink); border-color:var(--accent)}
.overview-body{padding:16px 18px; overflow-y:auto; display:block}
.ov-module{display:flex; flex-direction:column; gap:6px}
.ov-mod-title{font-family:var(--mono); font-size:calc(10px*var(--s)); letter-spacing:1px; text-transform:uppercase;
  color:var(--accent); font-weight:700; padding-bottom:4px; border-bottom:1px solid var(--line)}
.ov-slide{text-align:left; cursor:pointer; padding:7px 10px; border-radius:8px; font-size:calc(12.5px*var(--s));
  background:var(--panel2); border:1px solid var(--line); color:var(--ink); transition:.12s; display:flex; gap:8px; align-items:baseline}
.ov-slide:hover{border-color:var(--accent)}
.ov-slide.current{border-color:var(--accent); background:color-mix(in oklch, var(--accent) 18%, var(--panel2)); font-weight:600}
.ov-num{font-family:var(--mono); font-size:calc(10px*var(--s)); color:var(--faint); flex:none}

.learn::-webkit-scrollbar,.console::-webkit-scrollbar{width:10px}
.learn::-webkit-scrollbar-thumb,.console::-webkit-scrollbar-thumb{background:var(--line2); border-radius:6px}
.learn::-webkit-scrollbar-track,.console::-webkit-scrollbar-track{background:transparent}

/* ---------------- module nav + slide ---------------- */
.module-nav{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px}
.learn > *{flex-shrink:0}
.learn > .slide{margin-bottom:20px}
.mod-pill{
  font-family:var(--sans); font-size:calc(11px * var(--s)); color:var(--dim); cursor:pointer;
  background:var(--panel2); border:1px solid var(--line); border-radius:20px;
  padding:calc(5px*var(--s)) calc(11px*var(--s)); transition:.15s; line-height:1.1;
}
.mod-pill:hover{color:var(--ink); border-color:var(--line2)}
.mod-pill.active{color:var(--on-accent); background:var(--accent); border-color:var(--accent); font-weight:650}

.slide{ animation:slideIn .34s cubic-bezier(.2,.7,.2,1) both; }
@keyframes slideIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){ .slide{animation:none} }
.slide-module{font-size:calc(11px * var(--s)); letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); font-weight:700}
.slide-title{font-size:calc(26px * var(--s)); margin:7px 0 16px; line-height:1.15; font-weight:700; letter-spacing:-.01em; text-wrap:balance}
.slide-content{font-size:calc(15px * var(--s)); color:var(--ink); max-width:64ch}
.slide-content p{margin:0 0 13px}
.slide-content ul,.slide-content ol{margin:0 0 14px; padding-left:22px}
.slide-content li{margin:6px 0}
.slide-content li::marker{color:var(--accent)}
.slide-content strong{color:var(--ink); font-weight:680}
:root[data-theme="dark"] .slide-content strong{color:#fff}
.slide-content em{color:var(--accent); font-style:normal; font-weight:560}

.equation{
  font-family:var(--mono); text-align:center; color:var(--accent);
  background:color-mix(in oklch, var(--accent) 7%, var(--panel2)); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:9px; padding:calc(12px*var(--s)) calc(14px*var(--s)); margin:14px 0; font-size:calc(15px * var(--s)); letter-spacing:.3px;
}
.equation sub{font-size:.7em}
.callout{
  border-left:3px solid var(--accent2); background:color-mix(in oklch, var(--accent2) 8%, transparent);
  padding:calc(10px*var(--s)) calc(14px*var(--s)); border-radius:0 9px 9px 0; color:var(--ink); font-size:calc(14px * var(--s));
}
.warn{
  border-left:3px solid var(--warm); background:color-mix(in oklch, var(--warm) 10%, transparent);
  padding:calc(10px*var(--s)) calc(14px*var(--s)); border-radius:0 9px 9px 0; color:var(--ink); font-size:calc(14px * var(--s));
}
.term{ border-bottom:1px dotted var(--accent); cursor:help; color:var(--ink) }
.term:focus-visible,.cite:focus-visible{ outline:2px solid var(--accent2); outline-offset:2px; border-radius:3px }
/* provenance chip — ties a threshold to its source study / year / evidence class */
.cite{ display:inline-flex; align-items:center; gap:3px; cursor:help; vertical-align:baseline;
  font-family:var(--mono); font-size:.72em; font-weight:650; letter-spacing:.3px;
  color:var(--accent2); background:color-mix(in oklch, var(--accent2) 13%, transparent);
  border:1px solid color-mix(in oklch, var(--accent2) 38%, transparent); border-radius:5px; padding:0 5px; margin:0 1px }
.cite::before{ content:"◆"; font-size:.7em; opacity:.8 }
.cite:hover{ background:color-mix(in oklch, var(--accent2) 22%, transparent); color:var(--ink) }

.deck-foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto;
  padding-top:15px; border-top:1px solid var(--line); position:sticky; bottom:0;
  background:linear-gradient(0deg, var(--panel) 64%, transparent)}
.nav-btn{
  font-family:var(--sans); font-size:calc(13.5px * var(--s)); cursor:pointer; color:var(--ink);
  background:var(--panel2); border:1px solid var(--line2); border-radius:9px; padding:calc(9px*var(--s)) calc(17px*var(--s));
  transition:.15s; font-weight:550;
}
.nav-btn:hover:not(:disabled){border-color:var(--accent); color:var(--ink)}
.nav-btn:disabled{opacity:.32; cursor:default}
.nav-btn.primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:680}
.nav-btn.primary:hover{box-shadow:0 0 18px color-mix(in oklch, var(--accent) 40%, transparent)}
.counter{font-family:var(--mono); font-size:calc(12px * var(--s)); color:var(--dim); font-variant-numeric:tabular-nums}

/* ============================ console ============================ */
.console-top{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.mode-toggle{display:flex; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:3px}
.mode-toggle button{
  font-family:var(--sans); font-size:calc(12.5px * var(--s)); cursor:pointer; color:var(--dim); white-space:nowrap;
  background:transparent; border:0; border-radius:7px; padding:calc(7px*var(--s)) calc(14px*var(--s)); transition:.15s; font-weight:550;
}
.mode-toggle button.active{background:var(--accent); color:var(--on-accent); font-weight:680}
.console-actions{display:flex; gap:6px; flex-wrap:wrap}
/* device status strip (machine footer feel) */
.device-status{display:flex; flex-wrap:wrap; gap:calc(13px*var(--s)); align-items:center;
  font-family:var(--mono); font-size:calc(10.5px*var(--s)); letter-spacing:.4px; color:var(--inst-dim);
  background:linear-gradient(180deg, var(--inst-panel), var(--inst-bg)); border:1px solid var(--inst-line2);
  border-radius:8px; padding:calc(5px*var(--s)) calc(12px*var(--s))}
.device-status:empty{display:none}
.device-status b{color:var(--inst-ink); font-weight:600; font-variant-numeric:tabular-nums}
.device-status .ds-live{color:var(--good); font-weight:600}
.device-status .ds-frozen{color:var(--hot); font-weight:600}
.device-status .ds-sep{opacity:.35}
.device-status .ds-brand{color:var(--accent); font-weight:700; letter-spacing:1.2px}
.act{
  font-family:var(--sans); font-size:calc(11px * var(--s)); cursor:pointer; color:var(--dim); white-space:nowrap; text-align:center;
  background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:calc(6px*var(--s)) calc(9px*var(--s)); transition:.15s;
}
.hdr-btn{font-family:var(--sans); font-size:calc(12px * var(--s)); cursor:pointer; color:var(--dim); white-space:nowrap;
  background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:calc(6px*var(--s)) calc(11px*var(--s)); transition:.15s}
.hdr-btn:hover{color:var(--ink); border-color:var(--line2)}
.hdr-btn.active{color:var(--on-accent); background:var(--accent); border-color:var(--accent); font-weight:650}
.act:hover{color:var(--ink); border-color:var(--line2)}
.act.active{color:var(--on-accent); background:var(--accent); border-color:var(--accent); font-weight:650}
/* Freeze reads as a "stop" control */
#freeze-btn.active{background:var(--hot); border-color:var(--hot); color:#220308}

/* THE STAGE: the PMD + spectral display is the hero; the numeric readouts ride as a
   right-hand rail (like a real machine's numeric block); the 3D head is demoted to a
   small hover-expanding inset. Everything else collapses / sits below. */
/* device bezel: the screens sit recessed in a machined front panel, so the console reads as hardware */
.console-stage{display:grid; grid-template-columns:minmax(0,1fr) clamp(122px,13vw,162px);
  gap:calc(10px * var(--s)); flex:1 1 auto; min-height:340px; position:relative;
  padding:calc(9px * var(--s)); border-radius:16px;
  background:linear-gradient(158deg, color-mix(in oklch, var(--panel2) 82%, #0a0f16), var(--inst-bg));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(0,0,0,.55),
    0 12px 34px rgba(0,0,0,.40), 0 1px 0 rgba(255,255,255,.04)}
.console-main{position:relative; display:block; height:100%; min-height:0}
.console-main > .spectral-card{height:100%}
/* 3D head: off the plain console stage. The stage director (or the "3D head" button / H) shows it
   beside the screens (split) or alone (head); the WebGL canvas is resized after each change. */
.console-main > .scene-card{display:none; min-height:0}
.console-main.stage-split{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:calc(10px * var(--s))}
.console-main.stage-split > .scene-card,
.console-main.stage-head > .scene-card{display:flex; height:100%}
.console-main.stage-head > .spectral-card{display:none}
.console-main.stage-split > .scene-card .scene,
.console-main.stage-head > .scene-card .scene{flex:1; width:100%; min-height:0}
.console-main.has-spot > .scene-card.spot .scene{width:100%; height:100%; flex:1}
/* readouts as a vertical rail beside the display */
.console-stage > .readouts{display:grid; grid-template-columns:1fr; grid-auto-rows:min-content;
  gap:calc(6px * var(--s)); align-content:start; overflow-y:auto; height:100%}
:root.present .console-stage > .readouts{grid-template-columns:1fr}

/* instrument cards = dark screens with a bezel */
.scene-card,.spectral-card{
  background:var(--inst-panel); border:1px solid var(--inst-line2); border-radius:var(--r); padding:8px;
  display:flex; flex-direction:column; min-height:230px; position:relative;
  box-shadow:var(--card-shadow), inset 0 0 0 1px rgba(0,0,0,.4);
}
.card-label{font-family:var(--mono); font-size:calc(10px * var(--s)); letter-spacing:1px; color:var(--inst-dim);
  text-transform:uppercase; margin-bottom:6px; display:flex; justify-content:space-between; align-items:center; gap:8px}
.card-label .lbl-main{display:flex; align-items:center; gap:8px}
.spectral-card .card-label .lbl-main{min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display:block}
.card-label .lbl-btns{flex-shrink:0}
.card-label .lbl-btns .spot-btn{white-space:nowrap}
.axis-hint{color:var(--inst-faint); letter-spacing:.5px; font-size:calc(9.5px * var(--s))}
.axis-hint .sw-red{color:var(--flow-red)} .axis-hint .sw-blue{color:var(--flow-blue)}
.scene{flex:1; min-height:200px; border-radius:9px; overflow:hidden; position:relative;
  background:radial-gradient(120% 120% at 62% 36%, #11202f 0%, #0a131d 48%, #05080c 100%)}
.scene-fallback{display:flex; height:100%; align-items:center; justify-content:center; color:var(--inst-dim); font-size:12px; padding:14px; text-align:center}

/* hover vessel label projected from the 3D scene */
.scene-tip{position:absolute; pointer-events:none; z-index:5; transform:translate(-50%,-130%);
  font-family:var(--mono); font-size:calc(10.5px * var(--s)); color:#04181c; background:var(--accent);
  padding:2px 8px; border-radius:6px; white-space:nowrap; opacity:0; transition:opacity .12s;
  box-shadow:0 4px 14px rgba(0,0,0,.5); font-weight:600}
.scene-tip.on{opacity:1}
.scene-tip::after{content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--accent)}

.spectral-wrap{flex:1; position:relative; display:flex; min-height:190px; gap:1px;
  background:var(--inst-bg); border-radius:9px; overflow:hidden}
.dev-screens{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; position:relative; background:var(--inst-bg)}

.pmd-pane{position:relative; flex:0 0 40%; min-height:70px; background:#06090e; border-bottom:1px solid #121e2b}
.spectral-wrap.mode-imaging .pmd-pane{display:none}
.pmd-pane canvas{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:ns-resize}
.pmd-axis{position:absolute; left:0; top:0; bottom:0; width:34px; pointer-events:none; z-index:2}
.pmd-axis span{position:absolute; left:4px; transform:translateY(-50%);
  font-family:var(--mono); font-size:calc(9.5px * var(--s)); color:rgba(165,195,220,.85); text-shadow:0 0 3px #000; font-variant-numeric:tabular-nums}
.pmd-caption{position:absolute; bottom:4px; right:7px; font-family:var(--mono);
  font-size:calc(9.5px * var(--s)); color:var(--inst-faint); pointer-events:none; text-shadow:0 0 3px #000}

.img-pane{display:none; position:relative; flex:0 0 54%; min-height:150px; border-bottom:1px solid #121e2b; background:#04060a}
/* B-mode and color fill the screen; PW splits it into a duplex view (image over spectrum), like the cart */
.spectral-wrap.mode-imaging.img-full .img-pane{flex:1 1 auto; border-bottom:0}
.spectral-wrap.mode-imaging.img-full .spec-pane{display:none}
.spectral-wrap.mode-imaging .img-pane{display:block}
.spectral-wrap.mode-nonimaging .img-pane{display:none}
.img-pane canvas{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair}
/* imaging mode buttons live in the label row above the screen (imaging only) */
.card-label .img-toolbar{display:none; gap:0; flex-shrink:0; border:1px solid var(--inst-line2); border-radius:7px; overflow:hidden}
:root.mode-imaging .card-label .img-toolbar{display:flex}
.card-label .img-toolbar .img-stage{border:0; border-radius:0; border-left:1px solid var(--inst-line2); backdrop-filter:none;
  font-size:calc(10.5px * var(--s)); letter-spacing:.3px; text-transform:none; padding:calc(3px*var(--s)) calc(10px*var(--s))}
.card-label .img-toolbar .img-stage:first-child{border-left:0}
.img-stage{font-family:var(--sans); font-size:calc(10.5px * var(--s)); cursor:pointer; color:var(--inst-dim);
  background:rgba(8,14,22,.85); border:1px solid var(--inst-line2); border-radius:7px; padding:calc(5px*var(--s)) calc(9px*var(--s)); backdrop-filter:blur(3px)}
.img-stage:hover{color:var(--inst-ink)}
.img-stage.active{color:var(--on-accent); background:var(--accent); border-color:var(--accent); font-weight:650}
.img-hint{position:absolute; bottom:7px; right:9px; font-family:var(--mono); font-size:calc(10px * var(--s));
  color:rgba(180,205,225,.8); pointer-events:none; max-width:62%; text-align:right; text-shadow:0 0 4px #000}
/* SCHEMATIC / DEMO badge */
.img-badge{position:absolute; top:7px; right:8px; z-index:3; font-family:var(--mono);
  font-size:calc(9.5px * var(--s)); letter-spacing:1.2px; text-transform:uppercase; font-weight:700;
  padding:3px 8px; border-radius:6px; pointer-events:none; display:none}
.img-badge.schematic{display:block; color:#06212a; background:var(--accent);
  box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.img-badge.demo{display:block; color:var(--warm); background:rgba(8,14,22,.8);
  border:1px solid color-mix(in oklch, var(--warm) 50%, transparent)}

.spec-pane{position:relative; flex:1; min-width:120px}
.spec-pane canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.spectral-wrap.mode-imaging .baseline-tag{display:none}
/* z.one: the PW data field sits left of the spectral strip */
.pw-field{display:none; position:absolute; left:0; top:0; bottom:0; width:calc(78px * var(--s)); padding:calc(10px * var(--s)) 0 0 calc(8px * var(--s));
  white-space:pre; font-family:Arial, Helvetica, sans-serif; font-size:calc(10px * var(--s)); line-height:1.3; color:rgba(176,190,204,.95);
  background:#000; border-right:1px solid #10161e; pointer-events:none}
.spectral-wrap.mode-imaging.skin-zonare .pw-field{display:block}
.spectral-wrap.mode-imaging.skin-zonare .spec-pane canvas{left:calc(78px * var(--s)); width:calc(100% - 78px * var(--s))}
:root.present .pw-field{width:128px; font-size:17px}
:root.present .spectral-wrap.mode-imaging.skin-zonare .spec-pane canvas{left:128px; width:calc(100% - 128px)}
.baseline-tag{position:absolute; left:6px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:calc(9.5px * var(--s)); color:var(--inst-faint); pointer-events:none; z-index:2}
.console-note{font-family:var(--mono); font-size:calc(12.5px * var(--s)); color:var(--accent); min-height:18px;
  margin-top:7px; padding-left:2px}

/* a gentle "retune" shimmer when a slide changes the screens */
.spectral-card.retune::after{content:""; position:absolute; inset:0; border-radius:var(--r); pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, color-mix(in oklch, var(--accent) 22%, transparent) 50%, transparent 70%);
  background-size:240% 100%; animation:retune .7s ease-out 1}
@keyframes retune{ from{background-position:140% 0} to{background-position:-140% 0} }
@media (prefers-reduced-motion:reduce){ .spectral-card.retune::after{animation:none} }

/* window bar */
.windowbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.window-buttons{display:flex; gap:7px; flex-wrap:wrap}
.win-btn{
  font-family:var(--sans); font-size:calc(11.5px * var(--s)); cursor:pointer; color:var(--dim);
  background:var(--panel2); border:1px solid var(--line); border-radius:9px;
  padding:calc(7px*var(--s)) calc(11px*var(--s)); display:flex; align-items:center; gap:7px; transition:.15s;
}
.win-btn:hover{color:var(--ink); border-color:var(--line2)}
.win-btn.active{color:var(--on-accent); background:var(--accent); border-color:var(--accent); font-weight:650}
.win-short{font-family:var(--mono); font-weight:700; font-size:calc(10px * var(--s)); background:rgba(0,0,0,.22);
  border-radius:4px; padding:1px 5px}
.win-btn.active .win-short{background:rgba(0,0,0,.18)}
.vessel-label{font-size:calc(11px * var(--s)); color:var(--dim); display:flex; align-items:center; gap:7px; margin-left:auto}
.vessel-select{
  font-family:var(--sans); font-size:calc(12.5px * var(--s)); color:var(--ink); background:var(--panel2);
  border:1px solid var(--line2); border-radius:8px; padding:calc(6px*var(--s)) calc(9px*var(--s)); cursor:pointer;
}

/* ============================ readouts (LCD vitals) ============================ */
.readouts{display:grid; grid-template-columns:repeat(8,1fr); gap:calc(8px * var(--s))}
:root.present .readouts{grid-template-columns:repeat(4,1fr); gap:calc(10px * var(--s))}
.readout{
  background:linear-gradient(180deg, var(--inst-panel), var(--inst-bg));
  border:1px solid var(--inst-line2); border-radius:10px;
  padding:calc(9px*var(--s)) 4px calc(8px*var(--s)); text-align:center; position:relative; overflow:hidden;
  transition:border-color .35s ease, box-shadow .35s ease;
}
.readout::before{content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--inst-line2); transition:background .35s ease}
.readout .ro-label{font-size:calc(9.5px * var(--s)); letter-spacing:.5px; color:var(--inst-dim); text-transform:uppercase; cursor:help}
.readout .ro-value{font-family:var(--mono); font-size:calc(20px * var(--s)); font-weight:600; color:var(--inst-ink);
  line-height:1.15; font-variant-numeric:tabular-nums; transition:color .3s ease}
.readout .ro-unit{font-size:calc(9px * var(--s)); color:var(--inst-faint)}
.readout.good{border-color:color-mix(in oklch, var(--good) 55%, transparent); box-shadow:0 0 14px color-mix(in oklch, var(--good) 14%, transparent)}
.readout.good::before{background:var(--good)} .readout.good .ro-value{color:var(--good)}
.readout.warm{border-color:color-mix(in oklch, var(--warm) 60%, transparent)}
.readout.warm::before{background:var(--warm)} .readout.warm .ro-value{color:var(--warm)}
.readout.hot{border-color:color-mix(in oklch, var(--hot) 65%, transparent); box-shadow:0 0 16px color-mix(in oklch, var(--hot) 18%, transparent)}
.readout.hot::before{background:var(--hot)} .readout.hot .ro-value{color:var(--hot)}

/* ============================ predict / active-recall ============================ */
/* mask the answer surfaces (numeric readouts + on-screen trace calipers) while leaving the
   waveform crisp, so learners call PI / the diagnosis from the shape, then Reveal. */
body.predict #readouts .ro-value{ filter:blur(9px); opacity:.5; transition:filter .25s, opacity .25s }
body.predict #readouts .readout::after{ content:"?"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:calc(20px * var(--s)); font-weight:700; color:color-mix(in oklch, var(--accent) 65%, transparent);
  pointer-events:none; top:38%; }
body.predict .trace-canvas{ filter:blur(7px); opacity:.45; transition:filter .25s }
#predict-btn.active{ background:var(--accent2); border-color:var(--accent2); color:#04141a; font-weight:650 }

/* ============================ controls ============================ */
.controls-head{display:flex; align-items:center; justify-content:space-between; cursor:pointer;
  font-family:var(--mono); font-size:calc(10.5px * var(--s)); letter-spacing:1px; text-transform:uppercase;
  color:var(--dim); padding:calc(8px*var(--s)) calc(12px*var(--s)); background:var(--panel2);
  border:1px solid var(--line); border-radius:10px; user-select:none}
.controls-head:hover{color:var(--ink); border-color:var(--line2)}
.controls-head .chev{transition:transform .2s}
/* controls collapse behind a header by default — the display is the focus, controls are on-demand */
:root.controls-open .controls-head .chev{transform:rotate(90deg)}
:root:not(.controls-open) .controls{display:none}

.controls{display:flex; flex-direction:column; gap:calc(10px * var(--s))}
/* two layers: DEVICE (real knobs) vs INSTRUCTOR scenario (patient physiology, backstage) */
.ctrl-layer{border-radius:12px; padding:calc(11px*var(--s)) calc(14px*var(--s)); box-shadow:var(--card-shadow)}
.ctrl-layer.device{background:linear-gradient(180deg, var(--panel), var(--panel2)); border:1px solid var(--line2)}
.ctrl-layer.scenario{
  background:repeating-linear-gradient(135deg, var(--panel) 0 13px, color-mix(in oklch, var(--warm) 5%, var(--panel)) 13px 26px);
  border:1px dashed color-mix(in oklch, var(--warm) 42%, var(--line2));
}
.ctrl-layer-title{font-family:var(--mono); font-size:calc(9.5px * var(--s)); letter-spacing:1px; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px; font-weight:700; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.ctrl-layer.scenario .ctrl-layer-title{color:var(--warm)}
.ctrl-layer-sub{font-size:calc(8.5px*var(--s)); letter-spacing:.6px; color:var(--faint); font-weight:500; text-transform:none}
.ctrl-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:calc(4px*var(--s)) calc(20px*var(--s))}
.ctrl-grid input[type=range]{min-width:0; width:100%}   /* let the slider shrink inside its grid track */
.ctrl-row[data-cmode="imaging"]{display:none}            /* imaging-only device controls */
:root.mode-imaging .ctrl-row[data-cmode="imaging"]{display:grid}
.toggle-row{display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; padding-top:10px; border-top:1px solid var(--line)}
.dev-toggle{font-family:var(--sans); font-size:calc(11px*var(--s)); cursor:pointer; color:var(--dim); white-space:nowrap;
  background:var(--panel2); border:1px solid var(--line2); border-radius:8px; padding:calc(6px*var(--s)) calc(12px*var(--s)); transition:.15s; font-weight:550}
.dev-toggle:hover{color:var(--ink); border-color:var(--accent)}
.dev-toggle.on{color:var(--on-accent); background:var(--accent); border-color:var(--accent); font-weight:680;
  box-shadow:0 0 12px color-mix(in oklch, var(--accent) 30%, transparent)}
.ctrl-row{display:grid; grid-template-columns:76px minmax(0,1fr) 64px; align-items:center; gap:9px; margin:7px 0}
.ctrl-row label{font-size:calc(11.5px * var(--s)); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ctrl-row output{font-family:var(--mono); font-size:calc(11.5px * var(--s)); color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}

input[type=range]{-webkit-appearance:none; appearance:none; height:5px; border-radius:4px;
  background:linear-gradient(90deg, color-mix(in oklch, var(--accent) 45%, var(--line2)), var(--line2)); outline:none; cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:calc(16px*var(--s)); height:calc(16px*var(--s));
  border-radius:50%; background:radial-gradient(circle at 38% 34%, #eafffb, var(--accent) 60%); cursor:pointer;
  box-shadow:0 0 8px color-mix(in oklch, var(--accent) 55%, transparent), 0 1px 3px rgba(0,0,0,.5); border:2px solid #06222b}
input[type=range]::-moz-range-thumb{width:calc(16px*var(--s)); height:calc(16px*var(--s)); border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #eafffb, var(--accent) 60%); cursor:pointer; border:2px solid #06222b}
input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 14px color-mix(in oklch, var(--accent) 70%, transparent), 0 1px 3px rgba(0,0,0,.5)}

/* ============================ spotlight (focus one screen) ============================ */
.spot-btn{font-family:var(--sans); font-size:calc(11px * var(--s)); cursor:pointer; color:var(--inst-dim);
  background:rgba(8,14,22,.7); border:1px solid var(--inst-line2); border-radius:6px; padding:3px 8px; transition:.15s}
.spot-btn:hover{color:var(--inst-ink); border-color:var(--accent)}
.console-main.has-spot{grid-template-columns:1fr}
.console-main.has-spot > .scene-card,
.console-main.has-spot > .spectral-card{display:none}
.console-main.has-spot > .spot{display:flex}
/* when the 3D inset is the spotlight target, promote it from floating inset to full-stage */
.console-main.has-spot > .scene-card.spot{position:static; width:100%; height:100%; opacity:1}
.spot .spot-btn.active{color:var(--on-accent); background:var(--accent); border-color:var(--accent)}

/* tooltip */
.tooltip{
  position:fixed; display:none; max-width:300px; z-index:80;
  background:var(--panel); border:1px solid var(--accent); border-radius:9px;
  padding:calc(9px*var(--s)) calc(12px*var(--s)); font-size:calc(12.5px * var(--s)); color:var(--ink); line-height:1.5;
  box-shadow:var(--shadow); pointer-events:none;
}

/* responsive */
@media (max-width:1080px){
  .console-stage{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; min-height:min(70vh,600px)}
  .console-stage > .readouts{grid-template-columns:repeat(4,1fr); grid-auto-rows:auto; height:auto; overflow:visible}
  .console-main{min-height:300px}
  .controls{grid-template-columns:1fr}
}

/* ============================ Doppler explainer modal ============================ */
.dop-modal{position:fixed; inset:0; z-index:100; background:rgba(4,8,14,.82); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px)}
.dop-modal[hidden]{display:none}
.dop-panel{width:min(960px,94vw); height:min(640px,92vh); background:var(--inst-panel); border:1px solid var(--inst-line2); border-radius:16px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.65)}
.dop-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #15222f; font-weight:650; font-size:calc(15px*var(--s)); color:var(--inst-ink)}
.dop-close{background:var(--inst-panel2); border:1px solid var(--inst-line2); color:var(--inst-dim); border-radius:7px; cursor:pointer; padding:4px 11px; font-size:14px}
.dop-close:hover{color:var(--inst-ink); border-color:var(--accent)}
.dop-body{flex:1; display:grid; grid-template-columns:1.55fr 1fr; gap:14px; padding:16px; min-height:0}
.dop-left{display:flex; flex-direction:column; gap:9px; min-height:0}
.dop-canvas{flex:1; width:100%; background:#070d15; border:1px solid #15222f; border-radius:9px; min-height:0}
.dop-spec{height:92px; width:100%; background:#05080c; border:1px solid #15222f; border-radius:9px}
.dop-side{display:flex; flex-direction:column; gap:11px; overflow-y:auto}
.dop-readouts{display:flex; flex-direction:column; gap:6px; background:var(--inst-panel2); border:1px solid #15222f; border-radius:11px; padding:12px}
.dop-readouts > div{display:flex; align-items:center; justify-content:space-between; font-size:calc(12px*var(--s)); color:var(--inst-dim)}
.dop-readouts b{font-family:var(--mono); color:var(--inst-ink); font-size:calc(13px*var(--s)); font-variant-numeric:tabular-nums}
.dop-readouts .dop-big{border-top:1px solid #15222f; padding-top:7px; margin-top:2px}
.dop-readouts .dop-big b{color:var(--accent); font-size:calc(17px*var(--s))}
.dop-ctrl{display:flex; flex-direction:column; gap:4px}
.dop-ctrl label{font-size:calc(11.5px*var(--s)); color:var(--inst-dim); display:flex; justify-content:space-between}
.dop-ctrl output{font-family:var(--mono); color:var(--inst-ink); font-variant-numeric:tabular-nums}
.dop-btns{display:flex; flex-wrap:wrap; gap:8px; align-self:flex-start}
.dop-eq{font-family:var(--mono); font-size:calc(11.5px*var(--s)); color:var(--accent); background:var(--inst-panel2); border:1px solid #15222f; border-left:3px solid var(--accent); border-radius:9px; padding:9px 11px; line-height:1.6}
.dop-eq span{color:var(--inst-dim)} .dop-eq b{color:var(--inst-ink)}
.dop-msg{font-size:calc(12px*var(--s)); color:var(--inst-ink); background:color-mix(in oklch, var(--accent2) 9%, transparent); border-left:3px solid var(--accent2); border-radius:0 9px 9px 0; padding:9px 12px; min-height:20px}
@media (max-width:820px){ .dop-body{grid-template-columns:1fr} .dop-canvas{min-height:240px} }

/* auto/manual spectral trace overlay */
.trace-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:3}
.spec-pane.manual .trace-canvas{pointer-events:auto; cursor:ns-resize}

/* ============================ pre/post-lecture survey ============================ */
.survey-modal{position:fixed; inset:0; z-index:120; background:rgba(4,8,14,.82); display:flex;
  align-items:center; justify-content:center; backdrop-filter:blur(4px)}
.survey-modal[hidden]{display:none}
.survey-panel{width:min(720px,94vw); max-height:92vh; background:var(--panel); border:1px solid var(--line2);
  border-radius:16px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.65)}
.survey-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  border-bottom:1px solid var(--line); font-weight:650; font-size:calc(15px*var(--s)); color:var(--ink)}
.survey-close{background:var(--panel2); border:1px solid var(--line2); color:var(--dim); border-radius:7px;
  cursor:pointer; padding:4px 11px; font-size:14px}
.survey-close:hover{color:var(--ink); border-color:var(--accent)}
.survey-body{padding:16px 18px; overflow-y:auto}
.survey-intro{color:var(--dim); font-size:calc(13.5px*var(--s)); line-height:1.5}
.survey-intro strong{color:var(--ink)}
.survey-code label{display:block; font-size:calc(13px*var(--s)); color:var(--dim); margin:12px 0}
.survey-code input{margin-left:8px; font-family:var(--mono); background:var(--panel2); color:var(--ink);
  border:1px solid var(--line2); border-radius:7px; padding:6px 9px; width:130px}
.survey-phase{font-family:var(--mono); font-size:calc(11px*var(--s)); letter-spacing:1px; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px}
.survey-section{font-weight:650; color:var(--ink); margin:16px 0 8px; font-size:calc(13.5px*var(--s));
  border-top:1px solid var(--line); padding-top:12px}
.survey-q{margin:10px 0}
.survey-qtext{font-size:calc(13.5px*var(--s)); color:var(--ink); margin-bottom:6px}
.survey-likert{display:flex; gap:6px}
.survey-likert button{width:38px; height:34px; border-radius:8px; cursor:pointer; font-family:var(--mono);
  background:var(--panel2); border:1px solid var(--line2); color:var(--dim)}
.survey-likert button:hover{border-color:var(--accent); color:var(--ink)}
.survey-likert button.sel{background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700}
.survey-opts{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.survey-opts button{text-align:left; cursor:pointer; padding:8px 11px; border-radius:8px; font-size:calc(12.5px*var(--s));
  background:var(--panel2); border:1px solid var(--line2); color:var(--ink)}
.survey-opts button:hover{border-color:var(--accent)}
.survey-opts button.sel{background:color-mix(in oklch, var(--accent) 22%, var(--panel2)); border-color:var(--accent); font-weight:600}
.survey-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:16px}
.survey-foot{display:flex; align-items:center; gap:10px; margin-top:18px; padding-top:12px; border-top:1px solid var(--line)}
.survey-count{font-size:calc(11.5px*var(--s)); color:var(--dim); margin-right:auto}
.survey-btn{font-family:var(--sans); font-size:calc(12.5px*var(--s)); cursor:pointer; color:var(--ink);
  background:var(--panel2); border:1px solid var(--line2); border-radius:9px; padding:8px 15px; font-weight:550}
.survey-btn:hover{border-color:var(--accent)}
.survey-btn.primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:680}
.survey-btn.danger{color:var(--hot); border-color:color-mix(in oklch, var(--hot) 40%, var(--line2))}
.survey-done h3{margin:0 0 8px; color:var(--good)}
.survey-done p{color:var(--dim); font-size:calc(13.5px*var(--s)); line-height:1.5}
.survey-done strong{color:var(--ink)}
@media (max-width:640px){ .survey-opts{grid-template-columns:1fr} }

/* ============================ acquisition trainer (floating, non-blocking) ============================ */
.exam-card{position:fixed; right:16px; bottom:16px; z-index:110; width:min(322px,92vw);
  background:var(--panel); border:1px solid var(--accent); border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.55); font-size:calc(12.5px*var(--s)); overflow:hidden}
.exam-card[hidden]{display:none}
.exam-head{display:flex; align-items:center; justify-content:space-between; padding:10px 13px;
  background:var(--panel2); border-bottom:1px solid var(--line); font-weight:650; color:var(--ink)}
.exam-close{background:transparent; border:1px solid var(--line2); color:var(--dim); border-radius:6px; cursor:pointer; padding:2px 8px}
.exam-close:hover{color:var(--ink); border-color:var(--accent)}
.exam-target{padding:12px 13px}
.exam-find{font-size:calc(15px*var(--s)); color:var(--ink)} .exam-find b{color:var(--accent)}
.exam-hint{font-family:var(--mono); font-size:calc(11px*var(--s)); color:var(--dim); margin-top:4px}
.exam-tip{font-size:calc(11.5px*var(--s)); color:var(--faint); margin-top:6px; line-height:1.45}
.exam-done{font-weight:650; color:var(--good); padding:6px 0}
.exam-actions{display:flex; gap:7px; padding:0 13px 10px}
.exam-btn{font-family:var(--sans); font-size:calc(12px*var(--s)); cursor:pointer; color:var(--ink);
  background:var(--panel2); border:1px solid var(--line2); border-radius:8px; padding:7px 12px; font-weight:550}
.exam-btn:hover{border-color:var(--accent)} .exam-btn:disabled{opacity:.4; cursor:default}
.exam-btn.primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:680}
.exam-btn.small{padding:4px 9px; font-size:calc(11px*var(--s))}
.exam-feedback{font-size:calc(11.5px*var(--s)); line-height:1.45}
.exam-feedback:not(:empty){padding:9px 13px}
.exam-feedback.ok{color:var(--good)}
.exam-feedback .exam-good{color:var(--good); font-weight:650} .exam-feedback .exam-bad{color:var(--hot); font-weight:650}
.exam-feedback b{color:var(--ink)}
.exam-worklist{padding:4px 13px 10px}
.exam-empty{color:var(--faint); font-size:calc(11px*var(--s)); font-style:italic}
.exam-table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:calc(11px*var(--s))}
.exam-table th{text-align:left; color:var(--dim); font-weight:600; border-bottom:1px solid var(--line); padding:3px 4px}
.exam-table td{color:var(--ink); padding:3px 4px; border-bottom:1px solid var(--line)}
.exam-lr{margin-top:7px; font-family:var(--mono); font-size:calc(11px*var(--s)); color:var(--accent)}
.exam-foot{display:flex; align-items:center; gap:7px; padding:9px 13px; background:var(--panel2); border-top:1px solid var(--line)}
.exam-foot span{margin-right:auto; font-family:var(--mono); font-size:calc(10.5px*var(--s)); color:var(--dim)}

/* ============================ lecture chrome: tracks · pace · steps ============================ */
.track-tabs{display:flex; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:3px; gap:2px}
.track-tab{font-family:var(--sans); font-size:calc(12px * var(--s)); cursor:pointer; color:var(--dim); white-space:nowrap;
  background:transparent; border:0; border-radius:7px; padding:calc(5px*var(--s)) calc(10px*var(--s)); transition:.15s; font-weight:560}
.track-tab:hover{color:var(--ink)}
.track-tab span{font-family:var(--mono); font-size:.82em; opacity:.7; margin-left:2px}
.track-tab.active{background:var(--accent); color:var(--on-accent); font-weight:700}
.track-tab.active span{opacity:.85}
.pace{font-family:var(--mono); font-size:calc(11px * var(--s)); cursor:pointer; color:var(--dim); white-space:nowrap;
  background:var(--panel2); border:1px solid var(--line2); border-radius:7px; padding:4px 8px; font-variant-numeric:tabular-nums; transition:.15s}
.pace span{color:var(--faint)}
.pace.run{color:var(--ink); border-color:color-mix(in oklch, var(--good) 55%, var(--line2))}
.pace.warn{color:var(--warm); border-color:var(--warm)}
.pace.late{color:var(--hot); border-color:var(--hot); animation:paceLate 1.6s ease-in-out infinite}
@keyframes paceLate{ 50%{box-shadow:0 0 12px color-mix(in oklch, var(--hot) 45%, transparent)} }
.learn-head{flex-wrap:wrap; gap:8px}
.mod-pill[hidden]{display:none}
.mod-min{font-family:var(--mono); color:var(--faint); letter-spacing:.5px; margin-left:6px; font-weight:600}

.deck-mid{display:flex; flex-direction:column; align-items:center; gap:5px}
.step-dots{display:flex; gap:5px; min-height:7px}
.step-dots i{width:7px; height:7px; border-radius:50%; background:var(--line2); transition:background .2s, transform .2s}
.step-dots i.on{background:color-mix(in oklch, var(--accent) 55%, var(--line2))}
.step-dots i.cur{background:var(--accent); transform:scale(1.3); box-shadow:0 0 6px color-mix(in oklch, var(--accent) 60%, transparent)}

/* builds: the text of a step stays invisible until its click (layout kept, like a slide animation) */
#slide-content [data-step]{transition:opacity .3s ease, transform .3s ease; scroll-margin-top:calc(90px * var(--s)); scroll-margin-bottom:calc(84px * var(--s))}
#slide-content [data-step]:not(.shown){opacity:0; visibility:hidden; transform:translateY(5px)}
#slide-content .current-step{animation:stepFlash 1.4s ease-out}
@keyframes stepFlash{ from{background-color:color-mix(in oklch, var(--accent) 20%, transparent)} to{background-color:transparent} }
@media (prefers-reduced-motion:reduce){ #slide-content [data-step]{transition:none} #slide-content .current-step{animation:none} }

/* ============================ slide content blocks ============================ */
.slide-content .lead{font-size:calc(17px * var(--s)); line-height:1.45; margin-bottom:14px}
.slide-content ol.agenda li{margin:7px 0; font-weight:560}
.slide-content ol.agenda li::marker{font-family:var(--mono); font-weight:700}
.note-small{font-size:calc(12.5px * var(--s)); color:var(--dim)}
.cite-line{font-size:calc(12px * var(--s)); color:var(--dim); margin-top:12px; display:flex; flex-wrap:wrap; gap:4px}
.c-red{color:var(--flow-red); font-weight:680}
.c-blue{color:var(--flow-blue); font-weight:680}

.tbl{width:100%; border-collapse:collapse; font-size:calc(13.5px * var(--s)); margin:6px 0 14px; line-height:1.4}
.tbl th{text-align:left; color:var(--accent); font-weight:680; font-size:.86em; letter-spacing:.3px; border-bottom:1px solid var(--line2); padding:5px 6px; vertical-align:bottom}
.tbl td{border-bottom:1px solid var(--line); padding:5px 6px; vertical-align:top}
.tbl small{color:var(--dim); font-size:.84em}
.tbl.mini{font-size:calc(13px * var(--s))}
.tbl.mini th{color:var(--dim); font-weight:650}
.tbl.mini td:first-child{white-space:nowrap; font-family:var(--mono); font-size:.92em; color:var(--ink)}
.tbl.cmp td:first-child{color:var(--dim); white-space:nowrap}
.tbl.click tr[data-vessel]{cursor:pointer; transition:background .12s}
.tbl.click tr[data-vessel]:hover td{background:color-mix(in oklch, var(--accent) 11%, transparent)}
.tbl.click tr[data-vessel]:active td{background:color-mix(in oklch, var(--accent) 22%, transparent)}

/* case discussion */
.slide.is-case .slide-module::after{content:" · case"; color:var(--accent2)}
.case-v{background:var(--panel2); border:1px solid var(--line2); border-left:3px solid var(--accent2); border-radius:0 10px 10px 0;
  padding:calc(10px*var(--s)) calc(13px*var(--s)); margin:0 0 12px; line-height:1.5}
.case-f,.case-q,.case-a{position:relative; margin:9px 0; padding:calc(7px*var(--s)) calc(12px*var(--s)); border-radius:0 9px 9px 0}
.case-f{border-left:3px solid var(--line2)}
.case-q{border-left:3px solid var(--warm); background:color-mix(in oklch, var(--warm) 9%, transparent); font-weight:600}
.case-a{border-left:3px solid var(--good); background:color-mix(in oklch, var(--good) 9%, transparent); line-height:1.5}
.case-f::before,.case-q::before,.case-a::before{display:block; font-family:var(--mono); font-size:calc(9.5px*var(--s)); letter-spacing:1px;
  text-transform:uppercase; font-weight:700; margin-bottom:2px}
.case-f::before,.case-q::before{display:inline-block; margin:0 8px 0 0}
.case-f::before{content:"Finding"; color:var(--dim)}
.case-q::before{content:"Discuss"; color:var(--warm)}
.case-a::before{content:"Answer"; color:var(--good)}

/* hands-on checklists */
.slide-content ul.checklist{list-style:none; padding-left:0}
.slide-content ul.checklist li{position:relative; padding:calc(7px*var(--s)) 10px calc(7px*var(--s)) calc(36px*var(--s)); margin:6px 0;
  border:1px solid var(--line); border-radius:9px; background:var(--panel2); cursor:pointer; user-select:none; transition:.15s}
.slide-content ul.checklist li:hover{border-color:var(--line2)}
.slide-content ul.checklist li::before{content:""; position:absolute; left:calc(11px*var(--s)); top:calc(9px*var(--s)); width:calc(15px*var(--s)); height:calc(15px*var(--s));
  border:2px solid var(--line2); border-radius:4px; transition:.15s}
.slide-content ul.checklist li.done{color:var(--dim); border-color:color-mix(in oklch, var(--good) 40%, var(--line))}
.slide-content ul.checklist li.done::before{background:var(--good); border-color:var(--good)}
.slide-content ul.checklist li.done::after{content:"✓"; position:absolute; left:calc(13px*var(--s)); top:calc(6px*var(--s)); color:#04141a; font-weight:800; font-size:calc(13px*var(--s))}

/* real still under the slide text (shown only when the file exists) */
.ref-img{margin:14px 0 6px; border:1px solid var(--line2); border-radius:10px; overflow:hidden; background:#000; cursor:zoom-in}
.ref-img img{display:block; width:100%; max-height:230px; object-fit:contain; background:#000}
.ref-img figcaption{font-size:calc(11.5px*var(--s)); color:var(--dim); padding:5px 9px; background:var(--panel2); border-top:1px solid var(--line)}
.lightbox{position:fixed; inset:0; z-index:150; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:10px}
.lightbox img{max-width:94vw; max-height:86vh; object-fit:contain; border-radius:6px}
.lb-cap{color:#c9d6e2; font-size:calc(14px*var(--s))}
.blackout{position:fixed; inset:0; z-index:300; background:#000; cursor:none}
.blackout[hidden]{display:none}

/* overview grouped by track */
.ov-track{margin-bottom:20px}
.ov-track-title{font-weight:750; font-size:calc(14px*var(--s)); color:var(--ink); margin:2px 0 10px}
.ov-track-title span{color:var(--dim); font-weight:500; font-family:var(--mono); font-size:.8em; margin-left:6px}
.ov-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px}
.ov-slide em{font-style:normal; color:var(--faint); font-size:.82em; margin-left:4px; white-space:nowrap}
.ov-slide.case{border-left:3px solid var(--accent2)}

/* ============================ console chrome ============================ */
.act-sep{width:1px; align-self:stretch; background:var(--line2); margin:3px 2px}
.card-label .lbl-btns{display:flex; gap:6px}
.cart-select{display:none; font-family:var(--sans); font-size:calc(11px * var(--s)); color:var(--inst-ink); cursor:pointer;
  background:rgba(8,14,22,.7); border:1px solid var(--inst-line2); border-radius:6px; padding:2px 6px}
.cart-select:hover{border-color:var(--accent)}
:root.mode-imaging .cart-select{display:inline-block}
.cart-select option{background:#0b121b; color:#dfe8f0}
#head-btn.active{color:var(--on-accent); background:var(--accent); border-color:var(--accent)}
.scene-card .card-label .lbl-main{font-size:calc(9.5px * var(--s))}

/* the machine parameter column (left edge of the screen) */
.spectral-wrap > .dev-params{flex:0 0 calc(86px * var(--s)); display:flex; flex-direction:column; gap:2px; padding:6px 5px;
  background:linear-gradient(180deg, #0a121c, #060a10); border-right:1px solid #16263a; overflow-y:auto; overflow-x:hidden;
  font-family:var(--mono); scrollbar-width:none}
.dev-params::-webkit-scrollbar{display:none}
.rail-head{display:flex; flex-direction:column; gap:1px; padding:2px 4px 6px; margin-bottom:2px; border-bottom:1px solid #1a2a3c;
  font-size:calc(9px*var(--s)); color:var(--inst-dim); letter-spacing:.4px}
.rail-head .rh-k{font-size:calc(8px*var(--s)); color:var(--inst-faint); letter-spacing:1px}
.rail-head .rh-v{font-size:calc(12px*var(--s)); color:var(--accent); font-weight:700; letter-spacing:.3px}
.rail-group{font-size:calc(8px*var(--s)); letter-spacing:1.2px; text-transform:uppercase; color:var(--accent); font-weight:700;
  padding:4px 4px 1px; margin-top:3px; border-top:1px solid #16263a}
.rail-item{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:2px; align-items:center;
  padding:2px 3px 3px 5px; border:1px solid transparent; border-radius:6px; transition:border-color .2s, background .2s}
.rail-lbl{grid-column:1; grid-row:1; font-size:calc(8.5px*var(--s)); letter-spacing:.8px; color:var(--inst-faint); text-transform:uppercase; white-space:nowrap; overflow:hidden}
.rail-val{grid-column:1; grid-row:2; font-size:calc(13px*var(--s)); color:var(--inst-ink); font-weight:650; font-variant-numeric:tabular-nums; line-height:1.1}
.rail-btns{grid-column:2; grid-row:1 / span 2; display:flex; flex-direction:column; gap:1px; opacity:.35; transition:opacity .15s}
.rail-item:hover .rail-btns,.rail-item.knob-hl .rail-btns{opacity:1}
.rail-btns button{font-size:calc(7.5px*var(--s)); line-height:1; padding:2px 3px; cursor:pointer; color:var(--inst-dim);
  background:#0e1926; border:1px solid #1f3247; border-radius:3px}
.rail-btns button:hover{color:#fff; border-color:var(--accent)}
.rail-status{margin-top:auto; display:flex; flex-wrap:wrap; gap:3px; padding-top:6px}
.rail-status i{font-style:normal; font-size:calc(7.5px*var(--s)); letter-spacing:.8px; color:var(--inst-faint); border:1px solid #1f3247; border-radius:3px; padding:1px 3px}
.rail-status i.on{color:var(--accent); border-color:color-mix(in oklch, var(--accent) 50%, transparent)}

/* "this is the knob": a slide can point at one or more controls */
.rail-item.knob-hl{border-color:var(--warm); background:color-mix(in oklch, var(--warm) 15%, transparent); animation:knobPulse 1.6s ease-in-out infinite}
.rail-item.knob-hl .rail-lbl{color:var(--warm)}
.rail-item.knob-hl .rail-val{color:#fff}
.ctrl-row.knob-hl{outline:2px solid var(--warm); outline-offset:3px; border-radius:6px}
.dev-toggle.knob-hl{box-shadow:0 0 0 2px var(--warm)}
@keyframes knobPulse{ 0%,100%{box-shadow:0 0 5px color-mix(in oklch, var(--warm) 25%, transparent)} 50%{box-shadow:0 0 16px color-mix(in oklch, var(--warm) 60%, transparent)} }
@media (prefers-reduced-motion:reduce){ .rail-item.knob-hl,.pace.late{animation:none} }

/* numeric rail */
.ro-head{font-family:var(--mono); font-size:calc(11px*var(--s)); color:var(--inst-ink); text-align:center; padding:4px 2px 6px; font-weight:650;
  border-bottom:1px solid var(--inst-line2); letter-spacing:.4px; line-height:1.3}
.ro-head span{display:block; color:var(--inst-dim); font-weight:500; font-size:.9em}
.console-stage > .readouts .readout{padding:calc(6px*var(--s)) 4px calc(5px*var(--s))}
.readout.alias{border-color:color-mix(in oklch, var(--hot) 70%, transparent)}
.readout.alias .ro-value{color:var(--hot)}
.readout.alias::after{content:"ALIASED"; position:absolute; top:3px; right:4px; font-family:var(--mono); font-size:calc(7px*var(--s)); letter-spacing:.6px; color:var(--hot)}
:root:not(.show-icp):not(.controls-open) #ro-cppe,
:root:not(.show-icp):not(.controls-open) #ro-nicp{display:none}

/* ============================ timed protocols (BHI · emboli · bubbles) ============================ */
.monitor{position:absolute; top:calc(30px * var(--s)); right:12px; z-index:7; width:min(340px, 52%);
  background:rgba(6,11,18,.94); border:1px solid var(--inst-line2); border-radius:10px; padding:8px 10px 9px;
  box-shadow:0 10px 30px rgba(0,0,0,.5); font-family:var(--mono); font-size:calc(11px * var(--s)); color:var(--inst-ink)}
.monitor[hidden]{display:none}
.mon-head{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px}
.mon-title{color:var(--accent); font-weight:700; letter-spacing:.8px; text-transform:uppercase; font-size:.92em}
.mon-close{background:transparent; border:1px solid var(--inst-line2); color:var(--inst-dim); border-radius:5px; cursor:pointer; padding:0 6px; font-size:11px; line-height:1.5}
.mon-close:hover{color:#fff; border-color:var(--accent)}
.mon-cv{width:100%; height:calc(118px * var(--s)); display:block; border-radius:6px; margin-bottom:6px}
.mon-row{display:flex; justify-content:space-between; gap:8px; color:var(--inst-dim); margin:3px 0}
.mon-row b{color:var(--inst-ink)}
.mon-phase{color:var(--warm); font-weight:700}
.mon-note{color:var(--inst-faint)}
.mon-bar{height:5px; background:#15222f; border-radius:3px; overflow:hidden; margin:6px 0}
.mon-bar i{display:block; height:100%; background:var(--accent); transition:width .15s linear}
.mon-res{margin-top:6px; padding:5px 8px; border-radius:6px; background:#0e1824; line-height:1.45}
.mon-res b{font-size:1.18em}
.mon-res.good{color:var(--good); background:color-mix(in oklch, var(--good) 12%, #0b141e)}
.mon-res.warm{color:var(--warm); background:color-mix(in oklch, var(--warm) 12%, #0b141e)}
.mon-res.hot{color:var(--hot); background:color-mix(in oklch, var(--hot) 13%, #0b141e)}

/* ============================ physics labs docked over the stage ============================ */
.lab-host{position:absolute; inset:calc(9px * var(--s)); z-index:25; display:flex; flex-direction:column}
.lab-host[hidden]{display:none}
.lab-panel{flex:1; min-height:0; display:flex; flex-direction:column; background:var(--inst-panel); border:1px solid var(--inst-line2);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--card-shadow), inset 0 0 0 1px rgba(0,0,0,.4)}
.lab-panel[hidden]{display:none}
.lab-head{display:flex; align-items:center; justify-content:space-between; padding:7px 12px; border-bottom:1px solid #15222f}
.lab-title{font-family:var(--mono); font-size:calc(11px * var(--s)); letter-spacing:1.2px; text-transform:uppercase; color:var(--accent); font-weight:700}
.lab-close{background:var(--inst-panel2); border:1px solid var(--inst-line2); color:var(--inst-dim); border-radius:7px; cursor:pointer; padding:2px 10px; font-size:13px}
.lab-close:hover{color:var(--inst-ink); border-color:var(--accent)}
.lab-body{flex:1; min-height:0}
.lab-body.dop-body{padding:12px; grid-template-columns:minmax(0,1.4fr) minmax(230px,1fr)}
.dop-readouts .dop-err{border-top:1px dashed #1c2c3d; padding-top:6px}
.dop-readouts .dop-err span{color:var(--inst-dim)}
.dop-readouts .dop-err b{color:var(--warm)}
/* stenosis lab: vessel · four gate spectra · Spencer curve on the left, controls on the right */
.lab-body.sten-body{display:grid; grid-template-columns:minmax(0,1fr) clamp(220px, 25%, 300px);
  grid-template-rows:minmax(0,1fr) minmax(0,.85fr) minmax(0,1.05fr); gap:8px; padding:10px}
.sten-vessel{grid-column:1; grid-row:1; width:100%; height:100%; min-height:0; background:#070d15; border:1px solid #15222f; border-radius:9px}
.sten-gates{grid-column:1; grid-row:2; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; min-height:0}
.sten-gate{position:relative; background:#040406; border:1px solid #15222f; border-radius:8px; overflow:hidden; min-height:0}
.sten-gate canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.sg-lbl{position:absolute; top:3px; left:6px; font-family:var(--mono); font-size:calc(9.5px * var(--s)); color:var(--inst-dim); text-shadow:0 0 3px #000; z-index:1}
.sg-lbl b{color:var(--warm)}
.sg-val{position:absolute; bottom:3px; right:6px; font-family:var(--mono); font-size:calc(11px * var(--s)); color:var(--inst-ink); text-shadow:0 0 3px #000; z-index:1; font-variant-numeric:tabular-nums}
.sten-bottom{display:contents}
.sten-chart{grid-column:1; grid-row:3; width:100%; height:100%; min-height:0; background:#070d15; border:1px solid #15222f; border-radius:9px}
.sten-side{grid-column:2; grid-row:1 / span 3; display:flex; flex-direction:column; gap:9px; overflow-y:auto; min-height:0}
.sten-ro{display:flex; flex-direction:column; gap:5px; background:var(--inst-panel2); border:1px solid #15222f; border-radius:11px; padding:10px 12px}
.sten-ro > div{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:calc(12px * var(--s)); color:var(--inst-dim)}
.sten-ro b{font-family:var(--mono); color:var(--inst-ink); font-size:calc(13px * var(--s)); font-variant-numeric:tabular-nums}
.sten-ro .sten-lr{border-top:1px solid #15222f; padding-top:6px; margin-top:2px}
.sten-ro .sten-lr b{color:var(--accent); font-size:calc(17px * var(--s))}
.sten-eq{font-family:var(--mono); font-size:calc(13px * var(--s)); color:var(--accent); text-align:center; background:var(--inst-panel2);
  border:1px solid #15222f; border-left:3px solid var(--accent); border-radius:9px; padding:7px 10px}

/* ============================ hands-on scan log ============================ */
.scanlog{position:fixed; inset:0; z-index:125; background:rgba(4,8,14,.82); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center}
.scanlog[hidden]{display:none}
.sl-panel{width:min(1100px,96vw); max-height:94vh; background:var(--panel); border:1px solid var(--line2); border-radius:16px;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.65); color:var(--ink)}
.sl-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--line)}
.sl-title{font-weight:700; font-size:calc(15px*var(--s))}
.sl-actions{display:flex; gap:6px; flex-wrap:wrap}
.sl-actions button{font-family:var(--sans); font-size:calc(12px*var(--s)); cursor:pointer; color:var(--ink); background:var(--panel2);
  border:1px solid var(--line2); border-radius:8px; padding:5px 11px; transition:.15s}
.sl-actions button:hover{border-color:var(--accent)}
.sl-actions button[data-a="take"]{background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:650}
.sl-meta{display:flex; gap:14px; flex-wrap:wrap; padding:10px 16px; border-bottom:1px solid var(--line)}
.sl-meta label{display:flex; align-items:center; gap:7px; font-size:calc(12px*var(--s)); color:var(--dim)}
.sl-meta input,.sl-meta select,.sl-table input,.sl-table select,.sl-bhi input{font-family:var(--mono); font-size:calc(12.5px*var(--s));
  background:var(--panel2); color:var(--ink); border:1px solid var(--line2); border-radius:6px; padding:4px 7px}
.sl-meta input{width:220px}
.sl-meta input:focus,.sl-table input:focus,.sl-bhi input:focus{outline:none; border-color:var(--accent)}
.sl-scroll{overflow:auto; padding:0 16px; flex:1; min-height:0}
.sl-table{width:100%; border-collapse:collapse; font-size:calc(12.5px*var(--s))}
.sl-table th{position:sticky; top:0; z-index:1; background:var(--panel); text-align:left; color:var(--dim); font-weight:650; font-size:.9em;
  padding:8px 5px 5px; border-bottom:1px solid var(--line2); line-height:1.2}
.sl-table th small{color:var(--faint); font-weight:500}
.sl-table td{padding:3px 5px; border-bottom:1px solid var(--line); white-space:nowrap}
.sl-table tr.grp td{border-top:1px solid var(--line2)}
.sl-table input{width:62px; text-align:right}
.sl-table input::placeholder{color:var(--faint); font-style:italic}
.sl-table .calc{font-family:var(--mono); text-align:right; color:var(--ink); min-width:44px}
.sl-table .rng{text-align:left; color:var(--faint); font-size:.92em}
.sl-table .rng.low,.sl-table .rng.high{color:var(--warm); font-weight:650}
.sl-table tr.just td{animation:stepFlash 1.8s ease-out}
.sl-derived{display:flex; gap:22px; flex-wrap:wrap; padding:10px 16px; border-top:1px solid var(--line); font-size:calc(13px*var(--s)); color:var(--dim)}
.sl-derived b,.sl-bhi-out b{font-family:var(--mono); font-size:1.1em}
.sl-derived .good,.sl-bhi-out .good{color:var(--good)}
.sl-derived .warm{color:var(--warm)}
.sl-derived .hot,.sl-bhi-out .hot{color:var(--hot)}
.sl-bhi{display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:8px 16px; font-size:calc(12.5px*var(--s)); color:var(--dim); border-top:1px solid var(--line)}
.sl-bhi b{color:var(--ink)}
.sl-bhi label{display:flex; align-items:center; gap:6px}
.sl-bhi input{width:62px; text-align:right}
.sl-bhi-out{color:var(--ink)}
.sl-foot{font-size:calc(11.5px*var(--s)); color:var(--faint); padding:4px 16px 12px; margin:0}

/* ============================ projector: present mode keeps the screens big ============================ */
:root.present .mode-toggle button{font-size:13px; padding:6px 12px}
:root.present .act{font-size:12px; padding:6px 10px}
:root.present .act-sep{display:none}
:root.present .console-main.stage-split .spectral-card .axis-hint,
.console-main.stage-split .spectral-card .axis-hint{display:none}
@media (max-width:1500px){ :root.present .act.opt{display:none} }
@media (max-height:820px){
  :root.present{--header-h:58px; --s:1.2}
  :root.present .module-nav{display:none}
  :root.present .brand-text h1{font-size:18px}
  :root.present .device-status,
  :root.present .windowbar,
  :root.present .controls-head,
  :root.present .controls{display:none}
  :root.present .console{gap:8px; padding-top:12px; padding-bottom:12px}
  :root.present .learn-head{margin-bottom:8px}
  :root.present .module-nav{margin-bottom:10px}
  :root.present .slide-title{margin:4px 0 10px}
}
@media (max-height:760px){
  .console{gap:8px}
  .console-stage{min-height:300px}
  .module-nav{display:none}
  .learn-head{margin-bottom:8px}
  .slide-title{font-size:calc(22px * var(--s)); margin:4px 0 10px}
}

/* ============================ print handout ============================ */
.handout{display:none}
@media print{
  body{overflow:visible!important; height:auto!important; background:#fff!important; color:#111!important}
  .app-header,.split,.tooltip,.overview,.dop-modal,.survey-modal,.exam-card,#device-status,.lightbox,.blackout,.lab-host,.monitor{display:none!important}
  body:not(.print-scanlog) .scanlog{display:none!important}
  .ho-body [data-step]{visibility:visible!important; opacity:1!important; transform:none!important}
  .ho-track{font-size:18px; font-weight:800; margin:26px 0 6px; padding-bottom:4px; border-bottom:2px solid #222; break-after:avoid}
  .ho-body .tbl{border-collapse:collapse; width:100%; font-size:12px; margin:6px 0}
  .ho-body .tbl th,.ho-body .tbl td{border:1px solid #ccc; padding:3px 6px; text-align:left; vertical-align:top}
  .ho-body .case-v,.ho-body .case-f,.ho-body .case-q,.ho-body .case-a{border-left:3px solid #888; padding:4px 8px; margin:5px 0; background:#f7f7f7}
  .ho-body .case-a{border-left-color:#0a6a55}
  .ho-body ul.checklist{list-style:square}
  body.print-scanlog .handout{display:none!important}
  body.print-scanlog .scanlog{display:block!important; position:static!important; background:#fff!important; backdrop-filter:none!important}
  body.print-scanlog .sl-panel{width:auto!important; max-height:none!important; border:0!important; box-shadow:none!important; background:#fff!important; color:#111!important}
  body.print-scanlog .sl-actions,body.print-scanlog .sl-close{display:none!important}
  body.print-scanlog .sl-scroll{overflow:visible!important}
  body.print-scanlog .sl-table th{position:static!important; background:#fff!important; color:#111!important}
  body.print-scanlog .sl-table td,body.print-scanlog .sl-table th{border-bottom:1px solid #bbb!important; color:#111!important}
  body.print-scanlog input,body.print-scanlog select{border:0!important; background:none!important; color:#111!important; -webkit-appearance:none; appearance:none}
  body.print-scanlog .sl-meta,body.print-scanlog .sl-derived,body.print-scanlog .sl-bhi,body.print-scanlog .sl-foot,body.print-scanlog .sl-title{color:#111!important}
  .handout{display:block!important; color:#111; font-family:var(--sans)}
  .ho-cover{text-align:center; padding:36px 0 22px; border-bottom:2px solid #222; margin-bottom:18px}
  .ho-cover h1{font-size:25px; margin:0 0 6px}
  .ho-cover p{color:#555; margin:0; font-size:13px}
  .ho-module{font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:#0a6a55; font-weight:700; margin:20px 0 4px}
  .ho-slide{break-inside:avoid; page-break-inside:avoid; margin:0 0 15px; padding:0 0 11px; border-bottom:1px solid #ddd}
  .ho-slide h2{font-size:16px; margin:2px 0 6px; color:#111}
  .ho-body{font-size:12.5px; line-height:1.5}
  .ho-body .equation{border:1px solid #ccc; border-left:3px solid #0a6a55; background:#f6f6f6; color:#0a6a55; padding:6px 8px; text-align:center; border-radius:4px; font-family:var(--mono)}
  .ho-body .callout,.ho-body .warn{border-left:3px solid #888; background:#f4f4f4; padding:6px 8px; color:#222; border-radius:0 4px 4px 0}
  .ho-body ul,.ho-body ol{margin:6px 0; padding-left:20px}
  .ho-body .term,.ho-body .cite{border:0!important; color:#111!important; font:inherit!important; background:none!important; padding:0!important}
  .ho-note{margin-top:8px; padding:7px 10px; border-left:3px solid #d29a00; background:#fff9e8; font-size:12px; border-radius:0 4px 4px 0}
  .ho-note::before{content:"Speaker note — "; font-weight:700; color:#8a6d00}
  .ho-note em{font-style:normal; font-weight:600; color:#0a6a55}
}

/* ============================ talk mode (L): the 50-minute talk, full screen ============================
   html.talk hides the app chrome and the knobs: the slide sits beside the live machine screen.
   html.slide-only (stage:"slide") gives the slide the whole screen. html.talk-console brings the
   full console back at the same step; the talk bar stays at the bottom. */
.talk-btn{font-family:var(--sans); font-size:calc(12.5px * var(--s)); cursor:pointer; white-space:nowrap; font-weight:700;
  color:var(--on-accent); background:var(--warm); border:1px solid var(--warm); border-radius:9px;
  padding:calc(7px*var(--s)) calc(13px*var(--s)); transition:.15s}
.talk-btn:hover{box-shadow:0 0 16px color-mix(in oklch, var(--warm) 45%, transparent)}
.talk-bar,.talk-back{display:none}
:root.talk{--s:1.22; --tb-h:46px}
@media (min-width:1700px){ :root.talk{--s:1.45} }
@media (min-width:2300px){ :root.talk{--s:1.8} }
:root.talk .app-header{display:none}
:root.talk .split{height:calc(100vh - var(--tb-h))}
:root.talk .talk-bar{display:flex; position:fixed; left:0; right:0; bottom:0; height:var(--tb-h); z-index:60;
  align-items:center; gap:12px; padding:0 14px; border-top:1px solid var(--line);
  background:color-mix(in oklch, var(--panel) 94%, transparent); backdrop-filter:blur(6px);
  font-family:var(--mono); font-size:13px; color:var(--dim)}
.tb-sec{flex:0 0 auto; max-width:24vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--accent); font-weight:700; letter-spacing:.6px; text-transform:uppercase; font-size:12px}
.tb-prog{flex:1 1 auto; display:flex; gap:3px; min-width:120px; height:22px}
.tb-seg{position:relative; flex-basis:0; min-width:0; border:0; padding:0; cursor:pointer; overflow:hidden;
  background:color-mix(in oklch, var(--ink) 9%, transparent); border-radius:4px}
.tb-seg i{position:absolute; left:0; top:0; bottom:0; width:0; background:color-mix(in oklch, var(--accent) 38%, transparent); transition:width .3s ease}
.tb-seg.cur{box-shadow:inset 0 0 0 1px var(--accent)}
.tb-seg.cur i{background:color-mix(in oklch, var(--accent) 62%, transparent)}
.tb-seg span{position:relative; display:block; padding:0 6px; line-height:22px; font-size:10.5px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; color:var(--dim); text-align:left}
.tb-seg.cur span{color:var(--ink); font-weight:700}
.tb-seg:hover{box-shadow:inset 0 0 0 1px var(--line2)}
.tb-dots{flex:0 0 auto}
.tb-count{font-variant-numeric:tabular-nums; min-width:52px; text-align:center; color:var(--ink)}
.tb-btn{font-family:var(--sans); font-size:13px; cursor:pointer; color:var(--ink); background:var(--panel2);
  border:1px solid var(--line2); border-radius:7px; padding:3px 10px; line-height:1.4; white-space:nowrap}
.tb-btn:hover{border-color:var(--accent)}
.tb-btn.active{background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700}
.tb-btn kbd{font-size:.72em; margin-left:3px}
.tb-pace{font-family:var(--mono); font-size:13px; cursor:pointer; color:var(--dim); background:transparent; border:1px solid var(--line);
  border-radius:7px; padding:3px 9px; white-space:nowrap; font-variant-numeric:tabular-nums}
.tb-pace span{opacity:.7}
.tb-pace.run{color:var(--good)}
.tb-pace.warn{color:var(--warm); border-color:var(--warm)}
.tb-pace.late{color:var(--hot); border-color:var(--hot)}
@media (max-width:1100px){ .tb-sec,.tb-dots{display:none} .tb-wide kbd{display:none} }

/* slides beside the machine: no chrome, big type */
:root.talk:not(.talk-console) .learn-head,
:root.talk:not(.talk-console) .module-nav,
:root.talk:not(.talk-console) .deck-foot,
:root.talk:not(.talk-console) .console-top,
:root.talk:not(.talk-console) .device-status,
:root.talk:not(.talk-console) .windowbar,
:root.talk:not(.talk-console) .controls-head,
:root.talk:not(.talk-console) .controls,
:root.talk:not(.talk-console) .card-label .lbl-btns,
:root.talk:not(.talk-console) .scene-card .spot-btn{display:none}
:root.talk .learn{width:clamp(440px, 38vw, 820px); padding:calc(26px*var(--s)) calc(30px*var(--s)) calc(20px*var(--s)); transition:none}
:root.talk.talk-console .learn{width:clamp(380px, 28vw, 520px); padding:calc(16px*var(--s))}
:root.talk:not(.talk-console) .slide-module{font-size:calc(12px*var(--s))}
:root.talk:not(.talk-console) .slide-title{font-size:calc(31px*var(--s)); margin:8px 0 20px}
:root.talk:not(.talk-console) .slide-content{font-size:calc(17px*var(--s)); max-width:none}
:root.talk:not(.talk-console) .slide-content li{margin:9px 0}
:root.talk:not(.talk-console) .tbl{font-size:calc(15px*var(--s))}
:root.talk:not(.talk-console) .equation,
:root.talk:not(.talk-console) .callout,
:root.talk:not(.talk-console) .warn{font-size:calc(16px*var(--s))}
:root.talk:not(.talk-console) .slide-content .lead{font-size:calc(20px*var(--s))}
:root.talk:not(.talk-console) .console{padding:calc(14px*var(--s))}
:root.talk:not(.talk-console) .console-note{font-size:calc(15px*var(--s))}
:root.talk .console-stage{min-height:0}

/* the slide alone */
:root.talk.slide-only:not(.talk-console) .console{display:none}
:root.talk.slide-only:not(.talk-console) .learn{width:100%; border-right-width:0; align-items:center; justify-content:center}
:root.talk.slide-only:not(.talk-console) .slide{width:min(1280px, 100%); margin:auto 0}
:root.talk.slide-only:not(.talk-console) .slide-title{font-size:calc(38px*var(--s))}
:root.talk.slide-only:not(.talk-console) .speaker-notes{width:min(1280px, 100%)}

/* full console from the talk */
:root.talk.talk-console .talk-back{display:block; position:fixed; z-index:61; right:16px; bottom:calc(var(--tb-h) + 12px);
  font-family:var(--sans); font-size:14px; font-weight:700; cursor:pointer; color:var(--on-accent); background:var(--warm);
  border:0; border-radius:999px; padding:9px 18px; box-shadow:0 8px 24px rgba(0,0,0,.45)}
:root.talk.talk-console .talk-back kbd{background:rgba(0,0,0,.12); border-color:rgba(0,0,0,.2); color:inherit}

.talk-fs{position:fixed; z-index:62; left:50%; top:14px; transform:translateX(-50%); font:600 14px var(--sans);
  color:var(--on-accent); background:var(--warm); border-radius:999px; padding:8px 18px; box-shadow:0 8px 24px rgba(0,0,0,.45); pointer-events:none}
.talk-fs[hidden]{display:none}

/* talk slide pieces: diagrams, tiles */
.dia{display:block; width:100%; max-height:38vh; margin:4px 0 18px}
.dia .d-bone{fill:#d6cdb8; opacity:.9}
.dia .d-brain{fill:color-mix(in oklch, var(--panel2) 86%, var(--accent2) 14%); stroke:var(--line2)}
.dia .d-artery{fill:var(--flow-red); opacity:.85}
.dia .d-probe{fill:var(--raise); stroke:var(--accent); stroke-width:2.5}
.dia .d-out path{stroke:var(--accent); fill:none; stroke-width:3.5; stroke-linecap:round}
.dia .d-echo path{stroke:var(--warm); fill:none; stroke-width:3; stroke-linecap:round}
.dia .d-lbl{fill:var(--dim); font:600 15px var(--sans)}
.dia .d-cap{fill:var(--faint); font:500 13px var(--sans)}
.dia .d-axis{stroke:var(--line2); stroke-width:1.5}
.dia .d-hi stop{stop-color:var(--flow-blue)} .dia .d-mid stop{stop-color:var(--accent2)} .dia .d-lo stop{stop-color:var(--accent)}
.tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:calc(14px*var(--s)); margin:18px 0}
.tile{background:var(--panel2); border:1px solid var(--line2); border-top:3px solid var(--accent); border-radius:12px;
  padding:calc(14px*var(--s)) calc(16px*var(--s))}
.tile b{display:block; color:var(--accent); font-size:1.12em; margin-bottom:4px}
.tile span{display:block; margin-top:7px; line-height:1.4}
.slide-content .dim{color:var(--dim)}
.tbl td.bad{color:var(--hot); font-weight:600}
@media print{ .talk-bar,.talk-back,.talk-btn{display:none!important} }

/* autoregulation diagram (talk: t-autoreg). Animations start when a build is shown. */
.dia.ar{max-height:44vh}
.dia .ar-zone{fill:color-mix(in oklch, var(--accent) 7%, transparent)}
.dia .ar-curve{fill:none; stroke:var(--accent); stroke-width:3.5; stroke-linecap:round}
.dia .ar-hyper{fill:none; stroke:var(--accent2); stroke-width:2.5; stroke-dasharray:7 6}
.dia .ar-ves{fill:var(--flow-red); opacity:.8; transform-box:fill-box; transform-origin:center}
.dia .ar-ring{fill:none; stroke:var(--hot); stroke-width:2.5; stroke-dasharray:4 3}
.dia .ar-dot{fill:var(--ink); stroke:var(--bg); stroke-width:2; transform-box:fill-box; transform-origin:center}
.dia .ar-dot-x{fill:var(--hot)}
.dia .ar-fall{fill:none; stroke:var(--hot); stroke-width:2.5; stroke-linecap:round}
.dia .ar-tn{fill:var(--accent2)} .dia .ar-tx{fill:var(--hot)}
#slide-content .shown .ar-rise{animation:ar-rise 3.4s ease-in-out .3s infinite}
#slide-content .shown .ar-dilate{animation:ar-dilate 3.4s ease-in-out .3s infinite}
#slide-content .shown .ar-stall{animation:ar-stall 3.4s ease-in-out .3s infinite}
#slide-content .ar-n.shown:not(.current-step){opacity:.35}
@keyframes ar-rise{0%,12%{transform:translateY(0)} 45%,72%{transform:translateY(-30px)} 100%{transform:translateY(0)}}
@keyframes ar-dilate{0%,12%{transform:scale(1)} 45%,72%{transform:scale(1.45)} 100%{transform:scale(1)}}
@keyframes ar-stall{0%,12%{transform:translateY(0)} 45%,72%{transform:translateY(-3px)} 100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){ #slide-content .shown .ar-rise, #slide-content .shown .ar-dilate, #slide-content .shown .ar-stall{animation:none} }