:root {
  --bg: #ffffff;
  --surface: #fbf8ef;
  --ink: #7a5900;          /* dark yellow - primary */
  --ink-2: #5e4a1a;
  --ink-3: #85754d;
  --text: #2f2817;
  --line: rgba(122, 89, 0, 0.22);
  --line-soft: rgba(122, 89, 0, 0.1);
  --on-ink: #ffffff;
  /* chart + illustration */
  --solar: #f0b400;
  --solar-dark: #a87100;
  --battery: #5f7395;
  --battery-grid: #a9b8d3; /* battery charge bought from the grid at the cheap rate */
  --grid: #d3cec2;
  --demand: #3f3a2e;
  --panel: #2f3542;
  --roof: #f7efd6;
  --warn: #b3261e;
  --serif: "Eczar", Georgia, "Times New Roman", serif;
  --sans: "Mukta", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
}
a { color: var(--ink); }
h1, h2 { font-family: var(--serif); font-weight: 400; margin: 0; color: var(--ink); }
h1 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.15; letter-spacing: -0.015em; }
h2 { font-size: 22px; line-height: 1.3; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.site-header { max-width: 1180px; margin: 0 auto; padding: 28px 40px 0; }
.wordmark { font-family: var(--serif); font-size: 22px; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; }
.wordmark i { width: 14px; height: 14px; border-radius: 50%; background: var(--solar); box-shadow: 0 0 0 4px rgba(240,180,0,.22); }

main { max-width: 1180px; margin: 0 auto; padding: 56px 40px 96px; }

/* Footer and the plain text pages (about, privacy, 404) */
.site-footer { max-width: 1180px; margin: 0 auto; padding: 24px 40px 48px; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; color: var(--ink-3); border-top: 1px solid var(--line-soft); }
.site-footer a { color: var(--ink-2); text-underline-offset: 3px; }
.page.prose { padding-bottom: 56px; }
.prose > * { max-width: 680px; }
.prose h1 { margin-bottom: 18px; }
.prose h2 { font-size: 24px; margin: 44px 0 12px; }
.prose p, .prose li { font-size: 17px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose .lede { font-size: 19px; color: var(--ink-3); margin: 0 0 8px; }
.prose .meta { color: var(--ink-3); font-size: 14px; margin-top: 36px; }
.prose a { color: var(--ink); }
.btn-inline { display: inline-flex; align-items: center; text-decoration: none; }
mark.todo { background: #ffe9a8; color: #5a3b00; padding: 1px 6px; border-radius: 4px; font-weight: 500; } /* a placeholder to fill in before launch */

/* ---------- Wizard ---------- */
.wizard { max-width: 600px; margin: 0 auto; }
input:disabled { opacity: .45; cursor: not-allowed; background: var(--surface); }
.unit-input:has(input:disabled) span { opacity: .45; }
.sub-q { margin-top: 16px; }
.sub-q label { display: block; font-size: 15px; color: var(--ink-2); margin-bottom: 8px; }
.scene { width: 100%; height: auto; display: block; }
.intro { margin-bottom: 48px; }
.intro-art { max-width: 380px; margin: 36px auto 0; }
.hero-art { width: 100%; max-width: 520px; margin: 0 auto; }
.lede { font-size: 19px; color: var(--ink-3); margin: 18px 0 0; }

.progress { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 48px; }
.progress li { flex: 1; font-size: 13px; color: var(--ink-3); letter-spacing: .02em; }
.progress li::before { content: ""; display: block; height: 3px; background: var(--line-soft); margin-bottom: 8px; border-radius: 2px; }
.progress li.done::before, .progress li.current::before { background: var(--ink); }
.progress li.current { color: var(--ink); font-weight: 500; }

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.q { margin: 0 0 40px; }
.q-label { display: block; font-family: var(--serif); font-size: 21px; color: var(--ink); margin-bottom: 14px; }
.hint { font-size: 14px; color: var(--ink-3); margin: 10px 0 0; }

.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choices.numeric span { min-width: 56px; justify-content: center; }
.choices label, .compass label, .seg label { position: relative; cursor: pointer; }
.choices input, .compass input, .seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choices span {
  display: flex; flex-direction: column; justify-content: center; height: 100%;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  padding: 10px 20px; min-height: 46px; font-weight: 500; color: var(--ink-2);
  transition: background .15s, color .15s, border-color .15s;
}
.choices small { font-size: 12px; font-weight: 400; color: var(--ink-3); line-height: 1.2; }
.choices label:hover span { border-color: var(--ink); }
.choices input:checked + span { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.choices input:checked + span small { color: rgba(255,255,255,.8); }
.choices input:focus-visible + span, .compass input:focus-visible + span, .seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }

.compass { display: grid; grid-template-columns: repeat(3, 64px); grid-auto-rows: 52px; gap: 8px; }
.compass span { display: flex; align-items: center; justify-content: center; height: 100%; border: 1px solid var(--line); border-radius: 10px; font-weight: 500; font-size: 15px; color: var(--ink-2); }
.compass .ew { grid-column: 1 / -1; }
.compass .centre { display: flex; align-items: center; justify-content: center; }
.compass .centre::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.compass label:hover span { border-color: var(--ink); }
.compass input:checked + span { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

input[type=text], input[type=number], select {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; min-height: 48px; width: 100%;
}
input:focus-visible, select:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
input::placeholder { color: var(--ink-3); opacity: .7; }
select { appearance: none; max-width: 420px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 22px) 21px, calc(100% - 17px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 44px; }
.unit-input { display: flex; max-width: 280px; }
select + .unit-input { margin-top: 10px; }
.unit-input input { flex: 1; min-width: 0; border-radius: 10px 0 0 10px; }
.unit-input span { display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--line); border-left: 0; border-radius: 0 10px 10px 0; font-size: 14px; color: var(--ink-3); white-space: nowrap; }
.unit-input .cur { border-left: 1px solid var(--line); border-right: 0; border-radius: 10px 0 0 10px; }
.unit-input .cur + input { border-radius: 0 10px 10px 0; }
.check { display: flex; gap: 12px; align-items: center; cursor: pointer; color: var(--ink-2); }
.check input { width: 20px; height: 20px; accent-color: var(--ink); }

.search { display: flex; gap: 10px; }
.search input { flex: 1; }
.map { height: 240px; margin-top: 16px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-soft); }
.leaflet-container { font-family: var(--sans); }

.advanced { margin: -8px 0 40px; }
.advanced summary, .more summary { cursor: pointer; list-style: none; color: var(--ink); }
.advanced summary { font-size: 15px; font-weight: 500; padding: 6px 0; display: inline-block; }
.advanced summary::-webkit-details-marker, .more summary::-webkit-details-marker { display: none; }
.advanced summary::after { content: " +"; }
.advanced[open] summary::after { content: " −"; }
.advanced[open] > summary { margin-bottom: 28px; }

button { font: inherit; cursor: pointer; }
.btn-primary, .btn-secondary { min-height: 50px; padding: 0 30px; border: 1px solid var(--ink); border-radius: 999px; font-weight: 500; }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--ink-2); }
.btn-secondary { background: transparent; color: var(--ink); }
.btn-secondary:hover { background: var(--surface); }
.btn-link { background: none; border: 0; padding: 8px 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-size: 15px; }
.nav { display: flex; gap: 12px; align-items: center; margin-top: 16px; }
.nav #next { margin-left: auto; }
.form-error { color: var(--warn); margin: 0 0 20px; }

/* ---------- Results ---------- */
.loading { max-width: 480px; padding: 60px 0; color: var(--ink-3); }
.loading-bar { height: 3px; background: var(--line-soft); overflow: hidden; border-radius: 2px; }
.loading-bar span { display: block; height: 100%; width: 35%; background: var(--solar); animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .loading-bar span { animation: none; width: 100%; opacity: .5; } }

.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.eyebrow { font-size: 14px; color: var(--ink-3); margin: 0 0 16px; }
#r-headline b { font-weight: 500; }
#r-headline .hl { background: none; text-decoration: underline; text-decoration-color: var(--solar-dark); text-decoration-thickness: .14em; text-underline-offset: .14em; text-decoration-skip-ink: none; }

.tabs { display: inline-flex; gap: 4px; margin: 36px 0 14px; padding: 4px; border-radius: 999px; background: var(--surface); max-width: 100%; }
.tabs button { background: transparent; color: var(--ink-2); border: 0; border-radius: 999px; padding: 8px 18px; font-weight: 500; font-size: 15px; min-height: 40px; }
.tabs button[aria-selected=true] { background: var(--ink); color: var(--on-ink); }
.opt-desc { font-size: 15px; color: var(--ink-3); margin: 0; max-width: 32em; }

.keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 72px 0 0; padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.keys dt { font-size: 14px; color: var(--ink-3); }
.keys dd { margin: 6px 0 0; font-family: var(--serif); font-size: 34px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.keys dd small { display: block; font-family: var(--sans); font-size: 14px; color: var(--ink-3); margin-top: 6px; line-height: 1.35; }

.note { font-size: 15px; color: var(--ink-2); margin: 28px 0 0; padding-left: 16px; border-left: 3px solid var(--solar); max-width: 44em; }
.note.warn { border-color: var(--warn); }

.block { margin-top: 88px; max-width: 920px; }
.block-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-3); margin-bottom: 12px; }
.block-head .legend { margin: 0; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legend i.line { height: 2px; width: 16px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--sans); font-size: 11px; fill: var(--ink-3); }
.chart .gridline { stroke: var(--line-soft); }
.chart .axis { stroke: var(--line); }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .hl { fill: var(--ink); opacity: 0; }
.chart .hl.on { opacity: .06; }

.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface); border-radius: 999px; }
.seg span { display: block; padding: 4px 14px; font-size: 13px; font-weight: 500; border-radius: 999px; color: var(--ink-2); }
.seg input:checked + span { background: var(--ink); color: var(--on-ink); }

.tooltip { position: fixed; z-index: 1000; pointer-events: none; background: var(--text); color: #fff; font-size: 13px; padding: 10px 12px; line-height: 1.45; min-width: 160px; border-radius: 8px; box-shadow: 0 6px 20px rgba(47,40,23,.18); }
.tooltip b { font-weight: 500; display: block; margin-bottom: 4px; }
.tooltip .row { display: flex; justify-content: space-between; gap: 18px; }
.tooltip i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; outline: 1px solid rgba(255,255,255,.5); }

.more { margin-top: 0; border-top: 1px solid var(--line); max-width: 920px; }
.block + .more { margin-top: 88px; }
.more:last-of-type { border-bottom: 1px solid var(--line); }
.more summary { font-family: var(--serif); font-size: 21px; padding: 20px 0; display: flex; justify-content: space-between; }
.more summary::after { content: "+"; font-family: var(--sans); font-weight: 300; font-size: 26px; line-height: 1; }
.more[open] summary::after { content: "−"; }
.more[open] { padding-bottom: 28px; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; margin: 4px 0 0; }
.stats dt { font-size: 14px; color: var(--ink-3); }
.stats dd { margin: 2px 0 0; font-family: var(--serif); font-size: 24px; color: var(--ink); font-variant-numeric: tabular-nums; }
.stats dd small { font-family: var(--sans); font-size: 14px; color: var(--ink-3); margin-left: 4px; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 15px; }
th, td { text-align: right; padding: 12px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; padding-left: 0; }
thead th { font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line); }
tbody th { font-weight: 400; color: var(--ink-3); }
td.sel, th.sel { color: var(--ink); font-weight: 500; }
tr.sel-row td, tr.sel-row th { color: var(--ink); font-weight: 500; background: var(--surface); }
.keys .limit { font-weight: 500; color: var(--warn); }

.bar-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto; gap: 16px; align-items: center; font-size: 15px; margin: 10px 0; }
.bar-row .track { height: 8px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.bar-row .fill { height: 100%; background: var(--solar); border-radius: 4px; }
.bar-row .val { font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; color: var(--ink-3); }

.assumption-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px 44px; }
.as-group h3 { font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--ink); margin: 0 0 12px; }
.as-row { margin-bottom: 14px; }
/* The tariff group is long: span the full width with its rate fields in a grid. */
.as-group.wide { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 28px; align-content: start; }
.as-group.wide h3, .as-group.wide .as-select, .as-group.wide .as-note { grid-column: 1 / -1; }
.as-group.wide select { max-width: 520px; }
.as-group.wide .as-select .hint, .as-group.wide .as-note { max-width: 46em; }
.as-group.wide .as-note { margin-top: 4px; }
/* Each tariff column (standard, cheap, peak) keeps its inputs together. */
.tcol h4 { font-family: var(--sans); font-weight: 500; font-size: 15px; color: var(--ink); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.assumption-grid label, .tariff-advanced .as-row label { font-size: 14px; display: block; margin-bottom: 6px; color: var(--ink-3); }
.assumption-grid .unit-input input, .tariff-advanced .unit-input input { min-height: 42px; padding: 6px 12px; }
/* The tariff rates also appear under the tariff question on the form. */
.tariff-advanced { margin: 12px 0 0; }
.tariff-advanced .as-row { margin-bottom: 14px; }

.results-nav { margin-top: 48px; }
.results-nav #edit { margin-left: 0; }
.disclaimer { margin-top: 48px; font-size: 14px; color: var(--ink-3); max-width: 48em; }
.disclaimer strong { font-weight: 500; color: var(--ink-2); }

/* ---------- Illustration ---------- */
.scene .sc-sun circle { fill: var(--solar); }
.scene .sc-rays line { stroke: var(--solar); stroke-width: 3; stroke-linecap: round; }
.scene .sc-roof { fill: var(--roof); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.scene .sc-wall { fill: var(--bg); stroke: var(--ink); stroke-width: 2; }
.scene .sc-win { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.scene .sc-door { fill: var(--roof); stroke: var(--ink); stroke-width: 1.5; }
.scene .sc-line { stroke: var(--ink); stroke-width: 1.5; }
.scene .sc-ground { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.scene .sc-panel rect, .scene .sc-panel polygon { fill: var(--panel); stroke: var(--panel); stroke-width: 1; }
.scene .sc-panel line { stroke: #6b7385; stroke-width: .8; }
.scene .sc-battery rect { fill: var(--bg); stroke: var(--ink); stroke-width: 2; }
.scene .sc-battery path { fill: var(--solar); }
.scene .sc-cloud circle, .scene .sc-cloud rect { fill: #f3ecd8; }
.scene .sc-trunk { fill: #8a6a3c; }
.scene .sc-leaf { fill: #a9b77e; }
.scene .sc-leaf2 { fill: #8fa066; }
.scene .sc-chimney { fill: var(--roof); stroke: var(--ink); stroke-width: 2; }
.scene .sc-sill, .scene .sc-step { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.scene .sc-knob { fill: var(--ink); }
.scene .sc-parapet { fill: var(--roof); stroke: var(--ink); stroke-width: 2; }
.scene .sc-sign { fill: var(--solar); }
.scene .sc-body { fill: #e9dcb8; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.scene .sc-glass { fill: #fbf8ef; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.scene .sc-wheel { fill: var(--text); }
.scene .sc-hub { fill: #d3cec2; }
.scene .sc-light { fill: var(--solar); }
.scene .sc-charger rect:first-child, .scene .sc-wallbox { fill: var(--bg); stroke: var(--ink); stroke-width: 2; }
.scene .sc-screen { fill: var(--solar); }
.scene .sc-cable { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.scene .sc-panel { animation: pop .35s ease-out both; }
@keyframes pop { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scene .sc-panel { animation: none; } }

.day-split { margin-top: 28px; }
.split-total { font-size: 15px; color: var(--ink-3); margin: 0 0 20px; }
.split-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 56px; }
.split-group h3 { font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--ink); margin: 0 0 10px; }
.split-group ul { list-style: none; margin: 0; padding: 0; }
.split-group li { display: grid; grid-template-columns: 10px 52px 1fr auto; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.split-group li i { width: 10px; height: 10px; border-radius: 2px; align-self: center; }
.split-pct { font-family: var(--serif); font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.split-label { color: var(--ink-2); font-size: 15px; }
.split-kwh { color: var(--ink-3); font-size: 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .split-groups { grid-template-columns: 1fr; } }

.battery-lead { font-size: 17px; color: var(--ink-2); margin: 0 0 20px; max-width: 40em; }
.battery-lead b { font-weight: 500; color: var(--ink); }
#battery-section .hint { margin-top: 14px; }
.battery-be { font-size: 15px; color: var(--ink-2); margin: -6px 0 22px; max-width: 42em; padding-left: 14px; border-left: 3px solid var(--solar); }
.battery-be b { font-weight: 500; color: var(--ink); }
#battery-section th, #battery-section td { padding: 12px 8px; }
#battery-section thead th { white-space: normal; vertical-align: bottom; font-size: 13px; line-height: 1.25; }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 32px; }
  .hero-art { order: -1; max-width: 420px; }
  .keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .site-header { padding: 20px 16px 0; }
  main { padding: 36px 16px 64px; }
  .intro { margin-bottom: 36px; }
  .intro-art { margin-top: 28px; }
  .q { margin-bottom: 32px; }
  .tabs { display: flex; }
  .tabs button { flex: 1; padding: 8px 6px; font-size: 14px; }
  .keys { gap: 28px 20px; margin-top: 48px; padding: 28px 0; }
  .keys dd { font-size: 28px; }
  .block { margin-top: 64px; }
  .block + .more { margin-top: 64px; }
  .bar-row { grid-template-columns: 110px 1fr auto; }
}