/* =====================================================================
   balen.skin.app.css - APP-WIDE Midnight / Air appearance
   =====================================================================
   Presentation layer ONLY. Zero layout, zero geometry, zero logic.

   WHY THIS FILE EXISTS
   --------------------
   Midnight and Air previously reached only the Home tab (css/billy.home.css
   re-composes Home under html.skin-balen). Every OTHER surface -- Money,
   Reports, Calendar, Exchange, forms, modals, tables, charts -- renders
   Classic markup, so it stayed in the Classic palette. This file closes
   that gap WITHOUT touching Classic and WITHOUT redesigning any page: the
   existing page geometry is the source of truth; only materials change.

   HOW IT WORKS (two mechanisms, both already in the app)
   ------------------------------------------------------
   1. data-theme. Midnight is a DARK appearance and Air is a LIGHT one, so
      each drives the app's existing data-theme attribute (js/billy-skin.js
      -> balenTheme.apply()). That attribute is what ~130 already-shipped
      dark rules key off -- 112 in app.html, 19 in css/card-statement.css,
      plus token blocks in css/tokens.css and css/comfort.tokens.css.
      Midnight therefore INHERITS the entire proven dark treatment
      (maintenance cards, JIT wizard, calendar chips, .pill.on, the select
      chevron, statement badges) instead of it being written a second time
      under a skin-* selector. This is the single largest reason the file
      below is short.

   2. Tokens. css/comfort.tokens.css declares canonical raw values --k-*;
      css/comfort.flip.css aliases every legacy/-bz- token name onto
      var(--k-*). Overriding --k-* alone therefore re-resolves every public
      token, every component semantic token and every legacy alias. That is
      sections 1 and 2.

   Section 3 then covers the colour tokens that predate the Comfort SSoT and
   never routed through --k-* at all. Derived by resolving every var()
   consumer in app.html and css/*.css transitively against every token
   definition in the stylesheet set -- the complete set, not a sample.

   CASCADE MATH
   ------------
   Three competitors have to be beaten, and load order is NOT relied on:
     :root                          (0,1,0)  light token defaults
     :root[data-theme="dark"]       (0,2,0)  the dark token blocks
     html.comfort-on:root           (0,2,1)  comfort.flip.css aliases
   Token blocks here use `html.skin-midnight:root` = (0,2,1), which beats
   the first two, plus an `html.comfort-on.skin-midnight:root` = (0,3,1)
   companion that beats comfort.flip.css. Both are listed so the skin still
   applies if the comfort flag is ever off (in that degraded mode only the
   --k-* consumers re-theme; comfort=off is an emergency revert path, not a
   supported appearance).

   Note the deliberate consequence: under Midnight this file's values WIN
   over the generic dark-mode ones, so Midnight looks like Midnight
   (graphite + teal) rather than like the existing dark theme, while still
   inheriting all of its component-level fixes.

   CLASSIC PROTECTION
   ------------------
   EVERY selector in this file is scoped to html.skin-midnight,
   html.skin-air, or html.skin-balen (the class both of them carry).
   Classic carries html.skin-classic and NONE of these classes, so the
   number of rules in this file that can match under Classic is zero.
   That is the regression proof: not "we checked", but "cannot match".

   SOURCE LAW (safety-loop section 7): ASCII-only; no CSS nesting; no
   @import; no color-mix() in token definitions (tints are precomputed
   literals) so the prod-legal subset is preserved.
   ===================================================================== */

/* =====================================================================
   1. MIDNIGHT - canonical palette (--k-*)
   ---------------------------------------------------------------------
   Deep graphite command centre. Text tiers are chosen for AA (>=4.5:1)
   against --k-surface #0D0F11, which is why --k-text-tertiary is #7E8085
   (4.86:1) rather than Home's decorative #5A5C60 (2.7:1) -- Home uses that
   value for de-emphasised captions over its own composition; app-wide it
   would carry real content and must stay readable.
   ===================================================================== */
html.skin-midnight:root,
html.comfort-on.skin-midnight:root {
  /* surfaces */
  --k-page:#08090A; --k-surface:#0D0F11; --k-surface-2:#14171A;
  --k-line:#22262B; --k-header:#0B0D0F;
  /* text: exactly three levels, all AA on page + surface */
  --k-text-primary:#F3F2EE; --k-text-secondary:#96979B; --k-text-tertiary:#7E8085;
  /* one accent - Balen teal. On dark, press == base: darkening a fill on a
     dark ground reads as "disabled", so pressed state is carried by the
     component's own opacity/ring, exactly as Comfort dark mode does. */
  --k-accent:#17BFAB; --k-accent-press:#17BFAB; --k-accent-text:#04140F; --k-accent-tint:#10312C;
  /* money direction */
  --k-pos:#33D68F; --k-neg:#FF6B62; --k-warn:#FFA24B; --k-neg-tint:#2A1A18;
  /* category identity chips (identity, NEVER status) */
  --k-cat-flight:#17BFAB; --k-cat-ledger:#6FA8E8; --k-cat-settle:#A98CE0; --k-cat-exchange:#D9A94E;
  /* elevation: on dark, elevation reads as a lighter inset edge plus a
     deeper cast shadow, never as a stronger drop shadow alone. */
  --k-shadow-1:inset 0 0 0 1px rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.50);
  --k-shadow-2:inset 0 0 0 1px rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.55);
  --k-shadow-card:inset 0 0 0 1px rgba(255,255,255,0.05), 0 2px 8px rgba(0,0,0,0.45);
  /* hero gradient + the SOLID hero surface that carries WHITE text
     (.btn, row-action pills, wizard/reports context headers). White on
     #0A3A40 is 12.41:1 -- comfortably AA. */
  --k-grad-hero:linear-gradient(135deg, #06181B 0%, #0A3A40 55%, #0E5A55 100%);
  --k-hero-surface:#0A3A40; --k-hero-surface-2:#0E5A55; --k-hero-on:#FFFFFF;
}

/* =====================================================================
   2. AIR - canonical palette (--k-*)
   ---------------------------------------------------------------------
   Architectural daylight. Blue navigation accent (Air's identity) instead
   of Classic teal. Money and status hues are DARKENED versus Air's Home
   display values (#0E9E63 / #C8791E) because app-wide they land on real
   amounts as bold text on white and must clear AA, not merely read as a
   tint on a photograph.
   ===================================================================== */
html.skin-air:root,
html.comfort-on.skin-air:root {
  /* surfaces */
  --k-page:#EEF1F5; --k-surface:#FFFFFF; --k-surface-2:#F5F7FA;
  --k-line:#E2E7EE; --k-header:#FFFFFF;
  /* text. Tertiary is measured against the PAGE (#EEF1F5), not just white:
     most tertiary text sits on the page, and the lighter #6B7686 that clears
     AA on white only reaches 4.06:1 there. #636D7A clears both (5.25 / 4.64). */
  --k-text-primary:#131A22; --k-text-secondary:#5A6472; --k-text-tertiary:#636D7A;
  /* one accent - Air blue. --k-accent is a FILL (nav, buttons); teal-style
     link TEXT resolves through --accent-text -> --k-accent-press, which is
     the AA-clean one (6.22:1 on surface, 5.49:1 on page). --k-accent itself
     is 4.50:1 on white / 3.97:1 on page, which is why it must not be used
     as body-sized text -- comfort.flip.css already routes link text away
     from it. */
  --k-accent:#2F6BFF; --k-accent-press:#2456D6; --k-accent-text:#FFFFFF; --k-accent-tint:#E8EFFF;
  /* money direction. Measured on surface / page:
     pos 5.34 / 4.71, neg 5.30 / 4.68, warn 5.92 / 5.22 -- all AA. */
  --k-pos:#0E7A55; --k-neg:#C4373C; --k-warn:#8A5A0F; --k-neg-tint:#FCEAEA;
  /* category identity chips */
  --k-cat-flight:#2F6BFF; --k-cat-ledger:#3B6EA5; --k-cat-settle:#6B5CC4; --k-cat-exchange:#9A6410;
  /* elevation: Air is architectural -- thin, cool, low-spread shadows. */
  --k-shadow-1:0 1px 2px rgba(30,45,70,0.06);
  --k-shadow-2:0 8px 24px rgba(30,45,70,0.10);
  --k-shadow-card:0 1px 3px rgba(30,45,70,0.07);
  /* hero surface carries WHITE text; white on #2456D6 is 6.22:1 (AA). */
  --k-grad-hero:linear-gradient(135deg, #1B3A8F 0%, #2456D6 55%, #2F6BFF 100%);
  --k-hero-surface:#2456D6; --k-hero-surface-2:#2F6BFF; --k-hero-on:#FFFFFF;
}

/* =====================================================================
   3. PRE-COMFORT COLOR TOKENS NOT ALIASED TO --k-*
   ---------------------------------------------------------------------
   These 40-odd names are consumed directly by app.html / card-statement.css
   and never route through --k-*, so section 1/2 alone leaves them Classic.
   Enumerated by resolving every var() consumer transitively against every
   token definition in the stylesheet set -- this is the complete set, not
   a sample.

   DELIBERATELY OMITTED (fixed in every appearance, by design):
     --ink-on-white, --accent-on-white  - sit on surfaces that are hardcoded
       white in both themes (Google brand button, .ow-* onboarding cards).
     --header-on, --header-on-2, --grad-hero-text, --hero-ink, --hero-ink-2,
     --pos-on-hero, --neg-on-hero, --hero-tint*  - light-on-dark-hero ink.
       The hero surface stays dark in all three appearances, so this ink
       must NOT follow the page. Air re-tints them below only where the
       hero itself changed hue.
   ===================================================================== */
html.skin-midnight:root {
  --border-subtle:#1B1F23;
  --accent-border:rgba(23,191,171,0.24);
  --accent-glow:rgba(23,191,171,0.18);
  --accent-soft:rgba(23,191,171,0.07);
  --aqua:#4FE0D2;
  --brand-navy:#0B0D0F;
  --brass:#D9A94E; --brass-soft:#2A2214;
  --sand:#F0E4C4; --sand-deep:#2A2418;
  --info:#57A6FF; --info-bg:#0F2640; --info-soft:#101E2E; --info-text:#8FC2FF;
  --red:#FF6B62; --red-bg:#2A1A18; --red-lt:#2A1A18; --red-soft:#2A1A18;
  --warn-tint:#2E2413;
  --purple:#A98CE0; --purple-lt:#211B33;
  --yellow:#FFC65C; --yellow-lt:#2E2613;
  /* category identity */
  --cat-aircraft:#17BFAB;  --cat-aircraft-soft:#10312C;
  --cat-boat:#5D95F0;      --cat-boat-soft:#12203A;
  --cat-docs:#8A9794;      --cat-docs-soft:#1B2220;
  --cat-property:#EE8365;  --cat-property-soft:#331A12;
  --cat-vehicle:#E0A94A;   --cat-vehicle-soft:#2E2413;
  --cat-reserve:#8E7BE0;
  /* chips: ink must clear AA on its own bg */
  --chip-amber-bg:#2E2413; --chip-amber-ink:#E8B45F;
  --chip-blue-bg:#12203A;  --chip-blue-ink:#7FB4FF;
  --chip-coral-bg:#2A1A18; --chip-coral-ink:#FF9089;
  --chip-green-bg:#10281F; --chip-green-ink:#57DFA5;
  --chip-red-bg:#2A1A18;   --chip-red-ink:#FF9089;
  --chip-neutral-bg:#191D21; --chip-neutral-ink:#A8AAAE;
  /* status + session identity */
  --status-confirmed:#33D68F; --status-pending:#FFA24B; --status-done:#5F6266;
  --session-personal:#57A6FF; --session-personal-bg:#12203A;
  /* toast: on Midnight the toast must LIFT off an already-black page, so it
     goes lighter than the page rather than darker (Classic does the reverse). */
  --toast-bg:#1E2328; --toast-border:#2E353C; --toast-ink:#F3F2EE;
  /* glows / cockpit inner light */
  --shadow-glow-teal:0 6px 16px rgba(23,191,171,0.30);
  --cockpit-shadow:inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -30px 60px rgba(0,0,0,0.35);
  --hero-sun-glow:rgba(255,230,150,0.16);
  --hero-water-glow:rgba(102,217,207,0.24);
}

html.skin-air:root {
  --border-subtle:#EDF0F4;
  --accent-border:rgba(47,107,255,0.22);
  --accent-glow:rgba(47,107,255,0.16);
  --accent-soft:rgba(47,107,255,0.06);
  --aqua:#2F6BFF;
  --brand-navy:#1B3A8F;
  --brass:#8A6410; --brass-soft:#FBF2DF;
  --sand:#FAF6EC; --sand-deep:#E8DDBE;
  --info:#2456D6; --info-bg:#E8EFFF; --info-soft:#F2F6FF; --info-text:#1B3A8F;
  --red:#C4373C; --red-bg:#FCEAEA; --red-lt:#FCEAEA; --red-soft:#FDF2F2;
  --warn-tint:#FBF2DF;
  --purple:#5A4BB0; --purple-lt:#EFECFB;
  --yellow:#8A6410; --yellow-lt:#FBF2DF;
  /* category identity */
  --cat-aircraft:#2F6BFF;  --cat-aircraft-soft:#E8EFFF;
  --cat-boat:#2456D6;      --cat-boat-soft:#E6EEFC;
  --cat-docs:#5A6472;      --cat-docs-soft:#EFF2F6;
  --cat-property:#B8492A;  --cat-property-soft:#FBE7E0;
  --cat-vehicle:#8A6410;   --cat-vehicle-soft:#FBF2DF;
  --cat-reserve:#5A4BB0;
  /* chips */
  --chip-amber-bg:#FBF2DF; --chip-amber-ink:#7A560E;
  --chip-blue-bg:#E8EFFF;  --chip-blue-ink:#1B3A8F;
  --chip-coral-bg:#FCEAEA; --chip-coral-ink:#A82E33;
  --chip-green-bg:#E6F4EE; --chip-green-ink:#0B6446;
  --chip-red-bg:#FCEAEA;   --chip-red-ink:#A82E33;
  --chip-neutral-bg:#EFF2F6; --chip-neutral-ink:#5A6472;
  /* status + session identity */
  --status-confirmed:#0E7A55; --status-pending:#8A5A0F; --status-done:#A3ADBA;
  --session-personal:#2456D6; --session-personal-bg:#E8EFFF;
  /* toast stays dark-on-light for contrast, but takes Air's cool cast. */
  --toast-bg:#131A22; --toast-border:transparent; --toast-ink:#FFFFFF;
  /* glows */
  --shadow-glow-teal:0 6px 16px rgba(47,107,255,0.28);
  --cockpit-shadow:inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -30px 60px rgba(30,45,70,0.06);
  --hero-sun-glow:rgba(255,230,150,0.22);
  --hero-water-glow:rgba(47,107,255,0.20);
}

/* =====================================================================
   3b. TOKENS THAT ARE CONSUMED BUT DEFINED NOWHERE
   ---------------------------------------------------------------------
   Several modules render `var(--x, <literal>)` where --x is not declared in
   any stylesheet, so the LITERAL always wins and the surface can never
   follow any theme. These are latent leaks in Classic dark mode too, but we
   fix them only for the Balen appearances: declaring them globally would
   change what Classic renders today, and Classic is the frozen baseline.

     --surface-soft  js/jit-wizards.js route-suggestion panels (#f7f7f7)
     --amber-soft    js/communication.js callouts (#fff4d6)
     --ink1          js/inbox.js logbook labels (#1a1f2b) [note: not --ink-1]
     --bad / --good  js/reservation-coordinator.js, js/jit-wizards.js
     --danger        js/tasks.js, js/ownership-setup.js, js/expenses.js
   ===================================================================== */
html.skin-midnight:root {
  --surface-soft:#14171A; --amber-soft:#2E2413;
  --ink1:#F3F2EE;
  --good:#33D68F; --bad:#FF6B62; --danger:#FF6B62;
}
html.skin-air:root {
  --surface-soft:#F5F7FA; --amber-soft:#FBF2DF;
  --ink1:#131A22;
  --good:#0E7A55; --bad:#C4373C; --danger:#C4373C;
}

/* =====================================================================
   4. NEW SEMANTIC TOKENS (both Balen appearances)
   ---------------------------------------------------------------------
   Names the app did not previously have a token for, so the component
   rules in section 5 never author a raw hex. Declared under skin-balen
   with per-appearance values above them, so Classic never sees them.
   ===================================================================== */
html.skin-midnight:root {
  --sk-input-bg:#101316;
  --sk-input-border:#262B31;
  --sk-input-focus:#17BFAB;
  --sk-input-placeholder:#6E7176;
  --sk-hover:rgba(255,255,255,0.04);
  --sk-active:rgba(255,255,255,0.07);
  --sk-selected:rgba(23,191,171,0.12);
  --sk-disabled-text:#5A5C60;
  --sk-disabled-bg:#131619;
  --sk-modal-surface:#14171A;
  --sk-modal-backdrop:rgba(0,0,0,0.72);
  --sk-nav-bg:rgba(11,13,15,0.92);
  --sk-table-header:#101316;
  --sk-table-row-hover:rgba(255,255,255,0.04);
  --sk-skeleton:linear-gradient(90deg, #14171A 0%, #1D2126 50%, #14171A 100%);
  --sk-chart-grid:rgba(255,255,255,0.08);
  --sk-chart-label:#96979B;
  --sk-scrollbar:#2A2F35;
  --sk-focus-ring:rgba(23,191,171,0.55);
  /* ink that sits ON a status/accent FILL. Midnight's --k-pos (#33D68F) and
     --k-accent (#17BFAB) are BRIGHT, so white on them is ~2:1; they carry dark
     ink instead. --k-neg (#FF6B62) still carries white (3.3:1 on bold fill ink).
     Global default (all white) lives in css/comfort.tokens.css so Classic is
     byte-identical. */
  --pos-on:#04140F;
  --neg-on:#FFFFFF;
  --accent-on-fill:#04140F;
  /* Midnight's warn fill is bright amber (#FFA24B); white on it is 2.00:1.
     A dark warm ink reaches 8.43:1. */
  --warn-on:#2A1A05;
  --btn-soft-fill:#14171A;
}
html.skin-air:root {
  --sk-input-bg:#FFFFFF;
  --sk-input-border:#D7DDE6;
  --sk-input-focus:#2F6BFF;
  --sk-input-placeholder:#98A2B0;
  --sk-hover:rgba(19,26,34,0.035);
  --sk-active:rgba(19,26,34,0.06);
  --sk-selected:rgba(47,107,255,0.09);
  --sk-disabled-text:#A3ADBA;
  --sk-disabled-bg:#F2F4F8;
  --sk-modal-surface:#FFFFFF;
  --sk-modal-backdrop:rgba(20,30,45,0.42);
  --sk-nav-bg:rgba(255,255,255,0.94);
  --sk-table-header:#F5F7FA;
  --sk-table-row-hover:rgba(19,26,34,0.03);
  --sk-skeleton:linear-gradient(90deg, #EEF1F5 0%, #F7F9FC 50%, #EEF1F5 100%);
  --sk-chart-grid:rgba(19,26,34,0.10);
  --sk-chart-label:#5A6472;
  --sk-scrollbar:#C9D2DE;
  --sk-focus-ring:rgba(47,107,255,0.45);
  /* Air's status/accent fills are all darkened for AA, so white ink is correct
     -- same values as the Classic default, declared explicitly for symmetry. */
  --pos-on:#FFFFFF;
  --neg-on:#FFFFFF;
  --accent-on-fill:#FFFFFF;
  /* Air's warn fill is already dark (#8A5A0F); white on it is 5.92:1. */
  --warn-on:#FFFFFF;
  --btn-soft-fill:#F5F7FA;
}

/* =====================================================================
   5. COMPONENT MATERIAL RULES (html.skin-balen only)
   ---------------------------------------------------------------------
   These exist because the surfaces below hardcode a color in app.html's
   inline stylesheet and therefore cannot re-theme through tokens alone.
   Each rule changes COLOR/MATERIAL ONLY -- never position, size, spacing,
   font-size, font-family, border-width, radius or display. Geometry is
   inherited from the Classic rule it overrides.
   ===================================================================== */

/* ---- 5.1 page + shell --------------------------------------------- */
html.skin-balen, html.skin-balen body { background:var(--k-page); color:var(--k-text-primary); }
html.skin-balen ::selection { background:var(--sk-selected); color:var(--k-text-primary); }

/* ---- 5.2 form controls -------------------------------------------- */
/* The single most damaging Classic leak on a dark skin: inputs hardcode a
   white fill, so Midnight would render white boxes with white-ish text. */
html.skin-balen input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.skin-balen select,
html.skin-balen textarea {
  background:var(--sk-input-bg);
  color:var(--k-text-primary);
  border-color:var(--sk-input-border);
}
html.skin-balen input::placeholder,
html.skin-balen textarea::placeholder { color:var(--sk-input-placeholder); opacity:1; }
html.skin-balen input:focus,
html.skin-balen select:focus,
html.skin-balen textarea:focus {
  border-color:var(--sk-input-focus);
  outline-color:var(--sk-input-focus);
}
html.skin-balen input:disabled,
html.skin-balen select:disabled,
html.skin-balen textarea:disabled,
html.skin-balen button:disabled {
  background:var(--sk-disabled-bg);
  color:var(--sk-disabled-text);
  -webkit-text-fill-color:var(--sk-disabled-text);   /* Safari honours only this */
}
/* Native date/time widgets paint their glyphs black; invert them on
   Midnight so the calendar and clock icons stay visible. */
html.skin-midnight input[type="date"]::-webkit-calendar-picker-indicator,
html.skin-midnight input[type="time"]::-webkit-calendar-picker-indicator,
html.skin-midnight input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html.skin-midnight input[type="month"]::-webkit-calendar-picker-indicator { filter:invert(1) opacity(0.75); }
/* Tell the engine which native palette to use, so scrollbars, the date
   picker popup, spinners and autofill all follow the skin. */
html.skin-midnight:root { color-scheme:dark; }
html.skin-air:root { color-scheme:light; }

/* ---- 5.3 quick-add sheet (the floating + destination) -------------- */
/* .fab-sheet itself uses var(--card) -> --k-surface, so it re-themes. These
   are the three places inside it that hardcode a Classic-light value. */
html.skin-balen .fab-sheet-row:hover { background:var(--sk-hover); }
html.skin-balen .fab-sheet-header { border-bottom-color:var(--k-line); }
html.skin-balen .fab-sheet-overlay { background:var(--sk-modal-backdrop); }
/* On Midnight/Air the ignition is a sibling of .bh-nav (not inside it), and
   nothing between it and the root creates a stacking context, so unlike
   Classic's FAB it can be raised directly instead of raising the whole bar.
   Geometry is untouched -- only the stacking order changes -- so the button's
   rect is identical open vs closed and it stays the tap target that closes
   the sheet it opened. */
html.skin-balen body.quickadd-open .bh-ignition { z-index:171; }

/* ---- 5.4 Reports context strip ------------------------------------ */
/* The strip carries --header-on, which is fixed #FFFFFF because it was
   designed as a dark teal band. The Comfort token collapse re-pointed
   --header at --k-header (white), so the title is white-on-white. That is a
   live Classic defect and is deliberately NOT fixed here -- Classic is the
   frozen baseline. Midnight and Air get the band the design intended, using
   the hero surface that already exists for exactly this purpose (white text
   on it measures 12.41:1 on Midnight, 6.22:1 on Air).
   Inline background: needs !important to be displaced; nothing else in the
   declaration is touched, so geometry is untouched. */
html.skin-balen .rp-page-head { background:var(--k-hero-surface) !important; }

/* ---- 5.5 app hero band -------------------------------------------- */
/* The .hero band at the top of every non-Home tab hardcodes Classic's
   4-stop teal gradient with !important (app.html), so it is the one large
   surface no token can reach -- and it is the loudest thing on the page.
   Left alone it reads as Classic bleeding through: a bright aqua slab above
   a graphite page on Midnight, and a teal slab above a blue page on Air.
   Both violate the appearance contract ("no random teal leakage from
   Classic"; Air's accent is blue).
   The band keeps its FIXED light ink (#F4FBFB, set !important alongside the
   gradient), so both replacements must stay dark. Measured against #F4FBFB:
   Midnight's darkest stop 17.4:1 / lightest 8.4:1; Air's 14.8:1 / 6.2:1.
   (2026-07-21 accessibility pass: Air's former lightest stop #2F6BFF
   measured 4.3:1 -- below AA 4.5 for the band's small-caps subtitle/
   eyebrow text. The ramp now ends at #2456D6, the documented 6.22:1
   hero-surface value, so EVERY point of the gradient clears AA. Skins
   are themes: they must never reduce readability.)
   Only the two paint properties are replaced -- geometry, radius, shadow
   geometry and the ink are untouched. */
html.skin-midnight .hero {
  background: linear-gradient(135deg, #06181B 0%, #0A2A30 40%, #0D3F44 70%, #115C57 100%) !important;
}
html.skin-air .hero {
  background: linear-gradient(135deg, #14224A 0%, #1B3A8F 40%, #2050C8 70%, #2456D6 100%) !important;
}

/* ---- 5.6 focus visibility ----------------------------------------- */
html.skin-balen :focus-visible {
  outline:2px solid var(--sk-focus-ring);
  outline-offset:2px;
}

/* ---- 5.7 accessibility: honour reduced motion --------------------- */
@media (prefers-reduced-motion: reduce) {
  html.skin-balen *, html.skin-balen *::before, html.skin-balen *::after {
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}