:root {
  /* Lumen brand, "copper glass": warm black, frosted glass with a bright edge, one copper accent. */
  --bg: #0b0a09;
  --surface: #151311;
  --card: #181613;
  --line: rgba(255, 240, 228, 0.07);
  --line-strong: rgba(255, 240, 228, 0.12);
  --fill-1: rgba(255, 240, 228, 0.06);
  --fill-2: rgba(255, 240, 228, 0.1);
  --text: #f5f0eb;
  --muted: #978d85;
  --accent: #e0915f;
  --accent-deep: #b9683d;
  --brand: linear-gradient(135deg, #f4c19b 0%, #e0915f 42%, #a5572f 100%);
  --brand-fill: linear-gradient(180deg, #e39a6a, #c4703f);
  --ok: #3ddc84;
  --bad: #ff5f57;
  --radius: 24px;
  --glass: rgba(27, 24, 22, 0.46);
  --glass-strong: rgba(22, 20, 18, 0.74);
  --glass-control: rgba(18, 16, 14, 0.62);
  --glass-control-border: rgba(255, 236, 222, 0.15);
  /* soft radial halo that lifts controls sitting directly on the wallpaper */
  --halo: 0 0 20px 6px rgba(0, 0, 0, 0.32), 0 0 6px 1px rgba(0, 0, 0, 0.25);
  --glass-border: rgba(255, 236, 222, 0.07);
  --glass-blur: blur(22px) saturate(165%);
  /* the bright top edge of frosted glass */
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 12px 32px -12px rgba(0, 0, 0, 0.5);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100dvh;
  /* No colour of its own: with html's background set, a body colour would paint over the wallpaper (it sits behind at z-index -2) */
  background: transparent;
  color: var(--text);
  font: 15px/1.4 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
svg { display: block; }

/* ---------- wallpaper (carousel of two cross-fading layers) ---------- */
.wallpaper {
  position: fixed;
  /* The largest screen height (browser bars hidden), so it also fills the space behind Safari's address bar */
  top: 0;
  left: 0;
  right: 0;
  height: 100lvh;
  min-height: 100vh;
  z-index: -2;
  overflow: hidden;
  /* Under the wallpapers (and instead of them, with none): a calm navy that deepens to black. Drawn, not
     downloaded, so it's there at once, and the wallpaper fades in over it without a jolt. */
  background: linear-gradient(180deg, #16264a 0%, #0c1530 38%, #050810 72%, #000 100%);
}
.wp-layer {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.wp-layer.active { opacity: 1; }
/* Behind the menus at the top: the wallpaper blurred and a little darker, fading out downwards (like iOS's bars),
   so the words stay readable on any picture. As tall as the menus (set from app.js), plus the fade. */
.top-fade {
  position: fixed; inset: 0 0 auto; z-index: -1; pointer-events: none;
  height: calc(var(--top-h, 150px) + 190px);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  background: linear-gradient(rgba(12, 10, 8, 0.58), rgba(12, 10, 8, 0.42) 40%, rgba(12, 10, 8, 0.2) 70%, rgba(12, 10, 8, 0));
  /* the fade is long and eased (no hard edge): solid behind the menus, then ~240px of gradual falloff */
  --fade: linear-gradient(#000 calc(100% - 240px), rgba(0, 0, 0, 0.93) calc(100% - 200px), rgba(0, 0, 0, 0.75) calc(100% - 160px), rgba(0, 0, 0, 0.5) calc(100% - 115px),
    rgba(0, 0, 0, 0.27) calc(100% - 75px), rgba(0, 0, 0, 0.1) calc(100% - 38px), transparent);
  -webkit-mask-image: var(--fade);
  mask-image: var(--fade);
}
.wallpaper.night-sky .wp-layer { filter: brightness(0.5) saturate(0.8); } /* the Climate page's weather photo, at night */
.has-wallpaper .wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 30%),
    linear-gradient(rgba(4, 5, 8, 0.15), rgba(4, 5, 8, 0.15)),
    linear-gradient(rgba(4, 5, 8, var(--dim, 0.35)), rgba(4, 5, 8, var(--dim, 0.35)));
}

/* ---------- ambient glow that follows whatever is lit ---------- */
.ambient {
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40vmax 30vmax at 15% 0%, var(--amb1, transparent), transparent 70%),
    radial-gradient(40vmax 30vmax at 85% 10%, var(--amb2, transparent), transparent 70%),
    radial-gradient(50vmax 40vmax at 50% 110%, var(--amb3, transparent), transparent 70%);
  opacity: 0.16;
  transition: opacity 1s;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-left)) calc(48px + env(safe-area-inset-bottom));
}

/* ---------- header ---------- */
.top {
  display: grid;
  grid-template-columns: minmax(170px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: calc(22px + env(safe-area-inset-top)) 0 6px;
}
h1 { font-size: clamp(24px, 3vw, 30px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.summary { color: var(--muted); font-size: 13.5px; margin-top: 2px; font-variant-numeric: tabular-nums; text-wrap: balance; }
.top-actions { display: flex; gap: 8px; flex: none; justify-self: end; }

/* The glass bar stays put (with its rim); the tabs scroll inside it */
.room-tabs {
  justify-self: center;
  max-width: 100%;
  min-width: 0;
  display: flex;
  border-radius: 99px;
  overflow: hidden;
  background: var(--glass-control);
  border: 1px solid var(--glass-control-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.room-tabs-scroll {
  position: relative; /* tabs' offsetLeft counts from here, for scrolling the selected one into view */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: inherit;
  overflow-x: auto;
  scrollbar-width: none;
}
.room-tabs-scroll::-webkit-scrollbar { display: none; }
.room-tab {
  position: relative;
  flex: none;
  height: 38px;
  padding: 0 16px;
  border-radius: 99px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 550;
  white-space: nowrap;
  transition: background 0.25s, color 0.25s;
}
.room-tab:hover { color: var(--text); }
.room-tab[aria-selected="true"] {
  background: var(--brand-fill);
  color: #fff;
  text-shadow: 0 1px 1px rgba(80, 30, 5, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 16px -2px rgba(196, 112, 63, 0.45);
}
.room-tab[aria-selected="true"] .lit { background: #fff; box-shadow: none; }
.room-tab .lit {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.room-tab.add { width: 38px; padding: 0; display: grid; place-items: center; }
.room-tab.add svg { width: 18px; height: 18px; }
.tab-divider { flex: none; width: 1px; height: 20px; margin: 0 6px; background: var(--line-strong); }

@media (max-width: 900px) {
  .top { grid-template-columns: minmax(0, 1fr) auto; row-gap: 14px; }
  .room-tabs { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border-radius: 99px;
  background: var(--glass-control);
  border: 1px solid var(--glass-control-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s, transform 0.15s;
}
.pill:hover { background: rgba(46, 41, 37, 0.72); }
.pill:active { transform: scale(0.96); }
.pill.primary { background: var(--brand-fill); color: #fff; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 16px -4px rgba(196, 112, 63, 0.5); }
.pill.primary:hover { background: linear-gradient(180deg, #eaa679, #cb7a49); }
.icon-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--glass-control);
  border: 1px solid var(--glass-control-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: background 0.2s, transform 0.15s;
}
.icon-btn:hover { background: rgba(40, 43, 52, 0.7); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn.plain { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; width: 36px; height: 36px; color: var(--muted); }
.icon-btn.plain:hover { background: var(--fill-1); color: var(--text); }

.banner {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 95, 87, 0.12);
  color: #ffb3ae;
  font-size: 14px;
}

/* ---------- rooms ---------- */
.room { margin-top: 32px; }
.top, .room-head, .view-tools { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 18px rgba(0, 0, 0, 0.55); }
.room-head p, .summary { color: rgba(236, 238, 243, 0.88); font-weight: 500; }
.room-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.room-head .titles { flex: 1; min-width: 0; }
.title-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.title-row .room-title { min-width: 0; }
.title-row h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-row .icon-btn { width: 32px; height: 32px; margin-left: -4px; }
.title-row .icon-btn svg { width: 17px; height: 17px; }
.room-head h2 { font-size: 20px; font-weight: 650; letter-spacing: -0.015em; }
.room-title { text-align: left; max-width: 100%; }
.room-title:hover h2 { color: #fff; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.room.focus .room-title { pointer-events: none; }
.room.focus .room-head h2 { font-size: clamp(28px, 4vw, 38px); font-weight: 700; letter-spacing: -0.03em; }
.room.focus .room-head p { font-size: 14px; }
.room-bri { display: none; }
.room.focus .room-bri { display: block; margin-bottom: 16px; background: var(--glass); border: 1px solid var(--glass-border); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); --fill: linear-gradient(90deg, color-mix(in oklab, var(--c, var(--accent)) 70%, transparent), var(--c, var(--accent))); }
.room.focus { margin-top: 20px; }
.top-actions .pill, .top-actions .icon-btn { box-shadow: var(--halo); }
.room-head .switch { box-shadow: inset 0 0 0 1px var(--glass-control-border), var(--halo); }
.room-head .switch[aria-checked="true"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), var(--halo); }
.room-head .icon-btn.plain {
  box-shadow: var(--halo);
  background: var(--glass-control);
  border: 1px solid var(--glass-control-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--text);
}
.link { color: var(--accent); font-weight: 600; }
.room-head p { color: var(--muted); font-size: 13px; margin-top: 1px; font-variant-numeric: tabular-nums; }

.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px 14px;
  padding: 0 16px;
  mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
}
.chips::-webkit-scrollbar { display: none; }
.chips.wrap-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; mask-image: none; }
.chip {
  flex: none;
  height: 34px;
  padding: 0 14px;
  border-radius: 99px;
  background: rgba(20, 22, 28, 0.6);
  border: 1px solid var(--glass-border);
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.chip:hover { background: rgba(60, 63, 72, 0.5); }
.chip:active { transform: scale(0.95); }
.chip.active { background: var(--text); color: var(--bg); border-color: transparent; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
}

/* ---------- light card ---------- */
.card {
  --c: #ffffff;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  isolation: isolate;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), opacity 0.3s;
}
.card::before {
  content: "";
  position: absolute;
  top: -70px;
  left: -50px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent); /* a soft glow without a costly blur */
  opacity: 0;
  z-index: -1;
  transition: opacity 0.6s var(--ease), background 0.6s;
}
.card.on {
  background: color-mix(in oklab, var(--c) 14%, var(--glass));
  border-color: color-mix(in oklab, var(--c) 28%, var(--glass-border));
}
.card.on::before { opacity: calc(0.12 + var(--b, 1) * 0.3); }
.card.offline { background: var(--glass-strong); }
.card.offline .bulb, .card.offline .slider, .card.offline .switch { opacity: 0.45; }
.card.offline .name { color: #b4b8c2; }
.card.offline .sub { color: #f2a48c; }

.card-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  min-width: 0;
}
.bulb {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--fill-1);
  color: var(--muted);
  transition: background 0.4s, color 0.4s, box-shadow 0.4s;
}
.card.on .bulb {
  background: var(--c);
  color: rgba(0, 0, 0, 0.72);
  box-shadow: 0 0 26px -6px var(--c);
}
.meta { display: flex; flex-direction: column; min-width: 0; width: 100%; }
.name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.card.on .sub { color: color-mix(in oklab, var(--c) 35%, #b9bdc7); }
.card .switch { position: absolute; top: 14px; right: 14px; }

/* ---------- switch ---------- */
.switch {
  --c: var(--accent);
  position: relative;
  width: 48px;
  height: 28px;
  flex: none;
  border-radius: 99px;
  background: rgba(12, 14, 19, 0.66);
  box-shadow: inset 0 0 0 1px var(--glass-control-border);
  transition: background 0.3s var(--ease), box-shadow 0.3s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s var(--ease);
}
.switch[aria-checked="true"] { background: color-mix(in oklab, var(--c) 82%, #000); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.switch:disabled::after { background: #8a8f9c; }

/* ---------- sliders ---------- */
.slider {
  --p: 0;
  container-type: inline-size; /* lets the words know how far the fill reaches (cqw) */
  --fill: color-mix(in oklab, var(--c, #fff) 38%, rgba(255, 255, 255, 0.1));
  position: relative;
  height: 36px;
  border-radius: 12px;
  background: var(--fill-1);
  overflow: hidden;
  touch-action: pan-y;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.slider .fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: max(14px, calc(var(--p) * 100%));
  background: var(--fill);
  /* straight end, with the handle on it; the slider's own rounded corners clip the start */
}
.slider .fill::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 3px;
  height: 42%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-50%);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  transition: opacity 0.15s;
}
.slider.knob-hidden .fill::after { opacity: 0; }
.slider:not(.dragging) .fill { transition: width 0.3s var(--ease); }
.card .slider { --fill: linear-gradient(90deg, color-mix(in oklab, var(--c) 70%, transparent), var(--c)); }
.card:not(.on) .slider { --fill: rgba(255, 255, 255, 0.12); }
.card:not(.on) .slider .fill::after { background: rgba(255, 255, 255, 0.35); }

.slider .label, .slider .value {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  /* Two-tone words: the part with the fill behind it takes the light's ink colour
     (dark on yellow or white), the rest stays white. */
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.slider .label { background-image: linear-gradient(90deg, var(--ink, #fff) calc(var(--p) * 100cqw - 16px), #fff 0); }
.slider .value { background-image: linear-gradient(270deg, #fff calc((1 - var(--p)) * 100cqw - 16px), var(--ink, #fff) 0); }
.slider .label { left: 16px; }
.slider .value { right: 16px; }
.slider.lg { height: 56px; border-radius: 18px; }

/* gradient track with a round knob (colour temperature) */
.slider.track { overflow: visible; background: var(--track); height: 44px; border-radius: 14px; }
.slider.track .fill { display: none; }
.slider .knob { display: none; }
.slider.track .knob {
  display: block;
  position: absolute;
  top: 50%;
  left: calc(var(--p) * (100% - 36px) + 18px);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--knob, transparent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
}
.slider.track:not(.dragging) .knob { transition: left 0.3s var(--ease); }

/* ---------- dialogs / sheets ---------- */
dialog.sheet {
  width: 100%;
  max-width: 100%;
  max-height: 92dvh;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: 28px 28px 0 0;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(40px) saturate(170%);
  backdrop-filter: blur(40px) saturate(170%);
  color: var(--text);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
dialog.sheet[open] { animation: sheet-up 0.38s var(--ease); display: flex; flex-direction: column; }
dialog.sheet[open].closing { animation: sheet-down 0.23s cubic-bezier(0.4, 0, 1, 1) forwards; pointer-events: none; }
dialog.sheet[open].closing::backdrop { animation: fade-out 0.23s forwards; }
@keyframes sheet-down { to { transform: translateY(40px); opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
dialog.sheet::backdrop { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
dialog.sheet[open]::backdrop { animation: fade 0.3s; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@media (min-width: 720px) {
  dialog.sheet {
    width: min(480px, 92vw);
    margin: auto;
    border-radius: 28px;
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 120px rgba(0, 0, 0, 0.6);
  }
  dialog.sheet.wide { width: min(620px, 92vw); }
  /* a camera's card: as big as the screen allows (its 16:9 picture plus the controls under it still fit) */
  dialog.sheet:has(.cam-stage) { width: min(1120px, 92vw, calc((92dvh - 330px) * 16 / 9 + 48px)); }
  .handle { display: none; }
}
.sheet-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sheet-body > * { flex-shrink: 0; } /* long lists scroll instead of squashing inputs */
.handle { width: 38px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 0 auto -4px; flex: none; }
.sheet-head { display: flex; align-items: center; gap: 14px; padding-top: 8px; }
.sheet-head .bulb { width: 48px; height: 48px; border-radius: 16px; flex: none; }
.sheet-head .titles { flex: 1; min-width: 0; }
.sheet-head h2 { font-size: 20px; font-weight: 650; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-head p { color: var(--muted); font-size: 13px; }
.sheet .on-state .bulb { background: var(--c); color: rgba(0, 0, 0, 0.72); box-shadow: 0 0 30px -6px var(--c); }
.sheet .slider.lg { --fill: linear-gradient(90deg, color-mix(in oklab, var(--c) 70%, transparent), var(--c)); }

.tabs { display: flex; gap: 4px; padding: 4px; background: var(--fill-1); border-radius: 14px; }
.tab {
  flex: 1;
  height: 36px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  transition: background 0.2s, color 0.2s;
}
.tab[aria-selected="true"] { background: var(--fill-2); color: var(--text); }
.panel { display: flex; flex-direction: column; gap: 16px; }
.panel[hidden] { display: none; }
.hint { color: var(--muted); font-size: 13px; }
.field-label { font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: -8px; }

.wheel {
  position: relative;
  width: min(260px, 72vw);
  aspect-ratio: 1;
  margin: 4px auto;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, #fff, rgba(255, 255, 255, 0)),
    conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  box-shadow: 0 0 0 1px var(--line), 0 24px 60px -24px rgba(0, 0, 0, 0.8);
  touch-action: none;
  cursor: crosshair;
}
.wheel-marker {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--m, #fff);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.wheel.inactive .wheel-marker { opacity: 0.35; }
.swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--s);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: transform 0.15s;
}
.swatch:hover { transform: scale(1.1); }

.search {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--fill-1);
  outline: none;
}
.search:focus { border-color: var(--line-strong); background: var(--fill-2); }
.fx-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 6px;
  max-height: 232px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}
.fx {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--fill-1);
  text-align: left;
  font-size: 13px;
  font-weight: 550;
  transition: background 0.15s;
}
.fx:hover { background: var(--fill-2); }
.fx.active { background: var(--c, var(--text)); color: rgba(0, 0, 0, 0.8); }

.select {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--fill-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238a8f9c' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  appearance: none;
  outline: none;
}
.select option { background: var(--surface); }

/* ---------- settings ---------- */
.settings-section { display: flex; flex-direction: column; gap: 8px; }
.settings-section h3 { font-size: 13px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.section-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.list { display: flex; flex-direction: column; gap: 6px; }
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border-radius: 16px;
  background: var(--fill-1);
}
.row .grow { flex: 1; min-width: 0; }
.row .title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .detail { font-size: 12.5px; color: var(--muted); }
.row .pill { height: 34px; font-size: 13px; padding: 0 14px; }
.row .kind { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--fill-1); color: var(--muted); flex: none; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 6px; vertical-align: 1px; }
.dot.bad { background: var(--bad); }
.dot.warn { background: var(--accent); }
.room-input {
  width: 116px;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--fill-1);
  outline: none;
  font-size: 13px;
}
.room-input:focus { border-color: var(--line-strong); }
.add-form { display: flex; gap: 8px; }
.add-form .select { width: 110px; flex: none; }
.add-form .search { flex: 1; min-width: 0; }
.empty-note { color: var(--muted); font-size: 13.5px; padding: 6px 2px; }

/* ---------- wallpaper settings ---------- */
.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.wp-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: var(--fill-1) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px var(--glass-border);
  overflow: hidden;
}
.wp-thumb.add, .wp-thumb.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  box-shadow: none;
}
.wp-thumb.add:hover { background-color: var(--fill-2); color: var(--text); }
.wp-thumb.loading { animation: pulse 1.2s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: 0.5; } }
.wp-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.2s;
}
.wp-remove svg { width: 14px; height: 14px; }
.wp-thumb:hover .wp-remove, .wp-remove:focus-visible { opacity: 1; }
@media (hover: none) { .wp-remove { opacity: 1; } }
.wp-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 4px; }
.wp-options .slider { height: 42px; }
@media (max-width: 480px) { .wp-options { grid-template-columns: 1fr; } }

/* ---------- group editor ---------- */
.pick-room { display: flex; flex-direction: column; gap: 14px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.pick {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 6px 12px 6px 6px;
  border-radius: 14px;
  background: var(--fill-1);
  border: 1px solid transparent;
  text-align: left;
  font-size: 13.5px;
  font-weight: 550;
  transition: background 0.2s, border-color 0.2s;
}
.pick:hover { background: var(--fill-2); }
.pick-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--fill-1); color: var(--muted); transition: background 0.2s, color 0.2s; }
.pick-icon svg { width: 18px; height: 18px; }
.pick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick[aria-pressed="true"] { background: color-mix(in oklab, var(--c) 16%, transparent); border-color: color-mix(in oklab, var(--c) 45%, transparent); }
.pick[aria-pressed="true"] .pick-icon { background: var(--c); color: rgba(0, 0, 0, 0.72); }
.form-actions {
  position: sticky;
  bottom: calc(-24px - env(safe-area-inset-bottom));
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 -20px calc(-24px - env(safe-area-inset-bottom));
  padding: 14px 20px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--glass-strong) 30%);
}
.pill.danger { color: #ff8a84; margin-right: auto; }

/* ---------- collapsible rooms ---------- */
.view-tools { display: flex; justify-content: flex-end; margin: 18px 0 -18px; }
.link-btn.subtle { color: var(--muted); }
.link-btn.subtle:hover { color: var(--text); }
.room-fold { width: 28px !important; height: 28px !important; margin: 0 -8px 0 -6px; }
.room-fold svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.room.collapsed .room-fold svg { transform: rotate(-90deg); }
.room.focus .room-fold { display: none; }
.room.collapsed { margin-top: 18px; }
.room.collapsed .chips, .room.collapsed .grid, .room.collapsed .empty-note, .room.collapsed .room-bri { display: none; }
.room.collapsed .room-head { margin-bottom: 0; }

/* ---------- combined lights ---------- */
.member { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: var(--fill-1); }
.member-top { display: flex; align-items: center; gap: 12px; }
.member-open { text-align: left; min-width: 0; }
.member-open .title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-open .detail { font-size: 12.5px; color: var(--muted); }
.member .kind { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--fill-1); color: var(--muted); flex: none; transition: background 0.3s; }
.member.on .kind { background: var(--c); color: rgba(0, 0, 0, 0.72); }
.member .slider { height: 32px; --fill: linear-gradient(90deg, color-mix(in oklab, var(--c) 40%, transparent), var(--c)); }
.member:not(.on) .slider { --fill: rgba(255, 255, 255, 0.12); }
.sheet-body > .link-btn { align-self: center; font-size: 13px; }

/* ---------- people & sign in ---------- */
.pw-form { display: flex; flex-direction: column; gap: 8px; }
.pw-form .pill { align-self: flex-end; }
.pw-details summary, .login-link summary { cursor: pointer; color: var(--muted); font-size: 13.5px; font-weight: 600; padding: 4px 2px; }
.pw-details[open] summary { margin-bottom: 8px; }
.row .pill svg { width: 16px; height: 16px; }
.scoped { display: flex; flex-direction: column; gap: 14px; }
.pick-grid.bridges { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pick:disabled { cursor: default; opacity: 0.75; }
.link-btn { align-self: flex-start; color: #ff8a84; font-size: 13px; font-weight: 600; }
.link-btn:hover { text-decoration: underline; }
.form-actions .grow-hint { margin-right: auto; align-self: center; }
.form-actions .pill.danger + .grow-hint { margin-right: auto; }
.pill.danger { margin-right: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.login-card {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 24px 24px;
  border-radius: 28px;
  text-align: center;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.login-card .glyph {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: var(--brand);
  color: rgba(40, 18, 6, 0.8);
}
.login-card p { color: var(--muted); }
.login-form { display: flex; gap: 8px; width: 100%; }
.login-form .search { flex: 1; min-width: 0; }
.login-link { width: 100%; text-align: left; }
.login-link p { font-size: 13.5px; margin: 6px 0 10px; }

/* ---------- empty state ---------- */
.empty {
  margin: 12vh auto 0;
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.empty .glyph {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  background: var(--brand);
  color: rgba(40, 18, 6, 0.8);
  box-shadow: 0 20px 60px -20px var(--accent);
}
.empty h2 { font-size: 24px; letter-spacing: -0.02em; }
.empty p { color: var(--muted); }

/* ---------- toast ---------- */
.toast {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s var(--ease);
  z-index: 10;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 420px) {
  .pill .txt { display: none; }
  .pill.icon-only-sm { width: 42px; padding: 0; justify-content: center; }
  .room-input { width: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

a.pill { color: inherit; text-decoration: none; }
.member-open { flex: 1; }

/* ---------- personal Home (Control Center-style tiles) ---------- */
.home { margin-top: 22px; }
.home-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; margin-bottom: 14px; }
.home-bar .hint { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.home-actions { display: flex; gap: 8px; margin-left: auto; }
.home-actions .pill svg { width: 17px; height: 17px; }
.home-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  grid-auto-rows: var(--cell, 80px);
  grid-auto-flow: dense;
  gap: var(--gap, 12px);
}
.home-empty { grid-column: 1 / -1; }

.tile {
  --c: #e0915f;
  --p: 0;
  position: relative;
  grid-column: span var(--w, 1);
  grid-row: span var(--h, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  padding: 12px;
  min-width: 0;
  border-radius: min(26px, calc(var(--cell, 80px) * 0.3));
  background: var(--glass);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  transition: background 0.35s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s;
}
.tile:active:not(.sliding) { transform: scale(0.97); }
.tile-fill { position: absolute; z-index: -1; left: 0; bottom: 0; background: linear-gradient(90deg, color-mix(in oklab, var(--c) 70%, transparent), var(--c)); transition: width 0.3s var(--ease), height 0.3s var(--ease); }
.tile.sliding .tile-fill { transition: none; }
.tile-icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  transition: background 0.35s, color 0.35s;
}
.tile.on .tile-icon { background: var(--c); color: rgba(0, 0, 0, 0.75); box-shadow: 0 0 18px -4px var(--c); }
.tile-text { display: flex; flex-direction: column; min-width: 0; }
.tile-name { font-weight: 650; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); }
.tile-sub { font-size: 12.5px; color: rgba(236, 238, 243, 0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tile.offline { opacity: 0.55; }
.tile-more { position: absolute; top: 10px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: rgba(255, 255, 255, 0.7); }
.tile-more:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.tile-more svg { width: 18px; height: 18px; }

/* 1×1: a round-cornered toggle, filled with the light's colour when on */
.tile.shape-toggle { align-items: center; justify-content: center; text-align: center; padding: 8px; }
.tile.shape-toggle .tile-fill { display: none; }
.tile.shape-toggle .tile-icon { background: none; box-shadow: none; width: auto; height: auto; }
.tile.shape-toggle .tile-icon svg { width: 26px; height: 26px; }
.tile.shape-toggle .tile-sub { display: none; }
.tile.shape-toggle .tile-name { font-size: 11.5px; font-weight: 600; max-width: 100%; }
.tile.shape-toggle.on { background: color-mix(in oklab, var(--c) 88%, #fff 12%); border-color: transparent; box-shadow: 0 8px 26px -8px var(--c); }
.tile.shape-toggle.on .tile-icon, .tile.shape-toggle.on .tile-name { color: #fff; text-shadow: none; }
.tile.shape-toggle.on.light-bg .tile-icon, .tile.shape-toggle.on.light-bg .tile-name { color: rgba(0, 0, 0, 0.78); }
/* bigger toggles (scenes spanning several cells) show their room too */
.tile.shape-toggle.scene.multi { flex-direction: row; justify-content: flex-start; text-align: left; gap: 12px; padding: 12px; }
.tile.scene .tile-sub { display: block; }
.tile.shape-toggle.on .tile-sub { color: rgba(255, 255, 255, 0.82); text-shadow: none; }
.tile.shape-toggle.on.light-bg .tile-sub { color: rgba(0, 0, 0, 0.6); }

/* wide: horizontal brightness bar across the whole tile */
.tile.shape-wide { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; touch-action: pan-y; }
.tile.shape-wide .tile-fill { top: 0; width: calc(var(--p) * 100%); }
.tile.shape-wide .tile-text { padding-right: 24px; }

/* tall and large: Control Center's vertical brightness slider */
.tile.shape-tall { touch-action: pan-y; } /* the page scrolls over tall tiles; dimming them takes a short hold first */
.tile.primed { box-shadow: 0 0 0 2px color-mix(in oklab, var(--c) 70%, transparent), var(--glass-shadow); transform: scale(0.98); }
.tile.shape-tall .tile-fill { right: 0; height: calc(var(--p) * 100%); background: linear-gradient(0deg, var(--c), color-mix(in oklab, var(--c) 70%, transparent)); }
/* A light colour (yellow, white) filling the tile behind the words: dark text */
.tile.ink .tile-name { color: rgba(24, 16, 8, 0.86); text-shadow: none; }
.tile.ink .tile-sub { color: rgba(24, 16, 8, 0.62); text-shadow: none; }
.tile.ink .tile-more { color: rgba(24, 16, 8, 0.55); }
.tile:not(.on) .tile-fill { opacity: 0; }

/* ---- edit mode ---- */
.home-grid.editing .tile { touch-action: none; cursor: grab; animation: wiggle 0.34s ease-in-out infinite alternate; }
.home-grid.editing .tile:nth-child(2n) { animation-delay: -0.17s; }
.home-grid.editing .tile:nth-child(3n) { animation-duration: 0.3s; }
.home-grid.editing .tile.lifted, .home-grid.editing .tile.resizing { animation: none; z-index: 5; cursor: grabbing; box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.7); }
.home-grid.editing .tile.lifted { opacity: 0.92; transition: none; }
@keyframes wiggle { from { rotate: -0.7deg; } to { rotate: 0.7deg; } }
.tile-remove, .tile-resize { display: none; }
.home-grid.editing .tile-more { display: none; }
.home-grid.editing .tile-remove {
  display: grid;
  place-items: center;
  position: absolute;
  top: 6px;
  left: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(40, 42, 50, 0.9);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 2;
}
.tile-remove svg { width: 14px; height: 14px; }
.home-grid.editing .tile-resize {
  display: block;
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 22px;
  height: 22px;
  border-right: 3px solid rgba(255, 255, 255, 0.9);
  border-bottom: 3px solid rgba(255, 255, 255, 0.9);
  border-bottom-right-radius: 14px;
  cursor: nwse-resize;
  touch-action: none;
  z-index: 2;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
.home-grid.editing .tile-resize::before { content: ""; position: absolute; inset: -12px; } /* bigger touch target */

/* icon picker */
.glyph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.glyph { aspect-ratio: 1; display: grid; place-items: center; border-radius: 14px; background: var(--fill-1); color: var(--text); border: 1px solid transparent; transition: background 0.15s; }
.glyph:hover { background: var(--fill-2); }
.glyph.active { background: var(--text); color: var(--bg); }
.pick.added { border-color: color-mix(in oklab, var(--c) 45%, transparent); background: color-mix(in oklab, var(--c) 16%, transparent); }
@media (prefers-reduced-motion: reduce) { .home-grid.editing .tile { animation: none; } }

/* ---------- room as a pop-up card (from Home) ---------- */
@media (min-width: 720px) { dialog.sheet.xwide { width: min(820px, 94vw); } }
.sheet-x { position: absolute; top: 14px; right: 14px; z-index: 3; }
.room-sheet .room { margin-top: 0; }
.room-sheet .room-head { padding-right: 44px; }
.room-sheet .room-head h2 { font-size: clamp(24px, 3.4vw, 32px); }
.room-sheet .chips { margin: 0 -20px 14px; padding: 0 20px; }

/* every tile has a visible way into its room/light; narrow tiles get a smaller corner button */
.tile-more::before { content: ""; position: absolute; inset: -8px; } /* bigger touch target */
.tile.narrow { padding: 10px; }
.tile.narrow .tile-more { top: 5px; right: 3px; width: 22px; height: 22px; }
.tile.narrow .tile-more svg { width: 15px; height: 15px; }
.tile.narrow.shape-tall .tile-icon { width: 34px; height: 34px; }
.tile.narrow.shape-tall .tile-icon svg { width: 19px; height: 19px; }
.tile.shape-toggle.on .tile-more { color: rgba(255, 255, 255, 0.85); }
.tile.shape-toggle.on.light-bg .tile-more { color: rgba(0, 0, 0, 0.55); }
.tile.shape-toggle .tile-text { width: 100%; align-items: center; }
.tile.shape-toggle.scene.multi .tile-text { align-items: flex-start; }

.fx-kind { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--fill-2); font-size: 10.5px; font-weight: 600; color: var(--muted); vertical-align: 1px; }
.fx.active .fx-kind { background: rgba(0, 0, 0, 0.15); color: inherit; }

/* free placement: empty cells while editing, and where a dragged tile will land */
.home-slot {
  border-radius: min(26px, calc(var(--cell, 80px) * 0.3));
  border: 1.5px dashed rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.home-ghost {
  border-radius: min(26px, calc(var(--cell, 80px) * 0.3));
  border: 2px dashed rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
  z-index: 1;
}
.home-bar { flex-wrap: wrap; row-gap: 8px; }
.home-bar .hint { order: 2; flex-basis: 100%; }
.home-bar .hint:empty { display: none; }
.pill { white-space: nowrap; }

/* ---------- real glass: a bright rim that catches the light at two corners ---------- */
.room-tabs { position: relative; }
.card::after, .tile::after, .room-tabs::after, dialog.sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px; /* the rim's width */
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0.38));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ---------- effect previews: a tiny LED strip on each effect button ---------- */
.fx, .chip.fx-flow, .chip.fx-chase, .chip.fx-twinkle, .chip.fx-flicker, .chip.fx-breathe, .chip.fx-strobe, .chip.fx-police, .chip.fx-solid { position: relative; overflow: hidden; isolation: isolate; }
.fx { padding-bottom: 12px; }
.fx::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--g, none); opacity: 0.13; } /* a faint glow of the effect's colours */
.fx.active::before { opacity: 0; }
.fx-strip {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 5px;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: color-mix(in oklab, var(--a, #fff) 18%, transparent);
  pointer-events: none;
}
.chip .fx-strip { left: 12px; right: 12px; bottom: 3px; height: 2px; }
.fx-strip i { position: absolute; inset: 0; background: var(--g); }
.fx.active .fx-strip { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }

/* flow: the colours slide along (rainbow, ocean, aurora, sunset…) */
.fx-flow .fx-strip i { right: auto; width: 200%; background-size: 50% 100%; animation: fx-slide 4s linear infinite; }
@keyframes fx-slide { to { transform: translateX(-50%); } }
/* chase: a bright spot runs along (chase, scanner, comet…) */
.fx-chase .fx-strip i { right: auto; width: 34%; background: linear-gradient(90deg, transparent, var(--a) 45%, #fff 50%, var(--a) 55%, transparent); animation: fx-run 1.6s linear infinite; }
@keyframes fx-run { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
/* twinkle: dots that glitter in two alternating sets */
.fx-twinkle .fx-strip i { background: radial-gradient(circle, var(--a) 0 1.3px, transparent 1.8px) 0 50% / 10px 100% repeat-x; animation: fx-glitter 1.3s ease-in-out infinite alternate; }
.fx-twinkle .fx-strip i::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, var(--b) 0 1.3px, transparent 1.8px) 5px 50% / 10px 100% repeat-x; animation: fx-glitter 1.3s ease-in-out -0.65s infinite alternate; }
@keyframes fx-glitter { from { opacity: 0.15; } to { opacity: 1; } }
/* breathe: slow pulse */
.fx-breathe .fx-strip i { animation: fx-breathe 3s ease-in-out infinite alternate; }
@keyframes fx-breathe { from { opacity: 0.12; } to { opacity: 1; } }
/* strobe: hard flashes */
.fx-strobe .fx-strip i { animation: fx-strobe 0.6s steps(1) infinite; }
@keyframes fx-strobe { 50% { opacity: 0.08; } }
/* police: red and blue take turns */
.fx-police .fx-strip i { background: linear-gradient(90deg, var(--a) 50%, transparent 50%); animation: fx-strobe 0.5s steps(1) infinite; }
.fx-police .fx-strip i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 50%, var(--b) 50%); animation: fx-strobe 0.5s steps(1) -0.25s infinite; }
/* flicker: restless warm light (fire, candle) */
.fx-flicker .fx-strip i { animation: fx-flicker 0.9s linear infinite; }
@keyframes fx-flicker { 0% { opacity: 1; } 12% { opacity: 0.65; } 24% { opacity: 0.95; } 38% { opacity: 0.7; } 52% { opacity: 1; } 66% { opacity: 0.6; } 80% { opacity: 0.9; } 100% { opacity: 1; } }

/* only visible buttons animate, and only for a few seconds after the list is opened or touched;
   still pictures for "Reduce Motion" */
.fx-strip i, .fx-strip i::after { animation-play-state: paused; }
.awake .play .fx-strip i, .awake .play .fx-strip i::after { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .fx-strip i, .fx-strip i::after { animation: none !important; } }

/* WLED: the running effect's own controls, and its colour slots */
.fx-ctrls { display: flex; flex-direction: column; gap: 8px; }
.fx-ctrls .field-label { margin-top: 4px; }
.slot-chips { margin-bottom: 12px; }
.chip.slot { display: inline-flex; align-items: center; gap: 7px; }
.slot-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--s); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }

/* A fan's readings (e.g. "PM2.5 1.0 · Great") on their own line */
.sub.reading { margin-top: 1px; color: color-mix(in oklab, var(--c, #fff) 45%, #cfd3da); }

/* ---------- information tiles: air quality and weather ---------- */
.tile-panel { display: none; }
.tile.info-tile > .tile-icon, .tile.info-tile > .tile-text, .tile.info-tile > .tile-fill, .tile.info-tile > .tile-more { display: none; }
.tile.info-tile { cursor: default; }
.tile.info-tile .tile-panel { display: flex; position: absolute; inset: 0; padding: 12px 14px; pointer-events: none; }
.tile-panel > div { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: center; }
.tile-panel .panel-small { justify-content: center; }
.tile-panel .panel-big { flex-direction: column; justify-content: center; gap: 6px; text-align: center; }
.p-label { font-size: 12px; font-weight: 650; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-sub { font-size: 12px; color: rgba(236, 238, 243, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

/* air: a gauge around the main reading */
.air-gauge { position: relative; flex: none; width: var(--g); height: var(--g); }
.air-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.air-gauge .gauge-fill { filter: drop-shadow(0 0 5px currentColor); transition: stroke-dasharray 0.8s var(--ease), stroke 0.8s; }
.air-read { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.air-read b { font-size: calc(var(--g) * 0.3); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.air-read small { margin-top: 4px; font-size: 10px; font-weight: 600; color: var(--muted); }
.air-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.panel-big .air-text { align-items: center; max-width: 100%; }
.air-word { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.air-filter { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; color: var(--muted); }
.air-filter i { flex: 1; min-width: 36px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #7cc8f0 calc(var(--f) * 100%), rgba(255, 255, 255, 0.12) 0); }

/* weather */
.wx-main { display: flex; align-items: center; gap: 8px; flex: none; }
.wx-icon svg { width: 40px; height: 40px; stroke-width: 1.5; }
.wx-sun svg, .wx-moon svg { color: #ffc66d; }
.wx-rain svg, .wx-snow svg, .wx-fog svg, .wx-wind svg, .wx-cloud svg, .wx-partly svg { color: #bfe3f7; }
.wx-bolt svg { color: #ffd60a; }
.wx-temp { font-size: 36px; font-weight: 650; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.panel-small .wx-icon svg { width: 28px; height: 28px; }
.panel-small .wx-temp { font-size: 26px; }
.panel-small.wx { flex-direction: column; gap: 4px; }
.wx-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.panel-big .wx-text { align-items: center; }
.wx-word { font-size: 16px; font-weight: 650; }
.wx-sun { display: flex; align-items: center; gap: 5px; }
.wx-sun span svg { width: 14px; height: 14px; color: #ffc66d; }
.panel-big .air-word { font-size: 17px; }
.panel-big .p-sub.more { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.panel-big .air-filter { width: 80%; }
.air-filter span { white-space: nowrap; }

/* ---------- older Safari (iOS 15.4–16.1) and other older browsers ----------
   Without color-mix() the blended colours are dropped (and a fill set through --fill would vanish),
   so use plain colours instead. Without container units the two-tone slider words would be invisible. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .card.on { background: var(--glass); border-color: var(--c); }
  .card.on .sub, .sub.reading { color: #d6d9e0; }
  .switch[aria-checked="true"] { background: var(--c); }
  .slider { --fill: rgba(255, 255, 255, 0.3); }
  .card .slider, .sheet .slider.lg, .member .slider, .room.focus .room-bri { --fill: var(--c, var(--accent)); }
  .card:not(.on) .slider { --fill: rgba(255, 255, 255, 0.12); }
  .tile-fill, .tile.shape-tall .tile-fill { background: var(--c); }
  .tile.shape-toggle.on { background: var(--c); }
  .pick[aria-pressed="true"], .pick.added { background: rgba(255, 255, 255, 0.1); border-color: var(--c); }
  .fx-strip { background: rgba(255, 255, 255, 0.08); }
}
@supports not (width: 1cqw) {
  .slider .label, .slider .value { background: none; color: #fff; -webkit-text-fill-color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
}

/* sensor tiles: temperature, doors, motion, leaks, power, … */
.sx-main { display: flex; align-items: center; gap: 8px; flex: none; }
.sx-icon svg { width: 30px; height: 30px; stroke-width: 1.6; }
.sx-value { font-size: 30px; font-weight: 650; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel-small.sx { flex-direction: column; gap: 6px; }
.panel-small .sx-icon svg { width: 24px; height: 24px; }
.panel-small .sx-value { font-size: 18px; }
.panel-big.sx .sx-main { flex-direction: column; gap: 6px; }
.panel-big .sx-value { font-size: 36px; }
.sx-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.panel-big .sx-text { align-items: center; max-width: 100%; }
.sx-low { color: #ffb340; }
/* something needs attention (door open, leak, smoke): the tile glows */
.tile.info-tile.alert { border-color: color-mix(in oklab, var(--c) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--c) 40%, transparent), 0 8px 30px -8px var(--c); }
@supports not (color: color-mix(in srgb, red, blue)) { .tile.info-tile.alert { border-color: var(--c); } }

/* A card's extra choice (e.g. an air purifier's timer), next to its name like a switch */
.extra-select { width: auto; min-width: 96px; height: 36px; flex: none; }

/* An air tile that also works its purifier: tap = on/off, › or hold = its controls */
.tile.info-tile.controls { cursor: pointer; }
.tile.info-tile.controls > .tile-more { display: grid; z-index: 2; }
.air-device { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.air-device span { display: grid; width: 14px; height: 14px; }
.air-device svg { width: 14px; height: 14px; }
.air-device.on { color: #7cc8f0; }

/* ---------- robot vacuum sheet ---------- */
.vac { gap: 12px; }
.vac-state { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.vac-state.alert { color: #ff8a5b; }
.vac-detail { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 18px; }
.vac-actions { display: flex; gap: 8px; }
.vac-actions .pill { gap: 6px; }
.vac-actions .pill span, .vac-actions .pill svg { width: 16px; height: 16px; }
.vac-go { flex: 1; justify-content: center; }
.vac-rooms { display: flex; flex-direction: column; gap: 8px; }
.vac-rooms > .pill { align-self: flex-start; }
.vac-map { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 16px; background: rgba(0, 0, 0, 0.2); }
.pill:disabled { opacity: 0.45; box-shadow: none; }

/* device sheets: buttons and choices are light, rounded blocks like the switch rows, not dark glass pills */
#lightSheet .pill:not(.primary):not(.danger) { background: var(--fill-1); border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#lightSheet .pill:not(.primary):not(.danger):hover { background: var(--fill-2); }
#lightSheet .vac-actions .pill, #lightSheet .vac-rooms > .pill { height: 48px; border-radius: 16px; }
#lightSheet .vac-rooms > .pill { align-self: stretch; justify-content: center; }
#lightSheet .row .pill:not(.primary) { height: 36px; border-radius: 12px; border: 1px solid var(--line); } /* like the choice boxes next to it */
#lightSheet .chip { background: var(--fill-1); border-color: transparent; border-radius: 12px; }
#lightSheet .chip:hover { background: var(--fill-2); }
#lightSheet .chip.active { background: var(--text); color: var(--bg); }
/* one bar of choices with a thin line between them (a robot's rooms) */
.seg { display: flex; min-height: 48px; padding: 4px; border-radius: 16px; background: var(--fill-1); overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg-btn { position: relative; flex: 1 0 auto; padding: 0 14px; border: 0; border-radius: 12px; background: none; color: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background 0.2s, color 0.2s; }
.seg-btn + .seg-btn::before { content: ''; position: absolute; left: 0; top: 30%; bottom: 30%; width: 1px; background: rgba(255, 255, 255, 0.14); transition: opacity 0.2s; }
.seg-btn.active::before, .seg-btn.active + .seg-btn::before { opacity: 0; }
.seg-btn:hover { background: var(--fill-1); }
.seg-btn.active { background: var(--text); color: var(--bg); }

/* robot vacuum tile: the robot itself (cut out of its product photo), its status and battery */
.vac-tile { --vc: rgba(236, 238, 243, 0.6); }
.vac-tile.busy { --vc: #6fd6b0; }
.vac-tile.home { --vc: #7cc8f0; }
.vac-tile.error { --vc: #ff8a5b; }
.vac-tile.off { --vc: #8e8e93; }
.vac-pic { flex: none; display: block; width: 46%; height: auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)); }
.vac-tile.busy .vac-pic, .vac-tile.home .vac-pic { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 16px color-mix(in oklab, var(--vc) 55%, transparent)); }
.vac-tile.off .vac-pic { opacity: 0.5; }
.panel-big .vac-pic { width: 78%; margin-bottom: 4px; }
.panel-small .vac-pic { width: 80%; }
.panel-small.vac-tile { flex-direction: column; gap: 4px; }
.vac-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.panel-big .vac-text { align-items: center; max-width: 100%; width: 100%; }
.vac-word { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--vc); }
.vac-tile.rest .vac-word { color: var(--text); }
.vac-bat { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vac-bat i { flex: 1; min-width: 36px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #9be38f calc(var(--f) * 100%), rgba(255, 255, 255, 0.12) 0); }
.vac-bat.low i { background: linear-gradient(90deg, #ff8a5b calc(var(--f) * 100%), rgba(255, 255, 255, 0.12) 0); }
.panel-big .vac-bat { width: 80%; }
@supports not (color: color-mix(in srgb, red, blue)) { .vac-tile.busy .vac-pic, .vac-tile.home .vac-pic { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 12px var(--vc)); } }
.panel-wide .vac-pic { width: 42%; }
.panel-wide .vac-text { flex: 1; padding-right: 22px; } /* room for the › button */
.panel-wide .vac-bat { width: 100%; }

/* ---------- cameras ---------- */
.tile-panel .cam-tile { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; display: block; }
.cam-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: rgba(0, 0, 0, 0.35); }
.cam-shot.broken { visibility: hidden; }
.cam-label {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px;
  padding: 18px 12px 9px; font-size: 12.5px; font-weight: 650; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.cam-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff453a; box-shadow: 0 0 6px #ff453a; }
.tile.offline .cam-dot { background: #8e8e93; box-shadow: none; }
.cam-live { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 16px; background: #000; }
.cam .hint:empty { display: none; }

/* pan / tilt arrows over a camera's live view */
.cam-stage { position: relative; }
.ptz { display: grid; grid-template: repeat(3, 48px) / repeat(3, 48px); gap: 4px; width: max-content; margin: 10px auto 0; } /* under the video, clear of its own controls */
.ptz-btn {
  display: grid; place-items: center; border-radius: 12px; color: var(--text);
  background: var(--fill-1); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); touch-action: none; user-select: none; -webkit-user-select: none;
}
.ptz-btn:active { background: rgba(255, 255, 255, 0.3); }
.ptz-btn svg { width: 18px; height: 18px; pointer-events: none; }
.ptz-up { grid-area: 1 / 2; } .ptz-up svg { transform: rotate(-90deg); }
.ptz-left { grid-area: 2 / 1; } .ptz-left svg { transform: rotate(180deg); }
.ptz-right { grid-area: 2 / 3; }
.ptz-down { grid-area: 3 / 2; } .ptz-down svg { transform: rotate(90deg); }

/* a phone on its side: the picture and the controls sit side by side, the card as wide as the picture (sized from the
   screen's height) plus the controls needs, instead of a thin strip */
@media (orientation: landscape) and (max-height: 600px) {
  dialog.sheet:has(.cam-stage) {
    --cam-h: calc(96dvh - 76px); --cam-side: 200px;
    width: min(1120px, 96vw, calc(var(--cam-h) * 16 / 9 + var(--cam-side) + 54px)); max-height: 96dvh; margin: auto; border-radius: 24px;
    border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 120px rgba(0, 0, 0, 0.6);
  }
  dialog.sheet:has(.cam-stage) .handle { display: none; }
  dialog.sheet:has(.cam-stage) .sheet-body { padding: 10px 20px calc(12px + env(safe-area-inset-bottom)); gap: 8px; }
  dialog.sheet:has(.cam-stage) .sheet-head { padding-top: 0; }
  dialog.sheet:has(.cam-stage) .sheet-head .bulb { width: 38px; height: 38px; border-radius: 13px; }
  .cam { display: grid; grid-template-columns: minmax(0, 1fr) var(--cam-side); grid-template-rows: auto auto 1fr; column-gap: 14px; align-content: start; }
  .cam-stage { display: contents; }
  .cam .cam-live { grid-column: 1; grid-row: 1 / span 3; max-height: var(--cam-h); }
  .cam .ptz { grid-column: 2; grid-row: 1; margin: 0 auto; }
  .cam > .hint { grid-column: 2; grid-row: 2; margin: 8px 0 0; }
  .cam .cam-tiles-row { grid-column: 2; grid-row: 3; margin-top: 10px; flex-direction: column; align-items: stretch; gap: 6px; }
  .cam-tiles-row .title { white-space: normal; font-size: 13px; line-height: 1.2; }
  .cam-tiles-row .seg.mini { align-self: stretch; }
  .cam-tiles-row .seg.mini .seg-btn { flex: 1; min-width: 0; padding: 4px 6px; font-size: 12px; line-height: 1.15; white-space: normal; }
  .cam-tiles-row { padding: 10px 10px 10px 12px; }
  @media (max-height: 340px) { .cam .ptz { grid-template: repeat(3, 38px) / repeat(3, 38px); gap: 3px; } .cam .cam-tiles-row { margin-top: 6px; } }
}

/* Add to Home: tabs (rooms, lights, scenes, devices, info) and a search across them */
.pick-tabs { overflow-x: auto; scrollbar-width: none; flex: none; }
.pick-tabs::-webkit-scrollbar { display: none; }
.pick-tabs .tab { flex: 1 0 auto; }
.pick-panel { display: flex; flex-direction: column; gap: 8px; }

/* ---------- car panel ---------- */
.car { gap: 10px; }
.car-battery { display: flex; align-items: baseline; gap: 10px; }
.car-battery b { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.car-battery span { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.car-bar { position: relative; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.car-bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--f, 0) * 100%); background: var(--c, #9be38f); border-radius: 5px; transition: width 0.6s var(--ease); }
.car-bar b { position: absolute; top: 0; bottom: 0; left: calc(var(--l, 1) * 100%); width: 2px; margin-left: -1px; background: rgba(255, 255, 255, 0.85); }
.car .vac-actions .pill { flex: 1; justify-content: center; }
.car .pill span, .car .pill svg { width: 16px; height: 16px; }
/* every control in the car sheet is the same full-width rounded block: buttons, the temperature stepper, sliders and switches */
.car .vac-actions .pill, .car > .pill { height: 48px; border-radius: 16px; }
.car > .pill { align-self: stretch; justify-content: center; gap: 6px; }
.car .slider { height: 48px; border-radius: 16px; }
.car .list { gap: 8px; }
.car .row { min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
.car .field-label { margin-top: 8px; }
.car-temp { display: flex; align-items: center; height: 48px; border-radius: 16px; background: var(--fill-1); }
.car-temp button { width: 60px; height: 100%; display: grid; place-items: center; border: 0; border-radius: 16px; background: none; color: inherit; font-size: 24px; font-weight: 400; cursor: pointer; transition: background 0.2s; }
.car-temp button:active { background: rgba(255, 255, 255, 0.08); }
.car-target { flex: 1; text-align: center; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile-panel .panel-wide .air-text { min-width: 0; flex: 1; padding-right: 20px; } /* room for the › button */
.tile-panel .panel-wide .air-word, .tile-panel .panel-wide .p-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* car tile with the car's photo (cut out, shadow included) */
.car-pic { flex: none; display: block; width: 92%; height: auto; margin: -4px auto 2px; }
.panel-wide .car-pic { width: 50%; margin: 0; }
.panel-small .car-pic { width: 100%; margin: 0; }
.panel-small.car-tile { flex-direction: column; gap: 2px; }
.panel-big.car-tile .vac-text { align-items: center; width: 100%; }
.car-tile-bat { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 4px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.panel-big .car-tile-bat { width: 82%; align-items: center; }
.car-tile-bat i { position: relative; display: block; width: 100%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.car-tile-bat u { position: absolute; inset: 0 auto 0 0; width: calc(var(--f) * 100%); background: var(--c); border-radius: 3px; }
.car-tile-bat b { position: absolute; top: 0; bottom: 0; left: calc(var(--l) * 100%); width: 2px; margin-left: -1px; background: rgba(255, 255, 255, 0.85); }
.panel-small .car-tile-bat { font-size: 12px; font-weight: 650; color: var(--text); align-items: center; }
.panel-wide.car-tile { gap: 8px; }
.panel-wide.car-tile .car-pic { width: 42%; }
.panel-wide.car-tile .vac-text { gap: 1px; padding-right: 0; }
.panel-wide.car-tile .p-label { display: none; } /* the photo says which car it is; the room goes to the status */
.panel-wide.car-tile .vac-word { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 18px; }
.panel-wide.car-tile .p-sub { display: none; } /* no room for the climate line in a wide tile */
.panel-wide.car-tile .car-tile-bat { margin-top: 2px; }

/* a car's doors and tyres tiles: the car from above, and what's open / the pressures */
.car-top-pic { flex: none; display: grid; place-items: center; min-height: 0; }
.car-top-pic svg { display: block; width: 100%; height: auto; max-height: 100%; overflow: visible; }
.panel-big .car-top-pic { width: 82%; max-height: 52%; }
.panel-wide .car-top-pic { width: 44%; max-height: 100%; }
.panel-small .car-top-pic { width: 86%; }
.panel-small.car-info { flex-direction: column; gap: 4px; }
.panel-big.car-info .vac-text { align-items: center; width: 100%; }
.panel-wide.car-info .vac-text { flex: 1; padding-right: 22px; }
.car-info .p-sub.more { max-width: 100%; }
.car-lockline { display: inline-flex; align-items: center; gap: 4px; }
.car-lockline span, .car-lockline svg { width: 12px; height: 12px; }
/* the car's seat heating rows: the levels as a small bar inside the row */
.car .seat-row { padding-right: 6px; }
.seg.mini { min-height: 36px; padding: 3px; border-radius: 12px; background: var(--fill-1); flex: none; }
.seg.mini .seg-btn { flex: none; min-width: 44px; padding: 0 9px; font-size: 13px; border-radius: 9px; }
.seg-btn:disabled { opacity: 0.45; }
.panel-big .car-top-pic.tyres { width: 64%; max-height: none; } /* the numbers above and below make it taller */
.panel-wide .car-top-pic.tyres { width: 36%; }

/* sensor tiles: the other readings as a small grid, value over its name */
.sx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; width: 100%; margin-top: 4px; }
.sx-grid.n1 { grid-template-columns: minmax(0, 1fr); }
.sx-grid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-cell { display: flex; flex-direction: column; align-items: center; padding: 4px 4px 3px; border-radius: 10px; background: var(--fill-1); min-width: 0; line-height: 1.2; }
.sx-cell b { font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sx-cell small { font-size: 10px; color: var(--muted); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.panel-big.sx.has-grid { justify-content: center; gap: 2px; }
.panel-big.sx.has-grid .p-label { max-width: 100%; }
.panel-big.sx.has-grid .sx-main { flex-direction: row; align-items: center; gap: 6px; }
.panel-big.sx.has-grid .sx-value { font-size: 28px; line-height: 1.15; }
.panel-big.sx.has-grid .sx-icon svg { width: 20px; height: 20px; }

/* ---------- Noplato Mono (demo) for headings and Home's categories ---------- */
/* The demo has no æ ø å, ° · −: fonts/noplato-nordic.ttf adds them (see below). */
@font-face { font-family: 'Noplato Mono'; src: url('fonts/noplato-mono.ttf') format('truetype'); font-display: swap; }
/* Æ Ø Å, ° · − for the same font: made from its own shapes (tools/nordic-font.mjs), used for just these characters */
@font-face { font-family: 'Noplato Mono'; src: url('fonts/noplato-nordic.ttf?v=2') format('truetype'); font-display: swap; unicode-range: U+00B0, U+00B7, U+00C5-00C6, U+00D8, U+00E5-00E6, U+00F8, U+2212; }
:root { --font-head: 'Noplato Mono', ui-monospace, 'SF Mono', Menlo, monospace; }
h1, .room-head h2, .sheet-head h2, .settings-section h3, .field-label { font-family: var(--font-head); font-weight: 400; }
h1 { letter-spacing: -0.01em; }
.room-head h2, .sheet-head h2 { letter-spacing: 0; }
.field-label, .settings-section h3 { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }

/* Home's categories: ALL | LIGHTS | CAR … next to Edit; the one showing is lit, a thin line between them */
.home-cats { display: flex; align-items: center; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; }
.home-cats::-webkit-scrollbar { display: none; }
.home-cat {
  position: relative; flex: none; padding: 8px 18px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-head); font-size: clamp(17px, 2.2vw, 22px); letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(242, 237, 232, 0.55); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); transition: color 0.2s;
}
.home-cat:first-child { padding-left: 2px; }
.home-cat + .home-cat::before { content: ''; position: absolute; left: 0; top: 28%; bottom: 28%; width: 1px; background: rgba(242, 237, 232, 0.28); }
.home-cat:hover { color: rgba(242, 237, 232, 0.85); }
.home-cat.active { color: #fff; }
.home-cat.active::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; border-radius: 1px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.home-cat:first-child.active::after { left: 2px; }

/* ---------- information tiles sized by the tile itself ----------
   The panel is a size container, so text and buttons grow with the tile (cqmin = 1% of its shorter side)
   and the layout follows its shape: short, wide (landscape) or narrow (portrait). */
.tile.info-tile .tile-panel { container-type: size; }

/* the new font for what the tiles tell you: names, status words, values */
.tile.info-tile :is(.p-label, .vac-word, .air-word, .wx-word, .sx-value, .wx-temp, .air-read b, .car-part-head, .sx-cell b) { font-family: var(--font-head); font-weight: 400; }
.tile.info-tile .p-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(10.5px, 4.2cqmin, 14px); }
.tile.info-tile .vac-word { letter-spacing: 0; }

/* a car's sections: what it's doing, and buttons that work right on the tile */
.tile-panel .car-part { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: clamp(6px, 3cqmin, 14px); }
.tile-panel .panel-small.car-part { align-items: center; justify-content: center; gap: 2px; }
.car-part-head { display: none; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; padding-right: 22px; }
.car-part-head b { font-size: clamp(13px, 6cqmin, 20px); font-weight: 400; white-space: nowrap; }
.car-part-text { display: flex; flex-direction: column; gap: clamp(1px, 1cqh, 6px); min-width: 0; padding-right: 22px; } /* room for the › */
.car-part-text .vac-word { font-size: clamp(18px, 15cqmin, 48px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
.car-part-text .p-sub { font-size: clamp(11px, 4.6cqmin, 16px); }
.car-part-text .car-tile-bat { margin-top: clamp(2px, 1.5cqh, 8px); }
.car-part-text .car-tile-bat i { height: clamp(5px, 2cqmin, 8px); }
.tctl-rows { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(5px, 2.5cqmin, 10px); }
.tctl-row { flex: 1 1 0; min-height: 30px; max-height: 96px; display: flex; gap: clamp(5px, 2.5cqmin, 10px); }
.tctl {
  pointer-events: auto; flex: 1 1 0; min-width: 0; padding: 4px 6px; border: 0; border-radius: clamp(10px, 5cqmin, 18px);
  background: var(--fill-2); color: var(--text); font-size: clamp(12px, 5.2cqmin, 18px); font-weight: 600; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.2s, transform 0.12s;
}
.tctl.wide { flex-grow: 2; }
.tctl:active { transform: scale(0.96); }
.tctl.active { background: color-mix(in oklab, var(--accent) 80%, transparent); color: #fff; }
.tctl:disabled { opacity: 0.45; cursor: default; }
.tctl.info { background: none; cursor: default; }
.tctl.info:active { transform: none; }
.tctl.two small { font-size: clamp(10px, 4cqmin, 13px); font-weight: 550; opacity: 0.75; }
.tctl.two b { font-size: clamp(12px, 5.6cqmin, 19px); font-weight: 650; }
.home-grid.editing .tctl { pointer-events: none; } /* while arranging, the whole tile drags */

/* short tile (a phone's 2×1, or any wide strip): name and status on one line, the buttons fill the rest */
@container (max-height: 119px) or ((min-aspect-ratio: 2/1) and (max-height: 180px)) {
  .car-part-head { display: flex; }
  .car-part-text { display: none; }
  .tile-panel .car-part { gap: 6px; }
}
/* landscape tile with some height: the words on the left, the buttons beside them */
@container (min-aspect-ratio: 17/10) and (min-height: 181px) {
  .tile-panel .car-part { flex-direction: row; align-items: stretch; }
  .car-part-text { flex: 0 0 40%; justify-content: center; padding-right: 0; }
  .tctl-rows { justify-content: center; padding-right: 18px; }
}
/* portrait (tall, narrow) tile: the buttons become a column (two across when there's room), sharing the height */
@container (max-aspect-ratio: 4/5) {
  .tctl-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 104px), 1fr)); grid-auto-rows: minmax(34px, 1fr); align-content: stretch; }
  .tctl-row { display: contents; }
  .tctl { max-height: 96px; flex-direction: row; gap: 8px; }
  .tctl.two, .tctl.level { flex-direction: column; gap: 2px; }
  .tctl-icon svg { width: clamp(16px, 13cqw, 26px); height: clamp(16px, 13cqw, 26px); }
  .car-part-text .p-label { white-space: normal; } /* a name that doesn't fit wraps instead of being cut */
}

/* the car photo tile and its doors / tyres tiles: bigger words on bigger tiles */
.tile.info-tile .car-tile .vac-word, .tile.info-tile .car-info .vac-word { font-size: clamp(16px, 10cqmin, 36px); }
.tile.info-tile .car-tile .p-sub, .tile.info-tile .car-info .p-sub { font-size: clamp(11px, 4.4cqmin, 15px); }
.tile.info-tile .car-tile-bat span { font-size: clamp(11px, 4.4cqmin, 15px); }
.tile.info-tile .panel-wide .car-pic { width: auto; height: auto; max-width: 56%; max-height: 92cqh; flex: 0 1 auto; min-width: 0; }
.tile.info-tile .panel-big .car-pic { width: auto; max-width: 96%; max-height: 58cqh; }
.tile.info-tile .panel-wide.car-tile .vac-text { flex: 1; }
@container (min-aspect-ratio: 17/10) { .tile.info-tile .panel-wide .car-top-pic { width: auto; height: 80cqh; } .tile.info-tile .panel-wide .car-top-pic svg { height: 100%; width: auto; } }

/* sensor tiles: the reading and its grid grow with the tile */
.tile.info-tile .sx .sx-value { font-size: clamp(20px, 15cqmin, 52px); }
.tile.info-tile .panel-big.sx.has-grid .sx-value { font-size: clamp(22px, 14cqmin, 48px); }
.tile.info-tile .sx-grid { gap: clamp(4px, 2.5cqmin, 10px); }
.tile.info-tile .sx-cell { padding: clamp(3px, 2cqmin, 10px) 4px; border-radius: clamp(9px, 4cqmin, 16px); }
.tile.info-tile .sx-cell b { font-size: clamp(12.5px, 6cqmin, 22px); }
.tile.info-tile .sx-cell small { font-size: clamp(10px, 3.8cqmin, 13px); }
.tile.info-tile .sx .sx-icon svg { width: clamp(18px, 8cqmin, 32px); height: clamp(18px, 8cqmin, 32px); }

/* Home's pages (one per category) side by side; the track slides with a swipe. The pager clips the
   neighbours but leaves room for the tiles' glow (it reaches out past the page's edges). */
.home-pager { overflow: hidden; margin: -18px; padding: 18px; touch-action: pan-y; }
.home-track { display: flex; align-items: flex-start; column-gap: 48px; }
.home-track.moving { will-change: transform; } /* only while it slides: a standing layer makes the glass tiles flicker */
.home-track > .home-grid { flex: 0 0 100%; min-width: 0; }
.home-pager.editing { overflow: visible; }
/* trying out: the browser's own sideways scrolling, snapping page by page (?pager=snap) */
.home-pager.snap { margin-inline: 0; padding-inline: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; /* no room at the sides: the last page couldn't line up */ overscroll-behavior-x: contain; scrollbar-width: none; touch-action: auto; }
.home-pager.snap::-webkit-scrollbar { display: none; }
.home-pager.snap .home-grid { scroll-snap-align: start; scroll-snap-stop: always; }
.home-pager.snap.editing { overflow: visible; scroll-snap-type: none; }
.home-track.editing > .home-grid:not(.current) { display: none; } /* arranging: just the page being edited */
html { overscroll-behavior-x: none; } /* a sideways trackpad swipe moves Home's pages, not the browser's history */
.home-cats { margin: 0 -2px; }

/* The room tabs at the top, in the same style as Home's categories: words with a thin line between them,
   the one showing lit with an orange line under it (no glass pill) */
.room-tabs { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
.room-tabs::after { display: none; }
.room-tabs-scroll { gap: 0; padding: 4px 0; }
.room-tab {
  height: auto; padding: 8px 16px; border-radius: 0; background: none;
  font-family: var(--font-head); font-size: clamp(15px, 1.7vw, 18px); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(242, 237, 232, 0.55); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.room-tab + .room-tab::before { content: ''; position: absolute; left: 0; top: 28%; bottom: 28%; width: 1px; background: rgba(242, 237, 232, 0.28); }
.room-tab:hover { color: rgba(242, 237, 232, 0.85); }
.room-tab[aria-selected="true"] { background: none; box-shadow: none; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.room-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 1px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.room-tab .lit { top: 5px; right: 6px; }
.room-tab[aria-selected="true"] .lit { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.room-tab.add { width: auto; padding: 8px 12px; }
.tab-divider + .room-tab::before { display: none; }
/* a picker: the tab in the middle is lit, the others fade out towards the edges; it snaps tab by tab */
.room-tabs { justify-self: stretch; }
.room-tabs-scroll {
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.room-tabs-scroll .room-tab:not(.add) { scroll-snap-align: center; }
.room-tab { transition: color 0.2s, opacity 0.2s; }
.room-tab.focus { color: #fff; }

/* ---------- sensor tiles with a grid of readings: one design for every size ----------
   Square: the reading above a 2×2 grid that fills the rest. Wide: the reading left, the grid right (one row of
   boxes when it's a long strip). Tall: the boxes stacked. Everything scales with the tile. */
.tile-panel .panel-sx { flex-direction: column; align-items: stretch; justify-content: center; gap: clamp(6px, 3cqmin, 16px); text-align: center; }
.panel-sx .sx-head { display: flex; flex-direction: column; align-items: center; gap: clamp(2px, 1cqmin, 6px); min-width: 0; }
.panel-sx .sx-head .p-label { max-width: 100%; }
.panel-sx .sx-main { display: flex; align-items: center; justify-content: center; gap: clamp(4px, 2cqmin, 12px); }
.tile.info-tile .panel-sx .sx-value { font-size: clamp(24px, 19cqmin, 88px); line-height: 1; }
.tile.info-tile .panel-sx .sx-icon svg { width: clamp(18px, 9cqmin, 44px); height: clamp(18px, 9cqmin, 44px); }
.tile.info-tile .panel-sx .sx-grid { flex: 1 1 0; min-height: 0; max-height: 58%; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(5px, 2.5cqmin, 12px); }
.tile.info-tile .panel-sx .sx-grid.n1 { grid-template-columns: minmax(0, 1fr); }
.tile.info-tile .panel-sx .sx-grid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile.info-tile .panel-sx .sx-cell { justify-content: center; gap: clamp(0px, 0.6cqmin, 4px); padding: 2px 4px; border-radius: clamp(10px, 4.5cqmin, 20px); }
.tile.info-tile .panel-sx .sx-cell b { font-size: clamp(13px, 8cqmin, 34px); line-height: 1.05; }
.tile.info-tile .panel-sx .sx-cell small { font-size: clamp(10px, 4.2cqmin, 17px); }

/* wide: the reading on the left, the grid beside it, both as tall as the tile */
@container (min-aspect-ratio: 16/10) {
  .tile-panel .panel-sx { flex-direction: row; align-items: stretch; }
  .panel-sx .sx-head { flex: 0 0 36%; justify-content: center; }
  .tile.info-tile .panel-sx .sx-grid { max-height: none; }
  .tile.info-tile .panel-sx .sx-value { font-size: clamp(22px, min(30cqh, 11cqw), 88px); }
  .tile.info-tile .panel-sx .sx-cell b { font-size: clamp(12px, min(14cqh, 5cqw), 30px); }
  .tile.info-tile .panel-sx .sx-cell small { font-size: clamp(9.5px, min(7cqh, 2.4cqw), 15px); }
}
/* a long strip: all the boxes in one row */
@container (min-aspect-ratio: 3/1) {
  .panel-sx .sx-head { flex-basis: 26%; }
  .tile.info-tile .panel-sx .sx-grid.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile.info-tile .panel-sx .sx-cell b { font-size: clamp(12px, min(22cqh, 4cqw), 30px); }
  .tile.info-tile .panel-sx .sx-cell small { font-size: clamp(9.5px, min(10cqh, 2cqw), 15px); }
}
/* tall and narrow: the boxes stacked, one per row */
@container (max-aspect-ratio: 3/4) {
  .tile.info-tile .panel-sx .sx-grid { max-height: 64%; grid-template-columns: minmax(0, 1fr) !important; }
  .tile.info-tile .panel-sx .sx-value { font-size: clamp(22px, 24cqw, 72px); }
  .tile.info-tile .panel-sx .sx-cell { flex-direction: row; justify-content: space-between; align-items: center; padding: 0 clamp(8px, 5cqw, 16px); }
  .tile.info-tile .panel-sx .sx-cell b { font-size: clamp(13px, 11cqw, 30px); order: 2; }
  .tile.info-tile .panel-sx .sx-cell small { font-size: clamp(10px, 6cqw, 15px); }
}
@container (min-aspect-ratio: 16/10) and (max-width: 420px) { .panel-sx .sx-dev { display: none; } } /* a small wide tile: just "Inside" */

/* ---------- every tile: the icon centred (no round badge), the name and state centred under it, in the
   headings' font; sizes follow the tile (the tile is a size container), and a long name shrinks to fit (JS) ---------- */
.tile { container-type: size; }
.tile:not(.info-tile) { align-items: center; justify-content: center; text-align: center; gap: clamp(4px, 5cqmin, 14px); }
.tile:not(.info-tile) .tile-icon, .tile.narrow.shape-tall:not(.info-tile) .tile-icon { width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; }
.tile:not(.info-tile) .tile-icon svg, .tile.narrow.shape-tall:not(.info-tile) .tile-icon svg { width: clamp(20px, 24cqmin, 48px); height: clamp(20px, 24cqmin, 48px); }
.tile.on:not(.shape-toggle):not(.info-tile) .tile-icon { background: none; color: var(--c); filter: drop-shadow(0 0 10px color-mix(in oklab, var(--c) 75%, transparent)); }
.tile.on.ink:not(.shape-toggle) .tile-icon { color: rgba(24, 16, 8, 0.8); filter: none; } /* on a light colour's fill */
.tile:not(.info-tile) .tile-text { align-items: center; width: 100%; max-width: 100%; padding: 0; }
.tile-name, .tile-sub { font-family: var(--font-head); font-weight: 400; letter-spacing: 0.05em; max-width: 100%; }
.tile-name { font-size: clamp(13.5px, min(13cqw, 17cqh), 24px); }
.tile-sub { font-size: clamp(11px, min(9cqw, 12cqh), 16px); }
.tile.shape-wide, .tile.shape-toggle.scene.multi { flex-direction: column; justify-content: center; text-align: center; padding: 12px; }
.tile.shape-wide .tile-text, .tile.shape-toggle.scene.multi .tile-text { padding-right: 0; align-items: center; }
.tile.shape-toggle .tile-name { font-size: clamp(11px, 13cqw, 16px); }
/* a phone's 2×1: icon beside the words, the pair centred */
.tile.short:not(.info-tile) { flex-direction: row; gap: 10px; }
.tile.short:not(.info-tile) .tile-text { width: auto; min-width: 0; align-items: flex-start; text-align: left; }
.tile.short:not(.info-tile) .tile-icon svg { width: clamp(20px, 30cqh, 30px); height: clamp(20px, 30cqh, 30px); }
.tile.short .tile-name { font-size: clamp(12px, 18cqh, 16px); }
.tile.short .tile-sub { font-size: clamp(10.5px, 14cqh, 13px); }
.cam-label { font-family: var(--font-head); font-weight: 400; letter-spacing: 0.05em; font-size: 13.5px; }
/* the light cards on the room pages too */
.card .name { font-family: var(--font-head); font-weight: 400; letter-spacing: 0.04em; }

/* the car tiles' buttons: a glyph above the word (beside it on a short tile) */
.tctl-icon { display: grid; place-items: center; }
.tctl-icon svg { width: clamp(16px, 8cqmin, 30px); height: clamp(16px, 8cqmin, 30px); }
.tctl { gap: clamp(2px, 1.2cqmin, 6px); }
.tctl-text { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@container (max-height: 119px) or ((min-aspect-ratio: 2/1) and (max-height: 180px)) {
  .tctl { flex-direction: row; gap: 6px; }
  .tctl.two { flex-direction: column; gap: 0; }
  .tctl-icon svg { width: 16px; height: 16px; }
}
/* names of several words wrap to a second line before anything shrinks (one long word still shrinks to fit) */
.tile:not(.info-tile):not(.short) .tile-name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.12; overflow-wrap: normal; word-break: normal; }

/* all the text on the tiles in the headings' font (it has one weight: no fake bold) */
.tile { font-family: var(--font-head); font-synthesis: none; letter-spacing: 0.03em; }
.tile .tctl { font-weight: 400; letter-spacing: 0.05em; }

/* heating and cooling: level bars, and a colour that deepens with the level (red for heat, blue for cold) */
.tctl.level, .seg-btn.heat, .seg-btn.cool { --hue: #ff5b3a; }
.tctl.level.cool, .seg-btn.cool { --hue: #3ea2ff; }
.tctl.level { background: color-mix(in oklab, var(--hue) calc(var(--lv) * 72%), var(--fill-2)); transition: background 0.3s; }
.tctl.level .tctl-bars { display: grid; place-items: center; color: color-mix(in oklab, var(--hue) calc(40% + var(--lv) * 60%), #fff); }
.tctl.level .tctl-bars svg { width: clamp(18px, 9cqmin, 34px); height: auto; }
.tctl.level.lv-on .tctl-bars, .tctl.level.lv-on b { color: #fff; }
@container (max-height: 119px) or ((min-aspect-ratio: 2/1) and (max-height: 180px)) {
  .tctl.level .tctl-bars svg { width: 18px; }
}
/* the sheet's level bars: the chosen one takes the colour (white when it's off) */
.seg-btn.active.heat:not([data-v="off"]), .seg-btn.active.cool:not([data-v="off"]) { background: color-mix(in oklab, var(--hue) calc(35% + var(--lv) * 65%), #1a1512); color: #fff; }

/* every tile's words: never cut mid-way; a word too wide for its box is made smaller (JS fitText), and if the
   tile's whole content still doesn't fit, it's scaled down to fit (JS fitPanel) */
.tile .tctl-text, .tile .vac-word, .tile .car-part-head b, .tile .sx-cell b, .tile .sx-cell small { text-overflow: clip; }

/* ---------- wind compass ---------- */
.tile-panel .panel-wind { flex-direction: column; align-items: center; justify-content: center; gap: clamp(2px, 1.5cqmin, 8px); }
.wind-dial { position: relative; flex: 1 1 0; min-height: 0; aspect-ratio: 1; max-width: 100%; display: grid; }
.wind-dial svg { width: 100%; height: 100%; overflow: visible; font-family: var(--font-head); }
.panel-small .wind-dial .wd-minor { display: none; } /* the small tile: only 0° 90° 180° 270° */
.wind-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; pointer-events: none; }
.wind-mid b { font-size: clamp(16px, 14cqmin, 54px); font-weight: 400; }
.wind-mid small { margin-top: 2px; font-size: clamp(9px, 3.8cqmin, 14px); color: var(--muted); }
.wind-mid i { margin-top: 4px; font-style: normal; font-size: clamp(9px, 3.8cqmin, 14px); color: #7cc8f0; }
.panel-small.wind .wind-dial { height: 100%; flex: none; }
.wind-text { display: none; }
@container (min-aspect-ratio: 16/10) {
  .tile-panel .panel-wind { flex-direction: row; justify-content: flex-start; gap: clamp(8px, 4cqw, 24px); }
  .panel-wind .wind-label { display: none; }
  .panel-wind .wind-dial { flex: none; height: 100%; }
  .wind-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; padding-right: 20px; }
  .wind-text .vac-word { font-size: clamp(16px, 12cqh, 34px); white-space: normal; line-height: 1.1; }
  .wind-text .p-sub { font-size: clamp(10.5px, 7cqh, 15px); }
}

/* ---------- 24-hour trends ---------- */
.tile-panel .panel-trend { flex-direction: column; align-items: stretch; gap: clamp(2px, 1.5cqmin, 8px); }
.trend-head { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-right: 20px; }
.trend-now { font-size: clamp(18px, 13cqmin, 44px); line-height: 1.05; }
.trend-chart { flex: 1 1 0; min-height: 24px; position: relative; }
.trend-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.trend-axis { display: flex; justify-content: space-between; font-size: clamp(9px, 3.5cqmin, 12px); color: var(--muted); }
.panel-small.trend { flex-direction: column; gap: 2px; text-align: center; }
@container (min-aspect-ratio: 5/2) {
  /* a strip: the chart fills the whole tile behind the words (fading out under them), so the title and the stats get the full width */
  .tile-panel .panel-trend { display: flex; flex-direction: column; justify-content: center; }
  .trend-head { position: relative; z-index: 1; justify-content: center; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); }
  .trend-chart { position: absolute; inset: 0; z-index: 0; min-height: 0; border-radius: inherit; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3), #000 65%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3), #000 65%); }
  .trend-now { font-size: clamp(18px, 26cqh, 44px); }
  .trend-head .p-sub { text-align: left; }
}
@container (max-width: 200px) { .trend-head .p-sub .opt { display: none; } }

/* weather tiles' titles: the name large, a small grey extra beside it ("24 H", the wind's direction) */
.tile-title { display: flex; align-items: baseline; gap: 0.45em; min-width: 0; max-width: 100%; font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: 0.08em; line-height: 1.05; font-size: clamp(14px, 8cqmin, 28px); color: var(--text); white-space: nowrap; }
.tile-title span { overflow: hidden; text-overflow: clip; }
.tile-title small { font-size: 0.6em; color: var(--muted); letter-spacing: 0.06em; flex: none; }
.panel-trend .trend-head { gap: clamp(2px, 1cqmin, 6px); }
.panel-wind .wind-label { display: flex; justify-content: center; }
.panel-sx .sx-head .tile-title { justify-content: center; font-size: clamp(13px, 7cqmin, 24px); }
@container (min-aspect-ratio: 16/10) and (max-width: 420px) { .panel-sx .sx-head .tile-title small { display: none; } } /* a small wide tile: just the name */
@container (min-aspect-ratio: 16/10) { .tile-panel .panel-wind .wind-label { display: none; } } /* wide: the title is beside the dial instead */
@container (min-aspect-ratio: 16/10) { .tile-panel .panel-wind .wind-text { align-items: flex-start; text-align: left; } }

/* trend tiles: the value scale, a trend arrow, and the readout under a finger or the mouse */
.trend-tick { position: absolute; left: 0; transform: translateY(-110%); font-size: clamp(8.5px, 3cqmin, 11px); color: rgba(242, 237, 232, 0.45); pointer-events: none; font-variant-numeric: tabular-nums; }
.trend-value { display: flex; align-items: center; gap: clamp(4px, 2cqmin, 10px); min-width: 0; }
.trend-arrow { display: grid; place-items: center; flex: none; transform: rotate(var(--tilt)); transition: transform 0.4s var(--ease); }
.trend-arrow svg { width: clamp(16px, 9cqmin, 32px); height: clamp(16px, 9cqmin, 32px); filter: drop-shadow(0 0 6px currentColor); }
/* a weather trend's card: the big chart on a faint black tint (the card's blurred glass shows through; the card is already ~74% opaque, so a little is enough),
   its value scale, the times below, and the readout that follows the mouse or a finger */
.trend-tabs { margin: 2px 0 4px; overflow-x: auto; scrollbar-width: none; }
.trend-detail { display: flex; flex-direction: column; gap: 12px; }
.trend-detail .trend-head { gap: 4px; }
.trend-detail .tile-title { font-size: 22px; }
.trend-now.big { font-size: 44px; line-height: 1; }
.trend-detail .trend-arrow svg { width: 30px; height: 30px; }
.trend-big-wrap { display: flex; flex-direction: column; gap: 6px; }
.trend-big { position: relative; height: clamp(220px, 42vh, 380px); border-radius: 16px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.06); touch-action: pan-y; cursor: crosshair; overflow: hidden; }
.trend-plot { position: absolute; inset: 12px 12px 12px 38px; }
.trend-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.trend-big .trend-tick { left: -30px; width: 24px; text-align: right; transform: translateY(-50%); font-size: 11px; }
.trend-times { position: relative; height: 16px; margin: 0 12px 0 38px; font-size: 11px; color: var(--muted); font-family: var(--font-head); letter-spacing: 0.05em; }
.trend-times span { position: absolute; top: 0; transform: translateX(-50%); }
.readout-line, .readout-dot, .readout-tip { visibility: hidden; pointer-events: none; }
.trend-big.reading .readout-line, .trend-big.reading .readout-dot, .trend-big.reading .readout-tip { visibility: visible; }
.readout-line { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: rgba(255, 255, 255, 0.55); }
.readout-dot { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6); }
.readout-tip {
  position: absolute; top: 8px; z-index: 2; padding: 8px 11px; border-radius: 10px; font-family: var(--font-head); font-synthesis: none;
  display: flex; flex-direction: column; gap: 4px; white-space: nowrap; font-size: 13.5px; letter-spacing: 0.05em; text-transform: uppercase;
  background: rgba(34, 30, 27, 0.96); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.readout-tip b { font-weight: 400; font-size: 1.1em; color: #fff; }
.readout-tip > span { display: flex; align-items: center; gap: 6px; color: rgba(242, 237, 232, 0.8); }
.readout-tip > span > span:last-child { color: #fff; margin-left: auto; padding-left: 10px; }
.readout-tip i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.readout-tip i.dashed { background: none; border: 2px dashed; height: 0; width: 12px; border-radius: 0; border-width: 2px 0 0; }

/* Chrome only (see app.js): each frosted tile gets its own layer, so a change elsewhere doesn't make Chrome
   redraw its glass in patches (that flickers). Safari needs none of it, so phones don't pay for the layers. */
html.chromium .tile, html.chromium .card { transform: translateZ(0); }
.trend-detail .trend-now, .trend-detail .p-sub, .trend-tabs .tab { font-family: var(--font-head); font-synthesis: none; letter-spacing: 0.04em; }
.trend-detail .trend-now { font-weight: 400; }

/* ---------- weather radar ---------- */
.rmap { position: relative; overflow: hidden; background: #0d0f12; width: 100%; height: 100%; }
.rmap-world { position: absolute; left: 50%; top: 50%; }
.rmap-layer, .rmap-rains, .rmap-sats { position: absolute; left: 0; top: 0; }
.rmap-layer > *, .rmap-sats img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; }
.rmap-base { filter: invert(0.9) hue-rotate(180deg) brightness(0.95) contrast(0.9) saturate(0.6); } /* the grey map, made dark */
.rmap-rain { opacity: 0.8; }
.rmap-sats img { filter: brightness(0.85) saturate(0.85); }
.rmap.clouds .rmap-base { mix-blend-mode: screen; opacity: 0.4; } /* over the satellite: just the coast and place names */
.rmap-home { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #e0915f; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55), 0 0 12px #e0915f; }
.rmap-credit { position: absolute; right: 6px; bottom: 4px; font-size: 9px; color: rgba(255, 255, 255, 0.45); text-shadow: 0 1px 2px #000; pointer-events: none; font-family: var(--font); letter-spacing: 0; text-transform: none; }
.tile-panel .radar-tile { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; display: block; }
.radar-tile .rmap-credit { left: 4px; right: 4px; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.radar-label { position: absolute; left: 0; right: 0; top: 0; padding: 10px 14px 18px; background: linear-gradient(rgba(0, 0, 0, 0.55), transparent); pointer-events: none; }
.radar-label .tile-title small { color: rgba(242, 237, 232, 0.7); }
/* the card */
.radar-detail { display: flex; flex-direction: column; gap: 10px; }
.radar-big { position: relative; height: clamp(300px, 58vh, 560px); border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.06); }
.radar-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.radar-zoom button { width: 40px; height: 40px; border-radius: 12px; background: rgba(20, 18, 16, 0.85); color: #fff; font-size: 22px; border: 1px solid rgba(255, 255, 255, 0.12); }
.radar-controls { display: flex; align-items: center; gap: 12px; }
.radar-play { flex: none; gap: 6px; height: 40px; border-radius: 12px; }
.radar-play span, .radar-play svg { width: 16px; height: 16px; }
.radar-slider { flex: 1; accent-color: var(--accent); }
.radar-time { flex: none; min-width: 52px; text-align: right; font-family: var(--font-head); font-size: 16px; letter-spacing: 0.05em; }
.radar-met { border-radius: 16px; overflow: hidden; background: #fff; }
.radar-met img { display: block; width: 100%; height: auto; }

/* ---------- animated weather (Meteocons) and the weather behind the Outside tile ---------- */
/* The Meteocons have room around the drawing, so they're drawn a bit larger than the line icons and pulled in. */
img.meteo { display: block; width: var(--mi, 58px); height: var(--mi, 58px); margin: calc(var(--mi, 58px) * -0.16); max-width: none; pointer-events: none; }
.panel-small .wx-icon { --mi: 40px; }
.sx-icon { --mi: 44px; }
.panel-small .sx-icon { --mi: 34px; }
.panel-big.sx.has-grid .sx-icon { --mi: 30px; }
.tile.info-tile .sx .sx-icon { --mi: clamp(26px, 11.5cqmin, 46px); }
.tile.info-tile .panel-sx .sx-icon { --mi: clamp(26px, 13cqmin, 62px); }
.wx-fx { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; z-index: -1; } /* behind the words (the tile is its own layer) */

/* trend tiles: an animated icon at the top right (under the corner arrow), the words leaving room for it */
.trend-icon { position: absolute; right: clamp(2px, 1cqmin, 8px); top: clamp(22px, 11cqmin, 40px); width: clamp(40px, 30cqmin, 104px); height: auto; pointer-events: none; }
.panel-trend.has-icon .trend-head { padding-right: clamp(32px, 25cqmin, 88px); }
@container (min-aspect-ratio: 5/2) { .trend-icon { display: none; } .panel-trend.has-icon .trend-head { padding-right: 20px; } } /* a long strip: no room */
.wx-sun { --mi: 24px; }
.wx-sun img.meteo { margin: -6px -3px -6px -5px; }

/* ---------- the forecast tile and card ---------- */
.tile-panel .panel-forecast { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(4px, 2cqmin, 10px); }
.fc-chart { position: relative; flex: 1 1 0; min-height: 0; width: 100%; }
.fc-svg, .fc-svg svg { position: absolute; inset: 0; display: block; }
.fc-chart .fc-ico { position: absolute; transform: translateX(-50%); pointer-events: none; }
.fc-chart text { font-family: var(--font-head); letter-spacing: 0.04em; }
.fc-grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.fc-midnight { stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; stroke-dasharray: 2 3; }
.fc-axis { font-size: 10px; fill: rgba(242, 237, 232, 0.45); }
.fc-hour { font-size: 10.5px; fill: rgba(242, 237, 232, 0.55); }
.fc-dayname { font-size: 11.5px; fill: #fff; text-transform: uppercase; letter-spacing: 0.08em; }
.fc-tval { font-size: 11px; fill: rgba(255, 255, 255, 0.9); paint-order: stroke; stroke: rgba(0, 0, 0, 0.45); stroke-width: 3px; }
.fc-temp { fill: none; stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 120, 90, 0.45)); }
.fc-pmax { fill: rgba(111, 195, 255, 0.16); stroke: rgba(111, 195, 255, 0.35); stroke-width: 1; stroke-dasharray: 2 2; }
.fc-wind { fill: none; stroke: #b39cff; stroke-width: 2; }
.fc-gust { fill: none; stroke: #b39cff; stroke-opacity: 0.6; stroke-width: 1.4; stroke-dasharray: 4 4; }
.fc-arrow { fill: none; stroke: rgba(242, 237, 232, 0.75); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* small tiles: the next hours in columns, then days */
.fc-cols { display: flex; justify-content: space-between; gap: 2px; text-align: center; }
.fc-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; font-family: var(--font-head); letter-spacing: 0.04em; }
.fc-col small { font-size: clamp(10px, 4cqmin, 13px); color: var(--muted); }
.fc-col-ico { width: clamp(30px, 15cqmin, 56px); height: auto; margin: -4px 0; }
.fc-col b { font-size: clamp(13px, 6cqmin, 20px); font-weight: 400; color: #ffb38a; }
.fc-col b.cold, .fc-day b.cold { color: #8fd0ff; }
.fc-col i { font-style: normal; font-size: clamp(9.5px, 3.6cqmin, 12px); color: #6fc3ff; }
.fc-col i.dry { color: var(--muted); opacity: 0.6; }
.fc-days { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 4px; }
.fc-day { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 6px; font-family: var(--font-head); letter-spacing: 0.05em; font-size: clamp(11px, 4cqmin, 15px); }
.fc-dname { text-transform: uppercase; color: var(--text); white-space: nowrap; overflow: hidden; }
.fc-day-ico { width: clamp(26px, 9cqmin, 40px); height: auto; margin: -3px 0; }
.fc-hilo { display: flex; gap: 6px; align-items: baseline; }
.fc-hilo b { font-weight: 400; color: #ffb38a; }
.fc-hilo small { color: var(--muted); }
.fc-drain { color: #6fc3ff; text-align: right; }
.fc-drain.dry, .fc-dwind { color: var(--muted); text-align: right; }
.panel-forecast.fc-tiny { align-items: center; justify-content: center; gap: 0; text-align: center; font-family: var(--font-head); }
.fc-now-ico { width: clamp(40px, 42cqmin, 80px); height: auto; margin: -8px 0 -6px; }
.fc-now { font-size: clamp(18px, 18cqmin, 32px); font-weight: 400; }
.fc-tiny small { font-size: clamp(9px, 8cqmin, 12px); color: #6fc3ff; }
@container (max-height: 150px) { .fc-short .fc-days { display: none; } }

/* the card */
.fc-detail { display: flex; flex-direction: column; gap: 12px; }
.fc-big { overflow-x: auto; overflow-y: hidden; border-radius: 16px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.06); scrollbar-width: thin; }
.fc-big .fc-chart { min-width: 860px; height: clamp(300px, 46vh, 420px); }
.fc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.fc-legend span::before { content: ''; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.fc-legend .lg-temp::before { background: linear-gradient(90deg, #ff8a5b, #ff6b57); }
.fc-legend .lg-rain::before { height: 9px; background: #4aa3ef; }
.fc-legend .lg-max::before { height: 9px; background: rgba(111, 195, 255, 0.2); border: 1px dashed rgba(111, 195, 255, 0.5); }
.fc-legend .lg-wind::before { background: #b39cff; }
.fc-legend .lg-gust::before { background: repeating-linear-gradient(90deg, #b39cff 0 4px, transparent 4px 7px); }
.fc-days-all { border: 0; padding: 0; gap: 0; }
.fc-days-all .fc-day { padding: 8px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 15px; }
.fc-days-all .fc-day-ico { width: 40px; }
.panel-forecast .tile-title { align-self: flex-start; }
.fc-short .fc-cols { flex: 1 1 auto; align-items: center; }
.tile-panel .panel-forecast { align-self: stretch; width: 100%; }
.fc-strip { justify-content: center; }
.fc-strip .fc-col { gap: 0; }
.fc-strip .fc-col small { font-size: clamp(10px, 16cqh, 14px); }
.fc-strip .fc-col-ico { width: clamp(28px, 42cqh, 52px); margin: -5px 0; }
.fc-strip .fc-col b { font-size: clamp(12px, 20cqh, 18px); }

.cam-tiles-row { margin-top: 10px; }
.cam-tiles-row .seg { flex: none; }
video.cam-shot { pointer-events: none; }

/* The room tabs at rest: just the room showing (centred). Reaching for the bar (a finger, a swipe; the mouse on a
   computer) fades the others in; a moment after landing on one they fade out again. Hidden ones can't be tapped. */
.room-tabs-scroll .room-tab, .room-tabs-scroll .room-tab::before { transition: color 0.2s, opacity 0.35s ease; }
@media (hover: none) {
  .room-tabs-scroll:not(.awake):not(:has(:focus-visible)) .room-tab:not(.focus) { opacity: 0 !important; pointer-events: none; }
  .room-tabs-scroll:not(.awake):not(:has(:focus-visible)) .room-tab::before { opacity: 0; }
}
@media (hover: hover) {
  .room-tabs-scroll:not(.awake):not(:hover):not(:has(:focus-visible)) .room-tab:not(.focus) { opacity: 0 !important; pointer-events: none; }
  .room-tabs-scroll:not(.awake):not(:hover):not(:has(:focus-visible)) .room-tab::before { opacity: 0; }
}

/* Home's category bar, centred (Edit stays at the right; the hint goes on its own line underneath) */
.home-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(max-content, 1fr); align-items: center; column-gap: 12px; }
.home-bar > .home-cats { grid-column: 2; grid-row: 1; justify-self: center; max-width: 100%; }
.home-bar > .home-actions { grid-column: 3; grid-row: 1; justify-self: end; }
.home-bar > .hint { grid-column: 1 / -1; grid-row: 2; }
.home-bar > .home-cats[hidden] + .hint + .home-actions, .home-bar:has(> .home-cats[hidden]) > .home-actions { grid-column: 1 / -1; }
@media (max-width: 720px) { /* a phone: the categories get the whole width, Edit goes under them */
  .home-bar { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .home-bar > .home-cats { grid-column: 1; grid-row: 1; }
  .home-bar > .home-actions { grid-column: 1; grid-row: 2; }
  .home-bar > .hint { grid-column: 1; grid-row: 3; }
}

/* ---------- a light tile 2×2 or bigger: its lights as buttons, and a colour slider ---------- */
.tile-bulbs { display: none; }
.tile.bulbs { justify-content: flex-start; }
.tile.bulbs .tile-icon svg { width: clamp(18px, 13cqmin, 34px); height: clamp(18px, 13cqmin, 34px); }
.tile.bulbs .tile-bulbs { display: flex; flex-direction: column; gap: clamp(6px, 3cqmin, 10px); width: 100%; margin-top: auto; min-height: 0; }
.bulb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(58px, 30cqw, 100px), 1fr)); gap: clamp(4px, 2cqmin, 8px); min-height: 0; overflow: hidden; }
.bulb {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0;
  padding: clamp(4px, 2cqmin, 8px) 4px; border-radius: clamp(10px, 4cqmin, 14px);
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(242, 237, 232, 0.8);
  font: inherit; font-size: clamp(9.5px, 3.6cqmin, 12.5px); letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.bulb:active { transform: scale(0.95); }
.bulb-icon { display: grid; place-items: center; }
.bulb-icon svg { width: clamp(16px, 8cqmin, 24px); height: clamp(16px, 8cqmin, 24px); }
.bulb.on { background: color-mix(in oklab, var(--bc) 32%, rgba(20, 16, 12, 0.35)); border-color: color-mix(in oklab, var(--bc) 50%, transparent); color: #fff; }
.bulb.on .bulb-icon { color: var(--bc); filter: drop-shadow(0 0 6px color-mix(in oklab, var(--bc) 80%, transparent)); }
.bulb.gone { opacity: 0.4; }
.bulb-name { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.ink .bulb:not(.on) { background: rgba(0, 0, 0, 0.16); color: rgba(24, 16, 8, 0.8); }
.hue-bar {
  position: relative; flex: none; height: clamp(18px, 8cqmin, 28px); border-radius: 999px; cursor: pointer; touch-action: none;
  background: linear-gradient(90deg, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 2px 10px rgba(0, 0, 0, 0.3);
}
.hue-bar i { position: absolute; top: 50%; width: clamp(16px, 7cqmin, 24px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); border: 2.5px solid #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); pointer-events: none; }
.tile:has(.tile-bulbs:active) { transform: none; } /* pressing a light's button doesn't press the whole tile */
.home-grid.editing .tile-bulbs { pointer-events: none; } /* arranging: the tile moves, its buttons step aside */
/* the lights fill the room under the title, centred both ways, as big as fits */
.tile.bulbs .tile-bulbs { flex: 1 1 auto; }
.tile.bulbs .bulb-grid { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; flex: 1 1 auto; gap: clamp(6px, 3cqmin, 12px); }
.tile.bulbs .bulb { flex: 1 1 0; min-width: clamp(58px, 24cqw, 96px); max-width: clamp(84px, 32cqw, 150px); min-height: clamp(52px, 30cqh, 120px); padding: clamp(8px, 4cqmin, 16px) 6px; gap: clamp(3px, 1.5cqmin, 6px); border-radius: clamp(12px, 5cqmin, 18px); }
.tile.bulbs .bulb-icon svg { width: clamp(20px, 11cqmin, 36px); height: clamp(20px, 11cqmin, 36px); }
.tile.bulbs .bulb-name { font-size: clamp(10px, 4.4cqmin, 14px); line-height: 1.25; }
@container (max-height: 180px) { /* a small big tile (a phone's 2×2): no top icon, the lights as one row of icons */
  .tile.bulbs .tile-icon { display: none; }
  .tile.bulbs .bulb-grid { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; flex: none; }
  .tile.bulbs .bulb-grid::-webkit-scrollbar { display: none; }
  .tile.bulbs .bulb { flex: 1 0 34px; padding: 6px 2px; }
  .tile.bulbs .bulb-name { display: none; }
}

/* the Outside tile: the sunset/sunrise line never runs under the readings; when it's narrow, the word goes
   (the icon tells sunset from sunrise) and the time stays */
.panel-sx .sx-head { min-width: 0; }
.wx-sun { gap: 0.35em; min-width: 0; max-width: 100%; white-space: nowrap; }
.wx-sun > span:last-child { flex: none; }
.wx-sun-word { overflow: hidden; text-overflow: clip; min-width: 0; }
@container (max-width: 440px) { .panel-sx.wx .wx-sun-word { display: none; } }

/* ---- new devices in Home Assistant ("what should Lumen do with it?") and any-entity cards ---- */
.inbox-device { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--fill-1); }
.inbox-device .title { font-size: 17px; font-weight: 700; }
.inbox-device .detail { color: var(--muted); font-size: 13px; }
.inbox-sheet .choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--fill-1); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background 0.2s; }
.inbox-sheet .choice:hover { background: var(--fill-2, rgba(255, 255, 255, 0.12)); }
.inbox-sheet .choice.primary { border-color: var(--accent, #e0915f); }
.inbox-sheet .choice b { font-size: 16px; }
.inbox-sheet .choice small { color: var(--muted); font-size: 13px; }
.inbox-sheet .field-label.small { margin-bottom: -10px; }
.inbox-foot { display: flex; justify-content: flex-end; padding-top: 4px; }
.inbox-pill { animation: inbox-glow 2.4s ease-in-out infinite; }
@keyframes inbox-glow { 50% { box-shadow: 0 0 0 4px rgba(224, 145, 95, 0.28); } }
@media (prefers-reduced-motion: reduce) { .inbox-pill { animation: none; } }
.entity-row { display: flex; gap: 8px; align-items: center; justify-content: center; }
.entity-row .pill { flex: 1; justify-content: center; min-height: 48px; }
.entity-row.wrap { flex-wrap: wrap; }
.entity-row.wrap .pill { flex: 1 0 auto; }
.entity-target { min-width: 4em; text-align: center; font-size: 28px; font-family: var(--head-font, inherit); }
.panel-small.sx .sx-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.7; }

/* Settings: folding groups, each with a one-line status */
.settings-group { border-radius: 20px; background: var(--fill-1); }
.settings-group > summary { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; }
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary::after { content: ''; width: 9px; height: 9px; margin-left: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform 0.2s; flex: none; }
.settings-group[open] > summary::after { transform: rotate(45deg); }
.sg-head { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sg-title { font-family: var(--font-head); font-size: 17px; text-transform: uppercase; letter-spacing: 0.06em; }
.sg-what { color: var(--muted); font-size: 13px; }
.sg-note { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.sg-note .dot.off { background: var(--muted); box-shadow: none; }
.sg-body { display: flex; flex-direction: column; gap: 22px; padding: 4px 18px 20px; }
.inbox-box .row { border: 1px solid var(--accent); border-radius: 18px; padding: 12px 14px; }

/* Settings → Home Assistant: categories, one row per device, "+ … on Home" buttons under it */
.field-label.ha-cat { display: flex; align-items: center; gap: 8px; margin: 10px 0 -2px; color: var(--text); font-size: 13px; }
.field-label.ha-cat span { display: inline-flex; color: var(--accent); }
.field-label.ha-cat svg { width: 18px; height: 18px; }
.row.ha-dev { align-items: flex-start; }
.row.ha-dev > .kind, .row.ha-dev > .in-lumen { margin-top: 4px; }
.ha-dev .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ha-dev .chip { height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--accent); color: #1c120a; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.ha-dev .chip.done { background: var(--fill-1); color: var(--muted); cursor: default; }
.in-lumen { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.in-lumen small { font-size: 11px; color: var(--muted); }
.ha-dev .chips { overflow: visible; mask-image: none; -webkit-mask-image: none; padding: 0; }
.ha-dev .chip:not(.done):hover { background: #eaa57a; }

/* Settings → Cars: the car's snapshot next to it */
.row.car-row { align-items: flex-start; }
.car-snap { width: 84px; height: 56px; object-fit: cover; border-radius: 10px; flex: none; background: var(--fill-1); }
.cars .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; overflow: visible; mask-image: none; -webkit-mask-image: none; padding: 0; }
.cars .chip { height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--accent); color: #1c120a; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.cars .chip.done { background: var(--fill-1); color: var(--text); }

/* The weather card's timeline: the whole year small, with a window over it (drag to move, pull its handles to zoom) */
.tl-wrap { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.tl-label { font-family: var(--font-head); font-size: 12px; letter-spacing: 0.05em; color: var(--muted); text-align: center; }
.tl { position: relative; height: 48px; margin: 0; border-radius: 10px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.06); touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.tl-chart { position: absolute; inset: 4px 0; opacity: 0.55; pointer-events: none; }
.tl-chart svg { width: 100%; height: 100%; display: block; }
.tl-dim { position: absolute; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.32); pointer-events: none; }
.tl-dim:first-of-type { border-radius: 10px 0 0 10px; }
.tl-win { position: absolute; top: -3px; bottom: -3px; min-width: 4px; border-radius: 6px; border: 2px solid var(--accent); background: rgba(224, 145, 95, 0.16); cursor: grab; }
.tl.dragging .tl-win { cursor: grabbing; }
/* the handles sit just outside the window, so a narrow window (a day of a year) can still be grabbed and moved */
.tl-h { position: absolute; top: 50%; width: 12px; height: 30px; margin-top: -15px; border-radius: 5px; background: var(--accent); cursor: ew-resize; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.tl-h::after { content: ''; position: absolute; left: 50%; top: 9px; bottom: 9px; width: 2px; margin-left: -1px; border-radius: 1px; background: rgba(28, 18, 10, 0.55); }
.tl-h.l { left: -14px; } .tl-h.r { right: -14px; }
.tl-h::before { content: ''; position: absolute; inset: -10px -8px; } /* a bigger area to catch a finger */
@media (pointer: coarse) { .tl { height: 56px; } .tl-h { width: 16px; height: 38px; margin-top: -19px; } .tl-h.l { left: -18px; } .tl-h.r { right: -18px; } }

/* under the timeline: the quick periods and the calendar button; the calendar opens a month to pick days in */
.tl-tools { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.tl-tools .trend-ranges { flex: 1; }
.tl-cal { flex: none; width: 44px; height: 44px; }
/* folded away: no height; opening, it grows to its own height while sliding down and fading in */
.cal-fold { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(-8px) scale(0.98); transform-origin: top center;
  transition: grid-template-rows 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease, transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), margin-top 0.34s ease; margin-top: -8px; }
.cal-fold.open { grid-template-rows: 1fr; opacity: 1; transform: none; margin-top: 0; }
.cal-fold > .cal { min-height: 0; overflow: hidden; }
.tl-cal.active { background: var(--accent); color: #1c120a; border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .cal-fold { transition: none; } }
.cal { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.06); }
.cal-fold:not(.open) > .cal { padding-top: 0; padding-bottom: 0; border-width: 0; }
.cal-fold > .cal { transition: padding 0.34s ease, border-width 0.34s ease; }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-title { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; }
.cal-next svg { transform: scaleX(-1); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { text-align: center; font-size: 11px; color: var(--muted); text-transform: uppercase; padding: 2px 0; }
.cal-day { height: 38px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; font-size: 14px; cursor: pointer; }
.cal-day:hover:not(:disabled) { background: var(--fill-1); }
.cal-day:disabled { opacity: 0.25; cursor: default; }
.cal-day.today { box-shadow: inset 0 0 0 1px var(--muted); }
.cal-day.mid { background: rgba(224, 145, 95, 0.18); border-radius: 0; }
.cal-day.sel { background: var(--accent); color: #1c120a; font-weight: 700; }
.cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal-sel { font-family: var(--font-head); letter-spacing: 0.04em; color: var(--muted); }

/* the timeline's own ends (it zooms with the window): small dates in its corners */
.tl-edge { position: absolute; bottom: 3px; font-size: 10px; font-family: var(--font-head); letter-spacing: 0.04em; color: var(--muted); opacity: 0.8; pointer-events: none; }
.tl-edge.l { left: 6px; } .tl-edge.r { right: 6px; }
.tl:not(.dragging) .tl-win, .tl:not(.dragging) .tl-dim { transition: left 0.3s ease, width 0.3s ease, right 0.3s ease; }

/* Add to Home → Home Assistant: one folding row per device, its parts inside */
.pick-group { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--fill-1); color: inherit; font: inherit; text-align: left; cursor: pointer; margin-top: 6px; }
.pick-group:hover { background: var(--fill-2); }
.pick-group-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-group-n { flex: none; min-width: 26px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--muted); font-size: 12px; text-align: center; }
.pick-group-chev { flex: none; display: inline-flex; color: var(--muted); transition: transform 0.2s; }
.pick-group-chev svg { width: 18px; height: 18px; }
.pick-group[aria-expanded="true"] .pick-group-chev { transform: rotate(180deg); }
.pick-fold { margin: 6px 0 4px 10px; }

/* a reading's last hour, softly along the bottom of its tile (the words stay on top) */
.tile-panel .sx-spark-wrap { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; pointer-events: none; border-radius: 0 0 inherit inherit; overflow: hidden; }
.tile-panel .sx-spark { width: 100%; height: 100%; display: block; }
.tile-panel .has-spark > .sx-main, .tile-panel .has-spark > .sx-text { position: relative; z-index: 1; }
.tile-panel .has-spark { align-self: stretch; }

/* ---- Lumen's scenes: big cards in the scene's own colours ---- */
.scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.scene-card { position: relative; min-height: 120px; border-radius: 22px; overflow: hidden; background: var(--g, var(--fill-1)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.scene-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.55)); pointer-events: none; }
.scene-card.active { box-shadow: inset 0 0 0 2px #fff, 0 0 24px rgba(255, 255, 255, 0.15); }
.scene-run { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 2px; padding: 14px 16px; border: 0; background: none; color: #fff; font: inherit; text-align: left; cursor: pointer; transition: transform 0.15s; }
.scene-run:active { transform: scale(0.97); }
.scene-name { font-family: var(--font-head); font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }
.scene-sub { font-size: 13px; opacity: 0.85; }
.scene-edit { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; background: rgba(0, 0, 0, 0.35); color: #fff; border: 0; }
.scene-new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px dashed var(--line); background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.scene-new::after { display: none; }
.scene-new svg { width: 30px; height: 30px; }

/* the editor */
.scene-preview { height: 70px; border-radius: 20px; background: var(--g, var(--fill-1)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: background 0.4s; }
.scene-name-input { font-size: 20px; min-height: 54px; }
.scene-steps { margin: 0; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.scene-steps svg { width: 15px; height: 15px; vertical-align: -3px; }
.scene-rooms { display: flex; flex-direction: column; gap: 10px; }
.scene-lights { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.scene-light { position: relative; border-radius: 18px; background: var(--fill-1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); transition: box-shadow 0.2s, opacity 0.2s; opacity: 0.55; }
.scene-light.in { opacity: 1; box-shadow: inset 0 0 0 2px var(--accent); }
.scene-light.lit { background: linear-gradient(140deg, color-mix(in srgb, var(--c) 45%, transparent), var(--fill-1) 75%); }
.scene-light-pick { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; width: 100%; min-height: 72px; padding: 12px 44px 12px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.scene-light-dot { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--c, var(--muted)); }
.scene-light-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-light-state { font-size: 12px; color: var(--muted); }
.scene-check { position: absolute; top: 8px; right: 10px; color: var(--accent); font-weight: 700; }
.scene-light:not(.in) .scene-check { display: none; }
.scene-light-adjust { position: absolute; right: 6px; bottom: 6px; width: 34px; height: 34px; }
.scene-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 12px 0 4px; background: linear-gradient(transparent, var(--sheet-bg, rgba(20, 18, 16, 0.95)) 30%); }
.scene-count { flex: 1; color: var(--muted); font-size: 13px; }
.scene-save { min-height: 48px; padding: 0 22px; }
/* scenes are big and visual: a wider sheet on bigger screens */
dialog.sheet:has(.scene-editor), dialog.sheet:has(.scenes-sheet) { width: min(860px, calc(100vw - 32px)); max-width: none; }
.scene-steps span { display: inline-flex; vertical-align: -3px; }
.scene-lights { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* ---- the scene maker: three steps ---- */
.wz-dots { display: flex; gap: 6px; justify-content: center; }
.wz-dots span { width: 28px; height: 5px; border-radius: 3px; background: var(--fill-2); transition: background 0.3s; }
.wz-dots span.on { background: var(--accent); } .wz-dots span.done { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.wz-body { display: flex; flex-direction: column; gap: 10px; }
.wz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.wz-light { position: relative; border-radius: 18px; background: var(--fill-1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); opacity: 0.55; transition: box-shadow 0.2s, opacity 0.2s, transform 0.15s; }
.wz-light.in { opacity: 1; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18); }
.wz-light.lit { background: linear-gradient(140deg, color-mix(in srgb, var(--c) 55%, transparent), var(--fill-1) 80%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 70%, transparent); }
.wz-light.target { transform: scale(1.04); box-shadow: inset 0 0 0 3px #fff; }
.wz-light-main { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px 40px 12px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wz-swatch { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c, rgba(255, 255, 255, 0.08)); color: #1c120a; box-shadow: 0 0 18px color-mix(in srgb, var(--c, transparent) 60%, transparent); }
.wz-light:not(.lit) .wz-swatch { color: var(--muted); }
.wz-light-text { display: flex; flex-direction: column; min-width: 0; }
.wz-light-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-light-state { font-size: 12px; color: var(--muted); }
.wz-check { position: absolute; top: 10px; right: 12px; color: var(--accent); font-weight: 700; }
.wz-bri { padding: 0 12px 12px; }
.wz-paint { display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 6px 0 4px; }
.wz-picker { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; }
.wz-wheel-wrap { position: relative; width: 220px; height: 220px; touch-action: none; }
.wz-wheel { border-radius: 50%; cursor: crosshair; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06); }
.wz-knob { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 3px solid #fff; background: var(--p); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); pointer-events: none; }
.wz-whites { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wz-white { min-width: 92px; height: 44px; border: 0; border-radius: 12px; color: #2a1c10; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.wz-bar { width: min(520px, 100%); height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 6px 20px rgba(0, 0, 0, 0.35); }
.wz-bar span { padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 13px; }
.wz-drop { position: fixed; z-index: 1000; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5); pointer-events: none; }
.wz-delete { margin-right: auto; color: #ff6b5e; }

/* ---- Frigate events: photo cards (a strip under a camera, a grid in their own view) and the clip player ---- */
.cam-events { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ev-wrap { display: flex; flex-direction: column; gap: 10px; }
.ev-filters { align-self: flex-start; max-width: 100%; }
.ev-list.strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; scrollbar-width: none; }
.ev-list.strip::-webkit-scrollbar { display: none; }
.ev-list.strip .ev-card { flex: 0 0 210px; scroll-snap-align: start; }
.ev-list.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ev-card { position: relative; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--fill-1); color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); transition: transform 0.15s; }
.ev-card:active { transform: scale(0.98); }
.ev-pic { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #000; }
.ev-info { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; }
.ev-what { display: flex; align-items: center; gap: 6px; font-weight: 650; }
.ev-what svg { width: 18px; height: 18px; color: var(--accent); }
.ev-now { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: #ff453a; color: #fff; font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.ev-when { font-size: 12px; color: var(--muted); }
.ev-zones { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ev-zones b { padding: 1px 7px; border-radius: 999px; background: rgba(224, 145, 95, 0.22); color: var(--accent); font-size: 11px; font-weight: 650; }
.ev-more { align-self: center; }
.ev-player { display: flex; flex-direction: column; gap: 8px; }
.ev-clip { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: #000; }
.ev-player-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 13px; }
dialog.sheet:has(.events-sheet) { width: min(980px, calc(100vw - 32px)); max-width: none; }
/* the tile: the latest one's photo, what and when over it */
.tile-panel .ev-tile { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; display: block; }
.ev-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-tile-text { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 18px 14px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: #fff; font-family: var(--font-head); letter-spacing: 0.04em; }
.ev-tile-text b { font-size: 18px; text-transform: uppercase; font-weight: 400; }
.ev-tile-text span { font-size: 12px; opacity: 0.85; }

/* a reading live from the home weather station: a small blue light that breathes; red when it has gone quiet */
.tile-panel .live-dot { position: absolute; top: 11px; left: 11px; width: 7px; height: 7px; border-radius: 50%; z-index: 2; pointer-events: auto; }
.live-dot.on { background: #4fb3ff; box-shadow: 0 0 6px 1px rgba(79, 179, 255, 0.85); animation: live-breathe 2.6s ease-in-out infinite; }
.live-dot.off { background: #ff453a; box-shadow: 0 0 6px 1px rgba(255, 69, 58, 0.8); }
@keyframes live-breathe { 50% { opacity: 0.45; box-shadow: 0 0 3px 0 rgba(79, 179, 255, 0.5); } }
@media (prefers-reduced-motion: reduce) { .live-dot.on { animation: none; } }
/* Derived indices: six readings in a grid that fills the tile */
.tile-panel .panel-sx.indices { flex-direction: column !important; }
.panel-sx.indices .sx-head { flex: 0 0 auto !important; }
.tile.info-tile .panel-sx.indices .sx-grid { max-height: none; flex: 1 1 0; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.panel-sx.indices .sx-cell { justify-content: center; gap: 2px; cursor: pointer; transition: background .2s; }
.panel-sx.indices .sx-cell.active { background: var(--fill-2); }
.panel-sx.indices .sx-head { align-items: flex-start; padding-left: 14px; }
.panel-sx.indices .sx-head .tile-title { justify-content: flex-start; }
.tile-panel .panel-sx.indices { position: relative; }
.ix-tip { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; padding: 10px 12px; border-radius: 14px; background: var(--glass-strong);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  font-family: var(--font); text-transform: none; letter-spacing: normal; font-weight: 450; font-size: clamp(13px, 4.2cqmin, 16px); line-height: 1.4; text-align: left; color: var(--text); animation: ix-tip-in .18s ease-out; cursor: pointer; }
.ix-tip b { font-weight: 650; }
@keyframes ix-tip-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .ix-tip { animation: none; } }
.tile-panel .ix-cell, .tile-panel .ix-tip { pointer-events: auto; } /* the info tile ignores taps on its contents; these boxes explain themselves */
.home-grid.editing .tile-panel .ix-cell { pointer-events: none; } /* arranging: the whole tile drags */
/* the public weather site: no room tabs or Lumen buttons; its name where the date is, the date beside the summary */
body.public .room-tabs, body.public #homeCats, body.public .view-tools { display: none !important; }
body.public .top-actions .seg { flex: none; }
/* a sensor reading's tile: the trend tiles' look (name top left, reading, meaning), its icon top right, the last hour behind */
.tile-panel .panel-trend.ent-trend { justify-content: flex-start; }
.ent-trend .trend-head { position: relative; z-index: 1; padding-right: clamp(28px, 18cqmin, 60px); align-items: flex-start; text-align: left; }
.ent-trend .trend-head .p-sub { text-align: left; }
.ent-trend .ent-icon { position: absolute; top: clamp(10px, 5cqmin, 16px); right: clamp(12px, 5cqmin, 18px); z-index: 1; }
.ent-trend .ent-icon svg { width: clamp(16px, 9cqmin, 26px); height: clamp(16px, 9cqmin, 26px); }
.ent-trend .sx-spark-wrap { z-index: 0; }