/**
 * COMPOSED PLAIN — the design token sheet for petrichor production surfaces.
 * cep-008 (The Composed Plain) + cep-009 (The Honest Board)
 *
 * Three registers: day (default), dusk, night.
 * Driven by data-register attribute on <html>:
 *   :root               → DAY  (Starlight whitewash)
 *   [data-register="dusk"] → DUSK (sepia gold crossing)
 *   [data-register="night"] → NIGHT (sepia-ink warm dark)
 *
 * LAW: This sheet is for production surfaces ONLY.
 *      app/styles/tw.css has CROWN-flagged placeholder tokens (teal/lime)
 *      — those are lab-only. Do NOT retrofit.
 *
 * Acceptance: §7 of design-bakeoff-008-009-analysis.final.md
 * Source: cep-008 §1 (token extraction), cep-009 §1 (shared tokens)
 * Crown-approved: 2026-09-25
 */

/* ═══════════════════════════════════════════════════════════════════════════
   §1  TYPOGRAPHY — the three voices (frozen per cep-008 §6)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --font-building: 'Didact Gothic', sans-serif;
  --font-scribe: 'Newsreader', Georgia, serif;
  --font-needles: 'IBM Plex Mono', 'Courier New', monospace;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §2  COLOR PALETTE — three registers, one sun each (cep-008 §1.1)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── DAY: Starlight whitewash ────────────────────────────────────────── */

:root {
  /* Grounds */
  --ground: #F4EDE4;
  --plain: #EFE6D5;
  --well: #E7DBC5;
  --paper: #FBF4E7;

  /* Ink (text) */
  --ink: #3D3428;
  --ink-rgb: 61, 52, 40;

  /* Accent rails */
  --mars: #C87349;
  --accent: #C87349;           /* = mars during day */
  --green: #7A8B6F;
  --timber: #4E342E;
  --amber: #B98A1E;            /* asleep at dawn */
  --straw: #E9CDB4;            /* selection — harvest, never Mars */

  /* Shadow hue */
  --umber-rgb: 112, 74, 44;

  /* ── Hairlines & rules (the notebook) ── */
  --hair: rgba(61, 52, 40, .16);
  --hair-soft: rgba(61, 52, 40, .08);
  --rule: rgba(78, 52, 46, .13);
  --rule-plot: rgba(78, 52, 46, .20);
  --rule-tick: rgba(78, 52, 46, .48);
  --pic-dot: rgba(78, 52, 46, .13);
  --frame-nicho: rgba(78, 52, 46, .50);

  /* ── Depth materials ── */
  --bevel-hi: rgba(255, 247, 229, .9);
  --bevel-lo: rgba(112, 74, 44, .30);
  --shadow-pin:
    0 1px 2px rgba(112, 74, 44, .42),
    0 5px 11px -4px rgba(112, 74, 44, .30);
  --shadow-nicho:
    inset 0 1px 3px rgba(112, 74, 44, .22),
    inset 0 4px 8px -2px rgba(112, 74, 44, .14),
    inset 0 -1px 0 rgba(255, 247, 229, .9);
  --shelf: rgba(255, 249, 238, .85);
  --spill: none;

  /* ── Surface treatment ── */
  --grain: .05;
  --grain-blend: multiply;
  --mint-dur: 850ms;

  /* ── Contrast floor: body text ≥ .78 ink alpha ── */
  --text-body: rgba(var(--ink-rgb), .78);
  --text-muted: rgba(var(--ink-rgb), .55);
  --text-faint: rgba(var(--ink-rgb), .38);
}

/* ── DUSK: sepia gold crossing ───────────────────────────────────────── */

[data-register="dusk"] {
  /* Grounds */
  --ground: #F0DFC0;
  --plain: #EAD6B0;
  --well: #DFC9A0;
  --paper: #F8EBCF;

  /* Ink (text) */
  --ink: #4A3720;
  --ink-rgb: 74, 55, 32;

  /* Accent rails */
  --mars: #B65E33;
  --accent: #B65E33;           /* = mars during dusk */
  --green: #7D8A5E;
  /* --timber: inherits */     /* same timber across day/dusk */
  /* --amber: inherits */      /* same amber across day/dusk */
  --straw: #E6C79C;

  /* Shadow hue */
  --umber-rgb: 146, 92, 34;

  /* ── Hairlines & rules ── */
  --hair: rgba(74, 55, 32, .18);
  --hair-soft: rgba(74, 55, 32, .09);
  --rule: rgba(110, 70, 28, .15);
  --rule-plot: rgba(110, 70, 28, .23);
  --rule-tick: rgba(110, 70, 28, .50);
  --pic-dot: rgba(110, 70, 28, .15);
  --frame-nicho: rgba(110, 70, 28, .55);

  /* ── Depth materials ── */
  --bevel-hi: rgba(255, 240, 206, .95);
  --bevel-lo: rgba(146, 92, 34, .32);
  --shadow-pin:
    16px 13px 22px -6px rgba(185, 138, 30, .5),
    3px 3px 6px rgba(146, 92, 34, .32);
  --shadow-nicho:
    inset 13px 5px 16px -6px rgba(146, 92, 34, .38);
  --shelf: rgba(255, 233, 186, .92);
  --spill: none;

  /* ── Surface treatment ── */
  --grain: .06;
  --grain-blend: multiply;
  --mint-dur: 1050ms;

  /* ── Contrast floor ── */
  --text-body: rgba(var(--ink-rgb), .78);
  --text-muted: rgba(var(--ink-rgb), .55);
  --text-faint: rgba(var(--ink-rgb), .38);
}

/* ── NIGHT: sepia-ink warm dark (the room that remembers) ────────────── */

[data-register="night"] {
  /* Grounds */
  --ground: #14100C;
  --plain: #0F0C08;
  --well: #251C12;
  --paper: #251D12;

  /* Ink (text) — inverted for dark ground */
  --ink: #E4D3B5;
  --ink-rgb: 228, 211, 181;

  /* Accent rails */
  --mars: #D98A5F;
  --accent: #D4A017;           /* beacon amber — instruments take it */
  --green: #9AAC8E;
  --timber: #6B4F41;
  --amber: #D4A017;            /* wakes at night — beacon, ticks, lamp glow */
  --straw: rgba(233, 205, 180, .24);

  /* Shadow hue */
  --umber-rgb: 6, 4, 2;

  /* ── Hairlines & rules ── */
  --hair: rgba(228, 211, 181, .15);
  --hair-soft: rgba(228, 211, 181, .08);
  --rule: rgba(228, 211, 181, .09);
  --rule-plot: rgba(228, 211, 181, .15);
  --rule-tick: rgba(212, 160, 23, .42);   /* gold ticks at night */
  --pic-dot: rgba(212, 160, 23, .34);
  --frame-nicho: rgba(212, 160, 23, .26);

  /* ── Depth materials ── */
  --bevel-hi: rgba(232, 196, 120, .26);
  --bevel-lo: rgba(0, 0, 0, .5);
  --shadow-pin:
    0 2px 4px rgba(0, 0, 0, .62),
    0 10px 18px -8px rgba(0, 0, 0, .55);
  --shadow-nicho:
    inset 0 0 0 1px rgba(212, 160, 23, .15);  /* FLAT 1px ring — canon §VII.2 */
  --shelf: rgba(212, 160, 23, .30);
  --spill: 0 0 12px rgba(232, 196, 120, .30);

  /* ── Surface treatment ── */
  --grain: .10;
  --grain-blend: soft-light;
  --mint-dur: 1150ms;

  /* ── Contrast floor (night pushes rows to .86) ── */
  --text-body: rgba(var(--ink-rgb), .86);
  --text-muted: rgba(var(--ink-rgb), .55);
  --text-faint: rgba(var(--ink-rgb), .38);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §3  SELECTION — straw, never Mars (cep-008 §7 bar 1)
   ═══════════════════════════════════════════════════════════════════════════ */

::selection {
  background: var(--straw);
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   §4  STUCCO GRAIN — SVG feTurbulence noise overlay (cep-008 §1)
   ═══════════════════════════════════════════════════════════════════════════ */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════════════════
   §5  BODY DEFAULTS — register-driven ground + ink
   ═══════════════════════════════════════════════════════════════════════════ */

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-scribe);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §6  REGISTER TRANSITION — .55s ease on color/shadow/grain (cep-008 §4.5)
   ═══════════════════════════════════════════════════════════════════════════ */

html {
  transition:
    background-color .55s ease,
    color .55s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §7  REDUCED MOTION — kills ALL animation and transition globally
       (cep-008 §4.5, acceptance bar 4)
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════════════════════════════════════
   §8  TYPOGRAPHY TOKENS — voice aliases for component consumption
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Building voice — Didact Gothic 400 */
  --voice-building:
    font-family: var(--font-building);
  /* Scribe voice — Newsreader body */
  --voice-scribe:
    font-family: var(--font-scribe);
  /* Ceremonial voice — Newsreader display */
  --voice-ceremony:
    font-family: var(--font-scribe);
    font-weight: 450;
  /* Needles voice — IBM Plex Mono */
  --voice-needles:
    font-family: var(--font-needles);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §9  DEPTH REGIME — the carve/pin/plate ontology (cep-008 §1.5)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CARVE (nicho/niche) — depth INTO the plain ── */

.nicho,
.niche {
  background: var(--well);
  border: 1px solid var(--frame-nicho);
  box-shadow: var(--shadow-nicho);
  border-radius: 8px;
  position: relative;
}

/* Lip highlight — top edge, bevel-hi fade 18%→82% */
.nicho::before,
.niche::before {
  content: '';
  position: absolute;
  top: 0; left: 8px; right: 8px;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(var(--ink-rgb), .18),
    var(--bevel-hi),
    rgba(var(--ink-rgb), .18)
  );
  opacity: .82;
}

/* Shelf light line — bottom edge */
.nicho::after,
.niche::after {
  content: '';
  position: absolute;
  bottom: 0; left: 4px; right: 4px;
  height: 1px;
  background: var(--shelf);
}

/* ── PIN (milagro) — depth ONTO the plain ── */

.milagro {
  background: var(--paper);
  border: 1px solid var(--bevel-lo);
  border-top-color: var(--bevel-hi);
  border-left-color: var(--bevel-hi);
  box-shadow: var(--shadow-pin);
  border-radius: 10px;
  position: relative;
  /* --tilt: 0.3°–0.8°, set per instance */
}

/* ── PLATE — imagery register ── */

.plate-frame {
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §10  DRIP — the working state (cep-008 §4.1)
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes drip {
  0%   { transform: scale(1);   opacity: .55; }
  50%  { transform: scale(1.7); opacity: 1; }
  100% { transform: scale(1);   opacity: .55; }
}

.drip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: drip 2.4s ease-in-out infinite;
  display: inline-block;
}

/* Wheat-stage population: jittered durations and delays (±10% per §4.1).
   Applied via data-attributes or per-instance classes by the component layer. */
.drip--a { animation-duration: 2.22s; animation-delay: .18s; width: 5px; height: 5px; }
.drip--b { animation-duration: 2.31s; animation-delay: .36s; width: 7px; height: 7px; }
.drip--c { animation-duration: 2.36s; animation-delay: .50s; width: 6px; height: 6px; }
.drip--d { animation-duration: 2.40s; animation-delay: .62s; width: 8px; height: 8px; }
.drip--e { animation-duration: 2.49s; animation-delay: .78s; width: 9px; height: 9px; }
.drip--f { animation-duration: 2.58s; animation-delay: 1.07s; width: 5px; height: 5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   §11  MINTING — land · settle · relax (cep-008 §4.2)
   Per-register keyframes. Duration via --mint-dur.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── DAY minting ── */

@keyframes mint-nicho-day {
  0%    { transform: translateY(-14px) scale(1.01); opacity: .48; }
  52%   { transform: translateY(-14px) scale(1.01); opacity: .48; }
  72%   { transform: translateY(-1px) scale(1.002); opacity: .92; }
  85%   { transform: translateY(1px) scale(1); opacity: 1; }
  100%  { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes mint-pin-day {
  0%    { transform: translateY(-10px) rotate(var(--tilt, 0.5deg)) scale(1.01); opacity: .52; }
  52%   { transform: translateY(-10px) rotate(var(--tilt, 0.5deg)) scale(1.01); opacity: .52; }
  72%   { transform: translateY(1px) rotate(var(--tilt, 0.5deg)) scale(1.002); opacity: .94; }
  85%   { transform: translateY(-0.4px) rotate(var(--tilt, 0.5deg)) scale(1); opacity: 1; }
  100%  { transform: translateY(0) rotate(var(--tilt, 0.5deg)) scale(1); opacity: 1; }
}

/* ── DUSK minting ── */

@keyframes mint-nicho-dusk {
  0%    { transform: translateY(-18px) scale(1.015); opacity: .44; }
  52%   { transform: translateY(-18px) scale(1.015); opacity: .44; }
  72%   { transform: translateY(-1px) scale(1.003); opacity: .90; }
  85%   { transform: translateY(1.2px) scale(1); opacity: 1; }
  100%  { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes mint-pin-dusk {
  0%    { transform: translateY(-16px) rotate(calc(var(--tilt, 0.5deg) + 0.8deg)) scale(1.02); opacity: .48; }
  52%   { transform: translateY(-16px) rotate(calc(var(--tilt, 0.5deg) + 0.8deg)) scale(1.02); opacity: .48; }
  72%   { transform: translateY(1.2px) rotate(var(--tilt, 0.5deg)) scale(1.002); opacity: .92; }
  85%   { transform: translateY(-0.5px) rotate(var(--tilt, 0.5deg)) scale(1); opacity: 1; }
  100%  { transform: translateY(0) rotate(var(--tilt, 0.5deg)) scale(1); opacity: 1; }
}

/* ── NIGHT minting ── */

@keyframes mint-nicho-night {
  0%    { transform: translateY(-20px) scale(1.02); opacity: .40; }
  52%   { transform: translateY(-20px) scale(1.02); opacity: .40; }
  72%   { transform: translateY(-1.2px) scale(1.004); opacity: .88; }
  85%   { transform: translateY(1.5px) scale(1); opacity: 1; }
  100%  { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes mint-pin-night {
  0%    { transform: translateY(-24px) rotate(calc(var(--tilt, 0.5deg) + 0.9deg)) scale(1.02); opacity: .42; }
  52%   { transform: translateY(-24px) rotate(calc(var(--tilt, 0.5deg) + 0.9deg)) scale(1.02); opacity: .42; }
  72%   { transform: translateY(1.5px) rotate(var(--tilt, 0.5deg)) scale(1.003); opacity: .90; }
  85%   { transform: translateY(-0.6px) rotate(var(--tilt, 0.5deg)) scale(1); opacity: 1; }
  100%  { transform: translateY(0) rotate(var(--tilt, 0.5deg)) scale(1); opacity: 1; }
}

/* Minting classes — apply to nichos and milagros */
.mint-nicho {
  animation: mint-nicho-day var(--mint-dur) cubic-bezier(.2, .7, .3, 1) both;
}
.mint-pin {
  animation: mint-pin-day var(--mint-dur) cubic-bezier(.2, .7, .3, 1) both;
}

[data-register="dusk"] .mint-nicho {
  animation-name: mint-nicho-dusk;
}
[data-register="dusk"] .mint-pin {
  animation-name: mint-pin-dusk;
}
[data-register="night"] .mint-nicho {
  animation-name: mint-nicho-night;
}
[data-register="night"] .mint-pin {
  animation-name: mint-pin-night;
}

/* Non-uniform stagger delays — wheat-wave phases (cep-008 §4.2) */
.stagger-1 { animation-delay: .05s; }
.stagger-2 { animation-delay: .17s; }
.stagger-3 { animation-delay: .19s; }
.stagger-4 { animation-delay: .29s; }
.stagger-5 { animation-delay: .36s; }
.stagger-6 { animation-delay: .41s; }
.stagger-7 { animation-delay: .50s; }
.stagger-8 { animation-delay: .53s; }
.stagger-9 { animation-delay: .62s; }
.stagger-10 { animation-delay: .65s; }
.stagger-11 { animation-delay: .78s; }

/* ═══════════════════════════════════════════════════════════════════════════
   §12  DUSK CEREMONY — gold wash + glint (cep-008 §4.3)
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes goldRite {
  0%   { opacity: 0; transform: scale(.96); }
  30%  { opacity: .45; }
  100% { opacity: 0; transform: scale(1.04); }
}

@keyframes glint {
  0%   { transform: translateX(-130%); }
  100% { transform: translateX(130%); }
}

.ceremony {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 40%,
    rgba(212, 160, 23, .18) 0%,
    transparent 70%
  );
  animation: goldRite 2000ms ease both;
}

.glint {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.glint::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(212, 160, 23, .22) 45%,
    rgba(255, 247, 229, .15) 50%,
    rgba(212, 160, 23, .22) 55%,
    transparent 100%
  );
  animation: glint 2000ms ease .2s both;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §13  BEACON — night-only amber pulse (cep-008 §1 component 10)
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes beacon-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(212, 160, 23, .45); }
  70%  { box-shadow: 0 0 0 10px rgba(212, 160, 23, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0); }
}

.beacon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  display: inline-block;
  /* Night only */
  opacity: 0;
}

[data-register="night"] .beacon {
  opacity: 1;
  animation: beacon-pulse 4.4s ease infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §14  NIGHT LAMP FACES — per-region illumination (cep-008 §1.2)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Default lamp coordinates — overridden per-region by page-level CSS */
:root {
  --lamp-x: 35%;
  --lamp-y: 27%;
  --lamp-a: .25;
  --lamp-b: .16;
  --lamp-x2: 70%;
}

[data-register="night"] .nicho,
[data-register="night"] .niche {
  background:
    radial-gradient(
      ellipse at var(--lamp-x) var(--lamp-y),
      rgba(212, 160, 23, var(--lamp-a)) 0%,
      rgba(212, 160, 23, var(--lamp-b)) 40%,
      var(--well) 100%
    );
}

/* ═══════════════════════════════════════════════════════════════════════════
   §15  FOCUS-VISIBLE — 1px dashed accent, 2px offset (cep-008 §4.5)
   ═══════════════════════════════════════════════════════════════════════════ */

:focus-visible {
  outline: 1px dashed var(--accent);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §16  FRAME + TITLEBAR — the pane law (cep-008 §3 component 3)
   ═══════════════════════════════════════════════════════════════════════════ */

.frame {
  border: 1px solid var(--timber);
  border-radius: 12px;
  overflow: hidden;
  background: var(--plain);
}

.titlebar {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 2px solid var(--timber);
  background: var(--shelf);
  min-height: 44px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §17  RULE — full-width 1px hairline section separator
   ═══════════════════════════════════════════════════════════════════════════ */

.rule {
  width: 100%;
  height: 1px;
  background: var(--hair);
  border: none;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §WAVE-2 BRIDGE — token aliases consumed by Wave 2 depth components
   (nicho, milagro, drip, frame, ledger, furrow, board-card).
   Values defer to the canonical three-voice stack in §1; components never
   invent tokens. --tilt ships as a designed fallback (var(--tilt, 0.5deg)).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --font-display: var(--font-building);
  --font-body: var(--font-scribe);
}

/* ═══════════════════════════════════════════════════════════════════════════
   §18  BOARD GRAMMAR — the honest board (cep-009 §2.3, T10–T13)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §18.1 Lane Truth Strip (T10) — per-lane quota gauges ── */

.blk-lanes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.lane-row {
  display: grid;
  grid-template-columns: 11px 168px 1fr;
  gap: 9px;
  padding: 4.5px 20px;
  border-bottom: 1px solid var(--hair-soft);
  align-items: center;
}

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

/* Lane name — Didact Gothic, building voice */
.lane-row .lname {
  font-family: var(--font-building);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-column: 1;
}

/* Lane number — Plex Mono tabular */
.lane-row .lnum {
  font-family: var(--font-needles);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  text-align: right;
  grid-column: 2;
}

.lane-row .lnum i {
  font-style: italic;
  opacity: 0.45;
  margin-left: 4px;
}

/* Meter — 3px health bar */
.lane-row .meter {
  height: 3px;
  border-radius: 2px;
  background: var(--green);
  opacity: 0.75;
  grid-column: 3;
  position: relative;
}

.lane-row .meter.meter-warn {
  background: var(--amber);
}

.lane-row .meter.meter-hot,
.lane-row .meter.meter-dead {
  background: var(--mars);
}

.lane-row .meter.meter-flat {
  background: var(--hair);
  opacity: 0.3;
}

/* Hot/dead lanes flip numbers to mars */
.lane-row.lane-hot .lnum,
.lane-row.lane-dead .lnum {
  color: var(--mars);
}

/* Lane annotation — Plex Mono 8.5px */
.lane-row .lex {
  font-family: var(--font-needles);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  grid-column: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── §18.2 Fronts Census (T11) — the board's plan census ── */

.blk-fronts .census-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 20px 8px;
  border-bottom: 1px solid var(--hair);
}

.blk-fronts .census-head .chips {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* Count chips — bordered Plex pills */
.blk-fronts .chip {
  font-family: var(--font-needles);
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 1px 7px;
  border: 1px solid var(--hair);
  color: var(--text-muted);
  border-radius: 4px;
}

.blk-fronts .chip.chip-green {
  border-color: var(--green);
  color: var(--green);
}

.blk-fronts .chip.chip-mars {
  border-color: var(--mars);
  color: var(--mars);
}

/* Census rows */
.blk-fronts .frow {
  display: grid;
  /* DS-014 item 4 — pname gets all the space (minmax(0,1fr) so long names
     can fill the row); pnote auto-sizes to its content. The previous
     fixed-width + 1fr layout left half the row visually empty and
     truncated long plan names. */
  grid-template-columns: 11px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 4.5px 20px;
  border-bottom: 1px solid var(--hair-soft);
  align-items: center;
}

.blk-fronts .frow:last-child {
  border-bottom: none;
}

/* Status glyphs — cep-009 §2.3 item 24 */
.blk-fronts .frow .st {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
}

/* live = green circle */
.blk-fronts .frow .st-live::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

/* done = timber square */
.blk-fronts .frow .st-done::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--timber);
}

/* arch = hollow circle */
.blk-fronts .frow .st-arch::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: transparent;
}

/* gate = mars rotated diamond */
.blk-fronts .frow .st-gate::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  background: var(--mars);
  transform: rotate(45deg);
}

/* Plan name — Plex, fills available row space. min-width:0 is the grid-
   item override that lets the ellipsis trigger instead of pushing the row. */
.blk-fronts .frow .pname {
  font-family: var(--font-needles);
  font-size: 11px;
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  grid-column: 2;
}

/* Plan note — Newsreader, right-aligned, auto-sized. The row now lets
   the name take all the available width; the note sits at the right edge
   sized to its content (no longer 1fr — which left a giant empty gutter
   on the right of every row). */
.blk-fronts .frow .pnote {
  font-family: var(--font-scribe);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-muted);
  white-space: nowrap;
  text-align: right;
  grid-column: 3;
}

/* Gated rows — all mars */
.blk-fronts .frow.gated {
  color: var(--mars);
}
.blk-fronts .frow.gated .pname,
.blk-fronts .frow.gated .pnote {
  color: var(--mars);
}

/* Idle rows — dimmed */
.blk-fronts .frow.idle {
  opacity: 0.5;
}

/* Census footer — the unfiled-8 honesty line */
.blk-fronts .census-foot {
  font-family: var(--font-needles);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  padding: 8px 20px 4px;
  border-top: 1px solid var(--hair-soft);
}

/* ── §18.3 Watchtower (T12) — expiry calendar rows ── */

.blk-watch .wrow {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 10px;
  padding: 4.5px 20px;
  border-bottom: 1px solid var(--hair-soft);
  align-items: baseline;
}

.blk-watch .wrow:last-child {
  border-bottom: none;
}

/* Date column — 64px Plex Mono */
.blk-watch .wrow .wdate {
  font-family: var(--font-needles);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  text-align: right;
  padding-right: 8px;
}

/* Event — Newsreader prose */
.blk-watch .wrow .wevent {
  font-family: var(--font-scribe);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Today row — mars */
.blk-watch .wrow.today {
  color: var(--mars);
}
.blk-watch .wrow.today .wdate,
.blk-watch .wrow.today .wevent {
  color: var(--mars);
}

/* Beacon — live expiry, night only (inherited from §13) */
.blk-watch .wrow .wbeacon {
  display: flex;
  align-items: center;
}

/* ── §18.4 Crown Queue (T13) — decisions needed ── */

.blk-crown .crow {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 9px;
  padding: 4.5px 20px;
  border-bottom: 1px solid var(--hair-soft);
  align-items: start;
}

.blk-crown .crow:last-child {
  border-bottom: none;
}

/* Crown mark — 6px mars rotated diamond */
.blk-crown .crow .cm {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
}

.blk-crown .crow .cm::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: var(--mars);
  transform: rotate(45deg);
}

/* Crown prose — Newsreader */
.blk-crown .crow .cprose {
  font-family: var(--font-scribe);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-body);
}

.blk-crown .crow .cprose strong {
  font-weight: 500;
}

.blk-crown .crow .cwhy {
  font-family: var(--font-scribe);
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §19  NIGHT LAMP FACE OVERRIDES — per-region illumination (cep-009 §1.2, T20)
   Each board region names its own bulbs; no two regions share coordinates.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dealer — twin-lit and brightest (a=.34, b=.20) */
[data-register="night"] .blk-dealer {
  --lamp-x: 30%;
  --lamp-y: 25%;
  --lamp-a: 0.34;
  --lamp-b: 0.20;
  --lamp-x2: 65%;
}

/* Fronts — tired (a=.17) */
[data-register="night"] .blk-fronts {
  --lamp-x: 40%;
  --lamp-y: 30%;
  --lamp-a: 0.17;
  --lamp-b: 0.10;
  --lamp-x2: 72%;
}

/* Crown queue — dimmest, crown sleeps (a=.16) */
[data-register="night"] .blk-crown {
  --lamp-x: 35%;
  --lamp-y: 27%;
  --lamp-a: 0.16;
  --lamp-b: 0.08;
  --lamp-x2: 68%;
}

/* Watchtower — status bulb high-left */
[data-register="night"] .blk-watch {
  --lamp-x: 28%;
  --lamp-y: 22%;
  --lamp-a: 0.25;
  --lamp-b: 0.12;
  --lamp-x2: 75%;
}

/* Lane strip — default instrument lighting */
[data-register="night"] .blk-lanes {
  --lamp-x: 35%;
  --lamp-y: 27%;
  --lamp-a: 0.22;
  --lamp-b: 0.12;
  --lamp-x2: 70%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §20  DUSK CEREMONY WIRING — reg-toggle fires ceremony on dusk entry
   (cep-008 §4.3, cep-009 §4.3, T21)
   ═══════════════════════════════════════════════════════════════════════════ */

/* The .ceremony-active class is toggled by reg-toggle.tsx when the
   register transitions to dusk. It fires goldRite once (2000ms), then
   the class is removed. Zero standing gold at night — ceremony only. */
.ceremony-active .ceremony {
  display: block;
}

/* Glint on milagro/piece metal during dusk ceremony */
.ceremony-active .glint {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §21  BOARD EMPTY STATES — honest-null face for each board region
   ═══════════════════════════════════════════════════════════════════════════ */

.blk-lanes .lane-empty,
.blk-fronts .frow-empty,
.blk-watch .wrow-empty,
.blk-crown .crow-empty {
  font-style: italic;
  color: var(--text-faint);
}

.blk-lanes .lane-empty {
  grid-column: 1 / -1;
}

.blk-fronts .frow-empty .pname {
  grid-column: 1 / -1;
  color: var(--text-faint);
}

.blk-watch .wrow-empty .wevent {
  color: var(--text-faint);
}

.blk-crown .crow-empty .cprose {
  color: var(--text-faint);
}

/* Census head label — Didact Gothic */
.blk-fronts .census-label {
  font-family: var(--font-building);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Crown urgency tag — Plex Mono */
.blk-crown .crow .curg {
  margin-left: 6px;
  font-family: var(--font-needles);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.blk-crown .crow .curg.curg-done {
  color: var(--green);
}

.blk-crown .crow .curg.curg-other {
  color: var(--mars);
}

/* Board provenance footer — Plex Mono */
.blk-fronts .census-prov,
.blk-crown .census-prov {
  font-family: var(--font-needles);
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
  padding: 8px 20px 4px;
  border-top: 1px solid var(--hair-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════
   §22  RESPONSIVE — density breakpoints (cep-009 §7)
   900px: padding/collapse
   1120px: board stacks, lanes 4→2
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1120px) {
  .blk-lanes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .lane-row {
    grid-template-columns: 8px 1fr;
    padding: 4px 12px;
  }
  .lane-row .lex {
    display: none;
  }
  .blk-fronts .frow {
    padding: 4px 12px;
  }
  .blk-fronts .census-head {
    padding: 0 12px 8px;
  }
  .blk-watch .wrow {
    padding: 4px 12px;
    grid-template-columns: 48px 1fr auto;
  }
  .blk-crown .crow {
    padding: 4px 12px;
  }
  .blk-fronts .census-foot {
    padding: 8px 12px 4px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §23  THE DEALER — slot+piece reveal surface (cep-009 §VIII.6, T9)
   Composes carve (slot) + pin (piece) + motion-with-mass.
   Last of the core set; needs live landing data to be honest.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The wrapper — the section on the plans board */
.blk-dealer {
  position: relative;
  background: var(--plain);
  border-bottom: 1px solid var(--hair);
  padding: 12px 16px 16px;
  transition: background-color 0.55s ease, border-color 0.55s ease;
}

/* Dealer label row — title + section annotation */
.dealer-lab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.dealer-lab .t {
  font-family: var(--font-building);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
}

.dealer-lab .sect {
  font-family: var(--font-needles);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  color: var(--ink);
  opacity: 0.38;
}

/* ── SLOT — the carve, depth INTO the plain ── */
.slot {
  position: relative;
  height: 158px;
  border-radius: 10px;
  background-color: var(--well);
  border: 1px solid var(--frame-nicho);
  box-shadow: var(--shadow-nicho);
  overflow: hidden;
  transition: background-color 0.55s ease, border-color 0.55s ease, box-shadow 0.55s ease;
}

/* Mouth lip — top edge, bevel-hi fade */
.slot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 9px;
  right: 9px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bevel-hi) 18%, var(--bevel-hi) 82%, transparent);
}

/* Shelf light — bottom edge */
.slot::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--shelf) 14%, var(--shelf) 86%, transparent);
}

/* The mouth line — dashed ink, day/dusk; gold ticks at night */
.slot .mouth {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 6px;
  height: 20px;
  border-bottom: 1px dashed var(--ink);
  font-family: var(--font-needles);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 3px;
}

[style*="--ink-rgb"] .slot .mouth { color: rgba(var(--ink-rgb), .4); border-bottom-color: rgba(var(--ink-rgb), .28); }

[data-register="night"] .slot .mouth {
  border-bottom: 1px dashed rgba(212, 160, 23, .42);
  color: rgba(212, 160, 23, .55);
}

/* ── PIECE — the dealt milagro, depth ONTO the plain ── */
.piece {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 30px;
  background: var(--paper);
  border: 1px solid var(--bevel-lo);
  border-top-color: var(--bevel-hi);
  border-left-color: var(--bevel-hi);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 var(--bevel-hi),
    inset 1px 0 0 rgba(255, 247, 229, 0.35),
    inset 0 -1px 0 var(--bevel-lo),
    var(--shadow-pin);
  /* Resting state: piece is just past the slot lip, hair of tilt */
  transform: translateY(0) rotate(var(--piece-tilt, 0.3deg));
  transform-origin: center;
  transition:
    transform 0.55s cubic-bezier(0.5, 0, 0.8, 0.4),
    background-color 0.55s ease,
    border-color 0.55s ease,
    box-shadow 0.55s ease;
  will-change: transform;
}

/* Racked state — pushed down, the piece is in the slot, undealt */
.piece.racked {
  transform: translateY(148px) rotate(-2.2deg);
  transition: transform 0.5s cubic-bezier(0.5, 0, 0.8, 0.4);
}

/* Night physics — dark relief, pinhead gains faint gold glow */
[data-register="night"] .piece {
  box-shadow:
    inset 0 1px 0 rgba(232, 196, 120, 0.4),
    inset 1px 0 0 rgba(232, 196, 120, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.62),
    0 10px 18px -8px rgba(0, 0, 0, 0.55);
}

/* Pinhead — 12px circle at varied point (per-instance prop) */
.piece .phead {
  position: absolute;
  top: -7px;
  left: var(--pin-left, 24%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--bevel-lo);
  box-shadow:
    inset 2px 2px 2px rgba(255, 250, 238, 0.95),
    inset -1px -2px 3px var(--bevel-lo),
    0 1px 2px rgba(var(--umber-rgb, 112, 74, 44), 0.45);
  transition: background-color 0.55s ease, box-shadow 0.55s ease;
}

.piece .phead::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2.5px;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: rgba(255, 252, 242, 0.95);
}

[data-register="night"] .piece .phead {
  box-shadow:
    inset 2px 2px 2px rgba(232, 196, 120, 0.5),
    inset -1px -2px 3px rgba(0, 0, 0, 0.5),
    0 0 8px rgba(212, 160, 23, 0.25);
}

/* Origin chrome strip — Plex Mono */
.piece .porigin {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--hair-soft);
  font-family: var(--font-needles);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.58;
}

.piece .porigin .tag {
  margin-left: auto;
  color: var(--accent);
  font-family: var(--font-needles);
}

/* Body — title + tabular body */
.piece .pbody {
  padding: 8px 12px 9px;
}

.piece .pbody h4 {
  font-family: var(--font-scribe);
  font-weight: 450;
  font-size: 16.5px;
  letter-spacing: -0.005em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  text-shadow: var(--spill);
}

.piece .pbody .ptxt {
  font-family: var(--font-needles);
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--ink);
  opacity: 0.66;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* Provenance strip — bottom */
.piece .pcru {
  padding: 4px 10px 6px;
  border-top: 1px solid var(--hair-soft);
  font-family: var(--font-needles);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: var(--ink);
  opacity: 0.55;
}

.piece .pcru b {
  font-weight: 500;
  color: var(--ink);
  opacity: 0.78;
}

[style*="--ink-rgb"] .piece .pcru b { color: rgba(var(--ink-rgb), .78); }

/* ── THE DEAL — cranked out, 620ms ease-out, settle, thud ── */
@keyframes deal-out {
  0% {
    opacity: 0;
    transform: translateY(148px) rotate(-3.6deg) scale(1.03);
  }
  26% { opacity: 1; }
  58% { transform: translateY(-5px) rotate(calc(var(--piece-tilt, 0.3deg) + 0.6deg)) scale(0.992); }
  79% { transform: translateY(2.5px) rotate(calc(var(--piece-tilt, 0.3deg) - 0.65deg)) scale(1.004); }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(var(--piece-tilt, 0.3deg)) scale(1);
  }
}

@keyframes contact-thud {
  0%, 58% { opacity: 0; }
  74% { opacity: 1; }
  100% { opacity: 0; }
}

/* Triggered by .dealing class — set by component on landing-id change */
.piece.dealing {
  animation: deal-out 620ms cubic-bezier(0.22, 0.75, 0.28, 1) both;
}

.piece.dealing .thud {
  animation: contact-thud 620ms ease-out both;
}

/* Contact-thud overlay — inset shadow flashes on landing */
.thud {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    inset 0 6px 12px -3px rgba(50, 30, 14, 0.5),
    inset 0 2px 4px rgba(50, 30, 14, 0.4);
}

[data-register="night"] .thud {
  box-shadow: none;
}

/* ── DEAL ROW — the crank control (lab only; the page wires it via JS) ── */
.deal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 11px;
}

.deal-row .deal-btn {
  font-family: var(--font-needles);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.62;
  border: 1px solid var(--hair);
  border-radius: 7px;
  padding: 6px 13px;
  cursor: pointer;
  background: transparent;
  font-family: var(--font-needles);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.deal-row .deal-btn:hover {
  color: var(--ink);
  border-color: var(--hair);
  opacity: 1;
}

.deal-row .deal-btn[aria-pressed="true"] {
  color: var(--ink);
  border-color: var(--accent);
  opacity: 1;
}

.deal-row .hint-txt {
  font-family: var(--font-scribe);
  font-size: 11.5px;
  color: var(--ink);
  opacity: 0.52;
  font-style: italic;
}

/* Empty-slot honest state — no landings this hour */
.slot-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
  text-align: center;
}

.slot-empty .e-title {
  font-family: var(--font-building);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.45;
  margin-bottom: 6px;
}

.slot-empty .e-body {
  font-family: var(--font-scribe);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.55;
  font-style: italic;
  max-width: 280px;
}

/* Night glow on the slot interior — dealer twin-lit per §19 */
[data-register="night"] .blk-dealer .slot {
  background:
    radial-gradient(
      ellipse at var(--lamp-x) var(--lamp-y),
      rgba(212, 160, 23, var(--lamp-a)) 0%,
      rgba(212, 160, 23, var(--lamp-b)) 40%,
      var(--well) 100%
    );
}

/* Responsive — slot shrinks at narrow viewports */
@media (max-width: 900px) {
  .blk-dealer {
    padding: 10px 12px 14px;
  }
  .slot {
    height: 140px;
  }
  .piece .pbody h4 {
    font-size: 15px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FRESHNESS BADGE — Brief 026 Increment A, the Freshness Law.
   Crown: "the pane never whispers its age." Every data-bearing pane wears
   one of these inline (the body, not hover). The ladder is the law:
     ● fresh   (<6h, green)
     ◐ aging   (<24h, amber)
     ✕ STALE   (≥24h, mars — visually loud, breathing border accent)
     · no age  (honest quiet — never a fake "fresh")
   Deployed site-wide (the Tote rides this style on /siege/tote standalone
   as well as embedded in /siege/atc). ───────────────────────────────────── */
.freshness-badge{
  display:inline-flex;align-items:center;gap:2px;
  font-family:"IBM Plex Mono", monospace;
  font-size:10px;letter-spacing:.04em;text-transform:none;
  padding:1px 6px;border:1px solid currentColor;border-radius:2px;
  background:transparent;line-height:1.4;
  white-space:nowrap;
}
.freshness-badge.tone-fresh   {color:var(--green)}
.freshness-badge.tone-aging   {color:var(--amber)}
.freshness-badge.tone-stale   {color:var(--mars);font-weight:600;letter-spacing:.06em}
.freshness-badge.tone-unknown {color:rgba(var(--ink-rgb),.42);font-style:italic}
@media (prefers-reduced-motion: no-preference){
  .freshness-badge.tone-stale{
    animation:freshness-stale-pulse 2.4s ease-in-out infinite;
  }
}
@keyframes freshness-stale-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(201,115,73,0)}
  50%   {box-shadow:0 0 0 3px rgba(201,115,73,.18)}
}
[data-register="night"] .freshness-badge.tone-stale{
  color:#E68E64;font-weight:600;
}
[data-register="night"] .freshness-badge.tone-aging{
  color:#D4A017;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUSTER PANE — Brief 026 Increment B. The fleet personnel pane; rows
   are agent names, brightness-by-age is the liveness signal (the
   Blinkenlights decay law applied to humans — SPEC-BLINKENLIGHTS §II.2).
   Crown design: small pane, station tabs, rows are agent names. ───── */
.blk-muster{
  background:var(--ground);
  border:1px solid var(--hair);
  border-radius:12px;
  overflow:hidden;
}
.muster-tabs{
  display:flex;flex-wrap:wrap;gap:4px;
  padding:8px 14px;
  border-bottom:1px solid var(--hair-soft);
  background:var(--well);
}
.muster-tab{
  display:inline-flex;align-items:baseline;gap:6px;
  font-family:"IBM Plex Mono", monospace;
  font-size:10px;letter-spacing:.04em;text-transform:none;
  padding:3px 8px;border-radius:3px;
  background:transparent;border:1px solid var(--hair);
  color:rgba(var(--ink-rgb),.55);
  cursor:pointer;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.muster-tab.is-active{
  background:var(--ink);color:var(--plain);
  border-color:var(--ink);
}
.muster-tab.is-empty{opacity:.45;font-style:italic}
.muster-tab.is-empty.is-active{opacity:1;font-style:normal}
.muster-tab-count{
  font-size:9px;color:rgba(var(--ink-rgb),.55);
  font-variant-numeric:tabular-nums;
}
.muster-tab.is-active .muster-tab-count{color:rgba(var(--plain-rgb),.65)}
.muster-rows{
  list-style:none;margin:0;padding:6px 14px 10px;
  display:grid;gap:2px 12px;
}
.muster-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:baseline;gap:8px;
  padding:3px 0;
  border-bottom:1px dashed var(--hair-soft);
  font-family:"IBM Plex Mono", monospace;
  font-size:11.5px;letter-spacing:.02em;
  transition:opacity .45s ease;
}
.muster-row:last-child{border-bottom:0}
.muster-row .muster-name{
  font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .45s ease;
}
.muster-row .muster-suffix{
  font-size:9.5px;color:rgba(var(--ink-rgb),.42);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.muster-row .muster-fires{
  font-size:9.5px;color:rgba(var(--ink-rgb),.38);
  font-variant-numeric:tabular-nums;
  min-width:24px;text-align:right;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RAIL GROUNDED BADGE — Brief 026 Increment C, "Rail-Death Badge".
   Crown directive: "the cycle block and Dealer pane on ATC currently read
   the frozen courier-flights PSM (stale since Prairie injunction S-96,
   Sep 29). While frozen, they must show a RAIL GROUNDED badge explaining
   why." Honest but not alarming — amber/mars tone matching the Freshness
   Law's STALE escalation. Renders NOTHING when the rail is live (the badge
   is for KNOWN frozen only; the parent pane owns its own absent face).
   Mirrors freshness-badge visual contract so the operator reads both
   badges with the same vocabulary. ───────────────────────────────────── */
.rail-grounded-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-family:"IBM Plex Mono", monospace;
  font-size:10px;letter-spacing:.04em;text-transform:none;
  padding:1px 7px;border:1px solid currentColor;border-radius:2px;
  background:transparent;line-height:1.4;
  white-space:nowrap;
}
.rail-grounded-badge.tone-frozen{
  color:var(--mars);
  font-weight:600;
  letter-spacing:.06em;
}
@media (prefers-reduced-motion: no-preference){
  .rail-grounded-badge.tone-frozen{
    animation:rail-grounded-pulse 3.2s ease-in-out infinite;
  }
}
@keyframes rail-grounded-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(201,115,73,0)}
  50%   {box-shadow:0 0 0 2px rgba(201,115,73,.14)}
}
[data-register="night"] .rail-grounded-badge.tone-frozen{
  color:#E68E64;
  font-weight:600;
}