/* GRIP, laag componenten (B-079). Elk component staat in de catalogus (src/UI/Pages/Stijlpagina/Catalogus.cs, te zien op
   /stijl in Development) met wanneer je het wel en niet gebruikt. Alleen tokens; de letter per rol. */

@layer componenten {

    /* ══ Groep en regel (B-080, 22 B): een witte, afgeronde groep met een zachte schaduw op de getinte achtergrond.
       Binnen een groep scheidt een ingesprongen lijn de regels. De kop staat boven de groep, niet erin. Een groep in
       een groep wordt plat, zodat er geen kaartensoep ontstaat. ══ */
    :is(.groep, .todo-list, .panel-body, .uitklaplijst, .takenlijst, .table-wrap, .card, .planningsdag,
        .dossier-gegevens, .planningsweek, .netgedaan-lijst) {
        background: var(--vlak-blad); border-radius: var(--hoek-groep); box-shadow: var(--schaduw-groep);
    }
    :is(.groep, .panel-body, .modal-body, .dossier-gegevens, .card)
    :is(.groep, .todo-list, .uitklaplijst, .takenlijst, .table-wrap, .card) {
        box-shadow: none; border-radius: 0;
    }
    /* Een regel in een groep: de lijn erboven springt in tot de tekst; hover kleurt alleen het vlak. */
    :is(.todo-list > li, .uitklap, .taak, .zoek-uitkomsten > li) + :is(li, .uitklap, .taak, details) {
        background-image: linear-gradient(var(--lijn), var(--lijn));
        background-repeat: no-repeat; background-size: calc(100% - var(--ruimte-4)) 1px; background-position: right top;
    }

    /* ── Sectie: een kop boven de groep ── */
    .panel + .panel, .todo-card + .todo-card, .todo-card + .panel, .panel + .todo-card { margin-top: var(--tussen-groepen); }
    .panel-header, .todo-head, .sectie-kop {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ruimte-2) var(--ruimte-3);
        min-height: 36px; margin: 0 0 var(--ruimte-2); padding: 0 var(--ruimte-1);
    }
    .panel-title, .todo-title, .sectie-titel { flex: 1 1 auto; margin: 0; font: var(--rol-kop); color: var(--tekst); }
    .panel-header .badge, .todo-head .badge { min-height: 0; padding: 0; border: 0; background: none; color: var(--tekst-zacht); }
    .panel-body { padding: var(--ruimte-4); }
    /* Een losse uitlegzin boven een lijst is geen eigen groep: hij staat stil boven de groep. */
    .panel-body:has(> .form-hint:only-child) { padding: 0 var(--ruimte-1) var(--ruimte-2); background: none; box-shadow: none; }
    .panel-uitklap { display: flex; align-items: center; gap: var(--ruimte-2); width: 100%; min-height: var(--raak); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
    .panel-uitklap-titel { flex: 1 1 auto; min-width: 0; }
    .panel-uitklap[aria-expanded="true"] .uitklap-pijl { transform: rotate(90deg); }
    .sectie { margin-bottom: var(--tussen-groepen); }
    .sectie-uitleg { margin-top: var(--ruimte-2); font: var(--rol-klein); color: var(--tekst-zacht); }
    .sectie-link { display: inline-flex; align-items: center; min-height: var(--raak); color: var(--tekst-link); font-weight: 500; text-decoration: none; }
    .sectie-link:hover { text-decoration: underline; text-underline-offset: 2px; }
    /* een link in de kop van een groep breekt niet; de titel wijkt (#15732) */
    .sectie-kop > .sectie-link { flex: none; white-space: nowrap; }
    .card { padding: var(--ruimte-4); }
    .knoppen, .form-actions, .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); }
    .toolbar { gap: var(--ruimte-3); margin-bottom: var(--ruimte-4); }
    .ruimte-boven { margin-top: var(--ruimte-3); }
    .ruimte-onder { margin-bottom: var(--ruimte-3); }

    /* ══ Paginakop: waar je bent, de titel, één zin. Het antwoord komt erna (Scherm). ══ */
    .page-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ruimte-2) var(--ruimte-4); margin-bottom: var(--ruimte-4); }
    .page-header-text { flex: 1 1 18rem; min-width: 0; }
    .page-eyebrow { margin-bottom: 2px; font: var(--rol-klein); color: var(--tekst-zacht); }
    .page-eyebrow a { color: inherit; text-decoration: none; }
    .page-eyebrow a:hover { color: var(--tekst-link); text-decoration: underline; }
    .page-title { margin: 0; font: var(--rol-titel); color: var(--tekst); }
    .page-title-rij { display: flex; align-items: center; gap: var(--ruimte-1); min-width: 0; }
    .page-title-rij .page-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .page-subtitle { margin-top: 2px; max-width: 72ch; font: var(--rol-klein); color: var(--tekst-zacht); }
    .page-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); }
    .page-terug, .page-meta { display: none; }

    /* ══ Het antwoord (Scherm, B-077): één zin of één beeld bovenaan. Geen kaart meer (B-097, #15817): de zin staat
       op het werkblad, zoals de kop in het referentiebeeld. ══ */
    .antwoord, .briefing { margin-bottom: var(--tussen-groepen); }
    .antwoord-zin, .briefing-zin { margin: 0; font: var(--rol-antwoord); color: var(--tekst); text-wrap: balance; }
    .antwoord-rust, .briefing-rust { margin-top: var(--ruimte-1); font: var(--rol-klein); color: var(--tekst-zacht); }
    .briefing-rust.is-onbekend { padding-left: var(--ruimte-2); border-left: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); }
    .scherm-details { margin-top: var(--tussen-groepen); }

    /* ══ Knop (B-097, #15817), zoals Linear, in vier varianten:
       - hoofd (btn-accent): paars met witte tekst en een zweem diepte, 32 px; de ene volgende stap, hooguit één per scherm;
       - stil (btn-secondary): wit met een lijn, 28 px, donkergrijze tekst; elke tweede actie;
       - link (btn-link): zonder rand, grijs, een grijs vlak bij hover; iets wat kan maar niet de volgende stap is;
       - icoon (btn-icoon): een vierkant van 28 px met alleen een icoon en een toegankelijke naam.
       Werkwoord plus object met →; uitgeschakeld met de reden als title. Op de telefoon minstens 44 px. ══ */
    .btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        min-height: 28px; padding: 0 10px; border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-veld);
        background: var(--actie-tweede); color: var(--actie-tweede-tekst); font: var(--rol-tekst); font-weight: 500;
        white-space: nowrap; text-decoration: none; cursor: pointer;
        transition: background-color var(--duur-kort) var(--beweging-standaard), border-color var(--duur-kort) var(--beweging-standaard);
    }
    .btn .icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--tekst-zacht); }
    .btn:hover { background: var(--actie-tweede-hover); }
    .btn-sm { min-height: 28px; padding: 0 var(--ruimte-2); }
    .btn-secondary { background: var(--actie-tweede); color: var(--actie-tweede-tekst); }
    /* De ene volgende stap van het scherm. Hooguit één per scherm, buiten vensters (stijltest). */
    .btn-accent {
        min-height: 32px; padding: 0 14px; border-color: transparent; border-radius: 7px;
        background: var(--actie-hoofd); color: var(--actie-hoofd-tekst); box-shadow: var(--schaduw-knop);
    }
    .btn-accent:hover { background: var(--actie-hoofd-hover); }
    .btn-accent .icon { color: currentColor; }
    .btn-accent kbd { min-width: 18px; border-color: transparent; background: var(--accent-zacht); color: var(--tekst); }
    .btn-danger { border-color: transparent; background: var(--fout); color: var(--tekst-op-donker); }
    .btn-danger:hover { background: var(--fout); filter: brightness(1.08); }
    /* Een actie die nu niet kan, blijft zichtbaar; de reden staat in de title (kernuitgangspunt 5). */
    .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
    /* De link: zonder rand, grijs, een grijs vlak bij hover; met een pijl of icoon erachter. */
    .btn-link {
        min-height: 28px; padding: 0 var(--ruimte-2); border-color: transparent; background: none;
        color: var(--tekst-sterk); font: var(--rol-tekst); font-weight: 500;
    }
    .btn-link:hover { background: var(--vlak-hover); color: var(--tekst); }
    .btn-link:disabled { background: none; color: var(--tekst-uit); }
    /* Alleen een icoon: de naam staat in aria-label en title. */
    .btn-icoon { width: 28px; min-width: 28px; padding: 0; border-color: transparent; background: none; color: var(--tekst-zacht); }
    .btn-icoon:hover { background: var(--vlak-hover); color: var(--tekst); }
    .btn-icoon .icon { width: 16px; height: 16px; color: currentColor; }
    .knop-icoon .icon { display: none; }
    @media (pointer: coarse) {
        .btn, .sidebar-item { min-height: var(--raak); }
        .btn-icoon { width: var(--raak); }
    }

    /* ══ Chip (badge, B-097, #15817): een woord in een pil van 22 px, wit met een lijn; een status krijgt een stip van
       6 px in de statuskleur, nooit een gekleurd vlak. Onbekend is gestippeld. ══ */
    .badges { display: flex; flex-wrap: wrap; gap: var(--ruimte-1); }
    .badge {
        display: inline-flex; align-items: center; gap: 5px; min-height: 22px;
        padding: 0 var(--ruimte-2); border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-rond);
        background: var(--vlak-blad); color: var(--tekst-sterk); font: var(--rol-label); white-space: nowrap;
    }
    .badge-success::before, .badge-warning::before, .badge-danger::before, .badge-info::before, .badge-dot::before {
        content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--tekst-uit);
    }
    .badge-success::before { background: var(--goed); }
    .badge-warning::before { background: var(--let-op-stip); }
    .badge-danger::before { background: var(--fout); }
    .badge-info::before { background: var(--tekst-zacht); }
    /* Onbekend is niet nul: gestippeld, nooit groen. */
    .badge-muted { border-style: dashed; border-color: var(--lijn-onbekend); color: var(--tekst-zacht); }

    /* ══ De stand (B-097, #15817): een stip van 8 px in de statuskleur, Aandacht met de lichtere stip; onbekend gestippeld,
       nooit groen. Als pil (Statuspil) wit met een lijn, stip en woord; in een regel (Standlabel) alleen stip en woord. ══ */
    .statusstip { flex: none; display: inline-block; box-sizing: border-box; width: 8px; height: 8px; border-radius: 50%; background: var(--lijn-onbekend); }
    .statusstip.is-groen { background: var(--goed); }
    .statusstip.is-oranje { background: var(--let-op-stip); }
    .statusstip.is-rood { background: var(--fout); }
    .statusstip.is-onbekend { background: none; border: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); }
    .statuspil {
        display: inline-flex; flex: none; align-items: center; gap: 6px; height: 22px; padding: 0 var(--ruimte-2);
        border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-rond); background: var(--vlak-blad);
        font: var(--rol-label); color: var(--tekst-sterk); white-space: nowrap;
    }
    .statuspil.is-onbekend { border-style: dashed; border-color: var(--lijn-onbekend); color: var(--tekst-zacht); }
    .standlabels { display: flex; flex-wrap: wrap; gap: var(--ruimte-1) var(--ruimte-3); }
    .standlabel { display: inline-flex; align-items: center; gap: 6px; font: var(--rol-klein); font-weight: 500; color: var(--tekst); white-space: nowrap; }
    .standlabel-aspect { font-weight: 400; color: var(--tekst-zacht); }
    .standlabel.is-oranje .standlabel-stand { color: var(--let-op); }
    .standlabel.is-rood .standlabel-stand { color: var(--fout); }
    .standlabel.is-onbekend { font-weight: 400; color: var(--tekst-zacht); }
    /* Een verouderde stand (#15590, Drieluik 13 A): de klok in de kleur van let op, het woord en de leeftijd in tekstkleur (4,5:1 op elk vlak). */
    .standlabel-oud { display: inline-flex; align-items: center; gap: 2px; font-weight: 500; color: var(--tekst); white-space: nowrap; }
    .standlabel-oud .icon { width: 13px; height: 13px; color: var(--let-op); }
    .standlabel-tegen { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--let-op); color: var(--tekst-op-donker); font: var(--rol-label); }

    /* Een melding over het geheel: rustig, een streep in de statuskleur. */
    .alert { display: flex; flex-direction: column; gap: 2px; padding: var(--ruimte-3) var(--ruimte-4); border-left: 4px solid; border-radius: var(--hoek-veld); color: var(--tekst); }
    .alert-warning { background: var(--let-op-zacht); border-color: var(--let-op); }
    .alert-danger { background: var(--fout-zacht); border-color: var(--fout); }
    .alert-title { font-weight: 600; }
    .alert-body { font: var(--rol-klein); }
    .panel + .alert, .alert + .panel, .alert + .alert { margin-top: var(--ruimte-4); }
    .alert.ruimte-onder { margin-bottom: var(--ruimte-4); }

    /* Eén reden voor een hele groep uitgeschakelde knoppen (#15237): één stille regel boven de lijst. */
    .groep-reden { display: flex; align-items: flex-start; gap: var(--ruimte-2); margin: 0 0 var(--ruimte-2); font: var(--rol-klein); color: var(--tekst-zacht); }
    .groep-reden .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; }

    /* ══ Tabel: een vergelijking op de laptop; op de telefoon een lijst (data-table-stack). ══ */
    .table-wrap { overflow-x: auto; }
    .data-table { width: 100%; border-collapse: collapse; }
    .data-table th { padding: var(--ruimte-2) var(--ruimte-4); text-align: left; font: var(--rol-klein); font-weight: 600; color: var(--tekst-zacht); border-bottom: 1px solid var(--lijn); }
    .data-table td { padding: var(--ruimte-3) var(--ruimte-4); border-bottom: 1px solid var(--lijn); }
    .data-table tr:last-child td { border-bottom: 0; }
    .data-table tbody tr:hover td { background: var(--vlak-zacht); }
    .data-table td.key { width: 34%; font-weight: 600; }
    .data-table .num, .data-table th.num { text-align: right; }
    .data-table tr.is-klikbaar { cursor: pointer; }
    .row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ruimte-2); }
    .row-actions.is-links { justify-content: flex-start; }
    .actie-paneel td { padding: var(--ruimte-4) !important; background: var(--vlak-zacht); }

    /* ══ Details en uitklappen: dicht tot je erom vraagt ══ */
    .details > summary { padding: var(--ruimte-2) 0; font-weight: 600; color: var(--tekst-zacht); cursor: pointer; }
    .details[open] > summary { margin-bottom: var(--ruimte-2); }
    .uitklap-kop {
        display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ruimte-3);
        width: 100%; min-height: var(--rij); padding: var(--ruimte-2) var(--ruimte-4); border: 0; background-color: transparent;
        text-align: left; cursor: pointer;
    }
    .uitklap-kop:hover { background-color: var(--vlak-zacht); }
    .uitklap-kop:focus-visible { outline-offset: -2px; }
    .uitklap-pijl { width: 16px; height: 16px; color: var(--tekst-zacht); transition: transform var(--duur-kort) var(--beweging-standaard); }
    .uitklap-kop[aria-expanded="true"] .uitklap-pijl { transform: rotate(90deg); }
    .uitklap-titel { display: grid; gap: 2px; min-width: 0; }
    .uitklap-naam { font-weight: 600; overflow-wrap: anywhere; }
    .uitklap-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ruimte-2); }
    /* Uitgeklapt: een kaartje in de regel (22 B). */
    .uitklap-inhoud {
        display: grid; gap: var(--ruimte-3); margin: 0 var(--ruimte-4) var(--ruimte-3) calc(var(--ruimte-4) + 16px + var(--ruimte-3));
        padding: var(--ruimte-3) var(--ruimte-4); border-radius: var(--hoek-uitklap); background: var(--vlak-zacht);
    }

    /* ══ Te doen (TeDoenLijst, B-077): één lijst in de groepen Prio en To do (B-085). De nadruk zit in de vorm: de
       statusvorm vooraan, Nu vet, de bovenste regel iets groter. ══ */
    .todo-card { margin-bottom: var(--tussen-groepen); }
    .todo-list { list-style: none; margin: 0; padding: var(--ruimte-1) 0; }
    .todo-list > li {
        position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-1) var(--ruimte-3);
        min-height: var(--rij); padding: var(--ruimte-2) var(--ruimte-4); border-left: 3px solid var(--pk, transparent);
    }
    .todo-list > li:hover { background-color: var(--vlak-zacht); }
    .todo-list > li.todo-groep {
        min-height: 0; padding: var(--ruimte-3) var(--ruimte-4) var(--ruimte-1); border-left-color: transparent; background-image: none;
        font: var(--rol-label); color: var(--tekst-zacht);
    }
    .todo-list > li.todo-groep:hover { background-color: transparent; }
    .todo-list > li.todo-groep + li { background-image: none; }
    /* wie het nu doet vooraan (#15726, 24 C); de statusstip als klein teken op de hoek, met een witte rand */
    .todo-wie { position: relative; flex: none; display: inline-flex; }
    .todo-dot { position: absolute; right: -5px; bottom: -5px; width: 15px; height: 15px; color: var(--tekst-uit); overflow: visible; }
    .todo-dot :is(path, circle) { fill: currentColor; stroke: var(--vlak-blad); stroke-width: 2.4; paint-order: stroke; stroke-linejoin: round; }
    .todo-dot.is-later circle { fill: var(--vlak-blad); stroke: currentColor; stroke-width: 1.6; }
    .todo-dot.is-rood { color: var(--fout); }
    .todo-dot.is-oranje { color: var(--let-op); }
    /* soort, wie en stand klein achter de zin, als woord (24 C) */
    .todo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--ruimte-2); margin-top: 2px; font: var(--rol-klein); color: var(--tekst-zacht); }
    .todo-meta > * + *::before { content: "·"; margin-right: var(--ruimte-2); color: var(--tekst-zacht); }
    .todo-soort { font: var(--rol-label); }
    .todo-meta .standlabel { font: var(--rol-klein); }
    .todo-text { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
    .todo-label { display: block; font: var(--rol-klein); font-weight: 600; color: var(--tekst-zacht); }
    .todo-label-kort { display: none; }
    /* Het project met zijn projectstand (B-088): de naam kapt af met …, de bolletjes blijven heel. */
    .todo-project { display: flex; align-items: center; gap: var(--ruimte-1); min-width: 0; }
    .todo-project .todo-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Naast de projectnaam houdt een negatieve marge met een muis de regel even hoog; op een aanraakscherm niet, zodat
       het raakvlak van 44 px niet over de regel eronder valt (WCAG 2.5.8, B-088). */
    .todo-project .projectstand-knop { margin-block: calc(-1 * var(--ruimte-1)); }
    @media (pointer: coarse) { .todo-project .projectstand-knop { margin-block: 0; } }
    .todo-zin { color: var(--tekst); }
    /* Een deadline of afspraak die voorbij is: Verlopen 14 okt, rood, zoals de datum op een taakrij (#15821). */
    .todo-verlopen { color: var(--fout); }
    .todo-dag { margin-right: var(--ruimte-2); font: var(--rol-klein); font-weight: 600; color: var(--tekst-zacht); white-space: nowrap; }
    .todo-list > li.is-nu .todo-zin { font-weight: 600; }
    .todo-list > li.todo-eerst { padding-block: var(--ruimte-3); }
    .todo-list > li.todo-eerst .todo-zin { font-weight: 600; }
    .todo-meer { display: inline-flex; align-items: center; min-height: 32px; margin: var(--ruimte-2) var(--ruimte-1) 0; padding: 0; border: 0; background: none; color: var(--tekst-link); font-weight: 500; text-decoration: none; cursor: pointer; }
    .todo-meer:hover { text-decoration: underline; }
    /* Leeg (#15745): één stille, grijze regel onder de kop, met het taakicoon; geen kaart. */
    .todo-leeg { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0 0 var(--ruimte-2); padding: 0 var(--ruimte-1); font: var(--rol-klein); color: var(--tekst-zacht); }
    .todo-leeg .icon { flex: none; width: 16px; height: 16px; }
    .todo-leeg a { color: var(--tekst-link); }
    /* De projectstand (B-088, #15746): vier bolletjes als één beeldmerk achter de projectnaam, dicht op elkaar, altijd
       Scope, Planning, Budget, Kwaliteit. Gevuld in de statuskleur; onbekend gestippeld zonder vulling. Jouw aspect is
       iets groter, het geraakte aspect heeft een dunne ring. Het raakvlak is 24 px met een muis en 44 px op een
       aanraakscherm, ook al zijn de bolletjes klein. De uitleg is een popover bij de knop. */
    .projectstand { display: inline-flex; flex: none; align-items: center; vertical-align: middle; }
    /* Vier vaste kolommen van --stip-cel (Arne, 19 okt): een groter bolletje, een ring of een rand verschuift niets, zodat
       de bolletjes van regel tot regel recht onder elkaar staan. */
    .projectstand-knop {
        display: inline-grid; grid-auto-flow: column; grid-auto-columns: var(--stip-cel); place-items: center; justify-content: center;
        min-width: var(--raak-muis); min-height: var(--raak-muis);
        padding: 0 var(--ruimte-1); border: 0; border-radius: var(--hoek-klein); background: none; color: inherit; cursor: pointer;
    }
    button.projectstand-knop:hover { background: var(--vlak-zacht); }
    .projectstand-knop.is-beeld { min-width: 0; min-height: 0; padding: 0; cursor: inherit; }
    button.projectstand-knop:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
    @media (pointer: coarse) { button.projectstand-knop { min-height: var(--raak); min-width: var(--raak); justify-content: center; } }
    .projectstand-cel { display: grid; place-items: center; width: var(--stip-cel); height: var(--stip-cel); }
    .projectstand-stip { flex: none; box-sizing: border-box; width: var(--stip); height: var(--stip); border-radius: 50%; background: var(--lijn-onbekend); }
    .projectstand-stip.is-groen { background: var(--goed); }
    .projectstand-stip.is-oranje { background: var(--let-op); }
    .projectstand-stip.is-rood { background: var(--fout); }
    .projectstand-stip.is-onbekend { background: none; border: 1.5px dashed var(--lijn-onbekend); }
    .projectstand-stip.is-jouw { width: var(--stip-groot); height: var(--stip-groot); }
    .projectstand-stip.is-geraakt { outline: 1.5px solid var(--accent); outline-offset: 1.5px; }
    .projectstand-uitleg {
        width: min(340px, calc(100vw - 2 * var(--ruimte-4))); margin: auto; padding: var(--ruimte-3) var(--ruimte-4);
        border: 1px solid var(--lijn-sterk); border-radius: var(--hoek-uitklap); background: var(--vlak-blad); color: var(--tekst);
        box-shadow: var(--schaduw-venster); font: var(--rol-klein); text-align: left; white-space: normal;
    }
    .projectstand-uitleg:not(:popover-open) { display: none; }
    @supports (position-area: bottom) {
        .projectstand-uitleg { inset: auto; margin: var(--ruimte-1) 0; position-area: bottom span-right; position-try-fallbacks: flip-inline, flip-block; }
    }
    .projectstand.is-open { flex-direction: column; align-items: flex-start; gap: var(--ruimte-2); }
    .projectstand.is-open .projectstand-uitleg { display: block; margin: 0; box-shadow: none; }
    .projectstand-uitleg-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ruimte-2); margin-bottom: var(--ruimte-2); font: var(--rol-label); color: var(--tekst-zacht); }
    .projectstand-sluit {
        display: inline-grid; flex: none; place-items: center; width: var(--raak-muis); height: var(--raak-muis);
        margin: calc(-1 * var(--ruimte-1)) calc(-1 * var(--ruimte-2)) 0 0; border: 0; border-radius: 50%; background: none; color: var(--tekst); cursor: pointer;
    }
    .projectstand-sluit:hover { background: var(--vlak-zacht); }
    .projectstand-sluit:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
    .projectstand-sluit .icon { width: 16px; height: 16px; }
    @media (pointer: coarse) { .projectstand-sluit { width: var(--raak); height: var(--raak); margin: calc(-1 * var(--ruimte-3)) calc(-1 * var(--ruimte-3)) 0 0; } }
    .projectstand-aspecten { display: grid; gap: var(--ruimte-2); }
    .projectstand-aspect { display: grid; gap: 2px; padding-left: var(--ruimte-2); border-left: 2px solid transparent; }
    .projectstand-aspect.is-geraakt { border-left-color: var(--accent); }
    .projectstand-meta, .projectstand-waarom { display: block; color: var(--tekst-zacht); }
    .projectstand-meer { display: inline-block; margin-top: var(--ruimte-2); }
    .projectstand-waarom { color: var(--tekst); }
    @media (min-width: 721px) {
        /* het project als kolom, de zin ernaast; een gewone knop stil, de hoofdactie valt op */
        .todo-text:has(> .todo-label), .todo-text:has(> .todo-project) { display: grid; grid-template-columns: 216px minmax(0, 1fr); column-gap: var(--ruimte-4); align-items: baseline; }
        .todo-text > .todo-label, .todo-text > .todo-project .todo-label { grid-column: 1; color: var(--tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .todo-text > .todo-project { grid-column: 1; justify-content: space-between; }
        .todo-text > .todo-label.is-meer-regels { white-space: normal; }
        .todo-text:has(> .todo-label) > :not(.todo-label), .todo-text:has(> .todo-project) > :not(.todo-project) { grid-column: 2; }
        .todo-list > li .btn-secondary { border-color: transparent; background: none; }
        .todo-list > li .btn-secondary:hover { background: var(--vlak-hover); }
    }

    /* ══ Persoon (#15726, B-080 punt 2, 24 C): wie het nu doet. De vorm zegt wat (rond een mens, vierkant AFAS, zeshoek
       de AI), de vulling wie (gevuld jij, getint een collega, omlijnd de klant, gestippeld niemand). ══ */
    .persoon {
        position: relative; flex: none; display: inline-grid; place-items: center;
        width: var(--persoon); height: var(--persoon); border-radius: 50%;
        background: var(--vlak-actief); color: var(--tekst); font: var(--rol-label); letter-spacing: .02em; white-space: nowrap;
    }
    .persoon.is-jij { background: var(--avatar-jij); color: var(--tekst-op-donker); }
    .persoon.is-klant { background: var(--vlak-blad); box-shadow: inset 0 0 0 1.5px var(--accent); }
    .persoon.is-niemand { background: var(--vlak-blad); color: var(--tekst-zacht); border: 1.5px dashed var(--lijn-onbekend); }
    .persoon.is-afas { border-radius: var(--hoek-klein); background: var(--vlak-zacht); color: var(--tekst-zacht); box-shadow: inset 0 0 0 1px var(--lijn-veld); }
    .persoon.is-ai { border-radius: 0; background: none; }
    .persoon-zeshoek { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    .persoon-zeshoek path { fill: var(--vlak-actief); stroke: var(--accent); stroke-width: 1.5; }
    .persoon-letters { position: relative; }

    /* ══ Personenpillen (#15790): wie het doet, in één tik. Het team als pillen met de roepnaam; de rij loopt door, elke
       pil is een duim groot. De huidige staat ingedrukt: paars getint, paarse rand, vet en een vinkje; nog niemand gestippeld, apart. ══ */
    .personenpillen { display: grid; gap: var(--ruimte-2); min-width: 0; }
    .personenpillen-label { font: var(--rol-label); color: var(--tekst-zacht); }
    .personenpillen-huidige { justify-self: start; max-width: 100%; min-height: var(--raak); white-space: normal; text-align: left; }
    .personenpillen-huidige .icon { width: 16px; height: 16px; flex: none; }
    .personenpillen-reden { font: var(--rol-klein); color: var(--tekst-zacht); }
    .personenpillen > div:not([hidden]) { display: grid; gap: var(--ruimte-2); }
    .personenpillen-rij { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); min-width: 0; }
    .personenpil {
        display: inline-flex; align-items: center; gap: var(--ruimte-2); max-width: 100%; min-height: var(--raak);
        padding: 0 var(--ruimte-3) 0 var(--ruimte-1); border: 1px solid var(--lijn-sterk); border-radius: var(--hoek-rond);
        background: var(--vlak-blad); color: var(--tekst); font: inherit; cursor: pointer;
        transition: border-color var(--duur-kort) var(--beweging-standaard), background-color var(--duur-kort) var(--beweging-standaard);
    }
    .personenpil:hover:not(:disabled) { background: var(--vlak-zacht); }
    .personenpil[aria-pressed="true"] { border-color: var(--accent); background: var(--vlak-actief); color: var(--tekst); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; padding-inline-end: var(--ruimte-2); }
    .personenpil[aria-pressed="true"]:hover:not(:disabled) { background: var(--vlak-actief); }
    .personenpil-vink { width: 18px; height: 18px; flex: none; stroke-width: 2.4; }
    .personenpil:disabled { cursor: not-allowed; }
    .personenpil:disabled:not([aria-pressed="true"]) { opacity: .55; }
    .personenpil.is-niemand { border-style: dashed; border-color: var(--lijn-onbekend); margin-inline-start: var(--ruimte-2); }
    .personenpil.is-niemand[aria-pressed="true"] { border-style: solid; border-color: var(--accent); }
    /* De letters in de avatar staan in data-letters: zo telt een schermlezer of axe ze niet mee in de naam van de pil. */
    .personenpil .persoon-letters::before { content: attr(data-letters); }
    .personenpil-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .personenpil.is-net-gekozen { animation: pil-tik var(--duur-lang) var(--beweging-expressief); }
    @keyframes pil-tik { 40% { transform: scale(1.06); } }
    .personenpillen-onbekend { display: flex; align-items: flex-start; gap: var(--ruimte-2); margin: 0; font: var(--rol-klein); color: var(--tekst-zacht); }
    .personenpillen-onbekend .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; }
    .personenpillen-vrij { display: flex; flex-wrap: wrap; align-items: end; gap: var(--ruimte-3); }
    .personenpillen-vrij .field { flex: 1 1 160px; }

    /* ══ Veld ══ */
    .form-grid { display: grid; gap: var(--ruimte-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
    .form-grid .field-wide { grid-column: 1 / -1; }
    .field { display: flex; flex-direction: column; gap: var(--ruimte-1); }
    .field.is-smal { max-width: 360px; margin-bottom: var(--ruimte-4); }
    .field > label, .veld-label { font: var(--rol-klein); font-weight: 600; color: var(--tekst); }
    .input, .select, .textarea {
        min-height: 40px; padding: var(--ruimte-2) var(--ruimte-3); border: 1px solid var(--lijn-veld); border-radius: var(--hoek-veld);
        background: var(--vlak-blad); color: var(--tekst); font: var(--rol-tekst);
        transition: border-color var(--duur-kort) var(--beweging-standaard), box-shadow var(--duur-kort) var(--beweging-standaard);
    }
    .input:focus, .select:focus, .textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); outline: none; }
    .textarea { min-height: 80px; resize: vertical; }
    /* Uitgeschakeld (#15722): gedimd op het zachte vlak, zodat je ziet dat het nu niet kan; de reden staat eronder. */
    :is(.input, .select, .textarea):disabled { border-color: var(--lijn-sterk); background: var(--vlak-zacht); color: var(--tekst-zacht); cursor: not-allowed; }
    /* 16 px op een aanraakscherm (#15264): kleiner en iOS zoomt in zodra je in het veld tikt. */
    @media (pointer: coarse) { .input, .select, .textarea { font-size: var(--invoer); } }
    .form-hint { font: var(--rol-klein); color: var(--tekst-zacht); }
    .form-hint.is-fout { color: var(--fout); }
    .checkbox { display: inline-flex; align-items: center; gap: var(--ruimte-2); color: var(--tekst); cursor: pointer; }
    input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--accent); }
    input[type="range"] { width: 100%; }
    /* Een toets (B-097): 18 px, een lijn met een iets dikkere onderrand, alleen op de laptop van betekenis. */
    kbd {
        display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
        border: var(--lijn-dikte) solid var(--lijn-sterk); border-bottom-width: 1.5px; border-radius: var(--hoek-klein);
        background: var(--vlak-blad); font: var(--rol-label); color: var(--tekst-zacht);
    }

    /* Gesegmenteerde keuze en keuzechips: één tik kiest. */
    .segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--hoek-rond); background: var(--actie-tweede); }
    .segmented.ruimte-onder { margin-bottom: var(--ruimte-3); }
    .segmented-option { min-height: 32px; padding: 0 var(--ruimte-3); border: 0; border-radius: var(--hoek-rond); background: none; color: var(--tekst-zacht); font-weight: 600; cursor: pointer; }
    .segmented-option[aria-selected="true"], .segmented-option[aria-pressed="true"] { background: var(--vlak-blad); color: var(--tekst); box-shadow: var(--schaduw-uitklap); }
    .keuzechips { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
    .keuzechip { min-height: 36px; padding: 0 var(--ruimte-3); border: 1px solid var(--lijn-veld); border-radius: var(--hoek-rond); background: var(--vlak-blad); color: var(--tekst); cursor: pointer; }
    .keuzechip.is-gekozen { border-color: var(--accent); background: var(--vlak-geselecteerd); color: var(--tekst); font-weight: 600; }
    .keuzechip.is-zoek { display: inline-flex; align-items: center; gap: var(--ruimte-1); border-style: dashed; color: var(--tekst); }
    .keuzechip.is-zoek .icon { width: 16px; height: 16px; }
    /* De soort bovenin het toevoegvenster (#15939): pictogram en naam, de gekozen in het accent. */
    .toevoegsoorten { margin-bottom: var(--ruimte-4); }
    .toevoegsoort { display: inline-flex; align-items: center; gap: var(--ruimte-1); }
    .toevoegsoort .icon { width: 16px; height: 16px; }
    .keuzelijst { display: grid; gap: var(--ruimte-2); }
    .keuze {
        display: flex; align-items: flex-start; gap: var(--ruimte-3); padding: var(--ruimte-3) var(--ruimte-4);
        border: 1px solid var(--lijn-sterk); border-radius: var(--hoek-uitklap); background: var(--vlak-blad); cursor: pointer;
        transition: border-color var(--duur-kort) var(--beweging-standaard), background-color var(--duur-kort) var(--beweging-standaard);
    }
    .keuze:hover { background: var(--vlak-zacht); }
    .keuze.is-gekozen { border-color: var(--accent); background: var(--vlak-geselecteerd); }
    .keuze input { margin-top: var(--ruimte-1); }
    .keuze-tekst { display: grid; gap: 2px; }
    .keuze-titel { font-weight: 600; }
    @media (pointer: coarse) { .keuzechip { min-height: var(--raak); min-width: var(--raak); } }

    /* ══ Laden en leeg: een lege toestand zegt wat je nu kunt doen ══ */
    .spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--lijn); border-top-color: var(--accent); animation: draai .7s linear infinite; }
    .loading-inline { display: flex; align-items: center; gap: var(--ruimte-3); color: var(--tekst-zacht); }
    .empty-state { display: flex; flex-direction: column; align-items: center; padding: var(--ruimte-12) var(--ruimte-6); text-align: center; }
    .empty-state-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: var(--ruimte-4); border-radius: 50%; background: var(--vlak-zacht); color: var(--tekst-zacht); }
    .empty-state-title { margin-bottom: var(--ruimte-1); font: var(--rol-kop); color: var(--tekst); }
    .empty-state-body { max-width: 46ch; color: var(--tekst-zacht); }
    .empty-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ruimte-2); margin-top: var(--ruimte-6); }
    .stand-oud { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0 0 var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-3); border-radius: var(--hoek-veld); background: var(--vlak-zacht); font: var(--rol-klein); color: var(--tekst); }
    .stand-oud .spinner { width: 14px; height: 14px; }
    @keyframes draai { to { transform: rotate(360deg); } }

    /* ══ Venster (#15821, B-097): één vraag in de Linear-vorm; de titel klein, geen lijn onder de kop, de labels grijs en
       klein, de voet wit na een lijn met Annuleren en de hoofdactie rechts. Op de telefoon een blad van onderen. ══ */
    .modal-overlay {
        position: fixed; inset: 0; z-index: 1500; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
        padding: var(--ruimte-3); background: var(--vlak-overlay); animation: verschijn var(--duur-middel) var(--beweging-in);
    }
    .modal {
        display: flex; flex-direction: column; width: min(560px, 100%); min-width: 0;
        max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
        border-radius: var(--hoek-groep); background: var(--vlak-blad); box-shadow: var(--schaduw-venster);
        animation: venster-in var(--duur-middel) var(--beweging-in);
    }
    .modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-3); padding: var(--ruimte-3) var(--ruimte-4) 0 var(--ruimte-6); }
    .modal-title { margin: 0; font: var(--rol-kop); color: var(--tekst); }
    .modal-sluit { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--hoek-veld); background: none; color: var(--tekst-zacht); cursor: pointer; }
    .modal-sluit .icon { width: 16px; height: 16px; }
    .modal-sluit:hover { background: var(--vlak-zacht); color: var(--tekst); }

    /* ── Een bijlage in beeld (#16010): een groot venster met de pdf of afbeelding, Downloaden en Sluiten in de kop. ── */
    .modal.bijlagevenster { width: min(1040px, 100%); height: calc(100vh - 48px); height: calc(100dvh - 48px); }
    .bijlagevenster-kop { padding-bottom: var(--ruimte-3); border-bottom: 1px solid var(--lijn); }
    .bijlagevenster-titel { display: flex; align-items: center; gap: var(--ruimte-2); flex: 1 1 auto; min-width: 0; }
    .bijlagevenster-titel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bijlagevenster-titel .icon { flex: none; width: 16px; height: 16px; color: var(--tekst-zacht); }
    .bijlagevenster-download { flex: none; gap: var(--ruimte-1); }
    .bijlagevenster-inhoud {
        display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: var(--ruimte-3);
        min-height: 0; padding: var(--ruimte-3); background: var(--vlak-zacht); border-radius: 0 0 var(--hoek-groep) var(--hoek-groep);
    }
    .bijlagevenster-pdf { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; border-radius: var(--hoek-veld); background: var(--vlak-blad); }
    .bijlagevenster-beeld { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--hoek-veld); background: var(--vlak-blad); }
    .bijlagevenster-regel { display: flex; align-items: center; gap: var(--ruimte-2); max-width: 44ch; margin: 0; text-align: left; color: var(--tekst-zacht); }
    .bijlagevenster-regel .icon { flex: none; width: 16px; height: 16px; }
    .bijlagevenster-regel .spinner { width: 16px; height: 16px; }
    .bijlagevenster-regel.is-fout { color: var(--tekst); }
    .bijlagevenster-regel.is-fout .icon { color: var(--fout); }
    /* minmax(0, 1fr) en max-content (#15264): een brede select of een rij die zelf scrolt, breekt het venster niet. */
    .modal-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; gap: var(--ruimte-3); padding: var(--ruimte-4) var(--ruimte-6) var(--ruimte-6); overflow-y: auto; }
    .modal-body :is(.field > label, .veld-label, .personenpillen-label) { font: var(--rol-klein); font-weight: 500; color: var(--tekst-zacht); }
    .modal-body select, .modal-body .select { max-width: 100%; }
    .modal-footer {
        display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ruimte-2);
        padding: var(--ruimte-3) var(--ruimte-4); border-top: var(--lijn-dikte) solid var(--lijn); border-radius: 0 0 var(--hoek-groep) var(--hoek-groep); background: var(--vlak-blad);
    }
    /* Eén paarse knop in beeld (#15821): staat er een venster open, dan is de hoofdknop van de pagina erachter grijs. */
    body:has(.modal-overlay) .btn-accent:not(.modal .btn-accent) { filter: grayscale(1); }
    /* Waarom de hoofdknop nog niet kan (#15821): alleen op de telefoon zichtbaar; op de laptop is het de title. */
    .modal-reden { display: none; }
    @keyframes verschijn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes venster-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
    @keyframes venster-omhoog { from { opacity: .6; transform: translateY(24px); } to { opacity: 1; transform: none; } }

    /* Uitgelegde acties op een aanraakscherm (#15237): een uitgeschakelde knop laat de tik door naar js/reden.js, dat de
       reden kort onder de knop zet. Op de laptop blijft de tooltip. */
    @media (hover: none) {
        button:disabled[title], input:disabled[title], select:disabled[title], textarea:disabled[title] { pointer-events: none; }
    }
    .reden-bubbel {
        position: fixed; z-index: 2000; max-width: min(320px, calc(100vw - 16px)); padding: var(--ruimte-2) var(--ruimte-3);
        border-radius: var(--hoek-veld); background: var(--vlak-donker); color: var(--tekst-op-donker); box-shadow: var(--schaduw-venster);
        font: var(--rol-klein); animation: reden-in var(--duur-kort) var(--beweging-in);
    }
    .reden-bubbel::before { content: ""; position: absolute; top: -6px; left: calc(var(--pijl, 50%) - 6px); border: 6px solid transparent; border-top: 0; border-bottom-color: var(--vlak-donker); }
    .reden-bubbel.is-boven::before { top: auto; bottom: -6px; border-bottom: 0; border-top: 6px solid var(--vlak-donker); }
    @keyframes reden-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

    /* ══ Standkeuze (#15834): de stand geven op de pil, zoals de status in Linear. De pil is de knop; het menu eronder
       heeft Op koers, Aandacht, Uit koers en Klopt nog. Stil: geen paars, geen geel; de stand draagt de kleur. ══ */
    .standkeuze { position: relative; display: inline-flex; }
    .standkeuze-knop {
        display: inline-flex; align-items: center; min-height: 28px; margin: -3px; padding: 3px; border: 0; border-radius: var(--hoek-rond);
        background: none; color: inherit; font: inherit; cursor: pointer;
    }
    .standkeuze-knop:hover .statuspil { border-color: var(--lijn-hover); background: var(--vlak-hover); }
    .standkeuze-knop[aria-expanded="true"] .statuspil { border-color: var(--lijn-hover); }
    .standkeuze-knop.is-net-gezet .statuspil { animation: stand-puls .7s var(--beweging-in); }
    @keyframes stand-puls { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tekst) 25%, transparent); } to { box-shadow: 0 0 0 8px transparent; } }
    .standkeuze-achter { position: fixed; inset: 0; z-index: 60; }
    .standkeuze-menu {
        position: absolute; z-index: 61; top: calc(100% + var(--ruimte-1)); left: 0; display: grid; width: 280px; padding: var(--ruimte-1);
        border-radius: var(--hoek-uitklap); background: var(--vlak-blad); box-shadow: var(--schaduw-venster); text-align: left;
    }
    .afspraakrij .standkeuze-menu { left: auto; right: 0; }
    .standkeuze-kop { display: none; }
    .standkeuze-reden { padding: var(--ruimte-1) var(--ruimte-2) var(--ruimte-2); font: var(--rol-klein); color: var(--tekst-zacht); }
    .standkeuze-item {
        display: flex; align-items: center; gap: var(--ruimte-2); min-height: 32px; padding: 0 var(--ruimte-2); border: 0;
        border-radius: var(--hoek-veld); background: none; color: var(--tekst); font: var(--rol-tekst); text-align: left; cursor: pointer;
    }
    .standkeuze-item:hover:not(:disabled) { background: var(--vlak-hover); }
    .standkeuze-item:disabled { color: var(--tekst-uit); cursor: not-allowed; }
    .standkeuze-item > .icon { flex: none; width: 16px; height: 16px; color: var(--tekst-zacht); }
    .standkeuze-woord { flex: 1 1 auto; }
    .standkeuze-item .standkeuze-vink { color: var(--tekst); }
    .standkeuze-meta { font: var(--rol-klein); color: var(--tekst-zacht); }
    .standkeuze-meta.is-letop { font-weight: 500; color: var(--let-op); }
    .standkeuze-item.is-sluiten { display: none; }
    .standkeuze-scheiding { height: var(--lijn-dikte); margin: var(--ruimte-1) var(--ruimte-1); background: var(--lijn); }
    .standkeuze-toelichting { display: grid; gap: var(--ruimte-1); padding: 2px var(--ruimte-1) var(--ruimte-2) 28px; }
    .standkeuze-toelichting .btn { justify-self: end; }
    .standkeuze-toelichting .input { min-height: 32px; }

    /* Stappenrij: waar een scopewijziging staat. */
    .stappenrij { display: flex; gap: 3px; max-width: 360px; margin: 0; padding: 0; list-style: none; }
    .stappenrij li { flex: 1 1 0; display: grid; gap: 3px; min-width: 0; }
    .stappenrij li::before { content: ""; height: 6px; border-radius: var(--hoek-rond); background: var(--grafiek-leeg); }
    .stappenrij li.is-gezet::before { background: var(--grafiek-geboekt); }
    .stappenrij li.is-huidig::before { background: var(--grafiek-gepland); }
    .stappenrij-naam { overflow: hidden; font: var(--rol-label); font-weight: 400; color: var(--tekst-zacht); text-overflow: ellipsis; white-space: nowrap; }
    .stappenrij li.is-huidig .stappenrij-naam { font-weight: 600; color: var(--tekst); }

    /* ══ Balken: getallen krijgen een vorm ══ */
    .voortgang { position: relative; height: 8px; min-width: 80px; overflow: hidden; border-radius: var(--hoek-rond); background: var(--grafiek-leeg); }
    .voortgang > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--grafiek-geboekt); transition: width var(--duur-lang) var(--beweging-in); }
    .voortgang.is-klaar > span { background: var(--goed); }
    .voortgang.is-over > span { background: var(--grafiek-over); }
    .voortgang-regel { display: grid; grid-template-columns: minmax(80px, 180px) auto; align-items: center; gap: var(--ruimte-2); font: var(--rol-klein); color: var(--tekst-zacht); }
    .voortgang-kop { display: flex; justify-content: space-between; margin-bottom: var(--ruimte-1); font: var(--rol-klein); }

    /* ══ Checklist: voorwaarden van een mijlpaal ══ */
    .checklist { display: grid; gap: var(--ruimte-2); margin: 0; padding: 0; list-style: none; }
    .checklist li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--ruimte-2); align-items: start; }
    .checklist .form-hint { display: block; }
    .checklist input[type="checkbox"] { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--goed); cursor: pointer; }
    .check-teken { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; font: var(--rol-label); }
    .check-teken.is-voldaan { background: var(--goed-zacht); color: var(--goed); }
    .check-teken.is-open { background: var(--let-op-zacht); color: var(--let-op); }
    .check-teken.is-onbekend { background: var(--vlak-zacht); color: var(--tekst-zacht); outline: 1px dashed var(--lijn-onbekend); outline-offset: -1px; }

    .waarom-icoon { display: inline-flex; margin-left: var(--ruimte-1); vertical-align: -3px; color: var(--tekst-zacht); cursor: help; }
    .waarom-icoon .icon { width: 15px; height: 15px; }

    /* De uitleg bij een stand (#15580): klik op het label en de reden klapt uit. */
    .stand-uitleg > summary { display: inline-block; list-style: none; cursor: pointer; }
    .stand-uitleg > summary::-webkit-details-marker { display: none; }
    .stand-uitleg-body { margin: var(--ruimte-1) 0 var(--ruimte-2); padding: var(--ruimte-2) var(--ruimte-3); border-radius: var(--hoek-uitklap); background: var(--vlak-zacht); font: var(--rol-klein); color: var(--tekst); }
    .stand-uitleg-body p { margin: 0 0 var(--ruimte-1); }
    .stand-uitleg-kop { font-weight: 600; }
    .stand-keten { margin: 0 0 var(--ruimte-1); padding-left: 18px; }
    .stand-keten li { margin: 2px 0; }
    /* een link in de keten is minstens 24 px hoog (WCAG 2.5.8), ook als de uitleg na een sprong openstaat (#15745) */
    .stand-keten a { display: inline-block; min-height: 24px; padding-block: 3px; }
    .stand-uitleg-bron { display: flex; flex-wrap: wrap; gap: var(--ruimte-1) var(--ruimte-3); color: var(--tekst-zacht); }

    /* ══ Melding (toast, #15728, B-097, #15817), zoals Linear: wit, een lijn, schaduw, rechtsonder; een paars rondje met een
       vinkje en één woordgroep. Ongedaan maken als stille link. Alleen de melding zelf vangt klikken. ══ */
    .melding-plek {
        position: fixed; z-index: 59; right: 20px; bottom: 20px;
        width: max-content; max-width: min(92vw, 480px); pointer-events: none;
    }
    .melding {
        display: flex; align-items: center; gap: 10px; padding: 0 0 0 14px;
        border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-uitklap); background: var(--vlak-blad); color: var(--tekst);
        box-shadow: var(--schaduw-zwevend); font: var(--rol-tekst); font-weight: 500;
        pointer-events: auto; animation: melding-op 180ms var(--beweging-in) both;
    }
    .melding-vink { flex: none; width: 16px; height: 16px; }
    .melding-letop { flex: none; width: 16px; height: 16px; color: var(--let-op); }
    .melding-vink circle { fill: var(--accent); }
    .melding-vink path { fill: none; stroke: var(--tekst-op-donker); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .melding-vink.is-pop { animation: pop 350ms var(--beweging-in); }
    .melding-tekst { display: grid; gap: 2px; min-width: 0; padding: 6px 0; }
    .melding-titel { font-weight: 500; }
    .melding-uitleg { font: var(--rol-klein); color: var(--tekst-zacht); }
    .melding-acties { display: flex; flex: none; gap: 2px; }
    /* Een knop in de melding is altijd 44 px hoog (#15728): je raakt hem in het voorbijgaan. De melding zelf is daarom niet
       hoger dan de knop (#15820). */
    .melding-knop {
        min-height: var(--raak); padding: 0 var(--ruimte-2); border: 0; border-radius: var(--hoek-veld); background: none;
        color: var(--tekst-sterk); font: var(--rol-tekst); font-weight: 500; cursor: pointer;
    }
    .melding-knop:hover { background: var(--vlak-hover); color: var(--tekst); }
    .melding-knop.is-stil { color: var(--tekst-zacht); font-weight: 400; }
    .melding-knop:disabled { cursor: default; background: none; }
    @keyframes melding-op { from { opacity: 0; transform: translateY(6px); } }
    @keyframes melding-stil { from { opacity: 0; } }
    @keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

    /* ══ Itemacties (#15747): een geopend item, voor elke soort hetzelfde. Bovenaan wat het is en wie het doet, dan de
       details, dan de vaste actiebalk: de volgende stap, Wijzig, Meer. Meer is op de laptop een menu onder de knop. ══ */
    .item-open { display: grid; gap: var(--ruimte-3); min-width: 0; }
    .item-kop { display: grid; gap: var(--ruimte-1); }
    .item-soort { display: inline-flex; align-items: center; gap: var(--ruimte-1); font: var(--rol-label); color: var(--tekst-zacht); }
    .item-soort .icon { width: 14px; height: 14px; }
    .item-titel { margin: 0; font: var(--rol-kop); color: var(--tekst); overflow-wrap: anywhere; }
    .item-wie { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0; font: var(--rol-klein); color: var(--tekst-zacht); }
    .item-wie-naam { font-weight: 600; color: var(--tekst); }
    .item-toekennen { min-width: 0; }
    .item-stand { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
    .item-open.is-verwijderd .item-details { color: var(--tekst-zacht); }
    .itemacties-balk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); padding-bottom: var(--ruimte-3); border-bottom: 1px solid var(--lijn); }
    .itemacties-balk .btn .icon { width: 16px; height: 16px; }
    .itemacties-meer { position: relative; display: inline-flex; }
    .itemacties-overlay { position: fixed; inset: 0; z-index: 60; }
    .itemacties-menu {
        position: absolute; z-index: 61; top: calc(100% + var(--ruimte-1)); left: 0; display: grid; min-width: 240px; padding: var(--ruimte-1);
        border-radius: var(--hoek-uitklap); background: var(--vlak-blad); box-shadow: var(--schaduw-venster);
    }
    .itemacties-menu-kop { display: none; }
    .itemacties-menu-item {
        display: flex; align-items: flex-start; gap: var(--ruimte-2); min-height: var(--raak); padding: var(--ruimte-2) var(--ruimte-3); border: 0;
        border-radius: var(--hoek-veld); background: none; color: var(--tekst); font: var(--rol-tekst); text-align: left; cursor: pointer;
    }
    .itemacties-menu-item .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--tekst-zacht); }
    .itemacties-menu-item:hover:not(:disabled) { background: var(--vlak-zacht); }
    .itemacties-menu-item:disabled { color: var(--tekst-uit); cursor: default; }
    .itemacties-menu-item.is-weghalen:not(:disabled), .itemacties-menu-item.is-weghalen:not(:disabled) .icon { color: var(--fout); }
    .itemacties-menu-item.is-sluiten { display: none; }
    .itemacties-menu-tekst { display: grid; gap: 2px; }
    .itemacties-menu-reden { font: var(--rol-klein); color: var(--tekst-zacht); }
    .uitklap.is-verwijderd .uitklap-naam { color: var(--tekst-zacht); text-decoration: line-through; }
    .afspraak-keuze { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ruimte-2) var(--ruimte-4); margin-bottom: var(--ruimte-3); }
    .afspraak-verwijderd { font: var(--rol-klein); color: var(--tekst-zacht); }
    /* Hooguit één hoofdactie per scherm: staat de volgende stap in het geopende item, dan is de knop in Te doen erboven tweede. */
    .app-page:has(.itemacties-hoofd.btn-accent) .todo-list .btn-accent { background: var(--actie-tweede); color: var(--actie-tweede-tekst); box-shadow: none; }

    /* Een item uit Te doen in beeld (#15712): kort gemarkeerd. */
    .is-uitgelicht, .is-uitgelicht > td { background: var(--vlak-geselecteerd); }
    .is-uitgelicht { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--hoek-klein); }

    /* ══ Invoerbalk (#15591, Drieluik 16 A): veld, microfoon, keuze en voorspelde actie vormen één compacte regel. ══ */
    .modal:has(.invoerbalk) { width: min(760px, 100%); }
    .invoerbalk {
        display: flex; align-items: center; gap: var(--ruimte-1); min-width: 0; padding: var(--ruimte-1);
        border: 2px solid var(--lijn-sterk); border-radius: var(--hoek-veld); background: var(--vlak-blad);
    }
    .invoerbalk:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--vlak-geselecteerd); }
    .invoerbalk-start { display: grid; place-items: center; flex: none; width: 28px; color: var(--tekst-uit); }
    .invoerbalk-start .icon { width: 18px; height: 18px; }
    .invoerbalk-tekst {
        flex: 1; min-width: 0; min-height: 40px; max-height: 96px; padding: 9px 4px; border: 0; outline: 0;
        background: transparent; color: var(--tekst); font: var(--rol-tekst); resize: none;
    }
    .invoerbalk-tekst::placeholder { color: var(--tekst-uit); }
    .invoerbalk-microfoon {
        display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0;
        border: 0; border-radius: 50%; background: none; color: var(--tekst); cursor: pointer;
    }
    .invoerbalk-microfoon:hover { background: var(--vlak-zacht); }
    .invoerbalk-microfoon .icon { width: 20px; height: 20px; }
    .invoerbalk-wissel {
        position: relative; display: flex; align-items: center; flex: none; width: 54px; height: 30px; padding: 2px;
        border: 1px solid var(--lijn-sterk); border-radius: var(--hoek-rond); background: var(--vlak-zacht);
        color: var(--tekst-uit); cursor: pointer;
    }
    .invoerbalk-wissel:disabled { opacity: .8; cursor: not-allowed; }
    .invoerbalk-wissel-knop {
        position: absolute; inset: 2px auto 2px 2px; width: 24px; border-radius: var(--hoek-rond);
        background: var(--vlak-blad); box-shadow: var(--schaduw-uitklap); transition: transform var(--duur-kort) var(--beweging-standaard);
    }
    .invoerbalk-wissel[aria-checked="true"] .invoerbalk-wissel-knop { transform: translateX(24px); }
    .invoerbalk-wissel-icoon { position: relative; display: grid; place-items: center; width: 24px; }
    .invoerbalk-wissel-icoon .icon { width: 15px; height: 15px; }
    .invoerbalk-wissel[aria-checked="false"] .invoerbalk-wissel-icoon:nth-child(2),
    .invoerbalk-wissel[aria-checked="true"] .invoerbalk-wissel-icoon:nth-child(3) { color: var(--accent); }
    .invoerbalk-uitleg { margin: 0; }
    .invoerchips { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); margin: 0; padding: 0; list-style: none; }
    /* Een herkend gegeven, geen keuze: neutraal, zonder streep. Het project heeft een stip in de projectkleur. */
    .invoerchip {
        display: inline-flex; align-items: center; gap: var(--ruimte-1); min-height: 32px; padding: 0 0 0 var(--ruimte-3);
        border: 1px solid var(--lijn-sterk); border-radius: var(--hoek-rond); background: var(--vlak-blad);
        color: var(--tekst); font: var(--rol-klein); font-weight: 600;
    }
    .invoerchip .icon { width: 16px; height: 16px; color: var(--tekst-zacht); }
    .invoerchip .projectstip { width: 8px; height: 8px; }
    /* De datum: een tik opent de datumkiezer; het veld ligt onzichtbaar over de tekst. */
    .invoerchip-datum { position: relative; display: inline-flex; align-items: center; gap: var(--ruimte-1); cursor: pointer; }
    .invoerchip-datum span { text-decoration: underline dotted; text-underline-offset: 3px; }
    .invoerchip-kiezer { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
    .invoerchip-datum:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--hoek-klein); }
    .invoerchip-weg {
        display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%;
        background: none; color: var(--tekst-zacht); cursor: pointer;
    }
    .invoerchip-weg:hover { background: var(--vlak-actief); color: var(--tekst); }
    @media (pointer: coarse) { .invoerchip { min-height: var(--raak); } .invoerchip-weg { width: var(--raak); height: var(--raak); } }
    .invoerbalk-knop { display: inline-flex; align-items: center; gap: var(--ruimte-2); flex: none; min-height: 40px; padding-inline: var(--ruimte-3); font: var(--rol-klein); font-weight: 600; }
    .invoerbalk-knop:disabled { opacity: 1; background: var(--actie-tweede); color: var(--tekst-uit); }
    .invoerbalk-knop .icon { width: 18px; height: 18px; }
    .invoerbalk-knop-kort { display: none; }
    @media (max-width: 720px) {
        .modal:has(.invoerbalk) { width: 100%; }
        .invoerbalk-start { display: none; }
        .invoerbalk-tekst { font-size: var(--invoer); }
        .invoerbalk-microfoon { width: var(--raak); height: var(--raak); }
        .invoerbalk-microfoon.heeft-tekst { display: none; }
        .invoerbalk-wissel { width: 50px; height: 32px; }
        .invoerbalk-wissel-knop { width: 22px; }
        .invoerbalk-wissel[aria-checked="true"] .invoerbalk-wissel-knop { transform: translateX(22px); }
        .invoerbalk-wissel-icoon { width: 22px; }
        .invoerbalk-knop { min-height: var(--raak); padding-inline: var(--ruimte-2); }
        .invoerbalk-knop .icon, .invoerbalk-knop-lang { display: none; }
        .invoerbalk-knop-kort { display: inline; }
    }
    /* ══ Het paneel van Rixsi (#15975, B-105): op de laptop rechts naast het werkblad, even breed als het paneel met de
       info van een project (--paneel), en net zo'n blad op het canvas. Het blijft open als je navigeert; het werkblad
       schuift ervoor in. Kop met de naam en het onderwerp, daaronder het gesprek dat zelf scrollt, onderaan de invoer.
       Onder 721 px (smal, of InSite) ligt het over het werkblad. ══ */
    .rixsipaneel {
        position: fixed; top: var(--ruimte-2); right: var(--ruimte-2); bottom: var(--ruimte-2); z-index: 30;
        display: flex; flex-direction: column; width: var(--paneel);
        border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-groep); background: var(--vlak-blad); box-shadow: var(--schaduw-uitklap);
    }
    .app-shell:has(.rixsipaneel) .app-main { margin-right: calc(var(--paneel) + 2 * var(--ruimte-2)); }
    html.embedded .rixsipaneel { top: 0; right: 0; bottom: 0; border-width: 0 0 0 var(--lijn-dikte); border-radius: 0; box-shadow: none; }
    html.embedded .app-shell:has(.rixsipaneel) .app-main { margin-right: var(--paneel); }
    .rixsipaneel-kop { display: flex; align-items: center; gap: var(--ruimte-2); min-height: 44px; padding: 0 var(--ruimte-2) 0 var(--ruimte-4); border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .rixsipaneel-kop > .icon { flex: none; width: 16px; height: 16px; color: var(--logo); }
    .rixsipaneel-titel { flex: 1 1 auto; min-width: 0; margin: 0; font: var(--rol-kop); color: var(--tekst); }
    .rixsipaneel-kop .telonderwerp { max-width: 50%; height: 28px; }
    /* ══ Het AI-voorstel (#15720, B-079): één vorm voor alles wat AI voorstelt. Het teken (de X uit het Irixs-logo) in
       paars, de soort klein, de tekst sterk; bij een wijziging het item en per veld oud → nieuw; Waarom? ingeklapt;
       rechts Neem over, Pas aan en Wijs af. Wat de AI niet weet, staat gestippeld: onbekend is niet nul. ══ */
    .aivoorstellen { display: grid; gap: var(--ruimte-2); }
    .aivoorstel { display: grid; gap: var(--ruimte-2); padding: var(--ruimte-3) var(--ruimte-4); border: var(--lijn-dikte) solid var(--lijn); border-radius: var(--hoek-groep); background: var(--vlak-blad); }
    .aivoorstel.is-gekozen { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
    .aivoorstel-kop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2) var(--ruimte-3); }
    .aiteken { flex: none; width: 14px; height: 16px; fill: var(--accent); }
    .aiteken .aiteken-stip { fill: var(--nadruk); }
    .aivoorstel-soort { display: inline-flex; align-items: center; gap: var(--ruimte-1); font: var(--rol-klein); color: var(--tekst-zacht); }
    .aivoorstel-soort .icon, .aivoorstel-item .icon { width: 14px; height: 14px; }
    .aivoorstel-tekst { flex: 1 1 240px; min-width: 0; font-weight: 600; color: var(--tekst-sterk); overflow-wrap: anywhere; }
    .aivoorstel-item { display: flex; align-items: center; gap: var(--ruimte-1); margin: 0; padding-left: 30px; font: var(--rol-klein); color: var(--tekst); }
    .aivoorstel-velden { display: grid; gap: var(--ruimte-1); margin: 0; padding: 0 0 0 30px; list-style: none; }
    .aivoorstel-veld { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-1) var(--ruimte-2); font: var(--rol-klein); }
    .aivoorstel-veldnaam { min-width: 80px; color: var(--tekst-zacht); }
    .aivoorstel-oud { color: var(--tekst-zacht); text-decoration: line-through; }
    .aivoorstel-pijl { width: 14px; height: 14px; color: var(--tekst-zacht); }
    .aivoorstel-nieuw { font-weight: 600; color: var(--tekst-sterk); }
    .aivoorstel-veld:is(.is-leeg, .is-onzeker) .aivoorstel-nieuw { padding: 0 var(--ruimte-1); border: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); border-radius: var(--hoek-klein); font-weight: 500; color: var(--tekst-zacht); }
    .aivoorstel-feiten { display: flex; flex-wrap: wrap; gap: var(--ruimte-1) var(--ruimte-2); padding-left: 30px; font: var(--rol-klein); }
    .aivoorstel-feiten:not(:has(*)) { display: none; }
    .aivoorstel-feiten .projectstip { margin-right: var(--ruimte-1); }
    /* Een voorstel van Rixsi (#16370): de feiten als stille regels, onbekend gestippeld, en de datum kiezen als chips. */
    .aivoorstel-feit { display: inline-flex; align-items: center; gap: var(--ruimte-1); color: var(--tekst-zacht); }
    .aivoorstel-feit .icon { width: 14px; height: 14px; }
    .aivoorstel-feit.is-leeg { font-style: italic; text-decoration: underline dotted; }
    .aivoorstel-datums { display: flex; flex-wrap: wrap; gap: var(--ruimte-1); width: 100%; }
    /* Een bestaand item (#15185): een actie van een ander valt op in de let-op-tint; lijkt op is een link naar het item. */
    .aivoorstel-ander { display: inline-flex; align-items: center; gap: var(--ruimte-1); min-height: 28px; padding: 0 var(--ruimte-2) 0 2px; border-radius: var(--hoek-rond); background: var(--let-op-zacht); font-weight: 600; color: var(--tekst-sterk); }
    .aivoorstel-lijktop { display: inline-flex; align-items: center; gap: var(--ruimte-1); min-height: 28px; color: var(--tekst-link); }
    .aivoorstel-lijktop .icon { width: 14px; height: 14px; }
    .aivoorstel-datum { position: relative; }
    .aivoorstel-datum .icon { width: 14px; height: 14px; }
    .aivoorstel-onzeker { display: flex; align-items: center; gap: var(--ruimte-1); margin: 0; padding-left: 30px; font: var(--rol-klein); color: var(--tekst-zacht); }
    .aivoorstel-onzeker .icon { width: 14px; height: 14px; color: var(--let-op); }
    .aivoorstel-voet { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ruimte-2); padding-left: 30px; }
    .aivoorstel-waarom { flex: 1 1 200px; min-width: 0; font: var(--rol-klein); }
    .aivoorstel-waarom > summary { display: inline-flex; align-items: center; gap: var(--ruimte-1); min-height: 28px; list-style: none; color: var(--tekst-link); cursor: pointer; }
    .aivoorstel-waarom > summary::-webkit-details-marker { display: none; }
    .aivoorstel-waarom-pijl { width: 12px; height: 12px; transition: transform var(--duur-kort) var(--beweging-standaard); }
    .aivoorstel-waarom[open] .aivoorstel-waarom-pijl { transform: rotate(90deg); }
    .aivoorstel-waarom p { margin: var(--ruimte-1) 0 0; color: var(--tekst); overflow-wrap: anywhere; }
    .aivoorstel-waarom .aivoorstel-bron { color: var(--tekst-zacht); }
    .aivoorstel-acties { display: inline-flex; align-items: center; gap: var(--ruimte-1); margin-left: auto; }
    .aivoorstel.is-afgewezen { display: flex; align-items: center; gap: var(--ruimte-2); padding-block: var(--ruimte-2); border-style: dashed; background: none; }
    .aivoorstel-afgewezen { flex: 1 1 auto; min-width: 0; font: var(--rol-klein); color: var(--tekst-zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .aivoorstel-afgewezen-tekst { text-decoration: line-through; }
    @media (prefers-reduced-motion: reduce) { .aivoorstel-waarom-pijl { transition: none; } }

    @media (max-width: 720px) {
        .rixsipaneel { inset: 0; width: auto; border: 0; border-radius: 0; }
        .app-shell:has(.rixsipaneel) .app-main { margin-right: 0; }
        .rixsipaneel-kop .btn-icoon { width: var(--raak); height: var(--raak); }
    }

    /* ══ Projectkleur (B-081): een dunne streep of een monogram, nooit zonder naam. De kleur komt uit de reeks. ══ */
    .projectstip { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pk, var(--reeks-8)); }

    /* ══ Kortenaamkiezer (#15926): de korte projectnaam als eigenschap, met het potlood; een klik maakt er een veld van. ══ */
    .kortenaam { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); min-width: 0; max-width: 100%; }
    .kortenaam-knop {
        display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; min-height: 28px; margin-left: -6px; padding: 0 6px;
        border: 0; border-radius: var(--hoek-veld); background: none; color: var(--tekst-sterk); font: inherit; font-weight: 500; text-align: left; cursor: pointer;
    }
    .kortenaam-knop:hover:not(:disabled) { background: var(--vlak-hover); }
    .kortenaam-knop .icon { flex: none; width: 14px; height: 14px; color: var(--tekst-zacht); }
    .kortenaam-knop:disabled { cursor: default; }
    .kortenaam-knop:disabled .icon { opacity: .45; }
    .kortenaam-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .kortenaam-vorm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); width: 100%; }
    .kortenaam-veld { flex: 1 1 160px; min-width: 0; }

    /* ══ Kleurkiezer (#15724, 29 A): de stip voor de projectnaam in de kop; een klik opent de acht kleuren van de reeks. ══ */
    .kleurkiezer { position: relative; flex: none; display: inline-flex; }
    .kleurstip {
        display: inline-grid; place-items: center; width: var(--raak); height: var(--raak); margin: calc(-1 * var(--ruimte-2)) 0 calc(-1 * var(--ruimte-2)) calc(-1 * var(--ruimte-2));
        padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
    }
    .kleurstip > i { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--pk, var(--reeks-8)); box-shadow: 0 0 0 2px var(--vlak-blad), 0 0 0 3px var(--lijn-veld); }
    .kleurstip:is(:hover, :focus-visible):not(:disabled) > i { box-shadow: 0 0 0 2px var(--vlak-blad), 0 0 0 4px var(--accent); }
    .kleurstip:focus-visible { outline: none; }
    /* Het potlood op de stip (#15724): de projectleider ziet dat hij de kleur kan kiezen. Een teamlid krijgt het niet. */
    .kleurstip { position: relative; }
    .kleurstip-pen {
        position: absolute; right: 7px; bottom: 7px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
        background: var(--vlak-blad); color: var(--tekst-zacht); box-shadow: 0 0 0 1px var(--lijn-veld);
    }
    .kleurstip-pen .icon { width: 10px; height: 10px; stroke-width: 2.4; }
    .kleurstip:is(:hover, :focus-visible) .kleurstip-pen { color: var(--accent); }
    .kleurstip:disabled { cursor: default; }
    .kleurkiezer-achter { position: fixed; inset: 0; z-index: 1400; padding: 0; border: 0; background: none; cursor: default; }
    .kleurkiezer-venster {
        position: absolute; top: calc(100% + var(--ruimte-2)); left: calc(-1 * var(--ruimte-2)); z-index: 1450;
        display: grid; gap: var(--ruimte-3); width: min(520px, calc(100vw - 2 * var(--marge))); padding: var(--ruimte-4);
        border-radius: var(--hoek-uitklap); background: var(--vlak-blad); box-shadow: var(--schaduw-uitklap);
        font: var(--rol-tekst); color: var(--tekst); animation: venster-in var(--duur-middel) var(--beweging-in);
    }
    .kleurkiezer-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-2); }
    .kleurkiezer-titel { font: var(--rol-kop); }
    .kleurkiezer-sluit { flex: none; display: grid; place-items: center; width: var(--raak); height: var(--raak); margin: calc(-1 * var(--ruimte-2)); border: 0; border-radius: 50%; background: none; color: var(--tekst-zacht); cursor: pointer; }
    .kleurkiezer-sluit:hover { background: var(--vlak-zacht); color: var(--tekst); }
    .kleurkiezer-uitleg { font: var(--rol-klein); color: var(--tekst-zacht); }
    .kleurkiezer-palet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ruimte-1); }
    .kleurkiezer-kleur {
        display: flex; flex-direction: column; align-items: center; gap: var(--ruimte-1); min-height: 64px; padding: var(--ruimte-2) var(--ruimte-1);
        border: 1px solid transparent; border-radius: var(--hoek-veld); background: none; font: var(--rol-klein); color: var(--tekst); cursor: pointer;
    }
    .kleurkiezer-kleur > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pk); color: var(--tekst-op-donker); }
    .kleurkiezer-kleur > i .icon { width: 18px; height: 18px; stroke-width: 2.6; }
    .kleurkiezer-kleur > small { font: var(--rol-label); color: var(--tekst-zacht); }
    .kleurkiezer-kleur:hover:not(:disabled) { background: var(--vlak-zacht); border-color: var(--lijn-sterk); }
    .kleurkiezer-kleur[aria-pressed="true"] { background: var(--vlak-geselecteerd); border-color: var(--accent); font-weight: 600; }
    .kleurkiezer-voet { display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-3); flex-wrap: wrap; }

    @media (prefers-reduced-motion: reduce) {
        .spinner { animation: none; }
        .modal-overlay, .modal, .reden-bubbel, .kleurkiezer-venster { animation: none; }
        .keuze, .uitklap-pijl, .voortgang > span, .urenmeter-deel, .btn { transition: none; }
        .standkeuze-knop.is-net-gezet .statuspil, .standkeuze-menu { animation: none; }
        .personenpil { transition: none; }
        .personenpil.is-net-gekozen { animation: none; }
        .melding { animation-name: melding-stil; }
        .melding-vink.is-pop, .afvinkrondje.is-af svg, .eigenschappen-meer, .projectkop-chevron, .uitklapregel-pijl, .eigenschappen-pijl { animation: none; transition: none; }
    }
    @media (prefers-reduced-motion: no-preference) {
        .is-uitgelicht { animation: uitgelicht-in 1.2s var(--beweging-in) 1; }
    }
    @keyframes uitgelicht-in { from { background: var(--accent-zacht); } }

    /* ══ De schil (#15832, B-097): de onderdelen van de zijbalk, hier in de laag componenten zodat ze voorgaan op de
       algemene persoon en kbd. De zijbalk zelf (breedte, vlak) staat in basis.css. ══ */
    /* De werkruimte met haar menu: Instellingen, Rol aannemen, Afmelden. */
    .sidebar-werkruimte { position: relative; margin-bottom: 6px; }
    .sidebar-werkruimteknop {
        display: flex; align-items: center; gap: var(--ruimte-2); width: 100%; height: 32px; padding: 0 6px;
        border: 0; border-radius: var(--hoek-veld); background: none; font: var(--rol-kop); color: var(--tekst); text-align: left; cursor: pointer;
    }
    .sidebar-werkruimteknop:hover, .sidebar-werkruimteknop[aria-expanded="true"] { background: var(--vlak-actief); }
    .sidebar-logo {
        display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 5px;
        background: var(--logo); color: var(--tekst-op-donker); font: var(--rol-label); font-weight: 700;
    }
    .sidebar-werkruimtenaam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sidebar .sidebar-pijl { width: 12px; height: 12px; color: var(--tekst-uit); }
    .sidebar-avatar { display: inline-flex; margin-left: auto; }
    .sidebar-avatar .persoon { width: 20px; height: 20px; font: var(--rol-label); font-weight: 600; }
    .werkruimtemenu-achter { position: fixed; inset: 0; z-index: 60; border: 0; background: transparent; cursor: default; }
    .werkruimtemenu {
        position: absolute; z-index: 61; top: calc(100% + 4px); left: 0; width: 220px;
        display: grid; gap: 1px; padding: var(--ruimte-1);
        border: 1px solid var(--lijn-sterk); border-radius: var(--hoek-uitklap); background: var(--vlak-blad); box-shadow: var(--schaduw-zwevend);
    }
    .werkruimtemenu-item {
        display: flex; align-items: center; gap: var(--ruimte-2); min-height: 30px; padding: 0 var(--ruimte-2);
        border: 0; border-radius: var(--hoek-veld); background: none; font: var(--rol-tekst); font-weight: 500; color: var(--tekst-sterk); text-align: left; cursor: pointer;
    }
    .werkruimtemenu-item:hover:not(:disabled) { background: var(--vlak-hover); color: var(--tekst); }
    .werkruimtemenu-item:disabled { color: var(--tekst-uit); cursor: not-allowed; }
    .werkruimtemenu-item .icon { width: 16px; height: 16px; flex: none; stroke-width: 1.5; color: var(--tekst-zacht); }
    /* De voet van de zijbalk staat op de telefoon in het menu. Afmelden alleen buiten InSite. */
    .werkruimtemenu-sync { display: none; }
    html.embedded .werkruimtemenu-item.alleen-los { display: none; }

    /* Installeer GRIP als app (#15989), in het werkruimtemenu en het menu op de telefoon. Op een iPhone de uitleg eronder. */
    .installeerknop.is-uitleg { align-items: flex-start; padding-block: var(--ruimte-2); cursor: default; }
    .installeerknop.is-uitleg:hover { background: none; }
    .installeerknop.is-uitleg .icon { margin-top: 2px; }
    .installeerknop-tekst { display: grid; gap: 2px; }
    /* Op de stijlpagina staat het menu stil op zijn plek. */
    .werkruimtemenu.is-voorbeeld { position: static; }
    .installeerknop-uitleg { font: var(--rol-klein); font-weight: 400; color: var(--tekst-zacht); }
    /* De stille regel bovenaan Vandaag (#15989): een notitieregel, geen kaart, geen paars. */
    .installatieregel { margin-bottom: var(--ruimte-2); }
    .installatieregel .notitieregel { padding-block: var(--ruimte-1); }

    /* Open in eigen venster (#15989): alleen in AFAS InSite, altijd in beeld. Op de laptop bovenaan de zijbalk, met een
       lijn zodat hij als knop leest; in een smal InSite-venster het pictogram in de kopbalk. Raakvlak 44 px. */
    .eigenvenster-plek { display: none; position: relative; flex-direction: column; gap: var(--ruimte-2); }
    html.embedded .eigenvenster-plek:not(.is-icoon), .eigenvenster-plek.is-voorbeeld { display: flex; }
    .sidebar > .eigenvenster-plek { margin-bottom: var(--ruimte-2); }
    .eigenvenster:not(.kopbalk-icoon) {
        display: flex; align-items: center; gap: var(--ruimte-2); width: 100%; min-height: var(--raak); padding: 0 var(--ruimte-2);
        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); font-weight: 500; color: var(--tekst-sterk); text-align: left; cursor: pointer;
    }
    .eigenvenster:not(.kopbalk-icoon):hover { border-color: var(--lijn-veld); color: var(--tekst); }
    .eigenvenster .icon { width: 16px; height: 16px; flex: none; stroke-width: 1.5; color: var(--tekst-zacht); }
    .eigenvenster-melding {
        display: grid; gap: var(--ruimte-1); padding: 0 var(--ruimte-3);
        border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-uitklap); background: var(--vlak-blad);
    }
    .eigenvenster-plek.is-icoon .eigenvenster-melding {
        position: absolute; z-index: 61; top: calc(100% + 4px); right: 0; width: min(340px, calc(100vw - 24px)); box-shadow: var(--schaduw-zwevend);
    }
    /* In de smalle zijbalk: het icoon naast de zin, de knoppen eronder. */
    .eigenvenster-melding .notitieregel-tekst { flex: 1 1 0; }
    .eigenvenster-melding .notitieregel-acties { flex-basis: 100%; padding-left: 26px; }
    .eigenvenster-link { display: grid; gap: var(--ruimte-1); padding-bottom: var(--ruimte-3); font: var(--rol-klein); color: var(--tekst-zacht); }
    @media (max-width: 720px) {
        html.embedded .eigenvenster-plek:not(.is-icoon):not(.is-voorbeeld) { display: none; }
        html.embedded .eigenvenster-plek.is-icoon { display: flex; flex: none; }
        html.embedded .sidebar-werkruimte { display: flex; align-items: center; gap: var(--ruimte-1); }
        html.embedded .sidebar-werkruimteknop { flex: 1 1 auto; min-width: 0; }
    }

    /* Zoeken of opdracht met Ctrl K. */
    .sidebar-zoekrij { display: flex; gap: 6px; margin-bottom: var(--ruimte-2); }
    .sidebar-zoek {
        display: flex; align-items: center; height: 30px; border: 1px solid var(--lijn-sterk); border-radius: var(--hoek-veld);
        background: var(--vlak-blad); color: var(--tekst-zacht); box-shadow: var(--schaduw-uitklap); cursor: pointer;
    }
    .sidebar-zoek { flex: 1 1 auto; min-width: 0; gap: var(--ruimte-2); padding: 0 var(--ruimte-2); font: var(--rol-tekst); text-align: left; }
    .sidebar-zoek span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sidebar-zoek kbd { flex: none; min-width: 18px; padding: 0 var(--ruimte-1); border-bottom-width: 1.5px; font: var(--rol-label); color: var(--tekst-zacht); }
    .sidebar-zoek:hover { border-color: var(--lijn-veld); color: var(--tekst); }

    /* Leg vast (#16008): één duidelijke knop bovenaan de zijbalk, met het pictogram, de tekst en de sneltoets C. */
    .sidebar-legvast {
        display: flex; align-items: center; gap: var(--ruimte-2); width: 100%; min-height: 36px; margin-bottom: var(--ruimte-2); padding: 0 var(--ruimte-2);
        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); font-weight: 600; color: var(--tekst-sterk); text-align: left; cursor: pointer;
    }
    .sidebar-legvast:hover { border-color: var(--lijn-veld); color: var(--tekst); }
    .sidebar .sidebar-legvast .icon { width: 16px; height: 16px; flex: none; color: var(--accent); }
    .sidebar-legvast span { flex: 1 1 auto; }
    .sidebar-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); }

    /* Mijn werk, Inbox, Mijn planning, Projecten, en de projecten zelf. */
    .sidebar-item {
        position: relative; display: flex; align-items: center; gap: var(--ruimte-2);
        width: 100%; min-height: 28px; padding: 0 var(--ruimte-2); border: 0; border-radius: var(--hoek-veld);
        background: none; font: var(--rol-tekst); font-weight: 500; color: var(--tekst-sterk); text-align: left; text-decoration: none; cursor: pointer;
        transition: background-color var(--duur-kort) var(--beweging-standaard);
    }
    .sidebar-item:hover:not(:disabled) { background: var(--vlak-actief); }
    .sidebar-item.active { background: var(--vlak-actief); color: var(--tekst); }
    .sidebar-item:disabled { cursor: progress; }
    .sidebar-naam { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Het projectnummer klein achter de naam (#15832): gelijke, afgekapte namen blijven te onderscheiden. */
    .sidebar-nummer { flex: none; font: var(--rol-klein); color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }
    /* Op het actieve project haalt zacht grijs geen 4,5:1 op het grijze vlak (axe, #15817): dan de sterke tekst. */
    .sidebar-item.active .sidebar-nummer { color: var(--tekst-sterk); }
    .sidebar-teller { margin-left: auto; font: var(--rol-label); color: var(--tekst-zacht); }
    .sidebar-item.active .sidebar-teller, .sidebar-item.active .sidebar-nummer { color: var(--tekst-sterk); }
    .sidebar-teller.is-onbekend { width: 8px; height: 8px; border: 1.5px dashed var(--lijn-onbekend); border-radius: 50%; }
    .sidebar-sectie {
        display: flex; align-items: center; gap: var(--ruimte-1); height: 28px; margin-top: var(--ruimte-3); padding: 0 var(--ruimte-2);
        border: 0; border-radius: var(--hoek-veld); background: none; font: var(--rol-label); color: var(--tekst-zacht); text-align: left; cursor: pointer;
    }
    .sidebar-sectie:hover { color: var(--tekst-sterk); }
    .sidebar .sidebar-sectie .icon { width: 12px; height: 12px; transition: transform var(--duur-kort) var(--beweging-standaard); }
    .sidebar-sectie[aria-expanded="false"] .icon { transform: rotate(-90deg); }
    .sidebar-groep { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
    /* Eén stip per project (B-097): de zwaarste bekende stand van de vier aspecten; is er niets slechter dan op schema
       maar is een aspect onbekend, dan grijs gestippeld. Groen alleen als alle vier bekend en op schema zijn. */
    .sidebar-stip { flex: none; box-sizing: border-box; width: 8px; height: 8px; border-radius: 50%; }
    .sidebar-stip.is-groen { background: var(--goed); }
    .sidebar-stip.is-oranje { background: var(--let-op-stip); }
    .sidebar-stip.is-rood { background: var(--fout); }
    .sidebar-stip.is-onbekend { border: 1.5px dashed var(--lijn-onbekend); }
    .sidebar-meer { color: var(--tekst-zacht); }
    .sidebar .sidebar-meer .icon { width: 14px; height: 14px; }
    .sidebar-fout { padding: var(--ruimte-1) var(--ruimte-2); font: var(--rol-klein); color: var(--fout); }

    /* Onderaan: wanneer AFAS gelezen is; een klik leest opnieuw. */
    .sidebar-voet {
        display: flex; align-items: center; gap: 6px; margin-top: auto; padding: var(--ruimte-2);
        border: 0; border-radius: var(--hoek-veld); background: none; font: var(--rol-klein); color: var(--tekst-zacht); text-align: left; cursor: pointer;
    }
    .sidebar-voet:hover:not(:disabled) { color: var(--tekst-sterk); }
    .sidebar-voet:disabled { cursor: progress; }
    .sidebar .sidebar-voet .icon { width: 12px; height: 12px; color: currentColor; }
    .icon.is-bezig { animation: draai 1s linear infinite; }
    @media (pointer: coarse) { .sidebar-item, .sidebar-werkruimteknop, .werkruimtemenu-item { min-height: var(--raak); } }

    /* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
       De bouwstenen van de Linear-vorm (B-095, B-096, B-097, #15817), zoals het referentiebeeld demo-linear-paars. Elk
       staat op de stijlpagina met zijn catalogustekst. Laptop eerst beschreven; de telefoon staat per bouwsteen eronder.
       ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

    /* ── Schermbalk: 44 px bovenaan het werkblad, het kruimelpad links, de herkomst en stille knoppen rechts. ── */
    .schermbalk {
        position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 6px; min-height: var(--kopbalk);
        margin: calc(-1 * var(--ruimte-6)) calc(-1 * var(--marge)) var(--ruimte-4); padding: 0 var(--ruimte-3) 0 var(--ruimte-4);
        border-bottom: var(--lijn-dikte) solid var(--lijn); background: var(--vlak-blad);
    }
    .schermbalk-herkomst { display: inline-flex; margin-right: var(--ruimte-2); }
    .schermbalk-acties { display: inline-flex; align-items: center; gap: 6px; }

    /* ── Kruimelpad: Projecten / ▢ project. Elk deel behalve het laatste is een link; op de telefoon ‹ Projecten. ── */
    .kruimelpad { display: flex; flex: 0 1 auto; align-items: center; min-width: 0; overflow: hidden; }
    .kruimelpad-lijst { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; font: var(--rol-tekst); font-weight: 500; color: var(--tekst-zacht); }
    .kruimelpad-deel { display: inline-flex; flex: none; align-items: center; gap: 6px; }
    .kruimelpad-deel:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; }
    .kruimelpad-link { color: var(--tekst-zacht); text-decoration: none; white-space: nowrap; }
    .kruimelpad-link:hover { color: var(--tekst); text-decoration: underline; text-underline-offset: 2px; }
    .kruimelpad-scheiding { color: var(--lijn-sterk); }
    .kruimelpad-hier { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--tekst); }
    .kruimelpad-hier .icon { width: 14px; height: 14px; flex: none; stroke-width: 1.5; color: var(--tekst-zacht); }
    .kruimelpad-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .kruimelpad-terug { display: none; }

    /* ── Herkomst: de bron en wanneer, klein en grijs; als knop leest hij opnieuw. ── */
    .herkomst { display: inline-flex; align-items: center; gap: var(--ruimte-1); font: var(--rol-klein); color: var(--tekst-zacht); white-space: nowrap; }
    .herkomst .icon { width: 12px; height: 12px; flex: none; stroke-width: 1.5; }
    .herkomst.is-knop { min-height: 24px; padding: 0 var(--ruimte-1); border: 0; border-radius: var(--hoek-veld); background: none; cursor: pointer; }
    .herkomst.is-knop:hover:not(:disabled) { background: var(--vlak-hover); color: var(--tekst-sterk); }
    .herkomst.is-knop:disabled { cursor: progress; }
    .herkomst.is-onbekend .icon { stroke-dasharray: 2 2; }
    /* Zekerheid (#15719): te oud is neutraal (geen rood, geen groen), met de klok en de peildatum; een prognose is gestippeld
       onderstreept en heet zo; onbekend blijft grijs gestippeld. */
    .herkomst.is-te-oud { color: var(--tekst); }
    .herkomst.is-te-oud .icon { stroke-width: 2; }
    .zekerheid-prognose { text-decoration: underline dashed var(--lijn-onbekend); text-decoration-thickness: var(--lijn-onbekend-dikte); text-underline-offset: 3px; }

    /* ── Antwoordkop (#15821, #15837): het icoon in een vierkant, het antwoord groot, de feiten klein eronder. ── */
    .antwoordkop { display: flex; align-items: center; gap: var(--ruimte-4); min-width: 0; margin: 0 0 var(--ruimte-2); }
    .antwoordkop-icoon {
        display: grid; place-items: center; flex: none; width: 40px; height: 40px;
        border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-uitklap); background: var(--vlak-blad); color: var(--tekst-sterk);
    }
    .antwoordkop-icoon .icon { width: 20px; height: 20px; stroke-width: 1.5; }
    .antwoordkop.is-stippel .antwoordkop-icoon { border: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); color: var(--tekst-zacht); }
    .antwoordkop-tekst { display: grid; gap: 2px; min-width: 0; }
    .antwoordkop-titel { font: var(--rol-titel); letter-spacing: -.015em; color: var(--tekst-sterk); overflow-wrap: anywhere; }
    .antwoordkop-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-1) var(--ruimte-2); min-width: 0; font: var(--rol-tekst); color: var(--tekst-zacht); }
    .antwoordkop-project { display: inline-flex; align-items: center; gap: var(--ruimte-2); color: var(--tekst); }
    .antwoordkop-punt { color: var(--lijn-sterk); }

    /* ── Projectkop: één knop over de volle breedte; de doos, de naam, eronder de pil, de klant en het nummer. ── */
    .projectkop-rij { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; container: projectkop / inline-size; }
    .projectkop-rij > .projectkop { flex: 1 1 auto; min-width: 0; }
    /* Vraag het Rixsi → (#15975): stil, naast de kop; de kop zelf blijft de knop voor de info. Is de kop smal (het paneel
       van Rixsi staat open), dan gaat de naam voor: de knop wordt alleen het pictogram en de hint valt weg. */
    .projectkop-vraag { flex: none; }
    @container projectkop (width < 560px) {
        .projectkop-rij .projectkop-hint { display: none; }
        .projectkop-vraag { width: 28px; padding: 0; }
        .projectkop-vraag > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    }
    .projectkop { margin: 0; font: inherit; }
    .projectkop-knop {
        display: flex; align-items: center; gap: var(--ruimte-3); width: calc(100% + 2 * var(--ruimte-2)); margin: 0 calc(-1 * var(--ruimte-2));
        padding: var(--ruimte-2); border: 0; border-radius: var(--hoek-uitklap); background: none; color: var(--tekst); text-align: left; cursor: pointer;
    }
    .projectkop-knop:hover { background: var(--vlak-hover); }
    .projectkop-icoon {
        display: grid; place-items: center; flex: none; width: 32px; height: 32px;
        border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-uitklap); background: var(--vlak-blad); color: var(--tekst-sterk);
    }
    .projectkop-icoon .icon { width: 18px; height: 18px; stroke-width: 1.5; }
    .projectkop-tekst { flex: 1 1 auto; min-width: 0; }
    .projectkop-titel { display: block; font: var(--rol-titel); letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .projectkop-sub { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; margin-top: 2px; overflow: hidden; font: var(--rol-tekst); color: var(--tekst-zacht); white-space: nowrap; }
    .projectkop-klant { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .projectkop-nummer { font-family: var(--letter-mono); }
    .projectkop-klant + .projectkop-nummer::before { content: "·"; margin-right: var(--ruimte-2); font-family: var(--letter-tekst); color: var(--lijn-sterk); }
    .projectkop-hint { display: flex; flex: none; align-items: center; gap: 6px; font: var(--rol-klein); color: var(--tekst-zacht); opacity: 0; transition: opacity var(--duur-kort) var(--beweging-standaard); }
    .projectkop-knop:is(:hover, :focus-visible) .projectkop-hint { opacity: 1; }
    .projectkop-chevron { flex: none; width: 16px; height: 16px; color: var(--tekst-zacht); transition: transform 180ms var(--beweging-standaard); }
    .projectkop-knop[aria-expanded="true"] .projectkop-chevron { transform: rotate(180deg); }

    /* ── Tabrij: pillen op één rij onder de kop; de actieve licht grijs met een lijn; de teller vaag. ── */
    .tabrij { display: flex; gap: 2px; margin: 6px 0 var(--ruimte-4); padding: 10px 0; border-bottom: var(--lijn-dikte) solid var(--lijn); overflow-x: auto; scrollbar-width: none; }
    .tabrij::-webkit-scrollbar { display: none; }
    .tabrij-tab {
        position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--ruimte-2);
        border: var(--lijn-dikte) solid transparent; border-radius: var(--hoek-veld); background: none;
        font: var(--rol-tekst); font-weight: 500; color: var(--tekst-zacht); text-decoration: none; white-space: nowrap; cursor: pointer;
    }
    .tabrij-tab:hover { background: var(--vlak-hover); color: var(--tekst); }
    .tabrij-tab[aria-current="page"] { border-color: var(--vlak-actief); background: var(--vlak-hover); color: var(--tekst); box-shadow: var(--schaduw-uitklap); }
    .tabrij-tab:focus-visible { outline-offset: -2px; }
    .tabrij-teller { font-weight: 400; color: var(--tekst-zacht); }
    /* Met een muis is een verborgen schuifbalk niet te bedienen: de tabs voorbij de rand vielen weg achter de knop ernaast.
       Daar loopt de rij door op een tweede regel, zodat elke tab te zien en aan te klikken is. Op de telefoon blijft hij schuiven. */
    @media (hover: hover) and (pointer: fine) {
        .tabrij { flex-wrap: wrap; row-gap: 4px; overflow-x: visible; }
    }

    /* ── Eigenschappen: vier vaste, de rest achter de kop; een vaste labelkolom van 104 px. ── */
    .eigenschappen { display: grid; }
    .eigenschappen-kop {
        display: flex; align-items: center; gap: 6px; width: calc(100% + 12px); height: 30px; margin: 0 -6px; padding: 0 6px;
        border: 0; border-radius: var(--hoek-veld); background: none; font: var(--rol-label); color: var(--tekst-zacht); text-align: left; cursor: pointer;
    }
    .eigenschappen-kop:hover { background: var(--vlak-hover); color: var(--tekst); }
    .eigenschappen-pijl { width: 12px; height: 12px; transition: transform var(--duur-kort) var(--beweging-standaard); }
    .eigenschappen-kop[aria-expanded="true"] .eigenschappen-pijl { transform: rotate(90deg); }
    .eigenschappen-aantal { margin-left: auto; }
    .eigenschappen-lijst { margin: 0; }
    .eigenschappen-meer:not([hidden]) { animation: eigenschappen-open 1s var(--beweging-in); }
    @keyframes eigenschappen-open { 0% { opacity: 0; transform: translateY(-3px); background: var(--accent-zacht); } 20% { opacity: 1; transform: none; } 100% { background: transparent; } }
    .eigenschapregel { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; min-height: 32px; margin: 0 -6px; padding: 0 6px; border-radius: var(--hoek-veld); }
    .eigenschapregel:hover { background: var(--vlak-hover); }
    .eigenschapregel-label { display: flex; align-items: center; gap: var(--ruimte-2); color: var(--tekst-zacht); }
    .eigenschapregel-label .icon { display: none; width: 16px; height: 16px; color: var(--tekst-zacht); }
    .eigenschapregel-waarde { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin: 0; font-weight: 500; color: var(--tekst-sterk); }

    /* ── Mijlpaallijst: een ruit per mijlpaal met een dun lijntje ertussen; rechts wanneer. ── */
    .mijlpaallijst-kop { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0 0 var(--ruimte-2); font: var(--rol-label); color: var(--tekst-zacht); }
    .mijlpaallijst-telling { margin-left: auto; font: var(--rol-klein); }
    .mijlpaallijst-lijst { margin: 0; padding: 0; list-style: none; }
    .mijlpaal { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 30px; }
    .mijlpaal + .mijlpaal::before { content: ""; position: absolute; left: 7.5px; top: -9px; height: 12px; border-left: var(--lijn-dikte) solid var(--lijn-sterk); }
    .mijlpaal-ruit { width: 16px; height: 16px; }
    .mijlpaal-ruit-rand { fill: none; stroke: var(--lijn-hover); stroke-width: 1.3; stroke-linejoin: round; }
    .mijlpaal.is-genomen .mijlpaal-ruit-rand { fill: var(--tekst-sterk); stroke: var(--tekst-sterk); }
    .mijlpaal.is-nu .mijlpaal-ruit-rand { fill: var(--vlak-blad); stroke: var(--tekst-sterk); }
    .mijlpaal-ruit-half { fill: var(--tekst-sterk); }
    .mijlpaal.is-onbekend .mijlpaal-ruit-rand { stroke: var(--lijn-onbekend); stroke-dasharray: 2 2; }
    .mijlpaal-naam { min-width: 0; font-weight: 500; color: var(--tekst-sterk); }
    .mijlpaal.is-nu .mijlpaal-naam { color: var(--tekst); }
    .mijlpaal:is(.is-vergrendeld, .is-onbekend) .mijlpaal-naam { color: var(--tekst-zacht); }
    .mijlpaal-wanneer { display: inline-flex; align-items: center; gap: var(--ruimte-1); font: var(--rol-klein); color: var(--tekst-zacht); white-space: nowrap; }
    .mijlpaal-wanneer .icon { width: 12px; height: 12px; }

    /* ── Ring: voldaan in paars op grijs, het getal in het midden; onbekend gestippeld. ── */
    .ring { position: relative; flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; }
    .ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
    .ring-baan { fill: none; stroke: var(--lijn); stroke-width: 3; }
    .ring-boog { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
    .ring.is-onbekend .ring-baan { stroke: var(--lijn-onbekend); stroke-width: 1.5; stroke-dasharray: 3 3; }
    .ring-getal { position: relative; font: var(--rol-label); font-weight: 600; color: var(--tekst-sterk); font-variant-numeric: tabular-nums; }

    /* ── Mijlpaalkaart: de ring, wat wacht, wat open is, de oranje regel en de ene hoofdactie. ── */
    .mijlpaalkaart {
        display: flex; align-items: center; gap: 14px; padding: 14px var(--ruimte-4);
        border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-groep); background: var(--vlak-blad); box-shadow: var(--schaduw-uitklap);
    }
    .mijlpaalkaart-tekst { flex: 1 1 auto; min-width: 0; }
    .mijlpaalkaart-titel { margin: 0; font: var(--rol-kop); color: var(--tekst); }
    .mijlpaalkaart-zin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-1) var(--ruimte-2); margin: 2px 0 0; color: var(--tekst-zacht); }
    .mijlpaalkaart-letop { display: inline-flex; align-items: center; gap: var(--ruimte-1); font-weight: 500; color: var(--let-op); }
    .mijlpaalkaart-letop .statusstip { width: 6px; height: 6px; }
    .mijlpaalkaart-knop { flex: none; }

    /* ── Klantafspraak: vier tegels op de laptop, vier rijen op de telefoon. ── */
    .afspraaktegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ruimte-2); }
    .afspraaktegel {
        display: flex; flex-direction: column; min-width: 0;
        border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-uitklap); background: var(--vlak-blad);
    }
    .afspraaktegel-label { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--tekst-zacht); }
    .afspraaktegel-label .icon { width: 14px; height: 14px; stroke-width: 1.5; }
    .afspraaktegel-waarde { margin-top: var(--ruimte-2); font: var(--rol-getal); letter-spacing: -.015em; text-wrap: balance; font-variant-numeric: tabular-nums; color: var(--tekst); }
    .afspraaktegel-zin { flex: 1 1 auto; margin-top: 2px; font: var(--rol-klein); color: var(--tekst-zacht); }
    .afspraaktegel-open {
        display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: var(--ruimte-3) var(--ruimte-3) 0; border: 0;
        border-radius: var(--hoek-uitklap) var(--hoek-uitklap) 0 0; background: none; color: inherit; font: inherit; text-align: left;
    }
    .afspraaktegel-stand { display: flex; padding: 10px var(--ruimte-3) var(--ruimte-3); }
    .afspraaktegel.is-onbekend { border-style: dashed; border-color: var(--lijn-hover); }
    .afspraaktegel.is-onbekend .afspraaktegel-waarde { color: var(--tekst-zacht); }
    .afspraakrijen { border-top: var(--lijn-dikte) solid var(--lijn); }
    .afspraakrij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ruimte-3); align-items: center; min-height: 56px; border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .afspraakrij-open {
        display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--ruimte-3); align-items: center; min-height: 56px; padding: var(--ruimte-2) 0;
        border: 0; background: none; color: inherit; font: inherit; text-align: left;
    }
    .afspraakrij-open > .icon { width: 18px; height: 18px; stroke-width: 1.5; color: var(--tekst-zacht); }
    .afspraakrij-tekst { display: grid; min-width: 0; }
    .afspraakrij-naam { font-weight: 500; }
    .afspraakrij-zin { font: var(--rol-klein); color: var(--tekst-zacht); }

    /* ── Groepskop en taakrij: een groep met een kop van 34 px en rijen van 40 px, omlijnd. ── */
    .groepskop {
        display: flex; align-items: center; gap: var(--ruimte-2); height: 34px; margin: 0; padding: 0 var(--ruimte-2);
        border: var(--lijn-dikte) solid var(--lijn); border-radius: var(--hoek-veld) var(--hoek-veld) 0 0; background: var(--vlak-zacht);
        font: var(--rol-tekst); font-weight: 500; color: var(--tekst);
    }
    .groepskop .icon { width: 14px; height: 14px; stroke-width: 1.5; color: var(--tekst-zacht); }
    .groepskop-teller { color: var(--tekst-zacht); }
    .groepskop-rechts { display: inline-flex; align-items: center; gap: var(--ruimte-2); margin-left: auto; font-weight: 400; }
    .taakrijen { margin: 0; padding: 0; list-style: none; }
    .taakrij {
        display: flex; align-items: center; gap: 10px; min-height: var(--rij); padding: var(--ruimte-1) var(--ruimte-2);
        border: var(--lijn-dikte) solid var(--lijn); border-top: 0;
    }
    .taakrijen:not(.groepskop + .taakrijen) > .taakrij:first-child { border-top: var(--lijn-dikte) solid var(--lijn); border-radius: var(--hoek-veld) var(--hoek-veld) 0 0; }
    .taakrij:last-child { border-radius: 0 0 var(--hoek-veld) var(--hoek-veld); }
    .taakrij:hover { background: var(--vlak-hover); }
    /* De titel houdt een minimale breedte; de meta geeft eerst toe (#15975), zodat een rij nooit over een andere kolom loopt. */
    .taakrij-titel { flex: 1 1 auto; min-width: min(12em, 40%); overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; transition: color 200ms var(--beweging-standaard); }
    .taakrij.is-af .taakrij-titel { color: var(--tekst-zacht); text-decoration: line-through; text-decoration-color: var(--lijn-sterk); }
    .taakrij-meta { display: flex; flex: 0 1 auto; min-width: 0; overflow: hidden; align-items: center; gap: var(--ruimte-2); font: var(--rol-klein); color: var(--tekst-zacht); white-space: nowrap; }
    .taakrij-datum { display: inline-flex; align-items: center; gap: var(--ruimte-1); }
    .taakrij-datum .icon { width: 13px; height: 13px; stroke-width: 1.5; }
    .taakrij-datum.is-verlopen { font-weight: 500; color: var(--fout); }

    /* ── Taakrij als item (#15818): de soort op de plek van het rondje, de hele rij klikbaar, open met de details eronder. ── */
    .taakrij { position: relative; }
    .taakrij.is-klikbaar { cursor: pointer; }
    .taakrij.is-klikbaar > .taakrij-titel { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
    .taakrij.is-klikbaar > .taakrij-titel::after { content: ""; position: absolute; inset: 0; }
    .taakrij.is-klikbaar > .taakrij-titel:focus-visible { outline: none; }
    .taakrij.is-klikbaar:has(> .taakrij-titel:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
    .taakrij > .afvinkrondje { position: relative; z-index: 1; }
    .taakrij.is-open, .taakrij.is-uitgelicht { background: var(--vlak-zacht); }
    /* Uitgelicht vanuit Voor jou (#15818): het zachte vlak, geen paarse rand; paars is voor de hoofdactie. */
    .taakrij.is-uitgelicht, .afspraakaspect.is-uitgelicht { outline: none; border-radius: 0; }
    .taakrij.is-verwijderd > .taakrij-titel { color: var(--tekst-zacht); text-decoration: line-through; text-decoration-color: var(--lijn-sterk); }
    .taakrij-soort { display: grid; flex: none; place-items: center; width: 16px; height: 16px; color: var(--tekst-zacht); }
    .taakrij-soort .icon { width: 14px; height: 14px; stroke-width: 1.5; }
    .taakrij-label { display: inline-flex; flex: 0 1 auto; align-items: center; gap: var(--ruimte-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .taakrij-meta > :not(.taakrij-label, .taakrij-project) { flex: none; }
    .taakrij-label.is-letop { font-weight: 500; color: var(--let-op); }
    .taakrij-label .statusstip { width: 6px; height: 6px; }
    /* Het project op een rij in een lijst over projecten heen (Mijn werk, #15821): de stip in de projectkleur en de korte naam. */
    .taakrij-project { display: inline-flex; align-items: center; gap: var(--ruimte-1); max-width: 160px; min-width: 0; }
    .taakrij-project > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .taakrij-project .projectstip { width: 8px; height: 8px; }
    .taakrij-open { padding: var(--ruimte-3) var(--ruimte-3) var(--ruimte-4) 46px; border: var(--lijn-dikte) solid var(--lijn); border-top: 0; }
    .taakrij-open:last-child { border-radius: 0 0 var(--hoek-veld) var(--hoek-veld); }
    .taakrij-leeg { display: flex; align-items: center; gap: var(--ruimte-2); min-height: var(--rij); padding: 0 var(--ruimte-2); border: var(--lijn-dikte) solid var(--lijn); border-top: 0; color: var(--tekst-zacht); }
    .taakrijen:not(.groepskop + .taakrijen) > .taakrij-leeg:first-child { border-top: var(--lijn-dikte) solid var(--lijn); }
    .taakrij-leeg:last-child { border-radius: 0 0 var(--hoek-veld) var(--hoek-veld); }
    .taakrij-leeg .icon { flex: none; width: 16px; height: 16px; stroke-width: 1.5; }
    .taakrij-leeg.is-onbekend .icon { color: var(--let-op); }

    /* ── Itemfeiten: de details van een open item als korte regels, label grijs links; geen blok met vette waarden. ── */
    .itemfeiten { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font: var(--rol-klein); color: var(--tekst-sterk); }
    .itemfeiten > li { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: center; gap: var(--ruimte-3); min-height: 28px; }
    .itemfeiten-label { color: var(--tekst-zacht); }
    .itemfeiten-waarde { display: inline-flex; align-items: center; gap: 6px; }
    .itemfeiten .is-onbekend { color: var(--tekst-zacht); }
    .itemfeiten .inline-datum { width: 10rem; max-width: 100%; min-height: 28px; font: var(--rol-klein); }
    .itemfeiten .is-bewaard .inline-datum { border-color: var(--goed); }
    /* Een keuze op het geopende item (#15940): zo klein als de datum, kiezen bewaart direct. */
    .itemfeiten .inline-keuze { width: auto; max-width: 100%; min-height: 28px; padding-right: var(--ruimte-6); font: var(--rol-klein); }
    .itemfeiten .itemfeiten-waarde:has(.inline-keuze) { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-1); }

    /* ── Sectiekop: de kop boven een deel van het overzicht, zoals .sh in het referentiebeeld; rechts klein de herkomst. ── */
    .sectiekop { display: flex; align-items: center; gap: var(--ruimte-2); min-height: 28px; margin: 0 0 6px; }
    .sectiekop-titel { margin: 0; font: var(--rol-kop); color: var(--tekst); }
    .sectiekop-teller { font: var(--rol-kop); font-weight: 500; color: var(--tekst-zacht); }
    .sectiekop-rechts { display: inline-flex; align-items: center; gap: var(--ruimte-2); margin-left: auto; font: var(--rol-klein); color: var(--tekst-zacht); }

    /* ── Klantafspraak (#15818): vier tegels; een open tegel klapt de uitleg over de hele breedte eronder uit. ── */
    .klantafspraak, .voorjou, .mijlpalen, .projectnotities { margin-top: 28px; }
    .afspraakaspecten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--ruimte-2); margin: 0; padding: 0; list-style: none; }
    .afspraakaspect { display: flex; min-width: 0; }
    .afspraakaspect > .afspraaktegel { flex: 1 1 auto; }
    .afspraakaspect > .afspraakrij { display: none; }
    .afspraakaspect.is-uitgelicht > .afspraaktegel { box-shadow: 0 0 0 2px var(--lijn-hover); }
    button.afspraaktegel-open { cursor: pointer; }
    .afspraaktegel:has(> button.afspraaktegel-open:hover) { background: var(--vlak-hover); }
    .afspraaktegel.is-open { border-color: var(--lijn-hover); background: var(--vlak-hover); }
    .afspraaktegel-zin { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .afspraaktegel-indicatie { margin-left: 3px; font: var(--rol-klein); font-weight: 500; letter-spacing: 0; color: var(--tekst-zacht); }
    button.afspraakrij-open { width: 100%; cursor: pointer; }
    .afspraakuitleg { grid-column: 1 / -1; display: grid; gap: var(--ruimte-3); padding: var(--ruimte-3) var(--ruimte-4); border: var(--lijn-dikte) solid var(--lijn); border-radius: var(--hoek-uitklap); background: var(--vlak-zacht); }
    .afspraakuitleg-feiten { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font: var(--rol-klein); }
    .afspraakuitleg-feiten > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-1) var(--ruimte-3); min-height: 24px; }
    .afspraakuitleg-label { flex: 0 0 104px; color: var(--tekst-zacht); }
    /* Twee kolommen (#15821): het label links, de waarde rechts; loopt de waarde over, dan blijft ze in haar eigen kolom. De
       herkomst staat direct achter de waarde en springt als geheel naar de volgende regel. */
    .afspraakuitleg-feiten > li { flex-wrap: nowrap; align-items: baseline; }
    .afspraakuitleg-feiten > li > :not(.afspraakuitleg-label) { flex: 1 1 0; min-width: 0; }
    .afspraakuitleg-waarde { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--ruimte-2); }
    .afspraakuitleg-feiten .is-onbekend { color: var(--tekst-zacht); }
    .afspraakuitleg-feiten > li.is-letop > :not(.afspraakuitleg-label) { color: var(--let-op); }
    .afspraakuitleg-feiten .statusstip { width: 6px; height: 6px; margin-right: var(--ruimte-1); }
    /* ── De klantafspraak in de eigenschappen (#15834): wie elk aspect bewaakt, en de projectomvang. ── */
    .afspraakbewaking { margin-top: var(--ruimte-3); padding-top: var(--ruimte-3); border-top: var(--lijn-dikte) solid var(--lijn); }
    .afspraakbewaking-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-2); min-height: 28px; }
    .afspraakbewaking-titel { margin: 0; font: var(--rol-label); color: var(--tekst-zacht); }
    .afspraakbewaking-meta { display: inline-flex; align-items: center; gap: var(--ruimte-1); font: var(--rol-klein); color: var(--tekst-zacht); }
    .afspraakbewaking-meta.is-letop { font-weight: 500; color: var(--let-op); }
    .afspraakbewaking-meta .statusstip { width: 6px; height: 6px; }
    .afspraakbewaking .personenpillen { flex: 1 1 auto; gap: var(--ruimte-1); }
    .afspraakbewaking .personenpillen-label {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .afspraakbewaking .personenpillen-reden { display: none; }
    .afspraakbewaking .personenpillen-huidige {
        min-height: 28px; margin-left: -6px; padding: 0 6px; border-color: transparent; background: none; box-shadow: none; font-weight: 500;
    }
    .afspraakbewaking .personenpillen-huidige:hover:not(:disabled) { background: var(--vlak-hover); }
    /* Een teamlid leest wie het bewaakt gewoon; alleen het potlood is gedimd, de reden staat in de title. */
    .afspraakbewaking .personenpillen-huidige:disabled { color: var(--tekst-sterk); opacity: 1; }
    .afspraakbewaking .personenpillen-huidige:disabled .icon { opacity: .45; }
    .afspraakbewaking .personenpillen-huidige .icon { color: var(--tekst-zacht); }
    .afspraakbewaking .eigenschapregel:has(.personenpillen-rij:not([hidden]) .personenpil) .eigenschapregel-waarde { padding-bottom: var(--ruimte-2); }
    .afspraakbewaking-vink { width: 14px; height: 14px; color: var(--goed); }

    /* ── Mijlpalen (#15818): per mijlpaal een rij met de ring; open de voorwaarden met het afvinkrondje. ── */
    .mijlpaalrijen { margin: 0; padding: 0; border-top: var(--lijn-dikte) solid var(--lijn); list-style: none; }
    .mijlpaalrij { border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .mijlpaalrij-kop { display: flex; align-items: center; gap: var(--ruimte-3); width: 100%; min-height: 48px; padding: var(--ruimte-1) var(--ruimte-2); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
    .mijlpaalrij-kop:hover, .mijlpaalrij.is-open > .mijlpaalrij-kop { background: var(--vlak-hover); }
    .mijlpaalrij-naam { flex: 1 1 auto; min-width: 0; font-weight: 500; }
    .mijlpaalrij.is-genomen .mijlpaalrij-naam { color: var(--tekst-sterk); }
    .mijlpaalrij-meta { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ruimte-1) var(--ruimte-2); font: var(--rol-klein); color: var(--tekst-zacht); }
    .mijlpaalrij-meta .is-letop { display: inline-flex; align-items: center; gap: var(--ruimte-1); font-weight: 500; color: var(--let-op); }
    .mijlpaalrij-meta .statusstip { width: 6px; height: 6px; }
    .mijlpaalrij-pijl { flex: none; width: 12px; height: 12px; color: var(--tekst-zacht); transition: transform var(--duur-kort) var(--beweging-standaard); }
    .mijlpaalrij.is-open .mijlpaalrij-pijl { transform: rotate(90deg); }
    .mijlpaalrij-inhoud { display: grid; gap: var(--ruimte-3); padding: var(--ruimte-1) var(--ruimte-2) var(--ruimte-4) 48px; }
    .mijlpaalrij-feit { margin: 0; font: var(--rol-klein); color: var(--tekst-zacht); }
    /* De voorwaarden (Arne, 19 okt): elke regel twee vaste kolommen, het teken (rondje of stip) in een kolom van 24 px en
       de tekst erachter; een melding staat op de regel eronder in de tekstkolom, nooit als smalle kolom rechts. Beide
       lijsten (zelf afvinken en wat GRIP toetst) gebruiken dezelfde kolommen, zodat alles recht onder elkaar staat. */
    .voorwaarden { display: grid; margin: 0; padding: 0; list-style: none; }
    .voorwaarde {
        display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--ruimte-3); align-items: start;
        padding: var(--ruimte-2) 0; border-bottom: var(--lijn-dikte) solid var(--lijn);
    }
    .voorwaarde:last-child { border-bottom: 0; }
    .voorwaarde > :first-child { grid-column: 1; grid-row: 1 / span 2; justify-self: center; align-self: start; margin-top: 2px; }
    .voorwaarde.is-voldaan .voorwaarde-tekst { color: var(--tekst-zacht); }
    .voorwaarde-tekst { grid-column: 2; min-width: 0; }
    .voorwaarde-teken { display: grid; place-items: center; width: 20px; height: 20px; }
    .voorwaarde-meta { grid-column: 2; font: var(--rol-klein); color: var(--tekst-zacht); }
    .voorwaarde.is-automatisch:not(.is-voldaan) .voorwaarde-meta { color: var(--tekst); }
    .voorwaarden-kop { margin: var(--ruimte-2) 0 0; font: var(--rol-label); color: var(--tekst-zacht); }

    /* ── De tab Mijlpalen (B-107, #15995): per fase een blok met de ruit van de fase, de checklist en onderaan de mijlpaal.
       Het antwoord bovenaan in één zin; de fase die loopt staat open. ── */
    .mijlpalen-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ruimte-1) var(--ruimte-4); margin-bottom: var(--ruimte-3); }
    .mijlpalen-antwoord { margin: 0; font: var(--rol-antwoord); color: var(--tekst); }
    .mijlpalen-rechts { font: var(--rol-klein); color: var(--tekst-zacht); }
    .faseruit { display: grid; flex: none; place-items: center; width: 20px; height: 20px; }
    .faseruit.is-genomen .mijlpaal-ruit-rand { fill: var(--tekst-sterk); stroke: var(--tekst-sterk); }
    .faseruit.is-nu .mijlpaal-ruit-rand { fill: var(--vlak-blad); stroke: var(--tekst-sterk); }
    .faseruit.is-onbekend .mijlpaal-ruit-rand { stroke: var(--lijn-onbekend); stroke-dasharray: 2 2; }
    .faseblok:is(.is-vergrendeld, .is-onbekend) .mijlpaalrij-naam { color: var(--tekst-zacht); }
    .faseblok.is-actief .mijlpaalrij-naam { font-weight: 600; }
    .faseblok-stand { display: inline-flex; align-items: center; gap: var(--ruimte-1); }
    .faseblok-stand .icon { width: 12px; height: 12px; }
    .faseblok.is-actief .faseblok-stand { font-weight: 500; color: var(--tekst); }
    .faseblok .mijlpaalrij-inhoud { padding-left: 40px; }
    .mijlpaalregel { display: grid; gap: var(--ruimte-2); padding-top: var(--ruimte-3); border-top: var(--lijn-dikte) solid var(--lijn-sterk); }
    .mijlpaalregel-kop { display: flex; align-items: flex-start; gap: var(--ruimte-3); }
    .mijlpaalregel-teken { display: grid; flex: none; place-items: center; width: 24px; height: 24px; color: var(--accent); }
    .mijlpaalregel-teken .icon { width: 16px; height: 16px; }
    .mijlpaalregel.is-genomen .mijlpaalregel-teken { color: var(--tekst-sterk); }
    .mijlpaalregel-tekst { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
    .mijlpaalregel-naam { margin: 0; font-weight: 600; }
    .mijlpaalregel-kop > .btn { flex: none; }
    .mijlpaalregel-standaard > summary { font: var(--rol-klein); color: var(--tekst-zacht); }
    .mijlpaalregel-standaard > .voorwaarden { margin-top: var(--ruimte-1); }

/* De projectstatus in AFAS onder de mijlpaal (#15996): gezet is een stille regel, de vraag en de fout een strook. */
.mijlpaal-afas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); margin: 0; font: var(--rol-klein); color: var(--tekst-zacht); }
.mijlpaal-afas-teken { display: grid; flex: none; place-items: center; width: 24px; height: 24px; }
.mijlpaal-afas-teken .icon { width: 16px; height: 16px; }
.mijlpaal-afas.is-gezet .mijlpaal-afas-teken { color: var(--goed); }
.mijlpaal-afas.is-vraag, .mijlpaal-afas.is-mislukt { padding: var(--ruimte-2); border-radius: var(--hoek-veld); background: var(--vlak-zacht); color: var(--tekst); }
.mijlpaal-afas.is-mislukt { background: var(--let-op-zacht); }
.mijlpaal-afas.is-mislukt .mijlpaal-afas-teken { color: var(--let-op); }
.mijlpaal-afas-tekst { flex: 1 1 14rem; min-width: 0; }
/* Op de telefoon schuift de knop onder de tekst, op één lijn met de tekst. */
.mijlpaal-afas > .btn { flex: none; margin-left: auto; }
.mijlpaal-afas-tekst > p { margin: 0; }
    .voorwaarden.is-open-regels { margin-bottom: var(--ruimte-2); }

    /* ── Taken (#15818): de knop en de weergave klein boven de lijst. ── */
    .takenbalk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2) var(--ruimte-4); margin-bottom: var(--ruimte-3); font: var(--rol-klein); color: var(--tekst-zacht); }
    .takenbalk .select { width: auto; min-height: 28px; padding-block: 0; font: var(--rol-klein); }
    .projectnotitie-invoer { display: flex; align-items: flex-end; gap: var(--ruimte-2); margin-bottom: var(--ruimte-2); }
    .projectnotitie-invoer .textarea { flex: 1 1 auto; min-height: 0; }
    .uitklapregel-meta { margin-left: auto; font: var(--rol-klein); font-weight: 400; color: var(--tekst-zacht); white-space: nowrap; }

    /* ── Afvinkrondje: grijs open, paars met een wit vinkje als het af is; het popt even. 24 px raakvlak. ── */
    .afvinkrondje {
        display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin: -4px; padding: 0;
        border: 0; border-radius: 50%; background: none; cursor: pointer;
    }
    .afvinkrondje svg { width: 14px; height: 14px; }
    .afvinkrondje-open { fill: none; stroke: var(--lijn-veld); stroke-width: 1.5; }
    .afvinkrondje:hover:not(:disabled) .afvinkrondje-open { stroke: var(--tekst-sterk); }
    .afvinkrondje-vol { fill: var(--accent); }
    .afvinkrondje-vink { fill: none; stroke: var(--tekst-op-donker); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .afvinkrondje.is-af svg { animation: pop 350ms var(--beweging-in); }
    .afvinkrondje:disabled { opacity: .55; cursor: not-allowed; }

    /* ── Prioriteit: drie balkjes van 3 px; donker wat telt. ── */
    .prioriteit { display: flex; flex: none; align-items: flex-end; gap: 1.5px; width: 14px; height: 14px; padding: 1px; }
    .prioriteit i { display: block; width: 3px; border-radius: 1px; background: var(--lijn-sterk); }
    .prioriteit i:nth-child(1) { height: 5px; }
    .prioriteit i:nth-child(2) { height: 8px; }
    .prioriteit i:nth-child(3) { height: 11px; }
    .prioriteit[data-niveau="3"] i, .prioriteit[data-niveau="2"] i:nth-child(-n+2), .prioriteit[data-niveau="1"] i:nth-child(1) { background: var(--tekst-sterk); }

    /* ── Avatar: 24 px, initialen in wit; jij paars, een ander grijs. De letters passen er altijd in (#15818): twee
          letters iets verkleind met minder ruimte ertussen, drie letters nog kleiner (geen eigen lettergrootte, de rol blijft). ── */
    .avatar {
        display: inline-grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
        background: var(--avatar-ander); color: var(--tekst-op-donker); font: var(--rol-label); font-weight: 600; letter-spacing: -.04em; white-space: nowrap;
    }
    .avatar.is-jij { background: var(--avatar-jij); }
    .avatar > span { transform: scale(.88); }
    .avatar.is-lang > span { transform: scale(.72); }

    /* ── Uitklapregel: 40 px, een chevron die draait, de inhoud ingesprongen eronder. ── */
    .uitklapregels { border-top: var(--lijn-dikte) solid var(--lijn); }
    .uitklapregel { border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .uitklapregel-kop { display: flex; align-items: center; gap: 10px; min-height: var(--rij); padding: 0 var(--ruimte-2); list-style: none; font-weight: 500; cursor: pointer; }
    .uitklapregel-kop::-webkit-details-marker { display: none; }
    .uitklapregel-kop:hover { background: var(--vlak-hover); }
    .uitklapregel-kop .icon { flex: none; width: 16px; height: 16px; stroke-width: 1.5; color: var(--tekst-zacht); }
    .uitklapregel-kop .uitklapregel-pijl { width: 12px; height: 12px; transition: transform var(--duur-kort) var(--beweging-standaard); }
    .uitklapregel[open] > .uitklapregel-kop .uitklapregel-pijl { transform: rotate(90deg); }
    .uitklapregel-naam { min-width: 0; }
    .uitklapregel-meta { margin-left: auto; font: var(--rol-klein); font-weight: 400; color: var(--tekst-zacht); white-space: nowrap; }
    .uitklapregel-inhoud { padding: 2px var(--ruimte-2) 14px 54px; color: var(--tekst-sterk); }

    /* ── Notitieregel: een icoon en een korte zin; geen kaart. Fout rood, let op oranje, onbekend gestippeld. ── */
    .notitieregel { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ruimte-1) 10px; padding: 10px 0; color: var(--tekst-sterk); }
    .notitieregel + .notitieregel { border-top: var(--lijn-dikte) solid var(--lijn); }
    .notitieregel-icoon { display: grid; flex: none; place-items: center; width: 16px; height: 19px; color: var(--tekst-zacht); }
    .notitieregel-icoon .icon { width: 14px; height: 14px; stroke-width: 1.5; }
    .notitieregel-tekst { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
    .notitieregel-tekst b { font-weight: 500; color: var(--tekst); }
    .notitieregel-reden { display: block; margin-top: 2px; font: var(--rol-klein); color: var(--tekst-zacht); }
    .notitieregel-acties { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); }
    .notitieregel.is-fout .notitieregel-icoon { color: var(--fout); }
    .notitieregel.is-fout .notitieregel-tekst { color: var(--tekst); }
    .notitieregel.is-letop .notitieregel-tekst { font-weight: 500; color: var(--let-op); }
    .notitieregel.is-onbekend .notitieregel-tekst { color: var(--tekst-zacht); }
    .modal-body .notitieregel { padding: 0; }

    /* ── Urenmeter: het kengetal, een balk van 6 px met 2 px tussen de delen, de legenda als raster. ── */
    .urenmeter { display: grid; min-width: 0; }
    .urenmeter-kop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); }
    .urenmeter-kengetal { color: var(--tekst-zacht); }
    .urenmeter-kengetal b { margin-right: var(--ruimte-1); font: var(--rol-kengetal); letter-spacing: -.025em; color: var(--tekst); font-variant-numeric: tabular-nums; }
    .urenmeter-sub { margin: var(--ruimte-1) 0 0; color: var(--tekst-zacht); }
    .urenmeter-balk { display: flex; gap: 2px; height: 6px; margin: var(--ruimte-3) 0 10px; overflow: hidden; border-radius: 3px; background: var(--grafiek-leeg); }
    .urenmeter-deel { display: block; flex: none; height: 100%; transition: width var(--duur-lang) var(--beweging-in); }
    :is(.urenmeter-deel, .urenmeter-staal).is-geboekt { background: var(--grafiek-geboekt); }
    :is(.urenmeter-deel, .urenmeter-staal).is-gepland { background: var(--grafiek-gepland); }
    :is(.urenmeter-deel, .urenmeter-staal).is-vrij { background: var(--grafiek-rest); }
    :is(.urenmeter-deel, .urenmeter-staal).is-over { background: var(--grafiek-over); }
    :is(.urenmeter-deel, .urenmeter-staal).is-onbekend { background: repeating-linear-gradient(90deg, var(--lijn-onbekend) 0 2px, transparent 2px 4px); }
    .urenmeter.is-onbekend .urenmeter-balk { height: 8px; border: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); background: none; }
    .urenmeter.is-compact { width: 140px; max-width: 100%; }
    .urenmeter.is-compact .urenmeter-balk { margin: 0; }
    .urenmeter-legenda { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--ruimte-2); max-width: 280px; margin: 0; color: var(--tekst-sterk); }
    .urenmeter-regel { display: contents; }
    .urenmeter-regel dt { display: flex; align-items: center; gap: var(--ruimte-2); }
    .urenmeter-regel dd { margin: 0; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
    .urenmeter-staal { flex: none; width: 8px; height: 8px; border-radius: 2px; }
    .urenmeter-staal.is-prognose { width: 12px; height: 0; border-top: var(--lijn-onbekend-dikte) dashed var(--accent); border-radius: 0; background: none; }
    .urenmeter-regel.is-prognose :is(dt, dd) { color: var(--tekst-zacht); }
    .urenmeter-herkomst { display: flex; margin-top: var(--ruimte-2); padding-top: var(--ruimte-2); border-top: var(--lijn-dikte) solid var(--lijn); }
    /* De legenda als rij met de herkomst rechts (de tab Uren, #15819). */
    .urenmeter.is-rij .urenmeter-balk { margin: var(--ruimte-3) 0 var(--ruimte-2); }
    .urenmeter.is-rij .urenmeter-onder { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-1) var(--ruimte-4); }
    .urenmeter.is-rij .urenmeter-legenda { display: flex; flex-wrap: wrap; gap: var(--ruimte-1) 14px; max-width: none; }
    .urenmeter.is-rij .urenmeter-regel { display: flex; align-items: center; gap: 6px; }
    .urenmeter.is-rij .urenmeter-herkomst { margin: 0 0 0 auto; padding: 0; border: 0; }

    /* ── Verloopgrafiek (#15819): lijnen in de grafiekkleuren, de prognose gestippeld, letters in de rol klein. ── */
    .verloopgrafiek { margin: 0; }
    .verloop-svg { display: block; width: 100%; height: auto; overflow: visible; }
    .verloop-svg.is-telefoon { display: none; }
    .verloop-svg text { font: var(--rol-klein); }
    .verloop-raster { stroke: var(--lijn); }
    .verloop-as { fill: var(--tekst-zacht); }
    .verloop-label { fill: var(--tekst-zacht); }
    .verloop-label.is-sterk { fill: var(--tekst-sterk); font-weight: 500; }
    .verloop-label.is-getal { fill: var(--tekst); font-weight: 600; paint-order: stroke; stroke: var(--vlak-blad); stroke-width: 4px; }
    .verloop-label.is-prognose { fill: var(--tekst-zacht); paint-order: stroke; stroke: var(--vlak-blad); stroke-width: 4px; }
    .verloop-prognose-getal { fill: var(--accent); font-weight: 600; }
    .verloop-markering { stroke: var(--lijn-onbekend); stroke-dasharray: 2 3; }
    .verloop-vandaag { stroke: var(--tekst-uit); stroke-dasharray: 2 3; }
    .verloop-budget { stroke: var(--tekst-sterk); stroke-width: 1; }
    .verloop-vlak { fill: var(--grafiek-geboekt); fill-opacity: .08; }
    .verloop-geboekt { fill: none; stroke: var(--grafiek-geboekt); stroke-width: 2; stroke-linejoin: round; }
    .verloop-gepland { fill: none; stroke: var(--grafiek-gepland); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
    .verloop-prognose { stroke: var(--grafiek-geboekt); stroke-width: 1.5; stroke-dasharray: 4 4; }
    .verloop-prognose-punt { fill: var(--vlak-blad); stroke: var(--grafiek-geboekt); stroke-width: 1.5; }
    .verloop-punt { fill: var(--grafiek-geboekt); stroke: var(--vlak-blad); stroke-width: 1.5; }
    .verloop-legenda { display: flex; flex-wrap: wrap; gap: var(--ruimte-1) 14px; margin-top: 2px; font: var(--rol-klein); color: var(--tekst-zacht); }
    .verloop-legenda i { display: inline-block; width: 12px; height: 0; margin-right: 5px; vertical-align: 3px; border-top: 2px solid var(--grafiek-geboekt); }
    .verloop-legenda i.is-gepland { border-top: 3px solid var(--grafiek-gepland); }
    .verloop-legenda i.is-prognose { border-top: 1.5px dashed var(--grafiek-geboekt); }
    .verloop-legenda i.is-budget { border-top: 1px solid var(--tekst-sterk); }

    /* ── Uren per persoon (#15819): avatar, naam, een balk van 6 px, rechts geboekt + gepland. ── */
    .urenperpersoon { margin: 0; padding: 0; list-style: none; }
    .urenperpersoon-regel {
        display: grid; grid-template-columns: 24px minmax(56px, 96px) minmax(0, 1fr) auto; align-items: center; gap: 10px;
        min-height: var(--rij); padding: 6px 0; border-bottom: var(--lijn-dikte) solid var(--lijn);
    }
    .urenperpersoon-regel.is-totaal { border-bottom: 0; color: var(--tekst-zacht); }
    .urenperpersoon-naam { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
    .urenperpersoon-regel.is-totaal .urenperpersoon-naam { font-weight: 400; }
    .urenperpersoon-balk { display: flex; gap: 2px; height: 6px; overflow: hidden; border-radius: 3px; background: var(--grafiek-leeg); }
    .urenperpersoon-uren { min-width: 64px; font-weight: 500; color: var(--tekst-sterk); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .urenperpersoon-uren em { font-style: normal; font-weight: 400; color: var(--tekst-zacht); }

    /* ── De bouwstenen op de telefoon (B-097): de maten van het referentiebeeld, raakvlakken van 44 px. ── */
    @media (max-width: 720px) {
        html:not(.embedded) .schermbalk { min-height: 48px; margin-bottom: var(--ruimte-2); padding: 0 var(--ruimte-1); border-bottom: 0; }
        html:not(.embedded) .kruimelpad-lijst { display: none; }
        html:not(.embedded) .kruimelpad-terug {
            display: inline-flex; align-items: center; gap: 2px; min-height: var(--raak); padding: 0 10px 0 var(--ruimte-1);
            border-radius: var(--hoek-groep); color: var(--tekst-zacht); font-weight: 500; text-decoration: none;
        }
        html:not(.embedded) .kruimelpad-terug .icon { width: 18px; height: 18px; }
        html:not(.embedded) .schermbalk-herkomst, html:not(.embedded) .schermbalk-acties { display: none; }
        html:not(.embedded) .projectkop-knop { min-height: 64px; border-radius: var(--hoek-antwoord); }
        html:not(.embedded) .projectkop-icoon { width: 36px; height: 36px; border-radius: 9px; }
        html:not(.embedded) .projectkop-hint { display: none; }
        html:not(.embedded) .tabrij { gap: var(--ruimte-1); padding: var(--ruimte-2) 0; }
        html:not(.embedded) .tabrij-tab { height: 34px; padding: 0 var(--ruimte-3); border-radius: var(--hoek-uitklap); }
        html:not(.embedded) .tabrij-tab::after { content: ""; position: absolute; inset: -8px 0; }
        html:not(.embedded) .eigenschappen-kop { display: none; }
        html:not(.embedded) .eigenschappen-meer[hidden] { display: none; }
        html:not(.embedded) .eigenschappen { overflow: hidden; border: var(--lijn-dikte) solid var(--lijn); border-radius: var(--hoek-antwoord); }
        html:not(.embedded) .eigenschapregel { grid-template-columns: 136px minmax(0, 1fr); min-height: var(--raak); margin: 0; padding: 6px var(--ruimte-3); border-bottom: var(--lijn-dikte) solid var(--lijn); border-radius: 0; }
        html:not(.embedded) .eigenschapregel-label .icon { display: block; }
        html:not(.embedded) .mijlpaal { min-height: var(--raak); border-bottom: var(--lijn-dikte) solid var(--lijn); }
        html:not(.embedded) .mijlpaal + .mijlpaal::before { display: none; }
        html:not(.embedded) .ring { width: 40px; height: 40px; }
        html:not(.embedded) .mijlpaalkaart { flex-wrap: wrap; gap: var(--ruimte-3); padding: 14px; border-radius: var(--hoek-antwoord); }
        html:not(.embedded) .mijlpaalkaart-tekst { flex-basis: calc(100% - 56px); }
        html:not(.embedded) .mijlpaalkaart-knop { flex-basis: 100%; min-height: var(--raak); border-radius: var(--hoek-groep); }
        html:not(.embedded) .afspraaktegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        html:not(.embedded) .afspraaktegel { border-radius: var(--hoek-groep); }
        html:not(.embedded) .groepskop { height: auto; min-height: var(--raak); padding: 0; border: 0; border-bottom: var(--lijn-dikte) solid var(--lijn); border-radius: 0; background: none; font: var(--rol-kop); color: var(--tekst-zacht); }
        html:not(.embedded) .taakrij {
            display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "rondje titel prio" "rondje meta prio";
            column-gap: 6px; min-height: 60px; padding: var(--ruimte-1) 0; border: 0; border-bottom: var(--lijn-dikte) solid var(--lijn); border-radius: 0;
        }
        html:not(.embedded) .taakrij > .prioriteit { grid-area: prio; }
        html:not(.embedded) .taakrij > .afvinkrondje { grid-area: rondje; width: var(--raak); height: var(--raak); margin: 0 0 0 -12px; }
        html:not(.embedded) .taakrij > .afvinkrondje svg { width: 18px; height: 18px; }
        html:not(.embedded) .taakrij-titel { grid-area: titel; white-space: normal; }
        html:not(.embedded) .taakrij-meta { grid-area: meta; flex-wrap: wrap; margin-top: 3px; }
        html:not(.embedded) .uitklapregel-kop { min-height: var(--ruimte-12); padding: 0; }
        html:not(.embedded) .uitklapregel-inhoud { padding: 0 0 14px 30px; }
        html:not(.embedded) .urenmeter-balk { height: 8px; border-radius: 4px; }
        /* #15818: de klantafspraak als vier rijen, Voor jou en de items als rijen van 60 px, de open details volle breedte. */
        html:not(.embedded) .klantafspraak, html:not(.embedded) .voorjou, html:not(.embedded) .mijlpalen, html:not(.embedded) .projectnotities { margin-top: 26px; }
        html:not(.embedded) .sectiekop-titel { color: var(--tekst-zacht); }
        html:not(.embedded) .afspraakaspecten { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: var(--lijn-dikte) solid var(--lijn); }
        html:not(.embedded) .afspraakaspect > .afspraaktegel { display: none; }
        html:not(.embedded) .afspraakaspect > .afspraakrij { display: grid; flex: 1 1 auto; }
        html:not(.embedded) .afspraakrij.is-open, html:not(.embedded) .afspraakaspect.is-uitgelicht > .afspraakrij { background: var(--vlak-hover); }
        /* De stand geven op de telefoon (#15834): de pil is 44 px hoog te raken, het menu is een blad van onderen. */
        html:not(.embedded) .standkeuze-knop { min-height: var(--raak); }
        html:not(.embedded) .standkeuze-achter { z-index: 1400; background: var(--vlak-overlay); }
        html:not(.embedded) .standkeuze-menu {
            position: fixed; z-index: 1500; top: auto; left: 0; right: 0; bottom: 0; width: auto;
            max-height: calc(100dvh - var(--ruimte-4)); overflow-y: auto;
            padding: var(--ruimte-2) var(--ruimte-2) calc(var(--ruimte-2) + env(safe-area-inset-bottom));
            border-radius: var(--hoek-groep) var(--hoek-groep) 0 0; animation: venster-omhoog var(--duur-middel) var(--beweging-in);
        }
        html:not(.embedded) .standkeuze-kop {
            display: block; padding: var(--ruimte-2) var(--ruimte-3); font: var(--rol-klein); font-weight: 500; color: var(--tekst-zacht); border-bottom: var(--lijn-dikte) solid var(--lijn);
        }
        html:not(.embedded) .standkeuze-item { min-height: var(--raak); padding: 0 var(--ruimte-3); }
        html:not(.embedded) .standkeuze-item.is-sluiten { display: flex; justify-content: center; color: var(--tekst-zacht); }
        html:not(.embedded) .standkeuze-toelichting { padding-left: var(--ruimte-3); }
        html:not(.embedded) .standkeuze-toelichting :is(.input, .btn) { min-height: var(--raak); }
        html:not(.embedded) .afspraakbewaking { margin-top: var(--ruimte-2); padding-top: 0; border-top-width: var(--lijn-dikte); }
        html:not(.embedded) .afspraakbewaking-kop { min-height: var(--raak); padding: 0 var(--ruimte-3); border-bottom: var(--lijn-dikte) solid var(--lijn); }
        html:not(.embedded) .afspraakbewaking .personenpillen-huidige { min-height: var(--raak); }
        html:not(.embedded) .afspraakuitleg { margin: 0 0 var(--ruimte-2); padding: var(--ruimte-3); border-radius: var(--hoek-groep); }
        html:not(.embedded) .afspraakuitleg-label { flex-basis: 96px; }
        html:not(.embedded) .taakrij > .taakrij-soort { grid-area: rondje; width: var(--raak); height: var(--raak); margin: 0 0 0 -12px; }
        html:not(.embedded) .taakrij > .taakrij-soort .icon { width: 18px; height: 18px; }
        html:not(.embedded) .taakrij.is-open, html:not(.embedded) .taakrij.is-uitgelicht { margin-inline: calc(-1 * var(--ruimte-2)); padding-inline: var(--ruimte-2); }
        html:not(.embedded) .taakrij-open { padding: var(--ruimte-2) 0 var(--ruimte-4); border: 0; border-bottom: var(--lijn-dikte) solid var(--lijn); border-radius: 0; }
        html:not(.embedded) .taakrij-leeg { min-height: var(--raak); padding: 0; border: 0; border-bottom: var(--lijn-dikte) solid var(--lijn); border-radius: 0; }
        html:not(.embedded) .itemfeiten > li { grid-template-columns: 112px minmax(0, 1fr); min-height: var(--raak); border-bottom: var(--lijn-dikte) solid var(--lijn); }
        html:not(.embedded) .itemfeiten :is(.inline-datum, .inline-keuze) { min-height: 36px; }
        html:not(.embedded) .itemfeiten > li:last-child { border-bottom: 0; }
        html:not(.embedded) .projectnotities .uitklapregel-kop { flex-wrap: wrap; row-gap: 0; padding-block: var(--ruimte-2); }
        html:not(.embedded) .projectnotities .uitklapregel-naam { flex: 1 1 0; }
        html:not(.embedded) .projectnotities .uitklapregel-meta { flex-basis: 100%; margin-left: 22px; white-space: normal; }
        html:not(.embedded) .mijlpaalrij-kop { min-height: 56px; padding-inline: 0; }
        html:not(.embedded) .mijlpaalrij-meta { flex-basis: 100%; justify-content: flex-start; padding-left: 48px; }
        html:not(.embedded) .mijlpaalrij-kop { flex-wrap: wrap; row-gap: 2px; }
        html:not(.embedded) .mijlpaalrij-pijl { order: 2; }
        html:not(.embedded) .mijlpaalrij-meta { order: 3; }
        /* De inhoud in dezelfde kolom als de naam en de datum: 36 px ring plus de tussenruimte (Arne, 19 okt). */
        html:not(.embedded) .mijlpaalrij-inhoud { padding: var(--ruimte-1) 0 var(--ruimte-4) 48px; }
        html:not(.embedded) .voorwaarde { min-height: var(--raak); }
        html:not(.embedded) .faseblok .mijlpaalrij-meta { padding-left: 32px; }
        html:not(.embedded) .faseblok .mijlpaalrij-inhoud { padding-left: 32px; }
        /* De knop van de mijlpaal onder de naam, in de tekstkolom; niet over de volle breedte (B-065). */
        html:not(.embedded) .mijlpaalregel-kop { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--ruimte-3); row-gap: var(--ruimte-2); }
        html:not(.embedded) .mijlpaalregel-kop > .btn { grid-column: 2; justify-self: start; min-height: var(--raak); }
        /* Compact op de telefoon (B-065): wanneer een regel is afgevinkt staat in het logboek, niet onder elke regel. */
        html:not(.embedded) .checklist .voorwaarde-meta.is-datum { display: none; }
        html:not(.embedded) .voorwaarde > :first-child { margin-top: 3px; }
        /* Het raakvlak 44 px valt buiten de kolom van 24 px (negatieve marge), zodat de kolommen gelijk blijven. */
        html:not(.embedded) .voorwaarde > .afvinkrondje { width: var(--raak); height: var(--raak); margin: -10px; }
        html:not(.embedded) .voorwaarde > .afvinkrondje svg { width: 18px; height: 18px; }
        html:not(.embedded) .takenbalk .select { min-height: var(--raak); }
        html:not(.embedded) .takenbalk .checkbox { min-height: var(--raak); }
        html:not(.embedded) .projectnotitie-invoer { flex-direction: column; align-items: stretch; }
        html:not(.embedded) .projectnotitie-invoer .btn { align-self: flex-start; min-height: var(--raak); }
    }

    /* ══ De overige schermen in de Linear-vorm (#15821): het icoon in de paginakop, de schermbalk van een topscherm, de
       projectregel en de dagengrafiek. Laptop eerst; de telefoon eronder. ══ */

    /* ── Paginakop met het icoon van het scherm, zoals de doos van de Projectkop. Het antwoord eronder lijnt uit met de titel. ── */
    .page-header:has(> .page-icoon) { flex-wrap: nowrap; align-items: center; gap: var(--ruimte-3); }
    .page-icoon {
        display: grid; place-items: center; flex: none; width: 32px; height: 32px; align-self: flex-start; margin-top: 2px;
        border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-uitklap); background: var(--vlak-blad); color: var(--tekst-sterk);
    }
    .page-icoon .icon { width: 18px; height: 18px; stroke-width: 1.5; }
    .page-header:has(> .page-icoon) .page-meta { display: block; margin: 2px 0 0; font: var(--rol-tekst); color: var(--tekst-zacht); }
    .page-header:has(> .page-icoon) + .scherm-antwoord { margin-top: calc(-1 * var(--ruimte-3)); padding-left: calc(32px + var(--ruimte-3)); }

    /* ── Projectregel: de streep, de naam, de stand in een vaste kolom, dan de kolommen van de lijst. ── */
    .projectregels { display: grid; margin: 0; padding: 0; list-style: none; }
    .projectregel {
        position: relative; display: grid; align-items: center; column-gap: var(--ruimte-3); min-height: var(--raak);
        grid-template-columns: 3px minmax(0, 1fr) calc(4 * var(--stip-cel) + var(--ruimte-2)) 150px 170px 170px 16px;
        padding: 0 var(--ruimte-2); border-bottom: var(--lijn-dikte) solid var(--lijn);
    }
    .projectregels.is-planning > .projectregel { grid-template-columns: 3px minmax(0, 1fr) calc(4 * var(--stip-cel) + var(--ruimte-2)) 220px 56px; }
    .projectregels.is-zonder-dossier > .projectregel { grid-template-columns: 3px minmax(0, 1fr) 0 150px 170px auto; }
    .projectregel.is-klikbaar:hover { background: var(--vlak-hover); }
    .projectregel.is-kop { min-height: 32px; font: var(--rol-klein); color: var(--tekst-zacht); }
    /* S P B K boven de vier kolommen van de bolletjes (#15938); de volle naam als tooltip. */
    .projectstand-kolommen { display: inline-grid; grid-auto-flow: column; grid-auto-columns: var(--stip-cel); justify-content: start; justify-items: center; font: var(--rol-label); }
    .projectstand-kolommen abbr { text-decoration: none; cursor: help; }
    .projectregel-streep { width: 3px; height: 18px; border-radius: 2px; background: var(--pk, var(--lijn-sterk)); }
    .projectregel.is-zonder-dossier > .projectregel-streep { background: none; }
    .projectregel-naam { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; }
    .projectregel-naam > .icon { flex: none; width: 14px; height: 14px; stroke-width: 1.5; color: var(--tekst-zacht); }
    .projectregel-titel { min-width: 0; overflow: hidden; padding: 0; border: 0; background: none; color: var(--tekst); font: inherit; font-weight: 500; text-align: left; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
    .projectregel.is-klikbaar .projectregel-titel { cursor: pointer; }
    .projectregel.is-klikbaar .projectregel-titel::after { content: ""; position: absolute; inset: 0; }
    .projectregel.is-klikbaar .projectregel-titel:focus-visible { outline: none; }
    .projectregel.is-klikbaar:has(.projectregel-titel:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
    .projectregel-nummer { flex: none; font: var(--rol-klein); font-family: var(--letter-mono); color: var(--tekst-zacht); }
    .projectregel-sub { display: none; }
    .projectregel-stand, .projectregel-cel :is(button, a) { position: relative; z-index: 1; }
    .projectregel-stand .projectstand-knop { padding-left: 0; }
    .projectregel-cel { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; overflow: hidden; color: var(--tekst-sterk); white-space: nowrap; }
    .projectregel-cel > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .projectregel-cel.is-zacht { font: var(--rol-klein); color: var(--tekst-zacht); }
    .projectregel-cel.is-onbekend { color: var(--tekst-zacht); }
    .projectregel-cel.is-getal { justify-content: flex-end; font-weight: 500; font-variant-numeric: tabular-nums; }
    .projectregel-cel.is-knop { overflow: visible; }
    .projectregel-pijl { width: 14px; height: 14px; color: var(--tekst-uit); }

    /* ── De projectkiezer (#15900): chips met de projectkleur, afgekapt; Ander project… met een lijst van één regel per project. ── */
    .projectkiezer { display: grid; gap: var(--ruimte-2); min-width: 0; }
    .projectkiezer-chips { min-width: 0; }
    .projectkiezer-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
    .projectkiezer-stip { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--pk, var(--tekst-uit)); }
    .projectkiezer-naam { min-width: 0; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .projectkiezer-zoek { display: grid; gap: var(--ruimte-2); min-width: 0; }
    .projectkiezer-lijst { margin: 0; padding: 0; list-style: none; border-top: var(--lijn-dikte) solid var(--lijn); }
    .projectkiezer-rij { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .projectkiezer-kies {
        display: flex; flex: 1 1 auto; align-items: center; gap: var(--ruimte-2); min-width: 0; min-height: var(--raak); padding: 0 var(--ruimte-1);
        border: 0; background: none; color: var(--tekst); font: var(--rol-tekst); text-align: left; cursor: pointer;
    }
    .projectkiezer-kies:hover { background: var(--vlak-hover); }
    .projectkiezer-kies .projectkiezer-naam { flex: 1 1 auto; max-width: none; }
    .projectkiezer-nummer { flex: none; font: var(--rol-klein); color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }
    .projectkiezer-start, .projectkiezer-niet { flex: none; font: var(--rol-klein); white-space: nowrap; }
    .projectkiezer-niet { color: var(--tekst-zacht); }
    /* ── Zoeken in het dossier (#16011): het zoekveld en de soorten als chips met het aantal, boven de tabel. ── */
    .dossierzoek { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2) var(--ruimte-3); margin: 0 0 var(--ruimte-3); }
    .dossierzoek .zoekveld { flex: 0 1 280px; }
    .keuzechip-teller { margin-left: 4px; color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }
    .keuzechip.is-gekozen .keuzechip-teller { color: inherit; }

    /* ── Zoekveld: filtert de lijst op de plek, met / op de laptop; in de schermbalk compact. ── */
    .zoekveld {
        display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 6px 0 var(--ruimte-2);
        border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-veld); background: var(--vlak-blad); color: var(--tekst-zacht); cursor: text;
    }
    .zoekveld:focus-within { border-color: var(--focus); }
    .zoekveld > .icon { flex: none; width: 14px; height: 14px; stroke-width: 1.5; }
    .zoekveld-invoer { flex: 1 1 auto; width: 200px; min-width: 0; padding: 0; border: 0; outline: none; background: none; color: var(--tekst); font: var(--rol-tekst); }
    .zoekveld-invoer::-webkit-search-cancel-button { display: none; }
    .zoekveld > kbd { flex: none; }
    .zoekveld.is-telefoon { display: none; }

    /* ── De telling per stand onder de titel, en de weergaven met Alleen lopend ernaast. ── */
    .standtelling { margin: 0; padding: 0; list-style: none; }
    .standtelling .icon { width: 12px; height: 12px; color: var(--tekst-zacht); }
    .projecten-weergave { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--ruimte-4); margin: 6px 0 var(--ruimte-2); border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .projecten-weergave > .tabrij { flex: 1 1 auto; min-width: 0; margin: 0; border-bottom: 0; }
    .projecten-lopend { flex: none; }
    .projecten-zonder { margin-top: var(--tussen-groepen); }
    .projecten-zonder .groepskop { margin: 0; }
    /* Onder een groepskop krijgen de regels de lijn aan de zijkant, zoals de taakrijen. */
    .groepskop + .projectregels > .projectregel { border-inline: var(--lijn-dikte) solid var(--lijn); }
    .groepskop + .projectregels > .projectregel:last-child { border-radius: 0 0 var(--hoek-veld) var(--hoek-veld); }

    /* ── Dagengrafiek: per werkdag een staaf, gestapeld in de projectkleuren, met een stippellijn op een werkdag. ── */
    .dagengrafiek { display: grid; gap: var(--ruimte-3); margin: 0; padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-3); border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-groep); background: var(--vlak-blad); }
    .dagengrafiek-vlak { position: relative; height: 150px; margin-top: var(--ruimte-4); border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .dagengrafiek-werkdag { position: absolute; left: 0; right: 0; border-top: var(--lijn-dikte) dashed var(--lijn-sterk); }
    .dagengrafiek-werkdag > span { position: absolute; right: 0; bottom: 2px; font: var(--rol-klein); color: var(--tekst-zacht); }
    .dagengrafiek-dagen, .dagengrafiek-labels { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 0; padding: 0; list-style: none; }
    .dagengrafiek-dagen { position: relative; height: 100%; }
    .dagengrafiek-dag { display: flex; align-items: flex-end; justify-content: center; height: 100%; }
    .dagengrafiek-dag.is-nieuwe-week { border-left: var(--lijn-dikte) solid var(--lijn); }
    .dagengrafiek-staaf { position: relative; display: flex; flex-direction: column-reverse; gap: 1px; width: min(40px, 62%); border-radius: 3px 3px 0 0; }
    .dagengrafiek-staaf.is-leeg { height: 2px; background: var(--grafiek-leeg); }
    .dagengrafiek-deel { flex-basis: 0; min-height: 2px; background: var(--pk, var(--reeks-8)); }
    .dagengrafiek-deel:last-child { border-radius: 3px 3px 0 0; }
    .dagengrafiek-waarde { position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); font: var(--rol-label); color: var(--tekst-sterk); white-space: nowrap; }
    .dagengrafiek-dag.is-over .dagengrafiek-waarde { color: var(--fout); }
    .dagengrafiek-labels > li { font: var(--rol-klein); color: var(--tekst-zacht); text-align: center; white-space: nowrap; }
    .dagengrafiek-labels > li.is-vandaag { font-weight: 600; color: var(--tekst); }
    .dagengrafiek-legenda { display: flex; flex-wrap: wrap; gap: var(--ruimte-1) var(--ruimte-4); font: var(--rol-klein); color: var(--tekst-zacht); }
    .dagengrafiek-legenda-item { display: inline-flex; align-items: center; gap: 6px; }
    .dagengrafiek-blokje { width: 8px; height: 8px; border-radius: 2px; background: var(--pk, var(--reeks-8)); }

    @media (max-width: 720px) {
        html:not(.embedded) .schermbalk.is-top { margin-bottom: 0; padding: 0 var(--marge); }
        html:not(.embedded) .schermbalk.is-top .kruimelpad-lijst { display: flex; font: var(--rol-kop); color: var(--tekst); }
        html:not(.embedded) .schermbalk.is-top .kruimelpad-hier .icon { display: none; }
        html:not(.embedded) .schermbalk.is-top .kruimelpad { flex: none; }
        html:not(.embedded) .schermbalk.is-top .schermbalk-herkomst { display: inline-flex; min-width: 0; margin-right: 0; overflow: hidden; }
        html:not(.embedded) .page-header:has(> .page-icoon) { padding-top: var(--ruimte-2); }
        html:not(.embedded) .page-header:has(> .page-icoon) + .scherm-antwoord { margin-top: 0; padding-left: 0; }
        html:not(.embedded) .projectregel,
        html:not(.embedded) .projectregels.is-planning > .projectregel,
        html:not(.embedded) .projectregels.is-zonder-dossier > .projectregel {
            grid-template-columns: 3px minmax(0, 1fr) calc(4 * var(--stip-cel)) auto 14px; grid-template-areas: "streep naam stand rechts pijl";
            column-gap: 10px; min-height: 60px; padding: var(--ruimte-1) 0;
        }
        html:not(.embedded) .projectregels.is-planning > .projectregel { grid-template-columns: 3px minmax(0, 1fr) calc(4 * var(--stip-cel)) 48px 0; }
        html:not(.embedded) .projectregels.is-zonder-dossier > .projectregel { grid-template-columns: 0 minmax(0, 1fr) 0 auto 0; column-gap: var(--ruimte-2); }
        html:not(.embedded) .projectregel.is-kop { display: none; }
        html:not(.embedded) .groepskop + .projectregels > .projectregel { border-inline: 0; border-radius: 0; }
        html:not(.embedded) .projectregel-streep { grid-area: streep; height: 36px; }
        html:not(.embedded) .projectregel-naam { grid-area: naam; flex-wrap: wrap; row-gap: 2px; }
        html:not(.embedded) .projectregel-naam > .icon, html:not(.embedded) .projectregel-nummer { display: none; }
        html:not(.embedded) .projectregel-titel { flex: 1 1 100%; }
        html:not(.embedded) .projectregel-sub { display: block; flex: 1 1 100%; min-width: 0; overflow: hidden; font: var(--rol-klein); color: var(--tekst-zacht); text-overflow: ellipsis; white-space: nowrap; }
        html:not(.embedded) .projectregel-stand { grid-area: stand; }
        html:not(.embedded) .projectregel-cel { display: none; }
        html:not(.embedded) .projectregel-cel.is-rechts { display: flex; grid-area: rechts; justify-content: flex-end; }
        html:not(.embedded) .projectregel-cel.is-knop .btn { min-height: var(--raak); }
        html:not(.embedded) .projectregel-pijl { grid-area: pijl; }
        html:not(.embedded) .dagengrafiek { padding: 0; border: 0; border-radius: 0; background: none; }
        html:not(.embedded) .dagengrafiek-vlak { height: 110px; }
        html:not(.embedded) .dagengrafiek-werkdag > span { display: none; }
        html:not(.embedded) .dagengrafiek-staaf { width: 70%; }
        html:not(.embedded) .zoekveld.is-telefoon { display: flex; min-height: var(--raak); margin-bottom: var(--ruimte-2); padding-inline: var(--ruimte-3); border-radius: var(--hoek-groep); }
        html:not(.embedded) .zoekveld-invoer { font-size: var(--invoer); }
        /* Lopend naast de tabs, op één regel (#15821): de tabs krimpen, het vinkje houdt zijn raakvlak van 44 px. */
        html:not(.embedded) .projecten-weergave { flex-wrap: nowrap; gap: 0 var(--ruimte-2); margin-top: 0; }
        html:not(.embedded) .projecten-weergave > .tabrij { gap: 0; }
        html:not(.embedded) .projecten-weergave .tabrij-tab { padding: 0 var(--ruimte-2); }
        html:not(.embedded) .projecten-lopend { display: inline-flex; align-items: center; gap: 6px; min-height: var(--raak); margin: 0; white-space: nowrap; }
        /* Het AI-voorstel (#15720): de tekst op een eigen regel, zonder inspringen, de knoppen met een raakvlak van 44 px. */
        html:not(.embedded) .aivoorstel { padding: var(--ruimte-3); }
        html:not(.embedded) :is(.aivoorstel-item, .aivoorstel-velden, .aivoorstel-feiten, .aivoorstel-onzeker, .aivoorstel-voet) { padding-left: 0; }
        html:not(.embedded) .aivoorstel-tekst { order: 5; flex-basis: 100%; }
        html:not(.embedded) .aivoorstel-acties .btn { min-width: var(--raak); min-height: var(--raak); }
        html:not(.embedded) .aivoorstel-waarom > summary { min-height: var(--raak); }
    }
}

/* De fase in één regel in het paneel rechts (#16007), en de stap terug bij een fase op de tab Mijlpalen. */
.faseregel { display: flex; align-items: center; gap: var(--ruimte-2); min-height: var(--rij); padding: 0 var(--ruimte-1); border-radius: var(--hoek-veld); font: var(--rol-tekst); color: var(--tekst); text-decoration: none; }
.faseregel:hover { background: var(--vlak-hover); }
.faseregel .icon { width: 16px; height: 16px; flex: none; color: var(--accent); }
.faseregel span { flex: 1 1 auto; min-width: 0; }
.faseregel .faseregel-pijl { color: var(--tekst-zacht); }
.faseregel.is-onbekend { color: var(--tekst-zacht); }
.faseregel.is-onbekend .icon:first-child { color: var(--lijn-onbekend); }
.faseblok-terug { font: var(--rol-klein); font-weight: 600; color: var(--tekst); }
/* De gedeelde basis van een item (#16006): de omschrijving voluit, met de regels zoals ze getypt zijn; extern grijs. */
.itemfeiten .is-voluit .itemfeiten-tekst { white-space: pre-wrap; }
.itemfeiten-extern { color: var(--tekst-zacht); }
.toevoeg-meer { margin-top: var(--ruimte-3); }
.toevoeg-meer > summary { font: var(--rol-klein); color: var(--tekst-zacht); cursor: pointer; }
.toevoeg-meer > .form-grid { margin-top: var(--ruimte-2); }

/* Het team als tabel (#15089): persoon, rol, verantwoordelijk voor, intern of extern; op de telefoon twee lagen per persoon. */
.teamtabel-antwoord { margin: 0 0 var(--ruimte-3); font: var(--rol-klein); color: var(--tekst-zacht); }
.teamtabel-tabel { width: 100%; border-collapse: collapse; font: var(--rol-klein); }
.teamtabel-tabel th, .teamtabel-tabel td { padding: var(--ruimte-2); border-top: var(--lijn-dikte) solid var(--lijn); text-align: left; vertical-align: top; }
.teamtabel-tabel thead th { border-top: 0; font-weight: 600; color: var(--tekst-zacht); }
.teamtabel-persoon { display: grid; gap: 2px; font-weight: 400; }
.teamtabel-naam { color: var(--tekst); font-weight: 600; }
.teamtabel-onder { color: var(--tekst-zacht); }
.teamtabel-voor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-1); }
.teamtabel-tabel .is-onbekend { color: var(--tekst-zacht); }
.teamtabel-actie { width: 1%; white-space: nowrap; text-align: right; }
.teamtabel-leeg { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0; font: var(--rol-klein); color: var(--tekst-zacht); }
.teamtabel-leeg .icon { width: 16px; height: 16px; flex: none; }
.telteam { list-style: none; padding: 0; }
@media (max-width: 720px) {
    .teamtabel-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .teamtabel-tabel, .teamtabel-tabel tbody { display: block; }
    .teamtabel-rij { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "persoon soort actie" "rol rol actie" "voor voor actie"; column-gap: var(--ruimte-2); padding: var(--ruimte-2) 0; border-top: var(--lijn-dikte) solid var(--lijn); }
    .teamtabel-rij > th, .teamtabel-rij > td { padding: 0; border-top: 0; }
    .teamtabel-persoon { grid-area: persoon; }
    .teamtabel-rol { grid-area: rol; color: var(--tekst-zacht); }
    .teamtabel-voor { grid-area: voor; }
    .teamtabel-soort { grid-area: soort; }
    .teamtabel-actie { grid-area: actie; align-self: center; }
    .teamtabel-actie .btn { min-width: var(--raak); min-height: var(--raak); }
    .teamtabel-niets { display: none; }
    .telteam .sectiekop-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .telteam .sectiekop { justify-content: flex-start; }
    .telteam .sectiekop-rechts { margin-left: 0; }
}
/* De geschiedenis van de stand (#16009): een strook per aspect in de tijd, onbekend grijs gestippeld, en de wijzigingen. */
.standverloop-stroken { display: grid; gap: var(--ruimte-1); margin: 0; padding: 0; list-style: none; }
.standverloop-strook { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: var(--ruimte-2); width: 100%; min-height: var(--raak); padding: 0 var(--ruimte-2); border: var(--lijn-dikte) solid transparent; border-radius: var(--hoek-klein); background: none; font: var(--rol-klein); color: var(--tekst-zacht); text-align: left; cursor: pointer; }
.standverloop-strook:hover { background: var(--vlak-hover); }
.standverloop-strook.is-gekozen { border-color: var(--lijn-veld); color: var(--tekst); font-weight: 600; }
.standverloop-balk { display: flex; height: 12px; overflow: hidden; border-radius: 3px; background: var(--vlak-blad); }
.standverloop-vak { height: 100%; min-width: 2px; box-sizing: border-box; }
.standverloop-vak.is-groen { background: var(--goed); }
.standverloop-vak.is-oranje { background: var(--let-op-stip); }
.standverloop-vak.is-rood { background: var(--fout); }
.standverloop-vak.is-onbekend { background: none; border-top: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); border-bottom: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); }
.standverloop-as { display: flex; justify-content: space-between; margin: var(--ruimte-1) 0 0; padding-left: calc(84px + var(--ruimte-4)); padding-right: var(--ruimte-2); font: var(--rol-klein); color: var(--tekst-zacht); }
.standverloop-kop { margin: var(--ruimte-4) 0 var(--ruimte-2); font: var(--rol-label); color: var(--tekst); }
.standverloop-vanaf, .standverloop-leeg { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0 0 var(--ruimte-2); font: var(--rol-klein); color: var(--tekst-zacht); }
.standverloop-vanaf .icon { width: 14px; height: 14px; flex: none; }
.standverloop-momenten { margin: 0; padding: 0; list-style: none; }
.standverloop-moment { display: grid; grid-template-columns: 56px 1fr; gap: var(--ruimte-2); padding: var(--ruimte-2) 0; border-top: var(--lijn-dikte) solid var(--lijn); }
.standverloop-datum { font: var(--rol-klein); color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }
.standverloop-wat { display: grid; gap: 2px; min-width: 0; }
.standverloop-regel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-1); }
.standverloop-regel .is-onbekend { color: var(--tekst-zacht); }
.standverloop-door { font: var(--rol-klein); color: var(--tekst-zacht); }
.standverloop-regel .icon { width: 14px; height: 14px; color: var(--goed); }
.standverloop-moment.is-bevestigd .standverloop-regel { color: var(--tekst-zacht); }
.standverloop-toelichting { font: var(--rol-klein); color: var(--tekst-zacht); overflow-wrap: anywhere; }
.telstand-verloop { margin-top: var(--ruimte-1); padding-left: 0; }
/* ── Samenhang (#15174): onder een geopend item. Bij een risico, besluit of scope eerst de acties in één regel (het
      antwoord), dan de acties en Hangt samen met, ingeklapt; open zoek je erbij en haal je een koppeling weg. ── */
.samenhang { display: grid; gap: var(--ruimte-2); margin-top: var(--ruimte-3); padding-top: var(--ruimte-3); border-top: var(--lijn-dikte) solid var(--lijn); }
.samenhang-acties { display: grid; justify-items: start; gap: var(--ruimte-1); }
.samenhang-antwoord { display: inline-flex; align-items: center; gap: var(--ruimte-2); margin: 0; font: var(--rol-kop); color: var(--tekst); }
.samenhang-antwoord .icon { width: 16px; height: 16px; color: var(--accent); }
.samenhang-antwoord.is-leeg { font: var(--rol-tekst); color: var(--tekst-zacht); }
.samenhang-antwoord.is-leeg .icon { color: var(--tekst-zacht); }
.samenhang-details > summary { display: inline-flex; align-items: center; gap: 6px; min-height: var(--raak); font: var(--rol-label); color: var(--tekst-zacht); cursor: pointer; list-style: none; }
.samenhang-details > summary::-webkit-details-marker { display: none; }
.samenhang-details > summary::after { content: "›"; color: var(--tekst-zacht); transition: transform var(--duur-kort) var(--beweging-standaard); }
.samenhang-details[open] > summary::after { transform: rotate(90deg); }
.samenhang-details > summary .icon { width: 14px; height: 14px; }
.samenhang-regels, .samenhang-kandidaten { display: grid; gap: 2px; margin: 0 0 var(--ruimte-2); padding: 0; list-style: none; }
.samenhang-regel { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: var(--ruimte-2); min-height: 32px; font: var(--rol-klein); }
.samenhang-regel > .icon { width: 16px; height: 16px; color: var(--tekst-zacht); }
.samenhang-regel.is-dicht .samenhang-titel { color: var(--tekst-zacht); }
.samenhang-regel.is-verwijderd .samenhang-titel { color: var(--tekst-uit); text-decoration: line-through; }
.samenhang-tekst { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--ruimte-2); min-width: 0; }
.samenhang-titel { overflow: hidden; flex: 1 1 0; min-width: 0; color: var(--tekst); text-overflow: ellipsis; white-space: nowrap; }
.samenhang-tekst > .samenhang-stand { flex-basis: 100%; }
.samenhang-regel .samenhang-tekst { flex-wrap: wrap; }
.samenhang-stand { color: var(--tekst-zacht); }
.samenhang-aard { flex: none; color: var(--accent); }
/* Op de telefoon staat het blok onder de feiten, die al met een lijn eindigen. */
.telfeiten + .samenhang { padding-top: 0; border-top: 0; }
.samenhang-leeg, .samenhang-onbekend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); margin: 0 0 var(--ruimte-2); font: var(--rol-klein); color: var(--tekst-zacht); }
.samenhang-zoek { display: flex; align-items: center; gap: var(--ruimte-2); max-width: 28rem; }
.samenhang-zoek > .icon { width: 16px; height: 16px; color: var(--tekst-zacht); }
.samenhang-zoek .input { flex: 1; min-height: var(--raak); font-size: var(--invoer); }
.samenhang-kandidaten { margin-top: var(--ruimte-1); max-width: 28rem; }
.samenhang-kandidaat { display: grid; grid-template-columns: 16px minmax(0, 1fr); grid-template-areas: "icoon titel" ". stand"; align-items: center; gap: 0 var(--ruimte-2); width: 100%; min-height: var(--raak); padding: var(--ruimte-1) var(--ruimte-2); border: 0; border-radius: var(--hoek-veld); background: none; text-align: left; font: var(--rol-klein); color: var(--tekst); cursor: pointer; }
.samenhang-kandidaat:hover:not(:disabled) { background: var(--vlak-hover); }
.samenhang-kandidaat:disabled { color: var(--tekst-uit); cursor: not-allowed; }
.samenhang-kandidaat > .icon { grid-area: icoon; width: 16px; height: 16px; color: var(--tekst-zacht); }
.samenhang-kandidaat > .samenhang-titel { grid-area: titel; }
.samenhang-kandidaat > .samenhang-stand { grid-area: stand; }
.toevoeg-koppeling { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0 0 var(--ruimte-3); font: var(--rol-klein); color: var(--tekst-zacht); }
.toevoeg-koppeling .icon { width: 16px; height: 16px; color: var(--accent); }
.toevoeg-koppeling strong { font: var(--rol-kop); color: var(--tekst); }

/* De Microsoft-koppeling onder Instellingen (#16361): de knop op zijn eigen breedte, het account met een vinkje. */
.microsoftkoppeling .btn { align-self: flex-start; }
.microsoftkoppeling-account { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0; }
.microsoftkoppeling-account .icon { width: 16px; height: 16px; flex: none; color: var(--goed); }

/* Opgemaakte tekst (#16455), zoals een antwoord van Rixsi: alinea's, lijsten, vet, code, links en een compacte tabel.
   Nooit HTML uit de tekst; de elementen maakt het component Opgemaakt. */
div.opmaak { container-type: inline-size; }
.opmaak p { margin: 0; }
.opmaak p + p, .opmaak p + .opmaak-lijst, .opmaak .opmaak-lijst + p, .opmaak p + .opmaak-tabel, .opmaak .opmaak-tabel + p { margin-top: var(--ruimte-2); }
.opmaak-lijst { margin: var(--ruimte-1) 0 0; padding-left: 20px; list-style: disc; }
ol.opmaak-lijst { list-style: decimal; }
.opmaak-lijst .opmaak-lijst { list-style: circle; }
.opmaak-lijst li + li { margin-top: 2px; }
.opmaak-lijst .opmaak-lijst { margin-top: 2px; }
.opmaak code { padding: 0 4px; border-radius: var(--hoek-klein); background: var(--vlak-hover); }
.opmaak-link { color: var(--tekst-link); text-decoration: underline; text-underline-offset: 2px; }
.opmaak-tabel { width: 100%; margin-top: var(--ruimte-2); border-collapse: collapse; table-layout: fixed; font: var(--rol-klein); }
.opmaak-tabel th { padding: 4px 6px; border-bottom: var(--lijn-dikte) solid var(--lijn-sterk); color: var(--tekst-zacht); font: var(--rol-label); text-align: left; }
.opmaak-tabel td { padding: 4px 6px; border-bottom: var(--lijn-dikte) solid var(--lijn); vertical-align: top; overflow-wrap: anywhere; }
/* Smal (de telefoon, het paneel van Rixsi): geen horizontaal scrollen, elke rij wordt een kaartje met kolomnaam: waarde. */
@container (max-width: 599px) {
    .opmaak-tabel, .opmaak-tabel tbody, .opmaak-tabel tr, .opmaak-tabel td { display: block; width: 100%; }
    .opmaak-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .opmaak-tabel tr { margin-top: var(--ruimte-2); padding: var(--ruimte-2) var(--ruimte-3); border-radius: var(--hoek-klein); background: var(--vlak-zacht); box-shadow: inset 0 0 0 1px var(--lijn); }
    .opmaak-tabel td { padding: 1px 0; border: 0; }
    .opmaak-tabel td::before { content: attr(data-kop) ": "; color: var(--tekst-zacht); font: var(--rol-label); }
    .opmaak-tabel td:first-child { color: var(--tekst-sterk); font-weight: 600; }
    .opmaak-tabel td:first-child::before { content: none; }
}

@layer componenten {
    /* ══ De werkwijze (#15117, #15171): één fase om te lezen, en wat een versie veranderde ══ */

    .procesfase { display: grid; gap: var(--ruimte-2); padding: var(--ruimte-2) 0 var(--ruimte-3); }
    .procesfase-kop { display: flex; align-items: center; gap: var(--ruimte-2); margin: var(--ruimte-2) 0 0; font: var(--rol-kop); color: var(--tekst); }
    .procesfase-kop .icon { width: 14px; height: 14px; color: var(--accent); }
    .procesfase-groep { margin: var(--ruimte-1) 0 0; font: var(--rol-label); color: var(--tekst-zacht); }
    .procesfase-sub { margin: 0; font: var(--rol-klein); color: var(--tekst-zacht); }
    .procesfase-dod, .procesfase-stappen, .procesfase-voorwaarden { display: grid; gap: var(--ruimte-1); margin: 0; padding: 0; list-style: none; }
    .procesfase-dod li, .procesfase-voorwaarde { display: flex; align-items: flex-start; gap: var(--ruimte-2); }
    .procesfase-dod .icon, .procesfase-voorwaarde > .icon { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--tekst-zacht); }
    .procesfase-stappen li, .procesfase-voorwaarde-tekst { display: grid; gap: 2px; min-width: 0; }
    .procesfase-waarom { font: var(--rol-klein); color: var(--tekst-sterk); }

    .wijzigingslijst { display: grid; margin: 0; padding: 0; list-style: none; }
    .wijziging { display: flex; align-items: flex-start; gap: var(--ruimte-3); padding: var(--ruimte-2) 0; border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .wijziging:last-child { border-bottom: 0; }
    .wijziging-soort { display: inline-flex; flex: none; align-items: center; gap: var(--ruimte-1); width: 96px; font: var(--rol-label); color: var(--tekst-sterk); }
    .wijziging-soort .icon { width: 14px; height: 14px; }
    .wijziging.is-toegevoegd .wijziging-soort .icon { color: var(--goed); }
    .wijziging.is-gewijzigd .wijziging-soort .icon { color: var(--info); }
    .wijziging.is-vervallen .wijziging-soort .icon { color: var(--fout); }
    .wijziging-tekst { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
    .wijziging-wat { font: var(--rol-klein); color: var(--tekst-zacht); }
    .wijzigingslijst-leeg { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0; padding: var(--ruimte-2) 0; font: var(--rol-klein); color: var(--tekst-zacht); }
    .wijzigingslijst-leeg .icon { width: 14px; height: 14px; }
    .wijzigingslijst-meer { margin-top: var(--ruimte-1); }

    /* Of de werkwijze van het project vastgesteld is (#15171), klein naast het antwoord van de tab Mijlpalen. */
    .mijlpalen-standaard { display: inline-flex; align-items: center; gap: var(--ruimte-1); font: var(--rol-klein); color: var(--tekst-zacht); }
    .mijlpalen-standaard .icon { width: 14px; height: 14px; }
    .mijlpalen-standaard.is-vastgesteld .icon { color: var(--goed); }
}