/* ═══════════════════════════════════════════════════════════════════════════
   Site-look (Kees, 13 okt 2026: "werk de app bij in dezelfde look and feel als de website")

   Dezelfde vormgeving als de luisteraarssite van het station: kop in de kleur van het station
   met het logo in het midden, een witte kaart met het programma, de knoppen Luister live en
   Shoutout, de rijen Nu / Zometeen / Daarna en onderaan de donkere afspeelbalk.

   Alleen actief met VITE_RUUD_LOOK=site (klasse `.look-site` op .app en <html>). De kleuren komen
   per station uit VITE_RUUD_PALETTE (variabelen --s-*); daar staan hieronder alleen terugvallen,
   want dit bestand laadt ná het palet en mag het dus niet overschrijven.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'SitePoppins';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'SitePoppins';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/poppins-700.woff2') format('woff2');
}

.app.look-site {
  --h: var(--s-head, #c8302a);          /* kop en achtergrond achter de kaart */
  --hd: var(--s-head-d, #a1241f);        /* onderkant van het verloop */
  --a: var(--s-accent, #c8302a);         /* knoppen, labels, actieve tab */
  --ad: var(--s-accent-d, #a1241f);
  --bar: var(--s-bar, #0c2447);          /* afspeelbalk */
  --r: 8px;                              /* hoek van de kaart (look-strak: 4px) */
  --rb: 5px;                             /* hoek van de knoppen (look-pil: rond) */
  --logo-bg: var(--s-logo-bg, #ffffff);

  /* De bestaande opmaak gebruikt lime en blauw als accent; die volgen hier het stationskleur. */
  --lime: var(--a);
  --lime-deep: var(--ad);
  --blue: var(--a);
  --blue-bright: var(--a);
  --blue-chrome: var(--h);
  --blue-ink: var(--a);
  --blue-deep: var(--hd);
  --paper: #f4f7fa;
  --ink: #0f1f33;
  --ink-2: #5a6b7d;
  --ink-3: #5a6b7d;

  font-family: 'SitePoppins', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--paper);
}
/* hoeken per station (VITE_RUUD_SITE_HOEK): dezelfde keuze als 'strak' op de website */
.app.look-site.look-strak { --r: 4px; --rb: 5px; }
.app.look-site.look-pil { --rb: 999px; }
html.look-site body { font-family: 'SitePoppins', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; }

/* de sfeerlagen van de gewone app (blauw verloop, vervaagde hoes) horen hier niet */
.look-site .backdrop-blue,
.look-site .ambient,
.look-site .ambient-scrim { display: none; }

/* ── Kop: stationskleur, logo gecentreerd ─────────────────────────────────── */
.look-site .topbar,
.app.look-site.is-live .topbar {
  background: var(--h);
  justify-content: center;
  min-height: calc(var(--safe-top) + 74px);
  padding: calc(var(--safe-top) + 8px) 16px 8px;
  box-shadow: none;
}
.look-site .brand { justify-content: center; }
.look-site .brand > div,
.look-site .topbar-actions { display: none; }
.look-site .brand-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: contain;
  padding: 3px;
  background: var(--logo-bg);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28), 0 4px 14px rgba(0, 0, 0, 0.22);
}
.look-wide .brand-mark {
  width: auto;
  height: 46px;
  max-width: 240px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* ── Schermen ───────────────────────────────────────────────────────────── */
.look-site .screen { background: var(--paper); padding-bottom: 92px; }
.app.look-site.is-live .screen { background: linear-gradient(180deg, var(--h) 0%, var(--hd) 100%); }
.look-site .screen.has-mini { padding-bottom: 92px; }

/* ── De kaart ───────────────────────────────────────────────────────────── */
.site-live { padding: 4px 12px 8px; }
.site-card {
  background: #fff;
  color: #0f1f33;
  border-radius: var(--r);
  padding: 22px 18px 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.site-kop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 15px;
  color: #5a6b7d;
}
.site-kop b { display: inline-flex; align-items: center; gap: 6px; color: #0f1f33; font-weight: 700; }
.site-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--a); animation: pulse 2.2s var(--ease) infinite; }
.site-prog h1 { margin-top: 10px; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: 0; color: #0b0b0b; }
.site-prog p { margin-top: 4px; font-size: 16px; line-height: 1.35; color: #5a6b7d; }

.site-knoppen { display: flex; gap: 10px; margin: 18px 0 20px; }
.site-luister,
.site-shout {
  flex: 1 1 0;
  min-width: 0;
  height: 54px;
  border-radius: var(--rb);
  font-size: 17px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 160ms var(--ease), background 160ms var(--ease);
}
.site-luister { background: var(--a); color: #fff; box-shadow: 0 6px 16px -6px var(--a); }
.site-luister svg { width: 22px; height: 22px; }
.site-luister .spinner { width: 20px; height: 20px; }
.site-shout { background: #fff; color: var(--a); box-shadow: inset 0 0 0 2px var(--a); }
.site-luister:active,
.site-shout:active { transform: scale(0.97); }

.site-rijen { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid #dcdcdc; display: grid; gap: 16px; }
.site-rij { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; }
.site-hoes {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  overflow: hidden;
  background: #e9eef3;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}
.site-hoes img { width: 100%; height: 100%; object-fit: cover; }
.site-tekst { display: flex; flex-direction: column; min-width: 0; }
.site-label { font-size: 13px; line-height: 1.3; font-weight: 700; color: var(--a); }
.site-tekst strong {
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
  color: #0b0b0b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.site-artiest { font-size: 15px; line-height: 1.3; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.site-alle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #0b0b0b;
  text-align: right;
}
.site-pijl {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 34px;
  border-radius: var(--rb);
  background: var(--a);
  color: #fff;
}

/* ── Afspeelbalk (zoals op de website) ──────────────────────────────────── */
.look-site .mini {
  left: 0;
  right: 0;
  bottom: var(--tabbar-total);
  height: 72px;
  padding: 0 12px 0 0;
  gap: 12px;
  border-radius: 0;
  background: var(--bar);
  box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.28);
  color: #fff;
}
.look-site .mini-art { width: 72px; height: 72px; border-radius: 0; background: rgba(255, 255, 255, 0.08); }
.look-site .mini-text { text-align: center; }
.look-site .mini-title { font-size: 16px; font-weight: 700; color: #fff; }
.look-site .mini-artist { font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, 0.82); }
.look-site .mini-progress { top: 0; bottom: auto; height: 3px; background: #fff; opacity: 0.9; }
.look-site .mini-btn {
  width: 54px;
  height: 54px;
  background: #fff;
  color: #111;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.look-site .mini-btn svg { width: 24px; height: 24px; }
.look-site .mini-route {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
}
.look-site .mini-route svg { width: 26px; height: 26px; }
.look-site .mini-route.is-live { color: #ffbf47; }

/* ── Tabbalk ────────────────────────────────────────────────────────────── */
.look-site .tabbar { background: #fff; box-shadow: 0 -1px 0 #dcdcdc; }
.look-site .tab { color: #5a6b7d; font-weight: 700; }
.look-site .tab.is-active { color: var(--a); }

/* ── Lijsten en verzoekformulier: dezelfde kleuren en hoeken ────────────── */
.look-site .screen-title { color: #0b0b0b; letter-spacing: 0; }
.look-site .screen-sub { color: #5a6b7d; }
.look-site .list { border-radius: var(--r); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); }
.look-site .row-art { border-radius: 4px; }
.look-site .row-time { color: var(--a); }
.look-site .form-card,
.look-site .sent-track { border-radius: var(--r); }
.look-site .submit,
.look-site .sent button { background: var(--a); color: #fff; border-radius: var(--rb); box-shadow: 0 6px 16px -6px var(--a); }
.look-site .field textarea,
.look-site .field input { border-radius: var(--rb); }
.look-site :focus-visible { outline-color: var(--a); }

/* ── Afspeelbalk als gesatineerd glas (zoals nporadio2.nl; Kees, 13 okt 2026) ───────────────────────────────────────
   De stationskleur op ~72% met een sterke vervaging: de lijst schemert er zacht doorheen. Zonder color-mix blijft de effen balk. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .look-site .mini {
    background: color-mix(in srgb, var(--bar) 72%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    backdrop-filter: blur(22px) saturate(1.5);
  }
}