/* kWh Lab — shared tool-page styles */
:root{
  --canvas:#F4F5F2;--panel:#FFFFFF;--ink:#17191C;--ink-soft:#5A5F66;--ink-faint:#8A9099;
  --line:#DEE0DB;--line-strong:#C4C7C0;--signal:#6DD9D9;--signal-deep:#2FB3B3;--signal-wash:#E3F7F6;--alert:#C4442B;
  --display:'Space Grotesk',system-ui,sans-serif;--body:'IBM Plex Sans',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--canvas);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}

/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(244,245,242,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:28px;height:66px}
.logo-lockup{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.logo-lockup .mark{width:34px;height:34px}
.logo-lockup .wm{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em}
.logo-lockup .wm b{color:var(--ink)}
.logo-lockup .wm span{color:var(--ink-soft);font-weight:500}
nav.main{display:flex;gap:26px;margin-left:8px}
nav.main a{font-size:14px;font-weight:500;color:var(--ink-soft);text-decoration:none;transition:color .15s}
nav.main a:hover{color:var(--ink)}
.bar .spacer{flex:1}
.btn{font-family:var(--body);font-weight:600;font-size:14px;border:1px solid var(--ink);background:var(--signal);color:var(--ink);padding:9px 16px;border-radius:2px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:transform .12s,box-shadow .12s;box-shadow:2px 2px 0 var(--ink)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}

/* hero */
.hero{padding:52px 0 26px;border-bottom:1px solid var(--line)}
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
.crumb a{color:var(--ink-soft);text-decoration:none}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:10px;margin-bottom:16px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--signal-deep)}
h1{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.6vw,50px);line-height:1.03;letter-spacing:-.025em;max-width:18ch}
h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--signal) 62%);padding:0 2px}
.hero-sub{margin-top:18px;font-size:17px;color:var(--ink-soft);max-width:56ch}

/* instrument */
.instrument{padding:34px 0 26px}
.panel{background:var(--panel);border:1px solid var(--line-strong);border-radius:4px;box-shadow:0 1px 0 var(--line),0 18px 40px -28px rgba(23,25,28,.4);overflow:hidden}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid var(--line)}
.panel-head h2{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em}
.panel-head .tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.calc-grid{display:grid;grid-template-columns:1.05fr .95fr}
.calc-inputs{padding:22px;border-right:1px solid var(--line)}
.field-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;display:block}
select,input[type=number]{font-family:var(--body);font-size:14px;color:var(--ink);border:1px solid var(--line-strong);border-radius:2px;background:var(--panel);padding:10px;width:100%}
select:focus,input:focus{outline:2px solid var(--signal);outline-offset:0;border-color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{margin-bottom:16px}
.with-unit{position:relative}
.with-unit .u{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:12px;color:var(--ink-faint);pointer-events:none}
.with-unit input{padding-right:52px}
.with-unit.pre input{padding-left:24px;padding-right:10px}
.with-unit.pre .p{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:13px;color:var(--ink-faint);pointer-events:none}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hint{font-size:12px;color:var(--ink-faint);margin-top:6px}
.adv{border-top:1px dashed var(--line);margin-top:6px;padding-top:14px}
.adv summary{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;margin-bottom:12px}
.warn-note{font-size:11.5px;color:#8a5a00;background:var(--signal-wash);border:1px solid #F0DE9A;border-radius:3px;padding:8px 10px;margin-top:6px}

/* readout */
.readout{padding:22px;background:linear-gradient(180deg,#1b1d21,#141518);color:#fff;display:flex;flex-direction:column}
.readout .rlabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8f959d}
.meter{margin:6px 0 2px;display:flex;align-items:baseline;gap:8px}
.meter .big{font-family:var(--mono);font-weight:600;font-size:clamp(38px,7vw,58px);line-height:1;color:var(--signal);letter-spacing:-.02em}
.meter .unit{font-family:var(--mono);font-size:14px;color:#c9cdd2}
.subline{font-family:var(--mono);font-size:14px;color:#fff;margin:8px 0 2px}
.subline b{color:var(--signal)}
.ticks{display:flex;gap:3px;margin:16px 0 6px;height:24px;align-items:flex-end}
.ticks i{flex:1;background:#2c2f34;border-radius:1px;transition:background .3s,height .3s}
.ticks i.on{background:var(--signal)}
.scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:#6f757d;margin-bottom:8px}
.rrow{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid #2a2d32;font-size:13px}
.rrow .k{color:#9aa0a7;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em}
.rrow .v{font-family:var(--mono);font-weight:500}
.rrow .v.good{color:var(--signal)}
.summary{margin-top:auto;padding-top:16px;font-size:13px;color:#c9cdd2;line-height:1.5}
.summary b{color:#fff}

/* quote / tip band */
.quotecta{padding:22px;border-top:1px solid var(--line);background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.quotecta .t{font-family:var(--display);font-weight:600;font-size:17px}
.quotecta p{font-size:13px;color:#b9bec4;margin-top:4px;max-width:52ch}
.tip{padding:22px;border-top:1px solid var(--line);background:var(--signal-wash)}
.tip h3{font-family:var(--display);font-size:14px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.tip h3::before{content:"";width:8px;height:8px;background:var(--signal-deep);border-radius:50%}
.tip p{font-size:13.5px;color:var(--ink-soft);max-width:72ch}
.tip a{color:var(--ink);font-weight:600;border-bottom:2px solid var(--signal);text-decoration:none}
.tip .disc{font-size:11px;color:var(--ink-faint);margin-top:8px}

/* sections + tool grid */
.block{padding:56px 0;border-bottom:1px solid var(--line)}
.sec-head{margin-bottom:26px}
.sec-head .num-tab{font-family:var(--mono);font-size:12px;color:var(--ink-faint);letter-spacing:.1em}
.sec-head h2{font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;margin-top:4px}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tool{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:20px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,transform .15s;min-height:140px}
.tool:hover{border-color:var(--ink);transform:translateY(-2px)}
.tool .ic{font-family:var(--mono);font-size:12px;color:var(--signal-deep);letter-spacing:.1em}
.tool h3{font-family:var(--display);font-size:16px;font-weight:600}
.tool p{font-size:13px;color:var(--ink-soft);flex:1}
.tool .go{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.tool.soon{opacity:.72}

/* footer */
footer.site{background:var(--canvas);padding:40px 0 30px;border-top:1px solid var(--line)}
.disclosure{font-size:11.5px;color:var(--ink-faint);line-height:1.6;max-width:80ch}
.foot-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:18px;font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
.foot-legal a{color:inherit}

@media(max-width:860px){nav.main{display:none}.calc-grid{grid-template-columns:1fr}.calc-inputs{border-right:none;border-bottom:1px solid var(--line)}.tool-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* header button: shorten label on small screens */
.btn{white-space:nowrap}
.btn .btn-short{display:none}
@media(max-width:560px){.btn .btn-full{display:none}.btn .btn-short{display:inline}}


/* ---- kWh Lab brand logo + theme toggle ---- */
.logo-lockup .brandlogo{height:44px;width:auto;display:block}
.logo-lockup .logo-dark{display:none}
[data-theme="dark"] .logo-lockup .logo-light{display:none}
[data-theme="dark"] .logo-lockup .logo-dark{display:block}
.themesw{margin-left:14px;background:none;border:1px solid #C4C7C0;border-radius:6px;padding:0 12px;height:30px;cursor:pointer;font-size:12px;line-height:28px;color:inherit;flex-shrink:0;white-space:nowrap;font-family:inherit}
.themesw:hover{border-color:#17191C}
/* ---- dark theme ---- */
[data-theme="dark"] body{background:#151723;color:#E7E9EF}
[data-theme="dark"] header.site{background:rgba(21,23,35,.85);border-bottom-color:#2A2E40}
[data-theme="dark"] nav.main a{color:#A7ADBD}
[data-theme="dark"] nav.main a:hover{color:#fff}
[data-theme="dark"] .themesw{border-color:#3A4152}
[data-theme="dark"] .themesw:hover{border-color:#6DD9D9}
[data-theme="dark"] .langsw a{color:#A7ADBD !important}
[data-theme="dark"] .langsw>span[style*="font-weight:600"]{color:#F2F4F8 !important}
[data-theme="dark"] .back{color:#A7ADBD}
[data-theme="dark"] .back:hover{color:#fff}
[data-theme="dark"] .hero{border-bottom-color:#2A2E40}
[data-theme="dark"] h1{color:#F2F4F8}
[data-theme="dark"] .hero-sub{color:#B6BDCC}
[data-theme="dark"] .eyebrow{color:#A7ADBD}
[data-theme="dark"] .crumb{color:#7E8698}
[data-theme="dark"] .crumb a{color:#A7ADBD}
[data-theme="dark"] .panel{background:#1E2131;border-color:#2E3346;box-shadow:none}
[data-theme="dark"] .panel-head{border-bottom-color:#2E3346}
[data-theme="dark"] .panel-head h2{color:#F2F4F8}
[data-theme="dark"] .calc-inputs{border-right-color:#2E3346;border-bottom-color:#2E3346}
[data-theme="dark"] select,[data-theme="dark"] input[type=number]{background:#14161F;border-color:#3A4152;color:#E7E9EF}
[data-theme="dark"] .field-label{color:#A7ADBD}
[data-theme="dark"] .hint{color:#7E8698}
[data-theme="dark"] .adv{border-top-color:#2E3346}
[data-theme="dark"] .adv summary{color:#A7ADBD}
[data-theme="dark"] .recs{border-top-color:#2E3346}
[data-theme="dark"] .recs h3{color:#F2F4F8}
[data-theme="dark"] .rec{background:#171A26;border-color:#2E3346}
[data-theme="dark"] .rec .pname{color:#F2F4F8}
[data-theme="dark"] .rec .cap,[data-theme="dark"] .rec .why{color:#A7ADBD}
[data-theme="dark"] .rec .cta{color:#E7E9EF}
[data-theme="dark"] .empty{color:#7E8698}
[data-theme="dark"] .tip{background:#1E2233;border-top-color:#2E3346}
[data-theme="dark"] .tip p{color:#B6BDCC}
[data-theme="dark"] .tip a{color:#EAF7F6}
[data-theme="dark"] .tip .disc{color:#7E8698}
[data-theme="dark"] .block{border-bottom-color:#2E3346}
[data-theme="dark"] .sec-head h2{color:#F2F4F8}
[data-theme="dark"] .sec-head .lead{color:#B6BDCC}
[data-theme="dark"] .num-tab{color:#7E8698}
[data-theme="dark"] .tool{background:#1E2131;border-color:#2E3346}
[data-theme="dark"] .tool:hover{border-color:#6DD9D9}
[data-theme="dark"] .tool h3{color:#F2F4F8}
[data-theme="dark"] .tool p,[data-theme="dark"] .tool .go{color:#A7ADBD}
[data-theme="dark"] .guide{background:#1E2131;border-color:#2E3346}
[data-theme="dark"] .guide .top{background:#FFFFFF;border-bottom-color:#2E3346}
[data-theme="dark"] .guide h3{color:#F2F4F8}
[data-theme="dark"] .guide p{color:#A7ADBD}
[data-theme="dark"] footer.site{background:#151723;border-top-color:#2A2E40}
[data-theme="dark"] .foot-top{border-bottom-color:#2E3346}
[data-theme="dark"] .foot-top h4{color:#7E8698}
[data-theme="dark"] .foot-top a{color:#A7ADBD}
[data-theme="dark"] .foot-top a:hover{color:#fff}
[data-theme="dark"] .foot-blurb{color:#A7ADBD}
[data-theme="dark"] .disclosure,[data-theme="dark"] .foot-legal{color:#7E8698}
[data-theme="dark"] .with-unit .u{color:#7E8698}
[data-theme="dark"] .res{background:#171A26;border-color:#2E3346}
[data-theme="dark"] .res .rv{color:#F2F4F8}
[data-theme="dark"] .res .rl,[data-theme="dark"] .eq{color:#7E8698}
[data-theme="dark"] main p,[data-theme="dark"] main li{color:#C4CAD6}
[data-theme="dark"] main h2{color:#F2F4F8}
[data-theme="dark"] .callout{background:#1E2131;border-color:#2E3346;color:#A7ADBD}
[data-theme="dark"] .updated{color:#7E8698}
[data-theme="dark"] .quotecta,[data-theme="dark"] .quote-band{background:#0F111A;border-top-color:#2E3346}