/* deck-ui.css, shared chrome for every scry screen (SITE-REDESIGN.md v3).
   Pairs with deck-tokens.css (ALL color via tokens, a hex here is a bug)
   + deck-ui.js. CSP-clean, no external requests; fonts vendored in
   deck/fonts/. Two skins, one sheet: the tokens flip the side; the few
   rules that must differ structurally are scoped html[data-side="paper"].
   v2's arcade skin (starfield, FF6 window gradient, CRT scanlines, pixel
   faces) is retired, in git history, not orphaned. */

@font-face { font-family: "Newsreader";
  src: url("fonts/newsreader.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader";
  src: url("fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Space Grotesk";
  src: url("fonts/spacegrotesk.woff2") format("woff2");
  font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono VF";
  src: url("fonts/jbmono.woff2") format("woff2");
  font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Cinzel";
  src: url("fonts/cinzel.woff2") format("woff2");
  font-weight: 400 900; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--omen-0);
  color: var(--ink); font-family: var(--face-mono); font-size: 13.5px;
  line-height: 1.55; min-height: 100vh; padding-bottom: 92px;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
html[data-side="paper"] body {
  font-family: var(--face-serif); font-size: 17px; line-height: 1.62;
}
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
a { color: var(--accent); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-halo); }

/* ── panel chrome: brushed metal by night, quiet paper by day ─────────── */
.panel {
  position: relative; background: var(--omen-1);
  border: 1px solid var(--line); border-radius: var(--r);
}
.panel::after { content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; border-radius: inherit;
  background-image: var(--noise); opacity: var(--noise-alpha); }
.panel > * { position: relative; z-index: 1; }
.klabel { font-family: var(--face-label); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-dim); font-weight: 500; }
.num { font-family: var(--face-mono); font-variant-numeric: tabular-nums;
  font-size: 27px; letter-spacing: .01em; font-weight: 500; }
/* section heads carve, not shout: the engraved caps, hairline underneath */
h2 { font-family: var(--face-engraved); font-size: 15px; letter-spacing: .24em;
  color: var(--ink); margin: 34px 0 12px; font-weight: 600;
  display: flex; align-items: center; gap: 12px; }
h2::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
html[data-side="paper"] h2 { font-family: var(--face-serif); font-size: 15px;
  letter-spacing: .22em; font-weight: 600; }

header.deck { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; padding: 24px 0 14px; border-bottom: 1px solid var(--line);
  flex-wrap: wrap; }
.wordmark { font-family: var(--face-engraved); font-size: 22px;
  letter-spacing: .22em; text-transform: lowercase; font-weight: 700; }
.wordmark a { color: var(--ink); text-decoration: none; }
.wordmark b { color: var(--accent); font-weight: 600; }

/* ── the unified nav, filled by deck-ui.js into [data-deck-nav] ──────── */
nav.fun { display: flex; gap: 2px; flex-wrap: wrap; padding: 12px 0 0; }
nav.fun a { font-family: var(--face-label); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-dim); text-decoration: none;
  padding: 6px 11px; border-radius: var(--r); border: 1px solid transparent;
  font-weight: 500; }
nav.fun a:hover { color: var(--accent); }
nav.fun a.active { color: var(--accent); border-bottom: 1px solid var(--accent);
  border-radius: 0; }
nav.fun a.door-link { color: var(--gild); border: 1px solid var(--gild-dim); }
@media (max-width: 640px) { nav.fun a { padding: 5px 8px; } }

/* ── verdict chrome, CONCORD / DELIBERATING / BREACH ─────────────────── */
.verdict { font-family: var(--face-label); font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; padding: 9px 18px; font-weight: 500;
  border: 1px solid var(--filigree-dim); border-radius: var(--r);
  color: var(--filigree); }
.verdict.delib { color: var(--gild); border-color: var(--gild-dim);
  animation: pulse 1.4s ease-in-out infinite; }
.verdict.breach { color: var(--magi-red); border-color: var(--magi-red);
  background: repeating-linear-gradient(-45deg, transparent 0 12px, var(--hatch-breach) 12px 24px); }
@keyframes pulse { 50% { opacity: .55; } }

/* ── the Triptych ─────────────────────────────────────────────────────── */
.triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
  margin: 22px 0 0; }
.node { padding: var(--pad); }
.node .who { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.node .num { color: var(--filigree); }
.node.y .num { color: var(--gild); }
html[data-side="paper"] .node.y .num, html[data-side="floor"] .node.y .num { color: var(--accent); }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-top: 8px; }
.bars i { flex: 1; background: var(--filigree-dim); opacity: .8; border-radius: 1px 1px 0 0;
  min-height: 2px; }
.node.y .bars i { background: var(--accent-dim); }
.switchline { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  flex-wrap: wrap; padding: 9px var(--pad); margin-bottom: 8px; border: 1px solid var(--line);
  border-top: none; border-radius: 0 0 var(--r) var(--r);
  background: var(--omen-1); font-size: 12px; color: var(--ink-dim); }
.switchline b { color: var(--filigree); font-family: var(--face-mono); }

/* ── instruments + L1 inspect cards ───────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap); }
.inst { padding: var(--pad); padding-bottom: 30px; cursor: default; outline: none; }
.inst:hover, .inst:focus-within, .inst:focus, [data-cursor].cursor-on {
  border-color: var(--accent-dim); }
.inst .num { margin-top: 4px; }
.inst .sub { font-size: 11px; color: var(--ink-dim); margin-top: 3px;
  font-family: var(--face-mono); }
.inst .open { font-family: var(--face-label); font-size: 11px; color: var(--accent);
  text-decoration: none; position: absolute; right: 10px; bottom: 8px; background: none;
  border: none; cursor: pointer; letter-spacing: .08em; z-index: 2; }
.seal { display: inline-block; font-size: 9px; font-family: var(--face-mono);
  letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 7px; color: var(--ink-dim); margin-left: 6px;
  vertical-align: 2px; }
.seal.demo { color: var(--gild); border-color: var(--gild-dim); }
.seal.gate { color: var(--ink-dim); border-style: dashed; }
.seal.live { color: var(--settle-green); border-color: var(--filigree-dim); }
.seal.blind { color: var(--filigree); border-color: var(--filigree-dim); }
html[data-side="paper"] .seal.live, html[data-side="floor"] .seal.live { color: var(--accent); border-color: var(--accent-dim); }
.inspect { position: absolute; left: 8px; right: 8px; top: calc(100% + 6px); z-index: 5;
  display: none; padding: 10px 12px; font-size: 11.5px; color: var(--ink);
  background: var(--omen-2); border: 1px solid var(--accent-dim); border-radius: var(--r);
  box-shadow: var(--shadow-window); font-family: var(--face-mono); }
.inspect .scope { color: var(--ink-dim); font-style: italic; margin-top: 5px;
  font-family: var(--face-oracle); font-size: 14px; }
.inst:hover .inspect, .inst:focus .inspect, .inst:focus-within .inspect,
[data-cursor].cursor-on .inspect { display: block; }
.ring { width: 44px; height: 44px; border-radius: 50%; float: right; margin-top: 2px;
  background: conic-gradient(var(--gild) 0 var(--ring-deg, 270deg), var(--omen-3) var(--ring-deg, 270deg) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 56%);
          mask: radial-gradient(circle, transparent 55%, #000 56%); }
html[data-side="paper"] .ring, html[data-side="floor"] .ring {
  background: conic-gradient(var(--accent) 0 var(--ring-deg, 270deg), var(--omen-3) var(--ring-deg, 270deg) 360deg); }

/* ── doors + buttons: one CTA per screen region ───────────────────────── */
.doors { display: flex; gap: var(--gap); flex-wrap: wrap; }
.door { padding: 10px 16px; text-decoration: none; color: var(--ink);
  font-family: var(--face-label); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; outline: none; font-weight: 500; }
.door small { display: block; color: var(--ink-dim); font-size: 11px;
  letter-spacing: .02em; text-transform: none; margin-top: 3px;
  font-family: var(--face-mono); }
.door:hover, .door:focus { border-color: var(--accent-dim); }
.btn { display: inline-block; font-family: var(--face-label); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  color: var(--accent); background: none; border: 1px solid var(--accent);
  border-radius: var(--r); padding: 9px 18px; cursor: pointer;
  text-decoration: none; transition: background var(--quick), color var(--quick); }
.btn:hover, .btn:focus { background: var(--accent); color: var(--omen-0); }
.btn-gold { color: var(--omen-0); background: var(--gild); border: 1px solid var(--gild);
  font-weight: 600; }
.btn-gold:hover, .btn-gold:focus { background: var(--omen-0); color: var(--gild); }
.btn-quiet { border-color: var(--line); color: var(--ink-dim); }
.btn-quiet:hover, .btn-quiet:focus { background: none; color: var(--accent);
  border-color: var(--accent-dim); }

/* ── the menu window (native <dialog>), dark panel + gold hairline by
   night; a printed plate by day. The FF6 gradient retires. ─────────────── */
dialog.menu-window { width: min(540px, 92vw); margin: auto;
  background: linear-gradient(175deg, var(--oracle-hi), var(--oracle-lo) 70%);
  border: 1px solid var(--oracle-border); border-radius: calc(var(--r) + 2px);
  box-shadow: var(--shadow-window), inset 0 0 0 1px var(--gild-dim);
  padding: 18px 20px; color: var(--ink); font-family: var(--face-mono);
  transform-origin: 50% 0; }
html[data-side="paper"] dialog.menu-window, html[data-side="floor"] dialog.menu-window {
  box-shadow: var(--shadow-window), inset 0 0 0 3px var(--omen-1),
    inset 0 0 0 4px var(--line); border-color: var(--ink); }
dialog.menu-window[open] { animation: winopen .14s ease-out; }
@keyframes winopen { from { transform: scaleY(.12); opacity: .4; } }
dialog.menu-window::backdrop { background: var(--backdrop); }
dialog.menu-window .klabel { color: var(--gild); }
html[data-side="paper"] dialog.menu-window .klabel, html[data-side="floor"] dialog.menu-window .klabel { color: var(--accent); }
dialog.menu-window .num { color: var(--ink); font-size: 30px; }
dialog.menu-window p { font-size: 12.5px; margin: 8px 0; color: var(--ink); }
dialog.menu-window .prov { font-size: 11px; color: var(--ink-dim); word-break: break-all;
  border: 1px solid var(--line); border-radius: var(--r); padding: 7px 9px; }
dialog.menu-window .row { display: flex; justify-content: space-between; gap: 10px;
  align-items: center; margin-top: 12px; flex-wrap: wrap; }
dialog.menu-window a, dialog.menu-window button { color: var(--accent); background: none;
  border: none; font-family: var(--face-label); font-size: 13px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; }
dialog.menu-window .oracle { font-family: var(--face-oracle); font-style: italic;
  font-size: 16px; }
dialog.menu-window pre { font-size: 10.5px; overflow: auto; max-height: 40vh;
  background: var(--omen-0); border: 1px solid var(--line);
  border-radius: var(--r); padding: 8px; color: var(--filigree); }

/* ── the ledger window (js/ledger.js): a vow's public record read as a
   page instead of a JSON dump. Wider than a menu window because the chain
   is a table; the raw record is still linked in its footer row. ───────── */
dialog.menu-window.wide { width: min(880px, 94vw); max-height: 88vh; overflow: auto; }
/* pages define their own .mono-note; this is the shared fallback so the
   ledger window renders the same wherever it is opened from */
.mono-note { font-family: var(--face-mono); font-size: 11.5px; color: var(--ink-dim); }
.led-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin: 6px 0 2px; }
.led-name { font-family: var(--face-serif); font-size: 26px; font-weight: 700;
  line-height: 1.15; }
.led-sub { font-family: var(--face-mono); font-size: 11.5px; color: var(--ink-dim);
  margin-top: 3px; }
.led-mark { width: 46px; height: 46px; border: 1px solid var(--line);
  border-radius: var(--r); flex: none; }
.led-sec { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.led-vow { font-family: var(--face-oracle); font-style: italic; font-size: 16px;
  margin: 6px 0 10px; }
.led-sealed { font-style: normal; font-family: var(--face-mono); font-size: 12px; }
.led-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 18px; }
.led-kv { display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--face-mono); font-size: 12.5px; padding: 4px 0;
  border-bottom: 1px solid var(--line); }
.led-kv span:first-child { color: var(--ink-dim); }
.led-scroll { overflow-x: auto; }
table.led-chain { width: 100%; border-collapse: collapse; font-family: var(--face-mono);
  font-size: 12px; margin-top: 4px; }
table.led-chain th { font-family: var(--face-label); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-dim); text-align: left; font-weight: 500;
  border-bottom: 1px solid var(--ink); padding: 5px 7px; white-space: nowrap; }
table.led-chain td { padding: 6px 7px; vertical-align: top; white-space: nowrap; }
table.led-chain tr.led-note td { white-space: normal; border-bottom: 1px solid var(--line);
  padding-top: 0; padding-bottom: 9px; }
table.led-chain tr:not(.led-note) td { border-bottom: none; }
.led-said { font-family: var(--face-oracle); font-style: italic; font-size: 13px;
  color: var(--ink); margin: 3px 0; white-space: normal; }
.seal.led-overdue { color: var(--magi-red); border-color: var(--magi-red); }
@media (max-width: 560px) { .led-name { font-size: 21px; } }

/* ── hazard banner (breach detail, never a toast) ─────────────────────── */
.hazard { border: 1px solid var(--magi-red); border-radius: var(--r); padding: 12px 14px;
  background: repeating-linear-gradient(-45deg, transparent 0 12px, var(--hatch-breach) 12px 24px);
  color: var(--ink); font-size: 12.5px; }
.hazard .klabel { color: var(--magi-red); }

/* ── topbar (toggles; the CRT toggle is retired) ──────────────────────── */
.topbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-dim); }
button.tog { font-family: var(--face-label); font-size: 11px;
  letter-spacing: .1em; background: var(--omen-1); color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: var(--r); padding: 6px 10px;
  cursor: pointer; }
button.tog:hover, button.tog:focus { color: var(--accent); border-color: var(--accent-dim); }
button.tog[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-dim); }
.nowplaying { max-width: 300px; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; font-size: 10.5px; }
.nowplaying a { color: var(--filigree); }

/* ── the Scope Stele, one compact chip; the full honest-scope card + the
   creed reopen from it (deck-ui.js wireCreed). No-JS falls back to the
   inline card the page itself wrote, so the caveat is on screen either way.
   Only pages that owe the reader a caveat carry one — the game and town
   pages have no stele at all, and get their bottom padding back below. ─── */
.stele { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--omen-1); border-top: 1px solid var(--line);
  padding: 7px 20px; font-size: 10.5px; color: var(--ink-dim);
  font-family: var(--face-mono);
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; }
.stele b { color: var(--accent); font-weight: 500; letter-spacing: .14em;
  font-family: var(--face-label); }
/* body's 92px clears the fixed stele + the watermark above it. A page with no
   stele only needs to clear the watermark. Written as :not(:has(…)) on purpose
   so a browser without :has() degrades to the old 92px everywhere — a little
   dead space, never content hidden under a bar. */
body:not(:has(.stele)) { padding-bottom: 46px; }
.creed-chip { background: none; border: none; cursor: pointer; padding: 0;
  color: var(--ink-dim); font-family: var(--face-mono); font-size: 10.5px;
  letter-spacing: .02em; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--accent-dim); }
.creed-chip:hover, .creed-chip:focus, .creed-chip.cursor-on {
  color: var(--accent); outline: none; }
.creed-list { margin: 8px 0 4px; padding-left: 20px; }
.creed-list li { font-size: 12px; line-height: 1.5; color: var(--ink); margin: 3px 0; }

/* ── broadsheet primitives (the paper side) ───────────────────────────── */
.rule { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
.rule-double { border: none; border-top: 3px double var(--ink); margin: 10px 0; }
.dateline { font-family: var(--face-label); font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-dim); display: flex; gap: 14px;
  justify-content: space-between; flex-wrap: wrap; }
.masthead { text-align: center; padding: 20px 0 10px; }
.masthead .name { font-family: var(--face-engraved); font-weight: 700;
  font-size: clamp(48px, 8vw, 76px); letter-spacing: .16em; line-height: 1;
  color: var(--ink); }
.masthead .dek { font-family: var(--face-serif); font-style: italic;
  font-size: 17px; color: var(--ink-dim); margin-top: 10px; }
.byline { font-family: var(--face-label); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-dim); }
.oracle-quote { font-family: var(--face-oracle); font-style: italic; font-size: 19px;
  line-height: 1.5; color: var(--ink); }
.caption { font-family: var(--face-serif); font-style: italic; font-size: 14px;
  color: var(--ink-dim); text-align: center; margin-top: 8px; }
.plate { border: 1px solid var(--engrave-ink); padding: 6px;
  box-shadow: inset 0 0 0 3px var(--omen-0), inset 0 0 0 4px var(--engrave-faint); }
.engraving { display: block; width: 100%; height: auto; }

/* the numbers rule: five figures, one thin line */
.numbers-rule { display: flex; gap: 8px 26px; justify-content: center; flex-wrap: wrap;
  padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: var(--face-mono); font-size: 12.5px; color: var(--ink-dim); }
.numbers-rule b { color: var(--filigree); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── floor primitives (the signed-in side) ────────────────────────────── */
.floorbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center;
  gap: 14px; padding: 10px 16px; background: var(--omen-1);
  border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.balance-chip { font-family: var(--face-mono); font-size: 12.5px; color: var(--gild);
  border: 1px solid var(--gild-dim); border-radius: 999px; padding: 4px 12px;
  font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none; }
a.balance-chip:hover { border-color: var(--gild); }
.identity { font-family: var(--face-mono); font-size: 11.5px; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.identity a { color: var(--gild); text-decoration: underline; }
.ticker { flex: 1; min-width: 160px; font-family: var(--face-mono); font-size: 11.5px;
  color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker a { color: var(--ink-dim); text-decoration: none; }
.ticker a:hover { color: var(--accent); }
.rail { position: fixed; left: 0; top: 0; bottom: 0; width: 178px; z-index: 15;
  background: var(--omen-1); border-right: 1px solid var(--line);
  padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.rail a { font-family: var(--face-label); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-dim); text-decoration: none;
  padding: 10px 12px; border-radius: var(--r); border: 1px solid transparent;
  font-weight: 500; }
.rail a:hover { color: var(--gild); }
.rail a.active { color: var(--gild); border-color: var(--gild-dim); background: var(--omen-2); }
.rail .spacer { flex: 1; }
.rail .mark { font-family: var(--face-engraved); font-size: 13px; letter-spacing: .14em;
  text-transform: lowercase; color: var(--ink); padding: 2px 12px 14px;
  font-weight: 700; white-space: nowrap; }
.rail .mark b { color: var(--gild); font-weight: 700; }
.with-rail { margin-left: 178px; }
/* the chambers wing strip (v3.1): sideways nav across the sub-chambers,
   rendered by deck-ui.js from its ONE list, right under the floorbar */
.wing-strip { display: flex; gap: 2px; flex-wrap: wrap; align-items: center;
  padding: 8px 16px 0; }
.wing-strip a { font-family: var(--face-label); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-dim); text-decoration: none;
  padding: 5px 9px; border-bottom: 1px solid transparent; }
.wing-strip a:hover { color: var(--accent); }
.wing-strip a.active { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 860px) {
  .rail { position: static; width: auto; flex-direction: row; flex-wrap: wrap;
    border-right: none; border-bottom: 1px solid var(--line); }
  .with-rail { margin-left: 0; }
}
.watermark { position: fixed; right: 14px; bottom: 54px; z-index: 30;
  pointer-events: none; font-family: var(--face-label); font-size: 11px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gild);
  border: 1px dashed var(--gild-dim); padding: 5px 10px; opacity: .75;
  background: var(--omen-0); }

/* ── the wire (v3.1 looks): agent-facing how-to folds shut. Humans see a
   quiet clasp at the foot of the page; agents (and the curious) open it.
   Everything protocol-shaped on a game surface lives in here. ────────── */
details.wire { margin: 30px 0 8px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--omen-1); }
details.wire > summary { cursor: pointer; list-style: none; padding: 10px 14px;
  font-family: var(--face-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-dim); user-select: none; }
details.wire > summary::-webkit-details-marker { display: none; }
details.wire > summary::before { content: "⌁  "; color: var(--gild-dim); }
details.wire > summary:hover { color: var(--ink); }
details.wire[open] > summary { border-bottom: 1px solid var(--line); }
details.wire > .body { padding: 12px 14px; }
details.wire pre { margin: 0; }
details.wire .raw { display: block; margin-top: 10px; font-family: var(--face-mono);
  font-size: 11.5px; color: var(--ink-dim); }
details.wire .raw:hover { color: var(--accent); }

/* ── the empty-state block: icon plate + ≤20 words + one button ───────── */
.empty { text-align: center; padding: 44px 20px; }
.empty .glyph { width: 84px; height: 84px; margin: 0 auto 14px; opacity: .9; }
.empty p { color: var(--ink-dim); font-size: 14px; max-width: 380px;
  margin: 0 auto 16px; }
html[data-side="paper"] .empty p, html[data-side="floor"] .empty p { font-size: 16px; }

/* ── conduct pill (registry / rosters) ────────────────────────────────── */
.conduct { display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--face-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.conduct::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--filigree-dim); }
.conduct.good::before { background: var(--settle-green); }
.conduct.due::before { background: var(--gild); }
.conduct.breach { color: var(--magi-red); border-color: var(--magi-red); }
.conduct.breach::before { background: var(--magi-red); }

/* ── the drawer (agent detail; v2's per-agent deck lives here) ────────── */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 25;
  width: min(500px, 94vw); background: var(--omen-1);
  border-left: 1px solid var(--line); box-shadow: var(--shadow-window);
  padding: 18px; overflow-y: auto; }
.drawer[hidden] { display: none; }

/* ── the door beat: sepia dissolves to black, the beam sweeps once ────── */
#door-beat { position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: 0; background: var(--omen-0); }
#door-beat.playing { animation: doorfade var(--beat) ease-in-out forwards; }
#door-beat.playing::after { content: ""; position: absolute; inset: -20%;
  background: conic-gradient(from 0deg at 50% 12%, transparent 0 8deg,
    var(--engrave-beam) 14deg, transparent 22deg 360deg);
  animation: beamsweep var(--beat) ease-in-out forwards; }
@keyframes doorfade { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 1; } }
@keyframes beamsweep { from { transform: rotate(-40deg); } to { transform: rotate(50deg); } }

@media (prefers-reduced-motion: reduce) {
  .verdict.delib { animation: none; }
  dialog.menu-window[open] { animation: none; }
  #door-beat.playing, #door-beat.playing::after { animation: none; opacity: 0; }
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}
@media (max-width: 700px) { .triptych { grid-template-columns: 1fr; } }

/* ── the under-construction bar (deck-ui.js wireWip) ─────────────────────
   Sticky at the TOP, not fixed at the bottom: the stele taught us that a
   fixed bottom bar becomes furniture people stop seeing, and this one has
   to be read once. Inert — no dialog, no focus trap — because the working
   parts of a half-built page must stay usable. */
.wipbar { position: sticky; top: 0; z-index: 40;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 8px 20px; font-family: var(--face-mono); font-size: 11.5px;
  color: var(--ink); background: repeating-linear-gradient(135deg,
    var(--omen-1) 0 14px, rgba(201,162,39,0.10) 14px 28px);
  border-bottom: 1px solid var(--accent); }
.wipbar b { font-family: var(--face-label); letter-spacing: .16em;
  color: var(--accent); font-weight: 500; white-space: nowrap; }
.wipbar span { color: var(--ink-dim); }