/* ============================================================
   WattNeeded design system — "precision instrument"
   Graphite surfaces · volt-yellow accent · Space Grotesk + Inter
   ============================================================ */

:root{
  --bg:#f5f4f0;
  --bg-glow:rgba(242,183,5,.07);
  --card:#fffefb;
  --ink:#16181d;
  --ink-soft:#3b3f48;
  --muted:#686e7b;
  --line:#e4e1d8;
  --line-strong:#cfcaba;
  --volt:#f2b705;
  --volt-soft:rgba(242,183,5,.14);
  --volt-text:#8a6400;
  --good:#1a7f4b;
  --warn:#b3261e;
  --chip:#eeece5;
  --shadow:0 1px 2px rgba(20,18,10,.05), 0 8px 24px -18px rgba(20,18,10,.25);
  --shadow-lift:0 2px 4px rgba(20,18,10,.06), 0 16px 32px -16px rgba(20,18,10,.28);
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e1014;
    --bg-glow:rgba(255,210,59,.05);
    --card:#171a20;
    --ink:#ecedee;
    --ink-soft:#c6c9cf;
    --muted:#969ca8;
    --line:#272b33;
    --line-strong:#3a404b;
    --volt:#ffd43b;
    --volt-soft:rgba(255,212,59,.10);
    --volt-text:#ffd43b;
    --good:#4cc38a;
    --warn:#ff8f88;
    --chip:#20242c;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 28px -18px rgba(0,0,0,.6);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 20px 40px -16px rgba(0,0,0,.65);
  }
}

*{box-sizing:border-box; margin:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(900px 420px at 78% -80px, var(--bg-glow), transparent 65%),
    var(--bg);
  color:var(--ink);
  font:16px/1.62 Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  padding:0 20px 72px;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px; margin:0 auto}
.wrap.narrow{max-width:780px}

h1,h2,h3,.wordmark,.big{
  font-family:"Space Grotesk",Inter,-apple-system,sans-serif;
  letter-spacing:-.015em;
}
h1{font-size:clamp(26px,4.2vw,38px); line-height:1.14; margin:14px 0 10px; font-weight:700}
h2{font-size:19px; margin-bottom:12px; font-weight:600}
h3{font-size:15px; margin:16px 0 6px; font-weight:600}
p{max-width:70ch}
a{color:inherit; text-decoration:underline; text-decoration-color:var(--volt); text-decoration-thickness:2px; text-underline-offset:3px}
a:hover{text-decoration-thickness:3px}

/* ---------------- site bar ---------------- */
.sitebar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0 14px; border-bottom:1px solid var(--line); margin-bottom:6px;
}
.wordmark{
  font-weight:700; font-size:17px; text-decoration:none; letter-spacing:-.01em;
  display:flex; align-items:center; gap:7px; white-space:nowrap;
}
.wordmark .bolt{
  display:inline-grid; place-items:center; width:24px; height:24px; border-radius:7px;
  background:var(--ink); color:var(--volt); font-size:13px;
}
@media (prefers-color-scheme: dark){ .wordmark .bolt{background:var(--volt); color:#16181d} }
.sitenav{display:flex; gap:4px 18px; flex-wrap:wrap; font-size:13.5px; margin-right:84px}
.sitenav a{text-decoration:none; color:var(--muted); font-weight:500}
.sitenav a:hover{color:var(--ink)}
@media (max-width:640px){ .sitenav{display:none} }

/* ---------------- page header ---------------- */
header.page{padding:26px 0 8px}
.crumb{font-size:13px; color:var(--muted)}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--ink)}
.sub,.lead{color:var(--ink-soft); max-width:64ch}
.lead{font-size:17.5px}
.lead b,.sub b{background:linear-gradient(transparent 62%, var(--volt-soft) 62%); padding:0 2px}
.eyebrow{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--volt-text); margin-bottom:4px;
}

/* ---------------- cards & layout ---------------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
}
.card + .card{margin-top:18px}
.layout{display:grid; grid-template-columns:1fr 372px; gap:22px; margin-top:26px}
@media (max-width:880px){ .layout{grid-template-columns:1fr} }
.results{position:sticky; top:18px; align-self:start}
.results .card{border-top:3px solid var(--volt)}

/* landing grid */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:18px; margin-top:34px}
.tool{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; text-decoration:none; color:var(--ink); display:block;
  box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.tool:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--line-strong)}
.tool h2{font-size:17px; margin:0 0 7px}
.tool p{font-size:14px; color:var(--muted); line-height:1.55}

/* badges & tags */
.badge{
  display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; background:var(--chip); border-radius:999px;
  padding:4px 11px; margin-bottom:12px; color:var(--muted);
}
.badge.live{background:var(--volt); color:#16181d}
.tag{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.06em;
  border-radius:5px; padding:2px 6px; margin-left:7px; vertical-align:1px;
}
.tag.dc{background:var(--chip); color:var(--muted)}
.tag.ac{background:var(--ink); color:var(--volt)}
.bundletag{display:inline-block; font-size:10px; font-weight:700; background:var(--chip); color:var(--muted); border-radius:5px; padding:2px 6px; margin-left:7px}

/* ---------------- tables ---------------- */
.tablewrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:14.5px}
th{
  text-align:left; color:var(--muted); font-weight:600; padding:9px 8px;
  border-bottom:1px solid var(--line-strong); font-size:11.5px;
  text-transform:uppercase; letter-spacing:.09em;
}
td{padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--volt-soft)}
td.num,th.num{text-align:right; white-space:nowrap}
td.num,.resrow b,.big,.appwatts{font-variant-numeric:tabular-nums}
tr.total td{font-weight:700; border-top:1px solid var(--line-strong)}
.appname,.prodname{font-weight:600}
.prodname a{text-decoration:none}
.prodname a:hover{color:var(--volt-text)}
.appwatts{color:var(--muted); font-size:12.5px}
.brandcell{color:var(--muted); font-size:12.5px}
.drop{color:var(--good); font-weight:700}

/* ---------------- forms ---------------- */
select,input[type=number],input[type=text]{
  background:var(--bg); color:var(--ink); border:1px solid var(--line-strong);
  border-radius:10px; padding:7px 10px; font:inherit; font-size:14px;
  transition:border-color .12s, box-shadow .12s;
}
input[type=number]{width:76px}
input[type=text]{width:100%}
select:focus,input:focus{outline:none; border-color:var(--volt); box-shadow:0 0 0 3px var(--volt-soft)}
input[type=checkbox]{width:17px; height:17px; accent-color:var(--volt); cursor:pointer}
.opts,.controls{display:flex; gap:12px 18px; flex-wrap:wrap; align-items:center; font-size:14.5px}
.opts label,.controls label{display:flex; align-items:center; gap:7px}
.duration{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.duration input{width:90px}
.dur-presets{display:flex; gap:6px; flex-wrap:wrap}
.chipbtn{
  background:var(--chip); border:1px solid var(--line); color:var(--ink);
  border-radius:999px; padding:5px 13px; font-size:13px; cursor:pointer; font-family:inherit;
  transition:border-color .12s, background .12s;
}
.chipbtn:hover{border-color:var(--volt); background:var(--volt-soft)}

/* ---------------- results panel ---------------- */
.big{font-size:36px; font-weight:700}
.unit{font-size:15px; color:var(--muted); font-weight:600; font-family:Inter,sans-serif}
.resrow{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14.5px}
.resrow:last-of-type{border-bottom:none}
.resrow b{text-align:right}
.verdict{
  margin-top:14px; padding:15px 16px; border-radius:11px;
  background:var(--volt-soft); border:1px solid var(--line); font-size:14.5px;
}
.verdict .cls,.verdict b{color:var(--volt-text); font-weight:700}
.verdict div{padding:3px 0}
.examples{font-size:13.5px; color:var(--muted); margin-top:6px}
.warnbox{margin-top:12px; padding:11px 13px; border-radius:10px; border:1px solid var(--warn); color:var(--warn); font-size:13.5px; display:none}
.solar{margin-top:12px; font-size:14px}
.note,.stamp{font-size:13px; color:var(--muted); margin-top:12px}
.muted{color:var(--muted)}
.aff-placeholder{margin-top:12px; font-size:12px; color:var(--muted); border:1px dashed var(--line-strong); border-radius:9px; padding:9px}

/* ---------------- guide/method content ---------------- */
.method{margin-top:28px}
.method p{margin:9px 0; max-width:76ch}
.method code,code{
  background:var(--chip); border-radius:6px; padding:1px 7px; font-size:13.5px;
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
}
dl dt,.faq dt{font-weight:600; margin-top:13px}
dl dd,.faq dd{color:var(--muted); margin:4px 0 0 0; max-width:74ch}
ul{padding-left:20px; margin:8px 0}
li{margin:7px 0; max-width:70ch}

/* CTA buttons */
.cta{
  display:inline-block; background:var(--ink); color:var(--bg); text-decoration:none;
  border-radius:10px; padding:11px 18px; font-weight:600; margin:16px 12px 0 0;
  font-size:14.5px; border:1px solid var(--ink);
  transition:background .12s, color .12s, transform .12s;
}
.cta:hover{background:var(--volt); border-color:var(--volt); color:#16181d; transform:translateY(-1px)}
.cta.sec{background:transparent; color:var(--ink); border:1px solid var(--line-strong)}
.cta.sec:hover{background:var(--chip); color:var(--ink); border-color:var(--line-strong)}
@media (prefers-color-scheme: dark){
  .cta{color:#16181d; background:var(--volt); border-color:var(--volt)}
  .cta:hover{background:#fff; border-color:#fff}
  .cta.sec{background:transparent; color:var(--ink)}
}

footer{margin-top:52px; font-size:13px; color:var(--muted); max-width:72ch; border-top:1px solid var(--line); padding-top:18px}
footer a{color:var(--muted)}

/* page-specific helpers */
#fallback{display:none}
.tablewrap table{min-width:640px}
@media (max-width:640px){ .card{overflow-x:auto} }

/* region pill (element injected by region.js) */
#wnRegion{position:absolute; top:16px; right:20px; z-index:5}
#wnRegion select{border-radius:999px; padding:5px 11px; font-size:12.5px; font-weight:600; background:var(--card)}