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

/* /Components/Examenplan/ExamenplanOverzicht.razor.rz.scp.css */
.dag-lijst[b-tjcfea7g6g] {
    margin: 0;
    padding: 0;
}

/* "Eerdere weken": een uitklapper, dus bedienbaar met het klavier en een schermlezer zonder eigen script. De kop is
   hoog genoeg om met een duim te raken. */
.eerdere-weken-kop[b-tjcfea7g6g] {
    color: var(--clp-muted);
    cursor: pointer;
    font-weight: 600;
    padding: 0.6rem 0;
}

/* Een dag: datum links, wat er te doen is in het midden, de stand rechts. Op een telefoon komt de
   inhoud onder de datum en de stand te staan, zodat er op 360 pixels niets zijwaarts scrolt. */
.dag[b-tjcfea7g6g] {
    align-items: start;
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    display: grid;
    gap: 0.25rem 0.75rem;
    grid-template-areas: "datum inhoud staat";
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    margin-bottom: 0.4rem;
    padding: 0.65rem 0.85rem;
}

.dag-datum[b-tjcfea7g6g] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    grid-area: datum;
}

.dag-inhoud[b-tjcfea7g6g] {
    grid-area: inhoud;
    min-width: 0;
}

.dag-staat[b-tjcfea7g6g] {
    font-weight: 600;
    grid-area: staat;
    text-align: right;
}

.dag-type[b-tjcfea7g6g] {
    font-weight: 600;
}

/* Vandaag valt op door een kleur én door het woord "vandaag" onder de datum. */
.dag-vandaag[b-tjcfea7g6g] {
    background: var(--clp-accent-zachter);
    border-color: var(--clp-primary);
    box-shadow: inset 4px 0 0 var(--clp-primary);
}

.dag-vandaag-label[b-tjcfea7g6g] {
    color: var(--clp-accent-ink);
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Lange namen van onderdelen breken af in plaats van de pagina breder te maken. */
.plan-box[b-tjcfea7g6g] {
    overflow-wrap: anywhere;
    white-space: normal;
}

.dag-opbouw[b-tjcfea7g6g] {
    overflow-wrap: anywhere;
}

.dag-notitie[b-tjcfea7g6g] {
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.dag-gedaan[b-tjcfea7g6g] {
    color: var(--clp-correct);
}

.dag-deels[b-tjcfea7g6g],
.dag-open[b-tjcfea7g6g] {
    color: var(--clp-muted);
}

/* Nooit rood: een gemiste dag is geen schuld (zoals bij het gewone studieplan). */
.dag-gemist[b-tjcfea7g6g] {
    color: var(--clp-misconception);
}

@media (max-width: 575.98px) {
    .dag[b-tjcfea7g6g] {
        grid-template-areas:
            "datum staat"
            "inhoud inhoud";
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .dag-datum[b-tjcfea7g6g] {
        align-items: baseline;
        display: flex;
        gap: 0.5rem;
    }

    .dag-vandaag-label[b-tjcfea7g6g] {
        display: inline;
    }
}
/* /Components/Examenplan/ExamenplanStatusPil.razor.rz.scp.css */
.status-pil[b-vhoqq7dic4] {
    align-items: center;
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: 999px;
    color: var(--clp-foreground);
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 600;
    gap: 0.4rem;
    padding: 0.15rem 0.65rem;
    white-space: nowrap;
}

.status-pil-dot[b-vhoqq7dic4] {
    border-radius: 50%;
    flex: none;
    height: 0.55rem;
    width: 0.55rem;
}

.status-pil-schema .status-pil-dot[b-vhoqq7dic4] {
    background-color: var(--clp-mastery-high);
}

.status-pil-opgeschoven .status-pil-dot[b-vhoqq7dic4] {
    background-color: var(--clp-mastery-mid);
}
/* /Components/Examenplan/ExamenplanVandaagKaart.razor.rz.scp.css */
/* Dezelfde zachte merkgroene wash als de hero's van het dashboard. Die stijl staat scoped in Home.razor.css
   en komt dus niet door in een component. */
.verder-hero[b-d9ahgj1g3m] {
    background: rgba(160, 213, 145, 0.16);
    border-color: transparent;
}

/* De kaart is een raster van drie vakken: de kop (aftelling en titel), de knop en de rest. Op een telefoon staan ze in
   die volgorde onder elkaar, zodat "Start" meteen onder de titel staat; vanaf 576px staat de knop rechts, over de
   hoogte van kop en rest, en gecentreerd zoals de knop in de hero's van het dashboard. */
.examenplan-raster[b-d9ahgj1g3m] {
    display: grid;
    gap: 0.25rem 1rem;
    grid-template-areas:
        "kop"
        "actie"
        "rest";
    grid-template-columns: minmax(0, 1fr);
}

.examenplan-kop[b-d9ahgj1g3m] {
    grid-area: kop;
    min-width: 0;
}

.examenplan-actie[b-d9ahgj1g3m] {
    grid-area: actie;
    margin: 0.5rem 0 0.75rem;
}

.examenplan-rest[b-d9ahgj1g3m] {
    grid-area: rest;
    min-width: 0;
}

@media (min-width: 576px) {
    .examenplan-raster[b-d9ahgj1g3m] {
        grid-template-areas:
            "kop actie"
            "rest actie";
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .examenplan-actie[b-d9ahgj1g3m] {
        align-self: center;
        margin: 0;
    }
}

/* De zin over onderdelen in opbouw noemt de namen uit de leerstof; een lange naam breekt af op een smalle telefoon. */
.examenplan-opbouw[b-d9ahgj1g3m] {
    overflow-wrap: anywhere;
}

/* De notitie van de begeleider mag regels hebben en lange woorden (een link, een formule). */
.examenplan-notitie[b-d9ahgj1g3m] {
    overflow-wrap: anywhere;
    white-space: pre-line;
}
/* /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/CookieMelding.razor.rz.scp.css */
/* De cookiebalk: een zwevend blok onderaan. Op een brede pagina staat de tekst links en staan de knoppen
   rechts, binnen 640px. */
.cookiemelding[b-u1arhj90z2] {
    align-items: center;
    bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    left: 1rem;
    margin-inline: auto;
    max-width: 640px;
    position: fixed;
    right: 1rem;
    z-index: 1080;
}

.cookiemelding-tekst[b-u1arhj90z2] {
    min-width: 0;
}

.cookiemelding-keuze[b-u1arhj90z2] {
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
}

/* Een knop in de tekst die eruitziet als een link: dezelfde grootte als de zin en een klikvlak dat groot genoeg is. */
.cookiemelding-meer[b-u1arhj90z2] {
    font-size: inherit;
    vertical-align: baseline;
}

/* Op een telefoon een smalle balk over de hele breedte, tegen de onderrand: één zin, daaronder de twee knoppen naast
   elkaar. Op 360px besloeg de volle tekst met de knoppen de helft van het scherm, boven de uitnodiging of het
   formulier waarvoor iemand kwam. Klapt "Meer info" open, dan scrolt de balk zelf in plaats van de pagina te
   bedekken. */
@media (max-width: 575.98px) {
    .cookiemelding[b-u1arhj90z2] {
        border-left-width: 0;
        border-radius: var(--clp-radius) var(--clp-radius) 0 0;
        border-right-width: 0;
        bottom: 0;
        left: 0;
        max-height: 70vh;
        max-height: 70dvh;
        overflow-y: auto;
        padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
        right: 0;
    }

    .cookiemelding-tekst[b-u1arhj90z2] {
        flex-basis: 100%;
    }

    .cookiemelding-keuze[b-u1arhj90z2] {
        flex-basis: 100%;
    }

    .cookiemelding-keuze .btn[b-u1arhj90z2] {
        flex: 1 1 0;
        min-height: var(--clp-touch-target);
    }
}
/* /Components/Layout/CrmLayout.razor.rz.scp.css */
.crm-schil[b-qk0fl9dtnv] {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--clp-surface-muted);
}

.crm-balk[b-qk0fl9dtnv] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.25rem 1.25rem;
    flex-wrap: wrap;
    padding: 0.6rem 1rem;
    padding-top: calc(0.6rem + env(safe-area-inset-top));
    background: var(--clp-surface);
    border-bottom: 1px solid var(--clp-border);
}

.crm-merk[b-qk0fl9dtnv] {
    font-weight: 700;
    color: var(--clp-foreground);
    text-decoration: none;
    white-space: nowrap;
}

.crm-merk span[b-qk0fl9dtnv] {
    color: var(--clp-muted);
    font-weight: 500;
}

.crm-nav[b-qk0fl9dtnv] {
    display: flex;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.crm-uit[b-qk0fl9dtnv] {
    display: flex;
    gap: 0.25rem;
}

.crm-zoek[b-qk0fl9dtnv] {
    display: flex;
}

.crm-zoekveld[b-qk0fl9dtnv] {
    width: 11rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.85rem;
    color: var(--clp-foreground);
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: 0.5rem;
}

.crm-zoekveld:focus[b-qk0fl9dtnv] {
    outline: 2px solid var(--clp-accent-zacht);
    outline-offset: 1px;
}

/* NavLink is een kindcomponent: zijn <a> krijgt het scope-attribuut van deze layout niet. */
[b-qk0fl9dtnv] .crm-link {
    padding: 0.35rem 0.7rem;
    border-radius: 0.5rem;
    color: var(--clp-foreground);
    text-decoration: none;
    font-size: 0.95rem;
    white-space: nowrap;
}

[b-qk0fl9dtnv] .crm-link:hover {
    background: var(--clp-surface-muted);
}

[b-qk0fl9dtnv] .crm-link.active {
    background: var(--clp-accent-zacht);
    color: var(--clp-accent-ink);
    font-weight: 600;
}

[b-qk0fl9dtnv] .crm-link-stil {
    color: var(--clp-muted);
    font-size: 0.85rem;
}

.crm-inhoud[b-qk0fl9dtnv] {
    margin: 0 auto;
    max-width: 1200px;
    padding: 1.25rem 1rem 3rem;
}

/* Op een telefoon gaat de navigatie op een eigen regel staan, over de volle breedte. */
@media (max-width: 575.98px) {
    .crm-nav[b-qk0fl9dtnv] {
        order: 3;
        flex-basis: 100%;
        overflow-x: auto;
    }

    .crm-uit[b-qk0fl9dtnv] {
        margin-left: auto;
    }
}

/* De foutbalk onderaan, dezelfde als in MainLayout.razor.css: verborgen tot Blazor hem toont bij een
   onverwachte fout. CSS-isolatie houdt de regels van MainLayout bij de oefenapp, dus het klantenbeheer
   heeft zijn eigen exemplaar nodig. Zonder deze regels stond de balk altijd in beeld en deed het
   kruisje niets: Blazor sluit dat pas aan wanneer hij de balk zelf toont (25 sep 2026). */
#blazor-error-ui[b-qk0fl9dtnv] {
    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;
}

    #blazor-error-ui .dismiss[b-qk0fl9dtnv] {
        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. */
    @media (pointer: coarse) {
        #blazor-error-ui .dismiss[b-qk0fl9dtnv] {
            min-height: 44px;
            min-width: 44px;
        }
    }
/* /Components/Layout/EmailBevestigingBanner.razor.rz.scp.css */
/* De knop "Opnieuw versturen" was btn-outline-dark: donkere tekst en rand, en in donkere modus staan die op een bijna zwart vlak
   (nauwelijks te lezen). Dezelfde voorgrond- en randtokens als de andere knoppen met een rand halen in licht en donker AA. */
.email-banner .btn-outline-secondary[b-i02w5eohys] {
    --bs-btn-color: var(--clp-foreground);
    --bs-btn-border-color: var(--clp-muted);
    --bs-btn-hover-color: var(--clp-foreground);
    --bs-btn-hover-bg: var(--clp-surface-muted);
    --bs-btn-hover-border-color: var(--clp-foreground);
    --bs-btn-active-color: var(--clp-foreground);
    --bs-btn-active-bg: var(--clp-surface-muted);
    --bs-btn-active-border-color: var(--clp-foreground);
    white-space: nowrap;
}

/* De compacte regel: tekst en knop op één lijn, weinig lucht. Op 360 px is de ruimte 328 px; tekst en knop passen er maar net naast
   elkaar, dus de tekst is iets kleiner en de rand smal. Past het toch niet (een grote letter), dan valt de knop onder de tekst. */
.email-banner.email-banner-compact[b-i02w5eohys] {
    padding: 0.35rem 0.5rem;
}

.email-banner-compact span[b-i02w5eohys] {
    font-size: 0.85rem;
}

@media (min-width: 576px) {
    .email-banner-compact span[b-i02w5eohys] {
        font-size: 0.95rem;
    }
}
/* /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);
    }
}

/* De planner van Studie (/examenplanning en /examenplanning/nieuw): op een telefoon liggen daar de lade, de dagkiezer en de knoppen van de
   wizard onderaan, en de zwevende knop lag eroverheen ("Annuleer", "Stel voor", de balk met blokken). Tot 992 px is hij er niet; vanaf
   dan staat de lade in een rij of een kolom en is er plek voor. Een leerling die iets wil melden, doet dat vanaf een andere pagina. */
@media (max-width: 991.98px) {
    .feedback-fab--op-planner[b-8gth3dvaus] {
        display: none;
    }
}

/* 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;
}

/* PREP-29: het klapblok "Lukt het niet? Zo doe je het zelf" onder de installeerknop.

   Dichtgeklapt is het een regel; open is het dezelfde stappenlijst als op /installeren, in hetzelfde
   scrollvak als de instructievariant. Een lager vak dan daar (40 in plaats van 50 procent), want de
   knoppen staan er al boven en de kaart moet op een scherm van 360 pixels breed en 640 hoog passen. */
.clp-install-zelf[b-uhmmv69nv5] {
    margin-top: 0.5rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--clp-border);
    font-size: 0.9375rem;
}

/* Het driehoekje van de browser blijft staan (geen display: flex op de summary): het is de enige
   aanwijzing dat hier iets opklapt. De padding geeft een raakvlak van ruim 44 pixels. */
.clp-install-zelf > summary[b-uhmmv69nv5] {
    cursor: pointer;
    padding-block: 0.7rem;
    color: var(--clp-muted);
    line-height: 1.45;
}

.clp-install-zelf[open] > summary[b-uhmmv69nv5] {
    margin-bottom: 0.25rem;
}

.clp-install-zelf .clp-install-instructie[b-uhmmv69nv5] {
    max-height: 40vh;
    max-height: 40dvh;
    padding-inline-end: 0.5rem;
    overflow-wrap: anywhere;
}

.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 */
/* ── Wie al een licentie heeft: één smalle kolom, zoals elke accountpagina ──────────────────── */
.abo-smal[b-4b78pugtag] {
    max-width: 34rem;
}

/* ── De verkooppagina ─────────────────────────────────────────────────────────────────────────

   Eén raster. Op een gsm en een tablet staat alles onder elkaar in de volgorde van de opmaak. Op
   een breed scherm staat het bestelblok rechts naast de vergelijking en de vragen, en loopt het
   naast hen door: zo staat de bestelknop naast wat een twijfelaar nog leest, en niet drie
   schermen lager.

   Waarom 1200px en niet 992px. De zijbalk neemt 14rem en de inhoud is hoogstens 62rem breed.
   Onder 1200 pixels blijft er links van een bestelblok van 25rem minder dan 21rem over, en dan
   breekt de vergelijking elke cel over drie regels. */
.abo-verkoop[b-4b78pugtag] {
    display: grid;
    gap: 1rem;
    grid-template-areas:
        "hero"
        "waarde"
        "vergelijking"
        "bestel"
        "vragen"
        "status";
    grid-template-columns: minmax(0, 1fr);
}

.abo-hero[b-4b78pugtag] { grid-area: hero; }
.abo-waarde[b-4b78pugtag] { grid-area: waarde; }
.abo-vergelijking[b-4b78pugtag] { grid-area: vergelijking; }
.abo-bestel[b-4b78pugtag] { grid-area: bestel; }
.abo-vragen[b-4b78pugtag] { grid-area: vragen; }
.abo-status[b-4b78pugtag] { grid-area: status; }

@media (min-width: 1200px) {
    /* De laatste rij is 1fr: het bestelblok is hoger dan de vergelijking en de vragen samen, en
       zonder die rij verdeelt het raster het verschil over alle rijen, met gaten tussen de
       vergelijking en de vragen als gevolg. Zo komt het verschil onderaan terecht. */
    .abo-verkoop[b-4b78pugtag] {
        align-items: start;
        column-gap: 1.5rem;
        grid-template-areas:
            "hero hero"
            "waarde waarde"
            "vergelijking bestel"
            "vragen bestel"
            "status bestel";
        grid-template-columns: minmax(0, 1fr) 25rem;
        grid-template-rows: auto auto auto auto 1fr;
    }
}

.abo-sectiekop[b-4b78pugtag] {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

/* ── Bovenaan: de pas, de prijs en één knop ─────────────────────────────────────────────────── */
.abo-hero[b-4b78pugtag] {
    background: linear-gradient(135deg, var(--clp-accent-zacht) 0%, var(--clp-accent-zachter) 55%, var(--clp-surface) 100%);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius-card);
    display: grid;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
}

@media (min-width: 768px) {
    .abo-hero[b-4b78pugtag] {
        align-items: center;
        gap: 2rem;
        grid-template-columns: minmax(0, 1fr) 19.5rem;
        padding: 2rem;
    }
}

.abo-actie[b-4b78pugtag] {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    white-space: normal;
}

.abo-titel[b-4b78pugtag] {
    font-size: clamp(2rem, 1.4rem + 2.2vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

/* De ondertitel staat in Aanbod zonder hoofdletter, want ze volgt in de volle naam op een komma
   ("Examenpas 2027, van niveautest tot examendag"). Hier staat ze op een eigen regel. */
.abo-ondertitel[b-4b78pugtag] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0.25rem 0 0.75rem;
}

.abo-ondertitel[b-4b78pugtag]::first-letter {
    text-transform: uppercase;
}

.abo-kernregel[b-4b78pugtag] {
    color: var(--clp-muted);
    margin: 0;
    max-width: 34rem;
}

.abo-bewijs[b-4b78pugtag] {
    align-items: center;
    color: var(--clp-accent-ink);
    display: flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.5rem;
    margin: 1rem 0 0;
}

.abo-bewijs svg[b-4b78pugtag] {
    flex-shrink: 0;
}

.abo-hero-knop[b-4b78pugtag] {
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius-card);
    box-shadow: var(--clp-shadow-card);
    padding: 1.25rem;
}

/* Op één regel: de knoptekst is de volle naam van de pas, en op btn-lg in een kolom van 19,5rem
   brak ze in tweeën. */
.abo-hero-knop .btn-lg[b-4b78pugtag] {
    font-size: 1.1rem;
    white-space: nowrap;
}

/* Dezelfde vorm als de garantieregel erboven (Garantieregel.razor.css): twee zekerheden onder
   één knop, allebei met een vinkje. */
.abo-geruststelling[b-4b78pugtag] {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    margin: 0.35rem 0 0;
}

.abo-geruststelling[b-4b78pugtag]::before {
    color: var(--bs-success, #198754);
    content: "✓";
    content: "✓" / "";
    font-weight: 700;
    margin-right: 0.35rem;
}

/* De deadline onder de prijs in het bestelblok, waar ze naast het bedrag hoort waar ze over gaat. */
.abo-deadline[b-4b78pugtag] {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0.25rem 0;
}

/* ── Wat je krijgt: zes tegels, drie naast elkaar op een breed scherm ──────────────────────── */
.abo-tegels[b-4b78pugtag] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    margin: 0;
}

.abo-tegel[b-4b78pugtag] {
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius-card);
    box-shadow: var(--clp-shadow-card);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1.1rem 1.1rem;
}

.abo-icoon[b-4b78pugtag] {
    align-items: center;
    background: var(--clp-accent-zacht);
    border-radius: 0.75rem;
    color: var(--clp-accent-ink);
    display: inline-flex;
    height: 2.5rem;
    justify-content: center;
    margin-bottom: 0.4rem;
    width: 2.5rem;
}

.abo-belofte[b-4b78pugtag] {
    font-weight: 600;
    line-height: 1.3;
}

.abo-probleem[b-4b78pugtag] {
    color: var(--clp-muted);
    font-size: 0.875rem;
}

/* De garantie als laatste tegel, met de merkrand van de knoppen: dit is de tegel die de drempel
   wegneemt, niet nog een belofte. */
.abo-tegel-garantie[b-4b78pugtag] {
    background: var(--clp-accent-zachter);
    border-color: var(--clp-primary);
}

/* ── Gratis naast de pas ───────────────────────────────────────────────────────────────────── */
/* Vaste kolommen: zonder table-layout: fixed rekt het langste woord ("Examensimulaties") de
   tabel op een gsm zestig pixels buiten haar kaart. Nu breekt het woord af, met een koppelteken
   waar de browser Nederlands kan afbreken. */
.abo-tabel[b-4b78pugtag] {
    border-collapse: collapse;
    font-size: 0.9rem;
    table-layout: fixed;
    width: 100%;
}

.abo-tabel th[b-4b78pugtag],
.abo-tabel td[b-4b78pugtag] {
    border-bottom: 1px solid var(--clp-border);
    hyphens: auto;
    overflow-wrap: anywhere;
    padding: 0.6rem 0.6rem;
    text-align: left;
    vertical-align: top;
}

.abo-tabel thead th:first-child[b-4b78pugtag] {
    width: 36%;
}

@media (max-width: 575.98px) {
    .abo-tabel[b-4b78pugtag] {
        font-size: 0.8rem;
    }

    .abo-tabel th[b-4b78pugtag],
    .abo-tabel td[b-4b78pugtag] {
        padding: 0.5rem 0.35rem;
    }

    .abo-tabel thead th:first-child[b-4b78pugtag] {
        width: 32%;
    }
}

.abo-tabel tbody tr:last-child th[b-4b78pugtag],
.abo-tabel tbody tr:last-child td[b-4b78pugtag] {
    border-bottom: 0;
}

.abo-tabel thead th[b-4b78pugtag] {
    color: var(--clp-muted);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.abo-tabel tbody th[b-4b78pugtag] {
    font-weight: 600;
}

/* De kolom van de pas als één vlak, van kop tot laatste rij. */
.abo-tabel .abo-kolom-pas[b-4b78pugtag] {
    background: var(--clp-accent-zachter);
}

.abo-tabel thead .abo-kolom-pas[b-4b78pugtag] {
    border-radius: var(--clp-radius) var(--clp-radius) 0 0;
    color: var(--clp-accent-ink);
}

.abo-tabel tbody tr:last-child .abo-kolom-pas[b-4b78pugtag] {
    border-radius: 0 0 var(--clp-radius) var(--clp-radius);
}

.abo-nu[b-4b78pugtag] {
    background: var(--clp-surface-muted);
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0;
    margin-left: 0.25rem;
    padding: 0.1rem 0.45rem;
    text-transform: none;
}

.abo-ja[b-4b78pugtag],
.abo-nee[b-4b78pugtag] {
    align-items: flex-start;
    display: inline-flex;
    gap: 0.4rem;
}

.abo-ja svg[b-4b78pugtag] {
    color: var(--clp-correct);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.abo-nee[b-4b78pugtag] {
    color: var(--clp-muted);
}

/* ── Het bestelblok ────────────────────────────────────────────────────────────────────────── */
.abo-bestel[b-4b78pugtag] {
    border: 2px solid var(--clp-primary);
    scroll-margin-top: 1rem;
}

/* De koopknop ("Betaal €59") is kort, maar blijft een maat kleiner dan de standaard btn-lg, zoals de
   knop bovenaan (.abo-hero-knop): twee even grote knoppen op één pagina wedijveren niet. */
.abo-bestel .btn-lg[b-4b78pugtag] {
    font-size: 1.05rem;
}

/* De koopregel onder de knop (PREP-13) draagt de klasse garantieregel, maar die stijl zit in
   Garantieregel.razor.css en geldt alleen voor de component zelf (scoped css). Hier dezelfde vorm,
   zodat de regel onder de koopknop eruitziet als onder elke andere knop naar de Examenpas. */
.abo-bestel .garantieregel[b-4b78pugtag] {
    color: var(--clp-foreground);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
}

.abo-bestel .garantieregel[b-4b78pugtag]::before {
    color: var(--bs-success, #198754);
    content: "✓";
    content: "✓" / "";
    font-weight: 700;
    margin-right: 0.35rem;
}

.abo-code summary[b-4b78pugtag] {
    color: var(--clp-secondary-hover);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
}

[data-bs-theme="dark"] .abo-code summary[b-4b78pugtag] {
    color: var(--clp-secondary);
}

.abo-code-veld[b-4b78pugtag] {
    flex: 1 1 auto;
    min-width: 0;
}

.abo-mollie svg[b-4b78pugtag] {
    margin-right: 0.2rem;
    vertical-align: -0.1rem;
}

/* ── De vragen, ingeklapt ──────────────────────────────────────────────────────────────────── */
.abo-vraag[b-4b78pugtag] {
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    margin-bottom: 0.5rem;
}

.abo-vraag summary[b-4b78pugtag] {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    position: relative;
}

.abo-vraag summary[b-4b78pugtag]::-webkit-details-marker {
    display: none;
}

/* Een pijltje dat draait bij het openklappen; als pseudo-element, dus een schermlezer leest alleen
   de vraag. */
.abo-vraag summary[b-4b78pugtag]::after {
    border-bottom: 2px solid var(--clp-muted);
    border-right: 2px solid var(--clp-muted);
    content: "";
    height: 0.5rem;
    position: absolute;
    right: 1.1rem;
    top: 1.05rem;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    width: 0.5rem;
}

.abo-vraag[open] summary[b-4b78pugtag]::after {
    top: 1.3rem;
    transform: rotate(-135deg);
}

.abo-vraag p[b-4b78pugtag] {
    color: var(--clp-muted);
    margin: 0;
    padding: 0 1rem 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
    .abo-vraag summary[b-4b78pugtag]::after {
        transition: none;
    }
}
/* /Components/Pages/Begeleiding/AfdrukAntwoorden.razor.rz.scp.css */
.afdruk-balk[b-f3o4vwimgv] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.afdruk-kop[b-f3o4vwimgv] {
    border-bottom: 1px solid var(--clp-border);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
}

.afdruk-info[b-f3o4vwimgv] {
    color: var(--clp-muted);
    font-size: 0.9rem;
}

.afdruk-vragen[b-f3o4vwimgv] {
    list-style-position: outside;
    margin: 0 0 1.5rem;
    padding-left: 1.75rem;
}

.afdruk-vraag[b-f3o4vwimgv] {
    margin-bottom: 1.5rem;
    padding-left: 0.25rem;
}

.afdruk-onderdeel[b-f3o4vwimgv] {
    color: var(--clp-muted);
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.afdruk-stam[b-f3o4vwimgv],
.afdruk-passage[b-f3o4vwimgv] {
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.afdruk-opties[b-f3o4vwimgv] {
    list-style-type: upper-alpha;
    margin: 0;
    padding-left: 1.5rem;
}

.afdruk-opties li[b-f3o4vwimgv] {
    margin-bottom: 0.3rem;
    overflow-wrap: anywhere;
    padding-left: 0.25rem;
}

.afdruk-tabel[b-f3o4vwimgv] {
    border-collapse: collapse;
    width: 100%;
}

.afdruk-tabel th[b-f3o4vwimgv],
.afdruk-tabel td[b-f3o4vwimgv] {
    border-bottom: 1px solid var(--clp-border);
    overflow-wrap: anywhere;
    padding: 0.35rem 0.5rem;
    text-align: left;
    vertical-align: top;
}

@media print {
    /* Een vraag met zijn opties blijft op één bladzijde; de antwoordsleutel begint op een nieuwe, zodat de
       leerling hem niet per ongeluk mee ziet. */
    .afdruk-vraag[b-f3o4vwimgv] {
        break-inside: avoid;
    }

    .afdruk-sleutel[b-f3o4vwimgv] {
        break-before: page;
    }

    .afdruk-tabel tr[b-f3o4vwimgv] {
        break-inside: avoid;
    }
}
/* /Components/Pages/Begeleiding/AntwoordenTab.razor.rz.scp.css */
.antwoorden-lijst[b-egrpmo17e1] {
    margin: 0 0 1rem;
}

.antwoord[b-egrpmo17e1] {
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    margin-bottom: 0.6rem;
    padding: 0.75rem 0.9rem;
}

.antwoord-kop[b-egrpmo17e1] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}

.antwoord-wanneer[b-egrpmo17e1] {
    color: var(--clp-muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.antwoord-onderdeel[b-egrpmo17e1] {
    overflow-wrap: anywhere;
}

/* De vraag in twee regels; de volledige tekst en de figuur komen na "Toon de volledige vraag". */
.antwoord-preview[b-egrpmo17e1] {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    margin-bottom: 0.5rem;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.antwoord-vergelijk p[b-egrpmo17e1] {
    overflow-wrap: anywhere;
}

/* Rood en groen komen nooit alleen: het teken ervoor en de tekst "Antwoord van de leerling" / "Juist antwoord"
   zeggen hetzelfde voor wie de kleuren niet onderscheidt. */
.antwoord-juist[b-egrpmo17e1] {
    color: var(--clp-correct);
}

.antwoord-fout[b-egrpmo17e1] {
    color: var(--clp-wrong);
}

.antwoord-label[b-egrpmo17e1] {
    color: var(--clp-muted);
    font-size: 0.8rem;
    margin: 0 0.25rem;
}

.antwoord-toggle[b-egrpmo17e1] {
    min-height: 2rem;
}

.antwoord-meta[b-egrpmo17e1] {
    color: var(--clp-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.85rem;
    gap: 0.25rem 1rem;
    margin-top: 0.4rem;
}

@media (pointer: coarse) {
    .antwoord-toggle[b-egrpmo17e1] {
        min-height: var(--clp-touch-target);
    }
}
/* /Components/Pages/Begeleiding/AntwoordVraag.razor.rz.scp.css */
/* Uitspraken-combinatievragen zetten genummerde uitspraken op aparte regels via '\n'; pre-line behoudt die. */
.antwoord-stam[b-d94xgjema7],
.antwoord-passage[b-d94xgjema7] {
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.antwoord-passage[b-d94xgjema7] {
    color: var(--clp-muted);
}

/* Op een telefoon is de regel te smal voor de optietekst en het langere "antwoord leerling" naast elkaar:
   de tekst werd een smalle kolom en het label schoof uit beeld. Hier, en alleen hier, staat de uitkomst
   onder de optietekst en mag een lang woord afbreken. Het oefenscherm van de leerling blijft zoals het
   was; daar is het label korter. */
@media (max-width: 575.98px) {
    .option-list[b-d94xgjema7]  .option-btn {
        flex-wrap: wrap;
    }

    .option-list[b-d94xgjema7]  .option-text {
        flex: 1 1 0;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .option-list[b-d94xgjema7]  .option-uitkomst {
        flex-basis: 100%;
        margin-left: 0;
        white-space: normal;
    }
}

/* /Components/Pages/Begeleiding/BegeleidingLeerling.razor.rz.scp.css */
/* De tabbladen van de leerlingpagina. Op een telefoon van 360 px paste "Begeleiders" er niet meer bij, en wie
   zijdelings moest scrollen om het te vinden, zag niet dat het er was. Op een smal scherm dus smallere tabs in een
   kleiner lettertype, zodat vier op één rij staan; wat dan nog niet past (320 px, of vijf tabs: een leerling met
   Studie én een examenplan, voor de beheerder) breekt naar een tweede rij (de lijst wrapt) in plaats van uit beeld
   te schuiven. */
.begeleiding-tabs .nav-link[b-x378d9acsn] {
    font-size: 0.875rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

@media (min-width: 576px) {
    .begeleiding-tabs .nav-link[b-x378d9acsn] {
        font-size: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
/* /Components/Pages/Begeleiding/DagDetail.razor.rz.scp.css */
.detail-tekst[b-4lxcp0etvq] {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
/* /Components/Pages/Begeleiding/DekkingPaneel.razor.rz.scp.css */
.dekking-rij[b-g2fx86fyd6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.15rem 0;
    border-bottom: 1px solid var(--clp-border);
}

.dekking-naam[b-g2fx86fyd6] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Wat nergens gepland staat (of niet te plannen is) valt weg tegen wat al een plek heeft. */
.dekking-leeg[b-g2fx86fyd6] {
    color: var(--clp-muted);
}

/* Naast de lijst blijft het paneel in beeld terwijl je door de weken scrolt; op een telefoon staat het
   eronder en loopt het gewoon mee. */
@media (min-width: 992px) {
    .dekking[b-g2fx86fyd6] {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}
/* /Components/Pages/Begeleiding/InOpbouwBadge.razor.rz.scp.css */
.in-opbouw[b-dihtze2xs1] {
    border: 1px dashed var(--clp-muted);
    border-radius: 0.5rem;
    color: var(--clp-muted);
    flex: none;
    font-size: 0.75rem;
    padding: 0.05rem 0.45rem;
    white-space: nowrap;
}
/* /Components/Pages/Begeleiding/LesnotitieFormulier.razor.rz.scp.css */
/* Het kruisje op een gekozen onderdeel: klein, maar met een raakvlak dat bij een duim past. */
.lesnotitie-chip-weg[b-i0sfxwbvk8] {
    background: none;
    border: 0;
    color: inherit;
    line-height: 1;
    margin-left: 0.25rem;
    min-height: 1.5rem;
    min-width: 1.5rem;
    padding: 0;
}

.lesnotitie-chip-weg:hover[b-i0sfxwbvk8] {
    color: var(--clp-wrong);
}

@media (pointer: coarse) {
    .lesnotitie-chip-weg[b-i0sfxwbvk8] {
        min-height: 2.25rem;
        min-width: 2.25rem;
    }
}
/* /Components/Pages/Begeleiding/LesnotitieKaart.razor.rz.scp.css */
.lesnotitie-kop[b-33grj2j3jh] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
}

.lesnotitie-bewerk[b-33grj2j3jh] {
    min-height: 2rem;
}

.lesnotitie-teksten dt[b-33grj2j3jh] {
    color: var(--clp-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-top: 0.5rem;
    text-transform: uppercase;
}

.lesnotitie-teksten dd[b-33grj2j3jh] {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

@media (pointer: coarse) {
    .lesnotitie-bewerk[b-33grj2j3jh] {
        min-height: var(--clp-touch-target);
    }
}
/* /Components/Pages/Begeleiding/OnderdeelKiezer.razor.rz.scp.css */
.kiezer-hoofdstuk[b-7aa6b3c1st] {
    border-bottom: 1px solid var(--clp-border);
    padding: 0.35rem 0;
}

.kiezer-kop[b-7aa6b3c1st] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kiezer-kop .form-check-input[b-7aa6b3c1st],
.kiezer-onderdeel .form-check-input[b-7aa6b3c1st] {
    flex: none;
    margin-top: 0;
}

.kiezer-open[b-7aa6b3c1st] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    padding: 0.15rem 0;
    color: inherit;
    font-weight: 600;
    text-align: left;
}

.kiezer-pijl[b-7aa6b3c1st] {
    display: inline-block;
    width: 1em;
    color: var(--clp-muted);
}

.kiezer-onderdelen[b-7aa6b3c1st] {
    margin: 0.25rem 0 0.35rem 1.6rem;
}

.kiezer-onderdeel[b-7aa6b3c1st] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
    cursor: pointer;
}

.kiezer-naam[b-7aa6b3c1st] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.kiezer-pct[b-7aa6b3c1st],
.kiezer-geen[b-7aa6b3c1st] {
    flex: none;
    font-size: 0.75rem;
    padding: 0.05rem 0.45rem;
    border-radius: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.kiezer-geen[b-7aa6b3c1st] {
    background: var(--clp-surface-muted);
    color: var(--clp-muted);
}

.is-zonder-vragen[b-7aa6b3c1st] {
    color: var(--clp-muted);
    cursor: default;
}

/* Bootstrap tekent "gemengd" alleen met de DOM-eigenschap indeterminate, die Blazor niet als attribuut
   kan zetten. Deze klasse tekent hetzelfde streepje; aria-checked="mixed" zegt het tegen een schermlezer. */
.form-check-input.is-gemengd[b-7aa6b3c1st] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
/* /Components/Pages/Begeleiding/PlanImportPaneel.razor.rz.scp.css */
/* De plak- en namenvelden tonen JSON en lijsten: een vaste breedte van letters leest daar beter. */
.import-tekst[b-sp3w5uvz6x] {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.8rem;
}

/* De waarschuwingen van de import in dezelfde tint als een buffer in de planlijst: doorschijnend, dus leesbaar in lichte en donkere modus. */
.import-waarschuwingen[b-sp3w5uvz6x] {
    background: rgba(240, 162, 2, 0.18);
    border: 1px solid rgba(240, 162, 2, 0.5);
    border-radius: var(--clp-radius);
    list-style-position: inside;
    margin: 0;
    padding: 0.4rem 0.6rem;
}

/* De dagenlijst van één plan, ingevouwen tot de samenvatting genoeg is: een kader zodat de uitklapregel een eigen plek heeft. */
.import-dagenlijst[b-sp3w5uvz6x] {
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    padding: 0.5rem 0.75rem;
}

.import-dagenlijst[open] > summary[b-sp3w5uvz6x] {
    margin-bottom: 0.5rem;
}

.import-dagen[b-sp3w5uvz6x] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.import-dag[b-sp3w5uvz6x] {
    border-top: 1px solid var(--clp-border);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    padding-top: 0.4rem;
}

.import-kop[b-sp3w5uvz6x] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.import-datum[b-sp3w5uvz6x] {
    font-weight: 700;
    min-width: 3.6rem;
}

.import-chips[b-sp3w5uvz6x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.import-chip[b-sp3w5uvz6x],
.import-niet[b-sp3w5uvz6x] {
    border-radius: 999px;
    font-size: 0.78rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 0.05rem 0.6rem;
}

.import-chip[b-sp3w5uvz6x] {
    background: var(--clp-surface-muted);
    border: 1px solid var(--clp-border);
}

/* Een onderdeel in opbouw heeft nog geen vragen: stippellijn, zodat het naast de gewone chips opvalt. */
.import-chip-opbouw[b-sp3w5uvz6x] {
    border-style: dashed;
}

/* Wat niet in Prep staat: in de waarschuwingskleur, met de reden erbij. */
.import-niet[b-sp3w5uvz6x] {
    background: rgba(240, 162, 2, 0.24);
    border: 1px solid rgba(240, 162, 2, 0.6);
    color: var(--clp-foreground);
}

.import-label[b-sp3w5uvz6x] {
    color: var(--clp-muted);
}

/* De notitie bevat een regeleinde voor de regel "Niet in Prep": die hoort op een eigen regel. */
.import-tekstregel[b-sp3w5uvz6x] {
    overflow-wrap: anywhere;
    white-space: pre-line;
}
/* /Components/Pages/Begeleiding/PlanTab.razor.rz.scp.css */
.plan-dagen[b-nrs0i0l3nh] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.plan-dag[b-nrs0i0l3nh] {
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
}

/* Vandaag valt op zonder dat de rest verdwijnt: een groene rand in dezelfde tint als de primaire knop. */
.plan-dag-vandaag[b-nrs0i0l3nh] {
    border-color: var(--clp-primary);
    box-shadow: 0 0 0 2px var(--clp-accent-zacht);
}

/* De rij waar een gesleepte dag op zou vallen. */
.plan-dag-doel[b-nrs0i0l3nh] {
    border-color: var(--clp-secondary);
    box-shadow: 0 0 0 2px var(--clp-secondary);
}

.plan-rij[b-nrs0i0l3nh] {
    align-items: flex-start;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    padding: 0.55rem 0.75rem;
}

.plan-handvat[b-nrs0i0l3nh] {
    color: var(--clp-muted);
    cursor: grab;
    flex: none;
    line-height: 1.6;
    padding: 0 0.15rem;
    user-select: none;
}

.plan-links[b-nrs0i0l3nh] {
    display: flex;
    flex: 1 1 16rem;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.plan-kop[b-nrs0i0l3nh] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.plan-datum[b-nrs0i0l3nh] {
    background: none;
    border: 0;
    color: inherit;
    font-weight: 700;
    min-width: 3.6rem;
    padding: 0;
    text-align: left;
}

.plan-type[b-nrs0i0l3nh] {
    color: var(--clp-foreground);
    font-weight: 600;
}

/* Elk type zijn eigen tint, doorschijnend zodat het in de lichte en de donkere modus leesbaar blijft. */
.plan-type.dagtype-studie[b-nrs0i0l3nh] { background: var(--clp-accent-zacht); }
.plan-type.dagtype-buffer[b-nrs0i0l3nh] { background: rgba(240, 162, 2, 0.24); }
.plan-type.dagtype-gemengd[b-nrs0i0l3nh] { background: rgba(95, 146, 235, 0.24); }
.plan-type.dagtype-proefexamen[b-nrs0i0l3nh] { background: rgba(220, 53, 69, 0.2); }
.plan-type.dagtype-examen[b-nrs0i0l3nh] { background: var(--clp-foreground); color: var(--clp-background); }
.plan-type.dagtype-vrij[b-nrs0i0l3nh] { background: var(--clp-surface-muted); color: var(--clp-muted); }

.plan-chips[b-nrs0i0l3nh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

/* position: relative houdt de verborgen tekst voor een schermlezer (absoluut gepositioneerd) binnen de chip: anders
   staat hij achter de volle naam, buiten de afgekapte chip, en schuift de lijst op een telefoon opzij. */
.plan-chip[b-nrs0i0l3nh] {
    background: var(--clp-surface-muted);
    border: 1px solid var(--clp-border);
    border-radius: 999px;
    font-size: 0.78rem;
    max-width: 100%;
    overflow: hidden;
    padding: 0.05rem 0.6rem;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Een onderdeel in opbouw heeft nog geen vragen: een gestippelde rand zonder vulling, in dezelfde taal als de
   badge "in opbouw" van de kiezer. */
.plan-chip-opbouw[b-nrs0i0l3nh] {
    background: transparent;
    border-style: dashed;
    color: var(--clp-muted);
}

.plan-chip-meer[b-nrs0i0l3nh] {
    color: var(--clp-muted);
    font-weight: 600;
}

/* Notitie en begeleidingsmoment op één regel: wat te lang is, wordt afgekapt (de volledige tekst staat in
   de editor en in de titel). */
.plan-regel[b-nrs0i0l3nh] {
    align-items: baseline;
    display: flex;
    gap: 0.6rem;
    min-width: 0;
}

.plan-notitie[b-nrs0i0l3nh] {
    flex: 2 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-moment[b-nrs0i0l3nh] {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-lesnotitie[b-nrs0i0l3nh] {
    flex: none;
    white-space: nowrap;
}

.plan-rechts[b-nrs0i0l3nh] {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.2rem 0.6rem;
    justify-content: flex-end;
}

.plan-status[b-nrs0i0l3nh] {
    font-size: 0.85rem;
    font-weight: 600;
}

.plan-paneel[b-nrs0i0l3nh] {
    border-top: 1px solid var(--clp-border);
    padding: 0.6rem 0.75rem 0.75rem;
}

/* Op een telefoon is de status geen kolom meer maar een regel onder de rest. */
@media (max-width: 575.98px) {
    .plan-rechts[b-nrs0i0l3nh] {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}

@media (pointer: coarse) {
    .plan-datum[b-nrs0i0l3nh],
    .plan-acties-knop[b-nrs0i0l3nh] {
        min-height: var(--clp-touch-target);
    }
}
/* /Components/Pages/Begeleiding/StudieplanningTab.razor.rz.scp.css */
/* Het tabblad Examenplanning. Het bord en de wizard hebben hun eigen opmaak; hier staat alleen de lege toestand: een zin en één knop,
   op een telefoon over de volle breedte zodat de duim er zonder mikken bij kan. */
.studietab-leeg[b-oxtethhy5d] {
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius-card);
    padding: 1rem;
}

.studietab-leeg .btn[b-oxtethhy5d] {
    min-height: var(--clp-touch-target);
    width: 100%;
}

@media (min-width: 576px) {
    .studietab-leeg .btn[b-oxtethhy5d] {
        width: auto;
    }
}
/* /Components/Pages/Begeleiding/WeeksjabloonPaneel.razor.rz.scp.css */
.weeksjabloon[b-edimbizqny] {
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    background: var(--clp-surface);
    padding: 0.6rem 0.9rem;
}

.weeksjabloon > summary[b-edimbizqny] {
    cursor: pointer;
}
/* /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/Crm/Burndown.razor.rz.scp.css */
.burndown[b-duv322ig3m] {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
}

.burndown-nul[b-duv322ig3m] {
    stroke: var(--clp-border);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.burndown-lijn[b-duv322ig3m] {
    fill: none;
    stroke: var(--clp-secondary);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.burndown-lijn-onder[b-duv322ig3m] {
    stroke: var(--clp-wrong);
}

.burndown-punt[b-duv322ig3m] {
    fill: var(--clp-secondary);
}
/* /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;
}

/* De kleuren .heat-high/-mid/-low/-none staan in app.css: de dageditor van het examenplan deelt ze. */
/* /Components/Pages/Studie/DevStudie.razor.rz.scp.css */
/* Alleen de indeling van de nakijkpagina; de bouwstenen dragen hun eigen opmaak. Niets heeft een vaste breedte, zodat de pagina op 360 px
   niet zijwaarts schuift. */
.dev-lijst[b-phwseoqhq4] {
    margin: 0;
    padding: 0;
}

.dev-rij[b-phwseoqhq4] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.dev-nummer[b-phwseoqhq4] {
    min-width: 1.5rem;
}

.dev-label[b-phwseoqhq4] {
    color: var(--clp-muted);
    min-width: 8.5rem;
}

.dev-balk[b-phwseoqhq4] {
    flex: 1 1 8rem;
    max-width: 14rem;
}

.dev-doel[b-phwseoqhq4] {
    background: var(--clp-surface-muted);
    border: 2px dashed var(--clp-border);
    border-radius: var(--clp-radius);
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
}

.dev-doel-actief[b-phwseoqhq4] {
    border-color: var(--clp-secondary);
}

.dev-dagen[b-phwseoqhq4] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}

.dev-dag[b-phwseoqhq4] {
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.6rem 0.75rem;
}

.dev-dagkop[b-phwseoqhq4] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
}

.dev-tekst dt[b-phwseoqhq4] {
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.dev-tekst dd[b-phwseoqhq4] {
    margin-bottom: 0;
}

.dev-stuk[b-phwseoqhq4] {
    display: inline-block;
    margin-right: 0.75rem;
}
/* /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;
}
/* /Components/Studieplanning/AanpassingMelding.razor.rz.scp.css */
/* Een rustig blok in de zachte accentkleur van de app (groen, licht en donker via de tokens): geen waarschuwing, de planning
   deed wat ze moest doen. De knoppen halen 44 px. */
.aanpassing-melding[b-k23rtk38fc] {
    background: var(--clp-accent-zachter);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius-card);
    color: var(--clp-foreground);
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
}

.aanpassing-tekst[b-k23rtk38fc] {
    font-weight: 600;
    margin: 0;
}

.aanpassing-zinnen[b-k23rtk38fc] {
    margin: 0.35rem 0 0;
    padding-left: 1.25rem;
}

.aanpassing-fout[b-k23rtk38fc] {
    margin: 0.5rem 0 0;
}

.aanpassing-acties[b-k23rtk38fc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.aanpassing-acties .btn[b-k23rtk38fc] {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: var(--clp-touch-target);
}
/* /Components/Studieplanning/Belastingbalk.razor.rz.scp.css */
/* De vulling staat op --vulling (procent van de balk) en het streepje van 100 % op --streepje, beide uit de markup. De kleuren zijn
   --belasting-past, -vol en -te-vol uit app.css; elk haalt 3 : 1 tegen het spoor, in licht en in donker. Het niveau staat ook als
   woord naast de balk, dus kleur is nooit het enige teken. */
.belastingbalk[b-wp92brunxm] {
    align-items: center;
    display: flex;
    gap: 0.4rem;
    max-width: 100%;
    min-width: 0;
}

.belastingbalk-spoor[b-wp92brunxm] {
    background: var(--clp-track);
    border-radius: 999px;
    flex: 1 1 3rem;
    height: 0.5rem;
    min-width: 2rem;
    overflow: hidden;
    position: relative;
}

.belastingbalk-vulling[b-wp92brunxm] {
    background: var(--belasting);
    border-radius: 999px;
    display: block;
    height: 100%;
    width: var(--vulling);
}

/* Het streepje van 100 %: wat rechts ervan staat is te veel. */
.belastingbalk-spoor[b-wp92brunxm]::after {
    background: var(--clp-foreground);
    bottom: 0;
    content: "";
    left: var(--streepje);
    opacity: 0.55;
    position: absolute;
    top: 0;
    width: 1px;
}

.belastingbalk-woord[b-wp92brunxm] {
    color: var(--clp-foreground);
    flex: none;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.belastingbalk-past[b-wp92brunxm] {
    --belasting: var(--belasting-past);
}

.belastingbalk-vol[b-wp92brunxm] {
    --belasting: var(--belasting-vol);
}

.belastingbalk-te-vol[b-wp92brunxm] {
    --belasting: var(--belasting-te-vol);
}

@media (forced-colors: active) {
    .belastingbalk-vulling[b-wp92brunxm] {
        background: Highlight;
    }
}
/* /Components/Studieplanning/Blokchip.razor.rz.scp.css */
/* Het vlak en de tekst komen uit --vak-bg en --vak-ink, die Planningkleur.VakStijl op het element zet uit de tokens --vak-0 tot
   --vak-11 van app.css (licht en donker). Een zacht vlak heeft op wit maar 1,4 : 1 tegen de bladzijde, daarom heeft de chip een
   rand in dezelfde tint als zijn tekst; de tekst zelf haalt 7 : 1 of meer. */
.blokchip[b-hcxic2bm82] {
    align-items: center;
    background: var(--vak-bg);
    border: 1px solid var(--vak-ink);
    border-color: color-mix(in srgb, var(--vak-ink) 55%, var(--vak-bg));
    border-radius: var(--clp-radius);
    box-sizing: border-box;
    color: var(--vak-ink);
    display: inline-flex;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    gap: 0.35rem;
    line-height: 1.25;
    margin: 0;
    max-width: 100%;
    min-height: 2.25rem;
    overflow-wrap: anywhere;
    padding: 0.3rem 0.7rem;
    text-align: left;
    vertical-align: middle;
}

.blokchip.is-knop[b-hcxic2bm82] {
    cursor: pointer;
}

.blokchip.is-knop:hover[b-hcxic2bm82] {
    border-color: var(--vak-ink);
}

/* Een div en geen knop (Firefox sleept niet vanaf een knop): geen tekst die meeselecteert terwijl je sleept. */
.blokchip.is-sleepbaar[b-hcxic2bm82] {
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

.blokchip.is-sleepbaar:active[b-hcxic2bm82] {
    cursor: grabbing;
}

.blokchip:focus-visible[b-hcxic2bm82] {
    outline: 3px solid var(--clp-foreground);
    outline-offset: 2px;
}

/* Geselecteerd: een ring met een naad van de achtergrond ertussen, zodat hij ook op een gekleurde dag te zien is, en een zwaarder
   lettertype zodat het niet alleen aan kleur hangt. */
.blokchip.is-geselecteerd[b-hcxic2bm82] {
    box-shadow: 0 0 0 2px var(--clp-surface), 0 0 0 5px var(--clp-secondary);
    font-weight: 700;
}

/* Een herhaling is lichter: een verdund vlak van het vak, een streepjesrand en de gewone voorgrond (15 : 1 of meer, ook in donker
   11 : 1). De laatste herhaling van een vak heeft dezelfde tint met een dichte, dikkere rand. */
.blokchip-herhaling[b-hcxic2bm82],
.blokchip-laatste[b-hcxic2bm82] {
    background: var(--clp-surface);
    background: color-mix(in srgb, var(--vak-bg) 35%, var(--clp-surface));
    border-style: dashed;
    color: var(--clp-foreground);
}

.blokchip-laatste[b-hcxic2bm82] {
    border-style: solid;
    border-width: 2px;
    font-weight: 600;
}

/* Gedaan: doorgestreept, met een vinkje ervoor. Niet gedaan: een stippelrand en schuin, met een kruisje ervoor. */
.blokchip.is-gedaan .blokchip-tekst[b-hcxic2bm82] {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.blokchip.is-niet-gedaan[b-hcxic2bm82] {
    border-style: dotted;
}

.blokchip.is-niet-gedaan .blokchip-tekst[b-hcxic2bm82] {
    font-style: italic;
}

.blokchip-teken[b-hcxic2bm82] {
    flex: none;
    font-weight: 700;
    line-height: 1;
}

/* Een duim heeft 44 px nodig: op een aanraakscherm en op elk smal scherm (de lijst van dagen en de lade onderaan). Alleen voor een
   chip die je kunt aantikken; een chip die enkel toont blijft compact. */
@media (pointer: coarse), (max-width: 991.98px) {
    .blokchip.is-knop[b-hcxic2bm82] {
        min-height: var(--clp-touch-target);
        min-width: var(--clp-touch-target);
    }
}

@media (forced-colors: active) {
    .blokchip.is-geselecteerd[b-hcxic2bm82] {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }
}
/* /Components/Studieplanning/Dagsoortlabel.razor.rz.scp.css */
/* Elke soort heeft zijn vlak en tekst uit --dag-zwaar tot --dag-vrij van app.css (licht en donker, tekst 5,4 : 1 of meer). Hoe
   zwaarder de dag, hoe voller het vlak. Een vrije dag heeft geen vlak maar een stippelrand. Een bufferdag is gearceerd op het
   oppervlak met de gewone voorgrond (11,5 : 1 in licht, 7,4 : 1 in donker, gemeten over de strepen heen); het woord staat erbij,
   dus de arcering is nooit het enige teken. */
.dagsoort[b-vz6w8dkq1c] {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    box-sizing: border-box;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    max-width: 100%;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

.dagsoort-zwaar[b-vz6w8dkq1c] {
    background: var(--dag-zwaar);
    color: var(--dag-zwaar-ink);
}

.dagsoort-gemiddeld[b-vz6w8dkq1c] {
    background: var(--dag-gemiddeld);
    color: var(--dag-gemiddeld-ink);
}

.dagsoort-licht[b-vz6w8dkq1c] {
    background: var(--dag-licht);
    color: var(--dag-licht-ink);
}

.dagsoort-vrij[b-vz6w8dkq1c] {
    background: var(--dag-vrij);
    border: 1px dashed var(--clp-muted);
    color: var(--dag-vrij-ink);
}

.dagsoort-buffer[b-vz6w8dkq1c] {
    background-color: var(--clp-surface);
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0,
        transparent 5px,
        rgba(128, 138, 156, 0.4) 5px,
        rgba(128, 138, 156, 0.4) 9px);
    border: 1px dashed var(--clp-muted);
    color: var(--clp-foreground);
}

@media (forced-colors: active) {
    .dagsoort[b-vz6w8dkq1c] {
        border: 1px solid CanvasText;
    }
}
/* /Components/Studieplanning/IncheckKaart.razor.rz.scp.css */
/* De chips van de dag en de drie knoppen. Op een telefoon staan de knoppen onder elkaar, 44 px hoog en over de volle breedte: een
   duim raakt er altijd een. Vanaf 576 px staan ze naast elkaar. Het uiterlijk van de kaart zelf (de blauwe streep) staat in
   IncheckKaarten.razor.css, want de kaart na een pauze deelt het. */
.incheck-chips[b-znvadb6ps5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.9rem;
    padding: 0;
}

.incheck-wacht[b-znvadb6ps5] {
    margin: 0 0 0.75rem;
}

.incheck-knoppen[b-znvadb6ps5] {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr;
}

.incheck-knoppen .btn[b-znvadb6ps5] {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: var(--clp-touch-target);
}

.incheck-vinkjes[b-znvadb6ps5] {
    border: 0;
    border-top: 1px solid var(--clp-border);
    margin: 0.9rem 0 0;
    padding: 0.75rem 0 0;
}

.incheck-vinkjes legend[b-znvadb6ps5] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

@media (min-width: 576px) {
    .incheck-knoppen[b-znvadb6ps5] {
        grid-template-columns: repeat(3, auto);
        justify-content: start;
    }
}
/* /Components/Studieplanning/IncheckKaarten.razor.rz.scp.css */
/* Het uiterlijk van beide kaarten (IncheckKaart en IncheckMeerKaart): de vraag staat bovenaan de pagina en valt op met een blauwe
   streep links (--clp-secondary, licht en donker), zonder te schreeuwen. "Klaar" is op een telefoon een volle knop van 44 px. */
.incheckkaarten[b-rm1bief4j9]  .incheckkaart {
    border-left: 4px solid var(--clp-secondary);
    margin-bottom: 1rem;
}

.incheckkaarten[b-rm1bief4j9]  .incheckkaart.is-wachtend {
    background: var(--clp-surface-muted);
}

.incheckkaarten[b-rm1bief4j9]  .incheck-klaar {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    margin-top: 0.75rem;
    min-height: var(--clp-touch-target);
    width: 100%;
}

@media (min-width: 576px) {
    .incheckkaarten[b-rm1bief4j9]  .incheck-klaar {
        width: auto;
    }
}
/* /Components/Studieplanning/IncheckMeerKaart.razor.rz.scp.css */
/* Eén blok per dag: de kop van de dag en zijn vinkjes. Het uiterlijk van de kaart zelf staat in IncheckKaarten.razor.css. */
.incheck-dag[b-k3vsv8dw0k] {
    border: 0;
    border-top: 1px solid var(--clp-border);
    margin: 0.5rem 0 0;
    padding: 0.6rem 0 0.25rem;
}

.incheck-dag legend[b-k3vsv8dw0k] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* "Alles gedaan" onder de vraag: een volle knop van 44 px op een telefoon, vanaf 576 px zo breed als zijn tekst. */
.incheck-meer-alles[b-k3vsv8dw0k] {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    margin: 0.25rem 0 0.5rem;
    min-height: var(--clp-touch-target);
    width: 100%;
}

@media (min-width: 576px) {
    .incheck-meer-alles[b-k3vsv8dw0k] {
        width: auto;
    }
}
/* /Components/Studieplanning/Planbord.razor.rz.scp.css */
/* Het planbord: een kolom met de balk, de waarschuwingen, de lade en de dagen, en daaronder de zin over wat er gebeurde en de
   geschiedenis. Tot 1200 px zijn de lade en de dagkiezer vaste bladen onderaan (op een telefoon boven de tabbar van de app); het bord laat
   er ruimte voor. Vanaf 1200 px staat de lade links van de dagen, en het bord mag breder zijn dan de pagina. */
.planbord[b-849m4vojtz] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* Ruimte onderaan voor de lade (3,25 rem) en de zin onder het bord, zodat de laatste dag niet achter de balk verdwijnt. */
    padding-bottom: 5.5rem;
}

.planbord-namens[b-849m4vojtz] {
    font-weight: 600;
    margin: 0;
}

.planbord-afgerond[b-849m4vojtz] {
    margin: 0;
}

.planbord-bord[b-849m4vojtz] {
    display: block;
}

/* ── Waarschuwingen: regels, nooit een pop-up ───────────────────────────────────────── */

.waarschuwingen[b-849m4vojtz] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.waarschuwingen-lijst[b-849m4vojtz] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.waarschuwing[b-849m4vojtz] {
    align-items: center;
    background: var(--clp-waarschuwing-bg);
    border: 1px solid var(--clp-hervat-rand);
    border-radius: var(--clp-radius);
    color: var(--clp-waarschuwing-ink);
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.75rem;
    justify-content: space-between;
    padding: 0.25rem 0.3rem 0.25rem 0.7rem;
}

.waarschuwing-tekst[b-849m4vojtz] {
    flex: 1 1 14rem;
    font-size: 0.875rem;
    line-height: 1.3;
    min-width: 0;
}

.waarschuwing-toon[b-849m4vojtz] {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--clp-radius);
    color: inherit;
    cursor: pointer;
    flex: none;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    min-height: 2rem;
    padding: 0.1rem 0.75rem;
}

.waarschuwing-toon:hover[b-849m4vojtz] {
    background: rgba(128, 138, 156, 0.18);
}

.waarschuwing-toon:focus-visible[b-849m4vojtz] {
    outline: 3px solid var(--clp-foreground);
    outline-offset: 2px;
}

.waarschuwingen-meer summary[b-849m4vojtz] {
    color: var(--clp-muted);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    min-height: 2rem;
    padding: 0.35rem 0.2rem;
}

.waarschuwingen-meer summary:focus-visible[b-849m4vojtz] {
    outline: 3px solid var(--clp-foreground);
    outline-offset: 2px;
}

.waarschuwingen-meer .waarschuwingen-lijst[b-849m4vojtz] {
    margin-top: 0.3rem;
}

@media (pointer: coarse), (max-width: 991.98px) {
    .waarschuwing-toon[b-849m4vojtz] {
        min-height: var(--clp-touch-target);
    }

    .waarschuwingen-meer summary[b-849m4vojtz] {
        min-height: var(--clp-touch-target);
    }
}

/* ── De zin onder het bord ──────────────────────────────────────────────────────────── */

/* Het element staat er altijd, ook leeg, want een schermlezer meldt alleen wat in een bestaande live-regio verschijnt. Leeg is hij
   onzichtbaar maar niet weg. */
.planbord-melding.is-leeg[b-849m4vojtz] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.planbord-melding:not(.is-leeg)[b-849m4vojtz] {
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-left-width: 5px;
    border-radius: var(--clp-radius);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
    box-sizing: border-box;
    color: var(--clp-foreground);
    font-weight: 600;
    padding: 0.6rem 0.9rem;
    /* Altijd in beeld, ook als het raster hoger is dan het scherm. */
    position: sticky;
    bottom: 1rem;
    z-index: 36;
}

.planbord-melding.is-fout[b-849m4vojtz] {
    border-left-color: var(--clp-wrong);
}

.planbord-melding.is-info[b-849m4vojtz] {
    border-left-color: var(--clp-correct);
}

@media (max-width: 1199.98px) {
    /* Op een telefoon boven de lade (en boven de dagkiezer als die openstaat), en boven de tabbar van de app. */
    .planbord-melding:not(.is-leeg)[b-849m4vojtz] {
        bottom: calc(var(--clp-tabbar-height) + env(safe-area-inset-bottom) + 3.9rem);
        left: 1rem;
        position: fixed;
        right: 1rem;
        z-index: 1026;
    }

    .heeft-keuze .planbord-melding:not(.is-leeg)[b-849m4vojtz] {
        bottom: calc(var(--clp-tabbar-height) + env(safe-area-inset-bottom) + 14.5rem);
    }

    .planbord.heeft-keuze[b-849m4vojtz] {
        padding-bottom: calc(var(--clp-tabbar-height) + 14rem);
    }

    .planbord[b-849m4vojtz] {
        /* De lade en de zin eronder zijn vast; het laatste stuk van de lijst blijft bereikbaar. */
        padding-bottom: calc(var(--clp-tabbar-height) + 4.5rem);
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .planbord-melding:not(.is-leeg)[b-849m4vojtz] {
        bottom: 4.5rem;
    }

    .heeft-keuze .planbord-melding:not(.is-leeg)[b-849m4vojtz] {
        bottom: 14.5rem;
    }

    .planbord.heeft-keuze[b-849m4vojtz] {
        padding-bottom: 14rem;
    }

    .planbord[b-849m4vojtz] {
        padding-bottom: 6rem;
    }
}

/* ── Computer: de lade links, de dagen rechts ───────────────────────────────────────── */

@media (min-width: 1200px) {
    .planbord[b-849m4vojtz] {
        padding-bottom: 1rem;
    }

    .planbord-bord[b-849m4vojtz] {
        align-items: start;
        display: grid;
        gap: 1rem;
        grid-template-columns: 14rem minmax(0, 1fr);
    }

    /* De zin staat boven de dagkiezer-balk onder in beeld. */
    .heeft-keuze .planbord-melding:not(.is-leeg)[b-849m4vojtz] {
        bottom: 6rem;
    }
}

/* Het bord mag breder zijn dan de pagina als het scherm het toelaat: zeven kolommen naast een lade hebben ruimte nodig. De breedte is
   het scherm min de zijbalk en wat opvulling, zodat de pagina niet zijwaarts schuift. */
@media (min-width: 1200px) {
    .planbord[b-849m4vojtz] {
        --planbord-breedte: min(calc(100vw - var(--clp-sidenav-width) - 3rem), 88rem);
        margin-inline: calc((100% - var(--planbord-breedte)) / 2);
        width: var(--planbord-breedte);
    }
}
/* /Components/Studieplanning/PlanbordBalk.razor.rz.scp.css */
/* De balk bovenaan het bord. Op een computer is hij één rij die bovenaan blijft staan. Op een telefoon is hij display: contents: dan
   zijn de twee groepen kinderen van het bord (een kolom), blijft alleen de eerste bovenaan staan ("Stel voor" en "Ongedaan maken", die op
   360 px op één regel passen) en scrolt de tweede mee. */
.balk[b-hmlp3w5vo0] {
    display: contents;
}

.balk-vast[b-hmlp3w5vo0] {
    align-items: center;
    background: var(--clp-background);
    border-bottom: 1px solid var(--clp-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    margin: 0 -0.25rem;
    padding: 0.45rem 0.25rem;
    position: sticky;
    top: 0;
    z-index: 30;
}

.balk-instellingen[b-hmlp3w5vo0] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
}

@media (min-width: 992px) {
    .balk[b-hmlp3w5vo0] {
        align-items: center;
        background: var(--clp-background);
        border-bottom: 1px solid var(--clp-border);
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem 1.25rem;
        margin: 0 -0.25rem;
        padding: 0.45rem 0.25rem;
        position: sticky;
        top: 0;
        z-index: 30;
    }

    .balk-vast[b-hmlp3w5vo0] {
        border-bottom: 0;
        margin: 0;
        padding: 0;
        position: static;
    }
}

/* "Stel voor" is een knop met een pijltje eraan dat de keuze van de stijl opent. */
.stelvoor[b-hmlp3w5vo0] {
    display: inline-flex;
    position: relative;
}

.stelvoor-knop[b-hmlp3w5vo0] {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.stelvoor-kies[b-hmlp3w5vo0] {
    border-bottom-left-radius: 0;
    border-left: 1px solid rgba(15, 23, 42, 0.25);
    border-top-left-radius: 0;
    min-width: 2rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

/* Een onzichtbare laag onder het menu: een tik ernaast sluit het menu. */
.stelvoor-sluier[b-hmlp3w5vo0] {
    background: transparent;
    border: 0;
    cursor: default;
    inset: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    z-index: 40;
}

.stelvoor-menu[b-hmlp3w5vo0] {
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
    left: 0;
    min-width: min(19rem, calc(100vw - 2rem));
    padding: 0.3rem;
    position: absolute;
    top: calc(100% + 0.3rem);
    z-index: 41;
}

.stelvoor-item[b-hmlp3w5vo0] {
    background: transparent;
    border: 0;
    border-radius: calc(var(--clp-radius) - 2px);
    color: var(--clp-foreground);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    gap: 0.1rem;
    min-height: var(--clp-touch-target);
    padding: 0.5rem 0.7rem;
    text-align: left;
    width: 100%;
}

.stelvoor-item:hover[b-hmlp3w5vo0],
.stelvoor-item:focus-visible[b-hmlp3w5vo0] {
    background: var(--clp-surface-muted);
}

.stelvoor-item:focus-visible[b-hmlp3w5vo0] {
    outline: 3px solid var(--clp-foreground);
    outline-offset: -3px;
}

.stelvoor-naam[b-hmlp3w5vo0] {
    font-weight: 700;
}

.stelvoor-uitleg[b-hmlp3w5vo0] {
    color: var(--clp-muted);
    font-size: 0.8rem;
}

@media (pointer: coarse), (max-width: 991.98px) {
    .balk-vast .btn[b-hmlp3w5vo0],
    .balk-instellingen .btn[b-hmlp3w5vo0] {
        min-height: var(--clp-touch-target);
    }

    .stelvoor-kies[b-hmlp3w5vo0] {
        min-width: var(--clp-touch-target);
    }
}
/* /Components/Studieplanning/PlanbordDag.razor.rz.scp.css */
/* Eén dag van het bord. Op een telefoon een kaart in de lijst, op een computer een cel in het maandraster (de indeling van de lijst
   staat in PlanbordRaster.razor.css). Kleuren komen uit de tokens van app.css, dus licht en donker kloppen vanzelf. */
.dag[b-ydlmoiqu78] {
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    list-style: none;
    min-width: 0;
    padding: 0.55rem 0.65rem 0.65rem;
    /* "Toon" scrolt een dag in beeld: ruimte voor de balk die bovenaan blijft staan. */
    scroll-margin-top: 4.5rem;
}

.dag:focus[b-ydlmoiqu78] {
    outline: none;
}

.dag:focus-visible[b-ydlmoiqu78] {
    outline: 3px solid var(--clp-foreground);
    outline-offset: 2px;
}

.dag-kop[b-ydlmoiqu78] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
}

.dag-datum[b-ydlmoiqu78] {
    align-items: center;
    color: var(--clp-foreground);
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    /* Dezelfde hoogte als de datumknop: zodra er een blok gekozen is, springt er niets. */
    min-height: 1.75rem;
}

/* De datum is een knop zolang er een blok gekozen is: dan zet een tik of Enter het blok op deze dag. */
.dag-datum-knop[b-ydlmoiqu78] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--clp-radius);
    cursor: pointer;
    font-family: inherit;
    margin: 0 -0.3rem;
    padding: 0.1rem 0.3rem;
    text-align: left;
}

.dag-datum-knop:hover[b-ydlmoiqu78] {
    background: var(--clp-surface-muted);
}

.dag-datum-knop:focus-visible[b-ydlmoiqu78] {
    outline: 3px solid var(--clp-foreground);
    outline-offset: 2px;
}

.dag-vandaag[b-ydlmoiqu78] {
    background: var(--clp-secondary);
    border-radius: 999px;
    color: var(--clp-secondary-ink);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 0.2rem 0.5rem;
    text-transform: uppercase;
}

.dag-examen[b-ydlmoiqu78] {
    color: var(--clp-foreground);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.dag-blokken[b-ydlmoiqu78] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dag-blok[b-ydlmoiqu78] {
    max-width: 100%;
    min-width: 0;
}

.dag-antwoord[b-ydlmoiqu78] {
    color: var(--clp-muted);
    font-size: 0.8rem;
    margin: 0;
}

.dag-balk[b-ydlmoiqu78] {
    margin-top: auto;
}

/* Het menu van een aangetikt blok: Verplaats, Terug naar de lade, Herhaling niet nodig. */
.blokmenu[b-ydlmoiqu78] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

.blokmenu-knop[b-ydlmoiqu78] {
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    color: var(--clp-foreground);
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    min-height: 2.25rem;
    padding: 0.3rem 0.65rem;
}

.blokmenu-knop:hover[b-ydlmoiqu78] {
    background: var(--clp-surface-muted);
}

.blokmenu-knop:focus-visible[b-ydlmoiqu78] {
    outline: 3px solid var(--clp-foreground);
    outline-offset: 2px;
}

.blokmenu-sluit[b-ydlmoiqu78] {
    border-color: transparent;
    color: var(--clp-muted);
}

/* ── Soorten dag ─────────────────────────────────────────────────────────────────────── */

/* Vandaag: een blauwe rand. */
.dag.is-vandaag[b-ydlmoiqu78] {
    border-color: var(--clp-secondary);
    box-shadow: 0 0 0 1px var(--clp-secondary);
}

/* Een voorbije dag verandert niet meer: grijs, zonder aanraakdoelen. */
.dag.is-voorbij[b-ydlmoiqu78] {
    background: var(--clp-surface-muted);
}

.dag.is-voorbij .dag-datum[b-ydlmoiqu78] {
    color: var(--clp-muted);
}

/* Een vrije dag: geen vlak maar een stippelrand. */
.dag.dag-vrij[b-ydlmoiqu78] {
    background: transparent;
    border-style: dashed;
}

/* Een buffer is gearceerd en leeg (behalve inhaalwerk). De strepen zijn zacht genoeg dat de chips erop leesbaar blijven. */
.dag.dag-buffer[b-ydlmoiqu78] {
    background-color: var(--clp-surface);
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0,
        transparent 7px,
        rgba(128, 138, 156, 0.2) 7px,
        rgba(128, 138, 156, 0.2) 11px);
    border-style: dashed;
}

.dag.heeft-examen[b-ydlmoiqu78] {
    border-left: 4px solid var(--clp-foreground);
}

/* ── Plaatsen: licht op waar het mag, doffer waar niet ───────────────────────────────── */

.dag.is-licht[b-ydlmoiqu78] {
    background-color: color-mix(in srgb, var(--clp-secondary) 10%, var(--clp-surface));
    border-color: var(--clp-secondary);
    box-shadow: 0 0 0 1px var(--clp-secondary);
    cursor: pointer;
}

.dag.is-licht:hover[b-ydlmoiqu78] {
    background-color: color-mix(in srgb, var(--clp-secondary) 22%, var(--clp-surface));
    box-shadow: 0 0 0 2px var(--clp-secondary);
}

.dag.is-doffer[b-ydlmoiqu78] {
    opacity: 0.45;
}

/* "Toon": een korte markering op de dag waar de waarschuwing naar wees. */
.dag.is-getoond[b-ydlmoiqu78] {
    animation: dag-getoond-b-ydlmoiqu78 1.2s ease-in-out 2;
    outline: 3px solid var(--clp-secondary);
    outline-offset: 2px;
}

@keyframes dag-getoond-b-ydlmoiqu78 {
    50% {
        outline-color: transparent;
    }
}

/* ── Het balkje en de chips in een cel ───────────────────────────────────────────────── */

/* In het raster staan de chips onder elkaar, over de breedte van de cel; het woord naast het balkje past niet in een smalle cel (het
   balkje blijft een afbeelding met zijn label). */
@media (min-width: 992px) {
    .dag[b-ydlmoiqu78] {
        gap: 0.3rem;
        min-height: 6.5rem;
        padding: 0.4rem 0.4rem 0.45rem;
    }

    .dag-blokken[b-ydlmoiqu78] {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0.25rem;
    }

    .dag-blok[b-ydlmoiqu78] {
        display: flex;
        flex-direction: column;
    }

    .dag-blok[b-ydlmoiqu78]  .blokchip {
        font-size: 0.7rem;
        gap: 0.25rem;
        min-height: 1.75rem;
        padding: 0.15rem 0.3rem;
        /* Een cel is smal. De chip breekt alleen tussen woorden ("Wiskunde / H1"), nooit midden in een woord ("Geschiede / nis"): de
           algemene regel (overflow-wrap: anywhere) is voor de lade en de lijst, waar de chip breed is. */
        overflow-wrap: normal;
        width: 100%;
    }

    /* Past één woord niet in de cel (een lange vaknaam), dan sluit een beletselteken het af en blijft de chip even hoog. De volledige
       naam staat in de chip voor een schermlezer. */
    .dag-blok[b-ydlmoiqu78]  .blokchip-tekst {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dag[b-ydlmoiqu78]  .belastingbalk-woord {
        display: none;
    }

    .dag-datum[b-ydlmoiqu78] {
        font-size: 0.85rem;
        min-height: 1.5rem;
    }

    .dag[b-ydlmoiqu78]  .dagsoort {
        font-size: 0.7rem;
        padding: 0.1rem 0.4rem;
    }
}

@media (pointer: coarse), (max-width: 991.98px) {
    .dag-datum-knop[b-ydlmoiqu78],
    .blokmenu-knop[b-ydlmoiqu78] {
        min-height: var(--clp-touch-target);
    }

    .dag-datum-knop[b-ydlmoiqu78] {
        min-width: var(--clp-touch-target);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dag.is-getoond[b-ydlmoiqu78] {
        animation: none;
    }
}

@media (forced-colors: active) {
    .dag.is-licht[b-ydlmoiqu78] {
        outline: 2px solid Highlight;
    }
}
/* /Components/Studieplanning/PlanbordDagkiezer.razor.rz.scp.css */
/* De dagkiezer. Telefoon (en tablet, tot 1200 px): een blad onderaan, boven de tabbar, met de dagen als tegels die opzij schuiven en
   "Annuleer" eronder. Computer (vanaf 1200 px, met de lade links): een smalle balk onderaan het bord met de naam van het blok, "Naar de
   dagen" en "Annuleer"; de tegels zijn weg, want daar kiest de leerling op het raster zelf. */
.kiezer[b-ezf7y0fp5p] {
    animation: kiezer-op-b-ezf7y0fp5p 0.18s ease-out;
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius-card) var(--clp-radius-card) 0 0;
    bottom: calc(var(--clp-tabbar-height) + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.2);
    box-sizing: border-box;
    left: 0;
    padding: 0.75rem 1rem 0.6rem;
    position: fixed;
    right: 0;
    z-index: 1025;
}

@keyframes kiezer-op-b-ezf7y0fp5p {
    from {
        transform: translateY(100%);
    }
}

.kiezer-titel[b-ezf7y0fp5p] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    min-width: 0;
}

.kiezer-titel:focus[b-ezf7y0fp5p] {
    outline: none;
}

.kiezer-blok[b-ezf7y0fp5p] {
    overflow-wrap: anywhere;
}

.kiezer-hint[b-ezf7y0fp5p] {
    display: none;
}

.kiezer-leeg[b-ezf7y0fp5p] {
    margin: 0.6rem 0 0;
}

.kiezer-acties[b-ezf7y0fp5p] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    margin-top: 0.1rem;
}

.kiezer-annuleer[b-ezf7y0fp5p],
.kiezer-naar-dagen[b-ezf7y0fp5p] {
    background: transparent;
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    color: var(--clp-foreground);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    min-height: var(--clp-touch-target);
    padding: 0.35rem 0.85rem;
}

.kiezer-annuleer:hover[b-ezf7y0fp5p],
.kiezer-naar-dagen:hover[b-ezf7y0fp5p] {
    background: var(--clp-surface-muted);
}

.kiezer-annuleer:focus-visible[b-ezf7y0fp5p],
.kiezer-naar-dagen:focus-visible[b-ezf7y0fp5p],
.tegel:focus-visible[b-ezf7y0fp5p] {
    outline: 3px solid var(--clp-foreground);
    outline-offset: 2px;
}

.kiezer-naar-dagen[b-ezf7y0fp5p] {
    display: none;
}

/* De tegels: weekdag, datum en een balk in de kleur van hoe vol de dag is. Ze schuiven opzij. */
.kiezer-tegels[b-ezf7y0fp5p] {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0.6rem -1rem 0.4rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0.25rem 1rem 0.35rem;
    scroll-padding-inline: 1rem;
    scroll-snap-type: x proximity;
}

.kiezer-tegels > li[b-ezf7y0fp5p] {
    flex: none;
    scroll-snap-align: start;
}

.tegel[b-ezf7y0fp5p] {
    align-items: center;
    background: var(--clp-surface-muted);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    color: var(--clp-foreground);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    gap: 0.15rem;
    min-height: 4.5rem;
    min-width: 4rem;
    overflow: hidden;
    padding: 0.5rem 0.4rem 0;
    position: relative;
}

.tegel:hover[b-ezf7y0fp5p] {
    border-color: var(--clp-secondary);
}

.tegel-weekdag[b-ezf7y0fp5p] {
    color: var(--clp-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.tegel-datum[b-ezf7y0fp5p] {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.1;
}

/* De kleur van de belasting: groen (past), oranje (vol) of rood (te vol). */
.tegel-balk[b-ezf7y0fp5p] {
    background: var(--belasting);
    height: 0.4rem;
    margin-top: auto;
    width: calc(100% + 0.8rem);
}

@media (min-width: 1200px) {
    .kiezer[b-ezf7y0fp5p] {
        align-items: center;
        animation: none;
        border-radius: var(--clp-radius-card);
        bottom: 1rem;
        box-shadow: 0 6px 24px rgba(15, 23, 42, 0.25);
        column-gap: 1rem;
        display: grid;
        grid-template-areas:
            "titel acties"
            "hint acties";
        grid-template-columns: minmax(0, 1fr) auto;
        left: 50%;
        max-width: 40rem;
        padding: 0.55rem 0.8rem;
        right: auto;
        transform: translateX(-50%);
        width: calc(100% - 2rem);
        z-index: 35;
    }

    .kiezer-titel[b-ezf7y0fp5p] {
        grid-area: titel;
    }

    .kiezer-hint[b-ezf7y0fp5p] {
        color: var(--clp-muted);
        display: block;
        font-size: 0.8rem;
        grid-area: hint;
        margin: 0;
    }

    .kiezer-acties[b-ezf7y0fp5p] {
        grid-area: acties;
        margin: 0;
    }

    .kiezer-tegels[b-ezf7y0fp5p],
    .kiezer-leeg[b-ezf7y0fp5p] {
        display: none;
    }

    .kiezer-naar-dagen[b-ezf7y0fp5p] {
        display: inline-block;
    }

    .kiezer-annuleer[b-ezf7y0fp5p],
    .kiezer-naar-dagen[b-ezf7y0fp5p] {
        min-height: 2.25rem;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Rechts onder zweeft de knop "Feedback" van de app: de knoppen blijven links ervan. */
    .kiezer-acties[b-ezf7y0fp5p] {
        padding-right: 10.5rem;
    }
}

/* Onder 992 px is die knop op /examenplanning verborgen (FeedbackButton); op het tabblad van de begeleider blijft hij, en dan houdt de kiezer ruimte vrij. */
@media (max-width: 1199.98px) {
    .kiezer.met-feedback .kiezer-acties[b-ezf7y0fp5p] {
        padding-right: 10.5rem;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .kiezer[b-ezf7y0fp5p] {
        bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kiezer[b-ezf7y0fp5p] {
        animation: none;
    }
}
/* /Components/Studieplanning/PlanbordGeschiedenis.razor.rz.scp.css */
/* De geschiedenis: ingeklapt onderaan het bord. */
.geschiedenis[b-nytkf512bu] {
    border-top: 1px solid var(--clp-border);
    padding-top: 0.5rem;
}

.geschiedenis summary[b-nytkf512bu] {
    cursor: pointer;
    font-weight: 600;
    min-height: var(--clp-touch-target);
    padding: 0.5rem 0;
}

.geschiedenis summary:focus-visible[b-nytkf512bu] {
    outline: 3px solid var(--clp-foreground);
    outline-offset: 2px;
}

.geschiedenis-lijst[b-nytkf512bu] {
    color: var(--clp-foreground);
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0 0 0.5rem;
}

.geschiedenis-lijst > li[b-nytkf512bu] {
    border-left: 3px solid var(--clp-border);
    overflow-wrap: anywhere;
    padding-left: 0.6rem;
}
/* /Components/Studieplanning/PlanbordHerhaling.razor.rz.scp.css */
/* Het paneel achter "Herhaling: {niveau}": vier niveaus als knoppen, en onder "Meer instellingen" de eigen afstanden. */
.herhaling[b-jic7o0lqqx] {
    background: var(--clp-surface-muted);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius-card);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
}

.herhaling-niveaus[b-jic7o0lqqx] {
    display: grid;
    gap: 0.35rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.herhaling-knop[b-jic7o0lqqx] {
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    color: var(--clp-foreground);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    min-height: var(--clp-touch-target);
    padding: 0.3rem 0.4rem;
}

.herhaling-knop:hover[b-jic7o0lqqx] {
    border-color: var(--clp-secondary);
}

.herhaling-knop:focus-visible[b-jic7o0lqqx],
.herhaling-meer summary:focus-visible[b-jic7o0lqqx] {
    outline: 3px solid var(--clp-foreground);
    outline-offset: 2px;
}

/* Het gekozen niveau: een vol vlak en een zwaarder lettertype, zodat het niet alleen aan kleur hangt. */
.herhaling-knop[aria-pressed="true"][b-jic7o0lqqx] {
    background: var(--clp-secondary);
    border-color: var(--clp-secondary);
    color: var(--clp-secondary-ink);
    font-weight: 700;
}

.herhaling-uitleg[b-jic7o0lqqx] {
    font-size: 0.9rem;
    margin: 0;
}

.herhaling-meer summary[b-jic7o0lqqx] {
    cursor: pointer;
    font-weight: 600;
    min-height: var(--clp-touch-target);
    padding: 0.5rem 0;
}

.herhaling-meer-inhoud[b-jic7o0lqqx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.25rem;
}

.herhaling-veld[b-jic7o0lqqx] {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    gap: 0.25rem;
}

.herhaling-hulp[b-jic7o0lqqx] {
    color: var(--clp-muted);
    font-size: 0.8rem;
    margin: 0;
}

.herhaling-fout[b-jic7o0lqqx] {
    color: var(--clp-wrong);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

.herhaling-meer-inhoud .btn[b-jic7o0lqqx] {
    align-self: flex-start;
    min-height: var(--clp-touch-target);
}

.herhaling-laatste[b-jic7o0lqqx] {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    min-height: var(--clp-touch-target);
    padding-left: 0;
}

.herhaling-laatste .form-check-input[b-jic7o0lqqx] {
    float: none;
    margin: 0;
}

@media (max-width: 400px) {
    .herhaling-niveaus[b-jic7o0lqqx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Components/Studieplanning/PlanbordLade.razor.rz.scp.css */
/* De lade. Op een computer een kolom links die meeschuift; op een telefoon een balk onderaan ("{n} blokken nog te plannen") die
   omhoog schuift tot een blad, boven de tabbar van de app (die op een telefoon onderaan staat). */
.lade[b-5abpdlrr48] {
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius-card);
    box-sizing: border-box;
    min-width: 0;
}

.lade-balk[b-5abpdlrr48] {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--clp-foreground);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-weight: 700;
    gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0.4rem 1rem;
    text-align: left;
    width: 100%;
}

/* Zweeft de knop "Feedback" van de app rechts voor de balk, dan blijft daar ruimte vrij; de tekst loopt desnoods over twee regels. Dat is
   zo tussen 992 en 1200 px (de lade is dan nog een balk onderaan), en op elke breedte als het bord op een pagina staat waar de knop blijft
   (RuimteVoorFeedback: het tabblad van de begeleider). Op /examenplanning verbergt de app die knop onder 992 px (FeedbackButton), dus
   daar is de hele breedte voor de balk. */
@media (min-width: 992px) {
    .lade-balk[b-5abpdlrr48] {
        padding-right: 10.5rem;
    }
}

.lade.met-feedback .lade-balk[b-5abpdlrr48] {
    padding-right: 10.5rem;
}

.lade-balk-tekst[b-5abpdlrr48] {
    font-size: 0.95rem;
    line-height: 1.2;
}

.lade-balk:focus-visible[b-5abpdlrr48] {
    outline: 3px solid var(--clp-foreground);
    outline-offset: -3px;
}

.lade-balk-pijl[b-5abpdlrr48] {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    flex: none;
    height: 0.6rem;
    margin-top: 0.3rem;
    transform: rotate(-135deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
    width: 0.6rem;
}

.lade.is-open .lade-balk-pijl[b-5abpdlrr48] {
    margin-top: 0;
    transform: rotate(45deg) translate(-2px, -2px);
}

.lade-inhoud[b-5abpdlrr48] {
    padding: 0 1rem 1rem;
}

.lade-kop[b-5abpdlrr48] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.lade-teller[b-5abpdlrr48] {
    background: var(--clp-surface-muted);
    border-radius: 999px;
    color: var(--clp-muted);
    font-size: 0.8rem;
    margin-left: 0.25rem;
    padding: 0.1rem 0.5rem;
}

.lade-leeg[b-5abpdlrr48] {
    font-size: 0.9rem;
    margin: 0 0 0.75rem;
}

.lade-vak[b-5abpdlrr48] {
    border-top: 1px solid var(--clp-border);
    padding: 0.35rem 0 0.6rem;
}

.lade-vak:focus[b-5abpdlrr48] {
    outline: none;
}

.lade-vaknaam-kop[b-5abpdlrr48] {
    font-size: 1rem;
    margin: 0;
}

.lade-vaknaam[b-5abpdlrr48] {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--clp-radius);
    color: var(--clp-foreground);
    column-gap: 0.55rem;
    cursor: pointer;
    display: grid;
    font: inherit;
    font-weight: 600;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: var(--clp-touch-target);
    padding: 0.25rem 0.35rem;
    text-align: left;
    width: 100%;
}

.lade-vaknaam:hover[b-5abpdlrr48] {
    background: var(--clp-surface-muted);
}

.lade-vaknaam:focus-visible[b-5abpdlrr48] {
    outline: 3px solid var(--clp-foreground);
    outline-offset: 1px;
}

/* De kleur van het vak als stip, links over twee regels: de naam bovenaan, eronder hoeveel er nog te plannen is. */
.lade-stip[b-5abpdlrr48] {
    background: var(--vak-bg);
    border: 1px solid var(--vak-ink);
    border-radius: 50%;
    grid-row: 1 / span 2;
    height: 0.9rem;
    width: 0.9rem;
}

.lade-vaktekst[b-5abpdlrr48] {
    grid-column: 2;
    line-height: 1.2;
    min-width: 0;
    overflow-wrap: anywhere;
}

.lade-vakaantal[b-5abpdlrr48] {
    color: var(--clp-muted);
    font-size: 0.8rem;
    font-weight: 500;
    grid-column: 2;
    line-height: 1.2;
}

.lade-blokken[b-5abpdlrr48] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
}

.lade-blokken > li[b-5abpdlrr48] {
    max-width: 100%;
}

/* ── Telefoon: een balk onderaan boven de tabbar, die omhoog schuift ────────────────── */

@media (max-width: 1199.98px) {
    .lade[b-5abpdlrr48] {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        bottom: calc(var(--clp-tabbar-height) + env(safe-area-inset-bottom));
        box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.14);
        display: flex;
        flex-direction: column;
        left: 0;
        max-height: 60vh;
        max-height: 60dvh;
        position: fixed;
        right: 0;
        z-index: 1020;
    }

    .lade-inhoud[b-5abpdlrr48] {
        display: none;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .lade.is-open .lade-inhoud[b-5abpdlrr48] {
        display: block;
    }

    .lade-kop[b-5abpdlrr48] {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .lade[b-5abpdlrr48] {
        bottom: 0;
    }
}

/* ── Computer: een kolom links ──────────────────────────────────────────────────────── */

@media (min-width: 1200px) {
    .lade[b-5abpdlrr48] {
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
        position: sticky;
        top: 4.5rem;
    }

    .lade-balk[b-5abpdlrr48] {
        display: none;
    }

    .lade-inhoud[b-5abpdlrr48] {
        padding-top: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lade-balk-pijl[b-5abpdlrr48] {
        transition: none;
    }
}
/* /Components/Studieplanning/PlanbordRaster.razor.rz.scp.css */
/* De dagen van het bord. Telefoon: een lijst van dagen onder elkaar met vandaag bovenaan en de voorbije dagen ingeklapt. Vanaf 992 px
   een maandraster: zeven kolommen, de weken als rijen, de maandag eerst. Het is dezelfde lijst; de eerste dag begint in de kolom van
   zijn weekdag (--eerste-kolom). */
.raster[b-x804diyv95] {
    min-width: 0;
}

.raster-dagen[b-x804diyv95],
.raster-weekdagen[b-x804diyv95] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.raster-dagen[b-x804diyv95] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.raster-weekdagen[b-x804diyv95] {
    display: none;
}

/* "Toon voorbije dagen": alleen op een telefoon, waar de voorbije dagen anders de lijst vullen voor de dag die telt. */
.raster-voorbij[b-x804diyv95] {
    background: transparent;
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    color: var(--clp-secondary);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    margin-bottom: 0.6rem;
    min-height: var(--clp-touch-target);
    padding: 0.4rem 0.8rem;
    width: 100%;
}

.raster-voorbij:hover[b-x804diyv95] {
    background: var(--clp-surface-muted);
}

.raster-voorbij:focus-visible[b-x804diyv95] {
    outline: 3px solid var(--clp-foreground);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .raster-dagen:not(.toon-voorbij)[b-x804diyv95]  .dag.is-voorbij {
        display: none;
    }
}

@media (min-width: 992px) {
    .raster-voorbij[b-x804diyv95] {
        display: none;
    }

    .raster-weekdagen[b-x804diyv95] {
        color: var(--clp-muted);
        display: grid;
        font-size: 0.8rem;
        font-weight: 700;
        gap: 0.4rem;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        margin-bottom: 0.35rem;
        text-align: center;
        text-transform: uppercase;
    }

    .raster-dagen[b-x804diyv95] {
        align-items: stretch;
        display: grid;
        gap: 0.4rem;
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .raster-dagen[b-x804diyv95]  .dag:first-child {
        grid-column-start: var(--eerste-kolom, 1);
    }
}
/* /Components/Studieplanning/PlanbordVak.razor.rz.scp.css */
/* "Hoeveel tijd voor {vak}?": een klein paneel onder de naam van het vak in de lade. */
.vak-paneel[b-dazqhx84v9] {
    background: var(--clp-surface-muted);
    border-radius: var(--clp-radius);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.25rem 0 0.5rem;
    padding: 0.75rem;
}

.vak-vraag[b-dazqhx84v9] {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
}

.vak-tijd[b-dazqhx84v9] {
    display: flex;
    gap: 0.35rem;
}

.vak-knop[b-dazqhx84v9] {
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    color: var(--clp-foreground);
    cursor: pointer;
    flex: 1 1 0;
    font: inherit;
    font-weight: 600;
    min-height: var(--clp-touch-target);
    padding: 0.3rem 0.5rem;
}

.vak-knop:hover:not(:disabled)[b-dazqhx84v9] {
    border-color: var(--clp-secondary);
}

.vak-knop:disabled[b-dazqhx84v9] {
    color: var(--clp-muted);
    cursor: default;
    opacity: 0.6;
}

.vak-knop:focus-visible[b-dazqhx84v9],
.vak-sluit:focus-visible[b-dazqhx84v9] {
    outline: 3px solid var(--clp-foreground);
    outline-offset: 2px;
}

/* De gekozen tijd: een vol vlak en een zwaarder lettertype, zodat het niet alleen aan kleur hangt. */
.vak-knop[aria-pressed="true"][b-dazqhx84v9] {
    background: var(--clp-secondary);
    border-color: var(--clp-secondary);
    color: var(--clp-secondary-ink);
    font-weight: 700;
}

/* Het label op een eigen regel: in de smalle lade (14 rem) past het niet naast de knoppen. */
.vak-lesuren[b-dazqhx84v9] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
}

.vak-lesuren-label[b-dazqhx84v9] {
    flex: 1 1 100%;
    font-size: 0.9rem;
}

.vak-stap[b-dazqhx84v9] {
    flex: 0 0 auto;
    font-size: 1.2rem;
    line-height: 1;
    min-width: var(--clp-touch-target);
}

.vak-lesuren-aantal[b-dazqhx84v9] {
    font-size: 1.05rem;
    font-weight: 700;
    min-width: 1.75rem;
    text-align: center;
}

.vak-herschik[b-dazqhx84v9] {
    align-items: center;
    border-top: 1px solid var(--clp-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    justify-content: space-between;
    padding-top: 0.6rem;
}

.vak-herschik-tekst[b-dazqhx84v9] {
    flex: 1 1 11rem;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

.vak-herschik .btn[b-dazqhx84v9] {
    min-height: var(--clp-touch-target);
}

.vak-sluit[b-dazqhx84v9] {
    align-self: flex-end;
    background: transparent;
    border: 0;
    border-radius: var(--clp-radius);
    color: var(--clp-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    min-height: 2.25rem;
    padding: 0.2rem 0.6rem;
}
/* /Components/Studieplanning/SeintjeKaart.razor.rz.scp.css */
/* De eenmalige vraag naar het seintje 's avonds (E13 STP-15). Een rustige kaart op Vandaag, geen venster: er is niets dat de leerling moet
   wegklikken om verder te kunnen. Kleuren komen uit de tokens van app.css, dus licht en donker volgen vanzelf. */
.seintjekaart[b-9hs5wpz0m0] {
    background: var(--clp-accent-zachter);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius-card);
    color: var(--clp-foreground);
    margin-bottom: 1rem;
    padding: 1rem 1.125rem;
}

.seintje-titel[b-9hs5wpz0m0] {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.375rem;
}

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

.seintje-tekst a[b-9hs5wpz0m0] {
    color: inherit;
    text-decoration: underline;
}

/* Twee knoppen: onder elkaar over de volle breedte op een telefoon (een duim bereikt ze allebei, en geen van de twee wordt afgebroken),
   naast elkaar vanaf een breder scherm. */
.seintje-knoppen[b-9hs5wpz0m0] {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.seintje-knoppen .btn[b-9hs5wpz0m0] {
    min-height: 2.75rem;
}

/* De grijze rand en tekst van de standaard "outline-secondary" haalt op de donkere kaart de 4,5 : 1 niet; de tekst van de gewone
   voorgrond wel, in licht en donker. Alleen de rusttoestand: bij hover blijft Bootstrap zijn eigen kleuren gebruiken. */
.seintje-knoppen .btn-outline-secondary[b-9hs5wpz0m0] {
    --bs-btn-color: var(--clp-foreground);
    --bs-btn-border-color: var(--clp-muted);
}

@media (min-width: 576px) {
    .seintje-knoppen[b-9hs5wpz0m0] {
        display: flex;
        flex-wrap: wrap;
    }

    .seintje-knoppen .btn[b-9hs5wpz0m0] {
        min-height: 0;
    }
}
/* /Components/Studieplanning/StudieplanningKaart.razor.rz.scp.css */
/* Dezelfde zachte merkgroene wash als de hero's van het dashboard. Die stijl staat scoped in Home.razor.css
   en komt dus niet door in een component. */
.verder-hero[b-bgjpdtpnu5] {
    background: rgba(160, 213, 145, 0.16);
    border-color: transparent;
}

.studieplanning-succes[b-bgjpdtpnu5] {
    font-weight: 600;
}

/* De vakken van vandaag als kleine pillen in de kleur van het vak: dezelfde kleuren als op het planbord (--vak-bg en --vak-ink
   komen uit Planningkleur.VakStijl). Een rand in de tint van de tekst houdt een zacht vlak zichtbaar op wit. */
.studieplanning-vakken[b-bgjpdtpnu5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0;
}

.studieplanning-vak[b-bgjpdtpnu5] {
    background: var(--vak-bg);
    border: 1px solid var(--vak-ink);
    border-color: color-mix(in srgb, var(--vak-ink) 55%, var(--vak-bg));
    border-radius: var(--clp-radius);
    color: var(--vak-ink);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.25;
    padding: 0.3rem 0.7rem;
}

.studieplanning-klaar[b-bgjpdtpnu5] {
    color: var(--clp-accent-ink);
    font-weight: 600;
}

.studieplanning-knop[b-bgjpdtpnu5] {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: var(--clp-touch-target);
}

/* De regel naar het planbord is de enige handeling op de kaart: een link van 44 px hoog, in het donkerdere blauw (--clp-secondary-hover,
   5 : 1 of meer op de groene wash, licht en donker) en vet, zodat hij op een telefoon niet verdwijnt. */
.studieplanning-link[b-bgjpdtpnu5] {
    align-items: center;
    color: var(--clp-secondary-hover);
    display: inline-flex;
    font-weight: 600;
    min-height: var(--clp-touch-target);
}
/* /Components/Studieplanning/StudieVandaag.razor.rz.scp.css */
/* Dezelfde zachte merkgroene wash als de hero's van het dashboard. Die stijl staat scoped in Home.razor.css
   en komt dus niet door in een component. */
.verder-hero[b-yh0zzv2ryy] {
    background: rgba(160, 213, 145, 0.16);
    border-color: transparent;
}

.vandaag-kop[b-yh0zzv2ryy] {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.75rem;
    margin-bottom: 1rem;
}

/* De melding van een begeleider: één regel met "Toon" ernaast, onder elkaar als er meer zijn. */
.vandaag-melding[b-yh0zzv2ryy] {
    align-items: center;
    background: var(--clp-accent-zachter);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius-card);
    color: var(--clp-foreground);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0.6rem 1rem;
}

.vandaag-melding-tekst[b-yh0zzv2ryy] {
    font-weight: 600;
}

.vandaag-melding .btn[b-yh0zzv2ryy],
.vandaag-acties .btn[b-yh0zzv2ryy],
.vandaag-planning[b-yh0zzv2ryy] {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: var(--clp-touch-target);
}

.vandaag-succes[b-yh0zzv2ryy] {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.vandaag-blokken[b-yh0zzv2ryy] {
    margin-top: 0.25rem;
}

.vandaag-klaar[b-yh0zzv2ryy] {
    color: var(--clp-accent-ink);
    font-weight: 600;
    margin: 0.5rem 0 0;
}

/* Twee knoppen na het laatste examen: onder elkaar op een telefoon, naast elkaar vanaf 576 px. */
.vandaag-acties[b-yh0zzv2ryy] {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr;
}

.vandaag-vinkfout[b-yh0zzv2ryy] {
    margin: 0.5rem 0 0;
}

.vandaag-regel[b-yh0zzv2ryy] {
    margin: 0 0 0.5rem;
}

.vandaag-planning[b-yh0zzv2ryy] {
    /* Onderaan lucht: wat erna komt (de kaart over het seintje) hoort er niet tegenaan te kleven. */
    margin-bottom: 1rem;
    margin-top: 0.5rem;
    width: 100%;
}

@media (min-width: 576px) {
    .vandaag-planning[b-yh0zzv2ryy] {
        width: auto;
    }

    .vandaag-acties[b-yh0zzv2ryy] {
        grid-template-columns: repeat(2, auto);
        justify-content: start;
    }
}
/* /Components/Studieplanning/VandaagVinkregel.razor.rz.scp.css */
/* Een regel van minstens 44 px: het vinkje, groter dan het gewone, en de chip erachter. De hele regel is het aanraakdoel. */
.vinkregel[b-sdn1ojo21p] {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 0.75rem;
    margin: 0;
    min-height: var(--clp-touch-target);
    padding: 0.2rem 0;
}

/* Het vinkje is getekend, niet van de browser: de standaard checkbox heeft in de donkere modus een grijze rand op een donkere
   kaart (te weinig contrast). De rand is --clp-muted (6 : 1 of meer op het oppervlak, licht en donker), en een aangevinkt vakje
   is blauw met een wit (licht) of donker (donker) vinkje. */
.vinkregel-vink[b-sdn1ojo21p] {
    appearance: none;
    -webkit-appearance: none;
    background: var(--clp-surface);
    border: 2px solid var(--clp-muted);
    border-radius: 0.375rem;
    box-sizing: border-box;
    cursor: inherit;
    display: inline-grid;
    flex: none;
    height: 1.5rem;
    margin: 0;
    place-content: center;
    width: 1.5rem;
}

.vinkregel-vink[b-sdn1ojo21p]::before {
    background: var(--clp-secondary-ink);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    content: "";
    height: 0.75rem;
    transform: scale(0);
    transition: transform 0.1s ease-in-out;
    width: 0.8rem;
}

.vinkregel-vink:checked[b-sdn1ojo21p] {
    background: var(--clp-secondary);
    border-color: var(--clp-secondary);
}

.vinkregel-vink:checked[b-sdn1ojo21p]::before {
    transform: scale(1);
}

.vinkregel-vink:focus-visible[b-sdn1ojo21p] {
    outline: 3px solid var(--clp-foreground);
    outline-offset: 2px;
}

.vinkregel.is-uitgeschakeld[b-sdn1ojo21p] {
    cursor: default;
    opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
    .vinkregel-vink[b-sdn1ojo21p]::before {
        transition: none;
    }
}

/* Windows hoog contrast tekent geen achtergronden: dan is het vinkje weer dat van de browser. */
@media (forced-colors: active) {
    .vinkregel-vink[b-sdn1ojo21p] {
        appearance: auto;
        -webkit-appearance: auto;
    }

    .vinkregel-vink[b-sdn1ojo21p]::before {
        display: none;
    }
}
/* /Components/Studieplanning/Wizard.razor.rz.scp.css */
/* De wizard van de examenplanning. Op een telefoon plakt de balk met de knoppen onderaan, vlak boven het menu: de duim bereikt "Volgende"
   zonder omhoog te schuiven, en een weigering of "Ongedaan maken" staat in dezelfde balk, dus altijd in beeld. De balk is dekkend
   en loopt tot de rand van de bladzijde (de negatieve marge is de zijmarge van .content). Vanaf 768 px is er een zijbalk in plaats van
   het menu onderaan, en staat de balk gewoon onder de stap.

   De z-index ligt boven die van de zwevende knop "Feedback" (1050): die zweeft op een telefoon op dezelfde plek, rechtsonder boven het
   menu, en zou "Volgende" voor de helft afdekken. Op /examenplanning/nieuw is die knop onder 992 px verborgen (FeedbackButton); de
   z-index blijft als vangnet voor een pagina waar hij wel staat. */
.wizard-studie[b-0d8z5lv5hy] {
    margin: 0 auto;
    max-width: 46rem;
    /* Ruimte onder de balk aan het einde van de bladzijde: daar komt de zwevende knop "Feedback" weer vrij, in plaats van half onder de balk. */
    padding-bottom: 3rem;
}

.wizard-kop[b-0d8z5lv5hy] {
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
}

.wizard-kop:focus[b-0d8z5lv5hy],
.wizard-kop:focus-visible[b-0d8z5lv5hy] {
    outline: none;
}

.wizard-intro[b-0d8z5lv5hy] {
    margin-bottom: 1.25rem;
}

.wizard-balk[b-0d8z5lv5hy] {
    background: var(--clp-background);
    border-top: 1px solid var(--clp-border);
    bottom: calc(var(--clp-tabbar-height) + env(safe-area-inset-bottom));
    margin: 1.25rem -1rem 0;
    padding: 0.75rem 1rem;
    position: sticky;
    z-index: 1060;
}

.wizard-knoppen[b-0d8z5lv5hy] {
    display: flex;
    gap: 0.5rem;
}

.wizard-knoppen .btn[b-0d8z5lv5hy] {
    font-weight: 600;
    min-height: var(--clp-touch-target);
}

.wizard-door[b-0d8z5lv5hy] {
    flex: 1 1 auto;
}

.wizard-terug[b-0d8z5lv5hy] {
    flex: 0 0 auto;
    padding-inline: 1.25rem;
}

.wizard-melding[b-0d8z5lv5hy] {
    align-items: center;
    color: var(--clp-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9rem;
    gap: 0.25rem 0.5rem;
    margin-bottom: 0.5rem;
}

.wizard-link[b-0d8z5lv5hy] {
    font-weight: 600;
    min-height: var(--clp-touch-target);
    padding: 0 0.5rem;
}

@media (min-width: 768px) {
    .wizard-studie[b-0d8z5lv5hy] {
        padding-bottom: 0;
    }

    .wizard-balk[b-0d8z5lv5hy] {
        border-top: 0;
        margin: 1.5rem 0 0;
        padding: 0;
        position: static;
    }

    .wizard-door[b-0d8z5lv5hy] {
        flex: 0 0 auto;
        margin-left: auto;
        min-width: 12rem;
    }
}

/* De grijze rand en tekst van Bootstrap halen in donker maar 3,9 : 1; de gewone voorgrond haalt 11 : 1 of meer. */
.btn-outline-secondary[b-0d8z5lv5hy] {
    --bs-btn-color: var(--clp-foreground);
    --bs-btn-border-color: var(--clp-muted);
    --bs-btn-hover-color: var(--clp-foreground);
    --bs-btn-hover-bg: var(--clp-surface-muted);
    --bs-btn-hover-border-color: var(--clp-foreground);
    --bs-btn-active-color: var(--clp-foreground);
    --bs-btn-active-bg: var(--clp-surface-muted);
    --bs-btn-active-border-color: var(--clp-foreground);
    --bs-btn-disabled-color: var(--clp-muted);
}
/* /Components/Studieplanning/WizardAfsluiten.razor.rz.scp.css */
.afsluiten[b-tz6nfgl4hj] {
    margin-top: 1.75rem;
}

.keuzes[b-tz6nfgl4hj] {
    display: grid;
    gap: 0.5rem;
}

.keuze[b-tz6nfgl4hj],
.stijl[b-tz6nfgl4hj] {
    align-items: flex-start;
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    cursor: pointer;
    display: flex;
    gap: 0.75rem;
    margin: 0;
    min-height: var(--clp-touch-target);
    padding: 0.75rem;
}

.keuze.is-aan[b-tz6nfgl4hj],
.stijl.is-aan[b-tz6nfgl4hj] {
    background: var(--clp-accent-zachter);
    border-color: var(--clp-primary);
    box-shadow: 0 0 0 1px var(--clp-primary);
}

.keuze input[b-tz6nfgl4hj],
.stijl input[b-tz6nfgl4hj] {
    flex: none;
    height: 1.25rem;
    margin-top: 0.15rem;
    width: 1.25rem;
}

.keuze-titel[b-tz6nfgl4hj] {
    display: block;
    font-weight: 700;
}

.keuze-uitleg[b-tz6nfgl4hj] {
    color: var(--clp-muted);
    display: block;
    font-size: 0.9rem;
}

/* De twee stijlen horen bij "Stel voor": ze staan eronder, iets ingesprongen. */
.stijlen[b-tz6nfgl4hj] {
    display: grid;
    gap: 0.4rem;
    margin-left: 1.5rem;
}
/* /Components/Studieplanning/WizardDagen.razor.rz.scp.css */
/* Stap 3. De kalender is een raster van zeven kolommen; een week is een rij. De kleuren komen uit --dag-bg en --dag-ink, die
   Planningkleur.DagStijl per dag zet uit de tokens --dag-* van app.css (licht en donker). Op een telefoon is een dag een smal
   vierkantje met het dagnummer; vanaf 576 px staan het woord en het examen erin. */
.begin[b-zbrhay8fkx] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin-bottom: 1rem;
}

.begin-label[b-zbrhay8fkx] {
    font-weight: 600;
    margin: 0;
}

.begin-veld[b-zbrhay8fkx] {
    font-size: 1rem;
    min-height: var(--clp-touch-target);
    width: auto;
}

.zet-op[b-zbrhay8fkx] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.zet-op-label[b-zbrhay8fkx] {
    font-weight: 600;
    margin-right: 0.15rem;
}

.zet-chip[b-zbrhay8fkx] {
    min-height: var(--clp-touch-target);
}

.zet-vlak[b-zbrhay8fkx] {
    background: var(--dag-bg);
    border: 1px solid var(--clp-muted);
    border-radius: 4px;
    display: inline-block;
    flex: none;
    height: 1rem;
    width: 1rem;
}

.zet-vlak-buffer[b-zbrhay8fkx],
.dag.dag-buffer[b-zbrhay8fkx] {
    background-color: var(--clp-surface);
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0,
        transparent 3px,
        rgba(128, 138, 156, 0.45) 3px,
        rgba(128, 138, 156, 0.45) 6px);
}

.hint[b-zbrhay8fkx] {
    color: var(--clp-muted);
    font-size: 0.85rem;
    margin: 0.4rem 0 0.9rem;
}

.buffers[b-zbrhay8fkx] {
    margin-bottom: 0.9rem;
}

.buffers-rij[b-zbrhay8fkx] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.buffers-rij .uitleg[b-zbrhay8fkx] {
    margin: 0;
}

.uitleg[b-zbrhay8fkx] {
    color: var(--clp-muted);
    font-size: 0.9rem;
    margin: 0 0 0.4rem;
}

.wizard-knop[b-zbrhay8fkx] {
    min-height: var(--clp-touch-target);
}

.legenda[b-zbrhay8fkx] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
}

.legenda-examen[b-zbrhay8fkx] {
    align-items: center;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 600;
    gap: 0.3rem;
}

/* Het merkje van een examen: een bolletje met een E. */
.dag-examen-merk[b-zbrhay8fkx] {
    align-items: center;
    background: var(--clp-foreground);
    border-radius: 50%;
    color: var(--clp-background);
    display: inline-flex;
    flex: none;
    font-size: 0.65rem;
    font-weight: 700;
    height: 1.05rem;
    justify-content: center;
    line-height: 1;
    width: 1.05rem;
}

.kalender[b-zbrhay8fkx] {
    display: grid;
    gap: 3px;
}

.kop-rij[b-zbrhay8fkx],
.week[b-zbrhay8fkx] {
    display: grid;
    gap: 3px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.weekdag-kop[b-zbrhay8fkx] {
    background: none;
    border: 0;
    color: var(--clp-muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    min-height: 1.75rem;
    padding: 0.2rem 0;
    text-align: center;
}

/* Met een soort gekozen is de kop een knop: een tik zet alle dagen op die weekdag. */
.weekdag-kop.is-knop[b-zbrhay8fkx] {
    background: var(--clp-surface-muted);
    border: 1px solid var(--clp-border);
    border-radius: 8px;
    color: var(--clp-foreground);
    cursor: pointer;
    min-height: var(--clp-touch-target);
}

.weekdag-kop.is-knop:focus-visible[b-zbrhay8fkx],
.dag:focus-visible[b-zbrhay8fkx] {
    outline: 3px solid var(--clp-foreground);
    outline-offset: 1px;
}

.dag[b-zbrhay8fkx] {
    align-items: center;
    background: var(--dag-bg);
    border: 1px solid transparent;
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--dag-ink);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    gap: 0.05rem;
    justify-content: flex-start;
    min-height: 3.5rem;
    min-width: 0;
    overflow: hidden;
    padding: 0.2rem 0.1rem;
    position: relative;
}

.dag-leeg[b-zbrhay8fkx] {
    background: none;
    cursor: default;
}

.dag-nummer[b-zbrhay8fkx] {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.dag-maand[b-zbrhay8fkx] {
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    text-transform: lowercase;
}

.dag-soort[b-zbrhay8fkx],
.dag-examen[b-zbrhay8fkx] {
    display: none;
}

/* De soort als letter onder het dagnummer: op een smalle dag is dat het enige teken naast de kleur. Een bufferdag is gearceerd en
   heeft geen vlakkleur; de letter blijft staan, in de tekstkleur van de dag. */
.dag-letter[b-zbrhay8fkx] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

.dag-letter-merk[b-zbrhay8fkx] {
    align-items: center;
    border: 1px solid var(--clp-muted);
    border-radius: 4px;
    color: var(--clp-foreground);
    display: inline-flex;
    font-size: 0.7rem;
    font-weight: 700;
    height: 1.1rem;
    justify-content: center;
    line-height: 1;
    margin-right: 0.25rem;
    width: 1.1rem;
}

.legenda-soort[b-zbrhay8fkx] {
    align-items: center;
    display: inline-flex;
}

/* Onder het dagnummer: de maand bij de eerste dag van een maand en het merkje van een examen. De naam van het vak staat op een telefoon in
   het lijstje onder de kalender. */
.dag-meta[b-zbrhay8fkx] {
    align-items: center;
    display: flex;
    gap: 3px;
    justify-content: center;
}

.dag.is-examen[b-zbrhay8fkx] {
    box-shadow: inset 0 0 0 2px var(--dag-ink);
}

.dag-vrij[b-zbrhay8fkx] {
    border: 1px dashed var(--clp-muted);
}

.dag.dag-buffer[b-zbrhay8fkx] {
    border: 1px dashed var(--clp-muted);
    color: var(--clp-foreground);
}

.dag.dag-buffer.is-examen[b-zbrhay8fkx] {
    box-shadow: inset 0 0 0 2px var(--clp-foreground);
}

.dag.is-voorbij[b-zbrhay8fkx] {
    cursor: default;
    opacity: 0.45;
}

.examens[b-zbrhay8fkx] {
    margin-top: 1rem;
}

.examens-lijst[b-zbrhay8fkx] {
    display: grid;
    gap: 0.3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.examens-lijst li[b-zbrhay8fkx] {
    align-items: center;
    display: flex;
    font-size: 0.9rem;
    gap: 0.4rem;
}

.vak-vlak[b-zbrhay8fkx] {
    background: var(--vak-bg);
    border: 1px solid var(--vak-ink);
    border-radius: 50%;
    display: inline-block;
    flex: none;
    height: 0.9rem;
    width: 0.9rem;
}

@media (min-width: 576px) {
    .kalender[b-zbrhay8fkx],
    .kop-rij[b-zbrhay8fkx],
    .week[b-zbrhay8fkx] {
        gap: 4px;
    }

    .dag[b-zbrhay8fkx] {
        align-items: flex-start;
        min-height: 5.4rem;
        padding: 0.35rem 0.45rem;
        text-align: left;
    }

    .dag-letter[b-zbrhay8fkx],
    .dag-letter-merk[b-zbrhay8fkx] {
        display: none;
    }

    .dag-soort[b-zbrhay8fkx] {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1.2;
        margin-top: 0.1rem;
    }

    .dag-examen[b-zbrhay8fkx] {
        display: block;
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.2;
        margin-top: auto;
        overflow-wrap: anywhere;
    }

    .dag .dag-examen-merk[b-zbrhay8fkx] {
        display: none;
    }

    .dag-meta[b-zbrhay8fkx] {
        justify-content: flex-start;
    }

    .examens[b-zbrhay8fkx] {
        display: none;
    }
}

@media (forced-colors: active) {
    .dag[b-zbrhay8fkx] {
        border: 1px solid CanvasText;
    }
}

/* De grijze rand en tekst van Bootstrap halen in donker maar 3,9 : 1; de gewone voorgrond haalt 11 : 1 of meer. */
.btn-outline-secondary[b-zbrhay8fkx] {
    --bs-btn-color: var(--clp-foreground);
    --bs-btn-border-color: var(--clp-muted);
    --bs-btn-hover-color: var(--clp-foreground);
    --bs-btn-hover-bg: var(--clp-surface-muted);
    --bs-btn-hover-border-color: var(--clp-foreground);
    --bs-btn-active-color: var(--clp-foreground);
    --bs-btn-active-bg: var(--clp-surface-muted);
    --bs-btn-active-border-color: var(--clp-foreground);
    --bs-btn-disabled-color: var(--clp-muted);
}
/* /Components/Studieplanning/WizardExamens.razor.rz.scp.css */
/* Een kaart per vak, met de naam in de kleur van het vak. Alle velden zijn 44 px hoog; de lettergrootte is 16 px of meer, anders zoomt
   iOS in zodra een veld de focus krijgt. */
.kaart[b-rinsv0gjx2] {
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius-card);
    box-shadow: var(--clp-shadow-card);
    margin-bottom: 1rem;
    padding: 0.9rem;
}

/* Het vak waar "Volgende" om een datum vraagt. De rand is rood en dik, en de tekst "Wanneer is je examen ...?" staat in de balk. */
.kaart.is-aandacht[b-rinsv0gjx2] {
    border-color: var(--clp-wrong);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--clp-wrong) 35%, transparent);
}

.kaart-kop[b-rinsv0gjx2] {
    align-items: center;
    background: var(--vak-bg);
    border: 1px solid var(--vak-ink);
    border-color: color-mix(in srgb, var(--vak-ink) 55%, var(--vak-bg));
    border-radius: 999px;
    color: var(--vak-ink);
    display: inline-flex;
    font-size: 1.05rem;
    font-weight: 700;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 0.25rem 0.8rem;
}

.kaart-veld[b-rinsv0gjx2] {
    margin-bottom: 1rem;
}

.kaart-label[b-rinsv0gjx2] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.kaart-hint[b-rinsv0gjx2] {
    color: var(--clp-muted);
    display: block;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.datum-veld[b-rinsv0gjx2] {
    font-size: 1rem;
    max-width: 15rem;
    min-height: var(--clp-touch-target);
}

/* De zin bij een datum die de dienst weigerde: rood, vlak onder het veld, met dezelfde tekst als de balk onderaan. De kleur is de tekstkleur
   van een fout (--clp-wrong is een vlak- en randkleur en haalt als tekst op wit geen 4,5 : 1). */
.kaart-fout[b-rinsv0gjx2] {
    color: var(--clp-foreground);
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 0.3rem;
}

.kaart-fout[b-rinsv0gjx2]::before {
    background: var(--clp-wrong);
    border-radius: 2px;
    content: "";
    display: inline-block;
    height: 0.75em;
    margin-right: 0.45rem;
    vertical-align: baseline;
    width: 0.75em;
}

/* De uitleg bovenaan de stap: één keer, voor alle kaarten. */
.blokken-uitleg[b-rinsv0gjx2] {
    color: var(--clp-muted);
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

.stepper[b-rinsv0gjx2] {
    align-items: center;
    display: inline-flex;
    gap: 0.25rem;
}

.stepper-knop[b-rinsv0gjx2] {
    background: var(--clp-surface);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    color: var(--clp-foreground);
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 600;
    height: var(--clp-touch-target);
    line-height: 1;
    padding: 0;
    width: var(--clp-touch-target);
}

.stepper-knop:disabled[b-rinsv0gjx2] {
    cursor: default;
    opacity: 0.4;
}

.stepper-knop:focus-visible[b-rinsv0gjx2] {
    outline: 3px solid var(--clp-secondary);
    outline-offset: 2px;
}

.stepper-waarde[b-rinsv0gjx2] {
    font-size: 1.15rem;
    font-weight: 700;
    min-width: 2.75rem;
    text-align: center;
}

.blokken[b-rinsv0gjx2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0 0 0.6rem;
    padding: 0;
}

.blok-paneel[b-rinsv0gjx2] {
    background: var(--clp-surface-muted);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    display: grid;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    padding: 0.6rem;
}

/* Het paneel krijgt de focus als het opent (WizardExamens), en scrolt dan in beeld. De marge houdt het boven de balk met de knoppen en het menu
   onderaan: op een telefoon is dat ruim 8 rem, vanaf 768 px staat de balk gewoon onder de stap. */
.blok-paneel[b-rinsv0gjx2] {
    scroll-margin-bottom: 9rem;
}

.blok-paneel:focus[b-rinsv0gjx2] {
    outline: none;
}

.blok-paneel:focus-visible[b-rinsv0gjx2] {
    outline: 3px solid var(--clp-foreground);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .blok-paneel[b-rinsv0gjx2] {
        scroll-margin-bottom: 2rem;
    }
}

.blok-paneel .form-control[b-rinsv0gjx2] {
    font-size: 1rem;
    min-height: var(--clp-touch-target);
}

.blok-knoppen[b-rinsv0gjx2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.blok-knoppen .btn[b-rinsv0gjx2],
.splits-knoppen .btn[b-rinsv0gjx2],
.splits-knop[b-rinsv0gjx2],
.blok-toevoegen .btn[b-rinsv0gjx2] {
    font-weight: 600;
    min-height: var(--clp-touch-target);
}

.blok-toevoegen[b-rinsv0gjx2] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.blok-toevoegen .form-control[b-rinsv0gjx2] {
    flex: 1 1 auto;
    font-size: 1rem;
    min-height: var(--clp-touch-target);
    min-width: 0;
}

.blok-toevoegen .btn[b-rinsv0gjx2] {
    flex: none;
    white-space: nowrap;
}

.splits[b-rinsv0gjx2] {
    border-top: 1px solid var(--clp-border);
    display: grid;
    gap: 0.5rem;
    padding-top: 0.75rem;
}

.splits .form-control[b-rinsv0gjx2] {
    font-size: 1rem;
    min-height: var(--clp-touch-target);
}

.splits-knoppen[b-rinsv0gjx2] {
    display: flex;
    gap: 0.5rem;
}

/* De grijze rand en tekst van Bootstrap halen in donker maar 3,9 : 1; de gewone voorgrond haalt 11 : 1 of meer. */
.btn-outline-secondary[b-rinsv0gjx2] {
    --bs-btn-color: var(--clp-foreground);
    --bs-btn-border-color: var(--clp-muted);
    --bs-btn-hover-color: var(--clp-foreground);
    --bs-btn-hover-bg: var(--clp-surface-muted);
    --bs-btn-hover-border-color: var(--clp-foreground);
    --bs-btn-active-color: var(--clp-foreground);
    --bs-btn-active-bg: var(--clp-surface-muted);
    --bs-btn-active-border-color: var(--clp-foreground);
    --bs-btn-disabled-color: var(--clp-muted);
}
/* /Components/Studieplanning/WizardStappen.razor.rz.scp.css */
/* Drie bolletjes in een rij met een streep ertussen. De streep loopt van het midden van het ene bolletje naar het midden van het
   volgende, en wordt groen zodra de stap erachter bereikt is. */
.stappen[b-4k1uuc6hr5] {
    margin: 0 0 1rem;
}

.stappen-lijst[b-4k1uuc6hr5] {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.stap[b-4k1uuc6hr5] {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    text-align: center;
}

.stap + .stap[b-4k1uuc6hr5]::before {
    background: var(--clp-border);
    content: "";
    height: 3px;
    left: -50%;
    position: absolute;
    right: 50%;
    top: 1.05rem;
    z-index: 0;
}

.stap.is-huidig[b-4k1uuc6hr5]::before,
.stap.is-klaar[b-4k1uuc6hr5]::before {
    background: var(--clp-primary);
}

.stap-knop[b-4k1uuc6hr5] {
    align-items: center;
    background: none;
    border: 0;
    color: var(--clp-muted);
    display: flex;
    flex-direction: column;
    font: inherit;
    gap: 0.3rem;
    margin: 0 auto;
    min-height: var(--clp-touch-target);
    padding: 0 0.25rem;
    position: relative;
    width: 100%;
    z-index: 1;
}

button.stap-knop[b-4k1uuc6hr5] {
    cursor: pointer;
}

.stap-bolletje[b-4k1uuc6hr5] {
    align-items: center;
    background: var(--clp-surface);
    border: 2px solid var(--clp-border);
    border-radius: 50%;
    box-sizing: border-box;
    color: var(--clp-muted);
    display: inline-flex;
    flex: none;
    font-size: 0.9rem;
    font-weight: 700;
    height: 2.1rem;
    justify-content: center;
    width: 2.1rem;
}

.stap.is-huidig .stap-bolletje[b-4k1uuc6hr5] {
    background: var(--clp-primary);
    border-color: var(--clp-primary);
    color: var(--clp-primary-ink);
}

.stap.is-klaar .stap-bolletje[b-4k1uuc6hr5] {
    background: var(--clp-accent-zacht);
    border-color: var(--clp-primary);
    color: var(--clp-accent-ink);
}

.stap-naam[b-4k1uuc6hr5] {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
}

.stap.is-huidig .stap-naam[b-4k1uuc6hr5],
.stap.is-klaar .stap-naam[b-4k1uuc6hr5] {
    color: var(--clp-foreground);
}

button.stap-knop:focus-visible[b-4k1uuc6hr5] {
    outline: 3px solid var(--clp-secondary);
    outline-offset: 2px;
}
/* /Components/Studieplanning/WizardVakken.razor.rz.scp.css */
.blok[b-rqr0fyo5wk] {
    margin-bottom: 1.5rem;
}

/* 16 px of meer, anders zoomt iOS in zodra het veld de focus krijgt. */
.rooster-veld[b-rqr0fyo5wk] {
    font-size: 1rem;
    line-height: 1.5;
    min-height: 8.5rem;
}

/* Het voorbeeld in het lege veld: cursief en lichter dan de tekst van de leerling, zodat het niet voor getypte tekst doorgaat. De kleur is
   --clp-muted voor 90 % over de achtergrond van het veld; dat blijft boven 4,5 : 1 (nagemeten in de browser, licht en donker). */
.rooster-veld[b-rqr0fyo5wk]::placeholder {
    color: color-mix(in srgb, var(--clp-muted) 90%, var(--bs-body-bg, var(--clp-background)));
    font-style: italic;
    opacity: 1;
}

.herkend[b-rqr0fyo5wk] {
    background: var(--clp-surface-muted);
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius-card);
    margin-top: 0.75rem;
    padding: 0.75rem;
}

.herkend-kop[b-rqr0fyo5wk] {
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.herkend-lijst[b-rqr0fyo5wk] {
    display: grid;
    gap: 0.6rem;
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.herkend-tekst[b-rqr0fyo5wk] {
    align-items: baseline;
    display: flex;
    gap: 0.4rem;
}

.herkend-tekst > span:last-child[b-rqr0fyo5wk] {
    flex: 1 1 0;
    min-width: 0;
}

.herkend-blokken[b-rqr0fyo5wk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

/* Het bolletje in de kleur van het vak: het vak herken je zo terug op het bord. */
.vak-vlak[b-rqr0fyo5wk] {
    background: var(--vak-bg);
    border: 1px solid var(--vak-ink);
    border-radius: 50%;
    display: inline-block;
    flex: none;
    height: 0.9rem;
    transform: translateY(0.1rem);
    width: 0.9rem;
}

.wizard-knop[b-rqr0fyo5wk] {
    min-height: var(--clp-touch-target);
}

.wizard-chip[b-rqr0fyo5wk] {
    min-height: var(--clp-touch-target);
}

.vakken[b-rqr0fyo5wk] {
    display: grid;
    gap: 0.4rem;
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

/* Een vak is een vlak in zijn eigen kleur, zoals zijn blokken op het bord. Het naamvlak en het kruisje zijn elk 44 px hoog. */
.vak-rij[b-rqr0fyo5wk] {
    align-items: stretch;
    background: var(--vak-bg);
    border: 1px solid var(--vak-ink);
    border-color: color-mix(in srgb, var(--vak-ink) 55%, var(--vak-bg));
    border-radius: var(--clp-radius);
    color: var(--vak-ink);
    display: flex;
    min-height: var(--clp-touch-target);
}

.vak-naam[b-rqr0fyo5wk] {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    flex: 1 1 auto;
    font: inherit;
    font-weight: 600;
    min-height: var(--clp-touch-target);
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.vak-invoer[b-rqr0fyo5wk] {
    background: var(--clp-surface);
    border: 0;
    border-radius: calc(var(--clp-radius) - 1px);
    color: var(--clp-foreground);
    flex: 1 1 auto;
    font: inherit;
    margin: 0;
    min-height: var(--clp-touch-target);
    min-width: 0;
    padding: 0.4rem 0.6rem;
}

.vak-weg[b-rqr0fyo5wk] {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    flex: none;
    font-size: 1.6rem;
    line-height: 1;
    min-height: var(--clp-touch-target);
    min-width: var(--clp-touch-target);
}

.vak-naam:focus-visible[b-rqr0fyo5wk],
.vak-weg:focus-visible[b-rqr0fyo5wk] {
    outline: 3px solid var(--clp-foreground);
    outline-offset: -3px;
}

.nieuw-vak[b-rqr0fyo5wk] {
    display: flex;
    gap: 0.5rem;
}

.nieuw-vak .form-control[b-rqr0fyo5wk] {
    flex: 1 1 auto;
    font-size: 1rem;
    min-height: var(--clp-touch-target);
    min-width: 0;
}