/* CASA66 house style "Zondag" (docs/design/huisstijl.md, ADR 0009): calm, colourful but soft. Every room its own
   pastel, big rounded tiles, one deep purple for actions. Everything below uses only these tokens. */
:root {
    /* colour: roles, not names (contrast on --bg in brackets) */
    --bg: #F7F3EE;            /* havermout: page */
    --surface: #FFFFFF;       /* tiles, cards, sheets */
    --surface-2: #EFE9E1;     /* chips, inputs, switch track */
    --line: #D6CCBF;          /* the rare divider, dashed "empty" outlines */
    --text: #2A2335;          /* aubergine ink (13.7:1) */
    --muted: #6E6578;         /* secondary text (5.0:1; never on a pastel) */
    --accent: #5B3FD1;        /* paars: the one big action per screen (white text 6.8:1) */
    --on-accent: #FFFFFF;
    --accent-soft: #ECE6FF;   /* chosen/selected background, ink text */
    --ok: #276B4A;            /* (5.9:1) */
    --bad: #B3261E;           /* (5.9:1) */
    --bad-soft: #FBE3E0;
    --room-ink: #2A2335;      /* text on any room pastel, also at night (8:1+) */
    --scrim: rgba(42, 35, 53, 0.38);
    --focus: var(--text);

    /* room pastels (docs/design/huisstijl.md → room colours) */
    --koraal: #FFB4A2; --mint: #A8E6CF; --lila: #CDB4FF; --boter: #FFE08A; --lucht: #A9D6FF; --roos: #FFC2DD;
    --salie: #C9DDB0; --zand: #E9D8C4;

    /* type */
    --display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --t-xs: 0.8125rem;  /* 13 */
    --t-s: 0.875rem;    /* 14 */
    --t-m: 1rem;        /* 16: body */
    --t-l: 1.1875rem;   /* 19: tile titles */
    --t-xl: 1.5rem;     /* 24: sheet titles */
    --t-2xl: 2rem;      /* 32 */
    --t-3xl: 2.5rem;    /* 40: page title */

    /* space, shape, depth, motion */
    --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem;
    --r-s: 0.875rem;    /* 14: colour dots, small things */
    --r-m: 1.125rem;    /* 18: list rows */
    --r-l: 1.375rem;    /* 22: sheet head, small cards */
    --r-xl: 1.75rem;    /* 28: tiles, cards */
    --r-sheet: 2rem;    /* 32: bottom sheet, tab bar */
    --r-pill: 999px;
    --tap: 2.75rem;     /* 44 px: the smallest thing you can tap */
    --shadow-sheet: 0 -10px 40px rgba(42, 35, 53, 0.2);
    --shadow-knob: 0 1px 3px rgba(42, 35, 53, 0.25);
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);   /* everything that arrives */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);    /* everything that leaves */
    --ease-spring: var(--ease);               /* landing, springing back ("rustig": no overshoot) */
    --dur-xs: 90ms;     /* finger down: a press answers at once */
    --dur-s: 150ms;     /* colour changes */
    --dur-m: 280ms;     /* knob, toast, rows, segment pill */
    --dur-l: 420ms;     /* travelling far: the sheet coming up, a tile filling with light */
    --dur-out: 200ms;   /* leaving is quicker than arriving */
    --press: 0.97;      /* tiles, cards, the mini player while pressed */
    --press-small: 0.94;/* buttons, chips, dots, checks while pressed */
    --shake: 3px;       /* "lukte niet" */
    --lift: 1.02;       /* a row picked up to drag */
    --sheet-overhang: 2.5rem; /* the sheet reaches below the screen, so landing never shows a gap */
    --sheen: rgba(255, 255, 255, 0.55); /* the light running over a skeleton or a busy scene */
    --tabbar-h: 4.5rem;
    --page-w: 40rem;
    color-scheme: light;
}

/* Zondag nacht: the same shapes and room pastels on a dark aubergine, for the wall tablet in the evening and for
   phones in dark mode. Only rooms that are on carry colour, so the screen stays mostly dark. Follows the system
   setting; <html data-theme="licht|nacht"> pins one (for the wall tablet, and for checking both). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="licht"]) {
        --bg: #17131D;
        --surface: #221C2B;
        --surface-2: #2F2839;
        --line: #3D3548;
        --text: #F4EFF7;          /* 16.2:1 */
        --muted: #ABA2B8;         /* 7.5:1 */
        --accent: #B3A1FF;        /* 8.2:1, ink text on it */
        --on-accent: #17131D;
        --accent-soft: #352B55;
        --ok: #7FD8AE;
        --bad: #FF8A80;
        --bad-soft: #3D2226;
        --scrim: rgba(0, 0, 0, 0.55);
        --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, 0.5);
        --shadow-knob: 0 1px 3px rgba(0, 0, 0, 0.5);
        --sheen: rgba(255, 255, 255, 0.07);
        color-scheme: dark;
    }
}
:root[data-theme="nacht"] {
    --bg: #17131D;
    --surface: #221C2B;
    --surface-2: #2F2839;
    --line: #3D3548;
    --text: #F4EFF7;          /* 16.2:1 */
    --muted: #ABA2B8;         /* 7.5:1 */
    --accent: #B3A1FF;        /* 8.2:1, ink text on it */
    --on-accent: #17131D;
    --accent-soft: #352B55;
    --ok: #7FD8AE;
    --bad: #FF8A80;
    --bad-soft: #3D2226;
    --scrim: rgba(0, 0, 0, 0.55);
    --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, 0.5);
    --shadow-knob: 0 1px 3px rgba(0, 0, 0, 0.5);
    --sheen: rgba(255, 255, 255, 0.07);
    color-scheme: dark;
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--t-m); line-height: 1.45; }
/* App shell: a full-height column, the page scrolls in .scroller, the tab bar is the last row (not position: fixed:
   iOS 26 Safari misplaces fixed elements after the keyboard has been up, WebKit 297779). Height from the initial
   containing block (100%), not dvh, which iOS also gets wrong in that state. */
/* clip, not hidden: hidden boxes can still be scrolled by script, and focusing something in a sheet (or iOS bringing
   an input into view) then scrolled the whole app away, sheet and tab bar with it. Clip can't scroll at all. */
html, body { height: 100%; overflow: hidden; overflow: clip; overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; }
#app { position: relative; height: 100%; display: flex; flex-direction: column; overflow: clip; }
.scroller { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
/* A page's sheet (room panel, task, plug, budget, test melding) lives inside .scroller. While one is open the scroller
   is lifted above the tab bar (z-index on a flex item: a stacking context without becoming the sheets' containing
   block), so the sheet and its scrim cover the tab bar on every engine. iOS WebKit painted the tab bar over the sheet
   and hid its last rows (the -webkit-overflow-scrolling that used to be here isolated the scroller's layer). */
.scroller:has(.sheet, .scrim) { z-index: 25; }
/* …and the tab bar leaves while a sheet is open. iOS clips the sheet at the scroller's bottom edge (it stays inside the
   scroller's layer), so hiding the bar left an empty band over the sheet's last rows; removing it lets the scroller,
   and with it the sheet, reach the bottom of the screen ("Bewaar als scène", "Bewaren" out of reach before). */
#app:has(.sheet) .tabs { display: none; }
h1, h2, h3 { font-family: var(--display); color: var(--text); }
h1 { font-weight: 800; font-size: var(--t-3xl); letter-spacing: -0.03em; line-height: 1.05; margin: var(--s-3) 0 var(--s-1); }
h1:focus { outline: none; }
a { color: var(--accent); font-weight: 600; text-underline-offset: 0.18em; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.45; }
em { font-style: italic; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.meta { color: var(--muted); font-size: var(--t-s); }
.note { color: var(--muted); font-size: var(--t-s); }
.bad-text { color: var(--bad); }

/* ── shell: header + bottom tab bar ─────────────────────────────── */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); max-width: var(--page-w); margin: 0 auto;
       padding: calc(var(--s-3) + env(safe-area-inset-top)) var(--s-4) 0; }

/* wordmark: lowercase casa, the two sixes are coloured pebbles */
.mark { display: inline-flex; align-items: center; min-height: var(--tap); font-family: var(--display); font-weight: 800; font-size: 1.75rem;
        letter-spacing: -0.03em; line-height: 1; color: var(--text); text-decoration: none; }
.mark .six { width: 1.875rem; height: 1.875rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; margin-left: -0.125rem; color: var(--room-ink); }
.mark .six:first-of-type { background: var(--koraal); margin-left: 0.2rem; }
.mark .six + .six { background: var(--lila); }

.tabs { position: relative; z-index: 20; flex: none; width: 100%; margin: 0 auto; max-width: 35rem;
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--surface); border-radius: var(--r-sheet) var(--r-sheet) 0 0;
        padding: var(--s-2) var(--s-2) calc(var(--s-2) + env(safe-area-inset-bottom)); box-shadow: 0 -1px 0 var(--line); }
.tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; min-height: 3.5rem;
          color: var(--muted); font-size: 0.75rem; font-weight: 600; text-decoration: none; border-radius: var(--r-l); }
.tabs a i { width: 3.25rem; height: 2rem; border-radius: 1rem; display: grid; place-items: center; transition: background var(--dur-s) var(--ease); }
.tabs svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tabs a.active { color: var(--text); }
.tabs a.active i { background: var(--lila); color: var(--room-ink); }

/* pages */
.page, .home, .chat { max-width: var(--page-w); margin: 0 auto; padding: 0 var(--s-4) var(--s-6); }
.sub { margin: 0 0 var(--s-4); color: var(--muted); font-size: 1.0625rem; }
.page h2, .home h2, .label { font-family: var(--font); font-size: var(--t-s); font-weight: 600; color: var(--muted); letter-spacing: 0; margin: var(--s-5) 0 var(--s-2); }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.back { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; }

/* segmented links: Week | Recepten inside "Eten", Thuis sub pages */
.segments { display: inline-flex; gap: var(--s-1); padding: var(--s-1); margin: var(--s-3) 0 0; background: var(--surface-2); border-radius: var(--r-pill); }
.segments a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 var(--s-4); border-radius: var(--r-pill); color: var(--muted); text-decoration: none; }
.segments a.active { background: var(--surface); color: var(--text); }
@media (max-width: 24rem) { .segments a { padding: 0 var(--s-3); } } /* Week · Recepten · Boodschappen inside 360 px */

/* ── buttons ─────────────────────────────────────────────────────── */
button.primary, .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 3.375rem; padding: 0 var(--s-5);
    border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: var(--t-m); text-decoration: none; }
button.primary.wide { width: 100%; margin-top: var(--s-4); }
button.secondary { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--s-4); border: 0;
    border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); font-weight: 600; }
button.bad { min-height: var(--tap); padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill); background: var(--bad); color: var(--on-accent); font-weight: 700; }
.remove { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); flex: none; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.5rem; line-height: 1; }
.remove:hover { background: var(--surface-2); }

/* ── form fields ─────────────────────────────────────────────────── */
input, select, textarea { min-height: 3rem; min-width: 0; padding: 0 var(--s-4); border: 2px solid transparent; border-radius: var(--r-pill);
    background: var(--surface); color: var(--text); font: inherit; }
input::placeholder { color: var(--muted); opacity: 1; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
input:focus-visible, select:focus-visible { outline: none; }
input[type=date] { padding-right: var(--s-3); }
select { padding-right: var(--s-3); }
.add-row { display: flex; gap: var(--s-2); margin: var(--s-4) 0; }
.add-row input { flex: 1; }
.add-row input.qty { flex: 0 0 6rem; }
.add-row button[type=submit], .add-row > button:not(.secondary) { flex: none; min-width: 3rem; min-height: 3rem; padding: 0 var(--s-4); border: 0;
    border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 1.125rem; }
.search { width: 100%; margin: var(--s-4) 0 0; }

/* ── switch: a pill with a knob; off has an outline so it never relies on colour alone ── */
.switch { position: relative; display: inline-flex; align-items: center; min-height: var(--tap); flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; min-height: 0; }
.switch span { position: relative; width: 3.625rem; height: 2.25rem; border-radius: var(--r-pill); background: var(--surface-2);
    box-shadow: inset 0 0 0 2px var(--muted); transition: background var(--dur-s) var(--ease); }
.switch span::before { content: ""; position: absolute; top: 0.25rem; left: 0.25rem; width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: var(--muted); transition: transform var(--dur-m) var(--ease), background var(--dur-s); }
.switch input:checked + span { background: var(--text); box-shadow: none; }
.switch input:checked + span::before { transform: translateX(1.375rem); background: var(--surface); box-shadow: var(--shadow-knob); }
.switch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.switch input:disabled + span { opacity: 0.45; }
.switch.small span { width: 3.125rem; height: 1.875rem; }
.switch.small span::before { width: 1.375rem; height: 1.375rem; }
.switch.small input:checked + span::before { transform: translateX(1.25rem); }
/* on a pastel tile the "on" track is ink and the knob white, like the mockup */
.tile .switch input:checked + span { background: var(--room-ink); }
.tile .switch input:checked + span::before { background: #FFFFFF; }
.tile .switch span { box-shadow: inset 0 0 0 2px var(--muted); }
.tile.on .switch span { box-shadow: none; }

/* ── slider: a thick rounded track filled with --fill up to --v ── */
input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; min-height: 3rem; height: 3rem; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; --fill: var(--accent); --v: 50%; }
input[type=range]:focus { border: 0; }
input[type=range]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 1.25rem; }
input[type=range]::-webkit-slider-runnable-track { height: 2.5rem; border-radius: 1.25rem; background: linear-gradient(90deg, var(--fill) var(--v), var(--surface-2) var(--v)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 0.5rem; height: 1.625rem; margin-top: 0.4375rem; border-radius: 0.25rem; background: var(--text); }
input[type=range]::-moz-range-track { height: 2.5rem; border-radius: 1.25rem; background: var(--surface-2); }
input[type=range]::-moz-range-progress { height: 2.5rem; border-radius: 1.25rem; background: var(--fill); }
input[type=range]::-moz-range-thumb { width: 0.5rem; height: 1.625rem; border: 0; border-radius: 0.25rem; background: var(--text); }
/* disabled: css/motion.css (neutral fill, no thumb) */
.dim { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-3) 0 var(--s-1); }
.dim output { font-family: var(--display); font-weight: 700; font-size: 1.25rem; min-width: 3.25rem; text-align: right; }

/* ── chips (pills, optionally with a colour swatch) ── */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill);
    background: var(--surface-2); color: var(--text); font-weight: 600; font-size: 0.9375rem; white-space: nowrap; }
.chip.sel { background: var(--text); color: var(--bg); }

/* ── loading / empty / error ── */
.state { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-5) 0; color: var(--muted); }
.state::before { content: ""; width: 1.25rem; height: 1.25rem; flex: none; border-radius: 50%; border: 3px solid var(--surface-2); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
.empty-state { margin: var(--s-5) 0; padding: var(--s-5); border: 2px dashed var(--line); border-radius: var(--r-xl); color: var(--muted); text-align: center; }
.error-note { margin: var(--s-3) 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-m); background: var(--bad-soft); color: var(--bad); font-weight: 600; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Thuis ───────────────────────────────────────────────────────── */
.people-cards { display: grid; gap: var(--s-2); }
.person-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); background: var(--surface); border-radius: var(--r-xl); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-3); }
.person-card .avatar { width: var(--tap); height: var(--tap); flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2);
    font-family: var(--display); font-weight: 800; font-size: 1.125rem; color: var(--text); }
.person-card.presence-home .avatar { background: var(--mint); color: var(--room-ink); }
.person-card.presence-asleep .avatar { background: var(--lila); color: var(--room-ink); }
.person-card .who-text { flex: 1; min-width: 8rem; display: grid; }
.person-card .who-text strong { font-family: var(--display); font-size: var(--t-l); font-weight: 700; }
.person-card .who-text span { color: var(--muted); font-size: var(--t-s); }
.presence-buttons { display: flex; gap: var(--s-1); padding: var(--s-1); background: var(--surface-2); border-radius: var(--r-pill); }
.presence-buttons button { min-height: 2.5rem; padding: 0 var(--s-3); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font-weight: 600; }
.presence-buttons button.current { background: var(--text); color: var(--bg); }

.shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.shortcut { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-4); min-height: 8.5rem; padding: var(--s-4); border-radius: var(--r-xl);
    background: var(--c, var(--surface)); color: var(--room-ink); text-decoration: none; font-weight: 400; }
.shortcut svg { width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.shortcut strong { display: block; font-family: var(--display); font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.shortcut span { font-size: var(--t-s); }
/* at night the cards stay dark; only the icon keeps the pastel */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="licht"]) .shortcut { background: var(--surface); color: var(--text); }
    :root:not([data-theme="licht"]) .shortcut svg { color: var(--c); }
}
:root[data-theme="nacht"] .shortcut { background: var(--surface); color: var(--text); }
:root[data-theme="nacht"] .shortcut svg { color: var(--c); }

.live { margin-top: var(--s-5); background: var(--surface); border-radius: var(--r-xl); padding: 0 var(--s-4); }
.live summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 3.5rem; cursor: pointer; font-weight: 600; list-style: none; }
.live summary::-webkit-details-marker { display: none; }
.live summary::after { content: "▾"; color: var(--muted); }
.live[open] summary::after { content: "▴"; }
.live[open] { padding-bottom: var(--s-4); }
.status { display: inline-flex; align-items: center; gap: var(--s-2); margin-left: auto; font-size: var(--t-s); font-weight: 600; color: var(--muted); }
.status::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--muted); }
.status-connected::before { background: var(--ok); }
.status-connecting::before, .status-reconnecting::before { background: var(--boter); box-shadow: inset 0 0 0 2px var(--muted); }
.status-disconnected { color: var(--bad); }
.status-disconnected::before { background: var(--bad); }
.events { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.events li { background: var(--bg); border-radius: var(--r-m); padding: var(--s-2) var(--s-3); display: grid; gap: 0.1rem; }
.events time { color: var(--muted); font-size: var(--t-xs); }
.events code { font-size: var(--t-xs); overflow-wrap: anywhere; color: var(--muted); }

/* ── Licht ───────────────────────────────────────────────────────── */
.scenes { display: flex; gap: var(--s-2); overflow-x: auto; margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4) var(--s-4); scrollbar-width: none; }
.scenes::-webkit-scrollbar { display: none; }
.scene { flex: none; min-height: var(--tap); padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill); background: var(--surface); font-weight: 600; font-size: 0.9375rem; white-space: nowrap; }

.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--s-3); }
/* The tile grows with its text (an extra "1 lamp offline" line) instead of pushing the name up into the switch: the
   button is in the flow and fills the tile, and the gap keeps the name below the switch row however much text follows. */
.tile { position: relative; display: flex; flex-direction: column; min-height: 7.75rem; border-radius: var(--r-xl); background: var(--surface); color: var(--text); }
.tile.on { background: var(--c); color: var(--room-ink); }
.tile .open { all: unset; box-sizing: border-box; position: relative; flex: 1; min-height: 7.75rem; display: flex; flex-direction: column; justify-content: space-between;
    gap: var(--s-5); padding: var(--s-4); border-radius: inherit; cursor: pointer; }
.tile .open:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tile .blob { width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--c); }
.tile.on .blob { background: #FFFFFF; }
.tile .name { display: block; font-family: var(--display); font-size: var(--t-l); font-weight: 700; letter-spacing: -0.01em; color: inherit; overflow-wrap: anywhere; }
.tile .state-text { display: block; margin-top: 0.1rem; font-size: 0.9375rem; color: var(--muted); }
.tile.on .state-text { color: var(--room-ink); }
.tile .switch { position: absolute; top: var(--s-1); right: var(--s-2); }
.tile.selected { box-shadow: 0 0 0 3px var(--text); }

.lights .problems { margin-top: var(--s-4); }

/* bottom sheet: a room opens as a panel that slides up */
/* Overlays are absolute against #app (full height, never scrolls) rather than fixed: see the app shell above. */
.scrim { position: absolute; inset: 0; z-index: 30; background: var(--scrim); animation: fade var(--dur-m) var(--ease); }
.sheet { position: absolute; z-index: 31; left: 0; right: 0; bottom: 0; max-width: 35rem; max-height: 88%; margin: 0 auto; overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-sheet);
    padding: var(--s-2) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom)); animation: slide-up var(--dur-m) var(--ease); }
.sheet:focus { outline: none; }
.handle { display: block; width: 3rem; height: var(--tap); margin: 0 auto; border: 0; background: none; position: relative; }
.handle::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0.3125rem; margin-top: -0.15rem; border-radius: 3px; background: var(--line); }
.sheet-head { display: flex; align-items: center; gap: var(--s-3); background: var(--c, var(--surface-2)); color: var(--room-ink); border-radius: var(--r-l); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); }
.sheet-head h2 { flex: 1; margin: 0; font-family: var(--display); font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.02em; color: inherit; }
.sheet-head small { display: block; font-family: var(--font); font-size: var(--t-s); font-weight: 500; letter-spacing: 0; }
.sheet-head .switch input:checked + span { background: var(--room-ink); }
.sheet-head .switch input:checked + span::before { background: #FFFFFF; }
.sheet-head .switch span { box-shadow: inset 0 0 0 2px var(--room-ink); background: transparent; }
.sheet-head .switch span::before { background: var(--room-ink); }
.sheet .dim input[type=range] { --fill: var(--c, var(--accent)); }
@keyframes slide-up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
/* less motion (prefers-reduced-motion): css/motion.css, with the rest of the motion */

/* colour palette (white chips with a swatch, colour dots) */
.light-palette { display: grid; gap: var(--s-1); }
.light-palette .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4) 2px; scrollbar-width: none; gap: var(--s-2); }
.light-palette .chips::-webkit-scrollbar { display: none; }
.light-palette .chip { padding: 0 var(--s-4) 0 0.375rem; }
.light-palette .chip::before { content: ""; width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(42, 35, 53, 0.12); }
/* eight 44 px dots fit a 390 px phone by borrowing half the sheet's side padding */
.light-palette .dots { display: grid; grid-template-columns: repeat(8, minmax(var(--tap), 1fr)); gap: 3px; max-width: 27rem; margin: 0 calc(-1 * var(--s-2)); }
.light-palette .dot { position: relative; width: 100%; aspect-ratio: 1; max-width: 3rem; min-height: var(--tap); border: 0; border-radius: var(--r-s); padding: 0;
    background: var(--swatch); cursor: pointer; }
.light-palette .dot.custom { display: grid; place-items: center; background: var(--surface-2); color: var(--text); font-size: 1.375rem; font-weight: 600; overflow: hidden; }
.light-palette .dot.custom::after { content: ""; position: absolute; inset: 0.375rem; border-radius: 0.5rem; background: conic-gradient(#ff3b30, #ffd000, #34c759, #30b0ff, #5b3fd1, #ff4fa0, #ff3b30); opacity: 0.9; }
.light-palette .dot.custom span { position: relative; z-index: 1; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.light-palette .dot.custom input { position: absolute; inset: 0; z-index: 2; opacity: 0; width: 100%; height: 100%; min-height: 0; cursor: pointer; border: 0; padding: 0; }
.light-palette .dot.custom:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.light-palette.small .chips { margin: 0; padding: 0; }
/* a phone (360–414 px): eight 44 px dots don't fit the sheet's gutter, so two rows of four, like a lamp's own palette */
@media (max-width: 26rem) {
    .light-palette .dots { grid-template-columns: repeat(4, 1fr); gap: var(--s-1); max-width: none; margin: 0; }
    .light-palette .dot { max-width: none; aspect-ratio: auto; }
}

.lamps { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.lamps li { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: var(--s-1) var(--s-2); min-height: 3.25rem;
    padding: var(--s-1) var(--s-2) var(--s-1) var(--s-4); border-radius: var(--r-m); background: var(--bg); }
.lamps .swatch { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--sw, var(--surface-2)); box-shadow: 0 0 0 3px var(--surface); }
.lamps .off .swatch { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); }
.lamps .lamp-name { font-weight: 600; overflow-wrap: break-word; margin-left: var(--s-1); }
.lamps .off .lamp-name { color: var(--muted); }
.lamps em { font-style: normal; color: var(--muted); font-size: 0.9375rem; text-align: right; } /* "70% roze" may wrap; the name keeps its words */
.lamps .more { min-height: 2.25rem; padding: 0 var(--s-3); border: 0; border-radius: var(--r-pill); background: var(--surface); color: var(--text); font-weight: 600; font-size: var(--t-s);
    position: relative; }
.lamps .more::before { content: ""; position: absolute; inset: -0.25rem 0; } /* 44 px tall to tap */
.lamps .more[aria-expanded=true] { background: var(--text); color: var(--bg); }
.lamps .light-palette { grid-column: 1 / -1; padding: var(--s-2) 0 var(--s-2); }
.lamps .light-palette .dots { margin: 0; gap: var(--s-1); max-width: none; grid-template-columns: repeat(4, 1fr); } /* two rows: every dot stays 44 px */
.lamps .light-palette .dot { max-width: none; aspect-ratio: auto; }

/* a lamp's own slider, under its row: the room dimmer, filled in the room colour (.sheet .dim) */
.lamps .lamp-dim { grid-column: 1 / -1; margin: 0 0 var(--s-1); }

/* colour names under the dots (PersonPreferences: Tim's phone is greyscale) */
.light-palette.names .dots { row-gap: var(--s-5); padding-bottom: var(--s-4); }
.light-palette.names .dot.custom { overflow: visible; }
.light-palette .dot .dot-name, .light-palette .dot.custom .dot-name { position: absolute; z-index: 1; top: calc(100% + var(--s-1)); left: 50%; transform: translateX(-50%);
    color: var(--text); text-shadow: none; font-size: var(--t-xs); font-weight: 600; line-height: 1; white-space: nowrap; pointer-events: none; }

/* "Bewaar als scène" */
button.secondary.wide { width: 100%; margin-top: var(--s-3); }
.sheet .save-open { margin-top: var(--s-4); }
.save-scene { margin-top: var(--s-4); display: grid; gap: var(--s-1); }
.save-scene .label { margin-top: 0; }
.save-scene .note, .save-scene .confirm { margin: 0; }
.save-scene .confirm { font-weight: 600; }
.save-scene .add-row { margin: var(--s-2) 0; }
.save-scene .add-row input { background: var(--bg); }
.save-scene .chips { margin-bottom: var(--s-1); }
.save-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.saved-note { margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-m); background: var(--accent-soft); color: var(--text); font-weight: 600; }

.pair { background: var(--surface); border-radius: var(--r-xl); padding: var(--s-4); display: grid; gap: var(--s-3); justify-items: start; }
.pair p { margin: 0; }

/* ── Boodschappen ────────────────────────────────────────────────── */
.list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.list li { display: flex; align-items: center; gap: var(--s-2); min-height: 3.5rem; background: var(--surface); border-radius: var(--r-m); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-1); }
.list .name { flex: 1; overflow-wrap: anywhere; font-weight: 500; }
.list .name em { color: var(--muted); font-style: normal; margin-left: var(--s-1); }
.list .meta { text-align: right; }
.list .check { position: relative; width: var(--tap); height: var(--tap); flex: none; border: 0; border-radius: 50%; background: none; color: var(--on-accent); font-weight: 800; }
.list .check::before { content: ""; position: absolute; inset: 0.375rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--muted); }
.list .check.checked::before { background: var(--ok); box-shadow: none; }
.list .check.checked { color: var(--bg); }
.list .check span { position: relative; }
.list.done li { background: transparent; border: 2px dashed var(--line); }
.list.done .name { color: var(--muted); text-decoration: line-through; }
.list + button.secondary { margin-top: var(--s-3); }

/* ── Eten: week + recepten ──────────────────────────────────────── */
.week { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: var(--s-2); }
.week li { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); min-height: 4.25rem; background: var(--surface); border-radius: var(--r-l); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); }
.week li.free { background: transparent; border: 2px dashed var(--line); }
.week li.today { border: 0; background: var(--boter); color: var(--room-ink); }
.week li.today .meta, .week li.today .day em, .week li.today .remove { color: var(--room-ink); }
.week li.today a { color: var(--room-ink); }
.week li.today button.secondary { background: rgba(255, 255, 255, 0.6); color: var(--room-ink); }
.week .day { width: 3.25rem; display: grid; font-family: var(--display); font-weight: 700; font-size: 1.125rem; line-height: 1.1; }
.week .day em { color: var(--muted); font-style: normal; font-family: var(--font); font-weight: 400; font-size: var(--t-xs); }
.week .meal { flex: 1; min-width: 8rem; display: grid; font-weight: 600; }
.week .meal a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.week .empty { margin-left: auto; background: transparent; color: var(--muted); }
.week .add-row { flex: 1 1 100%; margin: 0; }
.week li.today .add-row input { background: var(--surface); }

.cards { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: var(--s-2); }
.cards li { display: grid; gap: 0.15rem; min-height: 4.25rem; background: var(--surface); border-radius: var(--r-l); padding: var(--s-3) var(--s-4); cursor: pointer; }
.cards li strong { font-family: var(--display); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.cards .card-link { color: inherit; text-decoration: none; font-weight: inherit; }
.cards .card-link:focus-visible { outline: none; }
.cards li:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.cards li:hover { box-shadow: inset 0 0 0 2px var(--line); }
.servings { display: inline-flex; align-items: center; gap: var(--s-3); margin: var(--s-3) 0; padding: var(--s-1); border-radius: var(--r-pill); background: var(--surface); }
.servings button { width: var(--tap); height: var(--tap); border-radius: 50%; border: 0; background: var(--surface-2); color: var(--text); font-size: 1.25rem; font-weight: 700; }
.servings span { font-weight: 600; min-width: 6rem; text-align: center; }
.ingredients { list-style: none; padding: 0; margin: 0 0 var(--s-4); background: var(--surface); border-radius: var(--r-xl); padding: var(--s-2) var(--s-4); }
.ingredients li { padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.ingredients li:last-child { border-bottom: 0; }
.ingredients em { color: var(--accent); font-style: normal; font-weight: 700; }
.steps { list-style: none; counter-reset: step; padding: 0; display: grid; gap: var(--s-3); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2rem 1fr; gap: var(--s-3); }
.steps li::before { content: counter(step); width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--koraal); color: var(--room-ink);
    font-family: var(--display); font-weight: 800; }
.danger { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* ── Muziek ──────────────────────────────────────────────────────── */
.primary-link { display: inline-flex; align-items: center; min-height: var(--tap); width: fit-content; padding: 0 var(--s-5); border-radius: var(--r-pill);
    background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; }

/* ── Automatisch: css/automatisch.css ── */

/* ── Chat ────────────────────────────────────────────────────────── */
.chat { padding-bottom: 6rem; }
.chat header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.messages { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }
.bubble { max-width: 85%; padding: var(--s-3) var(--s-4); border-radius: var(--r-l); background: var(--surface); white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.user { align-self: flex-end; background: var(--lila); color: var(--room-ink); border-bottom-right-radius: 0.375rem; }
.bubble.agent { align-self: flex-start; border-bottom-left-radius: 0.375rem; }
.bubble.error { background: var(--bad-soft); color: var(--bad); }
.bubble.pending { color: var(--muted); font-style: italic; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
.action { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted); font-size: var(--t-xs); }
.action.failed { background: var(--bad-soft); color: var(--bad); }
/* Absolute against #app (not the scroller), so it stays put above the tab bar without position: fixed. */
.composer { position: absolute; z-index: 15; left: 0; right: 0; margin: 0 auto; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); width: 100%; max-width: var(--page-w);
    display: flex; gap: var(--s-2); padding: var(--s-2) var(--s-4) var(--s-3); background: linear-gradient(to top, var(--bg) 75%, transparent); }
.composer input { flex: 1; }
.composer button { min-height: 3rem; border: 0; border-radius: var(--r-pill); }
.composer button[type=submit] { padding: 0 var(--s-4); background: var(--accent); color: var(--on-accent); font-weight: 700; }

.bubble .markdown { white-space: normal; }
.bubble .markdown > :first-child { margin-top: 0; }
.bubble .markdown > :last-child { margin-bottom: 0; }
.bubble .markdown p { margin: 0 0 0.55rem; }
.bubble .markdown ul, .bubble .markdown ol { margin: 0.2rem 0 0.55rem; padding-left: 1.3rem; }
.bubble .markdown li { margin: 0.15rem 0; }
.bubble .markdown h1, .bubble .markdown h2, .bubble .markdown h3 { font-family: var(--display); font-size: 1.0625rem; font-weight: 700; margin: 0.6rem 0 0.3rem; color: var(--text); letter-spacing: 0; }
.bubble .markdown strong { font-weight: 700; }
.bubble .markdown code { background: var(--surface-2); border-radius: 0.375rem; padding: 0.05rem 0.3rem; font-size: 0.9em; color: var(--text); }
.bubble .markdown pre { background: var(--surface-2); border-radius: var(--r-s); padding: var(--s-3); overflow-x: auto; }
.bubble .markdown pre code { background: none; padding: 0; }
.bubble .markdown table { border-collapse: collapse; margin: 0.3rem 0 0.6rem; font-size: 0.9rem; display: block; overflow-x: auto; }
.bubble .markdown th, .bubble .markdown td { border: 1px solid var(--line); padding: 0.3rem 0.55rem; text-align: left; }
.bubble .markdown th { background: var(--surface-2); }
.bubble .markdown blockquote { margin: 0.3rem 0; padding-left: 0.7rem; border-left: 3px solid var(--lila); color: var(--muted); }
.bubble .markdown a { color: var(--accent); }

.memories { margin: var(--s-3) 0 0; background: var(--surface); border-radius: var(--r-xl); padding: 0 var(--s-4); }
.memories summary { display: flex; align-items: center; min-height: 3.25rem; cursor: pointer; font-weight: 600; }
.memories[open] { padding-bottom: var(--s-3); }
.memories ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-1); }
.memories li { display: flex; align-items: center; gap: var(--s-2); }
.memories .who { font-size: var(--t-xs); font-weight: 600; color: var(--muted); min-width: 5rem; }
.memories li span:nth-child(2) { flex: 1; }

/* ── Blazor: first load, errors ─────────────────────────────────── */
.boot { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-5); }
.boot .mark { font-size: 2.75rem; }
.boot .mark .six { width: 2.9rem; height: 2.9rem; font-size: 1.85rem; }
.loading-progress { display: block; width: 4.5rem; height: 4.5rem; }
.loading-progress circle { fill: none; stroke: var(--surface-2); stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; }
.loading-progress-text { color: var(--muted); font-weight: 600; font-size: var(--t-s); }
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Even laden"); }

#blazor-error-ui { display: none; position: fixed; z-index: 1000; left: var(--s-3); right: var(--s-3); bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s-3));
    max-width: 34rem; margin: 0 auto; padding: var(--s-3) 3rem var(--s-3) var(--s-4); border-radius: var(--r-l); background: var(--bad-soft); color: var(--bad);
    font-weight: 600; box-shadow: var(--shadow-sheet); }
#blazor-error-ui .reload { color: var(--bad); margin-left: var(--s-2); }
#blazor-error-ui .dismiss { position: absolute; top: 0; right: 0; width: var(--tap); height: var(--tap); display: grid; place-items: center; cursor: pointer; }
.blazor-error-boundary { padding: var(--s-4); border-radius: var(--r-l); background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.blazor-error-boundary::after { content: "Hier ging iets mis. Ververs de pagina."; }
.valid.modified:not([type=checkbox]) { border-color: var(--ok); }
.invalid { border-color: var(--bad); }
.validation-message { color: var(--bad); }

/* Offline lamps (the bridge can't reach them): a word and an icon, never colour alone; controls off. */
.offline-icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; margin-right: 0.3em; }
.offline-note { display: inline-flex; align-items: center; font-weight: 600; font-style: normal; }
.tile .offline-note { display: flex; margin-top: var(--s-1); font-size: 0.85em; }
.tile:has(.offline-note) .open { padding-bottom: var(--s-5); } /* room for the brightness bar under the extra line */
.lamps li.offline .swatch { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); }
.hidden-lamps { margin: var(--s-4) 0; }
.hidden-lamps summary { cursor: pointer; font-weight: 600; }
.hidden-lamps ul { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.hidden-lamps li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.hidden-lamps li small { display: block; color: var(--muted); }
.problems-line { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0; color: var(--text); font-weight: 600; text-decoration: none; }