
/* ======================================================================
   WLF v68 BLUE + WHITE FINAL FONT LOCK
   Principle: dark navy surfaces + blue buttons/cards = white readable type.
   This file intentionally overrides older BPF/WLF color variables and skins.
   ====================================================================== */
:root, html, body{
  color-scheme: dark!important;
  --wlf-bg-0:#020817!important;
  --wlf-bg-1:#061226!important;
  --wlf-panel:#08172D!important;
  --wlf-panel-2:#0B1B33!important;
  --wlf-panel-3:#10284F!important;
  --wlf-blue:#2563EB!important;
  --wlf-blue-2:#2F75FF!important;
  --wlf-cyan:#38BDF8!important;
  --wlf-white:#FFFFFF!important;
  --wlf-text:#FFFFFF!important;
  --wlf-text-2:#EAF4FF!important;
  --wlf-muted:#D7E6F7!important;
  --wlf-muted-2:#BFD3EA!important;

  /* Kill old light-theme/BPF dark text variables that were still driving button text. */
  --bpf-white:#FFFFFF!important;
  --bpf-pure-white:#FFFFFF!important;
  --bpf-muted:#D7E6F7!important;
  --bpf-soft:#BFD3EA!important;
  --bpf-bg:#020817!important;
  --bpf-bg-2:#061226!important;
  --bpf-panel:#08172D!important;
  --bpf-panel-2:#0B1B33!important;
  --bpf-red:#2563EB!important;
  --bpf-red-hot:#2F75FF!important;
  --bpf-red-deep:#061226!important;
  --bpf-lime:#38BDF8!important;
  --or:#2F75FF!important;
  --red:#2563EB!important;
  --wh:#FFFFFF!important;
  --mt:#D7E6F7!important;
  --mt2:#BFD3EA!important;
  --dim:#AFC3D8!important;
  --text:#FFFFFF!important;
  --mid:#EAF4FF!important;
}

html,body{background:#020817!important;color:#FFFFFF!important;}
body{
  background:
    radial-gradient(circle at 18% -10%,rgba(37,99,235,.36),transparent 34%),
    radial-gradient(circle at 88% 12%,rgba(56,189,248,.18),transparent 32%),
    linear-gradient(135deg,#020817 0%,#061226 48%,#08172D 100%)!important;
}

/* Global typography: no invisible charcoal text on navy. */
html body,
html body p, html body li, html body label, html body small, html body summary,
html body .sub, html body .muted, html body .copy, html body .desc, html body .description, html body .fine-print{
  color:#D7E6F7!important;
  -webkit-text-fill-color:#D7E6F7!important;
  opacity:1!important;
}
html body h1,html body h2,html body h3,html body h4,html body h5,html body h6,
html body .page-title,html body .hero-title,html body .section-title,html body .card-title,
html body .bpf-card-title,html body .bpf-today-actions-title,html body .bpf-ai-title,
html body .title,html body strong,html body b{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  opacity:1!important;
}
html body .hl,html body .accent,html body .kicker,html body .eyebrow,html body .sec-label,
html body .bpf-card-kicker,html body .bpf-ai-kicker,html body .bpf-today-actions-kicker{
  color:#38BDF8!important;
  -webkit-text-fill-color:#38BDF8!important;
  opacity:1!important;
}

/* Surface lock: keep panels premium dark, not washed-out white. */
html body .card,html body .panel,html body .module,html body .tile,html body .box,
html body .hero,html body .ask-hero,html body .bpf-today-actions,html body .bpf-advanced-ai-card,
html body .bpf-bridge-card,html body .diet-player,html body .nutrition-panel,
html body [class*="card"],html body [class*="panel"],html body [class*="tile"],html body [class*="module"]{
  background:linear-gradient(145deg,#0B1B33 0%,#08172D 58%,#061226 100%)!important;
  border-color:rgba(56,189,248,.28)!important;
  color:#D7E6F7!important;
  -webkit-text-fill-color:initial!important;
  box-shadow:0 18px 48px rgba(0,0,0,.28)!important;
}
html body .card *,html body .panel *,html body .module *,html body .tile *,html body .box *,
html body .hero *,html body .ask-hero *,html body .bpf-today-actions *,html body .bpf-advanced-ai-card *,
html body .bpf-bridge-card *,html body .diet-player *,html body .nutrition-panel *{
  opacity:1!important;
}

/* THE RULE: blue/dark buttons and chips ALWAYS get white type. */
html body button,
html body button *,
html body a.button, html body a.button *,
html body .button, html body .button *,
html body .btn, html body .btn *,
html body .cta, html body .cta *,
html body .primary, html body .primary *,
html body .secondary, html body .secondary *,
html body .ghost, html body .ghost *,
html body .pill, html body .pill *,
html body .chip, html body .chip *,
html body .tag, html body .tag *,
html body .topic-chip, html body .topic-chip *,
html body .quick-question, html body .quick-question *,
html body .tpill, html body .tpill *,
html body .ask-btn, html body .ask-btn *,
html body .act-btn, html body .act-btn *,
html body .bpf-ai-primary, html body .bpf-ai-primary *,
html body .bpf-ai-secondary, html body .bpf-ai-secondary *,
html body .bpf-today-btn, html body .bpf-today-btn *,
html body .bpf-auto-complete, html body .bpf-auto-complete *,
html body .lead-btn, html body .lead-btn *,
html body [class*="btn"], html body [class*="btn"] *,
html body [class*="button"], html body [class*="button"] *{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  text-shadow:none!important;
  opacity:1!important;
  filter:none!important;
}
html body button:disabled, html body button[disabled], html body .disabled, html body [aria-disabled="true"]{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  opacity:.62!important;
  background:linear-gradient(180deg,#1E3A70 0%,#10284F 100%)!important;
  border-color:rgba(125,211,252,.35)!important;
}
html body button:not(.plain), html body .button, html body .btn, html body .cta,
html body .ask-btn, html body .primary, html body .lead-btn, html body [class*="primary"]{
  background:linear-gradient(180deg,#2F75FF 0%,#2563EB 100%)!important;
  border:1px solid rgba(125,211,252,.58)!important;
}
html body .secondary, html body .ghost, html body .pill, html body .chip, html body .tag,
html body .topic-chip, html body .quick-question, html body .tpill, html body .act-btn{
  background:linear-gradient(180deg,#173A80 0%,#10284F 100%)!important;
  border:1px solid rgba(125,211,252,.45)!important;
}

/* Ask Coach daily cards: white text on blue. */
html body .bpf-today-action,
html body #page-ask .bpf-today-action,
html body .daily-card,
html body .success-step{
  background:linear-gradient(180deg,#2F75FF 0%,#1D4ED8 100%)!important;
  border:1px solid rgba(125,211,252,.58)!important;
  box-shadow:0 14px 32px rgba(37,99,235,.22)!important;
}
html body .bpf-today-action *,
html body #page-ask .bpf-today-action *,
html body .bpf-today-action strong,
html body .bpf-today-action span,
html body .bpf-today-action div,
html body .bpf-today-num,
html body .daily-card *,
html body .success-step *{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  opacity:1!important;
}
html body .bpf-today-num{
  background:rgba(2,8,23,.18)!important;
  border:1px solid rgba(255,255,255,.30)!important;
}

/* Ask Coach shortcut sections stay visible and readable. */
html body #page-ask .sec-label,
html body .sec-label{
  display:block!important;visibility:visible!important;opacity:1!important;height:auto!important;
  margin:18px 0 10px!important;color:#38BDF8!important;-webkit-text-fill-color:#38BDF8!important;
}
html body #topics-row,html body #chips-row,
html body .topics-row,html body .chips{
  display:flex!important;visibility:visible!important;opacity:1!important;height:auto!important;min-height:44px!important;max-height:none!important;
  overflow:visible!important;flex-wrap:wrap!important;gap:10px!important;margin:8px 0 20px!important;padding:0 0 4px!important;
}
html body #topics-row button,html body #chips-row button,
html body .topics-row button,html body .chips button{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:42px!important;padding:10px 16px!important;border-radius:999px!important;
  font-family:'Barlow Condensed',Impact,sans-serif!important;font-weight:900!important;letter-spacing:.05em!important;text-transform:uppercase!important;
  color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important;
}

/* Forms. */
html body input, html body textarea, html body select, html body .form-input, html body .modal-input{
  background:#071426!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  border:1px solid rgba(199,216,234,.55)!important;
  caret-color:#38BDF8!important;
}
html body input::placeholder, html body textarea::placeholder{
  color:#C7D8EA!important;
  -webkit-text-fill-color:#C7D8EA!important;
  opacity:1!important;
}
html body select option{background:#071426!important;color:#FFFFFF!important;}

/* Bottom navigation: readable dark tray, no white washout. */
html body .bot-nav,html body .bottom-nav,html body .bnav,html body .bpf-global-bottom-nav,html body [class*="bottom-nav"]{
  background:rgba(2,8,23,.96)!important;
  border:1px solid rgba(56,189,248,.52)!important;
  box-shadow:0 -14px 34px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.05)!important;
}
html body .bnav-item,html body .bnav-item *,html body .bot-nav button,html body .bot-nav button *,html body .bottom-nav button,html body .bottom-nav button *,html body [class*="bottom-nav"] button,html body [class*="bottom-nav"] button *{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  opacity:1!important;
}
html body .bnav-item.active,html body .bot-nav button.active,html body .bottom-nav button.active,html body .bnav-item[aria-current="page"]{
  background:linear-gradient(180deg,rgba(56,189,248,.20),rgba(37,99,235,.24))!important;
  border:1px solid rgba(56,189,248,.80)!important;
}

/* Free library and other hero sections: no white-on-white cards. */
html body .free-hero,html body .free-workouts-hero,html body .library-hero,html body .bpf-free-hero,
html body .free-card,html body .free-workout-card,html body [class*="library"] [class*="hero"]{
  background:linear-gradient(145deg,#0B1B33 0%,#08172D 58%,#061226 100%)!important;
  border-color:rgba(56,189,248,.30)!important;
}
html body .free-hero *,html body .free-workouts-hero *,html body .library-hero *,html body .bpf-free-hero *,html body .free-card *,html body .free-workout-card *{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  opacity:1!important;
}

/* Diet player/macros. */
html body #prog-label,html body .prog-label,html body .metric-card,html body .metric-card *,html body .meal-source-note,html body .meal-source-note *,html body .weekly-adherence,html body .weekly-adherence *{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  opacity:1!important;
}
html body .meal-card *, html body .meal-name, html body .meal-detail p, html body .meal-portions, html body .meal-note{
  color:#EAF4FF!important;
  -webkit-text-fill-color:#EAF4FF!important;
}

@media(max-width:760px){
  html body .bpf-today-action-grid{grid-template-columns:1fr!important;}
  html body .page, html body .main, html body .shell .main{padding-bottom:108px!important;}
}

/* ======================================================================
   WLF v69 PRESENTATION POLISH  (appended after v68 blue-white lock)
   Keeps the dark navy + blue + white system AND the palette switcher.
   (a) Solid premium card surfaces instead of near-transparent ghosts.
   (b) Protects the intentionally-light device mockups from the global
       light-text lock so their copy stays legible. Component-scoped.
   ====================================================================== */

/* ---- 1) Solid, consistent card surfaces ---------------------------- */
html body .path-card-clean,
html body .path-card,
html body .bento,
html body .hub-card,
html body .feature-card,
html body .guide-promo-card{
  background:linear-gradient(160deg,#0C1E3A 0%,#0A172C 100%)!important;
  border:1px solid rgba(56,189,248,.16)!important;
  border-radius:18px!important;
  box-shadow:0 12px 30px rgba(0,0,0,.34)!important;
}
html body .path-card-clean:hover,
html body .bento:hover,
html body .hub-card:hover,
html body .guide-promo-card:hover{
  border-color:rgba(37,99,235,.55)!important;
  box-shadow:0 18px 40px rgba(37,99,235,.22)!important;
}
html body .path-card-clean.recommended{
  border-color:rgba(37,99,235,.7)!important;
  box-shadow:0 18px 44px rgba(37,99,235,.30)!important;
}
html body .path-card-clean strong,
html body .path-card-clean .path-action{
  color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important;
}
html body .path-card-clean p{ color:#CFE0F5!important;-webkit-text-fill-color:#CFE0F5!important; }
html body .path-card-clean ul,
html body .path-card-clean li{ color:#BBD0E8!important;-webkit-text-fill-color:#BBD0E8!important; }
html body .path-badge{
  background:rgba(37,99,235,.16)!important;
  color:#9CCBFF!important;-webkit-text-fill-color:#9CCBFF!important;
  border:1px solid rgba(56,189,248,.28)!important;
}
html body .path-action{ color:#7FB6FF!important;-webkit-text-fill-color:#7FB6FF!important; }

/* ---- 2) Protect LIGHT device mockups (sales-site hero) ------------- */
html body .deviceStage .device,
html body .deviceStage .phoneBody,
html body .deviceStage .tabletBody,
html body .deviceStage .bar{ background:#FFFFFF!important; }
html body .deviceStage .appCard,
html body .deviceStage .tile,
html body .deviceStage .stat,
html body .deviceStage .metric{ background:#F5F9FF!important;border-color:#E5EEFB!important; }
html body .deviceStage .appCard b,
html body .deviceStage .tile b,
html body .deviceStage .stat,
html body .deviceStage .metric b{ color:#0B1B33!important;-webkit-text-fill-color:#0B1B33!important; }
html body .deviceStage .phoneBody small,
html body .deviceStage .tabletBody small,
html body .deviceStage .appCard p,
html body .deviceStage .metric small,
html body .deviceStage .stat small,
html body .deviceStage .tile small{ color:#33425A!important;-webkit-text-fill-color:#33425A!important; }
html body .deviceStage .bar{ color:#5B6B82!important;-webkit-text-fill-color:#5B6B82!important; }
html body .deviceStage .screenHero,
html body .deviceStage .screenHero *{ color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important; }
html body .deviceStage .screenStats span{ color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important; }

/* ---- 3) Small consistency touches --------------------------------- */
html body .navlinks a{ color:#EAF4FF!important;-webkit-text-fill-color:#EAF4FF!important; }
html body .eyebrow,
html body .path-chooser-title span{ color:#38BDF8!important;-webkit-text-fill-color:#38BDF8!important; }

/* ======================================================================
   WLF v70 SELLER PAGE CLEANUP  (cosmetic only — no markup/logic changes)
   Goals: easier to navigate (anchor offsets, nav feedback, smooth scroll)
   and easier to scan (consistent section rhythm, clear separation,
   comfortable reading width). Seller site is always the blue-white theme.
   ====================================================================== */

/* Smooth in-page navigation + land section headings below the sticky bar */
html{ scroll-behavior:smooth; }
html body section[id]{ scroll-margin-top:96px; }

/* Clear, clickable nav feedback */
html body .navlinks a{ position:relative; transition:color .15s ease; padding:2px 0; }
html body .navlinks a:not(.btn):hover{ color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important; }
html body .navlinks a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2px;
  background:#38BDF8; border-radius:2px; transition:right .18s ease;
}
html body .navlinks a:not(.btn):hover::after{ right:0; }

/* Consistent vertical rhythm so the 13 sections read as distinct blocks */
html body section{ padding:clamp(52px,7vw,88px) 0!important; }
/* Subtle hairline between back-to-back plain sections (bands already separate) */
html body section + section:not(.softBand){ border-top:1px solid rgba(120,160,210,.10); }

/* Comfortable reading measure for intros so they don't sprawl */
html body .sectionLead{ max-width:760px!important; margin-left:auto!important; margin-right:auto!important; line-height:1.6!important; }

/* Tidy, consistent card grids: equal heights + gentle lift on hover */
html body .grid3,
html body .cardGrid,
html body .toolkitGrid{ align-items:stretch!important; }
html body .grid3 > *,
html body .card{ height:100%; }
html body .card{ transition:transform .16s ease, box-shadow .16s ease; }
html body .card:hover{ transform:translateY(-3px); }

/* Make the primary nav CTA stand out as the clear next step */
html body .navlinks a.btn.primary{ box-shadow:0 6px 18px rgba(37,99,235,.35); }
