/* ==========================================================================
   Dalphene Index — app.css
   The complete design system. One stylesheet, no imports, no remote fonts,
   no CDN. Dark is the default and only shipped-by-default theme; light is a
   secondary override under [data-theme="light"] and prefers-color-scheme.

   ORDER
     01  tokens (dark)            08  cards
     02  tokens (light override)  09  ranked rows
     03  reset + base             10  stat strip
     04  layout + utilities       11  tables
     05  topbar                   12  charts
     06  buttons / inputs         13  tooltips + honest labels
     07  hero + stat counters     14  browse controls + filter rail
                                  15  detail page chrome
                                  16  footer
                                  17  prose (methodology / about only)
                                  18  misc (404, empty states, pager)
                                  19  glossary ("?" affordance + term list)
   ========================================================================== */

/* ==========================================================================
   01  TOKENS — DARK (default)
   ========================================================================== */

:root {
  color-scheme: dark light;

  /* neutral ramp */
  --bg: #0a0a0e;
  --surface: #101015;
  --surface-2: #17171d;
  --border: #24242c;
  --border-2: #33333d;
  --text: #f2f2f5;
  --text-muted: #a1a1ac;
  --text-dim: #7c7c88;

  --hairline: rgba(255, 255, 255, .06);
  --overlay: rgba(6, 6, 9, .72);

  /* accents — the only thing inherited from the parent brand */
  --accent: #7c5cff;
  --accent-text: #a48cff;
  --accent-hover: #8f74ff;
  --accent-weak: rgba(124, 92, 255, .12);
  --accent-line: rgba(124, 92, 255, .32);
  --on-accent: #0b0910;

  --danger: #b4493f;
  --danger-text: #e0655a;
  --danger-weak: rgba(180, 73, 63, .12);
  --danger-line: rgba(180, 73, 63, .35);
  --positive-text: #3fb39d;

  /* chart / category series — dark-lifted values */
  --s1: #a48cff;
  --s2: #d98fd0;
  --s3: #d0a75a;
  --s4: #3fb39d;
  --s5: #8b6ef0;
  --s6: #c884bd;
  --s7: #4a4a55;

  --s1-weak: rgba(164, 140, 255, .12);
  --s2-weak: rgba(217, 143, 208, .12);
  --s3-weak: rgba(208, 167, 90, .12);
  --s4-weak: rgba(63, 179, 157, .12);
  --s5-weak: rgba(139, 110, 240, .12);
  --s6-weak: rgba(200, 132, 189, .12);
  --s7-weak: rgba(74, 74, 85, .22);

  --s1-line: rgba(164, 140, 255, .32);
  --s2-line: rgba(217, 143, 208, .32);
  --s3-line: rgba(208, 167, 90, .32);
  --s4-line: rgba(63, 179, 157, .32);
  --s5-line: rgba(139, 110, 240, .32);
  --s6-line: rgba(200, 132, 189, .32);
  --s7-line: rgba(74, 74, 85, .40);

  /* default series for anything that reads var(--series) without a class */
  --series: var(--s1);
  --series-weak: var(--s1-weak);
  --series-line: var(--s1-line);

  /* type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --fs-micro: 10px;
  --fs-overline: 11px;
  --fs-meta: 12px;
  --fs-dense: 13px;
  --fs-body: 14px;
  --fs-heading: 16px;
  --fs-title: 20px;
  --fs-display: 24px;
  --fs-hero-sm: 32px;
  --fs-hero: 36px;

  /* spacing (4px scale) */
  --sp-05: 2px;
  --sp-1: 4px;
  --sp-15: 6px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* radii */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-full: 999px;

  /* shadows — there are exactly two */
  --sh-pop: 0 8px 24px rgba(0, 0, 0, .55), 0 0 0 1px var(--border);
  --sh-fab: 0 4px 16px rgba(0, 0, 0, .5);

  /* shell metrics */
  --container: 1280px;
  --gutter: 16px;
  --topbar-h: 52px;          /* the bar row only */
  --sticky-h: 92px;          /* bar row + wrapped nav strip (phones) */
  --section-gap: 32px;
  --card-pad: 12px;
  --grid-gap: 10px;

  --t-fast: .12s ease;
}

/* ==========================================================================
   02  TOKENS — LIGHT (secondary override)
   ========================================================================== */

[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #fafafa;
  --surface-2: #f2f2f4;
  --border: #e4e4e8;
  --border-2: #d0d0d8;
  --text: #0d0d12;
  --text-muted: #5b5b66;
  --text-dim: #6b6b77;
  --hairline: rgba(0, 0, 0, .07);
  --overlay: rgba(255, 255, 255, .75);

  --accent: #5b3fd6;
  --accent-text: #5b3fd6;
  --accent-hover: #4a2fb0;
  --accent-weak: rgba(124, 92, 255, .10);
  --accent-line: rgba(91, 63, 214, .35);
  --on-accent: #ffffff;

  --danger-text: #a33d34;
  --danger-weak: rgba(180, 73, 63, .10);
  --danger-line: rgba(163, 61, 52, .35);
  --positive-text: #237a6a;

  --s1: #5b3fd6;
  --s2: #b06aa6;
  --s3: #b78a3c;
  --s4: #2f8f7e;
  --s5: #4a2fb0;
  --s6: #8d5384;
  --s7: #c8c8d0;

  --s1-weak: rgba(91, 63, 214, .10);
  --s2-weak: rgba(176, 106, 166, .10);
  --s3-weak: rgba(183, 138, 60, .12);
  --s4-weak: rgba(47, 143, 126, .10);
  --s5-weak: rgba(74, 47, 176, .10);
  --s6-weak: rgba(141, 83, 132, .10);
  --s7-weak: rgba(200, 200, 208, .35);

  --s1-line: rgba(91, 63, 214, .35);
  --s2-line: rgba(176, 106, 166, .35);
  --s3-line: rgba(183, 138, 60, .35);
  --s4-line: rgba(47, 143, 126, .35);
  --s5-line: rgba(74, 47, 176, .35);
  --s6-line: rgba(141, 83, 132, .35);
  --s7-line: rgba(200, 200, 208, .60);

  --sh-pop: 0 8px 24px rgba(16, 16, 22, .12), 0 0 0 1px var(--border);
  --sh-fab: 0 4px 16px rgba(16, 16, 22, .18);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #ffffff;
    --surface: #fafafa;
    --surface-2: #f2f2f4;
    --border: #e4e4e8;
    --border-2: #d0d0d8;
    --text: #0d0d12;
    --text-muted: #5b5b66;
    --text-dim: #6b6b77;
    --hairline: rgba(0, 0, 0, .07);
    --overlay: rgba(255, 255, 255, .75);

    --accent: #5b3fd6;
    --accent-text: #5b3fd6;
    --accent-hover: #4a2fb0;
    --accent-weak: rgba(124, 92, 255, .10);
    --accent-line: rgba(91, 63, 214, .35);
    --on-accent: #ffffff;

    --danger-text: #a33d34;
    --danger-weak: rgba(180, 73, 63, .10);
    --danger-line: rgba(163, 61, 52, .35);
    --positive-text: #237a6a;

    --s1: #5b3fd6;
    --s2: #b06aa6;
    --s3: #b78a3c;
    --s4: #2f8f7e;
    --s5: #4a2fb0;
    --s6: #8d5384;
    --s7: #c8c8d0;

    --s1-weak: rgba(91, 63, 214, .10);
    --s2-weak: rgba(176, 106, 166, .10);
    --s3-weak: rgba(183, 138, 60, .12);
    --s4-weak: rgba(47, 143, 126, .10);
    --s5-weak: rgba(74, 47, 176, .10);
    --s6-weak: rgba(141, 83, 132, .10);
    --s7-weak: rgba(200, 200, 208, .35);

    --s1-line: rgba(91, 63, 214, .35);
    --s2-line: rgba(176, 106, 166, .35);
    --s3-line: rgba(183, 138, 60, .35);
    --s4-line: rgba(47, 143, 126, .35);
    --s5-line: rgba(74, 47, 176, .35);
    --s6-line: rgba(141, 83, 132, .35);
    --s7-line: rgba(200, 200, 208, .60);

    --sh-pop: 0 8px 24px rgba(16, 16, 22, .12), 0 0 0 1px var(--border);
    --sh-fab: 0 4px 16px rgba(16, 16, 22, .18);
  }
}

/* series + category accent carriers ---------------------------------------
   Put .s1–.s7 (or .cat-accent-*) on any container; children read
   var(--series). No color-mix, so every engine gets the same result. */
.s1, .cat-accent-lasers-light   { --series: var(--s1); --series-weak: var(--s1-weak); --series-line: var(--s1-line); }
.s2, .cat-accent-injectables    { --series: var(--s2); --series-weak: var(--s2-weak); --series-line: var(--s2-line); }
.s3, .cat-accent-body-contouring{ --series: var(--s3); --series-weak: var(--s3-weak); --series-line: var(--s3-line); }
.s4, .cat-accent-skin-topicals  { --series: var(--s4); --series-weak: var(--s4-weak); --series-line: var(--s4-line); }
.s5, .cat-accent-rf-microneedling { --series: var(--s5); --series-weak: var(--s5-weak); --series-line: var(--s5-line); }
.s6 { --series: var(--s6); --series-weak: var(--s6-weak); --series-line: var(--s6-line); }
.s7 { --series: var(--s7); --series-weak: var(--s7-weak); --series-line: var(--s7-line); }

/* ==========================================================================
   03  RESET + BASE
   ========================================================================== */

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

/* A component rule that sets `display` outranks the UA sheet's
   `[hidden] { display: none }`, so toggling .hidden from JS silently does
   nothing. This bit the devices grid (.card is display:flex) and /submit
   (.sub-form is display:grid). Keep this guard above every component rule. */
[hidden] { display: none !important; }

html {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.5;
  overflow-x: clip;
  /* pin the footer to the bottom on short pages (/about, /404) so its
     lighter surface does not stop mid-screen against the page background */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > .site-footer { flex: 0 0 auto; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul {
  margin: 0;
}

ol, ul { padding: 0; list-style: none; }

img, svg, video { max-width: 100%; }
img, video { height: auto; display: block; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--accent-text); }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { cursor: pointer; background: none; border: 0; padding: 0; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-4) 0; }

strong, b { font-weight: 500; }

code, kbd, samp { font-family: var(--font-mono); font-size: .92em; }

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

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   04  LAYOUT + UTILITIES
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main { display: block; }

.section {
  padding-block: 0;
  margin-top: var(--section-gap);
}
.section:first-child { margin-top: 0; }

/* every grid/flex child may shrink — this is what keeps 375px honest */
.grid > *, .flex > *, .card > *, .rank-row > *, .stat-strip > * { min-width: 0; }

.num,
.stat-counter-value, .stat-cell-value, .rank-num, .rank-value, .delta,
.table td, .table th, .filter-count, .result-count, .spark-value,
.chart-svg text, .kcode, time, .badge--count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.right, .num-col { text-align: right; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--fs-dense);
  padding: 8px 12px;
}
.skip-link:focus { left: var(--sp-3); top: var(--sp-2); }

/* an UNKNOWN value: em-dash + the reason, never a zero, never a guess */
.na {
  color: var(--text-dim);
  border-bottom: 1px dotted var(--border-2);
  cursor: help;
}

.mono, .kcode {
  font-family: var(--font-mono);
  letter-spacing: 0;
}

.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.accent { color: var(--accent-text); }

.overline {
  font-size: var(--fs-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
}

.link {
  color: var(--accent-text);
}
.link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--accent-line);
}

.more-link {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--accent-text);
}
.more-link:hover { color: var(--accent-hover); }

/* section headers ---------------------------------------------------------- */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.section-header h2,
.section-header h3 {
  font-size: var(--fs-heading);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  letter-spacing: 0;
}
.section-header .section-meta {
  font-size: var(--fs-meta);
  color: var(--text-dim);
  margin-left: auto;
}
.section-sub {
  flex: 1 0 100%;
  font-size: var(--fs-dense);
  line-height: 1.35;
  color: var(--text-muted);
  margin-top: calc(var(--sp-1) * -1);
}

/* ==========================================================================
   05  TOPBAR
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--topbar-h);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .28em;              /* the space between "Dalphene" and "Index" */
  height: 24px;
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  white-space: nowrap;
}
.wordmark span { color: var(--accent-text); }
.wordmark:hover { color: var(--text); }

.topnav {
  order: 3;
  flex: 1 0 100%;
  display: flex;
  gap: var(--sp-1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: var(--sp-15) 0;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  border-top: 1px solid var(--hairline);
}
.topnav::-webkit-scrollbar { display: none; }

.topnav a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-md);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.topnav a:hover { background: var(--surface-2); color: var(--text); }
.topnav a.active {
  color: var(--text);
  /* square the bottom corners so the inset bar reads as a straight
     2px underline instead of a rounded U */
  border-radius: var(--r-md) var(--r-md) 0 0;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.topbar-search { display: none; }
.topbar-search input {
  width: 200px;
  height: 30px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-dense);
}
.topbar-search { position: relative; }
.topbar-search svg {
  position: absolute;
  left: 9px; top: 50%;
  transform: translateY(-50%);
  width: 13px; height: 13px;
  color: var(--text-dim);
  pointer-events: none;
}
.topbar-search input::placeholder { color: var(--text-dim); }
.topbar-search input:focus { border-color: var(--border-2); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--text-muted);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 16px; height: 16px; display: block; }

/* ==========================================================================
   06  BUTTONS / INPUTS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-15);
  height: 32px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { border-color: var(--border-2); color: var(--text); }

.btn--sm { height: 28px; padding: 0 10px; font-size: var(--fs-dense); }
.btn--lg { height: 38px; padding: 0 var(--sp-4); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}

.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--surface-2); }

.input, .search-input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-body);
}
.input::placeholder, .search-input::placeholder { color: var(--text-dim); }
.input:focus, .search-input:focus { border-color: var(--border-2); }

.select {
  height: 40px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background-color: var(--surface-2);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 13px center, right 8px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--text);
  font-size: var(--fs-dense);
  -webkit-appearance: none;
  appearance: none;
}
.select:focus { border-color: var(--border-2); }

/* ==========================================================================
   07  HERO + STAT COUNTERS
   ========================================================================== */

.hero { padding: 28px 0 20px; }

.hero h1 {
  font-size: var(--fs-hero-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
}
.hero-sub {
  margin-top: var(--sp-2);
  font-size: var(--fs-body);
  color: var(--text-muted);
}
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.hero-actions .btn { width: 100%; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
.stat-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stat-counter {
  padding: 10px;
  min-width: 0;
  border: 0;
  background: transparent;
}
.stat-row--boxed .stat-counter {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.stat-counter-value {
  display: block;
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.stat-counter-value--word { font-size: var(--fs-title); }
.stat-counter-label {
  display: block;
  margin-top: var(--sp-15);
  font-size: var(--fs-overline);
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-muted);
}
.stat-counter .delta { margin-top: var(--sp-1); }
.stat-counter-sub {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-meta);
  line-height: 1.35;
  color: var(--text-dim);
}

/* category strip ----------------------------------------------------------- */
.cat-row {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.cat-row::-webkit-scrollbar { display: none; }

.cat-tile {
  flex: 0 0 62%;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 56px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  min-width: 0;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.cat-tile:hover { background: var(--surface-2); border-color: var(--border-2); color: var(--text); }
.cat-tile .dot { flex: 0 0 auto; }
.cat-tile-name {
  font-size: var(--fs-dense);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-tile-count {
  margin-left: auto;
  font-size: var(--fs-meta);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--series);
}
.dot--lg { width: 16px; height: 16px; }
.dot--xl { width: 20px; height: 20px; opacity: .9; }

/* ==========================================================================
   08  CARDS
   ========================================================================== */

.card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--card-pad);
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
a.card:hover, .card--link:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text);
}

.card-title {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
a.card:hover .card-title { color: var(--accent-text); }

.card-sub {
  margin-top: calc(var(--sp-1) * -1);
  font-size: var(--fs-meta);
  line-height: 1.35;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-desc {
  font-size: var(--fs-dense);
  line-height: 1.5;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.mini {
  display: flex;
  flex-direction: column;
  gap: var(--sp-05);
  min-width: 0;
}
.mini-label {
  font-size: var(--fs-overline);
  line-height: 1.2;
  color: var(--text-dim);
}
.mini-value {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-15);
}

/* ==========================================================================
   BADGES / PILLS / DELTAS
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 22px;
  padding: 0 var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.badge--neutral {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-muted);
}
.badge--accent {
  background: var(--accent-weak);
  border-color: var(--accent-line);
  color: var(--accent-text);
}
.badge--cat {
  background: var(--series-weak);
  border-color: var(--series-line);
  color: var(--series);
}
.badge--outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  letter-spacing: 0;
}
.badge--danger {
  background: var(--danger-weak);
  border-color: var(--danger-line);
  color: var(--danger-text);
}

button.badge { cursor: pointer; }
button.badge:hover { border-color: var(--border-2); }
.badge .x {
  font-size: var(--fs-overline);
  line-height: 1;
  opacity: .7;
}
.badge:hover .x { opacity: 1; }

.delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  padding: 0 var(--sp-15);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.delta.up { color: var(--positive-text); }
.delta.up::before { content: "\2191"; }
.delta.down { color: var(--danger-text); }
.delta.down::before { content: "\2193"; }
.delta.new { color: var(--text-dim); }

/* ==========================================================================
   09  RANKED ROWS
   ========================================================================== */

.rank-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--sp-3);
}

.rank-list { counter-reset: none; }

.rank-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: 44px;
  padding: var(--sp-15) var(--sp-2);
  border-bottom: 1px solid var(--hairline);
  border-radius: var(--r-md);
  transition: background-color var(--t-fast);
}
.rank-row:last-child { border-bottom: 0; }
.rank-row:hover { background: var(--surface-2); }

.rank-num {
  font-size: var(--fs-dense);
  font-weight: 500;
  color: var(--text-dim);
  text-align: right;
  line-height: 1;
}
.rank-row--top .rank-num { color: var(--accent-text); }

.rank-id { min-width: 0; display: flex; align-items: center; gap: var(--sp-2); }
.rank-id > div { min-width: 0; }

.rank-name {
  display: block;
  font-size: var(--fs-dense);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.rank-name:hover { color: var(--accent-text); }

.rank-sub {
  display: block;
  font-size: var(--fs-meta);
  line-height: 1.35;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-val {
  display: flex;
  align-items: center;
  gap: var(--sp-15);
  justify-content: flex-end;
  white-space: nowrap;
}
.rank-value {
  font-size: var(--fs-dense);
  font-weight: 500;
  color: var(--text);
}

/* dense browse list -------------------------------------------------------- */
.list { border-radius: var(--r-lg); overflow: hidden; }
.list-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-dense);
  border-bottom: 1px solid var(--border);
  transition: background-color var(--t-fast);
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--surface-2); }

/* ==========================================================================
   10  STAT STRIP (detail page)
   ========================================================================== */

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: var(--sp-3) 0 var(--sp-4);
}
.stat-cell {
  flex: 1 1 50%;
  min-width: 0;
  padding: 10px 14px;
  border-left: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
}
.stat-cell:nth-child(-n + 2) { border-top: 0; }
.stat-cell:nth-child(odd) { border-left: 0; }

.stat-cell-label {
  display: block;
  font-size: var(--fs-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
}
.stat-cell-value {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* definition rows (detail overview) */
.deflist {
  display: grid;
  grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-3);
}
.deflist dt { font-size: var(--fs-meta); color: var(--text-dim); }
.deflist dd { font-size: var(--fs-dense); color: var(--text); margin: 0; overflow-wrap: anywhere; }

/* ==========================================================================
   11  TABLES
   ========================================================================== */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-dense);
}

.table caption {
  caption-side: top;
  text-align: left;
  padding: 10px 12px;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-muted);
}

/* Sticky header. NOTE: .table-wrap sets overflow-x:auto, and per spec that makes
   overflow-y compute to auto as well — so .table-wrap, not the viewport, is this
   header's scrollport, and `top` must be 0. It used to be var(--sticky-h): once
   the shell script defined that variable, every thead slid ~52px DOWN inside its
   own table and covered the first data row. */
.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table th[aria-sort] { cursor: pointer; }
.table th .sort-arrow { color: var(--text-dim); font-size: var(--fs-micro); margin-left: 3px; }
.table th[aria-sort="ascending"] .sort-arrow,
.table th[aria-sort="descending"] .sort-arrow { color: var(--accent-text); }

.table td {
  padding: var(--sp-2) var(--sp-3);
  height: 44px;
  border-bottom: 1px solid var(--hairline);
  color: var(--text-muted);
  vertical-align: middle;
  overflow-wrap: anywhere;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-2); }

.table td:first-child,
.table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  box-shadow: 1px 0 0 var(--border);
}
.table thead th:first-child { z-index: 3; background: var(--surface-2); }
.table tbody tr:hover td:first-child { background: var(--surface-2); }

.table .num, .table td.num, .table th.num { text-align: right; white-space: nowrap; }

/* ==========================================================================
   12  CHARTS
   ========================================================================== */

.chart-frame {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: 10px;
}
.chart-title {
  font-size: var(--fs-dense);
  font-weight: 500;
  color: var(--text);
}
.chart-unit {
  font-size: var(--fs-meta);
  color: var(--text-dim);
  text-align: right;
}

.chart-svg { display: block; width: 100%; height: auto; }
.chart-svg text {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  fill: var(--text-dim);
  letter-spacing: 0;
}
.chart-svg .grid { stroke: var(--hairline); stroke-width: 1; }
.chart-svg .axis { stroke: var(--border); stroke-width: 1; }
.chart-svg .bar { fill: var(--series); }
.chart-svg .line {
  fill: none;
  stroke: var(--series);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart-svg .area { fill: var(--series); fill-opacity: .14; }
.chart-svg .dot { fill: var(--series); }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-15) 14px;
  margin-top: 10px;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
.chart-legend span { display: inline-flex; align-items: center; gap: var(--sp-15); }
.chart-legend i {
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--series);
  display: inline-block;
}

.spark {
  display: inline-block;
  width: 56px; height: 18px;
  vertical-align: middle;
}
.spark path {
  fill: none;
  stroke: var(--series);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.spark circle { fill: var(--series); }

/* ==========================================================================
   13  TOOLTIPS + HONEST LABELS
   ========================================================================== */

.tip { position: relative; display: inline; }

.tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  margin-left: var(--sp-1);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-dim);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tip-btn:hover, .tip-btn:focus-visible {
  color: var(--accent-text);
  border-color: var(--accent-line);
}

.tip-bubble {
  position: absolute;
  z-index: 60;
  left: 0;
  top: calc(100% + 6px);
  display: block;
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
  font-size: var(--fs-dense);
  line-height: 1.5;
  color: var(--text-muted);
  white-space: normal;
  text-align: left;
}
.tip-bubble[hidden] { display: none; }
.tip-bubble .tip-title {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
}
.tip-bubble a { color: var(--accent-text); font-size: var(--fs-meta); }

/* the honest label — one muted line, no box, no gold, never deleted */
.honest {
  display: block;
  margin: var(--sp-15) 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--text-muted);
}

/* ==========================================================================
   14  BROWSE CONTROLS + FILTER RAIL
   ========================================================================== */

.page-head {
  padding: var(--sp-5) 0 var(--sp-3);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}
.page-head h1 {
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.page-head .page-meta {
  font-size: var(--fs-meta);
  color: var(--text-dim);
  margin-left: auto;
}
.page-head .page-sub {
  flex: 1 0 100%;
  font-size: var(--fs-dense);
  color: var(--text-muted);
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.controls .search-field { position: relative; flex: 1 1 100%; }
.controls .search-field svg {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--text-dim);
  pointer-events: none;
}
.controls .search-field input { padding-left: 32px; }

.result-count {
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
.controls .result-count { margin-left: 0; }
.controls .select { margin-left: auto; }

.seg {
  display: inline-flex;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.seg button {
  height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.seg button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--border-2);
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-15);
  margin-bottom: var(--sp-3);
}

/* browse shell ------------------------------------------------------------- */
.browse { display: block; }

/* MOBILE: the rail is a full-screen sheet */
.filter-rail {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: none;
  background: var(--surface);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--gutter) 96px;
}
.filter-rail.is-open { display: block; }
body.sheet-open { overflow: hidden; }

.filter-sheet-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 48px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-body);
  font-weight: 600;
}
.filter-sheet-bar .btn { margin-left: auto; }
.filter-sheet-bar .btn + .btn { margin-left: 0; }

.filter-fab {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-dense);
  font-weight: 500;
  box-shadow: var(--sh-fab);
}
.filter-fab[hidden] { display: none; }

.filter-group {
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--hairline);
}
.filter-group:first-of-type { border-top: 0; }
.filter-group h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--text-muted);
}
.filter-group h3 .filter-count { color: var(--text-dim); font-weight: 400; }

.filter-opt {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-size: var(--fs-dense);
  line-height: 1.35;
  color: var(--text-muted);
  cursor: pointer;
}
.filter-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.filter-opt .box {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.filter-opt .box::after {
  content: "";
  width: 7px; height: 4px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}
.filter-opt input:checked ~ .box {
  background: var(--accent);
  border-color: var(--accent);
}
.filter-opt input:checked ~ .box::after { opacity: 1; }
.filter-opt input:checked ~ .filter-label { color: var(--text); font-weight: 500; }
.filter-opt input:focus-visible ~ .box { outline: 2px solid var(--accent); outline-offset: 2px; }
.filter-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.filter-opt .filter-count { margin-left: auto; font-size: var(--fs-meta); color: var(--text-dim); }
.filter-opt.is-empty .filter-count { opacity: .3; }

.filter-chips { display: flex; flex-wrap: wrap; gap: var(--sp-15); }
.filter-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-meta);
  font-weight: 500;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.filter-chip[aria-pressed="true"] {
  background: var(--accent-weak);
  border-color: var(--accent-line);
  color: var(--accent-text);
}

.filter-clear {
  font-size: var(--fs-meta);
  color: var(--accent-text);
}

/* ==========================================================================
   15  DETAIL PAGE CHROME
   ========================================================================== */

.breadcrumb {
  font-size: var(--fs-meta);
  color: var(--text-dim);
  margin-bottom: var(--sp-2);
}
.breadcrumb a:hover { color: var(--accent-text); }

.detail-head { padding-top: var(--sp-5); }
.detail-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.detail-sub {
  margin-top: var(--sp-15);
  font-size: var(--fs-dense);
  color: var(--text-dim);
  overflow-wrap: anywhere;
}
.detail-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }

.anchor-tabs {
  position: sticky;
  top: var(--sticky-h);
  z-index: 20;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.anchor-tabs::-webkit-scrollbar { display: none; }
.anchor-tabs a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  font-size: var(--fs-dense);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.anchor-tabs a:hover { color: var(--text); }
.anchor-tabs a.active {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.detail-section {
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: calc(var(--sticky-h) + 40px);
}

.source-list li {
  padding: var(--sp-15) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-dense);
}
.source-list li:last-child { border-bottom: 0; }
.source-list a { color: var(--accent-text); overflow-wrap: anywhere; }
.source-list .source-date { display: block; font-size: var(--fs-meta); color: var(--text-dim); }

/* rankings anchor rail ----------------------------------------------------- */
.anchor-strip {
  position: sticky;
  top: var(--sticky-h);
  z-index: 20;
  display: flex;
  gap: var(--sp-15);
  align-items: center;
  height: 44px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.anchor-strip::-webkit-scrollbar { display: none; }
.anchor-strip a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface-2);
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.anchor-strip a.active {
  background: var(--accent-weak);
  border-color: var(--accent-line);
  color: var(--accent-text);
}
.anchor-rail { display: none; }

/* ==========================================================================
   16  FOOTER
   ========================================================================== */

.site-footer {
  margin-top: var(--sp-12);
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: var(--sp-6) 0 var(--sp-8);
  font-size: var(--fs-meta);
  color: var(--text-dim);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}
.footer-col h4 {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-15) var(--sp-3); }
.footer-links a { color: var(--text-dim); }
.footer-links a:hover { color: var(--text); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  align-items: baseline;
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline);
}
.footer-wordmark { font-size: var(--fs-meta); font-weight: 500; color: var(--text-muted); }
.footer-wordmark span { color: var(--accent-text); }
.footer-stamp { font-variant-numeric: tabular-nums; }
.footer-note { flex: 1 0 100%; }
.footer-trademark {
  margin-top: var(--sp-2);
  max-width: 900px;
  font-size: var(--fs-overline);
  line-height: 1.6;
  color: var(--text-dim);
}

/* ==========================================================================
   17  PROSE — /methodology and /about ONLY
   ========================================================================== */

.prose { max-width: 68ch; }
.prose p, .prose li {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-muted);
}
.prose p + p { margin-top: var(--sp-3); }
.prose h2 {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}
.prose h3 {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-heading);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.prose ul, .prose ol { margin-top: var(--sp-2); padding-left: var(--sp-5); }
.prose ul li { list-style: disc; margin-top: var(--sp-1); }
.prose ol li { list-style: decimal; margin-top: var(--sp-1); }
.prose a { color: var(--accent-text); }
.prose a:hover { text-decoration: underline; text-underline-offset: 2px; }
.prose code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1px 4px;
  overflow-wrap: anywhere;
}
.prose pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  overflow-x: auto;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--text-muted);
}
/* on /methodology the honest label is allowed to breathe */
.prose .honest {
  font-size: var(--fs-body);
  line-height: 1.6;
  max-width: 68ch;
}

/* ==========================================================================
   18  MISC — 404, empty states, pagination
   ========================================================================== */

.empty {
  padding: var(--sp-8) 0;
  font-size: var(--fs-dense);
  color: var(--text-muted);
}

.pager {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.error-wrap { padding: var(--sp-16) 0; }
.error-wrap .kicker {
  font-size: var(--fs-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
}
.error-wrap .big {
  font-size: var(--fs-hero-sm);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  margin: var(--sp-2) 0;
}
.error-wrap p { font-size: var(--fs-body); color: var(--text-muted); max-width: 52ch; }
.error-wrap p + p { margin-top: var(--sp-4); }

/* ==========================================================================
   BREAKPOINT: 820px
   ========================================================================== */

@media (min-width: 820px) {
  :root {
    --gutter: 24px;
    --topbar-h: 56px;
    --sticky-h: 56px;
    --section-gap: 40px;
    --card-pad: 14px;
    --grid-gap: 12px;
  }

  .topbar-inner { flex-wrap: nowrap; }
  .topnav {
    order: 0;
    flex: 0 1 auto;
    overflow: visible;
    margin-inline: 0;
    padding: 0;
    padding-inline: 0;
    border-top: 0;
  }

  .hero { padding: 40px 0 28px; }
  .hero h1 { font-size: var(--fs-hero); }
  .hero-actions { flex-direction: row; }
  .hero-actions .btn { width: auto; }

  .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
  .stat-counter { padding: var(--sp-4); }
  .stat-counter-value { font-size: var(--fs-hero-sm); }
  .stat-counter-value--word { font-size: var(--fs-display); }
  .stat-counter-label { font-size: var(--fs-meta); }

  .cat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .cat-tile { flex: initial; }

  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-title { font-size: var(--fs-heading); }

  .rank-row { min-height: 34px; }
  .rank-name { font-size: var(--fs-body); }
  .rank-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .list-row { min-height: 44px; }

  .stat-cell { flex: 1 1 140px; }
  .stat-cell:nth-child(odd) { border-left: 1px solid var(--hairline); }
  .stat-cell:first-child { border-left: 0; }
  .stat-cell { border-top: 0; }

  .table td { height: 36px; }

  .chart-frame { padding: var(--sp-4); }

  .input, .search-input, .select { height: 34px; }
  .seg button { height: 28px; }
  .filter-opt { min-height: 28px; }
  .filter-chip { height: 26px; }

  .controls .search-field { flex: 1 1 200px; }
  .controls .result-count { margin-left: auto; }
  .controls .select { margin-left: 0; }

  .browse {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
  }
  .filter-rail {
    position: sticky;
    inset: auto;
    top: calc(var(--sticky-h) + 8px);
    display: block;
    z-index: 1;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    background: transparent;
    border-right: 1px solid var(--border);
    padding: 0 var(--sp-4) 0 0;
  }
  /* The z-index above makes the rail a stacking context, which traps every
     descendant — including a .gloss-pop asking for 96 — underneath anything
     outside the rail with a higher z-index, the sticky topbar (50) first
     among them. The popup is position:fixed and can be placed anywhere on
     screen, so being trapped at 1 is how a definition ends up sliding under
     the header. Lift the whole rail while one is open; the rest of the time
     it stays at 1 and scrolls under the topbar as before. */
  .filter-rail:has(.gloss-pop[data-open]) { z-index: 97; }
  .filter-sheet-bar, .filter-fab { display: none; }

  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
  .footer-links { flex-direction: column; gap: var(--sp-15); }

  .detail-title { font-size: var(--fs-display); }
  .page-head h1 { font-size: var(--fs-title); }
}

/* search field appears in the bar only when there is room for it */
@media (min-width: 1024px) {
  .topbar-search { display: block; }
  .topbar-search-icon { display: none; }
}

/* ==========================================================================
   BREAKPOINT: 1280px
   ========================================================================== */

@media (min-width: 1280px) {
  :root {
    --gutter: 32px;
    --section-gap: 48px;
    --card-pad: 16px;
  }

  .stat-row { gap: var(--sp-4); }
  .stat-counter-value { font-size: var(--fs-hero); }
  .stat-counter-value--word { font-size: var(--fs-display); }

  .cat-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); }

  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .browse { grid-template-columns: 248px minmax(0, 1fr); gap: var(--sp-6); }
  .filter-rail { width: 248px; }

  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* rankings: vertical anchor rail replaces the horizontal chip strip */
  .rankings-shell {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }
  .anchor-strip { display: none; }
  .anchor-rail {
    display: block;
    position: sticky;
    top: calc(var(--sticky-h) + 16px);
  }
  .anchor-rail a {
    display: block;
    padding: var(--sp-15) 10px;
    font-size: var(--fs-dense);
    color: var(--text-muted);
    border-radius: var(--r-md);
  }
  .anchor-rail a:hover { background: var(--surface-2); color: var(--text); }
  .anchor-rail a.active {
    color: var(--text);
    box-shadow: inset 2px 0 0 var(--accent);
  }

  .detail-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--sp-6);
    align-items: start;
  }
  .detail-rail { position: sticky; top: calc(var(--sticky-h) + 16px); }
}

/* ==========================================================================
   EUDAMED PRESENCE BLOCK  (device detail, "Also registered in the EU")
   --------------------------------------------------------------------------
   Rendered ONLY for devices matched to a EUDAMED record. There is no
   "unmatched" variant of this block and there must never be one: EUDAMED
   registration became mandatory only in May 2026 with a transition period,
   so absence from EUDAMED is not a fact about a device. Nothing here has a
   greyed, dashed or empty state, because the block simply does not exist on
   a device page we could not match.
   ========================================================================== */

.eu-block {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.eu-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.eu-title {
  font-size: var(--fs-dense);
  font-weight: 600;
  color: var(--text);
}

.eu-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px var(--sp-3);
  margin: 0;
  font-size: var(--fs-meta);
}

.eu-facts dt {
  color: var(--text-muted);
  font-size: var(--fs-overline);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.eu-facts dd {
  margin: 0 0 var(--sp-2) 0;
  color: var(--text);
  /* Long UDI-DI strings and EUDAMED's own device names must wrap rather
     than push the page sideways on a 375px phone. */
  overflow-wrap: anywhere;
}

.eu-facts dd:last-child { margin-bottom: 0; }

.eu-link {
  margin: var(--sp-2) 0 0 0;
  font-size: var(--fs-meta);
}

@media (min-width: 560px) {
  .eu-facts {
    grid-template-columns: 116px minmax(0, 1fr);
    align-items: baseline;
  }
  .eu-facts dd { margin-bottom: var(--sp-1); }
}

/* The one-line honest note that sits inside the EU-register filter group.
   It exists so the filter can never be read as "everything else is absent
   from EUDAMED". */
.filter-note {
  margin-top: var(--sp-1);
  padding-left: 2px;
}
.filter-note .honest { margin: 0; }

/* ==========================================================================
   19  GLOSSARY — the "?" affordance and the /methodology term list
   --------------------------------------------------------------------------
   A med-spa owner should never have to already know what 510(k), UDI-DI or
   IQR mean in order to read a page. Every one of those words carries a small
   question mark; hover it, tab to it, or tap it, and one plain sentence
   appears.

   Two constraints shape everything below:

     1. It appears MANY times, so it has to be quiet. No fill, no chip, no
        colour until it is engaged — a hairline circle in --text-dim, the same
        weight as the ⓘ affordance it sits beside.
     2. It must never move the page. The button is sized from --gloss-size
        (13px) with vertical-align in em, so it rides the text baseline and
        stays inside the line box; the popup is position:fixed and placed by
        script, so it is out of flow entirely and cannot be clipped by the
        overflow wrapper of a wide table or a chart.
   ========================================================================== */

.gloss {
  position: relative;
  display: inline;
  --gloss-size: 13px;
}

/* No whitespace is emitted between the term and the button, so the browser
   gets no break opportunity there and the icon can never be orphaned onto a
   line of its own. */
.gloss-term { color: inherit; }

.gloss-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gloss-size);
  height: var(--gloss-size);
  margin: 0 0 0 3px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  vertical-align: -.2em;       /* centred on the x-height, not on the baseline */
  cursor: help;
  -webkit-appearance: none;
  appearance: none;
  transition: color var(--t-fast);
}

.gloss-btn svg {
  display: block;
  width: var(--gloss-size);
  height: var(--gloss-size);
}

/* A 13px target is unusable with a thumb. This grows the hit area to ~31px
   without occupying one pixel of layout. */
.gloss-btn::after {
  content: "";
  position: absolute;
  inset: -9px;
}

.gloss-btn:hover,
.gloss-btn[aria-expanded="true"] { color: var(--accent-text); }

.gloss-btn:focus { outline: none; }
.gloss-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  color: var(--accent-text);
}

/* Tight, small-type contexts: shrink a little so the line box cannot grow. */
.badge .gloss,
th .gloss,
.stat-cell-label .gloss,
.fig-unit .gloss,
.chart-legend .gloss,
.rank-sub .gloss,
.section-meta .gloss,
.footer-note .gloss { --gloss-size: 11px; }

/* -------------------------------------------------------------------------
   the popup
   position:fixed + JS placement. It flips above/below and left/right to stay
   in the viewport; under 560px it stops being a bubble and becomes a sheet
   pinned to the bottom edge, because a phone has no hover and no room.
   ------------------------------------------------------------------------- */

/* CLOSED. Deliberately NOT display:none, visibility:hidden or [hidden] — all
   three delete the element from the accessibility tree, and the button's
   aria-describedby points here, so hiding it that way would silence the
   definition for the one reader who cannot see the bubble at all. The clip
   pattern keeps it in the tree, in the DOM for crawlers, and occupying no
   space at all. */
.gloss-pop {
  /* absolute, not fixed, while closed: a page can carry a hundred of these
     and there is no reason to hand the compositor a hundred fixed layers. */
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* OPEN. Placed by the shell script, which sets left/top from the button's
   rect after measuring this box. */
.gloss-pop[data-open] {
  position: fixed;             /* escapes every overflow wrapper on the page */
  z-index: 96;                 /* over the sticky bar (50) and the filter FAB (90) */
  width: max-content;
  height: auto;
  margin: 0;
  padding: 10px 12px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  max-width: min(300px, calc(100vw - 16px));
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
  /* Reset every inherited text style: this thing is rendered inside uppercase
     table headers, mono badges and 11px overlines, and it must read the same
     everywhere. */
  font-family: var(--font-sans);
  font-size: var(--fs-dense);
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  text-indent: 0;
  white-space: normal;
  color: var(--text-muted);
  pointer-events: none;        /* it is a description, never a target */
}

/* Deliberately NOT the uppercase overline used elsewhere in this system. The
   terms here are case-sensitive identifiers — 510(k), UDI-DI, openFDA,
   ClinicalTrials.gov — and uppercasing them prints 510(K), which is simply the
   wrong string. Weight and colour carry the label instead. */
.gloss-pop-term {
  display: block;
  margin-bottom: 3px;
  font-size: var(--fs-meta);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}

.gloss-pop-def {
  display: block;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* Under 560px there is no hover and no room for a bubble, so the definition
   arrives as a sheet across the bottom edge — the thumb is already there.
   Both classes are needed in the selector so this outranks .gloss-pop[data-open]
   above, which sets the competing left/top/width/padding. */
.gloss-pop[data-open].gloss-pop--sheet {
  left: 8px;
  right: 8px;
  top: auto;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  width: auto;
  max-width: none;
  padding: 14px 16px;
  border-radius: var(--r-xl);
  font-size: var(--fs-body);
  /* The sheet is big enough to be tapped by accident, so it swallows the tap
     instead of letting it fall through to a link underneath. */
  pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .gloss-pop[data-open] { animation: gloss-in .12s ease-out; }
  .gloss-pop[data-open].gloss-pop--above { animation-name: gloss-in-above; }
  .gloss-pop[data-open].gloss-pop--sheet { animation: gloss-in-sheet .16s ease-out; }
}

@keyframes gloss-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gloss-in-above {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gloss-in-sheet {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   the full list on /methodology
   Selectors are prefixed with .glossary so they beat the .prose defaults that
   the methodology page wraps its body in.
   ------------------------------------------------------------------------- */

.glossary { margin-top: var(--section-gap); max-width: 100%; }

.glossary .glossary-group { margin-top: var(--sp-5); }

.glossary .glossary-group-title {
  margin: 0 0 var(--sp-1);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
}

.glossary .glossary-list { margin: 0; padding: 0; }

.glossary .glossary-item {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--hairline);
  scroll-margin-top: calc(var(--sticky-h) + 16px);
}
.glossary .glossary-item:last-child { border-bottom: 0; }

.glossary .glossary-item dt {
  margin: 0;
  font-size: var(--fs-dense);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  overflow-wrap: anywhere;
}

.glossary .glossary-item dd {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-dense);
  line-height: 1.55;
  color: var(--text-muted);
}

/* Arriving from a #glossary-… deep link marks the row it landed on. */
.glossary .glossary-item:target {
  background: var(--accent-weak);
  box-shadow: inset 2px 0 0 var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding-left: var(--sp-3);
}

@media (min-width: 700px) {
  .glossary .glossary-item {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: baseline;
  }
  .glossary .glossary-item dd { margin-top: 0; }
}

/* Outbound nav link to the product. Visually set apart from the index's own
   sections so a reader can tell they are leaving the neutral index. */
.topnav .nav-out{
  color: var(--accent-text);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-full);
  padding: 3px 11px;
  margin-left: 4px;
}
.topnav .nav-out:hover{
  background: var(--accent-weak);
  border-color: var(--accent);
}