/* == SEANCE DESIGN BLOCK - BEGIN. Generated by tools/seance_lite.py design-commit. Do not hand-edit; regenerate. == */
/* selection: {"accent": "plex-mono", "body": "inter", "brand": "fell", "header": "grotesk", "spacing": "standard", "textstyle": "quiet-caps"} */
html[data-theme]{
  --font-brand: 'IM Fell English',Georgia,serif;
  --font-d: 'Space Grotesk',system-ui,sans-serif;
  --font-head: 'Space Grotesk',system-ui,sans-serif;
  --font-m: 'IBM Plex Mono',ui-monospace,monospace;
  --font-mono: 'IBM Plex Mono',ui-monospace,monospace;
  --font-b: 'Inter',system-ui,sans-serif;
  --font-body: 'Inter',system-ui,sans-serif;
  --r: 3px;
  --sp-section: 80px;
  --sp-hero-t: 96px;
  --sp-hero-b: 80px;
  --lh-body: 1.7;
  --label-transform: uppercase;
  --label-tracking: .06em;
  --label-weight: 500;
  --head-weight: 600;
  --head-tracking: -.01em;
}
/* == SEANCE DESIGN BLOCK - END == */

/*
 * themes.css — astro-retrofuture (reckon.retrofuture.tech) site theme layer.
 *
 * ┌─ CANONICAL SOURCE OF TRUTH ────────────────────────────────────────────┐
 * │ The design-system theme tokens are canonical in @reckon/canvas:         │
 * │   foundry/sites/astro-reckon/packages/canvas/src/tokens/colors.css      │
 * │   + tokens/theme-default.js  (see tokens/THEME-CONTRACT.md — one rule:   │
 * │   every page bg is --color-bg, set only by a [data-theme] block, defined │
 * │   only in the DS, default light). THAT file governs the DS-based sites   │
 * │   (cust-dashboard, admin-dashboard) which consume @reckon/canvas.        │
 * │                                                                          │
 * │ THIS file is the retrofuture MARKETING site's separate, richer layer:   │
 * │ a different token contract (--bg/--surface/--font-* + --color-* aliases),│
 * │ site-only themes (portfolio/dusk/mint) and per-page inline themes        │
 * │ (molten/brutalist). It reuses two names (cockpit, dead-reckoning) with   │
 * │ intentionally different palettes and does NOT yet import @reckon/canvas. │
 * │                                                                          │
 * │ MIGRATION SEAM (removal condition): retiring this file = wire            │
 * │ @reckon/canvas into astro-retrofuture's Astro build, port the --bg       │
 * │ contract + site-only themes onto the DS [data-theme] tokens, rewire the  │
 * │ ~10 pages that <link href="/themes.css">, then delete. Tracked as        │
 * │ discovered work (retrofuture.theme.ds.port). Until then the DS above is  │
 * │ canonical; this file is the documented retrofuture-only exception.       │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * Each theme keyed by html[data-theme="..."]
 *
 * Canonical token contract (used across index.html, membench.html, and future pages):
 *   --bg           page background
 *   --surface      card / panel background (one step off --bg)
 *   --surface-2    deeper panel layer (two steps off --bg)
 *   --text         primary body text
 *   --mid          secondary text (captions, labels)
 *   --muted        tertiary / placeholder text
 *   --border       default border color
 *   --accent       primary brand accent
 *   --accent-2     secondary brand accent / complementary color
 *   --good         positive / success state
 *   --warn         warning / amber state
 *   --bad          error / danger state
 *   --font-head    heading font stack
 *   --font-body    body font stack
 *   --font-mono    monospace / code font stack
 *   --radius       default border-radius
 *   --shadow       default card shadow
 *   --shadow-sm    subtle shadow
 *
 * Additional per-theme tokens alias the page-specific vars (see below each theme block).
 *
 * PALETTE SWAPS (drop-in, change data-theme on <html>):
 *   revenant-light  — the revenant SPA's own look: light MINT ground, deep jewel TEAL
 *                     as the lead ink, black-ink brutalist rules, hard offset shadows
 *                     (DEFAULT for index.html)
 *   portfolio       — previous portfolio look: emerald / amber on white (retained; the
 *                     theme switcher still offers it, and no page is forced off it)
 *   cockpit         — membench neo-brutalist honey system (DEFAULT for membench.html)
 *   dead-reckoning  — light nautical: chart-paper cream + signal-orange + teal (no dark navy)
 *   dusk            — light indigo/violet on honey cream (replaces midnight dark mode)
 */

/* ─── FONT IMPORTS ──────────────────────────────────────────────────────────
   All four themes loaded here so themes.css is self-contained.
   Google Fonts: preconnect hints must appear in <head> of each page (already present). */

/* ─── THEME TRANSITION ──────────────────────────────────────────────────── */
html[data-theme-transitioning] *,
html[data-theme-transitioning] *::before,
html[data-theme-transitioning] *::after {
  transition:
    background-color 240ms ease,
    color 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme-transitioning] *,
  html[data-theme-transitioning] *::before,
  html[data-theme-transitioning] *::after {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   THEME: portfolio  (DEFAULT for index.html)
   Reproduces the current portfolio look exactly.
   Emerald (#10b981) primary, clean white base, slate text.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="portfolio"] {
  /* Canonical contract */
  --bg:           #ffffff;
  --surface:      #f8fdfb;
  --surface-2:    #f0fdf4;
  --text:         #0f172a;
  --mid:          #334155;
  --muted:        #64748b;
  --border:       #d1fae5;
  --accent:       #10b981;
  --accent-2:     #2563eb;
  --good:         #059669;
  --warn:         #f59e0b;
  --bad:          #e11d48;
  --font-head:    'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --radius:       10px;
  --shadow:       0 1px 3px rgba(0,0,0,.04), 0 4px 20px rgba(0,0,0,.06);
  --shadow-sm:    0 1px 2px rgba(0,0,0,.03);

  /* index.html page-specific aliases */
  --amber:        #10b981;
  --amber-50:     #f0fdf4;
  --amber-100:    #d1fae5;
  --green:        #059669;
  --green-50:     #f0fdf4;
  --green-100:    #d1fae5;
  --blue:         #2563eb;
  --blue-50:      #eff6ff;
  --violet:       #7c3aed;
  --violet-50:    #f5f3ff;
  --teal:         #0d9488;
  --teal-50:      #f0fdfa;
  --rose:         #e11d48;
  --rose-50:      #fff1f2;
  --navy:         #0f172a;
  --font-d:       'Space Grotesk', system-ui, sans-serif;
  --font-b:       'Inter', system-ui, sans-serif;
  --font-m:       'JetBrains Mono', 'Courier New', monospace;
  --r:            10px;

  /* membench page-specific aliases */
  --color-bg:           #ffffff;
  --color-surface:      #f8fdfb;
  --color-surface-2:    #f0fdf4;
  --color-border:       #d1fae5;
  --color-text:         #0f172a;
  --color-text-muted:   #64748b;
  --color-amber:        #10b981;
  --color-honey:        #34d399;
  --color-gold:         #059669;
  --color-emerald:      #059669;
  --color-jasper:       #e11d48;
  --color-coral:        #f472b6;
  --color-cream:        #f8fdfb;
  --veto-surface:       #fff1f2;
  --veto-border:        rgba(225,29,72,0.35);
  --border-width:       1px;
  --shadow-cell:        0 1px 3px rgba(0,0,0,.04), 0 4px 20px rgba(0,0,0,.06);
  --shadow-deep:        0 2px 8px rgba(0,0,0,.10);
  --shadow-soft:        0 2px 12px rgba(0,0,0,.06);
}

/* ══════════════════════════════════════════════════════════════════════════
   THEME: revenant-light  (DEFAULT for index.html as of 2026-07-29)
   The revenant design system, tuned lighter for retrofuture.tech.

   SOURCE OF EVERY COLOUR — nothing here is invented:
     revenant-dev/overlay/ui/custody-proof/styles/revenant-ds.css  (:root, L33-113)
     corpus/business/forensic-architecture-brief/build_deck.py     (THEMES["revenant"])
   The slide deck ships the same token set, so the site, the brief and the deck read
   as ONE system rather than three palettes that happen to rhyme. When the DS moves,
   change it there and re-quote it here; do not fork a fourth palette.

   "Lighter" = a lighter GROUND and MORE AIR, never weaker ink. Neo-brutalist bones
   are kept (thick borders, hard offset shadows, jewel tones); the lightening is done
   by raising the ground, opening whitespace, and using the jewel tones as accents
   rather than as fields. Every value below that carries text measures AA 4.5:1 or
   better on every ground it is used on — the full measured table is in the lane
   report, and the ratios are reproducible with contrast.py's ratio().

   TWO DS COLOURS ARE FILL-ONLY AND ARE DELIBERATELY NOT BOUND TO ANY TEXT ROLE:
     --accent-mid #12A377  3.08:1  DS L50 "FILL WEIGHT ONLY, never text"
     --ink-faint  #8AA79C  2.38:1  DS L44 "DISABLED/PLACEHOLDER ONLY, never a label"
   They appear below only under --fill-* / --disabled-* names, so that binding one to
   a text role reads as obviously wrong in review, not just in a contrast run.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="revenant-light"] {
  /* ── THE PALETTE. Ported from the revenant SPA's own token block, not retyped by eye:
        revenant-dev/overlay/ui/custody-proof/public/{mesh,vigil,seance}.html :root
        — the teal/mint set the running SPA actually computes (verified by reading
        getComputedStyle on the served app, not by reading a file in isolation: the
        SPA's dist build is stale and still carries the retired tan/amber values, which
        is exactly the trap of trusting a stylesheet you have not seen render).

        TEAL IS THE INK. MINT IS THE FILL. That split is forced by measurement, not
        taste: --teal #0E9E96 is 3.07:1 on the mint ground and white on it is 3.31:1,
        so it can never carry text. The SPA already ships the darker same-hue partner
        --teal-ink #0A5C57 for exactly this, at 7.27:1 on the ground and 5.97:1 on the
        mint fill, so the lead colour is deepened ALONG THE HUE rather than swapped for
        emerald or blue. Sapphire and garnet are supporting punctuation only — they do
        not compete with the teal/mint relationship for the page's identity.
        No amber, no gold, anywhere. ── */

  /* Canonical contract */
  --bg:           #E9FAF8;   /* SPA --paper     — light mint ground */
  --surface:      #FFFFFF;   /* SPA --card      — white card/band */
  --surface-2:    #CDE6E1;   /* SPA --line      — mint panel fill */
  --text:         #10302B;   /* SPA --ink       — 13.17:1 on --bg */
  --mid:          #10302B;   /* ink. --ink-dim is 4.45:1 on the mint fill, i.e. under
                                AA on a ground this page actually uses, so secondary
                                copy is carried by SIZE and WEIGHT, never by a lighter
                                hue. Same call the SPA makes for the same reason. */
  --muted:        #4C6B64;   /* SPA --ink-dim   — 5.42:1, PAPER AND WHITE ONLY */
  --border:       #10302B;   /* brutalist ink rule */
  --border-soft:  #A9D2CB;   /* SPA --line-bold — hairline */
  --accent:       #0A5C57;   /* SPA --teal-ink  — 7.27:1 THE LEAD, safe as text */
  --accent-fill:  #0E9E96;   /* SPA --teal      — 3.07:1 FILL/RULE ONLY, never text */
  --accent-2:     #1D4ED8;   /* SPA --sapphire  — supporting */
  --good:         #0A5C57;
  --warn:         #7B2233;   /* garnet — supporting */
  --bad:          #7B2233;
  --font-head:    'Space Grotesk', system-ui, sans-serif;  /* SPA --font-ui */
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --radius:       3px;                    /* SPA --radius-sm */
  --shadow:       6px 6px 0 #10302B;
  --shadow-sm:    0 1px 6px rgba(16,48,43,.08);
  --shadow-hard:  4px 4px 0 #10302B;      /* SPA --shadow-hard geometry */

  /* NOT TEXT — guarded by name, never bound to a text role. Measured on --bg:
     #0E9E96 3.07:1 · #7A968E 2.96:1 · #12A377 2.98:1 · #8AA79C 2.41:1 */
  --fill-teal:       #0E9E96;   /* SPA --teal */
  --fill-accent-mid: #12A377;   /* DS L50 */
  --disabled-ink:    #7A968E;   /* SPA --faint */

  /* index.html page-specific aliases. --amber keeps its NAME because ~200 existing
     rules consume it; its VALUE is the lead teal. Nothing on this page is amber. */
  --amber:        #0A5C57;
  --amber-50:     #CDE6E1;   /* mint fill — a fill, never text */
  --amber-100:    #A9D2CB;
  --green:        #0A5C57;
  --green-50:     #CDE6E1;
  --green-100:    #A9D2CB;
  --blue:         #1D4ED8;
  --blue-50:      #E6EDFB;
  --violet:       #1D4ED8;
  --violet-50:    #E6EDFB;
  --teal:         #0A5C57;
  --teal-50:      #CDE6E1;
  --rose:         #7B2233;
  --rose-50:      #F6EAEC;
  --navy:         #10302B;
  --font-d:       'Space Grotesk', system-ui, sans-serif;
  --font-b:       'Inter', system-ui, sans-serif;
  --font-m:       'JetBrains Mono', 'Courier New', monospace;
  --r:            3px;

  /* membench aliases — same key set as every other theme so a shared page cannot
     land on an undefined token and silently fall back to its initial value. */
  --color-bg:           #E9FAF8;
  --color-surface:      #FFFFFF;
  --color-surface-2:    #CDE6E1;
  --color-border:       #10302B;
  --color-text:         #10302B;
  --color-text-muted:   #4C6B64;
  --color-amber:        #0A5C57;
  --color-honey:        #0A5C57;
  --color-gold:         #0A5C57;
  --color-emerald:      #0A5C57;
  --color-jasper:       #7B2233;
  --color-coral:        #7B2233;
  --color-cream:        #FFFFFF;
  --veto-surface:       #F6EAEC;
  --veto-border:        rgba(123,34,51,0.35);
  --border-width:       3px;
  --shadow-cell:        4px 4px 0 #10302B;
  --shadow-deep:        6px 6px 0 #10302B;
  --shadow-soft:        0 1px 6px rgba(16,48,43,.08);
}

/* ══════════════════════════════════════════════════════════════════════════
   THEME: cockpit  (DEFAULT for membench.html)
   The formula-dashboard honey system: warm parchment bg, chunky neo-brutalist
   borders, VT323 mono, gold + emerald + jasper palette.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="cockpit"] {
  /* Canonical contract */
  --bg:           #FFF8E7;
  --surface:      #FFF3D6;
  --surface-2:    #FFEFC0;
  --text:         #2A1A0E;
  --mid:          #6B4A2B;
  --muted:        #9A6B44;
  --border:       #2A1A0E;
  --accent:       #FFB300;
  --accent-2:     #2A7D46;
  --good:         #2A7D46;
  --warn:         #FFB300;
  --bad:          #C5302A;
  --font-head:    'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'VT323', monospace;
  --radius:       8px;
  --shadow:       3px 3px 0 #2A1A0E;
  --shadow-sm:    2px 2px 0 #2A1A0E;

  /* membench page-specific aliases (native) */
  --color-bg:           #FFF8E7;
  --color-surface:      #FFF3D6;
  --color-surface-2:    #FFEFC0;
  --color-border:       #2A1A0E;
  --color-text:         #2A1A0E;
  --color-text-muted:   #6B4A2B;
  --color-amber:        #FFB300;
  --color-honey:        #FFD93D;
  --color-gold:         #C9A84C;
  --color-emerald:      #2A7D46;
  --color-jasper:       #C5302A;
  --color-coral:        #FF6B9D;
  --color-cream:        #FFFDF6;
  --veto-surface:       #FFF0EE;
  --veto-border:        rgba(197,48,42,0.35);
  --border-width:       3px;
  --shadow-cell:        3px 3px 0 #2A1A0E;
  --shadow-deep:        5px 5px 0 #2A1A0E;
  --shadow-soft:        0 2px 12px rgba(42,26,14,0.10);

  /* index.html page-specific aliases */
  --amber:        #FFB300;
  --amber-50:     #FFF8E7;
  --amber-100:    #FFF3D6;
  --green:        #2A7D46;
  --green-50:     #f0fdf4;
  --green-100:    #dcfce7;
  --blue:         #2563eb;
  --blue-50:      #eff6ff;
  --violet:       #7c3aed;
  --violet-50:    #f5f3ff;
  --teal:         #2A7D46;
  --teal-50:      #f0fdf4;
  --rose:         #C5302A;
  --rose-50:      #FFF0EE;
  --navy:         #2A1A0E;
  --font-d:       'Space Grotesk', 'Inter', sans-serif;
  --font-b:       'Inter', system-ui, sans-serif;
  --font-m:       'VT323', monospace;
  --r:            8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   THEME: dead-reckoning  (light nautical / chart-paper)
   Warm chart-paper cream base, signal-orange accent, seafoam teal secondary.
   Cartographic / technical feel. Slab serif headings + Roboto Mono body.
   Light theme — no dark navy. Palette anchored to DS honey tokens.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="dead-reckoning"] {
  /* Canonical contract */
  --bg:           #F5F0E8;
  --surface:      #EDE7D8;
  --surface-2:    #E4DCCA;
  --text:         #2A1A0E;
  --mid:          #5A3E28;
  --muted:        #8A6A50;
  --border:       #2A1A0E;
  --accent:       #FF7A1A;
  --accent-2:     #2EC4B6;
  --good:         #2A7D46;
  --warn:         #FF7A1A;
  --bad:          #C5302A;
  --font-head:    'Roboto Slab', 'Bitter', Georgia, serif;
  --font-body:    'Roboto Mono', 'Courier New', monospace;
  --font-mono:    'Roboto Mono', 'Courier New', monospace;
  --radius:       4px;
  --shadow:       3px 3px 0 #2A1A0E;
  --shadow-sm:    2px 2px 0 rgba(42,26,14,.40);

  /* membench page-specific aliases */
  --color-bg:           #F5F0E8;
  --color-surface:      #EDE7D8;
  --color-surface-2:    #E4DCCA;
  --color-border:       #2A1A0E;
  --color-text:         #2A1A0E;
  --color-text-muted:   #5A3E28;
  --color-amber:        #FF7A1A;
  --color-honey:        #FFB380;
  --color-gold:         #C9A84C;
  --color-emerald:      #2A7D46;
  --color-jasper:       #C5302A;
  --color-coral:        #FF6B6B;
  --color-cream:        #F5F0E8;
  --veto-surface:       #FCECEA;
  --veto-border:        rgba(197,48,42,0.40);
  --border-width:       2px;
  --shadow-cell:        3px 3px 0 #2A1A0E;
  --shadow-deep:        5px 5px 0 #2A1A0E;
  --shadow-soft:        0 2px 12px rgba(42,26,14,.12);

  /* index.html page-specific aliases */
  --amber:        #FF7A1A;
  --amber-50:     rgba(255,122,26,.10);
  --amber-100:    rgba(255,122,26,.20);
  --green:        #2A7D46;
  --green-50:     #e8f5ee;
  --green-100:    #c8e8d4;
  --blue:         #2563eb;
  --blue-50:      #eff6ff;
  --violet:       #6B3FA0;
  --violet-50:    #f3eeff;
  --teal:         #2EC4B6;
  --teal-50:      #e6faf8;
  --rose:         #C5302A;
  --rose-50:      #FCECEA;
  --navy:         #2A1A0E;
  --font-d:       'Roboto Slab', 'Bitter', Georgia, serif;
  --font-b:       'Roboto Mono', 'Courier New', monospace;
  --font-m:       'Roboto Mono', 'Courier New', monospace;
  --r:            4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   THEME: dusk  (light indigo / soft violet on cream — replaces midnight)
   Warm cream base with violet-indigo accent on light. Light theme only.
   Palette anchored to DS honey tokens.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="dusk"] {
  /* Canonical contract */
  --bg:           #FFF8E7;
  --surface:      #F3EEF8;
  --surface-2:    #E8E0F4;
  --text:         #2A1A0E;
  --mid:          #4A3870;
  --muted:        #7A6898;
  --border:       #2A1A0E;
  --accent:       #7C6CFF;
  --accent-2:     #3ECFB8;
  --good:         #2A7D46;
  --warn:         #C9A84C;
  --bad:          #C5302A;
  --font-head:    'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --radius:       10px;
  --shadow:       3px 3px 0 #2A1A0E;
  --shadow-sm:    2px 2px 0 rgba(42,26,14,.30);

  /* membench page-specific aliases */
  --color-bg:           #FFF8E7;
  --color-surface:      #F3EEF8;
  --color-surface-2:    #E8E0F4;
  --color-border:       #2A1A0E;
  --color-text:         #2A1A0E;
  --color-text-muted:   #4A3870;
  --color-amber:        #7C6CFF;
  --color-honey:        #A89FFF;
  --color-gold:         #C9A84C;
  --color-emerald:      #2A7D46;
  --color-jasper:       #C5302A;
  --color-coral:        #FF6B9D;
  --color-cream:        #FFFDF6;
  --veto-surface:       #FCECEA;
  --veto-border:        rgba(197,48,42,0.35);
  --border-width:       2px;
  --shadow-cell:        3px 3px 0 #2A1A0E;
  --shadow-deep:        5px 5px 0 #2A1A0E;
  --shadow-soft:        0 2px 12px rgba(42,26,14,.10);

  /* index.html page-specific aliases */
  --amber:        #7C6CFF;
  --amber-50:     rgba(124,108,255,.10);
  --amber-100:    rgba(124,108,255,.18);
  --green:        #2A7D46;
  --green-50:     #e8f5ee;
  --green-100:    #c8e8d4;
  --blue:         #5B9EFF;
  --blue-50:      rgba(91,158,255,.10);
  --violet:       #7C6CFF;
  --violet-50:    rgba(124,108,255,.10);
  --teal:         #3ECFB8;
  --teal-50:      rgba(62,207,184,.10);
  --rose:         #C5302A;
  --rose-50:      #FCECEA;
  --navy:         #2A1A0E;
  --font-d:       'Space Grotesk', system-ui, sans-serif;
  --font-b:       'Inter', system-ui, sans-serif;
  --font-m:       'JetBrains Mono', 'Courier New', monospace;
  --r:            10px;
}

/* ─── v4 READABILITY LAW (2026-06-30) ──────────────────────────────────────
   Hard floor: no informational text below 14px on any surface.
   Applied globally so all themes inherit the minimum sizes.
   Decorative / aria-hidden ticker/animation text is exempt.
   ── */
:root {
  --v4-min-text-size: 0.875rem; /* 14px at 16px base */
}

/* Raise small label patterns to the floor */
.eyebrow,
.metric-label,
.aside-card-label,
.legend-item,
.trust-item,
.fcard-badge {
  font-size: max(var(--v4-min-text-size, 0.875rem), 1em);
}

/* ─── THEME SELECTOR WIDGET ─────────────────────────────────────────────── */
.theme-selector {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  position: relative;
}

.theme-selector-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.55;
  pointer-events: none;
}

.theme-selector-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1.5px solid rgba(128,128,128,0.25);
  border-radius: 6px;
  padding: 4px 24px 4px 8px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.72rem;
  color: inherit;
  cursor: pointer;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  transition: border-color 0.15s, background-color 0.15s;
}

.theme-select:hover {
  border-color: rgba(128,128,128,0.5);
}

.theme-select:focus-visible {
  outline: 2px solid var(--accent, #10b981);
  outline-offset: 2px;
  border-color: var(--accent, #10b981);
}

/* cockpit theme: neo-brutalist select */
html[data-theme="cockpit"] .theme-select {
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  box-shadow: 2px 2px 0 var(--color-border);
  padding: 3px 22px 3px 8px;
}

html[data-theme="cockpit"] .theme-select:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--color-border);
}

/* dead-reckoning: slightly inset bevel */
html[data-theme="dead-reckoning"] .theme-select {
  border-color: var(--accent-2);
  background-color: rgba(255,255,255,.04);
  color: var(--text);
  letter-spacing: 0.04em;
}

/* dusk */
html[data-theme="dusk"] .theme-select {
  background-color: var(--surface-2);
  border-color: var(--border);
}

/* mobile: hide icon, keep select */
@media (max-width: 768px) {
  .theme-selector {
    display: none; /* hidden from hamburger-collapsed nav; mobile-menu gets its own */
  }
}

/* Mobile theme picker (shown in mobile menu) */
.mobile-theme-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-top: 4px;
  border-top: 1px solid rgba(128,128,128,.15);
}

.mobile-theme-row label {
  font-size: 0.78rem;
  color: var(--mid, #64748b);
  white-space: nowrap;
  flex-shrink: 0;
}

.mobile-theme-row .theme-select {
  flex: 1;
  font-size: 0.78rem;
}

html[data-theme="cockpit"] .mobile-theme-row {
  border-top: 2px solid var(--color-border);
}

/* ══════════════════════════════════════════════════════════════════════════
   THEME: mint  (membench original green palette)
   Pre-cockpit membench look: emerald #10b981 accent, white/very-light bg,
   clean light feel. Matches the 'portfolio' structure but with mint/teal
   accents dialed in as first-class tokens rather than aliased.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme=mint] {
  /* Canonical contract */
  --bg:           #f6fffc;
  --surface:      #edfaf4;
  --surface-2:    #d1fae5;
  --text:         #064e3b;
  --mid:          #065f46;
  --muted:        #6b7280;
  --border:       #a7f3d0;
  --accent:       #10b981;
  --accent-2:     #0891b2;
  --good:         #059669;
  --warn:         #d97706;
  --bad:          #dc2626;
  --font-head:    'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --radius:       10px;
  --shadow:       0 1px 3px rgba(16,185,129,.07), 0 4px 20px rgba(16,185,129,.10);
  --shadow-sm:    0 1px 2px rgba(16,185,129,.05);

  /* index.html page-specific aliases */
  --amber:        #10b981;
  --amber-50:     #ecfdf5;
  --amber-100:    #d1fae5;
  --green:        #059669;
  --green-50:     #ecfdf5;
  --green-100:    #d1fae5;
  --blue:         #0891b2;
  --blue-50:      #ecfeff;
  --violet:       #7c3aed;
  --violet-50:    #f5f3ff;
  --teal:         #0d9488;
  --teal-50:      #f0fdfa;
  --rose:         #dc2626;
  --rose-50:      #fef2f2;
  --navy:         #064e3b;
  --font-d:       'Space Grotesk', system-ui, sans-serif;
  --font-b:       'Inter', system-ui, sans-serif;
  --font-m:       'JetBrains Mono', 'Courier New', monospace;
  --r:            10px;

  /* membench page-specific aliases */
  --color-bg:           #f6fffc;
  --color-surface:      #edfaf4;
  --color-surface-2:    #d1fae5;
  --color-border:       #a7f3d0;
  --color-text:         #064e3b;
  --color-text-muted:   #6b7280;
  --color-amber:        #10b981;
  --color-honey:        #34d399;
  --color-gold:         #059669;
  --color-emerald:      #059669;
  --color-jasper:       #dc2626;
  --color-coral:        #f472b6;
  --color-cream:        #f6fffc;
  --veto-surface:       #fef2f2;
  --veto-border:        rgba(220,38,38,0.30);
  --border-width:       1px;
  --shadow-cell:        0 1px 3px rgba(16,185,129,.07), 0 4px 20px rgba(16,185,129,.10);
  --shadow-deep:        0 2px 8px rgba(16,185,129,.14);
  --shadow-soft:        0 2px 12px rgba(16,185,129,.07);
}

/* mint theme: subtle emerald select tint */
html[data-theme=mint] .theme-select {
  border-color: var(--accent);
  background-color: var(--surface);
  color: var(--text);
}

html[data-theme=mint] .theme-select:hover {
  border-color: var(--good);
}

/* DEV-WRITEBACK BLOCK — managed by /__dev/save-theme; do not hand-edit */
:root {
  --font-head: 'IM Fell English',Georgia,serif;
  --font-body: 'EB Garamond',Georgia,serif;
  --font-mono: 'Space Mono','Courier New',monospace;
  --font-scale: 1;
  --font-weight-head: 700;
  --font-weight-body: 400;
  --line-height: 1.72;
  --letter-spacing: 0em;
  --word-spacing: 0em;
  --section-margin: 3rem;
  --block-padding: 1.2rem;
  --border-width: 2px;
  --border-style: solid;
  --border-color: #111110;
  --gold: hsl(204,80%,34%);
  --gold-dk: hsl(204,85%,16%);
  --gold-lt: hsl(204,52%,93%);
  --gold-glow: hsla(204,80%,34%,0.22);
  --black: #111110;
  --off-black: #2A2A28;
  --muted: #4A4844;
  --border: #111110;
  --border-lt: #D4D1C8;
  --surface: #F5F5F3;
  --white: #FFFFFF;
  --radius: 0;
  --radius-lg: 0;
  --shadow-sm: 4px 4px 0 #111110;
  --shadow-md: 6px 6px 0 #111110;
  --shadow-lg: 8px 8px 0 #111110;
}
/* END DEV-WRITEBACK BLOCK */