/* Base reset (the artifact viewer supplied this before) */
:root{color-scheme:light; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: a meter-face hero (dark reading window, glowing digits, spinning disc) beside the bill reading;
   below, the connection panel (sector chips + a row of breaker switches) next to the bill breakdown; then the year chart. */
:root{
  --paper:#ECF0EA; --panel:#F8FAF6; --panel-2:#E2E8E1; --ink:#14211D; --muted:#56665F; --line:#CDD6CE;
  --amber:#D98A1C; --amber-ink:#8A5408; --teal:#1F5C57; --slate:#A3B0AA;
  --meter:#16211D; --meter-edge:#2C3A35; --glow:#FFB547; --glow-soft:rgba(255,181,71,.35); --meter-text:#9FB0A9;
  --up:#B3261E; --up-soft:#F7E1DE; --down:#1B7A4A; --down-soft:#DDF1E5;
  --slot:#C9D2CB; --knob:#7D8C86;
  --font-display:'Bricolage Grotesque','Readex Pro',system-ui,sans-serif;
  --font-body:'Readex Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1412; --panel:#151D1A; --panel-2:#1C2622; --ink:#E5ECE8; --muted:#93A39C; --line:#283430;
    --amber:#EFA53B; --amber-ink:#F6BC63; --teal:#4FA39A; --slate:#4B5B55;
    --meter:#0A0F0D; --meter-edge:#24302B; --glow:#FFB547; --glow-soft:rgba(255,181,71,.4); --meter-text:#7F918A;
    --up:#FF8F86; --up-soft:#3A1F1C; --down:#6ED39A; --down-soft:#173326;
    --slot:#2A3631; --knob:#62726B; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1412; --panel:#151D1A; --panel-2:#1C2622; --ink:#E5ECE8; --muted:#93A39C; --line:#283430;
  --amber:#EFA53B; --amber-ink:#F6BC63; --teal:#4FA39A; --slate:#4B5B55;
  --meter:#0A0F0D; --meter-edge:#24302B; --glow:#FFB547; --glow-soft:rgba(255,181,71,.4); --meter-text:#7F918A;
  --up:#FF8F86; --up-soft:#3A1F1C; --down:#6ED39A; --down-soft:#173326;
  --slot:#2A3631; --knob:#62726B; color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:15px/1.55 var(--font-body);
  padding-block:28px 56px;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.page{max-width:1060px; margin-inline:auto; display:flex; flex-direction:column; gap:20px}
button,input,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
h1,h2{font-family:var(--font-display); text-wrap:balance; margin:0}
html[lang="ar"] h1,html[lang="ar"] h2{font-family:var(--font-body)}
h1{font-size:clamp(28px,4.6vw,44px); line-height:1.08; font-weight:700; letter-spacing:-.015em}
h2{font-size:20px; font-weight:650; letter-spacing:-.005em}
html[lang="ar"] h1{letter-spacing:0; font-weight:600}
.hint{margin:6px 0 0; color:var(--muted); font-size:13px}

/* Header */
.top{display:flex; gap:16px 24px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap}
.ttl{flex:1 1 420px; min-width:0; display:flex; flex-direction:column; gap:8px}
.eyebrow{margin:0; font-size:12.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--amber-ink); display:flex; align-items:center; gap:8px}
html[lang="ar"] .eyebrow{letter-spacing:0; text-transform:none; font-size:13.5px}
.eyebrow svg{flex:none}
.lede{margin:0; color:var(--muted); max-width:62ch}
.lang{border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:8px 18px; cursor:pointer; font-weight:500}
.lang:hover{border-color:var(--ink)}

/* Hero: meter + reading */
.hero{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:0; border-radius:22px; overflow:hidden; background:var(--panel); border:1px solid var(--line)}
@media (max-width:800px){.hero{grid-template-columns:minmax(0,1fr)}}
.meter{background:var(--meter); color:var(--meter-text); padding:22px 24px 20px; display:flex; flex-direction:column; gap:14px; position:relative}
.meter::before{content:""; position:absolute; inset:10px; border:1px solid var(--meter-edge); border-radius:14px; pointer-events:none}
.meter-top{display:flex; justify-content:space-between; gap:12px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; position:relative}
html[lang="ar"] .meter-top{letter-spacing:0; text-transform:none; font-size:13px}
.print{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; opacity:.8; direction:ltr}
.odo{display:flex; align-items:baseline; gap:12px; position:relative; direction:ltr}
.odo input{
  flex:1 1 auto; min-width:0; width:100%; background:transparent; border:0; border-bottom:1px dashed var(--meter-edge);
  color:var(--glow); font:600 clamp(46px,8.5vw,76px)/1.05 var(--font-mono); letter-spacing:.02em;
  text-shadow:0 0 22px var(--glow-soft); padding:4px 0 8px; font-variant-numeric:tabular-nums; caret-color:var(--glow);
}
.odo input:focus{outline:none; border-bottom-color:var(--glow)}
.odo .unit{font-family:var(--font-mono); font-size:15px; color:var(--meter-text)}
.disc{height:12px; border-radius:6px; position:relative; overflow:hidden; background:var(--meter-edge); box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.disc span{
  position:absolute; inset:2px; border-radius:4px;
  background:repeating-linear-gradient(90deg,#B9C2BE 0 86px,#1A1F1D 86px 100px);
  background-size:100px 100%;
  animation:spin var(--spin,3s) linear infinite;
}
.disc.idle span{animation-play-state:paused}
@keyframes spin{to{background-position:100px 0}}
.discLbl{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10.5px; margin-top:-8px; direction:ltr}
.range{position:relative; padding-top:6px}
.range input{width:100%; accent-color:var(--glow); margin:0}
.scale{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10.5px; margin-top:4px}
.tier{position:absolute; top:-12px; left:60%; transform:translateX(-50%); font-family:var(--font-mono); font-size:10px; color:var(--glow); white-space:nowrap}
.tier::after{content:""; display:block; width:1px; height:10px; background:var(--glow); margin:2px auto 0; opacity:.7}

.reading{padding:24px; display:flex; flex-direction:column; gap:12px; justify-content:center; min-width:0}
.reading .lbl{margin:0; font-size:13px; font-weight:500; color:var(--muted)}
.big{margin:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-family:var(--font-display); font-weight:700; font-size:clamp(48px,7vw,72px); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.big .cu{font-size:.34em; font-weight:600; color:var(--muted); letter-spacing:0; font-family:var(--font-body)}
html[lang="en"] .big .cu{order:-1}
.chg{align-self:flex-start; margin:0; padding:6px 12px; border-radius:999px; font-weight:500; font-size:14px; font-variant-numeric:tabular-nums}
.chg.up{background:var(--up-soft); color:var(--up)}
.chg.down{background:var(--down-soft); color:var(--down)}
.mini{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:6px 0 0; padding-top:14px; border-top:1px solid var(--line)}
.mini dt{font-size:12.5px; color:var(--muted)}
.mini dd{margin:2px 0 0; font-family:var(--font-mono); font-size:14px; font-variant-numeric:tabular-nums}

/* Cards */
.duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:20px; align-items:start}
@media (max-width:860px){.duo{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:22px; min-width:0; display:flex; flex-direction:column; gap:18px}
fieldset{border:0; margin:0; padding:0; min-width:0}
legend,.flabel{padding:0; font-size:13px; font-weight:600; margin-bottom:8px; display:block}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative; cursor:pointer}
.chip input,.brk input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.chip span{display:block; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--paper); font-size:14px; transition:background .15s,color .15s}
.chip:hover span{border-color:var(--ink)}
.chip input:checked+span{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--amber); outline-offset:2px}

.panel{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:10px; border-radius:14px; background:var(--panel-2); border:1px solid var(--line)}
@media (max-width:440px){.panel{grid-template-columns:repeat(2,minmax(0,1fr))}}
.brk{position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 6px 10px; border-radius:10px; background:var(--panel); border:1px solid var(--line); cursor:pointer; text-align:center; transition:border-color .15s}
.brk:hover{border-color:var(--muted)}
.brk:has(input:checked){border-color:var(--amber); box-shadow:0 0 0 1px var(--amber)}
.brk:has(input:focus-visible){outline:2px solid var(--amber); outline-offset:2px}
.lever{width:24px; height:44px; border-radius:6px; background:var(--slot); position:relative; box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.lever::after{content:""; position:absolute; inset-inline:3px; height:18px; bottom:3px; border-radius:4px; background:var(--knob); transition:bottom .2s ease, background .2s}
.brk input:checked~.lever::after{bottom:23px; background:var(--amber)}
.amp{font-size:12.5px; font-weight:500; line-height:1.25}
.fee{font-family:var(--font-mono); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.brk input:checked~.fee{color:var(--amber-ink); font-weight:600}

.stepper{display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--paper)}
.stepper button{border:0; background:transparent; width:42px; cursor:pointer; font-size:18px}
.stepper button:hover{background:var(--panel-2)}
.stepper input{width:64px; border:0; border-inline:1px solid var(--line); background:var(--panel); text-align:center; padding:9px 4px; font-family:var(--font-mono); font-size:15px; font-variant-numeric:tabular-nums}

details{border-top:1px solid var(--line); padding-top:14px}
summary{cursor:pointer; font-weight:500; font-size:14px}
.oldgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px}
.oldgrid .full{grid-column:1/-1}
.oldgrid label{display:block; font-size:12.5px; margin-bottom:5px; color:var(--muted)}
.num{width:100%; min-width:0; border:1px solid var(--line); border-radius:9px; background:var(--paper); padding:9px 11px; font-family:var(--font-mono); font-size:15px; font-variant-numeric:tabular-nums}

/* Breakdown */
.bars{display:flex; flex-direction:column; gap:12px}
.brow{display:grid; grid-template-columns:72px minmax(0,1fr); gap:6px 12px; align-items:center}
.brow .who{font-size:13px; font-weight:600}
.brow .tot{grid-column:2; font-family:var(--font-mono); font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.track{height:26px; border-radius:7px; background:var(--panel-2); overflow:hidden; display:flex}
.seg{height:100%; transition:width .45s cubic-bezier(.2,.7,.2,1)}
.seg.e{background:var(--amber)}
.seg.f{background:var(--teal)}
.seg.v{background:repeating-linear-gradient(135deg,var(--slate) 0 3px,var(--panel-2) 3px 6px)}
.legend{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--muted)}
.legend li{display:flex; align-items:center; gap:6px}
.sw{width:12px; height:12px; border-radius:3px; flex:none}
.sw.e{background:var(--amber)} .sw.f{background:var(--teal)}
.sw.v{background:repeating-linear-gradient(135deg,var(--slate) 0 2px,var(--panel-2) 2px 4px)}
.sw.now{background:var(--slate)} .sw.n27{background:var(--amber)}

.scroll{overflow-x:auto}
table.cmp{border-collapse:collapse; width:100%; min-width:420px}
.cmp th{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; text-align:end; padding:0 8px 8px; border-bottom:1.5px solid var(--ink)}
html[lang="ar"] .cmp th{letter-spacing:0; text-transform:none; font-size:12.5px}
.cmp th:first-child{text-align:start; padding-inline-start:0}
.cmp td{padding:9px 8px; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:13.5px; text-align:end; white-space:nowrap; font-variant-numeric:tabular-nums}
.cmp td:first-child{font-family:var(--font-body); text-align:start; white-space:normal; padding-inline-start:0; font-size:14px}
.cmp td small{display:block; color:var(--muted); font-family:var(--font-mono); font-size:11px; margin-top:2px}
.cmp tr.total td{font-weight:600; border-bottom:0; border-top:1.5px solid var(--ink)}
.pos{color:var(--up)} .neg{color:var(--down)}
@media (max-width:480px){
  table.cmp{min-width:0}
  .cmp th{padding:0 4px 8px}
  .cmp td{padding:8px 4px; font-size:12px}
  .cmp td:first-child{font-size:13px}
  .card{padding:18px}
}
.insights{list-style:none; margin:0; padding:14px 16px; background:var(--panel-2); border-radius:12px; display:flex; flex-direction:column; gap:8px; font-size:14px}
.insights li{display:flex; gap:10px}
.insights li::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--amber); margin-top:9px}

/* Year */
.yhead{display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; align-items:flex-end}
.yhead>div{flex:1 1 360px; min-width:0}
.yhead .hint{max-width:64ch}
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--panel); padding:14px 16px; min-width:0}
.stat .k{font-size:12.5px; color:var(--muted)}
.stat .v{font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-.01em; font-variant-numeric:tabular-nums; margin-top:2px}
.stat .s{font-family:var(--font-mono); font-size:12px; margin-top:2px}
.chartbox{display:flex; flex-direction:column; gap:8px}
.readout{margin:0; font-size:13px; color:var(--muted); min-height:1.5em; font-variant-numeric:tabular-nums}
.chartwrap{overflow-x:auto}
#chart{display:block; width:100%; min-width:520px; height:auto}
#chart .grid{stroke:var(--line); stroke-width:1}
#chart .axis{fill:var(--muted); font:10.5px var(--font-mono)}
#chart .mlab{fill:var(--muted); font:11px var(--font-body)}
#chart .bnow{fill:var(--slate)}
#chart .b27{fill:var(--amber)}
#chart .hit{fill:transparent; cursor:pointer}
#chart .hit:hover,#chart .hit.on{fill:var(--panel-2); fill-opacity:.6}
#chart .hit:focus-visible{outline:none; stroke:var(--amber); stroke-width:1.5}
.months{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px}
@media (max-width:720px){.months{grid-template-columns:repeat(3,minmax(0,1fr))}}
.months label{display:block; font-size:12px; color:var(--muted); margin-bottom:4px}
.pasteRow{display:flex; gap:8px; flex-wrap:wrap}
.pasteRow input{flex:1 1 260px; min-width:0; border:1px solid var(--line); border-radius:9px; background:var(--paper); padding:9px 12px; font-family:var(--font-mono); font-size:14px}
.btn{border:0; background:var(--ink); color:var(--paper); border-radius:9px; padding:10px 18px; font-weight:500; cursor:pointer}
.btn:hover{opacity:.88}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line); padding:6px 12px; font-size:13px}

/* Footer */
.notes{margin:0; padding-inline-start:18px; color:var(--muted); font-size:13px; display:flex; flex-direction:column; gap:4px; max-width:80ch}
.src{margin:0; font-size:13px}
.src a{color:var(--amber-ink)}
.credit{display:flex; justify-content:space-between; align-items:center; gap:10px 24px; flex-wrap:wrap; padding-top:16px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted)}
.credit strong{color:var(--ink); font-weight:600}
.credit .mail{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.credit bdi{font-family:var(--font-mono); font-size:13px; color:var(--ink); user-select:all}

@media (prefers-reduced-motion: reduce){
  .disc span{animation:none}
  .seg,.lever::after,.chip span{transition:none}
}