/* Deep Radio TV – webversie.
   Zelfde ontwerp als de Google TV-app: ontworpen op een canvas van 960 x 540 dp.
   1rem = 10 dp uit dat ontwerp; de basis-fontsize schaalt met het venster, dus alle
   verhoudingen blijven kloppen van telefoon tot 4K-tv. */

/* ---------------------------------------------------------------- fonts */
@font-face { font-family: Poppins; src: url(../fonts/poppins-300.ttf) format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: Poppins; src: url(../fonts/poppins-400.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url(../fonts/poppins-500.ttf) format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Poppins; src: url(../fonts/poppins-700.ttf) format('truetype'); font-weight: 700; font-display: swap; }

/* ---------------------------------------------------------------- tokens */
:root {
  --pink-400: #E63D8F;
  --pink-500: #DC1E7A;
  --ink-0: #FFFFFF;
  --ink-100: #D7D8DF;
  --ink-200: #A9ABB6;
  --ink-300: #7C7E8B;
  --ink-600: #2A2B34;
  --ink-700: #1E1F26;
  --ink-800: #15161B;
  --ink-900: #0D0E12;

  --brand: var(--pink-500);
  --brand-hover: var(--pink-400);
  --on-brand: #FFFFFF;

  --surface-page: var(--ink-900);
  --surface-raised: var(--ink-800);
  --surface-card: var(--ink-700);
  --surface-card-hover: var(--ink-600);
  --surface-bar: rgba(8, 9, 12, .35);

  --border-subtle: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .16);

  --text-primary: #FFFFFF;
  --text-secondary: var(--ink-200);
  --text-muted: var(--ink-300);
  --text-brand: var(--pink-400);

  --glow-brand: rgba(220, 30, 122, .28);
  --glow-brand-strong: rgba(220, 30, 122, .50);
  --ghost-button: rgba(255, 255, 255, .10);

  --radius-md: .6rem;
  --radius-lg: 1.2rem;
  --page-x: 3.6rem;
  --topbar-h: 5rem;
}

/* ---------------------------------------------------------------- base */
html {
  /* 1rem = 10 ontwerp-dp: het hele canvas (960 x 540 dp) past altijd in beeld. */
  font-size: min(100vw / 96, 100vh / 54);
  background: var(--surface-page);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 400;
  color: var(--text-primary);
  background: var(--surface-page);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.app { position: relative; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; }

.screen { position: absolute; inset: 0; outline: none; }

/* Focus: roze ring met gloed, zoals de focus-state op de tv. Bewust :focus en niet
   :focus-visible, zodat een tv-afstandsbediening altijd ziet waar de selectie staat. */
:focus { outline: none; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 var(--page-x);
  background: var(--surface-bar);
  backdrop-filter: blur(1.2rem);
  border-bottom: 1px solid var(--border-subtle);
}

.topbar__logo { height: 2.2rem; width: auto; }
.topbar__spacer { flex: 1; }
.topbar__clock { font-weight: 500; font-size: 1.2rem; margin-left: .8rem; font-variant-numeric: tabular-nums; }

.nav { display: flex; gap: .8rem; margin-left: 3rem; }

.pill {
  border-radius: 999px;
  padding: .5rem 1.2rem;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-secondary);
  border: 2px solid transparent;
  white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}

.pill--nav { background: transparent; }
.pill--nav:hover { color: var(--text-primary); background: var(--surface-card-hover); }
.pill--nav:focus { color: var(--text-primary); background: var(--surface-card-hover); border-color: var(--brand); }
.pill--nav[aria-current="page"] { background: var(--brand); color: var(--on-brand); }
.pill--nav[aria-current="page"]:focus { background: var(--brand); border-color: var(--on-brand); }

.pill--toggle {
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  margin-right: 1.6rem;
}
.pill--toggle:hover { color: var(--text-primary); background: var(--surface-card-hover); }
.pill--toggle:focus { color: var(--text-primary); background: var(--surface-card-hover); border: 2px solid var(--brand); }
.pill--toggle[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); border-color: transparent; }
.pill--toggle[aria-pressed="true"]:focus { border: 2px solid var(--on-brand); }
.pill--toggle.is-muted { opacity: .5; }

.live-dot {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--brand);
  animation: livepulse 2s ease-in-out infinite;
}

@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.icon-button {
  width: 3rem;
  height: 3rem;
  margin-left: 1.6rem;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  flex: none;
}
.icon-button svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
.icon-button:hover { background: var(--surface-card-hover); }
.icon-button:focus { background: var(--brand); border: 2px solid var(--on-brand); }

/* ---------------------------------------------------------------- bouwstenen */
.eyebrow {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text-brand);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: 999px;
  padding: .5rem 1.1rem;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .14em;
}

.eq { display: flex; align-items: flex-end; gap: .2rem; height: 1rem; }
.eq span {
  display: block;
  width: .2rem;
  height: 100%;
  border-radius: .1rem;
  background: var(--on-brand);
  transform-origin: bottom;
  transform: scaleY(.15);
}
/* Zonder Web Audio-analyse (stream zonder CORS): rustige animatie in plaats van stilstand. */
.eq--synthetic span { animation: eqbar 1.1s ease-in-out infinite; }
.eq--synthetic span:nth-child(2) { animation-duration: .8s; animation-delay: -.3s; }
.eq--synthetic span:nth-child(3) { animation-duration: 1.4s; animation-delay: -.6s; }
@keyframes eqbar { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  border-radius: 999px;
  padding: 1rem 2rem;
  font-weight: 700;
  font-size: 1.3rem;
  border: 2px solid transparent;
}
.btn svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }
.btn--brand { background: var(--brand); color: var(--on-brand); }
.btn--brand:hover { background: var(--brand-hover); }
.btn--brand:focus { background: var(--brand-hover); border-color: var(--on-brand); box-shadow: 0 0 0 .6rem var(--glow-brand); }
.btn--ghost { background: var(--ghost-button); color: var(--text-primary); border: 1px solid var(--border-strong); padding: 1rem 1.7rem; font-weight: 500; }
.btn--ghost:hover { background: var(--surface-card-hover); }
.btn--ghost:focus { background: var(--surface-card-hover); border: 2px solid var(--brand); }

/* Decoratie */
.glow-corner {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(220, 30, 122, .32), rgba(220, 30, 122, .12) 55%, rgba(220, 30, 122, 0) 100%);
  pointer-events: none;
}

.backdrop {
  position: absolute;
  inset: -10%;
  background-position: center;
  background-size: cover;
  filter: blur(7rem);
  opacity: .5;
  transform: scale(1.1);
  transition: opacity .6s;
}
.backdrop--soft { opacity: .45; filter: blur(8rem); }

.scrim-h { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 14, 18, .97), rgba(13, 14, 18, .6) 50%, rgba(13, 14, 18, .32)); }
.scrim-v { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 14, 18, 1), rgba(13, 14, 18, .4) 50%, rgba(13, 14, 18, 0)); }

/* Plaatsvervanger terwijl artwork laadt (of ontbreekt): logo op de kaartkleur. */
.art {
  position: relative;
  background: var(--surface-card) center / 55% auto no-repeat url(../img/logo-full-white.png);
  overflow: hidden;
}
.art--labelled::after {
  content: 'loading';
  position: absolute;
  left: 0;
  right: 0;
  top: 62%;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--text-muted);
}
.art > img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.art > img.is-loaded { opacity: 1; }

/* ---------------------------------------------------------------- home / now playing */
.np { position: absolute; inset: 0; }
.np__body {
  position: absolute;
  inset: var(--topbar-h) var(--page-x) 6.4rem var(--page-x);
  display: flex;
  align-items: center;
  gap: 3.6rem;
}

.np__cover-wrap { position: relative; flex: none; }
.np__cover-wrap::before {
  content: '';
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(220, 30, 122, .45), rgba(220, 30, 122, .2) 55%, rgba(220, 30, 122, 0) 100%);
}
.np__cover {
  position: relative;
  width: 26.2rem;
  height: 26.2rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, .5);
}

.np__info { flex: 1; min-width: 0; }
.np__head { display: flex; align-items: center; gap: 1.2rem; }
.np__show { font-size: 1.2rem; letter-spacing: .18em; }
.np__label { margin-top: 1.2rem; font-size: 1.2rem; font-weight: 500; letter-spacing: .04em; color: var(--text-muted); }
.np__title {
  /* autoFit() zoekt binnen deze grenzen de grootste maat die op --fit-lines regels past. */
  --fit-max: 4.2;
  --fit-min: 2.2;
  --fit-lines: 2;
  /* De extra ruimte onderaan is voor staarten van letters als g, y en p: bij deze krappe
     regelafstand steken die buiten hun regelvak, en overflow zou ze anders afsnijden. */
  margin: .4rem 0 -.24em;
  padding-bottom: .24em;
  font-weight: 700;
  font-size: calc(var(--fit-max) * 1rem);
  line-height: .98;
  letter-spacing: -.02em;
  max-height: calc(var(--fit-lines) * .98em + .24em);
  overflow: hidden;
}
.np__artist { margin-top: .4rem; font-weight: 300; font-size: 1.9rem; color: var(--ink-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.np__controls { display: flex; align-items: center; gap: 1.6rem; margin-top: 2.4rem; }
.np__play {
  width: 5.7rem;
  height: 5.7rem;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 .5rem var(--glow-brand);
  display: grid;
  place-items: center;
  flex: none;
  border: 2px solid transparent;
}
.np__play svg { width: 2.4rem; height: 2.4rem; fill: var(--on-brand); }
.np__play:hover { background: var(--brand-hover); }
.np__play:focus { background: var(--brand-hover); border-color: var(--on-brand); box-shadow: 0 0 0 .5rem var(--glow-brand-strong); }
.np__status { font-weight: 700; font-size: 1.2rem; letter-spacing: .18em; color: var(--text-muted); }
.np__status.is-alert { color: var(--text-brand); }

.np__spectrum { position: absolute; left: 0; right: 0; bottom: 0; height: 6.4rem; padding: 0 var(--page-x) 1rem; }
.np__spectrum canvas { width: 100%; height: 100%; display: block; }
.np[data-spectrum="off"] .np__spectrum { display: none; }

/* Trackwissel: oude kaart naar links weg, nieuwe van rechts in beeld. */
.np__cover-wrap, .np__info { transition: transform .22s ease-in, opacity .22s ease-in; }
.np.is-leaving .np__cover-wrap, .np.is-leaving .np__info { transform: translateX(-4rem); opacity: 0; }
.np.is-entering .np__cover-wrap, .np.is-entering .np__info { transform: translateX(7rem); opacity: 0; transition: none; }

/* ---------------------------------------------------------------- deepdisc */
.dd { position: absolute; inset: 0; }
.dd__body {
  position: absolute;
  inset: var(--topbar-h) var(--page-x) 0 var(--page-x);
  display: flex;
  align-items: center;
  gap: 4rem;
}
.dd__text { flex: 1; min-width: 0; }
.dd__week { margin-top: .6rem; font-size: 1.1rem; color: var(--text-secondary); }
.dd__title {
  --fit-max: 4.8;
  --fit-min: 2.4;
  --fit-lines: 2;
  margin: 1.4rem 0 -.24em;
  padding-bottom: .24em;
  font-weight: 700;
  font-size: calc(var(--fit-max) * 1rem);
  line-height: .96;
  letter-spacing: -.02em;
  max-height: calc(var(--fit-lines) * .96em + .24em);
  overflow: hidden;
}
.dd__artist { margin-top: .6rem; font-weight: 300; font-size: 2rem; color: var(--ink-100); }
.dd__intro { margin-top: 1.6rem; max-width: 33rem; font-size: 1.2rem; line-height: 1.4; color: var(--text-secondary); }
.dd__cta { margin-top: 2.2rem; }
.dd__cover-wrap { position: relative; flex: none; }
.dd__cover-wrap::before {
  content: '';
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(220, 30, 122, .45), rgba(220, 30, 122, .2) 55%, rgba(220, 30, 122, 0) 100%);
}
.dd__cover { position: relative; width: 29.2rem; height: 29.2rem; border-radius: 1.3rem; box-shadow: 0 2rem 4rem rgba(0, 0, 0, .5); }

/* ---------------------------------------------------------------- programma */
.show { position: absolute; inset: 0; display: flex; flex-direction: column; }
.show__hero { position: absolute; inset: 0 0 auto 0; height: 32.4rem; }
.show__hero .backdrop { filter: none; opacity: .72; transform: none; inset: 0; }
.show__intro { position: relative; width: 49rem; max-width: 100%; margin: 7.6rem 0 0 var(--page-x); }
.show__title {
  --fit-max: 4.5;
  --fit-min: 2.4;
  --fit-lines: 2;
  margin: 1rem 0 -.24em;
  padding-bottom: .24em;
  font-weight: 700;
  font-size: calc(var(--fit-max) * 1rem);
  line-height: .96;
  letter-spacing: -.02em;
  text-transform: uppercase;
  max-height: calc(var(--fit-lines) * .96em + .24em);
  overflow: hidden;
}
.show__teaser { margin-top: .8rem; max-width: 36rem; font-weight: 300; font-size: 1.3rem; line-height: 1.3; color: var(--ink-100); }
.show__buttons { display: flex; align-items: center; gap: .6rem; margin-top: 1.6rem; }
.show__programs { position: absolute; left: 0; right: 0; bottom: .8rem; }
.show__programs h2 { margin: 0 0 .4rem var(--page-x); font-weight: 700; font-size: 1.3rem; letter-spacing: -.01em; }

/* ---------------------------------------------------------------- rijen met kaarten */
.row {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .6rem 3rem;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.row::-webkit-scrollbar { display: none; }

.card { display: block; flex: none; padding: .6rem; text-align: left; transition: transform .2s; }
.card:hover, .card:focus { transform: scale(1.06); }
.card__frame {
  display: block;
  position: relative;
  border-radius: 1.6rem;
  padding: .4rem;
  background: transparent;
  transition: background-color .2s;
}
.card:hover .card__frame, .card:focus .card__frame { background: var(--glow-brand); }
.card__art { width: 11.8rem; height: 11.8rem; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }
.card:focus .card__art { border: 3px solid var(--brand); }
.card.is-live .card__art { border: 2px solid var(--brand); }
.card__title { display: block; margin-top: .8rem; font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; }
.card__subtitle { display: block; margin-top: .1rem; font-weight: 300; font-size: 1.1rem; color: var(--text-secondary); }
.card__title, .card__subtitle { width: 11.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.card--track .card__art { width: 14.7rem; height: 14.7rem; }
.card--track .card__title, .card--track .card__subtitle { width: 14.7rem; }
.card--track .card__time { display: block; margin-top: .9rem; font-weight: 700; font-size: 1.2rem; color: var(--text-brand); }
.card--track .card__title { margin-top: .2rem; font-size: 1.3rem; }
.card--track .card__subtitle { font-size: 1.1rem; }
.card__badge { display: block; position: absolute; top: 1.2rem; left: 1.2rem; }

/* ---------------------------------------------------------------- schema */
.schedule { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 6.6rem; }
.schedule__head { display: flex; align-items: center; padding: 0 var(--page-x); }
.page-title { margin: 0; font-weight: 700; font-size: 2.4rem; letter-spacing: -.01em; }
.schedule__days { display: flex; gap: .6rem; margin-left: 2.4rem; flex-wrap: wrap; }
.schedule__week { margin-left: auto; font-weight: 500; font-size: 1.2rem; color: var(--text-muted); }

.pill--day { background: var(--surface-raised); border: 1px solid var(--border-subtle); }
.pill--day:hover { color: var(--text-primary); background: var(--surface-card-hover); }
.pill--day:focus { color: var(--text-primary); background: var(--surface-card-hover); border: 2px solid var(--brand); }
.pill--day[aria-selected="true"] { background: var(--brand); color: var(--on-brand); border-color: transparent; }
.pill--day[aria-selected="true"]:focus { border: 2px solid var(--on-brand); }

.schedule__list {
  flex: 1;
  margin-top: 1.6rem;
  padding: 0 var(--page-x) 2.4rem;
  overflow-y: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.schedule__list::-webkit-scrollbar { display: none; }

.program-row {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  margin-bottom: .7rem;
  padding: .8rem 1.2rem;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  text-align: left;
}
.program-row:hover { background: var(--surface-card-hover); }
.program-row:focus { background: var(--surface-card-hover); border: 2px solid var(--brand); }
.program-row.is-live { border: 2px solid var(--brand); background: linear-gradient(90deg, rgba(220, 30, 122, .16), var(--surface-raised)); }
.program-row__time { width: 8.2rem; flex: none; font-weight: 700; font-size: 1.3rem; }
.program-row__art { width: 4.4rem; height: 4.4rem; flex: none; margin-left: .8rem; border-radius: .45rem; }
.program-row__text { display: block; margin-left: 1.3rem; min-width: 0; flex: 1; }
.program-row__title { display: flex; align-items: center; gap: .8rem; font-weight: 700; font-size: 1.4rem; letter-spacing: -.01em; }
.program-row__title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.program-row__badge { display: inline-block; flex: none; background: var(--brand); color: var(--on-brand); border-radius: 999px; padding: .2rem .6rem; font-weight: 700; font-size: 1.1rem; letter-spacing: .14em; }
.program-row__description { display: block; margin-top: .1rem; font-weight: 300; font-size: 1.1rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- eerder gedraaid */
.history { position: absolute; inset: 0; padding-top: 6.9rem; }
.history__subtitle { margin: .4rem 0 0 var(--page-x); font-weight: 300; font-size: 1.2rem; color: var(--text-secondary); }
.history .page-title { margin-left: var(--page-x); }
.history .row { margin-top: 1.4rem; }

/* ---------------------------------------------------------------- statusmeldingen */
.placeholder {
  position: absolute;
  inset: var(--topbar-h) 0 0 0;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- staand / smal scherm */
@media (max-aspect-ratio: 1/1), (max-width: 700px) {
  html { font-size: min(100vw / 40, 1.6vh, 15px); }

  body { overflow: auto; }
  .app { height: auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
  /* De schermen vullen de hoogte, anders eindigt de achtergrond halverwege de pagina. */
  .screen { position: relative; inset: auto; display: flex; flex-direction: column; flex: 1; }
  .screen > * { flex: 1; }

  .topbar { position: sticky; flex-wrap: wrap; height: auto; padding: 1rem var(--page-x); gap: .8rem 0; }
  .nav { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; gap: .6rem; }
  .topbar__spacer { flex: 1; }
  .pill--toggle { margin-right: .8rem; }
  .icon-button { display: none; }

  .np, .dd, .show, .schedule, .history { position: relative; inset: auto; }

  .np__body, .dd__body {
    position: relative;
    inset: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem;
    padding: 2.4rem var(--page-x) 8rem;
  }
  .np__cover-wrap, .dd__cover-wrap { align-self: center; }
  .np__cover, .dd__cover { width: min(28rem, 70vw); height: min(28rem, 70vw); }
  /* Kleinere startmaat op een smal scherm; autoFit leest deze waarden. */
  .np__title { --fit-max: 3.4; --fit-min: 2; }
  .dd__title { --fit-max: 3.6; --fit-min: 2; }
  .show__title { --fit-max: 3.4; --fit-min: 2; }
  .np__spectrum { position: fixed; bottom: 0; background: linear-gradient(180deg, rgba(13, 14, 18, 0), rgba(13, 14, 18, .9) 40%); z-index: 5; }

  .show { display: block; }
  .show__hero { position: relative; height: 24rem; }
  .show__intro { position: relative; width: auto; margin: -16rem var(--page-x) 0; }
  .show__programs { position: relative; bottom: auto; margin-top: 2.4rem; }

  .schedule { padding-top: 2rem; }
  .schedule__head { flex-wrap: wrap; gap: 1rem 0; }
  .schedule__days { margin-left: 0; width: 100%; }
  .schedule__week { margin-left: 0; }
  .schedule__list { overflow: visible; }
  .program-row { flex-wrap: wrap; }
  .program-row__time { width: 100%; font-size: 1.2rem; color: var(--text-brand); }
  .program-row__art { margin-left: 0; margin-top: .6rem; }
  .program-row__text { margin-top: .6rem; }

  .history { padding-top: 2rem; }
  .glow-corner { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}