/* Range & speed: one section, two panels that swipe in place (js/sections/drive.js).
   The field colour and the tab bar's tone follow the active panel over the same duration as the swipe. */
.section--drive {
  --drive-swipe: 560ms;
  --field: var(--field-range);
  padding-block: clamp(64px, 8vh, 110px) clamp(80px, 11vh, 126px);
  transition: background-color var(--drive-swipe) var(--ease-out);
}
.section--drive[data-active="speed"] { --field: var(--field-speed); }
.section--drive[data-active="charge"] { --field: var(--field-charge); }
.drive-bar { margin-bottom: clamp(12px, 2vh, 28px); color: var(--ink); transition: color var(--drive-swipe) var(--ease-out); }
.drive-bar[data-tone="dark"] { color: var(--on-dark); }
.drive-tabs { transition: background-color var(--drive-swipe) var(--ease-out); }
.drive-tabs button { min-height: 46px; padding-inline: 26px; font-size: 17px; font-weight: 700; }

/* Both panels stay in layout, stacked in one grid cell (stretched to the taller one), so the section keeps one
   height and switching never changes the page length. The inactive panel is parked just past the viewport edge
   on its side (transform: IntersectionObservers see it as off-screen) and hidden; switching slides both.
   `visibility` transitions keep the outgoing panel visible for the whole slide and show the incoming at once. */
.drive-stage { display: grid; }
.drive-panel { grid-area: 1 / 1; min-width: 0; transition: transform var(--drive-swipe) var(--ease-out), visibility var(--drive-swipe); }
.drive-panel[data-state="before"] { visibility: hidden; transform: translateX(calc(-50vw - 50%)); }
.drive-panel[data-state="after"] { visibility: hidden; transform: translateX(calc(50vw + 50%)); }
.drive-panel[data-instant] { transition: none; }
.drive-panel[data-tone="dark"] { --section-ink: var(--on-dark); --focus: #ffd34d; color: var(--on-dark); color-scheme: dark; }
.drive-panel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }

@media (prefers-reduced-motion: reduce) {
  .section--drive, .drive-bar, .drive-tabs, .drive-panel { transition: none; }
}