/* Ludendo v3, /mentor/: alleen wat deze pagina nodig heeft bovenop style.css. Alles in em binnen de schermen,
   zodat de tekst meeschaalt met het toestel (zoals in v1). Geen kleuren van buiten de tokens van style.css. */

/* De tabs van Mentorklas op de laptop: links uitgelijnd, niet over de hele breedte */
.s-segment--links { align-self: flex-start; }
.s-segment--links span { flex: none; padding-inline: 1em; }

/* Telefoon: verzuim per leerling, met de meter eronder */
.s-vzlijst { gap: .1em; }
.s-vzlijst > .s-meta { margin-bottom: .2em; }
.s-vzrij { display: flex; flex-direction: column; gap: .35em; padding-bottom: .5em; }
.s-vzrij .s-meter small { min-width: 4.2em; }
.s-vzlijst > .s-klein { margin-top: .3em; }

/* Laptop: wie besproken is, staat rustig onder de lijst */
.s-besproken-kop { margin-top: .6em; font-weight: 600; }
.s-rij--besproken { color: var(--s-grijs); }
.s-rij--besproken b { color: var(--s-grijs); }
.s-uur { font-style: normal; font-weight: 600; font-size: .875em; white-space: nowrap; }
.s-rij--nieuw b { display: flex; align-items: center; }

/* De teller van de leerplicht: één groot getal */
.s-telgroot { font-size: 2em; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--s-oranje); }

/* Telefoon: het profiel */
.s-sterk { display: block; color: var(--s-tekst); font-weight: 600; }

/* Gesprek plannen */
.s-gesprek { gap: .45em; }
.s-gesprek .s-check { padding: .45em .8em; }
.s-gesprek > .s-meta { margin-top: .35em; font-weight: 600; }
.s-gesprek .s-knop { align-self: flex-start; margin-top: .4em; }
.s-pillen--rij { flex-wrap: wrap; }
.s-veld--vol { color: var(--s-tekst); font-style: normal; background: var(--s-grond); border-color: transparent; }

/* Bericht aan alle ouders: het vakje voor de naam van het kind */
.s-aan, .s-bericht { gap: .25em; }
.s-bericht { font-size: .9375em; gap: .55em; }
.s-kindveld { display: inline-block; padding: 0 .45em; border-radius: .4em; background: var(--s-accent-zacht); color: var(--s-accent-tekst); font-weight: 600; font-size: .9em; white-space: nowrap; }
.s-kindnaam { color: var(--s-accent-tekst); }
.s-bericht--voorbeeld { display: flex; flex-direction: column; gap: .55em; padding: .9em 1em; border-radius: 1em; background: var(--s-grond); font-size: .9375em; }
.toneel--ouders .s-blad { gap: .8em; display: flex; flex-direction: column; }
.toneel--ouders .s-knop--vol { margin-top: auto; }

/* Rapport: tabel met de opmerking van de docent */
.s-tabel--rapport td { vertical-align: top; padding-block: .55em; }
.s-tabel--rapport td:first-child { white-space: nowrap; }
.s-tabel--rapport td small { display: block; margin: .2em 0 0; }
.s-tabel--rapport td:last-child { white-space: nowrap; color: var(--s-grijs); }
.s-tabel--verzuim td { padding-block: .45em; }

/* Smal (kaartvorm van een laptopscherm): het paneel dat opengaat, ligt in dezelfde cel als de lijst eronder. Zo is
   de kaart altijd zo hoog als het grootste van de twee, en valt er nooit iets boven de rand weg. */
@media (max-width: 639px) {
  .toneel--aandacht .scherm--laptop { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .toneel--aandacht .scherm--laptop > :is(.kern, .s-grid, .s-zijpaneel) { grid-row: 2; grid-column: 1; }
  .toneel--aandacht .s-zijpaneel { position: relative; inset: auto; width: auto; margin: 0; }
  .s-segment--links span { padding-inline: .6em; }
  .s-gesprek .s-check small { display: none; }
  .s-gesprek .s-bladkop .s-label { display: none; }
  /* Verzuim: de kaart past in één scherm. Alleen de vier leerlingen om wie het gaat, zonder meterbalk en te laat. */
  .s-tabel--verzuim :is(th, td):nth-child(3), .s-tabel--verzuim .s-meter > span, .s-tabel--verzuim tbody tr:nth-child(n+5) { display: none; }
  .s-tabel--verzuim td { white-space: nowrap; }
  .toneel--verzuim .kern > :is(.s-meta, .s-klein) { display: none; }
  /* Rapport: per leerling de onvoldoendes; de opmerkingen van docenten en het verzuim staan op de laptop */
  .s-tabel--rapport thead, .s-tabel--rapport td small, .s-tabel--rapport td:last-child, .toneel--rapport .kern > .s-klein { display: none; }
  .s-tabel--rapport td:nth-child(2) { white-space: normal; }
}

/* De teller van Jesse: elk uur op één regel, zodat alle vijf de regels (samen 13 uur) in het scherm passen */
.s-paneel--teller { gap: .3em; }
.s-paneel--teller .s-rij { padding-block: .4em; }
.s-paneel--teller .s-rij > div { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: .5em; }
.s-paneel--teller .s-telgroot { font-size: 1.75em; }