/* bkkr_bots -- het designsysteem.
 *
 * Strak (zie /srv/_default/09): wat hier niet staat, bestaat niet. Elke class
 * begint met bk- en staat in web/styleguide.html; web/guard-styleguide.py
 * faalt op een class die daar ontbreekt.
 *
 * Waarden komen uit de schaal hieronder, nooit uit het hoofd. */

/* Lato staat hier op de server en niet bij Google. Drie redenen, in volgorde
 * van gewicht: dit is een prive-dashboard en elke paginalading vertelde een
 * derde partij wanneer er gekeken werd; het is op een telefoon twee extra
 * verbindingen (dns en tls, twee keer) voor het eerste woord op het scherm; en
 * zonder netwerk was er geen letter, wat voor een app op het beginscherm de
 * verkeerde volgorde is.
 *
 * Alleen de latin-subset -- die dekt e-umlaut, e-accent en de rest van wat hier
 * geschreven wordt. Een Turkse i-zonder-punt valt terug op de systeemletter, en
 * dat komt in dit huishouden niet voor.
 *
 * De versie zit in de bestandsnaam en niet in een querystring: dit bestand is
 * statisch en kan geen ?v= bevatten. Zo is de url onveranderlijk, mag de
 * service worker hem eeuwig bewaren, en dwingt een nieuwe versie vanzelf een
 * nieuwe naam af. Opnieuw ophalen: tools/haal-lato.sh
 *
 * Licentie: SIL Open Font License, zie static/lato-OFL.txt. */

@font-face {
    font-family: "Lato";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/static/lato-cursief-400-v25.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lato";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("/static/lato-cursief-700-v25.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/lato-400-v25.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/static/lato-700-v25.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/static/lato-900-v25.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fraunces, alleen voor de "Trix"-titel op de inlogpagina (zie .bk-inlog-titel
 * hieronder) -- de rest van dit dashboard blijft bij Lato. Zelfde zelf-gehoste
 * bestand als de React-frontend (frontend/src/assets/fonts/, zie
 * frontend/tools/haal-fraunces.sh), hier gekopieerd. Eén variabel bestand, één
 * @font-face: deze pagina gebruikt alleen gewicht 900.
 * Licentie: SIL Open Font License, zie static/fraunces-OFL.txt. */
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/static/fraunces-variabel-v1.woff2") format("woff2");
}

:root {
    /* De wortelmaat, en daarmee de hele schaal: alles staat in rem, dus tekst
     * én witruimte hangen aan dit ene getal. 13 en niet de browserstandaard
     * van 16: dit dashboard is een overzicht, en de basistekst oogde daarvoor
     * te groot. Op een telefoon zakt hij nog een stap (zie onderaan).
     *
     * Niets in de navigatie of op een kaart mag hieronder duiken zonder reden:
     * een knop die kleiner is dan de lopende tekst leest als een voetnoot.
     *
     * Wil je alleen tekst kleiner en de layout niet, dan is dit níét de plek --
     * dan verlaag je een `font-size` op het onderdeel zelf. */
    font-size: 13px;

    /* Ruimte: verdubbelt steeds, dus er valt niets tussen te verzinnen. */
    --bk-ruimte-1: 0.25rem;
    --bk-ruimte-2: 0.5rem;
    --bk-ruimte-3: 1rem;
    --bk-ruimte-4: 2rem;
    --bk-ruimte-5: 4rem;

    /* Welke trede de layout pakt. Op een telefoon zakt hij één stap; hij
     * verzint nooit een waarde ertussen. Dat is het verschil tussen "de schaal
     * aanpassen" en "een andere trede kiezen", en alleen het tweede mag --
     * anders wordt álles krap, ook waar het goed was, en kun je nooit meer één
     * plek luchtiger maken dan een andere. */
    --bk-marge: var(--bk-ruimte-2);      /* de rand van de pagina */
    --bk-gat: var(--bk-ruimte-3);        /* de grote sprong: onder de navigatie */

    /* Het minimum dat een vinger moet kunnen raken. Eigen maat en niet uit de
     * ruimteschaal: 44px is wat iOS aanraadt, en dat is geen ontwerpkeuze maar
     * een afmeting van een duim.
     *
     * In px en niet in rem, en dat is de hele reden dat het hier apart staat:
     * de wortelmaat is 13px, en in rem zou dit meekrimpen naar 36px. Een duim
     * wordt niet kleiner als de letter kleiner wordt. */
    --bk-tikdoel: 44px;

    --bk-rond: 6px;
    --bk-lijn: 1px solid var(--bk-rand);

    /* Lato uit static/ hierboven, met een systeemletter als terugval zolang het
     * bestand nog niet binnen is (of het net niet doet). Lato kent alleen
     * 100/300/400/700/900: de schaal hieronder is dus geen smaak maar wat er
     * werkelijk in het bestand zit. Tussenwaarden (500, 600, 650) vallen bij
     * de browser terug op 400 en zien er dan uit als gewone tekst -- daarom
     * staan ze niet in dit bestand. */
    --bk-schrift: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bk-gewicht-gewoon: 400;
    --bk-gewicht-vet: 700;
    --bk-gewicht-zwart: 900;

    /* Licht is de basis; donker verderop wisselt alleen deze waarden om. */
    --bk-grond: #faf9f7;
    --bk-vlak: #ffffff;
    --bk-rand: #e2ded8;
    --bk-tekst: #1c1a18;
    --bk-stil: #6b665f;
    --bk-accent: #2f6f4e;
    --bk-accent-zacht: #e8f1ec;
    --bk-waarschuwing: #9a5b12;
    --bk-waarschuwing-zacht: #f6e8d5;
    --bk-fout: #a3342b;
    --bk-fout-zacht: #f7e0dd;
    --bk-bezig: #2f6f4e;

    --bk-schaduw: 0 1px 2px rgb(28 26 24 / 6%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bk-grond: #17161a;
        --bk-vlak: #201f24;
        --bk-rand: #35333a;
        --bk-tekst: #eceaf0;
        --bk-stil: #a09caa;
        --bk-accent: #7dc4a0;
        --bk-accent-zacht: #1e2d26;
        --bk-waarschuwing: #e0a55e;
        --bk-waarschuwing-zacht: #2f2415;
        --bk-fout: #e08076;
        --bk-fout-zacht: #35201e;
        --bk-bezig: #7dc4a0;
        --bk-schaduw: none;
    }
}

* { box-sizing: border-box; }

/* `hidden` moet winnen van een display die er later bij komt: zonder deze regel
   staat een verborgen paneel met `display: flex` gewoon open. */
[hidden] { display: none !important; }

html {
    background: var(--bk-grond);
}

body {
    margin: 0;
    background: var(--bk-grond);
    color: var(--bk-tekst);
    /* 1rem en niet een absolute maat: de wortelmaat staat één keer op :root, en
       met px hier zou de tekst een wijziging daar niet volgen. */
    font: 1rem/1.55 var(--bk-schrift);
}

/* ── Raamwerk ─────────────────────────────────────────────────────────── */

/* Een kolom over de volle hoogte. De meeste pagina's merken daar niets van --
 * die groeien gewoon mee. Het gesprek wél: dat wil de rest van het scherm
 * vullen en zijn eigen invoerbalk onderaan houden, zonder dat er een tweede
 * scrollbalk in een kaart ontstaat. */
.bk-pagina {
    max-width: 62rem;
    margin: 0 auto;
    padding: var(--bk-marge);
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/* Staat er een gesprek op de pagina, dan is de hoogte niet "minstens" maar
   "precies": de draad scrolt zelf en de invoerbalk blijft onderaan staan. Via
   :has() en niet via een extra class op het sjabloon, zodat basis.html niet
   hoeft te weten welke pagina hij toont. Een browser zonder :has() krijgt een
   pagina die gewoon meegroeit -- minder mooi, niet stuk.
   dvh en niet vh: op een telefoon eet de adresbalk anders de balk onderaan op.

   Nadrukkelijk een gesprek dát de pagina ís, en niet een gesprek ergens diep in
   een kaart: de styleguide toont er een als voorbeeld, en die pagina werd door
   een lossere selector op schermhoogte platgedrukt. */
.bk-pagina:has(> .bk-inhoud > .bk-gesprek) { height: 100dvh; }

/* De inlogpagina is 1:1 overgenomen uit frontend/ontwerp/bloemenveld.html,
 * scherm 1a/1b (.inlogbody/.inlogmerk/.inlogvorm/.inlogrij/.inloginvoer/
 * .inlogknop/.inlogfout daar) -- niet losjes nagebouwd met de generieke
 * .bk-kaart/.bk-veld van de rest van het dashboard. Twee dingen die daaruit
 * volgen en die je nergens anders in dit bestand ziet:
 *
 * 1. Geen kaart om het formulier. Het ontwerp zet Naam/Wachtwoord/Inloggen
 *    los op de pagina, elk veld met zijn eigen rand -- geen omlijnde
 *    .bk-kaart eromheen. Er is dus ook geen "kaartbreedte" hier; die zit op
 *    de velden en de knop zelf (max-width).
 * 2. Een eigen kleurenset (--il-*), overgenomen uit het ontwerp-palet
 *    (--bk-grond #f5f2ea, --bk-rand #e2dbcd, --bk-tekst #2a2721,
 *    --bk-stil #7a7261, --bk-fout-zacht #f7ddd9). Dat wijkt net iets af van
 *    het huidige --bk-grond/--bk-rand/--bk-tekst/--bk-stil/--bk-fout-zacht
 *    van de rest van het dashboard (bv. --bk-grond #faf9f7 i.p.v. #f5f2ea) --
 *    dat is het bestaande, oudere palet van vóór dit ontwerp. Of de rest van
 *    het dashboard mee moet naar het bloemenveld-palet is een aparte,
 *    zichtbare keuze die niet in deze fix zit; hier alleen de inlogpagina,
 *    lokaal geschaald zodat andere schermen ongemoeid blijven. */
.bk-inlog {
    --il-grond: #f5f2ea;
    --il-rand: #e2dbcd;
    --il-tekst: #2a2721;
    --il-stil: #7a7261;
    --il-fout-zacht: #f7ddd9;

    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--il-grond);
    padding: 4.4rem var(--bk-marge) var(--bk-marge);
}
/* De volle schermhoogte alleen als hij de pagina zélf is. Zo kan de styleguide
   hem laten zien zonder dat het voorbeeld het scherm leegduwt -- en dat moet,
   want de wachter kent alleen classes die daar echt gebruikt worden. */
body > .bk-inlog { min-height: 100dvh; }
html.bk-inlog-pagina { background: #f5f2ea; }
html.bk-inlog-pagina body { background: #f5f2ea; }

.bk-inlog-merk {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bk-ruimte-1);
    text-align: center;
    margin-bottom: 2.2rem;
}
.bk-inlog-logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bk-vlak);
    border: 1px solid var(--il-rand);
    display: grid;
    place-items: center;
}
.bk-inlog-logo svg { width: 40px; height: 40px; }
/* Fraunces, net als in het ontwerp -- zelfde zelf-gehoste bestand als de
   React-frontend (frontend/src/assets/fonts/fraunces-variabel-v1.woff2),
   hier gekopieerd omdat deze pagina Lato-only was. Alleen het gewicht dat
   deze pagina gebruikt (900), geen drie @font-face-regels zoals bij de
   frontend die ook 400/600 nodig heeft. */
.bk-inlog-titel {
    margin: 0;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 900;
    font-size: 1.625rem;
    letter-spacing: -0.01em;
    color: var(--il-tekst);
}
.bk-inlog-sub { margin: 0; max-width: 15rem; color: var(--il-stil); font-size: 0.78125rem; }

.bk-inlog-vorm { display: flex; flex-direction: column; gap: 1rem; width: min(320px, 90vw); }
.bk-inlog-rij { display: flex; flex-direction: column; gap: 0.35rem; }
.bk-inlog-rij .bk-label { color: var(--il-stil); }
.bk-inlog-rij .bk-invoer {
    background: var(--bk-vlak);
    border-color: var(--il-rand);
    border-radius: 11px;
    color: var(--il-tekst);
}
.bk-inlog-knop { border-radius: 11px; }

/* Eén gecombineerde melding, onder de velden -- niet erboven: anders schuift
   het merk erboven mee naar beneden zodra de fout verschijnt (zie de
   toelichting bij scherm 1b in het ontwerp). */
.bk-inlog-fout {
    display: flex;
    gap: var(--bk-ruimte-1);
    align-items: flex-start;
    background: var(--il-fout-zacht);
    color: var(--bk-fout);
    border-radius: var(--bk-rond);
    padding: var(--bk-ruimte-2);
    font-size: 0.9rem;
    line-height: 1.45;
}
.bk-inlog-fout svg { width: 16px; height: 16px; flex: none; margin-top: 0.1rem; }

.bk-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--bk-ruimte-3);
    margin-bottom: var(--bk-ruimte-3);
}

.bk-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bk-ruimte-1);
    border-bottom: var(--bk-lijn);
    margin-bottom: var(--bk-gat);
    padding-bottom: var(--bk-ruimte-2);
}

/* De klok hangt rechts in de navigatie: de regel erboven met de paginanaam is
   weg -- de tabs zeggen al waar je bent -- en dit is de enige plek waar de tijd
   nog thuishoort zonder een eigen regel op te eisen.
   margin-left: auto duwt hem naar de rand; breekt de rij op een smal venster
   over twee regels, dan schuift hij gewoon mee. */
.bk-nav-klok {
    margin-left: auto;
    padding-right: var(--bk-ruimte-2);
    font-variant-numeric: tabular-nums;
}

.bk-nav-link {
    display: inline-flex;
    align-items: center;
    /* Krap, en met opzet: met een merkje erbij werd elk vak zo veel breder dat
       de rij op 1440px over twee regels brak. Een navigatie die een tweede
       regel opeist is precies wat we op de telefoon net weggehaald hebben. */
    gap: var(--bk-ruimte-1);
    color: var(--bk-stil);
    text-decoration: none;
    padding: var(--bk-ruimte-2);
    border-radius: var(--bk-rond);
    /* Voor de teller rechtsboven; die hangt eraan. */
    position: relative;
}

/* Het merkje bij een bestemming: een emoji of het portret van een bot. Een
   tekening leest sneller dan een woord -- juist bij dyslexie -- en de naam
   blijft ernaast staan, zodat niemand hoeft te raden.

   Op een breed scherm staat hij vóór de naam en is hij klein: daar is de rij
   toch al leesbaar en hoeft het merkje alleen te helpen herkennen. Onderaan op
   een telefoon staat hij erbóven en groter -- daar is het merkje het eerste wat
   je ziet. */
.bk-nav-merk {
    font-size: 1.0625rem;
    line-height: 1;
}

/* Een portret als merkje is al rond en heeft geen extra maat nodig; alleen de
   grootte van de emoji ernaast, zodat de rij niet golft. */
img.bk-nav-merk { width: 1.25rem; height: 1.25rem; }

/* Hoeveel er op je wacht, als een pilletje op de link zelf.
   Amber en niet groen: groen betekent in dit systeem "het is in orde", en er
   staat een bot stil. Ook niet rood: er is niets kapot, er wacht alleen iets
   op jou. */
.bk-teller {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 1.25rem;
    padding: 0 var(--bk-ruimte-1);
    border-radius: 99px;
    background: var(--bk-waarschuwing);
    color: var(--bk-vlak);
    font-size: 0.75rem;
    font-weight: var(--bk-gewicht-vet);
    line-height: 1.25rem;
    text-align: center;
}

.bk-nav-link:hover { background: var(--bk-vlak); color: var(--bk-tekst); }

.bk-nav-link-actief {
    background: var(--bk-accent-zacht);
    color: var(--bk-accent);
    font-weight: var(--bk-gewicht-vet);
}

/* align-content: start houdt kaarten op hun eigen hoogte; zonder dat rekt een
 * korte pagina ze uit tot de volle hoogte nu de kolom die hoogte heeft. */
.bk-inhoud {
    display: grid;
    gap: var(--bk-ruimte-3);
    align-content: start;
    flex: 1;
    min-height: 0;
}

.bk-kolom {
    display: grid;
    gap: var(--bk-ruimte-3);
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.bk-rij {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bk-ruimte-2);
}

/* ── Kaarten ──────────────────────────────────────────────────────────── */

.bk-kaart {
    background: var(--bk-vlak);
    border: var(--bk-lijn);
    border-radius: var(--bk-rond);
    box-shadow: var(--bk-schaduw);
    overflow: hidden;
}

/* De linkerhelft van een kaartkop mag krimpen ten gunste van wat er rechts
   staat; zie bk-naam. */
.bk-kaart-kop > .bk-rij { min-width: 0; }

/* Staat er een naam met een rol eronder in de kop, dan wordt er niet gewrapt
   maar gekrompen.
 *
 * Dit was niet te beredeneren, alleen te meten: in een flexcontainer die mag
 * wrappen, gebeurt dat op basis van de natuurlijke breedtes -- krimpen komt pas
 * daarna, binnen een regel. De kop was 297px vrij en de inhoud 298px, dus
 * "sonnet" sprong naar een tweede regel terwijl er 90px te krimpen viel. Alleen
 * hier, want een gewone kaartkop (lange titel plus lange context) heeft dat
 * wrappen juist nodig. */
.bk-kaart-kop:has(.bk-naam),
.bk-kaart-kop:has(.bk-naam) > .bk-rij { flex-wrap: nowrap; }

.bk-kaart-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bk-ruimte-2);
    padding: var(--bk-ruimte-3);
    border-bottom: var(--bk-lijn);
}

.bk-kaart-lijf { padding: var(--bk-ruimte-3); }

/* Niets in een kaart brengt zijn eigen marge mee.
 *
 * De browser zet standaard een hele regelhoogte boven én onder elke <p>. Die
 * stapelde op met de padding van de kaart: boven één zin "Er loopt op dit
 * moment niets" stond 45px lucht (15 padding + 15 marge + 15 padding), en
 * tussen twee regels in een botkaart 13px. Gemeten, niet geschat.
 *
 * Witruimte hoort hier uit de schaal te komen en niet uit de browser -- dat is
 * regel 4 van het designsysteem. Dus: alles op nul, en de ruimte ertussen komt
 * van één plek. Een paar pixels is genoeg; deze regels horen bij elkaar. */
.bk-kaart-lijf > * { margin: 0; }
.bk-kaart-lijf > * + * { margin-top: var(--bk-ruimte-1); }

/* Behalve waar de rijen hun eigen scheidslijn dragen: daar is de lijn de
   scheiding, en een gat eronder maakt hem juist losser. Taakregels staan hier
   niet meer bij -- die dragen geen lijn meer, en krijgen dus de kleinste trede,
   dezelfde als in een bk-lijst. */
.bk-kaart-lijf > .bk-verzoek + .bk-verzoek { margin-top: 0; }

/* ── Tekst ────────────────────────────────────────────────────────────── */

/* Een naam met eronder, klein en stil, wat hij is.
 *
 * De rol stond eerst als losse regel in het lijf van de kaart. Daar was het een
 * mededeling die om aandacht vroeg terwijl je hem allang kent; onder de naam is
 * het een bijschrift, en dat is wat het is.
 *
 * Krappe regelhoogte: twee regels die bij elkaar horen horen dicht op elkaar te
 * staan, anders lezen het er twee. */
.bk-naam {
    display: grid;
    /* minmax(0, 1fr) en niet de standaard `auto`: een grid-kolom krimpt anders
       nooit onder zijn max-content, en dan duwt een lange rol het model naar
       een eigen regel eronder -- "sonnet" stond dan alleen aan de linkerkant
       alsof er iets misging. Nu breekt de rol liever zelf. */
    grid-template-columns: minmax(0, 1fr);
    line-height: 1.25;
    /* Mag krimpen. Zonder dit duwt een lange rol ("hoofd van de huishouding")
       het model naar een eigen regel eronder, en dan staat "sonnet" alleen aan
       de linkerkant alsof er iets misging. De rol breekt liever over twee
       regels dan dat hij de rest van de kop uit elkaar drukt. */
    min-width: 0;
}

.bk-titel { font-size: 1.35rem; font-weight: var(--bk-gewicht-zwart); margin: 0; }
.bk-subtitel { font-size: 1rem; font-weight: var(--bk-gewicht-vet); margin: 0; }
.bk-tekst { margin: 0; }
.bk-stil { color: var(--bk-stil); font-size: 0.875rem; }
.bk-fout { color: var(--bk-fout); }
.bk-waarschuwing { color: var(--bk-waarschuwing); }
/* Geen eigen padding: de kaart eromheen heeft er al een, en twee keer 15px om
   één zin heen is geen lucht maar een gat. In een tabelcel wint `.bk-tabel td`
   met zijn eigen padding -- die is specifieker, dus daar verandert niets. */
.bk-leeg { color: var(--bk-stil); font-style: italic; padding: 0; }

/* ── Gegevens ─────────────────────────────────────────────────────────── */

.bk-tabel { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.bk-tabel th {
    text-align: left;
    color: var(--bk-stil);
    font-weight: var(--bk-gewicht-vet);
    padding: var(--bk-ruimte-2);
    border-bottom: var(--bk-lijn);
}
.bk-tabel td { padding: var(--bk-ruimte-2); border-bottom: var(--bk-lijn); vertical-align: top; }

.bk-getal { font-variant-numeric: tabular-nums; font-weight: var(--bk-gewicht-vet); }
.bk-label { color: var(--bk-stil); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; }

.bk-balk { background: var(--bk-rand); border-radius: 99px; height: 6px; overflow: hidden; }
.bk-balk-vul { background: var(--bk-accent); height: 100%; }

.bk-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bk-ruimte-2); }

/* ── Status ───────────────────────────────────────────────────────────── */

.bk-stip { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--bk-rand); }
.bk-stip-aan { background: var(--bk-accent); }
.bk-stip-uit { background: var(--bk-stil); }
.bk-stip-bezig { background: var(--bk-bezig); animation: bk-pols 1.4s ease-in-out infinite; }

@keyframes bk-pols { 50% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
    .bk-stip-bezig { animation: none; }
}

/* Eén strook bovenaan voor iets dat over het scherm gaat en niet over de
   inhoud: de verbinding is weg, de sessie is verlopen, iemand was je voor.
   De kleur komt van bk-waarschuwing of bk-fout ernaast, zodat geel en rood hier
   hetzelfde betekenen als overal; currentColor maakt de rand en het vlak
   daarvan af, en dan hoeft er per soort niets bij. */
.bk-melding {
    margin: 0;
    padding: var(--bk-ruimte-2) var(--bk-ruimte-3);
    border: 1px solid currentColor;
    border-radius: var(--bk-rond);
    background: var(--bk-vlak);
    /* De hele strook is het tikdoel als er iets te doen is -- op een telefoon
       is dat het grootste dat er te krijgen valt, en een knopje erin zou juist
       het kleinste zijn. */
    cursor: pointer;
}

/* ── Taken ────────────────────────────────────────────────────────────── */

/* Geen streep tussen de regels. In het logboek staan er tientallen onder
   elkaar, en dan is elke lijn een extra horizontale streep door het scherm --
   ruis die de lijst korter laat lijken dan hij leest. De ruimte eromheen
   scheidt genoeg; een lijn erbij zegt niets extra's. */
.bk-taak {
    display: flex;
    align-items: baseline;
    gap: var(--bk-ruimte-2);
}

/* De regel brengt zelf geen lucht mee: zonder lijn hoort er ook niet de ruimte
   bij die een lijn nodig had. De ouder zet de tussenruimte, en op de laagste
   trede -- in een logboek van veertig regels wordt alles daarboven een lijst
   met gaten in plaats van een lijst. Kleiner dan een trede kan niet: de schaal
   houdt op bij ruimte-1, en een getal ertussen verzinnen is precies wat dit
   bestand niet doet.
   Via :has() en niet met een eigen class, zodat een lijst van taken hetzelfde
   sjabloon houdt als elke andere bk-lijst; een browser zonder :has() krijgt de
   gewone lijstruimte en dat leest los, niet stuk. */
.bk-lijst:has(> .bk-taak) { gap: var(--bk-ruimte-1); }
.bk-taak-bot { font-weight: var(--bk-gewicht-vet); }
.bk-taak-naam { flex: 1; }
/* Hulpagenten staan ingesprongen onder hun baas, zodat je in één blik ziet
   wie er voor wie werkt. */
.bk-taak-hulp { margin-left: var(--bk-ruimte-4); border-left: var(--bk-lijn); padding-left: var(--bk-ruimte-3); }

/* ── Knoppen en velden ────────────────────────────────────────────────── */

.bk-knop {
    font: inherit;
    padding: var(--bk-ruimte-2) var(--bk-ruimte-3);
    border: var(--bk-lijn);
    border-radius: var(--bk-rond);
    background: var(--bk-vlak);
    color: var(--bk-tekst);
    /* Ook een <a> mag een knop zijn; wat eruitziet als een knop krijgt geen
       streep onder zijn woord. */
    text-decoration: none;
    cursor: pointer;
}
.bk-knop:hover { border-color: var(--bk-accent); }
.bk-knop-ja { background: var(--bk-accent); border-color: var(--bk-accent); color: var(--bk-vlak); }
.bk-knop-nee { border-color: var(--bk-fout); color: var(--bk-fout); }
.bk-knop-stil { border-color: transparent; color: var(--bk-stil); }
/* De volle breedte van zijn kaart. Voor een formulier waar maar één ding te
   doen is: een knop van 80px op een vlak van 320 is een klein doel met veel
   ruimte eromheen die niets doet. */
.bk-knop-breed { width: 100%; min-height: var(--bk-tikdoel); margin-top: var(--bk-ruimte-2); }

/* De knop die Bob aanraadt. Bewust geen eigen kleur: dan zou een advies eruit
   zien als een uitkomst. Een ring eromheen wijst, en laat de keuze bij Ingrid. */
.bk-knop-advies { box-shadow: 0 0 0 2px var(--bk-accent); }

.bk-advies {
    display: flex;
    gap: var(--bk-ruimte-2);
    align-items: baseline;
    margin: 0;
}

/* Eén toestemmingsverzoek van Bob. Bewust geen bk-taak: dat is een regel in
   een lijst, en dit is het enige op het scherm waar iemand op wacht. Een vaste
   leesvolgorde van boven naar beneden -- wie het vraagt, wat hij wil, waarom,
   wat Bob ervan vindt, en dan pas de keuze. Op 390px liep de oude vorm als
   flexrij helemaal uit de uitlijning. */
.bk-verzoek {
    display: grid;
    gap: var(--bk-ruimte-2);
    padding: var(--bk-ruimte-3) 0;
    border-bottom: var(--bk-lijn);
}
.bk-verzoek:last-child { border-bottom: 0; }
.bk-verzoek p { margin: 0; }

/* Twee assen, overal gelijk: links "ja", rechts "nee"; boven "deze keer",
   onder "voortaan". Wie de vorm één keer geleerd heeft hoeft de knoppen daarna
   niet meer te lezen -- en dat is precies wat je wilt bij een knop die je in de
   rij van de bus indrukt. */
.bk-besluit {
    display: grid;
    /* Twee kolommen met een bovengrens, links uitgelijnd. Zonder die grens
       rekken twee knoppen op een breed scherm uit tot 700px per stuk, en dan
       ziet een keuze eruit als een aankondiging. Op een telefoon vullen ze wél
       de breedte -- zie het telefoonblok onderaan. */
    grid-template-columns: repeat(2, minmax(0, 11rem));
    justify-content: start;
    gap: var(--bk-ruimte-2);
}
.bk-besluit .bk-knop { min-height: var(--bk-tikdoel); }

/* De onderste rij zet beleid en niet één geval: hij geldt voor élk volgend
   verzoek van deze soort. Daarom lucht erboven -- zodat "Nooit" niet naast
   "Weigeren" komt te liggen als je met een duim mikt. */
.bk-besluit-voortaan { margin-top: var(--bk-ruimte-3); }

.bk-veld { display: grid; gap: var(--bk-ruimte-1); }

.bk-invoer, .bk-select {
    font: inherit;
    padding: var(--bk-ruimte-2);
    border: var(--bk-lijn);
    border-radius: var(--bk-rond);
    background: var(--bk-grond);
    color: var(--bk-tekst);
    width: 100%;
}

/* ── Gesprek ──────────────────────────────────────────────────────────────
 *
 * Dit scherm wijkt bewust af van de rest: geen kaarten, maar een berichten-app.
 * Een gesprek is geen overzicht -- je leest van onder naar boven, je typt
 * onderaan, en de draad houdt zijn eigen plek vast. */

.bk-gesprek {
    /* De zoekoverlay legt zich over dít vlak, niet over de hele pagina: de
       navigatie bovenaan moet bereikbaar blijven terwijl je zoekt. */
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: var(--bk-vlak);
    border: var(--bk-lijn);
    border-radius: var(--bk-rond);
    overflow: hidden;
}

.bk-gesprek-kop {
    /* Relatief, zodat de kiesbalk zich er met `inset: 0` precies overheen kan
       leggen -- zie bk-kiesbalk. */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bk-ruimte-3);
    padding: var(--bk-ruimte-2) var(--bk-ruimte-3);
    border-bottom: var(--bk-lijn);
    background: var(--bk-vlak);
}

/* Met wie je praat kies je door op zijn gezicht te tikken, niet uit een
   uitklaplijstje met zijn naam erin. */
.bk-avatar-knop {
    display: grid;
    justify-items: center;
    gap: var(--bk-ruimte-1);
    padding: var(--bk-ruimte-1);
    border: 0;
    border-radius: var(--bk-rond);
    background: none;
    color: var(--bk-stil);
    font: inherit;
    font-size: 0.8125rem;
    text-decoration: none;
    cursor: pointer;
}
/* De grens tussen de bots van de een en die van de ander, in de kop van het
   gesprek. Een streepje en geen witruimte: met alleen ruimte ertussen lijken het
   vijf bots van dezelfde persoon. */
.bk-scheider {
    align-self: stretch;
    width: 1px;
    margin: var(--bk-ruimte-1) var(--bk-ruimte-1);
    background: var(--bk-rand);
}

/* Op een smal scherm staat elke persoon toch al op zijn eigen regel, mét zijn
   naam ervoor. Het streepje bleef dan als los stokje aan het eind van de vorige
   regel hangen -- daar scheidt het niets meer. */
.bk-avatar-knop:hover { background: var(--bk-grond); color: var(--bk-tekst); }
.bk-avatar-actief { color: var(--bk-accent); font-weight: var(--bk-gewicht-vet); }
.bk-avatar-actief .bk-avatar { box-shadow: 0 0 0 2px var(--bk-accent); }

/* Het vlak waar de draad in scrollt. Bestaat alleen zodat het zwevende
   dagpilletje ergens aan opgehangen kan worden: staat dat pilletje ín de
   scroller, dan scrollt het mee naar boven weg. */
.bk-draadvak {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
}

.bk-draad {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: var(--bk-ruimte-2);
    padding: var(--bk-ruimte-3);
    background: var(--bk-grond);
}

/* Welke dag je leest, als pilletje midden boven de draad.
 *
 * Eerder was dit een band over de volle breedte tússen de berichten, en die
 * kostte een hele regel. Nu zweeft hij erboven: buiten de stroom, dus hij duwt
 * niets opzij, en gesprek.js zet het label op de dag van het bovenste bericht
 * dat je ziet. Een eigen achtergrond en schaduw, want er schuift tekst
 * onderdoor. */
.bk-dagzweef {
    position: absolute;
    top: var(--bk-ruimte-2);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
    padding: var(--bk-ruimte-1) var(--bk-ruimte-2);
    border-radius: 999px;
    border: var(--bk-lijn);
    background: var(--bk-vlak);
    box-shadow: var(--bk-schaduw);
    color: var(--bk-stil);
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* De grens tussen twee dagen, als regel tússen de berichten.
 *
 * Geen belletje: dit is geen bericht en het hoort dus ook niet links of rechts
 * uit te lijnen. De datum staat voluit ("25 augustus 2026") en niet als
 * "vandaag" -- een scheider blijft in de draad staan en wordt morgen opnieuw
 * gelezen. Het zwevende pilletje hierboven doet het andere werk: dat zegt waar
 * je nú kijkt, ook halverwege een lange dag.
 *
 * De streepjes zijn ::before/::after en geen tekens in de html: zo lopen ze door
 * tot de rand, hoe lang de datum ook is. */
.bk-dagscheider {
    display: flex;
    align-items: center;
    gap: var(--bk-ruimte-2);
    margin: var(--bk-ruimte-1) 0;
    color: var(--bk-stil);
    font-size: 0.8125rem;
}
.bk-dagscheider::before,
.bk-dagscheider::after {
    content: "";
    flex: 1;
    border-top: var(--bk-lijn);
}

.bk-bericht {
    /* Relatief omdat het kiespijltje in de rechterbovenhoek van de bel hangt. */
    position: relative;
    padding: var(--bk-ruimte-2) var(--bk-ruimte-3);
    border-radius: var(--bk-rond);
    max-width: min(46rem, 85%);
    overflow-wrap: anywhere;
}
.bk-bericht-in { background: var(--bk-accent-zacht); justify-self: end; }
.bk-bericht-uit { background: var(--bk-vlak); border: var(--bk-lijn); justify-self: start; }

/* Waar je uit een zoekresultaat naartoe sprong. */
.bk-bericht-gemarkeerd { box-shadow: 0 0 0 2px var(--bk-accent); }

/* ── Berichten wegvegen ───────────────────────────────────────────────────
 *
 * Een bericht aanwijzen om het uit de draad te halen. Twee ingangen, precies
 * zoals in een berichten-app: met een muis verschijnt er een pijltje op de bel,
 * met een vinger houd je de bel even ingedrukt. Het pijltje staat altijd in de
 * html (zie _berichten.html) -- alleen de css bepaalt of je het ziet, want een
 * knop die javascript erbij zet ziet er na een herlaad anders uit. */
.bk-kies-knop {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Zo hoog als de eerste regel en een stuk breder dan het pijltje zelf: de
       knop legt met een verloop de tekst eronder weg, zodat het pijltje nooit
       óp een woord staat. Precies wat WhatsApp doet, en de reden dat de bel
       geen vaste ruimte hoeft te reserveren voor een knop die er meestal niet
       is. */
    width: 3.5rem;
    height: 2.25rem;
    padding: 0 var(--bk-ruimte-2) 0 0;
    /* Niet in beeld tot je erbij bent, maar wel bereikbaar met de tab-toets:
       display:none zou hem uit de volgorde halen. */
    opacity: 0;
    border: 0;
    border-radius: 0 var(--bk-rond) 0 var(--bk-rond);
    background: none;
    color: var(--bk-stil);
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

/* Het verloop draagt de kleur van de bel waar het overheen ligt, en die
   verschilt per richting. Vandaar twee regels en geen `inherit`: een verloop
   erft niet, en een harde vlek zou de tekst afknippen in plaats van laten
   vervagen. */
.bk-bericht-in .bk-kies-knop {
    background: linear-gradient(90deg, transparent, var(--bk-accent-zacht) 45%);
}
.bk-bericht-uit .bk-kies-knop {
    background: linear-gradient(90deg, transparent, var(--bk-vlak) 45%);
}
.bk-bericht:hover .bk-kies-knop,
.bk-kies-knop:focus-visible { opacity: 1; }

/* Een getekend pijltje en geen letter: een `v` of een `⌄` is in elke letterfamilie
   iets anders groot en staat nergens even hoog. Deze tekening staat vast, schaalt
   mee met de tekstgrootte en neemt de kleur van de knop over. */
.bk-kies-icoon {
    width: 1.125em;
    height: 1.125em;
    display: block;
}

/* Op een aanraakscherm bestaat "erover gaan" niet, en een pijltje dat er altijd
   staat legt beslag op de hoek van elke bel. Daar is lang indrukken de weg --
   gesprek.js luistert daarop. */
@media (hover: none) {
    .bk-kies-knop { display: none; }
}

/* Een weggeveegd bericht blijft in de draad staan, maar dan als één klein
 * regeltje op de plek waar het stond. Zo zie je dát er iets weg is en kun je er
 * bij; helemaal weglaten liet een gat achter, en een gat is niet aan te wijzen.
 *
 * Alles gaat via deze ene class, dus openklappen is één class weghalen -- geen
 * tweede manier om een bericht te tekenen, en na een herlaad staat alles weer
 * netjes dicht. */
.bk-bericht-verborgen {
    /* Geen bel meer: geen kleur, geen rand, geen ruimte om niets. */
    background: none;
    border: 0;
    padding: 0;
    max-width: 100%;
}
.bk-bericht-verborgen .bk-opmaak,
.bk-bericht-verborgen .bk-bijlage,
.bk-bericht-verborgen .bk-tijd,
.bk-bericht-verborgen .bk-kies-knop { display: none; }

/* Het regeltje zelf. Het staat in élk bericht en is alleen te zien als dat
   bericht verborgen is -- zo hoeft er niets bijgebouwd te worden op het moment
   dat je iets wegveegt, en ziet live hetzelfde eruit als na een herlaad. */
.bk-verborgen-plek {
    display: none;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bk-stil);
    font: inherit;
    font-size: 0.75rem;
    font-style: italic;
    cursor: pointer;
}
.bk-bericht-verborgen .bk-verborgen-plek { display: block; }
.bk-verborgen-plek:hover { color: var(--bk-tekst); text-decoration: underline; }

/* Klap je hem open, dan is het weer een gewoon bericht -- met dat regeltje
   erboven als merkje dat het eigenlijk verborgen is, en om het weer dicht te
   doen. Twee regels, want de bel is in of uit en die kleuren verschillen. */
.bk-bericht-getoond.bk-bericht-in { background: var(--bk-accent-zacht); }
.bk-bericht-getoond.bk-bericht-uit { background: var(--bk-vlak); border: var(--bk-lijn); }
.bk-bericht-getoond {
    padding: var(--bk-ruimte-2) var(--bk-ruimte-3);
    max-width: min(46rem, 85%);
}
.bk-bericht-getoond .bk-opmaak,
.bk-bericht-getoond .bk-bijlage,
.bk-bericht-getoond .bk-tijd { display: revert; }

.bk-bericht-gekozen {
    box-shadow: 0 0 0 2px var(--bk-accent);
    /* Ook een merkje in de bel zelf: bij drie gekozen berichten onder elkaar is
       een randje alleen niet genoeg om te zien wélke je te pakken hebt. */
    background-image: linear-gradient(var(--bk-accent-zacht), var(--bk-accent-zacht));
}

/* De balk die de kop vervángt zodra er iets gekozen is: hoeveel, alles erbij,
   en de prullenbak.
 *
 * Zwevend en niet in de stroom. Stond hij ertussen, dan schoof alles eronder
 * een balkhoogte omlaag op het moment dat je een bericht aanwees -- en dan
 * springt precies de tekst weg waar je naar wijst. Nu ligt hij over de
 * avatarrij heen: die heb je toch niet nodig terwijl je aan het opruimen bent.
 *
 * `inset: 0` binnen de kop en geen eigen hoogte: zo dekt hij die kop precies,
 * hoe hoog hij ook staat. Een eigen maat zou op een smal scherm -- waar de
 * avatarrij afbreekt -- een randje van de rij laten zien onder de balk. */
.bk-kiesbalk {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--bk-ruimte-2);
    padding: var(--bk-ruimte-2) var(--bk-ruimte-3);
    border-bottom: var(--bk-lijn);
    background: var(--bk-vlak);
}
/* Het aantal duwt de prullenbak naar rechts. */
.bk-kiesbalk .bk-label { flex: 1; margin: 0; }
/* Hetzelfde in de kop van een overlay: de titel links, de kruisknop tegen de
   rechterrand. Zonder dit plakt het kruis tegen het woord aan. */
.bk-balk-onder .bk-label { flex: 1; margin: 0; }

/* Het menu achter het pijltje op een bel. Zweeft over de draad, dus het duwt
   niets opzij; gesprek.js zet hem bij de bel die je aanwees en houdt hem binnen
   het gesprek. Dezelfde vorm als het emoji-paneel: dat is de enige andere plek
   waar er iets boven de draad hangt. */
.bk-menu {
    position: absolute;
    z-index: 4;
    min-width: 12rem;
    padding: var(--bk-ruimte-1);
    background: var(--bk-vlak);
    border: var(--bk-lijn);
    border-radius: var(--bk-rond);
    box-shadow: var(--bk-schaduw);
}

.bk-menu-knop {
    display: block;
    width: 100%;
    /* Een volle regel als tikdoel: op een telefoon mikt een duim niet op tekst. */
    min-height: var(--bk-tikdoel);
    padding: var(--bk-ruimte-2) var(--bk-ruimte-3);
    text-align: left;
    font: inherit;
    color: inherit;
    border: 0;
    border-radius: var(--bk-rond);
    background: none;
    cursor: pointer;
}
.bk-menu-knop:hover { background: var(--bk-grond); }

/* Eén weggeveegd bericht in het overzicht, met de knop om het terug te zetten.
   In de overlay, dus dezelfde vorm als een zoektreffer -- alleen is dit geen
   knop maar een regel mét een knop. */
.bk-verborgen-regel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bk-ruimte-2);
    padding: var(--bk-ruimte-2) 0;
    border-bottom: var(--bk-lijn);
}
.bk-verborgen-regel .bk-knop { flex: none; }

.bk-tijd {
    display: block;
    text-align: right;
    color: var(--bk-stil);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* De opmaak binnen een bericht komt uit de renderer en niet uit een sjabloon,
   dus die tags dragen geen eigen class. Ze worden hier van binnenuit gestuurd. */
.bk-opmaak > :first-child { margin-top: 0; }
.bk-opmaak > :last-child { margin-bottom: 0; }
.bk-opmaak p { margin: 0 0 var(--bk-ruimte-2); }
.bk-opmaak ul,
.bk-opmaak ol { margin: 0 0 var(--bk-ruimte-2); padding-left: var(--bk-ruimte-4); }
.bk-opmaak li { margin: 0 0 var(--bk-ruimte-1); }
.bk-opmaak h1,
.bk-opmaak h2,
.bk-opmaak h3,
.bk-opmaak h4,
.bk-opmaak h5,
.bk-opmaak h6 {
    /* Een bericht is geen pagina: een kop erin is een vette regel, geen titel
       die met de paginatitel gaat concurreren. */
    font-size: 1rem;
    font-weight: var(--bk-gewicht-vet);
    margin: var(--bk-ruimte-3) 0 var(--bk-ruimte-2);
}
/* Een lap tekst die van boven naar beneden gelezen wordt -- een dagoverzicht --
   in plaats van een bericht van drie regels. Daar mag een kop wél een kop zijn:
   zonder houvast is het één grijze muur, en dan wordt hij niet gelezen. Alleen
   de koppen verschillen; de rest van de opmaak blijft precies gelijk. */
.bk-opmaak-lang h1,
.bk-opmaak-lang h2 {
    font-size: 1.125rem;
    margin-top: var(--bk-ruimte-4);
    padding-top: var(--bk-ruimte-3);
    border-top: var(--bk-lijn);
}
.bk-opmaak-lang > h1:first-child,
.bk-opmaak-lang > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.bk-opmaak-lang h3 { font-size: 1.0625rem; margin-top: var(--bk-ruimte-4); }

.bk-opmaak code {
    background: var(--bk-grond);
    border-radius: 3px;
    padding: 0 var(--bk-ruimte-1);
    font-size: 0.9em;
}
.bk-opmaak pre {
    background: var(--bk-grond);
    border: var(--bk-lijn);
    border-radius: var(--bk-rond);
    padding: var(--bk-ruimte-2);
    margin: 0 0 var(--bk-ruimte-2);
    overflow-x: auto;
}
.bk-opmaak pre code { background: none; padding: 0; }
.bk-opmaak blockquote {
    margin: 0 0 var(--bk-ruimte-2);
    padding-left: var(--bk-ruimte-3);
    border-left: 3px solid var(--bk-rand);
    color: var(--bk-stil);
}
.bk-opmaak table { border-collapse: collapse; font-size: 0.9375rem; }
.bk-opmaak th,
.bk-opmaak td { padding: var(--bk-ruimte-1) var(--bk-ruimte-2); border-bottom: var(--bk-lijn); text-align: left; }
.bk-opmaak a { color: var(--bk-accent); }

/* Kleurmarkering in een document -- {groen}...{/groen} enz., zie opmaak.py.
   Dezelfde drie betekenissen als overal: groen is in orde, geel is aandacht,
   rood is mis. Geen vierde kleur: een bot kiest uit deze drie, niet uit een
   palet. */
.bk-mark-groen { background: var(--bk-accent-zacht); border-radius: 3px; padding: 0.05em 0.3em; }
.bk-mark-geel { background: var(--bk-waarschuwing-zacht); border-radius: 3px; padding: 0.05em 0.3em; }
.bk-mark-rood { background: var(--bk-fout-zacht); border-radius: 3px; padding: 0.05em 0.3em; }

/* ── Bijlagen in een bericht ──────────────────────────────────────────── */

.bk-bijlage { display: grid; gap: var(--bk-ruimte-2); margin-bottom: var(--bk-ruimte-2); }
/* De foto zit in een link zonder eigen class; zonder dit steekt de streep van
   de browser onder de afbeelding uit. */
.bk-bijlage a { text-decoration: none; }

.bk-bijlage-foto {
    display: block;
    max-width: 100%;
    max-height: 18rem;
    border-radius: var(--bk-rond);
    border: var(--bk-lijn);
}

.bk-bijlage-bestand {
    display: flex;
    align-items: center;
    gap: var(--bk-ruimte-2);
    padding: var(--bk-ruimte-2);
    border: var(--bk-lijn);
    border-radius: var(--bk-rond);
    background: var(--bk-grond);
    color: inherit;
    text-decoration: none;
}
.bk-bijlage-bestand:hover { border-color: var(--bk-accent); }

/* Hij is bezig. Zonder dit lijkt een beurt die even duurt op een bot die niets
   doet, en ga je nog een keer hetzelfde vragen. */
.bk-onderweg {
    display: flex;
    align-items: center;
    gap: var(--bk-ruimte-2);
    justify-self: start;
    color: var(--bk-stil);
    font-size: 0.875rem;
    padding: var(--bk-ruimte-1) var(--bk-ruimte-3);
}

/* ── Bestanden ────────────────────────────────────────────────────────────
 *
 * Eén regel per bestand, op het tabblad Bestanden en in de kaart op elk
 * botscherm. Grid en geen flex zoals bk-taak: hier lijnen de kolommen van de
 * ene regel op de andere uit, en dat is de reden dat je een lijst leest in
 * plaats van hem regel voor regel te ontcijferen.
 *
 * Op een smal scherm klapt hij in tot twee regels -- de naam blijft heel, de
 * meta zakt eronder. Wat hij nooit doet is de pagina laten schuiven. */

.bk-bestand {
    display: grid;
    /* tijd | bot | naam | soort | voor | nieuw.
     *
     * Alleen de naam rekt mee; de rest is zo breed als zijn inhoud. Elke cel
     * staat er altijd, ook leeg -- een cel die wegvalt schuift de 1fr-kolom op
     * naar de badge ernaast, en dan rekt `MD` zich over de halve regel uit.
     *
     * Op de kaart van één bot ontbreekt de botcel wél echt: zijn naam staat al
     * boven de kaart, en een lege kolom van 4rem als inspringing bij elke regel
     * is geen uitlijning maar een gat. Vandaar het tweede grid hieronder. */
    grid-template-columns: auto auto 1fr auto auto auto;
    align-items: baseline;
    gap: var(--bk-ruimte-2);
    padding: var(--bk-ruimte-2) 0;
    border-bottom: var(--bk-lijn);
}
.bk-bestand:last-child { border-bottom: 0; }

/* De botkolom houdt zijn breedte ook als we de bot niet weten. Zonder dit klapt
 * juist die ene cel dicht en schuift de naam van precies die regel naar links --
 * en dan is het grid geen grid meer. */
.bk-bestand > .bk-rij { min-width: 4rem; }

/* Geen botcel: dan is het een kolom minder. Via :has() en niet via een extra
 * class, zodat `_bestanden.html` niet hoeft te weten in wat voor kaart hij
 * staat -- dat weet de aanroeper, en die zet al `toon_bot`. Een browser zonder
 * :has() krijgt een lege eerste kolom: scheef, niet stuk. */
.bk-bestand:not(:has(> .bk-rij)) { grid-template-columns: auto 1fr auto auto auto; }

.bk-bestand-naam {
    color: inherit;
    /* Een lange bestandsnaam breekt liever af dan dat hij de kolom uitduwt. */
    overflow-wrap: anywhere;
}

/* Het kleine linkje naast een Word/Excel-bestand dat standaard als pdf
 * getoond wordt (`/voorbeeld/...`): "docx openen" haalt het echte bestand op.
 * Stil, net als `bk-bestand-voor` -- dit is een tweede, kleinere weg, niet de
 * hoofdactie van de regel. */
.bk-bestand-open {
    margin-left: var(--bk-ruimte-1);
    font-size: 0.75rem;
    color: var(--bk-stil);
    text-decoration: none;
}
.bk-bestand-open:hover { text-decoration: underline; }

/* Het merkje met de extensie: pdf, md, png. Klein en stil, want het zegt
 * alleen wát het is -- de naam zegt waar het over gaat. */
.bk-bestand-soort {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bk-stil);
    border: var(--bk-lijn);
    border-radius: var(--bk-rond);
    padding: 0 var(--bk-ruimte-1);
}

/* Nieuw of bijgewerkt. Alleen "nieuw" krijgt de accentkleur: als allebei
 * opvallen, valt geen van beide op. */
.bk-bestand-nieuw {
    font-size: 0.8125rem;
    color: var(--bk-accent);
}

/* "voor zichzelf" -- alleen op de kaart van één bot, waar beide soorten door
 * elkaar in één lijst staan. Stil en niet in een kleur: het is een
 * kanttekening bij de regel, geen waarschuwing. */
.bk-bestand-voor {
    font-size: 0.8125rem;
    color: var(--bk-stil);
    font-style: italic;
}

/* Het fragment uit een zoektreffer staat onder de regel, over de volle breedte
 * -- naast de naam zou het de kolommen scheeftrekken. */
.bk-bestand .bk-treffer {
    grid-column: 1 / -1;
    border-bottom: 0;
    padding: 0;
    color: var(--bk-stil);
    cursor: default;
}
.bk-bestand .bk-treffer:hover { background: none; }

/* Smal: de naam krijgt de volle breedte op een eigen regel, de rest staat
 * eronder. Wat hij nooit doet is de pagina laten schuiven. */
/* ── Meekijken ────────────────────────────────────────────────────────── */

/* De strook die zegt van wie je leest, tot wanneer, en wie er met jou meeleest.
   Staat op drie schermen, en binnen het gesprek tussen de kop en de draad. Hij
   eist geen hoogte op: de draad eronder rekt, deze strook niet. */
.bk-inzage {
    display: grid;
    gap: var(--bk-ruimte-1);
    padding: var(--bk-ruimte-2) var(--bk-ruimte-3);
    border-bottom: var(--bk-lijn);
    background: var(--bk-vlak);
}

/* Op Dagoverzicht en Dossier staat hij los tussen de kaarten in plaats van in de
   rand van het gesprek. Daar hoort hij een kaart te zijn, anders zweeft er een
   wit vlak zonder randen tussen de rest. */
.bk-inhoud > .bk-inzage {
    border: var(--bk-lijn);
    border-radius: var(--bk-rond);
}

/* ── De balk onderaan ─────────────────────────────────────────────────── */

.bk-balk-onder {
    position: relative;      /* het emoji-paneel hangt hierboven */
    display: flex;
    align-items: flex-end;
    gap: var(--bk-ruimte-2);
    padding: var(--bk-ruimte-2) var(--bk-ruimte-3);
    border-top: var(--bk-lijn);
    background: var(--bk-vlak);
}

.bk-invoer-groei {
    flex: 1;
    font: inherit;
    resize: none;
    /* Groeit mee met wat je typt, tot een hoogte waarna hij zelf gaat scrollen
       -- anders duwt een lang bericht de draad van het scherm. */
    max-height: 9rem;
    padding: var(--bk-ruimte-2);
    border: var(--bk-lijn);
    border-radius: var(--bk-rond);
    background: var(--bk-grond);
    color: var(--bk-tekst);
}

.bk-icoonknop {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    line-height: 1;
    border: var(--bk-lijn);
    border-radius: var(--bk-rond);
    background: var(--bk-vlak);
    color: var(--bk-tekst);
    /* Een icoon met een streep eronder ziet eruit als een fout, niet als een
       link. Hij is ook vaak een <a>, dus zeggen we het hier. */
    text-decoration: none;
    cursor: pointer;
}
.bk-icoonknop:hover { border-color: var(--bk-accent); }

/* ── Emoji ────────────────────────────────────────────────────────────── */

.bk-emoji {
    width: min(22rem, 90vw);
    max-height: 18rem;
    overflow-y: auto;
    padding: var(--bk-ruimte-2);
    background: var(--bk-vlak);
    border: var(--bk-lijn);
    border-radius: var(--bk-rond);
    box-shadow: var(--bk-schaduw);
    z-index: 3;
}

/* In de balk hangt hij erboven; los in de catalogus staat hij gewoon in de
   stroom, zodat je hem daar kunt zien zonder een balk eromheen te verzinnen. */
.bk-balk-onder .bk-emoji {
    position: absolute;
    bottom: 100%;
    left: 0;
}

.bk-emoji-groep { color: var(--bk-stil); font-size: 0.8125rem; margin: var(--bk-ruimte-2) 0 var(--bk-ruimte-1); }

.bk-emoji-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
    gap: var(--bk-ruimte-1);
}
.bk-emoji-raster button {
    font-size: 1.25rem;
    line-height: 1.6;
    border: 0;
    border-radius: var(--bk-rond);
    background: none;
    cursor: pointer;
}
.bk-emoji-raster button:hover { background: var(--bk-grond); }

/* ── Zoeken over het gesprek heen ─────────────────────────────────────── */

.bk-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    background: var(--bk-vlak);
}

.bk-overlay-lijf { flex: 1; min-height: 0; overflow-y: auto; padding: var(--bk-ruimte-3); }

.bk-treffer {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    padding: var(--bk-ruimte-2) 0;
    border: 0;
    border-bottom: var(--bk-lijn);
    background: none;
    cursor: pointer;
}
.bk-treffer:hover { background: var(--bk-grond); }

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

.bk-grafiek { width: 100%; height: 10rem; }
.bk-grafiek-lijn { fill: none; stroke: var(--bk-accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* ── Avatars ──────────────────────────────────────────────────────────────
 *
 * Elke bot heeft een portret in web/static/avatar-<naam>.svg. Twee maten en
 * verder niets: klein naast een naam, groot in de kop van zijn eigen pagina.
 * Vaste afmetingen, want een svg zonder breedte rekt zich anders op tot de
 * volle kolom en duwt de rest van de kaart weg. */

.bk-avatar {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    border-radius: 50%;
    vertical-align: middle;
}

.bk-avatar-groot { width: 4rem; height: 4rem; }

/* Gepauzeerd is te zien aan de stip, maar die staat niet overal. Grijs geeft
   het portret dezelfde boodschap mee. */
.bk-avatar-uit { filter: grayscale(100%); opacity: 0.55; }

.bk-foto {
    width: 100%;
    /* Een bord is breder dan hoog; zonder deze grens rekt een vierkante of
       staande foto de hele kolom uit en verschuift alles eronder. */
    max-height: 14rem;
    object-fit: cover;
    border-radius: var(--bk-rond);
    border: var(--bk-lijn);
}

/* Breed spul mag scrollen in zijn eigen kader; de pagina zelf nooit. */
.bk-scrolt { overflow-x: auto; }

/* ── Op een telefoon ──────────────────────────────────────────────────────
 *
 * Eén breedte-breakpoint in het hele bestand, en die staat hier. Er waren er
 * twee (40rem voor het streepje in de gespreks-kop, 34rem voor de
 * bestandsregel) en dat is nu al niet meer uit te leggen; met de balk onderaan
 * erbij zouden het er vier worden. Wat op de een gebeurt en op de ander niet,
 * komt later terug als verrassing.
 *
 * 48rem is 768px: een iPhone in liggende stand valt aan de brede kant, een
 * iPad in staande stand precies erop. 47.99 en niet 48, zodat deze en de
 * brede weergave elkaar nooit overlappen.
 *
 * Een derde breakpoint mag alleen als je erbij opschrijft wát er op dat punt
 * breekt. Anders is het een getal dat niemand meer durft aan te raken. */

@media (max-width: 47.99rem) {

    /* Hier stond een stap omlaag in de wortelmaat: 16 op een breed scherm, 15
     * op een telefoon. Die stap is weg nu de wortelmaat overal 13px is -- hij
     * bestond om de desktopmaat op een klein scherm te temperen, en die reden
     * is er niet meer. Een tweede verkleining bovenop 13 maakt het krap zonder
     * dat er meer op past.
     *
     * Wat hieronder wél telefoon-specifiek blijft: --bk-tikdoel staat in px (een
     * duim wordt niet kleiner als de letter dat doet) en de invoervelden blijven
     * 16px -- daaronder zoomt iOS in en komt er niet meer uit. */

    /* De marge kan hierdoor blijven wat hij is: hij krimpt al mee. Een tweede
       stap eroverheen zou twee keer verkleinen, en dán wordt het krap. */

    /* ── De navigatie wordt een balk onderaan ─────────────────────────────
     *
     * Daar komt je duim, en daar hoort de belangrijkste keuze te staan. Met
     * negen bestemmingen brak de rij bovenaan over vier regels: 237px van 844
     * was weg voordat er iets te zien was.
     *
     * Nadrukkelijk `.bk-pagina > .bk-nav` en niet `.bk-nav`: de styleguide
     * toont een navigatie als vóórbeeld in een kaart, en die moet in de tekst
     * blijven staan in plaats van zich over het scherm te leggen. Dezelfde
     * discipline als bij :has() en bk-gesprek hierboven.
     *
     * env(safe-area-inset-bottom) vult de streep onderaan een iPhone zonder
     * thuisknop. Dat werkt alleen met viewport-fit=cover in basis.html; zonder
     * dat is de waarde altijd 0 en merk je er niets van. */
    .bk-pagina > .bk-nav {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 4;
        display: flex;
        flex-wrap: nowrap;
        /* Vegen in plaats van verstoppen. Vier vaste vakken over de volle
           breedte lieten de helft van de bestemmingen achter een knop "Meer",
           en dat kostte een tik plus de wetenschap dát er meer was. Nu staat
           alles er, en zie je bij het eerste veegje dat het doorloopt.
           De vakken zijn zo breed als hun inhoud: uitrekken tot de volle
           breedte gaf vier knoppen met gaten ertussen. */
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        gap: 0;
        margin: 0;
        border-top: var(--bk-lijn);
        border-bottom: 0;
        padding: var(--bk-ruimte-1) var(--bk-ruimte-1)
                 calc(var(--bk-ruimte-1) + env(safe-area-inset-bottom));
        background: var(--bk-vlak);
        /* De schuifbalk zelf hoeft niet in beeld: hij zou over de namen vallen
           en op een telefoon veeg je toch. Dat er meer is zie je aan het vak
           dat half afgesneden aan de rand staat. */
        scrollbar-width: none;
    }
    .bk-pagina > .bk-nav::-webkit-scrollbar { display: none; }

    .bk-pagina > .bk-nav > .bk-nav-link {
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 2px;
        flex: 0 0 auto;
        scroll-snap-align: center;
        border-radius: 0;
        padding: var(--bk-ruimte-1) var(--bk-ruimte-2);
        min-height: var(--bk-tikdoel);
        /* Breed genoeg om te raken, smal genoeg dat er meer dan vier in beeld
           passen -- dan zie je dat de rij doorloopt zonder te hoeven vegen. */
        min-width: 4.25rem;
        white-space: nowrap;
        /* Geen eigen tekstmaat: een bestemming is geen bijschrift. Hier stond
           0.75rem uit de tijd dat de wortelmaat 16px was; op 13px zou dat een
           naam van 10px opleveren, kleiner dan alles eromheen. De rij past
           daardoor iets minder vakken tegelijk -- ze schuift, dus dat kost
           zicht en geen bestemming. */
    }

    /* De naam onder het merkje. Een bot mag lang heten -- een vak van tien
       centimeter breed hoort daar niet uit te volgen, want dan past er nog maar
       één naast. */
    .bk-nav-naam {
        max-width: 6rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* De klok niet. Elk vak in deze balk is een tikdoel van een duim breed; een
       zesde kolom met alleen de tijd maakt de tabs smaller voor iets dat de
       telefoon zelf al bovenaan zijn scherm toont. */
    .bk-pagina > .bk-nav > .bk-nav-klok { display: none; }

    /* Actief is hier een streep en geen vlak: een gevuld blokje in een balk
       van vijf ziet eruit als een knop die ingedrukt staat, niet als "hier
       ben je". */
    .bk-pagina > .bk-nav > .bk-nav-link-actief {
        background: transparent;
        box-shadow: inset 0 2px 0 var(--bk-accent);
    }

    /* De teller zit in een vak van 78px breed; rechtsboven in de hoek zou hij
       half over de rand van het volgende vak vallen. */
    .bk-pagina > .bk-nav .bk-teller { top: 0; right: var(--bk-ruimte-1); }

    /* De balk ligt over de pagina heen, dus de laatste kaart moet erlangs
       kunnen. */
    .bk-pagina {
        padding-bottom: calc(var(--bk-tikdoel) + var(--bk-gat) + env(safe-area-inset-bottom));
    }

    /* ── Tikdoelen en leesbaarheid ────────────────────────────────────── */

    /* Waar je in typt blijft 16px. Onder die maat zoomt iOS Safari in zodra je
       een veld aanraakt, en het komt daarna niet meer terug. Dat is gedrag van
       de browser en geen smaak, dus dit is geen uitzondering waar je over kunt
       twisten -- vandaar ook in px en niet in rem. */
    .bk-invoer,
    .bk-select,
    .bk-invoer-groei { font-size: 16px; }

    /* Deze tabel bevat op /dossier je eigen cijfers; dat is leestekst en geen
       etiket, dus hij loopt mee met de rest in plaats van nog kleiner te zijn.
       bk-stil, bk-label en bk-tijd blijven wél klein -- dat zijn merkjes bij
       iets anders, geen tekst om te lezen. */
    .bk-tabel { font-size: inherit; }

    /* Hier vullen de twee knoppen wél de breedte: er is niets anders om ruimte
       aan te geven, en een groot tikdoel is precies wat je wilt bij een besluit
       waar een bot op staat te wachten. */
    .bk-besluit { grid-template-columns: 1fr 1fr; }

    /* ── Krapper waar het krap moet ───────────────────────────────────── */

    /* Op een telefoon is elke acht pixels een regel tekst die je anders niet
       ziet. De kaart houdt zijn vorm, maar de lucht eromheen en erin gaat een
       trede omlaag: dat is het verschil tussen twee en drie botkaarten in
       beeld. */
    .bk-kaart-kop,
    .bk-kaart-lijf { padding: var(--bk-ruimte-2); }

    /* En tussen de kaarten. Ze hebben allebei een rand; die doet het
       scheidingswerk al, en dan hoeft de ruimte ertussen niet ook nog eens een
       hele regel te zijn. */
    .bk-inhoud { gap: var(--bk-ruimte-2); }

    /* ── Het gesprek is het scherm ────────────────────────────────────── */

    /* De rij met gezichten werd twee regels zodra er een meekijkafspraak loopt
       (INGRID met drie bots, REMY met twee). Hier is horizontaal schuiven wél
       het goede antwoord: het is een strook gezichten en geen gegevens. Je ziet
       altijd dat er meer naast staat, en je verliest geen vergelijking. */
    .bk-gesprek-kop .bk-rij {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    /* De hoogte die javascript gemeten heeft, met dvh als terugval zolang er
       nog niets gemeten is (en voor een browser zonder visualViewport). */
    .bk-pagina:has(> .bk-inhoud > .bk-gesprek) { height: var(--bk-zicht, 100dvh); }

    /* Staat het toetsenbord open, dan is er geen plek voor de balk onderaan --
       die zou tussen het veld en het toetsenbord in komen te hangen. */
    .bk-toetsenbord .bk-pagina > .bk-nav { display: none; }
    .bk-toetsenbord .bk-pagina { padding-bottom: var(--bk-marge); }

    /* ── Een tabel die per regel leest ────────────────────────────────── */

    /* Horizontaal schuiven is voor gegevens geen oplossing maar een verstopplek:
       je weet niet dat er rechts nog iets staat, en je kunt twee regels niet
       meer met elkaar vergelijken. Hier wordt elke rij een blokje waarin de
       kolomkop vóór zijn eigen waarde staat.

       Die kop komt uit `data-kop` op de cel, want CSS kan vanuit een td de
       tekst van de bijbehorende th niet bereiken -- daar bestaat geen selector
       voor. web/guard-styleguide.py controleert dat elke cel in zo'n tabel er
       een heeft; vergeten betekent een lege regel zonder dat iemand het ziet.

       De koprij verdwijnt uit beeld maar niet uit de pagina: hij is nog steeds
       waar de kolomkoppen vandaan komen voor wie voorleest. En de rollen staan
       expliciet in de markup, want zodra je `display` op table/tr/td verandert
       valt de tabel uit de toegankelijkheidsboom en is het een stapel divs. */
    .bk-vouwtabel thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .bk-vouwtabel tr {
        display: grid;
        gap: var(--bk-ruimte-1);
        padding: var(--bk-ruimte-2) 0;
        border-bottom: var(--bk-lijn);
    }
    .bk-vouwtabel tr:last-child { border-bottom: 0; }

    .bk-vouwtabel td {
        display: grid;
        grid-template-columns: 6.5rem 1fr;
        gap: var(--bk-ruimte-2);
        align-items: baseline;
        padding: 0;
        border: 0;
    }

    .bk-vouwtabel td::before {
        content: attr(data-kop);
        color: var(--bk-stil);
        font-size: 0.8125rem;
    }

    /* Een lege cel is op een telefoon een lege regel met alleen een kopje --
       dat leest als iets dat mist. Weg ermee. */
    .bk-vouwtabel td:empty { display: none; }

    /* De tijd staat rechts uitgelijnd omdat hij in een tabel de laatste kolom
       vult. Gevouwen staat hij naast zijn eigen kopje, en dan zweeft hij aan de
       verkeerde kant van het scherm weg van het woord waar hij bij hoort. */
    .bk-vouwtabel .bk-tijd { text-align: left; }

    /* De rij "niets gevonden" beslaat alle kolommen en heeft geen kop nodig. */
    .bk-vouwtabel td[colspan] { grid-template-columns: 1fr; }
    .bk-vouwtabel td[colspan]::before { content: none; }

    /* De kaart eromheen stond op schuiven om een brede tabel kwijt te kunnen.
       Een gevouwen tabel is niet breed meer, en dan zou dat alleen nog een
       schuifbalk zijn die nergens heen gaat. Via :has() en niet via een extra
       class, zodat het sjabloon niet hoeft te weten wat de css doet. */
    .bk-scrolt:has(> .bk-vouwtabel) { overflow-x: visible; }

    /* ── Wat er op een smal scherm anders staat ───────────────────────── */

    /* Op een smal scherm staat elke persoon toch al op zijn eigen regel, mét
       zijn naam ervoor. Het streepje bleef dan als los stokje aan het eind van
       de vorige regel hangen -- daar scheidt het niets meer. */
    .bk-scheider { display: none; }

    /* Op een telefoon twee regels per bestand en niet drie: bovenaan wanneer,
       wie en de merkjes, daaronder de naam over de volle breedte. `order` zet
       de naam achteraan in de bronvolgorde en dus onderaan in het grid.

       Het extensiemerkje valt hier weg. Op een breed scherm is het een snelle
       kolom om langs te lezen; op een telefoon herhaalt het alleen wat er al
       achter de bestandsnaam staat -- `openstaand.md` heeft geen `MD` nodig --
       en dat kostte een derde regel per bestand. */
    .bk-bestand,
    .bk-bestand:not(:has(> .bk-rij)) { grid-template-columns: auto auto auto 1fr; }
    .bk-bestand-soort { display: none; }
    .bk-bestand-naam { grid-column: 1 / -1; order: 1; }
    .bk-bestand-nieuw { justify-self: start; }
    .bk-bestand .bk-treffer { order: 2; }
}

/* ── Wat een vinger moet kunnen raken ─────────────────────────────────────
 *
 * Dit gaat over de vinger en niet over de breedte: een aanraakscherm van
 * 1024px heeft dezelfde duim als een telefoon. Vandaar een eigen vraag, en
 * geen tweede breedte-breakpoint.
 *
 * bk-icoonknop stond op 2.5rem (40px) en haalde de 44px dus net niet. Dat is
 * geen detail: het is het verschil tussen een knop die je raakt en een knop
 * waar je twee keer naar tikt. */
@media (hover: none) and (pointer: coarse) {
    .bk-icoonknop,
    .bk-knop,
    .bk-nav-link,
    .bk-avatar-knop,
    .bk-treffer,
    .bk-bijlage-bestand {
        min-height: var(--bk-tikdoel);
        min-width: var(--bk-tikdoel);
    }

    /* Invoervelden ook. Een keuzemenu van 39px is niet alleen lastig te raken,
       het ziet er ook uit alsof het niet bij de knop ernaast hoort. Alleen de
       hoogte: de breedte regelt de layout. */
    .bk-invoer,
    .bk-select { min-height: var(--bk-tikdoel); }

    /* De emoji stonden in vakjes van 32px. Dat is met een muis prima mikken en
       met een duim niet. */
    .bk-emoji-raster { grid-template-columns: repeat(auto-fill, minmax(var(--bk-tikdoel), 1fr)); }
    .bk-emoji-raster button { min-height: var(--bk-tikdoel); }

    /* Het veld waarin je typt groeit mee met de tekst, maar begon op één regel
       en was daarmee 41px. Alleen de hoogte: de breedte moet juist wél kunnen
       krimpen naast de drie knoppen ernaast. */
    .bk-invoer-groei { min-height: var(--bk-tikdoel); }

    /* Een bestandsnaam is een link in een lijst en was 25px hoog. Van een
       regel tekst een tikdoel maken kan alleen door hem lucht te geven -- en
       dat is hier ook wat je wilt: op een telefoon lees je die lijst met je
       duim erboven. */
    .bk-bestand-naam {
        display: flex;
        align-items: center;
        min-height: var(--bk-tikdoel);
    }

    /* Er is geen hover op een aanraakscherm, dus zonder dit krijg je nul
       bevestiging dat je hem geraakt hebt. */
    .bk-knop:active,
    .bk-icoonknop:active { background: var(--bk-grond); }
}