/* Radio: rustig en eigentijds. Licht grijs vlak, één lettertype (Geist), één accent.
   Dagversie standaard; nachtversie via het systeem of de knop rechtsboven (data-thema op <html>).
   Mobiel: één kolom; vanaf 960px twee kolommen. Niets ligt over het DJ-portret heen. */
@font-face {
  font-family: "Geist";
  src: url("/radio/fonts/geist-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --grond: #f5f6f8;
  --vlak: #ffffff;
  --vlak-2: #eef0f3;
  --lijn: #dde1e6;
  --lijn-zacht: #e8ebef;
  --tekst: #1c1f24;
  --tekst-2: #3a3f47;
  --zacht: #5f6670;
  --accent: #2b4c7e;
  --op-accent: #ffffff;
  --knop: #1c1f24;
  --op-knop: #ffffff;
  --live: #d94848;
  --luistert: #2f8a55;
  --denkt: #a86d0f;
  --schaduw: 0 20px 60px rgba(28, 31, 36, 0.12);
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="dag"]) {
    --grond: #101317; --vlak: #181c22; --vlak-2: #20252d; --lijn: #2c323b; --lijn-zacht: #232931;
    --tekst: #e9ecf0; --tekst-2: #c6ccd4; --zacht: #9aa3ae;
    --accent: #8fb3ff; --op-accent: #0d1422; --knop: #e9ecf0; --op-knop: #101317;
    --live: #ff6b6b; --luistert: #5fd08a; --denkt: #f0b54a;
    --schaduw: 0 20px 60px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-thema="nacht"] {
  --grond: #101317; --vlak: #181c22; --vlak-2: #20252d; --lijn: #2c323b; --lijn-zacht: #232931;
  --tekst: #e9ecf0; --tekst-2: #c6ccd4; --zacht: #9aa3ae;
  --accent: #8fb3ff; --op-accent: #0d1422; --knop: #e9ecf0; --op-knop: #101317;
  --live: #ff6b6b; --luistert: #5fd08a; --denkt: #f0b54a;
  --schaduw: 0 20px 60px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--grond);
  color: var(--tekst);
  font: 16px/1.5 var(--font);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.4; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, p { margin: 0; }
.klein { font-size: 14px; color: var(--zacht); }
.kop { font-size: 14px; font-weight: 500; color: var(--zacht); }

.demo-balk {
  background: var(--vlak-2); color: var(--tekst-2); border-bottom: 1px solid var(--lijn);
  padding: 8px 16px; font-size: 13px; text-align: center;
}

/* ── Kopbalk ──────────────────────────────────────────────── */
.kopbalk {
  display: flex; align-items: center; gap: 16px;
  max-width: 1200px; height: 64px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px);
}
.merk { font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.vulling { flex: 1; }
.kop-link { font-size: 14px; font-weight: 600; color: inherit; text-decoration: none; padding: 6px 12px; border: 1px solid var(--lijn); border-radius: 999px; }
.kop-link:hover, .kop-link:focus-visible { border-color: currentColor; }
.on-air { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--zacht); transition: color 0.3s; }
.on-air-stip { width: 7px; height: 7px; border-radius: 50%; background: var(--live); opacity: 0.45; transition: opacity 0.3s, box-shadow 0.3s; }
.on-air.aan { color: var(--tekst); }
.on-air.aan .on-air-stip { opacity: 1; box-shadow: 0 0 0 4px color-mix(in srgb, var(--live) 22%, transparent); }
.klok { font-size: 14px; color: var(--zacht); font-variant-numeric: tabular-nums; }
.thema-knop {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--lijn); background: transparent;
  display: grid; place-items: center; color: var(--tekst);
}
.thema-knop svg { width: 18px; height: 18px; }
.thema-knop .ico-zon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="dag"]) .thema-knop .ico-maan { display: none; }
  :root:not([data-thema="dag"]) .thema-knop .ico-zon { display: block; }
}
:root[data-thema="nacht"] .thema-knop .ico-maan { display: none; }
:root[data-thema="nacht"] .thema-knop .ico-zon { display: block; }

/* ── Indeling ─────────────────────────────────────────────── */
.radio {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px;
  max-width: 1200px; margin: 0 auto; padding: 16px clamp(16px, 4vw, 40px) 48px;
}
.kolom-links, .kolom-rechts { display: contents; }
@media (min-width: 960px) {
  .radio { grid-template-columns: minmax(0, 1fr) 380px; gap: 72px; padding-top: 24px; }
  .kolom-links { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
  .kolom-rechts { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
}

/* ── De DJ ────────────────────────────────────────────────── */
/* Blijft bovenaan staan tijdens scrollen (sticky); eenmaal vast (.vast, gezet in radio.js) wordt
   het blok compacter. De achtergrond loopt over de volle breedte door, zodat er niets onderdoor schemert. */
.dj {
  display: flex; gap: 20px; align-items: center;
  position: sticky; top: 0; z-index: 10;
  padding: 12px 0; margin: -12px 0;
  background: var(--grond); box-shadow: 0 0 0 100vmax var(--grond); clip-path: inset(0 -100vmax);
  transition: padding 0.2s ease;
}
.dj.vast { padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.dj-portret {
  flex: none; width: 132px; height: 132px; border-radius: 50%; overflow: hidden;
  background: var(--vlak-2); box-shadow: 0 0 0 3px var(--grond), 0 0 0 4px var(--lijn);
  transition: box-shadow 0.3s, width 0.2s ease, height 0.2s ease;
}
.dj.vast .dj-portret { width: 84px; height: 84px; }
.dj.vast .ondertitel { font-size: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body[data-status="spreekt"] .dj-portret { box-shadow: 0 0 0 3px var(--grond), 0 0 0 5px var(--live); }
body[data-status="luistert"] .dj-portret { box-shadow: 0 0 0 3px var(--grond), 0 0 0 5px var(--luistert); }
.dj-portret canvas { width: 100%; height: 100%; display: block; }
.dj-tekst { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dj-regel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.dj-naam { font-weight: 600; font-size: 18px; }
.ai-label { font-size: 14px; color: var(--zacht); }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--accent); }
.status-stip { width: 7px; height: 7px; border-radius: 50%; background: var(--zacht); align-self: center; }
.status[data-s="muziek"] .status-stip { background: var(--accent); }
.status[data-s="spreekt"] { color: var(--live); }
.status[data-s="spreekt"] .status-stip { background: var(--live); }
.status[data-s="luistert"] { color: var(--luistert); }
.status[data-s="luistert"] .status-stip { background: var(--luistert); animation: puls 0.9s infinite; }
.status[data-s="denkt"] { color: var(--denkt); }
.status[data-s="denkt"] .status-stip { background: var(--denkt); animation: puls 0.6s infinite; }
@keyframes puls { 50% { opacity: 0.3; } }
.ondertitel { max-width: 46ch; font-size: 20px; line-height: 1.45; color: var(--tekst-2); overflow-wrap: break-word; }
.ondertitel[data-wie="bezoeker"] { color: var(--zacht); font-style: italic; }

/* ── Nu op de radio ───────────────────────────────────────── */
.nu { display: flex; gap: 36px; align-items: flex-end; }
.hoes { flex: none; width: 260px; height: 260px; border-radius: 16px; object-fit: cover; background: var(--vlak-2); }
.nu-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.titel { margin-top: 4px; font-size: 44px; line-height: 1.05; font-weight: 600; letter-spacing: -0.025em; overflow-wrap: break-word; }
.artiest { font-size: 18px; margin-top: 6px; }
.album { font-size: 14px; color: var(--zacht); }
.licentie { font-size: 13px; color: var(--zacht); margin-top: 4px; }
.licentie a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.licentie a:hover { color: var(--tekst); }
.voortgang { height: 3px; border-radius: 2px; background: var(--lijn); overflow: hidden; }
.voortgang i { display: block; height: 100%; width: 0; background: var(--tekst); border-radius: 2px; }
.tijden { display: flex; justify-content: space-between; font-size: 13px; color: var(--zacht); margin-top: 6px; font-variant-numeric: tabular-nums; }
.bediening { display: flex; align-items: center; gap: 12px; }
.rond {
  flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--lijn);
  background: var(--vlak); color: var(--tekst); display: grid; place-items: center;
}
.rond svg { width: 18px; height: 18px; fill: currentColor; }
.rond:hover:not(:disabled) { border-color: var(--zacht); }
.rond.groot { width: 56px; height: 56px; border: 0; background: var(--knop); color: var(--op-knop); }
.rond.groot svg { width: 22px; height: 22px; }
.rond .ico-pauze, .rond.speelt .ico-speel { display: none; }
.rond.speelt .ico-pauze { display: block; }

.volumes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 560px; }
.volumes label { display: grid; gap: 4px; font-size: 14px; color: var(--zacht); }
input[type="range"] { accent-color: var(--tekst); width: 100%; }

/* ── Gesprek ──────────────────────────────────────────────── */
.praat { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 16px; background: var(--vlak); }
.gesprek-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.schakel { font-size: 14px; color: var(--zacht); display: inline-flex; gap: 8px; align-items: center; }
.schakel input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.gesprek { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.gesprek:empty::before { content: "Nog geen gesprek. Vraag bijvoorbeeld: Welk nummer speelt er nu?"; color: var(--zacht); font-size: 14px; }
.gesprek li { max-width: 90%; font-size: 15px; overflow-wrap: break-word; }
.gesprek li.van-bezoeker { align-self: flex-end; max-width: 85%; padding: 8px 12px; border-radius: 12px; background: var(--vlak-2); }
.gesprek .wie { display: block; font-size: 12px; font-weight: 600; color: var(--zacht); }
.gesprek li.van-bezoeker .wie { display: none; }
.gesprek .label { font-weight: 500; padding: 0 6px; border-radius: 4px; background: var(--vlak-2); }

.mic-actief { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--vlak-2); }
.mic-stip { width: 10px; height: 10px; border-radius: 50%; background: var(--live); animation: puls 1s infinite; flex: none; }
#mic-tekst { flex: 1; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mic-meter { width: 64px; height: 4px; border-radius: 2px; background: var(--lijn); overflow: hidden; flex: none; }
.mic-meter i { display: block; height: 100%; width: 0; background: var(--luistert); }
.stop-knop { flex: none; min-height: 36px; border: 0; border-radius: 18px; padding: 0 16px; font-weight: 600; background: var(--live); color: #ffffff; }

.praatbalk { display: flex; flex-direction: column; gap: 10px; }
.typ { display: flex; gap: 8px; }
.typ input {
  flex: 1; min-width: 0; height: 48px; padding: 0 16px; border-radius: 24px;
  border: 1px solid var(--lijn); background: var(--grond); font-size: 16px;
}
.typ input::placeholder { color: var(--zacht); }
.typ .rond svg { fill: none; }
.praat-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px;
  border: 0; border-radius: 24px; background: var(--accent); color: var(--op-accent); font-weight: 600;
}
.praat-knop svg { width: 20px; height: 20px; }
.praat-knop.actief { background: var(--luistert); color: var(--op-knop); }
.privacy { font-size: 12px; color: var(--zacht); }

/* ── Sfeer en wachtrij ────────────────────────────────────── */
.sfeer, .hierna { display: flex; flex-direction: column; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--lijn);
  background: var(--vlak); color: var(--tekst); font-size: 14px; font-weight: 500;
}
.chip:hover { border-color: var(--zacht); }
.chip[aria-pressed="true"] { background: var(--tekst); border-color: var(--tekst); color: var(--grond); }

.wachtrij { list-style: none; margin: 0; padding: 0; }
.wachtrij:empty::before { content: "De wachtrij vult zich zodra de radio speelt."; color: var(--zacht); font-size: 14px; }
.wachtrij li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--lijn-zacht); }
.w-titel { font-weight: 500; overflow-wrap: break-word; }
.w-artiest { color: var(--zacht); text-align: right; }
.w-reden { grid-column: 1 / -1; font-size: 13px; color: var(--zacht); }

/* ── Start ────────────────────────────────────────────────── */
.start {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--grond) 82%, transparent); backdrop-filter: blur(10px);
  transition: opacity 0.5s;
}
.start.weg { opacity: 0; pointer-events: none; }
.start-kaart {
  max-width: 440px; text-align: center; padding: 36px 28px; border-radius: 20px;
  background: var(--vlak); box-shadow: var(--schaduw);
}
.start-logo { font-weight: 600; font-size: 28px; letter-spacing: -0.02em; }
.start h1 { font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; margin: 14px 0 8px; }
.start p { color: var(--tekst-2); margin-bottom: 24px; }
.start-knop {
  min-height: 56px; padding: 0 32px; border: 0; border-radius: 28px;
  font-size: 18px; font-weight: 600; background: var(--knop); color: var(--op-knop);
}
.start .start-info { font-size: 14px; color: var(--zacht); margin: 16px 0 0; }
.start .start-verzoek { font-size: 14px; margin: 8px 0 0; }
.start .start-verzoek a { color: inherit; }

.melding {
  position: fixed; z-index: 30; left: 50%; bottom: 20px; transform: translateX(-50%);
  max-width: min(520px, calc(100% - 32px)); padding: 12px 16px; border-radius: 12px;
  background: var(--tekst); color: var(--grond); box-shadow: var(--schaduw);
}

/* ── Mobiel ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .kopbalk { gap: 12px; }
  .dj { gap: 16px; }
  .dj-portret { width: 104px; height: 104px; }
  .dj.vast .dj-portret { width: 64px; height: 64px; }
  .dj.vast .ondertitel { font-size: 15px; }
  .dj.vast .ai-label { display: none; }
  .ondertitel { font-size: 17px; }
  .nu { flex-direction: column; align-items: stretch; gap: 20px; }
  .hoes { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 420px; align-self: center; }
  .titel { font-size: 32px; letter-spacing: -0.02em; }
  .bediening { justify-content: center; gap: 16px; }
  .rond.groot { width: 64px; height: 64px; }
  .volumes { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .volumes label { grid-template-columns: 60px 1fr; align-items: center; }
  .praat { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}