/* ==========================================================================
   EV Journey Calculator

   Every colour below is checked against its background for WCAG AA (4.5:1):
   ink 17.5, muted 5.2, faint 4.6, green 8.9, petrol 4.8, diesel 5.6,
   white-on-green 9.3. Do not lighten any of them without re-checking.
   ========================================================================== */

/* Self-hosted so the app renders correctly offline and makes no third-party
   request. Both faces are SIL Open Font Licence — see fonts/OFL.txt. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-var-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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

/* Dark is the application. The light palette is kept below, dormant behind
   [data-theme="light"], with no toggle in the interface — it costs nothing to
   keep and is one attribute away if it is ever wanted.

   Every colour is checked against its background for WCAG AA (4.5:1):
   ink 17.1, muted 7.7, faint 5.9, green 10.3, petrol 7.3, diesel 8.8,
   ink-on-green 10.3. Do not darken any of them without re-checking. */

:root {
  --paper: #0E0E0C;
  --card: #171714;
  --ink: #F3F1EA;
  --muted: #A7A497;
  --faint: #918E80;
  --rule: #2A2925;
  --well: #211F1B;
  --well-line: rgba(255,255,255,0.09);
  --well-line-hover: rgba(255,255,255,0.18);
  --contour: rgba(255,255,255,0.05);

  --green: #4FD3A0;
  --on-green: #0E0E0C;
  --green-soft: #15251E;
  --green-line: #21463A;
  --petrol: #E0895C;
  --diesel: #9FB4D8;

  /* Chart marks. Validated as a categorical trio against the dark surface:
     lightness band, chroma floor, CVD separation, normal-vision separation
     (worst adjacent pair delta-E 19.6) and contrast all pass. These are the
     mark colours; the lighter --green above is the interface accent. */
  --mark-ev: #2BA87B;
  --mark-petrol: #C87F2C;
  --mark-diesel: #5589DB;

  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -12px rgba(0,0,0,0.6);
  --r-card: 18px;
  --r-field: 11px;

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

:root[data-theme="light"] {
  --paper: #FBFAF8;
  --card: #FFFFFF;
  --ink: #16150F;
  --muted: #6B6A60;
  --faint: #767362;
  --rule: #E8E4D8;
  --well: #F4F2EA;
  --well-line: rgba(22,21,15,0.12);
  --well-line-hover: rgba(22,21,15,0.26);
  --contour: rgba(22,21,15,0.06);

  --green: #0E5139;
  --on-green: #FFFFFF;
  --green-soft: #EAF1ED;
  --green-line: #CBDDD4;
  --petrol: #A85A32;
  --diesel: #46536B;
  --mark-ev: #1C7F5C;
  --mark-petrol: #A5651F;
  --mark-diesel: #3C6FBF;

  --shadow: 0 1px 2px rgba(22,21,15,0.04), 0 8px 24px -12px rgba(22,21,15,0.12);
}

/* The form controls should render their own chrome to match. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

html { background: var(--paper); }

/* Film grain. Sits above the background, below everything else, ignores input. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}
.hero, .sheet, .update { position: relative; z-index: 1; }

body {
  /* A flat fill reads as a slab. A warm bloom under the header carries the
     photograph's light down into the page, and a little grain stops the dark
     surface looking like plastic. Both are barely perceptible on purpose. */
  background:
    /* Contour lines. Wide, faint concentric rings drawn from two off-page
       centres, so they read as quiet structure in the margins rather than as
       decoration. Barely visible by design — if you notice them, they are too
       strong. */
    repeating-radial-gradient(circle at 6% 24%,
      transparent 0 176px, var(--contour) 176px 177px, transparent 177px 354px),
    repeating-radial-gradient(circle at 104% 74%,
      transparent 0 208px, var(--contour) 208px 209px, transparent 209px 420px),
    radial-gradient(130% 52% at 50% 0%, rgba(255,206,150,0.055) 0%, transparent 62%),
    linear-gradient(180deg, #16150F 0%, var(--paper) 420px),
    var(--paper);
  background-attachment: fixed;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Shown only when js/app.js never ran — see index.html. */
.boot {
  margin: 0; padding: 18px max(18px, env(safe-area-inset-left));
  background: var(--petrol-soft);
  border-bottom: 1px solid var(--petrol);
  color: var(--ink); font-size: 13.5px; line-height: 1.55;
}
.boot p + p { margin-top: 7px; color: var(--muted); }
.boot code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; background: var(--well);
  padding: 1px 5px; border-radius: 4px; color: var(--ink);
}

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2.1 / 1;
  max-height: 42vh;
  overflow: hidden;
  background: #0B0B09;
}

.hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 50%;   /* keeps the charge port in frame as it narrows */
}

/* Scrim only on the left, where the title sits. The right stays untouched
   so the photograph is not flattened. */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(8,8,6,0.88) 0%, rgba(8,8,6,0.62) 34%, rgba(8,8,6,0.10) 62%, transparent 78%),
    linear-gradient(to top, rgba(8,8,6,0.55) 0%, transparent 42%);
}

.hero-text {
  position: absolute;
  left: max(20px, env(safe-area-inset-left));
  right: 34%;
  bottom: 42px;
  z-index: 1;
}

.hero-text h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 11vw, 52px);
  line-height: 0.98;
  letter-spacing: -0.012em;
  color: #FDFCF9;
}

.hero-text p {
  margin-top: 9px;
  font-size: 13.5px;
  letter-spacing: 0.005em;
  color: rgba(253,252,249,0.78);
}

/* ------------------------------------------------------------------ sheet */

.sheet {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: -22px auto 0;
  padding: 26px max(18px, env(safe-area-inset-left)) calc(56px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-right));
  background: var(--paper);
  border-radius: 22px 22px 0 0;
}

.group { margin-bottom: 20px; }

.group > h2 {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 0 0 9px 3px;
}

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  /* A hairline of light along the top edge lifts the card off the page. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), var(--shadow);
  overflow: hidden;
}
:root[data-theme="light"] .card { box-shadow: var(--shadow); }

/* A card that contains a popup cannot clip its own children, or the dropdown is
   cut off at the card's edge. The last child then has to round its own corners,
   since the card is no longer doing it. */
.card.has-popup { overflow: visible; }
.card.has-popup > .note,
.card.has-popup > .err:last-child {
  border-bottom-left-radius: calc(var(--r-card) - 1px);
  border-bottom-right-radius: calc(var(--r-card) - 1px);
}

/* ------------------------------------------------------------------- rows */

.row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
}
.row:last-child { border-bottom: 0; }

.row .ico {
  flex-shrink: 0;
  width: 19px; height: 19px;
  color: var(--faint);
}
.row .ico svg { display: block; width: 100%; height: 100%; }
.row[data-fuel="petrol"] .ico { color: var(--petrol); }
.row[data-fuel="diesel"] .ico { color: var(--diesel); }

.row > label, .row .rl {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: var(--ink);
}
.row .rl small {
  display: block;
  font-size: 12px;
  color: var(--faint);
  margin-top: 1px;
}

/* Everything editable carries the same visible outline and inset, so it is
   obvious at a glance which parts of a row can be typed into. Before, the
   wells were a shade off the card and easy to miss. */
.field {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  background: var(--well);
  border: 1px solid var(--well-line);
  border-radius: var(--r-field);
  padding: 7px 11px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.22);
  cursor: text;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
:root[data-theme="light"] .field { box-shadow: inset 0 1px 2px rgba(22,21,15,0.05); }
.field:hover { border-color: var(--well-line-hover); }
.field:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}
.field[data-invalid="true"] { border-color: var(--petrol); }
.field[data-invalid="true"]:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--petrol) 18%, transparent);
}

.field input {
  width: 4.4ch;
  border: 0; outline: 0; padding: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;         /* 16px stops iOS zooming on focus */
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
  appearance: none; -webkit-appearance: none; -moz-appearance: textfield;
}
.field input::-webkit-outer-spin-button,
.field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field input.w5 { width: 5.4ch; }
.field input::placeholder { color: var(--faint); font-weight: 400; }

.field .u { font-size: 12px; color: var(--faint); white-space: nowrap; }

.pair { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pair .sep { color: var(--rule); font-size: 13px; }

/* select styled as a row control, chevron drawn rather than imaged */
.select-wrap { position: relative; flex-shrink: 0; max-width: 58%; }
.select-wrap select {
  appearance: none; -webkit-appearance: none;
  background: var(--well);
  border: 1px solid var(--well-line);
  border-radius: var(--r-field);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.22);
  padding: 8px 32px 8px 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  max-width: 100%;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
:root[data-theme="light"] .select-wrap select { box-shadow: inset 0 1px 2px rgba(22,21,15,0.05); }
.select-wrap:hover select { border-color: var(--well-line-hover); }
.select-wrap select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}
.select-wrap::after {
  content: '';
  position: absolute; right: 12px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.6px solid var(--faint);
  border-bottom: 1.6px solid var(--faint);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.select-wrap select optgroup { font-style: normal; font-weight: 600; color: var(--muted); }
.select-wrap select option { font-weight: 400; color: var(--ink); }

/* --------------------------------------------------------------- tariffs */

.tariffs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 12px;
  border-bottom: 1px solid var(--rule);
}

.tariff { position: relative; }
.tariff input {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer;
}
.tariff span {
  display: block;
  pointer-events: none;
  padding: 11px 10px 10px;
  border-radius: 12px;
  background: var(--well);
  border: 1px solid var(--well-line);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  transition: background 0.16s, color 0.16s;
  -webkit-tap-highlight-color: transparent;
}
.tariff span b {
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.72;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.tariff:hover span { border-color: var(--well-line-hover); color: var(--ink); }
.tariff input:checked + span {
  background: var(--green);
  border-color: var(--green);
  color: var(--on-green);
}
.tariff input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 3px; }

/* ------------------------------------------------------------------ notes */

.note {
  padding: 11px 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--faint);
  background: var(--well);
  border-top: 1px solid var(--rule);
}
.note:empty { display: none; }

.stale {
  display: flex;
  gap: 9px;
  padding: 11px 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  background: color-mix(in srgb, var(--petrol) 9%, transparent);
  border-top: 1px solid var(--rule);
}
.stale:empty { display: none; }
.stale::before {
  content: '';
  flex-shrink: 0;
  width: 6px; height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--petrol);
}

.err {
  font-size: 12.5px;
  color: var(--petrol);
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
}
.err:empty { display: none; }

/* ---------------------------------------------------------------- results */

.results { margin-top: 30px; }

.results-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 0 3px 11px;
}
.results-head h2 { font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.results-head span { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

.waiting {
  border: 1px dashed var(--rule);
  border-radius: var(--r-card);
  padding: 30px 22px;
  text-align: center;
  color: var(--faint);
  font-size: 14px;
}

.results[data-ready="true"] .waiting { display: none; }
.results[data-ready="false"] .payload { display: none; }

/* winner */
.winner {
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  border-radius: var(--r-card);
  padding: 20px 20px 18px;
  margin-bottom: 11px;
}
.winner-top { display: flex; align-items: center; gap: 9px; margin-bottom: 2px; }
.winner-top .name { font-size: 14px; font-weight: 600; color: var(--green); letter-spacing: 0.005em; }
.pill {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green); border: 1px solid var(--green-line);
  border-radius: 99px; padding: 3px 8px 2px;
}
.winner-fig {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 15vw, 62px);
  line-height: 1;
  letter-spacing: -0.028em;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.winner-sub { margin-top: 5px; font-size: 13px; color: var(--muted); }

/* the other two */
.others { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 11px; }
.other {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: 15px 16px;
}
.other .name { font-size: 13px; font-weight: 500; margin-bottom: 4px; display: flex; align-items: center; gap: 7px; }
.other .fig {
  font-family: var(--serif); font-weight: 400;
  font-size: 31px; line-height: 1.05; letter-spacing: -0.012em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.other .sub { font-size: 12px; color: var(--faint); margin-top: 3px; }
.other[data-fuel="petrol"] .name { color: var(--petrol); }
.other[data-fuel="diesel"] .name { color: var(--diesel); }
.other[data-fuel="ev"] .name { color: var(--green); }

.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot.ev { background: var(--green); }
.dot.petrol { background: var(--petrol); }
.dot.diesel { background: var(--diesel); }

/* Comparison chart.
   Horizontal bars: the job is comparing three magnitudes, so one baseline,
   thin marks, a rounded data-end, a 2px surface gap between rows, and the
   value set in ink beside the mark rather than in the mark's own colour.
   Identity comes from the labelled dot, never from colour alone. */
.chart {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), var(--shadow);
  padding: 17px 17px 15px;
  margin-bottom: 11px;
}
:root[data-theme="light"] .chart { box-shadow: var(--shadow); }

.chart-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 15px;
}
.chart-head h3 { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.01em; }
.chart-head span { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

.bars { list-style: none; display: grid; gap: 2px; }

.bar {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-radius: 8px;
  transition: background 0.15s;
}
.bar:hover { background: var(--well); }

.bar-key { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.bar[data-cheapest="true"] .bar-key { color: var(--ink); font-weight: 500; }

.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot.ev { background: var(--mark-ev); }
.dot.petrol { background: var(--mark-petrol); }
.dot.diesel { background: var(--mark-diesel); }

.bar-track {
  position: relative;
  height: 10px;
  border-radius: 2px;
  background: var(--well);
  box-shadow: inset 0 0 0 1px var(--well-line);
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  width: 0;
  /* square against the baseline, rounded at the data end */
  border-radius: 2px 4px 4px 2px;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bar-fill.ev { background: var(--mark-ev); }
.bar-fill.petrol { background: var(--mark-petrol); }
.bar-fill.diesel { background: var(--mark-diesel); }

.bar-val {
  min-width: 62px; text-align: right;
  font-size: 13.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.bar[data-cheapest="true"] .bar-val { color: var(--green); }

.bar-ppm { display: block; font-size: 11px; font-weight: 400; color: var(--faint); margin-top: 1px; }

@media (max-width: 360px) {
  .bar { grid-template-columns: 74px 1fr auto; gap: 9px; }
  .bar-val { min-width: 56px; }
}

/* verdict */
.verdict {
  border-left: 2px solid var(--green);
  padding: 2px 0 2px 15px;
  margin: 18px 3px 0;
}
.verdict p { font-family: var(--serif); font-size: 19px; line-height: 1.28; letter-spacing: -0.005em; }
.verdict small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.verdict[data-good="false"] { border-left-color: var(--petrol); }

/* ------------------------------------------------------------------ misc */

.actions { display: flex; justify-content: flex-end; margin: 16px 3px 0; }
.reset {
  background: none; border: 0; padding: 6px 2px;
  font-family: inherit; font-size: 13px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--rule); cursor: pointer;
}
.reset:hover { color: var(--ink); }

.foot {
  margin-top: 30px; padding-top: 17px;
  border-top: 1px solid var(--rule);
  font-size: 11.5px; line-height: 1.65; color: var(--faint);
}
.foot + .foot { margin-top: 9px; padding-top: 0; border: 0; }

.stamp {
  margin-top: 18px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.stamp:empty { display: none; }

.update {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 13px;
  background: var(--ink); color: var(--paper);
  border-radius: 13px; padding: 11px 13px 11px 16px;
  font-size: 13.5px; box-shadow: 0 12px 32px -8px rgba(0,0,0,0.45);
  z-index: 20; max-width: calc(100% - 32px);
}
.update[hidden] { display: none; }
.update button {
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  background: var(--paper); color: var(--ink);
  border: 0; border-radius: 8px; padding: 7px 13px; cursor: pointer;
}

/* --------------------------------------------------------------- responsive */

@media (min-width: 640px) {
  :root { --panel: 600px; }

  .hero {
    aspect-ratio: 2.35 / 1;
    max-width: var(--panel);
    margin: 34px auto 0;
    border-radius: 22px 22px 0 0;
  }
  .hero-text { bottom: 34px; }

  .sheet {
    max-width: var(--panel);
    margin: -22px auto 0;
    border-radius: 22px;
    padding-bottom: 40px;
  }

  body { padding-bottom: 46px; }
}

@media (max-width: 360px) {
  .others { grid-template-columns: 1fr; }
  .tariffs { grid-template-columns: 1fr; }
  .row { gap: 10px; padding-inline: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .hero, .update, .actions { display: none; }
  .sheet { margin: 0; max-width: none; }
  .card, .winner, .other, .bars { box-shadow: none; }
}

/* --------------------------------------------------------------- switch */

.switch { position: relative; flex-shrink: 0; display: block; width: 46px; height: 28px; }
/* The input must sit ABOVE the painted track, or the track swallows the tap and
   the toggle silently does nothing. */
.switch input {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer;
}
.switch .track {
  display: block; width: 100%; height: 100%; border-radius: 99px;
  pointer-events: none;
  background: var(--well); border: 1px solid var(--well-line);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.22);
  transition: background 0.18s, border-color 0.18s;
}
.switch .knob {
  position: absolute; top: 4px; left: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--muted);
  transition: transform 0.18s cubic-bezier(0.3,0.7,0.4,1), background 0.18s;
}
.switch input:checked + .track { background: var(--green); border-color: var(--green); }
.switch input:checked + .track .knob { transform: translateX(18px); background: var(--on-green); }
.switch input:focus-visible + .track { outline: 2px solid var(--green); outline-offset: 3px; }
.switch:hover .track { border-color: var(--well-line-hover); }

/* ------------------------------------------------------------- combobox */

.combo { position: relative; flex-shrink: 0; width: 58%; max-width: 230px; }
.combo-input {
  width: 100%;
  background: var(--well);
  border: 1px solid var(--well-line);
  border-radius: var(--r-field);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.22);
  padding: 8px 32px 8px 12px;
  font-family: inherit; font-size: 16px; font-weight: 600;
  color: var(--ink);
  text-overflow: ellipsis;
  transition: border-color 0.15s, box-shadow 0.15s;
}
:root[data-theme="light"] .combo-input { box-shadow: inset 0 1px 2px rgba(22,21,15,0.05); }
.combo-input::placeholder { font-weight: 400; color: var(--faint); font-size: 14px; }
.combo:hover .combo-input { border-color: var(--well-line-hover); }
.combo-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}
.combo-caret {
  position: absolute; right: 13px; top: 17px;
  width: 7px; height: 7px;
  border-right: 1.6px solid var(--faint); border-bottom: 1.6px solid var(--faint);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none; transition: transform 0.18s;
}
.combo[data-open="true"] .combo-caret { transform: translateY(-20%) rotate(225deg); }

.combo-list {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0;
  /* flipped above the input when there is no room below */
  width: min(300px, 78vw); max-height: 288px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  list-style: none; padding: 5px;
  background: var(--card);
  border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: 0 18px 44px -14px rgba(0,0,0,0.6);
}
.combo-list[hidden] { display: none; }
.combo[data-drop="up"] .combo-list { top: auto; bottom: calc(100% + 6px); }
.combo-group {
  padding: 9px 10px 5px; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint);
}
.combo-opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border-radius: 9px;
  font-size: 14.5px; color: var(--ink); cursor: pointer;
}
.combo-opt small { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.combo-opt[aria-selected="true"] { color: var(--green); font-weight: 600; }
.combo-opt.active { background: var(--well); }
.combo-empty { padding: 16px 10px; text-align: center; font-size: 13.5px; color: var(--faint); }

/* --------------------------------------------------------------- carbon */

.winner-co2 { margin-top: 9px; font-size: 12.5px; color: var(--muted); }
.winner-co2:empty { display: none; }
.other .co2 { display: block; margin-top: 3px; font-size: 11.5px; color: var(--faint); }

/* -------------------------------------------------------- annual figures */

.annual {
  margin-top: 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), var(--shadow);
  padding: 16px 17px 15px;
}
:root[data-theme="light"] .annual { box-shadow: var(--shadow); }
.annual-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.annual-head h3 { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.01em; }
.annual-head .field { padding: 5px 9px; }
.annual-head .field input { font-size: 14px; }

.annual-rows { list-style: none; display: grid; gap: 9px; }
.annual-row { display: grid; grid-template-columns: 86px 1fr auto; align-items: baseline; gap: 12px; }
.annual-row .k { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.annual-row[data-cheapest="true"] .k { color: var(--ink); font-weight: 500; }
.annual-row .v {
  font-family: var(--serif); font-size: 23px; line-height: 1;
  letter-spacing: -0.015em; color: var(--ink); text-align: right;
}
.annual-row[data-cheapest="true"] .v { color: var(--green); }
.annual-row .c { font-size: 11.5px; color: var(--faint); text-align: right; min-width: 74px; }

.annual-line {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--rule);
  font-size: 13.5px; line-height: 1.5; color: var(--muted);
}
.annual-line b { color: var(--ink); font-weight: 600; }

@media (max-width: 360px) {
  .annual-row { grid-template-columns: 70px 1fr auto; gap: 8px; }
  .annual-row .c { min-width: 62px; }
  .combo { width: 54%; }
}