/* Music: the "speelt nu" card (Thuis + Muziek), the mini player above the tab bar, the Muziek page, and the compact
   presence row on Thuis (option B, 2026-10-19). Zondag tokens only (app.css). While a speaker plays its card and the
   mini player wear the room's pastel with ink on top, light and night alike: only what's on carries colour. */

/* ── Thuis: who is home, small ── */
.presence-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 0; }
.presence-row .state { margin: 0; }
.presence-pill { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); margin: 0; padding: 0 var(--s-4) 0 var(--s-1);
    border: 0; border-radius: var(--r-pill); background: var(--surface); color: var(--text); font-weight: 600; }
.presence-pill .avatar { width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2);
    font-family: var(--display); font-weight: 800; color: var(--text); }
.presence-pill.presence-home .avatar { background: var(--mint); color: var(--room-ink); }
.presence-pill.presence-asleep .avatar { background: var(--lila); color: var(--room-ink); }
.presence-pill small { color: var(--muted); font-weight: 500; font-size: var(--t-s); }
.presence-pill[aria-expanded="true"] { background: var(--accent-soft); }
.presence-edit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin: var(--s-2) 0 0;
    padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); background: var(--surface); border-radius: var(--r-xl); }
.home > .np { margin-top: var(--s-3); }

/* ── the player card ── */
.np { display: grid; gap: var(--s-3); padding: var(--s-4); background: var(--surface); border-radius: var(--r-xl); }
.np-where { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-s); font-weight: 600; color: var(--muted); }
.np-where i { width: 0.875rem; height: 0.875rem; flex: none; border-radius: 50%; background: var(--c); }
.np-place { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-where a { flex: none; display: inline-flex; align-items: center; min-height: 2rem; }
.np-main { display: flex; align-items: center; gap: var(--s-4); }
.np-art { width: 5.5rem; height: 5.5rem; flex: none; border-radius: var(--r-m); object-fit: cover; background: var(--surface-2); }
.np-art.empty { display: grid; place-items: center; color: var(--muted); }
.np-art.badge { font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--text); }
.np.hero .np-art.badge { font-size: 2.25rem; }
.mini .np-art.badge { font-size: 0.875rem; }
.np-art.empty svg { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.np-text { min-width: 0; display: grid; gap: 0.15rem; }
.np-text strong { font-family: var(--display); font-size: var(--t-l); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; overflow-wrap: anywhere; }
.np-text span { color: var(--muted); overflow-wrap: anywhere; }
.np-text .np-source { justify-self: start; margin-top: var(--s-1); padding: 0.1rem var(--s-2); border-radius: var(--r-pill); background: var(--surface-2);
    color: var(--text); font-size: var(--t-xs); font-weight: 700; }
.np-controls { display: flex; align-items: center; justify-content: center; gap: var(--s-4); }
.np-controls button { width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text); font-size: 1.05rem; }
.np-controls button.play { width: 3.5rem; height: 3.5rem; background: var(--accent); color: var(--on-accent); font-size: 1.25rem; }
.np-volume { display: flex; align-items: center; gap: var(--s-2); }
.np-volume button { width: var(--tap); height: var(--tap); flex: none; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text);
    font-size: 1.25rem; font-weight: 700; }
.np-volume input[type=range] { --fill: var(--c); flex: 1 1 0; width: 0; min-width: 0; }
.np-volume output { flex: none; min-width: 3.25rem; text-align: right; font-size: var(--t-s); color: var(--muted); white-space: nowrap; }
.np-volume output b { font-family: var(--display); font-size: 1.125rem; color: var(--text); }

/* playing: the whole card in the room's pastel, ink on top (also at night) */
.np.hero { background: var(--c); color: var(--room-ink); }
.np.hero .np-where, .np.hero .np-where a, .np.hero .np-text span, .np.hero .np-volume output, .np.hero .np-volume output b { color: var(--room-ink); }
.np.hero .np-where i { background: #FFFFFF; }
.np.hero .np-art { width: 7.5rem; height: 7.5rem; }
.np.hero .np-art.empty { background: rgba(255, 255, 255, 0.55); color: var(--room-ink); }
.np.hero .np-text .np-source { background: rgba(255, 255, 255, 0.6); color: var(--room-ink); }
.np.hero .np-controls button, .np.hero .np-volume button { background: rgba(255, 255, 255, 0.55); color: var(--room-ink); }
.np.hero .np-controls button.play { background: var(--room-ink); color: #FFFFFF; }
.np.hero .np-volume input[type=range] { --fill: var(--room-ink); }
.np.hero .np-volume input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--room-ink) var(--v), rgba(255, 255, 255, 0.55) var(--v)); }
.np.hero .np-volume input[type=range]::-moz-range-track { background: rgba(255, 255, 255, 0.55); }
.np.hero .np-volume input[type=range]::-webkit-slider-thumb { background: var(--room-ink); }
@media (max-width: 23rem) { .np.hero .np-art { width: 6rem; height: 6rem; } .np-controls { gap: var(--s-3); } }

/* ── mini player: between the page and the tab bar ── */
.mini { flex: none; display: flex; align-items: center; gap: var(--s-2); box-sizing: border-box; width: calc(100% - 2 * var(--s-2)); max-width: 35rem;
    margin: 0 auto var(--s-2); padding: var(--s-2); border-radius: var(--r-l); background: var(--c); color: var(--room-ink); }
.mini-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); color: inherit; text-decoration: none; font-weight: 400; }
.mini .np-art { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; }
.mini .np-art.empty { background: rgba(255, 255, 255, 0.55); color: var(--room-ink); }
.mini .t { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.mini .t strong, .mini .t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .t strong { font-weight: 700; }
.mini .t span { font-size: var(--t-s); }
.mini > button { width: var(--tap); height: var(--tap); flex: none; border: 0; border-radius: 50%; background: var(--room-ink); color: #FFFFFF; font-size: 1rem; }

/* ── the Muziek page ── */
.music .speaker-pick { flex-wrap: nowrap; overflow-x: auto; margin: var(--s-3) calc(-1 * var(--s-4)) var(--s-4); padding: 0 var(--s-4) 2px; scrollbar-width: none; }
.music .speaker-pick::-webkit-scrollbar { display: none; }
.music .speaker-pick i { width: 0.75rem; height: 0.75rem; flex: none; border-radius: 50%; background: var(--c); }
.music .speaker-pick .chip.sel i { background: var(--bg); }
.music .spotify-card { display: grid; gap: var(--s-3); padding: var(--s-3); background: var(--surface); border-radius: var(--r-xl); }
.music .spotify-card .primary { width: 100%; }
.music .spotify-card .add-row { margin: 0; }
.music .spotify-card .add-row input { background: var(--bg); }
.music .spotify-card .note { margin: 0; }
.music .spotify-card .primary-link { justify-self: start; }
.src-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.src { display: flex; align-items: center; gap: var(--s-3); min-height: 3.5rem; padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-m);
    background: var(--surface); color: var(--text); font-weight: 600; text-align: left; }
.src .logo { width: 2.25rem; height: 2.25rem; flex: none; border-radius: 0.6rem; display: grid; place-items: center; background: var(--c, var(--surface-2));
    color: var(--room-ink); font-family: var(--display); font-weight: 800; font-size: 0.8rem; }
.together { padding: var(--s-3) var(--s-4); background: var(--surface); border-radius: var(--r-xl); }
.together p { margin: 0 0 var(--s-2); color: var(--muted); font-size: var(--t-s); }
.more-src { margin-top: var(--s-5); }
.more-src summary { display: flex; align-items: center; min-height: var(--tap); font-weight: 600; color: var(--muted); cursor: pointer; list-style: none; }
.more-src summary::-webkit-details-marker { display: none; }
.more-src summary::after { content: "▾"; margin-left: var(--s-2); }
.more-src[open] summary::after { content: "▴"; }
.more-src .label { margin-top: var(--s-2); }
.more-src > .secondary { margin-top: var(--s-3); }

/* ── Thuis: the TV while someone watches (TvCard), under the music card ── */
.tv-now { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); padding: var(--s-3); border-radius: var(--r-xl);
    background: var(--c); color: var(--room-ink); }
.tv-badge { width: 2.75rem; height: 2.75rem; flex: none; border-radius: 0.75rem; display: grid; place-items: center; background: rgba(255, 255, 255, 0.55);
    color: #FFFFFF; font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; }
.tv-badge svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--room-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tv-text { min-width: 0; display: grid; line-height: 1.25; }
.tv-text strong { font-family: var(--display); font-size: var(--t-l); font-weight: 700; letter-spacing: -0.01em; }
.tv-text span { font-size: var(--t-s); }
.home > .tv-now:first-of-type { margin-top: var(--s-3); }

/* House-style icons (Icon.razor) instead of emoji-prone characters: stroke like the tab bar, filled where solid reads better. */
.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.icon .fill { fill: currentColor; stroke-width: 1.2; }
.np-controls button, .mini > button { display: inline-grid; place-items: center; }
.np-controls button .icon { width: 1.25rem; height: 1.25rem; }
.np-controls button.play .icon { width: 1.5rem; height: 1.5rem; }
.np-controls button.play .icon-play { margin-left: 0.15rem; } /* optical centre of a triangle */
.mini > button .icon { width: 1.15rem; height: 1.15rem; }
.music .speaker-pick .eq .icon { width: 0.9em; height: 0.9em; }
.private .icon { width: 0.95em; height: 0.95em; color: var(--muted); }
button.secondary .icon, button.primary .icon { margin-right: 0.4em; } /* flex drops the space between icon and text */

/* Koppel je Spotify (SpotifyLink): the state, then the buttons. */
.music .spotify-link { display: grid; gap: var(--s-2); }
.music .spotify-link-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.music .spotify-link .warn { color: var(--bad); font-weight: 600; }