/* GRIP, de telefoon-app (ADR-0006, B-098, B-099, feature #15895): een eigen schil met de onderbalk Start · Projecten ·
   (+) · Vragen · Inbox, en eigen schermen voor de consultant. De vorm, de maten en het gedrag komen uit het prototype dat
   Arne koos (GRIP.Ideeën/04-ux/prototypes/telefoon-app). Alles hangt aan .app-shell.is-telefoon of aan een eigen klasse
   tel…: de dienst Weergave zet de schil alleen tot en met 720 px en buiten AFAS InSite, dus hier staat geen breedtegrens.
   Een scherm zonder telefoonversie houdt de laptopweergave (telefoon.css) in deze schil.
   Regels (B-098): een regel kapt af met …, een taak of item in twee lagen (titel op hooguit twee regels, klein de bijzaak
   eronder, #15926), de hele regel tikbaar, niets tikbaars rechts onder de duim; bovenaan
   de eerste handeling of het filter; paars is het enige accent; onbekend is grijs gestippeld, nooit nul; 44 px raakvlak. */

@layer telefoon {
    /* ── De schil ── */
    .app-shell.is-telefoon {
        /* de onderbalk (64 px) en de middenknop die er 18 px boven uitsteekt */
        --tel-onder: calc(96px + env(safe-area-inset-bottom));
        background: var(--vlak-blad);
    }
    .app-shell.is-telefoon .app-page { padding: 0 var(--marge) var(--tel-onder); }
    .app-shell.is-telefoon .melding-plek { bottom: calc(76px + env(safe-area-inset-bottom)); }
    .app-shell.is-telefoon:has(.opnamebalk) .melding-plek { bottom: calc(136px + env(safe-area-inset-bottom)); }

    /* ── De onderbalk: vier tabs en de ronde vastlegknop in het midden ── */
    .telbalk {
        position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 76px minmax(0, 1fr) minmax(0, 1fr); align-items: center;
        height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
        background: var(--vlak-blad); border-top: var(--lijn-dikte) solid var(--lijn);
    }
    .telbalk-tab {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        height: 100%; min-height: var(--raak); color: var(--tekst-zacht); font: var(--rol-label); text-decoration: none;
    }
    .telbalk-tab:hover { text-decoration: none; }
    .telbalk-tab .icon { width: 22px; height: 22px; stroke-width: 1.6; }
    .telbalk-tab.is-actief { color: var(--tekst); }
    .telbalk-tab.is-actief .icon { stroke-width: 2; }
    .telbalk-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: var(--hoek-uitklap); }
    .telbalk-icoon { position: relative; display: grid; }
    .telbalk-badge {
        position: absolute; top: -4px; left: 14px; display: grid; place-items: center;
        min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--hoek-rond);
        background: var(--accent); color: var(--tekst-op-donker); font: var(--rol-label); font-weight: 600; line-height: 16px;
    }
    .telbalk-badge.is-onbekend { width: 12px; min-width: 12px; height: 12px; padding: 0; background: var(--vlak-blad); border: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); }
    .telbalk-midden { display: grid; place-items: center; }
    .telbalk-plus {
        display: grid; place-items: center; width: 56px; height: 56px; margin-top: -18px; border-radius: 50%;
        background: var(--actie-hoofd); color: var(--actie-hoofd-tekst);
        box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
        transition: background var(--duur-middel) var(--beweging-standaard), color var(--duur-middel) var(--beweging-standaard), box-shadow var(--duur-middel) var(--beweging-standaard);
    }
    .telbalk-plus:hover { text-decoration: none; }
    .telbalk-plus:active { background: var(--actie-hoofd-hover); }
    .telbalk-plus .icon { width: 26px; height: 26px; stroke-width: 2; }
    .telbalk-plus:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
    /* Stil zolang er al een paarse hoofdactie in beeld is (Leg vast, Neem over, Bewaar; js/telefoon.js): nooit twee paarse vlakken tegelijk (B-099, B-101). */
    html.hoofdactie-in-beeld .telbalk-plus { background: var(--vlak-blad); color: var(--accent); box-shadow: var(--schaduw-zwevend), inset 0 0 0 1px var(--lijn-sterk); }

    /* ── Liggend (#15922, B-101): links een smal menu met dezelfde navigatie, rechts de telefoonschermen ──
       De dienst Weergave zet html.liggend op een aanraakscherm met een korte zijde onder 600 px, ook breder dan 720 px;
       dan gelden de telefoonmaten uit tokens.css, en scrolt de pagina zelf, zoals staand. */
    html.liggend .app-shell.is-telefoon {
        --tel-links: calc(72px + env(safe-area-inset-left));
        --tel-onder: calc(var(--ruimte-6) + env(safe-area-inset-bottom));
        flex-direction: column; height: auto; overflow: visible;
    }
    html.liggend .app-shell.is-telefoon .app-main { height: auto; margin: 0; overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
    html.liggend .app-shell.is-telefoon .app-page { padding: 0 calc(var(--marge) + env(safe-area-inset-right)) var(--tel-onder) calc(var(--tel-links) + var(--marge)); }
    html.liggend .app-shell.is-telefoon .melding-plek { bottom: calc(var(--ruimte-4) + env(safe-area-inset-bottom)); }
    .telbalk.is-liggend {
        top: 0; right: auto; width: var(--tel-links); height: auto;
        display: flex; flex-direction: column; justify-content: center; gap: var(--ruimte-1);
        padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left);
        border-top: 0; border-right: var(--lijn-dikte) solid var(--lijn);
    }
    .telbalk.is-liggend .telbalk-tab { flex: none; height: 52px; }
    .telbalk.is-liggend .telbalk-midden { padding: var(--ruimte-1) 0; }
    .telbalk.is-liggend .telbalk-plus { width: 48px; height: 48px; margin-top: 0; }
    html.liggend .telvoet, html.liggend .telgesprek-invoer { left: var(--tel-links); bottom: env(safe-area-inset-bottom); }
    html.liggend .telblad { left: var(--tel-links); }

    /* ── De kop van een scherm: ‹ terug, de regel erboven, de titel op één regel ── */
    .telkop { padding-top: 6px; }
    .telkop.is-top { display: flex; align-items: center; min-height: 52px; }
    .telkop.is-top .telkop-rij { flex: 1 1 auto; }
    /* De kopbalk (#15919, B-101): ‹ terug blijft bovenaan staan, over de volle breedte. Scrolt de titel eronder weg
       (js/telefoon.js zet is-gescrold), dan schuift de projectnaam erin, één regel, afgekapt; een tik brengt je naar boven. */
    .telkopbalk {
        position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--ruimte-1);
        height: 48px; margin: 0 calc(-1 * var(--marge)); padding: 0 var(--marge) 0 calc(var(--marge) - var(--ruimte-2));
        background: var(--vlak-blad); transition: box-shadow var(--duur-kort) var(--beweging-standaard);
    }
    .telkopbalk.is-gescrold { box-shadow: 0 1px 0 var(--lijn); }
    .telkopbalk-titel {
        display: flex; flex: 1 1 0; align-items: center; gap: var(--ruimte-2); min-width: 0; min-height: var(--raak); padding: 0;
        border: 0; background: none; color: var(--tekst); font: var(--rol-tekst); font-weight: 600; text-align: left; cursor: pointer;
        visibility: hidden; opacity: 0; transform: translateY(6px);
        transition: opacity var(--duur-kort) var(--beweging-standaard), transform var(--duur-kort) var(--beweging-standaard), visibility 0s linear var(--duur-kort);
    }
    .telkopbalk.is-gescrold .telkopbalk-titel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
    /* Met een item-blad open staat het project ook in de kopbalk, boven het blad (#15919). */
    .app-shell.is-telefoon:has(.modal-overlay) .telkopbalk { box-shadow: 0 1px 0 var(--lijn); }
    .app-shell.is-telefoon:has(.modal-overlay) .telkopbalk-titel { visibility: visible; opacity: 1; transform: none; }
    .telkopbalk-titel:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--hoek-uitklap); }
    .telkopbalk-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* ‹ met een lange naam (#15926): kapt af met …, nooit van het scherm af; schuift de titel erin, dan hooguit de helft. */
    .telkop-terug { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 2px; min-width: 0; max-width: 100%; height: var(--raak); padding: 0 10px 0 2px; color: var(--tekst-zacht); font-weight: 500; text-decoration: none; }
    .telkop-terug-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .telkopbalk.is-gescrold .telkop-terug, .app-shell.is-telefoon:has(.modal-overlay) .telkop-terug { max-width: 50%; }
    .telkop-terug:hover { text-decoration: none; }
    .telkop-terug .icon { flex: none; width: 20px; height: 20px; }
    .telkop-boven { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0; overflow: hidden; color: var(--tekst-zacht); font: var(--rol-klein); white-space: nowrap; }
    .telkop-boven > span:last-child { overflow: hidden; text-overflow: ellipsis; }
    .telkop-streep { flex: none; width: 4px; height: 14px; border-radius: 2px; background: var(--pk); }
    .telkop-streep.is-zonder { background: var(--lijn-hover); }
    .telkop-rij { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; }
    .telkop-titel { flex: 1 1 auto; min-width: 0; margin: 2px 0 0; font: var(--rol-titel); letter-spacing: -.02em; color: var(--tekst); }
    .telkop-titel > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .telkop-knop { display: flex; align-items: center; gap: 6px; width: 100%; min-height: var(--raak); padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
    .telkop-knop > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .telkop-pijl { flex: none; width: 18px; height: 18px; color: var(--tekst-uit); transition: transform var(--duur-kort) var(--beweging-standaard); }
    .telkop-knop[aria-expanded="true"] .telkop-pijl { transform: rotate(180deg); }

    /* De korte naam in de eigenschappen (#15926): een duim groot, en het veld over de hele breedte van de waarde. */
    .teleigenschappen .kortenaam, .teleigenschappen .kortenaam-vorm { width: 100%; }
    .teleigenschappen .kortenaam-knop { min-height: var(--raak); }
    /* De hele naam uit AFAS (#15926) loopt door op de volgende regel in plaats van af te kappen: daar is hij voor. */
    .telfeit-voluit { flex: 1 1 auto; min-width: 0; padding: var(--ruimte-2) 0; white-space: normal; overflow-wrap: anywhere; }

    /* ── Een lege regel: een pictogram en één zin ── */
    /* De tab Mijlpalen is op de telefoon hetzelfde paneel als op de laptop (#15995). */
    .telregel-paneel { padding: var(--ruimte-2) 0 0; }
    .telregel-leeg { display: flex; align-items: center; gap: 10px; min-height: 52px; margin: 0; border-bottom: var(--lijn-dikte) solid var(--lijn); color: var(--tekst-zacht); }
    .telregel-leeg .icon { flex: none; width: 20px; height: 20px; color: var(--tekst-uit); }
    .telregel-leeg.is-onbekend .icon { color: var(--tekst-zacht); }

    .telregel-leeg.is-fout { color: var(--fout); }
    .telregel-leeg.is-fout .icon { color: var(--fout); }
    .telregel-leeg .spinner { flex: none; width: 14px; height: 14px; border-width: 2px; }
    .telregel-link { margin-left: auto; display: inline-flex; align-items: center; min-height: var(--raak); padding: 0 var(--ruimte-1); color: var(--accent); font-weight: 500; white-space: nowrap; }

    /* ── Lijsten en groepskoppen: elke regel één regel, de hele regel tikbaar ── */
    .tellijst { margin: 0; padding: 0; list-style: none; border-top: var(--lijn-dikte) solid var(--lijn); }
    .telgroep { display: flex; align-items: center; gap: var(--ruimte-2); min-height: 20px; margin: 22px 0 var(--ruimte-1); font: var(--rol-kop); color: var(--tekst-zacht); }
    .telgroep-teller { color: var(--tekst-zacht); font-weight: 500; }
    .telgroep-teller.is-onbekend { display: inline-block; width: 10px; height: 10px; border: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); border-radius: 50%; }
    /* S P B K boven de bolletjes (#15938): één knop met een raakvlak van 44 px; een tik toont een klein blad. */
    .telkolommen {
        position: relative; display: grid; grid-template-columns: repeat(4, var(--stip-cel)); margin-left: auto; padding: 0;
        border: 0; background: none; color: var(--tekst-zacht); font: var(--rol-label); cursor: pointer;
    }
    .telkolommen::after { content: ""; position: absolute; inset: -12px -4px; }
    .telkolommen abbr { text-align: center; text-decoration: none; }
    .telkolommen:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
    .telkolommen-blad {
        width: min(260px, calc(100vw - 2 * var(--ruimte-4))); margin: auto; padding: var(--ruimte-2) var(--ruimte-3) var(--ruimte-3);
        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;
    }
    .telkolommen-blad:not(:popover-open) { display: none; }
    @supports (position-area: bottom) {
        .telkolommen-blad { inset: auto; margin: var(--ruimte-1) 0; position-area: bottom span-left; position-try-fallbacks: flip-block; }
    }
    .telkolommen-kop { display: flex; align-items: center; justify-content: space-between; color: var(--tekst-zacht); font: var(--rol-label); }
    .telkolommen-sluit { display: grid; place-items: center; width: var(--raak); height: var(--raak); margin-right: calc(-1 * var(--ruimte-3)); border: 0; background: none; color: var(--tekst-zacht); }
    .telkolommen-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--ruimte-3); }
    .telkolommen-lijst.is-standen { margin-top: var(--ruimte-2); padding-top: var(--ruimte-2); border-top: var(--lijn-dikte) solid var(--lijn); }
    .telkolommen-regel { display: flex; align-items: center; gap: var(--ruimte-1); min-width: 0; }
    .telkolommen-letter { display: grid; flex: none; place-items: center; width: var(--stip-cel); color: var(--tekst-zacht); font: var(--rol-label); }

    /* ── Start: GRIP en de dag, de grote knop Leg vast, Te verwerken ── */
    .telstart-kop { display: flex; align-items: center; gap: var(--ruimte-2); min-height: 52px; padding-top: 6px; }
    .telstart-logo { margin: 0; font: var(--rol-kop); font-weight: 700; letter-spacing: .04em; color: var(--logo); }
    .telstart-dag { margin-left: auto; color: var(--tekst-zacht); font: var(--rol-klein); }
    .telmenu-knop { display: grid; place-items: center; width: var(--raak); height: var(--raak); margin-right: calc(-1 * var(--ruimte-2)); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tekst-zacht); cursor: pointer; }
    .telmenu-knop .icon { width: 20px; height: 20px; }
    .telmenu-item { display: flex; align-items: center; gap: var(--ruimte-3); width: 100%; min-height: var(--raak); padding: 0; border: 0; border-bottom: var(--lijn-dikte) solid var(--lijn); background: none; color: var(--tekst); text-align: left; cursor: pointer; }
    .telmenu-item .icon { flex: none; width: 18px; height: 18px; color: var(--tekst-zacht); }
    a.telmenu-item { text-decoration: none; }
    .telmenu-item:disabled { color: var(--tekst-uit); cursor: not-allowed; }
    .tellegvast {
        display: flex; align-items: center; gap: 14px; width: 100%; height: 64px; margin-top: var(--ruimte-1); padding: 0 var(--ruimte-4) 0 10px;
        border-radius: 16px; background: var(--actie-hoofd); color: var(--actie-hoofd-tekst); font: var(--rol-antwoord);
        box-shadow: var(--schaduw-knop); text-decoration: none;
    }
    .tellegvast:hover { text-decoration: none; }
    .tellegvast:active { background: var(--actie-hoofd-hover); }
    .tellegvast:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
    .tellegvast-icoon { display: grid; place-items: center; width: var(--raak); height: var(--raak); border-radius: 50%; background: color-mix(in srgb, var(--actie-hoofd-tekst) 16%, transparent); }
    .tellegvast-icoon .icon { width: 22px; height: 22px; }
    .telinbox {
        display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 16px; gap: var(--ruimte-2); align-items: center;
        width: 100%; min-height: 48px; margin-top: var(--ruimte-2); padding: 0 var(--ruimte-1);
        border-bottom: var(--lijn-dikte) solid var(--lijn); color: var(--tekst); font-weight: 500; text-decoration: none;
    }
    .telinbox:hover { text-decoration: none; }
    .telinbox:active { background: var(--vlak-hover); }
    .telinbox > .icon { width: 20px; height: 20px; color: var(--tekst-sterk); }
    .telinbox .telinbox-pijl { width: 16px; height: 16px; color: var(--tekst-uit); }
    .telinbox-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .telinbox-teller { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--hoek-rond); background: var(--accent-zacht); color: var(--actie-hoofd-hover); font: var(--rol-label); font-weight: 600; }
    .telinbox-teller.is-onbekend { min-width: 14px; width: 14px; height: 14px; padding: 0; background: none; border: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); }

    /* ── Een taak in twee lagen (#15926), zoals Todoist en Microsoft To Do: rondje (44 px raakvlak) | de titel op hooguit
       twee regels, daaronder klein en grijs prio · datum · project. Het rondje staat gelijk met de eerste regel: de titel
       begint 12 px onder de rand en is 20 px hoog, het midden ligt op 22 px, het midden van het raakvlak ook. ── */
    .teltaak { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; min-height: 52px; border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .teltaak-vak { display: grid; place-items: center start; height: var(--raak); }
    .teltaak .afvinkrondje { width: var(--raak); height: var(--raak); margin: 0 0 0 -10px; }
    .teltaak .afvinkrondje svg { width: 22px; height: 22px; }
    .teltaak .afvinkrondje-open { stroke: var(--pk, var(--lijn-veld)); stroke-width: 1.6; }
    .teltaak .afvinkrondje-vol { fill: var(--pk, var(--accent)); }
    .teltaak-open {
        display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0;
        min-height: 52px; margin-right: -6px; padding: 12px 6px 11px var(--ruimte-2); border: 0; border-radius: var(--hoek-uitklap); background: none; color: var(--tekst); text-align: left; cursor: pointer;
    }
    .teltaak-open:active { background: var(--vlak-hover); }
    .teltaak-open:focus-visible { outline-offset: -2px; }
    .teltaak-titel { display: -webkit-box; overflow: hidden; font: var(--rol-regel); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
    .teltaak-bij { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; color: var(--tekst-zacht); font: var(--rol-bijzaak); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .teltaak-bij .prioriteit { width: 12px; height: 12px; padding: 0; }
    .teltaak-datum.is-verlopen { color: var(--fout); font-weight: 500; }
    .teltaak-bij > :not(.teltaak-project) { flex: none; }
    .teltaak-project { display: flex; flex: 0 1 auto; align-items: center; gap: 5px; min-width: 0; }
    .teltaak-project > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .teltaak-project > i { flex: none; width: 3px; height: 11px; border-radius: 2px; background: var(--pk, var(--lijn-hover)); }
    .teltaak.is-af .teltaak-titel { color: var(--tekst-zacht); text-decoration: line-through; text-decoration-color: var(--lijn-sterk); }
    .teltaak .avatar { margin-left: 3px; }

    /* ── Een project: streepje | klein de klant, eronder de korte naam (#15926) | vier bolletjes in vaste kolommen; de hele
       regel is één link ── */
    .telproject { border-bottom: var(--lijn-dikte) solid var(--lijn); }
    .telproject-open {
        display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0; border: 0; background: none;
        color: var(--tekst); text-align: left; text-decoration: none; cursor: pointer;
    }
    .telproject-open:hover { text-decoration: none; }
    .telproject-open:active { background: var(--vlak-hover); }
    .telproject-streep { flex: none; width: 4px; height: 32px; border-radius: 2px; background: var(--pk); }
    .telproject-tekst { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: var(--ruimte-2) 0; }
    .telproject-klant { overflow: hidden; color: var(--tekst-zacht); font: var(--rol-bijzaak); text-overflow: ellipsis; white-space: nowrap; }
    .telproject-naam { overflow: hidden; font: var(--rol-regel); text-overflow: ellipsis; white-space: nowrap; }
    /* Zonder dossier: geen stand, dus op de plek van de bolletjes de reden; de naam gewoon zwart. */
    .telproject-geen { display: inline-flex; flex: none; align-items: center; gap: 5px; color: var(--tekst-zacht); font: var(--rol-klein); white-space: nowrap; }
    .telproject-geen .icon { width: 14px; height: 14px; }
    .telproject .projectstand-knop { padding: 0; }

    /* ── Zoeken, de keuze Mijn · Alle en de filterchips (B-099 punt 6) ── */
    .telzoek { display: flex; align-items: center; gap: var(--ruimte-2); height: var(--raak); padding: 0 var(--ruimte-3); border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-antwoord); color: var(--tekst-zacht); }
    .telzoek:focus-within { border-color: var(--lijn-hover); }
    .telzoek .icon { flex: none; width: 20px; height: 20px; }
    .telzoek input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--tekst); font-size: var(--invoer); }
    .telsegment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin-top: var(--ruimte-2); padding: 2px; border-radius: var(--hoek-groep); background: var(--vlak-hover); }
    .telsegment button { min-height: var(--raak); padding: 0 var(--ruimte-2); border: 0; border-radius: var(--hoek-uitklap); background: none; color: var(--tekst-zacht); font-weight: 500; text-align: center; cursor: pointer; }
    .telsegment button.is-actief { background: var(--vlak-blad); color: var(--tekst); box-shadow: var(--schaduw-uitklap), 0 0 0 1px var(--lijn); }
    .telsegment-teller { color: var(--tekst-zacht); }
    /* Chips lopen door naar een volgende regel, nooit buiten beeld: 8 px tussen de chips, opzij en tussen de regels. */
    .telchips { display: flex; flex-wrap: wrap; gap: 0 8px; margin: var(--ruimte-1) 0 0; padding: var(--ruimte-1) 0; }
    .telchip {
        position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; margin: 4px 0; padding: 0 var(--ruimte-3);
        border: 0; border-radius: var(--hoek-rond); background: none; box-shadow: inset 0 0 0 1px var(--lijn-sterk);
        color: var(--tekst-sterk); font: var(--rol-klein); font-weight: 500; white-space: nowrap; cursor: pointer;
    }
    /* het raakvlak 44 px hoog, de chip zelf 34 */
    .telchip::after { content: ""; position: absolute; inset: -5px 0; }
    .telchip .icon { width: 15px; height: 15px; color: var(--tekst-zacht); }
    .telchip.is-actief { background: var(--vlak-hover); box-shadow: inset 0 0 0 1.5px var(--tekst-sterk); color: var(--tekst); }
    .telchip-stip { width: 8px; height: 8px; border-radius: 50%; }
    .telchip-stip.is-oranje { background: var(--let-op-stip); }
    .telchip-stip.is-rood { background: var(--fout); }
    .telchip-stip.is-groen { background: var(--goed); }
    .telchip-stip.is-onbekend { border: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); }
    .telkolomkop { display: flex; justify-content: flex-end; min-height: 20px; margin: 18px 0 var(--ruimte-1); }

    /* ── Een blad (Venster) op de telefoon: de titel groot, de feiten, één knop over de breedte ── */
    .telblad-titel { margin: 0 0 var(--ruimte-3); font: var(--rol-antwoord); color: var(--tekst); }
    .telfeiten { border-top: var(--lijn-dikte) solid var(--lijn); }
    .app-shell.is-telefoon .modal-footer .telblad-knop { flex: 1 1 0; min-height: 48px; justify-content: center; }
    /* Wijzig (#15925) links naast de ene handeling, zo smal als het woord */
    .app-shell.is-telefoon .modal-footer .telblad-wijzig { flex: none; min-height: 48px; gap: 6px; }
    .telblad-wijzig .icon { width: 16px; height: 16px; }
    .telfeit {
        display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: var(--ruimte-3); align-items: center;
        min-height: var(--raak); border-bottom: var(--lijn-dikte) solid var(--lijn); color: var(--tekst); text-decoration: none;
    }
    .telfeit.met-bron { grid-template-columns: 108px minmax(0, 1fr) 72px; }
    .telfeit.is-link { grid-template-columns: 108px minmax(0, 1fr) 16px; }
    .telfeit.is-link:hover { text-decoration: none; }
    .telfeit.is-link:active { background: var(--vlak-hover); }
    .telfeit-label { color: var(--tekst-zacht); }
    .telfeit-waarde { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; overflow: hidden; font-weight: 500; white-space: nowrap; }
    .telfeit-waarde > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .telfeit-waarde .is-verlopen { color: var(--fout); }
    .telfeit-waarde .is-zacht, .telfeit-waarde .is-onbekend { color: var(--tekst-zacht); font-weight: 400; }
    .telfeit-bron { overflow: hidden; color: var(--tekst-zacht); font: var(--rol-label); font-weight: 400; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
    .telfeit-pijl { width: 16px; height: 16px; color: var(--tekst-uit); }
    .telfeit-waarde > .telfeit-klant { flex: 0 3 auto; color: var(--tekst-zacht); font: var(--rol-klein); }
    .telfeit-streep { flex: none; width: 4px; height: 14px; border-radius: 2px; background: var(--pk); }
    .telfeit .avatar { width: 22px; height: 22px; }
    /* Een datum of keuze in het blad (#15940): de waarde met een klein pictogram; de keuze van het apparaat ligt er
       onzichtbaar overheen, zodat de hele waarde een duim groot tikbaar is. */
    .telfeit-kies { position: relative; display: flex; align-items: center; gap: var(--ruimte-2); width: 100%; min-width: 0; min-height: var(--raak); cursor: pointer; }
    .telfeit-kies > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .telfeit-kies-pijl { flex: none; width: 14px; height: 14px; color: var(--tekst-zacht); }
    .telfeit-kies.is-uit { cursor: not-allowed; }
    .telfeit-kies.is-uit .telfeit-kies-pijl { color: var(--tekst-uit); }
    .telfeit-kiezer { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }

    /* ── De projectpagina (#15901): eigenschappen, de stand als vier blokjes, de mijlpaal, Vraag ── */
    .teleigenschappen { margin-top: 6px; }
    .telstand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ruimte-1); margin-top: var(--ruimte-4); }
    .telstand-blok {
        display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 60px; padding: var(--ruimte-2) 5px 7px 7px;
        overflow: hidden; border: 0; border-top: 4px solid; border-radius: var(--hoek-groep); text-align: left; cursor: pointer;
    }
    .telstand-blok small { overflow: hidden; color: var(--tekst-sterk); font: var(--rol-label); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
    .telstand-blok b { overflow: hidden; font: var(--rol-label); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
    .telstand-blok.is-groen { background: color-mix(in srgb, var(--goed-zacht) 35%, var(--vlak-blad)); border-color: var(--goed); }
    .telstand-blok.is-groen b { color: var(--goed); }
    .telstand-blok.is-oranje { background: color-mix(in srgb, var(--let-op-zacht) 35%, var(--vlak-blad)); border-color: var(--let-op-stip); }
    .telstand-blok.is-oranje b { color: var(--let-op); }
    .telstand-blok.is-rood { background: color-mix(in srgb, var(--fout-zacht) 35%, var(--vlak-blad)); border-color: var(--fout); }
    .telstand-blok.is-rood b { color: var(--fout); }
    .telstand-blok.is-onbekend { padding-left: 6px; background: var(--vlak-blad); border: var(--lijn-dikte) dashed var(--lijn-onbekend); border-top: 4px dashed var(--lijn-onbekend); }
    .telstand-blok.is-onbekend b { color: var(--tekst-zacht); }
    .telstand-blok[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--tekst-sterk); }
    .telstand-uitleg { margin-top: var(--ruimte-2); padding: 10px var(--ruimte-3); border: var(--lijn-dikte) solid var(--lijn); border-radius: var(--hoek-groep); background: var(--vlak-zacht); color: var(--tekst-sterk); }
    .telstand-uitleg p { margin: 0; }
    .telbron { display: flex; align-items: center; gap: 5px; margin-top: var(--ruimte-1); color: var(--tekst-zacht); font: var(--rol-label); font-weight: 400; }
    .telstand-uitleg .telbron { margin-top: var(--ruimte-1); }
    .telbron .icon { width: 12px; height: 12px; }
    .telmijlpaal {
        display: flex; align-items: center; gap: var(--ruimte-3); width: 100%; min-height: 56px; margin-top: var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-3);
        border: var(--lijn-dikte) solid var(--lijn); border-radius: var(--hoek-antwoord); color: var(--tekst); text-decoration: none;
    }
    .telmijlpaal:hover { text-decoration: none; }
    .telmijlpaal:active { background: var(--vlak-hover); }
    .telmijlpaal .ring { width: 40px; height: 40px; }
    .telmijlpaal-tekst { flex: 1 1 auto; min-width: 0; }
    .telmijlpaal-tekst b, .telmijlpaal-tekst small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .telmijlpaal-tekst b { font-weight: 600; }
    .telmijlpaal-tekst small { color: var(--tekst-zacht); font: var(--rol-klein); }
    .telmijlpaal-pijl { flex: none; width: 16px; height: 16px; color: var(--tekst-uit); }
    .telvraag {
        display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; margin-top: var(--ruimte-3); padding: 0 14px;
        border: var(--lijn-dikte) solid var(--lijn-sterk); border-radius: var(--hoek-antwoord); color: var(--tekst-sterk); font-weight: 500; text-decoration: none;
    }
    .telvraag:hover { text-decoration: none; }
    .telvraag:active { background: var(--vlak-hover); }
    .telvraag .icon { width: 20px; height: 20px; color: var(--tekst-zacht); }

    /* ── De onderdelen: pictogram | naam | aantal | kenmerk, in vaste kolommen ── */
    .telonderdeel {
        display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px 76px; gap: 10px; align-items: center;
        min-height: 52px; border-bottom: var(--lijn-dikte) solid var(--lijn); color: var(--tekst); text-decoration: none;
    }
    .telonderdeel:hover { text-decoration: none; }
    .telonderdeel:active { background: var(--vlak-hover); }
    .telonderdeel > .icon { width: 18px; height: 18px; color: var(--tekst-zacht); justify-self: center; }
    .telonderdeel-naam { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
    .telonderdeel-aantal { justify-self: end; color: var(--tekst-sterk); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .telonderdeel-aantal.is-onbekend { width: 12px; height: 12px; border: var(--lijn-onbekend-dikte) dashed var(--lijn-onbekend); border-radius: 50%; }
    .telonderdeel-kenmerk { display: flex; align-items: center; justify-content: flex-end; gap: 5px; overflow: hidden; color: var(--tekst-zacht); font: var(--rol-klein); white-space: nowrap; }
    .telonderdeel-kenmerk.is-rood { color: var(--fout); }
    .telonderdeel-kenmerk .ring { width: 18px; height: 18px; }
    .telonderdeel-kenmerk .ring-getal { display: none; }
    .telonderdeel-kenmerk .telchip-stip { width: 7px; height: 7px; }
    .telminibalk { display: flex; gap: 1px; width: 64px; height: 6px; overflow: hidden; border-radius: 3px; background: var(--grafiek-leeg); }
    .telminibalk i { display: block; height: 100%; background: var(--grafiek-geboekt); }
    .telminibalk i.is-over { background: var(--grafiek-over); }
    .telminibalk.is-onbekend { background: none; border: var(--lijn-dikte) dashed var(--lijn-onbekend); }
    .telavatars { display: flex; }
    .telavatars .avatar { width: 22px; height: 22px; margin-left: -5px; box-shadow: 0 0 0 1.5px var(--vlak-blad); }

    /* ── Een regel in een onderdeel, in twee lagen zoals de taak (#15926): beeld | de tekst op hooguit twee regels, daaronder
       klein en grijs de bijzaken (wie · wanneer). De lijn zit in de vaste linkerkolom en de vaste tussenruimte. ── */
    .telregel { border-bottom: var(--lijn-dikte) solid var(--lijn); }
    /* De regel steekt 6 px uit naar beide kanten, met 6 px binnenruimte: de tekst staat recht met de lijst, en een
       uitgelichte of gefocuste regel heeft rondom lucht, zodat niets tegen of over de rand loopt. */
    .telregel-open {
        display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start;
        width: calc(100% + 12px); min-height: 52px; margin: 0 -6px; padding: 12px 6px 11px; border: 0; border-radius: var(--hoek-uitklap);
        background: none; color: var(--tekst); text-align: left;
    }
    .telregel.is-team .telregel-open, .telregel.is-mijlpaal .telregel-open { grid-template-columns: 28px minmax(0, 1fr); }
    button.telregel-open { cursor: pointer; }
    button.telregel-open:active { background: var(--vlak-hover); }
    button.telregel-open:focus-visible { outline-offset: -2px; }
    /* Het item dat open staat: alleen de regel zelf licht op, zonder de rand van .is-uitgelicht, die tegen de tekst lag. */
    .telregel.is-uitgelicht { outline: none; border-radius: 0; background: none; animation: none; }
    .telregel.is-uitgelicht .telregel-open { background: var(--vlak-zacht); }
    /* Het beeld staat gelijk met de eerste regel: even hoog als de regelhoogte van de titel. */
    .telregel-beeld { display: grid; place-items: center; height: 1.25rem; color: var(--tekst-zacht); }
    .telregel-beeld .icon { width: 18px; height: 18px; }
    .telregel-beeld.is-rood { color: var(--fout); }
    .telregel-beeld.is-oranje { color: var(--let-op); }
    .telregel-beeld .ring { width: 24px; height: 24px; }
    .telregel-beeld .ring-getal { display: none; }
    .telregel-beeld:not(.is-volgende) .ring-boog { stroke: var(--lijn-hover); }
    .telregel-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .telregel-titel { display: -webkit-box; overflow: hidden; font: var(--rol-regel); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
    .telregel-titel.is-vet { font-weight: 600; }
    .telregel-titel.is-zacht { color: var(--tekst-zacht); }
    .telregel-bij { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; color: var(--tekst-zacht); font: var(--rol-bijzaak); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .telregel-kolom { display: inline-flex; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .telregel-kolom:empty { display: none; }
    /* Een punt tussen twee bijzaken, zoals Arne · 22 okt. */
    .telregel-kolom:not(:empty) ~ .telregel-kolom:not(:empty)::before { content: "·"; margin-right: var(--ruimte-2); color: var(--tekst-uit); }
    .telregel-kolom.is-rood { color: var(--fout); font-weight: 500; }
    .telgenomen { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--goed-zacht); color: var(--goed); }
    .telgenomen .icon { width: 14px; height: 14px; stroke-width: 2.2; }
    .telvoorwaarden { display: flex; gap: 2px; }
    .telvoorwaarden i { width: 7px; height: 10px; border-radius: 2px; background: var(--lijn-sterk); }
    .telvoorwaarden i.is-voldaan { background: var(--goed); }
    .telfeit.is-voorwaarde { grid-template-columns: 24px minmax(0, 1fr); }
    .telvoorwaarde { display: grid; place-items: center; width: 14px; height: 14px; border: var(--lijn-onbekend-dikte) dashed var(--lijn-hover); border-radius: 50%; }
    .telvoorwaarde.is-voldaan { border: 0; color: var(--goed); }
    .telvoorwaarde .icon { width: 16px; height: 16px; }
    .telmeter { margin-top: var(--ruimte-3); padding: var(--ruimte-3); border: var(--lijn-dikte) solid var(--lijn); border-radius: var(--hoek-antwoord); }
    .tellijst.is-uren { border-top: 0; }
    .telregel-uren { padding: var(--ruimte-1) 0; }

    /* ── Vegen (#15923, B-101): de regel volgt de vinger; erachter de kleur en het pictogram van de handeling ──
       Naar rechts staat de handeling links achter de regel, naar links rechts. Voorbij de drempel (is-voorbij) wordt de
       kleur vol. touch-action: pan-y laat verticaal scrollen aan de browser, zijwaarts aan js/telefoon.js. */
    .telveeg { position: relative; overflow: hidden; touch-action: pan-y; }
    .telveeg-voor { position: relative; z-index: 1; background: var(--vlak-blad); }
    .telveeg.is-vegen .telveeg-voor { box-shadow: var(--schaduw-uitklap); }
    .telveeg-achter { position: absolute; inset: 0; display: none; }
    .telveeg.is-vegen .telveeg-achter { display: block; }
    .telveeg-kant {
        position: absolute; inset: 0; display: none; align-items: center; gap: var(--ruimte-2); padding: 0 var(--ruimte-4);
        background: var(--vlak-hover); color: var(--tekst-zacht); font: var(--rol-klein); font-weight: 600;
        transition: background var(--duur-kort) var(--beweging-standaard), color var(--duur-kort) var(--beweging-standaard);
    }
    .telveeg-kant .icon { width: 22px; height: 22px; transition: transform var(--duur-kort) var(--beweging-standaard); }
    .telveeg-kant.is-links { justify-content: flex-end; }
    .telveeg[data-kant="rechts"] .telveeg-kant.is-rechts, .telveeg[data-kant="links"] .telveeg-kant.is-links { display: flex; }
    .telveeg.is-voorbij .telveeg-kant { color: var(--tekst-op-donker); }
    .telveeg.is-voorbij .telveeg-kant .icon { transform: scale(1.15); }
    .telveeg.is-voorbij .telveeg-kant.is-accent { background: var(--accent); }
    .telveeg.is-voorbij .telveeg-kant.is-neutraal { background: var(--tekst-zacht); }
    .telveeg.is-voorbij .telveeg-kant.is-fout { background: var(--fout); }
    .telveeg-kant.is-accent { color: var(--accent); }
    .telveeg-kant.is-fout { color: var(--fout); }
    /* Een kant die nu niet kan (#15923): stil grijs, met de reden. */
    .telveeg-kant.is-geweigerd { color: var(--tekst-zacht); }

    @media (prefers-reduced-motion: reduce) {
        .telbalk-plus, .telkop-pijl, .telkopbalk, .telkopbalk-titel, .telveeg-kant, .telveeg-kant .icon { transition: none; }
        .telveeg.is-voorbij .telveeg-kant .icon { transform: none; }
    }
}