/* Shared presentation tokens and components. Loaded after every section stylesheet.
   Page layout, state transitions, feedback slots and command behavior stay in their owners. */
:root {
  color-scheme: light;
  --ui-bg: #f3f6f3; --ui-panel: #fff; --ui-soft: #edf4ef;
  --ui-ink: #18382b; --ui-muted: #506c5e; --ui-line: #d3dfd7; --ui-accent: #1b6548;
  --ui-selected: #1c6246; --ui-on: #fff; --ui-error: #9e3034;
  --ui-success-bg: #e8f4eb; --ui-success-ink: #1b6548; --ui-success-line: #74a68b;
  --ui-info-bg: #eaf2ff; --ui-info-ink: #174573; --ui-info-line: #7898c4;
  --ui-warning-bg: #fff3d6; --ui-warning-ink: #654711; --ui-warning-line: #ad7d24;
  --ui-danger-bg: #fff0ef; --ui-danger-ink: #9e3034; --ui-danger-line: #c85b50;
  --ui-danger-solid: #8f1b13; --ui-danger-on: #fff;
  --ui-chart-0: #1b6548; --ui-chart-1: #326bb4; --ui-chart-2: #506c5e;
  --ui-chart-3: #c45716; --ui-chart-4: #a52c54; --ui-chart-5: #6554a6;
  --ui-chart-6: #6b7c12; --ui-chart-7: #527890; --ui-chart-8: #7d510e;
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-radius-card: 24px; --ui-radius-tile: 17px;
  --ui-radius-control: 12px; --ui-radius-field: 9px;
  /* Compatibility aliases for section renderers; new components use --ui-* directly. */
  --theme-surface: var(--ui-panel); --theme-inset: var(--ui-soft);
  --theme-border: var(--ui-line); --theme-muted: var(--ui-muted); --card-bg: var(--ui-panel);
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #101d18; --ui-panel: #192c23; --ui-soft: #213a2e;
  --ui-ink: #e2eee6; --ui-muted: #acc3b5; --ui-line: #3a5748; --ui-accent: #93d2b0;
  --ui-selected: #b3dfc4; --ui-on: #123322; --ui-error: #ffb6b4;
  --ui-success-bg: #213a2e; --ui-success-ink: #b3dfc4; --ui-success-line: #6c9b80;
  --ui-info-bg: #203a56; --ui-info-ink: #bddcff; --ui-info-line: #8bbaf5;
  --ui-warning-bg: #463811; --ui-warning-ink: #ffe6a1; --ui-warning-line: #dba32e;
  --ui-danger-bg: #4b2524; --ui-danger-ink: #ffd1cb; --ui-danger-line: #e88b7c;
  --ui-chart-0: #93d2b0; --ui-chart-1: #8bbaf5; --ui-chart-2: #acc3b5;
  --ui-chart-3: #ffb17d; --ui-chart-4: #ff9abd; --ui-chart-5: #c4b2ff;
  --ui-chart-6: #d1e676; --ui-chart-7: #96cadd; --ui-chart-8: #f4cc81;
}
html { background: var(--ui-bg); color: var(--ui-ink); font-family: var(--ui-font); }
body { background: var(--ui-bg); color: var(--ui-ink); }
html a { color: var(--ui-accent); text-underline-offset: .16em; }
html :focus-visible { outline-color: var(--ui-accent); }
html input { accent-color: var(--ui-selected); }
html button, html input, html select, html textarea { font-family: var(--ui-font); }
html button, html .button, .ui-button {
  background: var(--ui-selected); color: var(--ui-on); border-color: var(--ui-selected);
  border-radius: var(--ui-radius-control); font-weight: 600;
}
html button:hover, html .button:hover, .ui-button:hover { background: var(--ui-selected); filter: brightness(.96); }
html button:disabled { filter: none; }
html input, html select, html textarea, .ui-field {
  background: var(--ui-bg); color: var(--ui-ink); border-color: var(--ui-line);
  border-radius: var(--ui-radius-field);
}
/* Presentation-only aliases: semantic HTML and section layout remain at the call site. */
.ui-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px; border: 1px solid var(--ui-selected); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.ui-field { min-width: 0; max-width: 100%; min-height: 44px; padding: 9px 10px; border: 1px solid var(--ui-line); font: inherit; }
.ui-card { padding: 18px; margin-bottom: 14px; overflow-wrap: anywhere; }
.ui-tile { min-width: 0; padding: 15px 12px; text-align: left; border: 1px solid var(--ui-line); }
html :is(.card, .ui-card) { background: var(--ui-panel); color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-card); }
html :is(.parameter-dialog, .chart-dialog) { background: var(--ui-bg); color: var(--ui-ink); border-color: var(--ui-line); border-radius: var(--ui-radius-card); }
.parameter-dialog::backdrop, .chart-dialog::backdrop { background: #0009; backdrop-filter: blur(3px); }
html :is(.connection-badge, .snapshot-controls > span) { background: var(--ui-panel); color: var(--ui-muted); border-color: var(--ui-line); border-radius: var(--ui-radius-control); }
html :is(header p, .muted, .ui-muted, .parameter-detail, .lighting-details, #target-help, .temperature-input-form > p, .temperature-preview) { color: var(--ui-muted); }
html :is(.reading-tile, .parameter-tile, .power-tile, .power-tile:hover, .ui-tile, .ten-tile, button.lighting-tile) { background: var(--ui-panel); color: var(--ui-ink); border-color: var(--ui-line); border-radius: var(--ui-radius-tile); }
html :is(.calculation-step, .ventilation-editor, .parameter-feedback, .temperature-controls form, .ventilation-feedback) { background: var(--ui-soft); color: var(--ui-ink); border-color: var(--ui-line); border-radius: var(--ui-radius-control); }
html :is(button.parameter-tile:hover, button.temperature-info-tile:hover, .mode-choice:hover, .ui-tile:hover) { background: var(--ui-soft); border-color: var(--ui-accent); }
html :is(.snapshot-copy-button, .dialog-heading button, .chart-toolbar button, .secondary-button, .ui-button-secondary, .temperature-tabs button, .ventilation-presets button, .mode-choice) { background: var(--ui-panel); color: var(--ui-ink); border-color: var(--ui-line); border-radius: var(--ui-radius-control); }
html :is(.snapshot-copy-button, .dialog-heading button, .chart-toolbar button, .secondary-button, .ui-button-secondary, .temperature-tabs button, .ventilation-presets button):hover { background: var(--ui-soft); }
html .site-tabs a { color: var(--ui-accent); background: var(--ui-panel); border-color: var(--ui-line); border-radius: var(--ui-radius-control); }
html :is(.site-tabs a[aria-current="page"], .temperature-tabs button[aria-pressed="true"], a.button) { background: var(--ui-selected); color: var(--ui-on); border-color: var(--ui-selected); }
html :is(.parameter-tile.mode-floor, button.parameter-tile.mode-floor:hover, .mode-choice.mode-floor[aria-pressed="true"], .calculation-total, .state-applied, .state-noop, .ten-restriction.available, .ventilation-feedback.applied, .action-success) { background: var(--ui-success-bg); color: var(--ui-success-ink); border-color: var(--ui-success-line); }
html :is(.parameter-tile.mode-primary, button.parameter-tile.mode-primary:hover, .mode-choice.mode-primary[aria-pressed="true"], .state-delivered, .state-sending, .state-accepted, .ventilation-feedback.delivered, .action-info) { background: var(--ui-info-bg); color: var(--ui-info-ink); border-color: var(--ui-info-line); }
html :is(.parameter-tile.mode-off, button.parameter-tile.mode-off:hover, .mode-choice.mode-off[aria-pressed="true"], .ten-tile.off, button.ten-tile.off:hover, .ten-tile.unknown, button.ten-tile.unknown:hover, .parameter-tile.mode-unknown, button.parameter-tile.mode-unknown:hover) { background: var(--ui-panel); color: var(--ui-muted); border-color: var(--ui-line); }
html :is(.ten-tile.on, button.ten-tile.on:hover) { background: var(--ui-warning-bg); color: var(--ui-warning-ink); border-color: var(--ui-warning-line); }
html :is(.warning, [role="alert"], .active-problem, .home-attention, .ventilation-feedback.queued, .ventilation-message, .state-queued, .action-warning) { background: var(--ui-warning-bg); color: var(--ui-warning-ink); border-color: var(--ui-warning-line); }
html :is(.active-problem.urgent, .form-error[role="alert"], .ten-restriction.blocked, .state-error, .state-expired, .state-interrupted, .state-unknown, .state-rejected, .ventilation-feedback.error) { background: var(--ui-danger-bg); color: var(--ui-danger-ink); border-color: var(--ui-danger-line); }
html .danger-button, html .danger-button:hover { background: var(--ui-danger-solid); color: var(--ui-danger-on); border-color: var(--ui-danger-solid); }
html .connection-badge.connected { color: var(--ui-success-ink); border-color: var(--ui-success-line); }
html .connection-badge.disconnected { color: var(--ui-danger-ink); border-color: var(--ui-danger-line); }
html :is(.heating-controls, .mode-controls, .lighting-details section) { border-color: var(--ui-line); }
html button.lighting-tile { color: var(--ui-muted); }
html button.lighting-tile[data-state="on"] { background: var(--ui-warning-bg); color: var(--ui-warning-ink); border-color: var(--ui-warning-line); }
html button.lighting-tile[data-state="unknown"] { background: var(--ui-panel); color: var(--ui-muted); }
html .lighting-tile[data-state="on"] .light-icon { fill: var(--ui-warning-ink); }
/* Keep selected mode and command feedback colors separate: no visual optimistic state. */
.settings-layout > header h1 { padding-right: 0; }
#appearance-choices { min-width: 0; border: 0; padding: 0; margin: 1.2rem 0 0; }
#appearance-choices legend { font-weight: 600; margin-bottom: .6rem; }
.appearance-choice { display: flex; align-items: center; gap: .8rem; padding: .85rem; margin: .5rem 0; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-control); cursor: pointer; }
.appearance-choice:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-soft); }
.appearance-choice input { width: 1.2rem; height: 1.2rem; min-height: 1.2rem; margin: 0; flex-shrink: 0; accent-color: var(--ui-selected); }
.appearance-choice small { display: block; color: var(--ui-muted); font-size: .85rem; font-weight: 400; margin-top: .2rem; }
.chart-color-0 { color: var(--ui-chart-0); }
.chart-color-1 { color: var(--ui-chart-1); }
.chart-color-2 { color: var(--ui-chart-2); }
.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); }

/* The signed-out page uses the same compact shell, without reserving badge space. */
.login-layout { width: min(calc(100% - 32px), 420px); padding-top: clamp(32px, 9vh, 80px); }
.login-layout > header h1 { padding-right: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.6px; }
.login-layout .site-brand { margin: 0 0 18px; color: var(--ui-accent); font-size: 14px; font-weight: 600; letter-spacing: -.2px; }
.login-layout .card { padding: 20px; }
.login-layout .button { width: 100%; text-align: center; }
@media (max-width: 360px) { .login-layout > header h1 { font-size: 25px; } }