/* PodFlowNow 3: eigen CSS, geen frameworks. */

/* ---------- Tokens ---------- */
:root {
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-2: #EEF1F5;
  --border: #DDE2E9;
  --text: #141821;
  --muted: #5A6372;
  --accent: #E4572E;
  --accent-ink: #FFFFFF;
  --accent-soft: #FDEBE4;
  --ok: #1F8A5B;
  --warn: #B7791F;
  --err: #C2362F;
  --focus: #2F6FEB;

  --accent-tekst: #B83C17;
  --ok-soft: #E3F3EA;
  --warn-soft: #FBF0DC;
  --err-soft: #FBE6E4;
  --warn-tekst: #8A5A12;
  --schaduw: 0 1px 2px rgba(20, 24, 33, .06), 0 8px 24px rgba(20, 24, 33, .10);
  --schaduw-zwaar: 0 12px 40px rgba(20, 24, 33, .22);
  --scrim: rgba(14, 17, 22, .45);
  --skelet: #E6EAF0;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: 12px;
  --r-s: 8px;
  --zij-b: 300px;
  --detail-b: clamp(380px, 34vw, 520px);
  --tik: 44px;
  --veilig-t: env(safe-area-inset-top, 0px);
  --veilig-b: env(safe-area-inset-bottom, 0px);
  --veilig-l: env(safe-area-inset-left, 0px);
  --veilig-r: env(safe-area-inset-right, 0px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="licht"]) {
    --bg: #0E1116;
    --surface: #161A21;
    --surface-2: #1E232C;
    --border: #2A303B;
    --text: #E8EBF0;
    --muted: #9AA3B2;
    --accent: #FF7A50;
    --accent-ink: #1A0E09;
    --accent-soft: #3A2018;
    --ok: #3CCB8A;
    --warn: #E0A84A;
    --err: #FF6B62;
    --focus: #6EA0FF;
    --accent-tekst: #FF9672;
    --ok-soft: #12291F;
    --warn-soft: #2E2413;
    --err-soft: #331917;
    --warn-tekst: #E0A84A;
    --schaduw: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
    --schaduw-zwaar: 0 12px 40px rgba(0, 0, 0, .6);
    --scrim: rgba(0, 0, 0, .6);
    --skelet: #222833;
    color-scheme: dark;
  }
}
:root[data-theme="donker"] {
  --bg: #0E1116;
  --surface: #161A21;
  --surface-2: #1E232C;
  --border: #2A303B;
  --text: #E8EBF0;
  --muted: #9AA3B2;
  --accent: #FF7A50;
  --accent-ink: #1A0E09;
  --accent-soft: #3A2018;
  --ok: #3CCB8A;
  --warn: #E0A84A;
  --err: #FF6B62;
  --focus: #6EA0FF;
  --accent-tekst: #FF9672;
  --ok-soft: #12291F;
  --warn-soft: #2E2413;
  --err-soft: #331917;
  --warn-tekst: #E0A84A;
  --schaduw: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
  --schaduw-zwaar: 0 12px 40px rgba(0, 0, 0, .6);
  --scrim: rgba(0, 0, 0, .6);
  --skelet: #222833;
  color-scheme: dark;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; background: var(--bg); }
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4, p, li, dd, dt, a, span, label, summary { overflow-wrap: anywhere; }
a { color: var(--accent-tekst); text-decoration-thickness: 1px; text-underline-offset: 2px; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
code, kbd { font-family: var(--mono); font-size: .9em; }
kbd {
  display: inline-block; padding: 1px 6px; border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 6px; background: var(--surface); color: var(--muted); line-height: 1.4;
}
mark { background: var(--accent-soft); color: var(--text); border-radius: 3px; padding: 0 2px; box-shadow: inset 0 -2px 0 var(--accent); }
mark.huidig { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }
::selection { background: var(--accent-soft); }

.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sla-over {
  position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 14px;
  background: var(--surface); border: 2px solid var(--focus); border-radius: 8px; color: var(--text);
}
.sla-over:focus { top: calc(8px + var(--veilig-t)); }
.klein { font-size: 13px; }
.stil { color: var(--muted); }
.breek { overflow-wrap: anywhere; word-break: break-word; }
.tabel-cijfer, .teller-getal, .cijfer-getal, .vg-tijd, .seg-tijd, .meer-tel, .lijst-tel, .chip-tel, .bulk-tel, .groq-getal { font-variant-numeric: tabular-nums; }

.ic { width: 20px; height: 20px; flex: none; display: block; }

/* ---------- Schil ---------- */
.app {
  display: grid;
  height: 100vh;
  height: 100dvh;
  grid-template-columns: var(--zij-b) minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "top top top"
    "zij hoofd detail"
    "speler speler speler"
    "tabs tabs tabs";
}
body.zij-dicht .app { grid-template-columns: 0 minmax(0, 1fr) auto; }
body.zij-dicht .zijkolom { display: none; }

.bovenbalk {
  grid-area: top;
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + var(--veilig-t)) calc(16px + var(--veilig-r)) 10px calc(16px + var(--veilig-l));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  min-width: 0;
  z-index: 5;
}
.logo {
  font-family: var(--serif); font-weight: 700; font-size: 24px; letter-spacing: -.01em;
  color: var(--text); text-decoration: none; white-space: nowrap; line-height: 1.2;
  overflow-wrap: normal;
}
.logo-punt { color: var(--accent); }
.topzoek {
  position: relative; flex: 1 1 auto; max-width: 560px; margin: 0 auto; min-width: 0;
}
.topzoek input {
  width: 100%; min-height: 40px; padding: 8px 40px 8px 40px; font-size: 16px;
  background: var(--surface-2); border: 1px solid transparent; border-radius: 999px; color: var(--text);
}
.topzoek input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; background: var(--surface); border-color: var(--border); }
.topzoek input::placeholder { color: var(--muted); }
.topzoek-icoon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.topzoek-icoon .ic { width: 18px; height: 18px; }
.topzoek-kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.topzoek input:focus + .topzoek-kbd, .topzoek input:not(:placeholder-shown) ~ .topzoek-kbd { display: none; }
.topacties { display: flex; align-items: center; gap: 6px; flex: none; }
.bovenbalk .zoek-knop-smal { display: none; margin-left: auto; }

.zijkolom {
  grid-area: zij;
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding-left: var(--veilig-l);
}
.kolom-top { display: grid; gap: 10px; padding: 16px 16px 8px; }
.kolom-lijst { overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 24px; flex: 1 1 auto; }
.kolom-kop {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); padding: 16px 10px 6px;
}
.kolom-leeg { padding: 16px 10px; color: var(--muted); display: grid; gap: 10px; }
.show-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.show-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px;
  color: var(--text); text-decoration: none; min-height: var(--tik); position: relative;
}
.show-item:hover { background: var(--surface-2); }
.show-item.actief { background: var(--accent-soft); }
.show-item.actief::before {
  content: ""; position: absolute; left: -8px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--accent);
}
.show-item-tekst { display: grid; min-width: 0; flex: 1; }
.show-item-titel { font-weight: 600; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.show-item-meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.show-item-fout {
  flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--err); color: #fff;
  font-size: 12px; font-weight: 700; display: grid; place-items: center;
}

.hoofd {
  grid-area: hoofd;
  overflow-y: auto; overflow-x: hidden; min-width: 0; min-height: 0;
  overscroll-behavior: contain;
  scroll-padding-top: 16px;
  position: relative;
}
.detail {
  grid-area: detail;
  width: var(--detail-b);
  min-height: 0; min-width: 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  background: var(--surface);
  border-left: 1px solid var(--border);
}

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s, transform .1s;
}
.knop:hover { background: var(--surface-2); }
.knop:active { transform: translateY(1px); }
.knop:disabled, .knop[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.knop .ic { width: 18px; height: 18px; }
.knop-tekst { overflow: hidden; text-overflow: ellipsis; }
.knop-primair { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.knop-primair:hover { background: var(--accent); filter: brightness(1.06); }
.knop-licht { background: var(--surface); }
.knop-licht.aan, .knop.aan { border-color: var(--accent); color: var(--accent-tekst); background: var(--accent-soft); }
.knop-gevaar { background: var(--err); border-color: var(--err); color: #fff; }
.knop-gevaar-tekst { color: var(--err); }
.knop-gevaar-tekst:hover { background: var(--err-soft); }
.knop-klein { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.knop-groot { min-height: 52px; padding: 12px 22px; font-size: 16px; border-radius: 14px; }
.knop-vol { width: 100%; }
.knop.is-bezig { position: relative; }
.knop.is-bezig .ic { animation: draai 1s linear infinite; }
.icoonknop {
  display: inline-grid; place-items: center; flex: none;
  width: var(--tik); height: var(--tik); min-height: 0; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--text); cursor: pointer;
  text-decoration: none;
}
.icoonknop:hover { background: var(--surface-2); }
.icoonknop:disabled { opacity: .45; cursor: not-allowed; }
.knop.icoonknop { border: 1px solid var(--border); }
.icoonknop.knop-klein { width: 36px; height: 36px; }
.linkknop {
  justify-self: start;
  background: none; border: 0; padding: 4px 0; color: var(--accent-tekst); cursor: pointer;
  font-weight: 600; text-decoration: underline; text-underline-offset: 2px; min-height: 32px;
}
.knoppenrij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.teller {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700;
  display: inline-grid; place-items: center; line-height: 1; font-variant-numeric: tabular-nums;
}
#top-wachtrij { border-color: transparent; }
#top-wachtrij:hover { border-color: var(--border); }

/* ---------- Velden ---------- */
.veld {
  width: 100%; min-height: var(--tik); padding: 10px 12px;
  font-size: 16px; line-height: 1.3;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  -webkit-appearance: none; appearance: none;
}
.veld::placeholder { color: var(--muted); opacity: 1; }
.veld:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.veld-klein { min-height: 40px; padding: 8px 12px; }
.veld-groot { min-height: 52px; font-size: 18px; padding: 12px 14px 12px 46px; border-radius: 14px; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.veld-rij { display: grid; gap: 6px; }
.veld-rij label { font-weight: 600; font-size: 14px; }
.veld-label-rij { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.veld-fout { color: var(--err); font-weight: 600; font-size: 14px; min-height: 1px; }
.veld-fout:empty { display: none; }
.formulier { display: grid; gap: 14px; max-width: 460px; }
.toon-ww { min-height: 32px; font-size: 13px; }

/* ---------- Kaarten, badges, chips ---------- */
.kaart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.badge {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.35;
  background: var(--surface-2); color: var(--muted);
  overflow-wrap: anywhere;
}
.badge .ic { width: 14px; height: 14px; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-fout { background: var(--err-soft); color: var(--err); }
.badge-waarschuwing { background: var(--warn-soft); color: var(--warn-tekst); }
.badge-accent { background: var(--accent-soft); color: var(--accent-tekst); }
.badge-bezig { background: var(--accent-soft); color: var(--accent-tekst); }
.badge-bezig::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none;
  animation: puls 1.2s ease-in-out infinite;
}
.badge-stil { background: transparent; color: var(--muted); padding-left: 0; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.chip:hover { background: var(--surface-2); }
.chip.aan { background: var(--text); border-color: var(--text); color: var(--bg); }
.chip-tel { font-size: 12px; opacity: .75; }

.melding {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px;
  font-size: 14px; background: var(--surface-2);
}
.melding .ic { margin-top: 1px; }
.melding p + ol, .melding p + p { margin-top: 6px; }
.melding-fout { background: var(--err-soft); color: var(--err); }
.melding-ok { background: var(--ok-soft); color: var(--ok); }
.melding-info { background: var(--surface-2); color: var(--text); }
.melding-info .ic { color: var(--focus); }

/* ---------- Pagina ---------- */
.pagina { padding: 28px 32px 48px; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; }
.pagina-smal { max-width: 760px; }
.pagina-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.pagina-kop > div:first-child { min-width: 0; }
.pagina-titel { font-family: var(--serif); font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
.pagina-sub { color: var(--muted); margin-top: 4px; }
.blok-kop { font-size: 18px; font-weight: 700; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.blok-sub, .lijst-tel { font-size: 13px; font-weight: 500; color: var(--muted); }

/* ---------- Overzicht ---------- */
.overzicht { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; min-width: 0; }
.ov-tellers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.teller-getal, .teller-label, .cijfer-getal, .cijfer-label { overflow-wrap: normal; word-break: normal; white-space: nowrap; }
.teller-kaart { min-width: 0; overflow: hidden; }
.teller-label { overflow: hidden; text-overflow: ellipsis; }
.teller-kaart {
  padding: 16px; display: grid; gap: 2px; text-decoration: none; color: var(--text);
  grid-template-columns: 1fr auto; align-items: center;
}
a.teller-kaart:hover { border-color: var(--accent); }
.teller-icoon { grid-column: 2; grid-row: 1 / span 2; color: var(--accent); background: var(--accent-soft); border-radius: 10px; padding: 8px; }
.teller-getal { font-size: 28px; font-weight: 700; line-height: 1.1; grid-column: 1; grid-row: 1; }
.teller-label { color: var(--muted); font-size: 13px; grid-column: 1; grid-row: 2; }
.ov-blok { display: grid; gap: 12px; align-content: start; min-width: 0; }
.ov-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.ov-zij { display: grid; gap: 16px; }
.ov-zij .kaart { padding: 18px; }
.ov-wacht-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; }
.cijfer-label { white-space: normal; overflow-wrap: normal; }
.cijfer-waarschuwing .cijfer-getal { color: var(--warn-tekst); }
.taak-wacht { color: var(--warn-tekst); }
.cijfer { display: grid; text-align: center; padding: 10px 4px; background: var(--surface-2); border-radius: 10px; }
.cijfer-getal { font-size: 22px; font-weight: 700; }
.cijfer-label { font-size: 12px; color: var(--muted); }
.cijfer-bezig .cijfer-getal { color: var(--accent-tekst); }
.cijfer-fout .cijfer-getal { color: var(--err); }
.groq-getal strong { font-size: 22px; }
.welkom { padding: 32px; display: grid; gap: 14px; justify-items: start; max-width: 640px; }
.welkom h2 { font-family: var(--serif); font-size: 26px; }

.verder-lijst {
  list-style: none; margin: 0; padding: 0 0 6px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 320px); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
.verder-kaart { position: relative; padding: 12px; display: grid; gap: 10px; scroll-snap-align: start; min-width: 0; }
.verder-link { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--text); padding-right: 48px; min-width: 0; }
.verder-tekst { display: grid; min-width: 0; }
.verder-show { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verder-titel { font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.verder-rest { font-size: 12px; color: var(--muted); }
.verder-speel {
  position: absolute; right: 10px; top: 18px; background: var(--accent); color: var(--accent-ink); border-radius: 50%;
}
.verder-speel:hover { background: var(--accent); filter: brightness(1.06); }

/* ---------- Artwork ---------- */
.art {
  position: relative; flex: none; display: inline-grid; place-items: center; overflow: hidden;
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent-tekst);
  font-family: var(--serif); font-weight: 700;
}
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-letter { font-size: 18px; }
.art-geladen .art-letter { visibility: hidden; }
.art-s { width: 40px; height: 40px; }
.art-m { width: 48px; height: 48px; border-radius: 10px; }
.art-l { width: 56px; height: 56px; border-radius: 10px; }
.art-xl { width: 160px; height: 160px; border-radius: 16px; box-shadow: var(--schaduw); }
.art-xl .art-letter { font-size: 64px; }
.art-detail { width: 112px; height: 112px; border-radius: 14px; box-shadow: var(--schaduw); }
.art-detail .art-letter { font-size: 44px; }

/* ---------- Show ---------- */
.pagina-show { gap: 26px; }
.show-kop { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.show-kop-tekst { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.show-titel { font-size: 36px; }
.show-auteur { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.show-meta { color: var(--muted); font-size: 14px; }
.show-beschr { color: var(--text); max-width: 72ch; white-space: pre-line; }
.show-beschr.ingeklapt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.show-knoppen { margin-top: 6px; }
.afleveringen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.lijst-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lijst-kop-acties { display: flex; gap: 8px; align-items: center; flex: 1 1 280px; justify-content: flex-end; min-width: 0; }
.lijst-kop-acties .veld { max-width: 280px; flex: 1 1 auto; min-width: 0; }
.meer-plek { display: grid; justify-items: center; gap: 8px; padding: 8px 0 16px; }
.meer-tel { color: var(--muted); font-size: 13px; }

.ep-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--border); min-width: 0; }
.ep-rij {
  position: relative; display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 4px 18px 4px; border-bottom: 1px solid var(--border); min-width: 0;
}
.ep-rij.detail-gekozen { background: var(--accent-soft); border-radius: 10px; }
.ep-hoofd { display: grid; gap: 6px; min-width: 0; flex: 1; }
.ep-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ep-show { color: var(--accent-tekst); font-weight: 600; text-decoration: none; }
.ep-show:hover { text-decoration: underline; }
.ep-ster-teken { color: var(--warn); display: inline-flex; }
.ep-ster-teken .ic { width: 16px; height: 16px; }
.ep-titel { font-family: var(--serif); font-size: 19px; line-height: 1.3; font-weight: 700; }
.ep-titel a { color: var(--text); text-decoration: none; }
.ep-titel a:hover { color: var(--accent-tekst); text-decoration: underline; }
.ep-gespeeld .ep-titel a { color: var(--muted); }
.ep-beschr {
  color: var(--muted); font-size: 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ep-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; align-items: center; }
.knop-speel.is-huidig { border-color: var(--accent); color: var(--accent-tekst); }
.ster-knop { color: var(--muted); border: 1px solid var(--border); }
.ster-knop.aan { color: var(--warn); }
.ep-lijn {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(to right, var(--accent) var(--pct, 0%), transparent var(--pct, 0%));
}
.ep-compact { padding: 12px 4px; }
.ep-compact .ep-titel { font-size: 16px; }
.ep-art-link { flex: none; }
.ep-vink-vak { display: grid; place-items: center; width: var(--tik); height: var(--tik); flex: none; margin: -6px 0 0 -6px; cursor: pointer; }
.ep-vink { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
.ep-gekozen { background: var(--accent-soft); border-radius: 10px; }
.ep-selecteerbaar { cursor: default; }

.bulkbalk {
  position: sticky; bottom: 12px; z-index: 6;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: -8px; padding: 10px 12px;
  background: var(--text); color: var(--bg); border-radius: 14px; box-shadow: var(--schaduw-zwaar);
}
.bulk-links, .bulk-acties { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bulk-tel { font-weight: 700; padding: 0 6px; }
.bulkbalk .knop { background: transparent; color: var(--bg); border-color: rgba(255, 255, 255, .3); }
:root[data-theme="donker"] .bulkbalk .knop { border-color: rgba(0, 0, 0, .3); }
.bulkbalk .knop:hover { background: rgba(127, 127, 127, .2); }

/* ---------- Detail ---------- */
.detail-binnen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 0 22px 40px; min-width: 0; }
.detail-balk {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  margin: 0 -22px; padding: 8px 12px;
  background: var(--surface); border-bottom: 1px solid transparent;
}
.detail-balk.met-titel { border-bottom-color: var(--border); }
.detail-balk-titel {
  flex: 1; min-width: 0; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity .15s;
}
.detail-balk.met-titel .detail-balk-titel { opacity: 1; }
.detail-terug { display: none; border-color: transparent; padding-left: 6px; }
.detail-kop { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.detail-kop-tekst { display: grid; gap: 6px; min-width: 0; }
.detail-show { font-size: 13px; font-weight: 700; color: var(--accent-tekst); text-decoration: none; letter-spacing: .02em; }
.detail-show:hover { text-decoration: underline; }
.detail-titel { font-family: var(--serif); font-size: 24px; line-height: 1.25; font-weight: 700; }
.detail-meta { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.detail-speel { min-width: 0; }
.detail-speelknop { width: 100%; }
.detail-acties { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-acties .knop { min-height: 40px; font-size: 13px; padding: 7px 12px; }

.bediening { display: grid; gap: 10px; padding: 14px; background: var(--surface-2); border-radius: 14px; }
.bediening-knoppen { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 10px; }
.bediening-rechts { justify-self: end; }
.speel-knop { border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.speel-knop:hover { background: var(--accent); filter: brightness(1.06); }
.speel-knop .ic { width: 22px; height: 22px; }
.speel-groot { width: 60px; height: 60px; }
.speel-groot .ic { width: 28px; height: 28px; }
.spring-knop .ic { width: 26px; height: 26px; }
.speler-laadt .speel-knop .ic { animation: puls 1s ease-in-out infinite; }

.voortgang { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.vg-tijd { font-size: 12px; color: var(--muted); min-width: 40px; }
.vg-totaal { text-align: right; }
.vg-range {
  --pct: 0%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0;
  background: transparent; cursor: pointer;
}
.vg-range:disabled { cursor: default; opacity: .5; }
.vg-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--accent) var(--pct), var(--border) var(--pct));
}
.vg-range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--border); }
.vg-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
.vg-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.vg-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.vg-range:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 999px; }
.snelheid {
  min-height: 36px; padding: 4px 26px 4px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 16px; font-weight: 600; cursor: pointer;
  font-variant-numeric: tabular-nums;
}

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab-knop {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tik); padding: 8px 14px; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-weight: 600; font-size: 15px; white-space: nowrap;
}
.tab-knop:hover { color: var(--text); }
.tab-knop[aria-selected="true"] { color: var(--text); }
.tab-knop[aria-selected="true"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent);
}
.tab-stip { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.tabs-vol .tab-knop { flex: 1; justify-content: center; }
.tab-paneel { min-width: 0; }
.tab-paneel:focus-visible { outline-offset: 4px; }

/* Transcript */
.tr-balk {
  position: sticky; top: 61px; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px;
  padding: 10px 0; background: var(--surface);
}
.tr-zoek { display: flex; align-items: center; gap: 4px; flex: 1 1 240px; min-width: 0; }
.tr-zoek .veld { flex: 1; min-width: 0; }
.tr-tel { font-size: 12px; color: var(--muted); white-space: nowrap; padding: 0 4px; }
.schakel { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; min-height: var(--tik); }
.schakel input { width: 18px; height: 18px; accent-color: var(--accent); }
.tr-lijst { display: grid; gap: 2px; }
.seg {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: start;
  padding: 6px 8px 6px 0; border-radius: 8px; line-height: 1.6; scroll-margin: 140px 0 120px;
  transition: background-color .2s;
}
.seg-zonder-tijd { grid-template-columns: minmax(0, 1fr); padding-left: 8px; }
.seg-tijd {
  justify-self: start; border: 0; background: none; cursor: pointer; padding: 2px 6px; margin-top: 1px;
  font-size: 12px; color: var(--muted); border-radius: 6px; min-height: 28px; font-family: var(--mono);
}
.seg-tijd:hover { color: var(--accent-tekst); background: var(--accent-soft); }
.seg-spreker { display: block; font-size: 12px; font-weight: 700; color: var(--accent-tekst); text-transform: uppercase; letter-spacing: .05em; }
.seg.nu { background: var(--accent-soft); }
.seg.nu .seg-tijd { color: var(--accent-tekst); font-weight: 700; }
.tr-voet { display: grid; gap: 10px; padding-top: 18px; margin-top: 12px; border-top: 1px solid var(--border); }
.tr-export { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* EN/NL: wisselen tussen het origineel en de Nederlandse vertaling (D-013) */
.taal-wissel { display: inline-flex; padding: 3px; gap: 3px; background: var(--surface-2); border-radius: 11px; flex: none; }
.taal-knop {
  min-width: 48px; min-height: 38px; padding: 4px 12px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--muted);
}
.taal-knop[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.taal-knop:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.seg-onvertaald .seg-tekst { color: var(--muted); font-style: italic; }
.samenvatting-voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--border); }
/* de speler onderin valt op zodra er iets speelt */
body.speelt .speler { border-top-color: var(--accent); box-shadow: 0 -6px 18px rgba(0, 0, 0, .06); }
.tr-export-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-right: 4px; }

.samenvatting { display: grid; gap: 12px; padding-top: 14px; }
.samenvatting h3 { font-size: 16px; margin-top: 8px; }
.ideeen { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.onderwerpen { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.onderwerp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: start; min-width: 0; }
.onderwerp-tekst { display: grid; gap: 2px; min-width: 0; grid-column: 2; }
.onderwerp > .onderwerp-tekst:only-child { grid-column: 1 / -1; }
.onderwerp-titel { font-weight: 600; }
.onderwerp-blurb { color: var(--muted); font-size: 14px; }
.samenvatting { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.info { display: grid; gap: 18px; padding-top: 14px; }
.info-beschr { white-space: pre-line; }
.info-lijst { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14px; }
.info-lijst dt { color: var(--muted); }
.info-lijst dd { margin: 0; min-width: 0; }

/* ---------- Speler onderin ---------- */
.speler {
  grid-area: speler; z-index: 8;
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 0 calc(12px + var(--veilig-r)) 0 calc(12px + var(--veilig-l));
}
.speler-binnen {
  position: relative;
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(0, 300px) auto minmax(0, 1fr) auto;
  min-height: 72px; padding: 8px 0;
}
.speler-info { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: var(--text); border-radius: 10px; padding: 4px; }
.speler-info:hover { background: var(--surface-2); }
.speler-art-plek { display: contents; }
.speler-art { width: 48px; height: 48px; border-radius: 8px; }
.speler-tekst { display: grid; min-width: 0; }
.speler-titel { font-weight: 600; font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.speler-show { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.speler-knoppen { display: flex; align-items: center; gap: 4px; }
.speler-extra { display: flex; align-items: center; gap: 4px; }
.speler-lijn { display: none; }
.speler-vg { min-width: 0; }

/* ---------- Tabbalk (smal) ---------- */
.tabbalk {
  grid-area: tabs; display: none;
  grid-template-columns: repeat(5, 1fr);
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 0 var(--veilig-r) var(--veilig-b) var(--veilig-l);
  z-index: 9;
}
.tab {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 2px;
  min-height: 56px; padding: 6px 2px; border: 0; background: none; cursor: pointer;
  color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600;
}
.tab .ic { width: 22px; height: 22px; }
.tab.actief { color: var(--accent-tekst); }
.tab .teller { position: absolute; top: 4px; left: calc(50% + 6px); height: 18px; min-width: 18px; font-size: 11px; }

/* ---------- Zoeken ---------- */
.zoek-form { position: relative; }
.zoek-form-icoon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.zoek-uitslag { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; min-width: 0; }
.zoek-groep { display: grid; gap: 8px; min-width: 0; }
.zoek-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.zoek-item {
  display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px;
  color: var(--text); text-decoration: none; min-width: 0;
}
.zoek-item:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.zoek-tekst { display: grid; gap: 2px; min-width: 0; flex: 1; }
.zoek-show { font-size: 12px; color: var(--muted); font-weight: 600; }
.zoek-titel { font-weight: 600; line-height: 1.35; }
.zoek-fragment { font-size: 14px; color: var(--muted); line-height: 1.5; }
.zoek-pijl { color: var(--muted); }

/* ---------- Wachtrij ---------- */
.taak-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.taak { display: grid; gap: 8px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); min-width: 0; }
.taak-mislukt { border-color: color-mix(in srgb, var(--err) 40%, var(--border)); }
.taak-kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.taak-soort { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.taak-soort .ic { width: 16px; height: 16px; }
.taak-titel { font-weight: 600; color: var(--text); text-decoration: none; line-height: 1.35; }
a.taak-titel:hover { color: var(--accent-tekst); text-decoration: underline; }
.taak-fout { display: flex; gap: 8px; align-items: flex-start; color: var(--err); font-size: 14px; }
.taak-fout .ic { width: 16px; height: 16px; margin-top: 2px; }
.taak-voet { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.taak-acties { display: flex; gap: 6px; }
/* 3.8.6: meer taken voor dezelfde aflevering in een tegel, als stappen onder de titel */
.taak-stappen { list-style: none; margin: 0; padding: 0; display: grid; }
.taak-stap { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--border); min-width: 0; }
.taak-stap:last-child { padding-bottom: 0; }
.taak-stap.taak-mislukt .taak-soort { color: var(--err); }

.balk { --pct: 0%; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.balk-vul { height: 100%; width: var(--pct); background: var(--accent); border-radius: 999px; transition: width .3s; }
.verder-kaart .balk { height: 4px; }

/* ---------- Instellingen ---------- */
.instel-sectie { padding: 20px; display: grid; gap: 14px; min-width: 0; }
.instel-rij { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.instel-uitloggen { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.segment { display: inline-flex; padding: 4px; gap: 4px; background: var(--surface-2); border-radius: 12px; max-width: 100%; flex-wrap: wrap; }
.segment-optie { position: relative; }
.segment-optie input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segment-optie label {
  display: inline-grid; place-items: center; min-height: 40px; padding: 6px 18px; border-radius: 9px;
  font-weight: 600; font-size: 14px; cursor: pointer; color: var(--muted);
}
.segment-optie input:checked + label { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.segment-optie input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
.opml-uitkomst { display: grid; gap: 8px; }
.opml-fouten summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.opml-fouten ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); }

/* ---------- Staten ---------- */
.staat { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 40px 16px; color: var(--muted); }
.staat-icoon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); margin-bottom: 4px; }
.staat-icoon .ic { width: 24px; height: 24px; }
.staat-titel { font-weight: 700; color: var(--text); font-size: 16px; }
.staat-tekst { max-width: 46ch; }
.staat .knop { margin-top: 8px; }
.staat-fout .staat-icoon { background: var(--err-soft); color: var(--err); }
.draaier {
  width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent);
  animation: draai .9s linear infinite; display: inline-block;
}
.draaier-klein { width: 14px; height: 14px; border-width: 2px; vertical-align: -2px; }
.skelet-lijst { display: grid; gap: 14px; padding: 6px 0; }
.skelet { background: var(--skelet); border-radius: 8px; animation: glans 1.4s ease-in-out infinite; }
.skelet-rij { display: flex; gap: 12px; align-items: center; }
.skelet-art { width: 44px; height: 44px; flex: none; border-radius: 10px; }
.skelet-tekst { display: grid; gap: 8px; flex: 1; }
.skelet-r1 { height: 14px; width: 70%; }
.skelet-r2 { height: 12px; width: 45%; }
.skelet-kaart { height: 120px; }
.skelet-teller { height: 84px; border-radius: var(--r); }
.skelet-showkop { height: 160px; border-radius: 16px; }
.skelet-detailkop { height: 112px; border-radius: 14px; grid-column: 1 / -1; }

/* ---------- Toasts ---------- */
.toasts {
  position: fixed; z-index: 200; left: 50%; transform: translateX(-50%);
  bottom: calc(24px + var(--veilig-b)); width: min(480px, calc(100vw - 24px));
  display: grid; gap: 8px; pointer-events: none;
}
body.speler-zichtbaar .toasts { bottom: calc(96px + var(--veilig-b)); }
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 6px 10px 14px; border-radius: 12px; box-shadow: var(--schaduw-zwaar);
  background: var(--text); color: var(--bg); font-size: 14px; font-weight: 500;
  animation: toast-in .2s ease-out;
}
.toast > .ic { margin-top: 1px; width: 18px; height: 18px; }
.toast-ok > .ic { color: var(--ok); }
.toast-fout { background: var(--err); color: #fff; }
.toast-tekst { flex: 1; min-width: 0; padding-top: 1px; }
.toast-sluit { border: 0; background: none; color: inherit; opacity: .8; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; margin: -6px 0; }
.toast-sluit .ic { width: 16px; height: 16px; }
.toast-weg { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }

/* ---------- Vensters ---------- */
.venster {
  width: min(520px, calc(100vw - 24px)); max-height: min(86dvh, 760px);
  padding: 0; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); color: var(--text); box-shadow: var(--schaduw-zwaar);
  overflow: hidden; flex-direction: column;
}
.venster[open] { display: flex; }
.venster::backdrop { background: var(--scrim); }
.venster-breed { width: min(680px, calc(100vw - 24px)); }
.venster-klein { width: min(420px, calc(100vw - 24px)); }
.venster-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 10px 20px; border-bottom: 1px solid var(--border); }
.venster-titel { font-size: 18px; font-weight: 700; }
.venster-lijf { padding: 16px 20px 20px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.venster-voet { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px calc(14px + var(--veilig-b)); border-top: 1px solid var(--border); flex-wrap: wrap; }
.venster-tekst { color: var(--text); }
.venster-toevoegen .venster-lijf { min-height: 360px; }
.toevoeg-paneel { padding-top: 16px; display: grid; gap: 12px; }
.toevoeg-form { display: flex; gap: 8px; }
.toevoeg-uitslag { min-height: 120px; }
.toevoeg-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.toevoeg-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; min-width: 0; }
.toevoeg-item:hover { background: var(--surface-2); }
.toevoeg-tekst { display: grid; min-width: 0; flex: 1; }
.toevoeg-titel { font-weight: 600; line-height: 1.3; }
.toevoeg-auteur { font-size: 13px; color: var(--muted); }

.meer-lijst { display: grid; gap: 4px; }
.meer-item {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 12px;
  border: 0; border-radius: 12px; background: none; cursor: pointer; text-align: left; color: var(--text);
}
.meer-item:hover { background: var(--surface-2); }
.meer-item > .ic { color: var(--accent-tekst); }
.meer-tekst { display: grid; flex: 1; min-width: 0; font-weight: 600; }
.meer-sub { font-size: 13px; font-weight: 400; color: var(--muted); }
.meer-pijl { color: var(--muted); }

/* Hulp */
.hulp { display: grid; gap: 22px; }
.hulp-sectie { display: grid; gap: 10px; }
.hulp-sectie h3 { font-size: 16px; }
.hulp-sectie h4 { font-size: 14px; margin-bottom: 4px; }
.hulp-lijst, .hulp-stappen { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.hulp-eigen { padding: 14px 16px; background: var(--accent-soft); border-radius: 12px; }
.hulp-anderen { display: grid; gap: 14px; }
.hulp-ok { color: var(--ok); font-weight: 600; }
.hulp-toetsen { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; margin: 0; align-items: center; }
.hulp-toetsen dd { margin: 0; }
.hulp-details { border-top: 1px solid var(--border); padding: 4px 0; }
.hulp-details summary { cursor: pointer; font-weight: 600; min-height: var(--tik); display: flex; align-items: center; }
.hulp-details ul { margin-bottom: 10px; }
.hulp-voet { display: flex; }
.nieuw-lijst li::marker { color: var(--accent); }

/* ---------- Inloggen ---------- */
.auth-scherm {
  min-height: 100vh; min-height: 100dvh; overflow-y: auto; height: 100%;
  background: radial-gradient(1200px 600px at 50% -10%, var(--accent-soft), transparent 60%), var(--bg);
  padding: calc(24px + var(--veilig-t)) calc(16px + var(--veilig-r)) calc(24px + var(--veilig-b)) calc(16px + var(--veilig-l));
}
.auth-binnen { min-height: 100%; display: grid; place-items: center; }
.auth-kaart { width: min(420px, 100%); padding: 32px 28px; display: grid; gap: 14px; box-shadow: var(--schaduw); }
.auth-logo { font-size: 30px; text-align: center; margin-bottom: 6px; }
.auth-titel { font-size: 22px; }
.auth-tekst { color: var(--muted); }
.auth-voet { text-align: center; }

/* ---------- Kennis: kleuren per type (afgeleid van de tokens, werkt in licht en donker) ---------- */
:root {
  --t-TOOL: var(--focus);
  --t-PERS: var(--accent);
  --t-ENT: var(--ok);
  --t-TOPIC: var(--warn);
  --t-METH: color-mix(in srgb, var(--ok) 50%, var(--focus));
  --t-IDEA: color-mix(in srgb, var(--err) 50%, var(--focus));
  --t-SKILL: color-mix(in srgb, var(--err) 75%, var(--focus));
  --t-MCP: color-mix(in srgb, var(--focus) 55%, var(--text));
  --t-CLI: var(--muted);
  --t-AGT: var(--err);
  --t-RTN: color-mix(in srgb, var(--warn) 55%, var(--text));
  --t-PRM: color-mix(in srgb, var(--ok) 55%, var(--text));
  --tk: var(--muted);
}
.t-TOOL { --tk: var(--t-TOOL); }
.t-PERS { --tk: var(--t-PERS); }
.t-ENT { --tk: var(--t-ENT); }
.t-TOPIC { --tk: var(--t-TOPIC); }
.t-METH { --tk: var(--t-METH); }
.t-IDEA { --tk: var(--t-IDEA); }
.t-SKILL { --tk: var(--t-SKILL); }
.t-MCP { --tk: var(--t-MCP); }
.t-CLI { --tk: var(--t-CLI); }
.t-AGT { --tk: var(--t-AGT); }
.t-RTN { --tk: var(--t-RTN); }
.t-PRM { --tk: var(--t-PRM); }
.type-stip { width: 9px; height: 9px; border-radius: 50%; background: var(--tk); flex: none; display: inline-block; }
.badge-type { background: color-mix(in srgb, var(--tk) 14%, var(--surface)); color: color-mix(in srgb, var(--tk) 62%, var(--text)); }
.badge-type .type-stip { width: 7px; height: 7px; }
.badge-neutraal { background: var(--surface-2); color: var(--muted); }
#top-kennis { border-color: transparent; }
#top-kennis:hover { border-color: var(--border); }
#top-kennis.aan, #top-wachtrij.aan { border-color: transparent; background: var(--accent-soft); color: var(--accent-tekst); }
.tabbalk { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tab-tekst { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cijfer-link { color: var(--text); text-decoration: none; border: 1px solid transparent; }
.cijfer-link:hover { border-color: var(--accent); }
.kruimel { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-bottom: -10px; }
.kruimel a { color: var(--accent-tekst); font-weight: 600; text-decoration: none; }
.kruimel a:hover { text-decoration: underline; }
.veld-tekst { min-height: 72px; resize: vertical; font-family: inherit; }
.veld-label { font-weight: 600; font-size: 14px; }
.k-sub-kop { font-size: 15px; font-weight: 700; margin-top: 6px; }

/* Overzicht */
.kennis-ov { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; min-width: 0; }
.k-samen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.k-cijfer { padding: 12px 6px; color: var(--text); text-decoration: none; border: 1px solid transparent; }
a.k-cijfer:hover { border-color: var(--accent); }
.k-cijfer .cijfer-getal { font-size: 24px; }
.k-kaarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.k-kaart-li { position: relative; min-width: 0; }
.k-kaart {
  display: grid; gap: 2px; padding: 14px 16px 58px; min-height: 132px; height: 100%; text-decoration: none; color: var(--text);
  border-top: 4px solid var(--tk); align-content: start;
}
.k-kaart:hover { border-color: var(--tk); background: color-mix(in srgb, var(--tk) 5%, var(--surface)); }
.k-kaart-kop { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: color-mix(in srgb, var(--tk) 62%, var(--text)); }
.k-kaart-label { overflow-wrap: normal; }
.k-kaart-getal { font-size: 30px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.k-kaart-sub { font-size: 13px; color: var(--muted); }
.k-kaart-klaar { position: absolute; left: 16px; bottom: 18px; }
.k-kaart-beoordeel {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent-tekst); font-size: 13px; font-weight: 700; text-decoration: none;
}
.k-kaart-beoordeel:hover { text-decoration: underline; }
.k-stand, .k-llm { display: grid; gap: 12px; }
.k-runs { grid-template-columns: max-content minmax(0, 1fr); }
.k-export-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* Lijst */
.k-filters { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; align-items: center; }
.k-filters > .chips { flex-basis: 100%; }
.k-zoek { position: relative; min-width: 0; flex: 1 1 300px; }
.pagina-klijst > .lijst-staat:empty { display: none; }
.k-zoek .veld { padding-left: 40px; }
.k-zoek-icoon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.k-zoek-icoon .ic { width: 18px; height: 18px; }
.k-keuzes { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.k-keuze-label { display: contents; }
.k-keuze {
  width: auto; max-width: 300px; min-width: 0; flex: 0 1 auto; padding-right: 34px; font-weight: 600; font-size: 16px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
  text-overflow: ellipsis;
}
.k-lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); min-width: 0; }
.k-rij { display: flex; gap: 14px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--border); min-width: 0; }
.k-rij.ep-gekozen { background: var(--accent-soft); border-radius: 10px; }
.k-rij-hoofd { display: grid; gap: 4px; min-width: 0; flex: 1; }
.k-rij-boven { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; }
.k-code { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
/* 3.10.2: wanneer een kennisitem binnenkwam, klein en stil naast de code */
.k-toegevoegd { font-family: var(--sans); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-rij-naam { font-family: var(--serif); font-size: 18px; line-height: 1.3; font-weight: 700; }
.k-naam { color: var(--text); text-decoration: none; font-weight: 700; }
.k-naam:hover { color: var(--accent-tekst); text-decoration: underline; }
.k-omschr { color: var(--muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.k-tellers { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.k-snel { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.k-goed:hover { border-color: var(--ok); color: var(--ok); }
.k-af:hover { border-color: var(--err); color: var(--err); }
.k-rij-compact { padding: 10px 2px; }
.k-rij-compact .k-naam { font-family: var(--serif); font-size: 17px; }
.k-rij-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.k-lijst-compact { border-top: 0; }
.k-doelkeuze { display: grid; gap: 6px; }
.k-doel { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; min-height: var(--tik); }
.k-doel input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.k-doel:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.k-doel-tekst { display: grid; min-width: 0; }

/* Detail */
.pagina-kdetail { gap: 26px; }
.k-detail-kop { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; min-width: 0; }
.k-detail-merk {
  width: 76px; height: 76px; border-radius: 16px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--tk) 16%, var(--surface)); color: color-mix(in srgb, var(--tk) 62%, var(--text));
  border: 2px solid color-mix(in srgb, var(--tk) 40%, var(--surface)); font-family: var(--mono); font-weight: 700; font-size: 15px;
}
.k-detail-tekst { display: grid; gap: 10px; min-width: 0; }
.k-code-groot { font-size: 13px; }
.k-oude-codes { color: var(--muted); font-size: 12px; }
.k-wl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: start; min-width: 0; }
.k-wl-keuze { width: auto; max-width: 100%; min-width: 0; }
.k-detail-titel { font-size: 36px; }
.k-detail-omschr { font-size: 16px; max-width: 70ch; }
.k-url { display: flex; gap: 6px; align-items: center; font-size: 14px; min-width: 0; }
.k-url .ic { width: 16px; height: 16px; color: var(--muted); }
.k-detail-acties { grid-column: 2; margin-top: -6px; }
.k-detail-inhoud { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; min-width: 0; }
.k-sectie { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; align-content: start; }
.k-sectie.kaart { padding: 18px 20px; }
.k-verm-lijst { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--border); }
.k-afl { padding: 14px 0; border-bottom: 1px solid var(--border); display: grid; gap: 8px; min-width: 0; }
.k-afl-kop { display: grid; gap: 2px; }
.k-afl-titel { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--text); text-decoration: none; line-height: 1.3; }
.k-afl-titel:hover { color: var(--accent-tekst); text-decoration: underline; }
.k-afl-meta { font-size: 13px; color: var(--muted); }
.k-momenten { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.k-moment { display: grid; grid-template-columns: minmax(72px, max-content) minmax(0, 1fr); gap: 8px; align-items: start; }
.k-moment-tekst { display: grid; gap: 4px; min-width: 0; padding-top: 3px; }
.k-tijd { justify-self: start; }
.k-tijd-geen { font-size: 11px; color: var(--muted); padding: 6px 0; font-family: var(--mono); white-space: nowrap; overflow-wrap: normal; }
.k-kb-kort { display: none; }
.k-wat { font-size: 14px; }
.k-wat .seg-spreker { display: inline; margin-right: 6px; }
.k-citaat { margin: 0; padding: 2px 0 2px 12px; border-left: 3px solid color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); font-size: 14px; font-style: italic; }
.k-moment-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.k-rel-groepen { display: grid; gap: 16px; }
.k-rel-groep { display: grid; gap: 6px; }
.k-rel-kop { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.k-rel-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.k-rel { display: grid; gap: 2px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.k-rel-boven { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.k-rel-uitleg { font-size: 14px; color: var(--muted); }
.k-samen-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.k-samen-lijst li { max-width: 100%; min-width: 0; }
.k-samen-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600; max-width: 100%;
}
.k-samen-chip:hover { border-color: var(--tk); }
.k-samen-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.k-tijdlijn-wrap { position: relative; overflow-x: auto; padding-bottom: 4px; }
.k-tijdlijn { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 4px; min-width: min-content; }
.k-maand { position: relative; display: grid; grid-template-rows: 18px 110px 18px; justify-items: center; flex: 1 0 24px; max-width: 44px; }
.k-maand-n { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; align-self: end; }
.k-staaf { align-self: end; width: 70%; height: var(--h, 0%); min-height: 3px; background: var(--accent); border-radius: 4px 4px 0 0; }
.k-staaf-leeg { background: var(--border); height: 2px; min-height: 2px; }
.k-maand-label { font-size: 11px; color: var(--muted); white-space: nowrap; overflow-wrap: normal; }
.k-kies-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 40vh; overflow-y: auto; }
.k-kies { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; min-height: var(--tik); }
.k-kies:hover { background: var(--surface-2); }
.k-kies[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); }

/* Netwerk */
.pagina-netwerk { max-width: 1400px; }
.k-net-types .chip { gap: 7px; }
.vorm-icoon { display: block; flex: none; overflow: visible; }
.vorm-icoon .kn-vorm { fill: var(--tk); stroke: none; }
.chip.aan .vorm-icoon .kn-vorm { stroke: var(--bg); stroke-width: 1.5; }
.k-net-status { margin-top: -10px; }
.kn-wrap { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.kn-svg { display: block; width: 100%; height: clamp(380px, 64vh, 780px); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.kn-svg:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r); }
.kn-svg.kn-schuiven, .kn-svg.kn-slepen { cursor: grabbing; }
.kn-lijn { stroke: var(--muted); stroke-opacity: .55; transition: stroke-opacity .15s; }
.kn-samen { stroke: var(--muted); stroke-opacity: calc(.12 + .5 * var(--s, .4)); stroke-dasharray: 4 4; }
.kn-lijn-aan { stroke: var(--accent); stroke-opacity: .95; }
.kn-focus-modus .kn-lijn:not(.kn-lijn-aan) { stroke-opacity: .08; }
.kn { cursor: pointer; transition: opacity .15s; }
.kn:focus { outline: none; }
.kn-vorm { fill: var(--tk); stroke: var(--surface); stroke-width: 1.5; }
.kn-raak { fill: transparent; }
.kn:hover .kn-vorm, .kn:focus-visible .kn-vorm { stroke: var(--text); stroke-width: 2.5; }
.kn:focus-visible .kn-raak { fill: none; stroke: var(--focus); stroke-width: 3; }
.kn-wereld { --ls: 1; }
.kn-label {
  font-family: var(--sans); font-size: calc(12px * var(--ls)); font-weight: 600; fill: var(--text); pointer-events: none;
  paint-order: stroke; stroke: var(--surface); stroke-width: calc(3.5px * var(--ls)); stroke-linejoin: round;
}
.kn-zweef { font-size: calc(13px * var(--ls)); }
.kn-ver .kn-label:not(.kn-zweef):not(.kn-label-aan) { display: none; }
.kn-focus-modus .kn-label:not(.kn-zweef):not(.kn-label-aan) { opacity: .25; }
.kn-focus-modus .kn:not(.kn-buur) { opacity: .22; }
.kn-bediening { position: absolute; right: 10px; top: 10px; display: grid; gap: 6px; }
.kn-bediening .knop { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.kn-onder { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: center; padding: 10px 2px 0; }
.kn-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.kn-leg-item { display: inline-flex; align-items: center; gap: 8px; }
.kn-leg-lijn { display: inline-block; width: 26px; border-top: 2px solid var(--muted); }
.kn-leg-samen { border-top-style: dashed; opacity: .7; }
.kn-info { font-size: 13px; color: var(--text); min-height: 20px; }
.k-net-smal .knop { margin-top: 8px; }
.k-net-items { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--border); }
.k-net-item { padding: 12px 0; border-bottom: 1px solid var(--border); display: grid; gap: 4px; min-width: 0; }
.k-net-buren { font-size: 14px; }
.k-net-details { margin-top: 18px; }
.k-net-details > summary { cursor: pointer; font-weight: 700; min-height: var(--tik); display: flex; align-items: center; }

/* Database */
.db-alleen-lezen strong { font-weight: 700; }
.db-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.db-tabel-knop {
  width: 100%; height: 100%; display: grid; gap: 2px; align-content: start; text-align: left; padding: 10px 14px; min-height: var(--tik);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; color: var(--text);
}
.db-tabel-knop:hover { border-color: var(--accent); }
.db-tabel-knop.aan { border-color: var(--accent); background: var(--accent-soft); }
.db-naam { font-family: var(--mono); font-weight: 700; font-size: 14px; }
.db-rijen { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.db-uitleg { font-size: 12px; color: var(--muted); }
.db-tabel-plek { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.db-inhoud { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.db-kort { white-space: nowrap; }
.db-tabel-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px 16px; flex-wrap: wrap; }
.db-tabel-kop .veld { max-width: 320px; }
.db-tabel-kop h2:focus { outline: none; }
.db-scroll { overflow: auto; max-height: 70vh; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overscroll-behavior: contain; }
.db-tabel { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.db-tabel th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); text-align: left; font-weight: 700; padding: 8px 10px; white-space: nowrap; border-bottom: 1px solid var(--border); font-family: var(--mono); }
.db-tabel td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: top; max-width: 380px; min-width: 16ch; overflow-wrap: break-word; font-family: var(--mono); font-size: 12px; }
.db-tabel td.db-getal, .db-tabel td.db-null { min-width: 0; }
.db-tabel tbody tr:hover td { background: var(--surface-2); }
.db-getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-null { color: var(--muted); font-style: italic; }
.db-paginering { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.db-kies { padding: 6px 2px; }

/* Aflevering: tabblad Kennis en namen in het transcript */
.tab-knop .chip-tel { font-size: 12px; color: var(--muted); font-weight: 600; }
.k-afl-paneel { display: grid; gap: 16px; padding-top: 14px; min-width: 0; }
.k-afl-knoppen { align-items: center; }
.k-afl-hint { flex-basis: 100%; }
.k-afl-lijst { display: grid; gap: 16px; min-width: 0; }
.k-afl-groep { display: grid; gap: 4px; }
.k-afl-type { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--tk) 62%, var(--text)); text-transform: uppercase; letter-spacing: .05em; }
.k-afl-items { list-style: none; margin: 0; padding: 0; display: grid; }
.k-afl-item { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.k-afl-item .k-omschr { -webkit-line-clamp: 2; }
.k-afl-tijden { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; }
.k-afl-tijd { display: inline-flex; align-items: center; gap: 4px; }
.k-runs-details > summary { cursor: pointer; font-weight: 700; min-height: var(--tik); display: flex; align-items: center; }
.k-runs-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.k-run { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.kennis-naam {
  color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--tk) 75%, transparent);
}
.kennis-naam:hover { text-decoration-style: solid; color: color-mix(in srgb, var(--tk) 62%, var(--text)); }

/* Zoeken */
.zoek-kennis-merk {
  width: 48px; height: 48px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--tk) 16%, var(--surface)); color: color-mix(in srgb, var(--tk) 62%, var(--text));
}
.zoek-code { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.zoek-kennis-badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* Instellingen: tokens */
.token-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.token-rij { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; flex-wrap: wrap; }
.token-tekst { display: grid; min-width: 0; flex: 1 1 200px; }
.token-nieuw { color: var(--text); }
.token-nieuw > .ic { color: var(--ok); }
.token-nieuw-binnen { display: grid; gap: 8px; flex: 1; min-width: 0; }
.token-kopie { display: flex; gap: 8px; flex-wrap: wrap; }
.token-waarde { flex: 1 1 220px; min-width: 0; font-family: var(--mono); font-size: 16px; }
.ov-kennis, .ov-transcripten { display: grid; gap: 12px; }
.onderhoud-uitkomst:empty { display: none; }
/* 3.3: reclame aan het begin overslaan */
.intro-regel:empty { display: none; }
.intro-regel { display: grid; gap: 4px; margin-top: -6px; }
.intro-tekst { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); }
.intro-tekst .ic { width: 16px; height: 16px; flex: none; }
.intro-uitleg summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent-tekst); min-height: 32px; display: inline-flex; align-items: center; }
.intro-uitleg[open] { display: grid; gap: 6px; justify-items: start; }
.intro-melding { align-items: center; }
.intro-terug {
  border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 8px; padding: 4px 10px;
  font-weight: 700; font-size: 13px; cursor: pointer; min-height: 32px; white-space: nowrap;
}
.intro-terug:hover { background: rgba(127, 127, 127, .2); }
.show-intro { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.show-intro .k-keuze { max-width: 100%; }
.k-afl-stand { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.k-stand-regel { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); }
.k-stand-regel.gedaan { color: var(--text); }
.k-stand-regel .ic { width: 18px; height: 18px; color: var(--ok); margin-top: 1px; }
.k-stand-leeg { width: 14px; height: 14px; margin: 3px 2px 0; border: 2px solid var(--border); border-radius: 50%; flex: none; }
.show-keuzes { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
/* De keten in Instellingen */
.keten-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.keten-stap { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.keten-stap input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.keten-stap .ic { width: 18px; height: 18px; color: var(--ok); margin-top: 2px; }
.keten-stap p { margin: 2px 0 0; }
.keten-stap label { cursor: pointer; }
.keten-hand { border: 1px solid var(--border); border-radius: var(--r); padding: 10px 14px; background: var(--surface); }
.keten-hand > summary { cursor: pointer; font-weight: 600; min-height: var(--tik); display: flex; align-items: center; }
.keten-hand[open] { display: grid; gap: 12px; }
.keten-zoek { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.keten-zoek .veld { flex: 1 1 200px; min-width: 0; }
.keten-shows { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; display: grid; gap: 2px; border: 1px solid var(--border); border-radius: 10px; padding: 6px; }
.keten-shows li { display: flex; gap: 10px; align-items: center; min-height: 40px; padding: 2px 6px; border-radius: 8px; }
.keten-shows li:hover { background: var(--surface-2); }
.keten-shows input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.keten-shows label { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.keten-pin { font-size: 11px; }
.tr-ander > summary { cursor: pointer; min-height: var(--tik); display: flex; align-items: center; color: var(--muted); }
.keten-opties { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: end; }
.keten-schatting p { margin: 0 0 4px; }
.af-schakel { font-weight: 600; }
.begin-knop .ic { width: 20px; height: 20px; }
@media (pointer: coarse), (max-width: 699.98px) {
  .intro-terug, .intro-uitleg summary { min-height: var(--tik); }
}
/* Instellingen 3.2: AI-aanbieders, taalmodel, transcriberen */
.aanb-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aanb-rij { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; scroll-margin: 80px; }
.aanb-rij[data-status="Werkt"] { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.aanb-rij[data-status="Geweigerd"] { border-color: color-mix(in srgb, var(--err) 45%, var(--border)); }
.aanb-kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.aanb-naam { display: grid; min-width: 0; }
.aanb-meta, .aanb-testmelding { margin-top: -4px; }
.aanb-form { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.aanb-veld { flex: 1 1 220px; min-width: 0; font-family: var(--mono); font-size: 16px; }
.aanb-regio { flex: 0 1 auto; width: auto; max-width: 100%; }
.aanb-melding:empty { display: none; }
.aanb-acties { margin-top: -2px; }
.tm-blok { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.tm-model-rij { min-width: 0; }
.tm-gekozen { font-weight: 500; }
.tm-modellen { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overscroll-behavior: contain; }
.tm-model { position: relative; border-radius: 8px; }
.tm-model input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tm-model-label { display: grid; gap: 1px; padding: 8px 10px; min-height: var(--tik); border-radius: 8px; cursor: pointer; }
.tm-model-label:hover { background: var(--surface-2); }
.tm-model input:checked + .tm-model-label { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.tm-model input:focus-visible + .tm-model-label { outline: 2px solid var(--focus); outline-offset: -2px; }
.tm-model-naam { font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; overflow-wrap: anywhere; }
.tm-eigen { display: grid; gap: 6px; }
.tm-eigen-rij { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tm-eigen-rij .veld { flex: 1 1 160px; min-width: 0; width: auto; }
.tm-getal { max-width: 140px; }
.tm-prijs { display: flex; gap: 10px; align-items: flex-start; }
.tm-prijs-binnen { display: grid; gap: 10px; min-width: 0; flex: 1; }
.tm-prijs-velden { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.tm-prijs-velden .veld-rij { flex: 1 1 140px; min-width: 0; }
.tm-twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: start; }
.tm-grens { display: grid; gap: 6px; align-content: start; }
.tm-ververs { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.tm-per-aanbieder { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.tm-uitkomst-rij { display: flex; gap: 8px; align-items: flex-start; }
.tm-uitkomst-rij .ic { width: 16px; height: 16px; margin-top: 3px; flex: none; color: var(--ok); }
.tm-waarschuwing:empty, .tm-uitkomst:empty { display: none; }
/* 3.9.0: Instellingen, AI. Twee blokken (Je sleutels, Wie doet wat) in vaste volgorde, rustig en met grote tikvlakken. */
.ai { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.ai-blok { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; scroll-margin: 80px; }
.ai-blok + .ai-blok { border-top: 1px solid var(--border); padding-top: 20px; }
.ai-blok-kop { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.ai-nr { width: 28px; height: 28px; border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-tekst); font-size: 14px; font-weight: 700; }
.ai-sub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--border); scroll-margin: 80px; }
.ai-binnen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.ai-keuze {
  width: 100%; min-width: 0; padding-right: 34px; cursor: pointer; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.ai-keuze:disabled { cursor: default; color: var(--muted); background-color: var(--surface-2); }
.ai-melding:empty { display: none; }
.ai-mag { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--border); }
.ai-mag-kop { font-size: 15px; font-weight: 700; }
.ai-mag-lijst, .ai-taken { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.ai-mag-lijst { gap: 10px; }
.ai-mag-rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 4px 14px; align-items: start; min-width: 0; }
.ai-schakel { align-items: center; min-width: 0; }
.ai-schakel input { flex: none; width: 22px; height: 22px; }
.ai-mag-model { display: grid; gap: 4px; min-width: 0; }
.ai-mag-vast { display: flex; gap: 8px; align-items: flex-start; }
.ai-mag-vast .ic, .ai-taak-nu .ic, .ai-taak-terug .ic { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.ai-taken { border-top: 1px solid var(--border); }
.ai-taak { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.ai-taak:last-child { border-bottom: 0; }
.ai-taak-kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ai-taak-naam { font-weight: 700; font-size: 15px; min-width: 0; }
.ai-taak-nu { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; }
.ai-taak-nu .ic { color: var(--ok); }
.ai-taak-terug { display: flex; gap: 8px; align-items: flex-start; color: var(--warn-tekst); }
.ai-alle-standaard { display: grid; gap: 8px; min-width: 0; }
.tm-uitzetten { display: grid; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.tm-kies { min-width: 0; }
.tm-kies > summary { cursor: pointer; min-height: var(--tik); display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent-tekst); list-style: none; }
.tm-kies > summary::-webkit-details-marker { display: none; }
.tm-kies > summary .ic { width: 18px; height: 18px; transition: transform .15s; }
.tm-kies[open] > summary .ic { transform: rotate(90deg); }
.tm-kies-binnen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; padding-top: 6px; }
@media (max-width: 699.98px) {
  .ai-mag-rij { grid-template-columns: minmax(0, 1fr); }
  .ai-mag-rij + .ai-mag-rij { padding-top: 10px; border-top: 1px solid var(--border); }
}
@media (prefers-reduced-motion: reduce) { .tm-kies > summary .ic { transition: none; } }
.k-dub-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.k-dub { padding: 14px 16px; display: grid; gap: 10px; min-width: 0; }
.k-dub-paar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: start; }
.k-dub-kant { display: grid; gap: 4px; min-width: 0; }
.k-dub-en { color: var(--muted); padding-top: 8px; }
.k-dub-reden { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.k-dub-reden .ic { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.k-tijd-ongeveer { font-style: italic; white-space: nowrap; }
.k-wat-punten { margin: 2px 0 0; padding-left: 18px; display: grid; gap: 2px; }
@media (max-width: 699.98px) {
  .k-dub-paar { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .k-dub-en { display: none; }
}
.k-reclame-schakel { font-weight: 600; font-size: 14px; padding: 0 4px; }
.k-afl-schakel { display: flex; }
.k-reclame-label { padding: 1px 7px; font-size: 11px; }
.zoek-exact .zoek-item { box-shadow: inset 0 0 0 2px var(--accent); background: var(--surface); }
.ontdubbel-lijst { max-height: 50vh; overflow-y: auto; }
.instel-binnen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.k-uitklap summary { gap: 6px; }
.k-uitklap-pijl { width: 18px; height: 18px; transition: transform .15s; color: var(--muted); }
.k-uitklap[open] .k-uitklap-pijl { transform: rotate(90deg); }

@media (max-width: 1099.98px) {
  .k-samen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699.98px) {
  .tab { font-size: 10.5px; padding: 6px 0; }
  .k-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .k-kaart { min-height: 0; padding: 12px 12px 56px; }
  .k-kaart-sub { padding-right: 0; }
  .k-kaart-getal { font-size: 26px; }
  .k-kaart-beoordeel { left: 8px; right: 8px; justify-content: center; }
  .k-rij { flex-wrap: wrap; gap: 10px; align-items: flex-start; padding: 14px 0; }
  .k-snel { justify-content: flex-start; flex-basis: 100%; }
  .k-rij .ep-vink-vak + .k-rij-hoofd { flex-basis: calc(100% - 60px); }
  .k-keuze { flex: 1 1 140px; max-width: none; }
  .k-detail-kop { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  .k-detail-acties { grid-column: 1 / -1; margin-top: 0; }
  .k-sectie .info-lijst { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .k-sectie .info-lijst dt { font-size: 13px; margin-top: 8px; }
  .k-sectie .info-lijst dt:first-child { margin-top: 0; }
  .k-detail-merk { width: 56px; height: 56px; font-size: 12px; border-radius: 12px; }
  .k-detail-titel { font-size: 28px; }
  .k-moment { grid-template-columns: minmax(64px, max-content) minmax(0, 1fr); }
  .k-sectie.kaart { padding: 16px; }
  .db-tabel-kop .veld { max-width: none; }
  .kn-svg { height: 62vh; }
}
@media (max-width: 379.98px) {
  .k-kb-lang { display: none; }
  .k-kb-kort { display: inline; }
  .k-kaarten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .k-kaart { padding: 10px 10px 54px; }
  .k-kaart-kop { font-size: 13px; }
  .k-samen { gap: 8px; }
}
@media (pointer: coarse), (max-width: 699.98px) {
  .k-kaart-beoordeel, .k-samen-chip, .k-tijd { min-height: var(--tik); }
  .k-tijd { min-width: 52px; }
  .kruimel a { display: inline-flex; align-items: center; min-height: var(--tik); }
  .kruimel { margin-bottom: -16px; }
  .toast-sluit { width: var(--tik); height: var(--tik); margin: -10px -4px -10px 0; }
}
@media (pointer: coarse), (max-width: 1099.98px) {
  .k-naam, .k-afl-titel { display: inline-block; padding: 11px 0; margin: -11px 0; }
  .k-rij-naam .k-naam { display: block; }
  .k-net-buren a, .k-detail-omschr a, .info-lijst dd a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}

/* ---------- Animaties ---------- */
@keyframes draai { to { transform: rotate(360deg); } }
@keyframes puls { 50% { opacity: .35; } }
@keyframes glans { 50% { opacity: .55; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes paneel-in { from { transform: translateX(24px); opacity: 0; } }
@keyframes scherm-in { from { transform: translateY(12px); opacity: 0; } }

/* ---------- Middelbreed: 700 tot 1100 ---------- */
@media (max-width: 1099.98px) {
  :root { --zij-b: 280px; }
  .app { grid-template-columns: var(--zij-b) minmax(0, 1fr); grid-template-areas: "top top" "zij hoofd" "speler speler" "tabs tabs"; }
  body.zij-dicht .app { grid-template-columns: 0 minmax(0, 1fr); }
  .detail {
    grid-area: auto; grid-column: 1 / -1; grid-row: 2;
    justify-self: end; width: min(560px, 100%); z-index: 7;
    box-shadow: var(--schaduw-zwaar);
    animation: paneel-in .2s ease-out;
  }
  .pagina { padding: 24px 24px 40px; }
  .ov-raster { grid-template-columns: minmax(0, 1fr); }
  .ov-zij { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .speler-binnen { grid-template-columns: minmax(0, 240px) auto minmax(0, 1fr) auto; }
}
@media (max-width: 899.98px) and (min-width: 700px) {
  .speler-detail { display: none; }
  .art-xl { width: 128px; height: 128px; }
  .show-titel { font-size: 30px; }
}

/* ---------- Smal: onder 700 ---------- */
@media (max-width: 699.98px) {
  body { font-size: 16px; }
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "hoofd" "speler" "tabs";
  }
  body.zij-dicht .app { grid-template-columns: minmax(0, 1fr); }
  .zijkolom { display: none; }
  .zij-knop, .topzoek, .topacties { display: none; }
  .bovenbalk .zoek-knop-smal { display: inline-grid; }
  .bovenbalk { padding-top: calc(6px + var(--veilig-t)); padding-bottom: 6px; }
  .logo { font-size: 22px; }
  .tabbalk { display: grid; }

  .detail {
    grid-area: auto; grid-column: 1 / -1; grid-row: 1 / 3;
    width: 100%; z-index: 7; border-left: 0; box-shadow: none;
    padding-top: var(--veilig-t);
    animation: scherm-in .2s ease-out;
  }
  .detail-binnen { padding: 0 16px 32px; gap: 16px; }
  .detail-balk { margin: 0 -16px; padding: 6px 8px; }
  .detail-terug { display: inline-flex; }
  .detail-sluit { display: none; }
  .tr-balk { position: static; }
  .tr-zoek { flex-basis: 100%; }
  .art-detail { width: 88px; height: 88px; }
  .detail-titel { font-size: 22px; }

  .pagina { padding: 18px 16px 32px; gap: 18px; }
  .pagina-titel { font-size: 28px; }
  .ov-tellers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .teller-kaart { padding: 12px 14px; }
  .teller-getal { font-size: 24px; }
  .ov-zij { grid-template-columns: minmax(0, 1fr); }
  .verder-lijst { grid-auto-columns: minmax(250px, 82%); }

  .show-kop { grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px; }
  .show-kop-tekst { display: contents; }
  .show-kop > .art { grid-row: 1 / span 3; align-self: start; }
  .show-kop-tekst > * { grid-column: 1 / -1; }
  .show-kop-tekst > .show-titel, .show-kop-tekst > .show-auteur, .show-kop-tekst > .show-meta { grid-column: 2; }
  .show-kop-tekst > .show-beschr { margin-top: 10px; }
  .art-xl { width: 96px; height: 96px; border-radius: 12px; }
  .art-xl .art-letter { font-size: 40px; }
  .show-titel { font-size: 24px; }
  .show-knoppen { margin-top: 8px; }
  .lijst-kop-acties { flex-basis: 100%; justify-content: stretch; }
  .lijst-kop-acties .veld { max-width: none; }
  .ep-rij { padding: 16px 0; gap: 10px; }
  .ep-titel { font-size: 17px; }
  .ep-beschr { -webkit-line-clamp: 2; }
  .ep-compact .art-m { width: 44px; height: 44px; }
  .bulkbalk { bottom: 8px; }
  .bulk-acties .knop-tekst { display: none; }
  .bulk-acties .knop { width: var(--tik); padding: 0; }

  .speler { padding: 0 calc(8px + var(--veilig-r)) 0 calc(8px + var(--veilig-l)); }
  .speler-binnen { grid-template-columns: minmax(0, 1fr) auto; min-height: 64px; padding: 6px 0 8px; gap: 6px; }
  .speler-vg, .speler-extra, .speler-knoppen .spring-knop:first-child { display: none; }
  .speler-lijn {
    display: block; position: absolute; left: -8px; right: -8px; top: -1px; height: 2px; background: var(--border);
  }
  .speler-lijn-vul { height: 100%; width: var(--pct, 0%); background: var(--accent); }
  .speler-art { width: 44px; height: 44px; }
  .venster { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0; max-height: 90dvh; border-bottom: 0; }
  .venster-lijf { padding-bottom: calc(20px + var(--veilig-b)); }
  .toasts { bottom: calc(76px + var(--veilig-b)); }
  body.speler-zichtbaar .toasts { bottom: calc(144px + var(--veilig-b)); }
  body.detail-open .toasts { bottom: calc(76px + var(--veilig-b)); }
  .toevoeg-form .knop .knop-tekst { display: none; }
  .knop-smal-icoon .knop-tekst { display: none; }
  .knop-smal-icoon { width: var(--tik); padding: 0; }
  .tr-export .knop { flex: 1 1 auto; }
  .seg { grid-template-columns: 56px minmax(0, 1fr); }
  .auth-kaart { padding: 26px 20px; }
}
@media (max-width: 379.98px) {
  .detail-acties .knop-tekst { display: none; }
  .detail-acties .knop { width: var(--tik); padding: 0; }
  .ov-tellers { gap: 8px; }
  .teller-icoon { display: none; }
  .show-kop { grid-template-columns: 72px minmax(0, 1fr); }
  .show-kop .art-xl { width: 72px; height: 72px; }
}

/* Aanraakschermen: alles minstens 44 px */
/* Telefoon en tablet: ook tekstlinks krijgen een klikvlak van minstens 44 px */
@media (pointer: coarse), (max-width: 1099.98px) {
  .logo { display: inline-flex; align-items: center; min-height: var(--tik); }
  .topzoek input { min-height: var(--tik); }
  .ep-show, .detail-show, .zoek-show { display: inline-flex; align-items: center; min-height: var(--tik); }
  .ep-meta { row-gap: 0; }
  .ep-titel a, a.taak-titel { display: block; padding: 9px 0; margin: -9px 0; min-height: var(--tik); }
  .info-lijst a, .info-beschr a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}
@media (pointer: coarse), (max-width: 699.98px) {
  .knop, .knop-klein, .chip, .snelheid, .veld-klein { min-height: var(--tik); }
  .icoonknop.knop-klein { width: var(--tik); height: var(--tik); }
  .seg-tijd { min-height: 36px; min-width: 44px; }
  .linkknop { min-height: var(--tik); }
  .detail-acties .knop { min-height: var(--tik); }
}

/* Breed: detail als derde kolom */
@media (min-width: 1100px) {
  .ep-rij { padding-left: 8px; padding-right: 8px; }
  .detail-binnen { padding: 0 24px 40px; }
  .detail-balk { margin: 0 -24px; }
}
@media (min-width: 1500px) {
  .pagina { padding: 32px 48px 56px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

@media print {
  .bovenbalk, .zijkolom, .speler, .tabbalk, .detail-balk { display: none !important; }
  body { overflow: visible; }
  .app { display: block; height: auto; }
}

/* ---------- Smal (320 tot 380 px): vlagknop erbij in de bediening, melding met Terug zonder letterbreuk ---------- */
.intro-melding { flex-wrap: wrap; }
.intro-melding .toast-tekst { flex: 1 0 9em; overflow-wrap: normal; word-break: normal; }
@media (max-width: 380px) {
  .bediening { padding: 12px 10px; }
  .bediening-knoppen { gap: 2px; grid-template-columns: auto auto auto auto auto; justify-content: space-between; }
  .bediening .snelheid { padding: 4px 20px 4px 8px; }
  .bediening .speel-groot { width: 54px; height: 54px; }
}

@media (pointer: coarse), (max-width: 699.98px) {
  .taal-knop { min-height: var(--tik); min-width: var(--tik); }
  .keten-stap label, .keten-shows label { min-height: var(--tik); display: flex; align-items: center; flex: 1; }
  .keten-shows li { min-height: var(--tik); }
  .segment-optie label { min-height: var(--tik); }
}

/* ---------- Playlists (3.7.0, D-025): ronde knoppen in de eigen huisstijl ---------- */
.pl-kleur-koraal { --pl: var(--accent); }
.pl-kleur-blauw { --pl: var(--focus); }
.pl-kleur-groen { --pl: var(--ok); }
.pl-kleur-oker { --pl: var(--warn); }
.pl-kleur-rood { --pl: var(--err); }
.pl-kleur-grijs { --pl: var(--muted); }
.pl-rij { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 0 4px; scrollbar-width: thin; }
.pl-knop {
  display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; width: 72px; min-height: var(--tik);
  padding: 2px 0; border: 0; background: none; color: var(--text); font: inherit; text-decoration: none; cursor: pointer;
}
.pl-rond {
  position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--surface-2); background: color-mix(in srgb, var(--pl, var(--muted)) 16%, var(--surface));
  color: var(--pl, var(--muted)); border: 2px solid var(--pl, var(--border));
}
.pl-rond svg { width: 24px; height: 24px; }
.pl-knop:hover .pl-rond { background: color-mix(in srgb, var(--pl, var(--muted)) 26%, var(--surface)); }
.pl-knop.actief .pl-rond { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--pl, var(--text)); }
.pl-knop:focus-visible { outline: none; }
.pl-knop:focus-visible .pl-rond { outline: 2px solid var(--focus); outline-offset: 4px; }
.pl-naam { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; text-align: center; }
.pl-tel {
  position: absolute; top: -4px; right: -8px; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; background: var(--text); color: var(--bg); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pl-nieuw .pl-rond { --pl: var(--muted); border-style: dashed; background: var(--surface); }
.pl-groot { width: 96px; height: 96px; border-width: 3px; }
.pl-groot svg { width: 40px; height: 40px; }
.pl-klein { width: 36px; height: 36px; }
.pl-klein svg { width: 18px; height: 18px; }
.pl-voorbeeld-rij { display: flex; justify-content: center; }
/* 3.8.6: playlists klein en op een lijn onder de tegels van het Overzicht; past het niet, dan horizontaal schuiven */
.ov-playlists { min-width: 0; margin-top: -20px; }
.ov-playlists:empty { display: none; }
.pl-rij-klein { gap: 8px; padding: 8px 2px 6px; margin: 0; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.pl-rij-klein .pl-knop { width: 64px; gap: 4px; scroll-snap-align: start; }
.pl-rij-klein .pl-rond { width: 40px; height: 40px; }
.pl-rij-klein .pl-rond svg { width: 20px; height: 20px; }
.pl-rij-klein .pl-naam { max-width: 64px; }
.pl-rij-klein.meer-rechts { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.pl-rij-klein.meer-links { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
.pl-rij-klein.meer-links.meer-rechts { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.ov-voorstel-plek:empty { display: none; }
/* 3.8.7: vinklijst met de knop Nieuwe playlist eronder */
.pl-vinkplek { display: grid; gap: 12px; justify-items: start; }
.pl-vink-nieuw .pl-vink { background: var(--accent-soft); border-radius: var(--r); }
.pl-vink-nieuw-tekst { display: block; color: var(--accent-tekst); font-weight: 600; }
/* 3.8.7: wat staat er in een playlist (gewoon of automatisch) */
.pl-soortkeuze { display: grid; gap: 6px; }
.pl-soort { font-weight: 400; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r); cursor: pointer; min-height: var(--tik); }
.pl-soort > span { display: grid; gap: 2px; min-width: 0; }
.pl-soort input { margin-top: 3px; }
.pl-soort:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pl-rij-klein .pl-tel { top: -6px; right: -12px; min-width: 20px; height: 18px; font-size: 10px; }
.pl-show-plek { display: grid; gap: 8px; min-width: 0; }
.pl-show-plek:empty { display: none; }
.pl-labels { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-label {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tik); padding: 4px 14px 4px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; text-decoration: none;
}
.pl-label:hover { background: var(--surface-2); }
.pl-label-plus { padding: 4px 14px; border-style: dashed; color: var(--muted); cursor: pointer; }
.pl-label-rond {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--surface-2); background: color-mix(in srgb, var(--pl, var(--muted)) 16%, var(--surface)); color: var(--pl, var(--muted));
}
.pl-label-rond svg { width: 15px; height: 15px; }
.pl-stip { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 50%; background: var(--pl); vertical-align: -1px; }
.pl-icoonkeuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; }
.pl-icoon-optie { position: relative; }
.pl-icoon-optie input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pl-icoon-optie label {
  display: grid; place-items: center; min-height: var(--tik); border: 1px solid var(--border); border-radius: var(--r-s);
  background: var(--surface); color: var(--text); cursor: pointer;
}
.pl-icoon-optie label svg { width: 22px; height: 22px; }
.pl-icoon-optie input:checked + label { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.pl-icoon-optie input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
.pl-vinklijst { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pl-vink { display: flex; align-items: center; gap: 10px; min-height: var(--tik); cursor: pointer; }
.pl-voorstellen { display: grid; gap: 12px; }
.pl-voorstel { display: grid; gap: 10px; padding: 12px 14px; }
.pl-voorstel-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pl-voorstel-show { font-weight: 600; color: var(--text); }
.pl-voorstel-rij { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.pl-reden { margin: 0; }
.pl-instel-lijst .token-rij { align-items: center; }
.icoon-omhoog svg { transform: rotate(180deg); }

/* ---------- Taal in playlists (3.7.1): vlaggen in de filterknoppen ---------- */
.vlag { display: inline-block; width: 21px; height: 14px; flex: 0 0 auto; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); }
.pl-talen { margin: 4px 0 8px; }

/* ---------- Pagina van een aflevering (3.7.3) ---------- */
.acties-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; width: 100%; min-width: 0; }
/* icoon boven een korte tekst: vier knoppen naast elkaar passen ook op een smalle telefoon */
.acties-rij .knop { flex-direction: column; gap: 4px; min-width: 0; min-height: 60px; padding: 6px 4px; font-size: 12px; }
.acties-rij .knop svg { width: 20px; height: 20px; }
.acties-rij .knop-tekst { max-width: 100%; }
.acties-menu { display: grid; gap: 8px; }
.acties-menu .knop { justify-content: flex-start; min-height: var(--tik); }
.tr-nu-knop { position: sticky; bottom: calc(12px + var(--veilig-b)); z-index: 3; display: flex; margin: 10px 0 0 auto; box-shadow: var(--schaduw); }
.tr-nu-knop[hidden] { display: none; }
@media (max-width: 699.98px) {
  /* niet twee spelers op de telefoon: op de pagina van de aflevering die speelt, is de grote speler daar de enige */
  body.detail-is-speler .speler { display: none; }
  body.detail-is-speler.speler-zichtbaar .toasts { bottom: calc(76px + var(--veilig-b)); }
  .detail-acties .acties-rij .knop-tekst { display: inline; }
  .detail-acties .acties-rij .knop { width: auto; }
  .aflevering-tabs .tab-knop { padding: 8px 12px; }
}
/* een lange knoptekst in een knoppenrij loopt op een smal scherm door naar een tweede regel in plaats van uit beeld (3.7.3) */
@media (max-width: 699.98px) {
  .knoppenrij .knop { max-width: 100%; }
  .knoppenrij .knop-tekst { white-space: normal; overflow-wrap: anywhere; text-align: center; }
}
/* ---------- Model kiezen (3.8.0): in gebruik, uitleg en bevestiging ---------- */
.tm-in-gebruik { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; overflow-wrap: anywhere; }
.tm-in-gebruik .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--ok); }
.tm-tik-uitleg { margin: 0; }
.tm-bevestiging:empty { display: none; }
.aanb-uitleg { margin: 0; }
/* melding met een knop die blijft staan (nieuwe versie, 3.8.0): tikvlakken 44 px */
.toast-blijf .toast-tekst { display: grid; gap: 10px; justify-items: start; }
.toast-actie { min-height: var(--tik); }
.toast-blijf .toast-sluit { width: var(--tik); height: var(--tik); margin: -10px -8px -10px 0; }

/* ---------- playlist: shows per taal in een rustig raster (3.8.2) ----------
   Vaste vierkante tegels met een titel van hooguit twee regels en een vaste hoogte, zodat alles netjes op een lijn
   staat; geen beweging, geen losse badges op de afbeelding (W3C COGA: duidelijke structuur, weinig ruis). */
.pl-beschr { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pl-shows-blok { margin: 4px 0 28px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.pl-shows-titel { margin: 0; }
.pl-shows-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: var(--tik);
  padding: 10px 16px; border: 0; border-radius: var(--r); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pl-shows-kop:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pl-shows-pijl { display: inline-flex; color: var(--muted); }
.pl-shows-blok.open .pl-shows-pijl { transform: rotate(180deg); }
.pl-shows-inhoud[hidden] { display: none; }
.pl-groep { padding: 4px 16px 18px; }
.pl-groep + .pl-groep { border-top: 1px solid var(--border); padding-top: 16px; }
.pl-groep-kop { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.pl-groep-kop .vlag { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); }
.pl-groep-tel { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.pl-raster { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px 12px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.pl-tegel { display: flex; flex-direction: column; gap: 6px; color: var(--text); text-decoration: none; border-radius: var(--r-s); }
.pl-tegel:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pl-tegel:hover .pl-tegel-titel { text-decoration: underline; }
.art-tegel { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--r-s); }
.art-tegel .art-letter { font-size: 28px; }
.pl-tegel-titel { font-size: 13px; line-height: 1.3; font-weight: 500; min-height: 2.6em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.pl-tegel-meta { font-size: 12px; line-height: 1.3; color: var(--muted); }
.pl-lijst-opties { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 4px 0 8px; }
.pl-lijst-opties .pl-talen { flex: 1 1 auto; min-width: 0; }
.pl-beluisterd { margin: 0; }
@media (min-width: 768px) {
  .pl-raster { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px 16px; }
  .pl-groep { padding: 4px 20px 20px; }
}
@media (min-width: 1200px) { .pl-raster { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); } }
.pl-afl-groep { margin-top: 8px; }
.pl-afl-groep + .pl-afl-groep { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.pl-afl-groep > .pl-groep-kop { margin-bottom: 4px; }
.pl-tegel-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 699.98px) {
  /* telefoon: icoon links naast naam en aantallen, zoals de afbeelding bij een show */
  .pagina-playlist .show-kop > .pl-rond { grid-row: 1 / span 2; align-self: center; width: 72px; height: 72px; }
  .pagina-playlist .show-kop > .pl-rond svg { width: 30px; height: 30px; }
  .pagina-playlist .show-kop { grid-template-columns: 72px minmax(0, 1fr); }
}
/* 3.8.3: melding van de bewaking bovenaan het Overzicht */
.ov-bewaking { margin-bottom: 16px; align-items: flex-start; }
.ov-bewaking-lijst { margin: 4px 0 6px; padding-left: 18px; }

/* 3.10.0: nieuwsbrieven in Kennis, een nummer, de groep in Zoeken en Ook in nieuwsbrieven bij een aflevering */
.nb-blok-inhoud { min-width: 0; }
.nb-tegel-fout { color: var(--err); }
.nb-rij { align-items: flex-start; }
.nb-onderwerp { font-family: var(--serif); font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.nb-begin, .nb-citaat { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.nb-fout { color: var(--err); }
.nb-kop { display: grid; gap: 8px; min-width: 0; }
.nb-titel { overflow-wrap: anywhere; }
.nb-paneel { display: grid; gap: 16px; padding-top: 16px; min-width: 0; }
.nb-taal-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.nb-tekst { max-width: 70ch; min-width: 0; }
.nb-tekst p { font-size: 17px; line-height: 1.65; margin: 0 0 1em; overflow-wrap: anywhere; }
.nb-tekst a { color: var(--accent-tekst); }
.nb-vertaal { display: grid; gap: 10px; justify-items: start; padding: 16px; border: 1px solid var(--border); border-radius: 10px; max-width: 70ch; }
.nb-links > summary { cursor: pointer; font-weight: 700; min-height: var(--tik); display: flex; align-items: center; }
.nb-links-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nb-links-lijst a { color: var(--accent-tekst); font-weight: 600; overflow-wrap: anywhere; }
.nb-herkomst { overflow-wrap: anywhere; }
.nb-verband-groep { display: grid; gap: 8px; min-width: 0; }
.nb-redenen { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 2px; }
.zoek-nb-merk { --tk: var(--muted); }
.nb-ook-blok { display: grid; gap: 6px; --tk: var(--muted); }
.nb-ook-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nb-ook-lijst a { font-weight: 700; color: var(--text); }
.nb-ook-lijst a:hover { color: var(--accent-tekst); }
.nb-ook-lijst li { display: grid; gap: 2px; overflow-wrap: anywhere; }