/* YourTube 0.1.0-Farnsworth — beeldbuis-thema: schermglas, inkt, testbeeld. */
:root {
  --glas: #E9EEF2;      /* achtergrond: koel schermglas */
  --paneel: #FFFFFF;
  --inkt: #17202B;
  --inkt-zacht: #4A5868;
  --lijn: #C9D3DC;
  --signaal: #C21F66;   /* testbeeld-magenta: actie, focus */
  --geel: #F4C430;      /* kanaalgeel: voortgang, live */
  --cyaan: #3FB8C9;
  --groen: #5DBB63;
  --buis: #17202B;      /* omlijsting speler */
  --r-klein: 8px;
  --r-buis: 22px;
  --kolom: 1360px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glas: #0E141B; --paneel: #16202B; --inkt: #E7EDF2; --inkt-zacht: #9AA9B8; --lijn: #263342;
    --signaal: #FF5C9E; --buis: #05080C; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --glas: #0E141B; --paneel: #16202B; --inkt: #E7EDF2; --inkt-zacht: #9AA9B8; --lijn: #263342;
  --signaal: #FF5C9E; --buis: #05080C; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--glas); color: var(--inkt);
  font-family: "Bricolage Grotesque", system-ui, sans-serif; font-optical-sizing: auto;
  font-size: 16px; line-height: 1.45;
}
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--signaal); outline-offset: 2px; border-radius: 4px; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
img { display: block; max-width: 100%; }

/* ---------- kop ---------- */
.kop {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 20px;
  padding: 12px max(16px, calc((100vw - var(--kolom)) / 2)); background: color-mix(in srgb, var(--glas) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--lijn);
}
.merk {
  font-size: 30px; font-weight: 800; font-stretch: 75%; letter-spacing: -0.02em; text-decoration: none; line-height: 1;
}
.merk span { font-weight: 300; }
.zoek { flex: 1; display: flex; max-width: 640px; margin-left: auto; }
.zoek input {
  flex: 1; min-width: 0; padding: 10px 14px; border: 1.5px solid var(--lijn); border-right: 0;
  border-radius: 999px 0 0 999px; background: var(--paneel);
}
.zoek input:focus-visible { outline: none; border-color: var(--signaal); }
.zoek button {
  width: 52px; border: 1.5px solid var(--inkt); border-radius: 0 999px 999px 0; background: var(--inkt); color: var(--glas); cursor: pointer;
}
.zoek svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; margin: auto; display: block; }
.account {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1.5px solid var(--lijn); border-radius: 999px;
  background: var(--paneel); cursor: pointer; white-space: nowrap;
}
.stip { width: 9px; height: 9px; border-radius: 50%; background: var(--lijn); }
.stip.aan { background: var(--groen); }

main { max-width: var(--kolom); margin: 0 auto; padding: 24px 16px 48px; outline: none; }
.voet { max-width: var(--kolom); margin: 0 auto; padding: 16px; color: var(--inkt-zacht); font-size: 14px; display: flex; gap: 16px; }

/* ---------- rijen ---------- */
.rij { margin: 0 0 40px; }
.rij-kop { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; }
.rij-kop h2 { margin: 0; font-size: 34px; font-weight: 700; font-stretch: 80%; letter-spacing: -0.015em; line-height: 1.05; }
.rij-kop .kanaal { width: 34px; height: 8px; border-radius: 4px; align-self: center; }
.rij-kop p { margin: 0; color: var(--inkt-zacht); font-size: 15px; }
.strook {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 22%); gap: 18px; overflow-x: auto;
  scroll-snap-type: x proximity; padding-bottom: 10px; scrollbar-width: thin;
}
.strook > * { scroll-snap-align: start; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px 18px; }

.kaart { text-decoration: none; display: block; min-width: 0; }
.plaat { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-klein); overflow: hidden; background: var(--lijn); }
.plaat img { width: 100%; height: 100%; object-fit: cover; }
.kaart:hover .plaat img { filter: brightness(1.06) saturate(1.08); }
.duur {
  position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 5px; font-size: 13px; font-weight: 600;
  background: rgba(10, 14, 20, .82); color: #fff; font-variant-numeric: tabular-nums;
}
.duur.live { background: var(--geel); color: #17202B; }
.lijst-teken { position: absolute; inset: auto 0 0 auto; height: 100%; width: 38%; background: rgba(10,14,20,.78); color: #fff;
  display: grid; place-content: center; text-align: center; font-size: 14px; font-weight: 600; padding: 8px; }
.kaart h3 {
  margin: 10px 0 3px; font-size: 16px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kaart .meta { margin: 0; color: var(--inkt-zacht); font-size: 14px; line-height: 1.35; }

/* ---------- kijken ---------- */
.kijk { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.buis { background: var(--buis); border-radius: var(--r-buis); padding: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.scherm { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.scherm video, .scherm audio { width: 100%; height: 100%; display: block; background: #000; }
.scherm.audio { display: grid; place-items: end stretch; }
.scherm.audio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(2px) brightness(.55); }
.scherm.audio audio { position: relative; height: 54px; margin: 16px; width: calc(100% - 32px); }

.testbeeld { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; }
.balken { display: grid; grid-template-columns: repeat(7, 1fr); }
.balken i:nth-child(1) { background: #E7E7E7; } .balken i:nth-child(2) { background: var(--geel); }
.balken i:nth-child(3) { background: var(--cyaan); } .balken i:nth-child(4) { background: var(--groen); }
.balken i:nth-child(5) { background: var(--signaal); } .balken i:nth-child(6) { background: #C33C2E; } .balken i:nth-child(7) { background: #2B4C9B; }
.testbeeld.bezig .balken { animation: zoeken 2.4s steps(14) infinite; }
@keyframes zoeken { 50% { filter: saturate(.55) brightness(.9); transform: translateX(-1.5%); } }
.status { background: #0B1016; color: #E7EDF2; padding: 14px 18px; display: grid; gap: 8px; }
.status strong { font-size: 18px; font-weight: 600; }
.status span { font-size: 14px; color: #9AA9B8; }
.balk { height: 6px; border-radius: 3px; background: #263342; overflow: hidden; }
.balk i { display: block; height: 100%; width: 0; background: var(--geel); transition: width .4s ease; }
.status.fout strong { color: #FF8FB8; }

.knoppenrij { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.knop {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--lijn);
  background: var(--paneel); cursor: pointer; text-decoration: none; font-weight: 600; font-size: 15px;
}
.knop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.knop.hoofd { background: var(--inkt); border-color: var(--inkt); color: var(--glas); }
.knop[aria-pressed="true"] { border-color: var(--signaal); color: var(--signaal); }
.knop:disabled { opacity: .45; cursor: not-allowed; }
.knop.stil { background: transparent; }
google-cast-launcher { width: 22px; height: 22px; display: inline-block; --connected-color: var(--signaal); --disconnected-color: currentColor; }

.titel { font-size: clamp(24px, 3vw, 34px); font-weight: 700; font-stretch: 85%; letter-spacing: -0.01em; line-height: 1.12; margin: 22px 0 6px; }
.bron { color: var(--inkt-zacht); margin: 0; }
.bron b { color: var(--inkt); font-weight: 600; }
.omschrijving { margin: 20px 0 0; padding: 16px 18px; background: var(--paneel); border-radius: var(--r-klein); border: 1px solid var(--lijn);
  white-space: pre-wrap; max-width: 75ch; font-size: 15px; overflow-wrap: anywhere; }
.omschrijving.kort { max-height: 9.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.hierna h2 { font-size: 22px; font-weight: 700; font-stretch: 80%; margin: 0 0 14px; }
.hierna .kaart { display: grid; grid-template-columns: 168px 1fr; gap: 12px; margin-bottom: 14px; }
.hierna .kaart h3 { margin-top: 0; font-size: 15px; }

/* ---------- overig ---------- */
.leeg { max-width: 52ch; margin: 64px auto; text-align: center; }
.leeg h1 { font-size: 34px; font-stretch: 80%; margin: 0 0 8px; line-height: 1.1; }
.leeg p { color: var(--inkt-zacht); margin: 0 0 20px; }
.paneel { border: 1px solid var(--lijn); border-radius: 16px; background: var(--paneel); color: var(--inkt); padding: 22px 24px; max-width: min(460px, calc(100vw - 32px)); }
.paneel::backdrop { background: rgba(10, 14, 20, .45); }
.paneel h2 { margin: 0 0 10px; font-stretch: 85%; }
.paneel p { margin: 0 0 12px; }
.knoppen { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.skelet { background: var(--lijn); border-radius: var(--r-klein); aspect-ratio: 16/9; opacity: .55; }
.melding { padding: 12px 16px; border-radius: var(--r-klein); background: var(--paneel); border-left: 4px solid var(--signaal); margin: 0 0 20px; }
table.pool { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--paneel); border-radius: var(--r-klein); overflow: hidden; }
table.pool th, table.pool td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--lijn); font-variant-numeric: tabular-nums; }
.pool-wrap { overflow-x: auto; margin-bottom: 28px; }

@media (max-width: 980px) {
  .kijk { grid-template-columns: 1fr; }
  .strook { grid-auto-columns: minmax(220px, 70%); }
}
@media (max-width: 640px) {
  .kop { flex-wrap: wrap; gap: 10px; }
  .merk { font-size: 26px; }
  .zoek { order: 3; flex-basis: 100%; max-width: none; }
  .account { margin-left: auto; padding: 6px 12px; font-size: 14px; }
  .buis { padding: 8px; border-radius: 16px; margin: 0 -8px; }
  .rij-kop h2 { font-size: 28px; }
  .hierna .kaart { grid-template-columns: 140px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .testbeeld.bezig .balken { animation: none; }
  .balk i { transition: none; }
}