/* Solar Panels Report: "public reference" look. White paper, near-black text, deep navy for the site's frame, reference blue
   for links, square edges and thin rules. Green for "saves", red for "costs", and the sun yellow only in the logo and on navy.
   One typeface, Public Sans (OFL, served from /fonts). No inline styles anywhere: the security policy forbids them. */
@font-face{font-family:"Public Sans";font-weight:100 900;font-display:swap;src:url(/fonts/public-sans-wght.woff2) format("woff2")}

:root{
  --paper:#fff; --card:#fff; --band:#f0f0f0; --ink:#1b1b1b; --muted:#565c65; --line:#dfe1e2; --faint:#a9aeb1; --field:#565c65;
  --navy:#162e51; --navy-line:#3d5a80; --on-navy:#dfe1e2; --on-navy-muted:#a9b9cf;
  --link:#005ea2; --link-hover:#1a4480; --link-soft:#e7f2f8;
  --sun:#ffbe2e; --sun-ink:#6b4d00; --sun-soft:#fef6e0;
  --good:#216e1f; --good-soft:#ecf3ec; --bad:#b50909; --bad-ink:#5c1111; --bad-soft:#f8dfe2; --even-soft:#f0f0f0;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --head:var(--body);
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#11161d; --card:#171e27; --band:#1c242f; --ink:#eef1f4; --muted:#a9b2bd; --line:#2c3642; --faint:#4b5664; --field:#8a95a3;
    --navy:#0c1a30; --navy-line:#2c4468; --on-navy:#dfe5ee; --on-navy-muted:#9fb1ca;
    --link:#73b3e7; --link-hover:#a6cdf0; --link-soft:#14283b;
    --sun:#ffbe2e; --sun-ink:#ffd27a; --sun-soft:#2b2410; --good:#7dcf8a; --good-soft:#132a17; --bad:#ff8b85; --bad-ink:#ffb4ae; --bad-soft:#3a1517; --even-soft:#1c242f; color-scheme:dark; }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;overflow-wrap:break-word}
a{color:var(--link);text-underline-offset:3px}
a:hover{color:var(--link-hover)}
:focus-visible{outline:3px solid #2491ff;outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--card);padding:8px 12px;z-index:9}
h1,h2,h3{font-family:var(--head);font-weight:800;line-height:1.12;letter-spacing:-.012em;margin:0;overflow-wrap:anywhere}
h1{font-size:clamp(2rem,4.4vw,2.9rem);margin:.25em 0 .4em}
h2{font-size:clamp(1.35rem,2.6vw,1.75rem);margin:1.7em 0 .5em;font-weight:750}
h3{font-size:1.1rem;font-weight:700;margin:1.3em 0 .3em;letter-spacing:0}
p,li{max-width:68ch}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{border-bottom:2px solid var(--ink)}
th{font-weight:700}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll{overflow-x:auto}

/* ---- Frame: independence bar, header, footer ---- */
.indie{background:var(--band);border-bottom:1px solid var(--line);font-size:.8rem;color:var(--ink)}
.indie-in{max-width:1200px;margin:0 auto;padding:7px 24px;display:flex;flex-wrap:wrap;gap:4px 24px;justify-content:space-between;align-items:center}
.indie-links{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.top{border-bottom:1px solid var(--line);background:var(--paper)}
.top-in{max-width:1200px;margin:0 auto;padding:18px 24px 0;display:flex;flex-wrap:wrap;gap:14px 40px;align-items:flex-end}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy);padding-bottom:16px}
.brand:hover{color:var(--navy)}
.brand img{width:40px;height:40px;flex:none}
.brand>span{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-size:1.3rem;font-weight:800;letter-spacing:-.01em}
.wm-b{color:var(--link)}
.tm{font-size:.5em;font-weight:600;vertical-align:super;margin-left:1px;line-height:0}
.foot .wm-b{color:var(--sun)}
.brand-tag{font-size:.8rem;color:var(--muted);font-weight:400}
@media (prefers-color-scheme: dark){.brand,.brand:hover{color:var(--ink)}}
.top nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:0 26px;font-size:1rem;font-weight:600}
.top nav a{color:var(--ink);text-decoration:none;padding:6px 0 14px;border-bottom:4px solid transparent}
.top nav a:hover{border-bottom-color:var(--faint)}
.top nav a[aria-current]{border-bottom-color:var(--link)}
.lang{font-weight:600}
.wrap{max-width:1200px;margin:0 auto;padding:12px 24px 48px}
.prose>*{max-width:800px}
.prose>.wide,.prose>.scroll,.prose>.cards3{max-width:none}
.foot{background:#1b1b1b;color:#dfe1e2;font-size:.92rem;margin-top:24px}
.foot-in{max-width:1200px;margin:0 auto;padding:36px 24px 44px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,3fr);gap:28px 48px}
.foot-name{font-weight:800;color:#fff;font-size:1.05rem;margin:0 0 6px}
.foot-about p{margin:0 0 8px}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.foot-cols div{display:flex;flex-direction:column;gap:6px}
.foot-h{font-weight:700;color:#fff;margin:0 0 2px}
.foot a{color:#dfe1e2}
.foot a:hover{color:#fff}
@media (max-width:980px){.foot-in{grid-template-columns:1fr}.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.top-in{padding-top:14px;gap:6px}.brand{padding-bottom:6px}.brand img{width:34px;height:34px}.brand-name{font-size:1.12rem}
  .top nav{margin-left:0;width:100%;gap:0 18px;font-size:.95rem}.top nav a{padding:5px 0 7px}.indie{font-size:.75rem}.indie-in{padding:6px 20px}}

/* ---- Home: the navy band with the title and the facts beside it ---- */
.band{background:var(--navy);color:#fff}
.band-in{max-width:1200px;margin:0 auto;padding:48px 24px 52px;display:flex;flex-wrap:wrap;gap:32px 48px;align-items:flex-end}
.band-text{flex:999 1 560px;min-width:0}
.band h1{color:#fff;margin:0 0 16px;font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.08}
.band .kicker{color:var(--sun)}
.band .lead{color:var(--on-navy);margin:0;max-width:680px}
.band-facts{flex:1 1 330px;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;border-left:1px solid var(--navy-line);padding-left:26px}
.band-facts dt{font-size:.8rem;color:var(--on-navy-muted)}
.band-facts dd{margin:0;font-weight:700}
@media (max-width:640px){.band-in{padding:32px 20px 36px}.band-facts{border-left:0;padding-left:0;border-top:1px solid var(--navy-line);padding-top:16px}}
.pre-tool{font-size:.95rem;color:var(--muted);margin:22px 0 4px}

.lead{font-size:1.15rem;color:var(--muted);line-height:1.55}
.kicker{font-size:.8rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--navy);margin:0}
.kicker a{color:inherit}
@media (prefers-color-scheme: dark){.kicker{color:var(--on-navy-muted)}}
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:700;font-size:.95rem;text-decoration:none;cursor:pointer;
  border:2px solid var(--link);border-radius:2px;padding:9px 18px;background:transparent;color:var(--link);line-height:1.3}
.btn.solid{background:var(--link);color:#fff}
.btn:hover{border-color:var(--link-hover);color:var(--link-hover)}
.btn.solid:hover{background:var(--link-hover);color:#fff}
@media (prefers-color-scheme: dark){.btn.solid,.btn.solid:hover{color:#0b1520}}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.note{color:var(--muted);font-size:.92rem}
.box{border-left:6px solid var(--navy);background:var(--band);padding:14px 18px;margin:18px 0}
.box.good{border-left-color:var(--good);background:var(--good-soft)}
.box.bad{border-left-color:var(--bad);background:var(--bad-soft)}
.box p{margin:.3em 0}
.card{background:var(--card);border:1px solid var(--faint);padding:18px 22px;margin:16px 0}
.card>h2:first-child,.card>h3:first-child{margin-top:.2em}
.updated{display:inline-block;font-size:.88rem;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 0;margin:4px 0 8px;font-weight:600}
.sources{font-size:.88rem;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:28px}
.sources a{color:var(--muted)}

/* ---- The calculators: inputs on the left, the answer on the right (stacked on phones) ---- */
.tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start;margin:20px 0}
@media (max-width:900px){.tool{grid-template-columns:1fr}}
.tool form{background:var(--card);border:1px solid var(--faint);padding:8px 26px 22px}
fieldset{border:0;padding:0;margin:18px 0 0;min-width:0}
fieldset+fieldset{margin-top:28px}
legend{font-weight:800;font-size:1.2rem;padding:0;margin-bottom:8px}
.field{margin:12px 0}
.field label,.field .label{display:block;font-weight:600;font-size:.95rem}
.hint{display:block;font-weight:400;color:var(--muted);font-size:.85rem}
input[type=text],input[type=number],input[type=email],select{font:inherit;font-size:1rem;width:100%;padding:9px 11px;border:1px solid var(--field);border-radius:0;background:var(--card);color:var(--ink);margin-top:5px}
input:focus,select:focus{border-color:var(--ink)}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 18px}
.unit{display:flex;align-items:center;gap:6px}
.unit span{color:var(--muted);font-size:.92rem;margin-top:5px;white-space:nowrap}
.offers{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0}
.offers label{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--faint);padding:9px 14px;cursor:pointer;font-weight:600;font-size:.95rem}
.offers input{accent-color:var(--link);margin:0}
.offers label:has(input:checked){border:2px solid var(--link);padding:8px 13px;background:var(--link-soft)}
details.more{margin:16px 0 4px}
details.more summary{cursor:pointer;font-weight:700;font-size:.95rem;color:var(--link)}

.result{position:sticky;top:12px}
.share{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.share p{margin:.3em 0}
.share-actions{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.share-link{width:100%;font-size:.85rem;padding:8px 10px;border:1px solid var(--faint);background:var(--card);color:inherit}
.print-sheet{display:none}
fieldset.plain{border:0;padding:0;margin:8px 0}
fieldset.plain label{display:block;margin:4px 0}
.signup{max-width:520px}
.more-quotes{margin-top:14px;border:1px dashed var(--faint);padding:10px 16px;background:var(--card)}
.more-quotes p{margin:.35em 0}
.ad{margin:28px 0;padding-top:6px;border-top:1px solid var(--line)}
.ad-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.owner-links{list-style:none;padding-left:0;border-top:1px solid var(--faint)}
.owner-links li{padding:10px 0;border-bottom:1px solid var(--line)}
.owner-links a{font-weight:700}
.owner-links span{display:block;font-size:.92rem;color:var(--muted)}
.owner-links.big li{padding:14px 0}
textarea.letter{width:100%;font:inherit;font-size:.9rem;line-height:1.45;padding:10px 12px;border:1px solid var(--faint);background:var(--card);color:inherit;resize:vertical}
/* Compare quotes */
.compare{background:var(--card);border:1px solid var(--faint);padding:8px 26px 22px;margin:20px 0}
.compare .row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}
@media (max-width:760px){.compare .row3{grid-template-columns:1fr}}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}
.quotes .quote{border:1px solid var(--line);padding:4px 14px 12px;margin:0;min-width:0}
fieldset.quote+fieldset.quote{border-top:1px solid var(--line);padding-top:4px}
.quotes legend{padding:0 6px;font-size:1.05rem}
.result.wide{position:static}
.result.wide .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.result.wide .stats{grid-template-columns:1fr}}
.ranking td.n b{font-size:1.05em}
.ranking tr.best td{background:var(--good-soft)}
.ranking .who{font-weight:700}
.ranking .sub{display:block;font-size:.82rem;color:var(--muted);font-weight:400}
@media (max-width:900px){.result{position:static}}
/* The answer: a verdict with a colored rule under it, then the key numbers as ruled rows. */
.verdict{padding:20px 22px;background:var(--even-soft);border:1px solid var(--faint);border-bottom:4px solid var(--faint)}
.verdict.saves,.verdict.ok{background:var(--good-soft);border-color:var(--good)}
.verdict.costs,.verdict.poor{background:var(--bad-soft);border-color:var(--bad)}
.verdict.even{background:var(--band);border-color:var(--muted)}
.verdict.low,.verdict.high{background:var(--sun-soft);border-color:#c28a00}
.verdict .big{font-weight:800;font-size:clamp(1.5rem,3vw,2rem);line-height:1.15;margin:.1em 0 .3em;letter-spacing:-.01em}
.verdict .kicker{color:var(--ink)}
.verdict p{margin:.3em 0}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;margin:14px 0;border-top:1px solid var(--faint)}
.stat{padding:12px 0;border-bottom:1px solid var(--line)}
.stat b{display:block;font-size:1.4rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15}
.stat span{font-size:.86rem;color:var(--muted)}
.stat.pair b{display:flex;gap:10px;align-items:baseline}
h2.rh{font-size:1.1rem;font-weight:700;margin:1.3em 0 .3em;letter-spacing:0}
.flags{margin:10px 0;padding-left:1.1em}
.flags li{margin:.4em 0}
.empty{color:var(--muted)}
.bar{display:flex;height:12px;overflow:hidden;background:var(--line);margin:6px 0 2px}
.bar i{display:block;height:100%}
.bar .pay{background:var(--navy)}
.bar .val{background:var(--sun)}
@media (prefers-color-scheme: dark){.bar .pay{background:var(--on-navy)}}

/* ---- State and utility pages ---- */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;margin:20px 0;max-width:960px;border-top:3px solid var(--navy)}
@media (max-width:760px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.facts{grid-template-columns:1fr}}
.fact{padding:14px 0;border-bottom:1px solid var(--line)}
.fact b{display:block;font-size:1.55rem;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.fact span{font-size:.88rem;color:var(--muted)}
@media (prefers-color-scheme: dark){.facts{border-top-color:var(--on-navy-muted)}}
.tag{display:inline-block;font-size:.78rem;font-weight:700;border-radius:2px;padding:1px 8px;background:var(--even-soft);color:var(--ink);white-space:nowrap;border:1px solid var(--faint)}
.tag.full{background:var(--good-soft);color:var(--good);border-color:transparent}
.tag.monthly{background:var(--link-soft);color:var(--link-hover);border-color:transparent}
tr.here td{background:var(--band)}
.tag.reduced{background:var(--sun-soft);color:var(--sun-ink);border-color:transparent}
.tag.none{background:var(--even-soft);color:var(--muted)}
.tag.law{background:var(--sun-soft);color:var(--sun-ink);border-color:transparent}
.states-grid{columns:4 200px;column-gap:24px;padding:0;list-style:none}
.states-grid li{margin:.2em 0;break-inside:avoid}

/* ---- Index lists (home "Reference", hubs, reminders): ruled rows of a blue link and one line ---- */
.cards3{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:0 32px;margin:18px 0;border-top:1px solid var(--faint)}
.cards3 a{display:block;text-decoration:none;padding:16px 0 18px;border-bottom:1px solid var(--line);color:var(--ink)}
.cards3 h3{margin:0 0 4px;color:var(--link);text-decoration:underline;text-underline-offset:3px;font-size:1.05rem}
.cards3 a:hover h3{color:var(--link-hover)}
.cards3 p{margin:0;color:var(--muted);font-size:.95rem}
.timeline{list-style:none;padding:0;border-left:3px solid var(--navy);margin:18px 0 18px 6px}
.timeline li{padding:0 0 16px 20px;position:relative}
.timeline li::before{content:"";position:absolute;left:-8px;top:.5em;width:13px;height:13px;background:var(--paper);border:3px solid var(--navy)}
.timeline time{font-weight:700}

/* ---- Checklist: boxes on screen and on paper ---- */
.check{list-style:none;padding:0;margin:8px 0 16px}
.check li{position:relative;padding:6px 0 6px 34px;border-bottom:1px solid var(--line)}
.check li::before{content:"";position:absolute;left:2px;top:.55em;width:18px;height:18px;border:2px solid var(--ink);border-radius:3px}
@media print{
  @page{margin:16mm}
  body{background:#fff;color:#000;font-size:10.5pt;line-height:1.4}
  .prose>*,p,li{max-width:none}
  .lead{font-size:11pt;color:#000}
  .indie,.top,.foot,.skip,.no-print{display:none!important}
  .wrap{padding:0;max-width:none}
  h1{font-size:22pt;margin-top:0}
  h2{font-size:12.5pt;margin:10pt 0 2pt;break-after:avoid}
  .check li{break-inside:avoid;padding:2.5pt 0 2.5pt 22pt;border-color:#bbb}
  .check li::before{border-color:#000;width:10pt;height:10pt;top:.35em}
  a{color:#000;text-decoration:none}
  /* One-page result: on a calculator page with a finished result, print only the sheet. */
  .ad,.more-quotes{display:none!important}
  body.sheet .indie,body.sheet .top,body.sheet .foot,body.sheet .skip,body.sheet main>*:not(.print-sheet){display:none!important}
  @page sheet{margin:11mm 13mm}
  body.sheet .print-sheet{page:sheet;display:block;font-size:9.5pt;line-height:1.3}
  .ps-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1.5pt solid #000;padding-bottom:4pt;margin-bottom:6pt}
  .ps-head b{font-size:14pt}
  .print-sheet h2{font-size:10pt;margin:7pt 0 2pt;text-transform:uppercase;letter-spacing:.06em}
  .ps-entered{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18pt;margin:0}
  .ps-entered div{display:flex;justify-content:space-between;gap:8pt;border-bottom:.5pt solid #bbb;padding:1pt 0;break-inside:avoid}
  .ps-entered dt{font-weight:400}
  .ps-entered dd{margin:0;font-weight:700;text-align:right}
  .ps-result .verdict{border:1pt solid #000;border-bottom-width:2.5pt;padding:6pt 10pt;background:none}
  .ps-result .verdict .big{font-size:16pt;margin:0 0 2pt}
  .ps-result .kicker{color:#000;font-size:7.5pt}
  .ps-result .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 10pt;margin:6pt 0;border-top:.5pt solid #888}
  .ps-result .stat{border:0;border-bottom:.5pt solid #bbb;padding:3pt 0;background:none}
  .ps-result .stat b{font-size:12pt}
  .ps-result .stat span{color:#000;font-size:7.5pt}
  .ps-result .box{border:.5pt solid #888;border-left:2.5pt solid #000;background:none;padding:4pt 8pt;margin:6pt 0}
  .ps-result h3,.ps-result h2.rh{font-size:10pt;margin:6pt 0 2pt}
  .ps-result .flags{margin:2pt 0}
  .ps-result .flags li{margin:1pt 0}
  .ps-result p{margin:2pt 0}
  .ps-result .note{font-size:7.5pt;color:#333}
  .ps-result table,.ps-matrix{font-size:8pt;width:100%;border-collapse:collapse}
  .ps-result th,.ps-result td,.ps-matrix th,.ps-matrix td{padding:1pt 4pt;border-bottom:.5pt solid #bbb}
  .ps-result .ranking tr.best td{background:none;font-weight:700}
  .ps-result .ranking .sub{font-size:7pt;color:#333}
  .ps-result .scroll{overflow:visible}
  .ps-result td.n,.ps-result th.n{white-space:normal}
  .ps-result .flags{font-size:8.5pt}
  .ps-result h3,.ps-result h2.rh{font-size:9pt;margin:4pt 0 1pt}
  .ps-matrix th{text-align:left}
  .ps-result textarea.letter{border:0;padding:0;font-size:8.5pt;height:auto;resize:none}
  .ps-reopen{display:flex;gap:10pt;align-items:center;border-top:1pt solid #000;margin-top:6pt;padding-top:5pt;break-inside:avoid}
  .ps-reopen p{margin:0 0 2pt}
  .ps-reopen canvas{width:.9in;height:.9in;flex:none}
  .ps-link{font-size:7pt;word-break:break-all;color:#333}
  .ps-fine{font-size:7pt;color:#444}
}


/* ---- Check my system: "where to find it" ---- */
details.app{border:1px solid var(--line);padding:8px 14px;margin:6px 0;background:var(--band)}
details.app summary{cursor:pointer;font-weight:700;font-size:.95rem}
details.app p{font-size:.92rem;margin:.5em 0}
dl.terms{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:12px 0 4px}
dl.terms dt{font-weight:700}
dl.terms dd{margin:0}
@media (max-width:560px){dl.terms{grid-template-columns:1fr}dl.terms dd{margin-bottom:8px}}
.nowrap{white-space:nowrap}