/* ============================================================
   STATISTICS TOOL — dashboard stylesheet
   A standalone, full-bleed analytics product built strictly in
   the Coalition liquid-glass language defined in css/style.css.
   Tokens, fonts (Metropolis), nav and footer come from style.css.
   Glass is reserved for the chrome (command bar + rail); data
   panels are solid surfaces for legibility (AA or better).
   ============================================================ */

/* ------------------------------------------------------------
   0. PAGE SCOPE + LOCAL TOKENS
------------------------------------------------------------ */
.stats-page {
  /* Foundation color roles (pass 1): ink on white, hairline
     structure, accent reserved for semantic VRU/cyclist marks,
     active states, focus rings, and the label dot. */
  --ink:            #1a1a1a;   /* primary text, primary buttons */
  --ink-soft:       #545454;   /* secondary text */
  --ink-faint:      #6e6e6e;   /* footnotes, axis labels, placeholders (AA on white) */
  --hairline:       #e4e6e8;   /* all card and table borders */
  --surface:        #ffffff;
  --canvas:         #f5f6f7;   /* page background */
  --accent:         var(--color-orange);
  --accent-soft:    var(--color-orange-light);
  --accent-rim:     rgba(254, 164, 75, 0.55);
  /* Neutral chart-mark tone for single-series, non-semantic marks. */
  --mark-neutral:   #b0b0b0;
  /* Categorical palette for multi-series charts (Compare lines),
     assigned in selection order. Orange is a categorical slot here,
     not semantic. Mirrored by CAT_COLORS in js/statistics.js. */
  --cat-1:          #1a1a1a;
  --cat-2:          #fea44b;
  --cat-3:          #9a6b3f;
  --cat-4:          #8a8f94;

  /* Legacy names mapped onto the roles above so every view rule
     speaks the same vocabulary. */
  --dash-bg:        var(--canvas);
  --surface-sunk:   var(--canvas);
  --line:           var(--hairline);
  --line-soft:      #eef0f1;
  --ink-strong:     var(--ink);

  --rail-w:         236px;
  --panel-pad:      clamp(20px, 2.3vw, 32px);
  --stage-pad:      clamp(16px, 2vw, 24px);  /* canvas inset; the bar derives its content edge from rail-w + this */
  --gap:            clamp(16px, 2vw, 24px);
  --bar-h:          76px;          /* measured live in JS; fallback for first paint */

  --shadow-panel:   0 1px 2px rgba(0, 0, 0, 0.04);

  background-color: var(--canvas);
}

/* Numbers never jitter or misalign on update: tabular lining
   figures on every numeric surface (KPIs, tables, chart values). */
.stats-page [class*="__value"],
.stats-page [class*="__pct"],
.stats-page .dt-cell,
.stats-page .dt-table,
.stats-page .ce-us__pill,
.stats-page .ce-chart__year,
.stats-page .ov-legend__min,
.stats-page .ov-legend__max,
.stats-page .ov-row__rank {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* One micro-label voice across every view (section labels,
   filter labels, eyebrows). */
.stats-page .ce-sectionlabel,
.stats-page .ce-selector__label,
.stats-page .cmp-field__label,
.stats-page .ov-filter__label,
.stats-page .ov-map__eyebrow,
.stats-page .ov-legend__caption,
.stats-page .dash-context__label,
.stats-page .ce-yr__label,
.stats-page .stats-about__cell-label,
.stats-page .ce-nobreak__eyebrow,
.stats-page .ce-us__eyebrow,
.stats-page .cmp-caveats__eyebrow,
.stats-page .stats-about__label,
.stats-page .ce-vru__eyebrow,
.stats-page .ce-callout__eyebrow {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* Semantic exception: the VRU and cyclist labels keep the accent. */
.stats-page .ce-vru__eyebrow,
.stats-page .ce-callout__eyebrow { color: var(--accent); }

/* ------------------------------------------------------------
   ANNOTATION SYSTEM
   Level 1, footnote: faint single-line provenance/scope notes
   with a small info glyph, sitting at the bottom of the card
   they describe.
   Level 2, note panel: white surface, hairline border, ink-soft
   left bar (see .cmp-caveats, .cmp-note, .ce-us__notes).
------------------------------------------------------------ */
.stats-page .ce-footnote,
.stats-page .ce-ts__note,
.stats-page .ce-ts__caption,
.stats-page .cmp-source,
.stats-page .ov-map__scope,
.stats-page .ce-provenance__source,
.stats-page .ce-us__caption,
.stats-page .ce-us__source {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-family: var(--font-primary);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-faint);
  max-width: 680px;
}
.stats-page .ce-footnote::before,
.stats-page .ce-ts__note::before,
.stats-page .ce-ts__caption::before,
.stats-page .cmp-source::before,
.stats-page .ov-map__scope::before,
.stats-page .ce-provenance__source::before,
.stats-page .ce-us__caption::before,
.stats-page .ce-us__source::before {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ------------------------------------------------------------
   1. GLOBAL NAV — locked to its solid docked state on this page
   (there is no hero for the floating capsule to sit over).
   Page-scoped so shared main.js / style.css stay untouched.
------------------------------------------------------------ */
.stats-page .nav {
  top: 0;
  left: 0;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  width: 100%;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.88) 100%);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.06),
    0 8px 32px rgba(0, 0, 0, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}
.stats-page .nav__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}
.stats-page .nav__logo img { filter: none; }
.stats-page .nav__link { color: rgba(26, 26, 26, 0.62); }
.stats-page .nav__link:hover { color: var(--color-black); background: rgba(0,0,0,0.04); box-shadow: none; }
.stats-page .nav__link.nav__link--active { color: var(--color-black); background: rgba(0,0,0,0.06); box-shadow: none; }
.stats-page .nav__hamburger-line { background-color: var(--color-black); }
/* The nav CTA uses the sitewide flat orange button from style.css. */

/* ------------------------------------------------------------
   2. DASHBOARD FRAME
   Mobile-first natural flow; an app-shell at >=1024px where the
   command bar + rail stay put and the canvas scrolls.
------------------------------------------------------------ */
.stats-page #main-content {
  padding-top: var(--nav-height);
  background-color: var(--dash-bg);
}
.dash {
  display: flex;
  flex-direction: column;
  /* The sticky bar is now an in-flow last child, so .dash fills the viewport
     below the nav and the bar takes its own space at the end (above the footer). */
  min-height: calc(100vh - var(--nav-height));
  background: var(--canvas);
}

/* ---- Command bar (docked to the viewport bottom, parks above the footer) ----
   Sticky + bottom:0 as the last child of .dash: it stays pinned to the
   viewport bottom while .dash is in view, then rests at .dash's end, which
   coincides with the footer's top edge (the footer lives outside .dash). */
.dash-bar {
  position: sticky;
  bottom: 0;
  z-index: 45;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 8px clamp(14px, 2.4vw, 30px);
  background: var(--surface);
  border-top: 1px solid var(--hairline);
}
.dash-bar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
/* The bar's left zone is empty now (the logo moved to the rail); it still holds
   grid column 1 over the rail so the control cluster stays at the content edge. */
.dash-bar__id { flex: 0 0 auto; min-width: 0; }
/* Below the app-shell breakpoint there is no rail column to align to, so the
   wrapper is transparent and the controls flow directly in the bar row.
   On desktop it becomes the second grid cell (see the >=1024px block). */
.dash-bar__main { display: contents; }

/* Global country search */
.dash-bar__search { flex: 0 1 240px; min-width: 168px; }
.dash-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.dash-search__icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--ink-soft);
  pointer-events: none;
}
.dash-search__input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 9px 14px 9px 36px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dash-search__input::placeholder { color: var(--ink-faint); }
.dash-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.dash-search__input:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Shared filter menus (labels are visually hidden; option text describes each) */
.dash-bar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.dash-bar__filters .ov-filter {
  flex: 0 0 auto;
  width: auto;
  gap: 0;
}
.dash-bar__filters .ov-filter__label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.dash-bar__filters .ov-selectwrap { width: auto; }
.dash-bar__filters .ov-select {
  width: auto;
  font-size: 13px;
  padding: 8px 32px 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.dash-bar__filters .ov-select:hover { border-color: var(--ink-faint); }
.dash-bar__filters .ov-selectwrap__chevron { right: 12px; width: 14px; height: 14px; }
/* A filter holding a non-default value reads as active. */
.dash-bar__filters .ov-select.is-set {
  color: var(--ink-strong);
  border-color: var(--accent-rim);
  background: var(--accent-soft);
}

/* Global action: a single direct full-dataset CSV button */
.dash-bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
/* PRIMARY action (one per view): solid ink, white text, flat. */
.dash-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dash-export-btn:hover { background: #3a3a3a; border-color: #3a3a3a; }
.dash-export-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Active-filter chips occupy the bar's top row when filters are set */
.dash-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px dashed var(--line);
}
.dash-context[hidden] { display: none; }
.dash-context__label {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dash-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px 5px 12px;
  background: var(--surface);
  border: 1px solid var(--accent-rim);
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-strong);
}
.dash-chip__remove {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--ink); /* legible at rest; flips to white-on-orange on hover */
  font-size: 14px; line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.dash-chip__remove:hover { background: var(--ink); color: #fff; }
.dash-chip__remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-context__reset {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease;
}
.dash-context__reset:hover { color: var(--ink-strong); text-decoration: underline; text-underline-offset: 3px; }
.dash-context__reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Body: rail + canvas ---- */
.dash-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.stats-views[hidden] { display: none; }
.stats-views {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---- Vertical rail (collapses to a horizontal bar on small screens) ---- */
.stats-rail {
  flex: 0 0 auto;
  position: sticky;
  top: var(--nav-height);
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
/* Holds the logo + tablist. On desktop it becomes sticky inside the full-height
   rail track (see the >=1024px block) so the lighter surface runs full height. */
.stats-rail__inner { min-width: 0; }
/* The page h1: the Road Safety Data Explorer logo, at the top of the rail. */
.rail-brand {
  margin: 0;
  padding: 14px clamp(12px, 2vw, 16px) 4px;
  display: flex;
  line-height: 0;
}
/* Visible dataset meta line under the logo (micro-label voice). */
.rail-meta {
  margin: 0;
  padding: 0 clamp(12px, 2vw, 16px) 12px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.rail-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 40px;   /* compact on the horizontal rail below the app-shell breakpoint */
}
.stats-tabs {
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 8px clamp(10px, 2vw, 16px);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.stats-tabs::-webkit-scrollbar { display: none; }
.stats-tab {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 9px 14px;
  font-family: var(--font-primary);
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
/* Fixed icon box so every label starts on a shared left edge. */
.stats-tab__icon { width: 20px; height: 20px; flex: 0 0 20px; opacity: 0.85; }
.stats-tab__label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.stats-tab:hover { color: var(--ink); background: rgba(0,0,0,0.035); }
.stats-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Active: ink text on a subtle tint with a single accent bar
   (underline on the horizontal rail, left bar on the desktop rail). */
.stats-tab[aria-selected="true"] {
  color: var(--ink);
  background: rgba(26, 26, 26, 0.05);
}
.stats-tab[aria-selected="true"] .stats-tab__icon { opacity: 1; }
.stats-tab[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}

/* ---- Canvas stage (transparent; panels are the surfaces) ---- */
.stats-stage {
  flex: 1 1 auto;
  min-width: 0;   /* allow the wide data table to scroll, not stretch the column */
  min-height: 0;
  padding: var(--stage-pad);
  background: transparent;
}
/* Panels and their wide children must also be allowed to shrink. */
.stats-panel, .dt, .ce, .cmp, .ov { min-width: 0; }
.stats-panel { outline: none; }
.stats-panel[hidden] { display: none; }

/* Per-view header */
.dash-vhead { margin-bottom: 20px; }
.dash-vhead__title {
  font-family: var(--font-primary);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: var(--weight-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.08;
  color: var(--ink);
}
.dash-vhead__desc {
  margin-top: 6px;
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 68ch;
}

/* Reusable panel surface */
.dash-surface,
.ce-main .ce-chart,
.ce-callout,
.ce-timeseries,
.cmp-result,
.ov,
.stats-about,
.dt-scroll {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
}

@media (prefers-reduced-motion: no-preference) {
  .stats-panel:not([hidden]) { animation: stats-fade 0.38s cubic-bezier(0.4, 0, 0.2, 1); }
}
@keyframes stats-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   3. STATES — loading / error / empty
------------------------------------------------------------ */
.stats-state {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  min-height: 50vh;
  padding: 48px 24px;
}
.stats-state[hidden] { display: none; }
.stats-state__text {
  font-family: var(--font-primary);
  font-size: 15px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.stats-state__title {
  font-family: var(--font-primary);
  font-size: 21px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.stats-spinner {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--color-grey-border);
  border-top-color: var(--accent);
  animation: stats-spin 0.9s linear infinite;
}
@keyframes stats-spin { to { transform: rotate(360deg); } }
.stats-state--error .stats-state__glyph { width: 40px; height: 40px; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .stats-spinner { animation: none; border-top-color: var(--accent); }
}

/* ============================================================
   4. COUNTRY EXPLORER
   ============================================================ */
.ce { display: flex; flex-direction: column; }

.ce-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  max-width: 360px;
}
.ce-selector__label {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ce-selector__control { position: relative; }
.ce-select {
  width: 100%;
  box-sizing: border-box;
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-strong);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 13px 46px 13px 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ce-select:hover { border-color: var(--ink-faint); }
.ce-select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ce-selector__chevron {
  position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--ink-soft); pointer-events: none;
}

/* Section label above the KPI band */
.ce-sectionlabel {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

/* KPI tile row */
.ce-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.ce-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-panel);
}
.ce-stat__eyebrow {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ce-stat__value {
  font-family: var(--font-primary);
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 300;
  line-height: 1.02;
  color: var(--ink-strong);
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
}
.ce-stat__value--muted { font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--ink-soft); }
.ce-stat__arrow { font-size: 0.66em; margin-right: 7px; color: var(--ink); vertical-align: baseline; }
.ce-stat__sub { font-family: var(--font-primary); font-size: 12px; color: var(--ink-soft); letter-spacing: 0.01em; }

/* Inline trend sparkline in the Total road deaths tile. */
.ce-spark {
  display: block;
  width: 128px;
  height: 30px;
  margin-top: 6px;
}

/* Main breakdown area sits directly on the canvas (no nested cards) */
.ce-main { display: flex; flex-direction: column; }
.ce-breakdown, .ce-nobreak { display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) {
  .ce-breakdown, .ce-nobreak { animation: stats-fade 0.38s cubic-bezier(0.4, 0, 0.2, 1); }
}

.ce-nobreak {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  padding: clamp(26px, 4vw, 40px);
  gap: 12px;
}
.ce-nobreak__eyebrow {
  font-family: var(--font-primary);
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.ce-nobreak__text { font-family: var(--font-primary); font-size: 16px; line-height: 1.7; color: var(--ink); max-width: 560px; }

/* VRU prominent stat */
.ce-vru { margin-bottom: 24px; max-width: 760px; }
.ce-vru__eyebrow {
  display: block;
  font-family: var(--font-primary);
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.ce-vru__stat { font-family: var(--font-primary); font-size: clamp(17px, 2.2vw, 21px); font-weight: 400; line-height: 1.5; color: var(--ink); }
.ce-vru__pct {
  display: block;
  font-size: clamp(44px, 7vw, 66px);
  font-weight: 300; line-height: 1; letter-spacing: 0.005em;
  color: var(--ink);
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}

/* Breakdown chart surface */
.ce-chart { padding: clamp(20px, 2.6vw, 28px); margin-bottom: 16px; }
.ce-chart__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 13px; border-bottom: 1px solid var(--line); margin-bottom: 20px;
}
.ce-chart__title {
  font-family: var(--font-primary);
  font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink-strong);
}
.ce-chart__year { font-family: var(--font-primary); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.ce-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 22px; }
.ce-legend__item { display: inline-flex; align-items: center; gap: 8px; }
.ce-legend__dot { width: 10px; height: 10px; border-radius: 3px; background: var(--mark-neutral); flex-shrink: 0; }
.ce-legend__item--vru .ce-legend__dot { background: var(--accent); }
.ce-legend__label { font-family: var(--font-primary); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-soft); }

.ce-bars { display: flex; flex-direction: column; gap: 15px; }
.ce-bar__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 7px; }
.ce-bar__label { font-family: var(--font-primary); font-size: 14px; font-weight: 400; color: var(--ink-soft); transition: color 0.15s ease; }
.ce-bar--vru .ce-bar__label { font-weight: 600; color: var(--ink); }
.ce-bar__value { font-family: var(--font-primary); font-size: 13px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ce-bar__track { height: 18px; border-radius: 3px; background: #f0f1f3; overflow: hidden; transition: background 0.15s ease; }
.ce-bar__fill { height: 100%; border-radius: 3px 0 0 3px; background: var(--mark-neutral); transform-origin: left center; }
.ce-bar--vru .ce-bar__fill { background: var(--accent); }
/* Hovering a row gently lifts that row's contrast only. */
.ce-bar:hover .ce-bar__label { color: var(--ink); }
.ce-bar:hover .ce-bar__track { background: #e8eaec; }
@media (prefers-reduced-motion: no-preference) {
  .ce-bar__fill { animation: bar-grow 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Cyclist callout — flat surface; the semantic cyclist accent is
   carried by a single left bar and the eyebrow. */
.ce-callout {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow-panel);
  background: var(--surface);
  padding: clamp(22px, 3vw, 30px);
  margin-bottom: 16px;
}
.ce-callout__eyebrow {
  display: block;
  font-family: var(--font-primary);
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.ce-callout__lead { font-family: var(--font-primary); font-size: clamp(16px, 2vw, 19px); line-height: 1.55; color: var(--ink); }
.ce-notes { margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ce-note { position: relative; padding-left: 18px; font-family: var(--font-primary); font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.ce-note::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--mark-neutral); }

.ce-footnote { margin-top: 16px; }

/* Provenance strip */
.ce-provenance { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.ce-provenance__source { font-family: var(--font-primary); font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.ce-provenance__notes { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ce-provenance__note { position: relative; padding-left: 16px; font-family: var(--font-primary); font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.ce-provenance__note::before { content: ""; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--mark-neutral); }

/* Time series surface */
.ce-timeseries { margin-top: 16px; padding: clamp(20px, 2.6vw, 28px); }
.ce-ts__note { margin-top: 12px; }
.ce-ts__title {
  font-family: var(--font-primary);
  font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink-strong);
  padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 18px;
}
.ce-ts__chart { position: relative; width: 100%; height: clamp(240px, 32vw, 340px); }
.ce-ts__caption { font-family: var(--font-primary); font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); margin-top: 16px; }
.ce-ts__empty { font-family: var(--font-primary); font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

/* Year-range control */
.ce-yr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 22px; }
.ce-yr__label { font-family: var(--font-primary); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.ce-yr__field { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-primary); font-size: 12.5px; color: var(--ink-soft); }
.ce-yr__field-label { white-space: nowrap; }
.ce-yr__select {
  font-family: var(--font-primary); font-size: 14px; color: var(--ink-strong);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 11px; cursor: pointer; font-variant-numeric: tabular-nums;
}
.ce-yr__select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------
   US-ONLY NHTSA DETAIL PANEL (Country Explorer, additive)
   A clearly separated surface so the NHTSA source is never mistaken
   for the IRTAD content above it.
------------------------------------------------------------ */
.ce-us[hidden] { display: none; }
.ce-us {
  margin-top: 38px;
  padding: clamp(22px, 3vw, 32px);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
}
.ce-us__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.ce-us__title {
  font-family: var(--font-primary);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: var(--weight-light);
  letter-spacing: 0.01em;
  color: var(--ink-strong);
}
/* Source pill: neutral micro-label chip (the accent is reserved). */
.ce-us__pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-variant-numeric: tabular-nums;
}
.ce-us__context { font-family: var(--font-primary); font-size: 15px; line-height: 1.6; color: var(--ink); margin-bottom: 4px; }
.ce-us__block { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.ce-us__eyebrow {
  display: block;
  font-family: var(--font-primary);
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.ce-us__lead { font-family: var(--font-primary); font-size: clamp(16px, 2vw, 19px); line-height: 1.55; color: var(--ink); }
.ce-us__note { font-family: var(--font-primary); font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin-top: 10px; max-width: 720px; }
.ce-us__subnote { font-family: var(--font-primary); font-size: 12px; line-height: 1.5; color: var(--ink-faint); margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.ce-us__chart-title {
  font-family: var(--font-primary); font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink-strong); margin: 22px 0 12px;
}
.ce-us__chart { position: relative; width: 100%; height: clamp(220px, 30vw, 300px); }
.ce-us__caption { font-family: var(--font-primary); font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); margin-top: 14px; }
.ce-us .ce-bars { margin-top: 14px; }
/* Note panel (annotation level 2). */
.ce-us__notes {
  margin-top: 24px;
  padding: 20px 20px 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--ink-soft);
  border-radius: var(--radius-sm);
}
.ce-us__caveats { margin: 0; padding: 0; list-style: none; counter-reset: uscav; }
.ce-us__caveat {
  position: relative; counter-increment: uscav; padding: 10px 0 10px 30px;
  font-family: var(--font-primary); font-size: 13px; line-height: 1.6; color: var(--ink-soft);
  border-top: 1px solid var(--line-soft);
}
.ce-us__caveat:first-child { border-top: 0; }
.ce-us__caveat::before {
  content: counter(uscav, decimal-leading-zero);
  position: absolute; left: 0; top: 10px;
  font-size: 11px; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.ce-us__source { font-family: var(--font-primary); font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); margin-top: 14px; }

@media (max-width: 560px) {
  .ce-us { padding: 18px 16px; }
}

/* ============================================================
   5. COMPARE
   ============================================================ */
.cmp { display: flex; flex-direction: column; }
.cmp-field { margin-bottom: 16px; }
.cmp-field__label {
  display: block;
  font-family: var(--font-primary);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.cmp-chips { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.cmp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 7px 6px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-panel);
}
.cmp-chip__swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.cmp-chip__name { font-family: var(--font-primary); font-size: 14px; font-weight: 500; color: var(--ink-strong); }
.cmp-chip__remove {
  width: 21px; height: 21px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(84,84,84,0.10); color: var(--ink); font-size: 15px; line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.cmp-chip__remove:hover:not(:disabled) { background: var(--ink); color: #ffffff; }
.cmp-chip__remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmp-chip__remove:disabled { opacity: 0.3; cursor: not-allowed; }
.cmp-add {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-primary); font-size: 14px; color: var(--ink-soft);
  background-color: var(--surface);
  border: 1px dashed var(--ink-faint);
  border-radius: var(--radius-pill);
  padding: 8px 36px 8px 16px; cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a7a7a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.cmp-add:hover { border-color: var(--ink-faint); color: var(--ink); }
.cmp-add:focus-visible { outline: none; border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cmp-hint { font-family: var(--font-primary); font-size: 13px; color: var(--ink-soft); margin-top: 11px; }

/* Metric toggle (shared with overview) */
.cmp-metrics { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-metric {
  font-family: var(--font-primary);
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 9px 16px; cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.cmp-metric:hover { color: var(--ink-strong); border-color: var(--ink-faint); }
.cmp-metric:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmp-metric.is-active { color: #ffffff; font-weight: 600; background: var(--ink); border-color: var(--ink); }

/* Result surface */
.cmp-result { padding: clamp(22px, 3vw, 32px); margin-top: 4px; }
.cmp-heading {
  font-family: var(--font-primary);
  font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink-strong);
  padding-bottom: 13px; border-bottom: 1px solid var(--line); margin-bottom: 24px;
}
.cmp-bars { display: flex; flex-direction: column; gap: 22px; margin-bottom: 30px; }
.cmp-bar__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 9px; }
.cmp-bar__label { font-family: var(--font-primary); font-size: 15px; font-weight: 500; color: var(--ink-strong); }
.cmp-bar__value { font-family: var(--font-primary); font-size: 14px; font-weight: 600; color: var(--ink-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmp-bar__value--na { font-weight: 400; font-size: 13px; color: var(--ink-soft); }
.cmp-bar__arrow { font-size: 0.8em; margin-right: 6px; color: var(--ink); }
/* Solid ink block with the value tight to the bar end. */
.cmp-bar__line { display: flex; align-items: center; gap: 10px; }
.cmp-bar__block { height: 24px; border-radius: 3px; background: var(--ink); flex: 0 0 auto; transform-origin: left center; }
.cmp-bar__endval { font-family: var(--font-primary); font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Faint baseline for rows without data. */
.cmp-bar__track { height: 24px; border-radius: 3px; background: transparent; overflow: hidden; }
.cmp-bar__track--empty { background: #f0f1f3; }

.cmp-dbar__track { position: relative; height: 24px; border-radius: 3px; background: #f0f1f3; }
.cmp-dbar__zero { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; margin-left: -0.5px; background: rgba(84,84,84,0.28); }
.cmp-dbar__fill { position: absolute; top: 0; bottom: 0; height: 100%; border-radius: 3px; background: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .cmp-bar__block, .cmp-dbar__fill { animation: bar-grow 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
}

.cmp-chart { position: relative; width: 100%; height: clamp(280px, 38vw, 380px); margin-bottom: 30px; }
.cmp-empty { font-family: var(--font-primary); font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

.cmp-note { background: var(--surface); border: 1px solid var(--hairline); border-left: 3px solid var(--ink-soft); border-radius: var(--radius-sm); padding: clamp(20px, 3vw, 28px); margin-bottom: 24px; }
.cmp-note__text { font-family: var(--font-primary); font-size: 15px; line-height: 1.65; color: var(--ink); }
.cmp-note__text + .cmp-note__text { margin-top: 12px; color: var(--ink-soft); }

/* Caveat panel — flat inset inside the result surface (no nested card) */
/* Note panel (annotation level 2). */
.cmp-caveats {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--ink-soft);
  border-radius: var(--radius-sm);
  padding: 20px 20px 16px;
  margin-top: 24px;
}
.cmp-caveats__eyebrow {
  display: block;
  font-family: var(--font-primary);
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.cmp-caveats__list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.cmp-caveats__item { position: relative; padding-left: 18px; font-family: var(--font-primary); font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.cmp-caveats__item::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--mark-neutral); }
.cmp-source { font-family: var(--font-primary); font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); margin-top: 18px; }

/* ============================================================
   6. OVERVIEW — map + ranking as one connected panel
   ============================================================ */
/* Single stacked column: large full-width map on top, ranking below. */
.ov {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ov > .dash-vhead { margin: 0; padding: var(--panel-pad) var(--panel-pad) calc(var(--panel-pad) - 4px); border-bottom: 1px solid var(--line); }

.ov-map {
  margin: 0;
  padding: var(--panel-pad);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.ov-map__eyebrow {
  display: block;
  font-family: var(--font-primary);
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
/* Center the choropleth and cap it so it stays readable on very wide screens. */
.ov-map__canvas { width: 100%; max-width: 1200px; margin-inline: auto; }
.ov-map__svg { display: block; width: 100%; height: auto; }
.ov-map__country {
  stroke: var(--surface);
  stroke-width: 0.5;
  transition: stroke 0.15s ease, stroke-width 0.15s ease, filter 0.15s ease;
}
.ov-map__country:hover { stroke: var(--ink); stroke-width: 1; cursor: pointer; }
/* Sync highlight when hovering a ranking row */
.ov-map__country--hl { stroke: var(--ink-strong); stroke-width: 1.4; }

.ov-map__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 20px; }
.ov-legend__scale { display: flex; align-items: center; gap: 10px; }
.ov-legend__bar { width: clamp(130px, 22vw, 220px); height: 10px; border-radius: var(--radius-pill); border: 1px solid rgba(84,84,84,0.12); }
.ov-legend__min, .ov-legend__max { font-family: var(--font-primary); font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ov-legend__caption { font-family: var(--font-primary); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.ov-legend__nodata { display: inline-flex; align-items: center; gap: 8px; }
.ov-legend__swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(84,84,84,0.14); }
.ov-legend__nodatalabel { font-family: var(--font-primary); font-size: 12px; color: var(--ink-soft); }

.ov-map__scope { font-family: var(--font-primary); font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); margin-top: 16px; max-width: 640px; }
.ov-map__scope[hidden] { display: none; }
.ov-map__mobile { display: none; font-family: var(--font-primary); font-size: 15px; line-height: 1.6; color: var(--ink); }
.ov-map__fallback { font-family: var(--font-primary); font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.ov-map__fallback[hidden] { display: none; }
.ov-map .cmp-source { margin-top: 14px; }
.ov-map__tooltip {
  position: absolute; z-index: 5; pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); padding: 8px 12px;
  font-family: var(--font-primary); font-size: 13px; color: var(--ink-strong); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ov-map__tooltip[hidden] { display: none; }

.ov-rank { padding: var(--panel-pad); min-width: 0; display: flex; flex-direction: column; }
.ov-rank .cmp-field { margin-bottom: 18px; }
.ov-summary { font-family: var(--font-primary); font-size: 14.5px; line-height: 1.6; color: var(--ink); margin-bottom: 18px; }
.ov-filters { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.ov-filter { display: flex; flex-direction: column; gap: 7px; flex: 1 1 180px; }
/* Ranking search: standard control height, capped width. */
.ov-filter--ranksearch { flex: 0 1 340px; }
.ov-filter--ranksearch .ov-search { padding: 9px 14px; }
.ov-filter__label { font-family: var(--font-primary); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.ov-search, .ov-select {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-primary); font-size: 14px; color: var(--ink-strong);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 11px 14px; outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none; -webkit-appearance: none;
}
.ov-search::placeholder { color: var(--ink-faint); }
.ov-search:focus-visible, .ov-select:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ov-selectwrap { position: relative; }
.ov-select { cursor: pointer; padding-right: 40px; }
.ov-selectwrap__chevron { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-soft); pointer-events: none; }

.ov-coverage { font-family: var(--font-primary); font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 14px; }
.ov-coverage[hidden] { display: none; }

.ov-listhead { display: flex; align-items: center; justify-content: flex-end; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.ov-sort {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: none; cursor: pointer; padding: 6px 4px;
  font-family: var(--font-primary); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); transition: color 0.15s ease;
}
.ov-sort:hover { color: var(--ink-strong); }
.ov-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ov-sort__icon { width: 15px; height: 15px; transition: transform 0.2s ease; }
.ov-sort.is-desc .ov-sort__icon { transform: rotate(180deg); }

.ov-list { margin: 0 0 22px; padding: 0; }
.ov-list[hidden] { display: none; }
.ov-row {
  display: flex; align-items: center; gap: 13px; padding: 12px 8px;
  border-bottom: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
.ov-row:last-child { border-bottom: none; }
.ov-row:hover { background: rgba(26,26,26,0.03); }
/* Fixed-width rank gutter so one and two digit ranks align. */
.ov-row__rank { flex: 0 0 26px; text-align: right; font-family: var(--font-primary); font-size: 14px; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ov-row__main { flex: 1 1 auto; min-width: 0; }
.ov-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ov-row__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-primary); font-size: 14.5px; font-weight: 500; color: var(--ink-strong); }
.ov-row__tag { margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--ink-faint); }
/* Solid neutral block, value tight to the bar end. The accent
   appears only on hover or when a row matches the ranking search. */
.ov-row__line { display: flex; align-items: center; gap: 10px; }
.ov-row__block { height: 14px; border-radius: 3px; background: var(--mark-neutral); flex: 0 0 auto; transition: background 0.15s ease; }
.ov-row__endval { font-family: var(--font-primary); font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ov-row:hover .ov-row__block,
.ov-row:focus .ov-row__block,
.ov-row--match .ov-row__block { background: var(--accent); }
.ov-empty { font-family: var(--font-primary); font-size: 15px; line-height: 1.6; color: var(--ink-soft); padding: 22px 8px 30px; }
.ov-empty[hidden] { display: none; }
.ov-rank .cmp-source { margin-top: 16px; }

/* ============================================================
   7. ABOUT THE DATA
   ============================================================ */
.stats-about { padding: clamp(24px, 3vw, 40px) clamp(24px, 4vw, 52px); max-width: none; }
/* Fill the canvas: reflow the reference sections into two columns on wide screens. */
@media (min-width: 940px) {
  .stats-about { columns: 2; column-gap: clamp(40px, 5vw, 72px); }
  .stats-about__lead { column-span: all; margin-bottom: 4px; }
  .stats-about__block { break-inside: avoid; border-top: 0; padding: 22px 0; }
  .stats-about__block:first-of-type { padding-top: 12px; }
  /* Stack the validity cells in the narrower column (avoids an empty grid cell). */
  .stats-about__grid { grid-template-columns: 1fr; }
}
.stats-about__lead { font-family: var(--font-primary); font-size: 17px; line-height: 1.7; color: var(--ink); margin-bottom: 8px; }
.stats-about__block { padding: 30px 0; border-top: 1px solid var(--line); }
.stats-about__block:first-of-type { border-top: 0; padding-top: 22px; }
.stats-about__label { font-family: var(--font-primary); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.stats-about__cite { font-family: var(--font-primary); font-size: 18px; line-height: 1.55; color: var(--ink); margin-bottom: 10px; }
.stats-about__meta-line { font-family: var(--font-primary); font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 16px; }
.stats-about__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-primary); font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.stats-about__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.stats-about__arrow { font-size: 13px; line-height: 1; }
/* Secondary, US-only source within the SOURCE block: subordinate to IRTAD. */
.stats-about__source2 { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.stats-about__source2 .stats-about__term { margin-bottom: 10px; }
.stats-about__source2 .stats-about__cite { font-size: 16px; }
/* Concise US validity line beneath the IRTAD validity table. */
.stats-about__usvalidity { margin-top: 14px; }
.stats-about__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.stats-about__cell { background: var(--surface); padding: 18px 20px; }
.stats-about__cell-label { display: block; font-family: var(--font-primary); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.stats-about__cell-value { font-family: var(--font-primary); font-size: 18px; color: var(--ink); letter-spacing: 0.01em; }
.stats-about__def + .stats-about__def { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.stats-about__term { font-family: var(--font-primary); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-strong); margin-bottom: 8px; }
.stats-about__body { font-family: var(--font-primary); font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.stats-about__caveats { margin: 0; padding: 0; counter-reset: caveat; }
.stats-about__caveat { position: relative; counter-increment: caveat; padding: 14px 0 14px 40px; font-family: var(--font-primary); font-size: 15px; line-height: 1.6; color: var(--ink); border-top: 1px solid var(--line); }
.stats-about__caveat:first-child { border-top: 0; }
.stats-about__caveat::before { content: counter(caveat, decimal-leading-zero); position: absolute; left: 0; top: 14px; font-size: 12px; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ============================================================
   8. EXPORT + SHARE CONTROLS (per view)
   ============================================================ */
.stats-exportbar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.stats-exportbar--about { margin-top: 8px; }
.ov-rank .stats-exportbar { margin-top: 18px; }
.stats-btn {
  font-family: var(--font-primary);
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 9px 16px; cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.stats-btn:hover { border-color: var(--ink-faint); background: var(--canvas); color: var(--ink); }
.stats-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stats-btn[hidden] { display: none; }

/* Export menu: secondary trigger opening a small option list.
   The list is a floating overlay, so a functional shadow is allowed. */
.stats-menu { position: relative; display: inline-flex; }
.stats-menu__list {
  position: absolute;
  z-index: 25;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stats-menu__list[hidden] { display: none; }
.stats-menu__item {
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: background 0.15s ease;
}
.stats-menu__item:hover { background: var(--canvas); }
.stats-menu__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ============================================================
   9. DATA TABLE
   ============================================================ */
.dt { display: flex; flex-direction: column; }
/* One clean horizontal row: search, then the aligned control cluster. */
.dt-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.dt-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 220px; }
.dt-filters .ov-filter { flex: 1 1 200px; }
/* Single-line search: the stacked label is kept for assistive tech only. */
.dt-filters .ov-filter__label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.dt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* Inline the export buttons into the row (drop the bottom-bordered bar styling). */
.dt-controls #dt-exportbar { margin: 0; padding: 0; border-top: 0; gap: 10px; }
.dt-cols { position: relative; }
.dt-cols__summary {
  list-style: none; cursor: pointer;
  font-family: var(--font-primary); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 9px 16px;
}
.dt-cols__summary::-webkit-details-marker { display: none; }
.dt-cols__summary:hover { border-color: var(--ink-faint); }
.dt-cols[open] .dt-cols__summary { border-color: var(--ink); background: var(--ink); color: #ffffff; }
.dt-cols__menu {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: 280px; max-height: 340px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: 10px; display: flex; flex-direction: column; gap: 2px;
}
.dt-colopt { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-primary); font-size: 14px; color: var(--ink-strong); }
.dt-colopt:hover { background: var(--surface-sunk); }
.dt-colopt input { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }

/* Result count in the unified micro-label voice. */
.dt-count {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}

.dt-scroll {
  overflow: auto;
  max-height: clamp(420px, 60vh, 760px);
  -webkit-overflow-scrolling: touch;
  /* Right-edge scroll affordance: a hairline shadow that a local
     white cover hides once the table is scrolled fully right. */
  background:
    linear-gradient(to left, var(--surface), var(--surface)) right center / 16px 100% no-repeat local,
    linear-gradient(to left, rgba(16, 24, 40, 0.10), rgba(16, 24, 40, 0)) right center / 14px 100% no-repeat scroll;
}
.dt-table { border-collapse: separate; border-spacing: 0; width: 100%; font-family: var(--font-primary); font-size: 13.5px; color: var(--ink); }
.dt-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line);
  white-space: nowrap; vertical-align: bottom;
}
.dt-th { padding: 0; text-align: right; }
.dt-th--text { text-align: left; }
.dt-th__btn {
  display: inline-flex; align-items: center; gap: 6px; width: 100%; justify-content: flex-end;
  background: transparent; border: none; cursor: pointer; padding: 12px 14px;
  font-family: var(--font-primary); font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ink-soft); transition: color 0.15s ease;
}
.dt-th--text .dt-th__btn { justify-content: flex-start; }
.dt-th__btn:hover { color: var(--ink-strong); }
.dt-th__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dt-th.is-sorted .dt-th__btn { color: var(--ink); }
.dt-th__icon { font-size: 9px; }
/* Inactive sortable headers: glyph appears only on hover/focus. */
.dt-th:not(.is-sorted) .dt-th__icon { opacity: 0; }
.dt-th:not(.is-sorted) .dt-th__btn:hover .dt-th__icon,
.dt-th:not(.is-sorted) .dt-th__btn:focus-visible .dt-th__icon { opacity: 0.45; }

.dt-cell { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dt-cell--text, .dt-cell--enum, .dt-cell--country { text-align: left; font-variant-numeric: normal; }
.dt-cell--country { font-weight: 600; color: var(--ink-strong); }
.dt-cell--muted { color: var(--ink-faint); }
.dt-tag { margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--ink-faint); }
.dt-table tbody tr:last-child .dt-cell { border-bottom: none; }
.dt-row:hover .dt-cell { background: rgba(26,26,26,0.025); }

/* Sticky first column (Country) for horizontal scroll */
.dt-table thead .dt-th:first-child { position: sticky; left: 0; top: 0; z-index: 4; background: var(--surface-sunk); box-shadow: 1px 0 0 var(--hairline); }
.dt-cell--country { position: sticky; left: 0; z-index: 2; background: var(--surface); box-shadow: 1px 0 0 var(--hairline); }
.dt-row:hover .dt-cell--country { background: var(--canvas); }

/* Status column: compact check glyph (word stays for AT + exports). */
.dt-status-check { font-size: 14px; font-weight: 600; color: var(--ink-soft); }

.dt-empty { padding: 28px 4px 10px; }
.dt-empty__title { font-family: var(--font-primary); font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.dt-empty__reset {
  background: transparent;
  border: none;
  padding: 2px 0;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.dt-empty__reset:hover { color: var(--ink-soft); }
.dt-empty__reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dt-empty[hidden] { display: none; }
.dt .cmp-source { margin-top: 16px; }

/* ============================================================
   10. DESKTOP (>=1024px) — rail + canvas grid, natural page scroll.
   The rail sticks under the nav; the docked bar stays at the bottom.
   ============================================================ */
@media (min-width: 1024px) {
  /* minmax(0,1fr) prevents the wide data table from blowing out the track.
     A single 1fr row makes the columns fill the container on a short view and
     grow to content on a tall one, so the rail track is always full height. */
  .stats-views {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: stretch;
  }

  /* The lighter surface lives on the rail TRACK and stretches to the full row
     height (top of the rail, including the logo, down to the docked bar's top
     edge). The previous version put it on a content-sized, align-self:start
     element, so it stopped just below the last tab and exposed the backdrop. */
  .stats-rail {
    position: static;
    align-self: stretch;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  /* The logo + tablist pin under the nav while the full-height surface scrolls
     behind them. The safety cap lets the content scroll on very short viewports
     instead of sliding under the bar. */
  .stats-rail__inner {
    position: sticky;
    top: var(--nav-height);
    max-height: calc(100vh - var(--nav-height) - var(--bar-h));
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .rail-logo { max-height: none; }   /* fill the rail width on desktop */
  .stats-tabs { flex-direction: column; gap: 3px; padding: 18px 14px; overflow-x: visible; }
  .stats-tab { width: 100%; padding: 11px 14px; }
  .stats-tab[aria-selected="true"]::before {
    content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--accent);
  }

  /* The docked bar mirrors the page's two columns: the logo sits over the rail,
     and the control cluster starts at the canvas content edge, which is exactly
     the rail width plus the stage inset (same tokens the canvas uses). */
  .dash-bar { padding-left: 0; padding-right: 0; }
  .dash-bar__row {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    align-items: center;
    gap: 0;
  }
  .dash-bar__id { padding-left: var(--stage-pad); }
  .dash-bar__main {
    display: flex;
    align-items: center;
    gap: 10px 16px;
    min-width: 0;
    padding-left: var(--stage-pad);
    padding-right: clamp(14px, 2.4vw, 30px);
  }
  .dash-context {
    padding-left: calc(var(--rail-w) + var(--stage-pad));
    padding-right: clamp(14px, 2.4vw, 30px);
  }
}

/* ============================================================
   11. RESPONSIVE (tablet + phone, natural flow)
   ============================================================ */
@media (max-width: 760px) {
  /* Docked bar: id + search + export share the first row; the three filters
     drop to a compact horizontally scrollable row below. */
  .dash-bar__row { gap: 8px 10px; }
  .dash-bar__id { flex: 0 0 auto; }
  .dash-bar__search { flex: 1 1 130px; min-width: 120px; }
  .dash-bar__actions { margin-left: auto; }
  .dash-bar__filters {
    order: 2;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .dash-bar__filters::-webkit-scrollbar { display: none; }
  .dash-bar__filters .ov-filter { flex: 0 0 auto; }

  .dt-controls { align-items: stretch; }
  .dt-filters { flex: 1 1 100%; }
  .dt-cols__menu { width: min(280px, 82vw); }

  /* Map is not usefully tappable at phone size; direct to the ranking. */
  .ov-map__canvas,
  .ov-map__legend,
  .ov-map__scope,
  .ov-map__fallback,
  .ov-map__tooltip { display: none !important; }
  .ov-map__mobile { display: block; }
  .ov-map { border-bottom: 1px solid var(--line); }
}

@media (max-width: 560px) {
  .stats-tab__label { font-size: 12.5px; }
  .stats-about__cite { font-size: 17px; }

  .ce-selector { max-width: none; }
  .ce-band { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ce-stat { padding: 15px 16px; }
  .ce-bar__label { font-size: 13.5px; }

  .cmp-metric { padding: 9px 13px; }
  .cmp-bar__label { font-size: 14px; }
  .cmp-bar__value { font-size: 13px; }

  .ov-filter { flex: 1 1 100%; }
  .ov-row { gap: 11px; padding: 12px 4px; }
  .ov-row__rank { flex-basis: 24px; font-size: 13px; }

  .stats-btn { font-size: 11px; padding: 8px 13px; }
  .dash-bar__filters { gap: 6px; }
  .dash-bar__filters .ov-select { font-size: 12.5px; padding: 7px 28px 7px 12px; }
  .dt-filters { flex: 1 1 100%; }
  .dt-table { font-size: 13px; }
}

@media (max-width: 380px) {
  .ce-band { grid-template-columns: 1fr; }
}