/* Ludendo v3 · /scholen/ (voor schoolleiding, besturen en inkoop).
   Alleen wat deze pagina extra nodig heeft bovenop /style.css. De vorm volgt /leerling/: rol-held, dagbalk,
   momenten met een groot toestel, en rustige secties met haarlijnen. Geen eigen kleuren: alleen de tokens. */

/* Drie momenten op de baan (style.css kent .m4 en hoger) */
.momenten.m3 { --m: 2; }

/* Opening: de eerste taak in de nu-kaart zonder lijn erboven */
.s-taak--eerst { border-top: 0; padding-top: .35em; }
.rol-held .s-taak { gap: .6em; }
.rol-held .s-taak .s-knop { flex: none; }

/* Wat het vervangt: twee rustige lijsten met haarlijnen, links wat weg kan, rechts wat blijft */
.vervangt { display: grid; gap: 48px 72px; margin-top: 56px; }
@media (min-width: 900px) { .vervangt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.vervangt h3 { font-size: 15px; font-weight: 600; color: var(--grijs); letter-spacing: .01em; }
.vervangt-lijst { list-style: none; margin-top: 16px; border-top: 1px solid var(--lijn); }
.vervangt-lijst li { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--lijn); }
.vervangt-lijst b { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.vervangt-lijst span { color: var(--grijs); }
.vervangt-lijst--blijft b { color: var(--grijs); }

/* Een statuslabel in een korte tekst: op een eigen regel, stil */
.label-stil { display: block; margin-top: 10px; font-size: 14px; color: var(--grijs); }
.label-stil strong { font-weight: 600; color: var(--inkt); }
.drie--lijn a { color: var(--accent-tekst); font-weight: 600; }

/* Hoe ver: één zin over wat een school krijgt, onder de telling */
.stand-krijg { margin-top: 20px; font-size: 15px; line-height: 1.5; color: var(--grijs); }

/* ---------------------------------------------------------------- de schermen in de drie momenten */
.toneel--koppel .scherm--laptop, .toneel--inlees .scherm--laptop, .toneel--regels .scherm--laptop { gap: 1em; }

/* 07:35 koppelingen: links de lijst, rechts wisselt per stap wat erbij hoort */
.s-grid--sk, .s-grid--si { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; align-content: start; flex: 1; }
.sk-lijst .s-koppeling:first-of-type { border-top: 0; }
.sk-lijst .s-koppeling, .sk-view .s-rij { padding-block: .85em; }
.sk-view, .si-view { gap: .35em; }
.sk-view .s-rij:first-of-type, .si-view .s-rij:first-of-type { border-top: 0; }
.sk-view .s-klein { margin-top: .3em; }
.toneel .sk-view, .toneel .si-view { --van: translateX(1em); --weg: translateX(-.6em); --d: 360ms; --do: 200ms; }

/* 10:05 inlezen: de knop staat links onder, het exportvenster schuift van rechts over het scherm */
.si-inlees { gap: .7em; }
.si-inlees .s-tegel b { font-variant-numeric: tabular-nums; }
.si-knop { align-self: flex-start; }
.toneel--inlees .s-bestand2 small { font-size: .95em; }
.si-view .s-regelvink { padding: .2em 0; }
.si-export { gap: .6em; }
.si-export .s-knop--vol { margin-top: .3em; }

/* 14:30 de regels: verlof links over twee rijen, rapport en onderwijstijd rechts */
.s-grid--sr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; align-content: start; flex: 1; }
.sr-verlof { grid-column: 1; grid-row: 1 / span 2; gap: .55em; }
.sr-rapport { grid-column: 2; grid-row: 1; }
.sr-tijd { grid-column: 2; grid-row: 2; gap: .35em; }
.sr-verlof .s-knoppen { margin-top: .3em; }
.sr-rapport .s-tegel { padding: .6em .75em; }
.sr-rapport .s-tegel b { font-size: 1.7em; }
/* Onderwijstijd: per cohort een balk van 5.500 tot 5.850 uur; het streepje is de norm van 5.700 uur */
.s-cohort { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) 2.6em; align-items: center; gap: .7em; padding: .3em 0; font-size: .875em; }
.s-cohort > span:first-child { font-weight: 600; }
.s-cohort b { text-align: right; font-weight: 700; }
.s-uren { position: relative; display: block; height: .55em; border-radius: 999px; background: var(--s-label); }
.s-uren i { display: block; height: 100%; border-radius: inherit; background: var(--s-accent); transform-origin: left center; }
.s-uren::after { content: ""; position: absolute; left: 57.1%; top: -.4em; bottom: -.4em; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--s-tekst); }
.u-6 { width: 74.9%; } .u-5 { width: 37.7%; } .u-4 { width: 83.1%; }
.s-cohort--onder .s-uren i { background: var(--s-oranje); }
.s-cohort--onder b { color: var(--s-oranje); }

/* Smal (kaartvorm van de laptop): per stap alleen het paneel waar de stap over gaat, zodat het hele toestel
   onder het bijschrift in beeld past. Zonder JS of met minder beweging staat alles onder elkaar. */
@media (max-width: 639px) {
  .s-grid--sk, .s-grid--si, .s-grid--sr { display: flex; flex-direction: column; }
  html.beweeg .toneel--koppel:not([data-stap="1"]) .sk-lijst { display: none; }
  html.beweeg .toneel--koppel[data-stap="1"] .sk-rechts { display: none; }
  html.beweeg .toneel--regels:not([data-stap="1"]) .sr-verlof { display: none; }
  html.beweeg .toneel--regels:not([data-stap="2"]) .sr-rapport { display: none; }
  html.beweeg .toneel--regels:not([data-stap="3"]) .sr-tijd { display: none; }
  .si-export { position: absolute; }
  .s-cohort { font-size: 14px; }
  .vervangt-lijst b { font-size: 17px; }
}

/* Wat kan het verder: breed in twee kolommen, zodat de lijst geen muur wordt */
@media (min-width: 960px) {
  #verder .functiegroepen { max-width: none; }
  #verder .functiegroep .functies { max-width: none; columns: 2; column-gap: 56px; }
  #verder .functiegroep .functies li { break-inside: avoid; }
}