/* WattCost — meter-inspired design. One family, one accent, hairlines instead of boxes. */
:root{
  --ink:#152238;--ink-2:#44546a;--muted:#5c6a7c;
  --paper:#f2f5f8;--paper-2:#e9eef3;--card:#ffffff;--line:#cfd8e2;--line-2:#e3e9ef;--field:#7d8a9c;
  --volt:#f7c948;--volt-ink:#7a5a00;--teal:#1f6f78;--teal-2:#e4f1f2;
  --good:#1c6b32;--good-bg:#e3f6e8;--warn:#7a5a00;--warn-bg:#fff3cc;--bad:#a12a22;--bad-bg:#fde3e1;
  --on-ink:#e8eef5;--on-ink-2:#b7c3d0;--on-ink-link:#9fd3d8;--ink-field:#0f1a2c;--ink-line:#2b3a52;
  --accent:var(--teal);--fg:var(--ink);--bg:var(--paper);
  --max:880px;--radius:6px
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:1rem}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 "Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-feature-settings:"tnum" 1}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--ink)}
/* focus: ink on light surfaces, volt on the navy ones */
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:3px}
:is(.site-header,[data-appliance-table],[data-compare],[data-calculator],.est-summary,.quiz,.readout,.meter) :focus-visible{outline-color:var(--volt)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:.8rem;top:-3rem;z-index:10;background:var(--volt);color:var(--ink);padding:.5rem .9rem;border-radius:var(--radius);font-weight:700}
.skip:focus{top:.6rem}

/* header: a slim utility bar */
.site-header{display:flex;justify-content:space-between;align-items:center;gap:.4rem 1rem;padding:.7rem 1.2rem;background:var(--ink);color:#fff;flex-wrap:wrap}
.site-header .logo{font-weight:800;text-decoration:none;color:#fff;font-size:1.2rem;letter-spacing:-.01em}
.site-header .logo::before{content:"";display:inline-block;width:.55em;height:.55em;background:var(--volt);border-radius:50%;margin-right:.45em;vertical-align:0}
.site-header nav{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem}
.site-header nav a{text-decoration:none;color:#c9d3df;font-size:.95rem;padding:.2rem 0}
.site-header nav a:hover{color:#fff}
main{max-width:var(--max);margin:0 auto;padding:1.6rem 1.2rem 3.5rem}
h1{font-size:2.15rem;line-height:1.1;letter-spacing:-.02em;margin:.4rem 0 .7rem;font-weight:800}
h2{font-size:1.25rem;letter-spacing:-.01em;margin:2.2rem 0 .6rem;font-weight:700;padding-top:.9rem;border-top:1px solid var(--line)}
h2:first-child{border-top:0;padding-top:0}
h2 a{color:inherit;text-decoration:none}h2 a:hover{color:var(--teal)}
.lead{font-size:1.1rem;color:var(--ink-2);max-width:62ch}
p,li{max-width:72ch}
small{color:var(--muted)}

/* breadcrumbs */
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}
.crumbs li{max-width:none}
.crumbs li+li::before{content:"›";margin:0 .4rem;color:var(--muted)}
.crumbs a{color:var(--muted)}

/* the readout: the one bold element */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;margin:1.2rem 0}
[data-appliance-table],[data-compare],[data-calculator],.est-summary,.quiz,.readout{background:var(--ink);color:var(--on-ink);border:0;border-radius:10px;padding:1.2rem 1.3rem}
:is([data-appliance-table],[data-compare],.readout) .answer{font-size:1.25rem;line-height:1.45;color:#dfe7f0;margin:0 0 .9rem}
:is([data-appliance-table],[data-compare],.readout) .answer strong{color:var(--volt);font-size:1.85rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
:is([data-appliance-table],[data-compare],[data-calculator],.est-summary,.quiz,.readout) small{color:#a9b7c6}
:is([data-appliance-table],[data-compare],[data-calculator],.est-summary,.quiz,.readout) a{color:var(--on-ink-link)}
.badge{display:inline-block;padding:.15rem .6rem;border-radius:999px;font-size:.8rem;font-weight:700;vertical-align:middle;letter-spacing:0;line-height:1.5;white-space:nowrap}
.badge.cheap,.badge.good{background:var(--good-bg);color:var(--good)}.badge.average{background:var(--warn-bg);color:var(--warn)}.badge.expensive,.badge.bad{background:var(--bad-bg);color:var(--bad)}

/* controls */
.controls{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:end;margin:.6rem 0 1rem}
.ctl{display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;color:var(--on-ink-2);min-width:0}
.ctl-region{flex:0 1 20rem}
select,input[type=number],input[type=search],textarea{font:inherit;max-width:100%}
.controls select,.controls input[type=number],.est-presets select{font-size:.95rem;padding:.45rem .6rem;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);min-width:0;width:100%}
.ctl-days input{width:6rem}
.hours-ctl .pair{display:flex;align-items:center;gap:.6rem}
.hours-ctl input[type=range]{width:10rem;accent-color:var(--volt)}
.hours-ctl input[type=number]{width:4.8rem}
.est-presets{display:flex;flex-wrap:wrap;gap:.6rem;align-items:end;margin:.4rem 0}
.est-presets .ctl{flex:0 1 16rem}
.est-note{min-height:1.2em;font-size:.85rem;color:#a9b7c6;margin:.4rem 0 0}

/* tables: rate-sheet style */
.table-wrap{overflow-x:auto;margin:.6rem 0;-webkit-overflow-scrolling:touch}
.table-wrap:focus-visible{outline-offset:0}
table{width:100%;border-collapse:collapse;margin:0;font-variant-numeric:tabular-nums}
th,td{padding:.5rem .6rem;border-bottom:1px solid var(--line-2);text-align:right;vertical-align:top}
th:first-child,td:first-child{text-align:left}
thead th{font-size:.82rem;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line)}
tbody th{font-weight:inherit}
tr.typical{font-weight:700}
td .w{white-space:nowrap;color:var(--muted);font-weight:400}
:is([data-appliance-table],[data-compare],[data-calculator],.readout) table{color:var(--on-ink)}
:is([data-appliance-table],[data-compare],[data-calculator],.readout) :is(th,td){border-color:var(--ink-line)}
:is([data-appliance-table],[data-compare],[data-calculator],.readout) thead th{color:#a9b7c6}
:is([data-appliance-table],[data-compare],[data-calculator],.readout) td .w{color:#a9b7c6}
[data-appliance-table] tr.typical td{color:var(--volt)}
[data-appliance-table] tr.typical th{color:#fff}
.card:not([data-appliance-table]):not([data-compare]):not([data-calculator]):not(.est-summary):not(.quiz):not(.readout) tr.typical{background:var(--paper)}
[data-compare] tbody th a{color:#fff;text-decoration:none;font-weight:700}
[data-compare] input[data-hours]{width:4.5rem;padding:.3rem;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink)}
table.prices tr.group th{text-align:left;background:var(--paper-2);font-weight:700;color:var(--ink)}
table.prices td:nth-child(2),table.prices td:nth-child(3){white-space:nowrap}
table.prices td:last-child{font-size:.85rem;color:var(--ink-2)}
table.prices .src-m{display:none}

/* lists of pages */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.2rem 1.5rem;list-style:none;padding:0;margin:.6rem 0}
.grid li{max-width:none}
.grid li a{display:block;padding:.6rem 0;border-bottom:1px solid var(--line-2);text-decoration:none;color:var(--ink);font-weight:600}
.grid li a:hover{color:var(--teal)}
.grid li a small{display:block;color:var(--muted);font-weight:400}
.grid .sub-links{display:block;padding:.2rem 0 .6rem}
.inline-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:.4rem 0}
.inline-list li{font-size:.9rem}
.chips{list-style:none;padding:0;margin:.6rem 0;display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{max-width:none}
.chips a{display:inline-block;padding:.4rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:600}
.chips a:hover{border-color:var(--teal);color:var(--teal)}
.filter{margin:.8rem 0 .4rem}
.filter label{display:block;font-weight:700;margin-bottom:.3rem}
.filter input{width:100%;max-width:28rem;padding:.6rem .8rem;border:1px solid var(--field);border-radius:var(--radius);background:#fff;color:var(--ink);font-size:1rem}
.filter-empty{margin:.6rem 0}
.region-group{margin:.5rem 0}.region-group summary{cursor:pointer;color:var(--muted);font-size:.9rem;padding:.2rem 0}
.faq details{border-bottom:1px solid var(--line-2);padding:.55rem 0}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin:.4rem 0 .2rem}
.site-footer{max-width:var(--max);margin:0 auto;padding:1.5rem 1.2rem;font-size:.85rem;color:var(--muted);border-top:1px solid var(--line)}
.site-footer a{color:var(--muted)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
textarea.code{width:100%;font:13px/1.4 ui-monospace,monospace;padding:.6rem;border:1px solid var(--field);border-radius:var(--radius)}

/* equivalence strip */
.eq-strip{margin:1.2rem 0;padding:0}
.eq-title{margin:0 0 .5rem;font-weight:700}
.eq-strip ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.6rem}
.eq-strip li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.7rem .6rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.1rem;max-width:none}
.eq-icon{font-size:1.6rem;line-height:1}
.eq-strip strong{font-size:1.5rem;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.eq-strip li span:last-child{font-size:.8rem;color:var(--muted);line-height:1.2}

/* charts: they keep a readable size and scroll sideways on narrow screens */
.chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ladder{margin:1.2rem 0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.6rem .8rem}
.ladder svg{display:block}
.ladder .axis{stroke:var(--line-2);stroke-width:2}
.ladder .dots circle{fill:#7d8a9c;stroke:#fff;stroke-width:2}
.ladder .me-dot{fill:var(--accent);stroke:#fff;stroke-width:2}
.ladder .me-line{stroke:var(--accent);stroke-width:2}
.ladder .me{font-size:13px;font-weight:700;fill:var(--accent)}
.ladder .lbl{font-size:11px;fill:var(--ink-2)}
.ladder .tick,.daycurve .tick{font-size:10px;fill:var(--muted)}
.daycurve .grid{stroke:var(--line-2)}
.ladder figcaption,.daycurve figcaption{font-size:.8rem;color:var(--muted);margin-top:.3rem}
.world{margin:1.2rem 0}
.world-title{font-weight:700;margin:0 0 .5rem}.world-title small{font-weight:400;margin-left:.4rem}
.world ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem}
.world li{max-width:none}
.world li a{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.6rem .3rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);text-align:center;height:100%}
.world li a:hover{border-color:var(--teal)}
.world .flag{font-size:1.3rem}.world strong{color:var(--ink);font-variant-numeric:tabular-nums}.world small{font-size:.75rem;line-height:1.25}
.treemap{margin:1rem 0}.treemap svg{display:block;border-radius:var(--radius);overflow:hidden}
.treemap-legend{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.85rem}
.treemap-legend li{max-width:none}
.treemap-legend span{display:inline-block;width:.8rem;height:.8rem;border-radius:3px;margin-right:.35rem;vertical-align:-1px}
.daycurve{margin:.8rem 0}.daycurve svg{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}

/* "is an efficient one worth it?" card on appliance pages */
.effcard h2{border-top:0;padding-top:0;margin-top:0}
.effcard-pay{padding-left:1.1rem;margin:.5rem 0}
.effcard-pay strong{font-variant-numeric:tabular-nums}
.effcard-link{font-weight:600}

/* upgrade page readout */
.swap{margin:.2rem 0 1rem;display:grid;gap:.35rem}
.swap div{display:grid;grid-template-columns:4.5rem 1fr;gap:.6rem}
.swap dt{color:#a9b7c6;font-size:.85rem;padding-top:.1rem}
.swap dd{margin:0;color:var(--on-ink)}

/* estimator */
.est-totals{display:flex;gap:2.2rem;margin-bottom:.8rem}
.est-totals div{display:flex;flex-direction:column}
.est-totals strong{font-size:2rem;color:var(--volt);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.est-totals span{color:#a9b7c6;font-size:.9rem}
.est-summary h2{border-top:1px solid var(--ink-line);color:#fff;font-size:1rem;margin:1rem 0 .4rem}
.est-summary button,.share-row button,.quiz button,.region-banner button{font:inherit;padding:.45rem .9rem;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);cursor:pointer;font-weight:600}
.est-summary button:hover,.share-row button:hover,.quiz button:hover{background:var(--paper)}
.est-summary [data-top] li{margin:.2rem 0;color:#dfe7f0}
.share-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.6rem 0}
.share-row input[data-share-url]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0}
.est-list{position:relative}
.est-group{border-bottom:1px solid var(--line);padding:.4rem 0;margin:.4rem 0}
.est-group summary{cursor:pointer;font-weight:700;padding:.4rem 0}
.est-group summary small{font-weight:400;margin-left:.5rem}
.est-item{display:flex;align-items:center;gap:.7rem;padding:.35rem 0;border-top:1px solid var(--line-2)}
.est-item label{flex:1;display:flex;align-items:center;gap:.7rem;cursor:pointer;min-height:2rem}
.est-item .est-name small{margin-left:.4rem}
.est-item .est-hours{color:var(--muted);font-size:.85rem;white-space:nowrap}
.est-item input[type=number]{width:4.2rem;padding:.25rem .3rem;border:1px solid var(--field);border-radius:5px}
.est-item input[type=number]:disabled{opacity:.45}
.est-item input[type=checkbox]{accent-color:var(--teal);width:1.15rem;height:1.15rem;flex:none}
.est-bar{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.5rem;padding:.6rem 1rem;background:var(--ink);color:var(--on-ink);border-radius:8px 8px 0 0;box-shadow:0 -4px 16px rgba(21,34,56,.12)}
.est-bar strong{color:var(--volt);font-size:1.2rem;font-variant-numeric:tabular-nums}
.est-list ~ h2{margin-top:1.4rem}

/* the region guess floats at the bottom of the screen instead of pushing the page down */
.region-banner{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:20;width:min(36rem,calc(100% - 2rem));background:var(--card);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--radius);padding:.7rem .9rem;font-size:.92rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;box-shadow:0 8px 28px rgba(21,34,56,.18)}
.region-banner span{flex:1 1 16rem}
.region-banner button{padding:.3rem .7rem;font-size:.88rem;border-color:var(--field)}

/* quiz */
.quiz-progress{color:#a9b7c6;margin:0 0 .3rem;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.quiz-progress strong{color:var(--volt)}
.quiz-progress select{font-size:.85rem;padding:.25rem .4rem;border:1px solid var(--field);border-radius:5px;background:var(--ink-field);color:#fff}
.quiz-question{font-size:1.25rem;font-weight:700;margin:.2rem 0 .8rem;color:#fff}
.quiz-question:focus{outline:none}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.quiz-options button{font:inherit;padding:1.1rem .8rem;border:2px solid var(--field);border-radius:8px;background:var(--ink-field);color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center;font-weight:400}
.quiz-options button:hover{border-color:var(--volt);background:#122038}
.quiz-options button.right{border-color:#5fcf7f;background:#153a25}
.quiz-options button.wrong{border-color:#f08b83;background:#4a1f1b}
.quiz-options button:disabled{cursor:default}
.quiz-icon{font-size:2rem}
.quiz-options strong{font-weight:700}
.quiz-options small{color:#a9b7c6}
.quiz-reveal{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--ink-line)}
.quiz-reveal em{color:#a9b7c6}
.quiz-bars div{display:flex;align-items:center;gap:.6rem;margin:.3rem 0}
.quiz-bars span{display:block;height:12px;border-radius:3px;background:var(--volt);min-width:4px;transition:width .4s}
.quiz-bars em{font-style:normal;font-size:.85rem;color:#c9d3df;white-space:nowrap}
.quiz button[data-q-next]{background:var(--volt);color:var(--ink);border-color:var(--volt);margin-top:.5rem}
.quiz-result h2{border-top:0;padding-top:0;margin-top:.5rem;color:#fff}
.quiz-result h2 strong{color:var(--volt)}
.quiz-result h2:focus{outline:none}

/* home hero meter */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;margin:.5rem 0 1.5rem}
.hero h1{font-size:2.6rem;margin:0 0 .6rem}
.hero p{font-size:1.1rem;color:var(--ink-2)}
.hero-links a{font-weight:600}
.meter{background:var(--ink);color:var(--on-ink);border-radius:12px;padding:1.2rem 1.3rem}
.meter label{display:block;font-size:.82rem;color:var(--on-ink-2);margin:.5rem 0 .25rem}
.meter select,.meter input{width:100%;margin-top:.25rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink)}
.meter .reading{margin:1rem 0 .3rem;font-size:1.05rem;color:#dfe7f0}
.meter .reading strong{display:block;font-size:2.6rem;color:var(--volt);letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.meter .reading small{color:#a9b7c6}
.meter a{color:var(--on-ink-link)}

@media(max-width:860px){
  .world ul{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:640px){
  .site-header{padding:.6rem 1rem}
  .site-header nav{gap:.1rem .9rem}
  main{padding:1.2rem 1rem 3rem}
  h1{font-size:1.7rem}.hero{grid-template-columns:1fr;gap:1.2rem}.hero h1{font-size:2rem}
  .two-col,.quiz-options{grid-template-columns:1fr}
  [data-appliance-table],[data-compare],[data-calculator],.est-summary,.quiz,.readout{padding:1rem .9rem}
  :is([data-appliance-table],[data-compare],.readout) .answer{font-size:1.1rem}
  :is([data-appliance-table],[data-compare],.readout) .answer strong{font-size:1.5rem}
  .controls{gap:.7rem}
  .ctl-region,.est-presets .ctl{flex:1 1 100%}
  .hours-ctl{flex:1 1 100%}.hours-ctl input[type=range]{flex:1;width:auto}
  th,td{padding:.45rem .35rem;font-size:.9rem}
  .est-totals{gap:1.2rem}
  .est-totals strong{font-size:1.6rem}
  .world ul{display:flex;overflow-x:auto;gap:.5rem;padding-bottom:.3rem;scroll-snap-type:x mandatory}
  .world li{flex:0 0 7.5rem;scroll-snap-align:start}
  .chart-scroll svg{min-width:560px}
  .swap div{grid-template-columns:3.6rem 1fr}
  table.prices .src{display:none}
  table.prices .src-m{display:block;font-size:.78rem;line-height:1.3;margin-top:.2rem}
}
@media(max-width:400px){
  .est-item{flex-wrap:wrap;gap:.2rem .7rem}
  .est-item .est-hours{margin-left:1.85rem}
}