/* 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); }

/* 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: 11px; color: var(--color-neutral-800); }
.note-12 { font-size: 12px; }

/* headings */
.h-section { font-size: 20px; 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: 25px; }
.h-sub { font-size: 16px; 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); }
.page-head-title { margin-right: auto; }
.page-title { margin: 4px 0 0; font-size: 32px; 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: 12px; }
.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: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-num { font: 800 clamp(64px, 10vw, 96px)/0.9 var(--font-heading); letter-spacing: -0.04em; display: flex; align-items: baseline; gap: 10px; }
.hero-num--batt { font: 800 clamp(72px, 12vw, 120px)/0.9 var(--font-heading); display: block; color: var(--color-accent-800); }
.hero-unit { font-size: 28px; letter-spacing: 0; }
.hero-num .pct { font-size: 32px; }
.hero-sub { font-size: 17px; 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: 14px; }
.flow-svg { display: block; overflow: visible; }
.flow-kw { font: 800 17px 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: 13px; 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%; }
.p3d canvas { display: block; }
.p3d-fallback { position: absolute; inset: 0; }
.p3d-fallback svg { display: block; width: 100%; height: 100%; }
.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: 11px; 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 32px/1 var(--font-heading); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tile-unit { font-size: 14px; margin-left: 4px; letter-spacing: 0; }
.tile--sav { display: block; padding: var(--space-6) var(--gut); }
.sav-num { font: 800 48px/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 24px/1.2 var(--font-heading); }
.q-num { font: 800 32px/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: 11px; 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 { 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: 11px; color: var(--color-neutral-800); height: 16px; white-space: nowrap; }
.dchart-now { position: absolute; top: 0; bottom: 18px; width: 2px; background: var(--color-accent); }
.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: 11px; 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: 11px; 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: 13px; 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 18px 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 20px var(--font-heading); }
.stat-unit { font-size: 11px; 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); }
.bill-card:hover { box-shadow: inset 0 -3px 0 var(--color-accent-300); }
.bill-lbl { font-size: 12px; opacity: 0.8; color: inherit; }
.bill-total { font: 800 24px var(--font-heading); }
.bill-row { font-size: 12px; 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 17px var(--font-heading); }
.form-total { display: flex; align-items: baseline; padding: 14px 0; border-top: 2px solid var(--color-divider); }
.tot-l { font: 800 17px var(--font-heading); }
.tot-r { margin-left: auto; font: 800 28px 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: 13px; }
.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: 14px; }
.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; opacity: 0.8; }
.result-num { font: 800 clamp(40px, 7vw, 64px)/1 var(--font-heading); letter-spacing: -0.03em; margin-top: 6px; }
.result-check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.result-key { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 13px; 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: 13px; }
.party--bill { border-bottom-width: 2px; }
.party-top { display: flex; align-items: center; gap: 8px; }
.party-name { font: 800 17px var(--font-heading); }
.party-tag { margin-left: auto; }
.party-total { font: 800 36px/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: 14px; }
.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: 13px; 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 40px/1 var(--font-heading); letter-spacing: -0.02em; }
.stm-no { font-size: 14px; margin-top: 6px; }
.stm-meta { display: grid; grid-template-columns: auto auto; gap: 2px var(--space-4); font-size: 13px; }
.stm-parties { gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.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: 14px; }
.stm-due-l { font: 800 20px var(--font-heading); border-top: 2px solid var(--color-text); padding-top: 8px; }
.stm-due-r { font: 800 28px 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 16px var(--font-heading); }
.stm-fig { font: 800 18px 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: 14px; }
.trace-stats { border-top: 2px solid var(--color-divider); margin-top: var(--space-4); }
.trace-stat { padding: 10px 0; }
.trace-num { font: 800 20px 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: 14px; }
.ledger-how { font-size: 12px; font-weight: 400; color: var(--color-neutral-800); }
.ledger-kwh { font-size: 14px; text-align: right; }
.ledger-v { font: 800 15px 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 { 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 22px 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: 800 32px/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: 11px; color: var(--color-neutral-800); text-align: right; }
.roi-years { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); font-size: 11px; color: var(--color-neutral-800); margin-top: 4px; }
.roi-legend { gap: var(--space-2) var(--space-6); font-size: 14px; }

/* 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: 11px; 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: 14px; }
.setting-desc { text-wrap: pretty; }
.range-row { display: flex; align-items: center; gap: var(--space-3); }
.range-val { font: 800 17px 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: 13px; 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: 12px; }
.explain-h1 { font: 800 clamp(32px, 5vw, 56px)/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: 19px; 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 17px var(--font-heading); }
.step-p { margin: 0; max-width: 62ch; line-height: 1.6; text-wrap: pretty; }
.formula { white-space: pre-wrap; font-size: 14px; 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: 13px; }
.vis-bar { display: flex; height: 30px; gap: 2px; }
.sav-total { font: 800 40px/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: 12px; 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; }