/* Charge panel: fast charging (time to add the same miles; bars are elapsed time on a race clock, not a charging
   curve) and home charging (miles of range per hour). Fits inside the Range panel's height, so the section keeps
   its length (shared grid cell, css/sections/drive.css). */
.drive-panel--charge { display: flex; flex-direction: column; }
.drive-panel--charge .section__head { margin-bottom: clamp(20px, 3.4vh, 36px); }
.charge { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: clamp(26px, 5vh, 56px); }

.charge-port { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 10px 18px 10px 14px; border-radius: var(--radius-pill); background: rgb(255 255 255 / 55%); color: var(--ink-2); font-size: 14px; font-weight: 600; white-space: nowrap; }
.charge-port svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ink); }
.charge-port strong { color: var(--ink); font-weight: 760; }

.charge-group__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 46px; margin-bottom: clamp(6px, 1.2vh, 14px); }
.charge-group__title { display: flex; align-items: baseline; gap: 14px; margin: 0; font-size: clamp(20px, 1.9vw, 27px); letter-spacing: -0.03em; }
.charge-group__title strong { font-weight: 730; }
.charge-group__title span { color: var(--ink-2); font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.charge-race { display: flex; align-items: center; gap: 20px; }
.charge-result { font-size: clamp(18px, 1.8vw, 26px); font-weight: 650; letter-spacing: -0.035em; white-space: nowrap; }
.charge .charge-replay { min-height: 46px; padding-inline: 20px 16px; gap: 10px; font-size: 16px; font-weight: 720; }
.charge .charge-replay svg { width: 18px; height: 18px; }
.charge .charge-replay:disabled { opacity: 0.6; }

/* Name · track · reading. The scale row uses the same columns so its ticks sit over the tracks. */
.charge-lanes { display: grid; gap: 10px; }
.charge-lane, .charge-scale { display: grid; grid-template-columns: 76px minmax(0, 1fr) 196px; align-items: center; gap: 22px; }
.charge-scale { margin-bottom: 8px; }
.charge-scale__ticks { position: relative; height: 16px; }
.charge-scale__ticks > span { position: absolute; left: var(--x); transform: translateX(-50%); color: var(--ink-2); font-size: 13px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.charge-scale__ticks > span:first-child { transform: none; }
.charge-scale__ticks > span:last-child { transform: translateX(-100%); }
.charge-lane__name { font-size: clamp(22px, 2vw, 28px); }
.charge-lane__track {
  position: relative; height: clamp(40px, 5.4vh, 56px); border-left: 2px solid rgb(13 15 28 / 40%); border-radius: 0 10px 10px 0;
  background: linear-gradient(to right, rgb(13 15 28 / 10%) 1px, transparent 1px) 0 0 / calc(100% / var(--steps)) 100%, rgb(13 15 28 / 4%);
}
.charge-lane__fill { position: absolute; inset: 0; overflow: hidden; border-radius: 0 10px 10px 0; background: var(--c); transform-origin: left center; will-change: transform; }
/* A soft highlight runs along a bar while its car is still charging (a transform, so the compositor animates it). */
.charge-lane__fill::after { content: ""; position: absolute; inset-block: 0; left: 0; width: 220%; background: linear-gradient(90deg, transparent 0 35%, rgb(255 255 255 / 34%) 50%, transparent 65% 100%); opacity: 0; }
.charge-lane[data-state="charging"] .charge-lane__fill::after { opacity: 1; animation: charge-flow 0.9s linear infinite; }
/* Same sweep as the old background-position 100% → -120% on a 220% image: −1.2 → +1.44 bar widths. */
@keyframes charge-flow { from { transform: translateX(-54.545%); } to { transform: translateX(65.455%); } }
.charge-lane__reading { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; line-height: 0.9; white-space: nowrap; }
.charge-lane__reading > strong { font-size: clamp(40px, 4.3vw, 66px); font-weight: 800; letter-spacing: -0.06em; transition: color 200ms; }
.charge-lane__reading > span { font-size: 17px; font-weight: 700; letter-spacing: -0.03em; }
.charge-lane[data-state="charging"] .charge-lane__reading > strong { color: var(--ink-3); }

@media (max-width: 1200px) {
  .charge-lane, .charge-scale { grid-template-columns: 64px minmax(0, 1fr) 168px; gap: 18px; }
  .charge-port { font-size: 13px; }
}
@media (max-width: 900px) {
  .charge-group__title { flex-direction: column; gap: 4px; }
  .charge-lane, .charge-scale { grid-template-columns: 52px minmax(0, 1fr) 132px; gap: 12px; }
  .charge-lane__reading > span { font-size: 14px; }
  .charge-port { white-space: normal; }
}
@media (max-width: 600px) {
  .charge-group__head { flex-wrap: wrap; }
  .charge .charge-replay { white-space: nowrap; }
  .charge-lane, .charge-scale { grid-template-columns: 40px minmax(0, 1fr) 100px; gap: 10px; }
  .charge-lane__name { font-size: 18px; }
  .charge-lane__reading > strong { font-size: 34px; }
  .charge-scale__ticks > span:not(:first-child, :last-child) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .charge-lane__fill { will-change: auto; }
  .charge-lane[data-state="charging"] .charge-lane__fill::after { animation: none; opacity: 0; }
  .charge-lane__reading > strong { transition: none; }
}