:root{--accent:#c9a24a;}
/* Storm Across the Strait — Facilitator Console
   Situation-room / watch-floor wireframe theme */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Spectral:ital,wght@0,600;0,700;0,800;1,600&display=swap');

:root{
  --bg:#04070c;
  --bg2:#070d16;
  --ink:#dbe7f2;
  --ink-dim:#9db2c5;
  --ink-faint:#6e8398;
  --line:#142231;
  --line-bright:#1f3242;
  --cyan:#5ad1e6;
  --cyan-soft:color-mix(in srgb, var(--cyan) 55%, transparent);
  --amber:#f4b14a;
  --amber-soft:rgba(244,177,74,.5);
  --red:#ff5d46;
  --red-soft:rgba(255,93,70,.5);
  --green:#46d39a;
  --info:#c072e0;
  --info-soft:rgba(192,114,224,.5);
  --panel:rgba(8,14,22,.9);
  --panel-solid:#070d16;
  --font-data:"IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --font-display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-title:"Spectral","Iowan Old Style",Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box;}
html{font-size:16px;}
html.projector{--ink:#f6fafd;--ink-dim:#c6d6e4;--ink-faint:#97acc0;--line:#1e3346;--line-bright:#2e455c;}
html,body{height:100%;margin:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-data);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

#stage{position:fixed;inset:0;overflow:hidden;}

/* background field */
#stage::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(20,40,60,.35), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(8,20,32,.6), transparent 55%),
    var(--bg);
}
/* faint grid */
#stage::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(90,140,180,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,140,180,.045) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(120% 100% at 50% 50%,#000 35%,transparent 80%);
}

#globe-wrap{position:absolute;inset:0;z-index:1;}
#globe{display:block;width:100%;height:100%;cursor:grab;touch-action:none;}

/* vignette + scanlines */
.fx{position:absolute;inset:0;z-index:5;pointer-events:none;}
.fx.vignette{box-shadow:inset 0 0 200px 24px rgba(0,0,0,.5);}
.fx.scan{
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.18) 2px 3px);
  opacity:.2;mix-blend-mode:multiply;
}

/* ---------- top bar ---------- */
#topbar{position:absolute;top:0;left:0;right:0;z-index:20;}
.classbar{
  display:flex;justify-content:center;gap:14px;align-items:center;
  font-size:0.7813rem;letter-spacing:.32em;font-weight:700;
  color:#0a0f14;background:var(--amber);
  padding:5px 10px;text-transform:uppercase;
}
.classbar.exercise{background:repeating-linear-gradient(45deg,var(--amber) 0 18px,#e0a23f 18px 36px);}
.titlerow{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px 26px 0;
}
/* keep the brand + metrics clear of the run-of-show rail — only where one exists
   (the console). Student, red-cell and room seats have no rail, so reserving 338px
   there silently clipped the exercise title. */

/* Below the console's design width the reservation cannot be afforded, but dropping it
   slides the title under the rail toggle — so let the row wrap instead of starving the
   brand box. Only the console ever reaches this rule; the seats have no rail. */
@media (max-width:1180px){
  
}
.brand .mark{overflow:hidden;text-overflow:ellipsis;}
.brand{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:0;flex:1 1 auto;overflow:hidden;}
.brand .mark,.brand .sub{max-width:100%;}
.brand .mark{
  font-family:var(--font-title);font-weight:700;letter-spacing:-.005em;
  font-size:1.5625rem;text-transform:none;color:var(--ink);white-space:nowrap;
}
.brand .mark b{color:var(--amber);font-style:italic;}
.brand .sub{
  font-size:0.7813rem;letter-spacing:.26em;color:var(--ink-dim);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.statuschip{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);background:var(--panel);
  padding:8px 14px;border-radius:2px;white-space:nowrap;
}
.statuschip .dot{width:9px;height:9px;border-radius:50%;background:var(--ink-dim);box-shadow:0 0 10px currentColor;}
.statuschip.live .dot{background:var(--red);animation:blink 1.4s steps(2) infinite;}
.statuschip .lbl{font-size:0.7813rem;letter-spacing:.24em;color:var(--ink-faint);text-transform:uppercase;}
.statuschip .val{font-size:1.125rem;letter-spacing:.16em;color:var(--ink);text-transform:uppercase;font-weight:700;}
@keyframes blink{50%{opacity:.25;}}

/* ---------- clocks ---------- */
#clocks{
  position:absolute;bottom:calc(var(--dock-h,86px) + 14px);right:140px;top:auto;z-index:26;width:auto;
  max-width:calc(100% - 478px);
  border:1px solid var(--line);background:var(--panel);
  border-radius:3px;overflow:hidden;
  display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:stretch;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .6s ease, transform .6s ease;
}
/* rail hidden → the clocks may use the width up to the util column */
#stage.rail-hidden #clocks{max-width:calc(100% - 154px);}
/* …unless the force roster occupies the left column */

/* The roster overlays the map; it must not push the header. Reserving 306px here clipped
   the wordmark to "Sto\2026" at laptop widths — the same mistake as the old agenda rule. */
#stage.live #clocks{opacity:1;transform:none;pointer-events:auto;}
/* operator mode: --dock-h handles vertical clearance; no horizontal offset needed */
#clocks .row{padding:9px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;min-width:120px;}
#clocks .row:last-child{border-right:0;}
#clocks .k{font-size:0.6563rem;letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase;margin-bottom:4px;white-space:nowrap;}
#clocks .v{font-size:1.3125rem;letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;}
#clocks .v small{font-size:0.84rem;color:var(--ink-dim);letter-spacing:.1em;}
#clocks .v.warn{color:var(--amber);}
#clocks .v.crit{color:var(--red);}
#clocks .meta{font-size:0.6563rem;color:var(--ink-dim);letter-spacing:.1em;margin-top:4px;max-width:150px;line-height:1.3;}
#clocks .k .tag{display:inline-block;margin-left:6px;font-size:0.5938rem;letter-spacing:.12em;text-transform:uppercase;padding:1px 5px;border-radius:2px;border:1px solid var(--line-bright);color:var(--ink-dim);vertical-align:middle;}
#clocks .k .tag.crit{color:var(--red);border-color:var(--red-soft);}
#clocks .clk-gauge{height:5px;border-radius:3px;background:rgba(20,34,49,.7);overflow:hidden;margin-top:7px;}
#clocks .clk-gauge i{display:block;height:100%;width:100%;background:#8f3b34;transition:width .5s ease, background .5s ease;}
/* A clock that blinks forever reads as a broken readout, not urgency. The gauge flashes
   twice as it crosses into warn/crit and then holds steady; colour carries the state. */
#clocks .row.warn .clk-gauge i{animation:lngPulse 1s ease-in-out 2;}
#clocks .row.crit .clk-gauge i{animation:lngPulse .7s ease-in-out 2;}
@keyframes lngPulse{50%{opacity:.45;}}
@media (prefers-reduced-motion:reduce){#clocks .row.warn .clk-gauge i,#clocks .row.crit .clk-gauge i{animation:none;}}

#display-scale{opacity:.5;}#display-scale.ds-hot{opacity:1;}

/* ---------- cold open: the seat's furniture stays off until the stage goes live ----------
   #titlecard is z40. The student controls ran 24–45 and were never gated on .live, so at
   cold open the force roster and its legend showed THROUGH the card while the filing
   button, the Advocate, the ally-consult button and the text-size chip sat ON TOP of it —
   live and clickable before the student had entered the exercise. #util and #clocks were
   already gated this way; these are the ones that were missed. */
body:has(#stage:not(.live)) :is(#force-roster,#forces-legend,#force-card,#bc-open,#rc-open,#da-open,#allyaskbtn,#display-scale,#cable){opacity:0;pointer-events:none;}
/* #cable joined the list for the demo: a live session fires no inject before entry, but the
   demo seeds one so the stage looks like a session in progress — and the title card carries
   no background, so the cable painted straight through the wordmark. Both are centered on
   the viewport, so this collided at every width until the cable waited for .live. */

/* ---------- title card (cold open) ---------- */
#titlecard{
  position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:22px;
  background:radial-gradient(60% 60% at 50% 45%,rgba(4,7,12,.4),rgba(4,7,12,.86) 75%);
  transition:opacity .8s ease, visibility .8s;
}
#titlecard.hidden{opacity:0;visibility:hidden;pointer-events:none;}
#titlecard::before,#titlecard::after{content:"";position:absolute;width:16px;height:16px;opacity:.5;pointer-events:none;}
#titlecard::before{top:30px;left:30px;border-top:1px solid var(--amber);border-left:1px solid var(--amber);}
#titlecard::after{bottom:30px;right:30px;border-bottom:1px solid var(--amber);border-right:1px solid var(--amber);}
#titlecard .eyebrow{font-size:0.91rem;letter-spacing:.5em;color:var(--amber);text-transform:uppercase;}
#titlecard h1{
  font-family:var(--font-title);font-weight:700;text-transform:none;
  font-size:clamp(44px,7.4vw,108px);letter-spacing:-.01em;margin:0;line-height:.98;
  color:#eaf3fb;text-shadow:0 2px 34px rgba(0,0,0,.5);
}
#titlecard h1 em{font-style:italic;color:var(--amber);}
#titlecard .deck{font-size:clamp(13px,1.4vw,17px);letter-spacing:.22em;color:var(--ink-dim);text-transform:uppercase;max-width:680px;}
#titlecard .credit{font-size:0.84rem;letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase;margin-top:2px;}
#titlecard .prompt{
  margin-top:10px;font-size:0.91rem;letter-spacing:.28em;color:var(--ink);text-transform:uppercase;
  border:1px solid var(--cyan-soft);padding:12px 22px;border-radius:2px;
  animation:pulseBorder 2.4s ease-in-out infinite;
}
#titlecard .prompt b{color:var(--cyan);}
#tc-reset{
  margin-top:18px;font-size:0.7188rem;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:2px;padding:8px 16px;color:var(--ink-faint);
}
#tc-reset:hover{color:#e06b5a;border-color:rgba(224,107,90,.5);}
#tc-reset.confirm{color:#e06b5a;border-color:rgba(224,107,90,.7);background:rgba(224,107,90,.08);}
#tc-reset.hidden{display:none;}
@keyframes pulseBorder{0%,100%{box-shadow:0 0 0 0 rgba(90,209,230,.25);}50%{box-shadow:0 0 26px 2px rgba(90,209,230,.12);}}

/* ---------- FLASH cable ---------- */
#cable{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);
  z-index:38;width:min(60vw,820px);
  border:1px solid var(--line);border-left:3px solid var(--cyan);
  background:linear-gradient(180deg,rgba(8,14,22,.96),rgba(7,12,19,.94));
  box-shadow:0 24px 80px rgba(0,0,0,.7);
  border-radius:3px;opacity:0;visibility:hidden;
  transition:opacity .4s ease, transform .4s ease;
  max-height:90vh;display:flex;flex-direction:column;
}
#cable.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);}
#cable.alert{border-left-color:var(--red);}
#cable.reward{border-left-color:var(--green);}
#cable .cimg{display:none;position:relative;}
#cable .cimg video{display:block;width:100%;height:100%;object-fit:cover;background:#04070c;}
#cable.has-img .cimg{
  display:block;height:118px;flex:none;
  background-size:cover;background-position:center;
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 -60px 60px -30px rgba(6,11,18,.9);
}
#cable.has-img.alert .cimg{box-shadow:inset 0 -60px 60px -30px rgba(6,11,18,.9), inset 0 0 0 1px rgba(255,93,70,.25);}
#cable .chead{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;border-bottom:1px solid var(--line);
  background:rgba(90,209,230,.06);
}
#cable.alert .chead{background:rgba(255,93,70,.07);}
#cable.reward .chead{background:rgba(70,211,154,.07);}
#cable .ctag{font-size:0.91rem;letter-spacing:.28em;font-weight:700;text-transform:uppercase;color:var(--cyan);}
#cable.alert .ctag{color:var(--red);}
#cable.reward .ctag{color:var(--green);}
#cable .cnum{font-size:0.84rem;letter-spacing:.2em;color:var(--ink-faint);}
#cable .chdr{padding:16px 18px 6px;}
#cable .corigin{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:1.3125rem;letter-spacing:.06em;color:#eaf3fb;line-height:1.05;
}
#cable .cmeta{font-size:0.84rem;letter-spacing:.2em;color:var(--ink-dim);text-transform:uppercase;margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 14px;}
#cable .cmeta b{color:var(--amber);font-weight:700;}
#cable .cbody{padding:6px 18px 14px;overflow:auto;}
#cable .cbody p{
  font-size:1.12rem;line-height:1.45;color:var(--ink);margin:0 0 8px;text-wrap:pretty;
}
#cable .cbody p:first-child::first-line{color:#eaf3fb;}
#cable .cfoot{
  padding:11px 18px;border-top:1px dashed var(--line);
  font-size:0.7813rem;letter-spacing:.16em;color:var(--ink-faint);text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
#cable .cfoot .read{color:var(--cyan);}
#cable .x{
  cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink-dim);
  font-family:var(--font-data);font-size:0.7813rem;letter-spacing:.2em;padding:5px 10px;border-radius:2px;
}
#cable .x:hover{color:var(--ink);border-color:var(--ink-dim);}

/* ---------- phase banner (round transition) ---------- */
#phasebanner{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.96) translateY(8px);
  z-index:35;text-align:center;opacity:0;visibility:hidden;
  transition:opacity .5s ease, transform .5s ease;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,12,20,.94),rgba(5,9,15,.96));
  border:1px solid var(--line-bright);border-top:2px solid var(--cyan);border-radius:4px;
  padding:34px 64px 30px;
  box-shadow:0 30px 80px rgba(0,0,0,.75), 0 0 0 1px rgba(90,209,230,.08), 0 0 60px rgba(90,209,230,.1);
}
#phasebanner.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);}
#phasebanner .pk{font-size:1.0625rem;letter-spacing:.5em;color:var(--cyan);text-transform:uppercase;}
#phasebanner .pt{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(44px,7vw,96px);letter-spacing:.05em;color:#eaf3fb;margin-top:12px;line-height:1;
  text-shadow:0 0 50px rgba(90,209,230,.35);
}
#phasebanner .pd{font-size:1.12rem;letter-spacing:.22em;color:var(--ink);text-transform:uppercase;margin-top:18px;max-width:720px;}

/* red alert flash — fired with alert injects */
#redalert{
  position:absolute;inset:0;z-index:37;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 190px 34px rgba(224,60,45,.55);
}
#redalert.flash{animation:redFlash 1.7s ease-out;}
@keyframes redFlash{0%{opacity:0;}10%{opacity:1;}30%{opacity:.3;}45%{opacity:.8;}100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){#redalert.flash{animation:none;opacity:0;}}

/* ---------- facilitator dock ---------- */
#dock{
  /* right gutter clears the side rail (186px wide at right:14px) so dock content is
     never under it — the rail’s group wrappers and gaps are transparent. */
  position:absolute;left:0;right:210px;bottom:0;top:auto;z-index:25;
  /* hard ceiling + own scroll: without these the dock grows upward into the topbar
     and the status strip, and --dock-h (used by #force-roster and #clocks)
     balloons to the full content height. */
  max-height:min(58%,430px);overflow-y:auto;overflow-x:hidden;
  /* left gutter clears the fixed bottom-left chips (text size, Inbox, live status),
     which share this band now that the dock is capped and scrolls. */
  padding-left:176px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(6,11,18,.94),rgba(5,9,15,.99));
  display:flex;flex-wrap:wrap;align-items:stretch;
  transform:translateY(102%);
  transition:transform .35s ease;
}
#dock.dock-show{transform:translateY(0);}
.docksec{padding:9px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 100%;}
.docksec:not(:last-child){border-right:0;border-bottom:1px solid var(--line);}
.docksec .btnrow{width:100%;min-width:0;flex-wrap:wrap;}
/* the inject deck must wrap to the dock width, or most of the 31 chips end up past
   the clipped edge of the stage and become unclickable. */
.docksec.injects{flex:1 1 100%;min-width:0;flex-wrap:wrap;}
.docksec.injects .btnrow{width:100%;min-width:0;flex:1 1 auto;flex-wrap:wrap;}
.docksec:last-child{border-right:0;}
.docksec .seclbl{font-size:0.6563rem;letter-spacing:.26em;color:var(--ink-faint);text-transform:uppercase;}
.btnrow{display:flex;gap:7px;flex-wrap:wrap;align-items:center;}

button.ctl{
  font-family:var(--font-data);font-size:0.7813rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:rgba(20,34,49,.5);border:1px solid var(--line);
  padding:7px 10px;border-radius:2px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;transition:all .14s ease;
}
button.ctl:hover{border-color:var(--cyan-soft);background:rgba(90,209,230,.1);color:#eaf3fb;}
button.ctl.active{border-color:var(--cyan);color:var(--cyan);background:rgba(90,209,230,.12);}
button.ctl .key{
  font-size:0.6563rem;color:var(--ink-faint);border:1px solid var(--line);border-radius:2px;
  padding:1px 5px;letter-spacing:.05em;
}
button.ctl.primary{border-color:var(--cyan-soft);color:var(--cyan);}
button.ctl.warn:hover{border-color:var(--amber-soft);background:rgba(244,177,74,.1);color:var(--amber);}

/* inject buttons carry a letter tab */
button.inj{position:relative;padding-left:30px;}
button.inj .tab{
  position:absolute;left:0;top:0;bottom:0;width:22px;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:0.84rem;background:rgba(90,209,230,.12);color:var(--cyan);
  border-right:1px solid var(--line);
}
button.inj.alert .tab{background:rgba(255,93,70,.14);color:var(--red);}
button.inj.reward .tab{background:rgba(70,211,154,.14);color:var(--green);}
button.inj.reserve{opacity:.78;}
button.inj.fired{outline:1px solid var(--ink-faint);}
button.inj.fired::after{content:"✓";position:absolute;right:8px;color:var(--green);font-size:0.7813rem;}

/* operator note */
#opnote{padding:9px 16px;display:flex;flex-direction:column;gap:5px;justify-content:flex-start;overflow-y:auto;flex:1 1 360px;min-width:260px;border-left:1px solid var(--line);height:118px;scrollbar-gutter:stable;}
#opnote .onk{font-size:0.6563rem;letter-spacing:.24em;color:var(--ink-faint);text-transform:uppercase;}
#opnote .ont{font-size:0.7813rem;color:var(--ink-dim);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#opnote .onb{font-size:0.75rem;color:var(--ink-faint);letter-spacing:.04em;}
#opnote .ont em{color:var(--cyan);font-style:normal;}

/* tempo control */
.tempo{display:flex;gap:0;border:1px solid var(--line);border-radius:2px;overflow:hidden;}
.tempo button{
  font-family:var(--font-data);font-size:0.7188rem;letter-spacing:.08em;color:var(--ink-dim);
  background:transparent;border:0;border-right:1px solid var(--line);padding:7px 9px;cursor:pointer;
}
.tempo button:last-child{border-right:0;}
.tempo button.on{background:rgba(90,209,230,.16);color:var(--cyan);}

/* helper hint */
#hint{
  position:absolute;left:26px;bottom:calc(100% + 0px);
  z-index:10;font-size:0.7188rem;letter-spacing:.16em;color:var(--ink-faint);
}

.hidden{display:none !important;}

/* ---------- top metrics cluster ---------- */
.topmetrics{display:flex;align-items:center;gap:10px;flex:none;}
.topmetrics .tm{
  display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);
  background:var(--panel);padding:6px 12px;border-radius:2px;min-width:78px;
}
.topmetrics .tm-k{font-size:0.6563rem;letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase;}
.topmetrics .tm-v{font-size:1.125rem;letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums;}
.sb{font-size:0.5938rem;letter-spacing:.12em;font-weight:700;padding:2px 5px;border-radius:2px;text-transform:uppercase;white-space:nowrap;}
.sb.phase,.sb.sim{background:rgba(90,209,230,.12);color:var(--cyan);}
.sb.break,.sb.admin{background:rgba(125,147,168,.12);color:var(--ink-dim);}
.sb.cue{background:rgba(255,93,70,.16);color:var(--red);}

/* ---------- decision tracker ---------- */
#decisions{
  position:absolute;right:0;top:0;bottom:0;z-index:45;width:400px;max-width:92vw;
  border-left:2px solid var(--cyan);
  background:linear-gradient(180deg,rgba(8,13,21,.99),rgba(6,11,18,.99));
  box-shadow:-26px 0 70px rgba(0,0,0,.6);
  display:flex;flex-direction:column;transform:translateX(102%);transition:transform .35s ease;visibility:hidden;
}
#decisions.show{transform:translateX(0);visibility:visible;}
.dec-head{flex:none;display:flex;justify-content:space-between;align-items:flex-start;padding:16px 18px;border-bottom:1px solid var(--line);}
.dec-title{font-size:1.05rem;letter-spacing:.04em;color:#eaf3fb;font-weight:700;}
.dec-sub{font-size:0.7188rem;letter-spacing:.16em;color:var(--ink-faint);text-transform:uppercase;margin-top:4px;}
.dec-x{background:transparent;border:1px solid var(--line);border-radius:2px;color:var(--ink-dim);font-family:var(--font-data);font-size:0.84rem;padding:4px 9px;cursor:pointer;}
.dec-x:hover{color:var(--ink);}
.dec-body{flex:1;overflow:auto;padding:14px 18px;display:flex;flex-direction:column;gap:14px;}
.dec-q-head{display:flex;align-items:center;gap:9px;margin-bottom:5px;}
.dec-status{font-family:var(--font-data);font-size:0.6563rem;letter-spacing:.14em;font-weight:700;padding:4px 8px;border-radius:2px;cursor:pointer;border:1px solid var(--line);min-width:64px;text-align:center;}
.dec-q-title{font-size:0.98rem;color:#eaf3fb;font-weight:700;}
.dec-q-text{font-size:0.84rem;color:var(--ink-dim);line-height:1.5;margin-bottom:7px;text-wrap:pretty;}
.dec-note,.dec-finalnote{width:100%;font-family:var(--font-data);font-size:0.91rem;color:var(--ink);background:rgba(4,8,13,.7);border:1px solid var(--line);border-radius:2px;padding:8px 10px;resize:vertical;line-height:1.5;}
.dec-note:focus,.dec-finalnote:focus{outline:none;border-color:var(--cyan-soft);}
.dec-final{border-top:1px solid var(--line);padding-top:13px;}
.dec-final-k{font-size:0.7188rem;letter-spacing:.16em;color:var(--cyan);text-transform:uppercase;margin-bottom:7px;}
.dec-foot{flex:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--line);}
.dec-injstat{font-size:0.7188rem;letter-spacing:.1em;color:var(--ink-faint);text-transform:uppercase;}
.dec-foot-btns{display:flex;gap:8px;}
.dec-foot button{font-family:var(--font-data);font-size:0.7813rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(20,34,49,.5);border:1px solid var(--line);border-radius:2px;padding:8px 12px;color:var(--ink);cursor:pointer;}
.dec-export{color:var(--cyan);border-color:var(--cyan-soft) !important;}
.dec-foot button:hover{border-color:var(--cyan-soft);}

/* ---------- toast ---------- */
#toast{
  position:absolute;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px);z-index:55;
  background:var(--panel-solid);border:1px solid var(--cyan-soft);border-radius:3px;
  padding:11px 18px;font-size:0.84rem;letter-spacing:.06em;color:var(--ink);
  max-width:520px;text-align:center;opacity:0;visibility:hidden;transition:opacity .3s ease, transform .3s ease;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
}
#toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}

/* ---------- help / keys ---------- */
#util{position:absolute;right:14px;top:80px;bottom:14px;transform:none;z-index:27;display:flex;flex-direction:column;gap:3px;overflow-y:auto;overflow-x:hidden;align-items:stretch;scrollbar-width:thin;opacity:0;pointer-events:none;transition:opacity .25s;}
#stage.live #util,body:has(#stage.live) #util{opacity:1;pointer-events:auto;}
#util::-webkit-scrollbar{width:4px;}
#util::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px;}
.util-grp{display:flex;flex-direction:column;gap:3px;padding-bottom:6px;margin-bottom:3px;border-bottom:1px solid var(--line);}
.util-grp:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.util-lbl{font-family:var(--font-data);font-size:0.5938rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);padding:2px 2px 1px;}
#util button{
  font-family:var(--font-data);font-size:0.7188rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);background:var(--panel);border:1px solid var(--line);
  padding:0 11px;min-height:34px;border-radius:2px;cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:10px;text-align:left;
}
#util button:hover{color:var(--ink);border-color:var(--ink-dim);}
#util .ui-ic{flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center;font-size:0.84rem;color:var(--ink);line-height:1;}
#util .ui-tx{flex:1;}
/* minmax(0,…) not 1fr: a nowrap label wider than the track makes plain `1fr` grow
   (it means minmax(auto,1fr)), which pushed the Brief and Home buttons past the rail
   edge on short screens — laptop and iPad portrait — where the rail gains a scrollbar. */
.util-utils{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px;}
.util-utils button{min-width:0;padding:0 8px;}
.util-utils .ui-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.util-utils .ui-ic{flex:0 0 13px;font-size:0.78rem;}
#forcesbtn.on{color:var(--amber);border-color:var(--amber-soft);}
#forcesbtn.hint{color:var(--amber);border-color:var(--amber-soft);animation:fbHint 1.8s ease-in-out infinite;}
@keyframes fbHint{0%,100%{box-shadow:0 0 0 0 rgba(242,180,65,0);}50%{box-shadow:0 0 14px 2px rgba(242,180,65,.35);}}
@media (prefers-reduced-motion:reduce){#forcesbtn.hint{animation:none;box-shadow:0 0 0 1px var(--amber-soft);}}
/* narrower desktop/laptop screens: tighten the right-hand tool rail and clock strip so
   they don't collide — the rail's real width shrinks with its content at these sizes. */
@media (max-width:1550px){
  #util{width:186px;}
  #util button{font-size:0.625rem;padding:0 8px;min-height:30px;gap:6px;}
  #util .ui-ic{flex-basis:13px;font-size:0.75rem;}
  #clocks{right:212px;max-width:calc(100% - 550px);}
  #stage.rail-hidden #clocks{max-width:calc(100% - 226px);}
  
  #clocks .row{padding:7px 11px;min-width:96px;}
}
@media (max-width:1260px){
  #clocks{display:none;}
}
#forcesbtn .fb-us{color:#6aa3d8;}
#forcesbtn .fb-pla{color:#e06b5a;}

/* Projection-safe mode: hides ONLY the inject deck list, so mirroring this screen
   doesn't let the room read ahead. It deliberately no longer hides operator
   guidance, the dock, Tools or panel controls — that was a trap, and the room
   displays (display.html) are the real answer to showing the room. */
#stage.project .docksec.injects{display:none;}
/* single-screen: the whole control dock hides from the room while projecting */
/* (dock visibility is driven by the #dock.dock-show class from app.js) */
#help{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:62;
  width:min(560px,90vw);border:1px solid var(--line);border-top:2px solid var(--cyan);
  background:linear-gradient(180deg,rgba(9,15,24,.99),rgba(6,11,18,.99));
  box-shadow:0 28px 80px rgba(0,0,0,.65);border-radius:3px;
}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 22px;padding:18px;}
.help-grid div{font-size:0.84rem;color:var(--ink-dim);letter-spacing:.04em;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.help-grid kbd{font-family:var(--font-data);font-size:0.7813rem;color:var(--ink);background:rgba(20,34,49,.6);border:1px solid var(--line);border-bottom-width:2px;border-radius:3px;padding:2px 7px;}
.help-grid .help-note{grid-column:1 / -1;font-size:0.7813rem;color:var(--ink-faint);line-height:1.5;letter-spacing:.04em;border-top:1px solid var(--line);padding-top:11px;margin-top:3px;}

/* ---------- force posture legend ---------- */
/* Centred on the whole stage, this sat underneath the 292px roster (hiding two of the five
   colour keys) and underneath #wcbar (hiding the first line of its note). It is now bounded
   by the roster on the left and the utility rail on the right, and starts below the bar. */
#forces-legend{
  position:absolute;left:306px;right:216px;top:calc(var(--top-h,90px) + 44px);transform:none;z-index:24;
  display:none;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 16px;border:1px solid var(--line);
  background:var(--panel);border-radius:3px;padding:8px 16px;
}
#forces-legend.show{display:flex;}
#forces-legend .fl-keys{display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px;flex:0 1 auto;min-width:0;}
#forces-legend .fl-item{font-size:0.84rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;}
#forces-legend .fl-item.us{color:#6aa3d8;}
#forces-legend .fl-item.ally{color:#5ec98c;}
#forces-legend .fl-item.twn{color:#f2b441;}
#forces-legend .fl-item.pla{color:#e06b5a;}
#forces-legend .fl-item.energy{color:#b88ce0;}
/* the note used to squeeze itself to ~107px and grow tall enough to reach the dock */
/* one line, ellipsised — the full text is on the element title. Wrapping made the bar tall
   enough to reach the dock. */
/* a real floor: the keys row wraps before the caveat is allowed to collapse to nothing */
#forces-legend .fl-note{font-size:0.7813rem;letter-spacing:.04em;color:var(--ink-faint);flex:1 1 180px;min-width:160px;}

/* ---------- force posture roster (grouped faction boxes) ---------- */
#force-roster{
  position:absolute;left:0;top:var(--top-h,90px);bottom:var(--bot-h,var(--dock-h,0px));z-index:33;width:292px;overflow:hidden;
  border-right:1px solid var(--line-bright);
  background:linear-gradient(180deg,rgba(7,12,20,.975),rgba(5,9,15,.985));
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateX(-10px);
  transition:opacity .26s ease, transform .26s ease;pointer-events:none;
}
#force-roster.show{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
.fr-head{flex:0 1 auto;min-height:0;max-height:52%;overflow:hidden auto;padding:15px 16px 11px;border-bottom:1px solid var(--line);
  font-family:var(--font-data);font-size:0.91rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);font-weight:700;display:flex;flex-direction:column;gap:5px;}
/* the ONLY scrolling region in the roster — the head and the layers footer stay put, so
   Map Layers is reachable at 820px (iPad landscape) and 900px, not only at 1080px */
.fr-body{flex:1 1 0;min-height:0;overflow:hidden auto;padding:10px 10px 18px;}
.fr-body::-webkit-scrollbar{width:8px;}
.fr-body::-webkit-scrollbar-thumb{background:var(--line-bright);border-radius:4px;}
.fr-group{margin-bottom:13px;}
.fr-gh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:5px 6px 6px;border-bottom:1px solid var(--line);margin-bottom:5px;cursor:pointer;border-radius:2px;}
.fr-gh:hover{background:rgba(90,209,230,.06);}
.fr-group.off .fr-gl{opacity:.45;text-decoration:line-through;text-decoration-thickness:1px;}
.fr-group.off .fr-gc::after{content:" · hidden";letter-spacing:.08em;}
.fr-group.off .fr-list{opacity:.3;}
.fr-group.off .fr-item{pointer-events:none;}
.fr-gl{font-size:0.7813rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;}
.fr-gc{font-size:0.7188rem;color:var(--ink-faint);font-family:var(--font-data);}
.fr-group.us .fr-gl{color:#6aa3d8;}
.fr-group.ally .fr-gl{color:#5ec98c;}
.fr-group.twn .fr-gl{color:#f2b441;}
.fr-group.pla .fr-gl{color:#e06b5a;}
.fr-group.energy .fr-gl{color:#b88ce0;}
.fr-list{display:flex;flex-direction:column;gap:2px;}
.fr-item{display:flex;flex-direction:column;gap:1px;text-align:left;width:100%;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:2px;padding:5px 9px;}
.fr-item:hover{background:rgba(90,209,230,.06);border-color:var(--line-bright);}
.fr-item.on{background:rgba(90,209,230,.11);border-color:var(--cyan-soft);}
.fr-name{font-size:0.84rem;color:var(--ink);font-family:var(--font-data);letter-spacing:.02em;line-height:1.35;}
.fr-sub{font-size:0.7188rem;color:var(--ink-faint);letter-spacing:.04em;}
.fr-filter{margin-top:5px;width:100%;box-sizing:border-box;background:rgba(10,18,28,.8);border:1px solid var(--line);border-radius:2px;color:var(--ink);font-family:var(--font-data);font-size:0.7813rem;letter-spacing:.04em;padding:6px 8px;}
.fr-filter:focus{outline:none;border-color:var(--cyan-soft);}
.fr-item.kbd{background:rgba(90,209,230,.14);border-color:var(--cyan-soft);}
.fr-empty{font-size:0.7813rem;color:var(--ink-faint);padding:10px 6px;}
/* time-to-fight sort toggle + badge */
.fr-sort{display:flex;gap:4px;margin-top:3px;}
.fr-sb{flex:1;font-family:var(--font-data);font-size:0.7188rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);background:rgba(10,18,28,.8);border:1px solid var(--line);border-radius:2px;padding:5px 6px;cursor:pointer;}
.fr-sb:hover{border-color:var(--line-bright);color:var(--ink);}
.fr-sb.on{color:var(--amber);border-color:var(--amber-soft);background:rgba(242,180,65,.08);}
.fr-item.has-ttf .fr-name{padding-right:56px;}
.fr-item{position:relative;}
.fr-ttf{position:absolute;top:5px;right:8px;font-family:var(--font-data);font-size:0.7188rem;letter-spacing:.06em;font-weight:700;color:var(--amber);background:rgba(242,180,65,.1);border:1px solid var(--amber-soft);border-radius:2px;padding:1px 5px;white-space:nowrap;}
.fr-group.arrival .fr-gl{color:var(--amber);}
.fr-posture{margin-top:8px;font-family:var(--font-data);font-size:0.7188rem;letter-spacing:.04em;color:var(--ink-dim);background:rgba(10,18,28,.7);border:1px solid var(--line);border-left:2px solid var(--cyan-soft,#2a4b57);border-radius:2px;padding:6px 8px;line-height:1.5;}
.fr-posture b{color:var(--ink);font-weight:700;}
.fr-posture.hot{border-left-color:var(--red);color:var(--ink);}
.fr-posture.hot b{color:var(--amber);}

/* clock jump presets (in dock tempo) */
.tempo .clk-jump{font-size:0.7188rem;letter-spacing:.05em;}
.tempo .clk-jump:hover{background:rgba(90,209,230,.12);color:var(--cyan);}

/* ---------- map layers panel ---------- */
#layers{
  position:absolute;right:118px;top:calc(50% - 44px);z-index:34;width:214px;
  border:1px solid var(--line);border-top:2px solid var(--cyan);border-radius:3px;
  background:linear-gradient(180deg,rgba(9,15,24,.98),rgba(6,11,18,.99));
  padding:10px;display:none;flex-direction:column;gap:3px;box-shadow:0 18px 50px rgba(0,0,0,.55);
}
#layers.show{display:flex;}
.lyr-head{font-family:var(--font-data);font-size:0.7188rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);padding:2px 4px 7px;border-bottom:1px solid var(--line);margin-bottom:4px;}
.lyr-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:2px;padding:6px 8px;
  font-family:var(--font-data);font-size:0.7813rem;letter-spacing:.04em;color:var(--ink-dim);}
.lyr-item:hover{color:var(--ink);background:rgba(90,209,230,.06);}
.lyr-item .lyr-chk{width:13px;height:13px;flex:0 0 auto;border:1px solid var(--ink-faint);border-radius:2px;position:relative;}
.lyr-item.on{color:var(--ink);}
.lyr-item.on .lyr-chk{background:var(--cyan);border-color:var(--cyan);}
.lyr-item.on .lyr-chk::after{content:"";position:absolute;left:3.5px;top:1px;width:3px;height:6px;border:solid #06121c;border-width:0 2px 2px 0;transform:rotate(45deg);}

/* ---------- opening situation sequence ---------- */
#opening{position:absolute;inset:0;z-index:39;display:none;pointer-events:none;}
#opening.show{display:block;}
@keyframes opIn{from{opacity:0;transform:translateX(-50%) translateY(10px);}to{opacity:1;transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){}
#opening .op-title{font-size:1.375rem;font-weight:700;color:#eaf3fb;margin-bottom:6px;}

/* ---------- home front (U.S. public opinion) panel ---------- */
#homefront{
  position:absolute;right:140px;top:96px;z-index:34;width:400px;max-width:88vw;
  border:1px solid var(--line);border-top:2px solid var(--amber);border-radius:3px;
  background:linear-gradient(180deg,rgba(9,15,24,.98),rgba(6,11,18,.99));
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s ease, transform .25s ease;
}
#homefront.show{opacity:1;visibility:visible;transform:none;}
#homefrontbtn.on{color:var(--amber);border-color:var(--amber-soft);}
.hf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 16px 11px;border-bottom:1px solid var(--line);}
.hf-title{font-size:1.0625rem;font-weight:700;color:#eaf3fb;}
.hf-sub{font-size:0.7188rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:3px;}
.hf-live{color:var(--red);margin-left:6px;animation:hfBlink 1.4s steps(2) infinite;}
@keyframes hfBlink{50%{opacity:.25;}}
@media (prefers-reduced-motion:reduce){.hf-live{animation:none;}}
.hf-bar i{transition:width .35s ease;}
.hf-x{background:transparent;border:1px solid var(--line);color:var(--ink-dim);font-size:0.7813rem;padding:5px 9px;border-radius:2px;cursor:pointer;}
.hf-x:hover{color:var(--ink);border-color:var(--ink-dim);}
.hf-body{padding:12px 16px 14px;display:flex;flex-direction:column;gap:14px;max-height:min(560px,calc(100vh - 260px));overflow-y:auto;}
.hf-k{font-size:0.91rem;font-weight:700;color:#dce8f4;margin-bottom:6px;}
.hf-bar{display:flex;gap:2px;height:9px;border-radius:2px;overflow:hidden;background:rgba(20,34,49,.6);margin-bottom:5px;}
.hf-bar .for{background:var(--cyan);opacity:.85;}
.hf-bar .against{background:var(--red);opacity:.75;}
.hf-v{display:flex;justify-content:space-between;font-family:var(--font-data);font-size:0.84rem;}
.hf-v .for{color:var(--cyan);}
.hf-v .against{color:var(--red);}
/* evacuation poll — fixed violet/slate scheme, distinct from the accent-driven force rows regardless of the accent tweak */
#homefront [data-hf="evac"] .hf-bar .for{background:#b57fe6;opacity:.9;}
#homefront [data-hf="evac"] .hf-bar .against{background:#566575;opacity:.85;}
#homefront [data-hf="evac"] .hf-v .for{color:#c79cf0;}
#homefront [data-hf="evac"] .hf-v .against{color:#93a3b5;}
.hf-n{font-size:0.7813rem;color:var(--ink-faint);margin-top:4px;line-height:1.45;}
.hf-list{display:flex;flex-direction:column;gap:5px;font-size:0.875rem;color:var(--ink);line-height:1.45;}
.hf-list b{color:var(--amber);font-family:var(--font-data);}
.hf-foot{font-size:0.6875rem;letter-spacing:.08em;color:var(--ink-faint);border-top:1px solid var(--line);padding-top:9px;text-transform:uppercase;}

/* ---------- info-ops inject accent ---------- */
.inj.info .tab{background:rgba(192,114,224,.16);color:var(--info);}
.inj.info.fired{border-color:var(--info-soft);}
.inj.info.active{border-color:var(--info);box-shadow:0 0 0 1px var(--info-soft);}
#cable.info{border-left-color:var(--info);}
#cable.info .chead{background:rgba(192,114,224,.08);}
#cable.info .ctag{color:var(--info);}

/* private role-stressor injects: keyboard-only (hidden from the button row) + operator card */
.inj.private{display:none;}
#privatecard{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.98);z-index:52;
  width:min(90vw,560px);border:1px solid var(--red-soft);border-top:3px solid var(--red);border-radius:4px;
  background:linear-gradient(180deg,rgba(20,10,10,.98),rgba(12,7,7,.99));box-shadow:0 30px 90px rgba(0,0,0,.75);
  opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(.98);transition:opacity .2s ease,transform .2s ease;padding:20px 24px 18px;
}
#privatecard.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);}
.pv-tag{font-size:0.7813rem;letter-spacing:.24em;text-transform:uppercase;color:var(--red);font-weight:700;}
.pv-to{font-size:1.05rem;color:#f4c4bc;margin-top:9px;font-weight:700;}
.pv-body{margin-top:11px;}
.pv-body p{font-size:1.05rem;line-height:1.55;color:var(--ink);margin:0 0 10px;text-wrap:pretty;}
.pv-x{position:absolute;right:16px;top:14px;margin-top:0;background:transparent;border:1px solid var(--line);color:var(--ink-dim);font-family:var(--font-data);font-size:0.7813rem;letter-spacing:.16em;text-transform:uppercase;padding:7px 14px;border-radius:2px;cursor:pointer;}
.pv-x:hover{color:var(--ink);border-color:var(--ink-dim);}

/* #1 on-deck cue */
.ondeck{font-family:var(--font-data);font-size:0.7188rem;letter-spacing:.04em;text-transform:none;color:var(--ink-faint);}
.ondeck b{color:var(--amber);font-weight:700;letter-spacing:.1em;}

/* #2 escalation posture master */
.esc-seg{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;}
.esc-seg button{font-family:var(--font-data);font-size:0.7188rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);background:transparent;border:none;border-left:1px solid var(--line);padding:7px 11px;cursor:pointer;white-space:nowrap;}
.esc-seg button:first-child{border-left:none;}
.esc-seg button:hover{color:var(--ink);}
.esc-seg button.on[data-esc="calm"]{background:rgba(90,209,230,.16);color:var(--cyan);}
.esc-seg button.on[data-esc="squeeze"]{background:rgba(244,177,74,.18);color:var(--amber);}
.esc-seg button.on[data-esc="crisis"]{background:rgba(244,120,74,.2);color:#f0794a;}
.esc-seg button.on[data-esc="kinetic"]{background:rgba(255,93,70,.22);color:var(--red);}

/* #3 cable decision-tags line (room-facing) */
.cdec{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.cdec:empty{display:none;}
.cdec .cdec-k{font-family:var(--font-data);font-size:0.84rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);}
.cdec .cdec-tag{font-size:0.98rem;font-weight:600;color:#eaf3fb;background:rgba(90,209,230,.12);border:1px solid var(--cyan-soft);border-radius:3px;padding:4px 11px;}
.fv-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 22px 14px;border-bottom:1px solid var(--line);}
.fv-title{font-size:1.375rem;font-weight:700;color:#f3e9d6;}
.fv-sub{font-size:0.7813rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-top:3px;}
.fv-x{background:transparent;border:1px solid var(--line);color:var(--ink-dim);font-size:0.84rem;padding:6px 10px;border-radius:2px;cursor:pointer;}
.fv-x:hover{color:var(--ink);border-color:var(--ink-dim);}
@media (max-width:680px){}
@media (max-width:720px){}

/* ---------- FLASH: room-facing personal-emergency bulletin (H/I) ---------- */
#flash{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 42%,rgba(40,8,8,.90),rgba(4,3,4,.975));
  opacity:0;visibility:hidden;transition:opacity .32s ease;padding:6vh 6vw;
}
#flash.show{opacity:1;visibility:visible;}
#flash.show .fl-inner{transform:none;opacity:1;}
.fl-inner{
  max-width:1000px;text-align:center;transform:translateY(14px) scale(.99);opacity:0;
  transition:transform .45s cubic-bezier(.2,.7,.2,1) .06s,opacity .45s ease .06s;
}
.fl-eyebrow{
  font-family:var(--font-data);font-size:clamp(13px,1.5vw,18px);letter-spacing:.5em;text-transform:uppercase;
  color:#ff6a54;font-weight:600;
}
.fl-eyebrow::before{content:"\25c9  ";}
.fl-to{
  font-family:var(--font-data);font-size:clamp(12px,1.35vw,17px);letter-spacing:.24em;text-transform:uppercase;
  color:#e9c3bc;margin-top:20px;
}
.fl-title{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(38px,6vw,86px);line-height:1.02;letter-spacing:.01em;color:#fff;margin-top:16px;
  text-shadow:0 0 60px rgba(255,80,60,.28);text-wrap:balance;
}
.fl-msg{
  font-size:clamp(17px,2.1vw,29px);line-height:1.5;color:#f3e2df;margin:26px auto 0;max-width:26ch;text-wrap:pretty;
}
.fl-x{
  position:absolute;right:22px;top:18px;background:transparent;border:1px solid rgba(255,120,100,.4);
  color:#e9a99f;font-family:var(--font-data);font-size:0.7813rem;letter-spacing:.2em;text-transform:uppercase;
  padding:8px 14px;border-radius:2px;cursor:pointer;
}
.fl-x:hover{color:#fff;border-color:rgba(255,120,100,.8);}
#flash.show{animation:flPulse 2.6s ease-in-out infinite;}
@keyframes flPulse{0%,100%{background:radial-gradient(120% 90% at 50% 42%,rgba(40,8,8,.90),rgba(4,3,4,.975));}50%{background:radial-gradient(120% 90% at 50% 42%,rgba(58,10,10,.93),rgba(6,3,4,.98));}}
@media (prefers-reduced-motion:reduce){
  #flash.show{animation:none;}
  .fl-inner{transition:none;transform:none;opacity:1;}
}

/* ---------- PRC info-ops campaign board ---------- */
#propaganda{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-52%) scale(.98);
  z-index:50;width:min(92vw,1000px);max-height:90vh;display:flex;flex-direction:column;
  border:1px solid var(--line-bright);border-top:3px solid var(--info);border-radius:5px;
  background:linear-gradient(180deg,rgba(13,8,18,.97),rgba(9,6,14,.985));
  box-shadow:0 0 0 100vmax rgba(3,5,9,.72), 0 40px 120px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease;
}
#propaganda.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);}

/* ---------- allied publics poll ---------- */
#allies{
  position:absolute;right:140px;top:96px;z-index:35;width:528px;max-width:92vw;
  max-height:calc(100vh - 120px);overflow-y:auto;
  border:1px solid var(--line);border-top:2px solid var(--cyan);border-radius:3px;
  background:linear-gradient(180deg,rgba(8,14,22,.96),rgba(6,11,18,.975));
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s ease,transform .25s ease;
}
#allies.show{opacity:1;visibility:visible;transform:none;}
#alliesbtn.on{color:var(--cyan);border-color:var(--cyan-soft);}
.al-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 16px 11px;border-bottom:1px solid var(--line);}
.al-title{font-size:1.0625rem;font-weight:700;color:#eaf3fb;}
.al-sub{font-size:0.7188rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:3px;}
.al-x{background:transparent;border:1px solid var(--line);color:var(--ink-dim);font-size:0.7813rem;padding:5px 9px;border-radius:2px;cursor:pointer;}
.al-x:hover{color:var(--ink);border-color:var(--ink-dim);}
.al-body{padding:13px 16px 15px;display:flex;flex-direction:column;gap:13px;}
.al-axis{display:flex;justify-content:space-between;font-size:0.7188rem;letter-spacing:.07em;text-transform:uppercase;gap:10px;font-weight:700;}
.al-axis .l{color:var(--red);}
.al-axis .r{color:var(--cyan);text-align:right;}
.al-rows{display:flex;flex-direction:column;gap:11px;}
.al-row{display:grid;grid-template-columns:112px 1fr 112px;align-items:center;gap:12px;}
.al-name{font-size:0.875rem;font-weight:700;color:#dce8f4;}
.al-track{position:relative;height:11px;border-radius:6px;
  background:linear-gradient(90deg,#e5484d 0%,#c14b3f 26%,rgba(120,110,96,.4) 50%,#3f9ec4 74%,#46d3ff 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 0 14px rgba(0,0,0,.35);}
.al-track::before{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:rgba(255,255,255,.22);}
.al-needle{position:absolute;top:50%;left:50%;width:4px;height:22px;background:#fff;border-radius:2px;transform:translate(-50%,-50%);box-shadow:0 0 10px rgba(255,255,255,.85),0 0 3px rgba(255,255,255,1);transition:left .55s cubic-bezier(.4,0,.2,1);}
.al-read{font-size:0.7188rem;letter-spacing:.08em;text-transform:uppercase;text-align:right;font-weight:700;color:var(--ink-dim);}
.al-read.a0{color:#ff5d46;}
.al-read.a1{color:#e08f6a;}
.al-read.a2{color:#7fc0d8;}
.al-read.a3{color:var(--cyan);}
.al-ctrl{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:12px;}
.al-ctrl-k{font-size:0.7188rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px;}
.al-stance-row{display:flex;align-items:center;gap:10px;}
.al-stance-row .lab{font-size:0.6563rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap;}
.al-stance{flex:1;accent-color:var(--cyan);cursor:pointer;}
.al-evs{display:flex;flex-wrap:wrap;gap:7px;}
.al-ev{font-family:var(--font-data);font-size:0.7188rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);background:rgba(20,34,49,.5);border:1px solid var(--line);border-radius:2px;padding:6px 10px;cursor:pointer;}
.al-ev:hover{color:var(--ink);border-color:var(--ink-dim);}
.al-ev[data-ev="info"].on{color:var(--info);border-color:var(--info-soft);background:rgba(192,114,224,.1);}
.al-ev[data-ev="over"].on{color:var(--cyan);border-color:var(--cyan-soft);background:rgba(90,209,230,.1);}
.al-ev[data-ev="nk"].on{color:var(--red);border-color:var(--red-soft);background:rgba(255,93,70,.1);}
.dc-k{display:block;font-size:0.625rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dc-bar{position:relative;height:4px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden;}
.dc-bar > i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--cyan);transition:width .28s linear,background .4s ease;}
@keyframes susflash{0%{background:rgba(255,93,70,.28);}100%{background:transparent;}}
@media (prefers-reduced-motion:no-preference){
}
@keyframes susdrain{50%{opacity:.68;}}
@media (prefers-reduced-motion:reduce){}
.al-foot{font-size:0.6875rem;letter-spacing:.05em;color:var(--ink-faint);border-top:1px solid var(--line);padding-top:9px;text-transform:uppercase;line-height:1.55;}
.al-title{font-size:1.375rem;}
.al-sub{font-size:0.7813rem;}
.al-name{font-size:1.0313rem;}
.al-read{font-size:0.91rem;letter-spacing:.04em;}
.al-axis{font-size:0.84rem;}
.al-ctrl-k{font-size:0.7813rem;}

/* ---------- broadcast: big room-facing bulletin ---------- */
#broadcast{
  position:absolute;left:50%;top:47%;transform:translate(-50%,-50%) scale(.98);
  z-index:55;width:min(74vw,1120px);
  border:1px solid var(--line-bright);border-top:3px solid var(--amber);border-radius:5px;
  background:linear-gradient(180deg,rgba(9,14,22,.975),rgba(6,11,18,.985));
  box-shadow:0 40px 120px rgba(0,0,0,.8), 0 0 90px rgba(244,177,74,.08);
  opacity:0;visibility:hidden;transition:opacity .3s ease, transform .3s ease;
}
#broadcast.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);}
.bc-inner{padding:42px 58px 36px;}
.bc-eyebrow{font-size:1.125rem;letter-spacing:.4em;text-transform:uppercase;color:var(--amber);font-weight:700;}
.bc-eyebrow:empty{display:none;}
.bc-title{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,4.8vw,62px);line-height:1.03;color:#f3f8fc;margin-top:14px;letter-spacing:.01em;text-wrap:balance;text-shadow:0 0 50px rgba(244,177,74,.18);}
.bc-body{font-size:clamp(18px,1.9vw,26px);line-height:1.5;color:var(--ink);margin-top:22px;max-width:64ch;text-wrap:pretty;}
.bc-body:empty{display:none;}
.bc-x{position:absolute;right:16px;top:14px;background:transparent;border:1px solid var(--line);color:var(--ink-dim);font-family:var(--font-data);font-size:0.7813rem;letter-spacing:.2em;padding:6px 11px;border-radius:2px;cursor:pointer;text-transform:uppercase;}
.bc-x:hover{color:var(--ink);border-color:var(--ink-dim);}

/* ---------- operator tools (backstage; hidden when projecting) ---------- */
#opbanner{
  display:none;position:absolute;left:50%;top:72px;transform:translateX(-50%);z-index:48;
  font-size:0.7188rem;letter-spacing:.2em;text-transform:uppercase;color:#0a0f14;background:var(--red);
  padding:4px 15px;border-radius:2px;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.5);
}
#opbanner b{text-decoration:underline;}
#stage.live:not(.project) #opbanner{display:block;}
#operator{
  position:absolute;right:14px;top:96px;z-index:47;width:402px;max-width:92vw;
  border:1px solid var(--line-bright);border-top:2px solid var(--red);border-radius:3px;
  background:linear-gradient(180deg,rgba(13,9,11,.975),rgba(8,6,8,.985));
  box-shadow:0 24px 70px rgba(0,0,0,.65);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease, transform .2s ease;
}
#operator.show{opacity:1;visibility:visible;transform:none;}
.op-head{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-bottom:1px solid var(--line);}
.op-h{font-size:1.05rem;font-weight:700;color:#f4dede;letter-spacing:.04em;}
.op-x{background:transparent;border:1px solid var(--line);color:var(--ink-dim);font-size:0.7813rem;padding:4px 8px;border-radius:2px;cursor:pointer;}
.op-x:hover{color:var(--ink);border-color:var(--ink-dim);}
.op-body{padding:13px 15px;display:flex;flex-direction:column;gap:16px;max-height:min(72vh,640px);overflow-y:auto;}
.op-sec{display:flex;flex-direction:column;gap:8px;}
.op-k{font-size:0.7188rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);line-height:1.4;}
.op-warn{color:var(--red);}
.op-in{width:100%;font-family:var(--font-data);font-size:0.91rem;background:rgba(20,16,18,.55);border:1px solid var(--line);border-radius:2px;color:var(--ink);padding:8px 10px;}
.op-in:focus{outline:none;border-color:var(--amber-soft);}
.op-btns{display:flex;gap:8px;}
.op-go{flex:1;font-family:var(--font-data);font-size:0.84rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(244,177,74,.14);color:var(--amber);border:1px solid var(--amber-soft);border-radius:2px;padding:9px;cursor:pointer;}
.op-go:hover{background:rgba(244,177,74,.22);}
.op-sec-btn{font-family:var(--font-data);font-size:0.7813rem;letter-spacing:.08em;text-transform:uppercase;background:transparent;color:var(--ink-dim);border:1px solid var(--line);border-radius:2px;padding:9px 12px;cursor:pointer;}
.op-sec-btn:hover{color:var(--ink);border-color:var(--ink-dim);}
.op-presets{display:flex;flex-direction:column;gap:7px;}
.op-preset{text-align:left;font-family:var(--font-data);font-size:0.84rem;color:var(--ink);background:rgba(20,34,49,.4);border:1px solid var(--line);border-radius:2px;padding:9px 11px;cursor:pointer;}
.op-preset:hover{border-color:var(--ink-dim);color:#eaf3fb;}
.op-note{font-size:0.7188rem;color:var(--ink-faint);line-height:1.55;}
.op-private{border-top:1px solid var(--line);padding-top:12px;}
#optoolsbtn.on{color:var(--red);border-color:var(--red-soft);}
.op-btns .op-in{flex:1;width:auto;}
.op-log{max-height:132px;overflow-y:auto;border:1px solid var(--line);border-radius:2px;background:rgba(0,0,0,.25);padding:7px 9px;display:flex;flex-direction:column;gap:4px;}
.op-log:empty::before{content:"No events logged yet.";color:var(--ink-faint);font-size:0.7813rem;}
.op-log-row{font-size:0.7813rem;line-height:1.4;color:var(--ink-dim);}
.op-log-row .lt{color:var(--ink-faint);}
.op-log-row .le{color:var(--cyan);font-weight:700;}
.op-log-row.note .le{color:var(--amber);}

/* decision tracker — options pick-list */
.dec-options{margin-top:12px;}
.dec-opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}
.dec-opt{font-family:var(--font-data);font-size:0.7813rem;color:var(--ink-dim);background:rgba(20,34,49,.45);border:1px solid var(--line);border-radius:2px;padding:6px 9px;cursor:pointer;text-align:left;}
.dec-opt:hover{color:var(--ink);border-color:var(--ink-dim);}
.dec-opt b{color:var(--ink-faint);margin-right:3px;}
.dec-opt.on{color:var(--cyan);border-color:var(--cyan-soft);background:rgba(90,209,230,.1);}
.dec-opt.on b{color:var(--cyan);}

/* ---------- scenario brief drawer ---------- */
#brief{
  position:absolute;left:0;top:0;bottom:0;z-index:46;width:560px;max-width:94vw;
  border-right:2px solid var(--cyan);
  background:linear-gradient(180deg,rgba(8,13,21,.99),rgba(6,11,18,.99));
  box-shadow:26px 0 70px rgba(0,0,0,.6);display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateX(-16px);transition:opacity .26s ease, transform .26s ease;
}
#brief.show{opacity:1;visibility:visible;transform:none;}
.br-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--line);}
.br-title{font-size:1.375rem;font-weight:700;color:#eaf3fb;}
.br-sub{font-size:0.84rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:3px;}
.br-x{background:transparent;border:1px solid var(--line);color:var(--ink-dim);font-size:0.84rem;padding:6px 10px;border-radius:2px;cursor:pointer;}
.br-x:hover{color:var(--ink);border-color:var(--ink-dim);}
.br-body{flex:1;overflow-y:auto;padding:14px 22px 26px;display:flex;flex-direction:column;gap:18px;}
.br-k{display:flex;align-items:center;gap:8px;font-size:1.0625rem;font-weight:700;color:#dce8f4;margin-bottom:8px;}
.br-tag{font-size:0.7188rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--cyan);border:1px solid var(--cyan-soft);border-radius:2px;padding:2px 6px;white-space:nowrap;}
.br-tag.d1,.br-tag.d2,.br-tag.d3,.br-tag.d4,.br-tag.d5{color:var(--amber);border-color:var(--amber-soft);}
.br-sec p{font-size:1.12rem;line-height:1.6;color:var(--ink);text-wrap:pretty;margin:0 0 8px;}
.br-note{font-size:0.945rem;color:var(--ink-dim) !important;}
.br-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;}
.br-list li{font-size:1.085rem;line-height:1.55;color:var(--ink);text-wrap:pretty;}
.br-list li b{color:#dce8f4;}
.br-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px;}
.br-card{border:1px solid var(--line);border-radius:3px;padding:12px 14px;font-size:0.98rem;line-height:1.55;color:var(--ink-dim);background:rgba(10,18,28,.5);}
.br-ct{font-size:1.05rem;font-weight:700;color:#dce8f4;margin-bottom:5px;}
.br-ct span{font-weight:400;color:var(--ink-faint);font-size:0.875rem;}

#cable-undo{margin-right:6px;}
.dec-pdd{color:#06121c !important;background:var(--cyan) !important;border-color:var(--cyan) !important;}

/* ---------- printable Presidential Decision Directive ---------- */
#pdd-print{display:none;}
@media print{
  body.printing-pdd > *:not(#pdd-print){display:none !important;}
  body.printing-pdd #pdd-print{display:block !important;position:static;}
  .pdd-doc{color:#0b0f14;background:#fff;font-family:Georgia,'Times New Roman',serif;max-width:760px;margin:0 auto;}
  .pdd-class{font-family:ui-monospace,Menlo,monospace;font-size:0.7188rem;letter-spacing:.14em;text-align:center;border-bottom:1px solid #999;padding-bottom:6px;margin-bottom:18px;color:#333;}
  .pdd-doc h1{font-size:1.5rem;margin:0 0 2px;}
  .pdd-sub{font-size:0.91rem;color:#444;margin-bottom:4px;}
  .pdd-meta{font-family:ui-monospace,Menlo,monospace;font-size:0.7188rem;color:#666;margin-bottom:18px;}
  .pdd-q{margin-bottom:16px;page-break-inside:avoid;}
  .pdd-qh{display:flex;align-items:baseline;gap:8px;border-bottom:1px solid #ccc;padding-bottom:3px;margin-bottom:5px;}
  .pdd-n{font-weight:700;}
  .pdd-t{font-weight:700;font-size:1.05rem;flex:1;}
  .pdd-st{font-family:ui-monospace,Menlo,monospace;font-size:0.7188rem;letter-spacing:.1em;color:#666;}
  .pdd-prompt{font-size:0.84rem;color:#555;font-style:italic;margin-bottom:4px;}
  .pdd-ans{font-size:0.91rem;line-height:1.5;}
  .pdd-final{margin-top:20px;border-top:2px solid #333;padding-top:10px;page-break-inside:avoid;}
  .pdd-final-k{font-weight:700;margin-bottom:6px;}
  .pdd-final-v{font-size:0.91rem;line-height:1.55;}
  .pdd-foot{margin-top:24px;font-family:ui-monospace,Menlo,monospace;font-size:0.6563rem;letter-spacing:.12em;color:#888;text-align:center;border-top:1px solid #ccc;padding-top:8px;}
}

/* ---------- force detail card (click a marker) ---------- */
#force-card{
  position:absolute;z-index:28;width:300px;
  border:1px solid var(--line);border-top:2px solid var(--ink-dim);
  background:linear-gradient(180deg,rgba(9,15,24,.98),rgba(6,11,18,.99));
  box-shadow:0 18px 50px rgba(0,0,0,.6);border-radius:3px;padding:14px 16px;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease, transform .18s ease;
}
#force-card.show{opacity:1;visibility:visible;transform:none;}
#force-card.us{border-top-color:#6aa3d8;}
#force-card.ally{border-top-color:#5ec98c;}
#force-card.twn{border-top-color:#f2b441;}
#force-card.pla{border-top-color:#e06b5a;}
#force-card.energy{border-top-color:#b88ce0;}
#force-card .fc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px;}
#force-card .fc-side{font-size:0.84rem;letter-spacing:.18em;font-weight:700;text-transform:uppercase;}
#force-card.us .fc-side{color:#6aa3d8;}
#force-card.ally .fc-side{color:#5ec98c;}
#force-card.twn .fc-side{color:#f2b441;}
#force-card.pla .fc-side{color:#e06b5a;}
#force-card.energy .fc-side{color:#b88ce0;}
#force-card .fc-sub{font-size:0.7813rem;letter-spacing:.1em;color:var(--ink-dim);text-transform:uppercase;}
#force-card .fc-name{font-size:1.12rem;color:#eaf3fb;font-weight:700;line-height:1.2;margin-bottom:8px;}
#force-card .fc-detail{font-size:0.91rem;line-height:1.55;color:var(--ink);text-wrap:pretty;}
#force-card .fc-foot{margin-top:11px;padding-top:9px;border-top:1px solid var(--line);font-size:0.7188rem;letter-spacing:.08em;color:var(--ink-faint);text-transform:uppercase;}

/* ===================================================================
   Shared live-build UI — used by BOTH student.html and red-cell.html.
   (Was duplicated inline in each; consolidated here so they cannot drift.)
   =================================================================== */
  /* student live build: the map, plus injects the facilitator releases live. */
  #titlecard .deck{ max-width: 720px; }
  #labelsbtn.on{ color: var(--amber); border-color: var(--amber-soft); }

  /* the status chip doubles as the live-link indicator */
  #status-chip .val{ color: var(--ink-dim); }
  #status-chip.ls-on .dot{ background: #46d39a; box-shadow: 0 0 8px rgba(70,211,154,.8); }
  #status-chip.ls-on .val{ color: #7fe0b0; }
  #status-chip.ls-wait .dot{ background: #f4b14a; }
  #status-chip.ls-off .dot{ background: #64707b; }

  /* student cable: hide the operator-only close controls; keep a plain dismiss */
  #cable .cfoot .read{ color: var(--ink-dim); letter-spacing: .05em; }
  #cable.review{ box-shadow: 0 18px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(90,209,230,.25); }

  /* past-injects archive */
  #pastbtn{ position: relative; }
  #past-count{
    display: none; margin-left: auto; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: var(--cyan); color: #06121c;
    font: 700 0.7188rem/16px var(--font-data); text-align: center;
  }
  #pastinjects{
    position: absolute; right: 118px; top: 92px; z-index: 35; width: 280px;
    max-height: calc(100vh - 300px); display: none; flex-direction: column;
    background: var(--panel-solid); border: 1px solid var(--line); border-top: 2px solid var(--cyan);
    border-radius: 3px; box-shadow: 0 18px 50px rgba(0,0,0,.55);
  }
  #pastinjects.show{ display: flex; }
  #pastinjects .pi-head{
    display: flex; align-items: center; justify-content: space-between;
    font: 0.7188rem/1 var(--font-data); letter-spacing: .2em; text-transform: uppercase;
    color: var(--cyan); padding: 10px 12px; border-bottom: 1px solid var(--line);
  }
  #pastinjects .pi-x{ background: none; border: 0; color: var(--ink-dim); cursor: pointer; font-size:0.91rem; }
  #pastinjects .pi-x:hover{ color: var(--ink); }
  #pastinjects .pi-list{ overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 3px; }
  .pi-item{
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
    background: transparent; border: 1px solid transparent; border-left: 2px solid var(--ink-faint);
    border-radius: 2px; padding: 8px 9px; color: var(--ink-dim); font: 0.84rem/1.35 var(--font-data);
  }
  .pi-item:hover{ color: var(--ink); background: rgba(90,209,230,.06); }
  .pi-item.alert{ border-left-color: var(--red, #c0453a); }
  .pi-item.reward{ border-left-color: #46d39a; }
  .pi-item.info{ border-left-color: var(--amber, #f4b14a); }
  .pi-item .pi-tag{ font-size:0.5938rem; letter-spacing: .12em; color: var(--ink-faint); flex: 0 0 auto; }
  .pi-item .pi-nm{ flex: 1; color: inherit; letter-spacing: .02em; }
  .pi-item .pi-num{ font-size:0.6563rem; color: var(--ink-faint); flex: 0 0 auto; }
  #pastinjects .pi-empty{ padding: 16px 12px; color: var(--ink-faint); font: 0.7813rem/1.4 var(--font-data); text-align: center; }

  /* "Student Console" identifier */
  .student-tag{
    font: 700 0.7188rem/1 var(--font-data); letter-spacing: .22em; text-transform: uppercase;
    color: var(--amber); margin-bottom: 5px;
  }

  /* live readout panel */
  #readout{
    position: absolute; right: 118px; top: 92px; z-index: 35; width: 300px;
    max-height: calc(100vh - 300px); overflow-y: auto; display: none; flex-direction: column;
    background: var(--panel-solid); border: 1px solid var(--line); border-top: 2px solid var(--cyan);
    border-radius: 3px; box-shadow: 0 18px 50px rgba(0,0,0,.55);
  }
  #readout.show{ display: flex; }
  #readout .ro-head{
    display: flex; align-items: center; justify-content: space-between;
    font: 0.7813rem/1 var(--font-data); letter-spacing: .2em; text-transform: uppercase;
    color: var(--cyan); padding: 12px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel-solid);
  }
  #readout .ro-x{ background: none; border: 0; color: var(--ink-dim); cursor: pointer; font-size:0.98rem; }
  #readout .ro-x:hover{ color: var(--ink); }
  .ro-sec{ padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .ro-sec:last-child{ border-bottom: 0; }
  .ro-sec-h{ display: flex; align-items: center; justify-content: space-between; font: 0.7188rem/1.2 var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 10px; }
  .ro-line{ margin: 8px 0; }
  .ro-line-top{ display: flex; justify-content: space-between; font: 0.8125rem/1.2 var(--font-data); color: var(--ink-dim); margin-bottom: 5px; letter-spacing: .02em; }
  .ro-line-top b{ color: var(--ink); font-weight: 600; }
  .ro-track{ height: 8px; border-radius: 4px; background: rgba(20,34,49,.7); overflow: hidden; }
  .ro-track i{ display: block; height: 100%; width: 0%; background: #5ad1e6; transition: width .5s ease, background .5s ease; }
  .ro-evs{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
  .ro-ev{ font: 0.7188rem/1 var(--font-data); letter-spacing: .04em; padding: 5px 8px; border-radius: 3px; border: 1px solid var(--line); color: var(--ink-faint); }
  .ro-ev.on{ color: var(--amber); border-color: var(--amber-soft); }
  .ro-badge2{ font: 700 0.7813rem/1 var(--font-data); letter-spacing: .06em; color: var(--amber); }
  .ro-hf{ font: 0.8125rem/1.6 var(--font-data); color: var(--ink-dim); letter-spacing: .01em; }
  .ro-hf div{ display: flex; justify-content: space-between; gap: 12px; margin: 4px 0; }
  .ro-hf b{ color: var(--ink); font-weight: 600; white-space: nowrap; }
  .ro-foot{ font: 0.6563rem/1.5 var(--font-data); color: var(--ink-faint); padding: 10px 14px; letter-spacing: .03em; }
  .ro-sowhat{ margin-top: 10px; padding: 8px 10px; border-left: 2px solid var(--cyan); background: rgba(90,209,230,.06); border-radius: 0 3px 3px 0; font: 0.75rem/1.5 var(--font-data); color: var(--ink-dim); }
  .ro-sowhat::before{ content: ""; }

  /* glossary panel */
  #glossary{
    position: absolute; right: 118px; top: 92px; z-index: 35; width: 300px;
    max-height: calc(100vh - 300px); display: none; flex-direction: column;
    background: var(--panel-solid); border: 1px solid var(--line); border-top: 2px solid var(--cyan);
    border-radius: 3px; box-shadow: 0 18px 50px rgba(0,0,0,.55);
  }
  #glossary.show{ display: flex; }
  #glossary .gl-head{
    display: flex; align-items: center; justify-content: space-between;
    font: 0.7813rem/1 var(--font-data); letter-spacing: .2em; text-transform: uppercase;
    color: var(--cyan); padding: 12px 14px; border-bottom: 1px solid var(--line);
  }
  #glossary .gl-x{ background: none; border: 0; color: var(--ink-dim); cursor: pointer; font-size:0.98rem; }
  #glossary .gl-filter{
    margin: 10px 12px 5px; padding: 8px 10px; background: rgba(20,34,49,.5); border: 1px solid var(--line);
    border-radius: 3px; color: var(--ink); font: 12px var(--font-data); outline: none;
  }
  #glossary .gl-filter:focus{ border-color: var(--cyan); }
  #glossary .gl-list{ overflow-y: auto; padding: 4px 6px 8px; }
  .gl-item{ padding: 9px 9px; border-bottom: 1px solid rgba(40,56,72,.5); }
  .gl-item:last-child{ border-bottom: 0; }
  .gl-term{ font: 700 0.875rem/1.3 var(--font-data); letter-spacing: .03em; color: var(--ink); }
  .gl-def{ font: 0.84rem/1.5 var(--font-data); color: var(--ink-dim); margin-top: 4px; letter-spacing: .005em; }
  #glossary .gl-empty{ padding: 16px 12px; color: var(--ink-faint); font: 12px var(--font-data); text-align: center; }

  /* reconnect banner */
  #reconnect{
    position: fixed; top: 74px; left: 50%; transform: translateX(-50%) translateY(-12px);
    z-index: 90; padding: 8px 16px; border-radius: 999px; opacity: 0; pointer-events: none;
    background: rgba(192,69,58,.92); color: #fff; font: 600 0.84rem/1 var(--font-data); letter-spacing: .06em;
    transition: opacity .3s ease, transform .3s ease; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  }
  #reconnect.show{ opacity: 1; transform: translateX(-50%) translateY(0); }
  #soundbtn.on{ color: var(--amber); border-color: var(--amber-soft); }

/* #1 adjudication card — the causal read; the hero line when firing (sits right under the inject header) */
#opnote .onadj{margin:1px 0 2px;padding:6px 9px;border-left:2px solid var(--amber);background:rgba(244,177,74,.08);border-radius:0 3px 3px 0;font-size:0.8125rem;line-height:1.5;color:var(--amber);letter-spacing:.01em;text-wrap:pretty;}
#opnote .onadj:empty{display:none;}
#opnote .onadj b{color:#ffd9a0;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
#opnote .onadj .onadj-alt{color:var(--ink-dim);}

/* ---- tablet pass (student-facing pages below 1024px) ---- */
@media (max-width:1024px){
  #readout,#intel,#glossary,#pastinjects{right:10px;width:min(360px,calc(100vw - 20px));top:84px;max-height:calc(100vh - 200px);}
  #util button{min-height:44px;}
  #clocks{flex-wrap:wrap;max-width:calc(100vw - 20px);}
  #force-roster{max-width:44vw;}
  #cable{max-width:calc(100vw - 20px);}
}
/* decision tracker — Q1 label chips + named triggers */
.dec-q1chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px;}
.dec-triggers{margin-top:12px;border-top:1px solid var(--line);padding-top:13px;}
.dec-trigs{display:flex;flex-direction:column;gap:6px;margin-top:7px;}
.dec-trig{display:flex;align-items:center;gap:10px;font-family:var(--font-data);font-size:0.7813rem;color:var(--ink-dim);}
.dec-trig-st{flex:none;min-width:162px;text-align:center;font:700 0.6563rem/1 var(--font-data);letter-spacing:.08em;padding:6px 8px;border-radius:2px;cursor:pointer;background:transparent;}
.dec-trig-st.tst-armed{color:var(--amber);border:1px solid var(--amber-soft);}
@media (max-width:760px){}

#rednote{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(120%);z-index:70;width:min(92vw,560px);background:linear-gradient(180deg,rgba(24,11,11,.97),rgba(14,7,7,.99));border:1px solid rgba(224,104,90,.4);border-top:3px solid #e0685a;border-radius:5px;box-shadow:0 20px 60px rgba(0,0,0,.55);padding:14px 44px 14px 18px;opacity:0;transition:opacity .25s,transform .25s;}
#rednote.show{opacity:1;transform:translateX(-50%) translateY(0);}
#rednote .rn-eyebrow{font:700 0.6563rem/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:#e0685a;margin-bottom:6px;}
#rednote .rn-text{font-size:0.9063rem;line-height:1.5;color:#f3e2df;}
#rednote .rn-x{position:absolute;right:6px;top:6px;background:none;border:0;color:#c99a94;cursor:pointer;font:700 0.6563rem/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;min-height:30px;padding:0 8px;}
#rednote .rn-x:hover{color:#fff;}
.op-go.red{background:#c0453a;}
.op-go.red:hover{filter:brightness(1.08);}

.wc-reply{font:700 0.6563rem/1.4 var(--font-data);letter-spacing:.06em;color:#5ad1e6;margin-bottom:6px;padding-bottom:5px;border-bottom:1px dashed rgba(90,209,230,.3);}

/* Home Front: facilitator swing controls (operator-only) */
.hf-shift{display:flex;align-items:center;gap:5px;margin-top:7px;}
.hf-shift .hfs-l{font:700 0.625rem/1 var(--font-data);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-right:2px;}
.hf-shift button{min-width:26px;padding:4px 6px;border-radius:2px;border:1px solid var(--line);background:transparent;color:var(--ink-dim);cursor:pointer;font:700 0.6563rem/1 var(--font-data);}
.hf-shift button:hover{border-color:var(--cyan-soft);color:var(--cyan);}
.hf-shift .hfs-v{min-width:30px;text-align:center;font:700 0.6875rem/1 var(--font-data);color:var(--ink-faint);}
.hf-shift .hfs-v.up{color:#46d39a;}
.hf-shift .hfs-v.down{color:#e0685a;}
.hf-foot{display:flex;align-items:center;gap:10px;justify-content:space-between;}
#hf-reset{flex:none;background:none;border:1px solid var(--line);border-radius:2px;color:var(--ink-dim);padding:5px 8px;font:700 0.625rem/1 var(--font-data);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;}
#hf-reset:hover{border-color:var(--cyan-soft);color:var(--cyan);}

.op-note-line{margin-top:7px;font:0.6875rem/1.45 var(--font-data);color:var(--ink-faint);min-height:14px;}
.op-note-line.bad{color:#e0685a;}

/* ---------- facilitator status strip: the single "what now" surface ---------- */
#wcbar{position:absolute;left:50%;top:99px;bottom:auto;transform:translateX(-50%);z-index:52;display:flex;align-items:stretch;height:28px;
  background:rgba(8,12,18,.94);border:1px solid var(--line);border-radius:5px;box-shadow:0 10px 30px rgba(0,0,0,.45);
  overflow:hidden;max-width:min(96vw,1080px);}
.wcb-seg{display:flex;flex-direction:row;align-items:center;gap:7px;padding:0 12px;border-right:1px solid var(--line);min-width:0;}
.wcb-seg:last-child{border-right:0;}
.wcb-k{font:700 0.5625rem/1 var(--font-data);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);}
.wcb-v{font:700 0.6875rem/1 var(--font-data);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;}
.wcb-phase .wcb-v{color:var(--cyan);}
.wcb-traffic{cursor:pointer;}
.wcb-traffic:hover{background:rgba(255,255,255,.05);}
.wcb-traffic .wcb-v{color:var(--ink-faint);}
.wcb-traffic.has .wcb-v{color:#ff8c6e;}
@media (max-width:1000px){}

/* The operator banner existed to warn that a mirrored console was visible to the room.
   The rooms now watch their own read-only display.html, so it is retired — and it sat
   in the same band the status strip needs. */
#opbanner{display:none!important;}
/* The dock is now always visible, so its operator-note footer shares the bottom of the
   screen with two fixed chips (Inbox at bottom:48px, the text-size controls at
   bottom:82px). Clear them, or the "what to do now" guidance is unreadable. */
#opnote{padding-right:16px;}

#bchanbtn.on{color:#cbb4f0;border-color:rgba(180,140,232,.5);}
#bchanbtn.has-new{color:#cbb4f0;border-color:rgba(180,140,232,.6);box-shadow:inset 0 0 0 1px rgba(180,140,232,.35);}

.al-nudge{display:flex;align-items:center;gap:4px;margin-left:8px;}
.al-nudge button{min-width:22px;padding:3px 5px;border-radius:2px;border:1px solid var(--line);background:transparent;color:var(--ink-dim);cursor:pointer;font:700 0.625rem/1 var(--font-data);}
.al-nudge button:hover{border-color:var(--cyan-soft);color:var(--cyan);}
.al-sh{min-width:26px;text-align:center;font:700 0.625rem/1 var(--font-data);color:var(--ink-faint);}
.al-sh.up{color:#46d39a;} .al-sh.down{color:#e0685a;}
.al-reset{background:none;border:1px solid var(--line);border-radius:2px;color:var(--ink-dim);padding:4px 7px;font:700 0.5938rem/1 var(--font-data);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;}
.al-reset:hover{border-color:var(--cyan-soft);color:var(--cyan);}

/* ---------- accessibility pass: readable, reachable controls ----------
   Text inputs get a 46px minimum height and a 15px face; textareas get real room to
   write in. Small secondary buttons keep their compact look but gain a tappable box. */
#operator .op-in{min-height:46px;padding:11px 12px;font-size:0.9375rem;line-height:1.5;}
#operator textarea.op-in{min-height:104px;}
#operator #op-body,#operator #op-rednote{min-height:118px;}
#operator .op-go,#operator .op-sec-btn{min-height:40px;padding:10px 14px;font-size:0.75rem;}
#operator .op-k{font-size:0.75rem;line-height:1.45;}
.dec-note,.dec-finalnote{min-height:76px!important;padding:11px 12px!important;font-size:0.9375rem!important;line-height:1.5!important;}
#bchan textarea{min-height:86px;font-size:0.9375rem;padding:11px 12px;}
#bchan .bch-send{min-height:44px;font-size:0.8125rem;}
#bchan .bch-msg .bch-tx{font-size:0.9375rem;}
#da-panel #da-input{min-height:104px;font-size:0.9375rem;line-height:1.5;padding:11px 12px;}
#da-panel .da-bub{font-size:0.9375rem;line-height:1.6;}
#da-panel #da-send{min-width:52px;min-height:52px;font-size:1.125rem;}
/* rail + dock labels: 10px was below comfortable reading distance */
#util button{font-size:0.7188rem;}
#util .util-lbl{font-size:0.6875rem;}
#dock button{min-height:34px;}
/* compact secondary buttons: keep the look, give them a real target */
.rc-retract,.bc-retract,.wc-ack,.al-reset,#hf-reset{min-height:32px;padding:8px 12px;}
.hf-shift button,.al-nudge button{min-width:32px;min-height:30px;font-size:0.6875rem;}
.dec-trig-st{min-height:34px;}
/* room projector: the readout and cable already scale from the 22px root, but keep
   secondary chrome from dropping below readable size on a large screen */
#dsp-band .dsp-dec-t{font-size:0.875rem;}
#dsp-band-h{font-size:0.75rem;}

.fr-filter,.gl-filter,#op-note-in{min-height:42px!important;padding:10px 12px!important;font-size:0.875rem!important;}
select{min-height:44px;}

/* header vs side rail: give the session chip clear air above the rail */
#status-chip{margin-top:-8px;}
#util{top:122px;}
@media (max-height:620px){#util{top:108px;}}

#bc-open .bc-badge,#bc-badge{display:none;min-width:18px;height:18px;border-radius:9px;background:#fff;color:#173f6b;
  font:700 0.6875rem/18px var(--font-data);text-align:center;padding:0 5px;margin-left:8px;}
#bc-open.has-new #bc-badge,#bc-badge.on{display:inline-block;}
#bc-open.has-new{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);}

/* ---------- inject deck: dense enough to read at a glance ----------
   31 chips at the old size filled the screen. Tighter type, a fixed two-and-a-bit-row
   window with its own scroll, and the flash (role-stressor) injects tinted apart. */
.docksec.injects{flex:1 1 100%;min-width:0;}
.docksec.injects .btnrow{
  max-height:clamp(104px, 22vh, 300px);overflow-y:auto;overflow-x:hidden;align-content:flex-start;
  gap:5px;padding-right:4px;scrollbar-width:thin;
}
.docksec.injects .btnrow::-webkit-scrollbar{width:8px;}
.docksec.injects .btnrow::-webkit-scrollbar-thumb{background:rgba(120,140,160,.3);border-radius:4px;}
button.inj{padding:5px 9px 5px 33px!important;gap:6px!important;min-height:28px!important;}
button.inj .inm{font-size:0.6875rem;letter-spacing:.04em;white-space:nowrap;}
button.inj .tab{font-size:0.625rem;min-width:16px;text-align:center;}
button.inj .key{font-size:0.5938rem;opacity:.75;}
button.inj.isflash{opacity:.72;}
button.inj.isflash .inm{font-style:italic;}
button.inj.isflash:hover{opacity:1;}
.docksec.injects .seclbl::after{content:' \2014 press twice to fire \00b7 scroll for all 31';
  letter-spacing:.06em;text-transform:none;opacity:.6;}

/* decision-making models observed in play — thin tagging, not analysis */
.dec-models{margin-top:12px;border-top:1px solid var(--line);padding-top:13px;}
.dec-mods{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
.dec-mod{padding:6px 9px;border-radius:2px;border:1px solid var(--line);background:transparent;color:var(--ink-dim);
  cursor:pointer;font:700 0.6563rem/1.2 var(--font-data);letter-spacing:.04em;min-height:30px;text-align:left;}
.dec-mod:hover{border-color:var(--cyan-soft);color:var(--cyan);}
.dec-mod.on{background:rgba(90,209,230,.16);border-color:var(--cyan);color:#bfeef8;}
.dec-mod .dm-lv{display:block;font-weight:400;font-size:0.5938rem;opacity:.65;letter-spacing:.06em;text-transform:uppercase;margin-top:2px;}
.dec-mod-note{margin-top:9px;font-size:0.7188rem;line-height:1.5;color:var(--ink-faint);font-style:italic;}

.dec-status{min-height:32px!important;padding:8px 11px!important;}

/* ---------- Map view: get the chrome off the globe ----------
   Everything slides rather than disappearing, so the room reads it as one gesture and
   the state is obviously reversible. The cable, broadcast and flash cards stay: those
   are the exercise, not the controls. */
#stage.mapclear #dock{transform:translateY(102%)!important;}
#stage.mapclear #util{transform:translateX(112%);}
#stage.mapclear #wcbar,#stage.mapclear #clocks,
#stage.mapclear #whitecellbtn,#stage.mapclear #forces-legend{opacity:0;visibility:hidden;pointer-events:none;}
#util{transition:transform .34s ease;}
#wcbar,#clocks{transition:opacity .25s ease;}
#mapclear-restore{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%) translateY(140%);z-index:60;
  background:rgba(8,12,18,.94);border:1px solid var(--line);border-top:2px solid var(--cyan);border-radius:5px;
  color:var(--ink);padding:11px 18px;font:700 0.75rem/1 var(--font-data);letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;box-shadow:0 12px 36px rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s;
}
#stage.mapclear #mapclear-restore,body:has(#stage.mapclear) #mapclear-restore{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
#mapclear-restore:hover{color:#fff;border-color:var(--cyan);}
#mapclearbtn.on{color:var(--cyan);border-color:var(--cyan-soft);}

.wcb-map{cursor:pointer;}
.wcb-map:hover{background:rgba(90,209,230,.12);}
.wcb-map .wcb-v{color:var(--cyan);}

/* the scenario-clock row is a .tempo flex container, not a .btnrow — it needs the same
   wrapping constraint or its last control is clipped with no way to scroll to it */
#dock .tempo{flex-wrap:wrap;width:100%;min-width:0;row-gap:7px;}

/* ---------- DA header: the mode switch collided with the title ----------
   The bar is a flex row and .da-mode used margin-left:auto, which squeezed the name to
   a 3-line wrap under the avatar and let the buttons sit on top of it. Give the identity
   block room to breathe and let the mode switch keep its own column. */
#da-panel .da-bar{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;}
#da-panel .da-id{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;}
#da-panel .da-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:0.9375rem;line-height:1.2;}
#da-panel .da-rl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:0.6875rem;line-height:1.3;}
#da-panel .da-bar > button{flex:none;min-height:34px;}
@media (max-width:820px){
  #da-panel .da-id{display:none;}
  #da-panel .da-bar > button{padding:7px 9px;}
}

/* ---------- every large panel gets a close control in the top-right ----------
   Several boards (PRC Energy, Strait Traffic, Campaign, Pizza, Home Front, Allies,
   Sustainment, Heads of State) had their close button inside a header that can scroll
   away, or none at all. Pin them so a big box is always dismissible from the corner. */
#propaganda,#homefront,#allies,#whitecell{position:absolute;}
#propaganda .pg-x,#homefront .hf-x,#allies .al-x,#whitecell .wc-x{
  position:absolute!important;right:10px;top:10px;z-index:5;
  width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
  display:flex!important;align-items:center;justify-content:center;padding:0!important;
  background:rgba(8,12,18,.9)!important;border:1px solid var(--line)!important;border-radius:3px!important;
  color:var(--ink-dim)!important;cursor:pointer;font:700 0.8125rem/1 var(--font-data)!important;
}
#propaganda .pg-x:hover,#homefront .hf-x:hover,#allies .al-x:hover,
#whitecell .wc-x:hover,#opening .op-x:hover{color:#fff!important;border-color:var(--cyan-soft)!important;}

.wc-prc{margin-top:7px;margin-left:6px;background:rgba(224,104,90,.16);border:1px solid rgba(224,104,90,.55);color:#ffb4a0;
  border-radius:3px;padding:8px 11px;font:700 0.6563rem/1 var(--font-data);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;min-height:32px;}
.wc-prc:hover{background:rgba(224,104,90,.3);color:#fff;}
.wc-card.red .wc-time{color:#ff9c85;}

/* ---------- clocks: compact pass (they were eating the map) ---------- */
#clocks .row{padding:6px 12px;min-width:auto;}
#clocks .k{font-size:0.5938rem;letter-spacing:.14em;margin-bottom:2px;}
#clocks .v{font-size:1rem;letter-spacing:.02em;}
#clocks .v small{font-size:0.6875rem;letter-spacing:.06em;}
#clocks .meta{display:none;}
#clocks .clk-gauge{height:3px;margin-top:5px;}
#clocks .k .tag{font-size:0.5313rem;padding:0 4px;margin-left:5px;}
/* the two deadline clocks keep their gauge; the rest are text only */
@media (max-width:1400px){#clocks .k{letter-spacing:.1em;}#clocks .v{font-size:0.9375rem;}}

/* ---------- ally consultation channel ---------- */
#allyask{position:absolute;right:210px;bottom:88px;z-index:46;width:min(92vw,430px);max-height:76vh;display:flex;flex-direction:column;
  background:rgba(8,12,18,.97);border:1px solid var(--line);border-top:2px solid #f4b14a;border-radius:5px;
  box-shadow:0 22px 60px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .2s;}
#allyask.show{opacity:1;visibility:visible;transform:none;}
.aa-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);}
.aa-title{font-weight:700;font-size:0.9375rem;color:#e7edf2;}
.aa-sub{font-size:0.6875rem;color:var(--ink-faint);margin-top:3px;line-height:1.4;}
.aa-x{flex:none;background:none;border:0;color:var(--ink-faint);cursor:pointer;font-size:0.875rem;min-width:34px;min-height:34px;}
.aa-x:hover{color:#e7edf2;}
.aa-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px;}
.aa-k{flex:none;font:700 0.625rem/1 var(--font-data);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);}
#aa-who,#aa-q{flex:none;width:100%;background:rgba(20,34,49,.5);border:1px solid var(--line);border-radius:3px;color:#e7edf2;
  padding:11px 12px;font-family:inherit;font-size:0.9375rem!important;line-height:1.45;}
/* WebKit renders a native select with appearance:auto — it ignores author padding and
   clamps the height to ~24px, so the picker must opt out of the native control and
   supply its own caret. Safari is the browser this is run in. */
#aa-who{-webkit-appearance:none!important;appearance:none!important;min-height:48px!important;
  padding:11px 34px 11px 12px!important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%239fb0bd' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;}
#aa-q{min-height:104px;resize:vertical;}
#aa-who:focus,#aa-q:focus{outline:none;border-color:rgba(244,177,74,.6);}
.aa-note{flex:none;font-size:0.6875rem;color:var(--ink-faint);font-style:italic;line-height:1.45;}
.aa-go{flex:none;min-height:48px;background:#b8860b;border:0;border-radius:3px;color:#0b1018;cursor:pointer;
  font:700 0.75rem/1 var(--font-data);letter-spacing:.1em;text-transform:uppercase;}
.aa-go:hover{filter:brightness(1.08);}
.aa-thread{flex:none;display:flex;flex-direction:column;gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line);}
.aa-item{border:1px solid var(--line);border-left:2px solid var(--line-bright);border-radius:3px;padding:9px 11px;background:rgba(20,34,49,.32);}
.aa-item.answered{border-left-color:#f4b14a;}
.aa-i-h{font:700 0.625rem/1 var(--font-data);letter-spacing:.1em;text-transform:uppercase;color:#f4b14a;margin-bottom:5px;}
.aa-q-t{font-size:0.8125rem;line-height:1.45;color:var(--ink-dim);}
.aa-r{margin-top:7px;padding-top:7px;border-top:1px dashed var(--line);font-size:0.875rem;line-height:1.5;color:#e7edf2;}
.aa-r b{color:#f4b14a;}
.aa-empty{font-size:0.8125rem;color:var(--ink-faint);font-style:italic;}
#aa-flash{position:absolute;left:16px;right:16px;bottom:10px;background:rgba(184,134,11,.14);border:1px solid rgba(244,177,74,.4);
  border-radius:3px;color:#f4d79a;padding:8px 11px;font-size:0.75rem;line-height:1.4;opacity:0;transition:opacity .25s;pointer-events:none;}
#aa-flash.on{opacity:1;}
#allyaskbtn{position:relative;}
#allyaskbtn .aa-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:9px;background:#b8860b;color:#0b1018;
  font:700 0.625rem/17px var(--font-data);text-align:center;padding:0 4px;}
#allyaskbtn.has-reply{border-color:rgba(244,177,74,.5);color:#f4b14a;}
/* console side: reply tools inside the inbox card */
.aa-tools{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:7px;}
.aa-t-k{font:700 0.625rem/1 var(--font-data);letter-spacing:.1em;text-transform:uppercase;color:#f4b14a;}
.aa-t-in{width:100%;min-height:76px;background:rgba(20,34,49,.5);border:1px solid var(--line);border-radius:3px;color:#e7edf2;
  padding:9px 10px;font-family:inherit;font-size:0.875rem!important;line-height:1.45;resize:vertical;}
.aa-t-in:focus{outline:none;border-color:rgba(244,177,74,.6);}
.aa-t-btns{display:flex;gap:7px;}
.aa-t-draft,.aa-t-send{flex:1;min-height:36px;border-radius:3px;cursor:pointer;font:700 0.6875rem/1 var(--font-data);letter-spacing:.06em;text-transform:uppercase;}
.aa-t-draft{background:transparent;border:1px solid rgba(244,177,74,.45);color:#f4b14a;}
.aa-t-send{background:#b8860b;border:0;color:#0b1018;}
.aa-t-draft:hover,.aa-t-send:hover{filter:brightness(1.1);}

.aa-undo{margin-top:8px;min-height:34px;padding:7px 11px;background:transparent;border:1px solid var(--line);border-radius:3px;
  color:var(--ink-faint);cursor:pointer;font:700 0.625rem/1 var(--font-data);letter-spacing:.08em;text-transform:uppercase;}
.aa-undo:hover{color:#e0685a;border-color:rgba(224,104,90,.45);}

.aa-t-discard{flex:none;min-height:36px;padding:0 11px;background:transparent;border:1px solid var(--line);border-radius:3px;
  color:var(--ink-faint);cursor:pointer;font:700 0.625rem/1 var(--font-data);letter-spacing:.06em;text-transform:uppercase;}
.aa-t-discard:hover{color:#e0685a;border-color:rgba(224,104,90,.5);}

/* ---------- intel panel: larger, easier to read (overrides the panel's own
     runtime-injected styles, which load after this file) ---------- */
/* height leaves room for the header above and the action bar below, so the panel
   never runs off the bottom of a laptop screen */
#intel{width:min(94vw,480px)!important;max-height:min(860px,calc(100vh - 180px))!important;}
#intel .ip-sub{font-size:0.8125rem!important;line-height:1.45!important;}
#intel .ip-body{padding:14px 18px!important;}
#intel .ip-item{padding:11px 13px!important;margin-bottom:9px!important;}
#intel .ip-foot{font-size:0.75rem!important;line-height:1.5!important;padding:13px 18px!important;}
@media (max-width:1024px){#intel{width:min(96vw,480px)!important;}}

/* ---------- live readout: larger, easier to read (both student cells) ---------- */
#readout{width:min(94vw,460px)!important;max-height:min(860px,calc(100vh - 180px))!important;}
#readout .ro-head{padding:15px 18px!important;}
#readout .ro-x{min-width:36px!important;min-height:36px!important;font-size:1rem!important;}
#readout .ro-sec{margin-bottom:17px!important;padding-bottom:15px!important;}
#readout .ro-sec-h{font-size:0.8125rem!important;letter-spacing:.1em!important;margin-bottom:10px!important;gap:10px!important;}
#readout .ro-line{margin-bottom:11px!important;}
#readout .ro-line-top{font-size:0.875rem!important;margin-bottom:5px!important;}
#readout .ro-line-top b,#readout .ro-line-top span{font-size:0.875rem!important;}
#readout .ro-sowhat{font-size:0.8125rem!important;line-height:1.55!important;padding:10px 12px!important;}
#readout .ro-allies .roa-row{font-size:0.875rem!important;padding:6px 0!important;}
#readout .ro-allies .roa-n{font-size:0.875rem!important;}
#readout .ro-allies .roa-w{font-size:0.75rem!important;}
#readout .roa-empty{font-size:0.8125rem!important;}
#readout .ro-foot{font-size:0.75rem!important;line-height:1.5!important;padding:13px 18px!important;}

/* A panel the student deliberately opened outranks the cable behind it. #cable is 38, and
   these were 35 — so opening Situational Update or the Glossary while an inject was live
   painted the panel underneath it. Flash (60) and broadcast (55) still interrupt. */
#readout,#glossary,#pastinjects{z-index:46;}

/* ---------- right-side student panels: always clear the rail and the header ----------
   The rail is 186px wide at right:14px, so 214px of right offset guarantees clearance;
   the width is capped against the viewport so the panel can never be pushed under it. */
#readout,#intel,#glossary,#pastinjects{
  right:214px!important;left:auto!important;top:128px!important;
  width:min(460px,calc(100vw - 244px))!important;
  max-height:min(860px,calc(100vh - 214px))!important;}
@media (max-width:1024px){
  /* narrow screens: the rail still owns the right edge, so keep clearing it and
     let the panel take whatever is left */
  #readout,#intel,#glossary,#pastinjects{
    right:214px!important;top:128px!important;
    width:min(400px,calc(100vw - 244px))!important;
    max-height:calc(100vh - 206px)!important;}
}
@media (max-width:820px){
  /* the rail does NOT collapse at any width — it owns a 200px band at the right edge,
     so keep the same clearance and let the panel shrink instead */
  #readout,#intel,#glossary,#pastinjects{
    right:214px!important;width:calc(100vw - 244px)!important;min-width:0!important;}
}

/* the Situation panel is the one rail button students need constantly — make it
   read as the primary, not one of twelve equals */
#util button.util-key{
  color:#f4d79a!important;border-color:rgba(244,177,74,.55)!important;
  background:linear-gradient(180deg,rgba(184,134,11,.20),rgba(184,134,11,.09))!important;
  font-weight:700!important;letter-spacing:.08em!important;}
#util button.util-key:hover{
  color:#ffe9bd!important;border-color:rgba(244,177,74,.85)!important;
  background:linear-gradient(180deg,rgba(184,134,11,.32),rgba(184,134,11,.16))!important;}
#util button.util-key.on{
  color:#0b1018!important;background:#f4b14a!important;border-color:#f4b14a!important;}

/* ---- inject picker (what to fire next) ---- */
#injpick{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) scale(.97);width:min(760px,92vw);max-height:82vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#0d1620,#0a121a);border:1px solid #24384c;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:90;}
#injpick.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
#injpick .ip-body{overflow:auto;padding:12px 16px 4px;display:flex;flex-direction:column;gap:9px;}
#injpick .ip-empty{color:#8fa3b5;font:0.8125rem/1.6 ui-monospace,Menlo,monospace;padding:16px 2px 20px;}
#injpick .ip-row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid #1d2f42;border-radius:8px;background:rgba(14,24,34,.7);}
#injpick .ip-row.ip-lead{border-color:#3c6d52;background:rgba(18,34,28,.72);}
#injpick .ip-tab{font:700 0.9375rem/1 ui-monospace,Menlo,monospace;color:#cfe0ee;text-align:center;padding:8px 0;border-radius:5px;background:#16283a;}
#injpick .ip-tab.alert{background:#3a1e1c;color:#e7a49b;}
#injpick .ip-tab.reward{background:#1b3328;color:#8fd0a8;}
#injpick .ip-name{font:700 0.875rem/1.3 ui-monospace,Menlo,monospace;color:#e7edf2;}
#injpick .ip-res,#injpick .ip-ed{font-weight:400;font-size:0.6563rem;letter-spacing:.1em;text-transform:uppercase;color:#7e93a6;}
#injpick .ip-ed{color:#e0b45a;}
#injpick .ip-why{font:0.75rem/1.5 ui-monospace,Menlo,monospace;color:#93a9bc;margin-top:3px;}
#injpick .ip-because{font:0.7188rem/1.5 ui-monospace,Menlo,monospace;color:#7a8fa2;margin-top:3px;}
#injpick .ip-meter{height:3px;border-radius:2px;background:rgba(28,44,60,.9);overflow:hidden;margin-top:7px;}
#injpick .ip-meter i{display:block;height:100%;background:#4d7f9c;}
#injpick .ip-row.ip-lead .ip-meter i{background:#5aa87a;}
#injpick .ip-btns{display:flex;flex-direction:column;gap:6px;}
#injpick .ip-btns button{min-height:34px;padding:0 12px;border-radius:6px;border:1px solid #2b4359;background:#14212e;color:#cfe0ee;font:700 0.75rem/1 ui-monospace,Menlo,monospace;cursor:pointer;}
#injpick .ip-fire{border-color:#3d6b52;background:#173026;color:#a8dcbe;}
#injpick .ip-btns button:hover{filter:brightness(1.25);}
#injpick .ip-foot{padding:10px 16px 14px;border-top:1px solid #1b2c3d;color:#7a8fa2;font:0.7188rem/1.6 ui-monospace,Menlo,monospace;}
@media (max-width:720px){}

/* ---- who is in the chair ---- */
#potuspanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.97);width:min(520px,92vw);background:linear-gradient(180deg,#0d1620,#0a121a);border:1px solid #24384c;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:96;}
#potuspanel.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
#potuspanel .pt-body{padding:14px 16px 6px;display:flex;flex-direction:column;gap:12px;}
#potuspanel .pt-opts{display:flex;gap:8px;flex-wrap:wrap;}
#potuspanel .pt-opt{flex:1 1 140px;min-height:44px;padding:0 12px;border-radius:6px;border:1px solid #2b4359;background:#14212e;color:#cfe0ee;font:700 0.8125rem/1 ui-monospace,Menlo,monospace;cursor:pointer;}
#potuspanel .pt-opt.on{border-color:#4d7f9c;background:#17303f;color:#e7edf2;}
#potuspanel .pt-opt:hover{filter:brightness(1.2);}
#potuspanel .pt-f{display:flex;flex-direction:column;gap:5px;}
#potuspanel .pt-f span{font:700 0.6875rem/1.3 ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#8fa3b5;}
#potuspanel .pt-f span em{font-style:normal;letter-spacing:.04em;text-transform:none;color:#6e8398;font-weight:400;}
#potuspanel input{background:#0a141d;border:1px solid #22374b;border-radius:6px;color:#e7edf2;font:0.8125rem/1.6 ui-monospace,Menlo,monospace;padding:9px 10px;min-height:40px;}
#potuspanel input:focus{outline:none;border-color:#3f6c8c;}
#potuspanel .pt-prev{font:0.75rem/1.6 ui-monospace,Menlo,monospace;color:#8fa3b5;}
#potuspanel .pt-prev b{color:#e7edf2;}
#potuspanel .pt-foot{display:flex;align-items:center;gap:10px;padding:12px 16px 14px;border-top:1px solid #1b2c3d;}
#potuspanel .pt-foot button{min-height:40px;padding:0 16px;border-radius:6px;border:1px solid #3d6b52;background:#173026;color:#a8dcbe;font:700 0.75rem/1 ui-monospace,Menlo,monospace;cursor:pointer;}
#potuspanel .pt-note{color:#8fd0a8;font:0.7188rem/1.5 ui-monospace,Menlo,monospace;}

/* ---- touch seats (iPad is the smallest supported screen) ----
   iPadOS Safari specifics: kill the 300ms double-tap delay on controls, stop the grey
   tap flash, stop landscape text inflation, and use dynamic viewport units so a
   toolbar appearing/disappearing never clips a fixed-height column. */
html{-webkit-text-size-adjust:100%;}
@supports (height:100dvh){
  /* Layout ROOTS only. #redcell was in this list — a floating 420px panel with
     max-height:calc(100vh - 190px) — and min-height beats max-height, so it was forced to
     the full viewport height from top:92px, hanging 92px below the fold with its Send
     button off-screen and unreachable. */
  #stage,#student,body>main{min-height:100dvh;}
}
@media (hover:none){
  /* hover-only affordances must not hide anything a student needs on a tablet */
  .inj:hover,.ctl:hover{filter:none;}
  button:active,.ctl:active,.inj:active{filter:brightness(1.35);}
}
/* comfortable tablet reading: nudge the student rail and action bar up a step */
@media (max-width:1100px) and (hover:none){
  .ro-sec,.gl-item{font-size:0.8125rem;}
}

/* On touch seats every dismiss / scale control gets a real 44px target. Scoped to
   (hover:none) so the desktop console keeps its compact chrome. */
@media (hover:none){
  #display-scale{gap:6px;}
}

/* ---- System 3: grounding label on every AI reply ---- */
.da-ground{display:flex;flex-direction:column;gap:2px;margin-top:9px;padding-top:8px;border-top:1px solid rgba(120,150,175,.22);}
.da-ground b{font:700 0.625rem/1.2 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;}
.da-ground span{font:0.6875rem/1.5 ui-monospace,Menlo,monospace;color:#8fa3b5;}
#util #s3btn.alert{border-color:#8a4a3c;color:#e7a49b;}
@media (max-width:760px){}

/* ---- System 3 capture on the student decision form ---- */
.bc-s3{display:none;flex-direction:column;gap:7px;margin:4px 0 2px;padding:10px 11px;border:1px solid #22374b;border-radius:8px;background:rgba(12,22,32,.6);}
.bc-s3.show{display:flex;}
.bc-s3-k{font:700 0.6563rem/1.3 ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#8fa3b5;}
.bc-s3-k em{font-style:normal;letter-spacing:.04em;text-transform:none;color:#6e8398;font-weight:400;}
.bc-s3-opts{display:flex;gap:6px;flex-wrap:wrap;}
.bc-s3-opt{flex:1 1 116px;min-height:44px;padding:0 10px;border-radius:6px;border:1px solid #2b4359;background:#14212e;color:#cfe0ee;font:700 0.6875rem/1.3 ui-monospace,Menlo,monospace;cursor:pointer;}
.bc-s3-opt.on{border-color:#4d7f9c;background:#17303f;color:#e7edf2;}
.bc-s3-conf{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.bc-conf{width:44px;height:44px;border-radius:6px;border:1px solid #2b4359;background:#14212e;color:#cfe0ee;font:700 0.875rem/1 ui-monospace,Menlo,monospace;cursor:pointer;}
.bc-conf.on{border-color:#c9a24a;background:#2a2113;color:#f0dfb4;}
.bc-conf-lbl{font:0.6875rem/1.4 ui-monospace,Menlo,monospace;color:#8fa3b5;}
@media (max-width:900px){}

/* ---- ENDEX banner ---- */
#endex-banner{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:9px 18px;border:1px solid #8a4a3c;border-top:0;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#2a1614,#1d0f0e);box-shadow:0 10px 34px rgba(0,0,0,.55);z-index:92;font:0.8125rem/1 ui-monospace,Menlo,monospace;color:#e7c3bb;}
#endex-banner b{font:700 0.875rem/1 ui-monospace,Menlo,monospace;letter-spacing:.18em;color:#ff8c6e;}
#endex-banner span{color:#c9a9a2;}
#endex-banner button{min-height:34px;padding:0 12px;border-radius:5px;border:1px solid #6b4a3c;background:#3a201c;color:#f0c5bb;font:700 0.75rem/1 ui-monospace,Menlo,monospace;cursor:pointer;}
#endex-banner button:hover{filter:brightness(1.25);}
#util #endexbtn.on{border-color:#8a4a3c;color:#ff8c6e;background:rgba(58,30,26,.6);}

/* the rail outgrew a 1080p column: paired controls sit two-up */
.util-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3px;}
.util-pair button{padding:0 8px;}
.util-pair .ui-ic{flex:0 0 13px;font-size:0.78rem;}
.util-pair .ui-tx{font-size:0.6563rem;letter-spacing:.08em;}

/* ---- student: the Council's decision record (read-only) ---- */
#decrecord{position:fixed;inset:0;z-index:47;display:none;flex-direction:column;align-items:center;justify-content:center;background:rgba(4,8,13,.72);padding:18px;}
#decrecord.show{display:flex;}
#decrecord>*{pointer-events:auto;}
#decrecord .dr-head,#decrecord .dr-body,#decrecord .dr-foot{width:min(660px,100%);box-sizing:border-box;}
#decrecord .dr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:15px 18px;background:#0e141d;border:1px solid #1f3242;border-bottom:0;border-radius:8px 8px 0 0;}
#decrecord .dr-title{font:700 1.0625rem/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#eaf3fb;}
#decrecord .dr-sub{font:0.75rem/1.5 ui-monospace,Menlo,monospace;color:#8fa3b5;margin-top:3px;}
#decrecord .dr-x{background:none;border:1px solid #2a3b4c;color:#9fb0bd;border-radius:4px;min-width:44px;min-height:44px;font:700 0.8125rem/1 ui-monospace,Menlo,monospace;cursor:pointer;flex:0 0 auto;}
#decrecord .dr-body{flex:1 1 auto;min-height:0;max-height:min(66vh,560px);overflow-y:auto;padding:14px 18px;background:#0a0f16;border-left:1px solid #1f3242;border-right:1px solid #1f3242;}
#decrecord .dr-empty{font:0.875rem/1.65 ui-monospace,Menlo,monospace;color:#8fa3b5;padding:10px 0 18px;}
#decrecord .dr-list{display:flex;flex-direction:column;gap:9px;}
#decrecord .dr-item{border:1px solid #1d2f42;border-left-width:3px;border-radius:6px;background:rgba(14,24,34,.7);padding:11px 13px;}
#decrecord .dr-item.dr-dec{border-left-color:#46d39a;}
#decrecord .dr-item.dr-deb{border-left-color:#5ad1e6;}
#decrecord .dr-item-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
#decrecord .dr-n{flex:0 0 22px;height:22px;border-radius:50%;background:#16283a;color:#cfe0ee;font:700 0.6875rem/22px ui-monospace,Menlo,monospace;text-align:center;}
#decrecord .dr-q{flex:1 1 auto;min-width:0;font:700 0.875rem/1.35 ui-monospace,Menlo,monospace;color:#e7edf2;}
#decrecord .dr-st{font:700 0.625rem/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;padding:5px 8px;border-radius:3px;background:#16283a;color:#a9c0d3;}
#decrecord .dr-dec .dr-st{background:#173026;color:#8fd0a8;}
#decrecord .dr-deb .dr-st{background:#122c33;color:#7fd6e8;}
#decrecord .dr-note{font:0.8125rem/1.65 ui-monospace,Menlo,monospace;color:#b6c7d6;margin-top:7px;}
#decrecord .dr-note em{color:#6e8398;font-style:normal;}
#decrecord .dr-foot{padding:12px 18px;background:#0e141d;border:1px solid #1f3242;border-top:0;border-radius:0 0 8px 8px;font:0.7188rem/1.6 ui-monospace,Menlo,monospace;color:#7a8fa2;}
#decrecbtn .dr-badge{margin-left:6px;font-size:0.6563rem;color:#0b1018;background:#5ad1e6;border-radius:999px;padding:1px 7px;display:none;}
#decrecbtn .dr-badge.on{display:inline-block;}

/* ---- Blue Cell filing: decision and question are different acts ---- */
.bc-hidden{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none;}
.bc-modes{display:grid;grid-template-columns:1fr 1fr;gap:7px;flex:none;}
.bc-mode{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;min-height:62px;padding:9px 11px;border:1px solid #22374b;border-radius:6px;background:#0a141d;color:#9fb0bd;cursor:pointer;}
.bc-mode b{font:700 0.8125rem/1.2 ui-monospace,Menlo,monospace;color:#cfe0ee;}
.bc-mode span{font:0.6875rem/1.35 ui-monospace,Menlo,monospace;color:#7a8fa2;}
.bc-mode:hover{border-color:#33506b;}
.bc-mode.on{border-color:#5ad1e6;background:#0e2530;}
.bc-mode.on b{color:#eaf7fb;}
.bc-mode[data-mode="action"].on{border-color:#c9a24a;background:#241d10;}
.bc-mode[data-mode="action"].on b{color:#f0dfb4;}
/* ---------- filing panels: the submit row lives OUTSIDE the scroll region ----------
   Both panels put Send inside the box that scrolls, so on any screen short enough to
   overflow (this build overflows at 540px, and on iPad landscape) the button rendered past
   the clip: unreachable, and invisible. Sticky was the wrong instrument — it lifts the row
   out of its flow position and paints it over the textarea a student is typing in.

   So the panel splits: one region that scrolls, one footer that cannot. The row is moved
   into the footer at init (bluecell-panel.js / redcell-panel.js). min-height:0 is the part
   that matters — without it a flex item refuses to shrink below its content and the scroll
   never engages. */
.pn-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:thin;}
.pn-scroll::-webkit-scrollbar{width:9px;}
.pn-scroll::-webkit-scrollbar-thumb{background:#2b4257;border-radius:5px;}
.pn-foot{flex:none;display:flex;flex-direction:column;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);}
.pn-foot>*:first-child{margin-top:0;}
#redcell .rc-body{flex:1 1 auto;min-height:0;}
#redcell .pn-foot{margin:0 14px 12px;}
/* the composer absorbs the slack instead of forcing the region to scroll */
/* The three field labels carried 12px top + 6px bottom each — 54px of pure spacing in a
   region that was 14px short of fitting the composer. Tighter inside the scrolling panel
   only; the labels elsewhere on the seat are untouched. */
.pn-scroll .bc-lbl,.pn-scroll .rc-lbl{margin-top:7px;margin-bottom:4px;}

/* The composer is NOT the shock absorber. It was the only shrinkable item in the region —
   the message feed sits at 0px with flex's default min-height:auto and cannot give — so any
   growth in the fixed footer (the "✓ Filed" row appearing, 35px) was taken out of the
   composer's visible height instead of becoming scroll, and from the first filing onward the
   bottom of the field a student types in sat below the clip.

   So the feed absorbs and the composer holds its size: flex-shrink 0 keeps its declared
   height, and the region scrolls when the footer grows, which is what a scroll region is
   for. min-height:0 on the feed is the part that makes it able to give at all. */
.pn-scroll #bc-text,.pn-scroll #rc-text,.pn-scroll #rc-assess,.pn-scroll #rc-single{flex:0 1 auto;}
.pn-scroll #bc-feed,.pn-scroll #rc-feed{flex:1 1 auto;min-height:0;}
/* While the "✓ Filed" confirmation is up the footer is 35px taller, which is 27px more than
   the region has to spare. The composer is empty at that moment — filing clears it — so it is
   the right thing to give the space back, and only for those few seconds. */
#bluecell:has(#bc-ok.on) #bc-text{min-height:46px;}
/* "Your sent messages" plus its margins is 55px of heading above an empty list — more than
   the composer was short by. It appears when there is something to head. */
#bluecell:has(#bc-feed:empty) .bc-feed-h,#redcell:has(#rc-feed:empty) .rc-feed-h{display:none;}

/* the whole panel changes register when a decision is being filed */
#bluecell.mode-decision .bc-lbl{color:#c9a24a;}
#bc-send.is-decision{background:#8a6d20;color:#fff5dc;}
#bc-send.is-decision:hover{background:#a3821f;}
/* Hidden means taking no space. This hid itself with opacity alone, so after the first
   filing its text occupied ~35px of the panel footer for the rest of the session — invisible,
   and permanently shrinking the region above it into the composer. */
.bc-ok{font:0.75rem/1.5 ui-monospace,Menlo,monospace;color:#8fd0a8;flex:none;display:none;}
.bc-ok.on{display:block;min-height:18px;}
.bc-flash{animation:bcFlash 1.4s ease-out 1;}
@keyframes bcFlash{0%,100%{box-shadow:none;}20%,60%{box-shadow:0 0 0 2px #c9a24a;}}
@media (prefers-reduced-motion:reduce){.bc-flash{animation:none;box-shadow:0 0 0 2px #c9a24a;}}
.bc-conn{display:none;font:0.7188rem/1.5 ui-monospace,Menlo,monospace;color:#e0b45a;flex:none;margin-top:2px;}
.bc-conn.on{display:block;}
#decrecord .dr-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
#decrecord .dr-tag{font:0.6563rem/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;padding:4px 8px;border-radius:3px;background:#16283a;color:#a9c0d3;}
#decrecord .dr-note b{color:#eaf3fb;font-weight:700;}
#decrecbtn .dr-badge{background:#c9a24a;color:#241d10;}
body.redcell #decrecord .dr-item.dr-dec{border-left-color:#e0685a;}
body.redcell #decrecbtn .dr-badge{background:#e0685a;color:#2a0f0c;}

/* room display: keep the session chip clear of the clock strip, and stop the header
   subtitle from silently clipping (both were colliding at projector widths) */
/* in flow, not pinned: the chip scales with the header at every projector text size */
body:has(#dsp-head) .dsp-head-r{display:flex;flex-direction:column;align-items:flex-end;gap:0.35rem;min-width:0;}
body:has(#dsp-head) #status-chip{position:static;top:auto;right:auto;bottom:auto;left:auto;transform:none;margin:0;}
body:has(#dsp-head) #clocks{margin-top:6px;}
#dsp-brand-sub{overflow:visible;text-overflow:clip;white-space:normal;}
#dsp-brand{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;min-width:0;}
#decrecord .dr-group{margin-bottom:16px;}
#decrecord .dr-group.is-red .dr-item{border-left-color:#8a4a3c;}
#decrecord .dr-empty.small{font-size:0.8125rem;padding:2px 0 8px;}
.aa-t-count{font:0.6875rem/1.4 ui-monospace,Menlo,monospace;color:#7a8fa2;margin:5px 0 7px;}
.aa-t-count em{font-style:normal;color:#6e8398;}
.aa-t-count .aa-t-n{color:#cfe0ee;font-weight:700;}
.aa-t-count.over{color:#e0857a;}
.aa-t-count.over .aa-t-n{color:#ff8c6e;}
#allyrecord{position:fixed;inset:0;z-index:47;display:none;flex-direction:column;align-items:center;justify-content:center;background:rgba(4,8,13,.72);padding:18px;}
#allyrecord.show{display:flex;}
#allyrecord .dr-head,#allyrecord .dr-body,#allyrecord .dr-foot{width:min(660px,100%);box-sizing:border-box;}
#allyrecord .dr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:15px 18px;background:#0e141d;border:1px solid #1f3242;border-bottom:0;border-radius:8px 8px 0 0;}
#allyrecord .dr-body{flex:1 1 auto;min-height:0;max-height:min(66vh,560px);overflow-y:auto;padding:14px 18px;background:#0a0f16;border-left:1px solid #1f3242;border-right:1px solid #1f3242;}
#allyrecord .dr-foot{padding:12px 18px;background:#0e141d;border:1px solid #1f3242;border-top:0;border-radius:0 0 8px 8px;font:0.7188rem/1.6 ui-monospace,Menlo,monospace;color:#7a8fa2;}
.ar-item{border:1px solid #1d2f42;border-left:3px solid #3a4b5c;border-radius:6px;background:rgba(14,24,34,.7);padding:11px 13px;margin-bottom:9px;}
.ar-item.answered{border-left-color:#46d39a;}
.ar-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:7px;}
.ar-gov{font:700 0.875rem/1.2 ui-monospace,Menlo,monospace;color:#e7edf2;}
.ar-who{font:0.6875rem/1.2 ui-monospace,Menlo,monospace;color:#8fa3b5;}
.ar-t{margin-left:auto;font:0.6875rem/1.2 ui-monospace,Menlo,monospace;color:#6e8398;}
.ar-ask,.ar-rep{font:0.8125rem/1.6 ui-monospace,Menlo,monospace;color:#b6c7d6;}
.ar-ask b,.ar-rep b{color:#eaf3fb;}
.ar-rep{margin-top:7px;padding-top:7px;border-top:1px solid #1b2c3d;color:#d6e3ee;}
.ar-wait{margin-top:7px;font:0.75rem/1.5 ui-monospace,Menlo,monospace;color:#e0b45a;}
#decrecord .dr-answers{font:0.6875rem/1.5 ui-monospace,Menlo,monospace;color:#8fa3b5;margin-top:5px;}
.dsp-dec-a{font:700 0.5625rem/1.3 var(--font-data);letter-spacing:.12em;text-transform:uppercase;color:#e0b45a;margin-bottom:4px;}
#allyrecbtn .dr-badge.waiting{background:#e0b45a;color:#241d10;}

/* ---- White Cell inbox: sized to actually read and answer in ----
   It was a 330px column with its header buttons wrapping onto two lines and the pinned
   close button landing on top of them. The facilitator reads and replies here all
   session, so give it real width, a scrolling body, and a header that lays out. */
#whitecell{
  left:12px!important;bottom:84px!important;
  width:min(760px,calc(100vw - 24px))!important;
  height:min(70vh,620px)!important;max-height:78vh!important;
  display:none;flex-direction:column;overflow:hidden!important;border-radius:8px!important;
}
#whitecell.show{display:flex!important;}
#whitecell .wc-head{
  flex:none;display:flex!important;align-items:center;gap:10px;flex-wrap:wrap;
  padding:13px 54px 12px 16px!important;border-bottom:1px solid #3a1f1c;
  font-size:0.75rem!important;letter-spacing:.14em!important;line-height:1.3!important;
}
#whitecell .wc-head>span:first-child{flex:1 1 auto;min-width:120px;}
#whitecell .wc-head button{
  flex:0 0 auto;min-height:36px;padding:0 11px;border-radius:5px;
  border:1px solid #4a2a26;background:#1a1010;color:#e7c3bb;
  font:700 0.6875rem/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;cursor:pointer;
}
#whitecell .wc-head button:hover{filter:brightness(1.3);}
#wc-inbox-list{
  flex:1 1 auto;min-height:120px;overflow-y:auto!important;
  padding:14px 16px 16px!important;gap:10px!important;
}
#whitecell .wc-card{
  border-radius:6px!important;padding:12px 14px!important;border-left-width:3px!important;
  background:rgba(20,34,49,.42);
}
#whitecell .wc-card-h{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font:700 0.6875rem/1.3 ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px;
}
#whitecell .wc-l{font:0.875rem/1.6 ui-monospace,Menlo,monospace!important;color:#dbe7f2;margin:3px 0;}
#whitecell .wc-l b{color:#fff;}
#whitecell .wc-reply{font:0.75rem/1.5 ui-monospace,Menlo,monospace;color:#c9a24a;margin-bottom:7px;}
#whitecell .wc-card button{
  margin-top:9px;margin-right:7px;min-height:38px;padding:0 12px;border-radius:5px;
  border:1px solid #2b4359;background:#14212e;color:#cfe0ee;
  font:700 0.6875rem/1 ui-monospace,Menlo,monospace;cursor:pointer;
}
#whitecell .wc-card button:hover{filter:brightness(1.3);}
#whitecell .wc-x{right:12px!important;top:12px!important;}
@media (max-height:700px){#whitecell{max-height:70vh!important;bottom:74px!important;}}

/* ---- record panels: side tabs, so nobody scrolls to find the other cell ---- */
#decrecord .dr-tabs,#allyrecord .dr-tabs{width:min(660px,100%);box-sizing:border-box;display:grid;grid-template-columns:1fr 1fr;gap:0;flex:none;background:#0a0f16;border-left:1px solid #1f3242;border-right:1px solid #1f3242;}
.dr-tab{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 12px;border:0;border-bottom:2px solid #1b2c3d;background:transparent;color:#7a8fa2;font:700 0.75rem/1.2 ui-monospace,Menlo,monospace;letter-spacing:.06em;cursor:pointer;text-align:center;}
.dr-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dr-tab b{flex:0 0 auto;min-width:22px;padding:2px 6px;border-radius:999px;background:#16283a;color:#cfe0ee;font-size:0.6875rem;}
.dr-tab:hover{color:#cfe0ee;}
.dr-tab.on{color:#eaf3fb;border-bottom-color:#5ad1e6;background:rgba(18,44,51,.5);}
.dr-tab.is-red.on{border-bottom-color:#e0685a;background:rgba(44,20,16,.5);}
.dr-tab.is-red.on b{background:#3a1e1c;color:#e7a49b;}
#decrecord .dr-group,#allyrecord .dr-group{margin-bottom:0;}

/* ---- record panel: summary strip above the tabs ---- */
#decrecord .dr-summary{width:min(660px,100%);box-sizing:border-box;display:none;flex:none;
  padding:13px 18px;background:#0c1420;border-left:1px solid #1f3242;border-right:1px solid #1f3242;
  border-bottom:1px solid #1b2c3d;}
#decrecord .dr-summary.on{display:block;}
.dr-sum-line{font:0.8125rem/1.6 ui-monospace,Menlo,monospace;color:#b6c7d6;}
.dr-sum-line b{color:#eaf3fb;}
.dr-sum-row{display:flex;gap:10px;align-items:baseline;margin-top:8px;font:0.75rem/1.55 ui-monospace,Menlo,monospace;}
.dr-sum-row span{flex:0 0 auto;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:0.6563rem;}
.dr-sum-row.is-blue span{color:#7fd6e8;}
.dr-sum-row.is-red span{color:#e0857a;}
.dr-sum-row em{font-style:normal;color:#cfe0ee;min-width:0;overflow-wrap:break-word;}
.dr-sum-note{margin-top:8px;font:0.7188rem/1.55 ui-monospace,Menlo,monospace;color:#c9a24a;}

/* ---- facilitator: "where are we" read-out ---- */
#whereare{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.97);width:min(820px,94vw);max-height:88vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#0d1620,#0a121a);border:1px solid #24384c;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:93;}
#whereare.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
#whereare .wa-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 18px 8px;}
#whereare .wa-lead{font:0.9375rem/1.7 ui-monospace,Menlo,monospace;color:#cfe0ee;padding:12px 14px;border:1px solid #23384b;border-radius:8px;background:rgba(14,24,34,.7);}
#whereare .wa-lead b{color:#fff;}
#whereare .wa-sec{margin-top:14px;padding-top:12px;border-top:1px solid #1b2c3d;}
#whereare .wa-sec.wa-todo{border-top-color:#4a3a1c;}
#whereare .wa-k{font:700 0.6875rem/1.3 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:#8fa3b5;margin-bottom:8px;}
#whereare .wa-k.is-blue{color:#7fd6e8;}
#whereare .wa-k.is-red{color:#e0857a;}
#whereare .wa-k span{color:#cfe0ee;letter-spacing:.06em;}
#whereare .wa-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;}
#whereare .wa-list li{font:0.8125rem/1.6 ui-monospace,Menlo,monospace;color:#b6c7d6;}
#whereare .wa-list b{color:#eaf3fb;}
#whereare .wa-list em{color:#6e8398;font-style:normal;}
#whereare .wa-todo .wa-list li{color:#e8d9b0;}
#whereare .wa-none{font:0.8125rem/1.6 ui-monospace,Menlo,monospace;color:#7a8fa2;font-style:italic;}
#whereare .wa-line{font:0.8125rem/1.6 ui-monospace,Menlo,monospace;color:#b6c7d6;margin-top:7px;}
#whereare .wa-line.wa-warn{color:#e0b45a;}
#whereare .wa-st{display:inline-block;min-width:64px;text-align:center;padding:2px 6px;border-radius:3px;font:700 0.625rem/1.5 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;background:#16283a;color:#a9c0d3;}
#whereare .wa-st.decided{background:#173026;color:#8fd0a8;}
#whereare .wa-st.interim{background:#2f2612;color:#e0b45a;}
#whereare .wa-st.debating{background:#122c33;color:#7fd6e8;}
#whereare .wa-t{color:#6e8398;}
#whereare .wa-flag{padding:1px 6px;border-radius:3px;background:#3a1e1c;color:#e7a49b;font-size:0.6875rem;}
#whereare .wa-more{font:0.7188rem/1.5 ui-monospace,Menlo,monospace;color:#6e8398;margin-top:6px;}
#whereare .wa-foot{padding:11px 18px 14px;border-top:1px solid #1b2c3d;color:#7a8fa2;font:0.7188rem/1.6 ui-monospace,Menlo,monospace;}
#util #wherebtn.alert{border-color:#8a6a2c;color:#e0b45a;}

/* ---- what to fire: sections, descriptions, drafted options ---- */
#injpick{width:min(860px,94vw)!important;}
#injpick .ip-k{font:700 0.6875rem/1.3 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:#8fa3b5;margin:14px 0 8px;padding-top:12px;border-top:1px solid #1b2c3d;display:flex;justify-content:space-between;align-items:baseline;}
#injpick .ip-k:first-child{margin-top:0;padding-top:0;border-top:0;}
#injpick .ip-k span{color:#cfe0ee;letter-spacing:.06em;}
#injpick .ip-desc{font:0.75rem/1.55 ui-monospace,Menlo,monospace;color:#a9bccd;margin-top:4px;}
#injpick .ip-trig{font:0.7188rem/1.5 ui-monospace,Menlo,monospace;color:#7a8fa2;margin-top:4px;}
#injpick .ip-trig b{color:#c9a24a;font-weight:700;}
#injpick .ip-none{font:0.7813rem/1.6 ui-monospace,Menlo,monospace;color:#7a8fa2;font-style:italic;padding:2px 0 6px;}
#injpick .ip-ai{font-weight:400;font-size:0.6563rem;letter-spacing:.1em;text-transform:uppercase;color:#8fd0a8;}
#injpick .ip-list{display:flex;flex-direction:column;gap:7px;}
#injpick .ip-item{border:1px solid #1d2f42;border-radius:7px;background:rgba(14,24,34,.5);padding:9px 12px;}
#injpick .ip-item-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
#injpick .ip-item-h b{font:700 0.8125rem/1.3 ui-monospace,Menlo,monospace;color:#e7edf2;flex:1 1 auto;min-width:0;}
#injpick .ip-tab.sm{font-size:0.6875rem;padding:4px 7px;}
#injpick .ip-pts{font:700 0.6875rem/1 ui-monospace,Menlo,monospace;color:#6e8398;}
#injpick .ip-btns.row{flex-direction:row;gap:6px;margin-top:8px;}
#whereare .wa-story{font:0.875rem/1.75 ui-monospace,Menlo,monospace;color:#cfe0ee;}
#whereare .wa-lead p{margin:9px 0 0;font:0.875rem/1.7 ui-monospace,Menlo,monospace;color:#b6c7d6;}
#whereare .wa-lead p b{color:#eaf3fb;}
#whereare .wa-lead-1{font:700 0.8125rem/1.4 ui-monospace,Menlo,monospace;letter-spacing:.06em;color:#7fd6e8;padding-bottom:8px;border-bottom:1px solid #1b2c3d;}
#histdlbtn{position:absolute;top:14px;right:18px;z-index:40;min-height:44px;padding:0 16px;border-radius:7px;border:1px solid #2b4257;background:rgba(12,20,30,.92);color:#bcd0e2;font:700 0.75rem/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;cursor:pointer;}
#histdlbtn:hover{border-color:#5ad1e6;color:#eaf7fb;}
#histdlbtn:disabled{opacity:.6;cursor:default;}
body.redcell #histdlbtn:hover{border-color:#e0685a;color:#f7d9d4;}
@media (max-width:820px){#histdlbtn{position:static;margin:8px 0 0;width:100%;}}
/* touch floor: dismiss controls on the student seats */
#cable-x-student,#histdlbtn ~ * #broadcast .bc-x{min-width:44px;min-height:44px;}
html:has(#histdlbtn) #broadcast .bc-x,html:has(#histdlbtn) #flash .fl-x,
html:has(#histdlbtn) #allyask .aa-x,html:has(#histdlbtn) #bchan .bch-x,
html:has(#histdlbtn) #sob-warn button,
html:has(#histdlbtn) #cable-x-student{min-width:46px!important;min-height:46px!important;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;}

/* ---- rail rebuild (July 2026) -------------------------------------------------------
   One Opinion panel (domestic + allied publics side by side), the map layers folded into
   the Forces panel, and the directive read + edited inside Where Are We. */
#opinion{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.98);z-index:46;width:min(94vw,1040px);max-height:86vh;overflow:auto;
  background:var(--panel,#0e1319);border:1px solid var(--line);border-radius:4px;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;}
#opinion.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
#opinion .op2-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);
  font-family:var(--font-data);font-size:0.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);}
#opinion .op2-x{background:transparent;border:1px solid var(--line);color:var(--ink-dim);border-radius:2px;min-width:36px;min-height:32px;cursor:pointer;}
#opinion .op2-body{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);}
#opinion .op2-col{background:var(--panel,#0e1319);padding:14px 16px;min-width:0;}
/* Scoped to .show: pointer-events:none on the wrapper does NOT gate a descendant that
   re-declares pointer-events:auto, so an unscoped override made the closed 852x455 panel
   an invisible hit target over the rail, the dock and the round controls. */
#opinion.show #homefront,#opinion.show #allies{position:static!important;transform:none!important;opacity:1!important;pointer-events:auto!important;
  width:auto!important;max-height:none!important;border:0!important;background:none!important;box-shadow:none!important;left:auto!important;top:auto!important;
  display:block!important;visibility:visible!important;overflow:visible!important;}
/* belt and braces: a hidden panel cannot be hit at all */
#opinion{visibility:hidden;}
#opinion.show{visibility:visible;}
/* the two halves used to be separate panels with their own close buttons; one close serves */
#opinion .hf-x,#opinion .al-x{display:none!important;}
@media (max-width:1100px){#opinion .op2-body{grid-template-columns:1fr;}}
/* layers, now a static section inside the Forces panel */
/* Map layers live inside the force roster — the tall left panel has the width a list of
   layer names needs, and it keeps them off the dock. (They were briefly a grid inside the
   centred legend bar, which made that bar tall enough to cover the round controls.) */
#force-roster #layers{position:static!important;transform:none!important;opacity:1!important;visibility:visible!important;
  pointer-events:auto!important;width:auto!important;display:block!important;
  margin:0;padding:0 12px 4px;border:0!important;border-top:1px solid var(--line)!important;
  background:none!important;box-shadow:none!important;
  /* In flow this contributes only its header row. The expanded list is a popover, so it
     never competes with the force list for the panel's height and never clips — the
     roster is only ~400px tall on iPad landscape and the head already takes 190 of it. */
  flex:none;position:static;}
/* the list is #layerspop, a stage-level element positioned by sim-chrome.js */
#layerspop{display:none;position:absolute;z-index:41;width:236px;flex-direction:column;gap:1px;
  padding:8px;border:1px solid var(--line-bright);border-radius:3px;overflow-y:auto;
  background:linear-gradient(180deg,rgba(9,15,24,.985),rgba(6,11,18,.99));box-shadow:0 18px 50px rgba(0,0,0,.6);}
#layerspop.open{display:flex;}
#layerspop .lyr-item{width:100%;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:5px 8px;}
/* collapsed by default: the list is set once, the force list is what gets read */
#force-roster #layers .lyr-item{display:none;}
#force-roster #layers.open .lyr-item{display:flex;}
#force-roster #layers .lyr-head{display:flex;align-items:center;gap:7px;cursor:pointer;padding:9px 4px;margin:0;border:0;
  background:transparent;width:100%;text-align:left;font-family:var(--font-data);font-size:0.7188rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);}
#force-roster #layers .lyr-head:hover{color:var(--ink);}
#force-roster #layers .lyr-head .lyr-caret{transition:transform .18s ease;}
#force-roster #layers.open .lyr-head .lyr-caret{transform:rotate(90deg);}
#force-roster #layers .lyr-head .lyr-n{margin-left:auto;color:var(--ink-faint);font-size:0.6875rem;}
#force-roster #layers .lyr-item{padding:4px 8px;}
#force-roster #layers .lyr-head{font-family:var(--font-data);font-size:0.7188rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px;padding:0;border:0;}
#force-roster #layers .lyr-item{width:100%;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* the directive, inside Where are we */
#whereare .wa-dir .wa-sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;}
#whereare .wa-dir .wa-sec-h button{background:transparent;border:1px solid var(--line);color:var(--ink-dim);border-radius:2px;
  font:700 0.75rem/1 var(--font-data);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;min-height:34px;cursor:pointer;}
#whereare .wa-dir .wa-sec-h button:hover{color:var(--ink);border-color:var(--ink-dim);}
#whereare .wa-q{display:grid;grid-template-columns:22px 1.1fr 76px 2fr;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:0.8125rem;}
#whereare .wa-q-n{font:700 0.6875rem/1.5 var(--font-data);color:var(--ink-faint);}
#whereare .wa-q-s{font:700 0.6563rem/1.6 var(--font-data);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
#whereare .wa-q-s.decided{color:#5ec98c;}#whereare .wa-q-s.interim{color:#f4b14a;}
#whereare .wa-q-t{color:var(--ink-dim);}
#whereare .wa-q-t i{color:var(--ink-faint);}
#whereare .wa-q-foot{margin-top:9px;font-size:0.75rem;color:var(--ink-faint);}
@media (max-width:900px){#whereare .wa-q{grid-template-columns:20px 1fr;}#whereare .wa-q-s,#whereare .wa-q-t{grid-column:2;}}

#opinion .op2-body{max-height:none;}

/* ---- student Record shell (July 2026): four record surfaces become one tabbed panel ---- */
#record{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.98);z-index:47;width:min(94vw,980px);max-height:86vh;
  display:flex;flex-direction:column;background:var(--panel,#0e1319);border:1px solid var(--line);border-radius:4px;
  opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;}
#record.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
#record .rec-head{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);flex:none;}
#record .rec-tabs{display:flex;gap:6px;flex:1;min-width:0;flex-wrap:wrap;}
#record .rec-tab{display:flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--line);color:var(--ink-dim);
  border-radius:2px;font:700 0.8125rem/1 var(--font-data);letter-spacing:.1em;text-transform:uppercase;padding:0 14px;min-height:44px;cursor:pointer;}
#record .rec-tab.on{color:var(--ink);border-color:var(--accent,#c9a24a);background:rgba(201,162,74,.09);}
#record .rec-n{font-size:0.6875rem;color:var(--ink-faint);}
#record .rec-tab.on .rec-n{color:var(--accent,#c9a24a);}
#record .rec-x{flex:none;background:transparent;border:1px solid var(--line);color:var(--ink-dim);border-radius:2px;min-width:44px;min-height:44px;cursor:pointer;}
#record .rec-body{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;}
#record .rec-pane{display:none;padding:0;}
#record .rec-pane.on{display:block;}
/* the adopted panels were absolutely-positioned overlays; inside the shell they are content */
#record.show .rec-pane > *{position:static!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
  transform:none!important;opacity:1!important;pointer-events:auto!important;visibility:visible!important;display:block!important;
  width:auto!important;max-width:none!important;max-height:none!important;overflow:visible!important;
  border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;z-index:auto!important;}
#record{visibility:hidden;}
#record.show{visibility:visible;}
@media (max-width:820px){#record{width:96vw;max-height:90vh;}#record .rec-tab{padding:0 11px;font-size:0.75rem;}}

/* The 33-tab inject row is retired — What to Fire is the single inject surface. Scope this
   to the inject SECTION only: the dock also carries the round controls, the scenario clock,
   the escalation posture and the adjudication cue, which are how the exercise is run. */
#dock .docksec.injects{display:none!important;}
#injpick .ip-fired{display:flex;flex-direction:column;gap:1px;background:var(--line);}
#injpick .ip-fired-row{display:flex;align-items:center;gap:10px;background:var(--panel,#0e1319);padding:8px 10px;font-size:0.8125rem;}
#injpick .ip-fired-row b{flex:1;min-width:0;font-weight:600;color:var(--ink-dim);}
#injpick .ip-again{background:transparent;border:1px solid var(--line);color:var(--ink-dim);border-radius:2px;
  font:700 0.6875rem/1 var(--font-data);letter-spacing:.09em;text-transform:uppercase;padding:0 10px;min-height:34px;cursor:pointer;}
#injpick .ip-flash{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px;}
#injpick .ip-fl{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line);color:var(--ink-dim);
  border-radius:2px;font-size:0.8125rem;padding:0 12px;min-height:44px;cursor:pointer;}
#injpick .ip-fl:hover{color:var(--ink);border-color:var(--ink-dim);}

/* Download history moved inside the Record panel (it used to float over the classification strip) */
#histdlbtn{display:none!important;}
#record .rec-dl{flex:none;background:transparent;border:1px solid var(--line);color:var(--ink-dim);border-radius:2px;
  font:700 0.6875rem/1 var(--font-data);letter-spacing:.09em;text-transform:uppercase;padding:0 12px;min-height:44px;cursor:pointer;}
#record .rec-dl:hover{color:var(--ink);border-color:var(--ink-dim);}

/* the promoted Broadcast control marks its target section on arrival */
#operator .op-sec.op-flash{box-shadow:inset 0 0 0 1px var(--accent,#c9a24a);animation:opFlash 1.2s ease-out 1;}
@keyframes opFlash{0%{background:rgba(201,162,74,.14)}100%{background:transparent}}

/* inside the shell the panes are tabs, so their own close buttons are redundant */
#record .rec-pane [aria-label="Close"],#record .rec-pane .dr-x,#record .rec-pane .ar-x,#record .rec-pane .pi-x,#record .rec-pane .pj-x{display:none!important;}

/* ---- Run of show: the facilitator's plan, opened from the "Now" segment ---- */
#wcbar .wcb-seg.clickable{cursor:pointer}
#wcbar .wcb-seg.clickable .wcb-v{border-bottom:1px dotted rgba(255,255,255,.35)}
#wcbar .wcb-seg.clickable:hover .wcb-v{border-bottom-color:var(--accent,#c9a24a);color:#fff}
#ros{position:absolute;left:50%;transform:translateX(-50%) translateY(8px);top:calc(var(--top-h,90px) + 46px);
  width:min(760px,calc(100vw - 48px));max-height:calc(100vh - var(--top-h,90px) - 150px);
  background:#0c141d;border:1px solid var(--line,#22323f);border-radius:6px;
  box-shadow:0 22px 60px rgba(0,0,0,.7);display:flex;flex-direction:column;overflow:hidden;
  opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease;z-index:44}
#ros.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
#ros .ros-h{display:flex;align-items:center;gap:14px;padding:0 8px 0 16px;min-height:48px;
  border-bottom:1px solid var(--line,#22323f);flex:none}
#ros .ros-t{font:700 0.75rem/1 var(--font-data);letter-spacing:.14em;text-transform:uppercase;color:var(--ink,#dbe6ef)}
#ros .ros-sub{flex:1;font:0.6875rem/1.4 var(--font-data);color:var(--ink-dim,#7f93a6);letter-spacing:.04em}
#ros .ros-x{flex:none;width:44px;height:44px;background:transparent;border:0;color:var(--ink-dim,#7f93a6);
  font-size:1rem;cursor:pointer;border-radius:4px}
#ros .ros-x:hover{color:var(--ink,#dbe6ef);background:rgba(255,255,255,.05)}
#ros .ros-body{overflow:hidden auto;padding:6px 0 10px;-webkit-overflow-scrolling:touch}
#ros .ros-empty{padding:26px 18px;color:var(--ink-dim,#7f93a6);font-size:.8125rem}
#ros .ros-blk{display:grid;grid-template-columns:112px 1fr;gap:14px;padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.045)}
#ros .ros-blk:last-child{border-bottom:0}
#ros .ros-blk.now{background:rgba(201,162,74,.09);box-shadow:inset 3px 0 0 var(--accent,#c9a24a)}
#ros .ros-when{font:700 0.625rem/1.5 var(--font-data);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-dim,#7f93a6);padding-top:2px}
#ros .ros-when span{display:block;font-weight:400;letter-spacing:.04em;opacity:.7;text-transform:none}
#ros .ros-bt{font:600 0.875rem/1.35 var(--font-ui,inherit);color:var(--ink,#dbe6ef);margin-bottom:5px;
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
#ros .ros-bt em{font:700 0.5625rem/1 var(--font-data);letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent,#c9a24a);font-style:normal}
#ros .ros-do{list-style:none;margin:0 0 7px;padding:0;display:flex;flex-direction:column;gap:3px}
#ros .ros-do li{font-size:.8125rem;line-height:1.5;color:var(--ink-2,#a9bccd);padding-left:13px;position:relative;text-wrap:pretty}
#ros .ros-do li:before{content:'\2013';position:absolute;left:0;color:var(--ink-dim,#7f93a6)}
#ros .ros-cues{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:8px 0 0}
#ros .ros-ck{font:700 0.5625rem/1 var(--font-data);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim,#7f93a6)}
#ros .ros-cue{background:transparent;border:1px solid var(--line,#22323f);color:var(--ink-2,#a9bccd);
  border-radius:3px;font:0.6875rem/1 var(--font-data);letter-spacing:.03em;padding:0 10px;min-height:32px;cursor:pointer}
#ros .ros-cue b{color:var(--accent,#c9a24a);letter-spacing:.08em}
#ros .ros-cue:hover{border-color:var(--accent,#c9a24a);color:var(--ink,#dbe6ef)}
#ros .ros-cue.done{opacity:.45}
#ros .ros-cue.done b{color:var(--ink-dim,#7f93a6)}
#ros .ros-watch{margin:9px 0 0;padding-left:11px;border-left:2px solid rgba(201,162,74,.4);
  font-size:.75rem;line-height:1.55;color:var(--ink-dim,#7f93a6);text-wrap:pretty}
@media (max-width:820px){#ros .ros-blk{grid-template-columns:1fr;gap:4px}
  #ros .ros-when span{display:inline;margin-left:8px}}

/* Short stages (1024x768 projector, 13" laptop with chrome): the roster's head is the
   only part that can give, so tighten it and let the asset list take what is left.
   The Map Layers row is pinned and must stay reachable at every height. */
@media (max-height:780px){
  .fr-head{padding:10px 14px 8px;gap:3px;font-size:0.8125rem;letter-spacing:.13em}
  .fr-head .fr-posture{font-size:.625rem;line-height:1.45}
  .fr-head .fr-sort button{min-height:32px}
  .fr-head .fr-filter{min-height:34px}
  .fr-body{padding:6px 10px 12px}
  #force-roster #layers{padding:0 12px 2px}
}

/* The cell's filing button is the most-pressed control in the room, and it sat at 36px
   — under the 44px touch floor the dismiss controls already respect. It only exists on
   the student seats, which are the touch devices, so the floor is unconditional here.
   nowrap keeps the label on one line: it wrapped at narrow widths and pushed the
   button over the font-size controls beneath it. */
#bc-open,#rc-open{min-height:44px;white-space:nowrap;}

/* Touch floor, second pass. The (hover:none) block covered dismiss controls but missed
   four groups a student actually presses: the AI button, the text-size and contrast
   controls (which are exactly what a student who cannot read the screen reaches for),
   the Record panel's tabs, and the Map Layers disclosure header at 14px. */
#da-open{min-height:44px;white-space:nowrap;}
#display-scale button{min-height:44px;min-width:44px;}
#record .rec-tab,#record .rec-dl,#record .rec-x{min-height:44px;}
.lyr-head{min-height:44px;display:flex;align-items:center;}
#allyaskbtn{white-space:nowrap;}

/* ---- organic injects: the inbox trigger and the picker's entry point ---- */
.wc-forge{min-height:32px;padding:8px 12px;margin-left:7px;background:transparent;border:1px solid rgba(201,162,74,.45);
  border-radius:3px;color:#c9a24a;cursor:pointer;font:700 0.6875rem/1 ui-monospace,Menlo,monospace;letter-spacing:.07em;text-transform:uppercase;}
.wc-forge:hover{background:rgba(201,162,74,.1);border-color:rgba(201,162,74,.8);}
.ip-forge-row{display:flex;flex-direction:column;gap:7px;padding:11px 12px;border:1px solid #1b2c3d;border-radius:3px;background:#0a121c;}
#ip-forge{min-height:38px;padding:0 14px;background:transparent;border:1px solid rgba(201,162,74,.5);border-radius:3px;color:#c9a24a;
  cursor:pointer;font:700 0.6875rem/1 ui-monospace,Menlo,monospace;letter-spacing:.09em;text-transform:uppercase;align-self:flex-start;}
#ip-forge:hover{background:rgba(201,162,74,.12);}
.ip-forge-row span{font:0.75rem/1.5 ui-monospace,Menlo,monospace;color:#7f93a6;}
body.ipad .wc-forge{min-height:44px;}body.ipad #ip-forge{min-height:44px;}

/* ---------- small-screen guidance ----------
   The seats are built for an iPad or a laptop: the theater map, the inject cable and the
   Advocate all want width, and a phone gets a cramped version of a product that reads as
   spacious in the room. Say so on the way in rather than letting a phone be the first
   impression. Hidden above 820px, and never shown on the projector displays. */
.usewide{display:none;}
@media(max-width:820px){
  .usewide{display:block;margin:22px auto 0;max-width:30rem;padding:12px 15px;border:1px solid rgba(244,177,74,.42);
    border-radius:4px;background:rgba(244,177,74,.07);color:#f4d9a6;
    font:0.8125rem/1.55 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.01em;text-align:center;}
  .usewide b{color:#f4b14a;font-weight:700;}
}