/* Stratum — "cyanotype dossier" theme.
   A deep-indigo blueprint aesthetic: pale cyan/white linework on saturated
   blueprint blue, like an architect's drafting print or a cartographer's
   working chart. The map is the document; everything else is marginalia
   that recedes until asked for. Deliberately NOT a card-grid dashboard:
   secondary data (roster, transcript, ledger, metrics) lives inside native
   <details> disclosures so it's real, accessible, and out of the way by
   default — the map and the live negotiation moment own the screen. */

:root {
  /* --- ink system: deep blueprint blue base, cyanotype-white linework --- */
  --ink-void: #030711;
  --blue-0: #061530;
  --blue-1: #0a1e4a;
  --blue-2: #0e2a5e;
  --blue-3: #143674;
  --blue-4: #1c4590;
  --line-faint: rgba(191, 224, 255, 0.14);
  --line-soft: rgba(191, 224, 255, 0.3);
  --line-strong: rgba(214, 233, 255, 0.55);

  /* --- text: cyanotype paper tones --- */
  --paper: #eef6ff;
  --paper-dim: #b9cdec;
  /* WCAG AA (4.5:1) against --blue-2/--blue-1/--blue-0, the panel
     backgrounds this sits on for body-sized text (labels, hints, sub). */
  --paper-faint: #8193bb;

  /* --- semantic ink, derived from cartography convention, not SaaS
     status colors: cyan-white ink for settled fact, red-pencil for a
     live correction/annotation, deep crimson for a caught contradiction,
     patinated verdigris for resolution. --- */
  --cyan-glow: #8fd6ff;
  --cyan-glow-soft: rgba(143, 214, 255, 0.16);
  /* WCAG AA (4.5:1) against --blue-2/--blue-1/--blue-0, since this doubles
     as body-sized button/label text, not just borders and soft fills. */
  --redline: #dd7754;
  --redline-soft: rgba(217, 102, 63, 0.18);
  --crimson: #ef4a52;
  --crimson-soft: rgba(239, 74, 82, 0.18);
  --verdigris: #5fbf9a;
  --verdigris-soft: rgba(95, 191, 154, 0.18);

  /* --- agent ink: one pencil color per hand in the margin --- */
  --agent-lorekeeper: #7fa8e8;
  --agent-provocateur: #e2734f;
  --agent-harmonist: #6fbfa0;
  --agent-architect: #d7b463;
  --agent-arbiter: #b98fe0;
  --agent-judges: #7fd9e0;
  --agent-gate: #a9bbe0;
  --agent-human: #d98bb0;
  --agent-seed: #cbb87a;
  --agent-baseline: #8290ab;
  --agent-illustrator: #6f9bd0;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-md: 0 10px 30px rgba(1, 4, 12, 0.5);
  --shadow-lg: 0 24px 70px rgba(1, 4, 12, 0.65);

  --font-display: "Fraunces", Georgia, "Iowan Old Style", serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.2rem;
  --fs-xl: 1.6rem;
  --fs-2xl: 2.1rem;

  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 480ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  /* Closed <details> content (roster chips) still participates in layout
     in some engines; belt-and-suspenders against any stray horizontal
     scroll on narrow viewports regardless of the specific cause. */
  overflow-x: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, var(--line-faint) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--line-faint) 39px 40px),
    radial-gradient(1400px 800px at 20% -15%, rgba(143, 214, 255, 0.06), transparent 60%),
    var(--blue-1);
  background-attachment: fixed;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.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;
}

.skip-link {
  position: absolute;
  top: -3rem;
  left: var(--space-4);
  z-index: 200;
  padding: var(--space-2) var(--space-4);
  background: var(--cyan-glow);
  color: var(--ink-void);
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-2);
}

:focus-visible {
  outline: 2px solid var(--cyan-glow);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.glyph {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* ------------------------------------------------------------------ */
/* Masthead — a title-block stamp, not a SaaS topbar                   */
/* ------------------------------------------------------------------ */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(143, 214, 255, 0.05), transparent);
  flex-wrap: wrap;
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.masthead__mark {
  display: inline-flex;
  color: var(--cyan-glow);
  filter: drop-shadow(0 0 10px rgba(143, 214, 255, 0.5));
}

.masthead__title h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  letter-spacing: 0.01em;
  color: var(--paper);
}

.masthead__subtitle {
  margin: 0;
  font-size: var(--fs-2xs);
  letter-spacing: 0.03em;
  color: var(--paper-faint);
  font-style: italic;
  font-family: var(--font-display);
}

.masthead__seal {
  display: flex;
  gap: var(--space-2);
}

.seal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px dashed var(--line-strong);
  background: var(--blue-2);
  color: var(--paper-dim);
}

.seal--pending::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--redline);
  margin-right: 2px;
  animation: pulse-dot 1.4s ease-in-out infinite;
  display: inline-block;
}

.seal--ok {
  color: var(--verdigris);
  background: var(--verdigris-soft);
  border-color: var(--verdigris);
  border-style: solid;
}

.seal--ok::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verdigris);
  margin-right: 2px;
  display: inline-block;
}

.seal--error {
  color: var(--crimson);
  background: var(--crimson-soft);
  border-color: var(--crimson);
  border-style: solid;
}

.seal--error::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crimson);
  margin-right: 2px;
  display: inline-block;
}

/* ------------------------------------------------------------------ */
/* Cast drawer — collapsed by default, native <details>                */
/* ------------------------------------------------------------------ */

details {
  background: var(--blue-2);
}

.cast-drawer {
  border-bottom: 1px solid var(--line-soft);
}

.cast-drawer summary,
.dossier__panel summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-2) var(--space-6);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-faint);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  user-select: none;
}

.cast-drawer summary::-webkit-details-marker,
.dossier__panel summary::-webkit-details-marker {
  display: none;
}

.cast-drawer summary::before,
.dossier__panel summary::before {
  content: "▸";
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
  color: var(--cyan-glow);
}

.cast-drawer[open] summary::before,
.dossier__panel[open] summary::before {
  transform: rotate(90deg);
}

.cast-drawer summary:hover,
.dossier__panel summary:hover {
  color: var(--paper);
}

.roster__list {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0 var(--space-6) var(--space-3);
  list-style: none;
  overflow-x: auto;
}

.roster-chip {
  --agent-color: var(--paper-faint);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border-radius: var(--radius-full);
  border: 1px solid var(--line-soft);
  background: var(--blue-1);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}

.roster-chip__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--agent-color) 22%, var(--blue-3));
  color: var(--agent-color);
  flex-shrink: 0;
}

.roster-chip__meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.roster-chip__name {
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--paper);
}

.roster-chip__role {
  font-size: 0.625rem;
  letter-spacing: 0.03em;
  color: var(--paper-dim);
  text-transform: uppercase;
}

.roster-chip--active {
  border-color: var(--agent-color);
  background: color-mix(in srgb, var(--agent-color) 16%, var(--blue-2));
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent-color) 24%, transparent);
}

.roster-chip--active .roster-chip__avatar {
  animation: roster-pulse 1.1s var(--ease-out) infinite;
}

.roster-chip--gate.roster-chip--reject {
  border-color: var(--crimson);
  background: var(--crimson-soft);
}

.roster-chip--gate.roster-chip--admit {
  border-color: var(--verdigris);
  background: var(--verdigris-soft);
}

/* ------------------------------------------------------------------ */
/* Stage — the map dominates; the dossier is a slim margin             */
/* ------------------------------------------------------------------ */

.stage {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  align-items: start;
  transition: transform var(--dur-fast) var(--ease-out);
}

.stage--tremor {
  animation: stage-tremor 480ms var(--ease-out);
}

.stage__map {
  position: relative;
  /* min-width: 0 overrides the grid item's default min-width: auto,
     which otherwise lets its content's intrinsic size (the hex SVG)
     stretch the 1fr track wider than the viewport on narrow screens. */
  min-width: 0;
  min-height: 74vh;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--blue-0);
}

.map-legend {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 5;
  display: flex;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(3, 7, 17, 0.55);
  border: 1px solid var(--line-faint);
  backdrop-filter: blur(4px);
  font-size: var(--fs-2xs);
  color: var(--paper-dim);
}

.map-legend li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.map-legend__swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.map-legend__swatch--canon {
  background: var(--cyan-glow);
}

.map-legend__swatch--contested {
  background: var(--redline);
}

.map-legend__swatch--fog {
  background: repeating-linear-gradient(
    45deg,
    var(--blue-1) 0,
    var(--blue-1) 3px,
    var(--line-soft) 3px,
    var(--line-soft) 4px
  );
  border: 1px dashed var(--line-strong);
}

.hex-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 74vh;
}

.hex-map svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hex-cell {
  cursor: pointer;
}

.hex-cell__poly {
  stroke-width: 1.5px;
  transition: fill var(--dur-slow) ease, stroke var(--dur-slow) ease, filter var(--dur-slow) ease, opacity var(--dur-slow) ease;
}

.hex-cell__label-backdrop {
  fill: var(--blue-1);
  opacity: 0.75;
  pointer-events: none;
}

.hex-cell__label {
  fill: var(--paper-faint);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) ease;
}

.hex-cell--canon .hex-cell__label,
.hex-cell--contested .hex-cell__label {
  opacity: 0.85;
  fill: var(--paper);
}

.hex-cell--fog .hex-cell__poly {
  /* Diagonal hatch (defined once in app.js's SVG <defs>), not a flat
     near-background fill — a real "unspecified territory" drafting
     convention so unrevealed hexes read as deliberately obscured rather
     than as empty space with a faint outline. */
  fill: url(#fog-hatch);
  stroke: var(--line-soft);
  stroke-dasharray: 1.5 4.5;
  opacity: 0.9;
}

.hex-cell--canon .hex-cell__poly {
  fill: var(--cyan-glow-soft);
  stroke: var(--cyan-glow);
  filter: drop-shadow(0 0 9px rgba(143, 214, 255, 0.4));
}

.hex-cell--contested .hex-cell__poly {
  fill: var(--redline-soft);
  stroke: var(--redline);
  filter: drop-shadow(0 0 9px rgba(217, 102, 63, 0.45));
  animation: contested-pulse 2.6s ease-in-out infinite;
}

.hex-cell:not(.hex-cell--fog):hover .hex-cell__poly,
.hex-cell:not(.hex-cell--fog):focus-visible .hex-cell__poly {
  filter: brightness(1.3);
}

.hex-cell--reveal .hex-cell__poly {
  animation: fog-lift var(--dur-slow) var(--ease-spring);
}

.hex-cell__flash {
  fill: var(--paper);
  opacity: 0;
  pointer-events: none;
  animation: fog-burst 900ms var(--ease-out) forwards;
}

.hex-tooltip {
  position: absolute;
  z-index: 20;
  max-width: 260px;
  padding: var(--space-3);
  background: var(--blue-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-xs);
  line-height: 1.5;
  pointer-events: none;
}

.hex-tooltip__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--agent-color, var(--paper-faint));
  font-weight: 700;
}

.hex-tooltip__summary {
  color: var(--paper-dim);
  font-family: var(--font-display);
}

/* --- moment marquee: the cinematic "what's happening right now" strip --- */

.moment-marquee {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 5;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(3, 9, 22, 0.72);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.moment-marquee__scene {
  flex-shrink: 0;
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan-glow);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
}

.moment-marquee__headline {
  margin: 0;
  flex: 1;
  min-width: 200px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--paper);
  line-height: 1.3;
}

/* ------------------------------------------------------------------ */
/* Gate banner — the single most dramatic beat in the system           */
/* ------------------------------------------------------------------ */

.gate-banner {
  display: none;
}

.gate-banner:not([hidden]) {
  display: flex;
}

.gate-banner--reject {
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(2, 5, 12, 0.78);
  backdrop-filter: blur(4px);
  animation: overlay-in 200ms var(--ease-out);
}

.gate-banner--reject .gate-banner__frame {
  max-width: 620px;
  padding: var(--space-8) var(--space-8);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(239, 74, 82, 0.16), var(--blue-1) 65%);
  border: 2px solid var(--crimson);
  box-shadow: 0 0 0 8px rgba(239, 74, 82, 0.14), var(--shadow-lg);
  animation: gate-slam 560ms var(--ease-out);
  text-align: center;
}

.gate-banner--reject .gate-banner__icon {
  width: 64px;
  height: 64px;
  font-size: 2rem;
  margin: 0 auto var(--space-4);
  background: rgba(239, 74, 82, 0.22);
  color: var(--crimson);
  border: 2px solid var(--crimson);
}

.gate-banner--reject #gate-banner-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--paper);
  margin-bottom: var(--space-2);
}

.gate-banner--reject #gate-banner-detail {
  display: block;
  font-size: var(--fs-base);
  color: var(--paper-dim);
  font-family: var(--font-mono);
}

.gate-banner--admit {
  position: absolute;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  animation: banner-settle 460ms var(--ease-out);
}

.gate-banner--admit .gate-banner__frame {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: rgba(95, 191, 154, 0.16);
  border: 1px solid var(--verdigris);
  box-shadow: var(--shadow-md);
}

.gate-banner--admit .gate-banner__icon {
  width: 26px;
  height: 26px;
  font-size: var(--fs-base);
  background: rgba(95, 191, 154, 0.3);
  color: var(--verdigris);
}

.gate-banner--admit #gate-banner-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--paper);
}

.gate-banner--admit #gate-banner-detail {
  display: none;
}

/* After the fullscreen reject moment has had its beat, it recedes to a
   persistent corner flag (same footprint as the admit toast, red-themed)
   so the retry that follows is still visible underneath. */
.gate-banner--caught-toast {
  position: absolute;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
}

.gate-banner--caught-toast .gate-banner__frame {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--crimson-soft);
  border: 1px solid var(--crimson);
  box-shadow: var(--shadow-md);
}

.gate-banner--caught-toast .gate-banner__icon {
  width: 26px;
  height: 26px;
  font-size: var(--fs-base);
  background: rgba(239, 74, 82, 0.3);
  color: var(--crimson);
}

.gate-banner--caught-toast #gate-banner-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--paper);
}

.gate-banner--caught-toast #gate-banner-detail {
  display: none;
}

.gate-banner__icon {
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------ */
/* Disagreement banner — same visual language as the gate banner's     */
/* "admit"/"caught-toast" corner pill, so specialist-vs-specialist      */
/* conflict gets the same at-a-glance treatment as a gate rejection     */
/* instead of only being readable as transcript prose.                 */
/* ------------------------------------------------------------------ */

.disagreement-banner {
  display: none;
}

.disagreement-banner:not([hidden]) {
  display: flex;
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 20;
  animation: banner-settle 460ms var(--ease-out);
  max-width: min(360px, calc(100% - var(--space-8)));
}

.disagreement-banner__frame {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--redline-soft);
  border: 1px solid var(--redline);
  box-shadow: var(--shadow-md);
}

.disagreement-banner__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  font-size: var(--fs-base);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(217, 102, 63, 0.3);
  color: var(--redline);
}

.disagreement-banner__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.disagreement-banner #disagreement-banner-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--paper);
}

.disagreement-banner #disagreement-banner-detail {
  font-size: var(--fs-2xs);
  color: var(--paper-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Dossier — the margin notes: transcript, world bible, comparison     */
/* ------------------------------------------------------------------ */

.dossier {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 82vh;
  min-width: 0;
  position: sticky;
  top: var(--space-4);
}

.dossier__panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  background: var(--blue-2);
  overflow: hidden;
}

.dossier__panel[open] {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dossier__panel summary {
  border-bottom: 1px solid transparent;
}

.dossier__panel[open] summary {
  border-bottom-color: var(--line-faint);
}

.dossier__count {
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--paper-faint);
  text-transform: none;
  letter-spacing: 0;
}

.dossier__body {
  padding: var(--space-3) var(--space-4) var(--space-4);
  overflow-y: auto;
  min-height: 0;
}

#transcript-panel[open] .dossier__body {
  max-height: 60vh;
}

.dossier__hint {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-2xs);
  color: var(--paper-faint);
  font-style: italic;
  font-family: var(--font-display);
}

/* --- agent timeline: rounds within a scene, grouped and labeled --- */

.agent-timeline {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.agent-timeline__empty {
  color: var(--paper-faint);
  font-size: var(--fs-xs);
  font-style: italic;
}

.agent-timeline__scene-block {
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  background: var(--blue-1);
}

.agent-timeline__scene-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.agent-timeline__scene-head strong {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--paper);
}

.agent-timeline__scene-status {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--paper-faint);
}

.agent-timeline__scene-status--caught {
  color: var(--redline-bright, var(--redline));
}

.agent-timeline__scene-status--resolved {
  color: var(--verdigris);
}

.agent-timeline__round {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}

.agent-timeline__round-label {
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  color: var(--paper-faint);
  min-width: 4.5rem;
}

.agent-timeline__round--retry .agent-timeline__round-label {
  color: var(--redline);
}

/* A round where specialists genuinely clashed (a hard tonal flag, or the
   Arbiter had to overrule one proposal in favor of another) — a persistent,
   scannable marker so browsing the timeline after the fact shows exactly
   where disagreement happened, not just live toasts you had to catch. */
.agent-timeline__round-disagreement {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  border: 1px solid var(--redline);
  background: var(--redline-soft);
  color: var(--redline);
  font-size: var(--fs-2xs);
  cursor: help;
}

.agent-timeline__cells {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.agent-timeline__cell {
  --agent-color: var(--paper-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--agent-color) 50%, var(--line-faint));
  background: color-mix(in srgb, var(--agent-color) 14%, var(--blue-1));
  color: var(--agent-color);
  animation: timeline-pop var(--dur-base) var(--ease-spring);
}

.agent-timeline__cell--reject {
  border-color: var(--crimson);
  background: var(--crimson-soft);
  color: var(--crimson);
}

.agent-timeline__cell--admit {
  border-color: var(--verdigris);
  background: var(--verdigris-soft);
  color: var(--verdigris);
}

.agent-timeline__cell--image {
  border-color: var(--redline);
  background: var(--redline-soft);
  color: var(--redline);
}

.agent-timeline__foundation {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--agent-seed);
  font-size: var(--fs-xs);
  background: color-mix(in srgb, var(--agent-seed) 8%, var(--blue-1));
}

/* --- debate log --- */

.debate-log {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.scene-divider,
.round-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-2) 0;
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scene-divider {
  color: var(--paper-faint);
}

.scene-divider::before,
.scene-divider::after,
.round-divider::before,
.round-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-faint);
}

.round-divider {
  color: var(--redline);
  font-weight: 600;
}

.round-divider::before,
.round-divider::after {
  background: var(--redline-soft);
}

.foundation-divider {
  color: var(--agent-seed);
}

.entry {
  --agent-color: var(--paper-faint);
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--blue-1);
  border: 1px solid var(--line-faint);
  border-left: 3px solid var(--agent-color);
  animation: entry-in var(--dur-slow) var(--ease-out);
}

.entry__avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--agent-color) 20%, var(--blue-3));
  color: var(--agent-color);
}

.entry__body {
  min-width: 0;
  flex: 1;
}

.entry__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}

.entry__agent-name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--agent-color);
}

.entry__event-badge {
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-dim);
  background: var(--blue-3);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-full);
  padding: 1px var(--space-2);
}

.entry__chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-1) 0 var(--space-2);
}

.entry__chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  border: 1px solid var(--line-faint);
  background: var(--blue-3);
  color: var(--paper-dim);
  font-size: var(--fs-2xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entry__chip--ok {
  color: var(--verdigris);
  background: var(--verdigris-soft);
  border-color: var(--verdigris);
}

.entry__chip--warn {
  color: var(--redline);
  background: var(--redline-soft);
  border-color: var(--redline);
}

.entry__chip--danger {
  color: var(--crimson);
  background: var(--crimson-soft);
  border-color: var(--crimson);
}

.entry__sub {
  font-size: var(--fs-2xs);
  color: var(--paper-faint);
  margin-left: auto;
}

.entry__content {
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--paper-dim);
  font-family: var(--font-display);
}

.entry__content strong {
  color: var(--paper);
}

.entry--admission_result--false {
  border-color: var(--crimson);
  background: var(--crimson-soft);
  animation: entry-in var(--dur-slow) var(--ease-out), card-shake 480ms var(--ease-out);
}

.entry--admission_result--true {
  border-color: var(--verdigris);
  background: var(--verdigris-soft);
}

.entry--scene_failed {
  border-color: var(--redline);
  background: var(--redline-soft);
}

.entry--human_injection {
  background: color-mix(in srgb, var(--agent-human) 12%, var(--blue-1));
}

.entry--seed_entry {
  background: color-mix(in srgb, var(--agent-seed) 8%, var(--blue-1));
}

/* judge verdict groups accumulate scores instead of one badge per score */
.entry--judge_score .entry__content {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.judge-score-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 2px 0;
  border-bottom: 1px dashed var(--line-faint);
}

.judge-score-row:last-child {
  border-bottom: none;
}

/* --- world bible list/detail --- */

.canon-ledger__list {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.canon-ledger__item {
  --agent-color: var(--paper-faint);
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--agent-color) 30%, var(--line-faint));
  background: color-mix(in srgb, var(--agent-color) 8%, var(--blue-1));
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  animation: ledger-in var(--dur-base) var(--ease-out);
}

.canon-ledger__item:hover,
.canon-ledger__item:focus-visible {
  border-color: var(--agent-color);
}

.canon-ledger__round {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--agent-color) 20%, var(--blue-0));
  color: var(--paper);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.canon-ledger__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.canon-ledger__body strong {
  color: var(--paper);
  font-size: var(--fs-xs);
  font-family: var(--font-display);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canon-ledger__body span,
.canon-ledger__empty {
  color: var(--paper-faint);
  font-size: var(--fs-2xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.canon-ledger__empty {
  padding: var(--space-2) 0;
  list-style: none;
}

.entry-detail {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--line-soft);
  background: var(--blue-1);
}

.entry-detail h4 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--paper);
}

.entry-detail p {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--paper-dim);
}

.entry-detail__meta {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--paper-faint);
}

/* --- comparison --- */

.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.comparison__col {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--line-faint);
  background: var(--blue-1);
  min-width: 0;
}

.comparison__col--stratum {
  border-color: var(--cyan-glow);
}

.comparison__col h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--paper);
}

.comparison__col h4 span {
  display: block;
  font-size: var(--fs-2xs);
  text-transform: none;
  letter-spacing: 0;
  color: var(--paper-faint);
  font-style: italic;
  font-family: var(--font-display);
}

.comparison__paragraph {
  display: block;
  margin-bottom: var(--space-3);
}

/* The visual proof behind the baseline's contradiction_rate number: a
   paragraph the real admission gate would have rejected, flagged exactly
   where it occurs instead of only being knowable from an aggregate
   percentage elsewhere on the page. */
.comparison__paragraph--contradiction {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--crimson);
  background: var(--crimson-soft);
  color: var(--paper);
}

.comparison__paragraph-flag {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--crimson);
}

.comparison__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--paper-dim);
  max-height: 22rem;
  overflow-y: auto;
}

.metrics-list {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--blue-1);
  border: 1px solid var(--line-faint);
}

.metric-row dt {
  font-size: var(--fs-xs);
  color: var(--paper-dim);
}

.metric-row dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}

.metric-row dd .v-stratum {
  color: var(--cyan-glow);
  font-weight: 700;
}

.metric-row dd .v-baseline {
  color: var(--paper-faint);
}

.metric-note,
.metrics-list__empty {
  color: var(--paper-faint);
  font-size: var(--fs-xs);
}

.scorecard-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.scorecard-item {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--blue-1);
  border: 1px solid var(--line-faint);
}

.scorecard-item strong {
  display: block;
  margin-bottom: 2px;
  color: var(--paper);
  font-size: var(--fs-sm);
}

.scorecard-item span {
  color: var(--paper-faint);
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Console footer — a drafting-table tool tray                        */
/* ------------------------------------------------------------------ */

.console {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--line-soft);
  background: var(--blue-2);
}

.console__group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.console__group--primary {
  flex: 1;
  min-width: 260px;
}

.console__group--primary input {
  flex: 1;
}

.console__group label,
.console__label {
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-faint);
  white-space: nowrap;
}

.console__group input {
  min-width: 14rem;
  padding: var(--space-2) var(--space-3);
  background: var(--blue-0);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--paper);
  font-family: inherit;
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.console__group input::placeholder {
  color: var(--paper-faint);
}

.console__group input:focus {
  outline: none;
  border-color: var(--cyan-glow);
  box-shadow: 0 0 0 3px var(--cyan-glow-soft);
}

.btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--cyan-glow);
  border-color: var(--cyan-glow);
  color: var(--ink-void);
}

.btn--primary:hover {
  box-shadow: 0 6px 18px rgba(143, 214, 255, 0.35);
}

.btn--ghost {
  color: var(--cyan-glow);
  border-color: var(--cyan-glow);
}

.btn--ghost:hover {
  background: var(--cyan-glow-soft);
}

.btn--redline {
  color: var(--redline);
  border-color: var(--redline);
}

.btn--redline:hover {
  background: var(--redline-soft);
  box-shadow: 0 6px 18px rgba(217, 102, 63, 0.25);
}

.btn--small {
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-sm);
}

.btn--tiny {
  padding: 3px var(--space-2);
  color: var(--crimson);
  border-color: var(--crimson);
  background: var(--crimson-soft);
  font-size: var(--fs-2xs);
}

.console__group--export {
  gap: var(--space-3);
}

/* ------------------------------------------------------------------ */
/* Keyframes                                                           */
/* ------------------------------------------------------------------ */

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes roster-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--agent-color) 55%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--agent-color) 0%, transparent); }
}

@keyframes entry-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes card-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

@keyframes stage-tremor {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

@keyframes overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gate-slam {
  0% { opacity: 0; transform: scale(0.85); }
  55% { opacity: 1; transform: scale(1.04); }
  70% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

@keyframes banner-settle {
  from { opacity: 0; transform: translate(-50%, -8px) scale(0.96); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes fog-lift {
  0% { filter: brightness(0.5); opacity: 0.5; }
  45% { filter: brightness(2.1); opacity: 1; }
  100% { filter: brightness(1); opacity: 1; }
}

@keyframes fog-burst {
  0% { opacity: 0.85; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(2.6); }
}

@keyframes contested-pulse {
  0%, 100% { filter: drop-shadow(0 0 9px rgba(217, 102, 63, 0.45)); }
  50% { filter: drop-shadow(0 0 15px rgba(217, 102, 63, 0.7)); }
}

@keyframes timeline-pop {
  from { opacity: 0; transform: scale(0.75); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes ledger-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 960px) {
  .stage {
    grid-template-columns: 1fr;
  }

  .dossier {
    position: static;
    max-height: none;
  }

  .stage__map {
    min-height: 56vh;
  }

  .hex-map {
    min-height: 56vh;
  }

  .comparison {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .masthead,
  .cast-drawer summary,
  .roster__list,
  .stage,
  .console {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .console {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .console__group {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .console__group label,
  .console__label {
    flex-basis: 100%;
  }

  .console__group input {
    flex: 1 1 11rem;
    min-width: 0;
  }

  .console__group .btn {
    flex: 0 0 auto;
  }
}