/* ══════════════════════════════════════════════════════════════════
   Layout: alles wat Basecoat NIET levert

   Basecoat is een componentbibliotheek, geen layoutsysteem. De CDN-build
   bevat 68 componentklassen en nul Tailwind-utilities, dus rasters,
   afstanden en de paginakop schrijf je zelf. Dit bestand is precies dat
   gat, en bewust kort gehouden: het is de meting.

   Regel: niets hier raakt een Basecoat-componentklasse aan.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --chart-6: #1e3a8a;         /* Basecoat levert er vijf, wij hebben er zes nodig */
  /* Het scherm vult de beschikbare breedte. De 2200px is geen ontwerpmaat maar
     een vangnet voor ultrabrede monitoren, waar een tabel anders zo ver uitrekt
     dat je oog de rij kwijtraakt. Leesteksten houden hun eigen maat in ch. */
  --scherm-max: 2200px;
  --v-ruim: 24px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* ── Navigatiekop en voet ────────────────────────────────────────── */

.wordmark {
  display: block;
  padding: 4px 8px;
  text-decoration: none;
  color: inherit;
}
.wordmark-naam {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.wordmark-sub {
  display: block;
  font-size: 10.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.62;
  margin-top: 2px;
}
.fictief {
  margin: 0;
  padding: 8px;
  font-size: 11px;
  line-height: 1.5;
  opacity: 0.6;
}

/* ── Topbalk ─────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 var(--v-ruim);
  background: color-mix(in oklab, var(--background) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-acties {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.schakel-label {
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.topbar .select { height: 32px; font-size: 13px; }

.merk-schakelaar {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
}
[data-merk-knop][aria-pressed="true"] {
  background: var(--primary);
  color: var(--primary-foreground);
}

#thema-knop .icoon-donker { display: none; }
.dark #thema-knop .icoon-licht { display: none; }
.dark #thema-knop .icoon-donker { display: inline; }

.sidebar-knop { display: none; }
@media (max-width: 1023px) { .sidebar-knop { display: inline-flex; } }

/* ── Scherm ──────────────────────────────────────────────────────── */

/* Leesteksten houden een leesbare regellengte, ook als het scherm meegroeit.
   Een regel van 200 tekens leest niet, hoe breed de monitor ook is. */
.scherm > .alert > section { max-width: 104ch; }

/* Een kolom met gestapelde kaarten binnen een raster. Zonder eigen ritme
   plakken die kaarten tegen elkaar: de gap van .scherm geldt alleen voor
   directe kinderen, en de gap van .raster alleen tussen de kolommen. */
.kolom { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Eén verticaal ritme voor het hele scherm.

   Eerder droeg elk bloktype zijn eigen margin-bottom, en dan plakt een blok
   dat die marge niet heeft tegen het volgende aan. Dat gebeurde met de alert
   op Analytics, en het zou gebeuren bij elk nieuw bloktype dat we toevoegen.
   Met een gap op de container is de tussenruimte gelijk ongeacht wat er staat,
   en hoeft een nieuw blok nergens aan te denken.

   min-width: 0 op de kinderen: zonder dat rekt een brede tabel de flex-kolom
   op en loopt het scherm horizontaal weg. */
.scherm {
  max-width: var(--scherm-max);
  margin: 0 auto;          /* gecentreerd zodra het vangnet aanslaat */
  padding: 28px var(--v-ruim) 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Minstens het venster vullen, zodat een kort scherm geen gat onderaan
     laat. De topbar is 56px hoog. */
  min-height: calc(100vh - 56px);
}
/* De container bepaalt het ritme, de kinderen leggen niets op. Basecoat geeft
   .alert een eigen margin-bottom en sommige blokken een margin-top; opgeteld
   bij de gap werd dat 32px waar 16px hoort. */
.scherm > * { min-width: 0; margin-top: 0; margin-bottom: 0; }
.scherm > .paginakop { margin-bottom: 10px; }
.laadt { display: grid; gap: 16px; }

.paginakop .kicker {
  display: block;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 8px;
}
.paginakop h1 {
  margin: 0;
  font-family: var(--font-heading, var(--font-sans));
  font-size: 30px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.paginakop .sub {
  margin: 10px 0 0;
  max-width: 68ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted-foreground);
}
.kop-rij { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.kop-rij > .kop-acties { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ── Rasters ─────────────────────────────────────────────────────── */

.raster { display: grid; gap: 16px; }
.raster[data-kol="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster[data-kol="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster[data-kol="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.raster[data-kol="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.raster[data-kol="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.raster[data-kol="2-1"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.raster[data-kol="1-2"] { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

@media (max-width: 1200px) {
  .raster[data-kol="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster[data-kol="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster[data-kol="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .raster[data-kol="2"],
  .raster[data-kol="3"],
  .raster[data-kol="2-1"],
  .raster[data-kol="1-2"] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .raster[data-kol="6"], .raster[data-kol="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── KPI ─────────────────────────────────────────────────────────── */

.kpi-label {
  font-size: 11.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.kpi-waarde {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  margin-top: 6px;
}
.kpi-waarde[data-mono="1"] { font-family: var(--font-mono); font-size: 23px; }
.kpi-noot {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted-foreground);
}

.delta { font-weight: 600; font-variant-numeric: tabular-nums; }
.delta[data-richting="op"]   { color: var(--chart-1); }
.delta[data-richting="neer"] { color: var(--destructive); }

/* ── Tabellen en kleine tekst ────────────────────────────────────── */

.getal { font-variant-numeric: tabular-nums; text-align: right; }
.mono  { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.table th.getal, .table td.getal { text-align: right; }
.table-container { max-height: 520px; overflow: auto; }
.table caption { text-align: left; }

th[data-sorteer] { cursor: pointer; user-select: none; white-space: nowrap; }
/* ▲ en ▼ omdat de dubbele pijl ↕ in Geist geen glyph heeft en als
   leeg blokje rendert. */
th[data-sorteer]::after { content: "▼"; opacity: 0.22; margin-left: 6px; font-size: 8px; vertical-align: middle; }
th[data-sorteer][data-actief="op"]::after   { content: "▲"; opacity: 1; }
th[data-sorteer][data-actief="neer"]::after { content: "▼"; opacity: 1; }

.rij-klik { cursor: pointer; }

.noot {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-foreground);
  max-width: 78ch;
}
.filterbalk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filterbalk .select { height: 34px; font-size: 13px; }
.filterbalk .input  { height: 34px; font-size: 13px; max-width: 240px; }

/* ── Vestigingskaart ─────────────────────────────────────────────── */

.bord { text-align: left; cursor: pointer; display: block; width: 100%; }
.bord:hover { border-color: var(--ring); }
.bord-meters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}
/* Waarde en label horen bij elkaar en staan daarom in één kolomcel.
   Dit is exact de bug uit het live OS, hier vermeden. */
.bord-meter { display: grid; grid-auto-flow: row; gap: 2px; }
.bord-meter .m-label {
  font-size: 10.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.bord-meter .m-waarde { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

.balk { height: 5px; border-radius: 999px; background: var(--muted); overflow: hidden; margin-top: 14px; }
.balk > i { display: block; height: 100%; background: var(--chart-1); border-radius: 999px; }

.bord-voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--muted-foreground);
}
.sterren { color: var(--chart-2); letter-spacing: 1px; }

/* ── Feitenlijst ─────────────────────────────────────────────────── */

.feiten { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 0; }
.feiten dt {
  font-size: 13px;
  color: var(--muted-foreground);
  padding: 9px 0;
  border-top: 1px solid var(--border);
}
.feiten dd {
  margin: 0;
  padding: 9px 0;
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--border);
}
.feiten dt:first-of-type, .feiten dt:first-of-type + dd { border-top: 0; }
.feiten dd b { font-weight: 600; }
.feiten .zacht { color: var(--muted-foreground); font-weight: 400; }

/* ── Grafiek ─────────────────────────────────────────────────────── */

/* De hoogte hoort op `div.chart`, de wrapper die Basecoat om de canvas zet:
   Chart.js meet de directe ouder van het canvas en niets anders. Een maat op
   `.grafiek-vak` wordt genegeerd en een `max-height` daar laat het canvas er
   simpelweg overheen schieten.

   Waarom een vaste maat en geen verhouding: zonder begrenzing volgt de hoogte
   de breedte (gemeten factor ~0,58), en sinds het scherm de volle breedte
   vult werd een grafiek op een breed venster ruim 800px hoog. Dan staat er
   een halve pagina lucht boven de data en moet je scrollen om de x-as te
   zien. */
.grafiek-vak { min-height: 0; }
.grafiek-vak > .chart          { height: 260px; }
.grafiek-vak[data-hoog="1"] > .chart { height: 400px; }
.grafiek-vak[data-laag="1"] > .chart { height: 176px; }

/* De omzetgrafiek mag lager: de balken lopen tot 73 mln op een as die tot 140
   loopt, dus de bovenste helft is toch leeg. */
.grafiek-vak[data-compact="1"] > .chart { height: 320px; }

/* Op een smal venster is dezelfde hoogte te veel: daar is de grafiek smal en
   wordt hij anders bijna vierkant. */
@media (max-width: 900px) {
  .grafiek-vak > .chart                { height: 220px; }
  .grafiek-vak[data-hoog="1"] > .chart { height: 300px; }
  .grafiek-vak[data-compact="1"] > .chart { height: 260px; }
}

/* ── Recensie ────────────────────────────────────────────────────── */

.recensie { padding: 11px 0; border-top: 1px solid var(--border); }
.recensie:first-child { border-top: 0; padding-top: 0; }
.recensie-kop { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--muted-foreground); }
.recensie p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted-foreground); }

.leeg { padding: 40px 0; text-align: center; color: var(--muted-foreground); }

/* ── Werkbank: rail, lijst en lezer naast elkaar ─────────────────── */

.werkbank {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 16px;
  /* stretch in plaats van start: anders krijgt elke kolom zijn eigen hoogte
     en eindigen de drie panelen op drie verschillende plekken. */
  align-items: stretch;
  /* De werkbank neemt de ruimte die het scherm overhoudt. flex-basis 0 zorgt
     dat hij krimpt en groeit met het venster in plaats van met zijn inhoud. */
  flex: 1 1 0;
  min-height: 0;
}
.werkbank > * { min-height: 0; }
/* Een kaart die zijn kolom vult; de section erin scrollt.

   Let op de selector: dit geldt voor een kaart die DIRECT kind van een
   werkbank-kolom is, niet voor elke kaart daarbinnen. De KPI-kaartjes zitten
   in een raster ertussen, en die moeten hun eigen hoogte houden. */
.werkbank > .card,
.werkbank > .lezer > .card,
.werkbank > .lijst-paneel > .card,
.werkbank > .rec-hoofd > .card { height: 100%; min-height: 0;
  display: flex; flex-direction: column; }
.werkbank > .card > section,
.werkbank > .lezer > .card > section,
.werkbank > .lijst-paneel > .card > section,
.werkbank > .rec-hoofd > .card > section { min-height: 0; overflow: auto;
  display: flex; flex-direction: column; }

/* Een tabel binnen zo'n kaart groeit mee met het venster in plaats van op een
   vast maximum te blijven staan, en scrollt zelf zodat de kolomkoppen kunnen
   blijven staan: sticky werkt alleen binnen de eigen scroller. */
.werkbank .table-container { max-height: none; flex: 1 1 auto; min-height: 0; }
.werkbank thead th { position: sticky; top: 0; z-index: 2; background: var(--card); }
.werkbank[data-zonder-rail="1"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
/* rec-hoofd stapelt meerdere blokken (KPI's, jaarkiezer, tabelkaart) in één
   kolom. Zonder eigen ritme plakken die, en zonder min-height:0 duwt de
   tabelkaart de kolom langer dan het venster in plaats van te scrollen. */
.werkbank .rec-hoofd {
  grid-column: 2 / -1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}
.werkbank .rec-hoofd > .card { flex: 1 1 0; min-height: 0; }

@media (max-width: 1180px) {
  .werkbank { grid-template-columns: 190px minmax(0, 1fr); }
  .werkbank .lezer { grid-column: 1 / -1; }
  .werkbank[data-zonder-rail="1"] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .werkbank { grid-template-columns: minmax(0, 1fr); }
  .werkbank .rec-hoofd { grid-column: 1; }
}

.rail-groep { margin-bottom: 14px; }
.rail-groep:last-child { margin-bottom: 0; }
.rail-knop {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  margin-top: 2px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.rail-knop:hover { background: var(--accent); }
.rail-knop[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); }
.rail-knop .chip-n { margin-left: auto; }

.chipsrij { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-n {
  font-family: var(--font-mono);
  font-size: 10.5px;
  opacity: 0.62;
  font-variant-numeric: tabular-nums;
}

/* ── Lijstrijen ──────────────────────────────────────────────────── */

.item-group { display: flex; flex-direction: column; }
/* Geen vast maximum meer: binnen een werkbank bepaalt de vensterhoogte
   hoeveel er past, en scrollt de section eromheen. */
.item-group.rol { min-height: 0; overflow-y: auto; }

.lijst-rij {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 10px 8px;
}
.item-group > .lijst-rij:first-child { border-top: 0; }
.lijst-rij:hover { background: var(--accent); }
.lijst-rij[aria-current="true"] {
  background: var(--accent);
  box-shadow: inset 2px 0 0 var(--primary);
}
.lijst-rij-kop { display: flex; gap: 8px; align-items: baseline; }
.lijst-rij-mid { margin-top: 2px; }
.lijst-rij-voet { margin-top: 6px; display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }

.rij-titel {
  font-size: 13.5px;
  font-weight: 500;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rij-meta {
  font-size: 11.5px;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* ── Mailtriage en dialoog ───────────────────────────────────────── */

.triage {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
}
.triage-rij { display: flex; align-items: center; gap: 9px; padding: 3px 0; flex-wrap: wrap; }
.triage-rij .t-k {
  width: 76px;
  flex: none;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.mailtekst {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  max-height: 380px;
  overflow-y: auto;
}
.mailtekst.zacht { color: var(--muted-foreground); }

.dialoog { margin-top: 14px; max-height: 460px; overflow-y: auto; }
.beurt { display: flex; gap: 10px; padding: 7px 0; }
.beurt .wie {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  background: var(--muted);
  color: var(--muted-foreground);
}
.beurt[data-spreker="medewerker"] .wie { background: var(--primary); color: var(--primary-foreground); }
.beurt .zeg { font-size: 13.5px; line-height: 1.55; }
.beurt .rol-naam {
  display: block;
  font-size: 10.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 2px;
}
.dialoog mark { background: var(--primary); color: var(--primary-foreground); border-radius: 3px; padding: 0 2px; }

/* ── Records ─────────────────────────────────────────────────────── */

.rauw {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  max-height: 420px;
  overflow: auto;
  white-space: pre;
}
.grafiek-vak[data-laag="1"] { min-height: 74px; }

/* ── Merk & markt ─────────────────────────────────────────────────
   Vijf schermen erbij, en de layout groeit nauwelijks mee: alles wat
   Basecoat levert (card, table, badge, alert, item) blijft hergebruikt.
   Wat hier staat is uitsluitend raster- en verhoudingswerk. */

/* Een rij in een tabel die naar een dossier leidt. */
tr.klikbaar { cursor: pointer; }
tr.klikbaar:hover > td { background: var(--muted); }

/* De collectiekaart op het CMS-overzicht. Een card die een knop is. */
.mk-collectie { text-align: left; width: 100%; cursor: pointer; font: inherit;
  color: inherit; border-color: var(--border); }
.mk-collectie:hover { border-color: var(--ring); }
.mk-col-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mk-col-kop h3 { font-size: .95rem; font-weight: 600; margin: 0; }
.mk-col-staaf { display: flex; height: 6px; border-radius: 3px; overflow: hidden;
  margin: 12px 0 8px; background: var(--muted); }
.mk-col-staaf span[data-s="live"] { background: var(--chart-1); }
.mk-col-staaf span[data-s="concept"] { background: var(--chart-6); }
.mk-col-staaf span[data-s="gepland"] { background: var(--chart-2); }
.mk-col-regel, .mk-col-voet { display: flex; justify-content: space-between; gap: 8px;
  font-size: .74rem; color: var(--muted-foreground); }
.mk-col-voet { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }

/* De contactregel naar de ontwerppartner. */
.mk-partner { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border); font-size: .82rem; }

/* De veldset, met een slotje op wat vastligt. Dit is de kern van het scherm. */
.mk-velden { list-style: none; margin: 0; padding: 0; }
.mk-velden li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
  align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--border);
  font-size: .84rem; }
.mk-velden li:last-child { border-bottom: 0; }
.mk-veld-naam { font-family: var(--font-mono); }
.mk-veld-type { color: var(--muted-foreground); font-size: .76rem; }
.mk-veld-slot { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted-foreground); }
.mk-velden li[data-vast] { opacity: .72; }
.mk-velden li[data-vast] .mk-veld-slot { color: var(--chart-6); font-weight: 600; }

/* Het entry-dossier: velden met hun waarde. */
.mk-veldwaarden { display: grid; grid-template-columns: minmax(140px, auto) 1fr;
  gap: 9px 20px; margin: 0; font-size: .86rem; }
.mk-veldwaarden dt { color: var(--muted-foreground); font-family: var(--font-mono);
  font-size: .78rem; }
.mk-veldwaarden dt[data-vast] { opacity: .7; }
.mk-veldwaarden dd { margin: 0; }
.mk-slot { font-size: .66rem; text-transform: uppercase; color: var(--chart-6);
  letter-spacing: .06em; }
.mk-veld-beeld { display: block; width: 180px; border-radius: 4px; margin-bottom: 6px; }
.mk-kort { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0;
  font-size: .84rem; }
.mk-kort dt { color: var(--muted-foreground); }
.mk-kort dd { margin: 0; text-align: right; }

/* Mediabibliotheek. */
.mk-media-raster { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.mk-media { margin: 0; }
.mk-thumb { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 4px;
  display: block; }
.mk-media figcaption { font-size: .68rem; color: var(--muted-foreground);
  margin-top: 4px; line-height: 1.3; }

/* Social posts: beeld links, tekst rechts. */
.mk-posts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.mk-post { display: grid; grid-template-columns: 108px 1fr; gap: 12px;
  border: 1px solid var(--border); border-radius: 6px; padding: 10px; }
.mk-post-beeld, .mk-post-leeg { width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 4px; }
.mk-post-leeg { background: var(--muted); }
.mk-post-kop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 6px; }
.mk-post-tekst p { margin: 0; font-size: .82rem; line-height: 1.45; }
.mk-post-voet { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px;
  font-size: .72rem; color: var(--muted-foreground); }

/* De conversietrechter op Analytics. */
.mk-trechter { display: flex; flex-direction: column; gap: 10px; }
/* Vaste 180px voor het label houdt in een smalle kolom niets over voor de balk.
   Met minmax krimpt het label mee en blijft de balk leesbaar. */
.mk-tr-rij { display: grid; grid-template-columns: minmax(90px, 168px) minmax(60px, 1fr) auto auto;
  gap: 10px; align-items: center; font-size: .82rem; }
.mk-tr-lbl { color: var(--muted-foreground); }
.mk-tr-balk { height: 22px; background: var(--muted); border-radius: 4px; overflow: hidden; }
.mk-tr-balk i { display: block; height: 100%; background: var(--chart-1); border-radius: 4px; }
.mk-tr-getal { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.mk-tr-pct { text-align: right; font-size: .74rem; color: var(--muted-foreground);
  white-space: nowrap; min-width: 42px; }

/* Platte lijstjes: over datum, assets die achterlopen. */
.mk-plat { list-style: none; margin: 0; padding: 0; font-size: .82rem; }
.mk-plat li { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0;
  border-bottom: 1px solid var(--border); }
.mk-plat li:last-child { border-bottom: 0; }
.mk-plat li span:last-child { color: var(--muted-foreground); white-space: nowrap; }

/* Branding: kleur- en typespecimens, rechtstreeks uit de tokens. */
.mk-swatches { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.mk-swatch { margin: 0; }
/* Direct kind: anders krijgt de span in het bijschrift ook een kader. */
.mk-swatch > span { display: block; height: 56px; border-radius: 5px;
  border: 1px solid var(--border); }
.mk-swatch figcaption { margin-top: 6px; display: flex; flex-direction: column;
  gap: 1px; font-size: .78rem; }
.mk-type { display: flex; flex-direction: column; gap: 14px; }
.mk-type-rij { display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.mk-type-rij:last-child { border-bottom: 0; padding-bottom: 0; }
.mk-type-groot { font-family: var(--font-serif, Georgia, serif); font-size: 2rem; }
.mk-type-kop { font-size: 1.15rem; font-weight: 600; }
.mk-type-body { font-size: .92rem; }
.mk-type-mono { font-family: var(--font-mono); font-size: .95rem; }

.mk-zoek { margin-bottom: 12px; }
.mk-meer { margin-top: 12px; }

@media (max-width: 1100px) {
  .mk-post { grid-template-columns: 84px 1fr; }
}


/* ══════════════════════════════════════════════════════════════════
   Intro-overlay

   Eenmalig per browser, ?intro=1 haalt hem terug. Het OS staat er al
   achter te laden en schemert door de blur heen: dat is het verschil
   tussen een melding vóór de demo en een deur naar de demo.

   Alles komt uit de tokens, dus de overlay kantelt mee met de merklaag
   en met licht of donker. Geen enkele kleur staat hier hard.
   ══════════════════════════════════════════════════════════════════ */

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  background: color-mix(in oklab, var(--background) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  animation: intro-op 0.32s ease-out both;
}
/* Het oordeel valt in de head, dus dit is alleen de uitvoering ervan. */
:root[data-intro="verborgen"] .intro { display: none; }
/* Achtergrond niet laten meescrollen zolang de overlay open staat. */
:root:not([data-intro="verborgen"]) body { overflow: hidden; }

.intro-weg { animation: intro-uit 0.2s ease-in both; }
/* De kaart is alleen focusbaar om de dialog de focus te geven, niet om
   zelf als bedienbaar element te lezen. */
.intro-kaart:focus { outline: none; }

@keyframes intro-op {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes intro-uit {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.intro-kaart {
  width: min(620px, 100%);
  margin: auto;
  padding: 34px 36px 26px;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.6);
  /* Twee lagen: een korte voor de rand, een lange voor het zweven. */
  box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 10%, transparent),
              0 24px 60px -12px color-mix(in oklab, var(--foreground) 28%, transparent);
  animation: intro-kaart-op 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes intro-kaart-op {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.intro-kicker {
  margin: 0 0 10px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.intro-kaart h1 {
  margin: 0 0 22px;
  font-family: var(--font-heading, var(--font-sans));
  font-size: 30px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.025em;
}
/* De wordmark-regel geldt ook hier: de schreefletter draagt het merk en
   verschijnt nergens anders. Bij Lindenhove mag deze kop dus Fraunces zijn. */
:root[data-merk="lindenhove"] .intro-kaart h1 {
  font-family: "Fraunces", Georgia, serif;
  letter-spacing: -0.015em;
}

.intro-punten { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 18px; }
.intro-punten li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.intro-punten h2 {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.intro-punten p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted-foreground);
}
.intro-icoon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--secondary);
  color: var(--primary);
  /* In het donker draagt messing de primaire kleur, dus dit kantelt mee. */
}
:root.dark .intro-icoon { color: var(--primary); }

/* Alleen op smalle schermen. Waarschuwen, niet blokkeren. */
.intro-smal {
  display: none;
  margin: 0 0 20px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--destructive) 38%, var(--border));
  background: color-mix(in oklab, var(--destructive) 8%, var(--card));
  color: var(--foreground);
}

.intro-start { width: 100%; }

.intro-voet {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: space-between;
}
.intro-voet p { margin: 0; font-size: 12px; color: var(--muted-foreground); }
.intro-voet a { color: inherit; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); }
.intro-voet a:hover { color: var(--foreground); text-decoration-color: currentColor; }

/* 1024px is dezelfde grens waarop de sidebar naar een knop klapt. */
@media (max-width: 1023px) {
  .intro-smal { display: block; }
  .intro-kaart { padding: 26px 22px 20px; }
  .intro-kaart h1 { font-size: 25px; margin-bottom: 18px; }
  .intro-punten { gap: 15px; }
  .intro-voet { flex-direction: column; }
}

/* Wie beweging heeft uitgezet, krijgt de kaart zonder aanloop. */
@media (prefers-reduced-motion: reduce) {
  .intro, .intro-kaart, .intro-weg { animation: none; }
}