/* Live household schematic: sources → main switch → appliances. Shared by the phone page and the big screen. */
.hh{--edl:#4cc9f0;--generator:#ff9f43;--on:#6dddc8;--warn:#ffcb85;--dim:#2a3a50;--card:#121d2a;--line:#26364a;--muted:#99acc2;--flow:var(--dim);--rail:22px;--stub:26px;--wire:4px;color:#eef2f8}
.hh{--solar:#ffd166;--battery:#7ae582}.hh[data-source=solar]{--flow:var(--solar)}.hh[data-source=battery]{--flow:var(--battery)}.hh[data-source=edl]{--flow:var(--edl)}.hh[data-source=none] .hh-switch{border-color:#ff8a7a66}.hh[data-source=generator]{--flow:var(--generator)}
.hh *,.hh *::before,.hh *::after{box-sizing:border-box}
/* No transitions until the first reading is drawn, so a fresh page never animates in from a false "off" state. */
.hh:not(.hh-ready) *,.hh:not(.hh-ready) *::after{transition:none!important}
.hh-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hh-node{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;min-width:0;transition:border-color .4s,box-shadow .4s,opacity .4s}
.hh-node svg{flex:none;width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hh-text{display:flex;flex-direction:column;min-width:0}.hh-name{font-weight:650}.hh-sub{color:var(--muted);font-size:13px}
.hh-chip{margin-left:auto;font-size:12px;font-weight:650;letter-spacing:.5px;padding:4px 9px;border-radius:999px;background:#0b1019;color:var(--muted);white-space:nowrap}
.hh-source{opacity:.55;flex-direction:column;align-items:flex-start;gap:8px}.hh-source .hh-chip{margin-left:0}.hh-source.live{opacity:1;border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 0 24px -6px var(--c)}.hh-source.live svg,.hh-source.live .hh-chip{color:var(--c)}
.hh-source[data-id=edl]{--c:var(--edl)}.hh-source[data-id=generator]{--c:var(--generator)}.hh-source[data-id=solar]{--c:var(--solar)}.hh-source[data-id=battery]{--c:var(--battery)}
.hh-source.charging{opacity:1;border-color:var(--c);border-style:dashed}.hh-source.charging .hh-chip{color:var(--c)}.hh-source.stale-sensor{opacity:1;border-color:var(--warn)}.hh-source.stale-sensor .hh-sub{color:var(--warn);font-weight:700}
.hh-alerts{display:grid;gap:8px;margin-bottom:12px}.hh-alert{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:12px;background:#2a1530;border:1px solid #ff5d8f;box-shadow:0 0 24px -8px #ff5d8f;animation:hh-pulse 1.6s ease-in-out infinite}.hh-alert b{color:#ffb3c8;letter-spacing:.3px}.hh-alert span{color:#eef2f8;font-size:14px}
@keyframes hh-pulse{50%{box-shadow:0 0 36px -4px #ff5d8f}}
.hh-banner{margin-bottom:12px;padding:12px 16px;border-radius:12px;background:#3a1f22;border:1px solid #ff8a7a;color:#ffd9d3;font-weight:800;letter-spacing:.5px;text-align:center}
.hh-wire{width:var(--wire);height:30px;margin-left:var(--rail);background:var(--dim);border-radius:2px}
.hh-flow{background:repeating-linear-gradient(180deg,var(--flow) 0 9px,transparent 9px 16px);animation:hh-down .7s linear infinite}
.hh-switch .hh-total{margin-left:auto;text-align:right}.hh-total b{display:block;font-size:26px;letter-spacing:-.5px}
.hh-toggle{flex:none;width:52px;height:28px;border-radius:999px;background:#3a1f22;position:relative;transition:background .3s}.hh-toggle::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#ff8a7a;transition:transform .3s,background .3s}
.hh-switch.on .hh-toggle{background:#123b36}.hh-switch.on .hh-toggle::after{transform:translateX(24px);background:var(--on)}
.hh-loads{position:relative;display:grid;gap:10px;padding-left:calc(var(--rail) + var(--stub))}
.hh-loads::before{content:'';position:absolute;left:var(--rail);top:0;bottom:36px;width:var(--wire);background:var(--dim);border-radius:2px}
.hh-loads.hh-flow-bus::before{background:repeating-linear-gradient(180deg,var(--flow) 0 9px,transparent 9px 16px);animation:hh-down .7s linear infinite}
.hh-load{position:relative}.hh-stub{position:absolute;left:calc(-1 * var(--stub));top:50%;width:var(--stub);height:var(--wire);margin-top:-2px;background:var(--dim)}
.hh-stub.hh-flow{background:repeating-linear-gradient(90deg,var(--flow) 0 9px,transparent 9px 16px);animation:hh-right .7s linear infinite}
.hh-load .hh-node{height:72px}.hh-watts{font-weight:650;font-variant-numeric:tabular-nums}
.hh-load.on .hh-node{border-color:color-mix(in srgb,var(--on) 55%,var(--line))}.hh-load.on svg,.hh-load.on .hh-chip{color:var(--on)}
.hh-load.off .hh-chip,.hh-load.waiting .hh-chip{color:var(--warn)}
.hh-tank{font-size:12px;font-weight:650;color:#7fd4ff}.hh-who{font-size:12px;font-weight:650;color:#c9a7ff}.hh-load.controlled .hh-node{box-shadow:inset 0 0 0 1px #c9a7ff55}.hh-load.yours .hh-node{box-shadow:0 0 0 2px #c9a7ff,0 0 22px -6px #c9a7ff}.hh-load.nopower{opacity:.6}.hh-load.standby{opacity:.85}
.hh-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px;color:var(--muted);font-size:13px}
.hh-dot{width:9px;height:9px;border-radius:50%;background:var(--on);box-shadow:0 0 10px var(--on)}
.hh.stale .hh-dot{background:var(--warn);box-shadow:none}.hh.stale .hh-flow,.hh.stale .hh-flow-bus::before{animation:none}.hh.stale .hh-state{color:var(--warn);font-weight:650}
.hh-jump{color:#0b1019;background:#ffcb85;font-weight:700;padding:3px 10px;border-radius:999px}
@keyframes hh-down{to{background-position:0 16px}}@keyframes hh-right{to{background-position:16px 0}}
@media(min-width:900px){
 .hh{--stub:30px}
 .hh-row{max-width:640px;margin:0 auto}.hh-row.four{max-width:none;grid-template-columns:repeat(4,1fr)}.hh-switch{max-width:420px;margin:0 auto}.hh-wire{margin:0 auto;height:36px}
 .hh-loads{grid-template-columns:repeat(6,1fr);gap:14px;padding:var(--stub) 0 0}
 .hh-loads::before{left:calc((100% - 70px) / 12);right:calc((100% - 70px) / 12);top:0;bottom:auto;width:auto;height:var(--wire)}
 .hh-loads.hh-flow-bus::before{background:repeating-linear-gradient(90deg,var(--flow) 0 9px,transparent 9px 16px);animation-name:hh-right}
 .hh-stub{left:50%;top:calc(-1 * var(--stub));width:var(--wire);height:var(--stub);margin:0 0 0 -2px}
 .hh-stub.hh-flow{background:repeating-linear-gradient(180deg,var(--flow) 0 9px,transparent 9px 16px);animation-name:hh-down}
 .hh-source{flex-direction:row;align-items:center}.hh-source .hh-chip{margin-left:auto}
 .hh-load .hh-node{flex-direction:column;align-items:flex-start;gap:8px;height:100%;min-height:170px}
 .hh-who{font-size:14px}.hh-load .hh-chip{margin:auto 0 0}.hh-load .hh-watts{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.hh-alert,.hh-flow,.hh-loads.hh-flow-bus::before{animation:none}}
/* Audience vote, on phones and the big screen. */
.hh-poll{background:#1a1a10;border:1px solid #ffd166;border-radius:16px;padding:18px;box-shadow:0 0 28px -10px #ffd166;color:#eef2f8}
.hh-poll-tag{color:#ffd166;letter-spacing:2px;font-size:12px;font-weight:800}.hh-poll-q{font-size:clamp(20px,2.6vw,34px);font-weight:750;margin:6px 0 12px;letter-spacing:-.3px}
.hh-poll-options{display:grid;gap:10px}.hh-poll-option{font:inherit;font-size:18px;font-weight:700;text-align:left;padding:16px;border-radius:12px;border:1px solid #6b5a2a;background:#26220f;color:inherit}
button.hh-poll-option{cursor:pointer}button.hh-poll-option[aria-pressed=true]{background:#4a3d12;border-color:#ffd166;outline:2px solid #ffd166}button.hh-poll-option:disabled{opacity:.55}
.hh-poll-result{position:relative;display:flex;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:12px;background:#26220f;overflow:hidden;font-size:clamp(16px,1.8vw,24px);font-weight:700}
.hh-poll-result::before{content:'';position:absolute;inset:0;width:var(--pct);background:#ffd16655;transition:width .8s ease-out}.hh-poll-result>*{position:relative}.hh-poll-result.mine{outline:2px solid #ffd166}
.hh-poll-count{margin-top:10px;color:var(--muted,#99acc2);font-size:14px}
/* Forecast card (GET /api/forecast). */
.hh-forecast{background:#121d2a;border:1px solid #26364a;border-radius:16px;padding:16px 18px;color:#eef2f8}.hh-forecast .hh-poll-tag{color:#6dddc8}
.hh-forecast-main{font-size:clamp(17px,2vw,24px);font-weight:700;margin-top:4px}.hh-forecast-sub{color:#99acc2;font-size:13px;margin-top:4px}
.hh-forecast.failing{border-color:#ffcb85}.hh-forecast.failing .hh-forecast-main{color:#ffcb85}
.hh-poll-options.stars{grid-template-columns:repeat(5,1fr)}.hh-poll-options.stars .hh-poll-option{text-align:center;padding:14px 4px;font-size:clamp(14px,3.6vw,20px);color:#ffd166;letter-spacing:-2px}
.hh-poll-average{font-size:clamp(36px,6vw,64px);font-weight:800;color:#ffd166;letter-spacing:-1px}