/* ScreenMyYouTuber — the public site.
 *
 * One stylesheet, no build step, no CDN, no webfont. Adult-facing and
 * document-like on purpose: this is research to be read and cited, not a
 * consumer app to be swiped through.
 *
 * Risk levels are encoded three times over: the word ("None found", "Low",
 * "Moderate", "High"), the position (how many meter segments are filled, and
 * how far up the page the finding sits), and the colour. Any one of the three
 * carries the meaning alone, so the page still reads in greyscale, in print,
 * and to a colour-blind reader.
 *
 * There is one hue per level and it is declared once, in `--sev-*`. Components
 * read `var(--sev)`, which the `.lv-*` / `.level-*` carriers set. Never add a
 * fourth copy of the palette.
 */

:root {
  /* Warm off-white, from the design. Not pure #fff: paper, so the white cards
     sitting on it read as raised rather than dissolving into the page. */
  --bg: #faf8f4;
  --surface: #fdfcfa;
  --surface-quiet: #f2f0ec;
  --ink: #17161a;
  /* Body prose is a step softer than a heading. Long serif paragraphs at full
     ink are heavier than they need to be. */
  --ink-body: #3a3630;
  --ink-soft: #56524b;
  --ink-faint: #78736c;
  --line: #e7e3dc;
  --accent: #2f5d50;
  --accent-ink: #ffffff;
  --warn-bg: #fdf6e7;
  --warn-line: #e6cf9c;
  --flag-bg: #fbeceb;
  --flag-line: #e3b3ae;
  --ok-bg: #edf5f1;
  --radius: 10px;
  --wrap: 72rem;

  /* Severity. Green is reserved for "nothing found" and low is blue, so the
     two quietest states cannot be mistaken for each other — which is exactly
     what went wrong when low was green and moderate a pale amber.

     Two knobs per level on purpose: `--sev-*` is the fill a meter or a rule
     paints, taken from the design, and `--sev-ink-mix` pulls label text darker
     than that fill so small uppercase type still clears 4.5:1 on its own wash.
     Painting text with the fill directly is what fails contrast. */
  --sev-none: oklch(0.65 0.09 150);
  --sev-low: oklch(0.62 0.08 250);
  --sev-moderate: oklch(0.72 0.13 70);
  --sev-high: oklch(0.56 0.16 25);
  --sev: var(--sev-none);
  --sev-ink-mix: 42%;
}

/* Dark is opt-in and remembered, never inferred from the OS: the light palette
   is the one this page was designed in, so it is what a reader gets by default
   and `[data-theme]` is the only thing that changes it. */
:root[data-theme="dark"] {
  --bg: #16181a;
  --surface: #1e2124;
  --surface-quiet: #24282c;
  --ink: #eceae6;
  --ink-soft: #b6b0a7;
  /* Nudged up from #8d867c, which measured 4.49:1 on --surface — under the
     4.5 floor by a hair, and this is the finding meta line. */
  --ink-faint: #969086;
  --line: #33383d;
  --accent: #7dc4ad;
  --accent-ink: #12211d;
  --warn-bg: #2c2517;
  --warn-line: #5e4d27;
  --flag-bg: #2f1e1d;
  --flag-line: #6b3c38;
  --ok-bg: #1b2723;

  /* Same hues, lifted off the dark ground. The washes are `color-mix`ed
     against `--surface`, so only these four values change. */
  --ink-body: #d8d4cd;
  --sev-none: oklch(0.76 0.11 150);
  --sev-low: oklch(0.74 0.10 250);
  --sev-moderate: oklch(0.82 0.13 70);
  --sev-high: oklch(0.72 0.15 25);
  /* Inverted: on a dark ground the label has to sit *lighter* than its fill. */
  --sev-ink-mix: 78%;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-body);
  font: 17px/1.65 ui-serif, Georgia, "Times New Roman", serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }

h1, h2, h3 {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.25;
  color: var(--ink);
}
h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0 0 .5rem; letter-spacing: -.02em; }
h2 { font-size: 1.3rem; margin: 2.25rem 0 .6rem; letter-spacing: -.01em; }
h3 { font-size: 1.02rem; margin: 0; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--accent-ink);
  padding: .6rem 1rem; z-index: 10;
}
.skip:focus { left: .5rem; top: .5rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.muted { color: var(--ink-soft); }

/* --- Chrome ------------------------------------------------------------- */

.masthead { border-bottom: 1px solid var(--line); background: var(--surface); }
.masthead-inner {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding-top: .9rem; padding-bottom: .9rem;
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  color: var(--ink); text-decoration: none;
}
.brand-mark { color: var(--accent); font-size: 1.6rem; line-height: 1; }
.brand strong {
  display: block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.01em;
}
.brand small { display: block; color: var(--ink-faint); font-size: .78rem; }
.masthead nav {
  display: flex; gap: 1.25rem;
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: .92rem;
}

/* A moon that fills in when dark is on — the state is in `aria-pressed` for a
   screen reader and in the fill for everyone else, never in colour alone. */
.theme {
  padding: .3rem; border: 0; background: none; cursor: pointer;
  color: var(--ink-soft); line-height: 0;
}
.theme:hover { color: var(--ink); }
.theme-mark {
  display: block; width: 15px; height: 15px; border-radius: 999px;
  border: 2px solid currentColor;
  box-shadow: inset -4px -1px 0 0 currentColor;
}
:root[data-theme="dark"] .theme-mark { box-shadow: inset -4px -1px 0 0 transparent; }

main { padding-bottom: 4rem; }

.footer {
  border-top: 1px solid var(--line);
  background: var(--surface-quiet);
  padding: 2rem 0;
  color: var(--ink-soft);
  font-size: .9rem;
}
.footer p { margin: 0 0 .75rem; max-width: 46rem; }

.crumbs {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .85rem; color: var(--ink-faint);
  margin: 1.5rem 0 .5rem;
}

.hero { margin: 2.5rem 0 1.5rem; }
.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 44rem; }

/* --- Panels and notices -------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0;
}
.panel h2 { margin-top: 0; }
.panel-quiet { background: var(--surface-quiet); }
.panel-warn { background: var(--warn-bg); border-color: var(--warn-line); }
.panel-dispute { background: var(--ok-bg); border-color: var(--accent); }

.notice {
  border-left: 4px solid var(--accent);
  background: var(--surface-quiet);
  padding: .85rem 1.1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.25rem 0;
}
.notice-warn { border-left-color: var(--warn-line); background: var(--warn-bg); }

.flash { padding: .85rem 1.1rem; border-radius: var(--radius); margin: 1.25rem 0; }
.flash-ok { background: var(--ok-bg); border: 1px solid var(--accent); }
.flash-error { background: var(--flag-bg); border: 1px solid var(--flag-line); }

.empty { color: var(--ink-soft); padding: 2rem 0; }
.count {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .85rem; color: var(--ink-faint);
  margin: 1.5rem 0 .5rem;
}

/* --- Forms --------------------------------------------------------------- */

input, select, button {
  font: inherit;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .95rem;
}
input[type=text], input[type=search], select {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}
button, .button {
  display: inline-block;
  padding: .6rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  cursor: pointer;
}
button:hover, .button:hover { filter: brightness(1.08); }

.request-form { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.request-form input[type=text] { flex: 1 1 22rem; width: auto; }

/* The honeypot must be unreachable for people but present for bots — so it is
   moved off-canvas rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

.filters { margin: 1rem 0; }
.filter-row {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: end;
}
.filter-row label { display: block; }
.filter-row label.grow { flex: 1 1 16rem; }
.filter-row label span {
  display: block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .78rem; color: var(--ink-faint);
  margin-bottom: .2rem;
}
.reset { font-family: ui-sans-serif, system-ui, sans-serif; font-size: .88rem; }

/* --- Directory cards ----------------------------------------------------- */

.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card:hover { border-color: var(--accent); }
.card-link {
  display: flex; gap: 1rem; padding: 1rem;
  color: inherit; text-decoration: none; align-items: flex-start;
}
.avatar {
  width: 72px; height: 72px; flex: none;
  border-radius: 50%; object-fit: cover;
  background: var(--surface-quiet);
}
.avatar-lg { width: 96px; height: 96px; }
.avatar-blank {
  display: grid; place-items: center;
  color: var(--ink-faint); font-size: 2rem;
}
.card-body { display: block; min-width: 0; }
.card-title {
  display: block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; font-size: 1.05rem;
}
.card-summary {
  display: block; color: var(--ink-soft);
  margin: .3rem 0 .5rem;
  font-size: .95rem;
}
.card-meta {
  display: block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .8rem; color: var(--ink-faint); margin-top: .4rem;
}

/* --- Pills --------------------------------------------------------------- */

.pills { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 0; }
.pill {
  display: inline-block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .74rem; letter-spacing: .01em;
  padding: .16rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-quiet);
  color: var(--ink-soft);
  white-space: nowrap;
}
.pill-published { background: var(--ok-bg); border-color: var(--accent); color: var(--ink); }
.pill-stale, .pill-processing { background: var(--warn-bg); border-color: var(--warn-line); color: var(--ink); }
/* `pill-not_analyzed` deliberately has no rule: the base pill is already the
   quiet palette, and nothing has gone wrong, so it must never borrow the flag
   or warning colours the way `pill-failed` does. */
.pill-failed { background: var(--flag-bg); border-color: var(--flag-line); color: var(--ink); }
.pill-flagged { background: var(--flag-bg); border-color: var(--flag-line); color: var(--ink); }
/* A keyword hit and a presentation mismatch are both flags, but only one of
   them is the thing this research exists to find — so it carries weight the
   plain flag does not. */
.pill-mismatch {
  background: var(--flag-bg);
  border-color: var(--flag-line);
  color: var(--ink);
  font-weight: 600;
}
/* Preliminary is "not finished yet", not "something is wrong" — so it reads as
   informational rather than borrowing the warning palette. */
.pill-preliminary { background: var(--surface-quiet); border-color: var(--accent); color: var(--ink); }
.pill-incomplete { background: var(--warn-bg); border-color: var(--warn-line); color: var(--ink); }
.pill-typicality-outlier { background: var(--warn-bg); border-color: var(--warn-line); color: var(--ink); }
/* Language is an attribute, not a judgement — same weight as a topic tag. */
.pill-language { background: var(--surface-quiet); border-color: var(--line); color: var(--muted); }

/* --- Channel page -------------------------------------------------------- */

.channel-head, .video-head {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  align-items: flex-start; margin: 1rem 0 1.5rem;
}
.channel-head > div, .video-head > div { flex: 1 1 20rem; min-width: 0; }
.video-thumb { border-radius: var(--radius); max-width: 100%; height: auto; }

.attribution {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .88rem; color: var(--ink-soft);
  margin: .5rem 0;
}
.age-band { font-size: 1.25rem; margin: 0 0 .4rem; text-transform: capitalize; }
.external { font-family: ui-sans-serif, system-ui, sans-serif; font-size: .92rem; }

.plain { padding-left: 1.1rem; }
.plain li { margin: .3rem 0; }

/* --- Findings ------------------------------------------------------------ */

.findings { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.finding {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
}
.finding-descriptive { background: var(--surface-quiet); }
.finding-head {
  display: flex; gap: .75rem; align-items: baseline;
  justify-content: space-between; flex-wrap: wrap;
}
.finding p { margin: .4rem 0; }
.finding-meaning { font-size: .88rem; }

/* The one place a level becomes a colour. Everything severity-coloured on the
   site reads `var(--sev)` and derives its own wash, so a new component never
   needs a per-level rule and the four hues can never drift apart. */
.lv-none, .level-none { --sev: var(--sev-none); }
.lv-low, .level-low { --sev: var(--sev-low); }
.lv-moderate, .level-moderate { --sev: var(--sev-moderate); }
.lv-high, .level-high { --sev: var(--sev-high); }

.level {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .22rem .55rem; border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--sev) 35%, transparent);
  background: color-mix(in oklch, var(--sev) 16%, var(--surface));
  color: color-mix(in oklch, var(--sev) var(--sev-ink-mix), var(--ink));
  white-space: nowrap;
}
/* Descriptive dimensions must not read as alarms: a high educational value is
   good news, so it never borrows the severity palette at all. */
.level.level-descriptive {
  background: var(--surface-quiet); border-color: var(--line);
  color: var(--ink-soft); text-transform: none; letter-spacing: 0;
}

.finding-meta {
  display: flex; flex-wrap: wrap; gap: .9rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .8rem; color: var(--ink-faint);
}
.source::before { content: "◆ "; color: var(--accent); }
.source-metadata::before, .source-thumbnail::before { color: var(--ink-faint); }

/* --- Channel traits and folded findings ---------------------------------- */

/* "About the channel": descriptive dimensions, kept out of the concern list so
   nothing has to explain why a high level there is good news. */
.traits { list-style: none; padding: 0; margin: .8rem 0 0; }
.trait {
  display: grid; grid-template-columns: 10rem minmax(6rem, 1fr) 5.5rem;
  gap: .3rem 1rem; align-items: center;
  padding: .7rem 0; border-top: 1px solid var(--line);
}
.traits > .trait:last-child { border-bottom: 1px solid var(--line); }
.trait-dim {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .84rem; font-weight: 600;
}
/* Deliberately monochrome. These are descriptions, not warnings, so they take
   the position encoding without borrowing a severity hue. */
.trait .meter i { height: 5px; width: auto; flex: 1; border-radius: 999px; }
.trait .meter i.on { background: var(--ink); }
.trait-word {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .78rem; color: var(--ink-soft); text-align: right;
  white-space: nowrap;
}
.trait-note { font-size: .88rem; color: var(--ink-soft); grid-column: 1 / -1; margin: 0; }

.does-well {
  display: flex; gap: .6rem; align-items: baseline; margin: .9rem 0 0;
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: .85rem;
}
.does-well strong { color: color-mix(in oklch, var(--sev-none) var(--sev-ink-mix), var(--ink)); flex: none; }
.does-well span { color: var(--ink-soft); }

/* The labels panel leads with the figure, because "8 of 10" is the part a
   reader can check and the paragraph is the part that explains it. */
.label-card { display: flex; gap: 1.2rem; align-items: flex-start; }
.label-figure {
  flex: none; text-align: center; padding-right: 1.2rem;
  border-right: 1px solid var(--warn-line);
}
.label-figure b { display: block; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.label-figure b i { font-size: 1.05rem; font-style: normal; color: var(--ink-faint); }
.label-figure span {
  display: block; max-width: 6rem; margin-top: .35rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .7rem; line-height: 1.3; color: var(--ink-faint);
}

.topics { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 0; }
.topic {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .74rem; padding: .2rem .5rem; border-radius: 5px;
  background: var(--surface-quiet); color: var(--ink-soft);
}

/* --- Severity meters ------------------------------------------------------ */

/* Position encoding: how many segments are filled says the same thing the
   colour and the word do. This is what survives greyscale and colour-blindness,
   so it is never decorative and never optional. */
.meter { display: flex; gap: 3px; align-items: center; }
.meter i {
  width: 11px; height: 6px; border-radius: 2px;
  background: color-mix(in oklch, var(--ink) 12%, transparent);
}
.meter i.on { background: var(--sev); }
/* "None found" is an outline, not a fill: nothing is there, and a solid block
   would read as a quantity of something. Neutral, too — a hue would make the
   absence of a finding look like a reading of its own. */
.meter i.nil { background: none; border: 1px solid color-mix(in oklch, var(--ink) 25%, transparent); }

.meter-key {
  display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .8rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .7rem; color: var(--ink-faint);
}
.meter-key span { display: flex; align-items: center; gap: .3rem; }
.meter-key b { width: 9px; height: 9px; border-radius: 2px; background: var(--sev); }
.meter-key .lv-none b { background: none; border: 1px solid color-mix(in oklch, var(--ink) 25%, transparent); }

/* --- The sidebar verdict card -------------------------------------------- */

.page-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 2.5rem; align-items: start;
}
.page-side { position: sticky; top: 1.5rem; }

.verdict {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); overflow: hidden;
}
.verdict-head {
  padding: 1rem 1.1rem;
  background: color-mix(in oklch, var(--sev) 13%, var(--surface));
  border-bottom: 1px solid color-mix(in oklch, var(--sev) 25%, var(--line));
}
.eyebrow {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint);
}
.verdict-line {
  display: flex; align-items: center; gap: .55rem; margin: .6rem 0 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1.02rem; font-weight: 600; line-height: 1.2;
  color: color-mix(in oklch, var(--sev) var(--sev-ink-mix), var(--ink));
}
.verdict-dot {
  width: 10px; height: 10px; border-radius: 999px; flex: none;
  background: var(--sev);
}
.verdict-note {
  margin: .5rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--ink-soft);
}
.verdict-facts { margin: 0; padding: .9rem 1.1rem; display: grid; gap: .6rem; }
.verdict-facts > div {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: .78rem;
}
.verdict-facts dt { color: var(--ink-soft); }
.verdict-facts dd { margin: 0; font-weight: 600; text-align: right; }
.verdict-facts dd.hot { color: color-mix(in oklch, var(--sev-high) var(--sev-ink-mix), var(--ink)); }

.verdict-scan { padding: .9rem 1.1rem; border-top: 1px solid var(--line); }
.scan-rows { list-style: none; padding: 0; margin: .7rem 0 0; }
.scan-rows li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: .6rem; align-items: center;
  padding: .45rem 0; border-top: 1px solid var(--line);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .78rem; font-weight: 500;
}
.scan-rows li:first-child { border-top: 0; }
.scan-rows .scan-rest { color: var(--ink-soft); font-weight: 400; }
/* Spans both columns so the detail sits under the name rather than squeezing
   it against the meter. `.sr-only` is absolutely positioned, so it takes no
   grid cell of its own and the meter stays in column two. */
.scan-rows .scan-detail {
  grid-column: 1 / -1; margin-top: .1rem;
  font-size: .72rem; font-weight: 400; line-height: 1.45; color: var(--ink-soft);
}
.scan-rows a { color: inherit; text-decoration: none; }
.scan-rows a:hover { text-decoration: underline; }

.verdict-foot {
  padding: .75rem 1.1rem; border-top: 1px solid var(--line);
  background: var(--surface-quiet);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .74rem; line-height: 1.5; color: var(--ink-soft);
}

/* --- Findings as evidence cards ------------------------------------------ */

/* Cards are ordered worst-first and carry a coloured left rule, so severity is
   legible from the shape of the column before a single word is read. */
.find-cards { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .75rem; }
.find-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sev);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.find-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.find-dim {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem; font-weight: 600; margin: 0;
}
.find-head .find-meta { margin-left: auto; }
.find-meta {
  display: flex; flex-wrap: wrap; gap: .8rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .76rem; color: var(--ink-faint);
}
.find-why { font-size: .84rem; color: var(--ink-faint); margin: .35rem 0 0; }
.find-card p { margin: .55rem 0 0; }
.find-cites { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .8rem; }
.find-cites img { width: 104px; height: 59px; border-radius: 6px; object-fit: cover; }
/* Not `line-height: 0` on the link: a cited video with no thumbnail falls back
   to its title, and zero line-height stacks those on top of each other. */
.find-cites a { display: inline-flex; font-size: .8rem; }
.find-cites img { display: block; }
.cites-count {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .78rem; color: var(--ink-soft);
}

/* Everything that came back clear, in one line. Dashed and green because the
   absence of a finding is a different kind of statement from a finding. */
.none-strip {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline;
  margin: .75rem 0 0; padding: .9rem 1.2rem;
  border: 1px dashed color-mix(in oklch, var(--sev-none) 40%, transparent);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--sev-none) 7%, var(--surface));
}
.none-strip strong {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .84rem; color: color-mix(in oklch, var(--sev-none) var(--sev-ink-mix), var(--ink));
}
.none-strip span { font-size: .9rem; color: var(--ink-soft); }

/* --- Mismatch spotlight --------------------------------------------------- */

.mismatch-cards { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .6rem; }
.mismatch-card {
  display: flex; gap: .9rem; padding: .8rem .9rem;
  border: 1px solid color-mix(in oklch, var(--sev-high) 30%, transparent);
  border-left: 4px solid var(--sev-high);
  border-radius: var(--radius); background: var(--surface);
}
.mismatch-card img { width: 132px; height: 74px; border-radius: 6px; object-fit: cover; flex: none; }
.mismatch-card > div { min-width: 0; }
.mismatch-title {
  display: block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .92rem; font-weight: 600;
}
.mismatch-card p { margin: .45rem 0 0; font-size: .9rem; color: var(--ink-soft); }

/* --- Coverage figures ----------------------------------------------------- */

.stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin: 1rem 0 0; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.stat-grid-2 { grid-template-columns: repeat(2, 1fr); }
.stat-grid > div { background: var(--surface); padding: .9rem 1rem; }
.stat-grid dt {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .76rem; color: var(--ink-soft); margin-top: .3rem;
}
.stat-grid dd { margin: 0; font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-grid dd.hot { color: color-mix(in oklch, var(--sev-high) var(--sev-ink-mix), var(--ink)); }
/* A figure YouTube did not give us reads as absence, not as a number. */
.stat-blank { font-size: 1.05rem; color: var(--ink-faint); }
.stat-grid dd i { font-size: 1.05rem; font-style: normal; color: var(--ink-faint); }

.reported { display: flex; gap: .6rem; flex-wrap: wrap; align-items: baseline; margin: .9rem 0 0; }
.reported strong {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); flex: none;
}
.reported > span { flex: 1 1 20rem; color: var(--ink-soft); font-size: .92rem; margin: 0; }

/* --- Video grids ---------------------------------------------------------- */

.vid-grid { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .7rem; }
.vid-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vid-grid-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vid-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.vid-card:hover { border-color: var(--accent); }
.vid-card-flagged { border-color: color-mix(in oklch, var(--sev-high) 30%, transparent); }
.vid-card a { display: block; color: inherit; text-decoration: none; }
.vid-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.vid-body { padding: .6rem .7rem .7rem; }
.vid-title {
  display: block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .82rem; font-weight: 500; line-height: 1.4;
}
.vid-note {
  display: block; margin-top: .4rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .7rem; color: var(--ink-faint);
}
.vid-note-flagged { color: color-mix(in oklch, var(--sev-high) var(--sev-ink-mix), var(--ink)); }
.vid-reason {
  display: block; margin-top: .35rem;
  font-size: .78rem; line-height: 1.45; color: var(--ink-soft);
  border-left: 2px solid color-mix(in oklch, var(--sev-high) 35%, transparent);
  padding-left: .5rem;
}

.subhead {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); margin: 1.5rem 0 0;
}
.subhead-flagged { color: color-mix(in oklch, var(--sev-high) var(--sev-ink-mix), var(--ink)); }

/* --- Definition lists ---------------------------------------------------- */

.coverage { display: grid; gap: .5rem; margin: 0; }
.coverage > div {
  display: flex; justify-content: space-between; gap: 1rem;
  border-bottom: 1px dashed var(--line); padding-bottom: .35rem;
}
.coverage dt { color: var(--ink-soft); font-size: .92rem; }
.coverage dd {
  margin: 0; font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 600;
}

.glossary { display: grid; gap: .85rem; margin: .5rem 0 0; }
.glossary dt {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; text-transform: capitalize;
}
.glossary dd { margin: .15rem 0 0; color: var(--ink-soft); }
.tag {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-faint); border: 1px solid var(--line);
  border-radius: 999px; padding: .05rem .45rem; margin-left: .4rem;
  font-weight: 500;
}

img { max-width: 100%; }

@media (max-width: 62rem) {
  .page-grid { grid-template-columns: minmax(0, 1fr); }
  /* Unstick before it can overlap: a sticky card in a single column just
     covers the content it was meant to summarise. */
  .page-side { position: static; }
  .vid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vid-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 34rem) {
  .card-link { flex-direction: column; }
  .avatar { width: 56px; height: 56px; }
  .filter-row > * { flex: 1 1 100%; }
  /* Stacked: label and word pair on one row, then the meter, then the note.
     The meter has to stay next to what it measures, not below the prose. */
  .trait { grid-template-columns: 1fr auto; }
  .trait .meter { grid-column: 1 / -1; order: 3; }
  .trait-note { order: 4; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .vid-grid, .vid-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mismatch-card { flex-direction: column; }
  .mismatch-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .label-card { flex-direction: column; gap: .8rem; }
  .label-figure { border-right: 0; padding-right: 0; text-align: left; }
  .label-figure span { max-width: none; }
  .find-head .find-meta { margin-left: 0; width: 100%; }
}