/* Polibase, de hele site in het donkere Verslag-ontwerp.
   Zelfde taal als debat.html: grafiet en gebroken wit, één balk met haarlijnen, geen vakjes, partijkleur alleen waar het zegt wie er praat.
   Namen en koppen in Sofia Sans Extra Condensed, lopende tekst in Instrument Sans. De tokens zijn een kopie van style.css (die staat bij een andere bouwer in beweging). */

:root {
  color-scheme: dark;
  --bg: #111214;
  --bg1: #16171a;
  --bg2: #1b1d20;
  --bg3: #25272b;
  --line: #222428;
  --line2: #34373c;
  /* tekst: lopende tekst 12:1, tweede tekst 8:1, labels minstens 5,5:1 op de achtergrond */
  --tx: #f1f0ea;
  --tx2: #d2d0c9;
  --tx3: #aeada8;
  --tx4: #8f9094;
  --ring: #dedcd4;
  --hit: #ffd84a;
  --hit-ink: #1a1503;
  --live: #ff5d4f;
  --wash: rgba(255, 255, 255, 0.04);
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --disp: 'Sofia Sans Extra Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.9, 0.25, 1.06);
  --tbh: 52px;
  --bf: 17px; /* de maat van alle woorden in de balk */
  --bip: 9px; /* ruimte links en rechts van zo'n woord */
  /* Eén breedte voor de hele site, dezelfde als de debatpagina: links 40 px (waar het merk begint), rechts 20 px, verder alles.
     Lopende tekst (zinnen) blijft op leesmaat; breedte gaat naar titel, gegevens en foto. */
  --gl: 40px;
  --gr: 20px;
  --g2: clamp(32px, 4vw, 64px); /* ruimte tussen twee grote kolommen */
  --rail: 14rem; /* kolom links met de dag of de partij */
  --hw: 15rem; /* kolom met de spreker naast een zin */
  --measure: 44rem; /* breedte van lopende tekst: zo'n 75 tekens */
}
@media (max-width: 1320px) { :root { --hw: 13.5rem; } }
@media (max-width: 1100px) { :root { --rail: 10.5rem; } }
@media (max-width: 820px) { :root { --gl: 16px; --gr: 16px; } }

* { box-sizing: border-box; }
html { background: var(--bg); scrollbar-width: none; -webkit-text-size-adjust: 100%; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--tx2);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 3px; }
::selection { background: rgba(255, 216, 74, 0.32); color: var(--tx); }

.skip { position: fixed; left: 12px; top: -64px; z-index: 300; padding: 10px 14px; border-radius: 6px; background: var(--tx); color: #111214; font: 600 14px var(--sans); text-decoration: none; }
.skip:focus { top: 8px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- de balk ----------
   Eén balk met één lettertype, zonder vakjes. "Dit is nu actief" is overal dezelfde streep van 2 px onder het woord. */
.bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center;
  height: var(--tbh);
  padding: 0 16px 0 var(--gl);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 9px; flex: none; height: 38px; margin-right: 14px; color: var(--tx); text-decoration: none; }
.bmark { width: 3px; height: 17px; border-radius: 1px; flex: none; background: #cfcdc6; position: relative; top: -2px; }
.bw { font: 700 24px/1 var(--disp); letter-spacing: 0.012em; position: relative; top: -2px; }
.snav { display: flex; align-items: center; min-width: 0; }
.ni, .bar .ni-user { font: 500 var(--bf)/1 var(--disp); letter-spacing: 0.02em; color: var(--tx3); }
.ni { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 var(--bip); text-decoration: none; white-space: nowrap; transition: color 0.2s; }
.ni:hover { color: var(--tx); }
.ni .nl { display: inline-block; }
/* het zwaarste gewicht staat al gereserveerd, zodat een woord niet verspringt als het actief wordt */
.ni .nl::after { content: attr(data-t); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }
.ni[aria-current='page'] { color: var(--tx); }
.ni[aria-current='page'] .nl { font-weight: 600; }
.ni[aria-current='page']::after { content: ''; position: absolute; left: var(--bip); right: var(--bip); bottom: 6px; height: 2px; background: var(--tx); }
.ni:focus-visible { outline-offset: -4px; }
.ldot { flex: none; width: 5px; height: 5px; margin: -9px 0 0 2px; border-radius: 50%; background: var(--live); animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.bar-r { margin-left: auto; display: flex; align-items: center; gap: 4px; min-width: 0; }
.bar .ni-user { color: var(--tx4); max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
.bar .ni-user .nl::after { display: none; }
.bar .ni-user:hover { color: var(--tx); }
.bar .ni-user.pending { visibility: hidden; }

/* het zoekveld: een kale regel met een haarlijn eronder en een vergrootglas */
.search { position: relative; display: flex; align-items: center; height: 38px; padding: 0 2px 0 27px; }
.search::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--line2); pointer-events: none; transition: background-color 0.2s, height 0.2s; }
.search:focus-within::after { height: 2px; background: var(--tx); }
.search .si { position: absolute; left: 1px; top: 11px; color: var(--tx4); transition: color 0.2s; }
.search:focus-within .si { color: var(--tx); }
.search input { flex: 1; min-width: 0; height: 100%; padding: 0; background: none; border: 0; outline: 0; color: var(--tx); font: 500 var(--bf)/1 var(--disp); letter-spacing: 0.02em; }
.search input::placeholder { color: var(--tx4); opacity: 1; }
.search input::-webkit-search-cancel-button { display: none; }
.bsearch { width: clamp(150px, 17vw, 240px); margin-right: 14px; padding-left: 0; }
.bsearch input { padding-left: 27px; }
.bsearch .si { left: 1px; }
.bsearch:focus-within { outline: none; }

/* ---------- de pagina ---------- */
.page { width: 100%; padding: clamp(28px, 4vw, 44px) var(--gr) 120px var(--gl); }
.eyebrow { margin: 0 0 12px; font: 600 13px/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx3); }
.eyebrow .live-k { color: var(--live); }
.h1 { margin: 0; font: 600 clamp(48px, 6.4vw, 84px)/0.98 var(--disp); letter-spacing: -0.005em; color: var(--tx); }
/* kop van een pagina: de titel links, wat je kunt kiezen rechts, op één lijn */
.phead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px var(--g2); margin: 0 0 clamp(24px, 3vw, 36px); }
.phead .sub { margin: 10px 0 0; font: 500 16px/1.4 var(--sans); color: var(--tx3); }
.ptools { margin: 0; }
.live-sec { margin: clamp(28px, 3.4vw, 40px) 0 0; }

/* het grote zoekveld: Start en Zoeken */
.big { position: relative; display: flex; align-items: center; gap: 14px; padding: 6px 0 4px; }
.big::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line2); transition: background-color 0.2s; pointer-events: none; }
.big:focus-within::after { background: var(--tx); }
.big .si { flex: none; color: var(--tx4); transition: color 0.2s; width: clamp(22px, 3vw, 32px); height: clamp(22px, 3vw, 32px); }
.big:focus-within .si { color: var(--tx); }
.big input { flex: 1; min-width: 0; height: clamp(52px, 7vw, 80px); padding: 0; background: none; border: 0; outline: 0; color: var(--tx); font: 500 clamp(28px, 4.6vw, 56px)/1.1 var(--disp); letter-spacing: 0.005em; }
.big input::placeholder { color: var(--tx4); opacity: 1; }
.big input::-webkit-search-cancel-button { display: none; }
.big .go { flex: none; padding: 8px 2px; border: 0; background: none; color: var(--tx3); font: 600 20px/1 var(--disp); letter-spacing: 0.02em; transition: color 0.2s; }
.big .go:hover { color: var(--tx); }

/* kale woorden die iets kiezen: gekozen = wit met een streep, zoals de balk */
.filters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 40px; margin: 22px 0 0; }
.fg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fl { font: 600 12px/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx4); }
.opts { display: flex; align-items: flex-end; gap: 0 18px; flex-wrap: wrap; min-height: 30px; }
.opt { position: relative; height: 30px; padding: 4px 0 6px; border: 0; background: none; font: 600 var(--bf)/1.1 var(--disp); letter-spacing: 0.02em; color: var(--tx3); transition: color 0.2s; }
.opt::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; background: transparent; transition: background-color 0.2s; }
.opt:hover { color: var(--tx); }
.opt[aria-pressed='true'] { color: var(--tx); }
.opt[aria-pressed='true']::after { background: var(--tx); }
.sel { position: relative; display: inline-block; }
.sel select { appearance: none; -webkit-appearance: none; height: 30px; padding: 4px 20px 6px 0; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; background: none; color: var(--tx); font: 600 var(--bf)/1.1 var(--disp); letter-spacing: 0.02em; cursor: pointer; min-width: 7.5rem; max-width: 14rem; }
.sel select option { background: var(--bg2); color: var(--tx); }
.sel::after { content: ''; position: absolute; right: 2px; top: 13px; width: 7px; height: 4px; background: var(--tx3); clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; }
.sel:hover select, .sel:hover .bare { border-bottom-color: var(--tx3); }
.sel select:focus-visible { outline-offset: 4px; }
.sel .bare { padding-right: 20px; }
.sel .bare::-webkit-calendar-picker-indicator { display: none !important; }
.bare { width: 11.5rem; max-width: 100%; height: 30px; padding: 4px 0 6px; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; background: none; color: var(--tx); font: 600 var(--bf)/1.1 var(--disp); letter-spacing: 0.02em; transition: border-color 0.2s, box-shadow 0.2s; }
.sel .bare { width: 11.5rem; }
.bare::placeholder { color: var(--tx4); opacity: 1; font-weight: 500; }
.bare:hover { border-bottom-color: var(--tx3); }
.bare:focus { outline: 0; border-bottom-color: var(--tx); box-shadow: 0 1px 0 var(--tx); }
.bare::-webkit-search-cancel-button { display: none; }
/* telefoon: de filters staan achter het woord Filters, wat je koos blijft ernaast staan */
.ftog-row { display: none; }
.ftog { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; border: 0; background: none; font: 600 var(--bf)/1.1 var(--disp); letter-spacing: 0.02em; color: var(--tx2); }
.ftog svg { transition: transform 0.25s var(--ease); }
.ftog[aria-expanded='true'] svg { transform: rotate(180deg); }
.ftog:hover { color: var(--tx); }
.fsum { min-width: 0; margin-left: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 15px/1.4 var(--sans); color: var(--tx3); }

/* ---------- Debatten: de dag links, de debatten rechts ---------- */
.group { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0 var(--g2); margin-top: 40px; }
.group:first-child { margin-top: 0; }
.day { position: sticky; top: calc(var(--tbh) + 16px); align-self: start; margin: 0; padding-top: 12px; }
.dw { display: block; font: 650 clamp(28px, 2.6vw, 34px)/1.05 var(--disp); letter-spacing: 0.005em; color: var(--tx); }
.dd { display: block; margin-top: 4px; font: 500 15px/1.3 var(--sans); color: var(--tx3); }
.gb { min-width: 0; }
.live-grp { margin: 0 0 40px; }
.live-grp .live-k { color: var(--live); }
.rows { margin: 0; padding: 0; list-style: none; }
.row { position: relative; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 7.5rem 6.5rem; align-items: baseline; gap: 0 24px; padding: 14px 0 15px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.rows > .row:last-child { border-bottom: 1px solid var(--line); }
a.row { transition: background-color 0.15s, box-shadow 0.15s; }
a.row:hover { background: var(--wash); box-shadow: -14px 0 0 var(--wash), 14px 0 0 var(--wash); }
a.row:focus-visible { outline-offset: 2px; border-radius: 2px; }
.row .d { font: 500 15px/1.3 var(--sans); color: var(--tx3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row .t { font: 600 clamp(22px, 2.2vw, 27px)/1.12 var(--disp); letter-spacing: 0.003em; color: var(--tx); overflow-wrap: anywhere; }
.row .k { font: 500 15px/1.3 var(--sans); color: var(--tx3); white-space: nowrap; }
.row .m { font: 500 15px/1.3 var(--sans); color: var(--tx3); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.row .s { grid-column: 2; margin-top: 3px; font: 500 14.5px/1.4 var(--sans); color: var(--tx3); }
.row .s .sep { margin: 0 7px; color: var(--tx4); }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--live); vertical-align: 2px; animation: pulse 2.6s ease-in-out infinite; }
.row.is-live { grid-template-columns: 4.6rem minmax(0, 1fr) auto; }
.row.is-live .d { color: var(--live); font-weight: 600; }
/* korte onderdelen: kleiner en stiller, onder de echte debatten van die dag */
.quiet { margin: 6px 0 0; }
.quiet summary { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; cursor: pointer; list-style: none; font: 600 var(--bf)/1.1 var(--disp); letter-spacing: 0.02em; color: var(--tx3); }
.quiet summary::-webkit-details-marker { display: none; }
.quiet summary::after { content: ''; width: 7px; height: 4px; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); opacity: 0.7; transition: transform 0.25s var(--ease); }
.quiet[open] summary::after { transform: rotate(180deg); }
.quiet summary:hover { color: var(--tx); }
.quiet summary:focus-visible { outline-offset: 2px; }
.row.is-quiet { padding: 9px 0 10px; }
.row.is-quiet .t { font: 500 20px/1.2 var(--disp); color: var(--tx2); }
.row.is-quiet .d, .row.is-quiet .k, .row.is-quiet .m { font-size: 14px; }
.tailrow { padding-left: calc(var(--rail) + var(--g2)); }

/* ---------- Start: het uitgelichte debat links, de nieuwste debatten rechts ---------- */
.start { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 var(--g2); align-items: start; margin-top: clamp(32px, 4.4vw, 56px); }
.feat-h { display: block; padding: 2px 0 0; color: inherit; text-decoration: none; }
.feat-h .t { display: block; font: 600 clamp(52px, 6.6vw, 96px)/0.94 var(--disp); letter-spacing: -0.005em; color: var(--tx); text-wrap: balance; }
.feat-h .s { display: block; margin-top: 18px; font: 500 16px/1.4 var(--sans); color: var(--tx3); }
.feat-h:hover .t { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 9px; text-decoration-color: var(--tx3); }
.chaps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 7), auto); grid-auto-flow: column; gap: 0 36px; margin: 30px 0 0; padding: 0; list-style: none; }
.chaps li a { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: 0 6px; align-items: baseline; height: 100%; padding: 7px 0; border-top: 1px solid var(--line); color: var(--tx2); text-decoration: none; font: 500 16px/1.35 var(--sans); transition: color 0.15s; }
.chaps li a:hover { color: var(--tx); }
.chaps li a b { font: 700 15px/1.2 var(--disp); letter-spacing: 0.04em; color: var(--tx4); font-variant-numeric: tabular-nums; }
.rc { display: block; padding: 15px 0 16px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; transition: background-color 0.15s, box-shadow 0.15s; }
.recent .rc:last-of-type { border-bottom: 1px solid var(--line); }
.rc:hover { background: var(--wash); box-shadow: -14px 0 0 var(--wash), 14px 0 0 var(--wash); }
.rc:focus-visible { outline-offset: 2px; border-radius: 2px; }
.rc .t { display: block; font: 600 clamp(24px, 2.1vw, 29px)/1.1 var(--disp); letter-spacing: 0.003em; color: var(--tx); overflow-wrap: anywhere; }
.rc .s { display: block; margin-top: 5px; font: 500 14.5px/1.4 var(--sans); color: var(--tx3); font-variant-numeric: tabular-nums; }

/* ---------- uitspraken (Zoeken en Sprekers): spreker, zin, debat ---------- */
.hits { margin: 0; padding: 0; list-style: none; }
#out .hits { margin-top: 12px; }
.count { margin: 28px 0 0; font: 500 15px/1.4 var(--sans); color: var(--tx3); }
.hit { position: relative; display: grid; grid-template-columns: var(--hw) minmax(0, var(--measure)) minmax(11rem, 1fr); gap: 0 var(--g2); padding: 22px 0 24px; border-top: 1px solid var(--line); animation: rise 0.32s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms); }
.hits > li:last-child .hit { border-bottom: 1px solid var(--line); }
.who { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; align-self: start; min-width: 0; color: inherit; text-decoration: none; }
.who .av { width: 56px; height: 56px; }
.who .wn { display: flex; flex-direction: column; min-width: 0; }
.who:not(.has-av) .wn { padding-left: 10px; border-left: 3px solid var(--pc, var(--tx4)); }
.who .n { font: 650 22px/1.08 var(--disp); letter-spacing: 0.008em; color: var(--tx); overflow-wrap: anywhere; }
a.who:hover .n { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--tx3); }
.who .p { margin-top: 3px; font: 500 13.5px/1.3 var(--sans); color: var(--tx3); }
a.who:focus-visible { outline-offset: 4px; }
/* een kleine foto, of de letters van de naam, altijd met de partijkleur als streep links */
.av { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 3px; background: var(--bg2); }
.av b { font: 650 17px/1 var(--disp); letter-spacing: 0.05em; color: var(--tx3); }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.av::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pc, var(--tx4)); z-index: 2; }
.av.sm { width: 38px; height: 38px; }
/* uitgesneden Kamerportret: hoofd en schouders op een vlak dat onderaan de partijkleur krijgt */
.av.is-cut { background: radial-gradient(120% 90% at 50% 110%, color-mix(in srgb, var(--pc, var(--tx4)) 40%, var(--bg2)) 0%, var(--bg2) 70%); }
.av.is-cut img { inset: auto; left: -18%; top: -22%; width: 136%; height: auto; object-fit: initial; }
.av.is-cut::after { top: auto; right: 0; width: auto; height: 2px; }
.av.sm b { font-size: 15px; }
.body { min-width: 0; }
.sent { margin: 0; font: 400 19.5px/1.55 var(--sans); color: var(--tx); text-wrap: pretty; }
.sent .gap { color: var(--tx4); }
.meta { grid-column: 3; align-self: start; margin: 0; padding-top: 3px; font: 500 14.5px/1.4 var(--sans); color: var(--tx3); font-variant-numeric: tabular-nums; }
.meta span { display: block; }
.meta .mt { color: var(--tx2); overflow-wrap: anywhere; }
.meta .md { margin-top: 3px; }
.meta .ms { margin-bottom: 3px; color: var(--tx2); font-weight: 600; }
.hit .go-main { color: inherit; text-decoration: none; }
/* de hele rij is klikbaar via de zin; de naam van de spreker is een eigen link erboven */
.hit .go-main::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.hit:hover { background: var(--wash); box-shadow: -14px 0 0 var(--wash), 14px 0 0 var(--wash); }
.hit .go-main:focus-visible { outline: none; }
.hit:has(.go-main:focus-visible) { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 3px; }
.out { display: inline-block; margin-left: 6px; vertical-align: -1px; color: var(--tx4); }
/* markering van een gevonden woord: dezelfde rustige taal als de debatpagina (lichte tint en een streep eronder), niet vet, niet gevuld.
   De zin blijft de luidste; het woord is er alleen in terug te vinden. */
mark { background: none; color: inherit; }
.m-ex { color: inherit; background: rgba(255, 216, 74, 0.12); border-radius: 2px; box-shadow: inset 0 -2px 0 rgba(255, 216, 74, 0.8); }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* een debat met een zin van de spreker */
.dwho { display: flex; flex-direction: column; gap: 4px; align-self: start; min-width: 0; padding-top: 1px; }
.drow:hover .dt { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--tx3); }
.dwho .dd { display: block; margin: 0; font: 500 14.5px/1.3 var(--sans); color: var(--tx3); font-variant-numeric: tabular-nums; }
.dwho .dt { font: 650 22px/1.1 var(--disp); letter-spacing: 0.005em; color: var(--tx); overflow-wrap: anywhere; }
.drow .sent { font-size: 18.5px; color: var(--tx2); }

/* ---------- de Meer-knop, meldingen, leeg ---------- */
.more { display: inline-flex; align-items: center; gap: 8px; margin: 26px 0 0; padding: 8px 0; border: 0; background: none; color: var(--tx2); font: 650 22px/1 var(--disp); letter-spacing: 0.02em; text-decoration: none; transition: color 0.2s; }
.more:hover { color: var(--tx); }
.more svg { transition: transform 0.25s var(--ease); }
.more:hover svg { transform: translateY(2px); }
a.more:hover svg { transform: translateX(3px); }
.recent .more, .feat-col .more { margin-top: 18px; }
.more-s { font-size: 19px; color: var(--tx3); }
.note { margin: 26px 0 0; font: 400 18px/1.55 var(--sans); color: var(--tx2); max-width: 40rem; }
.note b { color: var(--tx); font-weight: 600; }
.note a, .lnk { color: var(--tx); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--tx4); transition: text-decoration-color 0.2s; }
.note a:hover, .lnk:hover { text-decoration-color: var(--tx); }
.note .lnk-b { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--tx); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--tx4); }
.note .lnk-b:hover { text-decoration-color: var(--tx); }
.alts { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 14px 0 0; padding: 0; list-style: none; }
.alts a, .alts button { padding: 4px 0; border: 0; background: none; font: 650 20px/1.1 var(--disp); letter-spacing: 0.02em; color: var(--tx2); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: var(--line2); }
.alts a:hover, .alts button:hover { color: var(--tx); text-decoration-color: var(--tx); }
.err { margin: 26px 0 0; font: 500 18px/1.5 var(--sans); color: var(--tx); }
.err a, .err button { margin-left: 8px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--tx); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.status { margin: 22px 0 0; font: 500 15px/1.4 var(--sans); color: var(--tx3); min-height: 1.4em; }

/* ---------- skeletons in plaats van een spinner ---------- */
.sk { display: block; border-radius: 3px; background: linear-gradient(90deg, var(--bg2) 0%, var(--bg3) 50%, var(--bg2) 100%); background-size: 220% 100%; animation: sk 1.5s linear infinite; }
@keyframes sk { from { background-position: 120% 0; } to { background-position: -100% 0; } }
.sk-row { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 6rem; gap: 0 24px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); min-height: 62px; }
.sk-row .sk { height: 14px; }
.sk-row .sk.t { height: 24px; }
.sk-rc { padding: 18px 0; border-top: 1px solid var(--line); }
.sk-rc .sk.t { width: 80%; height: 24px; margin-bottom: 10px; }
.sk-rc .sk.b { width: 50%; height: 13px; }
.sk-hit { display: grid; grid-template-columns: var(--hw) minmax(0, var(--measure)) minmax(11rem, 1fr); gap: 8px var(--g2); padding: 24px 0 26px; border-top: 1px solid var(--line); min-height: 118px; }
.sk-hit .sk { height: 16px; margin-bottom: 9px; }
.sk-hit .sk.a { width: 8rem; height: 22px; }
.sk-hit .sk.b { width: 5rem; height: 13px; }
.sk-hit .sk.c { width: 80%; height: 14px; }
.sk-hit .sk.l1 { width: 100%; }
.sk-hit .sk.l2 { width: 86%; }
.sk-hit .sk.l3 { width: 42%; height: 12px; margin-top: 14px; }
.sk-cap { margin: 12px 0 0; font: 500 15px/1.4 var(--sans); color: var(--tx3); }
.sk.photo { width: clamp(96px, 12vw, 160px); aspect-ratio: 1; }

/* ---------- Sprekers: de partij links, de namen met foto rechts ---------- */
.pg { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0 var(--g2); padding: 22px 0 26px; border-top: 1px solid var(--line); }
.pg-h { align-self: start; margin: 0; padding: 4px 0 4px 12px; border-left: 4px solid var(--pc, var(--tx4)); font: 650 clamp(26px, 2.6vw, 32px)/1.05 var(--disp); letter-spacing: 0.005em; color: var(--tx); overflow-wrap: anywhere; }
.names { column-width: 14.5rem; column-gap: 28px; margin: 0; padding: 0; list-style: none; } /* van boven naar beneden, dan de volgende kolom: alfabetisch te lezen */
.names li { break-inside: avoid; }
.names a { display: flex; align-items: center; gap: 12px; padding: 5px 0; color: var(--tx2); text-decoration: none; font: 500 18px/1.25 var(--sans); transition: color 0.15s; }
.names a span { min-width: 0; overflow-wrap: anywhere; }
.names a:hover { color: var(--tx); }
.names a:hover span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--tx4); }
.names a:focus-visible { outline-offset: 2px; }
.others { margin-top: 40px; }
.prof { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 clamp(20px, 3vw, 40px); align-items: end; }
.prof.no-photo { grid-template-columns: minmax(0, 1fr) auto; }
.photo { display: block; width: clamp(96px, 12vw, 160px); height: auto; aspect-ratio: 1; border-radius: 4px; object-fit: cover; background: var(--bg2); }
.prof .h1 { font-size: clamp(44px, 6vw, 76px); }
.prof .pt { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font: 600 21px/1.1 var(--disp); letter-spacing: 0.02em; color: var(--tx2); }
.prof .pt i { width: 4px; height: 20px; border-radius: 1px; background: var(--pc, var(--tx4)); flex: none; }
.prof .bio { margin: 14px 0 0; max-width: 38rem; font: 400 17px/1.6 var(--sans); color: var(--tx2); }
.tools { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0; padding-bottom: 4px; }
.tools a { padding: 4px 0; font: 650 20px/1.1 var(--disp); letter-spacing: 0.02em; color: var(--tx2); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: var(--line2); }
.tools a:hover { color: var(--tx); text-decoration-color: var(--tx); }
.sub { margin: clamp(36px, 5vw, 52px) 0 0; }
.sub-h { margin: 0 0 12px; font: 600 13px/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx3); }
.sub .hits { margin-top: 0; }
.eyebrow a { color: inherit; text-decoration: none; transition: color 0.2s; }
.eyebrow a:hover { color: var(--tx); text-decoration: underline; text-underline-offset: 4px; }
.back { display: inline-flex; align-items: center; gap: 8px; }
.back::before { content: ''; width: 6px; height: 6px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.8; }
#live { scroll-margin-top: calc(var(--tbh) + 28px); }

/* ---------- beeld uit de video en de strook van wie wanneer sprak (Start, Debatten, Sprekers) ---------- */
.still { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg2); }
.still .sk { position: absolute; inset: 0; border-radius: 0; }
.still canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) contrast(1.06); animation: fade 0.8s ease both; transition: transform 0.6s var(--ease), filter 0.4s; }
a:hover .still canvas { transform: scale(1.04); filter: none; }
.still.none { background: linear-gradient(135deg, var(--bg2), var(--bg1)); }
.still.none .sk { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.band { display: block; width: 100%; height: 10px; }
/* Debatten: een rij met beeld rechts en de strook onder de titel */
.row.has-still { grid-template-columns: 4.6rem minmax(0, 1fr) 7.5rem 6.5rem clamp(160px, 15vw, 230px); align-items: start; padding: 18px 0 20px; }
.row.has-still .d, .row.has-still .k, .row.has-still .m { padding-top: 6px; }
.row.has-still .band { grid-column: 2 / 5; grid-row: 2; align-self: end; height: 8px; margin-top: 14px; }
.row.has-still .rs { grid-column: 5; grid-row: 1 / span 2; }

/* ---------- Sprekers: een wand met portretten per fractie ---------- */
.pg-h { display: flex; flex-direction: column; gap: 6px; }
.pg-c { font: 500 15px/1.2 var(--sans); letter-spacing: 0; color: var(--tx3); }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); grid-auto-flow: dense; gap: 18px 12px; margin: 0; padding: 0; list-style: none; }
.mp a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.mp .ph, .pf { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: radial-gradient(120% 75% at 50% 100%, color-mix(in srgb, var(--pc, var(--tx4)) 34%, var(--bg1)) 0%, var(--bg1) 72%); }
.mp .ph img, .pf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform-origin: 50% 100%; transition: filter 0.4s ease, transform 0.6s var(--ease); }
.mp .ph.is-cut img, .pf.is-cut img { filter: saturate(0.85) brightness(0.94); -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); }
.mp .ph.is-photo img, .pf.is-photo img { filter: grayscale(1) contrast(1.06) brightness(0.85); }
.mp .ph b, .pf b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(30px, 2.8vw, 44px)/1 var(--disp); letter-spacing: 0.03em; color: color-mix(in srgb, var(--pc, var(--tx4)) 55%, var(--tx4)); }
.mp .ph:not(.no-photo) b, .pf:not(.no-photo) b { display: none; }
.mp .ph::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pc, var(--tx4)); }
.mp a:hover .ph img, .mp a:focus-visible .ph img { filter: none; transform: scale(1.045); }
.mp .mn { margin-top: 9px; font: 600 17px/1.1 var(--disp); letter-spacing: 0.01em; color: var(--tx2); text-wrap: balance; transition: color 0.15s; }
.mp a:hover .mn { color: var(--tx); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
/* de fractievoorzitter: dubbel zo groot, vooraan */
.mp.is-lead { grid-column: span 2; grid-row: span 2; }
.mp.is-lead .mn { font-size: 22px; color: var(--tx); }
.mp.is-lead .ph b { font-size: clamp(56px, 5vw, 80px); }
.mp-sk { display: block; aspect-ratio: 3 / 4; border-radius: 0; }

/* ---------- Sprekers, één spreker: een podium met de naam groot en het portret ---------- */
.prof.stage { position: relative; isolation: isolate; grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 400px); gap: 0 var(--g2); align-items: end; margin-top: 8px; border-bottom: 1px solid var(--line); }
.pglow { position: absolute; z-index: -1; right: -6%; bottom: 0; width: clamp(420px, 52vw, 820px); height: 120%; pointer-events: none; background: radial-gradient(closest-side at 50% 72%, color-mix(in srgb, var(--pc, var(--tx4)) 30%, transparent) 0%, color-mix(in srgb, var(--pc, var(--tx4)) 8%, transparent) 55%, transparent 100%); }
.prof.stage .pw { padding: 24px 0 clamp(32px, 4vw, 56px); min-width: 0; }
.prof.stage .h1 { font: 700 clamp(72px, 10.4vw, 176px)/0.86 var(--disp); letter-spacing: -0.01em; text-wrap: balance; }
.prof.stage .pt { margin-top: 22px; font-size: 24px; }
.prof.stage .pt i { background: var(--pc, var(--tx4)); height: 22px; }
.prof .role { margin: 10px 0 0; font: 600 13px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx3); }
.prof.stage .tools { margin-top: 26px; }
.prof.stage .tools a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.prof.stage .tools a:hover { text-decoration: underline; text-underline-offset: 5px; }
.pf { background: none; }
.pf b { font-size: clamp(90px, 10vw, 160px); }
.dwho .still.ds { width: 100%; margin-bottom: 10px; }

/* ---------- smaller scherm ---------- */
@media (max-width: 1100px) {
  .hit, .sk-hit { grid-template-columns: var(--hw) minmax(0, 1fr); }
  .meta { grid-column: 2; padding-top: 8px; }
  .meta span { display: inline; }
  .meta span + span::before { content: ' · '; color: var(--tx4); }
  .meta .ms, .meta .md { margin: 0; }
  .sk-hit > :nth-child(3) { display: none; }
}
@media (max-width: 960px) {
  .start { grid-template-columns: minmax(0, 1fr); gap: 48px 0; }
  .row { grid-template-columns: 4.6rem minmax(0, 1fr) 6rem; }
  .row .k { display: none; }
  .row.has-still { grid-template-columns: 4.6rem minmax(0, 1fr) 6rem 150px; }
  .row.has-still .band { grid-column: 2 / 4; }
  .row.has-still .rs { grid-column: 4; }
}
@media (max-width: 820px) {
  .group, .pg { grid-template-columns: minmax(0, 1fr); gap: 10px 0; }
  .day { position: static; padding-top: 0; display: flex; align-items: baseline; gap: 12px; }
  .dd { margin-top: 0; }
  .tailrow { padding-left: 0; }
  .hit, .sk-hit { grid-template-columns: minmax(0, 1fr); gap: 12px 0; }
  .meta { grid-column: 1; padding-top: 0; }
  .meta span { display: block; }
  .meta span + span::before { content: none; }
  .meta .md { margin-top: 2px; }
  .sent { font-size: 18.5px; }
  .names { column-width: 13rem; }
  .pg-h { padding-top: 0; padding-bottom: 0; }
  .chaps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}
@media (max-width: 640px) {
  .page { padding-top: 22px; }
  .bar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'brand user' 'nav nav'; height: auto; padding-top: 4px; padding-bottom: 0; row-gap: 0; }
  .brand { grid-area: brand; margin-right: 0; }
  .bar-r { grid-area: user; }
  .snav { grid-area: nav; margin: 0 calc(-1 * var(--bip)); overflow-x: auto; scrollbar-width: none; }
  .ni { height: 44px; }
  .ni[aria-current='page']::after { bottom: 7px; }
  .bar .ni-user { height: 44px; }
  .row { grid-template-columns: 3.6rem auto minmax(0, 1fr); gap: 2px 0; padding: 13px 0 14px; }
  .sk-row { grid-template-columns: 3.6rem minmax(0, 1fr); gap: 2px 14px; padding: 13px 0 14px; }
  .row .d { grid-row: 1 / span 2; padding-right: 14px; font-size: 14px; }
  .row .t { grid-column: 2 / -1; }
  .row .k { display: block; grid-column: 2; font-size: 14px; }
  .row .k::after { content: '·'; margin: 0 6px; color: var(--tx4); }
  .row .m { grid-column: 3; text-align: left; font-size: 14px; }
  .row.is-live { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .row.is-live .d { grid-row: auto; padding-right: 0; }
  .row.is-live .t { grid-column: 2; }
  .row.is-live .m { grid-column: 2; }
  .row .s { grid-column: 2 / -1; }
  .sk-row { grid-template-columns: minmax(0, 1fr) 4rem; }
  .sk-row .sk:first-child { display: none; }
  .row.is-quiet .m { display: none; }
  .row.has-still { grid-template-columns: 3.6rem auto minmax(0, 1fr); padding: 16px 0 18px; }
  .row.has-still .rs { grid-column: 1 / -1; grid-row: 1; margin-bottom: 12px; }
  .row.has-still .d { grid-row: 2 / span 2; padding-top: 4px; }
  .row.has-still .t { grid-row: 2; }
  .row.has-still .k, .row.has-still .m { grid-row: 3; padding-top: 2px; }
  .row.has-still .band { grid-column: 2 / -1; grid-row: 4; }
  .row.is-quiet .k::after { content: none; }
  .big .go { display: none; }
  .big input { font-size: 24px; letter-spacing: 0; }
  .big { gap: 10px; }
  .ftog-row { display: flex; align-items: baseline; margin-top: 8px; }
  #filters { display: none; margin-top: 4px; }
  #filters.open { display: flex; }
  .filters { gap: 18px 28px; }
  .phead { gap: 12px; margin-bottom: 18px; }
  .phead .filters { margin-top: 0; }
  .sel select { min-width: 6.5rem; }
  .names { column-width: auto; column-count: 1; }
  .names a { padding: 6px 0; }
  .prof { grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; align-items: center; }
  .prof.no-photo { grid-template-columns: minmax(0, 1fr); }
  .prof .tools { grid-column: 1 / -1; margin-top: 14px; padding-bottom: 0; }
  .photo, .sk.photo { width: 76px; }
  .prof .h1 { font-size: 40px; }
  .prof.stage { grid-template-columns: minmax(0, 1fr) 40vw; gap: 0 12px; }
  .prof.stage .h1 { font-size: clamp(40px, 12vw, 56px); }
  .prof.stage .pw { padding-bottom: 24px; }
  .prof.stage .pt { font-size: 19px; margin-top: 14px; }
  .prof.stage .tools { grid-column: auto; margin-top: 16px; }
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
  .mp .mn { font-size: 15.5px; }
  .mp.is-lead .mn { font-size: 19px; }
  .dwho .still.ds { max-width: 100%; }
  .prof .pt { margin-top: 6px; font-size: 18px; }
  .feat-h .t { font-size: clamp(44px, 14vw, 60px); }
  .chaps { display: none; }
  .feat-col .more { margin-top: 14px; }
  .rc { padding: 13px 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hit { animation: none; }
  .ldot, .live-dot { animation: none; }
  .sk { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ================= Sprekers overzicht: halve cirkel, top 3 van de week, groepsfoto per fractie ================= */
.sec-k { margin: 0; font: 600 13px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx3); }
.sp-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; margin: 0 0 clamp(56px, 7vw, 100px); }
.sp-h1 { justify-self: start; font-size: clamp(64px, 9vw, 150px); text-transform: uppercase; line-height: 0.86; }
#hemi { width: min(100%, 1040px); margin-top: clamp(-40px, -2vw, 0px); }
.hemi-sk { display: block; width: 100%; aspect-ratio: 2 / 1; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.hemi-fig { position: relative; }
.hemi-svg { display: block; width: 100%; height: auto; overflow: visible; }
.seat circle { fill: var(--pc); opacity: 0.92; transition: opacity 0.25s ease, transform 0.35s var(--ease); transform-box: fill-box; transform-origin: center; }
.seat { outline: none; animation: seatIn 0.6s var(--ease) both; animation-delay: calc(var(--i) * 4ms); }
@keyframes seatIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.seat.lead circle { stroke: var(--tx); stroke-width: 3; stroke-opacity: 0.85; }
.hemi-svg.has-hover .seat circle { opacity: 0.22; }
.hemi-svg[data-g="SP"] .seat[data-g="SP"] circle, .hemi-svg[data-g="PvdD"] .seat[data-g="PvdD"] circle, .hemi-svg[data-g="PRO"] .seat[data-g="PRO"] circle, .hemi-svg[data-g="GLPVDA"] .seat[data-g="GLPVDA"] circle, .hemi-svg[data-g="PVDA"] .seat[data-g="PVDA"] circle, .hemi-svg[data-g="DENK"] .seat[data-g="DENK"] circle, .hemi-svg[data-g="Volt"] .seat[data-g="Volt"] circle, .hemi-svg[data-g="D66"] .seat[data-g="D66"] circle, .hemi-svg[data-g="50PLUS"] .seat[data-g="50PLUS"] circle, .hemi-svg[data-g="CU"] .seat[data-g="CU"] circle, .hemi-svg[data-g="CDA"] .seat[data-g="CDA"] circle, .hemi-svg[data-g="BBB"] .seat[data-g="BBB"] circle, .hemi-svg[data-g="VVD"] .seat[data-g="VVD"] circle, .hemi-svg[data-g="SGP"] .seat[data-g="SGP"] circle, .hemi-svg[data-g="JA21"] .seat[data-g="JA21"] circle, .hemi-svg[data-g="Keijzer"] .seat[data-g="Keijzer"] circle, .hemi-svg[data-g="Markuszower"] .seat[data-g="Markuszower"] circle, .hemi-svg[data-g="PVV"] .seat[data-g="PVV"] circle, .hemi-svg[data-g="FVD"] .seat[data-g="FVD"] circle, .hemi-svg[data-g] .seat.hot circle { opacity: 1; }
.seat.hot circle { transform: scale(1.32); }
.seat:focus-visible circle { stroke: var(--tx); stroke-width: 4; }
/* het midden van de boog: het aantal zetels, of het gezicht van de zetel die je aanwijst */
.hemi-mid { position: absolute; left: 50%; bottom: 0; width: 44%; height: 47%; transform: translateX(-50%); display: grid; place-items: end center; pointer-events: none; }
.hemi-idle { display: flex; flex-direction: column; align-items: center; padding-bottom: 2%; animation: fade 0.4s ease both; }
.hemi-idle b { font: 700 clamp(72px, 11vw, 168px)/0.8 var(--disp); color: var(--tx); letter-spacing: -0.01em; }
.hemi-idle span { margin-top: 10px; font: 600 13px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx3); }
.hemi-card { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: flex-end; color: inherit; text-decoration: none; }
.hemi-card.on { display: flex; animation: fade 0.25s ease both; }
.hc-ph { position: relative; display: block; height: 74%; width: auto; aspect-ratio: 3 / 4; flex: none; overflow: hidden; background: radial-gradient(closest-side at 50% 80%, color-mix(in srgb, var(--pc) 42%, transparent) 0%, transparent 100%); }
.hc-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
.hc-ph b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(48px, 6vw, 90px)/1 var(--disp); color: color-mix(in srgb, var(--pc) 60%, var(--tx4)); }
.hc-ph:not(.no-photo) b { display: none; }
.hc-n { margin-top: -6px; font: 650 clamp(22px, 2.4vw, 34px)/1 var(--disp); color: var(--tx); text-align: center; text-wrap: balance; }
.hc-p { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font: 600 14px/1 var(--sans); color: var(--tx3); }
.hc-p i { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); }
.hemi-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 26px 0 0; padding: 0; list-style: none; }
.hemi-keys a { display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; color: var(--tx3); text-decoration: none; font: 600 15px/1 var(--sans); transition: color 0.15s; }
.hemi-keys i { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); }
.hemi-keys em { font-style: normal; font-weight: 500; color: var(--tx4); font-variant-numeric: tabular-nums; }
.hemi-keys a:hover, .hemi-keys a:focus-visible { color: var(--tx); }

/* top 3 van de week: groot uitgesneden, een gloed in de partijkleur, een balk voor de spreektijd */
.tops { margin: 0 0 clamp(64px, 8vw, 120px); }
.tops .sec-k { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.tvs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.tv a { position: relative; display: flex; flex-direction: column; color: inherit; text-decoration: none; isolation: isolate; }
.tv-glow { position: absolute; z-index: -1; left: -10%; right: -10%; top: 8%; height: 80%; background: radial-gradient(closest-side at 50% 70%, color-mix(in srgb, var(--pc) 34%, transparent) 0%, color-mix(in srgb, var(--pc) 8%, transparent) 60%, transparent 100%); transition: opacity 0.4s; opacity: 0.85; }
.tv a:hover .tv-glow { opacity: 1; }
.tv-r { position: absolute; z-index: -1; left: 0; top: 4%; font: 700 clamp(120px, 15vw, 240px)/0.8 var(--disp); color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--pc) 55%, transparent); }
.tv-ph { position: relative; display: block; width: 86%; margin-left: auto; aspect-ratio: 3 / 4; overflow: hidden; }
.tv-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform-origin: 50% 100%; transition: transform 0.7s var(--ease); -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%); mask-image: linear-gradient(to bottom, #000 76%, transparent 100%); }
.tv a:hover .tv-ph img { transform: scale(1.03); }
.tv-ph b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(64px, 8vw, 120px)/1 var(--disp); color: color-mix(in srgb, var(--pc) 60%, var(--tx4)); }
.tv-ph:not(.no-photo) b { display: none; }
.tv-b { display: flex; flex-direction: column; margin-top: -8px; padding-top: 14px; border-top: 3px solid var(--pc); }
.tv-n { font: 650 clamp(26px, 2.8vw, 40px)/1 var(--disp); color: var(--tx); }
.tv a:hover .tv-n { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.tv-p { margin-top: 5px; font: 600 14px/1.2 var(--sans); color: var(--tx3); }
.tv-t { display: flex; align-items: center; gap: 10px; margin-top: 14px; font: 500 14px/1 var(--sans); color: var(--tx3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tv-t i { flex: 1; height: 3px; background: var(--line); position: relative; }
.tv-t i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); background: var(--pc); }
.sk-tv .sk { display: block; aspect-ratio: 3 / 4.4; }

/* per fractie: een band in de partijkleur */
.sp-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sp-bar .ptools { margin: 0; }
.fb { --lead: clamp(170px, 17vw, 270px); position: relative; display: grid; grid-template-columns: clamp(130px, 13vw, 200px) var(--lead) minmax(0, 1fr); align-items: end; gap: 0 clamp(14px, 2vw, 32px); padding: clamp(28px, 3vw, 44px) 0 0; border-bottom: 1px solid var(--line); isolation: isolate; scroll-margin-top: 90px; }
.fb::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to right, color-mix(in srgb, var(--pc) 16%, transparent) 0%, color-mix(in srgb, var(--pc) 4%, transparent) 45%, transparent 80%); -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000 0%, transparent 100%); }
.fb.no-lead { grid-template-columns: clamp(130px, 13vw, 200px) minmax(0, 1fr); }
.fb-m { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: 0 0 22px; border-left: 4px solid var(--pc); padding-left: 14px; }
.fb-c { font: 700 clamp(72px, 8vw, 128px)/0.8 var(--disp); color: var(--pc); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.fb-n { margin: 14px 0 0; font: 650 clamp(20px, 1.9vw, 26px)/1.05 var(--disp); color: var(--tx); text-wrap: balance; overflow-wrap: anywhere; }
.fb .ph { position: relative; display: block; aspect-ratio: 3 / 4; }
.fb .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); }
.fb .ph.is-photo { overflow: hidden; border-radius: 50% 50% 0 0; }
.fb .ph.is-photo img { filter: grayscale(1) contrast(1.06) brightness(0.85); }
.fb .ph.no-photo { background: radial-gradient(closest-side at 50% 70%, color-mix(in srgb, var(--pc) 34%, var(--bg2)) 0%, transparent 100%); }
.fb .ph b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(28px, 2.6vw, 44px)/1 var(--disp); color: color-mix(in srgb, var(--pc) 60%, var(--tx4)); }
.fb .ph:not(.no-photo) b { display: none; }
.fb-lead { position: relative; display: block; color: inherit; z-index: 1; }
.fb-lead .ph b { font-size: clamp(54px, 5vw, 84px); }
/* groepsfoto: de koppen een beetje over elkaar, achterste rij eerst */
.crowd { --hw: clamp(84px, 7.4vw, 124px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; align-self: end; margin: 0; padding: calc(var(--hw) * 0.46) 0 0 calc(var(--hw) * 0.28); list-style: none; }
.crowd li { width: var(--hw); margin: calc(var(--hw) * -0.46) 0 0 calc(var(--hw) * -0.28); position: relative; }
.crowd a, .fb-lead { display: block; outline: none; transition: transform 0.35s var(--ease); }
.crowd a .ph img, .fb-lead .ph img { transition: filter 0.3s ease; filter: saturate(0.82) brightness(0.9); }
.crowd a:hover, .crowd a:focus-visible { transform: translateY(-10px); position: relative; z-index: 5; }
.crowd a:hover .ph img, .crowd a:focus-visible .ph img, .fb-lead:hover .ph img, .fb-lead:focus-visible .ph img { filter: none; }
.crowd:hover a:not(:hover) .ph img { filter: saturate(0.5) brightness(0.62); }
/* de naam pas bij aanwijzen */
.crowd a::after, .fb-lead::after { content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% - 4px); transform: translate(-50%, 6px); padding: 5px 9px; border-radius: 3px; background: var(--tx); color: #111214; font: 600 14px/1.1 var(--sans); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.25s var(--ease); z-index: 6; }
.fb-lead::after { bottom: auto; top: 8px; }
.crowd a:hover::after, .crowd a:focus-visible::after, .fb-lead:hover::after, .fb-lead:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.crowd a:focus-visible .ph, .fb-lead:focus-visible .ph { outline: 2px solid var(--tx); outline-offset: 2px; }

.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 0 clamp(20px, 3vw, 44px); }
.fb.sm { --lead: clamp(120px, 10vw, 150px); grid-template-columns: 5.5rem var(--lead) minmax(0, 1fr); gap: 0 12px; padding-top: 26px; }
.fb.sm.no-lead { grid-template-columns: 5.5rem minmax(0, 1fr); }
.fb.sm .fb-c { font-size: clamp(56px, 5vw, 80px); }
.fb.sm .fb-n { font-size: 19px; }
.fb.sm .fb-m { padding-bottom: 16px; padding-left: 10px; }
.fb.sm .crowd { --hw: clamp(76px, 6vw, 96px); justify-content: flex-start; }
.fb.sm::before { background: linear-gradient(to right, color-mix(in srgb, var(--pc) 14%, transparent) 0%, transparent 70%); }
@media (max-width: 960px) {
  .tvs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .tv-r { font-size: clamp(80px, 13vw, 140px); }
  .fb { grid-template-columns: minmax(0, 1fr) var(--lead); grid-template-rows: auto auto; }
  .fb-m { grid-column: 1; grid-row: 1; align-self: end; }
  .fb-lead { grid-column: 2; grid-row: 1; }
  .crowd { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; }
  .fb.no-lead { grid-template-columns: minmax(0, 1fr); }
  .fb.sm { grid-template-columns: 5.5rem var(--lead) minmax(0, 1fr); grid-template-rows: auto; }
  .fb.sm .fb-m, .fb.sm .fb-lead, .fb.sm .crowd { grid-row: 1; grid-column: auto; margin-top: 0; }
}
@media (max-width: 640px) {
  .sp-h1 { font-size: 64px; }
  .hemi-mid { width: 50%; height: 48%; }
  .hc-n { font-size: 17px; }
  .hc-p { font-size: 12px; margin-top: 3px; }
  .hemi-idle b { font-size: 56px; }
  .hemi-idle span { font-size: 10px; margin-top: 6px; }
  .hemi-keys { gap: 4px 14px; margin-top: 18px; }
  .hemi-keys a { font-size: 14px; }
  .tvs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 68%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gr) * -1) 0 calc(var(--gl) * -1); padding: 0 var(--gr) 8px var(--gl); scrollbar-width: none; }
  .tv { scroll-snap-align: start; }
  .fb { --lead: 42vw; }
  .crowd { --hw: 23vw; }
}
@media (prefers-reduced-motion: reduce) {
  .seat { animation: none; }
  .crowd a, .fb-lead, .tv-ph img, .seat circle { transition: none; }
}
#groups { overflow-x: clip; } /* de verborgen namen aan de rand mogen de pagina niet breder maken */

/* ---------- sprekerspagina: gegevens van de Kamer onder het podium (register.js) ---------- */
.reg { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 48px) var(--g2); padding-block: clamp(28px, 3.4vw, 44px); border-bottom: 1px solid var(--line); animation: regIn 0.5s var(--ease) both; }
@keyframes regIn { from { opacity: 0; transform: translateY(8px); } }
.reg-k { margin: 0 0 14px; font: 600 13px/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx3); }
.reg-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 16px; }
.reg-big b { font: 700 clamp(52px, 5.6vw, 76px)/0.86 var(--disp); color: var(--tx); font-variant-numeric: tabular-nums; }
.reg-big span { font: 600 19px/1.1 var(--disp); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tx3); }
.reg-big em { display: inline-flex; align-items: center; gap: 7px; font: 600 15px/1 var(--sans); font-style: normal; color: var(--tx2); }
.reg-big em i { width: 9px; height: 9px; border-radius: 50%; background: var(--hit); }

/* fracties als tijdlijn */
.rt { position: relative; padding-bottom: 26px; }
.rt-bar { position: relative; height: 34px; border-radius: 4px; background: var(--bg2); }
.rt-seg { position: absolute; top: 9px; bottom: 9px; border-radius: 3px; background: var(--sc); opacity: 0.85; display: flex; align-items: center; padding-left: 8px; overflow: hidden; transition: opacity 0.2s; }
.rt-seg.lead { top: 0; bottom: 0; opacity: 1; box-shadow: 0 0 22px -4px var(--sc); z-index: 1; }
.rt-seg:hover { opacity: 1; }
.rt-seg b { font: 700 12px/1 var(--sans); letter-spacing: 0.04em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); white-space: nowrap; }
.rt-ax, .ra-ax { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; font: 500 12px/18px var(--sans); color: var(--tx4); font-variant-numeric: tabular-nums; }
.rt-ax span, .ra-ax span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.rt-ax .r0, .ra-ax .r0 { left: 0; transform: none; }
.rt-ax .r1, .ra-ax .r1 { right: 0; left: auto; transform: none; }
.reg-reg, .reg-tz { grid-column: 1 / -1; }
.tz-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g2); max-height: none; }
@media (max-width: 960px) { .tz-list { grid-template-columns: minmax(0, 1fr); } }
.reg-list { columns: 2 22rem; column-gap: var(--g2); max-height: none; }
.reg-list li { break-inside: avoid; }

/* aan het woord per maand */
.reg-act { position: relative; align-self: end; padding-bottom: 26px; }
.ra-bars { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 104px; }
.ra-b { position: relative; height: 100%; display: flex; align-items: flex-end; }
.ra-b::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--line2); }
.ra-b i { position: relative; width: 100%; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--pc, var(--tx3)) 70%, var(--tx3)); opacity: 0.75; transform-origin: bottom; animation: barUp 0.7s var(--ease) both; }
.ra-b.top i { opacity: 1; }
.ra-b:hover i { opacity: 1; }
@keyframes barUp { from { transform: scaleY(0); } }

/* register: drie grote getallen die openklappen */
.reg-reg { min-width: 0; }
.reg-nums { display: flex; flex-wrap: wrap; gap: 10px; }
.rn { display: grid; grid-template-columns: auto; justify-items: start; gap: 6px; min-width: 9.5rem; padding: 14px 18px 14px 16px; border: 1px solid var(--line2); border-radius: 8px; background: var(--bg1); color: var(--tx); text-align: left; cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease); }
.rn:hover { border-color: var(--tx4); background: var(--bg2); transform: translateY(-2px); }
.rn[aria-expanded='true'] { border-color: color-mix(in srgb, var(--pc, var(--tx3)) 70%, var(--tx3)); background: color-mix(in srgb, var(--pc, var(--tx3)) 12%, var(--bg1)); }
.rn b { font: 700 46px/0.86 var(--disp); font-variant-numeric: tabular-nums; }
.rn span { font: 600 14px/1 var(--sans); color: var(--tx2); }
.rn em { font: 600 12px/1 var(--sans); font-style: normal; color: var(--hit); }
.rn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.reg-list, .tz-list { list-style: none; margin: 18px 0 0; padding: 0; max-height: 26rem; overflow: auto; overscroll-behavior: contain; }
.reg-list li { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.reg-list li.on .rl-d { color: var(--hit); }
.rl-d { font: 500 13px/1.5 var(--sans); color: var(--tx4); font-variant-numeric: tabular-nums; }
.reg-list b { font: 600 15px/1.4 var(--sans); color: var(--tx); }
.reg-list p, .tz-list p { margin: 2px 0 0; font: 400 15px/1.5 var(--sans); color: var(--tx2); }
.rl-m { font-size: 13px !important; color: var(--tx4) !important; }

/* toezeggingen */
.tz-list { margin-top: 0; }
.tz-list li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.tz-list i { width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; background: var(--tx4); }
.tz-list li.open i { background: var(--hit); box-shadow: 0 0 10px -1px var(--hit); }
.tz-list li.done p:first-child { color: var(--tx3); }

@media (max-width: 960px) {
  .reg { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rn { min-width: 0; flex: 1 1 7rem; padding: 12px; }
  .rn b { font-size: 38px; }
  .reg-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .reg, .ra-b i { animation: none; }
  .rn { transition: none; }
}
@media (max-width: 640px) { .pglow { right: 0; } }

/* ---------- sprekerspagina: werk in de Kamer (moties, commissies, vragen) ---------- */
.reg-slot { grid-column: 1 / -1; display: grid; gap: clamp(28px, 3.4vw, 44px); }
.reg-mot { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px) var(--g2); padding-top: clamp(20px, 2.4vw, 32px); border-top: 1px solid var(--line); animation: regIn 0.5s var(--ease) both; }
.mo-pct { display: flex; align-items: center; gap: 18px; margin: 0 0 18px; }
.mo-pct p { margin: 0; font: 600 19px/1.15 var(--disp); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tx2); }
.mo-pct p span { font: 400 13px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--tx4); }
.mo-ring { --p: 0; position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; flex: none;
  background: conic-gradient(color-mix(in srgb, var(--pc, var(--tx3)) 85%, white) calc(var(--p) * 1%), var(--bg3) 0); }
.mo-ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--bg); }
.mo-ring b { position: relative; font: 700 34px/1 var(--disp); color: var(--tx); font-variant-numeric: tabular-nums; }
.ml { list-style: none; margin: 0; padding: 0; }
.ml li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.ml li > i { width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; background: var(--tx4); }
.ml li.aangenomen > i { background: #3fc96e; box-shadow: 0 0 10px -1px #3fc96e; }
.ml li.verworpen > i { background: #ff5d4f; }
.ml a { color: inherit; text-decoration: none; }
.ml a:hover p:first-child { text-decoration: underline; text-underline-offset: 3px; }
.ml p { margin: 0; font: 400 15px/1.5 var(--sans); color: var(--tx2); }
.ms-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ms-bars li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 3rem; align-items: center; gap: 12px; }
.ms-p { font: 600 14px/1 var(--sans); color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-t { height: 14px; border-radius: 3px; background: var(--bg2); overflow: hidden; }
.ms-t i { display: block; height: 100%; border-radius: 3px; background: var(--sc); transform-origin: left; animation: barRight 0.8s var(--ease) both; }
@keyframes barRight { from { transform: scaleX(0); } }
.ms-n { font: 600 14px/1 var(--sans); color: var(--tx3); text-align: right; font-variant-numeric: tabular-nums; }
.reg-work { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px) var(--g2); align-items: start; animation: regIn 0.5s var(--ease) both; }
.wk-num { order: -1; }
.wk-num .reg-list { grid-column: 1 / -1; }
.reg-work .reg-list a { color: var(--tx); text-decoration: none; font: 400 15px/1.5 var(--sans); }
.reg-work .reg-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rn.still { cursor: default; }
.rn.still:hover { transform: none; border-color: var(--line2); background: var(--bg1); }
.rn.warn b { color: var(--hit); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 7px 12px; border: 1px solid var(--line2); border-radius: 999px; font: 500 14px/1.2 var(--sans); color: var(--tx2); }
.chips li.chair { border-color: color-mix(in srgb, var(--pc, var(--tx3)) 70%, var(--tx3)); color: var(--tx); background: color-mix(in srgb, var(--pc, var(--tx3)) 12%, transparent); }
.chips li.chair b { font-weight: 700; }
@media (max-width: 960px) {
  .reg-mot, .reg-work { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ms-bars li { grid-template-columns: 4.6rem minmax(0, 1fr) 2.6rem; gap: 8px; }
  .mo-ring { width: 80px; height: 80px; }
  .mo-ring b { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .reg-mot, .reg-work, .ms-t i { animation: none; }
}
/* de gloed achter het portret mag niet voor horizontaal scrollen zorgen (clip laat sticky werken) */
#view { overflow-x: clip; }
@media (max-width: 420px) { :root { --bip: 6px; } } /* zes woorden in de balk (met Live) passen dan ook op een smalle telefoon */
@media (max-width: 380px) { :root { --bip: 4px; --bf: 16px; } } /* met Gemeentes erbij: zes woorden passen ook op 360 px */

/* fotoverantwoording onder het portret: klein, maar helemaal leesbaar (mag over meer regels lopen) */
.pf { position: relative; }
.pfig { margin: 0; min-width: 0; }
.pfig figcaption { padding: 6px 0 8px; text-align: right; }
.pcredit { display: inline-block; max-width: 100%; font: 500 12px/1.35 var(--sans); color: var(--tx3); text-decoration: none; overflow-wrap: anywhere; }
a.pcredit:hover { color: var(--tx2); text-decoration: underline; }