/* Styles are scoped to the live diagram; the CMS owns the page. */
@font-face { font-family: Stratos; src: url('/fonts/Stratos-Light.woff') format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: Stratos; src: url('/fonts/stratosweb-regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: Stratos; src: url('/fonts/Stratos-Medium.woff') format('woff'); font-weight: 500; font-display: swap; }
#power-status, .power-controls {
    color-scheme: dark;
    --bg: #06231f; --panel: #082e2a; --panel-2: #103a34;
    --text: #f3f3f3; --muted: #b7c9c2; --border: #365a50;
    --grid: #b7c9c209; --ok: #daff75; --warn: #f4c978;
    --fault: #f29d94; --off: #719088; --stale: #bfa9db;
    --generator: #ffc76a; --line-default: #487168; --grid-feed: #75d7a5;
    --feed-a: #77cfff; --feed-b: #ff8278; --dc: #c8a0ff;
    --sky-fill: #123e54; --sky-ink: #d8f2ff; --sky-detail: #a8d1e6; --sky-accent: #77cfff;
    --lime-fill: #2b4023; --lime-ink: #f0ffd3; --lime-detail: #c1d5a7; --lime-accent: #c4f452;
    --violet-fill: #382d53; --violet-ink: #f1e7ff; --violet-detail: #cebae8; --violet-accent: #c8a0ff;
    --amber-fill: #49391f; --amber-ink: #fff0cf; --amber-detail: #dec699; --amber-accent: #ffc76a;
    --coral-fill: #4d302c; --coral-ink: #ffe9df; --coral-detail: #e3b7a7; --coral-accent: #ffad8a;
    --zone-x-wash: #77cfff0b; --zone-y-wash: #ffad8a0b;
    --grid-source-fill: #daff75; --grid-source-ink: #082e2a;
    --a-label: #b6e1fa; --b-label: #ffc7c0; --dc-label: #ddc7ff; --generator-label: #ffe3aa;
}
#power-status.light-mode {
    color-scheme: light;
    --bg: #f3f3f3; --panel: #fafcf9; --panel-2: #edf3ee;
    --text: #082e2a; --muted: #49675d; --border: #c5d5cd;
    --grid: #082e2a09; --ok: #39775b; --warn: #9e691c;
    --fault: #af5148; --off: #7b9087; --stale: #78618f;
    --generator: #ae6f08; --line-default: #8da99e; --grid-feed: #298260;
    --feed-a: #2483b5; --feed-b: #c6473d; --dc: #9055c8;
    --sky-fill: #d1ebfb; --sky-ink: #123f59; --sky-detail: #37677e; --sky-accent: #2483b5;
    --lime-fill: #e1f3b2; --lime-ink: #304719; --lime-detail: #536e32; --lime-accent: #759f15;
    --violet-fill: #eadcff; --violet-ink: #4d2e70; --violet-detail: #765791; --violet-accent: #9055c8;
    --amber-fill: #ffe8b6; --amber-ink: #67440c; --amber-detail: #87682f; --amber-accent: #ae6f08;
    --coral-fill: #ffe0cd; --coral-ink: #723b26; --coral-detail: #945a43; --coral-accent: #c66e48;
    --zone-x-wash: #77cfff13; --zone-y-wash: #ffad8a12;
    --grid-source-fill: #0a5140; --grid-source-ink: #daff75;
    --a-label: #b6e1fa; --b-label: #ffc7c0; --dc-label: #ead7ff; --generator-label: #ffe3aa;
}

:is(#power-status, .power-controls) button, :is(#power-status, .power-controls) select { font: inherit; }
:is(#power-status, .power-controls) button { display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);border-radius:3px;background:var(--panel-2);color:var(--text);padding:9px 13px;cursor:pointer;font-weight:400;white-space:nowrap; }
:is(#power-status, .power-controls) button:hover { border-color:var(--muted); }
:is(#power-status, .power-controls) button:focus-visible, :is(#power-status, .power-controls) select:focus-visible { outline:2px solid var(--feed-a);outline-offset:3px; }
:is(#power-status, .power-controls) #editToggle { background:#daff75;border-color:#daff75;color:#082e2a; }
:is(#power-status, .power-controls) .glyph { display:inline-block;width:18px;height:18px;flex-shrink:0;vertical-align:middle; }
:is(#power-status, .power-controls) .badge { display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:400;padding:0;background:none; }
:is(#power-status, .power-controls) .dot { display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0; }
:is(#power-status, .power-controls) .dot.ok { background:var(--ok); }
:is(#power-status, .power-controls) .dot.warning { background:var(--warn); }
:is(#power-status, .power-controls) .dot.fault { background:var(--fault); }
:is(#power-status, .power-controls) .dot.off { background:var(--off); }
:is(#power-status, .power-controls) .dot.stale { background:var(--stale); }
#power-status .edit-help { flex: 0 0 auto; padding: 10px 20px; font-size: 12px; color: var(--muted); background: var(--panel-2); border-bottom: 1px solid var(--border); }
#power-status .diagram-wrap { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; }
#power-status #diagram { position: absolute; left: 0; top: 0; width: 1440px; height: 1520px; transform-origin: top left; overflow: visible; background: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px); background-size: 24px 24px; }
#power-status .zone-box { position: absolute; border: 1px solid var(--border); border-radius: 5px; background: transparent; padding: 10px 16px; pointer-events: none; }
#power-status .zone-title { font-size: 20px; letter-spacing: 3px; font-weight: 400; color: var(--zone-accent); }
#power-status #zoneBoxX { --zone-accent: var(--sky-accent); border-color: var(--sky-accent); background: var(--zone-x-wash); }
#power-status #zoneBoxY { --zone-accent: var(--coral-accent); border-color: var(--coral-accent); background: var(--zone-y-wash); }
#power-status #zoneBoxY .zone-title { text-align: right; }
#power-status svg#links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
#power-status .edge-group { pointer-events: none; }
#power-status .edge-hit { stroke: transparent; stroke-width: 18; fill: none; pointer-events: stroke; cursor: pointer; }
#power-status .edge-path { fill: none; stroke: var(--line-default); stroke-width: 2.5; stroke-opacity: .48; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
#power-status .edge-path.dc-link { stroke-width: 2.5; }
#power-status .layout-level { position: absolute; transform: translate(-100%, -50%); width: 148px; padding-right: 20px; text-align: right; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: 2px; line-height: 1.5; text-transform: uppercase; pointer-events: none; }
#power-status .edge-path[data-flow="idle"] { stroke-opacity: .35; }
#power-status .edge-path.status-stale { stroke-dasharray: 4 6; }
#power-status .edge-group.selected .edge-path, #power-status .edge-group.hover .edge-path { stroke-width: 4; stroke-opacity: .85; }
#power-status .power-flow { pointer-events: none; }
#power-status .packet-trail { fill: currentColor; }
#power-status .packet-head { fill: currentColor; filter: drop-shadow(0 0 3px currentColor); }
#power-status .packet-core { fill: #fff; }
#power-status .edge-label-bg { fill: var(--panel); stroke: var(--border); stroke-width: 1; }
#power-status .edge-label-text { fill: var(--text); font: 400 13px Stratos, Arial, sans-serif; pointer-events: none; user-select: none; }
#power-status .edge-label-text .feed-letter { font-size: 15px; font-weight: 500; }
#power-status .edge-label-leader { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; pointer-events: none; }
#power-status .shared-feed-label { position: absolute; z-index: 4; pointer-events: none; padding: 5px 9px; border: 1px solid var(--border); border-radius: 3px; background: var(--panel); color: var(--text); font-size: 13px; line-height: 1.2; text-align: center; white-space: nowrap; transform: translateX(-50%); }
#power-status .shared-feed-label .feed-letter { display: block; color: #123f59; font-size: 15px; font-weight: 500; margin-bottom: 2px; }
#power-status .edge-bend-handle { fill: var(--feed-a); stroke: var(--panel); stroke-width: 2; cursor: move; pointer-events: all; }
#power-status .node { position: absolute; border-radius: 7px; border: 1px solid var(--node-accent, var(--border)); background: var(--node-fill, var(--panel-2)); color: var(--node-ink, var(--text)); box-shadow: inset 0 4px var(--node-accent, transparent); padding: 10px 14px; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-items: center; cursor: grab; z-index: 3; user-select: none; }
#power-status .node.dragging { cursor: grabbing; }
#power-status .node .icon { grid-row: 1 / span 2; grid-column: 1; display: flex; align-items: center; justify-content: center; color: var(--node-accent, var(--ok)); }
#power-status .node .icon .glyph { width: 36px; height: 36px; }
#power-status .node .title { grid-column: 2; font-size: 17px; font-weight: 400; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#power-status .node .meta { grid-column: 2; color: var(--node-detail, var(--muted)); font-size: 13px; line-height: 1.2; display: flex; flex-wrap: wrap; gap: 3px 8px; font-variant-numeric: tabular-nums; }
#power-status .node .status-pill { position: absolute; right: 10px; bottom: -10px; color: var(--ok); background: var(--panel); border: 1px solid currentColor; border-radius: 3px; padding: 1px 6px; font-size: 11px; font-weight: 400; letter-spacing: .5px; }
#power-status .node .load-pill { position: absolute; left: 10px; bottom: -10px; color: var(--node-accent); background: var(--panel); border: 1px solid currentColor; border-radius: 3px; padding: 1px 6px; font-size: 11px; font-weight: 400; letter-spacing: .5px; }
#power-status .node .load-pill.high-load { color: var(--warn); }
#power-status .node-battery_store { box-shadow: inset 0 4px var(--node-accent), 0 -6px 0 -1px var(--node-fill), 0 -6px 0 0 var(--node-accent), 0 -12px 0 -1px var(--node-fill), 0 -12px 0 0 var(--node-accent); }
#power-status .node.status-warning { border-color: var(--warn); }
#power-status .node.status-fault { border-color: var(--fault); }
#power-status .node.status-stale { border-color: var(--stale); }
#power-status .node.status-off { border-color: var(--off); }
#power-status .node.status-warning .icon, #power-status .node.status-warning .status-pill { color: var(--warn); }
#power-status .node.status-fault .icon, #power-status .node.status-fault .status-pill { color: var(--fault); }
#power-status .node.status-stale .icon, #power-status .node.status-stale .status-pill { color: var(--stale); }
#power-status .node.status-off .status-pill { color: var(--off); }
#power-status .node.selected { outline: 2px solid var(--feed-a); outline-offset: 3px; }
#power-status .node.node-grid-source { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; border: 0; padding: 0; background: transparent; box-shadow: none; }
#power-status .node-grid-source .title { order: -1; font-size: 18px; text-align: center; }
#power-status .node-grid-source .icon .glyph { width: 104px; height: 104px; stroke-width: 1; }
#power-status .node-grid-source .meta, #power-status .node-grid-source .status-pill { display: none; }
#power-status .node-battery_store { --node-accent: var(--violet-accent); --node-fill: var(--violet-fill); --node-ink: var(--violet-ink); --node-detail: var(--violet-detail); }
#power-status .node-inverter { --node-accent: var(--sky-accent); --node-fill: var(--sky-fill); --node-ink: var(--sky-ink); --node-detail: var(--sky-detail); }
#power-status .node-zoneX_ups, #power-status .node-zoneY_ups { --node-accent: var(--lime-accent); --node-fill: var(--lime-fill); --node-ink: var(--lime-ink); --node-detail: var(--lime-detail); }
#power-status .node-zoneX_load { --node-accent: var(--sky-accent); --node-fill: var(--sky-fill); --node-ink: var(--sky-ink); --node-detail: var(--sky-detail); }
#power-status .node-zoneY_load { --node-accent: var(--coral-accent); --node-fill: var(--coral-fill); --node-ink: var(--coral-ink); --node-detail: var(--coral-detail); }
#power-status .node-generator { --node-accent: var(--amber-accent); --node-fill: var(--amber-fill); --node-ink: var(--amber-ink); --node-detail: var(--amber-detail); }
#power-status .node-grid-source .icon { width: 116px; height: 116px; border-radius: 24px; background: var(--grid-source-fill); color: var(--grid-source-ink); }
#power-status .shared-feed-label { background: var(--a-label); border-color: var(--feed-a); color: #123f59; }
#power-status .edge-group[data-edge-id$="_feedB"] .edge-label-bg { fill: var(--b-label); stroke: var(--feed-b); }
#power-status .edge-group[data-edge-id$="_feedB"] .edge-label-text { fill: #712c26; }
#power-status .edge-group[data-edge-id="battery_to_inverter"] .edge-label-bg { fill: var(--dc-label); stroke: var(--dc); }
#power-status .edge-group[data-edge-id="battery_to_inverter"] .edge-label-text { fill: #4d2e70; }
#power-status .edge-group[data-edge-id="generator_to_inverter"] .edge-label-bg { fill: var(--generator-label); stroke: var(--generator); }
#power-status .edge-group[data-edge-id="generator_to_inverter"] .edge-label-text { fill: #67440c; }
#power-status .card { padding: 20px 0; border-bottom: 1px solid var(--border); }
#power-status .card:last-child { border: 0; }
#power-status .card h2 { color: var(--text); font-size: 14px; font-weight: 400; margin: 0 0 12px; }
#power-status .card h2 .glyph { width: 16px; height: 16px; margin-right: 4px; }
#power-status .kv { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; font-size: 12px; }
#power-status .kv div:nth-child(odd) { color: var(--muted); }
#power-status .kv div:nth-child(even) { color: var(--text); text-align: right; overflow-wrap: anywhere; min-width: 0; }
#power-status .small { color: var(--muted); font-size: 12px; line-height: 1.5; }
#power-status .mono { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; }
#power-status .list { display: grid; gap: 13px; }
#power-status .list-item { display: grid; grid-template-columns: 6px 1fr auto; gap: 9px; align-items: center; font-size: 13px; }
#power-status .list-item .name { color: var(--text); }
#power-status .list-item .val { color: var(--muted); font-variant-numeric: tabular-nums; }
#power-status .anchor-select { display: block; width: 100%; padding: 8px; margin-top: 4px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 3px; }
#power-status .hidden { display: none !important; }
:is(#power-status, .power-controls) .layout-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
:is(#power-status, .power-controls) .layout-switch button { border: 0; border-radius: 0; padding: 10px 12px; background: transparent; color: var(--muted); }
:is(#power-status, .power-controls) .layout-switch button[aria-pressed="true"] { background: #b6e1fa; color: #123f59; }
:is(#power-status, .power-controls) .layout-switch button:disabled { cursor: wait; opacity: .65; }
#power-status .alignment-guides { pointer-events: none; }
#power-status .alignment-guides line { stroke: var(--feed-a); stroke-width: 1; stroke-dasharray: 4 4; opacity: .8; vector-effect: non-scaling-stroke; }


/* CMS page framing: site navigation, typography and footer remain owned by the CMS. */
body.page-power #hero-container { background-color:var(--forest,#082e2a); }
.power-page { background:var(--stone,#f3f3f3);color:var(--forest,#082e2a); }
.power-page.power-dark { background:var(--forest,#082e2a);color:#f3f3f3; }
.power-page.power-dark .power-explanation { background:inherit;color:inherit; }
.power-intro { padding:36px 0 24px; }
.power-intro .power-eyebrow { margin:0 0 14px;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--lime); }
.power-intro h1 { margin:0 0 20px;font-size:clamp(42px,5vw,78px);line-height:1.05;letter-spacing:-2px; }
.power-intro-copy { max-width:800px;font-size:clamp(18px,2vw,23px);line-height:1.6;color:#dce8e2; }
.power-intro-copy p:last-child { margin-bottom:0; }
.power-live { padding:0 clamp(16px,3vw,56px) 48px; }
.power-live-shell { max-width:1500px;margin:0 auto; }
.power-explanation { padding:0 0 64px; }
.power-explanation .container { max-width:1100px; }
.power-explanation h2 { font-size:30px;margin-bottom:20px; }
.power-explanation p { max-width:900px;font-size:18px;line-height:1.65; }
#power-status { font:300 14px/1.4 Stratos,'Stratos Light',sans-serif;background:var(--panel);color:var(--text); }
#power-status, #power-status * { box-sizing:border-box; }
.power-heading-row { display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:20px; }
.power-heading-row h1 { margin:0; }
.power-controls { display:flex;flex-direction:column;align-items:flex-end;gap:10px;font:300 14px/1.4 Stratos,'Stratos Light',sans-serif; }
.power-controls .power-actions { display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap; }
#power-status .diagram-wrap { position:relative;width:100%;height:auto;aspect-ratio:1440/1520;overflow:hidden; }
#power-status.portrait-layout .diagram-wrap { aspect-ratio:1000/2120; }
#power-status #diagram { background:none; }
#power-status.is-editing #diagram { background:linear-gradient(to right,var(--grid) 1px,transparent 1px),linear-gradient(to bottom,var(--grid) 1px,transparent 1px);background-size:24px 24px; }
#power-status .power-feed-key { display:flex;justify-content:center;gap:14px 28px;flex-wrap:wrap;padding:20px;border-top:1px solid var(--border);font-size:13px;color:var(--muted); }
#power-status .power-feed-key span { display:inline-flex;align-items:center;gap:9px; }
#power-status .power-feed-key i { display:inline-block;width:24px;height:3px;border-radius:2px; }
#power-status .feed-key-a { background:var(--feed-a); } #power-status .feed-key-b { background:var(--feed-b); } #power-status .feed-key-dc { background:var(--dc); } #power-status .feed-key-generator { background:var(--generator); }
#power-status .power-details { border-top:1px solid var(--border);padding:20px; }
#power-status .power-details>summary { cursor:pointer;font-size:17px;font-weight:400; }
#power-status .power-details-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:18px; }
#power-status .card { background:none;color:inherit;border:0;border-radius:0;padding:0; }
#power-status .card h2 { font-size:18px;margin-bottom:16px; }
#power-status .list-item { font-size:13px; }
@media(max-width:1000px) {
 .power-heading-row { flex-direction:column;align-items:flex-start;gap:16px; }
 .power-controls { align-self:flex-end;max-width:100%; }
}
@media(max-width:760px) {
 .power-intro { padding:24px 0; }
 .power-intro h1 { letter-spacing:-1px; }
 .power-live { padding:0 12px 32px; }
 :is(#power-status, .power-controls) .power-actions button { padding:8px 10px;font-size:12px; }
 #power-status .power-details-grid { grid-template-columns:1fr;gap:24px; }
 #power-status .power-details { padding:18px 14px; }
}
@media(prefers-reduced-motion:reduce) { #power-status .power-flow { display:none; } }

#power-status { --solar:#d9a81b;--building:#77918a; }
#power-status.light-mode { --solar:#a77a00;--building:#55756a; }
#power-status .node-solar_array, #power-status .node-solar_inverter { --node-accent:var(--solar);--node-fill:var(--amber-fill);--node-ink:var(--amber-ink);--node-detail:var(--amber-detail); }
#power-status .node-building_load, #power-status .node-shared_supply { --node-accent:var(--building);--node-fill:var(--panel-2);--node-ink:var(--text);--node-detail:var(--muted); }
#power-status .node.simulated .status-pill { color:var(--solar); }