/* UPVolt brand guide v2: petrol/green palette, Poppins + Inter, no border-radius,
   60° corner cuts (rise C -> run C * .5774) instead of rounded corners. */
:root {
  --petrol-950: #002233;
  --petrol-800: #004466;
  --petrol-300: #a3bfcd;
  --petrol-200: #ccdde5;
  --petrol-100: #e6eff3;
  --petrol-50: #f4f8fa;
  --volt-green: #1b916e;
  --green-words: #157458;
  --deep-green: #0f5e47;
  --signal-green: #3ecca1;
  --mint: #e6f4f0;

  --bg: #fff;
  --card: var(--petrol-50);
  --text: #2b3f4b;
  --muted: #44596a;
  --heading: var(--petrol-800);
  --accent: var(--green-words);
  --accent-text: #fff;
  --border: var(--petrol-200);
  --input-border: var(--petrol-300);
  --error: #b3261e;
  --best: var(--mint);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 Inter, system-ui, sans-serif;
}

h1, h2, h3, legend {
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 600;
  color: var(--heading);
}
h1 { margin: 0 0 .5rem; font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.06; letter-spacing: -0.03em; }
h2 { margin-top: 0; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.14; letter-spacing: -0.024em; }
h2:focus { outline: none; }
h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; }
.accent { color: var(--volt-green); } /* two-tone heading accent: 28px+ only */

/* Header: white bar, deep petrol tab (bottom-right cut), petrol-50 claim strip */
.site-header { background: #fff; }
.site-header .bar { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.brand-tab {
  display: inline-flex;
  align-items: center;
  min-height: 72px;
  padding: 0 44px 0 24px;
  background: var(--petrol-950);
  color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 16.2px) 100%, 0 100%);
  font: 600 1.6rem Poppins, system-ui, sans-serif;
  letter-spacing: -0.02em;
}
.brand-tab span { color: var(--signal-green); }
.claim-strip { background: var(--petrol-50); }
.claim-strip ul {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: .6rem 20px;
  list-style: none;
  color: var(--muted);
  font-size: .9rem;
}
.claim-strip li::before, #result-notes li::marker, .peak::before {
  color: var(--volt-green);
}
.claim-strip li::before {
  content: "";
  display: inline-block;
  width: .7em;
  height: .6em;
  margin-right: .5em;
  background: var(--volt-green);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.intro { max-width: 1200px; margin: 0 auto; padding: 2.5rem 20px 1rem; }
.intro p { max-width: 58ch; margin: 0; color: var(--muted); font-size: 1.15rem; line-height: 1.55; }

main {
  max-width: 1200px;
  margin: 1rem auto 3.5rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--card);
  clip-path: polygon(0 0, calc(100% - 26.5px) 0, 100% 46px, 100% 100%, 0 100%);
}

.steps {
  display: flex;
  gap: .5rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: .9rem;
}
.steps li { flex: 1; padding-bottom: .4rem; border-bottom: 3px solid var(--petrol-200); }
.steps li.current { color: var(--heading); border-color: var(--volt-green); font-weight: 600; }
.steps li.done { border-color: var(--volt-green); }
/* The steps are buttons so finished ones can be clicked; they look like the plain text until then */
.steps li button { margin: 0; height: auto; padding: 0 0 .1rem; background: none; color: inherit; font: inherit; text-align: left; clip-path: none; cursor: default; }
.steps li button:disabled { opacity: 1; }
.steps li.done button { cursor: pointer; color: var(--green-words); text-decoration: underline; text-underline-offset: .2em; }
.steps li.done button:hover { background: none; color: var(--deep-green); }

.grid { display: grid; gap: 1.1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

label { display: flex; flex-direction: column; gap: .3rem; font-size: .875rem; color: var(--text); font-weight: 600; }

small { color: var(--muted); font-size: .8rem; font-weight: 400; }

/* The home found at the address, for the user to confirm */
.found-card { margin-top: 1rem; padding: 1rem 1.25rem 1.25rem; background: #fff; border-left: 4px solid var(--volt-green); }
.found-card h3 { margin: 0 0 .25rem; }
.found-address { margin: 0 0 .75rem; font-size: 1.15rem; font-weight: 600; color: var(--text); }
.found-card .grid { margin-bottom: 1rem; }

/* Summary before calculating */
.summary { margin-top: 1.25rem; padding: 1rem 1.25rem 1.25rem; background: #fff; border-left: 4px solid var(--petrol-800); }
.summary h3 { margin: 0 0 .25rem; }
.summary h4 { margin: 1rem 0 .25rem; font: 600 .75rem Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.summary-list { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; margin: 0; font-size: .95rem; }
.summary-list dt, .summary-list dd { margin: 0; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.summary-list dt { color: var(--muted); padding-right: .75rem; }
.summary-list dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; }
.summary-missing { color: var(--error); font-weight: 600; }
.tag { padding: 0 .5rem; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.tag-user { background: var(--mint); color: var(--deep-green); }
.tag-open { background: var(--petrol-100); color: var(--petrol-800); }
.tag-est { background: #fff1cc; color: #6b4e00; }
.summary-list button.link { margin-left: auto; font-size: .85rem; }
@media (max-width: 560px) {
  .summary-list { grid-template-columns: 1fr; }
  .summary-list dt { padding-bottom: 0; border-bottom: 0; }
}

/* Check box left of the first line of text, explanation below the text */
label.check { display: grid; align-content: start; grid-template-columns: auto 1fr; align-items: baseline; column-gap: .6rem; row-gap: .3rem; }
label.check input[type=checkbox] { width: auto; min-width: 0; margin: 0; accent-color: var(--accent); }
label.check small { grid-column: 2; }

/* Fieldsets are filled panels, not outlined */
fieldset { margin: 1.25rem 0 0; padding: .9rem 1.25rem 1.25rem; border: 0; background: #fff; }
legend { padding: 0 .4rem; font-size: 1.05rem; letter-spacing: -0.01em; }
.choice { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-bottom: .5rem; }
.choice label { flex-direction: row; align-items: center; gap: .4rem; color: var(--text); font-size: 1rem; font-weight: 400; }
/* Radio choices that each carry a short description below the label, and a drawing */
.choice.described { flex-direction: column; gap: .6rem; }
.choice.described label { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: .5rem; row-gap: .1rem; }
.opt-drawing { grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 72px; height: 48px; color: var(--petrol-800); }
.opt-drawing .warm { stroke: #d9731f; }
.opt-drawing .air { stroke: var(--volt-green); }
@media (max-width: 480px) { .opt-drawing { width: 48px; height: 32px; } }
.choice.described label input { margin: 0; }
.choice.described label small { grid-column: 2; }
fieldset .grid { margin-top: .5rem; }
fieldset.prominent { border-left: 4px solid var(--volt-green); }
#ev-details label { max-width: 16rem; }

input, select {
  padding: .6rem .7rem;
  border: 1px solid var(--input-border);
  border-radius: 0;
  background: #fff;
  color: var(--text);
  font: 400 1rem/1.4 Inter, system-ui, sans-serif;
}
input::placeholder { color: #7f95a3; font-style: italic; opacity: 1; }
input[readonly] { background: var(--petrol-100); }
input:focus-visible, select:focus-visible { outline: 2px solid var(--volt-green); outline-offset: 0; }
button:focus-visible { outline: 2px solid var(--volt-green); outline-offset: 2px; }
input:user-invalid, input[aria-invalid=true], select[aria-invalid=true] { border-color: var(--error); }
.field-error { color: var(--error); font-size: .8rem; font-weight: 600; }

/* Buttons: 50px, Inter 600, 18px cuts on opposite corners (top-right, bottom-left) */
button {
  margin-top: 1rem;
  height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  color: var(--accent-text);
  font: 600 1rem Inter, system-ui, sans-serif;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10.4px) 0, 100% 18px, 100% 100%, 10.4px 100%, 0 calc(100% - 18px));
}
button[type=submit]::after, #print::after { content: " ›"; display: inline-block; transition: transform .15s; }
button[type=submit]:hover::after, #print:hover::after { transform: translateX(3px); }
button:hover { background: var(--deep-green); }
button.secondary { background: var(--petrol-100); color: var(--petrol-800); }
button.secondary:hover { background: var(--petrol-200); }

/* Links that look like secondary buttons */
a.secondary {
  display: inline-flex; align-items: center; margin-top: 1rem; min-height: 50px; padding: .5rem 26px;
  background: var(--petrol-100); color: var(--petrol-800); font: 600 1rem Inter, system-ui, sans-serif; text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 10.4px) 0, 100% 18px, 100% 100%, 10.4px 100%, 0 calc(100% - 18px));
}
a.secondary:hover { background: var(--petrol-200); }
a.secondary:focus-visible { outline: 2px solid var(--volt-green); outline-offset: 2px; }
.next-steps .actions { flex-wrap: wrap; }

button:disabled { opacity: .6; cursor: progress; }

.actions { display: flex; gap: .75rem; }

.hint { color: var(--muted); font-size: .85rem; }
#error {
  padding: .7rem 1rem;
  background: #fbeceb;
  border-left: 4px solid var(--error);
  color: var(--error);
}

.choice-single { flex-direction: row; align-items: center; gap: .5rem; color: var(--text); font-size: 1rem; font-weight: 400; margin: .75rem 0 0; }
.choice-single input[type=checkbox] { margin: 0; accent-color: var(--accent); }

/* Tables: undecorated data, petrol header, hairline rules, petrol-50 stripes */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; background: #fff; }
thead th { background: var(--petrol-800); color: #fff; font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; }
th, td { padding: .6rem .6rem; text-align: left; border-bottom: 1px solid var(--border); }
th.num, td.num { text-align: right; white-space: nowrap; }
tbody tr:nth-child(even) td { background: var(--petrol-50); }
tr.best td { background: var(--best) !important; font-weight: 600; }

[hidden] { display: none !important; }

input[type=radio] { padding: 0; accent-color: var(--accent); }

/* Notes: mint, volt-green left border */
#result-notes { margin: .25rem 0 1rem; padding: .8rem 1rem .8rem 2.2rem; background: var(--mint); border-left: 4px solid var(--volt-green); color: var(--text); font-size: .9rem; }
#result-notes:empty { display: none; }

button.link {
  margin: 0;
  height: auto;
  padding: 0;
  background: none;
  color: var(--green-words);
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: .2em;
  clip-path: none;
}
button.link:hover { background: none; color: var(--deep-green); }
button.link::before { content: "› "; color: var(--volt-green); display: inline-block; }
button.link[aria-expanded=true]::before { transform: rotate(90deg); }
tr.best button.link { font-weight: 600; }

tr.detail > td { padding: 0 0 .75rem 1.2rem; background: none !important; }
table.costs { font-size: .9rem; }
table.costs td { padding: .25rem .6rem; border-bottom: 1px solid var(--border); }
table.costs tr.heading td { padding-top: .6rem; color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: .75rem; letter-spacing: .04em; border-bottom: 0; }
table.costs tr.subtotal td, table.costs tr.total td { font-weight: 600; border-top: 2px solid var(--petrol-200); }

#calculation-details { margin-bottom: 1rem; }
table.calc-trace { font-size: .85rem; font-variant-numeric: normal; }
table.calc-trace th { background: var(--petrol-100); color: var(--heading); font-size: .68rem; }
table.calc-trace td { vertical-align: top; line-height: 1.5; }
table.calc-trace tbody { counter-reset: step; }
table.calc-trace tbody tr { counter-increment: step; }
table.calc-trace td:first-child { font-weight: 600; color: var(--heading); white-space: nowrap; }
table.calc-trace td:first-child::before { content: counter(step) ". "; color: var(--accent); }
table.calc-trace td:nth-child(3) { color: var(--muted); font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
table.calc-trace td.value { font-family: ui-monospace, Consolas, monospace; font-weight: 600; white-space: normal; }
table.calc-trace td.source { color: var(--muted); font-size: .78rem; font-style: italic; }
table.calc-trace tr.total td { font-weight: 600; background: var(--best) !important; border-top: 2px solid var(--petrol-200); }
table.calc-trace tr.total td:first-child::before { content: none; }

@media screen and (max-width: 640px) {
  table.calc-trace, table.calc-trace tbody, table.calc-trace tr, table.calc-trace td { display: block; }
  table.calc-trace thead { display: none; }
  table.calc-trace tbody tr { padding: .7rem .8rem; border-bottom: 1px solid var(--border); }
  table.calc-trace tbody tr:nth-child(even) { background: var(--petrol-50); }
  table.calc-trace tbody tr:nth-child(even) td { background: none; }
  table.calc-trace td { padding: .15rem 0; border: 0; }
  table.calc-trace td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    margin-top: .3rem;
    color: var(--muted);
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
}

#construction-details { margin-top: .75rem; }
table.construction td, table.construction th { vertical-align: middle; }
table.construction td:first-child { font-weight: 600; white-space: nowrap; }
table.construction input, table.construction select {
  padding: .35rem .4rem;
  font-size: .85rem;
  width: 100%;
  min-width: 4rem;
}
table.construction input[type=number].share { min-width: 3.5rem; }
table.construction input[type=checkbox] { width: auto; min-width: 0; accent-color: var(--accent); }
table.construction td.actions { white-space: nowrap; }
table.construction .row-add, table.construction .row-remove {
  margin: 0 0 0 .3rem;
  height: 1.9rem;
  padding: 0 .55rem;
  font-size: .95rem;
  line-height: 1;
  background: var(--petrol-100);
  color: var(--petrol-800);
  clip-path: none;
}
table.construction .row-add { color: var(--green-words); }
table.construction .row-add:hover, table.construction .row-remove:hover { background: var(--petrol-200); color: var(--petrol-800); }
table.construction.hide-details .detail-col { display: none; }
.hint.warning { color: var(--error); }

@media (max-width: 860px) {
  .brand-tab { min-height: 60px; }
}

@media print {
  .no-print, .steps, .claim-strip { display: none !important; }
  body { background: #fff; }
  main { clip-path: none; margin: 0; padding: 0; background: #fff; }
  button.link::before { content: none; }
  thead th { background: none !important; color: var(--text) !important; }
}

/* Year chart: monthly heat and electricity */
#year-chart { margin: 1.5rem 0; }
#year-chart select { margin-left: .5rem; max-width: 100%; }
.chart { margin: .75rem 0; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .axis, .chart .tick { stroke: var(--border); }
.chart text { fill: var(--muted); font: 12px Inter, system-ui, sans-serif; }
.chart .title { fill: var(--heading); font: 600 14px Poppins, system-ui, sans-serif; }
.chart .legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .25rem 0 0; padding: 0; list-style: none; font-size: .85rem; }
.chart .legend i { display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem; vertical-align: -1px; }
.chart .c-solar { fill: #e0a100; background: #e0a100; stroke: #e0a100; }
.chart .c-heatpump { fill: #1b916e; background: #1b916e; stroke: #1b916e; }
.chart .c-fuel { fill: #6b7f8e; background: #6b7f8e; stroke: #6b7f8e; }
.chart .c-base { fill: #004466; background: #004466; stroke: #004466; }
.chart .c-heating { fill: #5b9ab8; background: #5b9ab8; stroke: #5b9ab8; }
.chart .c-pv { background: #e0a100; stroke: #e0a100; fill: none; }
.chart .c-grid { background: #b3261e; stroke: #b3261e; fill: none; stroke-dasharray: 4 3; }
.chart .c-export { fill: #1b916e; background: #1b916e; }
.chart .c-import { fill: #b3261e; background: #b3261e; }
.chart path { stroke-width: 1.5; }
@media (prefers-color-scheme: dark) {
  .chart .c-base { fill: #7fb6d3; background: #7fb6d3; stroke: #7fb6d3; }
  .chart .c-heating { fill: #3d7a99; background: #3d7a99; }
  .chart .c-fuel { fill: #9fb0bc; background: #9fb0bc; stroke: #9fb0bc; }
}

table.variants tr.baseline > td { font-style: italic; border-bottom: 2px solid var(--petrol-300); }

p.fit { margin: .25rem 0 .5rem; font-size: .9rem; }
p.fit.short { color: var(--error); }
.fit-warning { display: block; margin-top: .15rem; font-size: .8rem; font-weight: 600; color: var(--error); cursor: help; }

#zones { margin: .5rem 0 1rem; }
#zones summary { cursor: pointer; color: var(--accent); }
table.zones input { width: 6rem; }

.chart .c-cool { fill: #3b82c4; background: #3b82c4; stroke: #3b82c4; }
.chart .c-coolelec { fill: #7aa6d6; background: #7aa6d6; stroke: #7aa6d6; }
.chart .c-unmet { fill: #b7c4cd; background: #b7c4cd; stroke: #b7c4cd; }

.chart-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .5rem 0; }
.chart-tools button { min-width: 2.5rem; padding: .3rem .7rem; }
.chart-tools button:disabled { opacity: .4; cursor: default; }
#chart-range { margin-left: .5rem; font-size: .9rem; color: var(--muted); }
.chart svg { cursor: grab; touch-action: pan-y; user-select: none; }

.chart-variants { border: 0; padding: 0; margin: .5rem 0; }
.chart-variants legend { font-size: .95rem; padding: 0; }
#year-chart-variants { display: grid; gap: .1rem; }
#year-chart-variants label { display: block; font-size: .9rem; }
.chart-card { margin: 1.25rem 0; }
.chart-card h4 { margin: 0 0 .1rem; font: 600 1rem Poppins, system-ui, sans-serif; color: var(--heading); }
.chart-wrap { position: relative; }
.chart-wrap svg { display: block; width: 100%; height: auto; cursor: grab; touch-action: pan-y; user-select: none; }
.chart-wrap svg text { fill: var(--muted); font: 12px Inter, system-ui, sans-serif; }
.chart-wrap svg text.title { fill: var(--heading); font: 600 13px Poppins, system-ui, sans-serif; }
.chart-wrap .axis, .chart-wrap .tick { stroke: var(--border); }
.chart-wrap line.cursor { stroke: var(--heading); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.chart-wrap path { stroke-width: 1.5; }
.chart-wrap path.c-pv { stroke: #e0a100; fill: none; }
.chart-tip { position: absolute; top: .25rem; transform: translateX(.6rem); min-width: 11rem; padding: .35rem .55rem; background: var(--bg); border: 1px solid var(--border); font-size: .8rem; line-height: 1.4; pointer-events: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.chart-tip.left { transform: translateX(calc(-100% - .6rem)); }
.chart-tip i, #year-chart-legend i { display: inline-block; width: .7rem; height: .7rem; margin-right: .4rem; }
#year-chart-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .25rem 0 1rem; padding: 0; list-style: none; font-size: .85rem; }
.chart-tip .c-solar, #year-chart-legend .c-solar { background: #e0a100; }
.chart-tip .c-heatpump, #year-chart-legend .c-heatpump { background: #1b916e; }
.chart-tip .c-fuel, #year-chart-legend .c-fuel { background: #6b7f8e; }
.chart-tip .c-base, #year-chart-legend .c-base { background: #004466; }
.chart-tip .c-heating, #year-chart-legend .c-heating { background: #5b9ab8; }
.chart-tip .c-cool, #year-chart-legend .c-cool { background: #3b82c4; }
.chart-tip .c-coolelec, #year-chart-legend .c-coolelec { background: #7aa6d6; }
.chart-tip .c-unmet, #year-chart-legend .c-unmet { background: #b7c4cd; }
.chart-tip .c-pv, #year-chart-legend .c-pv { background: #e0a100; }
.chart-tip .c-import, #year-chart-legend .c-import { background: #b3261e; }
.chart-tip .c-export, #year-chart-legend .c-export { background: #1b916e; }

.shower-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem 1rem; margin: .25rem 0 .75rem; }
.shower-fields small { grid-column: 1 / -1; }

.chart .c-hotwater, .chart-tip .c-hotwater, #year-chart-legend .c-hotwater { fill: #c0573c; background: #c0573c; stroke: #c0573c; }
.chart .c-spaceheat, .chart-tip .c-spaceheat, #year-chart-legend .c-spaceheat { fill: #d9731f; background: #d9731f; stroke: #d9731f; }
.chart .c-car, .chart-tip .c-car, #year-chart-legend .c-car { fill: #7b5ea7; background: #7b5ea7; stroke: #7b5ea7; }

.chart .chart-step { margin: 1.75rem 0 .1rem; font: 600 1.05rem Poppins, system-ui, sans-serif; color: var(--heading); }
.chart .c-demand, .chart-tip .c-demand, #year-chart-legend .c-demand { background: #004466; stroke: #004466; fill: none; stroke-dasharray: 4 3; }
@media (prefers-color-scheme: dark) { .chart .c-demand, .chart-tip .c-demand, #year-chart-legend .c-demand { background: #7fb6d3; stroke: #7fb6d3; } }

/* Aerial photo of the address (step 1) */
#address-map { margin: 1rem 0; }
.map-frame { position: relative; max-width: 600px; aspect-ratio: 3 / 2; background: var(--card); border-radius: 6px; overflow: hidden; }
.map-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.map-pin { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 3px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px rgba(0, 0, 0, .45); }
#address-map figcaption { font-size: .8rem; color: var(--muted); margin-top: .25rem; }
#address-outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#address-outline path { fill: rgba(255, 212, 0, .2); stroke: #ffd400; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#address-map.has-outline .map-pin { display: none; }
#map-tiles { position: absolute; inset: 0; background: #e8eef1; }
#map-tiles img { position: absolute; display: block; }
#address-map.pick .map-frame { cursor: crosshair; }
.map-controls { display: flex; gap: .5rem; margin-top: .5rem; }
.map-controls button { min-width: 2.5rem; }
#address-views { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; align-items: start; }
#address-views figure { margin: 1rem 0; min-width: 0; }
#address-vector-svg { display: block; width: 100%; aspect-ratio: 3 / 2; background: var(--card); border-radius: 6px; }
#address-vector figcaption { font-size: .8rem; color: var(--muted); margin-top: .25rem; }
#address-model-svg { display: block; width: 100%; aspect-ratio: 3 / 2; background: var(--card); border-radius: 6px; cursor: grab; touch-action: none; user-select: none; }
#address-model-svg:active { cursor: grabbing; }
#address-model figcaption { font-size: .8rem; color: var(--muted); margin-top: .25rem; }

/* Result: conclusion first, method last */
#result-advice .advice { margin: 0 0 .5rem; padding: 1rem 1.25rem; background: var(--best); border-left: 4px solid var(--signal-green); font-size: 1.15rem; line-height: 1.5; color: var(--petrol-950); }
#result-method { margin: 1.5rem 0; }
#result-method > summary { cursor: pointer; font: 600 1.1rem Poppins, system-ui, sans-serif; color: var(--heading); }
#result-advice .reliability { margin: 0 0 1rem; font-size: .95rem; color: var(--muted); }

/* Printout / PDF: an A4 report in the UPVolt style. Only prints what is on screen in the result. */
.print-only { display: none; }
@media print {
  @page {
    size: A4;
    margin: 15mm 15mm 22mm;
    @bottom-left { content: "upvolt.nl · Indicatie op basis van geschatte woningeigenschappen en voorlopige prijzen"; width: 80%; font: 400 8pt Inter, system-ui, sans-serif; color: #44596a; border-top: 1px solid #ccdde5; padding-top: 2mm; vertical-align: top; }
    @bottom-right { content: "Pagina " counter(page) " van " counter(pages); font: 400 8pt Inter, system-ui, sans-serif; color: #44596a; border-top: 1px solid #ccdde5; padding-top: 2mm; vertical-align: top; }
  }
  /* Always the light palette, also when the screen is in dark mode. */
  :root {
    --bg: #fff; --card: #fff; --text: #2b3f4b; --muted: #44596a; --heading: #004466;
    --border: #ccdde5; color-scheme: light;
  }
  .chart .c-base { fill: #004466; background: #004466; stroke: #004466; }
  .chart .c-heating { fill: #5b9ab8; background: #5b9ab8; }
  .chart .c-fuel { fill: #6b7f8e; background: #6b7f8e; stroke: #6b7f8e; }
  .chart .c-demand, .chart-tip .c-demand, #year-chart-legend .c-demand { background: #004466; stroke: #004466; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  html, body { background: #fff; }
  body { font-size: 10pt; line-height: 1.45; color: var(--text); }
  .site-header, .intro, #result > h2, .actions, button:not(.link), #result-method > summary::marker, .map-controls { display: none !important; }
  .print-only { display: block; }
  main { padding: 0; margin: 0; max-width: none; background: #fff; }

  #print-header { margin: 0 0 6mm; }
  #print-header .brand-tab { min-height: 14mm; padding: 0 12mm 0 6mm; font-size: 18pt; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7mm), calc(100% - 4mm) 100%, 0 100%); }
  #print-header h1 { margin: 5mm 0 1mm; font-size: 22pt; }
  #print-header p { margin: 0; color: var(--muted); }

  /* Page 1: the advice. */
  #result-advice .advice { font-size: 12pt; break-inside: avoid; }
  table { font-size: 8pt; }
  .table-wrap { overflow: visible; }
  table.variants { table-layout: fixed; }
  table.variants th, table.variants td { padding: 2mm 1.5mm; white-space: normal; }
  table.variants th:first-child { width: 24%; }
  table.variants th, table.variants td { padding-left: 1mm; padding-right: 1mm; }
  table.variants tr.detail td { white-space: normal; }
  thead th { font-size: 6pt; letter-spacing: 0; overflow-wrap: anywhere; }
  tr, table.costs, .chart-card, figure { break-inside: avoid; }
  thead { display: table-header-group; }
  table.variants tr.best td { background: var(--mint) !important; }
  table.variants button.link { font-size: inherit; color: inherit; text-align: left; }
  table.variants tr.detail > td { padding-left: 0; }

  /* Page 2: your home. */
  #print-home { break-before: page; }
  #print-home td.source { color: var(--muted); font-style: italic; }
  #print-home td:first-child { font-weight: 600; width: 32%; }
  #print-photo { margin: 6mm 0 0; }
  #print-photo img { display: block; max-width: 100%; max-height: 90mm; object-fit: cover; }
  #print-photo figcaption { font-size: 8pt; color: var(--muted); }

  /* Then: the charts that are open, and the method, always expanded. */
  #year-chart, #result-method { break-before: page; }
  #year-chart:not(:has(details[open])) { display: none; }
  #result-method > summary { display: block; list-style: none; margin: 0 0 3mm; font-size: 14pt; }
  #result-method > summary::-webkit-details-marker { display: none; }
  #year-chart-details > summary { display: block; list-style: none; margin: 0 0 2mm; font: 600 14pt Poppins, system-ui, sans-serif; color: var(--heading); }
  #year-chart-details > summary::-webkit-details-marker { display: none; }
  #chart-options-section:not(:has(.chart-card)) { display: none; }
  .chart .chart-step, .chart .chart-step + .hint { break-after: avoid; }
  .chart svg { cursor: default; }
  .chart-tip { display: none; }
  #result-notes { font-size: 9pt; }
}