.drive-panel--range .section__head { margin-bottom: clamp(20px, 3.4vh, 36px); }
.range-view button { min-height: 42px; }
.range { position: relative; padding-top: 30px; }
.range-grid { position: absolute; inset: 30px 0 26px; pointer-events: none; }
.range-axis__tick { position: absolute; left: var(--x); top: 0; height: 100%; border-left: 1px solid rgb(13 15 28 / 12%); }
.range-axis__tick:first-child { border-left: 2px solid rgb(13 15 28 / 40%); }
.range-axis__tick--end { transform: translateX(-1px); }
.range-axis__tick > span { position: absolute; top: -22px; left: 0; transform: translateX(-50%); color: var(--ink-2); font-size: 13px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.range-axis__tick:first-child > span { transform: none; }
.range-axis__tick--end > span { transform: translateX(-100%); }

/* Selected pair and all configurations share one grid cell (the taller sets the height), and crossfade. */
.range-views { display: grid; }
.range-views > * { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity 240ms var(--ease-out), visibility 0s linear 240ms; }
.range-views > .is-active { opacity: 1; visibility: visible; transition: opacity 320ms var(--ease-out) 120ms, visibility 0s; }

/* ---------- Shaded extensions (bigger packs, Conserve mode): two shades ---------- */
.range-row, .range-all__row { --shade-0a: 60%; --shade-0b: 24%; --shade-1a: 30%; --shade-1b: 8%; }
.range-shade--0 { background: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--c) var(--shade-0a), transparent) 0 5px, color-mix(in oklab, var(--c) var(--shade-0b), transparent) 5px 10px); }
.range-shade--1 { background: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--c) var(--shade-1a), transparent) 0 5px, color-mix(in oklab, var(--c) var(--shade-1b), transparent) 5px 10px); }
.range-extends { position: absolute; inset: 0; z-index: 0; }
.range-extend { position: absolute; top: 0; bottom: 0; left: var(--from); right: calc(100% - var(--to)); animation: range-fade-in 380ms var(--ease-out) var(--d, 320ms) backwards; }
.range-extend:last-child { border-radius: 0 12px 12px 0; }
/* The first segment tucks under an opaque (EPA) fill's rounded end so no notch shows between them. */
.range-row .range-extend:first-child { left: calc(var(--from) - 12px); }
.range-caption { display: flex; align-items: center; gap: 6px 18px; color: var(--ink-2); font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.range-caption__item { display: inline-flex; align-items: center; gap: 7px; animation: range-fade-in 380ms var(--ease-out) var(--d, 320ms) backwards; }
.range-caption .src { pointer-events: auto; }
.range-swatch { display: inline-block; width: 18px; height: 11px; border-radius: 3px; }
@keyframes range-fade-in { from { opacity: 0; } }

/* ---------- Selected pair ---------- */
.range-row { position: relative; padding-bottom: 26px; }
.range-row + .range-row { margin-top: clamp(4px, 1vh, 12px); }
.range-row__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 30px; }
.range-row__pick { display: flex; align-items: flex-end; gap: 20px; min-width: 0; }
.range-vehicle { flex: 0 0 auto; font-size: clamp(26px, 2.6vw, 40px); line-height: 44px; }
.range-row__pick .picker { display: flex; flex-wrap: wrap; gap: 8px; }
/* Opaque tints so the scale's grid lines do not show through the chips (pinned to the Range field, which
   stays put while the section's own field crossfades during a tab switch). */
.range .chip { min-height: 44px; padding-inline: 14px; background-color: color-mix(in oklab, var(--c) 14%, var(--field-range)); }
.range .chip:hover { background-color: color-mix(in oklab, var(--c) 22%, var(--field-range)); }
.range .chip[aria-pressed="true"] { background-color: var(--c); }
.range-reading { flex: 0 0 auto; text-align: right; }
.range-reading__value { display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; line-height: 0.92; }
.range-reading__value > .num { font-size: clamp(64px, 7vw, 112px); font-weight: 800; letter-spacing: -0.06em; }
.range-unit { font-size: 25px; font-weight: 700; letter-spacing: -0.04em; }
.range-reading__qualifier { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-top: 9px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.range .badge { font-size: 13px; }
.range-track { position: relative; height: clamp(58px, 6.8vh, 78px); background: rgb(13 15 28 / 4%); border-radius: 0 12px 12px 0; }
.range-fill { position: absolute; inset: 0; transform-origin: left center; border-radius: 0 12px 12px 0; will-change: transform; }
/* Wheel pins swap by fading: the old set fades out (JS waits MARK_FADE_OUT), the new set fades in on insertion. */
.range-markers { position: absolute; inset: 0; }
.range-markers.is-out { opacity: 0; transition: opacity 140ms var(--ease-out); }
.range-track > .range-caption { position: absolute; top: calc(100% + 6px); right: calc(100% - var(--end)); }
/* The trim's other wheel options (All-Terrain, Super Sport): pins standing on the bar, detail in the hover box. */
.range-mark {
  position: absolute; left: var(--x); bottom: 100%; height: 18px; border-left: 2px solid color-mix(in oklab, var(--c) 55%, transparent);
  outline: none; animation: range-fade-in 260ms var(--ease-out) var(--d, 60ms) backwards;
}
.range-mark::before { content: ''; position: absolute; top: -6px; left: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--c); opacity: 0.75; transition: transform 160ms var(--ease-out), opacity 160ms; }
.range-mark:is(:hover, :focus-visible)::before { opacity: 1; transform: scale(1.3); }
.range-mark:focus-visible::before { box-shadow: 0 0 0 3px var(--focus); }
/* Generous hover target without changing the drawn mark. */
.range-mark::after { content: ''; position: absolute; inset: -10px -11px -4px -12px; }

/* In-page hover box for the pins and the all-configurations Conserve figures (js: createTip). */
.range-tip {
  position: absolute; z-index: 20; left: 0; top: 0; display: grid; gap: 1px; padding: 8px 13px 9px;
  border-radius: 12px; background: var(--white); color: var(--ink); box-shadow: var(--shadow-pop); white-space: nowrap;
  pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, calc(-100% + 6px)) scale(0.96);
  transform-origin: var(--arrow-x, 50%) 100%;
  transition: opacity 120ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s linear 160ms;
}
.range-tip.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, -100%); transition: opacity 120ms var(--ease-out), transform 260ms var(--ease-spring), visibility 0s; }
.range-tip::after { content: ''; position: absolute; bottom: -5px; left: var(--arrow-x, 50%); width: 11px; height: 11px; border-radius: 2px; background: var(--white); transform: translateX(-50%) rotate(45deg); }
.range-tip__value { display: flex; align-items: center; gap: 8px; }
.range-tip__value strong { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
.range-tip__label { color: var(--ink-2); font-size: 13px; font-weight: 600; }

/* ---------- All configurations: one bar per trim on the same scale ---------- */
.range-all { --bar-h: clamp(28px, 4.4vh, 44px); display: flex; flex-direction: column; gap: clamp(10px, 2vh, 18px); padding-bottom: 26px; }
.range-all__group { display: grid; gap: 6px; }
.range-all__vehicle { font-size: 20px; line-height: 24px; }
.range-all__row { position: relative; height: var(--bar-h); }
.range-all__row.has-caption { height: calc(var(--bar-h) + 22px); }
.range-all__bar {
  position: absolute; top: 0; left: 0; right: 0; height: var(--bar-h); display: flex; align-items: center; padding: 0 0 0 12px;
  border: 0; border-radius: 0 8px 8px 0; background: rgb(13 15 28 / 4%); text-align: left;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.range-all__fill {
  position: absolute; inset: 0; border-radius: 0 8px 8px 0; transform-origin: left center; transform: scaleX(0);
  opacity: 0.32; transition: transform 0s linear 260ms, opacity 200ms;
}
.range-all__bar:hover .range-all__fill { opacity: 0.5; }
.range-all__row .range-all__bar[aria-pressed="true"] .range-all__fill { opacity: 1; }
.range-all.is-active .range-all__fill { transform: scaleX(var(--v)); transition: transform 760ms var(--ease-spring) calc(120ms + var(--i) * 28ms), opacity 200ms; }
.range-all .range-extend:last-child { border-radius: 0 8px 8px 0; }
.range-all__row .range-extend:first-child { left: calc(var(--from) - 8px); }
.range-all__name { position: relative; color: var(--c-ink); font-size: 14px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.range-all__value {
  position: absolute; top: 50%; left: var(--x); transform: translate(calc(-100% - 10px), -50%);
  color: var(--c-ink); font-size: 15px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap;
}
.range-all__bar[aria-pressed="true"] .range-all__value { font-size: 17px; font-weight: 800; }
.range-all__row[data-status="epa"] .range-all__bar[aria-pressed="true"] :is(.range-all__name, .range-all__value) { color: var(--white); }
.range-all__status { position: absolute; top: calc(var(--bar-h) / 2); left: calc(var(--end) + 10px); transform: translateY(-50%); pointer-events: none; }
.range-all__caption { position: absolute; top: calc(var(--bar-h) + 4px); right: calc(100% - var(--end)); font-size: 12px; }
/* Conserve-mode figure right-aligned at the end of its shaded segment, like the trim's own value at the end of
   its fill (what it is: hover box); a halo in the field colour keeps it legible over the stripes. */
.range-all__mode {
  position: absolute; top: 50%; left: var(--to); transform: translate(calc(-100% - 10px), -50%);
  color: var(--c-ink); font-size: 14px; font-weight: 750; letter-spacing: -0.02em; white-space: nowrap;
  text-shadow: 0 0 2px var(--field-range), 0 0 5px var(--field-range), 0 0 9px var(--field-range);
}
/* Everything after the bars waits for them: values, shaded extensions, captions and badges fade in on arrival. */
.range-all :is(.range-all__value, .range-all__mode, .range-all__status, .range-extend, .range-caption__item) { opacity: 0; animation: none; transition: opacity 0s; }
.range-all.is-active :is(.range-all__value, .range-all__mode, .range-all__status, .range-caption__item) { opacity: 1; transition: opacity 300ms var(--ease-out) calc(420ms + var(--i) * 28ms); }
.range-all.is-active .range-extend { opacity: 1; transition: opacity 300ms var(--ease-out) calc(560ms + var(--i) * 28ms); }
.range-all.is-active .range-all__bar[aria-pressed="false"] .range-extend { opacity: 0.55; }

@media (max-width: 900px) {
  .range-row__pick { flex-direction: column; align-items: flex-start; gap: 6px; }
  .range-vehicle { line-height: 1.1; }
  .range-reading__qualifier { flex-wrap: wrap; max-width: 230px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .range-fill { will-change: auto; }
  .range-views > *, .range-all__fill, .range-all * { transition: none !important; }
  .range-extend, .range-caption__item, .range-mark { animation: none; }
  .range-markers.is-out, .range-tip, .range-mark::before { transition: none; }
}