/* China state media tracker. Cinematic dark instrument: near-black ground, bone text,
   gold as the only color, high-contrast serif display with italic emphasis, hairline rules. */
:root {
  --ink: #0c0d0f;
  --ink-2: #16181b;
  --ink-3: #1f2226;
  --bone: #ebe5d8;
  --bone-soft: #c9c3b6;
  --ash: #9c968b;
  --ash-faint: #6b665d;
  --rule: rgba(235, 229, 216, 0.12);
  --rule-strong: rgba(235, 229, 216, 0.28);
  --gold: #c9a961;
  --gold-soft: rgba(201, 169, 97, 0.35);
  --amber-deep: #5a4520;
  --zero: #23262a;
  --nodata: #1a1c1f;
  --sea: #0c0d0f;
  --border-country: #0c0d0f;
  --warn: #d7b46a;
  --good: #8fb08a;
  --bad: #c07a6a;
  --display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--ink); color: var(--bone); font-family: var(--font); font-size: 15px; line-height: 1.55; font-weight: 300; }
a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-soft); }
a:hover { border-bottom-color: var(--gold); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0 0 0.4em 0; line-height: 1.1; text-wrap: balance; letter-spacing: 0.005em; }
h1 { font-size: 3.4rem; }
h1 em, h2 em { font-style: italic; font-weight: 300; color: var(--gold); }
h2 { font-size: 1.9rem; margin-top: 1.2em; }
h3 { font-size: 1.25rem; color: var(--bone-soft); }
p { margin: 0 0 0.8em 0; }
small, .muted { color: var(--ash); }
.faint { color: var(--ash-faint); }
code { font-family: var(--mono); font-size: 0.85em; }
.eyebrow, .control label, th, #legend, .tl-hint, .badge, .a-meta { font-family: var(--font); }
.eyebrow { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; }

header.top { padding: 3.2rem 3rem 2.2rem 3rem; border-bottom: 1px solid var(--rule);
  background: radial-gradient(ellipse 70% 120% at 15% 0%, rgba(201, 169, 97, 0.10), transparent 60%); }
header.top .sub { color: var(--ash); max-width: 46rem; font-size: 1.02rem; margin-top: 1rem; }
.notice { margin: 1rem 3rem 0 3rem; padding: 0.8rem 1.1rem; border: 1px solid var(--rule-strong); color: var(--bone-soft); background: transparent; max-width: 70rem; font-size: 0.9rem; border-left: 2px solid var(--gold); }
.notice.hidden, .control.hidden { display: none; }
/* The reading notes are one muted line; the full text sits under the methodology heading. */
.notes-strip { margin: 0 3rem 0.9rem 3rem; max-width: 70rem; font-size: 0.82rem; line-height: 1.55; color: var(--ash); }
.notes-strip .nk { color: var(--gold); letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.64rem; margin-right: 0.6rem; }
.notes-strip a { color: var(--gold); white-space: nowrap; }
#method-notes { list-style: none; padding: 0; margin: 0 0 1.8rem; max-width: 70rem; }
#method-notes li { border-left: 2px solid var(--gold); padding: 0.25rem 0 0.25rem 0.9rem; margin: 0.55rem 0; color: var(--bone-soft); font-size: 0.9rem; line-height: 1.55; }

/* "What we found", directly under the headline. */
.findings-box { margin: 1.1rem 0 0.6rem; padding: 1rem 1.3rem; max-width: 46rem; border: 1px solid var(--rule-strong); border-left: 2px solid var(--gold); background: rgba(201, 169, 97, 0.05); }
.findings-box .fb-kicker { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
.findings-box p { color: var(--bone-soft); font-size: 0.98rem; line-height: 1.5; margin: 0 0 0.55rem; }
.findings-box .fb-meta { color: var(--ash); font-size: 0.82rem; }
.findings-box .fb-see { display: inline-block; font-size: 0.86rem; margin-top: 0.1rem; }

/* Start here: a collapsible explainer, open on a first visit and remembered closed after that. */
.start-here { margin: 1.2rem 3rem 0 3rem; padding: 1.1rem 1.4rem; border: 1px solid var(--rule); border-left: 2px solid var(--gold); max-width: 70rem; }
.start-here summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.start-here summary::-webkit-details-marker { display: none; }
.start-here summary::before { content: "+"; color: var(--gold); font-family: var(--display); font-size: 1.2rem; margin-right: 0.2rem; }
.start-here[open] summary::before { content: "\2212"; }
.start-here .sh-title { font-family: var(--display); font-size: 1.35rem; color: var(--bone); }
.start-here .sh-hint { font-size: 0.8rem; color: var(--ash); }
.start-here .sh-body { padding-top: 1rem; }
.sh-intro p { max-width: 62rem; color: var(--bone-soft); }
.sh-categories { display: grid; grid-template-columns: 14rem 1fr; gap: 0.5rem 1.2rem; font-size: 0.88rem; margin: 1rem 0; }
.sh-categories dt { color: var(--gold); font-family: var(--display); font-size: 1.02rem; padding-top: 0.1rem; }
.sh-categories dd { margin: 0; color: var(--bone-soft); }
.sh-routes-label { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); margin: 1.2rem 0 0.6rem; }
.sh-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.8rem; }
.sh-route-card { text-align: left; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.8rem 0.9rem; background: var(--ink-2); border: 1px solid var(--rule-strong); border-radius: 2px; cursor: pointer; }
.sh-route-card:hover { border-color: var(--gold); }
.sh-route-name { font-family: var(--display); font-size: 1.1rem; color: var(--bone); }
.sh-route-how { font-size: 0.78rem; color: var(--bone-soft); line-height: 1.4; }
.sh-route-line { font-size: 0.72rem; color: var(--ash); line-height: 1.4; }
.sh-badge { display: inline-block; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--rule-strong); color: var(--ash); padding: 0.05rem 0.35rem; border-radius: 2px; margin-right: 0.3rem; }

/* A few examples: two or three rotating daily. */
.examples { margin: 1.2rem 3rem 0 3rem; padding: 1.1rem 0 0.4rem; max-width: 70rem; border-top: 1px solid var(--rule); }
.examples h2 { font-size: 1.6rem; margin: 0.2rem 0 0.8rem; }
.ex-list { display: grid; gap: 1rem; }
.ex-item { padding: 0.8rem 1rem; border: 1px solid var(--rule); border-left: 2px solid var(--gold-soft); }
.ex-headline { display: block; font-family: var(--display); font-size: 1.15rem; color: var(--bone); border-bottom: none; }
.ex-headline:hover { color: var(--gold); }
.ex-meta { font-size: 0.76rem; color: var(--ash); margin: 0.3rem 0; }
.ex-snippet { font-family: var(--display); font-style: italic; color: var(--bone-soft); font-size: 1rem; margin: 0.3rem 0 0; }
.ex-hl { background: var(--gold-soft); color: var(--bone); font-style: normal; padding: 0 0.15em; border-radius: 2px; }

/* Ranked list caption, above the bars. */
.bars-caption { color: var(--ash); font-size: 0.8rem; max-width: 46rem; margin: 0.4rem 0 0.6rem; }

/* Country panel: a shortcut to the top three, and the "why this number" country note. */
.panel-shortcuts { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; align-items: center; margin: 0.8rem 0 1.2rem; }
.ps-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); margin-right: 0.2rem; }
.ps-btn { font-size: 0.82rem; padding: 0.3rem 0.7rem; }
.panel-note-box { border-left: 2px solid var(--gold); padding: 0.1rem 0 0.1rem 0.9rem; margin: 0.8rem 0 1.2rem; }
.panel-note-box h3 { margin-bottom: 0.3rem; }
.panel-note-box p { color: var(--bone-soft); font-size: 0.86rem; margin: 0; }

/* FAQ, before the methodology section. */
section.faq { padding: 2rem 3rem 0 3rem; max-width: 76rem; }
.faq-list { display: grid; gap: 0.1rem; margin-top: 1rem; }
.faq-item { border-bottom: 1px solid var(--rule); padding: 0.8rem 0; }
.faq-item summary { cursor: pointer; font-family: var(--display); font-size: 1.15rem; color: var(--bone); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "+"; color: var(--gold); margin-right: 0.5rem; }
.faq-item[open] summary::before { content: "\2212"; }
.faq-item p { color: var(--bone-soft); margin: 0.6rem 0 0.4rem; max-width: 60rem; }
.faq-sources { margin: 0.2rem 0 0; padding-left: 1.1rem; font-size: 0.78rem; color: var(--ash); }
.faq-sources a { word-break: break-all; }

/* Call to action, beside the CSV export buttons. */
.cta-line { color: var(--bone-soft); font-size: 0.86rem; max-width: 46rem; margin: 0.7rem 0 0; }

.controls { display: flex; flex-wrap: wrap; gap: 1.1rem 2.6rem; padding: 1.2rem 3rem; border-bottom: 1px solid var(--rule); align-items: flex-end; }
/* Every group of controls, above the map, the list and the theme counter as well as in the top bar, is a
   labelled column: the same small kicker over the same segment, so nothing repeats and nothing floats. */
.control.method { margin-left: auto; padding-bottom: 0.5rem; }
.control.method a { font-size: 0.9rem; letter-spacing: 0.04em; }
.control { display: flex; flex-direction: column; gap: 0.35rem; }
.control label { font-size: 0.66rem; color: var(--ash); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; }
.segment button, select { line-height: 1.2; }
select, button, input[type="range"] { font-family: var(--font); font-size: 0.9rem; font-weight: 400; }
select { background: var(--ink); border: 1px solid var(--rule-strong); padding: 0.4rem 0.6rem; color: var(--bone); border-radius: 2px; }
button { background: transparent; border: 1px solid var(--rule-strong); padding: 0.4rem 0.9rem; color: var(--bone); cursor: pointer; border-radius: 2px; letter-spacing: 0.04em; transition: border-color 250ms ease, color 250ms ease; }
button:hover { border-color: var(--gold); color: var(--gold); }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.segment { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 2px; }
.segment button { border: none; border-right: 1px solid var(--rule-strong); border-radius: 0; }
.segment button:last-child { border-right: none; }
.segment button.active { background: var(--bone); color: var(--ink); }

main { display: grid; grid-template-columns: minmax(0, 1fr) 27rem; grid-template-rows: auto auto auto auto; gap: 0; min-height: 60vh; }
#map-wrap, #bars-wrap { grid-column: 1; grid-row: 1; }
aside#panel { grid-column: 2; grid-row: 1 / span 4; }

#themes { grid-column: 1; grid-row: 3; position: relative; padding: 1.8rem 1.6rem 2.4rem 2.4rem; border-top: 1px solid var(--rule); }
#themes .th-kicker { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); }
#themes h2 { font-size: 2rem; margin: 0.25rem 0 0.35rem; }
#themes .th-sub { color: var(--ash); font-size: 0.86rem; max-width: 54rem; margin: 0 0 1.3rem; }
#themes .th-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; align-items: start; }
#themes .muted { color: var(--ash); font-size: 0.86rem; }
.tf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--rule-strong); padding-bottom: 0.45rem; margin-bottom: 0.2rem; }
.tf-name { font-family: var(--display); font-size: 1.4rem; color: var(--bone); line-height: 1.1; }
.tf-n { font-size: 0.76rem; color: var(--ash); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tf-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); column-gap: 2.6rem; }
.tf-list li { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(2.5rem, 1fr) 2.8rem 2.6rem; gap: 0.6rem; align-items: center; padding: 0.38rem 0.3rem; font-size: 0.82rem; cursor: pointer; border-bottom: 1px solid var(--rule); }
.tf-list li:hover { background: var(--ink-3); }
.tf-list li.active { background: var(--ink-3); box-shadow: inset 2px 0 0 #bf2a31; }
.tf-label { color: var(--bone-soft); line-height: 1.25; }
.tf-track { height: 0.5rem; }
.tf-bar { display: block; height: 100%; background: #c2343b; border-radius: 0 2px 2px 0; }
.tf-v, .tf-s { text-align: right; font-variant-numeric: tabular-nums; }
.tf-v { color: var(--bone); }
.tf-s { color: var(--ash); }
.tf-hint { font-size: 0.72rem; color: var(--ash-faint); margin: 0.6rem 0 0; }
.th-grid-wrap { overflow-x: auto; position: relative; }
.th-grid-wrap.scrolls { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.th-grid-wrap.scrolls.at-end { -webkit-mask-image: none; mask-image: none; }
.th-scroll-hint { display: none; font-size: 0.72rem; color: var(--ash); margin: 0.4rem 0 0; }
.th-grid-wrap.scrolls + .th-scroll-hint { display: block; }
.th-grid { border-collapse: separate; border-spacing: 2px; font-size: 0.8rem; font-variant-numeric: tabular-nums; width: 100%; }
.th-grid th, .th-grid td { padding: 0.34rem 0.36rem; }
.th-grid thead th { color: var(--ash); font-weight: 400; font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: bottom; text-align: center; line-height: 1.2; cursor: pointer; }
.th-grid thead th:hover { color: var(--bone); }
.th-grid thead th.c-country, .th-grid thead th.c-n { cursor: default; }
.th-grid thead th.c-country { text-align: left; }
.th-grid thead th.c-n { text-align: right; }
.th-grid thead th.sorted { color: var(--bone); box-shadow: inset 0 -2px 0 #bf2a31; }
.th-grid tbody th { text-align: left; font-weight: 400; color: var(--bone-soft); white-space: nowrap; cursor: pointer; }
.th-grid tbody tr:hover th, .th-grid tr.selected th { color: var(--bone); }
.th-grid td.c-n { color: var(--ash); text-align: right; padding-right: 0.8rem; }
.th-grid td.cell { background: var(--ink-2); text-align: center; color: var(--bone); border-radius: 2px; min-width: 2.5rem; cursor: pointer; }
.th-grid tr.selected td.cell { box-shadow: inset 0 0 0 1px var(--bone-soft); }
.th-legend { display: flex; flex-wrap: wrap; gap: 0.45rem 1.1rem; align-items: center; margin-top: 1rem; font-size: 0.76rem; color: var(--ash); }
.th-legend .tl-title { color: var(--bone-soft); }
.th-legend .tl-i { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--bone-soft); font-variant-numeric: tabular-nums; }
.th-legend .sw { width: 1.4rem; height: 0.85rem; border-radius: 2px; border: 1px solid var(--rule-strong); display: inline-block; }
.th-legend .tl-foot { flex-basis: 100%; color: var(--ash); }

#map-wrap { position: relative; padding: 1.4rem 1.6rem 0 2.4rem;
  background: radial-gradient(ellipse 60% 70% at 50% 45%, rgba(201, 169, 97, 0.06), transparent 70%); }
#map { width: 100%; height: auto; display: block; }
#map path.country { stroke: var(--border-country); stroke-width: 0.5; cursor: pointer; transition: fill 350ms ease, opacity 350ms ease; vector-effect: non-scaling-stroke; }
#map.focused path.country.dim { opacity: 0.38; }
#map path.country.selected { stroke: var(--bone); stroke-width: 1.1; }
#map path.country:hover { stroke: var(--gold); stroke-width: 0.9; }
#map .sphere { fill: var(--sea); stroke: var(--rule-strong); }
#map .warn-marker { fill: var(--ink); stroke: var(--warn); stroke-width: 1.1; pointer-events: none; }
#legend { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.2rem 2.6rem; padding: 1.1rem 0 1.4rem 0; font-size: 0.8rem; color: var(--bone-soft); }
#legend .lg-prov { color: var(--gold); font-size: 0.78rem; margin: 0.15rem 0 0.35rem; }
#legend .lg-kicker { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); margin-bottom: 0.35rem; }
#legend .lg-head { color: var(--bone); font-size: 0.86rem; line-height: 1.35; }
#legend .lg-unit { color: var(--ash); font-size: 0.74rem; margin: 0.1rem 0 0.6rem; }
#legend .lg-sep { color: var(--ash); }
#legend ul { list-style: none; margin: 0; padding: 0; }
#legend .lg-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr)); gap: 0.4rem 1rem; }
#legend .lg-keys { display: grid; gap: 0.4rem; }
#legend li { display: flex; align-items: center; gap: 0.55rem; font-variant-numeric: tabular-nums; line-height: 1.25; }
#legend .sw { flex: none; width: 1.6rem; height: 0.95rem; border: 1px solid var(--rule-strong); border-radius: 2px; }
#legend .sw-tri { flex: none; width: 1.6rem; height: 0.95rem; }
#legend .lg-note { margin: 0.6rem 0 0; color: var(--ash); font-size: 0.74rem; max-width: 36rem; }
@media (max-width: 780px) { #legend { grid-template-columns: 1fr; } }
.tooltip { position: absolute; pointer-events: none; background: var(--ink-2); border: 1px solid var(--rule-strong); padding: 0.6rem 0.8rem; font-size: 0.82rem; max-width: 20rem; display: none; z-index: 5; color: var(--bone-soft); }
.tooltip .t-name { font-family: var(--display); font-size: 1.25rem; color: var(--bone); }
.tooltip .t-warn { color: var(--warn); }
#map-fallback { padding: 1rem; color: var(--warn); }

#bars-wrap { display: none; padding: 1rem 1.6rem; }
.bars-head, .map-head { display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; align-items: flex-end; }
.map-head { padding: 1.1rem 1.4rem 0.2rem; }
.bars-head h2 { align-self: flex-end; margin-right: 0.6rem; }
.bars-head h2 { margin: 0; }
#bars .bar-row { display: grid; grid-template-columns: 10rem 1fr 4rem; gap: 0.6rem; align-items: center; font-size: 0.86rem; padding: 0.2rem 0; cursor: pointer; border-bottom: 1px solid var(--rule); }
#bars .bar-row .bar { height: 0.55rem; background: #b3121a; }
#bars .bar-row .bar.zero { background: #f6f1e8; }
#bars .bar-row .bar.nocoverage { background: repeating-linear-gradient(45deg, var(--ink-2), var(--ink-2) 3px, var(--ink-3) 3px, var(--ink-3) 5px); }
#bars .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--bone-soft); }

aside#panel { border-left: 1px solid var(--rule); padding: 1.4rem 1.8rem 2.4rem 1.8rem; background: var(--ink-2); overflow-y: auto; max-height: calc(100vh - 8rem); position: sticky; top: 0; }
aside#panel .close { float: right; }
aside#panel h2 { font-size: 2.1rem; }
aside#panel table { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin-bottom: 1rem; }
aside#panel th, aside#panel td { text-align: left; padding: 0.35rem 0.3rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
aside#panel th { color: var(--ash); font-weight: 400; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; }
aside#panel td.num, aside#panel th.num { text-align: right; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; font-size: 0.62rem; padding: 0.1rem 0.45rem; border: 1px solid var(--rule-strong); color: var(--ash); margin-left: 0.35rem; vertical-align: middle; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 2px; }
.badge.cat-A { border-color: var(--gold); color: var(--gold); }
.badge.cat-B { border-color: var(--warn); color: var(--warn); }
.badge.cat-pending { border-color: var(--gold-soft); color: var(--bone-soft); }
.badge.cat-C { border-color: var(--rule-strong); }
.badge.prov-human { border-color: var(--good); color: var(--good); }
.article { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); font-size: 0.88rem; }
.article .a-title { display: block; font-family: var(--display); font-size: 1.15rem; line-height: 1.25; color: var(--bone); border-bottom: none; }
.article .a-title:hover { color: var(--gold); }
.article .a-meta { color: var(--ash); font-size: 0.76rem; margin-top: 0.15rem; }
.article .a-quote { color: var(--bone-soft); font-family: var(--display); font-style: italic; font-size: 1rem; margin: 0.35rem 0 0 0; border-left: 1px solid var(--gold-soft); padding-left: 0.7rem; }
.warn { color: var(--warn); }
.ok { color: var(--good); }
.fail { color: var(--bad); }
.mini { width: 100%; height: 5.5rem; display: block; }
.mini path.a { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.mini path.b { fill: none; stroke: var(--bone-soft); stroke-width: 1.2; stroke-dasharray: 3 2; }
.mini path.p { fill: none; stroke: var(--ash); stroke-width: 1; stroke-dasharray: 1.5 2.5; }
.mini text { font-size: 0.62rem; fill: var(--ash); font-family: var(--font); }

#timeline { grid-column: 1; grid-row: 2; border-top: 1px solid var(--rule); padding: 1.1rem 1.6rem 1.3rem 2.4rem; }
.timeline .tl-kicker { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); margin-bottom: 0.45rem; }
.th-timeline { margin: 1.6rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--rule); }
#themes .th-head { display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; align-items: flex-end; margin: 0 0 1.3rem; }
.th-timeline svg.spark path { fill: rgba(191, 42, 49, 0.22) !important; stroke: #c2343b !important; }
.timeline.th-timeline input[type="range"] { accent-color: #c2343b; }
.timeline .tl-row { display: flex; align-items: center; gap: 0.8rem; }
.timeline .tl-date { min-width: 8rem; font-variant-numeric: tabular-nums; font-family: var(--display); font-size: 1.3rem; }
.timeline .tl-track { position: relative; flex: 1; height: 3.2rem; }
.timeline svg.spark { position: absolute; left: 0; top: 0; width: 100%; height: 2.4rem; }
.timeline svg.spark path { fill: rgba(201, 169, 97, 0.18); stroke: var(--gold); stroke-width: 1; }
.timeline svg.spark rect.ceiling { fill: var(--warn); opacity: 0.45; }
.timeline input[type="range"] { position: absolute; left: 0; bottom: 0; width: 100%; margin: 0; accent-color: var(--gold); }
.timeline .tl-hint { font-size: 0.76rem; color: var(--ash); margin-top: 0.4rem; }

section.method { padding: 2.4rem 3rem 3rem 3rem; border-top: 1px solid var(--rule); max-width: 76rem; }
section.method .defs p { max-width: 62rem; color: var(--bone-soft); }
section.method .defs strong { font-family: var(--display); font-weight: 500; font-size: 1.15rem; color: var(--bone); }
section.method dl { display: grid; grid-template-columns: 16rem 1fr; gap: 0.45rem 1.2rem; font-size: 0.9rem; margin-top: 1.4rem; }
section.method dt { color: var(--ash); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; padding-top: 0.2rem; }
section.method dd { margin: 0; color: var(--bone-soft); }
section.method .owner-note { border-left: 1px solid var(--gold); padding-left: 1.2rem; margin-top: 2rem; max-width: 60rem; }
section.method .owner-note p { font-family: var(--display); font-size: 1.25rem; line-height: 1.45; color: var(--bone); }
.export-row { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; margin-top: 0.6rem; }
#citation { font-family: var(--mono); font-size: 0.74rem; color: var(--ash); margin-top: 0.8rem; max-width: 60rem; }
footer { padding: 1.4rem 3rem 2.4rem 3rem; color: var(--ash-faint); font-size: 0.78rem; border-top: 1px solid var(--rule); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Wide: map beside the panel. Medium: map above the panel at full width. */
@media (max-width: 1100px) {
  main { grid-template-columns: 1fr; }
  #map-wrap, #bars-wrap { grid-row: 1; }
  #timeline { grid-row: 2; padding-left: 1.6rem; }
  aside#panel { grid-column: 1; grid-row: 3; }
  #themes { grid-row: 4; padding-left: 1.6rem; }
  #leaning { grid-row: 5; padding-left: 1.6rem; }
  aside#panel { border-left: none; border-top: 1px solid var(--rule); max-height: none; position: static; }
  section.method dl { grid-template-columns: 1fr; }
  h1 { font-size: 2.6rem; }
}
@media (max-width: 640px) {
  header.top, .controls, #timeline, section.method, .notice, .notes-strip, footer,
  .start-here, .examples, section.faq { padding-left: 1.2rem; padding-right: 1.2rem; margin-left: 0; margin-right: 0; }
  h1 { font-size: 2.2rem; }
  /* A fixed-width label column would force a horizontal scroll at phone width; stack instead. */
  .sh-categories, .sh-routes { grid-template-columns: 1fr; }
}
body.force-list #map-wrap { display: none; }
body.force-list #bars-wrap { display: block; }
body.force-map #map-wrap { display: block; }
body.force-map #bars-wrap { display: none; }
#map-wrap { min-height: 18rem; }
/* The one line under the map when the Distribution toggle shows the worldwide wires, which have no country to draw. */
.map-caption { margin: 0.4rem 1.4rem 0.2rem; font-family: var(--font); font-size: 0.82rem; color: var(--ash); line-height: 1.45; }

/* Single country view: the pickers above the map and the theme counter, and the day grid. */
[hidden] { display: none !important; }
.pick { position: relative; }
.th-grid.days thead th.c-day { cursor: default; min-width: 1.7rem; padding-left: 0.1rem; padding-right: 0.1rem; }
.th-grid.days td.cell { min-width: 1.7rem; padding: 0.3rem 0.1rem; font-size: 0.74rem; }
.th-grid.days tbody th { cursor: pointer; }
.pick label { cursor: pointer; }
.csearch { position: relative; }
.csearch input { width: 15rem; max-width: 62vw; box-sizing: border-box; font: inherit; font-size: 0.86rem; text-transform: none; letter-spacing: 0; color: var(--bone);
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.8' fill='none' stroke='%239c968b' stroke-width='1.5'/%3E%3Cpath d='M10.2 10.2 14 14' stroke='%239c968b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0.6rem center / 0.85rem;
  border: 1px solid var(--rule-strong); border-radius: 2px; padding: 0.42rem 0.6rem 0.42rem 1.9rem; }
.csearch input::placeholder { color: var(--ash); }
.csearch input:focus { border-color: var(--gold); outline: none; }
.csearch-list { position: absolute; z-index: 30; top: calc(100% + 3px); left: 0; min-width: 100%; box-sizing: border-box; margin: 0; padding: 0.25rem 0; list-style: none;
  background: var(--ink-2); border: 1px solid var(--rule-strong); max-height: 19rem; overflow-y: auto; text-transform: none; letter-spacing: 0; font-size: 0.86rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.csearch-list li { padding: 0.4rem 0.75rem; color: var(--bone-soft); cursor: pointer; white-space: nowrap; }
.csearch-list li mark { background: none; color: var(--gold); }
.csearch-list li.active, .csearch-list li[data-iso]:hover { background: var(--ink-3); color: var(--bone); }
.csearch-list li.none { color: var(--ash); cursor: default; }

/* Review changes: withheld and unreadable states, the route filter, warnings in the ranked list, timeline marks. */
.segment button:disabled, select:disabled { color: var(--ash-faint); cursor: not-allowed; }
.segment button:disabled:hover { color: var(--ash-faint); border-color: var(--rule-strong); }
#bars .bar-row { grid-template-columns: 10rem 1fr 6.5rem 1.2rem; }
#bars .bar-row .bar.withheld { background: repeating-linear-gradient(45deg, var(--ink-2), var(--ink-2) 3px, var(--amber-deep) 3px, var(--amber-deep) 4px); }
#bars .bar-row .bar.unreadable { background: repeating-linear-gradient(0deg, var(--ink-2), var(--ink-2) 3px, #3a4450 3px, #3a4450 4px); }
#bars .bar-row .items { color: var(--ash); font-size: 0.74rem; margin-left: 0.3rem; }
#bars .bar-warn { color: var(--warn); text-align: center; font-weight: 500; }
.timeline svg.spark line.ruleset { stroke: var(--bone-soft); stroke-width: 1.2; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.timeline svg.spark line.gate { stroke: var(--gold-soft); stroke-width: 1.2; stroke-dasharray: 1 3; vector-effect: non-scaling-stroke; }
.timeline svg.spark line.themes { stroke: var(--good); stroke-width: 1.4; stroke-dasharray: 5 2 1 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.timeline svg.spark line.themes-hit { stroke: transparent; stroke-width: 9; vector-effect: non-scaling-stroke; pointer-events: stroke; cursor: help; }
.timeline svg.spark rect.relay-gap { fill: var(--bad); opacity: 0.8; }
.timeline svg.spark rect.older-ruleset { fill: var(--ash); opacity: 0.55; }
aside#panel .relay-state { color: var(--ash); font-style: italic; }
aside#panel .panel-note { color: var(--ash); font-size: 0.8rem; margin: -0.4rem 0 1rem; }

/* A value that could not be computed gets the map's own "not shown" pattern in the list too, and the
   states that have no bar of their own stop borrowing the positive one. */
#bars .bar-row .bar.sparse { background: radial-gradient(#8a7443 0.7px, #23262a 0.8px) 0 0/5px 5px; }
#bars .bar-row .bar.nodata { background: #1a1c1f; border: 1px solid var(--rule-strong); box-sizing: border-box; }
#bars .bar-row .bar.gap, #bars .bar-row .bar.inactive { background: radial-gradient(#3a3d43 0.9px, #141618 1px) 0 0/6px 6px; }

/* The ranked list is a keyboard path to every country, so it shows focus. */
#bars .bar-row:focus-visible { outline: 1px solid var(--gold); outline-offset: -2px; }

/* A map that could not be drawn says so where the map would have been. force-list hides #map-wrap, so
   the wrap stays while its contents go. */
body.map-failed #map, body.map-failed #legend, body.map-failed #tooltip, body.map-failed .map-head { display: none; }
body.map-failed.force-list #map-wrap { display: block; }

/* On a small screen the ranked list is the default view, because it is the one the interface promises as
   the fallback and the only one that is reachable with a keyboard. The View toggle still overrides it. */
@media (max-width: 720px) {
  #map-wrap { display: none; }
  #bars-wrap { display: block; }
  #bars .bar-row { grid-template-columns: 7.5rem 1fr 6rem 1.2rem; }
}

/* Who publishes it: articles by the political leaning or ownership of the outlet. Leaning is diverging,
   two arms and a neutral grey centre; ownership is categorical. Both palettes were validated against this
   surface with the dataviz validator (lightness band, chroma floor, CVD and normal vision separation,
   contrast); the five ownership slots in their fixed order (private, public service, state funded
   international, state, party) pass on adjacent pairs on #131518. Red is kept out of the leaning scale on purpose: the map already uses it for "more state
   content", and red and blue mean opposite parties in the United States and in Europe. */
#leaning { grid-column: 1; grid-row: 4; position: relative; padding: 1.8rem 1.6rem 2.4rem 2.4rem; border-top: 1px solid var(--rule);
  --lean-left: #3987e5; --lean-cleft: #256abf; --lean-centre: #75726b; --lean-cright: #a74c2a; --lean-right: #d45e31; --lean-state: #9085e9;
  --stance-pro: #d55181; --stance-ind: #199e70; --stance-opp: #c98500;
  --own-private: #199e70; --own-public: #c98500; --own-intl: #3987e5; --own-state: #d55181; --own-party: #9085e9;
  --lean-hatch: repeating-linear-gradient(45deg, #1f2226 0 3px, #5d5a53 3px 4px); }
#leaning .th-kicker { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); }
#leaning h2 { font-size: 2rem; margin: 0.25rem 0 0.35rem; }
#leaning .th-sub { color: var(--ash); font-size: 0.86rem; max-width: 54rem; margin: 0 0 1.3rem; }
#leaning .th-head { display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; align-items: flex-end; margin: 0 0 1.3rem; }
#leaning .lean-body { display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); gap: 2.2rem; align-items: center; }
#lean-pie { width: 100%; max-width: 15rem; height: auto; display: block; }
#lean-pie .slice { transition: opacity 150ms ease; cursor: default; }
#lean-pie .slice.dim { opacity: 0.28; }
#lean-pie .lean-total { fill: var(--bone); font-family: var(--serif, Georgia, serif); font-size: 26px; text-anchor: middle; }
#lean-pie .lean-total-sub { fill: var(--ash); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; text-anchor: middle; }
#lean-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
#lean-table th { color: var(--ash); font-weight: 400; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; text-align: left; padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--rule-strong); }
#lean-table td { padding: 0.42rem 0.4rem; border-bottom: 1px solid var(--rule); color: var(--bone-soft); }
#lean-table .num { text-align: right; font-variant-numeric: tabular-nums; }
#lean-table tr.zero td { color: var(--ash-faint); }
#lean-table tbody tr { cursor: default; }
#lean-table tbody tr:hover td, #lean-table tbody tr:focus-within td { background: var(--ink-3); }
.lean-sw { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; vertical-align: -0.1rem; }
.lean-note { color: var(--ash); font-size: 0.8rem; max-width: 54rem; margin: 1.2rem 0 0; }
/* The caution under a leaning group whose outlets outside the US are rated only by a US based rater. */
.lean-caveat { display: block; color: var(--ash); font-size: 0.72rem; line-height: 1.35; margin-top: 0.15rem; }
/* The base rule above is later in the sheet than the medium-width block, so the row override must
   follow it or the section lands on top of the theme counter. */
@media (max-width: 1100px) { #leaning { grid-row: 5; padding-left: 1.6rem; } }
@media (max-width: 700px) { #leaning .lean-body { grid-template-columns: 1fr; } #lean-pie { margin: 0 auto; } }

/* On a phone the five basis buttons are wider than the screen; without wrapping they pushed the
   ranked list 62px past the edge and the whole page scrolled sideways. */
@media (max-width: 520px) { .segment { flex-wrap: wrap; max-width: 100%; } .segment button { flex: 1 1 auto; } }

/* ======================================================================================
   Redesign, 2026-09-28. Same identity (near-black, bone, gold, serif display with italic
   emphasis) on a modern frame: a centred container, rounded cards, pill controls with a gold
   active state, a 16px reading size, one spacing scale, and the map first.
   ====================================================================================== */
:root {
  --page: 1360px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 14px;
  --radius-sm: 999px;
  --card: #131518;
  --card-2: #181b1f;
  --ash: #aaa396;                 /* captions a step lighter: 7:1 on the card, was 5.6:1 */
  --gold-tint: rgba(201, 169, 97, 0.14);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.8);
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 72px;
}
html, body { font-size: 16px; font-weight: 400; }
body { background:
  radial-gradient(1200px 520px at 12% -120px, rgba(201, 169, 97, 0.09), transparent 70%),
  radial-gradient(900px 480px at 100% 0, rgba(191, 42, 49, 0.05), transparent 70%), var(--ink); }
p { line-height: 1.6; }
::selection { background: var(--gold-soft); color: var(--bone); }

/* Header: slim, with section links */
header.top { max-width: var(--page); margin: 0 auto; padding: var(--s5) var(--gutter) var(--s3); border-bottom: none; background: none; }
header.top .brand { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s2); }
h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); letter-spacing: -0.005em; max-width: 22ch; }
header.top .sub { font-size: 1.08rem; color: var(--bone-soft); max-width: 60ch; margin: var(--s2) 0 var(--s3); }
.top-nav { display: flex; flex-wrap: wrap; gap: var(--s1); }
.top-nav a { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 6px 14px; font-size: 0.84rem; color: var(--bone-soft); background: rgba(255, 255, 255, 0.02); transition: border-color 180ms ease, color 180ms ease, background 180ms ease; }
.top-nav a:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-tint); }
.notes-strip, .notice { max-width: var(--page); margin: 0 auto var(--s2); padding: 0 var(--gutter); box-sizing: border-box; }
.notice { padding: 12px 16px; border-radius: 10px; }

/* Sections share one frame */
.sec { max-width: var(--page); margin: var(--s6) auto 0; padding: 0 var(--gutter); box-sizing: border-box; }
.sec > h2, .sec h2 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); margin: 0 0 var(--s2); }
.eyebrow, #themes .th-kicker, #leaning .th-kicker { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s1); }
.card-sec { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--s5) var(--s5) var(--s4) !important; max-width: calc(var(--page) - 2 * var(--gutter)); }
@media (max-width: 1400px) { .card-sec { margin-left: var(--gutter); margin-right: var(--gutter); } }
#themes .th-sub, #leaning .th-sub { font-size: 0.98rem; color: var(--bone-soft); max-width: 70ch; }

/* The map card: controls, map, legend, timeline and the country panel in one surface */
.map-card { max-width: var(--page); margin: var(--s2) auto 0; padding: 0 var(--gutter); box-sizing: border-box; }
.map-card > .controls, .map-card > main { background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.map-card > .controls { border-radius: var(--radius) var(--radius) 0 0; border-bottom: 1px solid var(--rule); padding: var(--s3) var(--s4); gap: var(--s2) var(--s4); }
.map-card > main { border-top: none; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; min-height: 0;
  grid-template-columns: minmax(0, 1fr) 24rem; grid-template-rows: auto auto; }
aside#panel { grid-row: 1 / span 2; background: var(--card-2); border-left: 1px solid var(--rule); max-height: none; position: static; padding: var(--s4); }
#map-wrap { padding: var(--s2) var(--s4) 0; background: radial-gradient(ellipse 60% 70% at 50% 45%, rgba(201, 169, 97, 0.05), transparent 70%); }
.map-head { padding: var(--s2) 0 var(--s1); gap: var(--s2) var(--s3); }
#bars-wrap { padding: var(--s3) var(--s4); }
#timeline { padding: var(--s3) var(--s4); border-top: 1px solid var(--rule); }
#legend { padding: var(--s2) 0 var(--s3); gap: var(--s2) var(--s4); }
@media (max-width: 1100px) {
  .map-card > main { grid-template-columns: 1fr; }
  aside#panel { grid-column: 1; grid-row: 3; border-left: none; border-top: 1px solid var(--rule); }
}

/* Controls: labelled pills with a gold active state */
.control label { font-size: 0.7rem; color: var(--ash); letter-spacing: 0.16em; }
.segment { border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); padding: 3px; gap: 2px; background: rgba(0, 0, 0, 0.25); }
.segment button { border: none !important; border-radius: var(--radius-sm); padding: 7px 14px; min-height: 34px; color: var(--bone-soft); font-size: 0.86rem; letter-spacing: 0.01em; transition: background 180ms ease, color 180ms ease; }
.segment button:hover { color: var(--bone); background: rgba(255, 255, 255, 0.05); }
.segment button.active { background: var(--gold-tint); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(201, 169, 97, 0.55); }
button { border-radius: var(--radius-sm); padding: 7px 16px; min-height: 34px; }
select, .csearch input { border-radius: 10px; min-height: 38px; background-color: rgba(0, 0, 0, 0.25); }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.control.method a { border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); padding: 7px 16px; font-size: 0.86rem; }

/* What we found: headline numbers, then the sentences */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); margin: var(--s3) 0; }
.kpi { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s3); box-shadow: var(--shadow); }
.kpi .k-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); }
.kpi .k-value { font-family: var(--display); font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: 1.05; color: var(--bone); margin: 10px 0 6px; font-variant-numeric: tabular-nums; }
.kpi .k-value.k-word { font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-style: italic; color: var(--bone-soft); }
.kpi .k-value em { color: var(--gold); font-style: italic; font-weight: 300; }
.kpi .k-note { font-size: 0.86rem; color: var(--bone-soft); line-height: 1.45; }
.kpi.accent { border-color: rgba(201, 169, 97, 0.45); background: linear-gradient(180deg, rgba(201, 169, 97, 0.10), var(--card) 70%); }
/* Four across leaves a card about 145px of text width just above 900px, so a seven digit figure such as
   3,008,671 gets a slightly lower floor there, with room for a classic scrollbar. */
@media (min-width: 901px) { .kpi .k-value { font-size: clamp(2rem, 3.4vw, 3rem); } }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .kpis { grid-template-columns: 1fr; } }
.findings-box { max-width: none; margin: 0; padding: var(--s3) var(--s4); border: 1px solid var(--rule); border-left: 3px solid var(--gold); border-radius: var(--radius); background: var(--card); }
.findings-box .fb-kicker { display: none; }
.findings-box p { font-size: 1.05rem; line-height: 1.65; color: var(--bone-soft); max-width: 80ch; }
.findings-box .fb-see { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--gold); border-radius: var(--radius-sm); padding: 7px 16px; color: var(--gold); margin-top: var(--s1); transition: background 180ms ease; }
.findings-box .fb-see:hover { background: var(--gold-tint); }

/* Start here */
.start-here { margin-top: var(--s5); border: 1px solid var(--rule); border-left: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); padding: var(--s3) var(--s4); max-width: calc(var(--page) - 2 * var(--gutter)); }
@media (max-width: 1400px) { .start-here { margin-left: var(--gutter); margin-right: var(--gutter); } }
.start-here .sh-title { font-size: 1.6rem; }
.start-here summary::before { font-size: 1.5rem; }
.sh-intro p { font-size: 1.02rem; line-height: 1.7; max-width: 72ch; }
.sh-categories { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--s2); }
.sh-categories dt, .sh-categories dd { display: block; }
.sh-routes { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s2); counter-reset: route; }
@media (max-width: 1000px) { .sh-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sh-route-card { position: relative; border-radius: 12px; background: var(--card-2); border: 1px solid var(--rule); padding: var(--s3) var(--s2) var(--s2); gap: 8px; transition: border-color 180ms ease, transform 180ms ease, background 180ms ease; counter-increment: route; }
.sh-route-card::before { content: counter(route); position: absolute; top: 14px; right: 16px; font-family: var(--display); font-style: italic; font-size: 1.6rem; color: var(--gold-soft); }
.sh-route-card:hover { border-color: var(--gold); background: #1c1f24; transform: translateY(-2px); }
.sh-route-how { font-size: 0.9rem; line-height: 1.5; }
.sh-route-line { font-size: 0.84rem; }

/* Examples: a row of cards */
.examples { border-top: none; padding-top: 0; }
.ex-list { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--s2); }
.ex-item { background: var(--card); border: 1px solid var(--rule); border-left: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s3); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; transition: border-color 180ms ease; }
.ex-item:hover { border-color: rgba(201, 169, 97, 0.45); }
.ex-headline { font-size: 1.3rem; line-height: 1.25; }
.ex-meta { font-size: 0.84rem; }
.ex-snippet { font-size: 1.08rem; line-height: 1.5; border-top: 1px solid var(--rule); padding-top: 12px; margin-top: auto; }
.ex-hl { background: rgba(201, 169, 97, 0.28); box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.28); border-radius: 3px; }

/* Theme counter and Who publishes it */
.tf-list li { font-size: 0.92rem; padding: 8px 6px; }
.th-grid { font-size: 0.86rem; }
.th-grid td.cell { border-radius: 4px; }
#leaning .lean-body { grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr); gap: var(--s5); }
#lean-table { font-size: 0.92rem; }
#lean-table td { padding: 10px 8px; }
.lean-note { font-size: 0.9rem; line-height: 1.6; }

/* Questions: two columns of cards */
section.faq { padding-top: 0; }
.faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
@media (max-width: 900px) { .faq-list { grid-template-columns: 1fr; } }
.faq-item { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: var(--s2) var(--s3); transition: border-color 180ms ease; }
.faq-item[open] { border-color: rgba(201, 169, 97, 0.45); }
.faq-item summary { font-size: 1.2rem; line-height: 1.35; }
.faq-item p { font-size: 0.98rem; line-height: 1.65; }

/* Methodology: a readable measure */
section.method { border-top: 1px solid var(--rule); padding-top: var(--s5); padding-bottom: var(--s5); margin-top: var(--s6); }
section.method .defs p { font-size: 0.98rem; line-height: 1.7; max-width: 78ch; }
footer { max-width: var(--page); margin: 0 auto; padding: var(--s4) var(--gutter) var(--s5); border-top: 1px solid var(--rule); }

@media (prefers-reduced-motion: reduce) { .sh-route-card:hover { transform: none; } }
@media (max-width: 640px) {
  .map-card > .controls { padding: var(--s2); }
  #map-wrap, #bars-wrap, #timeline, aside#panel { padding-left: var(--s2); padding-right: var(--s2); }
  .card-sec, .start-here { padding: var(--s3) var(--s2) !important; margin-left: var(--gutter); margin-right: var(--gutter); }
  .sh-routes { grid-template-columns: 1fr; }
  .findings-box { padding: var(--s2); }
}
/* Keep the map near the top: a one-line title, and the methodology link lives in the header nav. */
h1 { max-width: none; font-size: clamp(2rem, 3.2vw, 3rem); }
header.top { padding-top: var(--s4); padding-bottom: var(--s2); }
header.top .sub { margin: var(--s1) 0 var(--s2); }
.map-card .control.method { display: none; }
.map-head { gap: var(--s2) var(--s2); }
/* Section widths: the older element rules were more specific than .sec. */
section.sec.faq, section.sec.method { max-width: var(--page); padding-left: var(--gutter); padding-right: var(--gutter); }
/* Category definitions: each term sits with its own definition, as a small card. */
.sh-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: var(--s2); margin: var(--s3) 0; }
.sh-cat { background: var(--card-2); border: 1px solid var(--rule); border-radius: 12px; padding: var(--s2) var(--s3); }
.sh-cat dt { font-size: 1.15rem; margin-bottom: 6px; }
.sh-cat dd { font-size: 0.92rem; line-height: 1.55; }
/* The timeline curves are drawn in their own coordinates; clip them to the track so they never widen the page. */
.timeline .tl-track, .timeline svg.spark { overflow: hidden; }
.map-card, .map-card > main { max-width: 100%; }
/* Phone rules that must follow the redesign layer above, or its desktop rules win. */
@media (max-width: 700px) {
  #leaning .lean-body { grid-template-columns: 1fr; gap: var(--s3); }
  #lean-pie { margin: 0 auto; max-width: 13rem; }
  #lean-table { font-size: 0.84rem; }
  #lean-table th, #lean-table td { padding: 8px 4px; }
}
@media (max-width: 520px) {
  /* Wrapped button rows are rounded rectangles, not stretched pills. */
  .segment { border-radius: 18px; }
  .segment button { border-radius: 14px; }
}
/* Translate links under non-English headlines. They open the reader's translator; the site sends nothing. */
.tr-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.tr-links a { font-size: 0.78rem; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 3px 10px; color: var(--bone-soft); transition: border-color 180ms ease, color 180ms ease; }
.tr-links a:hover { border-color: var(--gold); color: var(--gold); }
.ex-lede { color: var(--bone-soft); max-width: 70ch; margin: 0 0 var(--s2); }
/* Planted bylines: an intro, a flags table, a one-line count by country, and a closed diagnostic.
   Tables scroll inside their own wrapper, so the card never widens the page on a phone. */
#planted .th-kicker { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s1); }
#planted .th-sub { font-size: 0.98rem; color: var(--bone-soft); max-width: 70ch; margin: 0 0 var(--s3); }
.pl-empty { color: var(--bone-soft); max-width: 70ch; margin: 0 0 var(--s2); }
.pl-line { color: var(--ash); font-size: 0.9rem; max-width: 70ch; margin: 0 0 var(--s2); }
.pl-table-wrap { overflow-x: auto; max-width: 100%; margin: 0 0 var(--s2); -webkit-overflow-scrolling: touch; }
.pl-table { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: 0.9rem; }
.pl-table th { color: var(--ash); font-weight: 400; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
.pl-table td { padding: 10px 8px; border-bottom: 1px solid var(--rule); color: var(--bone-soft); vertical-align: top; }
.pl-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pl-table .pl-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-table .pl-outlet { color: var(--bone); }
.pl-table .pl-title { display: block; font-size: 0.82rem; color: var(--ash); max-width: 26rem; margin-top: 2px; }
.pl-table .pl-detector { color: var(--ash); }
.pl-toggle { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: 0.86rem; margin: 0 0 var(--s2); }
@media (max-width: 700px) {
  .pl-table { font-size: 0.84rem; min-width: 40rem; }
  .pl-table th, .pl-table td { padding: 8px 4px; }
}
/* Nothing may widen the page at phone width (320 to 375px). A quoted press release once ended in a bare
   attachment URL with no break point and pushed the page 110px sideways. Text that comes from articles,
   outlets or the data (quotes, headlines, outlet and country names, URLs, notes, tooltips) may break
   anywhere as a last resort; "anywhere" rather than "break-word" so a grid or flex track can also shrink
   past a long word. Headings only break a word that would otherwise overflow. */
.ex-snippet, .ex-headline, .ex-meta, .ex-lede, .article .a-title, .article .a-quote, .article .a-meta,
.tooltip, .tf-label, #bars .bar-row > *, aside#panel td, .panel-note-box p, aside#panel .panel-note,
.pl-table .pl-outlet, .pl-table .pl-title, .pl-line, .pl-empty, #method-notes li, .notes-strip, .notice,
.findings-box p, .kpi .k-note, .faq-item p, .faq-sources, .lean-note, .lean-caveat, .map-caption,
.bars-caption, .sh-route-how, .sh-route-line, .sh-cat dd, #legend .lg-note, #citation, .cta-line, footer { overflow-wrap: anywhere; }
h1, h2, h3, .faq-item summary { overflow-wrap: break-word; }
.tooltip { max-width: min(20rem, calc(100vw - 32px)); }
/* A long option in a picker (the route list) sizes the select; keep it inside the controls. */
.control { min-width: 0; max-width: 100%; }
select { max-width: 100%; }
@media (max-width: 520px) {
  /* Play, the two step buttons and the date leave no room for the track on a phone: the track takes its own line. */
  .timeline .tl-row { flex-wrap: wrap; row-gap: 0.4rem; }
  .timeline .tl-date { min-width: 0; }
  .timeline .tl-track { flex: 1 1 100%; }
  /* The theme counter's count line ("1088 unchecked state sourcing articles") goes under the name. */
  .tf-head { flex-wrap: wrap; }
  .tf-n { white-space: normal; }
}
@media (max-width: 420px) {
  /* Six columns in about 255px: tighter cells and headers so the table stays inside its card. */
  #lean-table { font-size: 0.8rem; }
  #lean-table th { letter-spacing: 0.02em; font-size: 0.6rem; }
  #lean-table th, #lean-table td { padding: 8px 2px; }
  #lean-table td { -webkit-hyphens: auto; hyphens: auto; }
}