/* Schoolraster — dagen als kolommen, tijd verticaal. */

.sr-raster-root {
  --sr-duur: 480;
  background: var(--card);
}

.sr-raster-scroll {
  /* Horizontaal is dit de scroller: `.sr-raster-vlak` draagt een
     minimumbreedte, want vijf dagkolommen met banen passen niet altijd. Dat
     maakt dit vlak meteen het scrollvlak waaraan de sticky `.sr-dagkoppen`
     hangt, dus het moet zelf verticale reikwijdte houden — haal je die weg,
     dan blijft de dagkop nergens staan en scrolt hij met de lessen mee weg
     (Codex-review #406).

     De grens is daarom niet weg maar ruim: sinds 2026-09-02 telt hij vanaf de
     app-balk in plaats van een vaste 420px, en met de bodem van 0,8px/min uit
     js/schoolraster.js past een gewone schooldag er heel in — bij een venster
     van 744px is dit 522px tegen ongeveer 435px dag. Afknotten gebeurt dus
     alleen nog op een écht laag venster, precies wanneer een meelopende
     dagkop iets waard is. */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: max(320px, calc(100dvh - var(--app-bar-h, 71.6px) - 150px));
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--card);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
}

.sr-raster-vlak {
  min-width: var(--sr-raster-min-breedte, 760px);
}

.sr-dagkoppen,
.sr-kolommen {
  display: grid;
  grid-template-columns: var(
    --sr-raster-kolommen,
    58px repeat(5, minmax(0, 1fr))
  );
}

.sr-dagkoppen {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--card);
  border-bottom: var(--vt-lijn) solid var(--vms-ink-900);
}

.sr-dagkop-hoek,
.sr-dagkop {
  min-width: 0;
  padding: 9px 10px 8px;
}

.sr-dagkop-hoek {
  align-self: end;
  padding-right: 7px;
  font-size: var(--fs-ui-xs);
  text-align: right;
  color: var(--text-muted);
}

.sr-dagkop {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0 7px;
  border-left: 1px solid var(--border-subtle);
}

.sr-dag-kort {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  line-height: 1;
}

.sr-dag-lang,
.sr-dag-datum,
.sr-dag-aantal,
.sr-vandaag {
  min-width: 0;
  font-size: var(--fs-ui-xs);
  line-height: 1.2;
  color: var(--text-muted);
}

.sr-dag-lang {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-dag-datum,
.sr-dag-aantal {
  grid-column: 2;
}

.sr-vandaag {
  grid-column: 1;
  font-family: var(--font-label);
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.sr-dagkop.is-vandaag {
  box-shadow: inset 0 3px 0 var(--vms-ink-900);
}

.sr-dagkop.is-vervallen .sr-dag-kort,
.sr-dagkop.is-vervallen .sr-dag-lang,
.sr-dagkop.is-vervallen .sr-dag-datum {
  text-decoration: line-through;
}

.sr-kolommen {
  height: calc(var(--sr-duur) * var(--mw-minuut));
  min-height: 240px;
}

.sr-as,
.sr-dagkolom {
  position: relative;
}

.sr-as-label {
  position: absolute;
  top: calc(var(--mw-van) * var(--mw-minuut));
  right: 7px;
  z-index: 2;
  padding: 0 2px;
  background: var(--card);
  font-family: var(--font-label);
  font-size: var(--fs-ui-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-muted);
  transform: translateY(4px);
}

.sr-as-label.is-laatste {
  transform: translateY(calc(-100% - 4px));
}

.sr-dagkolom {
  min-width: 0;
  border-left: 1px solid var(--border-subtle);
  background-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(100% - 1px),
    var(--vms-ink-100) calc(100% - 1px),
    var(--vms-ink-100) 100%
  );
  background-repeat: repeat-y;
  background-size: 100% calc(60 * var(--mw-minuut));
}

.sr-dagkolom.is-vervallen {
  background-color: var(--vms-ink-50);
}

.sr-pauze {
  position: absolute;
  z-index: 0;
  top: calc(var(--mw-van) * var(--mw-minuut));
  right: 0;
  left: 0;
  height: calc(var(--mw-duur) * var(--mw-minuut));
  background: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 5px,
    var(--vms-ink-200) 5px,
    var(--vms-ink-200) 6px
  );
}

/* ============================================================
   De leskaart — zachte leerlijntint met een heldere band
   ============================================================
   Tot 2026-09-02 vulde `.mw-blok--raster` deze kaart met `--ll-vulling`: de
   donkere AA-stap (#B02C06 voor techniek) met witte tekst. Die stap bestaat
   omdat wítte tekst op de heldere huisstijlkleur geen AA haalt — maar hij
   maakte het rooster ook donkerder dan het merk, en de kleuren op het scherm
   kwamen niet meer overeen met het Huisstijlhandboek.

   Deze kaart draait dat om: de zachte tint (`--ll-zacht`) is het vlak, de
   échte huisstijlkleur (`--ll-kleur`) is de band aan de kopse kant, en de
   tekst is gewoon inkt. De heldere kleur staat zo op de plek waar hij niets
   hoeft te dragen behalve zichzelf, en het contrast van élke tekstregel is dat
   van inkt op een bijna-witte tint.

   Alleen `.sr-leskaart` — het weekrooster van een school. Het weekraster van
   één persoon (`mijn-week.html`) houdt zijn eigen gevulde blokken; daar draagt
   het vlak de leerlijn van een hele dag en niet die van één les.

   De band en het vlak lopen via twee lokale rolvariabelen, zodat de duo-,
   inval- en vervalstanden hieronder alleen die rollen hoeven te herdefiniëren
   en nooit de achtergrond-shorthand hoeven over te schrijven. */

.sr-leskaart.mw-blok--raster {
  --sr-band: 6px;
  --sr-band-a: var(--ll-kleur, var(--vms-ink-900));
  --sr-band-b: var(--sr-band-a);
  --sr-vlak: var(--ll-zacht, var(--vms-white));
  right: auto;
  left: calc(var(--mw-links) + 3px);
  width: calc(var(--mw-breed) - 6px);
  min-width: 0;
  padding: 5px 8px 4px calc(var(--sr-band) + 8px);
  /* Geen flex-`gap`: elke regel draagt zijn eigen `margin-top`, en samen zouden
     ze de ruimte twee keer opeisen — genoeg om de laatste naam net af te
     snijden op een kaart van drie kwartier. */
  gap: 0;
  background:
    linear-gradient(
        to bottom,
        var(--sr-band-a) 0 50%,
        var(--sr-band-b) 50% 100%
      )
      left / var(--sr-band) 100% no-repeat,
    var(--sr-vlak);
  color: var(--vms-ink-900);
}

/* ---- Duoles: twee leerlijnen op één kaart -------------------------------
   Eén duokaart vertegenwoordigt twee lesmomenten die naast elkaar draaien.
   Tot nu toe droeg zij alleen de kleur van de eerste helft — de tweede
   leerlijn stond uitsluitend in de naam ("Denk × Groen") en was op het raster
   dus onzichtbaar.

   Nu splitst de kaart: de band draagt boven leerlijn A en onder leerlijn B,
   en het vlak splitst diagonaal. `to top right` en niet `45deg`, om exact
   dezelfde reden als de vakgroepchip in vormtaal.css: bij een hoekwoord legt
   CSS de kleurgrens per definitie door de twee andere hoeken, bij élke
   kaartbreedte en -hoogte. Een vaste 45° klopt alleen op een vierkant.

   De sleutel reist als `data-leerlijn-b` (js/weekraster.js `blokEl`), zodat
   hier geen hex en in JS geen kleur staat. Zonder dat attribuut — of met een
   tweede leerlijn die gelijk is aan de eerste — blijft de kaart fail-closed
   eenkleurig. */

.sr-leskaart[data-leerlijn-b] {
  --sr-band-b: var(--ll-kleur-b, var(--sr-band-a));
  --sr-vlak: linear-gradient(
    to top right,
    var(--ll-zacht-b, var(--ll-zacht)) 0 50%,
    var(--ll-zacht, var(--vms-white)) 50% 100%
  );
}

/* Dezelfde vorm als `[data-leerlijn]` in weekraster.css: één plek waar de
   sleutel van de tweede leerlijn aan de tokens hangt, zodat de rasterkaart én
   de papierkaart eruit putten. */
[data-leerlijn-b='groen'] {
  --ll-kleur-b: var(--vms-green);
  --ll-zacht-b: var(--vms-green-soft);
}
[data-leerlijn-b='gezond'] {
  --ll-kleur-b: var(--vms-blue);
  --ll-zacht-b: var(--vms-blue-soft);
}
[data-leerlijn-b='techniek'] {
  --ll-kleur-b: var(--vms-red);
  --ll-zacht-b: var(--vms-red-soft);
}
[data-leerlijn-b='filosofie'] {
  --ll-kleur-b: var(--vms-yellow);
  --ll-zacht-b: var(--vms-yellow-soft);
}
[data-leerlijn-b='budo'] {
  --ll-kleur-b: var(--vms-purple);
  --ll-zacht-b: var(--vms-purple-soft);
}

/* De ruit draagt op deze kaart de leerlijnkleur zélf. `.mw-blok-meta .vt-ruit`
   zet hem op `currentColor` — juist op een gevuld blok, waar de ruit anders in
   de vulling zou verdwijnen, maar hier zou dat de tweede ruit van een duo
   dezelfde zwarte kleur geven als de eerste. Dezelfde techniek en dezelfde
   reden als `.mw-blok--vast .mw-blok-meta .vt-ruit[data-leerlijn]`. */
.sr-leskaart .mw-blok-meta .vt-ruit[data-leerlijn] {
  --vt-ruit-kleur: var(--ll-kleur);
}

/* ---- De regels van de kaart, in leesvolgorde ---------------------------- */

/* `flex: none` is hier niet cosmetisch. De kaart is een flexkolom met een
   vaste hoogte uit de tijdgeometrie; zonder dit krimpen de regels mee zodra de
   inhoud niet past, en dan wordt de detail-/badgeregel tot een streepje geperst
   in plaats van dat hij netjes wegvalt. Wat niet past hoort weg te vallen via
   de duurklassen, niet ingedrukt te worden. */
.sr-kaart-boven,
.sr-kaart-detail,
.sr-kaart-personen {
  display: block;
  flex: none;
  min-width: 0;
}

/* Regel 1 draagt wat nergens anders staat: groep en tijd. De ruit(en) en de
   kleur benoemen de leerlijn al, dus die naam hoeft hier geen breedte meer op
   te eisen — hij staat klein in de onderhoek. */
.sr-kaart-meta {
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0 6px;
}

.sr-kaart-groep {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-heading);
  font-size: var(--fs-ui-md);
  font-weight: 700;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-leskaart .mw-blok-tijd {
  font-size: var(--fs-ui-xs);
}

/* Regel 2: het klasdetail en de badges op één wrappende regel. */
.sr-kaart-detail {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1px 5px;
  min-width: 0;
  margin-top: 1px;
  overflow: hidden;
}

.sr-kaart-detail:empty {
  display: none;
}

.sr-kaart-groepdetail {
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-ui-xs);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-kaart-docentregel {
  display: block;
}

/* Inline wikkel, blokkende kinderen: elke duohelft houdt zo zijn eigen regel,
   terwijl één enkele docent (het invalgeval) op dezelfde regel blijft staan
   als het "voor <afwezige>" dat erachter hoort. */
.sr-kaart-docenten {
  display: inline;
}

.sr-kaart-docent:only-child {
  display: inline-block;
  vertical-align: baseline;
}

/* De persoonsregels blijven op 0,75rem: `scripts/smoke-ui.mjs` meet hier een
   ondergrens van 10,65px, en een naam is het laatste waarop een rooster mag
   bezuinigen. De regelafstand is wél krapper — dat wint hoogte zonder één
   letter kleiner te maken. */
.sr-kaart-docent,
.sr-kaart-assistent {
  display: block;
  min-width: 0;
  margin-top: 1px;
  font-size: var(--fs-ui-sm);
  line-height: 1.1;
  overflow-wrap: break-word;
}

/* "voor <afwezige>" hoort achter de invaller op dezelfde regel: het is geen
   tweede persoon maar de reden dat deze er staat. Op een eigen regel kostte
   het een vierde regel — precies de regel die van een invalkaart van een uur
   niet meer af kon. */
.sr-kaart-voor {
  min-width: 0;
  margin-left: 5px;
  font-size: var(--fs-ui-sm);
  line-height: 1.1;
  overflow-wrap: break-word;
}

.sr-kaart-badge {
  display: inline-block;
  flex: none;
  margin-left: var(--sr-badge-marge, 0);
  padding: 1px 4px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  box-shadow: inset 0 0 0 1px currentColor;
  font-family: var(--font-label);
  font-size: var(--fs-ui-xs);
  font-weight: 400;
  line-height: 1.15;
}

/* De statusbadge is dekkend zwart en niet nóg een omtrek: op een kaart die
   zijn inval-stand óók met een dikke inktrand toont, zou een tweede omtrek
   dezelfde vorm twee keer zeggen. */
.sr-kaart-badge--status {
  background: var(--vms-ink-900);
  box-shadow: none;
  color: var(--vms-white);
}

.sr-kaart-docent.is-vacature {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  padding: 1px 4px;
  background-color: var(--vms-white);
  box-shadow: inset 0 0 0 1px currentColor;
  font-weight: 700;
  color: var(--vms-red-ink);
}

.sr-kaart-voor,
.sr-kaart-assistent {
  font-weight: 300;
  opacity: 0.88;
}

/* De leerlijnnaam sluit de kaart af in plaats van hem te openen: klein, in de
   onderhoek, met het vlak eronder als eigen achtergrond zodat hij nooit over
   een naam heen valt. Hij verschijnt alleen waar hij écht past — zie de
   opbouwregels hieronder — maar staat altijd in de DOM, want hij hoort bij de
   voorleesbare identiteit van het lesmoment. */
.sr-kaart-leerlijn {
  max-width: calc(100% - var(--sr-band, 6px) - 16px);
  overflow: hidden;
  overflow-wrap: normal;
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.12em;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
  word-break: normal;
  color: var(--vms-ink-500);
}

/* ---- Statusstanden ------------------------------------------------------
   Kleur blijft leerlijn, omtrek blijft status — dezelfde afspraak als vóór
   deze kaart. Inval houdt daarom de bestaande conventie: wit vlak met een
   dikke inktrand, met de leerlijnband gewoon in kleur. De selectors dragen
   `.sr-leskaart` én `.mw-blok--raster`, zodat ze onafhankelijk van de
   laadvolgorde specifieker zijn dan de gedeelde standen in weekraster.css. */

.sr-leskaart.mw-blok--raster.mw-blok--inval:not(.mw-blok--vervallen) {
  --sr-vlak: var(--vms-white);
  color: var(--vms-ink-900);
  box-shadow: inset 0 0 0 var(--vt-lijn-dik) var(--vms-ink-900);
}

/* ---- Dienst: een schoolblok zonder leerlijn (S8) ------------------------
   Pleindienst en SLIM zijn vaste roostermomenten van de school met een
   vakdocent erop, maar geen les. Kleur betekent leerlijn of status; een
   dienst is geen van beide en blijft dus zwart-wit. De band aan de zijkant
   is inkt in plaats van merkkleur, zodat de kaart nog steeds als kaart
   leest zonder een leerlijn te claimen. */
.sr-leskaart--dienst.mw-blok--raster {
  --sr-band-a: var(--vms-ink-900);
  --sr-band-b: var(--vms-ink-900);
  --sr-vlak: var(--vms-white);
  color: var(--vms-ink-900);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-400);
}

/* De soortnaam ("Pleindienst", "SLIM") is de titel van de kaart en staat
   waar bij een les de groep staat: dat is de enige plek waar de kaart zegt
   wát dit blok is. */
.sr-leskaart--dienst .sr-kaart-groep {
  font-family: var(--font-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Een dienst heeft geen leerlijn om in de onderhoek te herhalen; de eyebrow
   draagt daar dezelfde soortnaam en zou de titel verdubbelen. */
.sr-leskaart--dienst .sr-kaart-leerlijn {
  display: none;
}

/* S1 — de andere helft van een alternerend paar: één kaart met een smalle
   band die zegt wie er volgende week staat. Geen tweede, grijze kaart
   ernaast; de data blijft twee rijen. */
.sr-kaart-badge--volgende-week {
  background: var(--vms-white);
  box-shadow: inset 0 0 0 1px var(--vms-ink-500);
  color: var(--vms-ink-700);
}

.sr-leskaart--niet-deze-week.mw-blok--raster {
  --sr-band-a: var(--vms-ink-300);
  --sr-band-b: var(--vms-ink-300);
  --sr-vlak: var(--vms-ink-50);
  /* Geen alpha op de hele kaart; die zou tekst, badges en een vacaturechip samen
     onder AA mengen. De expliciete statusinkt blijft ook voor de bestaande
     0,88-persoonstekst en de zachte badgefill ruim leesbaar. */
  color: var(--vms-ink-700);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-400);
}

.sr-leskaart--niet-deze-week .mw-blok-meta .vt-ruit[data-leerlijn] {
  --vt-ruit-kleur: var(--vms-ink-300);
}

.sr-leskaart.mw-blok--raster.mw-blok--vervallen {
  --sr-band-a: var(--vms-ink-400);
  --sr-band-b: var(--vms-ink-400);
  --sr-vlak: var(--vms-ink-50);
  color: var(--vms-ink-700);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-400);
}

.sr-leskaart.mw-blok--vervallen .sr-kaart-groep {
  text-decoration: line-through;
}

.sr-zonder-tijd {
  margin-top: var(--space-3);
  padding: var(--space-3);
  box-shadow: inset 3px 0 0 var(--vms-ink-400);
  background: var(--vms-ink-50);
}

.sr-zonder-tijd h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-ui-lg);
}

.sr-zonder-tijd-lijst {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sr-zonder-tijd-regel {
  appearance: none;
  margin: 0;
  border: var(--vt-lijn) solid var(--vms-ink-900);
  padding: 7px 9px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-ui-sm);
  text-align: left;
}

button.sr-zonder-tijd-regel {
  cursor: pointer;
}

.sr-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-ui-sm);
  color: var(--text-muted);
}

.sr-legenda-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Het legendateken is de kaart in het klein: dezelfde zachte tint, dezelfde
   heldere band. Zo hoeft niemand te leren dat de legenda een andere kleur
   gebruikt dan het rooster. */
.sr-legenda-teken {
  width: 22px;
  height: 12px;
  background: var(--ll-zacht, var(--vms-ink-50));
  box-shadow: inset 4px 0 0 var(--ll-kleur, var(--vms-ink-900));
}

/* De standtekens tonen dezelfde vorm als de kaart: gesplitst voor een duo,
   een dikke inktrand voor inval, grijs voor een les die deze week niet draait,
   en de rode omtrekchip voor een nog onbezette plek. De twee duokleuren zijn
   hier bewust vast (Denk × Groen als voorbeeldpaar zou een bewering over déze
   week zijn); het teken toont de vórm, de kleuren staan al in de items
   erboven. */
.sr-legenda-teken--duo {
  background:
    linear-gradient(
        to bottom,
        var(--vms-ink-900) 0 50%,
        var(--vms-ink-500) 50% 100%
      )
      left / 4px 100% no-repeat,
    linear-gradient(
      to top right,
      var(--vms-ink-100) 0 50%,
      var(--vms-ink-50) 50% 100%
    );
  box-shadow: none;
}

.sr-legenda-teken--inval {
  background: var(--vms-white);
  box-shadow: inset 0 0 0 var(--vt-lijn-dik) var(--vms-ink-900);
}

.sr-legenda-teken--niet-deze-week {
  background: var(--vms-ink-50);
  box-shadow:
    inset 4px 0 0 var(--vms-ink-300),
    inset 0 0 0 1px var(--vms-ink-400);
}

.sr-legenda-teken--vacature {
  background: var(--vms-white);
  box-shadow: inset 0 0 0 1px var(--vms-red-ink);
}

/* Zwart-wit met een inktband: precies de vorm van de dienstkaart. */
.sr-legenda-teken--dienst {
  background: var(--vms-white);
  box-shadow:
    inset 4px 0 0 var(--vms-ink-900),
    inset 0 0 0 1px var(--vms-ink-400);
}

/* Twee helften onder elkaar in inkt: de kaart die om de week van leerlijn
   wisselt. Vaste tinten, net als het duoteken hierboven: het teken toont de
   vórm en niet de kleuren van déze week. */
.sr-legenda-teken--alternerend {
  background: linear-gradient(
    to bottom,
    var(--vms-ink-100) 0 50%,
    var(--vms-white) 50% 100%
  );
  box-shadow: inset 0 0 0 1px var(--vms-ink-500);
}

.sr-legenda-teken--pauze {
  background: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 4px,
    var(--vms-ink-300) 4px,
    var(--vms-ink-300) 5px
  );
  box-shadow: inset 0 0 0 1px var(--vms-ink-400);
}

.sr-print-kop,
.sr-legenda--print,
.sr-print-lijst {
  display: none;
}

/* De tijdbanden en dagvlakken van het papieren rooster (js/schoolraster.js)
   bestaan alleen op het vel; op het scherm staat de lineaire as. */
.sr-print-band,
.sr-print-dagvlak {
  display: none;
}

/* Op de minimumschaal is een halfuur exact 18px hoog. Bewaar daar de ene
   regel die het lesmoment identificeert — groep en tijd — zonder de kaart
   hoger te maken of over de volgende les heen te tekenen. De leerlijn blijft
   zichtbaar in de band en de ruit; zijn naam, de details en de persoonsnamen
   blijven via visueel-verborgen regels in de toegankelijke kaarttekst en staan
   volledig in de print. Op het scherm opent een kaart de lade met alle
   details. */
@media screen {
  /* Een invalregel ("nog niemand" of de invaller, met "voor <afwezige>"
     erachter) blijft op het scherm één regel met ellipsis: op een smalle
     kaart wikkelde het "voor …" naar een tweede regel, en die werd door de
     vaste kaarthoogte halverwege de letters afgesneden (audit 2026-09-08).
     Alleen déze regel — een duokaart met twee docenten houdt haar twee
     blokregels en het afbreken van lange namen. Bewust binnen `@media
     screen`: de `:has()`-selector weegt zwaarder dan de kale printregel
     verderop, en op papier moeten de volledige namen juist wikkelen
     (Codex-review #428). Wat hier wegvalt staat in de lade, de print en de
     voorleesbare kaarttekst. */
  .sr-kaart-docentregel:has(.sr-kaart-voor) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- Wat er van de kaart past ------------------------------------------
     De kaart bouwt op in de prioriteit van de planner. Groep met tijd en de
     vakdocent staan er altijd; het klasdetail met zijn badges, de assistent(en)
     en de leerlijnnaam komen erbij zodra er hoogte voor ze is. Het detail wijkt
     dus vóór een naam: een rooster waarop "halve klas" staat maar niet wie er
     lesgeeft, beantwoordt de vraag niet waarvoor het wordt opengeslagen.

     Wat niet past wordt visueel verborgen en nooit weggelaten: de voorleesbare
     kaarttekst, de printfallback en de lade tonen het lesmoment altijd
     compleet. Op het scherm opent een kaart de lade met alle details. */

  .sr-leskaart .sr-kaart-detail,
  .sr-leskaart .sr-kaart-assistent,
  .sr-leskaart .sr-kaart-leerlijn {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* De kaart bevraagt zijn eigen hoogte in plaats van hem uit de lesduur te
     raden. Dat is hier het verschil tussen kloppen en gokken: dezelfde les van
     een uur is 48px op de schaalbodem en 75px op een ruim scherm, en alleen de
     kaart zelf weet welke van de twee hij is. `container-type: size` mag hier,
     omdat de tijdgeometrie zijn hoogte én breedte al vastlegt — de inhoud
     bepaalt die maten nooit.

     De drempels tellen de regels die erbij komen: het klasdetail met zijn
     badges, dan de assistent(en), dan de leerlijnnaam in de onderhoek. Ze
     rekenen in de maat die een `size`-container zelf hanteert — zijn
     *content box*, dus zonder de kaartpadding — en niet in kaarthoogte. Elke
     stap is fail-closed: zonder ondersteuning blijft de kaart bij de twee
     regels die de planner altijd wil zien. */
  .sr-leskaart.mw-blok--raster {
    container-type: size;
    container-name: leskaart;
  }

  @container leskaart (min-height: 46px) {
    .sr-leskaart .sr-kaart-detail {
      position: static;
      width: auto;
      height: auto;
      margin-top: 1px;
      overflow: hidden;
      clip: auto;
      /* Op één regel. Een klasdetail plus vier badges wikkelt in een smalle
         overlapbaan anders over meerdere regels, en omdat de kaart een vaste
         hoogte heeft met `overflow: hidden` duwt dat juist de vakdocent eruit
         — de regel die volgens de prioriteit hierboven altijd moet blijven
         staan. Wat niet op deze ene regel past, wijkt naar de lade, de print
         en de voorleesbare kaarttekst, precies als de rest van het detail. */
      flex-wrap: nowrap;
    }
  }

  @container leskaart (min-height: 60px) {
    .sr-leskaart .sr-kaart-assistent {
      position: static;
      width: auto;
      height: auto;
      margin-top: 1px;
      overflow: hidden;
      clip: auto;
      /* De `white-space: nowrap` van de verborgen stand blijft staan — één
         regel per assistent — maar dan mét ellipsis: "+ Daan Pronk (stag"
         hard afgesneden aan de kaartrand las als een fout (audit
         2026-09-08). */
      text-overflow: ellipsis;
    }
  }

  /* De onderhoek vraagt niet alleen hoogte maar ook breedte: op een smalle
     overlapbaan zou de naam de laatste persoonsregel raken. */
  @container leskaart (min-height: 74px) and (min-width: 140px) {
    .sr-leskaart .sr-kaart-leerlijn {
      position: absolute;
      right: 8px;
      bottom: 4px;
      width: auto;
      height: auto;
      margin: 0;
      padding-left: 4px;
      overflow: hidden;
      clip: auto;
    }
  }

  /* ---- De korte kaart: een les tot een half uur, en elke dienst --------
     Deze kaart is de enige in de app waar de doos niet met haar inhoud
     meegroeit: haar hoogte komt uit de klok (`--mw-duur` × `--mw-minuut`),
     niet uit haar tekst. Bij de ondergrens van de tijdas — 0,8px per minuut
     — is een kwartier precies 12px hoog.

     Tot september 2026 loste zij dat op met 7px en 6,5px tekst, en dat
     werkte niet eens: op een kwartierkaart stapelden die twee regels 17,6px
     inhoud in 13,6px kaart, en knipte de tweede regel gewoon weg. Het
     Design System (Dichtheid) geeft de andere uitweg — een cel die niet
     past is te vol, niet te klein — en de comment hieronder wees die uitweg
     zelf al aan: de tijd valt als eerste weg.

     Dus: één regel van 11px met de groep, en de tijd alleen wanneer de baan
     er fysiek plaats voor heeft. De tijd verdwijnt niet uit de kaart maar
     uit het beeld — zij blijft voorleesbaar, staat links op de tijdas en
     staat voluit in de lade. */
  .sr-leskaart--kort.mw-blok--raster {
    --sr-band: 4px;
    /* De regelhoogte van de kaart, op één plek: de metaregel, de groep en de
       tijd rekenen er alle drie mee. 14px is niet de tekstmaat plus lucht
       maar de gemeten gliefhoogte van 11px Quicksand: op een krappere regel
       verliest de `g` van "combinatiegroep" haar staart en leest zij als een
       `a`.

       Dat geldt híer, en niet overal. Een `line-height` onder de gliefhoogte
       is gewone CSS zodra de glief buiten haar regelbox mag tekenen —
       `#vms-avatar` zet 12,8px tekst op een regel van 12,8px en dat is prima,
       want die staat gecentreerd in 44px zonder clip. Deze kaart heeft dat
       recht niet: elke doos erin staat op een vaste hoogte met
       `overflow: hidden`, en de regelbox ís dus de clipgrens. Op zo'n doos is
       een regel onder de gliefhoogte dezelfde fout als een letter onder de
       11px. */
    --sr-kort-regel: 14px;
    /* Geen verticale padding: de regel krijgt elke pixel die de kaart heeft.
       Een kwartier is bij de ondergrens van de tijdas 12px hoog en houdt er
       dus 12 van de 14 — daar kan een onderlengte nog 2px verliezen. Dat is
       de laatste rest van het oude probleem, en iets anders dan de hele
       tweede regel die hier vóór september 2026 wegviel. */
    padding: 0 4px 0 8px;
    clip-path: polygon(
      4px 0,
      100% 0,
      100% calc(100% - 4px),
      calc(100% - 4px) 100%,
      0 100%,
      0 4px
    );
  }

  .sr-leskaart--kort .sr-kaart-boven {
    display: block;
    height: var(--sr-kort-regel);
    overflow: hidden;
  }

  /* De groep is op deze maat de primaire identiteit en staat daarom op de
     ondergrens van de UI-tekstschaal, niet eronder. De ellipsis mag hier nu
     wél: op 7px kostte hij een derde van de tekens, op 11px één teken. Hij
     komt uit de basisregel van `.sr-kaart-groep` — deze regel overschrijft
     hem niet langer. */
  .sr-leskaart--kort .sr-kaart-meta,
  .sr-leskaart--kort .sr-kaart-groep {
    height: var(--sr-kort-regel);
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: var(--fs-ui-xs);
    line-height: var(--sr-kort-regel);
    white-space: nowrap;
  }

  .sr-leskaart--kort .sr-kaart-meta {
    flex-wrap: nowrap;
    gap: 0 4px;
  }

  .sr-leskaart--kort .mw-blok-meta-kern {
    flex: 0 1 auto;
    gap: 3px;
    overflow: hidden;
  }

  /* De ruit is een markering en geen tekst, dus de 11px-bodem geldt niet voor
     haar — maar zij hoort wel bij haar letter. De lange kaart zet 8px naast
     tekst van 14px; hier is de tekst 11px, en volgt de ruit mee naar 7px.
     De 5px van vroeger hoorde bij een regel van 7px en leest naast 11px als
     een spikkel. */
  .sr-leskaart--kort .mw-blok-meta .vt-ruit {
    --vt-ruit-maat: 7px !important;
  }

  /* Wat niet past valt weg en krimpt niet: op de smalste banen is de tijd
     voorleesbaar maar onzichtbaar, precies zoals het detail en de personen
     hieronder. Dezelfde vorm, dezelfde reden. */
  .sr-leskaart--kort .mw-blok-tijd {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* Zodra de baan breed genoeg is, komt de tijd terug — rechts op dezelfde
     regel, precies zoals op de lange kaart. De maat is de fysieke
     baanbreedte en niet het aantal banen: een baan van twee op een breed
     scherm heeft die ruimte wél, en een enkele baan in een smalle kolom
     niet. Bij 150px houdt de groep naast de tijd nog ruim zeventig pixel
     over, genoeg voor een tiental tekens vóór haar ellipsis.

     Alleen de voorleesstand wordt teruggedraaid; maat, uitlijning en
     `flex: none` staan in de basisregel van `.mw-blok-tijd` en blijven daar.
     `margin-left: auto` hoort daarbij: die duwt de tijd naar de rechterrand
     en mag niet sneuvelen in het terugdraaien van de negatieve marge. */
  @container leskaart (min-width: 150px) {
    .sr-leskaart--kort .mw-blok-tijd {
      position: static;
      width: auto;
      height: auto;
      margin: 0 0 0 auto;
      overflow: visible;
      clip: auto;
    }
  }

  .sr-leskaart--kort .sr-kaart-detail,
  .sr-leskaart--kort .sr-kaart-personen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 780px) {
  .sr-dag-lang {
    display: none;
  }
}

/* De voetnoot onder het raster: wat deze tekening niet toont, in de stille
   maat van de legenda. Zij hoort bij het raster en niet bij de strook, omdat
   ook het schoolformulier haar gebruikt. */
.sr-voetnoot {
  margin: 0.4rem 0 0;
  color: var(--text-muted);
  font-size: var(--fs-ui-sm);
}

@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  .sr-raster-root {
    width: 100%;
    color: #000;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    break-inside: avoid;
  }

  .sr-raster-root--print-lijst .sr-raster-scroll,
  .sr-raster-root--print-lijst > .sr-zonder-tijd {
    display: none;
  }

  .sr-raster-root--print-lijst .sr-print-lijst {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.2mm;
    width: 100%;
    break-inside: avoid;
  }

  .sr-print-lijst-dag {
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  .sr-print-lijst-dag > h2,
  .sr-print-lijst-zonder-tijd > h2 {
    margin: 0;
    padding: 1mm;
    border-bottom: 1pt solid #000;
    font-family: var(--font-heading);
    font-size: 9pt;
    line-height: 1;
  }

  .sr-print-lijst-leeg {
    margin: 0;
    padding: 1mm;
    color: #555;
    font-size: 8.5pt;
  }

  .sr-print-lijst-kaart {
    display: block;
    min-width: 0;
    margin: 0.6mm 0 0;
    padding: 0.45mm 0.8mm 0.55mm 2mm;
    overflow: visible;
    break-inside: avoid;
    background: var(--ll-zacht, #fff);
    color: #000;
    box-shadow: inset 3pt 0 0 var(--ll-kleur, #000);
    /* Dezelfde afschuining als de rasterkaart: linksboven en rechtsonder. De
       band en de statusomtrek zijn `inset`-schaduwen en worden dus netjes
       meegesneden. */
    clip-path: polygon(
      1.4mm 0,
      100% 0,
      100% calc(100% - 1.4mm),
      calc(100% - 1.4mm) 100%,
      0 100%,
      0 1.4mm
    );
  }

  /* Ook op papier draagt een duokaart zijn twee leerlijnen: de band splitst
     boven/onder, het vlak diagonaal. De band is hier een achtergrondlaag in
     plaats van de `box-shadow` hierboven, want één shadow kan geen twee
     kleuren over elkaar leggen. */
  .sr-print-lijst-kaart[data-leerlijn-b] {
    background:
      linear-gradient(
          to bottom,
          var(--ll-kleur, #000) 0 50%,
          var(--ll-kleur-b, var(--ll-kleur, #000)) 50% 100%
        )
        left / 3pt 100% no-repeat,
      linear-gradient(
        to top right,
        var(--ll-zacht-b, var(--ll-zacht, #fff)) 0 50%,
        var(--ll-zacht, #fff) 50% 100%
      );
    box-shadow: none;
  }

  .sr-print-lijst-kaart.mw-blok--inval:not(.mw-blok--vervallen) {
    box-shadow:
      inset 3pt 0 0 var(--ll-kleur, #000),
      inset 0 0 0 1.5pt #000;
  }

  .sr-print-lijst-kaart[data-leerlijn-b].mw-blok--inval:not(
      .mw-blok--vervallen
    ) {
    box-shadow: inset 0 0 0 1.5pt #000;
  }

  /* De rasterkaart draagt zijn statusstanden via `.mw-blok--raster`; de
     papierkaart heeft die klasse niet en verloor daarmee de grijze stand van
     een les die deze week niet draait. Zij houdt hier dus haar eigen regel:
     neutraal vlak, grijze band, grijze omtrek. */
  .sr-print-lijst-kaart.sr-leskaart--niet-deze-week {
    background: var(--vms-ink-50);
    color: #000;
    box-shadow:
      inset 3pt 0 0 #777,
      inset 0 0 0 1pt #777;
  }

  .sr-print-lijst-kaart.mw-blok--vervallen {
    color: #000;
    box-shadow:
      inset 3pt 0 0 #777,
      inset 0 0 0 1pt #777;
  }

  /* De badges van de papierkaart staan op één regel naast elkaar, net als op
     het scherm — `display: block` zou elke badge zijn eigen regel geven. De
     regel draagt hier bovendien zelf de badgemaat: zonder eigen `font-size`
     erft dit blok de 17px van het document en zet dat een regelbox van 25,5px
     op een kaart waarvan élke andere regel er tien haalt. Vijf dagkolommen met
     zo'n badge per kaart tilden het vel over de A4-hoogte heen. */
  .sr-print-lijst-kaart .sr-kaart-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 3pt;
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    color: inherit;
    font-size: 6.5pt;
    line-height: 1.1;
  }

  /* De leerlijnnaam sluit de papierkaart af als bijschrift, niet als kop: de
     band en de legenda dragen de leerlijn al, en op 8,5pt zou deze regel even
     zwaar wegen als de namen erboven. */
  .sr-print-lijst-kaart .sr-kaart-leerlijn {
    display: block;
    position: static;
    width: auto;
    height: auto;
    max-width: none;
    margin: 0;
    overflow: visible;
    clip: auto;
    font-size: 6pt;
    line-height: 1.1;
    color: #555;
  }

  .sr-print-lijst-kaart .sr-kaart-boven,
  .sr-print-lijst-kaart .sr-kaart-personen {
    display: block;
    max-height: none;
    min-height: 0;
    overflow: visible;
    line-height: 0.92;
  }

  .sr-print-lijst-kaart .sr-kaart-meta {
    display: flex;
    flex-wrap: nowrap;
  }

  .sr-print-lijst-kaart .sr-kaart-groep,
  .sr-print-lijst-kaart .sr-kaart-docentregel,
  .sr-print-lijst-kaart .sr-kaart-assistent {
    display: block;
    margin: 0;
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .sr-print-lijst-kaart .sr-kaart-docenten,
  .sr-print-lijst-kaart .sr-kaart-docent,
  .sr-print-lijst-kaart .sr-kaart-voor {
    display: inline;
  }

  /* Op het scherm scheidt de flex-`gap` deze stukken; inline op papier is die
     er niet, en dan plakt "Benno Nieuwstraten" aan "+ Pieter Klompe". */
  .sr-print-lijst-kaart .sr-kaart-docent + .sr-kaart-docent,
  .sr-print-lijst-kaart .sr-kaart-voor {
    margin-left: 2pt;
  }

  .sr-print-lijst-kaart .mw-blok-tijd,
  .sr-print-lijst-kaart .sr-kaart-groep,
  .sr-print-lijst-kaart .sr-kaart-docentregel,
  .sr-print-lijst-kaart .sr-kaart-docent,
  .sr-print-lijst-kaart .sr-kaart-voor,
  .sr-print-lijst-kaart .sr-kaart-assistent {
    font-size: 8.5pt;
    line-height: 0.92;
  }

  .sr-print-lijst-zonder-tijd {
    grid-column: 1 / -1;
    margin-top: 1mm;
  }

  .sr-print-lijst-zonder-tijd-kaarten {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.2mm;
  }

  .sr-print-kop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10mm;
    margin: 0 0 4mm;
    padding: 0 0 3mm;
    border-bottom: 1.5pt solid #000;
  }

  /* Het vel gaat aan een prikbord op kantoor hangen, los van het scherm
     waar het vandaan komt. Het merk staat er daarom op — als
     achtergrondafbeelding, zodat de printkop geen `img` in de gedeelde
     bouwsteen nodig heeft en er geen URL door JS reist. */
  .sr-print-titels {
    padding-left: 30mm;
    background: url('assets/vakmanstad-logo-black.png') left 0.5mm / 26mm auto
      no-repeat;
  }

  .sr-print-titels h1 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 20pt;
    line-height: 1;
  }

  .sr-print-titels p {
    margin: 1.5mm 0 0;
    font-size: 10pt;
  }

  .sr-legenda--print {
    display: flex;
    justify-content: flex-end;
    max-width: 120mm;
    margin: 0;
    color: #000;
    font-size: 8.5pt;
  }

  .sr-legenda--scherm {
    display: none;
  }

  /* De voetnoot zegt wat deze tekening níet toont. Op papier hoort die zin
     mee: een uitgeprint rooster waarin lessen ontbreken zonder dat het vel
     dat zegt, leest als het hele rooster. */
  .sr-voetnoot {
    margin: 2mm 0 0;
    color: #000;
    font-size: 8pt;
  }

  .sr-raster-scroll {
    min-width: 0;
    max-height: none;
    overflow: visible;
    box-shadow: inset 0 0 0 1pt #000;
  }

  .sr-raster-vlak {
    min-width: 0;
  }

  .sr-dagkoppen {
    position: static;
  }

  /* Baanevenredig, met een lege dag teruggebracht tot zijn kop: js/
     schoolraster.js zet de sporen. De vaste verdeling blijft als terugval
     staan voor een raster dat de variabele niet meegekregen heeft. */
  .sr-dagkoppen {
    grid-template-columns: var(
      --sr-print-kolommen,
      12mm repeat(5, minmax(0, 1fr))
    );
  }

  /* Het vel is geen tijdas maar een rooster: per dag één kolom per baan en
     één rij per tijdband van de week (`schoolrasterPrintBanden`). Een rij met
     les is minstens zo hoog als haar inhoud en groeit daarboven naar rato van
     haar duur; een band zonder les is een vaste strook. Het rooster is
     minstens de 142mm die scripts/smoke-ui.mjs bewaakt — een week die meer
     vraagt maakt het vel langer, nooit een kaart korter. */
  .sr-kolommen {
    grid-template-columns: var(
      --sr-print-baankolommen,
      12mm repeat(5, minmax(0, 1fr))
    );
    grid-template-rows: var(--sr-print-rijen, minmax(0, 1fr));
    height: auto;
    min-height: 142mm;
  }

  /* De as en de dagkolommen zijn op papier geen vlakken meer maar doorgeef-
     luiken: hun kinderen — banden, dagvlakken, kaarten — zijn de items van
     het rooster. Zo lezen scherm en papier één DOM, elk met hun eigen maat. */
  .sr-as,
  .sr-dagkolom {
    display: contents;
  }

  /* De uurlabels en de pauzeband per dag horen bij de lineaire schermas; op
     het vel dragen de tijdbanden de tijden en de arcering. */
  .sr-as-label,
  .sr-pauze {
    display: none;
  }

  .sr-print-band {
    display: block;
    position: relative;
    grid-column: 1 / -1;
    grid-row: var(--sr-print-rij);
    border-top: 1px solid var(--vms-ink-100);
  }

  .sr-print-band--leeg {
    background: var(--vms-ink-50);
  }

  .sr-print-band--pauze {
    background: repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 2mm,
      #bbb 2mm,
      #bbb 2.25mm
    );
  }

  .sr-print-band-tijd {
    position: absolute;
    top: 0.4mm;
    left: 0;
    box-sizing: border-box;
    width: 12mm;
    padding-right: 1.5mm;
    font-family: var(--font-label);
    font-size: 7pt;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: right;
    color: #000;
  }

  .sr-print-band-tijd--eind {
    top: auto;
    bottom: 0.4mm;
  }

  .sr-print-dagvlak {
    display: block;
    grid-column: var(--sr-print-kolom) / span var(--sr-print-kolom-span);
    grid-row: 1 / -1;
    border-left: 1px solid var(--border-subtle);
  }

  .sr-dagkolom.is-vervallen > .sr-print-dagvlak {
    background: var(--vms-ink-50);
  }

  .sr-dagkop-hoek,
  .sr-dagkop {
    padding: 2mm;
  }

  .sr-dag-kort {
    font-size: 11pt;
  }

  .sr-dag-lang,
  .sr-dag-datum,
  .sr-dag-aantal,
  .sr-vandaag {
    font-size: 7pt;
  }

  /* Een lege dag is op het vel nog 16mm breed. Daar past met de padding erbij
     alleen "DI" nog in: "dinsdag" zou als "dins…" afbreken en "0 lessen" zou
     over de dag ernaast heen lopen. De lege kolom eronder zegt zelf al dat er
     die dag geen les is. */
  .sr-dagkop--leeg {
    overflow: hidden;
  }

  .sr-dagkop--leeg .sr-dag-lang,
  .sr-dagkop--leeg .sr-dag-datum,
  .sr-dagkop--leeg .sr-dag-aantal {
    display: none;
  }

  .sr-as-label {
    right: 1.5mm;
    background: #fff;
    color: #000;
    font-size: 7pt;
  }

  /* De kaart is op papier een rooster-item: van de rijlijn van haar
     begintijd tot die van haar eindtijd, in de kolommen van haar baan. Haar
     hoogte volgt haar inhoud — de rij groeit mee — dus hier knipt niets af.
     Een kaart die een hele dag van meerdere banen krijgt, blijft op de
     baanbovengrens: breder wordt zij alleen leger. */
  .sr-leskaart.mw-blok--raster {
    position: static;
    grid-row: var(--sr-print-rij) / var(--sr-print-rij-eind);
    grid-column: var(--sr-print-kolom) / span var(--sr-print-kolom-span);
    z-index: 1;
    width: auto;
    max-width: var(--sr-print-kaart-max, none);
    /* Geen `min-height: 0`: de automatische minimummaat van de kaart is wat
       haar rij minstens hoog maakt. */
    height: auto;
    margin: 0.5mm 0.6mm;
    display: flex;
    flex-flow: column nowrap;
    gap: 0;
    overflow: visible;
    padding: 0.15mm 0.8mm 0.4mm 1.6mm;
    border: 0;
    background:
      linear-gradient(
          to bottom,
          var(--sr-band-a) 0 50%,
          var(--sr-band-b) 50% 100%
        )
        left / 3pt 100% no-repeat,
      var(--sr-vlak);
    color: #000;
    box-shadow: none;
    /* De afgeschuinde hoeken zijn de vormtaal van het merk, niet decoratie: op
       het scherm draagt elke leskaart ze en op papier hoort dezelfde kaart er
       hetzelfde uit te zien. Ze stonden hier op `none` omdat de leerlijnband
       toen een `box-shadow` was, en een clip-path snijdt die weg. Nu de band een
       achtergrondlaag is, wordt hij netjes mee afgeschuind. */
    clip-path: polygon(
      1.6mm 0,
      100% 0,
      100% calc(100% - 1.6mm),
      calc(100% - 1.6mm) 100%,
      0 100%,
      0 1.6mm
    );
  }

  /* Op papier draagt de kaart dezelfde band, hetzelfde vlak en dezelfde
     diagonale duosplitsing als op het scherm — alleen de maten zijn die van
     A4. De rolvariabelen staan al op `.sr-leskaart.mw-blok--raster` buiten dit
     blok, dus de inval- en vervalstanden werken hier ongewijzigd door. */
  .sr-leskaart.mw-blok--raster.mw-blok--inval:not(.mw-blok--vervallen) {
    --sr-vlak: #fff;
    box-shadow: inset 0 0 0 1.5pt #000;
  }

  .sr-leskaart.mw-blok--raster.mw-blok--vervallen {
    --sr-band-a: #777;
    --sr-band-b: #777;
    --sr-vlak: #fff;
    color: #000;
    box-shadow: inset 0 0 0 1pt #777;
  }

  /* Papier heeft geen lade en geen hover: elke regel die het scherm bij
     ruimtegebrek visueel wegklapt, staat hier gewoon. */
  .sr-kaart-detail,
  .sr-kaart-leerlijn,
  .sr-kaart-assistent {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }

  .sr-kaart-leerlijn {
    max-width: none;
    color: inherit;
  }

  /* Op papier zijn dezelfde teksten compacte regels: boven groep en tijd,
     daaronder docent en assistent(en). Niets ervan knipt af — wat in een
     smalle baan niet op één regel past, breekt om en de rij groeit mee. */
  .sr-kaart-boven,
  .sr-kaart-personen {
    min-width: 0;
    margin: 0;
    line-height: 0.88;
  }

  .sr-kaart-boven {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.7mm;
    overflow: visible;
  }

  .sr-kaart-personen {
    display: block;
    flex: none;
    min-height: 0;
    overflow: visible;
  }

  /* Groep en tijd delen de bovenregel; in een smalle baan neemt de tijd de
     regel eronder. De groep breekt op papier nooit af tot een "…": zij is de
     identiteit van het lesmoment en de rij groeit gewoon mee. */
  .sr-kaart-meta {
    flex: 1 1 auto;
    flex-wrap: wrap;
  }

  .sr-kaart-groep {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .sr-kaart-groep,
  .sr-kaart-docentregel,
  .sr-kaart-docenten,
  .sr-kaart-docent,
  .sr-kaart-voor,
  .sr-kaart-assistent {
    display: inline;
    flex: 0 1 auto;
    margin: 0;
  }

  .sr-kaart-docentregel,
  .sr-kaart-assistent {
    display: block;
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  /* Inline op papier is er geen flex-`gap`; zonder dit plakt "Benno
     Nieuwstraten" aan "+ Pieter Klompe". */
  .sr-kaart-docent + .sr-kaart-docent,
  .sr-kaart-voor {
    margin-left: 2pt;
  }

  .sr-pauze {
    background: repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 2mm,
      #bbb 2mm,
      #bbb 2.25mm
    );
  }

  .sr-leskaart .mw-blok-tijd,
  .sr-kaart-groep,
  .sr-kaart-docentregel,
  .sr-kaart-docent,
  .sr-kaart-voor,
  .sr-kaart-assistent {
    font-size: 8.5pt;
    line-height: 0.88;
  }

  /* Ook in het tijdraster is de leerlijnnaam een bijschrift. `flex: none` houdt
     hem tegen de laatste naam aan in plaats van tegen de onderrand, waar de
     kaarthoogte hem zou afsnijden. */
  .sr-leskaart .sr-kaart-leerlijn {
    flex: none;
    max-width: none;
    font-size: 6pt;
    line-height: 1.1;
    color: #555;
  }

  .sr-leskaart--veel-banen .mw-blok-tijd,
  .sr-leskaart--veel-banen .sr-kaart-groep,
  .sr-leskaart--veel-banen .sr-kaart-docent,
  .sr-leskaart--veel-banen .sr-kaart-voor,
  .sr-leskaart--veel-banen .sr-kaart-assistent {
    font-size: 8pt;
  }

  .sr-kaart-badge {
    --sr-badge-marge: 3pt;
    font-size: 6.5pt;
  }

  .sr-zonder-tijd {
    margin-top: 2mm;
    padding: 1.5mm;
    break-inside: avoid;
  }

  .sr-zonder-tijd h3,
  .sr-zonder-tijd-regel {
    font-size: 7.5pt;
  }
}