/* 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, #16653): bovenaan wat er in de app-connector staat, de vraag, de connectors om te kiezen, en de
       velden per object. Mobile first: op de telefoon is elke rij een regel (veldnaam vet, het label, klein eronder type,
       lengte en verplicht), een genest object springt in; vanaf 721 px een tabel met kolommen. */
    .afasvelden-kop { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0 0 var(--ruimte-2); }
    .afasvelden-antwoord { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
    .afasvelden-antwoord small { font: var(--rol-klein); color: var(--tekst-zacht); }
    .afasvelden-antwoord.is-onbekend strong { color: var(--tekst-zacht); }
    .afasvelden-vraag { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ruimte-2); margin: var(--ruimte-2) 0 var(--ruimte-3); }
    .afasvelden-vraag .input { grid-column: 1 / -1; min-height: var(--raak); }
    .afasvelden-vraag .select, .afasvelden-vraag .btn { min-height: var(--raak); }
    .afasvelden-appconnector { display: grid; margin: 0 0 var(--ruimte-2); padding: 0; list-style: none; }
    .afasvelden-connectorregel { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--ruimte-2); width: 100%; min-height: var(--raak); padding: var(--ruimte-1) var(--ruimte-2); border: 0; border-bottom: var(--lijn-dikte) solid var(--lijn); background: none; color: var(--tekst); font: var(--rol-tekst); text-align: left; cursor: pointer; }
    .afasvelden-connectorregel:hover { background: var(--vlak-hover); }
    .afasvelden-connectornaam { font-weight: 600; overflow-wrap: anywhere; }
    .afasvelden-connectorregel small { flex-basis: 100%; font: var(--rol-klein); color: var(--tekst-zacht); }
    .afasvelden-teken { display: inline-block; padding: 0 var(--ruimte-1); border: var(--lijn-dikte) solid var(--lijn); border-radius: var(--hoek-groep); font: var(--rol-klein); color: var(--tekst-zacht); }
    .afasvelden-keuzes { display: flex; flex-wrap: wrap; gap: var(--ruimte-1); margin: 0 0 var(--ruimte-3); }
    .afasvelden-keuze { display: inline-flex; align-items: center; gap: var(--ruimte-1); min-height: var(--raak); 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-terug { margin: 0 0 var(--ruimte-2); min-height: var(--raak); }
    .afasvelden-uitkomst { margin: 0 0 var(--ruimte-2); overflow-wrap: anywhere; }
    .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-acties .btn { min-height: var(--raak); }
    .afasvelden-tabel, .afasvelden-tabel tbody, .afasvelden-tabel tr, .afasvelden-tabel th, .afasvelden-tabel td { display: block; }
    .afasvelden-tabel { width: 100%; font: var(--rol-tekst); }
    .afasvelden-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .afasvelden-groepkop th { display: flex; align-items: center; gap: var(--ruimte-1); min-height: var(--raak); padding: var(--ruimte-2) 0 var(--ruimte-1); border-top: var(--lijn-dikte) solid var(--lijn-sterk); font: var(--rol-kop); text-align: left; }
    .afasvelden-groepkop small { font: var(--rol-klein); color: var(--tekst-zacht); }
    .afasvelden-tabel tr.afasvelden-veld { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--ruimte-2); padding: var(--ruimte-1) 0; border-top: var(--lijn-dikte) solid var(--lijn); }
    .afasvelden-veld .afasvelden-id { grid-column: 1; overflow-wrap: anywhere; }
    .afasvelden-veld .afasvelden-id code { font-weight: 600; }
    .afasvelden-veld .afasvelden-id .afasvelden-teken { margin-left: var(--ruimte-1); }
    .afasvelden-veld .afasvelden-label { grid-column: 1; overflow-wrap: anywhere; }
    .afasvelden-kenmerken { display: block; font: var(--rol-klein); color: var(--tekst-zacht); }
    .afasvelden-veld .afasvelden-kolom { display: none; }
    .afasvelden-veld .afasvelden-grip { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .afasvelden-grip .icon, .afasvelden-groepkop .icon, .afasvelden-ontbrekend .icon { width: 16px; height: 16px; flex: none; }
    .afasvelden-groep.is-diepte-1 { margin-left: var(--ruimte-3); }
    .afasvelden-groep.is-diepte-2 { margin-left: calc(var(--ruimte-3) * 2); }
    .afasvelden-groep.is-diepte-3 { margin-left: calc(var(--ruimte-3) * 3); }
    @media (min-width: 721px) {
        .afasvelden-vraag { grid-template-columns: minmax(0, 1fr) auto auto; }
        .afasvelden-vraag .input { grid-column: auto; }
        .afasvelden-vraag .input, .afasvelden-vraag .select, .afasvelden-vraag .btn, .afasvelden-keuze, .afasvelden-terug, .afasvelden-acties .btn { min-height: 32px; }
        .afasvelden-connectorregel { min-height: 32px; }
        .afasvelden-tabel { display: table; border-collapse: collapse; font: var(--rol-klein); }
        .afasvelden-tabel thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: table-header-group; }
        .afasvelden-tabel tbody { display: table-row-group; }
        .afasvelden-tabel tr, .afasvelden-tabel tr.afasvelden-veld { display: table-row; }
        .afasvelden-tabel th, .afasvelden-tabel td, .afasvelden-veld .afasvelden-kolom { display: table-cell; 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-veld .afasvelden-id code { font-weight: 400; }
        .afasvelden-veld.is-gelezen .afasvelden-id code { font-weight: 600; }
        .afasvelden-kenmerken { display: none; }
        .afasvelden-groepkop th { display: table-cell; font: var(--rol-kop); }
        .afasvelden-groepkop th .icon { vertical-align: -3px; }
        .afasvelden-groep, .afasvelden-groep.is-diepte-1, .afasvelden-groep.is-diepte-2, .afasvelden-groep.is-diepte-3 { margin-left: 0; }
        .afasvelden-groep.is-diepte-1 :is(.afasvelden-id, .afasvelden-groepkop th) { padding-left: calc(var(--ruimte-2) + var(--ruimte-3)); }
        .afasvelden-groep.is-diepte-2 :is(.afasvelden-id, .afasvelden-groepkop th) { padding-left: calc(var(--ruimte-2) + var(--ruimte-3) * 2); }
        .afasvelden-groep.is-diepte-3 :is(.afasvelden-id, .afasvelden-groepkop th) { padding-left: calc(var(--ruimte-2) + var(--ruimte-3) * 3); }
    }

    /* 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); }
    /* Per fase de voorcalculatie (#15161, #16704): de naam is de uitklapknop, ernaast geboekt tegenover begroot en de uren. */
    .urenperfase-balk { display: flex; height: 8px; overflow: hidden; border-radius: 4px; background: var(--grafiek-rest); }
    .urenperfase-balk > i { display: block; height: 100%; background: var(--grafiek-geboekt); }
    .urenperfase-balk > i.is-over { background: var(--grafiek-over); }
    .urenperfase-balk.is-onbekend { box-sizing: border-box; border: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); background: none; }
    .deliverablefase-kop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 280px) 112px; align-items: center; gap: var(--ruimte-3); padding-right: var(--ruimte-4); }
    .deliverablefase-knop { grid-template-columns: auto minmax(0, 1fr); padding-right: 0; }
    .deliverablelijst { gap: 0; margin-top: 0; padding-block: var(--ruimte-1); list-style: none; }
    .deliverablerij {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "naam uren" "signaal signaal" "wijziging wijziging";
        align-items: center; gap: 2px var(--ruimte-3); min-height: var(--rij); padding: var(--ruimte-1) 0; border-bottom: var(--lijn-dikte) solid var(--lijn);
    }
    .deliverablerij:last-child { border-bottom: 0; }
    .deliverablerij-stand { grid-area: stand; display: flex; align-items: center; }
    .deliverablerij-stand > .icon { width: 16px; height: 16px; margin-left: var(--ruimte-2); color: var(--tekst-zacht); }
    .deliverablerij-naam { grid-area: naam; min-width: 0; overflow-wrap: anywhere; }
    .deliverablerij-uren { grid-area: uren; color: var(--tekst-sterk); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .deliverablerij-signaal { grid-area: signaal; display: flex; align-items: center; gap: var(--ruimte-1); font: var(--rol-klein); color: var(--let-op); }
    .deliverablerij-wijziging { grid-area: wijziging; display: flex; align-items: center; gap: var(--ruimte-1); font: var(--rol-klein); color: var(--tekst-zacht); }
    :is(.deliverablerij-signaal, .deliverablerij-wijziging) .icon { flex: none; width: 14px; height: 14px; }
    .deliverablerij.is-over .deliverablerij-uren { color: var(--let-op); }
    .deliverablerij.is-niet-toegewezen .deliverablerij-naam { color: var(--tekst-zacht); }
    .deliverablerij.is-leeg { display: block; color: var(--tekst-zacht); }

    /* 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; }
    /* Het vaste mailadres in de lege Inbox (#15182): de zin mag doorlopen, de knop blijft ernaast of eronder. */
    .wacht-mailadres { flex-wrap: wrap; padding-top: 0; }
    .wacht-mailadres strong { color: var(--tekst); font-weight: 500; }
    .wachtdetail { display: grid; gap: var(--ruimte-4); max-width: 960px; }
    .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: var(--inhoud); }
    /* De voet plakt onderaan het venster (Arne, 29 okt): bij een lange mail of lange lijst blijft Klaar met verwerken in beeld,
       de rest scrolt erachterlangs. Op de telefoon boven de onderbalk. De balk Neem over zweeft daarboven. */
    .update-pagina-voet {
        position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--ruimte-2);
        padding: var(--ruimte-3) 0; border-top: var(--lijn-dikte) solid var(--lijn); background: var(--vlak-blad);
    }
    .update-pagina .neemover-balk { bottom: calc(var(--raak) + var(--ruimte-6) + var(--ruimte-2)); }
    .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); }
    /* Het vermoeden van GRIP (Arne, 29 okt): het waarschijnlijkste project met de reden en één klik om het te kiezen. */
    .updateproject-vermoeden { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); color: var(--tekst-sterk); font: var(--rol-klein); }
    /* 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; }

    /* ── Een mail in de Inbox (#16720): de mailwisseling als berichten op een lijn, het nieuwste bovenaan. ── */
    .mailwisseling { display: flex; flex-direction: column; gap: var(--ruimte-3); }
    /* De bijlagen van de mail (#15182): één regel per bijlage met een vinkje; wat GRIP niet leest, staat uit met de reden. */
    .mailbijlagen { display: grid; gap: var(--ruimte-1); margin-top: var(--ruimte-4); }
    .mailbijlagen-kop { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0; font: var(--rol-label); color: var(--tekst); }
    .mailbijlagen-kop .icon { width: 16px; height: 16px; color: var(--tekst-zacht); }
    .mailbijlagen-kop span { font-weight: 400; color: var(--tekst-zacht); }
    .mailbijlagen-lijst { display: grid; margin: 0; padding: 0; border-radius: var(--hoek-uitklap); background: var(--vlak-zacht); list-style: none; }
    .mailbijlagen-lijst > li + li { border-top: var(--lijn-dikte) solid var(--lijn); }
    .mailbijlage { display: grid; grid-template-columns: auto 16px minmax(0, 1fr); align-items: center; gap: 2px var(--ruimte-2); min-height: var(--raak); padding: var(--ruimte-1) var(--ruimte-3); cursor: pointer; }
    .mailbijlage input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
    .mailbijlage .icon { width: 16px; height: 16px; color: var(--tekst-zacht); }
    .mailbijlage-naam { overflow-wrap: anywhere; color: var(--tekst); }
    .mailbijlage small { grid-column: 3; font: var(--rol-bijzaak); color: var(--tekst-zacht); }
    .mailbijlage.is-uit { cursor: not-allowed; }
    .mailbijlage.is-uit .mailbijlage-naam { color: var(--tekst-zacht); }
    .mailbijlagen-opnieuw { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); margin: 0; font: var(--rol-klein); color: var(--tekst-zacht); }
    .mailbijlagen-opnieuw > .icon { width: 16px; height: 16px; }
    .mailwisseling-antwoord { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0; font: var(--rol-klein); color: var(--tekst-zacht); }
    .mailwisseling-antwoord .icon { width: 16px; height: 16px; }
    .mailberichten { position: relative; display: flex; flex-direction: column; gap: var(--ruimte-4); margin: 0; padding: 0 0 0 22px; list-style: none; }
    /* De lijn van de wisseling: van het nieuwste bericht naar het eerste. */
    .mailberichten::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 6px; width: 2px; border-radius: 1px; background: var(--lijn-sterk); }
    .mailbericht { position: relative; display: flex; flex-direction: column; gap: var(--ruimte-2); padding: var(--ruimte-3); border: var(--lijn-dikte) solid var(--lijn); border-radius: var(--hoek-groep); background: var(--vlak-blad); }
    .mailbericht::before { content: ""; position: absolute; top: 18px; left: -21px; width: 10px; height: 10px; border: 2px solid var(--lijn-sterk); border-radius: 50%; background: var(--vlak-blad); }
    .mailbericht.is-nieuwste { border-color: var(--lijn-sterk); }
    .mailbericht.is-nieuwste::before { border-color: var(--accent); background: var(--accent); }
    .mailbericht-kop { display: flex; align-items: flex-start; gap: var(--ruimte-2); }
    .mailbericht-wie { min-width: 0; }
    .mailbericht-van { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--ruimte-2); margin: 0; font-weight: 500; }
    .mailbericht-adres, .mailbericht-meta { font: var(--rol-klein); font-weight: 400; color: var(--tekst-zacht); overflow-wrap: anywhere; }
    .mailbericht-meta { margin: 2px 0 0; }
    .mailbericht-onderwerp { margin: 0; font-weight: 500; }
    .mailbericht-tekst .update-tekst { white-space: pre-line; overflow-wrap: anywhere; }
    /* Een korte alinea (Hoi Arne,) houdt de hoogte van zijn knop, zodat twee ＋ nooit over elkaar vallen. */
    .mailbericht-tekst.heeft-plus .transcriptie-fragment { min-height: var(--raak); }
    .mailpersoon .btn { flex: none; white-space: nowrap; }
    .mailbericht-handtekening summary { font: var(--rol-klein); color: var(--tekst-zacht); cursor: pointer; }
    .mailbericht-handtekening .update-tekst { margin: var(--ruimte-1) 0 0; font: var(--rol-klein); color: var(--tekst-zacht); white-space: pre-line; overflow-wrap: anywhere; }
    .mailpersonen-lijst { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: var(--lijn-dikte) solid var(--lijn); }
    .mailpersoon { display: flex; align-items: center; gap: var(--ruimte-2); min-height: var(--raak); padding: var(--ruimte-1) 0; border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .mailpersoon-soort { display: inline-flex; color: var(--tekst-zacht); }
    .mailpersoon-soort .icon { width: 16px; height: 16px; }
    .mailpersoon-tekst { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
    .mailpersoon-naam { font-weight: 500; }
    .mailpersoon-sub { font: var(--rol-klein); color: var(--tekst-zacht); overflow-wrap: anywhere; }
    .teamvoorstel { display: flex; align-items: center; gap: var(--ruimte-2); }
    .teamvoorstel .icon { width: 14px; height: 14px; }
    @media (max-width: 720px) {
        .mailpersoon-knoplang { display: none; }
    }
    .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(4, 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; }

    /* Teams-transcripten ophalen (#16641): het antwoord, dan per vergadering een regel met Haal op of het vinkje. */
    .teams-ophalen { display: grid; gap: var(--ruimte-3); }
    .teams-ophalen > .btn { justify-self: start; }
    .teams-antwoord { margin: 0; font-weight: 600; }
    .teams-zin { margin: 0; }
    .teams-zin.is-zacht { font: var(--rol-klein); color: var(--tekst-zacht); }
    .teams-lijst { margin: 0; padding: 0; list-style: none; border-top: var(--lijn-dikte) solid var(--lijn); }
    .teams-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); }
    .teams-regel > .icon { width: 16px; height: 16px; flex: none; color: var(--tekst-zacht); }
    .teams-regel-tekst { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
    .teams-regel-naam { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
    .teams-regel-sub { font: var(--rol-klein); color: var(--tekst-zacht); }
    .teams-regel > .btn { flex: none; white-space: nowrap; }
    .teams-klaar { display: inline-flex; flex: none; align-items: center; gap: var(--ruimte-1); font: var(--rol-klein); color: var(--goed); }
    .teams-klaar .icon { width: 14px; height: 14px; }
    /* Al in GRIP (#16719): stil grijs, geen groen; het is geen succes van nu. Zonder transcript en niet na te gaan: klein,
       niet na te gaan met de gestippelde stip van onbekend. */
    .teams-klaar.is-al { color: var(--tekst-zacht); }
    .teams-geen, .teams-onbekend { display: inline-flex; flex: none; align-items: center; gap: var(--ruimte-1); font: var(--rol-klein); color: var(--tekst-zacht); }
    .teams-lijst.is-zonder { border-top: 0; }
    /* De regel op Vandaag onder Inbox (#16719): het aantal, en klein eronder de meest recente over hooguit twee regels. */
    .teamsregel-tekst { display: grid; gap: 2px; min-width: 0; }
    .teamsregel-kop { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .teamsregel-sub { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font: var(--rol-klein); color: var(--tekst-zacht); }

    /* De koppelingen (#16639): het antwoord met een strook per koppeling, dan per koppeling een uitklapregel met de stappen. */
    .koppelingen-antwoord { margin: 0; font: var(--rol-antwoord); color: var(--tekst); }
    .koppelingen-balk { display: flex; gap: 2px; max-width: 360px; height: 8px; margin-top: var(--ruimte-3); overflow: hidden; border-radius: var(--hoek-rond); }
    .koppelingen-balkdeel { flex: 1 1 0; background: var(--grafiek-leeg); }
    .koppelingen-balkdeel.is-werkt { background: var(--goed); }
    .koppelingen-balkdeel.is-onbekend { background: none; border: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); }
    .koppelingen-groep + .koppelingen-groep { margin-top: var(--ruimte-6); }
    .koppelingen-zin { margin: 0 0 var(--ruimte-2); }
    .koppelingen-zin.is-zacht { font: var(--rol-klein); color: var(--tekst-zacht); }
    .koppelingen-stappen { display: grid; gap: var(--ruimte-1); margin: 0 0 var(--ruimte-3); padding-left: var(--ruimte-6); }
    .uitklapregels.is-binnenkort .uitklapregel-kop { color: var(--tekst-zacht); }

    .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-vink { display: inline-flex; align-items: center; gap: var(--ruimte-1); min-height: var(--raak); font: var(--rol-klein); color: var(--tekst-zacht); }

    .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; }
    }

    /* ══ De tab Scope (#16704, Drieluik 37 A): het antwoord, dan de werkpakketten als rijen met sales · intake · nu. Een
       rij klapt uit met de deliverables in de regel (naam, gewicht, werkpakket, stand). Op de telefoon één kolom. ══ */
    .scopepaneel { display: grid; gap: var(--ruimte-4); }
    .scope-antwoord { display: grid; gap: var(--ruimte-3); max-width: 960px; }
    .scope-zin { margin: 0; font: var(--rol-antwoord); color: var(--tekst); }
    .scope-voet { display: flex; align-items: center; gap: var(--ruimte-1); margin: 0; font: var(--rol-klein); color: var(--tekst-zacht); }
    .scope-voet .icon { width: 14px; height: 14px; color: var(--let-op); }
    :is(.scope-filter, .scope-kolomkeuze) { display: inline-flex; gap: 2px; justify-self: start; padding: 2px; border-radius: var(--hoek-rond); background: var(--vlak-hover); }
    :is(.scope-filter, .scope-kolomkeuze) button { min-height: 32px; padding: 0 var(--ruimte-3); border: 0; border-radius: var(--hoek-rond); background: none; color: var(--tekst-zacht); font-weight: 500; cursor: pointer; }
    :is(.scope-filter, .scope-kolomkeuze) button.is-actief { background: var(--vlak-blad); color: var(--tekst); box-shadow: var(--schaduw-uitklap); }
    .scope-kolomkeuze-teller { color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }
    .scopetabel { display: grid; overflow: hidden; border-radius: var(--hoek-groep); background: var(--vlak-blad); box-shadow: var(--schaduw-groep); }
    :is(.scopetabel-kop, .scopetabel-rij, .scopetabel-totaal) { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) 96px; align-items: center; column-gap: var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-4); border-top: var(--lijn-dikte) solid var(--lijn); }
    .scopetabel-kop { align-items: start; border-top: 0; background: var(--vlak-zacht); }
    .scopetabel-totaal { font-weight: 600; background: var(--vlak-zacht); }
    .is-getal { text-align: right; }
    .scopekolom { display: grid; justify-items: start; gap: 2px; }
    .scopekolom b { font: var(--rol-kop); color: var(--tekst); }
    .scopekolom small { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-1); min-width: 0; font: var(--rol-klein); color: var(--tekst-zacht); overflow-wrap: anywhere; }
    .scope-balk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); }
    .scope-balk > .scope-filter { margin-right: auto; }
    .scopekolom .btn { margin-top: var(--ruimte-1); }
    .scopetabel-knop { display: flex; align-items: center; gap: var(--ruimte-2); min-height: var(--rij); padding: 0; border: 0; background: none; color: var(--tekst); font-weight: 500; text-align: left; cursor: pointer; }
    .scopetabel-knop > span { min-width: 0; overflow-wrap: anywhere; }
    :is(.scopetabel-rij, .scopetelrij).is-open .uitklap-pijl { transform: rotate(90deg); }
    .scopetabel-cel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-1) var(--ruimte-2); }
    .scopetabel-uren { font-weight: 600; font-variant-numeric: tabular-nums; }
    .scopetabel-cel.is-weg .scopetabel-uren { font-weight: 400; color: var(--tekst-zacht); }
    .scopetabel-klaar { display: grid; justify-items: end; gap: var(--ruimte-1); font-variant-numeric: tabular-nums; }
    .scopetabel-balkje { display: block; width: 64px; height: 6px; overflow: hidden; border-radius: 3px; background: var(--grafiek-leeg); }
    .scopetabel-balkje > i { display: block; height: 100%; background: var(--goed); }
    .scopetabel-inhoud { grid-column: 1 / -1; display: grid; gap: var(--ruimte-3); margin: var(--ruimte-2) calc(-1 * var(--ruimte-4)) calc(-1 * var(--ruimte-2)); padding: var(--ruimte-3) var(--ruimte-4); background: var(--vlak-zacht); }
    .scopewerkpakket { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2) var(--ruimte-4); }
    .scope-eigenaar { display: inline-flex; align-items: center; gap: var(--ruimte-2); font: var(--rol-klein); color: var(--tekst-zacht); }
    .scope-invoer.is-naam { flex: 1 1 200px; width: 100%; min-width: 0; }
    .scope-invoer.is-gewicht { width: 72px; text-align: right; }
    .scope-invoer.is-onbekend { border-style: dashed; border-color: var(--lijn-onbekend); }
    .scope-gewicht { display: inline-flex; align-items: center; gap: var(--ruimte-1); color: var(--tekst-zacht); }
    .scope-werkpakketkeuze { width: 100%; max-width: 160px; }
    .scopedeliverables { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
    .scopedeliverable { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--ruimte-2) var(--ruimte-3); min-height: var(--rij); padding: var(--ruimte-1) 0; border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .scopedeliverable:last-child { border-bottom: 0; }
    .scopedeliverable:is(.is-weg, .is-leeg) { color: var(--tekst-zacht); }
    .scopedeliverable-velden { display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(0, 160px); align-items: center; gap: 2px var(--ruimte-2); min-width: 0; }
    .scopedeliverable-velden > .scopebron { grid-column: 1 / -1; }
    .scopedeliverable.is-weg .scopedeliverable-velden { display: flex; flex-wrap: wrap; }
    /* Rustig lezen (#16722): de rij is tekst, bewerken pas na een klik op de naam of het potlood. */
    /* De stand krijgt een vaste kolom, zodat de uren onder elkaar staan, hoe breed de pil ook is. */
    .scopedeliverable.is-lezen { grid-template-columns: minmax(0, 1fr) minmax(0, 13rem) auto; }
    .scopedeliverable.is-lezen .scopedeliverable-velden { grid-template-columns: minmax(0, 1fr) 5em; }
    .scopedeliverable.is-lezen .scopedeliverable-stand { justify-content: flex-end; }
    .scopedeliverable-naam { min-width: 0; padding: 0; border: 0; background: none; color: var(--tekst); font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
    .scopedeliverable-naam:hover:not(:disabled) { text-decoration: underline; text-decoration-color: var(--lijn-sterk); text-underline-offset: 3px; }
    .scopedeliverable-naam:disabled { cursor: default; }
    .scopedeliverable-uren { text-align: right; font-variant-numeric: tabular-nums; color: var(--tekst-sterk); }
    .scopedeliverable-uren.is-onbekend { color: var(--tekst-zacht); }
    .scopedeliverable.is-lezen .scopedeliverable-weg .btn-icoon { color: var(--tekst-zacht); }
    .scopedeliverable.is-bewerken { background: var(--vlak-zacht); border-radius: var(--hoek-veld); padding-inline: var(--ruimte-2); }
    .scopewerkpakket.is-lezen { justify-content: space-between; color: var(--tekst-zacht); font: var(--rol-klein); }
    :is(.scopewerkpakket, .scopedeliverable) :is(.input, .select) { min-height: 32px; padding-block: 0; }
    .scopewerkpakket .scope-invoer.is-naam { max-width: 360px; }
    .scopedeliverable-stand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); }
    .scopeweg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); }
    .scopebron { margin: 0; font: var(--rol-klein); color: var(--tekst-zacht); }
    .scopebronnen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ruimte-3); margin: 0; }
    .scopebronnen > div { padding: var(--ruimte-2) var(--ruimte-3); border-radius: var(--hoek-uitklap); background: var(--vlak-blad); }
    .scopebronnen dt { font: var(--rol-label); color: var(--tekst-zacht); }
    .scopebronnen dd { margin: 0; font: var(--rol-klein); color: var(--tekst-sterk); }
    .scopetoevoeg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); padding: var(--ruimte-3) var(--ruimte-4); border: var(--lijn-dikte) dashed var(--lijn-sterk); border-radius: var(--hoek-groep); background: var(--vlak-blad); }
    .scopetoevoeg > .icon { width: 16px; height: 16px; color: var(--tekst-zacht); }
    .scopetoevoeg-tekst { flex: 1 1 260px; min-width: 0; }
    .scopetoevoeg-wp { flex: 0 1 200px; min-width: 0; }
    .scopetoevoeg-keuze { display: inline-flex; align-items: center; gap: var(--ruimte-1); min-width: 0; font: var(--rol-klein); color: var(--tekst-zacht); }
    .scopetoevoeg-keuze .select { max-width: 200px; }
    .scopetoevoeg-reden { flex: 1 1 260px; min-width: 0; }
    /* Na de intakescope (#16706): een wijziging in de regel wacht hier op de scopewijziging. */
    .scopewacht { display: grid; grid-column: 1 / -1; gap: var(--ruimte-2); padding: var(--ruimte-2) var(--ruimte-3); border-radius: var(--hoek-uitklap); background: var(--vlak-zacht); }
    .scopewacht-zin { display: flex; align-items: flex-start; gap: var(--ruimte-2); margin: 0; font: var(--rol-klein); color: var(--tekst); }
    .scopewacht-zin > .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--tekst-zacht); }
    .scopewacht-zin b { font-weight: 600; margin-right: var(--ruimte-1); }
    .scope-leeg { border-radius: var(--hoek-groep); background: var(--vlak-blad); box-shadow: var(--schaduw-groep); }
    /* Telefoon (IsTelefoon): één kolom tegelijk, de werkpakketten als regels van minstens 44 px. */
    .scopepaneel.is-telefoon .scope-kolomkeuze { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-self: stretch; }
    .scopepaneel.is-telefoon .scope-kolomkeuze button { min-height: var(--raak); }
    .scopepaneel.is-telefoon > .scopekolom { padding: 0 var(--ruimte-1); }
    .scope-lijst { display: grid; overflow: hidden; border-radius: var(--hoek-groep); background: var(--vlak-blad); box-shadow: var(--schaduw-groep); }
    .scopetelrij + .scopetelrij { border-top: var(--lijn-dikte) solid var(--lijn); }
    .scopetelrij-knop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 16px; align-items: center; gap: var(--ruimte-2); width: 100%; min-height: var(--raak); padding: var(--ruimte-2) var(--ruimte-3); border: 0; background: none; color: var(--tekst); text-align: left; cursor: pointer; }
    .scopetelrij-naam { display: grid; min-width: 0; }
    .scopetelrij-naam b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
    .scopetelrij-naam b.is-weg { color: var(--tekst-zacht); text-decoration: line-through; }
    .scopetelrij-naam small { font: var(--rol-bijzaak); color: var(--tekst-zacht); }
    .scopetelrij-uren { display: grid; justify-items: end; gap: 2px; font-weight: 600; font-variant-numeric: tabular-nums; }
    .scopetelrij-inhoud { display: grid; gap: var(--ruimte-2); padding: var(--ruimte-2) var(--ruimte-3) var(--ruimte-3); background: var(--vlak-zacht); }
    .scopepaneel.is-telefoon .scopedeliverable { grid-template-columns: minmax(0, 1fr) auto; }
    .scopepaneel.is-telefoon .scopedeliverable-velden { grid-template-columns: minmax(0, 1fr) auto; }
    .scopepaneel.is-telefoon .scope-werkpakketkeuze { grid-column: 1 / -1; }
    .scopepaneel.is-telefoon :is(.scopewerkpakket, .scopedeliverable) :is(.input, .select) { min-height: var(--raak); }
    .scopepaneel.is-telefoon .scopedeliverable-stand { grid-column: 1; }
    .scopepaneel.is-telefoon .scopebronnen { grid-template-columns: minmax(0, 1fr); }
    .scopepaneel.is-telefoon .scope-werkpakketkeuze { max-width: 100%; }
    .scopepaneel.is-telefoon .scopetoevoeg { padding: var(--ruimte-3); }
    .scopepaneel.is-telefoon :is(.scopetoevoeg-tekst, .scopetoevoeg-wp, .scopetoevoeg-keuze, .scopetoevoeg-reden) { flex-basis: 100%; }
    .scopepaneel.is-telefoon .scopeweg .scopetoevoeg-keuze { flex-basis: 100%; }
    .scopepaneel.is-telefoon .scopeweg :is(.scopetoevoeg-keuze .select, .scopetoevoeg-reden) { flex: 1 1 auto; max-width: none; }
    .scopepaneel.is-telefoon .scopetoevoeg-keuze .select { flex: 1 1 auto; max-width: none; }
    .scopepaneel.is-telefoon :is(.btn, .select, .input) { min-height: var(--raak); }
    .scopepaneel.is-telefoon .scopebalk-rijen { grid-template-columns: 56px minmax(0, 1fr); }
    .scopepaneel.is-telefoon .scopebalk-waarde { grid-column: 2; margin-top: -6px; }

    /* == Rixsi op Scope (#16705, B-129): de knop, het voorstel in de vorm van het AI-voorstel, de bron per item en
       intrekken met een reden. Het teken van AI staat bij alles wat Rixsi voorstelde. == */
    .scope-rixsiknop { gap: var(--ruimte-1); }
    .scope-rixsiknop .aiteken, .scopebron.is-rixsi .aiteken { width: 14px; height: 14px; fill: currentColor; }
    .scope-balk-acties, .scope-leeg-acties { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); }
    .scope-leeg-acties { justify-content: center; }
    .scope-telrixsi { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
    .scopevoorstel { display: grid; gap: var(--ruimte-3); padding: var(--ruimte-4); border: var(--lijn-dikte) solid var(--accent); border-radius: var(--hoek-groep); background: var(--vlak-blad); box-shadow: var(--schaduw-groep); }
    .scopevoorstel-kop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); }
    .scopevoorstel-kop > .aiteken { width: 20px; height: 20px; flex: none; fill: var(--accent); }
    .scopevoorstel-titel { display: grid; flex: 1 1 240px; min-width: 0; }
    .scopevoorstel-titel b { font: var(--rol-kop); color: var(--tekst); }
    .scopevoorstel-titel small { font: var(--rol-klein); color: var(--tekst-zacht); overflow-wrap: anywhere; }
    .scopevoorstel-budget { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); margin: 0; font: var(--rol-tekst); color: var(--tekst-sterk); }
    .scopevoorstel-budget .icon, .scopevoorstel-voet .icon { width: 16px; height: 16px; flex: none; color: var(--tekst-zacht); }
    .scopevoorstel-voet { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0; font: var(--rol-klein); color: var(--tekst-zacht); }
    .scopevoorstel-werkpakket { margin: var(--ruimte-2) 0 0; font: var(--rol-label); color: var(--tekst-zacht); }
    .scopevoorstel-regels { display: grid; gap: var(--ruimte-2); margin: 0; padding: 0; list-style: none; }
    .scopevoorstel-invoer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); width: 100%; }
    .scopevoorstel-invoer .is-naam { flex: 1 1 220px; }
    .scopevoorstel-bron { gap: var(--ruimte-1); padding-left: 0; text-align: left; overflow-wrap: anywhere; }
    .scopevoorstel .neemover-balk { margin-bottom: 0; }
    .scopebron.is-rixsi { display: inline-flex; align-items: center; gap: var(--ruimte-1); justify-self: start; min-height: 0; padding: 0; color: var(--tekst-zacht); text-align: left; }
    .scopekolom-intrek { padding: 0; min-height: 0; }
    .scopeintrek { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); padding: var(--ruimte-3) var(--ruimte-4); border-radius: var(--hoek-groep); background: var(--vlak-blad); box-shadow: var(--schaduw-groep); }
    .scopeintrek-label { flex-basis: 100%; font: var(--rol-klein); font-weight: 500; color: var(--tekst-zacht); }
    .scopeintrek .input { flex: 1 1 280px; min-width: 0; }
    .scopeintrek-acties { display: inline-flex; flex-wrap: wrap; gap: var(--ruimte-2); }
    .scopepaneel.is-telefoon .scopevoorstel { padding: var(--ruimte-3); }
    /* Op de telefoon staat de onderbalk van de app er al; de balk met Neem over blijft onder de regels staan. */
    .scopepaneel.is-telefoon .scopevoorstel .neemover-balk { position: static; box-sizing: border-box; width: 100%; }
    .scopevoorstel, .scopevoorstel > *, .scopevoorstel-regels > li { min-width: 0; }

    /* ── Het voorstellogboek (#16708): Mijn voorstellen van Rixsi en het beheer. Het antwoord is een zin met de balk; elk
          voorstel een uitklapregel; per regel de afloop als chip, wat je anders overnam en de stand nu. ── */
    .voorstellog-antwoord { margin: 0 0 var(--ruimte-2); font: var(--rol-antwoord); color: var(--tekst); }
    .voorstellog-uitleg { margin: var(--ruimte-2) 0 0; }
    .voorstellog-groep {
        margin-top: var(--ruimte-6); padding: 0 0 var(--ruimte-2); border-radius: var(--hoek-groep); background: var(--vlak-blad); box-shadow: var(--schaduw-groep);
        min-width: 0;
    }
    .voorstellog-groep > .groepskop { margin: 0; }
    .voorstellog-groep .uitklapregel-kop { flex-wrap: wrap; row-gap: 2px; padding-block: 6px; }
    .voorstellog-groep .uitklapregel-naam { flex: 1 1 12rem; }
    .voorstellog-groep .uitklapregel-inhoud { padding: 2px var(--ruimte-3) var(--ruimte-3) var(--ruimte-8); }
    .voorstellog-groep .uitklapregel-inhoud .uitklapregel { margin-top: var(--ruimte-2); border-top: var(--lijn-dikte) solid var(--lijn); }
    .voorstellog-groep .uitklapregel-inhoud .uitklapregel-inhoud { padding-left: var(--ruimte-6); }
    .voorstellog-regels { display: grid; gap: var(--ruimte-2); margin: 0; padding: 0; list-style: none; }
    .voorstellog-regel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--ruimte-2); min-width: 0; }
    .voorstellog-regel > .badge { flex: none; }
    .voorstellog-tekst { display: flex; flex-wrap: wrap; gap: 0 6px; flex: 1 1 14rem; min-width: 0; font: var(--rol-tekst); color: var(--tekst); overflow-wrap: anywhere; }
    .voorstellog-soort { color: var(--tekst-zacht); }
    .voorstellog-wijzigingen, .voorstellog-stand { display: flex; flex-direction: column; flex-basis: 100%; font: var(--rol-klein); color: var(--tekst-zacht); overflow-wrap: anywhere; }
    .voorstellog-markeer { margin-left: auto; }
    .voorstellog-context {
        margin: 0; padding: var(--ruimte-2) var(--ruimte-3); max-height: 16rem; overflow: auto; border-radius: var(--hoek-uitklap); background: var(--vlak-zacht);
        font: var(--rol-klein); color: var(--tekst-sterk); white-space: pre-wrap; overflow-wrap: anywhere;
    }
    .voorstellog-bronnen { display: grid; gap: 2px; margin: var(--ruimte-2) 0 0; padding: 0; list-style: none; font: var(--rol-klein); color: var(--tekst-zacht); }
    .voorstellog-bronnen li { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
    .voorstellog-bronnen .icon { flex: none; width: 14px; height: 14px; }
    .voorstellog-hash { font-family: var(--letter-mono); }
    .voorstellog-acties { display: flex; justify-content: flex-end; margin-top: var(--ruimte-3); }
    .voorstellog-leeg { display: flex; align-items: flex-start; gap: var(--ruimte-2); padding: var(--ruimte-3) var(--ruimte-4); color: var(--tekst-zacht); }
    .voorstellog-leeg p { margin: 0; }
    .voorstellog-leeg .icon { flex: none; width: 20px; height: 20px; }
    /* Wat Rixsi onthoudt (#16709): per regel het slot, de tekst met eronder hoe en wanneer, en wissen rechts. */
    .geheugen-regels { display: grid; margin: 0; padding: 0; list-style: none; }
    .geheugen-regel {
        display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icoon tekst wis" "icoon meta wis"; align-items: center;
        gap: 2px var(--ruimte-2); padding: var(--ruimte-2) var(--ruimte-3) var(--ruimte-2) var(--ruimte-4); border-top: var(--lijn-dikte) solid var(--lijn);
    }
    .geheugen-icoon { grid-area: icoon; align-self: start; display: inline-flex; margin-top: 3px; color: var(--tekst-zacht); }
    .geheugen-icoon .icon { width: 16px; height: 16px; }
    .geheugen-tekst { grid-area: tekst; min-width: 0; font: var(--rol-tekst); color: var(--tekst); overflow-wrap: anywhere; }
    .geheugen-meta { grid-area: meta; font: var(--rol-klein); color: var(--tekst-zacht); }
    .geheugen-wis { grid-area: wis; }
    .geheugen-bevestig { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); margin: 0; padding: var(--ruimte-2) var(--ruimte-4); font: var(--rol-tekst); color: var(--tekst); }
    .voorstellog-analyses { display: grid; margin: 0; padding: 0; list-style: none; }
    .voorstellog-analyse {
        display: grid; grid-template-columns: minmax(0, 17rem) minmax(6rem, 1fr) auto; align-items: center; gap: var(--ruimte-2) var(--ruimte-4);
        padding: var(--ruimte-3) var(--ruimte-4); border-bottom: var(--lijn-dikte) solid var(--lijn);
    }
    .voorstellog-analysekop { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; }
    .voorstellog-analysekop .icon { flex: none; width: 16px; height: 16px; color: var(--tekst-zacht); }
    .voorstellog-analysenaam { font: var(--rol-tekst); font-weight: 500; }
    .voorstellog-cijfers { display: flex; flex-wrap: wrap; gap: 0 var(--ruimte-3); font: var(--rol-klein); color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }
    .voorstellog-velden { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--ruimte-2); grid-column: 1 / -1; font: var(--rol-klein); color: var(--tekst-zacht); }
    .voorstellog-voorbeeld { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--ruimte-3); margin: 0 0 var(--ruimte-2); font: var(--rol-klein); }
    .voorstellog-voorbeeld dt { color: var(--tekst-zacht); }
    .voorstellog-voorbeeld dd { margin: 0; overflow-wrap: anywhere; }
    .voorstellog-wissen { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ruimte-3); padding: var(--ruimte-3) var(--ruimte-4); }
    .voorstellog-wissen .field { flex: 1 1 12rem; min-width: 0; }
    .voorstellog-wissingen { display: grid; gap: 4px; margin: 0; padding: 0 var(--ruimte-4) var(--ruimte-2); list-style: none; font: var(--rol-klein); color: var(--tekst-zacht); }
    .voorstellog-wissingen li { display: flex; align-items: flex-start; gap: 6px; }
    .voorstellog-wissingen .icon { flex: none; width: 14px; height: 14px; margin-top: 1px; }
    /* ── Wat Rixsi niet kon beantwoorden (#16735): de balk per reden met de vorm van de afloopbalk. Paars wat GRIP mist
          (functie), blauw wat er niet in staat (gegevens), oranje waar iemand niet geholpen was, gestippeld een bron die er
          niet was (onbekend is niet nul), grijs buiten GRIP. Per groep de vragen zonder namen en de stand. ── */
    .vragenbalk { margin-top: var(--ruimte-2); }
    :is(.afloopstip, .afloopbalk-deel).vragenbalk-deel.is-functie { background: var(--accent); }
    :is(.afloopstip, .afloopbalk-deel).vragenbalk-deel.is-gegevens { background: var(--info); }
    :is(.afloopstip, .afloopbalk-deel).vragenbalk-deel.is-niet-geholpen { background: var(--let-op-stip); }
    :is(.afloopstip, .afloopbalk-deel).vragenbalk-deel.is-buiten { background: var(--tekst-uit); }
    .afloopbalk-deel.vragenbalk-deel.is-bron { background: repeating-linear-gradient(90deg, var(--lijn-onbekend) 0 2px, transparent 2px 4px); }
    .afloopstip.vragenbalk-deel.is-bron { background: none; border: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); }
    .vragengroep-voorbeelden { display: grid; gap: 4px; margin: 0 0 var(--ruimte-3); padding: 0; list-style: none; font: var(--rol-tekst); color: var(--tekst); }
    .vragengroep-voorbeelden li { display: flex; align-items: flex-start; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
    .vragengroep-voorbeelden .icon { flex: none; width: 14px; height: 14px; margin-top: 4px; color: var(--tekst-zacht); }
    .vragengroep-stand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); }
    .vragengroep-standnu { gap: 4px; }
    .vragengroep-standnu .icon { width: 12px; height: 12px; }
    .vragengroep-standnu.is-nieuw { border-color: var(--accent); color: var(--accent); }
    /* Het geheugen van Rixsi voor een beheerder (#16742): per collega de naam, hoeveel in hoeveel projecten, en wissen rechts
       in de foutkleur; de bevestiging komt op de regel zelf, over de hele breedte. */
    .geheugenbeheer-uitleg { margin: 0; padding: var(--ruimte-2) var(--ruimte-4) 0; }
    .geheugenbeheer-lijst { display: grid; margin: var(--ruimte-2) 0 0; padding: 0; list-style: none; }
    .geheugenbeheer-regel {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "naam wis" "meta wis" "bevestig bevestig"; align-items: center;
        gap: 2px var(--ruimte-2); padding: var(--ruimte-2) var(--ruimte-3) var(--ruimte-2) var(--ruimte-4); border-top: var(--lijn-dikte) solid var(--lijn);
    }
    .geheugenbeheer-naam { grid-area: naam; min-width: 0; font: var(--rol-tekst); font-weight: 500; color: var(--tekst); overflow-wrap: anywhere; }
    .geheugenbeheer-meta { grid-area: meta; font: var(--rol-klein); color: var(--tekst-zacht); }
    .geheugenbeheer-wis { grid-area: wis; color: var(--fout); }
    .geheugenbeheer-wis .icon { color: var(--fout); }
    .geheugenbeheer-bevestig { grid-area: bevestig; padding-inline: 0; }
    @media (max-width: 720px) {
        /* Op de telefoon de knop onder de naam, zodat de naam niet breekt; niet over de hele breedte. */
        .geheugenbeheer-uitleg { padding-inline: var(--ruimte-3); }
        .geheugenbeheer-regel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "naam" "meta" "wis" "bevestig"; padding-inline: var(--ruimte-3); }
        .geheugenbeheer-wis { justify-self: start; width: auto; margin-top: var(--ruimte-1); }
    }
    .vragengroep-nummer { width: 9rem; }
    @media (max-width: 720px) {
        .voorstellog-groep { margin-top: var(--ruimte-4); }
        .voorstellog-groep .uitklapregel-inhoud { padding-left: var(--ruimte-3); }
        .voorstellog-groep .uitklapregel-inhoud .uitklapregel-inhoud { padding-left: var(--ruimte-2); }
        .voorstellog-analyse { grid-template-columns: minmax(0, 1fr); padding-inline: var(--ruimte-3); }
        .voorstellog-markeer { margin-left: 0; }
        .voorstellog-wissen { padding-inline: var(--ruimte-3); }
        .voorstellog-wissen .btn { width: auto; }
    }
}

/* Lopende tekst houdt een leesbare regel op een breed scherm (#16721); tabellen en lijsten gebruiken de breedte wel. */
.update-tekst, .transcriptie-tekst { max-width: var(--regel); }
@layer schermen {
    /* ══ De intakescope (#16706, B-128): het verschil met de salesscope als antwoord, per regel sales · intake · nu ══ */
    .intakeknop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); }
    .intakeknop-reden { flex: 1 1 240px; min-width: 0; font: var(--rol-klein); color: var(--tekst-zacht); }
    .intakevoorstel-antwoord { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); }
    .intakevoorstel-zin { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2) var(--ruimte-3); font: var(--rol-tekst); color: var(--tekst-sterk); }
    .intakevoorstel-deel { display: inline-flex; align-items: center; gap: var(--ruimte-1); white-space: nowrap; }
    .intakevoorstel-deel b { font: var(--rol-kengetal); color: var(--tekst); }
    .intakevoorstel-groep { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); margin: var(--ruimte-2) 0 0; font: var(--rol-label); color: var(--tekst-sterk); }
    .intakevoorstel-groep small { font: var(--rol-klein); color: var(--tekst-zacht); }
    .intakekolommen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ruimte-1); width: 100%; max-width: 360px; }
    .intakekolom { display: grid; padding: var(--ruimte-1) var(--ruimte-2); border: var(--lijn-dikte) solid var(--lijn); border-radius: var(--hoek-klein); background: var(--vlak-zacht); }
    .intakekolom small { font: var(--rol-bijzaak); color: var(--tekst-zacht); }
    .intakekolom b { font: var(--rol-getal); color: var(--tekst); }
    .intakekolom.is-intake { border-color: var(--accent); background: var(--accent-zacht); }
    .intakekolom-teken { display: inline-grid; place-items: center; min-width: 20px; font: var(--rol-label); color: var(--tekst-zacht); }
    .intakevoorstel-gelijk { border-top: var(--lijn-dikte) solid var(--lijn); padding-top: var(--ruimte-2); }
    .intakevoorstel-gelijk summary { display: flex; align-items: center; gap: var(--ruimte-2); min-height: var(--raak); font: var(--rol-label); color: var(--tekst-sterk); cursor: pointer; list-style: none; }
    .intakevoorstel-gelijk summary::-webkit-details-marker { display: none; }
    .intakevoorstel-gelijk summary .uitklap-pijl { margin-left: auto; }
    .intakevoorstel-gelijk[open] summary .uitklap-pijl { transform: rotate(90deg); }
    .intakevoorstel-gelijk ul { display: grid; gap: var(--ruimte-1); margin: 0; padding: 0; list-style: none; }
    .intakevoorstel-gelijk li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-1) var(--ruimte-2); font: var(--rol-regel); color: var(--tekst); }
    .intakevoorstel-gelijknaam { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
    .intakevoorstel-gelijkuren { font: var(--rol-getal); color: var(--tekst-zacht); }
    .intakevoorstel-gelijk li small { font: var(--rol-klein); color: var(--tekst-uit); }
    .scopepaneel.is-telefoon .intakeknop .btn { flex: 0 1 auto; }
}