/* ============================================================
   Weekraster — het gedeelde weekoverzicht van één persoon
   ============================================================
   Hoort bij js/weekraster.js. Tot 2026-08-30 stonden deze regels
   in mijn-week.css; sinds de feedbackronde van die dag tekent ook
   het Rooster-scherm van de planner (bereik Persoon) hetzelfde
   raster, en twee kopieën van dezelfde tekening lopen uiteen.

   Link ná fonts.css, tokens.css en vormtaal.css: alle kleuren,
   maten en typografie komen daar vandaan, hier staat geen hex die
   als var(--...) bestaat. Op mijn-week.html link je hem vóór
   mijn-week.css — die pagina toont het raster alleen op >=1100px
   en neemt `display` daar met dezelfde specificiteit weer over.

   De drie pagina's die hem laden:
     mijn-week.html     strip + raster + de rolvariabelen
     mijn-scholen.html  alleen de rolvariabelen (gedeelde inzagekaart)
     personeel.html     het raster in bereik Persoon, op elke breedte
   ============================================================ */

/* ============================================================
   Leerlijnkleuren als lokale rol-variabelen
   ============================================================
   Eén plek waar de leerlijnsleutel (JSONB-suffix) aan de tokens
   hangt. `--ll-kleur` is de heldere merkkleur (banden, randen,
   ruiten), `--ll-zacht` het vlak eronder en `--ll-ink` de
   AA-tekstkleur op wit. De ruit van vormtaal.css erft
   `--vt-ruit-kleur`.

   `--ll-vulling` en `--ll-op` zijn het paar voor een dékkend
   leerlijnvlak: de donkere AA-stap plus de tekstkleur erop. Sinds
   de roosterkaartjes op de zachte tint overgingen (2026-09-02) is
   `.mw-straks` in mijn-week.css hun enige gebruiker — een hero-vlak,
   geen kaart. Zet ze niet op een kaart terug zonder de bijbehorende
   contrastvloer in tests/contrast.test.mjs mee te verhuizen. */

[data-leerlijn='groen'] {
  --ll-kleur: var(--vms-green);
  --ll-zacht: var(--vms-green-soft);
  --ll-ink: var(--vms-green-ink);
  --ll-op: var(--vms-black);
  --ll-vulling: var(--vms-green-fill);
  --vt-ruit-kleur: var(--vms-green);
}
[data-leerlijn='gezond'] {
  --ll-kleur: var(--vms-blue);
  --ll-zacht: var(--vms-blue-soft);
  --ll-ink: var(--vms-blue-ink);
  --ll-op: var(--vms-white);
  --ll-vulling: var(--vms-blue-fill);
  --vt-ruit-kleur: var(--vms-blue);
}
[data-leerlijn='techniek'] {
  --ll-kleur: var(--vms-red);
  --ll-zacht: var(--vms-red-soft);
  --ll-ink: var(--vms-red-ink);
  --ll-op: var(--vms-white);
  --ll-vulling: var(--vms-red-fill);
  --vt-ruit-kleur: var(--vms-red);
}
[data-leerlijn='filosofie'] {
  --ll-kleur: var(--vms-yellow);
  --ll-zacht: var(--vms-yellow-soft);
  --ll-ink: var(--vms-yellow-ink);
  --ll-op: var(--vms-black);
  --ll-vulling: var(--vms-yellow-fill);
  --vt-ruit-kleur: var(--vms-yellow);
}
[data-leerlijn='budo'] {
  --ll-kleur: var(--vms-purple);
  --ll-zacht: var(--vms-purple-soft);
  --ll-ink: var(--vms-purple-ink);
  --ll-op: var(--vms-white);
  --ll-vulling: var(--vms-purple-fill);
  --vt-ruit-kleur: var(--vms-purple);
}

/* §4.2/§4.3: draagt de persoon één leerlijn, dan kleurt die de pagina — het
   weekraster vult dan alle gewone lessen in die kleur en de ritmestrook zet er
   haar lesdagen in. Draagt de persoon meer leerlijnen, dan bestaat
   `--mw-pagina` niet en houdt elk blok zijn eigen kleur. */
[data-paginaleerlijn='groen'] {
  --mw-pagina: var(--vms-green);
  --mw-pagina-zacht: var(--vms-green-soft);
}
[data-paginaleerlijn='gezond'] {
  --mw-pagina: var(--vms-blue);
  --mw-pagina-zacht: var(--vms-blue-soft);
}
[data-paginaleerlijn='techniek'] {
  --mw-pagina: var(--vms-red);
  --mw-pagina-zacht: var(--vms-red-soft);
}
[data-paginaleerlijn='filosofie'] {
  --mw-pagina: var(--vms-yellow);
  --mw-pagina-zacht: var(--vms-yellow-soft);
}
[data-paginaleerlijn='budo'] {
  --mw-pagina: var(--vms-purple);
  --mw-pagina-zacht: var(--vms-purple-soft);
}

/* Buiten een leerlijn (vervallen les): de ruit is grijs — ink-400 is een
   markerkleur, nooit een tekstkleur. Dezelfde regel staat in mijn-week.css op
   de wijzigingenregel, die geen raster is. */
.mw-blok--vervallen {
  --vt-ruit-kleur: var(--vms-ink-400);
}

.mw-blok--strip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--mw-links);
  width: var(--mw-breed);
  display: block;
  background: var(--ll-kleur, var(--vms-ink-400));
  box-shadow: 1px 0 0 var(--bg) inset;
}

.mw-blok--strip.mw-blok--vervallen {
  background: none;
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-400);
}

/* Inval is een statusvorm, geen tweede kleurbetekenis: de leerlijn blijft in
   de omtrek en de ruit, het vlak zelf blijft wit. Ook de mobiele tijdbaan volgt
   die vorm, zonder er kaartinhoud aan toe te voegen. */
.mw-blok--strip.mw-blok--inval:not(.mw-blok--vervallen) {
  background: var(--card);
  box-shadow: inset 0 0 0 2px var(--ll-kleur, var(--vms-ink-900));
}

/* ---- Kinderpauze (DEC-040 besluit 7) ------------------------------------
   De pauze van de kinderen (`pauze_van`/`pauze_tot` uit de schoolblob) als
   gearceerde band achter de lessen. Bewust neutraal: geen leerlijnkleur (het
   is geen les) en geen statuskleur (het is geen signaal) — dezelfde 135°-
   arcering als kantoor, maar fijner, zodat de twee niet verwisselbaar zijn.
   In de kolom staat de band vóór de blokken, dus hij ligt eronder. */
.mw-pauze {
  position: absolute;
  background: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 5px,
    var(--vms-ink-200) 5px,
    var(--vms-ink-200) 6px
  );
}

/* Op de strip is de tijdbalk maar 46px hoog: daar is de pauze een dunne
   strook onderin, niet een vlak. Hij ligt bóven de lesblokken (eigen
   stapelorde, geen muisdoel): een pauze valt meestal middenin een les, en
   een strook die onder het blok schuilt is onzichtbaar precies wanneer hij
   iets zegt (Codex-review #386). */
.mw-pauze--strip {
  left: var(--mw-links);
  width: var(--mw-breed);
  bottom: 0;
  height: 6px;
  z-index: 2;
  pointer-events: none;
}

/* ---- Legenda onder de strip en het raster --------------------------------
   Alleen de vormen die déze week voorkomen (`legendaItems`): een legenda die
   uitlegt wat er niet staat is ruis. De tekens zijn exact de vlakken uit het
   raster, zodat de legenda niets nieuws introduceert. */
.mw-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mw-legenda-item {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Het legendateken is de kaart in het klein: dezelfde zachte tint als vlak, met
   de heldere kleur als band. Draagt de persoon meer dan één leerlijn, dan
   bestaat `--mw-pagina` niet en toont het teken de vórm in neutrale inkt — welke
   kleur een les heeft staat dan op de kaart zelf. */
.mw-legenda-teken {
  flex: none;
  width: 22px;
  height: 12px;
  background: var(--mw-pagina-zacht, var(--vms-ink-50));
  box-shadow: inset 4px 0 0 var(--mw-pagina, var(--vms-ink-900));
}

/* De standtekens tonen de vorm van hun kaart en niet die tint. */
.mw-legenda-teken--andere,
.mw-legenda-teken--inval,
.mw-legenda-teken--vervallen,
.mw-legenda-teken--pauze,
.mw-legenda-teken--kantoor,
.mw-legenda-teken--overleg {
  background: var(--card);
  box-shadow: none;
}

/* De uitzondering uit §4.2: een les in een andere leerlijn dan die van de
   pagina houdt haar band maar verliest haar vulling. Welke leerlijn dat is
   verschilt per blok, dus de legenda toont de vórm, niet één kleur. */
.mw-legenda-teken--andere {
  box-shadow: inset 4px 0 0 var(--vms-ink-400);
}

/* Inval: wit vlak, inktomtrek, band in de leerlijnkleur — dezelfde stand als op
   de kaart, waar de omtrek sinds 2026-09-02 de status draagt en niet de
   leerlijn. */
.mw-legenda-teken--inval {
  box-shadow:
    inset 4px 0 0 var(--mw-pagina, var(--vms-ink-400)),
    inset 0 0 0 var(--vt-lijn-dik) var(--vms-ink-900);
}

/* S8 — dienst: zwart-wit met een inktband. Kleur betekent leerlijn of status
   en een pleindienst of SLIM is geen van beide; zelfde teken als
   `.sr-legenda-teken--dienst` in het schoolraster. */
.mw-legenda-teken--dienst {
  background: var(--vms-white);
  box-shadow:
    inset 4px 0 0 var(--vms-ink-900),
    inset 0 0 0 var(--vt-lijn) var(--vms-ink-400);
}

.mw-legenda-teken--vervallen {
  background: var(--vms-ink-50);
  box-shadow:
    inset 4px 0 0 var(--vms-ink-400),
    inset 0 0 0 var(--vt-lijn) var(--vms-ink-400);
}

.mw-legenda-teken--pauze {
  background: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 5px,
    var(--vms-ink-200) 5px,
    var(--vms-ink-200) 6px
  );
  box-shadow: inset 0 0 0 1px var(--vms-ink-100);
}

.mw-legenda-teken--kantoor {
  background: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 7px,
    var(--vms-ink-100) 7px,
    var(--vms-ink-100) 8px
  );
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
}

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

.mw-nu--strip {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: var(--mw-links);
  width: 2px;
  background: var(--vms-ink-900);
}

.mw-raster {
  /* Zichtbaar zodra een pagina hem tekent. Mijn week neemt dit in zijn eigen
     basisregel terug tot >=1100px: daar is de weekstrip de mobiele vorm. */
  display: block;
  /* De normale 08:00–16:00-as schaalt mee met de viewport. DEC-045 breidt
     hem per heel uur uit zodra een geldig vast blok erbuiten valt.
     De 712px buiten de kolommen omvatten op de hoogste verbruiker
     (Rooster > Persoon) ook app-chrome, bediening, dagkop, legenda en
     pagina-eindruimte; boven ongeveer 1100px vensterhoogte rekt de as
     daarboven natuurlijk uit tot de bovengrens.

     De bodem is 0,8px/min = 48px/uur, en die maat is geen smaak: bij 0,8
     is een les van 45 minuten exact 36px hoog, en 36px is precies wat een
     blok nodig heeft voor zijn metaregel plus titel. Onder die bodem leest
     het raster als een streepjescode — je ziet dát er les is, niet welke.
     Tot 2026-09-02 lag de bodem op 0,6px/min (27px voor diezelfde les) en
     knipte een `max-height` de dag daarbovenop af op 240px: op een MacBook
     (venster 744px) bleef 175px van de 415px onzichtbaar. Sindsdien is de
     dag leidend en de viewport volgend. */
  --mw-as-minuten: 480;
  --mw-buitenruimte: 712px;
  --mw-minuut: clamp(
    0.8px,
    calc((100vh - var(--mw-buitenruimte)) / var(--mw-as-minuten)),
    1.25px
  );
  --mw-minuut: clamp(
    0.8px,
    calc((100dvh - var(--mw-buitenruimte)) / var(--mw-as-minuten)),
    1.25px
  );
  background: var(--card);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
  /* Geen tweede, onzichtbaar scrollvlak rond de dag: de rasterrand groeit
     met kop, as en legenda mee, zodat de hele dag er altijd staat. Past die
     niet binnen de viewport, dan scrollt de pagina en hangt de sticky dagkop
     aan de viewport — die heeft daar wél een verschuiving nodig, anders
     schuift hij onder de sticky app-balk door; die staat per pagina in
     mijn-week.css en personeel-rooster.css. Sinds 2026-09-02 geldt dit voor
     elke as, niet alleen de uitgebreide.

     Eén uitzondering, en die heeft een reden: staat het raster ín een
     horizontale scroller (Rooster > Persoon onder 1100px), dan is díé het
     scrollvlak van de dagkop en moet de verticale scroll binnen het raster
     blijven, anders blijft die kop nergens staan. personeel-rooster.css zet
     hem daar terug. visible is de fallback voor browsers zonder
     overflow-clip; met clip blijft alleen horizontale overloop begrensd. */
  overflow: visible;
  overflow-x: clip;
}

/* Een tweede, natuurlijke projectie voor papier. Op scherm blijft uitsluitend
   het geometrische raster zichtbaar; zie de printregel onderaan. */
.mw-print-overzicht {
  display: none;
}

.mw-raster-koppen {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--card);
}

.mw-raster-rij {
  display: grid;
  grid-template-columns: 52px repeat(5, minmax(0, 1fr));
}

.mw-raster--banen .mw-raster-rij {
  grid-template-columns: 52px var(--mw-dagbanen);
}

.mw-blok--raster.mw-blok--baan {
  left: calc(var(--mw-baan-links) + 4px);
  right: auto;
  width: calc(var(--mw-baan-breed) - 8px);
}

.mw-raster-dagkop {
  padding: 11px 12px 0;
  border-left: 1px solid var(--border-subtle);
}

.mw-raster-dagkop .vt-eyebrow {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.mw-raster-dagkop.is-vandaag .vt-eyebrow,
.mw-raster-dagkop.is-vandaag .mw-raster-datum {
  color: var(--text);
}

.mw-raster-datum {
  display: block;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--text-muted);
}

.mw-waar {
  border-bottom: var(--vt-lijn) solid var(--vms-ink-900);
}

.mw-waar-label {
  padding: 8px 8px 10px;
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-align: right;
}

.mw-waar-cel {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  min-width: 0;
  gap: 4px;
  padding: 8px 12px 10px;
  border-left: 1px solid var(--border-subtle);
}

.mw-waar-badge {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 3px 8px;
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mw-waar-badge.is-huidig {
  background: var(--vms-ink-900);
  color: var(--vms-white);
}

/* Geen school maar wel bezette tijd: kantoor of vakgroep is dan het
   antwoord op "waar". Dezelfde twee markeringen als de blokken zelf, zodat
   één patroon één ding betekent — en nooit een leerlijnkleur. */
.mw-waar-badge--kantoor {
  background: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 7px,
    var(--vms-ink-100) 7px,
    var(--vms-ink-100) 8px
  );
}

.mw-waar-badge--overleg {
  background: var(--vms-white);
  box-shadow: inset 0 0 0 var(--vt-lijn-dik) var(--vms-ink-900);
}

/* Vakantie is geen vrije dag (DEC-040 besluit 7): geen lessen, wél kantoor
   of taken. Een badge dus, maar in de rustige lezing van "vrij" — het is een
   mededeling, geen signaal, en draagt daarom geen statuskleur. */
.mw-waar-badge--vakantie {
  background: none;
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-400);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vms-ink-700);
}

.mw-waar-vrij {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.mw-kolommen {
  position: relative;
  height: calc(var(--mw-as-minuten) * var(--mw-minuut));
}

.mw-as {
  position: relative;
}

.mw-as-uur {
  position: absolute;
  top: calc(var(--mw-van) * var(--mw-minuut));
  right: 8px;
  z-index: 1;
  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);
}

.mw-as-uur:last-child {
  transform: translateY(calc(-100% - 4px));
}

.mw-kolom {
  position: relative;
  border-left: 1px solid var(--border-subtle);
  /* Eén herhaalde tegel per uur, uit exact dezelfde minuutschaal als blokken,
     pauzes, de nu-lijn en aslabels. */
  background-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(100% - 1px),
    var(--vms-ink-50) calc(100% - 1px),
    var(--vms-ink-50) 100%
  );
  background-repeat: repeat-y;
  background-size: 100% calc(60 * var(--mw-minuut));
}

/* De kinderpauze loopt over de volle kolombreedte, achter de blokken langs:
   hij hoort bij de dag, niet bij één les. */
.mw-pauze--raster {
  left: 0;
  right: 0;
  top: calc(var(--mw-van) * var(--mw-minuut));
  height: calc(var(--mw-duur) * var(--mw-minuut));
}

/* Het lesblok van één persoon draagt sinds 2026-09-02 dezelfde kaartvorm als
   het weekrooster van een school (`.sr-leskaart` in schoolraster.css): de
   zachte tint (`--ll-zacht`) is het vlak, de échte huisstijlkleur
   (`--ll-kleur`) is de band aan de kopse kant, en de tekst is inkt.

   Daarvóór vulde dit blok met `--ll-vulling`, de donkere AA-stap (#B02C06 voor
   techniek) met witte tekst. Die stap bestond omdat witte tekst op de heldere
   merkkleur geen AA haalt — maar hij maakte de week donkerder dan het merk, en
   twee roosters in dezelfde app kleurden verschillend. De heldere kleur staat
   nu op de plek waar hij niets hoeft te dragen behalve zichzelf.

   Vlak en band lopen via twee lokale rolvariabelen, zodat de standen hieronder
   (vervallen, inval, een andere leerlijn dan die van de pagina) alleen die
   rollen herdefiniëren en nooit de achtergrond-shorthand overschrijven. */
.mw-blok--raster {
  --mw-band: 6px;
  --mw-band-kleur: var(--ll-kleur, var(--vms-ink-900));
  --mw-vlak: var(--ll-zacht, var(--vms-white));
  position: absolute;
  left: 4px;
  right: 4px;
  top: calc(var(--mw-van) * var(--mw-minuut));
  height: calc(var(--mw-duur) * var(--mw-minuut));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  /* De verticale padding schaalt met de rasterhoogte, maar minder gulzig dan
     de 4 minuten die hier tot 2026-09-18 stonden. Reden: op de bodem van
     0,8px/min is een les van 45 minuten 36px hoog, en dat was precies
     berekend op een metaregel van 9px. Sinds de UI-schaal is die metaregel
     11px (`--fs-ui-xs`, de ondergrens), en dan telt de inhoud 11 + margin +
     17,25px titel op tot méér dan de 29,6px die 4 minuten padding overliet:
     de titel werd afgeknipt.

     Drie minuten laat 31,2px over en de titelmarge hieronder krimpt mee, dus
     de titel past weer met marge. Boven 2,33px/min verandert er niets — daar
     staat de cap van 7px. Let op dat de bodem geen randgeval is: de formule
     op `.mw-raster` valt op elk venster onder ~1100px terug op 0,8px/min, dus
     dit is de gewone laptopsituatie. */
  padding: clamp(2px, calc(3 * var(--mw-minuut)), 7px) 9px
    clamp(2px, calc(3 * var(--mw-minuut)), 7px) calc(var(--mw-band) + 9px);
  background:
    linear-gradient(var(--mw-band-kleur), var(--mw-band-kleur)) left /
      var(--mw-band) 100% no-repeat,
    var(--mw-vlak);
  color: var(--vms-ink-900);
  clip-path: polygon(
    var(--vt-schuin-s, 9px) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-s, 9px)),
    calc(100% - var(--vt-schuin-s, 9px)) 100%,
    0 100%,
    0 var(--vt-schuin-s, 9px)
  );
}

/* 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 hij anders in de
   vulling verdwijnt, maar op een zachte tint zou dat hem zwart maken. */
.mw-blok--raster:not(.mw-blok--vast) .mw-blok-meta .vt-ruit {
  --vt-ruit-kleur: var(--ll-kleur, currentColor);
}

/* S8 — dienst: een pleindienst of SLIM-blok is een schoolblok zonder
   leerlijn. Kleur betekent leerlijn of status en een dienst is geen van beide:
   het vlak blijft wit, de band is inkt in plaats van merkkleur en een dunne
   inktrand houdt de kaart leesbaar — dezelfde tekening als
   `.sr-leskaart--dienst` in schoolraster.css en het legendateken hierboven.
   De ruit volgt mee in inkt. Vervallen en inval houden hun eigen vorm: die
   regels staan lager en winnen op volgorde. */
.mw-blok--raster.mw-blok--dienst:not(.mw-blok--vervallen) {
  --mw-band-kleur: var(--vms-ink-900);
  --mw-vlak: var(--vms-white);
  --vt-ruit-kleur: var(--vms-ink-900);
  color: var(--vms-ink-900);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-400);
}

.mw-blok--raster.mw-blok--dienst:not(.mw-blok--vervallen)
  .mw-blok-meta
  .vt-ruit {
  --vt-ruit-kleur: var(--vms-ink-900);
}

.mw-blok--strip.mw-blok--dienst:not(.mw-blok--vervallen) {
  background: var(--vms-white);
  box-shadow:
    inset 4px 0 0 var(--vms-ink-900),
    inset 0 0 0 var(--vt-lijn) var(--vms-ink-400);
}

/* DEC-045: vaste blokken wijken voor werk dat werkelijk doorgaat. De laag is
   expliciet en dus niet afhankelijk van starttijd of DOM-sorteervolgorde. */
.mw-blok--raster.mw-blok--vast,
.mw-blok--strip.mw-blok--vast {
  z-index: 0;
}

.mw-blok--raster:not(.mw-blok--vast),
.mw-blok--strip:not(.mw-blok--vast) {
  z-index: 1;
}

.mw-blok-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 2px 6px;
  min-width: 0;
  line-height: 1;
}

.mw-blok-meta-kern {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.mw-blok-meta .vt-ruit {
  --vt-ruit-kleur: currentColor;
}

.mw-blok-ll {
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.1em;
  line-height: 1;
  color: inherit;
}

.mw-blok-tijd {
  flex: none;
  margin-left: auto;
  font-family: var(--font-label);
  font-size: var(--fs-ui-xs);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.mw-blok-titel {
  display: block;
  /* Schaalt mee met het raster, net als de blokpadding: op de bodem van
     0,8px/min is elke pixel er een, hoger op de schaal blijft de scheiding
     tussen metaregel en titel de volle 2px. */
  margin-top: clamp(1px, calc(2 * var(--mw-minuut)), 2px);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.15;
}

.mw-blok-wie {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.8125rem;
  line-height: 1.2;
  opacity: 0.88;
}

.mw-blok--raster.mw-blok--vervallen {
  --mw-band-kleur: var(--vms-ink-400);
  --mw-vlak: var(--vms-ink-50);
  color: var(--text-muted);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-400);
}

.mw-blok--raster.mw-blok--vervallen .mw-blok-titel {
  text-decoration: line-through;
}

[data-paginaleerlijn='groen']
  .mw-blok--raster[data-leerlijn]:not([data-leerlijn='groen']):not(
    .mw-blok--inval
  ),
[data-paginaleerlijn='gezond']
  .mw-blok--raster[data-leerlijn]:not([data-leerlijn='gezond']):not(
    .mw-blok--inval
  ),
[data-paginaleerlijn='techniek']
  .mw-blok--raster[data-leerlijn]:not([data-leerlijn='techniek']):not(
    .mw-blok--inval
  ),
[data-paginaleerlijn='filosofie']
  .mw-blok--raster[data-leerlijn]:not([data-leerlijn='filosofie']):not(
    .mw-blok--inval
  ),
[data-paginaleerlijn='budo']
  .mw-blok--raster[data-leerlijn]:not([data-leerlijn='budo']):not(
    .mw-blok--inval
  ) {
  /* Draagt de persoon één leerlijn, dan blijft die tint voorbehouden aan haar
     eigen lessen; de andere leerlijnen houden hun band maar verliezen hun
     vulling. Eén verschil — het vlak — en geen tweede ringbetekenis ernaast:
     de omtrek zegt in deze vormtaal status, en die is hier niet anders. */
  --mw-vlak: var(--card);
  color: var(--text);
}

[data-paginaleerlijn='groen']
  .mw-blok--raster[data-leerlijn]:not([data-leerlijn='groen']):not(
    .mw-blok--inval
  )
  .mw-blok-ll,
[data-paginaleerlijn='gezond']
  .mw-blok--raster[data-leerlijn]:not([data-leerlijn='gezond']):not(
    .mw-blok--inval
  )
  .mw-blok-ll,
[data-paginaleerlijn='techniek']
  .mw-blok--raster[data-leerlijn]:not([data-leerlijn='techniek']):not(
    .mw-blok--inval
  )
  .mw-blok-ll,
[data-paginaleerlijn='filosofie']
  .mw-blok--raster[data-leerlijn]:not([data-leerlijn='filosofie']):not(
    .mw-blok--inval
  )
  .mw-blok-ll,
[data-paginaleerlijn='budo']
  .mw-blok--raster[data-leerlijn]:not([data-leerlijn='budo']):not(
    .mw-blok--inval
  )
  .mw-blok-ll {
  color: var(--ll-ink);
}

/* Inval is een statusvorm, geen tweede kleurbetekenis. Het vlak wordt wit en
   de omtrek inkt; de leerlijn blijft in de band en de ruit staan. De omtrek was
   hier tot 2026-09-02 de leerlijnkleur, maar sinds de kaart een band draagt zou
   dat de leerlijn twee keer zeggen en de status geen eigen teken geven —
   dezelfde afspraak als in het schoolrooster: kleur is leerlijn, omtrek is
   status. De mobiele tijdbaan (`.mw-blok--strip`) houdt haar gekleurde omtrek
   wél: die heeft geen band waarin de leerlijn al staat. */
.mw-blok--raster.mw-blok--inval:not(.mw-blok--vervallen) {
  --mw-vlak: var(--card);
  color: var(--text);
  box-shadow: inset 0 0 0 var(--vt-lijn-dik) var(--vms-ink-900);
}

.mw-blok--strip.mw-blok--inval:not(.mw-blok--vervallen) .mw-blok-meta .vt-ruit {
  --vt-ruit-kleur: var(--ll-kleur, currentColor);
}

/* Een lesblok in het raster is sinds DEC-040 besluit 7 de disclosure naar
   het lesdetail. De knopreset staat hier, ná `.mw-blok--raster`, zodat het
   vlak zijn vulling houdt en alleen het UA-knopgedrag verdwijnt. De
   open-stand markeert met een `outline`, niet met een `box-shadow`: die
   laatste draagt hierboven al de omtrek van een les in een andere
   leerlijn. */
.mw-blok--knop {
  appearance: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* De ring ligt bewust *binnen* het blok (negatieve offset) en in
   `currentColor`: het blok draagt zijn eigen `clip-path`, en die snijdt
   alles buiten de vorm weg — een outline eromheen zou onzichtbaar zijn.
   `currentColor` volgt de vulling mee: wit op een leerlijnvlak, inkt op een
   vervallen of vast blok. */
.mw-blok--knop:focus-visible {
  outline: var(--vt-lijn-dik) solid currentColor;
  outline-offset: -4px;
}

.mw-blok--knop[aria-expanded='true'] {
  outline: var(--vt-lijn) solid currentColor;
  outline-offset: -4px;
}

.mw-nu--raster {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--mw-van) * var(--mw-minuut));
  height: 2px;
  background: var(--vms-ink-900);
  z-index: 3;
}

/* ---- Kantoor en vakgroepoverleg (`medewerkers.vaste_blokken`) ------------
   Vaste intervallen zijn géén lessen: hun vlak draagt nooit een leerlijnkleur
   en ze tellen niet mee in de weektotalen. Dezelfde neutrale, gestreepte
   lezing als in het roosterpaneel van de planner, zodat één patroon één ding
   betekent. De soort staat sinds DEC-045 op ieder blok:
     Kantoor : 1.5px inktrand + 135°-arcering
     Overleg : 2.5px inktrand op wit, met de leerlijnruit van de vakgroep */
.mw-blok--vast {
  /* Kantoor en overleg zijn geen lessen en dragen dus geen leerlijnband; zonder
     band hoeft de tekst er ook niet voor opzij (`.mw-blok--raster` rekent zijn
     linkerpadding uit deze maat). */
  --mw-band: 0px;
  background: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 7px,
    var(--vms-ink-100) 7px,
    var(--vms-ink-100) 8px
  );
  box-shadow: inset 0 0 0 var(--vt-lijn, 1.5px) var(--vms-ink-900);
  color: var(--vms-ink-900);
}

.mw-blok--overleg {
  background: var(--vms-white);
  box-shadow: inset 0 0 0 var(--vt-lijn-dik) var(--vms-ink-900);
}

/* De vakgroepruit staat ín het blok en draagt als enige de leerlijnkleur.
   `.mw-blok-meta .vt-ruit` zet hem anders op `currentColor`; deze regel is
   specifieker en wint. */
.mw-blok--vast .mw-blok-meta .vt-ruit[data-leerlijn] {
  --vt-ruit-kleur: var(--ll-kleur);
}

@media print {
  .mw-raster {
    /* A4 liggend met 12mm marge laat naast de paginakop circa 560px over.
       De basisas gebruikt 0,75px/min. Een uitgebreide DEC-045-as wordt niet
       tot 0,5px/min samengedrukt: dan past de bestaande tekst niet meer in een
       halfuur. In dat geval staat hieronder een chronologische daglijst met
       exacte tijden en volledige lesnamen op hetzelfde vel. */
    --mw-minuut: 0.75px;
    max-height: none;
    overflow: visible;
    break-inside: auto;
    /* De leerlijn van een blok zit in zijn vulling en zijn band, en dus in
       achtergrondlagen. Zonder deze regel staat de printsubtree op de
       initiële `economy` en mag de browser die lagen weglaten: dan is de kaart
       zwart-op-wit en is de leerlijn nergens meer te zien — niet in het
       raster, niet in de daglijst en niet in de legenda, die alle drie onder
       deze root hangen. `.sr-raster-root` in schoolraster.css draagt dezelfde
       regel om dezelfde reden. */
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .mw-raster-koppen {
    position: static;
  }

  :is(
      .mw-raster--as-540,
      .mw-raster--as-600,
      .mw-raster--as-660,
      .mw-raster--as-720
    )
    .mw-raster-koppen,
  :is(
      .mw-raster--as-540,
      .mw-raster--as-600,
      .mw-raster--as-660,
      .mw-raster--as-720
    )
    .mw-kolommen {
    display: none;
  }

  :is(
      .mw-raster--as-540,
      .mw-raster--as-600,
      .mw-raster--as-660,
      .mw-raster--as-720
    )
    .mw-print-overzicht {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-bottom: var(--vt-lijn) solid var(--vms-ink-900);
  }

  .mw-print-dag {
    min-width: 0;
    padding: 8px;
    border-left: 1px solid var(--border-subtle);
  }

  .mw-print-dag:first-child {
    border-left: 0;
  }

  .mw-print-dagkop {
    margin: 0 0 6px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .mw-print-lijst {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Dezelfde kaart op papier: zachte tint als vlak, de huisstijlkleur als band,
     inkt als tekst. De band is een achtergrondlaag en geen `box-shadow`, zodat
     de omtrek die schaduw houdt voor wat zij zegt — de rand van het blok. */
  .mw-print-blok {
    min-width: 0;
    overflow: visible;
    padding: 6px 6px 6px 12px;
    background:
      linear-gradient(
          var(--ll-kleur, var(--vms-ink-900)),
          var(--ll-kleur, var(--vms-ink-900))
        )
        left / 4px 100% no-repeat,
      var(--ll-zacht, var(--vms-white));
    color: var(--vms-ink-900);
    box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
    break-inside: avoid;
  }

  .mw-print-blok--vast {
    padding: 6px;
    background: repeating-linear-gradient(
      135deg,
      var(--vms-white) 0,
      var(--vms-white) 7px,
      var(--vms-ink-100) 7px,
      var(--vms-ink-100) 8px
    );
    color: var(--vms-ink-900);
  }

  .mw-print-blok--overleg {
    padding: 6px;
    background: var(--vms-white);
    color: var(--vms-ink-900);
    box-shadow: inset 0 0 0 var(--vt-lijn-dik) var(--vms-ink-900);
  }

  .mw-print-blok--vervallen {
    background:
      linear-gradient(var(--vms-ink-400), var(--vms-ink-400)) left / 4px 100%
        no-repeat,
      var(--vms-ink-50);
    color: var(--text-muted);
  }

  .mw-print-blok .mw-blok-titel,
  .mw-print-blok .mw-blok-wie {
    overflow-wrap: anywhere;
  }

  .mw-print-blok .mw-blok-ll,
  .mw-print-blok .mw-blok-tijd,
  .mw-print-school {
    font-size: 0.75rem;
    line-height: 1.2;
  }

  .mw-print-school {
    display: block;
    margin-top: 2px;
    font-family: var(--font-body);
    font-weight: 300;
  }

  .mw-print-vrij {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--text-muted);
  }
}