/* app/Components/Meldingsbalk.razor.rz.scp.css */
/*
    De meldingsbalk onderaan het venster. Hoort bij Components/Meldingsbalk.razor.

    position: fixed IS HET HELE PUNT. De balk staat niet ín de pagina maar
    erover: hij duwt niets omlaag en laat niets omhoog springen als hij weggaat.
    Zet je hier ooit position: sticky of relative neer, dan is het probleem
    waarvoor deze component gemaakt is meteen terug - het raster begint dan weer
    op de ene stand hoger dan op de andere.

    DE RUIMTE ONDER DE PAGINA WORDT ELDERS GERESERVEERD: .dagscherm en
    .weekscherm hebben een vaste padding-bottom, altijd, ook zonder melding.
    Anders zou deze balk de onderste regels van het scherm afdekken.

    env(safe-area-inset-bottom) IS VOOR DE IPHONE. Onder aan het scherm zit daar
    de streep voor "naar beginscherm"; zonder deze regel valt de tekst daar
    deels achter.
*/
.meldingsbalk[b-mvq0zggp3w] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;

    box-sizing: border-box;
    padding: 0.55rem 0.7rem calc(0.55rem + env(safe-area-inset-bottom, 0px));

    border-top: 1px solid #C9C6BF;
    background: #E9E7E2;

    font-size: 0.85rem;
    line-height: 1.35;
    color: #16201C;

    /* Een schaduw omhoog: hiermee ligt de balk zichtbaar óver de pagina in
       plaats van eraan vast. Zonder dit lijkt hij de laatste regel van het
       scherm, en dan lees je hem als onderdeel van de tabel erboven. */
    box-shadow: 0 -2px 6px rgba(22, 32, 28, 0.12);
}

/*
    DE TEKST BLIJFT GECENTREERD OP EEN BREED SCHERM. Op een pc zou een melding
    van vijf woorden anders helemaal links tegen de rand plakken, een halve meter
    van de tabel vandaan waar hij over gaat.
*/
.meldingsinhoud[b-mvq0zggp3w] {
    max-width: 46rem;
    margin: 0 auto;

    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.4rem;
}

/*
    EEN MELDING DIE OM ACTIE VRAAGT ZIET ER ANDERS UIT. Een afgekeurde week moet
    je aanpassen en opnieuw indienen; dat mag niet dezelfde grijze balk zijn als
    "deze week is verwerkt", want dan lees je eroverheen.
*/
.meldingsbalk-nadruk[b-mvq0zggp3w] {
    border-top: 1px solid #C58F8F;
    border-left: 4px solid #8A2F2F;
    background: #FBF2F2;
    color: #5E2020;
}

/* Op een aanraakscherm iets ruimer en groter, in lijn met de rest van de app. */
@media (hover: none) and (pointer: coarse) {
    .meldingsbalk[b-mvq0zggp3w] {
        padding: 0.7rem 0.8rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
        font-size: 0.95rem;
    }
}
/* app/Components/Navigatiekop.razor.rz.scp.css */
/*
    De kopregel. Hoort bij Components/Navigatiekop.razor.

    ==================================================================
    DE HOOGTE STAAT HIER, EN NERGENS ANDERS
    ==================================================================

    De kolomkop eronder plakt bij het scrollen op de hoogte van deze regel. Dat
    werkt alleen als die hoogte en die afstand uit dezelfde bron komen - anders
    schuiven de regels bij het scrollen over elkaar heen.

    Vandaar --nr1: die zet de min-height van de regel. Wil je de regel hoger of
    lager, verander dan alleen die waarde. Zet er nooit een losse min-height
    naast.

    DEZELFDE WAARDE STAAT IN Weekraster.razor.css EN Urentabel.razor.css als
    --r1; die zet de hoogte van de gridrij waar deze regel in valt. Verander je
    hier iets, verander het daar dan ook - anders is de gridrij een andere hoogte
    dan de regel die erin staat.

    HET KWARTAAL STAAT HIER NIET MEER. Er was eerst een tweede regel met vier
    hokjes (K1 K2 K3 K4) en daarna een keuzelijst tussen het jaar en de week in;
    allebei weg. Kom je ooit een --nr2, een .navregel-kwartalen of een
    .navkwartaalkeuze tegen in een ander bestand, dan is dat een overblijfsel
    daarvan.

    DE VARIABELE STAAT OP DE REGEL ZELF en niet op een omhullend blok, want dat
    blok bestaat niet: deze component tekent één losse div zodat hij in een grid
    over de kolommen kan lopen. Zie de toelichting bovenaan het .razor-bestand.
*/

.navregel[b-5v8ecsutj4] {
    --nr1: 2.4rem;

    /*
        DE RUIMTE TUSSEN DE TWEE KEUZELIJSTEN: 39 pixels.

        VAN 50 NAAR 39, oftewel drie millimeter krapper. Die drie millimeter
        gaan naar de weeklijst ernaast, die zijn datums anders afknijpt.

        HIER STAAT HET, EN OP ÉÉN PLEK. Wil je de lijsten dichter op elkaar of
        verder uit elkaar, verander dan alleen deze waarde.

        HET GELDT ALLEEN TUSSEN DE LIJSTEN. De flexafstand (gap) blijft klein,
        want › hoort tegen zijn eigen rand aan te staan en niet op vijftig
        pixels van de weekkeuze.
    */
    --tussenruimte: 39px;

    display: flex;
    align-items: center;
    gap: 0.3rem;

    min-width: 0;
    padding: 0 0.35rem;
    box-sizing: border-box;

    position: sticky;
    z-index: 6;
}

/*
    DE KOPREGEL BLIJFT OOK ZIJWAARTS STAAN.

    De dagkolommen eronder vegen door van week naar week; de regel met het jaar
    hoort daarbij stil te liggen. Zonder dit veegt het jaartal mee het scherm uit
    en sta je naar uren te kijken zonder te weten van welk jaar ze zijn - en de
    pijl › aan het eind zou ergens twee schermbreedtes naar rechts staan.

    TWEE KEER width, EN DAT IS MET OPZET.

    De regel loopt over alle kolommen (grid-column: 1 / -1) en is dus net zo
    breed als het hele raster: drie weken, ruim twee schermen. Dan staat › niet
    aan het eind van de regel maar aan het eind van het raster, buiten beeld.

    100cqw is de breedte van de schuifbaan zelf - van wat je werkelijk ziet.
    Daarvoor staat container-type: inline-size op .urenscherm; zie
    Weekraster.razor.css en Urentabel.razor.css. Met die breedte plus left: 0
    ligt de regel precies over het zichtbare deel en staat › tegen de rechterrand
    van het scherm.

    KENT DE BROWSER cqw NIET, dan is die tweede regel ongeldig en blijft de
    eerste staan: de kop loopt dan over het hele raster en › staat te ver naar
    rechts. Lelijk, maar alles is bereikbaar. Een custom property zou hier niet
    werken - die valt bij een onbekende waarde niet terug op de regel ervoor.
*/
.navregel-jaar[b-5v8ecsutj4] {
    left: 0;
    width: 100%;
    width: 100cqw;

    top: 0;
    min-height: var(--nr1);
    background: #16201C;
    color: #FFFFFF;
}

/* ============================================================
   De twee keuzelijsten: jaar en week
   ============================================================ */

/*
    ÉÉN OPMAAK VOOR ALLEBEI. Samen zijn ze het antwoord op "waar kijk ik naar",
    en dan horen ze één blok te zijn en geen hoofd- met bijzaak.

    ==================================================================
    OP EEN IPHONE WAS DIT EEN STIPPELLIJNTJE, EN DAT IS HIER GEREPAREERD
    ==================================================================

    ER STOND border: 0 MET EEN STREEPJE ERONDER en background: none. Op een
    Mac en in Chrome tekent de browser er dan nog steeds een keuzelijst
    omheen, maar Safari op iOS doet dat niet: die laat alleen de tekst staan
    met dat ene streepje eronder. Witte tekst op een zwarte balk met een
    stippellijntje - niets wat eruitziet als iets om aan te tikken. Er stond
    ook geen pijltje, want dat tekent de browser normaal zelf.

    DRIE DINGEN DOEN SAMEN HET WERK, EN ZE ZIJN ALLE DRIE NODIG:

      appearance: none   - eerst de halve eigen opmaak van de browser
                           helemaal uitzetten. Doe je dit niet, dan krijg je
                           op de ene browser een dubbel pijltje en op de
                           andere een rand die je niet kunt bijstellen.
      rand + vlak        - het hokje dat je nu ziet. Zelf getekend, dus overal
                           hetzelfde.
      het pijltje        - als achtergrondtekening, want een <select> laat
                           geen ::after toe. Die staat hieronder als svg in de
                           regel zelf: geen extra bestand dat mee moet worden
                           gepubliceerd en dat stilletjes kan ontbreken.

    HET PIJLTJE IS WIT (%23FFFFFF). Een # mag niet los in een url() staan -
    vandaar %23. Verander je de kleur, vergeet die codering dan niet: met een
    kale # valt de hele regel weg en is er weer geen pijltje, zonder dat er
    ergens een fout verschijnt.

    RUIMTE RECHTS VOOR HET PIJLTJE. Zonder die padding loopt de tekst van de
    langste regel eronderdoor.
*/
.navkeuze[b-5v8ecsutj4] {
    -webkit-appearance: none;
    appearance: none;

    min-height: 2rem;
    padding: 0.2rem 1.45rem 0.2rem 0.5rem;

    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 6px;

    background-color: rgba(255, 255, 255, 0.14);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.6 1.8 6 6.2l4.4-4.4' fill='none' stroke='%23FFFFFF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.62rem 0.42rem;

    color: #FFFFFF;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* Aangetikt of met de tab-toets bereikt: een duidelijke ring, en niet die van
   de browser - die is op een zwarte balk vaak nauwelijks te zien. */
.navkeuze:focus-visible[b-5v8ecsutj4] {
    outline: 2px solid #FFFFFF;
    outline-offset: 1px;
}

/* De opties tekent het besturingssysteem; op een donkere achtergrond moeten ze
   weer gewoon leesbaar zijn. */
.navkeuze option[b-5v8ecsutj4] {
    color: #16201C;
    background: #FFFFFF;
}

/*
    DE RUIMTE ZIT AAN DE RECHTERKANT VAN DE EERSTE TWEE.

    Zo staat er tussen jaar en kwartaal en tussen kwartaal en week evenveel, en
    blijft de week gewoon tegen › aan de rechterkant staan. Een margin aan
    weerszijden zou de afstanden verdubbelen.
*/
.navjaarkeuze[b-5v8ecsutj4] {
    flex: 0 0 auto;
    font-size: 1.05rem;
    margin-right: var(--tussenruimte);
}

/*
    DE WEEKKEUZE.

    IETS KLEINER, want er staat meer in: het nummer én de datums van die week.
    Wat er dichtgeklapt van te zien is, verschilt per browser - sommige tonen de
    hele regel, andere knijpen hem af. Allebei is goed: het nummer staat vooraan
    en dat is wat je moet kunnen lezen.

    DEZE MAG ALS ENIGE KRIMPEN (flex: 0 1 auto). Wordt het scherm smal, dan
    knijpt hij de datums af en blijft "week 37" leesbaar.

    RUIMER DAN VOORHEEN (18rem in plaats van 13rem). Er stond rechts van het
    knopje "nu" een pijl › die altijd uit stond; die is weg, en de tussenruimte
    naar de jarenkeuze is drie millimeter krapper. Alles wat dat oplevert gaat
    hierheen: er stond "week 38 · 14-0" met de datums halverwege afgekapt, en
    die datums zijn juist de reden dat deze lijst bestaat.

    HIJ MAG NOG STEEDS KRIMPEN (flex: 0 1 auto). Op een smal toestel knijpt hij
    de datums alsnog af en blijft "week 38" leesbaar; dat is de goede volgorde
    om ruimte te verliezen.
*/
.navweekkeuze[b-5v8ecsutj4] {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 18rem;
    font-size: 0.92rem;
}

/*
    DE WEEK VAN VANDAAG IN DE KEUZELIJST.

    DIT IS DE SIER EN NIET HET MERKTEKEN. Een option wordt door het
    besturingssysteem getekend, en op Android en iOS wordt deze kleur meestal
    genegeerd. Het echte merkteken is het "• nu" in de tekst zelf - zie
    Weekkeuzes() in Navigatiekop.razor. Bouw hier dus nooit iets op dat alleen
    van deze kleur afhangt; op een telefoon is hij er waarschijnlijk niet.
*/
.navweekkeuze option.navkeuze-nu[b-5v8ecsutj4] {
    color: #1F6B3A;
    font-weight: 700;
    background: #E6F4EA;
}

/* ============================================================
   Het knopje "nu"
   ============================================================ */

/*
    ACHTER DE WEEKLIJST, EN HIJ ZIET ER ANDERS UIT DAN DE PIJL AAN HET EIND.

    De pijl is een stap (een jaar vooruit), dit is een sprong naar één vaste
    plek. Vandaar tekst in plaats van een teken: "nu" zegt waar je heen gaat,
    een pijltje zou als "nog een stap" lezen.

    KLEIN EN DICHT TEGEN DE WEEKLIJST AAN. Hij hoort bij die lijst - het is
    dezelfde week - en niet bij de jaarpijl in de hoek. Vandaar geen marge
    ertussen: de flexafstand (gap) van de regel is genoeg.

    UIT ALS JE ER AL BENT, en dan is het meteen een antwoord: staat hij grijs,
    dan kijk je naar de week van vandaag.
*/
.navnu[b-5v8ecsutj4] {
    flex: 0 0 auto;

    min-height: 1.7rem;
    padding: 0 0.45rem;

    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.14);

    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    color: #FFFFFF;
    cursor: pointer;
}

.navnu:disabled[b-5v8ecsutj4] {
    opacity: 0.35;
    cursor: default;
}

/* ============================================================
   De pijltjes: STAAN HIER NIET MEER
   ============================================================

   .navpijl en .navpijl-eind zijn weg. ‹ vóór de jarenkeuze was al verdwenen en
   › aan het eind stond altijd uit - zie de toelichting in Navigatiekop.razor.
   Kom je die twee klassen nog ergens tegen, dan is dat een overblijfsel.

   DE RUIMTE IS NAAR .navweekkeuze GEGAAN, hierboven. */

.navverborgen[b-5v8ecsutj4] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ============================================================
   Smal scherm
   ============================================================ */

/*
    ONDER DE 400 PIXELS WORDT DE TUSSENRUIMTE KLEINER.

    De regel draagt drie dingen: twee keuzelijsten en ›. Op een smalle telefoon
    is vijftig pixels ertussen meer dan er comfortabel over is, en dan wordt de
    weekkeuze geknepen - dat is de enige die mag krimpen. Vandaar hier een
    kleinere afstand; de volgorde en de opmaak blijven gelijk.

    DIT IS DE ENIGE PLEK waar de tussenruimte nog een keer staat. Verander je de
    50px hierboven, kijk dan of deze waarde nog in verhouding is.
*/
@media (max-width: 399px) {
    .navregel[b-5v8ecsutj4] {
        --tussenruimte: 7px;
    }
}

/* ============================================================
   Aanraakscherm
   ============================================================ */

/*
    Op een aanraakscherm is alles een slag groter.

    DE KEUZELIJSTEN WORDEN HIER EEN HOKJE OM TE TIKKEN. Op een telefoon is een
    regel tekst met een randje eromheen nog steeds smal; met deze hoogte en wat
    meer lucht eromheen is het een knop van ruim veertig pixels hoog, en dat is
    wat een vinger nodig heeft.

    LET OP ALS JE OOIT maximum-scale=1.0 UIT index.html HAALT: Safari op iOS
    zoomt bij het aantikken in op een keuzelijst met een tekstgrootte onder de
    16 pixels, en dan staat het hele scherm scheef. Zolang die regel in de
    viewport-meta staat, gebeurt dat niet. Haal je hem weg, zet de lettergrootte
    hieronder dan op 16px.
*/
@media (hover: none) and (pointer: coarse) {
    .navregel[b-5v8ecsutj4] {
        --nr1: 2.8rem;
    }

    .navkeuze[b-5v8ecsutj4] {
        min-height: 2.2rem;
        padding: 0.3rem 1.6rem 0.3rem 0.6rem;
        background-position: right 0.55rem center;
    }

    .navnu[b-5v8ecsutj4] {
        min-height: 2.1rem;
        padding: 0 0.6rem;
        font-size: 0.92rem;
    }
}
/* app/Components/Overzichtkeuze.razor.rz.scp.css */
/*
    De keuzeregel tussen de overzichten. Hoort bij
    Components/Overzichtkeuze.razor.

    ==================================================================
    DE HOOGTE STAAT HIER, EN NERGENS ANDERS
    ==================================================================

    De kolomkop van de urentabel plakt bij het scrollen op de SOM van de
    kopregel (--r1) en deze regel (--or1). Dat werkt alleen als die hoogtes uit
    één bron komen - groeit deze regel met zijn inhoud mee, dan klopt die som
    niet meer en schuiven de regels bij het scrollen over elkaar heen.

    DEZELFDE WAARDE STAAT IN Urentabel.razor.css als --r2; die zet de hoogte van
    de gridrij waar deze regel in valt. Verander je hier iets, verander het daar
    dan ook.
*/

.overzichtregel[b-km4oub0diw] {
    --or1: 2.1rem;

    display: flex;
    align-items: stretch;
    gap: 0.25rem;

    min-width: 0;
    padding: 0.15rem 0.35rem;
    box-sizing: border-box;

    /*
        PLAKT ONDER DE ZWARTE BALK.

        top is de hoogte van de kopregel erboven (--r1 op het raster). Die komt
        van Urentabel.razor.css; staat deze regel ooit ergens zonder dat raster,
        dan is de terugval 2.4rem - dezelfde waarde als daar.

        ZIJWAARTS BLIJFT HIJ OOK STAAN, net als de kopregel: de regel loopt over
        alle kolommen (grid-column: 1 / -1) en is dus zo breed als de hele
        tabel. 100cqw is de breedte van de schuifbaan zelf; daarvoor staat
        container-type: inline-size op .urenscherm. Zonder dat zouden de drie
        knoppen bij dertien kolommen ergens buiten beeld staan.
    */
    position: sticky;
    top: var(--r1, 2.4rem);
    left: 0;
    width: 100%;
    width: 100cqw;
    z-index: 5;

    min-height: var(--or1);
    background: #263238;
    border-bottom: 1px solid #0E1416;
}

/*
    DE DRIE KNOPPEN VULLEN SAMEN DE REGEL. Even breed, want ze zijn even
    belangrijk; een smalle knop tussen twee brede leest als een bijzaak.
*/
.overzichtknop[b-km4oub0diw] {
    flex: 1 1 0;
    min-width: 0;

    padding: 0.1rem 0.2rem;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 5px;
    background: transparent;

    color: #FFFFFF;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

/*
    HET GEKOZEN OVERZICHT: ingedrukt, en dat is te zien aan het VLAK en niet
    alleen aan een kleurtje. Op een telefoon in de zon is een lichte tint tekst
    op donker nauwelijks verschil; een omgekeerd vlak wel.

    HIJ STAAT OOK UIT (disabled). Daarom staat de opmaak hieronder ná de regel
    voor :disabled - anders zou het gekozen overzicht er grijs bij staan.
*/
.overzichtknop:disabled[b-km4oub0diw] {
    cursor: default;
}

.overzichtknop.aan[b-km4oub0diw] {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #16201C;
}

.overzichtknop:focus-visible[b-km4oub0diw] {
    outline: 2px solid #FFFFFF;
    outline-offset: 1px;
}

/* Op een aanraakscherm een slag groter, net als de kopregel erboven. LET OP:
   verander je deze hoogte, verander dan --r2 in Urentabel.razor.css mee. */
@media (hover: none) and (pointer: coarse) {
    .overzichtregel[b-km4oub0diw] {
        --or1: 2.4rem;
    }

    .overzichtknop[b-km4oub0diw] {
        font-size: 0.85rem;
    }
}

/* Op een smalle telefoon past "Loon/maand" nog net; de rest van de ruimte gaat
   naar de knoppen zelf. */
@media (max-width: 360px) {
    .overzichtknop[b-km4oub0diw] {
        font-size: 0.72rem;
        padding: 0.1rem 0.1rem;
    }
}
/* app/Components/Schermframe.razor.rz.scp.css */
/*
    Het kopblok van vier rijen. Hoort bij Components/Schermframe.razor.

    DE HOOGTE IS HET HELE PUNT. Elke rij heeft een vaste hoogte, zodat de tabel
    eronder op elk scherm op dezelfde plek begint. Zet je hier een min-height
    weg, dan is het hele idee verdwenen.

    VIER RIJEN IN PLAATS VAN DRIE, en dat kost ruimte op een telefoon. Vandaar
    dat rij 2 en 3 lager zijn dan rij 1 en 4: een kwartaal- of weeknummer is
    een kort getal en heeft geen hele regelhoogte nodig. De dagen krijgen wel de
    volle hoogte, want daar staan twee regels in (naam en dagnummer) en daar
    tik je het vaakst op.

    ALLEEN RIJ 1 IS STICKY. Vier rijen vastzetten is op een telefoon bijna de
    halve schermhoogte. Sticky werkt bovendien alleen met een eigen achtergrond:
    een doorzichtige sticky regel blijft wel staan, maar de tabel schuift er
    dwars doorheen.
*/

/*
    DE RIJEN STAAN ONDER ELKAAR, EN DAT MOET AFGEDWONGEN WORDEN.

    Het blok eromheen is in app.css een flexrij, en dan gaan vier kinderen
    keurig op één regel staan. Vandaar flex-direction: column hier - het kopblok
    bepaalt zijn eigen richting.

    width: 100% op de rijen hoort erbij: zonder dat krimpen ze tot de breedte
    van hun inhoud en staat de balk maar half over het scherm.
*/
.schermkop[b-8nivs2db18] {
    --regelhoogte: 2.6rem;
    --regelhoogte-smal: 2.1rem;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: 100%;
    min-width: 0;
    margin-bottom: 0.5rem;
}

.schermkop > .kopregel[b-8nivs2db18] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.kopregel[b-8nivs2db18] {
    display: flex;
    align-items: center;
    gap: 0.3rem;

    min-height: var(--regelhoogte);
    padding: 0.2rem 0.5rem;
}

/* Rij 1: zwart, blijft staan. */
.kopregel-jaar[b-8nivs2db18] {
    position: sticky;
    top: 0;
    z-index: 5;

    border-radius: 6px 6px 0 0;
    background: #16201C;
    color: #FFFFFF;
}

/* Het jaaroverzicht helemaal rechts; de rest links bij elkaar. */
.kopregel-jaar .kopnaar[b-8nivs2db18] {
    margin-left: auto;
}

.kopregel-jaar .jaarkeuze[b-8nivs2db18] {
    border: 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
    background: none;
    color: #FFFFFF;
    font: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0 0.2rem;
    cursor: pointer;
}

/* De opties tekent het besturingssysteem; op een donkere achtergrond moeten ze
   weer gewoon leesbaar zijn. */
.kopregel-jaar .jaarkeuze option[b-8nivs2db18] {
    color: #16201C;
    background: #FFFFFF;
}

.kopnaar[b-8nivs2db18] {
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}

/* Rij 2 en 3: lichter naarmate het fijner wordt, zodat je de rangorde ziet
   zonder uitleg. Ze scrollen zijwaarts - dertien weeknummers passen niet naast
   elkaar op een telefoon. */
.kopregel-kwartalen[b-8nivs2db18] {
    min-height: var(--regelhoogte-smal);
    background: #2A3138;
    overflow-x: auto;
}

.kopregel-weken[b-8nivs2db18] {
    min-height: var(--regelhoogte-smal);
    background: #3D4650;
    overflow-x: auto;
}

.kopregel-dagen[b-8nivs2db18] {
    background: #E9E7E2;
    border-radius: 0 0 6px 6px;
    overflow-x: auto;
}

/*
    − EN + AAN HET BEGIN VAN DE RIJ.

    Ze staan als paar bij elkaar en niet aan weerszijden van de rij: rij 3 kan
    zijwaarts scrollen, en dan zou de + wegschuiven op het moment dat je hem
    nodig hebt. Als paar links blijven ze staan waar ze staan.

    position: sticky HOUDT ZE IN BEELD terwijl de weeknummers erlangs schuiven.
*/
.stapper[b-8nivs2db18] {
    position: sticky;
    left: 0;
    z-index: 1;

    display: flex;
    flex: 0 0 auto;
    gap: 2px;

    padding-right: 0.25rem;
}

.stapknop[b-8nivs2db18] {
    width: 1.7rem;
    min-height: 1.7rem;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.12);

    font: inherit;
    font-size: 1rem;
    line-height: 1;
    color: #FFFFFF;
    cursor: pointer;
}

.stapknop:disabled[b-8nivs2db18] {
    opacity: 0.35;
    cursor: default;
}

/* De hokjes: kwartalen in rij 2, weken in rij 3, dagen in rij 4. */
.kophokje[b-8nivs2db18] {
    flex: 0 0 auto;
    min-width: 2.2rem;
    padding: 0.2rem 0.35rem;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 5px;
    background: none;

    font: inherit;
    font-size: 0.85rem;
    color: #FFFFFF;
    cursor: pointer;
}

.kophokje-kwartaal[b-8nivs2db18] {
    min-width: 2.6rem;
    font-weight: 600;
}

/*
    WAAR EEN PERIODE BEGINT, STAAT EEN SCHEIDING TUSSEN DE WEKEN.

    De salarisperiode heeft geen eigen rij meer, maar het ritme 4-4-5 is wel wat
    er uitbetaald wordt. Dit streepje laat zien waar een blok begint zonder er
    een regel voor te kosten; welke periode het is, staat in de tekst bij de
    knop.
*/
.kophokje-blokstart[b-8nivs2db18] {
    margin-left: 0.55rem;
    box-shadow: -0.3rem 0 0 -0.24rem rgba(255, 255, 255, 0.55);
}

.kopregel-dagen .kophokje[b-8nivs2db18] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;

    border-color: #B9BEC4;
    background: #FFFFFF;
    color: #16201C;
}

.dagnaampje[b-8nivs2db18] {
    font-size: 0.6rem;
    text-transform: lowercase;
    opacity: 0.75;
}

.dagcijfertje[b-8nivs2db18] {
    font-size: 0.8rem;
    font-weight: 600;
}

/* Waar je nu bent. Vol gekleurd en niet alleen een randje: tussen twaalf andere
   randjes valt een randje niet op. */
.kophokje-nu[b-8nivs2db18] {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #16201C;
    font-weight: 700;
}

.kopregel-dagen .kophokje-nu[b-8nivs2db18] {
    background: #16201C;
    border-color: #16201C;
    color: #FFFFFF;
}

.kopregel-dagen .kophokje-nu .dagnaampje[b-8nivs2db18] {
    opacity: 0.9;
}

/*
    De melding over de perioden. Staat in de rij zelf en niet ergens onderaan
    het scherm: hij gaat over de weeknummers die ernaast staan, en daar hoort
    hij dan ook te staan.
*/
.kopfout[b-8nivs2db18] {
    flex: 0 0 auto;
    max-width: 14rem;

    font-size: 0.7rem;
    line-height: 1.15;
    color: #FFD9A0;
}

.verborgen-label[b-8nivs2db18] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/*
    Op een aanraakscherm gelden de 44 punten van Apple. Alleen voor de dagen en
    de − en +: dat zijn de knoppen waar je met een vinger op mikt. De kwartaal-
    en weeknummers blijven kleiner, anders past een kwartaal van dertien weken
    helemaal niet meer.
*/
@media (hover: none) and (pointer: coarse) {
    .schermkop[b-8nivs2db18] {
        --regelhoogte: 3rem;
    }

    .kopregel-dagen .kophokje[b-8nivs2db18] {
        min-width: 44px;
        min-height: 44px;
    }

    .stapknop[b-8nivs2db18] {
        width: 2.1rem;
        min-height: 2.1rem;
    }

    .kopregel-jaar .jaarkeuze[b-8nivs2db18] {
        font-size: 1.15rem;
    }
}
/* app/Components/Tijdrol.razor.rz.scp.css */
/*
    Alleen de foutmelding van de rol staat hier. De rest van de opmaak
    (.tijdrol, .rollabel, .rolregel, .rolkeuze, .rolknop) blijft waar hij
    stond - in app.css - zodat dit bestand niets overneemt wat het niet hoeft
    te weten en de rol op elk scherm hetzelfde blijft.

    WAAROM EEN SCOPED BESTAND: Blazor hangt aan elke selector hierin het
    merkteken van de component. Deze regel raakt dus alleen de melding ín een
    tijdrol en niets anders.

    ALS DE MELDING ONOPGEMAAKT VERSCHIJNT (zwarte tekst op volle breedte), dan
    leest index.html het gebundelde stijlbestand niet in. Zoek daar naar

        <link rel="stylesheet" href="ZwChaniqUren.styles.css" />

    Staat die regel er niet, dan wordt dit bestand nooit opgehaald. De melding
    is dan nog steeds leesbaar - dat is met opzet: een fout die je niet ziet is
    erger dan een fout zonder opmaak.
*/

.rolfout[b-urgbwm5pao] {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.3;
    color: #8A2F2F;
}
/* app/Components/Urentabel.razor.rz.scp.css */
/*
    Het urenoverzicht als één grid. Hoort bij Components/Urentabel.razor.

    DEZELFDE OPZET ALS HET INGAVESCHERM (Weekraster.razor.css), en dat is het
    hele punt van de verbouwing: één soort kop, één soort raster, op elk scherm.

    DE KOLOMMEN:
        1        de rijnamen (urensoort, norm, totaal, blok)
        2 t/m n  de weken, plus de blokkolommen van periode, kwartaal en jaar

    DE RIJEN:
        1        de kopregel - komt van Navigatiekop, loopt over alle kolommen
        2        de kolomkop met de weeknummers
        daarna   de urensoorten, de norm, het totaal en de drie blokregels

    HET WAREN DRIE KOPREGELS EN HET IS ER NU EEN. Navigatiekop had een aparte
    regel met weeknummers en daarna nog een met de kwartalen; die zijn alle twee
    keuzelijsten geworden op de regel met het jaartal. Het aantal staat in de
    component zelf, als Koprijen.

    DE BOVENSTE RIJ HEEFT EEN VASTE HOOGTE (--r1). Dat is geen opmaakkeuze maar
    een voorwaarde: de kolomkop plakt op die hoogte, en een regel die met zijn
    inhoud meegroeit laat die afstand niet meer kloppen - waarna de regels bij
    het scrollen over elkaar heen schuiven.

    DEZELFDE WAARDE STAAT IN Navigatiekop.razor.css als --nr1.
    Verander je de ene, verander dan ook de andere.
*/

.urenscherm[b-c8vset74iv] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;

    /*
        DE MAAT VAN HET VENSTER, VOOR DE KOPREGELS.

        De kopregels lopen over alle kolommen en zijn dus zo breed als de hele
        tabel - bij 52 weken een paar schermen. Ze moeten zijwaarts blijven staan
        op de breedte van wat je ziet, en die lezen ze af met 100cqw; zie
        Components/Navigatiekop.razor.css. Zonder deze regel is er geen container
        om tegen te meten en staat de pijl › ergens ver buiten beeld.
    */
    container-type: inline-size;

    /*
        ==================================================================
        HET RASTER SCHUIFT NU OOK IN DE HOOGTE, EN DAT IS DE HELE REPARATIE
        ==================================================================

        HIER STOND overflow-y: hidden, EN DAARDOOR DEED DE KOPREGEL NIETS.

        position: sticky plakt altijd binnen de dichtstbijzijnde SCHUIFBAAN, en
        overflow-y: hidden maakt van dit blok er een - eentje die in de hoogte
        nooit beweegt. De kopregel met de keuzelijsten (top: 0) en de kolomkop
        (top: var(--koptop)) plakten dus keurig vast aan een blok dat zelf met de
        pagina mee omhoog schoof. Op het scherm zie je dan precies wat er niet
        hoort te gebeuren: de zwarte balk met jaar en week verdwijnt bovenlangs.

        ZIJWAARTS WERKTE HET WEL, en dat is meteen het bewijs: overflow-x stond
        al op auto, dus in de breedte ÍS er een schuifbaan - en daar bleef de
        naamkolom (left: 0) wél staan.

        NU SCHUIFT DE HOOGTE HIER en niet meer op de pagina. Pas met een grens
        aan de hoogte is dit blok een schuifbaan in allebei de richtingen, en pas
        dan doen top: 0 en top: var(--koptop) wat er staat.

        HAAL DE max-height NIET WEG "omdat hij niets lijkt te doen". Zonder die
        grens is het blok altijd zo hoog als zijn inhoud, valt er in de hoogte
        niets te schuiven, en is de kopregel meteen weer weg - zonder dat er
        ergens een fout verschijnt.

        WAAROM max-height EN GEEN height: past het hele raster in de hoogte
        (weinig urensoorten, vier weken), dan is het blok gewoon zo hoog als zijn
        inhoud. Met een vaste height zou er een half leeg vak onder de laatste
        rij hangen.

        70dvh EN NIET 70vh: op een telefoon telt vh de adresbalk mee die er niet
        altijd is, en dan valt de onderste rij erachter. De regel met vh staat
        eronder als terugval voor een browser die dvh niet kent; die geeft een
        iets te hoog blok en verder niets. In deze volgorde, want de laatste
        regel die de browser begrijpt wint.
    */
    overflow-x: auto;
    overflow-y: auto;

    /*
        ==================================================================
        DE BAAN VULT DE HOOGTE DIE HET SCHERM OVERLAAT
        ==================================================================

        Staat deze baan in een scherm dat de volle hoogte vult (.vastblad in
        css/app.css), dan is hij een flexkind en bepalen deze twee regels zijn
        hoogte: hij mag krimpen tot wat er over is, en min-height: 0 is de regel
        die dat mogelijk maakt - zonder die regel weigert een flexkind kleiner
        te worden dan zijn inhoud en duwt het de rest van het scherm eruit.

        HIJ GROEIT NIET MEE (flex-grow 0). Past de tabel ruim, dan blijft de baan
        zo hoog als de tabel en staat de voet er meteen onder, in plaats van dat
        er een halfleeg wit vak tussen hangt.

        DE max-height HIERONDER BLIJFT STAAN. Die is de terugval voor een scherm
        dat NIET de volle hoogte vult, en voor een browser die :has() niet kent -
        dan scrollt de pagina zoals voorheen en houdt de baan zijn eigen grens.
    */
    flex: 0 1 auto;
    min-height: 0;

    max-height: 70vh;
    max-height: 70dvh;

    /*
        ZIJWAARTS VEGEN MAG DE PAGINA NIET TERUGSTUREN. Op iOS en in Chrome is
        een veeg vanaf de rand "ga terug"; op een raster van 52 weken veeg je de
        hele dag zijwaarts. contain houdt die veeg binnen dit blok.

        ALLEEN IN DE BREEDTE. In de hoogte moet het juist wél doorgeven aan de
        pagina: ben je onderaan het raster, dan hoort een volgende veeg het
        kwartaaltotaal en de toelichting eronder in beeld te brengen.
    */
    overscroll-behavior-x: contain;

    /*
        HET RASTER IS MET DE MUIS TE VERSLEPEN. Het werk zit in het blok
        zwchaniqPan in wwwroot/index.html; hier staat alleen wat je ervan ziet.

        ALLEEN WAAR ER EEN MUIS IS. Op een aanraakscherm veeg je gewoon en hoort
        er geen handje te verschijnen.

        DE CELLEN HOUDEN HUN EIGEN AANWIJZER. Een kolomkop van een aantikbare
        kolom is een knop met cursor: pointer, en die regel staat verderop in
        dit bestand - een latere regel met dezelfde zwaarte wint, dus daar zie je
        gewoon dat je kunt tikken.
    */

    /*
        -webkit-overflow-scrolling: touch STOND HIER EN IS WEG.

        DIT IS DE REDEN DAT DE NAAMKOLOM VERDWEEN. Niet meteen en niet altijd:
        precies tijdens het doorrollen na een veeg. Die regel stamt uit de tijd
        dat iOS zonder hem niet doorrolde; sinds iOS 13 doet hij dat vanzelf, en
        er is een bijwerking bij gekomen - Safari raakt tijdens dat doorrollen
        elementen met position: sticky kwijt. De kolom met de urensoorten staat
        op sticky (zie .naam verderop), dus die verdween halverwege en stond er
        bij het stilvallen weer.

        Dat is de lastigste soort fout: hij is er alleen terwijl je beweegt. Op
        een stilstaand scherm valt er niets te zien en lijkt de opmaak te
        kloppen.

        ZET HEM NIET TERUG. Het doorrollen blijft gewoon werken.
    */
}

@media (hover: hover) and (pointer: fine) {
    .urenscherm[b-c8vset74iv] {
        cursor: grab;
    }
}

/*
    TIJDENS HET SLEPEN. De klasse raster-sleept wordt door zwchaniqPan aan- en
    uitgezet.

    DE AANWIJZER GELDT OOK VOOR ALLES ERBINNEN: zonder die tweede selector zie je
    boven een aantikbare kolomkop een tikhandje terwijl je aan het slepen bent.

    GEEN TEKSTSELECTIE. Zonder dit sleep je alle namen en getallen die je
    passeert blauw mee, en dan staat het halve overzicht opgelicht zodra je
    loslaat.
*/
.urenscherm.raster-sleept[b-c8vset74iv],
.urenscherm.raster-sleept *[b-c8vset74iv] {
    cursor: grabbing;
}

.urenscherm.raster-sleept[b-c8vset74iv] {
    user-select: none;
    -webkit-user-select: none;
}

.raster[b-c8vset74iv] {
    display: grid;

    /* Gelijk aan --nr1 in Navigatiekop.razor.css. Er was een --r2 voor de
       kwartaalregel; die regel is een keuzelijst geworden en staat niet meer
       apart. --r2 is nu de hoogte van de keuzeregel tussen de overzichten -
       gelijk aan --or1 in Overzichtkeuze.razor.css. */
    --r1: 2.4rem;
    --r2: 2.1rem;

    --naambreedte: 6.4rem;
    --kolombreedte: 2.9rem;

    /* DE ONDERGRENS VAN EEN TOTAALKOLOM (K1..K4, Jaar, Periode). Ruimer dan een
       weekkolom, want hier staat het grootste getal van de tabel: een
       jaartotaal van vier cijfers met een komma erin. Stond dat in een kolom van
       --kolombreedte, dan werd het afgebroken of liep het over de rand. */
    --totaalbreedte: 3.9rem;

    --lijn: #D5D2CB;
    --buitenlijn: #8B9199;
    --totaal-achtergrond: #A9E4F2;

    /*
        ==================================================================
        HET RASTER MOET ZO BREED ZIJN ALS ZIJN KOLOMMEN, EN DAT WAS HET NIET
        ==================================================================

        DIT IS DE REDEN DAT DE KOPREGEL EN DE NAAMKOLOM WEGSCHOVEN.

        Hier stond grid-template-columns met minmax(--kolombreedte, 1fr), gezet
        vanuit de component, en verder geen breedte. Een grid zonder breedte is
        zo breed als zijn houder - een schermbreedte dus - terwijl de kolommen
        er met z'n vijftigen dwars overheen steken. Het VAK van het raster bleef
        daarmee een scherm breed; alleen de INHOUD was breder.

        En daar gaat position: sticky op stuk. Een plakkend element mag nooit
        buiten zijn eigen omhulsel komen. Is dat omhulsel een scherm breed, dan
        kan de naamkolom precies één scherm meeschuiven en daarna niet verder -
        veeg je naar week 32, dan is hij al lang van zijn rand gevallen.
        Hetzelfde geldt voor de zwarte kopregel: die loopt over alle kolommen en
        plakt met left: 0 aan dezelfde te smalle rand.

        ZIJWAARTS SCHUIVEN LEEK TE WERKEN omdat de inhoud wél overloopt en de
        baan er dus omheen schuift. Het gedrag is daardoor makkelijk verkeerd te
        lezen: het raster schuift, dus de fout lijkt in het plakken te zitten,
        terwijl hij in de breedte van het raster zit.

        width: max-content MAAKT HET VAK ZO BREED ALS ALLE KOLOMMEN SAMEN.
        Daarmee loopt het omhulsel over de hele schuifafstand en kunnen de
        kopregel en de naamkolom de baan volgen tot aan de laatste week.

        min-width: 100% IS VOOR HET OMGEKEERDE GEVAL: vier kolommen op een breed
        scherm. Zonder die regel zou het raster dan een strookje links zijn met
        een halfleeg scherm ernaast.

        HAAL DEZE TWEE REGELS NIET WEG. Het is precies dezelfde opzet als in
        Weekraster.razor.css, waar dit al goed ging; dit bestand liep achter.
    */
    width: max-content;
    min-width: 100%;

    /*
        ==================================================================
        DE BREEDTE VAN EEN KOLOM - EN WAAROM HIER GEEN 1fr MEER STAAT
        ==================================================================

        In een grid met width: max-content komt een fr-aandeel niet uit de
        schermbreedte maar uit de inhoud. De breedste cel bepaalt dan hoe breed
        ALLE kolommen worden, en bij 52 weken is dat een raster van een paar
        meter. 1fr en max-content gaan dus niet samen - dezelfde waarschuwing
        staat in Weekraster.razor.css.

        WAT ER VOOR IN DE PLAATS KOMT doet hetzelfde als 1fr deed, maar dan
        uitgerekend: de zichtbare breedte (100cqw) min de naamkolom, gedeeld door
        het aantal kolommen. Zijn het er weinig - een periode van vier weken -
        dan vullen ze samen precies het scherm, net als eerst. Zijn het er veel,
        dan wint --kolombreedte als ondergrens en schuift het geheel zijwaarts.

        100cqw IS DE BREEDTE VAN DE SCHUIFBAAN en niet van het raster; daarvoor
        staat container-type: inline-size op .urenscherm hierboven. Zonder die
        regel is er geen container om tegen te meten en valt deze hele calc()
        weg.

        DIE 2px ZIJN DE RANDEN van .raster (border: 1px links en rechts). Die
        vallen binnen de baan en gaan dus van de ruimte af; zonder die aftrek
        steekt de laatste kolom er twee pixels buiten en staat er een schuifbalk
        voor niets.

        DE TOTAALKOLOMMEN GAAN ER OOK VANAF, en dat is nieuw. Die zijn breder dan
        een gewone kolom (--totaalbreedte); zouden ze meedelen in de verdeling,
        dan telt het raster bij dertien weken plus één kwartaalkolom net iets
        breder op dan het scherm en verschijnt er een schuifbalk voor een halve
        centimeter. Vandaar: eerst de totaalkolommen eraf, de rest verdelen over
        de gewone kolommen.

        --gewoonaantal EN --totaalaantal KOMEN VAN DE COMPONENT, net als de
        sporen hieronder. Is --gewoonaantal 0, dan is de deling ongeldig en valt
        grid-template-columns stil weg; de component zet daarom nooit 0 neer en
        schrijft in dat geval een melding naar de console. Zie Rasterstijl in
        Urentabel.razor.
    */
    --kolom: max(
        var(--kolombreedte),
        calc((100cqw - var(--naambreedte) - 2px - (var(--totaalaantal) * var(--totaalbreedte)))
             / var(--gewoonaantal)));

    /* Een totaalkolom is nooit smaller dan een gewone: op een breed scherm met
       weinig kolommen zouden de weken anders breder worden dan het totaal
       ernaast, en dan valt de blauwe kolom juist weg in plaats van op. */
    --totaalkolom: max(var(--totaalbreedte), var(--kolom));

    /*
        DE SPOREN KOMEN VAN DE COMPONENT: die weet welke kolom een totaalkolom
        is. Hier stond repeat(var(--kolomaantal), var(--kolom)), en daarmee
        werden álle kolommen even breed - ook de blauwe totaalkolommen waar het
        grootste getal in staat.

        DE TERUGVAL DOET WAT HIER VROEGER STOND. Komt --kolomsporen om wat voor
        reden ook niet aan (een oude versie van de component uit de cache), dan
        staat er een raster met gelijke kolommen in plaats van helemaal geen
        raster.
    */
    grid-template-columns: var(--kolomsporen,
        var(--naambreedte) repeat(var(--kolomaantal), var(--kolom)));

    /* grid-template-rows, --koptop en --kolomaantal komen van de component
       zelf: die weet hoeveel kolommen en rijen er zijn. De BREEDTES staan hier
       en niet daar, zodat de mediaqueries onderaan ze nog kunnen aanpassen - een
       stijl op het element wint anders van elke mediaquery. */

    border: 1px solid var(--buitenlijn);
    border-radius: 6px 6px 0 0;
    background: #FFFFFF;
}

/* Smallere naamkolom, voor een scherm met veel kolommen naast elkaar.

   VAN 4.6rem NAAR 5.1rem: "Weektotaal" paste er net niet in en liep over de
   rand van de eerste kolom. Een halve rem is 8 css-pixels, ongeveer 2 mm op
   het scherm. Geldt voor loon/maand, kwartaal en jaar - alle drie zetten
   SmalleNamen aan.

   Past het er op een ander toestel nog steeds niet in, dan is dit het enige
   getal: de dagkolommen rekenen zich vanzelf uit met wat er overblijft. */
.raster.smalle-namen[b-c8vset74iv] {
    --naambreedte: 5.1rem;
}

/* ============================================================
   De kolomkop
   ============================================================ */

.kop[b-c8vset74iv] {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 0.2rem 0.15rem;
    box-sizing: border-box;

    /* Blijft staan onder de kopregel. --koptop is de hoogte daarvan;
       zonder kopregels is het nul en plakt de kop bovenaan. */
    position: sticky;
    top: var(--koptop);
    z-index: 3;

    border-bottom: 2px solid var(--buitenlijn);
    border-left: 1px solid var(--lijn);
    background: #E9E7E2;

    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.1;
    color: #16201C;
}

/* De linkerbovenhoek: staat vast in allebei de richtingen, en moet dus over de
   kolomkop én over de naamkolom heen liggen. */
.kop-naam[b-c8vset74iv] {
    left: 0;
    z-index: 5;
    border-left: 0;
    border-right: 2px solid var(--buitenlijn);
    align-items: flex-start;
    padding-left: 0.35rem;
}

.kopnummer[b-c8vset74iv] {
    display: block;
}

/* De kolom is aantikbaar - de hele kolom, niet alleen de kop. Geen knopvorm:
   52 randjes naast elkaar is geen overzicht meer. */
.kop.aantikbaar[b-c8vset74iv] {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(22, 32, 28, 0.12);
}

.kop.aantikbaar .kopnummer[b-c8vset74iv]::after {
    content: " ›";
    opacity: 0.55;
}

/* ============================================================
   De stand van de week, in de kolomkop
   ============================================================ */

/*
    OP TELEFOON - INGEDIEND - VERWERKT, als streep onder het weeknummer.

    DEZELFDE AFSPRAAK ALS IN Navigatiekop: daar staat de streep onder de
    weeknummers in regel 3, hier onder de weeknummers in de kolomkop. Dat is
    precies dezelfde mededeling op de plek waar op dit scherm de weken staan.

    WAAROM EEN STREEP EN GEEN ICOONTJE: vijftig icoontjes van vijf millimeter
    naast elkaar zijn niet uit elkaar te houden, en een icoontje ín de kop maakt
    de kop hoger - waarmee alles eronder verschuift.
*/
.standstreep[b-c8vset74iv] {
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 2px;
    height: 3px;
    border-radius: 2px;
}

.stand-op-telefoon[b-c8vset74iv] {
    background: #A06A00;
}

.stand-ingediend[b-c8vset74iv] {
    background: #1F5C9E;
}

.stand-verwerkt[b-c8vset74iv] {
    background: #1F7A3D;
}

/* Afgekeurd krijgt een eigen merkteken: de week staat weer bij jou, maar dat is
   niet hetzelfde als een week die nog nooit is ingediend. */
.stand-afgekeurd[b-c8vset74iv] {
    height: 4px;
    background: #8A2F2F;
}

/* ============================================================
   De naamkolom
   ============================================================ */

/*
    DE RIJNAMEN BLIJVEN STAAN bij het zijwaarts schuiven. Zonder dat weet je na
    drie kolommen niet meer welke rij je leest.
*/
.naam[b-c8vset74iv] {
    position: sticky;
    left: 0;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 0.2rem 0.35rem;
    box-sizing: border-box;

    border-right: 2px solid var(--buitenlijn);
    border-bottom: 1px solid var(--lijn);
    background: #FAF9F7;

    font-size: 0.78rem;
    line-height: 1.15;
    color: #16201C;
}

/* De stip voor de urensoort, in de kleur die beheer aan die soort gaf -
   dezelfde stip als in de soortentotalen op de andere schermen. */
.naam .stip[b-c8vset74iv] {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-right: 0.3rem;
    border-radius: 50%;
    background: var(--kleur, #888888);
    vertical-align: baseline;
}

/* Waarom een soort niet in het weektotaal terugkomt, staat bij de soort zelf en
   niet in een voetnoot: een voetnoot lees je niet terwijl je naar een getal
   kijkt dat niet klopt met je hoofdrekenen. */
.naam .telt-niet[b-c8vset74iv] {
    font-size: 0.68rem;
    font-weight: 400;
    opacity: 0.7;
}

.naam-norm[b-c8vset74iv] {
    opacity: 0.8;
}

.naam-totaal[b-c8vset74iv] {
    font-weight: 700;
    border-top: 2px solid var(--buitenlijn);
}

.naam-blok[b-c8vset74iv] {
    font-size: 0.74rem;
}

/* ============================================================
   De cellen
   ============================================================ */

.cel[b-c8vset74iv] {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0.2rem 0.15rem;
    box-sizing: border-box;

    border-left: 1px solid var(--lijn);
    border-bottom: 1px solid var(--lijn);

    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: #16201C;
}

.celnorm[b-c8vset74iv] {
    opacity: 0.75;
}

.celtotaal[b-c8vset74iv] {
    font-weight: 700;
    border-top: 2px solid var(--buitenlijn);
}

.celblok[b-c8vset74iv] {
    font-size: 0.74rem;
}

/* De week van vandaag. Een kleurtje, geen dikke rand: een rand van één cel
   breed verspringt de hele kolom een halve pixel. */
.kolom-nu[b-c8vset74iv] {
    background: #FFF7DA;
}

/* De blokkolommen: periode, kwartaal en jaar - de blauwe kolommen uit de
   Excelsheet. */
.kop-totaal[b-c8vset74iv],
.celtotaalkolom[b-c8vset74iv] {
    background: var(--totaal-achtergrond);
    font-weight: 600;
}

/* Een cel van een kolom die ergens heen gaat. GEEN KNOPOPMAAK: 52 cellen met
   een randje eromheen is geen overzicht meer. De aanwijzer en de lichte
   oplichting bij het aanraken zijn genoeg. */
.cel.aantikbaar[b-c8vset74iv] {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(22, 32, 28, 0.12);
}

/* ============================================================
   De tinten per zone
   ============================================================ */

/*
    DRIE TINTEN OVER DE KOLOMMEN: verwerkt, ingediend, op telefoon. Staan alleen
    aan als het vinkje onder het raster aanstaat.

    LET OP DE VOLGORDE IN DIT BESTAND. De blokkolommen hierboven zouden verliezen
    van deze zonetinten; daarom staan ze verderop nog een keer, ná de zones. Haal
    die herhaling niet weg omdat hij dubbel lijkt - dan kleuren de kwartaal- en
    jaarkolommen mee met de zone en zijn ze niet meer terug te vinden.
*/

.zone-verwerkt[b-c8vset74iv] {
    background: #CFE8D4;
}

.zone-ingediend[b-c8vset74iv] {
    background: #CFDFF5;
}

.zone-op-telefoon[b-c8vset74iv] {
    background: #FBE6BC;
}

/* De blokkolommen houden hun eigen kleur, ook binnen een zone. Zie de opmerking
   hierboven: deze regel staat hier om te winnen van de drie erboven, niet omdat
   hij per ongeluk twee keer is opgeschreven. */
.kop-totaal[b-c8vset74iv],
.celtotaalkolom[b-c8vset74iv] {
    background: var(--totaal-achtergrond);
}

/* DE STREEP. Rechts van de laatste kolom van een zone, over de volle hoogte van
   het raster omdat elke cel in die kolom hem krijgt. Dik en donker: dit is de
   grens waar het scherm om draait. */
.grens[b-c8vset74iv] {
    border-right: 4px solid #263238;
}

/* Een afgekeurde week ligt weer bij de medewerker, maar is wél bij beheer
   geweest - hij valt dus in de verwerkte zone. Het merkteken staat daarom op de
   kolomkop en niet op de cijfers: het gaat over de week, niet over de uren. */
.kop-week.afgekeurd[b-c8vset74iv] {
    background: #F7DEDB;
    outline: 2px solid #8A2F2F;
    outline-offset: -2px;
}

/*
    ==================================================================
    HET SALDOVAKJE - STAAT NA DE ZONES, EN DAT IS MET OPZET
    ==================================================================

    Stonden deze regels vóór de zonetinten, dan won de laatste: het saldovakje
    raakte zijn groene of rode vulling kwijt maar hield zijn witte tekst - wit op
    lichtgroen, en daar is niets van te lezen.

    Zet je hier later nog regels achter die de achtergrond van cellen zetten,
    kijk dan eerst hiernaar. Dit is precies het soort fout dat eruitziet als een
    verkeerd gekozen kleur.
*/
.celsaldo.tekort[b-c8vset74iv] {
    color: #FFFFFF;
    background: #A32B21;
    font-weight: 700;
}

.celsaldo.over[b-c8vset74iv] {
    color: #FFFFFF;
    background: #0E7A3D;
    font-weight: 700;
}

/* ============================================================
   Onder het raster
   ============================================================ */

/*
    EEN FOUT IN DE OPZET VALT OP. Niet een lichte regel onderaan die je over het
    hoofd ziet, want dan blijft er een overzicht staan dat niet klopt zonder dat
    iemand het merkt.
*/
.rasterfout[b-c8vset74iv] {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.7rem;

    border: 1px solid #C58F8F;
    border-left: 4px solid #8A2F2F;
    border-radius: 6px;
    background: #FBF2F2;

    font-size: 0.8rem;
    line-height: 1.35;
    color: #5E2020;
}

/*
    Het vinkje voor de tinten, met de legenda ernaast. Op één regel als het past;
    op een telefoon breekt de legenda naar de volgende regel - zonder flex-wrap
    zou die de rij oprekken en het raster zijwaarts wegduwen.
*/
.kleurenkeuze[b-c8vset74iv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    margin: 0.5rem 0;
}

/* Het hele blokje is aantikbaar en niet alleen het hokje zelf: een vakje van een
   paar millimeter is met een duim geen doel. */
.kleurenvinkje[b-c8vset74iv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;

    min-height: 34px;
    padding: 0.15rem 0.1rem;

    font-size: 0.8rem;
    font-weight: 600;
    color: #3D4650;
    cursor: pointer;
}

.kleurenvinkje input[b-c8vset74iv] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    cursor: pointer;
}

.zonelegenda[b-c8vset74iv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
}

.zonehokje[b-c8vset74iv] {
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--lijn, #D5D2CB);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3D4650;
}

.zonehokje.zone-verwerkt[b-c8vset74iv] {
    background: #CFE8D4;
    border-left: 6px solid #1F7A3D;
}

.zonehokje.zone-ingediend[b-c8vset74iv] {
    background: #CFDFF5;
    border-left: 6px solid #1F5C9E;
}

.zonehokje.zone-op-telefoon[b-c8vset74iv] {
    background: #FBE6BC;
    border-left: 6px solid #A06A00;
}

.zonehokje.afgekeurd[b-c8vset74iv] {
    background: #F7DEDB;
    outline: 2px solid #8A2F2F;
    outline-offset: -2px;
}

.verborgen-label[b-c8vset74iv] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/*
    Op een aanraakscherm is alles een slag groter. De kopregels volgen dezelfde
    maten als in Navigatiekop - die twee moeten gelijk blijven, anders klopt de
    plakhoogte van de kolomkop niet meer.
*/
@media (hover: none) and (pointer: coarse) {
    .raster[b-c8vset74iv] {
        --r1: 2.8rem;
        --r2: 2.4rem;
    }

    .kop[b-c8vset74iv] {
        font-size: 0.78rem;
    }

    .cel[b-c8vset74iv] {
        font-size: 0.84rem;
    }

    .kleurenvinkje[b-c8vset74iv] {
        min-height: 44px;
        font-size: 0.88rem;
    }

    .kleurenvinkje input[b-c8vset74iv] {
        width: 1.3rem;
        height: 1.3rem;
    }
}

/* Op een smalle telefoon (iPhone SE staat op 320 css-pixels) levert de naamkolom
   in: anders blijft er van het raster zelf niets over. */
@media (max-width: 360px) {
    .raster[b-c8vset74iv] {
        --naambreedte: 5.25rem;
        --kolombreedte: 2.6rem;
        --totaalbreedte: 3.5rem;
    }
}
/* app/Components/Weekraster.razor.rz.scp.css */
/*
    Het urenscherm als één grid. Hoort bij Components/Weekraster.razor.

    NEGEN KOLOMMEN:

        1      de urensoorten (loopt over alle uurrijen heen)
        2      het uur
        3-9    de zeven dagen van de week, maandag tot en met zondag

    ==================================================================
    ZEVEN DAGKOLOMMEN - DE OMBOUW
    ==================================================================

    HIER STONDEN EENENTWINTIG DAGKOLOMMEN (vorige, deze en volgende week) in een
    baan die drie weken breed was en door raster.js zijwaarts op de goede week
    gezet werd. Dat is eruit. Het raster is precies één week breed; wat erbij
    hoorde is uit dit bestand verwijderd: .kop-dag-ander en .cel-ander (de
    gedempte dagen van een andere week), .kop-dag-maandag (de weekscheiding) en
    .weekstaart (de opvulling achter zondag).

    EEN RIJ IS EEN HALF UUR.

    Rij 1 komt van Components/Navigatiekop.razor en loopt over alle kolommen
    heen (grid-column: 1 / -1). Rij 2 is de kolomkop, met de dagen erin.

    DE TWEE BOVENSTE RIJEN HEBBEN EEN VASTE HOOGTE (--r1 en --r2). Dat is geen
    opmaakkeuze maar een voorwaarde: elke rij plakt op de som van de hoogtes
    erboven, en een rij die met zijn inhoud meegroeit laat die som niet meer
    kloppen.

    ==================================================================
    DE DAGKOLOM REKENT ZICHZELF UIT
    ==================================================================

    Zeven dagkolommen vullen samen precies wat er naast de twee vaste kolommen
    overblijft - zie --dagkolom op .raster. 100cqw is de breedte van de
    schuifbaan; daarvoor staat container-type: inline-size op .urenscherm.

    --dagbreedte IS DE ONDERGRENS. Op een scherm dat zó smal is dat zeven
    kolommen van die maat er niet naast elkaar passen, wint de ondergrens en kun
    je het raster een stukje zijwaarts schuiven - binnen dezelfde week.

    WIL JE DE DAGEN BREDER: verlaag --soortbreedte hieronder. Die kolom en de
    uurkolom zijn het enige wat er van de schermbreedte af gaat.
*/

/*
    ==================================================================
    DE SCHUIFBAAN: IN ALLEBEI DE RICHTINGEN, ZO HOOG ALS HET VENSTER
    ==================================================================

    HIER WORDT GESCHOVEN EN NERGENS ANDERS. Alles wat vastplakt - de drie
    kopregels, de kolomkop, de twee linkerkolommen, de vier onderste rijen - plakt
    aan DIT element. Zet er een tweede schuifbaan omheen of binnenin, dan plakken
    ze aan de verkeerde en schuift alles door elkaar heen.

    HIER ZAT DE FOUT WAARDOOR ER VERTICAAL NIETS TE SCHUIVEN VIEL.

    De max-height stond op "de volle hoogte van het raster min 100 pixels", en
    die volle hoogte werd uitgerekend met var(--urenvol). Die variabele wordt door
    de component gezet op .raster - het KIND van dit element. Een variabele erft
    van ouder naar kind en nooit andersom, dus hier kwam hij nooit aan. Daarmee
    was de hele calc() ongeldig, viel de browser terug op max-height: none, en
    werd deze baan precies zo hoog als zijn inhoud. Een baan die zo hoog is als
    zijn inhoud heeft niets om in te schuiven: je scrollde de PAGINA, en omdat de
    kopregels en de totaalregels aan dit element plakken schoven die gewoon mee
    het scherm uit.

    Twee dingen om te onthouden:
      - een calc() met één onbekende variabele mislukt in stilte; je ziet geen
        foutmelding, alleen gedrag dat niet klopt
      - een waarde die dit element nodig heeft, moet OP dit element staan of
        erboven - niet op .raster

    DE HOOGTE KOMT NU VAN HET VENSTER en niet meer van de inhoud. Het raster is
    zo hoog als er op het scherm past; de rest van de dag scroll je erin omhoog.
    Met een rijhoogte van 1.6rem per half uur past een werkdag er sowieso niet
    meer in - dat is de bedoeling, de uren zijn er nog.

    --buitenruimte IS WAT ER OP DE PAGINA BOVEN EN ONDER HET RASTER STAAT: de
    zwarte bovenbalk, de onderbalk met de rollen, en de weekvoet met de knop
    indienen. De waarde en de uitleg erbij staan hieronder op de regel zelf.

    --minvenster IS DE ONDERGRENS. Op een telefoon in liggende stand is
    100dvh nog geen 400 pixels; zonder deze grens hield je een raster van twee
    rijen over.

    TWEE KEER max-height, EN DAT IS MET OPZET. Op iOS is 100vh de hoogte ZONDER
    de adresbalk - het raster zou daar onder de balk doorlopen. 100dvh is de
    hoogte die er werkelijk is. Kent de browser dvh niet, dan blijft de eerste
    regel staan; kent hij het wel, dan wint de tweede. Dezelfde afspraak als op
    het inlogscherm.
*/
/*
    HET BLOK OM ALLES HEEN: het raster in zijn schuifbaan, en daaronder de
    melding en de onderbalk.

    DIT BLOK SCHUIFT NIET EN MAG NOOIT GAAN SCHUIVEN. Het bestaat alleen om wat
    wél schuift (.urenscherm) te scheiden van wat stil hoort te staan. Zet er
    geen overflow op: dan plakken de kopregels en de totaalregels ineens aan
    dit blok in plaats van aan de baan.
*/
/*
    ==================================================================
    HET RASTER LOOPT VAN RAND TOT RAND
    ==================================================================

    ER STOND EEN WITTE STROOK LINKS EN RECHTS. Die komt niet van dit raster maar
    van de pagina: main heeft in app.css een marge van --paginarand, zodat tekst
    en knoppen niet tegen de schermrand plakken. Voor een raster met zeven
    dagkolommen is dat juist verloren ruimte - twee keer zestien pixels is op
    een telefoon bijna een halve dagkolom.

    DE MARGE WORDT HIER WEER AFGETROKKEN, en alleen hier. Het raster steekt met
    een negatieve marge door de opvulling van de pagina heen en wordt even
    breed als het scherm.

    --paginarand KOMT UIT app.css EN STAAT DAAR OP ÉÉN PLEK. Zet hier geen
    losse 16px neer: lopen de twee waarden ooit uit elkaar, dan steekt het
    raster net buiten het scherm en verschijnt er onderaan de pagina een
    schuifbalk voor die paar pixels - een storing waarvan de oorzaak nergens te
    zien is.

    DE DAGKOLOMMEN WORDEN HIER VANZELF BREDER VAN: ze rekenen zich uit vanaf de
    breedte van de schuifbaan.
*/
.rasterblok[b-9dd8ffsvxi] {
    /*
        ==================================================================
        HET MERKTEKEN VAN DIT STIJLBESTAND
        ==================================================================

        DIT GETAL IS GEEN OPMAAK. Het staat hier zodat de app kan CONTROLEREN
        of de telefoon dit bestand heeft of een oude versie uit zijn cache.

        WAAROM DAT NODIG IS: de razor-bestanden zitten in de dll en die krijgt
        bij elke publicatie een nieuwe naam, dus die zijn altijd vers. Dit
        stijlbestand komt als ZwChaniqUren.styles.css binnen, met een vast
        adres. Safari houdt dat dagen vast. Je verandert dan iets hier, je
        publiceert, en op de telefoon verandert er niets - zonder dat er ergens
        een fout verschijnt. Precies daarom leek de witte strook links en rechts
        "niet opgelost": de regels hieronder stonden er al, ze kwamen alleen
        nooit aan.

        Weekraster.razor leest deze waarde uit en zet een melding onder het
        raster als hij niet klopt. Zie StijlVersie daar.

        BIJ ELKE WIJZIGING IN DIT BESTAND: hoog dit getal op, zet dezelfde
        waarde in StijlVersie in Weekraster.razor, en hoog ?v= in
        wwwroot/index.html op. Alle drie, anders klopt de melding niet meer.
    */
    --rasterstijl: 17;

    /*
        DE HOOGTE VAN DE VIER REGELS DIE ONDERIN HET RASTER PLAKKEN.

          --v1   de rij Dagtotaal
          --vw   elk van de drie weekregels (Weektotaal, Norm, Saldo)

        ZE STONDEN OP .raster EN ZIJN NAAR BOVEN VERHUISD. Twee dingen hebben ze
        nodig: het grid, om er zijn rijen mee op te zetten, en de lipjes, om
        precies boven de rij Dagtotaal te gaan staan. De lipjes hangen aan
        .rasterbaanvak en dat is geen kind van .raster - een variabele erft van
        ouder naar kind en nooit andersom, dus vanaf .raster kwamen ze daar
        nooit aan. Nu staan ze op de gemeenschappelijke ouder en komen ze er
        allebei bij.

        ZET ER GEEN TWEEDE KOPIE NAAST op .raster: lopen die twee uit elkaar,
        dan staan de lipjes over de getallen heen die je juist wilt lezen.
    */
    --v1: 1.5rem;
    --vw: 1.35rem;

    display: block;

    /*
        GEEN width MEER, EN DAT IS DE REPARATIE.

        Hier stond width: calc(100% + 2 * var(--paginarand)) SAMEN met de twee
        negatieve marges hieronder. Dat is dezelfde maat twee keer opgeschreven:
        de breedte rekende zichzelf uit vanaf de houder, de marges deden het nog
        eens. Klopte er iets niet aan --paginarand, dan stak het raster net
        buiten het scherm of bleef de strook staan - en aan het scherm was niet
        te zien welke van de twee regels het deed.

        MET width: auto DOET DE BROWSER HET REKENWERK. Een blok met automatische
        breedte vult zijn houder; twee negatieve zijmarges maken die houder aan
        weerszijden --paginarand ruimer. Er is nu één plek waar de maat staat en
        die kan niet met zichzelf in de knoop raken.

        DE TERUGVAL IS 16px EN NIET 0px. Komt app.css er om wat voor reden ook
        niet aan, dan staat hier de waarde die main óók gebruikt. Met 0px als
        terugval bleef de strook staan zonder dat er iets te zien was waaróm.
    */
    width: auto;
    margin-left: calc(-1 * var(--paginarand, 16px));
    margin-right: calc(-1 * var(--paginarand, 16px));

    /*
        ==================================================================
        HET RASTER VULT DE HOOGTE DIE HET SCHERM OVERLAAT
        ==================================================================

        WAAROM DIT ERBIJ IS GEKOMEN: alles wat in het raster vastplakt - de
        zwarte balk met jaar en week, de kolomkop met de dagen, de vier regels
        onderaan met Dagtotaal, Weektotaal, Norm en Saldo - plakt aan de
        SCHUIFBAAN van het raster (.urenscherm). Dat werkte, zolang je alleen ín
        het raster schoof. Maar de PAGINA schoof ook: trok je het scherm omlaag
        om bij de knop 'indienen' te komen, dan ging de hele baan mee omhoog en
        verdween de zwarte balk bovenlangs. Vastgeplakt aan iets dat zelf
        wegschuift, is niet vastgeplakt.

        NU SCHUIFT DE PAGINA NIET MEER op dit scherm (zie .vastblad in
        css/app.css) en verdeelt dit blok de hoogte: de baan krijgt wat er
        overblijft, de onderbalk met de rollen houdt zijn eigen hoogte.

        min-height: 0 IS GEEN FRANJE. Zonder die regel weigert een flexkind
        kleiner te worden dan zijn inhoud - het raster is zeventien rijen hoog,
        dus dan duwt het de onderbalk gewoon van het scherm af en is er niets
        gewonnen.
    */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;

    /*
        DE VEILIGE RAND VAN HET TOESTEL BLIJFT VRIJ.

        In staande stand is deze waarde nul en kost deze regel dus niets. In
        liggende stand op een iPhone met een inkeping is hij dat niet: zonder
        deze opvulling loopt de eerste dagkolom onder de afgeronde hoek door en
        is de maandag half te zien.
    */
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);

    min-width: 0;
    max-width: none;
}

/*
    HET VAK OM DE SCHUIFBAAN HEEN, en verder niets. Het bestaat alleen zodat de
    twee lipjes onderaan dit bestand ergens aan vast kunnen staan: absolute
    plaatsing zoekt de dichtstbijzijnde ouder met position, en dat moet een
    element zijn dat NIET meeschuift.

    GEEN overflow HIER. Wat in .urenscherm plakt, plakt daaraan omdat dat de
    schuifbaan is; maakt dit vak er ook een, dan plakken de kopregels en de
    linkerkolommen ineens aan het verkeerde element.
*/
.rasterbaanvak[b-9dd8ffsvxi] {
    position: relative;

    /*
        ==================================================================
        DIT VAK BEPAALT DE HOOGTE VAN HET RASTER - DE INHOUD NIET MEER
        ==================================================================

        WAT ER MISGING: na de eerste tik (of een keuze in de rol Van) groeide
        het raster en zakte de onderbalk naar beneden, tot de knop Vastleggen
        op de iPhone onder de onderrand verdween. Twee oorzaken die elkaar
        versterkten:

          1. De baan (.urenscherm) was een flexkind dat zijn hoogte uit zijn
             INHOUD haalde en daarna moest krimpen. Of dat krimpen lukt, hangt
             af van hoe de browser geneste flexkolommen uitrekent - Chrome doet
             het netjes, Safari niet altijd. Dan duwt een raster van
             vierendertig rijen alles eronder het scherm uit.
          2. De aanwijzing onder de knop verdween bij de eerste keuze. De balk
             werd lager, het raster kreeg de ruimte, en de knop schoof naar de
             onderste rand - precies waar de home-balk van de iPhone zit.

        NU STAAT DE BAAN ABSOLUUT IN DIT VAK (inset: 0). Een absoluut element
        telt niet mee in de hoogte van zijn ouder: hoe hoog het raster ook is,
        het kan dit vak niet meer oprekken. Dit vak krijgt zijn hoogte van
        buitenaf - zie hieronder - en het raster schuift erin.

        DE HOOGTE HIERONDER IS DE TERUGVAL voor een browser zonder :has()
        (Safari ouder dan 15.4). Daar is .vastblad niet vastgezet en scrollt de
        pagina; dit vak schat dan zelf hoeveel er overblijft.

        --buitenruimte IS WAT ER IN DIE TERUGVAL BOVEN EN ONDER HET RASTER
        STAAT (bovenbalk en onderbalk). --minvenster is de ondergrens, voor een
        telefoon in liggende stand. TWEE KEER height: kent de browser dvh niet,
        dan blijft de eerste staan.

        ZET HIER GEEN overflow OP. Wat in .urenscherm plakt, plakt daaraan omdat
        dát de schuifbaan is.
    */
    --buitenruimte: 16rem;
    --minvenster: 16rem;

    flex: 0 0 auto;
    height: max(var(--minvenster), calc(100vh - var(--buitenruimte)));
    height: max(var(--minvenster), calc(100dvh - var(--buitenruimte)));
}

/*
    MET :has() - DE GEWONE GANG VAN ZAKEN. Het scherm staat in een vastblad (zie
    css/app.css): dat is precies zo hoog als het venster, en dit vak krijgt wat
    er overblijft na de onderbalk. flex-basis 0 en niet auto: de verdeling mag
    nergens van de inhoud afhangen.

    DE ONDERBALK PLAKT HIER NIET MEER. Hij staat toch al onderaan, want het vak
    hierboven vult de rest. sticky liet hem aan main hangen, en main is op de
    iPhone een schuifbaan die Safari zelf opzij kan zetten zodra je een
    keuzelijst opent - dan schuift de balk mee. relative houdt hem op zijn plek
    en is nog steeds het houvast voor de melding die erboven zweeft
    (.onderbalkmelding).
*/
@supports selector(:has(*)) {
    .vastblad .rasterbaanvak[b-9dd8ffsvxi] {
        flex: 1 1 0;
        height: auto;
        min-height: 0;
    }

    .vastblad .onderbalk[b-9dd8ffsvxi] {
        position: relative;
    }
}

.urenscherm[b-9dd8ffsvxi] {
    /*
        DE HOOGTE VAN DEZE BAAN KOMT VAN .rasterbaanvak. --buitenruimte en
        --minvenster stonden hier en zijn daarheen verhuisd: dat vak bepaalt nu
        hoe hoog het raster is, deze baan vult het alleen.
    */

    /*
        DE BREEDTE VAN DE TWEE VASTE KOLOMMEN STAAT HIER, EN NIET OP .raster:
        de berekening van --vastekolommen hieronder heeft ze op dit element
        nodig, en een variabele erft van ouder naar kind en nooit andersom.
    */
    --soortbreedte: 4.6rem;
    --uurbreedte: 1.5rem;

    /*
        DE TWEE VASTE KOLOMMEN BIJ ELKAAR, op één plek uitgerekend. De
        soortstrook en de berekening van de dagkolom op .raster gebruiken hem.
        Hij rekent mee met de media query onderaan dit bestand.
    */
    --vastekolommen: calc(var(--soortbreedte) + var(--uurbreedte));

    /*
        DE MAAT VAN HET VENSTER. De dagkolommen (--dagkolom op .raster) en de
        kopregel (Components/Navigatiekop.razor.css) meten zich aan 100cqw:
        de breedte van deze baan.
    */
    container-type: inline-size;

    /*
        PRECIES ZO GROOT ALS .rasterbaanvak, EN NIET ZO GROOT ALS ZIJN INHOUD.
        Zie de toelichting bij .rasterbaanvak: absoluut geplaatst telt dit
        element niet mee in de hoogte van zijn ouder, dus vierendertig rijen
        uren kunnen niets meer naar beneden duwen.

        max-height: none, want app.css zet op een vastblad ook een regel op
        .urenscherm (voor de overzichten in Urentabel) en hier hoort geen
        enkele grens te staan behalve het vak zelf.
    */
    position: absolute;
    inset: 0;
    display: block;
    max-height: none;

    /*
        ==================================================================
        VERTICAAL SCHUIVEN DOOR DE UREN; ZIJWAARTS ALLEEN ALS HET NIET PAST
        ==================================================================

        overflow-x STOND OP hidden. Met eenentwintig kolommen moest de gebruiker
        stil gezet worden: een scheve veeg bracht je in een andere week. Die
        andere weken bestaan niet meer. Zeven kolommen passen op elke telefoon
        precies in de breedte, dus er valt normaal niets zijwaarts te schuiven.

        OP auto EN NIET OP hidden: op een scherm dat smaller is dan zeven keer
        --dagbreedte plus de vaste kolommen, zou hidden de zondag stilletjes
        afkappen. Met auto kun je er dan naartoe schuiven - en het blijft
        dezelfde week.

        touch-action: pan-y IS WEG om dezelfde reden: hij hield de vinger bij
        de weken vandaan, en die staan er niet meer.

        HET VASTKLIKKEN (scroll-snap) IS OOK WEG, al eerder. Kom je ergens nog
        scroll-snap-align of scroll-snap-stop tegen, dan is dat een overblijfsel.
    */
    overflow-x: auto;
    overflow-y: auto;

    /*
        -webkit-overflow-scrolling: touch STOND HIER EN IS WEG.

        Die regel stamt uit de tijd dat iOS zonder hem niet doorrolde na een
        veeg. Sinds iOS 13 doet hij dat vanzelf, en de regel heeft er een
        bijwerking bij gekregen die je hier direct ziet: tijdens het doorrollen
        raakt Safari elementen met position: sticky kwijt. De soortkolom en de
        uurkolom links verdwijnen dan halverwege een veeg, en komen bij het
        stilvallen weer terug. Dat ziet eruit als een fout in de opmaak terwijl
        het de scrollmotor is.

        ZET HEM NIET TERUG. Het doorrollen blijft gewoon werken.
    */

    /*
        ==================================================================
        AAN HET EIND IS HET EIND: GEEN TERUGVEREN
        ==================================================================

        HIER STOND contain, EN DAT WAS NIET GENOEG. contain houdt een veeg
        binnen dit raster - de pagina eronder schuift niet mee - maar iOS laat
        de baan zelf nog steeds doorschieten en terugveren. En bij dat veren
        schuift ALLES in de baan mee, ook wat vastgeplakt staat: de kopregel met
        jaar en week, de kolomkop met de dagen, en onderaan de rij Dagtotaal met
        de drie weekregels. Precies wat je zag: de kop beweegt mee, de
        dagtotalen komen los van de onderbalk, en er verschijnt een wit vlak
        boven of onder het raster.

        none ZET HET VEREN UIT en houdt de veeg tegelijk binnen de baan. Werkt
        in Safari vanaf iOS 16; een ouder toestel veert nog, maar verder werkt
        alles gewoon.

        GELDT OOK ZIJWAARTS. Past het raster in de breedte, dan valt er
        zijwaarts niets te schuiven en kun je het ook niet meer het scherm uit
        trekken.
    */
    overscroll-behavior: none;
}

/*
    DE KOPREGEL MAG NIET BREDER ZIJN DAN DE BAAN.

    Navigatiekop.razor.css zet de regel met jaar en week op width: 100cqw - de
    volle breedte van de baan. Maar de regel staat BINNEN .raster, en dat heeft
    links en rechts een rand van 1px. De regel begon dus 1px naar rechts en
    stak 1px buiten de baan uit.

    DIE ENE PIXEL WAS GENOEG OM ZIJWAARTS TE KUNNEN SCHUIVEN. Een baan die ook
    maar een pixel te breed is, laat zich op de iPhone opzij vegen - en met het
    terugveren erbij trok je het hele raster zo naar links het scherm uit.

    ALLEEN HIER, NIET IN Navigatiekop.razor.css. Dezelfde kopregel staat ook in
    de overzichten, en daar heeft het raster eromheen andere randen. ::deep is
    nodig omdat de regel van een andere component komt.

    DE 2px ZIJN DE TWEE RANDEN VAN .raster (border: 1px). Verander je die rand,
    verander dan dit getal mee - anders komt de pixel terug. Kent de browser cqw
    niet, dan is deze regel ongeldig en blijft de breedte uit Navigatiekop staan.
*/
.raster[b-9dd8ffsvxi]  .navregel-jaar {
    width: calc(100cqw - 2px);
}

/*
    ==================================================================
    HET RASTER IS MET DE MUIS TE VERSLEPEN - ALLEEN OMHOOG EN OMLAAG
    ==================================================================

    Indrukken en slepen verschuift het raster door de uren van de dag. Het werk
    zit in wwwroot/js/raster.js (de functie slepen); hier staat alleen wat je
    ervan ziet.

    ZIJWAARTS SLEPEN BESTAAT NIET. Van week wisselen doe je met de lipjes of de
    weeklijst.

    ALLEEN WAAR ER EEN MUIS IS. Op een aanraakscherm veeg je gewoon en hoort er
    geen handje te verschijnen.

    DE CELLEN HOUDEN HUN EIGEN AANWIJZER. Een uurvak en een dagkop zijn knoppen
    met cursor: pointer, en die staan hieronder in het bestand - een latere regel
    met dezelfde zwaarte wint, dus daar zie je gewoon dat je kunt tikken.
*/
@media (hover: hover) and (pointer: fine) {
    .urenscherm[b-9dd8ffsvxi] {
        cursor: grab;
    }
}

/*
    TIJDENS HET SLEPEN. De klasse wordt door raster.js aan- en uitgezet.

    DE AANWIJZER GELDT OOK VOOR ALLES ERBINNEN: zonder die tweede selector zou je
    boven een uurvak een tikhandje zien terwijl je aan het slepen bent.

    GEEN TEKSTSELECTIE. Zonder dit sleep je alle namen en getallen die je
    passeert blauw mee.
*/
.urenscherm.sleept[b-9dd8ffsvxi],
.urenscherm.sleept *[b-9dd8ffsvxi] {
    cursor: grabbing;
}

.urenscherm.sleept[b-9dd8ffsvxi] {
    user-select: none;
    -webkit-user-select: none;
}

/*
    ELKE MAAT STAAT OP ÉÉN PLEK, EN DE PLEK HANGT AF VAN WIE HEM NODIG HEEFT.

    De rijhoogtes staan hier: alleen dit grid gebruikt ze.

    --soortbreedte EN --uurbreedte STAAN OP .urenscherm en niet hier; dit grid
    krijgt ze mee naar beneden. Zet er hier geen tweede kopie naast.

    ALLES WAT ÍN HET RASTER STAAT KOMT BIJ ALLEBEI: een variabele erft naar
    beneden.
*/
.raster[b-9dd8ffsvxi] {
    display: grid;

    /* TWEE VASTE RIJEN: de kopregel (jaar, kwartaal en week) en de kolomkop.
       Het waren er drie - de kwartalen stonden op een eigen regel - en die
       middelste is weg. --r3 bestaat daarom niet meer; kom je hem nog ergens
       tegen, dan is dat een overblijfsel.

       --r1 MOET GELIJK BLIJVEN AAN --nr1 in Navigatiekop.razor.css. Daar staat
       de hoogte van de regel zelf, hier die van de gridrij waar hij in valt;
       lopen ze uit elkaar, dan schuiven de rijen bij het scrollen over elkaar
       heen. --r2 is van de kolomkop en staat alleen hier. */
    --r1: 2.4rem;
    --r2: 2.3rem;

    /*
        ==================================================================
        DE BREEDTE VAN ÉÉN DAGKOLOM
        ==================================================================

        ZEVEN DAGEN VULLEN PRECIES DE ZICHTBARE BREEDTE. Wat er van het raster
        te zien is, is de breedte van de schuifbaan (100cqw) min de twee
        kolommen links - en dat gedeeld door zeven.

        DRIE PIXELS ERAF: de linker- en rechterrand van .raster (border: 1px
        elk) en één pixel voor afronding - dagkolommen zijn een gebroken aantal
        pixels breed. Met overflow-x: hidden viel een overschot van een pixel
        niet op; met overflow-x: auto (zie .urenscherm) verschijnt er dan een
        schuifbalk voor die ene pixel. Die derde pixel komt als lucht rechts van
        zondag te staan en is niet te zien.

        max() MAAKT --dagbreedte DE ONDERGRENS. Zet hier nooit weer 1fr neer: in
        een grid met width: max-content komt een fr-aandeel niet uit de
        schermbreedte maar uit de inhoud, en dan bepaalt de breedste cel hoe
        breed álle dagkolommen worden.

        repeat(7, ...) STAAT HIER VAST. Dat was var(--dagkolommen) uit de
        component, toen het er eenentwintig waren. Een week heeft zeven dagen;
        zet Weekraster.razor ooit een ander aantal kolommen neer, dan moet dit
        getal mee - anders lopen de kolommen buiten het grid.
    */
    --dagkolom: max(
        var(--dagbreedte),
        calc((100cqw - var(--vastekolommen) - 3px) / 7));

    grid-template-columns:
        var(--soortbreedte)
        var(--uurbreedte)
        repeat(7, var(--dagkolom));

    /* Breed genoeg voor alle kolommen; normaal is dat precies de baan. */
    width: max-content;
    min-width: 100%;

    border: 1px solid #16201C;
    border-radius: 6px 6px 0 0;
    background: #FFFFFF;

    /* GEEN overflow: hidden HIER. Dat maakt van dit blok zelf een schuifbaan, en
       dan plakken de kopregels en de linkerkolommen eraan vast in plaats van aan
       .urenscherm - waarna er niets meer blijft staan bij het schuiven. */
}

/* ============================================================
   Rij 1: de navigatie - STAAT HIER NIET MEER
   ============================================================

   De opmaak van de kopregel is meeverhuisd naar
   Components/Navigatiekop.razor.css. Blazor merkt elke selector in een .razor.css
   met het merkteken van zijn eigen component, dus die regels zouden hier toch
   niets meer raken: de elementen zijn niet langer van dit bestand.

   WAT HIER WEL BLIJFT, IS DE RIJHOOGTE --r1 hierboven. Het grid zet daarmee de
   hoogte van de eerste rij; de component zet met --nr1 dezelfde hoogte. Die twee
   moeten gelijk blijven - lopen ze uit elkaar, dan schuiven de regels bij het
   scrollen over elkaar heen.
   ============================================================ */

/* ============================================================
   Rij 2: de kolomkop, met de dagen
   ============================================================ */

.kop[b-9dd8ffsvxi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    position: sticky;
    top: var(--r1);
    z-index: 3;

    border-bottom: 1px solid #16201C;
    background: #E9E7E2;

    font-size: 0.65rem;
    line-height: 1.1;
    color: #16201C;
}

/*
    DE LINKERBOVENHOEK PLAKT IN ALLEBEI DE RICHTINGEN, en moet dus over de
    kolomkop én over de linkerkolommen heen liggen - vandaar de hogere z-index.
    Zonder dat schuift de eerste dagkolom eronderdoor en leest "Soort" ineens als
    een dagkop.
*/
.kop-soort[b-9dd8ffsvxi] {
    position: sticky;
    left: 0;
    z-index: 8;

    font-weight: 600;
}

.kop-uur[b-9dd8ffsvxi] {
    position: sticky;
    left: var(--soortbreedte);
    z-index: 8;

    border-right: 1px solid #C9C6BF;
    color: #6B7480;
}

/* DE DAGKOP IS EEN KNOP: aantikken wijst die dag aan. */
.kop-dag[b-9dd8ffsvxi] {
    border: 0;
    border-bottom: 1px solid #16201C;
    border-left: 1px solid #C9C6BF;
    font: inherit;
    font-size: 0.65rem;
    cursor: pointer;
}

.dagnaam[b-9dd8ffsvxi] {
    text-transform: lowercase;
    opacity: 0.75;
}

.dagcijfer[b-9dd8ffsvxi] {
    font-size: 0.8rem;
    font-weight: 600;
}

/* De dag die aangewezen staat. */
.kop-dag-nu[b-9dd8ffsvxi] {
    background: #16201C;
    color: #FFFFFF;
}

.kop-dag-nu .dagnaam[b-9dd8ffsvxi] {
    opacity: 0.9;
}

/* ============================================================
   Kolom 1: de urensoorten
   ============================================================ */

/*
    DE SOORTKOLOM IS ÉÉN CEL over alle uurrijen heen, zodat de knoppen erin
    bovenaan kunnen blijven plakken terwijl je door de uren scrollt. Hij plakt
    ook links: op een scherm dat te smal is voor zeven dagen blijft hij staan
    als je zijwaarts schuift.
*/
.soortkolom[b-9dd8ffsvxi] {
    position: sticky;
    left: 0;
    z-index: 4;

    border-right: 1px solid #C9C6BF;
    background: #FAF9F7;
}

/*
    De knoppen blijven bovenin staan terwijl je door de uren scrollt. De cel
    eromheen loopt over alle uurrijen, dus er is genoeg hoogte om in te plakken.

    top is de som van de twee bovenste rijen: daaronder begint het raster.
*/
.soortstrook[b-9dd8ffsvxi] {
    position: sticky;
    top: calc(var(--r1) + var(--r2));

    display: flex;
    flex-direction: column;
    gap: 3px;

    padding: 3px;
}

.soortstrook .soortknop[b-9dd8ffsvxi] {
    display: block;
    width: 100%;
    padding: 0.3rem 0.25rem;

    border: 1px solid #C9C6BF;
    border-left: 4px solid var(--kleur, #888888);
    border-radius: 4px;
    background: #FFFFFF;

    font: inherit;
    font-size: 0.72rem;
    line-height: 1.1;
    text-align: left;
    color: #16201C;
    cursor: pointer;
}

/* Gekozen is vol gekleurd en niet een randje: tussen drie andere randjes valt
   een randje niet op. */
.soortstrook .soortknop.gekozen[b-9dd8ffsvxi] {
    background: var(--kleur, #888888);
    border-color: var(--kleur, #888888);
    color: #FFFFFF;
    font-weight: 600;
}

.soortstrook .soortknop:disabled[b-9dd8ffsvxi] {
    opacity: 0.5;
    cursor: default;
}

/* ============================================================
   Gehele dag: het vakje onder de soorten
   ============================================================ */

/*
    ONDER DE SOORTKNOPPEN, EN HET ZIET ER ANDERS UIT DAN ZIJ.

    Het is geen soort maar een bijstelling ervan - het zegt hoe lang, niet wat.
    Vandaar geen kleurbalkje links en een stippellijn erboven: een streep tussen
    "wat markeer ik" en "hoe lang duurt het".

    DE TEKST LINKS, HET VINKJE RECHTS. De knoppen erboven beginnen allemaal links
    met een kleurbalkje; een vinkje op diezelfde plek zou als nog een soort lezen.
*/
.heledagvak[b-9dd8ffsvxi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;

    margin-top: 4px;
    padding: 0.3rem 0.25rem;

    border-top: 1px dashed #C9C6BF;

    font-size: 0.72rem;
    line-height: 1.1;
    color: #16201C;
    cursor: pointer;
}

/* Aan: vet, zodat je in één blik ziet dat een tik nu een hele dag oplevert en
   niet een half uur. Alleen een aangevinkt hokje is op een klein scherm te
   gemakkelijk over het hoofd te zien. */
.heledagvak.aan .heledagtekst[b-9dd8ffsvxi] {
    font-weight: 700;
}

.heledagtekst[b-9dd8ffsvxi] {
    min-width: 0;
}

/*
    HET HOKJE IS RUIM BEMETEN. De soortknoppen ernaast zijn een halve centimeter
    hoog en met een vinger te raken; een standaardhokje van dertien pixels is dat
    niet, en dan mis je hem net zo vaak als je hem raakt.
*/
.heledagvinkje[b-9dd8ffsvxi] {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: #2F6B4F;
    cursor: pointer;
}

.heledagvinkje:disabled[b-9dd8ffsvxi] {
    cursor: default;
}

/* Uit staat het hele vak gedempt, en niet alleen het hokje: een leesbare tekst
   naast een grijs hokje leest als "dit kan wel, probeer het maar". */
.heledagvak:has(.heledagvinkje:disabled)[b-9dd8ffsvxi] {
    opacity: 0.5;
    cursor: default;
}

/* ============================================================
   Dag leegmaken: de knop onder "Gehele dag"
   ============================================================ */

/*
    ONDER HET VINKJE, EN HIJ ZIET ER NIET UIT ALS EEN SOORT.

    Geen kleurbalkje links (dat hebben de soortknoppen) en geen vol vlak: dit is
    een handeling en geen keuze die aan of uit staat. De rode randkleur zegt wat
    er gaat gebeuren zonder dat de knop een rode vlek in een smalle kolom wordt.

    DE DATUM STAAT OP EEN TWEEDE REGEL, kleiner. Met zeven dagkolommen in
    beeld is "de dag" anders de vraag: wélke dag. De kolom is 4,6rem breed, dus
    de twee regels staan onder elkaar in plaats van naast elkaar.
*/
.dagleegknop[b-9dd8ffsvxi] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;

    width: 100%;
    margin-top: 2px;
    padding: 0.3rem 0.25rem;

    border: 1px solid #C08078;
    border-radius: 4px;
    background: #FFFFFF;

    font: inherit;
    font-size: 0.72rem;
    line-height: 1.1;
    text-align: left;
    color: #8C3A30;
    cursor: pointer;
}

.dagleegtekst[b-9dd8ffsvxi] {
    font-weight: 600;
}

/* De datum is de toelichting bij de knop en niet de knop zelf, dus zachter. */
.dagleegdatum[b-9dd8ffsvxi] {
    font-size: 0.62rem;
    text-transform: lowercase;
    opacity: 0.75;
}

/*
    DE KNOP STAAT NOOIT MEER UIT. Hij opent altijd het venster, en dat zegt wat
    er weggaat of waarom er niets leeg te maken valt - zie LeegmaakReden in
    Weekraster.razor. De regel voor .dagleegknop:disabled is daarom weg.
*/

/*
    DE REGEL IN HET BEVESTIGINGSVENSTER: wat er gaat gebeuren, in woorden, vlak
    boven de knop die het doet.

    STOND IN Pages/Dag.razor.css EN MOEST MEE VERHUIZEN. Scoped css geldt alleen
    voor het bestand waar het bij hoort, dus zolang deze regel daar stond, viel
    de tekst hier terug op de standaardopmaak - zonder dat er iets stukging, en
    dus zonder dat je het aan een foutmelding zou zien.
*/
.paneeltoelichting[b-9dd8ffsvxi] {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    line-height: 1.35;
    opacity: 0.85;
}

.geen-soorten[b-9dd8ffsvxi] {
    margin: 0;
    padding: 0.4rem;
    font-size: 0.72rem;
    line-height: 1.25;
    color: #6B7480;
}

/* ============================================================
   De uren en de cellen
   ============================================================ */

/* De uurkolom plakt links, naast de soortkolom, voor een scherm dat te smal is
   voor zeven dagen.

   HET LABEL LOOPT OVER TWEE RIJEN: een getal per half uur maakt de kolom
   onleesbaar, en de rasterlijn ertussen zegt al genoeg. */
.uurlabel[b-9dd8ffsvxi] {
    position: sticky;
    left: var(--soortbreedte);
    z-index: 4;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding-top: 1px;
    border-right: 1px solid #C9C6BF;
    border-bottom: 1px solid #F0EEE9;
    background: #FAF9F7;

    font-size: 0.62rem;
    color: #6B7480;
}

.cel[b-9dd8ffsvxi] {
    position: relative;
    border-bottom: 1px solid #F0EEE9;
    border-left: 1px solid #EDEBE6;
    cursor: pointer;

    /* LANG INDRUKKEN MOET VAN ONS ZIJN, NIET VAN DE TELEFOON.

       Zonder deze drie regels pakt iOS een lang ingedrukte cel zelf op: er komt
       een vergrootglas of een selectiemenu, en het paneel van het blok opent
       niet. -webkit-touch-callout zet het menu uit, user-select het selecteren.
       Het contextmenu van Android houdt raster.js tegen (langIndrukken).

       -webkit-tap-highlight-color haalt het grijze vlak weg dat iOS bij elke
       tik over de cel legt; het raster laat zelf al zien wat er aangetikt is. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/*
    DE LIJN OP HET HALVE UUR IS LICHTER DAN DIE OP HET HELE UUR.

    Allebei even zwaar zou een raster van vierendertig gelijke strepen opleveren
    en dan is niet meer te zien waar een uur begint. Nu lees je de uren aan de
    donkere lijnen en zie je de halve uren als hulplijn ertussen.

    .cel-half IS DE RIJ DIE OP :30 BEGINT, dus de onderrand ervan is het hele uur
    - die blijft donker. De lichte lijn staat op de rij erbóven, die op :00
    begint en op :30 eindigt.
*/
.cel:not(.cel-half)[b-9dd8ffsvxi] {
    border-bottom-color: #F7F6F3;
}

/* De kolom van de dag die aangewezen staat: een tint, geen kader. Een kader om
   zeventien cellen heen wordt een streep die met de rasterlijnen concurreert. */
.cel-nu[b-9dd8ffsvxi] {
    background-color: rgba(22, 32, 28, 0.04);
}

/*
    DE LOPENDE SELECTIE LIGT ERBOVENOP en dekt het gekleurde verloop niet af: het
    gaat om twee verschillende dingen (wat er ligt, en wat je aan het kiezen
    bent) en je moet ze allebei tegelijk kunnen zien.

    Vandaar ::after met strepen in de kleur van de gekozen soort in plaats van
    een achtergrond - een achtergrond zou het verloop van de cel overschrijven.
*/
.cel.selectie[b-9dd8ffsvxi]::after {
    content: "";
    position: absolute;
    inset: 0;

    background: repeating-linear-gradient(
        45deg,
        var(--kleur, #888888) 0 3px,
        transparent 3px 7px);

    opacity: 0.55;
    outline: 1px solid var(--kleur, #888888);
    outline-offset: -1px;
}

/*
    BLOKKEN DIE GEKOZEN ZIJN MAAR NOG NIET VASTLIGGEN (_concepten in
    Weekraster.razor).

    GESTREEPT, NET ALS DE LOPENDE SELECTIE - want ook dit ligt nog niet vast -
    maar in de EIGEN kleur van het blok (--conceptkleur) en niet in die van de
    gekozen soort. Elk blok heeft zijn eigen soort; kies je daarna een andere,
    dan hoort dit blok zijn kleur te houden.

    ::before EN NIET ::after: ::after is van de lopende selectie. Een cel kan
    allebei hebben (een blok tot 12:15, de selectie vanaf 12:15), en dan moeten
    ze elkaar niet overschrijven.

    DE STREPEN LOPEN DE ANDERE KANT OP en zijn voller. Zo zie je het verschil
    tussen "opzij gezet" en "nu aan het kiezen", ook als de soort dezelfde is.

    pointer-events: none op allebei: de tik hoort bij de cel, niet bij de
    versiering erin.
*/
.cel.concept[b-9dd8ffsvxi]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: repeating-linear-gradient(
        -45deg,
        var(--conceptkleur, #888888) 0 4px,
        transparent 4px 7px);

    opacity: 0.7;
    outline: 1px dashed var(--conceptkleur, #888888);
    outline-offset: -1px;
}

.cel.selectie[b-9dd8ffsvxi]::after {
    pointer-events: none;
}

/* ============================================================
   De totaalrij
   ============================================================ */

/*
    DE VIER ONDERSTE RIJEN PLAKKEN AAN DE ONDERKANT, net zoals de kopregels aan
    de bovenkant plakken. Het raster is hoger dan zijn venster, en zonder dit
    zakken de dagtotalen en het weeksaldo weg zodra je door de uren scrollt -
    terwijl dat juist de getallen zijn waarvoor je zit te tellen.

    ELKE RIJ PLAKT OP DE SOM VAN DE RIJEN ERÓNDER, en daarom hebben ze een vaste
    hoogte (--v1 en --vw): een rij die met zijn inhoud meegroeit laat die som niet
    meer kloppen en schuift over de rij eronder heen. Dezelfde afspraak als boven,
    op zijn kop.
*/
.totaalnaam[b-9dd8ffsvxi],
.totaalcel[b-9dd8ffsvxi] {
    position: sticky;
    bottom: calc(3 * var(--vw));
    z-index: 5;

    display: flex;
    align-items: center;

    border-top: 1px solid #16201C;
    background: #E9E7E2;

    font-size: 0.68rem;
    font-weight: 600;
    color: #16201C;
}

/* De naam plakt ook links: hij hoort bij de rij, niet bij een dagkolom. */
.totaalnaam[b-9dd8ffsvxi] {
    left: 0;
    z-index: 6;

    justify-content: flex-end;
    padding: 0.15rem 0.3rem;
}

.totaalcel[b-9dd8ffsvxi] {
    justify-content: center;
    border-left: 1px solid #C9C6BF;
}

/* ============================================================
   De drie weekregels: weektotaal, norm en saldo
   ============================================================ */

/*
    DE NAAM LINKS, HET GETAL ONDER DE ZONDAGKOLOM.

    Een week loopt van maandag tot en met zondag, dus daar is hij af - en daar
    hoort de uitkomst te staan, net als onderaan een kolom cijfers. Het getal
    stond links tegen de naam aan en las daardoor als een waarde die bij kolom 1
    en 2 hoorde, niet als de som van de zeven dagen erboven.

    TWEE VAKKEN PER REGEL: de naam (kolom 1 en 2) en het getal (kolom 3 tot en
    met zondag, rechts uitgelijnd). De staart die bij eenentwintig kolommen de
    ruimte achter zondag opvulde, is weg. Zie de toelichting in Weekraster.razor.

    LICHTER DAN DE DAGTOTAALRIJ. Die rij sluit het raster af met een zwarte
    lijn; deze drie horen erbij als samenvatting en mogen niet nóg een keer even
    zwaar staan, anders lijkt het scherm drie keer op te houden.
*/
.weeknaam[b-9dd8ffsvxi],
.weekwaarde[b-9dd8ffsvxi] {
    position: sticky;
    z-index: 5;

    display: flex;
    align-items: center;

    border-top: 1px solid #E3E0DA;
    background: #F4F3F0;

    font-size: 0.68rem;
}

.weeknaam[b-9dd8ffsvxi] {
    left: 0;
    z-index: 6;

    justify-content: flex-end;
    padding: 0.15rem 0.3rem;
    color: #55606B;
}

/*
    HET GETAL TEGEN DE RECHTERRAND VAN HET VAK, en dat vak houdt precies op na
    de zondagkolom. Zo staat het getal onder zondag zonder dat het in die ene
    smalle kolom hoeft te passen: "1234,5 uur" past niet in een centimeter, maar
    mag er wel links van doorlopen.
*/
.weekwaarde[b-9dd8ffsvxi] {
    padding: 0;
    border-left: 1px solid #C9C6BF;
    justify-content: flex-end;
    font-weight: 600;
    color: #16201C;
}

/*
    DE TEKST ZELF: tegen de rechterrand van zijn vak, met een klein beetje lucht
    ernaast zodat hij niet tegen de rasterlijn aan plakt.

    GEEN position: sticky OP DE TEKST: dan schuift het getal naar de
    linkerrand van zijn vak.
*/
.weektekst[b-9dd8ffsvxi] {
    padding: 0.15rem 0.3rem 0.15rem 0;
    white-space: nowrap;
}

/*
    Elke regel plakt op de som van de regels eronder; de onderste op nul.

    DE KLASSE ZEGT WELKE REGEL HET IS, en niet de volgorde in het document: de
    naam- en waardevakken staan afwisselend en een telling op volgorde zou bij de
    eerste wijziging in de markup stilletjes verschuiven.
*/
.weekrij-totaal[b-9dd8ffsvxi] { bottom: calc(2 * var(--vw)); }
.weekrij-norm[b-9dd8ffsvxi]   { bottom: var(--vw); }
.weekrij-saldo[b-9dd8ffsvxi]  { bottom: 0; }

/*
    EEN ONTBREKENDE NORM VALT OP. Zou "niet bekend" in hetzelfde grijs staan als
    de rest, dan las je eroverheen en bleef het saldo onverklaard leeg staan.
*/
.weekwaarde-ontbreekt[b-9dd8ffsvxi] {
    color: #8A2F2F;
}

/* Onder de norm rood, erboven groen - dezelfde afspraak als op het
   jaaroverzicht, zodat een tekort er overal hetzelfde uitziet. */
.weekwaarde-saldo.tekort[b-9dd8ffsvxi] {
    color: #8A2F2F;
}

.weekwaarde-saldo.over[b-9dd8ffsvxi] {
    color: #2F6B3F;
}

/* ============================================================
   De lipjes: een week terug en vooruit
   ============================================================ */

/*
    TWEE LIPJES TEGEN DE ZIJKANTEN VAN HET RASTER.

    SAMEN MET DE WEEKLIJST DE WEG NAAR EEN ANDERE WEEK.

    ZE STAAN BUITEN DE SCHUIFBAAN: ze hangen aan .rasterbaanvak, dat niet
    meeschuift.

    ZE LIGGEN OVER HET RASTER HEEN, en dat kost wat. Links valt het lipje over
    de soortkolom, en die is op die hoogte leeg: de knoppen plakken bovenin.
    Rechts valt hij over de zondagkolom, en daar neemt hij een
    strook van --lipjehoogte weg waarop je dus niet meer kunt tikken. Vandaar
    dat ze niet groter zijn dan nodig.

    ZE STAAN LAAG: waar je duim al is.

    --lipjeonder IS DE PLEK WAAR JE AAN DRAAIT, --lipjehoogte de maat.
*/
.lipje[b-9dd8ffsvxi] {
    --lipjehoogte: 3.4rem;

    /*
        --lipjeonder IS DE AFSTAND TOT DE ONDERKANT VAN DE BAAN.

        HIER STOND top: 66% EN DAT WAS TE HOOG. Gemeten vanaf bóven hangt de
        plek af van hoe hoog het venster is: op een groot toestel stonden ze
        tweehonderd pixels boven de onderrand, ver van de duim. Vanaf ONDER
        gemeten staan ze op elk toestel op dezelfde plek.

        HIJ WORDT UITGEREKEND EN NIET GESCHAT. Onderin het raster plakken vier
        regels: Dagtotaal (--v1) en daaronder Weektotaal, Norm en Saldo (drie
        keer --vw). De onderkant van een lipje komt dus precies op de bovenrand
        van de rij Dagtotaal te liggen, met anderhalve millimeter lucht ertussen.

        DAAROM STAAN --v1 EN --vw OP .rasterblok. Zou hier een vast getal staan,
        dan zou het bij de eerste wijziging van een rijhoogte over de getallen
        vallen waarvoor je naar een andere week gaat kijken - en dat is niet aan
        de css te zien.

        DE HOOGTE NIET VERKLEINEN als hij in de weg zit: dat betekent mistikken.
        Verzet dan deze waarde.
    */
    --lipjeonder: calc(var(--v1) + 3 * var(--vw) + 0.15rem);

    position: absolute;
    top: auto;
    bottom: var(--lipjeonder);

    /* BOVEN ALLES WAT PLAKT. De kopregel zit op 6, de linkerbovenhoek op 8 en
       de onderbalk op 7. Hier staat 20 en niet 9: ruim boven alles wat er in
       het raster aan z-index staat, zodat er nooit één van de twee half onder
       een plakkende kolom verdwijnt. */
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 1.5rem;
    height: var(--lipjehoogte);
    padding: 0;

    /*
        DONKER, EN DAT IS EEN REPARATIE. Ze waren eerst lichtgrijs met een dun
        randje - dezelfde kleur als de soortkolom waar het linker lipje
        overheen valt, en nauwelijks donkerder dan de witte cellen waar het
        rechter overheen valt. Op een telefoon was er dan één te zien en de
        ander niet, terwijl ze er allebei stonden.

        DEZELFDE KLEUR ALS DE KOPREGEL, zodat ze als bediening lezen en niet
        als een cel die toevallig donker is.
    */
    border: 1px solid #16201C;
    background: #16201C;
    box-shadow: 0 1px 4px rgba(22, 32, 28, 0.35);

    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    color: #FFFFFF;
    cursor: pointer;
}

/* De rechte kant zit tegen de schermrand, de ronde kant wijst het raster in -
   zo leest het als een lipje dat aan het raster vastzit en niet als een knop
   die er los overheen ligt. */
.lipje-vorige[b-9dd8ffsvxi] {
    left: 0;
    border-left: 0;
    border-radius: 0 7px 7px 0;
}

.lipje-volgende[b-9dd8ffsvxi] {
    right: 0;
    border-right: 0;
    border-radius: 7px 0 0 7px;
}

/* Ingedrukt draait het om: dan weet je dat de tik is aangekomen, ook als het
   laden van de week even duurt. */
.lipje:active[b-9dd8ffsvxi] {
    background: #FFFFFF;
    color: #16201C;
}

/* ============================================================
   Onder het grid: de rollen en de knoppen
   ============================================================ */

/*
    SLUIT TEGEN HET GRID AAN. Het grid heeft alleen bovenaan ronde hoeken, deze
    balk alleen onderaan, en de bovenrand van de balk is de onderrand van het
    grid (vandaar margin-top: -1px). Zo blijft het één geheel terwijl invoeren
    en bedienen uit elkaar staan.

    PLAKT ONDERAAN HET SCHERM. Het raster is zeventien rijen hoog; zonder dit
    stonden de rollen en de knop Vastleggen buiten beeld zodra je onderin de dag
    zat te tikken.
*/
/*
    ZO LAAG MOGELIJK, WANT ALLES WAT DEZE BALK TE HOOG IS, DEKT HIJ AF.

    De balk plakt aan de onderkant van het venster en ligt daarmee over de
    onderste rijen van het grid heen: Dagtotaal, Weektotaal, Norm en Saldo. Elke
    regel die je hier weghaalt, komt bij het raster terug.

    ZO ZAG HET ERUIT:                  ZO ZIET HET ERUIT:
      Van            Tot                 Van          Tot        8,5 uur
      [− 08:00 +] [− 16:30 +]            [− 08:00 +]  [− 16:30 +]  (×)
              Kies Van en Tot ×          [ Gewerkt vastleggen ]
      [ Gewerkt vastleggen ]

    HET KRUISJE IS VAN DE LABELREGEL NAAR DE ROLLEN VERHUISD. Daardoor draagt de
    labelregel alleen nog tekst en is hij zo laag als een regel tekst kan zijn;
    hij werd eerder op de hoogte van een knop getrokken. De drie dingen die over
    dezelfde reeks gaan - begintijd, eindtijd en leegmaken - staan nu ook
    werkelijk naast elkaar.

    DE KNOP SLUIT ERONDER AAN: geen regel wit ertussen, want hij hoort bij de
    tijden erboven en niet bij het scherm eronder.
*/
.onderbalk[b-9dd8ffsvxi] {
    position: sticky;
    bottom: 0;
    z-index: 7;

    /*
        ==================================================================
        DEZE BALK KRIMPT NOOIT - DAT IS DE REPARATIE VAN DE VERDWENEN KNOP
        ==================================================================

        WAT ER MISGING: na het aantikken van een reeks stonden de twee rollen
        er nog, maar de knop "Gewerkt vastleggen op ..." was weg. Kwam je terug
        uit het maandoverzicht, dan stond hij er wél - half, en lager dan hoort.

        DE OORZAAK: .rasterblok is een kolom met twee kinderen die allebei
        mochten krimpen: het raster (.rasterbaanvak) en deze balk. Het raster is
        veel hoger dan het scherm, dus er moet flink gekrompen worden, en dat
        werd NAAR VERHOUDING verdeeld - ook over deze balk. De balk werd dan
        tientallen pixels lager dan zijn inhoud. Die inhoud stak er onderaan
        uit, voorbij de onderkant van het scherm, en daar knipt main hem af
        (overflow: hidden, zie .vastblad in css/app.css). Het onderste wat er
        in de balk staat, verdwijnt dus.

        WAAROM HET MET DE SELECTIE TE MAKEN LEEK TE HEBBEN: in een lege week
        staat onderaan de aanwijzing ("Kies een soort, tik ..."). Dan is DIE
        het onderste en wordt die afgeknipt, en blijft de knop er half boven
        staan - zo zag je hem na terugkomen uit het maandoverzicht. Zodra je
        een reeks aantikt, verdwijnt de aanwijzing, is de knop het onderste
        geworden, en valt hij in zijn geheel weg. De rollen staan hoger in de
        balk en bleven daardoor altijd in beeld.

        Chrome hield zich daar netjes aan de ondergrens van de inhoud
        (min-height: auto); Safari op de iPhone liet de balk toch krimpen.

        flex: 0 0 auto ZEGT HET EXPLICIET: deze balk is precies zo hoog als
        wat erin staat, op elk toestel. Al het krimpen gaat van het raster af,
        en dat schuift toch al in zijn eigen baan. HAAL DIT NOOIT WEG en zet
        er geen flex-shrink anders dan 0 neer - dan verdwijnt de knop weer,
        zonder dat er ergens een fout verschijnt.
    */
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;

    /* KRAP GEHOUDEN, EN DAT IS HET HELE PUNT VAN DEZE BALK. Hij ligt over de
       onderste rijen van het raster heen (Dagtotaal, Weektotaal, Norm, Saldo),
       dus elke pixel die hij hoger is, is een regel die je niet ziet. */
    gap: 0.25rem;

    margin-top: -1px;

    /*
        DE HOME-BALK VAN DE IPHONE BLIJFT VRIJ.

        Als app op het beginscherm loopt de pagina tot de onderrand van het
        glas door (viewport-fit=cover). De onderste 34 pixels zijn daar van de
        home-balk: wat daar staat, zie je half en tik je niet goed aan - een
        veeg daar sluit de app. Die ruimte hield vroeger de bladvoet vrij; die is
        weg, en daarmee stond de knop Vastleggen precies in die strook.

        In Safari met adresbalk en op een pc is deze waarde nul en kost het
        niets.
    */
    /*
        max() EN NIET OPTELLEN. Hier stond 0.35rem + de home-balk: zes pixels
        lucht bovenop een strook die zelf al leeg is. Nu is het de home-balk of,
        waar die er niet is, 0.35rem - wat het grootst is. Zo blijft de knop uit
        de home-balk en gaat er geen pixel meer verloren dan nodig.
    */
    padding: 0.3rem 0.4rem max(0.35rem, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;

    border: 1px solid #16201C;
    border-radius: 0 0 6px 6px;
    background: #F4F3F0;
}

/*
    ==================================================================
    HET VAK MET DE TIJDEN: ÉÉN SMALLE LABELREGEL EN ÉÉN BEDIENREGEL
    ==================================================================

      regel 1   Van          Tot            8,5 uur      <- alleen tekst
      regel 2   [− 08:00 +]  [− 16:30 +]    (×)          <- alles om te tikken

    DIT WAS DE OPZET ERVOOR:

      regel 1   Van          Tot  Kies Van en Tot  ×
      regel 2   [− 08:00 +]  [− 16:30 +]

    WAT ERAAN VERANDERD IS EN WAAROM. Het kruisje stond in de labelregel, tussen
    tekst die je niet kunt aantikken. Het is de enige knop daar, dus het las als
    een letter in de zin ernaast, en het stond niet op de regel met de tijden
    die het leegmaakt. Nu staat het op de bedienregel, rechts van de twee rollen:
    drie dingen naast elkaar die alle drie over dezelfde reeks gaan.

    DE LABELREGEL DRAAGT NU ALLEEN NOG TEKST en is daarmee zo laag als een regel
    tekst kan zijn - geen knop erin die hem op zijn eigen hoogte trekt. Dat
    scheelt bovenop de rest zo'n tien pixels, en die pixels komen bij het raster
    terecht.

    DRIE KOLOMMEN, EN DE DERDE IS ZO BREED ALS HET KRUISJE. De labels staan
    daardoor precies boven hun eigen rol. De duur staat rechts op de labelregel
    en loopt over kolom 2 en 3 heen; zou hij een eigen kolom krijgen, dan werd
    die kolom zo breed als "Kies Van en Tot" en versprong de hele indeling zodra
    er een tijd gekozen werd.

    DE LABELS KOMEN UIT DIT BESTAND EN NIET MEER UIT DE ROL ZELF. Tijdrol heeft
    daarvoor de parameter ToonLabel gekregen; Label blijft wél meegaan, want de
    rol gebruikt hem in zijn voorleesnaam en in zijn foutmeldingen. Zet je
    ToonLabel hier ooit weer aan, dan staat het label er twee keer.
*/
.reeksvak[b-9dd8ffsvxi] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    column-gap: 0.4rem;
    row-gap: 0.05rem;
    align-items: center;
}

/*
    ELK VAK STAAT OP ZIJN EIGEN PLEK, EN DAT IS GEEN SIER.

    Een grid vult zichzelf anders op volgorde van de opbouw, en dan komt de
    eerste rol in de derde kolom van de eerste regel terecht - naast de labels
    in plaats van eronder. Met deze zes regels ligt het vast, ongeacht in welke
    volgorde de opbouw ooit komt te staan.
*/
.rolkop-van[b-9dd8ffsvxi] {
    grid-row: 1;
    grid-column: 1;
}

.rolkop-tot[b-9dd8ffsvxi] {
    grid-row: 1;
    grid-column: 2 / -1;
}

.rolvak-van[b-9dd8ffsvxi] {
    grid-row: 2;
    grid-column: 1;
}

.rolvak-tot[b-9dd8ffsvxi] {
    grid-row: 2;
    grid-column: 2;
}

.reeksvak .wisknopje[b-9dd8ffsvxi] {
    grid-row: 2;
    grid-column: 3;
}

/*
    DE LABELS. Klein en grijs: ze zeggen wat er onder staat en verder niets, en
    ze mogen geen hoogte kosten die van het raster af gaat.
*/
.rolkop[b-9dd8ffsvxi] {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    min-width: 0;

    font-size: 0.7rem;
    line-height: 1.15;
    color: #6B7280;
}

/*
    DE DUUR STAAT RECHTS OP DE LABELREGEL.

    HIJ WORDT AFGEKNEPEN EN NIET AFGEBROKEN. Staat er "Kies Van en Tot" op een
    smal toestel, dan is er misschien net te weinig plek; dan komt er drie
    puntjes achter in plaats van dat de regel in tweeën breekt en de balk alsnog
    een regel hoger wordt. De hele tekst blijft in de zwevende uitleg staan.
*/
.reeksduur[b-9dd8ffsvxi] {
    margin-left: auto;
    padding-bottom: 0;

    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 0.72rem;
    font-weight: 600;
    color: #55606B;
}

/*
    HET VAK OM ÉÉN ROL HEEN. Bestaat alleen om die rol een plek in het grid te
    geven; een grid plaatst alleen zijn eigen kinderen, en de rol is een eigen
    component.

    ZET NOOIT BEIDE ROLLEN IN ÉÉN VAK. Dan zijn ze samen één gridkind, staan ze
    allebei in kolom 1 en blijft kolom 2 leeg - dat is deze indeling al eens
    eerder overkomen.

    .rollen BESTAAT NOG WEL en is iets anders: het paneel van een bestaand blok
    gebruikt hem, en daar staan de twee rollen in een flexrij. Haal die klasse
    dus niet uit app.css weg.
*/
.rolvak[b-9dd8ffsvxi] {
    min-width: 0;
}

/*
    DE ROL VULT ZIJN VAK, EN DE KEUZELIJST VULT WAT ER IN DE ROL OVERBLIJFT.

    Een gridkolom is hier bijna de helft van de balk - op een iPhone zo'n 160
    pixels - en daar gaan twee knoppen vanaf. Zonder deze regels houdt de
    keuzelijst de breedte van zijn eigen tekst aan; is die breder dan wat er over
    is, dan steekt de rol buiten zijn kolom en schuift de rechterrol over de rand.

    min-width: 0 HOORT ER OVERAL BIJ. Een flexkind krimpt standaard niet onder
    zijn eigen inhoud, en dan gebeurt het alsnog.

    DE KNOPPEN KRIMPEN JUIST NIET MEE. Wordt het krap, dan gaat het van de
    keuzelijst af en niet van de knoppen: een − of + die je niet raakt, is
    erger dan een tijd die krap staat.

    De rol is een eigen component; ::deep is nodig om er vanaf hier bij te kunnen.
*/
.reeksvak[b-9dd8ffsvxi]  .tijdrol {
    min-width: 0;
    gap: 0;
}

.reeksvak[b-9dd8ffsvxi]  .rolregel {
    min-width: 0;
    gap: 0.2rem;
}

/*
    DE ROLLEN ZIJN HIER LAGER DAN ELDERS IN DE APP.

    In app.css is de keuzelijst --raakvlak (44px) hoog. Dat is de goede maat op
    een scherm waar ruimte is; deze balk ligt óver het raster heen, dus elke
    pixel die hij hoger is, is een pixel uren die je niet ziet.

    2.25rem IS 36 PIXELS en dat is precies de maat van de − en + ernaast. De
    drie samen vormen zo één blok van gelijke hoogte, en 36 is nog steeds te
    raken met een duim. LAGER DAN DIT NIET: dan gaat het mistikken beginnen, en
    een verkeerd gekozen tijd merk je pas op de loonstrook.
*/
.reeksvak[b-9dd8ffsvxi]  .rolkeuze {
    flex: 1 1 auto;
    min-width: 0;

    min-height: 2.25rem;
    padding: 2px 4px;
    font-size: 1rem;
}

.reeksvak[b-9dd8ffsvxi]  .rolknop {
    flex: 0 0 auto;

    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.15rem;
}

/*
    DE KNOP OVER DE VOLLE BREEDTE EN TEGEN DE ROLLEN AAN.

    Hij stond in een rij die mocht afbreken, met een eigen tussenruimte erboven.
    Dat leverde bij een lange soortnaam ("Feestdag vastleggen op ma 14 sep") een
    tweede regel op die er niet altijd was - en dan verspringt de hele balk
    tijdens het invullen.
*/
.reeksknoppen[b-9dd8ffsvxi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.reeksknoppen .knop[b-9dd8ffsvxi] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.6rem 0.8rem;
    font-size: 0.95rem;

    /* ALTIJD ÉÉN REGEL. "Feestdag vastleggen op ma 14 sep" brak op een smal
       toestel in tweeën, en dan werd de balk hoger zodra je iets aantikte. Te
       lang wordt afgekort met puntjes; welke dag het is, staat ook in de kolom
       die zwart staat. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
    HET KRUISJE ACHTER DE DUUR: de gekozen tijden weg.

    STOND ALS TEKSTKNOP "Leegmaken" NAAST VASTLEGGEN. Twee knoppen naast
    elkaar waarvan de ene vastlegt en de andere weggooit, is één mistik van
    elkaar verwijderd. Nu staat hij bij de tijden waar hij over gaat.

    HIJ STAAT NU OP DE REGEL MET DE ROLLEN en niet meer tussen de labels. Daar
    hoort hij: hij maakt leeg wat er in die twee rollen staat, en op de
    labelregel was hij de enige knop tussen tekst die je niet kunt aantikken.

    EVEN HOOG ALS DE ROLLEN ERNAAST (2.25rem, 36 pixels). Drie dingen naast
    elkaar op één regel horen dezelfde hoogte te hebben, anders leest het als
    iets wat er per ongeluk bij staat.

    ZACHT VAN KLEUR. Dit is geen hoofdhandeling: vastleggen is de knop waar het
    oog heen hoort te gaan. Vandaar een grijze rand in plaats van een rood vlak
    - en er gaat ook niets weg wat al vastligt, alleen wat je aan het kiezen
    bent.
*/
.wisknopje[b-9dd8ffsvxi] {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 2.25rem;
    height: 2.25rem;

    margin-bottom: 0;
    padding: 0;

    border: 1px solid #C9C6BF;
    border-radius: 50%;
    background: #FFFFFF;

    font: inherit;
    font-size: 1rem;
    line-height: 1;
    color: #55606B;
    cursor: pointer;
}

/*
    UIT IS ECHT UIT. Waaróm hij uit staat, staat in de zwevende uitleg (title)
    - zie Wisuitleg in Weekraster.razor.
*/
.wisknopje:disabled[b-9dd8ffsvxi] {
    opacity: 0.4;
    cursor: default;
}

/* Op een aanraakscherm een slag groter - en precies even groot als de − en +
   ernaast, zie de media query onderaan dit bestand. Lopen die twee maten uit
   elkaar, dan staat het kruisje een paar pixels hoger of lager dan de rollen
   en leest de regel als drie losse dingen. */
@media (hover: none) and (pointer: coarse) {
    .wisknopje[b-9dd8ffsvxi] {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.15rem;
    }
}

/*
    ==================================================================
    DE AANWIJZING EN DE BOTSINGSMELDING ZWEVEN BOVEN DE BALK
    ==================================================================

    ZE STONDEN ONDERAAN IN DE BALK, en dat was de helft van de fout: de
    aanwijzing verdween bij de eerste keuze, de balk werd drie regels lager, en
    de knop Vastleggen schoof omlaag. Een botsing deed het omgekeerde: de balk
    werd hoger en het raster kromp onder je vinger.

    NU STAAN ZE BUITEN DE OPBOUW (position: absolute), net boven de bovenrand
    van de balk. Ze liggen dan over de regels Weektotaal, Norm en Saldo heen -
    bij de aanwijzing is de week nog leeg en staat daar overal nul, en een
    botsing is precies het ene wat je op dat moment moet lezen. De balk zelf
    is daardoor altijd even hoog, en de knop staat altijd op dezelfde plek.

    pointer-events: none: de melding is om te lezen, en een tik erdoorheen komt
    zo gewoon in het raster aan.
*/
.onderbalkmelding[b-9dd8ffsvxi] {
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: 100%;
    z-index: 1;

    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    pointer-events: none;
}

.onderbalkmelding .reekshint[b-9dd8ffsvxi] {
    padding: 0.35rem 0.5rem;

    border: 1px solid #16201C;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    background: #F4F3F0;
    box-shadow: 0 -2px 6px rgba(22, 32, 28, 0.12);
}

.onderbalkmelding .reeksmelding[b-9dd8ffsvxi] {
    box-shadow: 0 -2px 6px rgba(22, 32, 28, 0.15);
}

/* GEEN flex-basis: 100% MEER. Dat stond er om in een RIJ een eigen regel af
   te dwingen; .onderbalk is nu een KOLOM, en daar slaat flex-basis op de
   HOOGTE - de hint werd zo net zo hoog als de hele balk en duwde de knop uit
   beeld. In een kolom staat elk kind toch al op een eigen regel. */
.reekshint[b-9dd8ffsvxi] {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.3;
    color: #6B7480;
}

/* Zelfde verhaal als bij .reekshint hierboven: geen flex-basis in een kolom. */
.reeksmelding[b-9dd8ffsvxi] {
    margin: 0;
    padding: 0.35rem 0.5rem;

    border-left: 4px solid #8A2F2F;
    border-radius: 4px;
    background: #FBF2F2;

    font-size: 0.78rem;
    line-height: 1.3;
    color: #5E2020;
}

/*
    DE MEDEDELING BOVEN DE KNOP: er is iets weggehaald omdat je op een andere
    dag begon (meerdere blokken kies je per dag - zie WisAndereDagen in
    Weekraster.razor).

    GEEN ROOD: er is niets misgegaan, het is de afspraak. Wel opvallend genoeg
    om te lezen, want er staat daarna minder dan je net aantikte. Vandaar
    oker, dezelfde kleur als de wachtbalk bovenaan de app.
*/
.reeksmededeling[b-9dd8ffsvxi] {
    margin: 0;
    padding: 0.35rem 0.5rem;

    border-left: 4px solid #B8892B;
    border-radius: 4px;
    background: #FFF3D6;
    box-shadow: 0 -2px 6px rgba(22, 32, 28, 0.15);

    font-size: 0.78rem;
    line-height: 1.3;
    color: #5A4310;
}

/*
    EEN FOUT IN DE OPZET VALT OP. Niet een lichte regel onderaan die je over het
    hoofd ziet, want dan blijft er een raster staan dat niet klopt zonder dat
    iemand het merkt.
*/
.rasterfout[b-9dd8ffsvxi] {
    padding: 0.6rem 0.7rem;

    border: 1px solid #C58F8F;
    border-left: 4px solid #8A2F2F;
    border-radius: 6px;
    background: #FBF2F2;

    font-size: 0.85rem;
    line-height: 1.35;
    color: #5E2020;
}

.rasterfout p[b-9dd8ffsvxi] {
    margin: 0 0 0.3rem;
}

.rasterfout p:last-child[b-9dd8ffsvxi] {
    margin-bottom: 0;
}

/*
    DE MELDING VAN DE KOP.

    Wat er niet klopt aan de periode-indeling, of wat er misging met raster.js.

    Staat ONDER het raster en niet erboven. Erboven zou het grid een regel
    omlaag schuiven op het moment dat deze melding verschijnt, en dan begint het
    raster niet meer op elke schermgrootte op dezelfde hoogte - precies wat er
    met de statusberichten misging.

    OPVALLEND GENOEG OM TE LEZEN: een grijs regeltje zou hier niets oplossen.
*/
.strookfout[b-9dd8ffsvxi] {
    /* Krimpt niet mee, om dezelfde reden als .onderbalk: een melding die
       half wordt afgeknipt, is erger dan geen melding. */
    flex: 0 0 auto;

    margin: 0.5rem 0 0;
    padding: 0.5rem 0.7rem;

    border: 1px solid #C58F8F;
    border-left: 4px solid #8A2F2F;
    border-radius: 6px;
    background: #FBF2F2;

    font-size: 0.8rem;
    line-height: 1.35;
    color: #5E2020;
}

/*
    Op een aanraakscherm is alles een slag groter: mikken met een vinger op een
    kolom van een centimeter breed lukt alleen als de knoppen dat toelaten.
*/
@media (hover: none) and (pointer: coarse) {
    .raster[b-9dd8ffsvxi] {
        --r1: 2.8rem;
        --r2: 2.6rem;
    }

    /* DE TWEE VASTE BREEDTES HOREN OP .urenscherm en niet op .raster: daar
       wordt --vastekolommen mee uitgerekend. */
    .urenscherm[b-9dd8ffsvxi] {
        --soortbreedte: 5rem;
        --uurbreedte: 1.7rem;
    }

    .soortstrook .soortknop[b-9dd8ffsvxi] {
        padding: 0.4rem 0.3rem;
    }

    /* DE ROLLEN EN HET KRUISJE HOUDEN DEZELFDE MAAT. 2.5rem is 40 pixels: een
       slag ruimer dan op een pc, en nog steeds laag genoeg dat deze balk niet
       over de weekregels onderin het raster valt. Verander je er één, verander
       dan ook .wisknopje hierboven - anders staat het kruisje scheef naast de
       rollen. */
    .reeksvak[b-9dd8ffsvxi]  .rolkeuze {
        min-height: 2.5rem;
    }

    .reeksvak[b-9dd8ffsvxi]  .rolknop {
        width: 2.5rem;
        height: 2.5rem;
    }

    /* Met een vinger mikken op anderhalve centimeter breed gaat niet; op een
       aanraakscherm zijn de lipjes een slag groter. Hoger én breder, want een
       knop die wel hoog maar smal is, mis je nog steeds. */
    .lipje[b-9dd8ffsvxi] {
        --lipjehoogte: 4.2rem;

        width: 2rem;
        font-size: 1.5rem;
    }
}

/* ============================================================
   Alleen kijken: een week die vastligt
   ============================================================

   In een ingediende of verwerkte week staan de rollen op slot (zie de
   vergrendelde onderbalk in Weekraster.razor en .rolslotvak in css/app.css).
   Hier: het slotje in de blokken, de rand om het aangetikte blok, en de gele
   regel op de plek van de knop Vastleggen.
*/

/*
    HET SLOTJE IN DE EERSTE CEL VAN ELK BLOK. Klein en in de hoek: het mag de
    kleur van de soort niet afdekken, want die vertelt wát er ligt. Een wit
    rondje eronder houdt het leesbaar op elke soortkleur, licht of donker.
*/
.celslot[b-9dd8ffsvxi] {
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 1;
    pointer-events: none;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #444441;
}

.celslot svg[b-9dd8ffsvxi] {
    width: 9px;
    height: 9px;
}

/*
    HET AANGETIKTE BLOK: een donkere rand eromheen. Met inset-schaduwen en niet
    met een border, want een border maakt de cel smaller en dan schuift het
    kleurverloop een pixel op ten opzichte van de buren.

    Elke cel krijgt links en rechts een streep; de eerste ook bovenaan en de
    laatste onderaan. Samen is dat één kader om het hele blok.
*/
.cel.inzage[b-9dd8ffsvxi] {
    box-shadow:
        inset 2px 0 0 #16201C,
        inset -2px 0 0 #16201C;
}

.cel.inzage.inzage-begin[b-9dd8ffsvxi] {
    box-shadow:
        inset 2px 0 0 #16201C,
        inset -2px 0 0 #16201C,
        inset 0 2px 0 #16201C;
}

.cel.inzage.inzage-eind[b-9dd8ffsvxi] {
    box-shadow:
        inset 2px 0 0 #16201C,
        inset -2px 0 0 #16201C,
        inset 0 -2px 0 #16201C;
}

.cel.inzage.inzage-begin.inzage-eind[b-9dd8ffsvxi] {
    box-shadow:
        inset 2px 0 0 #16201C,
        inset -2px 0 0 #16201C,
        inset 0 2px 0 #16201C,
        inset 0 -2px 0 #16201C;
}

/*
    DE VERGRENDELDE ROL IS EVEN HOOG ALS DE GEWONE in deze balk (2.25rem, op
    een aanraakscherm 2.5rem - zie de media query hieronder). Zo verspringt er
    niets tussen een open en een vastliggende week.
*/
.reeksvak[b-9dd8ffsvxi]  .rolslotvak {
    min-height: 2.25rem;
    font-size: 1rem;
}

/*
    DE GELE REGEL MET HET SLOTJE staat waar in een open week de knop
    Vastleggen staat. Geel en niet rood: er gaat niets mis, zo hoort het te
    zijn. Hij staat ÍN de balk en niet erboven zwevend zoals .onderbalkmelding,
    want hij is er altijd zolang de week vastligt.
*/
.slotregel[b-9dd8ffsvxi] {
    display: flex;
    align-items: center;
    gap: 0.4rem;

    margin-top: 0.35rem;
    padding: 0.45rem 0.6rem;

    background: #FAEEDA;
    border: 1px solid #EFD3A3;
    border-radius: 8px;

    font-size: 0.85rem;
    line-height: 1.3;
    color: #633806;
}

.slotregelteken[b-9dd8ffsvxi] {
    flex: 0 0 auto;
}

.slotregeltekst[b-9dd8ffsvxi] {
    min-width: 0;
}

@media (hover: none) and (pointer: coarse) {
    .reeksvak[b-9dd8ffsvxi]  .rolslotvak {
        min-height: 2.5rem;
    }
}
/* app/Pages/Dag.razor.rz.scp.css */
/*
    Kopregel van het dagscherm.

    HET PROBLEEM: "wo 2 sep" werd afgekapt tot "wo 2 s", met het pijltje ›
    direct erachter. Dat laatste is het bewijs: de rij knijpt de tekst niet af,
    het element doet het zelf. In app.css staat op .dagnaam een harde width of
    een max-width met overflow: hidden.

    WAAROM DE VORIGE POGING NIETS DEED: die zette min-width: max-content. Een
    min-width verliest het van een width - de browser rekent eerst de opgegeven
    breedte uit en knipt de inhoud daarbinnen af. De opgegeven breedte moet dus
    zelf losgelaten worden, en dat is wat width: auto en max-width: none hier
    doen.

    DE INDELING VAN .dagkop BLIJFT VAN app.css. Een eerdere versie van dit
    scherm nam wél de rij-indeling over en brak daarmee dingen die er niets mee
    te maken hadden; die fout niet nog eens.

    ALS HET HIERNA NOG STEEDS AFKAPT, dan komt de breedte niet van .dagnaam
    maar van .dagtitel of .dagkop. Zichtbaar te maken met de ontwikkelaars-
    gereedschappen: rechtermuisknop op de datum, "element inspecteren", en in
    het paneel Berekend kijken welke regel de breedte zet. Dat is één blik en
    scheelt opnieuw gokken.
*/

/* De datum krijgt de breedte van zijn eigen tekst en niets anders. width: auto
   en max-width: none maken de opgegeven breedte uit app.css los; zonder die
   twee regels blijft alle overige opmaak hieronder zonder effect. */
.dagnaam[b-v2is6799no] {
    width: auto;
    max-width: none;
    min-width: max-content;
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

/* De pijltjes houden hun eigen maat: krimpen ze mee, dan wordt het raakvlak
   te klein om op een telefoon nog te treffen. */
.dagtitel .pijl[b-v2is6799no] {
    flex: 0 0 auto;
}

/* Het blok om de datum heen: de twee pijltjes met de datum ertussen.

   RUIMER DAN VOORHEEN, EN DAT IS DE REPARATIE. De pijltjes stonden tegen de
   datum aan geplakt, waardoor "wo 2 sep" werd afgekapt tot "wo 2 s" en het
   pijltje er direct achter stond - je las dan een halve datum met een teken
   ernaast en moest raden welke dag je voor je had.

   DRIE DINGEN DOEN HET WERK, en ze zijn alle drie nodig:
     min-width: max-content  - het blok wordt zo breed als zijn inhoud vraagt en
                               laat zich niet meer samendrukken door de rij
     flex: 1 1 auto          - het krijgt de ruimte die er in de kop over is
     gap                     - lucht tussen de pijltjes en de datum, zodat het
                               drie losse dingen zijn en geen woordbrij

   HET RAAKVLAK VAN DE PIJLTJES BLIJFT: de gap is ruimte ernaast, geen kleinere
   knop. Ze staan verder uit elkaar en zijn even goed te raken.

   DE INDELING VAN .dagkop BLIJFT VAN app.css. Een eerdere versie nam die over
   en brak daarmee dingen die er niets mee te maken hadden; die fout niet nog
   eens. Kapt het hierna nog steeds af, dan zet .dagkop een vaste breedte en is
   dát de plek - te zien met "element inspecteren" op de datum, in het paneel
   Berekend. */
.dagtitel[b-v2is6799no] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;

    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: max-content;
    overflow: visible;
}

/* Wat lucht om de datum zelf, zodat hij ook bij een lange maandnaam niet tegen
   de pijltjes aan komt te staan. */
.dagtitel .dagnaam[b-v2is6799no] {
    padding: 0 0.15rem;
}

/*
    HET HELE-DAG-PANEEL STOND HIER, EN HET IS WEG.

    Dit scherm had een venster met "hele dag gewerkt", "hele dag ziek", "hele dag
    verlof" en "dag leegmaken", met opmaak voor .heledagknop.gekozen en
    .paneeltoelichting. Alle vier die handelingen zitten nu in het raster zelf:
    de soort in kolom 1, het vinkje "Gehele dag" eronder en de knop "Dag
    leegmaken" daar weer onder.

    DE OPMAAK VAN HET BEVESTIGINGSVENSTER STAAT NU IN Weekraster.razor.css. Kom
    je ergens nog .heledagknop of .paneeltoelichting tegen die naar dit scherm
    wijst, dan is dat een overblijfsel hiervan.
*/

/*
    DE ZEVEN DAGEN VAN DE WEEK, bovenin het dagscherm. Zelfde gedachte als de
    weekbalk op het weekscherm: rechtstreeks naar een andere dag, en in één blik
    zien waar de week begint en eindigt.

    ZEVEN HOKJES OP EEN TELEFOON van 320 px: dat is krap. Vandaar flex met
    gelijke delen en een minimum van 38 px - kleiner is met een duim niet
    betrouwbaar te raken. Past het niet, dan mag de strook afbreken naar een
    tweede regel; liever twee regels dan hokjes die niemand raakt.
*/
.dagenstrook[b-v2is6799no] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    margin: 0.25rem 0 0.5rem;
}

/* KLEINER DAN DE EERSTE VERSIE. Die rekte zeven hokjes over de volle breedte
   uit (flex: 1 1 0), waardoor ze op een gewoon toestel bijna een centimeter
   hoog werden en het scherm domineerden terwijl ze alleen maar navigatie zijn.
   Nu krijgen ze de maat van hun eigen inhoud, net als de weekbalk op het
   weekscherm.

   38 x 34 px BLIJFT DE ONDERGRENS. Kleiner is met een duim niet betrouwbaar te
   raken; dat is geen smaak maar de reden dat je anders steeds de verkeerde dag
   opent. */
.daghokje[b-v2is6799no] {
    flex: 0 0 auto;
    min-width: 38px;
    min-height: 34px;
    padding: 0.1rem 0.35rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;

    border: 1px solid #B9BEC4;
    border-radius: 6px;
    background: #FFFFFF;

    font: inherit;
    color: inherit;
    cursor: pointer;
}

.daghokje-naam[b-v2is6799no] {
    font-size: 0.6rem;
    text-transform: lowercase;
    opacity: 0.75;
}

.daghokje-cijfer[b-v2is6799no] {
    font-size: 0.78rem;
    font-weight: 600;
}

/* De dag waar je nu in zit. Vol gekleurd en niet alleen een randje: tussen zes
   andere randjes valt een randje niet op. */
.daghokje-nu[b-v2is6799no] {
    background: #16201C;
    border-color: #16201C;
    color: #FFFFFF;
}

.daghokje-nu .daghokje-naam[b-v2is6799no] {
    opacity: 0.9;
}

/*
    DE KNOP 'WEEK INDIENEN' ONDERAAN.

    Ruim onder het raster, met een streep erboven: dit is de afsluiting van het
    scherm en hoort niet tussen het invoerwerk te staan. Wie nog aan het
    invullen is, komt hem niet tegen; wie klaar is, scrollt vanzelf tot hier.
*/
.indienregel[b-v2is6799no] {
    margin-top: 1.25rem;
    padding-top: 0.85rem;
    border-top: 1px solid #D5D2CB;
}

.indienregel .knop[b-v2is6799no] {
    width: 100%;
}

/* Ja en nee naast elkaar, met de bevestiging als knop en het afzien als
   tekstknop: de zwaarste handeling ziet er ook het zwaarst uit. */
.indienknoppen[b-v2is6799no] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.indienknoppen .knop[b-v2is6799no] {
    flex: 1 1 auto;
    width: auto;
}

/*
    TEKST BOVEN DE TABEL, GROTER OP DE TELEFOON.

    Kop, datumregel en toelichting stonden op de maat die op een pc prima leest
    en op een iPhone niet. Deze regels zetten alleen de LETTERGROOTTE; kleur,
    gewicht en plaatsing blijven van app.css, zodat de schermen er hetzelfde uit
    blijven zien.

    HOORT DIT NIET GEWOON IN app.css? Op zich wel - het is dezelfde afspraak op
    vier schermen. Maar app.css raken betekent het cachegetal in index.html
    ophogen en het risico dat er iets meeverandert wat er niets mee te maken
    heeft. Zodra je dit blok naar app.css verhuist, kunnen de vier kopieën weg;
    tot die tijd: pas je er hier een aan, pas ze dan alle vier aan.
*/
.periodekop h1[b-v2is6799no],
.schermkop h1[b-v2is6799no],
.jaartitel[b-v2is6799no],
.jaarkeuze[b-v2is6799no] {
    font-size: 1.35rem;
}

.periodedatums[b-v2is6799no] {
    font-size: 1rem;
}

.knoptoelichting[b-v2is6799no] {
    font-size: 0.95rem;
    line-height: 1.4;
}

.melding[b-v2is6799no] {
    font-size: 0.98rem;
    line-height: 1.4;
}

/* Op een aanraakscherm nog een tikje ruimer; zie de toelichting in
   Urentabel.razor.css over waarom de voorwaarde naar de aanwijzer kijkt en
   niet naar de schermbreedte. */
@media (hover: none) and (pointer: coarse) {
    .periodekop h1[b-v2is6799no],
    .schermkop h1[b-v2is6799no],
    .jaartitel[b-v2is6799no],
    .jaarkeuze[b-v2is6799no] {
        font-size: 1.45rem;
    }

    .periodedatums[b-v2is6799no] {
        font-size: 1.05rem;
    }

    .pijl[b-v2is6799no] {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Dezelfde ondergrens voor de zeven dagblokjes en de knoppen in het
   hele-dag-paneel. Zeven hokjes van 44 punten passen op een iPhone; op de
   smalste toestellen valt de rij netjes af naar een tweede regel. */
@media (hover: none) and (pointer: coarse) {
    .daghokje[b-v2is6799no] {
        min-width: 44px;
        min-height: 44px;
    }

    .daghokje-naam[b-v2is6799no] {
        font-size: 0.68rem;
    }

    .daghokje-cijfer[b-v2is6799no] {
        font-size: 0.9rem;
    }

    .indienregel .knop[b-v2is6799no],
    .indienknoppen .knop[b-v2is6799no],
    .indienknoppen .tekstknop[b-v2is6799no] {
        min-height: 44px;
    }
}

/* DE LOSSE WEEKBALK IS HIER WEG.

   Dit scherm had zijn eigen nagebouwde balk, met de kleur en de maten twee keer
   opgeschreven - hier en in de tabelcomponent. Nu tekent Schermframe hem, net
   als op de drie andere schermen. Eén plek om te wijzigen in plaats van twee
   die uit elkaar lopen. */

/*
    DE RUIMTE ONDER HET SCHERM VOOR DE MELDINGSBALK STAAT NU IN css/app.css,
    bij .dagscherm:has(.meldingsbalk).

    HIER STOND EEN VASTE padding-bottom VAN 5 TOT 5.75rem, ALTIJD, ook zonder
    melding. Dat was ruim negentig pixels lege strook onderaan het ingavescherm
    - drie halve uren die het raster niet kon laten zien. De ruimte wordt nu
    alleen vrijgehouden als er echt een melding staat.

    WAAROM IN app.css EN NIET HIER: .meldingsbalk is het element van een ander
    component. Een scoped stylesheet plakt zijn eigen kenmerk aan de selector,
    en wat er dan binnen :has() van .meldingsbalk overblijft, is niet te
    voorspellen. In app.css is het een gewone selector.

    ZET HIER GEEN padding-bottom OP .dagscherm TERUG. Dit bestand wordt ná
    app.css geladen en wint dan met dezelfde specificiteit - de ruimte is er dan
    weer altijd, zonder dat er een fout verschijnt.
*/
/* app/Pages/Jaaroverzicht.razor.rz.scp.css */
/*
    TEKST BOVEN DE TABEL, GROTER OP DE TELEFOON.

    Kop, datumregel en toelichting stonden op de maat die op een pc prima leest
    en op een iPhone niet. Deze regels zetten alleen de LETTERGROOTTE; kleur,
    gewicht en plaatsing blijven van app.css, zodat de schermen er hetzelfde uit
    blijven zien.

    HOORT DIT NIET GEWOON IN app.css? Op zich wel - het is dezelfde afspraak op
    vier schermen. Maar app.css raken betekent het cachegetal in index.html
    ophogen en het risico dat er iets meeverandert wat er niets mee te maken
    heeft. Zodra je dit blok naar app.css verhuist, kunnen de vier kopieën weg;
    tot die tijd: pas je er hier een aan, pas ze dan alle vier aan.
*/
.periodekop h1[b-cpeqorlmbt],
.schermkop h1[b-cpeqorlmbt],
.jaartitel[b-cpeqorlmbt],
.jaarkeuze[b-cpeqorlmbt] {
    font-size: 1.35rem;
}

.periodedatums[b-cpeqorlmbt] {
    font-size: 1rem;
}

.knoptoelichting[b-cpeqorlmbt] {
    font-size: 0.95rem;
    line-height: 1.4;
}

.melding[b-cpeqorlmbt] {
    font-size: 0.98rem;
    line-height: 1.4;
}

/* Op een aanraakscherm nog een tikje ruimer; zie de toelichting in
   Urentabel.razor.css over waarom de voorwaarde naar de aanwijzer kijkt en
   niet naar de schermbreedte. */
@media (hover: none) and (pointer: coarse) {
    .periodekop h1[b-cpeqorlmbt],
    .schermkop h1[b-cpeqorlmbt],
    .jaartitel[b-cpeqorlmbt],
    .jaarkeuze[b-cpeqorlmbt] {
        font-size: 1.45rem;
    }

    .periodedatums[b-cpeqorlmbt] {
        font-size: 1.05rem;
    }

    .pijl[b-cpeqorlmbt] {
        min-width: 44px;
        min-height: 44px;
    }
}
/* app/Pages/Perioden.razor.rz.scp.css */
/*
    TEKST BOVEN DE TABEL, GROTER OP DE TELEFOON.

    Kop, datumregel en toelichting stonden op de maat die op een pc prima leest
    en op een iPhone niet. Deze regels zetten alleen de LETTERGROOTTE; kleur,
    gewicht en plaatsing blijven van app.css, zodat de schermen er hetzelfde uit
    blijven zien.

    HOORT DIT NIET GEWOON IN app.css? Op zich wel - het is dezelfde afspraak op
    vier schermen. Maar app.css raken betekent het cachegetal in index.html
    ophogen en het risico dat er iets meeverandert wat er niets mee te maken
    heeft. Zodra je dit blok naar app.css verhuist, kunnen de vier kopieën weg;
    tot die tijd: pas je er hier een aan, pas ze dan alle vier aan.
*/
.periodekop h1[b-4yaogztwzf],
.schermkop h1[b-4yaogztwzf],
.jaartitel[b-4yaogztwzf],
.jaarkeuze[b-4yaogztwzf] {
    font-size: 1.35rem;
}

.periodedatums[b-4yaogztwzf] {
    font-size: 1rem;
}

.knoptoelichting[b-4yaogztwzf] {
    font-size: 0.95rem;
    line-height: 1.4;
}

.melding[b-4yaogztwzf] {
    font-size: 0.98rem;
    line-height: 1.4;
}

/* Op een aanraakscherm nog een tikje ruimer; zie de toelichting in
   Urentabel.razor.css over waarom de voorwaarde naar de aanwijzer kijkt en
   niet naar de schermbreedte. */
@media (hover: none) and (pointer: coarse) {
    .periodekop h1[b-4yaogztwzf],
    .schermkop h1[b-4yaogztwzf],
    .jaartitel[b-4yaogztwzf],
    .jaarkeuze[b-4yaogztwzf] {
        font-size: 1.45rem;
    }

    .periodedatums[b-4yaogztwzf] {
        font-size: 1.05rem;
    }

    .pijl[b-4yaogztwzf] {
        min-width: 44px;
        min-height: 44px;
    }
}
/* app/Pages/Week.razor.rz.scp.css */
/*
    Opmaak die alleen dit scherm nodig heeft: de balk met de weken van de
    periode, en de pijltjes naast het weeknummer.

    WAAROM EEN .razor.css: Blazor hangt aan elke selector hierin het merkteken
    van deze component, dus deze regels raken geen ander scherm en hoeven
    nergens te worden aangemeld. De rest van de opmaak (.schermkop, .pijl,
    .periodedatums) blijft van app.css - dit bestand neemt niets over wat het
    niet hoeft te weten.
*/

/* Het weeknummer met een pijltje aan weerskanten, in het midden van de kop.
   Dezelfde vorm als de datum op het dagscherm, zodat 'een stapje terug' er
   overal hetzelfde uitziet. */
.weektitel[b-76gds2uq3y] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 0;
}

.weektitel h1[b-76gds2uq3y] {
    margin: 0;
    white-space: nowrap;
}

/* De weken van de periode. Vier of vijf hokjes, dus dit past altijd op één
   regel; wrap staat er voor het geval een periode ooit langer wordt. */
.weekstrook[b-76gds2uq3y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin: 0.25rem 0 0.75rem;
}

.weekstrook .periodenaam[b-76gds2uq3y] {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.75;
    margin-right: 0.2rem;
}

/* Een raakvlak van 34 px: kleiner is op een telefoon niet betrouwbaar te
   raken, en dit zijn knoppen die je met je duim gebruikt. */
.weekhokje[b-76gds2uq3y] {
    min-width: 34px;
    min-height: 34px;
    padding: 0.2rem 0.45rem;

    border: 1px solid #B9BEC4;
    border-radius: 6px;
    background: #FFFFFF;

    font: inherit;
    font-size: 0.82rem;
    color: inherit;
    cursor: pointer;
}

/* De week waar je nu in zit. Vol gekleurd en niet alleen een randje: een
   randje verdwijnt tussen vier andere randjes. */
.weekhokje-nu[b-76gds2uq3y] {
    background: #16201C;
    border-color: #16201C;
    color: #FFFFFF;
    font-weight: 700;
}

/*
    TEKST BOVEN DE TABEL, GROTER OP DE TELEFOON.

    Kop, datumregel en toelichting stonden op de maat die op een pc prima leest
    en op een iPhone niet. Deze regels zetten alleen de LETTERGROOTTE; kleur,
    gewicht en plaatsing blijven van app.css, zodat de schermen er hetzelfde uit
    blijven zien.

    HOORT DIT NIET GEWOON IN app.css? Op zich wel - het is dezelfde afspraak op
    vier schermen. Maar app.css raken betekent het cachegetal in index.html
    ophogen en het risico dat er iets meeverandert wat er niets mee te maken
    heeft. Zodra je dit blok naar app.css verhuist, kunnen de vier kopieën weg;
    tot die tijd: pas je er hier een aan, pas ze dan alle vier aan.
*/
.periodekop h1[b-76gds2uq3y],
.schermkop h1[b-76gds2uq3y],
.jaartitel[b-76gds2uq3y],
.jaarkeuze[b-76gds2uq3y] {
    font-size: 1.35rem;
}

.periodedatums[b-76gds2uq3y] {
    font-size: 1rem;
}

.knoptoelichting[b-76gds2uq3y] {
    font-size: 0.95rem;
    line-height: 1.4;
}

.melding[b-76gds2uq3y] {
    font-size: 0.98rem;
    line-height: 1.4;
}

/* Op een aanraakscherm nog een tikje ruimer; zie de toelichting in
   Urentabel.razor.css over waarom de voorwaarde naar de aanwijzer kijkt en
   niet naar de schermbreedte. */
@media (hover: none) and (pointer: coarse) {
    .periodekop h1[b-76gds2uq3y],
    .schermkop h1[b-76gds2uq3y],
    .jaartitel[b-76gds2uq3y],
    .jaarkeuze[b-76gds2uq3y] {
        font-size: 1.45rem;
    }

    .periodedatums[b-76gds2uq3y] {
        font-size: 1.05rem;
    }

    .pijl[b-76gds2uq3y] {
        min-width: 44px;
        min-height: 44px;
    }
}

/* De weekhokjes op een aanraakscherm: 44 punten is de ondergrens waarbij je ze
   met een duim betrouwbaar raakt. */
@media (hover: none) and (pointer: coarse) {
    .weekhokje[b-76gds2uq3y] {
        min-width: 44px;
        min-height: 44px;
        font-size: 0.95rem;
    }
}

/*
    ==================================================================
    RUIMTE ONDER HET SCHERM VOOR DE MELDINGSBALK
    ==================================================================

    Zelfde afspraak als op het dagscherm: de meldingsbalk hangt vast aan de
    onderkant van het venster en ligt óver de pagina heen, dus er moet ruimte
    onder het scherm blijven.

    DE MARGE IS ER ALTIJD, ook zonder melding. Reserveer je de ruimte alleen
    wanneer er iets staat, dan verspringt het scherm alsnog zodra de melding
    verschijnt - en dat is precies wat deze opzet moest oplossen.
*/
.weekscherm[b-76gds2uq3y] {
    padding-bottom: 5rem;
}

@media (hover: none) and (pointer: coarse) {
    .weekscherm[b-76gds2uq3y] {
        padding-bottom: 5.75rem;
    }
}