/* FOOM pixel UI theme — tokens, base, and reusable components.
   Colors come from the master palette (src/art/palette.js, docs/ART.md §2).
   Pixel borders use stacked box-shadows (notched corners, no border-image).
   Fonts: 'FoomPixel' at multiples of 8px, 'FoomPixelSmall' at multiples of 6px (ART.md §8). */

:root {
  /* palette */
  --ink: #0b0c14; --n1: #151827; --n2: #212639; --n3: #313952; --n4: #46506e; --n5: #5f6b8b;
  --n6: #8189a8; --n7: #aab2c9; --n8: #d1d6e4; --n9: #f3f5fb;
  --umber: #2a2120; --cream: #f4ecd6; --paper: #d8ccb4;
  --ember: #3a0f22; --wine: #7f1d34; --red: #c8283c; --hot: #f2503e; --orange: #ff8a32; --amber: #ffc25a;
  --gold-0: #6b4a12; --gold-1: #b8821c; --gold: #f5cc3a; --gold-hi: #fff2a2;
  --crt-0: #08241a; --crt-1: #0f5a36; --green: #1fa152; --phos: #4fe27f; --mint: #bfffd6;
  --teal-0: #062f3d; --teal: #0f7c93; --cyan: #2de6e8; --ice: #b3f7ff;
  --navy: #0f1436; --navy-2: #1c2a6b; --blue: #2f5bd0; --sky: #7fb2ff;
  --space: #170f3f; --violet-1: #4a2a8a; --violet: #8d6be0; --lav: #cfc0ff;
  --mag-0: #a21a82; --mag: #ff55cf;

  /* semantic */
  --bg: var(--ink);
  --surface: var(--n1);
  --surface-2: var(--n2);
  --edge: var(--n3);
  --edge-hi: var(--n4);
  --text: var(--n8);
  --text-hi: var(--n9);
  --muted: var(--n7);        /* >= 5.4:1 on n1/n2/n3 panels */
  --dim: var(--n7);
  --good: var(--phos);
  --bad: var(--hot);
  --warn: var(--orange);
  --cash: var(--gold);
  --compute: var(--cyan);
  --tokens: var(--violet);

  /* metrics */
  --px: 2px;                 /* one "UI pixel" */
  --font: 'FoomPixel', ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
  --font-small: 'FoomPixelSmall', 'FoomPixel', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-prose: var(--font);
  --lh-prose: calc(22px * var(--text-scale, 1));
  --fs: 16px;                /* FoomPixel ×2 */
  --fs-big: 24px;            /* FoomPixel ×3 */
  --fs-huge: 32px;           /* FoomPixel ×4 */
  --fs-small: 12px;          /* FoomPixelSmall ×2 */
  --gap: 8px;
  /* spacing scale (multiples of the 2px UI pixel): tight / snug / base / roomy */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --text-lo: var(--n7);      /* secondary copy, meta lines */
  /* dashed pixel outline for empty-state wells */
  --well-dash: repeating-linear-gradient(90deg, var(--n3) 0 4px, transparent 4px 8px) top / 100% 2px no-repeat,
               repeating-linear-gradient(90deg, var(--n3) 0 4px, transparent 4px 8px) bottom / 100% 2px no-repeat,
               repeating-linear-gradient(0deg, var(--n3) 0 4px, transparent 4px 8px) left / 2px 100% no-repeat,
               repeating-linear-gradient(0deg, var(--n3) 0 4px, transparent 4px 8px) right / 2px 100% no-repeat;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font); font-size: var(--fs); line-height: 1.25;
  -webkit-font-smoothing: none; -moz-osx-font-smoothing: unset; font-smooth: never;
  overscroll-behavior: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  overflow: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
textarea, input[type=text] { user-select: text; -webkit-user-select: text; }
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
canvas { image-rendering: pixelated; }
p { margin: 0 0 8px; }
b, strong { color: var(--text-hi); font-weight: normal; }
:focus { outline: none; }
:focus-visible { outline: var(--px) solid var(--gold); outline-offset: 4px; }
[hidden] { display: none !important; }
.px-icon { display: block; image-rendering: pixelated; flex: none; pointer-events: none; }
/* an icon inside running text (the Wafer currency): sits on the baseline, never grows the line */
.px-icon.px-inline { display: inline-block; vertical-align: -3px; margin: -4px 1px; }
.px-inline-wrap { display: inline; }
/* inline (not absolutely positioned) so innerText reads "300 wafers, a party hat": zero font-size takes no room */
.px-inline-wrap > .vh { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; font-size: 0; line-height: 0; }
/* visually hidden, still in innerText / the accessibility tree */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.small { font-family: var(--font-small); font-size: var(--fs-small); }

/* Reading faces never alter HUD, labels, action buttons or code blocks. */
html.readable-text {
  --font-prose: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --prose-smoothing: antialiased;
}
/* Expanded (not :is()) so Chrome < 88 WebViews keep it; :not(x-n) matches :is()'s 0,1,1 specificity. */
.gt-prose:not(x-n),
.card__desc:not(x-n),
.gt-dialog__text:not(x-n),
.gt-chat__q:not(x-n),
.gt-chat__a:not(x-n),
.gt-chat__react:not(x-n),
.stream:not(x-n),
.pg-prompt__text:not(x-n),
.pg-prose:not(x-n),
.pg-think__body:not(x-n),
.pg-res:not(x-n),
.pg-input__field:not(x-n),
.yp__text:not(x-n),
.yr__text:not(x-n),
.yp__note:not(x-n),
.y-meme__txt:not(x-n),
.endcard__txt:not(x-n),
.ach__desc:not(x-n),
.credits-roll__copy:not(x-n),
.credits-roll__ending-line:not(x-n),
.credits-roll__cast-line p,
.fk-detail__flavor:not(x-n),
.fk-mod__flavor:not(x-n),
.fk-challenge__flavor:not(x-n),
.cs-flavor:not(x-n) {
  font-family: var(--font-prose);
  -webkit-font-smoothing: var(--prose-smoothing, none);
}
.gt-prose { font-size: var(--fs); line-height: var(--lh-prose); color: var(--muted); overflow-wrap: anywhere; }

/* pixel scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--n3) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--n3); box-shadow: inset 2px 2px 0 var(--n4), inset -2px -2px 0 var(--n2); }
::-webkit-scrollbar-thumb:hover { background: var(--n4); }

/* notched pixel outline helper: put on any element; color via --edge-c */
.px-frame {
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--edge-c, var(--edge)), 0 var(--px) 0 0 var(--edge-c, var(--edge)),
              calc(-1 * var(--px)) 0 0 0 var(--edge-c, var(--edge)), var(--px) 0 0 0 var(--edge-c, var(--edge));
}

/* ---------- buttons ---------- */
.btn {
  --b-bg: var(--n3); --b-hi: var(--n4); --b-lo: var(--n2); --b-edge: var(--ink); --b-fg: var(--n9); --b-sub: var(--n7);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 6px 12px 8px; margin: var(--px);
  background: var(--b-bg); color: var(--b-fg); text-align: left; line-height: 1;
  box-shadow:
    inset 0 var(--px) 0 0 var(--b-hi), inset var(--px) 0 0 0 var(--b-hi),
    inset 0 calc(-2 * var(--px)) 0 0 var(--b-lo),
    0 calc(-1 * var(--px)) 0 0 var(--b-edge), 0 var(--px) 0 0 var(--b-edge),
    calc(-1 * var(--px)) 0 0 0 var(--b-edge), var(--px) 0 0 0 var(--b-edge),
    0 calc(2 * var(--px)) 0 0 rgba(0, 0, 0, .45);
  transition: transform 40ms steps(1), filter 80ms;
  touch-action: manipulation;
}
.btn:hover { filter: brightness(1.08); }
.btn.is-down, .btn:active {
  transform: translateY(var(--px));
  box-shadow:
    inset 0 var(--px) 0 0 var(--b-lo), inset 0 calc(-1 * var(--px)) 0 0 var(--b-lo),
    0 calc(-1 * var(--px)) 0 0 var(--b-edge), 0 var(--px) 0 0 var(--b-edge),
    calc(-1 * var(--px)) 0 0 0 var(--b-edge), var(--px) 0 0 0 var(--b-edge);
}
.btn.is-held { filter: brightness(1.15); }
.btn__icon { display: grid; place-items: center; margin: -4px 0; }
/* icon-less buttons (card actions, segmented rows) centre their label; icon buttons stay left-aligned */
.btn:not(:has(> .btn__icon)) { text-align: center; }
.btn:not(:has(> .btn__icon)) .btn__body { justify-items: center; }
.modal__actions--stack .btn .btn__body { justify-items: start; text-align: left; }
.btn__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; align-content: center; }
.btn__label { font-size: var(--fs); line-height: 1.125; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn__sub { font-family: var(--font-small); font-size: var(--fs-small); line-height: calc(12px * var(--text-scale, 1)); color: var(--b-sub); white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.btn--primary { --b-bg: var(--green); --b-hi: var(--phos); --b-lo: var(--crt-1); --b-edge: var(--crt-0); --b-fg: var(--n9); --b-sub: var(--mint); }
.btn--gold    { --b-bg: var(--gold); --b-hi: var(--gold-hi); --b-lo: var(--gold-1); --b-edge: var(--gold-0); --b-fg: var(--umber); --b-sub: #4b3d38; }
.btn--cyan    { --b-bg: var(--teal); --b-hi: var(--cyan); --b-lo: var(--teal-0); --b-edge: var(--teal-0); --b-fg: var(--n9); --b-sub: var(--ice); }
.btn--danger  { --b-bg: var(--red); --b-hi: var(--hot); --b-lo: var(--wine); --b-edge: var(--ember); --b-fg: var(--n9); --b-sub: #ffd0c8; }
.btn--ghost   { --b-bg: var(--n2); --b-hi: var(--n3); --b-lo: var(--n1); --b-edge: var(--ink); --b-fg: var(--n8); --b-sub: var(--muted); }
.btn--violet  { --b-bg: var(--violet-1); --b-hi: var(--violet); --b-lo: var(--space); --b-edge: var(--space); --b-fg: var(--n9); --b-sub: var(--lav); }
.btn--sm { min-height: 32px; padding: 4px 8px 6px; font-family: var(--font-small); font-size: var(--fs-small); }
.btn--sm .btn__label { font-family: var(--font-small); font-size: var(--fs-small); }
.btn--lg { min-height: 56px; padding: 8px 16px 10px; }
.btn:focus-visible { outline-offset: 2px; }
.btn.is-poor { --b-bg: var(--n2); --b-hi: var(--n3); --b-lo: var(--n1); --b-edge: var(--ink); --b-fg: var(--n6); --b-sub: var(--hot); }
.btn.is-poor .btn__icon { filter: grayscale(1) brightness(.7); }
/* disabled: a flat dark panel with dim text for every variant (greyscaling a gold button turns it into mud) */
.btn.is-disabled { --b-bg: var(--n2); --b-hi: var(--n3); --b-lo: var(--n1); --b-edge: var(--ink); --b-fg: var(--n5); --b-sub: var(--n5); }
.btn.is-disabled .btn__icon { filter: grayscale(1) brightness(.7); }
.btn.is-disabled::after { display: none; }
.btn.is-disabled.is-poor { --b-sub: var(--hot); }
/* finished state (OWNED / LIVE / HAVE): a flat phosphor-green stamp instead of a greyed-out gold button */
.btn.is-done, .btn.is-done.is-disabled { --b-bg: var(--crt-0); --b-hi: var(--crt-1); --b-lo: var(--crt-0); --b-edge: var(--crt-1); --b-fg: var(--phos); --b-sub: var(--green); opacity: 1; filter: none;
  box-shadow: inset 0 var(--px) 0 0 var(--crt-1), 0 calc(-1 * var(--px)) 0 0 var(--b-edge), 0 var(--px) 0 0 var(--b-edge), calc(-1 * var(--px)) 0 0 0 var(--b-edge), var(--px) 0 0 0 var(--b-edge); }
.btn.is-done .btn__label::before { content: '✓'; margin-right: 6px; }
.btn.is-done::after { display: none; }
.btn.is-affordable::after {
  content: ''; position: absolute; right: 4px; top: 4px; width: var(--px); height: var(--px); background: var(--n9);
  box-shadow: 2px 0 0 var(--n9), 0 2px 0 var(--n9); opacity: .9; animation: sparkle 1.6s steps(2) infinite;
}
@keyframes sparkle { 50% { opacity: 0; } }
.is-nudge { animation: nudge .28s steps(6); }
@keyframes nudge { 20% { translate: -4px 0; } 40% { translate: 4px 0; } 60% { translate: -2px 0; } 80% { translate: 2px 0; } }

/* ---------- panels, sections, cards ----------
   One panel recipe for everything that holds content: notched 2px frame (--pn-edge), a top bevel (--pn-hi),
   and a 2px ink drop-shadow so panels sit on the page instead of floating in it. Accent variants only swap tokens. */
.card, .stats, .rows, .gt-card, .gt-cell, .pn, .wallet, .offer, .pro, .pack, .warp, .cos, .okrs, .store-foot, .museum-card, .museum-secret, .ach-cell, .cos-row, .so-card, .so-hero, .so-friend, .so-goal, .chest__row {
  --pn-edge: var(--edge); --pn-hi: var(--n2); --pn-hi-h: var(--px); --pn-bg: var(--surface);
  background: var(--pn-bg);
  box-shadow:
    inset 0 var(--pn-hi-h) 0 0 var(--pn-hi),
    0 calc(-1 * var(--px)) 0 0 var(--pn-edge), 0 var(--px) 0 0 var(--pn-edge),
    calc(-1 * var(--px)) 0 0 0 var(--pn-edge), var(--px) 0 0 0 var(--pn-edge),
    0 calc(2 * var(--px)) 0 0 var(--ink);
}
.section { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); margin: var(--sp-4) 2px var(--sp-2); min-height: 20px; }
.section:first-child { margin-top: var(--sp-1); }
.section__title { margin: 0; flex: none; display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; font-size: var(--fs); font-weight: normal; line-height: 20px;
  color: var(--gold); letter-spacing: 1px; text-shadow: var(--px) var(--px) 0 var(--gold-0); }
.section__title::before { content: ''; flex: none; width: 6px; height: 6px; background: var(--gold); box-shadow: var(--px) var(--px) 0 var(--gold-0); }
.section__rule { flex: 1 1 8px; min-width: 8px; height: var(--px); align-self: center; margin-top: 2px;
  background: repeating-linear-gradient(90deg, var(--n3) 0 4px, transparent 4px 8px); }
.section__sub { flex: 0 1 auto; min-width: 0; margin-left: auto; font-family: var(--font-small); font-size: var(--fs-small); line-height: calc(14px * var(--text-scale, 1)); color: var(--muted); text-align: left; text-wrap: balance; }
/* a sub too long to share the title row (components.js section()) becomes a left-aligned caption under the heading */
.section.is-long { row-gap: var(--sp-1); }
.section.is-long .section__sub { flex: 1 0 100%; margin-left: 0; order: 3; text-wrap: pretty; }
.section__sub:empty { display: none; }

.card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 0; align-items: center;
  padding: 10px; margin: var(--px) var(--px) var(--sp-3);
}
.card.is-clickable { cursor: pointer; }
.card.is-clickable:active { translate: 0 var(--px); }
.card.is-locked { filter: grayscale(1) brightness(.6); }
/* header row: [icon] title / meta [action]; flavor text then runs the full card width below it. */
.card__main { display: contents; }
.card__icon { grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 44px; display: grid; place-items: center; flex: none; background: var(--ink);
  box-shadow: inset 0 var(--px) 0 0 #000, inset 0 calc(-1 * var(--px)) 0 0 var(--n2), inset var(--px) 0 0 0 var(--n1), inset calc(-1 * var(--px)) 0 0 0 var(--n1); }
.card__title { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; color: var(--text-hi); line-height: calc(20px * var(--text-scale, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__meta { grid-column: 2; grid-row: 2; align-self: start; min-width: 0; margin-top: 2px; font-family: var(--font-small); font-size: var(--fs-small); line-height: calc(14px * var(--text-scale, 1)); color: var(--text-lo); text-wrap: pretty; }
.card__desc { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; color: var(--muted); line-height: var(--lh-prose); text-wrap: pretty; }
.card__main > :not(.card__title):not(.card__desc):not(.card__meta) { grid-column: 1 / -1; }
.card__desc:empty, .card__meta:empty { display: none; }
/* no meta line: the title centres against the icon / action instead of hugging the top */
.card:not(:has(> .card__meta:not(:empty), > .card__main > .card__meta:not(:empty))) .card__title { grid-row: 1 / span 2; align-self: center; }
.card__right { grid-column: 3; grid-row: 1 / span 2; flex: none; display: flex; align-items: center; }
.card__right .btn { min-width: 84px; }
/* a card with no icon: title/meta take the first column too */
.card:not(:has(> .card__icon)) .card__title, .card:not(:has(> .card__icon)) .card__meta { grid-column: 1 / span 2; }
.card:not(:has(> .card__icon)) .card__right { grid-column: 3; }

.stats { display: grid; gap: 0; padding: var(--sp-1) 0; margin: var(--px) var(--px) var(--sp-3); }
.stat { display: flex; align-items: center; gap: var(--sp-2); padding: 4px 10px; min-height: 28px; }
.stat + .stat { box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--n2); }
.stat__label { flex: 1; min-width: 0; font-family: var(--font-small); font-size: var(--fs-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat__value { color: var(--text-hi); white-space: nowrap; font-variant-numeric: tabular-nums; }

.pill { display: inline-block; padding: 4px 6px; font-family: var(--font-small); font-size: var(--fs-small); line-height: 1;
  background: var(--n3); color: var(--n9); box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink), calc(-1 * var(--px)) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink); }
.pill--gold { background: var(--gold); color: var(--umber); }
.pill--green { background: var(--green); }
.pill--red { background: var(--red); }
.pill--cyan { background: var(--teal); }
.pill--violet { background: var(--violet-1); }

.stack { display: grid; gap: var(--sp-2); margin: var(--sp-1) var(--px) var(--sp-3); }
.stack .btn { width: calc(100% - 2 * var(--px)); }
.btn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-2); margin: var(--sp-1) var(--px) var(--sp-3); }
.btn-grid .btn { margin: var(--px); }
/* a stat sheet inside a dialog keeps clear of the inputs above it */
.modal__body .gt-kv { margin: var(--sp-3) 0 var(--sp-2); }
.fineprint { font-family: var(--font-small); font-size: var(--fs-small); color: var(--dim); margin: var(--sp-4) 4px; line-height: 18px; }

/* ---------- progress bar ---------- */
.bar {
  --fill: var(--phos); --fill-lo: var(--green);
  position: relative; height: 16px; margin: var(--sp-2) var(--px) var(--sp-3); background: var(--ink);
  box-shadow: inset 0 var(--px) 0 0 #000, 0 calc(-1 * var(--px)) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge), calc(-1 * var(--px)) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge);
  overflow: hidden;
}
.bar__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%);
  background: repeating-linear-gradient(90deg, var(--fill) 0 6px, var(--fill-lo) 6px 8px);
  box-shadow: inset 0 var(--px) 0 0 rgba(255, 255, 255, .28), inset 0 calc(-1 * var(--px)) 0 0 rgba(0, 0, 0, .28);
  transition: width .1s steps(2);
}
.bar__label { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-small); font-size: var(--fs-small);
  color: var(--n9); text-shadow: var(--px) 0 0 var(--ink), calc(-1 * var(--px)) 0 0 var(--ink), 0 var(--px) 0 var(--ink), 0 calc(-1 * var(--px)) 0 var(--ink), var(--px) var(--px) 0 var(--ink); line-height: 1; padding-top: 1px; }
/* a bar with a label inside: darker base stripes so the white text keeps contrast on the bright zone */
.bar:has(> .bar__label) { height: 20px; }
.bar:has(> .bar__label) .bar__fill { background: repeating-linear-gradient(90deg, var(--fill-lo) 0 6px, color-mix(in srgb, var(--fill-lo) 72%, #000) 6px 8px); }
.bar--thin { height: 8px; }
.bar--gold { --fill: var(--gold); --fill-lo: var(--gold-1); }
.bar--green { --fill: var(--phos); --fill-lo: var(--green); }
.bar--cyan { --fill: var(--cyan); --fill-lo: var(--teal); }
.bar--red { --fill: var(--hot); --fill-lo: var(--red); }
.bar--heat { --fill: var(--orange); --fill-lo: var(--red); }
.bar--violet { --fill: var(--violet); --fill-lo: var(--violet-1); }
.card .bar, .gt-card .bar { margin: var(--sp-2) var(--px) var(--px); }
.gt-card .bar + .gt-kv, .gt-card .bar + .gt-row { margin-top: var(--sp-3); }
.card .bar--thin, .gt-card .bar--thin { margin-top: var(--sp-2); }

/* ---------- settings rows ---------- */
.rows { display: grid; gap: 0; margin: var(--px) var(--px) var(--sp-3); }
.row { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 12px; min-height: 48px; width: 100%; text-align: left; }
.row + .row { box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--n2); }
.row__text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.row__label { color: var(--text-hi); }
.row__desc { font-family: var(--font-small); font-size: var(--fs-small); color: var(--muted); line-height: calc(14px * var(--text-scale, 1)); text-transform: uppercase; }
.row__value { font-family: var(--font-small); font-size: var(--fs-small); color: var(--gold); min-width: 36px; text-align: right; }
.row--slider { flex-wrap: wrap; }
.row--slider .slider { flex-basis: 100%; }
.row--choice { flex-wrap: wrap; }
/* the label keeps a readable minimum; a segmented control that cannot fit beside it drops to its own full-width line */
.row--choice > .row__text { flex: 1 1 112px; min-width: 112px; }
.row--choice > .seg { flex: 0 1 auto; margin-left: auto; max-width: 100%; }
.row--choice > select { max-width: 100%; min-width: 0; padding: 8px; background: var(--bg); border: 1px solid var(--text); border-radius: 4px; }

.switch { position: relative; width: 40px; height: 20px; flex: none; background: var(--n2);
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink), calc(-1 * var(--px)) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink), inset 0 var(--px) 0 0 var(--ink); }
.switch__knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--n6);
  box-shadow: inset 0 var(--px) 0 0 var(--n8), inset 0 calc(-1 * var(--px)) 0 0 var(--n4); transition: left .1s steps(2); }
.switch.is-on { background: var(--crt-1); }
.switch.is-on .switch__knob { left: 22px; background: var(--phos); box-shadow: inset 0 var(--px) 0 0 var(--mint), inset 0 calc(-1 * var(--px)) 0 0 var(--green); }

.slider, .gt-range { -webkit-appearance: none; appearance: none; height: 20px; background: transparent; margin: 0; cursor: pointer; }
.slider::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(90deg, var(--gold) calc(var(--p, 0) * 100%), var(--n2) 0);
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink), calc(-1 * var(--px)) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink); }
.slider::-webkit-slider-thumb, .gt-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 22px; margin-top: -7px; background: var(--n8); border: 0;
  box-shadow: inset 0 var(--px) 0 0 var(--n9), inset 0 calc(-1 * var(--px)) 0 0 var(--n5), 0 0 0 var(--px) var(--ink); }
.slider:active::-webkit-slider-thumb, .gt-range:active::-webkit-slider-thumb { background: var(--gold); box-shadow: inset 0 var(--px) 0 0 var(--gold-hi), inset 0 calc(-1 * var(--px)) 0 0 var(--gold-1), 0 0 0 var(--px) var(--ink); }
.gt-range::-webkit-slider-runnable-track { height: 8px; background: var(--n2); box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink), calc(-1 * var(--px)) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink); }
.gt-range:disabled { opacity: .4; }
.slider::-moz-range-track, .gt-range::-moz-range-track { height: 8px; background: var(--n2); }
.slider::-moz-range-progress { height: 8px; background: var(--gold); }
.slider::-moz-range-thumb, .gt-range::-moz-range-thumb { width: 16px; height: 20px; background: var(--n8); border: 0; border-radius: 0; box-shadow: 0 0 0 var(--px) var(--ink); }

.seg, .gt-seg { display: flex; gap: var(--px); background: var(--ink); padding: var(--px); box-shadow: inset 0 var(--px) 0 0 #000; }
.gt-seg { flex-wrap: wrap; margin: 2px 0 var(--sp-2); }
.seg__btn, .gt-seg button { flex: 1 1 auto; padding: 6px 10px; font-family: var(--font-small); font-size: var(--fs-small); color: var(--muted); background: var(--n2); min-height: 32px;
  box-shadow: inset 0 var(--px) 0 0 var(--n3); transition: filter .08s; }
.seg__btn:active, .gt-seg button:active { translate: 0 var(--px); }
.seg__btn.is-on, .gt-seg button.is-on { background: var(--gold); color: var(--umber); box-shadow: inset 0 var(--px) 0 0 var(--gold-hi), inset 0 calc(-1 * var(--px)) 0 0 var(--gold-1); }
.gt-seg button.is-off { opacity: .35; }

/* ---------- sparkline ---------- */
.chart-row { margin: 4px var(--px) 8px; }
.spark { position: relative; display: inline-block; max-width: 100%; padding: 20px 0; background: var(--n1); vertical-align: top;
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge), calc(-1 * var(--px)) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge); }
.spark__canvas { display: block; max-width: 100%; background: var(--ink); box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--n3), 0 var(--px) 0 0 var(--n3); }
.spark__title, .spark__hi, .spark__lo, .spark__cur { position: absolute; font-family: var(--font-small); font-size: var(--fs-small); line-height: 1;
  color: var(--muted); text-shadow: var(--px) var(--px) 0 var(--ink); pointer-events: none; }
/* labels live in the header / footer strips so they never sit on the curve */
.spark__title { left: 6px; top: 4px; color: var(--text); }
.spark__hi { right: 6px; top: 4px; }
.spark__lo { right: 6px; bottom: 4px; }
.spark__cur { left: 6px; bottom: 4px; color: var(--n9); }

/* ---------- streaming text ---------- */
.stream { white-space: pre-wrap; word-break: break-word; line-height: var(--lh-prose); min-height: 22px; user-select: text; }
.stream__cursor { display: inline-block; width: 10px; height: 14px; vertical-align: -2px; margin-left: 1px; background: currentColor; animation: blink 1s steps(1) infinite; }
.stream.is-streaming .stream__cursor { animation: none; }
@keyframes blink { 50% { opacity: 0; } }
.terminal-wrap { margin: 4px var(--px) 8px; }
.terminal { background: var(--crt-0); color: var(--phos); padding: 10px; min-height: 96px; text-shadow: 0 0 6px rgba(79, 226, 127, .35);
  box-shadow: inset 0 var(--px) 0 0 #000, 0 calc(-1 * var(--px)) 0 0 var(--crt-1), 0 var(--px) 0 0 var(--crt-1), calc(-1 * var(--px)) 0 0 0 var(--crt-1), var(--px) 0 0 0 var(--crt-1); }

/* ---------- textarea ---------- */
.savebox { width: 100%; resize: none; padding: 8px; background: var(--ink); color: var(--phos); border: 0; font-family: var(--font-small); font-size: var(--fs-small);
  word-break: break-all; box-shadow: inset 0 0 0 var(--px) var(--edge); }

/* The 3×5 small font reads best in caps: use it for labels, numbers and meta — never for prose. */
.btn__sub, .section__sub, .card__meta, .stat__label, .pill, .bar__label, .seg__btn, .row__value, .spark__title, .fineprint,
.btn--sm, .btn--sm .btn__label, .gt-seg button, .gt-chips button, .gt-pill, .gt-table, .gt-label, .gt-kv > div { text-transform: uppercase; }

/* ---------- reduced motion ---------- */
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.reduced-motion-off) .btn { transition: none; }
}