/* ------------------------------------------------------------------ *
   sunsolarcalculator.com: shared tokens, fonts, site header/footer and
   text pages, in the visual system of its sister site plugincalifornia.net
   (docs/STYLE-GUIDE.md). The calculators carry their own inline styles
   on top of this sheet.

   Theme: light palette on bare :root. Dark values are redefined under the
   system-preference media query (unless the visitor forced light) and
   under an explicit data-theme, so the header switch wins both ways.
 * ------------------------------------------------------------------ */

/* Fonts, hosted here (SIL Open Font License; see /fonts/OFL-*.txt). Latin only. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/barlow-400.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/barlow-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/barlow-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/barlow-700.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/barlow-condensed-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/barlow-condensed-600.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/source-serif-4.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/source-serif-4-italic.woff2) format("woff2"); }

/* Tokens copied from plugincalifornia.net's site.css. */
:root {
  color-scheme: light;
  --bg: #e7e8e2;
  --face: #f7f7f3;
  --screen: #fdfdfb;
  --grat: #e3e5df;
  --ink: #15181b;
  --ink-2: #5a6067;
  --hair: #c9ccc5;
  --hair-2: #e4e6e0;
  --draw: #2a5aa8;
  --sun: #c98200;
  --sun-wash: rgba(201,130,0,.20);
  --used: #2b8553;
  --used-wash: rgba(43,133,83,.30);
  --batt: #7a4fb5;
  --batt-wash: rgba(122,79,181,.28);
  --cursor: #c2410c;
  --range: rgba(21,24,27,.10);
  --pv: #21406b;        /* a solar module drawn as an object (this site's addition) */
  --pv-edge: #3a5c8a;
  --good: #2b8553;
  --bad: #c2410c;
  --f-num: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --f-label: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-note: "Source Serif 4", Georgia, "Times New Roman", serif;
  --maxw: 1320px; --prosew: 760px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0d0f11; --face: #16191c; --screen: #101315; --grat: #1f2428; --ink: #eceee9; --ink-2: #9ca3a9; --hair: #353b40; --hair-2: #22272b;
  --draw: #82a9f0; --sun: #f0b23c; --sun-wash: rgba(240,178,60,.20); --used: #5cc48a; --used-wash: rgba(92,196,138,.28); --batt: #b799ec; --batt-wash: rgba(183,153,236,.28);
  --cursor: #fb8a4c; --range: rgba(236,238,233,.12); --pv: #3d5f92; --pv-edge: #6386bd; --good: #5cc48a; --bad: #fb8a4c; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0d0f11; --face: #16191c; --screen: #101315; --grat: #1f2428; --ink: #eceee9; --ink-2: #9ca3a9; --hair: #353b40; --hair-2: #22272b;
  --draw: #82a9f0; --sun: #f0b23c; --sun-wash: rgba(240,178,60,.20); --used: #5cc48a; --used-wash: rgba(92,196,138,.28); --batt: #b799ec; --batt-wash: rgba(183,153,236,.28);
  --cursor: #fb8a4c; --range: rgba(236,238,233,.12); --pv: #3d5f92; --pv-edge: #6386bd; --good: #5cc48a; --bad: #fb8a4c; color-scheme: dark; }

/* The names this site used before the reskin, kept as aliases so the
   balcony calculator, the Simplified form and the blog widgets keep
   working while they move to the tokens above. Green still means
   "solar wins": --solar is the used/better green. */
:root {
  --card: var(--face);
  --panel: var(--hair-2);
  --muted: var(--ink-2);
  --ink-soft: var(--ink);
  --line: var(--hair);
  --line-strong: var(--ink-2);
  --solar: var(--used);
  --solar-bg: color-mix(in srgb, var(--used) 12%, var(--face));
  --accent: var(--used);
  --blue: var(--draw);
  --danger: var(--bad);
  --danger-bg: color-mix(in srgb, var(--bad) 10%, var(--face));
  --win-border: color-mix(in srgb, var(--used) 55%, var(--face));
  --lose-border: color-mix(in srgb, var(--bad) 55%, var(--face));
  --gold-bg: color-mix(in srgb, var(--sun) 12%, var(--face));
  --gold-border: color-mix(in srgb, var(--sun) 50%, var(--face));
  --gold-ink: var(--ink);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-num); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh;
}
a { color: var(--draw); }
:focus-visible { outline: 2px solid var(--draw); outline-offset: 2px; }
.site-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; width: 100%; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--face); color: var(--ink); padding: 6px 10px; border: 1.5px solid var(--ink); z-index: 100; }
.skip:focus { left: 16px; }

/* ---------- header: a slim engraved strip, not a hero ---------- */
/* display and margin are set explicitly: the rooftop calculator carries a bare
   header{display:flex} rule in its own inline sheet, and these classes out-specify it. */
.site-head { display: block; margin: 0; width: 100%; border-bottom: 1.5px solid var(--ink); background: var(--face); }
.site-head .in { max-width: var(--maxw); margin: 0 auto; padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font: 600 18px var(--f-num); letter-spacing: -.01em; }
.brand svg { width: 26px; height: 26px; flex: none; }
.brand b { font-weight: 600; }
.brand span { color: var(--ink-2); font-weight: 500; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: auto; }
.site-nav a { font: 600 13px var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--cursor); }
/* "More": the pages that aren't the tools, folded into one menu */
.nav-more { position: relative; }
.nav-more summary { list-style: none; cursor: pointer; font: 600 13px var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding: 4px 0; border-bottom: 2px solid transparent; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary::after { content: "\25BE"; margin-left: 5px; color: var(--cursor); }
.nav-more summary:hover, .nav-more[open] summary { color: var(--ink); }
.nav-more summary.is-current { color: var(--ink); border-bottom-color: var(--cursor); }
.nav-more-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 190px; padding: 6px 0;
  background: var(--face); border: 1.5px solid var(--ink); border-radius: 6px; display: flex; flex-direction: column; }
.site-nav .nav-more-panel a { padding: 7px 14px; border-bottom: 0; border-left: 3px solid transparent; }
.site-nav .nav-more-panel a:hover { background: var(--hair-2); }
.site-nav .nav-more-panel a[aria-current="page"] { border-left-color: var(--cursor); }
/* on a phone "More" can sit anywhere along the line, so the menu spans the header instead */
@media (max-width: 560px) {
  .site-head .in { position: relative; }
  .nav-more { position: static; }
  .nav-more-panel { left: 16px; right: 16px; top: auto; margin-top: 8px; }
}
.theme-btn { font: 600 12px var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); background: none; border: 1px solid var(--hair); border-radius: 3px; padding: 4px 9px; cursor: pointer; white-space: nowrap; }
.theme-btn:hover { color: var(--ink); border-color: var(--ink-2); }

/* ---------- modules: hard borders with the name set into the top edge ---------- */
/* the beta calculator's notice: a status line under the header */
.beta-note { max-width: 1040px; margin: 16px auto 0; padding: 10px 14px; background: var(--hair-2); border-left: 3px solid var(--cursor); font: 15px/1.55 var(--f-note); color: var(--ink); }
.beta-note strong { font-family: var(--f-num); font-weight: 600; }
.mod { position: relative; background: var(--face); border: 1.5px solid var(--ink); border-radius: 6px; padding: 20px 16px 16px; min-width: 0; }
.mod-name { position: absolute; top: -0.78em; left: 12px; background: var(--bg); padding: 0 7px; font: 600 13px var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }

/* ---------- text pages: the teacher's voice in a readable column ---------- */
.site-main { flex: 1; padding: 32px 16px 56px; }
.prose { max-width: var(--prosew); margin: 0 auto; }
.prose > *:first-child { margin-top: 0; }
.prose h1 { font: 600 clamp(28px, 4.2vw, 40px)/1.12 var(--f-num); letter-spacing: -.015em; margin: 0 0 14px; }
.prose .byline { font: 600 12.5px var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 20px; }
.prose .lede { font: 19px/1.55 var(--f-note); color: var(--ink); margin: 0 0 28px; }
.prose h2 { font: 600 13.5px var(--f-label); letter-spacing: .16em; text-transform: uppercase; margin: 40px 0 12px; padding-top: 14px; border-top: 1.5px solid var(--ink); }
.prose h3 { font: 600 18px var(--f-num); margin: 24px 0 6px; }
/* keep deep-linked headings and rows clear of the top of the window */
.prose h2, .prose h3, .refrow[id] { scroll-margin-top: 20px; }
.prose p, .prose li { font: 17px/1.62 var(--f-note); }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin: 0 0 6px; }
.prose strong { font-weight: 600; }
.prose .muted, .prose small { font: 14.5px/1.5 var(--f-note); color: var(--ink-2); }
.prose code { font: 600 14px var(--f-num); background: var(--hair-2); padding: 1px 5px; border-radius: 3px; }
.prose hr { border: none; border-top: 1.5px solid var(--ink); margin: 32px 0; }
.prose .twrap { overflow-x: auto; margin: 20px 0; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.prose table { width: 100%; border-collapse: collapse; font: 14.5px/1.45 var(--f-num); min-width: 520px; }
.prose th, .prose td { padding: 9px 12px 9px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--hair); }
.prose th { font: 600 12.5px var(--f-label); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; border-top: 0; }
.prose td { font-variant-numeric: tabular-nums; }

/* a link into the tool: a module, not a gradient card */
.cta { position: relative; display: block; background: var(--face); border: 1.5px solid var(--ink); border-radius: 6px; padding: 14px 16px; margin: 18px 0; text-decoration: none; color: var(--ink); }
.cta b { display: block; font: 600 18px var(--f-num); letter-spacing: -.01em; margin-bottom: 3px; color: var(--ink); }
.cta span { display: block; font: 15.5px/1.5 var(--f-note); color: var(--ink-2); }
.cta:hover b { color: var(--draw); }
/* a plain action button */
.btn { display: inline-block; font: 600 15px var(--f-num); color: var(--face); background: var(--ink); border: 1.5px solid var(--ink); border-radius: 3px; padding: 9px 16px; text-decoration: none; margin: 6px 0; cursor: pointer; }
.btn:hover { color: var(--face); background: var(--ink-2); border-color: var(--ink-2); }

/* source note on methodology */
.srcnote { background: var(--face); border: 1px solid var(--hair); border-left: 3px solid var(--ink-2); border-radius: 3px; padding: 12px 16px; font: 15px/1.55 var(--f-note); color: var(--ink-2); margin: 18px 0; }
.srcnote b { color: var(--ink); font-family: var(--f-num); font-weight: 600; }

/* reference rows: a label column and its explanation, between hairlines */
.refrow { display: grid; grid-template-columns: 200px 1fr; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.refrow b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.refrow span { color: var(--ink-soft); }
.prose .refrow b { font: 600 12.5px/1.5 var(--f-label); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); padding-top: 2px; }
.prose .refrow span { font: 15.5px/1.55 var(--f-note); }
@media (max-width: 560px) { .refrow { grid-template-columns: 1fr; gap: 2px; } }

/* FAQ */
.faq-item { border-top: 1px solid var(--hair); padding: 18px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--hair); }
.prose .faq-item h2 { font: 600 18px/1.3 var(--f-num); letter-spacing: 0; text-transform: none; border: none; padding: 0; margin: 0 0 8px; }
.faq-item p { margin: 0 0 10px; }
.faq-item > *:last-child { margin-bottom: 0; }

/* contact form */
.contactform { margin: 22px 0 0; display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.cf-field { display: flex; flex-direction: column; gap: 5px; }
.cf-field > span { font: 600 12.5px var(--f-label); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.cf-field > span em { font: 13.5px var(--f-note); letter-spacing: 0; text-transform: none; font-style: normal; }
.contactform input, .contactform textarea { font: 15px var(--f-num); color: var(--ink); background: var(--screen); border: 1.5px solid var(--ink); border-radius: 3px; padding: 7px 9px; width: 100%; }
.contactform textarea { resize: vertical; min-height: 120px; font-family: var(--f-note); }
.contactform input:focus-visible, .contactform textarea:focus-visible { outline: 2px solid var(--draw); outline-offset: 2px; }
.contactform .btn { align-self: flex-start; }
/* feedback rating slider */
.cf-rate { display: flex; flex-direction: column; gap: 8px; }
.cf-rate-q { font: 600 12.5px var(--f-label); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.cf-rate-row { display: flex; align-items: center; gap: 14px; }
.cf-rate-track { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cf-rate-row input[type=range] { width: 100%; accent-color: var(--cursor); height: 24px; padding: 0; background: transparent; border: none; }
.cf-rate-out { min-width: 2.4em; text-align: center; font: 600 22px var(--f-num); font-variant-numeric: tabular-nums; color: var(--ink-2); background: var(--screen); border: 1.5px solid var(--hair); border-radius: 3px; padding: 4px 0; }
.cf-rate-out.set { color: var(--ink); border-color: var(--ink); }
.cf-rate-ends { display: flex; justify-content: space-between; font: 13px var(--f-note); color: var(--ink-2); }
.cf-more { font: 600 12.5px var(--f-label); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin: 6px 0 -6px; }
.formok, .formerr { border-radius: 3px; padding: 12px 14px; margin: 18px 0; font: 16px/1.5 var(--f-note); background: var(--face); border: 1px solid var(--hair); }
.formok { border-left: 3px solid var(--used); }
.formerr { border-left: 3px solid var(--bad); }

/* index of links: one module holding a plain list, not floating cards */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); background: var(--face); border: 1.5px solid var(--ink); border-radius: 6px; margin: 22px 0; overflow: hidden; }
.hub-card { display: block; padding: 13px 16px; text-decoration: none; color: var(--ink); border-top: 1px solid var(--hair); margin-top: -1px; }
.hub-card b { display: block; font: 600 16px var(--f-num); margin-bottom: 2px; color: var(--ink); }
.hub-card span { display: block; font: 15px/1.5 var(--f-note); color: var(--ink-2); }
.hub-card:hover b { color: var(--draw); }

/* ---------- footer ---------- */
.site-foot { display: block; width: 100%; border-top: 1.5px solid var(--ink); margin-top: auto; }
.site-foot .in { max-width: var(--maxw); margin: 0 auto; padding: 18px 16px 28px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font: 14px/1.5 var(--f-note); color: var(--ink-2); }
.site-foot p { margin: 0 0 6px; max-width: var(--prosew); }
.site-foot .fine { font-size: 13px; }
.site-foot nav { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px 16px; font: 600 12.5px var(--f-label); letter-spacing: .12em; text-transform: uppercase; max-width: 420px; }
.site-foot nav a { color: var(--ink-2); text-decoration: none; }
.site-foot nav a:hover { color: var(--ink); }
/* clear the calculators' fixed bottom bar so the footer isn't hidden under it
   (the bar wraps taller on narrow screens, hence the generous value) */
.site-foot--calc .in { padding-bottom: 150px; }
@media (max-width: 640px) { .site-foot--calc .in { padding-bottom: 190px; } }

@media print {
  .site-head, .site-foot, .skip { display: none !important; }
  body { background: #fff; }
}

/* the location reference card (rooftop and balcony calculators) */
.loccard{margin-top:8px;border:1px solid var(--hair);border-radius:4px;padding:8px 10px;font:13.5px/1.45 var(--f-num)}
.loccard .lchead{font:600 12px var(--f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:4px}
.loccard .lcrow{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr);gap:0 10px;padding:4px 0;border-top:1px solid var(--hair-2)}
.loccard .k{color:var(--ink-2)}
.loccard .v{min-width:0;overflow-wrap:anywhere}
.loccard .d{color:var(--ink-2);font-size:12px}
.loccard .bad{color:var(--danger);font-weight:600}
.loccard details{margin-top:4px;font:13px/1.5 var(--f-note);color:var(--ink-2)}
.loccard details p{margin:4px 0}

/* charts in blog posts: inline SVG in the site's colours, so they follow light and dark mode */
.prose figure.chart{margin:30px 0}
.prose figure.chart svg{display:block;width:100%;height:auto}
.prose figure.chart figcaption{margin-top:8px;font:14.5px/1.5 var(--f-note);color:var(--ink-2)}
.chart text{font:12.5px var(--f-num);fill:var(--ink-2)}
.chart text.t{font:600 13.5px var(--f-num);fill:var(--ink)}
.chart text.v{font:600 12.5px var(--f-num);fill:var(--ink)}
.chart .grid{stroke:var(--hair);stroke-width:1}
.chart .base{stroke:var(--ink-2);stroke-width:1.2}
.chart .sun{fill:var(--sun-wash);stroke:var(--sun);stroke-width:2}
.chart .home{fill:none;stroke:var(--draw);stroke-width:2}
.chart .avg{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-dasharray:6 4}
.chart .b1{fill:var(--draw)}
.chart .b2{fill:var(--sun)}

/* The day chart: an average day per month off the hourly ledger (calculator.html's PAGESHARED
   block). The rooftop page shows it in a drawer on the results bar, the balcony page in a card. */
.dayhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 14px;margin-bottom:4px}
.daymonths{display:flex;flex-wrap:wrap;gap:3px}
.daymonths button{font:600 12px var(--f-label);letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border:1px solid var(--hair);border-radius:3px;background:transparent;color:var(--ink-2);cursor:pointer}
.daymonths button[aria-pressed="true"]{background:var(--ink);color:var(--face);border-color:var(--ink)}
.daylegend{display:flex;flex-wrap:wrap;gap:4px 10px}
.daylegend button{display:inline-flex;align-items:center;gap:5px;font:13px var(--f-num);color:var(--ink);background:none;border:0;padding:2px 0;cursor:pointer}
.daylegend button[aria-pressed="false"]{opacity:.4;text-decoration:line-through}
.daylegend i{display:inline-block;width:13px;height:10px;border-radius:2px}
#dayChart svg{display:block;width:100%;height:auto;touch-action:none}
#dayChart text{font:11.5px var(--f-num);fill:var(--ink-2)}
.daybar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-top:4px}
.daylive{flex:1 1 300px;font:14px/1.5 var(--f-num);color:var(--ink);min-height:21px;font-variant-numeric:tabular-nums}
.daylive .clk{font:700 20px/1 var(--f-num);color:var(--cursor);margin-right:8px}
.daybase{margin-left:auto;font:13px var(--f-num);color:var(--ink-2);white-space:nowrap}
.daybase b{font:700 20px/1 var(--f-num);color:var(--ink);margin-right:5px;font-variant-numeric:tabular-nums}
.daycap{font:12.5px/1.45 var(--f-note);color:var(--ink-2);margin-top:2px}
@media (max-width:560px){ .daymonths button{padding:2px 5px;font-size:11px} .daylegend button{font-size:12px} }