/* Car or Driver — the tokens and the parts that the front page's panels are made of (chart frame, controls, charts, tables, the Methodology's text
   and diagrams). The front page itself, the panel's metal and the cards of slides are in stage.css, which pins its own colours on the panel and the
   cards; the tokens here are what a part falls back to. The data colours are the eight-slot categorical palette (docs/design.md). */
:root {
  color-scheme: light;
  --surface: #fffdf8;
  --surface-raised: #ffffff;
  --ink: #121629;
  --ink-2: #454a63;
  --ink-3: #5b6079;
  --grid: #e8e2d4;
  --rule: #cfc8b6;
  --border: rgb(18 22 41 / 0.12);
  --wash: rgb(18 22 41 / 0.05);
  --accent: #d93a1c;
  --accent-text: #b92d11;
  --accent-wash: rgb(217 58 28 / 0.09);
  --on-accent: #ffffff;
  --pos: #0b6b3a;
  --neg: #b4262a;
  /* categorical slots 1-8 (chart marks only, never text) */
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --s5: #e87ba4;
  --s6: #008300;
  --s7: #6250d6;
  --s8: #e34948;
  --radius: 10px;
  --radius-large: 16px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow: 0 10px 30px rgb(18 22 41 / 0.14);
  --shadow-frame: 0 1px 2px rgb(18 22 41 / 0.04), 0 8px 24px rgb(18 22 41 / 0.05);
}

* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  color: var(--ink);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: inherit;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: currentColor;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
::selection {
  background: var(--accent-wash);
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}
p {
  margin: 0 0 12px;
}
p:last-child {
  margin-bottom: 0;
}
h1,
h2,
h3 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: -9999px;
  z-index: 200;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
}
.skip-link:focus {
  left: 8px;
}

section {
  min-width: 0;
}

/* ── Chart frame (the unit every public chart lives in) ─── */
.frame {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  background: var(--surface);
  box-shadow: var(--shadow-frame);
}
.frame-head {
  padding: 22px 24px 4px;
}
.frame-title {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.frame-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 20px;
  padding: 16px 24px 0;
}
.frame-tools .spacer {
  margin-left: auto;
}
.segmented button:disabled {
  color: var(--ink-3);
  cursor: not-allowed;
}
.frame-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 14px 24px 18px;
  border-top: 1px solid var(--grid);
  margin-top: 8px;
}
.notes {
  max-width: 78ch;
  margin: 0;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.6;
}

/* controls */
.field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 550;
}
label {
  display: grid;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
}
input,
select,
button {
  min-width: 0;
  max-width: 100%;
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
}
input,
select {
  width: 100%;
}
select {
  text-overflow: ellipsis;
  cursor: pointer;
}
select:not([multiple]) {
  padding-right: 26px;
}
input::placeholder {
  color: var(--ink-3);
}
input[type='number'] {
  width: 110px;
  font-variant-numeric: tabular-nums;
}
input[type='search'] {
  appearance: none;
}
input[type='file'] {
  padding: 6px;
  font-size: 12px;
}
input::file-selector-button {
  margin-right: 8px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--wash);
  color: var(--ink);
  cursor: pointer;
}
input[type='checkbox'] {
  flex: none;
  width: 15px;
  height: 15px;
  min-height: 0;
  padding: 0;
  accent-color: var(--ink);
}
select[multiple] {
  padding: 4px;
}
button {
  cursor: pointer;
  font-weight: 550;
}
button:hover:not(:disabled) {
  border-color: var(--ink-3);
  background: var(--wash);
}
button:disabled,
input:disabled,
select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover:not(:disabled) {
  border-color: var(--accent-text);
  background: var(--accent-text);
}
.btn-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
}

.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--wash);
}
.segmented button {
  min-height: 30px;
  padding: 3px 14px;
  border-radius: 999px;
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
}
.segmented button[aria-pressed='true'],
.segmented button[aria-selected='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}
.segmented button[aria-pressed='true']:hover:not(:disabled) {
  background: var(--ink-2);
}

/* ── Timeline (race-weekend scrubber) ───────────────────── */
.timeline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 14px;
  padding: 10px 24px 4px;
}
.play {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
}
.play:hover:not(:disabled) {
  background: var(--ink-2);
  border-color: var(--ink-2);
}
.play svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.scrub {
  position: relative;
  padding-top: 18px;
}
.scrub input[type='range'] {
  display: block;
  width: 100%;
  min-height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}
.scrub input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--rule);
}
.scrub input[type='range']::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--rule);
}
.scrub input[type='range']::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
  appearance: none;
}
.scrub input[type='range']::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.scrub-now {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  padding: 1px 7px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--surface);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.timeline-pickers {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: 8px;
}
.timeline-pickers select {
  min-width: 0;
}

/* ── SVG charts, legend, tooltip ───────────────────────── */
svg.chart,
.frame svg {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  background: transparent;
  font-family: var(--font);
}
.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin: 10px 0 0;
  padding: 0 12px;
  font-size: 13px;
}
.key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 0 2px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.key:hover:not(:disabled) {
  background: var(--wash);
}
.key i {
  width: 16px;
  height: 0;
  border-top: 3px solid var(--c, var(--ink));
  border-radius: 2px;
}
.key[aria-pressed='false'] {
  color: var(--ink-3);
  text-decoration: line-through;
}
.key[aria-pressed='false'] i {
  opacity: 0.35;
}

#chartValueTooltip {
  position: fixed;
  z-index: 10000;
  max-width: min(320px, 90vw);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 13px;
  line-height: 1.45;
  pointer-events: none;
  white-space: normal;
}
#chartValueTooltip.plain {
  white-space: pre-line;
}
#chartValueTooltip .tip-head {
  margin-bottom: 6px;
  color: var(--ink-3);
  font-size: 12px;
}
#chartValueTooltip .tip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 0;
}
#chartValueTooltip .tip-row i {
  flex: none;
  width: 12px;
  border-top: 3px solid var(--c, var(--ink));
  border-radius: 2px;
}
#chartValueTooltip .tip-row b {
  min-width: 52px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#chartValueTooltip .tip-row span {
  color: var(--ink-2);
}
[data-chart-target]:focus-visible,
svg:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ── Tables ────────────────────────────────────────────── */
.scroll {
  max-width: 100%;
  max-height: 600px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  -webkit-overflow-scrolling: touch;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
caption {
  padding: 0 0 10px;
  color: var(--ink-3);
  font-size: 12px;
  text-align: left;
}
th,
td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--grid);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
th:first-child,
td:first-child {
  text-align: left;
}
th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 650;
  border-bottom-color: var(--rule);
}
tbody th {
  position: static;
  color: var(--ink);
  font-size: 13px;
  font-weight: 550;
  text-align: left;
}
tbody tr:hover {
  background: var(--wash);
}
.table-wrap {
  padding: 8px 24px 0;
}
.table-wrap table td.left,
.table-wrap table th.left {
  text-align: left;
}

/* ratings chart rows */

/* ── Method ────────────────────────────────────────────── */

.glossary {
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 20px;
}
.glossary dt {
  font-weight: 650;
}
.glossary dd {
  margin: 0;
  color: var(--ink);
}
.method-part {
  scroll-margin-top: 72px;
}
.method-part + .method-part {
  margin-top: 44px;
  padding-top: 8px;
  border-top: 1px solid var(--grid);
}
.method-chart {
  margin: 8px -12px 0;
}

/* Overview diagram: the stages of the pipeline, stacked, with captioned links between them. */
.flow {
  margin: 18px 0 8px;
}
.flow-caption {
  margin-bottom: 10px;
  color: var(--ink-2);
  font-size: 13px;
}
.flow-stages {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow-stage {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--wash);
}
.flow-stage p {
  margin: 0 0 6px;
  font-size: 14px;
}
.flow-stage p:last-child {
  margin-bottom: 0;
}
.flow-step {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-size: 12px !important;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.flow-step a {
  color: var(--ink-3);
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
}
.flow-site {
  border-left: 4px solid var(--accent);
}
.flow-test {
  border-style: dashed;
}
.flow-where {
  color: var(--accent-text);
  font-size: 12px !important;
  font-weight: 650;
}
.flow-link {
  position: relative;
  margin: 0;
  padding: 8px 0 8px 22px;
  border-left: 2px solid var(--rule);
  margin-left: 24px;
  color: var(--ink-3);
  font-size: 12.5px;
  list-style: none;
}
.flow-link::after {
  position: absolute;
  bottom: -2px;
  left: -7px;
  color: var(--rule);
  font-size: 12px;
  line-height: 1;
  content: '▼';
}
.flow-link-test {
  border-left-style: dashed;
}
.flow-pair,
.flow-outputs {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 8px;
}
.flow-outputs {
  flex-wrap: wrap;
}
.flow-box {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  min-width: 150px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13px;
}
.flow-box span {
  color: var(--ink-2);
}
.flow-arrow {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--ink-3);
  font-size: 12px;
}
.flow-arrow span::after {
  content: ' →';
}
.math {
  font-family: var(--mono);
  font-size: 13px;
}
.math.block {
  display: block;
  margin: 14px 0;
  padding: 2px 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.math.typeset {
  font-family: inherit;
  font-size: inherit;
}
.math.block.typeset {
  font-size: 1.05em;
}
.params {
  width: 100%;
  font-size: 13px;
}
.params .group th {
  padding-top: 18px;
  color: var(--ink-2);
  font-size: 12px;
  text-align: left;
}
.params td,
.params th {
  vertical-align: top;
}
.formula {
  margin: 12px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--wash);
  font: 13px/1.85 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 18px 0 8px;
  border-top: 1px solid var(--grid);
}
.stats > div {
  padding: 14px 20px 6px 0;
}
.stats dt {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 550;
}
.stats dd {
  margin: 2px 0 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.stats dd small {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 450;
  letter-spacing: 0;
}

/* ── Forms ─────────────────────────────────────────────── */

h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}

.controls {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}

.controls > label {
  flex: 0 1 auto;
}

summary {
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

/* ── Small screens ─────────────────────────────────────── */

@media (max-width: 860px) {
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .frame-head,
  .frame-tools,
  .frame-foot,
  .timeline,
  .table-wrap {
    padding-left: 14px;
    padding-right: 14px;
  }
  .frame-head {
    padding-top: 16px;
  }
  .frame-title {
    font-size: 19px;
  }
  .legend {
    padding-inline: 4px;
  }
  .glossary {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .flow-pair {
    flex-direction: column;
  }
  .flow-arrow {
    justify-content: center;
  }
  .flow-arrow span::after {
    content: ' ↓';
  }
  .glossary dd {
    margin-bottom: 10px;
  }
  .controls > label {
    flex: 1 1 140px;
  }
  .controls input[type='number'] {
    width: 100%;
  }

  .play {
    width: 40px;
    height: 40px;
  }
  th,
  td {
    padding: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ── Selection bar (ratings: pick entries, then compare) ── */
.selection-bar {
  position: sticky;
  bottom: 12px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 12px 16px 0;
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}
.selection-names {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.selection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.method-figure {
  margin: 18px 0 8px;
}
.method-figure figcaption {
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 12.5px;
}
.method-figure-box {
  min-width: 0;
}

/* The summary and the date at the head of the privacy notice */
.legal-summary {
  margin: 4px 0 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--wash);
}
.legal-date {
  color: var(--ink-3);
  font-size: 13px;
}

/* Citations in the Methodology and the reference list */
.cite {
  font-size: 0.85em;
  text-decoration: none;
  vertical-align: baseline;
}
.references {
  padding-left: 28px;
}
.references li {
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}