/* ===== StridorICU projector / instructor view =====
[hidden]{display:none!important}
   Sized from the screen, not in pixels, so it fills a 1024×768 projector and a 1920×1080 one the same way. */
html{font-size:clamp(12px,1.06vw,26px)}
body.teach{margin:0;background:#000;color:var(--s-ink);font-family:var(--s-font-sans);overflow:hidden;height:100vh}
.tscreen{min-height:100vh;display:grid;place-items:center;background:radial-gradient(900px 500px at 50% -10%,rgba(var(--s-teal-rgb),.09),transparent 60%),var(--s-bg-0)}
.tbox{width:min(440px,92vw);padding:34px 32px;border-radius:22px;border:1px solid var(--s-line-2);background:linear-gradient(var(--s-panel-hi),var(--s-panel-lo));box-shadow:var(--s-elev-3)}
.tbox.wide{width:min(980px,94vw)}
.word.big{font-size:34px}
.tbox .lead{color:var(--s-ink-2);margin:6px 0 20px;font-size:15px}
.tbox label{display:block;font:600 11px var(--s-font-mono);letter-spacing:.1em;color:var(--s-ink-3);text-transform:uppercase;margin-bottom:6px}
.tbox input{width:100%;height:46px;border-radius:12px;border:1px solid var(--s-line-2);background:var(--s-bg-0);color:var(--s-ink);font:600 16px var(--s-font-sans);padding:0 14px;margin-bottom:12px}
.tbox .go{width:100%;height:46px;font-size:15px}
.err{color:var(--s-danger-ink);font-size:13px;min-height:18px;margin:10px 0 0}
.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.pcard{display:flex;flex-direction:column;gap:6px;text-align:left;padding:18px 20px;border-radius:16px;border:1px solid var(--s-line-2);background:var(--s-bg-2);color:var(--s-ink);font:inherit}
.pcard:hover{border-color:var(--s-teal);background:var(--s-bg-3)}
.pcard small{font:600 11px var(--s-font-mono);letter-spacing:.08em;color:var(--s-teal);text-transform:uppercase}
.pcard b{font-size:19px}.pcard span{color:var(--s-ink-2);font-size:13.5px;line-height:1.45}
.pcard em{font-style:normal;margin-top:6px;color:var(--s-teal);font-weight:700;font-size:13px}
.rejoin{margin-top:16px}
/* the projector layout */
.present{height:100vh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#000}
.tb{display:flex;align-items:center;gap:1.6rem;padding:.7rem 1.4rem;border-bottom:1px solid #18222f;background:#05080d}
.tb .word{font-size:1.45rem}
.tpt b{display:block;font-size:1.35rem;line-height:1.1}.tpt span{font:500 .8rem var(--s-font-mono);color:#7f93a6;letter-spacing:.06em;text-transform:uppercase}
.tstage small,.ttime small{display:block;font:600 .68rem var(--s-font-mono);letter-spacing:.12em;color:#6d8296}
.tstage b{font-size:1.2rem}.ttime b{font:700 1.35rem var(--s-font-mono);color:var(--s-teal)}
.tjoin{display:flex;align-items:center;gap:.9rem;background:#0b131c;border:1px solid #22344a;border-radius:14px;padding:.35rem .5rem .35rem 1rem;color:var(--s-ink);cursor:pointer}
.tjl{text-align:right}.tjl small{display:block;font:600 .65rem var(--s-font-mono);letter-spacing:.1em;color:#6d8296;text-transform:uppercase}.tjl b{font:600 .95rem var(--s-font-mono)}
.tjoin em{font:800 2.1rem/1 var(--s-font-mono);font-style:normal;letter-spacing:.12em;color:var(--s-teal)}
.tqr{width:3.4rem;height:3.4rem;background:#fff;border-radius:6px;padding:2px}.tqr svg{width:100%;height:100%;display:block}
.tcount{text-align:center;position:relative;padding-right:.4rem}.tcount b{display:block;font:800 1.8rem/1 var(--s-font-mono)}.tcount small{font:600 .65rem var(--s-font-mono);letter-spacing:.1em;color:#6d8296;text-transform:uppercase}
.tcount .conndot{position:absolute;top:0;right:-.2rem}
.tmain{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:1rem;padding:1rem 1.2rem;min-height:0;position:relative}
.tleft{display:grid;grid-template-rows:minmax(0,1.35fr) minmax(0,1fr);gap:1rem;min-height:0}
body.tnoscal .tleft{grid-template-rows:minmax(0,1fr) auto}
body.tnoscal #scal{display:none}
.tmon{border-radius:16px;min-height:0}
.tmon .mon-pt{font-size:1.05rem}.tmon .mon-pt span{font-size:.7rem}
.tmon .nb-val{font-size:clamp(28px,4.4vh,72px)}.tmon .nb-val.bpval{font-size:clamp(18px,2.8vh,42px)}
.tmon .mrow .numblock{width:28%}
.tmon .wlbl{font-size:.8rem}.tmon .nb-lbl{font-size:.85rem}
.tvent{display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;min-height:0;border-radius:16px}
.tvent .vhead{grid-template-columns:repeat(5,minmax(0,1fr));padding:.8rem 1rem}
.tvent .vhead .mode b{font-size:1.1rem}.tvent .ro b{font-size:clamp(18px,2.6vh,40px)}.tvent .ro .k{font-size:.7rem}
.tvent .novent{padding:1rem;font-size:1rem}
.tvent #scal{padding:.4rem .7rem .7rem;min-height:0;overflow:hidden}
/* projector: scalars OR loops (L / button), each sized to the panel: no clipping, no scrollbar */
.tvent{position:relative}
.tvent #scal.vs-scope{display:grid;grid-template-rows:minmax(0,1fr)}
.tvent #scal.vs-scope .scalars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;min-height:0}
.tvent #scal.vs-scope .scal{display:flex;flex-direction:column;min-height:0;padding:6px 8px 2px}
.tvent #scal.vs-scope .scal canvas{flex:1 1 0;height:auto;min-height:0}
.tvent #scal.vs-scope .loops{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;min-height:0}
body.tloops .tvent #scal.vs-scope .scalars{display:none}
body.tloops .tvent #scal.vs-scope .loops{display:grid}
.tvent #scal.vs-scope .loop{display:flex;flex-direction:column;min-height:0;padding:6px 8px 4px}
.tvent #scal.vs-scope .loop canvas{flex:1 1 0;height:auto;min-height:0}
.tvent #scal.vs-scope .loop .scal-lab{font-size:10px;margin-bottom:2px}
.vtog{position:absolute;top:.6rem;right:.8rem;z-index:3;height:1.9rem;padding:0 .8rem;border-radius:9px;border:1px solid #2a3a4e;background:#0f1924;color:var(--s-ink-2);font:600 .8rem var(--s-font-sans);cursor:pointer}
.vtog:hover{color:var(--s-ink);border-color:var(--s-teal)}
body.tnoscal .vtog{display:none}
/* one-row ventilator header on the projector */
.tvent .vhead{grid-template-columns:minmax(0,1.5fr) repeat(5,minmax(0,1fr));align-items:end;padding:.6rem 6.5rem .5rem 1rem}
.tvent .vhead .mode{grid-column:auto;flex-direction:column;align-items:flex-start;gap:2px;margin:0}
.tvent .vhead .mode span{display:block;font-size:.62rem}
.tright{border-radius:18px;padding:1.2rem 1.5rem;display:flex;flex-direction:column;min-height:0;overflow:auto}
.tchart{position:absolute;inset:1rem 1.2rem;width:calc(100% - 2.4rem);height:calc(100% - 2rem);border:1px solid #1d2a38;border-radius:14px;background:var(--s-bg-0)}
.tmain.chartmode .tleft,.tmain.chartmode .tright{visibility:hidden}
/* question card */
.qnav{display:flex;gap:.4rem;margin-bottom:1rem;flex-wrap:wrap}
.qdot{min-width:2.3rem;height:2.3rem;padding:0 .7rem;border-radius:10px;border:1px solid #2a3a4e;background:#0b121b;color:#9fb0c2;font:700 .95rem var(--s-font-mono)}
.qdot.open{border-color:var(--s-teal);color:var(--s-teal);box-shadow:0 0 0 2px rgba(var(--s-teal-rgb),.25)}
.qdot.done{background:rgba(var(--s-ok-rgb),.12);border-color:rgba(var(--s-ok-rgb),.5);color:var(--s-ok)}
.qdot.cur{outline:2px solid #fff;outline-offset:1px;color:#fff}
.qdot.ov{font-family:var(--s-font-sans);font-size:.85rem}
.kick{font:700 .8rem var(--s-font-mono);letter-spacing:.12em;color:var(--s-teal);margin-bottom:.5rem}
.tright h1{margin:0 0 1rem;font-size:1.9rem;line-height:1.25;letter-spacing:-.01em}
.tright h1.stem{font-size:clamp(1.4rem,2.1vw,2.5rem)}
.answers{display:flex;flex-direction:column;gap:.55rem}
.arow{display:grid;grid-template-columns:2.4rem minmax(0,1fr) 22% 3.6rem;align-items:center;gap:.8rem;padding:.6rem .8rem;border-radius:12px;border:1px solid #223246;background:#0a1119}
.arow>i{width:2.4rem;height:2.4rem;border-radius:9px;display:grid;place-items:center;font:800 1.1rem var(--s-font-mono);font-style:normal;background:#132030;color:#cfe0ef}
.arow .atext span{font-size:clamp(1rem,1.35vw,1.6rem);line-height:1.3}
.arow .atext .why{display:block;margin-top:.4rem;font-size:clamp(.85rem,1vw,1.15rem);line-height:1.45;color:#cdeee0}
.arow .abar{height:1.1rem;border-radius:6px;background:#132030;overflow:hidden}
.arow .abar b{display:block;height:100%;background:linear-gradient(90deg,#2a7fbf,#5cb4ff);border-radius:6px;transition:width .4s}
.arow em{font:800 1.2rem var(--s-font-mono);font-style:normal;text-align:right;color:#cfe0ef}
.arow.isright{border-color:var(--s-ok);background:rgba(var(--s-ok-rgb),.08)}
.arow.isright>i{background:var(--s-ok);color:#03251a}
.arow.isright .abar b{background:linear-gradient(90deg,#1aa874,#2fe3a0)}
.arow.dim{opacity:.55}
.waiting{display:flex;align-items:baseline;gap:.8rem;padding:1rem 0}.waiting b{font:800 4.5rem/1 var(--s-font-mono);color:var(--s-teal)}.waiting span{font-size:1.4rem;color:var(--s-ink-2)}
.calcans{padding:1rem 1.2rem;border-radius:14px;border:1px solid var(--s-ok);background:rgba(var(--s-ok-rgb),.07);margin-bottom:.6rem}
.calcans small{font:700 .75rem var(--s-font-mono);letter-spacing:.12em;color:var(--s-ok);text-transform:uppercase}
.calcans b{display:block;font:800 clamp(2rem,3.4vw,3.6rem)/1.1 var(--s-font-mono);color:#eafff6}.calcans b span{font-size:.45em;color:var(--s-ink-2)}
.calcans p{margin:.5rem 0 0;font-size:clamp(.95rem,1.15vw,1.35rem);line-height:1.5;color:#d6e6f2}.calcans p.ok{color:#b9f0d9}
.note{margin-top:.6rem;padding:.8rem 1rem;border-radius:12px;background:#0d1621;border:1px solid #223246;font-size:clamp(.95rem,1.1vw,1.3rem);line-height:1.5}
.pstat{display:flex;gap:1.4rem;align-items:center;margin-top:auto;padding-top:1rem;font:600 1rem var(--s-font-mono);color:#8ea2b6}
.pstat .live{color:var(--s-teal);animation:flash 1.4s infinite}.pstat .rev{color:var(--s-ok)}
.ovw .brief{font-size:clamp(1.05rem,1.4vw,1.7rem);line-height:1.55;color:#d8e2ec;margin:0 0 1rem}
.ovw .what{padding:.9rem 1.1rem;border-radius:14px;background:rgba(var(--s-blue-rgb),.08);border:1px solid rgba(var(--s-blue-rgb),.35);font-size:clamp(.95rem,1.15vw,1.35rem);line-height:1.5;margin-bottom:1rem}
.jobs{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.jobs button{width:100%;text-align:left;padding:.75rem 1rem;border-radius:12px;border:1px solid #223246;background:#0a1119;color:var(--s-ink);font:inherit;font-size:clamp(1rem,1.25vw,1.5rem)}
.jobs button span{display:block;font:700 .7rem var(--s-font-mono);letter-spacing:.12em;color:var(--s-teal);margin-bottom:.2rem}
/* control bar (instructor) */
.tctl{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.6rem 1.2rem;border-top:1px solid #18222f;background:#05080d;flex-wrap:wrap}
.tctl .grp{display:flex;gap:.45rem}
.tctl button{height:2.6rem;padding:0 1rem;border-radius:10px;border:1px solid #2a3a4e;background:#0d1520;color:#d6e2ee;font:600 .95rem var(--s-font-sans);white-space:nowrap}
.tctl button:hover:not(:disabled){border-color:#4a6580;background:#132030}
.tctl button:disabled{opacity:.35}
.tctl button.on{border-color:var(--s-teal);color:var(--s-teal)}
.tctl button.pri{background:var(--s-teal);color:var(--s-on-teal);border-color:var(--s-teal);font-weight:800;min-width:9rem}
.tctl button.pri.rev{background:#2fe3a0;border-color:#2fe3a0}
.tctl button.arm{background:var(--s-amber);color:var(--s-on-amber);border-color:var(--s-amber)}
/* overlays */
.tover{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:auto;padding:24px}
.ojoin{display:flex;align-items:center;gap:4vw;padding:3vw}
.ojoin .ql{width:min(42vh,36vw);height:min(42vh,36vw);background:#fff;border-radius:18px;padding:12px}.ojoin .ql svg{width:100%;height:100%;display:block}
.ojoin .jt small{font:700 1.2rem var(--s-font-mono);letter-spacing:.14em;color:var(--s-teal);text-transform:uppercase}
.ojoin .jt b{display:block;font:700 2.6rem var(--s-font-mono);margin:.3rem 0 1.2rem}
.ojoin .jt p{font-size:1.4rem;color:var(--s-ink-2);margin:0}
.ojoin .jt em{display:block;font:800 7rem/1.05 var(--s-font-mono);font-style:normal;letter-spacing:.14em;color:var(--s-teal);text-shadow:0 0 30px rgba(var(--s-teal-rgb),.4)}
.ojoin .jt .fine{font-size:1rem;margin-top:1rem;color:var(--s-ink-3)}
.ox{position:fixed;right:1.5rem;bottom:1.5rem;height:2.8rem;padding:0 1.2rem;border-radius:12px;border:1px solid #2a3a4e;background:#0d1520;color:var(--s-ink);font:600 1rem var(--s-font-sans)}
.obrief{width:min(1100px,88vw);max-height:88vh;overflow:auto;padding:2.4rem 2.8rem;border-radius:24px;border:1px solid rgba(var(--s-teal-rgb),.35);background:linear-gradient(#0f1823,#0a1018)}
.obrief .what{padding:1.1rem 1.4rem;border-radius:16px;background:rgba(var(--s-blue-rgb),.08);border:1px solid rgba(var(--s-blue-rgb),.35);margin-bottom:1.6rem}
.obrief .what small{font:700 .85rem var(--s-font-mono);letter-spacing:.12em;color:var(--s-blue)}
.obrief .what p{font-size:1.55rem;line-height:1.5;margin:.5rem 0 0;color:#e2ecf5}
.obrief .kick{font-size:.95rem}
.obrief h1{font-size:2.8rem;margin:.3rem 0 .8rem}
.obrief p{font-size:1.5rem;line-height:1.55;color:#d8e2ec;margin:0 0 .8rem}.obrief .role{color:var(--s-teal);font-weight:600}
.obrief ol{font-size:1.45rem;line-height:1.6;margin:0 0 1.4rem}
.obrief .go{font-size:1.2rem;padding:.8rem 1.8rem}
.omenu{display:flex;flex-direction:column;gap:.7rem;width:min(480px,90vw);padding:1.6rem;border-radius:18px;background:#0d1520;border:1px solid #2a3a4e}
.omenu h2{margin:0 0 .4rem}.omenu button{height:3rem;border-radius:12px;border:1px solid #2a3a4e;background:#132030;color:var(--s-ink);font:600 1rem var(--s-font-sans)}
.omenu .ox{position:static}
.arow.nobar{grid-template-columns:2.4rem minmax(0,1fr)}
.tvent .novent{grid-column:1/-1}

.thow{margin:-.3rem 0 1rem;padding:.7rem 1rem;border-radius:12px;background:rgba(var(--s-blue-rgb),.07);border:1px solid rgba(var(--s-blue-rgb),.35)}
.thow b{display:block;font:700 .75rem var(--s-font-mono);letter-spacing:.1em;color:var(--s-blue);text-transform:uppercase;margin-bottom:.3rem}
.thow span{display:block;font-size:clamp(.95rem,1.2vw,1.4rem);line-height:1.45;color:#d6e6f5}

/* extra questions: lighter so the instructor can skip them */
.qdot.ex:not(.cur):not(.done):not(.open){opacity:.55;border-style:dashed}
.jobs li.ex>button{opacity:.7}
.jobs em.hid{font-style:normal;color:var(--s-ink-3)}

.signout{display:block;margin:18px auto 0;background:none;border:0;color:var(--s-ink-3);font:600 13px var(--s-font-sans);text-decoration:underline;cursor:pointer}
.signout:hover{color:var(--s-ink)}

/* backward design: objectives */
.klo{margin-left:10px;padding:2px 8px;border-radius:999px;border:1px solid rgba(var(--s-blue-rgb),.45);color:var(--s-blue);font-weight:600;letter-spacing:.04em}
.sobj{margin:4px 0 16px;padding:12px 14px;border-radius:12px;border:1px solid var(--s-line-2);background:rgba(var(--s-blue-rgb),.05);display:grid;gap:6px}
.sobj b{font:700 11px var(--s-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--s-ink-3)}
.sobj span{font-size:15px;line-height:1.4;color:var(--s-ink-2)}
.sobj i,.oresults i{font-style:normal;font:700 12px var(--s-font-mono);color:var(--s-blue);margin-right:8px}
.oresults{width:min(1100px,94vw);max-height:90vh;overflow:auto;padding:24px 26px;border-radius:18px;border:1px solid #2a3a4e;background:#0d1520;display:grid;gap:0}
.oresults h3{margin:0 0 12px;font-size:22px}
.orow{display:grid;grid-template-columns:minmax(0,1fr) 110px 110px;gap:16px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--s-line)}
.orow.oh{font:600 11px var(--s-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--s-ink-3);padding-top:4px}
.orow .ot{font-size:16px;line-height:1.4;color:var(--s-ink-2)}
.orow .on,.orow .op{text-align:right;font:700 18px var(--s-font-mono);color:var(--s-ink-2)}
.orow.oh .on,.orow.oh .op{font:600 11px var(--s-font-mono)}
.orow .op.ok{color:var(--s-ok)}.orow .op.mid{color:var(--s-amber)}.orow .op.low{color:#ff6b6b}
.oresults .ox{position:static;margin-top:14px;justify-self:end;height:2.8rem;padding:0 1.4rem;border-radius:12px;border:1px solid #2a3a4e;background:#132030;color:var(--s-ink);font:600 1rem var(--s-font-sans)}
.oresults .fine{margin:8px 0 0;font-size:12px;color:var(--s-ink-3)}

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