/* ebbillcalc.com — site styles */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/geist.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/jetbrains-mono.woff2) format("woff2")}

:root{
  --paper:#F2F5F4; --surface:#FFFFFF; --raised:#FAFBFB;
  --ink:#14223A; --ink-2:#47566A; --ink-3:#566372;
  --fs-xs:15px; --fs-s:16px; --fs-m:18px; --fs-l:20px;
  --rule:#D5DDDE; --rule-2:#E6EBEB;
  --teal:#0A6B66; --teal-ink:#07524E; --teal-wash:#E0EFEC;
  --amber:#E39B12; --amber-wash:#FCF1D8;
  --s1:#D3EAE6; --s2:#A6D3CC; --s3:#72B8AF; --s4:#3F9990; --s5:#0F7A72; --s6:#08524E;
  --warn:#8A5A00; --warn-wash:#FDF3DC; --head:#14223A; --on-head:#F2F5F4;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono","Geist",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1180px; --gut:20px;
  --r-s:6px; --r-m:10px; --r-l:16px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0D1A20; --surface:#14242C; --raised:#182B34;
  --ink:#E4ECEE; --ink-2:#A3B4BC; --ink-3:#94A6AE;
  --rule:#2A3D47; --rule-2:#21333C;
  --teal:#49BCB1; --teal-ink:#7FD3CA; --teal-wash:#173A3A;
  --amber:#F0B33C; --amber-wash:#3A2F17;
  --s1:#1D3A3C; --s2:#245452; --s3:#2C6F6A; --s4:#378C84; --s5:#4AAAA0; --s6:#7FD3CA;
  --warn:#F0C26A; --warn-wash:#33291A; --head:#0A3B3C; --on-head:#E4ECEE;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#0D1A20; --surface:#14242C; --raised:#182B34;
  --ink:#E4ECEE; --ink-2:#A3B4BC; --ink-3:#94A6AE;
  --rule:#2A3D47; --rule-2:#21333C;
  --teal:#49BCB1; --teal-ink:#7FD3CA; --teal-wash:#173A3A;
  --amber:#F0B33C; --amber-wash:#3A2F17;
  --s1:#1D3A3C; --s2:#245452; --s3:#2C6F6A; --s4:#378C84; --s5:#4AAAA0; --s6:#7FD3CA;
  --warn:#F0C26A; --warn-wash:#33291A; --head:#0A3B3C; --on-head:#E4ECEE;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-m)/1.6 var(--sans);font-feature-settings:"ss01";-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--teal-ink)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:3px}
h1,h2,h3{font-family:var(--serif);font-weight:560;line-height:1.15;letter-spacing:-.012em;margin:0;color:var(--ink);font-variation-settings:"opsz" 72}
h1{font-size:clamp(34px,6vw,56px);font-weight:520}
h2{font-size:clamp(26px,3.4vw,34px)}
h3{font-size:21px;font-variation-settings:"opsz" 24}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"zero" 0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;z-index:10}
.skip:focus{left:8px}

/* header */
.top{border-bottom:1px solid var(--rule);background:var(--surface)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:600 19px/1 var(--sans);letter-spacing:-.01em}
.brand svg{width:30px;height:30px}
.brand b{font-weight:600}.brand .wm span{color:var(--ink-3);font-weight:450}
.nav{margin-left:auto;display:flex;gap:4px}
.nav a{color:var(--ink-2);text-decoration:none;font-size:var(--fs-s);padding:8px 12px;border-radius:var(--r-s)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);background:var(--paper)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--rule);border-radius:var(--r-s);padding:7px 11px;font:500 var(--fs-s) var(--sans);color:var(--ink)}
@media (max-width:820px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--surface);border-bottom:1px solid var(--rule);flex-direction:column;padding:8px var(--gut) 14px;z-index:20}
  .nav.open{display:flex}
  .top{position:relative}
}

/* hero */
.hero{padding:44px 0 56px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.hero h1{max-width:13ch}
.lede{font-size:19px;color:var(--ink-2);max-width:46ch;margin-top:18px}
.facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:0;list-style:none;color:var(--ink-2);font-size:var(--fs-s)}
.facts li{display:flex;align-items:center;gap:8px}
.facts li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--teal)}
@media (min-width:980px){
  .hero{padding:64px 0 72px}
  .hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
  .hero-copy{position:sticky;top:32px;padding-top:12px}
}
.crumbs{font-size:var(--fs-s);color:var(--ink-3);margin-bottom:14px}
.crumbs a{color:var(--ink-3)}
.page-head{padding:36px 0 8px}
.page-head .lede{max-width:62ch}
.hub-head{padding:40px 0 4px}.hub-head h1{max-width:22ch}.hub-head .facts{display:flex}
.calc-sec{padding:22px 0 52px}
@media (max-width:560px){.hub-head{padding-top:26px}.hub-head .lede{font-size:var(--fs-m)}.hub-head .facts{font-size:var(--fs-s);margin-top:14px}}
/* phone result bar */
.peek{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 16px;border:1px solid var(--rule);border-radius:16px;background:var(--surface);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.peek[hidden]{display:none}
.peek .pk-l{font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap}
.peek .pk-v{flex:1;min-width:0;font-size:var(--fs-m);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.peek .btn{flex:none;min-height:40px;padding:0 14px}
@media (min-width:900px){.peek{display:none!important}}
.ap-tag{flex:none;font-size:var(--fs-xs);font-weight:650;letter-spacing:.02em;padding:2px 8px;border-radius:999px;background:var(--amber-soft,rgba(224,169,62,.16));color:var(--ink-2)}
/* uniform number controls so the right edge lines up */
.frow .cn{width:9.75rem;justify-content:flex-end}.frow .cn input{flex:1;width:auto;min-width:0}
.frow.money .cn{width:11rem}
.cn.pin input{width:6.5em}
.ts-row b.long,.ts-row .long{font-size:var(--fs-s);line-height:1.3}


/* calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media (min-width:720px){.calc{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}}
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);padding:22px}
.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
.field>label,.field>.lab{display:block;font-weight:550;font-size:var(--fs-s);margin-bottom:7px}
.hint{display:block;font-size:var(--fs-s);color:var(--ink-3);margin-top:6px;line-height:1.45}
select,input[type=number]{width:100%;font:500 var(--fs-m) var(--sans);color:var(--ink);background:var(--raised);border:1px solid var(--rule);border-radius:var(--r-m);padding:11px 12px;min-height:48px}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
select:focus,input:focus{outline:2px solid var(--teal);outline-offset:0;border-color:transparent}
.units{display:flex;align-items:stretch;border:1px solid var(--rule);border-radius:var(--r-m);background:var(--raised);overflow:hidden}
.units input{border:0;border-radius:0;background:transparent;font:500 30px var(--mono);padding:8px 14px;min-height:62px;letter-spacing:-.02em}
.units input:focus{outline:none}
.units:focus-within{outline:2px solid var(--teal)}
.units .suf{display:flex;align-items:center;padding:0 16px;color:var(--ink-3);font-size:var(--fs-s);border-left:1px solid var(--rule-2)}
input[type=range]{width:100%;margin:14px 0 0;accent-color:var(--teal);height:28px}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:var(--r-m);padding:3px;background:var(--raised);gap:3px}
.seg button{font:500 var(--fs-s) var(--sans);color:var(--ink-2);background:none;border:0;border-radius:7px;padding:8px 16px;min-height:40px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--rule)}
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:4px 0}
.check input{appearance:none;flex:none;width:40px;height:24px;border-radius:12px;background:var(--rule);position:relative;margin:1px 0 0;cursor:pointer;transition:background .15s}
.check input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
.check input:checked{background:var(--teal)}
.check input:checked::after{transform:translateX(16px)}
.check span{font-size:var(--fs-s);font-weight:500}
.check small{display:block;color:var(--ink-3);font-size:var(--fs-s);font-weight:400}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.more{margin-top:6px;border-top:1px dashed var(--rule);padding-top:12px}
.more summary{cursor:pointer;color:var(--teal);font-size:var(--fs-s);font-weight:500}
.more[open] summary{margin-bottom:12px}

/* the bill slip */
.slip{background:var(--surface);border-radius:var(--r-l) var(--r-l) 0 0;position:relative;filter:drop-shadow(0 1px 0 var(--rule)) drop-shadow(0 0 1px var(--rule));
  -webkit-mask:radial-gradient(9px at 50% 100%,#0000 98%,#000) 50% 100%/18px 100% repeat-x;mask:radial-gradient(9px at 50% 100%,#0000 98%,#000) 50% 100%/18px 100% repeat-x;padding-bottom:18px}
.slip-head{background:var(--head);color:var(--on-head);border-radius:var(--r-l) var(--r-l) 0 0;padding:16px 22px 18px;display:flex;justify-content:space-between;gap:16px;align-items:flex-end}
.slip-head .who{font-size:var(--fs-s);opacity:.8;line-height:1.35}
.slip-head .who b{display:block;font:560 19px var(--serif);opacity:1;color:var(--on-head);margin-bottom:2px;font-variation-settings:"opsz" 24}
.slip-head .per{font:500 var(--fs-xs) var(--mono);opacity:.85;text-align:right;white-space:nowrap}
.slip-total{padding:20px 22px 6px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.slip-total .lab{font-size:var(--fs-s);color:var(--ink-2)}
.slip-total .amt{font:500 clamp(38px,6vw,52px)/1 var(--mono);letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.slip-total .pm{width:100%;font-size:var(--fs-s);color:var(--ink-3);margin-top:2px}
.ladder{display:flex;height:12px;margin:14px 22px 6px;gap:2px}
.ladder i{display:block;height:100%;min-width:3px}
.ladder i:first-child{border-radius:4px 0 0 4px}.ladder i:last-child{border-radius:0 4px 4px 0}.ladder i:only-child{border-radius:4px}
.ladder-key{margin:0 22px;font-size:var(--fs-xs);color:var(--ink-3)}
.lines{list-style:none;margin:12px 0 0;padding:0 22px}
.lines li{display:flex;gap:10px;align-items:baseline;padding:7px 0;font-size:var(--fs-s)}
.lines li .l{flex:none;max-width:72%}
.lines li .d{flex:1;border-bottom:1.5px dotted var(--rule);transform:translateY(-4px);min-width:12px}
.lines li .v{font:500 var(--fs-s) var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.lines li.sub{padding:3px 0 3px 14px;font-size:var(--fs-s);color:var(--ink-2)}
.lines li.sub .v{font-size:var(--fs-s);color:var(--ink-2)}
.lines li.sub .sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:8px;transform:translateY(-1px)}
.lines li.group{border-top:1px solid var(--rule-2);margin-top:6px;padding-top:11px;font-weight:550}
.lines li.neg .v{color:var(--teal)}
.lines li.sum{border-top:2px solid var(--ink);margin-top:10px;padding-top:12px;font-weight:600;font-size:var(--fs-m)}
.lines li.sum .v{font-size:var(--fs-m)}
.slip-notes{margin:16px 22px 0;padding:12px 14px;background:var(--paper);border-radius:var(--r-m);font-size:var(--fs-s);color:var(--ink-2);line-height:1.5}
.slip-notes p{margin:0 0 6px}.slip-notes p:last-child{margin:0}
.slip-notes .w{color:var(--warn)}
.slip-src{margin:12px 22px 0;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.5}
.slip-empty{padding:40px 22px;color:var(--ink-2)}
.err{margin:16px 22px;padding:12px 14px;border-radius:var(--r-m);background:var(--warn-wash);color:var(--warn);font-size:var(--fs-s)}

/* sections */
.sec{padding:56px 0;border-top:1px solid var(--rule)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.sec-head p{color:var(--ink-2);max-width:60ch;margin:10px 0 0}
.two{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:900px){.two{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px}}
.prose{max-width:68ch}
.prose h2{margin:40px 0 14px}.prose h2:first-child{margin-top:0}
.prose h3{margin:28px 0 10px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 1em}.prose li{margin-bottom:6px}
.prose .note{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--amber);padding:14px 16px;border-radius:var(--r-s);font-size:var(--fs-m)}

/* state index */
.regions{display:grid;grid-template-columns:minmax(0,1fr);gap:30px 40px}
@media (min-width:700px){.regions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.regions{grid-template-columns:repeat(3,minmax(0,1fr))}}
.region h3{font-size:19px;padding-bottom:8px;border-bottom:1px solid var(--ink);margin-bottom:4px}
.region ul{list-style:none;margin:0;padding:0}
.region li a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule-2);text-decoration:none;color:var(--ink)}
.region li a:hover .n{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.region .n{font-weight:500}
.region .u{display:block;font-size:var(--fs-xs);color:var(--ink-3);font-weight:400}
.region .p{font:500 var(--fs-s) var(--mono);color:var(--ink-2);white-space:nowrap}
.idx-key{font-size:var(--fs-s);color:var(--ink-3);margin-top:20px}

/* slab illustration */
.steps{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);padding:22px}
.steps svg{width:100%;height:auto}
.steps figcaption{font-size:var(--fs-s);color:var(--ink-3);margin-top:10px}

/* tables */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:var(--r-m);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:var(--fs-s)}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule-2);vertical-align:top}
thead th{font-weight:600;font-size:var(--fs-s);color:var(--ink-2);background:var(--raised);border-bottom:1px solid var(--rule)}
tbody tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
td .num{white-space:nowrap}
.cats{display:flex;flex-direction:column;gap:10px}
.cat{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-m)}
.cat>summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;gap:12px;align-items:baseline}
.cat>summary .badge{margin-left:auto}
.cat>summary::-webkit-details-marker{display:none}
.cat>summary .t{font-weight:550}
.cat>summary .c{font:500 var(--fs-xs) var(--mono);color:var(--ink-3);margin-right:8px}
.cat>summary::after{content:"+";font:400 22px/1 var(--sans);color:var(--ink-3)}
.cat[open]>summary::after{content:"–"}
.cat-body{padding:0 16px 16px}
.cat-body .tbl-wrap{margin:10px 0}
.cat-body p{font-size:var(--fs-s);color:var(--ink-2);margin:8px 0}
.badge{display:inline-block;font-size:var(--fs-xs);font-weight:550;padding:2px 8px;border-radius:20px;white-space:nowrap}
.badge.verified{background:var(--teal-wash);color:var(--teal-ink)}
.badge.single-read,.badge.derived{background:var(--amber-wash);color:var(--warn)}
.badge.unverified{background:var(--rule-2);color:var(--ink-2)}
.src{font-size:var(--fs-s);color:var(--ink-2);line-height:1.5}
.src a{word-break:break-word}

/* source card */
.source{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);padding:20px 22px}
.source dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:4px 18px}
@media (min-width:640px){.source dl{grid-template-columns:150px minmax(0,1fr)}}
.source dt{color:var(--ink-3);font-size:var(--fs-s);padding-top:6px}
.source dd{margin:0;padding-top:6px;font-size:var(--fs-s)}
@media (min-width:640px){.source dt,.source dd{border-top:1px solid var(--rule-2);padding:9px 0}.source dt:first-of-type,.source dd:first-of-type{border-top:0}}

/* compare chart (one series: bill per month) */
.bars{list-style:none;margin:0;padding:0}
.bars li{display:grid;grid-template-columns:minmax(110px,190px) minmax(0,1fr) 84px;gap:12px;align-items:center;padding:5px 0;border-bottom:1px solid var(--rule-2)}
.bars a{color:var(--ink);text-decoration:none;font-size:var(--fs-s)}
.bars a:hover{color:var(--teal);text-decoration:underline}
.bars .track{height:14px;position:relative}
.bars .bar{display:block;height:100%;background:var(--s4);border-radius:0 4px 4px 0;min-width:2px}
.bars li:hover .bar,.bars li:focus-within .bar{background:var(--s6)}
.bars .val{font:500 var(--fs-s) var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.bars .tag{font-size:var(--fs-xs);color:var(--ink-3);display:block}
@media (max-width:560px){.bars li{grid-template-columns:minmax(0,1fr) 78px}.bars .track{grid-column:1/-1;grid-row:2}}
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:18px}
.toolbar .lab{font-size:var(--fs-s);color:var(--ink-2)}

/* faq */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:16px 0;font-weight:550;font-size:var(--fs-m);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:var(--ink-3);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 18px;color:var(--ink-2);max-width:70ch}

.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.chips a{display:inline-block;padding:7px 12px;border:1px solid var(--rule);border-radius:20px;text-decoration:none;color:var(--ink);font-size:var(--fs-s);background:var(--surface)}
.chips a:hover{border-color:var(--teal);color:var(--teal)}

/* footer */
.foot{margin-top:40px;background:var(--ink);color:#C9D4DA;padding:44px 0 30px;font-size:var(--fs-s)}
:root[data-theme="dark"] .foot{background:#08131A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .foot{background:#08131A}}
.foot a{color:#E7EEF1}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:800px){.foot-grid{grid-template-columns:minmax(0,4fr) minmax(0,2fr) minmax(0,4fr) minmax(0,2fr)}}
.foot-tools ul{columns:2;column-gap:28px}
.foot-tools li{break-inside:avoid}
.foot h4{font:600 var(--fs-s) var(--sans);color:#fff;margin:0 0 10px}
.foot ul{list-style:none;margin:0;padding:0}.foot li{margin-bottom:7px}
.foot .fine{border-top:1px solid #2C3D52;margin-top:30px;padding-top:18px;font-size:var(--fs-s);color:#9FB0BB;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.foot .brand{color:#fff}.foot .brand .wm span{color:#9FB0BB}.foot .brand svg rect:first-child{fill:#22344D}

/* consent */
.consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;max-width:560px;margin:0 auto;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);padding:16px 18px;box-shadow:0 8px 30px rgba(10,30,40,.18);font-size:var(--fs-s)}
.consent p{margin:0 0 12px;color:var(--ink-2)}
.consent .b{display:flex;gap:10px;flex-wrap:wrap}
.btn{font:550 var(--fs-s) var(--sans);border-radius:var(--r-m);padding:10px 16px;border:1px solid var(--rule);background:var(--surface);color:var(--ink);cursor:pointer;min-height:44px;text-decoration:none;display:inline-flex;align-items:center}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
:root[data-theme="dark"] .btn.primary{color:#062320}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.primary{color:#062320}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.cat>summary>span:first-child{min-width:0;overflow-wrap:anywhere}
.lines li .l{flex:0 1 auto;min-width:0}
@media (max-width:560px){th,td{padding:9px 10px}.hero{padding-top:28px}.facts{display:none}.page-head .facts{display:flex}}
@media (max-width:440px){.row2{grid-template-columns:1fr}}

/* insights, sharing */
.insights{list-style:none;margin:14px 22px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.insights li{font-size:var(--fs-s);padding:9px 12px;border-radius:var(--r-m);background:var(--paper);color:var(--ink-2);line-height:1.45}
.insights li.now{background:var(--teal-wash);color:var(--teal-ink);font-weight:600}
.insights li.cliff{background:var(--warn-wash);color:var(--warn);font-weight:550}
.insights li.past{background:var(--amber-wash);color:var(--ink)}
.share{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.share .btn{font-size:var(--fs-s);min-height:40px;padding:8px 14px}
.share [data-act="wa"]{background:#1FA855;border-color:#1FA855;color:#fff}
/* bill checker */
.units.small input{font-size:20px;min-height:48px;padding:6px 10px}
.units .pre{display:flex;align-items:center;padding:0 0 0 14px;color:var(--ink-3);font-weight:600}
.verdict{margin:18px 22px 0;padding:14px 16px;border-radius:var(--r-m)}
.verdict b{display:block;font-size:18px;margin-bottom:2px}
.verdict span{font-size:var(--fs-s)}
.verdict.good{background:var(--teal-wash);color:var(--teal-ink)}
.verdict.bad{background:var(--warn-wash);color:var(--warn)}
table.cmp td small{display:block;color:var(--ink-3);font-size:var(--fs-xs);margin-top:2px}
table.cmp .tick{color:var(--teal-ink);font-weight:600}
table.cmp .cross{color:var(--warn);font-weight:600}
table.cmp tr.na td{color:var(--ink-3)}
.findings{list-style:none;margin:14px 22px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.findings li{font-size:var(--fs-s);line-height:1.5;padding:10px 12px;border-radius:var(--r-m);border-left:3px solid var(--teal)}
.findings li.good{background:var(--teal-wash)}
.findings li.bad{background:var(--warn-wash);border-left-color:var(--amber)}
.check-out .more .slip{margin-top:10px;box-shadow:0 0 0 1px var(--rule-2)}
.tool-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
table.fuel td small{display:block;color:var(--ink-3);font-size:var(--fs-xs)}table.fuel td{font-size:var(--fs-s)}

/* tools: tracker, appliances, solar, slab ladder chart */
.tool-sum{background:var(--surface);border-radius:var(--r-l);box-shadow:0 12px 36px rgba(16,32,80,.08),0 0 0 1px var(--rule-2);padding:18px 18px 16px;margin-bottom:16px}
.tool-sum .insights{margin:14px 0 0}
.tool-sum .tbl-wrap{margin-top:14px}
.tool-sum>.hint{margin-top:10px}
.ts-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.ts-row+.ts-row{margin-top:10px}
.ts-row>div{background:var(--raised);border-radius:var(--r-m);padding:12px 14px;min-width:0}
.ts-row .lab{display:block;font-size:var(--fs-xs);color:var(--ink-3);font-weight:600}
.ts-row b{display:block;font-size:22px;letter-spacing:-.02em;margin-top:2px;overflow-wrap:anywhere}
.ts-row small{display:block;font-size:var(--fs-xs);color:var(--ink-2)}
.rules{margin-top:16px;border-top:1px solid var(--rule);padding-top:14px}
.rules h4{font-size:var(--fs-s);margin:0 0 8px}
.rules ul{margin:0;padding-left:18px;font-size:var(--fs-s);color:var(--ink-2);line-height:1.5}
.rules li+li{margin-top:6px}
.appl-t td,.appl-t th{white-space:nowrap}
.appl-t td:first-child{white-space:normal}
.ladder-chart{margin:16px 0 0;background:var(--surface);border-radius:var(--r-l);box-shadow:0 0 0 1px var(--rule-2);padding:16px 16px 12px}
.ladder-chart figcaption b{display:block;font-size:var(--fs-m)}
.ladder-chart figcaption span{display:block;font-size:var(--fs-s);color:var(--ink-3);margin-top:2px}
.lc-key{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 4px;padding:0;font-size:var(--fs-xs);color:var(--ink-2)}
.lc-key i{display:inline-block;width:16px;height:0;vertical-align:middle;margin-right:6px;border-top:2px solid var(--c-rt)}
.lc-key i.k2{border-top:2px dashed var(--c-avg)}
.lc-key i.k3{border-top:2px dotted var(--warn);height:10px;width:0;border-top:0;border-left:2px dotted var(--c-cl)}
.lc-key i.k4{width:10px;height:10px;border:2px solid var(--surface);border-radius:50%;background:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.lc-wrap{position:relative}
.ladder-chart svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.ladder-chart .g{stroke:var(--rule-2);stroke-width:1}
.ladder-chart .ax{fill:var(--ink-2);font:500 var(--fs-xs) var(--sans)}
.ladder-chart{--c-rt:var(--teal);--c-avg:var(--ink-3);--c-cl:var(--warn)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ladder-chart{--c-rt:#6C8CFF;--c-avg:#5E6878;--c-cl:#E0A93E}}
:root[data-theme="dark"] .ladder-chart{--c-rt:#6C8CFF;--c-avg:#5E6878;--c-cl:#E0A93E}
.ladder-chart .rt{fill:none;stroke:var(--c-rt);stroke-width:2;stroke-linejoin:round}
.ladder-chart .avg{fill:none;stroke:var(--c-avg);stroke-width:1.5;stroke-dasharray:5 4}
.ladder-chart .cl{stroke:var(--c-cl);stroke-width:1.5;stroke-dasharray:2 3}
.ladder-chart .cl-t{fill:var(--c-cl);font:700 var(--fs-xs) var(--sans)}
.ladder-chart .mk{stroke:var(--ink);stroke-width:1;opacity:.5}
.ladder-chart .mk-d{fill:var(--ink);stroke:var(--surface);stroke-width:2}
.ladder-chart .hx{stroke:var(--ink-2);stroke-width:1}
.ladder-chart .hit{fill:transparent;cursor:crosshair}
.lc-tip{position:absolute;top:0;transform:translateX(-50%);background:var(--ink);color:var(--surface);border-radius:10px;padding:7px 10px;font-size:var(--fs-xs);line-height:1.4;pointer-events:none;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.lc-tip b,.lc-tip span{display:block}
.lc-tbl{margin-top:8px}
.lc-tbl summary{cursor:pointer;color:var(--teal);font-size:var(--fs-s);font-weight:600}
.lc-tbl .tbl-wrap{margin-top:8px}
.field>label.check{display:flex}

/* ---------------------------------------------------------------- the entry sheet (all calculator forms) */
.calc-form.panel{padding:0;overflow:hidden}
.fs{border:0;margin:0;padding:18px 20px 16px;min-width:0}
.fs+.fs{border-top:1px solid var(--rule-2)}
.fs legend{float:left;width:100%;padding:0;margin:0 0 4px;font-size:var(--fs-s);font-weight:700;color:var(--ink-2);letter-spacing:-.005em}
.fs legend+*{clear:both}
.fs-pick select{margin-top:6px;font-weight:650;background-color:var(--surface)}
.fs-note{font-size:var(--fs-s);color:var(--ink-3);line-height:1.45;margin:6px 0 4px}
.frow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:12px 0;border-top:1px solid var(--rule-2)}
.fs legend+.frow,.fs-note+.frow,.fs-more>.frow:first-of-type{border-top:0}
.fl{min-width:0}
.fl label,.fl .flab{display:block;font-size:var(--fs-s);font-weight:650;color:var(--ink);line-height:1.3}
.fl small{display:block;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.4;margin-top:2px}
.frow.seg-row{grid-template-columns:auto minmax(0,1fr)}
.frow.seg-row .fc{justify-self:end}
.cn{display:inline-flex;align-items:center;height:44px;border:1px solid var(--rule);border-radius:12px;background:var(--surface);transition:border-color .12s,box-shadow .12s}
.cn:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-wash)}
.cn input{border:0;background:transparent;min-height:0;height:42px;width:5.2em;padding:0 10px;text-align:right;font:650 var(--fs-m) var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);border-radius:12px}
.cn input:focus{outline:none}
.cn .pre{padding-left:12px;color:var(--ink-3);font-weight:650;font-size:var(--fs-s)}
.cn .pre+input{padding-left:4px;text-align:left}
.cn .suf{padding-right:12px;color:var(--ink-3);font-size:var(--fs-s);font-weight:600;white-space:nowrap}
.cn input+.suf{padding-left:0}
.frow.money .cn input{width:7.2em}
.tog{cursor:pointer}
.tg-sw{appearance:none;-webkit-appearance:none;display:block;width:46px;height:28px;border-radius:14px;background:var(--rule);position:relative;margin:0;cursor:pointer;transition:background .15s;flex:none}
.tg-sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(13,22,38,.25);transition:transform .15s}
.tg-sw:checked{background:var(--teal)}
.tg-sw:checked::after{transform:translateX(18px)}
.tg-sw:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:12px;padding:3px;background:var(--raised);gap:2px}
.seg button{font:600 var(--fs-s) var(--sans);color:var(--ink-2);background:none;border:0;border-radius:9px;padding:0 12px;min-height:36px;white-space:nowrap;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(13,22,38,.12),0 0 0 1px var(--rule)}
.seg button:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
/* the units entry: the one big element */
.meter{text-align:center;padding:6px 0 2px}
.m-lab{display:block;font-size:var(--fs-s);font-weight:650;color:var(--ink-2)}
.m-row{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:8px;margin-top:8px}
.m-step{width:48px;height:48px;border-radius:50%;border:0;background:var(--teal-wash);color:var(--teal-ink);font:500 26px/1 var(--sans);cursor:pointer;display:grid;place-items:center}
.m-step:hover{background:var(--s2)}
.m-step:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.m-val{display:flex;align-items:baseline;justify-content:center;gap:6px;min-width:0}
.m-val input{width:4.6ch;max-width:100%;border:0;border-bottom:2px solid var(--rule);border-radius:0;background:transparent;min-height:0;padding:0 0 2px;text-align:center;font:800 52px/1.05 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink);-moz-appearance:textfield}
.m-val input::-webkit-outer-spin-button,.m-val input::-webkit-inner-spin-button,.cn input::-webkit-outer-spin-button,.cn input::-webkit-inner-spin-button,.in::-webkit-outer-spin-button,.in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cn input,.in{-moz-appearance:textfield}
.m-val input:focus{outline:none;border-bottom-color:var(--teal)}
.m-suf{font-size:var(--fs-m);font-weight:650;color:var(--ink-3)}
.meter input[type=range]{margin:16px 0 0;height:24px}
.m-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{font:650 var(--fs-s) var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-2);background:var(--surface);border:1px solid var(--rule);border-radius:999px;height:34px;padding:0 14px;cursor:pointer}
.chip:hover{border-color:var(--s3);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.chip:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.m-hint{font-size:var(--fs-xs);color:var(--ink-3);margin:10px auto 0;max-width:34ch;line-height:1.4}
.fs-more{border-top:1px solid var(--rule-2);margin-top:4px}
.fs legend+.fs-more{border-top:0;margin-top:0}
.fs-more>summary{cursor:pointer;list-style:none;padding:12px 0;font-size:var(--fs-s);font-weight:650;color:var(--teal-ink);display:flex;align-items:center;gap:8px}
.fs-more>summary::-webkit-details-marker{display:none}
.fs-more>summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;margin-left:2px}
.fs-more[open]>summary::before{transform:rotate(45deg)}
.fs-more>summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}
.meter+.fs-more{margin-top:14px}
@media (min-width:900px){.calc[data-mode="calc"] .calc-form,.calc[data-mode="check"] .calc-form{position:sticky;top:20px}}
@media (max-width:400px){.fs{padding:16px 16px 14px}.m-val input{font-size:44px}.frow.money .cn input{width:6em}.cn input{width:4.4em}}
/* appliance list */
.ap-list{list-style:none;margin:6px 0 0;padding:0}
.ap{padding:12px 0;border-top:1px solid var(--rule-2)}
.ap:first-child{border-top:0;padding-top:6px}
.ap-top{display:flex;align-items:center;gap:10px}
.ap-name{font-size:var(--fs-s);font-weight:700}
.ap-n{flex:1;min-width:0;font:650 var(--fs-s) var(--sans);border:1px solid var(--rule);border-radius:10px;height:36px;padding:0 10px;background:var(--surface);color:var(--ink)}
.ap-u{margin-left:auto;font-size:var(--fs-xs);font-weight:650;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ap .x{border:0;background:transparent;color:var(--ink-3);font-size:20px;line-height:1;width:32px;height:32px;border-radius:50%;cursor:pointer;flex:none}
.ap .x:hover{background:var(--rule-2);color:var(--ink)}
.ap-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 6px;margin-top:8px;font-size:var(--fs-s);color:var(--ink-2)}
.in{height:36px;min-height:0;border:1px solid var(--rule);border-radius:10px;background:var(--surface);color:var(--ink);font:650 var(--fs-s) var(--sans);font-variant-numeric:tabular-nums;padding:0 6px;text-align:center}
select.in{width:auto;text-align:left;padding:0 26px 0 10px;background-position:calc(100% - 15px) 15px,calc(100% - 10px) 15px;background-size:5px 5px}
.in:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-wash)}
.ap-more summary{cursor:pointer;font-size:var(--fs-xs);font-weight:600;color:var(--teal-ink);margin-top:8px}
.ap-add{display:flex;gap:10px;margin-top:12px}
.ap-add select{flex:1;min-height:44px;background-color:var(--surface);font-weight:650;color:var(--teal-ink)}
.btn.ghost{background:transparent;min-height:44px}
.fs-hero>legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fs-hero{padding-top:20px}
.frow .fh{grid-column:1/-1;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.45;margin-top:-2px}
.check-empty{padding:24px 24px 28px}
.check-empty h3{font-size:18px;margin:0 0 6px}
.check-empty p{color:var(--ink-2);font-size:var(--fs-s);line-height:1.5;margin:0 0 14px}
.check-empty ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.check-empty li{position:relative;padding-left:26px;font-size:var(--fs-s);color:var(--ink-2);line-height:1.45}
.check-empty li::before{content:"";position:absolute;left:2px;top:4px;width:12px;height:7px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}
.lc-tip em{display:block;font-style:normal;font-weight:700;color:#FFD48A}
@media (max-width:520px){.ts-row{grid-template-columns:1fr 1fr}.ts-row>div:nth-child(3){grid-column:1/-1}}
.ap-line .nw{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ap-add{flex-wrap:wrap}.ap-add select{min-width:58%}
.calc-form{container-type:inline-size}
@container (max-width:360px){
  .m-row{grid-template-columns:40px minmax(0,1fr) 40px;gap:4px}
  .m-step{width:40px;height:40px;font-size:22px}
  .m-val input{font-size:40px;width:4.2ch}
  .m-suf{font-size:var(--fs-xs)}
  .chip{height:30px;padding:0 10px;font-size:var(--fs-xs)}
  .m-chips{gap:6px}
  .frow.seg-row{grid-template-columns:1fr}
  .frow.seg-row .fc{justify-self:stretch}
  .seg{display:flex;width:100%}
  .seg button{flex:1;padding:0 6px}
  .frow{grid-template-columns:minmax(0,1fr) auto}
  .cn input{width:4em}
  .frow.money .cn input{width:5.4em}
}
@container (max-width:420px){.ap-add select{flex:1 1 100%}.ap-add .btn{flex:1}}
@media (max-width:420px){.frow .cn{width:8rem}.frow.money .cn{width:8.75rem}}

/* backup page sets */
.sec .sec-sub{color:var(--ink-2);max-width:68ch;margin:-4px 0 14px}
.sec h2+.tbl-wrap,.sec h2+.tool-sum{margin-top:14px}
table.spec th{text-align:left;font-weight:600;color:var(--ink-2);width:34%;vertical-align:top}
table.spec td small,table.cmp td small,table.kit td small{display:block;color:var(--ink-3);font-size:var(--fs-xs);margin-top:2px}
table.kit td{white-space:nowrap}
.sec .tool-sum{margin-top:6px}
.sec td.num,.sec td:first-child{white-space:nowrap}
table.cmp td.num,table.spec td{white-space:normal}
@media (max-width:560px){.sec table{font-size:var(--fs-s)}.sec th,.sec td{padding:9px 8px}}

/* government schemes */
.sch{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-m);padding:18px 20px;margin-top:14px;max-width:880px}
.sch h3{font-size:18px;margin:0 0 8px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sch p{margin:0 0 8px;color:var(--ink-2)}.sch ul{margin:0 0 8px;padding-left:20px;color:var(--ink-2);font-size:var(--fs-s)}
.sch-src{font-size:var(--fs-s)}.sch-src a{margin-right:10px}
.sch-tag{font-size:var(--fs-xs);font-weight:650;padding:3px 9px;border-radius:999px;background:var(--raised);color:var(--ink-3)}
.sch-tag.on{background:rgba(22,163,74,.12);color:var(--teal-ink,#137a3a)}
.slip-total .pm.sch{display:block;color:var(--ink-3)}
.slip-notes .sch-note{border-left:3px solid var(--teal);padding-left:10px}

/* tariff change log */
.cl-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:26px}
.cl-sum>div{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-m);padding:14px 16px}
.cl-sum .lab{display:block;font-size:var(--fs-xs);color:var(--ink-3);font-weight:600}.cl-sum b{display:block;font-size:20px;margin-top:2px}.cl-sum small{display:block;color:var(--ink-2);font-size:var(--fs-s);margin-top:2px}
.ce-year{font-size:var(--fs-s);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:30px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.cl-list>.ce-year:first-child{margin-top:0}
.ce{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:20px 0;border-bottom:1px solid var(--rule);scroll-margin-top:80px}
.ce:last-child{border-bottom:0}
.ce-date time{display:block;font-weight:700;font-size:var(--fs-m)}.ce-date span{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px}
.ce-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.ce-type{font-size:var(--fs-xs);font-weight:650;padding:3px 9px;border-radius:999px;background:var(--raised);color:var(--ink-2)}
.ce-type.t-order{background:rgba(47,91,255,.10);color:#2a47c9}.ce-type.t-fuel{background:rgba(224,169,62,.18);color:#8a5a00}
.ce-type.t-scheme{background:rgba(22,163,74,.12);color:#137a3a}.ce-type.t-duty{background:rgba(220,38,38,.10);color:#a32020}
.ce-state{font-weight:700;font-size:var(--fs-s);text-decoration:none}
.ce h3{font-size:19px;line-height:1.35;margin:0 0 4px}
.ce-by{font-size:var(--fs-s);color:var(--ink-3);margin:0 0 10px}
.ce-sum{margin:0 0 12px;color:var(--ink-2);max-width:72ch}
.ba-wrap{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin:6px 0 4px}
.ba-col{flex:1 1 220px;min-width:0}.ba-col h5,.ba-col .ba-h{font-size:var(--fs-xs);margin:0 0 6px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.ba-arrow{align-self:center;color:var(--ink-3);font-size:20px;padding-top:18px}
table.ba{font-size:var(--fs-s)}table.ba td,table.ba th{padding:7px 10px}
.ba-fx,.ba-note,.ba-none{font-size:var(--fs-s);color:var(--ink-2);margin:6px 0 0}
.ce-src{margin-top:10px;font-size:var(--fs-s)}.ce-src summary{cursor:pointer;color:var(--teal-ink,#2a47c9);font-weight:600}
.ce-src ul{margin:8px 0 0;padding-left:18px}.ce-src li{margin-bottom:8px}
.ce-src blockquote{margin:4px 0 0;padding:6px 10px;border-left:3px solid var(--rule);color:var(--ink-2);font-size:var(--fs-s);background:var(--surface)}
.ce-conf{font-size:var(--fs-xs);color:var(--ink-3);margin:8px 0 0}
.cl-gaps{margin-top:34px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-m);padding:18px 20px}
.cl-gaps h2{font-size:20px;margin:0 0 6px}.cl-gaps ul{margin:8px 0 0;padding-left:20px;color:var(--ink-2);font-size:var(--fs-s)}
.cl-foot{font-size:var(--fs-s);color:var(--ink-3);margin-top:22px}
table.cl-tbl td small{display:block;color:var(--ink-3);font-size:var(--fs-xs)}
.cl-home{list-style:none;margin:0;padding:0;border:1px solid var(--rule);border-radius:var(--r-m);background:var(--surface)}
.cl-home li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;padding:12px 16px;border-bottom:1px solid var(--rule)}.cl-home li:last-child{border-bottom:0}
.cl-home time{color:var(--ink-3);font-size:var(--fs-s)}.cl-home a{text-decoration:none;color:var(--ink)}.cl-home a b{margin-right:6px}
@media (max-width:640px){.ce{grid-template-columns:1fr;gap:6px}.ce-date{display:flex;gap:10px;align-items:baseline}.cl-home li{grid-template-columns:1fr;gap:2px}.ba-arrow{display:none}}
:root[data-theme="dark"] .ce-type.t-order{color:#9db1ff}:root[data-theme="dark"] .ce-type.t-fuel{color:#f0c46a}:root[data-theme="dark"] .ce-type.t-scheme{color:#7ad69a}:root[data-theme="dark"] .ce-type.t-duty{color:#f19a9a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ce-type.t-order{color:#9db1ff}:root:not([data-theme="light"]) .ce-type.t-fuel{color:#f0c46a}:root:not([data-theme="light"]) .ce-type.t-scheme{color:#7ad69a}:root:not([data-theme="light"]) .ce-type.t-duty{color:#f19a9a}}
table.apst td small{display:block;color:var(--ink-3);font-size:var(--fs-xs);margin-top:2px;font-weight:400;white-space:normal}
.ap-src{padding-left:20px;color:var(--ink-2);font-size:var(--fs-s)}.ap-src li{margin-bottom:6px}
table.apst td:first-child{white-space:normal;min-width:9em}
@media (max-width:560px){table.apst th,table.apst td{padding:9px 7px}table.apst th{font-size:var(--fs-xs)}}

/* bill guides */
.bg-top{border-top:0;padding-top:26px}
.bg-notice{border:1px solid var(--rule);border-left:4px solid var(--amber);background:var(--amber-wash);border-radius:var(--r-m);padding:14px 18px;margin-bottom:30px}
.bg-notice p{margin:0;color:var(--ink);font-size:var(--fs-s);max-width:none}
.bg-quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:14px}
.bg-q{border:1px solid var(--rule);border-radius:var(--r-m);background:var(--surface);padding:14px 16px}
.bg-q h3{font-size:var(--fs-m);margin:0 0 6px;font-family:var(--sans);font-weight:650}
.bg-q p{margin:0;color:var(--ink-2);font-size:var(--fs-s)}
.bg-see{display:block;margin-top:6px;font-size:var(--fs-s);color:var(--ink-3)}
.bg-figure{margin:6px 0 28px}
.bg-fig{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:var(--r-m);background:#fff;padding:6px;margin-bottom:10px}
.bg-svg{display:block;width:100%;min-width:640px;height:auto}
.bg-svg a:hover circle{fill:#9a5c00}
.bg-sheet-t{font-size:var(--fs-s);margin:16px 0 8px;color:var(--ink-2);font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em}
.bg-figure figcaption{font-size:var(--fs-s);color:var(--ink-3)}
.bg-legend{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px 28px}
.bg-legend li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--rule-2);scroll-margin-top:80px}
.bg-legend li:target{background:var(--amber-wash);border-radius:var(--r-s)}
.bg-n{flex:0 0 26px;height:26px;border-radius:50%;background:#c77700;color:#fff;font-weight:700;font-size:var(--fs-xs);display:flex;align-items:center;justify-content:center}
.bg-legend h3{font-size:var(--fs-m);margin:2px 0 4px;font-family:var(--sans);font-weight:650}
.bg-legend p{margin:0;color:var(--ink-2);font-size:var(--fs-s)}
.bg-src{font-size:var(--fs-xs)!important;color:var(--ink-3)!important;margin-top:6px!important}
.bg-src q{font-style:italic}
.bg-gloss{margin:0;display:grid;gap:0}
.bg-term{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0;border-bottom:1px solid var(--rule-2)}
.bg-term dt{font-weight:650}
.bg-term dd{margin:0;color:var(--ink-2)}
.bg-term dd p{margin:0}
@media (min-width:760px){.bg-term{grid-template-columns:240px minmax(0,1fr);gap:24px}}
.bg-unx{columns:2 260px;padding-left:18px;color:var(--ink-2)}
.bg-unx li{margin:0 0 6px;break-inside:avoid}
.bg-fine{font-size:var(--fs-s);color:var(--ink-3);margin-top:14px}
.bg-pay{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px}
.bg-pay li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.bg-pay small{color:var(--ink-3)}
.bg-warn{border:1px solid var(--rule);border-radius:var(--r-m);padding:12px 16px;background:var(--surface);font-size:var(--fs-s);color:var(--ink-2)}
.bg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.bg-card{display:flex;flex-direction:column;gap:4px;border:1px solid var(--rule);border-radius:var(--r-m);padding:16px 18px;background:var(--surface);text-decoration:none;color:var(--ink)}
.bg-card:hover{border-color:var(--teal)}
.bg-card .lab{font-size:var(--fs-xs);color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.bg-card b{font-size:19px}
.bg-card small{color:var(--ink-2);font-size:var(--fs-s)}
.bg-swipe{display:none;font-size:var(--fs-s);color:var(--ink-3);margin:0 0 8px}
@media (max-width:700px){.bg-swipe{display:block}}
/* bill guide diagrams */
.bg-dias{display:grid;gap:22px}
.bg-dia{border:1px solid var(--rule);border-radius:var(--r-l);background:var(--surface);padding:18px 20px}
.bg-dia h3{font-family:var(--sans);font-size:var(--fs-m);font-weight:650;margin:0 0 14px}
.eq{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.eq-it,.eq-res{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--r-m);border:1px solid var(--rule);background:var(--raised);font-size:var(--fs-s);line-height:1.25}
.eq-res{background:var(--teal-wash);border-color:var(--teal);font-weight:650;color:var(--teal-ink)}
.eq-op{font-weight:700;color:var(--ink-3);font-size:18px;min-width:12px;text-align:center}
.eq-m{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border-radius:10px;background:#c77700;color:#fff!important;font-size:var(--fs-xs);font-weight:700;text-decoration:none}
.eq-note{font-size:var(--fs-s);color:var(--ink-2);margin:6px 0 0}
.tl{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0;counter-reset:tl}
.tl li{position:relative;padding:0 0 16px 30px;border-left:2px solid var(--rule);margin-left:9px}
.tl li:last-child{border-left-color:transparent;padding-bottom:4px}
.tl li::before{content:"";position:absolute;left:-9px;top:1px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:3px solid var(--ink-3)}
.tl li.tl-pay::before{border-color:var(--teal)}
.tl li.tl-warn::before{border-color:#c77700}
.tl b{display:block;font-size:var(--fs-s)}
.tl span{display:block;color:var(--ink-2);font-size:var(--fs-s);max-width:60ch}
@media (min-width:900px){
 .tl{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
 .tl li{border-left:0;border-top:2px solid var(--rule);margin:9px 0 0;padding:20px 14px 0 0}
 .tl li:last-child{border-top-color:transparent}
 .tl li::before{left:0;top:-10px}
}
/* number boxes in the bill guides only (div); a plain .num is the figure font on spans and table cells */
.bg-dia div.num{display:flex;flex-wrap:wrap;gap:6px}
.num-seg{display:flex;flex-direction:column;gap:6px;align-items:stretch;text-align:center}
.num-seg code{font-family:var(--mono);font-size:20px;letter-spacing:.08em;padding:10px 14px;border:2px solid var(--teal);border-radius:var(--r-m);background:var(--teal-wash);color:var(--ink)}
.num-seg span{font-size:var(--fs-xs);color:var(--ink-2);border-top:2px solid var(--ink-3);padding-top:6px}
.bg-vwrap{max-width:960px}
.bg-video{display:block;width:100%;height:auto;border-radius:var(--r-l);background:#0f1d2b;border:1px solid var(--rule)}
.bg-v-p{display:none;max-width:420px;margin:0 auto}
@media (max-width:700px){.bg-v-l{display:none}.bg-v-p{display:block}}
/* share card panel */
.card-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:14px;padding:16px;border:1px solid var(--rule);border-radius:var(--r-l);background:var(--surface)}
@media (min-width:760px){.card-panel{grid-template-columns:300px minmax(0,1fr);align-items:start}}
.cp-prev img{display:block;width:100%;max-width:300px;height:auto;margin:0 auto;border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,.12);background:#EEF1F5;aspect-ratio:4/5}
.cp-size{display:inline-flex;border:1px solid var(--rule);border-radius:22px;overflow:hidden;margin-bottom:12px}
.cp-size button{border:0;background:none;padding:8px 14px;font:inherit;font-size:var(--fs-s);color:var(--ink-2);cursor:pointer}
.cp-size button[aria-pressed="true"]{background:var(--teal);color:#fff}
.cp-act{display:flex;flex-wrap:wrap;gap:8px}
.cp-act .btn{font-size:var(--fs-s);min-height:40px;padding:8px 14px}
.cp-act .cp-wa{background:#1FA855;border-color:#1FA855;color:#fff}
.cp-note{font-size:var(--fs-s);color:var(--ink-3);margin:12px 0 0;max-width:60ch}

/* ---------- free-electricity scheme checker ---------- */
.sc-status{border:1px solid var(--rule);border-left:4px solid var(--teal);background:var(--surface);border-radius:var(--r-m);padding:14px 18px;margin-bottom:22px}
.sc-status p{margin:6px 0 0;font-size:var(--fs-s);max-width:none}
.sc-badge{display:inline-block;background:var(--teal-wash);color:var(--teal-ink);font-weight:600;font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;border-radius:99px;padding:3px 10px}
.sc-date{color:var(--ink-3)}
.sc-form{display:grid;gap:14px;max-width:560px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);padding:18px}
.sc-f{display:grid;gap:6px}
.sc-f span{font-weight:600;font-size:var(--fs-s)}
.sc-f input,.sc-f select{font:inherit;font-size:18px;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-s);background:var(--raised);color:var(--ink);width:100%}
.sc-f small,.sc-c small{color:var(--ink-3);font-size:var(--fs-s)}
.sc-who{border:0;margin:0;padding:0;display:grid;gap:10px}
.sc-who legend{font-weight:600;font-size:var(--fs-s);margin-bottom:8px}
.sc-c{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-s);line-height:1.45}
.sc-c input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--teal)}
.sc-priv{margin:0;font-size:var(--fs-s);color:var(--ink-3)}
.sc-out{max-width:560px;margin-top:18px}
.sc-out:empty{display:none}
.sc-out>*{margin:0 0 12px}
.sc-ok{color:var(--teal-ink);font-weight:600}
.sc-warn{background:var(--warn-wash);color:var(--ink);border-radius:var(--r-m);padding:10px 14px}
.sc-warn ul{margin:6px 0 0;padding-left:20px}
.sc-units{list-style:none;padding:0;display:grid;gap:8px}
.sc-units li{border-radius:var(--r-m);padding:10px 14px;background:var(--teal-wash)}
.sc-units li.over{background:var(--warn-wash)}
.sc-bill{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sc-bill>div{border:1px solid var(--rule);border-radius:var(--r-m);padding:12px 14px;background:var(--surface);display:grid;gap:2px}
.sc-bill span{font-size:var(--fs-s);color:var(--ink-3)}
.sc-bill b{font-family:var(--mono);font-size:22px}
.sc-bill .sc-save{grid-column:1/-1;border-color:var(--teal);background:var(--teal-wash)}
.sc-cliff{border-left:4px solid var(--amber);padding:6px 12px;background:var(--amber-wash);border-radius:var(--r-s)}
.sc-notes{font-size:var(--fs-s);color:var(--ink-2);padding-left:20px}
.sc-fine{font-size:var(--fs-s);color:var(--ink-3)}
.sc-list{padding-left:22px;display:grid;gap:8px;max-width:72ch}
.sc-steps{padding-left:22px;display:grid;gap:8px;max-width:72ch}
.sc-scam{border:1px solid var(--rule);border-left:4px solid var(--amber);background:var(--amber-wash);border-radius:var(--r-m);padding:12px 16px;margin-top:16px;max-width:72ch;font-size:var(--fs-s)}
/* ---------- EV charging cost ---------- */
.ev-units{font-size:var(--fs-m)}
.sc-bill small{font-size:var(--fs-xs);color:var(--ink-3)}
.ev-sep{border:1px solid var(--rule);border-left:4px solid var(--teal);border-radius:var(--r-m);padding:10px 14px;background:var(--surface);font-size:var(--fs-s)}
.sc-form optgroup{font-weight:600}
/* ---------- complaints steps ---------- */
.cm-steps{counter-reset:cm;list-style:none;padding:0;display:grid;gap:14px;max-width:76ch}
.cm-steps>li{counter-increment:cm;border:1px solid var(--rule);border-radius:var(--r-m);background:var(--surface);padding:14px 18px 6px 56px;position:relative}
.cm-steps>li::before{content:counter(cm);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--teal);color:#fff;font-weight:700;display:grid;place-items:center}
.cm-steps h3{margin:2px 0 8px;font-size:18px}
.sc-list a,.ap-src a{overflow-wrap:anywhere}
.cm-comp table{min-width:0;width:100%}.cm-comp td,.cm-comp th{white-space:normal}
/* ---------- meter guide ---------- */
.mt-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:12px}
.mt-lcd{margin:0;position:relative}
.mt-lcd svg{width:100%;height:auto}
.mt-lcd figcaption{position:absolute;top:-9px;right:8px;background:var(--teal);color:#fff;font-size:var(--fs-xs);font-weight:700;border-radius:99px;padding:1px 8px}
/* ---------- tariff history ---------- */
.hv-root,:root{--hv-1:#2a78d6;--hv-2:#eb6834;--hv-3:#1baf7a}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])){--hv-1:#3987e5;--hv-2:#d95926;--hv-3:#199e70}}
:root[data-theme="dark"]{--hv-1:#3987e5;--hv-2:#d95926;--hv-3:#199e70}
.hv-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:22px}
.hv-tile{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-m);padding:14px 16px;display:grid;gap:4px}
.hv-tile span{font-size:var(--fs-s);color:var(--ink-3);font-weight:600}
.hv-tile b{font-size:24px;font-weight:650}
.hv-tile small{font-size:var(--fs-s);color:var(--ink-2)}
.hv-ctrl{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-bottom:12px}
.hv-real{display:flex;gap:8px;align-items:center;font-size:var(--fs-s)}
.hv-real input{width:18px;height:18px;accent-color:var(--teal)}
.hv-fig{margin:0;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);padding:14px 12px 10px}
.hv-fig figcaption{font-size:var(--fs-s);color:var(--ink-3);margin-top:8px;padding:0 4px}
.hv-chart{position:relative;min-height:230px}
.hv-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--fs-s);color:var(--ink-2);padding:0 4px 8px}
.hv-legend span{display:inline-flex;align-items:center;gap:6px}
.hv-key{display:inline-block;width:16px;height:2px;border-radius:2px}
.hv-b1{background:var(--hv-1)}.hv-b2{background:var(--hv-2)}.hv-b3{background:var(--hv-3)}
.hv-svg{display:block;overflow:visible}
.hv-grid{stroke:var(--rule-2);stroke-width:1}.hv-axis{stroke:var(--rule);stroke-width:1}
.hv-tick{fill:var(--ink-2);font:var(--fs-xs) var(--sans);font-variant-numeric:tabular-nums}
.hv-mark{stroke:var(--ink-3);stroke-width:1.5}
.hv-none{fill:var(--rule-2);opacity:.55}
.hv-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.hv-c1{stroke:var(--hv-1)}.hv-c2{stroke:var(--hv-2)}.hv-c3{stroke:var(--hv-3)}
.hv-dot{stroke:var(--surface);stroke-width:2}.hv-f1{fill:var(--hv-1)}.hv-f2{fill:var(--hv-2)}.hv-f3{fill:var(--hv-3)}
.hv-end{fill:var(--ink);font:650 var(--fs-s) var(--sans)}.hv-end-n{fill:var(--ink-2);font-weight:500}
.hv-cross{stroke:var(--ink-3);stroke-width:1}
.hv-tip{position:absolute;z-index:3;min-width:220px;max-width:290px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-m);box-shadow:0 6px 18px rgba(0,0,0,.12);padding:10px 12px;font-size:var(--fs-s);pointer-events:none}
.hv-tip-h{font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.hv-tip-r{display:flex;align-items:center;gap:8px;margin:2px 0}.hv-tip-r b{font-variant-numeric:tabular-nums;min-width:66px}.hv-tip-r span{color:var(--ink-3)}
.hv-tip-o{margin-top:8px;padding-top:8px;border-top:1px solid var(--rule-2);color:var(--ink-2);font-size:var(--fs-xs)}
.hb{display:grid;gap:18px;max-width:760px}
.hb-lab{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-s);margin-bottom:6px}.hb-lab span{font-weight:650}
.hb-bar{display:flex;gap:2px;height:44px}
.hb-seg{min-width:0;border-radius:4px;background:hsl(214 80% var(--hb-l,85%));box-shadow:inset 0 0 0 1px hsl(214 55% 70% / .55);color:#0b1a30;display:flex;flex-direction:column;justify-content:center;padding:0 8px;overflow:hidden;white-space:nowrap;font-size:var(--fs-xs);line-height:1.25}
.hb-seg i{font-style:normal;color:#22344f}
.hb-seg.hb-free{background:repeating-linear-gradient(135deg,#eef3fb 0 6px,#dfe8f6 6px 8px);box-shadow:inset 0 0 0 1px #b9c9e3}
.hb-seg.hb-tight b,.hb-seg.hb-tight i{visibility:hidden}
.hb-note{font-size:var(--fs-s);color:var(--ink-3);margin:6px 0 0}
.hv-tl{list-style:none;padding:0;margin:0;max-width:760px;position:relative}
.hv-tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--rule)}
.hv-tl li{position:relative;padding:0 0 18px 30px;display:grid;gap:2px}
.hv-tl li::before{content:"";position:absolute;left:2px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px var(--paper)}
.hv-tl time{font-weight:650;font-size:var(--fs-s);color:var(--ink-2)}
.hv-tl b{font-weight:500;font-size:var(--fs-m)}.hv-tl span{font-size:var(--fs-s);color:var(--ink-3)}
.hv-tbl-wrap{border:1px solid var(--rule);border-radius:var(--r-l);background:var(--surface)}
.hv-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-m);font-variant-numeric:tabular-nums}
.hv-tbl th,.hv-tbl td{padding:13px 14px;border-bottom:1px solid var(--rule-2);text-align:left;vertical-align:top;white-space:nowrap}
.hv-tbl thead th{position:sticky;top:0;z-index:1;background:var(--raised);font-size:var(--fs-s);font-weight:650;color:var(--ink-2)}
.hv-tbl thead tr:first-child th:first-child{border-top-left-radius:var(--r-l)}.hv-tbl thead tr:first-child th:last-child{border-top-right-radius:var(--r-l)}
.hv-tbl .hv-grp{text-align:center;color:var(--ink-2);border-bottom:1px solid var(--rule)}
.hv-tbl .r{text-align:right}
.hv-tbl .hv-g0{border-left:1px solid var(--rule)}
.hv-tbl tbody th{font-weight:650;color:var(--ink);background:none}
.hv-tbl tbody tr:last-child>*{border-bottom:0}
.hv-tbl tbody tr:hover>*{background:var(--raised)}
.hv-tbl .hv-hl{background:color-mix(in srgb,var(--hv-1) 6%,transparent)}
.hv-tbl thead .hv-hl{color:var(--ink);background:color-mix(in srgb,var(--hv-1) 10%,var(--raised))}
.hv-ord a{font-size:var(--fs-s)}
.hv-v{display:block;font-weight:650;color:var(--ink);font-size:var(--fs-m)}
.hv-chg{display:inline-block;margin-top:3px;font-style:normal;font-size:var(--fs-s);font-weight:650;line-height:1;padding:4px 8px;margin-top:5px;border-radius:999px;white-space:nowrap}
.hv-chg.up{color:#9a3412;background:#fdeee6}.hv-chg.dn{color:#166534;background:#e3f4ea}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .hv-chg.up{color:#fdba8c;background:#3b2216}:root:where(:not([data-theme="light"])) .hv-chg.dn{color:#86efac;background:#16301f}}
:root[data-theme="dark"] .hv-chg.up{color:#fdba8c;background:#3b2216}:root[data-theme="dark"] .hv-chg.dn{color:#86efac;background:#16301f}
.hv-cards{display:none;list-style:none;margin:0;padding:0;gap:10px}
.hv-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);padding:12px 14px}
.hv-card-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;align-items:baseline;padding-bottom:8px;border-bottom:1px solid var(--rule-2);margin-bottom:8px}
.hv-card-h b{font-size:var(--fs-m)}.hv-card-h a{font-size:var(--fs-s)}
.hv-card dl{margin:0;display:grid;gap:8px}
.hv-card-r{display:grid;grid-template-columns:66px repeat(3,minmax(0,1fr));gap:4px;align-items:start}
.hv-card-r dt{font-size:var(--fs-s);font-weight:650;color:var(--ink);padding-top:16px;line-height:1.2}
.hv-card-r dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;padding:4px 6px;border-radius:8px}
.hv-card-r dd small{display:block;font-size:var(--fs-s);color:var(--ink-2)}
.hv-card-r dd.hv-hl{background:color-mix(in srgb,var(--hv-1) 8%,transparent)}
@media (max-width:760px){.hv-tbl-wrap{display:none}.hv-cards{display:grid}}
.hv-notes{list-style:none;counter-reset:hvn;margin:10px 0 0;padding:10px 4px 0;border-top:1px solid var(--rule-2);display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 18px;font-size:var(--fs-s);color:var(--ink-2)}
.hv-notes li{counter-increment:hvn;position:relative;padding-left:32px}
.hv-notes li::before{content:counter(hvn);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--surface);font:700 var(--fs-xs)/24px var(--sans);text-align:center}
.hv-notes b{color:var(--ink);font-weight:650}
.hv-ann-c{fill:var(--ink);stroke:var(--surface);stroke-width:2}
.hv-ann-n{fill:var(--surface);font:700 var(--fs-xs) var(--sans)}
.hv-ann-t{fill:var(--ink);font:600 var(--fs-xs) var(--sans);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.hv-ann-l{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 2}
.hv-area{fill:var(--hv-1);opacity:.1}
.hv-band{fill:var(--hv-1);opacity:.14}
.hv-band-t{fill:var(--ink-2);font:600 var(--fs-xs) var(--sans)}
.hv-cm{stroke:var(--ink-3);stroke-width:1.5;opacity:.45}.hv-fm{fill:var(--ink-3)}
.hv-bm{background:var(--ink-3);opacity:.55}.hv-bband{height:10px;background:var(--hv-1);opacity:.25;border-radius:2px}
.hv-end-m{fill:var(--ink-2);font-weight:550}
.hv-none-t{font-size:var(--fs-xs)}
.hv-tip-m{opacity:.7}.hv-tip-g{border-top:1px dashed var(--rule-2);padding-top:4px;margin-top:4px}
.hv-cite{border:1px solid var(--rule);border-left:4px solid var(--teal);background:var(--surface);border-radius:var(--r-m);padding:12px 16px;max-width:76ch}
.hv-cite p{margin:6px 0;font-size:var(--fs-s)}
.hv-tl div>b{display:block;margin-bottom:2px}
.hv-more>summary{cursor:pointer;font-weight:600;color:var(--teal-ink);padding:10px 0}
.hv-tnote{font-size:var(--fs-s);color:var(--ink-2);margin:10px 0 0}

@media (max-width:380px){.hv-card{padding:12px 10px}.hv-card-r dd{padding:4px 3px}.hv-card-r .hv-v{font-size:var(--fs-m)}.hv-card-r dt{font-size:var(--fs-xs)}}

/* Phones: main text stays 17px so lines do not get too short */
@media (max-width:600px){:root{--fs-m:17px}}

/* Violet 2px frame on every table and chart box, site-wide (approved 16-10-2026). One setting: --frame. */
:root{--frame:#8B5CF6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--frame:#A78BFA}}
:root[data-theme="dark"]{--frame:#A78BFA}
.hv-fig,.hv-tbl-wrap,.hv-card,.hv-tile,.tbl-wrap,.steps,.ladder-chart,.bars{border:2px solid var(--frame)}
.ladder-chart{box-shadow:none}
.bars{background:var(--surface);border-radius:var(--r-l);padding:6px 16px}
.bars li:last-child{border-bottom:0}
/* a table inside a framed chart keeps a quiet border, so frames do not nest */
.ladder-chart .tbl-wrap,.hv-fig .tbl-wrap{border:1px solid var(--rule)}
.hv-flag{display:inline-block;font-style:normal;font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);background:var(--raised);border:1px solid var(--rule);border-radius:999px;padding:1px 8px;margin:4px 6px 0 0;white-space:nowrap}
.hv-flag-a{color:var(--ink);background:color-mix(in srgb,var(--frame) 12%,transparent);border-color:color-mix(in srgb,var(--frame) 45%,transparent)}
.hv-tbl tbody th .hv-flag{display:block;width:max-content;margin:4px 0 0}
.hv-card-h b .hv-flag{margin-left:8px}
.hv-tl .hv-flag{margin-top:6px}
/* national tariff-history hub */
.hh-chart{position:relative}
.hh-lab{fill:var(--ink);font:500 var(--fs-xs) var(--sans)}
.hh-val{fill:var(--ink);font:650 var(--fs-xs) var(--sans);font-variant-numeric:tabular-nums}
.hh-bar{stroke:var(--ink-3);stroke-width:2;opacity:.5}
.hh-d0{fill:var(--surface);stroke:var(--ink-2);stroke-width:2}
.hh-d1{fill:var(--hv-1);stroke:var(--surface);stroke-width:2}
.hh-up-b{fill:var(--hv-2)}.hh-dn-b{fill:var(--hv-1)}
.hh-zero{stroke:var(--ink-2);stroke-width:1.5}
.hh-hit{fill:transparent;cursor:pointer}
.hh-row:hover .hh-hit{fill:var(--raised)}
.hh-row:hover .hh-lab{text-decoration:underline}
.hh-k{display:inline-block;width:12px;height:12px;border-radius:50%}
.hh-k0{background:var(--surface);border:2px solid var(--ink-2)}.hh-k1{background:var(--hv-1)}
.hh-up{background:var(--hv-2);border-radius:3px}.hh-dn{background:var(--hv-1);border-radius:3px}
.hh-tbl th button{all:unset;cursor:pointer;font:inherit;color:inherit}
.hh-tbl th button::after{content:" ↕";color:var(--ink-3);font-weight:400}
.hh-tbl th[aria-sort="ascending"] button::after{content:" ↑"}.hh-tbl th[aria-sort="descending"] button::after{content:" ↓"}
.hh-tbl tbody th small,.hh-tbl td small{display:block;font-size:var(--fs-xs);color:var(--ink-3);font-weight:400}
@media (max-width:760px){.hh-tbl{display:block;overflow-x:auto}.hh-tbl .hv-tbl th,.hh-tbl .hv-tbl td{padding:10px 10px}}
.hh-tbl .hv-tbl th,.hh-tbl .hv-tbl td{white-space:normal}
.hh-tbl .hv-tbl td:last-child,.hh-tbl .hv-tbl td.r{white-space:nowrap}
/* tenant bill split */
.sp-set{border:0;padding:0;margin:4px 0 0;display:grid;gap:8px}
.sp-set legend{font-weight:600;margin-bottom:6px;font-size:var(--fs-s)}
.sp-homes{display:grid;gap:8px}
.sp-home{display:grid;grid-template-columns:minmax(0,1fr) 120px 40px;gap:8px;align-items:center}
.sp-home input{min-height:44px;font:inherit;border:1px solid var(--rule);border-radius:var(--r-m);padding:0 12px;background:var(--surface);color:var(--ink);min-width:0}
.sp-del{min-height:44px;border:1px solid var(--rule);border-radius:var(--r-m);background:var(--raised);font-size:20px;cursor:pointer;color:var(--ink-2)}
.sp-add{justify-self:start}
.sp-tbl small{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
.sp-tbl .sp-more{color:#9a3412;font-weight:600}
@media (max-width:420px){.sp-home{grid-template-columns:minmax(0,1fr) 92px 40px}}
@media (max-width:480px){.sp-tbl th,.sp-tbl td{padding:8px 6px;font-size:var(--fs-xs)}.sp-tbl small{font-size:12px}}
/* prepaid recharge */
.pp-form .seg label{display:inline-flex;align-items:center;gap:6px;padding:0 12px;min-height:40px;border-radius:9px;cursor:pointer;font-weight:600;font-size:var(--fs-s);color:var(--ink-2)}
.pp-form .seg label:has(input:checked){background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(13,22,38,.12),0 0 0 1px var(--rule)}
.pp-form .seg input{accent-color:var(--teal)}
.pp-rules{margin:0;display:grid;gap:14px;max-width:820px}
.pp-rules>div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:6px 18px;padding-bottom:14px;border-bottom:1px solid var(--rule-2)}
.pp-rules dt{font-weight:650}.pp-rules dd{margin:0}
.pp-rules blockquote{margin:8px 0 4px;padding:6px 12px;border-left:3px solid var(--frame);color:var(--ink-2);font-size:var(--fs-s)}
@media (max-width:640px){.pp-rules>div{grid-template-columns:1fr}}
.pp-q{margin:12px 0 4px;padding:6px 12px;border-left:3px solid var(--frame);color:var(--ink-2)}
/* discom pages */
.dc-hl{list-style:none;margin:0;padding:0;display:grid;gap:6px}.dc-hl b{font-variant-numeric:tabular-nums}.dc-hl span{color:var(--ink-2);font-size:var(--fs-s)}
.dc-cols{columns:2 280px}
.dc-list{margin-top:12px;font-size:var(--fs-s)}
.dc-src{color:var(--ink-3);font-size:var(--fs-xs)}

/* meter readings -> units */
.m-read{margin:14px auto 0;max-width:420px;text-align:left}
.m-read summary{cursor:pointer;font-size:var(--fs-s);font-weight:600;color:var(--teal);text-align:center;list-style:none}
.m-read summary::-webkit-details-marker{display:none}
.m-read summary::before{content:'▸ '}
.m-read[open] summary::before{content:'▾ '}
.m-read-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.m-read-row label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-xs);color:var(--ink-3)}
.m-read-row .cn{width:100%}
.m-read-row .cn input{width:100%;min-width:0}
.m-read .m-hint{text-align:center}

/* units for a budget */
.bud{margin-top:22px;padding:22px 24px}
.bud h3{margin:0 0 4px;font-size:var(--fs-l)}
.bud-lede{margin:0 0 14px;color:var(--ink-3);font-size:var(--fs-s)}
.bud-row .cn{max-width:240px}
.bud-row .cn input{width:100%}
.bud-out:empty{display:none}
.bud-out{margin-top:14px}
.bud-res{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:6px}
.bud-res b{font-size:28px;line-height:1.1}
.bud-res span{color:var(--ink-3)}
.bud-out p{margin:6px 0}

/* why is my bill high */
.bh-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 6px}
@media (max-width:640px){.bh-two{grid-template-columns:1fr}}
.bh-bill{border:1px solid var(--rule);border-radius:var(--r-m);padding:14px 16px;margin:0;min-width:0}
.bh-bill legend{font-weight:700;padding:0 6px}
.bh-bill legend small{font-weight:400;color:var(--ink-3)}
.bh-why,.bh-list{padding-left:22px;margin:14px 0}
.bh-why li,.bh-list li{margin:8px 0;line-height:1.5}

/* tariff report */
.rp-emb{display:grid;gap:12px;max-width:620px}
.rp-emb textarea{width:100%;font:13px/1.4 ui-monospace,Menlo,Consolas,monospace;padding:10px;border:1px solid var(--rule);border-radius:var(--r-m);background:var(--paper);color:var(--ink);resize:vertical}
.rp-emb iframe{width:100%;max-width:540px;height:470px;border:0}
.rp-emb .btn{justify-self:start}

/* bill by units */
.un-links{display:block;width:100%;margin-top:6px;font-size:var(--fs-s);color:var(--ink-3)}
.un-links a{margin-right:10px;white-space:nowrap}
tr.un-tot td,tr.un-tot th{border-top:2px solid var(--rule)}
.un-per{display:block;font-weight:400;color:var(--ink-3);font-size:var(--fs-xs)}
.un-hub td{white-space:nowrap}

/* glossary */
.gl-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.gl-list li{border:1px solid var(--rule);border-radius:var(--r-m);padding:12px 14px;background:var(--surface)}
.gl-list a{text-decoration:none}
.gl-list span{display:block;margin-top:4px;color:var(--ink-3);font-size:var(--fs-s);line-height:1.45}

.pdf-sec{padding-top:6px}
.pdf-note{align-self:center;color:var(--ink-3);font-size:var(--fs-xs)}

/* amount to units: scheme toggles */
.am-tog{display:grid;gap:10px;margin:4px 0 14px}.sc-chk{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4}.sc-chk input{width:20px;height:20px;margin-top:1px;flex:none;accent-color:var(--teal)}