:root {
  --paper:#fff; --ink:#142334; --muted:#596a7c; --line:#dce3eb;
  --blue:#2862b6; --tint:#f4f7fa; --amber:#cc7b28; --red:#ae4935;
  font-family:Arial,Helvetica,sans-serif; color:var(--ink); background:var(--paper);
  font-synthesis:none; font-size:14px; line-height:1.5;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:24px }
body { margin:0 }
button,input,select { font:inherit }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent }
button { cursor:pointer }
button:disabled { cursor:default; opacity:.5 }
a { color:inherit }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--blue); outline-offset:3px }
input { min-width:0; max-width:100% }
input[type=number] { appearance:textfield; -moz-appearance:textfield }
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0 }
button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.page-shell { max-width:1400px; margin:auto; padding:0 48px }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:20px; height:72px; border-bottom:1px solid var(--ink) }
.brand { display:flex; gap:12px; align-items:center; text-decoration:none; font-size:21px; font-weight:700; line-height:1; letter-spacing:-.6px }
.brand svg { width:37px; height:37px; stroke:var(--ink); stroke-width:2; fill:none }
.brand svg path { stroke:var(--amber) }
.brand-sub { display:block; font:10px/1.1 Consolas,monospace; letter-spacing:3px; margin-top:6px }
.site-header nav { display:flex; align-items:center; gap:28px; font-size:12px }
.site-header nav a { text-decoration:none; text-underline-offset:4px }
.site-header nav a:hover { text-decoration:underline }
.quiet { border:1px solid var(--line); border-radius:3px; background:white; color:var(--ink); padding:8px 12px; font-size:12px }
.quiet:hover,.share:hover { background:var(--tint); border-color:#9babbc }
.quiet span { margin-left:10px; color:var(--muted) }
.intro { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:16px 0 }
.eyebrow { font:10px/1.4 Consolas,monospace; letter-spacing:1.5px; margin:0 0 8px; color:var(--muted) }
h1 { font-size:clamp(28px,3vw,34px); line-height:1.15; letter-spacing:-1.2px; margin:0 0 8px }
h1>span { color:var(--amber) }
.intro-copy { color:var(--muted); font-size:14px; margin:0; max-width:580px }
.local-note { flex-shrink:0; border-left:1px solid var(--line); padding:0 0 0 24px; font-size:12px; line-height:1.8 }
.local-note small { color:var(--muted); font-size:11px }
.local-dot { display:inline-block; background:var(--blue); width:6px; height:6px; border-radius:50%; margin-right:6px }
.workspace { display:grid; grid-template-columns:352px minmax(0,1fr); gap:42px; align-items:start; border-top:1px solid var(--line); padding-top:20px }
h2 { font-size:16px; line-height:1.3; letter-spacing:-.3px; margin:0 }
h3 { font-size:14px; line-height:1.4; font-weight:600; margin:0 }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; min-height:34px }
.saved { font-size:10px; color:var(--muted) }
.setup { background:var(--tint); padding:22px; border-top:3px solid var(--ink) }
.setup .section-heading { margin-bottom:25px }
fieldset { border:0; border-bottom:1px solid var(--line); margin:0 0 21px; padding:0 0 21px; min-width:0 }
legend { display:flex; align-items:center; gap:10px; width:100%; padding:0; margin:0 0 16px; font-size:13px; font-weight:700 }
.step { color:var(--blue); font:11px Consolas,monospace }
.field { margin:0 0 13px }
.field:last-child { margin-bottom:0 }
label { display:block; margin-bottom:6px; color:#33465a; font-size:12px }
label>span { float:right; color:var(--muted); font-size:11px }
input:not([type=range]),select { border:1px solid #bfcbd8; border-radius:3px; background:white; width:100%; height:39px; padding:8px 10px; font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums }
input:hover,select:hover { border-color:#8b9db2 }
input[type=datetime-local] { font-size:13px; padding:7px 9px }
input[aria-invalid=true],select[aria-invalid=true] { border-color:var(--red); background:#fff4ef }
input[type=range] { width:100%; accent-color:var(--blue); height:18px; margin:4px 0 }
.range-field { margin-top:15px }
.range-field label { display:flex; justify-content:space-between; align-items:center }
.range-field output { color:var(--ink); font:600 13px Consolas,monospace }
.hint { font-size:11px; line-height:1.6; color:var(--muted); margin:8px 0 0 }
.battery-facts { padding:8px 0 0; display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--muted) }
.battery-facts strong { font-weight:600; color:var(--ink) }
.battery-facts i { display:none }
.battery-facts span+span { font-size:10px }
.device-row { display:flex; align-items:center; gap:10px; margin:13px 0 7px }
.device-icon { display:none }
.device-info { flex:1; min-width:0 }
.device-info label { color:var(--ink); margin:0; font-size:12px }
.device-info small { display:block; color:var(--muted); font-size:10px; margin-top:2px; line-height:1.4 }
.compact-input { flex-shrink:0; width:77px; text-align:right }
.compact-input input { height:34px; padding:5px 7px; text-align:right }
.compact-input>span { font-size:10px; color:var(--muted) }
.time-pair { display:flex; gap:10px; align-items:center; margin:10px 0 }
.time-pair label { flex:1; min-width:0; margin:0; font-size:10px }
.time-pair input { margin-top:4px; font-size:12px; height:36px; padding:6px 8px }
.time-pair>span { color:var(--muted); padding-top:18px; font-size:13px }
.two-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.advanced>summary,.method>summary { display:flex; justify-content:space-between; align-items:center; cursor:pointer; list-style:none; gap:10px; font-size:12px; font-weight:600 }
.advanced>summary::-webkit-details-marker,.method>summary::-webkit-details-marker { display:none }
.advanced>summary { padding:0 0 12px }
.advanced>summary span { color:var(--blue); font-size:17px }
.advanced[open]>summary span { transform:rotate(45deg) }
.advanced-body { padding:0 0 15px }
.advanced-body>.hint { margin:0 0 15px }
.advanced-body h3 { margin:16px 0 12px }
.recalculate { width:100%; border:1px solid var(--ink); background:var(--ink); color:white; padding:12px 14px; border-radius:3px; text-align:left; display:flex; align-items:center; justify-content:space-between; font-size:12px; margin-top:14px }
.recalculate:hover { background:#2c4057 }
.autosave { text-align:center; font-size:10px }
.results { min-width:0 }
.share { display:flex; gap:7px; align-items:center; background:white; border:1px solid var(--line); border-radius:3px; padding:7px 10px; color:var(--ink); font-size:11px }
.verdict { display:flex; align-items:flex-start; gap:14px; padding:3px 0 16px; border-bottom:1px solid var(--line) }
.verdict-icon { display:grid; place-items:center; width:26px; height:26px; flex-shrink:0; background:#e9f0fb; color:var(--blue); margin-top:19px; border-radius:50%; font-size:15px }
.verdict h3 { font-size:24px; letter-spacing:-.7px; font-weight:600; line-height:1.2; margin:0 0 7px }
.verdict .eyebrow { font-size:9px; letter-spacing:1px; margin-bottom:7px }
.verdict p:last-child { color:var(--muted); font-size:12px; line-height:1.6; margin:0 }
.verdict.tight .verdict-icon { background:#fbf1df; color:#8d5a19 }
.verdict.short .verdict-icon { background:#fcece6; color:var(--red) }
.verdict.short h3 { color:var(--red) }
.metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:12px 0; border-bottom:1px solid var(--line); margin-bottom:20px }
.metrics>div { padding:0 20px; border-left:1px solid var(--line) }
.metrics>div:first-child { padding-left:0; border:0 }
.metrics>div:last-child { padding-right:0 }
.metrics span { display:block; font-size:11px; color:var(--muted); margin-bottom:6px }
.metrics strong { display:block; font-size:32px; font-weight:500; letter-spacing:-1.5px; line-height:1.2; font-variant-numeric:tabular-nums; margin:0 0 5px }
.metrics small { display:block; color:var(--muted); font-size:10px; line-height:1.5 }
.chart-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:12px }
.chart-unit,.small-label { font-size:10px; color:var(--muted); text-align:right }
.chart-section { padding-bottom:22px }
.legend { display:flex; flex-wrap:wrap; gap:18px; font-size:10px; color:var(--muted); margin:16px 0 0 }
.legend>span { display:flex; align-items:center; gap:6px }
.legend i { display:block; width:14px; height:3px }
.planned { background:var(--blue) }.quarter { background:var(--amber) }.none { background:#8392a4 }
#chart { margin:12px 0 0 }
#chart svg { display:block; width:100%; overflow:visible }
.chart-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:10px; color:var(--muted) }
.reserve-dash { display:inline-block; width:15px; vertical-align:3px; border-top:1px dashed #a8804b; margin-right:6px }
.scenario-section { border-top:1px solid var(--line); padding:20px 0 0 }
.scenario-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-radius:3px; overflow:hidden }
.scenario { position:relative; border:0; border-right:1px solid var(--line); border-bottom:3px solid transparent; border-radius:0; padding:14px 15px 12px; background:white; text-align:left; color:var(--ink); min-width:0 }
.scenario:last-child { border-right:0 }
.scenario:hover { background:var(--tint) }
.scenario.active { background:#f1f5fc; border-bottom-color:var(--blue) }
.scenario:focus-visible { outline-offset:-4px }
.scenario-name { display:block; font-size:11px; margin:0 0 8px }
.scenario-value { display:block; font-size:25px; font-weight:500; line-height:1.1; letter-spacing:-.8px; font-variant-numeric:tabular-nums; margin:0 0 7px }
.scenario-status { display:block; color:var(--muted); font-size:10px; line-height:1.4 }
.scenario-status[data-state=short] { color:var(--red) }.scenario-status[data-state=tight] { color:#8d5a19 }
.scenario-section>.hint { font-size:10px }
.breakdown { padding:25px 0 16px }
.breakdown h3 { margin-bottom:16px }
.energy-bar { display:flex; gap:2px; height:7px; background:#e9eef4; margin:0 0 18px }
.energy-bar span { min-width:0 }
.breakdown dl { display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; margin:0 0 18px }
.breakdown dl>div { display:flex; justify-content:space-between; gap:10px; font-size:11px }
.breakdown dt { display:flex; align-items:center; gap:8px; color:var(--muted) }
.breakdown dt i { width:6px; height:6px; flex-shrink:0; display:inline-block }
.breakdown dd { margin:0; font:12px Consolas,monospace; white-space:nowrap }
.energy-total { display:flex; justify-content:space-between; gap:15px; border-top:1px solid var(--line); padding-top:13px; font-size:12px }
.energy-total strong { font:600 14px Consolas,monospace }
.breakdown>.hint { font-size:11px }
.method { border-top:1px solid var(--line); padding:16px 0 }
.method>div { font-size:12px; line-height:1.75; color:var(--muted); padding-top:6px }
.method a { text-underline-offset:3px }
footer { border-top:1px solid var(--ink); display:flex; justify-content:space-between; gap:20px; padding:22px 0 28px; margin-top:35px; font-size:10px; color:var(--muted) }
.footer-brand { color:var(--ink); font-weight:700 }.footer-brand>span { color:var(--muted); font-weight:400 }
.errors,.stale-notice { background:#fff3ed; color:#8c3929; border-left:3px solid var(--red); padding:12px 14px; font-size:12px; margin-top:12px }
.errors p { margin:0 0 5px }.stale-notice { margin:0 0 16px }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--ink); color:white; padding:12px 18px; border-radius:3px; max-width:90%; font-size:12px; z-index:10 }
dialog { border:1px solid var(--line); border-top:3px solid var(--ink); border-radius:4px; padding:30px; max-width:450px; width:calc(100% - 32px); color:var(--ink) }
dialog::backdrop { background:#14233466 }
dialog h2 { font-size:24px; margin:0 10px 16px 0 }
dialog p { font-size:12px; color:var(--muted); line-height:1.7 }
.dialog-close { position:absolute; top:10px; right:12px; border:0; background:none; font-size:24px; color:var(--muted) }
.skip { position:absolute; left:20px; top:-100px; background:var(--ink); color:white; padding:10px; z-index:20 }.skip:focus { top:10px }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.no-script { padding:20px; background:#fff3ed; text-align:center }
.mobile-shortcut { display:none }
[hidden] { display:none!important }
@media (max-width:1100px) {
  .page-shell { padding:0 28px }.workspace { grid-template-columns:310px minmax(0,1fr); gap:28px }
  .setup { padding:18px }.local-note { display:none }.metrics>div { padding:0 12px }
  .metrics strong { font-size:31px }.scenario { padding:12px 10px }.scenario-value { font-size:23px }
}
@media (max-width:800px) {
  .page-shell { padding:0 22px }.site-header { height:76px }.site-header nav { gap:18px }
  .intro { padding:26px 0 24px }h1 { font-size:31px }.intro-copy { font-size:13px; max-width:430px }
  .workspace { display:flex; flex-direction:column; gap:30px; padding-top:0; border:0 }
  .setup,.results { width:100% }.setup { padding:22px }.results { position:static }
  .mobile-shortcut { display:flex; align-items:center; justify-content:space-between; color:var(--blue); text-decoration:none; border-bottom:1px solid var(--line); padding:0 0 13px; margin:0 0 22px; font-size:12px }
  .setup fieldset:first-of-type { display:grid; grid-template-columns:1fr 1fr; column-gap:14px }
  .setup fieldset:first-of-type .hint { grid-column:1/-1 }
  .setup fieldset:first-of-type .field { margin-bottom:0 }
  input:not([type=range]),select { font-size:16px; height:42px }
  input[type=datetime-local] { font-size:13px; padding:8px }.time-pair input { font-size:14px }
  .compact-input input { font-size:15px; height:36px }.compact-input { width:88px }
  .device-info label { font-size:13px }.device-info small { font-size:11px }
  .hint { font-size:12px }label { font-size:13px }.time-pair label { font-size:11px }
  .verdict h3 { font-size:25px }.verdict p:last-child { font-size:12px }
  .metrics strong { font-size:32px }.metrics small { font-size:10px }
  .legend { gap:13px; font-size:10px }.chart-foot { font-size:9px }
  .breakdown dl { gap:12px 18px }.breakdown dl>div { font-size:11px }
  footer { flex-direction:column; gap:8px; margin-top:22px }
}
@media (max-width:400px) {
  .page-shell { padding:0 16px }.brand { font-size:19px; gap:9px }.brand svg { width:30px }.brand-sub { font-size:9px }
  .site-header nav>a { display:none }.quiet { font-size:11px; padding:7px 9px }
  h1 { font-size:29px; letter-spacing:-1px }.intro-copy { font-size:13px }
  .setup { padding:18px }.saved { font-size:9px }
  .setup fieldset:first-of-type { display:block }.setup fieldset:first-of-type .field { margin-bottom:12px }
  .verdict { gap:10px }.verdict h3 { font-size:23px }.verdict-icon { width:23px; height:23px }
  .metrics>div { padding:0 10px }.metrics span { font-size:10px }.metrics strong { font-size:29px }.metrics small { font-size:9px }
  .scenario { padding:12px 9px }.scenario-name { font-size:10px }.scenario-value { font-size:21px }.scenario-status { font-size:9px }
  .chart-unit { font-size:9px; max-width:78px }.legend { gap:10px }.chart-foot span:last-child { display:none }
  .breakdown dl { grid-template-columns:1fr }.small-label { font-size:9px }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto } }
@media print {
  .site-header nav,.setup,.share,.toast,dialog,footer,.mobile-shortcut,.local-note { display:none }
  .page-shell { padding:0; max-width:none }.intro { padding:20px 0 }.workspace { display:block; border:0 }
  .results { position:static; width:100% }.chart-section,.scenario-grid,.verdict { break-inside:avoid }
}

footer { flex-wrap:wrap }
footer nav { font-size:12px }
footer nav a { color:var(--blue); text-underline-offset:3px }

/* Optional disclosed merchant referral; calculator behavior stays independent. */
.equipment-option { border-top:1px solid var(--line); padding:22px 0; margin-top:16px }
.equipment-option .eyebrow { margin:0 0 8px }
.equipment-link { color:var(--blue); font-size:16px; font-weight:650; text-underline-offset:3px }
.equipment-option .hint { margin:8px 0 0; max-width:62ch }