/* ============================================================================
   hero-themes.css — "Glass Cockpit" (data-theme="glass-cockpit") + "Editorial
   Minimal" (data-theme="editorial") hero themes.
   NEW additive theme values, one file so index.html/welcome.html only pay
   for ONE extra render-blocking stylesheet each (see css_link_budget_test.js)
   instead of two. Loads after all existing page CSS. Scoped strictly to the
   hero container on each page (.home-hero-focus on index.html, .hero on
   welcome.html) and that container's own sub-elements — never body/html/
   root, so neither theme can bleed into gym/atlas/dashboard pages that also
   load these shared stylesheets.

   Does NOT touch, override, or remove any of the 6 existing theme values
   (light, zen, clinical, chalk, obsidian, oled) or the default theme. Every
   rule below only ever matches under [data-theme="glass-cockpit"] or
   [data-theme="editorial"], neither of which is ever applied by any
   existing code path.

   Specificity note: cover-parity.css (loaded earlier) scopes nearly every
   index.html hero rule as `body[data-current-page="home"] #home <target>`
   (an ID-tier selector). A bare `[data-theme="X"] <target>` selector has NO
   id component and LOSES that fight even with !important, regardless of
   load order. Every index.html-scoped rule below is therefore written as
   `html[data-theme="X"] #home <target>` — same id/class/element tier as
   cover-parity's own selector — so the tie resolves on source order, and
   this file loads last. welcome.html's `.hero` is a plain class with no
   #home/ID competitor, so those rules stay a plain attribute+class selector.
   ============================================================================ */

:root {
  --editorial-bg: #faf9f6;
  --editorial-ink: #141414;
  --editorial-muted: #5c5c58;
  --editorial-line: rgba(20, 20, 20, 0.12);
  --editorial-accent: #0b8a5e;        /* borders/rules/dots only — 4.14:1, clears 3:1 non-text AA */
  --editorial-accent-text: #0a7a54;   /* small caps/labels/values — 5.08:1, clears 4.5:1 text AA */
}

/* Hidden-by-default carrier for the reused "sample readout" card. Both new
   themes share this ONE partial (real copy, lifted verbatim from the
   existing welcome.html sample readout) so index.html can surface it
   without inventing new markup per theme. Hidden under every other theme. */
.hero-sample-readout { display: none; }

/* Chrome for the new "preview a theme" control (see home-theme-preview.js),
   present on both pages, sited OUTSIDE the hero container so it never
   counts against any choice-budget scoped to the hero itself. Brand-new
   element, not an existing shared selector, so styling it unconditionally
   is additive. Kept deliberately quiet/small so it never competes with the
   real hero CTAs. */
.home-theme-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-family: var(--f-mono, var(--mono, ui-monospace, monospace));
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted, #9aa6b8);
  opacity: 0.85;
}
.home-theme-preview button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 4px 10px;
  min-height: 28px;
  cursor: pointer;
  opacity: 0.8;
}
.home-theme-preview button:hover,
.home-theme-preview button:focus-visible {
  opacity: 1;
}

/* ============================================================================
   GLASS COCKPIT — data-theme="glass-cockpit"
   ============================================================================ */

/* ---- Frosted glass hero panel --------------------------------------------
   Gradient border via the padding-box/border-box double-background trick,
   so no extra wrapper element is needed around .home-hero-focus / .hero. */
html[data-theme="glass-cockpit"] #home .home-hero-focus,
[data-theme="glass-cockpit"] .hero {
  position: relative !important;
  isolation: isolate;
  z-index: 0;
  border-radius: 28px !important;
  border: 1px solid transparent !important;
  padding: clamp(24px, 4vw, 48px) !important;
  background:
    linear-gradient(180deg, rgba(15, 17, 22, 0.55), rgba(15, 17, 22, 0.55)) padding-box,
    conic-gradient(from 180deg, #22d3ee, #34d399, #a78bfa, #22d3ee) border-box !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 24px 80px -24px rgba(0, 0, 0, 0.55) !important;
  overflow: hidden;
  color: #f2f4f7 !important;
}

/* Subtle grain, single inline SVG filter, scoped to the hero panel only. */
html[data-theme="glass-cockpit"] #home .home-hero-focus::before,
[data-theme="glass-cockpit"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
}

/* Text stays readable on the dark glass regardless of which theme's palette
   was active before glass-cockpit was selected. */
html[data-theme="glass-cockpit"] #home .home-overline,
html[data-theme="glass-cockpit"] #home .home-subtitle,
[data-theme="glass-cockpit"] .eyebrow,
[data-theme="glass-cockpit"] .hero-sub {
  color: #b7c0d1 !important;
}
html[data-theme="glass-cockpit"] #home .home-wordmark,
html[data-theme="glass-cockpit"] #home .home-title-main,
[data-theme="glass-cockpit"] .hero h1 {
  color: #f2f4f7 !important;
  background: none !important;
  -webkit-text-fill-color: #f2f4f7 !important;
}
[data-theme="glass-cockpit"] .eyebrow .dot { background: #34d399 !important; }

/* ---- Maximize: push the glass treatment through every hero sub-element --- */

/* Stat cards */
html[data-theme="glass-cockpit"] #home .v4-stat {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html[data-theme="glass-cockpit"] #home .v4-stat strong {
  color: #f2f4f7 !important;
  -webkit-text-fill-color: #f2f4f7 !important;
}
html[data-theme="glass-cockpit"] #home .v4-stat span {
  color: #34d399 !important;
  -webkit-text-fill-color: #34d399 !important;
}

/* CTA buttons. index.html's hero CTAs carry a .pathway-* class that
   cover-parity.css re-colors at `body[data-current-page="home"]
   .pathway-X{...!important}` (id=0, 2 class-tier selectors). Chaining
   #home + .pathway-* onto our own selector reaches id=1 — an ID beats any
   number of classes outright — so this wins without touching cover-parity.css. */
html[data-theme="glass-cockpit"] #home .home-cta-main,
html[data-theme="glass-cockpit"] #home .home-cta-main.pathway-atpcp,
[data-theme="glass-cockpit"] .hero .btn-primary {
  background: linear-gradient(135deg, #34d399, #22d3ee) !important;
  color: #04140d !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 30px -8px rgba(52, 211, 153, 0.45) !important;
}
html[data-theme="glass-cockpit"] #home .home-cta-secondary,
html[data-theme="glass-cockpit"] #home .home-cta-secondary.pathway-glycolytic,
html[data-theme="glass-cockpit"] #home .home-cta-secondary.pathway-aerobic,
[data-theme="glass-cockpit"] .hero .btn-ghost {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f2f4f7 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Readout card — the real "sample readout" pattern, glass-styled and pushed
   through every sub-row for full coherence with the panel it sits in.
   Nothing else in the codebase styles .readout on index.html (it's new
   markup here), so no #home fight exists for this one. */
[data-theme="glass-cockpit"] .readout,
[data-theme="glass-cockpit"] .hero-sample-readout {
  display: block;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-top: 2px solid #34d399 !important;
  border-radius: 18px !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: none !important;
}
[data-theme="glass-cockpit"] .readout-tag { color: #34d399 !important; }
[data-theme="glass-cockpit"] .readout-k { color: #9aa6b8 !important; }
[data-theme="glass-cockpit"] .readout-call strong { color: #f2f4f7 !important; }
[data-theme="glass-cockpit"] .readout-rows li { border-bottom-color: rgba(255, 255, 255, 0.12) !important; }
[data-theme="glass-cockpit"] .readout-rows span { color: #9aa6b8 !important; }
[data-theme="glass-cockpit"] .readout-rows b { color: #34d399 !important; }
[data-theme="glass-cockpit"] .readout-note { color: #9aa6b8 !important; }

/* Progressive-overload teaser (index.html only) rides the same glass panel.
   front-visual-overhaul.css defines this as a bare `.fvo-overload-teaser{}`
   (no #home, no id) so our 2-class attribute+class selector already wins. */
[data-theme="glass-cockpit"] .fvo-overload-teaser {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
[data-theme="glass-cockpit"] .fvo-overload-cta { color: #34d399 !important; }

/* ---- Perf: disable the blur under 480px, flat-color fallback -------------
   backdrop-filter is expensive on low-end mobile GPUs; below the smallest
   breakpoint the panel keeps its palette and border but drops the blur. */
@media (max-width: 480px) {
  html[data-theme="glass-cockpit"] #home .home-hero-focus,
  [data-theme="glass-cockpit"] .hero {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #12141a !important;
  }
  [data-theme="glass-cockpit"] .readout,
  [data-theme="glass-cockpit"] .hero-sample-readout,
  [data-theme="glass-cockpit"] .fvo-overload-teaser,
  html[data-theme="glass-cockpit"] #home .v4-stat {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---- Respect prefers-reduced-motion --------------------------------------
   No motion is authored in this theme; this guards any future addition. */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="glass-cockpit"] #home .home-hero-focus *,
  [data-theme="glass-cockpit"] .hero * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================================
   EDITORIAL MINIMAL — data-theme="editorial"

   Palette + contrast (verified before commit, not after — WCAG AA):
     bg    #FAF9F6  (paper)
     ink   #141414  (headline / body text)
     brand #0B8A5E  (existing light-theme accent — brand continuity)
   #0B8A5E directly on #FAF9F6 measures 4.14:1 — AA for LARGE text (>=3:1)
   but UNDER AA for small text (needs >=4.5:1). Every place this theme sets
   accent-colored TEXT (eyebrow/kicker caps, readout tag/values, stat
   labels — all small, <18px) uses --editorial-accent-text, a darkened
   #0A7A54, which measures 5.08:1 on #FAF9F6 (verified — see
   contrast_check_editorial.js, run and PASS before this commit). The
   lighter #0B8A5E is reserved for non-text UI (borders, rules, dots) where
   the AA threshold is 3:1 for non-text contrast (1.4.11), which #0B8A5E
   already clears at 4.14:1.
   ============================================================================ */

/* ---- Editorial hero panel --------------------------------------------- */
html[data-theme="editorial"] #home .home-hero-focus,
[data-theme="editorial"] .hero {
  background: var(--editorial-bg) !important;
  color: var(--editorial-ink) !important;
  border-radius: 2px !important;
  padding: clamp(24px, 4vw, 56px) clamp(20px, 4vw, 48px) !important;
  border: 1px solid var(--editorial-line) !important;
}

/* Drop the ambient canvas entirely on this theme (index.html only — the
   selector is inert/no-op on welcome.html, which has no #ambientCanvas). */
[data-theme="editorial"] #ambientCanvas { display: none !important; }

/* Eyebrow / kicker — JetBrains Mono label caps, already-preloaded font,
   no new font load. Uses the AA-verified darker accent-text for legibility. */
html[data-theme="editorial"] #home .home-overline,
[data-theme="editorial"] .eyebrow {
  font-family: var(--f-mono, var(--mono, "JetBrains Mono", ui-monospace, monospace)) !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--editorial-accent-text) !important;
}
[data-theme="editorial"] .eyebrow .dot {
  background: var(--editorial-accent) !important;
}
html[data-theme="editorial"] #home .home-overline-question,
html[data-theme="editorial"] #home .home-overline-brand {
  color: var(--editorial-accent-text) !important;
}

/* H1 — left-aligned (deliberate departure from the centered convention of
   every other theme), weight 700, clamp(2.25rem,5vw,4rem). */
html[data-theme="editorial"] #home .home-wordmark,
html[data-theme="editorial"] #home .home-title-main,
[data-theme="editorial"] .hero h1 {
  text-align: left !important;
  font-weight: 700 !important;
  font-size: clamp(2.25rem, 5vw, 4rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
  color: var(--editorial-ink) !important;
  background: none !important;
  -webkit-text-fill-color: var(--editorial-ink) !important;
  max-width: 20ch !important;
}
html[data-theme="editorial"] #home .home-subtitle,
[data-theme="editorial"] .hero-sub {
  color: var(--editorial-muted) !important;
  max-width: 56ch;
  font-size: 1.05rem;
  line-height: 1.65;
}
html[data-theme="editorial"] #home .home-primary-actions,
[data-theme="editorial"] .cta-row {
  justify-content: flex-start !important;
}

/* welcome.html-only chrome: the free-banner strip and proof list ship dark-
   theme colors (light-blue #dbeafe text meant for a dark hero) that read at
   very low contrast against the paper palette. Re-tone with the same
   AA-verified ink/muted/accent-text tokens used everywhere else in this
   theme, so the whole hero — not just the headline — reads coherently. */
[data-theme="editorial"] .hero .free-banner {
  background: var(--editorial-bg) !important;
  border-color: var(--editorial-line) !important;
  border-left-color: var(--editorial-accent) !important;
  color: var(--editorial-ink) !important;
}
[data-theme="editorial"] .hero .free-banner strong { color: var(--editorial-accent-text) !important; }
[data-theme="editorial"] .hero .proof { color: var(--editorial-muted) !important; }
[data-theme="editorial"] .hero .proof li::before { background: var(--editorial-accent) !important; }
[data-theme="editorial"] .hero .disclose > summary { color: var(--editorial-ink) !important; }
[data-theme="editorial"] .hero .disclose > summary:hover { color: var(--editorial-accent-text) !important; }
[data-theme="editorial"] .hero .disclose > summary::after { color: var(--editorial-accent-text) !important; }
[data-theme="editorial"] .hero .disclose .body { color: var(--editorial-muted) !important; }
[data-theme="editorial"] .hero .disclose { border-top-color: var(--editorial-line) !important; }
[data-theme="editorial"] .hero-signin { color: var(--editorial-muted) !important; }
[data-theme="editorial"] .hero-signin a { color: var(--editorial-accent-text) !important; }

/* Single outlined (not gradient-filled) CTA — primary action only. The
   secondary action drops to a plain underlined text link so exactly one
   filled/outlined button reads as the choice (Hick's Law: one obvious
   action), without deleting or rerouting any existing href. */
html[data-theme="editorial"] #home .home-cta-main,
html[data-theme="editorial"] #home .home-cta-main.pathway-atpcp,
[data-theme="editorial"] .hero .btn-primary {
  background: transparent !important;
  color: var(--editorial-ink) !important;
  border: 1.5px solid var(--editorial-ink) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.15s ease, color 0.15s ease;
}
html[data-theme="editorial"] #home .home-cta-main:hover,
html[data-theme="editorial"] #home .home-cta-main.pathway-atpcp:hover,
[data-theme="editorial"] .hero .btn-primary:hover {
  background: var(--editorial-ink) !important;
  color: var(--editorial-bg) !important;
}
html[data-theme="editorial"] #home .home-cta-secondary,
html[data-theme="editorial"] #home .home-cta-secondary.pathway-glycolytic,
html[data-theme="editorial"] #home .home-cta-secondary.pathway-aerobic,
[data-theme="editorial"] .hero .btn-ghost {
  background: transparent !important;
  color: var(--editorial-muted) !important;
  border: none !important;
  border-radius: 0 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none !important;
}

/* ---- Maximize: stats grid + readout card, full page coherence ---------- */
html[data-theme="editorial"] #home .v4-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1px !important;
  background: var(--editorial-line) !important;
  border: 1px solid var(--editorial-line) !important;
}
html[data-theme="editorial"] #home .v4-stat {
  background: var(--editorial-bg) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px !important;
}
html[data-theme="editorial"] #home .v4-stat strong {
  color: var(--editorial-ink) !important;
  -webkit-text-fill-color: var(--editorial-ink) !important;
}
html[data-theme="editorial"] #home .v4-stat span {
  font-family: var(--f-mono, var(--mono, "JetBrains Mono", ui-monospace, monospace)) !important;
  color: var(--editorial-accent-text) !important;
  -webkit-text-fill-color: var(--editorial-accent-text) !important;
  letter-spacing: 0.06em !important;
}

/* Readout card — real sample-data pattern (already in welcome.html),
   surfaced on the homepage too via the shared .hero-sample-readout partial.
   Nothing else styles .readout on index.html, so no #home fight exists. */
[data-theme="editorial"] .readout,
[data-theme="editorial"] .hero-sample-readout {
  display: block;
  background: #ffffff !important;
  border: 1px solid var(--editorial-line) !important;
  border-top: 1px solid var(--editorial-line) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  padding: 26px 28px;
}
[data-theme="editorial"] .readout-tag {
  font-family: var(--f-mono, var(--mono, "JetBrains Mono", ui-monospace, monospace)) !important;
  color: var(--editorial-accent-text) !important;
  letter-spacing: 0.12em;
}
[data-theme="editorial"] .readout-k { color: var(--editorial-muted) !important; }
[data-theme="editorial"] .readout-call strong { color: var(--editorial-ink) !important; }
[data-theme="editorial"] .readout-rows li { border-bottom-color: var(--editorial-line) !important; }
[data-theme="editorial"] .readout-rows span { color: var(--editorial-muted) !important; }
[data-theme="editorial"] .readout-rows b { color: var(--editorial-ink) !important; }
[data-theme="editorial"] .readout-note { color: var(--editorial-muted) !important; font-style: italic; }

/* Progressive-overload teaser (index.html only) — flattened to match the
   editorial surface instead of the glass/card treatment other themes use.
   front-visual-overhaul.css defines this as a bare `.fvo-overload-teaser{}`
   (no #home, no id) so our 2-class attribute+class selector already wins. */
[data-theme="editorial"] .fvo-overload-teaser {
  background: transparent !important;
  border: 1px solid var(--editorial-line) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
[data-theme="editorial"] .fvo-overload-kicker {
  font-family: var(--f-mono, var(--mono, "JetBrains Mono", ui-monospace, monospace)) !important;
  color: var(--editorial-accent-text) !important;
}
[data-theme="editorial"] .fvo-overload-cta { color: var(--editorial-ink) !important; }

/* prefers-reduced-motion: this theme authors no motion of its own; guard
   any future addition the same way every other theme in the file does. */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="editorial"] #home .home-hero-focus *,
  [data-theme="editorial"] .hero * {
    transition: none !important;
    animation: none !important;
  }
}