/* ----------------- radial gauges (CSS conic-gradient) ------------------ */
/* A "solid arc" gauge: a 270° ring (gap at the bottom) filled to --fill in
   --c, the rest in the track colour. Value sits in the donut hole. The fill
   fraction is `value / max`; colour reflects severity (or a fixed identity
   hue for metrics where "more" is not a fault, e.g. solar). */
.gauge-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 12px; }
.gauge { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.gauge-dial { position: relative; width: 100%; max-width: 118px; aspect-ratio: 1; }
.gauge-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 225deg, var(--c) 0 var(--fill),
    var(--panel-3) var(--fill) 75%, transparent 75% 100%);
  -webkit-mask: radial-gradient(closest-side, #0000 70%, #000 71%);
          mask: radial-gradient(closest-side, #0000 70%, #000 71%);
}
.gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column;
                align-items: center; justify-content: center; gap: 1px; }
.gauge-val { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; }
.gauge-val .u { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 1px; }
.gauge-sub { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gauge-cap { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
#battery-pack:not(:empty) { margin-bottom: 14px; }