/* ──────────────────────────────────────────────────────────────────
   omphalos-core.css · the operating substrate · kernel-as-stylesheet
   ──────────────────────────────────────────────────────────────────
   The substrate every cast inherits. Pulls together the cyrelium
   palette, the light/dark theme tokens, the twelve-breathing type
   scale, and the shared component chrome (HUD bar, title strip,
   cornerstones, nodes, composers, detail panels, chips, status
   hologram strip, mantra typography). Pages opt in with one link:

     <link rel="stylesheet" href="<path-to>/_ptah/omphalos-core.css">

   Pair with omphalos-core.js (same dir) to mount the gear, the
   status-hologram strip, the osisus indicator, the DNA chain, the
   gate-12 verdict, and the cross-page navigation chips.

   This stylesheet supersedes _ptah/twelve-breathing.css (its tokens
   are gathered here; the gear chrome is folded in). R0: the older
   file stays in place; new casts include this one.

   Cornerstones honored:
     - data/model: this file is fact-about-the-substrate AND substrate
     - name/operation: linking the file installs the surfaces
     - finished/running: the substrate is finished only while a cast
       is rendering through it
     - pars/toto: every component carries the whole cyrelium read
   ────────────────────────────────────────────────────────────────── */

/* ── §1 · cyrelium tokens · dark default ─────────────────────────── */
:root {
  /* canonical cyrelium palette · sprouted 2026-05-20 */
  --bg: #070b1a;
  --bg-deep: #040611;
  --bg-mid-c: #b2a08a;
  --ink: #e8e6dc;
  --ink-soft: #c8c5b8;
  --muted: #6b6e75;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --card: rgba(255, 255, 255, 0.03);
  --card-soft: rgba(255, 255, 255, 0.05);
  --cyrelium: #6fa0b5;
  --cyrelium-soft: rgba(111, 160, 181, 0.22);
  --cyrelium-glow: 0 0 14px rgba(111, 160, 181, 0.55);
  --gold: #f5d678;
  --gold-soft: rgba(245, 214, 120, 0.22);
  --gold-glow: 0 0 14px rgba(245, 214, 120, 0.55);
  --bad: #d65a4a;
  --bad-soft: rgba(214, 90, 74, 0.22);
  --done: #6ec98a;
  --done-soft: rgba(110, 201, 138, 0.22);
  --done-glow: 0 0 14px rgba(110, 201, 138, 0.5);

  /* type families */
  --serif: "Cormorant", "Hylia Serif", "Charter", "Iowan Old Style", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* background gradient (overridable per cast) */
  --bg-radial: radial-gradient(ellipse at 50% 0%, #0d1428 0%, var(--bg) 45%, var(--bg-deep) 100%);

  /* twelve-breathing scale variables — written by JS */
  --breath: 1;       /* base multiplier on every font-size */
  --h1-scale: 1;     /* additional multiplier on H1-class display */
}

/* ── §2 · light parchment · inverted palette ─────────────────────── */
html[data-theme="light"] {
  --bg: #f4ede1;
  --bg-deep: #ebe0cc;
  --ink: #1a1d22;
  --ink-soft: #2f343b;
  --muted: #7a7468;
  --line: rgba(28, 32, 40, 0.10);
  --line-strong: rgba(28, 32, 40, 0.22);
  --card: rgba(28, 32, 40, 0.04);
  --card-soft: rgba(28, 32, 40, 0.07);
  --cyrelium: #3d6e85;
  --cyrelium-soft: rgba(61, 110, 133, 0.20);
  --cyrelium-glow: 0 0 14px rgba(61, 110, 133, 0.30);
  --gold: #a07f1a;
  --gold-soft: rgba(160, 127, 26, 0.22);
  --gold-glow: 0 0 14px rgba(160, 127, 26, 0.30);
  --bad: #b34638;
  --bad-soft: rgba(179, 70, 56, 0.20);
  --done: #3e8e58;
  --done-soft: rgba(62, 142, 88, 0.22);
  --done-glow: 0 0 14px rgba(62, 142, 88, 0.30);
  --bg-radial: radial-gradient(ellipse at 50% 0%, #faf4e7 0%, var(--bg) 45%, var(--bg-deep) 100%);
}

/* ── §3 · base reset + body ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

body {
  margin: 0;
  background: var(--bg-radial);
  color: var(--ink);
  font: calc(16px * var(--breath, 1))/1.65 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background 0.4s ease, color 0.4s ease;
}

a {
  color: var(--cyrelium);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s, text-shadow .15s, color .15s;
}
a:hover { border-bottom-color: var(--cyrelium-soft); text-shadow: var(--cyrelium-glow); }

code {
  font: calc(13px * var(--breath, 1)) var(--mono);
  background: var(--card);
  padding: 2px 7px;
  border-radius: 3px;
  color: var(--ink);
  border: 1px solid var(--line);
}
pre code { display: block; padding: 14px 16px; overflow-x: auto; border-radius: 4px; }

/* ── §4 · HUD bar ────────────────────────────────────────────────── */
.hud-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  padding: 16px 28px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 96%, transparent) 0%,
    color-mix(in srgb, var(--bg) 55%, transparent) 80%,
    transparent 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hud-brand {
  font: 500 calc(12px * var(--breath, 1))/1 var(--serif);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--muted);
}
.hud-brand .mark {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyrelium); margin-right: 11px;
  box-shadow: var(--cyrelium-glow);
  vertical-align: 1px;
}
.hud-brand .glow { color: var(--ink); }
.hud-version { margin-left: 12px; font: 10.5px var(--mono); color: var(--muted); opacity: 0.65; }
.hud-status {
  margin-left: auto; display: flex; gap: 18px; align-items: center;
  font: 11.5px var(--mono); color: var(--muted); letter-spacing: 0.06em;
}
.hud-hint {
  font: 11px var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line); padding: 5px 11px; border-radius: 3px;
}
.hud-hint kbd {
  font: 600 11px var(--mono); background: var(--card);
  padding: 1.5px 6px; border-radius: 2px; margin: 0 3px; color: var(--ink);
}

/* ── §5 · title strip ────────────────────────────────────────────── */
.title-strip, .title-block { text-align: center; padding: 44px 16px 16px; }
.title {
  font-family: var(--serif); font-weight: 500;
  font-size: calc(clamp(40px, 6vw, 64px) * var(--breath, 1) * var(--h1-scale, 1));
  letter-spacing: 0.09em;
  margin: 0 0 10px;
  color: var(--ink);
  text-shadow: 0 0 36px rgba(111, 160, 181, 0.2);
  display: inline-flex; align-items: center; justify-content: center; gap: 20px;
}
.title .glow { color: var(--cyrelium); text-shadow: 0 0 22px rgba(111, 160, 181, 0.65); }
.title-icon { width: 52px; height: 42px; color: var(--cyrelium); filter: drop-shadow(0 0 10px rgba(111, 160, 181, 0.45)); }
.title-sub {
  font: 500 calc(12.5px * var(--breath, 1))/1 var(--serif);
  letter-spacing: 0.5em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 30px;
}
.title-sub .sep { color: var(--cyrelium); margin: 0 16px; opacity: 0.65; }
.title span[title] { cursor: help; border-bottom: 1px dotted var(--cyrelium-soft); }

/* ── §6 · mantra typography (Cormorant rim text) ─────────────────── */
.mantra, .rim-text {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: calc(11.5px * var(--breath, 1));
}
.mantra-em, .rim-em { color: var(--cyrelium); font-style: normal; }

/* ── §7 · cornerstones (four-tension cards) ──────────────────────── */
.cornerstone {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyrelium-soft);
  border-radius: 3px;
  background: var(--card);
  color: var(--ink-soft);
  font: calc(13px * var(--breath, 1))/1.55 var(--mono);
}
.cornerstone-head {
  font: 500 11px/1 var(--serif);
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

/* ── §8 · node (generic record badge) ────────────────────────────── */
.node {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 3px;
  background: var(--card-soft);
  border: 1px solid var(--line);
  font: 600 11px var(--mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.node:hover {
  background: var(--card);
  border-color: var(--cyrelium-soft);
  color: var(--ink);
  box-shadow: var(--cyrelium-glow);
}
.node .glyph { color: var(--cyrelium); }
.node.active {
  border-color: var(--gold-soft);
  color: var(--gold);
  box-shadow: var(--gold-glow);
}

/* ── §9 · chip (filter / categorical token) ──────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  font: 600 10px var(--mono);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.chip:hover { color: var(--ink-soft); border-color: var(--cyrelium-soft); }
.chip.on, .chip.active {
  background: var(--cyrelium-soft);
  border-color: var(--cyrelium);
  color: var(--ink);
  box-shadow: var(--cyrelium-glow);
}
.chip.gold {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  color: var(--gold);
}

/* ── §10 · composer (emit / author affordance) ───────────────────── */
.composer {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 18px 22px;
  margin: 18px 0;
}
.composer-head {
  font: 500 11px/1 var(--serif);
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.composer textarea, .composer input, .composer select {
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 9px 11px;
  color: var(--ink);
  font: 13px var(--mono);
  margin-bottom: 10px;
}
.composer textarea:focus, .composer input:focus, .composer select:focus {
  outline: none; border-color: var(--cyrelium-soft);
  box-shadow: inset 0 0 0 1px var(--cyrelium-soft);
}
.composer button {
  background: var(--gold-soft); border: 1px solid var(--gold);
  color: var(--gold); padding: 8px 16px; border-radius: 3px;
  font: 600 11px var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;
}
.composer button:hover { background: var(--gold); color: var(--bg-deep); box-shadow: var(--gold-glow); }

/* ── §11 · detail panel (inspector hologram) ─────────────────────── */
.detail-panel {
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--cyrelium-soft);
  border-radius: 6px;
  padding: 22px 26px;
  margin: 18px 0;
  box-shadow: 0 0 28px rgba(0, 0, 0, 0.4);
}
.detail-panel-head {
  font: 500 11px/1 var(--serif);
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.detail-panel dl { margin: 0; }
.detail-panel dt {
  font: 600 10px var(--mono);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
  margin-top: 10px;
}
.detail-panel dd {
  margin: 4px 0 0;
  font: calc(13px * var(--breath, 1))/1.55 var(--mono);
  color: var(--ink-soft);
  word-break: break-word;
}

/* ── §12 · status-hologram strip ─────────────────────────────────── */
.status-hologram-strip,
.status-hologram {
  background: linear-gradient(180deg, var(--bg-deep) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 100%);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--gold-soft);
  border-radius: 6px;
  padding: 18px 22px 14px;
  margin: 14px auto 24px;
  max-width: 980px;
  position: relative;
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.35), inset 0 0 30px rgba(245, 214, 120, 0.04);
}
.status-hologram-strip .sh-sigil,
.status-hologram .sh-sigil {
  position: absolute;
  top: -11px; left: 18px;
  background: var(--bg-deep);
  padding: 0 10px;
  font: 14px var(--serif);
  color: var(--gold);
  text-shadow: 0 0 12px rgba(245, 214, 120, 0.4);
  letter-spacing: 0.1em;
}
.status-hologram-strip .sh-row,
.status-hologram .sh-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
}
.status-hologram-strip .sh-row:last-child,
.status-hologram .sh-row:last-child { border-bottom: 0; padding-bottom: 0; }
.status-hologram-strip .sh-key,
.status-hologram .sh-key {
  font: 600 calc(10px * var(--breath, 1)) var(--mono);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
}
.status-hologram-strip .sh-val,
.status-hologram .sh-val {
  font: calc(12.5px * var(--breath, 1))/1.55 var(--mono);
  color: var(--ink-soft);
  word-break: break-word;
}
.status-hologram-strip .sh-val .gold,
.status-hologram .sh-val .gold { color: var(--gold); text-shadow: 0 0 6px rgba(245, 214, 120, 0.3); }
.status-hologram-strip .sh-val .cyr,
.status-hologram .sh-val .cyr { color: var(--cyrelium); }
.status-hologram-strip .sh-val .good,
.status-hologram .sh-val .good { color: var(--done); }
.status-hologram-strip .sh-val .bad,
.status-hologram .sh-val .bad { color: var(--bad); }

/* ── §13 · osisus indicator (HUD chip) ───────────────────────────── */
.osisus-indicator {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 3px;
  background: var(--card-soft);
  border: 1px solid var(--gold-soft);
  font: 600 10.5px var(--mono);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
  cursor: pointer;
  transition: background .15s, box-shadow .15s, color .15s;
  position: relative;
}
.osisus-indicator:hover {
  background: rgba(245, 214, 120, 0.08);
  box-shadow: var(--gold-glow);
}
.osisus-indicator .sigil { font: 13px var(--serif); }
.osisus-indicator .seq { color: var(--muted); margin-left: 4px; }
.osisus-indicator .chain-pop {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px;
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 10px 14px;
  display: none;
  z-index: 30;
  text-align: left;
  letter-spacing: 0;
}
.osisus-indicator.expanded .chain-pop { display: block; }
.osisus-indicator .chain-pop .row {
  display: block; padding: 4px 0; color: var(--ink-soft);
  font: 11px var(--mono); text-transform: none;
}
.osisus-indicator .chain-pop .row.current { color: var(--gold); }
.osisus-indicator .chain-pop .row.predecessor { color: var(--cyrelium); }

/* ── §14 · DNA chain strip (under the HUD) ───────────────────────── */
.dna-chain-strip {
  max-width: 980px;
  margin: 4px auto 16px;
  padding: 8px 22px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--card);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font: 11px var(--mono);
}
.dna-chain-strip .dna-label {
  font: 600 9.5px var(--mono);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
  margin-right: 8px;
}
.dna-chain-strip .dna-node {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--card-soft);
  border: 1px solid var(--cyrelium-soft);
  color: var(--cyrelium);
  font: 600 10.5px var(--mono);
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
  cursor: pointer;
}
.dna-chain-strip .dna-node:hover {
  background: var(--cyrelium-soft);
  color: var(--ink);
  box-shadow: var(--cyrelium-glow);
}
.dna-chain-strip .dna-node.current {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: var(--gold-glow);
}
.dna-chain-strip .dna-node .seq {
  font-weight: 400;
  color: var(--muted);
  font-size: 9px;
}
.dna-chain-strip .dna-link {
  color: var(--muted);
  font: 12px var(--serif);
  opacity: 0.6;
}

/* ── §15 · gate-12 indicator (top-right corner) ──────────────────── */
.gate-12-indicator {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 50;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 3px;
  background: var(--card-soft);
  border: 1px solid var(--line);
  font: 600 10.5px var(--mono);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.gate-12-indicator .g12-glyph { font: 14px var(--serif); }
.gate-12-indicator.matches { color: var(--done); border-color: var(--done-soft); }
.gate-12-indicator.matches:hover { box-shadow: var(--done-glow); }
.gate-12-indicator.refinement { color: var(--gold); border-color: var(--gold-soft); }
.gate-12-indicator.refinement:hover { box-shadow: var(--gold-glow); }
.gate-12-indicator.expansion { color: var(--cyrelium); border-color: var(--cyrelium-soft); }
.gate-12-indicator.expansion:hover { box-shadow: var(--cyrelium-glow); }
.gate-12-indicator.drifted { color: var(--bad); border-color: var(--bad-soft); }
.gate-12-indicator.drifted:hover { box-shadow: 0 0 14px rgba(214, 90, 74, 0.55); }
.gate-12-indicator .g12-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 12px 16px;
  display: none;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  font: 11px/1.55 var(--mono);
  color: var(--ink-soft);
}
.gate-12-indicator.expanded .g12-pop { display: block; }
.gate-12-indicator .g12-pop .g12-head {
  font: 500 10px var(--serif);
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.gate-12-indicator .g12-pop .g12-row { display: block; padding: 3px 0; }

/* ── §16 · cross-page navigation chip set ────────────────────────── */
.nav-chip-set {
  display: inline-flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
.nav-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  font: 600 9.5px var(--mono);
  letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none;
  transition: color .15s, background .15s, border-color .15s, box-shadow .15s;
}
.nav-chip:hover {
  background: var(--card-soft);
  color: var(--cyrelium);
  border-color: var(--cyrelium-soft);
  box-shadow: var(--cyrelium-glow);
}
.nav-chip.current {
  color: var(--gold);
  border-color: var(--gold-soft);
}
.nav-chip .port { color: var(--muted); opacity: 0.7; margin-left: 4px; }

/* ── §17 · twelve-breathing gear panel ───────────────────────────── */
.tb-gear {
  position: fixed;
  bottom: 18px;
  left: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 18px var(--serif);
  z-index: 60;
  opacity: 0.40;
  transition: opacity .22s ease, background .22s ease, border-color .22s ease,
              box-shadow .22s ease, color .22s ease, transform .35s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.tb-gear:hover {
  opacity: 1;
  background: var(--card-soft);
  border-color: var(--cyrelium-soft);
  color: var(--cyrelium);
  box-shadow: var(--cyrelium-glow);
  transform: rotate(45deg);
}
.tb-gear.open {
  opacity: 1;
  color: var(--gold);
  border-color: var(--gold-soft);
  box-shadow: var(--gold-glow);
  transform: rotate(90deg);
}

.tb-panel {
  position: fixed;
  bottom: 64px;
  left: 18px;
  width: 260px;
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 14px 16px 12px;
  z-index: 60;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.tb-panel.on {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.tb-panel-head {
  font: 500 10px/1 var(--serif);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.tb-panel-head .tb-sigil {
  color: var(--gold);
  font: 14px var(--serif);
  letter-spacing: 0;
}
.tb-panel-head .tb-cap {
  color: var(--ink-soft);
  font-style: italic;
  letter-spacing: 0.12em;
}

.tb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}
.tb-row:last-of-type { margin-bottom: 6px; }
.tb-row .tb-label {
  font: 9.5px var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}

.tb-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.tb-seg button {
  background: transparent;
  border: 0;
  color: var(--muted);
  font: 600 10px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 10px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tb-seg button.on {
  background: var(--cyrelium-soft);
  color: var(--ink);
}
.tb-seg button:hover:not(.on) {
  color: var(--ink-soft);
  background: var(--card-soft);
}

.tb-step {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.tb-step button {
  background: transparent;
  border: 0;
  color: var(--muted);
  font: 600 12px var(--mono);
  cursor: pointer;
  width: 22px;
  height: 24px;
  transition: background .15s, color .15s;
}
.tb-step button:hover { color: var(--ink); background: var(--card-soft); }
.tb-step .tb-val {
  font: 600 11px var(--mono);
  color: var(--gold);
  min-width: 36px;
  text-align: center;
  padding: 0 4px;
  letter-spacing: 0.08em;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.tb-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.tb-foot .tb-mantra {
  font: 9px var(--mono);
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  opacity: 0.65;
}
.tb-reset {
  background: transparent;
  border: 0;
  color: var(--muted);
  font: 9.5px var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 2px;
  transition: color .15s, background .15s;
}
.tb-reset:hover { color: var(--bad); background: var(--bad-soft); }

/* ── §18 · loading / error state pulses ──────────────────────────── */
.state {
  display: flex; align-items: center; justify-content: center;
  min-height: 30vh; flex-direction: column; gap: 12px;
  font: 12px var(--mono); color: var(--muted);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.state .glyph {
  font-size: 28px;
  color: var(--cyrelium);
  text-shadow: var(--cyrelium-glow);
  animation: oc-pulse 1.4s infinite;
}
.state.err .glyph { color: var(--bad); text-shadow: 0 0 14px var(--bad-soft); animation: none; }
@keyframes oc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── §19 · responsive · narrow phones ────────────────────────────── */
@media (max-width: 640px) {
  .hud-bar { padding: 12px 16px; gap: 10px; flex-wrap: wrap; }
  .hud-hint { display: none; }
  .gate-12-indicator { top: 12px; right: 12px; padding: 3px 8px; font-size: 9.5px; }
  .dna-chain-strip { padding: 6px 12px; }
  .status-hologram-strip, .status-hologram { padding: 14px 16px 10px; margin: 10px 12px 18px; }
  .status-hologram-strip .sh-row, .status-hologram .sh-row { grid-template-columns: 90px 1fr; gap: 10px; }
}

/* ── §20 · escape hatch for cast-specific overrides ──────────────── */
/* A cast may override any token by re-declaring it on :root or a
   scoped selector after this stylesheet loads. Per the holograms
   principle, casts overlay but never weld; do NOT redeclare component
   classnames from §4–§17 — write your own classnames instead. */