/* PrivaSearch: de gedeelde taal van de website, de aanmeldpagina's en de werkruimte-app.

   Dit bestand is gewone CSS, zonder Tailwind en zonder build. Het wordt op twee manieren gebruikt:
   - de Blade-pagina's (marketing/layout en layout) koppelen het rechtstreeks, vóór marketing.css en
     app.css, via Asset::url('priva.css');
   - resources/css/tenant-app.css importeert het in de laag `components` van de app, zodat de build van
     de werkruimte-app dezelfde regels bevat.
   Een waarde staat dus op één plek. Wie hier iets wijzigt, wijzigt de website én de app: draai
   `npm test` (tokens.test.ts leest dit bestand als deel van de stylesheet van de app) en `npm run build`.

   Geen @import, geen url(), geen @font-face en geen @layer in dit bestand (een lettertype is hier alleen
   een naam; de bestanden koppelt de pagina zelf, zie App\Support\Asset::fonts()): de pagina's draaien onder een
   strikte CSP en de app zet de laag er zelf omheen. */

/* ==== HERBRUIKBAAR BLOK 1 VAN 2: DE TOKENS (:root) ====================================================
   Alles tussen deze regel en het einde van :root is de taal van de app: kleuren, glas, diepte en
   beweging. Een andere stylesheet (de Blade-pagina's van de applicatie) kan dit blok overnemen.

   Huisstijl v2 van PrivaSearch als tokens. Componenten gebruiken de schalen uit @theme hieronder
   (text-ink, bg-paper, rounded-panel) en nooit een losse hexwaarde. Alleen licht: geen dark-varianten.

   Contrast (WCAG 2.1 AA), bewaakt door resources/js/tenant-app/__tests__/tokens.test.ts:
   - tekst (ink, muted, success, danger, warning, info) haalt 4,5:1 op elk vlak waarop ze staat;
   - de rand van een veld (field-border) en de focusring halen 3:1 op het vlak eromheen.
   De Blade-werkruimte gebruikte #637873 voor gedempte tekst (4,41:1 op het papier) en #cad6ce voor
   de rand van een veld (1,5:1 op wit); die twee zijn hier donkerder.

   Glas, diepte en beweging (7 oktober 2026). De pagina heeft een zachte achtergrond in de eigen
   groenen en het warme papier (--priva-mesh-*); de zijbalk, de bovenbalk, panelen, vensters en
   meldingen zijn doorschijnende lagen daarboven. Drie afspraken, bewaakt door dezelfde test:
   - een glaslaag is een vulkleur met een dekking (--priva-glass-*, een percentage). De test rekent
     het contrast uit op het slechtste geval eronder: de donkerste tint van de achtergrond voor een
     laag die in de pagina ligt, de donkerste kleur van de app voor een laag die over inhoud schuift
     (bovenbalk, venster, melding). De rand van een veld is daarvoor donkerder geworden
     (#7d928c werd #6c827b): ze haalt nu 3:1 op elke tint van de achtergrond;
   - zonder backdrop-filter is elke glaslaag de dekkende vulkleur (de regels buiten @supports);
   - alle beweging staat in één blok onder prefers-reduced-motion: no-preference. Wie minder
     beweging vraagt, krijgt geen animatie en geen verschuiving, alleen de eindtoestand. */
:root {
    color-scheme: light;

    --priva-ink: #153e3a;
    --priva-muted: #566b66;
    --priva-paper: #f7f8f5;
    --priva-surface: #ffffff;
    --priva-sidebar: #e4eee5;
    --priva-soft: #e5eee3;
    --priva-line: #dbe3dd;
    --priva-field-border: #6c827b;
    --priva-primary: #163c37;
    --priva-primary-hover: #27544c;
    --priva-on-primary: #ffffff;
    --priva-accent: #2f6b5c;
    --priva-focus: #3e8466;
    --priva-neutral-bg: #edf0e8;
    --priva-success: #286541;
    --priva-success-bg: #e2f1e5;
    --priva-danger: #8c392a;
    --priva-danger-bg: #fff0ec;
    --priva-warning: #7a4b00;
    --priva-warning-bg: #fdf3dc;
    --priva-info: #1d4f7a;
    --priva-info-bg: #e6f0f8;

    /* Wat op glas moet opvallen. De omlijning is de rand van een secundaire knop, een schakelaar en
       een neutraal label: minstens 3:1 op elk vlak. Een label (rol, status) heeft een eigen, voller
       getinte vulling per betekenis, dekkend, zodat het als informatie leest en niet als knop. */
    --priva-outline: #4d6861;
    --priva-badge-neutral: #d8e6dc;
    --priva-badge-success: #c9e6d1;
    --priva-badge-warning: #f8e2ae;
    --priva-badge-danger: #f8d8ce;
    --priva-badge-info: #d2e3f3;

    --priva-radius-panel: 8px;
    --priva-radius-control: 6px;
    --priva-radius-label: 4px;
    --priva-target: 44px;

    /* De koppen: Noto Serif Regular (Light viel op onze maten weg tegen de lopende tekst). Zonder de
       build, of als het bestand niet laadt, de serif van het apparaat. Alleen gewicht 400 wordt
       geladen: een kop met dit lettertype krijgt dit gewicht. */
    --priva-font-heading: "Noto Serif", ui-serif, Georgia, "Times New Roman", serif;
    --priva-heading-weight: 400;

    /* De lopende tekst: Source Sans 3 (400, 500, 600 en 700 zitten in de build). Zonder de build het
       lettertype van het apparaat. */
    --priva-font-sans: "Source Sans 3", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* De achtergrond van de pagina: drie lichte tinten die in het papier uitlopen. */
    --priva-mesh-sage: #d9eadf;
    --priva-mesh-mint: #d5eae4;
    --priva-mesh-warm: #f3ead6;

    /* Glas: de dekking van de vulkleur per laag, de vervaging erachter en de lichte binnenrand. */
    --priva-glass-panel: 66%;
    --priva-glass-sidebar: 60%;
    --priva-glass-soft: 62%;
    --priva-glass-bar: 78%;
    --priva-glass-float: 94%;
    --priva-glass-tone: 84%;
    --priva-glass-field: 92%;
    --priva-glass-blur: 18px;
    --priva-glass-saturate: 1.5;
    --priva-glass-edge: inset 0 1px 0 color-mix(in srgb, var(--priva-surface) 85%, transparent);

    /* Diepte: drie treden, elk een omgevingsschaduw met een richtschaduw, zacht en groen getint. */
    --priva-shadow-tint: #0e3a31;
    --priva-shadow-1:
        0 1px 2px color-mix(in srgb, var(--priva-shadow-tint) 5%, transparent),
        0 3px 8px -2px color-mix(in srgb, var(--priva-shadow-tint) 7%, transparent);
    --priva-shadow-2:
        0 2px 4px color-mix(in srgb, var(--priva-shadow-tint) 5%, transparent),
        0 10px 24px -6px color-mix(in srgb, var(--priva-shadow-tint) 12%, transparent);
    --priva-shadow-3:
        0 4px 10px color-mix(in srgb, var(--priva-shadow-tint) 7%, transparent),
        0 24px 56px -12px color-mix(in srgb, var(--priva-shadow-tint) 22%, transparent);

    --priva-shadow-inset: inset 0 1px 2px color-mix(in srgb, var(--priva-shadow-tint) 8%, transparent);

    /* Beweging: drie duren en twee curves. De veer is alleen voor een laag die verschijnt. */
    --priva-duration-fast: 150ms;
    --priva-duration: 200ms;
    --priva-duration-slow: 250ms;
    --priva-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --priva-ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);

    /* Een icoon in de zijbalk komt tot leven onder de muis (12 oktober 2026): het tekent zichzelf
       opnieuw, lijn voor lijn, of maakt zijn eigen beweging. Dat is geen overgang van een vlak maar
       een kleine tekening, en duurt daarom langer dan de drie duren hierboven. Ze heeft een eigen
       curve die rustig begint en rustig eindigt: met de steile `--priva-ease-out` is een lijn in een
       paar beelden getekend en leest de beweging als een hapering. */
    --priva-icon-draw: 700ms;
    --priva-icon-move: 750ms;
    --priva-icon-stagger: 110ms;
    --priva-ease-icon: cubic-bezier(0.65, 0, 0.35, 1);

    /* Laden (7 oktober 2026). Een plaatshouder is een egaal blok in één tint, zichtbaar op elk vlak
       waar hij kan staan: minstens 1,3:1 op een paneel, het zoekpaneel, de zijbalk en elke tint van
       de pagina (geen tekstcontrast, wel bewaakt door dezelfde test). De glans is een lichte band
       van de vulkleur van een paneel die eroverheen trekt. Alleen wat op de server wacht herhaalt
       zich: de glans, de draaier in een knop en de voortgangslijn, elk met een eigen omlooptijd. */
    --priva-skeleton-fill: #b7cbc0;
    --priva-skeleton-shine: 55%;
    --priva-loop-shimmer: 1600ms;
    --priva-loop-spin: 800ms;
    --priva-loop-progress: 1400ms;
}

/* ==== HERBRUIKBAAR BLOK 2 VAN 2: DE KLASSEN ===========================================================
   Lagen (mesh, glass-*), diepte (elev-*, lift), tinten (tone-*), bediening (field, select, switch) en
   beweging (motion, enter-*, het blok onder prefers-reduced-motion). Geen van deze klassen hangt van
   Vue of van Tailwind af: alleen van de tokens in blok 1. */
/* -- De achtergrond van de schil: iets om te vervagen, zonder beeld en zonder beweging. De tinten
   staan op een plek in procenten van de pagina, dus een lange pagina heeft geen naad. */
.mesh {
    background-color: var(--priva-paper);
    background-image:
        radial-gradient(ellipse 52rem 34rem at 4% 0%, var(--priva-mesh-sage), transparent 72%),
        radial-gradient(ellipse 44rem 30rem at 100% 8%, var(--priva-mesh-warm), transparent 72%),
        radial-gradient(ellipse 48rem 36rem at 72% 58%, var(--priva-mesh-mint), transparent 72%),
        radial-gradient(ellipse 46rem 32rem at 0% 100%, var(--priva-mesh-warm), transparent 72%);
    background-repeat: no-repeat;
}

/* -- Diepte. Een trede zet alleen de schaduw; `lift` tilt een bedienbaar vlak bij de muis één
   trede op. `sheen` is de lichte bovenrand van een knop; een glaslaag heeft haar eigen rand. */
.elev-1 {
    --priva-elev: var(--priva-shadow-1);
}

.elev-2 {
    --priva-elev: var(--priva-shadow-2);
}

.elev-3 {
    --priva-elev: var(--priva-shadow-3);
}

/* Een balk die onderin een scrollend vlak blijft staan: de schaduw valt naar boven, over wat
   erachter doorschuift, zodat te zien is dat daar meer staat. De spreiding is negatief en minstens
   zo groot als de vervaging: de schaduw komt nergens buiten de zijkanten van de balk, want het
   scrollende vlak eromheen zou haar daar recht afsnijden. */
.elev-dock {
    --priva-elev:
        0 -22px 20px -18px color-mix(in srgb, var(--priva-shadow-tint) 22%, transparent),
        0 -52px 40px -36px color-mix(in srgb, var(--priva-shadow-tint) 30%, transparent);
}

.sheen {
    --priva-edge: inset 0 1px 0 color-mix(in srgb, var(--priva-surface) 22%, transparent);
}

.elev-1,
.elev-2,
.elev-3,
.elev-dock,
.glass-panel,
.glass-soft,
.glass-sidebar,
.glass-bar,
.glass-float,
.glass-tone,
.glass-toast {
    box-shadow:
        var(--priva-edge, 0 0 transparent),
        var(--priva-elev, 0 0 transparent);
}

.lift:hover:not(:disabled) {
    --priva-elev: var(--priva-shadow-2);
}

/* -- Tinten: de betekenis van een melding. `--priva-tone` kleurt de streep, de rand en de schaduw. */
.tone-info {
    --priva-tone: var(--priva-accent);
    --priva-glass-fill: var(--priva-soft);
}

.tone-success {
    --priva-tone: var(--priva-success);
    --priva-glass-fill: var(--priva-success-bg);
}

.tone-warning {
    --priva-tone: var(--priva-warning);
    --priva-glass-fill: var(--priva-warning-bg);
}

.tone-error {
    --priva-tone: var(--priva-danger);
    --priva-glass-fill: var(--priva-danger-bg);
}

/* -- Glas. Buiten @supports staat de dekkende terugval: de vulkleur zelf. Een browser die niet
   kan vervagen krijgt dus overal een dekkend vlak, ook waar de laag alleen doorschijnend is. */
.glass-panel,
.glass-soft,
.glass-sidebar,
.glass-bar,
.glass-float,
.glass-tone,
.glass-toast {
    --priva-edge: var(--priva-glass-edge);
    --priva-layer-opacity: 100%;
    background-color: var(--priva-glass-fill);
}

.glass-panel {
    --priva-glass-fill: var(--priva-surface);
    --priva-elev: var(--priva-shadow-1);
}

.glass-soft {
    --priva-glass-fill: var(--priva-soft);
    --priva-elev: var(--priva-shadow-1);
}

.glass-sidebar {
    --priva-glass-fill: var(--priva-sidebar);
    --priva-elev: var(--priva-shadow-1);
}

.glass-bar {
    --priva-glass-fill: var(--priva-paper);
    --priva-elev: var(--priva-shadow-1);
}

.glass-float {
    --priva-glass-fill: var(--priva-surface);
    --priva-elev: var(--priva-shadow-3);
}

/* Een melding in de pagina en een melding die erboven zweeft: een getinte laag met een streep
   in de kleur van de betekenis, een fijne rand en een zachte schaduw in dezelfde tint. */
.glass-tone,
.glass-toast {
    --priva-edge: var(--priva-glass-edge), inset 3px 0 0 var(--priva-tone);
    border-color: color-mix(in srgb, var(--priva-tone) 45%, transparent);
}

.glass-tone {
    --priva-elev:
        0 1px 2px color-mix(in srgb, var(--priva-shadow-tint) 5%, transparent),
        0 8px 18px -10px color-mix(in srgb, var(--priva-tone) 45%, transparent);
}

.glass-toast {
    --priva-elev:
        var(--priva-shadow-3), 0 10px 22px -12px color-mix(in srgb, var(--priva-tone) 45%, transparent);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .glass-panel,
    .glass-soft,
    .glass-sidebar,
    .glass-bar,
    .glass-float,
    .glass-tone,
    .glass-toast {
        background-color: color-mix(in srgb, var(--priva-glass-fill) var(--priva-layer-opacity), transparent);
    }

    .glass-panel {
        --priva-layer-opacity: var(--priva-glass-panel);
    }

    .glass-soft {
        --priva-layer-opacity: var(--priva-glass-soft);
    }

    .glass-sidebar {
        --priva-layer-opacity: var(--priva-glass-sidebar);
    }

    .glass-tone {
        --priva-layer-opacity: var(--priva-glass-tone);
    }

    /* Alleen wat over inhoud schuift of erboven zweeft vervaagt wat erachter ligt (en haalt er
       wat meer kleur uit). Een laag in de pagina ligt op de egale achtergrond: vervagen is daar
       niet te zien en kost op een lange pagina wel rekentijd (gemeten: het beleidsdocument van
       13.690 pixels hoog haalde zijn schermbeeld niet binnen vijf seconden). */
    .glass-bar {
        --priva-layer-opacity: var(--priva-glass-bar);
        -webkit-backdrop-filter: blur(var(--priva-glass-blur)) saturate(var(--priva-glass-saturate));
        backdrop-filter: blur(var(--priva-glass-blur)) saturate(var(--priva-glass-saturate));
    }

    .glass-float,
    .glass-toast {
        --priva-layer-opacity: var(--priva-glass-float);
        -webkit-backdrop-filter: blur(var(--priva-glass-blur)) saturate(var(--priva-glass-saturate));
        backdrop-filter: blur(var(--priva-glass-blur)) saturate(var(--priva-glass-saturate));
    }

    .glass-veil {
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }
}

/* -- Alles wat je aanklikt toont de handcursor: een knop, een samenvatting die uitklapt, de knop van
   een bestandsveld. Een uitgeschakelde knop toont dat hij niet kan. Een klasse `cursor-*` van de app
   (laag utilities) gaat hier nog voor. */
button,
[role='button'],
input[type='button'],
input[type='submit'],
input[type='reset'],
summary,
::file-selector-button {
    cursor: pointer;
}

button:disabled,
[role='button'][aria-disabled='true'],
input[type='button']:disabled,
input[type='submit']:disabled,
input[type='reset']:disabled {
    cursor: not-allowed;
}

/* -- Bediening. Een veld is bijna dekkend wit met een zachte binnenschaduw; een keuzelijst is
   hetzelfde veld zonder de pijl van de browser, met een eigen pijl ernaast. */
.field {
    background-color: color-mix(in srgb, var(--priva-surface) var(--priva-glass-field), transparent);
    box-shadow: var(--priva-shadow-inset);
}

.field:hover:not(:disabled) {
    border-color: var(--priva-outline);
}

.field:focus-visible {
    border-color: var(--priva-accent);
}

.field:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.select {
    position: relative;
}

.select-input {
    appearance: none;
    cursor: pointer;
    padding-inline-end: 2.75rem;
    text-overflow: ellipsis;
}

/* De lege keuze ("Kies een ...") leest als een plaatshouder: gedempt, en nog steeds 4,5:1. */
.select-input:has(> option[value='']:checked) {
    color: var(--priva-muted);
}

.select-chevron {
    pointer-events: none;
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0.875rem;
    margin-block: auto;
    width: 1rem;
    height: 1rem;
    color: var(--priva-outline);
}

.select:hover .select-chevron,
.select:focus-within .select-chevron {
    color: var(--priva-ink);
}

/* Een schakelaar: een gewoon aankruisvak (met role="switch") als spoor, met een knop die
   verschuift. De knop toont een vinkje voor aan en een kruisje voor uit: de stand hangt nooit
   alleen aan kleur of plaats. Uit is neutraal, geen fout. */
.switch {
    position: relative;
    display: inline-flex;
    flex: none;
    width: 3rem;
    height: 1.75rem;
}

.switch-input {
    appearance: none;
    position: absolute;
    inset: 0;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--priva-outline);
    border-radius: 999px;
    background-color: var(--priva-neutral-bg);
    box-shadow: var(--priva-shadow-inset);
}

.switch-input:focus-visible {
    border-radius: 999px;
}

.switch-input:checked {
    border-color: var(--priva-accent);
    background-color: var(--priva-accent);
}

.switch-input[aria-invalid='true'] {
    border-color: var(--priva-danger);
}

.switch-input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.switch-thumb {
    pointer-events: none;
    position: absolute;
    top: 3px;
    left: 3px;
    display: grid;
    width: 1.375rem;
    height: 1.375rem;
    place-items: center;
    border-radius: 999px;
    background-color: var(--priva-surface);
    box-shadow: var(--priva-shadow-1);
    color: var(--priva-muted);
}

.switch-input:checked ~ .switch-thumb {
    left: calc(100% - 1.375rem - 3px);
    color: var(--priva-accent);
}

.switch-on,
.switch-off {
    grid-area: 1 / 1;
    width: 0.875rem;
    height: 0.875rem;
}

.switch-on,
.switch-input:checked ~ .switch-thumb > .switch-off {
    opacity: 0;
}

.switch-input:checked ~ .switch-thumb > .switch-on {
    opacity: 1;
}

/* -- Laden. Een plaatshouder (`skeleton`) is een egaal blok; de maat komt van het component, uit
   een vaste set klassen. `spinner` is de ring in een knop die op de server wacht: driekwart
   rond, zodat hij ook stilstaand leest als "bezig". `busy-line` is de dunne lijn onder de
   bovenbalk en boven een lijst die opnieuw wordt gevraagd; `progress` is het eigen
   voortgangselement van de browser, met of zonder waarde. Wie minder beweging vraagt ziet van
   elk de stilstaande vorm: de glans, het draaien en het schuiven staan in het blok hieronder. */
.skeleton {
    display: block;
    border-radius: var(--priva-radius-label);
    background-color: var(--priva-skeleton-fill);
    background-clip: content-box;
}

/* Wat in het echt een wit vlak met een rand is (een veld, het vakje van een bestandstype): alleen
   de rand in de volle tint en het vlak licht, zodat een formulier niet als een rij donkere balken
   leest. De rand draagt de zichtbaarheid. */
.skeleton-frame {
    border: 2px solid var(--priva-skeleton-fill);
    background-color: color-mix(in srgb, var(--priva-skeleton-fill) 30%, transparent);
    background-clip: border-box;
}

.spinner {
    display: inline-block;
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 999px;
}

.busy-line {
    position: relative;
    display: block;
    height: 3px;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--priva-accent) 25%, transparent);
}

.busy-line::after {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 100%;
    background-color: var(--priva-accent);
}

.progress {
    appearance: none;
    display: block;
    width: 100%;
    height: 0.625rem;
    overflow: hidden;
    border: 1px solid var(--priva-outline);
    border-radius: 999px;
    background-color: var(--priva-neutral-bg);
}

.progress::-webkit-progress-bar {
    background-color: transparent;
}

.progress::-webkit-progress-value {
    border-radius: 999px;
    background-color: var(--priva-accent);
}

.progress::-moz-progress-bar {
    border-radius: 999px;
    background-color: var(--priva-accent);
}

/* Zonder waarde: een band in het midden van het spoor, die in het blok hieronder heen en weer
   schuift. De eigen vulling van de browser is dan doorzichtig. */
.progress:indeterminate {
    background-image: linear-gradient(var(--priva-accent), var(--priva-accent));
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 40% 100%;
}

.progress:indeterminate::-webkit-progress-value {
    background-color: transparent;
}

.progress:indeterminate::-moz-progress-bar {
    background-color: transparent;
}

/* -- De ingeklapte zijbalk van de werkruimte (breed scherm): de namen staan er nog, voor een
   schermlezer en als naam van hun link, maar zijn niet in beeld. Op een smal scherm is er het menu. */
@media (min-width: 48rem) {
    .rail[data-collapsed='true'] .rail-label {
        opacity: 0;
    }
}

/* -- Beweging bij de muis, de focus en het indrukken: alleen kleur, rand, schaduw, dekking en
   plaats verlopen hier. Een verschuiving of een animatie staat in het blok hieronder. */
.motion,
.field,
.switch-input,
.switch-thumb,
.switch-on,
.switch-off,
.select-chevron {
    transition-property:
        color, background-color, border-color, box-shadow, opacity, left, translate, scale, rotate;
    transition-duration: var(--priva-duration);
    transition-timing-function: var(--priva-ease-out);
}

/* Alle beweging: verschuiven, schalen en verschijnen. Wie minder beweging vraagt, krijgt dit
   blok niet en ziet meteen de eindtoestand. Niets hier herhaalt zich, behalve wat op de server
   wacht (de vier regels met `infinite` onder "Laden"). */
@media (prefers-reduced-motion: no-preference) {
    .lift:hover:not(:disabled) {
        translate: 0 -1px;
    }

    .press:active:not(:disabled) {
        translate: 0 1px;
        transition-duration: var(--priva-duration-fast);
    }

    .nudge:hover .nudge-mark {
        translate: 2px -2px;
    }

    .select:focus-within .select-chevron {
        translate: 0 1px;
    }

    .select:has(.select-input:open) .select-chevron {
        rotate: 180deg;
    }

    /* Wat verschijnt. `backwards`: na afloop blijft er geen transform of dekking achter. */
    .enter-fade {
        animation: priva-fade var(--priva-duration) var(--priva-ease-out) backwards;
    }

    .enter-rise,
    .page-stage > * {
        animation: priva-rise var(--priva-duration-slow) var(--priva-ease-out) backwards;
    }

    .enter-drop {
        animation: priva-drop var(--priva-duration) var(--priva-ease-out) backwards;
    }

    .enter-pop {
        animation: priva-pop var(--priva-duration-slow) var(--priva-ease-spring) backwards;
    }

    /* Een uitklapper: de inhoud komt in beeld en het plusje draait mee. */
    .disclosure[open] > .disclosure-body {
        animation: priva-drop var(--priva-duration-slow) var(--priva-ease-out) backwards;
    }

    /* Het venster van reka-ui. Het venster zelf verdwijnt meteen bij sluiten: de focus gaat dan
       zonder wachten terug naar de knop, en alleen de sluier erachter dooft uit. */
    .dialog-veil[data-state='open'] {
        animation: priva-fade var(--priva-duration) var(--priva-ease-out) backwards;
    }

    .dialog-veil[data-state='closed'] {
        animation: priva-fade var(--priva-duration-fast) var(--priva-ease-out) reverse forwards;
    }

    .dialog-panel[data-state='open'] {
        animation: priva-dialog var(--priva-duration-slow) var(--priva-ease-spring) backwards;
    }

    /* De zijbalk van de werkruimte klapt in tot de iconen. De kolom van het raster verspringt in één
       keer en de pagina wordt één keer opnieuw ingedeeld; wat beweegt is de breedte van de zijbalk
       zelf en een verschuiving van de pagina ernaast, met dezelfde duur en dezelfde veer, zodat de
       rand van de zijbalk en de pagina samen opschuiven zonder dat de inhoud bij elk beeld opnieuw
       wordt ingedeeld. 176px is het verschil tussen de open zijbalk (248px) en de ingeklapte (72px).
       De iconen glijden mee doordat alleen de witruimte verandert; de namen doven meteen uit en
       komen bij het uitklappen een voor een terug. */
    @media (min-width: 48rem) {
        .rail {
            transition: width var(--priva-duration-slow) var(--priva-ease-spring);
        }

        .rail-shift-in {
            animation: priva-rail-in var(--priva-duration-slow) var(--priva-ease-spring) backwards;
        }

        .rail-shift-out {
            animation: priva-rail-out var(--priva-duration-slow) var(--priva-ease-spring) backwards;
        }
    }

    .rail-pad,
    .rail-item {
        transition:
            padding var(--priva-duration-slow) var(--priva-ease-spring),
            color var(--priva-duration) var(--priva-ease-out),
            background-color var(--priva-duration) var(--priva-ease-out),
            box-shadow var(--priva-duration) var(--priva-ease-out);
    }

    .rail-label {
        transition: opacity var(--priva-duration-fast) var(--priva-ease-out);
    }

    .rail[data-collapsed='false'] .rail-label {
        transition-duration: var(--priva-duration-slow);
        transition-delay: calc(var(--priva-duration-fast) / 2);
    }

    .rail[data-collapsed='false'] .rail-item:nth-child(2) .rail-label {
        transition-delay: calc(var(--priva-duration-fast) / 2 + var(--priva-duration-fast) / 6);
    }

    .rail[data-collapsed='false'] .rail-item:nth-child(3) .rail-label {
        transition-delay: calc(var(--priva-duration-fast) / 2 + var(--priva-duration-fast) / 6 * 2);
    }

    .rail[data-collapsed='false'] .rail-item:nth-child(4) .rail-label {
        transition-delay: calc(var(--priva-duration-fast) / 2 + var(--priva-duration-fast) / 6 * 3);
    }

    .rail[data-collapsed='false'] .rail-item:nth-child(5) .rail-label {
        transition-delay: calc(var(--priva-duration-fast) / 2 + var(--priva-duration-fast) / 6 * 4);
    }

    .rail[data-collapsed='false'] .rail-item:nth-child(6) .rail-label {
        transition-delay: calc(var(--priva-duration-fast) / 2 + var(--priva-duration-fast) / 6 * 5);
    }

    .rail[data-collapsed='false'] .rail-item:nth-child(n + 7) .rail-label {
        transition-delay: calc(var(--priva-duration-fast) / 2 + var(--priva-duration-fast));
    }

    @keyframes priva-rail-in {
        from {
            translate: 176px 0;
        }
    }

    @keyframes priva-rail-out {
        from {
            translate: -176px 0;
        }
    }

    /* Het beeldmerk draait een kwartslag onder de muis, zoals op de publieke site (.brand-logo). */
    .turn-mark {
        transition: rotate var(--priva-duration-slow) var(--priva-ease-out);
    }

    .turn:hover .turn-mark {
        rotate: -90deg;
    }

    /* De iconen van de zijbalk bewegen wanneer de muis op hun link of knop staat. Elk icoon tekent
       zichzelf opnieuw, lijn na lijn; zeven hebben een beweging van zichzelf (de stekker wordt
       uitgetrokken en teruggeduwd, de wijzers lopen terug, de pijl loopt de deur uit, de pijl van de
       inklapknop wijst waar de zijbalk heen gaat). Alleen waar een muis kan zweven; elke animatie
       speelt één keer en laat niets achter. Een deel van een icoon draait en schuift om het midden
       van zijn vlak van 24 bij 24. Elke lijn heeft `pathLength="100"` (components/ui/Icon.vue), zodat
       een streep van 100 precies de hele lijn is en het tekenen de volle duur neemt, hoe kort de lijn
       ook is. */
    .rail svg[data-icon] > path {
        transform-box: view-box;
        transform-origin: 12px 12px;
    }

    @media (hover: hover) {
        .rail :is(a, button):hover svg:not([data-icon='plug'], [data-icon='history'], [data-icon='users'], [data-icon='users-check'], [data-icon='logout'], [data-icon='chevron-left'], [data-icon='chevron-right']) > path {
            stroke-dasharray: 100;
            animation: priva-icon-draw var(--priva-icon-draw) var(--priva-ease-icon) backwards;
        }

        .rail :is(a, button):hover svg:not([data-icon='plug'], [data-icon='history'], [data-icon='users'], [data-icon='users-check'], [data-icon='logout'], [data-icon='chevron-left'], [data-icon='chevron-right']) > path:nth-child(2) {
            animation-delay: var(--priva-icon-stagger);
        }

        .rail :is(a, button):hover svg:not([data-icon='plug'], [data-icon='history'], [data-icon='users'], [data-icon='users-check'], [data-icon='logout'], [data-icon='chevron-left'], [data-icon='chevron-right']) > path:nth-child(3) {
            animation-delay: calc(var(--priva-icon-stagger) * 2);
        }

        .rail :is(a, button):hover svg:not([data-icon='plug'], [data-icon='history'], [data-icon='users'], [data-icon='users-check'], [data-icon='logout'], [data-icon='chevron-left'], [data-icon='chevron-right']) > path:nth-child(n + 4) {
            animation-delay: calc(var(--priva-icon-stagger) * 3);
        }

        /* De stekker gaat er schuin uit en weer in; daarna loopt de stroom door het snoer. */
        .rail :is(a, button):hover svg[data-icon='plug'] {
            animation: priva-icon-plug var(--priva-icon-move) var(--priva-ease-icon) backwards;
        }

        .rail :is(a, button):hover svg[data-icon='plug'] > path:nth-child(4),
        .rail :is(a, button):hover svg[data-icon='users-check'] > path:nth-child(3) {
            stroke-dasharray: 100;
            animation: priva-icon-draw var(--priva-icon-draw) var(--priva-ease-icon)
                calc(var(--priva-duration-slow) + var(--priva-icon-stagger)) backwards;
        }

        /* De wijzers van de klok lopen één keer terug. */
        .rail :is(a, button):hover svg[data-icon='history'] > path:nth-child(3) {
            animation: priva-icon-turn-back var(--priva-icon-move) var(--priva-ease-icon) backwards;
        }

        /* De pijl loopt de deur uit; de pijl van de inklapknop wijst zijn kant op. */
        .rail :is(a, button):hover svg[data-icon='logout'] > path:nth-child(n + 2),
        .rail :is(a, button):hover svg[data-icon='chevron-right'] > path {
            animation: priva-icon-nudge-right var(--priva-icon-move) var(--priva-ease-icon) backwards;
        }

        .rail :is(a, button):hover svg[data-icon='chevron-left'] > path {
            animation: priva-icon-nudge-left var(--priva-icon-move) var(--priva-ease-icon) backwards;
        }

        /* Wie vooraan staat knikt, wie erachter staat stapt erbij. */
        .rail :is(a, button):hover svg:is([data-icon='users'], [data-icon='users-check']) > path:nth-child(-n + 2) {
            animation: priva-icon-hop var(--priva-icon-move) var(--priva-ease-icon) backwards;
        }

        .rail :is(a, button):hover svg[data-icon='users'] > path:nth-child(n + 3) {
            animation: priva-icon-step-in var(--priva-icon-move) var(--priva-ease-icon) var(--priva-icon-stagger)
                backwards;
        }
    }

    @keyframes priva-icon-draw {
        from {
            stroke-dashoffset: 100;
        }
    }

    @keyframes priva-icon-plug {
        35% {
            transform: translate(-2px, -4px) rotate(-18deg);
        }

        65% {
            transform: translate(0, 1.5px);
        }
    }

    @keyframes priva-icon-turn-back {
        from {
            rotate: 360deg;
        }
    }

    @keyframes priva-icon-nudge-right {
        45% {
            translate: 3.5px 0;
        }
    }

    @keyframes priva-icon-nudge-left {
        45% {
            translate: -3.5px 0;
        }
    }

    @keyframes priva-icon-hop {
        40% {
            translate: 0 -3.5px;
        }

        70% {
            translate: 0 0.75px;
        }
    }

    @keyframes priva-icon-step-in {
        from {
            opacity: 0;
            translate: 6px 0;
        }
    }

    /* Laden: de glans over een plaatshouder, de draaier, de voortgangslijn en de band van een
       voortgang zonder waarde. Dit zijn de enige animaties die zich herhalen, en alleen zolang
       het antwoord van de server uitblijft. */
    .skeleton {
        background-image: linear-gradient(
            100deg,
            transparent 35%,
            color-mix(in srgb, var(--priva-surface) var(--priva-skeleton-shine), transparent) 50%,
            transparent 65%
        );
        background-repeat: no-repeat;
        background-position: 100% 0;
        background-size: 300% 100%;
        animation: priva-shimmer var(--priva-loop-shimmer) linear infinite;
    }

    .spinner {
        animation: priva-spin var(--priva-loop-spin) linear infinite;
    }

    .busy-line::after {
        width: 40%;
        animation: priva-progress var(--priva-loop-progress) var(--priva-ease-out) infinite;
    }

    .progress:indeterminate {
        animation: priva-slide var(--priva-loop-progress) var(--priva-ease-out) infinite alternate;
    }

    @keyframes priva-shimmer {
        to {
            background-position: 0% 0;
        }
    }

    @keyframes priva-spin {
        to {
            rotate: 360deg;
        }
    }

    @keyframes priva-progress {
        from {
            translate: -100% 0;
        }

        to {
            translate: 250% 0;
        }
    }

    @keyframes priva-slide {
        from {
            background-position: 0% 0;
        }

        to {
            background-position: 100% 0;
        }
    }

    @keyframes priva-fade {
        from {
            opacity: 0;
        }
    }

    @keyframes priva-rise {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
    }

    @keyframes priva-drop {
        from {
            opacity: 0;
            transform: translateY(-4px);
        }
    }

    @keyframes priva-pop {
        from {
            opacity: 0;
            transform: translateY(12px) scale(0.96);
        }
    }

    @keyframes priva-dialog {
        from {
            opacity: 0;
            transform: translateY(8px) scale(0.96);
        }
    }
}
/* ==== EINDE VAN HET HERBRUIKBARE BLOK ================================================================= */