/* H-SIM remote instructor platform — one sheet for every page.
   Clinical dark: the same world the iPads live in, so a trainer moving between
   the rig and this does not feel they have changed product. */
:root {
  --ground:#08080a; --panel:#111114; --card:#17171c; --raise:#1e1e25;
  --line:#26262e; --text:#f2f2f4; --muted:#8b8b96; --dim:#5c5c67;
  --accent:#fa4444; --ok:#3ddc6f; --warn:#f5b90a;
  --hr:#3ddc6f; --spo2:#f5d90a; --abp:#ff4d4d; --cvp:#7fd4e8; --etco2:#e8e8f0; --pa:#c58cf0;
  --r:12px;
}
* { box-sizing:border-box; }
/* `hidden` must win. A display rule on the same element silently beats the
   attribute's default, which is how the controls stayed on screen with nothing
   connected to control. */
[hidden] { display:none !important; }
html,body { height:100%; }
body {
  margin:0; background:var(--ground); color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--text); }
h1,h2,h3 { margin:0; font-weight:700; letter-spacing:-.01em; }
.muted { color:var(--muted); }
.tiny { font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); font-weight:600; }

/* ---------- chrome ---------- */
.top {
  display:flex; align-items:center; gap:14px; padding:0 18px; min-height:60px;
  flex-wrap:wrap; row-gap:0;
  background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:30;
}
.brand { display:flex; flex-direction:column; line-height:1.15; }
.brand b { font-size:16px; letter-spacing:.3px; }
.brand span { font-size:10.5px; color:var(--muted); letter-spacing:.9px; text-transform:uppercase; }
.top nav { display:flex; gap:6px; margin-left:14px; }
.top nav a {
  padding:7px 13px; border-radius:8px; text-decoration:none; font-size:13.5px;
  color:var(--muted); font-weight:500;
}
.top nav a.on, .top nav a:hover { background:var(--raise); color:var(--text); }
.spacer { margin-left:auto; }

.pill { font-size:12px; font-weight:600; padding:6px 13px; border-radius:999px;
        background:var(--raise); color:var(--muted); }
.pill.ok{background:rgba(61,220,111,.14);color:var(--ok)}
.pill.warn{background:rgba(245,185,10,.14);color:var(--warn)}
.pill.bad{background:rgba(250,68,68,.16);color:var(--accent)}

/* ---------- controls ---------- */
input,select,textarea {
  background:var(--card); border:1px solid var(--line); color:var(--text);
  border-radius:9px; padding:10px 12px; font:inherit; width:100%;
}
input:focus,select:focus { outline:2px solid var(--accent); outline-offset:1px; }
label.f { display:flex; flex-direction:column; gap:6px; }
label.f > span { font-size:11px; letter-spacing:.7px; text-transform:uppercase; color:var(--muted); font-weight:600; }
button {
  background:var(--accent); color:#fff; border:0; border-radius:9px;
  padding:11px 20px; font:inherit; font-weight:600; cursor:pointer;
}
button.ghost { background:var(--raise); color:var(--text); }
button.line { background:transparent; border:1px solid var(--line); color:var(--muted); }
button:disabled { opacity:.38; cursor:default; }
button.sm { padding:7px 13px; font-size:13px; }

/* ---------- surfaces ---------- */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.card > h2 { padding:13px 18px; font-size:11px; letter-spacing:1px; text-transform:uppercase;
             color:var(--muted); border-bottom:1px solid var(--line); }
.card .body { padding:16px 18px; }
.card .foot { display:flex; align-items:center; gap:12px; padding:13px 18px; border-top:1px solid var(--line); }

table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:11px; letter-spacing:.7px; text-transform:uppercase;
     color:var(--muted); padding:10px 18px; border-bottom:1px solid var(--line); font-weight:600; }
td { padding:12px 18px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; }
tr:last-child td { border-bottom:0; }

/* ---------- the live glow ---------- */
body.live::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:80;
  box-shadow: inset 0 0 90px 8px rgba(250,68,68,.5);
  animation: breathe 2.1s ease-in-out infinite alternate;
}
@keyframes breathe { from{opacity:.32} to{opacity:.95} }
@media (prefers-reduced-motion: reduce){ body.live::before{animation:none;opacity:.6} }

#note { position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px);
        background:var(--raise); border:1px solid var(--line); padding:11px 20px;
        border-radius:999px; font-size:13px; opacity:0; transition:.25s;
        pointer-events:none; z-index:90; }
#note.show { opacity:1; transform:translate(-50%,0); }
.err { color:var(--accent); font-size:13px; min-height:19px; }

/* ============================================================
   THE THREE SCREENS
   Re-created so a trainer who knows H-SIM recognises them at once.
   ============================================================ */

.tabs { display:flex; gap:6px; }

/* One line above a screen saying what that screen can and cannot do. It is set
   quietly, because it is there for the instructor and not for the room. */
.screen-note { margin:0 0 11px; font-size:12.5px; line-height:1.5; color:var(--muted); max-width:92ch; }
.screen-note b { color:var(--text); }
.tabs button { background:var(--raise); color:var(--muted); border-radius:8px;
               padding:7px 15px; font-size:13.5px; font-weight:600; }
.tabs button.on { background:var(--accent); color:#fff; }

/* ---------- Haemodynamics Monitor ---------- */
.hm { background:#000; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
/* The readout column is sized for the widest thing this monitor ever prints in
   it — a three-digit-over-three-digit pressure. "188/104" measures 167px at 40px
   800 weight, and the old 210px track left it 37px short: the room read "188/10"
   at exactly the moment the number mattered, because .hm above clips the
   overflow (23 Sep 2026). 268px carries that with 21px to spare, and still
   carries a nine-character pair such as "72.8/50.9". The wave column is 1fr with
   its own min-width:0, so it simply yields the 58px; all six rows share the one
   track width, so the readouts stay in a column down the right-hand side. */
.hm-row { display:grid; grid-template-columns:1fr 268px; grid-template-rows:104px;
          border-bottom:1px solid #101015; }
.hm-wave { width:100%; height:104px; display:block; min-width:0; }
.hm-read { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
           align-content:center; gap:0 10px; padding:0 14px; border-left:1px solid #101015; }
.hm-read.alarm { background:#c00; }
.hm-k { font-size:19px; font-weight:600; grid-column:1; }
.hm-lim { font-size:12px; grid-column:1; opacity:.85; line-height:1.25; font-variant-numeric:tabular-nums; }
/* min-width:0 takes the automatic minimum off the value's track, so a reading
   wider than even the widened cell — a pressure someone typed to two decimals —
   leans left across its own label instead of pushing a digit out past the edge
   of the panel where it is clipped away. A crowded vital that can still be read
   in full is the right failure; a vital missing its last digit is not. The size
   is never reduced to make something fit (H-SIM CLAUDE.md, hard rule 1). */
.hm-v { grid-column:2; grid-row:1/3; align-self:center; justify-self:end; min-width:0;
        font-size:40px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.hm-s { grid-column:1/3; font-size:11px; opacity:.75; }
.hm .hr{color:var(--hr)} .hm .spo2{color:var(--spo2)} .hm .abp{color:var(--abp)}
.hm .pa{color:var(--pa)} .hm .cvp{color:var(--cvp)} .hm .etco2{color:var(--etco2)}
.hm-read.alarm, .hm-read.alarm * { color:#fff !important; }
.hm-foot { display:flex; align-items:center; gap:11px; padding:11px 14px; background:#000; }
.hm-alarm { background:#f5c33b; color:#111; font-size:15px; padding:5px 16px; border-radius:6px; }
.hm-foot .chip { border:1px solid #3a3a44; border-radius:999px; padding:5px 13px;
                 font-size:12.5px; color:#ddd; }
.hm-temp { margin-left:auto; font-size:14px; color:#eee; }

/* ---------- Multi-Function Monitor ---------- */
.mfm { display:grid; gap:13px; }
.pane { position:relative; background:#0e0e12; border:1px solid var(--line);
        border-radius:14px; padding:16px 16px 46px; }
.mfm-two { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.ribbon { position:absolute; left:0; bottom:0; padding:5px 20px 6px 16px;
          font-size:13px; color:#fff; border-radius:0 14px 0 13px; }
.ribbon.vent{background:linear-gradient(90deg,#9aa227,#0e0e12)}
.ribbon.ecmo{background:linear-gradient(90deg,#a81f2d,#0e0e12)}
.ribbon.iabp{background:linear-gradient(90deg,#b5651d,#0e0e12)}
.ribbon.imp{background:linear-gradient(90deg,#2b3fa8,#0e0e12)}
.ribbon.inv{background:linear-gradient(90deg,#1f8f3d,#0e0e12)}
.ribbon.meds{background:linear-gradient(90deg,#6b2fa8,#0e0e12)}
.vent .dials, .ecmo .dials { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start; }
.dial { width:88px; text-align:center; }
.dial-face { width:88px; height:88px; border-radius:50%; background:#1a1a20;
             border:3px solid #e08a1e; display:grid; place-items:center;
             font-size:20px; color:#cfcfd6; font-variant-numeric:tabular-nums; }
.dial.dim .dial-face { border-color:#4a4a55; }
.dial-label { font-size:10.5px; color:var(--muted); margin-top:7px; }
.strip { display:flex; gap:0; border-radius:9px; overflow:hidden; margin-bottom:14px; }
.strip > div { flex:1; padding:8px 12px; text-align:center; color:#fff; }
.strip b { display:block; font-size:12.5px; font-weight:700; }
.strip span { font-size:13px; font-weight:600; }
.strip.red{background:linear-gradient(90deg,#8d0f1c,#c0182a)}
.strip.amber{background:linear-gradient(90deg,#8a4a10,#d08a1e)}
.strip.blue{background:linear-gradient(90deg,#12246e,#2b3fa8)}
.mode-btn { background:#e6e6e8; color:#111; border-radius:12px; padding:22px 26px;
            text-align:center; min-width:150px; }
.mode-btn b { display:block; font-size:16px; } 
.mode-btn span { display:block; margin-top:16px; font-size:12px; background:#b9b9bd;
                 border-radius:0 0 12px 12px; margin:16px -26px -22px; padding:5px; }
.ie { margin-top:14px; background:#141419; border-radius:12px; padding:13px 16px; max-width:330px; }
.ie-row { display:flex; align-items:center; gap:11px; margin-bottom:9px; }
.ie-row b { width:14px; color:#ddd; }
.bar { flex:1; height:7px; background:#33333c; border-radius:999px; }
.bar i { display:block; height:100%; background:#e08a1e; border-radius:999px; }
.ie-label { text-align:center; font-size:14px; color:#ddd; margin-top:6px; }
.inv .btns { display:flex; gap:11px; flex-wrap:wrap; }
.btn { background:#e6e6e8; color:#111; border-radius:11px; padding:16px 20px;
       font-size:14.5px; font-weight:600; min-width:92px; text-align:center; }
.btn.tall { padding:26px 20px; }
.btn.small { padding:12px 16px; font-size:13px; }
.btn.val { background:#9a9a9f; }
.btn .sub { display:block; font-size:11px; font-weight:500; margin-top:9px; color:#444; }
.meds-body { min-height:120px; background:#141419; border-radius:11px; padding:14px;
             color:var(--muted); font-size:13px; }

/* The peer list is the first thing to give up room when the bar is tight —
   it is context, where the tabs and the sign-out are controls. */
#peers { max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:1180px){ #peers{display:none} }

/* ---------- Instructor Panel ---------- */
.ip { display:grid; gap:13px; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); }
.ip-pane { position:relative; background:#0e0e12; border:1px solid var(--line);
           border-radius:14px; padding:14px 14px 44px; }
.ip-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ip-btn { background:#dedee2; color:#111; border-radius:10px; padding:13px 10px;
          font-size:13px; font-weight:600; text-align:center; line-height:1.3;
          border:2px solid transparent; }
.ip-btn.wide { grid-column:1/3; }
.ip-btn.editable { cursor:pointer; }
/* The tiles this panel cannot drive. They keep the size and the place of the
   buttons beside them so the Instructor Panel is still recognisably itself, and
   they lose the material: flat, recessed and muted against the pale keys, which
   is the whole point. Before this, 26 of the 41 tiles were disabled buttons at
   75% opacity — near enough identical to the 15 live ones that the only way to
   learn which was which was to press them in front of a room (23 Sep 2026).
   The 2px border matches the buttons' so both sit on the same baseline. */
.ip-ro { background:#15151a; color:var(--muted); border:2px solid #23232b;
         border-radius:10px; padding:13px 10px; font-size:13px; font-weight:600;
         text-align:center; line-height:1.3; }
.ip-ro.wide { grid-column:1/3; }
.ip-btn.editable:hover { border-color:var(--accent); }
.ip-btn.staged { background:#bff0cd; border-color:var(--ok); }
.ip-ribbon { position:absolute; left:0; bottom:0; padding:5px 20px 6px 14px;
             font-size:12.5px; color:#fff; border-radius:0 14px 0 13px;
             background:linear-gradient(90deg,var(--rib),#0e0e12); }

/* ---------- demo mode ---------- */
body.demo .top { box-shadow: inset 0 -2px 0 var(--warn); }
.demo-flag { background:rgba(245,185,10,.16); color:var(--warn); font-weight:700; }
.demo-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
            padding:11px 22px; background:rgba(245,185,10,.10);
            border-bottom:1px solid rgba(245,185,10,.3); font-size:13px; color:var(--warn); }
.demo-bar select { width:auto; min-width:230px; background:#1c1a12;
                   border-color:rgba(245,185,10,.35); color:var(--text); }

/* ============================================================
   INSTRUCTOR PANEL — REAL TYPED CONTROLS (ip.js, 23 Sep 2026)
   The .ip-* rules above dressed 41 tiles that all opened the same
   text box. These dress one control per KIND, because the kind is
   what the old panel could not express and what made 26 of those
   tiles silently do nothing.
   Dark, calm, glass-trimmed — the same world the iPads live in. No
   emojis and no idle ambient animation: the only motion on this
   screen is a control answering a touch.
   ============================================================ */
.ipx { display:grid; gap:14px; }
.ipx-panel { position:relative; background:#0e0e12; border:1px solid var(--line);
             border-radius:14px; padding:14px 14px 42px; }
.ipx-head { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.ipx-head h3 { font-size:15px; letter-spacing:.2px; }
.ipx-subhead { font-size:10.5px; letter-spacing:1.1px; text-transform:uppercase;
               color:var(--muted); font-weight:700; margin:12px 0 7px; }
.ipx-row { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); }
.ipx-panelnote { margin-top:11px; font-size:12px; line-height:1.5; color:var(--muted);
                 border-left:2px solid var(--line); padding-left:10px; }
.ipx-ribbon { position:absolute; left:0; bottom:0; padding:5px 20px 6px 14px;
              font-size:12.5px; color:#fff; border-radius:0 14px 0 13px;
              background:linear-gradient(90deg,var(--rib),#0e0e12); }

/* ---------- one control ---------- */
.ipx-ctl { background:var(--card); border:1px solid var(--line); border-radius:12px;
           padding:11px 12px 10px; display:flex; flex-direction:column; gap:7px;
           min-width:0; }
.ipx-cap { font-size:13px; font-weight:700; line-height:1.25; }
/* The Waveforms rows carry their channel's ICU hue as a dot, the way the popup
   does — ECG green, SpO2 blue, ABP red, CVP amber, PA orange. */
.ipx-accented .ipx-cap::before { content:''; display:inline-block; width:8px; height:8px;
           border-radius:50%; background:var(--dot); margin-right:7px; vertical-align:1px; }
.ipx-scale { font-size:10.5px; color:var(--dim); letter-spacing:.2px; }
/* THE WIRE, ON EVERY CONTROL. A wrong field name was invisible for months.
   It is now the second line of every control on the screen. */
.ipx-wire { font:11.5px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
            color:var(--dim); word-break:break-all; }
.ipx-wire code { color:var(--muted); }
.ipx-wire b { color:#b9c7d6; font-weight:600; }
.ipx-wire.staged { color:var(--ok); }
.ipx-wire.staged b { color:var(--ok); }
.ipx-mark { color:var(--warn); margin-left:6px; }
.ipx-why { font-size:11.5px; line-height:1.5; color:var(--muted); }
.ipx-msg { font-size:11.5px; line-height:1.45; color:var(--dim); }
.ipx-msg.warn { color:var(--warn); }
.ipx-msg:empty, .ipx-mark:empty { display:none; }
/* The host Instructor Panel keeps its own value for these fields. The monitors
   follow a remote change and the iPad's panel does not — said here rather than
   discovered when the rig's next local Submit undoes it. */
.ipx-hostkeep { font-size:11px; line-height:1.45; color:var(--warn);
                background:rgba(245,185,10,.09); border-radius:7px; padding:6px 8px; }

/* ---------- numeric: dial, slider, stepper ---------- */
.ipx-numrow { display:flex; align-items:center; gap:9px; }
.ipx-numrow input[type=range] { flex:1; min-width:0; accent-color:var(--accent); height:20px; }
.ipx-spin { width:78px; flex:none; padding:6px 8px; font-size:13px;
            font-variant-numeric:tabular-nums; }
.ipx-unit { font-size:11px; color:var(--muted); min-width:0; }
.ipx-elim { font-size:13px; font-variant-numeric:tabular-nums; min-width:74px; text-align:right; }
/* A LOCKED DIAL IS A VISIBLE STATE. When an effect owns a dial the rig makes it
   non-interactive and prints a BARE TRIANGLE instead of its number, precisely so
   nobody reads a value that is not what the mannequin is doing. */
.ipx-tri { color:var(--accent); font-size:14px; }
.ipx-tri[hidden] { display:none; }
.ipx-ctl.locked { opacity:.72; }
.ipx-ctl.locked .ipx-cap { color:var(--muted); }
.ipx-spin.blanked { color:transparent; text-shadow:none; }
.ipx-ctl.overridden { border-color:rgba(245,185,10,.45); }

/* ---------- segmented: the caption AND the wire string ---------- */
.ipx-segs { display:flex; flex-wrap:wrap; gap:5px; }
.ipx-segbtn { flex:1 1 auto; min-width:62px; background:var(--raise); color:var(--text);
              border:1px solid var(--line); border-radius:8px; padding:6px 8px;
              display:flex; flex-direction:column; align-items:center; gap:2px; }
.ipx-segbtn b { font-size:12px; font-weight:600; line-height:1.2; }
.ipx-segbtn i { font:10.5px ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal;
                color:var(--dim); }
.ipx-segbtn.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.ipx-segbtn.on i { color:rgba(255,255,255,.8); }
.ipx-segbtn:disabled { opacity:.4; cursor:not-allowed; }
/* A UISwitch on the rig reads as two states rather than a row of choices. */
.ipx-kind-switch .ipx-segbtn { flex:0 1 96px; }

/* ---------- picker ---------- */
.ipx-select { padding:7px 9px; font-size:13px; }

/* ---------- composed editors: shock plan, alarm limits ---------- */
.ipx-planrow { display:flex; align-items:center; gap:8px; }
.ipx-planrow > span { flex:0 0 96px; font-size:11.5px; color:var(--muted); }
.ipx-planrow .ipx-select { flex:1; min-width:0; }
.ipx-limitrow .ipx-spin { flex:1; width:auto; min-width:0; }

/* ---------- readouts, and the reason beside them ---------- */
/* A flat tile with no explanation is how an instructor ends up asking why the
   heater will not move. Recessed and muted against the live controls, and it
   never takes a hover or a focus ring, because it is not one. */
.ipx-ro { background:#111117; border-style:dashed; }
.ipx-rov { font-size:19px; font-weight:700; font-variant-numeric:tabular-nums;
           color:#cfd6de; line-height:1.15; }
.ipx-absent .ipx-cap { color:var(--muted); }
.ipx-jsonbody { margin:0; max-height:112px; overflow:auto; white-space:pre-wrap;
                font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
                color:#9fb0c0; background:#0b0b0f; border-radius:8px; padding:7px 8px; }

/* ---------- the action rows that are genuinely buttons ---------- */
.ipx-acts { display:flex; flex-wrap:wrap; gap:6px; }
.ipx-actbtn { background:var(--raise); color:var(--text); border:1px solid var(--line);
              border-radius:8px; padding:7px 11px; font-size:12.5px; }
.ipx-actbtn:hover { border-color:var(--accent); }

/* ---------- what will actually be sent ---------- */
/* "Did that do anything?" answered BEFORE the Submit rather than after nothing
   happened. */
.ipx-review { background:var(--panel); border:1px solid var(--line); border-radius:12px;
              padding:12px 14px; margin-bottom:14px; }
.ipx-review.has { border-color:rgba(61,220,111,.45); }
.ipx-reviewhead { font-size:13px; }
.ipx-review.has .ipx-reviewhead b { color:var(--ok); }
.ipx-difflist { display:grid; gap:4px; margin-top:8px; }
.ipx-difflist:empty { display:none; }
.ipx-diff { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
            font:11.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
.ipx-diff code { color:var(--muted); min-width:170px; }
.ipx-from { color:var(--dim); text-decoration:line-through; }
.ipx-arrow { color:var(--dim); }
.ipx-diff b { color:var(--ok); }
.ipx-keepflag { font-family:inherit; font-size:10px; letter-spacing:.6px; text-transform:uppercase;
                color:var(--warn); background:rgba(245,185,10,.12); border-radius:5px;
                padding:1px 6px; }
.ipx-problem { display:none; }
.ipx-problem.on { display:block; margin-top:9px; font-size:12.5px; line-height:1.5;
                  color:var(--accent); }

@media (max-width:640px) {
  .ipx-row { grid-template-columns:1fr; }
  .ipx-planrow > span { flex-basis:72px; }
}