/* Layouts + light/dark, chosen from the gear menu (themes.js).
   Added 2026-09-16. Loaded after style.css, which keeps all the structure;
   this file only swaps tokens and restyles per layout.

   <html data-layout="graphite|midnight|terminal" data-theme="dark|light">
   themes.js always sets both (it resolves "Match system" to dark/light),
   so every selector here is scoped by both attributes and outranks the
   original palette in style.css. */

/* ===================================================================
   Tokens
   =================================================================== */
/* Shared design tokens (2026-09-21, from the UI Design Rulebook and the
   Shadows & Elevation Rulebook in the project):
   - spacing on a 4/8px grid: use these for new work;
   - one elevation scale, --elev-1 (flat tags) to --elev-4 (modals), lit
     from directly above (x offset 0), layered, tinted with each theme's
     darkest colour. In dark themes a raised surface is also lighter
     (--surface-raised), because shadows barely show on near-black;
   - --control-border is the edge of anything you type into or press
     that relies on its border to be seen: 3:1 against the page (WCAG
     1.4.11). --line / --line-strong stay for decorative dividers;
   - no pill shapes (Things Never to Use): --r-pill is a small radius.
   2026-10-16 (refactor audit J21): one radius scale, smallest first:
   --r-2xs (bars, swatches), --r-xs, --r-pill (tags), --r-sm, --r-md, --r
   (cards); each layout sets all six. The status fills (--status-info /
   -warn / -caution / -crit, each with its -ink, and --status-warn-text for
   amber text on a surface) are defined in every layout x mode below, so
   test_ui_rules.py holds them to 4.5:1 like every other colour. */
:root {
  --r: 10px; --r-sm: 8px; --r-pill: 6px; --r-md: 10px; --r-xs: 4px; --r-2xs: 2px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --shadow-rgb: 0 0 0;
  --trend: #F2C14E;   /* trend lines; Graphite light sets a darker one */
  --arrange-glow: #FFD23F;   /* "Arrange this tab": the bars' first flash and the bead (layout.js); same in every theme */
  --arrange-glow-ink: #1A1A1A;   /* the bars' text and edges while they flash --arrange-glow (12:1) */
  --arrange-bead: #FFF6D5;   /* the bead itself and the lit drag handles */
}
:root, :root[data-theme="light"] {
  --elev-1: 0 1px 2px rgb(var(--shadow-rgb) / 0.06), 0 1px 3px rgb(var(--shadow-rgb) / 0.08);
  --elev-2: 0 1px 3px rgb(var(--shadow-rgb) / 0.08), 0 4px 8px -2px rgb(var(--shadow-rgb) / 0.10);
  --elev-3: 0 2px 4px -1px rgb(var(--shadow-rgb) / 0.08), 0 8px 16px -4px rgb(var(--shadow-rgb) / 0.12), 0 16px 32px -8px rgb(var(--shadow-rgb) / 0.14);
  --elev-4: 0 4px 8px -2px rgb(var(--shadow-rgb) / 0.10), 0 16px 32px -8px rgb(var(--shadow-rgb) / 0.16), 0 32px 64px -16px rgb(var(--shadow-rgb) / 0.24);
}
:root[data-theme="dark"] {
  --elev-1: 0 1px 2px rgb(var(--shadow-rgb) / 0.30);
  --elev-2: 0 1px 3px rgb(var(--shadow-rgb) / 0.30), 0 4px 8px -2px rgb(var(--shadow-rgb) / 0.30);
  --elev-3: 0 2px 4px -1px rgb(var(--shadow-rgb) / 0.30), 0 12px 24px -6px rgb(var(--shadow-rgb) / 0.40);
  --elev-4: 0 4px 8px -2px rgb(var(--shadow-rgb) / 0.35), 0 24px 48px -12px rgb(var(--shadow-rgb) / 0.55);
}

/* ---------- Graphite ---------- */
:root[data-layout="graphite"] {
  --font-display: "Geist", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --font-body: "Geist", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", monospace;
  --r: 12px; --r-sm: 8px; --r-pill: 6px; --r-md: 10px; --r-xs: 4px; --r-2xs: 2px;
}
:root[data-layout="graphite"][data-theme="dark"] {
  color-scheme: dark;
  /* Cointrail look on a Material-style dark grey (2026-10-08, Matthew): #121212
     base, not pure black (less halation for astigmatic eyes, no OLED smear on
     scroll, and room for lighter layers); off-white #E0E0E0 text; accents with
     the saturation taken down so they don't glare. Pure black is the separate
     OLED option (:root[data-oled] below).
     2026-10-12 (Matthew: "very monotone ... like an old time movie"): the same lightness, tinted a
     little blue (GitHub's dark greys are, which is why they read as a screen, not film): #10141A base,
     #1A1F27 cards, cool off-white text. Every contrast pair is re-checked in test_ui_rules.py. */
  --bg: #10141A; --surface: #1A1F27; --surface-2: #212731;
  --ink: #E1E6ED; --ink-muted: #A2ABB8;
  --line: #2B323D; --line-strong: #3B4452;
  --accent: #7ECEAA; --accent-soft: #A6DEC4; --accent-ink: #0E1A14;
  --good: #79C398; --bad: #EC9993; --trend: #DBBE76;
  --cat-1: #06c2ff; --cat-2: #c37c3f; --cat-3: #8dd88e; --cat-4: #e0bc08; --cat-5: #fb3a9c; --cat-6: #f4e680; --cat-7: #6e7fff;
  --hm-ink-dark: #10141A; --hm-ink-light: #ffffff;
  --ember-0: #19211D; --ember-1: #1F3A2E; --ember-2: #2C5E48; --ember-3: #519A7A; --ember-4: #B8E3CF;
  --shadow: rgba(0, 0, 0, 0.5);
  --control-border: #717C8C; --surface-raised: #28303B; --shadow-rgb: 0 0 0;
  --status-info: #1D4ED8; --status-info-ink: #FFFFFF; --status-warn: #FBBF24; --status-warn-ink: #1F1300;
  --status-caution: #F59E0B; --status-caution-ink: #1F1300; --status-crit: #B91C1C; --status-crit-ink: #FFFFFF;
  --status-warn-text: #FBBF24;
}
:root[data-layout="graphite"][data-theme="light"] {
  color-scheme: light;
  --bg: #F7F7F8; --surface: #FFFFFF; --surface-2: #F0F1F3;
  --ink: #111214; --ink-muted: #5E626A;
  --line: #E3E4E8; --line-strong: #CDD0D6;
  --accent: #08734C; --accent-soft: #3FA57C; --accent-ink: #FFFFFF;
  --good: #1A7B44; --bad: #C2352E; --trend: #8A5F00;
  --cat-1: #1394d2; --cat-2: #dd6b14; --cat-3: #007352; --cat-4: #876522; --cat-5: #6f2f60; --cat-6: #1e1e67; --cat-7: #643db7;
  --hm-ink-dark: #111214; --hm-ink-light: #ffffff;
  --ember-0: #E3F5EC; --ember-1: #A9E2C6; --ember-2: #5CC293; --ember-3: #1E8E5E; --ember-4: #0A4A31;
  --shadow: rgba(17, 18, 20, 0.10);
  --control-border: #838A99; --surface-raised: #FFFFFF; --shadow-rgb: 17 18 20;
  --status-info: #1D4ED8; --status-info-ink: #FFFFFF; --status-warn: #FBBF24; --status-warn-ink: #1F1300;
  --status-caution: #F59E0B; --status-caution-ink: #1F1300; --status-crit: #B91C1C; --status-crit-ink: #FFFFFF;
  --status-warn-text: #92400E;
}

/* ---------- Midnight ---------- */
:root[data-layout="midnight"] {
  --font-display: "Sora", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --font-body: "Sora", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --font-mono: "DM Mono", ui-monospace, Menlo, Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", monospace;
  --r: 16px; --r-sm: 10px; --r-pill: 10px; --r-md: 12px; --r-xs: 6px; --r-2xs: 2px;
}
:root[data-layout="midnight"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #070A13; --surface: #0D1221; --surface-2: #151B30;
  --ink: #E9ECF7; --ink-muted: #8D95B2;
  --line: #1B2239; --line-strong: #2B3453;
  --accent: #6FA8FF; --accent-soft: #9CC4FF; --accent-ink: #04122A;
  --good: #4FD1A5; --bad: #F07A8A;
  --cat-1: #06c2ff; --cat-2: #c37c3f; --cat-3: #8dd88e; --cat-4: #e0bc08; --cat-5: #fb3a9c; --cat-6: #f4e680; --cat-7: #6e7fff;
  --hm-ink-dark: #070A13; --hm-ink-light: #ffffff;
  --ember-0: #111B33; --ember-1: #173466; --ember-2: #1F58B0; --ember-3: #4F8FEA; --ember-4: #BFD8FF;
  --shadow: rgba(0, 0, 0, 0.55);
  --control-border: #5466A2; --surface-raised: #1D2440; --shadow-rgb: 2 4 12;
  --status-info: #1D4ED8; --status-info-ink: #FFFFFF; --status-warn: #FBBF24; --status-warn-ink: #1F1300;
  --status-caution: #F59E0B; --status-caution-ink: #1F1300; --status-crit: #B91C1C; --status-crit-ink: #FFFFFF;
  --status-warn-text: #FBBF24;
}
:root[data-layout="midnight"][data-theme="light"] {
  color-scheme: light;
  --bg: #F3F4FA; --surface: #FFFFFF; --surface-2: #EEF0F8;
  --ink: #0E1330; --ink-muted: #5A6284;
  --line: #E0E3F0; --line-strong: #C8CDE2;
  --accent: #1F5FCC; --accent-soft: #5B8DE0; --accent-ink: #FFFFFF;
  --good: #107B56; --bad: #C43650;
  --cat-1: #1394d2; --cat-2: #dd6b14; --cat-3: #007352; --cat-4: #876522; --cat-5: #6f2f60; --cat-6: #1e1e67; --cat-7: #643db7;
  --hm-ink-dark: #0E1330; --hm-ink-light: #ffffff;
  --ember-0: #E6EFFD; --ember-1: #B5CEF6; --ember-2: #7AA6EC; --ember-3: #2F6BD0; --ember-4: #0F3A80;
  --shadow: rgba(14, 19, 48, 0.10);
  --control-border: #7B87B9; --surface-raised: #FFFFFF; --shadow-rgb: 14 19 48;
  --status-info: #1D4ED8; --status-info-ink: #FFFFFF; --status-warn: #FBBF24; --status-warn-ink: #1F1300;
  --status-caution: #F59E0B; --status-caution-ink: #1F1300; --status-crit: #B91C1C; --status-crit-ink: #FFFFFF;
  --status-warn-text: #92400E;
}

/* ---------- Terminal ---------- */
:root[data-layout="terminal"] {
  --font-display: "JetBrains Mono", ui-monospace, Menlo, Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", monospace;
  --font-body: "JetBrains Mono", ui-monospace, Menlo, Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", monospace;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", monospace;
  --r: 0px; --r-sm: 0px; --r-pill: 0px; --r-md: 0px; --r-xs: 0px; --r-2xs: 0px;
}
:root[data-layout="terminal"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #050505; --surface: #0B0B0B; --surface-2: #151515;
  --ink: #E8E8E6; --ink-muted: #8F8F8B;
  --line: #1F1F1F; --line-strong: #363636;
  --accent: #F7931A; --accent-soft: #FFB257; --accent-ink: #050505;
  --good: #46D38A; --bad: #FF6B6B;
  --cat-1: #06c2ff; --cat-2: #c37c3f; --cat-3: #8dd88e; --cat-4: #e0bc08; --cat-5: #fb3a9c; --cat-6: #f4e680; --cat-7: #6e7fff;
  --hm-ink-dark: #050505; --hm-ink-light: #ffffff;
  --ember-0: #161616; --ember-1: #343434; --ember-2: #6B6B6B; --ember-3: #B5B5B5; --ember-4: #FFFFFF;
  --shadow: rgba(0, 0, 0, 0.6);
  --control-border: #646464; --surface-raised: #1F1F1F; --shadow-rgb: 0 0 0;
  --status-info: #1D4ED8; --status-info-ink: #FFFFFF; --status-warn: #FBBF24; --status-warn-ink: #1F1300;
  --status-caution: #F59E0B; --status-caution-ink: #1F1300; --status-crit: #B91C1C; --status-crit-ink: #FFFFFF;
  --status-warn-text: #FBBF24;
}
:root[data-layout="terminal"][data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF; --surface: #FAFAFA; --surface-2: #F1F1F1;
  --ink: #0A0A0A; --ink-muted: #5C5C5C;
  --line: #E4E4E4; --line-strong: #C9C9C9;
  --accent: #9E5C00; --accent-soft: #D98A1F; --accent-ink: #FFFFFF;
  --good: #137A43; --bad: #C8322B;
  --cat-1: #1394d2; --cat-2: #dd6b14; --cat-3: #007352; --cat-4: #876522; --cat-5: #6f2f60; --cat-6: #1e1e67; --cat-7: #643db7;
  --hm-ink-dark: #0A0A0A; --hm-ink-light: #ffffff;
  --ember-0: #F0F0F0; --ember-1: #CFCFCF; --ember-2: #999999; --ember-3: #5A5A5A; --ember-4: #151515;
  --shadow: rgba(0, 0, 0, 0.10);
  --control-border: #8A8A8A; --surface-raised: #FFFFFF; --shadow-rgb: 10 10 10;
  --status-info: #1D4ED8; --status-info-ink: #FFFFFF; --status-warn: #FBBF24; --status-warn-ink: #1F1300;
  --status-caution: #F59E0B; --status-caution-ink: #1F1300; --status-crit: #B91C1C; --status-crit-ink: #FFFFFF;
  --status-warn-text: #92400E;
}

/* ---------- Neon ---------- */
:root[data-layout="neon"] {
  --font-display: "Chakra Petch", "Geist", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --font-body: "IBM Plex Mono", ui-monospace, Menlo, Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", monospace;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", monospace;
  --r: 4px; --r-sm: 3px; --r-pill: 3px; --r-md: 4px; --r-xs: 2px; --r-2xs: 2px;
}
:root[data-layout="neon"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1214; --surface: #141B1F; --surface-2: #1A242A;
  --ink: #E8F1F3; --ink-muted: #8A9BA1;
  --line: #1E282C; --line-strong: #2E3D44;
  --accent: #17A3BA; --accent-soft: #5FE3F5; --accent-ink: #04181C;
  --good: #3FBF7F; --bad: #FF6E76;
  --cat-1: #06c2ff; --cat-2: #c37c3f; --cat-3: #8dd88e; --cat-4: #e0bc08; --cat-5: #fb3a9c; --cat-6: #f4e680; --cat-7: #6e7fff;
  --hm-ink-dark: #0E1214; --hm-ink-light: #ffffff;
  --ember-0: #12232A; --ember-1: #1B3F4A; --ember-2: #227E93; --ember-3: #3FC4DC; --ember-4: #B9F3FA;
  --shadow: rgba(0, 0, 0, 0.6);
  --control-border: #5C7480; --surface-raised: #202C33; --shadow-rgb: 0 0 0;
  --status-info: #1D4ED8; --status-info-ink: #FFFFFF; --status-warn: #FBBF24; --status-warn-ink: #1F1300;
  --status-caution: #F59E0B; --status-caution-ink: #1F1300; --status-crit: #B91C1C; --status-crit-ink: #FFFFFF;
  --status-warn-text: #FBBF24;
}
:root[data-layout="neon"][data-theme="light"] {
  color-scheme: light;
  --bg: #F4F8F9; --surface: #FFFFFF; --surface-2: #EAF1F2;
  --ink: #0E1214; --ink-muted: #4B5D63;
  --line: #DCE6E8; --line-strong: #C2D0D3;
  --accent: #0A6B7A; --accent-soft: #1E93A8; --accent-ink: #FFFFFF;
  --good: #157A4A; --bad: #C22A30;
  --cat-1: #1394d2; --cat-2: #dd6b14; --cat-3: #007352; --cat-4: #876522; --cat-5: #6f2f60; --cat-6: #1e1e67; --cat-7: #643db7;
  --hm-ink-dark: #0E1214; --hm-ink-light: #ffffff;
  --ember-0: #E3F2F4; --ember-1: #B9DEE3; --ember-2: #6DB9C4; --ember-3: #2C8A9A; --ember-4: #0A4A55;
  --shadow: rgba(14, 18, 20, 0.10);
  --control-border: #6B7F84; --surface-raised: #FFFFFF; --shadow-rgb: 14 18 20;
  --status-info: #1D4ED8; --status-info-ink: #FFFFFF; --status-warn: #FBBF24; --status-warn-ink: #1F1300;
  --status-caution: #F59E0B; --status-caution-ink: #1F1300; --status-crit: #B91C1C; --status-crit-ink: #FFFFFF;
  --status-warn-text: #92400E;
}

/* ---------- Landing page brand (2026-10-08) ----------
   The front page (landing.html, body.lp-page) is pinned to Graphite dark
   and wears these on top: a navy-black night sky for the hero and Bitcoin
   orange as its one accent. Kept apart from --accent so a visitor's accent
   preset (accent.js) can't recolour the brand. --lp-amber is the "amber"
   preset's dark value, already held to 4.5:1 on every Graphite surface by
   tests/test_accents.py; tests/test_landing_page.py checks the hero pairs.
   The hero is always dark, whatever the visitor's theme. */
.lp-page {
  --lp-sky: #070B16; --lp-sky-2: #0F1830; --lp-horizon: #2A1C12;
  --lp-field: #8A4708; --lp-glow: #F7931A; --lp-star: #E8ECF5;
  --lp-ink: #F4F1EA; --lp-ink-muted: #C3C8D4;
  --lp-amber: #F7931A; --lp-amber-soft: #FFB257; --lp-amber-ink: #0A0A0A;
  --lp-scrim-rgb: 7 11 22;
}

/* ===================================================================
   Shared: radii follow the layout's tokens
   =================================================================== */
:root[data-layout] .summary, :root[data-layout] .mini-stats, :root[data-layout] .heat-wrap,
:root[data-layout] .bv-wrap, :root[data-layout] .hist-wrap, :root[data-layout] .mr-card,
:root[data-layout] .wa-wrap, :root[data-layout] .wl-card, :root[data-layout] .wl-add,
:root[data-layout] .wl-edit, :root[data-layout] .wl-empty, :root[data-layout] .card,
:root[data-layout] .wallet-manage-panel { border-radius: var(--r); }
:root[data-layout] .bv-tile, :root[data-layout] .bv-tip, :root[data-layout] .bars-controls select,
:root[data-layout] .wallet-manage-form input, :root[data-layout] .wallet-manage-form button,
:root[data-layout] .wl-feed-head select, :root[data-layout] .wl-add input,
:root[data-layout] .wl-add textarea { border-radius: var(--r-sm); }
:root[data-layout] .toggle, :root[data-layout] .toggle button, :root[data-layout] .wchip,
:root[data-layout] .bv-chip, :root[data-layout] .wallet-manage-toggle, :root[data-layout] .wallet-manage-remove,
:root[data-layout] .wl-btn, :root[data-layout] .mr-pill, :root[data-layout] .mr-chip,
:root[data-layout] .wa-pill, :root[data-layout] .rarity-badge { border-radius: var(--r-pill); }
:root[data-layout] .kicker { color: var(--ink-muted); }
:root[data-layout] #btcPrice { color: var(--ink); }
:root[data-layout] .masthead { padding-right: 56px; }

/* ===================================================================
   Graphite -- calm, hairlines, no filled panels, one large number
   =================================================================== */
:root[data-layout="graphite"] .wrap { max-width: 1480px; padding-block: 36px 72px; }
:root[data-layout="graphite"] body { padding: 0 32px; }
:root[data-layout="graphite"] .masthead { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 8px; align-items: center; }
:root[data-layout="graphite"] .masthead h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
:root[data-layout="graphite"] .masthead .kicker { font-size: 12px; letter-spacing: 0.02em; text-transform: none; font-weight: 500; margin-bottom: 2px; }
:root[data-layout="graphite"] .wallet-meta { flex-direction: row; align-items: center; gap: 20px; font-family: var(--font-mono); font-size: 12px; }
:root[data-layout="graphite"] .tab-bar { border-bottom: none; gap: 28px; margin-bottom: 12px; }
:root[data-layout="graphite"] .tab-btn { font-size: 14px; font-weight: 500; padding: 8px 0; }
:root[data-layout="graphite"] .section-head { margin: 48px 0 16px; }
:root[data-layout="graphite"] .section-head h2 { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
:root[data-layout="graphite"] .section-head h3,
:root[data-layout="graphite"] .mr-card-head h3,
:root[data-layout="graphite"] .wl-feed-head h3 { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
:root[data-layout="graphite"] .dual-col { gap: var(--space-5); }
:root[data-layout="graphite"] .stat-label { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
:root[data-layout="graphite"] .stat-value { font-weight: 500; letter-spacing: -0.03em; }
/* summary: no boxes, hero on its own row */
:root[data-layout="graphite"] .summary {
  background: transparent; border: none; border-top: 1px solid var(--line); border-radius: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; overflow: visible;
}
:root[data-layout="graphite"] .summary > div { background: transparent; padding: 20px 24px 20px 0; }
:root[data-layout="graphite"] .summary > div + div { border-left: 1px solid var(--line); padding-left: 24px; }
:root[data-layout="graphite"] .summary > div:first-child {
  grid-column: 1 / -1; border-bottom: 1px solid var(--line); padding: 28px 0 28px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px;
}
:root[data-layout="graphite"] .summary > div:first-child > * { grid-column: 1; }
:root[data-layout="graphite"] .summary > div:first-child .toggle-row { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0; }
:root[data-layout="graphite"] .summary > div:nth-child(2) { border-left: none; padding-left: 0; }
:root[data-layout="graphite"] .stat-value.hero { font-size: 48px; line-height: 0.95; color: var(--ink); letter-spacing: -0.05em; margin: 4px 0 8px; }
/* The Overview's own summary, tighter (2026-10-19, Peter's notes: "less padding around inscriptions
   held, collections and spendable btc ... keep estimated portfolio value large and prominent"). The
   value keeps its 48px; the rows around it lose about half their height. */
:root[data-layout="graphite"] .ov-summary > div:first-child { padding: 12px 0; }
:root[data-layout="graphite"] .ov-summary > div { padding-top: 12px; padding-bottom: 4px; }
:root[data-layout="graphite"] .ov-summary > div + div { padding-left: 16px; }
:root[data-layout="graphite"] .ov-summary > div:nth-child(2) { padding-left: 0; }
:root[data-layout="graphite"] .ov-summary > div:not(:first-child) .stat-value { font-size: 20px; }
:root[data-layout="graphite"] .ov-card .ov-summary { margin: var(--space-2) 0 0; }
:root[data-layout="graphite"] .toggle { background: transparent; }
:root[data-layout="graphite"] .toggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
/* Colour that says something (2026-10-12, Matthew): the selected wallet, the chosen valuation, the page
   you're on and the one main action carry the accent; everything else stays calm grey. */
:root[data-layout="graphite"] .site-tab.is-active {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); box-shadow: inset 3px 0 0 var(--accent);
}
:root[data-layout="graphite"] .acct-badge { color: var(--accent); border-color: var(--accent); }
:root[data-layout="graphite"] .wchip { background: transparent; }
:root[data-layout="graphite"] .wchip[aria-pressed="true"] { background: var(--surface-2); color: var(--accent); border-color: var(--accent); }
:root[data-layout="graphite"] .mini-stats { background: transparent; border: none; border-radius: 0; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
:root[data-layout="graphite"] .mini-stats > div { background: transparent; padding: 16px 16px 16px 0; }
:root[data-layout="graphite"] .mini-stats > div + div { border-left: 1px solid var(--line); padding-left: 16px; }
:root[data-layout="graphite"] .mini-stats .stat-value { font-size: 22px; }
:root[data-layout="graphite"] .heat-wrap,
:root[data-layout="graphite"] .bv-wrap,
:root[data-layout="graphite"] .hist-wrap,
:root[data-layout="graphite"] .mr-card,
:root[data-layout="graphite"] .wa-wrap,
:root[data-layout="graphite"] .wallet-manage-panel,
:root[data-layout="graphite"] .wl-add { background: transparent; }
:root[data-layout="graphite"] .bv-tile { background: transparent; }
:root[data-layout="graphite"] .bv-tile[aria-selected="true"] { background: var(--surface-2); }
:root[data-layout="graphite"] .card { background: transparent; }
:root[data-layout="graphite"] .card-name { font-weight: 500; }
:root[data-layout="graphite"] .card-value { color: var(--ink); }
:root[data-layout="graphite"] .meter { background: var(--line); }
:root[data-layout="graphite"] footer.page-foot { margin-top: 64px; }

/* OLED black (2026-10-08, Matthew): an Appearance option for always-on OLED
   screens where battery matters most. Pure black page, cards one step up so
   layers still read; text stays off-white. Checked by tests/test_ui_rules.py. */
:root[data-oled][data-theme="dark"] {
  --bg: #000000; --surface: #121212; --surface-2: #1A1A1A; --surface-raised: #242424;
  --line: #1F1F1F; --line-strong: #2E2E2E; --control-border: #737373;
  --hm-ink-dark: #000000;
}

/* Cointrail skin (2026-10-08 redesign). Panels sit in cards on the near-black
   canvas; a wide analytics column beside a right rail from 1200px. */
:root[data-layout="graphite"] .ov-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--space-5);
}
/* a card whose every part is hidden (its source is off) takes no room */
:root[data-layout="graphite"] .ov-card:not(:has(> :not([hidden]))) { padding: 0; border: 0; background: none; }
:root[data-layout="graphite"] [data-grid^="overview"] { row-gap: var(--space-4); }
:root[data-layout="graphite"] .ov-card .section-head,
:root[data-layout="graphite"] .ov-card > .section-head:first-child,
:root[data-layout="graphite"] .ov-card .news-card > .section-head { margin: 0 0 var(--space-4); }
:root[data-layout="graphite"] .ov-card .summary { margin-top: var(--space-4); }
:root[data-layout="graphite"] .since-tile { background: var(--surface); }
:root[data-layout="graphite"] .tab-bar { gap: var(--space-5); border-bottom: 1px solid var(--line); margin-bottom: var(--space-5); }
:root[data-layout="graphite"] .tab-btn { min-height: 44px; }
@media (min-width: 1200px) {
  :root[data-layout="graphite"] .dual-col { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); }
}
/* Big screens (2026-10-16, Matthew: "doesn't stretch to fill the whole screen on large screens"): past 1920px
   the page grows with the window instead of stopping at 1480px, up to 2400px, and the side column widens. */
@media (min-width: 1920px) {
  :root[data-layout="graphite"] .wrap { max-width: min(100%, 2400px); }
  :root[data-layout="graphite"] .dual-col { grid-template-columns: minmax(0, 1fr) minmax(400px, 520px); }
}
@media (max-width: 1199px) {
  :root[data-layout="graphite"] .dual-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  :root[data-layout="graphite"] .ov-card { padding: var(--space-4); }
}

/* ===================================================================
   Midnight -- sidebar + rounded cards
   =================================================================== */
:root[data-layout="midnight"] body { padding: 0; }
:root[data-layout="midnight"] .wrap {
  max-width: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  min-height: 100vh;
}
:root[data-layout="midnight"] .wrap::before {
  content: ""; grid-column: 1; grid-row: 1 / -1;
  background: var(--surface); border-right: 1px solid var(--line);
}
:root[data-layout="midnight"] .masthead,
:root[data-layout="midnight"] .tab-bar { grid-column: 1; position: relative; z-index: 1; }
:root[data-layout="midnight"] .masthead {
  grid-row: 1; flex-direction: column; align-items: stretch; gap: 20px;
  border: none; margin: 0; padding: 28px 20px 24px;
}
:root[data-layout="midnight"] .masthead h1 {
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px;
}
:root[data-layout="midnight"] .masthead h1::before {
  content: ""; width: 28px; height: 28px; border-radius: 9px; flex: none;
  background:
    linear-gradient(45deg, transparent 38%, var(--accent-ink) 38% 62%, transparent 62%) center / 12px 12px no-repeat,
    var(--accent);
}
:root[data-layout="midnight"] .masthead .kicker { font-size: 12px; letter-spacing: 0.08em; margin-bottom: 8px; }
:root[data-layout="midnight"] .wallet-meta {
  align-items: flex-start; gap: 4px; padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2); font-size: 12px;
}
:root[data-layout="midnight"] #btcPrice { font-size: 16px; }
:root[data-layout="midnight"] .tab-bar {
  grid-row: 2; flex-direction: column; align-items: stretch; gap: 2px;
  border: none; margin: 0; padding: 0 12px 24px; overflow: visible;
}
:root[data-layout="midnight"] .tab-btn {
  font-size: 14px; font-weight: 500; text-align: left;
  padding: 8px 12px; border: none; border-radius: 10px; margin: 0;
  display: flex; align-items: center; gap: 12px;
}
:root[data-layout="midnight"] .tab-btn::before {
  content: ""; width: 18px; height: 18px; flex: none;
  background: currentColor;
  -webkit-mask: var(--tab-ico) center / contain no-repeat;
  mask: var(--tab-ico) center / contain no-repeat;
}
#tabBtnOverview { --tab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
#tabBtnMempool { --tab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E"); }
#tabBtnMine, .tab-btn.view-tab { --tab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E"); }
.tab-btn.view-add { --tab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
#tabBtnGallery { --tab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 17l-5-5-9 8'/%3E%3C/svg%3E"); }
#tabBtnWatch { --tab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
#tabBtnMints { --tab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 12l6-6'/%3E%3C/svg%3E"); }
#tabBtnActivity { --tab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 17 9 11 13 15 21 7'/%3E%3Cpolyline points='15 7 21 7 21 13'/%3E%3C/svg%3E"); }
:root[data-layout="midnight"] .tab-btn:hover { background: var(--surface-2); color: var(--ink); }
:root[data-layout="midnight"] .tab-btn[aria-selected="true"] { color: var(--ink); }
:root[data-layout="midnight"] .tab-indicator {
  top: var(--tab-y, 0px); height: var(--tab-h, 0px); border-radius: 10px;
  background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent);
}
:root[data-layout="midnight"] .tab-panel { grid-column: 2; grid-row: 1 / 4; padding: 72px 36px 0; min-width: 0; }
:root[data-layout="midnight"] footer.page-foot { grid-column: 2; grid-row: 4; margin: 40px 36px 32px; }
:root[data-layout="midnight"] .masthead { padding-right: 20px; }
:root[data-layout="midnight"] .dual-col { gap: 24px; }
/* panels read as cards */
:root[data-layout="midnight"] .col-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px;
}
:root[data-layout="midnight"] .section-head h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
:root[data-layout="midnight"] .section-head h3,
:root[data-layout="midnight"] .mr-card-head h3,
:root[data-layout="midnight"] .wl-feed-head h3 { font-size: 15px; font-weight: 600; }
:root[data-layout="midnight"] .section-head { margin: 36px 0 16px; }
:root[data-layout="midnight"] .stat-label { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
:root[data-layout="midnight"] .stat-value { font-weight: 600; letter-spacing: -0.02em; }
:root[data-layout="midnight"] .summary,
:root[data-layout="midnight"] .mini-stats {
  background: transparent; border: none; gap: 8px; overflow: visible;
}
:root[data-layout="midnight"] .summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root[data-layout="midnight"] .summary > div,
:root[data-layout="midnight"] .mini-stats > div {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
}
:root[data-layout="midnight"] .summary > div:first-child {
  grid-column: 1 / -1; padding: 24px;
  /* flat, no purple gradient (Things Never to Use); the accent edge keeps it the lead card */
  background: var(--surface-2); border-top: 2px solid var(--accent);
}
:root[data-layout="midnight"] .stat-value.hero { font-size: 44px; line-height: 1; color: var(--ink); letter-spacing: -0.04em; margin: 8px 0 4px; }
:root[data-layout="midnight"] .heat-wrap,
:root[data-layout="midnight"] .bv-wrap,
:root[data-layout="midnight"] .hist-wrap,
:root[data-layout="midnight"] .wa-wrap { background: var(--surface-2); border-radius: 12px; }
:root[data-layout="midnight"] .bv-tile { background: var(--surface); }
:root[data-layout="midnight"] .toggle { background: var(--surface); padding: 4px; }
:root[data-layout="midnight"] .toggle button { border-radius: 8px; font-weight: 500; }
:root[data-layout="midnight"] .toggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
:root[data-layout="midnight"] .card { background: var(--surface); }
:root[data-layout="midnight"] .card-name { font-weight: 600; }
:root[data-layout="midnight"] .meter { background: var(--line); }
@media (max-width: 980px) {
  :root[data-layout="midnight"] .wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
  :root[data-layout="midnight"] .wrap::before { grid-column: 1; grid-row: 1 / 3; border-right: none; border-bottom: 1px solid var(--line); }
  :root[data-layout="midnight"] .masthead { grid-row: 1; padding: 20px 64px 12px 16px; }
  :root[data-layout="midnight"] .wallet-meta { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }
  :root[data-layout="midnight"] .tab-bar { grid-row: 2; flex-direction: row; overflow-x: auto; padding: 0 12px 12px; }
  :root[data-layout="midnight"] .tab-indicator { box-shadow: inset 0 -2px 0 var(--accent); }
  :root[data-layout="midnight"] .tab-panel { grid-column: 1; grid-row: 3; padding: 20px 16px 0; }
  :root[data-layout="midnight"] footer.page-foot { grid-column: 1; grid-row: 4; margin: 32px 16px 24px; }
  :root[data-layout="midnight"] .col-panel { padding: 16px; }
}

/* ===================================================================
   Terminal -- true black, monospace, square, dense
   =================================================================== */
:root[data-layout="terminal"] body { padding: 0 24px; }
:root[data-layout="terminal"] .wrap { max-width: 1600px; padding-block: 20px 48px; }
:root[data-layout="terminal"] .masthead {
  border-bottom: 1px solid var(--line-strong); padding-bottom: 16px; margin-bottom: 0; align-items: center;
}
:root[data-layout="terminal"] .masthead h1 {
  font-size: 18px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
:root[data-layout="terminal"] .masthead h1::before { content: ""; width: 10px; height: 20px; background: var(--accent); flex: none; }
:root[data-layout="terminal"] .masthead .kicker { font-size: 12px; letter-spacing: 0.12em; }
:root[data-layout="terminal"] .wallet-meta { flex-direction: row; align-items: center; gap: 24px; font-size: 12px; text-transform: uppercase; }
:root[data-layout="terminal"] #btcPrice { color: var(--accent); }
:root[data-layout="terminal"][data-theme="light"] #btcPrice { color: var(--ink); }
:root[data-layout="terminal"] .tab-bar { gap: 0; border-bottom: 1px solid var(--line-strong); margin: 0 0 8px; }
:root[data-layout="terminal"] .tab-btn {
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 16px; border-bottom: none; margin: 0;
}
:root[data-layout="terminal"] .tab-btn[aria-selected="true"] { color: var(--bg); }
:root[data-layout="terminal"] .tab-indicator {
  top: var(--tab-y, 0px); height: var(--tab-h, 0px); border-radius: 0; background: var(--ink);
}
:root[data-layout="terminal"] .section-head { margin: 32px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
:root[data-layout="terminal"] .section-head h2,
:root[data-layout="terminal"] .section-head h3,
:root[data-layout="terminal"] .mr-card-head h3,
:root[data-layout="terminal"] .wl-feed-head h3 {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
:root[data-layout="terminal"] .section-head .note { font-size: 12px; }
:root[data-layout="terminal"] .dual-col { gap: 0; }
:root[data-layout="terminal"] .dual-col > .col-panel:first-child { padding-right: 28px; }
:root[data-layout="terminal"] .dual-col > .col-panel + .col-panel { padding-left: 28px; border-left: 1px solid var(--line-strong); }
:root[data-layout="terminal"] .stat-label { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; }
:root[data-layout="terminal"] .stat-value { font-weight: 500; letter-spacing: -0.02em; }
:root[data-layout="terminal"] .stat-value.hero { font-size: clamp(36px, 4.5vw, 52px); line-height: 1; color: var(--accent); margin: 4px 0; }
:root[data-layout="terminal"][data-theme="light"] .stat-value.hero { color: var(--ink); }
:root[data-layout="terminal"] .summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root[data-layout="terminal"] .summary > div:first-child { grid-column: 1 / -1; }
:root[data-layout="terminal"] .summary,
:root[data-layout="terminal"] .mini-stats,
:root[data-layout="terminal"] .heat-wrap,
:root[data-layout="terminal"] .bv-wrap,
:root[data-layout="terminal"] .hist-wrap,
:root[data-layout="terminal"] .mr-card,
:root[data-layout="terminal"] .wa-wrap,
:root[data-layout="terminal"] .card { border-color: var(--line-strong); }
:root[data-layout="terminal"] .summary > div,
:root[data-layout="terminal"] .mini-stats > div { background: var(--bg); }
:root[data-layout="terminal"] .summary,
:root[data-layout="terminal"] .mini-stats { background: var(--line-strong); }
:root[data-layout="terminal"] .heat-wrap,
:root[data-layout="terminal"] .bv-wrap,
:root[data-layout="terminal"] .hist-wrap,
:root[data-layout="terminal"] .mr-card,
:root[data-layout="terminal"] .wa-wrap,
:root[data-layout="terminal"] .card { background: var(--bg); }
:root[data-layout="terminal"] .toggle { background: transparent; padding: 0; gap: 0; }
:root[data-layout="terminal"] .toggle button { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 12px; }
:root[data-layout="terminal"] .toggle button + button { border-left: 1px solid var(--line-strong); }
:root[data-layout="terminal"] .toggle button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
:root[data-layout="terminal"] .wchip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
:root[data-layout="terminal"] .bv-tile { background: var(--bg); }
:root[data-layout="terminal"] .bv-tile[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
:root[data-layout="terminal"] .bar-row,
:root[data-layout="terminal"] .market-row { border-bottom: 1px solid var(--line); padding: 8px 0; }
:root[data-layout="terminal"] .bars { gap: 0; }
:root[data-layout="terminal"] .card-name { font-weight: 500; font-size: 13px; }
:root[data-layout="terminal"] .card-value { color: var(--ink); }
:root[data-layout="terminal"] .meter { background: var(--line-strong); }
:root[data-layout="terminal"] .meter-fill { background: var(--ink); }
:root[data-layout="terminal"] .mempool-caveat { font-size: 12px; }
:root[data-layout="terminal"] footer.page-foot { text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; }
:root[data-layout="terminal"] .collapse-toggle { text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; }
@media (max-width: 980px) {
  :root[data-layout="terminal"] .dual-col > .col-panel:first-child { padding-right: 0; }
  :root[data-layout="terminal"] .dual-col > .col-panel + .col-panel { padding-left: 0; border-left: none; }
  :root[data-layout="terminal"] .wallet-meta { gap: 4px 16px; flex-wrap: wrap; }
}

/* ===================================================================
   Neon -- instrument-cluster readout: square, monospace labels, a bright
   core colour over a duller fill instead of any blurred glow (the
   elevation scale bans stray box-shadow blur, so "glow" here is always a
   two-tone colour relationship -- --accent-soft as the bright core,
   --accent as the duller base beneath it -- never a filter or shadow).
   =================================================================== */
:root[data-layout="neon"] body { padding: 0 24px; }
:root[data-layout="neon"] .wrap { max-width: 1600px; padding-block: 20px 48px; }
:root[data-layout="neon"] .masthead {
  border-bottom: 1px solid var(--line-strong); padding-bottom: 16px; margin-bottom: 0; align-items: center;
}
:root[data-layout="neon"] .masthead h1 {
  font-size: 18px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
:root[data-layout="neon"] .masthead h1::before { content: ""; width: 8px; height: 18px; background: var(--accent-soft); flex: none; }
:root[data-layout="neon"] .masthead .kicker { font-size: 12px; letter-spacing: 0.14em; }
:root[data-layout="neon"] .wallet-meta { flex-direction: row; align-items: center; gap: 24px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
:root[data-layout="neon"] #btcPrice { color: var(--accent-soft); }
:root[data-layout="neon"] .tab-bar { gap: 0; border-bottom: 1px solid var(--line-strong); margin: 0 0 8px; }
:root[data-layout="neon"] .tab-btn {
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 12px 16px; border-bottom: 2px solid transparent; margin: 0 0 -1px;
}
:root[data-layout="neon"] .tab-btn:hover { color: var(--ink); }
:root[data-layout="neon"] .tab-btn[aria-selected="true"] { color: var(--accent-soft); background: transparent; }
:root[data-layout="neon"] .tab-indicator { --tab-indicator-color: var(--accent-soft); }
:root[data-layout="neon"] .section-head { margin: 32px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
:root[data-layout="neon"] .section-head h2,
:root[data-layout="neon"] .section-head h3,
:root[data-layout="neon"] .mr-card-head h3,
:root[data-layout="neon"] .wl-feed-head h3 {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--font-mono);
}
:root[data-layout="neon"] .section-head .note { font-size: 12px; }
:root[data-layout="neon"] .dual-col { gap: 0; }
:root[data-layout="neon"] .dual-col > .col-panel:first-child { padding-right: 28px; }
:root[data-layout="neon"] .dual-col > .col-panel + .col-panel { padding-left: 28px; border-left: 1px solid var(--line-strong); }
:root[data-layout="neon"] .stat-label { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
:root[data-layout="neon"] .stat-value { font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
:root[data-layout="neon"] .stat-value.hero {
  font-size: clamp(40px, 4.5vw, 58px); line-height: 1; color: var(--accent-soft); margin: 8px 0;
  font-weight: 600; text-shadow: none;
}
:root[data-layout="neon"] .summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root[data-layout="neon"] .summary > div:first-child { grid-column: 1 / -1; }
:root[data-layout="neon"] .summary,
:root[data-layout="neon"] .mini-stats,
:root[data-layout="neon"] .heat-wrap,
:root[data-layout="neon"] .bv-wrap,
:root[data-layout="neon"] .hist-wrap,
:root[data-layout="neon"] .mr-card,
:root[data-layout="neon"] .wa-wrap,
:root[data-layout="neon"] .card { border-color: var(--line-strong); }
:root[data-layout="neon"] .summary > div,
:root[data-layout="neon"] .mini-stats > div { background: var(--surface); }
:root[data-layout="neon"] .summary,
:root[data-layout="neon"] .mini-stats { background: var(--line-strong); }
:root[data-layout="neon"] .heat-wrap,
:root[data-layout="neon"] .bv-wrap,
:root[data-layout="neon"] .hist-wrap,
:root[data-layout="neon"] .mr-card,
:root[data-layout="neon"] .wa-wrap,
:root[data-layout="neon"] .card { background: var(--surface); }
:root[data-layout="neon"] .toggle { background: var(--bg); padding: 0; gap: 0; border: 1px solid var(--line-strong); }
:root[data-layout="neon"] .toggle button { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 12px; }
:root[data-layout="neon"] .toggle button + button { border-left: 1px solid var(--line-strong); }
:root[data-layout="neon"] .toggle button[aria-pressed="true"] { background: var(--surface-2); color: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent-soft); }
:root[data-layout="neon"] .wchip[aria-pressed="true"] { background: var(--surface-2); color: var(--accent-soft); border-color: var(--accent-soft); }
:root[data-layout="neon"] .bv-tile { background: var(--surface); }
:root[data-layout="neon"] .bv-tile[aria-selected="true"] { border-color: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-soft); }
:root[data-layout="neon"] .bar-row,
:root[data-layout="neon"] .market-row { border-bottom: 1px solid var(--line); padding: 8px 0; }
:root[data-layout="neon"] .bars { gap: 0; }
:root[data-layout="neon"] .card-name { font-weight: 500; font-size: 13px; }
:root[data-layout="neon"] .card-value { color: var(--ink); font-variant-numeric: tabular-nums; }
:root[data-layout="neon"] .meter { background: var(--line-strong); }
/* the fill's own bright cap line is the gauge's "bright core stroke over a
   darker fill", the same two-layer technique the reference SVG gauges use,
   just as a border instead of a second stroke. */
:root[data-layout="neon"] .meter-fill { background: var(--accent); border-top: 2px solid var(--accent-soft); }
:root[data-layout="neon"] .mempool-caveat { font-size: 12px; }
:root[data-layout="neon"] footer.page-foot { text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; }
:root[data-layout="neon"] .collapse-toggle { text-transform: uppercase; font-size: 12px; letter-spacing: 0.08em; }
@media (max-width: 980px) {
  :root[data-layout="neon"] .dual-col > .col-panel:first-child { padding-right: 0; }
  :root[data-layout="neon"] .dual-col > .col-panel + .col-panel { padding-left: 0; border-left: none; }
  :root[data-layout="neon"] .wallet-meta { gap: 4px 16px; flex-wrap: wrap; }
}

/* ---------- small screens, all layouts ---------- */
@media (max-width: 640px) {
  :root[data-layout] body { padding: 0 16px; }
  :root[data-layout="midnight"] body { padding: 0; }
  :root[data-layout] .summary { grid-template-columns: 1fr 1fr; }
  :root[data-layout] .summary > div:nth-child(4) { grid-column: 1 / -1; }
  :root[data-layout="graphite"] .summary > div:first-child { grid-template-columns: 1fr; }
  :root[data-layout="graphite"] .summary > div:first-child .toggle-row { grid-column: 1; grid-row: auto; margin-top: 12px; }
  :root[data-layout="graphite"] .summary > div:nth-child(3) { border-left: 1px solid var(--line); }
  :root[data-layout="graphite"] .summary > div:nth-child(4) { border-left: none; padding-left: 0; border-top: 1px solid var(--line); }
  :root[data-layout="graphite"] .mini-stats > div:nth-child(3) { border-left: none; padding-left: 0; }
  /* Status, price, language and sign-in on one wrapping row, not four stacked
     lines (2026-10-08: the phone masthead was ~330px tall). */
  :root[data-layout="graphite"] .wallet-meta,
  :root[data-layout="terminal"] .wallet-meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  :root[data-layout="graphite"] .masthead { align-items: flex-start; }
  :root[data-layout="terminal"] .masthead h1 { font-size: 15px; }
}

/* ===================================================================
   Gear menu
   =================================================================== */
.ui-gear {
  position: absolute; top: 20px; right: 20px; z-index: 50;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-muted); cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
:root[data-layout="terminal"] .ui-gear { border-radius: 0; top: 16px; }
:root[data-layout="midnight"] .ui-gear { top: 22px; right: 28px; border-radius: 12px; }
.ui-gear:hover, .ui-gear[aria-expanded="true"] { color: var(--ink); border-color: var(--accent); }
.ui-gear svg { width: 20px; height: 20px; transition: transform 0.3s ease; }
.ui-gear[aria-expanded="true"] svg { transform: rotate(60deg); }
@media (prefers-reduced-motion: reduce) { .ui-gear svg { transition: none; } }
.ui-gear:focus-visible, .ui-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ui-menu {
  position: absolute; top: 68px; right: 20px; z-index: 51;
  width: 300px; max-width: calc(100vw - 32px);
  background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: var(--elev-3);
  padding: 16px; font-family: var(--font-body);
}
.ui-menu[hidden] { display: none; }
:root[data-layout="terminal"] .ui-menu { border-radius: 0; top: 64px; }
:root[data-layout="midnight"] .ui-menu { right: 28px; top: 70px; }
.ui-menu-label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted); margin: 2px 4px 8px;
}
.ui-layouts { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.ui-layout {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; align-items: center; gap: 12px;
  width: 100%; text-align: left; padding: 8px; min-height: 52px;
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  color: var(--ink); font: inherit; cursor: pointer;
}
:root[data-layout="terminal"] .ui-layout { border-radius: 0; }
.ui-layout:hover { background: var(--surface-2); }
.ui-layout[aria-checked="true"] { border-color: var(--line-strong); background: var(--surface-2); }
.ui-layout b { display: block; font-size: 13.5px; font-weight: 600; }
.ui-layout small { display: block; font-size: 12px; color: var(--ink-muted); margin-top: 1px; }
.ui-check { width: 16px; height: 16px; color: var(--accent); visibility: hidden; }
.ui-layout[aria-checked="true"] .ui-check { visibility: visible; }
/* little previews; fixed colors so each shows its own look */
.ui-swatch { width: 44px; height: 32px; border-radius: 7px; position: relative; overflow: hidden; border: 1px solid var(--line-strong); }
.ui-swatch i { position: absolute; display: block; }
.ui-swatch.graphite { background: #0C0D0F; }
.ui-swatch.graphite i:nth-child(1) { left: 6px; top: 7px; width: 18px; height: 6px; border-radius: 2px; background: #EDEEF0; }
.ui-swatch.graphite i:nth-child(2) { left: 6px; bottom: 7px; width: 32px; height: 3px; border-radius: 2px; background: #8BDDF5; }
.ui-swatch.midnight { background: #070A13; }
.ui-swatch.midnight i:nth-child(1) { left: 0; top: 0; bottom: 0; width: 11px; background: #151B30; }
.ui-swatch.midnight i:nth-child(2) { left: 16px; top: 7px; width: 22px; height: 17px; border-radius: 4px; background: #6FA8FF; }
.ui-swatch.terminal { background: #050505; border-radius: 0; }
.ui-swatch.terminal i:nth-child(1) { left: 6px; top: 7px; width: 4px; height: 8px; background: #F7931A; }
.ui-swatch.terminal i:nth-child(2) { left: 6px; bottom: 7px; width: 32px; height: 1px; background: #8F8F8B; box-shadow: 0 -4px 0 #8F8F8B; }
.ui-swatch.neon { background: #0E1214; border-radius: 3px; }
.ui-swatch.neon i:nth-child(1) { left: 6px; top: 7px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #17A3BA; background: transparent; }
.ui-swatch.neon i:nth-child(2) { left: 6px; bottom: 7px; width: 32px; height: 2px; background: #5FE3F5; }
.ui-modes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px;
  padding: 4px; border: 1px solid var(--line-strong); border-radius: 10px;
}
:root[data-layout="terminal"] .ui-modes { border-radius: 0; }
/* The Panels row holds one full-width action, not a three-way choice. */
.ui-modes.ui-one { grid-template-columns: 1fr; }
/* Prices has four choices: two across, two down, so the labels fit. */
.ui-modes.ui-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-modes.ui-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Appearance has four choices since OLED black (2026-10-08): two by two */
#uiModes, #prefModes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* `display` beats the hidden attribute, so a flex/grid row that is
   sometimes hidden needs to say so -- the Panels row when the visitor's
   tier doesn't include arranging, and (2026-10-03) Layout/Appearance/
   Accent/Prices/Money once signed in, moved to the account page instead
   (themes.js's syncAccountMove()). Without this they stayed on screen. */
.ui-modes[hidden], .ui-menu-label[hidden], .ui-layouts[hidden], .ui-accents[hidden] { display: none; }
.ui-mode {
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-muted);
  background: transparent; border: none; border-radius: 7px; padding: 8px 4px; min-height: 36px; cursor: pointer;
}
:root[data-layout="terminal"] .ui-mode { border-radius: 0; }
.ui-mode:hover { color: var(--ink); }
.ui-mode[aria-checked="true"] { background: var(--ink); color: var(--bg); }

/* Rune detail view (2026-09-16): its sections follow each layout's cards */
:root[data-layout] .rd-sec, :root[data-layout] .rd-panel { border-radius: var(--r); }
:root[data-layout="graphite"] .rd-sec { background: transparent; }
:root[data-layout="terminal"] .rd-sec { background: var(--bg); border-color: var(--line-strong); }
:root[data-layout="terminal"] .rd-panel { border-radius: 0; }
:root[data-layout] .rd-head h2 { font-family: var(--font-display); }
/* KPI grids with more than one row under the hero (collection page, 2026-09-21):
   each row starts flush left, like the first. */
:root[data-layout="graphite"] .rd-kpis > div:nth-child(3n+2) { border-left: none; padding-left: 0; }

/* ===================================================================
   UI rulebook pass (2026-09-21): site-wide accessibility defaults.
   See UI-Design-Rulebook.md and UI-Shadows-and-Elevation-Rulebook.md.
   =================================================================== */

/* One visible keyboard focus ring everywhere (WCAG 2.4.7), in the accent,
   which is at least 3:1 against every theme's surfaces. :where() keeps it
   at zero specificity so a component's own ring still wins. */
:where(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Skip link: off screen until a keyboard user tabs to it. */
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 2000;
  padding: 8px 16px; border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-ink);
  font: 600 14px/1.4 var(--font-body); text-decoration: none;
}
.skip-link:focus, .skip-link:focus-visible { top: 8px; outline-offset: 2px; }

/* Anything you type into gets a 3:1 edge (WCAG 1.4.11). */
:root[data-layout] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]),
:root[data-layout] select,
:root[data-layout] textarea { border-color: var(--control-border); }
:root[data-layout] input[type="checkbox"], :root[data-layout] input[type="radio"] { accent-color: var(--accent); }

/* Target size: stacked links in tables and cards are at least 24px tall
   (WCAG 2.5.8). */
.pl-item, .pl-coll, .up-item > a { min-height: 24px; line-height: 24px; }
.wl-addr a { display: inline-block; min-height: 24px; line-height: 24px; }

/* A link inside a line of text must be told apart by more than colour. */
.sn-meta .rd-addr { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--ink-muted); }

/* Chart columns focused from the keyboard get a visible edge. */
.hist-chart .col-hit:focus-visible { stroke: var(--accent); stroke-width: 2; }

/* Respect reduced motion everywhere, not just where we remembered to. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* Category colours are tuned for marks, not text: on light surfaces the
   text uses of them are mixed half-and-half with the ink so they read at
   4.5:1 (checked for every light theme). */
:root[data-theme="light"] .is-thumb.g-brc { color: color-mix(in srgb, var(--cat-4) 50%, var(--ink)); }
:root[data-theme="light"] .is-thumb.g-img { color: color-mix(in srgb, var(--cat-1) 50%, var(--ink)); }
:root[data-theme="light"] .is-thumb.g-html { color: color-mix(in srgb, var(--cat-5) 50%, var(--ink)); }
:root[data-theme="light"] .is-thumb.g-txt { color: color-mix(in srgb, var(--cat-3) 50%, var(--ink)); }
.is-name, .is-coll { display: inline-flex; align-items: center; min-height: 24px; }

/* The page title and its tags (app/version.py inject(), 2026-10-17): the tags
   sit after the </h1>, not inside it, so the heading is only the title. On the
   document pages the heading runs inline, so the tags follow its last word
   exactly as when they were inside it, wrapped title or not; the dashboard's
   short masthead title keeps its own display (a flex row in some layouts) and
   sits in a row with them. */
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.doc-head .title-row { display: block; margin-top: 4px; }
.doc-head .title-row > h1 { display: inline; margin: 0; }

/* Build number beside each page title (app/version.py). Turn off with
   SHOW_VERSION=false in .env. */
.ver-tag {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: 0 8px; border: 1px solid var(--control-border); border-radius: min(var(--r-sm), 4px);
  font: 500 12px/20px var(--font-mono); letter-spacing: 0; text-transform: none;
  color: var(--ink-muted); white-space: nowrap; cursor: help;
}
.ver-tag.stale { color: var(--ink); border-color: var(--accent); }
.ver-tag.demo-tag { color: var(--accent); border-color: var(--accent); }

/* The release number, beside it (app/release.py). Unlike the build tag this
   one is public, permanent, and a link: the question after seeing a version
   is always what changed in it. */
.rel-tag {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: 0 8px; border: 1px solid var(--control-border); border-radius: min(var(--r-sm), 4px);
  font: 500 12px/20px var(--font-mono); letter-spacing: 0; text-transform: none;
  color: var(--ink-muted); white-space: nowrap; text-decoration: none;
}
.rel-tag:hover, .rel-tag:focus-visible { color: var(--ink); border-color: var(--accent); }

/* Accent colour swatches in the gear menu (accent.js presets). */
.ui-accents { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 4px 0; }
.ui-accent {
  height: 28px; border-radius: 6px; cursor: pointer;
  background: var(--sw); border: 1px solid var(--control-border);
}
.ui-accent[aria-checked="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.ui-accent:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
:root[data-layout="terminal"] .ui-accent { border-radius: 0; }

/* Tabs of your own (myview.js): the "+" and the rename field. */
.tab-btn.view-add { font-weight: 600; min-width: 32px; }
.tab-btn.view-add[hidden] { display: none; }
.mv-name { font: inherit; font-size: inherit; font-weight: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--control-border); border-radius: var(--r-sm); padding: 0 8px; max-width: 24ch; }
#mvDelete[hidden] { display: none; }
:root[data-layout="midnight"] .tab-btn.view-add::before { display: none; }
:root[data-layout="midnight"] .tab-btn.view-add { justify-content: center; }
.tab-btn[hidden] { display: none !important; }
/* The tab list is a wrapper for ARIA only; its tabs lay out as if it weren't there. */
.tab-list { display: contents; }

/* ===================================================================
   Paper and Neon appearance previews (2026-10-13, Peter's idea, Matthew
   approved exploring them). Two extra Appearance choices, not layouts:
   themes.js / account_prefs.js keep data-layout="graphite" (ONE_LOOK) and
   add data-skin="paper" (with data-theme="light") or data-skin="neon"
   (with data-theme="dark"). Every token is redefined here, so neither
   inherits a colour by accident; tests/test_ui_rules.py checks contrast and
   tests/test_palette_cvd.py the chart colours, the same as for the other
   themes. Marked "(preview)" in the menu until Matthew decides to keep them.
   =================================================================== */

/* ---------- Paper: a blank manila page with ink and pencil sketches ---------- */
:root[data-skin="paper"][data-theme="light"] {
  color-scheme: light;
  --font-display: "Playfair Display", Georgia, "Times New Roman", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Serif CJK SC", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", monospace;
  --r: 12px; --r-sm: 8px; --r-pill: 6px; --r-md: 10px; --r-xs: 4px; --r-2xs: 2px;
  --bg: #EDE3CC; --surface: #F6EEDC; --surface-2: #E6D9BC;
  --ink: #2A2119; --ink-muted: #5E5040;
  --line: #D6C7A6; --line-strong: #B5A27F;
  --accent: #1F4F96; --accent-soft: #4A73B4; --accent-ink: #FFFFFF;
  --good: #2B6230; --bad: #A6281F; --trend: #7A4C00;
  --cat-1: #1978be; --cat-2: #8e0d05; --cat-3: #336934; --cat-4: #946c09; --cat-5: #a2245f; --cat-6: #282769; --cat-7: #5743be;
  --hm-ink-dark: #2A2119; --hm-ink-light: #ffffff;
  --ember-0: #E4DCC6; --ember-1: #B9C6CF; --ember-2: #7FA0BA; --ember-3: #3D6E9A; --ember-4: #183F66;
  --shadow: rgba(60, 40, 10, 0.12);
  --control-border: #7F6E53; --surface-raised: #FBF6EA; --shadow-rgb: 60 40 10;
  --status-info: #1D4ED8; --status-info-ink: #FFFFFF; --status-warn: #FBBF24; --status-warn-ink: #1F1300;
  --status-caution: #F59E0B; --status-caution-ink: #1F1300; --status-crit: #B91C1C; --status-crit-ink: #FFFFFF;
  --status-warn-text: #92400E;
  /* the sheet's grain: fractal noise, tinted sepia, drawn in the stylesheet (no image file) */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.26 0 0 0 0 0.12 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  /* a hand-drawn box: no two corners alike */
  --sketch-r: 14px 5px 12px 6px / 6px 12px 5px 14px;
  --sketch-r-sm: 8px 3px 7px 4px / 4px 7px 3px 8px;
}
:root[data-skin="paper"] body {
  background-color: var(--bg);
  background-image:
    var(--paper-grain),
    repeating-linear-gradient(23deg, rgb(110 80 30 / 0.035) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-61deg, rgb(110 80 30 / 0.025) 0 1px, transparent 1px 13px);
}
/* sheets laid on the board: lighter stock, an ink edge, a faint second pencil pass */
:root[data-skin="paper"] .ov-card,
:root[data-skin="paper"] .rd-sec,
:root[data-skin="paper"] .rd-panel {
  background-color: var(--surface); background-image: var(--paper-grain);
  border: 1px solid var(--ink-muted); border-radius: var(--sketch-r);
  outline: 1px solid rgb(94 80 64 / 0.3); outline-offset: 3px;
}
:root[data-skin="paper"] .rd-panel { outline: none; }
:root[data-skin="paper"] .since-tile,
:root[data-skin="paper"] .ct-cell,
:root[data-skin="paper"] .bv-wrap,
:root[data-skin="paper"] .hist-wrap,
:root[data-skin="paper"] .heat-wrap,
:root[data-skin="paper"] .fh-wrap,
:root[data-skin="paper"] .ci-item {
  border: 1px solid var(--ink-muted); border-radius: var(--sketch-r-sm);
}
:root[data-skin="paper"] .since-tile { background-color: var(--surface); background-image: var(--paper-grain); }
/* empty states and dividers are pencil dashes */
:root[data-skin="paper"] .ct-state { border: 1px dashed var(--ink-muted); border-radius: var(--sketch-r-sm); }
:root[data-skin="paper"] .ct-source { border-top: 1px dashed var(--line-strong); }
:root[data-skin="paper"] .tab-bar { border-bottom: 1px dashed var(--line-strong); }
:root[data-skin="paper"] .side-nav { background-color: var(--surface-2); background-image: var(--paper-grain); border-right: 2px solid var(--ink-muted); }
:root[data-skin="paper"] .site-tab.is-active { background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink-muted); border-radius: var(--sketch-r-sm); }
/* headings set like a printed field notebook; figures typed */
:root[data-skin="paper"] :is(h1, h2, h3) { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }
:root[data-skin="paper"] .ct-stat-v,
:root[data-skin="paper"] .since-v,
:root[data-skin="paper"] .ct-donut-v,
:root[data-skin="paper"] .stat-value { font-family: var(--font-mono); font-weight: 500; }
/* the active tab is underlined by hand: a wavy ink line */
:root[data-skin="paper"] .tab-indicator { background: transparent; height: 6px; top: calc(var(--tab-y, 0px) + var(--tab-h, 0px) - 5px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6'%3E%3Cpath d='M0 3 Q4 0 8 3 T16 3' fill='none' stroke='%231F4F96' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x; border-radius: 0; }
/* charts drawn in ink on graph paper: dashed grid, a fine pen line, hatched-looking outlined bars */
:root[data-skin="paper"] .ct-grid { stroke: var(--line-strong); stroke-dasharray: 2 4; }
:root[data-skin="paper"] .ct-line { stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
:root[data-skin="paper"] .ct-area { fill-opacity: 0.08; }
:root[data-skin="paper"] .ct-bar { fill-opacity: 0.16; stroke: var(--accent); stroke-width: 1; }
:root[data-skin="paper"] .ct-bar.ct-bar-under { fill-opacity: 0.1; }
:root[data-skin="paper"] .ct-vol { fill-opacity: 0.18; stroke: var(--ink-muted); stroke-width: 1; }
:root[data-skin="paper"] .ct-trend { stroke-dasharray: 6 3; stroke-linecap: round; }
:root[data-skin="paper"] .ct-donut-track { stroke: var(--line); stroke-dasharray: 3 3; }
:root[data-skin="paper"] .ct-range { background: transparent; border: 1px solid var(--ink-muted); border-radius: var(--sketch-r-sm); }
:root[data-skin="paper"] .ui-menu { background-image: var(--paper-grain); border-radius: var(--sketch-r); }
/* the front page in Paper: the night sky becomes a sheet of card stock, the
   brand orange a burnt-sienna ink (4.5:1 on the stock; checked in test_ui_rules) */
:root[data-skin="paper"] .lp-page {
  --lp-sky: #EDE3CC; --lp-sky-2: #E4D6B6; --lp-horizon: #D9C49C;
  --lp-field: #C79A5A; --lp-glow: #B86A1E; --lp-star: #5E5040;
  --lp-ink: #2A2119; --lp-ink-muted: #5E5040;
  --lp-amber: #8A4200; --lp-amber-soft: #6E3300; --lp-amber-ink: #FFFFFF;
  --lp-scrim-rgb: 237 227 204;
}
/* the front page's wordmark is the dark-sky file only (landing.html); on card stock it swaps to the ink one */
:root[data-skin="paper"] .lp-mark img { content: url("/brand/atrium-xbt-wordmark-light.svg"); }
@media (max-width: 420px) { :root[data-skin="paper"] .lp-mark img { content: url("/brand/atrium-xbt-wordmark-small-light.svg"); } }

/* ---------- Neon: a night-drive instrument panel, a few things lit ---------- */
:root[data-skin="neon"][data-theme="dark"] {
  color-scheme: dark;
  --font-display: "Chakra Petch", "Geist", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --r: 6px; --r-sm: 4px; --r-pill: 4px; --r-md: 5px; --r-xs: 3px; --r-2xs: 2px;
  --bg: #0B0A16; --surface: #131126; --surface-2: #1A1733;
  --ink: #ECE8FF; --ink-muted: #A8A0CF;
  --line: #272246; --line-strong: #3A3366;
  --accent: #3FE0FF; --accent-soft: #A2F1FF; --accent-ink: #05121A;
  --good: #4BF5A6; --bad: #FF6B9A; --trend: #FFB347;
  --cat-1: #4D8DFF; --cat-2: #FF8A3D; --cat-3: #3DF29A; --cat-4: #ffd13a; --cat-5: #fa4bc3; --cat-6: #E8F7FF; --cat-7: #d6a0ff;
  --hm-ink-dark: #0B0A16; --hm-ink-light: #ffffff;
  --ember-0: #141228; --ember-1: #1B2E52; --ember-2: #1F5F8C; --ember-3: #2FAFD9; --ember-4: #B5F4FF;
  --shadow: rgba(0, 0, 0, 0.6);
  --control-border: #7468B8; --surface-raised: #241F45; --shadow-rgb: 0 0 0;
  --status-info: #1D4ED8; --status-info-ink: #FFFFFF; --status-warn: #FBBF24; --status-warn-ink: #1F1300;
  --status-caution: #F59E0B; --status-caution-ink: #1F1300; --status-crit: #B91C1C; --status-crit-ink: #FFFFFF;
  --status-warn-text: #FBBF24;
  /* Glow, not elevation: a lit edge, used only on the few things that are
     "on" (the active tab and nav item, a focused control, the pressed
     toggle). Not on cards, so it stays a signal. */
  --neon-glow: 0 0 0 1px rgb(63 224 255 / 0.55), 0 0 12px rgb(63 224 255 / 0.35);
  --neon-text-glow: 0 0 6px rgb(63 224 255 / 0.45), 0 0 18px rgb(63 224 255 / 0.2);
}
/* a faint dashboard grid and scan lines on the page itself; z-index -1 keeps the lines behind the
   cards and text, so they never cut into anything you read */
:root[data-skin="neon"] body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgb(90 120 255 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(90 120 255 / 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}
:root[data-skin="neon"] body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.28) 0 1px, transparent 1px 3px);
}
:root[data-skin="neon"] .ov-card,
:root[data-skin="neon"] .rd-sec,
:root[data-skin="neon"] .rd-panel { border-color: var(--line-strong); border-top-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong)); }
:root[data-skin="neon"] .side-nav { background: #0E0C1E; border-right-color: var(--line-strong); }
/* instrument labels: small caps, spaced */
:root[data-skin="neon"] .ct-stat-k,
:root[data-skin="neon"] .since-k,
:root[data-skin="neon"] .stat-label { text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; }
:root[data-skin="neon"] :is(h1, h2, h3) { font-family: var(--font-display); letter-spacing: 0.02em; }
/* the big readouts glow, in the squared dashboard face */
:root[data-skin="neon"] .ct-stat-v,
:root[data-skin="neon"] .since-v,
:root[data-skin="neon"] .ct-donut-v,
:root[data-skin="neon"] .stat-value.hero,
:root[data-skin="neon"] .rd-kpis .stat-value {
  font-family: "Chakra Petch", var(--font-mono); font-weight: 600; letter-spacing: 0.02em;
  color: var(--accent-soft); text-shadow: var(--neon-text-glow);
  animation: neon-on 900ms steps(1, end) 1 both;
}
/* a tube warming up: one short flicker on load, never repeated; off under reduced motion */
@keyframes neon-on { 0% { opacity: 0.25; } 12% { opacity: 1; } 18% { opacity: 0.5; } 30% { opacity: 1; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-skin="neon"] .ct-stat-v, :root[data-skin="neon"] .since-v, :root[data-skin="neon"] .ct-donut-v,
  :root[data-skin="neon"] .stat-value.hero, :root[data-skin="neon"] .rd-kpis .stat-value { animation: none; }
}
/* what is "on" is lit */
:root[data-skin="neon"] .tab-indicator { box-shadow: var(--neon-glow); }
:root[data-skin="neon"] .tab-btn[aria-selected="true"] { color: var(--accent-soft); text-shadow: var(--neon-text-glow); }
:root[data-skin="neon"] .site-tab.is-active { color: var(--accent-soft); box-shadow: var(--neon-glow); }
:root[data-skin="neon"] .site-tab.is-active .side-ico { filter: drop-shadow(0 0 4px rgb(63 224 255 / 0.7)); }
:root[data-skin="neon"] .ct-range button[aria-pressed="true"],
:root[data-skin="neon"] .ct-filters button[aria-pressed="true"] { color: var(--accent-soft); border-color: var(--accent); box-shadow: var(--neon-glow); }
:root[data-skin="neon"] .toggle button[aria-pressed="true"] { box-shadow: var(--neon-glow); }
:root[data-skin="neon"] :is(input, select, textarea, button):focus-visible { box-shadow: var(--neon-glow); }
/* chart strokes glow; fills stay dim so the line reads */
:root[data-skin="neon"] .ct-line,
:root[data-skin="neon"] .ct-trend { filter: drop-shadow(0 0 3px currentColor); color: var(--accent); }
:root[data-skin="neon"] .ct-trend { color: var(--trend); }
:root[data-skin="neon"] .ct-area { fill-opacity: 0.1; }
:root[data-skin="neon"] .ct-bar { fill-opacity: 0.7; }
:root[data-skin="neon"] .ct-donut { filter: drop-shadow(0 0 4px rgb(63 224 255 / 0.3)); }
/* the front page at night: the same sky, a little deeper, the headline lit */
:root[data-skin="neon"] .lp-page {
  --lp-sky: #060515; --lp-sky-2: #0E0B2A; --lp-horizon: #1E1026;
  --lp-scrim-rgb: 6 5 21;
}
:root[data-skin="neon"] .lp-reel-window,
:root[data-skin="neon"] .lp-btn { text-shadow: 0 0 10px rgb(247 147 26 / 0.55); }