/* ============================================================================
   artificialBRIDGE — Theme System v7.0
   ----------------------------------------------------------------------------
   ONE source of truth for colour, elevation, and motion across every page.

   Loaded LAST in <head> so it wins ties against the per-page inline <style>
   blocks without requiring any page to be rewritten from scratch.

   Two complete themes:
     · light  — Precision Paper. High-contrast ink on cool paper, layered
                navy-tinted elevation, deliberate hover choreography.
     · dark   — Deep Navy Console. The operator-dashboard palette: near-black
                indigo ground, lifted panels, electric-blue action colour.

   Every colour ships as both a hex token and an `--ab-*-rgb` channel triplet
   so any page can compose alpha values that survive a theme flip:
       background: rgb(var(--ab-ink-rgb) / 0.08);
   ========================================================================== */

/* ── Light: Precision Paper (default) ─────────────────────────────────────── */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Ground */
  --ab-bg:          #F4F6FA;
  --ab-bg-2:        #EAEEF7;
  --ab-surface:     #FFFFFF;
  --ab-surface-2:   #F1F4FA;
  --ab-surface-3:   #E7ECF6;
  --ab-surface-inv: #0E1726;

  /* Ink ramp. Every step clears WCAG AA for body copy against BOTH
     --ab-surface and the slightly darker --ab-bg; nothing here is
     decorative-only, because the pages use all four for real text. */
  --ab-ink:    #0A101E;
  --ab-ink-2:  #39445A;
  --ab-ink-3:  #56637C;
  --ab-ink-4:  #616D87;
  --ab-ink-inv:#FFFFFF;

  /* Lines */
  --ab-border:   #DCE2ED;
  --ab-border-2: #C3CCDD;
  --ab-border-3: #0A101E;

  /* Action */
  --ab-accent:      #0E1726;
  --ab-accent-hi:   #1C2942;
  --ab-accent-lo:   #060B15;
  --ab-accent-soft: #EBEFF7;
  /* Filled surfaces use -solid so white sits on it at >= 4.5:1 in both
     themes, while --ab-accent stays bright enough to read as text. */
  --ab-accent-solid:#0E1726;
  --ab-accent-solid-hi:#1C2942;
  --ab-on-accent:   #FFFFFF;
  --ab-on-accent-hi:#FFFFFF;
  --ab-focus:       #2563EB;
  --ab-link:        #16307A;

  /* Status */
  --ab-success: #0F7A47;  --ab-success-dim: rgb(15 122 71 / 0.10);
  --ab-warning: #8A5300;  --ab-warning-dim: rgb(138 83 0 / 0.10);
  --ab-error:   #B3261E;  --ab-error-dim:   rgb(179 38 30 / 0.10);
  --ab-info:    #1D4ED8;  --ab-info-dim:    rgb(29 78 216 / 0.10);

  /* Data / chart series */
  --ab-data-1: #1D4ED8;
  --ab-data-2: #6C8FE8;
  --ab-data-3: #0E9384;
  --ab-data-4: #0F7A47;
  --ab-data-5: #8A5300;

  /* Channel triplets — for alpha composition that survives a theme flip */
  --ab-bg-rgb:      244 246 250;
  --ab-surface-rgb: 255 255 255;
  --ab-ink-rgb:      10  16  30;
  --ab-ink-2-rgb:    57  68  90;
  --ab-ink-3-rgb:    86  99 124;
  --ab-ink-4-rgb:    97 109 135;
  --ab-border-rgb:  220 226 237;
  --ab-accent-rgb:   14  23  38;
  --ab-shadow-rgb:   10  16  30;
  --ab-surface-2-rgb: 241 244 250;
  --ab-surface-3-rgb: 231 236 246;
  --ab-success-rgb:  15 122  71;
  --ab-warning-rgb: 138  83   0;
  --ab-error-rgb:   179  38  30;
  --ab-info-rgb:     29  78 216;

  /* ── Elevation ladder ───────────────────────────────────────────────────
     Each step pairs a tight *contact* shadow with a wide *ambient* one and
     tints both with the brand navy rather than pure black — the difference
     between a card that floats and a card with a smudge under it. */
  --ab-shadow-0: none;
  --ab-shadow-1:
      0 1px 1px      rgb(var(--ab-shadow-rgb) / 0.05),
      0 1px 3px -1px rgb(var(--ab-shadow-rgb) / 0.08);
  --ab-shadow-2:
      0 1px 2px      rgb(var(--ab-shadow-rgb) / 0.05),
      0 4px 8px -2px rgb(var(--ab-shadow-rgb) / 0.07),
      0 10px 20px -8px rgb(var(--ab-shadow-rgb) / 0.09);
  --ab-shadow-3:
      0 1px 2px      rgb(var(--ab-shadow-rgb) / 0.05),
      0 7px 14px -3px rgb(var(--ab-shadow-rgb) / 0.08),
      0 20px 36px -12px rgb(var(--ab-shadow-rgb) / 0.13);
  --ab-shadow-4:
      0 2px 4px      rgb(var(--ab-shadow-rgb) / 0.05),
      0 14px 26px -6px rgb(var(--ab-shadow-rgb) / 0.10),
      0 38px 62px -18px rgb(var(--ab-shadow-rgb) / 0.17);
  --ab-shadow-5:
      0 4px 8px      rgb(var(--ab-shadow-rgb) / 0.06),
      0 24px 42px -8px rgb(var(--ab-shadow-rgb) / 0.13),
      0 66px 104px -26px rgb(var(--ab-shadow-rgb) / 0.24);
  /* Hairline ring + specular top edge — reads as a real physical edge */
  --ab-ring:        0 0 0 1px rgb(var(--ab-shadow-rgb) / 0.06);
  --ab-bevel:       inset 0 1px 0 rgb(255 255 255 / 0.90);
  --ab-shadow-lift: var(--ab-shadow-4), var(--ab-bevel);
  --ab-glow:        0 0 0 1px rgb(var(--ab-accent-rgb) / 0.14);
  --ab-focus-ring:  0 0 0 2px var(--ab-surface), 0 0 0 4px rgb(37 99 235 / 0.55);

  /* Text selection */
  --ab-select-bg: rgb(var(--ab-accent-rgb) / 0.14);
  --ab-select-fg: var(--ab-ink);

  /* Chrome */
  --ab-nav-bg:     rgb(244 246 250 / 0.82);
  --ab-nav-border: var(--ab-border);
  --ab-scrim:      rgb(var(--ab-shadow-rgb) / 0.45);
  --ab-sheen:      rgb(255 255 255 / 0.70);
}

/* ── Dark: Deep Navy Console ──────────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;

  --ab-bg:          #070C1A;
  --ab-bg-2:        #0A1020;
  --ab-surface:     #101A31;
  --ab-surface-2:   #16223D;
  --ab-surface-3:   #1D2B4A;
  --ab-surface-inv: #EAF0FB;

  --ab-ink:    #EAF0FB;
  --ab-ink-2:  #AFBED8;
  --ab-ink-3:  #8494B4;
  --ab-ink-4:  #7B8AAA;
  --ab-ink-inv:#070C1A;

  --ab-border:   #1F2C4A;
  --ab-border-2: #2C3D63;
  --ab-border-3: #4F8BF7;

  --ab-accent:      #4F8BF7;
  --ab-accent-hi:   #6EA1FF;
  --ab-accent-lo:   #3A72D8;
  --ab-accent-soft: #17264A;
  --ab-accent-solid:#2C6BDB;
  /* Hover brightens the fill and flips the label to ink — a bright blue
     with white text would fall under 4.5:1. */
  --ab-accent-solid-hi:#6EA1FF;
  --ab-on-accent:   #FFFFFF;
  --ab-on-accent-hi:#06101F;
  --ab-focus:       #6EA1FF;
  --ab-link:        #8DB4FF;

  --ab-success: #34D399;  --ab-success-dim: rgb(52 211 153 / 0.14);
  --ab-warning: #F0B03C;  --ab-warning-dim: rgb(240 176 60 / 0.14);
  --ab-error:   #F87171;  --ab-error-dim:   rgb(248 113 113 / 0.14);
  --ab-info:    #60A5FA;  --ab-info-dim:    rgb(96 165 250 / 0.14);

  --ab-data-1: #5B8DEF;
  --ab-data-2: #8FB3F5;
  --ab-data-3: #2DD4BF;
  --ab-data-4: #34D399;
  --ab-data-5: #F0B03C;

  --ab-bg-rgb:        7  12  26;
  --ab-surface-rgb:  16  26  49;
  --ab-ink-rgb:     234 240 251;
  --ab-ink-2-rgb:   175 190 216;
  --ab-ink-3-rgb:   132 148 180;
  --ab-ink-4-rgb:   123 138 170;
  --ab-border-rgb:   31  44  74;
  --ab-accent-rgb:   79 139 247;
  --ab-shadow-rgb:    0   0   0;
  --ab-surface-2-rgb: 22  34  61;
  --ab-surface-3-rgb: 29  43  74;
  --ab-success-rgb:  52 211 153;
  --ab-warning-rgb: 240 176  60;
  --ab-error-rgb:   248 113 113;
  --ab-info-rgb:     96 165 250;

  /* On a dark ground, shadow alone carries almost no signal — elevation is
     read from surface luminance plus a cool rim light, so each step keeps a
     deeper cast *and* brightens its own edge. */
  --ab-shadow-0: none;
  --ab-shadow-1:
      0 1px 2px  rgb(0 0 0 / 0.40),
      inset 0 0 0 1px rgb(var(--ab-accent-rgb) / 0.05);
  --ab-shadow-2:
      0 2px 6px  rgb(0 0 0 / 0.45),
      0 8px 18px -8px rgb(0 0 0 / 0.55);
  --ab-shadow-3:
      0 4px 10px rgb(0 0 0 / 0.45),
      0 18px 36px -12px rgb(0 0 0 / 0.60);
  --ab-shadow-4:
      0 10px 24px -6px rgb(0 0 0 / 0.55),
      0 34px 64px -20px rgb(0 0 0 / 0.70);
  --ab-shadow-5:
      0 18px 38px -8px rgb(0 0 0 / 0.60),
      0 64px 110px -28px rgb(0 0 0 / 0.80);
  --ab-ring:        0 0 0 1px rgb(var(--ab-accent-rgb) / 0.12);
  --ab-bevel:       inset 0 1px 0 rgb(255 255 255 / 0.06);
  --ab-shadow-lift: var(--ab-shadow-4), var(--ab-bevel),
                    0 0 0 1px rgb(var(--ab-accent-rgb) / 0.28);
  --ab-glow:        0 0 24px -4px rgb(var(--ab-accent-rgb) / 0.35);
  --ab-focus-ring:  0 0 0 2px var(--ab-bg), 0 0 0 4px rgb(110 161 255 / 0.70);

  --ab-select-bg: rgb(var(--ab-accent-rgb) / 0.30);
  --ab-select-fg: #FFFFFF;

  --ab-nav-bg:     rgb(7 12 26 / 0.80);
  --ab-nav-border: var(--ab-border);
  --ab-scrim:      rgb(0 0 0 / 0.65);
  --ab-sheen:      rgb(var(--ab-accent-rgb) / 0.14);
}

/* ── Motion vocabulary (theme-independent) ────────────────────────────────── */
:root {
  --ab-ease:        cubic-bezier(0.22, 1, 0.36, 1);   /* out-expo, the default */
  --ab-ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
  --ab-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ab-ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);

  --ab-t-instant: 90ms;
  --ab-t-fast:    160ms;
  --ab-t-base:    240ms;
  --ab-t-slow:    420ms;
  --ab-t-cine:    720ms;

  /* One transition for every interactive surface, so the whole site shares a
     single sense of weight. */
  --ab-transition:
      background-color var(--ab-t-base) var(--ab-ease),
      border-color     var(--ab-t-base) var(--ab-ease),
      color            var(--ab-t-fast) var(--ab-ease),
      box-shadow       var(--ab-t-base) var(--ab-ease),
      transform        var(--ab-t-base) var(--ab-ease);

  --ab-r-sm: 6px;  --ab-r-md: 10px;  --ab-r-lg: 14px;
  --ab-r-xl: 18px; --ab-r-2xl: 26px; --ab-r-full: 9999px;
}

/* ── Legacy token bridge ──────────────────────────────────────────────────────
   Every page in this repo was written against an older vocabulary. Aliasing
   the old names onto the new system means one flip of `data-theme` re-colours
   the entire site — no page needs to know the theme exists.
   Font tokens (--display / --mono / --body-font) are deliberately NOT defined
   here; pages own their own typography. */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --vanta:  var(--ab-bg);
  --navy:   var(--ab-surface);
  --paper:  var(--ab-bg);
  --oat:    var(--ab-ink);
  --ink:    var(--ab-ink);
  --ink-1:  var(--ab-ink);
  --ink-2:  var(--ab-ink-2);
  --ink-3:  var(--ab-ink-3);
  --ink-4:  var(--ab-ink-4);
  --mute:   var(--ab-ink-3);
  --muted:  var(--ab-ink-2);
  --slate:  var(--ab-ink-3);
  --soft:   var(--ab-ink-3);
  --card:   var(--ab-surface);
  --panel:  var(--ab-surface);
  --surface:    var(--ab-surface);
  --surface-2:  var(--ab-surface-2);
  --bg:     var(--ab-bg);

  --gold:        var(--ab-accent);
  --gold-b:      var(--ab-accent-hi);
  --gold-d:      var(--ab-accent-lo);
  --gold-bright: var(--ab-accent-hi);
  --gold-mid:    var(--ab-accent);
  --gold-dark:   var(--ab-accent-lo);
  --gold-ash:    var(--ab-ink-4);
  --gold-ember:  var(--ab-accent-soft);
  --accent:      var(--ab-accent);

  --border:        var(--ab-border);
  --border-g:      var(--ab-border-2);
  --border-strong: var(--ab-border-2);
  --hair:          var(--ab-border);
  --hair-g:        var(--ab-border-2);
  --border-default:     var(--ab-border);
  --border-subtle:      rgb(var(--ab-border-rgb) / 0.6);
  --border-emphasis:    var(--ab-border-2);
  --border-gold:        var(--ab-border-2);
  --border-gold-strong: var(--ab-border-3);

  --s0: var(--ab-bg);
  --s1: var(--ab-surface);
  --s2: var(--ab-surface-2);
  --s3: var(--ab-surface-3);
  --s4: var(--ab-surface-3);

  --c-body-primary:   var(--ab-ink);
  --c-body-secondary: var(--ab-ink-2);
  --c-body-tertiary:  var(--ab-ink-3);
  --c-mono-label:     var(--ab-ink-3);
  --c-mono-label-hi:  var(--ab-ink);

  --success: var(--ab-success);  --success-dim: var(--ab-success-dim);
  --warning: var(--ab-warning);  --warning-dim: var(--ab-warning-dim);
  --error:   var(--ab-error);    --error-dim:   var(--ab-error-dim);
  --info:    var(--ab-info);     --info-dim:    var(--ab-info-dim);

  --shadow-1: var(--ab-shadow-1);
  --shadow-2: var(--ab-shadow-2);
  --shadow-3: var(--ab-shadow-3);
  --shadow-hover: var(--ab-shadow-lift);
  --shadow-card:  var(--ab-shadow-2);
  --shadow-glass: var(--ab-ring), var(--ab-shadow-3);

  --ml-ink: var(--ab-ink);       --ml-ink-700: var(--ab-ink-2);
  --ml-surface: var(--ab-surface); --ml-line: var(--ab-border);
  --ml-paper: var(--ab-bg);      --ml-slate: var(--ab-ink-3);
  --ml-signal: var(--ab-accent); --ml-signal-700: var(--ab-accent-lo);
  --ml-go: var(--ab-success);    --ml-warn: var(--ab-warning);
  --ml-stop: var(--ab-error);

  --ease: var(--ab-ease);
  --ease-out-expo: var(--ab-ease-out);
  --ease-out-quart: var(--ab-ease);
  --ease-spring: var(--ab-ease-spring);
  --ease-sine: var(--ab-ease-in-out);
  --dur-instant: var(--ab-t-instant);
  --dur-fast: var(--ab-t-fast);
  --dur-normal: var(--ab-t-base);
  --dur-slow: var(--ab-t-slow);
  --dur-cinematic: var(--ab-t-cine);

  --r-sm: var(--ab-r-sm);   --r-md: var(--ab-r-md);  --r-lg: var(--ab-r-lg);
  --r-xl: var(--ab-r-xl);   --r-2xl: var(--ab-r-2xl); --r-full: var(--ab-r-full);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html { background: var(--ab-bg); }

body {
  background: var(--ab-bg);
  color: var(--ab-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* The flip itself is a designed moment: ground and ink cross-fade while
   everything painted on top stays still. */
html.ab-theme-anim body,
html.ab-theme-anim .nav-v2,
html.ab-theme-anim .footer-v2 {
  transition: background-color var(--ab-t-slow) var(--ab-ease),
              color var(--ab-t-slow) var(--ab-ease);
}
/* …but never let a flip animate 400 unrelated properties at once. */
html.ab-theme-flip *,
html.ab-theme-flip *::before,
html.ab-theme-flip *::after {
  transition: background-color var(--ab-t-base) var(--ab-ease),
              border-color var(--ab-t-base) var(--ab-ease),
              color var(--ab-t-base) var(--ab-ease),
              fill var(--ab-t-base) var(--ab-ease),
              stroke var(--ab-t-base) var(--ab-ease),
              box-shadow var(--ab-t-base) var(--ab-ease) !important;
  animation-play-state: paused !important;
}

::selection    { background: var(--ab-select-bg); color: var(--ab-select-fg); }
::-moz-selection { background: var(--ab-select-bg); color: var(--ab-select-fg); }

hr { border: 0; border-top: 1px solid var(--ab-border); }

/* ── Scrollbars ───────────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--ab-ink-4-rgb) / 0.55) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(var(--ab-ink-4-rgb) / 0.45);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: var(--ab-r-full);
  transition: background-color var(--ab-t-fast) var(--ab-ease);
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--ab-ink-3-rgb) / 0.75); background-clip: padding-box; }

/* ── Focus ────────────────────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ab-focus);
  outline-offset: 2px;
  border-radius: var(--ab-r-sm);
}

/* ============================================================================
   INTERACTION LAYER
   The site's shared component classes, upgraded in one place. Written with
   `:where()` on the *state* selectors so a page that wants to opt out only
   needs its own single-class rule.
   ========================================================================== */

/* ── Cards / panels ─────────────────────────────────────────────────────────
   The site names its panels a dozen different ways. Rather than restyle each
   one, this block gives every panel the same *elevation and hover physics* and
   leaves its background and padding to the page that owns it. */
.article-card, .block-card, .blueprint-panel, .bp-card, .env-card,
.featured-card, .gate-panel, .handoff-card, .header-panel, .headline-card,
.persona-card, .post-card, .quote-card, .rel-card, .sb-gate-card, .step-card,
.sv-card, .sv-panel, .tool-card, .uc-card, .pain-card, .metric-card {
  transition: var(--ab-transition);
  box-shadow: var(--ab-shadow-1);
}
.article-card:hover, .block-card:hover, .blueprint-panel:hover, .bp-card:hover,
.env-card:hover, .featured-card:hover, .handoff-card:hover, .headline-card:hover,
.persona-card:hover, .post-card:hover, .quote-card:hover, .rel-card:hover,
.step-card:hover, .sv-card:hover, .tool-card:hover, .uc-card:hover,
.pain-card:hover, .metric-card:hover {
  box-shadow: var(--ab-shadow-3);
  border-color: var(--ab-border-2);
  transform: translateY(-2px);
}

.card, .fc, .stat-card, .glass-panel, .lx-doc, .lx-card, .lx-callout, .metric-card {
  transition: var(--ab-transition);
  will-change: transform;
}
.card    { background: var(--ab-surface); border: 1px solid var(--ab-border); box-shadow: var(--ab-shadow-2); }
.card:hover,
.lx-doc:hover,
.metric-card:hover {
  box-shadow: var(--ab-shadow-lift);
  border-color: var(--ab-border-2);
  transform: translateY(-3px);
}
.glass-panel { box-shadow: var(--ab-ring), var(--ab-shadow-3); }
.glass-panel:hover { box-shadow: var(--ab-ring), var(--ab-shadow-4); }

.feat-grid .fc,
.stat-card {
  background: var(--ab-surface);
  border: 1px solid var(--ab-border);
  box-shadow: var(--ab-shadow-2);
}
.feat-grid .fc:hover,
.stat-card:hover {
  background: var(--ab-surface);
  border-color: var(--ab-border-2);
  box-shadow: var(--ab-shadow-lift);
  transform: translateY(-3px);
}

/* A single specular sweep on hover — the cheapest way to make a flat panel
   read as a physical object. Only on devices that actually hover. */
@media (hover: hover) and (pointer: fine) {
  .card, .feat-grid .fc, .stat-card, .lx-doc { position: relative; }
  .card::after, .feat-grid .fc::after, .stat-card::after, .lx-doc::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(115deg, transparent 30%, var(--ab-sheen) 50%, transparent 70%);
    background-size: 250% 100%;
    background-position: 100% 0;
    transition: opacity var(--ab-t-base) var(--ab-ease);
  }
  .card:hover::after, .feat-grid .fc:hover::after,
  .stat-card:hover::after, .lx-doc:hover::after {
    opacity: 1;
    animation: ab-sheen var(--ab-t-cine) var(--ab-ease) forwards;
  }
}
@keyframes ab-sheen {
  from { background-position: 100% 0; }
  to   { background-position: -40% 0; }
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn, .btn-primary, .btn-ghost, .btn-text, .lx-cta, .cta, .cta-primary {
  transition: var(--ab-transition);
  -webkit-tap-highlight-color: transparent;
}
.btn-primary, .lx-cta {
  background: var(--ab-accent-solid);
  color: var(--ab-on-accent);
  box-shadow: var(--ab-shadow-1);
}
.btn-primary:hover, .lx-cta:hover {
  background: var(--ab-accent-solid-hi);
  color: var(--ab-on-accent-hi);
  transform: translateY(-2px);
  box-shadow:
      0 2px 4px rgb(var(--ab-accent-rgb) / 0.18),
      0 12px 24px -8px rgb(var(--ab-accent-rgb) / 0.40);
}
.btn-primary:active, .lx-cta:active, .btn:active {
  transform: translateY(0) scale(0.985);
  box-shadow: var(--ab-shadow-1);
  transition-duration: var(--ab-t-instant);
}
.btn-ghost {
  background: transparent;
  color: var(--ab-ink);
  border: 1px solid var(--ab-border-2);
}
.btn-ghost:hover {
  background: rgb(var(--ab-accent-rgb) / 0.06);
  border-color: var(--ab-border-3);
  color: var(--ab-ink);
  transform: translateY(-1px);
  box-shadow: var(--ab-shadow-2);
}
.btn-text { color: var(--ab-ink); }
.btn-text:hover { color: var(--ab-accent); }

/* ── Links: an underline that wipes in rather than blinking on ───────────── */
.nav-link, .navlinks .item, .lx-nav__links a, .lx-footer__links a, .ab-legal-bar__links a {
  position: relative;
  transition: color var(--ab-t-fast) var(--ab-ease);
}
.nav-link::after, .lx-nav__links a:not(.lx-cta)::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--ab-t-base) var(--ab-ease);
}
.nav-link:hover::after, .lx-nav__links a:not(.lx-cta):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ── Nav / footer chrome ──────────────────────────────────────────────────── */
.nav-v2, .lx-nav {
  background: var(--ab-nav-bg);
  border-bottom: 1px solid var(--ab-nav-border);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  transition: background-color var(--ab-t-base) var(--ab-ease),
              border-color var(--ab-t-base) var(--ab-ease),
              box-shadow var(--ab-t-base) var(--ab-ease);
}
.nav-v2.ab-scrolled, .lx-nav.ab-scrolled { box-shadow: var(--ab-shadow-2); }
.footer-v2, .lx-footer {
  background: var(--ab-bg-2);
  border-top: 1px solid var(--ab-border);
}

/* ── Theme toggle ─────────────────────────────────────────────────────────── */
#theme-toggle {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: var(--ab-r-md);
  border: 1px solid var(--ab-border);
  background: var(--ab-surface);
  color: var(--ab-ink-3);
  cursor: pointer;
  font-size: 14px; line-height: 1;
  box-shadow: var(--ab-shadow-1);
  transition: var(--ab-transition);
}
#theme-toggle:hover {
  color: var(--ab-ink);
  border-color: var(--ab-border-2);
  box-shadow: var(--ab-shadow-2);
  transform: translateY(-1px) rotate(-12deg);
}
#theme-toggle:active { transform: translateY(0) rotate(0deg) scale(0.94); }

/* Injected on pages whose nav has no slot for the control. */
.ab-theme-toggle--floating {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 999;
  width: 42px; height: 42px;
  border-radius: var(--ab-r-full);
  box-shadow: var(--ab-shadow-3);
}
.ab-theme-toggle--floating:hover { box-shadow: var(--ab-shadow-4); }
@media print { .ab-theme-toggle--floating { display: none; } }

/* ── Form fields ──────────────────────────────────────────────────────────── */
.input-field, .form-v2 input, .form-v2 select, .form-v2 textarea {
  background: var(--ab-surface);
  border: 1px solid var(--ab-border);
  color: var(--ab-ink);
  box-shadow: inset 0 1px 2px rgb(var(--ab-shadow-rgb) / 0.05);
  transition: var(--ab-transition);
}
.input-field:hover, .form-v2 input:hover,
.form-v2 select:hover, .form-v2 textarea:hover { border-color: var(--ab-border-2); }
.input-field:focus, .form-v2 input:focus,
.form-v2 select:focus, .form-v2 textarea:focus {
  outline: none;
  border-color: var(--ab-focus);
  box-shadow: 0 0 0 3px rgb(var(--ab-accent-rgb) / 0.12);
}
::placeholder { color: var(--ab-ink-4); opacity: 1; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
table tbody tr { transition: background-color var(--ab-t-fast) var(--ab-ease); }
table tbody tr:hover { background: rgb(var(--ab-accent-rgb) / 0.04); }

/* ── Ambient / decorative layers, re-tinted per theme ─────────────────────── */
.ambient {
  background: radial-gradient(circle 720px at var(--mx, 50%) var(--my, 50%),
              rgb(var(--ab-accent-rgb) / 0.05), transparent 62%);
}
.grid-bg, .fixed-grid, .lx-grid {
  background-image:
      linear-gradient(rgb(var(--ab-ink-rgb) / 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgb(var(--ab-ink-rgb) / 0.045) 1px, transparent 1px);
}
.grain    { opacity: 0.028; }
.scanlines{ opacity: 0.6; }
[data-theme="light"] .grain,
[data-theme="light"] .scanlines,
:root:not([data-theme="dark"]) .grain,
:root:not([data-theme="dark"]) .scanlines { opacity: 0; }

/* ── Reveal-on-scroll ─────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--ab-t-cine) var(--ab-ease),
              transform var(--ab-t-cine) var(--ab-ease);
}
.reveal.visible, .reveal.in, .reveal.active { opacity: 1; transform: none; }

/* ── Utilities pages can opt into ─────────────────────────────────────────── */
.ab-lift      { transition: var(--ab-transition); }
.ab-lift:hover{ transform: translateY(-3px); box-shadow: var(--ab-shadow-lift); }
.ab-elev-1 { box-shadow: var(--ab-shadow-1); }
.ab-elev-2 { box-shadow: var(--ab-shadow-2); }
.ab-elev-3 { box-shadow: var(--ab-shadow-3); }
.ab-elev-4 { box-shadow: var(--ab-shadow-4); }
.ab-elev-5 { box-shadow: var(--ab-shadow-5); }

/* ── Accessibility guards ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .feat-grid .fc:hover, .stat-card:hover,
  .lx-doc:hover, .btn-primary:hover, .btn-ghost:hover,
  #theme-toggle:hover { transform: none; }
  .card::after, .feat-grid .fc::after,
  .stat-card::after, .lx-doc::after { display: none; }
  .grain, .ambient, .scanlines { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

@media (prefers-contrast: more) {
  :root, [data-theme="light"] {
    --ab-ink-3: #454F65;
    --ab-ink-4: #5E6B84;
    --ab-border: #B9C3D4;
    --ab-border-2: #8593AC;
  }
  [data-theme="dark"] {
    --ab-ink-2: #D2DDF2;
    --ab-ink-3: #A9B8D4;
    --ab-ink-4: #8494B4;
    --ab-border: #35486F;
    --ab-border-2: #4E6493;
  }
}

/* Touch devices: no phantom cursors, no hover-only affordances left stranded */
@media (hover: none), (pointer: coarse) {
  html, body, a, button, input, textarea, select, label { cursor: auto !important; }
  .cursor, .cursor-ring { display: none !important; }
}

/* Print */
@media print {
  :root { --ab-bg: #FFFFFF; --ab-surface: #FFFFFF; --ab-ink: #000000; }
  .nav-v2, .lx-nav, #theme-toggle, .grain, .scanlines, .ambient { display: none !important; }
  .card, .fc, .stat-card { box-shadow: none !important; border: 1px solid #CCC !important; }
}
