.tenant-distribution{max-height:280px;overflow-y:auto}
.focus-button{font-size:10px;padding:8px 10px;background:transparent;color:#9eb8c9}
.workspace-focus .hero{display:none}
.building-panel{position:sticky;top:18px}
@media(max-width:850px){.building-panel{position:static}}
@media(max-width:540px){.focus-button{font-size:8px;max-width:75px;padding:6px}.top-actions{gap:7px}}
@media(max-width:540px){.building-section{overflow-x:auto}.building-section svg{min-width:640px;max-height:none}.building-panel{min-width:0}}

/* Powder blue / light steel blue facilities palette, with restrained orange. */
:root{color-scheme:light;--bg:#eaf1f5;--panel:#f8fafb;--border:#c6d3dc;--muted:#647b8d;--text:#273d50;--teal:#367b91;--blue:#5d84a3;--amber:#d8843e;--red:#b85c50}
body{background:linear-gradient(150deg,#edf4f8 0%,#e4edf3 62%,#edf2f5 100%);color:var(--text)}
.topbar{background:#d9e5ed;border-bottom-color:#bacbd7;box-shadow:0 2px 9px #31485c0a}
.brand{color:#284355}.brand small{color:#506e83}.brand-icon{background:#bed3e0;color:#2d728d}
.top-actions{gap:13px}.offline{color:#557a77}.offline i,.clock-dot{background:#418e8a}
.icon-button{color:#405e73}.icon-button:hover{background:#d0e0e9;border-color:#d4864c}
.fullscreen-button[aria-pressed=true]{color:#be6e33;background:#f7e8da;border-color:#d58b54}
.fullscreen-button[aria-pressed=true]{transform:rotate(180deg)}
button,input,select,textarea{color:#334c60;border-color:#c5d2dc;background:#f1f5f8}
button:hover{background:#e1ebf1;border-color:#d3864c}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline-color:#d6803d}
.focus-button{color:#436278}.focus-button:hover{background:#e1eaf0;color:#28485b}
.hero{color:#304b60}.hero-copy p{color:#637e91}.divider{color:#9aabb8}
.educational-note{color:#5e7688}.educational-note>span{color:#b26732;font-weight:700}
.tag{color:#526d82;background:#f3f6f8;border-color:#c9d6df}.tag.simulation{color:#33787d;background:#dfefec;border-color:#b7d7d1}
.phase-label{color:#748999}.tabs button{color:#607b8e}.tabs button[aria-selected=true]{color:#26768c;border-bottom-color:#d98b4e}
.tabs b{background:#f4e4d5;color:#a55d2d}
.clock-bar strong{color:#354f64}.clock-bar small{color:#657f91}
.clock-controls .icon-button{background:#edf3f7}.play-button{background:#dcece8;color:#2f746f;border-color:#b9d5cd}.play-button:hover{background:#cfe4dd}
.speed-label{color:#5d7587}
.kpi{background:linear-gradient(125deg,#f6f9fb 0%,#eaf1f6 100%);border-color:#c9d5de;box-shadow:0 5px 15px #354b5b0a}
.kpi>div{color:#587183}.kpi-symbol{color:#7199ad}.kpi:first-child strong{color:#2c7889}.kpi small{color:#6b8090}.kpi small span{color:#536b7e}
.scope-bar{color:#587286}.text-button{color:#28778b}.text-button:hover{color:#a75f30}
.panel{background:#f8fafb;border-color:#c8d5de;box-shadow:0 5px 17px #3049600a}
.panel-heading h2{color:#2a4256}.panel-heading .eyebrow{color:#698093}
.diagram-caption{color:#5e7789}.diagram-legend{border-color:#d7e0e6;color:#587183}
.module-panel{background:#eef3f6}.module-title h3{color:#2e485c}.module-title span{color:#a76738}.module-hint{color:#536c7e}
.detail-grid dt{color:#677f90}.detail-grid dd{color:#334d62}
.segmented{background:#e7eef3;border-color:#c9d6df}.segmented button{color:#5c7486}
.segmented button.active{background:#cbdde8;color:#285a73;box-shadow:0 1px 3px #2d46571f}
.chart-period{color:#5d778a}.axis-label{fill:#587083}.grid-line{stroke:#d9e2e8}
.chart-footnote{color:#617a8c}.dist-controls .field{color:#60788a}
.distribution-row button{color:#39556a}.distribution-row button:hover{color:#b66934}
.integrity-note{background:#e5f0ed;border-color:#cbdcd6;color:#446f69}
.section-description{color:#536d80}.table-toolbar input{background:#f5f8fa}
th{background:#e6edf2;color:#4d687d}th,td{border-color:#d7e0e6}td{color:#344d60}
tr.selected,tr:hover{background:#e7f0f3}td button{color:#31788e}
.proposal-badge{color:#a56130;background:#f5e8dc}
.profile-info{color:#5c7588}.profile-info strong{color:#344f62}
.extension-note{border-color:#c9d5de;color:#5c7486}.extension-note strong{color:#3d596f}
.case-description,.warning-meta{color:#587184}.pipe-diagram{background:#edf3f6;border-color:#cbd7df}
.sensor-legend{color:#557184}.balance-cell{background:#eef3f6;border-color:#ccd8e0}.balance-cell span{color:#60798b}.balance-cell small{color:#6d8292}.balance-cell strong{color:#314c61}
.alarm-banner{background:#fbefdf;border-color:#e7caab;color:#965e2f}.alarm-banner.normal{background:#e5f0ec;border-color:#bfd6ca;color:#426d63}
.warning-card{background:#f2f6f8;border-color:#d1dce3}.warning-card .severity{background:#f2e0db;color:#a34c40}.warning-card .severity.low{background:#f4eddf;color:#896a38}.warning-card strong{color:#304a5e}.warning-card small{color:#61798b}
.warning-card:hover{background:#e7eef2}.warning-card .arrow{color:#4e7b8c}
.threshold-control,.minute-control{color:#577184}.empty-state{color:#5c7587}
.toast{background:#e2eee9;border-color:#afcfc3;color:#356f65;box-shadow:0 8px 25px #354d5a20}
footer{border-color:#ccd8e0;color:#687f90}footer span:first-child{color:#536e81}
.building-selector-label{display:flex;flex-direction:column;gap:6px;max-width:390px;font-size:9px;letter-spacing:1.2px;color:#a76839;font-weight:700;margin:14px 0 2px}
.building-selector-label select{font-size:13px;letter-spacing:0;color:#344f63;background:#f7f9fa;border-color:#c3d1db;max-width:390px}
.network-disclaimer{padding:0 18px 12px;color:#60788a;font-size:9px;line-height:1.55}
.diagram-controls{display:grid;grid-template-columns:1fr auto;gap:13px;align-items:center;padding:8px 18px 13px;border-bottom:1px solid #d8e1e6}
.network-legend{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.network-option{display:inline-flex;align-items:center;gap:5px;border:1px solid #cad7df;border-radius:5px;padding:6px 8px;background:#f1f5f7;color:#405c70;font-size:10px;white-space:nowrap;cursor:pointer}
.network-option:hover{border-color:#d88a51;background:#faf2ea}
.network-option input{width:13px;height:13px;padding:0;margin:0;accent-color:#3d8294}
.network-option i,.legend-water{display:inline-block;width:16px;height:4px;border-radius:2px;background:#3286bb}
.network-option.hot i{background:#cf514b}.network-option.sewage i{background:#4d5661}
.meter-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.meter-controls>span{font-size:8px;color:#668093;letter-spacing:.8px;font-weight:700}
.meter-controls .segmented{padding:2px}.meter-controls .segmented button{font-size:9px;padding:6px 8px}
.accumulation-control{display:flex;align-items:center;gap:5px;color:#5d7485;font-size:9px;white-space:nowrap}
.accumulation-control input{width:92px;padding:0;accent-color:#d4803f}.accumulation-control output{min-width:48px;color:#375d73;font-variant-numeric:tabular-nums}
.accumulation-control.disabled{opacity:.46}
.meter-disclaimer{padding:9px 18px 13px;color:#60788a;font-size:9px;line-height:1.55}
.building-section [role=button]{cursor:pointer}.building-section [role=button]:hover .module-rect{stroke:#cf793a;stroke-width:2;fill-opacity:.65}
.building-section .pipe-route:hover{stroke:#ef9a50;stroke-width:7}.building-section .meter-dot{pointer-events:all}
.building-section svg{overflow:visible}
@media(max-width:1000px){.diagram-controls{grid-template-columns:1fr}.meter-controls{justify-content:flex-start}}
@media(max-width:540px){.diagram-controls{padding:8px 12px 11px;gap:8px}.network-legend{gap:5px}.network-option{font-size:9px;padding:6px}.meter-controls{gap:5px}.meter-controls>span{width:100%}.accumulation-control{flex:1}.accumulation-control input{flex:1}.building-selector-label{font-size:8px}.building-selector-label select{font-size:12px}}
.photo-caption{color:#536c7d;background:linear-gradient(transparent,#f2f5f6ee)}
.photo-caption span{color:#647d8e}
.pump-legend{display:flex;flex-wrap:wrap;gap:9px 18px;padding:0 18px 4px;color:#5d7587;font-size:10px}
.pump-legend span{display:inline-flex;align-items:center;gap:6px}
.pump-legend i{display:inline-block;width:19px;height:0;border-top:3px solid #3784a0}
.pump-legend .energy-key{border-color:#d27d3e}.pump-legend .history-key{border-color:#718394}.pump-legend .forecast-key{border-color:#718394;border-top-style:dashed}.pump-legend .optimal-key{border-color:#3784a0;border-top-style:dashed}.pump-legend .current-key{border-color:#557f65}
.pump-statline{display:flex;flex-wrap:wrap;gap:10px;padding:0 18px 4px}
.pump-statline span{flex:1 1 130px;display:flex;flex-direction:column;gap:4px;padding:9px 11px;border:1px solid #d6e0e6;border-radius:6px;background:#f1f5f7;color:#657b8b;font-size:9px}
.pump-statline strong{color:#355267;font-size:13px}
.pump-chart-svg{min-width:560px}
@media(max-width:600px){.pump-legend{gap:7px 12px;padding:0 12px 3px}.pump-statline{padding:0 12px 4px}.pump-statline span{flex-basis:calc(50% - 8px)}}
.brand-logo{display:block;width:48px;height:48px;object-fit:contain}
.topbar{position:relative}
.platform-note{margin:0 auto;color:#486579;font-size:12px;font-weight:500;letter-spacing:.15px;text-align:center}
.building-photo{width:100%;max-width:540px;height:auto;aspect-ratio:4/3;justify-self:end}
.building-photo img{display:block}
.building-section .floor-water-sensor{cursor:pointer}
.building-section .floor-water-sensor:hover circle{stroke:#dc803e;stroke-width:3}
@media(max-width:850px){.platform-note{position:absolute;left:50%;transform:translateX(-50%);max-width:32%;font-size:10px}.brand-logo{width:42px;height:42px}.building-photo{height:auto;max-width:100%;aspect-ratio:4/3}}
@media(max-width:540px){.platform-note{position:static;transform:none;max-width:110px;font-size:8px;line-height:1.25}.building-photo{height:auto;aspect-ratio:4/3}.brand-logo{width:34px;height:34px}.brand{gap:7px}}
.hero-tags .monitored-off{color:#728391;background:#eef1f3;border-color:#d1d9de}
.educational-note{display:flex;flex-direction:column;gap:5px;padding:15px 0 20px}
.educational-note strong{font-size:10px;letter-spacing:1px;color:#b26732}
.educational-note p{font-size:11px;line-height:1.6;color:#5e7688}
.tabs{position:relative;justify-content:center;gap:clamp(20px,4vw,46px)}
.tabs button{font-size:13.2px}
.tabs button span{display:none}
.tabs .phase-label{position:absolute;right:0;top:50%;transform:translateY(-50%);margin:0}
@media(max-width:850px){.tabs{gap:clamp(15px,3vw,26px)}}
@media(max-width:540px){.hero h1 br{display:inline}.educational-note{gap:5px}.educational-note p{font-size:10px}.note-line-break{display:none}.tabs{gap:0;justify-content:space-evenly}.tabs button{font-size:10.8px;padding:14px 4px;letter-spacing:.5px}}
.hero-copy>.educational-note{padding:12px 0 0;max-width:640px}
.clock-step-button{display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;background:linear-gradient(#f9fbfc,#e4edf2);border:1px solid #b9cbd6;color:#45657b;box-shadow:0 2px 4px #324c5c16}
.clock-step-button:hover{background:#fff;border-color:#d58a52;color:#b7652e;transform:translateY(-1px)}
.clock-step-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.play-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:88px;height:38px;border-radius:20px;background:linear-gradient(135deg,#e3f0ec,#cfe4dd);box-shadow:0 2px 4px #324c5c16;font-weight:650}
.play-button:hover{transform:translateY(-1px);border-color:#cf8549}
.play-glyph{width:15px;height:15px;fill:currentColor}
.play-glyph .pause-shape{display:none}
.play-button.is-playing .play-shape{display:none}
.play-button.is-playing .pause-shape{display:block}
.clock-speed-band{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid #c4d2db;border-radius:9px;background:#e6eef3}
.clock-speed-option{min-width:54px;padding:7px 9px;border:1px solid transparent;border-radius:6px;background:transparent;color:#557084;font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.clock-speed-option:hover{background:#f8fafb;border-color:#d2dce2}
.clock-speed-option[aria-pressed=true]{background:#fff;border-color:#d58a52;color:#a65d2d;box-shadow:0 1px 3px #354b5b22;font-weight:700}
/* Chart titles carry the context; suppress the small eyebrow above them. */
#workspace .workspace-stack>.panel:first-child .panel-heading .eyebrow{display:none}
.pump-heading-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.curve-sensor-control{display:flex;align-items:center;gap:7px;color:#708696;font-size:9px;letter-spacing:.45px}
.curve-sensor-control select{font-size:11px;padding:7px 9px}
.pump-display-switch button{font-size:10px;white-space:nowrap}
.pump-stacked-chart{display:flex;flex-direction:column;gap:0}
.pump-stacked-chart .pump-chart-svg{width:100%;display:block}
.pump-legend .twelve-key{border-color:#ad6d3f;border-top-style:dashed}
.pump-legend .eighteen-key{border-color:#bd5c50;border-top-style:dotted}
@media(max-width:700px){.pump-heading-actions{justify-content:flex-start}.pump-heading-actions .tag{display:none}.pump-display-switch{max-width:100%;overflow:auto}}
@media(max-width:540px){.clock-step-button{width:34px;height:34px}.play-button{height:34px}.clock-speed-band{width:100%;justify-content:stretch}.clock-speed-option{flex:1;min-width:0;padding:7px 4px}.clock-controls input{max-width:200px}}

.pump-efficiency-statline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;padding:0 18px 6px}
.pump-efficiency-statline span{min-width:0;padding:7px 8px;font-size:8px;line-height:1.25}
.pump-efficiency-statline strong{font-size:11px;line-height:1.25;overflow-wrap:anywhere}
@media(max-width:820px){.pump-efficiency-statline{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.pump-efficiency-statline{grid-template-columns:repeat(2,minmax(0,1fr));padding-left:12px;padding-right:12px}}

.diagram-view-switch{padding:3px}.diagram-view-switch button{font-size:9px;padding:6px 9px;white-space:nowrap}.building-svg-view{padding:0 8px 10px}.building-svg-view img{display:block;width:100%;height:auto}
@media(max-width:520px){.diagram-view-switch button{padding:6px 7px;font-size:8px}}

/* Larger tagline and prominent clock strip above the primary tabs. */
.platform-note{font-size:24px;line-height:1.3}
.clock-bar{width:100%;min-height:70px;margin:20px 0 12px;padding:13px 20px;border:1px solid #34495b;border-radius:18px;background:#26394b;box-shadow:0 6px 18px #26394b24;color:#f0f5f8}
.clock-bar strong{color:#f0f5f8}
.clock-bar small{color:#b1c2ce}
.clock-bar .clock-dot{background:#61c9b8;box-shadow:0 0 0 4px #61c9b822}
.clock-bar .clock-controls input{background:#edf3f7;color:#334c60;border-color:#75899a}
.clock-bar .clock-speed-band{background:#1a2b3a;border-color:#566b7c}
.clock-bar .clock-speed-option{color:#d2dce3}
.clock-bar .clock-speed-option:hover{background:#344c60;border-color:#70889a}
.clock-bar .clock-speed-option[aria-pressed=true]{background:#f4f7f9;border-color:#dc9258;color:#a65d2d}
.clock-bar .clock-step-button{background:#344d61;border-color:#587286;color:#f0f5f8;box-shadow:none}
.clock-bar .clock-step-button:hover{background:#466176}
.clock-bar .play-button{background:#246a67;border-color:#4b9a8c;color:#f0fffc;box-shadow:none}
.clock-bar .play-button:hover{background:#2c7b76}
@media(max-width:700px){.clock-bar{align-items:flex-start;flex-direction:column;gap:12px}.clock-bar .clock-controls{width:100%;flex-wrap:wrap}.clock-bar .clock-controls input{flex:1;min-width:190px}.platform-note{font-size:clamp(13px,3vw,18px)}}
@media(max-width:540px){.clock-bar{padding:12px;border-radius:14px;margin:14px 0 10px}.clock-bar .clock-controls{gap:5px}.clock-bar .clock-controls input{min-width:150px;max-width:none;flex:1}.clock-bar .clock-speed-band{width:100%}}

#building-network-svg [data-module-id]{cursor:pointer}
#building-network-svg [data-module-id]:focus{fill:#d6803d!important;outline:none}
/* Compact KPI cards and tab descriptions align above their corresponding panels. */
.overview-control-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:19px;align-items:stretch;margin:4px 0 0}
.overview-control-grid>.kpis{min-width:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.overview-control-grid .kpi{min-width:0;min-height:116px;padding:11px 12px;display:flex;flex-direction:column;justify-content:center}
.overview-control-grid .kpi>div{gap:3px;font-size:8px;line-height:1.3;letter-spacing:.55px}
.overview-control-grid .kpi-symbol{font-size:15px}
.overview-control-grid .kpi strong{font-size:25px;line-height:1;margin:8px 0 6px;letter-spacing:-.5px}
.overview-control-grid .kpi small{font-size:9px;line-height:1.35}
.tab-control-panel{min-width:0;min-height:116px;border:1px solid #c3d2dc;border-radius:10px;overflow:hidden;background:#dce8ef;display:flex;flex-direction:column}
.tab-control-panel .tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;flex:none;border:0;border-bottom:1px solid #c3d2dc}
.tab-control-panel .tabs button{min-width:0;padding:13px 5px 12px;border:0;border-right:1px solid #c3d2dc;border-bottom:2px solid transparent;font-size:11px;letter-spacing:.55px;color:#547084;white-space:nowrap}
.tab-control-panel .tabs button:last-of-type{border-right:0}
.tab-control-panel .tabs button[aria-selected=true]{color:#236d83;background:#eaf2f6;border-bottom-color:#d98b4e}
.tab-control-panel .tabs b{font-size:8px}
.tab-control-panel .phase-label{display:none}
.tab-description{flex:1;min-height:64px;padding:12px 17px;display:flex;align-items:center;color:#536f83;font-size:12px;line-height:1.55}
@media(max-width:1000px){.overview-control-grid{grid-template-columns:minmax(0,1fr)}.main-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:540px){.overview-control-grid{gap:11px}.overview-control-grid .kpis{gap:5px}.overview-control-grid .kpi{min-height:102px;padding:8px 7px}.overview-control-grid .kpi>div{font-size:7px}.overview-control-grid .kpi strong{font-size:20px}.overview-control-grid .kpi small{font-size:8px}.tab-control-panel .tabs button{font-size:9px;padding:11px 2px;letter-spacing:.2px}.tab-description{min-height:55px;padding:10px 12px;font-size:11px}}
/* Keep the diagram panels close to the compact counters and tab selector. */
.main-grid{margin-top:8px}

.tab-control-panel .tabs button:last-of-type{font-size:10px;letter-spacing:.25px}
@media(max-width:540px){.tab-control-panel .tabs button:last-of-type{font-size:8px;letter-spacing:0}}

.tab-control-panel .tabs button:last-of-type{font-size:10px;letter-spacing:.25px}
@media(max-width:540px){.tab-control-panel .tabs button:last-of-type{font-size:8px;letter-spacing:0}}

/* Paired building and selected-meter KPI values. */
.overview-control-grid .kpi{justify-content:space-between;min-height:116px;padding:9px 10px}
.overview-control-grid .kpi-title{display:block;color:#587183;font-size:8px;font-weight:700;letter-spacing:.5px;line-height:1.2}
.overview-control-grid .kpi-pair{display:grid;grid-template-columns:1fr 1fr;gap:5px;min-width:0}
.overview-control-grid .kpi-pair>div{min-width:0}
.overview-control-grid .kpi-pair span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#688195;font-size:8px;line-height:1.2}
.overview-control-grid .kpi-pair strong{display:block;margin:4px 0 0;color:#2c7889;font-size:17px;line-height:1;font-weight:600;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.overview-control-grid .kpi-pair>div+div strong{color:#b96531}
.overview-control-grid .kpi>small{color:#647b8c;font-size:8px;line-height:1.2}
.network-option{font-size:15px;padding:7px 10px;gap:7px}
.network-option input{width:19px;height:19px}
.network-option i{width:24px;height:6px}
#building-network-svg text.st52,#building-network-svg text.st54,#building-network-svg text.st55,#building-network-svg text.st56{font-family:Calibri,Arial,sans-serif!important}
@media(max-width:540px){.overview-control-grid .kpi{min-height:100px;padding:7px 6px}.overview-control-grid .kpi-title{font-size:7px}.overview-control-grid .kpi-pair span{font-size:7px}.overview-control-grid .kpi-pair strong{font-size:14px}.overview-control-grid .kpi>small{font-size:7px}.network-option{font-size:13px;padding:6px 7px}.network-option input{width:16px;height:16px}.network-option i{width:20px;height:5px}}

/* Reduce the building photograph and its frame as one unit. */
.building-photo{transform:scale(.8);transform-origin:right center}
@media(max-width:540px){.building-photo{transform-origin:center center}}


/* Increase KPI text only by 1.3× without changing card geometry. */
.overview-control-grid .kpi-title{font-size:10.4px}
.overview-control-grid .kpi-pair span{font-size:10.4px}
.overview-control-grid .kpi-pair strong{font-size:22.1px}
.overview-control-grid .kpi>small{font-size:10.4px}
@media(max-width:540px){.overview-control-grid .kpi-title{font-size:9.1px}.overview-control-grid .kpi-pair span{font-size:9.1px}.overview-control-grid .kpi-pair strong{font-size:18.2px}.overview-control-grid .kpi>small{font-size:9.1px}}

/* Two aligned KPI rows: whole building and selected module/floor. */
.overview-control-grid .kpi{justify-content:flex-start;gap:7px;min-height:116px;padding:8px 10px}
.overview-control-grid .kpi-title{font-size:10.4px}
.overview-control-grid .kpi-rows{display:grid;gap:5px;width:100%}
.overview-control-grid .kpi-row{display:flex;align-items:baseline;justify-content:space-between;gap:5px;min-width:0}
.overview-control-grid .kpi-row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#536f83;font-size:10.4px;line-height:1.1}
.overview-control-grid .kpi-value{display:flex;align-items:baseline;gap:3px;flex:none;white-space:nowrap}
.overview-control-grid .kpi-value small{font-size:8px;color:#687f90}
.overview-control-grid .kpi-value strong{margin:0;color:#2c7889;font-size:22.1px;line-height:1;font-weight:600;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.overview-control-grid .kpi-row:nth-child(2) .kpi-value strong{color:#b96531}
.diagram-controls{display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:8px 16px 10px}
.meter-controls{justify-content:flex-start;flex-wrap:nowrap;gap:9px}
.network-legend{width:100%;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:5px}
.network-option{font-size:11.25px;padding:4px 6px;gap:4px}
.network-option input{width:14.25px;height:14.25px}
.network-option i{width:18px;height:4.5px;flex:none}
.network-option.rainwater i{background:#4e9b7d}
#building-network-svg .pipe-layer-rainwater{stroke:#4e9b7d!important;stroke-width:4px!important}
#building-network-svg circle[data-floor-sensor]{cursor:help}
#building-network-svg .pipe-layer-hidden{display:none!important}
#building-network-svg text.st39[transform*="translate(334 825.7)"],#building-network-svg text.st39[transform*="translate(181.6 853.8)"],#building-network-svg text.st39[transform*="translate(304.6 853.8)"],#building-network-svg text.st39[transform*="translate(419.3 853.8)"],#building-network-svg text.st39[transform*="translate(543.4 853.8)"]{font-size:10.8px!important}
#building-network-svg text.st56[transform*="854.1"]{font-size:13.2px!important}
#building-network-svg circle[cy="850.3"][r="6.5"]{r:7.8px}
#building-network-svg circle[cx="170.2"][cy="850.3"][r="7"]{r:8.4px}
@media(max-width:1000px){.diagram-controls{display:flex;flex-direction:column}.network-legend{flex-wrap:nowrap}}
@media(max-width:540px){.overview-control-grid .kpi{min-height:100px;padding:7px 6px;gap:6px}.overview-control-grid .kpi-title{font-size:9.1px}.overview-control-grid .kpi-row>span{font-size:9.1px}.overview-control-grid .kpi-value strong{font-size:18.2px}.overview-control-grid .kpi-value small{font-size:7px}.network-legend{gap:2px}.network-option{font-size:9.75px;padding:4px 3px;gap:3px}.network-option input{width:12px;height:12px}.network-option i{width:14px;height:4px}.meter-controls{justify-content:flex-start;flex-wrap:wrap}}

#building-network-svg polygon.st1[points^="170.1 844.7"]{transform:scale(1.2);transform-box:fill-box;transform-origin:center}


/* Keep diagram captions together and layer controls to the right of meter mode. */
.diagram-caption{align-items:center}
.diagram-caption-meta{display:flex;align-items:center;justify-content:flex-end;gap:8px;white-space:nowrap}
.diagram-caption-meta .diagram-label{color:#526e82}
.diagram-caption-meta b{color:#a65d2d;font-size:9px;letter-spacing:.55px}
.diagram-controls{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;padding:7px 14px 9px}
.meter-controls{gap:5px;white-space:nowrap}
.meter-controls .segmented button{font-size:8px;padding:4px 6px}
.accumulation-control{gap:3px;font-size:8px}
.accumulation-control input{width:64px}
.accumulation-control output{min-width:37px;font-size:8px}
.network-legend{justify-content:flex-end;gap:3px}
.network-option{font-size:9.75px;padding:3px 4px;gap:3px}
.network-option input{width:12px;height:12px}
.network-option i{width:14px;height:4px}
@media(max-width:1000px){.diagram-controls{display:grid;grid-template-columns:auto minmax(0,1fr)}.network-legend{justify-content:flex-end}}
@media(max-width:650px){.diagram-controls{grid-template-columns:1fr;gap:6px}.meter-controls{justify-content:flex-start}.network-legend{justify-content:flex-start}}
@media(max-width:540px){.diagram-caption-meta{gap:4px;font-size:7px}.diagram-caption-meta b{font-size:7px}.network-legend{flex-wrap:nowrap}}

/* Rainwater pipe and legend use the diagram's light-blue dashed convention. */
.network-option.rainwater i{background:repeating-linear-gradient(90deg,#b7cfe5 0 4px,transparent 4px 7px);border:1px solid #b7cfe5}
#building-network-svg .pipe-layer-rainwater{stroke:#b7cfe5!important;stroke-width:4px!important;stroke-dasharray:3 3}
#building-network-svg polygon.pipe-layer-rainwater{fill:#b7cfe5!important;stroke:#b7cfe5!important;stroke-dasharray:none}

/* Give each pipe-layer selector an equal share of the legend row. */
.network-legend .network-option{flex:1 1 0;min-width:0;box-sizing:border-box;justify-content:center}


/* Two-line module meter: combined flow above, color-coded illustrative split below. */
#building-network-svg text[data-meter-module]{font-size:7.5px!important}


#building-network-svg text[data-meter-module] tspan.meter-total{font-size:12px!important;font-weight:700}
#building-network-svg text[data-meter-module] tspan.meter-component{font-size:9px!important}

.pump-legend .baseline-key{border-color:#3784a0}
.pump-legend .degradation-key{border-color:#d27d3e;border-top-style:dashed}
.energy-loss-label{font-size:10px;font-weight:700;fill:#a9443d;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}


.management-framework-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.management-frame{min-height:160px}
.management-frame .panel-heading{margin-bottom:8px}
.management-frame .panel-heading h2{font-size:18px}
.management-frame p{margin:0;color:#526d80;font-size:12px;line-height:1.65}
@media(max-width:600px){.management-framework-grid{grid-template-columns:minmax(0,1fr)}}

/* Management concepts are deliberately marked as future work; proposal tools remain separate. */
.management-framework-grid .management-frame{min-height:240px;background:#fff1ef;border:1px dashed #cf665d}
.management-framework-grid .management-frame .panel-heading{margin:0 0 12px 24px}
.management-framework-grid .management-frame p{margin-left:24px;margin-right:20px;color:#754d4a}
.additional-systems-panel{border-color:#c5d5df}
.additional-system-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.additional-system-button{min-height:56px;padding:10px 14px;border:1px solid #b6cbd7;border-radius:8px;background:#f5f9fb;color:#31566e;display:flex;align-items:center;justify-content:flex-start;gap:10px;text-align:left;font:inherit;font-size:13px;font-weight:650;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.additional-system-button:hover{background:#eaf3f7;border-color:#72a9bb;transform:translateY(-1px)}
.additional-system-button.is-selected{background:#e7f4f1;border-color:#409889;color:#236e64}
.system-add-icon{width:24px;height:24px;flex:none;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;font-size:18px;line-height:1}
.systems-note{margin:11px 0 0;color:#657d8e;font-size:11px;line-height:1.5}
.monitoring-data-tools{margin:16px 0;padding:14px 16px;border:1px solid #c7d8e1;border-radius:9px;background:#f3f8fa;display:flex;align-items:center;justify-content:space-between;gap:18px}
.monitoring-data-tools strong{font-size:13px;color:#31566e}
.monitoring-data-tools p{margin:4px 0;color:#627b8d;font-size:11px;line-height:1.45}
.monitoring-data-tools small{color:#438779;font-size:10px}
.monitoring-data-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;flex:none}
@media(max-width:700px){.additional-system-buttons{grid-template-columns:1fr}.monitoring-data-tools{align-items:flex-start;flex-direction:column}.monitoring-data-actions{justify-content:flex-start}}

/* Keep the counter labels left while value/unit pairs align at the right edge. */
.overview-control-grid .kpi-row{justify-content:space-between}
.overview-control-grid .kpi-row:nth-child(2){margin-top:8px}
.overview-control-grid .kpi-value{justify-content:flex-end;text-align:right}
.overview-control-grid .kpi-value small{order:2;text-align:left}
.overview-control-grid .kpi-value strong{order:1;text-align:right}
.management-frame .panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.management-frame .student-extension-tag{flex:none;margin:2px 20px 0 0;padding:5px 8px;border:1px solid #cf665d;border-radius:4px;background:#ffe4e0;color:#b33e37;font-size:9px;font-weight:800;letter-spacing:.8px;line-height:1.2;white-space:nowrap}
@media(max-width:540px){.management-frame .student-extension-tag{margin-right:8px;padding:4px 6px;font-size:7px;letter-spacing:.4px}.management-frame .panel-heading{gap:6px}}

/* Comfortable spacing for Additional Systems copy and extension buttons. */
.additional-systems-panel .panel-heading{padding:20px 28px 14px}
.additional-systems-panel .additional-system-buttons{margin:2px 28px 0;gap:16px}
.additional-systems-panel .additional-system-button{min-height:68px;padding:12px 16px;display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:3px}
.additional-systems-panel .system-add-icon{grid-row:1/3;width:28px;height:28px}
.additional-systems-panel .additional-system-button>span:nth-child(2){align-self:end}
.additional-systems-panel .additional-system-button small{grid-column:2;color:#6b8291;font-size:10px;font-weight:400}
.additional-systems-panel .systems-note{margin:16px 28px 22px;max-width:900px;line-height:1.65}
.system-spec-dialog{max-width:720px;max-height:88vh;overflow:auto;padding:26px 30px;background:#f5f9fb;color:#29445a;border-color:#afc5d2}
.system-spec-dialog::backdrop{background:#132332a6;backdrop-filter:blur(3px)}
.system-spec-dialog .dialog-heading{align-items:flex-start}
.system-spec-dialog .dialog-heading h2{margin:9px 0 0;font-size:22px;color:#29445a}
.system-spec-dialog .student-extension-tag{display:inline-block;padding:5px 8px;border:1px solid #cf665d;border-radius:4px;background:#ffe4e0;color:#b33e37;font-size:9px;font-weight:800;letter-spacing:.8px}
.system-spec-dialog p{color:#536e80}
.system-spec-student-note,.system-spec-code-note{margin:12px 0 18px;padding:12px 14px;border-left:3px solid #d27b4b;background:#fff1e8;color:#5b6872!important;line-height:1.6!important}
.system-spec-student-note strong,.system-spec-code-note strong{color:#9d512d}
.system-spec-guide{margin:0 0 18px;padding:14px 16px;border:1px solid #c8d8e0;border-radius:8px;background:#eaf2f6;color:#425f73;font-size:11px;line-height:1.65}
.system-spec-guide ul{margin:8px 0 0;padding-left:20px}
.system-spec-guide li+li{margin-top:4px}
.system-spec-dialog .field{margin:0 0 12px;color:#405b70;font-size:11px}
.system-spec-dialog .field textarea{width:100%;resize:vertical;min-height:58px;padding:10px 12px;border:1px solid #c2d2dc;border-radius:6px;background:#fff;color:#28445a;font:inherit;font-size:12px;line-height:1.5}
.system-spec-dialog .field textarea:focus{outline:2px solid #8cc5d5;outline-offset:1px}
.system-spec-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:18px}
.system-spec-dialog .icon-button{color:#476478;border-color:#c1d1da;background:#edf3f6}
@media(max-width:600px){.additional-systems-panel .panel-heading{padding:17px 18px 12px}.additional-systems-panel .additional-system-buttons{grid-template-columns:1fr;margin:2px 18px 0;gap:10px}.additional-systems-panel .systems-note{margin:13px 18px 18px}.system-spec-dialog{width:calc(100% - 24px);padding:20px 18px;max-height:92vh}.system-spec-dialog .dialog-heading h2{font-size:19px}.system-spec-actions{flex-wrap:wrap}}

/* Match the KPI spacing in the supplied reference: lower module row, tighter right edge. */
.overview-control-grid .kpi-row:nth-child(2){margin-top:18px}
.overview-control-grid .kpi-value{margin-right:-5px}
@media(max-width:540px){.overview-control-grid .kpi-row:nth-child(2){margin-top:15px}.overview-control-grid .kpi-value{margin-right:-3px}}

/* Keep the student-extension panels visibly warm but much lighter. */
.management-framework-grid .management-frame{background:#fff9f8}
.heat-recovery-symbol-row{display:flex;align-items:center;gap:12px;margin:12px 0;padding:10px 12px;border:1px solid #cbd9e1;border-radius:7px;background:#f8fbfc;color:#526c7e;font-size:10px;line-height:1.5}
.heat-recovery-symbol{width:62px;height:44px;flex:none;fill:none;stroke:#4d5661;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.heat-recovery-symbol-row span{max-width:290px}
@media(max-width:520px){.heat-recovery-symbol-row{align-items:flex-start}.heat-recovery-symbol{width:50px;height:38px}}

/* Extend KPI value alignment closer to the right card boundary. */
.overview-control-grid .kpi-value{margin-right:-10px}
@media(max-width:540px){.overview-control-grid .kpi-value{margin-right:-6px}}

/* Student notes and self-contained learning guides. */
.student-notes-card{margin:14px 0 6px;padding:15px 17px;border:1px solid #c2d5e0;border-radius:9px;background:#edf4f7;box-shadow:0 3px 12px #38596c0c}
.student-notes-card h2{margin:0 0 7px;color:#31566e;font-size:15px}
.student-notes-card p{color:#526f82;font-size:11px;line-height:1.55}
.student-guide-links{display:grid;gap:5px;margin-top:10px}
.student-guide-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 9px;border:1px solid transparent;border-radius:5px;background:transparent;color:#276d86;text-align:left;font-size:10px;line-height:1.35}
.student-guide-link:hover{border-color:#c2d7e0;background:#f8fbfc;color:#a75e31}
.student-guide-link span{flex:none;color:#c06f37;font-size:13px}
.student-guide-dialog{width:min(760px,calc(100% - 32px));max-width:760px;max-height:86vh;overflow:auto;padding:24px 28px;background:#f7fafb;color:#2d485c;border:1px solid #bacbd5;border-radius:12px;box-shadow:0 20px 65px #13233255}
.student-guide-dialog::backdrop{background:#1426359c;backdrop-filter:blur(3px)}
.student-guide-dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #d6e0e5}
.student-guide-dialog-heading h2{margin-top:5px;color:#2e4c62;font-size:21px;line-height:1.3}
.guide-eyebrow{color:#b36535;font-size:9px;font-weight:750;letter-spacing:1.1px}
.student-guide-content{color:#4c6577;font-size:12px;line-height:1.7}
.student-guide-content h3{margin:16px 0 5px;color:#31566e;font-size:13px}
.student-guide-content p{margin:8px 0;color:#4c6577;font-size:12px;line-height:1.7}
.student-guide-content ul,.student-guide-content ol{margin:6px 0;padding-left:22px}
.student-guide-content li+li{margin-top:4px}
.student-guide-content code{padding:1px 4px;border-radius:3px;background:#e8eff3;color:#31566e;font-family:Consolas,monospace;font-size:11px}
.guide-placeholder-note,.guide-design-rule{margin:8px 0 14px!important;padding:11px 13px;border-left:3px solid #d17c45;background:#fff2e8;color:#66574e!important}
.guide-placeholder-note strong,.guide-design-rule strong{color:#9b532c}
.student-guide-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:12px;border-top:1px solid #d6e0e5}
.student-guide-dialog .secondary-button{background:#e8f0f4;border-color:#bed0da;color:#31566e}
@media(max-width:850px){.student-notes-card{margin-top:8px}.student-guide-dialog{max-height:90vh;padding:20px}}
@media(max-width:540px){.student-notes-card{padding:12px 13px}.student-notes-card h2{font-size:14px}.student-guide-dialog{width:calc(100% - 20px);max-height:92vh;padding:17px}.student-guide-dialog-heading h2{font-size:18px}.student-guide-content{font-size:11px}.student-guide-content p{font-size:11px}}
.hero{grid-template-columns:minmax(0,1.08fr) minmax(0,1.15fr);gap:28px;max-width:1540px;margin:0 auto;align-items:center}
.hero-copy{min-width:0}
.hero-visuals{width:100%;max-width:920px;justify-self:center;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:14px}
.hero-visuals>.student-notes-card,.hero-visuals>.building-photo{width:100%;max-width:none;height:auto;aspect-ratio:4/3;align-self:stretch;transform:scale(.8);transform-origin:center}
.hero-visuals>.student-notes-card{margin:0;padding:clamp(14px,1.5vw,22px);display:flex;flex-direction:column;justify-content:center;overflow:auto}
.hero-visuals>.building-photo{justify-self:stretch}
.hero-visuals .student-notes-card h2{font-size:clamp(13px,1.05vw,17px)}
.hero-visuals .student-notes-card p{font-size:clamp(9px,.72vw,12px);line-height:1.55}
.hero-visuals .student-guide-links{gap:3px;margin-top:8px}
.hero-visuals .student-guide-link{padding:6px 7px;font-size:clamp(8px,.68vw,10px)}
.student-notes-card a{color:#276d86;font-weight:700;text-decoration-thickness:1px;text-underline-offset:2px}
.student-notes-card a:hover{color:#a75e31}
@media(max-width:1050px){.hero{grid-template-columns:1fr;gap:12px}.hero-copy{max-width:900px}.hero-visuals{width:min(100%,850px)}}
@media(max-width:560px){.hero-visuals{grid-template-columns:1fr;gap:8px;max-width:420px}.hero-visuals>.student-notes-card,.hero-visuals>.building-photo{aspect-ratio:4/3}.hero-visuals>.student-notes-card{transform:none;min-height:220px}.hero-visuals>.building-photo{transform:scale(.8);transform-origin:center}.hero-visuals .student-notes-card p{font-size:11px}.hero-visuals .student-guide-link{font-size:10px}}

/* Scale only the hero image and student notes card; transforms preserve their layout slots. */
.hero-visuals>.student-notes-card,.hero-visuals>.building-photo{transform:scale(1.12)}
@media(max-width:560px){.hero-visuals>.student-notes-card{transform:scale(1.4)}.hero-visuals>.building-photo{transform:scale(1.12)}}


/* Center the student card on the page horizontally while leaving the photo and layout flow untouched. */
.hero-visuals>.student-notes-card{transform:translateX(-15vw) scale(1.12)}
@media(max-width:1050px){.hero-visuals>.student-notes-card{transform:translateX(-5vw) scale(1.12)}}
@media(max-width:560px){.hero-visuals>.student-notes-card{transform:scale(1.4)}}


/* Small requested rightward nudge, measured against the note card's own width. */
.hero-visuals>.student-notes-card{translate:20% 0}


/* Supplied student guide layout, readable within a vertically scrollable dialog. */
.student-guide-dialog{max-height:86vh;overflow-y:auto;overscroll-behavior:contain}
.student-guide-content h4{margin:13px 0 5px;color:#31566e;font-size:12px}
.student-guide-content blockquote{margin:8px 0;padding:9px 12px;border-left:3px solid #81b8ca;background:#eaf2f5;color:#425d70;font-size:11px;line-height:1.65}
.student-guide-content pre{overflow:auto;margin:8px 0;padding:11px 13px;border-radius:5px;background:#e8eff3;color:#31566e;white-space:pre-wrap}
.guide-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:12px 0;padding:10px;background:#edf4f7;border-radius:6px}
.guide-steps span{display:grid;gap:4px;color:#526f82;font-size:9px;line-height:1.4}
.guide-steps b{color:#276d86;font-size:9px}
.photo-caption a{color:inherit;text-underline-offset:2px}
.student-guide-dialog-actions a.secondary-button{display:inline-flex;align-items:center;text-decoration:none;padding:9px 13px;border:1px solid #bed0da;border-radius:6px;font-size:11px}
@media(max-width:540px){.guide-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-steps span{font-size:10px}}