/* Argo screen draft v2. A real operations display with an emergency mode.
   Color semantics follow avionics practice: green normal, amber caution, red warning, cyan actions.
   Vital-sign identity colors follow patient monitors: HR green, SpO2 cyan, respiration yellow.
   Argo's own color (violet) marks guidance and linked sources, like the magenta guidance line in a cockpit. */
:root {
  --bg: #04070b;
  --panel: #0a0f16;
  --panel-2: #0d141d;
  --line: #19222e;
  --line-2: #243040;
  --text: #e6ecf3;
  --soft: #b9c4d1;
  --muted: #7f8c9c;
  --dim: #505c6b;
  --green: #3fdc8a;
  --cyan: #3ec8f2;
  --yellow: #f0cf4a;
  --amber: #ffab2e;
  --amber-bg: rgba(255, 171, 46, .12);
  --red: #ff4a4a;
  --red-bg: rgba(255, 74, 74, .13);
  --argo: #c590ff;
  --argo-bg: rgba(197, 144, 255, .12);
  --sans: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --cond: 'Barlow Semi Condensed', 'Barlow', 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t: .7s;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: var(--bg); overflow: hidden; }
body { font-family: var(--sans); color: var(--text); -webkit-font-smoothing: antialiased; }
body.boot *, body.boot *::before, body.boot *::after { transition: none !important; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Fixed to the window and scaled to fit (app.js, fit): fixed, so its unscaled box never widens the page on a phone.
   It is 1080 px high and 1920 px wide, or wider in a window wider than 16:9 (up to 2600 px, about 2.4:1), so the
   monitor fills the window with no black bars at the sides (Alex, Nov 8): --W is its width and --X the extra width,
   which the panel columns below share. Its center, scale and width move smoothly when the window or the strip
   under it changes. */
.stage {
  --W: 1920px; --X: 0px;
  position: fixed; left: 50%; top: 50%; width: var(--W); height: 1080px; overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--s, 1));
  background: radial-gradient(1400px 800px at 50% 40%, #08101a, var(--bg) 70%);
  transition: transform .5s var(--ease), top .5s var(--ease), width var(--t) var(--ease);
}

/* Generic panel */
.panel {
  position: absolute; background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  transition: left var(--t) var(--ease), top var(--t) var(--ease), width var(--t) var(--ease), height var(--t) var(--ease),
              opacity var(--t) var(--ease), filter var(--t) var(--ease), border-color .5s, box-shadow .5s;
  overflow: hidden;
}
.ph { height: 34px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.ph .t { font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.ph .r { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.ph .r b { color: var(--soft); font-weight: 500; }
.hide { opacity: 0; pointer-events: none; }
.dimmed { opacity: .32; filter: saturate(.25); }
.active { border-color: #3a4a5e; box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 18px 50px rgba(0, 0, 0, .5); }

/* Linked source highlight: violet corner brackets plus a citation number */
.src { position: relative; }
.src::after {
  content: ''; position: absolute; inset: 2px; pointer-events: none; border-radius: 5px;
  border: 2px solid var(--argo); box-shadow: 0 0 22px rgba(197, 144, 255, .35), inset 0 0 18px rgba(197, 144, 255, .08);
  animation: srcIn .9s var(--ease) both;
}
@keyframes srcIn { 0% { opacity: 0; transform: scale(1.04); } 100% { opacity: 1; transform: none; } }
.cite {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
  background: var(--argo); color: #1b0b2e; font: 700 13px/1 var(--mono); vertical-align: middle;
}
.src > .cite.pin { position: absolute; top: 8px; right: 10px; z-index: 3; box-shadow: 0 0 0 3px var(--bg); }
.panel.srcp { border-color: var(--argo); box-shadow: 0 0 0 1px var(--argo), 0 0 34px rgba(197, 144, 255, .22); }

/* LEDs */
.led { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--dim); margin-right: 8px; vertical-align: 1px; }
.led.ok { background: var(--green); box-shadow: 0 0 8px rgba(63, 220, 138, .6); }
.led.amber { background: var(--amber); box-shadow: 0 0 8px rgba(255, 171, 46, .6); }
.led.red { background: var(--red); box-shadow: 0 0 8px rgba(255, 74, 74, .7); }
.led.argo { background: var(--argo); box-shadow: 0 0 8px rgba(197, 144, 255, .6); }

/* ---------- Status bar ---------- */
.sbar { position: absolute; left: 0; right: 0; top: 0; height: 56px; display: flex; align-items: stretch; background: #070b11; border-bottom: 1px solid var(--line); }
.sb { display: flex; flex-direction: column; justify-content: center; padding: 0 22px; border-right: 1px solid var(--line); white-space: nowrap; }
.sb .k { font-family: var(--cond); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sb .v { font-size: 18px; font-weight: 500; color: var(--text); margin-top: 1px; }
.sb .v b { font-weight: 600; }
.sb-brand { flex-direction: row; align-items: center; gap: 14px; padding-left: 20px; }
.logo { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--argo); position: relative; }
.logo::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--argo); }
.wm { font-weight: 700; font-size: 21px; letter-spacing: .3em; }
.disp { font-family: var(--cond); font-size: 13px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; border: 1px solid var(--line-2); padding: 4px 8px; border-radius: 4px; }
.sb-time .v { font-family: var(--mono); font-size: 22px; font-weight: 500; }
.sb-alarm { min-width: 150px; transition: background .5s; }
.sb-alarm .v { font-family: var(--mono); font-size: 20px; }
.sb-alarm.on { background: var(--red); }
.sb-alarm.on .k, .sb-alarm.on .v { color: #fff; }
.sb-alarm.on.amber { background: var(--amber); }
.sb-alarm.on.amber .k, .sb-alarm.on.amber .v { color: #241500; }
.sb-proto { margin-left: auto; border-right: 0; }
.sb-proto span { font-family: var(--cond); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); border: 1px solid rgba(255, 171, 46, .45); padding: 6px 10px; border-radius: 4px; }
/* sound mark: shown only while sound is off (before the first key press or click, or muted with M) */
.sb-snd { border-right: 0; border-left: 1px solid var(--line); }
.sb-snd.off { display: none; }
.sb-snd .v { display: flex; align-items: center; gap: 9px; margin: 0; font-family: var(--cond); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sb-snd svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Alarm line: memo when quiet, banner and clocks in an emergency ---------- */
.aline { position: absolute; left: 16px; right: 16px; top: 66px; height: 62px; }
.memo { position: absolute; inset: 0; display: flex; align-items: center; gap: 28px; padding: 0 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); transition: opacity .5s; }
.memo .no { font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: .14em; color: var(--green); }
.memo .m { font-size: 15px; color: var(--muted); }
.memo .m b { color: var(--soft); font-weight: 500; }
.banner { position: absolute; left: 0; top: 0; bottom: 0; right: 0; display: flex; align-items: stretch; border-radius: 6px; overflow: hidden; transition: opacity .4s, right var(--t) var(--ease); }
.b-main { flex: 1; display: flex; align-items: center; gap: 22px; padding: 0 22px; background: var(--amber); color: #1e1200; transition: background .5s, color .5s; }
.banner.red .b-main { background: var(--red); color: #fff; animation: flash 1.6s steps(1) infinite; }
@keyframes flash { 0%, 70% { filter: none; } 70.01%, 100% { filter: brightness(.82); } }
.b-title { font-family: var(--cond); font-weight: 700; font-size: 30px; letter-spacing: .06em; white-space: nowrap; }
.b-sep { width: 1px; align-self: stretch; margin: 12px 0; background: currentColor; opacity: .35; }
.b-meta { font-size: 16px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.b-meta small { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.b-level { margin-left: auto; font-family: var(--cond); font-weight: 700; font-size: 15px; letter-spacing: .14em; padding: 7px 12px; border: 2px solid currentColor; border-radius: 4px; white-space: nowrap; }
/* AUDIO PAUSED, like a monitor: the alarm sounded one burst, then its audio paused on its own (sound.js) */
.b-snd { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--cond); font-weight: 700; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.b-snd svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.b-snd.off { display: none; }
.b-snd:not(.off) + .b-level { margin-left: 0; }
.clocks { position: absolute; right: 0; top: 0; bottom: 0; display: flex; gap: 10px; }
.clock { width: 236px; height: 62px; padding: 7px 14px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line-2); transition: opacity .5s, width var(--t) var(--ease), padding var(--t) var(--ease), margin var(--t) var(--ease), border-color .5s, box-shadow .5s; overflow: hidden; white-space: nowrap; }
.clock .k { font-family: var(--cond); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.clock .v { font-family: var(--mono); font-size: 27px; font-weight: 500; line-height: 1.15; }
.clock.o2 { border-color: var(--red); background: linear-gradient(180deg, rgba(255, 74, 74, .22), rgba(255, 74, 74, .08)); }
.clock.o2 .k { color: #ffb3b3; }
.clock.o2 .v { color: #ff6b6b; }
.clock.off { width: 0; padding: 0; margin-left: -10px; opacity: 0; border-width: 0; }

/* ---------- Crew ---------- */
.crew .list { display: grid; grid-template-rows: repeat(4, 1fr); height: calc(100% - 34px); }
.tile { position: relative; display: grid; grid-template-columns: 132px 1fr; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); transition: opacity var(--t), filter var(--t), background .5s, box-shadow .5s; }
.tile:last-child { border-bottom: 0; }
.portrait { position: relative; width: 132px; height: 170px; border-radius: 4px; overflow: hidden; background: #111a25; border: 1px solid var(--line-2); align-self: center; }
.portrait img { width: 100%; height: 100%; display: block; object-fit: cover; }
.t-body { display: grid; grid-template-columns: 230px 1fr; gap: 18px; align-content: center; transition: grid-template-columns var(--t) var(--ease); }
.t-id .nm { font-family: var(--cond); font-weight: 700; font-size: 30px; letter-spacing: .04em; line-height: 1; }
.t-id .rl { font-size: 15px; color: var(--muted); margin-top: 6px; }
.t-id .loc { margin-top: 14px; font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.t-id .st { font-size: 15px; color: var(--muted); margin-top: 4px; }
.t-id .st b { font-weight: 600; }
.t-id .sn { font-size: 13px; color: var(--dim); margin-top: 10px; white-space: nowrap; }
.t-vit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-content: center; transition: opacity .4s; }
.mv { border-left: 2px solid var(--line-2); padding-left: 12px; }
.mv .l { font-family: var(--cond); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mv .n { font-family: var(--cond); font-weight: 600; font-size: 40px; line-height: 1.05; }
.mv .n small { font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.mv .bl { font-size: 12.5px; color: var(--dim); }
/* sparkline with a head dot that pings on each sync */
.spk { position: relative; height: 30px; margin-top: 4px; }
.spk svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sp-head { position: absolute; right: -3px; top: 15px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.sp-head.ping { animation: spPing .7s ease-out; }
@keyframes spPing { 0% { transform: scale(2.4); filter: brightness(1.9); } 100% { transform: none; filter: none; } }
.mv.hr .n { color: var(--green); } .mv.hr { border-color: rgba(63, 220, 138, .4); }
.mv.o2 .n { color: var(--cyan); } .mv.o2 { border-color: rgba(62, 200, 242, .4); }
.mv.tp .n { color: var(--text); }
.mv .n.amber { color: var(--amber); }
.tile .resp { display: none; margin-top: 10px; font-size: 14.5px; line-height: 1.35; }
.tile .resp b { font-weight: 600; }
.tile.alarm { background: linear-gradient(90deg, rgba(255, 171, 46, .12), transparent 70%); box-shadow: inset 4px 0 0 var(--amber); }
.tile.alarm.red { background: linear-gradient(90deg, rgba(255, 74, 74, .14), transparent 70%); box-shadow: inset 4px 0 0 var(--red); }
.tile.ok-hl { box-shadow: inset 4px 0 0 var(--argo); background: linear-gradient(90deg, rgba(197, 144, 255, .10), transparent 70%); }
.tile.dimmed { opacity: .34; filter: saturate(.2); }
/* compact tiles in emergency mode */
.emg .crew .t-body { grid-template-columns: 1fr 0px; }
.emg .crew .t-vit { opacity: 0; }
.emg .crew .tile .resp { display: block; }
.emg .crew .sn { white-space: normal; }

/* ---------- Patient monitor ---------- */
.monitor { background: #05080c; }
.mon { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: 112px 106px 1fr; height: calc(100% - 34px); }
.wave { position: relative; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wave .wl { position: absolute; left: 8px; top: 6px; padding: 1px 6px; border-radius: 3px; background: rgba(5, 8, 12, .82); font-family: var(--cond); font-size: 13px; letter-spacing: .12em; z-index: 2; }
.wave.ecg .wl { color: var(--green); }
.wave.pl .wl { color: var(--cyan); }
.num { position: relative; border-bottom: 1px solid var(--line); transition: background .5s; }
.num .lab { position: absolute; left: 16px; top: 8px; font-family: var(--cond); font-weight: 600; font-size: 16px; letter-spacing: .1em; }
.num .lab small { font-size: 12.5px; font-weight: 500; opacity: .8; letter-spacing: .04em; }
.num .big { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-family: var(--cond); font-weight: 600; font-size: 84px; line-height: 1; transition: color .5s; }
.num .lim { position: absolute; left: 16px; top: 30px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.num.hr .lab, .num.hr .big { color: var(--green); }
.num.o2 .lab, .num.o2 .big { color: var(--cyan); }
.num.al { background: var(--amber-bg); }
.num.al .big { color: var(--amber); }
.num.al.crit { background: var(--red-bg); }
.num.al.crit .big { color: var(--red); }
.num .tag { position: absolute; left: 16px; bottom: 6px; font-family: var(--cond); font-weight: 700; font-size: 12.5px; letter-spacing: .1em; padding: 2px 6px; border-radius: 3px; background: var(--amber); color: #201300; }
.num.al.crit .tag { background: var(--red); color: #fff; }
.num.ok .tag { background: var(--green); color: #04150b; }
/* heart symbol flashes on every beat; the pulse bar rises with every pulse, like a bedside monitor */
.num .lab .heart { width: 15px; height: 15px; margin-left: 9px; vertical-align: -2px; fill: currentColor; opacity: .22; transition: opacity .06s, transform .06s; }
.num .lab .heart.on { opacity: 1; transform: scale(1.3); filter: drop-shadow(0 0 6px currentColor); }
.pbar { position: absolute; left: 168px; top: 36px; bottom: 32px; width: 10px; border-radius: 2px; background: rgba(62, 200, 242, .12); overflow: hidden; }
.pbar i { position: absolute; left: 0; right: 0; bottom: 0; height: 20%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); -webkit-mask: repeating-linear-gradient(to top, #000 0 4px, transparent 4px 6px); mask: repeating-linear-gradient(to top, #000 0 4px, transparent 4px 6px); }
.trends { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; border-right: 1px solid var(--line); }
.tr { position: relative; padding: 10px 14px 6px; }
.tr + .tr { border-left: 1px solid var(--line); }
.tr .th { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--cond); font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tr .th b { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--amber); }
.tr .th b.ok { color: var(--green); }
.tr .th b.crit { color: var(--red); }
.tr svg { width: 100%; height: 150px; display: block; margin-top: 6px; overflow: visible; }
.side { grid-column: 2; display: grid; grid-template-rows: 1fr 1fr; }
.sm { padding: 10px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.sm:last-child { border-bottom: 0; }
.sm .lab { font-family: var(--cond); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.sm .lab small { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: var(--muted); text-transform: none; margin-top: 3px; }
.sm .v { font-family: var(--cond); font-weight: 600; font-size: 46px; line-height: 1; }
.sm.rr .lab, .sm.rr .v { color: var(--yellow); }
.sm.tp .lab, .sm.tp .v { color: #dfe6ee; }
.sm .v small { font-family: var(--sans); font-size: 14px; color: var(--muted); font-weight: 400; margin-left: 4px; }

/* trend chart pieces (kept from draft v1, recolored) */
.chart .band { fill: rgba(185, 196, 209, .07); stroke: rgba(185, 196, 209, .28); stroke-dasharray: 3 4; }
.chart .band-l { font: 500 11px var(--sans); fill: #8391a2; letter-spacing: .04em; }
.chart .grid { stroke: rgba(185, 196, 209, .07); }
.chart .ln { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.chart .ln.in-hr { stroke: var(--green); }
.chart .ln.in-o2 { stroke: var(--cyan); }
.chart .ln.out { stroke: var(--amber); }
.chart .ax { font: 11px var(--mono); fill: #5d6a7a; }
.chart .thr { stroke: rgba(255, 74, 74, .55); stroke-dasharray: 4 5; stroke-width: 1.2; }
.chart .thr-l { font: 600 11px var(--mono); fill: #ff7b7b; }
.chart .nowline { stroke: rgba(230, 236, 243, .25); stroke-width: 1; }
.chart .proj { stroke: var(--red); stroke-width: 2.2; stroke-dasharray: 6 5; }
.chart .proj-dot { fill: var(--red); }
.chart .proj-l { font: 600 13px var(--mono); fill: #ff6b6b; }
.chart .ev { stroke: rgba(230, 236, 243, .4); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .ev-l { font: 600 10.5px var(--mono); fill: #aab6c4; }
.chart .ev-l.argo { fill: var(--argo); }
.chart .now-dot { stroke: var(--bg); stroke-width: 2; }
.chart .ax.now { fill: #8b98a8; }
.chart .ping { fill: none; stroke-width: 2; animation: tPing 1s ease-out forwards; }
@keyframes tPing { from { r: 5px; opacity: .9; } to { r: 16px; opacity: 0; } }

/* ---------- Habitat plan ---------- */
.plan svg.map { position: absolute; left: 0; right: 0; top: 34px; width: 100%; height: calc(100% - 34px - var(--wf, 0px)); transition: height var(--t) var(--ease); }
.map .mod { fill: #0f1824; stroke: #33445a; stroke-width: 1.4; transition: fill .5s, stroke .5s; }
.map .mod.hot { stroke: var(--amber); fill: rgba(255, 171, 46, .07); }
.map .mod.crit { stroke: var(--red); fill: rgba(255, 74, 74, .08); }
.map .mod.dest { stroke: var(--argo); fill: rgba(197, 144, 255, .07); }
.map .hatch { fill: #142030; stroke: #33445a; stroke-width: 1.2; }
/* the plan is drawn in habitat.json units and scaled to about 0.67, so font sizes here are in those units */
.map .hid { font: 600 14px var(--mono); fill: #6c7a8c; }
.map .hid.on { fill: var(--argo); }
.map .ml { font: 700 20px var(--cond); letter-spacing: .1em; fill: #9fb0c3; }
.map .eq { font: 600 11px var(--mono); fill: #5f6d7e; }
.map .eqbox { fill: none; stroke: #3a4a5e; stroke-width: 1; }
.map .kit rect { fill: #142030; stroke: #8fa3b8; stroke-width: 1.4; transition: stroke .5s, fill .5s; }
.map .kit path { stroke: #8fa3b8; stroke-width: 1.8; stroke-linecap: round; fill: none; }
.map .kit.empty rect { stroke: var(--amber); fill: rgba(255, 171, 46, .1); stroke-dasharray: 3 2; }
.map .kit.empty path { stroke: var(--amber); }
.map .kit.lit rect { stroke: var(--argo); fill: rgba(197, 144, 255, .2); stroke-width: 2; }
.map .kit.lit path { stroke: var(--argo); }
.map .kl { font: 700 16px var(--cond); letter-spacing: .04em; fill: var(--soft); }
.map .ks { font: 600 14px var(--mono); }
.map .ks.amber { fill: var(--amber); }
.map .ks.argo { fill: var(--argo); }
.map .ks.dim { fill: #6c7a8c; }
.map .cm { transition: transform 1s var(--ease); }
.map .cm circle.c { fill: #1b2736; stroke: #8fa3b8; stroke-width: 1.4; }
.map .cm text { font: 700 15px var(--mono); fill: #cfd8e3; text-anchor: middle; dominant-baseline: central; }
.map .cm.sleep circle.c { stroke: #4b596a; }
.map .cm.sleep text { fill: #6c7a8c; }
.map .cm.awake circle.c { stroke: var(--green); }
.map .cm.alarm circle.c { stroke: var(--amber); fill: #3a2a10; }
.map .cm.alarm.red circle.c { stroke: var(--red); fill: #3a1414; }
.map .cm.go circle.c { stroke: var(--argo); fill: #2a1a40; }
.map .cm .ring { fill: none; stroke-width: 2; opacity: 0; }
.map .cm.sleep circle.c { animation: breathe 4.6s ease-in-out infinite; }
@keyframes breathe { 50% { stroke: #75869a; } }
.map .cm.alarm .ring { stroke: var(--amber); animation: ping 1.6s ease-out infinite; }
.map .cm.alarm.red .ring { stroke: var(--red); animation: ping 1.1s ease-out infinite; }
@keyframes ping { 0% { r: 9px; opacity: .9; } 100% { r: 24px; opacity: 0; } }
.map .route { fill: none; stroke: var(--argo); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.map .route.sec { stroke-width: 2.2; stroke-dasharray: 6 5; }
.map .route-halo { fill: none; stroke: rgba(197, 144, 255, .22); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.map .route-flow { fill: none; stroke: #f3e9ff; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: .1 15; animation: flow .8s linear infinite; }
.map .route-flow.sec { stroke-width: 2.6; animation-duration: 1.1s; }
@keyframes flow { to { stroke-dashoffset: -15.1; } }
.map .kit.lit rect { animation: kitPulse 1.3s ease-in-out infinite; }
@keyframes kitPulse { 50% { fill: rgba(197, 144, 255, .42); } }
.map .wp { fill: var(--bg); stroke: var(--argo); stroke-width: 2; }
.map .scale { stroke: #6c7a8c; stroke-width: 1.2; fill: none; }
.map .scale-l { font: 13px var(--mono); fill: #6c7a8c; }
.map .srcbox { fill: none; stroke: var(--argo); stroke-width: 2.5; }
.map .cite-c { fill: var(--argo); stroke: var(--bg); stroke-width: 3; }
.map .cite-t { font: 700 15px var(--mono); fill: #1b0b2e; text-anchor: middle; dominant-baseline: central; }
.wf { position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--line); background: var(--panel-2); padding: 9px 14px; font-size: 14.5px; line-height: 1.35; transition: opacity .5s; }
.wf .r1 { display: flex; gap: 10px; align-items: baseline; }
.wf .r1 + .r1 { margin-top: 6px; }
.wf .who { font-family: var(--cond); font-weight: 700; letter-spacing: .08em; width: 62px; flex: none; color: var(--argo); }
.wf .who.s { color: #d9c2ff; }
.wf .path { color: var(--text); }
.wf .path i { font-style: normal; color: var(--muted); }
.wf .m { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--soft); white-space: nowrap; }

.legend { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; display: flex; align-items: center; gap: 18px; padding: 0 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); transition: opacity .5s; }
.legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend svg { width: 15px; height: 15px; }
.legend b { font-size: 11.5px; color: #8796a8; font-weight: 600; }

/* ---------- Assessment (alert state) ---------- */
.assess .body { padding: 6px 16px 10px; }
.a-h { font-family: var(--cond); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 12px 0 4px; }
.a-row { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 10px; border-left: 3px solid var(--amber); background: rgba(255, 171, 46, .05); margin-top: 4px; font-size: 16px; color: var(--soft); }
.a-row b { color: var(--text); font-weight: 600; }
.a-row .a-s { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.a-row:nth-of-type(n+5) { border-left-color: var(--line-2); background: transparent; }
.a-row.wait { border-left-color: var(--green); background: rgba(63, 220, 138, .05); }
.a-row.wait .a-v { display: inline-flex; align-items: center; gap: 10px; }
.pulse.ps { width: 10px; height: 10px; flex: none; animation-name: lis-sm; }
@keyframes lis-sm { 0% { box-shadow: 0 0 0 0 rgba(63, 220, 138, .6); } 100% { box-shadow: 0 0 0 7px rgba(63, 220, 138, 0); } }
.a-none { padding: 8px 10px; border: 1px dashed var(--line-2); border-radius: 4px; font-size: 15px; color: var(--muted); }

/* ---------- Medical inventory (normal mode) ---------- */
.inv table { width: 100%; border-collapse: collapse; font-size: 15px; }
.inv th { font-family: var(--cond); font-weight: 600; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 10px 14px 6px; }
.inv td { padding: 9px 14px; border-top: 1px solid var(--line); color: var(--soft); white-space: nowrap; }
.inv td.q { font-family: var(--mono); color: var(--text); }
.inv td .s { font-size: 13.5px; }
.inv .note { padding: 10px 14px; font-size: 13px; color: var(--dim); border-top: 1px solid var(--line); }

/* ---------- Procedure (ECAM style) ---------- */
.proc .body { padding: 12px 16px; }
.p-title { font-family: var(--cond); font-weight: 700; font-size: 24px; letter-spacing: .04em; color: var(--red); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.p-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.p-sig { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.p-sig span { font-size: 13.5px; padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(255, 171, 46, .4); background: var(--amber-bg); color: #ffd08a; }
.p-sig span i { font-style: normal; color: var(--muted); margin-left: 4px; font-size: 12px; }
.p-steps { list-style: none; margin-top: 8px; }
.p-steps li { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; padding: 4px 8px; border-radius: 4px; font-family: var(--mono); font-size: 14px; color: var(--cyan); border: 1px solid transparent; }
.p-steps li .sub { grid-column: 2; display: flex; justify-content: space-between; align-items: baseline; margin-top: 2px; }
.p-steps li .k { color: var(--muted); }
.p-steps li .ln { display: flex; gap: 6px; white-space: nowrap; overflow: hidden; }
.p-steps li .ln .dots { flex: 1; overflow: hidden; color: #2f6b80; }
.p-steps li .ln .dots::before { content: '..................................................................'; }
.p-steps li .hint { font-family: var(--sans); font-size: 14px; color: var(--soft); }
.p-steps li.now { background: rgba(62, 200, 242, .1); border-color: var(--cyan); }
.p-steps li.now .ln { font-weight: 600; color: #8fe3ff; }
.p-steps li.done { color: var(--green); }
.p-steps li.done .ln .dots { color: #23593c; }
.p-steps li.later { color: #5b7d8c; }
.p-steps li .stt { font-family: var(--cond); font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
.p-steps li.now .stt { color: var(--cyan); }
.p-steps li.done .stt { color: var(--green); }
.p-dont { margin-top: 10px; padding: 7px 10px; border: 1px solid rgba(255, 171, 46, .55); border-radius: 4px; color: #ffc46b; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.p-disc { margin-top: 6px; font-size: 11.5px; color: var(--dim); }

/* ---------- Report ---------- */
.report .body { padding: 12px 16px; }
.r-title { font-family: var(--cond); font-weight: 700; font-size: 22px; letter-spacing: .04em; }
.r-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.r-list { list-style: none; margin-top: 8px; }
.r-list li { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 15px; }
.r-list li span { font-family: var(--cond); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.r-list li b { font-weight: 500; }
.r-list li b em { font-style: normal; color: var(--amber); }
.r-tx { margin-top: 10px; padding: 10px 12px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line-2); }
.r-tx .row { display: flex; justify-content: space-between; font-size: 14px; color: var(--soft); }
.r-tx .row b { font-family: var(--mono); font-weight: 600; color: var(--text); font-size: 18px; }
.r-tx .k { font-family: var(--cond); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--argo); text-transform: uppercase; }
.bar { height: 6px; border-radius: 3px; background: #1a2533; margin: 8px 0; overflow: hidden; }
.bar i { display: block; height: 100%; width: 64%; background: linear-gradient(90deg, rgba(197, 144, 255, .4), var(--argo)); }

/* ---------- Transcript ---------- */
.xs { position: absolute; left: 0; right: 0; top: 34px; bottom: 56px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 18px 8px; overflow: hidden; }
.xs::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 60px; background: linear-gradient(var(--panel), transparent); z-index: 2; }
.xe { padding: 9px 0; border-bottom: 1px solid var(--line); }
.xe:last-child { border-bottom: 0; }
.xe .h { display: flex; gap: 10px; align-items: baseline; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.xe .h b { font-family: var(--cond); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--argo); }
.xe .h b.crew { color: var(--soft); }
.xe .tx { font-size: 16px; line-height: 1.4; color: var(--soft); margin-top: 3px; transition: font-size .5s var(--ease), color .5s; }
.xe.old .tx { color: var(--muted); }
.xe.cur { padding-top: 14px; }
.xe.cur .tx { font-size: 33px; line-height: 1.3; color: var(--text); font-weight: 500; letter-spacing: -.003em; }
/* the whole line shows at once; a sweep marks the words as Argo speaks them */
.xe.cur .w { opacity: .38; transition: opacity .18s; }
.xe.cur .w.said { opacity: 1; }
.vr svg.live rect { transform-box: fill-box; transform-origin: center; animation: vBar .42s ease-in-out infinite alternate; }
@keyframes vBar { from { transform: scaleY(.3); } to { transform: scaleY(1.15); } }
.xe.cur .tx .cite { font-size: 14px; height: 24px; min-width: 24px; margin: 0 2px 0 4px; vertical-align: 4px; }
.vr { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 14px; color: var(--soft); }
.vr svg { width: 120px; height: 22px; }
.vr i { font-style: normal; color: var(--muted); font-family: var(--mono); font-size: 12.5px; }
.xs-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 18px; border-top: 1px solid var(--line); background: var(--panel-2); font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.xs-foot .ind { display: none; align-items: center; gap: 12px; }
.xs-foot .ind.on { display: flex; }
.xs-foot .listen { color: var(--text); }
.pulse { width: 14px; height: 14px; border-radius: 50%; background: var(--green); animation: lis 1.3s ease-out infinite; }
@keyframes lis { 0% { box-shadow: 0 0 0 0 rgba(63, 220, 138, .65); } 100% { box-shadow: 0 0 0 16px rgba(63, 220, 138, 0); } }
.bars { display: flex; gap: 4px; align-items: center; height: 26px; }
.bars i { width: 4px; height: 8px; border-radius: 2px; background: var(--argo); animation: eq 1s ease-in-out infinite; }
.bars i:nth-child(2) { animation-delay: -.2s; } .bars i:nth-child(3) { animation-delay: -.45s; }
.bars i:nth-child(4) { animation-delay: -.7s; } .bars i:nth-child(5) { animation-delay: -.35s; }
@keyframes eq { 0%, 100% { height: 6px; } 50% { height: 24px; } }
.xs-foot .speak { color: var(--argo); }
.xs-foot .r { margin-left: auto; font-family: var(--mono); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 13px; }

/* ---------- Event log ---------- */
.log .rows { position: absolute; left: 0; right: 0; top: 34px; bottom: 0; overflow: hidden; }
.log .rows::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background: linear-gradient(transparent, var(--panel)); }
.lr { display: grid; grid-template-columns: 76px 64px 1fr; gap: 8px; padding: 6px 14px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--soft); align-items: baseline; transition: opacity .5s; }
.lr .tm { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.lr .cat { font-family: var(--cond); font-weight: 700; font-size: 12px; letter-spacing: .1em; color: var(--dim); }
.lr.med .cat { color: var(--amber); }
.lr.med.crit .cat { color: var(--red); }
.lr.argo .cat { color: var(--argo); }
.lr.ok .cat { color: var(--green); }
.lr.new { background: rgba(255, 255, 255, .03); }
.lr.old { opacity: .45; }
.lr.plant .tx { color: var(--soft); }
/* a new entry slides in (app.js) and glows briefly in its category color */
.lr.fresh { --fl: rgba(230, 236, 243, .16); animation: fresh 2.8s ease-out; }
.lr.fresh.med { --fl: rgba(255, 171, 46, .26); }
.lr.fresh.med.crit { --fl: rgba(255, 74, 74, .3); }
.lr.fresh.argo { --fl: rgba(197, 144, 255, .26); }
.lr.fresh.ok { --fl: rgba(63, 220, 138, .22); }
@keyframes fresh { 0%, 20% { background-color: var(--fl); } 100% { background-color: rgba(255, 255, 255, .03); } }

/* ---------- Systems strip ---------- */
.sys { position: absolute; left: 16px; right: 16px; top: 1022px; height: 46px; display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); transition: opacity var(--t), filter var(--t); }
.sys .h { display: flex; align-items: center; padding: 0 16px; font-family: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: .14em; color: var(--muted); border-right: 1px solid var(--line); }
.sys .c { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-right: 1px solid var(--line); white-space: nowrap; }
.sys .c:last-child { border-right: 0; }
.sys .c .k { font-family: var(--cond); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sys .c .v { font-family: var(--mono); font-size: 16px; color: var(--text); margin-left: auto; }
.sys .c .v small { font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin-left: 3px; }
.sys.dimmed { opacity: .3; }

/* ---------- Announcements: key moments, large, then settled into the banner or panel ---------- */
.ann { position: absolute; inset: 0; z-index: 40; pointer-events: none; display: none; }
.ann.on { display: block; }
.ann-scrim { position: absolute; inset: 0; opacity: 0; background: radial-gradient(1300px 700px at 50% 50%, rgba(2, 4, 7, .58), rgba(2, 4, 7, .84)); }
.ann.frozen .ann-scrim { opacity: 1; }
.ann-box {
  --c: var(--amber); --ink: #1e1200; --dk: #1a1000;
  position: absolute; left: 16px; top: 352px; width: calc(var(--W) - 32px); height: 376px; border-radius: 8px; overflow: hidden;
  transform-origin: 0 0; display: grid; place-items: center; text-align: center;
  background-color: var(--c); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 140px rgba(0, 0, 0, .7), 0 0 160px rgba(255, 171, 46, .35);
}
.ann-box.warning { --c: var(--red); --ink: #ffffff; --dk: #2a0505; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 140px rgba(0, 0, 0, .7), 0 0 180px rgba(255, 74, 74, .45); }
.ann-box.argo { --c: var(--argo); --ink: #f4ecff; background: linear-gradient(180deg, #1e1338, #100a1e); box-shadow: inset 0 0 0 3px var(--argo), 0 40px 140px rgba(0, 0, 0, .7), 0 0 150px rgba(197, 144, 255, .35); }
/* hazard stripes along the top and bottom edges for caution and warning */
.ann-box.caution::before, .ann-box.caution::after, .ann-box.warning::before, .ann-box.warning::after {
  content: ''; position: absolute; left: 0; right: 0; height: 20px;
  background: repeating-linear-gradient(-45deg, rgba(20, 12, 0, .85) 0 16px, transparent 16px 32px);
}
.ann-box.warning::before, .ann-box.warning::after { background: repeating-linear-gradient(-45deg, rgba(40, 0, 0, .55) 0 16px, transparent 16px 32px); }
.ann-box::before { top: 0; }
.ann-box::after { bottom: 0; }
/* annunciator flash: dark and bright in turn, two times for caution and three for warning */
.ann-box.flash { animation: annFlash .36s steps(1, end) var(--n, 2); }
@keyframes annFlash { 0% { background-color: var(--dk); color: var(--c); } 50% { background-color: var(--c); color: var(--ink); } }
.ann-in { position: relative; z-index: 1; padding: 0 60px; }
.ann-top { display: flex; justify-content: center; align-items: center; gap: 26px; font-family: var(--cond); font-weight: 700; font-size: 24px; letter-spacing: .2em; }
.ann-lv { padding: 5px 14px 4px; border: 3px solid currentColor; border-radius: 4px; }
.ann-tm { font-family: var(--mono); font-weight: 600; letter-spacing: .04em; }
.ann-title { font-family: var(--cond); font-weight: 700; font-size: 176px; line-height: .95; letter-spacing: .03em; margin-top: 14px; white-space: nowrap; }
.ann-sub { font-size: 38px; font-weight: 600; margin-top: 16px; }
.ann-sub b { font-family: var(--mono); font-weight: 700; }
.ann-box.go .ann-title { animation: annTrack .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes annTrack { from { letter-spacing: .24em; opacity: 0; } to { letter-spacing: .03em; opacity: 1; } }
.ann-box.argo .ann-top { color: #d9c2ff; }
/* uplink: a signal travelling from the ship to Earth */
.ann-link { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 24px; font-family: var(--cond); font-weight: 700; font-size: 20px; letter-spacing: .16em; color: #cdb4ff; }
.ann-link.hide { display: none; }
.ann-dots { display: flex; gap: 10px; }
.ann-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--argo); opacity: .18; animation: uplink 1.17s linear infinite; }
@keyframes uplink { 0%, 100% { opacity: .18; transform: none; box-shadow: none; } 10% { opacity: 1; transform: scale(1.4); box-shadow: 0 0 12px var(--argo); } 28% { opacity: .18; transform: none; box-shadow: none; } }

/* ---------- Toast: feedback for the sound keys (A, E, H) ---------- */
.toast {
  position: absolute; left: 50%; bottom: 74px; z-index: 60; transform: translate(-50%, 8px);
  padding: 10px 18px; border-radius: 6px; background: rgba(13, 20, 29, .96); border: 1px solid var(--line-2); box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
  font-family: var(--cond); font-weight: 600; font-size: 17px; letter-spacing: .06em; color: var(--text); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Layout: normal mode ---------- */
/* In a wider window the columns share the extra width (--X): normal mode crew 40%, plan and inventory 30%, voice log
   and event log 30%; emergency mode crew 15%, patient monitor 55% (procedure or report and plan 27.5% each below
   it), voice log and event log 30%. The right column stays put between the two modes. At 1920 wide, as before. */
#crew { left: 16px; top: 140px; width: calc(820px + var(--X) * .4); height: 868px; }
#plan { left: calc(852px + var(--X) * .4); top: 140px; width: calc(560px + var(--X) * .3); height: 424px; }
#inv { left: calc(852px + var(--X) * .4); top: 580px; width: calc(560px + var(--X) * .3); height: 428px; }
#xscript { left: calc(1428px + var(--X) * .7); top: 140px; width: calc(476px + var(--X) * .3); height: 420px; }
#log { left: calc(1428px + var(--X) * .7); top: 576px; width: calc(476px + var(--X) * .3); height: 432px; }
#monitor { left: calc(452px + var(--X) * .15); top: 140px; width: calc(960px + var(--X) * .55); height: 452px; }
#proc, #report, #assess { left: calc(452px + var(--X) * .15); top: 608px; width: calc(464px + var(--X) * .275); height: 400px; }

/* ---------- Layout: emergency mode ---------- */
.emg #crew { width: calc(420px + var(--X) * .15); }
.emg #plan { left: calc(932px + var(--X) * .425); width: calc(480px + var(--X) * .275); top: 608px; height: 400px; }
.emg #xscript { height: 572px; }
.emg #log { top: 728px; height: 280px; }

/* ---------- Run from the keyboard (Nov 7) ---------- */
/* Advisory: the alarm has cleared (all vitals back inside their limits) but the event is still being watched.
   Cyan, as advisories are on a flight deck; the emergency view steps down to it, it does not snap back. */
.banner.adv .b-main { background: #0d2631; color: #c9f1ff; box-shadow: inset 0 0 0 1px rgba(62, 200, 242, .45); }
.banner.adv .b-level { color: var(--cyan); }
.banner.adv .b-sep { opacity: .25; }
/* The live heart rate in the matched-signal chip keeps the chip's look */
.p-sig b { font-weight: inherit; }
/* A line Argo stopped because the crew member was still talking (operator's undo): kept, marked, dimmed */
.xe.cut .tx { color: var(--dim); }
.xe .h .xcut { font-family: var(--cond); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
/* The mouse pointer hides when it rests, so nothing on the projector shows an operator */
body.nocur, body.nocur * { cursor: none !important; }

/* ---------- The calm-down step-down (Nov 7) ---------- */
/* After epinephrine, once oxygen and breathing are back inside their limits, heart rate counts as the drug's
   expected effect (procedure MED-07, limit 120): cyan like the advisory, not amber like an alarm */
.num.exp .tag { background: var(--cyan); color: #03161d; }
.num .lim b { font-weight: 600; color: var(--cyan); }
.tr .th b.exp { color: var(--cyan); }
/* Breathing: amber with a tag while above its limit, like heart rate and SpO2, so its return shows */
.sm { transition: background .5s; }
.sm .v { transition: color .5s; }
.sm .tag { display: inline-block; margin-top: 7px; font-family: var(--cond); font-weight: 700; font-size: 12.5px; letter-spacing: .1em; padding: 2px 6px; border-radius: 3px; background: var(--amber); color: #201300; }
.sm.al { background: var(--amber-bg); }
.sm.rr.al .v { color: var(--amber); }
.sm.ok .tag { background: var(--green); color: #04150b; }
/* The patient's tile (Alex) once the event is an advisory: under observation, not an alarm */
.tile.adv { box-shadow: inset 4px 0 0 var(--cyan); background: linear-gradient(90deg, rgba(62, 200, 242, .09), transparent 70%); }

/* ---------- Scene 2: the patient's words under his voice entry, appearing as he says them, like subtitles ---------- */
.xe .vw { margin-top: 6px; font-size: 18px; line-height: 1.38; color: var(--soft); }
#xsLive .vw { color: var(--text); }
.xe .vw .w { opacity: 0; transition: opacity .16s; }
.xe .vw .w.said { opacity: 1; }
.xe .vw .snd { font-family: var(--mono); font-size: 14px; letter-spacing: .02em; color: var(--muted); }

/* ---------- The simulator strip (docs/05, decision 30) ----------
   Outside the monitor, like the keys under a hospital monitor: the scenarios, Run, Full screen and the honesty line.
   A slim bar at all times (Alex, Nov 8), so the monitor keeps as much of the window as it can. In real pixels (not
   scaled with the stage), so it stays readable on any screen. States: pick (choose and run), run (the time, Stop,
   sound and Full screen while a scenario plays), float (a run in full screen or on a phone held sideways: over the
   bottom of the monitor, shown when the pointer moves or the screen is tapped), and on a screen held upright
   (body.sim-tall) a panel under the monitor. Hidden in the presentation mode (the operator's word). */
.sim {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 8px 20px;
  font-family: var(--sans); color: var(--text); -webkit-font-smoothing: antialiased;
  background: linear-gradient(180deg, #0d131b, #070a0f);
  box-shadow: 0 -1px 0 var(--line-2), inset 0 1px 0 rgba(255, 255, 255, .04), 0 -20px 60px rgba(0, 0, 0, .5);
  transition: opacity .3s, transform .35s var(--ease);
}
.sim[hidden], .sim [hidden] { display: none !important; }
:where(.sim) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.sim button:focus-visible { outline: 2px solid var(--argo); outline-offset: 3px; }
.sim-lab { flex: none; font-family: var(--cond); line-height: 1.15; }
.sim-lab small { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--argo); }
.sim-lab b { display: none; font-size: 21px; font-weight: 600; color: var(--soft); white-space: nowrap; }
.sim-list { display: flex; gap: 10px; min-width: 0; }
.sim-sc {
  display: flex; align-items: baseline; gap: 12px; min-width: 0; padding: 7px 14px; border-radius: 7px; text-align: left;
  background: rgba(13, 20, 29, .95); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .2s;
}
.sim-sc:hover { box-shadow: inset 0 0 0 1.5px #3a4a5e; }
.sim-sc[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--argo), 0 0 24px rgba(197, 144, 255, .14); }
.sim-sc .id { font-family: var(--cond); font-weight: 700; font-size: 21px; line-height: 1.1; letter-spacing: .02em; white-space: nowrap; }
.sim-sc { overflow: hidden; }   /* never spills out of its box: the small details shorten first (Alex, Nov 8) */
.sim-sc .id { flex: none; }
.sim-sc .tx { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sim-sc .tx b { flex: none; font-size: 15px; font-weight: 600; white-space: nowrap; }
.sim-sc .tx small { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--muted); white-space: nowrap; }
.sim-sc .tx em { display: none; }
.sim-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: none; border-radius: 7px;
  font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; white-space: nowrap;
}
.sim-btn svg { width: 1.1em; height: 1.1em; flex: none; }
.sim-run { font-size: 17px; padding: 9px 18px 9px 15px; color: #1b0b2e; background: var(--argo); animation: goPulse 2.4s ease-out infinite; }
.sim-run svg { fill: currentColor; }
.sim-run:hover, .sim-run:focus-visible { filter: brightness(1.1); }
.sim-run:disabled { opacity: .45; cursor: default; animation: none; filter: none; }
@keyframes goPulse { 0% { box-shadow: 0 0 0 0 rgba(197, 144, 255, .5); } 70%, 100% { box-shadow: 0 0 0 12px rgba(197, 144, 255, 0); } }
.sim-ghost { font-size: 14px; padding: 8px 13px; color: var(--soft); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: color .2s, box-shadow .2s; }
.sim-ghost:hover { color: var(--text); box-shadow: inset 0 0 0 1.5px #3a4a5e; }
.sim-ghost svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sim-stop svg rect { fill: currentColor; stroke: none; }
.sim-snd .off, .sim-snd.muted .on, .sim-fs .off, .sim-fs.exit .on { display: none; }
.sim-snd.muted .off, .sim-fs.exit .off { display: inline; }
.sim.loading .sim-run svg { display: none; }   /* the button says "Loading voices…" until the voices are in */
.sim-honest { margin: 0 0 0 auto; max-width: 520px; font-size: 14px; line-height: 1.3; text-align: right; color: var(--amber); }
.sim-hint { display: none; margin: 0; }

/* run: the time, a progress line, Stop, sound and Full screen */
.sim-state, .sim-prog, .sim-stop, .sim-snd { display: none; }
.sim[data-state="run"] :is(.sim-lab, .sim-list, .sim-run) { display: none; }
.sim[data-state="run"] .sim-state { display: flex; }
.sim[data-state="run"] .sim-prog { display: block; }
.sim[data-state="run"] :is(.sim-stop, .sim-snd) { display: inline-flex; }
.sim-state { align-items: center; gap: 12px; font-family: var(--cond); font-weight: 700; font-size: 17px; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.sim-state i { width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px rgba(255, 74, 74, .8); animation: simRec 1.6s ease-in-out infinite; }
.sim-state b { color: var(--text); font-weight: 700; }
.sim-state .t { font-family: var(--mono); font-weight: 500; letter-spacing: .02em; color: var(--text); }
@keyframes simRec { 50% { opacity: .3; } }
.sim-prog { position: relative; flex: 1; min-width: 60px; height: 4px; border-radius: 2px; overflow: hidden; background: var(--line-2); }
.sim-prog b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--argo); transition: width 1s linear; }

/* float: over the bottom of the monitor, shown for a few seconds when the pointer moves or the screen is tapped */
.sim.float { opacity: 0; transform: translateY(100%); pointer-events: none; background: linear-gradient(180deg, rgba(13, 19, 27, .93), rgba(7, 10, 15, .97)); }
.sim.float.peek { opacity: 1; transform: none; pointer-events: auto; }

/* narrower windows: the honesty line wraps, then the label and the scenario's details give way */
@media (max-width: 1499px) { .sim-honest { max-width: 300px; } }
@media (max-width: 1279px) { .sim-lab { display: none; } .sim { gap: 12px; padding-inline: 14px; } }
@media (max-width: 1149px) { .sim-sc .tx small { display: none; } .sim-honest { max-width: 240px; font-size: 13px; } }
@media (max-width: 999px) {
  .sim { flex-wrap: wrap; }
  .sim-honest { order: 9; flex-basis: 100%; max-width: none; margin-left: 0; text-align: left; }
}
/* short screens (a phone held sideways): compact, one row, Full screen and sound as icons */
@media (max-height: 559px) {
  .sim { min-height: 0; flex-wrap: nowrap; gap: 10px; padding-block: 6px; }
  .sim-lab, .sim-sc .tx small { display: none; }
  .sim-sc { gap: 8px; padding: 5px 10px; }
  .sim-sc .id { font-size: 18px; }
  .sim-sc .tx b { font-size: 13px; }
  .sim-run { gap: 7px; font-size: 15px; padding: 8px 12px; }
  .sim-ghost { font-size: 13px; padding: 8px 10px; }
  .sim-fs span, .sim-snd span { display: none; }
  .sim-state { gap: 8px; font-size: 14px; }
  .sim-honest { order: 0; flex-basis: auto; max-width: 210px; margin-left: auto; font-size: 12px; text-align: right; }
}

/* a screen held upright (a phone): the monitor across the top, the strip as a panel under it (app.js sets its top) */
body.sim-tall .sim {
  bottom: 0; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 14px;
  min-height: 0; padding: 18px 16px 24px; overflow-y: auto; box-shadow: 0 -1px 0 var(--line-2);
}
body.sim-tall .sim-lab, body.sim-tall .sim-lab b { display: block; }
body.sim-tall .sim-list { flex-direction: column; }
body.sim-tall .sim-sc { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; }
body.sim-tall .sim-sc .id { font-size: 30px; }
body.sim-tall .sim-sc .tx { display: block; }
body.sim-tall .sim-sc .tx b { display: block; font-size: 18px; white-space: normal; }
body.sim-tall .sim-sc .tx small { display: block; margin-top: 2px; font-size: 14px; white-space: normal; }
body.sim-tall .sim-sc .tx em { display: block; margin-top: 8px; font-size: 15px; font-style: normal; line-height: 1.45; color: var(--soft); }
body.sim-tall .sim-run { font-size: 20px; padding-block: 16px; }
body.sim-tall .sim-ghost { font-size: 15px; padding: 13px 16px; }
body.sim-tall .sim-hint { display: block; font-size: 14px; color: var(--muted); }
body.sim-tall .sim-honest { order: 0; flex-basis: auto; max-width: none; margin: 0; font-size: 14px; text-align: left; }
body.sim-tall .sim[data-state="run"] { gap: 12px; padding-block: 16px; }
body.sim-tall .sim-prog { flex: none; }
body.sim-tall .sim-state { font-size: 16px; }