/* ============================================================================
   BONIN INDUSTRIES LLC — bitzy-ui.css
   Shared premium design system · single source of truth for all preview pages.
   Premium general contractor, LA Westside. Linear/Stripe/Vercel polish meets a
   luxury architecture firm.

   HOW TO USE
   ----------
   <link rel="stylesheet" href="./bitzy-ui.css">   (from inside design-previews/)
   Optional (dense data UI only): preconnect + Inter from Google Fonts —
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   (Headlines + body are self-hosted Libertinus below, so the page renders fully
    offline even without the Inter link.)

   WHITE-LABEL: the brand is isolated to --brand and --accent (+ their scales feed
   from those). To re-skin everything, override just --brand and --accent.

   THEME: follows the OS/system theme by default. Dark via [data-theme="dark"]
   and via @media (prefers-color-scheme: dark) when the root is NOT
   [data-theme="light"]. The standard control is a SINGLE toggle button
   (.theme-btn) — sun in light, moon in dark — that follows the system until the
   user clicks, then flips light<->dark and persists to localStorage
   'bonin-theme' (values: 'light' | 'dark'; absent = follow system). The legacy
   3-state .theme-toggle (light / auto / dark) is retained for back-compat.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. SELF-HOSTED TYPE — Libertinus Sans (open-source Optima match).
   Headlines render offline. Three faces: 400 / 700 / 400-italic.
   (base64 woff2 copied verbatim from /Users/andrewbonin/Desktop/Bitzy/index.html)
   --------------------------------------------------------------------------- */
@font-face{font-family:'Libertinus Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/libertinus-sans-400.woff2') format('woff2');}
@font-face{font-family:'Libertinus Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/libertinus-sans-700.woff2') format('woff2');}
@font-face{font-family:'Libertinus Sans';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/libertinus-sans-400-italic.woff2') format('woff2');}


/* ---------------------------------------------------------------------------
   2. DESIGN TOKENS
   --------------------------------------------------------------------------- */
:root {
  /* ---- BRAND (white-label anchors — override these two to re-skin) ---- */
  --brand:        #283977;   /* Bonin blue — deep, saturated royal-navy, the identity */
  --accent:       #c9a766;   /* Gold — confident second, used with intent */

  /* ---- ON-BRAND tokens (text/glass sitting ON the navy topbar) — added
     2026-07-20 to kill the last hardcoded #fff/white-glass so a pale-topbar
     skin doesn't render white-on-white. Defaults = the exact prior literals,
     so NOTHING changes visually until a skin overrides them. ---- */
  --on-brand-fg:           #fff;                    /* topbar/brand text + icons */
  --on-brand-fg-dim:       rgba(255,255,255,.72);   /* secondary on-brand text */
  --on-brand-glass:        rgba(255,255,255,.12);   /* glass button bg on the brand */
  --on-brand-glass-hover:  rgba(255,255,255,.2);
  --on-brand-glass-brd:    rgba(255,255,255,.22);
  --on-brand-glass-brd-hover: rgba(255,255,255,.35);
  --scrim:                 rgba(0,0,0,.5);          /* modal/overlay backdrop */

  /* ---- Brand blue scale (enriched: deeper, more saturated royal-navy) ---- */
  --brand-50:   #eef1fa;
  --brand-100:  #dce2f4;
  --brand-200:  #b6c1e6;
  --brand-300:  #8896d2;
  --brand-400:  #3c4fae;   /* lighter brand — richer */
  --brand-500:  #364aa0;   /* interactive blue (hover/links/focus) — deeper, premium */
  --brand-600:  #283977;   /* = --brand, deep royal-navy */
  --brand-700:  #1d2c5d;   /* deeper, cleaner shadow */
  --brand-800:  #142043;
  --brand-900:  #0d1631;
  --brand-ink:  #131d39;   /* navy-charcoal text */

  /* ---- Gold accent scale (use sparingly: CTA, underline marks, ticks, dividers) ---- */
  --accent-300: #e3cd98;
  --accent-400: #D4AF5A;   /* bright gold */
  --accent-500: #c9a766;   /* = --accent */
  --accent-600: #B8922A;   /* deep gold — text/contrast on light */
  --accent-700: #9a7a22;

  /* ---- Semantic ---- */
  --ok:   #2f8f5b;
  --warn: #c08a2d;
  --bad:  #c0492f;
  --ok-bg:   #e7f3ec;
  --warn-bg: #f6edd9;
  --bad-bg:  #f6e4df;
  /* ---- State-category map (Ives item 1, 2026-07-18): color = state, not
     positivity. Green is reserved for terminal success — pending/awaiting-you
     states use amber or interactive blue so nothing unfinished reads "done". */
  --state-pending: var(--warn);      /* awaiting input / needs review */
  --state-ready:   var(--brand-500); /* ready for you to act */
  --state-done:    var(--ok);        /* filed / sent / complete */

  /* ---- LIGHT surfaces (default theme) ---- */
  --bg:          #fbfaf7;   /* ivory page */
  --bg-sunken:   #f3f1ea;   /* recessed wells / table stripes */
  --surface:     #ffffff;   /* card surface */
  --surface-2:   #f7f5ef;   /* secondary surface */
  --surface-glass: rgba(255,255,255,.66);
  --text:        #16203a;   /* deep navy-charcoal */
  --text-muted:  #5b6478;
  --text-faint:  #8b93a4;
  --border:      #e7e3d8;   /* warm hairline */
  --border-strong:#d6d1c3;
  --ring:        rgba(58,74,140,.35);   /* focus ring (brand-500) */

  /* ---- Soft layered shadows (light) ---- */
  --shadow-sm: 0 1px 2px rgba(22,32,58,.05), 0 1px 1px rgba(22,32,58,.04);
  --shadow:    0 2px 4px rgba(22,32,58,.05), 0 6px 16px rgba(22,32,58,.07);
  --shadow-md: 0 4px 8px rgba(22,32,58,.06), 0 14px 32px rgba(22,32,58,.10);
  --shadow-lg: 0 10px 24px rgba(22,32,58,.08), 0 30px 60px rgba(22,32,58,.14);
  --shadow-accent: 0 8px 22px rgba(201,167,102,.32);

  /* warm gold ring + glow for the signature .card hover */
  --card-gold-ring:  color-mix(in srgb, var(--accent-500) 72%, var(--border));
  --card-gold-glow:  0 0 0 1px color-mix(in srgb, var(--accent-500) 38%, transparent),
                     0 14px 34px -10px rgba(201,167,102,.42),
                     0 4px 14px -6px rgba(201,167,102,.30);
  /* theme-aware REST border for .card — LIGHT = BLUE-forward (a brand-blue
     hairline at rest; gold is reserved for the hover glow) */
  --card-ring: color-mix(in srgb, var(--brand-400) 38%, var(--border));

  /* ---- Premium gradients & glows (blue stays primary, gold the confident second) ---- */
  --grad-brand:      linear-gradient(150deg, var(--brand-400) 0%, var(--brand-600) 60%, var(--brand-700) 100%);
  --grad-brand-deep: linear-gradient(160deg, var(--brand-600) 0%, var(--brand-800) 70%, var(--brand-900) 100%);
  --grad-gold:       linear-gradient(150deg, var(--accent-400), var(--accent-600));
  --grad-brand-gold: linear-gradient(120deg, var(--brand-800) 0%, var(--brand-500) 46%, var(--accent-500) 100%);
  --glow-gold:       radial-gradient(60% 80% at 50% 0%, rgba(201,167,102,.24), transparent 70%);
  --glow-brand:      radial-gradient(60% 80% at 50% 0%, rgba(40,57,119,.18), transparent 70%);
  /* faint top-edge highlight so cards read as layered */
  --edge-hi:         inset 0 1px 0 rgba(255,255,255,.6);
  /* subtle page-background depth — gold leans in more on the airy light page */
  --bg-grad:
    radial-gradient(120% 90% at 88% -8%, rgba(40,57,119,.07), transparent 58%),
    radial-gradient(95% 80% at -5% 104%, rgba(201,167,102,.14), transparent 60%);

  /* ---- Typography ---- */
  --font-display: 'Libertinus Sans', 'Optima', 'Optima nova', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-body:    'Libertinus Sans', 'Optima', 'Optima nova', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* dense data */

  /* Fluid type scale */
  --fs-eyebrow: .8125rem;
  --fs-body:    1.0625rem;
  --fs-lg:      1.25rem;
  --fs-h3:      clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  --fs-h2:      clamp(1.9rem, 1.4rem + 2.2vw, 2.85rem);
  --fs-h1:      clamp(2.6rem, 1.8rem + 3.6vw, 4.25rem);
  --fs-display: clamp(3.2rem, 2rem + 5vw, 5.5rem);

  /* ---- 4px spacing scale ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---- Radii (squircles) ---- */
  --r-sm:   12px;
  --r-card: 20px;
  --r-lg:   28px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease:        cubic-bezier(.22,.61,.36,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --t-fast:   150ms;
  --t-base:   200ms;
  --t-slow:   250ms;

  /* ---- Layout ---- */
  --container: 1200px;
  --nav-h: 68px;

  color-scheme: light;
}

/* ---- DARK THEME ---- explicit + system. Rich near-black with a blue
   undertone, layered surfaces with a faint top-edge highlight, and gold
   brought in generously (glows, gradients, accents) so it reads as designed,
   not just inverted. ---- */
[data-theme="dark"] {
  /* deep, blue-undertoned near-black base */
  --bg:          #080b16;
  --bg-sunken:   #05070f;
  --surface:     #131a2e;   /* elevated, slightly higher-contrast */
  --surface-2:   #1b2440;
  --surface-glass: rgba(17,23,42,.62);
  --text:        #eef1f8;
  --text-muted:  #a3acc6;
  --text-faint:  #717b98;
  --border:      #283457;
  --border-strong:#3a486a;
  --ring:        rgba(120,140,220,.55);

  --brand-ink:  #eef1f8;

  /* black-alpha shadow set for dark, with a warm-gold lift on elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow:    0 2px 6px rgba(0,0,0,.5), 0 10px 24px rgba(0,0,0,.45);
  --shadow-md: 0 6px 16px rgba(0,0,0,.55), 0 20px 44px rgba(0,0,0,.5);
  --shadow-lg: 0 14px 30px rgba(0,0,0,.6), 0 40px 80px rgba(0,0,0,.62);
  --shadow-accent: 0 10px 30px rgba(212,175,90,.34);

  /* warm gold ring + glow for the signature .card hover (stronger on dark) */
  --card-gold-ring:  color-mix(in srgb, var(--accent-400) 70%, var(--border-strong));
  --card-gold-glow:  0 0 0 1px color-mix(in srgb, var(--accent-400) 50%, transparent),
                     0 18px 40px -12px rgba(212,175,90,.55),
                     0 6px 18px -6px rgba(212,175,90,.38);
  /* theme-aware REST border for .card — DARK = GOLD-forward (gold trim at rest
     on the blue-toned card surface; gold glow still intensifies on hover) */
  --card-ring: color-mix(in srgb, var(--accent-400) 44%, var(--border-strong));

  /* gold-leaning gradients + glows read premium on dark; blue is richer royal */
  --grad-brand:      linear-gradient(150deg, #3b4ea8 0%, #283977 60%, #1d2c5d 100%);
  --grad-brand-deep: linear-gradient(160deg, #283977 0%, #142043 70%, #0d1631 100%);
  --grad-brand-gold: linear-gradient(120deg, #26356e 0%, #3a4aa0 46%, var(--accent-500) 100%);
  --glow-gold:       radial-gradient(60% 80% at 50% 0%, rgba(212,175,90,.30), transparent 70%);
  --glow-brand:      radial-gradient(60% 80% at 50% 0%, rgba(74,94,186,.28), transparent 70%);
  --edge-hi:         inset 0 1px 0 rgba(150,170,225,.16);

  /* page gets gradient depth, not a flat fill */
  --bg-grad:
    radial-gradient(120% 85% at 86% -10%, rgba(74,94,186,.20), transparent 56%),
    radial-gradient(95% 78% at -4% 106%, rgba(201,167,102,.12), transparent 56%),
    linear-gradient(180deg, #0b0f20 0%, #080b16 55%, #05070f 100%);

  --ok-bg:   #11271d;
  --warn-bg: #2a2210;
  --bad-bg:  #2a1411;

  color-scheme: dark;
}

/* System preference — only when the user has NOT pinned light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #080b16;
    --bg-sunken:   #05070f;
    --surface:     #131a2e;
    --surface-2:   #1b2440;
    --surface-glass: rgba(17,23,42,.62);
    --text:        #eef1f8;
    --text-muted:  #a3acc6;
    --text-faint:  #717b98;
    --border:      #283457;
    --border-strong:#3a486a;
    --ring:        rgba(120,140,220,.55);
    --brand-ink:  #eef1f8;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
    --shadow:    0 2px 6px rgba(0,0,0,.5), 0 10px 24px rgba(0,0,0,.45);
    --shadow-md: 0 6px 16px rgba(0,0,0,.55), 0 20px 44px rgba(0,0,0,.5);
    --shadow-lg: 0 14px 30px rgba(0,0,0,.6), 0 40px 80px rgba(0,0,0,.62);
    --shadow-accent: 0 10px 30px rgba(212,175,90,.3);
    --grad-brand-gold: linear-gradient(120deg, #2f3d78 0%, #3f4f9c 46%, var(--accent-500) 100%);
    --glow-gold:  radial-gradient(60% 80% at 50% 0%, rgba(212,175,90,.26), transparent 70%);
    --glow-brand: radial-gradient(60% 80% at 50% 0%, rgba(80,100,200,.24), transparent 70%);
    --edge-hi:    inset 0 1px 0 rgba(150,170,225,.16);
    --bg-grad:
      radial-gradient(120% 85% at 86% -10%, rgba(74,94,186,.20), transparent 56%),
      radial-gradient(95% 78% at -4% 106%, rgba(201,167,102,.12), transparent 56%),
      linear-gradient(180deg, #0b0f20 0%, #080b16 55%, #05070f 100%);
    --ok-bg:#11271d; --warn-bg:#2a2210; --bad-bg:#2a1411;
    /* gold ring/glow + gold rest-trim so system-dark matches pinned dark */
    --card-gold-ring:  color-mix(in srgb, var(--accent-400) 70%, var(--border-strong));
    --card-gold-glow:  0 0 0 1px color-mix(in srgb, var(--accent-400) 50%, transparent),
                       0 18px 40px -12px rgba(212,175,90,.55),
                       0 6px 18px -6px rgba(212,175,90,.38);
    --card-ring: color-mix(in srgb, var(--accent-400) 44%, var(--border-strong));
    color-scheme: dark;
  }
}

/* ---------------------------------------------------------------------------
   3. RESET & BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--bg-grad);
  background-repeat: no-repeat;
  background-attachment: scroll;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--brand-500); text-decoration: none; }
a:hover { color: var(--accent-600); }
::selection { background: var(--accent-400); color: #1a1408; }

/* ---------------------------------------------------------------------------
   4. TYPOGRAPHY — intentional, airy, luxury-architecture
   --------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: 0; }
h4 { font-size: var(--fs-lg); }

/* Airy all-caps brand moment */
.display    { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 700; line-height: 1.02; letter-spacing: -.02em; }
.brandmark  { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .26em; font-weight: 400; }
.eyebrow    { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .22em; font-size: var(--fs-eyebrow); font-weight: 700; color: var(--brand-500); }
.eyebrow--gold { color: var(--accent-600); }
.lede       { font-size: var(--fs-lg); line-height: 1.55; color: var(--text-muted); font-weight: 400; max-width: 60ch; }
.muted      { color: var(--text-muted); }
.faint      { color: var(--text-faint); }
.numeric    { font-family: var(--font-ui); font-feature-settings: "tnum" 1; }

/* Gold underline mark for emphasized words inside a headline (thicker on the airy light page) */
.mark-gold {
  background-image: linear-gradient(90deg, var(--accent-400), var(--accent-600));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% .20em;
  padding-bottom: .04em;
}

/* Gold reads brighter & more premium on dark — lean into it for accents */
[data-theme="dark"] .eyebrow--gold { color: var(--accent-400); }
[data-theme="dark"] .eyebrow { color: var(--brand-300); }
[data-theme="dark"] a:hover { color: var(--accent-400); }
[data-theme="dark"] .mark-gold { background-image: linear-gradient(90deg, var(--accent-300), var(--accent-500)); }

/* THEME-AWARE ACCENT — follows the per-theme personality: BLUE in light,
   GOLD in dark. Use on section eyebrows/dividers that should flip with the
   theme (the hero & GCE stay explicitly gold via .eyebrow--gold / gold surfaces). */
.eyebrow--swap { color: var(--brand-500); }
[data-theme="dark"] .eyebrow--swap { color: var(--accent-400); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .eyebrow--swap { color: var(--accent-400); }
}
/* divider tint flip — pair .rule-swap with .rule-gold (keeps its sizing) */
.rule-gold.rule-swap {
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  box-shadow: 0 1px 6px rgba(40,57,119,.30);
}
[data-theme="dark"] .rule-gold.rule-swap {
  background: linear-gradient(90deg, var(--accent-400), var(--accent-600));
  box-shadow: 0 1px 8px rgba(212,175,90,.30);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .rule-gold.rule-swap {
    background: linear-gradient(90deg, var(--accent-400), var(--accent-600));
    box-shadow: 0 1px 8px rgba(212,175,90,.30);
  }
}

/* ---------------------------------------------------------------------------
   5. LAYOUT — container & section rhythm
   --------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-6); }
.section   { padding-block: var(--sp-24); }
.section--tight { padding-block: var(--sp-12); }
.stack > * + * { margin-top: var(--sp-4); }
.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* SQUIRCLE TREATMENT --------------------------------------------------------
   Modern browsers that support `corner-shape: superellipse` get a true
   squircle; everyone else keeps the large smooth radius fallback. Apply the
   .squircle helper (or rely on .card which already uses --r-card).             */
.squircle { border-radius: var(--r-card); }
@supports (corner-shape: superellipse) {
  .squircle, .card, .btn, .chip, .badge, .field input, .field textarea, .field select {
    corner-shape: superellipse;
  }
}

/* ---------------------------------------------------------------------------
   6. TOP NAV
   --------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  /* iOS notch/status bar: pad the bar, grow its height by the same inset so
     the content row stays var(--nav-h). env() is 0 on desktop — clean no-op. */
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  display: flex; align-items: center;
  background: var(--surface-glass);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav__inner { display: flex; align-items: center; gap: var(--sp-6); width: 100%; }
.nav__brand { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; color: var(--text); }
.nav__brand img { height: 30px; width: auto; }
.nav__links { display: flex; align-items: center; gap: var(--sp-6); margin-left: auto; }
.nav__links a { font-size: .95rem; color: var(--text-muted); font-weight: 500; transition: color var(--t-fast) var(--ease); }
.nav__links a:hover { color: var(--text); }
@media (max-width: 760px){ .nav__links a:not(.btn){ display:none; } }

/* ---------------------------------------------------------------------------
   7. HERO
   --------------------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate;
  padding-block: clamp(var(--sp-16), 10vw, var(--sp-24));
  overflow: hidden;
}
.hero::before {                       /* soft brand + gold wash (gold leans in on light) */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 80% at 78% 12%, rgba(40,57,119,.20), transparent 60%),
    radial-gradient(52% 64% at 12% 90%, rgba(201,167,102,.30), transparent 64%),
    radial-gradient(40% 50% at 92% 92%, rgba(201,167,102,.18), transparent 60%);
}
[data-theme="dark"] .hero::before {  /* richer, warmer gold glow on dark */
  background:
    radial-gradient(62% 82% at 80% 8%, rgba(86,108,210,.28), transparent 58%),
    radial-gradient(54% 66% at 8% 94%, rgba(212,175,90,.22), transparent 60%),
    radial-gradient(42% 52% at 96% 96%, rgba(212,175,90,.12), transparent 60%);
}
.hero h1 { max-width: 16ch; }
.hero .lede { margin-top: var(--sp-5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }

/* ---------------------------------------------------------------------------
   8. CARDS — primary information container (squircle + soft shadow + hover-lift)
   --------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  /* theme-aware REST border: BLUE hairline in light, GOLD trim in dark */
  border: 1px solid var(--card-ring);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  box-shadow: var(--shadow), var(--edge-hi);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease);
}
/* SIGNATURE GOLD-HOVER — at REST a card is BLUE-outlined (light) / GOLD-trimmed
   (dark); on HOVER every card lifts to a clear gold-tinted border + warm gold
   glow, so gold always rewards interaction. .card--gold-hover is an explicit
   alias for non-.card elements that want the same interaction. */
.card:hover, .card--gold-hover:hover {
  transform: translateY(-4px);
  border-color: var(--card-gold-ring);
  box-shadow: var(--shadow-md), var(--card-gold-glow), var(--edge-hi);
}
.card--gold-hover { transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease); }
.card--lg { border-radius: var(--r-lg); padding: var(--sp-8); }
.card--flat { box-shadow: none; }
.card__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; }
.card__body  { color: var(--text-muted); margin-top: var(--sp-2); }

/* .card-stat — KPI / metric */
.card-stat { display: flex; flex-direction: column; gap: var(--sp-1); }
.card-stat .stat__value { font-family: var(--font-display); font-size: clamp(2rem,1.4rem+2vw,2.8rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--text); }
.card-stat .stat__label { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; color: var(--text-faint); font-weight: 700; }
.card-stat .stat__delta { font-family: var(--font-ui); font-size: .85rem; font-weight: 600; }
.card-stat .stat__delta.up { color: var(--ok); }
.card-stat .stat__delta.down { color: var(--bad); }

/* .card-tool — action / feature tile with gold tick icon slot */
.card-tool { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.card-tool .tool__icon {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--brand-50); color: var(--brand-600);
  border: 1px solid var(--border);
}
[data-theme="dark"] .card-tool .tool__icon { background: var(--surface-2); color: var(--brand-300); }
.card-tool:hover .tool__icon { color: var(--accent-600); }

/* .card-brand — sister-company / brand kinship card (gold-accented) */
.card-brand {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(201,167,102,.18), transparent 55%),
    linear-gradient(160deg, rgba(201,167,102,.06), transparent 45%),
    var(--surface);
  border: 1px solid var(--accent-500);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow), var(--edge-hi);
}
[data-theme="dark"] .card-brand {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(212,175,90,.22), transparent 55%),
    linear-gradient(160deg, rgba(212,175,90,.08), transparent 48%),
    var(--surface-2);
  box-shadow: var(--shadow), var(--shadow-accent), var(--edge-hi);
}
.card-brand::after {                  /* flowing organic gold flourish (GCE kinship) */
  content:""; position:absolute; right:-40px; bottom:-60px; width:200px; height:200px;
  background: radial-gradient(circle at 30% 30%, rgba(212,175,90,.35), transparent 70%);
  border-radius: 48% 52% 60% 40% / 55% 45% 55% 45%;
  filter: blur(6px); z-index:0; pointer-events:none;
}
.card-brand > * { position: relative; z-index: 1; }

/* .card-glass — frosted overlay panel */
.card-glass {
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  box-shadow: var(--shadow), var(--edge-hi);
}

/* ---------------------------------------------------------------------------
   9. BUTTONS
   --------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface); --btn-fg: var(--text); --btn-bd: var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: 700; font-size: .98rem; letter-spacing: .01em;
  line-height: 1; cursor: pointer; white-space: nowrap;
  padding: 13px 22px; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.btn--lg { padding: 16px 28px; font-size: 1.05rem; }
.btn--block { width: 100%; }

.btn-primary {                         /* brand blue — deeper, premium, subtle sheen */
  --btn-bg: linear-gradient(165deg, var(--brand-400) 0%, var(--brand-600) 55%, var(--brand-700) 100%);
  --btn-fg: #fff; --btn-bd: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-primary:hover { --btn-bg: linear-gradient(165deg, var(--brand-300) 0%, var(--brand-500) 55%, var(--brand-600) 100%); }

/* GOLD CTA — gold/gold-gradient buttons ALWAYS use near-black text (never white on gold) */
.btn-accent {                          /* gold — the confident CTA. BRIGHT gold fill
                                          (300→500, never the dark 600/700 end) so the
                                          near-black ink clears WCAG AA in BOTH themes:
                                          darkest stop #c9a766 vs #1d1604 ≈ 7.8:1 */
  --btn-bg: linear-gradient(180deg, var(--accent-300), var(--accent-500));
  --btn-fg: #1d1604; --btn-bd: transparent;
}
.btn-accent, .btn-accent:hover { color: #1d1604; }   /* hard-pin dark ink on gold, both modes */
[data-theme="dark"] .btn-accent {     /* keep the bright fill + dark ink in dark mode */
  --btn-bg: linear-gradient(180deg, var(--accent-300), var(--accent-500));
  --btn-fg: #1d1604;
}
.btn-accent:hover { box-shadow: var(--shadow-accent); filter: brightness(1.05); }

.btn-gradient {                        /* premium blue-LED gradient CTA — gold rides the trailing
                                          edge as an accent (label always over deep blue ⇒ white
                                          text stays readable; this is NOT a white-on-gold button) */
  --btn-bg: var(--grad-brand-gold);
  --btn-fg: #fff; --btn-bd: transparent;
  background-size: 180% 100%; background-position: 4% 50%;   /* deep blue under the label; gold pushed off to the trailing edge */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background-position var(--t-slow) var(--ease);
}
[data-theme="dark"] .btn-gradient { --btn-fg: #fff; }   /* white label stays over the deep-blue portion in dark too */
.btn-gradient:hover { background-position: 24% 50%; box-shadow: var(--shadow-accent); }  /* gentle shimmer, gold stays at the edge */

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--border-strong); }
.btn-ghost:hover { --btn-bg: var(--surface-2); }

/* ---------------------------------------------------------------------------
   10. BADGES & CHIPS (pill)
   --------------------------------------------------------------------------- */
.badge, .chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-ui); font-weight: 600; font-size: .8rem; line-height: 1;
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-muted);
}
.chip { cursor: pointer; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.chip:hover { border-color: var(--brand-400); color: var(--text); }
.chip--active { background: var(--brand-600); color:#fff; border-color: transparent; }
.badge--brand { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-200); }
.badge--gold  { background: linear-gradient(150deg, var(--accent-400), var(--accent-600)); color: #1d1604; border-color: transparent; }
[data-theme="dark"] .badge--gold { color: #1a1408; }
.badge--ok   { background: var(--ok-bg);  color: var(--ok);  border-color: transparent; }
.badge--warn { background: var(--warn-bg);color: var(--warn);border-color: transparent; }
.badge--bad  { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
[data-theme="dark"] .badge--brand { background: var(--surface-2); color: var(--brand-300); border-color: var(--border-strong); }

/* Gold divider rule (a confident gold presence on light) */
.rule-gold { height:3px; width:64px; border:0; border-radius:3px; background: linear-gradient(90deg, var(--accent-400), var(--accent-600)); box-shadow: 0 1px 6px rgba(201,167,102,.35); }
[data-theme="dark"] .rule-gold { box-shadow: 0 1px 8px rgba(212,175,90,.30); }
/* Prominent gold rules — a confident divider, not a hairline */
.rule-gold--bold { height:5px; width:96px; }
.rule-gold--wide { width:100%; }

/* ---------------------------------------------------------------------------
   10b. GOLD SURFACES — give gold real surface area (bands, cards, big numerals).
   Blue stays primary; gold is the confident, weighty secondary. Any gold-FILLED
   surface re-maps its text tokens to dark ink (#1d1604) so it reads cleanly in
   BOTH light and dark — never white text on gold.
   --------------------------------------------------------------------------- */

/* Shared dark-ink remap for every gold-FILLED surface (.card--gold is now a
   neutral, gold-ACCENTED card — it keeps normal text colors and is excluded) */
.band-gold, .surface-gold {
  color: #1d1604;
  --text:          #1d1604;
  --text-muted:    #5c4a16;
  --text-faint:    #6f5a1c;
  --brand-500:     #6a5310;   /* links + default eyebrow → readable bronze on gold */
  --brand-600:     #5a4513;
  --accent-600:    #5a4513;   /* .eyebrow--gold → deep bronze on gold */
  --accent-700:    #4a380f;
  --border:        rgba(29,22,4,.16);
  --border-strong: rgba(29,22,4,.30);
}
/* keep eyebrows/links dark even where the dark theme would otherwise re-color them */
[data-theme="dark"] .band-gold .eyebrow,        [data-theme="dark"] .surface-gold .eyebrow,
[data-theme="dark"] .band-gold .eyebrow--gold,  [data-theme="dark"] .surface-gold .eyebrow--gold {
  color: #5a4513;
}
[data-theme="dark"] .band-gold a:hover, [data-theme="dark"] .surface-gold a:hover { color:#3a2c08; }

/* .band-gold — a full gold gradient band; gold occupies the whole surface */
.band-gold {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  padding: clamp(var(--sp-10), 6vw, var(--sp-16)) clamp(var(--sp-6), 4vw, var(--sp-12));
  background:
    radial-gradient(80% 130% at 100% 0%, rgba(255,255,255,.42), transparent 55%),
    linear-gradient(135deg, var(--accent-300) 0%, var(--accent-400) 50%, var(--accent-500) 100%);
  border: 1px solid var(--accent-600);
  box-shadow: var(--shadow-md), var(--edge-hi);
}
.band-gold::after {                 /* soft luminous gold flourish */
  content:""; position:absolute; right:-60px; bottom:-80px; width:280px; height:280px; z-index:0;
  background: radial-gradient(circle at 30% 30%, rgba(255,247,225,.55), transparent 70%);
  border-radius: 46% 54% 60% 40% / 55% 45% 55% 45%; filter: blur(8px); pointer-events:none;
}
.band-gold > * { position: relative; z-index: 1; }
[data-theme="dark"] .band-gold {
  background:
    radial-gradient(80% 130% at 100% 0%, rgba(255,255,255,.30), transparent 55%),
    linear-gradient(135deg, var(--accent-400) 0%, var(--accent-500) 50%, var(--accent-600) 100%);
  box-shadow: var(--shadow-lg), 0 0 64px -12px rgba(212,175,90,.5), var(--edge-hi);
}

/* .card--gold — a NEUTRAL card given a GOLD IDENTITY by accent, not by fill:
   a gold top accent bar, a gold-tinted hairline, and a faint gold glow. Gold
   reads as a confident accent ON a normal card — never a saturated full fill.
   Use on a FEW high-impact cards per view (featured / key-value / lead card). */
.card--gold {
  position: relative; overflow: hidden;
  border-radius: var(--r-card);
  padding: var(--sp-6);
  background: var(--surface);                 /* neutral surface — same as a normal card */
  border: 1px solid var(--card-gold-ring);    /* gold-tinted hairline */
  box-shadow: var(--shadow), var(--card-gold-glow), var(--edge-hi);  /* faint gold glow */
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease);
}
.card--gold::before {                         /* gold top accent bar — the gold identity */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--accent-400), var(--accent-600));
}
.card--gold.card--lg { border-radius: var(--r-lg); padding: var(--sp-8); }
.card--gold:hover {
  transform: translateY(-4px);
  border-color: var(--card-gold-ring);
  box-shadow: var(--shadow-md), var(--card-gold-glow), var(--edge-hi);
}
[data-theme="dark"] .card--gold {
  background: var(--surface);
  border-color: var(--card-gold-ring);
  box-shadow: var(--shadow), var(--card-gold-glow), var(--edge-hi);
}

/* Big gold numerals — a large stat value cast in gold (for light/neutral surfaces) */
.num-gold {
  background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-700) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
[data-theme="dark"] .num-gold {
  background: linear-gradient(135deg, var(--accent-300) 0%, var(--accent-500) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Softer gold pills — more gold badges/chips without always going solid */
.badge--gold-soft { background: var(--warn-bg); color: var(--accent-700); border-color: var(--accent-400); }
[data-theme="dark"] .badge--gold-soft { background: rgba(212,175,90,.15); color: var(--accent-300); border-color: var(--accent-600); }
.chip--gold { border-color: var(--accent-500); color: var(--accent-700); }
.chip--gold:hover { border-color: var(--accent-600); color: var(--accent-700); }
.chip--gold.chip--active { background: linear-gradient(150deg, var(--accent-400), var(--accent-600)); color:#1d1604; border-color: transparent; }
[data-theme="dark"] .chip--gold { color: var(--accent-300); border-color: var(--accent-600); }
[data-theme="dark"] .chip--gold.chip--active { color:#1a1408; }

/* ---------------------------------------------------------------------------
   11. FORMS
   --------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label { font-family: var(--font-ui); font-size: .85rem; font-weight: 600; color: var(--text-muted); }
.field input, .field textarea, .field select {
  font-family: var(--font-ui); font-size: 1rem; color: var(--text);
  padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--border-strong);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 4px var(--ring);
}
.field textarea { resize: vertical; min-height: 120px; }
.field__hint { font-family: var(--font-ui); font-size: .8rem; color: var(--text-faint); }

/* ---------------------------------------------------------------------------
   12. TABLE — dense data UI
   --------------------------------------------------------------------------- */
.table-wrap { border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: .92rem; }
table.data thead th {
  text-align: left; font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); background: var(--surface-2);
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
table.data tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--text); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background var(--t-fast) var(--ease); }
table.data tbody tr:hover { background: var(--bg-sunken); }
table.data td.num { text-align: right; font-feature-settings: "tnum" 1; }

/* ---------------------------------------------------------------------------
   13. MODAL
   --------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--sp-6);
  background: rgba(13,17,32,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity var(--t-base) var(--ease), visibility var(--t-base); }
.modal[aria-hidden="false"], .modal.is-open { opacity: 1; visibility: visible; }
.modal__panel {
  width: min(560px, 100%); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-8); box-shadow: var(--shadow-lg);
  transform: translateY(12px) scale(.98); transition: transform var(--t-slow) var(--ease-out);
}
.modal.is-open .modal__panel, .modal[aria-hidden="false"] .modal__panel { transform: none; }
.modal__close { position: absolute; top: var(--sp-4); right: var(--sp-4); }

/* ---------------------------------------------------------------------------
   14. THEME TOGGLE
   14a. STANDARD — single icon button (.theme-btn): sun in light, moon in dark.
        Follows the OS/system theme until the user clicks; click flips
        light<->dark and persists 'bonin-theme'. The icon reflects the EFFECTIVE
        theme purely in CSS (incl. system dark), so it's correct even before JS
        runs — FOUC-proof alongside the in-<head> anti-FOUC pin.
   --------------------------------------------------------------------------- */
.theme-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border-radius: var(--r-pill); cursor: pointer;
  background: var(--surface-2); color: var(--brand-600);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm), var(--edge-hi);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.theme-btn:hover { color: var(--accent-600); border-color: var(--card-gold-ring); transform: translateY(-1px); }
.theme-btn:active { transform: translateY(0); }
.theme-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.theme-btn svg { width: 19px; height: 19px; display: block; }
/* icon swap follows the EFFECTIVE theme (CSS only) — show sun on light, moon on dark */
.theme-btn .ico-sun  { display: block; }
.theme-btn .ico-moon { display: none; }
[data-theme="dark"] .theme-btn { color: var(--accent-400); }
[data-theme="dark"] .theme-btn .ico-sun  { display: none; }
[data-theme="dark"] .theme-btn .ico-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn { color: var(--accent-400); }
  :root:not([data-theme="light"]) .theme-btn .ico-sun  { display: none; }
  :root:not([data-theme="light"]) .theme-btn .ico-moon { display: block; }
}
@media (max-width: 600px){ .theme-btn { width: 44px; height: 44px; } .theme-btn svg { width: 20px; height: 20px; } }

/* ---------------------------------------------------------------------------
   14b. LEGACY — 3-state (light / auto / dark), pill segmented. Retained so any
        un-migrated page keeps working; new pages use .theme-btn above.
   --------------------------------------------------------------------------- */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border-strong);
}
.theme-toggle button {
  display: grid; place-items: center; width: 32px; height: 30px;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: transparent; color: var(--text-faint);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.theme-toggle button svg { width: 17px; height: 17px; }
.theme-toggle button:hover { color: var(--text); }
.theme-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--brand-600); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .theme-toggle button[aria-pressed="true"] { color: var(--accent-400); }

/* ---------------------------------------------------------------------------
   15. FOOTER
   --------------------------------------------------------------------------- */
.footer { position: relative; background: var(--surface-2); border-top: 1px solid var(--border); padding-block: var(--sp-16) var(--sp-10); margin-top: var(--sp-24); }
.footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-500) 30%, var(--accent-400) 50%, var(--accent-500) 70%, transparent); opacity: .55; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-10); }
@media (max-width: 760px){ .footer__grid { grid-template-columns: 1fr; gap: var(--sp-8); } }
.footer h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; color: var(--text-faint); font-weight: 700; margin-bottom: var(--sp-4); }
.footer a { color: var(--text-muted); font-size: .95rem; display: block; padding: 3px 0; }
.footer a:hover { color: var(--text); }
.footer__legal { margin-top: var(--sp-10); padding-top: var(--sp-6); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; color: var(--text-faint); font-size: .85rem; }
.footer__lic { color: var(--text-muted); font-size: .85rem; }

/* ---------------------------------------------------------------------------
   16. SCROLL-REVEAL UTILITY
   Add `.reveal` (optionally with --reveal-delay) to any element. The JS hook
   (section 17) adds `.is-visible` when it scrolls into view. Honors
   prefers-reduced-motion (shown immediately, no transform).
   --------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Convenience stagger delays */
.reveal-d1 { --reveal-delay: 70ms; }
.reveal-d2 { --reveal-delay: 140ms; }
.reveal-d3 { --reveal-delay: 210ms; }
.reveal-d4 { --reveal-delay: 280ms; }

/* ---------------------------------------------------------------------------
   17. JS HOOKS — copy these two <script> snippets into every preview page
       (kept in CSS as documentation so builders have one source of truth).

   A0) ANTI-FOUC PIN — paste FIRST in <head>, before the stylesheet, so a stored
       choice is applied before paint. Absent/legacy 'auto' ⇒ follow system.
   ------------------------------------------------------------------
   <script>
   (function(){var t;try{t=localStorage.getItem('bonin-theme');}catch(e){}
     if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t);})();
   </script>

   A) THEME — STANDARD single button (.theme-btn). Load = follow system if the
      user hasn't chosen (no stored pref). Click = flip light<->dark + store
      'bonin-theme'. The icon swap is CSS-driven, so no DOM toggling needed.
   ------------------------------------------------------------------
   <script>
   (function () {
     var KEY = 'bonin-theme';
     var root = document.documentElement;
     // Apply stored choice if present; otherwise leave unset to follow the OS.
     var saved = null;
     try { saved = localStorage.getItem(KEY); } catch (e) {}
     if (saved === 'light' || saved === 'dark') root.setAttribute('data-theme', saved);
     else root.removeAttribute('data-theme');           // follow system
     document.addEventListener('click', function (e) {
       var btn = e.target.closest('.theme-btn');
       if (!btn) return;
       // Resolve the EFFECTIVE current theme (explicit pin or system) and flip it.
       var current = root.getAttribute('data-theme');
       if (current !== 'light' && current !== 'dark') {
         current = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
       }
       var next = current === 'dark' ? 'light' : 'dark';
       root.setAttribute('data-theme', next);
       try { localStorage.setItem(KEY, next); } catch (e) {}
     });
   })();
   </script>

   LEGACY 3-state script (only if a page still uses .theme-toggle):
   ------------------------------------------------------------------
   <script>
   (function () {
     var KEY = 'bonin-theme', root = document.documentElement;
     function apply(mode){ if(mode==='auto')root.removeAttribute('data-theme'); else root.setAttribute('data-theme',mode);
       document.querySelectorAll('.theme-toggle button').forEach(function(b){ b.setAttribute('aria-pressed', String(b.dataset.mode===mode)); }); }
     var saved = localStorage.getItem(KEY) || 'auto'; apply(saved);
     document.addEventListener('click', function(e){ var btn=e.target.closest('.theme-toggle button'); if(!btn)return;
       localStorage.setItem(KEY, btn.dataset.mode); apply(btn.dataset.mode); });
   })();
   </script>

   B) SCROLL-REVEAL (IntersectionObserver):
   ----------------------------------------
   <script>
   (function () {
     var els = document.querySelectorAll('.reveal');
     if (!('IntersectionObserver' in window) || matchMedia('(prefers-reduced-motion: reduce)').matches) {
       els.forEach(function (el) { el.classList.add('is-visible'); });
       return;
     }
     var io = new IntersectionObserver(function (entries) {
       entries.forEach(function (entry) {
         if (entry.isIntersecting) { entry.target.classList.add('is-visible'); io.unobserve(entry.target); }
       });
     }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
     els.forEach(function (el) { io.observe(el); });
   })();
   </script>

   THEME-BTN MARKUP — STANDARD single button (place in nav). Both icons are
   present; CSS shows the one matching the effective theme.
   -----------------------------------
   <button class="theme-btn" type="button" aria-label="Toggle light / dark theme" title="Toggle theme">
     <svg class="ico-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
       <circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
     </svg>
     <svg class="ico-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
       <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
     </svg>
   </button>

   LEGACY 3-state markup (only for un-migrated pages):
   -----------------------------------
   <div class="theme-toggle" role="group" aria-label="Color theme">
     <button data-mode="light" aria-pressed="false" title="Light"> [sun svg] </button>
     <button data-mode="auto"  aria-pressed="true"  title="Auto">  [auto svg]</button>
     <button data-mode="dark"  aria-pressed="false" title="Dark">  [moon svg]</button>
   </div>
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   18. SMALL UTILITIES
   --------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); }
.wrap { flex-wrap: wrap; }
.mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); }
.maxw-prose { max-width: 62ch; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.divider { height:1px; background: var(--border); border:0; }

/* ---------------------------------------------------------------------------
   19. PHONE TIER — first-class on iPhone (~390px).
   Tightens gutters + section rhythm, scales the big display/hero type so
   headlines never overflow, forces every grid to a single column, guarantees
   ≥44px tap targets, and lets dense tables scroll instead of squishing.
   Everything above 600px (tablet/desktop) is untouched.
   --------------------------------------------------------------------------- */
@media (max-width: 600px){
  /* tighter gutters + section rhythm */
  .container      { padding-inline: var(--sp-4); }
  .section        { padding-block: var(--sp-16); }
  .section--tight { padding-block: var(--sp-10); }

  /* every grid collapses to a single column */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* dense data tables scroll horizontally rather than squish */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data  { min-width: 560px; }

  /* tap targets — buttons & form controls ≥44px tall */
  .btn { padding: 14px 22px; }
  .field input, .field textarea, .field select { padding: 13px 14px; font-size: 16px; } /* 16px = no iOS focus-zoom */

  /* theme toggle — bigger, thumb-friendly segmented control */
  .theme-toggle button { width: 44px; height: 40px; }
  .theme-toggle button svg { width: 18px; height: 18px; }

  /* chips comfortable to tap */
  .chip { padding: 9px 14px; }
}

@media (max-width: 430px){
  /* scale the brand display + heading ramp down for narrow screens */
  :root {
    --fs-display: clamp(2.3rem, 1.5rem + 6vw, 3rem);
    --fs-h1:      clamp(1.95rem, 1.5rem + 4vw, 2.45rem);
    --fs-h2:      clamp(1.55rem, 1.25rem + 3.4vw, 1.95rem);
  }
  .container { padding-inline: var(--sp-3); }

  /* hero primary actions stack full-width on a phone */
  .hero__cta { gap: var(--sp-3); }
  .hero__cta .btn { width: 100%; }

  /* safety net: any grid utility is single-column here too */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   20. PORTAL TOOL SHELL — single-brand header rule
   On the sidebar-nav tools (those wrapped in .main-content), the left rail
   already carries the Bonin "BONIN INDUSTRIES / Staff Portal" brand, so the
   topbar's copy of that same brand is a redundant second header. Suppress it so
   each page shows the brand exactly once (kills the stacked-header look).
   Scope notes — this intentionally does NOT touch:
     • checks / vendor-invoice / office-admin (no .main-content wrapper → keep
       their topbar brand, since they have no sidebar to carry it), or
     • the distinct issuing-entity brand on GCE/BCI tools, which uses
       .topbar-brand-name (e.g. "Gold Coast Elevators") rather than the generic
       .topbar-brand-title and stays visible as meaningful document context.
   --------------------------------------------------------------------------- */
.main-content .topbar .topbar-brand:has(.topbar-brand-title) { display: none; }

/* ---------------------------------------------------------------------------
   21. PORTAL NAV — collapsible hamburger drawer (shared across ALL tools)
   Injected by /assets/portal-nav.js. DEFAULT COLLAPSED: only a hamburger shows
   on the left of the navy topbar; the cross-tool nav slides out as an overlay
   drawer on demand and closes on link click, scrim click, Esc, or the
   hamburger. The drawer sits BELOW the sticky topbar (top:var(--pnav-top)) and
   the topbar is kept above the scrim by the injector, so the hamburger stays
   clickable to toggle the drawer closed. Themes via the standard tokens.
   --------------------------------------------------------------------------- */
:root { --pnav-top: 56px; --pnav-w: 264px; }

/* Hamburger — matches the white-on-navy topbar controls everywhere. */
.pnav-ham {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0; margin-right: 10px; padding: 0;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px; color: #fff; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.pnav-ham:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); }
.pnav-ham:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pnav-ham--float {
  /* clears the iOS status bar in standalone mode; env() is 0 elsewhere */
  position: fixed; top: calc(9px + env(safe-area-inset-top, 0px)); left: 14px; z-index: 1002;
  background: var(--brand); border-color: var(--brand-700);
}

/* Scrim — dims the content below the topbar while the drawer is open. */
.pnav-scrim {
  position: fixed; left: 0; right: 0; top: var(--pnav-top); bottom: 0;
  background: rgba(8,11,22,.46); z-index: 40;
  opacity: 0; visibility: hidden;
  transition: opacity .24s ease, visibility .24s ease;
}
.pnav-scrim.is-open { opacity: 1; visibility: visible; }

/* Drawer — the slide-out cross-tool nav panel. */
.pnav {
  position: fixed; top: var(--pnav-top); left: 0; bottom: 0;
  width: var(--pnav-w); max-width: 86vw; z-index: 45;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; font-family: var(--font-ui);
  transform: translateX(-100%);
  transition: transform .26s cubic-bezier(.4,0,.2,1), box-shadow .26s;
}
.pnav.is-open { transform: translateX(0); box-shadow: 6px 0 28px rgba(8,11,22,.22); }

.pnav-brand { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.pnav-brand img { height: 26px; width: auto; }
.pnav-brand-title { font-weight: 800; font-size: 11.5px; color: var(--brand-500); letter-spacing: .4px; line-height: 1.1; }
.pnav-brand-sub { font-size: 10px; color: var(--text-muted); letter-spacing: .4px; margin-top: 2px; }

.pnav-nav { flex: 1; padding: 10px 8px; overflow-y: auto; }
.pnav-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
  color: var(--text); text-decoration: none; font-size: 13px; font-weight: 500; margin-bottom: 1px;
  transition: background .1s, color .1s;
}
.pnav-link svg { flex-shrink: 0; color: var(--text-muted); transition: color .1s; }
.pnav-link:hover { background: var(--surface-2); color: var(--brand-500); }
.pnav-link:hover svg { color: var(--brand-500); }
.pnav-link.active { background: var(--brand-50); color: var(--brand-600); font-weight: 600; border-left: 3px solid var(--brand-500); padding-left: 9px; }
.pnav-link.active svg { color: var(--brand-500); }

.pnav-foot { padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.pnav-user { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.pnav-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.pnav-user-meta { flex: 1; min-width: 0; }
.pnav-user-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnav-user-role { font-size: 11px; color: var(--text-muted); text-transform: capitalize; }
.pnav-logout { display: block; width: 100%; background: none; border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px; font-size: 12px; font-family: inherit; color: var(--text-muted); cursor: pointer; margin-top: 8px; transition: all .12s; }
.pnav-logout:hover { border-color: #c0392b; color: #c0392b; }

/* Lock background scroll while the drawer is open. */
html.pnav-lock, html.pnav-lock body { overflow: hidden; }

/* Neutralize the legacy always-on left rail on the doc tools so content takes
   the full working width and the shared drawer is the single cross-tool nav. */
html.pnav-on #portal-sidebar { display: none !important; }
html.pnav-on #nav-overlay { display: none !important; }
html.pnav-on #mob-hamburger { display: none !important; }
html.pnav-on .main-content { margin-left: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .pnav, .pnav-scrim { transition: none; }
}

/* P2 (eero QA, Ives 2026-07-18): 44px coarse-pointer floor for the shared
   drawer — links/Sign out measured ~29px tall and the hamburger 38×38 on
   touch screens. (pointer:coarse) only, so desktop is unchanged at any width.
   min-* beats the fixed 38px w/h on .pnav-ham; flex centering keeps the icon
   and link/label alignment as-is. */
@media (pointer: coarse) {
  .pnav-ham { min-width: 44px; min-height: 44px; }
  .pnav-link { min-height: 44px; }
  .pnav-logout { min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   22. iOS SAFE AREA — notch / status-bar clearance for the navy topbar
   On a home-screen (standalone) or notch-Safari viewport the topbar content
   (hamburger, title, theme toggle) was rendering UNDER the iOS status bar and
   colliding with the clock/battery/notch. Fix: pad the bar by the top inset so
   the navy background fills the status-bar strip while the CONTENT row sits
   below it.
   Every tool defines its own .topbar (space-planner: #topbar) in a page-level
   <style> that loads AFTER this sheet — so these two declarations are
   !important ON PURPOSE: the platform rule must beat the page sheets.
   Why content-box: all portal topbars use `padding: 0 <x>` + a fixed height
   (48–68px) with align-items:center. Switching to content-box keeps each
   page's own height sizing the CONTENT row while the safe-area padding grows
   the bar upward — no per-page height edits needed.
   Desktop / non-notch: env() is 0 → no gap, no shift (sole delta: the 1px
   bottom hairline sits outside the fixed height, i.e. the bar is 1px taller).
   NOTE: env() needs viewport-fit=cover in each page's viewport meta — added
   to every portal page 2026-07-02. portal-nav.js measures bar.offsetHeight
   for --pnav-top, so the drawer/scrim track the padded height automatically.
   --------------------------------------------------------------------------- */
@supports (padding-top: env(safe-area-inset-top)) {
  .topbar, #topbar {
    box-sizing: content-box !important;
    padding-top: env(safe-area-inset-top) !important;
  }
}

/* ---------------------------------------------------------------------------
   CANONICAL TOOL TOPBAR — the portal standard (Andrew 2026-07-10):
   the ledger / command-center DARK NAVY header, constant in BOTH themes.
   Root cause of the old mismatch: most tools painted their bar with page-local
   --blue-* vars that dark theme REMAPS to light values (--brand-200/300), so
   their headers washed out pale in dark mode while ledger/command-center/
   pricebook (fixed brand-700→500 gradient) stayed navy. This one shared rule
   is the component now: `header.topbar` (0,1,1) out-specifies every per-page
   `.topbar` (0,1,0) and `header#topbar` (1,0,1) out-specifies space-planner's
   `#topbar` (1,0,0), so the standard wins in both themes without touching each
   tool's own layout, height, or inner markup. Tools keep their layouts; the
   PAINT is uniform. (Wade 2026-07-10; decision logged in design-standards.md)
   --------------------------------------------------------------------------- */
header.topbar, header#topbar {
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-600) 60%, var(--brand-500) 100%);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   [hidden] MUST ALWAYS WIN. .badge/.chip (and others) set display:inline-flex,
   which has the same specificity as the UA [hidden]{display:none} and — being an
   author rule — overrides it, so `hidden` elements stay visible. (QA 2026-07-16:
   the marketing inquiry form rendered BOTH the success and error badges at page
   load because their `hidden` attribute was defeated by .badge's display.) This
   global guard makes the attribute authoritative site-wide, so JS that toggles
   [hidden] works everywhere. Mirrors the local fix already in the invoice tool
   (P1-1, 2026-07-05) and eero — now hoisted to the shared stylesheet.
   --------------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   22b. SHELL RAIL TYPE — the rail speaks the house voice, always.
   (Ives 2026-07-26, outside-eye QA gate F3: "the shared rail is not one rail —
   it renders in FIVE different typefaces across the 20 surfaces.")

   WHY it drifted: the rail has no font-family of its own — it INHERITS from
   <body>. Tools legitimately re-declare `body.sh{ font-family: … }` to keep
   their own dense workspace type (Check Printer's Libertinus, Space Planner's
   and eero's Inter, Warranty's --font-body). Every one of those overrides also
   re-dressed the chrome, because the chrome was downstream of the page.

   THE FIX IS THE SPECIFICITY, not the load order: `body.sh .sh-rail` is
   (0,2,1) and beats any page-local `body.sh` (0,1,1) no matter which sheet is
   read last — so a page can go on choosing its own type without ever reaching
   the rail again. Typeface ONLY: sizes, tracking and the 44px targets stay
   exactly where shell.css puts them.

   Placed BEFORE §23 on purpose: a skin is an OUTFIT and may re-dress the rail's
   typography with its own [data-skin] rule below — same specificity, later in
   the file, so the skin still wins. Page CSS does not.

   .sh-toolsmenu IS LISTED SEPARATELY ON PURPOSE (Ives 2026-07-26, top-rail
   promotion): assets/shell-rail.js now re-parents the Tools panel out of the
   rail and onto <body>, so it is no longer a `.sh-rail *` descendant. Without
   its own line here the panel would drift back to whatever type the page
   chose — the exact F3 defect, one element later. It keeps the same (0,2,1)
   weight, so the guard is identical in strength.
   --------------------------------------------------------------------------- */
body.sh .sh-rail,
body.sh .sh-rail *,
body.sh .sh-toolsmenu,
body.sh .sh-toolsmenu * {
  font-family: var(--sh-caps, 'Avenir Next','Avenir','Futura','Century Gothic','Trebuchet MS',system-ui,sans-serif);
}

/* ---------------------------------------------------------------------------
   23. SKINS — swappable portal "outfits" (Ives; rebuilt 2026-07-19 per Andrew's
   ruling: "I wanted all the skins to be more different. Diff colors and
   organization to layout and everything.")
   Mechanism mirrors the theme mechanism: <html data-skin="<name>">, persisted
   in localStorage 'bonin-skin', applied pre-paint + picked by
   /assets/skin-picker.js. NO attribute = the default navy/gold reference,
   byte-identical — every rule below is inert until a skin is selected. There
   is deliberately NO alias skin.
   Each skin is DISTINCT AT A GLANCE on four axes:
     palette · typography (--font-*) · density and shape (--sp-*, --r-*,
     shadows) · organization (structural [data-skin] rules on shared components).
   STATE COLORS KEEP MEANING everywhere: pending stays amber, done stays
   green, --state-ready stays a readable BLUE in every skin. Entity colors
   (BONIN/BCI/GCE) are data, not chrome — skins never touch them.
   ADDING A SKIN: copy one skin's four parts (light register / pinned-dark /
   system-dark / structural rules), rename, change values; add one {id,label}
   row + VALID entry in skin-picker.js and a .skin-dot--<name> swatch in §23b.
   --------------------------------------------------------------------------- */

/* ===== SKIN: ledger — the bookkeeping office. Warm cream stock, serif
   display, squared corners, ruled hairlines, tight spreadsheet density.
   Cards read as ledger blocks with a gold spine; tables stripe like a
   general ledger. ===== */
:root[data-skin="ledger"] {
  /* palette — warm paper, navy ink kept */
  --bg:            #f7f1e3;
  --bg-sunken:     #efe6d0;
  --surface:       #fffdf6;
  --surface-2:     #f6efdc;
  --surface-glass: rgba(255,252,243,.72);
  --text:          #33291a;
  --text-muted:    #6e5f45;
  --text-faint:    #98876a;
  --border:        #e5d9bb;
  --border-strong: #cfbf98;
  --ring:          rgba(154,122,34,.35);
  --edge-hi:       inset 0 0 0 0 transparent;
  --bg-grad:
    radial-gradient(120% 90% at 88% -8%, rgba(122,90,40,.07), transparent 58%),
    radial-gradient(95% 80% at -5% 104%, rgba(178,140,74,.14), transparent 60%);
  /* typography — bookkeeping serif */
  --font-display: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-body:    Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  /* shape — squared, ruled */
  --r-sm:   2px;
  --r-card: 3px;
  --r-lg:   4px;
  --r-pill: 3px;
  /* density — tight, columnar */
  --fs-body: 1rem;
  --fs-lg:   1.15rem;
  --sp-6:  20px;
  --sp-8:  26px;
  --sp-16: 48px;
  --sp-24: 64px;
  --nav-h: 58px;
  --shadow-sm: 0 1px 1px rgba(51,41,26,.08);
  --shadow:    0 1px 2px rgba(51,41,26,.10);
  --shadow-md: 0 2px 6px rgba(51,41,26,.12);
}
:root[data-skin="ledger"][data-theme="dark"] {
  --bg:            #191307;
  --bg-sunken:     #110d04;
  --surface:       #241c0e;
  --surface-2:     #2e2413;
  --surface-glass: rgba(32,25,13,.62);
  --text:          #f2e9d6;
  --text-muted:    #c3b190;
  --text-faint:    #8d7f62;
  --border:        #41351d;
  --border-strong: #5a4a29;
  --ring:          rgba(212,175,90,.45);
  --edge-hi:       inset 0 0 0 0 transparent;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 1px 3px rgba(0,0,0,.45);
  --shadow-md: 0 2px 8px rgba(0,0,0,.5);
  --bg-grad:
    radial-gradient(120% 85% at 86% -10%, rgba(201,167,102,.16), transparent 56%),
    radial-gradient(95% 78% at -4% 106%, rgba(120,86,40,.18), transparent 56%),
    linear-gradient(180deg, #1e1709 0%, #191307 55%, #110d04 100%);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="ledger"]:not([data-theme="light"]) {
    --bg:            #191307;
    --bg-sunken:     #110d04;
    --surface:       #241c0e;
    --surface-2:     #2e2413;
    --surface-glass: rgba(32,25,13,.62);
    --text:          #f2e9d6;
    --text-muted:    #c3b190;
    --text-faint:    #8d7f62;
    --border:        #41351d;
    --border-strong: #5a4a29;
    --ring:          rgba(212,175,90,.45);
    --edge-hi:       inset 0 0 0 0 transparent;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 1px 3px rgba(0,0,0,.45);
    --shadow-md: 0 2px 8px rgba(0,0,0,.5);
    --bg-grad:
      radial-gradient(120% 85% at 86% -10%, rgba(201,167,102,.16), transparent 56%),
      radial-gradient(95% 78% at -4% 106%, rgba(120,86,40,.18), transparent 56%),
      linear-gradient(180deg, #1e1709 0%, #191307 55%, #110d04 100%);
  }
}
/* ledger · structure: ruled cards with a gold spine, no hover-lift theatre */
[data-skin="ledger"] .card,
[data-skin="ledger"] .card--gold,
[data-skin="ledger"] .card-glass {
  box-shadow: none;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent-600);
}
[data-skin="ledger"] .card:hover,
[data-skin="ledger"] .card--gold:hover,
[data-skin="ledger"] .card--gold-hover:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-strong);
  border-left-color: var(--accent-500);
}
/* ledger · structure: general-ledger tables — striped, double-ruled head, tight */
[data-skin="ledger"] table.data { font-size: .85rem; }
[data-skin="ledger"] table.data thead th {
  background: transparent;
  border-bottom: 3px double var(--border-strong);
  padding: 8px 10px;
}
[data-skin="ledger"] table.data tbody td { padding: 7px 10px; }
[data-skin="ledger"] table.data tbody tr:nth-child(even) { background: var(--bg-sunken); }
/* ledger · structure: flat navy band topbar with a gold rule beneath */
[data-skin="ledger"] header.topbar, [data-skin="ledger"] header#topbar {
  background: var(--brand-700);
  border-bottom: 2px solid var(--accent-500);
}

/* ===== SKIN: graphite — the machine shop. Flat charcoal, mono UI type,
   compact toolbar chrome, brass accents, square shapes, dense controls. ===== */
:root[data-skin="graphite"] {
  /* palette — neutral charcoal chrome, gold muted to brass */
  --brand:      #3a3f4a;
  --brand-50:   #f1f2f4;
  --brand-100:  #e4e6e9;
  --brand-200:  #c9ccd3;
  --brand-300:  #9aa0ab;
  --brand-400:  #5d6470;
  --brand-500:  #4a515e;
  --brand-600:  #3a3f4a;
  --brand-700:  #2b2f38;
  --brand-800:  #1f222a;
  --brand-900:  #15171d;
  --brand-ink:  #1c1f24;
  --accent:     #a98f4f;
  --accent-300: #cfc09a;
  --accent-400: #b89a55;
  --accent-500: #a98f4f;
  --accent-600: #8a7238;
  --accent-700: #6d5a2c;
  --state-ready:#3f63c4;   /* state = meaning: ready stays blue on gray chrome */
  --ring:       rgba(93,100,112,.4);
  --bg:            #f4f4f3;
  --bg-sunken:     #e9e9e7;
  --surface:       #ffffff;
  --surface-2:     #efefed;
  --surface-glass: rgba(255,255,255,.66);
  --text:          #1c1f24;
  --text-muted:    #585e66;
  --text-faint:    #8a8f96;
  --border:        #dededb;
  --border-strong: #c2c2bd;
  --bg-grad:
    radial-gradient(120% 90% at 88% -8%, rgba(58,63,74,.05), transparent 58%),
    radial-gradient(95% 80% at -5% 104%, rgba(169,143,79,.08), transparent 60%);
  /* typography — mono-influenced UI, plain-spoken display */
  --font-ui:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-body:    'Helvetica Neue', Arial, system-ui, sans-serif;
  /* shape — square */
  --r-sm:   4px;
  --r-card: 6px;
  --r-lg:   8px;
  --r-pill: 6px;
  /* density — compact toolbar chrome */
  --fs-body: .98rem;
  --sp-6:  18px;
  --sp-8:  26px;
  --sp-24: 72px;
  --nav-h: 52px;
  --edge-hi: inset 0 0 0 0 transparent;
}
:root[data-skin="graphite"][data-theme="dark"] {
  --bg:            #0e0f12;
  --bg-sunken:     #08090b;
  --surface:       #17181c;
  --surface-2:     #1f2126;
  --surface-glass: rgba(21,22,26,.62);
  --text:          #eceef0;
  --text-muted:    #a6aab1;
  --text-faint:    #75797f;
  --border:        #2b2d33;
  --border-strong: #40434b;
  --ring:          rgba(150,158,172,.45);
  --brand-ink:     #eceef0;
  --state-ready:   #7292e6;
  --edge-hi:       inset 0 0 0 0 transparent;
  --shadow-accent: 0 10px 30px rgba(184,154,85,.26);
  --grad-brand:      linear-gradient(150deg, var(--brand-400) 0%, var(--brand-600) 60%, var(--brand-700) 100%);
  --grad-brand-deep: linear-gradient(160deg, var(--brand-600) 0%, var(--brand-800) 70%, var(--brand-900) 100%);
  --grad-brand-gold: linear-gradient(120deg, var(--brand-800) 0%, var(--brand-500) 46%, var(--accent-500) 100%);
  --glow-brand: radial-gradient(60% 80% at 50% 0%, rgba(125,133,148,.20), transparent 70%);
  --glow-gold:  radial-gradient(60% 80% at 50% 0%, rgba(184,154,85,.18), transparent 70%);
  --bg-grad:
    radial-gradient(120% 85% at 86% -10%, rgba(125,133,148,.12), transparent 56%),
    radial-gradient(95% 78% at -4% 106%, rgba(169,143,79,.08), transparent 56%),
    linear-gradient(180deg, #121316 0%, #0e0f12 55%, #08090b 100%);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="graphite"]:not([data-theme="light"]) {
    --bg:            #0e0f12;
    --bg-sunken:     #08090b;
    --surface:       #17181c;
    --surface-2:     #1f2126;
    --surface-glass: rgba(21,22,26,.62);
    --text:          #eceef0;
    --text-muted:    #a6aab1;
    --text-faint:    #75797f;
    --border:        #2b2d33;
    --border-strong: #40434b;
    --ring:          rgba(150,158,172,.45);
    --brand-ink:     #eceef0;
    --state-ready:   #7292e6;
    --edge-hi:       inset 0 0 0 0 transparent;
    --shadow-accent: 0 10px 30px rgba(184,154,85,.26);
    --grad-brand:      linear-gradient(150deg, var(--brand-400) 0%, var(--brand-600) 60%, var(--brand-700) 100%);
    --grad-brand-deep: linear-gradient(160deg, var(--brand-600) 0%, var(--brand-800) 70%, var(--brand-900) 100%);
    --grad-brand-gold: linear-gradient(120deg, var(--brand-800) 0%, var(--brand-500) 46%, var(--accent-500) 100%);
    --glow-brand: radial-gradient(60% 80% at 50% 0%, rgba(125,133,148,.20), transparent 70%);
    --glow-gold:  radial-gradient(60% 80% at 50% 0%, rgba(184,154,85,.18), transparent 70%);
    --bg-grad:
      radial-gradient(120% 85% at 86% -10%, rgba(125,133,148,.12), transparent 56%),
      radial-gradient(95% 78% at -4% 106%, rgba(169,143,79,.08), transparent 56%),
      linear-gradient(180deg, #121316 0%, #0e0f12 55%, #08090b 100%);
  }
}
/* graphite · structure: flat compact toolbar with a brass baseline */
[data-skin="graphite"] header.topbar, [data-skin="graphite"] header#topbar {
  background: var(--brand-800);
  border-bottom: 1px solid var(--accent-600);
}
/* graphite · structure: flat panels — hover marks with brass, never lifts */
[data-skin="graphite"] .card { box-shadow: var(--shadow-sm); }
[data-skin="graphite"] .card:hover,
[data-skin="graphite"] .card--gold-hover:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: var(--accent-500);
}
/* graphite · structure: compact mono controls */
[data-skin="graphite"] .btn {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .02em;
  padding: 10px 16px;
}
[data-skin="graphite"] .badge, [data-skin="graphite"] .chip {
  border-radius: 4px;
  font-size: .75rem;
}
[data-skin="graphite"] table.data thead th {
  background: var(--bg-sunken);
  letter-spacing: .12em;
}

/* ===== SKIN: blueprint — the drafting table. Prussian field, pure-CSS
   drafting grid, wide airy spacing, technical-pen typography, oversized
   uppercase section labels, line-drawn boxes instead of shadowed cards. ===== */
:root[data-skin="blueprint"] {
  /* palette — cobalt/prussian */
  --brand:      #155089;
  --brand-50:   #e9f1f9;
  --brand-100:  #d7e5f3;
  --brand-200:  #b3cde8;
  --brand-300:  #7fa8d4;
  --brand-400:  #2e6cae;
  --brand-500:  #1f5c9d;
  --brand-600:  #155089;
  --brand-700:  #0e3d6c;
  --brand-800:  #0a2c50;
  --brand-900:  #071f3a;
  --brand-ink:  #122a44;
  --ring:       rgba(46,108,174,.4);
  --bg:            #f2f6fa;
  --bg-sunken:     #e6edf4;
  --surface:       #ffffff;
  --surface-2:     #edf3f8;
  --surface-glass: rgba(250,253,255,.72);
  --text:          #122a44;
  --text-muted:    #4a6076;
  --text-faint:    #7e91a4;
  --border:        #d7e1eb;
  --border-strong: #bccbdb;
  --bg-grad:
    repeating-linear-gradient(0deg,  rgba(31,92,157,.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(31,92,157,.05) 0 1px, transparent 1px 28px),
    radial-gradient(120% 90% at 88% -8%, rgba(21,80,137,.08), transparent 58%);
  /* typography — technical pen */
  --font-display: 'Avenir Next', 'Futura', 'Trebuchet MS', sans-serif;
  --font-body:    'Avenir Next', 'Futura', 'Trebuchet MS', sans-serif;
  /* shape — drawn, lightly rounded */
  --r-sm:   6px;
  --r-card: 10px;
  --r-lg:   14px;
  --r-pill: 10px;
  /* density — wide and airy, drawing-sheet margins */
  --fs-body:   1.09rem;
  --sp-6:  28px;
  --sp-8:  36px;
  --sp-24: 112px;
  --container: 1280px;
}
:root[data-skin="blueprint"][data-theme="dark"] {
  --bg:            #0b2038;
  --bg-sunken:     #071627;
  --surface:       #11304f;
  --surface-2:     #173a5e;
  --surface-glass: rgba(14,38,63,.62);
  --text:          #e9f1fa;
  --text-muted:    #a7bdd3;
  --text-faint:    #6e88a3;
  --border:        #24476b;
  --border-strong: #33587e;
  --ring:          rgba(110,160,220,.5);
  --brand-ink:     #e9f1fa;
  --state-ready:   #5f9dfc;   /* brighter ready-blue so it reads ON blueprint blue */
  --edge-hi:       inset 0 1px 0 rgba(180,210,240,.14);
  --grad-brand:      linear-gradient(150deg, var(--brand-400) 0%, var(--brand-600) 60%, var(--brand-700) 100%);
  --grad-brand-deep: linear-gradient(160deg, var(--brand-600) 0%, var(--brand-800) 70%, var(--brand-900) 100%);
  --grad-brand-gold: linear-gradient(120deg, var(--brand-800) 0%, var(--brand-500) 46%, var(--accent-500) 100%);
  --glow-brand: radial-gradient(60% 80% at 50% 0%, rgba(80,140,210,.28), transparent 70%);
  --bg-grad:
    repeating-linear-gradient(0deg,  rgba(233,241,250,.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(233,241,250,.05) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, #0d2440 0%, #0b2038 55%, #071627 100%);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="blueprint"]:not([data-theme="light"]) {
    --bg:            #0b2038;
    --bg-sunken:     #071627;
    --surface:       #11304f;
    --surface-2:     #173a5e;
    --surface-glass: rgba(14,38,63,.62);
    --text:          #e9f1fa;
    --text-muted:    #a7bdd3;
    --text-faint:    #6e88a3;
    --border:        #24476b;
    --border-strong: #33587e;
    --ring:          rgba(110,160,220,.5);
    --brand-ink:     #e9f1fa;
    --state-ready:   #5f9dfc;
    --edge-hi:       inset 0 1px 0 rgba(180,210,240,.14);
    --grad-brand:      linear-gradient(150deg, var(--brand-400) 0%, var(--brand-600) 60%, var(--brand-700) 100%);
    --grad-brand-deep: linear-gradient(160deg, var(--brand-600) 0%, var(--brand-800) 70%, var(--brand-900) 100%);
    --grad-brand-gold: linear-gradient(120deg, var(--brand-800) 0%, var(--brand-500) 46%, var(--accent-500) 100%);
    --glow-brand: radial-gradient(60% 80% at 50% 0%, rgba(80,140,210,.28), transparent 70%);
    --bg-grad:
      repeating-linear-gradient(0deg,  rgba(233,241,250,.05) 0 1px, transparent 1px 28px),
      repeating-linear-gradient(90deg, rgba(233,241,250,.05) 0 1px, transparent 1px 28px),
      linear-gradient(180deg, #0d2440 0%, #0b2038 55%, #071627 100%);
  }
}
/* blueprint · structure: oversized technical section labels */
[data-skin="blueprint"] .eyebrow {
  font-size: .95rem;
  letter-spacing: .4em;
}
[data-skin="blueprint"] h2, [data-skin="blueprint"] h3,
[data-skin="blueprint"] .card__title {
  text-transform: uppercase;
  letter-spacing: .08em;
}
/* blueprint · structure: line-drawn boxes over the grid, not shadowed slabs */
[data-skin="blueprint"] .card, [data-skin="blueprint"] .card--gold {
  box-shadow: none;
  border: 1px solid var(--brand-300);
}
[data-skin="blueprint"] .card:hover,
[data-skin="blueprint"] .card--gold-hover:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--brand-400);
}
/* blueprint · structure: dashed construction lines + drawn table rules */
[data-skin="blueprint"] .divider {
  height: 0;
  background: none;
  border-top: 1px dashed var(--border-strong);
}
[data-skin="blueprint"] table.data thead th {
  background: transparent;
  text-transform: uppercase;
  letter-spacing: .18em;
  border-bottom: 2px solid var(--brand-300);
}

/* ===== SKIN: coast — the marine layer lifting off the Westside. Sky azure
   + warm sand, rounded everything, borderless floating cards, generous
   whitespace, relaxed density. Dark = dusk over the water. ===== */
:root[data-skin="coast"] {
  /* palette — sky + sand */
  --brand:      #2f6b96;
  --brand-50:   #eef6fb;
  --brand-100:  #ddedf7;
  --brand-200:  #bcdcef;
  --brand-300:  #8ec3e2;
  --brand-400:  #4b93c4;
  --brand-500:  #3a80b1;
  --brand-600:  #2f6b96;
  --brand-700:  #245377;
  --brand-800:  #1a3d58;
  --brand-900:  #122c40;
  --brand-ink:  #16303f;
  --accent:     #d0aa64;
  --accent-300: #ecd9ae;
  --accent-400: #ddb877;
  --accent-500: #d0aa64;
  --accent-600: #b28c47;
  --accent-700: #8f6f36;
  --ring:       rgba(75,147,196,.4);
  --bg:            #f6fafc;
  --bg-sunken:     #eaf2f7;
  --surface:       #ffffff;
  --surface-2:     #f0f6fa;
  --surface-glass: rgba(252,254,255,.7);
  --text:          #16303f;
  --text-muted:    #4f6b7c;
  --text-faint:    #8298a6;
  --border:        #dfe9f0;
  --border-strong: #c4d6e2;
  --bg-grad:
    radial-gradient(120% 90% at 88% -8%, rgba(75,147,196,.10), transparent 58%),
    radial-gradient(95% 80% at -5% 104%, rgba(221,184,119,.14), transparent 60%);
  /* typography — soft rounded air */
  --font-display: ui-rounded, 'SF Pro Rounded', 'Avenir Next', system-ui, sans-serif;
  --font-body:    ui-rounded, 'SF Pro Rounded', 'Avenir Next', system-ui, sans-serif;
  /* shape — big soft radii */
  --r-sm:   16px;
  --r-card: 26px;
  --r-lg:   34px;
  /* density — relaxed, generous whitespace */
  --fs-body:  1.09rem;
  --sp-6:  28px;
  --sp-8:  36px;
  --sp-24: 104px;
  --shadow-sm: 0 2px 6px rgba(22,48,63,.05);
  --shadow:    0 4px 14px rgba(22,48,63,.06), 0 12px 32px rgba(22,48,63,.06);
  --shadow-md: 0 8px 22px rgba(22,48,63,.07), 0 22px 48px rgba(22,48,63,.09);
  --shadow-lg: 0 14px 34px rgba(22,48,63,.09), 0 36px 72px rgba(22,48,63,.12);
}
:root[data-skin="coast"][data-theme="dark"] {
  --bg:            #0c1a24;
  --bg-sunken:     #081119;
  --surface:       #142836;
  --surface-2:     #1b3242;
  --surface-glass: rgba(16,34,46,.62);
  --text:          #e8f1f6;
  --text-muted:    #a3bcc9;
  --text-faint:    #6d8795;
  --border:        #24404f;
  --border-strong: #355668;
  --ring:          rgba(110,170,215,.5);
  --brand-ink:     #e8f1f6;
  --state-ready:   #5aa4d8;   /* ready stays a clear sky-blue at dusk */
  --edge-hi:       inset 0 1px 0 rgba(170,210,235,.12);
  --grad-brand:      linear-gradient(150deg, var(--brand-400) 0%, var(--brand-600) 60%, var(--brand-700) 100%);
  --grad-brand-deep: linear-gradient(160deg, var(--brand-600) 0%, var(--brand-800) 70%, var(--brand-900) 100%);
  --grad-brand-gold: linear-gradient(120deg, var(--brand-800) 0%, var(--brand-500) 46%, var(--accent-500) 100%);
  --glow-brand: radial-gradient(60% 80% at 50% 0%, rgba(90,164,216,.26), transparent 70%);
  --bg-grad:
    radial-gradient(120% 85% at 86% -10%, rgba(90,164,216,.16), transparent 56%),
    radial-gradient(95% 78% at -4% 106%, rgba(208,170,100,.10), transparent 56%),
    linear-gradient(180deg, #0f2230 0%, #0c1a24 55%, #081119 100%);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="coast"]:not([data-theme="light"]) {
    --bg:            #0c1a24;
    --bg-sunken:     #081119;
    --surface:       #142836;
    --surface-2:     #1b3242;
    --surface-glass: rgba(16,34,46,.62);
    --text:          #e8f1f6;
    --text-muted:    #a3bcc9;
    --text-faint:    #6d8795;
    --border:        #24404f;
    --border-strong: #355668;
    --ring:          rgba(110,170,215,.5);
    --brand-ink:     #e8f1f6;
    --state-ready:   #5aa4d8;
    --edge-hi:       inset 0 1px 0 rgba(170,210,235,.12);
    --grad-brand:      linear-gradient(150deg, var(--brand-400) 0%, var(--brand-600) 60%, var(--brand-700) 100%);
    --grad-brand-deep: linear-gradient(160deg, var(--brand-600) 0%, var(--brand-800) 70%, var(--brand-900) 100%);
    --grad-brand-gold: linear-gradient(120deg, var(--brand-800) 0%, var(--brand-500) 46%, var(--accent-500) 100%);
    --glow-brand: radial-gradient(60% 80% at 50% 0%, rgba(90,164,216,.26), transparent 70%);
    --bg-grad:
      radial-gradient(120% 85% at 86% -10%, rgba(90,164,216,.16), transparent 56%),
      radial-gradient(95% 78% at -4% 106%, rgba(208,170,100,.10), transparent 56%),
      linear-gradient(180deg, #0f2230 0%, #0c1a24 55%, #081119 100%);
  }
}
/* coast · structure: borderless floating cards, bigger lift */
[data-skin="coast"] .card {
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
[data-skin="coast"] .card:hover,
[data-skin="coast"] .card--gold-hover:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
/* coast · structure: lighter, sunlit topbar */
[data-skin="coast"] header.topbar, [data-skin="coast"] header#topbar {
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-400) 100%);
}
/* coast · structure: relaxed borderless table rows with soft stripes */
[data-skin="coast"] table.data tbody td {
  padding: 16px;
  border-bottom: 0;
}
[data-skin="coast"] table.data tbody tr:nth-child(even) { background: var(--surface-2); }
[data-skin="coast"] .btn { padding: 15px 26px; }

/* ===== SKIN: skyrim — the great hall of the north (Elder Scrolls V). Light =
   an old parchment map page; dark = a candlelit stone hall. Aged vellum grounds,
   weathered-steel/iron chrome, deep dragon-gilt ember accent, carved-stone
   Herculanum inscriptions over a readable Palatino body, heavy forged-iron
   rules (2px, not hairlines), squared/beveled shapes, fantasy-menu density.
   State colors keep meaning: --state-ready re-pinned to a frost-enchant BLUE
   (brand is steel-grey here, so it can't carry "ready"), pending = torch amber,
   done = patina green. No idle motion — carved things don't drift. ===== */
:root[data-skin="skyrim"] {
  /* palette — weathered steel/iron chrome */
  --brand:      #55606b;
  --brand-50:   #eef0f1;
  --brand-100:  #dfe2e4;
  --brand-200:  #c3c8cd;
  --brand-300:  #9aa2aa;
  --brand-400:  #6c7681;
  --brand-500:  #55606b;
  --brand-600:  #454e58;
  --brand-700:  #353c45;
  --brand-800:  #262b32;
  --brand-900:  #191d22;
  --brand-ink:  #2a2012;
  /* accent — dragon-gilt (aged ember gold) */
  --accent:     #b1852f;
  --accent-300: #e2c883;
  --accent-400: #c99a3e;
  --accent-500: #b1852f;
  --accent-600: #8f6a23;
  --accent-700: #6e511b;
  /* state = meaning: ready is a frost-enchant blue (brand is grey here), pending
     a torch amber, done a patina green — three distinct hues, none the gilt */
  --state-ready: #4f74b8;
  --ok:   #5a7d4a;  --ok-bg:   #e4ead4;
  --warn: #bd6f1e;  --warn-bg: #f2e2c4;
  --bad:  #a83828;  --bad-bg:  #eed8cf;
  --ring: rgba(143,106,35,.4);
  /* aged parchment grounds */
  --bg:            #e6d8ba;
  --bg-sunken:     #dac9a4;
  --surface:       #f2e9cf;
  --surface-2:     #e9dcbb;
  --surface-glass: rgba(242,233,207,.72);
  --text:          #2a2012;
  --text-muted:    #5f4f34;
  --text-faint:    #8a7752;
  --border:        #bda879;
  --border-strong: #8a6f47;
  --edge-hi:       inset 0 1px 0 rgba(255,249,228,.5);
  /* TEXTURE — self-contained data-URIs (no external assets, fully static) */
  --sk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  --sk-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M11 1L21 11L11 21L1 11Z' fill='%238f6a23'/%3E%3Cpath d='M11 5L17 11L11 17L5 11Z' fill='%23e2c883'/%3E%3C/svg%3E");
  /* aged-parchment page: grain tooth + sepia stains + warm-edge vignette */
  --bg-grad:
    var(--sk-grain),
    radial-gradient(120% 90% at 88% -8%, rgba(120,86,40,.13), transparent 55%),
    radial-gradient(95% 85% at -5% 108%, rgba(150,110,45,.17), transparent 58%),
    radial-gradient(135% 130% at 50% 42%, rgba(58,42,20,0) 50%, rgba(58,42,20,.20) 100%);
  /* typography — carved-stone inscription display + readable old-book body */
  --font-display: 'Herculanum', 'Trajan Pro', 'Cinzel', 'Palatino Linotype', Palatino, 'Times New Roman', serif;
  --font-body:    'Palatino Linotype', 'Book Antiqua', Palatino, 'Iowan Old Style', Georgia, serif;
  /* shape — squared, beveled */
  --r-sm:   3px;
  --r-card: 4px;
  --r-lg:   5px;
  --r-pill: 4px;
  /* density — weighty fantasy menu */
  --fs-body: 1.06rem;
  --fs-lg:   1.25rem;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-16: 60px;
  --sp-24: 100px;
  --nav-h: 64px;
  /* shadows — sepia depth on the parchment page */
  --shadow-sm: 0 1px 2px rgba(58,42,20,.16);
  --shadow:    0 2px 4px rgba(58,42,20,.14), 0 8px 20px rgba(58,42,20,.12);
  --shadow-md: 0 4px 10px rgba(58,42,20,.16), 0 16px 34px rgba(58,42,20,.14);
  --shadow-lg: 0 12px 26px rgba(58,42,20,.18), 0 34px 66px rgba(58,42,20,.20);
}
/* SHELL CHROME re-skin — the OS shell (portal/shell/shell.css) paints every
   pane from hardcoded --sh-* tokens. Re-mapping them here (:root[data-skin]
   = 0,2,0, out-specifies shell.css :root = 0,1,0) turns the ENTIRE shell into
   the candlelit stone hall in one stroke. Default register = STONE (the shell
   is a dark-ground surface); a pinned light theme swaps to the parchment page.
   This is skin CSS in bitzy-ui.css — shell.css is never edited. */
:root[data-skin="skyrim"] {
  /* THE REAL SKYRIM MENU: cold charcoal/slate near-black, desaturated, minimal —
     NOT parchment (that's the book UI, kept only in pinned-light below). The one
     warm note is the candle-ember ambient field; the chrome itself stays cold.
     (Andrew 7/20 correction: dark = charcoal/slate/thin-serif, cold desaturated.) */
  --sh-ground: #0b0d11;                  /* cold near-black slate */
  --sh-panel:  #14171d;                  /* carved cold slate */
  --sh-panel2: #0f1217;                  /* deep recess */
  --sh-ink:    #d7dbe1;                  /* cold bone-silver — desaturated */
  --sh-muted:  #8a919c;                  /* cold ash grey */
  --sh-faint:  #545a65;                  /* cold faint */
  --sh-line:   #2b3039;                  /* forged cold-iron rule */
  --sh-gold:   #bda56a;                  /* aged, desaturated gilt (muted, cool) */
  --sh-amber:  #cf9042;                  /* torch — pending */
  --sh-green:  #7d9c86;                  /* cold patina — done */
  --sh-red:    #cf5f4f;                  /* blood — blocked */
  --sh-caps:   var(--font-body);         /* serif old-book voice replaces Avenir */
  --sk-vignette: radial-gradient(135% 130% at 50% 30%, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 100%);
}
:root[data-skin="skyrim"][data-theme="light"] {
  /* pinned-light shell = the parchment map page */
  --sh-ground: #e6d8ba;
  --sh-panel:  #f2e9cf;
  --sh-panel2: #e3d3ad;
  --sh-ink:    #2a2012;
  --sh-muted:  #5f4f34;
  --sh-faint:  #8a7752;
  --sh-line:   #8a6f47;
  --sh-gold:   #8f6a23;
  --sh-amber:  #bd6f1e;
  --sh-green:  #5a7d4a;
  --sh-red:    #a83828;
  --sk-vignette: radial-gradient(135% 130% at 50% 42%, rgba(58,42,20,0) 50%, rgba(58,42,20,.24) 100%);
}
:root[data-skin="skyrim"][data-theme="dark"] {
  /* candlelit stone hall */
  --bg:            #121110;
  --bg-sunken:     #0a0908;
  --surface:       #1c1a15;
  --surface-2:     #262218;
  --surface-glass: rgba(26,23,18,.62);
  --text:          #ddceac;
  --text-muted:    #a89772;
  --text-faint:    #766a4f;
  --border:        #3b3324;
  --border-strong: #584a33;
  --ring:          rgba(201,154,62,.5);
  --brand-ink:     #ddceac;
  --state-ready:   #6f97d8;   /* frost-blue lifts off the dark stone */
  --ok-bg:   #1a2413;  --warn-bg: #2c1e0b;  --bad-bg:  #2a120c;
  --edge-hi:       inset 0 1px 0 rgba(214,180,116,.12);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.55);
  --shadow:    0 2px 6px rgba(0,0,0,.6), 0 10px 24px rgba(0,0,0,.5);
  --shadow-md: 0 6px 16px rgba(0,0,0,.6), 0 20px 44px rgba(0,0,0,.55);
  --shadow-lg: 0 14px 30px rgba(0,0,0,.65), 0 40px 80px rgba(0,0,0,.65);
  --shadow-accent: 0 10px 30px rgba(201,154,62,.3);
  --grad-brand:      linear-gradient(150deg, var(--brand-400) 0%, var(--brand-600) 60%, var(--brand-700) 100%);
  --grad-brand-deep: linear-gradient(160deg, var(--brand-600) 0%, var(--brand-800) 70%, var(--brand-900) 100%);
  --grad-brand-gold: linear-gradient(120deg, var(--brand-800) 0%, var(--brand-500) 46%, var(--accent-500) 100%);
  --glow-gold:  radial-gradient(60% 80% at 50% 0%, rgba(201,154,62,.28), transparent 70%);
  --glow-brand: radial-gradient(60% 80% at 50% 0%, rgba(120,110,90,.22), transparent 70%);
  /* candlelit stone: grit + warm ember glows + dark vignette */
  --bg-grad:
    var(--sk-grain),
    radial-gradient(100% 80% at 85% -6%, rgba(201,140,50,.15), transparent 52%),
    radial-gradient(95% 78% at 8% 110%, rgba(150,85,28,.18), transparent 55%),
    radial-gradient(140% 135% at 50% 38%, rgba(0,0,0,0) 42%, rgba(0,0,0,.48) 100%);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="skyrim"]:not([data-theme="light"]) {
    --bg:            #121110;
    --bg-sunken:     #0a0908;
    --surface:       #1c1a15;
    --surface-2:     #262218;
    --surface-glass: rgba(26,23,18,.62);
    --text:          #ddceac;
    --text-muted:    #a89772;
    --text-faint:    #766a4f;
    --border:        #3b3324;
    --border-strong: #584a33;
    --ring:          rgba(201,154,62,.5);
    --brand-ink:     #ddceac;
    --state-ready:   #6f97d8;
    --ok-bg:   #1a2413;  --warn-bg: #2c1e0b;  --bad-bg:  #2a120c;
    --edge-hi:       inset 0 1px 0 rgba(214,180,116,.12);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.55);
    --shadow:    0 2px 6px rgba(0,0,0,.6), 0 10px 24px rgba(0,0,0,.5);
    --shadow-md: 0 6px 16px rgba(0,0,0,.6), 0 20px 44px rgba(0,0,0,.55);
    --shadow-lg: 0 14px 30px rgba(0,0,0,.65), 0 40px 80px rgba(0,0,0,.65);
    --shadow-accent: 0 10px 30px rgba(201,154,62,.3);
    --grad-brand:      linear-gradient(150deg, var(--brand-400) 0%, var(--brand-600) 60%, var(--brand-700) 100%);
    --grad-brand-deep: linear-gradient(160deg, var(--brand-600) 0%, var(--brand-800) 70%, var(--brand-900) 100%);
    --grad-brand-gold: linear-gradient(120deg, var(--brand-800) 0%, var(--brand-500) 46%, var(--accent-500) 100%);
    --glow-gold:  radial-gradient(60% 80% at 50% 0%, rgba(201,154,62,.28), transparent 70%);
    --glow-brand: radial-gradient(60% 80% at 50% 0%, rgba(120,110,90,.22), transparent 70%);
    --bg-grad:
      var(--sk-grain),
      radial-gradient(100% 80% at 85% -6%, rgba(201,140,50,.15), transparent 52%),
      radial-gradient(95% 78% at 8% 110%, rgba(150,85,28,.18), transparent 55%),
      radial-gradient(140% 135% at 50% 38%, rgba(0,0,0,0) 42%, rgba(0,0,0,.48) 100%);
  }
}
/* ═══ skyrim · BITZY-side chrome (portal + tools that load .card/.btn/table) ═══ */
/* page grain — the parchment/stone tooth (bitzy pages; shell handled below) */
[data-skin="skyrim"] body:not(.sh) {
  background-attachment: fixed, scroll, scroll, scroll;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 160px 160px, cover, cover, cover;
}
/* forged-iron topbar band — hammered (grain + inset bevel) under a gilt rule */
[data-skin="skyrim"] header.topbar, [data-skin="skyrim"] header#topbar {
  background: var(--sk-grain), linear-gradient(180deg, var(--brand-600) 0%, var(--brand-800) 100%);
  background-size: 160px 160px, cover;
  background-repeat: repeat, no-repeat;
  border-bottom: 3px solid var(--accent-600);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -6px 14px rgba(0,0,0,.35), 0 3px 0 rgba(0,0,0,.28);
}
/* carved-caps inscriptions + an illuminated gilt drop-cap on the page title */
[data-skin="skyrim"] h2, [data-skin="skyrim"] h3, [data-skin="skyrim"] .card__title { letter-spacing: .04em; }
[data-skin="skyrim"] h1 { letter-spacing: .06em; }
[data-skin="skyrim"] h1::first-letter { color: var(--accent-600); font-size: 1.35em; font-weight: 700; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
/* rune-marked eyebrows */
[data-skin="skyrim"] .eyebrow { text-transform: uppercase; letter-spacing: .3em; color: var(--accent-600); }
[data-skin="skyrim"] .eyebrow::before { content: "\25C6\A0"; opacity: .9; }
/* carved-stone / iron-bound tablets — heavy border, layered bevel, grain, forged corners */
[data-skin="skyrim"] .card,
[data-skin="skyrim"] .card--gold,
[data-skin="skyrim"] .card-glass {
  position: relative;
  border: 2px solid var(--border-strong);
  background-image: var(--sk-grain);
  background-size: 160px 160px;
  background-blend-mode: multiply;
  box-shadow:
    inset 0 2px 0 rgba(255,250,235,.35),
    inset 0 -3px 8px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(0,0,0,.14),
    var(--shadow-md);
}
/* two forged gilt corner brackets (top-left + bottom-right) */
[data-skin="skyrim"] .card::before,
[data-skin="skyrim"] .card::after { content: ""; position: absolute; width: 15px; height: 15px; pointer-events: none; }
[data-skin="skyrim"] .card::before { top: 5px; left: 5px; border-top: 2px solid var(--accent-600); border-left: 2px solid var(--accent-600); }
[data-skin="skyrim"] .card::after { bottom: 5px; right: 5px; border-bottom: 2px solid var(--accent-600); border-right: 2px solid var(--accent-600); }
[data-skin="skyrim"] .card:hover,
[data-skin="skyrim"] .card--gold:hover,
[data-skin="skyrim"] .card--gold-hover:hover {
  transform: none; border-color: var(--accent-600);
  box-shadow:
    inset 0 2px 0 rgba(255,250,235,.35),
    inset 0 -3px 8px rgba(0,0,0,.2),
    inset 0 0 0 1px rgba(0,0,0,.16),
    var(--shadow-lg);
}
/* pressed-metal buttons — carved bevel, squared, weighty */
[data-skin="skyrim"] .btn {
  text-transform: uppercase; letter-spacing: .1em; font-weight: 700; padding: 12px 22px;
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 5px rgba(0,0,0,.28), 0 2px 3px rgba(0,0,0,.28);
}
[data-skin="skyrim"] .btn:hover { transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 5px rgba(0,0,0,.3), 0 3px 6px rgba(0,0,0,.32); }
[data-skin="skyrim"] .btn:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0,0,0,.4); }
/* iron tags */
[data-skin="skyrim"] .badge, [data-skin="skyrim"] .chip { border-radius: 3px; border: 1px solid var(--border-strong); letter-spacing: .04em; }
/* inscription table head + forged row rules */
[data-skin="skyrim"] table.data thead th { background: var(--bg-sunken); text-transform: uppercase; letter-spacing: .16em; border-bottom: 2px solid var(--accent-600); }
[data-skin="skyrim"] table.data tbody td { border-bottom: 1px solid var(--border); }
[data-skin="skyrim"] table.data tbody tr:nth-child(even) { background: var(--bg-sunken); }
/* divider becomes a gilt fantasy flourish with a center diamond, not a hairline */
[data-skin="skyrim"] .divider {
  height: 22px; border: 0;
  background:
    var(--sk-flourish) center/22px 22px no-repeat,
    linear-gradient(90deg, transparent, var(--accent-600) 22%, var(--accent-600) 78%, transparent) center/100% 2px no-repeat;
}

/* ═══ skyrim · SHELL chrome — the cold charcoal HALL (Ives 2026-07-20 rebuild).
   These carry `body.sh` so they out-specify BOTH portal/shell/shell.css AND the
   shared §MATERIAL glass block (body.sh .sh-*): Skyrim keeps its carved-slate
   character — thin cold-silver inscriptions, forged gilt brackets, stone grain —
   while INHERITING the shared vibrancy-glass + spring lift, so the candle-ember
   ambient field glows softly THROUGH the slate. Cold desaturated everywhere; the
   only warmth is the fire behind the glass. ═══ */
/* charcoal ground (a no-JS fallback under the ambient canvas) */
[data-skin="skyrim"] body.sh {
  background-color: var(--sh-ground);
  background-image: var(--sk-grain), var(--sk-vignette);
  background-repeat: repeat, no-repeat;
  background-size: 160px 160px, cover;
  background-attachment: fixed, fixed;
}
/* cold-iron nav rail — a slate BAR with a gilt-studded mark. (The rail runs
   along the TOP at every width since 2026-07-26, so the skin's iron edge moved
   from the right side to the bottom and its heavier active mark from the left
   border to the underline. Same outfit, same weights — re-cut for a row.) */
[data-skin="skyrim"] body.sh .sh-rail { border-bottom: 1.5px solid var(--sh-line); }
[data-skin="skyrim"] .sh-rail-mark { border: 1.5px solid var(--sh-gold); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5); }
[data-skin="skyrim"] .sh-nav a, [data-skin="skyrim"] .sh-nav span, [data-skin="skyrim"] .sh-toolsbtn { letter-spacing: .2em; }
[data-skin="skyrim"] .sh-nav .is-active { border-bottom-width: 3px; }
/* carved page title — a thin, wide, cold-SILVER Herculanum inscription (elegant,
   not chunky) under a fine gilt hairline; only the drop-cap is gilded */
[data-skin="skyrim"] body.sh .sh-head h1 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: .24em;
  font-size: 27px; color: var(--sh-ink); padding-bottom: 11px;
  border-bottom: 1px solid color-mix(in srgb, var(--sh-gold) 42%, transparent);
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}
[data-skin="skyrim"] body.sh .sh-head h1 em { color: var(--sh-ink); font-style: normal; }
[data-skin="skyrim"] body.sh .sh-head h1::first-letter { color: var(--sh-gold); font-size: 1.16em; font-weight: 400; }
/* carved cold-slate tablets — glass + grain + forged bevel + deep elevation */
[data-skin="skyrim"] body.sh .sh-panel {
  border: 1.5px solid var(--sh-line);
  background:
    /* cold bone frosted-sheen — carved slate reads as LIT stone, lifted off the
       charcoal floor; the warm embers behind glow up THROUGH the translucent tint */
    linear-gradient(180deg, color-mix(in srgb, var(--sh-ink) 7%, transparent), transparent 42%),
    var(--sk-grain),
    linear-gradient(180deg, color-mix(in srgb, var(--sh-panel) 60%, transparent), color-mix(in srgb, var(--sh-panel2) 68%, transparent));
  background-size: cover, 160px 160px, cover;
  background-blend-mode: normal, overlay, normal;
  -webkit-backdrop-filter: blur(22px) saturate(122%) brightness(1.2);
  backdrop-filter: blur(22px) saturate(122%) brightness(1.2);
  box-shadow:
    inset 0 1px 0 rgba(214,225,240,.1),
    inset 0 -6px 14px rgba(0,0,0,.38),
    inset 0 0 0 1px rgba(0,0,0,.28),
    0 2px 6px rgba(0,0,0,.5), 0 20px 48px -14px rgba(0,0,0,.7);
  transition: box-shadow var(--sh-base,200ms) ease, border-color var(--sh-base,200ms) ease, background-color .45s ease;
}
[data-skin="skyrim"] body.sh .sh-panel:hover {
  border-color: color-mix(in srgb, var(--sh-gold) 42%, var(--sh-line));
  box-shadow:
    inset 0 1px 0 rgba(214,225,240,.1),
    inset 0 -6px 14px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(0,0,0,.3),
    0 2px 6px rgba(0,0,0,.5), 0 26px 60px -14px rgba(0,0,0,.75),
    0 0 26px -6px color-mix(in srgb, var(--sh-gold) 32%, transparent);
}
/* forged gilt corner mark → dialed to a WHISPER per the soft-glass ruling: a
   single tucked top-left tick (thin, muted gilt, inside the soft radius) — the
   carved character survives as a quiet accent, subordinate to the lit-slate glass.
   The old both-corners 3px HUD brackets + diagonal nubs are retired. */
[data-skin="skyrim"] .sh-panel::before {
  top: 11px; left: 11px; width: 11px; height: 11px; border-top-left-radius: 3px;
  border-top: 2px solid color-mix(in srgb, var(--sh-gold) 42%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--sh-gold) 42%, transparent);
  background: none;
}
[data-skin="skyrim"] .sh-panel::after { content: none; }
/* inscribed panel caption — thin cold-silver Herculanum, gilt rune, forged underline */
[data-skin="skyrim"] .sh-panel-cap { border-bottom: 1px solid var(--sh-line); padding-bottom: 8px; }
[data-skin="skyrim"] .sh-panel-cap .sh-cap { font-family: var(--font-display); letter-spacing: .2em; font-weight: 400; color: var(--sh-muted); }
[data-skin="skyrim"] .sh-panel-cap .sh-cap::before { content: "\25C6\A0"; color: var(--sh-gold); }
/* status tiles + roster cards → carved cold-slate plinths (glass, grain, lift) */
[data-skin="skyrim"] body.sh .sh-tile,
[data-skin="skyrim"] body.sh .of-card {
  border: 1.5px solid var(--sh-line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sh-ink) 7%, transparent), transparent 46%),
    var(--sk-grain),
    linear-gradient(180deg, color-mix(in srgb, var(--sh-panel) 56%, transparent), color-mix(in srgb, var(--sh-panel2) 64%, transparent));
  background-size: cover, 160px 160px, cover;
  background-blend-mode: normal, overlay, normal;
  -webkit-backdrop-filter: blur(18px) saturate(122%) brightness(1.18);
  backdrop-filter: blur(18px) saturate(122%) brightness(1.18);
  box-shadow:
    inset 0 1px 0 rgba(214,225,240,.09),
    inset 0 -3px 8px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(0,0,0,.26),
    0 2px 6px rgba(0,0,0,.5), 0 14px 34px -12px rgba(0,0,0,.66);
  transition: transform var(--sh-base,200ms) var(--sh-spring,ease-out), box-shadow var(--sh-base,200ms) ease, border-color var(--sh-base,200ms) ease;
}
[data-skin="skyrim"] body.sh .sh-tile:hover,
[data-skin="skyrim"] body.sh .of-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--sh-gold) 40%, var(--sh-line));
  box-shadow:
    inset 0 1px 0 rgba(214,225,240,.09),
    inset 0 -3px 8px rgba(0,0,0,.36),
    inset 0 0 0 1px rgba(0,0,0,.3),
    0 2px 6px rgba(0,0,0,.5), 0 22px 48px -12px rgba(0,0,0,.72),
    0 0 24px -6px color-mix(in srgb, var(--sh-gold) 34%, transparent);
}
/* forged chips + pressed-metal gold actions */
[data-skin="skyrim"] .sh-chip { border: 1px solid var(--sh-line); border-radius: 3px; }
[data-skin="skyrim"] .sh-golink, [data-skin="skyrim"] .sh-login button { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 5px rgba(0,0,0,.34), 0 2px 3px rgba(0,0,0,.36); }
[data-skin="skyrim"] .sh-login .sh-panel, [data-skin="skyrim"] .sh-login input { border-radius: 3px; }

/* ===== cross-skin safety: density changes never break touch floors ===== */
@media (pointer: coarse) {
  [data-skin] .btn  { min-height: 44px; }
  [data-skin] .chip { min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   23b. SKIN PICKER CHROME — button + popover injected by skin-picker.js.
   .skin-btn deliberately mirrors .theme-btn (its neighbor) but is its OWN
   class so clicking it can never trip the document-level theme flipper.
   --------------------------------------------------------------------------- */
.skin-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border-radius: var(--r-pill); cursor: pointer;
  background: var(--surface-2); color: var(--brand-600);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm), var(--edge-hi);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.skin-btn:hover { color: var(--accent-600); border-color: var(--card-gold-ring); transform: translateY(-1px); }
.skin-btn:active { transform: translateY(0); }
.skin-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.skin-btn svg { width: 19px; height: 19px; display: block; }
[data-theme="dark"] .skin-btn { color: var(--accent-400); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .skin-btn { color: var(--accent-400); }
}
/* white-on-navy topbars restyle .theme-btn page-locally; give .skin-btn the
   same treatment from HERE so the pair always matches (topbar stays brand-
   painted in both themes, so white-glass chrome is theme-safe). */
.topbar .skin-btn, #topbar .skin-btn, .dash-topbar .skin-btn {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22);
  color: #fff; box-shadow: none;
}
.topbar .skin-btn:hover, #topbar .skin-btn:hover, .dash-topbar .skin-btn:hover {
  background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.35); color: #fff;
}

.skin-pop {
  position: fixed; z-index: 120;
  min-width: 190px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); box-shadow: var(--shadow-md), var(--edge-hi);
  font-family: var(--font-ui);
}
.skin-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px; margin: 0;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--text); font: inherit; font-size: .9rem; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.skin-opt:hover { background: var(--surface-2); }
.skin-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.skin-opt[aria-selected="true"] { color: var(--brand-500); font-weight: 700; }
.skin-opt[aria-selected="true"]::after { content: "\2713"; margin-left: auto; }
[data-theme="dark"] .skin-opt[aria-selected="true"] { color: var(--accent-400); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .skin-opt[aria-selected="true"] { color: var(--accent-400); }
}
/* two-tone swatch per outfit (the ONLY place skin preview colors live) */
.skin-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--border-strong); }
.skin-dot--default   { background: linear-gradient(135deg, #283977 55%, #c9a766 55%); }
.skin-dot--ledger    { background: linear-gradient(135deg, #f7f1e3 55%, #8a7238 55%); }
.skin-dot--graphite  { background: linear-gradient(135deg, #3a3f4a 55%, #b89a55 55%); }
.skin-dot--blueprint { background: linear-gradient(135deg, #155089 55%, #e9f1f9 55%); }
.skin-dot--coast     { background: linear-gradient(135deg, #4b93c4 55%, #ecd9ae 55%); }
.skin-dot--skyrim    { background: linear-gradient(135deg, #1c1a15 55%, #b1852f 55%); }

/* thumb-friendly targets */
@media (max-width: 600px) { .skin-btn { width: 44px; height: 44px; } .skin-btn svg { width: 20px; height: 20px; } }
@media (pointer: coarse)  { .skin-btn { min-width: 44px; min-height: 44px; } .skin-opt { min-height: 44px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   §FIELD EXPLORATION — Starfield default ground directions (Ives · 2026-07-20)
   ---------------------------------------------------------------------------
   TEMPORARY, SCOPED, NON-DEFAULT. Per Andrew's 08:08 law — "BRAND BLUE = ACCENT/
   HOMAGE, NOT the field" — these three [data-field] blocks re-map ONLY the shell's
   --sh-* field tokens (+ the ambient-field.js palette hooks) to explore genuinely
   distinct premium GROUNDS for Starfield's default look. They do NOT set the
   default: with no [data-field] attribute the shipped navy Starfield is untouched.
   Selector specificity :root[data-field] (0,2,0) out-specifies shell.css :root
   (0,1,0), same mechanism the skins use. This block is for SCREENSHOTS ONLY —
   the winner Andrew picks gets promoted into the real default afterward.

   KEPT IN EVERY DIRECTION (never re-tinted here): entity chips (BONIN/BCI/GCE =
   config meaning), the Apple soft-glass §MATERIAL (shell.css), the living ambient,
   44px floors + reduced-motion. Only the FIELD (ground/panels/accents) changes.
   State colors stay meaningful (--sh-green done · --sh-amber pending · --sh-red
   blocked). Blue appears as ACCENT/HOMAGE in each, never as the base.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A · DEEP SPACE OBSIDIAN ──────────────────────────────────────────────────
   Near-black cosmic field, cool indigo/violet nebula, warm GOLD as the primary
   accent (the Bonin gold LEADS — brighter, richer). Blue survives only as the
   subtle indigo nebula + the BONIN entity chip: a quiet secondary homage.
   Premium, mostly-monochrome-with-gold. */
:root[data-field="A"]{
  --sh-ground:#08080F;      /* near-black, a breath of violet */
  --sh-panel:#141221;       /* cool violet-charcoal glass body */
  --sh-panel2:#0D0B17;      /* deep recess */
  --sh-ink:#EEEBF4;         /* cool-warm white */
  --sh-muted:#9089A8;       /* violet-grey */
  --sh-faint:#5D5777;       /* violet faint */
  --sh-line:#251F3A;        /* violet hairline */
  --sh-gold:#E8C570;        /* LEAD accent — richer, warmer gold */
  --sh-amber:#E8A63C;       /* pending */
  --sh-green:#4CB483;       /* done */
  --sh-red:#E06455;         /* blocked */
  /* ambient (living layer) */
  --sh-fieldtop:#171137;    /* deep indigo top-glow */
  --sh-star:#F3EFDD;        /* warm ivory starlight (gold-leaning) */
  --sh-neb1:#38357F;        /* indigo — the blue homage thread */
  --sh-neb2:#7C4CB6;        /* violet */
  --sh-neb3:#E8C570;        /* gold bloom LEADS the scene */
  --sh-neb-a:1;
}

/* ── B · TWILIGHT NEBULA ──────────────────────────────────────────────────────
   A richer aurora field — deep plum → teal → warm-amber cosmic gradient, more
   colour life. Blue is woven as ONE thread among several: the indigo top-glow +
   the teal nebula carry the cool blue, the BONIN chip carries the brand nod.
   Vivid, but Apple-restrained. */
:root[data-field="B"]{
  --sh-ground:#0B0C15;      /* deep cool near-black */
  --sh-panel:#161222;       /* plum-charcoal glass body */
  --sh-panel2:#0F0C18;      /* deep recess */
  --sh-ink:#F1ECF3;         /* soft white */
  --sh-muted:#A196AA;       /* plum-grey */
  --sh-faint:#635870;       /* plum faint */
  --sh-line:#271F33;        /* plum hairline */
  --sh-gold:#E2B65F;        /* warm gold accent */
  --sh-amber:#E6A23C;       /* pending */
  --sh-green:#3FC28C;       /* done — teal-green fits the aurora */
  --sh-red:#E86159;         /* blocked */
  /* ambient (living layer) */
  --sh-fieldtop:#202250;    /* indigo-blue top-glow — the blue thread */
  --sh-star:#EAF0F7;        /* cool starlight */
  --sh-neb1:#7C2E78;        /* deep plum / magenta */
  --sh-neb2:#238C92;        /* teal */
  --sh-neb3:#D98A3C;        /* warm amber */
  --sh-neb-a:1.18;          /* more colour life — vivid but not gaudy */
}

/* ── C · WARM METAL / GRAPHITE VOID ───────────────────────────────────────────
   A sophisticated graphite/charcoal field with warm BRASS + bronze accents and
   faint warm starlight. Blue is the single COOL COUNTERPOINT — one steel-blue
   nebula against the warm metals (+ the BONIN chip). Editorial, grown-up, less
   'sci-fi.' */
:root[data-field="C"]{
  --sh-ground:#101011;      /* true neutral graphite-black, a hair warm */
  --sh-panel:#1A1A1C;       /* brushed graphite glass body */
  --sh-panel2:#141415;      /* deep recess */
  --sh-ink:#EDEAE4;         /* warm white */
  --sh-muted:#9C978C;       /* warm grey */
  --sh-faint:#635E55;       /* warm faint */
  --sh-line:#2B2A27;        /* warm graphite hairline */
  --sh-gold:#C99B5D;        /* BRASS — warmer, less yellow than gold */
  --sh-amber:#BE863C;       /* bronze — pending */
  --sh-green:#5FA982;       /* muted patina — done */
  --sh-red:#D9604B;         /* blocked */
  /* ambient (living layer) */
  --sh-fieldtop:#24211C;    /* warm graphite top-glow (NOT navy) */
  --sh-star:#EBE0C9;        /* faint warm cream starlight */
  --sh-neb1:#6E5230;        /* warm bronze glow */
  --sh-neb2:#3A4E76;        /* COOL steel-blue — the accent counterpoint */
  --sh-neb3:#C99B5D;        /* brass bloom */
  --sh-neb-a:0.72;          /* restrained, editorial — dials the sci-fi back */
}
/* END §FIELD EXPLORATION */

/* END bitzy-ui.css */