/* ============================================================================
   Titan Reliquary · style layer (notes/agents/styles-20.md, 2026-10-10)
   Shared, reusable UI treatments for the token-only themes. A theme switches one on by listing it in its manifest `ui`
   (wings/themes/manifest.js); html[data-ui] carries the list (set before first paint in index.html, kept in sync by
   wings/themes/worlds.js). Every treatment reads the theme's own tokens, so one rule set serves many themes and no theme
   needs per-page selector overrides.
     paper     light page: dark instrument panels become a display case (--case-*), labels inside them paper again (--paper-*),
               solid accent fills get --on-gold, gradient text and terminal readouts are re-inked for a pale ground
     brutal    neo-brutalist chrome: --ui-bw borders in --ui-edge, hard offset shadows (--ui-hard), buttons press in
     comic     Ben-Day dot page (--ui-dot), marker-highlighted section headings (--comic-yellow)
     pixel     8-bit chrome: square corners, thick teal edges, offset drop shadows, pixel type for headings, CRT scanlines
     blueprint drafting grid on the page (--ui-grid, --ui-grid2), hairline technical frames, tracked uppercase headings
     clay      soft clay: big radii, puffy inner/outer shadows, pastel blobs on the page, pill buttons that squash when pressed
     board     departures board: tracked uppercase signage, split-flap seams across tiles, mono numerals
   Loaded last (after the wing sheets) so these rules win over component defaults. No layout: borders, radii, shadows,
   backgrounds, type case and spacing only. Motion stops under reduced motion and Motion Calm/Off.
   ========================================================================== */

/* ---------- 1. paper -------------------------------------------------------- */
html[data-ui~="paper"] :is(#market-ticker-tape, #exhibit, .museum-slab, #gallery-coverflow-wrap, .gallery-mode-switch,
  #vault-live-spot-ticker, .study-nav-pills, #atlas-svg-viewport, #atlas-coords-hud, #titan-world-atlas-wrap, .cf-flip-badge,
  .staging-binder-card, .album-binder-card) {
  --bg: var(--case-bg);
  --bg2: var(--case-bg2);
  --surface: var(--case-surface);
  --surface2: var(--case-surface2);
  --ink: var(--case-ink);
  --ink-soft: var(--case-muted);
  --muted: var(--case-muted);
  --faint: var(--case-faint);
  --cardmeta: var(--case-muted);
  --gold: var(--case-gold);
  --gold-soft: var(--case-gold-soft);
  --on-gold: var(--case-on-gold);
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.32);
  --focus: var(--case-gold-soft);
  --th-bg: var(--case-bg2);
  --sel-bg: var(--case-surface2);
  --ph-bg: var(--case-bg);
  --row-hover: rgba(255, 255, 255, 0.06);
  --ok: #86d296; --warn: #e6b84a; --bad: #f19a86;
  --text: var(--ink); --panel: var(--surface); --chip: var(--surface2); --missing: var(--faint);
  --border: var(--line); --gold-dim: var(--gold-deep); --danger: var(--bad);
  color: var(--ink);
}
/* styles/hall.css hands the ticker and the exhibit their parent's tokens back (`inherit`), which on paper is dark ink on a dark
   case: give them the case ink again, at the same specificity (this sheet loads later) */
html[data-ui~="paper"] #pane-hall :is(#market-ticker-tape, #exhibit) {
  --ink: var(--case-ink); --text: var(--case-ink); --muted: var(--case-muted); --gold: var(--case-gold); --gold-soft: var(--case-gold-soft);
}
html[data-ui~="paper"] .market-ticker-tape { background: linear-gradient(145deg, var(--case-surface), var(--case-bg)); border-color: rgba(255, 255, 255, 0.16); }
/* paper again: the museum label inside the exhibit case, the Study's binder cards and the atlas card */
html[data-ui~="paper"] :is(#exhibit .ex-info-placard, #exhibit .ex-p2-tether-bar, #pane-study .album-binder-card:not(.staging-binder-card),
  #pane-study #titan-world-atlas-wrap) {
  --bg: var(--paper-bg); --bg2: var(--paper-bg2); --surface: var(--paper-surface); --surface2: var(--paper-surface2);
  --ink: var(--paper-ink); --ink-soft: var(--paper-muted); --muted: var(--paper-muted); --faint: var(--paper-faint); --cardmeta: var(--paper-muted);
  --gold: var(--paper-gold); --gold-soft: var(--paper-gold-soft); --on-gold: var(--paper-on-gold);
  --line: rgba(0, 0, 0, 0.16); --line-strong: rgba(0, 0, 0, 0.38); --focus: var(--paper-gold-soft);
  --ok: #2f6b3a; --warn: #8a5a00; --bad: #a03024;
  --text: var(--ink); --panel: var(--surface); --chip: var(--surface2); --missing: var(--faint); --border: var(--line);
  color: var(--ink);
}
/* "Now exhibiting" can sit on the page or on the case depending on the width: give it its own case chip so it reads on both */
html[data-ui~="paper"] #exhibit .exhibit-kicker { display: inline-block; padding: 0.15em 0.55em; border-radius: 4px; background: var(--case-bg); color: var(--case-gold-soft); }
html[data-ui~="paper"] #pane-study .staging-binder-card { background: linear-gradient(135deg, var(--case-surface2) 0%, var(--case-bg) 100%) !important; }
html[data-ui~="paper"] #exhibit .ex-target-filename { background: rgba(0, 0, 0, 0.06); border-color: var(--line-strong); }
/* the headline value: ink-to-accent gradient text on paper */
html[data-ui~="paper"] #hero-grand { --ink: var(--paper-ink); --text: var(--paper-ink); --muted: var(--paper-muted); --gold: var(--paper-gold); --gold-soft: var(--paper-gold-soft); }
html[data-ui~="paper"] .hero-grand { background: linear-gradient(135deg, var(--paper-ink) 25%, var(--paper-gold) 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }
html[data-ui~="paper"] .vault-valuation-hub { background: linear-gradient(180deg, var(--paper-surface) 0%, var(--paper-bg2) 100%); border-color: var(--line-strong); box-shadow: var(--elev-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-ui~="paper"] .wordmark { color: var(--ink); -webkit-text-fill-color: currentColor; background: none; text-shadow: none; animation: none; }
html[data-ui~="paper"] .hero-glow { background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(0, 0, 0, 0.05), transparent 70%); }
/* solid accent fills: the accent is dark on a pale page, so the label is light */
html[data-ui~="paper"] :is(.term-mode-btn.active, .study-nav-pill.active, .spatial-close-btn:hover, .binder-btn-open:hover, .ex-ctrl-btn.active,
  .tray-tab.active, .tab.active, .lab-badge, .filter-ag.active) { color: var(--on-gold); }
html[data-ui~="paper"] :is(.atlas-cam-btn.active, .atlas-route-btn.active, .spatial-flip-btn) { color: var(--on-gold) !important; }
html[data-ui~="paper"] [style*="background:var(--gold)"][style*="color:#08090c"] { color: var(--on-gold) !important; }
/* readouts made for a dark page */
html[data-ui~="paper"] .term-live-badge { color: var(--ok); background: rgba(47, 107, 58, 0.12); border-color: rgba(47, 107, 58, 0.45); }
html[data-ui~="paper"] .term-delta.up { color: var(--ok); }
html[data-ui~="paper"] .term-delta.down { color: var(--bad); }
html[data-ui~="paper"] .world-table-count { color: var(--gold-soft); }
html[data-ui~="paper"] .badge-ag { background: #e3e6ea; border-color: #8f9ba4; color: #33404a; }
html[data-ui~="paper"] .asw-cell { color: #4f5f6b; }
html[data-ui~="paper"] .rain-btn[aria-pressed="true"], html[data-ui~="paper"] .rain-btn[aria-pressed="true"] .rain-label { color: #1f4a66; border-color: #4f7d99; background: #dbe8ee; }
html[data-ui~="paper"] .pc-await { background: rgba(255, 255, 255, 0.8); }
/* the display-case cards the Vault paints in midnight navy */
html[data-ui~="paper"] :is(.bullion-lot-card, .vault-dash-card, .vault-custody-metric, .vault-scenario-panel, .spot-ticker-card) {
  --ink: var(--case-ink); --text: var(--case-ink); --muted: var(--case-muted); --faint: var(--case-faint); --gold: var(--case-gold); --gold-soft: var(--case-gold-soft);
  background: linear-gradient(145deg, var(--case-surface), var(--case-bg)); border-color: rgba(255, 255, 255, 0.16); color: var(--ink);
}
/* translucent black washes turn to grey mud on paper: tint with ink instead */
html[data-ui~="paper"] :is(.world-table-controls, .silver-stack-bar-wrap) { background: rgba(0, 0, 0, 0.05); border-color: var(--line); }
html[data-ui~="paper"] .silver-stack-bar { background: rgba(0, 0, 0, 0.06); }
html[data-ui~="paper"] .atlas-footer-bar strong[style*="#06b6d4"] { color: #0b6b7d !important; }
html[data-ui~="paper"] .atlas-footer-bar strong[style*="#f43f5e"] { color: #b81f43 !important; }
html[data-ui~="paper"] .atlas-footer-bar strong[style*="#10b981"] { color: #0a7a56 !important; }

/* ---------- shared selector lists (written out per treatment: CSS has no variables for selectors) ----------
   surfaces: .hg-tile .wing-card .note-card .vault-valuation-hub .ex-info-placard .lab-banner .gx-tile .cf-placard .gf-finder .vx-sec .vx-lot
             .vx-wi-card .sheet-card .card .tile .album-card .latest-card .metal-tile .shoot-card .piece-card .hero-trust .scenario-card
   controls: .btn .sb-btn .ex-ctrl-btn .gf-preset .vx-chip .vx-btn .term-asset-btn .term-tf-btn .term-mode-btn .placard-inspect-btn .ss-btn */

/* ---------- 2. brutal ------------------------------------------------------- */
html[data-ui~="brutal"] :is(.hg-tile, .wing-card, .note-card, .vault-valuation-hub, .ex-info-placard, .lab-banner, .gx-tile, .cf-placard, .gf-finder,
  .vx-sec, .vx-lot, .vx-wi-card, .sheet-card, .card, .tile, .album-card, .latest-card, .metal-tile, .shoot-card, .piece-card, .hero-trust, .scenario-card) {
  border: var(--ui-bw, 2px) solid var(--ui-edge, var(--ink));
  border-radius: var(--radius, 0);
  box-shadow: var(--ui-hard, 4px 4px 0 var(--ink));
}
html[data-ui~="brutal"] :is(.btn, .sb-btn, .ex-ctrl-btn, .gf-preset, .vx-chip, .vx-btn, .term-asset-btn, .term-tf-btn, .term-mode-btn, .placard-inspect-btn, .ss-btn) {
  border: var(--ui-bw, 2px) solid var(--ui-edge, var(--ink));
  border-radius: var(--radius, 0);
  box-shadow: 3px 3px 0 var(--ui-edge, var(--ink));
  font-weight: 700;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
html[data-ui~="brutal"] :is(.btn, .sb-btn, .ex-ctrl-btn, .gf-preset, .vx-chip, .vx-btn, .term-asset-btn, .term-tf-btn, .term-mode-btn, .placard-inspect-btn, .ss-btn):hover {
  transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ui-edge, var(--ink));
}
html[data-ui~="brutal"] :is(.btn, .sb-btn, .ex-ctrl-btn, .gf-preset, .vx-chip, .vx-btn, .term-asset-btn, .term-tf-btn, .term-mode-btn, .placard-inspect-btn, .ss-btn):active {
  transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ui-edge, var(--ink));
}
html[data-ui~="brutal"] nav.wings { border-top: var(--ui-bw, 2px) solid var(--ui-edge, var(--ink)); box-shadow: 0 -3px 0 var(--ui-edge, var(--ink)); }
html[data-ui~="brutal"] :is(.sec-head h2, .wing-head h2, .vx-sec h2) { text-transform: uppercase; letter-spacing: 0.02em; }

/* ---------- 3. comic -------------------------------------------------------- */
html[data-ui~="comic"] body {
  background-image: radial-gradient(var(--ui-dot, rgba(0, 0, 0, 0.08)) 1.3px, transparent 1.8px);
  background-size: 9px 9px;
}
html[data-ui~="comic"] :is(.sec-head h2, .wing-head h2, .vx-sec h2) {
  display: inline; padding: 0 0.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(transparent 52%, var(--comic-yellow, #ffd400) 52%, var(--comic-yellow, #ffd400) 92%, transparent 92%);
  letter-spacing: 0.03em;
}
html[data-ui~="comic"] .wordmark { letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- 4. pixel -------------------------------------------------------- */
html[data-ui~="pixel"] body {
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
}
html[data-ui~="pixel"] :is(.hg-tile, .wing-card, .note-card, .vault-valuation-hub, .ex-info-placard, .lab-banner, .gx-tile, .cf-placard, .gf-finder,
  .vx-sec, .vx-lot, .vx-wi-card, .sheet-card, .card, .tile, .album-card, .latest-card, .metal-tile, .shoot-card, .piece-card, .hero-trust, .scenario-card) {
  border: var(--ui-bw, 3px) solid var(--ui-edge, #40e0d0);
  border-radius: 0;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55);
}
html[data-ui~="pixel"] :is(.btn, .sb-btn, .ex-ctrl-btn, .gf-preset, .vx-chip, .vx-btn, .term-asset-btn, .term-tf-btn, .term-mode-btn, .placard-inspect-btn, .ss-btn) {
  border: 3px solid var(--ui-edge, #40e0d0);
  border-radius: 0;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
html[data-ui~="pixel"] :is(.btn, .sb-btn, .ex-ctrl-btn, .gf-preset, .vx-chip, .vx-btn, .term-asset-btn, .term-tf-btn, .term-mode-btn, .placard-inspect-btn, .ss-btn):active {
  transform: translate(3px, 3px); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}
html[data-ui~="pixel"] :is(.sec-head h2, .wing-head h2, .vx-sec h2, .wordmark) {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; text-shadow: 3px 3px 0 var(--px-pink, #ff6bd6);
}
html[data-ui~="pixel"] nav.wings { border-top: 3px solid var(--ui-edge, #40e0d0); border-radius: 0; }

/* ---------- 5. blueprint ---------------------------------------------------- */
html[data-ui~="blueprint"] body {
  background-image:
    linear-gradient(var(--ui-grid, rgba(255, 255, 255, 0.07)) 1px, transparent 1px),
    linear-gradient(90deg, var(--ui-grid, rgba(255, 255, 255, 0.07)) 1px, transparent 1px),
    linear-gradient(var(--ui-grid2, rgba(255, 255, 255, 0.035)) 1px, transparent 1px),
    linear-gradient(90deg, var(--ui-grid2, rgba(255, 255, 255, 0.035)) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
html[data-ui~="blueprint"] :is(.hg-tile, .wing-card, .note-card, .vault-valuation-hub, .ex-info-placard, .lab-banner, .gx-tile, .cf-placard, .gf-finder,
  .vx-sec, .vx-lot, .vx-wi-card, .sheet-card, .card, .tile, .album-card, .latest-card, .metal-tile, .shoot-card, .piece-card, .hero-trust, .scenario-card) {
  border: 1px solid var(--ui-edge, rgba(255, 255, 255, 0.55));
  border-radius: var(--radius, 2px);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.025), 0 10px 26px rgba(0, 0, 0, 0.35);
}
html[data-ui~="blueprint"] :is(.btn, .sb-btn, .ex-ctrl-btn, .gf-preset, .vx-chip, .vx-btn, .term-asset-btn, .term-tf-btn, .term-mode-btn, .placard-inspect-btn, .ss-btn) {
  border: 1px solid var(--ui-edge, rgba(255, 255, 255, 0.55)); border-radius: var(--radius, 2px); letter-spacing: 0.06em; text-transform: uppercase;
}
html[data-ui~="blueprint"] :is(.sec-head h2, .wing-head h2, .vx-sec h2) { text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; }
html[data-ui~="blueprint"] .sec-head { border-bottom: 1px dashed var(--ui-edge, rgba(255, 255, 255, 0.55)); }
/* the atlas legend's inline route colours are made for a near-black page: lift them on blueprint blue */
html[data-ui~="blueprint"] .atlas-footer-bar strong[style*="#f43f5e"] { color: #ff9fb2 !important; }
html[data-ui~="blueprint"] .atlas-footer-bar strong[style*="#06b6d4"] { color: #7fe6f5 !important; }
html[data-ui~="blueprint"] .atlas-footer-bar strong[style*="#10b981"] { color: #7ff0c4 !important; }
html[data-ui~="blueprint"] .wordmark { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }

/* ---------- 6. clay --------------------------------------------------------- */
html[data-ui~="clay"] body {
  background-image:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--clay-pink, #f4b6c2) 55%, transparent) 0, transparent 26%),
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--clay-blue, #a8d8ea) 55%, transparent) 0, transparent 24%),
    radial-gradient(circle at 85% 88%, color-mix(in srgb, var(--clay-yellow, #ffe08a) 55%, transparent) 0, transparent 26%),
    radial-gradient(circle at 12% 82%, color-mix(in srgb, var(--clay-green, #b8e0c2) 55%, transparent) 0, transparent 24%);
  background-attachment: fixed;
}
html[data-ui~="clay"] :is(.hg-tile, .wing-card, .note-card, .vault-valuation-hub, .ex-info-placard, .lab-banner, .gx-tile, .cf-placard, .gf-finder,
  .vx-sec, .vx-lot, .vx-wi-card, .sheet-card, .card, .tile, .album-card, .latest-card, .metal-tile, .shoot-card, .piece-card, .hero-trust, .scenario-card) {
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius, 20px);
  box-shadow: 0 12px 26px rgba(120, 80, 60, 0.14), 0 2px 5px rgba(120, 80, 60, 0.10),
    inset 0 -6px 12px rgba(120, 80, 60, 0.07), inset 0 6px 12px rgba(255, 255, 255, 0.75);
}
html[data-ui~="clay"] :is(.btn, .sb-btn, .ex-ctrl-btn, .gf-preset, .vx-chip, .vx-btn, .term-asset-btn, .term-tf-btn, .term-mode-btn, .placard-inspect-btn, .ss-btn) {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 5px 12px rgba(120, 80, 60, 0.16), inset 0 -3px 6px rgba(120, 80, 60, 0.10), inset 0 3px 6px rgba(255, 255, 255, 0.8);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
html[data-ui~="clay"] :is(.btn, .sb-btn, .ex-ctrl-btn, .gf-preset, .vx-chip, .vx-btn, .term-asset-btn, .term-tf-btn, .term-mode-btn, .placard-inspect-btn, .ss-btn):active {
  transform: scale(0.96, 0.92); box-shadow: 0 2px 5px rgba(120, 80, 60, 0.16), inset 0 3px 6px rgba(120, 80, 60, 0.14);
}
html[data-ui~="clay"] nav.wings { border-radius: 26px; }

/* ---------- 7. board -------------------------------------------------------- */
html[data-ui~="board"] :is(.sec-head h2, .wing-head h2, .vx-sec h2, .wordmark) { text-transform: uppercase; letter-spacing: 0.12em; }
html[data-ui~="board"] :is(.hg-tile, .term-stat-box, .metal-tile, .vx-kv) {
  background-image: linear-gradient(transparent calc(50% - 1px), rgba(0, 0, 0, 0.6) calc(50% - 1px), rgba(0, 0, 0, 0.6) calc(50% + 1px), transparent calc(50% + 1px));
  border-radius: var(--radius, 6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 0 #000;
}
html[data-ui~="board"] :is(.hg-tile, .term-stat-box, .metal-tile) :is(b, strong, .hg-n, .hg-val) { font-family: var(--mono); }
html[data-ui~="board"] :is(.btn, .sb-btn, .ex-ctrl-btn, .gf-preset, .vx-chip, .vx-btn, .term-asset-btn, .term-tf-btn, .term-mode-btn, .placard-inspect-btn, .ss-btn) {
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ---------- motion off ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html[data-ui] :is(.btn, .sb-btn, .ex-ctrl-btn, .gf-preset, .vx-chip, .vx-btn, .term-asset-btn, .term-tf-btn, .term-mode-btn, .placard-inspect-btn, .ss-btn) { transition: none; }
}
html[data-motion="calm"][data-ui] :is(.btn, .sb-btn, .ex-ctrl-btn, .gf-preset, .vx-chip, .vx-btn, .term-asset-btn, .term-tf-btn, .term-mode-btn, .placard-inspect-btn, .ss-btn),
html[data-motion="off"][data-ui] :is(.btn, .sb-btn, .ex-ctrl-btn, .gf-preset, .vx-chip, .vx-btn, .term-asset-btn, .term-tf-btn, .term-mode-btn, .placard-inspect-btn, .ss-btn) { transition: none; }