/* 60 Energy (#energie). The script sets [data-boxes] on the range module; its states are drawn from it. */

.ar-energy {
  --ar-energy-signal: var(--wp--preset--color--chartreuse);
  --ar-energy-bar: color-mix(in srgb, var(--ar-fg) 88%, transparent);
  --ar-energy-hatch: color-mix(in srgb, var(--ar-fg) 65%, transparent);
  --ar-energy-hud: 700 var(--wp--preset--font-size--x-small) / 1.35 var(--wp--preset--font-family--display);
  --ar-energy-state: var(--wp--custom--duration--slow) var(--ar-ease-expo);
  --ar-energy-col: clamp(2rem, 4vw, 4rem);
}

.ar-energy__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--60); }
.ar-energy__batteries, .ar-energy__charging, .ar-energy__chart { display: grid; gap: var(--wp--preset--spacing--30); align-content: start; }
.ar-energy__chart { margin: 0; padding: 0; list-style: none; }
.ar-energy__opts, .ar-energy__frame { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 1024px) {
  .ar-energy__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; column-gap: var(--ar-energy-col); }
  .ar-energy__intro { grid-column: span 5; align-self: center; }
  .ar-energy__range { grid-column: span 7; }
  .ar-energy__batteries, .ar-energy__charging { grid-column: span 6; }
  .ar-energy__perf { grid-column: 1 / -1; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--ar-energy-col); }
  .ar-energy__perf > .ar-body { padding-block-start: 0.85rem; }
}

.ar-energy__range { display: grid; gap: var(--wp--preset--spacing--40); padding: clamp(1rem, 3vw, 2rem); background-color: var(--wp--preset--color--carbon); }
.ar-energy__toggle { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.ar-energy__toggle legend { margin-block-end: 0.6rem; padding: 0; }
.no-js .ar-energy__toggle { display: none; } /* inert without JS */
.ar-energy__opts { gap: 0.5rem; }
.ar-energy__opt { position: relative; display: block; }

/* The native radio is the hit area and wears base.css's focus ring; the chip is its face. */
.ar-energy__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: var(--wp--custom--corner--pill); background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ar-energy__opt .ar-chip { width: 100%; min-height: 44px; justify-content: center; text-align: center; transition: border-color var(--ar-hover), color var(--ar-hover); }
.ar-energy__opt .ar-chip::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border: 1.5px solid currentColor; border-radius: 50%; }
.ar-energy__opt:hover .ar-chip { border-color: color-mix(in srgb, var(--ar-fg) 45%, transparent); color: var(--ar-fg); }

/* Selected: signal outline and a filled dot, so colour is not the only cue. */
.ar-energy__opt input:checked + .ar-chip { border-color: var(--ar-energy-signal); color: var(--ar-fg); }
.ar-energy__opt input:checked + .ar-chip::before { border-color: var(--ar-energy-signal); background-color: var(--ar-energy-signal); }

.ar-energy .ar-readout__value { color: var(--ar-fg-soft); }
.ar-energy [data-count-to] { color: var(--ar-fg); font-size: var(--wp--preset--font-size--display); }

/* 2ch: the unit stays put while the count passes one digit. */
.ar-energy__out [data-num] { display: inline-block; min-inline-size: 2ch; font-size: var(--ar-number-xl); line-height: 0.9; text-align: end; }

/* Bars: segments sit at --ar-from / --ar-to (percent of the axis); gridlines follow --ar-div. */

.ar-energy__scale { --ar-div: 2; }

.ar-energy__track {
  position: relative;
  height: 0.875rem;
  border-right: 1px solid var(--ar-line-strong);
  background: linear-gradient(to right, var(--ar-line-strong) 1px, transparent 0) 0 0 / calc(100% / var(--ar-div, 3)) 100% repeat-x;
}

.ar-energy__seg {
  position: absolute;
  inset-block: 2px;
  left: calc(var(--ar-from, 0) * 1%);
  width: calc((var(--ar-to) - var(--ar-from, 0)) * 1%);
  outline: 1px solid transparent; /* a system colour in forced-colors mode */
  outline-offset: -1px;
  background-color: var(--ar-energy-bar);
}

/* Hatched: the stretch up to the upper bound of a range. */
.ar-energy__seg--ext { background: repeating-linear-gradient(-45deg, var(--ar-energy-hatch) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1px var(--ar-energy-hatch); }

/* The gauge: half of the 80 km axis for one box, all of it for two. */
.ar-energy__seg--range { --ar-to: 50; border-right: 2px solid var(--ar-energy-signal); }
[data-boxes="2"] .ar-energy__seg--range { --ar-to: 100; }

/* One column per division plus a zero-width one: labels centre on their gridline, the last ends the axis. */
.ar-energy__ticks { display: grid; grid-template-columns: repeat(var(--ar-div, 3), 1fr) 0; margin: 0.4rem 0 0; padding: 0; list-style: none; color: var(--ar-fg-muted); font: var(--ar-energy-hud); letter-spacing: var(--wp--custom--tracking--wide); }
.ar-energy__ticks li { justify-self: start; translate: -50% 0; white-space: nowrap; }
.ar-energy__ticks li:first-child { translate: none; }
.ar-energy__ticks li:last-child { justify-self: end; translate: none; }

/* Frame: the second slot holds supplies, or with two boxes a battery. */

.ar-energy__frame { gap: 0.75rem; margin: 0; padding: 0.75rem; list-style: none; border: 1px solid var(--ar-line-strong); border-radius: var(--wp--custom--corner--md); }

.ar-energy__slot {
  --ar-lit: 1;
  position: relative;
  display: grid;
  gap: 0.6rem;
  align-content: end;
  min-height: 5.5rem;
  padding: 0.75rem;
  border: 1px solid var(--ar-fg-muted);
  border-radius: var(--wp--custom--corner--sm);
  color: var(--ar-fg);
  font: var(--ar-energy-hud);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
}

[data-boxes="1"] .ar-energy__slot[data-slot] { --ar-lit: 0; border-style: dashed; border-color: var(--ar-line-strong); color: var(--ar-fg-muted); }

/* Four cells in a case; the lamp is lit while a battery sits in the slot. */
.ar-energy__cells { height: 2rem; border: 1px solid var(--ar-fg-muted); border-radius: 2px; background: repeating-linear-gradient(90deg, var(--ar-fg-muted) 0 22%, transparent 0 25%) 0 0 / 103% 100%; opacity: var(--ar-lit); }
.ar-energy__slot::after { content: ""; position: absolute; inset: auto 0.75rem 1rem auto; width: 8px; height: 8px; border-radius: 50%; background-color: var(--ar-energy-signal); opacity: var(--ar-lit); }
.ar-energy__note { color: var(--ar-fg-muted); font-size: var(--wp--preset--font-size--small); text-wrap: pretty; }

.ar-energy__row { display: grid; gap: 0.5rem; padding-block-start: 0.85rem; border-block-start: 1px solid var(--ar-line); }
.ar-energy__name { margin: 0; color: var(--ar-fg); font: 700 var(--wp--preset--font-size--x-large) / var(--wp--custom--leading--snug) var(--wp--preset--font-family--display); }

.ar-energy__nb { white-space: nowrap; }
.ar-energy__perf { display: grid; gap: var(--wp--preset--spacing--40); border-block-start: 1px solid var(--ar-line-strong); }
.ar-energy__stats { display: grid; gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); align-self: start; margin: 0; }
.ar-energy__stats .ar-readout { align-content: space-between; background-size: 1.5rem 1px, 0 1px; } /* the band draws the line */

@media (min-width: 768px) { .ar-energy__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Motion (gated): bars wipe in on reveal; gauge and frame ease between states. */

.ar-motion .ar-energy__seg { clip-path: inset(0); transition: clip-path 600ms var(--ar-ease-expo) 200ms, width 500ms var(--ar-ease-expo); }
.ar-motion .ar-energy__seg--ext { transition-delay: 650ms, 0s; }
.ar-motion [data-reveal]:not(.is-revealed) .ar-energy__seg { clip-path: inset(0 100% 0 0); }

.ar-motion :is(.ar-energy__opt .ar-chip, .ar-energy__slot, .ar-energy__cells),
.ar-motion .ar-energy__slot::after { transition: border-color var(--ar-energy-state), color var(--ar-energy-state), opacity var(--ar-energy-state); }