:root {
    --bg: #05080a;
    --bg-elevated: #0a1210;
    --fg: #a8ffb0;
    --fg-bright: #66ffcc;
    --fg-dim: #4f9a72;
    --accent: #00ff9c;
    --accent-2: #00d9ff;
    --border: #1a3a2a;
    --mark-bg: #00ff9c;
    --pink: #ff2d95;
    color-scheme: dark;
  }
  * { box-sizing: border-box; }
  html { background: var(--bg); }
  body {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-feature-settings: 'liga' 1, 'calt' 1;
    -webkit-font-smoothing: antialiased;
    background: var(--bg);
    color: var(--fg);
    /* 7-9 (Martijn: "frame mag dynamisch groeien in de breedte (dat mag de hele vault) vooral bij
       hoge resoluties is het vaak te smal"): het kader was vast 800px, ook op een 27-inch scherm.
       Nu groeit het mee tot 1500px en houdt het op elk scherm marge aan de zijkant. Lopende tekst
       blijft wél een leeskolom -- die staat hieronder op 80ch -- dus de winst gaat naar tabellen,
       code en kaarten, precies waar het te krap zat. */
    max-width: min(1500px, 94vw);
    margin: 0 auto;
    /* Onderaan ruimte voor wat er zweeft: het dock (incidenten/context/start) staat op
       bottom:44px en is 30px hoog, dus zijn bovenrand zit 74px boven de onderkant van het
       scherm -- gemeten op 390x844, 2-9. Met 4rem (64px) lag het dock over de laatste regels
       tekst. Op een venster smaller dan ~1500px overlapt het dock de tekstkolom altijd, dus
       deze ruimte reserveren we overal en niet in een media query. */
    padding: 1.2rem 1.2rem 5.6rem;
    line-height: 1.6;
    font-size: 15.5px;
  }
  /* 3-9 (Martijn: "het toonkader is te smal ... prettige aflezing van het hele script"):
     800px is een goede leeskolom voor proza en een slechte voor code -- regels vielen buiten
     het kader terwijl er links en rechts elk ~340px leeg bleef. Alleen de bronweergave krijgt
     de volle breedte; notities houden hun kolom. */
  /* 3-9, na Martijns correctie: "moet wel in het midden blijven staan mag alleen zinnen niet
     afkappen". Dus geen volle breedte (dat lijnde links uit), maar een bredere kolom die blijft
     centreren -- het niet-afkappen doet het omslaan hieronder, niet de breedte. */
  body.srcwide { max-width: min(1700px, 96vw); }
  /* Op een telefoon is 94vw juist verlies: daar is de rand al padding. */
  @media (max-width: 640px) { body, body.srcwide { max-width: 100%; } }
  body.srcwide .filesrc { white-space: pre-wrap; overflow-wrap: anywhere; }
  /* de regel hangt: het regelnummer is 4 tekens plus een spatie, dus een omgeslagen regel
     begint onder de code en niet onder het nummer. */
  body.srcwide .filesrc .srcline { display: block; padding-left: 5ch; text-indent: -5ch; }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0,255,156,0.025) 0px, rgba(0,255,156,0.025) 1px, transparent 1px, transparent 3px);
    z-index: 999;
  }
  a { color: var(--accent-2); text-decoration: none; }
  a:hover { color: var(--fg-bright); text-shadow: 0 0 6px var(--accent-2); text-decoration: underline; }
  h1, h2, h3 {
    color: var(--accent);
    text-shadow: 0 0 8px rgba(0,255,156,0.35);
    letter-spacing: 0.02em;
  }
  /* 29-8 (Martijn: "de lettertypes in de daily notes headers mogen wel wat kleiner ...
     uberhaupt die grote hoeft niet"): koppen stonden op de browser-default -- h1 2em,
     h2 1.5em -- waardoor een daily note een half scherm kop toonde voor de eerste regel.
     In een terminal onderscheidt een kop zich door kleur en de #-prefix, niet door formaat. */
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1rem; }
  h3 { font-size: 0.94rem; }
  /* 30-8 (Martijn: "dubbel enters, groot font ... titel mag wat groter maar de hashtags
     kleiner"): de kopmarges kostten per lege sectie een blanco regel boven én onder, dus
     een daily note met lege Focus/Notes stond half leeg voor de eerste logregel. */
  h1, h2, h3, h4 { margin: 0.7em 0 0.2em; line-height: 1.3; }
  h2, h3, h4 { margin-top: 0.55em; }
  .note-body > h1:first-child { margin-top: 0.2em; }
  /* 4-9 (Martijn): het Focus-blok van een daily note staat dicht en klapt open op een klik.
     De h2 blijft in de summary staan, dus kleur, formaat en de ##-marker komen ongewijzigd mee;
     alleen de eigen driehoek van <details> gaat weg, met een eigen pijltje in de plaats. */
  .note-body details.focusvouw > summary { cursor: pointer; list-style: none; }
  .note-body details.focusvouw > summary::-webkit-details-marker { display: none; }
  .note-body details.focusvouw > summary > h2 { display: block; margin-bottom: 0; }
  /* 4-9 (Martijn: "zet de klapbutton tussen ##Focus en ##Log"): het pijltje stond achter de
     koptekst; op een eigen regel eronder valt het in de dichte stand precies tussen de twee koppen. */
  .note-body details.focusvouw > summary::after {
    content: "\25b8"; display: block; color: var(--fg-dim); font-size: .8em;
    line-height: 1.3; margin: .1em 0 .2em;
  }
  .note-body details.focusvouw[open] > summary::after { content: "\25be"; }
  .note-body details.focusvouw > summary:hover::after { color: var(--accent); }
  .note-body details.focusvouw > *:not(summary):first-of-type { margin-top: .2em; }
  /* de #-prefix markeert het niveau; hij hoeft niet op kopformaat mee te groeien */
  h1::before, h2::before, h3::before {
    color: var(--pink); font-size: 0.78em; opacity: 0.7; letter-spacing: 0;
  }
  h1::before { content: "# "; }
  /* een kop die alleen een afbeelding is (het logo op Start) draagt geen #-marker, geen
     extra kader (hij tekent zijn eigen rand al), en lijnt uit met de chips eronder: de PNG
     draagt ~1px eigen marge (gemeten 1-9; display:block heft de inline-inspringing al op). De a-varianten
     bestaan omdat shell.js het logo in een link naar de Vault Handleiding wikkelt. */
  h1:has(> img.emb:only-child)::before, h1:has(> a > img.emb:only-child)::before { content: none; }
  h1 > img.emb:only-child, h1 > a > img.emb:only-child {
    border: none; display: block; margin-left: -1px;
    /* een klein beetje stranger-things-gloed, in de eigen huisstijl (groen, niet rood) en
       met een trage ademhaling in plaats van geflikker (1-9) */
    filter: drop-shadow(0 0 4px rgba(0, 255, 156, 0.2)) drop-shadow(0 0 14px rgba(0, 255, 156, 0.08));
    animation: logo-gloed 4.5s ease-in-out infinite;
  }
  @keyframes logo-gloed {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(0, 255, 156, 0.2)) drop-shadow(0 0 14px rgba(0, 255, 156, 0.08)); }
    50%      { filter: drop-shadow(0 0 5px rgba(0, 255, 156, 0.3))  drop-shadow(0 0 18px rgba(0, 255, 156, 0.13)); }
  }
  h2::before { content: "## "; }
  h3::before { content: "### "; }
  .topbar {
    --veld-pad-y: 0.45rem; --veld-fs: 0.95rem; --veld-lh: 1.35;
    display: flex; gap: 0.6rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,255,156,0.06), inset 0 0 20px rgba(0,255,156,0.03);
  }
  .topbar > a {
    display: inline-flex; align-items: center;
    padding: var(--veld-pad-y) 0.7rem; border: 1px solid var(--border);
    border-radius: 3px; background: var(--bg);
    line-height: var(--veld-lh); font-size: var(--veld-fs);
  }
  .topbar > a:hover { text-decoration: none; border-color: var(--accent); }
  .topbar a.home {
    gap: .3em;
    font-weight: 700;
    color: var(--accent);
    text-shadow: 0 0 8px rgba(0,255,156,0.5);
    white-space: nowrap;
  }
  .topbar a.home::before { content: ">"; color: var(--fg-dim); }
  .topbar a.home::after {
    content: "_"; color: var(--pink); text-shadow: 0 0 8px rgba(255,45,149,0.6);
    animation: blink 1.1s steps(1) infinite;
    margin-left: -.15em;
  }
  /* 28-8 UX: zoeken stond op twee regels en nam een derde van het scherm; nu één rij die meegroeit.
     De twee velden delen de ruimte, met een duidelijk label ervoor zodat het verschil zichtbaar is. */
  .topbar form.search { flex: 1 1 260px; min-width: 220px; display: flex; align-items: stretch; gap: .4rem; margin: 0; }
  .topbar form.search input { flex: 1 1 auto; min-width: 0; }
  .topbar .sep { flex-basis: 100%; height: 0; display: none; }
  /* De rij vult zichzelf: elke chip groeit mee, dus geen rafelige rechterkant en op een telefoon
     geen halve regel met één knop erop (Martijn, 2-9: "zorg er voor dat de ruimte op de regel goed
     verdeeld wordt zodat het mooi oogt en fijn werkt zowel desktop als mobiel"). De twee
     icoonknoppen groeien juist níét mee -- die horen klein te blijven naast zeven chips met tekst. */
  .startmenu { display: flex; flex-wrap: wrap; gap: .4rem; margin: .1rem 0 .9rem; align-items: stretch; }
  .startmenu a, .startmenu .pw-knop {
    flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 6px; padding: .2rem .7rem;
    color: var(--accent); text-decoration: none; font-size: .9rem; text-align: center;
  }
  .startmenu a:hover { border-color: var(--accent); background: rgba(0,255,156,0.08); }
  /* 6-9: 'bronnen' is één chip met twee doelen (boeken, opensource); het label staat er gedempt
     vóór. Zelfde lijst en hoogte als de andere chips, de scheiding zit binnenin. */
  .startmenu .sm-split { flex: 1 1 auto; display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
  .startmenu .sm-split .sm-lbl { display: inline-flex; align-items: center; padding: 0 .55rem; color: var(--fg-dim); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; border-right: 1px solid var(--border); }
  .startmenu .sm-split a { flex: 1 1 auto; border: 0; border-radius: 0; }
  .startmenu .sm-split a + a { border-left: 1px solid var(--border); }
  .startmenu .sm-split { min-width: 0; }
  .startmenu .sm-split a { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* itamae-power en de twee icoontjes horen bij elkaar en breken samen naar een volgende regel. */
  .startmenu .sm-groep { display: inline-flex; gap: .4rem; flex: 1 1 auto; min-width: 0; }
  /* Icoon-only: vaste breedte, groeit niet mee, en een tikdoel dat op een telefoon te raken is. */
  .startmenu a.sm-icoon { flex: 0 0 auto; min-width: 2.4rem; padding: .2rem .4rem; font-size: 1.05rem; line-height: 1.35; }
  .startmenu a.sm-icoon .tg-mark { width: 1.15rem; height: 1.15rem; display: block; }
  @media (max-width: 640px) {
    /* Onder de 640 px is 'zo breed mogelijk' te dun: twee per rij leest beter en tikt beter. */
    .startmenu a, .startmenu .pw-knop { flex: 1 1 calc(50% - .4rem); }
    .startmenu a.sm-icoon { flex: 0 0 auto; min-width: 2.8rem; }
    /* de gesplitste chip krijgt een eigen regel; anders duwt hij de icoongroep uit beeld */
    .startmenu .sm-split { flex: 1 1 100%; }
    .startmenu .sm-split a { flex: 1 1 0; }
  }
  @media (max-width: 780px) { .topbar .sep { display: block; } }
  /* 6-9: de metaregel onder het menu (grootte, datum, bron, chips) stond nowrap en liep op een telefoon tot
     785 px door; op een smal scherm mag hij gewoon omlopen. */
  @media (max-width: 640px) { .crumbs.ctxbar small, .ctxbar small, .crumbs small { white-space: normal; } }
  @keyframes blink { 50% { opacity: 0; } }
  form.search { flex: 1 1 230px; min-width: 0; display: flex; gap: 0.4rem; }   /* 27-8: knoppen schoven over elkaar; inputs mogen krimpen, formulieren wrappen */
  form.search input[type=text] { min-width: 0; }
  form.search input[type=text] {
    flex: 1; padding: var(--veld-pad-y, 0.45rem) 0.7rem; border-radius: 3px;
    border: 1px solid var(--border);
    background: #030504;
    color: var(--fg-bright);
    font-family: inherit;
    font-size: var(--veld-fs, 0.95rem);
    line-height: var(--veld-lh, 1.35);
  }
  form.search input[type=text]::placeholder { color: var(--fg-dim); }
  form.search input[type=text]:focus {
    outline: none;
    border-color: var(--pink);
    box-shadow: 0 0 10px rgba(255,45,149,0.35);
  }
  form.search button {
    padding: var(--veld-pad-y, 0.45rem) 0.9rem; border-radius: 3px;
    border: 1px solid var(--accent);
    background: rgba(0,255,156,0.08);
    color: var(--accent);
    font-family: inherit;
    font-size: var(--veld-fs, 0.95rem);
    line-height: var(--veld-lh, 1.35);
    cursor: pointer;
  }
  form.search button:hover { background: rgba(0,255,156,0.18); box-shadow: 0 0 10px rgba(0,255,156,0.3); }
  ul.listing { list-style: none; padding: 0.6rem 0.9rem 0.6rem 1.2rem; margin: 0;
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated);
    box-shadow: inset 0 0 20px rgba(0,255,156,0.03); }
  ul.listing li { position: relative; padding: 0.22rem 0.3rem 0.22rem 1.5rem; }
  ul.listing li::before {            /* verticale stam, doorlopend van item naar item */
    content: ""; position: absolute; left: 0.45rem; top: 0; bottom: 0;
    border-left: 1px solid var(--fg-dim); opacity: 0.6;
  }
  ul.listing li::after {             /* tak naar het item */
    content: ""; position: absolute; left: 0.45rem; top: 50%; width: 0.75rem;
    border-top: 1px solid var(--fg-dim); opacity: 0.6;
  }
  ul.listing li:first-child::before { top: 50%; }
  ul.listing li:last-child::before { bottom: 50%; }
  ul.listing li:hover { background: rgba(0,255,156,0.05); border-radius: 4px; }
  ul.listing li.dir a::after { content: "/"; color: var(--pink); }
  ul.listing li.file a { color: var(--fg); }
  ul.listing li.file a:hover { color: var(--fg-bright); }
  /* Afgeronde maand in de dagnotities (30-8): een uitklapbare groep onderin de lijst.
     Ziet eruit als een map, maar is alleen een groepering -- de bestanden staan gewoon in de map. */
  ul.listing li.maand > details > summary { cursor: pointer; color: var(--pink); list-style: none; }
  ul.listing li.maand > details > summary::-webkit-details-marker { display: none; }
  ul.listing li.maand > details > summary::before { content: "▸ "; }
  ul.listing li.maand > details[open] > summary::before { content: "▾ "; }
  ul.listing li.maand > details > summary small { color: var(--fg-dim); }
  ul.listing li.maand > details > ul.listing { margin: .25rem 0 .35rem; background: transparent; box-shadow: none; }
  /* korte gloed als de pagina zichzelf net heeft ververst */
  #live-body.live-nieuw { animation: liveflits 1.8s ease-out; }
  @keyframes liveflits { from { background: rgba(0,255,156,0.10); } to { background: transparent; } }
  /* 28-8 UX: één duidelijke plaatsaanduiding i.p.v. vier gelijkwaardige 'path:'-regels boven elkaar.
     Het eerste kruimelpad is de kop van de pagina; alles daarna (bestandsbalk, tags, acties) is secundair. */
  .crumbs {
    font-size: 0.88rem; color: var(--fg-dim); margin: 0 0 .35rem; word-break: break-word; line-height: 1.5;
  }
  .crumbs a { color: var(--fg); }
  .crumbs a:hover { color: var(--accent); }
  .crumbs small { opacity: .72; }
  .crumbs + .crumbs, .ctxbar, .meta-row {
    font-size: .78rem; opacity: .78; margin-top: 0; margin-bottom: .3rem;
  }
  .meta-row { display: flex; flex-wrap: wrap; gap: .25rem .9rem; align-items: baseline; color: var(--fg-dim); }
  .meta-row .sep { opacity: .35; }
  .note-body {
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated);
    box-shadow: 0 0 20px rgba(0,255,156,0.05), inset 0 0 24px rgba(0,255,156,0.03);
    padding: 0.4rem 1.2rem 1rem; margin-top: 0.45rem;
  }
  /* 30-8: frontmatter, tags en graph stonden als drie losse regels tussen de titel en de
     notitie. Eén regel; een opengeklapte details pakt daaronder de volle breedte. */
  .note-meta {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .55rem;
    font-size: .76rem; margin: .25rem 0 0;
  }
  .note-meta > * { margin: 0; }
  .note-meta h1 { margin: 0; font-size: 1.4rem; }
  /* display:contents laat de tags en links los in dezelfde flexrij vallen, zodat ze de ruimte
     naast de titel opvullen in plaats van als één blok naar de volgende regel te springen */
  .note-meta .meta-row { display: contents; }
  /* het verkennerpad is één regel waard, geen vier: knijp het af in plaats van te wikkelen */
  .note-meta .ctxbar {
    margin: 0; font-size: inherit; opacity: 1;
    flex: 1 1 10rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .note-meta .meta-row { margin: 0; font-size: inherit; }
  .note-meta summary,
  .note-meta details.graph-details summary { font-size: inherit; }
  .note-meta details[open] { flex-basis: 100%; }
  /* Het kader mag breed zijn, lopende tekst niet: een regel van 1500px leest slecht. Alleen proza
     krijgt een leeskolom; tabellen, code en afbeeldingen pakken de volle breedte (7-9). */
  .note-body p, .note-body ul, .note-body ol, .note-body blockquote { max-width: 82ch; }
  .note-body td p, .note-body td ul, .note-body th p { max-width: none; }
  .note-body .tbl { max-width: 100%; overflow-x: auto; margin: 0.6rem 0; border-radius: 6px; }
  .note-body .tbl::-webkit-scrollbar { height: 6px; } .note-body .tbl::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  .note-body table { border-collapse: collapse; margin: 0; width: 100%; font-size: 0.92em; }
  .note-body td, .note-body th { vertical-align: top; overflow-wrap: break-word; min-width: 3.5rem; line-height: 1.45; }
  /* 28-8: nowrap op de eerste kolom alleen als het echt een labelkolom is (.lbl, serverkant gemeten).
     Stond eerder op elke tabel: boektitels van 78 tekens konden niet afbreken, kolom 1 werd loeibreed
     en de rest werd platgedrukt. */
  .note-body .tbl.lbl td:first-child, .note-body .tbl.lbl th:first-child { white-space: nowrap; min-width: 0; }
  .note-body .tbl:not(.lbl) td:first-child, .note-body .tbl:not(.lbl) th:first-child { max-width: 26rem; }
  .note-body td code, .note-body th code { overflow-wrap: break-word; white-space: normal; }
  /* Een korte bestandsnaam of vlag hoort niet middenin te breken: de browser breekt uit zichzelf
     op elk koppelteken, dus werd `vault-stale-check.py` `vault-stale-` / `check.py` terwijl er
     ruimte zat (5-9-2026). Alleen korte spans krijgen dit; lange paden mogen wél afbreken, anders
     scrollt een tabel als die in Accounts.md ineens 500px zijwaarts. De grens staat serverkant. */
  .note-body td code.heel, .note-body th code.heel { white-space: nowrap; }
  /* Registratietabel (proto · bind · poort · dienst · lan · waarom), 7-9-2026. Vaste breedtes voor de
     vijf korte kolommen, de rest van de regel is voor *waarom* -- die kolom draagt de uitleg en viel
     in de `wide`-vorm juist buiten beeld. Geen zijwaartse scroll: alles past. */
  /* Het kader groeit sinds 7-9 mee met het scherm, dus deze tabel hoeft er niet meer uit te breken
     (dat gaf op een 1280-scherm precies de overloop die Martijn zag): hij vult gewoon het kader. */
  .note-body .tbl.poorten { overflow-x: auto; max-width: 100%; width: 100%; }
  .note-body .tbl.poorten table { table-layout: fixed; font-size: 0.88em; }
  .note-body .tbl.poorten td, .note-body .tbl.poorten th { min-width: 0; padding: 0.3rem 0.55rem; }
  .note-body .tbl.poorten .c-proto { width: 4.3rem; }
  .note-body .tbl.poorten .c-bind { width: 8rem; }
  .note-body .tbl.poorten .c-poort { width: 4.2rem; text-align: right; font-variant-numeric: tabular-nums; }
  .note-body .tbl.poorten .c-dienst { width: 15rem; }
  .note-body .tbl.poorten .c-lan { width: 3.2rem; text-align: center; }
  .note-body .tbl.poorten td.c-dienst { color: var(--fg); }
  .note-body .tbl.poorten td.c-waarom { color: var(--fg-dim); }
  .note-body .tbl.poorten tr:nth-child(even) td { background: rgba(255,255,255,0.018); }
  .note-body .tbl.poorten td.c-bind code, .note-body .tbl.poorten td.c-bind { white-space: nowrap; }
  /* ja / nee / ? als teken: in een tabel van veertig regels lees je een kleur sneller dan een woord */
  .note-body .lanchip, .note-body .protochip {
    display: inline-block; min-width: 2.1rem; padding: 0.02rem 0.3rem; border-radius: 999px;
    font-size: 0.85em; line-height: 1.5; text-align: center; border: 1px solid transparent;
  }
  .note-body .lan-ja { color: #7ee7b4; background: rgba(0,255,156,0.12); border-color: rgba(0,255,156,0.32); }
  .note-body .lan-nee { color: var(--fg-dim); background: rgba(255,255,255,0.05); border-color: var(--border); }
  .note-body .lan-vraag { color: #ffd479; background: rgba(255,196,0,0.13); border-color: rgba(255,196,0,0.35); }
  .note-body .p-tcp { color: #8fd6ff; background: rgba(90,180,255,0.12); border-color: rgba(90,180,255,0.3); }
  .note-body .p-udp { color: #d7b3ff; background: rgba(180,130,255,0.13); border-color: rgba(180,130,255,0.3); }
  /* Smal scherm: geen zes kolommen persen maar een kaartje per regel, met de kolomnaam ervoor. */
  @media (max-width: 720px) {
    .note-body .tbl.poorten { width: auto; max-width: 100%; }
    .note-body .tbl.poorten thead { position: absolute; left: -9999px; }
    .note-body .tbl.poorten table, .note-body .tbl.poorten tbody, .note-body .tbl.poorten tr, .note-body .tbl.poorten td { display: block; width: auto; }
    .note-body .tbl.poorten tr { border: 1px solid var(--border); border-radius: 6px; margin: 0.4rem 0; padding: 0.2rem 0; }
    .note-body .tbl.poorten td { border: 0; padding: 0.12rem 0.6rem; text-align: left; }
    .note-body .tbl.poorten td::before {
      content: attr(data-kol) " "; color: var(--fg-dim); font-size: 0.85em; display: inline-block; min-width: 4.2rem;
    }
    .note-body .tbl.poorten td.c-dienst { font-weight: 600; }
  }
  .note-body .tbl.wide { background: linear-gradient(to left, rgba(0,255,156,0.09), transparent 28px) right / 28px 100% no-repeat; }   /* hint: hier kun je zijwaarts scrollen */
  .note-body .tbl.wide td, .note-body .tbl.wide th { overflow-wrap: normal; max-width: 22rem; }
  .note-body .tbl.wide td:not(:first-child) { min-width: 7rem; }
  .note-body .tbl.wide th:first-child, .note-body .tbl.wide td:first-child { position: sticky; left: 0; background: var(--bg-elevated); z-index: 1; box-shadow: 2px 0 0 var(--border); }
  .note-body .tbl.wide tr:nth-child(even) td:first-child { background: #0c1714; }
  .note-body th { background: rgba(0,255,156,0.14); color: var(--accent); padding: 0.4rem 0.7rem; text-align: left; border-bottom: 1px solid var(--accent); }
  .note-body td { padding: 0.42rem 0.7rem; border-bottom: 1px solid var(--border); }
  .note-body tbody tr:last-child td { border-bottom: 0; }
  .note-body tr:nth-child(even) td { background: rgba(0,255,156,0.045); }
  .note-body img { max-width: 100%; border: 1px solid var(--border); }
  .note-body pre {
    overflow-x: auto;
    background: #030504;
    border: 1px solid var(--border);
    padding: 0.8rem;
    border-radius: 4px;
    color: var(--fg-bright);
  }
  .note-body code { color: var(--accent-2); }
  /* kopieerknop op codeblokken (27-8). De knop hangt aan een wrapper, niet aan de
     <pre> zelf: die scrollt horizontaal, en een absolute knop daarbinnen schuift mee weg. */
  .note-body .codewrap { position: relative; margin: 1em 0; }
  .note-body .codewrap > pre { margin: 0; }
  .note-body .codewrap > .copybtn {
    position: absolute; top: 6px; right: 6px; z-index: 2;
    font: inherit; font-size: 0.7rem; line-height: 1; padding: 5px 9px; cursor: pointer;
    color: var(--fg-dim); background: var(--bg-elevated);
    border: 1px solid var(--border); border-radius: 3px;
    opacity: 0.35; transition: opacity .12s, color .12s, border-color .12s;
  }
  .note-body .codewrap:hover > .copybtn { opacity: 1; }
  .note-body .codewrap > .copybtn:hover,
  .note-body .codewrap > .copybtn:focus-visible { color: var(--accent); border-color: var(--accent); opacity: 1; }
  .note-body .codewrap > .copybtn.ok { color: var(--accent); border-color: var(--accent); opacity: 1; }
  .note-body .codewrap > .copybtn.err { color: #ffb86b; border-color: #ffb86b; opacity: 1; }
  /* inline commando's zijn klikbaar-om-te-kopieren (27-8). Alleen code zonder link
     en zonder accountchip: die hebben hun eigen klikgedrag. */
  .note-body code.cp-inline { cursor: copy; }
  .note-body code.cp-inline:hover { color: var(--accent); border-bottom: 1px dotted var(--accent); }
  .note-body code.cp-inline.ok { color: var(--accent); border-bottom-style: solid; }
  .note-body code.cp-inline.ok::after { content: ' \2713'; }
  .note-body blockquote {
    border-left: 3px solid var(--accent);
    background: rgba(0,255,156,0.03);
    margin: 0.6rem 0; padding: 0.2rem 0.9rem; opacity: 0.9;
  }
  details summary { cursor: pointer; color: var(--fg-dim); }
  .search-hit {
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    background: var(--bg-elevated);
  }
  .search-hit .snippet { font-size: 0.9rem; color: var(--fg-dim); }
  mark { background: var(--mark-bg); color: #000; padding: 0 2px; border-radius: 2px; }
  ::selection { background: var(--pink); color: #fff; }
  a.wl { color: #3b9dfa; text-decoration: underline; text-underline-offset: 2px; }
  a.wl:hover { color: var(--pink); text-decoration-color: var(--pink); }
  /* De balk is informatief en vangt anders de klikken op alles wat er toevallig onder
     langs scrollt -- op /holmes waren de onderste ~30 px van de plaatsenlijst daardoor
     dood: een klik landde op .st-fill en er gebeurde niets. Links erin blijven klikbaar. */
  .statusbar { pointer-events: none; }
  .statusbar a, .statusbar button, .statusbar [role="button"] { pointer-events: auto; }
  .statusbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; align-items: stretch; font-size: 0.8rem; background: #0a1210; color: var(--fg-dim);
    border-top: 1px solid var(--border);
  }
  .statusbar span { padding: 0.25rem 0.8rem; white-space: nowrap; }
  .statusbar .st-key { background: var(--pink); color: #fff; font-weight: 700; }
  .statusbar .st-fill { flex: 1; overflow: hidden; text-overflow: ellipsis; }
  .statusbar .st-fill a { color: var(--fg-bright); }
  .statusbar .st-fill a:hover { color: var(--pink); }
  /* 8-9 (Martijn: "Start icoontje links onder mag groter zodat het makkelijker aan te klikken is"):
     het huisje krijgt een eigen klikvlak van ~1.6 regel hoog, zonder de balk hoger te maken. */
  .statusbar .st-fill a.st-home { display: inline-block; font-size: 1.5em; line-height: 1; padding: 0 0.55rem 0 0.35rem; margin: -0.3rem 0.1rem -0.3rem -0.2rem; vertical-align: middle; }
  .statusbar .st-date { color: var(--fg-dim); border-left: 1px solid var(--border); }
  .statusbar .st-enc { background: var(--border); color: var(--fg); }
  .statusbar .st-host { background: var(--accent-2); color: #000; font-weight: 700; }
  .graph-widget { position: relative; height: 260px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated);
    box-shadow: inset 0 0 24px rgba(0,255,156,0.03); overflow: hidden; margin: 0.4rem 0 0.8rem; }
  .graph-widget canvas { width: 100%; height: 100%; display: block; }
  .graph-widget.graph-full { height: 78vh; }
  .graph-widget.graph-x2 { height: 520px; }
  .graph-widget.graph-full.graph-x2 { height: calc(100vh - 42px); }   /* 27-8: was 150vh -> midden onder de vouw, 'graph verdwijnt naar onderen' */
  .graph-widget.graph-hidden.graph-x2 { height: 34px; }
  .graph-hide { position: absolute; right: 0.5rem; bottom: 0.4rem; z-index: 6; background: rgba(5,8,10,0.75); border: 1px solid var(--border); color: var(--fg-dim); border-radius: 6px; padding: 0.15rem 0.55rem; font-family: inherit; font-size: 0.75rem; cursor: pointer; }
  .graph-hide:hover { color: var(--accent); border-color: var(--accent); }
  .graph-widget.graph-hidden { height: 34px; }
  .graph-widget.graph-hidden canvas, .graph-widget.graph-hidden .graph-ctl, .graph-widget.graph-hidden .graph-meta, .graph-widget.graph-hidden .graph-side, .graph-widget.graph-hidden .gs-pal { display: none; }
  .graph-info { position: absolute; left: 0.5rem; bottom: 0.35rem; z-index: 6; width: 1rem; height: 1rem; line-height: 1rem; text-align: center; color: var(--fg-dim); border: 1px solid var(--border); border-radius: 50%; font-size: 0.65rem; cursor: help; background: rgba(5,8,10,0.75); }
  .graph-info:hover { color: var(--accent); border-color: var(--accent); }
  .graph-info::after { content: attr(data-help); display: none; position: absolute; left: 0; bottom: 1.7rem; width: min(440px, 80vw); padding: 0.45rem 0.6rem; background: rgba(5,8,10,0.96); border: 1px solid var(--accent); border-radius: 6px; color: var(--fg); font-size: 0.75rem; line-height: 1.4; white-space: normal; text-align: left; cursor: default; }
  .graph-info:hover::after { display: block; }
  .graph-widget .graph-meta { position: absolute; left: 1.9rem; bottom: 0.4rem; font-size: 0.55rem; color: var(--fg-dim); pointer-events: none; }
  .graph-ctl { position: absolute; right: 0.5rem; top: 0.5rem; display: flex; gap: 0.25rem; align-items: center; background: rgba(5,8,10,0.7); border: 1px solid var(--border); border-radius: 6px; padding: 0.15rem 0.3rem; font-size: 0.8rem; }
  .graph-ctl button { background: transparent; border: 1px solid var(--border); color: var(--accent); border-radius: 4px; font-family: inherit; cursor: pointer; padding: 0 0.45rem; line-height: 1.5; }
  .graph-ctl button:hover { border-color: var(--accent); background: rgba(0,255,156,0.1); }
  .graph-ctl button:disabled { opacity: 0.4; cursor: default; }
  .graph-ctl .graph-zoom { color: var(--fg-dim); min-width: 3.2em; text-align: center; }
  .graph-widget.graph-float { position: fixed; z-index: 940; margin: 0; border: 1px solid var(--accent); border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 20px rgba(0,255,156,0.15); background: var(--bg); resize: both; overflow: hidden; min-width: 320px; min-height: 220px; }
  .graph-widget.graph-float canvas { height: calc(100% - 28px); margin-top: 28px; }
  .graph-widget.graph-float .graph-hide, .graph-widget.graph-float [data-z=x2] { display: none; }   /* zinloos in een zwevend venster */
  .graph-widget.graph-float .graph-ctl { top: 34px; }
  /* 29-8 (Martijn: "crumble menu in graph mobiel is te lomp ... moet subtieler"): op ~390 px stond
     de knoppenbalk als een omkaderd blok van bijna rand tot rand bovenin de graph -- tien items
     naast elkaar, elk met eigen rand. Op de telefoon nu wat hij zelf voorstelde: een verticale
     strip tegen de linkerrand, losse ronde knopjes zonder kader, halfdoorzichtig tot je ze
     aanraakt. Het percentage valt weg (knijpzoomen laat dat zelf al zien). */
  .graph-widget.graph-float .graph-side { top: 28px; }
  .graph-widget.graph-float.graph-float-fs { inset: 0 !important; width: auto !important; height: auto !important; border-radius: 0; resize: none; }
  .gf-bar { position: absolute; left: 0; right: 0; top: 0; height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 0.5rem; background: rgba(0,255,156,0.08); border-bottom: 1px solid var(--border); cursor: move; user-select: none; z-index: 7; font-size: 0.8rem; }
  .gf-bar .gf-title { color: var(--accent); font-weight: 700; }
  .gf-bar .gf-title::before { content: "⋮⋮ "; color: var(--fg-dim); }
  .gf-bar button { background: transparent; border: 1px solid var(--border); color: var(--fg); border-radius: 4px; font-family: inherit; font-size: 0.75rem; cursor: pointer; margin-left: 0.2rem; padding: 0 0.35rem; }
  .gf-bar button:hover, .gf-bar button.on { border-color: var(--accent); color: var(--accent); }
  .graph-placeholder { border: 1px dashed var(--border); border-radius: 8px; padding: 0.6rem; color: var(--fg-dim); font-size: 0.85rem; text-align: center; }
  .graph-widget.graph-fs { position: fixed; inset: 0; z-index: 950; height: auto; border-radius: 0; border: none; margin: 0; background: var(--bg); }
  body.has-graph-fs { overflow: hidden; }
  /* 29-8 (Martijn: "in fullscreen de buttons voor de graph rechts verticaal, crumble boven in").
     Geldt op elk schermformaat, niet alleen op de telefoon: in fullscreen ís het beeld de inhoud, dus
     hoort de bediening langs de rand en niet als balk over de graph heen. Rechts, zodat de kruimel
     linksboven vrij blijft en die twee elkaar nooit raken. */
  /* position: fixed en niet absolute: in fullscreen dekt het kader het hele scherm, dus aan het
     scherm hangen is hier het robuustst.
     30-8: de meting van 29-8 ("op 390 px loopt het kader door tot voorbij de rechterrand, dus een
     rechts-uitlijning valt buiten beeld") klopte niet. In een echt 390 px-venster is
     documentElement.scrollWidth 390, staat het fullscreen-kader op links 0 / rechts 390, en landt
     deze strip met right:0.5rem op 351-382 -- ruim binnen beeld, ook op een screenshot. De oude
     meting kwam uit `chrome --headless --window-size=390,844`, dat de pagina breder opmaakt dan het
     plaatje dat het teruggeeft; alles lijkt dan rechts afgesneden. Meet zoiets in een echt smal
     venster (bijv. een iframe van 390 px), niet met --window-size. */
  /* Rechtsboven, niet verticaal gecentreerd (Martijn, 29-8). max-height erbij zodat de strip
     op een liggend scherm niet onder de onderrand doorloopt nu hij vanaf boven begint. */
  .graph-widget.graph-fs .graph-ctl { position: fixed; left: auto; right: 0.5rem; top: 0.5rem; transform: none; flex-direction: column; gap: 0.12rem; background: transparent; border-color: transparent; padding: 0; max-height: calc(100vh - 1rem); overflow-y: auto; }
  .graph-widget.graph-fs .graph-ctl button { width: 1.8rem; height: 1.8rem; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border-color: transparent; background: rgba(5,8,10,0.45); opacity: 0.55; }
  .graph-widget.graph-fs .graph-ctl button:hover { opacity: 1; border-color: var(--accent); }
  .graph-widget.graph-fs .graph-ctl button:disabled { opacity: 0.25; }
  .graph-widget.graph-fs .graph-ctl .graph-zoom { display: none; }
  .graph-widget.graph-fs .gf-ctx { position: fixed; top: 0.35rem; left: 0.5rem; right: auto; width: auto; max-width: calc(100vw - 3.6rem); border-radius: 999px; padding: 0.08rem 0.6rem; background: rgba(5,8,10,0.5); backdrop-filter: blur(2px); opacity: 0.7; }
  .graph-widget.graph-fs .gf-ctx .crumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 31-8 (Martijn: "soms twee layers over elkaar in de topbar"): in de losgemaakte stand zit de
     titelbalk (.gf-bar, 28 px hoog, z-index 7) bovenaan het kader. De kruimelbalk mikt daar
     overheen -- via '.graph-full .gf-ctx { top: 0 }' in de zwevende stand, en via 'top: 0.35rem'
     in fullscreen -- en verdwijnt er met z-index 3 onder. De top: 1.9rem uit de basisregel maakte
     die ruimte wél; alleen graph-full en graph-fs namen hem weer weg. Vier klassen zodat dit van
     beide wint, ongeacht de volgorde waarin de stylesheets binnenkomen. */
  .graph-widget.graph-full.graph-float .gf-ctx,
  .graph-widget.graph-float.graph-fs .gf-ctx { top: 32px; }
  /* 30-8: de uitzondering die de strip onder 641 px naar links zette is weg. Hij was gebouwd op een
     meetfout (zie de noot hierboven); op 390 px staat de strip gewoon rechts in beeld, zoals
     Martijn op 29-8 vroeg. Nagemeten in een 390 px-venster: rect 351-382 bij een viewport van 390. */
  body.has-graph-fs .statusbar { z-index: 960; }
  .graph-side { position: absolute; right: 0; top: 0; bottom: 0; width: 250px; transform: translateX(100%); transition: transform 0.25s ease; background: rgba(5,8,10,0.94); border-left: 1px solid var(--border); padding: 0.6rem 0.8rem; font-size: 0.78rem; z-index: 5; overflow: auto; }
  .graph-side.open { transform: translateX(0); }
  @media (min-width: 1101px) {
    .graph-side.left { right: auto; left: 0; width: 330px; transform: translateX(-100%); border-left: none; border-right: 1px solid var(--border); }
    .graph-side.left.open { transform: translateX(0); }
  }
  @media (max-width: 1100px) { .graph-side .gs-dock { display: none; } }
  .graph-side .gs-head { display: flex; align-items: center; gap: 0.3rem; color: var(--accent); font-weight: 700; margin-bottom: 0.4rem; }
  .graph-side .gs-head button { background: transparent; border: 1px solid var(--border); color: var(--fg-dim); border-radius: 4px; cursor: pointer; font-family: inherit; }
  .graph-side .gs-head .gs-reset { margin-left: auto; }
  .graph-side summary.gs-h { cursor: pointer; list-style: none; user-select: none; }
  .graph-side summary.gs-h::-webkit-details-marker { display: none; }
  .graph-side summary.gs-h::before { content: '▸ '; color: var(--fg-dim); }
  .graph-side details[open] > summary.gs-h::before { content: '▾ '; }
  .graph-side .gs-h { color: var(--pink); margin: 0.6rem 0 0.1rem; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; }
  .graph-side label { display: grid; grid-template-columns: 1fr; gap: 0.1rem; margin: 0.3rem 0; color: var(--fg-dim); }
  .graph-side label span { color: var(--fg); }
  .graph-side label b { color: var(--pink); font-weight: 400; font-size: 0.72rem; text-align: right; }
  .graph-side input[type=range] { width: 100%; accent-color: var(--accent); }
  .graph-side select { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: 0.78rem; }
  .graph-side .gs-lvrow { display: grid; grid-template-columns: 1fr 52px 18px; gap: 0.3rem; align-items: center; }
  .graph-side .gs-lvrow input[type=color] { height: 20px; }
  .graph-side .gs-lvsize { width: 100%; margin-top: 0.1rem; }
  .graph-side .gs-btn { width: 100%; margin: 0.2rem 0 0.4rem; background: rgba(0,255,156,0.08); border: 1px solid var(--border); color: var(--accent); border-radius: 4px; padding: 0.25rem; font-family: inherit; font-size: 0.75rem; cursor: pointer; }
  .graph-side .gs-btn:hover { border-color: var(--accent); }
  .graph-side .gs-swatch { width: 100%; height: 22px; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 0.7rem; color: var(--fg-dim); background: transparent; }
  .graph-side .gs-swatch:hover { border-color: var(--accent); }
  .gs-pal { position: absolute; z-index: 7; display: none; width: 176px; background: rgba(5,8,10,0.96); border: 1px solid var(--accent); border-radius: 8px; padding: 0.5rem; box-shadow: 0 8px 30px rgba(0,0,0,0.6); }
  .gs-pal.open { display: block; }
  .gs-pal-grid { display: grid; grid-template-columns: repeat(4, 34px); gap: 6px; }
  .gs-pal .gs-sw { width: 34px; height: 26px; border: 2px solid transparent; border-radius: 5px; cursor: pointer; }
  .gs-pal .gs-sw:hover { border-color: #fff; }
  .gs-pal .gs-sw[data-on] { border-color: var(--pink); }
  .gs-pal-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.45rem; font-size: 0.72rem; color: var(--fg-dim); }
  .gs-pal-foot input[type=color] { width: 40px; height: 22px; margin-left: 0.3rem; vertical-align: middle; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; }
  .gs-pal-close { background: transparent; border: 1px solid var(--border); color: var(--fg-dim); border-radius: 4px; cursor: pointer; font-family: inherit; }
  .graph-side .gs-cw { color: var(--fg-dim); font-size: 0.72rem; }
  .graph-side input[type=color] { width: 100%; height: 22px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; }
  details.graph-details summary { cursor: pointer; color: var(--fg-dim); font-size: 0.85rem; }
  #pv {
    position: fixed; z-index: 1000; display: none;
    width: min(480px, 88vw); max-height: 46vh; overflow: auto;
    background: var(--bg-elevated); border: 1px solid #3b9dfa; border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6); padding: 0.45rem 0.65rem;
    font-size: 12.5px; line-height: 1.38;
  }
  #pv.pv-pinned { width: min(620px, 92vw); max-height: 72vh; border-color: var(--accent); box-shadow: 0 0 0 1px rgba(0,255,156,0.25), 0 12px 40px rgba(0,0,0,0.7); }
  #pv .pv-bar { display: flex; justify-content: space-between; align-items: center; margin: -0.15rem 0 0.28rem; padding-bottom: 0.2rem; border-bottom: 1px dashed var(--border); font-size: 0.76rem; }
  #pv .pv-bar a { color: var(--accent); }
  #pv { animation: pvin .12s ease-out; } @keyframes pvin { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none; } }
  #pv .filesrc { font-size: .78em; line-height: 1.3; max-height: 40vh; overflow: auto; margin: 0; } #pv .filesrc .ln { opacity: .45; } #pv .pv-doc { margin: .2rem 0 .4rem; font-size: .85em; }
  /* Een script in het hoverpaneel stond op 480px met halve regels. place() in shell.js klemt
     op de viewport, dus breder mag. Alleen als er code in staat: een notitie-preview blijft smal. */
  #pv:has(.filesrc) { width: min(1080px, 94vw); max-height: 76vh; }
  #pv:has(.filesrc).pv-pinned { width: min(1080px, 94vw); max-height: 86vh; }
  #pv .filesrc { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 66vh; }
  /* Een werkafspraak-nummer (B09, A07, W-24) is geen gewone link: hij hoort in de zin op te gaan
     en pas op te vallen als je hem aanwijst. Vandaar geen kleur, alleen een stippellijn. */
  a.regel { color: inherit; text-decoration: underline dotted var(--accent); text-underline-offset: 3px; cursor: help; }
  a.regel:hover { color: var(--accent); }
  code.acct { cursor: help; border-bottom: 1px dotted var(--accent); } code a.filelink, code a.dirlink { text-decoration: underline dotted; }
  #pv .pv-close { background: transparent; border: 1px solid var(--border); color: var(--fg-dim); border-radius: 4px; cursor: pointer; font-family: inherit; }
  #pv .pv-close:hover { color: var(--pink); border-color: var(--pink); }
  #pv .pv-title { color: #3b9dfa; font-weight: bold; margin-bottom: 0.3rem; border-bottom: 1px solid var(--border); padding-bottom: 0.2rem; }
  #pv h1 { font-size: 1.08em; } #pv h2 { font-size: 1.04em; } #pv h3, #pv h4 { font-size: 1em; }
  #pv p { margin: .25rem 0; } #pv ul, #pv ol { margin: .25rem 0; padding-left: 1.1rem; }
  #pv .pv-title { margin-bottom: .2rem; padding-bottom: .15rem; }
  #pv table { font-size: 0.92em; }
  #pv .note-body { border: none; box-shadow: none; background: transparent; padding: 0; margin: 0; }


/* 28-8 UX: alle zwevende knoppen in één balk rechtsonder, gelijke hoogte, gelijke stijl, vaste volgorde.
   Ze stonden op vier verschillende hoogtes met verschillende afmetingen (26/28/32 px) door elkaar. */
#dock { position: fixed; right: 14px; bottom: 44px; z-index: 66; display: flex; align-items: stretch; gap: .4rem; }
#dock > * { position: relative !important; right: auto !important; bottom: auto !important; margin: 0 !important; }
#dock button, #dock > a {
  height: 30px; line-height: 28px; padding: 0 .8rem; font-family: inherit; font-size: .82rem;
  border: 1px solid var(--border); border-radius: 999px; background: rgba(0,0,0,.55); color: var(--fg-dim);
  cursor: pointer; opacity: .72; transition: opacity .15s, color .15s, border-color .15s; text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
}
#dock button:hover, #dock > a:hover { opacity: 1; color: var(--accent); border-color: var(--accent); }
#dock .on button { opacity: 1; color: var(--accent); border-color: var(--accent); }

/* iku in de topbar. Was een gevuld pilletje met de tekst "iku" (Martijn, 30-8); sinds 2-9 een
   Popmart-achtig figuurtje: groot hoofd, twee oortjes, klein chunky lijf (Martijn: "omzet naar een
   popmart figuurtje dat clicable is en van kleur kan veranderen. Rood is stopped. Groen is actief").
   De kleur blijft de status -- rood = stopped, groen = actief -- en zit in één variabele, zodat
   elk onderdeel van het figuurtje meekleurt. Slaapt hij, dan doet hij zijn ogen dicht en valt de
   mond weg; dat is de tweede aanwijzing naast kleur, voor wie rood en groen niet uit elkaar houdt.
   Klikken doet wat het altijd deed: naar /iku. */
.topbar a.ikufig {
  align-self: center;
  display: inline-flex;
  padding: 0;
  border: 0;
  line-height: 0;
  opacity: .88;
  transition: opacity .15s ease, transform .15s ease;
}
.topbar a.ikufig:hover { opacity: 1; text-decoration: none; border: 0; transform: translateY(-1px); }
.topbar a.ikufig:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ikusvg { height: 26px; width: auto; --iku: #8c2b38; }
.ikufig.wakker .ikusvg { --iku: #1e8a4c; }
.ikusvg .iku-vel { fill: var(--iku); transition: fill .25s ease; }
.ikusvg .iku-face { fill: #f2eae0; }
.ikusvg .iku-ogen-open circle { fill: #21252b; }
.ikusvg .iku-ogen-dicht path { fill: none; stroke: #21252b; stroke-width: 1; stroke-linecap: round; }
.ikusvg .iku-mond { fill: none; stroke: #21252b; stroke-width: .9; stroke-linecap: round; }
.ikufig.wakker .iku-ogen-dicht { display: none; }
.ikufig:not(.wakker) .iku-ogen-open, .ikufig:not(.wakker) .iku-mond { display: none; }

/* Suggesties in de zoekbalk (Martijn, 30-8): 'qd' moet meteen Qdrant tonen. Titels uit de vault
   en tags, geen vrije tekst -- de dropdown is een sprong naar iets dat bestaat, geen gok. */
.topbar .search { position: relative; }
.topbar ul.sug {
  position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 40;
  margin: 0; padding: 2px; list-style: none;
  background: var(--bg-elevated); border: 1px solid var(--fg-dim); border-radius: 3px;
  max-height: 48vh; overflow-y: auto; box-shadow: 0 6px 18px rgba(0,0,0,.55);
}
.topbar ul.sug li {
  display: flex; gap: .6em; align-items: baseline;
  padding: 3px 7px; cursor: pointer; white-space: nowrap;
}
.topbar ul.sug li .s-t { color: var(--fg-bright); overflow: hidden; text-overflow: ellipsis; }
.topbar ul.sug li .s-k { margin-left: auto; color: var(--fg-dim); font-size: .78em; }
.topbar ul.sug li.aan, .topbar ul.sug li:hover { background: rgba(0,255,156,.13); }

/* 31-8 (Martijn: "zet rechts onderin de naam stephen king, klein en subtiel, Stranger Things als
   basis"): ITC Benguiat -- het font van die reeks paperbacks en van de serietitel -- is commercieel,
   dus Yeseva One als vrij alternatief. Lokaal opgehaald (5 KB) en niet van een CDN: het dashboard
   moet ook zonder internet werken. */
@font-face { font-family: 'Yeseva One'; src: url('/assets/fonts/yeseva-one-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
.pw-kingnaam { display: flex; align-items: center; justify-content: flex-end; gap: 0.3rem; font-family: 'Yeseva One', Georgia, serif; font-size: 0.8rem; letter-spacing: 0.05em; line-height: 1; color: var(--fg-dim); opacity: 0.55; margin: 0.35rem 0 0; }
.pw-kingmerk { width: 18px; height: 18px; object-fit: contain; flex: none; }
.pw-tile[data-st=groot] .pw-kingnaam { font-size: 0.92rem; opacity: 0.7; }
.pw-tile[data-st=groot] .pw-kingmerk { width: 26px; height: 26px; }
.pw-tile:hover .pw-kingnaam, .pw-tile[data-st="uit"] .pw-kingnaam { opacity: 0.75; }

/* Mobiel (1-9, Martijn: "/src is niet goed te lezen mobiel"): op een smal scherm perste een
   tabel van 3-5 kolommen zichzelf in de paginabreedte -- min-width 3.5rem plus
   overflow-wrap:anywhere gaf cellen van 56 px die letter voor letter afbraken. Gemeten op de
   doorvoertabel van queue.md: 8 kolommen in 362 px, eerste kolom 194 px, 10 cellen < 55 px.
   De wrapper (.tbl) kan al zijwaarts scrollen; hier dwingen we af dat hij dat ook dóét:
   cellen houden een leesbare minimummaat en breken alleen op woordgrenzen. */
@media (max-width: 640px) {
  .note-body td, .note-body th { overflow-wrap: normal; }
  .note-body .tbl:not(.lbl) td, .note-body .tbl:not(.lbl) th { min-width: 6rem; }
  .note-body .tbl:not(.lbl) td:first-child, .note-body .tbl:not(.lbl) th:first-child { min-width: 7rem; max-width: 10rem; }
  /* de scroll-hint van .wide geldt op mobiel voor elke niet-label-tabel */
  .note-body .tbl:not(.lbl) { background: linear-gradient(to left, rgba(0,255,156,0.09), transparent 28px) right / 28px 100% no-repeat; }
}

/* --- Obsidian `.base`-weergaven (3-9-2026) ---------------------------------
   Een deur-notitie sluit af met `![[map.base]]`; dat is de lijst die de map zelf leest en dus
   niet veroudert. Tabs zonder JavaScript: radio + `~`-selector, zodat de terugknop en een
   scriptloze pagina hetzelfde doen. */
.bs-blok { margin: 1.4rem 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-elevated); }
.bs-tabs { display: flex; flex-wrap: wrap; max-width: 100%; }
.bs-radio { position: absolute; opacity: 0; pointer-events: none; }
.bs-tab { padding: .35rem .7rem; cursor: pointer; font-size: .85rem; color: var(--fg-dim);
  border-bottom: 2px solid transparent; white-space: nowrap; }
.bs-tab:hover { color: var(--fg-bright); }
.bs-radio:checked + .bs-tab { color: var(--accent); border-bottom-color: var(--accent); }
.bs-paneel { display: none; order: 99; flex: 1 0 100%; min-width: 0; border-top: 1px solid var(--border); }
.bs-tabs > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.bs-tabs > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.bs-tabs > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.bs-tabs > input:nth-of-type(4):checked ~ div:nth-of-type(4),
.bs-tabs > input:nth-of-type(5):checked ~ div:nth-of-type(5),
.bs-tabs > input:nth-of-type(6):checked ~ div:nth-of-type(6),
.bs-tabs > input:nth-of-type(7):checked ~ div:nth-of-type(7),
.bs-tabs > input:nth-of-type(8):checked ~ div:nth-of-type(8),
.bs-tabs > input:nth-of-type(9):checked ~ div:nth-of-type(9),
.bs-tabs > input:nth-of-type(10):checked ~ div:nth-of-type(10),
.bs-tabs > input:nth-of-type(11):checked ~ div:nth-of-type(11),
.bs-tabs > input:nth-of-type(12):checked ~ div:nth-of-type(12) { display: block; }
.bs-scroll { overflow-x: auto; max-width: 100%; }
.bs-tabel { width: 100%; border-collapse: collapse; font-size: .85rem; }
.bs-tabel th { text-align: left; padding: .3rem .5rem; color: var(--fg-dim); font-weight: normal;
  border-bottom: 1px solid var(--border); white-space: nowrap; }
.bs-tabel td { padding: .28rem .5rem; border-bottom: 1px solid rgba(26,58,42,.5); vertical-align: top; }
.bs-tabel td:first-child { min-width: 15rem; }
.bs-tabel tr:hover td { background: rgba(0,255,156,.05); }
.bs-tabel .bs-groep td { color: var(--accent-2); padding-top: .6rem; border-bottom: none; }
.bs-leeg { color: var(--fg-dim); }
.bs-voet { padding: .3rem .55rem; font-size: .75rem; color: var(--fg-dim); }
.bs-onbekend { color: var(--pink); border-top: 1px solid var(--border); }
.bs-fout { padding: .5rem; color: var(--pink); }
.bs-bron { padding: .3rem .55rem .45rem; font-size: .72rem; color: var(--fg-dim); border-top: 1px solid var(--border); }
.bs-kaarten { list-style: none; margin: 0; padding: .5rem; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; }
.bs-kaart { border: 1px solid var(--border); border-radius: 4px; padding: .45rem .55rem; font-size: .8rem; }
.bs-kaart .bs-kop { display: block; margin-bottom: .3rem; }
.bs-kv { display: flex; gap: .4rem; color: var(--fg-dim); }
.bs-kv span { min-width: 6.5em; }

/* Smal scherm: de eerste kolom mag de tabel niet breder maken dan het venster -- de tabel
   scrollt binnen zijn eigen kader, de pagina niet (gemeten op 390x844, 3-9). */
@media (max-width: 560px) {
  .bs-tabel td:first-child { min-width: 9rem; }
  .bs-tab { padding: .3rem .5rem; font-size: .8rem; }
}

/* --- De map opent met zijn deur (3-9-2026) ---------------------------------
   Martijn: "ik zie geen verbetering in de ux in een browser". De mappagina gaf 38 kale
   bestandsnamen op alfabet; de betekenis stond in de index-notitie en kwam nooit in beeld.
   Drie kolommen: naam, wat het is, hoe oud. De ouderdom rechts, zodat het oog langs de zinnen
   kan lezen zonder over datums te struikelen. */
.deur { margin: .2rem 0 1rem; }
.deur-lead { margin: .1rem 0 .8rem; color: var(--fg-dim); font-size: .88rem; }
.deur-groep { margin: 0 0 .55rem; }
.deur-groep > summary { cursor: pointer; color: var(--accent); font-size: .78rem;
  letter-spacing: .09em; text-transform: uppercase; padding: .2rem 0;
  border-bottom: 1px solid var(--border); list-style: none; }
.deur-groep > summary::-webkit-details-marker { display: none; }
.deur-groep > summary::before { content: '▸ '; color: var(--fg-dim); }
.deur-groep[open] > summary::before { content: '▾ '; }
.deur-groep > summary small { color: var(--fg-dim); letter-spacing: 0; }
.deur-groep > summary:hover { color: var(--fg-bright); }
.deur-wacht > summary { color: var(--pink); border-bottom-color: var(--pink); }
.deur-wacht > summary small { color: var(--pink); }
.deur-bij { margin: .3rem 0 0; color: var(--fg-dim); font-size: .8rem; }
/* De rijen liepen van 30 tot 79px hoog met 2,5px padding en niets ertussen: twee kolommen die
   allebei rafelig afbraken, naast elkaar (gemeten 5-9-2026, Martijn: "ziet er nu rommelig uit").
   Drie dingen brengen rust: de zin op ten hoogste twee regels, een haarlijn tussen de rijen, en
   één regelhoogte voor beide kolommen zodat ze hetzelfde ritme houden. */
.deur-lijst { list-style: none; margin: .3rem 0 0; padding: 0; --deur-lh: 1.45; }
.deur-lijst li { display: grid; grid-template-columns: minmax(11rem, 20rem) minmax(0, 1fr) auto;
  gap: .15rem .9rem; align-items: baseline; padding: .34rem .3rem; border-radius: 3px;
  border-bottom: 1px solid var(--border); line-height: var(--deur-lh); }
.deur-lijst li:last-child { border-bottom: 0; }
.deur-lijst li:hover { background: rgba(0,255,156,.06); }
.deur-naam { overflow-wrap: anywhere; line-height: var(--deur-lh); }
/* Twee regels is genoeg om te kiezen; de hele zin staat in de notitie en in de tooltip. Zonder
   deze grens bepaalt de langste omschrijving de hoogte van de hele lijst. */
.deur-wat { color: var(--fg-dim); font-size: .85rem; line-height: var(--deur-lh);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deur-oud { color: var(--fg-dim); font-size: .75rem; white-space: nowrap;
  min-width: 3.4rem; text-align: right; }
.deur-dood { color: var(--pink); }
.deur-voet { margin-top: .7rem; font-size: .75rem; color: var(--fg-dim); }
.deur-bestanden { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .4rem; }
.deur-bestanden > summary { cursor: pointer; color: var(--fg-dim); font-size: .8rem; }
.deur-bestanden > summary:hover { color: var(--fg-bright); }
/* Smal scherm: naam boven, zin eronder, ouderdom achter de naam. Drie kolommen van 9rem passen
   niet op 390px zonder de zinnen tot twee woorden te knijpen. */
@media (max-width: 620px) {
  .deur-lijst li { grid-template-columns: 1fr auto; }
  .deur-wat { grid-column: 1 / -1; }
}
.deur-lijst li.deur-los { display: block; color: var(--fg-dim); font-size: .85rem; padding-left: .3rem; }

/* Taakvinkjes: aanklikbaar, met een korte bevestiging als de notitie echt gewijzigd is. */
.note-body input.taak { cursor: pointer; accent-color: var(--accent); margin-right: .35rem; }
.note-body input.taak:disabled { cursor: progress; }
.note-body input.taak.taak-ok { outline: 2px solid var(--accent); outline-offset: 2px; }
.taak-fout { color: var(--pink); font-size: .8rem; }

/* Aftermath-knoppen in een notitie (5-9-2026, Martijn: "geef de nareken knoppen in de ui duidelijk
   herkenbare kenmerken (vault style) in zowel rapport 1 als 2. Dit werkt zo niet"). Ze stonden er
   als gewone links tussen: dezelfde kleur als een wikilink, niets dat zegt "hier kun je klikken om
   te meten". Nu zijn het knoppen, herkenbaar aan het loepje, en de stemknoppen aan hun vinkje of
   kruisje. De selector kijkt naar het adres, niet naar een class: dan hoeft mekiki niets van de
   opmaak te weten en werken oudere rapporten net zo goed. */
.note-body a[href*="/aftermath?"],
.note-body a[href*="/narekenen?"],
.note-body a[href*="/mekiki/stem"] {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .02rem .4rem;
  margin: .1rem .15rem .1rem 0;
  color: var(--fg-dim);
  background: rgba(0, 255, 156, .04);
  text-decoration: none;
  line-height: 1.5;
}
.note-body a[href*="/aftermath?"]:hover,
.note-body a[href*="/narekenen?"]:hover,
.note-body a[href*="/mekiki/stem"]:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0, 255, 156, .10);
  text-shadow: none;
  text-decoration: none;
}
.note-body a[href*="/aftermath?"]::before,
.note-body a[href*="/narekenen?"]::before { content: "\1F50E\FE0E  "; opacity: .8; }
.note-body a[href*="stem=goed"]::before { content: "\2713  "; color: var(--accent); }
.note-body a[href*="stem=fout"]::before { content: "\2717  "; color: var(--pink, #ff2bd6); }

/* De hoofdknop per geval: hij start aftermath voor de hele bevinding en moet daarom opvallen
   tussen de losse ankerknoppen. Herkenbaar aan de gevulde rand en het loepje ervoor. */
.note-body a[href*="/aftermath?id="]:not([href*="soort="]) {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 255, 156, .10);
  font-weight: 600;
  padding: .1rem .55rem;
}
.note-body a[href*="/aftermath?id="]:not([href*="soort="]):hover {
  background: rgba(0, 255, 156, .20);
  box-shadow: 0 0 8px rgba(0, 255, 156, .25);
}

/* Archiefmerk in een deur-lijst: klein, gedempt, maar onmiskenbaar. Een gearchiveerde notitie zag
   er tot 5-9-2026 exact zo uit als een actuele. */
.deur-archief {
  margin-left: .4rem;
  padding: 0 .3rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: .7rem;
  color: var(--fg-dim);
  opacity: .8;
  text-transform: lowercase;
}

/* "Vandaag gewijzigd" bovenaan een mappagina: de kortste weg naar wat er zojuist is bijgekomen.
   Dated notities zakken naar de maandgroep onderin, en dan is het rapport van een uur oud verder
   weg dan de naslag van vorig jaar. */
.vandaag-balk {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  margin: .2rem 0 .6rem; padding: .3rem .5rem;
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 4px; font-size: .82rem;
}
.vandaag-balk > span { color: var(--fg-dim); margin-right: .2rem; }
.vandaag-balk a {
  border: 1px solid var(--border); border-radius: 4px; padding: 0 .4rem;
  color: var(--accent); text-decoration: none;
}
.vandaag-balk a:hover { border-color: var(--accent); background: rgba(0, 255, 156, .10); text-shadow: none; }
.vandaag-balk a small { color: var(--fg-dim); margin-left: .25rem; }

/* ---------------------------------------------------------------------------
   Het rapport en de steekproef van mekiki krijgen hun eigen huid (5-9-2026,
   Martijn: "in de rapportages en steekproeven wil ik een mooiere ux en ui, moet
   strakker met frames oid"). Alleen deze twee notitiesoorten (.note-body.mk),
   want dit is leeswerk met een vaste vorm: bevinding, meting, knop, oordeel.
   --------------------------------------------------------------------------- */

/* Sectiekop als band: je ziet in één oogopslag waar een bak begint. */
.note-body.mk h2 {
  margin: 1.6rem 0 .8rem;
  padding: .35rem .6rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: rgba(0, 255, 156, .05);
  font-size: 1.02rem;
}
/* De ronde-kop eronder is context, geen titel. */
.note-body.mk h3 { font-size: .92rem; color: var(--fg-dim); margin: 1rem 0 .3rem; font-weight: 600; }

/* Elke bevinding een eigen kader. */
.note-body.mk > ul > li {
  list-style: none;
  margin: .5rem 0;
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, .015);
}
.note-body.mk > ul { padding-left: 0; }
.note-body.mk > ul > li:hover { border-color: var(--fg-dim); }
/* De eerste regel van een kader is de vindplaats en de zin zelf. */
.note-body.mk > ul > li > strong a { font-size: 1rem; }
.note-body.mk > ul > li > em { color: var(--fg); }

/* De onderliggende regels: label vet-gedempt, meting in mono. */
.note-body.mk > ul > li ul { margin: .4rem 0 0; padding-left: .9rem; border-left: 1px dashed var(--border); }
.note-body.mk > ul > li ul > li { list-style: none; margin: .12rem 0; line-height: 1.5; }
.note-body.mk > ul > li ul > li::marker { content: ""; }
.note-body.mk code { background: rgba(0, 255, 156, .07); border: 1px solid var(--border); border-radius: 3px; padding: 0 .25rem; }

/* Steekproefgevallen: elk geval een kaart met een gekleurde rug per groep. */
.note-body.mk .mk-geval {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .1rem .8rem .6rem;
  margin: 1rem 0;
  background: rgba(255, 255, 255, .015);
}
.note-body.mk .mk-geval.mk-a { border-left: 3px solid #ff2bd6; }
.note-body.mk .mk-geval.mk-b { border-left: 3px solid var(--accent-2); }
.note-body.mk .mk-geval.mk-c { border-left: 3px solid var(--accent); }
.note-body.mk .mk-geval h3 { color: var(--fg); font-size: 1rem; margin-top: .7rem; }
.note-body.mk .mk-geval blockquote {
  margin: .5rem 0; padding: .35rem .7rem;
  border-left: 2px solid var(--border); background: rgba(0, 0, 0, .25);
  font-style: normal;
}
.note-body.mk .mk-geval p { margin: .35rem 0; }
.note-body.mk hr { display: none; }   /* het kader is de scheiding */

/* Beantwoorde kaartjes: je moet in één blik zien wat je al gehad hebt (5-9-2026). De markering komt
   uit de stemmen-tabel en wordt in de browser gezet, dus hij is meteen actueel na een stem. */
.note-body.mk .mk-beantwoord { opacity: .72; }
.note-body.mk .mk-beantwoord:hover { opacity: 1; }
.note-body.mk .mk-merk {
  display: inline-block; margin: .1rem 0 .3rem;
  padding: 0 .4rem; border-radius: 3px;
  font-size: .72rem; letter-spacing: .02em;
}
.note-body.mk .mk-merk-goed { color: #0b2; border: 1px solid #0b2; background: rgba(0, 187, 34, .10); }
.note-body.mk .mk-merk-fout { color: var(--pink, #ff2bd6); border: 1px solid var(--pink, #ff2bd6); background: rgba(255, 43, 214, .10); }
.note-body.mk li.mk-beantwoord { border-style: dashed; }
.note-body.mk .mk-geval.mk-beantwoord { border-style: dashed; }
/* De knop zelf draagt het ook, zodat je hem in een lange lijst terugvindt. */
.note-body a.af-gestemd::after { content: " \2713"; opacity: .9; }
.note-body a.af-gestemd.af-fout::after { content: " \2717"; }

/* Recent gewijzigd -> spring naar de mutatie (7-9): het gevonden blok licht even op. */
/* Mutatie-markering, derde vorm (7-9: "duidelijker in beeld, weer anders, creatief"). Geen vlak
   dat oplicht maar drie tekens: een accentbalk in de kantlijn die van boven naar beneden
   binnenschuift, één lichtveeg over het blok, en een pilletje met de tijd van de wijziging
   rechtsboven. Balk en pil blijven staan tot je scrolt (of 45 s); dan vervagen ze. */
.rg-mut{position:relative;border-radius:6px;background-image:linear-gradient(100deg,transparent 42%,rgba(0,255,156,.28) 50%,transparent 58%);background-size:250% 100%;background-repeat:no-repeat;animation:rgSweep 1.6s ease-in-out .15s 1 both;transition:opacity .6s}
.rg-mut::before{content:"";position:absolute;left:-.95rem;top:.1rem;bottom:.1rem;width:4px;border-radius:2px;background:linear-gradient(180deg,var(--roze,#ff2bd6),var(--accent));box-shadow:0 0 10px rgba(0,255,156,.45);transform-origin:top;animation:rgBar .55s cubic-bezier(.2,.8,.2,1) both}
.rg-mut::after{content:"\21AF  " attr(data-rg-tijd);position:absolute;right:.35rem;top:-.75rem;z-index:2;font-size:.64rem;letter-spacing:.08em;padding:.08rem .5rem;border-radius:999px;border:1px solid var(--accent);background:var(--bg,#0b0f0e);color:var(--accent);box-shadow:0 0 8px rgba(0,255,156,.35);animation:rgPil .45s ease-out .5s both}
.rg-mut.rg-mut-weg,.rg-mut.rg-mut-weg::before,.rg-mut.rg-mut-weg::after{opacity:0;transition:opacity .6s}
@keyframes rgSweep{from{background-position:130% 0}to{background-position:-130% 0}}
@keyframes rgBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rgPil{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.rg-hint{position:fixed;left:50%;bottom:3.2rem;transform:translateX(-50%);z-index:60;padding:.4rem .8rem;border:1px solid var(--border);border-radius:6px;background:var(--bg,#0b0f0e);color:var(--fg-dim);font-size:.8rem;box-shadow:0 4px 18px rgba(0,0,0,.4);animation:rgHint 6s ease-in forwards}
@keyframes rgHint{0%,75%{opacity:1}100%{opacity:0}}
/* /sources (7-9): boeken en opensource als twee kaarten achter één chip. */
.src-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:.8rem;margin-top:1rem}
.src-kaart{display:flex;flex-direction:column;gap:.35rem;padding:.9rem 1rem;border:1px solid var(--border);border-radius:8px;text-decoration:none;color:inherit;transition:border-color .15s,background .15s}
.src-kaart:hover{border-color:var(--accent);background:rgba(0,255,156,.05);text-decoration:none}
.src-kaart b{font-size:1.05rem}
.src-kaart span{color:var(--fg-dim);font-size:.85rem}
/* King, de nieuwe blik (7-9): kleurvlakken, palet-balk en de ingebakken svg's op de kaarten. */
.kg-vlak{display:inline-block;width:.9em;height:.9em;border-radius:3px;vertical-align:-.1em;border:1px solid rgba(255,255,255,.25);margin-right:.25em}
.kg-balk{display:flex;height:14px;border-radius:4px;overflow:hidden;margin:.4rem 0;border:1px solid var(--border)}
.kg-balk .kg-vlak-b{height:100%;border:0;border-radius:0;margin:0}
.kg-svg{display:block;max-width:100%;height:auto;margin:.4rem 0}
.kg-plaat{background:rgba(0,0,0,.15);border:1px solid var(--border);border-radius:6px}
.kg-blik{font-size:1.02rem;line-height:1.55;max-width:60rem}.kg-blik .pw-covs{display:block;margin-top:.5rem}.kg-blik .kg-svg{max-width:100%}