/* Hermes Mirror styles (BUILD 6). Seven shipped styles, picked by the user from design/styles/*.png:
   arcade (default), phosphor, blueprint, mac, hal, outrun, zine. Each block sets the tokens app.css consumes, then adds
   its decor. All decor is CSS only (gradients + pseudo-elements, no images), sits behind content (z-index -1 inside the
   isolated .view, or a fixed, pointer-events:none overlay) and stops animating under prefers-reduced-motion.
   Values come from design/styles/hermes-mirror-styles.figcraft; Arcade Sunset copies Asset Forge's arcade.css tokens.
   Where a mockup colour failed WCAG AA (4.5:1) for small text it was nudged; see docs/HANDOFF-STYLES.md. */

/* ------------------------------------------------------------------ shared hooks */
.view > .hdr, .chat-hdr { position: relative; }
.sec::before { content: var(--sec-pre); }
.sec { white-space: nowrap; overflow: hidden; }
.sec::after { content: var(--sec-post); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ================================================================== 1 · Arcade Sunset (default) */
[data-theme="arcade"] {
  color-scheme: dark;
  --bg: #0b0a0c; --card: #161317; --card2: #1c181d; --line: #2a252b; --line-soft: #221e23;
  --text: #f3eee6; --muted: #c2bbaf; --dim: #9a9388; --soft: #e2dcd2;
  --accent: #ff7a1a; --accent2: #ffd23f; --accent-fg: #1a0e02; --link: #22d3c5;
  --green: #22d3c5; --amber: #ffd23f; --red: #ff5a4a;
  --ok-bg: rgb(34 211 197 / .13); --ok-line: #1a9e94; --warn-bg: rgb(255 210 63 / .13); --warn-line: #b8962c; --warn-text: #ffe07a;
  --bad-bg: rgb(255 90 74 / .14); --bad-line: #c4473a; --bad-text: #ff9a8f; --danger: #ff5a4a; --danger-fg: #1a0e02;
  --primary-bg: #ff9d2e; --primary-fg: #1a0e02; --primary-img: linear-gradient(#ffd23f, #ff7a1a);
  --primary-shadow: 0 4px 0 #c4520a, inset 0 2px 0 rgb(255 255 255 / .5);
  --sel-bg: #ffd23f; --sel-fg: #0b0a0c; --sel-line: #ffd23f;
  --chip-bg: transparent; --chip-line: #4a4248; --chip-fg: #c2bbaf;
  --label: #ff7a1a; --h1: #ffd23f; --eyebrow: #c2bbaf;
  --input-bg: #0b0a0c; --input-line: #4a4248; --col-bg: #100e11; --code-bg: #0b0a0c; --sheet-scrim: rgb(5 4 6 / .78);
  --tab-bg: #161317; --tab-line: #ff7a1a; --tab-on: #ffd23f; --tab-off: #9a9388;
  --card-bw: 1px; --card-line: #3a3238; --card-bg: #161317;
  --font: "HM Mono", ui-monospace, monospace; --font-display: var(--font); --mono: var(--font); --fs: 14px;
  --h1-size: 24px; --h1-ls: 0; --h1-shadow: 0 0 10px rgb(255 160 40 / .35);
  --label-ls: .04em;
  --r-card: 8px; --r-chip: 6px; --r-input: 6px; --r-tab: 12px; --r-av: 6px; --r-sm: 6px; --r-badge: 6px;
  --r-bubble: 12px 12px 4px 12px; --r-composer: 10px;
  --logo-bg: linear-gradient(#ffd23f, #ff7a1a); --logo-fg: #1a0e02;
  --k-triage: #b388ff; --k-todo: #c2bbaf; --k-scheduled: #6fb6ff; --k-ready: #22d3c5; --k-running: #ffd23f;
  --k-blocked: #ff5a4a; --k-review: #ff5a8a; --k-done: #9be36b; --k-archived: #9a9388;
  --av0: #ff7a1a; --av1: #22d3c5; --av2: #ffd23f; --av3: #ff5a8a; --av4: #6fb6ff; --av5: #c2bbaf; --av6: #b388ff; --av7: #ffa45c;
  --pill-on-bg: #0b0a0c; --pill-on: #22d3c5; --pill-on-line: #1a9e94;
  --live-bg: rgb(255 210 63 / .13); --live: #ffd23f; --unread: #ffd23f;
  --bubble-bg: #231a0e; --bubble-fg: #f3eee6; --bubble-line: #ff7a1a;
  --sec-pre: "▸ "; --live-txt: "Live"; --conn-txt: "Connected";
}
[data-theme="arcade"] .av { --av-bg: color-mix(in srgb, var(--c) 15%, transparent); --av-border: 1px solid var(--c); }
[data-theme="arcade"] .eyebrow { letter-spacing: 2px; font-size: 12px; }
[data-theme="arcade"] .tabs { border-width: 2px; }
/* pills sit on the marquee/sun, so they get the cabinet's solid screen colour + a ring (as on the mockup) */
[data-theme="arcade"] .hdr .pill, [data-theme="arcade"] .chat-hdr .pill { background: #0b0a0c; border-color: currentColor; }
[data-theme="arcade"] .row .t { font-size: 14px; } [data-theme="arcade"] .row .p { font-size: 12px; }
/* the marquee: sunset band + orange trim behind every header, a striped setting sun behind the tab headers */
[data-theme="arcade"] .view > .hdr::before, [data-theme="arcade"] .chat-hdr::before {
  content: ""; position: absolute; z-index: -1; left: -20px; right: -20px; top: calc(-1 * var(--safe-t) - 80px); bottom: -12px;
  background: linear-gradient(#ff7a1a, #ff7a1a) left bottom / 100% 3px no-repeat,
              linear-gradient(90deg, #0b0a0c 0%, #1a1016 50%, #2e1218 100%);
}
[data-theme="arcade"] .chat-hdr::before { bottom: -8px; }
[data-theme="arcade"] .view > .hdr::after {
  content: ""; position: absolute; z-index: -1; right: 18px; bottom: -9px; width: 76px; height: 76px; border-radius: 50%;
  background: linear-gradient(transparent 0 44px, #2a1117 44px 47px, transparent 47px 53px, #2a1117 53px 57px,
              transparent 57px 62px, #2a1117 62px 67px, transparent 67px 71px, #2a1117 71px),
              linear-gradient(#ffd23f, #ff7a1a);
  box-shadow: 0 0 44px 12px rgb(255 122 26 / .26); clip-path: inset(-70px -70px 0 -70px);
}
/* faint screen scanlines (Asset Forge --tex-main) */
[data-theme="arcade"] #app::after {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: repeating-linear-gradient(rgb(255 255 255 / .018) 0 1px, transparent 1px 3px);
}

/* ================================================================== 2 · Phosphor Terminal */
[data-theme="phosphor"] {
  color-scheme: dark;
  --bg: #030a05; --card: #041208; --card2: #08200f; --line: #0f4a22; --line-soft: #0a2e15;
  --text: #33ff66; --muted: #1fa84a; --dim: #4cb46a; --soft: #7dffa0;
  --accent: #33ff66; --accent2: #33ff66; --accent-fg: #030a05; --link: #d8ff5a;
  --green: #33ff66; --amber: #d8ff5a; --red: #ff7a72;
  --ok-bg: rgb(51 255 102 / .1); --ok-line: #1f9c45; --warn-bg: rgb(216 255 90 / .1); --warn-line: #8aa63a; --warn-text: #e8ff9a;
  --bad-bg: rgb(255 95 86 / .12); --bad-line: #a8403a; --bad-text: #ff9c95; --danger: #ff5f56; --danger-fg: #030a05;
  --primary-bg: #33ff66; --primary-fg: #030a05;
  --sel-bg: #33ff66; --sel-fg: #030a05; --sel-line: #33ff66;
  --chip-bg: transparent; --chip-line: #0f4a22; --chip-fg: #1fa84a;
  --label: #1fa84a; --h1: #33ff66; --eyebrow: #1fa84a;
  --input-bg: #041208; --input-line: #0f4a22; --col-bg: #030a05; --code-bg: #041208; --sheet-scrim: rgb(0 0 0 / .8);
  --tab-bg: #030a05; --tab-line: #33ff66; --tab-on: #33ff66; --tab-off: #4cb46a;
  --card-bw: 1px; --card-line: #0f4a22; --card-bg: #030a05;
  --font: "HM Mono", ui-monospace, monospace; --font-display: var(--font); --mono: var(--font); --fs: 14px;
  --h1-size: 24px; --h1-ls: 0; --h1-tt: uppercase; --h1-shadow: 0 0 6px rgb(51 255 102 / .53);
  --tt-chip: uppercase; --tt-tab: uppercase; --label-ls: 0;
  --r-card: 0; --r-chip: 0; --r-input: 0; --r-tab: 0; --r-av: 0; --r-sm: 0; --r-badge: 0; --r-bubble: 0; --r-composer: 0; --r-round: 0;
  --logo-bg: #030a05; --logo-fg: #33ff66;
  --k-triage: #c6ff8a; --k-todo: #4fbf6b; --k-scheduled: #5cffd0; --k-ready: #33ff66; --k-running: #d8ff5a;
  --k-blocked: #ff7a72; --k-review: #ffb347; --k-done: #7dffa0; --k-archived: #4cb46a;
  --av0: #33ff66; --av1: #33ff66; --av2: #d8ff5a; --av3: #7dffa0; --av4: #b6ff3a; --av5: #5cffb0; --av6: #9dff7a; --av7: #33ff66;
  --pill-on-bg: transparent; --pill-on: #33ff66; --pill-on-line: #33ff66;
  --live-bg: transparent; --live: #d8ff5a; --live-line: #d8ff5a; --live-row-line: #33ff66; --unread: #33ff66;
  --bubble-bg: #0a2e15; --bubble-fg: #7dffa0; --bubble-line: #33ff66;
  --sec-pre: "== "; --sec-post: " ===================================================";
  --live-txt: "RUN"; --conn-txt: "LINK OK";
}
[data-theme="phosphor"] .av { --av-bg: transparent; --av-border: 1px solid var(--c); }
[data-theme="phosphor"] .row .t { font-size: 14px; } [data-theme="phosphor"] .row .p { font-size: 12px; }
[data-theme="phosphor"] .sec { font-weight: 700; font-size: 11px; }
[data-theme="phosphor"] .view:has(> .hdr) { --view-top: 44px; }
/* boot line above the tab headers */
[data-theme="phosphor"] .view > .hdr::before {
  content: "HERMES-OS v2.6 · TTY1 · 9600 BAUD"; position: absolute; left: 0; top: -22px;
  font-size: 10px; letter-spacing: 1px; color: #1fa84a; white-space: nowrap;
}
[data-theme="phosphor"] .search input::placeholder { color: #4cb46a; }
[data-theme="phosphor"] .search svg { display: none; }
[data-theme="phosphor"] .logo { border: 1px solid #33ff66; box-shadow: 0 0 8px rgb(51 255 102 / .4); }
[data-theme="phosphor"] .u, [data-theme="phosphor"] .a, [data-theme="phosphor"] .tc-name { text-shadow: 0 0 4px rgb(51 255 102 / .35); }
[data-theme="phosphor"] .caret::after { width: .6em; }
/* scanlines + vignette + a slow phosphor flicker */
[data-theme="phosphor"] #app::after {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: repeating-linear-gradient(rgb(0 0 0 / .16) 0 1px, transparent 1px 3px),
              radial-gradient(ellipse at center, transparent 0 55%, rgb(0 0 0 / .33) 100%);
  animation: hm-flicker 6s steps(1) infinite;
}
@keyframes hm-flicker { 0%, 100% { opacity: 1; } 47% { opacity: .9; } 48% { opacity: 1; } 83% { opacity: .94; } }

/* ================================================================== 6 · Blueprint */
[data-theme="blueprint"] {
  color-scheme: dark;
  --bg: #0d3a8a; --card: #0f42a0; --card2: #0b3070; --line: rgb(232 241 255 / .45); --line-soft: rgb(232 241 255 / .18);
  --text: #e8f1ff; --muted: #b8cdf0; --dim: #a3c0ea; --soft: #d4e3fa;
  --accent: #e8f1ff; --accent2: #7fd3ff; --accent-fg: #0d3a8a; --link: #7fd3ff;
  --green: #8ef0b0; --amber: #ffd166; --red: #ff9a9a;
  --ok-bg: rgb(142 240 176 / .14); --ok-line: #8ef0b0; --warn-bg: rgb(255 209 102 / .14); --warn-line: #ffd166; --warn-text: #ffe3a3;
  --bad-bg: rgb(255 154 154 / .16); --bad-line: #ff9a9a; --bad-text: #ffd0d0; --danger: #ffd0d0; --danger-fg: #7a0012;
  --primary-bg: #e8f1ff; --primary-fg: #0d3a8a;
  --sel-bg: #e8f1ff; --sel-fg: #0d3a8a; --sel-line: #e8f1ff;
  --chip-bg: transparent; --chip-line: rgb(232 241 255 / .4); --chip-fg: #b8cdf0;
  --label: #7fd3ff; --h1: #e8f1ff; --eyebrow: #b8cdf0;
  --input-bg: #0b3070; --input-line: rgb(232 241 255 / .6); --col-bg: rgb(11 48 112 / .85); --code-bg: #0b3070; --sheet-scrim: rgb(4 20 50 / .7);
  --tab-bg: #0b3070; --tab-line: #e8f1ff; --tab-on: #e8f1ff; --tab-off: #a3c0ea;
  --card-bw: 1px; --card-line: rgb(232 241 255 / .67); --card-bg: rgb(15 66 160 / .8);
  --font: "HM Mono", ui-monospace, monospace; --font-display: var(--font); --mono: var(--font); --fs: 14px;
  --h1-size: 24px; --h1-ls: 2px; --h1-tt: uppercase;
  --tt-chip: uppercase; --tt-tab: uppercase; --label-ls: 2px;
  --r-card: 2px; --r-chip: 2px; --r-input: 2px; --r-tab: 2px; --r-av: 50%; --r-sm: 2px; --r-badge: 2px; --r-bubble: 2px; --r-composer: 2px;
  --logo-bg: transparent; --logo-fg: #e8f1ff;
  --k-triage: #d3c4ff; --k-todo: #b8cdf0; --k-scheduled: #7fd3ff; --k-ready: #a5f3fc; --k-running: #ffd166;
  --k-blocked: #ffb0b0; --k-review: #ffb3df; --k-done: #8ef0b0; --k-archived: #a3c0ea;
  --av0: #e8f1ff; --av1: #7fd3ff; --av2: #ffd166; --av3: #e8f1ff; --av4: #a5f3fc; --av5: #b8cdf0; --av6: #d3c4ff; --av7: #ffb3df;
  --pill-on-bg: transparent; --pill-on: #7fd3ff; --pill-on-line: #7fd3ff;
  --live-bg: transparent; --live: #ffd166; --live-line: #ffd166; --live-row-line: #ffd166; --unread: #e8f1ff;
  --bubble-bg: #0b3070; --bubble-fg: #e8f1ff; --bubble-line: #e8f1ff;
  --sec-pre: "§ "; --live-txt: "ACTIVE"; --conn-txt: "LINKED";
}
[data-theme="blueprint"] .av { --av-bg: transparent; --av-border: 1.5px dashed var(--c); }
[data-theme="blueprint"] .row .t { font-size: 14px; } [data-theme="blueprint"] .row .p { font-size: 12px; }
[data-theme="blueprint"] .sec { font-weight: 700; font-size: 11px; }
[data-theme="blueprint"] .eyebrow { letter-spacing: 1px; font-size: 12px; }
[data-theme="blueprint"] .search { border-style: dashed; }
[data-theme="blueprint"] .logo { border: 1.5px dashed #e8f1ff; }
[data-theme="blueprint"] .view:has(> .hdr) { --view-top: 44px; }
/* drafting grid: minor every ~10 px, major every 5th line */
[data-theme="blueprint"] body {
  background:
    linear-gradient(rgb(255 255 255 / .10) 1px, transparent 1px) 0 0 / 51px 51px,
    linear-gradient(90deg, rgb(255 255 255 / .10) 1px, transparent 1px) 0 0 / 51px 51px,
    linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px) 0 0 / 10.2px 10.2px,
    linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px) 0 0 / 10.2px 10.2px,
    #0d3a8a;
}
/* dimension line above the tab headers; the number is the real viewport width (theme.js sets --dim-w) */
[data-theme="blueprint"] .view > .hdr::before {
  content: var(--dim-w, "390"); position: absolute; left: 0; right: 0; top: -30px; height: 18px;
  font-size: 9px; line-height: 9px; text-align: center; color: #7fd3ff;
  border-left: 1px solid #7fd3ff; border-right: 1px solid #7fd3ff;
  background: linear-gradient(#7fd3ff, #7fd3ff) center 13px / 100% 1px no-repeat;
}
/* title block above the tab bar */
[data-theme="blueprint"] .tabs { margin-top: 56px; }
[data-theme="blueprint"] .tabs::before {
  content: "DWG HM-01  ·  SHEET 1/6\A SCALE 1:1  ·  REV C"; white-space: pre; position: absolute; right: 0; bottom: calc(100% + 10px);
  padding: 5px 8px; font-size: 8.5px; line-height: 15px; color: #e8f1ff; border: 1px solid #e8f1ff; background: #0d3a8a; pointer-events: none;
}


/* ================================================================== 7 · Classic Mac */
[data-theme="mac"] {
  color-scheme: light;
  --bg: #ffffff; --card: #ffffff; --card2: #eeeeee; --line: #000000; --line-soft: #bbbbbb;
  --text: #000000; --muted: #333333; --dim: #555555; --soft: #222222;
  --accent: #000000; --accent2: #000000; --accent-fg: #ffffff; --link: #0000aa;
  --green: #1e6b34; --amber: #7a4f00; --red: #b00020;
  --ok-bg: #e6f2e9; --ok-line: #1e6b34; --warn-bg: #fbf1dc; --warn-line: #7a4f00; --warn-text: #5c3d00;
  --bad-bg: #fbe3e6; --bad-line: #b00020; --bad-text: #7a0015; --danger: #b00020; --danger-fg: #ffffff;
  --primary-bg: #000000; --primary-fg: #ffffff;
  --sel-bg: #000000; --sel-fg: #ffffff; --sel-line: #000000;
  --chip-bg: #ffffff; --chip-line: #000000; --chip-fg: #333333;
  --label: #000000; --h1: #000000; --eyebrow: #333333;
  --input-bg: #ffffff; --input-line: #000000; --col-bg: #f4f4f4; --code-bg: #f4f4f4; --sheet-scrim: rgb(0 0 0 / .35);
  --tab-bg: #ffffff; --tab-line: #000000; --tab-on: #000000; --tab-off: #555555; --tab-shadow: 2px 2px 0 #000;
  --card-bw: 1px; --card-line: #000000; --card-bg: #ffffff; --card-shadow: 2px 2px 0 #000;
  --font: "HM Sans", "DejaVu Sans", sans-serif; --font-display: var(--font); --mono: "HM Mono", ui-monospace, monospace;
  --h1-size: 20px; --h1-ls: 0;
  --tt-label: none; --label-ls: 0;
  --r-card: 0; --r-chip: 4px; --r-input: 4px; --r-tab: 0; --r-av: 4px; --r-sm: 4px; --r-badge: 4px; --r-bubble: 8px; --r-composer: 4px;
  --logo-bg: #ffffff; --logo-fg: #000000;
  --k-triage: #6b21a8; --k-todo: #333333; --k-scheduled: #0b5394; --k-ready: #3730a3; --k-running: #7a4f00;
  --k-blocked: #b00020; --k-review: #9d174d; --k-done: #1e6b34; --k-archived: #555555;
  --av0: #000; --av1: #000; --av2: #000; --av3: #000; --av4: #000; --av5: #000; --av6: #000; --av7: #000;
  --pill-on-bg: #ffffff; --pill-on: #000000; --pill-on-line: #000000;
  --live-bg: #000000; --live: #ffffff; --live-row-line: #000; --unread: #000000;
  --bubble-bg: #000000; --bubble-fg: #ffffff;
  --sec-pre: "▸ "; --live-txt: "Busy"; --conn-txt: "Online";
  --view-top: 58px;
}
[data-theme="mac"] .av { --av-bg: #ffffff; --av-border: 1px solid #000; }
[data-theme="mac"] .sec { font-weight: 700; font-size: 11px; color: #000; }
[data-theme="mac"] .search { box-shadow: inset 1px 1px 0 rgb(0 0 0 / .33); }
[data-theme="mac"] .eyebrow { font: 10px var(--mono); }
[data-theme="mac"] .row:active, [data-theme="mac"] .ktile:active { background: #000; color: #fff; }
[data-theme="mac"] .pill { border-radius: 4px; }
[data-theme="mac"] .logo { border: 1px solid #000; box-shadow: 2px 2px 0 #000; }
[data-theme="mac"] .primary { border-radius: 8px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000; }
[data-theme="mac"] .primary.sm { box-shadow: none; }
[data-theme="mac"] .tool, [data-theme="mac"] .tool-card, [data-theme="mac"] .ktile, [data-theme="mac"] .composer { box-shadow: 2px 2px 0 #000; }
[data-theme="mac"] .kcol { border-top-width: 1px; }
[data-theme="mac"] .ksheet-card { box-shadow: 3px 3px 0 #000; }
/* menu bar, always on top of the app */
[data-theme="mac"] #app::before {
  content: "✻\2003 File\2003 Edit\2003 View\2003 Special"; position: absolute; left: 0; right: 0; top: var(--safe-t); height: 26px; z-index: 30;
  padding: 0 28px; font: 700 12px/25px var(--font); color: #000; background: #fff; border-bottom: 1px solid #000; white-space: pre; pointer-events: none;
}
/* window title bar (pinstripes + close box) over every tab header */
[data-theme="mac"] .view > .hdr::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -24px; height: 17px;
  background: linear-gradient(#fff, #fff) 6px 0 / 20px 17px no-repeat,
              linear-gradient(#fff, #fff) 10px 3px / 11px 11px no-repeat,
              linear-gradient(#000, #000) 9px 2px / 13px 13px no-repeat,
              repeating-linear-gradient(#fff 0 2px, #000 2px 3px) 0 1px / 100% 16px no-repeat;
}
[data-theme="mac"] .view > .hdr::after {
  content: "Hermes Mirror"; position: absolute; left: 50%; top: -25px; transform: translateX(-50%);
  padding: 0 8px; background: #fff; font: 700 13px/19px var(--font); color: #000; white-space: nowrap;
}
[data-theme="mac"] .chat-hdr { border-bottom: 1px solid #000; padding-bottom: 8px; }
[data-theme="mac"] #v-chat, [data-theme="mac"] #v-tool, [data-theme="mac"] #v-screen, [data-theme="mac"] #v-kboard, [data-theme="mac"] #v-kcard { padding-top: calc(var(--safe-t) + 44px); }

/* ================================================================== 8 · HAL 9000 */
[data-theme="hal"] {
  color-scheme: dark;
  --bg: #000000; --card: #0a0c10; --card2: #11151b; --line: #1c2128; --line-soft: #13171d;
  --text: #e9eef2; --muted: #9aa3ad; --dim: #808a96; --soft: #c9d0d6;
  --accent: #e9eef2; --accent2: #7fb2ff; --accent-fg: #000000; --link: #7fb2ff;
  --green: #7ee2a8; --amber: #ffb000; --red: #ff3344;
  --ok-bg: rgb(126 226 168 / .1); --ok-line: #2f6b4a; --warn-bg: rgb(255 176 0 / .1); --warn-line: #7a5600; --warn-text: #ffd27a;
  --bad-bg: rgb(255 51 68 / .12); --bad-line: #8a0012; --bad-text: #ff9aa3; --danger: #e3001b; --danger-fg: #ffffff;
  --primary-bg: #e9eef2; --primary-fg: #000000;
  --sel-bg: #e9eef2; --sel-fg: #000000; --sel-line: #e9eef2;
  --chip-bg: transparent; --chip-line: #2a2f36; --chip-fg: #9aa3ad;
  --label: #808a96; --h1: #e9eef2; --eyebrow: #9aa3ad;
  --input-bg: #07090c; --input-line: #2a2f36; --col-bg: #05070a; --code-bg: #07090c; --sheet-scrim: rgb(0 0 0 / .75);
  --tab-bg: #07090c; --tab-line: #1c2128; --tab-on: #e9eef2; --tab-off: #808a96;
  --card-bw: 1px; --card-line: #1c2128; --card-bg: #0a0c10;
  --font: "HM Grotesk", "Liberation Sans", Arial, sans-serif; --font-display: var(--font); --mono: "HM Mono", ui-monospace, monospace;
  --h1-size: 24px; --h1-weight: 400; --h1-ls: 6px; --h1-tt: uppercase;
  --tt-chip: uppercase; --tt-tab: uppercase; --label-ls: 4px;
  --r-card: 2px; --r-chip: 2px; --r-input: 2px; --r-tab: 2px; --r-av: 50%; --r-sm: 2px; --r-badge: 2px; --r-bubble: 2px; --r-composer: 2px;
  --logo-bg: radial-gradient(circle, #fff7b0 0, #ffb000 12%, #e3001b 30%, #5a0008 55%, #120002 75%); --logo-fg: transparent;
  --k-triage: #b9a3ff; --k-todo: #9aa3ad; --k-scheduled: #7fb2ff; --k-ready: #c7d2fe; --k-running: #ffb000;
  --k-blocked: #ff3344; --k-review: #ff7ab6; --k-done: #7ee2a8; --k-archived: #808a96;
  --av0: #e3001b; --av1: #7fb2ff; --av2: #3d6fd1; --av3: #e3001b; --av4: #b0001a; --av5: #7f8a99; --av6: #5a7fbf; --av7: #e3001b;
  --pill-on-bg: transparent; --pill-on: #7fb2ff; --pill-on-line: #1f2a3d;
  --live-bg: transparent; --live: #ff3344; --live-line: #e3001b; --live-row-line: #5a0008; --unread: #e9eef2;
  --bubble-bg: #11151b; --bubble-fg: #e9eef2; --bubble-line: #2a2f36;
  --live-txt: "ACTIVE"; --conn-txt: "ALL SYSTEMS NOMINAL";
}
/* the eye needs room above the tab headers only */
[data-theme="hal"] .view:has(> .hdr) { --view-top: 92px; }
[data-theme="hal"] .av { --av-bg: radial-gradient(circle, var(--c) 0, #000 100%); --av-fg: #fff; --av-border: 1px solid #3a3f46; }
[data-theme="hal"] .av { text-shadow: 0 0 3px #000; }
[data-theme="hal"] .eyebrow { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
[data-theme="hal"] .sec { font-weight: 700; font-size: 11px; }
[data-theme="hal"] .pill { font-size: 11px; letter-spacing: 1.5px; font-weight: 700; }
[data-theme="hal"] #conn-pill.pill-on b::after { font-size: 10px; }
/* the status readout sits top-left, as on the mockup */
[data-theme="hal"] #conn-pill { position: absolute; left: 0; top: -58px; }
/* HAL's eye, top right of every tab header; it glows slowly */
[data-theme="hal"] .view > .hdr::after {
  content: ""; position: absolute; z-index: -1; right: -8px; top: calc(-1 * var(--view-top) - 18px); width: 118px; height: 118px;
  border-radius: 50%; border: 1px solid #8a8f96;
  background: radial-gradient(ellipse 9px 5px at 42% 26%, rgb(255 255 255 / .45), transparent 100%),
              radial-gradient(circle 37px, #fff7b0 0, #ffb000 9px, #e3001b 18px, #5a0008 28px, #120002 36px, transparent 37px),
              radial-gradient(circle, #3a3a3a 0, #111 100%);
  box-shadow: 0 0 34px 6px rgb(227 0 27 / .3);
  animation: hm-hal 5s ease-in-out infinite;
}
@keyframes hm-hal { 50% { box-shadow: 0 0 48px 12px rgb(227 0 27 / .42); } }
/* ship console readouts above the tab bar: one per tab button */
[data-theme="hal"] .tabs { margin-top: 52px; }
[data-theme="hal"] .tabs button::after {
  position: absolute; left: 4px; right: 4px; bottom: calc(100% + 20px); height: 34px; pointer-events: none;
  font: 700 8px/1 var(--font); letter-spacing: 2px; color: #7f8ba0; text-align: left; padding: 6px 0 0 7px;
  border: 1px solid #1f2a3d; background: linear-gradient(var(--lvl-c, #7fb2ff), var(--lvl-c, #7fb2ff)) 7px 19px / calc((100% - 14px) * var(--lvl, .5)) 4px no-repeat,
              linear-gradient(#1f2a3d, #1f2a3d) 7px 19px / calc(100% - 14px) 4px no-repeat, #0b1220;
  animation: hm-lvl 7s ease-in-out infinite alternate;
}
[data-theme="hal"] .tabs button:nth-child(1)::after { content: "COM"; --lvl: .75; }
[data-theme="hal"] .tabs button:nth-child(2)::after { content: "NAV"; --lvl: .43; --lvl-c: #e9eef2; animation-delay: -2s; }
[data-theme="hal"] .tabs button:nth-child(3)::after { content: "HIB"; --lvl: .9; animation-delay: -4s; }
[data-theme="hal"] .tabs button:nth-child(4)::after { content: "ATM"; --lvl: .24; --lvl-c: #e3001b; animation-delay: -1s; }
[data-theme="hal"] .tabs button:nth-child(5)::after { content: "LIF"; --lvl: .59; --lvl-c: #e9eef2; animation-delay: -3s; }
@keyframes hm-lvl { to { filter: brightness(1.35); } }

/* ================================================================== 10 · Outrun */
[data-theme="outrun"] {
  color-scheme: dark;
  --bg: #0a0018; --card: #1a0538; --card2: #24084a; --line: rgb(255 47 178 / .4); --line-soft: rgb(255 47 178 / .18);
  --text: #ffffff; --muted: #c9b6ff; --dim: #a893e0; --soft: #e4d9ff;
  --accent: #ff2fb2; --accent2: #2de2ff; --accent-fg: #0a0018; --link: #2de2ff;
  --green: #7dffb2; --amber: #ffd166; --red: #ff5c7a;
  --ok-bg: rgb(125 255 178 / .12); --ok-line: #3fae76; --warn-bg: rgb(255 209 102 / .12); --warn-line: #b8913b; --warn-text: #ffe3a3;
  --bad-bg: rgb(255 92 122 / .14); --bad-line: #b33a55; --bad-text: #ffb3c2; --danger: #ff5c7a; --danger-fg: #0a0018;
  --primary-bg: #ff2fb2; --primary-fg: #0a0018; --primary-img: linear-gradient(90deg, #ffd166, #ff2fb2); --primary-shadow: 0 0 16px rgb(255 47 178 / .55);
  --sel-bg: #2de2ff; --sel-fg: #0a0018; --sel-line: #2de2ff;
  --chip-bg: transparent; --chip-line: rgb(255 47 178 / .4); --chip-fg: #c9b6ff;
  --label: #2de2ff; --h1: #ff2fb2; --eyebrow: #2de2ff;
  --input-bg: rgb(20 0 46 / .8); --input-line: rgb(45 226 255 / .4); --col-bg: rgb(20 0 46 / .85); --code-bg: #14002e; --sheet-scrim: rgb(10 0 24 / .75);
  --tab-bg: rgb(10 0 24 / .92); --tab-line: #ff2fb2; --tab-on: #2de2ff; --tab-off: #a893e0; --tab-shadow: 0 0 10px rgb(255 47 178 / .67);
  --card-bw: 1px; --card-line: rgb(255 47 178 / .33); --card-bg: rgb(26 5 56 / .92);
  --font: "HM Sans", "DejaVu Sans", sans-serif; --font-display: var(--font); --mono: "HM Mono", ui-monospace, monospace;
  --h1-size: 23px; --h1-ls: 1px; --h1-tt: uppercase; --h1-style: italic; --h1-shadow: 0 0 10px rgb(255 47 178 / .67);
  --label-ls: 3px;
  --r-card: 8px; --r-chip: 16px; --r-input: 8px; --r-tab: 14px; --r-av: 8px; --r-sm: 8px; --r-badge: 16px; --r-bubble: 14px 14px 4px 14px; --r-composer: 14px;
  --logo-bg: linear-gradient(#ffd166, #ff2fb2); --logo-fg: #0a0018;
  --k-triage: #b388ff; --k-todo: #c9b6ff; --k-scheduled: #2de2ff; --k-ready: #8cf5ff; --k-running: #ffd166;
  --k-blocked: #ff5c7a; --k-review: #ff6fc8; --k-done: #7dffb2; --k-archived: #a893e0;
  --av0: #ffd166; --av1: #2de2ff; --av2: #b388ff; --av3: #ffd166; --av4: #2de2ff; --av5: #c9b6ff; --av6: #b388ff; --av7: #ffd166;
  --pill-on-bg: transparent; --pill-on: #2de2ff; --pill-on-line: #2de2ff; --pill-on-glow: 0 0 10px rgb(45 226 255 / .67);
  --live-bg: transparent; --live: #ffd166; --live-line: #ffd166; --live-row-line: #ff2fb2; --unread: #2de2ff;
  --bubble-bg: #ff2fb2; --bubble-fg: #0a0018;
  --live-txt: "LIVE"; --conn-txt: "SYNCED";
}
[data-theme="outrun"] .av { --av-bg: linear-gradient(var(--c), #ff2fb2); --av-fg: #0a0018; --av-border: 0; }
[data-theme="outrun"] body { background: linear-gradient(#14002e 0%, #2a0845 33%, #14002e 67%, #0a0018 100%) fixed; }
[data-theme="outrun"] .eyebrow { letter-spacing: 3px; font-size: 12px; }
[data-theme="outrun"] .sec { font-weight: 700; font-size: 11px; }
[data-theme="outrun"] .chip.on { box-shadow: 0 0 10px rgb(45 226 255 / .67); }
[data-theme="outrun"] .chips { padding-top: 6px; padding-bottom: 6px; margin-top: -6px; margin-bottom: -6px; }
[data-theme="outrun"] .row .t { color: #fff; }
/* the setting sun (striped) and the neon grid rolling toward the viewer, behind everything */
[data-theme="outrun"] #app::before {
  content: ""; position: fixed; z-index: -1; left: 50%; bottom: calc(var(--safe-b) + 134px); width: 240px; height: 240px; margin-left: -120px;
  border-radius: 50%; background: linear-gradient(#ffd166, #ff2fb2); opacity: .55; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 0 54%, transparent 54% 55.7%, #000 55.7% 62.5%, transparent 62.5% 65%, #000 65% 72%,
    transparent 72% 75.4%, #000 75.4% 81.6%, transparent 81.6% 86.6%, #000 86.6%);
  mask-image: linear-gradient(#000 0 54%, transparent 54% 55.7%, #000 55.7% 62.5%, transparent 62.5% 65%, #000 65% 72%,
    transparent 72% 75.4%, #000 75.4% 81.6%, transparent 81.6% 86.6%, #000 86.6%);
}
/* the sun only rises behind list screens (solid rows); reading views keep a clean sky so text stays AA */
[data-theme="outrun"] body[data-view]:not([data-view="sessions"]):not([data-view="live"]):not([data-view="kanban"]):not([data-view="profiles"]) #app::before { display: none; }
[data-theme="outrun"] #app::after {
  content: ""; position: fixed; z-index: -1; left: -50%; right: -50%; bottom: 0; height: calc(var(--safe-b) + 128px); pointer-events: none;
  border-top: 2px solid #ff2fb2; box-shadow: 0 -2px 12px rgb(255 47 178 / .67);
  background: linear-gradient(transparent calc(100% - 1px), rgb(255 47 178 / .67) 0) 0 0 / 100% 18px,
              linear-gradient(90deg, rgb(255 47 178 / .53) 1px, transparent 1px) center 0 / 34px 100%;
  transform: perspective(130px) rotateX(48deg); transform-origin: top center;
  animation: hm-drive 1.6s linear infinite;
}
@keyframes hm-drive { to { background-position: 0 18px, center 0; } }

/* ================================================================== 11 · Xerox Zine */
[data-theme="zine"] {
  color-scheme: light;
  --bg: #f5ff3b; --card: #ffffff; --card2: #f2f2f2; --line: #0a0a0a; --line-soft: #c8c8c8;
  --text: #0a0a0a; --muted: #2b2b2b; --dim: #3d3d3d; --soft: #1a1a1a;
  --accent: #0a0a0a; --accent2: #0a0a0a; --accent-fg: #f5ff3b; --link: #0a0a0a;
  --green: #1e6b34; --amber: #7a4300; --red: #b00020;
  --ok-bg: #e2f7e6; --ok-line: #1e6b34; --warn-bg: #fff0d6; --warn-line: #7a4300; --warn-text: #4d2a00;
  --bad-bg: #ffe0e5; --bad-line: #b00020; --bad-text: #7a0015; --danger: #b00020; --danger-fg: #ffffff;
  --primary-bg: #ff4fd8; --primary-fg: #0a0a0a; --primary-shadow: 4px 4px 0 #0a0a0a;
  --sel-bg: #0a0a0a; --sel-fg: #f5ff3b; --sel-line: #0a0a0a;
  --chip-bg: #ffffff; --chip-line: #0a0a0a; --chip-fg: #2b2b2b; --chip-bw: 2px;
  --label: #0a0a0a; --h1: #0a0a0a; --eyebrow: #2b2b2b;
  --input-bg: #ffffff; --input-line: #0a0a0a; --col-bg: #fbffc2; --code-bg: #f2f2f2; --sheet-scrim: rgb(10 10 10 / .45);
  --tab-bg: #ffffff; --tab-line: #0a0a0a; --tab-on: #0a0a0a; --tab-off: #3d3d3d; --tab-shadow: 5px 5px 0 #0a0a0a;
  --card-bw: 2px; --card-line: #0a0a0a; --card-bg: #ffffff; --card-shadow: 5px 5px 0 #0a0a0a;
  --font: "HM Sans", "DejaVu Sans", sans-serif; --font-display: var(--font); --mono: "HM Mono", ui-monospace, monospace;
  --h1-size: 44px; --h1-weight: 800; --h1-ls: -2px; --h1-tt: uppercase;
  --tt-chip: uppercase; --tt-tab: uppercase; --label-ls: 1px;
  --r-card: 0; --r-chip: 0; --r-input: 0; --r-tab: 0; --r-av: 0; --r-sm: 0; --r-badge: 0; --r-bubble: 0; --r-composer: 0; --r-round: 0;
  --logo-bg: #ff4fd8; --logo-fg: #0a0a0a;
  --k-triage: #6b21a8; --k-todo: #2b2b2b; --k-scheduled: #0b5394; --k-ready: #1d4ed8; --k-running: #7a4300;
  --k-blocked: #b00020; --k-review: #a3157a; --k-done: #1e6b34; --k-archived: #3d3d3d;
  --av0: #ff4fd8; --av1: #3bd1ff; --av2: #ff8a00; --av3: #ff4fd8; --av4: #7cff6b; --av5: #3bd1ff; --av6: #ff8a00; --av7: #c9a7ff;
  --pill-on-bg: #ffffff; --pill-on: #0a0a0a; --pill-on-line: #0a0a0a;
  --live-bg: #ff4fd8; --live: #0a0a0a; --live-line: #0a0a0a; --live-row-line: #0a0a0a; --unread: #0a0a0a;
  --bubble-bg: #0a0a0a; --bubble-fg: #f5ff3b;
  --sec-pre: "✂ "; --live-txt: "LIVE"; --conn-txt: "ON";
}
[data-theme="zine"] .av { --av-bg: var(--c); --av-fg: #0a0a0a; --av-border: 2px solid #0a0a0a; }
[data-theme="zine"] h1 { white-space: pre-line; line-height: .92; }
[data-theme="zine"] .view:has(> .hdr) { --view-top: 40px; }
[data-theme="zine"] #v-sessions h1 { min-height: 80px; }
[data-theme="zine"] .eyebrow { font: italic 13px "HM Serif", "DejaVu Serif", serif; margin-bottom: 4px; }
[data-theme="zine"] .sec { font-weight: 700; font-size: 13px; color: #0a0a0a; }
[data-theme="zine"] .pill { border-width: 2px; border-radius: 0; font-weight: 700; }
[data-theme="zine"] .chips { padding-bottom: 4px; }
[data-theme="zine"] .search, [data-theme="zine"] .field, [data-theme="zine"] .composer { border-width: 2px; }
[data-theme="zine"] .tool, [data-theme="zine"] .tool-card, [data-theme="zine"] .ktile, [data-theme="zine"] .kcol { border: 2px solid #0a0a0a; box-shadow: 4px 4px 0 #0a0a0a; }
[data-theme="zine"] .ktile { border-left: 6px solid var(--tone); }
[data-theme="zine"] .kcol { border-top: 6px solid var(--tone); }
[data-theme="zine"] .tabs { border-width: 2px; }
[data-theme="zine"] .primary { border: 2px solid #0a0a0a; }
[data-theme="zine"] .live-badge { border-width: 2px; font-weight: 700; }
[data-theme="zine"] .row:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #0a0a0a; }
/* photocopier toner speckle */
[data-theme="zine"] #app::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(rgb(0 0 0 / .07) 1px, transparent 1.5px) 0 0 / 5px 5px,
              radial-gradient(rgb(0 0 0 / .05) 1px, transparent 1.5px) 2px 3px / 7px 7px;
}
/* masking-tape issue number */
[data-theme="zine"] .view > .hdr::after {
  content: "ISSUE #07"; position: absolute; right: 10px; top: -30px; transform: rotate(-4deg);
  padding: 4px 14px; background: rgb(255 255 255 / .8); font: 700 11px/13px var(--mono); letter-spacing: 2px; color: #0a0a0a; pointer-events: none;
}
/* "LIVE! NOW" sticker on Sessions while something there is live */
[data-theme="zine"] #v-sessions:has(.live-badge)::after {
  content: "LIVE!\A NOW"; white-space: pre; position: absolute; right: 18px; bottom: 6px; z-index: 5; width: 74px; height: 74px;
  display: grid; place-items: center; text-align: center; border-radius: 50%; border: 2px solid #0a0a0a; background: #ff4fd8;
  font: 800 16px/1 var(--font); color: #0a0a0a; transform: rotate(-12deg); pointer-events: none;
  animation: hm-wobble 3s ease-in-out infinite;
}
@keyframes hm-wobble { 50% { transform: rotate(-6deg) scale(1.04); } }