/* ============================================================================
   CODE RED — ER simulator theme
   One environment, one palette. Dark trauma-bay: instrument glass, monitor
   phosphor, warning amber, arterial red.
   ============================================================================ */

:root{
  /* environment */
  --bg:#070B10;
  --bg-2:#0B1119;
  --panel:#0F1721;
  --panel-2:#141E2A;
  --panel-3:#1A2634;
  --line:#22303F;
  --line-2:#2E4053;

  /* ink */
  --ink:#E8F0F7;
  --ink-2:#B7C6D4;
  --mute:#7C8FA1;
  --faint:#54687A;

  /* instrument colors */
  --ecg:#3DDC97;      /* monitor phosphor green */
  --ok:#3DDC97;
  --cyan:#4FC9E8;
  --amber:#FFB020;
  --warn:#FFB020;
  --crit:#FF4D5E;     /* arterial */
  --bad:#FF4D5E;
  --violet:#9B8CFF;

  /* tier accent — set per shift by JS */
  --accent:#4FC9E8;
  --accent-soft:rgba(79,201,232,.14);
  --accent-line:rgba(79,201,232,.42);

  --r:14px;
  --r-sm:10px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);

  /* layout — the shell fills the display instead of sitting in a narrow column.
     --wide is the working surface (sim, monitor, debrief); --read is for the
     pages that are genuinely reading-width (boot, briefing). */
  --wide:min(2040px,94vw);
  --read:min(1160px,90vw);
  --pad:clamp(22px,2.6vw,46px);
}

/* Type scale — grows with the viewport so a big display shows bigger text,
   not the same small column stretched wider. */
:root{
  --t-body:clamp(15.2px,0.42vw + 13.6px,19px);   /* vignette, radio, answers */
  --t-lead:clamp(15px,0.34vw + 13.7px,18px);     /* prompts, labels */
  --t-title:clamp(19px,0.72vw + 16.5px,27px);    /* window headings */
  --t-vital:clamp(15px,0.62vw + 12.8px,22px);    /* monitor numbers */
  --t-mono:clamp(12.5px,0.24vw + 11.7px,15px);   /* lab chips, refs */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button,input,textarea{font-family:inherit;color:inherit}

/* ============================ ambient environment ======================== */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env-grid{
  position:absolute;inset:-2px;
  background-image:
    linear-gradient(rgba(79,201,232,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,201,232,.045) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 32%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 32%,#000 30%,transparent 78%);
}
.env-glow{
  position:absolute;left:50%;top:-24vh;width:120vw;height:80vh;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,var(--accent-soft) 0%,transparent 62%);
  transition:background .7s var(--ease);
}
.env-scan{
  position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.016) 0 1px,transparent 1px 3px);
  opacity:.5;
}

/* ================================= top bar ============================== */
.topbar{
  position:fixed;top:0;left:0;right:0;height:52px;z-index:60;
  display:flex;align-items:center;gap:14px;padding:0 16px;
  background:linear-gradient(to bottom,rgba(7,11,16,.94),rgba(7,11,16,.72));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.tb-brand{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;padding:6px 8px;border-radius:8px}
.tb-brand:hover{background:var(--panel-2)}
.tb-cross{color:var(--crit);font-size:16px;line-height:1}
.tb-name{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:2.5px;color:var(--ink)}
.tb-mid{flex:1;min-width:0;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--mute)}
.tb-mid .tb-chip{
  padding:3px 10px;border-radius:20px;border:1px solid var(--accent-line);
  color:var(--accent);background:var(--accent-soft);white-space:nowrap;
}
.tb-right{display:flex;gap:6px}
.tb-btn{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);cursor:pointer;font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.tb-btn:hover{border-color:var(--line-2);background:var(--panel-2)}
.tb-btn.off{opacity:.42}

/* ================================= screens ============================== */
#app{position:relative;z-index:1;padding-top:52px;min-height:100vh}
.screen{display:none;animation:screenIn .42s var(--ease) both}
.screen.on{display:block}
@keyframes screenIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* =================================== boot =============================== */
.boot-wrap{
  max-width:var(--read);margin:0 auto;padding:clamp(32px,7vh,78px) var(--pad) 60px;
  text-align:center;position:relative;
}
.boot-doors{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:24px}
.boot-doors span{
  position:absolute;top:0;bottom:0;width:50%;
  background:linear-gradient(180deg,rgba(79,201,232,.07),transparent 60%);
  animation:doorOpen 1.1s var(--ease) .1s both;
}
.boot-doors span:first-child{left:0;border-right:1px solid rgba(79,201,232,.22)}
.boot-doors span:last-child{right:0;border-left:1px solid rgba(79,201,232,.22)}
@keyframes doorOpen{
  0%{transform:translateX(0);opacity:1}
  100%{transform:translateX(var(--dx,-100%));opacity:0}
}
.boot-doors span:last-child{--dx:100%}
.boot-kick{
  font-family:var(--mono);font-size:11px;letter-spacing:3.4px;text-transform:uppercase;
  color:var(--accent);margin-bottom:20px;
}
.boot-title{
  font-size:clamp(38px,8vw,68px);line-height:1.02;font-weight:800;letter-spacing:-1.6px;
  background:linear-gradient(180deg,#fff 20%,#93AABC 118%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.boot-sub{color:var(--ink-2);font-size:15.5px;margin-top:18px;line-height:1.7}
.boot-ecg{height:66px;margin:26px 0 30px;opacity:.9}
.boot-foot{margin-top:30px;font-size:12px;color:var(--faint);font-family:var(--mono);letter-spacing:.3px}

/* ================================= buttons ============================== */
.btn{
  border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--ink);
  border-radius:11px;padding:12px 22px;font-size:14.5px;font-weight:650;cursor:pointer;
  transition:.16s var(--ease);letter-spacing:.2px;
}
.btn:hover{background:rgba(79,201,232,.22);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink-2)}
.btn-ghost:hover{background:var(--panel-2);border-color:var(--line-2)}
.btn-sm{padding:8px 15px;font-size:13px}
.btn-danger{border-color:rgba(255,77,94,.5);background:rgba(255,77,94,.14);color:#FFD3D7}
.btn-danger:hover{background:rgba(255,77,94,.24)}
.btn-hero{
  display:inline-flex;align-items:center;gap:12px;font-size:17px;padding:16px 34px;border-radius:14px;
  background:linear-gradient(135deg,rgba(79,201,232,.26),rgba(79,201,232,.12));
  box-shadow:0 0 0 0 var(--accent-line);animation:heroPulse 2.6s ease-in-out infinite;
}
@keyframes heroPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(79,201,232,.34)}
  50%{box-shadow:0 0 0 14px rgba(79,201,232,0)}
}
.btn-hero .bh-arrow{transition:transform .2s var(--ease)}
.btn-hero:hover .bh-arrow{transform:translateX(5px)}
#btnSkipBrief{display:block;margin:16px auto 0}

/* ================================ briefing ============================== */
.brief-wrap{max-width:var(--read);margin:0 auto;padding:clamp(26px,5vh,54px) var(--pad) 60px}
.brief-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.brief-kick{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--accent)}
.brief-count{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:1.5px}
.brief-stage{min-height:400px}
.bcard{animation:cardIn .4s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
.bcard.back{animation-name:cardInBack}
@keyframes cardInBack{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
.bcard-ico{font-size:34px;line-height:1;margin-bottom:14px}
.bcard h3{font-size:26px;font-weight:750;letter-spacing:-.5px;margin-bottom:12px}
.bcard>p{color:var(--ink-2);font-size:15.5px;margin-bottom:14px;line-height:1.7}
.bcard b{color:var(--ink);font-weight:700}
.bcard em{color:var(--accent);font-style:normal;font-weight:650}
.bnote{
  border-left:3px solid var(--amber);background:rgba(255,176,32,.09);
  border-radius:0 10px 10px 0;padding:12px 16px;font-size:14px;color:#F0DCB6;margin-top:16px;
}
.bnote b{color:#FFDFA6}
.blist{list-style:none;margin:18px 0 0;display:grid;gap:9px}
.blist li{
  display:flex;gap:13px;align-items:flex-start;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 15px;font-size:14.5px;color:var(--ink-2);
  animation:liIn .4s var(--ease) both;
}
@keyframes liIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.blist li .n{
  flex-shrink:0;width:25px;height:25px;border-radius:7px;background:var(--accent-soft);
  border:1px solid var(--accent-line);color:var(--accent);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;font-weight:700;
}
.blist li .n.who{background:var(--panel-3);border-color:var(--line-2);color:var(--ink-2);font-size:13px}
.blist li b{color:var(--ink)}
.brief-dots{display:flex;justify-content:center;gap:8px;margin:26px 0 20px}
.brief-dots i{
  width:7px;height:7px;border-radius:50%;background:var(--line-2);cursor:pointer;transition:.22s var(--ease);
}
.brief-dots i.on{background:var(--accent);width:24px;border-radius:4px}
.brief-dots i.seen{background:var(--faint)}
.brief-nav{display:flex;justify-content:space-between;gap:12px}

/* live throwaway demo inside the briefing */
.demo{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin-top:16px;
}
.demo .orders textarea{min-height:96px}
.demo-cap{
  font-family:var(--mono);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--faint);margin-bottom:11px;
}

/* ================================== select ============================== */
.sel-wrap{max-width:var(--wide);margin:0 auto;padding:clamp(26px,5vh,50px) var(--pad) 70px}
.sel-block{margin-bottom:42px}
.sel-block[hidden]{display:none}
.sel-h{font-size:23px;font-weight:750;letter-spacing:-.4px;margin-bottom:5px}
.sel-p{color:var(--mute);font-size:14px;margin-bottom:20px}
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.tier-card{
  position:relative;text-align:left;cursor:pointer;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 20px 18px;transition:.2s var(--ease);
}
.tier-card:hover{transform:translateY(-3px);border-color:var(--tc,var(--line-2))}
.tier-card.on{border-color:var(--tc);background:var(--panel-2);box-shadow:0 0 0 1px var(--tc) inset}
.tier-card .tc-bar{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tc)}
.tier-card .tc-lvl{font-family:var(--mono);font-size:11px;letter-spacing:2.6px;text-transform:uppercase;color:var(--tc);font-weight:700}
.tier-card h3{font-size:19px;margin:6px 0 4px;font-weight:700}
.tier-card .tc-desc{font-size:13.5px;color:var(--mute);line-height:1.55}
.tier-card .tc-meta{
  margin-top:14px;display:flex;gap:7px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;color:var(--faint);
}
.tier-card .tc-meta span{background:var(--panel-3);border:1px solid var(--line);border-radius:6px;padding:3px 8px}
.tier-card .tc-done{
  position:absolute;top:16px;right:16px;font-family:var(--mono);font-size:11px;
  color:var(--ok);letter-spacing:1px;
}

.room-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.room-card{
  position:relative;text-align:left;cursor:pointer;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 18px 16px;transition:.2s var(--ease);
}
.room-card:hover{transform:translateY(-3px);border-color:var(--accent-line);background:var(--panel-2)}
.room-card .rc-top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.room-card .rc-light{
  width:9px;height:9px;border-radius:50%;background:var(--crit);flex-shrink:0;
  box-shadow:0 0 10px var(--crit);animation:blink 1.5s ease-in-out infinite;
}
.room-card.done .rc-light{background:var(--ok);box-shadow:0 0 10px var(--ok);animation:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.28}}
.room-card .rc-room{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--mute)}
.room-card h3{font-size:15.5px;font-weight:650;line-height:1.45;color:var(--ink)}
.room-card .rc-foot{
  margin-top:13px;padding-top:11px;border-top:1px dashed var(--line);
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.6px;
}
.room-card .rc-score{color:var(--ok);font-weight:700}
.room-card.done{opacity:.9}

.sel-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px;flex-wrap:wrap}
.switch{display:flex;align-items:center;gap:11px;cursor:pointer;font-size:14px;color:var(--ink-2)}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch-track{
  width:44px;height:25px;border-radius:14px;background:var(--panel-3);border:1px solid var(--line-2);
  position:relative;transition:.2s var(--ease);flex-shrink:0;
}
.switch-thumb{
  position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
  background:var(--mute);transition:.2s var(--ease);
}
.switch input:checked + .switch-track{background:var(--accent-soft);border-color:var(--accent-line)}
.switch input:checked + .switch-track .switch-thumb{left:21px;background:var(--accent)}
.switch-label em{color:var(--faint);font-style:normal;font-size:13px}
.shift-score{font-family:var(--mono);font-size:12.5px;color:var(--mute);letter-spacing:.8px}
.shift-score b{color:var(--ok)}

/* ================================= monitor ============================== */
.monitor{
  position:sticky;top:52px;z-index:40;
  background:linear-gradient(to bottom,var(--bg-2),rgba(11,17,25,.93));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.mon-ecg{height:52px;position:relative;overflow:hidden}
.mon-body{
  max-width:var(--wide);margin:0 auto;padding:2px var(--pad) 13px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.mon-id{min-width:150px;flex:1}
.mon-room{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--accent);
}
.mon-name{display:block;font-size:var(--t-lead);color:var(--ink-2);margin-top:2px;line-height:1.35}
.mon-vitals{display:flex;gap:9px;flex-wrap:wrap}
.vt{
  background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:6px 13px;min-width:86px;transition:.3s var(--ease);
}
.vt .vt-k{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--faint);
}
.vt .vt-v{
  display:block;font-family:var(--mono);font-size:var(--t-vital);font-weight:700;
  color:var(--ecg);font-variant-numeric:tabular-nums;line-height:1.25;
}
.vt.abn{border-color:rgba(255,176,32,.4);background:rgba(255,176,32,.07)}
.vt.abn .vt-v{color:var(--amber)}
.vt.crit{border-color:rgba(255,77,94,.45);background:rgba(255,77,94,.08)}
.vt.crit .vt-v{color:var(--crit)}
/* tiles breathe in time with the patient's own heart rate — glow only, the
   numbers themselves are never altered */
@keyframes vtTick{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
  22%{box-shadow:0 0 11px -2px currentColor}
}
.vt{color:rgba(61,220,151,.34)}
.vt.abn{color:rgba(255,176,32,.42)}
.vt.crit{color:rgba(255,77,94,.5)}

/* countdown ring */
.mon-clock{position:relative;width:78px;height:78px;flex-shrink:0;margin-left:auto}
.mon-clock.hide{visibility:hidden}
.ring{width:78px;height:78px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.ring-bg{stroke:var(--panel-3)}
.ring-fg{
  stroke:var(--ecg);stroke-dasharray:326.7;stroke-dashoffset:0;
  transition:stroke-dashoffset .95s linear,stroke .4s var(--ease);
}
.ring-num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:23px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;padding-bottom:9px;
}
.ring-cap{
  position:absolute;left:0;right:0;bottom:13px;text-align:center;
  font-family:var(--mono);font-size:8.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint);
}
.mon-clock.warn .ring-fg{stroke:var(--amber)}
.mon-clock.warn .ring-num{color:var(--amber)}
.mon-clock.crit .ring-fg{stroke:var(--crit)}
.mon-clock.crit .ring-num{color:var(--crit)}
.mon-clock.crit{animation:clockPulse .62s ease-in-out infinite}
@keyframes clockPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.075)}}

/* =================================== sim ================================ */
.sim-wrap{max-width:var(--wide);margin:0 auto;padding:22px var(--pad) 90px}

/* On a real screen the chart sits BESIDE the answer box instead of above it,
   so the vignette, the labs and the box you type in are visible at once —
   no scrolling back up to re-read the case while you answer.

   These use `.sim-wrap > x` rather than bare `.x`: the base .chart/.rail/.window
   rules appear later in this file, and at equal specificity source order would
   win — which silently turned the sticky chart back into a relative one and
   shoved it 190px down the page. */
@media (min-width:1160px){
  .sim-wrap{
    display:grid;
    grid-template-columns:minmax(340px,.9fr) minmax(0,1.1fr);
    grid-template-rows:auto 1fr;
    column-gap:clamp(20px,2.1vw,40px);
    align-items:start;
  }
  .sim-wrap > .chart{
    grid-column:1;grid-row:1 / span 2;margin-top:0;
    /* --mon-h is measured from the real monitor at runtime (it changes height
       when the vitals wrap), falling back to a sane guess before first paint. */
    position:sticky;top:calc(52px + var(--mon-h,138px) + 8px);
    max-height:calc(100vh - 52px - var(--mon-h,138px) - 26px);
    overflow-y:auto;
  }
  .sim-wrap > .rail{grid-column:2;grid-row:1;margin:0 0 14px}
  .sim-wrap > .window{grid-column:2;grid-row:2}

  /* The chart is a scroll container now, so its absolutely-positioned tab can
     no longer hang over the top edge — it would be clipped. Bring it inside. */
  .sim-wrap > .chart{padding-top:34px}
  .sim-wrap > .chart .chart-tab{top:12px;transform:none}
}

.chart{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px 18px;margin-top:8px;
}
.chart-tab{
  position:absolute;top:-1px;left:20px;transform:translateY(-50%);
  background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:3px 13px;
  font-family:var(--mono);font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--mute);
}
.chart-body p{
  color:var(--ink-2);font-size:var(--t-body);line-height:1.72;margin-bottom:11px;
  animation:vigIn .55s var(--ease) both;
}
@keyframes vigIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chart-body p:last-child{margin-bottom:0}
/* an EKG (or any tracing) dropped into a vignette — click to view full size */
.chart-body img{
  display:block;width:100%;height:auto;margin-top:6px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff;
  cursor:zoom-in;transition:.2s var(--ease);
}
.chart-body img:hover{border-color:var(--accent-line)}
.imgzoom{
  position:fixed;inset:0;z-index:90;background:rgba(3,6,10,.93);
  display:flex;align-items:center;justify-content:center;padding:3vh 3vw;
  cursor:zoom-out;animation:screenIn .22s var(--ease) both;
}
.imgzoom img{max-width:100%;max-height:94vh;border-radius:var(--r-sm);background:#fff}
.imgzoom .iz-cap{
  position:absolute;bottom:14px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--mute);
}

.labs{
  margin-top:16px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel-2);padding:13px 16px;transition:.4s var(--ease);
}
.labs.pending{opacity:.55}
.labs.resulted{border-color:rgba(255,176,32,.4);background:rgba(255,176,32,.055)}
.labs-head{
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--mute);
}
.labs.resulted .labs-head{color:var(--amber)}
.labs-dot{width:7px;height:7px;border-radius:50%;background:var(--faint);flex-shrink:0}
.labs.pending .labs-dot{animation:blink 1.25s ease-in-out infinite}
.labs.resulted .labs-dot{background:var(--amber);box-shadow:0 0 9px var(--amber);animation:none}
.labs-body{display:none;flex-wrap:wrap;gap:7px;margin-top:11px}
.labs.resulted .labs-body{display:flex}
.lab-chip{
  font-family:var(--mono);font-size:var(--t-mono);background:var(--panel);border:1px solid var(--line);
  border-radius:7px;padding:5px 11px;color:var(--ink-2);
  animation:labIn .38s var(--ease) both;
}
@keyframes labIn{from{opacity:0;transform:translateY(-7px) scale(.94)}to{opacity:1;transform:none}}

/* window rail */
.rail{display:flex;gap:6px;margin:20px 0 14px}
.rail-seg{
  flex:1;height:4px;border-radius:3px;background:var(--panel-3);position:relative;overflow:hidden;
  transition:.3s var(--ease);
}
.rail-seg.done{background:var(--ok)}
.rail-seg.done.timeout{background:var(--amber)}
.rail-seg.on{background:var(--accent);box-shadow:0 0 10px var(--accent-line)}

/* active window */
.window{position:relative}
.wcard{animation:wIn .45s var(--ease) both}
@keyframes wIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.w-head{display:flex;align-items:center;gap:11px;margin-bottom:14px;flex-wrap:wrap}
.w-num{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:800;
}
.w-title{font-size:var(--t-title);font-weight:700;letter-spacing:-.3px}
.w-kind{
  font-family:var(--mono);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--line);border-radius:20px;padding:2px 9px;
}
.w-life{margin-left:auto}
.w-life .btn{padding:7px 14px;font-size:12.5px;border-color:rgba(255,176,32,.45);background:rgba(255,176,32,.12);color:#FFDFA6}
.w-life .btn:hover{background:rgba(255,176,32,.22)}
.w-life .btn:disabled{opacity:.3}

/* the role-play line — a radio call */
.radio{
  display:flex;gap:13px;background:var(--panel-2);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:14px 16px;margin-bottom:16px;
}
.radio-av{
  flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--panel-3);
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:17px;
}
.radio-who{
  font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);margin-bottom:3px;
}
.radio-txt{font-size:var(--t-body);color:var(--ink-2);line-height:1.62}
.radio-wave{
  display:inline-flex;gap:2px;align-items:flex-end;height:10px;margin-left:7px;vertical-align:middle;
}
.radio-wave i{width:2px;background:var(--accent);border-radius:1px;animation:wv .9s ease-in-out infinite}
.radio-wave i:nth-child(1){height:4px;animation-delay:0s}
.radio-wave i:nth-child(2){height:9px;animation-delay:.15s}
.radio-wave i:nth-child(3){height:6px;animation-delay:.3s}
.radio-wave i:nth-child(4){height:10px;animation-delay:.45s}
@keyframes wv{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

.w-prompt{font-size:var(--t-lead);color:var(--ink);font-weight:600;margin-bottom:13px}

/* ---- order entry — one written block, committed as a whole ---- */
.orders{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;transition:.2s var(--ease);
}
.orders.focus{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.orders textarea{
  width:100%;min-height:clamp(150px,26vh,300px);
  background:none;border:none;outline:none;resize:vertical;
  font-size:var(--t-body);line-height:1.7;color:var(--ink);
}
.orders textarea::placeholder{color:var(--faint)}
#ordCount b,#demoCount b{color:var(--accent)}

/* ---- prose entry (family / sign-out / pearls) ---- */
.prose{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;transition:.2s var(--ease);
}
.prose.focus{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.prose textarea{
  width:100%;min-height:clamp(150px,26vh,300px);background:none;border:none;outline:none;resize:vertical;
  font-size:var(--t-body);line-height:1.7;color:var(--ink);
}
.prose textarea::placeholder{color:var(--faint)}
.prose-foot{
  display:flex;justify-content:space-between;align-items:center;margin-top:9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);
}

.w-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.w-hint{font-size:12.5px;color:var(--faint);font-style:italic;max-width:460px}

/* ================================= debrief ============================== */
.db-wrap{max-width:min(1500px,92vw);margin:0 auto;padding:clamp(26px,5vh,48px) var(--pad) 90px}
.db-hero{
  position:relative;overflow:hidden;text-align:center;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:34px 24px 30px;
}
.db-hero.ok{border-color:rgba(61,220,151,.4)}
.db-hero.part{border-color:rgba(255,176,32,.4)}
.db-hero.low{border-color:rgba(255,77,94,.42)}
.db-hero .dbh-glow{
  position:absolute;left:50%;top:-40%;width:130%;height:130%;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,var(--sc,rgba(61,220,151,.16)) 0%,transparent 58%);
  pointer-events:none;
}
.db-kick{
  position:relative;font-family:var(--mono);font-size:10.5px;letter-spacing:3.2px;
  text-transform:uppercase;color:var(--mute);
}
.db-num{
  position:relative;font-size:clamp(64px,15vw,104px);font-weight:850;line-height:1;letter-spacing:-4px;
  margin:10px 0 2px;font-variant-numeric:tabular-nums;
}
.db-hero.ok .db-num{color:var(--ok)}
.db-hero.part .db-num{color:var(--amber)}
.db-hero.low .db-num{color:var(--crit)}
.db-num sup{font-size:.36em;font-weight:700;letter-spacing:0;vertical-align:super;margin-left:2px}
.db-cap{position:relative;font-size:14.5px;color:var(--ink-2)}
.db-msg{position:relative;font-size:16px;color:var(--ink);margin-top:14px;font-weight:600}
.db-stats{
  position:relative;display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:20px;
}
.db-stat{
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:9px 14px;min-width:96px;
}
.db-stat .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint)}
.db-stat .v{display:block;font-family:var(--mono);font-size:17px;font-weight:800;margin-top:2px}
.db-stat .v.ok{color:var(--ok)} .db-stat .v.bad{color:var(--crit)} .db-stat .v.warn{color:var(--amber)}
.db-disc{
  position:relative;margin-top:18px;font-size:11.5px;color:var(--faint);font-family:var(--mono);
  letter-spacing:.4px;line-height:1.6;
}

.dbc{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;margin-top:16px;border-left:4px solid var(--line-2);
  animation:cardIn .45s var(--ease) both;
}
.dbc.ok{border-left-color:var(--ok)}
.dbc.part{border-left-color:var(--amber)}
.dbc.low{border-left-color:var(--crit)}
.dbc-head{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--mute);
}
.dbc-verdict{font-size:16px;font-weight:700;margin-bottom:10px;letter-spacing:-.2px}
.dbc.ok .dbc-verdict{color:var(--ok)}
.dbc.part .dbc-verdict{color:var(--amber)}
.dbc.low .dbc-verdict{color:var(--crit)}
.dbc-score{
  font-family:var(--mono);font-size:12.5px;color:var(--ink-2);margin-bottom:13px;letter-spacing:.5px;
}
.yours{
  background:var(--bg-2);border:1px dashed var(--line);border-radius:var(--r-sm);
  padding:11px 14px;margin-bottom:14px;
}
.yours .yk{
  font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--faint);margin-bottom:7px;
}
.yours .ytxt{font-size:14px;color:var(--ink-2);white-space:pre-wrap;line-height:1.6}
.yours .ychips{display:flex;flex-wrap:wrap;gap:6px}
.yours .ychip{
  font-size:13px;background:var(--panel-3);border:1px solid var(--line);
  border-radius:7px;padding:4px 9px;color:var(--ink-2);
}
.rub{list-style:none;display:grid;gap:1px}
.rub li{
  display:flex;gap:11px;align-items:flex-start;padding:8px 0;font-size:14.2px;
  border-bottom:1px solid rgba(255,255,255,.045);line-height:1.55;
}
.rub li:last-child{border-bottom:none}
.rub li .ic{flex-shrink:0;width:17px;text-align:center;font-weight:800;font-size:13px;margin-top:1px}
.rub li.hit{color:var(--ink)} .rub li.hit .ic{color:var(--ok)}
.rub li.gap{color:var(--ink-2)} .rub li.gap .ic{color:var(--mute)}
.rub li.critgap{color:#FFD3D7} .rub li.critgap .ic{color:var(--crit)}
.rub li.harm{color:#FFD3D7} .rub li.harm .ic{color:var(--crit)}
.rub li.held{color:#BCEFD8} .rub li.held .ic{color:var(--ok)}
.rub li b{color:inherit}
.rub li .why{display:block;color:var(--mute);font-size:13px;margin-top:2px}

.model{
  margin-top:14px;background:var(--panel-2);border:1px solid var(--line);
  border-left:3px solid var(--violet);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:13px 16px;font-size:14.2px;color:var(--ink-2);line-height:1.68;
}
.model .mk{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--violet);margin-bottom:6px;
}
.model b{color:var(--ink)} .model em{color:var(--amber);font-style:normal}

.refs{margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px}
.refs h4{
  font-family:var(--mono);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--mute);margin-bottom:11px;
}
.refs ul{list-style:none}
.refs li{
  position:relative;padding:5px 0 5px 18px;font-size:13px;color:var(--ink-2);line-height:1.55;
}
.refs li:before{content:"▸";position:absolute;left:0;color:var(--accent)}

.db-nav{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px}

/* ================================== toast =============================== */
.toast-host{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;
}
.toast{
  background:var(--panel-3);border:1px solid var(--line-2);border-radius:11px;
  padding:11px 18px;font-size:14px;color:var(--ink);
  box-shadow:0 10px 34px rgba(0,0,0,.55);
  animation:toastIn .32s var(--ease) both;
}
.toast.warn{border-color:rgba(255,176,32,.5);background:rgba(60,42,10,.96);color:#FFDFA6}
.toast.crit{border-color:rgba(255,77,94,.5);background:rgba(62,16,22,.96);color:#FFD3D7}
.toast.out{animation:toastOut .28s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-8px) scale(.97)}}

/* ============================== ecg svg ================================= */
.ecg-svg{display:block;width:100%;height:100%}
.ecg-trace{fill:none;stroke:var(--ecg);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(61,220,151,.55))}
.ecg-move{animation:ecgSweep var(--beat,5s) linear infinite}
@keyframes ecgSweep{from{transform:translateX(0)}to{transform:translateX(var(--sweep,-800px))}}

/* ================================ responsive ============================ */
@media (max-width:720px){
  .mon-body{gap:12px;padding:2px 16px 12px}
  .mon-clock{width:62px;height:62px}
  .ring{width:62px;height:62px}
  .ring-num{font-size:19px;padding-bottom:7px}
  .ring-cap{bottom:9px;font-size:7.5px}
  .sim-wrap,.brief-wrap,.sel-wrap,.db-wrap{padding-left:16px;padding-right:16px}
  .chart{padding:18px 16px 16px}
  .vt{min-width:66px;padding:4px 9px}
  .vt .vt-v{font-size:13.5px}
  .bcard h3{font-size:22px}
  .tb-mid{display:none}
  .w-actions{flex-direction:column;align-items:stretch}
  .w-actions .btn{width:100%}
  .w-hint{max-width:none}
}

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

/* ================================== print =============================== */
@media print{
  .env,.topbar,.monitor,.db-nav,.toast-host{display:none!important}
  body{background:#fff;color:#111}
  .screen{display:block!important}
  #scr-boot,#scr-brief,#scr-select,#scr-sim{display:none!important}
  .dbc,.db-hero,.refs{background:#fff;border-color:#ccc;break-inside:avoid}
  .db-num{color:#111!important}
}