/* Small blocking sheet: design tokens, margin reset, and body type.
   The full styles.css loads after first paint. Keep these rules in sync
   with the top of styles.css so the late sheet does not move the page. */
/* ── Design system tokens ── */
:root {
  /* Surface + text — warm paper palette, gentler than pure white.

     NAMING (2026-05-22 cleanup): the canonical names are now
       --color-surface  → the lighter cream (#f6f2ea) used on cards,
                          popovers, hovers, search inputs, any element
                          that should sit "above" the page.
       --color-page     → the darker cream (#ebe5d9) used on <body> as
                          the actual page background.

     The old `--color-background-primary` / `--color-background-secondary`
     names are misleading: "primary" is actually the elevated surface, and
     the page bg comes from "secondary". They're kept as aliases below so
     existing rules keep working unchanged; new code should use the new
     names. Bulk migration of existing references is intentionally
     deferred — risk-free incremental adoption. */
  --color-surface: #f6f2ea;
  --color-page: #ebe5d9;
  /* 2026-05-23 — Dedicated card-surface token. Sits between --color-surface
     (near-white #f6f2ea) and --color-page (cream #ebe5d9) — leaning closer
     to surface for a brighter, more luminous tint while still reading as a
     defined surface against the page. Used by .sc / .sr-card / .article-card.
     History: started at #f1ecdf (true 50% midpoint); brightened one notch
     to #f4efe6 per user feedback. */
  --color-card: #f4efe6;
  /* Deprecated aliases — keep until references are migrated. */
  --color-background-primary: var(--color-surface);
  --color-background-secondary: var(--color-page);
  --color-text-primary: #0c0a09;
  --color-text-secondary: #57534e;
  --color-text-tertiary: #6b6560; /* was #a8a29e — failed contrast on the cream page */
  --color-border-primary: #78716c;
  --color-border-secondary: #d6d3d1;
  --color-border-tertiary: #dcdad7;
  /* Brand (single source of truth) — Direction C: warm green-teal */
  --color-brand: #1F7A6B;
  --color-brand-hover: #176258;
  --color-brand-soft: #7CC4B6;
  --color-brand-deep: #155A50;  /* Round-11: was referenced via var(--color-brand-deep,#155A50) in .b-why-chip/.b-cta but never defined; now tokenized (same value, no visual change). */
  /* Accent — soft coral, used sparingly for warmth */
  --color-accent-coral: #E8967A;
  --color-accent-coral-soft: #F5C9B8;
  /* Tier palette — gently desaturated for the Approachable Health Reference voice */
  --t1c:#1F8A7A;--t1bg:#E6F4F1;--t1tx:#0F4A41;
  --t2c:#5A7BC4;--t2bg:#ECF0F7;--t2tx:#2D3F6E;
  --t3c:#C2872B;--t3bg:#FBF1DE;--t3tx:#6B4716;
  --t4c:#B85046;--t4bg:#FAE8E5;--t4tx:#6B231D;
  /* Quick Reads — warm slate-taupe; neutral against the cream BG and
     distinct from the four evidence-tier chromatic colors above. */
  --t5c:#6B6256;--t5bg:#EFE9DD;--t5tx:#3F3A33;
  --slp:#5E59B2;--slpbg:#EDECF7;--slptx:#26215C;
  /* Warning / medical-alert */
  --color-warn-bg: #FBF1DE;
  --color-warn-border: #E5C66B;
  --color-warn-text: #6B4716;
  --color-warn-text-strong: #4A3010;
  /* Focus ring */
  --focus-ring: 0 0 0 2px rgba(31,122,107,.45);
  /* Z-index scale */
  --z-sticky: 40;
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-toast: 2000;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
/* scrollbar-gutter:stable reserves space for the vertical scrollbar even on
   pages whose content fits in the viewport. Without this, navigating between
   a tall page (Articles, Index) and a shorter page (Discover) makes the
   scrollbar appear/disappear, shifting content horizontally by ~15px and
   producing a "slight shift" on cross-page navigation. */
.ss-last-reviewed{font-size:12.5px;color:var(--color-text-tertiary);margin:0 0 12px}
.ss-last-reviewed a{color:inherit}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
  background:var(--color-background-secondary);
  color:var(--color-text-primary);
  min-height:100vh;
  padding:0 1rem 4rem;
  -webkit-font-smoothing:antialiased;
}
input,button{font-family:inherit}

/* Homepage first paint. These match the mobile rules in styles.css and
   index.css so the late sheets do not move the headline or the banner.
   The directory reserves vertical space so the guide list below it is
   already under the fold when the supplement cards render. */
.legacy-trust-hero{display:none !important}
.beta-bar{
  background:var(--color-page);color:var(--color-brand);
  display:flex;align-items:center;justify-content:center;
  gap:8px;height:32px;margin:20px -1rem 0;padding:0 1rem;
  width:calc(100% + 2rem);box-sizing:border-box;
  font-size:9px;font-weight:500;line-height:1;
}
.beta-bar-stats{display:inline-flex;align-items:center;gap:8px}
.beta-bar-stat{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-brand);white-space:nowrap}
.beta-bar-stat-sep{font-size:10px;font-weight:400;opacity:.35;color:var(--color-brand)}
.beta-bar-pulse{width:7px;height:7px;border-radius:50%;background:var(--color-brand);flex:0 0 auto}
.beta-bar-search{display:none}
.ix-hero{max-width:1180px;margin:0 auto;padding:56px 24px 40px;text-align:center;position:relative}
.ix-hero h1{font-size:64px;font-weight:700;letter-spacing:-1.8px;line-height:1.04;margin:0 auto 18px;max-width:22ch;color:var(--color-text-primary)}
.ix-hero p.lede{font-size:17px;color:var(--color-text-secondary);max-width:56ch;margin:0 auto 28px;line-height:1.55}
.ix-search{max-width:480px;margin:0 auto 32px;position:relative}
.ix-search input{width:100%;padding:12px 20px 12px 44px;font-family:inherit;font-size:14px;background:var(--color-surface);border:1.5px solid var(--color-border-secondary);color:var(--color-text-primary);border-radius:999px;box-sizing:border-box}
.ix-search .ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:16px;height:16px;pointer-events:none}
.ix-hero-bg{display:none !important}
/* Slides are taken out of flow here, in the blocking sheet. Until this
   rule exists they stack at full height, then the late stylesheet
   collapses them and the card below jumps. */
#hero{position:relative;border-radius:18px;overflow:hidden;height:340px;min-height:340px;background:linear-gradient(90deg,#3A8276 0%,#4DA095 100%);color:#F8F4ED}
#hero .hero-slide,#hero .hero-pattern-bg,#hero .hero-controls,#hero .hero-counter,#hero .hero-progress{position:absolute}
#hero .hero-pattern-bg{inset:0}
#hero .hero-slide{inset:36px 36px 92px 36px;opacity:0;z-index:3}
#hero .hero-slide.active{opacity:1}
#hero .hero-controls{right:30px;bottom:28px;z-index:5;display:flex;align-items:center;gap:10px}
#hero .hero-counter{top:44px;right:32px;z-index:4}
#hero .hero-progress{left:0;right:0;bottom:0;height:3px}
#main-ui{min-height:calc(100svh - 240px)}
@media(max-width:600px){
  .beta-bar{position:fixed;top:0;left:0;right:0;width:100%;margin:0;height:calc(22px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0;font-size:10px;gap:4px;z-index:31}
  .beta-bar-pulse{display:none}
  .beta-bar-stat,.beta-bar-stat-sep{font-size:8.5px;letter-spacing:.04em}
  html.tab-supplements body,body.tab-supplements{padding-top:30px !important}
  .ix-hero{padding:32px 16px 24px}
  .ix-hero h1{font-size:40px;line-height:1.05;letter-spacing:-1.1px;margin:0 auto 8px;max-width:none}
  .ix-hero p.lede,.ix-hero .lede{font-size:12px;margin:0 auto 10px;max-width:360px;line-height:1.45}
  .ix-hero .ix-search{position:sticky;top:22px;z-index:55;margin:0 auto}
  .ix-hero .ix-search input{font-size:13px;padding:9px 16px 9px 38px}
  #hero{height:200px !important;min-height:200px !important;max-height:200px !important;margin:8px 0 4px;padding:14px 16px 12px;border-radius:14px;overflow:hidden !important}
  #hero .hero-slide{inset:14px 14px 56px 14px}
}