:root { color-scheme: light; font: 16px/1.5 var(--ui-font); background: var(--ui-bg); color: var(--ui-ink); }
* { box-sizing: border-box; }
body { margin: 0; }
.layout { width: min(100% - 2rem, 46rem); margin: 0 auto; padding: 1.5rem 0 3rem; }
header { margin-bottom: 1.25rem; }
header h1 { margin: 0; font-size: 2rem; }
header p { margin: .25rem 0 0; color: var(--ui-muted); }
.card { background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-card); padding: 1.25rem; margin-bottom: 1rem; overflow-wrap: anywhere; }
.card h2 { margin: 0 0 .75rem; font-size: 1.3rem; }
.card p { margin: .65rem 0; }
.warning, [role="alert"] { padding: .65rem .8rem; border-left: .3rem solid var(--ui-warning-line); background: var(--ui-warning-bg); color: var(--ui-warning-ink); }
form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1rem 0; }
form:last-child { margin-bottom: 0; }
label { display: block; flex-basis: 100%; font-weight: 600; }
input, select, button { font: inherit; min-height: 2.75rem; border-radius: var(--ui-radius-control); }
input, select { min-width: 0; max-width: 100%; padding: .45rem .65rem; border: 1px solid var(--ui-line); background: var(--ui-panel); color: inherit; }
button { padding: .45rem .85rem; border: 1px solid var(--ui-selected); background: var(--ui-selected); color: var(--ui-on); cursor: pointer; }
.button { display: inline-block; padding: .45rem .85rem; min-height: 2.75rem; border-radius: var(--ui-radius-control); background: var(--ui-selected); color: var(--ui-on); text-decoration: none; }
.button:hover { background: var(--ui-selected); }
button:hover { background: var(--ui-selected); }
button:disabled { opacity: .5; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 3px; }
.target-stepper { display: flex; width: 100%; gap: .4rem; }
.target-stepper input { flex: 1; width: 5rem; text-align: center; }
.target-stepper button { flex: 0 0 auto; touch-action: manipulation; }
@media (max-width: 360px) { .layout { width: calc(100% - 1rem); } .card { padding: .9rem; } .target-stepper button { padding-inline: .45rem; } }

.site-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.site-tabs a { flex: 1 1 auto; text-align: center; padding: .6rem .45rem; min-height: 2.75rem; border: 1px solid var(--ui-accent); border-radius: var(--ui-radius-control); color: var(--ui-accent); text-decoration: none; touch-action: manipulation; }
.site-tabs a[aria-current="page"] { background: var(--ui-selected); color: var(--ui-on); font-weight: 600; }
.ventilation-layout { display: grid; gap: 1rem; align-items: start; }
.ventilation-layout > div { min-width: 0; }
.ventilation-editor { padding: .8rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-tile); background: var(--ui-panel); }
.ventilation-editor h3 { margin: 0 0 .75rem; font-size: 1rem; }
.ventilation-card .ventilation-reading { min-height: 5rem; grid-template-rows: auto auto; }
.ventilation-card #house-status > .reading-tile { margin: 0 0 .6rem; }
.ventilation-duration { display: flex; gap: .6rem; }
.ventilation-duration label { flex: 1; min-width: 0; }
.ventilation-duration input { width: 100%; }
.ventilation-duration-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.ventilation-duration-summary p { flex: 1; margin: 0; font-size: .9rem; }
.ventilation-presets { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .4rem; margin-bottom: .8rem; }
.ventilation-presets button { background: var(--ui-soft); color: var(--ui-ink); touch-action: manipulation; }
.ventilation-presets button:hover { background: var(--ui-soft); }
.ventilation-presets button { padding-inline: .25rem; font-size: .85rem; border-color: var(--ui-line); }
.ventilation-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
.ventilation-actions form { display: block; margin: 0; }
.ventilation-actions button { width: 100%; height: 100%; }
.ventilation-feedback { min-height: 3.5rem; padding: .8rem; border-radius: var(--ui-radius-control); margin: .6rem 0 0; background: var(--ui-soft); }
@media (min-width: 800px) { .ventilation-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
@media (max-width: 400px) { .ventilation-actions { grid-template-columns: 1fr; } }
.history-period { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; width: 100%; }
.history-period label { min-width: 0; }
.history-period input { display: block; width: 100%; }
.ventilation-feedback.queued { background: var(--ui-warning-bg); }
.ventilation-feedback.delivered { background: var(--ui-info-bg); }
.ventilation-feedback.applied { background: var(--ui-success-bg); }
.ventilation-feedback.error { background: var(--ui-danger-bg); color: var(--ui-danger-ink); }
.ventilation-message { position: fixed; bottom: 1rem; left: 1rem; right: 1rem; max-width: 40rem; margin: auto; padding: .75rem; border-radius: var(--ui-radius-control); background: var(--ui-warning-bg); color: var(--ui-warning-ink); box-shadow: 0 .2rem 1rem #0002; z-index: 30; pointer-events: none; }

.form-error[role="alert"] { flex-basis: 100%; border-left-color: var(--ui-danger-line); background: var(--ui-danger-bg); color: var(--ui-danger-solid); font-weight: 600; }

.layout { position: relative; }
.layout > header h1 { padding-right: 8rem; }
.page-heading { position: relative; display: flex; align-items: center; gap: .5rem; padding-right: 8rem; min-height: 2.75rem; }
.layout > header .page-heading h1 { padding-right: 0; min-width: 0; overflow-wrap: anywhere; }
.connection-badge { position: absolute; top: 1.7rem; right: 0; padding: .2rem .65rem; border: 1px solid; border-radius: .65rem; font-size: .85rem; font-weight: 600; background: var(--ui-panel); }
.connection-badge.connected { border-color: var(--ui-success-line); color: var(--ui-success-ink); }
.connection-badge.disconnected { border-color: var(--ui-danger-line); color: var(--ui-danger-solid); }
.ten-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 1rem 0; }
.ten-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .85rem .2rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-tile); text-align: center; }
.ten-tile.on { background: var(--ui-warning-bg); border-color: var(--ui-warning-line); color: var(--ui-warning-ink); }
.ten-tile.off { background: var(--ui-soft); color: var(--ui-muted); }
.ten-tile.unknown { border-style: dashed; color: var(--ui-muted); }
button.ten-tile { touch-action: manipulation; }
button.ten-tile.on:hover { background: var(--ui-warning-bg); }
button.ten-tile.off:hover { background: var(--ui-soft); }
button.ten-tile.unknown { background: var(--ui-panel); }
button.ten-tile.unknown:hover { background: var(--ui-soft); }
.power-tile, .power-tile:hover { color: var(--ui-ink); background: var(--ui-panel); border-color: var(--ui-line); text-align: left; }
.power-tile:hover { background: var(--ui-soft); }
.power-tile progress { width: 100%; height: .7rem; accent-color: var(--ui-warning-line); }
.power-tile progress:not([value]) { visibility: hidden; }
.power-dialog .reading-tile { min-height: 6.5rem; }
.ten-tile .tile-status { min-height: 2.6em; font-size: .75rem; }
.ten-tile span { font-size: .85rem; }
.muted { font-size: .9rem; color: var(--ui-muted); }
.heating-controls { border-top: 1px solid var(--ui-line); margin-top: 1.25rem; padding-top: .25rem; }
.heating-controls h3 { margin-bottom: .6rem; }
.temperature-controls form { padding: .8rem; background: var(--ui-bg); border-radius: var(--ui-radius-tile); }
.temperature-controls form > input[name="value"] { flex: 1; width: 5rem; }
.target-stepper { flex: 1 1 12rem; width: auto; }
#target-help { flex-basis: 100%; font-size: .85rem; color: var(--ui-muted); }
.mode-controls { display: flex; flex-wrap: wrap; gap: .5rem; border-top: 1px solid var(--ui-line); margin-top: 1rem; padding-top: .8rem; }
.mode-controls h4 { flex-basis: 100%; margin: 0; }
.mode-controls form { margin: 0; flex: 1 1 12rem; }
.mode-controls button { width: 100%; }
.danger-button { background: var(--ui-danger-solid); border-color: var(--ui-danger-solid); }
.danger-button:hover { background: var(--ui-danger-solid); }

[hidden] { display: none !important; }
.parameter-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0; }
.parameter-tile { display: grid; grid-template-rows: 2.5rem 2rem 1.3rem 3.5rem; gap: .25rem; width: 100%; padding: .65rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-tile); background: var(--ui-panel); color: var(--ui-ink); text-align: left; }
button.parameter-tile:hover { background: var(--ui-soft); border-color: var(--ui-accent); }
.parameter-tile.mode-floor, button.parameter-tile.mode-floor:hover { background: var(--ui-success-bg); border-color: var(--ui-success-line); }
.parameter-tile.mode-primary, button.parameter-tile.mode-primary:hover { background: var(--ui-info-bg); border-color: var(--ui-info-line); }
.parameter-tile.mode-off, button.parameter-tile.mode-off:hover { background: var(--ui-soft); border-color: var(--ui-line); }
.parameter-tile.mode-unknown, button.parameter-tile.mode-unknown:hover { background: var(--ui-panel); border-color: var(--ui-line); border-style: dashed; }
.parameter-tile.wide { grid-column: 1 / -1; grid-template-rows: 1.5rem 4rem 0 2.8rem; }
.parameter-tile.temperature-tile { grid-template-rows: minmax(1.5rem, auto) 2rem 3rem 2.75rem; }
.temperature-tile .parameter-value { font-size: 1.6rem; }
.temperature-tile .parameter-detail { line-height: 1.25; overflow: auto; }
.temperature-tabs { display: flex; gap: .5rem; }
.temperature-tabs button { flex: 1; background: var(--ui-soft); color: var(--ui-ink); border-color: var(--ui-line); }
.temperature-tabs button[aria-pressed="true"] { background: var(--ui-selected); color: var(--ui-on); }
.temperature-summary { margin: 1rem 0 .5rem; }
.temperature-summary > div { display: flex; justify-content: space-between; gap: .5rem; }
.temperature-summary dd { margin: 0; font-weight: 600; }
.temperature-input-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; align-items: stretch; margin: .75rem 0; }
.temperature-input-form .target-stepper { width: 100%; }
.temperature-input-form > p { height: 3rem; overflow: auto; margin: 0; font-size: .85rem; line-height: 1.3; color: var(--ui-muted); }
.temperature-input-form > button { width: 100%; }
.temperature-editor .parameter-feedback { height: 7.5rem; grid-template-rows: 1fr 2.75rem; gap: .35rem; margin-top: .75rem; }
.temperature-editor .cancel-place { min-height: 2.75rem; }
.temperature-editor .cancel-place button { width: 100%; }
.temperature-preview { height: 3rem; overflow: auto; font-size: .85rem; color: var(--ui-muted); }
.parameter-title { font-size: .9rem; font-weight: 600; }
.parameter-value { font-size: 1.45rem; line-height: 1.2; overflow: auto; }
.wide .parameter-value { font-size: 1.1rem; }
.parameter-detail { font-size: .8rem; color: var(--ui-muted); }
.tile-status { font-size: .8rem; line-height: 1.3; overflow: auto; padding: .2rem; border-radius: .3rem; }
.tile-statuses { display: grid; min-width: 0; }
.temperature-tile .tile-statuses { grid-template-rows: repeat(2, 1.375rem); }
.tile-statuses .tile-status { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: .1rem .2rem; font-size: .75rem; }
.parameter-dialog { width: min(calc(100% - 1rem), 28rem); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-card); color: var(--ui-ink); background: var(--ui-panel); }
.parameter-dialog:not([open]) { display: none; }
.parameter-dialog::backdrop { background: rgb(0 0 0 / .45); }
.modal-open { overflow: hidden; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dialog-heading h2 { font-size: 1.25rem; margin: 0; }
.dialog-heading button { background: var(--ui-soft); border-color: var(--ui-line); color: var(--ui-ink); font-size: 1.5rem; }
.parameter-feedback { height: 12rem; display: grid; grid-template-rows: 1fr 3.5rem; gap: .5rem; margin-top: 1rem; padding: .8rem; border: 1px solid var(--ui-line); border-radius: .7rem; background: var(--ui-bg); }
.feedback-text { margin: 0; overflow: auto; }
.cancel-place { min-height: 3.5rem; }
.cancel-place form { margin: 0; }
.state-queued { background: var(--ui-warning-bg); color: var(--ui-warning-ink); }
.state-delivered, .state-sending, .state-accepted { background: var(--ui-info-bg); color: var(--ui-info-ink); }
.state-applied, .state-noop { background: var(--ui-success-bg); color: var(--ui-accent); }
.state-error, .state-expired, .state-interrupted, .state-unknown, .state-rejected { background: var(--ui-danger-bg); color: var(--ui-danger-solid); }
.state-sending .feedback-text::before { content: '◌ '; }
.mode-options form { margin: .65rem 0; }
.mode-options button { width: 100%; }
.emergency-stop button { width: 100%; }
@media (max-width: 480px) { .layout > header h1 { font-size: 1.4rem; } }

.reading-tiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; margin: 1rem 0; }
.reading-tile { display: grid; grid-template-rows: auto auto 1fr; gap: .25rem; min-height: 10rem; padding: .8rem; background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-tile); overflow-wrap: anywhere; }
.reading-tile > span { font-size: .9rem; font-weight: 600; }
.reading-tile > b { font-size: 1.2rem; line-height: 1.2; }
.reading-tile > small { font-size: .8rem; }
.resource-stamp { height: auto; display: block; min-height: 4rem; }
.power-panel progress { width: 100%; height: 1.2rem; accent-color: var(--ui-warning-line); }
.power-panel progress:not([value]) { visibility: hidden; }
.heating-card { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
.heating-card #house-status, .heating-card .parameter-tiles { display: contents; }
.heating-card .temperature-tile { grid-column: 1; grid-row: 1; }
.heating-card .outdoor { grid-column: 2; grid-row: 1; }
.heating-card .supply { grid-column: 1; grid-row: 2; }
.heating-card .boiler { grid-column: 2; grid-row: 2; }
.heating-card .temperature-reading .reading-tile { height: 100%; min-height: 7rem; padding: .6rem; grid-template-rows: auto 1fr auto; }
.heating-card .parameter-tile.temperature-tile { grid-template-rows: 2rem 1.8rem 2.2rem 1.4rem; padding: .5rem; gap: .1rem; }
.heating-card .temperature-tile .tile-statuses { grid-template-rows: repeat(2,.7rem); }
.heating-card .temperature-tile .parameter-title { font-size: .8rem; line-height: 1.25; }
.heating-card .temperature-tile .parameter-detail { font-size: .75rem; }
.heating-card .parameter-tile:not(.temperature-tile) { grid-column: 1 / -1; grid-row: 3; grid-template-rows: 1.5rem 2.8rem 0 1.3rem; }
.heating-card .power-panel { grid-column: 1 / -1; grid-row: 4; }
.heating-card .power-tile { grid-column: 1 / -1; grid-row: 4; min-height: 7rem; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto auto; }
.power-tile > span:first-child, .power-tile > progress, .power-tile > small { grid-column: 1 / -1; }
.heating-card .ten-tiles { grid-column: 1 / -1; grid-row: 5; }
.heating-card .emergency-stop { grid-row: 6; }
.heating-card .emergency-stop, .heating-card .warning, .heating-card [role="alert"], .heating-card .fallback-controls { grid-column: 1 / -1; }
.heating-card > p, .heating-card #house-status > p { grid-column: 1 / -1; }
.power-panel .reading-tile { min-height: 6.5rem; padding: .5rem; grid-template-rows: auto 1fr auto; }
.ten-restriction { font-size: .7rem; overflow-wrap: normal; margin-top: .35rem; border-radius: .3rem; padding: .15rem .3rem; }
.ten-restriction.blocked { background: var(--ui-danger-bg); color: var(--ui-danger-solid); border: 1px solid var(--ui-danger-line); }
.ten-restriction.available { background: var(--ui-success-bg); color: var(--ui-accent); }
.ventilation-presets { width: 100%; }
.ventilation-presets button { flex: 1 1 5rem; }
@media (min-width: 900px) {
  .layout { width: min(100% - 2rem, 68rem); }
  .heating-card { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .heating-card .supply { grid-column: 3; grid-row: 1; }
  .heating-card .boiler { grid-column: 4; grid-row: 1; }
  .power-panel .reading-tiles { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 600px) { .reading-tiles > .long-text { grid-column: 1 / -1; } }
.snapshot-controls { display: flex; flex: 0 0 auto; align-items: center; }
.snapshot-controls > span { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 10; width: max-content; max-width: calc(100vw - 2rem); padding: .5rem .75rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-control); background: var(--ui-panel); box-shadow: 0 .2rem .7rem rgb(0 0 0 / .15); font-size: .85rem; color: var(--ui-muted); overflow-wrap: anywhere; pointer-events: none; }
.snapshot-controls > span:empty { display: none; }
.snapshot-copy-button { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: .5rem; background: var(--ui-soft); border-color: var(--ui-line); color: var(--ui-muted); touch-action: manipulation; }
.snapshot-copy-button:hover { background: var(--ui-soft); }
.snapshot-copy-button svg { width: 1.35rem; height: 1.35rem; }
.copy-fallback { position: fixed; top: 0; left: -10000px; width: 1px; height: 1px; }
@media (max-width: 360px) { .reading-tiles { grid-template-columns: 1fr; } }
.chart-series { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin: 1rem 0; }
.chart-series label { display: flex; align-items: center; gap: .3rem; flex-basis: auto; font-size: .85rem; cursor: pointer; }
.chart-series input { min-height: 1.25rem; width: 1.25rem; }
#heating-chart { width: 100%; height: 24rem; min-width: 0; }
.chart-temperature-scale { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin: .8rem 0; }
.chart-temperature-scale label { flex: 1 1 8rem; margin: 0; }
.chart-temperature-scale input { display: block; width: 100%; box-sizing: border-box; }
#chart-temperature-status { min-height: 3rem; }
.history-actions, .chart-toolbar { display: flex; flex-wrap: wrap; gap: .4rem; width: 100%; }
.chart-toolbar button, .secondary-button { background: var(--ui-soft); color: var(--ui-ink); border-color: var(--ui-line); touch-action: manipulation; }
.chart-toolbar button:hover, .secondary-button:hover { background: var(--ui-soft); }
.chart-toolbar button { padding: .35rem .6rem; }
.chart-dialog { width: calc(100% - 1rem); max-width: none; height: calc(100dvh - 1rem); max-height: calc(100dvh - 1rem); padding: .8rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-tile); background: var(--ui-panel); overflow: auto; }
#chart-dialog-body { margin-top: .8rem; }
.chart-dialog::backdrop { background: rgb(0 0 0 / .45); }
.chart-dialog #heating-chart { height: max(18rem, 55dvh); }
#chart-reading { min-height: 3rem; }
.chart-color-0 { color: var(--ui-accent); }
.chart-color-1 { color: var(--ui-chart-1); }
.chart-color-2 { color: var(--ui-line); }
.chart-color-3 { color: var(--ui-chart-3); }
.chart-color-4 { color: var(--ui-chart-4); }
.chart-color-5 { color: var(--ui-chart-5); }
.chart-color-6 { color: var(--ui-chart-6); }
.chart-color-7 { color: var(--ui-chart-7); }
.chart-color-8 { color: var(--ui-chart-8); }

/* Mutually exclusive confirmed modes; POST feedback never selects a pending mode. */
.heating-card .heating-modes { grid-column: 1 / -1; grid-row: 3; position: relative; }
.heating-modes h3 { font-size: .95rem; margin: .25rem 0 .5rem; }
.mode-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; }
.mode-choices form { margin: 0; min-width: 0; }
.mode-choice { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; height: 100%; min-height: 4.5rem; padding: .5rem; background: var(--ui-panel); border-color: var(--ui-line); color: var(--ui-muted); font-size: .85rem; line-height: 1.25; touch-action: manipulation; overflow-wrap: anywhere; }
.mode-choice:hover { background: var(--ui-soft); }
.mode-check { width: .9rem; flex: 0 0 .9rem; }
.mode-choice[aria-pressed="true"] .mode-check::before { content: '✓'; }
.mode-choice.mode-floor[aria-pressed="true"] { background: var(--ui-success-bg); border-color: var(--ui-accent); color: var(--ui-accent); }
.mode-choice.mode-primary[aria-pressed="true"] { background: var(--ui-info-bg); border-color: var(--ui-chart-1); color: var(--ui-info-ink); }
.mode-choice.mode-off[aria-pressed="true"] { background: var(--ui-soft); border-color: var(--ui-muted); color: var(--ui-ink); }
.mode-choice:disabled { opacity: 1; cursor: default; }
.mode-current { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mode-feedback { height: 3.5rem; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 1fr; align-items: center; margin-top: .5rem; padding: .4rem .5rem; gap: .25rem; }
.mode-feedback .cancel-place { min-height: 2.75rem; }
.mode-feedback .feedback-text { font-size: .8rem; max-height: 2.75rem; }
.mode-feedback .cancel-place button { font-size: .8rem; padding: .5rem .6rem; }
.mode-feedback.state-idle, .mode-feedback.state-applied, .mode-feedback.state-cancelled { background: transparent; border-color: transparent; }
@media (max-width: 600px) {
  .mode-choices { grid-template-columns: 1fr; }
  .mode-choice { min-height: 3rem; justify-content: flex-start; padding: .6rem .8rem; }
}

.temperature-info-tile { width: 100%; text-align: left; color: var(--ui-ink); }
button.temperature-info-tile:hover { background: var(--ui-soft); border-color: var(--ui-accent); }
.calculation-dialog { width: min(36rem, calc(100vw - 2rem)); }
#feedback-floor_control { height: auto; min-height: 3.5rem; display: block; }
#feedback-floor_control p { margin: 0; }
.floor-controls form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.floor-controls label { flex-basis: 100%; }
.floor-controls input[type="number"] { width: 5rem; }
/* Supply component: palette and geometry from the approved interactive mock. */
#dialog-supply_temperature {
  --sp-bg: var(--ui-bg); --sp-panel: var(--ui-panel); --sp-soft: var(--ui-soft); --sp-ink: var(--ui-ink);
  --sp-muted: var(--ui-muted); --sp-line: var(--ui-line); --sp-accent: var(--ui-accent);
  --sp-selected: var(--ui-selected); --sp-on: var(--ui-on); --sp-error: var(--ui-error);
  width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--sp-line);
  border-radius: var(--ui-radius-card); background: var(--sp-bg); color: var(--sp-ink);
  font-family: var(--ui-font);
  font-size: 14px; line-height: 1.45; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none;
  box-shadow: 0 20px 80px #0004; scrollbar-width: thin;
}
#dialog-supply_temperature::backdrop { background: #0009; backdrop-filter: blur(3px); }
#dialog-supply_temperature * { box-sizing: border-box; }
#dialog-supply_temperature [hidden] { display: none !important; }
#dialog-supply_temperature button, #dialog-supply_temperature input, #dialog-supply_temperature select { font-family: inherit; }
#dialog-supply_temperature :focus-visible { outline: 3px solid var(--sp-accent); outline-offset: 3px; }
#dialog-supply_temperature button { touch-action: manipulation; }
#dialog-supply_temperature .muted { color: var(--sp-muted); font-size: 13px; line-height: 1.5; }
#dialog-supply_temperature .supply-brand { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px; min-height: 52px; border-bottom: 1px solid var(--sp-line); color: var(--sp-ink); }
#dialog-supply_temperature .supply-brand strong { font-size: 14px; font-weight: 600; letter-spacing: -.2px; }
#dialog-supply_temperature .supply-brand button { display: grid; place-items: center; min-height: 40px; width: 40px; margin-right: -8px; padding: 0; border: 0; border-radius: 12px; color: var(--sp-muted); background: none; }
#dialog-supply_temperature .supply-brand button:hover { background: var(--sp-panel); color: var(--sp-ink); }
#dialog-supply_temperature .supply-close-icon { width: 20px; height: 20px; }
#dialog-supply_temperature .supply-overview-heading { display: block; padding: 17px 18px 19px; margin: 0; }
#dialog-supply_temperature:not([data-supply-screen-name="overview"]) .supply-overview-heading { display: none; }
#dialog-supply_temperature .supply-overview-heading h2 { margin: 8px 0 0; font-size: 23px; line-height: 1.18; letter-spacing: -.5px; font-weight: 650; }
#dialog-supply_temperature .supply-overview-back, #dialog-supply_temperature .supply-back { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 5px 0; margin: 0; border: 0; border-radius: 6px; color: var(--sp-accent); background: none; font-size: 13px; font-weight: 400; }
#dialog-supply_temperature .supply-back-icon { width: 15px; height: 15px; }
#supply-controls { padding: 0 18px 20px; }
#dialog-supply_temperature [data-supply-screen]:not([data-supply-screen="overview"]) { padding-top: 17px; }
#dialog-supply_temperature h3 { margin: 8px 0; font-size: 23px; line-height: 1.18; letter-spacing: -.5px; font-weight: 650; }
#dialog-supply_temperature h4 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
#dialog-supply_temperature .supply-readings { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; align-items: end; margin: 0; padding: 0 0 17px; }
#dialog-supply_temperature .supply-readings > div { display: grid; grid-template-rows: auto auto; gap: 0; min-width: 0; }
#dialog-supply_temperature .supply-readings > div > span { font-size: 13px; color: var(--sp-muted); }
#dialog-supply_temperature .supply-readings b { display: block; font-size: 38px; line-height: 1.25; font-weight: 600; letter-spacing: -1px; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
#dialog-supply_temperature .supply-readings > div + div b { font-size: 30px; line-height: 1.5; font-weight: 500; letter-spacing: -.7px; }
#dialog-supply_temperature .supply-readings b.supply-reading-empty { font-size: 18px; line-height: 1.5; letter-spacing: 0; }
#dialog-supply_temperature .supply-control-state { display: flex; align-items: center; gap: 7px; padding-bottom: 17px; margin: 0; font-size: 13px; color: var(--sp-accent); }
#dialog-supply_temperature .supply-control-state[data-supply-owner-state="unknown"] { color: var(--sp-muted); }
#dialog-supply_temperature .supply-state-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; }
#dialog-supply_temperature .supply-mode-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 51px; margin: 0 0 13px; padding: 11px 13px; text-align: left; border: 1px solid var(--sp-line); border-radius: 12px; background: var(--sp-panel); color: var(--sp-ink); font-size: 13px; }
#dialog-supply_temperature .supply-mode-link > span:first-child { display: grid; gap: 3px; font-size: 11px; color: var(--sp-muted); }
#dialog-supply_temperature .supply-mode-link strong { font-size: 14px; font-weight: 600; color: var(--sp-ink); }
#dialog-supply_temperature .supply-mode-link > span + span { font-size: 12px; white-space: nowrap; }
#dialog-supply_temperature .supply-tiles { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
#dialog-supply_temperature .supply-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; position: static; width: 100%; min-width: 0; min-height: 132px; padding: 15px 12px; text-align: left; border: 1px solid var(--sp-line); border-radius: var(--ui-radius-tile); background: var(--sp-panel); color: var(--sp-ink); }
#dialog-supply_temperature .supply-tile:hover, #dialog-supply_temperature .supply-mode-link:hover { background: var(--sp-soft); }
#dialog-supply_temperature .supply-tile-top { display: flex; align-items: center; justify-content: space-between; width: 100%; color: var(--sp-accent); }
#dialog-supply_temperature .supply-tile-icon, #dialog-supply_temperature .supply-tile-arrow { display: block; width: 20px; height: 20px; }
#dialog-supply_temperature .supply-tile-name { padding: 0; font-size: 14px; line-height: 1.3; font-weight: 600; }
#dialog-supply_temperature .supply-tile-caption { display: block; font-size: 12px; line-height: 1.45; color: var(--sp-muted); overflow-wrap: anywhere; }
#dialog-supply_temperature .supply-explanation { width: 100%; min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 16px 0 0; padding: 13px 0 0; border: 0; border-top: 1px solid var(--sp-line); border-radius: 0; background: none; color: var(--sp-muted); text-align: left; font-size: 13px; }
#dialog-supply_temperature [data-supply-editor] { display: block; margin: 12px 0 0; padding: 0; background: none; }
#dialog-supply_temperature fieldset { min-width: 0; width: 100%; border: 0; padding: 0; margin: 0; }
#dialog-supply_temperature fieldset > button, #dialog-supply_temperature a.button { width: 100%; min-height: 46px; margin-top: 15px; padding: 11px 14px; border: 0; border-radius: 12px; background: var(--sp-selected); color: var(--sp-on); font-size: 14px; font-weight: 600; text-align: center; }
#dialog-supply_temperature .supply-curve-pairs { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
#dialog-supply_temperature .supply-curve-pairs > div { min-width: 0; padding: 13px 11px; border: 1px solid var(--sp-line); border-radius: 15px; background: var(--sp-panel); }
#dialog-supply_temperature .supply-setting { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; margin: 0; border-bottom: 1px solid var(--sp-line); font-weight: 400; }
#dialog-supply_temperature .supply-setting > span:first-child { min-width: 0; font-size: 13px; line-height: 1.4; }
#dialog-supply_temperature .supply-setting small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--sp-muted); }
#dialog-supply_temperature .supply-input { display: flex; align-items: center; gap: 4px; flex: 0 0 106px; min-width: 0; }
#dialog-supply_temperature .supply-input input, #dialog-supply_temperature select { min-width: 0; width: 100%; min-height: 43px; padding: 9px 8px; border: 1px solid var(--sp-line); border-radius: 9px; background: var(--sp-bg); color: var(--sp-ink); font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
#dialog-supply_temperature .supply-input > span { font-size: 12px; color: var(--sp-muted); white-space: nowrap; flex-shrink: 0; }
#dialog-supply_temperature .supply-setting select { flex: 0 0 120px; width: 120px; font-size: 16px; }
#dialog-supply_temperature .supply-curve-pairs .supply-setting { display: block; border: 0; padding: 0; margin-top: 11px; }
#dialog-supply_temperature .supply-curve-pairs .supply-setting > span:first-child { display: block; min-height: 34px; margin-bottom: 5px; font-size: 12px; }
#dialog-supply_temperature .supply-mode-choices { display: grid; gap: 9px; }
#dialog-supply_temperature .supply-mode-choices label { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 13px 12px; border: 1px solid var(--sp-line); border-radius: 13px; background: var(--sp-panel); font-weight: 400; }
#dialog-supply_temperature .supply-mode-choices label:has(input:checked) { border-color: var(--sp-accent); background: var(--sp-soft); }
#dialog-supply_temperature .supply-mode-choices input { flex: 0 0 17px; width: 17px; min-height: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--sp-selected); }
#dialog-supply_temperature .supply-mode-choices strong { display: block; font-size: 14px; font-weight: 600; }
#dialog-supply_temperature .supply-mode-choices small { display: block; margin-top: 5px; color: var(--sp-muted); font-size: 12px; line-height: 1.4; }
#dialog-supply_temperature [data-supply-mode-input] { margin-top: 14px; }
#dialog-supply_temperature .supply-preview { min-height: 19px; margin: 14px 0 0; color: var(--sp-muted); font-size: 13px; line-height: 1.45; }
#dialog-supply_temperature [data-supply-curve-note]:empty, #dialog-supply_temperature [data-supply-room-note]:empty { display: none; }
#dialog-supply_temperature .supply-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; margin: 5px 0 12px; color: var(--sp-muted); font-size: 11px; }
#dialog-supply_temperature [data-supply-chart] { display: block; width: 100%; min-height: 180px; overflow: visible; }
#dialog-supply_temperature [data-supply-chart] text { font-family: inherit; font-size: 11px; fill: var(--sp-muted); }
#dialog-supply_temperature .supply-chart-grid { stroke: var(--sp-line); stroke-width: 1; }
#dialog-supply_temperature .supply-chart-saved { fill: none; stroke: var(--sp-accent); stroke-width: 2.5; stroke-linejoin: round; }
#dialog-supply_temperature .supply-chart-draft { fill: none; stroke: var(--sp-ink); stroke-width: 2.5; stroke-dasharray: 5 5; stroke-linejoin: round; }
#dialog-supply_temperature .temperature-summary { margin: 0; }
#dialog-supply_temperature .temperature-summary > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--sp-line); }
#dialog-supply_temperature .temperature-summary dt { flex: 1 1 auto; min-width: 0; color: var(--sp-muted); font-size: 13px; font-weight: 400; }
#dialog-supply_temperature .temperature-summary dd { flex: 0 1 60%; margin: 0; text-align: right; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#dialog-supply_temperature .supply-pump-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 9px; margin: 15px 0; }
#dialog-supply_temperature .supply-pump-actions button, #dialog-supply_temperature .floor-controls button { padding: 10px 9px; min-height: 44px; border: 1px solid var(--sp-line); border-radius: 11px; background: var(--sp-panel); color: var(--sp-ink); font-size: 13px; }
#dialog-supply_temperature .supply-pump-actions button:first-child { border-color: var(--sp-selected); background: var(--sp-selected); color: var(--sp-on); }
#dialog-supply_temperature .calculation-step { margin: 17px 0 0; padding: 13px 0 0; border: 0; border-top: 1px solid var(--sp-line); border-radius: 0; background: none; color: var(--sp-muted); font-size: 13px; }
#dialog-supply_temperature .calculation-step summary { min-height: 32px; color: var(--sp-ink); line-height: 1.45; }
#dialog-supply_temperature .calculation-step p { margin: 8px 0 0; font-size: 13px; line-height: 1.55; }
#dialog-supply_temperature .parameter-feedback { display: block; height: auto; min-height: 0; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--sp-line); border-radius: 10px; background: var(--sp-soft); font-size: 12px; }
#dialog-supply_temperature .parameter-feedback > p { min-height: 0; margin: 0; font-size: 12px; }
#dialog-supply_temperature .parameter-feedback.state-idle { height: 0; min-height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; background: none; }
#dialog-supply_temperature .parameter-feedback.state-idle > p { visibility: hidden; }
#dialog-supply_temperature .parameter-feedback:is(.state-error,.state-expired,.state-interrupted,.state-unknown,.state-rejected) { border-color: var(--sp-error); color: var(--sp-error); }
#dialog-supply_temperature .parameter-feedback form { margin: 8px 0 0; }
#dialog-supply_temperature .supply-editor-status { padding-top: 12px; margin-top: 14px; border-top: 1px solid var(--sp-line); }
#dialog-supply_temperature .supply-editor-status > p { margin: 0 0 8px; font-size: 12px; }
#dialog-supply_temperature .supply-editor-status > button { min-height: 40px; border: 1px solid var(--sp-line); border-radius: 11px; background: var(--sp-panel); color: var(--sp-ink); font-size: 13px; }
#dialog-supply_temperature .supply-freshness { margin: 20px 0 0; font-size: 11px; text-align: center; color: var(--sp-muted); }
#dialog-supply_temperature .supply-native-stop { margin: 12px 0; }
#dialog-supply_temperature .supply-native-stop form { margin: 0; }
#dialog-supply_temperature .supply-native-stop button { width: 100%; min-height: 44px; border: 1px solid var(--ui-danger-line); border-radius: 11px; background: var(--ui-danger-solid); color: var(--ui-danger-on); }
#dialog-supply_temperature .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 370px) {
  #dialog-supply_temperature { width: calc(100vw - 24px); }
  #dialog-supply_temperature .supply-overview-heading { padding-inline: 13px; }
  #supply-controls { padding-inline: 13px; }
  #dialog-supply_temperature .supply-overview-heading h2, #dialog-supply_temperature h3 { font-size: 21px; }
  #dialog-supply_temperature .supply-tile { padding: 12px 10px; min-height: 137px; }
  #dialog-supply_temperature .supply-curve-pairs > div { padding: 12px 9px; }
  #dialog-supply_temperature .supply-setting { gap: 9px; }
  #dialog-supply_temperature .supply-input { flex-basis: 96px; }
}
@media (prefers-reduced-motion: no-preference) {
  #dialog-supply_temperature .supply-tile { transition: background .15s; }
}
.calculation-step { margin: .65rem 0; padding: .7rem; background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: .65rem; }
.calculation-step summary { cursor: pointer; font-weight: 600; overflow-wrap: anywhere; }
.calculation-step p { margin: .6rem 0 0; overflow-wrap: anywhere; }
.calculation-measurement, .calculation-total { display: grid; gap: .35rem; margin: .8rem 0; }
.calculation-measurement b, .calculation-total b { font-size: 1.4rem; }
.calculation-total { padding: .8rem; background: var(--ui-success-bg); border-radius: .65rem; }
.calculation-total p { margin: .2rem 0; }
.sensor-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.sensor-pair .reading-tile { min-height: 0; }
@media(max-width: 600px) { .sensor-pair { grid-template-columns: 1fr; } }

/* Д17А: normal document flow; never overlays STOP, dialog or keyboard. */
.attention-block{margin-block:1rem;min-width:0;overflow-wrap:anywhere}
.attention-block h2{font-size:1.1rem}.active-problem{border-inline-start:4px solid var(--ui-warning-line);padding:.6rem .8rem;margin:.6rem 0;background:var(--ui-warning-bg);color:var(--ui-warning-ink)}
.active-problem.urgent{border-color:var(--ui-danger-line);background:var(--ui-danger-bg);color:var(--ui-danger-ink)}
.active-problem h3{font-size:1rem;margin:.2rem 0}.active-problem p{margin:.4rem 0}
.problem-state,.problem-evidence{font-size:.85rem}.active-problem a{display:inline-block;margin:.3rem .8rem .3rem 0}
.more-problems summary,.active-problem summary{cursor:pointer;padding:.4rem 0}
#problem-announcement:empty{display:none}
@media(max-width:480px){.active-problem{padding:.5rem}.attention-block{padding:.75rem}}

/* D17B: one announcement in page flow, never above a modal or emergency control. */
.action-toast { margin: .65rem 0; padding: .7rem; border: 2px solid currentColor; border-radius: .5rem; overflow-wrap: anywhere; }
.action-toast[hidden] { display: none; }
.action-info { color: var(--ui-info-ink); background: var(--ui-info-bg); }
.action-success { color: var(--ui-success-ink); background: var(--ui-success-bg); }
.action-warning { color: var(--ui-warning-ink); background: var(--ui-warning-bg); }
[data-action-state="unknown"], [data-action-state="error"], [data-action-state="rejected"], [data-action-state="expired"] { font-weight: 600; }

/* Main-page attention is a small disclosure; details stay in document flow. */
.home-attention{position:relative;padding:0;margin:.65rem 0;border:1px solid var(--ui-warning-line);border-radius:.65rem;background:var(--ui-warning-bg);color:var(--ui-warning-ink)}
.home-attention[hidden]{display:none}
.home-attention-details>summary{display:flex;align-items:center;gap:.65rem;cursor:pointer;list-style:none;padding:.65rem 3.25rem .65rem .8rem;font-size:.95rem;min-height:2.75rem;box-sizing:border-box}
.home-attention-details>summary::-webkit-details-marker{display:none}
.attention-more{margin-left:auto;font-size:.8rem;text-decoration:underline;white-space:nowrap}
.home-attention [data-dismiss-attention]{position:absolute;right:.25rem;top:.2rem;width:2.5rem;height:2.5rem;padding:0;border:0;background:transparent;color:inherit;font-size:1.6rem;cursor:pointer}
.home-attention-content{padding:0 .8rem .75rem}.home-problem h3{font-size:1rem;margin:.5rem 0 .25rem}.home-problem p{margin:.25rem 0 .5rem}
.home-attention-content a{display:inline-block;padding:.25rem 0}.home-attention :focus-visible{outline:2px solid currentColor;outline-offset:2px}
.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}

/* D13: compact boiler editor, including narrow mobile dialogs. */
#boiler-editor fieldset { min-width: 0; margin: .8rem 0; }
#boiler-editor label { display: block; }
#boiler-editor select, #boiler-editor input[type="number"] { display: block; box-sizing: border-box; width: 100%; max-width: 100%; margin: .3rem 0 .8rem; }
#feedback-boiler_setpoint_config { height: auto; min-height: 3rem; display: block; }

/* Fixed light tiles: colour follows reported state, never an optimistic click. */
.lighting-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.lighting-item { min-width: 0; }
.lighting-item form { display: block; margin: 0; height: 100%; }
button.lighting-tile { width: 100%; height: 100%; min-height: 8.5rem; display: grid; grid-template-rows: 1.7rem minmax(2.4em,auto) 1.3rem 1rem; gap: .2rem; padding: .75rem; border-radius: var(--ui-radius-card); text-align: left; background: var(--ui-panel); color: var(--ui-muted); border: 1px solid var(--ui-line); touch-action: manipulation; overflow-wrap: anywhere; }
button.lighting-tile[data-state="on"] { background: var(--ui-warning-bg); border-color: var(--ui-warning-line); color: var(--ui-warning-ink); }
button.lighting-tile[data-state="unknown"] { background: var(--ui-panel); border-style: dashed; color: var(--ui-muted); }
button.lighting-tile:enabled:hover { filter: brightness(.97); }
button.lighting-tile:disabled { opacity: 1; cursor: not-allowed; }
button.lighting-tile[aria-busy="true"] { cursor: wait; }
.light-icon { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lighting-tile[data-state="on"] .light-icon { fill: var(--ui-warning-line); }
.light-name { font-weight: 650; font-size: .95rem; line-height: 1.2; }
.lighting-tile [data-light-state] { font-size: .85rem; }
.lighting-tile [data-light-wait] { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .72rem; line-height: 1.2; white-space: nowrap; }
.lighting-details { margin-top: 1rem; color: var(--ui-muted); font-size: .9rem; }
.lighting-details section { border-top: 1px solid var(--ui-line); padding: .5rem 0; }
.lighting-details h3, .lighting-details p { margin: .35rem 0; }
@media (min-width: 600px) { .lighting-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }

/* Short expandable messages; detailed evidence stays behind a second disclosure. */
.attention-block.card { padding: .75rem; }
.attention-block h2 { font-size: .95rem; margin-bottom: .4rem; }
.active-problem { padding: 0; margin: .35rem 0; border-radius: .35rem; }
.problem-disclosure > summary { padding: .6rem .65rem; cursor: pointer; font-size: .9rem; font-weight: 600; }
.problem-content { padding: 0 .7rem .65rem; font-size: .9rem; }
.problem-content .problem-next-step { margin-top: .3rem; }
.problem-technical { font-size: .8rem; }
.channel-observations > summary { cursor: pointer; padding: .4rem 0; font-size: .8rem; }
.channel-observations { font-size: .85rem; }
#owner-review-pending { font-size: .85rem; margin-bottom: .2rem; }

/* One compact two-line status prevents theme text from shrinking the page at its bottom. */
#appearance-status { min-height: 3em; }

/* Persistent compact personal status also survives a native OFF response. */
#action-state-ventilation { height: 3em; overflow: auto; font-size: .85rem; }

/* Automatic warning changes retain one useful compact row, even on short pages. */
.attention-slot .home-attention-details > summary, .attention-slot .attention-neutral { height: 2.75rem; min-height: 2.75rem; margin: 0; }
.attention-slot .home-attention-details > summary > span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.attention-slot .attention-neutral { display: flex; align-items: center; padding: .65rem .8rem; font-size: .9rem; }
.attention-slot .attention-neutral[hidden], .attention-slot details[hidden] { display: none; }
html .home-attention.attention-slot[data-attention-neutral="true"] { background: Canvas; color: CanvasText; border-color: var(--ui-line); }
.attention-slot[data-attention-urgent="true"][data-attention-neutral="false"] { border-color: var(--ui-danger-line); }

html .attention-slot[data-attention-refresh="error"][data-attention-urgent="false"] { background: var(--ui-warning-bg); color: var(--ui-warning-ink); border-color: var(--ui-warning-line); }

/* Supply detail parity: external chart headings keep axes clear on narrow phones. */
#dialog-supply_temperature .supply-chart-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 14px; flex-wrap: wrap; margin: 24px 0 8px; color: var(--sp-muted); font-size: 12px; }
#dialog-supply_temperature .supply-chart-heading > span:last-child { margin-left: auto; text-align: right; }
#dialog-supply_temperature [data-supply-chart], #dialog-supply_temperature [data-supply-history-chart] { width: 100%; display: block; min-height: 180px; }
#dialog-supply_temperature [data-supply-history-chart] { font-family: var(--ui-font); overflow: visible; }
#dialog-supply_temperature [data-supply-history-chart][hidden] { display: none; }
#dialog-supply_temperature .supply-chart-point { fill: var(--sp-bg); stroke: var(--sp-accent); stroke-width: 2.5; }
#dialog-supply_temperature .supply-chart-current { fill: var(--sp-accent); stroke: var(--sp-bg); stroke-width: 2.5; }
#dialog-supply_temperature .supply-chart-tick { font-size: 10px; }
#dialog-supply_temperature .supply-chart-legend > span { display: inline-flex; align-items: center; gap: 5px; }
#dialog-supply_temperature [data-supply-curve-saved-legend]::before, #dialog-supply_temperature [data-supply-curve-draft-legend]::before, #dialog-supply_temperature .supply-history-actual-legend::before, #dialog-supply_temperature .supply-history-target-legend::before { content: ''; display: inline-block; width: 18px; border-top: 2px solid var(--sp-accent); }
#dialog-supply_temperature [data-supply-curve-draft-legend]::before, #dialog-supply_temperature .supply-history-target-legend::before { border-top-style: dashed; border-color: var(--sp-muted); }
#dialog-supply_temperature .supply-room-readings { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 24px 0 18px; font-size: 12px; color: var(--sp-muted); }
#dialog-supply_temperature .supply-room-readings b { color: var(--sp-ink); font-weight: 500; white-space: nowrap; }
#dialog-supply_temperature .supply-room-switch [data-supply-room-toggle] { flex: 0 0 22px; width: 22px; height: 22px; min-height: 22px; padding: 0; margin: 0 2px 0 0; accent-color: var(--sp-selected); cursor: pointer; }
#dialog-supply_temperature .supply-input-prefix { flex: 0 0 12px; text-align: center; }
#dialog-supply_temperature .supply-setting:has(.supply-input-prefix) .supply-input { flex-basis: 122px; }
#dialog-supply_temperature[data-supply-screen-name="history"] .supply-freshness { display: none; }
#dialog-supply_temperature [data-supply-history-status] { margin: 12px 0; font-size: 12px; line-height: 1.5; }