/* ═══════════════════════════════════════════════════════════════════════════
   STAROSPHERE.CSS — the one shared sheet
   The single source every Starosphere surface (kit · OS · command · arrival ·
   pilot) links. Cross-surface consistency stops being a discipline and becomes
   a lookup. Structure:
     LAYER 0  RAW TOKENS      — the only place a literal (hex/px/ms) may live.
     LAYER 1  REGISTER TOKENS — semantic aliases. Day on :root; a register flip
                                is a TOKEN flip: [data-register="forge"] remaps
                                the SAME names to the night set. No component
                                carries a register-specific rule.
     LAYER 2  BASE
     LAYER 3  COMPONENTS       — zero literals; every value is a var().
   Law: zero-radius everywhere · one act per view (the act is a promise) ·
   Plex Mono is all chrome · elevation is an engraved hairline, never a
   drop-shadow idiom. Mainstar binder, consumed verbatim.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ LAYER 0 · RAW TOKENS (literals live ONLY here) ═══ */
:root {
  /* grounds & inks — Mainstar cut, ratified 2026-07-07 */
  --paper:#F5EEDD; --paper-2:#EBE1C8; --paper-3:#E0D4B6;
  --ink:#2C2118; --ink-soft:#5A4A38; --ink-faint:#8A785E;
  --line:#B9A886; --line-soft:#C9BA9B;
  /* the one act */
  --cad:#DD5A2A; --cad-deep:#B8461E; --cad-on:#FBF3E6; --stamp:#A62A1D;
  /* craft tones — status only, never the act */
  --teal:#2E6E68; --rust:#9A5330; --seaglass:#9FBDAF; --warn:#C98A2E;
  /* NIGHT — the Forge register */
  --night:#0a0806; --night-2:#15110d; --night-line:#2c241d;
  --ember:#ff6a1a; --ember-hi:#ff7c33; --night-ink:#f4efe9; --night-soft:#9d9189;
  /* Forge status companions — RATIFIED into the binder 2026-07-08 (kit-pilot audit #5);
     derived for legibility on the hull, canonical from here forward. */
  --night-teal:#63a89d; --night-warn:#e0a24a; --night-stamp:#e0503f;
  /* screen temperatures — RATIFIED 2026-07-08 (kit-pilot audit #3); were inline literals */
  --paper-work:#F3E3C4; --paper-needs:#F6DCC9;
  --night-work:#1a130b; --night-needs:#1f1108;
  /* washes & filaments (act-toned; the only rgba() the sheet permits — never rgba(0,0,0)) */
  --wash-needs-day:rgba(221,90,42,.06); --wash-needs-night:rgba(255,106,26,.08);
  --ember-glow:0 0 14px -3px rgba(255,106,26,.55);
  --ember-ring-glow:0 0 0 1px var(--ember),0 0 16px -4px rgba(255,106,26,.6);
  --press-day:inset 0 2px 0 rgba(44,33,24,.16);
  --press-day-strong:inset 0 2px 0 rgba(44,33,24,.28);
  --press-night:inset 0 2px 0 rgba(10,8,6,.5);
  /* type */
  --serif:"Fraunces",Georgia,serif;
  --ui:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  /* motion */
  --mo-snap:120ms; --mo-settle:240ms; --mo-arrive:480ms; --mo-unfold:720ms; --mo-stagger:60ms;
  /* ambient loop tempos — slow, living; tokenized so the component layer stays literal-free */
  --mo-breathe:2100ms; --mo-write:1900ms; --mo-pulse:1400ms; --mo-blink:1050ms;
  --ease-settle:cubic-bezier(0.22,0.61,0.36,1); /* Cold Press Settle — the signature */
  --ease-arrive:cubic-bezier(0.16,1,0.3,1);
  --ease-tap:cubic-bezier(0.4,0,0.2,1);
  /* elevation — engraved hairline + faint warm cast, never a drop-shadow idiom */
  --lift:0 1px 0 var(--line),0 14px 34px -20px rgba(44,33,24,.35);
}

/* ═══ LAYER 1 · REGISTER TOKENS — semantic aliases (day = :root default) ═══ */
:root {
  --surface:var(--paper); --surface-2:var(--paper-2); --surface-3:var(--paper-3);
  --text:var(--ink); --text-soft:var(--ink-soft); --text-faint:var(--ink-faint);
  --border:var(--line); --border-soft:var(--line-soft); --border-strong:var(--ink);
  --act:var(--cad); --act-deep:var(--cad-deep); --act-on:var(--cad-on); --act-hi:var(--cad-deep);
  --act-glow:none; --act-ring-glow:0 0 0 1px var(--act);
  --wash-needs:var(--wash-needs-day);
  --positive:var(--teal); --working:var(--warn); --working-ink:var(--rust); --destructive:var(--stamp);
  --screen:var(--paper-2); --screen-work:var(--paper-work); --screen-needs:var(--paper-needs);
  --btn-hover-bg:var(--paper-3); --press:var(--press-day); --press-strong:var(--press-day-strong);
  --elev:var(--lift);
  --focus-ring:var(--ink);
}
/* THE REGISTER FLIP — same names, night set. Put on <html>/<body> for a full-page
   forge surface, or on any subtree; every component below inherits it untouched. */
[data-register="forge"] {
  --surface:var(--night); --surface-2:var(--night-2); --surface-3:var(--night-2);
  --text:var(--night-ink); --text-soft:var(--night-soft); --text-faint:var(--night-soft);
  --border:var(--night-line); --border-soft:var(--night-line); --border-strong:var(--night-line);
  --act:var(--ember); --act-deep:var(--ember); --act-on:var(--night); --act-hi:var(--ember-hi);
  --act-glow:var(--ember-glow); --act-ring-glow:var(--ember-ring-glow);
  --wash-needs:var(--wash-needs-night);
  --positive:var(--night-teal); --working:var(--night-warn); --working-ink:var(--night-warn); --destructive:var(--night-stamp);
  --screen:var(--night); --screen-work:var(--night-work); --screen-needs:var(--night-needs);
  --btn-hover-bg:var(--night-2); --press:var(--press-night); --press-strong:var(--press-night);
  --elev:none;
  --focus-ring:var(--night-ink);
}

/* ═══ LAYER 2 · BASE ═══ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; border-radius:0 !important; }
html { scroll-behavior:smooth; }
body {
  background:var(--surface); color:var(--text);
  font:500 16px/1.65 var(--ui);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection { background:var(--act); color:var(--act-on); }

/* ═══ LAYER 3 · SHARED COMPONENTS (zero literals — every value is a token) ═══ */

/* ── site header — the thin masthead every page reuses ── */
.site-header {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:52px; padding:0 24px;
  background:var(--surface); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:40;
}
.site-header .wordmark {
  display:inline-flex; align-items:baseline; gap:8px;
  font:600 15px var(--serif); letter-spacing:.01em; color:var(--text); text-decoration:none;
  transition:color var(--mo-snap) var(--ease-tap);
}
.site-header .wordmark .dia { font-size:9px; color:var(--text-faint); transform:translateY(-2px); }
.site-header .wordmark:hover { color:var(--text-soft); }
.site-header .wordmark:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; }
.site-header .h-note { font:600 10px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); }
@media (max-width:520px){ .site-header{ padding:0 16px; } .site-header .h-note{ display:none; } }

/* ── kicker — the mono chrome voice ── */
.kicker { font:600 10px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); }
.kicker.act { color:var(--act); }

/* ── door / door-fill / door.quiet — the button family ── */
.door, .door-fill {
  display:inline-flex; align-items:center; gap:8px;
  font:600 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; text-decoration:none;
  transition:transform var(--mo-snap) var(--ease-tap),
             background var(--mo-settle) var(--ease-settle),
             border-color var(--mo-settle) var(--ease-settle);
}
.door {
  color:var(--text); background:transparent; border:1px solid var(--border-strong); padding:11px 18px;
}
.door:hover { transform:translateY(-1px); background:var(--btn-hover-bg); }
.door:active { transform:translateY(0); background:var(--btn-hover-bg); box-shadow:var(--press); }
.door:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
/* quiet peer — promoted from the decision card's local .dopt.quiet (kit-pilot audit #20) */
.door.quiet { border-color:var(--border); color:var(--text-soft); }
.door.quiet:hover { color:var(--text); }
.door-fill { /* the one act — cadmium by day, ember by night; ONE per view */
  color:var(--act-on); background:var(--act); border:1px solid var(--act-deep); padding:12px 20px;
  box-shadow:var(--act-glow);
}
.door-fill:hover { transform:translateY(-1px); background:var(--act-hi); }
.door-fill:active { transform:translateY(0); box-shadow:var(--press-strong); }
.door-fill:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
/* disabled = dashed structural signal (never opacity alone), reason sits beside it */
.door[disabled], .door-fill[disabled] {
  cursor:not-allowed; transform:none !important; box-shadow:none !important;
  border-style:dashed; background:transparent; color:var(--text-soft); border-color:var(--border);
}
.door-reason { font:500 9px/1.4 var(--mono); letter-spacing:.02em; color:var(--text-faint); max-width:22ch; }

/* ── journal-line — the world's memory, one row; 2px semantic left rule ── */
.journal-line {
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:baseline;
  border-left:2px solid var(--border); background:var(--surface);
  padding:9px 14px 9px 13px; width:100%; max-width:420px;
  font:500 13.5px/1.45 var(--serif); color:var(--text-soft);
}
.journal-line .jw { font:600 9.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); grid-column:1; align-self:center; }
.journal-line .jt { grid-column:2; }
.journal-line .jt em { color:var(--text); font-style:normal; }
.journal-line .jm { grid-column:3; font:500 9.5px var(--mono); letter-spacing:.1em; color:var(--text-faint); align-self:center; }
.journal-line.working { border-left-color:var(--working); }
.journal-line.working .jw { color:var(--working-ink); }
.journal-line.working .jt em { color:var(--text); }
.journal-line.success { border-left-color:var(--positive); }
.journal-line.success .jw { color:var(--positive); }
.journal-line.needs-you { border-left-color:var(--act); background:var(--wash-needs); }
.journal-line.needs-you .jw { color:var(--act); }
.journal-line.needs-you .jt { color:var(--text); }
.journal-line.destructive { border-left-color:var(--destructive); }
.journal-line.destructive .jw { color:var(--destructive); }
.journal-line.fresh { animation:st-settle var(--mo-settle) var(--ease-settle); }
@keyframes st-settle { from { transform:translateY(5px); opacity:0; } to { transform:translateY(0); opacity:1; } }

/* ── registration cross — 1px stroke, 9px, centered on the corner, ink by default,
     act ONLY under attention/focus (kit-pilot audit #13; checklist class 1) ── */
.reg { position:absolute; width:9px; height:9px; pointer-events:none; z-index:3; }
.reg::before, .reg::after { content:""; position:absolute; background:var(--text); }
.reg::before { width:9px; height:1px; top:4px; }   /* horizontal arm */
.reg::after  { width:1px; height:9px; left:4px; }  /* vertical arm  */
.reg.tl{ top:-4.5px; left:-4.5px; } .reg.tr{ top:-4.5px; right:-4.5px; }
.reg.bl{ bottom:-4.5px; left:-4.5px; } .reg.br{ bottom:-4.5px; right:-4.5px; }
.attn .reg::before, .attn .reg::after,
.focused .reg::before, .focused .reg::after { background:var(--act); }

/* ── world-tile — one sealed world, one pane; state by light temperature ── */
.world-tile {
  width:150px; border:1px solid var(--border); background:var(--surface-3);
  cursor:pointer; position:relative; text-align:left; display:block; padding:0;
  transition:transform var(--mo-snap) var(--ease-tap), border-color var(--mo-settle) var(--ease-settle);
}
.world-tile:hover { transform:translateY(-2px); }
.world-tile:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; }
.world-tile .screen { height:92px; position:relative; overflow:hidden; padding:11px 11px 0; background:var(--screen); border-bottom:1px solid var(--border); }
.world-tile .bar { height:6px; background:var(--border); margin-bottom:6px; }
.world-tile .bar.a { width:74%; } .world-tile .bar.b { width:52%; } .world-tile .bar.c { width:63%; }
/* two-row flag: name row + status row — longest label never wraps/collides (audit #9) */
.world-tile .flag { padding:7px 10px 8px; display:flex; flex-direction:column; gap:3px; }
.world-tile .flag .nm { font:600 9.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.world-tile .flag .st { display:inline-flex; align-items:center; gap:5px; font:400 9px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); white-space:nowrap; }
.world-tile.idle .screen { background:var(--screen); }
.world-tile.working { border-color:var(--working); }
.world-tile.working .screen { background:var(--screen-work); }
.world-tile.working .bar.a { background:var(--working); }
.world-tile.working .flag .st { color:var(--working-ink); }
.world-tile.working .cursor { position:absolute; bottom:16px; left:11px; width:16px; height:5px; background:var(--act); animation:wt-write var(--mo-write) var(--ease-settle) infinite; }
@keyframes wt-write { 0%{ transform:translateX(0);} 50%{ transform:translateX(64px);} 100%{ transform:translateX(0);} }
.world-tile.needs-you { border-color:var(--act); box-shadow:var(--act-ring-glow); }
.world-tile.needs-you .screen { background:var(--screen-needs); }
.world-tile.needs-you .flag .nm { color:var(--act); }
.world-tile.needs-you .flag .st { color:var(--act); font-weight:600; }
.world-tile.needs-you .flag .st .pip { width:7px; height:7px; background:var(--act); transform:rotate(45deg); }
.world-tile.needs-you .beacon { position:absolute; top:-7px; right:-7px; width:11px; height:11px; background:var(--act); transform:rotate(45deg); z-index:2; }

/* ── instrument-bar — the reading across the top; ALL CLEAR is a stated calm ── */
.instrument-wrap { min-width:0; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.instrument-bar {
  display:flex; align-items:stretch; border:1px solid var(--border-strong);
  background:var(--surface); font:500 11px var(--mono); letter-spacing:.08em; color:var(--text-soft);
  text-transform:uppercase; width:max-content; min-width:100%;
}
.instrument-bar .seg { display:flex; align-items:center; gap:7px; padding:9px 14px; border-right:1px solid var(--border); white-space:nowrap; }
.instrument-bar .seg:last-child { border-right:none; }
.instrument-bar .seg b { color:var(--text); font-weight:600; }
.instrument-bar .seg.time { color:var(--text); }
.instrument-bar .seg.attn { margin-left:auto; background:var(--act); color:var(--act-on); border-right:none; }
.instrument-bar .seg.attn b { color:var(--act-on); }
.instrument-bar .seg.attn .pip { width:7px; height:7px; background:var(--act-on); transform:rotate(45deg); }
.instrument-bar .seg.attn.clear { background:var(--surface-2); color:var(--positive); }
.instrument-bar .seg.attn.clear .pip { background:var(--positive); transform:none; }
.instrument-bar .seg.attn.clear b { color:var(--positive); }
/* stale / awaiting-data state for the live-bind pass (audit #17) */
.instrument-bar.stale { color:var(--text-faint); }
.instrument-bar.stale .seg b { color:var(--text-faint); }
.instrument-bar.stale .seg.attn { background:var(--surface-2); color:var(--text-faint); }
.instrument-bar.stale .seg.attn .pip { background:var(--text-faint); animation:ib-pulse var(--mo-pulse) var(--ease-settle) infinite; }
@keyframes ib-pulse { 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

/* ── frame — the general container; engraved hairline + faint warm cast ── */
.frame { border:1px solid var(--border); background:var(--surface-2); box-shadow:var(--elev); }
.frame .fbody { padding:20px 22px; font:500 14px/1.6 var(--ui); color:var(--text-soft); }
.frame .fbody strong { color:var(--text); }
.frame .caption { font:500 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); padding:8px 14px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:10px; }

/* ── reg-window — the app window, the sphere's signature chrome ── */
.reg-window { position:relative; border:1px solid var(--border-strong); background:var(--surface); box-shadow:var(--elev); }
.reg-window .titlebar { display:flex; align-items:baseline; gap:10px; padding:10px 14px 9px; border-bottom:1px solid var(--border-strong); }
.reg-window .titlebar .app { font:600 9.5px var(--mono); letter-spacing:.18em; color:var(--text-faint); }
.reg-window.focused .titlebar .app { color:var(--act); }
.reg-window .titlebar .title { font:500 italic 15px var(--serif); color:var(--text); }
.reg-window .titlebar .driver { margin-left:auto; font:500 9.5px var(--mono); letter-spacing:.1em; color:var(--text-faint); text-transform:uppercase; }
.reg-window .win-body { padding:16px 18px; font:500 13.5px/1.6 var(--ui); color:var(--text-soft); }
.reg-window .win-body strong { color:var(--text); }
.reg-window.arrive { animation:st-arrive var(--mo-arrive) var(--ease-arrive); }
@keyframes st-arrive { from { transform:translateY(-22px) scale(.94); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }

/* ── form controls — inputs / textarea / select / check / labels ── */
.field-label { display:block; font:600 9.5px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); margin-bottom:7px; }
.field { display:block; width:100%; max-width:320px; font:500 16px var(--ui); color:var(--text); background:var(--surface); border:1px solid var(--border); padding:11px 13px; transition:border-color var(--mo-settle) var(--ease-settle); }
.field::placeholder { color:var(--text-faint); }
.field:hover { border-color:var(--text-soft); }
.field:focus, .field:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; border-color:var(--border-strong); }
.field.filled { border-color:var(--text-soft); }
.field:disabled, .field[disabled] { cursor:not-allowed; border-style:dashed; color:var(--text-faint); background:var(--surface-2); }
.field.err { border-color:var(--destructive); }
.field.ok { border-color:var(--positive); }
textarea.field { min-height:88px; resize:vertical; line-height:1.55; font-family:var(--ui); }
.errline { font:500 11px/1.55 var(--mono); color:var(--destructive); margin-top:6px; max-width:36ch; letter-spacing:.02em; }
.okline { font:500 11px/1.55 var(--mono); color:var(--positive); margin-top:6px; letter-spacing:.02em; }
.field-foot { display:flex; justify-content:space-between; gap:10px; margin-top:6px; max-width:320px; }
.char-count { font:500 9.5px var(--mono); letter-spacing:.08em; color:var(--text-faint); }
.char-count.over { color:var(--destructive); }
/* select — mono caret, no UA chrome */
.select { position:relative; display:inline-block; max-width:320px; width:100%; }
.select select.field { appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer; }
.select::after { content:""; position:absolute; right:14px; top:50%; width:7px; height:7px; border-right:1px solid var(--text-soft); border-bottom:1px solid var(--text-soft); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
/* checkbox / radio — structural, act check */
.check { display:inline-flex; align-items:flex-start; gap:9px; font:500 13.5px/1.4 var(--ui); color:var(--text); cursor:pointer; }
.check input { position:absolute; opacity:0; width:0; height:0; }
.check .box { flex:none; width:16px; height:16px; border:1px solid var(--border-strong); background:var(--surface); position:relative; margin-top:2px; transition:border-color var(--mo-snap) var(--ease-tap); }
.check.radio .box { border-radius:50% !important; }
.check input:checked + .box { border-color:var(--act); }
.check input:checked + .box::after { content:""; position:absolute; inset:3px; background:var(--act); }
.check.radio input:checked + .box::after { border-radius:50% !important; }
.check input:focus-visible + .box { outline:2px solid var(--focus-ring); outline-offset:2px; }

/* ── state vocabulary chips — the canon five, no synonyms ── */
.vchip { display:inline-flex; align-items:center; gap:7px; font:600 9.5px var(--mono); letter-spacing:.16em; text-transform:uppercase; padding:6px 11px; border:1px solid currentColor; }
.vchip .dot { width:7px; height:7px; background:currentColor; }
.vchip.working { color:var(--working-ink); }
.vchip.working .dot { animation:vc-breathe var(--mo-breathe) var(--ease-settle) infinite; }
.vchip.idle { color:var(--text-faint); }
.vchip.needs-you { color:var(--act); }
.vchip.needs-you .dot { transform:rotate(45deg); }
.vchip.all-clear { color:var(--positive); }
.vchip.draft-ready { color:var(--text-soft); } /* quiet tier in BOTH registers (audit #16) */
@keyframes vc-breathe { 0%,100%{ opacity:1; } 50%{ opacity:.32; } }

/* ── agent-mark — the crew monogram ── */
.agent-mark { display:inline-flex; align-items:center; gap:9px; }
.agent-mark .mono-badge { flex:none; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border-strong); background:var(--surface-2); font:600 11px var(--mono); letter-spacing:.02em; color:var(--text); }
.agent-mark.working .mono-badge { border-color:var(--working); color:var(--working-ink); }
.agent-mark.needs-you .mono-badge { border-color:var(--act); color:var(--act); }
.agent-mark .who { font:600 9.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--text-soft); }

/* ── tabs ── */
.tabs { display:flex; gap:0; border-bottom:1px solid var(--border); }
.tab { font:600 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); background:transparent; border:none; padding:11px 16px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--mo-snap) var(--ease-tap); }
.tab:hover { color:var(--text); }
.tab.on { color:var(--text); border-bottom-color:var(--text); } /* current = ink, not the act (accent stays a promise) */
.tab:focus-visible { outline:2px solid var(--focus-ring); outline-offset:-2px; }

/* ── breadcrumb ── */
.crumbs { display:flex; align-items:center; gap:9px; flex-wrap:wrap; font:600 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.crumbs a { color:var(--text-soft); text-decoration:none; }
.crumbs a:hover { color:var(--text); }
.crumbs .sep { color:var(--border); }
.crumbs .here { color:var(--text); }

/* ── data table ── */
.dtable { width:100%; border:1px solid var(--border); border-collapse:collapse; background:var(--surface); }
.dtable th { font:600 9px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); text-align:left; padding:9px 14px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.dtable td { font:500 13px var(--ui); color:var(--text-soft); padding:10px 14px; border-bottom:1px solid var(--border-soft); }
.dtable td strong { color:var(--text); }
.dtable tr:last-child td { border-bottom:none; }
.dtable td .mono-cell { font:500 11px var(--mono); letter-spacing:.06em; color:var(--text-faint); }

/* ── pagination ── */
.pager { display:inline-flex; border:1px solid var(--border); }
.pager button { font:600 10px var(--mono); letter-spacing:.1em; color:var(--text-soft); background:var(--surface); border:none; border-right:1px solid var(--border); padding:8px 13px; cursor:pointer; transition:color var(--mo-snap) var(--ease-tap), background var(--mo-snap) var(--ease-tap); }
.pager button:last-child { border-right:none; }
.pager button:hover:not(:disabled):not(.on) { background:var(--btn-hover-bg); }
.pager button.on { color:var(--surface); background:var(--text); } /* current page = ink fill, not the act */
.pager button:disabled { color:var(--text-faint); cursor:not-allowed; border-style:dashed; }
.pager button:focus-visible { outline:2px solid var(--focus-ring); outline-offset:-2px; }

/* ── tooltip ── */
.tip { position:relative; display:inline-flex; }
.tip .tip-bubble { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); white-space:nowrap; font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--act-on); background:var(--text); border:1px solid var(--border-strong); padding:6px 10px; opacity:0; pointer-events:none; transition:opacity var(--mo-snap) var(--ease-tap); z-index:50; }
.tip .tip-bubble::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--text); }
.tip:hover .tip-bubble, .tip:focus-within .tip-bubble { opacity:1; }

/* ── toast / notification ── */
.toast { display:flex; align-items:flex-start; gap:12px; max-width:380px; border:1px solid var(--border); border-left:2px solid var(--positive); background:var(--surface-2); box-shadow:var(--elev); padding:12px 15px; }
.toast.needs-you { border-left-color:var(--act); }
.toast.destructive { border-left-color:var(--destructive); }
.toast .t-title { font:600 9.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:4px; }
.toast .t-body { font:500 13px/1.5 var(--ui); color:var(--text); }
.toast .t-close { margin-left:auto; font:600 12px var(--mono); color:var(--text-faint); background:none; border:none; cursor:pointer; line-height:1; padding:2px 4px; }
.toast .t-close:hover { color:var(--text); }

/* ── skeleton / loading — opacity pulse only (transform+opacity law) ── */
.skel { background:var(--surface-2); border:1px solid var(--border); animation:skel-pulse var(--mo-pulse) var(--ease-settle) infinite; }
.skel.bar { height:10px; }
.skel.line { height:13px; margin-bottom:9px; }
.skel.w-40{ width:40%; } .skel.w-60{ width:60%; } .skel.w-80{ width:80%; }
@keyframes skel-pulse { 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

/* ── empty-state ── */
.empty { border:1px dashed var(--border); background:var(--surface); padding:34px 26px; text-align:center; }
.empty .e-mark { font:600 10px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); }
.empty .e-title { font:500 18px var(--serif); color:var(--text); margin-top:10px; }
.empty .e-body { font:500 13px/1.6 var(--ui); color:var(--text-soft); margin-top:6px; max-width:44ch; margin-left:auto; margin-right:auto; }

/* ── modal + scrim ── */
.scrim { position:fixed; inset:0; background:var(--wash-needs); backdrop-filter:none; display:flex; align-items:center; justify-content:center; padding:24px; z-index:60; }
.scrim[hidden] { display:none; }
.modal { position:relative; width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border-strong); box-shadow:var(--lift); }
.modal .m-head { display:flex; align-items:baseline; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border-strong); }
.modal .m-head .m-app { font:600 9.5px var(--mono); letter-spacing:.18em; color:var(--text-faint); }
.modal .m-head .m-title { font:500 italic 16px var(--serif); color:var(--text); }
.modal .m-head .m-close { margin-left:auto; font:600 13px var(--mono); color:var(--text-faint); background:none; border:none; cursor:pointer; line-height:1; }
.modal .m-head .m-close:hover { color:var(--text); }
.modal .m-body { padding:18px; font:500 14px/1.6 var(--ui); color:var(--text-soft); }
.modal .m-body strong { color:var(--text); }
.modal .m-foot { display:flex; justify-content:flex-end; gap:10px; padding:0 18px 18px; }

/* ── decision-card — the one place the owner chooses (split-truth in one part) ── */
.decision-card { position:relative; border:1px solid var(--border-strong); background:var(--surface); box-shadow:var(--elev); }
.decision-card .dhead { background:var(--act); color:var(--act-on); padding:10px 18px; font:600 10px var(--mono); letter-spacing:.18em; display:flex; justify-content:space-between; align-items:center; transition:background var(--mo-settle) var(--ease-settle), color var(--mo-settle) var(--ease-settle); }
.decision-card .dbody { padding:20px 22px 6px; }
.decision-card .dwho { font:500 9.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-bottom:11px; }
.decision-card .dq { font:500 18px/1.4 var(--serif); color:var(--text); }
.decision-card .dctx { margin-top:10px; font:500 italic 13px/1.55 var(--ui); color:var(--text-soft); }
.decision-card .dctx .ref { font:500 11px var(--mono); font-style:normal; color:var(--text); background:var(--surface-2); border:1px solid var(--border); padding:1px 5px; }
.decision-card .dopts { padding:14px 22px 22px; display:flex; flex-direction:column; gap:8px; }
.decision-card .dopt { display:flex; justify-content:space-between; align-items:baseline; gap:12px; text-align:left; border:1px solid var(--border-strong); background:var(--surface); padding:11px 14px; font:500 13.5px var(--serif); color:var(--text); cursor:pointer; transition:background var(--mo-snap) var(--ease-tap); }
.decision-card .dopt .key { font:500 9.5px var(--mono); letter-spacing:.1em; color:var(--text-faint); }
.decision-card .dopt:hover { background:var(--screen-needs); }
.decision-card .dopt:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.decision-card .dopt.primary { background:var(--act); color:var(--act-on); border-color:var(--act-deep); box-shadow:var(--act-glow); }
.decision-card .dopt.primary .key { color:var(--act-on); }
.decision-card .dopt.primary:hover { background:var(--act-hi); }
.decision-card .dopt.quiet { border-color:var(--border); color:var(--text-soft); }
.decision-card .doutcome { padding:0 22px 20px; display:none; }
.decision-card.resolved .doutcome { display:block; }
.decision-card.resolved .dopts { display:none; }
/* on resolve the card cools: header + crosses lose the act (audit #14, #13) */
.decision-card.resolved .dhead { background:var(--surface-2); color:var(--positive); }
.decision-card.resolved .reg::before, .decision-card.resolved .reg::after { background:var(--text-faint); }
.decision-card .doutcome .oline { border-top:1px solid var(--border); padding-top:14px; font:500 14px/1.6 var(--serif); color:var(--text); }
.decision-card .doutcome .oline .caret { display:inline-block; width:8px; height:15px; background:var(--act); vertical-align:-2px; animation:st-blink var(--mo-blink) steps(1) infinite; }
@keyframes st-blink { 50%{ opacity:0; } }
/* the paired journal — a real component in whatever register it sits in (audit #7b) */
.dcard-journal { border:1px solid var(--border); background:var(--surface-2); }
.dcard-journal .jh { padding:11px 16px; border-bottom:1px solid var(--border); font:500 italic 15px var(--serif); color:var(--text); display:flex; justify-content:space-between; align-items:baseline; }
.dcard-journal .jh .sub { font:600 9px var(--mono); letter-spacing:.14em; color:var(--text-faint); font-style:normal; }
.dcard-journal .jbody { padding:10px 0; display:flex; flex-direction:column; gap:2px; }
.dcard-journal .journal-line { max-width:none; margin:0; background:var(--surface-2); }
.dcard-journal .jfoot { padding:10px 16px; border-top:1px solid var(--border); font:600 9px var(--mono); letter-spacing:.14em; color:var(--text-faint); }
.dcard-journal .jfoot.clear { color:var(--positive); }

/* ── reduced motion: final states WITH their evidence, never calm-with-proof-missing ── */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
  .world-tile.working .cursor { display:none; }
  .decision-card .doutcome .oline .caret { animation:none; opacity:1; }
}