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