@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-serif-4-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-serif-4-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cathy's Car Search
   Warm neutral palette, Source Serif 4 for headings, Inter for data. */

:root {
  --bg: #FAF9F5;
  --surface: #FFFFFF;
  --ink: #141413;
  --ink-2: #3D3D3A;
  --muted: #6B6A64;
  --line: #E6E3D9;
  --track: #EEEBE3;
  --bar: #4A4945;
  --accent: #C2603E;
  --accent-ink: #A34A2A;
  --accent-soft: #F6E6DE;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 24px;
  --col-min: 220px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1C1B19;
    --surface: #262522;
    --ink: #F3F1EA;
    --ink-2: #D8D5CC;
    --muted: #A3A097;
    --line: #383631;
    --track: #33312D;
    --bar: #BDBAB1;
    --accent: #E0896A;
    --accent-ink: #EBA287;
    --accent-soft: #3A2A23;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Masthead */

.masthead,
.footer,
main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.masthead { padding-top: 56px; padding-bottom: 32px; }

.eyebrow {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

h1, .row-title, .car-name { text-wrap: balance; }
.lede, .sub, .lead, .row-note, .notice { text-wrap: pretty; }

h1 {
  margin: 0;
  font: 400 clamp(34px, 5vw, 52px)/1.1 var(--serif);
  letter-spacing: -0.01em;
}

.lede {
  max-width: 60ch;
  margin: 16px 0 0;
  color: var(--ink-2);
  font-size: 18px;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 14px;
}

.legend li { display: flex; align-items: center; gap: 8px; }

.swatch {
  width: 28px;
  height: 10px;
  border-radius: 2px 4px 4px 2px;
  background: var(--bar);
}

.swatch-best { background: var(--accent); }

.notice {
  max-width: 70ch;
  margin: 24px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14px;
}

/* Comparison grid */

.compare {
  display: grid;
  grid-template-columns: repeat(4, minmax(var(--col-min), 1fr));
}

.cell {
  min-width: 0;
  padding: 12px 16px 6px;
  border-left: 1px solid var(--line);
}

.cell.c0 { border-left: 0; padding-left: 0; }
.cell.c3 { padding-right: 0; }

/* Car name row: stays in view while scrolling down */

.head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-top: 16px;
  padding-bottom: 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.role {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.car-name {
  margin: 0;
  font: 600 22px/1.2 var(--serif);
}

.trim {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.seg {
  display: inline-flex;
  margin-top: 10px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.seg button {
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: 500 13px/1.4 var(--sans);
  cursor: pointer;
}

.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Photos */

.photo-cell { padding-top: 20px; padding-bottom: 8px; }

.photo {
  margin: 0;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface);
}

.photo img { width: 100%; height: 100%; object-fit: contain; }
.photo svg { width: 78%; height: auto; }

.photo-credit {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}

/* Metric rows */

.row-label {
  grid-column: 1 / -1;
  margin-top: 28px;
  padding: 16px 0 4px;
  border-top: 1px solid var(--line);
}

.row-label > div:first-child {
  position: sticky;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  width: max-content;
  max-width: calc(100vw - 2 * var(--gutter));
}

.row-title { margin: 0; font: 600 20px/1.3 var(--serif); }
.row-note { color: var(--muted); font-size: 13px; }

.figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  min-height: 34px;
}

.num { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.unit { color: var(--muted); font-size: 13px; }

.best .num { color: var(--accent-ink); }

.pill {
  align-self: center;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

/* Bars */

.bar {
  height: 10px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--track);
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--bar);
}

.best .bar span { background: var(--accent); }

/* Year pips */

.pips { display: flex; gap: 3px; margin-top: 8px; }

.pips i {
  flex: 1;
  height: 10px;
  border-radius: 2px;
  background: var(--track);
}


/* Stars */

.stars { display: flex; gap: 2px; margin-top: 2px; color: var(--ink-2); }
.stars svg { width: 22px; height: 22px; }
.best .stars { color: var(--accent); }

/* Features */

.features { margin: 8px 0 0; padding: 0; list-style: none; font-size: 14px; }

.features li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.features svg { flex: none; width: 16px; height: 16px; }
.features .yes svg { color: var(--ink); }
.best .features .yes svg { color: var(--accent); }
.features .no { color: var(--muted); }

/* Missing values */

.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--track);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.chip-tbc {
  border: 1px dashed var(--muted);
  background: transparent;
  font-size: 12px;
  padding: 1px 8px;
}

.cell > .chip { margin-top: 6px; }

/* Footer */

.footer {
  margin-top: 56px;
  padding-top: 24px;
  padding-bottom: 48px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.footer p { margin: 0 0 4px; }

/* Narrow screens: scroll the table sideways, one car at a time */

@media (max-width: 960px) {
  :root { --gutter: 16px; --col-min: 72vw; }

  .masthead { padding-top: 32px; }

  .scroller {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    scroll-padding: 0 var(--gutter);
  }

  .compare { width: max-content; grid-template-columns: repeat(4, var(--col-min)); }
  .cell.c0, .cell.c1, .cell.c2, .cell.c3 { scroll-snap-align: start; }
  .head { position: static; }
}

@media (max-width: 960px) and (min-width: 600px) {
  :root { --col-min: 300px; }
}

/* Additions for the researched data */

.photo img.fit-cover { object-fit: cover; }
.photo img.fit-contain { padding: 6%; }

.features .unknown { color: var(--muted); font-style: italic; }
.features-key { margin: 6px 0 0; color: var(--muted); font-size: 12px; }

.sources summary {
  color: var(--ink-2);
  font-size: 14px;
  cursor: pointer;
}

.sources ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.6; }
.sources a { color: var(--ink-2); text-underline-offset: 2px; overflow-wrap: anywhere; }
.sources a:hover { color: var(--accent-ink); }

/* Slider panels on the calculated rows */

.controls {
  position: sticky;
  left: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px 28px;
  width: 100%;
  margin-top: 12px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: 14px;
}

.slider { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.slider-head { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-2); }
.slider-head output { color: var(--ink); font-weight: 600; white-space: nowrap; }

.slider input { width: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
.slider input:disabled { cursor: not-allowed; }
.slider.is-off .slider-head output { color: var(--muted); }

.slider-ends { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }

.controls-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.check { display: flex; align-items: center; gap: 8px; color: var(--ink-2); cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

.reset {
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: 500 13px/1.4 var(--sans);
  cursor: pointer;
}

.reset:hover { border-color: var(--muted); color: var(--ink); }
.slider input:focus-visible, .check input:focus-visible, .reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A calculated line under a figure, e.g. the monthly repayment */
.lead { margin: 6px 0 0; color: var(--ink); font-size: 14px; font-weight: 500; }
.lead.warn { color: var(--accent-ink); }

/* Partly filled warranty pips and the "years you keep it" marker */
.pips { position: relative; }
.pips i { background: linear-gradient(to right, var(--bar) var(--f, 0%), var(--track) 0); }
.best .pips i { background: linear-gradient(to right, var(--accent) var(--f, 0%), var(--track) 0); }
.pips .keep {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--ink);
}

/* Comparison car picker: the select reads as the car's name */
.select-wrap { position: relative; display: block; }

.select-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}

.car-select {
  width: 100%;
  padding: 4px 34px 4px 10px;
  margin-left: -10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: 600 20px/1.3 var(--serif);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-overflow: ellipsis;
}

.car-select:hover { border-color: var(--muted); }
.car-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.car-select option, .car-select optgroup { font: 400 15px var(--sans); }

@media (max-width: 960px) {
  .controls { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); width: calc(100vw - 2 * var(--gutter)); }
}

.controls-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 13px; }

/* NCAP | C-NCAP row: two agencies side by side in each cell */
.agencies { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.agency { min-width: 0; padding-left: 10px; border-left: 2px solid var(--line); }
.agency-name { margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.agency .stars svg { width: 16px; height: 16px; }
.agency .stars { align-items: center; color: var(--ink-2); }
.plus { margin-left: 2px; color: var(--ink-2); font-size: 14px; }
.agency .sub { font-size: 12px; }
.rating-details { margin-top: 8px; font-size: 13px; }
.rating-details summary { color: var(--ink-2); cursor: pointer; }
.rating-details p { margin: 6px 0 0; color: var(--muted); line-height: 1.45; }

/* Keyboard focus on disclosures and source links */
.sources summary:focus-visible, .rating-details summary:focus-visible, .sources a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Wide screens: every column gets the same content width, so equal values
   draw equal bars and the photos match in size. The outer columns used to
   lose their outer padding and so ran 16px wider. */
@media (min-width: 961px) {
  .compare { margin-inline: -16px; }
  .cell.c0 { padding-left: 16px; border-left: 1px solid transparent; }
  .cell.c3 { padding-right: 16px; }
  .row-label { margin-inline: 16px; }

  /* Keep the header rule flush with the text edge, not the outdented grid */
  .head {
    border-bottom: 0;
    background-image: linear-gradient(var(--line), var(--line));
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: left bottom;
  }
  .head.c0 { background-size: calc(100% - 16px) 1px; background-position: right bottom; }
  .head.c3 { background-size: calc(100% - 16px) 1px; }
}

/* Phones: larger tap targets on the model toggle and reset buttons */
@media (max-width: 600px) {
  .seg button { padding: 8px 14px; }
  .reset { padding: 8px 16px; }
}