/* ============================================================
   HealthCompass - shared component layer.
   v2.49.0  (Premium Redesign R2 - PILOT: gut.html + sleep-guide.html)

   WHAT THIS IS
   One design LANGUAGE for the body of every guide: section heads,
   cards, evidence indicators, callouts, tabs, figures, the hero-to-body
   sheet, buttons and the footer. Before this, 25 pages carried 20
   button classes, 12 card classes and 15 corner radii, and the footer
   was copy-pasted into 14 apps.

   WHAT THIS IS NOT
   A template. Mike, 2026-11-09: "Do not sacrifice individual page
   personality." Every component reads the page's own accent through
   three custom properties, set once per page on the root element:

     --pg-acc       the guide's accent (rules, meters, glows)
     --pg-acc-ink   the same hue, dark enough for TEXT on light (>=4.5:1)
     --pg-acc-soft  a pale wash of the hue for tinted surfaces

   Heroes are untouched - each guide keeps its bespoke opening. The
   shared language starts where the reading starts.

   LOAD ORDER
   Must load LAST - after the page's inline <style> and after
   type / hero / sticky.css - so these rules win without !important.
   Dark-mode values are scoped under body.dark in this same file.

   RADII (deliberate, three values only)
     --c-r-1  4px   cards, figures, callouts - crisp, instrument-like
     --c-r-2  10px  buttons, inputs, tabs
     --c-r-3  28px  the body sheet's top corners - the one soft gesture
   ============================================================ */

:root {
  --c-r-1: 4px;
  --c-r-2: 10px;
  --c-r-3: 28px;
  --c-ease: cubic-bezier(.25, 1, .5, 1);
  --c-line: #DCE3EC;
  --c-line-strong: #C3CFDC;
  --c-card: #FFFFFF;
  --c-text: var(--hc-ink-800);
  --c-text-2: #4A5B6E;          /* 6.9:1 on white, 6.1:1 on surface-200 */
  --c-text-3: #5F7084;          /* 5.1:1 on white - captions, meta */
  --c-mono: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --pg-acc: var(--hc-teal);
  --pg-acc-ink: #00756A;
  --pg-acc-soft: #E6F6F4;
}

body.dark {
  --c-line: #22314A;
  --c-line-strong: #2E4060;
  --c-card: #111C2E;
  --c-text: #E6ECF3;
  --c-text-2: #B4C2D3;
  --c-text-3: #95A5B8;
  --hc-ev-strong: #52D6A0;
  --hc-ev-moderate: #82BCF2;
  --hc-ev-preliminary: #EBB352;
  --hc-ev-debated: #FF9494;
}

/* ------------------------------------------------------------------
   1. THE BODY SHEET
   The dark hero used to hard-cut into a flat pale page. The body now
   rises over the hero as one sheet with rounded top corners, so the
   transition reads as a deliberate layer change. A hairline of the
   page accent catches the top edge like light on glass.
   ------------------------------------------------------------------ */
.hc-sheet {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--c-r-3) - 1.25rem);
  background: var(--hc-surface-200);
  border-radius: var(--c-r-3) var(--c-r-3) 0 0;
  box-shadow: 0 -18px 40px -24px rgba(3, 12, 24, .55);
}
.hc-sheet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pg-acc), transparent);
  opacity: .55;
  pointer-events: none;
}
body.dark .hc-sheet {
  background: var(--hc-ink-750);
  box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .8);
}
/* Give the hero back the height the sheet now overlaps. */
.hc-hero-lift { padding-bottom: calc(4.5rem + var(--c-r-3)) !important; }

/* ------------------------------------------------------------------
   2. SECTIONS + SECTION HEADS
   Left-aligned, on the same axis as the E3 heroes. A numbered index in
   the page accent sits in its own gutter on wide screens - the
   structure of a scientific paper, without the paper.
   ------------------------------------------------------------------ */
.hc-sec {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  position: relative;
}
.hc-sec + .hc-sec { border-top: 1px solid var(--c-line); }
/* The first section after a page note does not need a full top band. */
.hc-sec--tight { padding-top: clamp(2rem, 4vw, 3rem); }
.hc-sec--paper { background: var(--c-card); }
.hc-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.hc-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  max-width: 820px;
}
.hc-head-idx {
  font-family: var(--c-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--pg-acc-ink);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.hc-head-idx::after {
  content: "";
  height: 1px;
  width: 2.5rem;
  background: currentColor;
  opacity: .5;
}
.hc-head-idx--ic::after { display: none; }
.hc-head-eye {
  font-family: var(--c-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-top: .9rem;
}
.hc-head-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -.028em;
  color: var(--c-text);
  margin: .35rem 0 0;
  text-wrap: balance;
}
.hc-head-title em { font-style: italic; font-weight: 450; color: var(--pg-acc-ink); }
.hc-head-sub {
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  line-height: 1.7;
  color: var(--c-text-2);
  max-width: 62ch;
  margin: 1rem 0 0;
}
@media (min-width: 1024px) {
  .hc-head {
    grid-template-columns: 5.5rem 1fr;
    column-gap: 0;
    max-width: none;
  }
  .hc-head-idx { grid-row: 1 / span 4; align-self: start; padding-top: 1.05rem; }
  .hc-head-idx::after { width: 1.75rem; }
  .hc-head > :not(.hc-head-idx) { grid-column: 2; max-width: 820px; }
}

/* ------------------------------------------------------------------
   3. EVIDENCE INDICATOR
   The Methodology page's three tiers, as a three-bar signal meter plus
   the tier's own words. The bars are aria-hidden - the label always
   carries the meaning, so nothing is conveyed by shape or colour alone.
   ------------------------------------------------------------------ */
.hc-ev {
  --ev: var(--c-text-3);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--c-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ev);
  white-space: nowrap;
  line-height: 1;
}
.hc-ev[data-tier="strong"] { --ev: var(--hc-ev-strong); }
.hc-ev[data-tier="moderate"] { --ev: var(--hc-ev-moderate); }
.hc-ev[data-tier="preliminary"] { --ev: var(--hc-ev-preliminary); }
.hc-ev[data-tier="debated"] { --ev: var(--hc-ev-debated); }
.hc-ev-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.hc-ev-bars i {
  display: block;
  width: 3px;
  border-radius: 1px;
  background: currentColor;
  opacity: .2;
}
.hc-ev-bars i:nth-child(1) { height: 5px; }
.hc-ev-bars i:nth-child(2) { height: 8.5px; }
.hc-ev-bars i:nth-child(3) { height: 12px; }
.hc-ev-bars i.on { opacity: 1; }
/* "Debated" is a status, not a strength: a split disc, never bars. */
.hc-ev-split {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  flex-shrink: 0;
}

/* ------------------------------------------------------------------
   4. CARDS
   Crisp 4px corners, hairline border, a left accent rule that extends
   on hover. The whole card is the control when it opens something.
   ------------------------------------------------------------------ */
/* Hairlines are drawn by each cell (right + bottom edge), not by a gap
   showing the container's background - so an incomplete last row ends in
   clean blank space instead of a grey block. */
.hc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 0;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-1);
  overflow: hidden;
}
.hc-grid > * { box-shadow: 1px 0 0 var(--c-line), 0 1px 0 var(--c-line); }
.hc-card {
  --card-acc: var(--pg-acc);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  text-align: left;
  font: inherit;
  color: var(--c-text);
  background: var(--c-card);
  border: 0;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  min-height: 100%;
  transition: background-color .35s var(--c-ease);
}
.hc-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--card-acc);
  transform: scaleY(.28);
  transform-origin: top;
  transition: transform .5s var(--c-ease);
}
button.hc-card, a.hc-card { cursor: pointer; text-decoration: none; }
button.hc-card:hover::before, a.hc-card:hover::before,
button.hc-card:focus-visible::before, a.hc-card:focus-visible::before { transform: scaleY(1); }
button.hc-card:hover, a.hc-card:hover { background: color-mix(in srgb, var(--card-acc) 4%, var(--c-card)); }
.hc-card:focus-visible { outline: 3px solid var(--hc-ink-800); outline-offset: -3px; z-index: 1; }
body.dark .hc-card:focus-visible { outline-color: var(--hc-teal-light); }

.hc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 24px;
}
.hc-card-idx {
  font-family: var(--c-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}
.hc-card-ic {
  color: var(--card-acc);
  display: inline-flex;
}
.hc-card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.32rem;
  font-weight: 620;
  line-height: 1.18;
  letter-spacing: -.012em;
  margin: 0;
  color: var(--c-text);
}
.hc-card-tag {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--c-text-2);
  margin: 0;
}
.hc-card-body {
  font-size: .92rem;
  line-height: 1.68;
  color: var(--c-text-2);
  margin: 0;
}
.hc-card-foot {
  margin-top: auto;
  padding-top: .9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--c-line);
}
.hc-card-go {
  font-family: var(--c-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pg-acc-ink);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.hc-card-go::after {
  content: "\2192";
  transition: transform .35s var(--c-ease);
}
button.hc-card:hover .hc-card-go::after, a.hc-card:hover .hc-card-go::after { transform: translateX(4px); }

/* Lead card - earns a 2x2 cell with real substance (an excerpt), not
   by being the same card at a larger size. Only from 860px, where a
   2x2 cell exists. */
@media (min-width: 860px) {
  .hc-grid--bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hc-grid--bento > .hc-card--lead { grid-column: span 2; grid-row: span 2; }
  .hc-card--lead .hc-card-title { font-size: clamp(1.7rem, 2.6vw, 2.25rem); line-height: 1.08; }
  .hc-card--lead .hc-card-tag { font-size: 1.02rem; }
  .hc-card--lead .hc-card-body { font-size: 1rem; max-width: 52ch; }
  .hc-card--lead {
    background:
      radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--card-acc) 9%, transparent), transparent 60%),
      var(--c-card);
  }
}

/* Row cards - a ranked list where order carries meaning. */
.hc-rows { display: grid; gap: .75rem; }
.hc-row {
  --card-acc: var(--pg-acc);
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 1.1rem;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-1);
  padding: 1.4rem 1.5rem 1.4rem 1.25rem;
}
.hc-row-rank {
  font-family: var(--c-mono);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--card-acc);
  font-variant-numeric: tabular-nums;
  padding-top: .2rem;
}
.hc-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-bottom: .45rem;
}
.hc-row-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.18rem;
  font-weight: 620;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--c-text);
}
.hc-row p { margin: 0; font-size: .92rem; line-height: 1.68; color: var(--c-text-2); }
.hc-row p + p { margin-top: .55rem; }
.hc-row strong { color: var(--c-text); font-weight: 600; }
@media (max-width: 560px) {
  .hc-row { grid-template-columns: 1fr; gap: .5rem; padding: 1.2rem; }
  .hc-row-rank { font-size: 1.1rem; }
}

/* ------------------------------------------------------------------
   5. CALLOUTS - one component, three jobs
     --info    the "education, not medical advice" note
     --honest  the honest take / caveat
     --warn    red flags: when to see a doctor
   ------------------------------------------------------------------ */
.hc-callout {
  --co: var(--c-text-3);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  align-items: start;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--co);
  border-radius: var(--c-r-1);
  padding: 1rem 1.25rem;
  color: var(--c-text-2);
  font-size: .9rem;
  line-height: 1.65;
}
.hc-callout > .hci { color: var(--co); margin-top: .1rem; flex-shrink: 0; }
.hc-callout p { margin: 0; }
.hc-callout strong { color: var(--c-text); font-weight: 600; }
.hc-callout--info { --co: var(--hc-slate-500); }
.hc-callout--honest { --co: var(--pg-acc); background: color-mix(in srgb, var(--pg-acc) 5%, var(--c-card)); }
.hc-callout--warn { --co: #B3383C; }
body.dark .hc-callout--info { --co: var(--hc-slate-400); }
body.dark .hc-callout--warn { --co: #FF8A8A; }

/* The red-flag band: always visible, never inside a tab. */
.hc-flags {
  background: #FFF6F3;
  border-top: 1px solid #F2D9CF;
  border-bottom: 1px solid #F2D9CF;
}
.hc-flags .hc-head-idx { color: #9B2D30; }
.hc-flags .hc-head-title { color: #7A1F22; }
.hc-flags .hc-head-sub { color: #6B3A30; }
.hc-flag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: .75rem 2rem;
}
.hc-flag-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .75rem;
  align-items: start;
  font-size: .95rem;
  line-height: 1.55;
  color: #4E2A22;
  padding: .7rem 0;
  border-bottom: 1px solid #F2D9CF;
}
.hc-flag-list .hci { color: #B3383C; margin-top: .05rem; }
.hc-flag-note {
  margin: 1.5rem 0 0;
  font-size: .86rem;
  color: #7D4A3E;
  line-height: 1.6;
  max-width: 70ch;
}
body.dark .hc-flags { background: #1A1216; border-color: #3A2328; }
body.dark .hc-flags .hc-head-idx { color: #FF9C9C; }
body.dark .hc-flags .hc-head-title { color: #FFD9D6; }
body.dark .hc-flags .hc-head-sub,
body.dark .hc-flag-note { color: #E3B9B2; }
body.dark .hc-flag-list li { color: #F2D6D0; border-color: #3A2328; }
body.dark .hc-flag-list .hci { color: #FF8A8A; }

/* ------------------------------------------------------------------
   6. TABS - an underline rail with a sliding accent bar.
   Sits inside the page's existing sticky wrapper so sticky.css offsets
   still apply. Scrolls horizontally on phones rather than wrapping.
   ------------------------------------------------------------------ */
.hc-tabs {
  display: flex;
  gap: .25rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.hc-tabs::-webkit-scrollbar { display: none; }
/* On narrow screens the rail scrolls; a soft fade at the edge says so. */
@media (max-width: 640px) {
  .hc-tabs {
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
    padding-right: 2.5rem;
  }
}
.hc-tab {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 52px;
  padding: 0 1rem;
  border: 0;
  background: none;
  font: 600 .92rem/1 'Inter', system-ui, sans-serif;
  color: var(--c-text-3);
  cursor: pointer;
  transition: color .25s var(--c-ease);
}
.hc-tab .hci { opacity: .7; transition: opacity .25s var(--c-ease); }
.hc-tab::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--pg-acc);
  transform: scaleX(0);
  transition: transform .45s var(--c-ease);
}
.hc-tab:hover { color: var(--c-text); }
.hc-tab[aria-selected="true"] { color: var(--c-text); }
.hc-tab[aria-selected="true"] .hci { opacity: 1; color: var(--pg-acc-ink); }
.hc-tab[aria-selected="true"]::after { transform: scaleX(1); }
.hc-tab:focus-visible { outline: 3px solid var(--hc-ink-800); outline-offset: -6px; border-radius: var(--c-r-2); }
body.dark .hc-tab:focus-visible { outline-color: var(--hc-teal-light); }
.hc-tabbar {
  background: color-mix(in srgb, var(--hc-surface-200) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--c-line);
  border-radius: var(--c-r-3) var(--c-r-3) 0 0;
}
.hc-tabbar.is-stuck { border-radius: 0; }
body.dark .hc-tabbar { background: color-mix(in srgb, var(--hc-ink-750) 88%, transparent); }

/* ------------------------------------------------------------------
   7. FIGURES - every chart sits in the same frame: a title, the plot,
   and a caption that says what it is built from and where it stops.
   ------------------------------------------------------------------ */
.hc-figure {
  margin: 0;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-1);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.hc-figure-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-bottom: 1.5rem;
}
.hc-figure-kicker {
  font-family: var(--c-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pg-acc-ink);
}
.hc-figure-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 620;
  letter-spacing: -.015em;
  line-height: 1.2;
  margin: .3rem 0 0;
  color: var(--c-text);
}
.hc-figure figcaption {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-line);
  font-size: .82rem;
  line-height: 1.6;
  color: var(--c-text-3);
  max-width: 82ch;
}
.hc-figure figcaption strong { color: var(--c-text-2); font-weight: 600; }
.hc-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Evidence map - a page's own items placed on the Methodology tiers. */
.hc-evmap-how {
  font-family: var(--c-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pg-acc-ink);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.hc-evmap-how::after { content: "\2192"; }
.hc-evmap-how:hover { text-decoration: underline; text-underline-offset: 4px; }
.hc-evmap-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--c-line-strong);
}
.hc-evmap-col {
  position: relative;
  padding: 1.5rem 1.5rem 1.25rem;
  border-left: 1px solid var(--c-line);
}
.hc-evmap-col:first-child { border-left: 0; padding-left: 0; }
.hc-evmap-col:last-child { padding-right: 0; }
/* The strength axis: a rule along the top that thickens left to right. */
.hc-evmap-col::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  background: var(--ev-c);
}
.hc-evmap-col[data-tier="preliminary"] { --ev-c: var(--hc-ev-preliminary); }
.hc-evmap-col[data-tier="moderate"]    { --ev-c: var(--hc-ev-moderate); }
.hc-evmap-col[data-tier="strong"]      { --ev-c: var(--hc-ev-strong); }
.hc-evmap-col[data-tier="preliminary"]::before { height: 2px; }
.hc-evmap-col[data-tier="moderate"]::before    { height: 4px; }
.hc-evmap-col[data-tier="strong"]::before      { height: 6px; }
.hc-evmap-colhead { min-height: 7.5rem; }
.hc-evmap-def {
  margin: .8rem 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--c-text-3);
}
.hc-evmap-group { margin-top: 1.1rem; display: grid; gap: .4rem; justify-items: start; }
.hc-evmap-kind {
  font-family: var(--c-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: .15rem;
}
.hc-evmap-item {
  --card-acc: var(--ev-c);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .45rem .85rem .45rem .7rem;
  font: 500 .92rem/1.3 'Inter', system-ui, sans-serif;
  text-align: left;
  color: var(--c-text);
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-1);
  cursor: pointer;
  transition: border-color .25s var(--c-ease), transform .3s var(--c-ease), background-color .25s var(--c-ease);
}
.hc-evmap-item::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--card-acc);
  flex-shrink: 0;
}
.hc-evmap-item--lever::before { border-radius: 1px; transform: rotate(45deg); background: var(--ev-c); }
.hc-evmap-item:hover { border-color: var(--ev-c); transform: translateX(3px); }
.hc-evmap-item:focus-visible { outline: 3px solid var(--hc-ink-800); outline-offset: 2px; }
body.dark .hc-evmap-item:focus-visible { outline-color: var(--hc-teal-light); }
.hc-evmap-empty { font-size: .85rem; color: var(--c-text-3); font-style: italic; margin: 1.1rem 0 0; }
@media (max-width: 960px) {
  .hc-evmap-cols { grid-template-columns: 1fr; border-top: 0; }
  /* Phones read strongest first. */
  .hc-evmap-col[data-tier="strong"] { order: 1; }
  .hc-evmap-col[data-tier="moderate"] { order: 2; }
  .hc-evmap-col[data-tier="preliminary"] { order: 3; }
  .hc-evmap-col,
  .hc-evmap-col:first-child,
  .hc-evmap-col:last-child { border-left: 0; padding: 1.4rem 0 1.25rem; border-top: 1px solid var(--c-line); }
  .hc-evmap-colhead { min-height: 0; }
}

/* Graded claims - a myth, its verdict, the truth. The verdict is the
   page's own grading scale (myth / half-truth / ...), NOT an evidence
   tier, so it is styled as a stamp, never as a meter. */
.hc-claims { display: grid; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--c-r-1); overflow: hidden; }
.hc-claim { background: var(--c-card); padding: clamp(1.3rem, 2.6vw, 1.9rem); display: grid; gap: .9rem; }
@media (min-width: 900px) {
  .hc-claim { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.5rem; align-items: start; }
}
.hc-claim-head { display: grid; gap: .75rem; justify-items: start; }
.hc-claim-v {
  --v: var(--c-text-3);
  font-family: var(--c-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v);
  border: 1.5px solid currentColor;
  border-radius: 3px;
  padding: .32rem .55rem;
  line-height: 1;
}
.hc-claim[data-verdict="myth"] .hc-claim-v        { --v: #B3383C; }
.hc-claim[data-verdict="mostly-myth"] .hc-claim-v { --v: #9A5A06; }
.hc-claim[data-verdict="half-truth"] .hc-claim-v  { --v: #2C6FA6; }
.hc-claim[data-verdict="mostly-true"] .hc-claim-v { --v: #0B7A55; }
.hc-claim[data-verdict="exaggerated"] .hc-claim-v { --v: #9A5A06; }  /* v2.53.0: longevity + water */
body.dark .hc-claim[data-verdict="myth"] .hc-claim-v        { --v: #FF9494; }
body.dark .hc-claim[data-verdict="mostly-myth"] .hc-claim-v { --v: #EBB352; }
body.dark .hc-claim[data-verdict="half-truth"] .hc-claim-v  { --v: #82BCF2; }
body.dark .hc-claim[data-verdict="mostly-true"] .hc-claim-v { --v: #52D6A0; }
body.dark .hc-claim[data-verdict="exaggerated"] .hc-claim-v { --v: #EBB352; }
.hc-claim-q {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.12rem, 1.8vw, 1.3rem);
  font-style: italic;
  font-weight: 450;
  line-height: 1.38;
  color: var(--c-text);
}
.hc-claim-t { margin: 0; font-size: .94rem; line-height: 1.7; color: var(--c-text-2); }

/* List semantics without list chrome. */
ol.hc-rows, ul.hc-grid, ul.hc-flag-list { list-style: none; margin: 0; padding: 0; }

/* ------------------------------------------------------------------
   8. BUTTONS
   ------------------------------------------------------------------ */
.hc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: var(--c-r-2);
  border: 1px solid transparent;
  font: 600 .92rem/1 'Inter', system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .25s var(--c-ease), border-color .25s var(--c-ease),
              color .25s var(--c-ease), transform .25s var(--c-ease);
}
.hc-btn:active { transform: translateY(1px); }
.hc-btn--primary { background: var(--hc-teal-btn); color: #fff; }
.hc-btn--primary:hover { background: var(--hc-teal-btn-hover); }
.hc-btn--ghost { background: transparent; border-color: var(--c-line-strong); color: var(--c-text); }
.hc-btn--ghost:hover { border-color: var(--c-text-3); }
.hc-btn:focus-visible { outline: 3px solid var(--hc-ink-800); outline-offset: 2px; }
body.dark .hc-btn:focus-visible { outline-color: var(--hc-teal-light); }
.hc-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* ------------------------------------------------------------------
   9. FOOTER (js/footer.js renders it - one markup for every page)
   ------------------------------------------------------------------ */
.hc-next { background: var(--hc-ink-900); color: #E6ECF3; padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 3.5rem); }
.hc-next-label {
  font-family: var(--c-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9FB0C3;
  margin: 0 0 1.25rem;
}
/* Never an orphan or a blank cell, for 4, 5 or 6 related guides (R4):
   phone 1 column; tablet 2 with an odd last link spanning the row; desktop
   one row for up to 5, and 3 x 2 for 6 (:has; without it, one row of 6). */
.hc-next-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--c-r-1);
  overflow: hidden;
}
@media (min-width: 560px) {
  .hc-next-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-next-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .hc-next-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .hc-next-grid > :last-child:nth-child(odd) { grid-column: auto; }
  .hc-next-grid:has(> :nth-child(6)) { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* v2.60.0: eight related links (stress) = 4 x 2 */
  .hc-next-grid:has(> :nth-child(8)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hc-next-link {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 64px;
  padding: 1rem 1.15rem;
  background: var(--hc-ink-900);
  color: #E6ECF3;
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  transition: background-color .3s var(--c-ease);
}
.hc-next-link .hci { color: var(--lk, var(--hc-teal-light)); flex-shrink: 0; }
.hc-next-link::after {
  content: "\2192";
  margin-left: auto;
  color: #6F8094;
  transition: transform .35s var(--c-ease), color .35s var(--c-ease);
}
.hc-next-link:hover { background: #0C1A30; }
.hc-next-link:hover::after { transform: translateX(4px); color: #E6ECF3; }
.hc-next-link:focus-visible { outline: 3px solid var(--hc-teal-light); outline-offset: -3px; }
.hc-next-link small { display: block; font-weight: 400; font-size: .78rem; color: #9FB0C3; margin-top: .2rem; }

.hc-foot { background: var(--hc-ink-950); color: #9FB0C3; padding: 2.5rem 0 3rem; font-size: .84rem; }
.hc-foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.hc-foot-brand { display: inline-flex; align-items: baseline; gap: .75rem; min-height: 44px; padding-top: .7rem; color: #fff; text-decoration: none; }
.hc-foot-brand b { font-family: 'Fraunces', Georgia, serif; font-size: 1.2rem; font-weight: 650; letter-spacing: -.01em; }
.hc-foot-brand span { font-family: var(--c-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: #8FA0B4; }
.hc-foot-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.hc-foot-nav a {
  color: #C9D5E2;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.hc-foot-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.hc-foot-nav a:focus-visible, .hc-foot-brand:focus-visible { outline: 3px solid var(--hc-teal-light); outline-offset: 2px; border-radius: 2px; }
.hc-foot-note { margin: 1.5rem 0 0; max-width: 92ch; line-height: 1.7; color: #A9B7C7; }
.hc-foot-note + .hc-foot-note { margin-top: .75rem; }

/* ------------------------------------------------------------------
   10. MOTION - entrance on scroll, pure CSS, zero JS.
   Authored visible-by-default: where scroll timelines are unsupported,
   or motion is reduced, everything is simply there.
   ------------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hc-rise {
      animation: hc-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes hc-rise {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: none; }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hc-card::before, .hc-tab::after, .hc-card-go::after, .hc-next-link::after { transition: none; }
}


/* ------------------------------------------------------------------
   11. CONSOLIDATED IN R4 (v2.52.0) - patterns the rollout created on
   two or more pages, moved here from page <style> blocks (section 8).
   ------------------------------------------------------------------ */

/* Grids that never strand a last card: the final cell stretches to
   fill its row. --fill3 = 1 / 2 / 3 columns (640 / 1000), --fill4 =
   1 / 2 / 4 columns (600 / 1100). */
/* Columns are minmax(0, 1fr), not 1fr: a plain 1fr track will not shrink
   below its widest child's min-content, so one nowrap row (emoji + tag +
   badge) forced a 354px column and pushed the last column off the grid
   (found on supplements/food in R5, latent on every R4 page). v2.53.0 */
.hc-grid.hc-grid--fill3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .hc-grid.hc-grid--fill3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-grid--fill3 > :last-child:nth-child(2n+1) { grid-column: span 2; }
}
@media (min-width: 1000px) {
  .hc-grid.hc-grid--fill3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hc-grid--fill3 > :last-child:nth-child(2n+1) { grid-column: auto; }
  .hc-grid--fill3 > :last-child:nth-child(3n+1) { grid-column: span 3; }
  .hc-grid--fill3 > :last-child:nth-child(3n+2) { grid-column: span 2; }
}
.hc-grid.hc-grid--fill4 { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .hc-grid.hc-grid--fill4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-grid--fill4 > :last-child:nth-child(2n+1) { grid-column: span 2; }
}
@media (min-width: 1100px) {
  .hc-grid.hc-grid--fill4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hc-grid--fill4 > :last-child:nth-child(2n+1) { grid-column: auto; }
  .hc-grid--fill4 > :last-child:nth-child(4n+1) { grid-column: span 4; }
  .hc-grid--fill4 > :last-child:nth-child(4n+2) { grid-column: span 3; }
  .hc-grid--fill4 > :last-child:nth-child(4n+3) { grid-column: span 2; }
}

/* Detail-drawer parts shared by the guide apps: a header on the item's
   own colour shows its tier in white; body callouts space evenly; the
   footer button spans the drawer. */
.hc-on-color .hc-ev { --ev: #fff; }
.hc-on-color .hc-ev-bars i { background: #fff; }
.hc-on-color .hc-ev-split { border-color: #fff; background: linear-gradient(90deg, #fff 50%, transparent 50%); }
.hc-panel-body .hc-callout { margin-top: 1.25rem; }
.hc-panel-foot .hc-btn { width: 100%; }

/* Static deep-dive template (thyroid, joint - the rest join in R7):
   reading column, sticky section index with scrollspy, honest-limit rows. */
.hc-dd-main{max-width:820px}
.hc-dd-nav{top:calc(var(--hc-nav-h,60px) + 1.5rem);max-height:calc(100vh - var(--hc-nav-h,60px) - 3rem);overflow-y:auto;border-left:1px solid var(--c-line);padding-left:0;gap:0}
.hc-dd-nav-h{font:600 .68rem/1 var(--c-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--c-text-3);padding:0 0 .9rem 1rem;margin:0}
.hc-dd-nav-link{display:flex;align-items:center;min-height:44px;padding:0 .6rem 0 1rem;margin-left:-1px;border-left:2px solid transparent;border-radius:0;color:var(--c-text-3);font-size:.86rem;line-height:1.3;text-decoration:none;transition:color .25s var(--c-ease),border-color .25s var(--c-ease)}
.hc-dd-nav-link:hover{color:var(--c-text);background:none}
.hc-dd-nav a.hc-dd-nav-link,.hc-dd-nav a.hc-dd-nav-link:hover{background:none}
.hc-dd-nav a.hc-dd-nav-link.on{border-left-color:var(--pg-acc);color:var(--c-text);font-weight:600;background:none}
.hc-dd-nav-link:focus-visible{outline:3px solid var(--hc-ink-800);outline-offset:-3px}
body.dark .hc-dd-nav-link:focus-visible{outline-color:var(--hc-teal-light)}
body.dark .hc-dd-nav a.hc-dd-nav-link,body.dark .hc-dd-nav a.hc-dd-nav-link:hover{background:none !important}
body.dark .hc-dd-nav a.hc-dd-nav-link.on{border-left-color:var(--pg-acc);color:var(--c-text) !important;background:none !important}
.hc-dd-main .hc-head{grid-template-columns:1fr;max-width:none;margin-bottom:1.5rem}
.hc-dd-main .hc-head>*{grid-column:auto;max-width:none}
.hc-dd-main .hc-head-idx{grid-row:auto;padding-top:0}
.hc-dd-main .hc-head-title{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.hc-dd-main .hc-callout{margin:1.6rem 0;font-size:.95rem}
.hc-callout>.hc-co-ic{color:var(--co);display:inline-flex;margin-top:.12rem}
.hc-dd-main .hc-callout--warn{background:#FFF5F2;border-color:#F2D9CF;border-left-color:#B3383C}
body.dark .hc-dd-main .hc-callout--warn{background:#1C1316;border-color:#3A2328;border-left-color:#FF8A8A}
.hc-dd-main .hc-claims{margin:1.25rem 0}
@media (min-width:900px){.hc-dd-main .hc-claim{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:2rem}}
.hc-limits{border-top:1px solid var(--c-line-strong);margin:1.25rem 0}
.hc-limit{display:grid;gap:.4rem;padding:1.15rem 0;border-bottom:1px solid var(--c-line)}
@media (min-width:900px){.hc-limit{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:2rem}}
.hc-limit h3{font-family:'Fraunces',Georgia,serif;font-size:1.06rem;font-weight:620;line-height:1.3;margin:0;color:var(--c-text)}
.hc-limit p{margin:0;font-size:.94rem;line-height:1.68;color:var(--c-text-2)}

/* ------------------------------------------------------------------
   12. SEARCH + FILTER CHIPS (v2.53.0 - promoted from supplements + food)
   A search field with a leading geometric mark, and a horizontally
   scrolling row of filter chips with aria-pressed. A chip's colour dot
   reads --dot (set inline per chip); pressed chips take a whisper of it.
   ------------------------------------------------------------------ */
.hc-search { position: relative; margin-bottom: .7rem; }
.hc-search-ic { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--c-text-3); display: inline-flex; pointer-events: none; }
.hc-search input { width: 100%; min-height: 48px; padding: .7rem 1rem .7rem 2.6rem; border: 1px solid var(--c-line-strong); border-radius: var(--c-r-2); background: var(--c-card); color: var(--c-text); font: 500 .95rem/1.3 'Inter', system-ui, sans-serif; box-shadow: none; }
.hc-search input::placeholder { color: var(--c-text-3); }
.hc-search input:focus-visible { outline: 3px solid var(--hc-ink-800); outline-offset: 1px; }
body.dark .hc-search input:focus-visible { outline-color: var(--hc-teal-light); }
.hc-filters { display: flex; align-items: center; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; }
.hc-filters::-webkit-scrollbar { display: none; }
.hc-filter { flex-shrink: 0; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--c-line); border-radius: var(--c-r-2); background: var(--c-card); color: var(--c-text-2); font: 600 .82rem/1 'Inter', system-ui, sans-serif; cursor: pointer; transition: border-color .25s var(--c-ease), background-color .25s var(--c-ease); }
.hc-filter i { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.hc-filter span { font-family: var(--c-mono); color: var(--c-text-3); font-weight: 600; }
.hc-filter:hover { border-color: var(--c-line-strong); }
.hc-filter[aria-pressed="true"] { border-color: var(--c-text); color: var(--c-text); background: color-mix(in srgb, var(--dot, var(--pg-acc)) 8%, var(--c-card)); }
.hc-filter:focus-visible { outline: 3px solid var(--hc-ink-800); outline-offset: 2px; }
body.dark .hc-filter:focus-visible { outline-color: var(--hc-teal-light); }
@media (max-width: 640px) {
  .hc-filters { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 2rem; }
}