@import '_content/CleverLabPrep.UI/CleverLabPrep.UI.sn229t4tq0.bundle.scp.css';

/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-shell[b-j7p5wrv22i] {
    align-items: center;
    display: flex;
    justify-content: center;
    /* Zie MainLayout.razor.css: 100vh rekent op een telefoon met een verborgen adresbalk. Op het
       inlogscherm is dat extra vervelend, want dat is het eerste dat iemand van de app ziet. */
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1.5rem;
}

.auth-card[b-j7p5wrv22i] {
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius-card);
    box-shadow: var(--clp-shadow-card);
    max-width: 24rem;
    padding: 1.75rem;
    width: 100%;
}

.auth-brand[b-j7p5wrv22i] {
    display: block;
    margin-bottom: 1.25rem;
}

.auth-brand img[b-j7p5wrv22i] {
    height: auto;
    max-width: 9rem;
}
/* /Components/Layout/Batterijinstructies.razor.rz.scp.css */
/* Blok 9.3: de opmaak van de batterij-instructie.

   Net als bij InstallInstructies staat deze component op twee plaatsen met een heel verschillende
   achtergrond — de uitnodigingskaart die over de app heen ligt, en de accountpagina. Vandaar dat hier
   niets over kleur of breedte staat: alleen over de stappen en over het open- en dichtklappen. */

.clp-batterij[b-u47jt8zizt] {
    margin-top: 0.85rem;
    font-size: 0.9375rem;
}

.clp-batterij > summary[b-u47jt8zizt] {
    cursor: pointer;
    /* Het driehoekje van de browser blijft staan; het is de enige aanwijzing dat hier nog iets
       onder zit. Alleen de tekst ernaast krijgt de kleur van bijzaak, want dat is dit ook. */
    color: var(--clp-muted);
    /* list-style op de summary zelf: Safari luistert alleen naar ::-webkit-details-marker, maar wat
       we hier doen (het driehoekje láten staan) is toevallig precies het gedrag zonder regels. */
    line-height: 1.45;
}

/* Een summary is van zichzelf klikbaar en focusbaar, en de focusrand van de browser blijft hier
   met opzet ongemoeid: er staat nergens in dit bestand een outline: none, want dat is de snelste
   manier om toetsenbordgebruik onzichtbaar te maken (C18/WCAG 2.4.7). */

.clp-batterij[open] > summary[b-u47jt8zizt] {
    margin-bottom: 0.6rem;
}

.clp-batterij-tekst[b-u47jt8zizt] {
    margin-bottom: 0.6rem;
    line-height: 1.45;
}

.clp-batterij-stappen[b-u47jt8zizt] {
    margin: 0 0 0.6rem;
    padding-left: 1.35rem;
    display: grid;
    gap: 0.55rem;
    line-height: 1.45;
}

.clp-batterij-stappen li[b-u47jt8zizt]::marker {
    color: var(--clp-muted);
    font-variant-numeric: tabular-nums;
}
/* /Components/Layout/FeedbackButton.razor.rz.scp.css */
.feedback-fab[b-8gth3dvaus] {
    position: fixed;
    right: 1.25rem;
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
    z-index: 1050;
}

/* Verberg de standaard <details>-driehoek; de summary is onze knop. */
.feedback-fab__trigger[b-8gth3dvaus] {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

/* Een Bootstrap-knop is ~38px hoog. Dat is genoeg voor een muispijl, maar deze knop zweeft vlak
   boven de rand van het scherm, waar een duim het minst nauwkeurig is. */
@media (pointer: coarse) {
    .feedback-fab__trigger[b-8gth3dvaus] {
        align-items: center;
        display: inline-flex;
        min-height: var(--clp-touch-target);
    }
}

.feedback-fab__trigger[b-8gth3dvaus]::-webkit-details-marker {
    display: none;
}

/* Menu opent boven de knop (die staat onderaan rechts). */
.feedback-fab__menu[b-8gth3dvaus] {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.5rem);
    width: 17rem;
    max-width: 80vw;
}

.feedback-fab__menu .dropdown-item[b-8gth3dvaus] {
    white-space: normal;
}

/* Op smalle schermen boven de onderste tabbalk houden. Het getal moet uit de tabbalk zelf komen:
   met een vaste 5rem (80px) verdween de knop half achter de balk zodra er een home-indicator onder
   zat — de balk is dan 60px plus 34px veilige zone. Precies daar, op een iPhone in de
   geïnstalleerde app, is de meldknop het meest waard.

   767.98px en niet 768px: vanaf exact 768px staat de zijbalk er en is er helemaal geen tabbalk meer
   (MainLayout.razor.css). Met 768px sprong de knop op die ene breedte omhoog naar niets. */
@media (max-width: 767.98px) {
    .feedback-fab[b-8gth3dvaus] {
        bottom: calc(var(--clp-tabbar-height) + env(safe-area-inset-bottom) + 0.75rem);
    }
}

/* In de focusmodus is de tabbalk weg en staat de knop dus weer gewoon onderaan — anders zweeft ze
   op een handbreedte van de rand over de antwoordknoppen van de vraag. */
.focus-mode .feedback-fab[b-8gth3dvaus] {
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
}
/* /Components/Layout/InstallHandleiding.razor.rz.scp.css */
/* Blok 11.1 — de tabs van de installatiehandleiding.

   Bewust dezelfde vorm als de vak-tabs in FormulariumOverlay: pillen op een rij, de actieve in de
   huisstijlkleur. Twee plekken in de app die hetzelfde doen horen er ook hetzelfde uit te zien, ook
   al kunnen ze hun CSS niet delen (andere assembly, andere isolated-CSS-bundel).

   Over de stappen zelf staat hier niets: die komen uit InstallInstructies en hebben hun eigen
   isolated CSS. Die component staat ook in de uitnodiging, en de twee mogen niet uit elkaar lopen. */

.clp-hand-tabs[b-ll54swyx6x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.clp-hand-tab[b-ll54swyx6x] {
    background: var(--clp-background);
    border: 1px solid var(--clp-border);
    border-radius: 999px;
    color: var(--clp-foreground);
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 600;
    /* Een tab is een aanraakdoel: op een telefoon staat deze rij precies daar waar een duim landt. */
    min-height: var(--clp-touch-target);
    padding: 0.4rem 1rem;
}

.clp-hand-tab:hover[b-ll54swyx6x] {
    background: var(--clp-surface-muted);
}

.clp-hand-tab-actief[b-ll54swyx6x],
.clp-hand-tab-actief:hover[b-ll54swyx6x] {
    background: var(--clp-primary);
    border-color: var(--clp-primary);
    color: var(--clp-primary-ink);
}

.clp-hand-inleiding[b-ll54swyx6x] {
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
    color: var(--clp-muted);
}

/* De browsernaam is een wegwijzer, geen kop in een betoog: klein, en met lucht erboven zodat de drie
   lijstjes onder elkaar niet als één lange lijst van negen stappen lezen. */
.clp-hand-browser[b-ll54swyx6x] {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--clp-foreground);
}

.clp-hand-browser:first-of-type[b-ll54swyx6x] {
    margin-top: 0;
}
/* /Components/Layout/InstallInstructies.razor.rz.scp.css */
/* Blok 4.1: de opmaak van de handmatige installatie-instructies.

   Deze component staat op twee plaatsen met een heel verschillende achtergrond: in de uitnodiging
   (een kaart die over de app heen ligt) en op /installeren (een gewone pagina). Vandaar dat hier
   niets over kleur of breedte staat — alleen over de stappen zelf. De omgeving bepaalt de rest. */

.clp-install-stappen[b-i15vppnhma] {
    margin: 0;
    padding-left: 1.35rem;
    display: grid;
    gap: 0.55rem;
    /* Iets kleiner dan de lopende tekst: dit is een handleiding, geen betoog. */
    font-size: 0.9375rem;
    line-height: 1.45;
}

.clp-install-stappen li[b-i15vppnhma]::marker {
    color: var(--clp-muted);
    font-variant-numeric: tabular-nums;
}

/* Het icoon staat middenin een zin ("tik op het deel-icoon ⬆ onderaan"). Zonder deze uitlijning
   zakt het onder de basislijn en leest de zin als een typefout. */
.clp-install-glyph[b-i15vppnhma] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0 0.1rem;
    vertical-align: -0.4em;
    border: 1px solid var(--clp-border);
    border-radius: 0.375rem;
    background: var(--clp-surface-muted);
    color: var(--clp-foreground);
}

.clp-install-glyph svg[b-i15vppnhma] {
    display: block;
}
/* /Components/Layout/InstallPrompt.razor.rz.scp.css */
/* Blok 4.1: de uitnodiging om de app te installeren.

   Onderaan het scherm, niet in het midden. Twee redenen: op een telefoon is de onderkant het enige
   deel dat je met één duim bereikt, en op iOS moet de pijl naar de werkbalk van Safari kunnen wijzen
   — die staat daar. */

/* Boven alles wat er verder ligt: dit is een aria-modal, en dan hoort er niets overheen te kunnen.
   Hoger dan de cookiemelding (1080) en de feedbackknop (1050); in de praktijk botsen die niet, want
   de uitnodiging komt pas ná een afgeronde reeks en een account. */
.clp-install-scrim[b-uhmmv69nv5] {
    position: fixed;
    inset: 0;
    z-index: 1085;
    background: rgba(15, 23, 42, 0.35);
}

.clp-install-kaart[b-uhmmv69nv5] {
    position: fixed;
    z-index: 1086;
    left: 1rem;
    right: 1rem;
    /* Ruimte onder de kaart voor de pijl van de iOS-variant; zonder pijl valt het niet op. */
    bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
    margin-inline: auto;
    max-width: 26rem;
    padding: 1.125rem 1.25rem 1rem;
    border-radius: var(--clp-radius-card);
    background: var(--clp-background);
    color: var(--clp-foreground);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.22);
    animation: clp-install-op-b-uhmmv69nv5 220ms ease-out;
}

@keyframes clp-install-op-b-uhmmv69nv5 {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
}

.clp-install-titel[b-uhmmv69nv5] {
    margin: 0 0 0.4rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

.clp-install-tekst[b-uhmmv69nv5] {
    margin: 0;
    color: var(--clp-muted);
    font-size: 0.9375rem;
    line-height: 1.45;
}

/* De instructievariant kan lang zijn (vier stappen plus een waarschuwing). Laat die scrollen in
   plaats van de kaart buiten beeld te duwen — de knoppen eronder moeten bereikbaar blijven.
   De dvh-tweeling is hier geen detail: met de adresbalk in beeld is 50vh méér dan de helft van wat
   je ziet, en dan schuiven precies die knoppen er alsnog onderuit. */
.clp-install-instructie[b-uhmmv69nv5] {
    max-height: 50vh;
    max-height: 50dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.clp-install-knoppen[b-uhmmv69nv5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin-top: 1rem;
}

.clp-install-knoppen .btn[b-uhmmv69nv5] {
    min-height: var(--clp-touch-target);
}

/* "Installeren" krijgt de breedte, de rest is bijzaak. */
.clp-install-knoppen .btn-primary[b-uhmmv69nv5] {
    flex: 1 1 9rem;
}

.clp-install-knoppen .btn-link[b-uhmmv69nv5] {
    color: var(--clp-muted);
    text-decoration: none;
    padding-inline: 0.25rem;
}

/* "Niet meer vragen" is een uitweg, geen aanbod: kleiner, en helemaal rechts zodat hij nooit per
   ongeluk de plek van "Later" inneemt. */
.clp-install-nooit[b-uhmmv69nv5] {
    margin-left: auto;
    font-size: 0.8125rem;
}

/* Punt 4 van blok 4.1: de pijl naar het deel-icoon.

   Op een iPhone staat dat icoon in de werkbalk van Safari, direct onder deze kaart — vandaar dat de
   pijl naar beneden wijst en niet naar een element op de pagina. Op een iPad staat het rechtsboven;
   daar kan een pijl niet naar wijzen zonder te liegen, en dus zegt de instructietekst het in
   woorden ("onderaan op een iPhone, rechtsboven op een iPad"). */
.clp-install-pijl[b-uhmmv69nv5] {
    position: absolute;
    bottom: -0.85rem;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -0.6rem;
    border-left: 0.6rem solid transparent;
    border-right: 0.6rem solid transparent;
    border-top: 0.9rem solid var(--clp-background);
    filter: drop-shadow(0 4px 3px rgba(15, 23, 42, 0.12));
    animation: clp-install-wijs-b-uhmmv69nv5 1.6s ease-in-out 3;
}

@keyframes clp-install-wijs-b-uhmmv69nv5 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(0.35rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .clp-install-kaart[b-uhmmv69nv5],
    .clp-install-pijl[b-uhmmv69nv5] {
        animation: none;
    }
}

/* Vanaf tabletbreedte is er geen duimzone meer om rekening mee te houden, maar de kaart hoort nog
   steeds onderaan: op een iPad wijst de tekst naar het deelmenu, en dan is springen naar het midden
   alleen maar verwarrend. Wel wat meer lucht. */
@media (min-width: 768px) {
    .clp-install-kaart[b-uhmmv69nv5] {
        bottom: calc(2.25rem + env(safe-area-inset-bottom, 0px));
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* 100vh is op een telefoon de hoogte *zonder* adresbalk, ook wanneer die balk zichtbaar is: de
   pagina is dan structureel te hoog en er blijft altijd een restje scroll over. 100dvh is de
   hoogte die er nu echt is. De 100vh-regel blijft als terugval voor browsers van vóór 2022 —
   die negeren de tweede regel gewoon. */
.page[b-zkdr3ta74p] {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

.page-main[b-zkdr3ta74p] {
    flex: 1;
    min-width: 0;
}

.content[b-zkdr3ta74p] {
    margin: 0 auto;
    max-width: var(--clp-content-max);
    padding: 1.25rem 1rem 2rem;
}

/* Mobiel (default): geen zijbalk, wel de bottom tab bar. */
.page-sidenav[b-zkdr3ta74p] {
    display: none;
}

.page-main[b-zkdr3ta74p] {
    padding-bottom: calc(var(--clp-tabbar-height) + env(safe-area-inset-bottom));
}

/* Tablet en desktop: lichte zijbalk, geen tab bar. */
@media (min-width: 768px) {
    .page-tabbar[b-zkdr3ta74p] {
        display: none;
    }

    .page-main[b-zkdr3ta74p] {
        padding-bottom: 0;
    }

    .page-sidenav[b-zkdr3ta74p] {
        background: var(--clp-nav-bg);
        border-right: 1px solid var(--clp-border);
        display: block;
        flex-shrink: 0;
        height: 100vh;
        height: 100dvh;
        position: sticky;
        top: 0;
        width: var(--clp-sidenav-width);
    }
}

/* Focusmodus (actieve vraag): alle navigatie weg. */
.page.focus-mode .page-sidenav[b-zkdr3ta74p],
.page.focus-mode .page-tabbar[b-zkdr3ta74p] {
    display: none;
}

.page.focus-mode .page-main[b-zkdr3ta74p] {
    padding-bottom: 0;
}

/* Blok 8.6: `color-scheme: light only` is hier weg en `lightyellow` is een token geworden. Deze
   balk verschijnt precies wanneer er iets misgaat; een fel geel vlak onderaan een verder donkere
   bladzijde maakt dat moment onnodig schrikachtig. */
#blazor-error-ui[b-zkdr3ta74p] {
    background: var(--clp-waarschuwing-bg);
    color: var(--clp-waarschuwing-ink);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    /* Blok 8.5: het kruisje is een echte knop geworden. Die brengt een achtergrond, een rand en een
       eigen lettertype mee; dat allemaal terugzetten houdt de melding er precies zo uit als ervoor. */
    #blazor-error-ui .dismiss[b-zkdr3ta74p] {
        background: none;
        border: 0;
        color: inherit;
        cursor: pointer;
        font: inherit;
        line-height: 1;
        padding: 0.25rem 0.4rem;
        position: absolute;
        right: 0.35rem;
        top: 0.25rem;
    }

    /* Een kruisje van één teken is met een duim niet te raken. De ruimte zit binnen de knop, dus het
       teken blijft in dezelfde hoek staan — enkel het raakvlak eromheen groeit. */
    @media (pointer: coarse) {
        #blazor-error-ui .dismiss[b-zkdr3ta74p] {
            min-height: 44px;
            min-width: 44px;
        }
    }
/* /Components/Layout/OfflineBanner.razor.rz.scp.css */
/* Blok 3.2. Een systeembalk, geen alarm: donker leiblauw met een amberkleurige stip, dezelfde
   tokens als de rest van de app. Offline zijn is geen fout van de gebruiker en verdient geen rood
   vlak over zijn oefening heen. */

#clp-offline-banner[b-0nt735r6a1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Boven de feedbackknop (1050) en de foutbalk (1000). Onder een <dialog> hoeft niet geregeld:
       die staat in de top layer en wint altijd — vandaar dat de balk in OfflineBanner.razor.js
       wijkt zodra de reconnect-dialoog écht zichtbaar wordt. */
    z-index: 1060;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--clp-touch-target);
    padding: 0.5rem 1rem;
    /* De statusbalk van een iPhone valt niet over de inhoud (apple-mobile-web-app-status-bar-style
       staat op 'default'), maar in liggende stand knabbelt de notch aan de linkerkant. */
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
    padding-left: calc(1rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1rem + env(safe-area-inset-right, 0px));

    /* Blok 8.6: eigen tokens in plaats van --clp-foreground met wit erop. In donkere modus is de
       voorgrondkleur licht -- die balk was dan wit-op-wit geweest. */
    background-color: var(--clp-banner-bg);
    color: var(--clp-banner-ink);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);

    /* Nooit een tik opeten. De balk zegt alleen iets; alles eronder blijft bereikbaar — ook al
       levert tikken op dit moment niets op. */
    pointer-events: none;

    animation: clp-offline-banner-in-b-0nt735r6a1 0.25s ease-out;
}

/* display: flex hierboven wint van de [hidden]-regel van de browser; zonder deze regel staat de
   balk er dus altijd. */
#clp-offline-banner[hidden][b-0nt735r6a1] {
    display: none;
}

.clp-offline-stip[b-0nt735r6a1] {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--clp-mastery-mid);
}

@keyframes clp-offline-banner-in-b-0nt735r6a1 {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #clp-offline-banner[b-0nt735r6a1] {
        animation: none;
    }
}
/* /Components/Layout/Pushuitnodiging.razor.rz.scp.css */
/* Blok 9.2: de uitnodiging om meldingen aan te zetten.

   Dezelfde vorm als de installatie-uitnodiging -- onderaan, binnen duimbereik -- maar bewust geen
   gedeelde klassen: scoped CSS is per component, en twee kaarten die op elkaar lijken horen niet
   stilletjes aan elkaar vast te zitten. De twee kunnen sowieso nooit samen op het scherm staan: die
   ene eist niet-standalone, deze eist standalone (zie Pushvraagbeleid). */

.clp-push-scrim[b-ihls3kd2ad] {
    position: fixed;
    inset: 0;
    z-index: 1085;
    background: rgba(15, 23, 42, 0.35);
}

.clp-push-kaart[b-ihls3kd2ad] {
    position: fixed;
    z-index: 1086;
    left: 1rem;
    right: 1rem;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    margin-inline: auto;
    max-width: 26rem;
    padding: 1.125rem 1.25rem 1rem;
    border-radius: var(--clp-radius-card);
    background: var(--clp-background);
    color: var(--clp-foreground);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.22);
    animation: clp-push-op-b-ihls3kd2ad 220ms ease-out;
}

@keyframes clp-push-op-b-ihls3kd2ad {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
}

.clp-push-titel[b-ihls3kd2ad] {
    margin: 0 0 0.4rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

.clp-push-tekst[b-ihls3kd2ad] {
    margin: 0;
    color: var(--clp-muted);
    font-size: 0.9375rem;
    line-height: 1.45;
}

/* De drie beloftes uit het pushbeleid. Ze staan er niet als kleine letter maar als lijst, want ze
   zijn het antwoord op de enige vraag die iemand hier stelt: hoe vaak ga je me lastigvallen? */
.clp-push-lijst[b-ihls3kd2ad] {
    margin: 0.6rem 0 0;
    padding-left: 1.15rem;
    color: var(--clp-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.clp-push-knoppen[b-ihls3kd2ad] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin-top: 1rem;
}

.clp-push-knoppen .btn[b-ihls3kd2ad] {
    min-height: var(--clp-touch-target);
}

.clp-push-knoppen .btn-primary[b-ihls3kd2ad] {
    flex: 1 1 9rem;
}

.clp-push-knoppen .btn-link[b-ihls3kd2ad] {
    color: var(--clp-muted);
    text-decoration: none;
    padding-inline: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .clp-push-kaart[b-ihls3kd2ad] {
        animation: none;
    }
}

@media (min-width: 768px) {
    .clp-push-kaart[b-ihls3kd2ad] {
        bottom: calc(2.25rem + env(safe-area-inset-bottom, 0px));
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* De reconnect-dialoog van Blazor, bijgewerkt in blok 3.2 van docs/mobiel/plan-mobiele-app.md.

   Dit is het scherm dat een mobiele gebruiker het vaakst te zien krijgt en dat als enige nooit
   ontworpen is: het kwam ongewijzigd uit de .NET-template. 20rem breed zonder max-width (breder
   dan een iPhone SE), knoppen van 28px hoog, en kleuren die nergens anders in de app voorkomen.

   Wat hier veranderd is: de dialoog wacht --clp-verbinding-vertraging vóór hij zichtbaar wordt,
   past op elk scherm, en gebruikt de tokens uit app.css. De klassen en id's zijn framework-contract
   en blijven exact zoals ze zijn. */

.components-reconnect-first-attempt-visible[b-ura85y21fz],
.components-reconnect-repeated-attempt-visible[b-ura85y21fz],
.components-reconnect-failed-visible[b-ura85y21fz],
.components-pause-visible[b-ura85y21fz],
.components-resume-failed-visible[b-ura85y21fz],
.components-rejoining-animation[b-ura85y21fz],
.clp-geruststelling[b-ura85y21fz],
.clp-geruststelling-bewaard[b-ura85y21fz] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-ura85y21fz],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-ura85y21fz],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-ura85y21fz],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-ura85y21fz],
#components-reconnect-modal.components-reconnect-retrying[b-ura85y21fz],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-ura85y21fz],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-ura85y21fz],
#components-reconnect-modal.components-reconnect-failed[b-ura85y21fz],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-ura85y21fz] {
    display: block;
}

/* Elke geruststelling hoort alleen bij de standen waarin ze wáár is — dat is de hele reden dat het
   er twee zijn.

   "Blijf even hier, je oefening staat er nog precies zo bij" gaat over het circuit: zolang de client
   nog probeert, wacht dat server-side gewoon (CircuitInstellingen.Retentie). Alleen show en retrying.

   "Je antwoorden zijn opgeslagen" gaat over de database en is sinds blok 3.3 onafhankelijk van het
   circuit waar: elk antwoord is bij het geven al weggeschreven, en /oefenen biedt de sessie binnen
   het hervat-venster weer aan. Die zin hoort dus juist in de eindstanden, waar het circuit wél weg
   is en de enige uitweg herladen heet. Vóór blok 3.3 stond hier dat zo'n zin in "failed" zou
   misleiden; dat klopte toen, en klopt nu niet meer. */
#components-reconnect-modal.components-reconnect-show .clp-geruststelling[b-ura85y21fz],
#components-reconnect-modal.components-reconnect-retrying .clp-geruststelling[b-ura85y21fz],
#components-reconnect-modal.components-reconnect-failed .clp-geruststelling-bewaard[b-ura85y21fz],
#components-reconnect-modal.components-reconnect-resume-failed .clp-geruststelling-bewaard[b-ura85y21fz] {
    display: block;
}

#components-reconnect-modal[b-ura85y21fz] {
    /* Hier stond tot blok 8.6 `color-scheme: light only`, omdat de app geen donkere variant had.
       Die is er nu wel en deze dialoog volgt hem vanzelf: alles hieronder loopt via tokens. Dat is
       ook de plek waar het het meeste uitmaakt -- dit venster schuift 's avonds in bed over een
       oefening heen zodra de wifi hapert, en een wit vlak is dan een lamp in je gezicht. */
    background-color: var(--clp-background);
    color: var(--clp-foreground);
    /* Was: width: 20rem, zonder max-width. Op een scherm van 320px stak de dialoog er precies
       overheen. min() houdt hem op de gewenste breedte én binnen het scherm. */
    width: min(20rem, calc(100% - 2rem));
    /* 20vh is op een liggende telefoon bijna niets en op een tablet veel; min() knijpt de bovenmarge
       af zodra hij groter wordt dan een handbreedte. */
    margin: min(20vh, 6rem) auto;
    padding: 2rem;
    border: 0;
    border-radius: var(--clp-radius-card);
    box-shadow: 0 3px 6px 2px rgba(15, 23, 42, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-ura85y21fz 0.5s both;
}

    /* De vertraging vóór het tonen zit hier, in de animation-delay, en niet in JavaScript. Met
       animation-fill-mode: both houdt de dialoog gedurende de vertraging de beginstand van de
       animatie vast — opacity 0 — terwijl hij technisch al open is. Valt de JS uit, dan verschijnt
       de dialoog nog steeds; had de vertraging in JS gezeten, dan verscheen hij nooit meer. */
    #components-reconnect-modal[open][b-ura85y21fz] {
        animation: components-reconnect-modal-slideUp-b-ura85y21fz 1.5s cubic-bezier(.05, .89, .25, 1.02) var(--clp-verbinding-vertraging), components-reconnect-modal-fadeInOpacity-b-ura85y21fz 0.5s ease-in-out var(--clp-verbinding-vertraging);
        animation-fill-mode: both;
    }

/* De donkere waas moet dezelfde pauze aanhouden, anders verduistert het scherm twee seconden
   vóór er iets te lezen valt — precies de flits die dit blok wegneemt. De harde opacity: 1 die
   hier stond, moest weg: die won van de beginstand van de animatie. */
#components-reconnect-modal[b-ura85y21fz]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-ura85y21fz 0.5s ease-in-out var(--clp-verbinding-vertraging);
    animation-fill-mode: both;
}

@keyframes components-reconnect-modal-slideUp-b-ura85y21fz {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-ura85y21fz {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-ura85y21fz {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-ura85y21fz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-ura85y21fz] {
    margin: 0;
    text-align: center;
    line-height: 1.45;
}

#components-reconnect-modal .clp-geruststelling[b-ura85y21fz],
#components-reconnect-modal .clp-geruststelling-bewaard[b-ura85y21fz] {
    color: var(--clp-muted);
    font-size: 0.875rem;
}

/* Was: padding 4px 24px, ofwel een knop van zo'n 28px hoog. Onder de 44px die de rest van de app
   aanhoudt (--clp-touch-target) en onder wat een duim op een bewegende trein raakt — juist hier,
   waar mis-tikken betekent dat je opnieuw twee seconden naar een dialoog kijkt.

   line-height in plaats van verticale padding: de knoppen staan op display: block (zie de
   zichtbaarheidsregels bovenaan), en dan centreert padding de tekst niet. */
#components-reconnect-modal button[b-ura85y21fz] {
    font: inherit;
    font-weight: 600;
    border: 0;
    background-color: var(--clp-secondary);
    color: var(--clp-secondary-ink);
    padding: 0 1.5rem;
    min-height: var(--clp-touch-target);
    line-height: var(--clp-touch-target);
    border-radius: var(--clp-radius);
    cursor: pointer;
}

    #components-reconnect-modal button:hover[b-ura85y21fz] {
        background-color: var(--clp-secondary-hover);
    }

    #components-reconnect-modal button:active[b-ura85y21fz] {
        background-color: var(--clp-secondary-hover);
    }

.components-rejoining-animation[b-ura85y21fz] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-ura85y21fz] {
        position: absolute;
        border: 3px solid var(--clp-secondary);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-ura85y21fz 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-ura85y21fz] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-ura85y21fz {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

/* Wie "verminder beweging" aan heeft staan, krijgt de pulserende cirkels niet. Het blijft een
   dialoog met tekst; de animatie draagt geen informatie. De vertraging vóór het tonen blijft wél
   staan — die is geen versiering. */
@media (prefers-reduced-motion: reduce) {
    .components-rejoining-animation div[b-ura85y21fz] {
        animation: none;
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        opacity: 0.25;
    }

    #components-reconnect-modal[open][b-ura85y21fz] {
        animation: components-reconnect-modal-fadeInOpacity-b-ura85y21fz 0.01s linear var(--clp-verbinding-vertraging);
        animation-fill-mode: both;
    }
}
/* /Components/Pages/Abonnement.razor.rz.scp.css */
.abo-card[b-4b78pugtag] {
    max-width: 34rem;
}
/* /Components/Pages/Betaling.razor.rz.scp.css */
/* Blok 4.2: de terugkeerpagina uit de Mollie-checkout.

   Eén kolom met een leeslengte-grens. Deze pagina heeft geen navigatie en geen keuzes: hij zegt één
   ding, en op een breed scherm leest een zin van 120 tekens dat ding slechter voor. Geen vh hier —
   de inhoud is kort genoeg om nooit een schermhoogte nodig te hebben. */
.clp-betaling[b-dtcjf4e6cm] {
    max-width: 34rem;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Hero valt op met een zachte merkgroene wash. */
.verder-hero[b-02qp2l0jpn] {
    background: rgba(160, 213, 145, 0.16);
    border-color: transparent;
}
/* /Components/Pages/Installeren.razor.rz.scp.css */
/* Blok 4.3 — alleen wat de pagina zelf tekent. De instructielijst zit in InstallInstructies en heeft
   haar eigen isolated CSS: die component staat ook in de uitnodiging, en de twee mogen niet uit
   elkaar lopen omdat hier iets aangepast wordt. */

.clp-install-qr[b-xcbmrzzetn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    background: var(--clp-surface-muted);
}

/* Wit vlak rondom de code, ook als de kaart ooit een andere achtergrond krijgt: een QR-code op een
   getinte ondergrond haalt bij zwak licht het contrast niet meer dat scanners nodig hebben. */
.clp-install-qr svg[b-xcbmrzzetn] {
    display: block;
    width: 200px;
    height: 200px;
    max-width: 100%;
    /* Blok 8.6: dit is de enige harde witte vlakvulling die géén token geworden is, en dat is
       opzet. Een QR-code is donker op licht, met een lichte rustzone eromheen; wordt dat vlak in
       donkere modus donker, dan leest geen enkele camera hem nog. */
    background: #fff;
    border-radius: 0.25rem;
}

.clp-install-qr-adres[b-xcbmrzzetn] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--clp-muted);
    text-align: center;
}

/* Overtypen moet kunnen zonder gokken tussen l en 1, of tussen 0 en O. */
.clp-install-qr-adres span[b-xcbmrzzetn] {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    color: var(--clp-foreground);
    white-space: nowrap;
}

/* Het uitklapbare "liever ook op deze computer?". Klein en grijs: wie het zoekt vindt het, wie het
   niet zoekt wordt er niet van de QR-code weggeleid. */
.clp-install-ook[b-xcbmrzzetn] {
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    color: var(--clp-muted);
}

.clp-install-ook > summary[b-xcbmrzzetn] {
    cursor: pointer;
    /* Een uitklapper is een aanraakdoel, ook al ziet hij eruit als tekst. */
    min-height: var(--clp-touch-target);
    display: flex;
    align-items: center;
}

.clp-install-ook > summary:hover[b-xcbmrzzetn] {
    color: var(--clp-foreground);
}
/* /Components/Pages/Oefenen.razor.rz.scp.css */
.question-card[b-tcotzsorot] {
    max-width: 44rem;
}

/* Uitspraken-combinatievragen (v3) zetten genummerde uitspraken op aparte regels via '\n'.
   pre-line behoudt die regeleindes; enkelregelige stammen blijven ongewijzigd. */
.question-stem[b-tcotzsorot] {
    white-space: pre-line;
}

.config-card[b-tcotzsorot] {
    max-width: 46rem;
}

/* Hervat-aanbod bovenaan de configuratie. Geel-oranje in plaats van Bootstrap-geel: dezelfde tint
   als de middenstand van de mastery-schaal, zodat de kaart opvalt zonder als foutmelding te lezen. */
.hervat-kaart[b-tcotzsorot] {
    background: var(--clp-hervat-bg);
    border-color: var(--clp-hervat-rand);
    color: var(--clp-foreground);
}

.hervat-knoppen[b-tcotzsorot] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Duimmaat: dit zijn de twee knoppen die een student op een telefoon als eerste raakt na een
   weggevallen verbinding — vaak haastig, vaak onderweg. */
.hervat-knoppen .btn[b-tcotzsorot] {
    min-height: var(--clp-touch-target);
}

/* De ingang naar het formularium was een btn-sm van zo'n 31px hoog. Dat is de enige knop op dit
   scherm die je midden in een berekening zoekt, en hij staat vlak boven de vraagkaart: een misser
   opent niets en kost aandacht die op dat moment ergens anders zit. */
.formularium-knop[b-tcotzsorot] {
    min-height: var(--clp-touch-target);
}

/* Op mobiel blijft "Volgende vraag" onderin de duimzone plakken terwijl je de
   uitleg scrollt. Op desktop is dat niet nodig. */
@media (max-width: 767.98px) {
    .hervat-knoppen .btn[b-tcotzsorot] {
        flex: 1 1 12rem;
    }

    /* Deze balk plakt óver de uitleg heen; ze moet dus dekkend zijn en dezelfde kleur hebben als de
       bladzijde, niet als een kaart. */
    .feedback-next[b-tcotzsorot] {
        background: var(--clp-background);
        bottom: 0;
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        position: sticky;
    }
}
/* /Components/Pages/Statistieken.razor.rz.scp.css */
.stat-tegel[b-xwk7kclizi] {
    height: 100%;
}

.stat-getal[b-xwk7kclizi] {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
}

.stat-noemer[b-xwk7kclizi] {
    color: var(--clp-muted);
    font-size: 1.1rem;
    font-weight: 600;
}

.heatmap[b-xwk7kclizi] {
    display: grid;
    gap: 0.4rem;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

.heat-cell[b-xwk7kclizi] {
    border-radius: var(--clp-radius);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-height: 3.5rem;
    padding: 0.5rem 0.6rem;
}

.heat-naam[b-xwk7kclizi] {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.15;
}

.heat-waarde[b-xwk7kclizi] {
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: auto;
}

.heat-high[b-xwk7kclizi] { background: rgba(47, 182, 115, 0.22); }
.heat-mid[b-xwk7kclizi] { background: rgba(240, 162, 2, 0.20); }
.heat-low[b-xwk7kclizi] { background: rgba(220, 53, 69, 0.16); }
.heat-none[b-xwk7kclizi] { background: var(--clp-surface-muted); color: var(--clp-muted); }
/* /Components/Pages/Studio.razor.rz.scp.css */
/* Het podium is het opnamekader: 9:16, vaste hoogte, wit. Wat hier niet in staat, komt niet in
   beeld — daarom staat de hele bediening eronder, in de gewone documentstroom. */

.podium-buiten[b-09nq0sbr0j] {
    display: flex;
    justify-content: center;
}

.podium[b-09nq0sbr0j] {
    position: relative;
    height: var(--podium-hoogte, 900px);
    aspect-ratio: 9 / 16;
    background: #fff;
    overflow: hidden;
    border: 1px solid #ced4da;
    /* Eén schaalvariabele voor alle tekst: de JS verkleint die tot de vraag past. */
    font-size: calc(var(--basis, 20px) * var(--schaal, 1));
    color: #212529;
}

.podium-blad[b-09nq0sbr0j] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

.podium-kop[b-09nq0sbr0j] {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.6em 0.9em 0;
    flex: 0 0 auto;
}

.podium-logo[b-09nq0sbr0j] {
    height: 1.8em;
    width: auto;
}

.podium-label[b-09nq0sbr0j] {
    font-size: 0.6em;
    padding: 0.25em 0.6em;
    border-radius: 999px;
    background: #f1f3f5;
    color: #495057;
    white-space: nowrap;
}

.podium-label.sterk[b-09nq0sbr0j] {
    background: #212529;
    color: #fff;
}

/* Bovenste twee derde: de vraag. De rest blijft leeg voor het gezicht. */
.inhoudzone[b-09nq0sbr0j] {
    flex: 1 1 auto;
    /* 2/3 van het podium, min de kop. Overflow verborgen: de JS schaalt tot het past. */
    max-height: calc(66.667% - 2.4em);
    overflow: hidden;
    padding: 0.6em 0.9em 0;
}

.gezichtzone[b-09nq0sbr0j] {
    flex: 0 0 33.333%;
    position: relative;
}

.leeg[b-09nq0sbr0j] {
    color: #adb5bd;
}

.passage[b-09nq0sbr0j] {
    margin: 0 0 0.5em;
    font-size: 0.85em;
    line-height: 1.45;
    white-space: pre-wrap;
}

.figuur[b-09nq0sbr0j] {
    margin: 0 auto 0.5em;
    max-width: 100%;
}

.stam[b-09nq0sbr0j] {
    margin: 0 0 0.7em;
    line-height: 1.4;
    white-space: pre-wrap;
}

.opties[b-09nq0sbr0j] {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

/* Drie toestanden, en niet meer: onbeantwoord (neutraal), gekozen (jouw keuze, nog geen oordeel)
   en onthuld (juist groen, jouw foute keuze rood). Het antwoord blijft dus verborgen zolang je
   niet onthult — dat is het hele punt van deze pagina. */
.optie[b-09nq0sbr0j] {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    width: 100%;
    text-align: left;
    padding: 0.45em 0.7em;
    border: 2px solid #dee2e6;
    border-radius: 0.5em;
    background: #fff;
    font: inherit;
    font-size: 0.9em;
    line-height: 1.35;
    color: inherit;
}

.optie .letter[b-09nq0sbr0j] {
    flex: 0 0 auto;
    font-weight: 700;
    color: #868e96;
}

.optie.gekozen[b-09nq0sbr0j] {
    border-color: #1971c2;
    background: #e7f5ff;
}

.optie.gekozen .letter[b-09nq0sbr0j] {
    color: #1971c2;
}

.optie.juist[b-09nq0sbr0j] {
    border-color: #2f9e44;
    background: #ebfbee;
}

.optie.juist .letter[b-09nq0sbr0j] {
    color: #2f9e44;
}

.optie.fout[b-09nq0sbr0j] {
    border-color: #e03131;
    background: #fff5f5;
}

.optie.fout .letter[b-09nq0sbr0j] {
    color: #e03131;
}

/* Hulplijnen: enkel bij het instellen, uit tijdens de opname. */
.gids-tekst[b-09nq0sbr0j] {
    display: none;
}

.podium.met-gids .gezichtzone[b-09nq0sbr0j] {
    border-top: 2px dashed #ced4da;
}

.podium.met-gids .gids-tekst[b-09nq0sbr0j] {
    display: block;
    padding: 0.4em 0.9em;
    font-size: 0.6em;
    color: #ced4da;
}

/* De tekenlaag ligt over alles heen. Staat tekenen uit, dan laat ze klikken door naar de opties. */
.tekenlaag[b-09nq0sbr0j] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    touch-action: none;
}

.tekenlaag.actief[b-09nq0sbr0j] {
    pointer-events: auto;
    cursor: crosshair;
}

/* ─── Bediening: buiten het opnamekader ─────────────────────────────────────────────────────── */

.bediening[b-09nq0sbr0j] {
    /* Ver onder het podium: zo valt ze buiten een 9:16-vensteropname én blijft de muis uit beeld. */
    margin-top: 2.5rem;
    padding: 1rem 0 3rem;
    background: #fff;
    border-top: 1px solid #dee2e6;
}

.bediening-binnen[b-09nq0sbr0j] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}

.rij[b-09nq0sbr0j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-bottom: 0.75rem;
}

.rij.vakken[b-09nq0sbr0j] {
    gap: 0.25rem 0.9rem;
}

.scheiding[b-09nq0sbr0j] {
    flex: 0 0 1px;
    align-self: stretch;
    background: #dee2e6;
}

.klein[b-09nq0sbr0j] {
    font-size: 0.8rem;
    color: #6c757d;
    margin: 0;
}

.smal[b-09nq0sbr0j] {
    width: auto;
}

.zoek[b-09nq0sbr0j] {
    width: 18rem;
}

.dikte[b-09nq0sbr0j] {
    width: 8rem;
}

kbd[b-09nq0sbr0j] {
    font-size: 0.7em;
    opacity: 0.65;
}

.kleurknop[b-09nq0sbr0j] {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ced4da;
    padding: 0;
}

.kleurknop.gekozen[b-09nq0sbr0j] {
    box-shadow: 0 0 0 2px #212529;
}

.keuzelijst[b-09nq0sbr0j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.25rem;
    max-height: 16rem;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.4rem;
}

.keuze[b-09nq0sbr0j] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    text-align: left;
    padding: 0.2rem 0.45rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    background: transparent;
    font-size: 0.78rem;
    font-family: inherit;
}

.keuze:hover[b-09nq0sbr0j] {
    background: #f1f3f5;
}

.keuze.actief[b-09nq0sbr0j] {
    border-color: #0d6efd;
    background: #e7f1ff;
}

.keuze .sleutel[b-09nq0sbr0j] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.keuze .meta[b-09nq0sbr0j] {
    flex: 0 0 auto;
    color: #868e96;
}
/* /Components/Pages/Vaardig.razor.rz.scp.css */
/* Blok 8.6: de fallbacks achter var() zijn hier weg. Ze waren geen vangnet maar een echte kleur --
   --clp-surface en --clp-track bestonden tot dit blok niet, dus wat er stond was gewoon #fff en
   #eceef1, en die twee waren in donkere modus wit gebleven. De tokens bestaan nu wel. */
.comp-overzicht[b-g0dwag0yhr] {
    margin: 1rem 0 1.5rem;
    padding: 1rem;
    border: 1px solid var(--clp-border);
    border-radius: 0.75rem;
    background: var(--clp-surface);
}

.comp-bars[b-g0dwag0yhr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem 1.25rem;
}

.comp-bar-top[b-g0dwag0yhr] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.comp-naam[b-g0dwag0yhr] {
    font-weight: 600;
}

.comp-pct[b-g0dwag0yhr] {
    color: var(--clp-muted, #6c757d);
    font-variant-numeric: tabular-nums;
}

.comp-track[b-g0dwag0yhr] {
    height: 8px;
    border-radius: 999px;
    background: var(--clp-track);
    overflow: hidden;
}

.comp-fill[b-g0dwag0yhr] {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* Eén tint per competentie, zodat A/R/V/I herkenbaar blijven. Deze vier zijn ook de vulling van de
   ronde letterchips verderop, en dáár staat tekst bovenop -- zie .comp-chip. */
.comp-analyseren[b-g0dwag0yhr] { background: #2563eb; }
.comp-redeneren[b-g0dwag0yhr] { background: #7c3aed; }
.comp-verbinden[b-g0dwag0yhr] { background: #0891b2; }
.comp-integreren[b-g0dwag0yhr] { background: #db2777; }

/* Blok 8.6: dezelfde vier, lichter. Een balkje van 8px hoog op #182233 moet het van helderheid
   hebben, niet van verzadiging; #2563eb zakt daar weg in de achtergrond. Dat de letter in de chip
   hierdoor donker wordt in plaats van wit, regelt --clp-vak-ink. */
[data-bs-theme="dark"] .comp-analyseren[b-g0dwag0yhr] { background: #60a5fa; }
[data-bs-theme="dark"] .comp-redeneren[b-g0dwag0yhr] { background: #a78bfa; }
[data-bs-theme="dark"] .comp-verbinden[b-g0dwag0yhr] { background: #22d3ee; }
[data-bs-theme="dark"] .comp-integreren[b-g0dwag0yhr] { background: #f472b6; }

.thema-grid[b-g0dwag0yhr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.thema-kaart[b-g0dwag0yhr] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem;
    border: 1px solid var(--clp-border);
    border-radius: 0.75rem;
    background: var(--clp-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.thema-kaart:hover[b-g0dwag0yhr] {
    border-color: var(--clp-vak-generiekecompetenties, #db2777);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.thema-naam[b-g0dwag0yhr] {
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.25;
}

.thema-meta[b-g0dwag0yhr] {
    color: var(--clp-muted, #6c757d);
    font-size: 0.85rem;
}

.thema-badges[b-g0dwag0yhr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.15rem;
}

.comp-chip[b-g0dwag0yhr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    color: var(--clp-vak-ink);
    font-size: 0.72rem;
    font-weight: 700;
}

.thema-cta[b-g0dwag0yhr] {
    margin-top: auto;
    padding-top: 0.35rem;
    color: var(--clp-vak-generiekecompetenties, #db2777);
    font-size: 0.88rem;
    font-weight: 600;
}