/* The energy demo's pages: forms, tables, sentences and charts come from /ui.css (App page components). Only the
   chart's lines and their legend keys are here: expected output solid, sold power dashed, the battery's plan dotted. */
.energy-expected { fill: none; stroke: var(--kind-computed); stroke-width: 2; stroke-linejoin: round; }
.energy-sold { fill: none; stroke: var(--chart-accent); stroke-width: 2; stroke-dasharray: 6 4; stroke-linejoin: round; }
.energy-battery { fill: none; stroke: var(--kind-ingested); stroke-width: 2; stroke-dasharray: 2 3; stroke-linejoin: round; }
.page-chart-key.expected { background: var(--kind-computed); }
.page-chart-key.sold { background: none; border-top: 2px dashed var(--chart-accent); height: 0; }
.page-chart-key.battery { background: none; border-top: 2px dotted var(--kind-ingested); height: 0; }
.energy-unavailable { margin: 8px 16px; color: var(--text-muted); }
.energy-unavailable:empty { display: none; }
.energy-body { padding: 4px 16px 16px; }
.energy-pills { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.panel-head { flex-wrap: wrap; row-gap: 4px; }
.panel-head h2 { white-space: nowrap; }
.energy-scroll { max-height: 420px; overflow-y: auto; }
.energy-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-muted); }
.energy-credit { margin: 16px; font-size: 12px; color: var(--text-muted); }
.energy-steps { margin: 0; padding: 4px 16px 4px 40px; display: flex; flex-direction: column; gap: 8px; }