/* ==========================================================================
   Peptidex — stylesheet

   Design intent: a clinical instrument, not a supplement shop. Precision over
   decoration. Cool neutrals, one disciplined accent, technical microtypography
   for metadata, and generous room for long prose to stay readable.

   No frameworks, no webfonts, no network requests — the site must work opened
   straight from disk.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces — cool graphite rather than warm paper */
  --bg:            #f6f8f9;
  --bg-deep:       #eef2f4;
  --surface:       #ffffff;
  --surface-2:     #eff3f5;
  --surface-3:     #e4eaee;
  --border:        #dce3e8;
  --border-strong: #c3ced5;

  /* Ink */
  --text:          #0d1418;
  --text-soft:     #4a5761;
  /* Carries all the small monospace metadata, so it has to clear 4.5:1 —
     the obvious lighter grey does not. */
  --text-faint:    #5e6b74;

  /* Brand blue — primary interactive colour, from the PeptideX wordmark */
  --accent:        #12629f;
  --accent-hover:  #0e5288;
  --accent-text:   #0f5992;
  --accent-soft:   #e6f0f9;
  --accent-line:   #94c1e3;
  --accent-glow:   rgba(18, 98, 159, .13);

  /* Brand green — reserved for the positive signal, as the X is in the logo */
  --signal:        #3d8b1a;
  --signal-text:   #337615;
  --signal-soft:   #edf6e3;
  --signal-line:   #a6d183;
  --signal-glow:   rgba(61, 139, 26, .14);

  /* Wordmark gradient, sampled from the logo */
  --brand-word-from:  #2b9fd4;
  --brand-word-to:    #123f75;
  --brand-word-solid: #16548f;

  /* Signal colours */
  --warn-bg:       #fdf4e4;
  --warn-border:   #e6c78d;
  --warn-text:     #6b4a12;
  --danger:        #a32a25;
  --danger-bg:     #fcecea;
  --danger-border: #eab4b0;

  /* Geometry */
  --radius:    10px;
  --radius-s:  6px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(13, 20, 24, .05);
  --shadow:    0 1px 2px rgba(13, 20, 24, .05), 0 6px 20px rgba(13, 20, 24, .06);
  --shadow-lg: 0 2px 8px rgba(13, 20, 24, .08), 0 16px 40px rgba(13, 20, 24, .10);

  /* Type */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --wrap: 1180px;
  --wrap-narrow: 720px;

  /* The faint technical grid used behind the hero */
  --grid-line: rgba(13, 20, 24, .045);
}

/* Dark is a first-class theme here, not an afterthought. */
:root[data-theme="dark"] {
  --bg:            #0a0e11;
  --bg-deep:       #070a0c;
  --surface:       #121a1f;
  --surface-2:     #1a242b;
  --surface-3:     #223038;
  --border:        #26333b;
  --border-strong: #3a4b56;

  --text:          #e8eff3;
  --text-soft:     #9db0bd;
  --text-faint:    #7d909d;

  --accent:        #4dabe8;
  --accent-hover:  #7cc6f2;
  --accent-text:   #7cc6f2;
  --accent-soft:   #0e2a45;
  --accent-line:   #1e5885;
  --accent-glow:   rgba(77, 171, 232, .17);

  --signal:        #86cc3d;
  --signal-text:   #a4dc6b;
  --signal-soft:   #16300f;
  --signal-line:   #3f7222;
  --signal-glow:   rgba(134, 204, 61, .16);

  --brand-word-from:  #8ed0f5;
  --brand-word-to:    #3f95d4;
  --brand-word-solid: #7cc6f2;

  --warn-bg:       #2b2213;
  --warn-border:   #6b5426;
  --warn-text:     #e8ca92;
  --danger:        #f08b83;
  --danger-bg:     #2e1817;
  --danger-border: #6d322d;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .45);

  --grid-line: rgba(232, 239, 243, .04);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0a0e11;
    --bg-deep:       #070a0c;
    --surface:       #121a1f;
    --surface-2:     #1a242b;
    --surface-3:     #223038;
    --border:        #26333b;
    --border-strong: #3a4b56;

    --text:          #e8eff3;
    --text-soft:     #9db0bd;
    --text-faint:    #7d909d;

    --accent:        #4dabe8;
    --accent-hover:  #7cc6f2;
    --accent-text:   #7cc6f2;
    --accent-soft:   #0e2a45;
    --accent-line:   #1e5885;
    --accent-glow:   rgba(77, 171, 232, .17);

    --signal:        #86cc3d;
    --signal-text:   #a4dc6b;
    --signal-soft:   #16300f;
    --signal-line:   #3f7222;
    --signal-glow:   rgba(134, 204, 61, .16);

    --brand-word-from:  #8ed0f5;
    --brand-word-to:    #3f95d4;
    --brand-word-solid: #7cc6f2;

    --warn-bg:       #2b2213;
    --warn-border:   #6b5426;
    --warn-text:     #e8ca92;
    --danger:        #f08b83;
    --danger-bg:     #2e1817;
    --danger-border: #6d322d;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
    --shadow-lg: 0 2px 8px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .45);

    --grid-line: rgba(232, 239, 243, .04);
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 640; line-height: 1.2; letter-spacing: -.021em; }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); letter-spacing: -.032em; }
h2 { font-size: 1.32rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1.05em; }

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
    transition: text-decoration-color .15s ease, color .15s ease; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

::selection { background: var(--accent-glow); color: var(--text); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.wrap.narrow { max-width: var(--wrap-narrow); }
.muted { color: var(--text-faint); }

/* Visually hidden, but read by screen readers — used for headings that keep
   the document outline correct without appearing on screen. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: 11px 18px; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* A recurring technical micro-label: uppercase, tracked out, monospace. */
.subhead {
  font-family: var(--mono);
  font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint);
  margin: 26px 0 9px;
}
.section > .subhead:first-of-type { margin-top: 0; }

/* --------------------------------------------------------------------------
   3. Topbar
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner { display: flex; align-items: center; gap: 22px; height: 64px; }

.brand {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px;
  font-weight: 700; font-size: 1.02rem; letter-spacing: -.025em;
  color: var(--text); text-decoration: none;
}
/* The tagline sits under the wordmark on every page — the one line that tells a
   first-time visitor what this is. Dropped on narrow screens, where the header
   wraps and the hero carries the same line instead. */
.brand-tagline {
  font-size: .7rem; font-weight: 500; letter-spacing: .005em; line-height: 1;
  color: var(--text-soft); white-space: nowrap;
}
@media (max-width: 760px) { .brand-tagline { display: none; } }
/* The supplied logo, sized by height so a different export still fits.

   Two variants exist because the original's blue gradient bottoms out in
   near-black navy, which measures 1.0:1 against the dark theme background.
   logo-dark.png is derived from the same source with its lightness floor
   raised. Only one is ever displayed, and the switch keys off data-theme
   rather than a media query so the manual toggle works. */
.brand-logo { height: 28px; width: auto; display: block; }
.brand-logo-dark { display: none; }

:root[data-theme="dark"] .brand-logo-light { display: none; }
:root[data-theme="dark"] .brand-logo-dark  { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo-light { display: none; }
  :root:not([data-theme="light"]) .brand-logo-dark  { display: block; }
}

@media (max-width: 640px) { .brand-logo { height: 24px; } }

.topnav { display: flex; gap: 2px; margin-left: auto; }
.topnav a {
  position: relative;
  color: var(--text-soft); text-decoration: none;
  font-size: .9rem; font-weight: 520; letter-spacing: -.005em;
  padding: 8px 13px; border-radius: 7px;
  transition: color .15s ease, background .15s ease;
}
.topnav a:hover { background: var(--surface-2); color: var(--text); }

.icon-btn {
  display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: .95rem; line-height: 1;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.icon-btn:hover { border-color: var(--accent-line); color: var(--accent-text); background: var(--accent-soft); }

/* Below this width the inline bar (logo + tagline + six items, two of them
   dropdown triggers, + toggle) runs out of room, so drop the nav to its own
   full-width row under the logo rather than let anything overflow — the
   overflow-x scrollbar is hidden by design, so an item pushed past the edge
   would vanish with nothing to suggest it exists. The dropdown menus switch to
   their accordion form at the same width (below), so the whole header changes
   mode in one step. */
@media (max-width: 1024px) {
  .topbar-inner { height: auto; flex-wrap: wrap; padding-block: 11px; gap: 10px; }
  .topnav { width: 100%; order: 3; margin-left: 0; flex-wrap: wrap; row-gap: 2px; }
  .icon-btn { margin-left: auto; }
}

/* Phones: tighten each item enough that the full set fits a 375px screen on two
   rows without scrolling. The wider stack above already prevents overflow; this
   only makes the wrapped rows compact. */
@media (max-width: 640px) {
  .topnav a { padding: 6px 8px; white-space: nowrap; }
}

/* Older small phones (iPhone SE and similar, 320px). One more step down keeps
   every nav item reachable there too, rather than silently parking the last
   one behind a scrollbar that is deliberately invisible. */
@media (max-width: 360px) {
  .topnav a { padding: 6px 5px; font-size: .82rem; }
}

/* --------------------------------------------------------------------------
   3b. Nav dropdowns
   --------------------------------------------------------------------------
   Two top-level items (Guides, Reference) are grouped menus, so the bar stays
   short while every page is one reveal away. Built to work three ways at once
   without any one stranding the menu in a wrong state: hover on a fine pointer
   and focus for the keyboard (CSS), plus an explicit click/tap that pins it
   open (JS sets .open) — the only mode a touch screen has. Visibility is the
   union of those, never a single fragile mechanism. */
.nav-group { position: relative; display: flex; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: .9rem; font-weight: 520; letter-spacing: -.005em;
  color: var(--text-soft); background: none; border: 0; cursor: pointer;
  padding: 8px 13px; border-radius: 7px;
  transition: color .15s ease, background .15s ease;
}
.nav-trigger:hover,
.nav-group.open .nav-trigger { background: var(--surface-2); color: var(--text); }
/* A caret drawn from a border corner — no glyph to depend on — that flips when
   the menu opens, so the control's state is visible, not just implied. */
.nav-trigger::after {
  content: ""; width: 6px; height: 6px; margin-left: -1px; flex: none;
  border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease; opacity: .6;
}
.nav-trigger[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); opacity: .9; }

.nav-menu {
  display: none; position: absolute; top: calc(100% + 7px); left: 0;
  min-width: 210px; z-index: 60;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 6px;
  box-shadow: 0 14px 38px -14px rgba(0, 0, 0, .38), 0 3px 10px -5px rgba(0, 0, 0, .22);
}
/* An invisible bridge over the 7px gap between the trigger and the card. Without
   it that gap belongs to nothing — not the trigger, not the menu — so the moment
   the pointer crosses it the group's :hover drops and the menu closes before it
   can be reached. The bridge is part of the menu (a descendant of the group), so
   travelling across it keeps the group hovered and the menu open. */
.nav-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px;
}
.nav-group.open > .nav-menu { display: block; }
@media (hover: hover) and (pointer: fine) {
  .nav-group:hover > .nav-menu,
  .nav-group:focus-within > .nav-menu { display: block; }
}
.nav-menu a {
  display: block; white-space: nowrap;
  color: var(--text-soft); text-decoration: none;
  font-size: .9rem; font-weight: 500; letter-spacing: -.005em;
  padding: 8px 11px; border-radius: 7px;
  transition: color .12s ease, background .12s ease;
}
.nav-menu a:hover,
.nav-menu a:focus-visible { background: var(--surface-2); color: var(--text); outline: none; }

/* Stacked (small-screen) layout: the menu is no longer a floating card but an
   indented block that pushes the rows below it down, so a tap never covers the
   items it sits among. Matches the header-stack breakpoint above. */
@media (max-width: 1024px) {
  .nav-group { width: 100%; flex-direction: column; }
  .nav-trigger { width: 100%; justify-content: flex-start; }
  .nav-menu {
    position: static; min-width: 0; box-shadow: none; border: 0;
    padding: 2px 0 4px 12px; border-radius: 0;
    background: none;
  }
  /* No floating gap to bridge here, and a stray transparent overlay could
     intercept a tap on the trigger — so drop it in the stacked layout. */
  .nav-menu::before { display: none; }
  .nav-menu a { padding: 7px 8px; }
}

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(46px, 7vw, 84px) 0 34px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
  overflow: hidden;
}

/* Faint engineering grid + a soft accent wash. Pure CSS, no assets. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
}
/* Two washes, blue then green — the logo's colour pairing, at a whisper. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(620px 620px at calc(100% - 60px) -180px, var(--accent-glow) 0%, transparent 66%),
    radial-gradient(460px 460px at calc(100% - 340px) -80px, var(--signal-glow) 0%, transparent 62%);
}
.hero > .wrap { position: relative; z-index: 1; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .715rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  padding: 5px 12px; border-radius: 999px;
  margin-bottom: 20px;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.hero h1 { max-width: 17ch; margin-bottom: .3em; }
.hero-sub {
  font-size: 1.1rem; color: var(--text-soft);
  max-width: 58ch; margin-bottom: 30px;
}

/* --------------------------------------------------------------------------
   5. Search + filters
   -------------------------------------------------------------------------- */

.searchbox { position: relative; max-width: 640px; }
.searchbox input {
  width: 100%; font: inherit; font-size: 1.02rem;
  padding: 16px 54px 16px 50px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.searchbox input::placeholder { color: var(--text-faint); }
.searchbox input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow), var(--shadow-sm);
}
.searchbox input::-webkit-search-cancel-button { cursor: pointer; }
.search-icon {
  position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; fill: none; stroke: var(--text-faint);
  stroke-width: 2; stroke-linecap: round; pointer-events: none;
  transition: stroke .15s ease;
}
.searchbox input:focus ~ .search-icon { stroke: var(--accent); }
.slash-hint {
  position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  font: 600 .75rem var(--mono); color: var(--text-faint);
  border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px;
  background: var(--surface-2); pointer-events: none;
}
@media (max-width: 640px) { .slash-hint { display: none; } }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.chip {
  font: inherit; font-size: .855rem; font-weight: 520;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.chip .muted { font-family: var(--mono); font-size: .78em; }
.chip:hover { border-color: var(--accent-line); color: var(--text); }
.chip[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.chip[aria-pressed="true"] .muted { color: rgba(255,255,255,.72); }
:root[data-theme="dark"] .chip[aria-pressed="true"] { color: #04202f; }
:root[data-theme="dark"] .chip[aria-pressed="true"] .muted { color: rgba(4,33,29,.65); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip[aria-pressed="true"] { color: #04202f; }
  :root:not([data-theme="light"]) .chip[aria-pressed="true"] .muted { color: rgba(4,33,29,.65); }
}

.result-meta {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .04em;
  color: var(--text-faint); margin: 30px 0 16px; text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   6. Card grid
   -------------------------------------------------------------------------- */

.grid {
  display: grid; gap: 14px; padding-bottom: 72px;
  grid-template-columns: repeat(auto-fill, minmax(286px, 1fr));
}

.card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 9px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 19px; text-decoration: none; color: inherit;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
/* Hairline that lights up on hover — the one piece of motion on the card. */
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}
.card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card:hover::before { transform: scaleX(1); }

.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card h3 { margin: 0; font-size: 1.06rem; letter-spacing: -.02em; }
.card-aka {
  font-family: var(--mono); font-size: .73rem; color: var(--text-faint);
  margin: -5px 0 0; letter-spacing: .01em;
}
.card p.card-one { font-size: .895rem; color: var(--text-soft); margin: 0; flex: 1; line-height: 1.55; }
.card-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px; }

/* --------------------------------------------------------------------------
   7. Badges
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .685rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 5px; white-space: nowrap;
  border: 1px solid transparent;
}
.badge.cat { background: var(--surface-2); color: var(--text-soft); border-color: var(--border); }

/* Evidence level reads as an instrument status light. */
.lvl-preclinical, .lvl-early-clinical, .lvl-clinically-proven { position: relative; }
.lvl-preclinical::before, .lvl-early-clinical::before, .lvl-clinically-proven::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none;
}
.lvl-preclinical      { background: var(--surface-2);  color: var(--text-faint);  border-color: var(--border-strong); }
.lvl-early-clinical   { background: var(--warn-bg);    color: var(--warn-text);   border-color: var(--warn-border); }
/* Green is the brand's accent colour, so it marks the one genuinely positive
   status: a compound with real trials behind it. */
.lvl-clinically-proven{ background: var(--signal-soft);color: var(--signal-text); border-color: var(--signal-line); }

.empty { text-align: center; padding: 72px 20px; color: var(--text-soft); }
.linkbtn { font: inherit; background: none; border: none; padding: 0; color: var(--accent-text); text-decoration: underline; cursor: pointer; }

/* Primary call-to-action button. Used on the 404 page; reusable for any CTA. */
.btn {
  display: inline-block; padding: 10px 20px; border-radius: 9px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: .95rem;
  text-decoration: none; border: 1px solid transparent;
  transition: background .15s ease;
}
.btn:hover { background: var(--accent-hover); text-decoration: none; }
:root[data-theme="dark"] .btn, .btn { color: #fff; }

/* --------------------------------------------------------------------------
   8. Detail page
   -------------------------------------------------------------------------- */

.crumbs {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
  color: var(--text-faint); margin: 28px 0 20px;
}
.crumbs a { color: var(--text-soft); text-decoration: none; }
.crumbs a:hover { color: var(--accent-text); }

.detail-head { padding-bottom: 26px; border-bottom: 1px solid var(--border); }
.detail-head h1 { margin-bottom: .14em; }
.detail-aka { font-family: var(--mono); font-size: .8rem; color: var(--text-faint); margin: 0 0 16px; }
.detail-lede { font-size: 1.14rem; color: var(--text-soft); max-width: 62ch; margin: 0 0 18px; line-height: 1.6; }
.detail-badges { display: flex; flex-wrap: wrap; gap: 7px; }

.detail-layout {
  display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 48px;
  align-items: start; padding-bottom: 84px;
}
@media (max-width: 940px) { .detail-layout { grid-template-columns: 1fr; gap: 0; } }

/* Side index, numbered like a document */
.sidenav { position: sticky; top: 90px; padding-top: 34px; counter-reset: navitem; }
.sidenav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sidenav a {
  display: flex; align-items: baseline; gap: 9px;
  padding: 7px 11px; font-size: .875rem; color: var(--text-soft);
  text-decoration: none; border-radius: 6px;
  border-left: 2px solid transparent;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.sidenav a::before {
  counter-increment: navitem; content: counter(navitem, decimal-leading-zero);
  font-family: var(--mono); font-size: .68rem; color: var(--text-faint); flex: none;
}
.sidenav a:hover { background: var(--surface-2); color: var(--text); }
.sidenav a.active {
  color: var(--accent-text); border-left-color: var(--accent);
  background: var(--accent-soft); font-weight: 560;
}
.sidenav a.active::before { color: var(--accent-text); }

@media (max-width: 940px) {
  .sidenav { position: static; padding: 20px 0 0; }
  .sidenav ul { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 8px; scrollbar-width: none; }
  .sidenav ul::-webkit-scrollbar { display: none; }
  .sidenav a { white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; }
  .sidenav a.active { border-left: none; border-bottom-color: var(--accent); }
}

/* Numbered sections */
.detail-body { counter-reset: sect; }
.section { padding-top: 40px; }
.section > h2 {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 11px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.section > h2::before {
  counter-increment: sect; content: counter(sect, decimal-leading-zero);
  font-family: var(--mono); font-size: .74rem; font-weight: 600;
  color: var(--accent-text); letter-spacing: .06em;
  padding: 2px 7px; border-radius: 4px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  flex: none; align-self: center;
}
.section p:last-child { margin-bottom: 0; }

/* Spec table — hairline rows, monospace values where they are data */
.facts {
  display: grid; grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 0; font-size: .92rem;
  border-top: 1px solid var(--border);
}
.facts dt {
  color: var(--text-faint); padding: 10px 22px 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: .82rem; letter-spacing: .01em;
}
.facts dd {
  margin: 0; padding: 10px 0; border-bottom: 1px solid var(--border);
  color: var(--text);
}
.facts dd.seq {
  font-family: var(--mono); font-size: .8rem; word-break: break-all; line-height: 1.55;
  color: var(--accent-text);
}

/* The Legal page reuses the spec table for status categories, but its values
   are sentences rather than data — so the label column is wider, the value
   column gets prose line-height, and the label keeps the weight of a heading. */
.legal-cats { grid-template-columns: minmax(190px, max-content) 1fr; }
.legal-cats dt {
  color: var(--text); font-size: .9rem; font-weight: 600;
  padding-top: 14px; padding-bottom: 14px;
}
.legal-cats dd { padding: 14px 0; line-height: 1.65; color: var(--text-soft, var(--text)); }
.legal-count {
  display: block; font-weight: 400; font-size: .76rem;
  color: var(--text-faint); letter-spacing: .01em; margin-top: 2px;
}
@media (max-width: 560px) {
  .legal-cats { grid-template-columns: 1fr; }
  .legal-cats dd { padding-top: 4px; }
}

/* On a phone a two-column spec table leaves the value column too narrow to
   read, so the label sits above its value instead. */
@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding: 12px 0 0; border-bottom: none; }
  .facts dd { padding: 2px 0 12px; }
}

ul.clean, ol.clean { padding-left: 1.15em; margin: 0 0 1em; }
ul.clean li, ol.clean li { margin-bottom: .5em; }
ul.clean li::marker { color: var(--accent-line); }

/* Inline citation marker: which reference backs this sentence */
.cite {
  display: inline-block; vertical-align: super;
  font-family: var(--mono); font-size: .62em; font-weight: 600;
  line-height: 1; padding: 1px 4px; margin-left: 1px;
  border-radius: 4px; text-decoration: none;
  background: var(--accent-soft); color: var(--accent-text);
  border: 1px solid var(--accent-line);
}
a.cite:hover { background: var(--accent); color: #fff; }
:root[data-theme="dark"] a.cite:hover { color: #04202f; }
span.cite { opacity: .6; cursor: help; }

/* Biological origin. Animal, human and dairy sources are marked warmly enough
   to be noticed by someone scanning for them, without implying a hazard —
   these are facts about manufacture, not warnings. */
.origin-synthetic   { background: var(--surface-2);   color: var(--text-soft);   border-color: var(--border-strong); }
.origin-recombinant { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-line); }
.origin-animal,
.origin-human,
.origin-dairy       { background: var(--warn-bg);     color: var(--warn-text);   border-color: var(--warn-border); }

/* Source line under the doping claim — quiet, but always present */
.wada-source { font-size: .82rem; line-height: 1.55; opacity: .85; margin: 8px 0 0 !important; }

/* Blend composition: each component links to its own entry */
.components { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.components li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 13px; border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--surface); margin-bottom: 6px;
}
.components a { font-weight: 550; text-decoration: none; }
.components a:hover { text-decoration: underline; }
.comp-amount { font-family: var(--mono); font-size: .82rem; color: var(--text-faint); white-space: nowrap; }

/* Dosing tiles read as instrument readouts */
.dose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; margin-bottom: 22px; }
.dose-cell {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: 14px 16px; position: relative; overflow: hidden;
}
.dose-cell::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent-line);
}
.dose-cell .k {
  font-family: var(--mono); font-size: .67rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-faint); margin-bottom: 5px;
}
.dose-cell .v { font-weight: 570; font-size: .95rem; line-height: 1.45; }

/* Protocols — a validated titration and a forum rumour must not look alike */
.protocol {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 18px 20px; margin-bottom: 16px;
}
.proto-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 6px;
}
.proto-head h3 { margin: 0; font-size: 1.02rem; }
.proto-source { font-size: .82rem; color: var(--text-faint); margin: 0 0 12px; }
.proto-source a { color: var(--text-soft); }

.proto-approved    { background: var(--signal-soft); color: var(--signal-text); border-color: var(--signal-line); }
.proto-trial       { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-line); }
.proto-circulating { background: var(--warn-bg);     color: var(--warn-text);   border-color: var(--warn-border); }

.proto-steps { width: 100%; border-collapse: collapse; font-size: .93rem; margin: 4px 0 0; }
.proto-steps th, .proto-steps td {
  text-align: left; padding: 9px 0; border-bottom: 1px solid var(--border); vertical-align: top;
}
.proto-steps tr:last-child th, .proto-steps tr:last-child td { border-bottom: none; }
.proto-steps th {
  font-weight: 500; color: var(--text-faint); font-size: .86rem;
  width: 40%; padding-right: 18px;
}
.proto-steps td { font-family: var(--mono); font-size: .88rem; }

.proto-notes { font-size: .89rem; color: var(--text-soft); margin: 14px 0 0; }
.proto-foot { font-size: .84rem; color: var(--text-faint); margin: 0; }

@media (max-width: 520px) {
  .proto-steps th, .proto-steps td { display: block; width: auto; padding-bottom: 2px; }
  .proto-steps td { padding-bottom: 10px; }
}

/* Callouts */
.callout {
  border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  background: var(--surface); border-radius: var(--radius-s);
  padding: 15px 18px; margin: 20px 0; font-size: .93rem; line-height: 1.6;
}
.callout p:last-child { margin-bottom: 0; }
.callout.warn   { background: var(--warn-bg);   border-color: var(--warn-border);  border-left-color: var(--warn-border); color: var(--warn-text); }
.callout.danger { background: var(--danger-bg); border-color: var(--danger-border); border-left-color: var(--danger); color: var(--danger); }
.callout.info   { background: var(--accent-soft); border-color: var(--accent-line); border-left-color: var(--accent); color: var(--accent-text); }

/* References */
.refs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: ref; }
.refs li { padding-left: 34px; position: relative; }
.refs li::before {
  counter-increment: ref; content: counter(ref, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--mono); font-size: .7rem; color: var(--text-faint);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
}
.refs .r-title { display: block; font-weight: 540; font-size: .94rem; line-height: 1.45; }
.refs .r-src { font-family: var(--mono); font-size: .76rem; color: var(--text-faint); }

/* --------------------------------------------------------------------------
   9. Calculator — the instrument panel
   -------------------------------------------------------------------------- */

.calc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow);
}
.calc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 15px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
}
.field .with-unit { position: relative; display: flex; }
.field input, .field select {
  font: inherit; font-size: .97rem; width: 100%;
  padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-s);
  background: var(--bg); color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input { font-family: var(--mono); font-size: .98rem; }
.field input:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
.field .unit {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: .8rem; color: var(--text-faint); pointer-events: none;
}
/* The dose unit is a control, not a label. Styled as plain text it read as
   decoration, which is how a dose gets entered against the wrong unit. */
.field .unit .unit-select {
  pointer-events: auto;
  appearance: none; -webkit-appearance: none;
  font: inherit; color: var(--accent-text); cursor: pointer;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line); border-radius: 5px;
  padding: 2px 6px; width: auto;
}
.field .unit .unit-select:hover { border-color: var(--accent); }
.field .unit .unit-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field input.has-unit { padding-right: 50px; }
.field .hint { font-size: .78rem; color: var(--text-faint); line-height: 1.5; }

.calc-pick { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.calc-pick select { font-size: 1rem; padding: 12px 13px; }
.calc-pick .hint { margin: 0; }

.calc-out { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.calc-answer { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.calc-answer .big {
  font-family: var(--mono);
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3rem); font-weight: 600;
  letter-spacing: -.035em; color: var(--accent-text); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.calc-answer .unit-lbl { font-size: .98rem; color: var(--text-soft); font-weight: 540; }
.calc-detail { font-size: .89rem; color: var(--text-soft); margin: 0; }
.calc-detail strong { font-family: var(--mono); font-weight: 600; color: var(--text); }
.calc-error { color: var(--danger); font-size: .92rem; font-weight: 540; }

/* Quiet by design: it sits under every result, so it has to inform without
   shouting. The word "units" doing double duty is the hazard it addresses. */
.calc-iu-note {
  font-size: .82rem; line-height: 1.55; color: var(--text-faint);
  margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--border);
}
.calc-iu-note strong { color: var(--text-soft); }

.calc-context { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.calc-context:empty { display: none; }
.calc-context .subhead { margin-top: 0; }
.calc-context .facts { margin-bottom: 16px; }
.calc-context p:last-child { margin-bottom: 0; }

/* Syringe drawing */
.syringe { margin-top: 20px; }
.syringe svg { width: 100%; height: auto; display: block; max-width: 540px; }
.syr-barrel-fill { fill: var(--surface); }
.syr-barrel-line { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.syr-fill        { fill: color-mix(in srgb, var(--accent) 30%, transparent); }
.syr-needle      { stroke: var(--border-strong); stroke-width: 2.5; stroke-linecap: round; }
.syr-hub         { fill: var(--surface-3); stroke: var(--border-strong); stroke-width: 1.2; }
.syr-rod         { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1; }
.syr-stopper     { fill: var(--border-strong); }
.syr-flange      { fill: var(--surface-3); stroke: var(--border-strong); stroke-width: 1.2; }
.syr-tick        { stroke: var(--text-faint); stroke-width: 1; opacity: .5; }
.syr-tick-major  { stroke: var(--text-soft); stroke-width: 1.3; }
.syr-label       { fill: var(--text-faint); font-size: 10px; font-family: var(--mono); }
/* The dose is read against the front face of the stopper, so that edge is
   marked rather than the fill boundary in general. */
.syr-read        { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }

.formula {
  font-family: var(--mono); font-size: .875rem; background: var(--surface-2);
  border: 1px solid var(--border); border-left: 3px solid var(--accent-line);
  border-radius: var(--radius-s); padding: 13px 16px; overflow-x: auto;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   10. Prose pages
   -------------------------------------------------------------------------- */

.prose { padding-bottom: 84px; }
.prose .lede { font-size: 1.12rem; color: var(--text-soft); line-height: 1.6; }
.prose h2 { margin-top: 2.1em; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--accent-line); }
.prose code {
  font-family: var(--mono); font-size: .87em; background: var(--surface-2);
  padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border);
}

.deflist { margin: 0; }
.deflist dt { margin-top: 16px; }
.deflist dd { margin: 6px 0 0; color: var(--text-soft); font-size: .95rem; }

/* --------------------------------------------------------------------------
   11. Age gate
   -------------------------------------------------------------------------- */

.age-gate {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--bg-deep) 82%, transparent);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.age-gate[hidden] { display: none; }

/* Set on <html> while the gate is up, so the page behind cannot be scrolled. */
.age-locked, .age-locked body { overflow: hidden; }

.age-card {
  width: 100%; max-width: 440px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 34px 32px 26px; box-shadow: var(--shadow-lg);
  text-align: center;
  animation: age-rise .3s cubic-bezier(.2, .7, .3, 1);
}
@media (prefers-reduced-motion: reduce) { .age-card { animation: none; } }
@keyframes age-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.age-card:focus { outline: none; }

.age-mark {
  width: 50px; height: 50px; margin: 0 auto 18px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent-text);
  font-family: var(--mono); font-size: .92rem; font-weight: 600; letter-spacing: .02em;
}
.age-card h2 { font-size: 1.24rem; margin: 0 0 12px; }
.age-card p { color: var(--text-soft); font-size: .95rem; margin: 0 0 10px; }

.age-actions { display: flex; gap: 10px; margin: 24px 0 18px; }
.age-btn {
  flex: 1; font: inherit; font-size: .95rem; font-weight: 600;
  padding: 12px 16px; border-radius: var(--radius-s); cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.age-yes { background: var(--accent); color: #fff; }
.age-yes:hover { background: var(--accent-hover); }
:root[data-theme="dark"] .age-yes { color: #04202f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .age-yes { color: #04202f; }
}
.age-no { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.age-no:hover { background: var(--surface-2); }

.age-note { font-size: .8rem; line-height: 1.5; color: var(--text-faint); margin: 0; }

@media (max-width: 420px) {
  .age-card { padding: 28px 22px 22px; }
  .age-actions { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   12. Analytics consent
   -------------------------------------------------------------------------- */

/* A bar, not a modal. It gates a script that has not loaded, so there is no
   reason to block the page — and a second dialog on top of the age gate would
   be hostile. */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: var(--surface); border-top: 1px solid var(--border-strong);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .10);
  padding: 14px 0;
}
:root[data-theme="dark"] .consent { box-shadow: 0 -6px 24px rgba(0, 0, 0, .5); }
.consent[hidden] { display: none; }

.consent-inner {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  justify-content: space-between;
}
.consent-text { margin: 0; font-size: .9rem; color: var(--text-soft); max-width: 68ch; }

.consent-actions { display: flex; gap: 10px; flex: none; }
.consent-btn {
  font: inherit; font-size: .9rem; font-weight: 600;
  padding: 9px 18px; border-radius: var(--radius-s); cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
/* Equal weight on purpose: a decline that is harder to press than accept is
   not consent. */
.consent-yes { background: var(--accent); color: #fff; }
.consent-yes:hover { background: var(--accent-hover); }
:root[data-theme="dark"] .consent-yes { color: #04202f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .consent-yes { color: #04202f; }
}
.consent-no { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.consent-no:hover { background: var(--surface-2); }

#consentControls .consent-btn { margin-right: 8px; }

@media (max-width: 620px) {
  .consent-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .consent-actions { justify-content: stretch; }
  .consent-btn { flex: 1; }
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--border); background: var(--bg-deep);
  padding: 30px 0; margin-top: auto;
}
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  justify-content: space-between; align-items: center;
  font-size: .865rem; color: var(--text-soft);
}
.footer p { margin: 0; }
.footer .muted { font-family: var(--mono); font-size: .76rem; letter-spacing: .03em; }

/* --------------------------------------------------------------------------
   14. Print
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   15. History timeline
   -------------------------------------------------------------------------- */

.history { margin-top: 14px; }

/* Each era opens with a banded header so the eye can find the decade breaks
   while scanning. */
.era { margin: 0 0 30px; }
.era > h2 {
  margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.era-span {
  font-family: var(--mono); font-size: .82rem; font-weight: 500; letter-spacing: .02em;
  color: var(--accent-text); white-space: nowrap;
}
.era-intro { color: var(--text-soft); margin: 10px 0 4px; font-size: .97rem; }

/* Year-anchored timeline: a fixed left column of years you can read straight
   down, a hairline rule between, and the content hanging to its right. */
.timeline { list-style: none; margin: 18px 0 0; padding: 0; }
.ev {
  display: grid; grid-template-columns: 62px 1fr; gap: 0 20px;
  padding: 0 0 22px; position: relative;
}
.ev::before {
  content: ""; position: absolute; left: 68px; top: 6px; bottom: 0;
  border-left: 1px solid var(--border);
}
.ev:last-child::before { bottom: auto; height: 14px; }
.ev-year {
  font-family: var(--mono); font-size: .84rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--accent-text); text-align: right; padding-top: 1px;
}
.ev-main { position: relative; padding-left: 18px; }
.ev-main::before {
  content: ""; position: absolute; left: -8px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--accent-line);
}
.ev-title { margin: 0 0 5px; font-size: 1.02rem; line-height: 1.3; }
.ev-main > p { margin: 0 0 7px; }
.ev-why {
  color: var(--text-soft); font-size: .92rem;
  border-left: 2px solid var(--accent-line); padding-left: 11px;
}

/* Uncertainty is shown, not hidden - see history_body.py. */
.ev-flag {
  font-size: .84rem; line-height: 1.5; color: var(--text-soft);
  background: var(--surface-2); border-radius: 7px;
  padding: 8px 11px; margin: 0 0 8px;
}
.ev-flag::before { font-weight: 600; color: var(--text); }
.ev-flag.part-verified::before { content: "Partly verified. "; }
.ev-flag.unverified::before { content: "Unverified. "; }

/* Compact source line: small numbered links, full citation in the title. */
.ev-src-line { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; }
.ev-cite {
  font-size: .78rem; line-height: 1.4; color: var(--text-faint); text-decoration: none;
}
.ev-cite[href]:hover { color: var(--accent-text); text-decoration: underline; }

@media (max-width: 560px) {
  .ev { grid-template-columns: 1fr; gap: 0; padding-left: 16px; }
  .ev::before { left: 4px; }
  .ev-year { text-align: left; margin-bottom: 3px; }
  .ev-main { padding-left: 0; }
  .ev-main::before { left: -12px; }
  .era > h2 { flex-direction: column; gap: 2px; }
}

/* Inline source lists on the explainer pages — smaller than body prose, so a
   long citation block reads as apparatus rather than as argument. */
.src-list { margin: -4px 0 22px; padding: 0; }
.src-list li {
  font-size: .86rem; line-height: 1.55; color: var(--text-faint);
  padding-left: 15px; position: relative; margin-bottom: 4px;
}
.src-list li::before {
  content: "97"; position: absolute; left: 0; top: 0;
  color: var(--accent-line); font-size: .78rem;
}
.src-list a { color: var(--text-soft); }
.src-list a:hover { color: var(--accent-text); }

/* --------------------------------------------------------------------------
   16. Related entries
   -------------------------------------------------------------------------- */

ul.related { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
ul.related a {
  display: block; padding: 11px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-s); background: var(--surface);
  text-decoration: none; transition: border-color .15s ease, background .15s ease;
}
ul.related a:hover { border-color: var(--accent-line); background: var(--surface-2); }
.rel-name { display: block; font-weight: 600; color: var(--accent-text); font-size: .96rem; }
.rel-one {
  display: block; color: var(--text-soft); font-size: .86rem; line-height: 1.45;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   17. Testing page — lab directory, and the legal quote block
   -------------------------------------------------------------------------- */

.lab {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 15px 18px; margin: 0 0 12px; background: var(--surface);
}
.lab h3 { margin: 0 0 3px; font-size: 1.04rem; }
.lab-where {
  font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .02em;
  color: var(--accent-text); margin-left: 8px;
}
.lab-note { margin: 0 0 10px; color: var(--text-soft); font-size: .92rem; }
.lab-facts { margin: 0; display: grid; grid-template-columns: minmax(96px, max-content) 1fr; gap: 0; }
.lab-facts dt {
  color: var(--text-faint); font-size: .74rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; padding: 7px 16px 7px 0;
  border-top: 1px solid var(--border);
}
.lab-facts dd {
  margin: 0; padding: 7px 0; border-top: 1px solid var(--border);
  font-size: .9rem; line-height: 1.5; color: var(--text-soft);
}
.lab-facts dt:first-of-type, .lab-facts dd:first-of-type { border-top: none; }

/* A regulator quote, set apart from the argument around it. */
.legal-quote {
  margin: 14px 0; padding: 12px 18px; border-left: 3px solid var(--accent-line);
  background: var(--surface-2); border-radius: 0 8px 8px 0;
}
.legal-quote p { margin: 0 0 6px; }
.legal-quote p:last-child { margin-bottom: 0; }
.legal-cite { font-size: .84rem; color: var(--text-faint); }

@media (max-width: 560px) {
  .lab-facts { grid-template-columns: 1fr; }
  .lab-facts dt { padding-bottom: 0; }
  .lab-facts dd { padding-top: 2px; border-top: none; }
}

/* --------------------------------------------------------------------------
   18. Glossary and grouped footer links
   -------------------------------------------------------------------------- */

dl.glossary { margin: 0 0 24px; }
dl.glossary dt {
  font-weight: 640; color: var(--text); margin-top: 14px; font-size: 1rem;
}
dl.glossary dd {
  margin: 3px 0 0; color: var(--text-soft); line-height: 1.55;
}

/* Footer link groups: a small label, then wrapped links. */
.footer-links { margin: 6px 0 0; line-height: 1.9; }
.footer-links strong {
  color: var(--text-soft); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; margin-right: 8px;
}
.footer-links a { margin-right: 14px; white-space: nowrap; }

.footer .footer-copyright {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: .8rem; color: var(--text-faint);
}

/* Contact form */
.contact-form { margin: 6px 0 4px; }
.contact-form .field { margin-bottom: 15px; }
.contact-form label {
  display: block; font-size: .86rem; font-weight: 600; color: var(--text-soft); margin-bottom: 5px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.contact-form select {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-s);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  outline: none; border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.contact-form .btn { margin-top: 4px; cursor: pointer; }
.contact-form .cf-note { margin-top: 14px; font-size: .82rem; line-height: 1.5; }
/* Honeypot: present for bots, off-screen for people and assistive tech. */
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   19. Topic hubs, comparisons and FAQ
   -------------------------------------------------------------------------- */

/* Hero "Popular:" line */
.hero-topics { margin: 16px 0 0; font-size: .92rem; color: var(--text-soft); line-height: 1.7; }
.hero-topics a { color: var(--accent-text); text-decoration: none; font-weight: 500; }
.hero-topics a:hover { text-decoration: underline; }

/* Status pill reused across hub lists and comparison tables */
.hub-stage {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border-strong);
  white-space: nowrap; vertical-align: middle;
}
.hub-ok   { background: var(--signal-soft); color: var(--signal-text); border-color: var(--signal-line); }
.hub-warn { background: var(--warn-bg);     color: var(--warn-text);   border-color: var(--warn-border); }

/* Hub: grouped family lists */
.hub-group { margin: 22px 0; }
.hub-group h3 { margin: 0 0 2px; font-size: 1.06rem; }
.hub-blurb { margin: 0 0 10px; color: var(--text-soft); font-size: .92rem; }
.hub-list { list-style: none; margin: 0; padding: 0; }
.hub-item {
  padding: 9px 0; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline;
}
.hub-item:first-child { border-top: 0; }
.hub-item a { text-decoration: none; color: var(--accent-text); }
.hub-item a:hover { text-decoration: underline; }
.hub-brand { color: var(--text-faint); font-weight: 400; font-size: .9em; }
.hub-stage { justify-self: end; }
.hub-one { grid-column: 1 / -1; color: var(--text-soft); font-size: .88rem; line-height: 1.45; }

/* Comparison table */
.cmp-wrap { overflow-x: auto; margin: 18px 0; }
.cmp { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 460px; }
.cmp th, .cmp td {
  text-align: left; vertical-align: top; padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.cmp thead th { border-bottom: 2px solid var(--border-strong); font-size: .95rem; }
.cmp thead th a { color: var(--accent-text); text-decoration: none; }
.cmp thead th a:hover { text-decoration: underline; }
.cmp tbody th[scope="row"] {
  color: var(--text-soft); font-weight: 600; white-space: nowrap;
  background: var(--surface-2);
}
.cmp .cmp-brand { display: block; font-size: .78rem; font-weight: 400; color: var(--text-faint); }

/* FAQ (details/summary) */
.faq { margin: 30px 0 8px; }
.faq-intro { color: var(--text-soft); }
.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 14px 30px 14px 2px; position: relative;
  font-weight: 560; color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); opacity: .5; transition: transform .18s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item summary:hover { color: var(--accent-text); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; border-radius: 4px; }
.faq-a { padding: 0 2px 16px; color: var(--text-soft); line-height: 1.6; }
.faq-a a { color: var(--accent-text); }

@media print {
  .topbar, .sidenav, .footer, .chips, .searchbox, .hero::before, .hero::after { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .detail-layout { display: block; }
  .section > h2::before { background: none; border: none; color: #000; }
  a { text-decoration: none; color: #000; }
  .card { break-inside: avoid; }
}