/* Energy story imagery and motion. */
.energy-arc { aspect-ratio: 390 / 432; }
.arc-node-image { overflow: visible; pointer-events: none; }
.arc-leg, .arc-pair { transition: stroke-width 180ms ease-out, opacity 180ms ease-out; }
.flow-live { stroke-dasharray: 18 120; animation: energy-flow 1.8s linear infinite; }
.flow-rail { animation: none; }
.solar-flow-live { stroke-dasharray: 18 120; animation: solar-energy-flow 1.8s linear infinite; }
.solar-flow-rail { animation: none; }
.solar-flow-label { pointer-events: none; }
.solar-flow-value { fill: var(--ink); font-size: var(--svg-phrase); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.solar-flow-phrase { fill: var(--on-sky-2); font-size: var(--svg-label); font-weight: var(--w-medium); }
@keyframes energy-flow { to { stroke-dashoffset: -138; } }
@keyframes solar-energy-flow { to { stroke-dashoffset: -138; } }
/* The grid-battery line shows only 77 units between the two pictures: one dash per length keeps a dash on screen at the same speed. */
.flow-live.flow-short { stroke-dasharray: 18 59; animation-name: energy-flow-short; animation-duration: 1s; }
@keyframes energy-flow-short { to { stroke-dashoffset: -77; } }
/* A still dash can sit under a node picture, so without motion a live line is drawn solid (solid = live). */
@media (prefers-reduced-motion: reduce) {
  .flow-live, .solar-flow-live, .flow-live.flow-short { animation: none; stroke-dasharray: none; }
}
.flow-paused .flow-live, .flow-paused .solar-flow-live { animation-play-state: paused; }

/* Timeline preview changes the diagram content, not the page treatment. */
.energy-story { position: relative; }
/* Previewing a time: a soft, edgeless glow behind the diagram — blue ahead,
   warm behind — so it reads as not-live without a box or any layout change. */
.energy-story[data-preview] .sky-field { background: radial-gradient(ellipse 58% 52% at 50% 60%, var(--preview-glow) 0%, transparent 72%); }
.energy-story[data-preview="forecast"] { --preview-glow: var(--preview-glow-forecast); }
.energy-story[data-preview="historical"] { --preview-glow: var(--preview-glow-history); }

.arc-node-total { fill: var(--on-sky-2); font-size: var(--svg-total); font-weight: var(--w-regular); font-variant-numeric: tabular-nums; }
.arc-node-total.is-gain { fill: var(--gain-text); }
.arc-node-button { outline: none; }
.arc-node-hit { fill: transparent; cursor: pointer; }
.arc-node-focus-ring { fill: none; stroke: var(--focus); stroke-width: 2px; pointer-events: none; visibility: hidden; }
.arc-node-button:focus-visible .arc-node-focus-ring { visibility: visible; }
.node-detail { width: min(20rem, calc(100vw - 1.5rem)); z-index: var(--z-node-card); }
.node-detail-heading { margin: 0 0 var(--s-3); font-size: var(--t-body); font-weight: var(--w-bold); }
.node-detail-label { font-size: var(--t-label); font-weight: var(--w-medium); letter-spacing: var(--track-label); text-transform: uppercase; }
.node-detail-value { font-size: var(--t-body); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; text-align: right; }
.node-detail-value .is-loss { color: var(--loss); }
.node-detail-quiet { color: var(--ink-2); font-weight: var(--w-regular); }
.node-detail-action { margin-top: var(--s-3); min-height: var(--tap); }
.node-detail .gauge-detail-note:empty { display: none; }
.node-detail .gauge-detail-note { font-size: var(--t-small); color: var(--ink-2); overflow-wrap: anywhere; }
.node-detail { overflow-y: auto; scrollbar-color: var(--ink-2) var(--surface); scrollbar-width: thin; }
@media (prefers-reduced-motion: reduce) { .node-detail { transition: none; } }