/* ============================================================================
   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 */

  /* ---- 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;

  /* ---- 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; }
}

/* ---------------------------------------------------------------------------
   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;
}

/* END bitzy-ui.css */