.power-summary { margin: .25rem 0 2rem; border-radius: .9rem; background: var(--surface); box-shadow: 0 7px 24px -18px rgb(24 32 42 / 55%); }
.power-summary > a { min-height: 84px; display: grid; grid-template-columns: minmax(120px,.65fr) 2fr auto; align-items: center; gap: 1.15rem; padding: .75rem 1rem; text-decoration: none; }
.power-summary .eyebrow { margin-bottom: .3rem; }
.power-summary [data-power-summary-status] { font-size: .8rem; }
.power-summary[data-state="normal"] [data-power-summary-status] { color: var(--ok); }
.power-summary[data-state="stale"] [data-power-summary-status] { color: var(--warn); }
.power-summary[data-state="unavailable"] [data-power-summary-status] { color: var(--danger); }
.power-summary dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin: 0; }
.power-summary dl div { min-width: 0; }
.power-summary dt, .power-readings span { color: var(--ink-3); font-size: .66rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.power-summary dd { margin: .2rem 0 0; font-size: clamp(1rem,1.7vw,1.25rem); font-weight: 650; font-variant-numeric: tabular-nums; }
.power-open { color: var(--signal-ink); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.power-freshness { margin: .8rem 0 0; color: var(--ink-2); font-size: .82rem; }
.power-readings { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; margin-top: 2rem; }
.power-readings article { min-width: 0; padding: 1.25rem; border-radius: .9rem; background: var(--surface); box-shadow: 0 7px 24px -18px rgb(24 32 42 / 55%); }
.power-readings strong { display: block; margin-top: .5rem; font-size: clamp(1.4rem,3vw,2rem); font-variant-numeric: tabular-nums; }
.power-state { margin: 1rem 0 0; padding: .8rem 1rem; border-left: 3px solid var(--warn); background: var(--sunken); color: var(--ink-2); font-size: .8rem; }
.power-state-unavailable { border-left-color: var(--danger); }
.power-chart-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.power-chart-grid > article { min-width: 0; padding: 1.25rem; border-radius: .9rem; background: var(--surface); box-shadow: 0 7px 24px -18px rgb(24 32 42 / 55%); }
.power-chart-grid h3 { margin-bottom: 1rem; }
.power-chart { width: 100%; overflow: hidden; }
.power-chart svg { width: 100%; height: auto; min-height: 170px; display: block; background: var(--sunken); border-radius: .45rem; }
.power-chart-series polyline { stroke: var(--signal-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.power-axis-tick line { stroke: currentColor; stroke-width: .6; opacity: .18; vector-effect: non-scaling-stroke; }
.power-axis-tick text { fill: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.power-axis-y text { font-weight: 650; }
.power-chart-scale { display: flex; justify-content: space-between; gap: 1rem; margin-top: .45rem; color: var(--ink-3); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.power-history-state { padding: 1.25rem; border-radius: .65rem; background: var(--sunken); color: var(--ink-2); font-size: .8rem; }
@media (max-width: 760px) {
  .power-summary > a { grid-template-columns: 1fr; gap: .9rem; }
  .power-summary dl { gap: .65rem; }
  .power-open { justify-self: start; }
  .power-readings { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .power-chart-grid { grid-template-columns: 1fr; }
  .power-axis-x-secondary { display: none; }
}
@media (max-width: 420px) {
  .power-summary dl { grid-template-columns: 1fr; }
  .power-summary dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .power-summary dd { font-size: 1.15rem; }
  .power-readings { grid-template-columns: 1fr; }
  .power-chart-grid > article { padding: 1rem; }
  .power-chart svg { min-height: 160px; }
  .power-axis-tick text { font-size: 10px; }
}