/* Seasonal diagram only: shared topology, vector pipes, DOM telemetry anchors. */
.monitor-system-grid.has-drawing-overview { grid-template-columns: minmax(0, 1fr); }
.monitor-system-viewer { container-type: inline-size; }
.app-shell[data-active-page="monitor"] .monitor-system-viewer > .monitor-system-switcher { display: flex; min-height: 64px; padding: 8px 16px; justify-content: space-between; box-sizing: border-box; }
.monitor-system-switcher .monitor-system-title { display: flex; align-items: center; gap: 10px; margin: 0; flex: 0 0 auto; }
.monitor-system-title > img { display: block; width: 32px; height: 32px; object-fit: contain; }
#monitorSystemViewer .monitor-system-title-text { display: inline; color: inherit; font: inherit; letter-spacing: inherit; }
.monitor-system-view-tabs { display: flex; gap: 8px; min-width: 0; }
.monitor-system-view-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 44px; padding: 8px 14px; border: 1px solid var(--home-line); border-radius: 6px; background: transparent; color: var(--home-text-strong); font: inherit; font-size: 14px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.monitor-system-view-tabs button img { flex: 0 0 24px; width: 24px; height: 24px; object-fit: contain; }
.monitor-system-view-tabs button[aria-selected="true"] { border-color: var(--home-line-strong); background: #176b66; color: #fff; }
.monitor-system-view-tabs button:hover { background: #12564f; color: #fff; }
.monitor-system-view-tabs button:focus-visible { outline: 2px solid #9bf1df; outline-offset: 2px; }
/* The frame alone owns height. Loading, refresh and either panel cannot resize it. */
.monitor-system-view-frame { position: relative; width: 100%; height: clamp(560px, 68vh, 1440px); min-width: 0; overflow: hidden; }
@supports (height: 1cqw) { .monitor-system-view-frame { height: clamp(560px, calc(50cqw + 104px), 1440px); } }
.monitor-system-viewer .monitor-system-view-panel { position: absolute; inset: 0; min-width: 0; min-height: 0; overflow: hidden; }
.monitor-system-viewer .monitor-system-view-panel[hidden] { display: none !important; }
.monitor-system-view-panel:focus-visible { outline: 2px solid #8ee3d1; outline-offset: -2px; }
.app-shell[data-active-page="monitor"] .monitor-system-viewer .monitor-system-stage { height: 100%; min-height: 0; }
.app-shell[data-active-page="monitor"] .monitor-system-viewer .monitor-system-stage.monitor-system-2d { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.monitor-system-viewer .monitor-drawing-controls, .monitor-system-viewer .monitor-drawing-scroll-hint { flex: 0 0 auto; }
.monitor-system-viewer .monitor-system-diagram-figure { flex: 1 1 0; min-height: 0; }
.monitor-system-viewer .monitor-drawing-viewport { height: 100%; overflow: hidden; }
.monitor-system-viewer .monitor-system-3d { overflow: hidden; }
.monitor-system-viewer .monitor-system-3d > plant-twin-3d { height: 100%; min-height: 0; }
.monitor-system-viewer .monitor-system-3d > plant-twin-3d > canvas { display: block; width: 100%; height: 100%; }
.monitor-system-viewer .monitor-system-3d .monitor-twin-view-switch { position: absolute; z-index: 5; top: 12px; right: 12px; width: auto; max-width: calc(100% - 24px); display: flex; flex-wrap: nowrap; gap: 6px; }
.monitor-twin-view-switch > button { flex: 1 0 auto; min-height: 44px !important; white-space: nowrap; }
.monitor-twin-view-switch > button:focus-visible { outline: 2px solid #9bf1df; outline-offset: 2px; }
/* In compact frames, two nearby model anchors cannot hold two readable state tags. */
@container (max-width: 760px) {
  .monitor-system-viewer .monitor-system-3d .monitor-twin-view-switch { width: calc(100% - 24px); }
  .monitor-system-viewer .monitor-twin-view-switch > button { padding: 0 8px; font-size: 13px; }
  #monitorTwinTelemetry .twin-machine-state-tag { top: 72px; left: 12px; transform: none; font-size: 12px; }
  #monitor3dMcc2Card .twin-machine-state-tag { left: auto; right: 12px; }
  #monitorTwinTelemetry .twin-machine-state-tag::after { display: none; }
  #monitorTwinTelemetry .twin-machine-name { display: inline; }
  #monitorTwinTelemetry .twin-equipment-state { font-size: 11px; }
  #monitorTwinTelemetry[data-view="tank"] .twin-storage-state-tag { top: 72px; left: 12px; transform: none; max-width: calc(100% - 24px); }
  #monitorTwinTelemetry[data-view="tank"] .twin-storage-state-tag::after { display: none; }
  /* Keep all eight machine-room readings readable when pipe anchors are too close. */
  #monitorTwinTelemetry[data-view="plant"] .twin-chiller-telemetry { inset: auto; bottom: 76px; left: 12px; width: calc(50% - 18px); display: flex; flex-direction: column; gap: 4px; }
  #monitorTwinTelemetry[data-view="plant"] #monitor3dMcc2Card { left: auto; right: 12px; }
  #monitorTwinTelemetry[data-view="plant"] .twin-machine-state-tag { position: static; justify-content: center; transform: none; }
  #monitorTwinTelemetry[data-view="plant"] .twin-pipe-reading { position: static; display: flex; justify-content: space-between; transform: none; margin: 0; min-height: 25px; font-size: 11px; }
  #monitorTwinTelemetry[data-view="plant"] .twin-pipe-reading strong { font-size: 13px; }
  #monitorTwinTelemetry[data-view="plant"] .twin-pipe-reading::after { display: none; }
}
@media (max-width: 620px) {
  .app-shell[data-active-page="monitor"] .monitor-system-viewer > .monitor-system-switcher { padding: 8px; }
  .monitor-system-switcher .monitor-system-title { display: flex; margin-right: 8px; }
  .monitor-system-title-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .monitor-system-view-tabs { flex: 1; width: auto; }
  .monitor-system-view-tabs button { flex: 1 1 0; padding: 6px; gap: 4px; font-size: 12px; }
  .monitor-system-view-tabs button img { flex-basis: 20px; width: 20px; height: 20px; }
}
.app-shell[data-active-page="monitor"] .monitor-system-stage.monitor-system-2d { height: auto; min-height: 0; padding: 0; display: block; color: #183c47; background: #fff; }
.monitor-drawing-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #d8e4e8; background: #f4f8fa; }
.monitor-drawing-controls button { padding: 8px 15px; min-height: 44px; color: #375b68; border: 1px solid #bccfd6; background: #fff; border-radius: 6px; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
.monitor-drawing-controls button[aria-pressed="true"] { color: #fff; background: #176784; border-color: #176784; }
[data-drawing-view="heating"] .monitor-drawing-controls button[aria-pressed="true"] { background: #9c422e; border-color: #9c422e; }
.monitor-drawing-controls button:hover { border-color: #176784; }
.monitor-drawing-controls button:focus-visible { outline: 2px solid #176784; outline-offset: 3px; }
.monitor-system-2d .monitor-system-diagram-figure { position: relative; inset: auto; width: 100%; height: auto; margin: 0; background: #fff; }
.monitor-system-2d .twin-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.monitor-drawing-viewport { width: 100%; overflow: hidden; }
.monitor-system-2d ::selection { color: #123e50; background: #c7e5ef; }
.monitor-drawing-viewport:focus-visible { outline: 2px solid #176784; outline-offset: -2px; }
.monitor-drawing-canvas { position: relative; width: 100%; min-width: 0; aspect-ratio: 2 / 1; }
.monitor-system-2d[data-drawing-layout-bound="true"] .monitor-drawing-viewport { padding: 12px; box-sizing: border-box; background: #fff; }
.monitor-system-2d[data-drawing-layout-bound="true"] .monitor-drawing-surface { position: relative; margin-inline: auto; overflow: hidden; }
.monitor-system-2d[data-drawing-layout-bound="true"] .monitor-drawing-canvas { position: absolute; inset: 0 auto auto 0; width: 1600px; height: 800px; transform: scale(var(--drawing-scale, 1)); transform-origin: top left; }
.monitor-system-2d .monitor-drawing-canvas > img { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 2 / 1; object-fit: fill; filter: none; }
.monitor-system-2d .monitor-drawing-canvas .monitor-system-2d-telemetry { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; min-width: 0; pointer-events: none; }
.monitor-system-2d .monitor-drawing-canvas .monitor-system-2d-card { position: absolute; inset: auto; left: var(--x); top: var(--y); width: var(--w); max-width: none; padding: 8px 12px; margin: 0; box-sizing: border-box; color: #294d59; background: #f3f8fb; border: 1px solid #c6dbe4; border-radius: 12px; box-shadow: none; transform: none; pointer-events: auto; }
.monitor-system-2d .monitor-drawing-canvas .monitor-system-2d-card.is-storage { background: #f1f8f5; border-color: #bfdacd; }
.monitor-system-2d .monitor-system-2d-card header { display: flex; justify-content: space-between; gap: 4px; flex-wrap: wrap; align-items: center; margin: 0 0 7px; padding-bottom: 6px; border-bottom: 1px solid #d8e5eb; }
.monitor-system-2d .monitor-system-2d-card header > strong { color: #183c47; font-size: 15px; white-space: normal; line-height: 1.4; }
.monitor-system-2d .monitor-system-2d-card > div { display: block; margin-top: 0; }
.monitor-system-2d .monitor-system-2d-card .drawing-temperature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 12px; }
.monitor-system-2d .monitor-system-2d-card .drawing-temperature-grid > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1px 4px; color: #3b5965; font-size: 12px; line-height: 1.35; }
.monitor-system-2d .drawing-temperature-grid .drawing-reading-label { grid-column: 1 / -1; }
.monitor-system-2d .monitor-system-2d-card .drawing-temperature-grid b { margin-left: 0; font-size: 22px; line-height: 1.15; }
.monitor-system-2d .monitor-system-2d-card .drawing-storage-readings > span { display: flex; gap: 4px; align-items: baseline; color: #3b5965; font-size: 12px; line-height: 1.5; white-space: nowrap; }
.monitor-system-2d .monitor-system-2d-card b { margin-left: auto; color: #086585; font-size: 18px; font-variant-numeric: tabular-nums; text-shadow: none; }
.monitor-system-2d .monitor-system-2d-card.is-storage b { color: #176a55; font-size: 20px; }
.monitor-system-2d .monitor-system-2d-card small { color: #4b656e; font-size: 11px; }
.monitor-system-2d .monitor-system-2d-card .twin-equipment-state { color: #4b656e; font-size: 12px; white-space: nowrap; padding: 2px 6px; border-radius: 4px; background: #e5eef2; }
.monitor-system-2d .monitor-system-2d-card .twin-equipment-state.is-running,
.monitor-system-2d .monitor-system-2d-card .twin-equipment-state.is-live { background: #deefe5; }
.monitor-system-2d .monitor-system-2d-card .twin-equipment-state.is-stale,
.monitor-system-2d .monitor-system-2d-card .twin-equipment-state.is-delayed { background: #f7ebd6; }
.monitor-system-2d .monitor-system-2d-card .twin-equipment-state.is-fault { background: #f9e4e7; }
.monitor-system-2d .monitor-system-2d-card .is-running,
.monitor-system-2d .monitor-system-2d-card .is-live { color: #16633e; }
.monitor-system-2d .monitor-system-2d-card .is-delayed,
.monitor-system-2d .monitor-system-2d-card .is-stale { color: #845307; }
.monitor-system-2d .monitor-system-2d-card .is-fault { color: #b22b3c; }
.monitor-system-2d .drawing-group-readings { color: #3b5965; font-size: 12px; line-height: 1.35; }
.monitor-system-2d .drawing-group-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 6px; min-height: 22px; white-space: nowrap; }
.monitor-system-2d .drawing-group-row > span:last-child { text-align: right; }
.monitor-system-2d .drawing-group-row + .drawing-group-row { border-top: 1px solid #e0ebef; }
.monitor-system-2d .drawing-group-row b { font-size: 16px; line-height: 1.2; }
.monitor-system-2d .drawing-group-readings + .drawing-group-readings { margin-top: 8px; padding-top: 6px; border-top: 1px solid #d8e4e8; }
.monitor-system-2d .monitor-drawing-canvas #monitor2dHeatPumpCard { padding: 5px 12px; }
.monitor-system-2d #monitor2dHeatPumpCard header { margin-bottom: 4px; }
.monitor-system-2d #monitor2dHeatPumpCard .drawing-group-row { min-height: 20px; }
.monitor-system-2d #monitor2dHeatPumpCard .drawing-group-readings + .drawing-group-readings { margin-top: 4px; padding-top: 4px; }
.monitor-system-2d .drawing-storage-readings { display: grid; gap: 6px; }
.monitor-drawing-footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 10px 12px; color: #4b656e; border-top: 1px solid #d8e4e8; background: #f4f8fa; }
.monitor-drawing-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; }
.monitor-drawing-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.monitor-drawing-legend i { width: 24px; border-top: 3px solid; }
.monitor-drawing-legend .is-supply { color: #126fb1; }
.monitor-drawing-legend .is-return { color: #21818b; }
[data-drawing-view="heating"] .monitor-drawing-legend .is-supply { color: #bd442f; }
[data-drawing-view="heating"] .monitor-drawing-legend .is-return { color: #99741a; }
.monitor-drawing-legend .is-charge { color: #8e5aa8; }
.monitor-drawing-legend .is-inactive { color: #acbbc2; border-top-style: dashed; }
.monitor-drawing-scroll-hint { display: block; padding: 0; color: #4b656e; font-size: 12px; }
.monitor-drawing-live-flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: #075c73; stroke: #fff; stroke-width: 3px; }
@media (min-width: 2000px) { .monitor-drawing-scroll-hint { display: none; } }