:root {
  --bg: #0f1419;
  --panel: #1a2028;
  --panel-2: #232b36;
  --ink: #e6edf3;
  --muted: #8b96a3;
  --accent: #f9a8d4;
  --accent-2: #fca5a5;
  --good: #86efac;
  --warn: #fcd34d;
  --bad: #fca5a5;
  --line: #2d3744;
}
* { box-sizing: border-box; }
/* Hidden visually but available to search engines and screen readers
   (e.g. the page <h1>, which has no place in the tabbed visual design). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
html { scroll-behavior: auto; scroll-padding-top: 80px; }
body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; line-height: 1.55; }
header {
  background: linear-gradient(135deg, #5b2147 0%, #1a2028 100%);
  padding: 48px 24px 56px; border-bottom: 1px solid var(--line);
}

/* tabs */
.tabs-wrap {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.tabs-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 12px;
}
/* Brand: thyroid logo + wordmark, leftmost on desktop */
.brand {
  display: flex; align-items: center; gap: 9px;
  flex: 0 0 auto; text-decoration: none; color: var(--ink);
  /* Track the same visual-centring shift as `main` (see .layout/main) so the
     wordmark's left edge lines up with where the body text starts at any width. */
  transform: translateX(clamp(0px, calc(50vw - 724px), 80px));
}
.brand-logo { width: 30px; height: 30px; display: block; }
.brand-name {
  font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em;
  white-space: nowrap; color: var(--ink);
}
.brand:hover .brand-name { color: var(--accent); }
.tabs {
  flex: 1 1 auto; min-width: 0;
  display: flex; gap: 4px;
  justify-content: center;
}
.tabs button {
  background: none; border: none; color: var(--muted);
  padding: 16px 18px; font-size: 1rem; font-weight: 600;
  cursor: pointer; border-bottom: 3px solid transparent;
  margin-bottom: -1px; font-family: inherit;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tabs button:hover { color: var(--ink); }
.tabs button.active {
  color: var(--accent); border-bottom-color: var(--accent);
}

/* Mobile hamburger nav — hidden on desktop, activated in the ≤760 query */
.nav-hamburger { display: none; }
.hb-bars {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 4px; width: 22px; height: 16px;
}
.hb-bars span {
  display: block; height: 2px; width: 100%;
  background: currentColor; border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Glossary toggle button (right end of the tabs bar) */
.glossary-toggle {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--muted); cursor: pointer;
  padding: 8px 12px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; font-family: inherit;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.glossary-toggle:hover {
  color: var(--accent); border-color: var(--accent); background: rgba(249,168,212,0.08);
}
.gt-icon { font-size: 1rem; }
@media (max-width: 640px) {
  .gt-label { display: none; }
  .glossary-toggle { padding: 8px 10px; }
}

/* Glossary side panel */
.glossary-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 380px; max-width: 90vw;
  background: var(--panel);
  border-left: 1px solid var(--accent);
  z-index: 1000;
  transform: translateX(105%);
  transition: transform 0.25s ease;
  display: flex; flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,0.4);
}
.glossary-panel.open {
  transform: translateX(0);
}
.glossary-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999; opacity: 0;
  transition: opacity 0.2s ease;
}
.glossary-backdrop.open { opacity: 1; }
.gloss-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.gloss-panel-head h3 { margin: 0; color: var(--accent); font-size: 1.1rem; }
.gloss-close {
  background: none; border: none; color: var(--muted);
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 10px;
  border-radius: 6px;
}
.gloss-close:hover { color: var(--ink); background: var(--panel-2); }
.gloss-search { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.gloss-search input {
  width: 100%; padding: 8px 12px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 6px; color: var(--ink); font-family: inherit; font-size: 0.92rem;
}
.gloss-search input:focus { outline: none; border-color: var(--accent); }
.gloss-list {
  margin: 0; padding: 12px 18px 24px;
  overflow-y: auto; flex: 1;
}
.gloss-item {
  padding: 10px 0; border-bottom: 1px dashed var(--line);
}
.gloss-item:last-child { border-bottom: none; }
.gloss-item dt {
  font-weight: 700; color: var(--accent); font-size: 0.95rem;
}
.gloss-item dd {
  margin: 4px 0 0; color: #cbd5e1; font-size: 0.86rem; line-height: 1.5;
}

/* Inline glossary term tooltips */
.gloss {
  border-bottom: 1px dotted rgba(249,168,212,0.55);
  cursor: help;
  position: relative;
}
.gloss:hover, .gloss:focus { border-bottom-color: var(--accent); }
.gloss:hover::after, .gloss:focus::after {
  content: attr(data-def);
  position: absolute;
  bottom: calc(100% + 8px); left: 0;
  min-width: 220px; max-width: 320px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--accent); border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.82rem; font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.gloss:hover::before, .gloss:focus::before {
  content: ""; position: absolute;
  bottom: calc(100% + 2px); left: 12px;
  width: 0; height: 0;
  border: 6px solid transparent;
  border-top-color: var(--accent);
  z-index: 100;
}

/* tab content visibility */
body[data-active-tab="what-is"] section[data-tab]:not([data-tab="what-is"]),
body[data-active-tab="what-is"] #toc-list li[data-tab]:not([data-tab="what-is"]) { display: none; }
body[data-active-tab="how-it-works"] section[data-tab]:not([data-tab="how-it-works"]),
body[data-active-tab="how-it-works"] #toc-list li[data-tab]:not([data-tab="how-it-works"]) { display: none; }
body[data-active-tab="pregnancy"] section[data-tab]:not([data-tab="pregnancy"]),
body[data-active-tab="pregnancy"] #toc-list li[data-tab]:not([data-tab="pregnancy"]) { display: none; }
body[data-active-tab="treatment"] section[data-tab]:not([data-tab="treatment"]),
body[data-active-tab="treatment"] #toc-list li[data-tab]:not([data-tab="treatment"]) { display: none; }
body[data-active-tab="statistics"] section[data-tab]:not([data-tab="statistics"]),
body[data-active-tab="statistics"] #toc-list li[data-tab]:not([data-tab="statistics"]) { display: none; }
header .wrap { max-width: 1400px; margin: 0 auto; }
h1 { margin: 0 0 8px; font-size: 2.4rem; letter-spacing: -0.02em; }
.subtitle { color: var(--muted); margin: 0 0 18px; font-size: 1.1rem; }
.tagline { display: inline-block; background: rgba(249,168,212,0.14); color: var(--accent); padding: 4px 12px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; }

.layout {
  max-width: 1400px; margin: 0 auto; padding: 32px 24px 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 40px;
}
main {
  min-width: 0;
  /* Visually shift main toward viewport-centre on wide screens (the TOC on
     the right is treated as outside the layout). Capped at 80px (rather
     than the full 140 needed for perfect centering) so that the thyroid
     wrapper has room to grow rightward without colliding with the TOC. */
  transform: translateX(clamp(0px, calc(50vw - 724px), 80px));
}

/* sticky ToC — visually pushed toward the viewport's right edge
   on wide screens (into the empty space outside .layout) without
   disturbing the main column. */
aside.toc {
  position: sticky; top: 80px;
  align-self: start;
  max-height: calc(100vh - 100px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px;
  font-size: 0.9rem;
  transform: translateX(clamp(0px, calc(50vw - 692px), 380px));
}
aside.toc h4 {
  margin: 0 0 10px; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
}
aside.toc ul { list-style: none; margin: 0; padding: 0; }
aside.toc li { margin: 0; }
aside.toc a {
  display: block; padding: 6px 10px;
  color: var(--ink); text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: all 0.15s ease;
}
aside.toc a:hover { background: var(--panel-2); color: var(--accent); }
aside.toc a.active {
  border-left-color: var(--accent);
  background: rgba(249,168,212,0.08);
  color: var(--accent); font-weight: 600;
}

section { margin: 40px 0; scroll-margin-top: 80px; }
section:first-of-type { margin-top: 0; }
h2 { font-size: 1.6rem; margin: 0 0 16px; letter-spacing: -0.01em; border-left: 4px solid var(--accent); padding-left: 12px; }
h3 { font-size: 1.15rem; margin: 24px 0 8px; color: var(--accent); }
p { color: #cbd5e1; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px;
}
.card.stat { text-align: center; }
.stat .num { font-size: 2.2rem; font-weight: 700; color: var(--accent); display: block; }
.stat .lbl { color: var(--muted); font-size: 0.9rem; margin-top: 4px; }
.chart-wrap { position: relative; height: 320px; }
table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.95rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
td a { color: var(--accent); text-decoration: none; }
td a:hover { text-decoration: underline; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.pill.good { background: rgba(134,239,172,0.15); color: var(--good); }
.pill.warn { background: rgba(252,211,77,0.15); color: var(--warn); }
.pill.bad  { background: rgba(252,165,165,0.15); color: var(--bad); }
.symptom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.symptom, .remedy {
  background: var(--panel-2); padding: 14px; border-radius: 10px;
  border-left: 3px solid var(--accent);
}
.symptom .icon, .remedy .icon { font-size: 1.4rem; margin-bottom: 4px; }
.symptom .name, .remedy .name { font-weight: 600; }
.symptom .desc, .remedy .desc { font-size: 0.85rem; color: var(--muted); margin-top: 2px; }
.thyroid-svg { display: block; margin: 16px auto; max-width: 360px; }

/* ===== Animated thyroid diagram ===== */
.thyroid-anim-wrap {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 24px auto;
  max-width: 1040px;
}
.thyroid-anim-grid {
  display: grid;
  /* Two columns: the portrait SVG on the left, a single explanation rail
     (intro prose + step list, stacked) on the right. */
  grid-template-columns: minmax(0, 600px) minmax(300px, 380px);
  gap: 32px;
  align-items: start;
  justify-content: center;
}
.mode-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.thyroid-anim-main { width: 100%; min-width: 0; }

/* Right-side step list panel */
.mode-steps {
  padding: 14px 16px;
  background: rgba(35, 43, 54, 0.55);
  border-radius: 8px;
  font-size: 0.9rem;
  color: #cbd5e1;
}
.mode-steps .step-text { display: none; }
.thyroid-anim-wrap[data-mode="normal"] .mode-steps .step-normal,
.thyroid-anim-wrap[data-mode="graves"] .mode-steps .step-graves,
.thyroid-anim-wrap[data-mode="methimazole"] .mode-steps .step-methimazole,
.thyroid-anim-wrap[data-mode="ptu"] .mode-steps .step-ptu,
.thyroid-anim-wrap[data-mode="rai"] .mode-steps .step-rai,
.thyroid-anim-wrap[data-mode="post-tx"] .mode-steps .step-post-tx { display: block; }
.mode-steps h5 {
  margin: 0 0 10px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.step-play-controls {
  display: inline-flex;
  gap: 6px;
}
.step-play-btn,
.step-pause-btn,
.step-prev-btn,
.step-next-btn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.72rem;
  font-family: inherit;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
  transition: border-color 0.15s, color 0.15s, background 0.15s, opacity 0.15s;
}
.step-play-btn:hover:not(:disabled),
.step-pause-btn:hover:not(:disabled),
.step-prev-btn:hover:not(:disabled),
.step-next-btn:hover:not(:disabled) {
  border-color: var(--accent); color: var(--accent);
}
.step-prev-btn:disabled,
.step-next-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.step-play-btn.is-playing {
  background: var(--accent); color: #1a2028; border-color: var(--accent);
}
/* When the Start button has flipped to "Stop" (is-playing), keep dark text
   on pink background even on hover — the generic hover rule above would
   otherwise make the text the same colour as the background. */
.step-play-btn.is-playing:hover:not(:disabled) {
  background: var(--accent); color: #1a2028; border-color: var(--accent);
  filter: brightness(1.08);
}
.step-pause-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mode-steps ol li.is-active {
  background: rgba(249, 168, 212, 0.22);
  border-radius: 4px;
  color: var(--ink);
}
.mode-steps ol {
  margin: 0;
  padding-left: 24px;
  font-size: 0.8rem;
  line-height: 1.5;
}
.mode-steps ol li {
  margin: 5px 0;
}
.mode-steps ol li[data-hl] { cursor: pointer; }
.mode-steps ol li[data-hl]:hover {
  background: rgba(249, 168, 212, 0.12);
  border-radius: 4px;
}

/* When a step is hovered, the corresponding SVG element(s) glow.
   Other SVG elements dim slightly so the highlighted one stands out. */
.thyroid-anim .is-highlighted {
  filter: drop-shadow(0 0 6px rgba(249, 168, 212, 0.95))
          drop-shadow(0 0 12px rgba(249, 168, 212, 0.55));
}
.thyroid-anim-wrap.has-highlight .thyroid-anim > *:not(.is-highlighted):not(defs) {
  opacity: 0.35;
  transition: opacity 0.15s ease;
}
.thyroid-anim-wrap.has-highlight .thyroid-anim .is-highlighted {
  opacity: 1;
}
.mode-steps ol li::marker {
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 900px) {
  .thyroid-anim-wrap { max-width: 620px; }
  .thyroid-anim-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .thyroid-anim-main,
  .mode-rail { width: 100%; max-width: 600px; }
}
.thyroid-modes {
  display: flex; gap: 8px; justify-content: center; margin-bottom: 14px;
}
.mode-btn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 7px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.15s ease;
}
.mode-btn:hover { color: var(--ink); }
.mode-btn.active {
  background: var(--accent);
  color: #1a2028;
  border-color: var(--accent);
}

/* Segmented tabs (e.g. Natural remedies categories) — reuse the .mode-btn pills */
.seg-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.remedy-panel[hidden] { display: none; }
/* Distinct left-border colour per category (Supplements green, Lifestyle pink, Avoid amber) */
.remedy-panel[data-panel="supplements"] .remedy { border-left-color: var(--good); }
.remedy-panel[data-panel="lifestyle"] .remedy { border-left-color: var(--accent); }

/* Animation playback controls (just pause / play) */
.anim-controls {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.anim-controls .play-pause-btn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 6px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  min-width: 82px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.anim-controls .play-pause-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--panel);
}
.thyroid-anim {
  display: block; margin: 0 auto;
  max-width: 640px; width: 100%; height: auto;
}

/* All mode-specific overlays hidden by default */
.thyroid-anim-wrap .trak-group,
.thyroid-anim-wrap .t4-extra,
.thyroid-anim-wrap .fb-particles-extra,
.thyroid-anim-wrap .atd-blocker-common,
.thyroid-anim-wrap .atd-label-mmi,
.thyroid-anim-wrap .atd-label-ptu,
.thyroid-anim-wrap .ptu-peripheral-block,
.thyroid-anim-wrap .post-tx-overlay,
.thyroid-anim-wrap .levo-pill,
.thyroid-anim-wrap .levo-particles,
.thyroid-anim-wrap .rai-group,
.thyroid-anim-wrap .graves-only-label { visibility: hidden; }
.thyroid-anim-wrap[data-mode="graves"] .graves-only-label,
.thyroid-anim-wrap[data-mode="graves"] .fb-particles-extra { visibility: visible; }

/* ===== Graves' (untreated) ===== */
.thyroid-anim-wrap[data-mode="graves"] .trak-group,
.thyroid-anim-wrap[data-mode="graves"] .t4-extra { visibility: visible; }
.thyroid-anim-wrap[data-mode="graves"] .tsh-particles,
.thyroid-anim-wrap[data-mode="graves"] .trh-particles { opacity: 0.2; }
.thyroid-anim-wrap[data-mode="graves"] .tsh-label,
.thyroid-anim-wrap[data-mode="graves"] .trh-label { opacity: 0.3; }
.thyroid-anim-wrap[data-mode="graves"] .lobe {
  animation: thyroid-glow 1.4s ease-in-out infinite alternate;
  transform-origin: center; transform-box: fill-box;
}
.thyroid-anim-wrap[data-mode="graves"] .effect-text {
  fill: var(--bad); font-weight: 600;
}
@keyframes thyroid-glow {
  from { filter: drop-shadow(0 0 2px rgba(252,165,165,0.4)); transform: scale(1); }
  to   { filter: drop-shadow(0 0 14px rgba(252,165,165,0.95)); transform: scale(1.04); }
}

/* ===== Graves' on Methimazole / Thiamazole / Carbimazole =====
   - TRAK still binds receptor (autoimmunity not cured)
   - ATD blocks TPO inside the gland → hormone output normalizes
   - TRH/TSH recover toward normal */
.thyroid-anim-wrap[data-mode="methimazole"] .trak-group,
.thyroid-anim-wrap[data-mode="methimazole"] .atd-blocker-common,
.thyroid-anim-wrap[data-mode="methimazole"] .atd-label-mmi { visibility: visible; }

/* ===== Graves' on PTU (propylthiouracil) =====
   - Same TPO block inside the gland
   - PLUS: blocks peripheral T4 → T3 conversion (deiodinase inhibition) */
.thyroid-anim-wrap[data-mode="ptu"] .trak-group,
.thyroid-anim-wrap[data-mode="ptu"] .atd-blocker-common,
.thyroid-anim-wrap[data-mode="ptu"] .atd-label-ptu,
.thyroid-anim-wrap[data-mode="ptu"] .ptu-peripheral-block { visibility: visible; }

/* ===== Thyroid removed (post-thyroidectomy / post-RAI) + levothyroxine =====
   - Gland is non-functional; iodine uptake & thyroid-derived T4 stop
   - Daily oral T4 supplies the body
   - TRAK eventually fades (shown faint) */
.thyroid-anim-wrap[data-mode="post-tx"] .post-tx-overlay,
.thyroid-anim-wrap[data-mode="post-tx"] .levo-pill,
.thyroid-anim-wrap[data-mode="post-tx"] .levo-particles { visibility: visible; }
.thyroid-anim-wrap[data-mode="post-tx"] .thyroid-gland { opacity: 0.3; }
.thyroid-anim-wrap[data-mode="post-tx"] .iodine-flow { opacity: 0.15; }
/* display:none (not visibility:hidden): the delayed baseline dots force their own
   visibility:visible via a frozen <set>, which would override a hidden parent and leak
   thyroid-derived dots into post-tx. display:none removes the whole subtree instead. */
.thyroid-anim-wrap[data-mode="post-tx"] .t4-base,
.thyroid-anim-wrap[data-mode="post-tx"] .t4-channel { display: none; }

/* ===== Graves' treated with radioactive iodine (I-131) =====
   - I-131 rides the thyroid's own iodine-uptake pathway in (reuses #p-iodine)
   - Radiation ablates the gland from inside (yellow glow + slow shrink)
   - Gland's own output stops; daily levothyroxine replaces it
   - Distinct from post-tx: gland is irradiated in place, not struck out */
.thyroid-anim-wrap[data-mode="rai"] .rai-group,
.thyroid-anim-wrap[data-mode="rai"] .levo-pill,
.thyroid-anim-wrap[data-mode="rai"] .levo-particles { visibility: visible; }
.thyroid-anim-wrap[data-mode="rai"] .iodine-flow { opacity: 0.15; }
/* The gland is being destroyed in place: dim the whole group (fades the
   static iodide dots + label too) so it reads as shutting down, not active. */
.thyroid-anim-wrap[data-mode="rai"] .thyroid-gland { opacity: 0.4; }
.thyroid-anim-wrap[data-mode="rai"] .lobe {
  animation: rai-ablate 2s ease-in-out infinite alternate;
  transform-origin: center; transform-box: fill-box;
}
.thyroid-anim-wrap[data-mode="rai"] .rai-symbol {
  animation: rai-pulse 1s ease-in-out infinite alternate;
}
/* gland output is replaced by levo — same display:none rationale as post-tx */
.thyroid-anim-wrap[data-mode="rai"] .t4-base,
.thyroid-anim-wrap[data-mode="rai"] .t4-channel { display: none; }
/* Lobes shrink + desaturate toward a dim, non-functional grey while the
   radiation glows — the gland is dying, not glowing healthily. */
@keyframes rai-ablate {
  from { filter: drop-shadow(0 0 4px rgba(252,211,77,0.7)); transform: scale(1); }
  to   { filter: grayscale(0.7) drop-shadow(0 0 16px rgba(252,211,77,0.9)); transform: scale(0.82); }
}
@keyframes rai-pulse {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}

.thyroid-legend {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px; margin-top: 12px; font-size: 0.82rem; color: var(--muted);
}
.thyroid-legend .dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; margin-right: 6px; vertical-align: middle;
}
.mode-explain {
  margin-top: 14px; padding: 14px 16px;
  background: rgba(35, 43, 54, 0.55); border-radius: 8px;
  font-size: 0.9rem; color: #cbd5e1;
}
.mode-explain .mode-text { display: none; }
.thyroid-anim-wrap[data-mode="normal"] .mode-explain .mode-normal { display: block; }
.thyroid-anim-wrap[data-mode="graves"] .mode-explain .mode-graves { display: block; }
.thyroid-anim-wrap[data-mode="methimazole"] .mode-explain .mode-methimazole { display: block; }
.thyroid-anim-wrap[data-mode="ptu"] .mode-explain .mode-ptu { display: block; }
.thyroid-anim-wrap[data-mode="rai"] .mode-explain .mode-rai { display: block; }
.thyroid-anim-wrap[data-mode="post-tx"] .mode-explain .mode-post-tx { display: block; }
.mode-explain strong { color: var(--accent); }
.mode-explain p { margin: 8px 0; }
.mode-explain p:first-child { margin-top: 0; }
.mode-explain p:last-child { margin-bottom: 0; }
.mode-explain ul { margin: 4px 0 10px; padding-left: 22px; }
.mode-explain li { margin: 3px 0; line-height: 1.5; }
.mode-explain li::marker { color: var(--accent); }
.mode-explain.normal-bg { }

/* Custom hover tooltip for SVG terms — replaces sluggish native <title> popups */
.thyroid-hover-tooltip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  display: none;
  max-width: 340px;
  padding: 12px 14px;
  background: #1a2028;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.thyroid-hover-tooltip strong { color: var(--accent); }
.thyroid-anim [data-tooltip-target] { cursor: help; }
.callout {
  background: rgba(252,211,77,0.08); border-left: 4px solid var(--warn);
  padding: 14px 16px; border-radius: 6px; margin: 16px 0;
}
.callout strong { color: var(--warn); }
.callout.pink { background: rgba(249,168,212,0.08); border-left-color: var(--accent); }
.callout.pink strong { color: var(--accent); }
.callout.danger { background: rgba(252,165,165,0.08); border-left-color: var(--bad); }
.callout.danger strong { color: var(--bad); }

.timeline {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-top: 12px;
}
.phase {
  background: var(--panel-2); padding: 14px; border-radius: 10px;
  border-top: 3px solid var(--accent);
}
.phase .when { color: var(--accent); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
.phase .what { margin-top: 6px; font-size: 0.9rem; }

/* Treatment tab: "Where to start" navigator */
.tx-nav-section { margin-top: 12px; }
.tx-nav-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin-top: 14px;
}
.tx-nav-card {
  display: flex; gap: 14px; align-items: center;
  background: var(--panel-2); padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.tx-nav-card:hover {
  border-color: var(--accent); background: rgba(249,168,212,0.06);
  transform: translateY(-2px);
}
.tx-nav-icon { font-size: 1.8rem; flex: 0 0 36px; text-align: center; }
.tx-nav-title { font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.tx-nav-sub { font-size: 0.82rem; color: var(--muted); margin-top: 3px; }

/* Section lede — a one-line summary under each h2 */
.section-lede {
  color: #cbd5e1;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.5;
  margin-top: -4px;
}

/* Progressive-disclosure details blocks */
.more-details {
  background: var(--panel-2); border-radius: 10px;
  border: 1px solid var(--line);
  margin-top: 14px;
}
.more-details > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 12px 14px; font-weight: 600; color: var(--accent); font-size: 0.92rem;
  display: flex; align-items: center; gap: 10px;
}
.more-details > summary::-webkit-details-marker { display: none; }
.more-details > summary::before {
  content: "▸"; color: var(--accent); font-size: 0.9rem;
  transition: transform 0.15s ease; display: inline-block;
}
.more-details[open] > summary::before { transform: rotate(90deg); }
.more-details[open] > summary { border-bottom: 1px solid var(--line); }
.more-details > div,
.more-details > table { padding: 0 14px 14px; }

/* Statistics tab: hero stats (overview) */
.hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; margin-top: 14px;
}
.hero-stat {
  background: linear-gradient(135deg, rgba(249,168,212,0.14), rgba(249,168,212,0.04));
  border: 1px solid var(--accent); border-radius: 14px;
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 6px;
}
.hero-num { font-size: 3.4rem; font-weight: 800; color: var(--accent); line-height: 1; }
.hero-lbl { font-size: 1rem; font-weight: 600; color: var(--ink); margin-top: 4px; }
.hero-sub { font-size: 0.82rem; color: var(--muted); }

.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }

/* Statistics tab: Compare results panel — visually distinct when shown */
.compare-results-panel {
  margin-top: 24px; padding: 18px;
  background: linear-gradient(135deg, rgba(249,168,212,0.06), rgba(249,168,212,0.02));
  border: 1px solid var(--accent); border-radius: 14px;
}
.compare-results-panel > h3:first-child {
  margin-top: 0; color: var(--accent); font-size: 1.2rem;
}
.cf-advanced { margin-top: 6px; }

/* Statistics tab: developer zone divider */
.dev-zone-divider {
  display: flex; align-items: center; gap: 16px;
  margin: 36px 0 8px; padding: 0;
}
.dev-zone-line { flex: 1; height: 1px; background: var(--line); }
.dev-zone-label { display: flex; align-items: center; gap: 12px; padding: 0 4px; }
.dev-zone-icon { font-size: 1.4rem; }
.dev-zone-title { font-weight: 700; color: var(--muted); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; }
.dev-zone-sub { font-size: 0.8rem; color: var(--muted); max-width: 360px; }

/* TOC divider style — when a section starts the developer zone */
#toc-list li.toc-divider { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); }
#toc-list li.toc-divider a::before { content: "🛠️ "; }

/* Downloads: collapsible details */
.dl-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.dl-item {
  background: var(--panel-2); border-radius: 10px; border: 1px solid var(--line);
}
.dl-item > summary {
  list-style: none; cursor: pointer;
  padding: 12px 14px; font-weight: 600;
  display: flex; align-items: center; gap: 12px;
  user-select: none;
}
.dl-item > summary::-webkit-details-marker { display: none; }
.dl-item > summary::before {
  content: "▸"; color: var(--accent); font-size: 0.9rem;
  transition: transform 0.15s ease; display: inline-block;
}
.dl-item[open] > summary::before { transform: rotate(90deg); }
.dl-name { flex: 1; color: var(--ink); }
.dl-item > p, .dl-item > pre, .dl-item > ol { padding-left: 14px; padding-right: 14px; }
.dl-item > p:last-child, .dl-item > ol:last-child, .dl-item > pre:last-child { padding-bottom: 14px; }

/* Sources: grouped */
.sources-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px; margin-top: 10px;
}
.source-group {
  background: var(--panel-2); padding: 14px 16px; border-radius: 10px;
  border-top: 3px solid var(--accent);
}
.source-group-title { font-weight: 700; color: var(--accent); font-size: 0.95rem; margin-bottom: 8px; }
.source-group ul { margin: 0; padding-left: 18px; }
.source-group li { margin-bottom: 4px; font-size: 0.88rem; }

/* Treatment tab: top-line "three highest-evidence moves" */
.topline-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-top: 12px;
}
.topline-card {
  background: linear-gradient(135deg, rgba(249,168,212,0.10), rgba(249,168,212,0.04));
  border: 1px solid var(--accent); border-radius: 12px;
  padding: 16px;
}
.topline-icon { font-size: 1.8rem; }
.topline-title { font-weight: 700; color: var(--accent); margin-top: 6px; font-size: 1rem; }
.topline-detail { font-size: 0.88rem; color: #cbd5e1; margin-top: 6px; }

/* Avoid / warning grid */
.avoid-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px; margin-top: 10px;
}
.avoid-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--panel-2); padding: 12px 14px; border-radius: 10px;
  border-left: 3px solid var(--warn);
}
.avoid-icon { font-size: 1.4rem; flex: 0 0 32px; text-align: center; }
.avoid-body strong { color: var(--ink); font-size: 0.92rem; }
.avoid-sub { font-size: 0.84rem; color: var(--muted); margin-top: 3px; }

/* 3-up treatment comparison */
.tx-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin-top: 12px;
}
.tx-card {
  background: var(--panel-2); border-radius: 12px;
  display: flex; flex-direction: column;
}
.tx-head {
  padding: 12px 14px; background: rgba(0,0,0,0.18);
  display: flex; flex-direction: column; gap: 6px;
  border-bottom: 1px solid var(--line);
  border-top-left-radius: 12px; border-top-right-radius: 12px;
}
.tx-emoji { font-size: 1.6rem; }
.tx-title { font-weight: 700; color: var(--ink); font-size: 1rem; }
.tx-body { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.tx-row { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); font-size: 0.85rem; }
.tx-row:last-child { border-bottom: none; padding-bottom: 0; }
.tx-k { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.tx-v { color: #cbd5e1; }
.tx-v.tx-good { color: var(--good); font-weight: 600; }
.tx-v.tx-bad { color: var(--bad); font-weight: 600; }

.tx-supportive {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--panel-2); padding: 14px 16px; border-radius: 10px;
  margin-top: 14px; border-left: 3px solid var(--good);
}
.tx-supportive-icon { font-size: 1.6rem; flex: 0 0 32px; }
.tx-supportive-body { font-size: 0.9rem; color: #cbd5e1; }

/* Off-the-table in pregnancy */
.off-table-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px; margin-top: 8px;
}
.off-table-card {
  background: rgba(252,165,165,0.06); border: 1px solid rgba(252,165,165,0.4);
  border-radius: 10px; padding: 12px 14px;
}
.off-table-title { font-weight: 700; color: var(--bad); font-size: 0.92rem; margin-bottom: 4px; }
.off-table-detail { font-size: 0.85rem; color: #cbd5e1; }

/* Lab cards (Doctor section) */
.lab-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px; margin-top: 10px;
}
.lab-card {
  background: var(--panel-2); padding: 12px 14px; border-radius: 10px;
  border-left: 3px solid var(--accent);
}
.lab-card.lab-key { border-left-color: var(--bad); background: rgba(252,165,165,0.06); }
.lab-card.lab-warn { border-left-color: var(--warn); }
.lab-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.lab-icon { font-size: 1.2rem; }
.lab-name { font-weight: 700; color: var(--ink); }
.lab-tag { margin-left: auto; font-size: 0.7rem !important; padding: 2px 7px !important; }
.lab-what { font-size: 0.86rem; color: #cbd5e1; margin-bottom: 6px; }
.lab-when { font-size: 0.78rem; color: var(--muted); font-style: italic; }

/* Alert list (call same day) */
.alert-list {
  display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
}
.alert-item {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(252,165,165,0.06); border: 1px solid rgba(252,165,165,0.3);
  border-radius: 10px; padding: 12px 14px;
}
.alert-item.alert-emergency {
  background: rgba(252,165,165,0.14); border-color: var(--bad);
}
.alert-icon { font-size: 1.5rem; flex: 0 0 32px; text-align: center; }
.alert-body strong { color: var(--ink); font-size: 0.94rem; }
.alert-item.alert-emergency .alert-body strong { color: var(--bad); }
.alert-sub { font-size: 0.84rem; color: var(--muted); margin-top: 3px; }

/* Pregnancy: risk timeline */
.preg-timeline {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin-top: 12px; overflow-x: auto;
}
.preg-timeline-svg { width: 100%; min-width: 720px; height: auto; display: block; }

/* Pregnancy: fetal/neonatal cards */
.fetal-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin-top: 10px;
}
.fetal-card {
  background: var(--panel-2); padding: 14px 16px; border-radius: 10px;
  border-left: 3px solid var(--accent);
}
.fetal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.fetal-icon { font-size: 1.5rem; }
.fetal-title { font-weight: 700; color: var(--ink); flex: 1; }
.fetal-tag {
  padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.fetal-tag.tag-bad  { background: rgba(252,165,165,0.18); color: var(--bad); border: 1px solid var(--bad); }
.fetal-tag.tag-warn { background: rgba(252,211,77,0.18); color: var(--warn); border: 1px solid var(--warn); }
.fetal-mech { font-size: 0.88rem; color: #cbd5e1; margin-bottom: 8px; }
.fetal-watch { font-size: 0.85rem; color: var(--muted); }

/* Pregnancy: thyroid storm box */
.storm-box {
  background: rgba(252,165,165,0.06); border: 1px solid var(--bad);
  border-radius: 12px; padding: 18px; margin-top: 10px;
}
.storm-headline {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
  padding-bottom: 16px; border-bottom: 1px solid rgba(252,165,165,0.25);
}
.storm-stat { display: flex; flex-direction: column; align-items: center; padding: 0 12px; }
.storm-stat-num { font-size: 2.6rem; font-weight: 800; color: var(--bad); line-height: 1; }
.storm-stat-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; text-align: center; }
.storm-intro { font-size: 0.95rem; color: #cbd5e1; }
.storm-panels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-top: 16px;
}
.storm-panel {
  background: var(--panel-2); padding: 12px 14px; border-radius: 8px;
}
.storm-panel-title { font-weight: 700; color: var(--bad); font-size: 0.92rem; margin-bottom: 8px; }
.storm-panel ul { margin: 0; padding-left: 18px; color: #cbd5e1; font-size: 0.88rem; }
.storm-panel li { margin-bottom: 3px; }
.storm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.storm-chip {
  background: rgba(252,165,165,0.15); color: var(--bad);
  border: 1px solid rgba(252,165,165,0.4); border-radius: 999px;
  font-size: 0.78rem; padding: 3px 9px; font-weight: 600;
}
.storm-decision { font-size: 0.85rem; color: var(--muted); font-style: italic; }
@media (max-width: 600px) {
  .storm-headline { grid-template-columns: 1fr; text-align: center; }
}

/* Pregnancy: postpartum two-up comparison */
.postpartum-grid {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 16px; align-items: stretch; margin-top: 10px;
}
.pp-vs {
  align-self: center; color: var(--muted); font-weight: 700; font-size: 1rem;
}
.pp-card {
  background: var(--panel-2); padding: 14px 16px; border-radius: 10px;
  border-top: 3px solid var(--accent);
}
.pp-card.pp-thyroiditis { border-top-color: var(--good); }
.pp-card.pp-relapse     { border-top-color: var(--bad); }
.pp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.pp-label { font-weight: 700; color: var(--ink); }
.pp-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pp-feats li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.88rem; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.pp-feats li:last-child { border-bottom: none; }
.pp-feat-k { color: var(--muted); }
.pp-feat-v { color: #cbd5e1; font-weight: 600; text-align: right; }
@media (max-width: 600px) {
  .postpartum-grid { grid-template-columns: 1fr; }
  .pp-vs { padding: 4px 0; }
}

/* Causes section: flow + two-column lists */
.causes-flow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px; margin: 20px 0 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px;
}
.cf-box {
  padding: 12px 18px; border-radius: 10px; font-weight: 600; font-size: 0.95rem;
  text-align: center; min-width: 160px;
}
.cf-box span { display: block; font-weight: 400; font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.cf-pre    { background: rgba(165,180,252,0.14); border: 1px solid #a5b4fc; color: #c7d2fe; }
.cf-trig   { background: rgba(252,211,77,0.12); border: 1px solid var(--warn); color: var(--warn); }
.cf-result { background: rgba(249,168,212,0.12); border: 1px solid var(--accent); color: var(--accent); font-size: 0.95rem; }
.cf-plus, .cf-arrow { font-size: 1.5rem; color: var(--muted); font-weight: 700; }

/* Tie each cause card title to its flow box above */
.cause-head.pre  { color: #a5b4fc; }
.cause-head.trig { color: var(--warn); }

.cause-list { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.cause-item { display: flex; gap: 12px; align-items: flex-start; }
.cause-icon { font-size: 1.4rem; flex: 0 0 28px; text-align: center; }
.cause-item strong { color: var(--ink); font-size: 0.95rem; }
.cause-sub { font-size: 0.85rem; color: var(--muted); margin-top: 2px; }

/* Diagnosis flow */
.dx-flow {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  margin-top: 16px;
}
.dx-step {
  display: flex; gap: 14px; align-items: center;
  background: var(--panel-2); padding: 14px 16px; border-radius: 10px;
  border-left: 3px solid var(--accent);
}
.dx-num {
  flex: 0 0 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #1a2028;
  font-weight: 700; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
}
.dx-title { font-weight: 600; color: var(--ink); font-size: 0.98rem; }
.dx-detail { margin-top: 4px; font-size: 0.9rem; color: #cbd5e1; }

/* Course over time: 4 treatment paths */
.course-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin-top: 16px;
}
.course-path {
  background: var(--panel-2); border-radius: 12px;
  display: flex; flex-direction: column;
}
.course-head {
  padding: 12px 16px; background: rgba(0,0,0,0.15);
  border-top-left-radius: 12px; border-top-right-radius: 12px;
}
.course-tag {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
}
.course-tag.tag-bad  { background: rgba(252,165,165,0.18); color: var(--bad); border: 1px solid var(--bad); }
.course-tag.tag-warn { background: rgba(252,211,77,0.18); color: var(--warn); border: 1px solid var(--warn); }
.course-tag.tag-good { background: rgba(134,239,172,0.18); color: var(--good); border: 1px solid var(--good); }
.course-body { padding: 12px 16px; flex: 1; }
.course-body ul { margin: 0; padding-left: 18px; color: #cbd5e1; font-size: 0.88rem; }
.course-body li { margin-bottom: 4px; }

/* TRAK reference scale + relapse risk bars */
.trak-scale-wrap {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin-top: 16px;
}
.trak-scale { width: 100%; height: auto; display: block; }

.trak-risk-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.trak-risk-row {
  display: grid;
  grid-template-columns: 140px 1fr 70px;
  grid-template-areas: "pill bar pct" "pill desc desc";
  align-items: center; column-gap: 14px; row-gap: 4px;
  background: var(--panel-2); padding: 12px 14px; border-radius: 10px;
}
.trak-risk-pill { grid-area: pill; }
.trak-risk-bar { grid-area: bar; height: 12px; background: #1a2028; border-radius: 6px; overflow: hidden; }
.trak-risk-fill { height: 100%; border-radius: 6px; }
.trak-risk-pct { grid-area: pct; font-size: 0.9rem; font-weight: 600; color: #cbd5e1; text-align: right; font-variant-numeric: tabular-nums; }
.trak-risk-desc { grid-area: desc; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 600px) {
  .trak-risk-row {
    grid-template-columns: 1fr 70px;
    grid-template-areas: "pill pct" "bar bar" "desc desc";
  }
}

/* Symptoms: frequency bar chart */
.symptoms-viz {
  margin-top: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px;
}
.freq-bars { display: flex; flex-direction: column; gap: 8px; }
.freq-row {
  display: grid;
  grid-template-columns: 28px 1.4fr 2fr 56px;
  grid-template-areas: "num label bar pct" "num desc desc desc";
  align-items: center; column-gap: 10px; row-gap: 2px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--panel-2);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.freq-row:hover, .freq-row.active {
  background: rgba(252,165,165,0.10);
  border-left-color: var(--bad);
  transform: translateX(2px);
}
.freq-num {
  grid-area: num;
  width: 24px; height: 24px; border-radius: 50%;
  background: #1a2028; border: 2px solid var(--bad); color: var(--bad);
  font-weight: 700; font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center;
}
.freq-row:hover .freq-num, .freq-row.active .freq-num { background: var(--bad); color: #1a2028; }
/* min-width:0 lets the grid track shrink so labels wrap instead of truncating;
   no overflow:hidden here, otherwise it clips the .gloss hover tooltip (e.g. "goiter"). */
.freq-label { grid-area: label; min-width: 0; font-size: 0.92rem; font-weight: 600; color: #cbd5e1; }
.freq-icon { margin-right: 4px; }
.freq-bar { grid-area: bar; height: 10px; background: #1a2028; border-radius: 5px; overflow: hidden; }
.freq-fill { height: 100%; border-radius: 5px; transition: filter 0.15s ease; }
.freq-fill.freq-high { background: linear-gradient(90deg, #fca5a5, #f9a8d4); }
.freq-fill.freq-mid  { background: linear-gradient(90deg, #fcd34d, #fca5a5); }
.freq-fill.freq-low  { background: linear-gradient(90deg, #86efac, #fcd34d); }
.freq-pct { grid-area: pct; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.freq-desc { grid-area: desc; font-size: 0.82rem; color: var(--muted); margin-top: 4px; }
/* in-text citation superscript (e.g. ~55%²) — maps to the numbered Sources list */
.cite { color: var(--accent); font-weight: 700; }
.cite-link { color: inherit; text-decoration: none; cursor: pointer; }
.cite-link:hover, .cite-link:focus-visible { text-decoration: underline; }
/* Numbered reference list in the Sources section */
.ref-list { margin: 10px 0 0; padding-left: 24px; font-size: 0.88rem; line-height: 1.55; color: var(--muted); }
.ref-list li { margin-bottom: 7px; border-radius: 6px; scroll-margin-top: 90px; }
.ref-list li::marker { color: var(--accent); font-weight: 700; }
.ref-list a { color: var(--accent); text-decoration: none; }
.ref-list a:hover { text-decoration: underline; }
.ref-note { margin: 12px 0 0; font-size: 0.8rem; font-style: italic; color: var(--muted); }
/* Highlight the source row a citation jumped to (persists until another is clicked) */
.ref-list li.ref-active {
  background: rgba(249,168,212,0.20);
  box-shadow: 0 0 0 6px rgba(249,168,212,0.20);
  border-radius: 6px;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* Life course incidence curve + linked cards */
.lifecourse-viz { margin-top: 16px; }
.lifecourse-chart {
  width: 100%; height: auto; display: block;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 6px;
}
.lc-pin { cursor: pointer; transition: transform 0.15s ease; transform-origin: center; transform-box: fill-box; }
.lc-pin circle { transition: fill 0.15s ease, stroke-width 0.15s ease, r 0.15s ease; }
.lc-pin:hover circle, .lc-pin.active circle { fill: #f9a8d4; stroke-width: 3; }
.lc-pin:hover text, .lc-pin.active text { fill: #1a2028; }
/* Suppress the focus outline on click; keep it for keyboard nav (accessibility).
   The .active highlight already signals selection visually. */
.lc-pin:focus, .lc-card:focus { outline: none; }
.lc-pin:focus-visible, .lc-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.lifecourse-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px; margin-top: 16px;
}
.lc-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--panel-2); padding: 12px 14px; border-radius: 10px;
  border-left: 3px solid var(--accent);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.lc-card:hover, .lc-card.active {
  background: rgba(249,168,212,0.10);
  border-left-color: #f9a8d4; border-left-width: 4px;
  transform: translateY(-2px);
}
.lc-num {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  background: #1a2028; border: 2px solid var(--accent); color: var(--accent);
  font-weight: 700; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.lc-card:hover .lc-num, .lc-card.active .lc-num { background: var(--accent); color: #1a2028; }
.lc-body { flex: 1; }
.lc-when { color: var(--accent); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.lc-what { margin-top: 4px; font-size: 0.9rem; color: #cbd5e1; }

pre.code {
  background: #0a0e13; border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 14px;
  font-size: 0.85rem; line-height: 1.5;
  overflow-x: auto; color: #cbd5e1;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  margin: 8px 0;
}
pre.code .c { color: #6b7280; }
pre.code .k { color: var(--accent); }
code { background: var(--panel-2); padding: 2px 6px; border-radius: 4px; font-size: 0.85em; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* ===== Compare-your-labs ===== */
.compare-form { display: flex; flex-direction: column; gap: 12px; }
.compare-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--muted); }
.compare-form input[type="number"],
.compare-form input[type="date"] {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 0.95rem;
  width: 100%;
}
.compare-form input[type="number"]:focus,
.compare-form input[type="date"]:focus {
  outline: none; border-color: var(--accent);
}
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.cf-fieldset {
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px 8px; margin: 0;
  display: flex; gap: 12px; align-items: center;
}
.cf-fieldset legend { color: var(--muted); font-size: 0.75rem; padding: 0 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.cf-inline { flex-direction: row !important; align-items: center; gap: 6px !important; color: var(--ink) !important; font-size: 0.9rem !important; }
.cf-checkbox { padding-bottom: 4px; }
.cf-labs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cf-unit { color: #6b7785; font-weight: 400; font-size: 0.7rem; margin-left: 4px; }
.cf-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.cf-btn {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  padding: 8px 16px; border-radius: 6px; cursor: pointer; font-family: inherit;
  font-size: 0.9rem; font-weight: 600;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.cf-btn:hover { border-color: var(--accent); color: var(--accent); }
.cf-btn.primary { background: var(--accent); color: #1a2028; border-color: var(--accent); }
.cf-btn.primary:hover { filter: brightness(1.08); color: #1a2028; }
.cf-btn.danger:hover { border-color: var(--bad); color: var(--bad); }
.cf-hint { color: var(--muted); font-size: 0.82rem; margin: 4px 0 0; }

.cf-entries-wrap { max-height: 280px; overflow-y: auto; }
.cf-entries { font-size: 0.85rem; }
.cf-entries th, .cf-entries td { padding: 8px 6px; }
.cf-entries td:last-child { text-align: right; white-space: nowrap; }
.cf-row-btn {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  padding: 3px 8px; border-radius: 4px; cursor: pointer; font-family: inherit;
  font-size: 0.75rem; margin-left: 4px;
  transition: border-color 0.15s, color 0.15s;
}
.cf-row-btn:hover { border-color: var(--accent); color: var(--accent); }
.cf-row-btn.danger:hover { border-color: var(--bad); color: var(--bad); }

.cf-controls { display: flex; align-items: baseline; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.cf-controls label { color: var(--muted); font-size: 0.9rem; display: flex; gap: 8px; align-items: center; }
.cf-controls select {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 6px; padding: 6px 10px; font-family: inherit; font-size: 0.9rem;
}
.cf-cohort-n { color: var(--muted); font-size: 0.82rem; }

.cf-summary { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 16px; }
.cf-sum-line {
  background: var(--panel-2); border-left: 3px solid var(--accent);
  padding: 8px 12px; border-radius: 6px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  font-size: 0.88rem;
}
.cf-sum-lab { font-weight: 700; color: var(--accent); min-width: 36px; }
.cf-sum-val { color: var(--ink); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.cf-sum-pct {
  background: rgba(249,168,212,0.15); color: var(--accent);
  padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 0.8rem;
}
.cf-sum-note { color: var(--muted); font-size: 0.85rem; }
.cf-chart-sub { color: var(--muted); font-size: 0.78rem; font-weight: 400; margin-left: 6px; }

/* ===== App-waitlist bar (fixed, dismissible) ===== */
.signup-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--panel); border-top: 1px solid var(--accent);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.35);
}
.signup-bar[hidden] { display: none; }
.signup-bar-inner {
  position: relative;
  max-width: 1400px; margin: 0 auto; padding: 12px 52px 12px 24px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px;
}
.signup-pitch { margin: 0; flex: 1 1 220px; min-width: 0; color: var(--ink); font-size: 0.95rem; }
.signup-pitch strong { color: var(--accent); }
.signup-form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0; }
.signup-row { display: flex; gap: 8px; }
.signup-email input {
  box-sizing: border-box; width: 220px; max-width: 60vw;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  padding: 9px 12px; border-radius: 8px; font-size: 0.95rem; font-family: inherit;
}
.signup-email input:focus { outline: none; border-color: var(--accent); }
.signup-btn {
  cursor: pointer; white-space: nowrap;
  background: var(--accent); color: #1a2028; border: 1px solid var(--accent);
  padding: 9px 16px; border-radius: 8px; font-size: 0.95rem; font-weight: 700; font-family: inherit;
  transition: filter 0.15s ease;
}
.signup-btn:hover { filter: brightness(1.08); }
.signup-btn:disabled { opacity: 0.55; cursor: default; filter: none; }
.signup-consent { margin: 0; font-size: 0.78rem; color: var(--muted); line-height: 1.3; }
.signup-consent a { color: var(--accent); }
.signup-msg { margin: 0; font-size: 0.82rem; flex-basis: 100%; }
.signup-msg.success { color: var(--good); font-size: 0.95rem; font-weight: 600; }
.signup-msg.error { color: var(--bad); }
.signup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup-dismiss {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: none; border: none; color: var(--muted);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.signup-dismiss:hover { color: var(--ink); }
body.signup-bar-open { padding-bottom: 84px; }

/* Privacy note dialog */
.privacy-dialog {
  max-width: 540px; width: calc(100% - 32px);
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px; padding: 0;
}
.privacy-dialog::backdrop { background: rgba(0,0,0,0.5); }
.privacy-dialog-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.privacy-dialog-head h2 { margin: 0; padding: 0; border: none; font-size: 1.15rem; }
.privacy-close { background: none; border: none; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.privacy-close:hover { color: var(--ink); }
.privacy-body { padding: 16px 20px; }
.privacy-body p { color: #cbd5e1; margin: 0 0 12px; font-size: 0.9rem; line-height: 1.5; }
.privacy-body p:last-child { margin-bottom: 0; }
.privacy-body a { color: var(--accent); }

@media (max-width: 760px) {
  .signup-bar-inner { padding: 10px 48px 10px 16px; gap: 6px 12px; }
  .signup-pitch { flex-basis: 100%; font-size: 0.9rem; padding-right: 8px; }
  .signup-row { flex: 1 1 100%; }
  .signup-email { flex: 1 1 auto; }
  .signup-email input { width: 100%; max-width: none; }
  /* tall stacked bar: pin the dismiss to the top-right corner, clear of the fields */
  .signup-dismiss { top: 4px; transform: none; }
  body.signup-bar-open { padding-bottom: 188px; }
}

footer { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 24px; border-top: 1px solid var(--line); }

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  aside.toc { position: static; max-height: none; }
}

/* ============================================================
   Mobile / small-screen responsiveness
   Phones and small tablets (≤760px) — layout is already single
   column below 980px; these rules fix the elements that still
   overflow or cramp at narrow widths.
   ============================================================ */
@media (max-width: 760px) {
  /* --- Tab bar: hamburger (left) + brand, tabs become a dropdown --- */
  .tabs-inner { gap: 8px; padding: 0 10px; }
  .nav-hamburger {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    background: none; border: none; color: var(--accent);
    padding: 12px 8px; cursor: pointer;
  }
  .brand-logo { width: 26px; height: 26px; }
  .brand-name { font-size: 1rem; }
  /* bars animate into an ✕ when the menu is open */
  .tabs-wrap.menu-open .hb-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .tabs-wrap.menu-open .hb-bars span:nth-child(2) { opacity: 0; }
  .tabs-wrap.menu-open .hb-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .tabs {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    gap: 0; padding: 4px 0; margin: 0;
    background: var(--panel); border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(0,0,0,0.45);
    display: none; z-index: 30;
  }
  .tabs-wrap.menu-open .tabs { display: flex; }
  .tabs button {
    width: 100%; text-align: left; margin: 0;
    padding: 14px 18px; font-size: 1rem;
    border-bottom: none; border-left: 3px solid transparent;
  }
  .tabs button.active {
    border-bottom-color: transparent;
    border-left-color: var(--accent);
    background: rgba(249,168,212,0.08);
  }
  .glossary-toggle { flex: 0 0 auto; align-self: center; margin-left: auto; }

  /* --- Page gutters & headings --- */
  .layout { padding: 20px 14px 48px; gap: 24px; }
  main { transform: none; }           /* drop the wide-screen centering shift */
  aside.toc { display: none; }        /* tabs handle navigation on mobile */
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.35rem; }
  .subtitle { font-size: 1rem; }

  /* --- Tables: scroll inside their own box instead of pushing the page --- */
  main table:not(.cf-entries) {
    display: block; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .cf-entries-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre.code { font-size: 0.8rem; }

  /* --- Thyroid diagram: wrap the mode buttons, let step text wrap --- */
  .thyroid-modes { flex-wrap: wrap; }
  .mode-btn { padding: 6px 14px; font-size: 0.8rem; }
  .mode-steps ol li { white-space: normal; }

  /* --- Inline glossary tooltips never exceed the viewport --- */
  .gloss:hover::after, .gloss:focus::after { max-width: calc(100vw - 32px); }

  /* --- Compare form: stack the paired rows --- */
  .cf-row { grid-template-columns: 1fr; }
}

/* Symptom frequency rows: give the label its own line so names aren't
   truncated, and let the bar span the full width below it. */
@media (max-width: 600px) {
  .freq-row {
    grid-template-columns: 28px 1fr 56px;
    grid-template-areas:
      "num label pct"
      "num bar   bar"
      "num desc  desc";
  }
  .freq-label { white-space: normal; overflow: visible; }
}

/* Tightest phones */
@media (max-width: 480px) {
  h1 { font-size: 1.7rem; }
  .layout { padding: 16px 12px 40px; }
  .card { padding: 16px; }
  .hero-num { font-size: 2.8rem; }
}

/* Overview — stepwise "in plain terms" explainer (plain body text, no panel) */
.overview-steps {
  margin: 18px 0;
  line-height: 1.6;
}
.overview-steps p { margin: 0 0 11px; }
.overview-steps p:last-child { margin-bottom: 0; }
.overview-steps strong { color: var(--ink); }
.overview-steps-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin: 0 0 14px !important;
}
.overview-symptoms {
  margin: 8px 0 13px;
  padding-left: 20px;
  columns: 2;
  column-gap: 36px;
  color: var(--muted);
}
.overview-symptoms li { margin: 5px 0; break-inside: avoid; }
@media (max-width: 560px) { .overview-symptoms { columns: 1; } }

/* Overview — who-it-affects stat row (shows women and men) */
.overview-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 6px;
}
.ov-stat {
  flex: 1 1 140px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}
.ov-num { display: block; font-size: 1.8rem; font-weight: 800; color: var(--accent); line-height: 1.1; }
.ov-lbl { display: block; margin-top: 5px; font-size: 0.82rem; color: var(--muted); }

/* Section "next" signpost link */
.section-next {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.section-next a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.section-next a:hover { text-decoration: underline; }