/* adhd100: pre-highlighted paper. One typeface, one accent, moons for certainty.
   Light is the home key (paper); dark is the night key. No framework, one file.
   Sections 1 to 13 are design/prototypes/adhd.css as designed (design/DESIGN.md); section 14 carries the pages
   and parts the prototypes do not draw (language menu, support pages, method, country notes), in the same tokens. */

/* ---------- 0. fonts ---------- */
@font-face {
  font-family: 'Commissioner';
  src: url('/assets/v/commissioner-latin-var.7a7c57c089.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: oblique 0deg 12deg;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2007-200B, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: 'Commissioner';
  src: url('/assets/v/commissioner-latin-ext-var.db4eefc29f.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: oblique 0deg 12deg;
  font-display: swap;
  unicode-range: U+0100-0130, U+0134-0148, U+014A-0151, U+0154-017E, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01C4-01CC, U+01E6-01E7, U+01EA-01EB, U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+0259, U+02BE-02BF, U+02C7-02CC, U+02DD, U+1E08-1E09, U+1E0C-1E0F, U+1E14-1E17, U+1E1C-1E1D, U+1E20-1E21, U+1E24-1E25, U+1E2A-1E2B, U+1E2E-1E2F, U+1E36-1E37, U+1E3A-1E3B, U+1E42-1E49, U+1E4C-1E53, U+1E5A-1E5B, U+1E5E-1E69, U+1E6C-1E6F, U+1E78-1E7B, U+1E80-1E85, U+1E8E-1E8F, U+1E92-1E93, U+1E97, U+1E9E, U+1EF2-1EF9, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BC-20BD, U+2113;
}
@font-face {
  font-family: 'Commissioner';
  src: url('/assets/v/commissioner-cyrillic-var.c9e0a8c300.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: oblique 0deg 12deg;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- 1. tokens ---------- */
:root {
  --font: 'Commissioner', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --flare: 'FLAR' 100;      /* display cut: the letters grow feet when they grow up */
  --plain: 'FLAR' 0;

  /* paper: the home key */
  --bg: #f4f3ef;
  --bg-2: #eae8e1;
  --bg-3: #ffffff;
  --fg: #17203a;
  --fg-dim: #474f66;
  --fg-faint: #5d657a;
  --rule: rgba(23, 32, 58, 0.26);
  --rule-soft: rgba(23, 32, 58, 0.12);
  --accent: #b0124a;
  --accent-2: #8a0b3a;
  --accent-ink: #ffffff;
  --hl: #ffd3e1;            /* the marker band: carries --fg text only, never faint text */
  --good: #1d6b47;
  --warn: #9a4a10;
  --harm: #a01c1c;
  --seal-adhd: var(--accent);
  --seal-gen: var(--fg-dim);

  --wrap: 64rem;
  --pad: clamp(1.1rem, 4vw, 3.4rem);
  --r: 10px;                /* controls only: chips, tiles, buttons, who-cards */
  --r-s: 6px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --press: cubic-bezier(0.3, 1.6, 0.4, 1);
  color-scheme: light;
}
html[data-theme='dark'] {
  --bg: #121826;
  --bg-2: #182031;
  --bg-3: #1f2a3d;
  --fg: #eef1f6;
  --fg-dim: #b6bdcb;
  --fg-faint: #98a1b3;
  --rule: rgba(238, 241, 246, 0.2);
  --rule-soft: rgba(238, 241, 246, 0.09);
  --accent: #ff8ab3;
  --accent-2: #ffb3cc;
  --accent-ink: #2a0a17;
  --hl: #4d2036;
  --good: #7fd0a5;
  --warn: #ffb478;
  --harm: #ff9a9a;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-theme='auto'] {
    --bg: #121826; --bg-2: #182031; --bg-3: #1f2a3d;
    --fg: #eef1f6; --fg-dim: #b6bdcb; --fg-faint: #98a1b3;
    --rule: rgba(238, 241, 246, 0.2); --rule-soft: rgba(238, 241, 246, 0.09);
    --accent: #ff8ab3; --accent-2: #ffb3cc; --accent-ink: #2a0a17; --hl: #4d2036;
    --good: #7fd0a5; --warn: #ffb478; --harm: #ff9a9a;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
/* `hidden` always wins: .do-card and friends set display, and the script's five-at-a-time paging relies on it (the noscript sheet reopens the panels with higher specificity) */
[hidden] { display: none !important; }
/* an anchor jump (/evidence/#r-..., /item/#practice) lands with air above it, not glued to the edge */
:target { scroll-margin-top: 1.25rem; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font); font-variation-settings: var(--plain);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); line-height: 1.55;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--hl); color: var(--fg); }
a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2.5px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
button { font: inherit; color: inherit; cursor: pointer; font-variation-settings: inherit; }
b, strong { font-weight: 700; }
em { font-style: oblique 8deg; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; z-index: 99; background: var(--accent); color: var(--accent-ink); padding: 0.6rem 1rem; }
.skip:focus { left: 0.5rem; top: 0.5rem; }
.nw { white-space: nowrap; }

/* the marker band: the one thing to take away, drawn as a highlighter swipe */
mark.hl, .hl {
  background: var(--hl); color: var(--fg);
  padding: 0.05em 0.28em; margin: 0 -0.08em;
  border-radius: 0.35em 0.5em 0.3em 0.55em / 0.55em 0.3em 0.5em 0.35em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* display type: one family, two cuts. Big text flares. */
h1, h2, .display { font-variation-settings: var(--flare); font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.6rem); line-height: 1.02; margin: 0 0 1rem; max-width: 20ch; text-wrap: balance; }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2rem); line-height: 1.1; margin: 0 0 0.6rem; }
h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.5rem; }
h1 em, h2 em { font-style: normal; font-variation-settings: var(--flare); color: var(--accent); }
.lede { max-width: 48ch; color: var(--fg-dim); font-size: 1.08em; margin: 0 0 1.2rem; }
.lede b { color: var(--fg); }

/* ---------- 2. masthead ---------- */
.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem 1.4rem; flex-wrap: wrap;
  max-width: var(--wrap); margin: 0 auto; padding: 1.1rem var(--pad) 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none;
  font-variation-settings: var(--flare); font-weight: 800; font-size: 1.42rem; letter-spacing: -0.02em; line-height: 1;
}
.wordmark .mark { width: 1.35em; height: 1.35em; flex: none; }
.wordmark b { color: var(--accent); font-weight: 800; }
.masthead-nav { display: flex; align-items: center; gap: 0.5rem 1.1rem; flex-wrap: wrap; font-size: 0.9rem; font-weight: 500; }
.masthead-nav a { color: var(--fg-dim); text-decoration: none; padding: 0.3rem 0; border-bottom: 2px solid transparent; }
.masthead-nav a:hover, .masthead-nav a[aria-current='page'] { color: var(--fg); border-bottom-color: var(--accent); }
.masthead-tools { display: flex; align-items: center; gap: 0.5rem; }
.masthead-tools:empty { display: none; }
@media (max-width: 639px) { .masthead-nav { gap: 0.5rem 0.9rem; } }
.ghost {
  background: none; border: 1.5px solid var(--rule); border-radius: var(--r);
  padding: 0.38rem 0.8rem; font-size: 0.85rem; font-weight: 500; color: var(--fg-dim);
}
.ghost:hover { border-color: var(--fg-dim); color: var(--fg); }
.cta {
  font-weight: 700; font-size: 1rem; background: var(--accent); color: var(--accent-ink);
  border: 1.5px solid var(--accent); border-radius: var(--r); padding: 0.7rem 1.3rem;
  transition: background 0.14s ease, transform 0.14s var(--press);
}
.cta:hover { background: var(--accent-2); border-color: var(--accent-2); }
.cta:active { transform: scale(0.98); }
.cta[aria-expanded='true'] { background: none; color: var(--fg); border-color: var(--fg); }

/* ---------- 3. the seal: certainty as moon phase, population as ink ---------- */
.seal { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.16em; color: var(--seal-gen); overflow: visible; }
.seal[data-adhd='true'] { color: var(--seal-adhd); }
.seal-24 { width: 24px; height: 24px; }
.seal-40 { width: 40px; height: 40px; }
.seal-64 { width: 64px; height: 64px; }

/* inline flow, not flex: a long level ("Guideline advice, not formally graded") wraps as words after the moon, never leaving the moon alone on a line */
.sure { display: inline; font-size: 0.86rem; line-height: 1.5; }
.sure .seal { vertical-align: -0.22em; margin-right: 0.35rem; }
.sure .pop { margin-left: 0.35rem; white-space: nowrap; }
.sure b { font-weight: 700; }
.sure .pop { font-size: 0.82em; font-weight: 600; color: var(--fg-dim); border: 1.5px solid var(--rule); border-radius: var(--r-s); padding: 0.05em 0.45em; line-height: 1.3; }
.sure[data-adhd='true'] .pop { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }

/* the certainty card: the seal explained, item page and expanded card */
.sure-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 1rem; align-items: start;
  padding: 1rem 1.1rem; border: 1.5px solid var(--rule); border-radius: var(--r);
  background: var(--bg-3);
}
.sure-card .seal { grid-column: 1; grid-row: 1 / span 4; margin-top: 0.15rem; }
.sure-card > :not(.seal) { grid-column: 2; }
.sure-card h3 { margin: 0; font-size: 1.05rem; }
.sure-card p { margin: 0; color: var(--fg-dim); font-size: 0.95rem; }
.sure-card .sure-facts { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.86rem; color: var(--fg-dim); margin: 0.1rem 0 0; padding: 0; list-style: none; }
.sure-card .sure-facts b { color: var(--fg); font-weight: 600; }
.sure-card a { font-weight: 600; }

/* ---------- 4. hero: one headline, one line, one action ---------- */
.hero { max-width: var(--wrap); margin: 0 auto; padding: clamp(1.4rem, 3.5vw, 2.6rem) var(--pad) 0; }
.hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); max-width: 24ch; }
.hero .lede { max-width: 62ch; }
@media (max-width: 639px) { .hero h1 { margin-bottom: 0.7rem; } .hero .lede { margin-bottom: 1rem; } }

/* the field sits in "How this is ranked" now: the hundred at a glance, one scroll down, JS off too */
.method .field { margin: 0 0 1.6rem; }
.field { border-top: 1px solid var(--rule); padding-top: 0.9rem; }
.field-h { display: flex; align-items: baseline; justify-content: space-between; gap: 0.1rem 1rem; flex-wrap: wrap; margin: 0 0 0.7rem; font-size: 0.95rem; }
.field-h b { font-weight: 700; }
.field-h span { color: var(--fg-faint); font-size: 0.86rem; white-space: nowrap; }
.moons { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 840px) { .moons { grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 0.3rem; } }
.moons li { aspect-ratio: 1; display: grid; place-items: center; }
.moons .seal { width: 100%; height: 100%; }
.moons a { display: block; width: 100%; height: 100%; border-radius: 50%; }
.moons a:hover .seal { transform: scale(1.18); }
.moons .seal { transition: transform 0.14s var(--press); }
.field-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0.8rem 0 0; padding: 0; list-style: none; font-size: 0.86rem; color: var(--fg-dim); }
.field-legend li { display: inline-flex; align-items: center; gap: 0.4rem; text-transform: lowercase; } /* the design sets the key in lowercase; the labels are shared with the capitalised row seals */
.field-legend b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.field-note { margin: 0.7rem 0 0; font-size: 0.86rem; color: var(--fg-faint); max-width: 56ch; }
.field-note b { color: var(--fg); font-weight: 600; }

/* ---------- 5. time tiles (item page and /start/) ---------- */
.tiles { display: flex; gap: 0.5rem; --tile: calc((100% - 2rem) / 5); }
.tile {
  position: relative; width: var(--tile); aspect-ratio: 1; flex: none;
  display: grid; place-content: center; gap: 0; text-decoration: none; text-align: center;
  border: 1.5px solid var(--rule); border-radius: var(--r); background: var(--bg-3); color: var(--fg);
  padding-top: 0.2rem; container-type: inline-size;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s var(--press);
}
.tile:hover { border-color: var(--accent); }
.tile:active { transform: scale(0.96); }
.tile .tile-n { font-weight: 800; font-size: clamp(1rem, 34cqi, 1.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.tile .tile-u { font-size: clamp(0.6rem, 16cqi, 0.72rem); color: var(--fg-dim); margin-top: 0.15rem; }
/* sized by the tile (min() keeps the design's 0.85rem where there is room): at 390 a fixed arc sat on "15", "30" and "plan" */
.tile .tile-arc { position: absolute; top: min(0.3rem, 3.5cqi); right: min(0.3rem, 3.5cqi); width: min(0.85rem, 15cqi); height: min(0.85rem, 15cqi); transform: rotate(-90deg); }
.tile .tile-arc circle { fill: none; stroke: currentColor; stroke-width: 2.2; }
.tile .tile-arc .track { opacity: 0.2; }
.tile .tile-arc .fill { stroke-dasharray: calc(31.4 * var(--arc, 0)) 31.4; stroke-linecap: round; }
.tile-plan .tile-arc .fill { stroke-dasharray: 2 2.3; }
.tile-plan .tile-n { font-size: clamp(0.8rem, 22cqi, 1rem); font-weight: 700; }
.tile[aria-selected='true'], .tile[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tile[aria-selected='true'] .tile-u, .tile[aria-pressed='true'] .tile-u { color: var(--accent-ink); }

/* ---------- 6. tailor: who first, then a few taps ---------- */
.tailor {
  max-width: var(--wrap); margin: clamp(1.4rem, 3vw, 2.2rem) auto 0; padding: clamp(1.1rem, 3vw, 1.8rem) var(--pad) 1.4rem;
  background: var(--bg-2); border-top: 3px solid var(--accent); border-bottom: 1px solid var(--rule);
  animation: unfurl 0.32s var(--ease-out);
}
@keyframes unfurl { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .tailor { animation: none; } }
.tailor-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tailor-head h2 { margin: 0; }
.tailor-head p { margin: 0; color: var(--fg-dim); font-size: 0.95rem; }
.who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin: 1rem 0 0; max-width: 34rem; }
.who-card {
  display: grid; gap: 0.2rem; text-align: left; padding: 0.9rem 1rem;
  border: 1.5px solid var(--rule); border-radius: var(--r); background: var(--bg-3);
  transition: border-color 0.14s ease, background 0.14s ease;
}
.who-card b { font-size: 1.1rem; font-weight: 700; }
.who-card small { color: var(--fg-dim); font-size: 0.85rem; line-height: 1.3; }
.who-card:hover { border-color: var(--accent); }
.who-card[aria-checked='true'] { border-color: var(--accent); background: var(--hl); border-width: 2px; }
.who-card[aria-checked='true'] small { color: var(--fg); }
.steps { display: grid; gap: 1rem 2rem; margin-top: 1.2rem; }
.steps[hidden] { display: none; }
@media (min-width: 720px) { .steps { grid-template-columns: auto auto 1fr; align-items: start; } .steps .field-wide { grid-column: 1 / -1; } }
.f-label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 0.4rem; }
.f-label small { color: var(--fg-faint); font-weight: 400; }
.f-note { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--fg-faint); }
.stepper { display: inline-flex; align-items: stretch; border: 1.5px solid var(--rule); border-radius: var(--r); background: var(--bg-3); overflow: hidden; }
.stepper input { width: 3.6rem; border: 0; background: none; text-align: center; font: inherit; font-weight: 700; color: var(--fg); -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.stepper button { border: 0; background: none; width: 2.6rem; font-size: 1.2rem; color: var(--fg-dim); }
.stepper button:hover { color: var(--accent); background: var(--bg-2); }
.stepper .unit { align-self: center; padding-right: 0.7rem; font-size: 0.82rem; color: var(--fg-faint); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  border: 1.5px solid var(--rule); border-radius: var(--r); background: var(--bg-3);
  padding: 0.42rem 0.8rem; font-size: 0.92rem; font-weight: 500; color: var(--fg); line-height: 1.2;
  min-height: 2.4rem; transition: border-color 0.14s ease, background 0.14s ease;
}
.chip:hover { border-color: var(--accent); }
.chip:active:not([disabled]) { transform: scale(0.96); }
.sel:hover { border-color: var(--accent); }
.chip[aria-pressed='true'], .chip[aria-checked='true'] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip[disabled] { opacity: 0.45; cursor: not-allowed; }
/* answers are sentence case, as the prototypes set them; the same words run lowercase inside sentences, so the case lives here */
.chip::first-letter { text-transform: uppercase; }
.chip .n { font-weight: 400; color: inherit; opacity: 0.7; margin-left: 0.3rem; font-size: 0.85em; }
.also { margin-top: 1.1rem; border-top: 1px solid var(--rule-soft); padding-top: 0.6rem; }
.also > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.95rem; }
.also > summary::-webkit-details-marker { display: none; }
.also > summary::before { content: '+'; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border: 1.5px solid var(--rule); border-radius: 50%; font-weight: 700; color: var(--fg-dim); }
.also[open] > summary::before { content: '\2212'; }
.also > summary small { color: var(--fg-faint); font-weight: 400; }
.also .steps { margin-top: 0.9rem; }
.tailor-foot { display: flex; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap; margin-top: 1.2rem; border-top: 1px solid var(--rule-soft); padding-top: 0.9rem; font-size: 0.95rem; }
.tailor-foot b { color: var(--accent); }
.who-chip { color: var(--fg-dim); }

/* ---------- 7. toolbar and the ledger ---------- */
.toolbar { max-width: var(--wrap); margin: clamp(1.2rem, 3vw, 2rem) auto 0; padding: 0 var(--pad); }
.toolbar-row { display: flex; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap; }
.mode { display: inline-flex; border: 1.5px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--bg-3); }
.mode button { border: 0; background: none; padding: 0.5rem 0.9rem; font-weight: 600; font-size: 0.92rem; color: var(--fg-dim); }
.mode button + button { border-left: 1.5px solid var(--rule); }
.mode button.on { background: var(--fg); color: var(--bg); }
.search { flex: 1 1 8rem; }
.toolbar > .mode { margin-top: 0.7rem; }
.toolbar > .tracker-wrap { margin-top: 0.7rem; }
.search input {
  width: 100%; border: 1.5px solid var(--rule); border-radius: var(--r); background: var(--bg-3); color: var(--fg);
  padding: 0.5rem 0.8rem; font: inherit;
}
.tracker { margin-left: auto; font-size: 0.9rem; color: var(--fg-dim); }
.tracker b { color: var(--fg); font-weight: 700; }
.rank-note { max-width: var(--wrap); margin: 0.8rem auto 0; padding: 0 var(--pad); font-size: 0.9rem; color: var(--fg-dim); }
.rank-note b { color: var(--fg); }

.ledger { list-style: none; margin: 0.8rem auto 0; padding: 0 var(--pad) 1rem; max-width: var(--wrap); border-top: 1px solid var(--rule); }
.row-wrap { position: relative; border-bottom: 1px solid var(--rule-soft); }
.row-wrap:last-child { border-bottom: 1px solid var(--rule); }
.row-toggle { position: absolute; inset: 0; cursor: pointer; list-style: none; z-index: 0; }
.row-toggle::-webkit-details-marker { display: none; }
.row-head, .row-body { position: relative; z-index: 1; }
.row-head { pointer-events: none; }
.row-head .stat-cite { pointer-events: auto; }
.row-head {
  display: grid; align-items: start;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  grid-template-areas: 'rank main' '. aside';
  gap: 0.15rem 0.7rem; padding: 1rem 0 1.05rem;
  transition: background 0.14s ease;
}
.row-head:hover, .row-wrap:has(> .row > .row-toggle:hover) .row-head { background: var(--bg-2); }
.row-wrap:has(> .row[open]) { background: var(--bg-2); box-shadow: 0 0 0 var(--pad) var(--bg-2); clip-path: inset(0 calc(-1 * var(--pad))); }

@supports selector(:has(a)) {
  .row-toggle:focus-visible { outline: none; }
  .row-wrap:has(> .row > .row-toggle:focus-visible) .row-head { outline: 3px solid var(--accent); outline-offset: -3px; }
}
.rank {
  grid-area: rank; font-weight: 800; font-size: 1.35rem; line-height: 1.15; text-align: right;
  color: var(--fg-faint); font-variant-numeric: tabular-nums lining-nums; font-variation-settings: var(--flare);
}
.row-wrap:has(> .row[open]) .rank { color: var(--accent); }
.row-main { grid-area: main; min-width: 0; }
.row-top { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.82rem; } /* on the scan line, shown once open, so opening never pushes the title */
.cat { color: var(--fg-faint); font-weight: 500; }
.move { font-size: 0.78rem; font-weight: 600; color: var(--accent); }
.move.down { color: var(--fg-faint); }
.move:empty { display: none; }
.title { display: block; font-weight: 700; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); line-height: 1.2; letter-spacing: -0.01em; }
.row-head:hover .title { color: var(--accent); }
.summary { display: block; color: var(--fg-dim); margin-top: 0.25rem; max-width: 60ch; }
.scan { display: flex; align-items: center; gap: 0.35rem 1rem; flex-wrap: wrap; margin-top: 0.6rem; font-size: 0.82rem; color: var(--fg-faint); }
.scan .sure { font-size: 0.86rem; }
.stat { font-size: 0.82rem; line-height: 1.35; color: var(--fg-faint); flex: 1 1 18rem; min-width: 0; max-width: 70ch; }
.stat .hl { color: var(--fg); }
.stat .stat-cite { color: var(--fg-faint); font-size: 0.85em; text-decoration: none; }
.stat .stat-cite:hover { text-decoration: underline; }
.reasons { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.reasons:empty { display: none; }
.why-chip { font-size: 0.8rem; line-height: 1.3; border: 1.5px solid var(--accent); color: var(--fg); padding: 0.18rem 0.55rem; border-radius: var(--r); }
.why-chip.down { border-style: dashed; border-color: var(--rule); color: var(--fg-dim); }
.row-aside { grid-area: aside; display: flex; align-items: baseline; gap: 0.3rem 1.2rem; margin-top: 0.55rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--fg-faint); }
.row-aside { max-width: 70ch; }  /* the benefit score wraps under the sentence instead of parking at the card's far edge */
.row-aside .stat { flex: 0 1 auto; }
.row-aside .impact-n { flex: none; }
.effort { display: inline-flex; align-items: center; gap: 0.4rem; }
.effort-pips { display: inline-flex; gap: 3px; }
.effort-pips i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0.45; }
.effort-pips i.on { opacity: 1; background: currentColor; }
.effort-pips[data-effort='low'] i.on { color: var(--good); }
.effort-pips[data-effort='medium'] i.on { color: var(--accent); }
.effort-pips[data-effort='high'] i.on { color: var(--warn); }
.done-label input {
  appearance: none; width: 2rem; height: 2rem; margin: 0; border: 1.5px solid var(--rule); border-radius: var(--r-s);
  background: var(--bg-3); display: grid; place-items: center; cursor: pointer; flex: none;
}
.done-label input:hover { border-color: var(--accent); }
.done-label input:checked { background: var(--good); border-color: var(--good); }
.done-label input:checked::after { content: '\2713'; color: var(--bg); font-size: 1.05rem; font-weight: 700; line-height: 1; }
.row-wrap.done .rank { color: var(--good); }
.row-wrap.done .row-head { box-shadow: inset 4px 0 0 var(--good); }
.row-wrap.done .mine-tag { display: inline-flex; }

/* expanded body: summary first, then depth, each block one glance */
.row-body { padding: 0.3rem 0 1.8rem; animation: open 0.22s ease both; }
@keyframes open { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .row-body { animation: none; } }
@media (min-width: 640px) { .row-body { padding-left: 3.3rem; } }
.row-body > * + * { margin-top: 1.2rem; }
.body-cols { display: grid; gap: 1.2rem; }
@media (min-width: 780px) { .body-cols { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 2.4rem; } }
.row-body h4, .item-page h2.sec { font-size: 0.82rem; font-weight: 700; color: var(--fg-faint); margin: 0 0 0.45rem; }
.why p { margin: 0 0 0.6rem; }
.how ol { margin: 0; padding-left: 1.3rem; }
.how li { margin-bottom: 0.4rem; padding-left: 0.2rem; }
.how li::marker { font-weight: 700; color: var(--accent); }
.caution { margin: 0.9rem 0 0; padding: 0.7rem 0.9rem; border-left: 4px solid var(--warn); background: var(--bg-3); border-radius: 0 var(--r-s) var(--r-s) 0; font-size: 0.93rem; }
.caution::before { content: attr(data-label); display: block; font-size: 0.78rem; font-weight: 700; color: var(--warn); margin-bottom: 0.15rem; }
.sources ul { list-style: none; margin: 0; padding: 0; }
.sources li { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; padding: 0.4rem 0; border-top: 1px solid var(--rule-soft); font-size: 0.92rem; }
.sources .tier { font-size: 0.74rem; font-weight: 700; color: var(--fg-faint); flex: none; border: 1.5px solid var(--rule); border-radius: var(--r-s); padding: 0.05rem 0.4rem; }
.sources .tier[data-tier='1'] { color: var(--good); border-color: var(--good); }
.sources .pub { color: var(--fg-faint); font-size: 0.85em; }
.row-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.92rem; }
.done-label { display: inline-flex; align-items: center; gap: 0.5rem; }
.anchor { color: var(--fg-dim); font-weight: 600; }

/* ---------- 8. the number, drawn: SMD figure ---------- */
.effect { margin: 0; display: grid; gap: 0.5rem; max-width: 34rem; }
.effect .ev { display: block; width: 100%; height: auto; overflow: visible; }
.ev-axis { stroke: var(--rule); stroke-width: 1; }
.ev-zero { stroke: var(--fg); stroke-width: 1.5; }
.ev-tick { fill: var(--fg-faint); font-size: 11px; font-family: var(--font); }
.ev-dir { fill: var(--fg-faint); font-size: 11px; font-family: var(--font); }
.ev-ci { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.ev-ci.gen { stroke: var(--fg-dim); }
.ev-pt { fill: var(--accent); }
.ev-pt.gen { fill: var(--fg-dim); }
.ev-band { fill: var(--hl); }
.effect figcaption { font-size: 0.95rem; line-height: 1.4; display: grid; gap: 0.15rem; }
.effect .ev-num { font-weight: 800; font-size: 1.5rem; line-height: 1.1; font-variation-settings: var(--flare); }
.effect .ev-num small { font-weight: 500; font-size: 0.6em; color: var(--fg-dim); margin-left: 0.3rem; font-variation-settings: var(--plain); }
.effect .ev-out { color: var(--fg); }
.effect .ev-cmp { color: var(--fg-dim); font-size: 0.9rem; }
.effect .ev-cite { color: var(--fg-faint); text-decoration-color: var(--rule); }
.effect.compact { display: inline-flex; align-items: center; gap: 0.5rem; vertical-align: middle; margin-right: 0.35rem; max-width: none; }
.effect.compact .ev { width: 5.6rem; height: 1.1rem; }
.effect.compact .ev-ci { stroke-width: 3; }
.ev-scale { font-size: 0.8rem; color: var(--fg-faint); }

/* ---------- 9. item page ---------- */
.item-page { max-width: var(--wrap); margin: 0 auto; padding: 1.2rem var(--pad) 3rem; }
.crumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--fg-dim); flex-wrap: wrap; margin-bottom: 1.4rem; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb .sep { color: var(--fg-faint); }
.item-head { display: grid; gap: 0.4rem; }
.item-rank { font-size: 0.88rem; font-weight: 600; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.item-title { margin: 0; max-width: 22ch; }
.item-summary { margin: 0.2rem 0 0; font-size: 1.15rem; color: var(--fg-dim); max-width: 52ch; }
.item-gauges { display: flex; align-items: center; gap: 0.6rem 1.6rem; flex-wrap: wrap; margin-top: 0.9rem; font-size: 0.9rem; }
@media (max-width: 639px) { .item-title { max-width: none; font-size: 1.9rem; } .item-summary { font-size: 1.05rem; } .item-page .crumb { margin-bottom: 0.7rem; } .practice-start { margin-top: 1.1rem; } }
.item-sure { display: grid; gap: 1.2rem; margin-top: 1.8rem; }
@media (min-width: 840px) { .item-sure { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.item-effect h2, .item-sure h2 { font-size: 0.82rem; font-weight: 700; color: var(--fg-faint); margin: 0 0 0.6rem; font-variation-settings: var(--plain); letter-spacing: 0; }
.item-cols { display: grid; gap: 1.6rem; margin-top: 2rem; }
@media (min-width: 780px) { .item-cols { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3rem; } }
.item-page section.why p { font-size: 1.05rem; }
.practice { margin-top: 2.2rem; border-top: 1px solid var(--rule); padding-top: 1.4rem; }
/* a fold: the heading is the summary, the rest waits one tap (JS off: closed, one click, like any <details>) */
.fold > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 0.6rem; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: '+'; font-weight: 700; color: var(--fg-faint); }
.fold[open] > summary::after { content: '\2212'; }
.fold-h { margin: 0; font-size: 1.2rem; }
.fold > summary:hover .fold-h { color: var(--accent); }
.practice-grid { display: grid; gap: 1.6rem; margin-top: 1rem; }
@media (min-width: 900px) { .practice-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3rem; } }
.practice h3 { font-size: 0.95rem; margin: 0 0 0.6rem; }
.do-strip { display: flex; gap: 0.5rem; --tile: min(4.2rem, calc((100% - 2rem) / 5)); }
.do-strip .tile-arc { display: none; }  /* at tab size the hour arc is a speck; /start/ keeps it at full size */
.do-panel { margin-top: 0.8rem; padding: 0.9rem 1rem; border: 1.5px solid var(--rule); border-radius: var(--r); background: var(--bg-3); position: relative; }
.do-panel[hidden] { display: none; }
.do-text { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.tier-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.do-plan-title { margin: 0 0 0.4rem; font-weight: 700; }
.do-plan { margin: 0; padding-left: 1.3rem; }
.do-plan li { margin-bottom: 0.35rem; }
.do-plan li::marker { color: var(--accent); font-weight: 700; }
.ex { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.ex li { position: relative; padding: 0.35rem 0 0.35rem 1.2rem; border-top: 1px solid var(--rule-soft); }
.ex li::before { content: ''; position: absolute; left: 0; top: 0.85rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); }
.pit { list-style: none; margin: 0; padding: 0; }
.pit li { padding: 0.5rem 0.8rem; margin-bottom: 0.5rem; border-left: 4px solid var(--warn); background: var(--bg-3); border-radius: 0 var(--r-s) var(--r-s) 0; font-size: 0.95rem; }
.pit b { display: block; font-size: 0.78rem; color: var(--warn); margin-bottom: 0.1rem; }
.guides { list-style: none; margin: 0; padding: 0; }
.guides li { border-top: 1px solid var(--rule-soft); }
.guide { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.1rem 0.7rem; padding: 0.55rem 0; text-decoration: none; }
.guide:hover .guide-t { text-decoration: underline; text-decoration-color: var(--accent); }
.guide .kind { grid-row: 1 / span 2; align-self: start; font-size: 0.72rem; font-weight: 700; color: var(--fg-faint); border: 1.5px solid var(--rule); border-radius: var(--r-s); padding: 0.1rem 0.4rem; margin-top: 0.15rem; }
.guide .kind[data-kind='video'] { color: var(--accent); border-color: var(--accent); }
.guide .kind[data-kind='tool'], .guide .kind[data-kind='app'], .guide .kind[data-kind='finder'] { color: var(--good); border-color: var(--good); }
.guide .guide-t { font-weight: 600; }
.guide .guide-p { font-size: 0.85rem; color: var(--fg-faint); }
.related { margin-top: 2.2rem; border-top: 1px solid var(--rule); padding-top: 1.4rem; }
.rel-grid { display: grid; gap: 0.7rem; }
@media (min-width: 640px) { .rel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rel-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.1rem 0.7rem; padding: 0.8rem 0.9rem; border: 1.5px solid var(--rule); border-radius: var(--r); text-decoration: none; background: var(--bg-3); }
.rel-card:hover { border-color: var(--accent); }
.rel-card .rank { grid-area: auto; grid-column: 1; grid-row: 1 / span 3; font-size: 1.2rem; }
.rel-card > :not(.rank) { grid-column: 2; }
.rel-card .cat { font-size: 0.8rem; }
.rel-card .rel-t { font-weight: 700; line-height: 1.25; }
.rel-card .sure { font-size: 0.8rem; }
.item-foot { margin-top: 2rem; display: flex; align-items: center; gap: 1rem 1.6rem; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 1.2rem; }
.disclaimer { max-width: 60ch; margin: 2rem auto 0; padding: 0 var(--pad); font-size: 0.86rem; color: var(--fg-faint); }
.item-page .disclaimer, .start-page .disclaimer, .map-page .disclaimer, .myths-page .disclaimer, .support-page .disclaimer { margin-left: 0; padding: 0; }  /* left-aligned pages: a centred block read as a layout slip */
.foot { max-width: var(--wrap); margin: 2.4rem auto 0; padding: 1.2rem var(--pad) 2.4rem; border-top: 1px solid var(--rule); font-size: 0.88rem; color: var(--fg-faint); display: flex; flex-direction: column; gap: 0.8rem; }
.foot a { color: var(--fg-dim); }

/* ---------- 10. evidence map ---------- */
.map-page { max-width: var(--wrap); margin: 0 auto; padding: 1.4rem var(--pad) 3rem; }
.map-credit { font-size: 0.9rem; color: var(--fg-dim); max-width: 64ch; margin: 0; }
.map-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem 1.6rem; margin: 1.4rem 0 0; padding: 1rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
@media (min-width: 720px) { .map-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.map-filters .f-label { margin-bottom: 0.35rem; }
.sel { border: 1.5px solid var(--rule); border-radius: var(--r); background: var(--bg-3); color: var(--fg); padding: 0.45rem 2.2rem 0.45rem 0.8rem; font: inherit; font-weight: 600; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1rem) 55%, calc(100% - 0.65rem) 55%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; max-width: 100%; }
.map-count { margin: 0.9rem 0 0; font-size: 0.92rem; color: var(--fg-dim); }
.map-count b { color: var(--fg); }
.map-axis { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 0.5rem 0 0.3rem; border-bottom: 1px solid var(--rule-soft); margin-top: 0.6rem; }
.map-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule-soft); align-items: center; }
.map-row .lbl { font-size: 0.88rem; line-height: 1.3; }
.map-row .lbl b { font-weight: 700; }
.map-row .lbl span { color: var(--fg-faint); }
.map-row .plot { display: block; width: 100%; height: auto; overflow: visible; }
.map-row .val { font-size: 0.86rem; color: var(--fg-dim); font-variant-numeric: tabular-nums; display: flex; gap: 0.5rem 0.8rem; flex-wrap: wrap; align-items: center; }
.map-row .val > span:last-child { flex-basis: 100%; } /* trials and people always start the second line, so every row wraps the same way */
.map-row .val b { color: var(--fg); font-weight: 700; }
.map-row .val .sure { font-size: 0.82rem; }
.map-row.hit { background: var(--hl); margin: 0 calc(-1 * var(--pad)); padding-left: var(--pad); padding-right: var(--pad); }
.map-axis .lbl, .map-axis .val { visibility: hidden; }
.map-axis svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (min-width: 720px) {
  .map-row, .map-axis .map-row { grid-template-columns: 12rem minmax(0, 1fr) 15rem; } /* the value column needs 15rem for number + interval + seal on one line; the label wraps instead */
  .map-axis .map-row { border: 0; padding: 0; }
}
/* room for a Moderate seal beside the numbers, so every row keeps number, interval and seal on one line */
@media (min-width: 1100px) { .map-row, .map-axis .map-row { grid-template-columns: 14rem minmax(0, 1fr) 15rem; } }
.map-group { margin-top: 1.4rem; }
.map-group h3 { font-size: 1.1rem; margin: 0; padding: 0.6rem 0 0.2rem; }
.map-group h3 small { font-weight: 400; color: var(--fg-faint); font-size: 0.85rem; margin-left: 0.5rem; }
.map-row[hidden], .map-group[hidden], .map-outcome[hidden] { display: none; }
/* the outcome select names the open section; with JS off every section shows and this heading names it */
.map-oh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.map-empty { padding: 2rem 0; color: var(--fg-dim); }
.map-table { margin-top: 2rem; }
.map-table > summary { cursor: pointer; font-weight: 600; }
.table-wrap { overflow-x: auto; margin-top: 0.8rem; }
.map-table table { border-collapse: collapse; font-size: 0.85rem; width: 100%; }
.map-table th, .map-table td { text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.map-table th { font-weight: 700; color: var(--fg-dim); }
.map-table td.num { font-variant-numeric: tabular-nums; text-align: right; }
.map-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.9rem 0 0; padding: 0; list-style: none; font-size: 0.86rem; color: var(--fg-dim); }
.map-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.map-how { margin-top: 1.8rem; border-top: 1px solid var(--rule); padding-top: 1.2rem; max-width: 62ch; color: var(--fg-dim); font-size: 0.95rem; }
.map-how h2 { font-size: 1.2rem; color: var(--fg); }
.map-how p { margin: 0 0 0.7rem; }
.map-how b { color: var(--fg); }

/* ---------- 11. doesn't hold up ---------- */
.myths-page { max-width: var(--wrap); margin: 0 auto; padding: 1.4rem var(--pad) 3rem; }
.myths { list-style: none; margin: 1.6rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.myth { padding: 1.2rem 0 1.3rem; border-bottom: 1px solid var(--rule-soft); display: grid; gap: 0.5rem; }
@media (min-width: 720px) { .myth { grid-template-columns: 10.5rem minmax(0, 1fr); gap: 0.4rem 1.6rem; align-items: start; } .myth .verdict { grid-column: 1; grid-row: 1 / span 5; } .myth > :not(.verdict) { grid-column: 2; } }
.verdict { display: inline-flex; align-items: center; gap: 0.45rem; align-self: start; justify-self: start; font-size: 0.85rem; font-weight: 700; padding: 0.3rem 0.65rem; border: 2px solid var(--fg-dim); border-radius: var(--r); color: var(--fg); background: var(--bg-3); }
.verdict::before { content: ''; width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.verdict[data-verdict='not_supported']::before { background: none; }
.verdict[data-verdict='no_better_than_placebo'] { border-style: dashed; }
.verdict[data-verdict='no_better_than_placebo']::before { border-style: dashed; }
.verdict[data-verdict='harmful'] { border-color: var(--harm); color: var(--harm); }
.verdict[data-verdict='harmful']::before { background: currentColor; border-radius: 2px; }
.verdict[data-verdict='unclear'] { border-style: dotted; color: var(--fg-dim); }
.verdict[data-verdict='unclear']::before { border-style: dotted; }
.myth .claim { margin: 0; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.myth .claim::before { content: '\201C'; color: var(--fg-faint); margin-right: 0.05em; }
.myth .claim::after { content: '\201D'; color: var(--fg-faint); }
.myth .short { margin: 0; color: var(--fg-dim); max-width: 60ch; }
.myth details { margin-top: 0.3rem; }
.myth summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; color: var(--fg-dim); }
.myth summary:hover { color: var(--fg); }
.myth .evidence { margin: 0.5rem 0 0; max-width: 60ch; }
.myth .evidence p { margin: 0 0 0.5rem; }
.instead-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; font-size: 0.92rem; }
.instead-line > span { color: var(--fg-faint); font-weight: 600; }
.myth .instead { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.myth .instead .seal { width: 1em; height: 1em; }
.myth .sources { margin-top: 0.6rem; }
.myths-note { margin: 1.6rem 0 0; max-width: 56ch; color: var(--fg-dim); font-size: 0.95rem; }

/* ---------- 12. right now (/start/) ---------- */
.start-page { max-width: var(--wrap); margin: 0 auto; padding: 1.4rem var(--pad) 3rem; }
.start-hero .tiles { margin-top: 1.2rem; --tile: min(4.6rem, calc((100% - 2rem) / 5)); }
.order-note { display: flex; align-items: center; gap: 0.5rem 0.9rem; flex-wrap: wrap; margin: 1.6rem 0 0; padding: 0.7rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule-soft); font-size: 0.92rem; color: var(--fg-dim); }
.order-note[hidden] { display: none; }
.order-note b { color: var(--accent); }
.order-note .who-chip { color: var(--fg); }
.order-note .count { margin-left: auto; }
.do-list { list-style: none; margin: 0; padding: 0; }
.do-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule-soft); align-items: start; position: relative; }
.do-card .do-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: var(--fg-faint); flex-wrap: wrap; }
.do-card .do-top .rank { font-size: 1rem; color: var(--fg-faint); }
.do-card .do-text { font-size: 1.1rem; max-width: 56ch; }
.do-card .do-sub { grid-column: 1; margin: 0; font-size: 0.88rem; color: var(--fg-dim); }
.do-card .did { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
.did { border: 2px solid var(--fg); border-radius: var(--r); background: none; padding: 0.55rem 1rem; font-weight: 700; transition: background 0.14s ease, transform 0.14s var(--press); }
.did:hover { background: var(--fg); color: var(--bg); }
.did:active { transform: scale(0.96); }
.do-card.done-now .did { display: none; }
.do-card.done-now .do-text { text-decoration: line-through; text-decoration-color: var(--rule); color: var(--fg-dim); }
.stamp {
  grid-column: 2; grid-row: 2 / span 2; align-self: center; justify-self: end;
  display: inline-grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 50%;
  border: 3px solid var(--good); color: var(--good); font-weight: 800; font-size: 0.85rem; transform: rotate(-8deg);
  animation: press 0.42s var(--press) both;
}
.stamp small { font-weight: 500; font-size: 0.7rem; }
@keyframes press { from { transform: rotate(-8deg) scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .stamp { animation: none; } }
.start-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.tally { margin: 0; color: var(--fg-dim); font-size: 0.92rem; }
.tally b { color: var(--fg); }
.quick { border: 2px solid var(--fg); border-radius: var(--r); background: none; padding: 0.5rem 1rem; font-weight: 700; text-decoration: none; display: inline-block; }
.quick:hover { background: var(--fg); color: var(--bg); }

/* ---------- 13. OG card, 1200 x 630, always the night key ---------- */
.og { width: 1200px; height: 630px; overflow: hidden; position: relative; background: #121826; color: #eef1f6; padding: 64px 72px; display: grid; grid-template-rows: auto 1fr auto; --accent: #ff8ab3; --hl: #4d2036; --fg: #eef1f6; --fg-dim: #b6bdcb; --fg-faint: #98a1b3; --seal-adhd: #ff8ab3; --seal-gen: #b6bdcb; }
.og-top { display: flex; align-items: center; gap: 22px; font-size: 26px; color: #b6bdcb; }
.og-top .sure { font-size: 26px; gap: 12px; }
.og-top .seal { width: 34px; height: 34px; }
.og-title { align-self: center; font-variation-settings: var(--flare); font-weight: 800; font-size: 74px; line-height: 1.02; letter-spacing: -0.02em; max-width: 780px; margin: 0; }
.og-title.long { font-size: 60px; }
.og-stat { font-size: 30px; line-height: 1.3; max-width: 760px; margin-top: 26px; }
.og-stat mark { font-size: 34px; font-weight: 700; }
.og-rank { position: absolute; right: 64px; top: 120px; text-align: right; font-variation-settings: var(--plain); font-weight: 800; font-size: 300px; line-height: 0.85; color: #ff8ab3; opacity: 0.16; font-variant-numeric: tabular-nums; }
.og-rank small { display: block; -webkit-text-stroke: 0; color: #98a1b3; font-size: 26px; font-weight: 500; opacity: 1; font-variation-settings: var(--plain); }
.og-foot { display: flex; align-items: center; justify-content: space-between; font-size: 26px; color: #b6bdcb; }
.og-foot .wordmark { font-size: 36px; color: #eef1f6; }
.og-foot .wordmark b { color: #ff8ab3; }
.og .mark { width: 44px; height: 44px; }


/* ---------- 14. build-only parts the prototypes do not draw, in the same tokens ---------- */
.sample-banner { max-width: var(--wrap); width: calc(100% - var(--pad) * 2); margin: 0.9rem auto 0; padding: 0.6rem 0.9rem; border: 1.5px solid var(--accent); border-left-width: 5px; border-radius: var(--r-s); background: var(--hl); color: var(--fg); font-size: 0.88rem; }
.sample-banner b { letter-spacing: 0.06em; text-transform: uppercase; }
.quick[hidden] { display: none; }
.empty { margin: 1.2rem 0; color: var(--fg-dim); display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.empty[hidden] { display: none; }
.profile-count { font-size: 0.85rem; color: var(--fg-faint); }
.more-link { font-weight: 700; color: var(--accent); }
.order-note .fits { margin-left: auto; color: var(--fg-dim); }
.order-note .order-who b { color: var(--fg); }
.order-note .order-who b:first-child { color: var(--accent); }

/* sunk: items the profile says do not apply, never hidden, just folded */
.sunk { max-width: var(--wrap); margin: 1.6rem auto 0; padding: 0 var(--pad); box-sizing: border-box; }
.sunk[hidden] { display: none; }
.sunk > details { border: 1.5px solid var(--rule); border-radius: var(--r); background: var(--bg-2); }
.sunk > details > summary { cursor: pointer; padding: 0.8rem 1rem; font-weight: 700; list-style: none; display: flex; gap: 0.5rem; align-items: baseline; }
.sunk > details > summary::-webkit-details-marker { display: none; }
.sunk > details > summary::before { content: '+'; color: var(--accent); }
.sunk > details[open] > summary::before { content: '\2212'; }
.sunk > details > summary span { color: var(--fg-faint); font-weight: 400; font-size: 0.9rem; }
.sunk-note { margin: 0 1rem 0.4rem; font-size: 0.88rem; color: var(--fg-dim); max-width: 64ch; }
.ledger-sunk { padding: 0 1rem 0.6rem; }
.ledger-sunk .row-head { opacity: 0.75; }

/* how this is ranked (#method): the home page's method block; the map's own .map-how keeps its narrow column */
.method { max-width: var(--wrap); margin: 3rem auto 0; padding: 1.6rem var(--pad) 0; border-top: 0; font-size: 0.95rem; background: linear-gradient(var(--rule), var(--rule)) no-repeat var(--pad) 0 / calc(100% - var(--pad) * 2) 1px; }
.method h2 { font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2rem); margin-bottom: 1.2rem; }
.method-grid { display: grid; gap: 1.6rem 3rem; }
@media (min-width: 840px) { .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .method-grid > article:nth-child(2) { grid-row: span 3; } }
.method h3 { color: var(--fg); font-size: 1rem; }
.method p { max-width: 62ch; }
.method-sub { margin-top: 2.2rem !important; }
.cert-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.cert-legend li { line-height: 1.45; }
.cert-legend .sure { margin-right: 0.35rem; vertical-align: -0.12em; }
.pop-legend { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--rule-soft); }
.pop-legend li { display: flex; align-items: flex-start; gap: 0.55rem; }
.pop-legend .seal { flex: none; margin-top: 0.2rem; }
.grade-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.grade-legend li { display: flex; gap: 0.7rem; align-items: flex-start; }
.grade { flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1.5px solid currentColor; border-radius: var(--r-s); font-weight: 800; font-size: 0.85rem; line-height: 1; color: var(--fg-dim); }
.grade[data-grade='A'] { color: var(--good); }
.grade[data-grade='B'] { color: var(--accent); }
.grades { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.rules-dump { margin-top: 0.8rem; border: 1.5px solid var(--rule); border-radius: var(--r); }
.rules-dump summary { cursor: pointer; padding: 0.7rem 0.9rem; font-weight: 600; }
.rules-dump summary span { color: var(--fg-faint); font-weight: 400; }
.rules-dump .table-wrap { overflow-x: auto; padding: 0 0.9rem 0.9rem; }
.rules-dump table, .fields { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.rules-dump th, .rules-dump td, .fields th, .fields td { text-align: left; vertical-align: top; padding: 0.45rem 0.8rem 0.45rem 0; border-top: 1px solid var(--rule-soft); }
.rules-dump thead th, .fields thead th { color: var(--fg-faint); font-weight: 600; font-size: 0.78rem; }
.rules-dump code, .fields code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.9em; }
.rules-dump .d.plus { color: var(--good); font-weight: 700; }
.rules-dump .d.minus { color: var(--harm); font-weight: 700; }
.reviewed { margin-top: 1.2rem !important; font-size: 0.85rem; color: var(--fg-faint); }

/* item page extras: the sources check-list, the share link, provenance */
.item-page .ex-h, .item-page .guides-h { margin-top: 1.4rem; }
.check-us { margin: 0 0 1.2rem; display: grid; gap: 0.55rem; font-size: 0.95rem; }
.check-us > div { display: grid; gap: 0.1rem 1.2rem; }
@media (min-width: 640px) { .check-us > div { grid-template-columns: 10rem minmax(0, 1fr); } }
.check-us dt { color: var(--fg-faint); font-size: 0.85rem; font-weight: 600; padding-top: 0.1rem; }
.check-us dd { margin: 0; }
.check-us .grade { width: 1.3rem; height: 1.3rem; font-size: 0.78rem; margin-right: 0.3rem; vertical-align: -0.2em; }
.share { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--fg-dim); font-size: 0.92rem; }
.share a[data-copy] { border: 1.5px solid var(--rule); border-radius: var(--r); padding: 0.35rem 0.8rem; text-decoration: none; color: var(--fg); }
.share a[data-copy]:hover { border-color: var(--fg-dim); }
.prov { max-width: 60ch; margin: 1.6rem auto 0; padding: 0 var(--pad); font-size: 0.85rem; color: var(--fg-faint); }
.item-page .prov, .map-page .prov, .myths-page .prov, .support-page .prov { padding: 0; margin-left: 0; }
.prov p { margin: 0 0 0.5rem; }
.prov a { color: var(--fg-dim); }
.prov dl { margin: 0; display: grid; gap: 0.3rem; }
.prov dl > div { display: flex; gap: 0.2rem 0.8rem; flex-wrap: wrap; }
.prov dt { font-weight: 600; color: var(--fg-dim); }
.prov dd { margin: 0; }
.sure-basis { font-size: 0.9rem; color: var(--fg-dim); }

/* the country note: informs, does not warn, so neutral ink */
.local { margin: 1.6rem 0 0; max-width: 40rem; padding: 0.7rem 0.9rem; border: 1.5px solid var(--rule-soft); border-radius: var(--r-s); font-size: 0.92rem; }
.local h2 { margin: 0 0 0.3rem; font-size: 0.8rem; font-weight: 700; color: var(--fg-faint); font-variation-settings: var(--plain); letter-spacing: 0; }
.local-note p { margin: 0; }
.local-src { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--fg-faint); }
.local-src a { margin-right: 0.6rem; }
.local-checked { font-size: 0.8rem; color: var(--fg-faint); }

/* footer: the site's other doors, what we do not do, who publishes, the theme */
.foot p { margin: 0; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; flex-basis: 100%; font-weight: 500; }
.foot-end { display: flex; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; }

/* support pages (/about/, /methodology/, /data/) and the 404 */
.support-page, .notfound-page { max-width: var(--wrap); margin: 0 auto; padding: 1.4rem var(--pad) 3rem; }
.support-page > p, .support-page section { max-width: 66ch; }
.support-page section { margin-top: 1.8rem; }
.support-page h2 { font-size: 1.3rem; }
.downloads { padding-left: 1.2rem; margin: 0 0 0.6rem; }
.downloads a { font-weight: 700; }
.fields tbody th { font-weight: 400; width: 34%; }

/* the evidence map legend: an interval that runs off the fixed scale is drawn dashed */
.clip-mark { display: inline-block; width: 1.5rem; border-top: 2.5px dashed var(--accent); }

/* the other effect kinds (healthy100 heritage; the adhd data uses smd, share_of_people, years, guideline_amount) */
.effect .ev-fill { fill: var(--accent); }
.effect .ev-base { color: var(--fg-dim); }
.effect .ev-t { font-family: var(--font); font-size: 11px; fill: var(--fg-faint); }
.effect .ev-t-strong { font-size: 13px; font-weight: 700; fill: var(--fg); }
.effect .ev-dots circle { fill: var(--fg-faint); opacity: 0.5; }
.effect .ev-dots circle.ev-dot-on { fill: var(--accent); opacity: 1; }
.effect .ev-cell { fill: none; stroke: var(--rule); stroke-width: 1; }
.effect .ev-cell-on { fill: var(--accent); stroke: none; }
.effect .ev-cell-part { fill: var(--accent); stroke: none; clip-path: inset(0 50% 0 0); }
.effect-share_of_people { grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr); align-items: end; gap: 1.2rem; }
.effect-share_of_people .ev { max-width: 9rem; }
.effect-absolute_per_1000 .ev { max-width: 30rem; }
.effect .ev-amount { display: grid; gap: 0.3rem; justify-items: start; }
.ev-amount .ev-big { font-variation-settings: var(--flare); font-weight: 800; font-size: clamp(2.6rem, 2rem + 3vw, 4.2rem); line-height: 0.95; letter-spacing: -0.02em; color: var(--accent); }
.ev-amount .ev-big small { display: inline-block; max-width: 100%; font-size: 0.4em; font-weight: 600; margin-left: 0.2em; color: var(--fg); letter-spacing: normal; line-height: 1.15; font-variation-settings: var(--plain); }
.ev-amount .ev-bracket { width: 7rem; height: 12px; color: var(--fg-faint); }
.ev-amount .ev-qual { font-size: 0.8rem; color: var(--fg-faint); }
.effect-guideline_amount .ev-num { display: none; }
.effect.compact .ev-t, .effect.compact .ev-amount .ev-bracket, .effect.compact .ev-amount .ev-qual { display: none; }
.effect.compact .ev-share { width: 2.2rem; height: auto; }
.effect.compact .ev-1000 { width: 4.6rem; height: auto; }

/* languages (only in --preview-langs builds until a translation ships): a small menu under the header button,
   and the one-time slip for a visitor whose browser language has a version. Never redirects. */
.lang { position: relative; }
.lang > summary { list-style: none; cursor: pointer; }
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary .ghost { display: inline-flex; align-items: center; gap: 0.4rem; }
.lang > summary .ghost::after { content: '\25BE'; font-size: 0.7em; color: var(--fg-faint); }
.lang[open] > summary .ghost { border-color: var(--accent); color: var(--fg); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 50; min-width: 11rem;
  margin: 0; padding: 0.3rem 0; list-style: none;
  background: var(--bg-2); border: 1.5px solid var(--rule); border-radius: var(--r-s);
  animation: unfurl 0.18s var(--ease-out) both;
}
.lang-menu a {
  position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0.9rem 0.5rem 1.7rem; text-decoration: none; color: var(--fg-dim); font-size: 0.92rem;
}
.lang-menu a:hover { background: var(--bg-3); color: var(--fg); }
.lang-menu a[aria-current='true'] { color: var(--fg); font-weight: 600; }
.lang-menu a[aria-current='true']::before { content: '\2713'; color: var(--accent); position: absolute; left: 0.55rem; }
.lang-menu small { font-size: 0.7rem; color: var(--fg-faint); letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 520px) { .lang-menu { right: auto; left: 0; } }
.lang-slip {
  max-width: var(--wrap); margin: 0.9rem auto 0; width: calc(100% - var(--pad) * 2); box-sizing: border-box;
  display: flex; align-items: center; gap: 0.8rem 1.2rem; flex-wrap: wrap;
  padding: 0.65rem 0.9rem; border: 1.5px solid var(--rule); border-left: 5px solid var(--accent); border-radius: var(--r-s);
  background: var(--bg-2); font-size: 0.9rem;
}
.lang-slip[hidden] { display: none; }
.lang-slip p { margin: 0; flex: 1 1 18rem; }
.lang-slip .actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.lang-slip .cta { font-size: 0.9rem; padding: 0.45rem 0.9rem; }
@media (prefers-reduced-motion: reduce) { .lang-menu { animation: none; } }


/* ---------- 15. the ADHD form (design/adhd-form/DIRECTION.md) ---------- */
/* move 3: the domain glyph and name in the meta strip, and the domain chips over the list */
.glyph { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.22em; }
.dom { display: inline-flex; align-items: center; gap: 0.32rem; font-weight: 600; color: var(--fg-dim); }
.dom .glyph { color: var(--fg); }
.dom + .cat::before { content: '\00b7'; margin-right: 0.5rem; color: var(--fg-faint); }
.domains { flex: none; }
.domains .sel { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.mine-tag { display: none; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 700; color: var(--good); }
.mine-tag::before { content: '\2713'; }

/* move 5: the meter, one cell per item */
.tracker-wrap { margin-left: auto; display: grid; gap: 0.3rem; justify-items: end; min-width: 11rem; }
.tracker-wrap .tracker { margin: 0; }
.meter { display: block; position: relative; width: 100%; height: 0.55rem; border-radius: 99px; overflow: hidden; background: var(--rule-soft); border: 1px solid var(--rule-soft); }
.meter i { display: block; height: 100%; width: calc(var(--p, 0) * 1%); background: var(--good); transition: width 0.3s var(--ease-out); }
.meter::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(1% - 1px), var(--bg) calc(1% - 1px) 1%); }
.tracker .kept { color: var(--fg-faint); font-size: 0.86em; }
.tracker .kept::before { content: '\00b7'; margin: 0 0.45em; }
@media (prefers-reduced-motion: reduce) { .meter i { transition: none; } }
@media (max-width: 559px) { .tracker-wrap { justify-items: start; min-width: 0; flex-basis: 100%; margin-left: 0; } }

/* move 6: the item page starts with the timed version */
.practice-start { margin-top: 1.6rem; padding: 1.1rem 1.2rem 1.2rem; border: 1.5px solid var(--rule); border-top: 3px solid var(--accent); border-radius: var(--r); background: var(--bg-2); }
.practice-start h2 { font-size: 1.2rem; margin: 0; }
.practice-start .do-strip { margin-top: 0.8rem; }
.practice-more { border-top: 1px solid var(--rule); }
.item-page .rated { margin-top: 2.2rem; }
.item-page .sources { margin-top: 1.6rem; }

@media (max-width: 559px) { .summary { font-size: 0.97rem; } }

/* move 7: targets on touch */
@media (pointer: coarse) {
  .chip, .mode button, .tile, .did, .quick { min-height: 2.75rem; }
  .done-label input { width: 2.2rem; height: 2.2rem; }
  .search input, .domains .sel { min-height: 2.75rem; }
}

/* ---------- 16. the scan layer (design/debloat): a closed row is rank, title, one plain line, the sure line ---------- */
/* The domain strip, the effort pips, the headline number and the score stay in the DOM (honesty layer, meta
   descriptions, the suites) and show the moment the row opens; JS off opens rows too. */
@supports selector(:has(a)) {
  .row-wrap:not(:has(> .row[open])) :is(.row-top, .effort, .row-aside) { display: none; }
  .row-wrap:not(:has(> .row[open])) .scan { margin-top: 0.45rem; }
  .row-wrap:not(:has(> .row[open])) .row-head { padding-bottom: 0.95rem; }
}
/* in the scan line the population is words in ink, not a second pill beside the moon */
.scan .sure .pop { border: 0; padding: 0; font-size: 0.95em; }
.scan .sure .pop::before { content: '\00b7'; margin-right: 0.35rem; color: var(--fg-faint); font-weight: 400; }