/* ═══════════════════════════════════════════════════════════════
   Exam Hub — design system
   One dark theme, one accent token, hairline geometry, tabular
   numerals. Components consume tokens via CSS custom properties so
   the accent dropdown drives the whole UI, not a handful of rules.
   ═══════════════════════════════════════════════════════════════ */

/* View modes: four eye-comfort levels, switched by [data-view] on <html>.
   Two rules keep long sessions comfortable: text is never pure #fff on a
   dark ground, and contrast is tuned to ~11-12:1 instead of maxed out.
   The accent hue ([data-theme]) stays completely independent of the view. */
:root {
  /* Radius story: 10 controls, 14 panels, 999 only pills */
  --radius-card: 14px;
  --radius-ctl: 10px;

  /* Readable foreground for filled accent buttons */
  --on-accent: #fff;

  /* Accent (default: deep blue) — retargeted by [data-theme] below.
     --accent-strong is the darker variant the light views use as text. */
  --accent-base: #3b82f6;
  --accent: var(--accent-base);
  --accent-strong: #1d4ed8;
  --accent-soft: rgba(59,130,246,.12);
  --accent-ring: rgba(59,130,246,.35);

  /* Default view = Dim (soft cool dark). :root is the no-JS fallback. */
  color-scheme: dark;
  --bg: #151a22;
  --surface: #1a2029;
  --surface-2: #202733;
  --surface-3: #273040;
  --border: rgba(214,226,244,.10);
  --border-strong: rgba(214,226,244,.19);
  --text: #cdd6e3;
  --text-2: #9aa6b9;
  --text-3: #838fa3;
  --code-bg: #12161d;
  --scrim: rgba(9,12,17,.74);

  /* Semantic status */
  --ok: #34d399;   --ok-soft: rgba(52,211,153,.13);
  --warn: #fbbf24; --warn-soft: rgba(251,191,36,.13);
  --bad: #f87171;  --bad-soft: rgba(248,113,113,.13);
  --info: #60a5fa;

  /* Domain-chart categorical palette (DCOLS reads these) */
  --cat-1: #6aa2f7;
  --cat-2: #a78bfa;
  --cat-3: #f0b429;
  --cat-4: #34d399;
  --cat-5: #f87171;
  --cat-6: #e879f9;

  /* Single allowed elevation (modals + palette) */
  --shadow-pop: 0 12px 36px rgba(4,7,12,.5), 0 2px 8px rgba(4,7,12,.36);
}

/* Accent switcher — one real token per theme. Each hue ships two inks:
   the bright one for dark grounds, the darker one light views use as text. */
:root[data-theme="blue"]   { --accent-base:#3b82f6; --accent:var(--accent-base); --accent-strong:#1d4ed8; --accent-soft:rgba(59,130,246,.12);  --accent-ring:rgba(59,130,246,.35); }
:root[data-theme="purple"] { --accent-base:#a78bfa; --accent:var(--accent-base); --accent-strong:#6d28d9; --accent-soft:rgba(167,139,250,.12); --accent-ring:rgba(167,139,250,.35); }
:root[data-theme="green"]  { --accent-base:#34d399; --accent:var(--accent-base); --accent-strong:#046c4e; --accent-soft:rgba(52,211,153,.12);  --accent-ring:rgba(52,211,153,.32); }
:root[data-theme="orange"] { --accent-base:#fb923c; --accent:var(--accent-base); --accent-strong:#9a4a06; --accent-soft:rgba(251,146,60,.12);  --accent-ring:rgba(251,146,60,.32); }
:root[data-theme="pink"]   { --accent-base:#f472b6; --accent:var(--accent-base); --accent-strong:#be185d; --accent-soft:rgba(244,114,182,.12); --accent-ring:rgba(244,114,182,.32); }
:root[data-theme="cyan"]   { --accent-base:#22d3ee; --accent:var(--accent-base); --accent-strong:#0e7490; --accent-soft:rgba(34,211,238,.12);  --accent-ring:rgba(34,211,238,.32); }
:root[data-theme="indigo"] { --accent-base:#818cf8; --accent:var(--accent-base); --accent-strong:#4338ca; --accent-soft:rgba(129,140,248,.12); --accent-ring:rgba(129,140,248,.32); }

/* ── View: Dark — the original look, kept bit-for-bit ───────────── */
:root[data-view="dark"] {
  color-scheme: dark;
  --bg: #0b0d12; --surface: #10131a; --surface-2: #151a23; --surface-3: #1b2130;
  --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.16);
  --text: #e8eaf1; --text-2: #a3adbf; --text-3: #808b9e;
  --code-bg: #0a0c11; --scrim: rgba(4,6,10,.72);
  --shadow-pop: 0 12px 40px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  --ok:#34d399;    --ok-soft:rgba(52,211,153,.12);
  --warn:#fbbf24;  --warn-soft:rgba(251,191,36,.12);
  --bad:#f87171;   --bad-soft:rgba(248,113,113,.12);
  --info:#60a5fa;
  --cat-1:#60a5fa; --cat-2:#a78bfa; --cat-3:#fbbf24;
  --cat-4:#34d399; --cat-5:#f87171; --cat-6:#e879f9;
}

/* ── View: Dim — cool charcoal + off-white text (default) ──────────
   Lifting the ground and softening the ink takes the strain out of
   a near-black ground with near-white text (~11.9:1 instead of 16.2:1). */
:root[data-view="dim"] {
  color-scheme: dark;
  --bg: #151a22; --surface: #1a2029; --surface-2: #202733; --surface-3: #273040;
  --border: rgba(214,226,244,.10); --border-strong: rgba(214,226,244,.19);
  --text: #cdd6e3; --text-2: #9aa6b9; --text-3: #838fa3;
  --code-bg: #12161d; --scrim: rgba(9,12,17,.74);
  --shadow-pop: 0 12px 36px rgba(4,7,12,.5), 0 2px 8px rgba(4,7,12,.36);
  --ok:#34d399;    --ok-soft:rgba(52,211,153,.13);
  --warn:#fbbf24;  --warn-soft:rgba(251,191,36,.13);
  --bad:#f87171;   --bad-soft:rgba(248,113,113,.13);
  --info:#60a5fa;
  --cat-1:#6aa2f7; --cat-2:#a78bfa; --cat-3:#f0b429;
  --cat-4:#34d399; --cat-5:#f87171; --cat-6:#e879f9;
}

/* ── Light views share darker status colours, chart cats and accents ──
   Bright 400-level inks that read fine on charcoal fall to 2-4:1 on a
   light ground, so both the semantics and the accent drop a few steps. */
:root[data-view="paper"], :root[data-view="slate"] {
  color-scheme: light;
  --accent: var(--accent-strong);
  --ok:#0d7a4f;   --ok-soft:rgba(13,122,79,.12);
  --warn:#8f5c00; --warn-soft:rgba(143,92,0,.12);
  --bad:#b3261e;  --bad-soft:rgba(179,38,30,.12);
  --info:#1d4ed8;
  --cat-1:#2563eb; --cat-2:#7c3aed; --cat-3:#a16207;
  --cat-4:#047857; --cat-5:#dc2626; --cat-6:#a21caf;
}

/* ── View: Paper — warm cream, the classic long-reading surface ───── */
:root[data-view="paper"] {
  --bg: #f5f2ec; --surface: #fdfbf7; --surface-2: #f0ece4; --surface-3: #e7e1d6;
  --border: rgba(80,68,48,.18); --border-strong: rgba(80,68,48,.30);
  --text: #35322b; --text-2: #5b564d; --text-3: #6f6a5c;
  --code-bg: #efeae0; --scrim: rgba(48,41,30,.42);
  --shadow-pop: 0 12px 32px rgba(58,48,32,.16), 0 2px 6px rgba(58,48,32,.10);
}

/* ── View: Slate — cool grey-blue, bright but calm ────────────────── */
:root[data-view="slate"] {
  --bg: #eef1f6; --surface: #f9fbfd; --surface-2: #e8edf4; --surface-3: #dee5ee;
  --border: rgba(30,41,59,.18); --border-strong: rgba(30,41,59,.30);
  --text: #26303c; --text-2: #4b5768; --text-3: #636f83;
  --code-bg: #e9eef5; --scrim: rgba(22,30,42,.42);
  --shadow-pop: 0 12px 32px rgba(30,41,59,.16), 0 2px 6px rgba(30,41,59,.10);
}

* { font-family: 'Inter', sans-serif; }

html, body { background: var(--bg); }
body { color: var(--text); }

/* Every metric, timer and counter reads as an instrument */
.num, .tabular, #gauge-pct, #gauge-frac, #timer-text, #q-timer-text,
#modal-score, #results-score, #stat-score, #stat-correct, #stat-attempted, #stat-review,
#diff-easy, #diff-medium, #diff-hard, #s-attempted, #s-correct, #s-wrong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ── Screen chrome ─────────────────────────────────────────── */
.screen { background: var(--bg); min-height: 100vh; }
#exam-screen, #analytics-screen, #results-screen { background: var(--bg); }

/* Sticky library nav: flat, hairline bottom */
.library-nav {
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

/* Signature tick on sidebar micro section labels */
#exam-sidebar .micro { display:flex; align-items:center; gap:6px; }
#exam-sidebar .micro::before { content:''; width:3px; height:10px; border-radius:2px; background:var(--accent); flex-shrink:0; }

/* Accent tick — the signature mark */
.accent-tick {
  display:inline-block; width:3px; border-radius:2px;
  background: var(--accent); align-self: stretch;
}

/* ── Panels / cards ────────────────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.panel-2 { background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-card); }

/* Exam card */
.exam-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  cursor: pointer;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: background-color .16s ease, border-color .16s ease;
}
.exam-card:hover { background: var(--surface-2); border-color: var(--border-strong); }

/* Track + fill used by bars and rings */
.track { stroke: var(--border); }
.ring-fill { transition: stroke-dasharray .6s ease; }
.domain-bar, .bar-fill { border-radius: 999px; transition: width .5s ease; }
.bar-track {
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}

/* ── Drop zone: slim dashed strip ──────────────────────────── */
.drop-zone {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  transition: border-color .16s ease, background-color .16s ease;
  cursor: pointer;
}
.drop-zone:hover { background: var(--surface-2); border-color: var(--accent-ring); }
.drop-zone.drag-over { border-color: var(--accent); background: var(--accent-soft); }

/* ── Option rows: quiet full-width, left accent tick ───────── */
.opt-btn {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; text-align:left;
  background: var(--surface-2);
  border:1px solid var(--border);
  border-radius: var(--radius-ctl);
  position:relative;
  padding:14px 16px 14px 18px;
  font-size:.925rem; font-weight:500; color:var(--text-2);
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.opt-btn::before {
  content:''; position:absolute; left:1px; top:8px; bottom:8px; width:2px;
  border-radius:2px; background:transparent;
}
.opt-btn:hover:not(:disabled) {
  background: var(--surface-3); border-color: var(--border-strong); color: var(--text);
}
.opt-btn:hover:not(:disabled)::before { background: var(--accent); }
.opt-btn.correct { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--text); }
.opt-btn.correct::before { background: var(--ok); }
.opt-btn.wrong   { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); color: var(--text); }
.opt-btn.wrong::before { background: var(--bad); }
.opt-btn.picked  { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--text); }
.opt-btn.picked::before { background: var(--accent); }
.opt-btn.dimmed  { opacity:.42; }
.opt-btn:disabled { cursor: default; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.8125rem; font-weight:600;
  border-radius: var(--radius-ctl);
  border: 1px solid var(--border);
  background: transparent; color: var(--text-2);
  padding: .5rem .875rem;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
  cursor: pointer;
}
.btn:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.btn:focus-visible { outline:2px solid var(--accent-ring); outline-offset:1px; }
.btn:disabled { opacity:.35; pointer-events:none; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); border-color: transparent; }

.btn-sm { padding:.375rem .625rem; font-size:.75rem; border-radius:8px; }
.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  border:1px solid var(--border); background:transparent; color:var(--text-3);
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
  cursor:pointer; font-size:.75rem;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }

/* Semantic icon buttons in the exam card footer */
.btn-ok   { color: var(--ok); }    .btn-ok:hover   { color: var(--ok); }
.btn-bad  { color: var(--bad); }   .btn-bad:hover  { color: var(--bad); }
.btn-accent { color: var(--accent); } .btn-accent:hover { color: var(--accent); }

/* ── Segmented control (study-mode tabs) ───────────────────── */
.seg {
  display:inline-flex; gap:2px; padding:3px;
  background: var(--surface-2); border:1px solid var(--border);
  border-radius: var(--radius-ctl);
  max-width:100%; overflow-x:auto; scrollbar-width:none;
}
.seg::-webkit-scrollbar { display:none; }
.mode-btn {
  padding: 5px 12px; border-radius: 7px;
  font-size: .75rem; font-weight: 600; color: var(--text-3);
  transition: background-color .14s ease, color .14s ease;
  cursor: pointer; flex:none;
}
.mode-btn:hover { color: var(--text); }
.mode-btn.on { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
/* Prove only does something where a scene exists, so say so on the button. */
.mode-btn.has::after {
  content:''; display:inline-block; width:5px; height:5px; margin-left:5px;
  border-radius:50%; background:var(--accent); vertical-align:1px;
}

/* Progress segment strip (pagination dots) */
.seg-dot {
  flex:1 1 0; min-width:6px; max-width:26px; height:4px; border-radius:2px;
  background: var(--surface-3); cursor:pointer; border:none; margin:0;
  transition: background-color .14s ease, height .12s ease;
}
.seg-dot.on { outline:1.5px solid var(--accent-ring); outline-offset:1.5px; height:9px; border-radius:4px; }
/* A scene question keeps its status colour, with an accent underline added. */
.seg-dot.scene { box-shadow: inset 0 -2px 0 0 var(--accent); }

/* Confidence buttons */
.conf-btn {
  padding:4px 12px; border-radius:8px; font-size:.75rem; font-weight:600;
  border:1px solid var(--border); background:transparent; color:var(--text-2);
  transition: background-color .14s ease, border-color .14s ease, color .14s ease; cursor:pointer;
}
.conf-btn:hover { background: var(--surface-2); }
.conf-btn.on { border-color: var(--accent-ring); background: var(--accent-soft); color: var(--accent); }

/* ── Micro labels ──────────────────────────────────────────── */
.micro {
  font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-3);
}

/* Pills / status */
.pill {
  display:inline-flex; align-items:center; gap:.375rem;
  font-size:10.5px; font-weight:600; letter-spacing:.02em;
  padding:2px 9px; border-radius:999px;
  border:1px solid var(--border); color:var(--text-2); background:var(--surface-2);
}
.pill-ok   { color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 30%, transparent);   background: var(--ok-soft); }
.pill-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); background: var(--warn-soft); }
.pill-bad  { color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 30%, transparent);  background: var(--bad-soft); }
.pill-accent { color: var(--accent); border-color: var(--accent-ring); background: var(--accent-soft); }

.chip {
  display:inline-flex; align-items:center; gap:.3125rem;
  font-size:10.5px; font-weight:500; color: var(--text-2);
  padding:3px 8px; border-radius:999px;
  border:1px solid var(--border); background: var(--surface-2);
}

/* Collections + notes on the question card */
.chip-add {
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:10.5px; font-weight:600; color:var(--accent);
  padding:3px 9px; border-radius:999px; cursor:pointer;
  border:1px dashed var(--accent-ring); background:var(--accent-soft);
  transition: border-color .14s ease;
}
.chip-add:hover, .chip-add[aria-expanded="true"] { border-style:solid; }
.chip-x {
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; padding:0; border:none; border-radius:999px;
  background:transparent; color:var(--text-3); cursor:pointer;
}
.chip-x:hover { color:var(--bad); background:var(--bad-soft); }
#note-toggle-btn.has-note { border-color:var(--accent-ring); color:var(--accent); }

/* ── Toasts / bars ─────────────────────────────────────────── */
.toast {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--bad);
  color: var(--text-2);
  font-size: .8125rem;
  border-radius: var(--radius-ctl);
  padding: .7rem 1rem;
  display:flex; align-items:center; gap:.625rem;
}
.toast-ok { border-left-color: var(--ok); }
#lib-feedback { color: var(--ok); }

/* Modal shell */
.modal-scrim { background: var(--scrim); backdrop-filter: blur(6px); }
.modal {
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
}
.modal .in { transform: scale(1); }

/* Question/explanation blocks */
.why-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
}
.artifact-pre {
  background: var(--code-bg); border:1px solid var(--border); border-radius:10px;
  padding:.8rem 1rem; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem; line-height:1.6; color:var(--text-2);
  white-space:pre-wrap; word-break:break-word; overflow-x:auto; max-height:22rem; overflow-y:auto;
}
.editor-pre {
  background: var(--code-bg); border:1px solid var(--border); border-radius:10px;
  padding:.8rem 1rem; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.72rem; line-height:1.55; color:var(--text-2);
  white-space:pre-wrap; word-break:break-word; margin-top:.35rem; max-height:16rem; overflow:auto;
}

/* The scene builder's rows mix flexible and fixed-width fields. A form control's
   automatic minimum is its min-content width, so a fixed width never shrank and
   the modal's scroll box grew a horizontal scrollbar. Let the rows wrap and the
   fields shrink instead. */
#editor-scene-pane .flex { flex-wrap: wrap; }
#editor-scene-pane input, #editor-scene-pane select, #editor-scene-pane textarea { min-width: 0; }

/* Inline code spans */
code {
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; color: var(--accent);
}

/* ── Motion ────────────────────────────────────────────────── */
@keyframes fadeUp { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: translateY(0); } }
.fade-up { animation: fadeUp .2s ease both; }
@keyframes slideDown { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform: translateY(0); } }
.slide-down { animation: slideDown .18s ease both; }
@media (prefers-reduced-motion: reduce) {
  .fade-up, .slide-down { animation: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── Scrollbar: quiet, no gradient ─────────────────────────── */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-3); border-radius:99px;
  border:2px solid var(--bg); background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip:padding-box; }

/* Inputs/selects inherit control radius */
input, select, textarea {
  border-radius: var(--radius-ctl);
  transition: border-color .14s ease, background-color .14s ease;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--accent-ring);
}

/* Exam sidebar — flat panel edge */
#exam-sidebar { background: var(--surface); border-right: 1px solid var(--border); }

#q-timer { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }

/* Result-screen cards soften slightly */
#results-body .rounded-xl { background: var(--surface); }

@media (max-width: 650px) {
  .library-nav { flex-wrap: wrap; gap: 14px; padding: 12px 16px; }
  .library-actions { width: 100%; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
}

/* Appendix: stateful control styles referenced from JS/HTML */
.flag-on {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
  background: var(--warn-soft);
}
.btn-on {
  color: var(--text);
  background: var(--accent-soft);
  border-color: var(--accent-ring);
}
.timer-low {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 40%, transparent);
  background: var(--bad-soft);
}
.tint-ok  { background: var(--ok-soft);   border: 1px solid color-mix(in srgb, var(--ok)   32%, transparent); border-radius: 10px; }
.tint-bad { background: var(--bad-soft);  border: 1px solid color-mix(in srgb, var(--bad)  32%, transparent); border-radius: 10px; }
.tint-warn{ background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent); border-radius: 10px; }

/* Shuffle toggle: hidden checkbox drives the indicator via sibling selector */
#shuffle-toggle:checked ~ #shuffle-indicator {
  background: var(--accent);
}
#shuffle-toggle:checked ~ #shuffle-indicator #shuffle-knob {
  background: var(--text);
  transform: translateX(14px);
}

/* ══ Round 5: Dashboard / Exams split ════════════════════════ */

/* Primary view tabs in the library nav */
.lib-tabs {
  display:inline-flex; gap:2px; padding:3px;
  background: var(--surface-2); border:1px solid var(--border);
  border-radius: var(--radius-ctl);
}
.lib-tab {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 14px; border-radius:7px;
  font-size:.75rem; font-weight:600; color:var(--text-3);
  transition: background-color .14s ease, color .14s ease;
  cursor:pointer;
}
.lib-tab:hover { color: var(--text); }
.lib-tab.on { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.lib-tab.on i { color: var(--accent); }

/* View-mode dropdown rows (Dark / Dim / Paper / Slate) */
[data-view-opt] { align-items: flex-start; }
[data-view-opt].on { color: var(--text); }
[data-view-opt] .view-check { opacity:0; margin-left:auto; padding-top:2px; color:var(--accent); transition:opacity .12s ease; }
[data-view-opt].on .view-check { opacity:1; }

/* Next best action — the one thing worth doing now */
.next-action {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border-radius: var(--radius-ctl);
  background: var(--surface-2); border:1px solid var(--border);
  border-left:3px solid var(--accent);
}
.next-action.is-quiet { border-left-color: var(--border-strong); }
.next-action .na-icon {
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--accent-soft); color: var(--accent);
}
.next-action.is-quiet .na-icon { background: var(--surface-3); color: var(--text-3); }

/* Compact metric tiles (hero + pack rows + analytics hero) */
.stat-tile {
  background: var(--surface-2); border:1px solid var(--border);
  border-radius: var(--radius-ctl); padding:10px 12px;
}
.stat-tile .st-value { font-size:1.05rem; font-weight:600; color:var(--text); line-height:1.1; }
.stat-tile .st-label { font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin-top:3px; }

/* Recommended-practice cards */
.action-card {
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:10px;
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-card); padding:18px;
}
.action-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--accent); }
.action-card.is-quiet::before { background: var(--border-strong); }
.action-card .ac-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.action-card .ac-num { font-size:1.35rem; font-weight:600; color:var(--text); line-height:1; }

/* Per-pack readiness row */
.pack-row {
  display:flex; flex-direction:column; gap:12px;
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-card); padding:16px 18px;
  transition: border-color .16s ease;
}
.pack-row:hover { border-color: var(--border-strong); }
.pack-row .pr-foot { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pack-stats { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:10.5px; color:var(--text-3); }
.pack-stats b { font-weight:600; }

@media (max-width: 650px) {
  .lib-tab { padding:5px 10px; }
  .next-action { align-items:flex-start; }
  .next-action > div { order:2; flex-basis:calc(100% - 42px); }
  .next-action .btn { order:3; flex-basis:100%; width:100%; justify-content:center; }
}

/* Screen-reader-only text: used by the live region that announces an answer. */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ═══ PROVING GROUND ═══════════════════════════════════════════
   An operable question scene. Built entirely from view tokens so
   Dark / Dim / Paper / Slate and every accent hue restyle it for
   free. Motion is dropped by the reduced-motion rule at the end. */
.pg { border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface-2); padding:14px; }
.pg-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pg-brand {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
.pg-hint { font-size:.68rem; color:var(--text-3); }
.pg-bar {
  display:flex; align-items:center; gap:10px; margin-top:10px; padding-top:10px;
  border-top:1px solid var(--border); font-size:.63rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-3);
}
.pg-budget { display:inline-flex; gap:4px; }
.pg-budget i { width:8px; height:8px; border-radius:50%; background:var(--border-strong); display:block; }
.pg-budget i.on { background:var(--accent); box-shadow:0 0 8px var(--accent-ring); }
.pg-count { margin-left:auto; }
.pg-lock {
  margin:11px 0 0; display:flex; gap:7px; align-items:flex-start;
  font-size:.72rem; line-height:1.5; color:var(--text-3);
}
.pg-lock i { margin-top:.2rem; color:var(--accent); }

/* ── scene teaser: the chip that advertises a scene in the other modes ── */
.pg-teaser {
  display:flex; flex-direction:column; gap:9px; align-items:flex-start;
  border-left:2px solid var(--accent); background:var(--surface-2);
}
.pg-teaser-t { margin:0; font-size:.76rem; line-height:1.6; color:var(--text-2); }
.pg-teaser-t b { color:var(--text); font-weight:600; }

/* read-only miniature of the spine under the question in the other modes */
.pg-mini { display:flex; flex-wrap:wrap; align-items:center; gap:5px 7px; margin:1px 0; min-width:0; max-width:100%; overflow-x:auto; }
.pg-mini-hop {
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  font-size:.68rem; color:var(--text-2);
  border:1px solid var(--border); border-radius:999px; padding:3px 9px 3px 7px;
  background:var(--surface); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pg-mini-hop i { font-size:.6rem; color:var(--accent); flex:none; }
.pg-mini-arr { font-size:.58rem; color:var(--text-3); flex:none; }

/* ── signal spine ── */
.pg-spine { margin-top:12px; }
.pg-hop {
  position:relative; display:flex; align-items:stretch; width:100%; overflow:hidden;
  border:1px solid var(--border); border-radius:var(--radius-ctl);
  background:var(--surface); color:var(--text);
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.pg-hop:hover { border-color:var(--border-strong); }
.pg-hop.probed { border-color:var(--accent-ring); }
.pg-hop.marked { border-color:var(--warn); background:color-mix(in srgb, var(--warn) 6%, var(--surface)); }
.pg-hop.fault { border-color:var(--warn); background:color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.pg-hop.hit { border-color:var(--ok); background:color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.pg-hop.miss { border-color:var(--bad); background:color-mix(in srgb, var(--bad) 7%, var(--surface)); }
.pg-hopmain {
  position:relative; flex:1; min-width:0; display:flex; align-items:center; gap:11px;
  padding:10px 12px; text-align:left; cursor:pointer; overflow:hidden;
  border:0; background:transparent; color:inherit; font:inherit;
}
/* The flag is the learner's own call, not the app's answer: it is shut until the
   row has been read, and shut again once the answer is on screen. */
.pg-flag {
  flex:none; width:42px; display:grid; place-items:center; cursor:pointer;
  border:0; border-left:1px solid var(--border); background:transparent; color:var(--text-3);
  transition:color .15s ease, background-color .15s ease;
}
.pg-flag:hover { color:var(--text); background:var(--surface-2); }
.pg-flag.on { color:var(--warn); background:var(--warn-soft); }
.pg-flag.miss { color:var(--bad); background:var(--bad-soft); }
.pg-flag[disabled] { cursor:not-allowed; opacity:.45; }
.pg-flag[disabled]:hover { background:transparent; color:var(--text-3); }
.pg-ico {
  flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  font-size:12px; background:var(--surface-3); color:var(--text-2);
}
.pg-hop.probed .pg-ico { background:var(--accent-soft); color:var(--accent); }
.pg-hop.marked .pg-ico, .pg-hop.fault .pg-ico { background:var(--warn-soft); color:var(--warn); }
.pg-hop.hit .pg-ico { background:color-mix(in srgb, var(--ok) 18%, transparent); color:var(--ok); }
.pg-hop.miss .pg-ico { background:var(--bad-soft); color:var(--bad); }
.pg-meta { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pg-nm { font-size:.82rem; font-weight:600; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.pg-badge {
  font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; padding:1px 6px;
  border-radius:999px; border:1px solid var(--border-strong); color:var(--text-3); font-weight:600;
}
.pg-sub { font-family:var(--mono); font-size:.68rem; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pg-pad { flex:none; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); text-align:right; white-space:nowrap; }
.pg-pad.hot {
  color:var(--warn); border:1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  background:var(--warn-soft); padding:2px 7px; border-radius:999px; font-weight:700;
}
.pg-scan {
  position:absolute; left:0; right:0; top:-26px; height:26px; opacity:0; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--accent-soft), transparent);
}
.pg-hop.picking .pg-scan { animation:pgScan .9s ease-out 1; }
@keyframes pgScan { 0%{opacity:0;top:-20px} 30%{opacity:1} 100%{opacity:0;top:100%} }

.pg-leg { position:relative; height:34px; }
.pg-lane {
  position:absolute; top:0; bottom:0; width:2px; border-radius:2px;
  background:repeating-linear-gradient(180deg, var(--border-strong) 0 5px, transparent 5px 10px);
}
.pg-lane.d { left:calc(50% - 6px); }
.pg-lane.u { left:calc(50% + 6px); }
.pg-lane.live {
  background:repeating-linear-gradient(180deg, var(--accent) 0 5px, transparent 5px 10px);
  animation:pgDash 1.1s linear infinite;
}
@keyframes pgDash { to { background-position:0 10px; } }
.pg-pkt { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--accent); transform:translateX(-50%); }
.pg-pkt.d { left:calc(50% - 6px); animation:pgDown 1.9s linear infinite; }
.pg-pkt.u { left:calc(50% + 6px); animation:pgUp 1.9s linear infinite; }
.pg-pkt.die { background:var(--bad); box-shadow:0 0 8px var(--bad); }
.pg-pkt.d.die { animation-name:pgDieDown; animation-duration:2.1s; }
.pg-pkt.u.die { animation-name:pgDieUp; animation-duration:2.1s; }
@keyframes pgDown { 0%{top:1px;opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{top:calc(100% - 8px);opacity:0} }
@keyframes pgUp { 0%{top:calc(100% - 8px);opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{top:1px;opacity:0} }
@keyframes pgDieDown { 0%{top:1px;opacity:0} 15%{opacity:1} 45%{top:calc(50% - 3px);opacity:1} 62%{top:calc(50% - 3px);opacity:0} 100%{top:calc(50% - 3px);opacity:0} }
@keyframes pgDieUp { 0%{top:calc(100% - 8px);opacity:0} 15%{opacity:1} 45%{top:calc(50% - 3px);opacity:1} 62%{top:calc(50% - 3px);opacity:0} 100%{top:calc(50% - 3px);opacity:0} }
.pg-drop {
  position:absolute; top:50%; transform:translateY(-50%);
  max-width:calc(50% - 26px); line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bad);
  background:var(--bad-soft); border:1px solid color-mix(in srgb, var(--bad) 40%, transparent);
  padding:1px 6px; border-radius:999px;
}
.pg-drop.in { left:calc(50% + 16px); }
.pg-drop.out { right:calc(50% + 16px); }
.pg-leg.burst .pg-pkt:not(.die) { animation-duration:.65s; animation-iteration-count:1; }
.pg-leg.burst .pg-pkt.d:not(.die) { animation-name:pgDown; }
.pg-leg.burst .pg-pkt.u:not(.die) { animation-name:pgUp; }
.pg-step.burst .pg-step-rule { animation:pgRung .65s ease-out 1; }
@keyframes pgRung { 0%,100% { box-shadow:none; } 35% { box-shadow:0 0 8px var(--accent), 0 0 3px var(--accent); } }

/* ── instruments ── */
.pg-grid { display:grid; grid-template-columns:1fr; gap:10px; margin-top:12px; }
@media (min-width:760px) { .pg-grid { grid-template-columns:1fr 1fr; } }
.pg-card { border:1px solid var(--border); border-radius:var(--radius-ctl); background:var(--surface); padding:11px 12px; margin-top:10px; }
.pg-grid .pg-card { margin-top:0; }
.pg-card.locked { opacity:.72; }
.pg-card-h {
  margin:0 0 9px; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); display:flex; align-items:center; gap:6px;
}
.pg-card-h i { color:var(--accent); }
.pg-feed { display:flex; flex-direction:column; gap:8px; max-height:300px; overflow-y:auto; }
.pg-empty {
  margin:0; font-size:.72rem; line-height:1.6; color:var(--text-3);
  border:1px dashed var(--border); border-radius:9px; padding:12px; text-align:center;
}
.pg-evi { border:1px solid var(--border); border-left:2px solid var(--accent); border-radius:9px; padding:9px 10px; background:var(--surface-2); }
.pg-evi.hot { border-left-color:var(--bad); background:color-mix(in srgb, var(--bad) 7%, var(--surface-2)); }
.pg-evi-h { margin:0 0 6px; font-size:.63rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); display:flex; gap:6px; align-items:flex-start; }
.pg-evi-h i { color:var(--accent); margin-top:.15rem; }
.pg-evi.hot .pg-evi-h i { color:var(--bad); }
.pg-evi-b { margin:0; font-family:var(--mono); font-size:.7rem; line-height:1.65; color:var(--text-2); white-space:pre-wrap; word-break:break-word; }

/* ── what-if dial ── */
.pg-dial { display:flex; flex-direction:column; gap:7px; }
.pg-wif {
  display:flex; gap:9px; align-items:flex-start; width:100%; text-align:left; cursor:pointer;
  padding:9px 10px; border-radius:9px; border:1px solid var(--border); background:var(--surface-2);
  color:var(--text-2); font-size:.75rem; line-height:1.45;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
.pg-wif:hover { border-color:var(--border-strong); color:var(--text); }
.pg-wif.on { border-color:var(--accent-ring); background:var(--accent-soft); color:var(--text); }
.pg-knob { flex:none; width:14px; height:14px; border-radius:50%; border:1px solid var(--border-strong); margin-top:2px; position:relative; }
.pg-wif.on .pg-knob { border-color:var(--accent); }
.pg-wif.on .pg-knob::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--accent); }
.pg-k { display:block; margin-bottom:2px; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.pg-verdict { margin-top:9px; padding:10px 11px; border-radius:9px; border:1px solid var(--border); background:var(--surface-2); }
.pg-verdict.bad { border-color:color-mix(in srgb, var(--bad) 35%, transparent); background:color-mix(in srgb, var(--bad) 8%, var(--surface-2)); }
.pg-verdict.good { border-color:color-mix(in srgb, var(--ok) 35%, transparent); background:color-mix(in srgb, var(--ok) 8%, var(--surface-2)); }
.pg-v-h { margin:0 0 5px; font-size:.8rem; font-weight:600; display:flex; gap:8px; align-items:flex-start; }
.pg-verdict.bad .pg-v-h i { color:var(--bad); } .pg-verdict.good .pg-v-h i { color:var(--ok); }
.pg-v-b { margin:0; font-size:.75rem; line-height:1.6; color:var(--text-2); }
.pg-v-a {
  margin:9px 0 0; padding-top:8px; border-top:1px dashed var(--border);
  display:flex; gap:8px; flex-wrap:wrap; align-items:baseline;
  font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3);
}
.pg-v-a b { font-size:.78rem; letter-spacing:0; text-transform:none; font-weight:600; color:var(--accent); }

/* ── reasoning rail ── */
.pg-rail { display:flex; flex-direction:column; gap:7px; }
.pg-slot {
  display:flex; gap:10px; align-items:flex-start; width:100%; min-height:44px; text-align:left; cursor:pointer;
  padding:9px 11px; border-radius:9px; border:1px dashed var(--border-strong);
  background:transparent; color:var(--text-3); font-size:.78rem; line-height:1.5;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
.pg-slot:hover { border-color:var(--accent-ring); }
.pg-slot.filled { border-style:solid; border-color:var(--accent-ring); background:var(--accent-soft); color:var(--text); }
.pg-slot.ok { border-color:var(--ok) !important; background:color-mix(in srgb, var(--ok) 12%, transparent) !important; }
.pg-slot.no { border-color:var(--bad) !important; background:color-mix(in srgb, var(--bad) 12%, transparent) !important; }
.pg-n {
  flex:none; width:20px; height:20px; border-radius:6px; display:grid; place-items:center;
  font-family:var(--mono); font-size:.63rem; border:1px solid var(--border-strong); color:var(--text-3);
}
.pg-slot.filled .pg-n { border-color:var(--accent-ring); color:var(--accent); }
.pg-slot.no .pg-n { border-color:var(--bad); color:var(--bad); }
.pg-slot-t { flex:1; min-width:0; }
.pg-fix { display:block; margin-top:4px; font-size:.68rem; color:var(--bad); }
.pg-pool { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.pg-railcard {
  max-width:100%; text-align:left; cursor:pointer; padding:8px 10px; border-radius:9px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text-2);
  font-size:.74rem; line-height:1.45; transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
.pg-railcard:hover { color:var(--text); border-color:var(--border-strong); transform:translateY(-1px); }
.pg-railcard.used { opacity:.3; pointer-events:none; }
.pg-railcard-k { display:block; margin-bottom:3px; font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.pg-tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:11px; }
.pg-score { margin-left:auto; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.pg-score b { font-size:.8rem; color:var(--text); }

/* ── header legend: what the rows mean, said once ── */
.pg-legend {
  margin-left:auto; display:inline-flex; gap:10px; flex-wrap:wrap;
  font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3);
}
.pg-lg { display:inline-flex; align-items:center; gap:4px; }
.pg-lg i { color:var(--accent); font-size:8.5px; }

/* ── a path has no return leg: one rung between stations ── */
.pg-step { display:flex; align-items:center; gap:8px; min-height:26px; padding-left:20px; }
.pg-step-rule {
  width:2px; height:26px; border-radius:2px;
  background:repeating-linear-gradient(180deg, var(--border-strong) 0 5px, transparent 5px 10px);
}
.pg-step.dead .pg-step-rule { background:var(--bad); }
.pg-step-lbl {
  font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; line-height:1.4; color:var(--bad);
  background:var(--bad-soft); border:1px solid color-mix(in srgb, var(--bad) 40%, transparent);
  padding:1px 7px; border-radius:999px; max-width:calc(100% - 40px);
}
.pg-step.tracing .pg-step-rule, .pg-step.traced .pg-step-rule { background:var(--accent); }

/* ── your call, against the evidence ── */
.pg-call {
  margin:11px 0 0; display:flex; gap:8px; align-items:flex-start;
  font-size:.75rem; line-height:1.55; color:var(--text-2);
  border-left:2px solid var(--border-strong); background:var(--surface-2);
  border-radius:0 9px 9px 0; padding:9px 11px;
}
.pg-call i { margin-top:.15rem; color:var(--accent); }
.pg-call b { color:var(--text); font-weight:600; }
.pg-call.ok { border-left-color:var(--ok); }
.pg-call.ok i { color:var(--ok); }
.pg-call.no { border-left-color:var(--bad); }
.pg-call.no i { color:var(--bad); }
.pg-eff {
  margin:5px 0 0; display:flex; gap:7px; align-items:center;
  font-size:.66rem; letter-spacing:.05em; color:var(--text-3);
}
.pg-eff i { color:var(--accent); font-size:.6rem; }

/* ── the verdict tag on a piece of evidence ── */
.pg-evi-tag {
  margin-left:auto; flex:none; font-size:.55rem; letter-spacing:.1em; text-transform:uppercase;
  padding:1px 6px; border-radius:999px; border:1px solid var(--border-strong); color:var(--text-3);
}
.pg-evi-tag.hot { color:var(--bad); border-color:color-mix(in srgb, var(--bad) 40%, transparent); background:var(--bad-soft); }
.pg-proved {
  display:inline-flex; align-items:center; gap:5px; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ok); border:1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  background:color-mix(in srgb, var(--ok) 12%, transparent); padding:1px 7px; border-radius:999px;
}

/* ── replay: walk the scene in order ── */
.pg-hop.tracing { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-ring), 0 0 20px -8px var(--accent); }
.pg-hop.traced { border-color:var(--accent-ring); }
.pg-leg.tracing .pg-lane.live { background:repeating-linear-gradient(180deg, var(--accent) 0 5px, transparent 5px 10px); }
.pg-leg.traced .pg-lane.live { opacity:.85; }

/* ── FAST LANES: why-in-place, glossary, concepts, twins, rapid pass ── */
/* the fatal flaw, printed where the wrong option lives */
.why-here {
  display:flex; gap:6px; align-items:flex-start; margin-top:7px; padding-top:7px;
  border-top:1px dashed color-mix(in srgb, var(--bad) 30%, transparent);
  font-size:.7rem; line-height:1.55; color:var(--text-2); text-align:left;
}
.why-here i { margin-top:.2rem; color:var(--bad); font-size:.62rem; }

/* hover a term, learn the term */
.term { border-bottom:1px dotted var(--accent); cursor:help; position:relative; }
.term:hover, .term:focus { color:var(--text); }
.term::after {
  content:attr(data-tip); position:absolute; left:0; top:calc(100% + 7px); z-index:70;
  width:240px; white-space:normal; display:none;
  background:var(--surface); color:var(--text-2);
  border:1px solid var(--border-strong); border-radius:9px; padding:8px 10px;
  font-size:.68rem; line-height:1.55; font-weight:400; text-transform:none; letter-spacing:0;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.term:hover::after, .term:focus::after { display:block; }

/* command anatomy: a token with a job */
.tok { border-bottom:1px dotted var(--accent); cursor:help; }

/* concept chips + twins under the explanation */
.key-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:14px; }
.key-chips .micro { margin-right:2px; }
.key-chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.68rem; color:var(--text-2); cursor:pointer;
  border:1px solid var(--border); border-radius:999px; padding:3px 10px;
  background:var(--surface-2); transition:border-color .15s ease, color .15s ease;
}
.key-chip b { color:var(--accent); font-weight:600; }
.key-chip:hover { border-color:var(--accent); color:var(--text); }
.key-chip.twin { border-style:dashed; max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; }
.key-chip.twin i { color:var(--info); font-size:.6rem; }

/* the concept / compare modal body */
.concept-q {
  display:flex; flex-direction:column; gap:3px; width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--border); border-radius:10px; background:var(--surface-2);
  padding:10px 12px; margin-bottom:8px; transition:border-color .15s ease;
}
.concept-q:hover { border-color:var(--accent); }
.concept-q-ex { font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.concept-q-t { font-size:.76rem; line-height:1.5; color:var(--text-2); }
.compare-grid { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:760px) { .compare-grid { grid-template-columns:1fr 1fr; } }
.compare-col { border:1px solid var(--border); border-radius:10px; padding:12px; background:var(--surface-2); display:flex; flex-direction:column; gap:9px; }
.compare-t { margin:0; font-size:.78rem; line-height:1.55; color:var(--text); font-weight:600; }
.compare-a { margin:0; font-size:.75rem; line-height:1.5; color:var(--ok); }
.compare-a span { display:block; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-bottom:2px; }
.compare-a b, .compare-e b { color:var(--text); }
.compare-e { margin:0; font-size:.72rem; line-height:1.6; color:var(--text-2); }

/* rapid pass output */
.rapid-out { display:flex; flex-direction:column; gap:10px; }
.rapid-ans { border:1px solid color-mix(in srgb, var(--ok) 35%, transparent); border-left:2px solid var(--ok); border-radius:10px; background:color-mix(in srgb, var(--ok) 7%, var(--surface)); padding:11px 13px; }
.rapid-ans p:last-child { margin:0; color:var(--text); }
.rapid-why { margin:0; font-size:.8rem; line-height:1.6; color:var(--text-2); }
.rapid-trap { margin:0; font-size:.72rem; line-height:1.55; color:var(--warn); display:flex; gap:7px; align-items:flex-start; }
.rapid-trap i { margin-top:.2rem; font-size:.62rem; }

/* ── ARTIFACTS: pinning, spot-the-change, help links ── */
.artifact-tools { display:inline-flex; gap:6px; align-items:center; margin-left:auto; }
.artifact-note { font-size:.65rem; color:var(--text-3); }
.artifact-btn {
  display:inline-flex; gap:5px; align-items:center;
  font-size:.62rem; font-weight:600; color:var(--text-3); cursor:pointer;
  border:1px solid var(--border); border-radius:999px; padding:3px 9px; background:var(--surface);
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.artifact-btn:hover { color:var(--text); border-color:var(--accent); }
.artifact-btn.on { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:var(--accent-soft); }
.artifact-btn.on:hover { color:var(--accent); }
.artifact-pre.flat { color:var(--text-2); }
.pin-line { display:inline; border-radius:3px; cursor:pointer; transition:background .12s ease; }
.pin-line:hover { background:var(--surface-3); }
.pin-line.pinned { background:var(--accent-soft); box-shadow:inset 2px 0 0 var(--accent); padding-left:2px; }

/* in-question help affordances */
.pg-help {
  display:inline-flex; gap:5px; align-items:center; margin-left:auto;
  font-size:.62rem; font-weight:600; letter-spacing:.04em; color:var(--text-3);
  background:none; border:none; cursor:pointer; padding:2px 4px;
  transition:color .15s ease;
}
.pg-help:hover { color:var(--accent); }
.help-kbd {
  display:inline-block; min-width:1.5rem; text-align:center;
  font-size:.62rem; font-weight:600; color:var(--text-2);
  background:var(--surface-3); border:1px solid var(--border); border-bottom-width:2px;
  border-radius:5px; padding:1px 5px;
}

/* ── PROVE VARIANTS: map view, the story walk, the audit ── */
.pg-viewbtn {
  display:inline-flex; gap:5px; align-items:center; margin-left:auto;
  font-size:.62rem; font-weight:600; color:var(--text-3); cursor:pointer;
  border:1px solid var(--border); border-radius:999px; padding:3px 10px; background:var(--surface);
  transition:color .15s ease, border-color .15s ease;
}
.pg-viewbtn:hover { color:var(--text); border-color:var(--accent); }
.pg-map { position:relative; max-width:400px; margin:10px auto 6px; }
.pg-map-rails { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.pg-rail { fill:none; stroke:var(--border-strong); stroke-width:2; stroke-linecap:round; }
.pg-rail.dead { stroke:var(--bad); stroke-dasharray:5 4; }
.pg-link-seg { fill:none; stroke:var(--border-strong); stroke-width:2; stroke-linecap:round; transition:stroke .3s ease, opacity .3s ease; }
.pg-link-seg.dead { stroke:var(--bad); stroke-dasharray:5 4; }
.pg-spk { fill:none; stroke:var(--border-strong); stroke-width:1.4; transition:stroke .3s ease; }
.pg-spk.dead { stroke:var(--bad); stroke-dasharray:4 3; }
.pg-head-arw { fill:var(--border-strong); }
.pg-map-link.tracing .pg-link-seg, .pg-map-link.tracing .pg-spk { stroke:var(--accent); }
.pg-map-link.traced .pg-link-seg { stroke:var(--accent); opacity:.75; }
.pg-map-link.traced .pg-spk { stroke:var(--accent); opacity:.75; }
.pg-map-link.dead .pg-link-seg, .pg-map-link.dead .pg-spk { stroke:var(--bad); }
.pg-map-link.burst { animation:pgLinkGlow .85s ease; }
@keyframes pgLinkGlow { 0% { filter:none; } 35% { filter:drop-shadow(0 0 4px var(--accent)); } 100% { filter:none; } }
.pg-railtext { fill:var(--text-3); font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.pg-dead-x { fill:var(--bad); font-size:10px; font-weight:700; }
.pg-dead-lbl { fill:var(--bad); font-size:8.5px; font-weight:600; }
.pg-mnode {
  position:absolute; left:50%; transform:translate(-50%,-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:var(--surface); border:1.5px solid var(--border-strong); border-radius:12px;
  padding:7px 11px 6px; min-width:92px; max-width:150px; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pg-mnode:hover { border-color:var(--accent); }
.pg-mnode.probed { border-color:var(--accent); background:var(--accent-soft); }
.pg-mnode.fault { border-color:var(--bad); background:var(--bad-soft); }
.pg-mnode.hit { box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 30%, transparent); }
.pg-mnode.miss { box-shadow:0 0 0 3px color-mix(in srgb, var(--warn) 30%, transparent); }
.pg-mnode.picking { animation:pgMnodePulse .55s ease; }
@keyframes pgMnodePulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow:0 0 0 10px transparent; } }
.pg-midx {
  position:absolute; top:-7px; left:-7px; width:15px; height:15px; border-radius:50%;
  background:var(--surface-3); color:var(--text-3); font-size:9px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--border);
}
.pg-mico { font-size:13px; color:var(--accent); }
.pg-mnode.probed .pg-mico, .pg-mnode.fault .pg-mico { color:var(--text); }
.pg-mnm { font-size:10.5px; font-weight:600; color:var(--text-2); line-height:1.25; max-width:126px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pg-mflag {
  position:absolute; left:50%; margin-left:56px; transform:translate(-50%,-50%); z-index:2;
  width:24px; height:24px; border-radius:50%; cursor:pointer;
  border:1px solid var(--border); background:var(--surface); color:var(--text-3);
  display:flex; align-items:center; justify-content:center;
  transition:color .15s ease, border-color .15s ease;
}
.pg-mflag:disabled { opacity:.35; cursor:default; }
.pg-mflag.on { color:var(--warn); border-color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.pg-mflag.miss { color:var(--bad); border-color:var(--bad); }
.pg-mflag:not(:disabled):hover { border-color:var(--warn); color:var(--warn); }

/* the story bar: captions while the scene walks itself */
.pg-story {
  min-height:34px; margin:4px auto 2px; max-width:560px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px dashed var(--border); border-radius:10px; background:var(--surface-2); padding:7px 12px;
  transition:opacity .3s ease;
}
.pg-story.hidden { display:none; }
.pg-story.done { opacity:.65; }
.pg-story-t { font-size:.72rem; color:var(--text-2); line-height:1.5; }

/* the audit: evidence as a one-click question */
.pg-audit-btn {
  margin-left:auto; display:inline-flex; gap:5px; align-items:center;
  font-size:.62rem; font-weight:600; color:var(--text-3); cursor:pointer;
  border:1px solid var(--border); border-radius:999px; padding:2px 9px; background:var(--surface);
  transition:color .15s ease, border-color .15s ease;
}
.pg-audit-btn:hover { color:var(--accent); border-color:var(--accent); }
.pg-audit-q { margin:0 0 8px; font-size:.78rem; color:var(--text-2); }
.pg-evi.audit { margin-bottom:8px; }
button.pg-evi.audit {
  width:100%; text-align:left; cursor:pointer; border:1px solid var(--border);
  border-radius:10px; background:var(--surface); padding:9px 11px;
  transition:border-color .15s ease;
}
button.pg-evi.audit:hover { border-color:var(--accent); }
.pg-evi.audit.right { border-color:var(--ok); background:color-mix(in srgb, var(--ok) 6%, var(--surface)); }
.pg-evi.audit.miss { border-color:var(--bad); opacity:.8; }
.pg-audit-v { display:flex; gap:7px; align-items:flex-start; font-size:.74rem; line-height:1.55; border-radius:10px; padding:8px 11px; margin:2px 0 8px; }
.pg-audit-v.ok { color:var(--ok); background:color-mix(in srgb, var(--ok) 8%, transparent); }
.pg-audit-v.no { color:var(--bad); background:color-mix(in srgb, var(--bad) 8%, transparent); }
.pg-audit-v i { margin-top:.15rem; }

/* ═══ THE CASE ROOM ═══ */
.case-top { display:flex; align-items:center; gap:12px; }
.case-meters { display:flex; gap:14px; }
.case-meter { display:flex; align-items:center; gap:6px; }
.case-meter-k { font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); font-weight:600; }
.case-meter-bar { width:54px; height:4px; border-radius:2px; background:var(--surface-2); overflow:hidden; border:1px solid var(--border); }
.case-meter-bar i { display:block; height:100%; background:linear-gradient(90deg, var(--warn), var(--bad)); transition:width .3s ease; }
.case-meter-v { font-size:.68rem; font-weight:600; color:var(--text-2); min-width:1.4rem; text-align:right; }
.case-strip { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.case-step { display:inline-flex; align-items:center; gap:5px; font-size:.68rem; font-weight:600; color:var(--text-3);
  border:1px solid var(--border); border-radius:999px; padding:3px 10px; background:var(--surface); }
.case-step.now { color:var(--text); border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.case-step.done { color:var(--text-3); }
.case-step.done.good { color:var(--ok); border-color:color-mix(in srgb, var(--ok) 45%, transparent); }
.case-step.done.no { color:var(--bad); border-color:color-mix(in srgb, var(--bad) 45%, transparent); }
.case-strip-arrow { color:var(--text-3); font-size:.6rem; }
.case-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; }
.case-brief { border-left:3px solid var(--accent); }
.case-hint { font-size:.76rem; color:var(--text-2); margin:0 0 10px; display:flex; gap:7px; align-items:flex-start; }
.case-hint i { color:var(--accent); margin-top:.15rem; }
.case-opts { display:flex; flex-direction:column; gap:9px; }
button.case-opt { cursor:pointer; text-align:left; transition:border-color .15s ease, transform .1s ease; }
button.case-opt:hover { border-color:var(--accent); }
.case-opt { display:flex; align-items:flex-start; gap:11px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; }
.case-opt.dim { opacity:.55; }
.case-opt.best { border-color:var(--ok); background:color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.case-opt.ok { border-color:color-mix(in srgb, var(--ok) 55%, var(--border)); background:color-mix(in srgb, var(--ok) 4%, var(--surface)); }
.case-opt.weak { border-color:var(--warn); background:color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.case-opt.bad { border-color:var(--bad); background:color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.case-opt-k { font-size:.72rem; font-weight:700; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius:7px; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:.1rem; }
.case-opt-t { font-size:.82rem; color:var(--text); line-height:1.5; }
.case-opt-badge { margin-left:auto; flex-shrink:0; font-size:.64rem; font-weight:600; letter-spacing:.04em; color:var(--text-3);
  border:1px dashed var(--border); border-radius:999px; padding:3px 9px; align-self:center; }
.case-why { display:flex; gap:8px; align-items:flex-start; font-size:.8rem; line-height:1.55; color:var(--text-2);
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
.case-why i { color:var(--accent); margin-top:.18rem; }
.case-clash { display:flex; gap:8px; align-items:flex-start; font-size:.8rem; line-height:1.55; color:var(--bad);
  background:color-mix(in srgb, var(--bad) 7%, var(--surface)); border:1px solid color-mix(in srgb, var(--bad) 40%, transparent);
  border-radius:10px; padding:10px 12px; }
.case-clash i { margin-top:.18rem; }
.case-continue { display:flex; align-items:center; gap:10px; justify-content:flex-end; padding-top:4px; }
.case-board { display:flex; flex-direction:column; gap:8px; }
.case-board-head { display:grid; grid-template-columns:minmax(140px,1.1fr) 2.6fr .9fr; gap:8px; font-size:.62rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); font-weight:600; padding:0 2px; }
.case-board-row { display:grid; grid-template-columns:minmax(140px,1.1fr) 2.6fr .9fr; gap:8px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:10px 12px; }
.case-board-row.row-ok { border-color:var(--ok); }
.case-board-row.row-no { border-color:var(--bad); }
.case-board-name { font-size:.8rem; font-weight:600; color:var(--text); display:flex; flex-direction:column; gap:4px; }
.case-dep { font-size:.62rem; font-weight:500; color:var(--text-3); display:inline-flex; gap:5px; align-items:center; }
.case-dep i { font-size:.55rem; }
.case-board-strats { display:flex; flex-wrap:wrap; gap:5px; }
.case-board-waves { display:flex; gap:5px; justify-content:flex-end; }
.case-chip { font-size:.64rem; font-weight:600; color:var(--text-2); background:var(--surface-2); border:1px solid var(--border);
  border-radius:999px; padding:4px 9px; cursor:pointer; transition:all .12s ease; }
.case-chip:hover { border-color:var(--accent); color:var(--text); }
.case-chip.on { color:var(--text); border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.case-chip.wave { width:28px; padding:4px 0; text-align:center; }
.case-board-lock { font-size:.72rem; font-weight:600; color:var(--text-2); }
.case-board-lock .fa-check { color:var(--ok); }
.case-board-lock .fa-xmark { color:var(--bad); }
.case-board-why { grid-column:1 / -1; font-size:.72rem; line-height:1.5; color:var(--text-2); display:flex; gap:7px;
  background:var(--surface-2); border-radius:8px; padding:7px 10px; margin-top:2px; }
.case-board-why i { color:var(--accent); margin-top:.15rem; }
.case-board-verdict { font-size:.78rem; color:var(--text-2); display:flex; gap:8px; align-items:center; }
.case-debrief-head { display:flex; flex-direction:column; gap:8px; }
.case-score { display:flex; align-items:baseline; gap:10px; }
.case-score-n { font-size:1.9rem; font-weight:700; color:var(--accent); }
.case-final-meters { display:flex; gap:10px; flex-wrap:wrap; }
.case-final-meters span { font-size:.7rem; font-weight:600; color:var(--text-2); border:1px solid var(--border);
  border-radius:999px; padding:4px 11px; background:var(--surface-2); }
.case-drow { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 15px; }
.case-drow-h { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.case-drow-h b { font-size:.82rem; color:var(--text); }
.case-drow-q { font-size:.68rem; font-weight:700; border-radius:999px; padding:2px 9px; }
.case-drow-q.best { color:var(--ok); background:color-mix(in srgb, var(--ok) 10%, transparent); }
.case-drow-q.ok { color:var(--ok); background:color-mix(in srgb, var(--ok) 6%, transparent); }
.case-drow-q.weak { color:var(--warn); background:color-mix(in srgb, var(--warn) 10%, transparent); }
.case-drow-q.bad { color:var(--bad); background:color-mix(in srgb, var(--bad) 10%, transparent); }
.case-drow-line { font-size:.78rem; color:var(--text-2); display:flex; gap:9px; align-items:baseline; margin-top:4px; }
.case-drow-k { font-size:.6rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); font-weight:700;
  flex-shrink:0; width:70px; text-align:right; }
.case-ref-list { margin:2px 0 0; padding:0; list-style:none; font-size:.74rem; color:var(--text-2); }
.case-ref-list li { padding:1px 0; }
.case-ref-list li::before { content:'→ '; color:var(--accent); }
.case-ref-note { display:flex; gap:9px; align-items:flex-start; font-size:.8rem; line-height:1.55; color:var(--text-2);
  border-left:3px solid var(--accent); background:var(--surface); border-radius:0 12px 12px 0; padding:11px 14px; }
.case-ref-note i { color:var(--accent); margin-top:.2rem; }
.case-debrief-actions { justify-content:flex-start; padding-top:8px; }
.case-art .artifact-pre { max-height:300px; }
.case-row { display:block; width:100%; text-align:left; cursor:pointer; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; padding:12px 15px; transition:border-color .15s ease; }
.case-row:hover { border-color:var(--accent); }
.case-row-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.case-row-head b { font-size:.85rem; color:var(--text); }
.case-row-score { font-size:.66rem; font-weight:600; color:var(--accent); white-space:nowrap; }
.case-row-sub { display:block; font-size:.7rem; color:var(--text-3); margin-top:3px; }

/* ═══════════════════════════════════════════════════════════════
   Architect Workbench — a buildable architecture, not a quiz.
   Read top to bottom: bar, stage rail, diagram + inspector, then the
   decision, fault, trace and assessment cards. Every colour is a
   theme token, so Dim/Paper/Slate/Dark and the accent all apply.
   ═══════════════════════════════════════════════════════════════ */

/* ── top bar: identity, relative indicators, running score ── */
.sim-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:11px 14px; }
.sim-top > div:first-of-type { min-width:180px; }
.sim-ind { display:flex; gap:7px; flex-wrap:wrap; margin-left:auto; }
.sim-chip { display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:600; color:var(--text-2);
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:4px 10px; }
.sim-chip i { color:var(--accent); font-size:.65rem; }
.sim-chip b { color:var(--text); font-variant-numeric:tabular-nums; }
.sim-scorebox { display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; }
.sim-scorebox b { font-size:1.05rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.sim-scorebox span { font-size:.62rem; color:var(--text-3); font-variant-numeric:tabular-nums; }
.sim-banner { display:flex; gap:8px; align-items:flex-start; font-size:.72rem; line-height:1.5; color:var(--text-2);
  background:color-mix(in srgb, var(--accent) 7%, var(--surface)); border:1px solid var(--border);
  border-left:3px solid var(--accent); border-radius:0 12px 12px 0; padding:9px 13px; margin:0; }
.sim-banner i { color:var(--accent); margin-top:.15rem; }

/* ── stage rail ── */
.sim-rail { display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:10px 13px; }
.sim-rail-cap { font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--text-3); margin-right:2px; }
button.sim-stage { display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-family:inherit;
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:4px 12px 4px 5px;
  color:var(--text-3); transition:border-color .15s ease, color .15s ease; }
button.sim-stage:disabled { cursor:default; opacity:.55; }
button.sim-stage:disabled:hover { border-color:var(--border); }
button.sim-stage:hover { border-color:var(--border-strong); }
button.sim-stage .sim-stage-n { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
  border-radius:50%; font-size:.66rem; font-weight:700; background:var(--surface-3); color:var(--text-2); }
button.sim-stage .sim-stage-t { font-size:.72rem; font-weight:600; }
button.sim-stage.now { border-color:var(--accent); color:var(--text); background:color-mix(in srgb, var(--accent) 12%, var(--surface)); }
button.sim-stage.now .sim-stage-n { background:var(--accent); color:var(--on-accent); }
button.sim-stage.past { color:var(--text-2); border-color:var(--border-strong); }
button.sim-stage.done .sim-stage-n { background:color-mix(in srgb, var(--ok) 20%, var(--surface-2)); color:color-mix(in srgb, var(--ok) 58%, var(--text)); }
button.sim-stage.done { color:var(--text-2); }
.sim-rail-arrow { color:var(--text-3); font-size:.6rem; }
.sim-rail-goal { flex:1 1 100%; font-size:.72rem; line-height:1.5; color:var(--text-2); border-top:1px dashed var(--border); padding-top:7px; margin-top:2px; }

/* ── layout: diagram beside the working column ── */
.sim-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:12px; align-items:start; }
.sim-main, .sim-side { display:flex; flex-direction:column; gap:12px; min-width:0; }
.sim-side { max-height:none; }

/* ── the diagram canvas ── */
.sim-canvas-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); overflow:hidden; }
.sim-canvas-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:6px 10px;
  border-bottom:1px solid var(--border); background:var(--surface); }
.sim-canvas-cap { display:inline-flex; align-items:center; gap:6px; font-size:.6rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.sim-canvas-cap i { color:var(--accent); }
.sim-canvas-hint { font-size:.68rem; color:var(--text-3); }
.sim-canvas-tools { margin-left:auto; display:inline-flex; align-items:center; gap:8px; }
.sim-canvas { position:relative; overflow:auto; padding:8px 8px 2px;
  background-image:radial-gradient(var(--border) 1px, transparent 1px); background-size:22px 22px; }
.sim-svg { display:block; width:100%; height:auto; min-width:100%; }
.sim-svg.zoomed { cursor:grab; }
.sim-zoom { display:inline-flex; align-items:center; gap:1px; border:1px solid var(--border); border-radius:9px;
  padding:2px; background:var(--surface-2); }
.sim-zoom .icon-btn { width:24px; height:24px; }
.sim-zoom-pct { min-width:38px; text-align:center; font-size:.62rem; font-weight:600; color:var(--text-3);
  font-variant-numeric:tabular-nums; }
.sim-list-toggle { position:static; cursor:pointer; font-family:inherit;
  font-size:.68rem; font-weight:600; color:var(--text-2); background:var(--surface-2);
  border:1px solid var(--border); border-radius:999px; padding:5px 11px; transition:border-color .15s ease, color .15s ease; }
.sim-list-toggle:hover { border-color:var(--accent); color:var(--text); }

/* ── trust-boundary spotlight and the icon legend ── */
.sim-viewbar { display:flex; align-items:center; gap:6px; padding:5px 10px; border-bottom:1px solid var(--border);
  background:var(--surface); }
.sim-spot-scroll { display:flex; align-items:center; gap:5px; min-width:0; flex:1 1 auto;
  overflow-x:auto; scrollbar-width:thin; }
.sim-spot-cap { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; margin-right:2px;
  font-size:.6rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); }
.sim-spot-cap i { color:var(--accent); }
button.sim-spot { flex:0 0 auto; cursor:pointer; font-family:inherit; font-size:.64rem; font-weight:600;
  color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); border-radius:999px;
  padding:3px 9px; transition:border-color .15s ease, color .15s ease, background .15s ease; }
button.sim-spot:hover { border-color:var(--accent); color:var(--text); }
button.sim-spot.on { color:var(--text); border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 13%, var(--surface-2)); }
.sim-legend-toggle { flex:0 0 auto; margin-left:auto; cursor:pointer; font-family:inherit; font-size:.66rem;
  font-weight:600; color:var(--text-2); background:var(--surface-2); border:1px solid var(--border);
  border-radius:999px; padding:4px 9px; display:inline-flex; align-items:center; gap:6px;
  transition:border-color .15s ease, color .15s ease, background .15s ease; }
.sim-legend-toggle:hover { border-color:var(--accent); color:var(--text); }
.sim-legend-toggle[aria-expanded="true"] { color:var(--text); border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 13%, var(--surface-2)); }
.sim-legend-toggle > i { color:var(--accent); }
.sim-legend-toggle .sim-legend-caret { color:currentColor; font-size:.55rem; transition:transform .15s ease; }
.sim-legend-toggle[aria-expanded="true"] .sim-legend-caret { transform:rotate(180deg); }
.sim-legend { border-bottom:1px solid var(--border); background:var(--surface); }
.sim-legend[hidden] { display:none; }
.sim-legend-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:6px 10px;
  padding:7px 10px 10px; }
.sim-legend-item { display:flex; align-items:center; gap:7px; min-width:0; font-size:.7rem; color:var(--text-2); }
.sim-legend .sim-legend-ic { flex:0 0 22px; width:22px; height:22px; padding:0; border-radius:6px; display:grid; place-items:center; }
.sim-legend .sim-legend-ic svg { width:16px; height:16px; display:block; }
.sim-legend .sim-legend-ic .sim-ic-ink { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sim-canvas-wrap.list-only .sim-svg, .sim-canvas-wrap.list-only .sim-zoom { display:none; }
.sim-planlist { display:flex; flex-direction:column; gap:7px; padding:10px; }
.sim-planrow { display:flex; flex-direction:column; gap:3px; text-align:left; cursor:pointer; font-family:inherit;
  background:var(--surface-2); border:1px solid var(--border); border-left-width:3px; border-radius:11px; padding:9px 12px; }
.sim-planrow:hover { border-color:var(--accent); }
.sim-planrow-h { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.sim-planrow-h b { font-size:.8rem; color:var(--text); }
.sim-planrow-sub { font-size:.66rem; color:var(--text-3); }
.sim-planrow-p { font-size:.74rem; line-height:1.5; color:var(--text-2); }
.sim-planrow.st-faulted { border-left-color:var(--bad); background:color-mix(in srgb, var(--bad) 6%, var(--surface-2)); }
.sim-planrow.st-repaired { border-left-color:var(--ok); }
.sim-planrow.st-degraded { border-left-color:var(--warn); background:color-mix(in srgb, var(--warn) 6%, var(--surface-2)); }
.sim-planrow.st-built { border-left-color:var(--accent); }

/* ── the SVG itself: boundaries, arrows, boxes ── */
.sim-svg .sim-bnd rect { fill:color-mix(in srgb, var(--accent) 4%, transparent); stroke:var(--border-strong);
  stroke-width:1.25; stroke-dasharray:6 5; }
.sim-svg .sim-bnd-tbg { fill:var(--surface); stroke:var(--border); stroke-width:.8; }
.sim-svg .sim-bnd-t { font-size:11.5px; font-weight:700; letter-spacing:.055em; text-transform:uppercase; fill:var(--text-2); }
.sim-svg .sim-bnd.bnd-sec rect { fill:color-mix(in srgb, var(--info) 6%, transparent); stroke:color-mix(in srgb, var(--info) 35%, var(--border-strong)); }
.sim-svg .sim-bnd.bnd-work rect { fill:color-mix(in srgb, var(--ok) 5%, transparent); stroke:color-mix(in srgb, var(--ok) 28%, var(--border-strong)); }
.sim-svg .sim-bnd.bnd-net rect, .sim-svg .sim-bnd.bnd-hub rect { fill:color-mix(in srgb, var(--cat-1) 6%, transparent); stroke:color-mix(in srgb, var(--cat-1) 35%, var(--border-strong)); }
.sim-svg .sim-bnd.bnd-ext rect { fill:color-mix(in srgb, var(--cat-5) 6%, transparent); stroke:color-mix(in srgb, var(--cat-5) 38%, var(--border-strong)); }
.sim-svg .sim-bnd.bnd-trust rect { fill:color-mix(in srgb, var(--warn) 6%, transparent); stroke:color-mix(in srgb, var(--warn) 35%, var(--border-strong)); }
.sim-svg .sim-bnd.bnd-data rect { fill:color-mix(in srgb, var(--cat-6) 6%, transparent); stroke:color-mix(in srgb, var(--cat-6) 32%, var(--border-strong)); }
.sim-svg .sim-bnd.bnd-ai rect { fill:color-mix(in srgb, var(--cat-2) 7%, transparent); stroke:color-mix(in srgb, var(--cat-2) 35%, var(--border-strong)); }
.sim-svg .sim-bnd-tg .sim-bnd-ic { fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; color:var(--text-2); }
.sim-svg .sim-bnd-tg.bnd-org .sim-bnd-ic { color:var(--accent); }
.sim-svg .sim-bnd-tg.bnd-sec .sim-bnd-ic { color:var(--info); }
.sim-svg .sim-bnd-tg.bnd-work .sim-bnd-ic { color:var(--ok); }
.sim-svg .sim-bnd-tg.bnd-hub .sim-bnd-ic, .sim-svg .sim-bnd-tg.bnd-net .sim-bnd-ic { color:var(--cat-1); }
.sim-svg .sim-bnd-tg.bnd-ext .sim-bnd-ic { color:var(--cat-5); }
.sim-svg .sim-bnd-tg.bnd-trust .sim-bnd-ic { color:var(--warn); }
.sim-svg .sim-bnd-tg.bnd-data .sim-bnd-ic { color:var(--cat-6); }
.sim-svg .sim-bnd-tg.bnd-ai .sim-bnd-ic { color:var(--cat-2); }

.sim-svg .sim-edge { color:var(--text-2); cursor:pointer; }
.sim-svg .sim-edge > path.sim-edge-line { fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
.sim-svg .sim-edge-hit { stroke:transparent; stroke-width:18; fill:none; }
.sim-svg .sim-edge-lead { stroke:var(--text-2); stroke-width:1.2; stroke-dasharray:3 2; opacity:.85; pointer-events:none; }
.sim-svg .sim-edge-dot { fill:var(--text-2); opacity:.85; pointer-events:none; }
.sim-svg .sim-edge-cap { pointer-events:none; }
.sim-svg .sim-edge-bg { fill:var(--surface); stroke:var(--border); stroke-width:.7; }
.sim-svg .sim-edge-t { font-size:10.5px; fill:var(--text-2); text-anchor:middle; pointer-events:none; }
.sim-svg .sim-edge.kind-control { color:var(--text-2); }
.sim-svg .sim-edge.kind-identity { color:var(--cat-2); }
.sim-svg .sim-edge.kind-audit { color:var(--cat-3); }
.sim-svg .sim-edge.kind-security { color:var(--info); }
.sim-svg .sim-edge.kind-guardrail { color:var(--warn); }
.sim-svg .sim-edge.kind-dns { color:var(--cat-6); }
.sim-svg .sim-edge.kind-data { color:var(--cat-1); }
.sim-svg .sim-edge.on > path.sim-edge-line { stroke-width:3; }
.sim-svg .sim-edge-t.on { fill:var(--text); font-weight:700; }
.sim-svg .sim-edge:focus-visible { outline:none; }
.sim-svg .sim-edge:focus-visible > path.sim-edge-line { stroke-width:3.4; stroke-dasharray:6 3; }

.sim-svg .sim-node { cursor:pointer; color:var(--text-2); --ic:color-mix(in srgb, var(--text-2) 80%, var(--text)); }
.sim-svg .sim-node .sim-node-box { fill:var(--surface-2); stroke:var(--border-strong); stroke-width:1.4;
  filter:drop-shadow(0 1px 1.2px rgba(0,0,0,.14)); }
.sim-svg .sim-node-t { font-size:12.5px; font-weight:600; fill:var(--text); }
.sim-svg .sim-node-s { font-size:10px; fill:var(--text-2); }
.sim-svg .sim-node-dot { fill:var(--accent); }
.sim-svg .sim-ic-bg { fill:color-mix(in srgb, var(--ic) 11%, var(--surface)); stroke:color-mix(in srgb, var(--ic) 45%, var(--border-strong)); stroke-width:1; }
.sim-svg .sim-ic-ink { color:var(--ic); fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sim-svg .sim-node:hover .sim-node-box { stroke:var(--accent); }
.sim-svg .sim-node.on .sim-node-box { stroke:var(--accent); stroke-width:2.4; }
.sim-svg .sim-node:focus-visible { outline:none; }
.sim-svg .sim-node:focus-visible .sim-node-box { stroke:var(--accent); stroke-width:2.8; }
.sim-svg .sim-node.st-faulted .sim-node-box { fill:color-mix(in srgb, var(--bad) 12%, var(--surface-2)); stroke:var(--bad); }
.sim-svg .sim-node.st-faulted .sim-node-dot { fill:var(--bad); }
.sim-svg .sim-node.st-faulted .sim-ic-bg { stroke:var(--bad); }
.sim-svg .sim-node.st-repaired .sim-node-box { fill:color-mix(in srgb, var(--ok) 10%, var(--surface-2)); stroke:color-mix(in srgb, var(--ok) 65%, var(--border-strong)); }
.sim-svg .sim-node.st-repaired .sim-node-dot { fill:var(--ok); }
.sim-svg .sim-node.st-repaired .sim-ic-bg { stroke:var(--ok); }
.sim-svg .sim-node.st-degraded .sim-node-box { fill:color-mix(in srgb, var(--warn) 12%, var(--surface-2)); stroke:var(--warn); }
.sim-svg .sim-node.st-degraded .sim-node-dot { fill:var(--warn); }
.sim-svg .sim-node.st-degraded .sim-ic-bg { stroke:var(--warn); }
.sim-svg .sim-node.kind-account, .sim-svg .sim-node.kind-ou, .sim-svg .sim-node.kind-org,
.sim-svg .sim-node.kind-mg, .sim-svg .sim-node.kind-sub, .sim-svg .sim-node.kind-control,
.sim-svg .sim-node.kind-tenant, .sim-svg .sim-node.kind-subscription,
.sim-svg .sim-node.kind-management-group { --ic:color-mix(in srgb, var(--accent) 78%, var(--text)); }
.sim-svg .sim-node.kind-account .sim-node-box, .sim-svg .sim-node.kind-ou .sim-node-box, .sim-svg .sim-node.kind-org .sim-node-box,
.sim-svg .sim-node.kind-mg .sim-node-box, .sim-svg .sim-node.kind-sub .sim-node-box, .sim-svg .sim-node.kind-control .sim-node-box,
.sim-svg .sim-node.kind-tenant .sim-node-box, .sim-svg .sim-node.kind-subscription .sim-node-box,
.sim-svg .sim-node.kind-management-group .sim-node-box { fill:color-mix(in srgb, var(--accent) 12%, var(--surface-2)); stroke:color-mix(in srgb, var(--accent) 42%, var(--border-strong)); }
.sim-svg .sim-node.kind-identity, .sim-svg .sim-node.kind-rbac, .sim-svg .sim-node.kind-user,
.sim-svg .sim-node.kind-approval { --ic:color-mix(in srgb, var(--cat-2) 78%, var(--text)); }
.sim-svg .sim-node.kind-identity .sim-node-box, .sim-svg .sim-node.kind-rbac .sim-node-box, .sim-svg .sim-node.kind-user .sim-node-box,
.sim-svg .sim-node.kind-approval .sim-node-box { fill:color-mix(in srgb, var(--cat-2) 14%, var(--surface-2)); stroke:color-mix(in srgb, var(--cat-2) 45%, var(--border-strong)); }
.sim-svg .sim-node.kind-guardrail, .sim-svg .sim-node.kind-policy { --ic:color-mix(in srgb, var(--warn) 62%, var(--text)); }
.sim-svg .sim-node.kind-guardrail .sim-node-box, .sim-svg .sim-node.kind-policy .sim-node-box { fill:color-mix(in srgb, var(--warn) 12%, var(--surface-2)); stroke:color-mix(in srgb, var(--warn) 40%, var(--border-strong)); }
.sim-svg .sim-node.kind-audit, .sim-svg .sim-node.kind-log, .sim-svg .sim-node.kind-telemetry { --ic:color-mix(in srgb, var(--cat-3) 62%, var(--text)); }
.sim-svg .sim-node.kind-audit .sim-node-box, .sim-svg .sim-node.kind-log .sim-node-box, .sim-svg .sim-node.kind-telemetry .sim-node-box { fill:color-mix(in srgb, var(--cat-3) 13%, var(--surface-2)); stroke:color-mix(in srgb, var(--cat-3) 42%, var(--border-strong)); }
.sim-svg .sim-node.kind-security, .sim-svg .sim-node.kind-detection { --ic:color-mix(in srgb, var(--info) 74%, var(--text)); }
.sim-svg .sim-node.kind-security .sim-node-box, .sim-svg .sim-node.kind-detection .sim-node-box { fill:color-mix(in srgb, var(--info) 12%, var(--surface-2)); stroke:color-mix(in srgb, var(--info) 42%, var(--border-strong)); }
.sim-svg .sim-node.kind-storage, .sim-svg .sim-node.kind-data { --ic:color-mix(in srgb, var(--cat-6) 72%, var(--text)); }
.sim-svg .sim-node.kind-storage .sim-node-box, .sim-svg .sim-node.kind-data .sim-node-box { fill:color-mix(in srgb, var(--cat-6) 12%, var(--surface-2)); stroke:color-mix(in srgb, var(--cat-6) 38%, var(--border-strong)); }
.sim-svg .sim-node.kind-network, .sim-svg .sim-node.kind-vpc, .sim-svg .sim-node.kind-subnet,
.sim-svg .sim-node.kind-route, .sim-svg .sim-node.kind-gateway, .sim-svg .sim-node.kind-endpoint,
.sim-svg .sim-node.kind-peering, .sim-svg .sim-node.kind-hub, .sim-svg .sim-node.kind-spoke { --ic:color-mix(in srgb, var(--cat-1) 74%, var(--text)); }
.sim-svg .sim-node.kind-network .sim-node-box, .sim-svg .sim-node.kind-vpc .sim-node-box, .sim-svg .sim-node.kind-subnet .sim-node-box,
.sim-svg .sim-node.kind-route .sim-node-box, .sim-svg .sim-node.kind-gateway .sim-node-box, .sim-svg .sim-node.kind-endpoint .sim-node-box,
.sim-svg .sim-node.kind-peering .sim-node-box, .sim-svg .sim-node.kind-hub .sim-node-box, .sim-svg .sim-node.kind-spoke .sim-node-box { fill:color-mix(in srgb, var(--cat-1) 13%, var(--surface-2)); stroke:color-mix(in srgb, var(--cat-1) 42%, var(--border-strong)); }
.sim-svg .sim-node.kind-firewall, .sim-svg .sim-node.kind-dns { --ic:color-mix(in srgb, var(--cat-4) 70%, var(--text)); }
.sim-svg .sim-node.kind-firewall .sim-node-box, .sim-svg .sim-node.kind-dns .sim-node-box { fill:color-mix(in srgb, var(--cat-4) 12%, var(--surface-2)); stroke:color-mix(in srgb, var(--cat-4) 40%, var(--border-strong)); }
.sim-svg .sim-node.kind-model, .sim-svg .sim-node.kind-index, .sim-svg .sim-node.kind-agent,
.sim-svg .sim-node.kind-tool, .sim-svg .sim-node.kind-retrieve, .sim-svg .sim-node.kind-validate,
.sim-svg .sim-node.kind-compute, .sim-svg .sim-node.kind-runtime { --ic:color-mix(in srgb, var(--cat-4) 70%, var(--text)); }
.sim-svg .sim-node.kind-model .sim-node-box, .sim-svg .sim-node.kind-index .sim-node-box, .sim-svg .sim-node.kind-agent .sim-node-box,
.sim-svg .sim-node.kind-tool .sim-node-box, .sim-svg .sim-node.kind-retrieve .sim-node-box, .sim-svg .sim-node.kind-validate .sim-node-box,
.sim-svg .sim-node.kind-compute .sim-node-box, .sim-svg .sim-node.kind-runtime .sim-node-box { fill:color-mix(in srgb, var(--cat-4) 13%, var(--surface-2)); stroke:color-mix(in srgb, var(--cat-4) 44%, var(--border-strong)); }
.sim-svg .sim-node.kind-external { --ic:color-mix(in srgb, var(--cat-5) 74%, var(--text)); }
.sim-svg .sim-node.kind-external .sim-node-box { fill:color-mix(in srgb, var(--cat-5) 12%, var(--surface-2)); stroke:color-mix(in srgb, var(--cat-5) 40%, var(--border-strong)); }

/* ── spotlight: dim everything outside the chosen boundary ── */
.sim-svg .sim-node, .sim-svg .sim-node-s, .sim-svg .sim-edge, .sim-svg .sim-edge-cap,
.sim-svg .sim-edge-lead, .sim-svg .sim-edge-dot, .sim-svg .sim-bnd, .sim-svg .sim-bnd-tg {
  transition:opacity .18s ease;
}
.sim-svg.spotting .sim-node:not(.spot-hit),
.sim-svg.spotting .sim-node-s:not(.spot-hit),
.sim-svg.spotting .sim-edge:not(.spot-hit),
.sim-svg.spotting .sim-edge-cap:not(.spot-hit),
.sim-svg.spotting .sim-edge-lead:not(.spot-hit),
.sim-svg.spotting .sim-edge-dot:not(.spot-hit),
.sim-svg.spotting .sim-bnd:not(.spot-hit),
.sim-svg.spotting .sim-bnd-tg:not(.spot-hit) { opacity:.2; }
.sim-svg.spotting .sim-node.on,
.sim-svg.spotting .sim-node:focus-visible,
.sim-svg.spotting .sim-node-s.on,
.sim-svg.spotting .sim-edge.on,
.sim-svg.spotting .sim-edge:focus-visible,
.sim-svg.spotting .sim-edge-cap.on,
.sim-svg.spotting .sim-edge-lead.on,
.sim-svg.spotting .sim-edge-dot.on { opacity:1; }

/* ── build-up reveal: the stage settles into place ── */
@media (prefers-reduced-motion: no-preference) {
  .sim-svg.sim-reveal .sim-node { animation:simNodeIn .34s cubic-bezier(.2,.7,.3,1) both; animation-delay:calc(var(--i,0) * 26ms); }
  .sim-svg.sim-reveal .sim-node-s { animation:simFadeIn .3s ease both; animation-delay:calc(var(--i,0) * 26ms + 80ms); }
  .sim-svg.sim-reveal .sim-edge-line { stroke-dasharray:1; stroke-dashoffset:1; marker-end:none;
    animation:simEdgeDraw .6s ease forwards; animation-delay:calc(var(--i,0) * 22ms); }
  .sim-svg.sim-reveal .sim-edge-cap,
  .sim-svg.sim-reveal .sim-edge-lead,
  .sim-svg.sim-reveal .sim-edge-dot { animation:simFadeIn .3s ease both; animation-delay:.35s; }
  .sim-svg.sim-reveal .sim-bnd,
  .sim-svg.sim-reveal .sim-bnd-tg { animation:simFadeIn .25s ease both; }
  @keyframes simNodeIn { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
  @keyframes simFadeIn { from { opacity:0; } to { opacity:1; } }
  @keyframes simEdgeDraw { from { stroke-dashoffset:1; opacity:.35; } to { stroke-dashoffset:0; opacity:1; } }
}

/* ── cards in the working column ── */
.sim-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:14px 16px; }
.sim-brief { border-left:3px solid var(--accent); }
.sim-brief p:last-child { line-height:1.6; }
.sim-insp-empty { border-style:dashed; background:color-mix(in srgb, var(--accent) 2%, var(--surface)); }
.sim-insp-empty-head { display:flex; align-items:center; gap:10px; }
.sim-insp-empty-ic { flex:0 0 34px; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); font-size:12px; }
.sim-insp-empty-title { margin:1px 0 0; font-size:.86rem; font-weight:600; color:var(--text); }
.sim-insp-empty-copy { margin-top:9px; font-size:12px; line-height:1.6; color:var(--text-3); }
.sim-insp-empty-keys { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:10px; padding-top:9px;
  border-top:1px dashed var(--border); font-size:.66rem; color:var(--text-3); }
.sim-insp-empty-keys span { display:inline-flex; align-items:center; gap:5px; }
.sim-insp-empty kbd { font-family:inherit; font-size:.6rem; font-weight:600; color:var(--text-2);
  background:var(--surface-2); border:1px solid var(--border); border-bottom-width:2px; border-radius:5px; padding:1px 5px; }
.sim-insp-head { display:flex; align-items:flex-start; gap:9px; flex-wrap:wrap; margin-bottom:6px; }
.sim-insp-head b { font-size:.86rem; color:var(--text); }
.sim-insp-head .icon-btn { margin-left:auto; }
.sim-insp-head .sim-insp-hero { flex:0 0 44px; width:44px; height:44px; padding:0; border-radius:12px; display:grid; place-items:center; }
.sim-insp-head .sim-insp-hero svg { width:30px; height:30px; display:block; }
.sim-insp-head .sim-insp-hero .sim-ic-ink { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.sim-insp-title { display:flex; flex-direction:column; align-items:flex-start; gap:3px; flex:1 1 0; min-width:0; }
.sim-insp-title b { font-size:.88rem; line-height:1.35; color:var(--text); overflow-wrap:anywhere; }
.sim-kind { font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border-radius:999px; padding:3px 8px;
  color:var(--text-2); background:var(--surface-2); border:1px solid var(--border-strong); }
/* Kind tints lean towards the readable text token, so a small chip keeps its
   hue without dropping under 4.5:1 in any of the four views. */
.sim-kind.kind-identity, .sim-kind.kind-rbac, .sim-kind.kind-user, .sim-kind.kind-approval { color:color-mix(in srgb, var(--cat-2) 62%, var(--text)); border-color:color-mix(in srgb, var(--cat-2) 45%, transparent); }
.sim-kind.kind-guardrail, .sim-kind.kind-policy { color:color-mix(in srgb, var(--warn) 62%, var(--text)); border-color:color-mix(in srgb, var(--warn) 45%, transparent); }
.sim-kind.kind-audit, .sim-kind.kind-log, .sim-kind.kind-telemetry { color:color-mix(in srgb, var(--cat-3) 62%, var(--text)); border-color:color-mix(in srgb, var(--cat-3) 45%, transparent); }
.sim-kind.kind-security, .sim-kind.kind-detection { color:color-mix(in srgb, var(--info) 62%, var(--text)); border-color:color-mix(in srgb, var(--info) 45%, transparent); }
.sim-kind.kind-network, .sim-kind.kind-vpc, .sim-kind.kind-subnet, .sim-kind.kind-route,
.sim-kind.kind-gateway, .sim-kind.kind-endpoint, .sim-kind.kind-peering, .sim-kind.kind-hub, .sim-kind.kind-spoke { color:color-mix(in srgb, var(--cat-1) 62%, var(--text)); border-color:color-mix(in srgb, var(--cat-1) 45%, transparent); }
.sim-kind.kind-firewall, .sim-kind.kind-dns, .sim-kind.kind-model, .sim-kind.kind-index, .sim-kind.kind-agent,
.sim-kind.kind-tool, .sim-kind.kind-retrieve, .sim-kind.kind-validate { color:color-mix(in srgb, var(--cat-4) 62%, var(--text)); border-color:color-mix(in srgb, var(--cat-4) 45%, transparent); }
.sim-kind.kind-storage, .sim-kind.kind-data { color:color-mix(in srgb, var(--cat-6) 62%, var(--text)); border-color:color-mix(in srgb, var(--cat-6) 45%, transparent); }
.sim-kind.kind-account, .sim-kind.kind-ou, .sim-kind.kind-org, .sim-kind.kind-mg, .sim-kind.kind-sub,
.sim-kind.kind-control { color:color-mix(in srgb, var(--accent) 62%, var(--text)); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.sim-kind.kind-external { color:color-mix(in srgb, var(--cat-5) 62%, var(--text)); border-color:color-mix(in srgb, var(--cat-5) 45%, transparent); }
.sim-insp-sub { font-size:.76rem; color:var(--text-3); margin:0 0 8px; }
.sim-insp-l { font-size:.78rem; line-height:1.6; color:var(--text-2); margin:0 0 7px; }
.sim-insp-l > span { display:block; font-size:.6rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--text-3); margin-bottom:1px; }
.sim-insp-l:last-child { margin-bottom:0; }

/* ── decisions ── */
.sim-dec.answered { border-color:var(--border-strong); }
.sim-dec h3 { margin-top:2px; }
.sim-context { display:flex; gap:8px; align-items:flex-start; font-size:.74rem; line-height:1.55; color:var(--text-2);
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:9px 11px; margin:10px 0 0; }
.sim-context i { color:var(--accent); margin-top:.16rem; }
.sim-tradeoff { display:flex; gap:8px; align-items:flex-start; font-size:.74rem; line-height:1.55; color:var(--warn);
  background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 38%, transparent); border-radius:10px; padding:9px 11px; margin:9px 0 0; }
.sim-tradeoff i { margin-top:.16rem; }
.sim-opts { display:flex; flex-direction:column; gap:8px; margin-top:11px; }
button.sim-opt { display:flex; align-items:center; gap:10px; cursor:pointer; text-align:left; font-family:inherit;
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:11px 13px;
  transition:border-color .15s ease, background .15s ease; }
button.sim-opt:hover { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
button.sim-opt .sim-opt-t { flex:1 1 auto; font-size:.8rem; line-height:1.5; color:var(--text); }
button.sim-opt > i { color:var(--accent); }
.sim-opt { display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:12px; padding:11px 13px; }
.sim-opt.chosen { border-left-width:3px; }
.sim-opt .sim-opt-t { flex:1 1 auto; font-size:.8rem; line-height:1.5; color:var(--text); }
.sim-opt.v-best { border-color:var(--ok); background:color-mix(in srgb, var(--ok) 8%, var(--surface-2)); }
.sim-opt.v-ok { border-color:color-mix(in srgb, var(--ok) 55%, var(--border)); }
.sim-opt.v-weak { border-color:var(--warn); background:color-mix(in srgb, var(--warn) 8%, var(--surface-2)); }
.sim-opt.v-bad { border-color:var(--bad); background:color-mix(in srgb, var(--bad) 8%, var(--surface-2)); }
.sim-opt-badge { margin-left:auto; flex-shrink:0; font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-2); border:1px dashed var(--border-strong); border-radius:999px; padding:3px 9px; }
.sim-opt.v-best .sim-opt-badge { color:color-mix(in srgb, var(--ok) 58%, var(--text)); border-color:color-mix(in srgb, var(--ok) 55%, transparent); }
.sim-opt.v-weak .sim-opt-badge { color:color-mix(in srgb, var(--warn) 58%, var(--text)); border-color:color-mix(in srgb, var(--warn) 55%, transparent); }
.sim-opt.v-bad .sim-opt-badge { color:color-mix(in srgb, var(--bad) 58%, var(--text)); border-color:color-mix(in srgb, var(--bad) 55%, transparent); }
.sim-effrow { display:flex; gap:6px; flex-wrap:wrap; margin:9px 0 0; }
.sim-eff { font-size:.64rem; font-weight:700; border-radius:999px; padding:3px 9px; border:1px solid var(--border); }
.sim-eff.up { color:color-mix(in srgb, var(--ok) 60%, var(--text)); background:color-mix(in srgb, var(--ok) 16%, var(--surface-2)); border-color:color-mix(in srgb, var(--ok) 40%, transparent); }
.sim-eff.down { color:color-mix(in srgb, var(--bad) 60%, var(--text)); background:color-mix(in srgb, var(--bad) 16%, var(--surface-2)); border-color:color-mix(in srgb, var(--bad) 40%, transparent); }
.sim-why { display:flex; gap:8px; align-items:flex-start; font-size:.77rem; line-height:1.6; color:var(--text-2);
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:9px 11px; margin:9px 0 0; }
.sim-why i { margin-top:.18rem; color:var(--accent); }
.sim-why.good { color:color-mix(in srgb, var(--ok) 55%, var(--text)); border-color:color-mix(in srgb, var(--ok) 40%, transparent); background:color-mix(in srgb, var(--ok) 14%, var(--surface-2)); }
.sim-why.good i { color:color-mix(in srgb, var(--ok) 70%, var(--text)); }
.sim-why.warn { color:color-mix(in srgb, var(--warn) 55%, var(--text)); border-color:color-mix(in srgb, var(--warn) 40%, transparent); background:color-mix(in srgb, var(--warn) 14%, var(--surface-2)); }
.sim-why.warn i { color:color-mix(in srgb, var(--warn) 70%, var(--text)); }
.sim-ev { display:flex; flex-direction:column; gap:5px; margin-top:9px; }
.sim-ev-line { display:flex; gap:9px; align-items:flex-start; flex-wrap:wrap; text-align:left; font-family:inherit;
  background:var(--code-bg); border:1px solid var(--border); border-radius:9px; padding:8px 11px; margin:0; }
.sim-ev-line code { font-size:.72rem; color:var(--text-2); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break:break-word; }
.sim-ev-k { flex-shrink:0; font-size:.58rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-3); border:1px solid var(--border); border-radius:999px; padding:2px 7px; }
.sim-ev-why { flex:1 1 100%; font-size:.72rem; line-height:1.5; color:var(--text-3); }
.sim-ev.pickable .sim-ev-line { cursor:pointer; transition:border-color .15s ease; }
.sim-ev.pickable .sim-ev-line:hover { border-color:var(--accent); }
.sim-ev-line.ok { border-color:var(--ok); background:color-mix(in srgb, var(--ok) 12%, var(--code-bg)); }
.sim-ev-line.no { border-color:var(--bad); background:color-mix(in srgb, var(--bad) 12%, var(--code-bg)); }
.sim-ev-line.ok code, .sim-ev-line.no code { color:var(--text); }
.sim-ev-line.truth { border-style:dashed; }
.sim-diagramnote { display:flex; gap:8px; align-items:flex-start; font-size:.72rem; line-height:1.5; color:var(--text-2);
  border-left:3px solid var(--accent); background:var(--surface-2); border-radius:0 10px 10px 0; padding:8px 11px; margin:9px 0 0; }
.sim-diagramnote i { color:var(--accent); margin-top:.15rem; }

/* ── faults ── */
.sim-fault.active { border-color:color-mix(in srgb, var(--bad) 50%, var(--border)); }
.sim-fault.repaired { border-color:color-mix(in srgb, var(--ok) 45%, var(--border)); }
.sim-fault-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sim-flag { font-size:.64rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border-radius:999px; padding:3px 9px; }
.sim-flag.bad { color:color-mix(in srgb, var(--bad) 58%, var(--text)); background:color-mix(in srgb, var(--bad) 16%, var(--surface-2)); border:1px solid color-mix(in srgb, var(--bad) 45%, transparent); }
.sim-flag.ok { color:color-mix(in srgb, var(--ok) 58%, var(--text)); background:color-mix(in srgb, var(--ok) 16%, var(--surface-2)); border:1px solid color-mix(in srgb, var(--ok) 45%, transparent); }
.sim-symptom { display:flex; gap:8px; align-items:flex-start; font-size:.76rem; line-height:1.6; color:var(--text-2);
  border-left:3px solid var(--bad); background:var(--bad-soft); border-radius:0 10px 10px 0; padding:9px 11px; margin:9px 0 0; }
.sim-symptom i { color:var(--bad); margin-top:.18rem; }
.sim-ask { font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--text-3); margin:11px 0 0; }
.sim-continue { display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:flex-end; margin-top:11px; }

/* ── simulated trace ── */
.sim-trace-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sim-trace-btns { display:flex; gap:4px; }
.sim-trace-note { font-size:.68rem; line-height:1.5; color:var(--text-3); margin:7px 0 0; }
.sim-trace-log { display:flex; flex-direction:column; gap:5px; max-height:220px; overflow-y:auto; margin-top:9px;
  background:var(--code-bg); border:1px solid var(--border); border-radius:10px; padding:9px 11px; }
.sim-trace-line { display:flex; gap:8px; align-items:flex-start; font-size:.73rem; line-height:1.5; color:var(--text-3); margin:0; }
.sim-trace-line i { margin-top:.2rem; flex-shrink:0; }
.sim-trace-line.kind-build i { color:var(--accent); }
.sim-trace-line.kind-control i, .sim-trace-line.kind-identity i { color:var(--cat-2); }
.sim-trace-line.kind-audit i { color:var(--cat-3); }
.sim-trace-line.kind-traffic i { color:var(--cat-1); }
.sim-trace-line.kind-agent i { color:var(--accent); }
.sim-trace-line.kind-fail i, .sim-trace-line.kind-fail { color:color-mix(in srgb, var(--bad) 60%, var(--text)); }
.sim-trace-line.now { color:var(--text); }
.sim-trace-line.empty { color:var(--text-3); font-style:italic; }
.sim-trace-bar { height:4px; border-radius:2px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden; margin-top:8px; }
.sim-trace-bar i { display:block; height:100%; background:var(--accent); transition:width .25s ease; }

/* ── assessment: sequence, then evidence ── */
.sim-seq { display:flex; flex-direction:column; gap:7px; margin-top:10px; }
button.sim-seq-item { display:flex; align-items:center; gap:10px; cursor:pointer; text-align:left; font-family:inherit;
  font-size:.78rem; color:var(--text); background:var(--surface-2); border:1px solid var(--border);
  border-radius:11px; padding:10px 12px; transition:border-color .15s ease; }
button.sim-seq-item:hover { border-color:var(--accent); }
.sim-seq-n { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
  font-size:.66rem; font-weight:700; background:var(--surface-3); color:var(--text-2); }
button.sim-seq-item.on { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
button.sim-seq-item.on .sim-seq-n { background:var(--accent); color:var(--on-accent); }
.sim-seq-item { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; font-size:.78rem; color:var(--text-2);
  background:var(--surface-2); border:1px solid var(--border); border-radius:11px; padding:10px 12px; }
.sim-seq-item i { margin-left:auto; }
/* What you actually put at a position that is out of place. */
.sim-seq-you { flex-basis:100%; margin-left:32px; font-size:.7rem; color:var(--text-3); }
.sim-seq-item.ok { color:var(--text); border-color:color-mix(in srgb, var(--ok) 55%, var(--border)); }
.sim-seq-item.ok i { color:var(--ok); }
.sim-seq-item.no { border-color:color-mix(in srgb, var(--bad) 55%, var(--border)); }
.sim-seq-item.no i { color:var(--bad); }
.sim-notelist { display:flex; flex-direction:column; gap:6px; margin-top:9px; }
.sim-note { font-size:.74rem; line-height:1.55; color:var(--text-2); background:var(--surface-2); border:1px solid var(--border);
  border-radius:9px; padding:8px 11px; margin:0; }
.sim-note b { color:var(--text); }

/* ── completion summary ── */
.sim-summary { border-left:3px solid var(--ok); }
.sim-score { display:flex; align-items:baseline; gap:10px; margin:6px 0 4px; }
.sim-score-n { font-size:1.9rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.sim-summary-rows { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
.sim-summary-rows p { display:flex; align-items:center; gap:8px; font-size:.7rem; color:var(--text-2); margin:0;
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:4px 11px; }
.sim-summary-rows b { color:var(--text); font-weight:600; }
.sim-summary-rows .sim-summary-meters { border-style:dashed; }

/* ── sources and honesty notes ── */
.sim-sources ul { margin:8px 0 0; padding:0; list-style:none; }
.sim-sources li { font-size:.74rem; line-height:1.55; color:var(--text-2); padding:3px 0 3px 15px; position:relative; }
.sim-sources li::before { content:''; position:absolute; left:2px; top:.65em; width:5px; height:5px; border-radius:50%; background:var(--border-strong); }
.sim-sources a { color:var(--accent); text-decoration:none; border-bottom:1px dotted color-mix(in srgb, var(--accent) 60%, transparent); }
.sim-sources a:hover { border-bottom-style:solid; }
.sim-sources li.sim-related::before { display:none; }
.sim-sources li.sim-related button { font-family:inherit; font-size:.74rem; font-weight:600; color:var(--accent); cursor:pointer;
  background:none; border:none; padding:0; }
.sim-sources li.sim-disclaimer { color:var(--text-3); font-size:.7rem; font-style:italic; }
.sim-sources li.sim-disclaimer::before { background:var(--border); }

/* ── scenario picker (modal list) ── */
.sim-group { font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--text-3); margin:14px 0 6px; }
.sim-group:first-child { margin-top:0; }
button.sim-row { display:flex; flex-direction:column; gap:3px; width:100%; text-align:left; cursor:pointer; font-family:inherit;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 15px; transition:border-color .15s ease; }
button.sim-row:hover { border-color:var(--accent); }
.sim-row-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sim-row-head b { font-size:.85rem; color:var(--text); }
.sim-row-badge { flex-shrink:0; font-size:.62rem; font-weight:600; color:var(--text-3); border:1px dashed var(--border-strong);
  border-radius:999px; padding:3px 9px; white-space:nowrap; }
.sim-row-badge.doing { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 50%, transparent); }
.sim-row-badge.done { color:var(--ok); border-color:color-mix(in srgb, var(--ok) 50%, transparent); }
.sim-row-sub { font-size:.72rem; color:var(--text-2); line-height:1.5; }
.sim-row-meta { font-size:.66rem; color:var(--text-3); display:flex; align-items:center; gap:5px; flex-wrap:wrap; }

/* ── responsive: the diagram stacks above the working column ── */
@media (max-width: 1040px) {
  .sim-grid { grid-template-columns:minmax(0,1fr); }
  .sim-rail-goal { flex-basis:100%; }
  .sim-ind { margin-left:0; }
  .sim-scorebox { margin-left:auto; }
}
@media (max-width: 650px) {
  .sim-top { padding:10px 11px; gap:9px; }
  .sim-top > div:first-of-type { min-width:0; flex:1 1 100%; }
  .sim-scorebox { align-items:flex-start; }
  .sim-canvas { padding:4px 4px 0; }
  .sim-canvas-bar { padding:5px 7px; gap:6px; }
  .sim-canvas-hint { display:none; }
  .sim-canvas-tools { gap:6px; }
  .sim-viewbar { padding:4px 7px; }
  .sim-legend-grid { grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); padding:7px 7px 9px; }
  .sim-card { padding:12px 13px; }
  .sim-rail { flex-direction:column; align-items:stretch; gap:5px; padding:9px 10px; }
  .sim-rail-cap { display:block; margin:0 0 1px; }
  button.sim-stage { width:100%; justify-content:flex-start; border-radius:10px; padding:6px 9px 6px 6px; }
  button.sim-stage .sim-stage-t { display:inline; }
  .sim-rail-arrow { display:none; }
  .sim-rail-goal { flex:0 0 auto; width:100%; margin-top:3px; padding-top:7px; }
  /* The diagram keeps its labels legible instead of shrinking them into
     nothing: below this width the canvas pans rather than scaling further. */
  .sim-svg { min-width:620px; }
}

/* ── responsive: the exam screen stacks on a narrow pane ── */
@media (max-width: 650px) {
  #exam-screen { flex-direction: column; height: auto; overflow: visible; }
  #exam-sidebar { width: 100%; max-height: 42vh; overflow-y: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  #exam-screen > .flex-1 { min-width: 0; }
  #exam-screen > .flex-1 > .overflow-y-auto { overflow: visible; padding: 14px 12px 56px; }
  #question-card { padding: 14px; }
  #exam-screen footer { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  #pag-dots { flex: 1 1 100%; max-width: 100%; margin: 0; overflow-x: auto; }
  #exam-screen footer > .flex { flex-wrap: wrap; }
  #question-card code, #question-card pre, #question-card .font-mono { overflow-wrap: anywhere; }
  .case-top { flex-wrap: wrap; gap: 8px; }
  .case-meters { flex-wrap: wrap; gap: 10px; }
}

/* Official further reading under an explanation or recall answer. */
.q-sources { display:block; margin-top:.75rem; font-size:11.5px; line-height:1.6; color:var(--text-3); }
.q-sources > i { margin-right:.35rem; color:var(--accent); }
.q-sources a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.q-sources a:hover { color:var(--text); }
.q-verified { margin-left:.5rem; padding:0 .35rem; border:1px solid var(--border); border-radius:999px; font-size:10px; white-space:nowrap; }

/* Service-worker update prompt: a small, dismissible-by-reload toast. */
.update-toast { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:70; display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text-2); font-size:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.28); }
.update-toast.hidden { display:none; }
.update-toast > i { color:var(--accent); }

/* Honour a reduced-motion preference: keep the states, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}