/* GRIP, laag schermen (B-079): wat bij één scherm of één onderdeel hoort. Alleen tokens; de letter per rol. */

@layer schermen {

    /* ══ Mijn werk (#15255, #15581, #15821): het antwoord, Te doen als taakrijen, Mijn projecten als projectregels, Meer; rechts op de laptop
       Vandaag, de komende week en Inbox ══ */
    .mijnwerk { display: grid; grid-template-columns: minmax(0, 1fr); }
    .mijnwerk-hoofd { min-width: 0; }
    .mijnwerk-projecten, .mijnwerk-meer, .mijnwerk-vandaag { margin-top: var(--tussen-groepen); }
    /* Te doen (#15821): Prio en To do als groepen taakrijen onder elkaar, met de ruimte van een groep ertussen. */
    .mijnwerk-tedoen > .taakrijen + .groepskop { margin-top: var(--tussen-groepen); }
    /* Mijn projecten in de smallere kolom naast Vandaag: dezelfde kolommen als Projecten, smaller, zodat de naam blijft staan. */
    @media (min-width: 721px) {
        .mijnwerk-projecten .projectregel { grid-template-columns: 3px minmax(140px, 1fr) calc(4 * var(--stip-cel) + var(--ruimte-2)) 120px 140px 120px 16px; }
    }
    /* Zonder dossier onder Meer: per project de naam met nummer, klant en fase, en Maak het dossier. */
    .zonderdossier { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
    .zonderdossier-regel { display: flex; align-items: center; gap: var(--ruimte-3); min-height: var(--raak); padding: var(--ruimte-1) 0; border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .zonderdossier-regel:last-child { border-bottom: 0; }
    .zonderdossier-naam { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
    .zonderdossier-naam small { display: block; overflow: hidden; font: var(--rol-klein); color: var(--tekst-zacht); text-overflow: ellipsis; }
    /* Vandaag op de telefoon: één regel naar Mijn planning. */
    .vandaagregel { display: flex; align-items: center; gap: var(--ruimte-3); min-height: 60px; padding: var(--ruimte-2) var(--ruimte-3); border-bottom: var(--lijn-dikte) solid var(--lijn); color: var(--tekst); text-decoration: none; }
    .vandaagregel > .icon { flex: none; width: 20px; height: 20px; color: var(--tekst-zacht); }
    .vandaagregel-tekst { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
    .vandaagregel-titel { font-weight: 500; color: var(--tekst-sterk); }
    .vandaagregel-sub { overflow: hidden; font: var(--rol-klein); color: var(--tekst-zacht); text-overflow: ellipsis; white-space: nowrap; }
    .vandaagregel .vandaagregel-pijl { width: 16px; height: 16px; }
    /* Rechts op de laptop: blokken met een kleine kop, gescheiden door een lijn, zoals de referentie. */
    .mijnwerk-zij { display: grid; align-content: start; gap: var(--ruimte-6); min-width: 0; }
    .zijblok { display: grid; gap: var(--ruimte-2); }
    .zijblok + .zijblok { padding-top: var(--ruimte-6); border-top: var(--lijn-dikte) solid var(--lijn); }
    .zijblok-kop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ruimte-2); margin: 0; font: var(--rol-label); color: var(--tekst); }
    .zijblok-meta { font: var(--rol-klein); color: var(--tekst-zacht); }
    .zijblok-lijst { display: grid; gap: var(--ruimte-1); margin: 0; padding: 0; list-style: none; }
    .zijblok-regel { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; gap: var(--ruimte-3); min-height: 32px; padding: var(--ruimte-1) 0; color: var(--tekst); text-decoration: none; }
    .zijblok-regel.is-link { margin: 0 calc(-1 * var(--ruimte-2)); padding-inline: var(--ruimte-2); border-radius: var(--hoek-veld); }
    .zijblok-regel.is-link:hover { background: var(--vlak-hover); }
    /* Inbox rechts op Mijn werk (#15821): de soort als pictogram, de titel ernaast. */
    .zijblok-regel.is-wacht { grid-template-columns: 20px minmax(0, 1fr); }
    .zijblok-soort { display: inline-flex; align-items: center; align-self: center; color: var(--tekst-zacht); }
    .zijblok-soort .icon { width: 16px; height: 16px; stroke-width: 1.5; }
    .zijblok-naam { display: inline-flex; align-items: center; gap: var(--ruimte-2); min-width: 0; overflow: hidden; color: var(--tekst-zacht); text-overflow: ellipsis; white-space: nowrap; }
    .zijblok-waarde { min-width: 0; overflow: hidden; font-weight: 500; color: var(--tekst-sterk); text-overflow: ellipsis; white-space: nowrap; }
    .zijblok-waarde small { margin-left: var(--ruimte-2); font: var(--rol-klein); font-weight: 400; color: var(--tekst-zacht); }
    .zijblok-leeg { margin: 0; font: var(--rol-klein); color: var(--tekst-zacht); }
    .zijblok-leeg.is-onbekend { font-style: italic; }
    .zijblok-link { display: inline-flex; align-items: center; gap: var(--ruimte-1); justify-self: start; min-height: 32px; color: var(--tekst); font-weight: 500; text-decoration: none; }
    .zijblok-link:hover { color: var(--tekst-link); }
    .zijblok-link .icon { width: 14px; height: 14px; }
    .zijblok-dag { display: grid; grid-template-columns: 28px minmax(0, 1fr) 44px; align-items: center; gap: var(--ruimte-2); font: var(--rol-klein); color: var(--tekst-zacht); }
    .zijblok-dag.is-vandaag { font-weight: 600; color: var(--tekst); }
    .zijblok-uren { text-align: right; font-variant-numeric: tabular-nums; }
    @media (min-width: 721px) {
        .mijnwerk:has(> .mijnwerk-zij) { grid-template-columns: minmax(0, 1fr) 280px; column-gap: var(--ruimte-8); }
        .mijnwerk > .schermbalk { grid-column: 1 / -1; }
        .mijnwerk-zij { padding-left: var(--ruimte-6); border-left: var(--lijn-dikte) solid var(--lijn); }
    }
    /* Te smal voor twee kolommen, zoals met het paneel van Rixsi open (#15975): Planning vandaag, Komende week en Inbox
       onder de lijst in plaats van ernaast. De maat is de breedte van het werkblad, niet van het scherm. */
    @container werkblad (width < 900px) {
        .mijnwerk:has(> .mijnwerk-zij) { grid-template-columns: minmax(0, 1fr); }
        .mijnwerk-zij { margin-top: var(--tussen-groepen); padding: var(--tussen-groepen) 0 0; border-top: var(--lijn-dikte) solid var(--lijn); border-left: 0; }
    }    .startplek-keuze { margin: var(--ruimte-3) 0; }

    /* Rol aannemen (#15188): een beheerder ziet altijd dat zijn rol niet uit AFAS komt. */
    .rolbalk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); margin-bottom: var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-4); border-radius: var(--hoek-rond); background: var(--vlak-actief); color: var(--tekst); }
    .rolbalk .icon { width: 18px; height: 18px; flex: none; }
    .rolbalk-tekst { flex: 1 1 200px; min-width: 0; }

    /* Inspringen (#16003): één regel onder de projectkop; ingesprongen in de tint, met de reden ingekort. */
    .inspringbalk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); margin: var(--ruimte-2) 0 var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-3); border: var(--lijn-dikte) solid var(--lijn); border-radius: var(--hoek-groep); font: var(--rol-klein); color: var(--tekst-zacht); }
    .inspringbalk.is-ingesprongen { border-color: transparent; background: var(--vlak-actief); color: var(--tekst); }
    .inspringbalk-teken { display: grid; flex: none; place-items: center; width: 20px; height: 20px; }
    .inspringbalk-teken .icon { width: 16px; height: 16px; }
    .inspringbalk-tekst { flex: 1 1 14rem; min-width: 0; }
    .inspringbalk-reden { color: var(--tekst); }
    .inspringbalk > .btn { flex: none; margin-left: auto; }

    /* Functies en rollen (#16003): het antwoord bovenaan, dan per functie de rol; een leidende functie krijgt nadruk. */
    .functierollen-antwoord { margin: 0 0 var(--ruimte-3); }
    .functierollen { display: grid; gap: var(--ruimte-1); margin: 0 0 var(--ruimte-3); padding: 0; list-style: none; }
    .functierol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(9rem, 12rem); align-items: center; gap: var(--ruimte-3); min-height: var(--rij); padding: 0 var(--ruimte-2); border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .functierol.is-leidend .functierol-naam { font-weight: 600; }
    .functierol-naam small { display: block; font: var(--rol-klein); color: var(--tekst-zacht); }

    /* AFAS-velden (#16374): de vraag op één regel, de connectors als stille keuzes, het antwoord, en de velden als tabel. */
    .afasvelden-vraag { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--ruimte-2); margin: 0 0 var(--ruimte-3); }
    .afasvelden-keuzes { display: flex; flex-wrap: wrap; gap: var(--ruimte-1); margin: 0 0 var(--ruimte-3); }
    .afasvelden-keuze { display: inline-flex; align-items: baseline; gap: var(--ruimte-1); min-height: 32px; padding: 0 var(--ruimte-2); border: var(--lijn-dikte) solid var(--lijn); border-radius: var(--hoek-groep); background: var(--vlak-blad); font: var(--rol-klein); color: var(--tekst); cursor: pointer; }
    .afasvelden-keuze small { color: var(--tekst-zacht); }
    .afasvelden-keuze.is-gevraagd { border-color: var(--accent); }
    .afasvelden-antwoord { margin: 0 0 var(--ruimte-2); }
    .afasvelden-ontbrekend { display: flex; gap: var(--ruimte-2); margin: 0 0 var(--ruimte-2); color: var(--fout, var(--tekst)); font: var(--rol-klein); }
    .afasvelden-acties { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); margin: 0 0 var(--ruimte-2); }
    .afasvelden-tabel { width: 100%; border-collapse: collapse; font: var(--rol-klein); }
    .afasvelden-tabel th, .afasvelden-tabel td { padding: var(--ruimte-1) var(--ruimte-2); border-top: var(--lijn-dikte) solid var(--lijn); text-align: left; vertical-align: top; }
    .afasvelden-tabel thead th { border-top: 0; font-weight: 600; color: var(--tekst-zacht); }
    .afasvelden-tabel tr.is-gelezen td:first-child code { font-weight: 600; }
    .afasvelden-tabel small { color: var(--tekst-zacht); }
    .afasvelden-onbekend .icon, .afasvelden-ontbrekend .icon { width: 16px; height: 16px; flex: none; }

    /* Verbruik van de assistent (#15277): het antwoord, een balk naar de grens (onbekend grijs gestippeld), en voor de
       beheerder een tabel per gebruiker. */
    .assistentverbruik-antwoord, .agentverbruik-antwoord { margin: 0 0 var(--ruimte-1); }
    .assistentverbruik-balk { height: 6px; margin: 0 0 var(--ruimte-1); border-radius: 3px; background: var(--lijn); overflow: hidden; }
    .assistentverbruik-balk span { display: block; height: 100%; background: var(--accent); }
    .assistentverbruik-balk.is-letop span { background: var(--let-op); }
    .assistentverbruik-balk.is-onbekend { background: transparent; border: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); }
    .agentverbruik-vraag { display: grid; grid-template-columns: auto minmax(0, 12rem); align-items: center; gap: var(--ruimte-2); margin: 0 0 var(--ruimte-3); }
    .agentverbruik-tabel { width: 100%; border-collapse: collapse; font: var(--rol-klein); }
    .agentverbruik-tabel th, .agentverbruik-tabel td { padding: var(--ruimte-1) var(--ruimte-2); border-top: var(--lijn-dikte) solid var(--lijn); text-align: left; }
    .agentverbruik-tabel thead th { border-top: 0; font-weight: 600; color: var(--tekst-zacht); }
    .agentverbruik-tabel td:nth-child(n+2), .agentverbruik-tabel th:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }
    .agentverbruik-tabel td.is-onbekend { color: var(--tekst-zacht); font-style: italic; }
    .agentverbruik-tabel td.is-letop { color: var(--let-op); font-weight: 600; }
    /* Op de telefoon passen vijf kolommen niet: de tokens komen pas op een breder scherm, het bedrag staat er altijd. */
    .agentverbruik-tabel :is(th, td):is(:nth-child(3), :nth-child(4)) { display: none; }
    @media (min-width: 721px) { .agentverbruik-tabel :is(th, td):is(:nth-child(3), :nth-child(4)) { display: table-cell; } }

    /* ══ Projecten ══ */
    /* De bolletjes vóór de projectnaam, zoals in Te doen op de telefoon (Arne, 19 okt): achter een naam van wisselende
       lengte stonden ze per regel ergens anders; vooraan staan de vier kolommen recht onder elkaar (#15820). */
    td > .todo-project .projectstand { order: -1; }
    td > .todo-project .projectstand-knop { padding-left: 0; }
    .projecten-paneel .panel-body { padding: 0; }
    .projecten-paneel .toolbar { padding: var(--ruimte-4) var(--ruimte-4) 0; }
    .projecten-paneel .field.is-smal { padding: 0 var(--ruimte-4); }
    .projecten-paneel .panel-body > .form-hint { padding: var(--ruimte-3) var(--ruimte-4); }

    /* ══ Het dossier ══ */
    /* Het projectdetail (#15833, B-097), zoals demo-linear-paars: de schermbalk over de volle breedte, daaronder de
       projectkop, de tabs direct onder de kop en de inhoud. Op de laptop staan rechts de eigenschappen in een paneel van
       --paneel breed, met een lijn ervoor van de schermbalk tot onderaan. */
    .dossier-blad { display: grid; grid-template-columns: minmax(0, 1fr); }
    .dossier-blad > * { min-width: 0; }
    /* De tabs met rechts de ene toevoegknop (#15939): één lijn eronder, de knop op de hoogte van de tabs. */
    .dossier-tabkop { display: flex; align-items: center; gap: var(--ruimte-2); margin: var(--ruimte-2) 0 var(--ruimte-4); border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .dossier-tabkop > .tabrij { flex: 1 1 auto; min-width: 0; margin: 0; border-bottom: 0; }
    .dossier-toevoeg { flex: none; }
    .dossier-blad > .scherm-details { margin-top: 0; }
    .eigenschap-onbekend { font-weight: 400; color: var(--tekst-zacht); }
    /* Een lijst op een eigen tab: de kop is voor de schermlezer, de knoppen staan rechts (#15833). */
    .sectie-kop:has(> .visually-hidden:first-child) { justify-content: flex-end; }
    @media (min-width: 721px) {
        /* Minstens zo hoog als het werkblad, met de vrije ruimte in een lege laatste rij: zo loopt de lijn van het paneel
           ook op een korte tab door tot onderaan. */
        .dossier-blad {
            grid-template-columns: minmax(0, var(--inhoud)) var(--paneel); grid-template-rows: auto auto auto auto 1fr; column-gap: var(--ruimte-6);
            min-height: calc(100dvh - 2 * var(--ruimte-2) - var(--ruimte-6) - var(--ruimte-12) - 2 * var(--lijn-dikte));
        }
        .dossier-blad > * { grid-column: 1; }
        .dossier-blad > .schermbalk { grid-column: 1 / -1; }
        /* Het paneel telt niet mee voor de hoogte van de rijen (contain: size): de inhoud links bepaalt die. */
        .dossier-blad > .dossier-paneel {
            grid-column: 2; grid-row: 2 / span 4; contain: size;
            margin: calc(-1 * var(--ruimte-4)) calc(-1 * var(--marge)) calc(-1 * var(--ruimte-12)) 0;
            padding: var(--ruimte-3) var(--ruimte-4);
            border-left: var(--lijn-dikte) solid var(--lijn);
        }
        .dossier-paneel-fasen { margin-top: var(--ruimte-3); padding-top: var(--ruimte-3); border-top: var(--lijn-dikte) solid var(--lijn); }
        /* Het antwoord bovenaan is de mijlpaalkaart op Overzicht (#15818), of laden en een fout. */
        .dossier-blad > .scherm-antwoord:not(:has(.mijlpaalkaart, .loading-inline, .empty-state)) { display: none; }
        /* Het paneel rechts blijft staan als je scrolt, zoals in het referentiebeeld (#15818). */
        .dossier-paneel-inhoud { position: sticky; top: var(--ruimte-4); }
        /* Eén paneel rechts tegelijk (#15975): staat Rixsi open, dan klapt de info in, zoals op de telefoon. De kop (of E)
           klapt hem uit, onder de kop; de mijlpaalkaart en de tabs krijgen de hele breedte. */
        .app-shell:has(.rixsipaneel) .dossier-blad { grid-template-columns: minmax(0, 1fr); }
        .app-shell:has(.rixsipaneel) .dossier-blad > .dossier-paneel { grid-column: 1; grid-row: auto; contain: none; margin: var(--ruimte-2) 0 0; padding: 0; border-left: 0; }
        .app-shell:has(.rixsipaneel) .dossier-paneel:not(.is-open), .app-shell:has(.rixsipaneel) .dossier-paneel-fasen { display: none; }
        .app-shell:has(.rixsipaneel) .dossier-paneel-inhoud { position: static; }
    }

    /* De tab Uren (#15819, B-095): de meter in een kader, dan het verloop, dan per persoon en de prognose naast elkaar. */
    .urenpaneel { display: grid; gap: var(--ruimte-2); margin-bottom: var(--ruimte-4); }
    .urenpaneel-meter { display: grid; gap: var(--ruimte-2); padding: 14px var(--ruimte-4) 12px; border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-groep); background: var(--vlak-blad); }
    .urenpaneel-kop { display: flex; align-items: center; gap: var(--ruimte-2); min-height: 32px; margin-top: var(--ruimte-4); }
    .urenpaneel-titel { flex: 1 1 auto; margin: 0; font: var(--rol-kop); color: var(--tekst); }
    .urenpaneel-meta { color: var(--tekst-zacht); white-space: nowrap; }
    .urenpaneel-grafiek { padding: var(--ruimte-3) var(--ruimte-4); border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-groep); background: var(--vlak-blad); }
    .urenpaneel-voet { margin: var(--ruimte-2) 0 0; font: var(--rol-klein); color: var(--tekst-zacht); }
    .urenpaneel-twee { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--ruimte-8); }
    .urenpaneel-leeg { display: flex; align-items: center; gap: var(--ruimte-2); min-height: var(--rij); margin: 0; color: var(--tekst-zacht); }
    .urenpaneel-twee .notitieregel { border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .urenperfase { margin-bottom: var(--tussen-groepen); }
    .urenperfase-kop { grid-template-columns: auto minmax(0, 1fr) 160px 132px; }
    .urenperfase-naam { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
    .urenperfase-kop .urenmeter.is-compact { width: 100%; }
    .urenperfase-uren { font-weight: 500; color: var(--tekst-sterk); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .urenperfase-uren em { font-style: normal; font-weight: 400; color: var(--tekst-zacht); }
    .urenperfase-uren.is-over, .urenperfase-verbruik.is-over { color: var(--fout); }

    /* Taken: afvinken in één klik; details na een klik op de regel. Clip, geen hidden: hidden maakt van de lijst een
       scrollvak, en dan plakt de actiebalk van een geopende taak niet meer onderin het scherm (#15747). */
    .takenlijst { margin: 0; padding: 0; overflow: clip; list-style: none; container: taken / inline-size; }
    .taak-kop { display: flex; align-items: center; gap: var(--ruimte-1); padding-left: var(--ruimte-4); }
    .taak-knop { grid-template-columns: minmax(0, 1fr) auto auto; padding-left: var(--ruimte-2); }
    .taak-vink {
        flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
        border: 2px solid var(--lijn-veld); border-radius: 50%; background: var(--vlak-blad); color: transparent; cursor: pointer;
        transition: border-color var(--duur-kort) var(--beweging-standaard), color var(--duur-kort) var(--beweging-standaard), background-color var(--duur-kort) var(--beweging-standaard);
    }
    .taak-vink .icon { width: 16px; height: 16px; stroke-width: 2.6; }
    button.taak-vink:focus-visible { border-color: var(--goed); color: var(--goed); }
    /* De groene voorbeeldkleur alleen met een echte muis (#15728): op een aanraakscherm blijft een hover hangen op de
       regel die onder je vinger schuift. */
    @media (hover: hover) {
        button.taak-vink:hover:not(:disabled) { border-color: var(--goed); color: var(--goed); }
    }
    .taak-vink.is-af { border-color: var(--goed); background: var(--goed); color: var(--tekst-op-donker); cursor: default; }
    .taak-vink.is-weg { border-style: dashed; cursor: default; }
    /* Niet jouw taak (#15722): het rondje blijft, gedimd op het zachte vlak, met wie het doet als reden. */
    button.taak-vink:disabled { border-color: var(--lijn-sterk); background: var(--vlak-zacht); cursor: not-allowed; }
    .taak.is-net-afgerond .taak-vink.is-af { animation: pop 350ms var(--beweging-in) both; }
    /* Net afgevinkt (#15728, 25 A en B): de regel blijft doorgestreept met het groene vinkje staan zolang de melding er is,
       en schuift dan dicht. */
    .taak.is-dicht { overflow: hidden; pointer-events: none; animation: taak-dicht var(--duur-middel) var(--beweging-uit) forwards; }
    @keyframes taak-dicht { from { max-height: 160px; opacity: 1; } to { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } }
    .taken-leeg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2) var(--ruimte-3); margin: var(--ruimte-2) 0; padding: var(--ruimte-2) var(--ruimte-4); color: var(--tekst-zacht); }
    .taken-leeg > .icon { flex: none; width: 20px; height: 20px; color: var(--tekst-zacht); }
    .taken-leeg > span { flex: 1 1 auto; }
    .taak-omschrijving { font-weight: 600; color: var(--tekst); }
    .taak-afgerond .taak-omschrijving, .taak-verwijderd .taak-omschrijving { color: var(--tekst-zacht); text-decoration: line-through; }
    .taak-verwijderd td { color: var(--tekst-zacht); }
    .taak-details { padding-left: calc(var(--ruimte-4) + 28px + var(--ruimte-3)); }
    .actie-vlak { display: grid; gap: var(--ruimte-2); }
    .taken-afgerond { margin-top: var(--ruimte-2); font: var(--rol-klein); color: var(--tekst-zacht); }
    /* een geverifieerd besluit (#15588): wie bevestigde, met een vinkje dat één keer springt */
    .besluit-geverifieerd { display: flex; align-items: center; gap: 3px; width: fit-content; margin-top: 2px; font: var(--rol-klein); color: var(--goed); white-space: nowrap; }
    .besluit-geverifieerd .icon { width: 13px; height: 13px; }
    .besluit-geverifieerd.is-net .icon { animation: pop 350ms var(--beweging-in) both; }

    /* De geschiedenis van het dossier. */
    .geschiedenis { display: flex; flex-direction: column; gap: var(--ruimte-3); margin: 0; padding: 0; list-style: none; }
    .geschiedenis li { display: grid; grid-template-columns: 150px 1fr; gap: var(--ruimte-4); padding-bottom: var(--ruimte-3); border-bottom: 1px solid var(--lijn); }
    .geschiedenis li:last-child { border-bottom: 0; }
    .geschiedenis time { font: var(--rol-klein); color: var(--tekst-zacht); }
    .geschiedenis .soort { font-weight: 600; color: var(--tekst); }

    /* Bijlagen uit het AFAS-dossier: één klik bewaart het bestand. */
    .bijlagen { display: grid; gap: var(--ruimte-1); margin: 0 0 var(--ruimte-2); padding: 0; list-style: none; }
    .bijlagen li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); }
    .bijlage-knop { gap: var(--ruimte-1); max-width: 100%; overflow-wrap: anywhere; text-align: left; }
    .bijlage-knop .spinner { width: 14px; height: 14px; }
    /* Het type naast de naam (#16010): PDF, Word, Excel; wat niet in GRIP opent zegt download. */
    .bijlage-soort { font: var(--rol-klein); color: var(--tekst-zacht); }
    .bijlage-melding { display: inline-flex; align-items: center; gap: var(--ruimte-1); color: var(--tekst); }
    .bijlage-melding .icon { width: 14px; height: 14px; color: var(--let-op); }

    /* ══ Mijn planning in de Linear-vorm (#15821): de dagengrafiek als antwoord, elke dag een groep met projectregels, en op de
       laptop rechts het paneel met de uren per project en de herkomst, zoals het paneel van het projectdetail. ══ */
    .planning-blad { display: grid; grid-template-columns: minmax(0, 1fr); }
    .planning-blad > * { min-width: 0; }
    .planning-paneel { display: none; }
    .planning-over { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0 0 var(--ruimte-3); font: var(--rol-klein); font-weight: 500; color: var(--fout); }
    .planning-dagen { display: grid; gap: var(--ruimte-4); }
    .planning-dag .groepskop-rechts { gap: var(--ruimte-3); }
    .planning-dag-over { font: var(--rol-klein); color: var(--fout); }
    .planning-dag-balk { display: inline-flex; gap: 1px; width: 96px; height: 6px; overflow: hidden; border-radius: 3px; background: var(--grafiek-leeg); }
    .planning-dag-balk > span { height: 100%; background: var(--pk, var(--reeks-8)); }
    .planning-dag-uren { min-width: 56px; font-weight: 500; color: var(--tekst-sterk); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .planning-dag-uren em { font-style: normal; font-weight: 400; color: var(--tekst-zacht); }
    .planning-dag-uren.is-over { color: var(--fout); }
    .planning-paneel-deel + .planning-paneel-deel { margin-top: var(--ruimte-3); padding-top: var(--ruimte-3); border-top: var(--lijn-dikte) solid var(--lijn); }
    .planning-paneel-kop { display: flex; justify-content: space-between; gap: var(--ruimte-2); margin: 0 0 var(--ruimte-2); font: var(--rol-klein); font-weight: 500; color: var(--tekst-zacht); }
    .planning-perproject { display: grid; gap: var(--ruimte-2); margin: 0; padding: 0; list-style: none; }
    .planning-perproject > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--ruimte-2); align-items: center; }
    .planning-perproject-naam { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; color: var(--tekst-sterk); }
    .planning-perproject-naam > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .planning-perproject-naam .projectregel-streep { flex: none; height: 14px; }
    .planning-perproject-uren { font-weight: 500; color: var(--tekst-sterk); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .planning-perproject-balk { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--grafiek-leeg); }
    .planning-perproject-balk > span { display: block; height: 100%; background: var(--pk, var(--reeks-8)); }
    @media (min-width: 721px) {
        .planning-blad {
            grid-template-columns: minmax(0, var(--inhoud)) var(--paneel); grid-template-rows: auto auto auto 1fr; column-gap: var(--ruimte-6);
            min-height: calc(100dvh - 2 * var(--ruimte-2) - var(--ruimte-6) - var(--ruimte-12) - 2 * var(--lijn-dikte));
        }
        .planning-blad > * { grid-column: 1; }
        .planning-blad > .schermbalk { grid-column: 1 / -1; }
        .planning-blad > .planning-paneel {
            display: block; grid-column: 2; grid-row: 2 / span 3; contain: size;
            margin: calc(-1 * var(--ruimte-4)) calc(-1 * var(--marge)) calc(-1 * var(--ruimte-12)) 0;
            padding: var(--ruimte-3) var(--ruimte-4);
            border-left: var(--lijn-dikte) solid var(--lijn);
        }
    }

    /* ══ Mijn planning (#15080, #15584): per dag een balk tegen een werkdag, daaronder de projecten ══ */
    .planning { display: grid; gap: var(--ruimte-3); margin: 0; padding: 0; list-style: none; }
    .planningsdag { display: grid; gap: var(--ruimte-2); padding: var(--ruimte-4); }
    .planningsdag.is-vandaag { box-shadow: var(--schaduw-groep), inset 3px 0 0 var(--accent); }
    .planningsdag.is-leeg { background: var(--vlak-zacht); box-shadow: none; }
    .planningsdag-kop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ruimte-2); }
    .planningsdag-naam { font-weight: 600; }
    .planningsdag-uren { font-weight: 600; }
    .planningsdag-reden { margin-right: var(--ruimte-2); font: var(--rol-klein); font-weight: 600; color: var(--tekst); }
    .planningsdag-reden::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: var(--ruimte-1); background: var(--fout); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
    .planningsdag-balk { display: flex; height: 8px; overflow: hidden; border-radius: var(--hoek-rond); background: var(--grafiek-leeg); }
    .planningsdag-balk.is-vol { box-shadow: 0 0 0 2px var(--fout); }
    .planningsdag-deel { height: 100%; background: var(--pk, var(--reeks-8)); }
    .planningsdag-deel + .planningsdag-deel { box-shadow: inset 1px 0 0 var(--vlak-blad); }
    .planningsdag-projecten { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
    .planningsproject {
        display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--ruimte-3);
        width: 100%; min-height: var(--raak); padding: var(--ruimte-2); border: 0; border-radius: var(--hoek-veld); background: none; text-align: left; cursor: pointer;
    }
    .planningsproject:hover:not(:disabled) { background: var(--vlak-zacht); }
    .planningsproject-tekst { display: grid; gap: 2px; min-width: 0; }
    .planningsproject-naam { font-weight: 600; overflow-wrap: anywhere; }
    .planningsproject-kop { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; }
    .planningsproject-pijl { width: 16px; height: 16px; color: var(--tekst-zacht); }
    .bron-uitleg { margin-bottom: var(--ruimte-3); font: var(--rol-klein); color: var(--tekst-zacht); }
    .bron-uitleg summary { display: inline-flex; align-items: center; gap: var(--ruimte-1); cursor: pointer; }
    .bron-uitleg summary .icon { width: 15px; height: 15px; }
    .bron-uitleg p { max-width: 70ch; margin-top: var(--ruimte-1); color: var(--tekst); }

    /* ══ Inbox (#15837, B-097): links de lijst, rechts het geopende item; op de telefoon de lijst die het item opent ══ */
    .toetshint { display: inline-flex; align-items: center; gap: var(--ruimte-1); font: var(--rol-klein); color: var(--tekst-zacht); white-space: nowrap; }
    .wacht { display: grid; gap: var(--ruimte-6); }
    .wacht.is-twee { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 0; align-items: start; border-top: var(--lijn-dikte) solid var(--lijn); }
    .wacht.is-twee > .wacht-lijst { align-self: stretch; padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-4) 0; border-right: var(--lijn-dikte) solid var(--lijn); }
    .wacht-detail { position: sticky; top: var(--ruimte-4); min-width: 0; padding: var(--ruimte-6) 0 var(--ruimte-6) var(--ruimte-8); }
    .wacht-lijst .groepskop + .wachtregels { margin-top: var(--ruimte-1); }
    .wachtregels { display: grid; gap: 2px; margin: 0 0 var(--ruimte-4); padding: 0; list-style: none; }
    .wachtregel {
        display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--ruimte-3);
        width: 100%; min-height: var(--raak); padding: var(--ruimte-2) var(--ruimte-3); border: 0; border-radius: var(--hoek-veld);
        background: none; color: var(--tekst); text-align: left; cursor: pointer;
    }
    .wachtregel:hover { background: var(--vlak-hover); }
    .wachtregel.is-open { background: var(--vlak-geselecteerd); }
    .wachtregel-beeld { display: grid; place-items: center; width: 32px; height: 32px; border: var(--lijn-dikte) solid var(--lijn); border-radius: var(--hoek-veld); background: var(--vlak-blad); color: var(--tekst-zacht); }
    .wachtregel-beeld.is-stippel { border: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); }
    .wachtregel-beeld .icon { width: 16px; height: 16px; }
    .wachtregel-tekst { display: grid; gap: 2px; min-width: 0; }
    .wachtregel-titel { overflow: hidden; font-weight: 500; color: var(--tekst-sterk); text-overflow: ellipsis; white-space: nowrap; }
    .wachtregel.is-gelezen .wachtregel-titel { font-weight: 400; color: var(--tekst); }
    .wachtregel-sub { overflow: hidden; font: var(--rol-klein); color: var(--tekst-zacht); text-overflow: ellipsis; white-space: nowrap; }
    /* De tijd en de projectstand in een vaste kolom rechts (Arne, 19 okt): de bolletjes staan per lijst op dezelfde plek. */
    .wachtregel-rechts { display: grid; justify-items: end; gap: var(--ruimte-1); font: var(--rol-klein); color: var(--tekst-zacht); white-space: nowrap; }
    .wacht-leeg { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0; padding: var(--ruimte-3) 0; font: var(--rol-klein); color: var(--tekst-zacht); }
    .wacht-leeg .icon { width: 16px; height: 16px; }
    .wachtdetail { display: grid; gap: var(--ruimte-4); max-width: 720px; }
    .wachtdetail-raakt { display: inline-flex; align-items: center; gap: var(--ruimte-2); }
    .wachtdetail > .groepskop { margin-top: var(--ruimte-2); }
    .wachtdetail-lijst { margin: 0; }
    .wachtdetail-acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); }
    .wachtdetail-klaar { display: inline-flex; align-items: center; gap: var(--ruimte-1); margin-right: auto; font-weight: 500; }
    .wachtdetail-klaar .icon { width: 16px; height: 16px; color: var(--goed); }
    .wachtdetail-bezig { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0; color: var(--tekst-zacht); }
    .wachtdetail-zacht { font: var(--rol-klein); font-weight: 400; color: var(--tekst-zacht); }
    .wachtdetail-spreker { display: inline-flex; align-items: center; gap: var(--ruimte-1); margin-right: var(--ruimte-2); }
    /* slepen op de Inbox (#15258) */
    .inbox-sleep { position: fixed; inset: 0; z-index: 1400; display: none; place-items: center; border: 3px dashed var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
    .inbox-sleep.is-actief { display: grid; }
    .inbox-sleep-invoer { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: copy; }
    .inbox-sleep-tekst { position: relative; display: inline-flex; align-items: center; gap: var(--ruimte-2); padding: var(--ruimte-3) var(--ruimte-6); border-radius: var(--hoek-rond); background: var(--nadruk); color: var(--tekst-op-donker); font-weight: 600; pointer-events: none; }
    .inbox-sleep-tekst .icon { width: 18px; height: 18px; }

    /* Een update verwerken (#15837): de inhoud op het werkblad, de voet met Klaar met verwerken eronder. */
    .update-inhoud, .update-voet { display: contents; }
    .update-pagina { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-3); max-width: 880px; }
    .update-pagina-voet { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--ruimte-2); padding-top: var(--ruimte-3); border-top: var(--lijn-dikte) solid var(--lijn); }
    .update-stand { display: flex; align-items: center; gap: var(--ruimte-2); padding: var(--ruimte-3); border-radius: var(--hoek-veld); background: var(--vlak-zacht); }
    .update-samenvatting { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0 0 var(--ruimte-2); font-weight: 600; }
    .update-samenvatting .icon { width: 18px; height: 18px; }
    .update-tekst { white-space: pre-wrap; overflow-wrap: anywhere; }
    .update-opdracht { margin: 0 0 var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-3); border-radius: var(--hoek-veld); background: var(--vlak-zacht); }
    .update-opdracht .icon { width: 18px; height: 18px; vertical-align: -3px; color: var(--goed); }
    .update-voortgang { align-self: center; font: var(--rol-klein); color: var(--tekst); }
    /* Opnieuw laten lezen en Update weggooien (#15821): stille tekstknoppen met een pictogram, op één regel. */
    .update-stil { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--ruimte-4); }
    .update-stil-knop { display: inline-flex; align-items: center; gap: 6px; min-height: var(--raak); padding: 0; border: 0; background: none; color: var(--tekst-zacht); font: var(--rol-tekst); cursor: pointer; }
    .update-stil-knop:hover { color: var(--tekst); }
    .update-stil-knop.is-weg:hover { color: var(--fout); }
    .update-stil-knop.is-fout, .update-stil-knop.is-fout:hover { color: var(--fout); }
    .wachtdetail-verwijder { margin-top: var(--ruimte-4); }
    .update-stil-knop .icon { width: 14px; height: 14px; }
    .weggooien-vraag { align-self: center; font-weight: 600; color: var(--fout); }
    .updateproject { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); margin-bottom: var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-3); border-radius: var(--hoek-veld); background: var(--vlak-zacht); }
    .updateproject-vraag { display: inline-flex; align-items: center; gap: var(--ruimte-1); font-weight: 600; }
    .updateproject-vraag .icon { width: 16px; height: 16px; }
    .updateproject-keuze { flex: 1 1 180px; min-height: var(--raak); }
    /* een verwerkte update (#15613): het antwoord bovenaan, de tekst als naslag */
    .verwerkt-overzicht { margin: 0 0 var(--ruimte-3); }
    .verwerkt-zin { display: flex; align-items: flex-start; gap: var(--ruimte-2); margin: 0 0 var(--ruimte-2); font: var(--rol-kop); color: var(--tekst); }
    .verwerkt-vink { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--goed); color: var(--tekst-op-donker); }
    .verwerkt-vink .icon { width: 14px; height: 14px; }
    .verwerkt-telling { display: flex; flex-wrap: wrap; gap: var(--ruimte-1) var(--ruimte-3); margin: 0 0 var(--ruimte-2); padding: 0 0 0 30px; list-style: none; font: var(--rol-klein); }
    .verwerkt-telling li { display: inline-flex; align-items: center; gap: var(--ruimte-1); }
    .verwerkt-telling .icon { width: 15px; height: 15px; color: var(--tekst-zacht); }
    .verwerkt-overzicht .form-hint { margin: 0; padding-left: 30px; }
    .overname-merk { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: var(--ruimte-1); margin-top: 2px; font: var(--rol-klein); font-weight: 600; color: var(--goed); }
    .overname-merk .icon { width: 13px; height: 13px; }
    /* net gedaan (#15267): één tik per voorstel, terugdraaien kan */
    .netgedaan-lijst { display: grid; gap: 2px; margin: 0 0 var(--ruimte-3); padding: var(--ruimte-2); list-style: none; }
    .netgedaan { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--ruimte-3); align-items: start; padding: var(--ruimte-2) var(--ruimte-3); border-radius: var(--hoek-veld); }
    .netgedaan.is-overgenomen { background: var(--goed-zacht); }
    .netgedaan-icoon .icon { width: 18px; height: 18px; margin-top: 3px; }
    .netgedaan.is-overgenomen .netgedaan-icoon { color: var(--goed); }
    .netgedaan.is-weggegooid .netgedaan-icoon { color: var(--tekst-zacht); }
    .netgedaan-tekst { display: grid; gap: 2px; min-width: 0; }
    .netgedaan-acties { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--ruimte-4); }
    .netgedaan-acties .btn-link { min-height: var(--raak); color: var(--tekst-link); }
    .netgedaan-groep { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-1); margin: 0 0 var(--ruimte-1); font: var(--rol-klein); color: var(--goed); }
    .netgedaan-groep .icon { width: 15px; height: 15px; }

    /* Sprekers en het transcript: elke spreker een eigen kleur uit de reeks, altijd naast de naam. */
    .sprekers { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); margin-bottom: var(--ruimte-3); }
    .spreker { display: inline-flex; align-items: center; gap: var(--ruimte-1); }
    .spreker-chip { display: inline-flex; align-items: center; gap: var(--ruimte-1); min-height: 36px; padding: 0 var(--ruimte-3); border: 1px solid currentColor; border-radius: var(--hoek-rond); background: var(--vlak-blad); font-weight: 600; cursor: pointer; }
    .spreker-chip-pen { opacity: .6; font: var(--rol-klein); }
    .spreker-noemen { display: inline-flex; align-items: center; gap: var(--ruimte-2); }
    .spreker-noemen .input { width: 160px; min-height: 36px; }
    .spreker-1 { color: var(--reeks-2); } .spreker-2 { color: var(--reeks-5); } .spreker-3 { color: var(--reeks-1); }
    .spreker-4 { color: var(--reeks-6); } .spreker-5 { color: var(--reeks-3); } .spreker-6 { color: var(--reeks-7); }
    .spreker-luister { display: inline-flex; align-items: center; justify-content: center; width: var(--raak); height: var(--raak); border: 1px solid currentColor; border-radius: 50%; background: var(--vlak-blad); cursor: pointer; }
    .spreker-luister:hover { background: var(--vlak-zacht); }
    .spreker-luister[disabled] { opacity: .45; cursor: not-allowed; }
    .spreker-luister .spinner { width: 16px; height: 16px; }
    .sprekervoorstel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ruimte-2); margin-bottom: var(--ruimte-2); padding: var(--ruimte-2) var(--ruimte-3); border-radius: var(--hoek-veld); background: var(--info-zacht); }
    .transcriptie { display: flex; flex-direction: column; gap: var(--ruimte-3); margin: 0; padding: 0; list-style: none; }
    .transcriptie-fragment { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: var(--ruimte-2); row-gap: 2px; padding-right: calc(var(--raak) + var(--ruimte-2)); }
    .transcriptie-fragment.is-overgenomen { padding-left: var(--ruimte-2); box-shadow: inset 2px 0 0 var(--goed); }
    .transcriptie-wie { font: var(--rol-klein); font-weight: 700; }
    .transcriptie-tijd { align-self: center; font: var(--rol-klein); color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }
    .transcriptie-tekst { grid-column: 1 / -1; margin: 0; overflow-wrap: anywhere; }
    .fragment-plus { position: absolute; top: 0; right: 0; width: var(--raak); height: var(--raak); border: 1px solid var(--lijn-veld); border-radius: 50%; background: var(--vlak-blad); color: var(--tekst); font: var(--rol-titel); cursor: pointer; }
    .fragment-plus:hover { background: var(--vlak-geselecteerd); }
    .transcript-kop { display: flex; align-items: center; gap: var(--ruimte-2); width: 100%; min-height: var(--raak); margin-top: var(--ruimte-3); padding: var(--ruimte-2) 0; border: 0; border-top: 1px solid var(--lijn); background: none; font-weight: 600; text-align: left; cursor: pointer; }

    /* AI-voorstellen als kaarten onder elkaar (#15837, B-097): kiezen, Selecteer alles wat al goed is, en Neem over in de balk. */
    .voorstellen-balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ruimte-2); margin-bottom: var(--ruimte-2); }
    .voorstellen-balk kbd { margin-left: var(--ruimte-1); }
    .voorstellen-bron { display: inline-flex; align-items: center; gap: var(--ruimte-1); font: var(--rol-klein); color: var(--tekst-zacht); }
    .voorstellen-bron .icon { width: 14px; height: 14px; }
    .voorstelkaarten { display: grid; gap: var(--ruimte-2); margin: 0 0 var(--ruimte-4); padding: 0; list-style: none; }
    .voorstelkaart-vak { display: inline-grid; place-items: center; width: var(--raak); height: var(--raak); margin: calc(-1 * var(--ruimte-3)); cursor: pointer; }
    .voorstelkaart-kies { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
    .voorstelkaart-kies:disabled { cursor: not-allowed; }
    /* De zwevende balk (B-097): wat je koos, per soort, met de ene paarse knop Neem over. */
    .neemover-balk {
        position: sticky; bottom: var(--ruimte-4); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ruimte-2) var(--ruimte-4);
        width: fit-content; max-width: 100%; margin: 0 auto var(--ruimte-4); padding: var(--ruimte-2) var(--ruimte-2) var(--ruimte-2) var(--ruimte-4);
        border: var(--lijn-dikte) solid var(--lijn); border-radius: var(--hoek-groep); background: var(--vlak-blad); box-shadow: var(--schaduw-zwevend);
    }
    .neemover-telling { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--ruimte-2); }
    .neemover-telling > span { font: var(--rol-klein); color: var(--tekst-zacht); }

    /* ══ Vastleggen (#15124, #15263): opnemen, een bestand of tekst plakken ══ */
    .vandaag-kiezer { max-height: 50vh; margin-top: var(--ruimte-3); overflow-y: auto; }
    .vastleggen-soort { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .vastleggen-soort .segmented-option { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-height: var(--raak); font: var(--rol-klein); font-weight: 600; }
    .vastleggen-soort .icon { width: 18px; height: 18px; }
    .vastlegging { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ruimte-2) var(--ruimte-3); padding: var(--ruimte-3) var(--ruimte-4); }
    .vastlegging .row-actions { grid-column: 2; }
    .concept-hint { margin: 2px 0 0; }
    .aanleveren { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ruimte-2); margin-bottom: var(--ruimte-3); }
    .aanleveren-knop {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ruimte-1);
        min-height: 76px; padding: var(--ruimte-2); border: 1px solid var(--lijn-sterk); border-radius: var(--hoek-uitklap);
        background: var(--vlak-blad); color: var(--tekst); font-weight: 600; text-align: center; cursor: pointer;
    }
    .aanleveren-knop .icon { width: 26px; height: 26px; }
    .aanleveren-knop:hover { background: var(--vlak-zacht); }
    .aanleveren-knop:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
    .aanleveren-knop.is-opnemen { border-color: var(--nadruk); background: var(--nadruk); color: var(--tekst-op-donker); }
    .aanleveren-knop.is-opnemen:hover { background: var(--nadruk-hover); }
    .aanleveren-knop[disabled] { opacity: .5; cursor: not-allowed; }
    .aanleveren-of { display: flex; align-items: center; gap: var(--ruimte-2); margin: var(--ruimte-2) 0 var(--ruimte-3); font: var(--rol-klein); color: var(--tekst-zacht); }
    .aanleveren-of::before, .aanleveren-of::after { content: ""; flex: 1; border-top: 1px solid var(--lijn-sterk); }

    /* De opname: een rode lamp die zacht pulseert, de tijd groot; rustig en donker tijdens het opnemen. */
    .opname { display: flex; flex-direction: column; align-items: center; gap: var(--ruimte-2); padding: var(--ruimte-4) 0; text-align: center; }
    .opname.is-bezig { padding: var(--ruimte-6) var(--ruimte-4); border-radius: var(--hoek-groep); background: var(--nadruk); color: var(--tekst-op-donker); }
    .opname-lamp { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--vlak-zacht); color: var(--tekst-zacht); }
    .opname-lamp .icon { width: 32px; height: 32px; }
    .opname-lamp.is-aan { background: var(--fout); color: var(--tekst-op-donker); animation: opname-puls 1.6s ease-in-out infinite; }
    .opname.is-onderbroken .opname-lamp { background: var(--vlak-zacht); color: var(--tekst); }
    .opname-klok { font: var(--rol-antwoord); color: var(--tekst); font-variant-numeric: tabular-nums; }
    .opname.is-bezig .opname-klok { color: var(--tekst-op-donker); }
    .opname-deel { font: var(--rol-klein); color: color-mix(in srgb, var(--tekst-op-donker) 80%, transparent); }
    .opname-stand { display: grid; gap: var(--ruimte-1); margin: var(--ruimte-2) 0 0; padding: 0; list-style: none; text-align: left; font: var(--rol-klein); }
    .opname-stand li { display: flex; align-items: flex-start; gap: var(--ruimte-2); }
    .opname-stand .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--goed-zacht); }
    .opname-stand li.is-let-op .icon { color: var(--let-op-zacht); }
    .opname-uitleg { margin: var(--ruimte-2) 0 0; font: var(--rol-klein); color: color-mix(in srgb, var(--tekst-op-donker) 85%, transparent); }
    .opname-zin { margin: 0; font: var(--rol-kop); color: var(--tekst); }
    @keyframes opname-puls { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fout) 35%, transparent); } 50% { box-shadow: 0 0 0 12px transparent; } }
    /* De opnamebalk: een lopende opname blijft zichtbaar als het venster dicht is. */
    .opnamebalk {
        position: fixed; z-index: 55; left: 50%; bottom: calc(var(--ruimte-4) + env(safe-area-inset-bottom)); transform: translateX(-50%);
        display: flex; align-items: center; gap: var(--ruimte-3); width: min(520px, calc(100% - 16px)); min-height: 52px;
        padding: var(--ruimte-1) var(--ruimte-1) var(--ruimte-1) var(--ruimte-4); border-radius: var(--hoek-rond);
        background: var(--nadruk); color: var(--tekst-op-donker); box-shadow: var(--schaduw-zwevend);
    }
    .opnamebalk.is-onderbroken { background: var(--vlak-donker); }
    .opnamebalk-lamp { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; border-radius: 50%; }
    .opnamebalk-lamp.is-aan { background: var(--fout); animation: opname-puls 1.6s ease-in-out infinite; }
    .opnamebalk.is-onderbroken .opnamebalk-lamp { width: 18px; height: 18px; }
    .opnamebalk-lamp .icon { width: 18px; height: 18px; color: var(--let-op-zacht); }
    .opnamebalk-tekst { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: 600; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
    .opnamebalk-knop { flex: none; min-height: var(--raak); padding: 0 var(--ruimte-4); border: 0; border-radius: var(--hoek-rond); background: var(--vlak-blad); color: var(--tekst); font-weight: 600; cursor: pointer; }
    .opnamebalk-knop.is-licht { border: 1px solid color-mix(in srgb, var(--tekst-op-donker) 50%, transparent); background: transparent; color: var(--tekst-op-donker); }
    .opnamebalk-knop:disabled { opacity: .6; cursor: not-allowed; }
    .opnamebalk-knop:focus-visible { outline-color: var(--tekst-op-donker); }
    .opnamebalk-fout { position: fixed; z-index: 55; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(520px, calc(100% - 16px)); margin: 0; padding: var(--ruimte-2) var(--ruimte-3); border-radius: var(--hoek-veld); background: var(--fout); color: var(--tekst-op-donker); }

    /* ══ Zoeken en sneltoetsen (#15256) ══ */
    .zoek-invoer { width: 100%; font-size: var(--invoer); }
    .zoek-uitkomsten { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
    .zoek-uitkomst { display: flex; align-items: center; gap: var(--ruimte-3); width: 100%; min-height: var(--raak); padding: var(--ruimte-2) var(--ruimte-3); border: 0; border-radius: var(--hoek-veld); background: none; text-align: left; cursor: pointer; }
    .zoek-uitkomst .icon { flex: none; width: 18px; height: 18px; color: var(--tekst-zacht); }
    .zoek-uitkomst.is-gekozen { background: var(--vlak-geselecteerd); }
    .zoek-uitkomst-tekst { display: grid; flex: 1; min-width: 0; }
    /* Het commandopalet (#15838): de sneltoets rechts, en een opdracht die nu niet kan grijs, met de reden als tooltip. */
    .zoek-uitkomst kbd { flex: none; }
    .zoek-uitkomst[aria-disabled="true"] { color: var(--tekst-zacht); cursor: not-allowed; }
    .zoek-hulp { margin: 0; }
    .sneltoetsen { display: grid; gap: var(--ruimte-2); margin: 0; }
    .sneltoetsen > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--ruimte-3); align-items: baseline; }
    .sneltoetsen dd { margin: 0; color: var(--tekst-zacht); }

    /* ══ De telefoon-onderdelen die op de laptop verborgen zijn ══ */
    .onderbalk, .zwevende-knop, .alleen-telefoon, .alleen-telefoon-inline, .kopbalk-acties, .navchips { display: none; }
    .onderbalk-icoon { position: relative; display: inline-flex; }
    /* Een teller op de onderbalk (#15832): grijs, een aantal en geen knop, zoals de referentie. */
    .onderbalk-teller { position: absolute; top: -6px; left: calc(100% - 6px); min-width: 16px; height: 16px; padding: 0 var(--ruimte-1); border-radius: var(--hoek-rond); background: var(--nadruk); color: var(--tekst-op-donker); font: var(--rol-label); line-height: 16px; text-align: center; }
    .onderbalk-teller.is-onbekend { top: -2px; left: calc(100% - 4px); min-width: 10px; width: 10px; height: 10px; padding: 0; background: var(--vlak-blad); outline: 2px dashed var(--lijn-onbekend); outline-offset: -2px; }

    /* ══ De periodieke beoordeling (#15590): de omvang met het ritme, en de ronde (Drieluik 13 A) ══ */
    .beoordeling-regel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ruimte-2) var(--ruimte-4); margin: 0 0 var(--ruimte-3); padding: 0 var(--ruimte-1); }
    .beoordeling-beurt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2) var(--ruimte-3); }
    .omvang { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-1) var(--ruimte-3); }
    .omvang-stand { display: inline-flex; align-items: center; gap: var(--ruimte-2); }
    .omvang-stand .icon { width: 16px; height: 16px; color: var(--tekst-zacht); }
    .omvang-stand.is-onbekend { padding: 0 var(--ruimte-2); border-radius: var(--hoek-rond); outline: 1px dashed var(--lijn-onbekend); outline-offset: -1px; color: var(--tekst-zacht); }
    .omvang-herkomst { font: var(--rol-klein); color: var(--tekst-zacht); }
    .omvang-keuze { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); }
    .omvang-keuze .select { width: auto; min-height: 32px; }
    .omvang-wijzig .icon { display: none; }
    /* Kort, als eigenschap in het paneel (#15834): de omvang, het ritme en het potlood. */
    .omvang.is-kort { flex-wrap: nowrap; gap: var(--ruimte-1); }
    .omvang.is-kort .omvang-stand { min-width: 0; }
    .omvang.is-kort .omvang-woord, .omvang.is-kort .omvang-herkomst, .omvang.is-kort .omvang-stand > .icon:first-child, .omvang.is-kort .omvang-wijzig-tekst { display: none; }
    .omvang.is-kort .omvang-stand b { font-weight: 500; }
    .omvang.is-kort .omvang-ritme { color: var(--tekst-zacht); font-weight: 400; }
    .omvang.is-kort .omvang-wijzig { flex: none; min-height: 28px; padding: 0 6px; color: var(--tekst-zacht); }
    .omvang.is-kort .omvang-wijzig .icon { display: block; width: 14px; height: 14px; color: var(--tekst-zacht); }

    /* de voortgang van de ronde: een segment per project, gedaan, nu, nog te gaan */
    .ronde-voortgang { display: flex; gap: var(--ruimte-1); margin: var(--ruimte-3) 0 0; padding: 0; list-style: none; }
    .ronde-voortgang > li { flex: 1 1 0; max-width: 64px; height: 6px; border-radius: var(--hoek-rond); background: var(--grafiek-leeg); }
    .ronde-voortgang > li.is-gedaan { background: var(--goed); }
    .ronde-voortgang > li.is-nu { background: var(--nadruk); }
    /* De ronde in de Linear-vorm (#15821): het project als groepskop, de aspecten als regels van 44 px eronder. */
    .ronde-groep { display: grid; gap: var(--ruimte-2); margin-top: var(--ruimte-4); }
    .ronde-groep > .groepskop + .ronde-aspecten, .ronde-groep > .groepskop + .notitieregel { margin-top: calc(-1 * var(--ruimte-2)); }
    .ronde-aspecten { margin: 0; padding: 0; list-style: none; }
    /* Op de laptop het aspect, de stand, Klopt nog en de pil op één regel; de toelichting eronder. */
    .ronde-aspect {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ruimte-1) var(--ruimte-4); min-height: var(--raak);
        padding: var(--ruimte-1) var(--ruimte-2); border: var(--lijn-dikte) solid var(--lijn); border-top: 0;
    }
    .ronde-aspect:last-child { border-radius: 0 0 var(--hoek-veld) var(--hoek-veld); }
    .ronde-aspect:hover { background: var(--vlak-hover); }
    .ronde-aspect > .ronde-aspect-toelichting { grid-column: 1 / -1; grid-row: 2; }
    .ronde-aspect.is-samenvatting { display: flex; }
    .ronde-aspect-kop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-1) var(--ruimte-3); }
    .ronde-aspect-naam { display: inline-flex; align-items: center; gap: var(--ruimte-2); min-width: 104px; font-weight: 500; color: var(--tekst); }
    .ronde-aspect-naam .icon { width: 14px; height: 14px; stroke-width: 1.5; color: var(--tekst-zacht); }
    .ronde-aspect-naam .icon.is-af { color: var(--accent); stroke-width: 2; }
    .ronde-aspect-gezet { font: var(--rol-klein); color: var(--tekst-zacht); }
    .ronde-aspect-gezet.is-vandaag { display: inline-flex; align-items: center; gap: 2px; font-weight: 500; color: var(--tekst); }
    .ronde-aspect-gezet.is-vandaag .icon { width: 14px; height: 14px; color: var(--accent); }
    .ronde-aspect-toelichting { margin: 0 0 var(--ruimte-1) 26px; font: var(--rol-klein); color: var(--tekst-zacht); }
    /* Het advies (#15756) onder het aspect, over de volle breedte, ingesprongen zoals de toelichting. */
    .ronde-aspect > .ronde-advies { grid-column: 1 / -1; margin: 0 0 var(--ruimte-1) 26px; }
    .ronde-aspect > .ronde-advies-regel {
        grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--ruimte-2);
        margin: 0 0 var(--ruimte-1) 26px; font: var(--rol-klein); color: var(--tekst-zacht);
    }
    .ronde-advies-regel .icon { width: 14px; height: 14px; flex: none; align-self: center; color: var(--accent); }
    .ronde-advies-kop { font-weight: 500; color: var(--tekst); }
    .ronde-advies .ronde-advies-waarom { font: var(--rol-klein); color: var(--tekst); }
    .ronde-aspect-acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); }
    .ronde-aspect-of { font: var(--rol-klein); color: var(--tekst-zacht); }
    .ronde-voet { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); margin-top: var(--ruimte-4); }
    .ronde-voet-volgende { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ruimte-2) var(--ruimte-3); margin-left: auto; }
    .ronde-voet-icoon .icon, .standkeuze-wijzig .icon { width: 14px; height: 14px; }
    .ronde-alles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2) var(--ruimte-3); }
    .ronde-projectnummer { font: var(--rol-klein); font-family: var(--letter-mono); color: var(--tekst-zacht); white-space: nowrap; }

    /* ══ Stijlpagina (#15722, alleen Development): de catalogus van het designsysteem. Per component de uitleg in een
       groep en daaronder elke toestand, met de naam van de toestand klein erboven. Mobile first: alles onder elkaar;
       op de laptop wanneer wel en niet naast elkaar. ══ */
    .catalogus-blok { margin-bottom: var(--ruimte-10); }
    .catalogus-blok > .sectie-kop { justify-content: flex-start; }
    .catalogus-blok > .sectie-kop .sectie-titel { flex: 0 1 auto; }
    .catalogus-code { font: var(--rol-klein); color: var(--tekst-zacht); overflow-wrap: anywhere; }
    .catalogus-sectie-uitleg { margin: 0 0 var(--ruimte-3); padding: 0 var(--ruimte-1); }
    .catalogus-uitleg { display: grid; gap: var(--ruimte-4); padding: var(--ruimte-4); }
    .catalogus-wanneer { display: grid; gap: var(--ruimte-3); margin: 0; }
    .catalogus-wanneer dt, .catalogus-regelkop {
        display: flex; align-items: center; gap: var(--ruimte-1); margin: 0 0 2px;
        font: var(--rol-label); color: var(--tekst-zacht);
    }
    .catalogus-wanneer dt .icon { width: 14px; height: 14px; }
    .catalogus-wanneer dd { margin: 0; }
    .catalogus-regels { display: grid; gap: var(--ruimte-3); padding-top: var(--ruimte-3); border-top: 1px solid var(--lijn); }
    .catalogus-regels ul { display: grid; gap: var(--ruimte-1); margin: 0; padding-left: var(--ruimte-6); font: var(--rol-klein); }
    .catalogus-opsomming { display: grid; gap: var(--ruimte-1); margin: 0; padding-left: var(--ruimte-6); }
    .catalogus-regelkop.is-wel { color: var(--goed); }
    .catalogus-regelkop.is-niet { color: var(--fout); }
    .catalogus-voorbeelden { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-4); margin-top: var(--ruimte-4); }
    .catalogus-voorbeeld { min-width: 0; margin: 0; }
    .catalogus-toestand { margin: 0 0 var(--ruimte-2); padding: 0 var(--ruimte-1); font: var(--rol-label); color: var(--tekst-zacht); }
    .catalogus-vlak { padding: var(--ruimte-4); }
    .catalogus-los > :last-child { margin-bottom: 0; }
    /* Een podium zet wat normaal vast onderin het scherm staat (de melding) stil op zijn plek, zonder animatie, zodat
       het voorbeeld blijft staan. */
    /* De bouwstenen van de telefoon-app (#15938) in de breedte van een telefoon, ook op de laptop. */
    .catalogus-telefoon { max-width: 390px; }
    .catalogus-podium {
        display: grid; place-items: center; min-height: 96px; padding: var(--ruimte-4);
        border: 1px dashed var(--lijn-sterk); border-radius: var(--hoek-groep); background: var(--vlak-zacht);
    }
    .catalogus-podium .melding { animation: none; }
    /* Een werkblad als voorbeeld (#15817): de schermbalk staat er bovenaan, zonder de marges van een echt scherm. */
    .catalogus-werkblad { overflow: hidden; border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-groep); background: var(--vlak-blad); }
    .catalogus-werkblad .schermbalk { position: static; margin: 0; }
    .catalogus-werkblad-inhoud { padding: var(--ruimte-4) var(--ruimte-6) var(--ruimte-6); }
    .catalogus-paneel { max-width: var(--paneel); }
    .catalogus-stapel { display: grid; justify-items: start; gap: var(--ruimte-3); }
    .catalogus-rij { display: flex; flex-wrap: wrap; gap: var(--ruimte-3) var(--ruimte-4); margin: 0; padding: 0; list-style: none; }
    .catalogus-rij > li { display: inline-flex; align-items: center; gap: var(--ruimte-2); }
    .catalogus-projecten { display: grid; gap: var(--ruimte-2); margin: 0; padding: 0; list-style: none; }
    .kleurkiezer-voorbeeldnaam { font: var(--rol-kop); }
    .catalogus-projecten > li { padding-left: var(--ruimte-3); border-left: 3px solid var(--pk, var(--reeks-8)); }
    .catalogus-knoppen { display: grid; justify-items: start; gap: var(--ruimte-3); }
    .catalogus-knoppen > span { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-1) var(--ruimte-3); }
    .catalogus-puntknoppen { display: grid; gap: var(--ruimte-2); margin: 0; padding: 0; list-style: none; }
    .catalogus-puntknoppen > li { display: grid; gap: 2px; }
    .catalogus-puntknoppen > li > span { font-weight: 600; color: var(--actie-tweede-tekst); }
    .catalogus-iconen { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--ruimte-3); margin: 0; padding: 0; list-style: none; }
    .catalogus-iconen > li { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; }
    .catalogus-iconen .icon { flex: none; width: 20px; height: 20px; color: var(--tekst); }
    /* De inhoud van een tab: compacte links naar de blokken, op de telefoon met een raakvlak van 44 px. */
    .catalogus-inhoud { margin: 0 0 var(--ruimte-6); }
    .catalogus-inhoud ul { display: flex; flex-wrap: wrap; gap: var(--ruimte-1) var(--ruimte-2); margin: 0; padding: 0; list-style: none; }
    .catalogus-inhoud a {
        display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--ruimte-3); border-radius: var(--hoek-rond);
        border: var(--lijn-dikte) solid var(--lijn-sterk); background: var(--vlak-blad); color: var(--tekst-link); font: var(--rol-klein); font-weight: 500; text-decoration: none;
    }
    .catalogus-inhoud a:hover { background: var(--vlak-hover); text-decoration: none; }
    @media (pointer: coarse) { .catalogus-inhoud a { min-height: var(--raak); } }
    .catalogus-blok, .catalogus-blok .sectie-titel { scroll-margin-top: var(--ruimte-4); }
    .catalogus-geen-icoon { flex: none; width: 20px; height: 20px; border: 1.5px dashed var(--lijn-onbekend); border-radius: var(--hoek-klein); }
    /* De reden van een uitgeschakelde knop zoals js/reden.js hem op de telefoon toont, hier stil op zijn plek. */
    .reden-bubbel.is-voorbeeld { position: relative; z-index: auto; animation: none; --pijl: 48px; }
    .catalogus-uitzonderingen ul { display: grid; gap: var(--ruimte-2); margin: 0; padding-left: var(--ruimte-8); font: var(--rol-klein); }

    /* De tokens: een staal, rolvoorbeeld of maat vooraan, dan naam en waarde. */
    .tokenlijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin: 0; padding: var(--ruimte-2) 0; list-style: none; }
    /* Kleuren: op de telefoon twee kolommen, compact; op de laptop zo veel als passen. */
    .tokenlijst.is-kleur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tokenlijst.is-kleur .token { align-items: flex-start; gap: var(--ruimte-2); padding: var(--ruimte-2) var(--ruimte-3); }
    .tokenlijst.is-kleur .token-staal { width: 28px; height: 28px; }
    .token-wanneer { margin-top: 2px; font: var(--rol-klein); color: var(--tekst); }
    .token { display: flex; align-items: center; gap: var(--ruimte-3); min-width: 0; min-height: var(--rij); padding: var(--ruimte-2) var(--ruimte-4); }
    .token-tekst { display: grid; min-width: 0; }
    .token-naam { font: var(--rol-klein); font-weight: 600; color: var(--tekst); overflow-wrap: anywhere; }
    .token-waarde { font: var(--rol-klein); color: var(--tekst-zacht); overflow-wrap: anywhere; }
    .token-staal { flex: none; width: 36px; height: 36px; border-radius: var(--hoek-veld); box-shadow: inset 0 0 0 1px var(--lijn-sterk); }
    .token-rol { flex: none; min-width: 36px; color: var(--tekst); }
    .token-hoek { flex: none; width: 36px; height: 36px; border-top: 3px solid var(--accent); border-left: 3px solid var(--accent); }
    .token-schaduw { flex: none; width: 48px; height: 36px; border-radius: var(--hoek-veld); background: var(--vlak-blad); }
    .token-maat { flex: none; display: flex; align-items: center; width: 64px; height: 36px; }
    .token-maat > span { height: 12px; border-radius: 2px; background: var(--grafiek-gepland); }
    .token-leeg { flex: none; display: grid; place-items: center; width: 36px; height: 36px; color: var(--tekst-zacht); }
    .token-leeg .icon { width: 20px; height: 20px; }

    @media (min-width: 721px) {
        .catalogus-wanneer, .catalogus-regels { grid-template-columns: 1fr 1fr; column-gap: var(--ruimte-6); }
        .catalogus-voorbeelden.is-naast { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
        .catalogus-puntknoppen { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
        .tokenlijst.is-breed { grid-template-columns: minmax(0, 1fr); }
        .tokenlijst.is-kleur { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
        .tokenlijst.is-kleur .token { gap: var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-4); }
        .tokenlijst.is-kleur .token-staal { width: 36px; height: 36px; }
    }

    @media (prefers-reduced-motion: reduce) {
        .taak-vink, .taak.is-net-afgerond .taak-vink.is-af, .besluit-geverifieerd.is-net .icon { transition: none; animation: none; }
        .taak.is-dicht { animation: none; display: none; }
        .opname-lamp.is-aan, .opnamebalk-lamp.is-aan { animation: none; }
    }
}

/* Leg vast op Vandaag (#16008): een balk als een invoerveld, die de invoerbalk opent. */
.vandaag-legvast { display: flex; align-items: center; gap: var(--ruimte-2); width: 100%; min-height: var(--raak); margin: 0 0 var(--ruimte-4); padding: 0 var(--ruimte-3); border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-veld); background: var(--vlak-blad); box-shadow: var(--schaduw-uitklap); font: var(--rol-tekst); color: var(--tekst-zacht); text-align: left; cursor: text; }
.vandaag-legvast:hover { border-color: var(--lijn-veld); color: var(--tekst); }
.vandaag-legvast .icon { width: 16px; height: 16px; flex: none; color: var(--accent); }
.vandaag-legvast span { flex: 1 1 auto; min-width: 0; }
.vandaag-legvast kbd { flex: none; min-width: 18px; padding: 0 var(--ruimte-1); border-bottom-width: 1.5px; font: var(--rol-label); color: var(--tekst-zacht); }
/* Zoeken vindt alles (#16004): één stille regel boven de lijst, zolang er een zoekterm staat. */
.zoekregel { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0 0 var(--ruimte-2); font: var(--rol-klein); color: var(--tekst-zacht); }
.zoekregel .icon { width: 14px; height: 14px; flex: none; }

@layer schermen {
    /* ══ De werkwijze (#15117, #15171, B-116): het overzicht, één projecttype en het concept, alleen voor een beheerder ══ */
    .werkwijze-antwoord { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); margin: 0; font: var(--rol-antwoord); color: var(--tekst); }
    .werkwijze-balk { display: flex; gap: 2px; max-width: 360px; height: 8px; margin-top: var(--ruimte-3); overflow: hidden; border-radius: var(--hoek-rond); }
    .werkwijze-balkdeel { flex: 1 1 0; background: var(--grafiek-leeg); }
    .werkwijze-balkdeel.is-vastgesteld { background: var(--goed); }
    .werkwijze-balkdeel.is-concept, .werkwijze-balkdeel.is-nieuw { background: var(--grafiek-gepland); }
    .werkwijze-balkdeel.is-vervallen { background: var(--vlak-actief); }

    .werkwijze-groep { margin-top: var(--tussen-groepen); }
    .werkwijze-groep > :is(.werkwijze-regels, .uitklapregels, .werkwijze-feiten, .werkwijze-velden, .werkwijze-nieuw, .wijzigingslijst, .werkwijze-logboek, .werkwijze-fasen, .werkwijze-leeg, .wijzigingslijst-leeg) {
        margin: 0; padding: var(--ruimte-2) var(--ruimte-4); border: var(--lijn-dikte) solid var(--lijn); border-top: 0; border-radius: 0 0 var(--hoek-veld) var(--hoek-veld); background: var(--vlak-blad);
    }
    .werkwijze-groep > .uitklapregels { padding-top: 0; padding-bottom: 0; }
    .werkwijze-groep > :is(.form-hint, .field, .btn) { margin-top: var(--ruimte-2); }
    .werkwijze-leeg { display: flex; align-items: center; gap: var(--ruimte-2); font: var(--rol-klein); color: var(--tekst-zacht); }
    .werkwijze-leeg .icon { width: 14px; height: 14px; }

    .werkwijze-regels { list-style: none; }
    .werkwijze-regel { display: flex; align-items: center; gap: var(--ruimte-3); min-height: var(--raak); padding: var(--ruimte-1) 0; border-bottom: var(--lijn-dikte) solid var(--lijn); color: var(--tekst); text-decoration: none; }
    .werkwijze-regels li:last-child .werkwijze-regel { border-bottom: 0; }
    .werkwijze-regel:hover { background: var(--vlak-hover); }
    .werkwijze-regel > .icon { width: 16px; height: 16px; flex: none; color: var(--accent); }
    .werkwijze-regel-tekst { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
    .werkwijze-regel-naam { font-weight: 500; }
    .werkwijze-regel-sub { font: var(--rol-klein); color: var(--tekst-zacht); }
    .werkwijze-regel-rechts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ruimte-1); }
    .werkwijze-regel .werkwijze-regel-pijl { width: 14px; height: 14px; flex: none; color: var(--tekst-zacht); }

    .werkwijze-nieuw { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ruimte-3); }
    .werkwijze-nieuw .field { flex: 1 1 200px; }

    .werkwijze-acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-3); margin-top: var(--ruimte-4); }
    .werkwijze-acties-meta { font: var(--rol-klein); color: var(--tekst-zacht); }
    .werkwijze-telefoonregel { display: flex; align-items: center; gap: var(--ruimte-2); margin: var(--ruimte-3) 0 0; font: var(--rol-klein); color: var(--tekst-zacht); }
    .werkwijze-telefoonregel .icon { width: 14px; height: 14px; }

    .werkwijze-feiten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px var(--ruimte-4); }
    .werkwijze-feiten dt { font: var(--rol-klein); color: var(--tekst-zacht); }
    .werkwijze-feiten dd { margin: 0 0 var(--ruimte-2); color: var(--tekst); overflow-wrap: anywhere; }
    .werkwijze-feiten dd.is-onbekend { color: var(--tekst-zacht); }
    .werkwijze-toelichting { margin: var(--ruimte-2) 0; font: var(--rol-klein); color: var(--tekst-sterk); }

    .werkwijze-logboek { display: grid; list-style: none; }
    .werkwijze-logboek li { display: grid; gap: 2px; padding: var(--ruimte-2) 0; border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .werkwijze-logboek li:last-child { border-bottom: 0; }
    .werkwijze-logboek-kop { font-weight: 500; }
    .werkwijze-logboek-meta, .werkwijze-logboek-wat summary { font: var(--rol-klein); color: var(--tekst-zacht); }
    .werkwijze-logboek-wat summary { cursor: pointer; }
    .werkwijze-logboek-regels { margin: var(--ruimte-1) 0 0; font: var(--rol-klein); color: var(--tekst-sterk); white-space: pre-line; overflow-wrap: anywhere; }

    /* Het concept: de samenhang bovenaan, dan het formulier per onderdeel, onderaan vaststellen en de vaste balk. */
    .werkwijze-samenhang-goed { display: flex; align-items: center; gap: var(--ruimte-2); margin: var(--ruimte-2) 0 0; color: var(--goed); font-weight: 500; }
    .werkwijze-samenhang-goed .icon { width: 16px; height: 16px; }
    .werkwijze-samenhang { display: grid; gap: var(--ruimte-1); margin: var(--ruimte-3) 0 0; padding: var(--ruimte-2) var(--ruimte-3); border: var(--lijn-dikte) solid var(--fout); border-radius: var(--hoek-veld); background: var(--fout-zacht); list-style: none; }
    .werkwijze-samenhang li { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ruimte-2); color: var(--tekst); }
    .werkwijze-samenhang li > .icon { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--fout); }
    .werkwijze-samenhang li > span { flex: 1 1 240px; min-width: 0; }
    .werkwijze-samenhang-link { color: var(--tekst-link); font: var(--rol-klein); font-weight: 500; text-decoration: none; }

    .werkwijze-velden { display: grid; gap: var(--ruimte-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .werkwijze-groep > .werkwijze-velden { padding-top: var(--ruimte-3); padding-bottom: var(--ruimte-3); }
    .werkwijze-velden :is(.field-wide, .werkwijze-vervalt) { grid-column: 1 / -1; }
    .werkwijze-fasen { display: grid; gap: var(--ruimte-3); list-style: none; }
    .werkwijze-fase { display: grid; gap: var(--ruimte-2); padding: var(--ruimte-3) 0; border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .werkwijze-fase:last-child { border-bottom: 0; }
    .werkwijze-fase.is-fout { padding-left: var(--ruimte-3); box-shadow: inset 3px 0 0 var(--fout); }
    .werkwijze-fase-kop { display: flex; align-items: center; gap: var(--ruimte-2); }
    .werkwijze-fase-nummer { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: var(--hoek-rond); background: var(--nadruk); color: var(--tekst-op-donker); font: var(--rol-label); }
    .werkwijze-fase-naam { flex: 1 1 auto; min-width: 0; font-weight: 600; }
    .werkwijze-knoppen { display: inline-flex; flex: none; gap: 2px; }
    .werkwijze-mijlpaal { display: grid; gap: var(--ruimte-2); padding: var(--ruimte-3); border: var(--lijn-dikte) solid var(--lijn); border-radius: var(--hoek-veld); background: var(--vlak-zacht); }
    .werkwijze-mijlpaal-kop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); font-weight: 500; }
    .werkwijze-mijlpaal-kop .icon { width: 14px; height: 14px; color: var(--accent); }
    .werkwijze-mijlpaal-kop .btn { margin-left: auto; }
    .werkwijze-voorwaarden { display: grid; gap: var(--ruimte-2); margin: 0; padding: 0; list-style: none; }
    .werkwijze-voorwaarde { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-1); padding: var(--ruimte-2); border: var(--lijn-dikte) solid var(--lijn); border-radius: var(--hoek-veld); background: var(--vlak-blad); }
    .werkwijze-voorwaarde-tekst { display: grid; gap: var(--ruimte-1); min-width: 0; }
    .werkwijze-voorwaarde-keuzes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-1); }
    .werkwijze-voorwaarde-keuzes .select { min-height: 32px; }

    .werkwijze-vaststellen .field { margin-top: var(--ruimte-2); }
    .werkwijze-bewaarbalk {
        position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2);
        margin-top: var(--ruimte-4); padding: var(--ruimte-3) 0; border-top: var(--lijn-dikte) solid var(--lijn); background: var(--vlak-blad);
    }
    .werkwijze-bewaarbalk-reden { font: var(--rol-klein); color: var(--tekst-zacht); }
    .werkwijze-weggooien { margin-left: auto; }

    @media (min-width: 721px) {
        .werkwijze-feiten { grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); }
        .werkwijze-feiten dd { margin-bottom: 0; }
        .werkwijze-voorwaarde { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
    }
}