/* ==========================================================================
   ECA Consulting — "Terminal" design system
   VoltAgent-inspired: void-black canvas, emerald signal accent,
   developer-terminal aesthetic. See /design.md for the full spec this
   file implements.

   Loaded INSTEAD OF eca-brand.css + eca-glass.css (both kept on disk,
   per this repo's existing convention of keeping prior looks
   swappable — see the header comment in eca-glass.css). To revert,
   swap the <link> in base.html / base_auth.html back to those two files.
   ========================================================================== */

/* ── Theme-independent tokens ─────────────────────────────────────────────
   The emerald identity, type, radius and motion stay constant across both
   themes; only the surface/text/depth tokens below swap per theme. */
:root {
  --vt-accent:      #00d992;  /* Emerald Signal Green — constant brand accent */
  --vt-glow-sm: drop-shadow(0 0 2px var(--vt-accent));
  --vt-glow-lg: drop-shadow(0 0 8px var(--vt-accent));

  --vt-font-display: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu,
                      Cantarell, "Noto Sans", Helvetica, Arial,
                      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --vt-font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu,
                  Cantarell, "Noto Sans", Helvetica, Arial, sans-serif;
  --vt-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
                  "Courier New", monospace;

  --vt-r-xs: 4px;
  --vt-r-sm: 6px;
  --vt-r-code: 6.4px;
  --vt-r-md: 8px;
  --vt-r-pill: 9999px;

  /* Motion — slow, precise (design.md: fast motion contradicts the aesthetic) */
  --vt-ease: cubic-bezier(.2, .7, .3, 1);
  --vt-dur: .18s;

  /* Semantic states — same hues in both themes; components pair them with
     dark text, which stays legible on each fill. */
  --vt-success:      #008b00;
  --vt-success-lt:   #80d280;
  --vt-warning:      #ffba00;
  --vt-warning-lt:   #ffdd80;
  --vt-danger:       #fb565b;
  --vt-danger-lt:    #fd9c9f;
  --vt-info:         #4cb3d4;
}

/* ── LIGHT palette (the base) ─────────────────────────────────────────────
   Clean, airy, warm-neutral greys with the same emerald accent, darkened
   just enough to stay readable on white. */
:root, :root[data-theme="light"] {
  --vt-bg:        #f6f7f5;  /* warm off-white canvas */
  --vt-surface:   #ffffff;  /* cards, inputs, buttons */
  --vt-surface-2: #eef1ec;  /* table headers, hover/active surface */
  --vt-border:    #dbe0d6;  /* soft warm-grey containment — inputs/dividers */
  --vt-card-border: var(--vt-border);  /* card hairline: one step off canvas (item 1) */

  --vt-accent-text: #067a52;  /* emerald readable on white (~4.9:1) */
  --vt-accent-dim:  rgba(0, 184, 125, .12);

  /* Text tiers — off-black ink at ~86/60/38% emphasis (item 2).
     --vt-text-3 is darkened from the initial ~38%-emphasis pick (#919e85,
     2.5:1 on white) to #606c56 — the original value failed WCAG AA (needs
     4.5:1 for body text; text-3 is used at 12px in .section-title,
     .sector-label, table headers, badges/pills, footer meta, none of which
     qualify as "large text"). #606c56 hits >=4.5:1 against all three light
     surfaces (bg/surface/surface-2), toughest case surface-2 at 4.88:1. */
  --vt-text:   #1c1f17;  /* primary — off-black, ~86% */
  --vt-text-2: #5a664c;  /* secondary — ~60% */
  --vt-text-3: #606c56;  /* tertiary / metadata — WCAG AA, see note above */
  --vt-white:  #ffffff;

  /* Real two-layer ambient shadow — light theme only (item 1) */
  --vt-sh-ambient:  0 1px 2px rgba(20, 33, 13, .06),
                    0 4px 12px rgba(20, 33, 13, .08);
  --vt-sh-dramatic: 0 20px 60px rgba(20, 33, 13, .16),
                    0 0 0 1px rgba(20, 33, 13, .05) inset;
}

/* ── DARK palette — the original VoltAgent terminal look ────────────────── */
:root[data-theme="dark"] {
  --vt-bg:        #050507;
  --vt-surface:   #101010;
  --vt-surface-2: #171716;
  --vt-border:    #3d3a39;  /* inputs/dividers keep the warmer tone */
  --vt-card-border: rgba(255, 255, 255, .07);  /* card hairline (item 1) */

  --vt-accent-text: #2fd6a1;
  --vt-accent-dim:  rgba(0, 217, 146, .16);

  /* Text tiers — near-white at ~95/60/38% white-opacity equivalent (item 2).
     --vt-text-3 is brightened from the initial ~38%-emphasis pick (#626b74,
     3.5:1 on --vt-surface-2) to #7a858f — the original value failed WCAG AA
     the same way as the light-theme one did (needs 4.5:1; same 12px usage
     sites). #7a858f hits >=4.5:1 against all three dark surfaces, toughest
     case --vt-surface-2 (the lightest of the three) at 4.77:1. */
  --vt-text:   #f2f2f2;  /* primary — kept, already close to intent */
  --vt-text-2: #a39e9b;  /* secondary — ~60% */
  --vt-text-3: #7a858f;  /* tertiary / metadata — WCAG AA, see note above */
  --vt-white:  #ffffff;

  /* Dark shadows are invisible on near-black — no box-shadow on this theme (item 1) */
  --vt-sh-ambient:  none;
  --vt-sh-dramatic: none;
}

/* When the user hasn't chosen, follow the OS preference. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vt-bg:        #050507;
    --vt-surface:   #101010;
    --vt-surface-2: #171716;
    --vt-border:    #3d3a39;
    --vt-card-border: rgba(255, 255, 255, .07);

    --vt-accent-text: #2fd6a1;
    --vt-accent-dim:  rgba(0, 217, 146, .16);

    --vt-text:   #f2f2f2;
    --vt-text-2: #a39e9b;
    --vt-text-3: #7a858f;
    --vt-white:  #ffffff;

    --vt-sh-ambient:  none;
    --vt-sh-dramatic: none;
  }
}

/* ── Base canvas & type ────────────────────────────────────────────────── */
html, body {
  background: var(--vt-bg) !important;
  color: var(--vt-text);
}
body {
  font-family: var(--vt-font-body);
  font-feature-settings: "calt" 1, "rlig" 1;
  -webkit-font-smoothing: antialiased;
}
body::before, .hero::after, .auth-wrap::after { display: none !important; } /* kill legacy aurora animation layers */

h1, h2, h3, h4, h5, h6,
.navbar-brand, .section-title, .hero-title, .fc-title,
.eca-brand__name, .eca-footer__name, .leg-title, .contact-title {
  font-family: var(--vt-font-display);
  letter-spacing: -0.01em;
  color: var(--vt-text);
}

/* ── Fixed 1.25-ratio type scale, weight-driven hierarchy ─────────────────
   12/14/16/20/24/32/40px. !important because several pages still carry
   pre-redesign inline <style> blocks (extra_style) with their own heading
   sizes/weights (0.9x rem oddities, 400-weight "section" headings, etc.) —
   these rules are the single source of truth for heading scale from here
   on. Contexts that legitimately need a DIFFERENT size than their bare tag
   (.hero h1, .auth-card h1, .verdict-* h4) get their own !important
   overrides further down, which win via higher selector specificity. */
h1 { font-size: 2rem    !important; font-weight: 800 !important; letter-spacing: -0.02em !important; } /* 32px — ≥28px display tier */
h2 { font-size: 1.5rem  !important; font-weight: 800 !important; } /* 24px */
h3 { font-size: 1.25rem !important; font-weight: 700 !important; } /* 20px */
h4 { font-size: 1rem    !important; font-weight: 700 !important; } /* 16px */
h5 { font-size: 1rem    !important; font-weight: 700 !important; } /* 16px */
h6 { font-size: 1rem    !important; font-weight: 700 !important; } /* 16px */

a { color: var(--vt-accent-text); }
a:hover { color: var(--vt-accent); }

code, pre, .font-mono { font-family: var(--vt-font-mono); }

::selection { background: var(--vt-accent-dim); color: var(--vt-white); }

/* ── Navbar ────────────────────────────────────────────────────────────── */
.navbar {
  background: var(--vt-bg) !important;
  border-bottom: 1px solid var(--vt-border) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0.75rem 0.5rem !important;
  position: static !important;
  backdrop-filter: none !important;
}
.navbar::before, .navbar::after { display: none !important; }

.eca-brand__name { color: var(--vt-text) !important; font-weight: 700 !important; letter-spacing: -0.01em; }
.eca-brand__accent { color: var(--vt-accent-text) !important; }
.eca-brand__tag  { color: var(--vt-text-3) !important; letter-spacing: .12em; }

.navbar .btn-light,
.navbar .btn-warning {
  background: transparent !important;
  color: var(--vt-text) !important;
  border: 1px solid var(--vt-border) !important;
  border-radius: var(--vt-r-sm) !important;
  font-weight: 500 !important;
  font-size: .875rem !important;
  padding: .5rem 1rem !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.navbar .btn-light:hover,
.navbar .btn-warning:hover {
  background: rgba(0, 0, 0, .35) !important;
  border-color: var(--vt-accent) !important;
  color: var(--vt-accent-text) !important;
}

/* ── Cards & containers ────────────────────────────────────────────────── */
.section-card,
.leg-card,
.contact-card,
.feature-card,
.scale-group {
  background: var(--vt-surface) !important;
  backdrop-filter: none !important;
  border: 1px solid var(--vt-card-border) !important;
  border-left: 1px solid var(--vt-card-border) !important;
  border-radius: var(--vt-r-md) !important;
  box-shadow: var(--vt-sh-ambient) !important;
  padding: 1.5rem !important;
  /* No `transition: border-color` here: Chrome doesn't reliably re-trigger a
     transition on a var()-driven shorthand when only the referenced custom
     property changes (as happens on a live theme-toggle click, vs. a page
     reload) — the border was verified to visibly "stick" at the old
     theme's color until reload. Confirmed pre-dating this change (same
     var()+transition pattern existed with --vt-border before item 1 split
     out --vt-card-border), but the light/dark delta is now large enough
     (opaque border vs. a translucent hairline) to make the staleness
     obvious, so it's worth just not transitioning this property. */
}
.section-card::before, .feature-card::before { display: none !important; }
.section-card:hover, .feature-card:hover {
  transform: none !important;
  border-color: var(--vt-accent) !important;
  box-shadow: var(--vt-sh-ambient) !important;
}

.section-title {
  font-family: var(--vt-font-display) !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  color: var(--vt-text-3) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  border-bottom: 1px solid var(--vt-border) !important;
  padding-bottom: .75rem !important;
}
.section-title::before {
  background: var(--vt-accent) !important;
  box-shadow: none !important;
}

.step-badge {
  background: var(--vt-surface-2) !important;
  border: 1px solid var(--vt-accent) !important;
  color: var(--vt-accent-text) !important;
  box-shadow: none !important;
}

.sector-label {
  background: transparent !important;
  border: 1px solid var(--vt-border) !important;
  color: var(--vt-text-3) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: var(--vt-r-pill) !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-label { color: var(--vt-text-2); font-weight: 600; }
.form-text  { color: var(--vt-text-3); }

.form-control, .form-select {
  background: var(--vt-surface) !important;
  border: 1px solid var(--vt-border) !important;
  color: var(--vt-text) !important;
  border-radius: var(--vt-r-sm) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  padding: .75rem 1rem !important;
}
.form-control::placeholder { color: var(--vt-text-3); opacity: .7; }
.form-control:focus, .form-select:focus {
  background: var(--vt-surface) !important;
  border-color: var(--vt-accent) !important;
  color: var(--vt-text) !important;
  box-shadow: 0 0 0 3px var(--vt-accent-dim) !important;
}
.form-select option { background: var(--vt-surface); color: var(--vt-text); }

.form-check-input {
  background: var(--vt-surface);
  border: 1.5px solid var(--vt-border);
}
.form-check-input:checked {
  background: var(--vt-accent);
  border-color: var(--vt-accent);
  box-shadow: none;
}
.form-check-input:focus { border-color: var(--vt-accent); box-shadow: 0 0 0 3px var(--vt-accent-dim); }
.form-check-label { color: var(--vt-text-2); }

.scale-group-title {
  color: var(--vt-text-3) !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn-screen, .btn-download, .btn-signin, .btn-auth {
  background: var(--vt-surface) !important;
  color: var(--vt-accent-text) !important;
  border: 1px solid var(--vt-accent) !important;
  border-radius: var(--vt-r-sm) !important;
  font-family: var(--vt-font-body);
  font-weight: 600;
  letter-spacing: normal;
  box-shadow: none !important;
  transition: background .15s ease, box-shadow .15s ease;
}
.btn-screen::before, .btn-download::before, .btn-signin::before, .btn-auth::before { display: none !important; }
.btn-screen:hover, .btn-download:hover, .btn-signin:hover, .btn-auth:hover {
  background: rgba(0, 217, 146, .12) !important;
  color: var(--vt-accent-text) !important;
  transform: none !important;
  box-shadow: 0 0 16px var(--vt-accent-dim) !important;
}
.btn-screen:active, .btn-download:active, .btn-auth:active { transform: none !important; }

.btn-save, .btn-back, .btn-outline-secondary, .btn-outline-success,
.btn-outline-primary, .btn-outline-danger {
  background: transparent !important;
  border: 1px solid var(--vt-border) !important;
  border-radius: var(--vt-r-sm) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  font-weight: 500;
  padding: .75rem 1rem !important;
  transition: border-color .15s ease, color .15s ease;
}
.btn-save { color: var(--vt-info) !important; }
.btn-back { color: var(--vt-text-2) !important; }
.btn-outline-secondary { color: var(--vt-text-2) !important; }
.btn-outline-success { color: var(--vt-accent-text) !important; border-color: var(--vt-border) !important; }
.btn-outline-primary { color: var(--vt-info) !important; }
.btn-outline-danger  { color: var(--vt-danger) !important; }
.btn-save:hover, .btn-back:hover, .btn-outline-secondary:hover { border-color: var(--vt-text-2) !important; background: rgba(255,255,255,.04) !important; }
.btn-outline-success:hover { border-color: var(--vt-accent) !important; background: var(--vt-accent-dim) !important; }
.btn-outline-primary:hover { border-color: var(--vt-info) !important; background: rgba(76,179,212,.10) !important; }
.btn-outline-danger:hover  { border-color: var(--vt-danger) !important; background: rgba(251,86,91,.10) !important; }

/* ── Notices / alerts ──────────────────────────────────────────────────── */
.info-box {
  background: rgba(0, 217, 146, .06) !important;
  border: 1px solid var(--vt-border) !important;
  border-left: 3px solid var(--vt-accent) !important;
  color: var(--vt-text-2) !important;
  backdrop-filter: none !important;
  border-radius: var(--vt-r-md) !important;
}

.alert {
  background: var(--vt-surface);
  border: 1px solid var(--vt-border);
  color: var(--vt-text);
  border-radius: var(--vt-r-md);
  backdrop-filter: none !important;
  box-shadow: none;
}
.alert-success { border-left: 3px solid var(--vt-success-lt); color: var(--vt-text); }
.alert-danger  { border-left: 3px solid var(--vt-danger); color: var(--vt-text); }
.alert-warning { border-left: 3px solid var(--vt-warning); color: var(--vt-text); }
.alert-info    { border-left: 3px solid var(--vt-info); color: var(--vt-text); }
/* Bootstrap's close glyph is dark by default (correct for light theme);
   invert it only when the dark palette is active. */
:root[data-theme="dark"] .btn-close,
:root:not([data-theme="light"]) .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .btn-close { filter: none; }
}

.prefill-banner {
  background: rgba(255, 186, 0, .08) !important;
  border: 1px solid var(--vt-border) !important;
  border-left: 3px solid var(--vt-warning) !important;
  color: var(--vt-text-2) !important;
}

/* ── Verdict banners (result.html) ────────────────────────────────────── */
.verdict-ln2, .verdict-ln1, .verdict-none {
  background: var(--vt-surface) !important;
  border: 1px solid var(--vt-border) !important;
  backdrop-filter: none !important;
  border-radius: var(--vt-r-md) !important;
  box-shadow: var(--vt-sh-ambient) !important;
  color: var(--vt-text);
}
.verdict-ln2::before  { background: var(--vt-danger) !important; }
.verdict-ln1::before  { background: var(--vt-warning) !important; }
.verdict-none::before { background: var(--vt-accent) !important; }
.verdict-ln2 h4, .verdict-ln1 h4, .verdict-none h4 {
  font-family: var(--vt-font-display);
  color: var(--vt-text);
  font-size: 2rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* ── Tables ────────────────────────────────────────────────────────────── */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--vt-text);
  border-color: var(--vt-border);
}
.table > thead th, .act-table thead th, .table-success, .table > thead.table-success th {
  background: var(--vt-surface-2) !important;
  color: var(--vt-text-3) !important;
  font-family: var(--vt-font-display);
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  font-size: .75rem !important;
  border-color: var(--vt-border) !important;
}
.act-table tbody tr:nth-child(even),
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: rgba(255, 255, 255, .02) !important;
  color: var(--vt-text) !important;
}
.table td, .table th { border-color: var(--vt-border); color: var(--vt-text); }
.table-hover > tbody > tr:hover > * { background: rgba(0, 217, 146, .05) !important; color: var(--vt-text) !important; }
.table-responsive { background: transparent; border-radius: var(--vt-r-sm); }

/* ── Pills & badges ────────────────────────────────────────────────────── */
.study-pill {
  background: transparent !important;
  border: 1px solid var(--vt-border) !important;
  color: var(--vt-text-3) !important;
  backdrop-filter: none !important;
  border-radius: var(--vt-r-pill) !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.badge {
  border-radius: var(--vt-r-pill);
  font-weight: 700 !important;
  font-size: .75rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* ── Legislation / contact cards ───────────────────────────────────────── */
.leg-card, .contact-card { background: var(--vt-surface) !important; }
.leg-title, .contact-title { color: var(--vt-text) !important; }
.contact-card a { color: var(--vt-accent-text) !important; font-weight: 600; }

.gazette-toggle { color: var(--vt-accent-text) !important; }
.gazette-text {
  background: var(--vt-surface-2) !important;
  border-left: 3px solid var(--vt-accent) !important;
  color: var(--vt-text-2) !important;
  border-radius: var(--vt-r-sm) !important;
}

/* ── Map ───────────────────────────────────────────────────────────────── */
#siteMap { border: 1px solid var(--vt-border) !important; box-shadow: none !important; border-radius: var(--vt-r-md) !important; }

/* ── Landing page ──────────────────────────────────────────────────────── */
.top-nav {
  background: var(--vt-bg) !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid var(--vt-border);
  box-shadow: none !important;
}
.nav-logo { border-radius: var(--vt-r-sm); box-shadow: none; }

.hero {
  background: var(--vt-bg) !important;
}
.hero::after { display: none !important; }
.hero-logo { background: var(--vt-white) !important; box-shadow: none !important; border-radius: var(--vt-r-md) !important; }
.hero h1 {
  font-family: var(--vt-font-display);
  letter-spacing: -0.02em !important;
  line-height: 1.05;
  color: var(--vt-text);
  font-size: 2.5rem !important;
  font-weight: 800 !important;
}
.hero h1 span {
  background: none;
  -webkit-text-fill-color: unset;
  color: var(--vt-accent) !important;
  filter: var(--vt-glow-sm);
}
.hero .badge-tag, .hero .pill {
  background: transparent !important;
  border: 1px solid var(--vt-border) !important;
  backdrop-filter: none !important;
  border-radius: var(--vt-r-pill) !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--vt-text-3) !important;
}

.fc-icon { background: var(--vt-surface-2) !important; border: 1px solid var(--vt-border); box-shadow: none !important; border-radius: var(--vt-r-sm) !important; }

.steps-section { background: var(--vt-bg) !important; }

.signin-section { background: transparent !important; }
.signin-card {
  background: var(--vt-surface) !important;
  border: 1px solid var(--vt-border) !important;
  backdrop-filter: none !important;
  box-shadow: var(--vt-sh-ambient) !important;
}

/* ── Auth shell (login/setup/forgot/reset/disclaimer) ─────────────────── */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--vt-bg) !important;
}
.auth-card {
  width: 100%;
  max-width: 430px;
  background: var(--vt-surface) !important;
  border: 1px solid var(--vt-card-border);
  border-radius: var(--vt-r-md) !important;
  box-shadow: var(--vt-sh-dramatic) !important;
  backdrop-filter: none !important;
  padding: 2.5rem 2rem 2rem;
  text-align: center;
}
.auth-logo {
  display: inline-block;
  font-family: var(--vt-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--vt-text);
  margin-bottom: 1.1rem;
  filter: var(--vt-glow-sm);
}
.auth-logo__accent { color: var(--vt-accent-text); }
.auth-card h1 { font-family: var(--vt-font-display); font-size: 1.25rem !important; color: var(--vt-text); }
.auth-sub { color: var(--vt-text-3); font-size: .88rem; margin-bottom: 1.6rem; }
.auth-foot { color: var(--vt-text-3) !important; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.eca-footer {
  background: var(--vt-bg) !important;
  border-top: 1px solid var(--vt-border) !important;
  color: var(--vt-text-2);
}
.eca-footer::before, .eca-footer::after { display: none !important; }
.eca-footer__name { font-family: var(--vt-font-display); color: var(--vt-text); }
.eca-footer__accent { color: var(--vt-accent-text); }
.eca-footer__meta { color: var(--vt-text-3); }
.eca-footer a { color: var(--vt-accent-text); }

/* ── Theme toggle (injected into the nav / auth shell by theme.js) ──────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: 0 0 auto;
  background: transparent;
  color: var(--vt-text-2);
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-r-sm);
  cursor: pointer;
  font-size: 1rem;
  transition: color var(--vt-dur) var(--vt-ease),
              border-color var(--vt-dur) var(--vt-ease),
              background var(--vt-dur) var(--vt-ease),
              transform var(--vt-dur) var(--vt-ease);
}
.theme-toggle:hover {
  color: var(--vt-accent-text);
  border-color: var(--vt-accent);
  background: var(--vt-accent-dim);
}
.theme-toggle:active { transform: scale(.92); }
.theme-toggle--floating {
  position: fixed;
  top: 1rem; right: 1rem;
  z-index: 1050;
  background: var(--vt-surface);
  box-shadow: var(--vt-sh-ambient);
}

/* ── Motion & focus polish ─────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* A visible, on-brand focus ring for keyboard users across every control. */
a:focus-visible, button:focus-visible,
.form-control:focus-visible, .form-select:focus-visible,
.form-check-input:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--vt-accent);
  outline-offset: 2px;
}

/* Cards settle in on load — a single gentle fade-and-rise, not per-scroll. */
@keyframes vt-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.section-card, .verdict-ln2, .verdict-ln1, .verdict-none, .auth-card {
  animation: vt-rise .42s var(--vt-ease) both;
}

/* Buttons/links get a consistent, calm transition everywhere. */
.btn, a, .badge, .study-pill, .navbar .btn-light, .navbar .btn-warning {
  transition: color var(--vt-dur) var(--vt-ease),
              background var(--vt-dur) var(--vt-ease),
              border-color var(--vt-dur) var(--vt-ease),
              box-shadow var(--vt-dur) var(--vt-ease),
              transform var(--vt-dur) var(--vt-ease);
}

/* ── Accessibility & performance guards ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * , *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  body { background: #fff !important; color: #000 !important; }
  .section-card, .leg-card, .contact-card {
    background: #fff !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    color: #000 !important;
  }
}