/* Ludendo v3 · /ouder/: alleen wat de ouderpagina extra nodig heeft. De rest komt uit /style.css (v3-basis).
   Klassen beginnen met s-o- (scherm, ouder), zodat ze nooit botsen met de gedeelde s-klassen. Alle maten in em: ze
   schalen mee met het telefoonscherm, net als de rest van de schermen. Kleuren alleen via de --s-tokens, dus licht
   en donker kloppen vanzelf. */

/* Kindwissel rechts in de kop van het scherm: twee rondjes, het gekozen kind in accent. Eén tik om te wisselen. */
.s-o-kind { display: flex; gap: .35em; flex-direction: row !important; }
.s-o-kind i { width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: .875em; background: var(--s-paneel); color: var(--s-grijs); box-shadow: 0 0 0 1px var(--s-lijn); }
.s-o-kind i.is-gekozen { background: var(--s-accent-zacht); color: var(--s-accent-tekst); box-shadow: none; }

/* De som onder een cijfer: rustig, zoals een rekenregel in een schrift. */
.s-o-som { font-size: .8125em; color: var(--s-grijs); padding: .55em .75em; border-radius: .75em; background: var(--s-grond); font-variant-numeric: tabular-nums; }

/* Een bericht schrijven: het veld, wanneer het wordt gelezen, en de knop. Onderaan het scherm, boven de tabbalk. */
.s-o-schrijf { margin-top: auto; display: flex; flex-direction: column; gap: .6em; padding: .9em; border-radius: 1.25em; background: var(--s-paneel); box-shadow: var(--s-schaduw); }
.s-o-veld { font-size: .9375em; padding: .7em .85em; border-radius: .875em; border: 1px solid var(--s-accent); line-height: 1.4; }
.s-o-wanneer { display: flex; flex-direction: column; gap: .15em; padding: .6em .8em; border-radius: .875em; background: var(--s-accent-zacht); }
.s-o-wanneer b { font-size: .875em; color: var(--s-accent-tekst); }
.s-o-wanneer small { font-size: .8125em; color: var(--s-grijs); }

/* De aanvraag volgen: drie punten onder elkaar, verbonden door een lijn. Klaar = gevulde stip in accent. */
.s-o-volg { list-style: none; display: flex; flex-direction: column; gap: .55em; margin-top: .3em; }
.s-o-volg li { position: relative; display: flex; flex-direction: column; padding-left: 1.6em; font-size: .875em; }
.s-o-volg li::before { content: ""; position: absolute; left: 0; top: .2em; width: .9em; height: .9em; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--s-lijn); background: var(--s-paneel); transition: background-color 300ms var(--zacht), box-shadow 300ms var(--zacht); }
.s-o-volg li:not(:last-child)::after { content: ""; position: absolute; left: calc(.45em - 1px); top: 1.25em; bottom: -.55em; width: 2px; background: var(--s-lijn); }
.s-o-volg li.is-klaar::before { background: var(--s-accent); box-shadow: inset 0 0 0 2px var(--s-accent); }
.s-o-volg small { color: var(--s-grijs); }
.s-o-volg b { font-weight: 600; }

/* Een opdracht in het blad: naam en stand onder elkaar, het label rechts (geen rondje ervoor, dus niet nth-child(2)). */
.s-o-rij > span:first-child { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.s-o-rij .s-label { flex: none; }

/* Bij de cijfers wisselt Mark in stap 3 naar Eva. Het eindbeeld (zonder JS) is stap 3, dus Eva is daar gekozen. */
.toneel--o-cijfers:not([data-stap="3"]) .s-o-kind i:first-child,
.toneel--o-cijfers[data-stap="3"] .s-o-kind i:last-child { background: var(--s-accent-zacht); color: var(--s-accent-tekst); box-shadow: none; }
.toneel--o-cijfers[data-stap="3"] .s-o-kind i:first-child { background: var(--s-paneel); color: var(--s-grijs); box-shadow: 0 0 0 1px var(--s-lijn); }
.s-o-kind i { transition: background-color 300ms var(--zacht), color 300ms var(--zacht); }

/* Het placeholder in het schrijfveld na het versturen: grijs, zoals in een echt invoerveld. */
.s-o-veld .lv-nieuw { color: var(--s-grijs); }
.s-hwrij.s-o-rij > span.s-label { display: inline-block; flex: none; }

/* Na het versturen (stap 3) is de regel "leest dit maandag" van het veld weg; dan neemt hij ook geen ruimte meer in. */
.toneel--o-bericht[data-stap="3"] .s-o-wanneer { display: none; }

/* Ziek melden: het onderblad (.s-blad--ziek) staat in style.css, want de beginpagina gebruikt het ook. */
/* Bericht (19:15): het gesprek schuift omhoog als er iets bij komt; het bericht van Mark neemt pas ruimte in als het
   verstuurd is, zodat er geen leeg gat boven het schrijfveld staat. */
html.beweeg .toneel--o-bericht:not([data-stap="3"]) .s-verstuurd { display: none; }
html.beweeg .toneel--o-bericht[data-stap="3"] .s-verstuurd { animation: lv-op 480ms var(--zacht) both; }
.toneel--o-bericht .s-o-schrijf { margin-top: 0; flex: none; }
/* Verlof op smal: één regel uit 'Eerst de regels', zodat de aanvraag met het besluit boven de tabbalk past */
@media (max-width: 639px) { .toneel--o-verlof .s-regelvink + .s-regelvink { display: none; } }
html.beweeg .toneel--o-bericht[data-stap="1"] .s-o-wanneer { display: none; }
html.beweeg .toneel--o-bericht[data-stap="2"] .s-o-wanneer { animation: lv-op 480ms var(--zacht) both; }

/* Ziek melden (07:51). Hier staat het onderblad al in stap 1 open, met alleen 'Wie is er ziek?' en 'Hoe lang?'. Op
   breed hield het blad de hoogte van de latere stappen vast: ± 150 px wit onder Eva, waar in stap 2 pas de lessen en
   de knop komen. Nu is het blad op elke breedte zo hoog als wat er staat (op smal deed style.css dat al) en groeit het
   omhoog als er iets bij komt. */
@media (min-width: 640px) {
  html.beweeg .toneel--naast .s-blad--ziek .lv-nog:is(:not([data-doe]), [data-doe~="in"]) { display: none; }
  html.beweeg .toneel--naast .s-blad--ziek [data-tel]:is(:not([data-doe]), [data-doe~="in"]):not(.lv-nog) { animation: lv-op 480ms var(--zacht) var(--lv-na, 0ms) both; }
}
/* Smal: 'Bij de school' schuift in stap 3 onderaan over de telefoon. Daar lag hij over de lessen en over 'Ongedaan
   maken'. De vijf lessen stonden in stap 2 al op het blad; hier valt de lijst weg, zodat de bevestiging en de knop
   boven de kaart blijven. */
@media (max-width: 639px) {
  html.beweeg .toneel--naast .s-blad--ziek .s-regels--lessen { display: none; }
}