/* /savings-calculator — page-specific styles.
   Everything is scoped under #calc so nothing leaks into the shared chrome,
   and the palette is the site's own tokens rather than the standalone
   prototype's. Loaded only by this page via extraHead; hashed by bust.js. */

#calc{
  --c-line:var(--paper-3);
  --c-accent:var(--blue-700);
  --c-good:#178f66;
  --c-soft:rgba(0,119,213,.08);
  --c-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.06);
}

#calc .calc-grid{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start}
@media (max-width:880px){#calc .calc-grid{grid-template-columns:1fr}}

#calc .ccard{background:var(--paper);border:1px solid var(--c-line);border-radius:14px;box-shadow:var(--c-shadow)}
#calc .ccard-pad{padding:20px}
#calc .ccard h2{margin:0 0 3px;font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--text-2)}
#calc .ccard .sub{margin:0 0 16px;font-size:12.5px;color:var(--text-2)}

#calc .field{margin-bottom:15px}
#calc .field label{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:6px}
#calc .field .hint{font-weight:400;color:var(--text-2)}
#calc input[type=number],#calc select{
  width:100%;background:var(--paper-2);color:var(--text);
  border:1px solid var(--c-line);border-radius:8px;padding:9px 11px;font:inherit;font-size:14px;
}
#calc input[type=number]:focus,#calc select:focus{outline:2px solid var(--c-accent);outline-offset:-1px;border-color:transparent}

#calc .seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
#calc .seg button{
  background:var(--paper-2);border:1px solid var(--c-line);color:var(--text-2);
  border-radius:8px;padding:9px 4px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
}
#calc .seg button[aria-pressed="true"]{background:var(--c-accent);border-color:var(--c-accent);color:#fff}

/* Four tiles: heat cut, payback, yearly saving, 15-year net. Four across
   only where the column is wide enough for the money to stay on one line;
   two by two everywhere else, including phones — one long column of four
   pushed the chart below the fold. */
#calc .heroes{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--c-line);
  border:1px solid var(--c-line);border-radius:14px;overflow:hidden;margin-bottom:20px}
@media (min-width:1040px){#calc .heroes{grid-template-columns:repeat(4,1fr)}}
#calc .chero{background:var(--paper);padding:20px}
#calc .chero .k{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)}
#calc .chero .v{font-family:var(--font-display);font-size:31px;font-weight:700;letter-spacing:-1.1px;margin-top:7px;line-height:1;font-variant-numeric:tabular-nums;color:var(--text)}
#calc .chero .n{font-size:12.5px;color:var(--text-2);margin-top:7px}
#calc .chero.accent .v{color:var(--c-accent)}
#calc .chero.good .v{color:var(--c-good)}
@media (max-width:420px){
  #calc .chero{padding:14px 12px}
  #calc .chero .v{font-size:24px;letter-spacing:-.6px}
  #calc .chero .k{font-size:10.5px}
  #calc .chero .n{font-size:11.5px}
}

#calc .chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:2px}
#calc .chart-head h3{margin:0;font-size:15px;font-weight:700;letter-spacing:-.1px;color:var(--text)}
#calc figure{margin:0}
#calc figcaption{font-size:12.5px;color:var(--text-2);margin-bottom:14px}
#calc .viz{position:relative}
#calc svg{display:block;width:100%;height:auto;overflow:visible}
#calc .tip{
  position:absolute;pointer-events:none;opacity:0;transition:opacity .1s;
  background:var(--paper);border:1px solid var(--c-line);border-radius:9px;padding:9px 11px;
  box-shadow:var(--c-shadow);font-size:12.5px;white-space:nowrap;z-index:5;color:var(--text);
}
#calc .tip b{display:block;font-size:13px;margin-bottom:3px}
#calc .tip .row{color:var(--text-2);font-variant-numeric:tabular-nums}

/* Under 600px the chart gives way to three lines. A 720-unit SVG in a
   300px column is eleven-pixel tick labels and a legend nobody can read;
   the summary carries the same three facts as text. */
#calc .calc-sum{display:none;list-style:none;margin:0;padding:0}
#calc .calc-sum li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--c-line);font-size:13px;color:var(--text-2)}
#calc .calc-sum li:last-child{border-bottom:0}
#calc .calc-sum b{color:var(--text);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:600px){
  #calc .viz,#calc figcaption{display:none}
  #calc .calc-sum{display:block}
}

#calc .bens{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--c-line);
  border:1px solid var(--c-line);border-radius:12px;overflow:hidden;margin-top:20px}
@media (max-width:620px){#calc .bens{grid-template-columns:1fr}}
#calc .ben{background:var(--paper);padding:15px 17px}
#calc .ben .t{font-size:13.5px;font-weight:700;color:var(--text)}
#calc .ben .d{font-size:12.5px;color:var(--text-2);margin-top:3px}

#calc details{margin-top:18px;background:var(--paper);border:1px solid var(--c-line);border-radius:12px}
#calc summary{padding:14px 18px;cursor:pointer;font-size:13px;font-weight:700;color:var(--text-2);
  letter-spacing:.02em;text-transform:uppercase;list-style:none}
#calc summary::-webkit-details-marker{display:none}
#calc summary::after{content:"▾";float:right;color:var(--text-2)}
#calc details[open] summary::after{content:"▴"}
#calc .tblwrap{padding:0 18px 18px;border-top:1px solid var(--c-line);padding-top:16px;overflow-x:auto}

#calc table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px}
#calc th,#calc td{text-align:right;padding:7px 8px;border-bottom:1px solid var(--c-line);font-variant-numeric:tabular-nums}
#calc th:first-child,#calc td:first-child{text-align:left}
#calc th{color:var(--text-2);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em}

#calc .spec-note{font-size:11.5px;color:var(--text-2);margin:7px 0 0}
#calc .calc-foot{margin-top:22px;font-size:11.5px;color:var(--text-2);line-height:1.6}

@media print{
  #calc details{display:none}
  #calc .ccard,#calc .heroes,#calc .bens{box-shadow:none}
}

/* The hero H1 breaks by hand after "film" so it reads as two balanced lines
   on a desktop; under 420px that forced break left "film" alone on line
   two with "save you?" on line three. Let the phone wrap it. This sheet is
   loaded by this page only, so the selector stays page-scoped. */
@media (max-width:420px){.page-hero h1 br{display:none}}

/* "Where the numbers come from" — sits inside a full-width .wrap and caps
   itself, so its left edge is the calculator's left edge, and the two
   paragraphs get one explicit rhythm rather than whatever .lede inherits. */
#how .calc-how{max-width:760px}
#how .lede{line-height:1.65;max-width:66ch}
#how .lede + .lede{margin-top:16px}

/* Assumptions — shown, not hidden. A payback figure whose inputs are secret
   is not a figure anyone in commercial procurement will act on, and hiding
   them is also how a wrong assumption survives unchallenged. */
#calc .assump{margin-top:6px;background:var(--paper-2);border:1px solid var(--c-line);border-radius:10px}
#calc .assump summary{padding:11px 14px;cursor:pointer;font-size:12.5px;font-weight:600;
  color:var(--text-2);list-style:none;text-transform:none;letter-spacing:0}
#calc .assump summary::-webkit-details-marker{display:none}
#calc .assump summary::after{content:"▾";float:right;color:var(--text-2)}
#calc .assump[open] summary::after{content:"▴"}
#calc .assump-body{padding:0 14px 14px;border-top:1px solid var(--c-line);padding-top:12px}
#calc .arow{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-size:12px;color:var(--text-2);padding:4px 0}
#calc .arow b{color:var(--text);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
#calc .assump-note{margin:10px 0 0;font-size:11.5px;color:var(--text-2);line-height:1.55}