: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="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: none;
  /* Extend asymmetrically: the left side has empty page margin to grow
     into, the right side is constrained by the TOC's position. Inner
     formulas mirror the main-shift (cap 80) and toc-shift (cap 380) so
     that as main moves rightward, extend-left grows and extend-right's
     available headroom (gap + toc-shift - main-shift) is captured. */
  --extend-left: clamp(0px, calc((100vw - 1400px) / 2 + 8px + min(80px, max(0px, calc(50vw - 724px)))), 460px);
  --extend-right: clamp(0px, calc(20px + min(380px, max(0px, calc(50vw - 692px))) - min(80px, max(0px, calc(50vw - 724px)))), 320px);
  margin-left: calc(-1 * var(--extend-left));
  margin-right: calc(-1 * var(--extend-right));
  width: calc(100% + var(--extend-left) + var(--extend-right));
}
.thyroid-anim-grid {
  display: grid;
  /* Constants must sum to 384px so the grid matches the wrapper width
     (a + b + 640 + 2 * 24 = main_width + extend-left + extend-right).
     SVG column = 640 (its own max-width — no actual shrink). Symmetric
     split (192 + 192 = 384) so the right panel gets all of extend-right
     directly — needed to fit list items on one line. */
  grid-template-columns:
    calc(var(--extend-left) + 192px)
    640px
    calc(var(--extend-right) + 192px);
  gap: 24px;
  align-items: center;
}
.thyroid-anim-grid .mode-explain {
  order: -1;
  margin-top: 0;
}
.thyroid-anim-main { width: 680px; }

/* 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="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;
  white-space: nowrap;
}
.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: 1500px) {
  .thyroid-anim-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .thyroid-anim-grid .mode-explain { order: 0; width: 100%; max-width: 680px; }
  .thyroid-anim-main { width: 100%; max-width: 680px; }
  .mode-steps { width: 100%; max-width: 680px; }
}
.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);
}

/* 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 .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; }

.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="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;
  padding-left: 12px;
  border-left: 3px solid var(--accent);
}

/* 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(139,150,163,0.15); border: 1px solid #8b96a3; color: #cbd5e1; }
.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; }

.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: flex-start;
  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; }
.dx-arrow { color: var(--muted); font-size: 1rem; text-align: center; height: 16px; line-height: 16px; }

/* 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; }
.freq-label { grid-area: label; font-size: 0.92rem; font-weight: 600; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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; }

/* 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; }

.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; }

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; }
}