/* Ontwerptaal (8 sep 2026): de gedeelde primitieven van het goedgekeurde
   ontwerp (telefonie-ontwerp/Main, Telefonist, Gesprekken; Overzicht en
   Inrichting van Reserveringen). Prefix ds-, gescoped onder .app-root.
   Geladen vóór telefonie2.css en reserveringen2.css (wwwroot/index.html).

   KEUZE (extractie uit telefonie2.css, 8 sep 2026): elke gedeelde regel
   staat hier één keer, met de oude tf-klasse als tweede selector in
   dezelfde lijst (".app-root .ds-knop, .app-root .tf-knop { … }"). Zo
   blijft Pages/Telefonie2/** letterlijk ongewijzigd, blijven de
   Telefonie-tests (die o.a. .tf-status__los en .tf-rij__tijd lezen) groen,
   en is er nergens een gedupliceerde declaratie. De tf-aliassen zijn een
   overgang: zodra de Telefonie-razor op ds- staat, kan per regel de tweede
   selector weg. Nieuwe features gebruiken uitsluitend ds-; telefonie2.css en
   reserveringen2.css houden alleen nog wat écht van die feature is.

   Wat hier staat (alles feature-vrij):
   - typografie: ds-disp (Bricolage Grotesque 600, -0.01em), ds-num;
   - paginakop met statusregel: ds-page, ds-head, ds-status;
   - secties met kop + hint en de meescrollende inhoudsopgave: ds-form,
     ds-toc-nav/ds-toc, ds-secties/ds-anchor, ds-section, ds-sub/ds-subblok,
     ds-hint/ds-tekst/ds-fouttekst/ds-waarschuwing;
   - velden en controls: ds-veld, ds-invoer, ds-knop (+ --primair, --klein,
     --icoon, --gevaar), ds-link, ds-vink, ds-schakelrij, ds-twee-velden;
   - week met zeven kolommen en twee tijdvakken: ds-week, ds-dag;
   - segmentfilter: ds-segment;
   - één lijstoppervlak met kolomkop, rijen als knoppen en een detail onder
     de open rij: ds-tabel, ds-rij, ds-detail (+ __links, __zij);
     de kolombreedtes komen per feature via --ds-kolommen (en de inspringing
     van het detail via --ds-detail-inspring) op het ds-tabel-element;
   - vaste opslaanbalk: ds-opslaanbalk;
   - lege staat, laden, fout: ds-leeg, ds-laden, ds-fout.

   Ontwerptaal:
   - Alleen thematokens (--app-*), dus licht én donker thema kloppen vanzelf.
     Nergens een hexkleur.
   - Koppen en grote cijfers in 'Bricolage Grotesque' (index.html laadt hem
     al), gewicht 600, letter-spacing -0.01em; lopende tekst blijft de
     app-font. Cijfers altijd tabular-nums, zodat kolommen niet dansen.
   - Goud (--app-primary) alléén voor: actieve/geselecteerde staat, de
     primaire knop, de balk/grafiek en een cijfer dat aandacht vraagt.
   - Hiërarchie door type, witruimte en 1px-lijnen (--app-border), niet
     door geneste kaarten. Eén oppervlak per lijst, verder open secties.
   - Controls: 40px hoog, radius 8px, --app-surface met --app-border.
   prefers-reduced-motion zet de enige animatie (opslaanbalk) stil. */

/* ── Typografische bouwstenen ─────────────────────────────────────────── */
.app-root .ds-disp,
.app-root .tf-disp {
    font-family: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.app-root .ds-num,
.app-root .tf-num {
    font-variant-numeric: tabular-nums;
}

/* ── Pagina-skelet ────────────────────────────────────────────────────── */
.app-root .ds-page,
.app-root .tf-page {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    max-width: 1120px;
    min-width: 0;
}

.app-root .ds-page--form,
.app-root .tf-page--form {
    gap: 2rem;
}

.app-root .ds-page--lijst,
.app-root .tf-page--lijst {
    gap: 1.5rem;
}

.app-root .ds-head,
.app-root .tf-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
}

.app-root .ds-head--lijn,
.app-root .tf-head--lijn {
    align-items: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--app-border);
}

.app-root .ds-head__tekst,
.app-root .tf-head__tekst {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
}

.app-root .ds-head__titel,
.app-root .tf-head__titel {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.15;
    color: var(--app-text-primary);
}

.app-root .ds-head__sub,
.app-root .tf-head__sub {
    margin: 0;
    font-size: .875rem;
    color: var(--app-text-secondary);
    max-width: 60ch;
}

.app-root .ds-head__meta,
.app-root .tf-head__meta {
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

/* Statusregel onder de titel: "Neemt op | +31 … | vestiging | bereikbaar". */
.app-root .ds-status,
.app-root .tf-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .625rem;
    font-size: .875rem;
    color: var(--app-text-secondary);
}

.app-root .ds-status__sep,
.app-root .tf-status__sep {
    color: var(--app-border);
    user-select: none;
}

.app-root .ds-status__aan,
.app-root .tf-status__aan {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--app-success);
}

.app-root .ds-status__uit,
.app-root .tf-status__uit {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--app-text-secondary);
}

.app-root .ds-status__dot,
.app-root .tf-status__dot {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background-color: currentColor;
    flex-shrink: 0;
}

/* Een los onderdeel van de statusregel dat zichzelf kan weglaten (de
   verbruikregel uit Telefonist2Verbruik): het scheidingsteken hoort erbij
   en verdwijnt mee. */
.app-root .ds-status__los:empty,
.app-root .tf-status__los:empty {
    display: none;
}

.app-root .ds-status__los::before,
.app-root .tf-status__los::before {
    content: "|";
    margin-right: .625rem;
    color: var(--app-border);
}

/* Lege staat: een uitnodiging in gewone taal, tussen twee lijnen. */
.app-root .ds-leeg,
.app-root .tf-leeg {
    margin: 0;
    padding: 1.25rem 0;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    font-size: .875rem;
    color: var(--app-text-secondary);
    max-width: 60ch;
}

.app-root .ds-laden,
.app-root .tf-laden {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    color: var(--app-text-secondary);
}

.app-root .ds-fout,
.app-root .tf-fout {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 0;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    font-size: .875rem;
    color: var(--app-text-primary);
}

.app-root .ds-fout__tekst,
.app-root .tf-fout__tekst {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* ── Secties en inhoudsopgave ─────────────────────────────────────────── */
.app-root .ds-form,
.app-root .tf-form {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
}

/* Meescrollende inhoudsopgave; .content-area is de scroller, sticky werkt
   daarbinnen gewoon. Sticky staat op de <nav> (een grid-item, dus zijn
   containing block is de hele rij naast de secties) en niet op de lijst
   erin, die maar zo hoog is als zijn eigen inhoud. */
.app-root .ds-toc-nav,
.app-root .tf-toc-nav {
    position: sticky;
    top: 1.5rem;
    align-self: start;
}

.app-root .ds-toc,
.app-root .tf-toc {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
}

.app-root .ds-toc__link,
.app-root .tf-toc__link {
    display: block;
    padding: .5rem .75rem;
    border-radius: .5rem;
    color: var(--app-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s, background-color .15s;
}

.app-root .ds-toc__link:hover,
.app-root .tf-toc__link:hover {
    color: var(--app-text-primary);
    text-decoration: none;
}

.app-root .ds-toc__link.is-actief,
.app-root .tf-toc__link.is-actief {
    color: var(--app-primary);
    background-color: var(--app-primary-soft);
}

.app-root .ds-toc__link:focus-visible,
.app-root .tf-toc__link:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

.app-root .ds-secties,
.app-root .tf-secties {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    min-width: 0;
}

/* Ankerdoel per sectie; scroll-margin houdt de kop onder de bovenrand. */
.app-root .ds-anchor,
.app-root .tf-anchor {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scroll-margin-top: 1.5rem;
    min-width: 0;
}

.app-root .ds-section,
.app-root .tf-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.app-root .ds-section__kop,
.app-root .tf-section__kop {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.app-root .ds-section__kop--rij,
.app-root .tf-section__kop--rij {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

.app-root .ds-section__titel,
.app-root .tf-section__titel {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--app-text-primary);
}

.app-root .ds-section__hint,
.app-root .tf-section__hint {
    margin: 0;
    font-size: .875rem;
    color: var(--app-text-secondary);
    max-width: 60ch;
}

.app-root .ds-section__teller,
.app-root .tf-section__teller {
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .ds-sub,
.app-root .tf-sub {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--app-text-primary);
}

.app-root .ds-subblok,
.app-root .tf-subblok {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--app-border);
}

.app-root .ds-tekst,
.app-root .tf-tekst {
    margin: 0;
    font-size: .875rem;
    color: var(--app-text-primary);
}

.app-root .ds-hint,
.app-root .tf-hint {
    margin: 0;
    font-size: .8125rem;
    color: var(--app-text-secondary);
    max-width: 60ch;
}

.app-root .ds-fouttekst,
.app-root .tf-fouttekst {
    margin: 0;
    font-size: .8125rem;
    color: var(--app-danger);
}

.app-root .ds-waarschuwing,
.app-root .tf-waarschuwing {
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .8125rem;
    color: var(--app-warning-text);
}

/* ── Velden en controls ───────────────────────────────────────────────── */
.app-root .ds-veld,
.app-root .tf-veld {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
}

.app-root .ds-veld__label,
.app-root .tf-veld__label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--app-text-secondary);
}

.app-root .ds-veld__hint {
    font-size: .75rem;
    color: var(--app-text-secondary);
}

.app-root .ds-twee-velden,
.app-root .tf-twee-velden {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.app-root .ds-invoer,
.app-root .tf-invoer {
    box-sizing: border-box;
    width: 100%;
    height: 2.5rem;
    padding: 0 .75rem;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background-color: var(--app-surface);
    color: var(--app-text-primary);
    font-size: .875rem;
    font-family: inherit;
}

.app-root textarea.ds-invoer,
.app-root textarea.tf-invoer {
    height: auto;
    min-height: 2.5rem;
    padding: .5rem .75rem;
    resize: vertical;
    line-height: 1.45;
}

.app-root .ds-invoer:focus-visible,
.app-root .tf-invoer:focus-visible {
    outline: none;
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px var(--app-primary-soft);
}

.app-root .ds-invoer:disabled,
.app-root .tf-invoer:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.app-root .ds-invoer::placeholder,
.app-root .tf-invoer::placeholder {
    color: var(--app-text-secondary);
    opacity: .8;
}

.app-root .ds-teller,
.app-root .tf-teller {
    margin: .25rem 0 0;
    font-size: .75rem;
    color: var(--app-text-secondary);
}

/* Een schakelrij: tekst links, app-toggle rechts, 1px-lijn erboven. */
.app-root .ds-schakelrij,
.app-root .tf-schakelrij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 0;
    border-top: 1px solid var(--app-border);
    cursor: pointer;
}

.app-root .ds-schakelrij--eerste,
.app-root .tf-schakelrij--eerste {
    border-top: 0;
    padding-top: 0;
}

.app-root .ds-schakelrij__tekst,
.app-root .tf-schakelrij__tekst {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}

.app-root .ds-schakelrij__titel,
.app-root .tf-schakelrij__titel {
    font-size: .875rem;
    color: var(--app-text-primary);
}

.app-root .ds-schakelrij__hint,
.app-root .tf-schakelrij__hint {
    font-size: .8125rem;
    color: var(--app-text-secondary);
}

.app-root .ds-schakelrij .app-toggle:focus-visible,
.app-root .tf-schakelrij .app-toggle:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

.app-root .ds-vink,
.app-root .tf-vink {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: var(--app-text-primary);
    cursor: pointer;
}

.app-root .ds-vink input,
.app-root .tf-vink input {
    accent-color: var(--app-primary);
}

.app-root .ds-vink input:focus-visible,
.app-root .ds-dag__kop input:focus-visible,
.app-root .tf-vink input:focus-visible,
.app-root .tf-dag__kop input:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

.app-root .ds-vinken,
.app-root .tf-vinken {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.25rem;
}

/* Knoppen: 40px, radius 10px. Goud alleen voor de primaire. */
.app-root .ds-knop,
.app-root .tf-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 2.5rem;
    padding: 0 1rem;
    border: 1px solid var(--app-border);
    border-radius: .625rem;
    background-color: transparent;
    color: var(--app-text-primary);
    font-size: .875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s;
}

.app-root .ds-knop:hover:not(:disabled),
.app-root .tf-knop:hover:not(:disabled) {
    background-color: var(--app-secondary-soft);
}

.app-root .ds-knop--primair,
.app-root .tf-knop--primair {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    color: var(--app-surface);
}

.app-root .ds-knop--primair:hover:not(:disabled),
.app-root .tf-knop--primair:hover:not(:disabled) {
    background-color: var(--app-primary-hover);
    border-color: var(--app-primary-hover);
}

/* Een gevaarlijke actie (annuleren, verwijderen): rood, zonder rand --
   geen tweede gevulde knop naast de primaire. */
.app-root .ds-knop--gevaar {
    border-color: transparent;
    color: var(--app-danger);
}

.app-root .ds-knop--gevaar:hover:not(:disabled) {
    background-color: var(--app-danger-soft);
}

.app-root .ds-knop--klein,
.app-root .tf-knop--klein {
    height: 2.25rem;
    padding: 0 .75rem;
    font-size: .8125rem;
    border-radius: .5rem;
}

.app-root .ds-knop--icoon,
.app-root .tf-knop--icoon {
    width: 2.25rem;
    padding: 0;
}

.app-root .ds-knop:disabled,
.app-root .tf-knop:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.app-root .ds-knop:focus-visible,
.app-root .tf-knop:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

/* Een tekstknop: geen rand, secundair, onderstreept bij hover/focus. */
.app-root .ds-link,
.app-root .tf-link {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--app-text-secondary);
    font-size: .8125rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: .2em;
}

/* Een gevaarlijke tekstknop (verwijderen): rood, verder gelijk. */
.app-root .ds-link--gevaar,
.app-root .ds-link--gevaar:hover {
    color: var(--app-danger);
}

.app-root .ds-link:hover,
.app-root .tf-link:hover {
    color: var(--app-text-primary);
}

.app-root .ds-link:focus-visible,
.app-root .tf-link:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
    border-radius: .25rem;
}

/* ── Week: zeven kolommen met twee tijdvakken ─────────────────────────── */
.app-root .ds-week,
.app-root .tf-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .5rem;
}

.app-root .ds-dag,
.app-root .tf-dag {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    align-items: center;
    min-width: 0;
}

.app-root .ds-dag__kop,
.app-root .tf-dag__kop {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    color: var(--app-text-secondary);
    cursor: pointer;
}

.app-root .ds-dag__tijden,
.app-root .tf-dag__tijden {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    width: 100%;
}

.app-root .ds-dag__tijd,
.app-root .tf-dag__tijd {
    height: 2.25rem;
    padding: 0 .25rem;
    text-align: center;
    font-size: .8125rem;
}

.app-root .ds-dag__dicht,
.app-root .tf-dag__dicht {
    box-sizing: border-box;
    height: 4.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--app-border);
    border-radius: .5rem;
    font-size: .75rem;
    color: var(--app-text-secondary);
}

/* ── Vaste opslaanbalk ────────────────────────────────────────────────── */
.app-root .ds-opslaanbalk,
.app-root .tf-opslaanbalk {
    position: sticky;
    bottom: .75rem;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: .75rem 1rem .75rem 1.25rem;
    border: 1px solid var(--app-border);
    border-radius: .75rem;
    background-color: var(--app-surface);
    box-shadow: var(--app-shadow-sm);
    animation: dsOpkomen .25s ease-out;
}

@media (max-width: 767px) {
    .app-root .ds-opslaanbalk,
    .app-root .tf-opslaanbalk {
        bottom: calc(60px + env(safe-area-inset-bottom) + .75rem);
    }
}

.app-root .ds-opslaanbalk__tekst,
.app-root .tf-opslaanbalk__tekst {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: var(--app-text-secondary);
}

.app-root .ds-opslaanbalk__tekst--fout,
.app-root .tf-opslaanbalk__tekst--fout {
    color: var(--app-danger);
}

.app-root .ds-opslaanbalk__tekst--ok,
.app-root .tf-opslaanbalk__tekst--ok {
    color: var(--app-success);
}

.app-root .ds-opslaanbalk__acties,
.app-root .tf-opslaanbalk__acties {
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

@keyframes dsOpkomen {
    from { transform: translateY(.5rem); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* ── Segmentfilter en lijst ───────────────────────────────────────────── */
.app-root .ds-segment,
.app-root .tf-segment {
    display: inline-flex;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--app-border);
    border-radius: .625rem;
    font-size: .8125rem;
    font-weight: 500;
}

.app-root .ds-segment__knop,
.app-root .tf-segment__knop {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem .875rem;
    border: 0;
    border-left: 1px solid var(--app-border);
    background-color: transparent;
    color: var(--app-text-secondary);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s, background-color .15s;
}

.app-root .ds-segment__knop:first-child,
.app-root .tf-segment__knop:first-child {
    border-left: 0;
}

.app-root .ds-segment__knop.is-actief,
.app-root .tf-segment__knop.is-actief {
    color: var(--app-primary);
    background-color: var(--app-primary-soft);
}

.app-root .ds-segment__knop:focus-visible,
.app-root .tf-segment__knop:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: -2px;
}

.app-root .ds-segment__teller,
.app-root .tf-segment__teller {
    font-size: .6875rem;
    opacity: .75;
}

/* Eén oppervlak voor de hele lijst. De feature zet op dit element
   --ds-kolommen (de grid-template-columns van kolomkop en rij) en
   --ds-detail-inspring (de breedte van de eerste kolom, zodat het detail
   onder de open rij op de tweede kolom uitlijnt). */
.app-root .ds-tabel,
.app-root .tf-tabel {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--app-border);
    border-radius: .75rem;
    background-color: var(--app-surface);
    overflow: hidden;
}

.app-root .ds-tabel__kop,
.app-root .ds-rij,
.app-root .tf-tabel__kop,
.app-root .tf-rij {
    display: grid;
    grid-template-columns: var(--ds-kolommen, minmax(0, 1fr) 24px);
    gap: 1rem;
    align-items: center;
    padding: .875rem 1.25rem;
}

.app-root .ds-tabel__kop,
.app-root .tf-tabel__kop {
    padding: .625rem 1.25rem;
    font-size: .75rem;
    color: var(--app-text-secondary);
}

.app-root .ds-rij,
.app-root .tf-rij {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--app-border);
    background-color: transparent;
    color: inherit;
    font: inherit;
    font-size: .875rem;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s;
}

.app-root .ds-rij:hover:not(.is-open),
.app-root .tf-rij:hover:not(.is-open) {
    background-color: var(--app-secondary-soft);
}

/* Geopende rij: licht goud getint. */
.app-root .ds-rij.is-open,
.app-root .tf-rij.is-open {
    background-color: var(--app-primary-soft);
}

.app-root .ds-rij:focus-visible,
.app-root .tf-rij:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: -2px;
}

.app-root .ds-rij__tijd,
.app-root .tf-rij__tijd {
    color: var(--app-text-secondary);
    white-space: nowrap;
}

.app-root .ds-rij.is-open .ds-rij__tijd,
.app-root .tf-rij.is-open .tf-rij__tijd {
    color: var(--app-text-primary);
}

.app-root .ds-rij__titel,
.app-root .tf-rij__titel {
    color: var(--app-text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Beller/duur/status delen op desktop de grid van de rij (display: contents),
   en vouwen op smalle schermen samen tot één metaregel. */
.app-root .ds-rij__meta,
.app-root .tf-rij__meta {
    display: contents;
}

.app-root .ds-rij__status,
.app-root .tf-rij__status {
    min-width: 0;
}

.app-root .ds-rij__chevron,
.app-root .tf-rij__chevron {
    justify-self: end;
    color: var(--app-text-secondary);
}

.app-root .ds-rij.is-open .ds-rij__chevron,
.app-root .tf-rij.is-open .tf-rij__chevron {
    color: var(--app-primary);
}

/* Het detail onder de geopende rij: inhoud links, rechts een open kolom
   (ds-detail__zij) met alleen een linkerlijn. */
.app-root .ds-detail,
.app-root .tf-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2.5rem;
    padding: .5rem 1.25rem 1.5rem calc(var(--ds-detail-inspring, 0px) + 1rem + 1.25rem);
    border-top: 1px solid var(--app-border);
}

.app-root .ds-detail__links,
.app-root .tf-detail__links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.app-root .ds-detail__zij {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-self: start;
    padding-left: 1.25rem;
    border-left: 1px solid var(--app-border);
    min-width: 0;
}

.app-root .ds-detail__samenvatting,
.app-root .tf-detail__samenvatting {
    margin: 0;
    font-size: .875rem;
    color: var(--app-text-primary);
    max-width: 60ch;
}

.app-root .ds-meer,
.app-root .tf-meer {
    display: flex;
    justify-content: center;
    padding-top: .5rem;
}

/* ── Responsief ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .app-root .ds-form,
    .app-root .tf-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-root .ds-form,
    .app-root .tf-form {
        gap: 1.5rem;
    }

    /* Inhoudsopgave als horizontale chips boven de inhoud. */
    .app-root .ds-toc-nav,
    .app-root .tf-toc-nav {
        position: static;
    }

    .app-root .ds-toc,
    .app-root .tf-toc {
        flex-direction: row;
        gap: .375rem;
        overflow-x: auto;
        padding-bottom: .25rem;
        -webkit-overflow-scrolling: touch;
    }

    .app-root .ds-toc__link,
    .app-root .tf-toc__link {
        padding: .375rem .875rem;
        border: 1px solid var(--app-border);
        border-radius: 999px;
    }

    .app-root .ds-toc__link.is-actief,
    .app-root .tf-toc__link.is-actief {
        border-color: var(--app-primary);
    }

    .app-root .ds-tabel__kop,
    .app-root .tf-tabel__kop {
        display: none;
    }

    .app-root .ds-rij,
    .app-root .tf-rij {
        grid-template-columns: minmax(0, 1fr) 24px;
        grid-template-areas:
        "tijd chevron"
        "titel chevron"
        "meta chevron";
        row-gap: .25rem;
        padding: .875rem 1rem;
    }

    .app-root .ds-rij__tijd,
    .app-root .tf-rij__tijd {
        grid-area: tijd; font-size: .8125rem;
    }

    .app-root .ds-rij__titel,
    .app-root .tf-rij__titel {
        grid-area: titel; white-space: normal;
    }

    .app-root .ds-rij__chevron,
    .app-root .tf-rij__chevron {
        grid-area: chevron;
    }

    .app-root .ds-rij__meta,
    .app-root .tf-rij__meta {
        grid-area: meta;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .375rem .75rem;
        font-size: .8125rem;
    }

    .app-root .ds-detail,
    .app-root .tf-detail {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        padding: 1rem 1rem 1.5rem;
    }

    .app-root .ds-detail__zij {
        padding-left: 0;
        padding-top: 1rem;
        border-left: 0;
        border-top: 1px solid var(--app-border);
    }
}

@media (max-width: 720px) {
    .app-root .ds-week,
    .app-root .tf-week {
        grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    }
}

@media (max-width: 600px) {
    .app-root .ds-twee-velden,
    .app-root .tf-twee-velden {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-root .ds-head__titel,
    .app-root .tf-head__titel {
        font-size: 1.5rem;
    }

    .app-root .ds-opslaanbalk__acties,
    .app-root .tf-opslaanbalk__acties {
        width: 100%;
        margin-left: 0;
    }

    .app-root .ds-opslaanbalk__acties .ds-knop,
    .app-root .tf-opslaanbalk__acties .tf-knop {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-root .ds-opslaanbalk,
    .app-root .tf-opslaanbalk {
        animation: none;
    }

    .app-root .ds-toc__link,
    .app-root .ds-knop,
    .app-root .ds-segment__knop,
    .app-root .ds-rij,
    .app-root .tf-toc__link,
    .app-root .tf-knop,
    .app-root .tf-segment__knop,
    .app-root .tf-rij {
        transition: none;
    }
}

/* ── Plankiezer (/trial-expired, ProductPlanKiezer) ──────────────────────── */
/* Gebouwd 8 sep 2026 als tf-kiezer/tf-plan in telefonie2.css voor de
   Telefonist-bundels; op 9 sep 2026 hierheen verhuisd als ds-primitief toen
   de kiezer generiek werd (Reserveringen-plan). De pagina valt onder
   LandingLayout; de kiezer wikkelt zichzelf in .app-root zodat de tokens en
   de ds-primitieven gelden. Plannen naast elkaar, gescheiden door
   1px-lijnen -- geen geneste kaarten. Eén plan (data-aantal="1") staat in
   één kolom op de volle breedte. */
.app-root.ds-kiezer {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 3rem 1.5rem 4rem;
}

.app-root .ds-kiezer__inhoud {
    width: 100%;
    max-width: 760px;
}

.app-root .ds-kiezer__periode {
    margin-bottom: 1rem;
}

.app-root .ds-plannen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
}

.app-root .ds-plannen[data-aantal="1"] {
    grid-template-columns: minmax(0, 1fr);
}

.app-root .ds-plan {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.5rem 0;
    min-width: 0;
}

.app-root .ds-plan + .ds-plan {
    border-left: 1px solid var(--app-border);
    padding-left: 2rem;
}

.app-root .ds-plannen:not([data-aantal="1"]) .ds-plan:first-child {
    padding-right: 2rem;
}

.app-root .ds-plan__naam {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--app-text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.app-root .ds-plan__prijs {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.app-root .ds-plan__bedrag {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--app-text-primary);
}

.app-root .ds-plan__periode {
    font-size: .875rem;
    color: var(--app-text-secondary);
}

.app-root .ds-plan__voordeel {
    margin: -.25rem 0 0;
    color: var(--app-primary);
}

.app-root .ds-plan__lijst {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .375rem;
    font-size: .875rem;
    color: var(--app-text-primary);
}

.app-root .ds-plan__lijst li::before {
    content: "\2013\00a0";
    color: var(--app-text-secondary);
}

.app-root .ds-plan__knop {
    margin-top: auto;
    align-self: flex-start;
}

.app-root .ds-kiezer__reden {
    min-height: 5rem;
    height: auto;
    padding: .625rem .75rem;
    resize: vertical;
}

.app-root .ds-kiezer__acties {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

/* Melding bovenaan een scherm na terugkeer van de Mollie-checkout
   (AbonnementGestartMelding: Telefonie2/Dashboard, Reserveringen-overzicht). */
.app-root .ds-melding {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 0;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
}

.app-root .ds-melding i {
    color: var(--app-primary);
}

@media (max-width: 640px) {
    .app-root .ds-plannen {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-root .ds-plan + .ds-plan {
        border-left: 0;
        border-top: 1px solid var(--app-border);
        padding-left: 0;
    }

    .app-root .ds-plannen:not([data-aantal="1"]) .ds-plan:first-child {
        padding-right: 0;
    }
}