.page-heading { padding-top: 2rem; }
.eyebrow { text-transform: uppercase; font-size: .75rem; letter-spacing: .09em; color: var(--muted); font-weight: 650; }
.status { display: inline-block; background: #e4ebef; border: 1px solid var(--line); border-radius: 3px; padding: .3rem .65rem; font-size: .8rem; }
.notice { border-left: 4px solid var(--accent); background: #e8eff3; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.notice h2 { margin-bottom: .3rem; }
.notice p:last-child { margin-bottom: 0; }
.simulator-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.configuration-column, .results-column { display: grid; gap: 1.25rem; min-width: 0; }
.field-grid { display: grid; gap: .8rem; }
.pid-settings { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1.25rem; }
.pid-settings .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.playback { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; margin-bottom: .8rem; }
.playback label { margin-left: auto; min-width: 140px; }
.placeholder { padding: 1.5rem 1rem; border: 1px dashed #abbac4; background: #f8fafb; text-align: center; color: var(--muted); }
.placeholder p:last-child { margin-bottom: 0; }
.trend-placeholder { min-height: 145px; display: grid; place-items: center; font-size: .875rem; }
.readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.readings dt { font-size: .8rem; color: var(--muted); }
.readings dd { margin: .2rem 0 0; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.heating { color: var(--heating); }
.cooling { color: var(--cooling); }
.assumptions { margin-top: 1.25rem; }
.event-log:empty { margin: 0; }
.primary-button { background: var(--accent); color: white; margin-top: 1rem; width: 100%; }
.configuration-status { margin-top: .8rem; font-size: .875rem; }
.field-hint { font-size: .75rem; color: var(--muted); }
.field-error { font-size: .8rem; color: #a02121; }
[aria-invalid="true"] { border: 2px solid #a02121; }
.configured-values { margin: .5rem 0; font-size: .85rem; }
.configured-values > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; padding-block: .4rem; border-bottom: 1px solid var(--line); }
.configured-values dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.schematic { margin: 0; }
.air-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; list-style: none; padding: 0; margin: 1rem 0; }
.air-path li { position: relative; border: 1px solid var(--line); background: #f8fafb; padding: .8rem .4rem; display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; min-width: 0; }
.air-path li:not(:last-child)::after { content: "→"; position: absolute; right: -1rem; top: 45%; }
.air-path li > span:last-child, .schematic figcaption, .airflow-label { font-size: .8rem; color: var(--muted); }
.air-path strong { font-size: .85rem; }
.component-symbol { font-size: 1.4rem; line-height: 1.2; height: 30px; }
.coil-symbol { display: block; width: 30px; height: 30px; border: 3px double currentColor; background: repeating-linear-gradient(90deg, transparent 0, transparent 5px, currentColor 5px, currentColor 6px); }
.heating-coil .coil-symbol { color: var(--heating); }
.cooling-coil .coil-symbol { color: var(--cooling); }
.trend-chart > svg { display: block; width: 100%; height: auto; overflow: visible; }
.trend-chart svg text { font: 12px system-ui, sans-serif; fill: var(--muted); }
.chart-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-size: .8rem; margin-top: .5rem; }
.chart-legend span { font-weight: 650; }
.chart-legend > span { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink); }
svg.chart-swatch { display: inline-block; width: 32px; height: 12px; flex: 0 0 32px; overflow: visible; }
.trend-series-label { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; padding: .2rem .35rem; background: #f0f4f7; border-radius: 4px; }
.fan-chart { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.event-log { max-height: 240px; overflow-y: auto; padding-left: 1.4rem; font: .8rem/1.6 ui-monospace, monospace; overflow-wrap: anywhere; }
.event-log li { margin-bottom: .4rem; }
[data-schematic][data-mode="HEATING"] .heating-coil { border-color: var(--heating); background: #fff3e9; }
[data-schematic][data-mode="COOLING"] .cooling-coil { border-color: var(--cooling); background: #edf5ff; }
[data-schematic] .air-path li:first-child .component-symbol { animation: fan-turn 1.6s linear infinite; animation-play-state: paused; }
[data-schematic][data-fan="MEDIUM"] .air-path li:first-child .component-symbol { animation-duration: .9s; }
[data-schematic][data-fan="HIGH"] .air-path li:first-child .component-symbol { animation-duration: .5s; }
[data-schematic][data-running="true"]:not([data-fan="OFF"]) .air-path li:first-child .component-symbol { animation-play-state: running; }
[data-schematic][data-running="true"]:not([data-fan="OFF"]) .air-path li:not(:last-child)::after { animation: airflow 1.3s ease-in-out infinite alternate; }
@keyframes fan-turn { to { transform: rotate(360deg); } }
@keyframes airflow { from { opacity: .3; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { [data-schematic] .air-path li:first-child .component-symbol, [data-schematic] .air-path li:not(:last-child)::after { animation: none !important; } }
@media (max-width: 1100px) { .air-path { grid-template-columns: 1fr; gap: 1.4rem; } .air-path li:not(:last-child)::after { content: "↓"; right: auto; top: auto; bottom: -1.4rem; } }
@media (max-width: 800px) { .simulator-layout { grid-template-columns: 1fr; } .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .desktop-break { display: none; } }
@media (max-width: 480px) { .field-grid, .pid-settings .field-grid { grid-template-columns: 1fr; } .readings { grid-template-columns: repeat(2, minmax(0, 1fr)); } .playback label { width: 100%; margin-left: 0; } }

/* A: equipment, both loop editors, then selectable trend log. */
.pid-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.loop-panel { min-width: 0; border-top: 3px solid var(--heating); }
.cooling-loop { border-top-color: var(--cooling); }
.pid-readings { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.pid-readings dd { font-size: 1.1rem; }
.pid-readings dt { font-size: .72rem; }
.pid-detail { margin-top: .8rem; }
.configuration-drawer { margin-top: 1.25rem; }
.configuration-drawer > summary { padding: 1rem; background: #e4ebef; }
.configuration-column .field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.air-path { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.air-path li { min-height: 170px; justify-content: end; border: 2px solid var(--line); background: linear-gradient(135deg, #fff, #e4ebef); }
.air-path li:not(:last-child)::after { content: "→"; right: -1.1rem; top: 45%; bottom: auto; }
.coil-symbol { width: 70%; height: 76px; border-width: 5px; background: repeating-linear-gradient(90deg, #d3dee5 0, #d3dee5 3px, #fff 3px, #fff 6px); }
.water-pipes { border-block: 2px solid currentColor; padding-block: .2rem; width: 95%; font-size: .75rem; }
.heating-coil .water-pipes { color: var(--heating); }
.cooling-coil .water-pipes { color: var(--cooling); }
.fan-case { display: grid; place-items: center; width: 86px; height: 86px; border: 6px double #708391; border-radius: 50%; margin-bottom: 10px; }
.fan-case .component-symbol { display: block; width: 64px; height: 64px; position: relative; }
.fan-case i { position: absolute; width: 22px; height: 30px; left: 21px; top: 3px; background: #708391; border-radius: 65% 30% 40% 30%; transform-origin: 50% 29px; }
.fan-case i:nth-child(2) { transform: rotate(120deg); }
.fan-case i:nth-child(3) { transform: rotate(240deg); }
.room-symbol { padding: 1rem .5rem; border: 2px solid #708391; font-size: .8rem; }
[data-schematic-room] { font-size: 1.4rem !important; font-variant-numeric: tabular-nums; }
.trend-tags { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.trend-tags label { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .85rem; }
.trend-tags input { width: auto; }
[hidden] { display: none !important; }
@media (max-width: 760px) {
  .pid-pair { grid-template-columns: 1fr; }
  .air-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .air-path li:nth-child(2)::after { display: none; }
  .configuration-column .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .configuration-column .field-grid { grid-template-columns: 1fr; }
  .pid-readings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* White DDC graphic page: physical points and their editors share one board. */
:root { --background: #fff; --surface: #fff; }
.page-heading { padding-top: 1rem; }
.page-heading > p:not(.status):not(.eyebrow) { display: none; }
.notice { padding: .5rem .75rem; margin-bottom: .75rem; background: #fff; font-size: .8rem; }
.ddc-board { background: #fff; border: 1px solid #8798a4; border-radius: 0; }
.ddc-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.outdoor-point { max-width: 240px; }
.ddc-board input, .ddc-board select { background: #fff; border-color: #8798a4; }
.ddc-board label { font-size: .78rem; }
.ddc-board .field-hint { font-size: .7rem; }
.return-duct { border: 2px solid #8798a4; border-bottom: 0; margin: .75rem 0 0; padding: .6rem 1rem; text-align: center; color: #416e86; font: .8rem ui-monospace, monospace; }
.ddc-board .air-path { margin: 0; padding: .75rem; border: 2px solid #8798a4; background: #fff; }
.ddc-board .air-path li { background: #fff; border: 1px solid #a4b1b9; justify-content: center; min-height: 190px; }
.ddc-board .air-path li > label { width: 100%; text-align: left; }
.ddc-board .air-path li:last-child { border: 2px solid #8798a4; }
.ddc-board .air-path li:last-child .room-symbol { border: 0; padding: .5rem; }
.ddc-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(230px, .85fr); gap: 1rem; align-items: start; margin-top: 1rem; }
.ddc-controls > section { min-width: 0; padding: .8rem; background: #fff; border-radius: 0; }
.ddc-controls .pid-readings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ddc-controls .pid-settings { margin-top: .75rem; padding-top: .5rem; }
.ddc-controls .hint { font-size: .75rem; }
.zone-controls { border: 2px solid #8798a4; }
.zone-controls .field-grid { grid-template-columns: 1fr; }
.graphic-apply { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .7rem; }
.graphic-apply .primary-button { max-width: 250px; margin-top: 0; }
.playback > label { margin-left: 0; max-width: 200px; }
.state-details > summary { font-size: .85rem; }
.room-setpoints { display: grid; gap: .35rem; width: 100%; padding: .5rem; border-block: 1px solid var(--line); }
.room-setpoints > span { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .5rem; font-size: .8rem; }
.room-setpoints strong { font-variant-numeric: tabular-nums; }
@media (max-width: 1050px) { .ddc-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zone-controls { grid-column: 1 / -1; } .zone-controls .field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 650px) { .ddc-controls { grid-template-columns: minmax(0, 1fr); } .zone-controls .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ddc-heading .outdoor-point { max-width: none; width: 100%; } }
@media (max-width: 420px) { .zone-controls .field-grid, .ddc-controls .pid-settings .field-grid { grid-template-columns: minmax(0, 1fr); } .ddc-board { padding: .6rem; } }

/* Reserve the same caption area for paired CO fields, including wrapped labels. */
.pid-settings .field-grid > label { grid-template-rows: minmax(2.8em, auto) 44px auto auto; }
.pid-settings .field-grid > label > input,
.pid-settings .field-grid > label > select { height: 44px; }
.trend-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-block: .8rem; }
.trend-toolbar button { font-size: .8rem; }
[data-trend-range] { font-size: .8rem; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .pid-settings .field-grid > label { grid-template-rows: auto 44px auto auto; } }