/* Poêles: a dark room lit by the stove. The stove drawing is the background;
   everything else floats on frosted cards over it. */

:root {
  color-scheme: dark;
  --text: #F5F0EA;
  --text-2: #CFC6BC;
  --muted: #BDB4AA;
  --dim: #A59C92;
  --ember: #FF8A3D;
  --ember-text: #FFC59A;
  --ember-nav: #FFB37A;
  --alarm: #FF5A4E;
  --alarm-text: #FFB4AC;
  --card: rgba(16, 12, 10, 0.55);
  --card-strong: rgba(18, 13, 11, 0.82);
  --surface: #15100E;
  --menu-icon: var(--ember-nav);
  --line: rgba(255, 255, 255, 0.09);
  --room-temp: #D95926;
  --room-setpoint: #3987E5;
  /* The floor the stove stands on; the controls sit on it in front, clear of the stove. */
  --floor-h: calc(128px + env(safe-area-inset-bottom));
  --glass-y: 50%;
  /* The iPhone's own fonts: SF Pro, and SF Pro Rounded for the big words and numbers.
     Nothing to download, and the app reads like the rest of iOS. */
  --display: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  --sans: -apple-system, system-ui, "SF Pro Text", sans-serif;
}

/* Cards, pages and sheets take the room's light: cool grey with the stove off,
   warm with the fire, as the background behind them. Set on <html> so the
   sheets, which sit outside the room, follow too. */
:root[data-mood="cold"] {
  --card: rgba(12, 14, 18, 0.55);
  --card-strong: rgba(15, 17, 22, 0.84);
  --surface: #13161B;
  --menu-icon: var(--text-2);
}
:root[data-mood="alarm"] {
  --card: rgba(16, 12, 14, 0.55);
  --card-strong: rgba(20, 15, 18, 0.84);
  --surface: #161214;
  --menu-icon: var(--text-2);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0B0908; color: var(--text); font: 15px/1.4 var(--sans); }
/* No double-tap zoom anywhere: quick taps on + and − stay taps. */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
body { overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
/* Controls behave like an app's: no text selection, no long-press menu or link preview. */
button, a, .topbar, .pulldown, .controls { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
a { color: var(--ember-text); }
svg { display: block; }
[hidden] { display: none !important; }

/* ---- room ---------------------------------------------------------------- */

/* clip, not just hidden: the wide glows must never make the room scrollable. */
.room { position: fixed; inset: 0; overflow: hidden; overflow: clip; background: var(--room-bg); }
.room[data-mood="cold"] {
  --room-bg: linear-gradient(180deg, #0B0C0F 0%, #101318 60%, #151920 85%);
  --floor-bg: linear-gradient(180deg, #171A20 0%, #0B0C0F 100%);
}
.room[data-mood="warm"] {
  --room-bg: linear-gradient(180deg, #0B0908 0%, #140E0B 55%, #1E140E 85%);
  --floor-bg: linear-gradient(180deg, #24170F 0%, #120C08 100%);
}
.room[data-mood="alarm"] {
  --room-bg: linear-gradient(180deg, #0C0A0B 0%, #120F12 60%, #191317 85%);
  --floor-bg: linear-gradient(180deg, #1A1418 0%, #0C0A0B 100%);
}
.floor { position: absolute; left: 0; right: 0; bottom: 0; height: var(--floor-h); background: var(--floor-bg); }

/* Glows: the parent fades in with the mood, the child flickers. */
.glow { position: absolute; left: 50%; top: var(--glass-y); transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.glow i { position: absolute; inset: 0; border-radius: 50%; }
.glow-fire { width: 1000px; height: 1000px; }
.glow-fire i { background: radial-gradient(closest-side, rgba(255, 154, 74, 0.5), rgba(255, 122, 46, 0.2) 28%, rgba(194, 65, 12, 0.07) 62%, transparent); animation: flicker 2.4s infinite; }
.glow-hot { width: 480px; height: 480px; }
.glow-hot i { background: radial-gradient(closest-side, rgba(255, 194, 122, 0.32), transparent); animation: flicker 1.15s infinite reverse; }
.glow-floor { top: auto; bottom: var(--floor-h); width: 640px; height: 160px; transform: translate(-50%, 50%); }
.glow-floor i { background: radial-gradient(closest-side, rgba(255, 138, 61, 0.34), rgba(229, 87, 27, 0.1) 50%, transparent); animation: flicker 1.9s infinite; }
.glow-spill { width: 1000px; height: 1000px; z-index: 3; mix-blend-mode: screen; }
.glow-spill i { background: radial-gradient(closest-side, rgba(255, 138, 61, 0.16), rgba(255, 106, 26, 0.06) 55%, transparent); animation: flicker 1.6s infinite; }
.glow-alarm { width: 900px; height: 900px; }
.glow-alarm i { background: radial-gradient(closest-side, rgba(255, 74, 61, 0.32), rgba(192, 38, 28, 0.12) 40%, transparent); animation: pulse 2.8s ease-in-out infinite; }
.room[data-mood="warm"] :is(.glow-fire, .glow-hot, .glow-floor, .glow-spill) { opacity: var(--glow-level, 1); }
.room[data-mood="alarm"] .glow-alarm { opacity: 1; }
/* Behind a panel the stove and its light go away at once: no fade to catch the eye. */
.room[data-panel="open"] :is(.stove, .glow) { visibility: hidden; transition: none; }

@keyframes flicker {
  0% { opacity: 0.82; } 12% { opacity: 1; } 25% { opacity: 0.9; } 37% { opacity: 0.98; }
  50% { opacity: 0.8; } 62% { opacity: 0.95; } 75% { opacity: 0.86; } 87% { opacity: 1; } 100% { opacity: 0.82; }
}
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.85; } }

.column { position: relative; height: 100%; max-width: 430px; margin: 0 auto; }
.stove { position: absolute; left: 50%; bottom: var(--floor-h); transform: translateX(-50%); line-height: 0; pointer-events: none; }

/* ---- layout -------------------------------------------------------------- */

.ui { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; padding: calc(10px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom)); }
.main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.home { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.spacer { flex: 1; }

.banner { align-self: center; margin-bottom: 8px; padding: 6px 12px; border-radius: 999px; font: 500 12px var(--sans); color: var(--text-2); background: rgba(255, 255, 255, 0.08); }

.frost { background: var(--card); border: 1px solid var(--line); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }

/* ---- top bar: the stove switcher, centred, and the menu button ------------------ */

/* Equal side columns keep the switcher centred on the screen. */
.topbar { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 4px; }
.menu-btn { grid-column: 3; width: 40px; height: 40px; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-2); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.menu-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* On a page, the same button closes it. */
.menu-btn .icon-close, .menu-btn[data-open] .icon-menu { display: none; }
.menu-btn[data-open] .icon-close { display: block; }
.menu-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.16); }

/* The menu grows out of its button, as an iPhone pull-down menu does
   (placed and animated by app.js). Frosted, in the room's light. */
.pulldown { position: fixed; inset: auto; margin: 0; width: 232px; padding: 6px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.12); background: color-mix(in srgb, var(--surface) 70%, transparent); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); color: var(--text); transform-origin: top right; }
.pulldown-row { width: 100%; min-height: 48px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 16px; background: none; cursor: pointer; text-align: left; font: 400 17px var(--sans); }
.pulldown-row:active, .pulldown-row:focus-visible { background: rgba(255, 255, 255, 0.1); outline: none; }
.pulldown-row svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--menu-icon); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.switcher { grid-column: 2; justify-self: center; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.switcher button { height: 44px; padding: 0 16px; border: 0; border-radius: 999px; display: flex; align-items: center; gap: 8px; cursor: pointer; font: 500 15px var(--sans); background: transparent; color: var(--muted); }
.switcher button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); color: var(--text); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: #7D858F; flex: none; }
[data-tone="warm"] > .dot, .dot[data-tone="warm"] { background: var(--ember); box-shadow: 0 0 8px rgba(255, 138, 61, 0.9); }
[data-tone="alarm"] > .dot, .dot[data-tone="alarm"] { background: var(--alarm); box-shadow: 0 0 8px rgba(255, 90, 78, 0.9); }

/* ---- state, the screen's headline -------------------------------------------- */

.hero { margin: 22px auto 0; padding: 6px 14px; border: 0; border-radius: 20px; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.hero-state { display: inline-flex; align-items: center; gap: 12px; font: 300 40px/1.1 var(--display); letter-spacing: -0.01em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }
.hero-state .dot { width: 10px; height: 10px; }
.hero[data-tone="warm"] .hero-state { color: var(--ember-text); }
.hero[data-tone="alarm"] .hero-state { color: var(--alarm-text); }
/* Always one line tall, empty or not: the stove below keeps its size from one step to the next. */
.hero-step { max-width: calc(100vw - 48px); min-height: 19px; font: 500 14px/19px var(--sans); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-sub { font: 500 13px var(--sans); color: var(--muted); }

/* ---- controls ------------------------------------------------------------ */

.controls { position: relative; }
.control-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 20px; height: 96px; padding: 0 8px; }
.tile { margin-top: 6px; width: 104px; height: 64px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; background: var(--card); border: 1px solid var(--tile-border, var(--line)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
#level-btn { justify-self: end; }
#fan-btn { justify-self: start; }
.tile:disabled { cursor: default; opacity: 0.55; }
.room[data-mood="warm"] .tile { --tile-border: rgba(255, 170, 110, 0.18); }
.tile[aria-expanded="true"] { --tile-border: rgba(255, 170, 110, 0.55) !important; }
.tile-value { font: 400 24px/1 var(--display); font-variant-numeric: tabular-nums; }
.fan-row { display: flex; align-items: flex-end; gap: 8px; height: 20px; }
.fan-icon { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
/* The blades turn faster with the ventilation level. */
.fan-icon[data-level="1"], .fan-icon[data-level="2"], .fan-icon[data-level="3"] { stroke: var(--ember-nav); animation: spin var(--spin, 2s) linear infinite; }
.fan-icon[data-level="1"] { --spin: 2.6s; }
.fan-icon[data-level="2"] { --spin: 1.4s; }
.fan-icon[data-level="3"] { --spin: 0.8s; }
.tile-label { font: 500 11px var(--sans); color: var(--muted); }

.bars { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.bars span { width: 5px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); }
.bars span.on { background: var(--ember-nav); }
.adj-bars { gap: 4px; height: 20px; }
.adj-bars span { width: 7px; }

.power { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.power-btn { position: relative; width: 76px; height: 76px; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.24); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transition: background 0.3s, box-shadow 0.3s; }
.power-btn svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.power-btn[aria-pressed="true"] { color: #1B0E06; background: linear-gradient(180deg, #FFA05A 0%, #F26B1D 100%); border-color: rgba(255, 190, 140, 0.7); box-shadow: 0 0 0 6px rgba(255, 138, 61, 0.14), 0 10px 40px rgba(242, 107, 29, 0.55); }
.power-btn:disabled { cursor: default; opacity: 0.5; }
.power-btn.pending::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--ember-text); animation: spin 0.9s linear infinite; }
.power-caption { font: 500 12px var(--sans); color: #D8D0C6; }
@keyframes spin { to { transform: rotate(360deg); } }

.adjuster { position: absolute; left: 50%; bottom: 108px; transform: translateX(-50%); width: 240px; height: 60px; padding: 0 8px; border-radius: 999px; display: flex; align-items: center; justify-content: space-between; background: rgba(16, 12, 10, 0.72); border: 1px solid rgba(255, 170, 110, 0.35); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); }
.adj-value { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.adj-number { font: 400 26px/1 var(--display); font-variant-numeric: tabular-nums; }
.adj-label { font: 500 11px var(--sans); color: var(--muted); }
.round { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(255, 255, 255, 0.08); }
.round svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.round:disabled { opacity: 0.35; cursor: default; }

/* ---- alarm and other notices ------------------------------------------------ */

.notice { padding: 16px; border-radius: 24px; background: var(--card-strong); border: 1px solid var(--line); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); }
.notice[data-tone="alarm"] { background: rgba(22, 12, 12, 0.74); border-color: rgba(255, 90, 78, 0.38); }
.notice-meta { display: flex; align-items: center; gap: 8px; font: 600 12px var(--sans); color: var(--alarm-text); }
.notice[data-tone="cold"] .notice-meta { color: var(--muted); }
.notice-title { margin: 4px 0 0; font: 600 19px/1.25 var(--sans); }
.notice-text { margin: 4px 0 0; font: 400 13px/1.4 var(--sans); color: var(--text-2); }
.steps { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.steps li { display: flex; align-items: center; gap: 10px; min-height: 22px; font: 500 14px var(--sans); }
.steps b { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); font: 600 12px var(--sans); }

/* ---- panels (history, programs, settings) ----------------------------------- */

.panel { flex: 1; min-height: 0; margin-top: 16px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; border-radius: 24px; background: var(--card-strong); border: 1px solid var(--line); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel h1 { margin: 0; font: 600 20px var(--sans); }
.panel-note { margin: 12px 0 0; font: 400 13px/1.45 var(--sans); color: var(--muted); }

.segmented { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.segmented button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--muted); font: 500 13px var(--sans); }
.segmented button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); color: var(--text); }

.legend { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 12px var(--sans); color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 16px; height: 2px; border-radius: 1px; }
.key-room { background: var(--room-temp); }
.key-setpoint { background: repeating-linear-gradient(90deg, var(--room-setpoint) 0 4px, transparent 4px 7px); }
.key-on { height: 10px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }

/* Room kept for the chart while it loads, so nothing below it jumps. */
.chart { position: relative; margin-top: 10px; min-height: 220px; }
.chart svg { width: 100%; height: 220px; overflow: visible; }
.chart .grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.chart .axis { fill: var(--dim); font: 500 11px var(--sans); }
.chart .band { fill: rgba(255, 255, 255, 0.07); }
.chart .room-line { fill: none; stroke: var(--room-temp); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .setpoint-line { fill: none; stroke: var(--room-setpoint); stroke-width: 2; stroke-dasharray: 4 3; stroke-linejoin: round; }
.chart .end-dot { fill: var(--room-temp); stroke: #120D0B; stroke-width: 2; }
.chart .end-label { fill: var(--text); font: 600 12px var(--sans); }
.chart .cross { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
.tooltip { position: absolute; top: 0; padding: 8px 10px; border-radius: 12px; background: rgba(10, 8, 7, 0.92); border: 1px solid var(--line); font: 400 12px/1.5 var(--sans); color: var(--text-2); pointer-events: none; white-space: nowrap; transform: translateX(-50%); }
.tooltip strong { color: var(--text); font-weight: 600; }
.tooltip .key { margin-right: 6px; vertical-align: middle; }

.table-view { margin-top: 12px; font: 400 13px var(--sans); color: var(--text-2); }
.table-view summary { cursor: pointer; color: var(--ember-text); min-height: 32px; display: flex; align-items: center; }
.table-view table { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.table-view th, .table-view td { padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--line); }
.table-view th:first-child, .table-view td:first-child { text-align: left; }
.table-view th { color: var(--muted); font-weight: 500; }

.programs { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.programs li { padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.programs li[data-enabled="false"] { opacity: 0.55; }
.program-top { display: flex; flex-direction: column; gap: 2px; }
.program-time { font: 500 18px var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.program-meta { font: 500 12px var(--sans); color: var(--muted); }
.days { margin-top: 8px; display: flex; gap: 4px; }
.days span { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 600 11px var(--sans); color: var(--dim); background: rgba(255, 255, 255, 0.05); }
.days span.on { color: #1B0E06; background: var(--ember-nav); }

.panel-sub { margin: 24px 0 0; font: 600 16px var(--sans); }
.pair-code { margin: 10px 0 0; font: 400 34px/1.1 var(--display); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.homekit ol { margin: 10px 0 0; padding-left: 20px; font: 400 14px/1.5 var(--sans); color: var(--text-2); }
.homekit .ok { margin: 10px 0 0; display: flex; align-items: center; gap: 8px; font: 500 14px var(--sans); }
.button { margin-top: 12px; min-height: 44px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.08); cursor: pointer; font: 600 14px var(--sans); }
.button:disabled { opacity: 0.5; cursor: default; }
.button[aria-disabled] { opacity: 0.5; pointer-events: none; }
a.button { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; }
.shortcuts { display: flex; flex-wrap: wrap; gap: 8px; }

.facts { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font: 400 14px var(--sans); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- details sheet, toast ---------------------------------------------------- */

.sheet { width: min(398px, calc(100% - 32px)); margin: auto auto calc(16px + env(safe-area-inset-bottom)); padding: 20px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.sheet::backdrop { background: rgba(0, 0, 0, 0.5); }
.sheet h2 { margin: 0; font: 600 18px var(--sans); }
.setpoint { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.setpoint > div { flex: 1; }
.setpoint-label { font: 500 14px var(--sans); }
.setpoint-hint { font: 400 12px var(--sans); color: var(--muted); }
.setpoint-value { min-width: 44px; text-align: center; font: 400 22px var(--display); font-variant-numeric: tabular-nums; }
.sheet-close { margin-top: 18px; width: 100%; min-height: 48px; border: 0; border-radius: 14px; cursor: pointer; background: rgba(255, 255, 255, 0.1); font: 600 15px var(--sans); }

.toast { position: absolute; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); z-index: 5; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 999px; background: rgba(10, 8, 7, 0.92); border: 1px solid var(--line); font: 500 13px var(--sans); color: var(--text); }
.toast[data-tone="alarm"] { border-color: rgba(255, 90, 78, 0.5); color: var(--alarm-text); }

@media (prefers-reduced-motion: reduce) {
  .glow i, .fan-icon { animation: none !important; }
  .power-btn.pending::after { animation-duration: 3s; }
}

/* The switch that gives the haptic tap: kept out of sight and out of reach. */
.haptic { position: fixed; left: -100px; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ---- weekly programs ------------------------------------------------------------- */

.week { margin-top: 14px; display: grid; grid-template-columns: 18px 1fr; gap: 6px 8px; align-items: center; font: 600 11px var(--sans); color: var(--dim); }
.week-hours { grid-column: 2; position: relative; height: 14px; }
.week-hours span { position: absolute; transform: translateX(-50%); font: 500 10px var(--sans); }
.week-hours span:first-child { transform: none; }
.week-hours span:last-child { transform: translateX(-100%); }
.week-track { position: relative; height: 14px; border-radius: 4px; background: rgba(255, 255, 255, 0.05); }
.week-track i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: rgba(255, 255, 255, 0.18); }
.week-track i.on { background: var(--ember-nav); }

.programs button.program { width: 100%; text-align: left; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); cursor: pointer; display: block; }
.programs li { padding: 0; background: none; border: 0; }
.programs .program[data-state="off"] { opacity: 0.6; }
.programs .program[data-state="empty"] .program-time { color: var(--muted); font-size: 15px; }
.program-badge { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--sans); color: var(--ember-text); }

.clock { margin-top: 18px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.clock .button { margin-top: 0; }
.clock-label { font: 500 12px var(--sans); color: var(--muted); }
.clock-value { font: 500 17px var(--display); font-variant-numeric: tabular-nums; }

/* ---- program editor --------------------------------------------------------------- */

.editor-fields { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.editor-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 15px var(--sans); }
.editor-row input[switch] { width: 51px; height: 31px; accent-color: var(--ember); }
.field { display: flex; flex-direction: column; gap: 6px; font: 500 12px var(--sans); color: var(--muted); }
.field input { min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); color: var(--text); font: 400 17px var(--sans); }
.field input:focus { outline: 2px solid var(--ember); outline-offset: 1px; }
.field-note { margin: 0; font: 400 13px/1.45 var(--sans); color: var(--muted); }
.field-error { margin: 0; min-height: 18px; font: 500 14px/1.4 var(--sans); color: var(--alarm-text); }
.editor-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.editor-times label { display: flex; flex-direction: column; gap: 6px; font: 500 12px var(--sans); color: var(--muted); }
.editor-times input { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); color: var(--text); font: 500 17px var(--display); font-variant-numeric: tabular-nums; color-scheme: dark; }
.editor-days { display: flex; justify-content: space-between; gap: 4px; }
.editor-days button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: var(--dim); font: 600 13px var(--sans); cursor: pointer; }
.editor-days button[aria-pressed="true"] { background: var(--ember-nav); color: #1B0E06; border-color: transparent; }
.editor-stepper { display: flex; align-items: center; gap: 8px; }
.editor-summary { margin: 14px 0 0; font: 400 13px/1.45 var(--sans); color: var(--text-2); }
.editor-summary:empty { display: none; }
.editor-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.editor-actions .button { margin-top: 0; flex: 1; }
.sheet-primary { width: 100%; min-height: 48px; border: 0; border-radius: 14px; cursor: pointer; background: linear-gradient(180deg, #FFA05A 0%, #F26B1D 100%); color: #1B0E06; font: 600 15px var(--sans); }
.sheet-primary:disabled { opacity: 0.5; cursor: default; }

/* ---- fault journal -------------------------------------------------------------- */

.journal { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.journal li { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; }
.journal .dot { grid-row: span 2; align-self: center; }
.journal-title { font: 600 14px var(--sans); }
.journal-meta { grid-column: 2; font: 400 12px var(--sans); color: var(--muted); }