/* A compact presentation layout; the simulation and its controls are unchanged. */
body.corporate[data-page="energy-demo"] .demo-page-intro{padding:16px 0 12px}
body.corporate[data-page="energy-demo"] .demo-page-intro h1{font-size:clamp(24px,2.4vw,32px)}
body.corporate[data-page="energy-demo"] .demo-page-intro .lead{margin-top:6px;font-size:13px}
body.corporate[data-page="energy-demo"] .demo-frame-section>.wrap{max-width:1120px}
body.corporate[data-page="energy-demo"] .energy-embed{border-radius:18px}
body[data-page="energy-demo"] .energy-page{padding:10px 0}
.energy-page>.shell{width:calc(100% - 24px);max-width:1080px;margin:auto;display:grid;grid-template-columns:176px minmax(0,1fr);gap:8px 12px;--scene-height:clamp(170px,calc(var(--presentation-height,620px) - 270px),340px)}
.energy-heading{grid-column:1/-1;margin:0;min-height:24px}
.energy-clock{font-size:10px;gap:8px}.energy-clock strong{font-size:13px}.demo-badge{font-size:10px;padding:3px 8px}
.energy-stats.energy-stats{grid-column:1;grid-row:2;grid-template-columns:1fr;gap:7px;margin:0;align-content:stretch}
.energy-stats.energy-stats>div{padding:10px 12px;min-height:76px;border-radius:12px}
.energy-stats .stat-icon{display:none}
.energy-stats.energy-stats span{font-size:11px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:3px}
.energy-stats.energy-stats small{display:block;font-size:9px;overflow-wrap:anywhere}
.energy-stats.energy-stats strong{font-size:25px;line-height:1.15;margin:4px 0;white-space:nowrap}
.energy-stats.energy-stats em{display:block;font-size:10px;line-height:1.3;overflow-wrap:anywhere}
.energy-workspace.energy-workspace{grid-column:2;grid-row:2;min-width:0}
.energy-workspace>div{display:flex;flex-direction:column;gap:7px;min-width:0}
.scene-toolbar{order:0;padding:3px;margin:0;border-radius:12px;flex-wrap:wrap;gap:3px;min-height:36px}
.scene-toolbar button{min-height:32px;padding:6px 9px;font-size:11px}
.scene-shell{order:1;border-radius:14px}
.photo-scene.photo-scene,.three-scene{height:var(--scene-height);min-height:0;max-height:none;aspect-ratio:auto}
.energy-scene{width:100%;height:100%}
.scene-bottom{padding:5px 9px;font-size:10px;min-height:22px}
.scene-caption{display:none}.three-hint{bottom:24px;font-size:9px;padding:3px 6px}
.three-controls{top:7px;left:7px;flex-wrap:wrap}.three-controls button{min-height:32px;padding:5px 8px;font-size:10px}
.time-controls{order:2;margin:0;padding:7px 10px;border-radius:12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:center}
.time-control-head{grid-column:1/-1;gap:5px;flex-wrap:wrap}.time-control-head label{font-size:11px}.time-control-head output{font-size:14px;margin-left:6px}
.time-control-head>div{gap:4px;flex-wrap:wrap}.time-controls button{min-height:30px;padding:4px 7px;font-size:10px}
.time-controls .precise-time{width:100px;min-height:30px;padding:3px;font-size:11px}
.time-controls input[type="range"]{grid-column:1;margin:2px 0;min-height:28px}
.v4-day-night{grid-column:2;grid-row:2;margin:0;gap:4px}.v4-day-night button{min-width:56px}
.time-marks{grid-column:1/-1}.time-marks button{padding:0;min-height:22px;font-size:9px}
details.flow-guide{order:3;margin:0;border-radius:12px}.flow-guide-toggle{min-height:30px;padding:6px 12px;font-size:11px}
.energy-note{grid-column:1/-1;margin:0;padding-top:7px;gap:12px;font-size:10px}.energy-note p{font-size:10px;line-height:1.4;margin:0}.energy-note a{font-size:10px;margin:0;flex-shrink:0}
@media(max-width:600px){
 .energy-page>.shell{grid-template-columns:1fr;gap:7px;--scene-height:clamp(90px,calc(var(--presentation-height,620px) - 400px),230px)}
 .energy-heading{min-height:20px}.energy-clock{gap:4px;font-size:9px}.energy-clock strong{font-size:11px}.demo-badge{display:none}
 .energy-stats.energy-stats{grid-column:1;grid-row:2;grid-template-columns:1fr 1fr;gap:5px}
 .energy-stats.energy-stats>div{padding:7px 9px;min-height:76px}.energy-stats.energy-stats strong{font-size:23px;margin:3px 0}.energy-stats.energy-stats em{font-size:10px}.energy-stats.energy-stats span{font-size:10px}
 .energy-workspace.energy-workspace{grid-column:1;grid-row:3}.energy-workspace>div{gap:5px}
 .scene-toolbar button{min-height:36px;font-size:10px;padding:5px 7px}.view-switch{gap:2px;flex-wrap:wrap}
 .time-controls{padding:5px 7px;gap:2px 5px}.time-control-head{gap:3px}.time-control-head label{font-size:10px}.time-control-head output{font-size:12px}
 .time-control-head>div{flex-wrap:wrap;gap:3px}.time-controls button{min-height:32px;padding:4px 6px}.time-controls .precise-time{width:92px;min-height:32px}
 .v4-day-night button{min-width:52px}.scene-bottom{font-size:9px}.energy-note{grid-row:4}.energy-note a{display:inline-block;margin-top:5px}
}

/* Larger house view with a readable, colour-matched energy sidebar. */
body.corporate[data-page="energy-demo"] .demo-frame-section>.wrap{max-width:1440px}
.energy-page>.shell{max-width:1400px;grid-template-columns:190px minmax(0,1fr);gap:12px 16px}
.photo-scene.photo-scene{height:auto;aspect-ratio:1672/941;min-height:0}
.three-scene{height:clamp(350px,56vw,650px)}
.energy-stats.energy-stats{align-content:start;gap:10px}
.energy-stats.energy-stats>div{min-height:106px;padding:14px;border-left:4px solid var(--reading-color,#8391a5)}
.energy-stats.energy-stats>div:nth-child(1){--reading-color:#e6a117}
.energy-stats.energy-stats>div:nth-child(2){--reading-color:#2482ff}
.energy-stats.energy-stats>div:nth-child(3){--reading-color:#30a539}
.energy-stats.energy-stats>div:nth-child(4){--reading-color:#8391a5}
.energy-stats.energy-stats span{font-size:12px}.energy-stats.energy-stats small{font-size:10px}
.energy-stats.energy-stats em{font-size:11px;line-height:1.45}
.scene-toolbar button,.time-controls button{font-size:12px;min-height:36px}
.scene-bottom{font-size:12px;padding:8px 12px;min-height:30px}
.conduit{stroke:#102238;stroke-width:12;opacity:.65}
.cable-core{stroke-width:6;opacity:.95}
.power-flow{stroke-width:4;stroke-dasharray:8 28;animation-duration:4s;filter:none}
.cable.off .conduit{opacity:.15}.cable.off .cable-core{opacity:.2}
.cable.dim{opacity:.2}
.flow-guide-toggle{font-size:12px;min-height:38px}
.time-control-head label{font-size:12px}.time-control-head output{font-size:16px}
@media(max-width:600px){
 .energy-page>.shell{grid-template-columns:1fr;gap:9px}
 .energy-stats.energy-stats{grid-template-columns:1fr 1fr;gap:7px}
 .energy-stats.energy-stats>div{min-height:90px;padding:10px}
 .energy-stats.energy-stats strong{font-size:24px}
 .photo-scene.photo-scene{height:auto;aspect-ratio:1672/941}
 .three-scene{height:340px}
 .scene-bottom{font-size:10px;padding:5px 8px;min-height:23px}
 .scene-toolbar button,.time-controls button{font-size:11px;min-height:36px}
}
@media(prefers-reduced-motion:reduce){.power-flow{animation:none}}

/* Balanced readings track the scene; the EV card is part of total home demand. */
@media(min-width:601px){
 .energy-stats.energy-stats{height:max(570px,var(--reading-height,620px));align-self:start;align-content:stretch;grid-template-rows:repeat(4,minmax(0,1fr)) minmax(140px,1.25fr)}
 .energy-stats.energy-stats>div{min-height:0;display:flex;flex-direction:column;justify-content:center;padding:10px 12px}
}
.energy-stats.energy-stats>div.ev-reading{--reading-color:#2482ff}
.ev-switch{display:flex;align-items:center;gap:7px;font-size:11px;min-height:32px;cursor:pointer;color:#31465e}
.ev-switch input{width:17px;height:17px;accent-color:#0071e3;flex-shrink:0}
.energy-stats.energy-stats .ev-reading em{font-size:10px}
@media(max-width:600px){
 .energy-stats.energy-stats .ev-reading{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;align-items:center}
 .ev-reading>span,.ev-reading>strong,.ev-reading>em{grid-column:1}
 .ev-reading>.ev-switch{grid-column:2;grid-row:1/4}
}