/* Custom palette, not the dataviz reference set. Every categorical row and both
   ordinal ramps were run through scripts/validate_palette.js (in-browser module
   mode) against the exact surfaces below, on the adjacent pairlist that governs
   bars and lines. All gates pass in both modes:
     light  worst adjacent CVD dE 15.9 (deutan), normal-vision dE 24.5, all >= 3:1
     dark   worst adjacent CVD dE 15.1 (deutan), normal-vision dE 22.2, all >= 3:1

   Slot order is the CVD-safety mechanism, not decoration. Green cannot take
   slot 2: measured beside the red it fails outright (dE 3.4 deutan, against a
   target of 8), which is the classic red/green collapse. Teal is viable but
   only with violet between it and the red - hence blue, red, violet, teal.
   The surfaces are load-bearing: the light ordinal's lightest step clears the
   2:1 floor at 2.04:1 against #fdfcfb, so lightening that surface breaks it.
   Re-run the validator before changing any value here. */
:root {
  color-scheme: light;
  --plane:          #eef1f4;
  --surface:        #fdfcfb;
  --sunken:         #e5e9ee;
  --ink:            #16181d;
  --ink-2:          #3d4450;
  --ink-muted:      #6b7280;
  --grid:           #e2e6ea;
  --axis:           #c8cfd6;
  --border:         rgba(22, 24, 29, 0.11);
  --shadow-1:       0 1px 2px rgba(20, 27, 37, 0.05), 0 4px 14px rgba(20, 27, 37, 0.06);
  --shadow-2:       0 2px 6px rgba(20, 27, 37, 0.08), 0 16px 40px rgba(20, 27, 37, 0.13);
  /* The rail is a deep navy plane in both modes - the page's one constant,
     and the same hue family as series slot 1. */
  --rail:           #0a1c33;
  --rail-raised:    #12304f;
  --rail-ink:       #e6edf6;
  --rail-ink-2:     #93aac6;
  --rail-border:    rgba(255, 255, 255, 0.10);
  --rail-accent:    #5b93da;
  --series-1:       #215699;
  --series-2:       #c02b2b;
  --series-3:       #7c4dc7;
  --series-4:       #00897b;
  --ordinal-1:      #8bb2e0;
  --ordinal-2:      #6b9dd6;
  --ordinal-3:      #4a86c8;
  --ordinal-4:      #2f6cb0;
  --ordinal-5:      #215290;
  --ordinal-6:      #153c6b;
}

/* The dark column is the same four hues re-stepped for the dark surface and
   validated as its own set, not an automatic flip of the light values. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --plane:      #0d1014;
    --surface:    #15191f;
    --sunken:     #10141a;
    --ink:        #ffffff;
    --ink-2:      #c2c9d2;
    --ink-muted:  #8b93a0;
    --grid:       #262c34;
    --axis:       #333a44;
    --border:     rgba(255, 255, 255, 0.10);
    --shadow-1:   0 1px 2px rgba(0, 0, 0, 0.44), 0 4px 14px rgba(0, 0, 0, 0.36);
    --shadow-2:   0 2px 6px rgba(0, 0, 0, 0.52), 0 16px 40px rgba(0, 0, 0, 0.48);
    --rail:       #071523;
    --rail-raised: #0f2540;
    --rail-ink:   #e6edf6;
    --rail-ink-2: #93aac6;
    --rail-border: rgba(255, 255, 255, 0.09);
  --rail-accent: #5b93da;
    --rail-accent: #5b93da;
    --series-1:   #5b93da;
    --series-2:   #e05c62;
    --series-3:   #8f77e0;
    --series-4:   #0ba98b;
    --ordinal-1:  #d9e6f6;
    --ordinal-2:  #b3cdec;
    --ordinal-3:  #8db4e1;
    --ordinal-4:  #6799d5;
    --ordinal-5:  #417ec6;
    --ordinal-6:  #2a63a8;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:      #0d1014;
  --surface:    #15191f;
  --sunken:     #10141a;
  --ink:        #ffffff;
  --ink-2:      #c2c9d2;
  --ink-muted:  #8b93a0;
  --grid:       #262c34;
  --axis:       #333a44;
  --border:     rgba(255, 255, 255, 0.10);
  --shadow-1:   0 1px 2px rgba(0, 0, 0, 0.44), 0 4px 14px rgba(0, 0, 0, 0.36);
  --shadow-2:   0 2px 6px rgba(0, 0, 0, 0.52), 0 16px 40px rgba(0, 0, 0, 0.48);
  --rail:       #071523;
  --rail-raised: #0f2540;
  --rail-ink:   #e6edf6;
  --rail-ink-2: #93aac6;
  --rail-border: rgba(255, 255, 255, 0.09);
  --rail-accent: #5b93da;
  --series-1:   #5b93da;
  --series-2:   #e05c62;
  --series-3:   #8f77e0;
  --series-4:   #0ba98b;
  --ordinal-1:  #d9e6f6;
  --ordinal-2:  #b3cdec;
  --ordinal-3:  #8db4e1;
  --ordinal-4:  #6799d5;
  --ordinal-5:  #417ec6;
  --ordinal-6:  #2a63a8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- Shell -------------------------------------------------------------- */

.shell { display: flex; align-items: flex-start; }

.sidebar {
  position: sticky; top: 0; flex: 0 0 250px; width: 250px;
  height: 100vh; overflow-y: auto; padding: 26px 18px 32px;
  border-right: 1px solid var(--rail-border);
  background: linear-gradient(180deg, var(--rail-raised) 0%, var(--rail) 34%);
  color: var(--rail-ink); scrollbar-width: thin;
}

main { flex: 1 1 auto; min-width: 0; padding: 0 44px 96px; max-width: 1180px; }

@media (max-width: 940px) {
  .shell { flex-direction: column; }
  .sidebar {
    position: static; width: 100%; flex-basis: auto; height: auto;
    border-right: 0; border-bottom: 1px solid var(--border);
  }
  main { padding: 0 20px 72px; }
}

/* --- Sidebar ------------------------------------------------------------ */

.brand {
  font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--rail-ink-2); margin-bottom: 18px; line-height: 1.4;
}

.viewswitch {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px;
  background: rgba(0, 0, 0, 0.28); border: 1px solid var(--rail-border);
  border-radius: 10px; margin-bottom: 22px;
}
.viewswitch button {
  border: 0; background: none; border-radius: 7px; padding: 8px 2px;
  font: inherit; font-size: 12.5px; color: var(--rail-ink-2); cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.viewswitch button:hover { color: var(--rail-ink); }
.viewswitch button[aria-selected="true"] {
  background: var(--rail-raised); color: var(--rail-ink); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.side-label {
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--rail-ink-2); margin: 0 0 8px; opacity: 0.8;
}

nav.analyses ol { list-style: none; margin: 0; padding: 0; }
.nav-part {
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--rail-ink-2); opacity: 0.65; margin: 16px 0 5px; padding: 0 9px;
}
.nav-part:first-child { margin-top: 0; }
nav.analyses a {
  display: flex; gap: 9px; align-items: baseline;
  padding: 7px 9px; border-radius: 8px; text-decoration: none;
  color: var(--rail-ink-2); font-size: 13.5px; line-height: 1.35;
  transition: background 130ms ease, color 130ms ease;
}
nav.analyses a:hover { background: rgba(255, 255, 255, 0.06); color: var(--rail-ink); }
nav.analyses a[aria-current="true"] {
  background: var(--rail-raised); color: var(--rail-ink); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--rail-accent);
}

/* --- Toolbar (filters live at the top of the content, not the rail) ------ */

.toolbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  padding: 14px 0 14px; margin-bottom: 4px;
  background: linear-gradient(var(--plane) 76%, transparent);
  backdrop-filter: blur(6px);
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label {
  font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-muted);
}
.field select, .dd-button {
  font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 9px; padding: 8px 11px; min-width: 172px;
  box-shadow: var(--shadow-1); cursor: pointer;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.field select:hover, .dd-button:hover { border-color: var(--axis); }
.field select:focus-visible, .dd-button:focus-visible {
  outline: 2px solid var(--series-1); outline-offset: 1px;
}

/* --- Multi-select dropdown ---------------------------------------------- */

.dropdown { position: relative; }
.dd-button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; }
.dd-button .dd-value { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-button .dd-caret { color: var(--ink-muted); font-size: 10px; flex: none; }
.dd-dots { display: inline-flex; gap: 3px; flex: none; }
.dd-dots i { width: 8px; height: 8px; border-radius: 2px; display: block; }

.dd-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  width: 292px; max-height: 336px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-2); overflow: hidden;
}
.dd-panel[hidden] { display: none; }
.dd-search {
  font: inherit; font-size: 13px; color: var(--ink); background: var(--plane);
  border: 0; border-bottom: 1px solid var(--border); padding: 10px 12px; width: 100%;
}
.dd-search:focus { outline: none; }
.dd-list { overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.dd-option {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 13.5px; color: var(--ink-2); cursor: pointer; text-align: left;
}
.dd-option:hover { background: var(--sunken); color: var(--ink); }
.dd-all { border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; margin-bottom: 4px; }
.dd-all .geo-badge { background: var(--ink-2); letter-spacing: 0.06em; }
.dd-all[aria-selected="true"] .geo-badge { background: var(--series-1); }
.dd-option[aria-selected="true"] { color: var(--ink); font-weight: 600; background: var(--sunken); }
.dd-check { margin-left: auto; color: var(--series-1); font-weight: 700; }

/* A country code, not a flag emoji: Windows ships no flag glyphs, so an emoji
   flag degrades there to the bare letter pair anyway. The badge renders the
   same on every platform and carries the series colour with it. */
.geo-badge {
  flex: none; display: inline-grid; place-items: center;
  min-width: 26px; height: 19px; padding: 0 5px;
  border-radius: 5px; background: var(--series-1); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
}
.dd-option .geo-badge { background: var(--ink-muted); }
.dd-option[aria-selected="true"] .geo-badge { background: var(--series-1); }
.dd-badges { display: inline-flex; gap: 3px; flex: none; }
.dd-foot {
  border-top: 1px solid var(--border); padding: 8px 12px;
  font-size: 11px; color: var(--ink-muted);
}

/* --- Masthead ----------------------------------------------------------- */

header.masthead { padding: 40px 0 6px; }
h1 {
  font-size: clamp(27px, 3.4vw, 38px); line-height: 1.12;
  margin: 0 0 12px; letter-spacing: -0.022em;
}
.standfirst { font-size: 17px; color: var(--ink-2); max-width: 60ch; margin: 0; }

.unit-banner {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 20px 0 0; padding: 8px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; font-size: 12.5px; color: var(--ink-2);
  box-shadow: var(--shadow-1);
}
.unit-banner strong { color: var(--ink); font-weight: 600; }

/* --- Sections ----------------------------------------------------------- */

section { margin: 50px 0 0; scroll-margin-top: 86px; }
section > h2 { font-size: 23px; letter-spacing: -0.015em; margin: 0 0 6px; }
section > .deck { color: var(--ink-2); margin: 0 0 20px; max-width: 66ch; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 15px; padding: 20px 22px 16px; box-shadow: var(--shadow-1);
  transition: box-shadow 180ms ease;
}
.card:hover { box-shadow: var(--shadow-2); }
.card + .card { margin-top: 16px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.card-title { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -0.005em; }
.card-note { font-size: 12px; color: var(--ink-muted); margin: 6px 0 16px; max-width: 82ch; line-height: 1.5; }
.card-empty {
  margin: 6px 0 10px; padding: 22px; border-radius: 10px;
  background: var(--sunken); border: 1px dashed var(--axis);
  color: var(--ink-2); font-size: 13.5px; text-align: center; max-width: 72ch;
}
.card-warn {
  margin: 0 0 14px; padding: 9px 12px; border-radius: 9px;
  background: var(--sunken); border: 1px solid var(--border);
  font-size: 12px; color: var(--ink-2);
}

/* --- Stat tiles --------------------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.tile {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 15px; padding: 20px; box-shadow: var(--shadow-1);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
/* A colour wash keyed to the series the tile reports, so the tiles and the
   charts below them read as one system rather than four grey boxes. */
.tile::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--tile-accent, var(--axis));
}
.tile::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 168px; height: 168px; border-radius: 50%;
  background: radial-gradient(circle, var(--tile-accent, transparent) 0%, transparent 74%);
  opacity: 0.09; pointer-events: none;
}
.tile .k { font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); }
.tile .v { font-size: 40px; line-height: 1.05; margin: 12px 0 5px; letter-spacing: -0.028em; }
/* "Not published" is a sentence, not a figure - at hero size it wraps and
   shouts louder than the numbers it sits beside. */
.tile .v.v-count { font-size: 30px; letter-spacing: -0.02em; }
.tile .v.v-text { font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-2); }
.tile .sub { font-size: 12.5px; color: var(--ink-2); }
.tile.accent .v { color: var(--series-1); }
.tile.compare .v { color: var(--series-2); }

/* --- Chart chrome ------------------------------------------------------- */

.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.grid-line { stroke: var(--grid); stroke-width: 1; }
.axis-line { stroke: var(--axis); stroke-width: 1; }
.tick-label { fill: var(--ink-muted); font-size: 11px; }
.cat-label { fill: var(--ink-2); font-size: 12px; }
/* A clipped name is still fully readable on hover; the dotted rule says so
   without a cursor, which no screenshot ever shows. */
.cat-label.clipped {
  cursor: help;
  text-decoration: underline dotted var(--axis);
  text-underline-offset: 3px;
}
.cat-label.clipped:hover { fill: var(--ink); text-decoration-color: var(--ink-muted); }
.value-label { fill: var(--ink-2); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* A withheld figure is marked, not hidden: a short rule where the bar would
   start, and the reason on hover. Muted and italic so it never reads as data. */
.cat-label.missing { fill: var(--ink-muted); font-style: italic; }
.value-label.missing {
  fill: var(--ink-muted); font-weight: 400; font-style: italic;
  font-size: 10.5px; cursor: help;
}
.missing-rule { stroke: var(--axis); stroke-width: 2; stroke-linecap: round; }
.series-label { font-size: 12px; font-weight: 600; }

/* Bars grow from their baseline on first paint. transform-box makes the SVG
   rect honour a percentage transform-origin.

   Deliberately short and barely staggered: this page is built to be
   screenshotted, and a long entrance means a capture taken a moment too early
   shows half-drawn bars. Set both durations to 0s to disable entirely. */
@keyframes barGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes barGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.bar-x { transform-box: fill-box; transform-origin: left center; animation: barGrowX 300ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.bar-y { transform-box: fill-box; transform-origin: center bottom; animation: barGrowY 300ms cubic-bezier(0.22, 1, 0.36, 1) both; }

.mark { transition: opacity 120ms ease; }
.chart svg:hover .mark { opacity: 0.5; }
.chart svg .mark:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bar-x, .bar-y { animation: none; }
  .tile, .card { transition: none; }
}

.legend { display: flex; flex-wrap: wrap; gap: 15px; margin: 14px 0 0; padding: 0; list-style: none; }
.legend li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); }
.legend .swatch { width: 10px; height: 10px; border-radius: 3px; }

.tooltip {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0;
  transition: opacity 90ms ease; max-width: 300px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: 11px;
  padding: 11px 13px; font-size: 12px; line-height: 1.45;
  box-shadow: var(--shadow-2);
}
.tooltip .tt-title { font-weight: 600; margin-bottom: 6px; }
.tooltip .tt-row { display: flex; align-items: center; gap: 7px; }
.tooltip .tt-row .swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tooltip .tt-base { color: var(--ink-muted); margin-top: 7px; font-size: 11px; }

/* --- Data table (the accessibility relief for low-contrast slots) -------- */

.table-toggle {
  font: inherit; font-size: 12px; padding: 5px 11px; flex: none; cursor: pointer;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
}
.table-toggle:hover { border-color: var(--axis); }
table.data { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
table.data th, table.data td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--grid); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data th {
  color: var(--ink-muted); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* --- Methodology -------------------------------------------------------- */

.caveats { margin: 0; padding: 0; list-style: none; }
.caveats li {
  padding: 12px 0 12px 18px; border-bottom: 1px solid var(--grid);
  color: var(--ink-2); position: relative; font-size: 14px;
}
.caveats li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 7px; height: 2px; background: var(--ink-muted);
}
.sources { font-size: 13px; color: var(--ink-2); margin-top: 18px; line-height: 2; }
.sources a { color: inherit; }
footer.colophon {
  border-top: 1px solid var(--border); margin-top: 52px; padding-top: 20px;
  color: var(--ink-muted); font-size: 12.5px; max-width: 74ch;
}

.loading { padding: 60px 44px; color: var(--ink-muted); }

/* --- Plain-language notes ----------------------------------------------- */

.notes { display: grid; gap: 14px; }
.note {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--series-1);
  border-radius: 12px; padding: 16px 20px; box-shadow: var(--shadow-1);
}
.note h3 { margin: 0 0 6px; font-size: 15px; letter-spacing: -0.005em; }
.note p { margin: 0; color: var(--ink-2); font-size: 14px; max-width: 78ch; }

details.technical {
  margin-top: 22px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 4px 20px;
}
details.technical summary {
  cursor: pointer; padding: 13px 0; font-size: 13.5px; color: var(--ink-2);
}
details.technical summary:hover { color: var(--ink); }
details.technical[open] summary { border-bottom: 1px solid var(--grid); margin-bottom: 6px; }
details.technical .caveats li { font-size: 13px; }
details.technical .caveats li:last-child { border-bottom: 0; }

/* --- Phones -------------------------------------------------------------
   The 940px rule above already stacks the rail on top of the content, which is
   enough for a tablet. A phone needs more than a stack: the rail's nine-item
   nav, the four-control toolbar and the charts each assume a width that is not
   there. Nothing here hides data - the nav scrolls sideways, the toolbar goes
   two-up, the charts redraw at their real width (see geometry() in app.js), and
   every figure stays reachable through the same table view.               */

@media (max-width: 700px) {
  main { padding: 0 16px 56px; }
  .loading { padding: 40px 16px; }

  .sidebar { padding: 16px 14px 14px; }
  .brand { margin-bottom: 14px; }
  .side-label { display: none; }

  /* The nav becomes a sideways-scrolling strip of chips. Stacked, its nine
     entries and four group headings push the first chart most of a screen
     down; the narrative parts are the first thing to go, since the chips keep
     their order and the reader can still see where they are. */
  .nav-part { display: none; }
  nav.analyses ol {
    display: flex; gap: 6px; overflow-x: auto;
    padding-bottom: 4px; margin: 0 -14px; padding-inline: 14px;
    scrollbar-width: none;
  }
  nav.analyses ol::-webkit-scrollbar { display: none; }
  nav.analyses li { flex: none; }
  nav.analyses a {
    white-space: nowrap; padding: 7px 12px;
    background: rgba(255, 255, 255, 0.06);
  }
  nav.analyses a[aria-current="true"] { box-shadow: none; }

  /* Not sticky: two rows of controls would hold a third of the screen for the
     whole scroll. They sit at the top of the page and stay there. */
  .toolbar {
    position: static; display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px; padding: 12px 0 14px; backdrop-filter: none; background: none;
  }
  .field select, .dd-button { min-width: 0; width: 100%; padding: 9px 10px; }
  .dd-panel { width: min(292px, calc(100vw - 32px)); max-height: 60vh; }
  /* The right-hand column's panel would hang off the screen edge. */
  .field:nth-child(even) .dd-panel { left: auto; right: 0; }

  header.masthead { padding: 22px 0 4px; }
  .standfirst { font-size: 15.5px; }
  .unit-banner { display: flex; align-items: flex-start; border-radius: 12px; margin-top: 16px; }

  section { margin: 36px 0 0; scroll-margin-top: 12px; }
  section > h2 { font-size: 20px; }

  .card { padding: 16px 14px 12px; border-radius: 13px; }
  .card-head { flex-wrap: wrap; gap: 8px; }
  .card-note, .card-warn { font-size: 11.5px; }

  /* Four tiles two-up rather than one long column of hero numbers. */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 14px; border-radius: 13px; }
  .tile .k { font-size: 10.5px; }
  .tile .v { font-size: 29px; margin: 8px 0 4px; }
  .tile .v.v-count { font-size: 21px; }
  .tile .v.v-text { font-size: 15px; }
  .tile .sub { font-size: 11.5px; }

  .legend { gap: 10px 14px; margin-top: 12px; }
  .tooltip { max-width: min(300px, calc(100vw - 24px)); }
  .note { padding: 14px 16px; }
  .note p { font-size: 13.5px; }
}

/* A wide table (the relief for every chart) scrolls inside its card rather
   than stretching the page sideways. */
.table-scroll { overflow-x: auto; margin-top: 16px; scrollbar-width: thin; }
.table-scroll table.data { margin-top: 0; }

/* --- Touch ---------------------------------------------------------------
   Hover states on a touch screen either never fire or fire and stick. The
   sibling-dimming rule is the one that actually breaks: a tap would leave every
   other mark at half opacity until the next tap.                          */

@media (hover: none) {
  .chart svg:hover .mark { opacity: 1; }
  .chart svg .mark:hover { opacity: 1; }
  .tile:hover { transform: none; box-shadow: var(--shadow-1); }
  .card:hover { box-shadow: var(--shadow-1); }
}