:root {
  --bg: #f6f7f3;
  --panel: rgba(255, 255, 255, 0.86);
  --ink: #26313d;
  --muted: #68737d;
  --line: rgba(66, 82, 94, 0.13);
  --blue: #1682e5;
  --solar: #f4a900;
  --green: #29a148;
  --teal: #1bb6b0;
  --danger: #c92b2b;
  /* Source identity for the home load-share arcs. --grid matches app.css so the
     portrait and TV dashboards name the grid the same colour. */
  --grid: #2563eb;
  --battery: #1f9d4d;
  --home-size: clamp(619px, 65vh, 680px);
  /* Build 23: satellites ~+20% diameter; Home unchanged. Was clamp(216px, home*.34, 238px). */
  --satellite-size: clamp(259px, calc(var(--home-size) * .408), 286px);
  --battery-size: var(--satellite-size);
  /* Build 24 triangle: Grid TL · Solar TR · Battery BR. Build 36 pushes the
     satellites outward and levels the top/bottom offsets so all three legs
     share one rim-to-rim gap (121px at 1920x1080, was 54/54/81). Bounded by
     keeping each satellite bezel and its readouts fully on screen. */
  --sat-ox: 0.84;
  --sat-oy-top: 0.40;
  --sat-oy-bot: 0.40;
  --composition-width: min(68vw, 830px);
  --composition-height: min(82vh, 720px);
  --home-cx: 50%;
  --home-cy: 50vh;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  min-width: 900px;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 43%, rgba(255,255,255,.98) 0 25%, rgba(248,248,244,.9) 52%, rgba(240,243,241,.9) 100%),
    var(--bg);
  font: 14px/1.35 var(--font-body, "Inter", sans-serif);
  font-variant-numeric: tabular-nums;
}
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.symbol-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.grid-colour { color: var(--blue); }
.solar-colour { color: var(--solar); }
.load-colour { color: var(--green); }
.battery-colour { color: var(--teal); }

.overview-dashboard {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.dashboard-house-background {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  background-color: #dfe9e7;
}
.dashboard-house-background img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: .80;
  filter: grayscale(.24) saturate(.72) contrast(.84) brightness(1.04) blur(1.2px);
}
.dashboard-background-wash {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.18) 0 22%, rgba(255,252,246,.34) 58%, rgba(247,245,239,.46) 100%),
    rgba(255,252,246,.12);
}
.dashboard-house-reveal {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  filter: none !important;
  opacity: 1;
}
.dashboard-house-reveal image {
  image-rendering: auto;
  filter: none !important;
  opacity: 1;
}
.overview-dashboard::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(90,105,110,.022) 1px, transparent 1px);
  background-size: 100% 4px;
  opacity: .35;
}

[data-theme="dark"] {
  --bg: #07101c;
  --panel: rgba(13, 25, 39, .91);
  --ink: #e7eef6;
  --muted: #9aa9b8;
  --line: rgba(155, 180, 202, .20);
  --blue: #58a9f6;
  --solar: #f6b928;
  --green: #48c96b;
  --teal: #39c4bd;
  --danger: #f16d6d;
  --grid: #57a8ff;
  --battery: #3fc46a;
}
[data-theme="dark"] body {
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 43%, rgba(8,18,30,.20) 0 25%, rgba(6,14,24,.48) 62%, rgba(4,10,18,.68) 100%),
    var(--bg);
}
[data-theme="dark"] .dashboard-house-background {
  background-color: #07101c;
}
[data-theme="dark"] .dashboard-house-background img {
  opacity: .77;
  filter: grayscale(.18) saturate(.64) contrast(.86) brightness(.58) blur(1.2px);
}
[data-theme="dark"] .dashboard-background-wash {
  background:
    radial-gradient(circle at 50% 39%, rgba(16,30,44,.06) 0 25%, rgba(5,14,24,.24) 58%, rgba(3,9,16,.48) 100%),
    rgba(4,11,19,.18);
}
[data-theme="dark"] .dashboard-house-reveal,
[data-theme="dark"] .dashboard-house-reveal image { filter: none !important; opacity: 1; }
[data-theme="dark"] .overview-dashboard::before {
  background-image: linear-gradient(rgba(185,205,220,.025) 1px, transparent 1px);
}
[data-theme="dark"] .landscape-theme-toggle,
[data-theme="dark"] .live-badge {
  border-color: var(--line);
  background: rgba(12,24,38,.94);
  box-shadow: 0 5px 16px rgba(0,0,0,.32);
}
[data-theme="dark"] .theme-toggle-glyph { color: #ffd166; }
[data-theme="dark"] .glass-panel {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: 0 10px 27px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.05);
}
[data-theme="dark"] .glass-panel h2 { color: #b0bdca; }
[data-theme="dark"] .energy-composition::before {
  background: radial-gradient(ellipse, rgba(11,23,35,.38), transparent 70%);
}
[data-theme="dark"] .node-circle {
  background: #0c1826;
  background: rgba(12,24,38,.90);
  border-color: rgba(160,184,204,.20);
  box-shadow: 0 10px 26px rgba(0,0,0,.40), inset 0 1px rgba(255,255,255,.06), inset 0 0 0 7px rgba(34,50,64,.72);
}
[data-theme="dark"] .node-circle::before { border-color: rgba(165,188,207,.18); }
[data-theme="dark"] .node-state,
[data-theme="dark"] .home-ac-mains,
[data-theme="dark"] .home-lifetime-gen,
[data-theme="dark"] .home-consumed-today,
[data-theme="dark"] .satellite-energy { color: #a8b5c2; }
[data-theme="dark"] .node-source {
  background: rgba(255,255,255,.06);
}
[data-theme="dark"] .daily-icon {
  background: rgba(255,255,255,.055);
  border-color: rgba(170,190,207,.16);
}
[data-theme="dark"] .home-photo-wash {
  background: linear-gradient(180deg, rgba(2,8,14,.015), transparent 45%, rgba(2,8,14,.055));
}
[data-theme="dark"] .bezel-foundation { stroke: rgba(185,205,220,.24); }
[data-theme="dark"] .home-outer-ring {
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.42));
}
[data-theme="dark"] .outer-ring-shadow { stroke: rgba(0,0,0,.48); }
[data-theme="dark"] .outer-ring-edge { stroke: #29343d; }
[data-theme="dark"] .outer-ring-body { opacity: .90; }
[data-theme="dark"] .outer-ring-highlight { stroke: rgba(220,228,233,.55); }
[data-theme="dark"] .outer-ring-ticks { stroke: #34414a; }
[data-theme="dark"] .outer-ring-brush { stroke: rgba(238,244,247,.20); }
[data-theme="dark"] .outer-ring-notch-shadow { stroke: #03070a; }
[data-theme="dark"] .outer-ring-notch { stroke: #46535c; }
[data-theme="dark"] .paired-track { stroke: rgba(176,196,211,.22); }
[data-theme="dark"] .arc-label { stroke: rgba(4,12,20,.90); }
[data-theme="dark"] .arc-label-name,
[data-theme="dark"] .arc-label-of { fill: #b6c3cf; }
[data-theme="dark"] .arc-label-share { fill: #e2eaf2; }
[data-theme="dark"] .home-overlay h3,
[data-theme="dark"] .home-overlay .node-power,
[data-theme="dark"] .home-overlay .node-state,
[data-theme="dark"] .home-overlay .home-lifetime-gen,
[data-theme="dark"] .home-overlay .home-consumed-today {
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 7px rgba(0,0,0,.72);
}
[data-theme="dark"] .home-overlay .node-state { color: #d4dde5; }
[data-theme="dark"] .home-overlay .home-lifetime-register,
[data-theme="dark"] .home-overlay .home-consumed-today .home-lifetime-register {
  color: #e8eef4;
  text-shadow: none;
  filter: none;
}
[data-theme="dark"] .satellite-energy-v { color: #e8eef4; }
[data-theme="dark"] .stale-banner {
  border-color: rgba(241,109,109,.55);
  background: rgba(25,16,22,.94);
  box-shadow: 0 6px 20px rgba(0,0,0,.42);
}

.overview-header {
  position: absolute;
  z-index: 20;
  top: clamp(15px, 2.1vh, 28px);
  right: clamp(25px, 3.2vw, 58px);
}
.landscape-theme-toggle {
  position: absolute;
  z-index: 30;
  top: clamp(15px, 2.1vh, 28px);
  left: clamp(10px, 2.2vw, 40px);
  width: 118px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 14px rgba(33,49,57,.11);
  color: var(--ink);
  font: 600 11px/1 var(--font-body, "Inter", sans-serif);
  cursor: pointer;
}
.landscape-theme-toggle:hover { border-color: rgba(41,161,72,.42); }
.landscape-theme-toggle:focus {
  outline: 3px solid rgba(22,130,229,.48);
  outline-offset: 3px;
}
.theme-toggle-glyph { color: var(--solar); font-size: 18px; line-height: 1; }
/* Same pill as the theme toggle, parked beside it. */
.landscape-arc-toggle {
  left: calc(clamp(10px, 2.2vw, 40px) + 126px);
  width: 152px;
}
.arc-toggle-glyph { font-size: 16px; line-height: 1; color: var(--solar); }
[data-arc-palette="identity"] .arc-toggle-glyph { color: var(--grid); }
.overview-badges { display: grid; gap: 9px; justify-items: end; }
.live-badge {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 14px rgba(33, 49, 57, .09);
}
.live-badge {
  min-height: 27px;
  padding: 4px 10px;
  gap: 7px;
  border-radius: 999px;
  color: var(--green);
  font-size: clamp(8px, .72vw, 11px);
}
.live-badge time { color: var(--muted); padding-left: 4px; border-left: 1px solid var(--line); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(41,161,72,.1); }
.live-badge.is-stale { color: var(--danger); }
.landscape-utilities {
  position: absolute;
  z-index: 32;
  right: 10px;
  bottom: 34px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: auto;
}
.usb-reset-open,
.usb-reset-cancel,
.usb-reset-submit {
  border: 1px solid rgba(66, 82, 94, .28);
  border-radius: 8px;
  background: rgba(246, 247, 243, .88);
  color: #3a4652;
  font: 600 11px/1.2 var(--font-body, "Inter", sans-serif);
  letter-spacing: .04em;
  padding: 6px 10px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(38, 52, 60, .12);
}
.usb-reset-open:hover,
.usb-reset-submit:hover { background: rgba(255, 255, 255, .96); }
.usb-reset-open:disabled,
.usb-reset-cancel:disabled,
.usb-reset-submit:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.usb-reset-confirm {
  width: min(260px, 70vw);
  padding: 10px 12px;
  border: 1px solid rgba(66, 82, 94, .22);
  border-radius: 10px;
  background: rgba(246, 247, 243, .94);
  box-shadow: 0 8px 22px rgba(38, 52, 60, .16);
  text-align: left;
}
.usb-reset-confirm[hidden] { display: none; }
.usb-reset-confirm p {
  margin: 0 0 6px;
  color: #2f3a45;
  font: 600 12px/1.3 var(--font-body, "Inter", sans-serif);
}
.usb-reset-fineprint {
  font-weight: 500 !important;
  font-size: 10px !important;
  opacity: .78;
}
.usb-reset-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.usb-reset-submit {
  background: #2f6fed;
  border-color: #2f6fed;
  color: #fff;
}
.usb-reset-submit:hover { background: #2558c4; }
.usb-reset-status {
  margin: 0;
  max-width: 260px;
  color: #3a4652;
  text-align: right;
  font: 500 10px/1.3 var(--font-body, "Inter", sans-serif);
  text-shadow: 0 1px 2px rgba(255,255,255,.85);
}
.usb-reset-status.is-ok { color: #1f7a3f; }
.usb-reset-status.is-err { color: #b42318; }
[data-theme="dark"] .usb-reset-open,
[data-theme="dark"] .usb-reset-cancel,
[data-theme="dark"] .usb-reset-confirm {
  background: rgba(12, 20, 30, .82);
  border-color: rgba(214, 224, 232, .22);
  color: #d6e0e8;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .usb-reset-confirm p,
[data-theme="dark"] .usb-reset-status { color: #d6e0e8; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
[data-theme="dark"] .usb-reset-status.is-ok { color: #62d28a; }
[data-theme="dark"] .usb-reset-status.is-err { color: #ff8d80; }
.landscape-build-watermark {
  position: absolute;
  z-index: 31;
  right: 10px;
  bottom: 7px;
  max-width: 310px;
  color: var(--ink);
  text-align: right;
  font: 500 8px/1.25 var(--font-body, "Inter", sans-serif);
  letter-spacing: .025em;
  opacity: .68;
  text-shadow: 0 1px 2px rgba(255,255,255,.9);
  pointer-events: none;
}
.landscape-build-watermark strong,
.landscape-build-watermark span { display: block; }
.landscape-build-watermark strong { font-size: 9px; font-weight: 600; }
[data-theme="dark"] .landscape-build-watermark {
  color: #d6e0e8;
  opacity: .72;
  text-shadow: 0 1px 3px rgba(0,0,0,.92);
}
.glass-panel {
  z-index: 12;
  border: 1px solid rgba(66,82,94,.13);
  border-radius: clamp(13px, 1.4vw, 20px);
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(38,52,60,.11), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(7px);
}
.glass-panel h2 {
  margin: 0;
  color: #68727e;
  font-size: clamp(10px, .86vw, 13px);
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.daily-panel {
  position: absolute;
  left: clamp(10px, 2.2vw, 40px);
  top: clamp(300px, 38vh, 410px);
  width: clamp(165px, 16vw, 220px);
  padding: clamp(10px, 1.1vw, 16px);
}
.daily-panel h2 { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.daily-panel h2 svg { width: 16px; height: 16px; }
.daily-panel ul { list-style: none; margin: 0; padding: 0; }
.daily-panel li {
  display: grid;
  grid-template-columns: clamp(42px, 4.3vw, 62px) 1fr;
  align-items: center;
  min-height: clamp(50px, 6.4vh, 69px);
  border-top: 1px solid rgba(66,82,94,.09);
}
.daily-panel li:first-child { border-top: 0; }
.daily-icon {
  display: grid;
  place-items: center;
  width: clamp(38px, 4vw, 55px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 8%, white);
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
.daily-icon svg { width: 58%; height: 58%; }
.daily-grid { color: var(--blue); }
.daily-solar { color: var(--solar); }
.daily-home { color: var(--green); }
.daily-panel small,
.daily-panel strong { display: block; }
.daily-panel small { color: var(--muted); font-size: clamp(8px, .72vw, 11px); }
.daily-panel strong { margin-top: 3px; font-size: clamp(20px, 2vw, 30px); line-height: 1; }

.device-status-panel {
  position: absolute;
  left: clamp(10px, 2.2vw, 40px);
  top: clamp(535px, 66vh, 710px);
  width: clamp(165px, 16vw, 220px);
  padding: clamp(9px, 1vw, 14px);
}
.device-status-panel h2 { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.device-status-panel h2 svg { width: 14px; height: 14px; }
.device-status-panel ul { list-style: none; margin: 0; padding: 0; }
.status-device {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(6px, .7vw, 10px);
  min-height: clamp(32px, 4.2vh, 44px);
  border-top: 1px solid var(--line);
  color: var(--green);
}
.status-device > svg { width: clamp(14px, 1.2vw, 18px); height: clamp(14px, 1.2vw, 18px); flex: 0 0 auto; }
.status-device > span { min-width: 0; }
.status-device strong,
.status-device small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-device strong { color: var(--green); font-size: clamp(8px, .68vw, 10px); }
.status-device small { margin-top: 1px; color: var(--muted); font-size: clamp(6px, .55vw, 8px); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(41,161,72,.08); flex: 0 0 auto; }
.status-device.is-bad strong, .status-device.is-bad { color: var(--danger); }
.status-device.is-bad .status-dot { background: var(--danger); }
.status-device.is-warn strong, .status-device.is-warn { color: var(--solar); }
.status-device.is-warn .status-dot { background: var(--solar); }

.energy-composition {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 0;
  width: var(--composition-width);
  height: var(--composition-height);
  transform: translateX(-50%);
  overflow: visible;
}
.energy-composition::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 42%;
  width: 130%;
  height: 86%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(255,255,255,.76), transparent 70%);
}
.energy-composition.is-stale { filter: saturate(.55); }
.flow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
  /* Track gauge in CSS px; syncEnergyConduits() rescales it with the Home rim. */
  --conduit-w: 20px;
}
.flow-layer { opacity: 1; }
/* Recessed track: bevel rim → charcoal shell → dark groove → energy line.
   Sits below the dials (z-index 1 vs 5) so every port tucks under a rim. */
.conduit { color: var(--green); }
.conduit-bevel,
.conduit-shell,
.conduit-groove,
.conduit-energy {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: round;
}
/* Shadow lives on the static outer bevel only — keeping it off the group means
   travelling chevrons never re-rasterise a filter region on the Pi. */
.conduit-bevel {
  stroke: rgba(203, 216, 226, .5);
  stroke-width: calc(var(--conduit-w) + 5px);
  filter: drop-shadow(0 2px 2.5px rgba(6, 14, 22, .5));
}
.conduit-shell { stroke: #333e48; stroke-width: calc(var(--conduit-w) + 1px); }
.conduit-groove { stroke: rgba(9, 15, 21, .93); stroke-width: calc(var(--conduit-w) - 7px); }
.conduit-energy {
  stroke: currentColor;
  stroke-width: calc(var(--conduit-w) - 11px);
  stroke-linecap: round;
  opacity: .1;
  transition: opacity .3s ease;
}
.conduit.is-live .conduit-energy { opacity: .5; }
/* Coupler, in profile from the rim outwards: a shadowed bolted flange plate
   with a machined chamfer, the dark bore the energy line runs into, then a
   narrower collar boss where the tube leaves the plate. The chamfer is a full
   outline rather than a one-sided sheen because every port is rotated to its
   own run, so a directional highlight would flip sides between the Grid and
   Battery legs. */
/* Blur only, no offset: each port is rotated to its own run, so an offset
   shadow would point a different way on every leg. */
.conduit-port { filter: drop-shadow(0 0 2.6px rgba(6, 14, 22, .6)); }
.conduit-port-flange {
  fill: url(#conduitFlangeSteel);
  stroke: rgba(24, 32, 40, .9);
  stroke-width: 1.1;
}
.conduit-port-chamfer {
  fill: none;
  stroke: rgba(255, 255, 255, .26);
  stroke-width: 1.1;
}
.conduit-port-bore {
  fill: #0b1218;
  stroke: rgba(196, 211, 222, .2);
  stroke-width: 1;
}
.conduit-port-bolt {
  fill: #58636c;
  stroke: rgba(240, 246, 250, .3);
  stroke-width: .7;
}
.conduit-port-collar {
  fill: url(#conduitCollarSteel);
  stroke: rgba(24, 32, 40, .85);
  stroke-width: 1;
}
.conduit-port-face {
  fill: currentColor;
  stroke: none;
  opacity: .22;
  transition: opacity .3s ease;
}
.conduit.is-live .conduit-port-face { opacity: .95; }
.conduit:not(.is-live) .conduit-chevrons { display: none; }
.conduit-chevron {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .96;
}
[data-theme="dark"] .conduit-bevel { stroke: rgba(150, 168, 182, .4); }
[data-theme="dark"] .conduit-shell { stroke: #222b34; }
[data-theme="dark"] .conduit-groove { stroke: rgba(3, 8, 13, .95); }
[data-theme="dark"] .conduit-port { filter: drop-shadow(0 0 3px rgba(0, 0, 0, .7)); }
[data-theme="dark"] .conduit-port-flange { fill: url(#conduitFlangeSteelDark); }
[data-theme="dark"] .conduit-port-chamfer { stroke: rgba(214, 228, 238, .2); }
[data-theme="dark"] .conduit-port-bore { fill: #04080c; stroke: rgba(160, 178, 192, .18); }
[data-theme="dark"] .conduit-port-bolt { fill: #39434c; stroke: rgba(196, 212, 224, .26); }
[data-theme="dark"] .conduit-port-collar { fill: url(#conduitCollarSteelDark); }

.energy-node {
  position: absolute;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border-radius: 50%;
  text-align: center;
  z-index: 5;
}
.node-circle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1px;
  padding: 11%;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;
  background: rgba(255,255,255,.91);
  -webkit-backdrop-filter: blur(4px) saturate(1.03);
  backdrop-filter: blur(4px) saturate(1.03);
  border: 1px solid rgba(67,82,91,.14);
  box-shadow: 0 9px 23px rgba(44,59,67,.14), inset 0 1px 0 white, inset 0 0 0 7px rgba(235,237,235,.75);
}
.node-circle::before {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(89,104,111,.13);
  border-radius: 50%;
  pointer-events: none;
}
.node-meter {
  position: absolute;
  z-index: 2;
  inset: 5%;
  border-radius: 50%;
  border: clamp(3px, .35vw, 5px) solid transparent;
  transform: rotate(-43deg);
}
.meter-grid { border-top-color: var(--blue); border-right-color: var(--blue); }
.meter-solar { border-top-color: var(--solar); border-right-color: var(--solar); }
.satellite-outer-ring {
  position: absolute;
  z-index: 7;
  left: -5.555%;
  top: -5.555%;
  width: 111.111%;
  height: 111.111%;
  overflow: visible;
  pointer-events: none;
  color: #78858e;
  filter: drop-shadow(0 3px 4px rgba(29,39,46,.20));
}
.satellite-ring-shadow,
.satellite-ring-edge,
.satellite-ring-body,
.satellite-ring-ticks {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.satellite-ring-shadow { stroke: rgba(29,39,46,.20); stroke-width: 4; }
.satellite-ring-edge { stroke: rgba(73,86,95,.76); stroke-width: 3.2; }
.satellite-ring-body { stroke: currentColor; stroke-width: 7; opacity: .90; }
.satellite-ring-ticks { stroke: rgba(43,54,62,.66); stroke-width: 1.4; stroke-dasharray: 1.2 5.3; }
.satellite-ring-notch-shadow,
.satellite-ring-notch {
  fill: none;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}
.satellite-ring-notch-shadow { stroke: rgba(12,19,24,.86); stroke-width: 6; }
.satellite-ring-notch { stroke: currentColor; stroke-width: 3.2; }
.ring-trail-layer,
.trail-current-notch-overlay { pointer-events: none; }
.ring-trail-canvas {
  position: absolute;
  z-index: 8;
  display: block;
  pointer-events: none;
}
.home-trail-layer { color: var(--green); }
.ring-trail-ghost {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: opacity .25s linear, stroke-width .25s linear;
}
.satellite-ring-grid { color: var(--blue); }
/* Steel like the Battery bezel, not solar orange: a full orange circle at this
   radius reads as a filled 0–60A gauge and swamps #tvSolarCurrentArc, which is
   the only element on this dial that means "amps". The rotating comet trail
   below keeps its orange, and it is always a partial arc. */
.satellite-ring-solar { color: #7b878f; }
.satellite-ring-battery,
.satellite-ring-battery[data-ring-state="charging"],
.satellite-ring-battery[data-ring-state="discharging"],
.satellite-ring-battery[data-ring-state="standby"] { color: #7b878f; }
.satellite-ring-battery[data-ring-state="discharging"] .satellite-ring-ticks {
  stroke: rgba(43,54,62,.66);
  stroke-width: 1.4;
  stroke-dasharray: 1.2 5.3;
  stroke-linecap: butt;
  filter: none;
}
.satellite-ring-battery[data-ring-state="discharging"] .satellite-ring-notch {
  stroke: currentColor;
  stroke-width: 3.2;
  filter: none;
}
.satellite-outer-ring[data-ring-state="idle"] .satellite-ring-body,
.satellite-outer-ring[data-ring-state="standby"] .satellite-ring-body { opacity: .50; }
.satellite-outer-ring[data-ring-state="disconnected"],
.satellite-outer-ring[data-ring-state="unavailable"],
.satellite-outer-ring[data-ring-state="stale"] {
  color: #89939b;
  filter: none;
}
.satellite-outer-ring[data-ring-state="disconnected"] .satellite-ring-body,
.satellite-outer-ring[data-ring-state="unavailable"] .satellite-ring-body,
.satellite-outer-ring[data-ring-state="stale"] .satellite-ring-body { opacity: .34; }
[data-theme="dark"] .satellite-outer-ring { filter: drop-shadow(0 3px 5px rgba(0,0,0,.48)); }
[data-theme="dark"] .satellite-ring-solar,
[data-theme="dark"] .satellite-ring-battery { color: #a8b3ba; }
[data-theme="dark"] .satellite-ring-edge { stroke: rgba(180,197,208,.52); }
[data-theme="dark"] .satellite-ring-ticks { stroke: rgba(216,226,233,.48); }
.node-icon { width: 23%; height: 23%; }
.energy-node h3 { margin: 4px 0 0; color: var(--muted); font-size: clamp(10px, .92vw, 14px); line-height: 1; text-transform: uppercase; letter-spacing: .045em; }
.node-power { margin: 4px 0 0; font-size: clamp(21px, 2.35vw, 35px); font-weight: 600; line-height: 1; }
.node-state { margin: 4px 0 0; color: var(--muted); font-size: clamp(8px, .69vw, 11px); }
.node-source {
  margin: 6px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 7%, white);
  font-size: clamp(6px, .56vw, 9px);
}
.node-source i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.node-source.is-quiet { opacity: .42; }
.satellite-energy {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  max-width: 78%;
  color: var(--muted);
  font-size: clamp(6px, .56vw, 9px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .02em;
  pointer-events: none;
  white-space: nowrap;
}
.satellite-energy-solar,
.satellite-energy-grid { gap: 2px; }
.satellite-energy-solar .satellite-energy-v {
  font-size: clamp(7px, .62vw, 10px);
}
.satellite-energy-row { display: inline-flex; align-items: baseline; gap: 3px; }
.satellite-energy-k {
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .9;
  font-size: .92em;
}
.satellite-energy-v {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  font-weight: 700;
  color: #2f3a44;
}
.satellite-energy-solar .satellite-energy-v { color: var(--solar); }
.satellite-energy-grid .satellite-energy-v { color: var(--blue); }
.satellite-current-value {
  position: absolute;
  z-index: 4;
  top: 32%;
  right: 11%;
  margin: 0;
  padding: 2px 4px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  font-size: clamp(6px, .56vw, 9px);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
[data-theme="dark"] .satellite-current-value { background: rgba(7,17,28,.82); }

.node-grid,
.node-solar {
  /* Legacy square fallback; modern sizing immediately below keeps it responsive. */
  width: 190px;
  height: 190px;
  width: var(--satellite-size);
  height: var(--satellite-size);
}
/* Grid = top-left, Solar = top-right, Battery = bottom-right (triangle). */
.node-grid {
  left: calc(var(--home-cx) - var(--home-size) * var(--sat-ox) - var(--satellite-size) * .5);
  top: calc(var(--home-cy) - var(--home-size) * var(--sat-oy-top) - var(--satellite-size) * .5);
}
.node-solar {
  left: calc(var(--home-cx) + var(--home-size) * var(--sat-ox) - var(--satellite-size) * .5);
  top: calc(var(--home-cy) - var(--home-size) * var(--sat-oy-top) - var(--satellite-size) * .5);
}
.node-home {
  left: var(--home-cx);
  top: var(--home-cy);
  width: 400px;
  height: 400px;
  width: var(--home-size);
  height: var(--home-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 4;
}
.node-battery {
  left: calc(var(--home-cx) + var(--home-size) * var(--sat-ox) - var(--battery-size) * .5);
  top: calc(var(--home-cy) + var(--home-size) * var(--sat-oy-bot) - var(--battery-size) * .5);
  width: 190px;
  height: 190px;
  width: var(--battery-size);
  height: var(--battery-size);
  transform: none;
  border-radius: 50%;
  z-index: 6;
}
.node-battery .node-circle {
  display: block;
  padding: 0;
  box-shadow: 0 8px 22px rgba(44,59,67,.13), inset 0 0 0 7px rgba(235,237,235,.75);
}
.node-battery .node-circle > h3,
.node-battery .node-circle > p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}
/* Four face rows equally spaced: SOC · Battery · kW · state (no voltage). */
.node-battery .battery-soc-number { top: 22%; }
.node-battery .node-circle > h3 { top: 40%; font-size: clamp(10px, 1vw, 14px); }
/* Match Grid/Solar .node-power size (was clamp(14px, 1.65vw, 19px)). */
.node-battery .node-circle > .node-power { top: 58%; font-size: clamp(21px, 2.35vw, 35px); }
.node-battery .node-state { top: 76%; font-size: clamp(8px, .78vw, 11px); }
.node-battery[data-battery-state="charging"] .battery-live-state,
.node-battery[data-battery-state="charging"] .battery-live-power { color: var(--green); }
.node-battery[data-battery-state="discharging"] .battery-live-state,
.node-battery[data-battery-state="discharging"] .battery-live-power { color: #c67d00; }
.node-battery[data-battery-state="standby"] .battery-live-state,
.node-battery[data-battery-state="standby"] .battery-live-power { color: var(--blue); }
.node-soc { margin: 3px 0 0; color: var(--teal); font-size: clamp(23px, 2.3vw, 34px); font-weight: 600; line-height: 1; }
.battery-soc-number {
  position: absolute;
  z-index: 4;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: var(--blue);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.battery-soc-ring,
.satellite-current-gauge { position: absolute; z-index: 2; inset: 2%; width: 96%; height: 96%; pointer-events: none; }
/* Tracks may use non-scaling-stroke; fills must NOT — it breaks stroke-dasharray and paints a false mid-gap. */
.battery-soc-track,
.satellite-current-track { fill: none; stroke-width: 2.7; vector-effect: non-scaling-stroke; }
.battery-soc-fill { fill: none; stroke-width: 2.7; }
/* Wider than its own track and than the battery SOC fill: with the bezel now
   steel, this arc carries the whole 0A→now reading on the Grid/Solar dials. */
.satellite-current-fill { fill: none; stroke-width: 3.4; }
.battery-soc-track { stroke: rgba(22,130,229,.17); }
/* Gap defaults >> path length so pre-JS paint cannot wrap a second high-end segment. */
.battery-soc-fill { stroke: var(--blue); stroke-linecap: butt; stroke-dasharray: 0 1000; stroke-dashoffset: 0; transition: none; }
.satellite-current-track { stroke: rgba(68,84,96,.2); }
.satellite-current-fill { stroke-linecap: butt; stroke-dasharray: 0 1000; stroke-dashoffset: 0; transition: none; }
.grid-current-gauge .satellite-current-fill { stroke: var(--blue); }
.solar-current-gauge .satellite-current-fill { stroke: var(--solar); }
.battery-soc-scale {
  fill: #185f9f;
  stroke: rgba(255,255,255,.94);
  stroke-width: .8px;
  paint-order: stroke fill;
  font: 700 3.2px/1 var(--font-body, "Inter", sans-serif);
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: -.08em;
}
[data-theme="dark"] .battery-soc-scale {
  fill: #8fc8ff;
  stroke: rgba(6,16,27,.94);
}
.satellite-current-scale {
  fill: #52606b;
  stroke: rgba(255,255,255,.94);
  stroke-width: .8px;
  paint-order: stroke fill;
  font: 700 3.1px/1 var(--font-body, "Inter", sans-serif);
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: -.08em;
}
.grid-current-gauge .satellite-current-scale { fill: #185f9f; }
.solar-current-gauge .satellite-current-scale { fill: #9b6500; }
[data-theme="dark"] .satellite-current-scale { stroke: rgba(6,16,27,.94); }
[data-theme="dark"] .grid-current-gauge .satellite-current-scale { fill: #8fc8ff; }
[data-theme="dark"] .solar-current-gauge .satellite-current-scale { fill: #ffd36d; }

.home-bezel-wrap { position: relative; width: 100%; height: 100%; }
.home-photo {
  z-index: 1;
  position: absolute;
  top: 11%;
  right: 11%;
  bottom: 11%;
  left: 11%;
  inset: 11%;
  overflow: hidden;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(51,70,79,.12);
}
.home-photo-wash {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%, rgba(255,255,255,.025));
  pointer-events: none;
}
.home-bezel { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bezel-foundation { fill: none; stroke: rgba(86,100,107,.18); stroke-width: 13; }
.home-outer-ring {
  position: absolute;
  z-index: 2;
  left: -4%;
  top: -4%;
  width: 108%;
  height: 108%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 5px 6px rgba(24,34,41,.20));
}
.outer-ring-shadow,
.outer-ring-edge,
.outer-ring-body,
.outer-ring-highlight,
.outer-ring-ticks,
.outer-ring-brush {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.outer-ring-shadow { stroke: rgba(31,40,47,.24); stroke-width: 9; }
.outer-ring-edge { stroke: #56616a; stroke-width: 7; }
.outer-ring-body { stroke: url("#outerSteelGradient"); stroke-width: 22; opacity: .91; }
.outer-ring-highlight { stroke: rgba(242,246,248,.66); stroke-width: 3; }
.outer-ring-ticks { stroke: #4a565f; stroke-width: 2.6; stroke-dasharray: 2 11; }
.outer-ring-brush { stroke: rgba(255,255,255,.25); stroke-width: 1; stroke-dasharray: .8 4; }
.outer-ring-notch-shadow,
.outer-ring-notch,
.outer-ring-notch-highlight {
  fill: none;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}
.outer-ring-notch-shadow { stroke: #182127; stroke-width: 12; }
.outer-ring-notch { stroke: #59646c; stroke-width: 7; }
.outer-ring-notch-highlight { stroke: rgba(248,251,252,.90); stroke-width: 2; }
.home-outer-ring.is-moving .outer-ring-notch { stroke: var(--green); }
.home-outer-ring.is-moving .outer-ring-notch-highlight { stroke: rgba(224,255,231,.96); }
.paired-track,
.paired-fill {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.paired-track { stroke: rgba(67,82,91,.16); }
/* Share arcs are painted by the kW ramps in the bezel defs, so the colour at any
   point along an arc is the burn colour for the power carried up to there. */
.grid-share-fill { stroke: url(#homeShareRampGrid); }
.battery-share-fill { stroke: url(#homeShareRampBattery); }
.solar-share-fill { stroke: url(#homeShareRampSolar); }
.paired-gauge[data-state="unavailable"] .paired-fill,
.paired-gauge[data-state="disconnected"] .paired-fill { stroke: #89939b; opacity: .38; }
/* Each arc names itself on a path at its own radius: GRID and SOLAR sit just
   outside their outer tracks, BATT just inside the inner one, so every label
   touches one track and only one. Glyphs grow inward from the baseline, which
   is what sets those radii. Stroke-then-fill gives a halo over the photo. */
.arc-label {
  paint-order: stroke fill;
  stroke: rgba(247,249,246,.88);
  stroke-width: 2.6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  letter-spacing: .1em;
}
.arc-label-name {
  fill: #4b5862;
  font: 700 10px/1 "Inter", sans-serif;
}
.arc-label-share {
  fill: #35414b;
  font: 700 11px/1 "Inter", sans-serif;
  font-variant-numeric: tabular-nums;
}
/* Says what the percentage is of, on a dial otherwise full of kW. */
.arc-label-of {
  fill: #4b5862;
  font: 600 9px/1 "Inter", sans-serif;
}
.home-overlay {
  position: absolute;
  z-index: 4;
  left: 11%;
  top: 11%;
  right: auto;
  bottom: auto;
  width: 78%;
  height: 78%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 11%;
  border-radius: 50%;
  text-align: center;
  pointer-events: none;
}
.home-text-backdrop {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: calc(100% - 24px);
  margin-top: -11px;
  padding: 10px 12px;
  border: 1px solid rgba(75,91,101,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 4px 14px rgba(29,43,52,.10);
  -webkit-backdrop-filter: blur(5px) saturate(1.02);
  backdrop-filter: blur(5px) saturate(1.02);
}
[data-theme="dark"] .home-text-backdrop {
  border-color: rgba(179,197,211,.15);
  background: rgba(8,19,31,.70);
  box-shadow: 0 5px 16px rgba(0,0,0,.24);
}
.home-overlay h3 { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--green); font-size: clamp(13px, 1.35vw, 20px); text-transform: uppercase; letter-spacing: .035em; text-shadow: 0 1px 2px white, 0 0 6px rgba(255,255,255,.9); }
.home-overlay h3 svg { width: 22px; height: 22px; }
.home-overlay .node-power { margin-top: 4px; font-size: clamp(42px, 3.9vw, 62px); text-shadow: 0 1px 2px white, 0 0 7px rgba(255,255,255,.92); }
.home-overlay .node-state { font-size: clamp(10px, .98vw, 15px); color: #48545e; text-shadow: 0 1px 2px white, 0 0 5px rgba(255,255,255,.95); }
.home-ac-mains { margin: 3px 0 0; color: var(--muted); font-size: clamp(7px, .65vw, 10px); }
.home-energy-meters {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 5px 0 0;
  width: 100%;
}
.home-lifetime-gen,
.home-consumed-today {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(7px, .62vw, 10px);
  letter-spacing: .02em;
  text-shadow: 0 1px 1px rgba(255,255,255,.75);
  filter: none;
  transform: none;
  will-change: auto;
  -webkit-font-smoothing: antialiased;
}
.home-lifetime-label {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(6px, .55vw, 9px);
  font-weight: 600;
  opacity: .92;
}
.home-lifetime-register {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  font-weight: 600;
  font-size: clamp(9px, .86vw, 13px);
  color: #2f3a44;
  letter-spacing: .03em;
  white-space: nowrap;
  text-shadow: none;
  filter: none;
  transform: translateZ(0);
}
.home-consumed-today .home-lifetime-register {
  font-size: clamp(9px, .86vw, 13px); /* match Lifetime Gen sharpness/size */
}

.stale-banner {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: var(--home-cy);
  transform: translate(-50%, -50%);
  padding: 9px 16px;
  border: 2px solid rgba(201,43,43,.4);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 5px 18px rgba(76,30,30,.15);
  color: var(--danger);
  font-size: clamp(16px, 2vw, 30px);
  font-weight: 700;
  letter-spacing: .12em;
}

@media (max-width: 1100px) and (min-height: 700px) {
  :root {
    --home-size: 619px;
    --composition-width: 720px;
    --composition-height: 675px;
    --home-cy: 384px;
  }
  .node-grid,
  .node-solar,
  .node-battery { width: var(--satellite-size); height: var(--satellite-size); }
  .node-home { width: 619px; height: 619px; }
  .daily-panel { left: 6px; width: 150px; top: 300px; }
  .device-status-panel { left: 292px; top: 12px; width: 410px; padding: 7px 10px; }
  .device-status-panel h2 { margin-bottom: 2px; }
  .device-status-panel ul { display: flex; align-items: stretch; }
  .device-status-panel .status-device {
    width: 20%;
    min-height: 35px;
    padding: 0 4px;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    gap: 4px;
  }
  .device-status-panel .status-device:first-child { border-left: 0; }
  .device-status-panel .status-device > svg { width: 12px; height: 12px; }
  .device-status-panel .status-device strong { font-size: 7px; }
  .device-status-panel .status-device small { font-size: 6px; }
}

@media (min-width: 1180px) {
  :root {
    --home-size: clamp(619px, 65vh, 680px);
    --composition-width: min(68vw, 920px);
    --composition-height: min(84vh, 820px);
    --home-cy: 50vh;
  }
  /* Dropped clear of the widened Grid/Solar/Battery bezels. */
  .daily-panel { top: 440px; }
}

@media (min-width: 1600px) {
  .daily-panel { width: 285px; }
}

/* Fixed 1024x768 TV geometry. Critical placement intentionally avoids clamp(),
   min(), custom-property arithmetic, inset, aspect-ratio and CSS Grid. */
@media (min-width: 1000px) and (max-width: 1100px) and (min-height: 700px) and (max-height: 820px) {
  body { min-width: 900px; font-size: 14px; }
  .glass-panel { border-radius: 13px; }

  /* Chrome pulled clear of the corner dials now that they sit further out. */
  .overview-header { top: 15px; right: 205px; }
  .landscape-theme-toggle { top: 300px; left: 10px; }
  .landscape-utilities {
    right: auto;
    left: 10px;
    bottom: 30px;
    align-items: flex-start;
  }
  .landscape-build-watermark {
    right: auto;
    left: 168px;
    text-align: left;
  }
  .overview-badges { display: flex; flex-direction: column; align-items: flex-end; }
  .live-badge { min-height: 27px; padding: 4px 10px; font-size: 8px; }
  .energy-composition {
    left: 152px;
    top: 0;
    width: 720px;
    height: 675px;
    transform: none;
  }
  .flow-canvas { top: 0; left: 0; width: 720px; height: 675px; }
  .energy-node { display: block; }
  .node-circle {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  /* Build 36 TV: Grid TL / Solar TR / Battery BR; size 259; pushed to the
     corner of every limit the canvas actually has. Those limits are measured,
     not guessed, and they are tight: Home's visible bezel is 658px across on a
     768px-tall screen, so a satellite centre has to be at least 470px from
     Home's centre just to avoid overlapping it. Horizontally the 30px kW
     readout pins the centres at x=54 and x=970 — one pixel further out and
     "0.0 kW" loses a digit. Vertically the 12 o'clock marker indent pins them
     at y>=144 and y<=624 (bezel radius 143.9). Home stays dead centre because
     it is already the circumcentre of those three corners, which maximises the
     smallest gap. That yields 46.5px on all three legs: the top two gain a
     little, the battery leg gives some back, and all three bezels are now
     fully on screen vertically for the first time. The canvas is saturated —
     conduit run length comes from the router's swing, not from the gap. */
  .node-grid,
  .node-solar {
    width: 259px;
    height: 259px;
    border-radius: 50%;
  }
  /* Composition origin is (152, 0); satellite half is 129.5. */
  .node-grid { left: -227.5px; top: 15.5px; }   /* centre (54, 145) */
  .node-solar { left: 688.5px; top: 15.5px; }   /* centre (970, 145) */
  .node-home {
    left: 50.5px;
    top: 74.5px;
    width: 619px;
    height: 619px;
    border-radius: 50%;
    transform: none;
  }
  .node-battery {
    left: 688.5px;
    top: 493.5px; /* centre (970, 623) — bezel now fully on screen */
    width: 259px;
    height: 259px;
    border-radius: 50%;
    transform: none;
  }
  .node-meter { border-width: 4px; }
  .battery-soc-ring {
    top: 4px;
    left: 4px;
    width: 251px;
    height: 251px;
  }
  .home-bezel-wrap { width: 619px; height: 619px; }
  .home-bezel { top: 0; left: 0; width: 619px; height: 619px; }
  .home-outer-ring { left: -25px; top: -25px; width: 669px; height: 669px; }
  .home-overlay {
    left: 68px;
    top: 68px;
    right: auto;
    bottom: auto;
    width: 483px;
    height: 483px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 68px;
    text-align: center;
  }

  .energy-node h3 { font-size: 10px; }
  .node-power { font-size: 24px; }
  .node-state { font-size: 8px; }
  .node-source { font-size: 6px; }
  .node-battery .node-power { font-size: 30px; } /* match .node-grid/.node-solar .node-power */
  .node-soc { font-size: 30px; }
  .home-overlay h3 { font-size: 18px; }
  .home-overlay .node-power { font-size: 53px; }
  .home-overlay .node-state { font-size: 12px; }
  .node-grid .node-icon,
  .node-solar .node-icon { width: 26%; height: 26%; }
  .node-grid h3,
  .node-solar h3 { font-size: 11px; }
  .node-grid .node-power,
  .node-solar .node-power { font-size: 30px; }
  .node-grid .node-state,
  .node-solar .node-state { font-size: 9px; }
  .node-grid .node-source,
  .node-solar .node-source { font-size: 7px; }

  /* Daily Totals takes the clear band on the right between the Solar and
     Battery bezels. */
  .daily-panel {
    left: auto;
    right: 6px;
    top: 294px;
    width: 140px;
    height: 180px;
    padding: 9px;
  }
  .daily-panel h2 { margin-bottom: 7px; font-size: 10px; }
  .daily-panel li {
    display: flex;
    min-height: 40px;
    align-items: center;
  }
  .daily-icon { width: 33px; height: 33px; margin-right: 8px; }
  .daily-panel small { font-size: 8px; }
  .daily-panel strong { font-size: 16px; }

  .device-status-panel { left: 270px; top: 0; width: 400px; padding: 2px 10px; }
  .device-status-panel h2 { margin-bottom: 2px; font-size: 9px; }
  .device-status-panel ul { display: flex; align-items: stretch; }
  .device-status-panel .status-device { width: 20%; min-height: 27px; padding: 0 4px; border-left: 1px solid var(--line); gap: 4px; }
  .device-status-panel .status-device:first-child { border-left: 0; }
  .device-status-panel .status-device > svg { width: 12px; height: 12px; }
  .device-status-panel .status-device strong { font-size: 7px; }
  .status-device small { font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .conduit-chevrons { display: none; }
  * { scroll-behavior: auto !important; }
}