:root{
    color-scheme:light;
    /* --rose-deep haalde 4,32:1 op --rose-tint (lokaalchip, pauzeregel), net
       onder de 4,5 die WCAG AA eist. #BC3776 haalt 4,55:1 en is met het blote
       oog dezelfde kleur (nagerekend 2026-09-12). */
    --rose:#E0508F; --rose-deep:#BC3776; --rose-tint:#FCE8F1; --rose-line:#F6C9DD;
    /* --faint stond op #BDB2C6 en haalde 2,03:1 op wit, terwijl WCAG AA 4,5:1
       eist. Juist dit token draagt de datums, aantallen en labels. Nagerekend
       op de lichtste achtergrond die we gebruiken (--bg): #7D698D geeft
       4,55:1 daar en 4,91:1 op wit, met dezelfde lavendeltint zodat het
       visueel nog steeds secundair leest (audit 2026-09-12). */
    /* --muted stond op #7A6A84 en zakte onder AA op de lichtste vlakken die we
       gebruiken: de lila en amber verlopen van de vakantiekaarten (4,15:1) en
       de aandachtspuntkaart (4,43:1). #73647D haalt overal minstens 4,55:1. */
    --plum:#2E1A3A; --muted:#73647D; --faint:#7D698D;
    --bg:#FAF5F8; --card:#FFFFFF; --line:#EFE3EA;
    --lav:#EDE6F7; --lav-ink:#5E3FA6;
    --lime:#D9F58F; --lime-soft:#EEF9D2; --lime-ink:#3F6212; --lime-faint:#FBFDF3;
    --amber:#FFF1CC; --amber-ink:#7A4E00;
    --red:#F0A8A8; --red-soft:#FBE7E7; --red-ink:#8A1F1F;
    --blue-ink:#1F5C8A; --green-ink:#2F6B36;
    --r:10px;
    --font:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif;
    --font-display:'Baloo 2','Manrope','Segoe UI',system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  /* Springt over de kop en de tabbalk heen naar de inhoud. Onzichtbaar tot je
     hem met Tab bereikt; dan is hij een gewone knop linksboven. */
  .skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--plum); color:#fff;
        padding:12px 16px; border-radius:0 0 8px 0; font-weight:800; text-decoration:none}
  .skip:focus{left:0}
  body{margin:0; min-height:100vh; background:var(--bg); color:var(--plum); font-family:var(--font); font-size:15px; line-height:1.3; -webkit-font-smoothing:antialiased}
  button{font-family:var(--font); cursor:pointer}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--lav-ink); outline-offset:2px}
  svg{display:inline-block; vertical-align:middle}

  .app{max-width:440px; margin-inline:auto}
  .content{padding-inline:16px; padding-block:0 32px}

  .hero{position:relative; overflow:hidden; color:#fff;
    /* Eerste stop was #FF7FBF: wit daarop haalt 2,32:1, terwijl grote tekst
       3:1 moet halen en de kindnaam er precies overheen loopt. #FF51A8 geeft
       3,00:1 en blijft dezelfde roze (nagerekend 2026-09-12). */
    background:linear-gradient(135deg,#FF51A8 0%,#F03D8F 48%,#8E4FE8 100%);
    padding-inline:18px; padding-block:14px 12px; border-radius:0 0 20px 20px;
    box-shadow:0 8px 24px rgba(240,61,143,.22)}
  .hero .deco{position:absolute; pointer-events:none}
  .hero .deco.f1{width:110px;height:110px; right:-24px; top:-34px; opacity:.28; transform:rotate(18deg)}
  .hero .deco.n1{width:44px;height:44px; right:12px; top:22px; opacity:.95; transform:rotate(8deg)}
  .title{position:relative; font-family:var(--font-display); line-height:.95; margin:0; display:flex; align-items:center; justify-content:space-between}
  .title .name{display:flex; align-items:center; gap:7px; font-size:30px; font-weight:800; letter-spacing:-.01em; text-shadow:0 2px 0 rgba(110,47,208,.28)}
  .title .name svg{width:22px;height:22px}
  .title .sub{font-size:14px; font-weight:700; opacity:.9; margin-top:2px}
  /* opacity .85 op wit tegen roze gaf 1,81:1. Vol wit op een donkerder vlak
     haalt ruim AA, en het raakgebied is nu 44px hoog. */
  .logout-link{position:relative; font-size:12px; font-weight:800; color:#fff; background:rgba(0,0,0,.28); border:0; border-radius:8px; padding:10px 12px; min-height:44px; display:inline-flex; align-items:center}
  .header-right{display:flex; align-items:center; gap:10px}
  .child-switcher{display:flex; align-items:center; gap:6px}
  /* 34px is te klein voor een duim; het raakgebied is nu 44px zonder dat de
     avatar groter wordt (::after steekt buiten de rand uit). */
  .child-switcher a{position:relative; display:block; width:34px; height:34px; border-radius:50%; overflow:visible; border:2px solid rgba(255,255,255,.55); opacity:.6; transition:opacity .15s, border-color .15s}
  /* inset:-5px maakte van een 38px avatar een vlak van 48px, terwijl de gap
     6px is: 4px overlap, dus een tik in het midden opende het verkeerde kind.
     -3px geeft 44px zonder overlap. */
  .child-switcher a::after{content:""; position:absolute; inset:-3px; border-radius:50%}
  .child-switcher a img{border-radius:50%}
  .child-switcher a.active{opacity:1; border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.25)}
  .child-switcher img{width:100%; height:100%; object-fit:cover; display:block}
  .ui-ic{width:20px; height:20px; flex:none}
  /* Hoofdmenu (kebab) rechtsboven: subtiel, klapt zonder JS een paneel uit.
     Het paneel is position:fixed zodat de overflow:hidden van .hero het niet
     afknipt; het lijnt uit met de rechterrand van de 440px-brede app. */
  .hoofdmenu{position:relative; display:flex}
  /* Alleen de drie puntjes, geen kader: dat oogde rommelig. Een lichte cirkel
     verschijnt pas bij indrukken of als het menu openstaat. */
  .hoofdmenu>summary{list-style:none; width:44px; height:44px; padding:0; margin:0; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; color:#fff;
    background:transparent; border-radius:50%; transition:background .15s; -webkit-tap-highlight-color:transparent}
  .hoofdmenu>summary::-webkit-details-marker{display:none}
  .hoofdmenu>summary .ui-ic{width:22px; height:22px}
  .hoofdmenu>summary:hover{background:rgba(255,255,255,.16)}
  .hoofdmenu[open]>summary{background:rgba(255,255,255,.24)}
  .menu-paneel{position:fixed; top:62px; right:max(12px, calc(50vw - 220px + 10px)); z-index:60;
    min-width:212px; background:#fff; border-radius:14px; padding:6px;
    box-shadow:0 18px 44px rgba(46,26,58,.30), 0 0 0 1px var(--line);
    display:flex; flex-direction:column; gap:2px}
  .menu-paneel a, .menu-paneel button{display:flex; align-items:center; gap:11px; width:100%;
    box-sizing:border-box; min-height:46px; padding:0 12px; border:0; border-radius:10px; background:none;
    font-size:15px; font-weight:700; color:var(--plum); text-decoration:none; text-align:left; cursor:pointer}
  .menu-paneel a:active, .menu-paneel button:active{background:var(--bg)}
  .menu-paneel .ui-ic{color:var(--rose-deep)}
  .menu-paneel form{margin:0}
  .menu-paneel .menu-uitloggen, .menu-paneel .menu-uitloggen .ui-ic{color:#B23120}
  /* Compacte icoon-actieknoppen (beheer en passkey-lijst): sparen ruimte op
     mobiel. Altijd een aria-label plus title, want er staat geen tekst in. */
  .icoon-knop{width:46px; height:46px; padding:0; display:inline-flex; align-items:center; justify-content:center;
    border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--plum); cursor:pointer}
  .icoon-knop:active{background:var(--bg)}
  .icoon-knop.gevaar{color:#B23120; border-color:#F0C9C3}

  .tabs{display:flex; gap:4px; margin-top:12px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:4px}
  .tabs a{flex:1; text-align:center; text-decoration:none; color:var(--muted); font-weight:800; font-size:14px; padding:12px 10px; min-height:44px; display:flex; align-items:center; justify-content:center; border-radius:7px}
  .tabs a.active{background:var(--plum); color:#fff}
  /* De vakantie-tab is een icoon, geen woord: de vijf tabs passen anders
     niet meer naast elkaar op een iPhone 7 (320px). */
  .tabs a.tab-icon{flex:0 0 auto; padding:6px 9px; display:flex; align-items:center; justify-content:center}
  .tabs a.tab-icon svg{width:20px; height:20px; display:block}
  /* Zes tabs moeten op een iPhone 7 (320px) passen; zonder min-width:0 kan een
     flex-item niet onder zijn tekstbreedte krimpen en vielen de twee
     icoontabs buiten beeld. */
  .tabs a{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:clip}
  @media (max-width:400px){
    .tabs{gap:2px; padding:3px}
    .tabs a{font-size:11.5px; padding:12px 2px; letter-spacing:-.01em}
    .tabs a.tab-icon{padding:5px 5px}
    .tabs a.tab-icon svg{width:17px; height:17px}
  }

  .vak-hero{margin:12px 0 16px; padding:16px; border-radius:14px; background:linear-gradient(135deg,var(--lav),var(--rose-tint)); border:1px solid var(--rose-line)}
  .vak-hero-top{display:flex; align-items:center; gap:12px; min-width:0}
  .vak-hero-top > span:last-child{min-width:0}
  .vak-hero .vak-icon{width:46px; height:46px; flex:0 0 auto; display:block}
  .vak-hero .vak-icon svg{width:100%; height:100%; display:block}
  .vak-hero-label{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--lav-ink)}
  .vak-hero-naam{font-family:var(--font-display); font-size:24px; font-weight:800; color:var(--plum); line-height:1.15}
  .vak-hero-tel{margin-top:12px; font-size:15px; font-weight:700; color:var(--plum)}
  .vak-hero-tel b{font-family:var(--font-display); font-size:22px; color:var(--rose-deep)}
  .vak-hero-datum{margin-top:4px; font-size:13px; color:var(--muted); font-weight:600}

  .vak-lijst{display:flex; flex-direction:column; gap:8px}
  .vak-kaart{display:flex; align-items:center; gap:12px; padding:12px; background:var(--card); border:1px solid var(--line); border-radius:var(--r)}
  .vak-kaart .vak-icon{width:34px; height:34px; flex:0 0 auto; display:block}
  .vak-kaart .vak-icon svg{width:100%; height:100%; display:block}
  .vak-kaart .vak-tekst{flex:1; min-width:0}
  .vak-naam{font-weight:800; color:var(--plum); font-size:15px}
  .vak-naam .vak-bijnaam{font-weight:700; color:var(--muted); font-size:13px}
  .vak-datum{font-size:13px; color:var(--muted); font-weight:600; margin-top:2px}
  .vak-rechts{text-align:right; flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:3px}
  .vak-badge{font-size:11px; font-weight:800; padding:3px 8px; border-radius:999px; white-space:nowrap}
  .vak-badge.bezig{background:var(--lime); color:var(--lime-ink)}
  .vak-badge.komt{background:var(--lav); color:var(--lav-ink)}
  .vak-badge.voorbij{background:var(--bg); color:var(--faint)}
  .vak-dagen{font-size:12px; color:var(--muted); font-weight:700; white-space:nowrap}
  /* Was opacity:.55 op de hele kaart. Dat dimt ook de tekst, en bracht die op
     2,17:1. Nu dimt alleen de achtergrond en staat de tekstkleur expliciet. */
  .vak-kaart.voorbij{background:var(--bg)}
  .vak-kaart.voorbij .vak-datum,.vak-kaart.voorbij .vak-naam{color:var(--muted)}
  /* Smal scherm: naam en datum krijgen de volle breedte en de labels zakken
     naar een eigen regel. Anders brak "vr 9 okt t/m vr 16 okt" middenin af. */
  @media (max-width:400px){
    .vak-kaart{flex-wrap:wrap; row-gap:6px}
    .vak-rechts{flex-direction:row; align-items:center; gap:8px; width:100%; justify-content:flex-start; padding-left:46px}
    .vak-datum{white-space:nowrap}
  }
  /* Jaarwissel: bewust klein en rechts naast de titel. Verschijnt alleen als
     er meer dan één schooljaar in de database staat, dus bij een kind in het
     eerste leerjaar zie je hem helemaal niet. */
  .titelrij{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:14px 0 6px; flex-wrap:wrap}
  .titelrij h2{margin:0}
  .jaarkiezer{display:flex; gap:4px; flex-wrap:wrap}
  .jaarkiezer a{font-size:11px; font-weight:800; color:var(--muted); text-decoration:none; padding:9px 12px; min-height:44px; display:inline-flex; align-items:center; border-radius:999px; background:var(--card); border:1px solid var(--line); white-space:nowrap}
  .jaarkiezer a.actief{background:var(--plum); color:#fff; border-color:var(--plum)}
  .historiebalk{display:flex; align-items:center; gap:7px; margin:8px 0 4px; padding:7px 9px; border-radius:9px; background:var(--lav); color:var(--lav-ink); font-size:12px; font-weight:700}
  .historiebalk svg{width:14px; height:14px; flex:none}
  .vak-voet{margin-top:14px; font-size:12px; color:var(--muted); line-height:1.5}

  /* Toetsweken krijgen amber in plaats van lila, zodat ze op het eerste
     gezicht te onderscheiden zijn van vakanties: het een is vrij, het ander
     juist niet. */
  .vak-hero.toets{background:linear-gradient(135deg,var(--amber),#FFE7C2); border-color:#F0D9A0}
  .vak-hero.toets .vak-hero-label{color:var(--amber-ink)}
  .vak-hero.toets .vak-hero-tel b{color:#B36A00}
  .vak-kaart.toets .vak-badge.komt{background:var(--amber); color:var(--amber-ink)}
  .vak-kaart.toets .vak-badge.bezig{background:#F5B942; color:#4A2C00}

  /* Twee regels, bewust. Alles stond eerst op één regel en werd dan met
     puntjes afgekapt zodra er een melding bij kwam, precies wanneer die
     melding er het meest toe deed. Regel 1 is altijd het tijdstip, regel 2
     verschijnt alleen als er iets te zeggen valt en mag gewoon afbreken. */
  .freshbar{margin:8px 0 4px; font-size:11px; font-weight:700; color:var(--muted)}
  .freshline{display:flex; align-items:center; gap:6px; padding:2px}
  .freshdot{width:6px; height:6px; border-radius:50%; flex:none; background:var(--faint)}
  .freshbar-ok .freshdot{background:#5A9E45}
  .freshbar-warning .freshdot{background:var(--amber-ink)}
  .freshbar-stale .freshdot{background:#C2453A}
  .freshbar-never .freshdot{background:var(--lav-ink)}
  .freshtext{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .freshnote{display:flex; align-items:flex-start; gap:7px; margin-top:3px; padding:7px 9px; border-radius:9px; font-size:12px; font-weight:700; line-height:1.35; white-space:normal}
  .freshnote svg{width:14px; height:14px; flex:none; margin-top:1px}
  .freshnote-alert{background:var(--red-soft); color:var(--red-ink)}
  .freshnote-warn{background:var(--amber); color:var(--amber-ink)}
  .freshnote-info{background:var(--card); border:1px solid var(--line); color:var(--muted); font-weight:600}
  .refresh-form{display:flex; flex:none}
  /* Het icoon blijft 22px, maar het raakgebied is 44x44 (::after steekt
     buiten de knop uit). Dezelfde truc als bij de afwezigheidsbadge. */
  .refresh-icon-btn{position:relative; border:0; background:transparent; color:var(--muted); width:22px; height:22px; border-radius:50%; display:grid; place-items:center; padding:0; flex:none}
  .refresh-icon-btn::after{content:""; position:absolute; inset:-11px}
  .refresh-icon-btn:hover{background:var(--lav)}
  .refresh-icon-btn:disabled{opacity:.6}
  .refresh-icon-btn svg{width:13px;height:13px}
  .refresh-icon-btn .spinner{display:none}
  .refresh-icon-btn.loading svg{display:none}
  .refresh-icon-btn.loading .spinner{display:inline-block}
  .spinner{width:12px; height:12px; border-radius:50%; border:2px solid rgba(46,26,58,.25); border-top-color:var(--plum); animation:spin .7s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* Kolommen moeten meegroeien met .navbtn. Die ging naar 44px voor de duim,
     en met 32px-kolommen schoof de dagtitel onder de linkerknop en stak de
     rechterknop de marge uit (gemeten op 320px, heraudit 2026-09-12). */
  .daybar{display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:4px; margin-top:6px}
  /* 44x44 is de ondergrens voor een duim; dit waren 32px. */
  .navbtn{width:44px;height:44px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--plum); display:grid; place-items:center; text-decoration:none}
  .navbtn svg{width:16px;height:16px}
  .daytitle{text-align:center; min-width:0}
  .daytitle h2{margin:0; font-size:16px; font-weight:800; line-height:1.2}
  .daytitle .today{display:block; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--rose-deep); margin-bottom:1px}
  .daytitle .weeknr{display:block; font-size:11px; font-weight:700; color:var(--muted); margin-top:1px}
  .strip{display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-top:8px}
  .strip a{border:1px solid var(--line); background:var(--card); border-radius:8px; padding:3px 0; font-size:12px; font-weight:700; color:var(--muted); line-height:1.15; text-decoration:none; text-align:center; display:block}
  .strip a b{display:block; color:var(--plum); font-weight:800; font-size:13px}
  .strip a.free{background:var(--lime-soft); border-color:var(--lime); color:var(--lime-ink)} .strip a.free b{color:var(--lime-ink)}
  .strip a.today{background:var(--rose-tint); border-color:var(--rose-line); color:var(--rose-deep)} .strip a.today b{color:var(--rose-deep)}
  .strip a.sel{background:var(--plum); border-color:var(--plum); color:#fff} .strip a.sel b{color:#fff}
  .summary{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:8px; font-size:13px; font-weight:700; color:var(--muted)}
  .summary b{color:var(--plum); font-weight:800}
  .summary svg{width:14px;height:14px; color:var(--rose-deep)}
  .summary .dot{color:var(--faint)}

  /* No overflow:hidden here (was here purely to round the row list's
     corners) — iOS Safari has a well-known quirk where position:fixed
     descendants inside an overflow-clipped ancestor render clipped to (or
     positioned relative to) that ancestor instead of the viewport. That
     broke the afwezigheid badge's popup on mobile (invisible/no-op tap)
     while it looked fine on desktop Chrome — reported live 2026-09-10.
     Corner-rounding is done on the first/last row instead. */
  .list{margin-top:8px; background:var(--card); border:1px solid var(--line); border-radius:var(--r)}
  .list > *:first-child{border-top-left-radius:var(--r); border-top-right-radius:var(--r)}
  .list > *:last-child{border-bottom-left-radius:var(--r); border-bottom-right-radius:var(--r)}
  .record-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border-top:1px solid var(--line)}
  .record-row:first-child{border-top:0}
  .record-title{font-size:14px; font-weight:800; color:var(--plum)}
  .record-sub{font-size:12px; font-weight:700; color:var(--muted); margin-top:1px}
  .record-side{text-align:right; flex:none}
  .record-value{font-size:14px; font-weight:800; color:var(--rose-deep)}
  /* Cijferkleuren, op verzoek: onvoldoende rood, twijfelzone blauw, goed
     groen. De grens ligt op 5,5 en 7. */
  .record-value.onvoldoende{color:var(--red-ink)}
  .record-value.voldoende{color:var(--blue-ink)}
  .record-value.goed{color:var(--green-ink)}
  .record-date{font-size:11px; font-weight:700; color:var(--faint); margin-top:1px}
  /* Docentopmerkingen komen in hetzelfde veld als het cijfer terecht. Een
     hele zin naast de datum duwt de rij uit elkaar, dus die zetten we klein
     onder de regel in plaats van ernaast. */
  .record-opmerking{margin-top:4px; font-size:12px; font-weight:600; color:var(--lav-ink); background:var(--lav); padding:5px 8px; border-radius:7px; line-height:1.4}

  /* Cijfers per vak. Eén platte lijst van bijna 300 regels was onleesbaar:
     driekwart daarvan zijn door Magister berekende gemiddeldes en
     letterbeoordelingen die tussen de echte cijfers stonden. */
  .vaksamenvatting{display:flex; align-items:center; gap:14px; margin:0 0 10px; padding:11px 14px; background:var(--card); border:1px solid var(--line); border-radius:var(--r)}
  .vsgetal{display:flex; flex-direction:column; align-items:center; flex:none; line-height:1.05}
  .vsgetal b{font-family:var(--font-display); font-size:30px}
  .vslabel{font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); margin-top:3px}
  .vsfeiten{display:flex; flex-direction:column; gap:2px; min-width:0; padding-left:14px; border-left:1px solid var(--line)}
  .vsfeiten span{font-size:12px; font-weight:600; color:var(--muted)}
  .vsfeiten b{font-weight:800; color:var(--plum)}
  .vsfeiten b.goed{color:var(--green-ink)}
  .vaklijst{display:flex; flex-direction:column; gap:8px}
  .vakkaart{border:1px solid var(--line); border-radius:var(--r); background:var(--card); overflow:hidden}
  .vakkaart > summary{list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:10px; padding:11px 12px}
  .vakkop{flex:1; min-width:0}
  .vakrij{display:flex; align-items:baseline; gap:10px}
  .vakkaart > summary::-webkit-details-marker{display:none}
  .vakkaart .chevron{width:13px; height:13px; flex:none; color:var(--faint); transition:transform .15s; margin-top:5px}
  .vakkaart .chevron svg{width:100%; height:100%; display:block}
  .vakkaart[open] .chevron{transform:rotate(90deg)}
  .vaknaam{flex:1; min-width:0; font-size:15px; font-weight:800; color:var(--plum); margin:0; display:inline}
  .vakcijfer{font-family:var(--font-display); font-size:19px; font-weight:800}
  .vakaantal{font-size:11px; font-weight:700; color:var(--faint); white-space:nowrap}
  .vakdetails{border-top:1px solid var(--line); padding:2px 0}
  .vakregel{display:flex; align-items:baseline; gap:10px; padding:7px 12px}
  .vakregel + .vakregel{border-top:1px solid var(--bg)}
  .vakregel .wat{flex:1; min-width:0; font-size:13px; font-weight:700; color:var(--plum)}
  .vakregel .wanneer{font-size:11px; font-weight:700; color:var(--faint); white-space:nowrap}
  .vakregel .punt{font-size:14px; font-weight:800; white-space:nowrap}
  .vakstrip{display:flex; flex-wrap:wrap; gap:5px; padding:8px 12px; border-top:1px solid var(--bg)}
  .vakstrip .kop{font-size:11px; font-weight:800; color:var(--muted); margin-right:2px}
  .vakstrip .letter{font-size:11px; font-weight:800; padding:2px 7px; border-radius:999px; background:var(--bg); color:var(--muted)}
  .vakperioden{display:flex; flex-wrap:wrap; gap:5px; padding:8px 12px; border-top:1px solid var(--bg)}
  .vakperioden .pchip{font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; background:var(--bg); color:var(--muted)}

  /* Laatste cijfers: de vraag waarmee een kind de pagina opent is "wat heb ik
     net gehaald", niet "hoe staat vak X ervoor". Dus die eerst. */
  .kopje{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:16px 0 6px}
  .laatste{display:flex; flex-direction:column; gap:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
  .lrij{display:flex; align-items:baseline; gap:9px; padding:9px 12px}
  .lrij + .lrij{border-top:1px solid var(--line)}
  .lrij .lvak{font-size:14px; font-weight:800; color:var(--plum); flex:1; min-width:0}
  .lrij .lwat{font-size:11px; font-weight:700; color:var(--muted); white-space:nowrap}
  .lrij .ldatum{font-size:11px; font-weight:700; color:var(--faint); white-space:nowrap}
  .lrij .lpunt{font-size:16px; font-weight:800; white-space:nowrap; min-width:34px; text-align:right}
  .weging{font-size:10px; font-weight:800; padding:2px 5px; border-radius:5px; background:var(--lav); color:var(--lav-ink); white-space:nowrap}
  .weging.zwaar{background:var(--amber); color:var(--amber-ink)}
  .inhalen{font-size:10px; font-weight:800; padding:2px 5px; border-radius:5px; background:var(--red-soft); color:var(--red-ink)}
  .vakperiodes-kop{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px}
  .vakperiodes-kop .pk{font-size:10px; font-weight:800; padding:2px 6px; border-radius:999px; background:var(--bg); color:var(--muted)}
  .pijl{width:13px; height:13px; flex:none}
  .pijl svg{width:100%; height:100%; display:block}
  .pijl.omhoog{color:var(--green-ink)}
  .pijl.omlaag{color:var(--red-ink)}
  .nodig{display:inline-flex; align-items:center; gap:5px; margin-top:6px; padding:4px 9px; border-radius:999px; background:var(--amber); color:var(--amber-ink); font-size:11px; font-weight:800}
  .nodig.onhaalbaar{background:var(--red-soft); color:var(--red-ink)}
  .nodig.krap{background:var(--red-soft); color:var(--red-ink)}
  .nodig.haalbaar{background:var(--amber); color:var(--amber-ink)}
  .nodig.veilig{background:var(--lime-soft); color:var(--lime-ink)}
  .minpunt{font-size:10px; font-weight:800; padding:2px 6px; border-radius:999px; background:var(--red-soft); color:var(--red-ink); white-space:nowrap}

  /* "Ga ik over?" De uitslag staat dicht, de onderbouwing klapt open. Een kind
     wil eerst het antwoord, pas daarna waarom. */
  .overgang{margin:0 0 12px; border-radius:var(--r); border:1px solid var(--line); background:var(--card); overflow:hidden}
  .overgang > summary{list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:10px; padding:11px 12px}
  .overgang > summary::-webkit-details-marker{display:none}
  .overgang .chevron{width:13px; height:13px; flex:none; color:var(--faint); transition:transform .15s; margin-top:4px}
  .overgang .chevron svg{width:100%; height:100%; display:block}
  .overgang[open] .chevron{transform:rotate(90deg)}
  .overgang.bevorderd{border-color:var(--lime); background:var(--lime-soft)}
  .overgang.bespreekgeval{border-color:var(--amber); background:var(--amber)}
  .overgang.risico{border-color:var(--red); background:var(--red-soft)}
  .ovkop{flex:1; min-width:0}
  .ovtitel{display:block; font-size:16px; font-weight:800; color:var(--plum)}
  .ovtellers{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px}
  .ovteller{font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--card); color:var(--muted)}
  .ovteller b{font-family:var(--font-display); font-size:14px; margin-right:2px}
  .ovteller.goed{color:var(--lime-ink)}
  .ovteller.krap{color:var(--amber-ink)}
  .ovteller.slecht{color:var(--red-ink)}
  .ovdetails{border-top:1px solid var(--line); padding:10px 12px 12px; background:var(--card)}
  .ovuitleg{margin:0 0 8px; font-size:13px; font-weight:700; color:var(--plum); line-height:1.45}
  .ovruimte{margin:0 0 8px; font-size:12px; font-weight:700; color:var(--lime-ink)}
  .ovlijst{margin:0 0 8px; padding-left:17px; font-size:12px; font-weight:600; line-height:1.5}
  .ovlijst.slecht{color:var(--red-ink)}
  .ovlijst.goed{color:var(--lime-ink)}
  .ovvakken{display:flex; flex-wrap:wrap; gap:5px; margin:0 0 9px}
  .ovvak{font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; background:var(--bg); color:var(--muted)}
  .ovvak b{color:var(--plum)}
  .ovvak i{font-style:normal; color:var(--red-ink); font-weight:800}
  .ovnoot{margin:0; font-size:11px; font-weight:600; color:var(--faint); line-height:1.5}
  .ovvak i.nog{color:var(--faint); font-weight:600}
  /* Determinatie: de balk loopt van 5,5 tot de 7,5 uit de regeling. Vol is de
     drempel gehaald; dat leest sneller dan een percentage. */
  .detbalk{height:9px; border-radius:999px; background:var(--bg); overflow:hidden; margin:2px 0 4px}
  .detbalk i{display:block; height:100%; border-radius:999px; background:var(--plum)}
  .detbalk i.goed{background:var(--lime-ink)}
  .detbalk i.krap{background:var(--amber-ink)}
  .detbalk i.neutraal{background:var(--muted)}
  .detschaal{display:flex; justify-content:space-between; font-size:10px; font-weight:700; color:var(--faint); margin:0 0 10px}
  .detkop{margin:0 0 5px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
  .detroutes{margin:0 0 10px; padding-left:18px; font-size:12px; font-weight:600; color:var(--plum); line-height:1.5}
  .detroutes li{margin-bottom:6px}
  .detroutes b{font-weight:800}
  .ovnoot + .ovnoot{margin-top:5px}

  .record-row{align-items:flex-start}
  .record-main{min-width:0; flex:1}

  .absence-group{margin-bottom:8px; border-radius:var(--r); border:1px solid var(--line); overflow:hidden}
  .absence-group.excused{background:var(--lime-soft); border-color:var(--lime)}
  .absence-group.unexcused{background:var(--red-soft); border-color:var(--red)}
  /* Aandachtspunt: huiswerk of materiaal vergeten, uitgestuurd. Geen
     afwezigheid, dus niet groen en niet rood maar amber. */
  .absence-group.aandacht{background:var(--amber); border-color:#F0D9A0}
  .absence-group.aandacht .absence-summary-title{color:var(--amber-ink)}
  .absence-group.aandacht .absence-code-chip{border-color:#C98A2E; color:#8A5A00}
  .absence-group.unknown{background:var(--card)}
  .absence-group > summary{list-style:none; cursor:pointer; padding:11px 12px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
  .absence-group > summary::-webkit-details-marker{display:none}
  .absence-group.aandacht > summary{color:var(--amber-ink)}
  .absence-group.aandacht.single{color:var(--amber-ink)}
  .absence-group.excused > summary{color:var(--lime-ink)}
  .absence-group.unexcused > summary{color:var(--red-ink)}
  .absence-group .chevron{flex:none; width:11px; height:11px; align-self:center; opacity:.7; transition:transform .15s ease}
  .absence-group .chevron svg{width:100%; height:100%; display:block}
  .absence-group[open] .chevron{transform:rotate(90deg)}
  .absence-summary-title{font-size:14px; font-weight:800}
  .absence-summary-date{font-size:12px; font-weight:700; opacity:.85}
  .absence-summary-right{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:1px}
  .absence-summary-count{font-size:12px; font-weight:700; opacity:.85}
  .absence-status-label{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.02em}
  .absence-code-chip{font-size:10px; font-weight:800; padding:1px 7px; border-radius:999px; background:rgba(255,255,255,.6); box-shadow:inset 0 0 0 1px currentColor; margin-top:1px}
  .absence-details{padding:0 12px 10px 34px; display:flex; flex-direction:column; gap:4px}
  .absence-detail-row{font-size:12px; font-weight:700; color:var(--muted)}
  .absence-group.single{padding:11px 12px}
  .absence-group.excused.single{color:var(--lime-ink)}
  .absence-group.unexcused.single{color:var(--red-ink)}
  .absence-group.single .absence-summary{display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap}
  .absence-group.single .absence-summary-left{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
  .absence-group.single .absence-detail-row{margin-top:3px; padding-left:0}
  /* Hier stond opacity:.8, wat de tekst op 4,10:1 bracht. */
  .absence-group.excused.single .absence-detail-row,
  .absence-group.unexcused.single .absence-detail-row{color:inherit}

  .month-stats{margin:8px 0; display:flex; flex-direction:column; gap:6px}
  /* De maandkop hoort zichtbaar bij de kaarten eronder, niet bij een losse
     lijst maandbalken bovenaan de pagina. */
  .absence-month{margin:0 0 18px}
  .absence-month .month-stats-row{margin-bottom:8px}
  .month-stats-row{padding:8px 10px; background:var(--card); border:1px solid var(--line); border-radius:var(--r)}
  .month-stats-title{font-size:12px; font-weight:800; color:var(--plum); text-transform:capitalize; margin-bottom:5px}
  .month-stats-chips{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px}
  .month-stats-chips .chip.aandacht{background:var(--amber); color:var(--amber-ink)}
  .chip{font-size:11px; font-weight:800; padding:3px 8px; border-radius:999px; white-space:nowrap}
  .chip.total{background:var(--lav); color:var(--lav-ink)}
  .chip.excused{background:var(--lime-soft); color:var(--lime-ink); border:1px solid var(--lime)}
  .chip.unexcused{background:var(--red-soft); color:var(--red-ink); border:1px solid var(--red)}
  .chip.neutral{background:var(--bg); color:var(--muted); border:1px solid var(--line)}
  .row{display:grid; grid-template-columns:28px 44px 24px minmax(0,1fr) auto; column-gap:8px; align-items:center; padding:7px 10px; min-height:47px; height:auto; border-top:1px solid var(--line); position:relative}
  .row:first-child{border-top:0}
  .hn{width:26px;height:26px; border-radius:7px; background:#fff; border:1px solid #E7D8E3; box-shadow:0 1px 2px rgba(46,26,58,.10); color:var(--lav-ink); font-size:13px; font-weight:800; display:grid; place-items:center}
  .row.past .hn{background:#fff; border:1px solid #E7D8E3; color:var(--faint)}
  .row.now .hn{background:var(--rose); color:#fff}
  .row.now::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--rose)}
  /* Zelfde reden als .vak-kaart.voorbij: dimmen zonder de tekst mee te nemen. */
  .row.past{background:var(--bg)}
  .row.past .vak{color:var(--muted)}
  .row.past .sub{color:var(--muted)}
  /* Op smalle schermen alles op één regel houden en BOVENLANGS uitlijnen: de
     tijd, de vaknaam en het lokaal beginnen op dezelfde hoogte en de kolommen
     lopen recht (verzoek 2026-09-14: de tweeregelige variant liet tijd
     gecentreerd en het lokaal onderaan staan, dat oogde scheef). De vaknaam
     breekt binnen zijn eigen kolom over twee regels (zie .vak), dus ook lange
     namen als "Burgerschap en Digitalisering" passen naast het lokaal. */
  @media (max-width:400px){
    .row:not(.pauze){align-items:start}
    .row:not(.pauze) > :nth-child(5):empty{display:none}
  }
  .foutpagina{text-align:center; padding:48px 20px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); margin-top:16px}
  .foutpagina .foutcode{font-family:var(--font-display); font-size:52px; font-weight:800; color:var(--rose-deep); line-height:1}
  .foutpagina h2{margin:8px 0 6px; font-size:20px}
  .foutpagina p{margin:0 0 20px; font-size:14px; font-weight:600; color:var(--muted); line-height:1.5}
  .foutknop{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; background:var(--plum); color:#fff; text-decoration:none; font-weight:800; font-size:14px}
  .time{display:flex; flex-direction:column; line-height:1.1}
  .time .van{font-size:13px; font-weight:800}
  .time .tot{font-size:11px; font-weight:700; color:var(--muted); margin-top:2px}
  .ic{width:24px;height:24px; display:grid; place-items:center}
  .ic svg{width:24px;height:24px}
  .txt{min-width:0}
  /* Was nowrap met ellipsis in een kolom van ~94px op 320px breed. Dat werkt
     voor Engelse eenwoordsvakken (Music, Chemistry), maar een lange naam als
     "Burgerschap en Digitalisering" of "Beeldende kunst en vormgeving" (29
     tekens) hield er zo maar een tiental over. Nu twee regels, en pas daarna
     afkappen. min-height houdt de rijen even hoog voor korte vaknamen
     (gemeten 2026-09-12). */
  .vak{font-size:15px; font-weight:800; line-height:1.15; overflow:hidden;
       display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
       overflow-wrap:break-word}
  .sub{font-size:12px; font-weight:700; color:var(--muted); margin-top:2px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; line-height:1.2}
  .sub .now{color:var(--rose-deep); font-weight:800}
  .tag{font-size:10px; font-weight:800; padding:1px 6px; border-radius:5px; text-transform:uppercase; letter-spacing:.05em}
  .tag.vervallen{background:#FFE3DA; color:#A13415}
  .tag.gewijzigd{background:var(--amber); color:var(--amber-ink)}
  .vsoordeel{font-weight:800}
  .vsoordeel.goed{color:var(--lime-ink)}
  .vsoordeel.laag{color:var(--red-ink)}
  .tag.afspraak{background:#fff; color:var(--lav-ink); text-transform:none; letter-spacing:0; font-weight:700}
  .tag.melden{background:var(--red); color:var(--red-ink)}
  /* Knopje bij een toets: door naar wat je ervoor moet leren. */
  .ls-vink input{width:18px;height:18px;accent-color:var(--amber-ink)}
  .ls-kaart.af{opacity:.55}
  .ls-kaart.af ul{text-decoration:line-through}
  .leerstof-knop{font-size:11.5px; font-weight:800; text-decoration:none; padding:2px 8px; border-radius:999px; background:var(--lav); color:var(--lav-ink)}
  /* Melden bij het leerlingservicepunt: geen les, wel iets om te zien. */
  .row.meldpunt{background:var(--red-soft)}
  .row.meldpunt .vak{color:var(--red-ink)}
  .row.meldpunt .lokaal{background:var(--red); color:var(--red-ink)}
  .gc.meld{background:var(--red-soft); border-color:var(--red); color:var(--red-ink)}
  .lokaal{font-size:13px; font-weight:800; background:var(--rose-tint); color:var(--rose-deep); padding:4px 9px; border-radius:6px; white-space:nowrap; justify-self:end; display:flex; align-items:center; gap:5px}

  .absence-flag{position:relative; display:inline-flex}
  .absence-flag > summary{list-style:none; cursor:pointer; width:19px; height:19px; border-radius:999px; display:flex; align-items:center; justify-content:center; position:relative}
  .absence-flag > summary::after{content:''; position:absolute; inset:-11px}
  .absence-flag > summary::-webkit-details-marker{display:none}
  .absence-flag > summary svg{width:13px; height:13px; display:block}
  .absence-flag.excused > summary{background:var(--lime-soft); color:var(--lime-ink); box-shadow:inset 0 0 0 1px var(--lime)}
  .absence-flag.unexcused > summary{background:var(--red-soft); color:var(--red-ink); box-shadow:inset 0 0 0 1px var(--red)}
  .absence-flag.unknown > summary{background:var(--bg); color:var(--muted); box-shadow:inset 0 0 0 1px var(--line)}
  /*
   * Fixed bottom-sheet, and the backdrop+panel live INSIDE <summary> (see
   * absenceBadge() in this file) rather than as a sibling/pseudo-element
   * of <details>. Two problems this fixes, both reported live 2026-09-10:
   * 1) A .list ancestor had overflow:hidden (see .list above) — iOS
   *    Safari has a known quirk clipping/mispositioning position:fixed
   *    descendants of an overflow-clipped ancestor, so this rendered fine
   *    on desktop Chrome but showed nothing on an actual iPhone.
   * 2) Closing previously required re-finding and re-tapping the same
   *    tiny 19px icon underneath its own dark overlay. Now the backdrop
   *    itself is part of <summary>, so tapping ANYWHERE on the darkened
   *    screen closes it — any click inside <summary> toggles <details>.
   */
  .absence-flag-backdrop{display:none}
  .absence-flag[open] .absence-flag-backdrop{display:flex; position:fixed; inset:0; background:rgba(46,26,58,.35); z-index:19; align-items:flex-end; justify-content:center; padding:16px; cursor:pointer}
  .absence-flag-panel{display:block; width:100%; max-width:360px; padding:14px 16px; border-radius:var(--r); font-size:13px; font-weight:700; line-height:1.4; text-align:left; white-space:normal; box-shadow:0 12px 28px rgba(46,26,58,.3); cursor:default}
  .absence-flag.excused .absence-flag-panel{background:var(--lime-soft); color:var(--lime-ink); box-shadow:0 12px 28px rgba(46,26,58,.25), inset 0 0 0 1px var(--lime)}
  .absence-flag.unexcused .absence-flag-panel{background:var(--red-soft); color:var(--red-ink); box-shadow:0 12px 28px rgba(46,26,58,.25), inset 0 0 0 1px var(--red)}
  .absence-flag.unknown .absence-flag-panel{background:var(--card); color:var(--plum); box-shadow:0 12px 28px rgba(46,26,58,.25), inset 0 0 0 1px var(--line)}
  .absence-flag-headline{display:block}
  .absence-flag-code{display:block; margin-top:3px; opacity:.85}
  /* Was opacity:.65, wat de hint op 2,98:1 bracht. De inktkleur van de kaart
     zelf haalt zonder die transparantie 6,44:1 (lime) en 7,70:1 (rood). */
  .absence-flag-hint{display:block; margin-top:8px; font-size:11px; font-weight:700; color:inherit}
  .row.vervallen .vak{text-decoration:line-through; color:#8A231B}
  .row.pauze{grid-template-columns:28px 44px 1fr auto; min-height:28px; padding:3px 10px; background:var(--lime-faint); color:var(--muted); font-size:11.5px; font-weight:600}
  .row.pauze .pi{display:grid; place-items:center; opacity:.55} .row.pauze .pi svg{width:14px;height:14px}
  .row.pauze .pt{color:var(--muted); font-weight:600}
  .row.vrij{background:var(--lime-soft)}
  .row.vrij .hn{background:var(--lime); color:var(--lime-ink)}
  .row.vrij .vak,.row.vrij .sub{color:var(--lime-ink)}
  .row.vrij .ic{color:var(--lime-ink)} .row.vrij .ic svg{width:18px;height:18px}
  /* Uitgevallen les: het uur is vrij (lime, net als een tussenuur), maar we
     noemen wél welke les het was. Alleen "Tussenuur vrij" tonen verborg
     precies de informatie die je wilt weten. */
  .row.uitval .vak{text-decoration:line-through; color:var(--muted)}
  .row.uitval .ic{opacity:.5}

  .freeday{margin-top:8px; background:var(--lime); color:var(--lime-ink); border-radius:var(--r); padding:22px 16px; display:flex; align-items:center; gap:14px}
  .freeday svg{width:40px;height:40px; flex:none}
  .freeday h3{margin:0; font-size:20px; font-weight:800; line-height:1.1}
  .freeday a{color:var(--lime-ink); text-decoration:underline; text-underline-offset:2px; font-weight:800}
  .freeday p{margin:3px 0 0; font-size:13px; font-weight:700}
  .empty-state{text-align:center; padding:32px 16px; color:var(--muted); font-weight:700}

  form.login-form{display:flex; flex-direction:column; gap:12px; max-width:320px; margin:40px auto; padding-inline:16px}
  form.login-form input{padding:12px 14px; border-radius:8px; border:1px solid var(--line); font-size:16px}
  form.login-form button{padding:12px 14px; border-radius:8px; border:none; background:var(--plum); color:#fff; font-size:16px; font-weight:800}
  .error-text{color:#8A231B; font-size:14px; font-weight:700}
  .ok-text{color:var(--green-ink); font-size:14px; font-weight:700}
  .login-uitleg{font-size:13px; font-weight:600; color:var(--muted); margin:0}
  .login-sub{font-size:13px; font-weight:700; color:var(--rose-deep); text-decoration:none; text-align:center; margin-top:4px}
  /* Wachtwoordveld met oogje ernaast. De knop staat over het veld heen, dus
     het veld krijgt rechts wat ruimte zodat de tekst er niet onder loopt. */
  .pw-veld{position:relative; display:flex}
  .pw-veld input{flex:1; padding-right:46px}
  form.login-form button.pw-oog{position:absolute; right:4px; top:50%; transform:translateY(-50%);
    width:38px; height:38px; padding:0; background:none; color:var(--muted);
    display:grid; place-items:center; border-radius:8px}
  .pw-oog svg{width:22px; height:22px}
  /* Sterktemeter: een balkje dat vult en verkleurt, met een woord eronder. */
  .pw-meter{height:8px; border-radius:999px; background:var(--line); overflow:hidden; margin-top:-4px}
  .pw-meter i{display:block; height:100%; width:0; border-radius:999px; transition:width .2s ease, background .2s ease}
  .pw-meter-label{font-size:12px; font-weight:800; margin:-6px 0 0; min-height:15px}
  /* Passkey-knop (Face ID). Rustiger dan de plum inlogknop: een omlijnde knop
     die pas verschijnt als het apparaat passkeys ondersteunt. */
  .login-scheiding{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; font-weight:700; margin:2px 0}
  .login-scheiding::before,.login-scheiding::after{content:""; height:1px; background:var(--line); flex:1}
  form.login-form button.passkey-knop{background:#fff; color:var(--plum); border:2px solid var(--plum);
    display:flex; align-items:center; justify-content:center; gap:8px}
  .passkey-knop svg{width:20px; height:20px}
  /* Compacte, gecentreerde Face ID-knop op de login: alleen het icoon, met een
     klein bijschrift eronder. Rustiger dan een knop over de volle breedte. */
  .passkey-wrap{display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:2px}
  form.login-form button.passkey-icoonknop{width:62px; height:62px; padding:0; border-radius:50%;
    border:2px solid var(--plum); background:#fff; color:var(--plum);
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
  form.login-form button.passkey-icoonknop:active{background:var(--bg)}
  .passkey-icoonknop .ui-ic{width:32px; height:32px}
  .passkey-cap{font-size:13px; font-weight:800; color:var(--muted)}
  /* Beveiligingspagina: kaarten met account, beheer-link en passkeys. */
  .bev-wrap{max-width:520px; margin:16px auto 40px; padding-inline:16px; display:flex; flex-direction:column; gap:14px}
  .bev-account{display:flex; align-items:center; gap:12px; padding:14px 16px; background:#fff; border:1px solid var(--line); border-radius:14px}
  .bev-account>.ui-ic{width:26px; height:26px; color:var(--rose-deep); flex:none}
  .bev-label{font-size:12px; color:var(--muted); font-weight:700}
  .bev-email{font-weight:800; font-size:15px; word-break:break-all}
  .bev-rij-link{display:flex; align-items:center; gap:12px; padding:14px 16px; background:#fff; border:1px solid var(--line); border-radius:14px; text-decoration:none; color:var(--plum); font-weight:800}
  .bev-rij-link>.ui-ic{width:24px; height:24px; color:var(--rose-deep); flex:none}
  .bev-rij-link .bev-chevron{margin-left:auto; display:inline-flex}
  .bev-rij-link .bev-chevron .ui-ic{width:20px; height:20px; color:var(--muted)}
  .bev-sectie{padding:16px; background:#fff; border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; gap:12px}
  .bev-titel{display:flex; align-items:center; gap:10px; font-size:16px; margin:0}
  .bev-titel .ui-ic{width:22px; height:22px; color:var(--rose-deep); flex:none}
  form.login-form button.bev-add, .bev-add{width:100%; margin-top:2px}
  .bev-lijst{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
  .bev-item{display:flex; align-items:center; gap:12px;
    padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--bg)}
  .bev-item>.ui-ic{width:24px; height:24px; color:var(--rose-deep); flex:none}
  .bev-item .bev-item-tekst{flex:1; min-width:0}
  .bev-item .naam{font-weight:800; font-size:15px}
  .bev-item .sub{font-size:12px; color:var(--muted); font-weight:600}
  .bev-leeg{color:var(--muted); font-weight:700; font-size:14px; margin:0}
  /* Beheerpagina: elke gebruiker een kaart met knoppen, mobielvriendelijk. */
  .adm-melding{padding:10px 14px; border-radius:10px; font-weight:700; font-size:14px}
  .adm-melding.ok{background:var(--green-bg,#E6F4EA); color:var(--green-ink)}
  .adm-melding.fout{background:#FBE7E4; color:#8A231B}
  /* Elke gebruiker is een rij; acties zitten ingeklapt achter het menu-icoon. */
  .adm-kaart{border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden}
  .adm-kaart-zelf{opacity:.85}
  .adm-rij{display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:14px 16px; min-height:58px; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent}
  summary.adm-rij::-webkit-details-marker{display:none}
  .adm-kaart-zelf .adm-rij{cursor:default}
  .adm-rij-rechts{display:flex; align-items:center; gap:8px}
  .adm-rij-rechts>.ui-ic{color:var(--muted); width:22px; height:22px; transition:transform .15s}
  details.adm-kaart[open]>summary .adm-rij-rechts>.ui-ic{color:var(--plum)}
  details.adm-kaart[open]>summary{border-bottom:1px solid var(--line)}
  .adm-mail{font-weight:800; font-size:15px; word-break:break-all}
  .adm-badges{display:flex; gap:6px; flex-wrap:wrap}
  .adm-badge{font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; background:var(--line); color:var(--ink,#2b2333)}
  .adm-badge.ouder{background:#EDE6FA; color:var(--plum)}
  .adm-badge.kind{background:#F1ECF8; color:var(--muted)}
  .adm-badge.geblokkeerd{background:#FBE7E4; color:#8A231B}
  .adm-jij{font-size:11px; font-weight:800; color:var(--muted)}
  .adm-menu{display:flex; flex-direction:column; padding:6px}
  .adm-menu form{margin:0; width:100%}
  .adm-menu-item{display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box;
    min-height:50px; padding:0 12px; border:0; border-radius:10px; background:none; text-decoration:none;
    font-size:15px; font-weight:700; color:var(--plum); text-align:left; cursor:pointer}
  .adm-menu-item:active{background:var(--bg)}
  .adm-menu-item .ui-ic{color:var(--rose-deep); width:20px; height:20px}
  .adm-menu-item.gevaar, .adm-menu-item.gevaar .ui-ic{color:#B23120}
  .adm-nieuw{border:1px dashed var(--line); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:10px}
  .adm-nieuw input,.adm-nieuw select{padding:10px 12px; border-radius:8px; border:1px solid var(--line); font-size:16px}
  .adm-nieuw button{padding:11px 14px; border-radius:8px; border:none; background:var(--plum); color:#fff; font-weight:800; font-size:15px}
  .adm-titel{font-size:16px; font-weight:800; margin:0}

  .weekhead{text-align:center; margin-top:12px}
  .weekhead .label{display:block; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--rose-deep)}
  .weekhead h2{margin:1px 0 0; font-size:16px; font-weight:800}
  .week-nav{display:flex; justify-content:space-between; align-items:center; margin-top:8px}
  .week-nav a{font-size:13px; font-weight:800; color:var(--plum); text-decoration:none; padding:6px 8px}
  .weekgrid{margin-top:8px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:8px}
  .grid{display:grid; grid-template-columns:22px repeat(5,minmax(0,1fr)); gap:4px; position:relative}
  .band{border-radius:9px; margin:-3px; z-index:0}
  .band.alt{background:#F3EEF6}
  .band.today{background:var(--rose-tint); box-shadow:inset 0 0 0 1px var(--rose-line)}
  .gh{position:relative; z-index:1; border:1px solid var(--line); background:var(--card); border-radius:7px; padding:4px 0; color:var(--muted); font-size:11px; font-weight:700; text-align:center; text-decoration:none; display:block}
  .gh b{display:block; color:var(--plum); font-size:13px; font-weight:800}
  .gh.today{background:var(--plum); border-color:var(--plum); color:#fff} .gh.today b{color:#fff}
  .gn{display:grid; place-items:center; font-size:11px; font-weight:800; color:var(--faint)}
  .gn.tijd{font-size:8.5px; letter-spacing:-.3px}
  .gc{position:relative; z-index:1; min-height:44px; border-radius:7px; background:var(--card); border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font-size:9.5px; font-weight:800; color:var(--muted); padding:3px 2px; min-width:0}
  .gc span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .gc svg{width:18px;height:18px}
  /* Was opacity:.6 op de hele cel, wat de tekst op 2,35:1 bracht. */
  .gc.past{background:var(--bg); color:var(--muted)}
  .gc.now{border-color:var(--rose); box-shadow:0 0 0 1px var(--rose); background:#fff}
  .gc.free{background:var(--lime-soft); border-color:var(--lime); color:var(--lime-ink)}
  .gpl{position:relative; z-index:1; display:grid; place-items:center} .gpl svg{width:13px;height:13px; color:var(--rose-deep)}
  .legend{display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:center; margin-top:8px; font-size:11px; font-weight:700; color:var(--muted)}
  .legend i{display:inline-block; width:11px;height:11px; border-radius:3px; vertical-align:-1px; margin-right:4px}

  @media (min-width:720px){
    body{padding-block:28px}
    .app{background:var(--card); border-radius:22px; box-shadow:0 20px 50px rgba(46,26,58,.14), 0 0 0 1px var(--line); overflow:hidden}
    .content{background:var(--bg)}
  }