/*
 * Centrale — beheerinterface
 *
 * Visuele richting: een kantoor. Licht papier, dichte informatie, monospace voor
 * alles wat een machine heeft bedacht (id's, tijden, hashes), en diep bosgroen als
 * accent.
 *
 * Rechte hoeken, harde randen, geen zachte schaduwen. Dit is gereedschap, geen
 * consumentenapp.
 *
 * **Dit was tot september 2026 een donker scherm met amber.** De omslag kwam niet
 * uit smaak maar uit rekenwerk: het merk moest een diepe kleur worden, en contrast
 * werkt maar één kant op — voor #1D4A4B op de leesbaarheidsnorm moet het vlak
 * eronder lichter zijn dan ongeveer #d8d8d8. Een diepe kleur op een donker paneel
 * bestaat niet. Diezelfde afweging heeft telova.nl in september 2026 ook licht
 * gemaakt; de twee horen hetzelfde product te zijn.
 *
 * Wat je daarbij moet weten als je hier iets toevoegt: **er staat geen kleur meer
 * hard in deze stylesheet.** Elke tint die vroeger `rgba(255,255,255,0.02)` of
 * `rgba(224,163,60,0.07)` was, is nu een `color-mix()` op een token. Dat is geen
 * netheid: die twintig plekken waren precies wat een paletwissel stilzwijgend
 * stukmaakte -- een lichte gloed op een licht vlak is onzichtbaar, en dat merk je
 * pas als iemand vraagt waarom de actieve regel niet meer oplicht.
 */

/* ---------------------------------------------------------------- tokens -- */

:root {
    --paneel-0: #eceee9;   /* de pagina */
    --paneel-1: #ffffff;   /* panelen */
    --paneel-2: #f4f6f2;   /* verhoogde vlakken, tabelkoppen */
    --paneel-3: #d5dbd3;   /* randen, scheidingen */

    --inkt-fel: #14180f;
    --inkt: #3a4038;      /* lopende tekst */
    --inkt-dof: #626b5f;  /* uitleg en bijschriften */
    --inkt-zeer-dof: #657060;  /* labels; haalt 4,8 op paneel-2 */

    /* De namen zeggen wat een kleur dóét en niet welke kleur het is. Dat is een geleerde
       les: dit heette `--accent`, was daarna bosgroen en is nu petrol, en de naam klopte bij
       geen van beide. Een token dat naar zijn kleur heet, liegt bij de eerste wijziging.

       **De merkkleur is #1D4A4B**, uit het logo-ontwerp van september 2026 -- dezelfde als
       op telova.nl. Op dit papier haalt hij 8,7 op 1, dus hij kan overal: in koppen, in
       lijnen, als vlak met witte tekst erop. Op een donkere ondergrond zou dat niet kunnen;
       dat is precies waarom dit scherm licht is. */
    --accent: #1D4A4B;      /* actief, geselecteerd, merk */
    --accent-dof: #6a9b79;  /* alleen randen; haalt daar de 3:1 die een rand nodig heeft */
    --op-accent: #ffffff;   /* tekst op een gevulde knop */

    /* "Actief" moet van het accent te onderscheiden blijven. Sinds het merk petrol is, ligt
       zeegroen daar te dicht tegenaan -- twee kleuren die op elkaar lijken betekenen samen
       niets meer. Vandaar een groen dat duidelijk gras is en geen zeewater. */
    --groen: #2C7A46;

    /* "Let op" heeft een eigen kleur nodig sinds het merk petrol is.
     *
     * Dit was `--accent`, en dat viel samen met het accent zolang het accent amber wás. Nu is
     * een waarschuwing in de merkkleur niet meer van "gelukt" te onderscheiden -- en dat is
     * precies de melding waarvan je wilt dat hij opvalt. Oker, donker genoeg om op papier te
     * lezen (4,9 op een tabelkop). */
    --let-op: #96600d;
    --rood: #b23a30;
    --blauw: #2b6398;

    --regel: 1px solid var(--paneel-3);
    --ruimte: 1.25rem;

    --font-ui: 'Archivo', 'Helvetica Neue', sans-serif;
    --font-data: 'IBM Plex Mono', 'SF Mono', monospace;

    /* Hoe lang iets duurt en met welke curve. Stond zeven keer met de hand getypt --
       vijf keer 0.12s, één keer 0.14s, één keer 0.2s -- zonder dat het verschil iets
       betekende. `ease` blijft de curve voor kleurwissels; wat werkelijk beweegt krijgt
       een sterkere. */
    --duur-kort: 0.12s;
    --duur-lang: 0.2s;
    --curve-uit: cubic-bezier(0.23, 1, 0.32, 1);
    --curve-door: cubic-bezier(0.77, 0, 0.175, 1);

    /* Hoe hoog een invoerveld, een keuzelijst en een knop zijn. Eén maat, want ze staan
       naast elkaar in dezelfde rij -- en een knop die zes pixels lager is dan het veld
       ernaast leest als een fout, ook al kan niemand zeggen waarom. */
    --besturing: 2.25rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: light;
}

body {
    margin: 0;
    background: var(--paneel-0);
    color: var(--inkt);
    font-family: var(--font-ui);
    font-size: 15.5px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

/* Fijne horizontale lijnen over de achtergrond — nauwelijks zichtbaar, maar het
   haalt de vlakke digitale leegte eruit.

   Op het donkere scherm was dit wit op 1,4%. Op papier moet het inkt zijn en veel
   zwakker: dezelfde sterkte levert op licht een zichtbaar streepjespatroon op dat
   bij het scrollen gaat moireren. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: repeating-linear-gradient(
        to bottom,
        color-mix(in srgb, var(--inkt) 2%, transparent) 0 1px,
        transparent 1px 4px
    );
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ------------------------------------------------------------- structuur -- */

.raam {
    display: grid;
    grid-template-columns: 232px 1fr;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

.zijbalk {
    background: var(--paneel-1);
    border-right: var(--regel);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.merk {
    padding: 1.4rem 1.25rem 1.1rem;
    border-bottom: var(--regel);
}

/* Teken en woordmerk naast elkaar -- één logo in plaats van twee dingen onder elkaar.
   Gestapeld hield het zolang het teken een lijnfiguur van vier streken was; een getekend
   merk boven zijn eigen naam leest niet meer als een logo. */
.merk__slot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}

.merk__teken {
    /* Verhouding uit de viewBox (2289 x 2089); afwijken vervormt het teken. */
    width: 2.5rem;
    height: 2.28rem;
    color: var(--accent);
    display: block;
    flex: none;
}

/* Kleinkapitalen met ruime spatiëring stond hier eerst; dat leest als een afkorting en niet
   als een naam. Het woordmerk van het logo is gewone kleine letters met wat lucht ertussen,
   en dat hoort hier hetzelfde te zijn. */
.merk__naam {
    font-family: var(--font-ui);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--inkt-fel);
    margin: 0;
}

/* Alleen het woordmerk, en niet de naam van de zaak die in het portaal dezelfde klasse
   draagt. Zwaarder en strakker gespatieerd dan gewone tekst -- dit is een merknaam en
   geen kopje, en zo staat hij ook op het logobestand en op de site. */
.merk__slot .merk__naam {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.005em;
}

.merk__teken--klein { width: 1.35rem; height: 1.23rem; margin: 0; }

/* Wie het levert, boven de naam van wie het gebruikt. Klein en dof: in het portaal hoort de
   klant zijn eigen zaak te zien, niet ons merk. */
.merk__van {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--inkt-zeer-dof);
    margin-bottom: 0.55rem;
}

.merk__van .merk__teken { color: var(--accent); }

/* --- De indeling in de zijbalk ---------------------------------------------
 *
 * Vestiging, assistent en bedrag onder elkaar. Dit verving een vlakke rij knoppen
 * om tussen assistenten te wisselen; die hield zolang er één vestiging was, en
 * daarna staat "Sing Sing" naast "Sing Sing zaal" zonder dat je ziet welke bij
 * welk pand hoort.
 *
 * Smal, dus het bedrag mag niet met de naam vechten: de naam krimpt met een
 * ellips, het bedrag houdt zijn breedte. Andersom lees je een afgekapt bedrag,
 * en dat is erger dan een afgekapte naam die je toch al kent. */

.boom { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.1rem; }
.boom--kaal { margin-top: 0.7rem; }

.boom__vestiging {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.45rem;
}
.boom__vestiging:first-child { margin-top: 0; }

.boom__zaak {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-data);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--inkt-zeer-dof);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.boom__zaak:hover { color: var(--accent); }

.boom__lijn {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
    padding: 0.3rem 0.5rem;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--inkt-zeer-dof);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background var(--duur-kort) ease, color var(--duur-kort) ease;
}
.boom__lijn:hover { background: var(--paneel-2); color: var(--inkt-fel); }
.boom__lijn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.boom__lijn--nu {
    background: var(--paneel-2);
    color: var(--inkt-fel);
    cursor: default;
    box-shadow: inset 2px 0 0 var(--accent);
}

.boom__naam { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.boom__bedrag {
    flex: none;
    font-family: var(--font-data);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--inkt-zeer-dof);
}
.boom__lijn--nu .boom__bedrag { color: var(--inkt-dof); }

.boom__voet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: var(--regel);
}
.boom__voetlabel {
    font-family: var(--font-data);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--inkt-zeer-dof);
}
.boom__totaal {
    font-family: var(--font-data);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--inkt-dof);
}

/* De plus. Een verwijzing en geen formulier.
 *
 * Hier klapte een <details> open met een naamveld en een knop erin, en dat viel over
 * de boom heen: in een kolom van dertien rem is geen ruimte voor een naam, laat staan
 * voor de uitleg die erbij hoort ("aanmaken kost niets, het nummer regelen wij"). Een
 * balk is om te navigeren. Aanmaken gebeurt op het scherm waar ook staat wat het kost.
 */
.plusknop {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.4rem;
    border: var(--regel);
    border-radius: 4px;
    color: var(--inkt-zeer-dof);
    font-family: var(--font-data);
    font-size: 0.72rem;
    line-height: 1.5;
    text-decoration: none;
    flex: none;
}
.plusknop:hover { border-color: var(--accent); color: var(--accent); }
.plusknop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.plusknop--breed { padding: 0.2rem 0.5rem; }
.plusknop--regel { width: 100%; justify-content: flex-start; border-style: dashed; }

/* De plus klapt zijn eigen formulier uit, op de plek waar hij staat. Een <details>
   en geen dialoogvenster: het portaal draait zonder JavaScript, en een formulier dat
   opengaat waar je hem opent is beter te volgen dan een venster dat over het scherm
   valt. */
.plus > summary { list-style: none; }
.plus > summary::-webkit-details-marker { display: none; }
.plus > summary::marker { content: ''; }
.plus[open] > .plusknop { border-color: var(--accent); color: var(--accent); }

.plus__vorm {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0.6rem;
    background: var(--paneel-2);
    border: var(--regel);
    border-radius: 5px;
}
.plus__vorm input[type='text'] { flex: 1 1 12rem; min-width: 0; }

/* --- De indeling: vestiging, assistent, nummer, bedrag ---------------------
 *
 * Een lijst en geen tabel. In een tabel kan een <details> zijn formulier niet in een
 * eigen rij openen zonder `:has()`-trucs, en die vallen stil om als de browser ze niet
 * kent -- dan zit de knop er wel maar gebeurt er niets. Hier staat het formulier
 * gewoon in de flow onder zijn groep.
 *
 * **Drie bedragen die iets anders betekenen.** Per nummer (zo wordt gefactureerd), per
 * vestiging (de optelling ervan) en het totaal. Ze zagen er hetzelfde uit, en dan moet
 * je uit de inspringing afleiden waar je naar kijkt. Nu: een kopregel met de kolomnamen,
 * de nummers ingesprongen achter een lijn, het subtotaal met "samen" erbij, en het
 * totaal op een eigen regel met een label. */

/* Dezelfde kolommen als een regel, zodat de koppen erboven uitlijnen. */
.indeling__kopregel,
.indeling__rij {
    display: grid;
    grid-template-columns: 1fr auto 6.5rem;
    gap: 0.5rem;
    align-items: baseline;
}

.indeling__kopregel {
    padding: 0.55rem 0.9rem;
    background: var(--paneel-2);
    border-bottom: var(--regel);
    font-family: var(--font-data);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--inkt-zeer-dof);
}
.indeling__kopregel span:last-child { text-align: right; }

.indeling__groep { border-bottom: var(--regel); padding: 0.7rem 0.9rem 0.8rem; }

.indeling__kop {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--inkt-fel);
}

.indeling__subtotaal { margin-left: auto; display: flex; align-items: baseline; gap: 0.4rem; }
.indeling__waarvoor {
    font-family: var(--font-data);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--inkt-zeer-dof);
    font-weight: 400;
}
.indeling__subtotaal .data { font-variant-numeric: tabular-nums; }

/* De nummers horen zichtbaar onder hun vestiging te hangen. Een streep in plaats van
   alleen witruimte: bij vier vestigingen onder elkaar is inspringing alleen niet genoeg
   om te zien waar een groep ophoudt. */
.indeling__rij {
    margin: 0.28rem 0 0 0.6rem;
    padding: 0.22rem 0 0.22rem 0.9rem;
    border-left: 2px solid var(--paneel-3);
    font-size: 0.9rem;
}
.indeling__naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.indeling__bedrag {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--inkt-dof);
}

.indeling__groep .plus { margin-top: 0.5rem; margin-left: 0.6rem; }

.indeling__voet {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.7rem 0.9rem;
    background: var(--paneel-2);
    border-top: var(--regel);
}
.indeling__voetlabel { font-weight: 600; color: var(--inkt-fel); }
.indeling__totaal { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

.indeling__erbij { padding: 0.7rem 0.9rem; border-top: var(--regel); }

/* --- Het AI-teken met zijn uitleg -------------------------------------------
 *
 * Overal waar iets langs een taalmodel gaat hoort dit teken te staan, met de uitleg
 * eronder. Niet als `title`: die verschijnt pas na een seconde, verdwijnt tijdens het
 * lezen en is met een toetsenbord niet te openen -- terwijl dit juist de uitleg is die
 * iemand wil lezen vóórdat hij ja zegt. */

.aiteken {
    display: inline-flex;
    position: relative;
    vertical-align: -0.15em;
    margin-left: 0.3rem;
    color: var(--accent);
    cursor: help;
}
.aiteken svg { width: 15px; height: 15px; }
.aiteken:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.aiteken__ballon {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: 24rem;
    max-width: 70vw;
    padding: 0.6rem 0.75rem;
    background: var(--paneel-2);
    border: 1px solid var(--accent-dof);
    border-radius: 5px;
    color: var(--inkt);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duur-kort) ease, visibility 0s linear var(--duur-kort);
}

/* Bij het verschijnen mag `visibility` niet wachten -- anders blijft de ballon een tel
   onzichtbaar terwijl hij al infade't. Bij het verdwijnen wacht hij juist wél, zodat de
   fade te zien is voordat het element weg is. Zonder dat knipt hij hard weg: zacht erin,
   hard eruit, en dat is precies andersom dan het hoort. */
.aiteken:hover .aiteken__ballon,
.aiteken:focus .aiteken__ballon,
.aiteken:focus-within .aiteken__ballon {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--duur-kort) ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .aiteken__ballon { transition: none; }
}

/* Een knop die als een link moet lezen -- wisselen van assistent is een POST, want
   het verandert iets aan je sessie, maar het hoort er niet uit te zien als een knop. */
.alsLink {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.alsLink:hover { text-decoration: underline; }

/* Wat over de hele klant gaat, onder in de balk bij de accountgegevens. */
.zijbalk__overal { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.1rem; }
.nav__item--klein { font-size: 0.85rem; padding-top: 0.28rem; padding-bottom: 0.28rem; }

/* Voor wie met een schermlezer werkt: de plus is een teken en geen woord. */
.alleen-lezer {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.merk__regel {
    display: block;
    width: 34px;
    height: 2px;
    background: var(--accent);
    margin: 0.55rem 0 0.5rem;
}

/* De lijn of lijnen waarop deze assistent opneemt. Onder zijn naam en niet ergens in een
   scherm: wat je hier instelt geldt voor deze nummers, en dat hoort te zien te zijn op het
   moment dat je het instelt -- niet twee schermen verderop. */
.merk__lijnen {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.35rem;
}

.merk__lijn {
    font-family: var(--font-data);
    font-size: 0.72rem;
    color: var(--inkt-dof);
}

.merk__lijn--uit,
.merk__lijn--geen {
    color: var(--inkt-zeer-dof);
    font-style: italic;
}

/* Het nummer onder een assistent in de boom. Kleiner dan zijn naam: je kiest op naam en
   controleert op nummer, niet andersom. */
.boom__nummer {
    display: block;
    font-family: var(--font-data);
    font-size: 0.66rem;
    color: var(--inkt-zeer-dof);
}

.merk__sub {
    font-family: var(--font-data);
    font-size: 0.68rem;
    letter-spacing: 0.09em;
    color: var(--inkt-zeer-dof);
    text-transform: uppercase;
}

.nav {
    padding: 0.85rem 0;
    flex: 1;
    overflow-y: auto;
}

.nav__kop {
    font-family: var(--font-data);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--inkt-zeer-dof);
    padding: 1.1rem 1.25rem 0.4rem;
}

.nav__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.25rem;
    color: var(--inkt-dof);
    font-size: 0.86rem;
    border-left: 2px solid transparent;
    transition: color var(--duur-kort) ease, background var(--duur-kort) ease, border-color var(--duur-kort) ease;
}

.nav__item:hover {
    color: var(--inkt-fel);
    background: color-mix(in srgb, var(--inkt) 3%, transparent);
    text-decoration: none;
}

.nav__item[aria-current='page'] {
    color: var(--inkt-fel);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border-left-color: var(--accent);
}

.nav__telling {
    margin-left: auto;
    font-family: var(--font-data);
    font-size: 0.7rem;
    color: var(--inkt-zeer-dof);
}

.zijbalk__voet {
    border-top: var(--regel);
    padding: 0.85rem 1.25rem;
    font-size: 0.78rem;
}

.zijbalk__voet strong {
    display: block;
    color: var(--inkt-fel);
    font-weight: 600;
}

.zijbalk__rol {
    font-family: var(--font-data);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

/* De inhoudskolom stapelt met een gat ertussen.
 *
 * Hier stond `.paneel + .paneel { margin-top }`, en dat werkt maar zolang twee panelen
 * elkaar direct opvolgen. Zodra er een rooster, een melding of een grafiek tussen staat,
 * valt de ketting weg en plakken de blokken eronder weer aan elkaar -- precies wat er op
 * het overzicht, de koppelingen en "wat hij krijgt" gebeurde.
 *
 * Een flexkolom met `gap` kent dat probleem niet: elk blok krijgt lucht, ongeacht wat het
 * is. De marges die de losse onderdelen zelf meebrachten kunnen daarmee weg, anders telt
 * het dubbel. */
.werkblad {
    display: flex;
    flex-direction: column;
    gap: var(--ruimte);
    padding: 1.6rem 2rem 3rem;
    max-width: 1500px;
}

/* Direct in de kolom hebben ze geen eigen marge meer nodig. Binnen een paneel wel: daar
   staat de kop tegen de inhoud aan. */
.werkblad > .kop { margin-bottom: 0; }
.werkblad > .melding { margin-bottom: 0; }

/* ------------------------------------------------------------------ kop -- */

/* De ondertitel onder een schermtitel.
 *
 * `kop__pad` deed dit werk én dat van een kruimelpad, en werd op het ene scherm boven de
 * titel gezet en op het andere eronder. Dan opent elk scherm nét anders. Nu: kruimel boven
 * in `kop__pad`, uitleg eronder in `kop__onder`. */
.kop__onder {
    margin: 0.35rem 0 0;
    color: var(--inkt-dof);
    font-size: 0.92rem;
    max-width: 70ch;
}

.kop {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1.6rem;
    border-bottom: var(--regel);
}

.kop h1 {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--inkt-fel);
}

.kop__pad {
    font-family: var(--font-data);
    font-size: 0.68rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--inkt-zeer-dof);
    margin-bottom: 0.3rem;
}

.kop__acties {
    display: flex;
    gap: 0.5rem;
}

/* --------------------------------------------------------------- panelen -- */

.rooster {
    display: grid;
    gap: 1rem;
}

.rooster--4 { grid-template-columns: repeat(4, 1fr); }
.rooster--3 { grid-template-columns: repeat(3, 1fr); }
.rooster--2 { grid-template-columns: 1fr 1fr; }

@media (max-width: 1100px) {
    .rooster--4 { grid-template-columns: repeat(2, 1fr); }
    .rooster--3, .rooster--2 { grid-template-columns: 1fr; }
}

/* Twee tabellen naast elkaar hebben meer ruimte nodig dan twee invulvelden. Zonder een
   eigen grens valt de rechter kolom bij 1150px buiten beeld, en dan lijkt het alsof de
   helft er niet is. */
@media (max-width: 1400px) {
    .rooster--breed { grid-template-columns: 1fr; }
}

.paneel {
    background: var(--paneel-1);
    border: var(--regel);
}

/* Panelen die niet direct in de inhoudskolom staan -- in een kolom van een rooster, in een
   formulier -- krijgen hun lucht hier. Binnen een rooster zelf niet: daar doet `gap` het
   werk al en zou dit erbovenop komen. */
.paneel + .paneel { margin-top: var(--ruimte); }
.werkblad > .paneel + .paneel,
.rooster > .paneel + .paneel { margin-top: 0; }

.paneel__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.8rem 1rem;
    border-bottom: var(--regel);
    background: var(--paneel-2);
}

.paneel__kop h2 {
    margin: 0;
    font-family: var(--font-data);
    font-size: 0.8rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--inkt);
    font-weight: 500;
}

.paneel__lijf {
    padding: 1.15rem 1.15rem 1.25rem;
}

.paneel__lijf--strak {
    padding: 0;
}

/* De voet van een paneel: wat na het formulier komt en er niet bij hoort.
 *
 * Een verwijderknop die tegen "Opslaan" aan staat, is een verwijderknop die per ongeluk
 * geraakt wordt -- en een regel uitleg die er direct onder plakt leest als onderdeel van
 * hetzelfde formulier. Een streep en een rustiger vlak zetten ze uit elkaar. */
.paneel__voet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding: 0.7rem 1.15rem;
    border-top: var(--regel);
    background: var(--paneel-2);
}
.paneel__voet p { margin: 0; }

/* Kerncijfer: groot, monospace, met een label eronder. */
/* Een kerncijfer hoort op een vlak te staan.
 *
 * Dit was alleen padding: op een donker scherm viel dat niet op, want de pagina was er al
 * donker. Op papier zweven vier getallen dan in een lege strook zonder dat je ziet dat het
 * bij elkaar hoort. */
.meter {
    padding: 1rem 1.15rem 1.15rem;
    background: var(--paneel-1);
    border: var(--regel);
}

.meter__waarde {
    font-family: var(--font-data);
    font-size: 2rem;
    line-height: 1;
    color: var(--inkt-fel);
    font-weight: 500;
    letter-spacing: -0.02em;
}

.meter__waarde--accent { color: var(--let-op); }
.meter__waarde--rood { color: var(--rood); }
.meter__waarde--groen { color: var(--groen); }

.meter__label {
    font-family: var(--font-data);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--inkt-zeer-dof);
    margin-top: 0.5rem;
}

.meter__toelichting {
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--inkt-dof);
    margin-top: 0.35rem;
}

/* --------------------------------------------------------------- tabellen -- */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

thead th {
    text-align: left;
    padding: 0.65rem 1rem;
    font-family: var(--font-data);
    font-size: 0.73rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--inkt-zeer-dof);
    font-weight: 500;
    background: var(--paneel-2);
    border-bottom: var(--regel);
    white-space: nowrap;
}

tbody td {
    padding: 0.75rem 1rem;
    line-height: 1.5;
    border-bottom: 1px solid color-mix(in srgb, var(--paneel-3) 55%, transparent);
    vertical-align: middle;
}

tbody tr:last-child td {
    border-bottom: none;
}

/* Kolomgroepen.
 *
 * Voor tabellen waar kolommen bij elkaar horen -- minuten hier, berichten daar -- en waarin
 * dezelfde kolomnaam meer dan eens voorkomt. Zonder scheiding staat er twee keer "kost ons"
 * zonder dat je ziet welke bij welke hoort, en dan is de tabel niet lelijk maar onleesbaar.
 */
.groep th {
    text-align: center;
    color: var(--inkt-dof);
    font-size: 0.68rem;
    padding-bottom: 0.35rem;
    background: var(--paneel-2);
}

.groep__grens,
td.groep__grens,
th.groep__grens {
    border-left: 1px solid var(--paneel-3);
}

/* Een tabel die een optelling toont: regels, een streep, een uitkomst.
 *
 * De streep is wat het leesbaar maakt -- zonder scheiding is het een lijst bedragen waarvan
 * je zelf moet uitzoeken welke bij elkaar horen en welke de som is.
 */
.telt td {
    padding: 0.55rem 1rem;
}

.telt .som td {
    border-top: 1px solid var(--paneel-3);
    font-weight: 600;
    color: var(--inkt-fel);
}

.telt .uitkomst td {
    border-top: 2px solid var(--paneel-3);
    background: color-mix(in srgb, var(--inkt) 3%, transparent);
    font-weight: 600;
    color: var(--inkt-fel);
}

/* De regel die alles optelt. Zwaarder dan een gewone rij, want het oog moet hem vinden
 * zonder te zoeken -- bij tien klanten is dit het getal waar je naar kijkt. */
tfoot td {
    padding: 0.75rem 1rem;
    border-top: 2px solid var(--paneel-3);
    background: color-mix(in srgb, var(--inkt) 3%, transparent);
    line-height: 1.5;
}

tbody tr:hover td {
    background: color-mix(in srgb, var(--inkt) 2.5%, transparent);
}

.data {
    font-family: var(--font-data);
    font-size: 0.88rem;
    color: var(--inkt-dof);
}

.data--fel {
    color: var(--inkt-fel);
}

.getal {
    font-family: var(--font-data);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- De drie soorten kennis --------------------------------------------------
 *
 * Hetzelfde patroon als op de marketingsite: een teken, waar het vandaan komt, wat het
 * betekent, en onderaan achter een streep wat het de beller kost. Dat laatste is de reden
 * dat deze kaarten er staan -- de keuze gaat niet over waar de tekst vandaan komt maar over
 * of de gast een seconde stilte hoort. */

.soorten .soort { display: flex; flex-direction: column; }
.soort .paneel__lijf { flex: 1 1 auto; }

.soort__teken {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 6px;
    margin-bottom: 0.9rem;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.soort__teken svg { width: 1.15rem; height: 1.15rem; }
.soort__teken--blauw { color: var(--blauw); background: color-mix(in srgb, var(--blauw) 12%, transparent); }
.soort__teken--let-op { color: var(--let-op); background: color-mix(in srgb, var(--let-op) 12%, transparent); }

.soort__herkomst {
    margin: 0 0 0.35rem;
    font-family: var(--font-data);
    font-size: 0.66rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--inkt-zeer-dof);
}

.soort__titel {
    margin: 0 0 0.5rem;
    font-weight: 600;
    color: var(--inkt-fel);
    line-height: 1.35;
}

.soort__uitleg {
    margin: 0;
    color: var(--inkt-dof);
    font-size: 0.88rem;
    line-height: 1.6;
}

.soort__wachttijd {
    margin: 0;
    padding: 0.7rem 1.15rem;
    border-top: var(--regel);
    font-family: var(--font-data);
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--inkt-zeer-dof);
}

/* --- Een voortgangsbalk ------------------------------------------------------
 *
 * Stond met de hand in het sjabloon, met `rgba(255,255,255,.06)` als groef -- op een donker
 * scherm subtiel, op papier onzichtbaar. Precies de reden dat er geen kleur meer hard in
 * een sjabloon hoort te staan. */

.balk__kop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.8rem;
    margin-bottom: 0.55rem;
}

.balk {
    height: 6px;
    border-radius: 3px;
    background: var(--paneel-3);
    overflow: hidden;
}

/* Schalen en niet de breedte veranderen: `width` kost bij elke frame layout en paint,
   `transform` alleen compositing. De vulling staat daarom altijd op volle breedte en wordt
   vanaf links samengedrukt -- vandaar `transform-origin: left center`, want zonder dat
   groeit hij vanuit het midden naar twee kanten. */
.balk__vulling {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(var(--vulling, 0));
    background: var(--accent);
    transition: transform var(--duur-lang) var(--curve-uit);
}
.balk__vulling--vol { background: var(--let-op); }

.balk__uitleg { margin-top: 0.7rem; }

@media (prefers-reduced-motion: reduce) {
    .balk__vulling { transition: none; }
}

/* Losse hulpklassen die inline `style="color:..."` vervangen. Een kleur in een sjabloon
   overleeft geen paletwissel. */
.waarschuwend { color: var(--rood); }
.fel { color: var(--inkt-fel); }
.blauw { color: var(--blauw); }
.accent { color: var(--accent); }
.zeer-dof { color: var(--inkt-zeer-dof); }
.smal { width: 1%; }

/* --- De wachtrij voor terugbellen -------------------------------------------
 *
 * Hoe lang iemand wacht staat vooraan en niet als bijzin achter de naam. Dat is het enige
 * wat op dit scherm telt: een verzoek van vanochtend en een van vijf minuten geleden zagen
 * er hetzelfde uit, en dan bel je de verkeerde eerst terug. Vanaf vier uur kleurt de rand
 * amber -- geen rood, want er is niets stuk, er wacht alleen iemand te lang. */

.wachtrij { display: flex; flex-direction: column; gap: 0.7rem; }

.wacht__lijf {
    display: grid;
    grid-template-columns: 6rem 1fr auto;
    gap: 1.2rem;
    align-items: start;
}

@media (max-width: 640px) {
    .wacht__lijf { grid-template-columns: 1fr; gap: 0.6rem; }
}

.wacht--lang { border-left: 3px solid var(--let-op); }

.wacht__wie { text-align: right; }
@media (max-width: 640px) { .wacht__wie { text-align: left; } }

.wacht__duur {
    margin: 0;
    font-family: var(--font-data);
    font-size: 1.05rem;
    color: var(--inkt-fel);
    line-height: 1.2;
}
.wacht--lang .wacht__duur { color: var(--let-op); }

.wacht__sinds {
    margin: 0.15rem 0 0;
    font-family: var(--font-data);
    font-size: 0.68rem;
    color: var(--inkt-zeer-dof);
}

.wacht__inhoud { min-width: 0; }
.wacht__naam { margin: 0; font-weight: 600; color: var(--inkt-fel); }
/* --- Tabbladen ------------------------------------------------------------------
 *
 * Onder de kop van een scherm, niet ernaast: je leest eerst waar je bent en dan pas wat
 * er nog meer is. Gewone links, want elk tabblad is een scherm met zijn eigen adres --
 * een klant kan er een bladwijzer op zetten en het werkt zonder script.
 *
 * Schuift horizontaal op een telefoon in plaats van af te breken naar een tweede regel:
 * zeven tabbladen onder elkaar duwen de inhoud van het scherm af. */

.tabs {
    display: flex;
    gap: 0.2rem;
    margin: 0 0 1.2rem;
    border-bottom: var(--regel);
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tabs__item {
    padding: 0.5rem 0.85rem;
    font-size: 0.84rem;
    color: var(--inkt-dof);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-decoration: none;
}

.tabs__item:hover { color: var(--inkt-fel); text-decoration: none; }

/* Waar je bent: de merkkleur onder het woord en de tekst fel. Geen vlak eromheen -- dat
   maakt van een rij tabbladen een rij knoppen, en dan lijkt het alsof je iets uitvoert. */
.tabs__item--hier {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* Het getal naast Terugbellen. Klein en dof tot er werkelijk iemand wacht -- dan valt hij
   op zonder te schreeuwen. Rood zou verkeerd zijn: er is niets stuk, er wacht iemand. */
.nav__teller {
    display: inline-block;
    min-width: 1.25rem;
    padding: 0 0.3rem;
    margin-left: 0.35rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.25rem;
}

/* De schermen die niet meer in het hoofdmenu staan. Dicht, want wie ze nodig heeft weet
   waar hij ze zoekt -- en wie ze niet nodig heeft hoeft er niet langs te scrollen. */
.nav__meer { margin-top: 0.6rem; }
.nav__meer summary {
    cursor: pointer;
    padding: 0.35rem 0.9rem;
    font-size: 0.78rem;
    color: var(--inkt-dof);
}
.nav__meer summary:hover { color: var(--inkt-fel); }

/* --- Wat er nog moet gebeuren ---------------------------------------------------
 *
 * Staat op élk portaalscherm, maar alleen als er werkelijk iets is. Een balk die er altijd
 * staat wordt na een week niet meer gelezen, en dan mis je hem op de dag dat het ertoe doet
 * -- dezelfde reden als bij het Let op-blok in het beheer.
 *
 * Twee standen en geen drie: er kan niet gebeld worden (amber, want dat is nu aan de hand),
 * of er is nog iets te doen (rustig). Rood blijft voor wat werkelijk stuk is; hier is niets
 * stuk, er is alleen iets niet afgemaakt. */

.afmaken {
    border: var(--regel);
    border-left: 3px solid var(--paneel-3);
    background: var(--paneel-1);
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
}

.afmaken--stil { border-left-color: var(--let-op); }

.afmaken__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.afmaken--stil .afmaken__kop strong { color: var(--let-op); }

.afmaken__lijst {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.86rem;
    line-height: 1.5;
}

.afmaken__lijst li { margin-top: 0.15rem; }

/* Het nummer met de twee manieren om het te gebruiken ernaast.
 *
 * **Een `tel:`-link doet op een pc niets** -- daar hing hij aan de cijfers zelf, en dan lijkt
 * het nummer aanklikbaar terwijl er niets gebeurt. Terugbellen gebeurt juist vanaf een pc:
 * het toestel ligt ernaast. Vandaar het nummer als gewone tekst met een kopieerknop, en de
 * belknop alleen waar er werkelijk gebeld kan worden.
 *
 * Die grens is `hover: none` én `pointer: coarse` samen: een telefoon of tablet. Een laptop
 * met aanraakscherm heeft wél hover en houdt de knop dus weg -- de veilige kant, want daar
 * werkt `tel:` net zo min. */
.wacht__nummer {
    margin: 0.15rem 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* `user-select: all` selecteert het hele nummer met één klik. Dat is de weg die overblijft
   als de kopieerknop wegblijft, en hij hoort dan geen sleepwerk te zijn. */
.wacht__cijfers { font-family: var(--font-data); font-size: 1.05rem; user-select: all; }

.wacht__bellen { display: none; }

@media (hover: none) and (pointer: coarse) {
    .wacht__bellen { display: inline-flex; }
}
.wacht__onderwerp {
    margin: 0.5rem 0 0;
    white-space: pre-line;
    color: var(--inkt-dof);
    font-size: 0.9rem;
    max-width: 60ch;
}

.wacht__actie { align-self: center; }
@media (max-width: 640px) { .wacht__actie { align-self: start; } }

/* --- Gesprekken per dag ------------------------------------------------------
 *
 * Met de hand getekende staven en geen bibliotheek: het gaat om veertien getallen, en
 * een pagina die zonder JavaScript werkt hoort dat te blijven doen.
 *
 * Een lege dag krijgt een streepje op de bodem en geen niets. Anders lijkt zo'n dag
 * ontbrekend in plaats van stil, en juist die stilte is wat je wilt zien -- dan staat het
 * nummer misschien verkeerd doorgeschakeld. */

.grafiek__staven {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: end;
    gap: 0.35rem;
    height: 8.5rem;
}

.grafiek__dag {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: end;
    justify-items: center;
    height: 100%;
    gap: 0.3rem;
    min-width: 0;
}

.grafiek__waarde {
    font-family: var(--font-data);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    color: var(--inkt-dof);
    line-height: 1;
}

.grafiek__staaf {
    width: 100%;
    max-width: 2.2rem;
    align-self: end;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
}

.grafiek__staaf--leeg {
    height: 2px !important;
    background: var(--paneel-3);
}

.grafiek__dagnaam {
    font-family: var(--font-data);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--inkt-zeer-dof);
}

@media (max-width: 700px) {
    .grafiek__staven { height: 6.5rem; gap: 0.2rem; }
    .grafiek__waarde { display: none; }
}

/* Een lege staat is een toestand, geen gat.
 *
 * Hier stonden twee regels grijze tekst in het midden, en dat leest als een fout: je weet
 * niet of er niets is of dat er iets stukstaat. Een teken erboven maakt het rustig, en waar
 * er iets te doen valt hoort er een knop bij -- een lege pagina zonder uitweg is een
 * doodlopende pagina. */
.leeg {
    padding: 2.6rem 1.25rem 2.8rem;
    text-align: center;
    color: var(--inkt-zeer-dof);
}

.leeg__teken {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 0.9rem;
    border: var(--regel);
    border-radius: 50%;
    color: var(--inkt-zeer-dof);
    background: var(--paneel-2);
}
.leeg__teken svg { width: 1.25rem; height: 1.25rem; }

.leeg__titel {
    color: var(--inkt-fel);
    font-weight: 600;
    margin: 0 0 0.3rem;
}

.leeg__tekst {
    margin: 0 auto;
    max-width: 42ch;
    color: var(--inkt-dof);
    font-size: 0.9rem;
    line-height: 1.55;
}

.leeg__actie { margin: 1.1rem 0 0; }

/* ---------------------------------------------------------------- status -- */

.stip {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 0.45rem;
    vertical-align: baseline;
}

.stip--actief {
    background: var(--groen);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--groen) 22%, transparent);
}

.stip--bezig {
    background: var(--let-op);
    animation: pols 1.6s ease-in-out infinite;
}

.stip--uit { background: var(--inkt-zeer-dof); }
.stip--fout { background: var(--rood); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rood) 22%, transparent); }

/* Bij reduced motion houdt de stip zijn kleur maar staat hij stil. Wel iets doffer,
   anders is "bezig" niet meer van "actief" te onderscheiden. */
@media (prefers-reduced-motion: reduce) {
    .stip--bezig { animation: none; opacity: 0.7; }
}

@keyframes pols {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--let-op) 40%, transparent); }
    50% { opacity: 0.65; box-shadow: 0 0 0 5px color-mix(in srgb, var(--let-op) 0%, transparent); }
}

.merk-label {
    display: inline-block;
    font-family: var(--font-data);
    font-size: 0.65rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0.13rem 0.45rem;
    border: 1px solid var(--paneel-3);
    color: var(--inkt-dof);
}

.merk-label--accent { border-color: color-mix(in srgb, var(--let-op) 45%, transparent); color: var(--let-op); }
.merk-label--groen { border-color: color-mix(in srgb, var(--groen) 45%, transparent); color: var(--groen); }
.merk-label--rood { border-color: color-mix(in srgb, var(--rood) 45%, transparent); color: var(--rood); }
.merk-label--blauw { border-color: color-mix(in srgb, var(--blauw) 45%, transparent); color: var(--blauw); }

/* ---------------------------------------------------------------- knoppen -- */

.knop {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.85rem;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--inkt);
    background: var(--paneel-2);
    border: var(--regel);
    cursor: pointer;
    /* Even hoog als een invoerveld, want ze staan naast elkaar. Hier en niet bij de velden:
       `.knop--klein` staat verderop en moet ervan af kunnen wijken, en bij gelijke
       specificiteit wint wie het laatst komt. */
    min-height: var(--besturing);
    /* Met een minimumhoogte moet de tekst er ook in het midden in staan -- anders plakt hij
       bij een hogere knop tegen de bovenrand. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duur-kort) ease, border-color var(--duur-kort) ease,
        color var(--duur-kort) ease, transform 160ms var(--curve-uit);
}

.knop:hover {
    background: var(--paneel-3);
    color: var(--inkt-fel);
    text-decoration: none;
}

/* Dat de klik is aangekomen. Subtiel -- 0.97 is genoeg om te voelen en te weinig om op te
   vallen -- en het is het enige teken tussen indrukken en de volgende pagina. Bij een trage
   verbinding is dat het verschil tussen "hij doet het niet" en "hij is bezig". */
.knop:active,
.plusknop:active,
.boom__lijn:active {
    transform: scale(0.97);
}

.knop[disabled]:active {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .knop:active,
    .plusknop:active,
    .boom__lijn:active { transform: none; }
}

.knop--hoofd {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--op-accent);
    font-weight: 600;
}

.knop--hoofd:hover {
    filter: brightness(1.08);
    color: var(--op-accent);
}

.knop--gevaar:hover {
    border-color: var(--rood);
    color: var(--rood);
}

/* Een rij keuzeknoppen die als knoppen lezen.
 *
 * Voor een korte, gesloten lijst -- een rechtsvorm, een soort -- waar een keuzelijst te veel
 * klikken kost en losse rondjes te veel ruimte. Het rondje zelf is weg; wat aanstaat is te
 * zien aan de rand en de vulling. Het blijft een <input type="radio">, dus toetsenbord en
 * schermlezer werken zoals ze horen. */
.vormkeuze { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* De chips staan in een `.veld` en zijn zelf `<label>`, dus `.veld label` maakt er anders
   kleine monospace hoofdletters van -- die opmaak hoort bij het kopje boven een invoerveld en
   niet bij een keuzeknop. Hier dus terug naar gewone tekst. */
/* `.vormkeuze .vormkeuze__optie` en niet `.vormkeuze__optie`: `.veld label` weegt met zijn
   class plus element zwaarder dan een losse class, en dan blijft de chip een veldkopje. */
.vormkeuze .vormkeuze__optie {
    position: relative;
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 1rem;
    letter-spacing: normal;
    text-transform: none;
    margin-bottom: 0;
}

.vormkeuze__optie input[type='radio'] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.vormkeuze__optie span {
    display: inline-block;
    padding: 0.32rem 0.7rem;
    border: var(--regel);
    border-radius: 4px;
    background: var(--paneel-0);
    color: var(--inkt-dof);
    font-size: 0.86rem;
    cursor: pointer;
    transition: border-color var(--duur-kort) ease, color var(--duur-kort) ease, background var(--duur-kort) ease;
}

.vormkeuze__optie:hover span { border-color: var(--accent-dof); color: var(--inkt-fel); }

.vormkeuze__optie input:checked + span {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--inkt-fel);
    font-weight: 500;
}

.vormkeuze__optie input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .vormkeuze__optie span { transition: none; }
}

/* Een uitklapper voor bijvangst: wat u in een tekst kunt gebruiken, wat er al vertaald is.
   Dat hoort dicht te kunnen -- het is uitleg naast een veld en niet de inhoud van het scherm.
   De eigen driehoek van de browser staat er te groot en te blauw naast, vandaar een eigen. */
.uitklap {
    margin-top: 0.6rem;
}

.uitklap > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0;
    font-size: 0.82rem;
    color: var(--inkt-dof);
    cursor: pointer;
    list-style: none;
}

.uitklap > summary::-webkit-details-marker { display: none; }
.uitklap > summary::marker { content: ''; }

.uitklap > summary::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform var(--duur-kort) var(--curve-door);
}

.uitklap[open] > summary::before { transform: rotate(90deg); }
.uitklap > summary:hover { color: var(--inkt-fel); }
.uitklap > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Ingesprongen achter een lijntje, zodat te zien blijft waar het uitgeklapte bij hoort. */
.uitklap__lijf {
    margin: 0.35rem 0 0.2rem 0.16rem;
    padding: 0.1rem 0 0.1rem 0.9rem;
    border-left: var(--regel);
}

.uitklap__lijf > *:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .uitklap > summary::before { transition: none; }
}

/* Een knop die (nog) niet kan. Hij blijft staan in plaats van te verdwijnen: verbergen leest
   als "dit bestaat niet", terwijl het meestal "hier ontbreekt nog iets" is -- en de reden staat
   ernaast. */
.knop[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}
.knop[disabled]:hover { border-color: var(--paneel-3); color: var(--inkt); }

/* In een tabelrij, naast een gesprek of een nummer. Die hoort juist niet zo hoog te zijn
   als een invoerveld: acht van die knoppen onder elkaar maken de tabel anders twee keer
   zo lang als de gegevens erin. */
.knop--klein {
    padding: 0.24rem 0.55rem;
    font-size: 0.75rem;
    min-height: 0;
}

/* ---------------------------------------------------------------- velden -- */

.veld {
    margin-bottom: 1rem;
}

.veld label,
.veld__naam,
fieldset.veld > legend {
    display: block;
    font-family: var(--font-data);
    font-size: 0.75rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--inkt-dof);
    margin-bottom: 0.4rem;
}

/* De opmaak hangt aan het element en niet aan `.veld`.
 *
 * Dat was andersom, en dat gaat mis zodra er een invoerveld buiten een formulierblok staat --
 * de zoekbalk bij Gebruikers, een naamveld naast een knop. Die kregen dan de vormgeving van
 * de browser: een grijs kadertje in een donker scherm. Het valt niet op bij het bouwen, want
 * je kijkt naar het formulier dat je net hebt gemaakt en niet naar het veld drie schermen
 * verderop dat er altijd al stond. */
/* Alle invoervelden behalve de vakjes, en met opzet niet als opsomming van types. Die
   stond hier eerst -- text, date, email, password, number, url -- en vergat `tel`: het
   telefoonveld op de proeflijn stond er als kaal browserveld tussen, 21 pixels hoog naast
   buren van 36. Een opsomming vergeet altijd het volgende type dat erbij komt. */
input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']):not([type='submit']):not([type='button']),
select,
textarea {
    padding: 0.5rem 0.65rem;
    background: var(--paneel-0);
    border: var(--regel);
    color: var(--inkt-fel);
    font-family: var(--font-ui);
    font-size: 0.88rem;
}

/* Alles wat op één rij naast elkaar kan staan, even hoog. `min-height` en geen `height`:
   een keuzelijst met een lange optie of een knop met twee woorden mag groeien, hij mag
   alleen niet kleiner zijn dan de rest. Een textarea valt er buiten -- die hoort juist
   hoger te zijn. */
input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']):not([type='submit']):not([type='button']),
select {
    min-height: var(--besturing);
}

/* Binnen een formulierblok vult hij de breedte; los in een rij niet, want daar staat een
   knop naast. */
/* Een aankruisvakje is geen invoerveld op volle breedte.
 *
 * Zonder deze uitzondering wordt hij 1400 pixels breed, staat het vinkje gecentreerd
 * ergens boven zijn eigen label, en lijkt het alsof er een lege balk in het formulier
 * staat. Radioknoppen hebben hun eigen opmaak via `.vormkeuze` en gaan hier ook af. */
.veld input[type='checkbox'],
.veld input[type='radio'] {
    width: auto;
    margin: 0 0.45rem 0 0;
    vertical-align: baseline;
}

.veld input,
.veld select,
.veld textarea {
    width: 100%;
}

.veld textarea {
    font-family: var(--font-data);
    font-size: 0.82rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 110px;
}

input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']):not([type='submit']):not([type='button']):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-dof);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.veld__hulp {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--inkt-dof);
    margin-top: 0.4rem;
    max-width: 68ch;
}

.veld--inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.veld--inline label {
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-ui);
    font-size: 0.86rem;
    color: var(--inkt);
}

/* --------------------------------------------------------------- meldingen -- */

.melding {
    padding: 0.65rem 0.9rem;
    border: var(--regel);
    border-left-width: 3px;
    margin-bottom: 1rem;
    font-size: 0.86rem;
    transition: opacity var(--duur-lang) var(--curve-uit),
        transform var(--duur-lang) var(--curve-uit);
}

/* Even laten zien dat de melding nieuw is. Hij is de enige plek waar het systeem terugpraat,
   en op een pagina die toch al opnieuw laadt valt hij anders weg tegen de rest.
   `@starting-style` en geen JavaScript: het portaal draait daar bewust zonder, en een
   browser die het niet kent toont de melding gewoon meteen -- precies de goede terugval. */
@starting-style {
    .melding {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .melding { transition: opacity var(--duur-lang) ease; }

    @starting-style {
        .melding { transform: none; }
    }
}

.melding--goed { border-left-color: var(--groen); }
.melding--fout { border-left-color: var(--rood); }
.melding--let-op { border-left-color: var(--let-op); }
/* Aanmelding nog niet af: dezelfde kleur als let-op, maar een eigen klasse -- het is een
   wegwijzer en geen melding over wat er net gebeurde. */
.aanmelding { border-left-color: var(--let-op); }

/* Bevestigen op de pagina zelf, in plaats van confirm(); zie templates/_bevestigen.html.twig.
   Staat onder de knop die hem opriep, dus ook in een tabelcel: vandaar de maximale breedte en
   links uitgelijnd, anders duwt hij de kolommen uit elkaar. */
.bevestig {
    display: block;
    max-width: 34rem;
    margin-top: 0.5rem;
    padding: 0.65rem 0.9rem;
    border: var(--regel);
    border-left: 3px solid var(--let-op);
    text-align: left;
    white-space: normal;
    font-size: 0.86rem;
}

.bevestig p { margin: 0 0 0.6rem; }

.bevestig__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ----------------------------------------------------------------- inlog -- */

.inlogscherm {
    min-height: 100vh;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 1;
}

.inlogkaart {
    width: 340px;
    background: var(--paneel-1);
    border: var(--regel);
    padding: 2rem 1.75rem;
}

.inlogkaart .merk {
    padding: 0 0 1.25rem;
    border-bottom: var(--regel);
    margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------ transcript -- */

.transcript {
    font-family: var(--font-data);
    font-size: 0.9rem;
    line-height: 1.8;
}

.transcript__regel {
    display: grid;
    grid-template-columns: 66px 96px minmax(0, 1fr);
    gap: 0.85rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--paneel-3) 40%, transparent);
}

.transcript__tijd { color: var(--inkt-zeer-dof); }

.transcript__wie {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-top: 0.15rem;
}

.transcript__wie--beller { color: var(--blauw); }
.transcript__wie--agent { color: var(--accent); }
.transcript__wie--systeem { color: var(--inkt-zeer-dof); }
.transcript__wie--fout { color: var(--rood); }

.transcript__tekst { color: var(--inkt); }
.transcript__tekst code { color: var(--inkt-dof); }

/* --------------------------------------------------------------- diversen -- */

.stapel > * + * { margin-top: 1rem; }
.rij { display: flex; gap: 0.5rem; align-items: center; }

/* Staat er een `.veld` in de rij, dan hoort alles op de onderrand uit te lijnen en niet in
   het midden. Een veld is hoger dan een knop -- er staat een label boven -- en met `center`
   zweeft die knop precies tussen dat label en zijn invoervak in. */
.rij:has(.veld) { align-items: flex-end; }
/* De marge die een veld onder zich draagt, hoort in zo'n rij onder de rij en niet onder
   het veld. Anders lijnt een knop uit op de onderkant van die marge en hangt hij lager dan
   het invoervak -- of, waar een veld `margin:0` kreeg en de knop wel een marge, hoger. Zo
   staan veld en knop altijd op dezelfde onderkant. */
.rij:has(> .veld) > .veld { margin-bottom: 0; }
.rij:has(> .veld) { margin-bottom: 1rem; }
.rij:has(> .veld):last-child { margin-bottom: 0; }
.rij--eind { justify-content: flex-end; }
/* Voor rijen die kunnen groeien: de assistenten van een vestiging zijn er één, maar het
   kunnen er ook zeven zijn, en dan hoort er een regel bij te komen in plaats van dat ze
   uit het paneel lopen. */
.rij--wikkel { flex-wrap: wrap; }

/* Een los invoerveld naast een knop -- "naam van de vestiging" plus "Vestiging erbij".
   Meegroeien met de ruimte, maar niet eindeloos: een naamveld van een halve meter breed
   suggereert dat er een zin in moet.

   Een eigen klasse en niet gewoon `.rij > input`, want `flex-basis` wint van een `width` --
   en de smalle bedragvelden op het machinescherm staan óók in een `.rij`. Die zouden dan
   opeens veertien rem breed worden. */
.rij--invoeren > input[type='text'],
.rij--invoeren > input[type='email'] { flex: 1 1 14rem; max-width: 24rem; }

/* Drie lagen in één tabel: klant, vestiging, assistent. Inspringen in plaats van drie losse
   tabellen, want dan zie je in één blik wie bij wie hoort -- en dat is wat je moet weten om
   te begrijpen wat er samen gefactureerd wordt. */
.rij--groepkop td { background: color-mix(in srgb, var(--inkt) 4%, transparent); }
.inspring-1 { padding-left: 1.6rem; }
.inspring-2 { padding-left: 3rem; }
.dof { color: var(--inkt-dof); }
.klein { font-size: 0.86rem; }

/* Lopende tekst in een paneel niet breder laten worden dan prettig leest. Bij een
   breed scherm liep een uitleg anders over honderdvijftig tekens door. */
.paneel__lijf p,
.paneel__lijf li {
    max-width: 74ch;
}
.nowrap { white-space: nowrap; }


/* ------------------------------------------------------------------ zin -- */
/*
 * De eerste zin van het gesprek, zoals de beller hem hoort. Het eigen deel van de
 * klant en het wettelijk vastgelegde deel staan in één regel achter elkaar, maar het
 * vaste deel is zichtbaar anders behandeld: onderstreept in amber, met een slotje.
 *
 * Dat is de hele uitleg van de regel. Je ziet je eigen zin, je ziet wat erachter komt,
 * en je ziet dat daar geen invoerveld bij hoort.
 */

.zin {
    border: var(--regel);
    border-left: 2px solid var(--accent);
    background: var(--paneel-0);
    padding: 0.9rem 1rem;
    margin-bottom: 1.25rem;
}

.zin__label {
    font-family: var(--font-data);
    font-size: 0.66rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--inkt-dof);
    margin-bottom: 0.5rem;
}

.zin__tekst {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--inkt-fel);
}

.zin__eigen {
    color: var(--inkt-fel);
}

/* Het vaste deel van de begroeting.
 *
 * Dit was de merkkleur met een stippellijn eronder. Sinds het merk groen is, leest dat als
 * een hyperlink -- en het is juist het deel waar je níet op kunt klikken, want er valt niets
 * aan te wijzigen. Een rustige markering met het slotje erachter zegt hetzelfde zonder die
 * belofte. */
.zin__vast {
    color: var(--inkt-fel);
    background: color-mix(in srgb, var(--let-op) 12%, transparent);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--let-op) 45%, transparent);
    padding: 0.05em 0.15em;
    cursor: help;
}

.zin__vast::after {
    content: ' \1F512';
    font-size: 0.75em;
    opacity: 0.7;
}

.zin__voet {
    margin-top: 0.65rem;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--inkt-zeer-dof);
    max-width: 62ch;
}

/* Onbewerkbare waarde uit een koppeling: wel leesbaar, zichtbaar niet van jou. */
.uitlezing {
    font-family: var(--font-data);
    font-size: 0.82rem;
    line-height: 1.6;
    white-space: pre-wrap;
    background: var(--paneel-0);
    border: var(--regel);
    padding: 0.7rem 0.85rem;
    color: var(--inkt);
    margin-bottom: 0.6rem;
}

/* De lijst met wat u in een berichttekst kunt gebruiken. Hier stond `.uitlezing`, en dat is
   voor ruwe uitvoer -- die zet álles in monospace, ook de omschrijving ernaast. Alleen de
   variabele is code; de rest is gewone tekst. */
.veldenlijst {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.veldenlijst td {
    padding: 0.28rem 0.6rem 0.28rem 0;
    vertical-align: top;
    border: none;
}

.veldenlijst td:first-child { white-space: nowrap; width: 1%; }
.veldenlijst td:last-child { color: var(--inkt-dof); }

/* ---------------------------------------------------------------- keuze -- */
/*
 * De driedeling waar de klant uit kiest. Drie kaarten naast elkaar met de prijs
 * eronder — wat het de beller aan wachttijd kost. Dat verzwijgen zou de keuze
 * makkelijker maken en de uitkomst slechter.
 */

.keuze {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
}

.keuze__optie {
    display: block;
    position: relative;
    padding: 0.9rem 1rem 0.9rem 2.2rem;
    border: var(--regel);
    background: var(--paneel-0);
    cursor: pointer;
}

.keuze__optie:hover {
    border-color: var(--accent-dof);
}

.keuze__optie--aan {
    border-color: var(--accent);
    background: var(--paneel-2);
}

.keuze__optie input[type='radio'] {
    position: absolute;
    left: 0.85rem;
    top: 1.05rem;
}

.keuze__titel {
    display: block;
    font-weight: 600;
    color: var(--inkt-fel);
    margin-bottom: 0.35rem;
}

.keuze__uitleg {
    display: block;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--inkt-dof);
}

.keuze__prijs {
    display: block;
    margin-top: 0.6rem;
    font-family: var(--font-data);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--inkt-zeer-dof);
}

.keuze__optie--aan .keuze__prijs {
    color: var(--accent);
}

/* Rijen met invoervelden in een tabel — voor de gegevens die een tool meestuurt. */
.data input[type='text'],
.data select {
    width: 100%;
    padding: 0.35rem 0.5rem;
    background: var(--paneel-0);
    border: var(--regel);
    color: var(--inkt-fel);
    font-family: var(--font-ui);
    font-size: 0.82rem;
}

/* ----------------------------------------------------------- meekijken -- */
/*
 * De balk die verschijnt als een beheerder in het portaal van een klant kijkt.
 * Amber over de volle breedte: dit is geen mededeling die je mag missen, want
 * alles wat je vanaf hier doet raakt de zaak van iemand anders.
 */

.meekijken {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: var(--ruimte);
    padding: 0.7rem 1rem;
    background: var(--accent);
    color: var(--paneel-0);
    font-size: 0.86rem;
}

.meekijken strong {
    font-weight: 600;
}

.meekijken .knop {
    background: var(--paneel-0);
    color: var(--accent);
    border-color: var(--paneel-0);
}


/* -------------------------------------------------------------- leesbaar -- */
/*
 * Bijgesteld nadat het scherm er in het echt bij stond: 14px met inkt op #7d8894
 * las als iets wat je scant, niet als iets wat je leest. De uitleg onder een veld
 * is nu net zo goed leesbaar als de invoer erboven — die uitleg is namelijk het
 * halve product; daar staat waarom een keuze is zoals hij is.
 */

.stapel > p {
    line-height: 1.65;
}

/* Blokken met veel uitleg naast elkaar hoeven niet allebei tot de rand te lopen. */
.paneel__lijf.klein p {
    margin-bottom: 0.9rem;
}

.paneel__lijf.klein p:last-child {
    margin-bottom: 0;
}

/* Code in lopende tekst: onderscheidend zonder te schreeuwen. */
code {
    font-family: var(--font-data);
    font-size: 0.92em;
    color: var(--inkt-fel);
    background: var(--paneel-0);
    border: 1px solid var(--paneel-3);
    padding: 0.05em 0.35em;
}

.uitlezing code,
pre code {
    background: none;
    border: none;
    padding: 0;
}

/* Hoe lang de beller op een antwoord wachtte. Aan de telefoon is dat het getal dat
   telt, dus krijgt het kleur: onder anderhalve seconde voelt het als een gesprek,
   boven de drie gaan mensen praten of ophangen. */
.vlot { color: var(--groen); }
.merkbaar { color: var(--accent); }
.traag { color: var(--rood); font-weight: 600; }

/* Voortgang door de eerste vragen. Drie streepjes, meer heeft het niet nodig —
   het is een korte wizard en een percentage zou doen alsof het lang duurt. */
.voortgang {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.voortgang__stap {
    height: 3px;
    flex: 1;
    background: var(--paneel-3);
}

.voortgang__stap--gedaan {
    background: var(--accent);
}


/* Taalkiezer boven de berichtteksten. Geen tabbladen: een klant met negen talen
   krijgt anders een rij die van het scherm af loopt. */
.taalkiezer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 1.25rem;
}

.taalkiezer__item {
    padding: 0.32rem 0.75rem;
    font-size: 0.82rem;
    color: var(--inkt-dof);
    border: 1px solid var(--paneel-3);
    border-radius: 999px;
    transition: color var(--duur-kort) ease, background var(--duur-kort) ease, border-color var(--duur-kort) ease;
}

.taalkiezer__item:hover {
    color: var(--inkt-fel);
    text-decoration: none;
}

.taalkiezer__item[aria-current='page'] {
    color: var(--inkt-fel);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border-color: var(--accent);
}

/* Een paneel dat om actie vraagt. Oker en niet rood: er is niets stuk, er wacht alleen
   iemand -- rood zou een storing suggereren die er niet is. En niet de merkkleur: sinds die
   groen is, leest een waarschuwing daarin als "gelukt". */
.paneel--let-op {
    border-color: var(--let-op);
    background: color-mix(in srgb, var(--let-op) 8%, transparent);
}

/* Alleen als het paneel zelf een link is. Een blok dat oplicht onder de muis maar nergens
   heen gaat, belooft een klik die er niet is. */
a.paneel--let-op:hover {
    background: color-mix(in srgb, var(--let-op) 14%, transparent);
}

/* ------------------------------------------------- springen binnen een pagina -- */

/*
 * Een balk die meeschuift met de lange formulieren en naar de panelen springt.
 *
 * Bewust geen tabbladen. Deze pagina's zijn één formulier met één opslaanknop; wie de
 * helft verbergt, ziet niet meer wat hij nog moet invullen en slaat op in de veronderstelling
 * dat hij klaar is. Alles blijft dus staan -- ook voor Ctrl+F, waarmee mensen sneller zoeken
 * dan met welke navigatie dan ook.
 */
.springbalk {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 1.4rem;
    padding: 0.6rem 0;
    /* Ondoorzichtig, want de panelen schuiven eronderdoor. */
    background: var(--paneel-0);
    border-bottom: var(--regel);
}

.springbalk__item {
    font-family: var(--font-data);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--inkt-zeer-dof);
    padding: 0.34rem 0.62rem;
    border: var(--regel);
    border-radius: 3px;
    white-space: nowrap;
}

.springbalk__item:hover {
    color: var(--inkt);
    border-color: var(--accent-dof);
    text-decoration: none;
}

/* Waar je bent. Hier wél een vlak eromheen, anders dan bij de tabbladen erboven: dit is
   een keuze uit acht korte woorden op één regel, en een streepje onder een van de acht
   leest als stof op het scherm. */
.springbalk__item--hier {
    color: var(--paneel-0);
    background: var(--accent);
    border-color: var(--accent);
}

.springbalk__item--hier:hover {
    color: var(--paneel-0);
    border-color: var(--accent);
}

/*
 * Waar een paneel stopt met scrollen onder de balk.
 *
 * Zonder dit verdwijnt de kop van het paneel waar je net heen sprong achter de balk, en dan
 * lijkt het alsof je een halve sectie verder bent geland.
 */
.paneel[id] {
    scroll-margin-top: 3.5rem;
}

/* --- Stemvoorbeeld -----------------------------------------------------------
 *
 * Eén speler onder de keuzelijst, die meebeweegt met wat er gekozen is.
 * `preload="none"` is geen detail: vijfendertig kilobyte laden bij elk bezoek aan dit
 * scherm is verspilling voor iemand die zijn openingstijden kwam wijzigen. */

.stemvoorbeeld {
    display: block;
    width: 100%;
    height: 34px;
    margin: 0.55rem 0 0.2rem;
}


/* --- De proeflijn ------------------------------------------------------------
 *
 * Publieke schermen: het formulier, het wachtscherm en het aanmelden. Ze leunen op de
 * inlogkaart, want dat is de enige opmaak die we hebben voor een pagina zonder zijbalk. */

/* Breder dan een inlogvak: hier staan vier velden met uitleg eronder, en dat past niet in
   de 340 pixels die genoeg zijn voor een e-mailadres en een wachtwoord. */
.inlogkaart--breed { width: min(34rem, 100%); }

.kop--klein {
    font-family: var(--font-ui);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--inkt-fel);
    margin: 0 0 0.4rem;
}

.stapel { display: flex; flex-direction: column; gap: 1.1rem; }

/* Elke stem met zijn omschrijving en zijn fragment. Op een telefoon onder elkaar, want een
   spelertje naast een radioknop van veertig pixels is niet te bedienen. */
.stemkeuze {
    /* De omschrijving op de eerste regel, de speler op de tweede -- en dat op elke breedte.
       Naast elkaar leek beter, maar een `<audio controls>` bepaalt zijn eigen breedte: met
       flexbox staat elke speler dan net ergens anders, en met een rasterkolom kreeg ik twee
       indelingen waarvan ik er één niet kon verklaren. Eén indeling die klopt is beter dan
       twee waarvan er één toevallig goed valt.
       
       Het werkt bovendien beter op een telefoon: een spelertje naast een radioknop van
       veertig pixels is niet te bedienen. */
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.3rem 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--paneel-3);
    cursor: pointer;
}

.stemkeuze audio { grid-column: 1 / -1; }

.stemkeuze:last-child { border-bottom: 0; }

/* Een omschrijving en geen veldnaam. `.veld label` zet alles in kapitalen met
   letterspatiëring -- prima voor "UW WEBSITE", maar "WARM EN LUCHTIG" leest dan als een
   opschrift in plaats van als een beschrijving van hoe iemand klinkt. */
.stemkeuze,
.stemkeuze > span {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--inkt-fel);
    margin-bottom: 0;
}

.stemkeuze audio { height: 32px; width: 100%; }

/* Het nummer dat hij moet bellen. Groot, want dit is de hele opdracht van dat scherm -- en
   op een telefoon is het een link waar je op tikt. */
.belnummer {
    font-family: var(--font-ui);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 1.2rem 0 0.3rem;
}

/* Op een telefoon is dit een link waar je op tikt; op een pc doet `tel:` niets. De kleur
   blijft -- het is de blikvanger van dit scherm -- maar de uitnodiging om te klikken gaat
   er daar af. Wie het nummer op zijn eigen toestel intoetst, hoort er niet eerst op te
   drukken en te merken dat er niets gebeurt. */
.belnummer a { color: var(--accent); text-decoration: none; cursor: text; }

@media (hover: none) and (pointer: coarse) {
    .belnummer a { cursor: pointer; }
    .belnummer a:active { text-decoration: underline; }
}

/* Wat er gevonden is, met de vraag erachter. De vraag is het punt van deze lijst, dus hij
   staat er in dezelfde grootte bij en niet als voetnoot. */
.voortgang {
    list-style: none;
    padding: 0;
    margin: 0.8rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.9rem;
}

.voortgang li {
    padding-left: 1rem;
    border-left: 2px solid var(--accent-dof);
    color: var(--inkt-fel);
}

.voortgang em { color: var(--inkt-dof); font-style: italic; }

/* Goed / redelijk / niet goed. Drie knoppen naast elkaar, want dit moet één klik zijn. */
.oordeel { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.oordeel label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }

.vinkje {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    line-height: 1.5;
}

.vinkje input { margin-top: 0.2rem; flex: none; }

/* Wie dit levert, onderin de zijbalk -- zie templates/_colofon.html.twig.

   Klein en zeer dof: dit staat er omdat het er hoort te staan, niet omdat iemand het leest.
   In het portaal kijkt een ondernemer naar zíjn zaak; onze naam hoort daar de stilste regel
   van het scherm te zijn. */
.colofon {
  margin: 1.1rem 0 0;
  padding-top: .7rem;
  border-top: 1px solid var(--paneel-3);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--inkt-zeer-dof);
}

.colofon__merk { font-weight: 600; }

/* Naast het woord en niet erboven: `sup` tilt hem standaard zo hoog op dat hij de regel
   erboven raakt in een blok dat al klein gezet is. */
.colofon sup {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
}

/* De tegelmuur met koppelingen -- zie templates/portaal/koppelingen.html.twig.

   Tegels en geen tabel, want dit is een catalogus waar je doorheen scant en niet een lijst
   die je regel voor regel leest. Vier op een breed scherm, twee op een tablet, één op een
   telefoon: `auto-fill` met een minimum doet dat zonder breekpunten.

   De letters op een gekleurd vlak in plaats van het logo van een ander -- dat scheelt
   honderd vreemde afbeeldingen bijhouden, en een merkenrechtelijk gesprek dat je niet wilt
   voeren. De kleur komt per categorie, zodat de muur te scannen blijft. */
.tegels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.9rem;
}

.tegel {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem;
  border: 1px solid var(--paneel-3);
  border-radius: var(--rondje, 10px);
  background: var(--paneel-2);
  text-decoration: none;
  color: inherit;
}

.tegel:hover { border-color: var(--accent); }

.tegel--aan { border-color: var(--groen); }

.tegel__merk {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  color: #fff;
  font-family: var(--font-data);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.tegel__naam { font-weight: 600; }

.tegel__categorie {
  font-size: 0.78rem;
  color: var(--inkt-zeer-dof);
}

/* De stand is het belangrijkste woord op de tegel: hij zegt of je hier iets kunt of alleen
   iets ziet. Daarom als eigen label en niet als grijze regel tussen de rest. */
.tegel__stand {
  margin-top: 0.35rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--inkt-zeer-dof);
}

.tegel__stand--klaar { color: var(--groen); }
.tegel__stand--binnenkort { color: var(--let-op); }

.opsomming {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
}

.opsomming li { margin-bottom: 0.2rem; }

/* De bronkeuze als tegelmuur -- zie templates/portaal/kennis/formulier.html.twig.

   Dezelfde tegels als de catalogus, maar hier zijn ze een keuze en geen link. Het vinkje
   staat verborgen: de tegel zelf is het label, dus een klik erop kiest hem. */
.tegels--keuze .tegel { cursor: pointer; }

/* Wat wij nog bouwen is te zien en niet te kiezen. Grijs en niet weggelaten: een klant die
   ziet dat zijn systeem eraan komt, vraagt ernaar -- en dat is precies wat we willen weten. */
.tegels--keuze .tegel--nog-niet {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ------------------------------------------------------------ aanmeldwizard -- */

/* De zes stappen bovenin. Afgeronde stappen zijn aan te klikken; terug mag altijd. Een
   genummerde lijst en geen percentage: wie ziet "4. Uw bedrijf" weet wat er nog komt. */
.stappen {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0;
    margin: 0 0 1.25rem;
    max-width: 52rem;
}

.stappen li { flex: 1 1 7rem; }

.stappen a,
.stappen span {
    display: block;
    padding: 0.45rem 0.1rem 0;
    border-top: 3px solid var(--paneel-3);
    font-size: 0.8rem;
    color: var(--inkt-dof);
    text-decoration: none;
}

.stappen--gedaan a { border-top-color: var(--accent); color: var(--inkt); }
.stappen--gedaan a:hover { color: var(--inkt-fel); }
.stappen--hier span { border-top-color: var(--accent); color: var(--inkt-fel); font-weight: 600; }

/* Vier stemmen naast elkaar, elk met een afspeelknop: kiezen gebeurt op het gehoor. */
.stemkeuze,
.nummerkeuze {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.5rem;
}

.stemkeuze__optie,
.nummerkeuze__optie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: var(--regel);
    cursor: pointer;
}

.stemkeuze__optie:has(input:checked),
.nummerkeuze__optie:has(input:checked) {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.stemkeuze__optie > span { display: flex; flex-direction: column; flex: 1; }
.stemkeuze__optie audio { width: 100%; height: 2rem; }

fieldset.veld { border: 0; padding: 0; margin-inline: 0; }
fieldset.veld > legend { padding: 0; }

/* Een keuze binnen een veld is geen veldlabel: niet in kapitalen en niet als blok. */
.veld .stemkeuze__optie,
.veld .nummerkeuze__optie,
.nummerkeuze__optie {
    display: flex;
    font-family: inherit;
    font-size: 0.9rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--inkt);
    margin: 0;
}

/* Documenten uploaden met begeleiding (public/js/afschermen.js). Elk vak heeft de vorm van wat
   erin hoort -- een pasje, een paspoortpagina, een A4 -- zodat het voorbeeld er altijd in past en
   de klant aan de vorm al ziet wat er verwacht wordt. */
.documentvakken { margin-top: 0.4rem; }

.documenttips {
    margin: 0.2rem 0 0.9rem;
    padding-left: 1.1rem;
    color: var(--inkt-dof);
}

.keuzechips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }

.keuzechip {
    padding: 0.4rem 1rem;
    border: var(--regel);
    border-radius: 999px;
    background: var(--paneel-2);
    font: inherit;
    font-size: 0.85rem;
    color: var(--inkt);
    cursor: pointer;
}

.keuzechip[aria-checked='true'] { background: var(--accent); border-color: var(--accent); color: #fff; }

.documentkanten { display: grid; gap: 1rem; grid-template-columns: minmax(0, 20rem); }
.documentkanten--twee { grid-template-columns: repeat(auto-fit, minmax(13rem, 20rem)); }

.vak__titel { font-size: 0.85rem; font-weight: 600; color: var(--inkt-fel); margin-bottom: 0.35rem; }

.vak__vlak {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0.6rem;
    border: 2px dashed var(--paneel-3);
    background: var(--paneel-2);
    cursor: pointer;
    transition: border-color var(--duur-kort, 0.15s) ease, background var(--duur-kort, 0.15s) ease;
}

.vak--kaart .vak__vlak { aspect-ratio: 1.586; }
.vak--paspoort .vak__vlak { aspect-ratio: 1.42; }
.vak--a4 .vak__vlak { aspect-ratio: 0.707; max-width: 15rem; }

.vak__vlak:hover,
.vak__vlak:focus-visible,
.vak__vlak--erboven { border-color: var(--accent); background: #fff; outline: none; }

.vak__vlak--gevuld { border-style: solid; border-color: var(--paneel-3); background: #fff; padding: 0.3rem; }

.vak__vlak > canvas { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Het vak is een <label> (dan opent klikken de bestandskiezer), en binnen een .veld zou het de
   stijl van een veldlabel krijgen: kapitalen, monospace. */
.veld .vak__vlak {
    display: flex;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
}

/* .rij zet display:flex, en dat wint van het hidden-attribuut. */
/* .rij en .knop zetten een display, en een eigen display wint van het hidden-attribuut: dan
   staat er een knop die weg had moeten zijn. Daarom hier één keer, voor alles. */
[hidden] { display: none !important; }

.vak__leeg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--inkt-dof);
}

.vak__teken { font-size: 1.7rem; line-height: 1; color: var(--accent); }
.vak__kies { color: var(--accent); font-weight: 500; }
.vak__bezig { font-size: 0.85rem; color: var(--inkt-dof); }
.vak__stand { margin: 0.45rem 0 0.35rem; min-height: 1.2em; }
.vak__stand.goed { color: var(--groen); }

/* Het grotere scherm om balken bij te tekenen. Een dialoog en geen pagina: de klant blijft
   waar hij was, met de rest van het formulier ingevuld. */
.afscherm-editor {
    width: min(64rem, 94vw);
    max-height: 94vh;
    padding: 1rem 1.2rem;
    border: var(--regel);
}

.afscherm-editor::backdrop { background: rgba(20, 30, 30, 0.55); }
.afscherm-editor__kop { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: baseline; }

.afscherm-editor__vlak {
    display: flex;
    justify-content: center;
    margin: 0.8rem 0;
    padding: 0.5rem;
    background: var(--paneel-2);
}

.afscherm-editor__vlak canvas {
    max-width: 100%;
    max-height: 68vh;
    width: auto;
    height: auto;
    cursor: crosshair;
    touch-action: none;
}

/* Doorschakelen: drie manieren, en de klant heeft er maar één nodig. Daarom uitklapbaar, met
   de mobiele telefoon open -- dat is wat de meeste kleine zaken hebben. */
.doorschakelwijzen {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

.doorschakelwijze {
    border: var(--regel);
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
}

.doorschakelwijze > summary { cursor: pointer; }
.doorschakelwijze[open] > summary { margin-bottom: 0.4rem; }
.doorschakelwijze p { margin: 0.4rem 0 0; }

/* De onderbalk van de wizard (`portaal/wizard/_voet.html.twig`). Terug links, de rest rechts,
   en een lijn erboven zodat hij niet bij het laatste paneel lijkt te horen. */
.wizardvoet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    max-width: 52rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: var(--regel);
}

.wizardvoet__rechts {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.wizardvoet__nogniet { color: var(--inkt-dof); text-align: right; }

/* Een knop die er is maar niet om aandacht vraagt: Later afmaken naast Verder. */
.knop--stil {
    background: transparent;
    border-color: transparent;
    color: var(--inkt-dof);
}

.knop--stil:hover { color: var(--inkt-fel); text-decoration: underline; }

/* Landen aan- en uitvinken (Portaal / Wie er niet door mag). Per groep een kolom die smaller
   wordt naarmate het scherm smaller is; de rest van Europa is de langste lijst. */
.landenkeuze {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem 1.5rem;
    margin-bottom: 1rem;
}

.landenkeuze__groep {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
    align-content: start;
}

.landenkeuze__groep legend {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--inkt-zeer-dof);
    margin-bottom: 0.35rem;
}

/* Werelddelen buiten Europa: dichtgeklapt, met een telling ernaast. */
.landenwereld {
    border-top: 1px solid var(--paneel-3);
    padding: 0.6rem 0;
}

.landenwereld summary {
    cursor: pointer;
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
}

.landenkeuze--vlak {
    gap: 0.25rem 1.5rem;
}

/* Portaal / Chat: instellingen links, waar hij komt te staan rechts. Onder elkaar op een smal scherm. */
.chatvenster {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1.5rem;
}

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

.chatvenster__plaatsen textarea { width: 100%; font-size: 0.78rem; }
.chatvenster__qr svg { width: 9rem; height: 9rem; background: #fff; padding: 0.4rem; border: var(--regel); }
.chatvenster fieldset { border: 0; padding: 0; margin: 0; }
.chatvenster legend { font-weight: 600; margin-bottom: 0.4rem; }