/* ============================================================================
   IronVault Cyber Range — Design System  ("Situation Room")
   Layers:  1) Fonts  2) Tokens  3) Base  4) Shell  5) Primitives
            6) Components  7) Legacy aliases  8) Motion  9) Print
   Self-hosted fonts, hand-drawn SVG, zero external network calls.
   ============================================================================ */

/* ---- 1. FONTS (self-hosted woff2, SIL OFL) -------------------------------- */
@font-face{font-family:"Grotesk";src:url("/assets/fonts/space-grotesk-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Grotesk";src:url("/assets/fonts/space-grotesk-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"InterV";src:url("/assets/fonts/inter-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"InterV";src:url("/assets/fonts/inter-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"PlexMono";src:url("/assets/fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PlexMono";src:url("/assets/fonts/plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}

/* ---- 2. TOKENS ------------------------------------------------------------ */
:root{
  /* surfaces — five elevations, not two */
  --surface-000:#060910; --surface-050:#0B0F18; --surface-100:#111725;
  --surface-200:#171F30; --surface-300:#1E2839;
  /* hairlines */
  --line-soft:rgba(255,255,255,.06); --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.18);
  /* text */
  --ink:#F2F6FC; --ink-2:#A9B6CC; --ink-3:#6C7B93;
  /* brand teal — DEMOTED: action, focus, "you are here" only */
  --teal:#16B3A6; --teal-dim:#0E7C74; --teal-ring:rgba(22,179,166,.45);
  /* semantic severity — base / 12% tint / 40% border */
  --sev-critical:#FF4D5E; --sev-critical-bg:rgba(255,77,94,.12); --sev-critical-bd:rgba(255,77,94,.40);
  --sev-high:#FF8A3D;    --sev-high-bg:rgba(255,138,61,.12);  --sev-high-bd:rgba(255,138,61,.40);
  --sev-medium:#F5C748;  --sev-medium-bg:rgba(245,199,72,.12); --sev-medium-bd:rgba(245,199,72,.40);
  --sev-low:#4FD1A1;     --sev-low-bg:rgba(79,209,161,.12);   --sev-low-bd:rgba(79,209,161,.40);
  --sev-info:#6EA8FE;    --sev-info-bg:rgba(110,168,254,.12); --sev-info-bd:rgba(110,168,254,.40);
  /* executive "authority" accent — board framing only */
  --gold:#C9A227; --gold-bg:rgba(201,162,39,.12); --gold-bd:rgba(201,162,39,.40);
  /* type */
  --f-display:"Grotesk","InterV",system-ui,sans-serif;
  --f-body:"InterV",system-ui,sans-serif;
  --f-mono:"PlexMono",ui-monospace,Menlo,monospace;
  /* type scale: 11 13 15 17 20 26 34 46 — nothing in between */
  --t-11:11px; --t-13:13px; --t-15:15px; --t-17:17px; --t-20:20px; --t-26:26px; --t-34:34px; --t-46:46px;
  /* space scale */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  /* radius — 4 chips/inputs, 10 panels, 20 hero */
  --r-chip:4px; --r-panel:10px; --r-hero:20px;
  /* elevation via inset highlight, not drop shadow */
  --elev-1:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.6);
  --elev-2:inset 0 1px 0 rgba(255,255,255,.07), 0 6px 22px rgba(0,0,0,.5);
  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --d-micro:120ms; --d-elem:220ms; --d-screen:360ms;
}

/* ---- 3. BASE -------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--f-body); color:var(--ink); background:var(--surface-000);
  font-size:var(--t-17); line-height:1.55; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;margin:0}
a{color:var(--sev-info)}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono)}
/* mono uppercase section label */
.label{font-family:var(--f-mono);font-size:var(--t-11);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow{font-family:var(--f-mono);font-size:var(--t-13);letter-spacing:.10em;text-transform:uppercase;color:var(--teal)}
.ink-2{color:var(--ink-2)} .ink-3{color:var(--ink-3)}
.icon{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:round;flex:none}
.icon-sm{width:18px;height:18px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* Adinkra-inspired texture (3% opacity tessellation), lobby + results only */
.texture{position:relative}
.texture::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.03;z-index:0;
  background-image:
    repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 22px),
    repeating-linear-gradient(-45deg,#fff 0 1px,transparent 1px 22px);
  mask-image:radial-gradient(circle at 70% 20%,#000,transparent 70%);
}
.texture>*{position:relative;z-index:1}

/* ---- 4. APP SHELL (3 zones) ---------------------------------------------- */
.shell{
  display:grid; grid-template-columns:64px 1fr auto;   /* situation column collapses when hidden */
  min-height:100vh; background:var(--surface-050);
}
.rail{
  background:var(--surface-050); border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column; align-items:center; gap:var(--s-2);
  padding:var(--s-4) 0; position:sticky; top:0; height:100vh;
}
.rail .brand{width:34px;height:34px;margin-bottom:var(--s-4);display:grid;place-items:center}
.rail .brand img{width:30px;height:auto;filter:brightness(0) invert(1)}
.railbtn{
  width:44px;height:44px;border-radius:var(--r-chip);display:grid;place-items:center;
  color:var(--ink-3);background:transparent;border:1px solid transparent;cursor:pointer;
  transition:color var(--d-micro) var(--ease),background var(--d-micro) var(--ease);
}
.railbtn[aria-current="true"]{color:var(--teal);background:var(--surface-100);border-color:var(--line)}
.railbtn:hover:not([aria-disabled="true"]){color:var(--ink-2);background:var(--surface-100)}
.railbtn[aria-disabled="true"]{opacity:.32;cursor:not-allowed}
.rail .railstatic{width:44px;height:44px;display:grid;place-items:center;color:var(--ink-3)}
.rail .spacer{flex:1}

.main{min-width:0;display:flex;flex-direction:column}
.topstrip{
  height:56px;flex:none;display:flex;align-items:center;gap:var(--s-3);
  padding:0 var(--s-6);border-bottom:1px solid var(--line-soft);background:var(--surface-050);
  position:sticky;top:0;z-index:5;
}
.topstrip .sep{width:1px;height:22px;background:var(--line)}
.content{flex:1;padding:var(--s-7) var(--s-6);max-width:1280px;width:100%;margin:0 auto}

.situation{
  width:340px;background:var(--surface-050);border-left:1px solid var(--line-soft);
  padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-4);
  position:sticky;top:0;height:100vh;overflow:auto;
}
.situation[hidden]{display:none}

/* ===== RESPONSIVE ========================================================== */
/* TABLET & BELOW (<=1024): single column, rail -> bottom tab bar,
   situation -> full-width block below the exercise, lobby stacks. */
@media (max-width:1024px){
  .shell{grid-template-columns:1fr}
  .rail{
    position:fixed;bottom:0;left:0;right:0;top:auto;height:auto;width:100%;
    flex-direction:row;justify-content:space-around;align-items:center;
    border-right:none;border-top:1px solid var(--line);background:var(--surface-050);
    padding:var(--s-2);z-index:30;
  }
  .rail .brand,.rail .spacer,.rail .railstatic{display:none}
  .railbtn{width:56px;height:44px}
  .situation{
    position:static;width:auto;height:auto;border-left:none;border-top:1px solid var(--line-soft);
    overflow:visible;margin-bottom:72px;   /* clear the fixed bottom rail */
  }
  .content{padding-bottom:calc(var(--s-8) + var(--s-4))}
  .lobby{grid-template-columns:1fr;gap:var(--s-5)}
  .grid-2{grid-template-columns:1fr}       /* dashboard */
}

/* PHONE (<=640): tighten spacing, scale display type, reflow grids & tables. */
@media (max-width:640px){
  .content{padding:var(--s-4);padding-bottom:calc(var(--s-8) + var(--s-3))}
  .topstrip{padding:0 var(--s-4);gap:var(--s-2)}
  .topstrip .label,.topstrip .sep{display:none}  /* keep the eyebrow, drop the sub-label */
  .brief h1{font-size:var(--t-34);line-height:1.05}
  .brief p.lede{font-size:var(--t-17)}
  .instruments{grid-template-columns:1fr 1fr;gap:var(--s-3)}
  .inst{padding:var(--s-4)}
  .trackcard{padding:var(--s-4);gap:var(--s-3)}
  .trackcard .tc-meta{display:none}        /* keep title+desc legible on narrow */
  .prompt{font-size:var(--t-17)}
  .stagehead{flex-wrap:wrap;gap:var(--s-2)}
  .scorebar{order:2;flex-basis:100%}
  .choice{font-size:var(--t-15);min-height:56px;padding:var(--s-3)}
  .exhibit .ex-hdr .v,.exhibit .ex-body{overflow-wrap:anywhere;word-break:break-word}
  .exhibit .ex-hdr .k{width:52px}
  .exhibit .tab{position:static;display:inline-block;margin:var(--s-3) 0 0 var(--s-4);border-radius:var(--r-chip)}
  /* results */
  .arcwrap{flex-direction:column;align-items:flex-start;gap:var(--s-4)}
  .breakdown{font-size:var(--t-13)}
  .breakdown th:nth-child(2),.breakdown td:nth-child(2){display:none}  /* drop long control col */
  /* facilitator */
  .kpistrip{grid-template-columns:1fr 1fr}
  .kpi{padding:var(--s-3)}
  .kpi .val{font-size:var(--t-26)}
  /* situation metrics stay in one readable row */
  .sit-grid{grid-template-columns:repeat(4,1fr);gap:var(--s-2)}
  .sit-metric .val{font-size:var(--t-20)}
  .feed{max-height:180px}
}

/* ---- 5. PRIMITIVES -------------------------------------------------------- */
.panel{background:var(--surface-100);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--elev-1)}
.panel-2{background:var(--surface-200)}
.pad{padding:var(--s-5)}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap-2{gap:var(--s-2)} .gap-3{gap:var(--s-3)} .gap-4{gap:var(--s-4)}
.spacer{flex:1}
.hr{height:1px;background:var(--line-soft);border:0;margin:var(--s-4) 0}

/* buttons */
.btn{
  font:inherit;font-family:var(--f-display);font-weight:600;font-size:var(--t-15);cursor:pointer;
  border-radius:var(--r-chip);padding:var(--s-3) var(--s-4);border:1px solid var(--line);
  background:var(--surface-200);color:var(--ink);
  transition:border-color var(--d-micro) var(--ease),background var(--d-micro) var(--ease),transform var(--d-micro) var(--ease);
}
.btn:hover{border-color:var(--line-strong);background:var(--surface-300)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--teal);border-color:transparent;color:#04211f}
.btn.primary:hover{background:#1AC7B8}
.btn.ghost{background:transparent}
.btn:focus-visible,input:focus-visible,.choice:focus-visible,.trackcard:focus-visible,.railbtn:focus-visible{
  outline:2px solid var(--teal);outline-offset:2px;
}

/* chips */
.chip{
  display:inline-flex;align-items:center;gap:var(--s-1);font-family:var(--f-mono);
  font-size:var(--t-11);letter-spacing:.04em;text-transform:uppercase;
  padding:3px var(--s-2);border-radius:var(--r-chip);border:1px solid var(--line);color:var(--ink-2);
}
.chip.critical{color:var(--sev-critical);background:var(--sev-critical-bg);border-color:var(--sev-critical-bd)}
.chip.high{color:var(--sev-high);background:var(--sev-high-bg);border-color:var(--sev-high-bd)}
.chip.medium{color:var(--sev-medium);background:var(--sev-medium-bg);border-color:var(--sev-medium-bd)}
.chip.low{color:var(--sev-low);background:var(--sev-low-bg);border-color:var(--sev-low-bd)}
.chip.info{color:var(--sev-info);background:var(--sev-info-bg);border-color:var(--sev-info-bd)}
.chip.gold{color:var(--gold);background:var(--gold-bg);border-color:var(--gold-bd)}
.chip.teal{color:var(--teal);background:rgba(22,179,166,.12);border-color:var(--teal-ring)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--sev-low);flex:none}

/* inputs */
.field{display:flex;flex-direction:column;gap:var(--s-2);margin:var(--s-4) 0}
.field label{font-family:var(--f-mono);font-size:var(--t-11);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
input[type=text],input:not([type]),input[type=password]{
  font:inherit;font-size:var(--t-17);padding:var(--s-3) var(--s-4);border-radius:var(--r-chip);
  border:1px solid var(--line);background:var(--surface-300);color:var(--ink);
}
input::placeholder{color:var(--ink-3)}

/* section title */
.sect{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-3)}
.sect .icon{color:var(--ink-2)}

/* ---- 6. COMPONENTS -------------------------------------------------------- */

/* 6a. LOBBY split hero */
.lobby{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-6);align-items:start}
.brief h1{font-size:var(--t-46);line-height:1.02;margin:var(--s-3) 0 var(--s-4)}
.brief p.lede{color:var(--ink-2);font-size:var(--t-20);line-height:1.5;max-width:46ch}
.trackgrid{display:grid;gap:var(--s-3);margin:var(--s-4) 0}
.trackcard{
  text-align:left;display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-4);align-items:center;
  padding:var(--s-5);border-radius:var(--r-panel);border:1px solid var(--line);background:var(--surface-100);
  color:var(--ink);   /* buttons don't inherit text colour — set it or titles render black */
  cursor:pointer;transition:border-color var(--d-micro) var(--ease),background var(--d-micro) var(--ease);
}
.trackcard:hover{border-color:var(--line-strong);background:var(--surface-200)}
.trackcard .tc-icon{width:48px;height:48px;border-radius:var(--r-chip);display:grid;place-items:center;background:var(--surface-300);color:var(--ink-2)}
.trackcard h3{font-size:var(--t-20);color:var(--ink)}
.trackcard .tc-desc{font-size:var(--t-15);color:var(--ink-2)}
.trackcard .tc-meta{font-family:var(--f-mono);font-size:var(--t-13);color:var(--ink-3);text-align:right;line-height:1.5}
.trackcard.on{border-color:var(--teal-ring);background:rgba(22,179,166,.06)}
.trackcard.on .tc-icon{color:var(--teal);background:rgba(22,179,166,.12)}
.trackcard[data-track="executive"].on{border-color:var(--gold-bd);background:var(--gold-bg)}
.trackcard[data-track="executive"].on .tc-icon{color:var(--gold);background:var(--gold-bg)}

/* Range status instruments (replaces dead stat tiles) */
.instruments{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.inst{padding:var(--s-5);border-radius:var(--r-panel);border:1px solid var(--line);background:var(--surface-100)}
.inst .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-3)}
.inst .lab{font-family:var(--f-mono);font-size:var(--t-13);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.inst .val{font-family:var(--f-display);font-size:var(--t-34);font-weight:600;line-height:1}
.inst .val small{font-size:var(--t-15);color:var(--ink-3)}

/* 6b. SCENARIO STAGE */
.stagehead{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-4)}
.stagehead .counter{font-family:var(--f-mono);font-size:var(--t-13);letter-spacing:.08em;color:var(--ink-2)}
.scorebar{display:flex;gap:var(--s-1);flex:1}
.scorebar .seg{height:8px;flex:1;border-radius:2px;background:var(--surface-300);overflow:hidden;position:relative}
.scorebar .seg>i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0)}
.scorebar .seg.cur{box-shadow:inset 0 0 0 1px var(--teal-ring)}
.scorebar .seg.f-low>i{background:var(--sev-low);transform:scaleX(1)}
.scorebar .seg.f-medium>i{background:var(--sev-medium);transform:scaleX(1)}
.scorebar .seg.f-high>i{background:var(--sev-high);transform:scaleX(1)}
.scorebar .seg.f-critical>i{background:var(--sev-critical);transform:scaleX(1)}

/* Artefact = forensic exhibit */
.exhibit{border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;background:var(--surface-100);position:relative}
.exhibit .tab{
  position:absolute;top:0;right:var(--s-4);transform:translateY(-0%);
  font-family:var(--f-mono);font-size:var(--t-11);letter-spacing:.12em;text-transform:uppercase;
  background:var(--sev-critical-bg);color:var(--sev-critical);border:1px solid var(--sev-critical-bd);
  border-top:none;padding:3px var(--s-2);border-radius:0 0 var(--r-chip) var(--r-chip);
}
.exhibit .ex-hdr{
  font-family:var(--f-mono);font-size:var(--t-13);background:var(--surface-050);
  border-bottom:1px solid var(--line);padding:var(--s-4);
  background-image:repeating-linear-gradient(0deg,transparent 0 22px,rgba(255,255,255,.02) 22px 23px);
}
.exhibit .ex-hdr .r{display:flex;gap:var(--s-3);margin:2px 0}
.exhibit .ex-hdr .k{color:var(--ink-3);width:64px;flex:none;text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-11)}
.exhibit .ex-hdr .v{color:var(--ink)}
.exhibit .ex-body{padding:var(--s-4);white-space:pre-wrap;line-height:1.6;color:var(--ink-2);font-family:var(--f-mono);font-size:var(--t-13)}
.exhibit .tell{color:inherit;border-bottom:2px solid transparent;transition:border-color var(--d-elem) var(--ease)}
.exhibit.resolved .tell{border-bottom-color:var(--sev-critical)}

.prompt{font-family:var(--f-display);font-weight:500;font-size:var(--t-20);margin:var(--s-5) 0 var(--s-3)}

/* Decision options */
.choices{display:flex;flex-direction:column;gap:var(--s-2)}
.choice{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-3);
  min-height:64px;padding:var(--s-3) var(--s-4);text-align:left;font:inherit;font-size:var(--t-17);
  border-radius:var(--r-chip);border:1px solid var(--line);background:var(--surface-100);color:var(--ink);
  cursor:pointer;position:relative;overflow:hidden;
  transition:background var(--d-micro) var(--ease),border-color var(--d-micro) var(--ease);
}
.choice::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--teal);transform:scaleY(0);transform-origin:top;transition:transform var(--d-micro) var(--ease)}
.choice:hover{background:var(--surface-200)}
.choice:hover::before{transform:scaleY(1)}
.choice .key{font-family:var(--f-mono);font-weight:500;width:28px;height:28px;border-radius:var(--r-chip);display:grid;place-items:center;background:var(--surface-300);border:1px solid var(--line);color:var(--ink-2);font-size:var(--t-13)}
.choice .state{width:22px;height:22px;color:var(--ink-3);opacity:0}
.choice.selected{border-color:var(--teal-ring)}
.choice.selected .key{background:var(--teal);color:#04211f;border-color:transparent}
.choice.correct{background:var(--sev-low-bg);border-color:var(--sev-low-bd)}
.choice.correct .state{color:var(--sev-low);opacity:1}
.choice.wrong{background:var(--sev-critical-bg);border-color:var(--sev-critical-bd)}
.choice.wrong .state{color:var(--sev-critical);opacity:1}
.choice.reveal{border-color:var(--sev-low-bd);border-style:dashed}
.choice.reveal .state{color:var(--sev-low);opacity:1}
.choice[disabled]{cursor:default}

/* Feedback debrief */
.debrief-panel{border-radius:var(--r-panel);border:1px solid var(--line);background:var(--surface-100);padding:var(--s-4);margin-top:var(--s-4)}
.debrief-panel .verdict{font-family:var(--f-display);font-weight:600;font-size:var(--t-17);display:flex;align-items:center;gap:var(--s-2)}
.debrief-panel.good{border-color:var(--sev-low-bd)}
.debrief-panel.good .verdict{color:var(--sev-low)}
.debrief-panel.bad{border-color:var(--sev-critical-bd)}
.debrief-panel.bad .verdict{color:var(--sev-critical)}
.debrief-panel .explain{color:var(--ink-2);margin:var(--s-2) 0}
.footnotes{display:flex;flex-direction:column;gap:var(--s-1);margin-top:var(--s-3);border-top:1px solid var(--line-soft);padding-top:var(--s-3)}
.footnote{font-family:var(--f-mono);font-size:var(--t-11);color:var(--ink-3);display:flex;gap:var(--s-2)}
.footnote b{color:var(--ink-2);font-weight:500}

/* Situation panel items */
.sit-metric{display:flex;flex-direction:column;gap:2px}
.sit-metric .lab{font-family:var(--f-mono);font-size:var(--t-11);letter-spacing:.10em;text-transform:uppercase;color:var(--ink-3)}
.sit-metric .val{font-family:var(--f-display);font-weight:600;font-size:var(--t-26)}
.sit-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.feed{display:flex;flex-direction:column;gap:var(--s-1);max-height:280px;overflow:auto;font-family:var(--f-mono);font-size:var(--t-11)}
.feed .fe{display:flex;gap:var(--s-2);padding:var(--s-2);border-radius:var(--r-chip);background:var(--surface-100);border:1px solid var(--line-soft);color:var(--ink-2)}
.feed .fe .t{color:var(--ink-3);flex:none}

/* 6c. RESULTS report */
.report{max-width:840px;margin:0 auto}
.report .arcwrap{display:flex;gap:var(--s-6);align-items:center;flex-wrap:wrap}
.rank{font-family:var(--f-mono);font-size:var(--t-13);letter-spacing:.10em;text-transform:uppercase}
.breakdown{width:100%;border-collapse:collapse;margin:var(--s-5) 0;font-size:var(--t-15)}
.breakdown th,.breakdown td{text-align:left;padding:var(--s-3);border-bottom:1px solid var(--line-soft)}
.breakdown th{font-family:var(--f-mono);font-size:var(--t-11);letter-spacing:.10em;text-transform:uppercase;color:var(--ink-3)}
.breakdown td.pts{font-family:var(--f-mono);text-align:right}
.actions-list{display:flex;flex-direction:column;gap:var(--s-2);margin:var(--s-4) 0}
.action{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);align-items:start;padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-chip);background:var(--surface-100)}
.action .n{font-family:var(--f-mono);color:var(--teal)}

/* 6d. FACILITATOR command centre */
.gate{max-width:400px;margin:12vh auto 0}
.kpistrip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);margin-bottom:var(--s-4)}
.kpi{padding:var(--s-4);border-radius:var(--r-panel);border:1px solid var(--line);background:var(--surface-100)}
.kpi .lab{font-family:var(--f-mono);font-size:var(--t-11);letter-spacing:.10em;text-transform:uppercase;color:var(--ink-3)}
.kpi .val{font-family:var(--f-display);font-weight:600;font-size:var(--t-34);line-height:1.1}
.grid-2{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--s-4);margin-bottom:var(--s-4)}
.ptable{width:100%;border-collapse:collapse;font-size:var(--t-13)}
.ptable th,.ptable td{text-align:left;padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--line-soft);white-space:nowrap}
.ptable th{font-family:var(--f-mono);font-size:var(--t-11);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ptable td.mono{font-family:var(--f-mono)}
.ptable tr[data-flash]{animation:rowflash 1200ms var(--ease)}
.term{font-family:var(--f-mono);font-size:var(--t-11);background:var(--surface-000);border:1px solid var(--line);border-radius:var(--r-panel);padding:var(--s-3);max-height:340px;overflow:auto}
.term .ln{display:flex;gap:var(--s-2);padding:2px 0;color:var(--ink-2)}
.term .ln .t{color:var(--ink-3);flex:none}
.term .ln .a{color:var(--teal)}

/* ---- 7. LEGACY ALIASES (keep old class names working) --------------------- */
.card{background:var(--surface-100);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--elev-1)}
.muted{color:var(--ink-2)}
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:var(--t-11);padding:3px var(--s-2);border-radius:var(--r-chip);border:1px solid var(--line);color:var(--ink-2)}
.badge.gold{color:var(--gold);background:var(--gold-bg);border-color:var(--gold-bd)}
.badge.ok{color:var(--sev-low);background:var(--sev-low-bg);border-color:var(--sev-low-bd)}
.badge.bad{color:var(--sev-critical);background:var(--sev-critical-bg);border-color:var(--sev-critical-bd)}
.pill{font-family:var(--f-mono);font-size:var(--t-11);text-transform:uppercase;letter-spacing:.08em;color:var(--teal);border:1px solid var(--teal-ring);border-radius:var(--r-chip);padding:3px var(--s-2)}

/* ---- 8. MOTION (guarded) -------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .screen-in{animation:screenIn var(--d-screen) var(--ease) both}
  .stagger>*{animation:optIn var(--d-elem) var(--ease) both}
  .stagger>*:nth-child(1){animation-delay:40ms}
  .stagger>*:nth-child(2){animation-delay:80ms}
  .stagger>*:nth-child(3){animation-delay:120ms}
  .stagger>*:nth-child(4){animation-delay:160ms}
  .scorebar .seg>i{transition:transform 400ms var(--ease)}
  .choice.correct{animation:sweep 300ms var(--ease)}
  .choice.correct .state{animation:pop 300ms var(--ease)}
  .choice.wrong{animation:shake 160ms var(--ease)}
  .exhibit.resolved .tell{animation:draw 600ms var(--ease) both}
  .live-dot{animation:pulse 2s var(--ease) infinite}
  .drift{animation:drift 40s linear infinite}
}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes optIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sweep{from{box-shadow:inset 240px 0 0 -238px var(--sev-low)}to{box-shadow:inset 0 0 0 0 transparent}}
@keyframes pop{0%{transform:scale(.8)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes draw{from{border-bottom-color:transparent}to{border-bottom-color:var(--sev-critical)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes rowflash{0%{background:rgba(22,179,166,.18)}100%{background:transparent}}
@keyframes drift{0%{transform:translate(0,0)}50%{transform:translate(3%,2%)}100%{transform:translate(0,0)}}

/* ---- 9. PRINT (board-pack debrief, A4 light-on-white) --------------------- */
@media print{
  @page{size:A4;margin:18mm}
  body{background:#fff;color:#0a0e17;font-size:12pt}
  .rail,.situation,.topstrip,.no-print{display:none !important}
  .shell{display:block}
  .panel,.card{border:1px solid #cbd3e1;box-shadow:none;background:#fff}
  .report{max-width:none}
  h1,h2,h3{color:#0a0e17}
  .label,.eyebrow,.mono,.breakdown th{color:#475169}
  .chip,.badge{border-color:#cbd3e1}
}