@import url('fonts-local.css'); /* self-hosted Inter + Playfair (latin) — privacy: no Google Fonts IP leak; offline-capable */
/* Eccentryx — Clinical Premium override (LANE-1, loads AFTER design-tokens.css).
   The app renders on a LIGHT base, so this enforces a coherent light clinical theme
   with dark, readable text — fixing the light-text-on-light-bg contrast bug. Pure
   variable + global override; reversible by removing the <link>. */

:root {
  /* Light clinical surfaces */
  --bg: #fbfbfd;
  --bg-tools: #fbfbfd;
  --bg-buy: #fbfbfd;
  --bg-wedge: #fbfbfd;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --surface-3: #eef2f7;
  --border: #e4e9f0;
  --border-bright: #d2dae6;

  /* Dark, legible text (was light → invisible on the light base) */
  --text: #1a1a1a;
  --text-muted: #5b6b82;
  --text-dim: #7b8494;

  /* Replace neon glow with calm soft elevation */
  --glow-red: 0 1px 2px rgba(20,30,50,.06), 0 10px 30px rgba(20,30,50,.08);
  --glow-blue: 0 1px 2px rgba(20,30,50,.06), 0 10px 30px rgba(20,30,50,.08);
  --glow-green: 0 1px 2px rgba(20,30,50,.06), 0 10px 30px rgba(20,30,50,.08);

  --radius: 10px;
  --radius-lg: 16px;

  --f-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body {
  background: var(--bg) !important;
  color: var(--text);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

/* Calm the cyberpunk ambient FX on the light theme */
.fx-grain { opacity: 0.05 !important; }
.fx-spotlight { opacity: 0.08 !important; }

/* De-brutalize + kill neon text glow */
.skew, [class*="-skew"] { transform: none !important; }
* { text-shadow: none !important; }

/* Nav links: dark on the light clinical base. styles.css colors them light for the
   old dark theme (rgb 244,245,247 → ratio 1.09 on white = invisible). Force --text
   so Plan/Gym/Tools/Atlas are legible; completes this file's stated dark-text intent. */
.navlinks a:not(.cta) { color: var(--text) !important; }
.navlinks a:not(.cta):hover { color: var(--text-muted) !important; }
/* Broad: footer/trust/section nav links use a scoped --text (#f4f5f7) that beats :root.
   Force literal dark so all link groups are legible on the light clinical base. */
.navlinks a:not(.cta), .trust-nav a, .section-trust a, .section-trust .trust-nav a, footer a:not(.cta), [class*="trust"] a:not(.cta), [class*="foot"] a:not(.cta) { color: #1a1a1a !important; }

/* Hero: .home-intro bg-color is dark (#1a1a1a) but a light gradient image paints over
   it, so the white headline reads as white-on-light (low contrast). Force a clean light
   hero surface + dark text for a definitive, readable hero on the light clinical base. */
.home-intro, .home-intro.page-active {
  background: var(--bg) !important;
  background-image: none !important;
}
.home-wordmark, .home-title-lockup, .home-intro h1 {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}
.home-intro p, .home-intro .sub, .home-intro [class*="sub"] { color: var(--text-muted) !important; }

/* SYSTEMIC: the --rep-* token family powers the hero (.home-wordmark uses
   color:var(--rep-ink)) and many components. A dark-theme block flips --rep-ink to
   white, so on the light base everything using it goes white-on-light = invisible.
   Re-anchor the structural rep tokens to the light clinical palette — one fix,
   whole-site. (Accent rep colors left intact.) */
:root, :root.theme-dark, html body, [data-theme] {
  --rep-ink: #1a1a1a !important;
  --rep-ink-2: #2c2e36 !important;
  --rep-paper: #fbfbfd !important;
  --rep-paper-2: #ffffff !important;
  --rep-mist: #eef2f7 !important;
  --rep-line: #e4e9f0 !important;
}

/* Hero is GRADIENT TEXT rendered as per-letter .wm-letter spans (neon gradient via
   background-clip:text → reads near-white on the light base). color/--rep-ink can't
   win that. Kill the gradient fill + force solid dark ink. html body prefix out-
   specifies the single-class styles.css rules. */
html body .home-wordmark,
html body .home-title-lockup,
html body .home-wordmark .wm-letter,
html body .wm-letter {
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: #1a1a1a !important;
  color: #1a1a1a !important;
  filter: none !important;
}

/* THE KEY: the winning rule was `body[data-current-page="home"] .home-wordmark
   { color: var(--surface) }` — hero text = --surface = white. styles.css uses
   `body[data-current-page="X"]` route prefixes (specificity 0,2,1); plain overrides
   lose. Match that prefix; clinical-override loads later so equal-specificity wins. */
body[data-current-page="home"] .home-wordmark,
body[data-current-page="home"] .home-wordmark *,
body[data-current-page="home"] .home-title-lockup,
body[data-current-page="home"] .home-title-lockup * {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* Hero SUBTITLE ("Works on any phone. Free to start.") — same trap as the wordmark:
   the winning rule is `body[data-current-page="home"] .home-subtitle { color:var(--surface) }`
   = white-on-light (~1:1, invisible). Match the route prefix (0,2,1) + load later to win
   and force dark navy ink for a legible, on-brand subhead. */
body[data-current-page="home"] .home-subtitle,
body[data-current-page="home"] .home-subtitle * {
  color: #1f2938 !important;
  -webkit-text-fill-color: #1f2938 !important;
}

/* /app topnav brand-name "ECCENTRYX" was white on the near-white nav (invisible,
   ~1:1 contrast). Force dark navy ink for legibility. */
body .topnav .brand-name,
body nav .brand-name,
.topnav a.brand .brand-name {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  background: none !important;
}

/* ── UNIFY /app with the front-door Clinical-Navy theme ──────────────────────
   Front door = Playfair serif headings + a single #2563EB blue on near-white.
   The app was Inter/sans + neon accents. Align both so they read as ONE brand:
   editorial serif display headings + the same brand blue. */
body[data-current-page] .home-wordmark,
body[data-current-page] .home-title-main,
body[data-current-page] h1,
body[data-current-page] h2,
.presale-title, .section-title, .home-title-lockup, .home-wordmark {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
  letter-spacing: -0.01em !important;
}
:root, html body {
  --accent-primary: #2563eb !important;
  --accent-glow: #2563eb !important;
  --blue: #2563eb !important;
  --blue-light: #5b8def !important;
  /* Used in styles.css but never defined (invalid -> invisible session-progress fill, warn
     indicators, accents). Define on-brand: cyan->clinical blue, amber for warn states.
     --i is an animation stagger index; JS sets it inline per element, 0 is the safe default. */
  --cyan: #2563eb !important;
  --amber: #f59e0b !important;
  --i: 0;
}

/* ── Passport context cards: white text on light neon tints/lime = invisible
   (dark-theme leftover). Force dark text + re-tone the neon rep palette to calm,
   light, premium tints that harmonize with the front door. All kept LIGHT so the
   dark text stays readable on both solid and alpha-tint card backgrounds. */
.context-passport-card, .context-passport-card *,
.context-passport-output, .context-passport-output * {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}
:root, html body {
  --rep-cyan:   #a9c9e8 !important;  /* was #13d7ff electric */
  --rep-lime:   #c6d6c0 !important;  /* was #c8ff2d electric */
  --rep-coral:  #e8c4b8 !important;  /* was #ff5f3f electric */
  --rep-green:  #b6d8c8 !important;
  --rep-violet: #cbc7e6 !important;
}
/* The solid "Start from this context" CTA → brand blue + white text (readable). */
.context-passport-start, .context-passport-start * {
  background: #2563eb !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* The "floor receipt" section used an olive-green gradient — off-brand vs the
   front door's single navy dark-section. Re-tone to brand navy so both surfaces
   share ONE dark-section color. Inner text is light → stays readable on navy. */
.floor-receipt-board {
  background: #1d2d50 !important;
  background-image: none !important;
}

/* Residual neon hardcoded OUTSIDE the --rep vars (repdeck problem cards, active
   segment buttons, streak chip). Calm to brand-blue tints + keep text dark so the
   whole app converges on the front-door blue/navy/neutral palette. */
.repdeck-problem-card, .repdeck-problem-card * {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}
.repdeck-problem-card {
  background: rgba(37, 99, 235, 0.06) !important;
  border: 1px solid #e4e9f0 !important;
}
.seg-btn.active, [class*="seg-btn"].active, [class*="seg-btn"][aria-selected="true"] {
  background: #2563eb !important;
  color: #ffffff !important;
}
.sidebar-streak { background: rgba(37, 99, 235, 0.07) !important; }

/* Navy floor-receipt INNER cards (Set the week / Swap / etc.) were green/teal/purple.
   Make them uniform subtle white-alpha cards on the navy section — premium + coherent.*/
.floor-receipt-grid article {
  background: rgba(255, 255, 255, 0.06) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.floor-receipt-grid article, .floor-receipt-grid article * {
  color: #eaf0f8 !important;
  -webkit-text-fill-color: #eaf0f8 !important;
}

/* "Remove the guessing" rule card was near-black — make it a clean light card with
   dark text (matches the light theme; emphasis comes from the serif heading). */
.repdeck-contract-head {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e4e9f0 !important;
}
.repdeck-contract-head, .repdeck-contract-head * {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}

/* Contract grid (Next action / Trust / Body boundary / load-math) had a dark card +
   mixed tints → uniform faint brand-blue, dark text. */
.repdeck-contract-grid > * {
  background: rgba(37, 99, 235, 0.06) !important;
  background-image: none !important;
  border: 1px solid #e4e9f0 !important;
}
.repdeck-contract-grid, .repdeck-contract-grid * {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}

/* Section eyebrows used neon cyan (#00e5ff) on the LIGHT sections — re-tone to brand
   blue so labels match the front-door eyebrow color. Sidebar/dark-section labels are
   on dark backgrounds → left light (not retoned here). */
.hero-section-label, .repdeck-section-label, [class*="section-eyebrow"] {
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
}

/* The eyebrow cyan is set via a route-prefixed rule (body[data-current-page=X]
   .hero-section-label, specificity 0,2,1) — the plain override above lost. Match the
   prefix so the later-loading override wins on equal specificity. */
body[data-current-page] .hero-section-label {
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
}

/* The session-recap panel is a fixed overlay that, when not .open, carries the `inert`
   attribute → styles.css `[inert]{opacity:.35}` renders a half-ghost "Session saved" card
   over live content (it sat on the primary CTA between 481-768px; the old hide rule only
   covered ≤480px). A ghost recap with no real session behind it reads broken to a
   first-time visitor at ANY width — fully hide until .open. */
.session-recap-panel:not(.open),
.session-recap-panel[inert] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Bottom mobile tab bar (.mobile-app-nav, Plan/Gym/Tools/Atlas): designed as a dark bar
   with light text, but a styles.css `background:var(--surface)!important` whitened it →
   light text on white = invisible. Restore it to brand NAVY (consistent with the top promo
   bar / sidebar / cockpit) so its light text reads; active tab brightens to white. */
.mobile-app-nav {
  background: #16213c !important;
  background-image: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.mobile-app-tab { color: #c7d4e8 !important; -webkit-text-fill-color: #c7d4e8 !important; background: transparent !important; /* a11y 1.4.3: was light --surface-2 bg behind light text (1.39); transparent shows the navy nav -> ~10:1 */ }
.mobile-app-tab.active, .mobile-app-tab[aria-current="page"], .mobile-app-tab[aria-selected="true"] {
  /* a11y 1.4.3 (2026-06-11): white assumed the active tab stayed transparent-over-navy;
     styles.css paints the active pill --rep-lime (pale sage) -> white was 1.52:1.
     Dark ink on the sage pill ~11:1, matching the styles.css:7975 codified intent. */
  color: #101114 !important;
  -webkit-text-fill-color: #101114 !important;
}
/* a11y FIX (concurrent-edit regression, browser-verified via ops/browser_qa): styles.css:8946
   `body nav.mobile-app-nav a.mobile-app-tab:not(.active):not([aria-current="page"]) span` (0,4,4)
   forces the INACTIVE label span to #1a2233 — fine when the tab bg was light, but 1258e0f made the
   tab transparent over the #16213c navy nav, so it rendered dark-on-navy (~1.2:1, browser_qa
   confirmed my earlier 0,2,1 override lost). Out-specify with html-prefix (0,4,5) + carry the
   intended light. Inactive light on navy = ~10:1; active span dark ink on the
   sage --rep-lime pill (2026-06-11: white-on-sage was 1.52:1). */
html body nav.mobile-app-nav a.mobile-app-tab:not(.active):not([aria-current="page"]) span {
  color: #c7d4e8 !important;
  -webkit-text-fill-color: #c7d4e8 !important;
}
html body nav.mobile-app-nav a.mobile-app-tab.active span,
html body nav.mobile-app-nav a.mobile-app-tab[aria-current="page"] span {
  color: #101114 !important;
  -webkit-text-fill-color: #101114 !important;
}

/* ── Blueprint RESULT (quiz [data-step="result"]) — the single most important deliverable
   screen (a cold user's generated 7-day plan). It was styled for the OLD dark theme: neon
   cyan/green tags, white notes, and dark sub-cards now sit on the LIGHT result card and are
   unreadable (cyan ~1.3:1, white-on-white ~1:1, dark-on-dark proof text). Re-tone the whole
   pane to the light clinical palette. Scoped to [data-step="result"] so the navy Gym cockpit
   — where the same neon reads fine on dark — is untouched. */
[data-step="result"] .quiz-result-note { color: #5b6b82 !important; -webkit-text-fill-color: #5b6b82 !important; }
[data-step="result"] .quiz-result-label, [data-step="result"] .day1-tag {
  color: #15803d !important; -webkit-text-fill-color: #15803d !important;
}
/* neon-cyan (#00e5ff) section tags / day numbers / chips -> brand blue */
[data-step="result"] .ce-personal-tag, [data-step="result"] .ce-intake-tag,
[data-step="result"] .ce-day-num, [data-step="result"] .ce-day-num b,
[data-step="result"] .ce-selection-proof-tag, [data-step="result"] .ce-why-chip {
  color: #1d4ed8 !important; -webkit-text-fill-color: #1d4ed8 !important;
}
[data-step="result"] .ce-why-chip { background: rgba(37, 99, 235, 0.08) !important; }
/* dark selection-proof sub-cards -> light so their dark text reads */
[data-step="result"] .ce-selection-proof, [data-step="result"] .ce-selection-proof-item {
  background: #f5f7fa !important; background-image: none !important; border-color: #e4e9f0 !important;
}
[data-step="result"] .ce-selection-proof-text { color: #1f2938 !important; -webkit-text-fill-color: #1f2938 !important; }
[data-step="result"] .ce-sub-trigger { color: #5b6b82 !important; -webkit-text-fill-color: #5b6b82 !important; }
/* phase category badges — generic safety net (readable slate on faint blue tint) then
   specific hues for the known phases so color-coding survives but stays legible on light. */
[data-step="result"] .ph, [data-step="result"] [class*="day1-phase"] {
  color: #475569 !important; -webkit-text-fill-color: #475569 !important;
  background: rgba(37, 99, 235, 0.08) !important;
}
[data-step="result"] .day1-phase-func, [data-step="result"] .ph.func {
  color: #1d4ed8 !important; -webkit-text-fill-color: #1d4ed8 !important; background: rgba(37, 99, 235, 0.12) !important;
}
[data-step="result"] .day1-phase-lift, [data-step="result"] .ph.lift {
  color: #b45309 !important; -webkit-text-fill-color: #b45309 !important; background: rgba(180, 83, 9, 0.12) !important;
}
[data-step="result"] .day1-phase-rec, [data-step="result"] .ph.rec {
  color: #15803d !important; -webkit-text-fill-color: #15803d !important; background: rgba(21, 128, 61, 0.12) !important;
}

/* v2: catch the rest of the result's neon family generically — every ce-* tag/label and the
   lock glyph were hardcoded cyan (#00e5ff/#5cf6ff). Force brand blue across the family. */
[data-step="result"] [class*="ce-"][class*="-tag"],
[data-step="result"] [class*="ce-"][class*="-label"],
[data-step="result"] .ce-day-num, [data-step="result"] .ce-day-num b,
[data-step="result"] .lock-glyph {
  color: #1d4ed8 !important; -webkit-text-fill-color: #1d4ed8 !important;
}
/* Result list items + stray bold emphasis default to dark ink on the light pane. */
[data-step="result"] li, [data-step="result"] b {
  color: #1a1a1a !important; -webkit-text-fill-color: #1a1a1a !important;
}
/* Primary action (Share my plan) — white text needs a filled blue button. */
[data-step="result"] .ce-btn.primary, [data-step="result"] .ce-btn-primary {
  background: #2563eb !important; background-image: none !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-color: transparent !important;
}
/* Darken phase ink so small bold labels clear AA-large on their faint tint. */
[data-step="result"] .day1-phase-func, [data-step="result"] .ph.func { color: #1e3a8a !important; -webkit-text-fill-color: #1e3a8a !important; }
[data-step="result"] .day1-phase-lift, [data-step="result"] .ph.lift { color: #7c2d12 !important; -webkit-text-fill-color: #7c2d12 !important; }
[data-step="result"] .day1-phase-rec, [data-step="result"] .ph.rec { color: #14532d !important; -webkit-text-fill-color: #14532d !important; }
/* Secondary row labels (sets×reps, RPE, swap/protect) — darken muted ink to clear AA on the
   faint-tinted exercise rows. */
[data-step="result"] .sx, [data-step="result"] .rp,
[data-step="result"] .ce-row-action, [data-step="result"] .ce-sub-trigger {
  color: #475569 !important; -webkit-text-fill-color: #475569 !important;
}

/* Client-side auth widget (#eccentrx-auth-slot, auth-client.js) is a raw dark fixed top-right
   form built with inline styles — off-brand on the light app and it overflows the top on
   phones (two 140px inputs wrap full-width over the logo). Re-skin to a compact light card
   with brand-blue actions (inline styles need !important), and shrink the inputs on mobile so
   it stops blanketing the header. Full UX rethink (button-opens-modal) left for the operator. */
#eccentrx-auth-slot form {
  background: #ffffff !important;
  border: 1px solid #e4e9f0 !important;
  box-shadow: 0 6px 22px rgba(20, 30, 50, 0.14) !important;
}
#eccentrx-auth-slot input {
  border: 1px solid #d8e0ec !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}
#eccentrx-auth-slot button {
  background: #2563eb !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 0 !important;
  border-radius: 6px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
}
#eccentrx-auth-slot span { color: #5b6b82 !important; }
@media (max-width: 480px) {
  #eccentrx-auth-slot {
    position: static !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    margin: 16px 8px !important;
    max-width: calc(100vw - 16px) !important;
  }
  #eccentrx-auth-slot input { width: 104px !important; }
}

/* a11y: reduced-motion belt in the last-loaded override layer */
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}}
/* a11y WCAG 1.4.1: active segmented buttons get a non-color cue, not only blue fill */
.seg-btn.active,[class*="seg-btn"].active,[class*="seg-btn"][aria-selected="true"]{font-weight:700!important;box-shadow:inset 0 -3px 0 0 #1d2d50!important;}

/* App form inputs were dark (#1a1a1a bg + white text) — a dark-theme holdover that
   reads as black boxes on the light clinical cards. Re-tone to clean light inputs
   (range sliders excluded — they style their own track/thumb). */
input[type="number"], input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="date"], select, textarea {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #d8e0ec !important;
  -webkit-text-fill-color: #1a1a1a !important;
}
input::placeholder, textarea::placeholder { color: #8b97a8 !important; -webkit-text-fill-color: #8b97a8 !important; }

/* Session-recap panel (bottom-right) was a near-black card (rgba(5,8,16,.96)) ringed in
   neon green (rgba(46,255,174,.28)) — a dark-theme holdover that clashes with the light
   clinical app. Re-theme to a clean white card with brand-blue accents + soft elevation,
   so the recap reads as the SAME surface language as the rest of /app and the front door. */
.session-recap-card {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e4e9f0 !important;
  box-shadow: 0 1px 2px rgba(20,30,50,.06), 0 18px 50px rgba(20,30,50,.12) !important;
}
.session-recap-kicker { color: #1d4ed8 !important; -webkit-text-fill-color: #1d4ed8 !important; }
.session-recap-card h3 { color: #1a1a1a !important; -webkit-text-fill-color: #1a1a1a !important; }
.session-recap-metric {
  background: rgba(37, 99, 235, 0.05) !important;
  border: 1px solid #e4e9f0 !important;
}
.session-recap-metric span { color: #5b6b82 !important; -webkit-text-fill-color: #5b6b82 !important; }
.session-recap-metric strong { color: #1a1a1a !important; -webkit-text-fill-color: #1a1a1a !important; }
.session-recap-voice {
  background: #f5f7fa !important;
  border: 1px solid #e4e9f0 !important;
  color: #5b6b82 !important;
  -webkit-text-fill-color: #5b6b82 !important;
}
.session-recap-voice.active, .session-recap-voice:hover {
  background: #2563eb !important;
  border-color: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.session-recap-copy { color: #5b6b82 !important; -webkit-text-fill-color: #5b6b82 !important; }
.session-recap-close { color: #5b6b82 !important; border: 1px solid #e4e9f0 !important; background: #f5f7fa !important; }
.session-recap-close:hover { color: #1a1a1a !important; border-color: #2563eb !important; }

/* Home route quad: tiles 01/03/04 get distinct --rep tints + dark text, but tile 02
   ("Gym") resolves to `background:var(--surface)` (white) while keeping near-white text
   (#fbfbfd) — white-on-white, invisible. Give 02 its own legible tint (lavender, distinct
   from the lime/cyan/coral siblings) and force every tile's text dark so all four read. */
.home-route-strip a:nth-child(2) {
  background: #cbc7e6 !important;
  background-image: none !important;
}
.home-route-strip a, .home-route-strip a *,
.home-route-strip strong, .home-route-strip em, .home-route-strip span {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}

/* Nav drawer (.sidebar): a fixed overlay panel that carries its OWN light text vars
   (--text:#f8fbff, --text-label:#5cf6ff) and was designed to sit over the old dark page.
   Its solid dark bg got overridden to transparent, so on the light clinical app it shows
   through → 37 light-text-on-light hits. Restore a solid NAVY panel — consistent with the
   dark top-nav + floor-receipt navy — so all the existing light text reads on it, and
   soften the neon cyan label/glyphs to the brand blue. */
.sidebar {
  background: #16213c !important;
  background-image: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  --text-label: #9ec5ff !important;
}
.sidebar-mode-label, .sa-glyph, .sb-glyph, .sidebar-foot-line {
  color: #9ec5ff !important;
  -webkit-text-fill-color: #9ec5ff !important;
}
/* The .sb-glyph step-number chips sat on a cyan-alpha tint; on navy a subtle white-alpha
   chip reads cleaner and keeps the soft-blue number legible. */
.sb-glyph { background: rgba(255, 255, 255, 0.06) !important; }
/* Streak chip was retoned faint-blue for the LIGHT base; on the navy drawer make it a
   subtle white-alpha chip so its content stays legible against navy. */
.sidebar-streak { background: rgba(255, 255, 255, 0.06) !important; }

/* Gym Mode cockpit (.gym-mode-shell) was near-pure-black (rgb 16,17,20) with black-alpha
   inner panels — a deliberate at-the-rack "focus mode" (dark = less phone glare) but in
   generic black. Re-tone the shell to brand NAVY and the inner panels to translucent white
   so it reads as an on-brand navy HUD, unified with the navy sidebar + floor-receipt navy.
   The cockpit keeps its light text (designed for a dark surface) → stays legible on navy. */
/* The shell bg is set via `body[data-current-page="gym"] .gym-mode-shell` (0,2,1) —
   match the route prefix so the later-loading override wins on equal specificity. */
body[data-current-page="gym"] .gym-mode-shell,
.gym-mode-shell {
  background: #16213c !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body[data-current-page="gym"] .gym-mode-head,
body[data-current-page="gym"] .gym-mode-quickstart,
body[data-current-page="gym"] .gym-mode-readiness,
body[data-current-page="gym"] .gym-mode-command-deck,
body[data-current-page="gym"] .gym-mode-plan-deck,
body[data-current-page="gym"] .gym-mode-log,
.gym-mode-head, .gym-mode-quickstart, .gym-mode-readiness,
.gym-mode-command-deck, .gym-mode-plan-deck, .gym-mode-log {
  background: rgba(255, 255, 255, 0.045) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
}
body[data-current-page="gym"] .gym-mode-notes,
.gym-mode-notes { background: rgba(255, 255, 255, 0.03) !important; background-image: none !important; }

/* The generic input rule above lost to styles.css `.section-tools input:not(...)`
   (spec 0,3,1, background:var(--text)=#1a1a1a). Out-specify with the section-* pattern
   (0,4,1) so light inputs win across all tool/section forms. Range/checkbox/radio kept. */
.section-tools input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
[class*="section-"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
[class*="section-"] select, [class*="section-"] textarea {
  background: #ffffff !important;
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  border: 1px solid #d8e0ec !important;
}

/* ── Systemic dark-box components (recur across home tools / settings) ──────────
   Weight-class benchmark tiers (.wc-tier) were near-black (rgb 26,26,26) inside the
   LIGHT home benchmark tool → black boxes with low-contrast text. Make them light cards
   with dark text so they match the surrounding light section. */
.wc-tier {
  background: #f5f7fa !important;
  background-image: none !important;
  border: 1px solid #e4e9f0 !important;
}
.wc-tier, .wc-tier * { color: #1a1a1a !important; -webkit-text-fill-color: #1a1a1a !important; }

/* Inactive segmented buttons were a dark box (rgba 14,18,28,.94) — wrong on the light
   tool/settings surfaces. Make the INACTIVE state a light pill. The navy sidebar's mode
   toggles are governed by the more-specific `.sidebar-mode-toggle .seg-btn*` rules (0,3,0),
   so they KEEP their native white-pill-on-navy active state — these generic rules only reach
   seg-btns on the light surfaces. ACTIVE goes brand-blue (listed last so it wins on ties). */
.seg-btn {
  background: #f5f7fa !important;
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  border: 1px solid #e4e9f0 !important;
}
/* Sidebar seg-btns sit on NAVY: keep light text + a subtle white-alpha pill (0,2,0 beats
   the generic 0,1,0 above so the dark text never leaks onto the navy drawer). */
.sidebar .seg-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #eaf0f8 !important;
  -webkit-text-fill-color: #eaf0f8 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
/* ACTIVE on LIGHT surfaces = brand-blue filled with white text. */
.seg-btn.active,
[class*="seg-btn"].active, [class*="seg-btn"][aria-selected="true"] {
  background: #2563eb !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: transparent !important;
}
/* Sidebar active (0,3,0, beats both the sidebar inactive rule and the native toggle rule
   on later-load tie-break): brand-blue pill + WHITE text — readable on navy, consistent
   with the light-surface active state. */
.sidebar .seg-btn.active {
  background: #2563eb !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: transparent !important;
}

/* Secondary buttons (settings: test ding / storage / etc.) were dark boxes. Make them
   light outline buttons with dark text — standard secondary affordance on the light base. */
.btn-secondary, .btn.btn-secondary {
  background: #ffffff !important;
  background-image: none !important;
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  border: 1px solid #d8e0ec !important;
}

/* ============================================================
   MARKETING REALISM LAYER (2026-06-11) — additive only.
   Canonical palette: brand blue #2563eb · ink #101114 · paper #fbfbfd.
   ============================================================ */

/* Conversion hierarchy: styles.css:26124 paints .btn-primary/.cta-primary/
   .home-cta-main #fafafa-on-white — the primary CTA was the weakest button on
   the page while a context toggle carried the only filled-blue treatment.
   Primary actions get the one filled brand treatment; secondaries stay outline. */
.btn-primary, .cta-primary, .home-cta-main,
.btn.btn-primary {
  background: #2563eb !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 6px 22px rgba(37, 99, 235, 0.25);
}
.btn-primary:hover, .cta-primary:hover, .home-cta-main:hover,
.btn.btn-primary:hover {
  background: #1d4ed8 !important;
}

/* Brand mark: the nav logo SVG still carried the retired neon strokes
   (#00e5ff cyan / #c8ff2d lime) — the only neon left on a clinical-navy page.
   Attribute selectors retone inline SVG without touching markup. */
.brand-mark svg path[stroke="#00e5ff"] { stroke: #2563eb; }
.brand-mark svg path[stroke="#c8ff2d"] { stroke: #5b8def; }

/* Typography honesty: fonts-local.css ships Playfair at max 800 and Inter at
   max 700; styles.css forces 950/900 → the largest type on the site rendered
   as smeared synthetic faux-bold. Pin to the heaviest real cuts. */
body[data-current-page="home"] .home-title-main { font-weight: 800 !important; }
body[data-current-page="home"] .home-subtitle { font-weight: 700 !important; }

/* The zeigarnik momentum HUD is in-app gamification; on the landing route it
   reads as debug chrome to a first-time visitor ("Momentum: 12/106 Actions"). */
body[data-current-page="home"] #aziap-zeigarnik-hud { display: none !important; }

/* Topnav "Generate plan" CTA rendered white text on retoned pale sage
   (#c6d6c0, ~1.8:1) — same background-token-as-foreground class. Give the nav
   CTA the same filled brand treatment as the hero primary. */
.topnav .cta.navlink-signup, #topnavPlan {
  background: #2563eb !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 0 !important;
}
.topnav .cta.navlink-signup:hover, #topnavPlan:hover { background: #1d4ed8 !important; }

/* ── CONTRAST RESCUE (2026-06-12): dark-theme foreground tokens left painting on the
   migrated light surfaces. 8 sites probed INVISIBLE (ratios 1.00–1.52) in fresh
   isolated contexts at 390px (81-agent audit, every finding re-probed live before
   this block). Each rule retones the leftover to clinical ink/green on its light
   surface; glow shadows dropped with the neon they decorated. */

/* why/inside: mint --green-light #7dffce on white cards (1.23) -> clinical green */
.win-callout strong,
.compare-verdict-good,
#compare-tab-compound,
span.metric,
.ar-prs {
  color: #15803d !important;
  -webkit-text-fill-color: #15803d !important;
  text-shadow: none !important;
}

/* gym landing stat values + Metabolic Dominance panel: near-white on near-white (1.00–1.2) */
#gymModeLast, #gymModeNext, #gymModeRest, #mpValue {
  color: #101114 !important;
  -webkit-text-fill-color: #101114 !important;
}
.mp-title, .mp-sub {
  color: #344154 !important;
  -webkit-text-fill-color: #344154 !important;
}

/* "Reset setup" control: white on pale sage (1.52) — same class as the active-tab fix */
#gymModeContextReset, .gym-mode-context-reset {
  color: #101114 !important;
  -webkit-text-fill-color: #101114 !important;
}

/* pricing card copy: #e4e9f0 on white (1.22) */
.price-tagline,
.price-card ul li,
#paid-plan-preview-heading,
.health-disclaimer strong {
  color: #344154 !important;
  -webkit-text-fill-color: #344154 !important;
}

/* signup/trust privacy list label: white on white (1.00) — both the trust-page list
   and the signup data-note variants */
.trust-block .trust-list strong,
.signup-data-note strong {
  color: #101114 !important;
  -webkit-text-fill-color: #101114 !important;
}

/* quiz "Start over": var(--muted) resolved white on white card (1.00) */
.quiz-reset-link {
  color: #52617a !important;
  -webkit-text-fill-color: #52617a !important;
}

/* zen respiration dialog: stylesheet display:flex overrode the UA's closed-dialog
   display:none, so the CLOSED dialog painted at the page bottom on every route while
   running an infinite zen-bloom animation + 24px backdrop-filter. Restore closed
   semantics; [open] (showModal) still gets the flex layout. */
.zen-respiration-modal:not([open]) {
  display: none !important;
  animation: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}