/* ============================================================================
 * cra.css — "CRA in motion", the booth's security presentation (cra.html)
 *
 * Same tokens as console.css so the screens read as one product. A dark booth
 * screen, painted explicitly, one theme on purpose; sized for a TV at a few
 * metres: big headline, few words, the drawing does the talking.
 * ==========================================================================*/
:root{
  --bg:#050505; --panel:#0c1018; --panel2:#111725; --line:#1b2434; --line2:#26324a;
  --ink:#eef2f8; --muted:#8b96a9; --dim:#586679;
  --blue:#4a7fe0; --blue-soft:#7aa4f0; --orange:#f97316; --amber:#f59e0b; --gold:#fcd34d;
  --red:#ef4747; --slate:#6b7a90; --green:#31c56b;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,"Segoe UI",system-ui,Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:
    radial-gradient(1100px 620px at 82% -12%,rgba(249,115,22,.10),transparent 58%),
    radial-gradient(950px 640px at 4% 112%,rgba(38,74,148,.18),transparent 55%),var(--bg);
}
.deck{min-height:100vh;display:grid;grid-template-rows:auto auto 1fr auto;max-width:1600px;margin:0 auto;padding:18px 24px 14px}

/* ── top bar ─────────────────────────────────────────────────────────── */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px}
.mark{width:42px;height:42px;flex:none;fill:var(--orange);filter:drop-shadow(0 0 3px rgba(249,115,22,.45))}
.wordmark{font-weight:800;letter-spacing:.05em;font-size:17px}
.wordmark small{display:block;font:600 9.5px/1.3 var(--mono);color:var(--muted);letter-spacing:.14em;margin-top:2px}
.top nav{display:flex;gap:6px;flex-wrap:wrap}
.top nav a{color:var(--muted);font:600 12px/1 var(--mono);letter-spacing:.06em;text-decoration:none;padding:9px 12px;border:1px solid var(--line);border-radius:999px}
.top nav a:hover{color:var(--ink);border-color:var(--line2)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── stage: words left, drawing right ────────────────────────────────── */
.stage{display:grid;grid-template-columns:minmax(300px,31%) 1fr;gap:28px;align-items:center;padding:14px 0}
.copy{display:flex;flex-direction:column;gap:14px;min-width:0}
.kicker{font:700 11.5px/1.3 var(--mono);letter-spacing:.14em;color:var(--orange);text-transform:uppercase}
.copy h1{margin:0;font-size:clamp(28px,3.1vw,48px);line-height:1.08;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
.lead{margin:0;color:var(--muted);font-size:clamp(15px,1.25vw,19px);line-height:1.5;max-width:46ch}
.steps{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;
  font-size:clamp(14px,1.08vw,17px);line-height:1.4;color:var(--dim);transition:color .35s}
.steps li::before{content:counter(s);width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);
  display:grid;place-items:center;font:700 11px/1 var(--mono);color:var(--dim);transition:all .35s}
.steps li.on{color:var(--ink)}
.steps li.on::before{background:var(--orange);border-color:var(--orange);color:#0b0b0b;box-shadow:0 0 14px rgba(249,115,22,.5)}
.steps li.done{color:var(--muted)}
.steps li.done::before{border-color:rgba(49,197,107,.6);color:var(--green)}

.chips{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.chip{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--muted)}
.chip b{flex:none;font:700 10px/1 var(--mono);letter-spacing:.08em;padding:4px 7px;border-radius:5px;border:1px solid;margin-top:1px}
.chip.live b{color:var(--green);border-color:rgba(49,197,107,.45)}
.chip.build b{color:var(--blue-soft);border-color:rgba(74,127,224,.5)}
.chip.planned b{color:var(--amber);border-color:rgba(245,158,11,.45)}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.actions:empty{display:none}
.act{font:700 12.5px/1 var(--mono);letter-spacing:.03em;padding:11px 14px;border-radius:10px;cursor:pointer;
  color:var(--ink);background:var(--panel2);border:1px solid var(--line2)}
.act:hover{border-color:var(--orange)}
.act.primary{background:var(--orange);border-color:var(--orange);color:#0b0b0b}
.act.warn{border-color:rgba(239,71,71,.55)}
.act:disabled{opacity:.5;cursor:default}

.recorded{margin-top:10px;padding:9px 14px;border:1px solid rgba(245,158,11,.5);border-radius:10px;
  color:var(--amber);font:700 12px/1.4 var(--mono);letter-spacing:.06em;background:rgba(245,158,11,.06)}
.recorded[hidden]{display:none}
.viz{margin:0;min-width:0}
.viz svg{width:100%;height:auto;max-height:calc(100vh - 170px);display:block}

/* ── bottom bar: scenes, play/pause ───────────────────────────────────── */
.bar{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;border-top:1px solid var(--line);padding-top:12px}
.nb{font:700 13px/1 var(--mono);color:var(--ink);background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:10px 13px;cursor:pointer}
.nb:hover{border-color:var(--orange)}
.dots{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.dots button{font:600 11px/1 var(--mono);letter-spacing:.04em;color:var(--dim);background:none;border:1px solid var(--line);
  border-radius:999px;padding:7px 10px;cursor:pointer;position:relative;overflow:hidden}
.dots button.on{color:var(--ink);border-color:var(--orange)}
.dots button i{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--orange)}

/* ── the drawings (SVG) ──────────────────────────────────────────────── */
.node rect.box{fill:var(--panel2);stroke:var(--line2);stroke-width:1.5;transition:fill .4s,stroke .4s}
.node .t{fill:var(--ink);font:700 15px var(--sans)}
.node .s{fill:var(--muted);font:500 11.5px var(--mono)}
.node.dim{opacity:.35}
.node.on rect.box{stroke:var(--blue-soft);fill:#15203a}
.node.ok rect.box{stroke:var(--green);fill:#0f2419}
.node.bad rect.box{stroke:var(--red);fill:#2a1012}
.node.warn rect.box{stroke:var(--amber);fill:#2a1d08}
.node.hot rect.box{stroke:var(--orange);fill:#2a1608}
.wire{stroke:var(--line2);stroke-width:2;fill:none}
.wire.on{stroke:var(--orange)}
.wire.ok{stroke:var(--green)}
.wire.bad{stroke:var(--red)}
.pk rect{fill:var(--orange)}
.pk text{fill:#0b0b0b;font:700 11.5px var(--mono)}
.pk.ok rect{fill:var(--green)}
.pk.bad rect{fill:var(--red)}
.pk.blue rect{fill:var(--blue-soft)}
.lbl{fill:var(--muted);font:600 11px var(--mono);letter-spacing:.08em}
.lbl.big{font:700 13px var(--mono);fill:var(--ink)}
.lbl.o{fill:var(--orange)} .lbl.g{fill:var(--green)} .lbl.r{fill:var(--red)} .lbl.a{fill:var(--amber)} .lbl.b{fill:var(--blue-soft)}
.hex{fill:var(--dim);font:500 11px var(--mono)}
.hex.ok{fill:var(--green)} .hex.bad{fill:var(--red)}
.seal circle{fill:var(--panel);stroke:var(--line2);stroke-width:1.5}
.seal text{font:800 13px var(--sans);fill:var(--dim)}
.seal.ok circle{fill:var(--green);stroke:var(--green)} .seal.ok text{fill:#06140c}
.seal.bad circle{fill:var(--red);stroke:var(--red)} .seal.bad text{fill:#1b0506}
.die{fill:#0b111c;stroke:#2c3a55;stroke-width:2}
.pin{fill:#2a3650}
.fuse{fill:var(--panel);stroke:var(--line2);stroke-width:1.2}
.fuse.on{fill:var(--orange);stroke:var(--orange)}
.wall{stroke:var(--amber);stroke-width:2;stroke-dasharray:8 7;fill:none}
.zone{fill:rgba(255,255,255,.015);stroke:var(--line);stroke-width:1}
.zone.sec{fill:rgba(49,197,107,.04);stroke:rgba(49,197,107,.35)}
.tag rect{fill:none;stroke:var(--line2)}
.tag text{fill:var(--muted);font:700 10px var(--mono);letter-spacing:.12em}
.layer rect{fill:var(--panel2);stroke:var(--line2);stroke-width:1.5}
.layer.on rect{stroke:var(--orange);fill:#1b1410}
.layer .t{fill:var(--ink);font:700 17px var(--sans)}
.layer .s{fill:var(--muted);font:500 12.5px var(--mono)}
.layer .n{fill:var(--orange);font:800 14px var(--mono)}
.beam{fill:url(#beam)}
.tile rect{fill:var(--panel2);stroke:var(--line2)}
.tile .k{fill:var(--orange);font:800 13px var(--mono)}
.tile .t{fill:var(--ink);font:600 12px var(--sans)}
.tile.live .d{fill:var(--green)} .tile.build .d{fill:var(--blue-soft)} .tile.planned .d{fill:var(--amber)}
.tile.on rect{stroke:var(--orange)}
.card rect{fill:var(--panel2);stroke:var(--line2)}
.card .t{fill:var(--ink);font:700 14px var(--sans)}
.card .v{fill:var(--orange);font:700 12.5px var(--mono)}
.card .s{fill:var(--muted);font:500 11px var(--mono)}
.card.ok rect{stroke:var(--green)}
.card.note rect{stroke:var(--amber)}
.ring{fill:none;stroke:var(--line2);stroke-width:2}
.clock .big{font:800 22px var(--mono);fill:var(--ink)}

@media(max-width:980px){
  .stage{grid-template-columns:1fr}
  .viz svg{max-height:none}
  .bar{grid-template-columns:auto 1fr auto}
  .bar .nb.pp{grid-column:1 / -1}
}
@media(max-width:420px){.deck{padding:14px 16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.top nav a.lang b{color:var(--ink)}
.top nav a.lang span{margin:0 4px;opacity:.6}
/* the recorded-values banner sits in its own row; hidden, the row is empty */
.deck > .top{grid-row:1} .deck > .recorded{grid-row:2;align-self:start} .deck > .stage{grid-row:3} .deck > .bar{grid-row:4}