/* Solar Split design system: screen layout.
   Page furniture, bands, grids, chart, meter and statement styles for the app screens
   (Live, History, Bills, Battery, Plan, Savings, Settings, Data quality, How it works).
   Values are taken one for one from the approved mockup's inline styles. */

/* energy roles: the one place chart, legend and table colours are bound to tokens */
.e-sb { background: var(--energy-solar-battery); }
.e-sx { background: var(--energy-solar-export); }
.e-bx { background: var(--energy-battery-export); }
.e-sol-o { background: var(--energy-sol-o); } .e-sol-0 { background: var(--energy-sol-0); } .e-sol-1 { background: var(--energy-sol-1); } .e-sol-2 { background: var(--energy-sol-2); }
.e-bat-o { background: var(--energy-bat-o); } .e-bat-0 { background: var(--energy-bat-0); } .e-bat-1 { background: var(--energy-bat-1); } .e-bat-2 { background: var(--energy-bat-2); }
.e-gr-o { background: var(--energy-gr-o); } .e-gr-0 { background: var(--energy-gr-0); } .e-gr-1 { background: var(--energy-gr-1); } .e-gr-2 { background: var(--energy-gr-2); }
.e-sol-3 { background: var(--energy-sol-3); } .e-sol-4 { background: var(--energy-sol-4); } .e-bat-3 { background: var(--energy-bat-3); } .e-bat-4 { background: var(--energy-bat-4); } .e-gr-3 { background: var(--energy-gr-3); } .e-gr-4 { background: var(--energy-gr-4); }

/* frame */
.app { min-height: 100dvh; background: var(--color-bg); color: var(--color-text); }
.app-main { max-width: 1280px; margin: 0 auto; outline: none; }
.band { border-bottom: 2px solid var(--color-divider); }
.grid-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--fit), 1fr)); }
.section { padding: var(--space-6) var(--gut); }
.col { display: flex; flex-direction: column; }
.scroll-x { overflow-x: auto; }
.r { text-align: right; }
.semi { font-weight: 600; }
.nowrap { white-space: nowrap; }
.mr6 { margin-right: 6px; }
.note-11 { font-size: var(--fs-1); color: var(--color-neutral-800); }
.note-12 { font-size: var(--fs-1); }

/* headings */
.h-section { font-size: var(--fs-4); margin: 0; }
.h-tight { margin: 0 0 var(--space-3); }
.h-4px { margin: 0 0 4px; }
.h-16 { margin: 0 0 var(--space-4); }
.h-lead { margin: 6px 0 0; font-size: var(--fs-5); }
.h-sub { font-size: var(--fs-3); margin: var(--space-4) 0 4px; }
.h-sub2 { margin-bottom: var(--space-2); }
.h-sub3 { margin: var(--space-6) 0 var(--space-2); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); padding: var(--space-8) var(--gut) var(--space-4); border-bottom: 2px solid var(--color-divider); }
.page-head--sticky { position: sticky; z-index: 10; background: var(--color-bg); }
/* phone, in the app: the sticky head is one compact app bar that replaces the top bar while it is stuck: flush at the top, clear of the notch, title and actions on one row */
@media (max-width: 759.98px) {
  .app-shell .page-head--sticky { top: 0; z-index: 21; flex-wrap: nowrap; align-items: center; gap: var(--space-2); padding: calc(var(--safe-top) + var(--space-2)) max(var(--gut), var(--safe-right)) var(--space-2) max(var(--gut), var(--safe-left)); }
  .app-shell .page-head--sticky .card-kicker { display: none; }
  .app-shell .page-head--sticky .page-head-title { min-width: 0; flex: 1; }
  .app-shell .page-head--sticky .page-title { margin: 0; font-size: var(--fs-4); line-height: 1.2; }
}
.page-head-title { margin-right: auto; }
.page-title { margin: 4px 0 0; font-size: var(--fs-6); text-wrap: balance; }
.pair-btns { display: flex; gap: 2px; }
.sel-auto { width: auto; }
.lede-sm { margin: 0 0 var(--space-4); max-width: 70ch; }
.lede-tight { margin-bottom: var(--space-2); }

/* legends */
.legend { margin-left: auto; display: flex; gap: var(--space-3) var(--space-4); flex-wrap: wrap; font-size: var(--fs-1); }
.legend--wide { gap: var(--space-4); }
.legend--roi { margin: var(--space-3) 0 0; }
.legend--sav { margin: var(--space-3) 0 0; gap: var(--space-4); }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-item--8 { gap: 8px; }
.legend-sw { width: 10px; height: 10px; display: block; }
.lg-line { width: 14px; display: block; }
.lg-line--2 { height: 2px; }
.lg-line--3 { height: 3px; }
.lg-dash { width: 14px; height: 0; display: block; border-top: 2px dashed var(--color-accent); }
.sav-gap { margin-left: var(--space-4); }
.chart-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.chart-head--base { align-items: baseline; margin-bottom: var(--space-3); }
.chart-head--rows12 { row-gap: var(--space-3); }
.chart-head--tight { margin-bottom: var(--space-2); }
.chart-head--roomy { margin-bottom: var(--space-4); }
.chart-note { margin: var(--space-3) 0 0; }
.trace-note { max-width: 80ch; }
.note-trace8 { margin: var(--space-2) 0 0; max-width: 80ch; }

/* live */
.live-copy { padding: var(--space-8) var(--gut); display: flex; flex-direction: column; gap: var(--space-6); }
.live-kicker { display: flex; align-items: center; gap: 8px; font-size: var(--fs-1); letter-spacing: 0.08em; text-transform: uppercase; }
/* a disclaimer that must be read (example data): a solid chip, full-strength ink, a visible edge. Never a faint line on the page. */
.live-kicker--chip { display: inline-flex; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-control-border); border-radius: calc(var(--radius-sm) * 2); background: var(--color-surface); color: var(--color-text); font-weight: 600; }
.hero-num { font: 800 clamp(4rem, 10vw, 6rem)/0.9 var(--font-heading); letter-spacing: -0.04em; display: flex; align-items: baseline; gap: 10px; }
.hero-num--batt { font: 800 clamp(4.5rem, 12vw, 7.5rem)/0.9 var(--font-heading); display: block; color: var(--color-accent-800); }
.hero-unit { font-size: var(--fs-5); letter-spacing: 0; }
.hero-num .pct { font-size: var(--fs-6); }
.hero-sub { font-size: var(--fs-3); margin-top: 10px; }
.flows { display: flex; flex-direction: column; border-top: 2px solid var(--color-divider); }
.flow-row { display: grid; grid-template-columns: minmax(110px, 140px) 1fr 72px; align-items: center; gap: var(--space-3); padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
.flow-row > span:first-child { font-size: var(--fs-2); }
.flow-svg { display: block; overflow: visible; }
.flow-kw { font: 800 1.0625rem var(--font-heading); text-align: right; font-variant-numeric: tabular-nums; }
.ctrl-note { display: flex; gap: var(--space-3); align-items: flex-start; flex-wrap: wrap; padding: var(--space-3) var(--space-4); background: var(--color-surface); }
.ctrl-note > span:last-child { font-size: var(--fs-1); flex: 1 1 220px; }
.hero-3d { position: relative; min-height: var(--hero-h); background: var(--color-surface); }
.p3d { position: absolute; inset: 0; display: block; height: 100%; cursor: grab; }
.p3d.is-dragging { cursor: grabbing; }
.p3d canvas { display: block; }
.p3d-fallback { position: absolute; inset: 0; }
.p3d-fallback svg, .p3d-svg { display: block; width: 100%; height: 100%; }
/* the property's things (homes, solar, battery, grid, meter) as real buttons over the drawing: label, tooltip, keyboard, selection */
.p3d-hot-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.p3d-hot { position: absolute; left: 0; top: 0; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; pointer-events: none; touch-action: pan-y; }
.p3d-hot:focus-visible { outline: none; }
.p3d-hot--stack { left: 25%; right: 25%; top: 8%; bottom: 8%; }
.p3d-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.p3d-ring polygon { fill: transparent; stroke: none; pointer-events: all; cursor: pointer; touch-action: pan-y; }
@media (hover: hover) and (pointer: fine) { .p3d-hot:hover .p3d-ring polygon { fill: color-mix(in srgb, var(--color-text) 6%, transparent); } }
.p3d-hot:focus-visible .p3d-ring polygon, .p3d-hot[aria-pressed='true'] .p3d-ring polygon { stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; fill: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.p3d-label { position: absolute; left: 50%; transform: translateX(calc(-50% + var(--p3d-shift, 0px))); padding: 1px 6px; font: 600 0.875rem/1.3 var(--font-body); letter-spacing: 0.02em; white-space: nowrap; color: var(--color-text); background: color-mix(in srgb, var(--color-bg) 88%, transparent); pointer-events: none; }
.p3d-hot--home .p3d-label { top: 100%; margin-top: -3px; }
.p3d-hot--solar .p3d-label, .p3d-hot--battery .p3d-label, .p3d-hot--grid .p3d-label { bottom: 100%; margin-bottom: 1px; }
/* home names are always shown; solar, battery, grid and meter name themselves on hover, focus and selection (less clutter, still real text) */
.p3d-hot--solar .p3d-label, .p3d-hot--battery .p3d-label, .p3d-hot--grid .p3d-label, .p3d-hot--meter .p3d-label, .p3d-hot-layer[data-compact] .p3d-label { width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
.p3d-hot--solar:is(:focus-visible, [aria-pressed='true']) .p3d-label, .p3d-hot--battery:is(:focus-visible, [aria-pressed='true']) .p3d-label, .p3d-hot--grid:is(:focus-visible, [aria-pressed='true']) .p3d-label, .p3d-hot--meter:is(:focus-visible, [aria-pressed='true']) .p3d-label,
.p3d-hot-layer[data-compact] .p3d-hot:is(:focus-visible, [aria-pressed='true']) .p3d-label { width: auto; height: auto; padding: 1px 6px; overflow: visible; clip: auto; }
@media (hover: hover) and (pointer: fine) {
.p3d-hot--solar:hover .p3d-label, .p3d-hot--battery:hover .p3d-label, .p3d-hot--grid:hover .p3d-label, .p3d-hot--meter:hover .p3d-label,
.p3d-hot-layer[data-compact] .p3d-hot:hover .p3d-label { width: auto; height: auto; padding: 1px 6px; overflow: visible; clip: auto; }
}
.p3d-hot--meter .p3d-label { bottom: 100%; margin-bottom: 1px; }
.p3d-hot--stack .p3d-label { bottom: auto; top: 100%; margin-top: 4px; width: auto; height: auto; padding: 1px 6px; overflow: visible; clip: auto; }
.p3d-hot[aria-pressed='true'] .p3d-label { background: var(--color-accent); color: var(--color-bg); }
/* the SVG fallback: the same scene, flat, from the same camera */
.p3d-ground { fill: var(--color-surface); }
.p3d-grid { fill: none; stroke: var(--color-neutral-300); stroke-width: 1; }
.p3d-face { stroke: var(--color-text); stroke-width: 1; stroke-linejoin: round; }
.p3d-c-paper { --c: var(--color-neutral-100); } .p3d-c-surf { --c: var(--color-surface); } .p3d-c-ink { --c: var(--color-text); } .p3d-c-red { --c: var(--color-accent); }
.p3d-c-panel { --c: var(--color-neutral-900); } .p3d-c-n8 { --c: var(--color-neutral-800); } .p3d-c-n4 { --c: var(--color-neutral-400); }
.p3d-f-top { fill: var(--c); }
.p3d-f-front { fill: color-mix(in srgb, var(--c) 90%, var(--color-neutral-900)); }
.p3d-f-left { fill: color-mix(in srgb, var(--c) 80%, var(--color-neutral-900)); }
.p3d-sel { stroke: var(--color-accent); stroke-width: 2; }
.p3d-pole { stroke: var(--color-neutral-800); stroke-width: 3; }
.p3d-fence { fill: none; stroke: var(--color-neutral-500); stroke-width: 1.2; }
.p3d-sun { fill: var(--color-accent); }
.p3d-flow { fill: none; stroke-linecap: round; stroke-dasharray: 0.1 9; animation: p3d-march 1s linear infinite; }
.p3d-flow--hatch { stroke-linecap: butt; stroke-dasharray: 5 6; opacity: 0.55; animation-name: p3d-march-hatch; }
.p3d-arrow { opacity: 0.95; stroke: none; }
.p3d-dim { opacity: 0.18; }
@keyframes p3d-march { to { stroke-dashoffset: -9.1; } }
@keyframes p3d-march-hatch { to { stroke-dashoffset: -11; } }
@media (prefers-reduced-motion: reduce) { .p3d-flow { animation: none; } }
.hero-tags { position: absolute; left: var(--gut); right: var(--gut); bottom: var(--space-4); display: flex; gap: var(--space-2); flex-wrap: wrap; pointer-events: none; }
.hero-tag-flat { gap: 6px; }
.hero-hint { position: absolute; right: var(--gut); top: var(--space-4); font-size: var(--fs-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); pointer-events: none; text-align: right; }

/* tiles and cells */
.tile { padding: var(--space-4) var(--gut); border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); display: flex; flex-direction: column; gap: 6px; }
.tile-num { font: 800 2rem/1 var(--font-heading); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tile-unit { font-size: var(--fs-2); margin-left: 4px; letter-spacing: 0; }
/* a slim level bar along the bottom edge of a tile (battery charge level): sits in the tile's padding, so the layout does not move */
.tile--level { position: relative; }
.tile-level { position: absolute; left: var(--gut); right: var(--gut); bottom: 6px; height: 3px; }
.tile--sav { display: block; padding: var(--space-6) var(--gut); }
.sav-num { font: 800 3rem/1 var(--font-heading); letter-spacing: -0.03em; margin: 8px 0 6px; }
.cell5 { padding: var(--space-4) var(--gut); border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.cell5-num { font: 800 1.5rem/1.2 var(--font-heading); }
.q-num { font: 800 2rem/1.1 var(--font-heading); }

/* charts */
.dchart { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-2); }
.dchart-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: var(--fs-1); color: var(--color-neutral-800); text-align: right; height: var(--chart-axis); padding-bottom: 18px; }
.dchart-cols { display: grid; grid-template-columns: repeat(var(--n, 24), minmax(0, 1fr)); gap: var(--chart-gap); position: relative; }
.dchart-col { display: flex; flex-direction: column; min-width: 0; }
.dchart-up, .dchart-down { opacity: var(--op, 1); }
.dchart-up { height: var(--chart-up); display: flex; flex-direction: column-reverse; transform-origin: bottom; }
.dchart-base { height: 2px; background: var(--color-text); }
.dchart-down { height: var(--chart-down); display: flex; flex-direction: column; transform-origin: top; }
.dchart-label { font-size: var(--fs-1); color: var(--color-neutral-800); height: 16px; white-space: nowrap; }
.dchart-cols--marked { margin-top: 1.75rem; }
.dchart-now { position: absolute; top: 0; bottom: 18px; width: 2px; background: var(--color-accent); }
.dchart-tag, .dchart-fc { position: absolute; top: -1.625rem; font-size: var(--fs-1); font-weight: 600; line-height: 1.2; white-space: nowrap; pointer-events: none; }
.dchart-tag { left: 50%; transform: translateX(-50%); color: var(--color-accent-700); }
.dchart-fc { margin-left: 1.5rem; color: var(--ink-2); }
.dseg { flex: none; }

.pchart { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--chart-gap); align-items: end; border-bottom: 2px solid var(--color-text); }
.pchart-pair { display: flex; gap: 1px; align-items: flex-end; height: 100%; min-width: 0; }
.pchart-bar { flex: 1; display: flex; flex-direction: column-reverse; transform-origin: bottom; }
.pchart-labels { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--chart-gap); }
.pchart-labels span { font-size: var(--fs-1); color: var(--color-neutral-800); white-space: nowrap; }
.p-h-avoid { background: var(--color-accent-300); }
.p-h-credit { background: var(--hatch-neutral); }
.p-f-avoid { background: var(--color-accent); }
.p-f-credit { background: var(--energy-solar-export); }
.p-f-sold { background: var(--color-accent-900); }

.lc { display: block; overflow: visible; }
.lc-area { fill: var(--color-accent-100); }
.lc-base { stroke: var(--color-text); stroke-width: 2; }
.lc-break { stroke: var(--color-accent); stroke-width: 2; stroke-dasharray: 4 4; }
.lc-line { fill: none; }
.lc-demand { stroke: var(--color-text); stroke-width: 1.5; }
.lc-export { stroke: var(--color-accent-700); stroke-width: 2.5; }
.lc-soc { stroke: var(--color-accent-800); stroke-width: 3; }
.lc-future { stroke: var(--color-accent-800); stroke-width: 2; stroke-dasharray: 5 5; opacity: 0.45; }
.gap-waste { fill: var(--color-accent-300); }
.gap-top { fill: var(--color-neutral-300); }
.x-ticks { display: flex; justify-content: space-between; font-size: var(--fs-1); color: var(--color-neutral-800); margin-top: 4px; }
.x-ticks--flush { margin-top: 0; }

/* meters (split and mix bars) */
.meter--tall { height: 28px; }
.meter--split { gap: 2px; }
.meter--mix { height: 10px; margin-bottom: var(--space-4); }
.meter--row { height: 10px; }
.meter--result { height: 36px; margin-top: var(--space-4); }
.meter--roi { height: 14px; margin-bottom: var(--space-2); }
.meter-seg { flex: var(--flex, 1) 1 0%; background: var(--sw); }
.meter > .meter-seg { transform-origin: left; min-width: 0; }
.result-seg { display: flex; align-items: center; padding-left: 8px; font-size: var(--fs-1); font-weight: 600; white-space: nowrap; overflow: hidden; }

/* projected amounts / party cards */
.mtd { padding: var(--space-6) var(--gut); align-items: end; gap: var(--space-6); }
.mtd-copy { margin: 6px 0 0; }
.mtd-figs { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font: 800 1.125rem var(--font-heading); flex-wrap: wrap; }
.mtd-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.party { padding: var(--space-6) var(--gut); border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.party-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4); }
.party-head--sav { margin-bottom: 0; }
.party-self { margin-left: auto; }
.stats4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--color-divider); }
.stat { padding: 10px 0; display: flex; flex-direction: column; gap: 2px; }
.stat-num { font: 800 1.25rem var(--font-heading); }
.stat-unit { font-size: var(--fs-1); margin-left: 3px; }

/* tables */
.cell-who { display: flex; align-items: center; gap: 8px; }

/* bills */
.bill-card {
  appearance: none; border: 0; margin: 0; font: inherit; text-align: inherit; cursor: pointer;
  padding: var(--space-4) var(--gut); border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider);
  background: transparent; color: var(--color-text); display: flex; flex-direction: column; gap: 4px; box-shadow: inset 0 -3px 0 transparent;
}
.bill-card[aria-pressed='true'] { background: var(--color-text); color: var(--color-bg); box-shadow: inset 0 -3px 0 var(--color-accent); }
@media (hover: hover) and (pointer: fine) { .bill-card:hover { box-shadow: inset 0 -3px 0 var(--color-accent-300); } }
.bill-lbl { font-size: var(--fs-1); color: inherit; }
.bill-total { font: 800 1.5rem var(--font-heading); }
.bill-row { font-size: var(--fs-1); display: flex; gap: 8px; align-items: center; color: inherit; }
.bill-tag { margin-left: auto; }
.form-dates { gap: var(--space-4); padding: var(--space-6) var(--gut); }
.form-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(90px, 0.8fr); gap: var(--space-3); align-items: center; padding: 10px 0; border-top: 1px solid var(--color-divider); }
.form-lbl { display: flex; align-items: center; gap: 8px; }
.form-lbl .swatch { flex: none; }
.form-in { display: flex; align-items: center; gap: 6px; }
.form-unit { width: 28px; }
.form-amt { text-align: right; font: 800 1.0625rem var(--font-heading); }
.form-total { display: flex; align-items: baseline; padding: 14px 0; border-top: 2px solid var(--color-divider); }
.tot-l { font: 800 1.0625rem var(--font-heading); }
.tot-r { margin-left: auto; font: 800 1.75rem var(--font-heading); }
.xcheck { display: grid; grid-template-columns: 90px minmax(0, 1fr) 70px; gap: var(--space-3); align-items: center; padding: 8px 0; border-top: 1px solid var(--color-divider); font-size: var(--fs-1); }
.xdiff { text-align: right; font-weight: 600; }
.attach { display: flex; align-items: center; gap: 10px; margin-top: var(--space-4); padding: var(--space-4); border: 1px dashed var(--color-divider); cursor: pointer; font-size: var(--fs-2); }
.attach-note { margin-left: auto; }
.save-row { display: flex; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; }
.save-row .note { align-self: center; }
.save-btn { min-width: 200px; }
.result-band { padding: var(--space-6) var(--gut); background: var(--color-text); color: var(--color-bg); }
.result-top { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
.result-l { margin-right: auto; }
.result-l .label-caps, .label-caps.op8 { color: inherit; }
.result-num { font: 800 clamp(2.5rem, 7vw, 4rem)/1 var(--font-heading); letter-spacing: -0.03em; margin-top: 6px; }
.result-check { display: flex; align-items: center; gap: 6px; font-size: var(--fs-1); }
.result-key { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: var(--fs-1); font-weight: 600; }
.result-key-flat { display: flex; align-items: center; gap: 6px; }
.result-notes { display: flex; gap: var(--space-2) var(--space-6); flex-wrap: wrap; margin-top: var(--space-3); font-size: var(--fs-1); }
.party--bill { border-bottom-width: 2px; }
.party-top { display: flex; align-items: center; gap: 8px; }
.party-name { font: 800 1.0625rem var(--font-heading); }
.party-tag { margin-left: auto; }
.party-total { font: 800 2.25rem/1.1 var(--font-heading); margin: 6px 0 2px; }
.party-sub { margin: 0 0 var(--space-3); }
.bl { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; font-size: var(--fs-2); }
.party-btns { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.party-btn { flex: 1 1 160px; justify-content: flex-start; min-height: 44px; }
.party-btn .arrow { margin-left: auto; }
.btn-cta.party-btn { min-width: 0; }
.payer-note { margin: var(--space-3) 0 0; }
.doc-row { padding: var(--space-4) var(--gut); display: flex; align-items: center; gap: 10px; font-size: var(--fs-1); flex-wrap: wrap; }
.doc-note { margin-left: auto; color: var(--color-neutral-800); }

/* statement dialog */
.modal-body { padding: var(--space-8) clamp(16px, 5vw, 48px); }
.stm-head { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; justify-content: space-between; border-bottom: 2px solid var(--color-text); padding-bottom: var(--space-4); }
.stm-title { font: 800 2.5rem/1 var(--font-heading); letter-spacing: -0.02em; }
.stm-no { font-size: var(--fs-2); margin-top: 6px; }
.stm-meta { display: grid; grid-template-columns: auto auto; gap: 2px var(--space-4); font-size: var(--fs-1); }
.stm-parties { gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-divider); font-size: var(--fs-2); }
.stm-intro { margin: var(--space-4) 0; max-width: 70ch; }
.stm-table { margin-top: var(--space-2); }
.stm-sum { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--space-4); margin-top: var(--space-3); font-size: var(--fs-2); }
.stm-due-l { font: 800 1.25rem var(--font-heading); border-top: 2px solid var(--color-text); padding-top: 8px; }
.stm-due-r { font: 800 1.75rem var(--font-heading); border-top: 2px solid var(--color-text); padding-top: 4px; text-align: right; }
.stm-pay { margin-top: var(--space-6); padding: var(--space-4); background: var(--color-surface); gap: var(--space-3); }
.stm-pay-t { grid-column: 1 / -1; font: 800 1rem var(--font-heading); }
.stm-fig { font: 800 1.125rem var(--font-heading); }
.stm-foot { margin: var(--space-4) 0 0; }

/* battery */
.batt-copy { padding: var(--space-8) var(--gut); display: flex; flex-direction: column; gap: var(--space-4); }
.batt-copy .hero-sub { margin-top: 0; }
.batt-status { display: flex; flex-direction: column; gap: 6px; border-top: 2px solid var(--color-divider); padding-top: var(--space-4); }
.batt-text { font-size: var(--fs-2); }
.trace-stats { border-top: 2px solid var(--color-divider); margin-top: var(--space-4); }
.trace-stat { padding: 10px 0; }
.trace-num { font: 800 1.25rem var(--font-heading); }
.ledger { border-right: 1px solid var(--color-divider); border-bottom: 2px solid var(--color-divider); }
.ledger-copy { margin: 0 0 var(--space-3); }
.ledger-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 80px; gap: 10px; align-items: center; padding: 10px 0; }
.ledger-name { font-size: var(--fs-2); }
.ledger-how { font-size: var(--fs-1); font-weight: 400; color: var(--color-neutral-800); }
.ledger-kwh { font-size: var(--fs-2); text-align: right; }
.ledger-v { font: 800 0.9375rem var(--font-heading); text-align: right; }
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 2px solid var(--color-divider); }
.stat-cell { min-width: 0; overflow-wrap: anywhere; padding: var(--space-4) var(--gut); border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.stat-cell-num { font: 800 1.375rem var(--font-heading); }
.roi-stats { border-top: 2px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); margin-bottom: var(--space-4); }
.roi-stat { padding: var(--space-3) var(--space-4) var(--space-3) 0; }
.roi-num { font: 700 var(--fs-5)/1.1 var(--font-heading); }
.roi-num--accent { color: var(--color-accent-800); }
.roi-chart { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-2); }
.roi-axis { display: flex; flex-direction: column; justify-content: space-between; height: 220px; font-size: var(--fs-1); color: var(--color-neutral-800); text-align: right; }
.roi-years { display: flex; justify-content: space-between; font-size: var(--fs-1); color: var(--color-neutral-800); margin-top: 4px; }
.roi-legend { gap: var(--space-2) var(--space-6); font-size: var(--fs-2); }

/* plan */
.days { display: flex; gap: 2px; }
.day-btn { appearance: none; margin: 0; padding: 0; font: inherit; cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; font-size: var(--fs-1); font-weight: 600; background: transparent; color: var(--color-text); border: 1px solid var(--color-divider); }
.day-btn[aria-pressed='true'] { background: var(--color-text); color: var(--color-bg); }
.rm-btn { min-height: 36px; }
.plan-btns { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.week { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 8px; align-items: center; }
.week-row { display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); height: 26px; gap: 1px; }

/* settings */
.set-group { gap: var(--space-4) var(--space-8); }
.set-title { grid-column: 1 / -1; }
.setting { display: flex; flex-direction: column; gap: 6px; padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.setting-l { display: flex; align-items: baseline; gap: 8px; }
.setting-name { font-weight: 600; font-size: var(--fs-2); }
.setting-desc { text-wrap: pretty; }
.range-row { display: flex; align-items: center; gap: var(--space-3); }
.range-val { font: 800 1.0625rem var(--font-heading); width: 48px; text-align: right; }

/* data quality */
.gap-row { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--color-divider); align-items: start; }
.qbar { display: flex; align-items: center; gap: 8px; }
.qbar-track { width: 90px; height: 8px; background: var(--color-neutral-200); }
.qbar-fill { height: 100%; transform-origin: left; }
.q-notes { gap: var(--space-4) var(--space-8); margin-top: var(--space-4); font-size: var(--fs-1); color: var(--color-neutral-800); }
.q-notes p { margin: 0; }
.q-notes b { color: var(--color-text); }

/* how it works */
.explain-hero { padding: var(--space-8) var(--gut) var(--space-6); border-bottom: 2px solid var(--color-divider); background: var(--color-accent-700); color: var(--color-bg); }
.explain-kick { color: inherit; font-size: var(--fs-1); }
.explain-h1 { font: 800 clamp(2rem, 5vw, 3.5rem)/1.05 var(--font-heading); letter-spacing: -0.03em; max-width: 18ch; margin: var(--space-3) 0 0; text-wrap: balance; }
.explain-lede { font-size: var(--fs-3); font-weight: 600; max-width: 52ch; margin: var(--space-4) 0 0; }
.step-l { padding: var(--space-6) var(--gut); display: flex; flex-direction: column; gap: var(--space-3); border-right: 1px solid var(--color-divider); }
.step-head { display: flex; align-items: center; gap: var(--space-3); }
.step-n { width: 36px; height: 36px; flex: none; background: var(--color-text); color: var(--color-bg); display: grid; place-items: center; font: 800 1.0625rem var(--font-heading); }
.step-p { margin: 0; max-width: 62ch; line-height: 1.6; text-wrap: pretty; }
.formula { white-space: pre-wrap; font-size: var(--fs-2); line-height: 1.9; font-variant-numeric: tabular-nums; background: var(--color-surface); border: 1px solid var(--color-divider); padding: var(--space-3) var(--space-4); overflow-x: auto; }
.step-note { margin: 0; max-width: 62ch; }
.step-r { padding: var(--space-6) var(--gut); display: flex; flex-direction: column; gap: var(--space-3); justify-content: center; background: var(--color-neutral-100); }
.vis-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.vis-l { font-size: var(--fs-1); }
.vis-bar { display: flex; height: 30px; gap: 2px; }
.sav-total { font: 800 2.5rem/1.1 var(--font-heading); margin: 8px 0 var(--space-3); font-variant-numeric: tabular-nums; }
.sav-cols { display: grid; gap: 0 var(--space-3); border-top: 2px solid var(--color-divider); }
.vis-seg { flex: var(--flex, 1) 1 0%; transform-origin: left; display: flex; align-items: center; padding: 0 6px; font-size: var(--fs-1); font-weight: 800; white-space: nowrap; overflow: hidden; min-width: 0; }

/* chart hover: dim the other bars, highlight overlay columns (the prototype's [data-tip] behaviour) */
[data-tip] { cursor: default; transition: opacity 0.25s var(--ease-tip); }
[data-hov] > [data-tip]:not([data-on]) { opacity: 0.4 !important; }
@media (prefers-reduced-motion: reduce) { [data-tip] { transition: none; } }
[data-tip-group]:focus-visible { outline-offset: 4px; }
.lc-wrap { position: relative; overflow-x: clip; }
.lc-cols { position: absolute; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.lc-cols [data-col] { min-width: 0; }
.lc-cols [data-col][data-on] { background: color-mix(in srgb, var(--color-accent) 8%, transparent); box-shadow: inset 1px 0 color-mix(in srgb, var(--color-accent) 35%, transparent), inset -1px 0 color-mix(in srgb, var(--color-accent) 35%, transparent); }
[data-hov] > [data-col]:not([data-on]) { opacity: 1 !important; }

/* savings bars for the third and fourth home, and the My system controls */
.p-h-1 { background: var(--energy-sol-1); }
.p-h-2 { background: var(--energy-sol-2); }
.vis-group { display: flex; flex-direction: column; gap: var(--space-3); }
.own-btn { align-self: flex-start; }
.setting .input, .setting .seg { align-self: flex-start; }
.setting .seg { flex-wrap: wrap; }

/* how it works: a step is its text beside its diagram (the diagram drops below on a narrow screen) */
.step { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); border-bottom: 2px solid var(--color-divider); }
.meter--vis { height: 30px; }
.vis-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vis-legend { margin: 0; padding: 0; list-style: none; }
.vis-cap, .vis-note { margin: 0; }
.vis-row + .vis-note { margin-top: var(--space-2); }