/* De opmaak van openblik zelf, bovenop de Grafiet-tokens.
   ===============================================================
   Eén regel houdt dit bestand bij elkaar: hier staat geen enkele kleurwaarde,
   alleen var(--…). Zodra er een hex in dit bestand belandt, staat er kleur
   buiten de tokenlaag om — en dan klopt de contrastmeting van het palet niet
   meer voor wat er werkelijk op het scherm staat. */

:root {
  /* De tekstkolom. Bij 15px zo'n 85 tekens. */
  --kolom: 860px;
  /* De kolom plus de infobox ernaast, plus de ruimte ertussen. Kopbalk,
     inhoud en voet houden zich hieraan, zodat ze op één lijn staan. */
  --raam: 1204px;
  --infobox: 300px;
}

/* ── De schil ─────────────────────────────────────────────────────────── */

.schil { min-height: 100dvh; display: flex; flex-direction: column; }

/* ── De kopbalk ───────────────────────────────────────────────────────────
   Naar het model van NavKop.vue in begrotingsblik: drie zones op één rij —
   merk links, navigatie in het midden, wie-je-bent rechts.

   De balk zelf loopt over de volle breedte (anders zweeft hij), maar zijn
   ínhoud is begrensd tot dezelfde breedte als de pagina eronder. Zonder dat
   hangt het woordmerk tegen de linkerrand van het scherm terwijl de tekst in
   het midden staat — dan lijken het twee losse dingen. */

.kopbalk {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}

.kopbalk-rij {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px;
  padding: 0 24px;
  max-width: var(--raam);
  margin-inline: auto;
}

.kopbalk .merk { font-weight: 700; letter-spacing: -0.01em; flex: 0 0 auto; }
.kopbalk .merk a { text-decoration: none; }

/* `margin-inline: auto` zet dit blok in het midden van de rij, precies zoals
   de sectiebalk van begrotingsblik. */
.kopbalk .midden { margin-inline: auto; display: flex; align-items: center; gap: 8px; }

.kopbalk .rechts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.zoekveld {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--hoek-sm);
  color: var(--text);
  padding: 5px 10px;
  width: 260px;
}
.zoekveld:focus-visible { border-color: var(--border-sterk); }

/* Het wie-menu: één knop die uitklapt, in plaats van drie losse knoppen naast
   elkaar. Dat is wat begrotingsblik doet, en het scheelt ruimte in de rij. */
.wie-blok { position: relative; }
.wie-blok > summary {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-muted);
  padding: 6px 9px; border-radius: var(--hoek-sm);
  cursor: pointer; list-style: none; white-space: nowrap;
}
/* De naam draagt het gewicht, het onderschrift staat gedempt ernaast — net als
   de rol in begrotingsblik. Twee regels informatie op één regel hoogte. */
.wie-naam { color: var(--text); font-weight: 600; }
.wie-bij { color: var(--text-muted); }
.wie-blok > summary::-webkit-details-marker { display: none; }
.wie-blok > summary:hover { background: var(--hover); color: var(--text); }
.wie-blok[open] > summary { background: var(--hover); color: var(--text); }

.uitklap {
  position: absolute; right: 0; top: calc(100% + 4px);
  min-width: 200px; z-index: 30;
  background: var(--surface);
  border: 1px solid var(--border-sterk);
  border-radius: var(--hoek);
  padding: 4px;
  box-shadow: 0 6px 18px rgb(0 0 0 / .18);
}
.uitklap a, .uitklap button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--text);
  text-align: left; text-decoration: none; border-radius: var(--hoek-sm);
}
.uitklap a:hover, .uitklap button:hover { background: var(--hover); color: var(--text); }
.uitklap hr { border: 0; border-top: 1px solid var(--border); margin: 4px 2px; }
.uitklap .bij { font-size: 11.5px; color: var(--text-muted); padding: 4px 9px 6px; }

/* Het versienummer rechts in de regel, zoals daar. `margin-left: auto` duwt
   het naar de rand zonder dat er een vaste breedte nodig is. */
.uitklap .versie { margin-left: auto; font-size: 11.5px; color: var(--text-muted); }

/* De items zijn breder dan een gewone knop: er staat een icoon voor, en de
   regels moeten op één lijn beginnen. */
.uitklap a, .uitklap button { padding: 8px 10px; gap: 10px; }
.uitklap form { margin: 0; }
.uitklap form button { width: 100%; }

.inhoud {
  flex: 1;
  padding: 28px 24px 64px;
  /* Het raam is zo breed als de tekstkolom plus de infobox ernaast. De tekst
     zelf blijft 860px — dat is bij 15px zo'n 85 tekens.
     Hiervoor stond dit op 1100px terwijl de lopende tekst op 72ch (~590px)
     werd afgekapt. Gevolg: alinea's stopten halverwege terwijl de streep onder
     elke kop en elke tabel doorliep tot de rechterrand. Dat leest als een
     pagina die half is ingeladen. */
  max-width: var(--raam);
  margin-inline: auto;
  width: 100%;
}

/* Pagina's zonder infobox — start, zoeken, een gebied — houden de tekstkolom
   gecentreerd binnen het raam. Zonder dit zouden ze over de volle raambreedte
   uitlopen en alsnog te lange regels geven. */
.kolom { max-width: var(--kolom); margin-inline: auto; }

.voet {
  border-top: 1px solid var(--border);
  padding: 14px 24px; font-size: 12px; color: var(--text-muted);
  max-width: var(--raam); margin-inline: auto; width: 100%;
}

/* ── Leesbreedte ──────────────────────────────────────────────────────── */
/* De regellengte wordt nu door de kolom bepaald en niet meer per element.
   Een `max-width` op alleen alinea's maakte de pagina rafelig: tekst stopte op
   590px, tabellen en koplijnen liepen door tot 1100px.
   `text-wrap: pretty` blijft: die voorkomt een laatste regel met één woord. */
.artikel-tekst p,
.artikel-tekst li { text-wrap: pretty; }

/* ── Uitvullen ────────────────────────────────────────────────────────── */
/* De rechterrand van een artikel liep rafelig terwijl de streep onder elke
   kop en de rand van elke tabel wél tot de kolombreedte doorliepen. Dat leest
   als een halve pagina: de tekst lijkt smaller dan hij is.

   `hyphens: auto` staat er niet voor de sier maar is de voorwaarde. Uitvullen
   zonder afbreken rekt de spaties op tot er witte rivieren door de alinea
   lopen — bij het Nederlands erger dan bij het Engels, want onze woorden zijn
   langer en samenstellingen schrijven we aan elkaar. De browser kan alleen
   afbreken als hij de taal kent; `<html lang="nl">` in de schil is daarom
   onderdeel van deze regel en geen losse nettigheid.

   Alleen lopende tekst. Koppen, tabelcellen, code en de metaregels blijven
   links uitgelijnd: daar is uitvullen geen rust maar ruis. */
.artikel-tekst p,
.artikel-tekst li {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Breek liever niet af als er maar één lettergreep overblijft, en nooit
     meer dan twee regels achter elkaar op een koppelteken laten eindigen. */
  hyphenate-limit-chars: 7 3 3;
}

/* Een alinea die uit één regel bestaat hoort niet opgerekt te worden, en een
   laatste regel al helemaal niet — dat doet `text-align: justify` vanzelf
   goed, maar een blok dat alleen een link of een bestandsnaam bevat wel. */
.artikel-tekst li > code:only-child,
.artikel-tekst p > code:only-child { hyphens: none; }

/* Lange bestandsnamen en URL's mogen wél overal breken: die passen anders
   niet in de kolom en duwen de hele pagina breder. */
.artikel-tekst code, .artikel-tekst a[href^="http"] { overflow-wrap: anywhere; }

/* ── Koppen ───────────────────────────────────────────────────────────── */

.artikel-tekst h1, .artikel-tekst h2, .artikel-tekst h3, .artikel-tekst h4 {
  line-height: var(--regel-strak);
  margin: 1.6em 0 .5em;
}
.artikel-tekst h1 { font-size: 25px; margin-top: 0; }
.artikel-tekst h2 { font-size: 19px; border-bottom: 1px solid var(--border); padding-bottom: .25em; }
.artikel-tekst h3 { font-size: 16px; }
.artikel-tekst h4 { font-size: 14px; color: var(--text-muted); }

.artikel-tekst p, .artikel-tekst ul, .artikel-tekst ol { margin-bottom: .9em; }
.artikel-tekst ul, .artikel-tekst ol { padding-left: 1.4em; }
.artikel-tekst li { margin-bottom: .25em; }

/* ── Verwijzingen ─────────────────────────────────────────────────────── */
/* Drie soorten, en ze zien er alle drie anders uit. Dat is geen opsmuk: een
   lezer moet kunnen zien of een link ook in de vault bestaat, of dat openblik
   hem op bestandsnaam heeft herkend. */

.artikel-tekst a {
  color: var(--text);
  text-decoration: underline;
  /* De onderstreping in de tekstkleur zelf, niet in een gedempt grijs.
     Dat grijs komt uit begrotingsblik, waar een pagina een handvol links
     draagt. In een wiki zijn links het navigatiemiddel: een vaag streepje
     onder zwarte tekst is dan niet te onderscheiden van vetgedrukte tekst.
     Geen kleur dus — wel dikte en contrast. */
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .16em;
  transition: background-color .12s ease;
}
.artikel-tekst a:hover {
  text-decoration-thickness: 2.5px;
  /* Een lichte achtergrond bij hover: zo weet je welke link je raakt in een
     alinea met vijf links naast elkaar. */
  background: var(--hover);
  border-radius: var(--hoek-xs);
  box-shadow: 0 0 0 2px var(--hover);
}

/* Herkend op bestandsnaam, stond in de vault als platte tekst. Gestippeld,
   zodat het verschil met een echte wikilink zichtbaar is zonder uitleg. */
.verwijzing-naam { text-decoration-style: dotted !important; }
.verwijzing-naam::before { content: "≈ "; color: var(--text-muted); }

/* Wijst nergens heen. Zichtbaar dood, niet stilzwijgend platte tekst: 3% van
   de wikilinks in de vault resolveert niet, en dat is informatie. */
.link-dood {
  color: var(--text-muted);
  border-bottom: 1px dashed var(--border-sterk);
  cursor: help;
}

/* ── Callouts ─────────────────────────────────────────────────────────── */
/* Elf soorten, en met opzet géén elf kleuren — dat zou de huisstijlregel
   "kleur draagt nooit alleen de betekenis" meteen breken. Iedereen krijgt een
   linkerrand en een tekstlabel; alleen `warning` en `important` krijgen kleur,
   want dat zijn in deze vault de twee die echt werk doen: deadlines en
   politiek gevoelige punten. */

.callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-sterk);
  border-radius: var(--hoek);
  background: var(--surface2);
  padding: 12px 14px;
  margin: 1.2em 0;
}
.callout-titel { font-weight: 600; font-size: 13px; margin-bottom: .35em; line-height: var(--regel-strak); }
.callout-body > *:last-child { margin-bottom: 0; }
.callout-body { font-size: 13.5px; }

.callout-warning { border-left-color: var(--orange); }
.callout-warning > .callout-titel { color: var(--orange); }
.callout-important { border-left-color: var(--red); }
.callout-important > .callout-titel { color: var(--red); }

details.callout > summary { cursor: pointer; list-style: revert; }

/* ── Blokankers ───────────────────────────────────────────────────────── */
/* De 196 blok-ID's uit de vault. Ze koppelen een actieregel aan zijn
   Notion-taak, dus ze krijgen hier een vast anker. Zichtbaar bij hover, zodat
   ze de tekst niet vervuilen. */
.blok-anker { opacity: 0; margin-left: .4em; text-decoration: none; color: var(--text-muted); }
li:hover > .blok-anker, p:hover > .blok-anker, .blok-anker:focus { opacity: 1; }

/* ── Tabellen ─────────────────────────────────────────────────────────── */
.artikel-tekst table { border-collapse: collapse; font-size: 12.5px; margin: 1.2em 0; width: 100%; }
.artikel-tekst thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 500; color: var(--text-muted);
  border-bottom: 1px solid var(--border); text-align: left; padding: 6px 8px;
}
.artikel-tekst td, .artikel-tekst tbody th { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
/* Brede tabellen schuiven in hun eigen kader; de pagina zelf schuift nooit. */
.artikel-tekst table { display: block; overflow-x: auto; }

/* ── Code en diagrammen ───────────────────────────────────────────────── */
.artikel-tekst code { font-family: var(--mono); font-size: .9em;
  background: var(--surface2); padding: .1em .35em; border-radius: var(--hoek-xs); }
.artikel-tekst pre { background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--hoek); padding: 12px; overflow-x: auto; margin: 1.2em 0; }
.artikel-tekst pre code { background: none; padding: 0; }
pre.mermaid { text-align: center; }

/* ── Taken ────────────────────────────────────────────────────────────── */
/* Uitgezet, en dat is geen vergetelheid: openblik schrijft nooit naar de vault.
   Een aanvinkbaar vakje zou beloven wat het niet waarmaakt. */
.artikel-tekst input[type="checkbox"] { margin-right: .5em; }
.artikel-tekst li.task-list-item { list-style: none; margin-left: -1.2em; }

/* ── De voetnotenzone ─────────────────────────────────────────────────── */
/* Bronnen en "zie ook" onder het artikel, zichtbaar apart. De wiki toont wat je
   hebt uitgedacht; de bronnen staan eronder. */
.voetnotenzone {
  margin-top: 2.5em; padding-top: 1.2em;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.voetnotenzone h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); font-weight: 500; margin-bottom: .5em; border: 0; }
.voetnotenzone ul { list-style: none; padding: 0; }
.voetnotenzone li { margin-bottom: .3em; }

.voetnoten { font-size: 13px; color: var(--text-muted); }

/* ── Kaarten en tegels ────────────────────────────────────────────────── */
.kaart { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--hoek); padding: 16px; }

.tegels { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tegel {
  display: block; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--hoek); padding: 14px;
  transition: background .16s ease, border-color .16s ease;
}
.tegel:hover { background: var(--hover); border-color: var(--border-sterk); color: var(--text); }
.tegel .naam { font-weight: 600; margin-bottom: 2px; }
.tegel .bij { font-size: 12px; color: var(--text-muted); }

/* ── Meldingen ────────────────────────────────────────────────────────── */
.melding { border: 1px solid var(--border); border-radius: var(--hoek);
  padding: 10px 12px; font-size: 13px; background: var(--surface2); margin: 1em 0; }
.melding-ontbreekt { border-left: 3px solid var(--orange); }

.bandje { font-size: 12.5px; color: var(--text-muted); background: var(--surface2);
  border: 1px solid var(--border); border-left: 3px solid var(--border-sterk);
  border-radius: var(--hoek); padding: 8px 12px; margin-bottom: 1.4em; }

/* ── Metaregel onder een titel ────────────────────────────────────────── */
.meta { font-size: 12.5px; color: var(--text-muted); margin-bottom: 1.4em; }
.meta .scheiding { opacity: .5; margin: 0 .4em; }

/* ── Skip-link ────────────────────────────────────────────────────────── */
.skip-link { position: absolute; top: -48px; left: 8px; z-index: 100;
  background: var(--accent); color: var(--accent-contrast);
  padding: 8px 12px; border-radius: var(--hoek-sm); text-decoration: none; }
.skip-link:focus { top: 8px; }

/* ── Themaknop ────────────────────────────────────────────────────────── */
.knop {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--hoek-sm); color: var(--text);
  padding: 5px 10px; font-size: 12.5px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.knop:hover { background: var(--hover); border-color: var(--border-sterk); color: var(--text); }

/* ── De inlogpoort ────────────────────────────────────────────────────── */
/* Eén kaart, gecentreerd, zonder navigatie eromheen. Wie niet is ingelogd
   hoort de vorm van de kennisbank niet te zien — ook niet als omtrek. */

.poort {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px; gap: 14px;
}
.poort-kaart {
  width: 100%; max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--hoek);
  padding: 26px 24px;
}
.poort-merk {
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.poort-uitleg { font-size: 12.5px; color: var(--text-muted); margin-bottom: 20px; }
.poort-voet { font-size: 12px; color: var(--text-muted); }

.veld { margin-bottom: 14px; }
.veld label {
  display: block; font-size: 12.5px; font-weight: 500;
  margin-bottom: 4px;
}
.veld input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-sterk);
  border-radius: var(--hoek-sm);
  color: var(--text);
  padding: 8px 10px;
}
.veld input:focus-visible { border-color: var(--text-muted); }
.veld .hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.knop-hoofd {
  width: 100%;
  background: var(--accent); color: var(--accent-contrast);
  border: 1px solid var(--accent);
  border-radius: var(--hoek-sm);
  padding: 9px 12px; font-weight: 600; cursor: pointer;
  transition: background .12s ease;
}
.knop-hoofd:hover { background: var(--accent-light); border-color: var(--accent-light); }
.knop-vlak {
  width: 100%;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border-sterk);
  border-radius: var(--hoek-sm);
  padding: 9px 12px; cursor: pointer;
  transition: background .12s ease;
}
.knop-vlak:hover { background: var(--hover); }

/* Een foutmelding draagt naast kleur ook een rand en een woord — kleur alleen
   is hier niet genoeg, en op een zwart-witscherm moet het ook werken. */
.poort-fout {
  border: 1px solid var(--red);
  border-left: 3px solid var(--red);
  border-radius: var(--hoek-sm);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  padding: 9px 11px; font-size: 13px; margin-bottom: 16px;
}

.scheider {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0; color: var(--text-muted); font-size: 12px;
}
.scheider::before, .scheider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}


/* ── De infobox ───────────────────────────────────────────────────────────
   Het kader naast een artikel: wat je over dit stuk moet weten vóórdat je het
   leest.

   NAAST de tekstkolom en niet erbinnen. De eerste versie liet hem zweven met
   `float: right`, zoals Wikipedia doet — maar Wikipedia heeft geen vaste
   kolombreedte. Hier botste hij op alles wat zelf een achtergrond heeft: een
   callout die eronder doorliep, een tabel die ertegenaan schoof. Twee vlakken
   met een eigen kleur die elkaar overlappen leest als een fout.

   Nu een raster: de tekst houdt zijn 860px, de infobox staat in de witruimte
   rechts daarvan. Onder de 1100px valt hij terug boven het artikel, want naast
   een kolom van 860px is dan geen ruimte meer. */

.artikelraam {
  display: grid;
  grid-template-columns: minmax(0, var(--kolom)) var(--infobox);
  gap: 28px;
  align-items: start;
  max-width: var(--raam);
  margin-inline: auto;
}

/* Pagina's zonder infobox houden gewoon de tekstkolom, gecentreerd. */
.artikelraam.zonder-infobox { grid-template-columns: minmax(0, var(--kolom)); justify-content: center; }

.infobox {
  grid-column: 2;
  /* Meeschuiven bij het scrollen: bij een lang artikel blijft de herkomst in
     beeld. 60px is de kopbalk plus wat lucht. */
  position: sticky;
  top: 76px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--hoek);
  font-size: 12.5px;
  line-height: var(--regel-strak);
  overflow: hidden;
}

.infobox-kop {
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  padding: 9px 12px;
  font-weight: 700;
  font-size: 13px;
}

.infobox-groep {
  background: var(--surface2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 5px 12px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}

.infobox-rij {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  padding: 7px 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.infobox-rij:first-of-type { border-top: 0; }
.infobox-rij dt { color: var(--text-muted); }
.infobox-rij dd { margin: 0; }

.infobox dl { margin: 0; }

/* De etiketten. Klein, met een rand, zodat ze als groep leesbaar blijven ook
   als er acht staan. */
.etiketten { display: flex; flex-wrap: wrap; gap: 4px; }
.etiket {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--border-sterk);
  border-radius: var(--hoek-sm);
  font-size: 11.5px;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.etiket:hover { background: var(--hover); color: var(--text); }
.etiket .ruimte { color: var(--text-muted); }

/* Bewijskracht is geen sierlabel maar een leesinstructie: het zegt wat je met
   een stuk mag. Prospectief en afgeleid krijgen daarom kleur; retrospectief —
   de gewone toestand — niet. */
.bewijs-prospectief { color: var(--orange); font-weight: 600; }
.bewijs-afgeleid { color: var(--orange); font-weight: 600; }

@media (max-width: 1100px) {
  /* Onder deze breedte is er naast een kolom van 860px geen plek meer voor een
     kader van 300px. De infobox gaat dan boven het artikel staan, over de
     volle breedte, en schuift niet meer mee. */
  .artikelraam { grid-template-columns: minmax(0, 1fr); }
  .infobox { grid-column: 1; grid-row: 1; position: static; }
}

/* ── Het dashboard ────────────────────────────────────────────────────── */
/* Blokken op de startpagina. Ze delen één vorm, want het verschil tussen een
   actie en een gevoelig punt zit in wat er staat, niet in hoe het kader eruit
   ziet. Wie elk blok zijn eigen uiterlijk geeft, maakt een pagina die je moet
   leren lezen. */

.blok { margin: 0 0 2em; }

.blok-kop {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 .7em; padding-bottom: .35em;
  border-bottom: 1px solid var(--border);
}
.blok-kop h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); font-weight: 500; margin: 0;
}
.blok-kop .telling { font-size: 12px; color: var(--text-muted); }
.blok-kop .rest { margin-left: auto; font-size: 12px; color: var(--text-muted); }

.regels { list-style: none; padding: 0; margin: 0; }
.regels li {
  display: flex; gap: 10px; align-items: baseline;
  padding: .45em 0; border-bottom: 1px solid var(--border-zacht, var(--border));
}
.regels li:last-child { border-bottom: 0; }
.regels .tekst { flex: 1; min-width: 0; }
.regels .waar { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* De datum draagt twee kanalen, kleur én woord. Op een scherm waar "haal ik
   dit?" de vraag is, mag kleur nooit het enige verschil zijn — dat is dezelfde
   afweging die het jarvis-palet maakt voor zijn vier statussen. */
.wanneer {
  font-variant-numeric: tabular-nums; font-size: 12px;
  white-space: nowrap; min-width: 7.5em;
}
.wanneer-verstreken { color: var(--red, #b3261e); font-weight: 600; }
.wanneer-vandaag { color: var(--orange, #9a6700); font-weight: 600; }
.wanneer-komend { color: var(--text-muted); }
.wanneer-geen { color: var(--text-muted); font-style: italic; }

.leeg { color: var(--text-muted); font-size: 13px; padding: .4em 0; }

/* ── Het kruimelpad ───────────────────────────────────────────────────── */
/* Afgeleid uit het pad in de vault en niet uit de geschiedenis van de browser.
   Een spoor van waar je vandaan kwam klopt alleen zolang je niet via een link
   van buiten binnenkomt, en dan wijst het je een weg terug die je nooit hebt
   gelopen. De mapstructuur klopt altijd, en zegt bovendien iets: `Wiki` is
   gedistilleerd, `Raw` is bronmateriaal, `Outputs` is wat eruit voortkwam. */
.kruimels { margin: 0 0 1em; }
.kruimels ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .15em;
  font-size: 12.5px; color: var(--text-muted);
}
.kruimels li + li::before {
  content: "›";
  margin: 0 .45em 0 .3em;
  color: var(--text-muted);
  opacity: .6;
}
.kruimels a { color: var(--text-muted); }
.kruimels a:hover { color: var(--text); }

/* De laatste kruimel is de pagina zelf: geen link, en dat mag je zien. */
.kruimels [aria-current="page"] { color: var(--text); }

/* ── De briefing instellen ────────────────────────────────────────────── */
.briefingvolgorde { list-style: none; padding: 0; margin: 0; counter-reset: bv; }
.briefingvolgorde li {
  display: flex; align-items: center; gap: 10px;
  padding: .45em 0; border-bottom: 1px solid var(--border);
  counter-increment: bv;
}
.briefingvolgorde li::before {
  content: counter(bv, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted); font-size: 12px; min-width: 1.6em;
}
.briefingvolgorde .bnaam { flex: 1; }
.briefingvolgorde .buit {
  font-size: 12px; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--hoek-sm); padding: 0 6px;
}

/* Twee knopjes en geen sleepbeweging: dat werkt met het toetsenbord, zonder
   JavaScript, en op een telefoon. */
.briefingvolgorde .bknoppen { display: flex; gap: 4px; }
.briefingvolgorde .bknoppen form { margin: 0; }
.briefingvolgorde .bknoppen button {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--hoek-sm); color: var(--text);
  cursor: pointer; font-size: 13px; line-height: 1; padding: 4px 8px;
}
.briefingvolgorde .bknoppen button:hover { background: var(--hover); border-color: var(--border-sterk); }

.briefingblok { padding: .6em 0; border-bottom: 1px solid var(--border); }
.bkeuze { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.bkeuze input { margin-top: .25em; flex: none; }
.bbronnen {
  display: grid; gap: 2px 16px; margin: .5em 0 0 1.6em;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  font-size: 13px;
}
.bewaarknop {
  margin-top: 1.4em; padding: 8px 18px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-sterk);
  border-radius: var(--hoek-sm); color: var(--text); font: inherit;
}
.bewaarknop:hover { background: var(--hover); }

/* De snelkoppelingen op de instellingenpagina. Een lijst en geen tegels: hier
   beheer je ze, op het dashboard gebruik je ze. */
.tegellijst { list-style: none; padding: 0; margin: 0; }
.tegellijst li {
  display: grid; align-items: baseline; gap: 4px 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: .4em 0; border-bottom: 1px solid var(--border);
}
.tegellijst .tl-adres { font-size: 12.5px; color: var(--text-muted); }
.tegellijst form { margin: 0; }
.tegellijst .tl-weg {
  background: none; border: 0; cursor: pointer; padding: 0;
  font: inherit; font-size: 12.5px; color: var(--text-muted);
  text-decoration: underline; text-decoration-color: currentColor;
}
.tegellijst .tl-weg:hover { color: var(--red, #b3261e); }

.tegelvorm-breed {
  display: grid; gap: 10px; align-items: end; margin-top: 1.4em;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 1fr) auto;
}
.tegelvorm-breed label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tegelvorm-breed .veldkop {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
}
.tegelvorm-breed input {
  border: 1px solid var(--border); border-radius: var(--hoek-sm);
  background: var(--surface); color: var(--text);
  padding: 7px 9px; font: inherit; font-size: 14px; min-width: 0;
}
.tegelvorm-breed input:focus { outline: 2px solid var(--focus, var(--border-sterk)); outline-offset: 1px; }
.tegelvorm-breed .veldfout { font-size: 12.5px; color: var(--red, #b3261e); }

@media (max-width: 760px) {
  .tegelvorm-breed { grid-template-columns: minmax(0, 1fr); }
  .tegellijst li { grid-template-columns: minmax(0, 1fr) auto; }
  .tegellijst .tl-adres { grid-column: 1 / -1; }
}