/* Scene tiles (SceneTiles.razor): Thuis strip under the music, Licht grid above the rooms (docs/design/opties-wand,
   option A + B). Each scene its own pastel and icon; active = ink with a ✓; the one that suits now has an outline. */
.scenes-now { margin: var(--s-4) 0 var(--s-3); }
.scenes-now .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-2); }
.scenes-now .section-head h2 { margin: 0; }
.scenes-now .section-head a { font-size: var(--t-s); }
.scenes-now-list { display: grid; gap: var(--s-2); }
.scenes-now.grid .scenes-now-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scenes-now.strip .scenes-now-list { grid-auto-flow: column; grid-auto-columns: 8.5rem; overflow-x: auto; margin: 0 calc(-1 * var(--s-4));
    padding: var(--s-1) var(--s-4) var(--s-1); scroll-padding-inline: var(--s-4); scrollbar-width: none; scroll-snap-type: x proximity; }
/* snap keeps the page gutter (without scroll-padding the first tile snapped flush to the screen edge) */
.scenes-now.strip .scenes-now-list::-webkit-scrollbar { display: none; }
.scene-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-2); min-height: 6.5rem; padding: var(--s-3);
    border: 0; border-radius: var(--r-xl); background: var(--c); color: var(--room-ink); text-align: left; font: inherit; scroll-snap-align: start; overflow: hidden; isolation: isolate; }
.scenes-now.grid .scene-card { min-height: 5.5rem; border-radius: var(--r-l); }
.scene-card strong { font-family: var(--display); font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1.15;
    -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } /* "Borrel-avond" (lang nl), never mid-word unless it must */
.scenes-now.grid .scene-card { padding: var(--s-2) var(--s-3) var(--s-3); }
.scenes-now.grid .scene-card strong { font-size: 0.9375rem; letter-spacing: -0.02em; }
.scene-card-icon { width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scenes-now.grid .scene-card-icon { width: 1.5rem; height: 1.5rem; }
.scene-card.active { background: var(--text); color: var(--bg); }
.scene-card.active::after { content: "✓"; position: absolute; top: var(--s-2); right: var(--s-2); width: 1.625rem; height: 1.625rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--bg); color: var(--text); font-weight: 800; animation: pop var(--dur-m) var(--ease-spring); }
.scene-card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* "houd vast" (SceneCare): a loud scene at night; holding fills the tile from the left in the 600 ms a hold takes */
.scene-card-hint { font-size: var(--t-xs); font-weight: 700; opacity: 0.8; }
.scene-card.needs-hold::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--room-ink); opacity: 0.18;
    transform: scaleX(0); transform-origin: left; }
.scene-card.needs-hold:active::before { transform: scaleX(1); transition: transform 600ms linear; }
.scene-card.suggested { box-shadow: inset 0 0 0 3px var(--room-ink); }
.scene-card-tag { position: absolute; top: var(--s-2); right: var(--s-2); padding: 0.1rem var(--s-2); border-radius: var(--r-pill); background: var(--surface); color: var(--text);
    font-size: var(--t-xs); font-weight: 700; }
/* busy: a sheen runs over it (css/motion.css .scene.pending, the same here) */
.scene-card.pending::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent, var(--sheen), transparent);
    animation: sweep 0.9s var(--ease) infinite; }
.undo-pill { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); margin-top: var(--s-2); padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill);
    background: var(--surface-2); color: var(--text); font: inherit; font-weight: 700; }
.scene-card, .undo-pill { transition: transform var(--dur-m) var(--ease-spring); }
.scene-card:active, .undo-pill:active { transform: scale(var(--press-small)); transition-duration: var(--dur-xs); }

/* at night the tiles stay dark with only a pastel icon, like the Thuis cards; the active one is light */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="licht"]) .scene-card:not(.active) { background: var(--surface); color: var(--text); }
    :root:not([data-theme="licht"]) .scene-card:not(.active) .scene-card-icon { color: var(--c); }
    :root:not([data-theme="licht"]) .scene-card.suggested { box-shadow: inset 0 0 0 3px var(--text); }
}
:root[data-theme="nacht"] .scene-card:not(.active) { background: var(--surface); color: var(--text); }
:root[data-theme="nacht"] .scene-card:not(.active) .scene-card-icon { color: var(--c); }
:root[data-theme="nacht"] .scene-card.suggested { box-shadow: inset 0 0 0 3px var(--text); }
@media (prefers-reduced-motion: reduce) {
    .scene-card.pending::after { animation: none; }
    .scene-card, .undo-pill { --press-small: 1; }
}