/* ============================================================
   Mijn week — inzage voor docent, assistent en stagiair
   ============================================================
   Rooster & inval fase 3 (handoff "Rooster & inval fase 3",
   §4.1 mobiel `7b` en §4.2 desktop `8a`). 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.

   Mobiel (390px) is de basis; ≥1100px is dezelfde HTML met een
   tweekolomsraster. De weekstrip (mobiel) en het weekraster
   (desktop) worden allebei opgebouwd; de media query kiest.

   Het **weekraster** zelf staat sinds 2026-08-30 in weekraster.css
   (gedeeld met het Rooster-scherm van de planner), net als de
   leerlijn-rolvariabelen en de paginakleur. Link dat bestand vóór
   dit bestand: deze pagina neemt er `display` van terug.
   ============================================================ */

.is-hidden {
  display: none !important;
}

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

  .mijn-week-page,
  .mijn-week-page .mw,
  .mijn-week-page .mw-inhoud,
  .mijn-week-page .mw-week {
    overflow: visible !important;
  }

  .mijn-week-page .mw {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* Papier is de volledige week, niet de interactieve dashboardkolom. Zo
     delen Mijn week en Rooster > Persoon exact hetzelfde raster en past de
     kop plus de waarheidsgetrouwe (zo nodig uitgebreide) as op één vel. */
  .mijn-week-page .mw-inhoud {
    display: block;
    padding: 0;
  }

  .mijn-week-page .mw-kop {
    margin: 0 0 0.5rem;
    padding: 0 0 0.5rem;
    box-shadow: none;
    border-bottom: 2px solid var(--vms-ink-900);
  }

  .mijn-week-page .mw-kop .mw-nav,
  .mijn-week-page .mw-weekkeuze,
  .mijn-week-page .mw-status,
  .mijn-week-page .mw-fout,
  .mijn-week-page .mw-herlaad,
  .mijn-week-page .mw-melding,
  .mijn-week-page .mw-noot,
  .mijn-week-page .mw-straks,
  .mijn-week-page .mw-wijzigingen,
  .mijn-week-page .mw-ritme,
  .mijn-week-page .mw-lesdetail,
  .mijn-week-page .mw-waarje,
  .mijn-week-page .mw-accounthouder,
  .mijn-week-page .mw-voet {
    display: none !important;
  }

  .mijn-week-page .mw-week {
    display: block;
    padding: 0;
  }

  .mijn-week-page .mw-raster {
    display: block;
    width: 100%;
  }

  .mijn-week-page .mw-strip,
  .mijn-week-page .mw-dag {
    display: none;
  }
}

/* Buiten een leerlijn: de ruit is grijs — ink-400 is een markerkleur, nooit
   een tekstkleur. De leerlijn-rolvariabelen zelf (`--ll-kleur` en familie) en
   de paginakleur `--mw-pagina` staan sinds 2026-08-30 in weekraster.css, dat
   deze pagina vóór dit bestand linkt. */
.mw-wijz-rij--stil {
  --vt-ruit-kleur: var(--vms-ink-400);
}

/* ============================================================
   Pagina
   ============================================================ */

.mijn-week-page {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-heading);
}

.mw {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 0 var(--space-7);
}

.mw-status,
.mw-fout,
.mw-herlaad {
  margin: 0;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
}

.mw-fout {
  color: var(--danger);
  font-weight: 400;
}

.mw-melding {
  margin: var(--space-5);
  padding: var(--space-5) var(--space-5) var(--space-6);
}

.mw-melding-titel {
  margin: 0 0 var(--space-2);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.mw-melding-tekst {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.mw-melding-adres {
  margin: 0;
  color: var(--text-muted);
}

/* ============================================================
   Kop, Straks en de wijzigingenstrook — samen het zwarte vlak
   ============================================================ */

.mw-kop,
.mw-straks,
.mw-wijzigingen {
  background: var(--vms-ink-900);
  color: var(--vms-white);
  --vt-focus-kleur: var(--vms-white);
}

.mw-kop {
  padding: var(--space-6) var(--space-5) var(--space-3);
}

.mw-kop-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Alleen de vorm; de kleur komt van .vt-eyebrow (--text-muted) en wordt
   hieronder per vlak overschreven. Zonder die scoping stond de eyebrow van
   "Waar je bent" wit op wit. */
.mw-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

/* Op het zwarte vlak: witte tekst, leerlijnkleur alleen in de ruit. De
   prototypes kleuren deze eyebrow in de leerlijn zelf, maar Sport (#9B18DB)
   haalt op zwart 2,8:1 — onder AA. De kleurcodering blijft staan in de ruit
   (marker, geen tekst) en in de leerlijnnaam eronder. */
.mw-kop .mw-eyebrow,
.mw-straks .mw-eyebrow {
  color: rgb(255 255 255 / 0.72);
}

.mw-kop .mw-eyebrow {
  --vt-ruit-kleur: var(--vms-white);
  --vt-ruit-maat: 8px;
}

.mw-nav {
  display: flex;
  gap: 6px;
}

.mw-weekkeuze {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.mw-weekkeuze input {
  min-height: var(--vt-raakvlak);
  min-width: 0;
  max-width: 100%;
  padding: 0 var(--space-2);
  border: var(--vt-lijn) solid currentColor;
  border-radius: 0;
  background: var(--vms-white);
  color: var(--vms-ink-900);
  font: inherit;
}

.mw-weekkeuze input:focus-visible {
  outline: var(--vt-lijn-dik) solid var(--vt-focus-kleur);
  outline-offset: 2px;
}

.mw-weekkeuze p {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--fs-small);
}

.mw-weekkeuze .mw-weekkeuze-fout {
  font-weight: var(--fw-body-em);
}

.mw-navknop {
  min-width: var(--vt-raakvlak);
  height: var(--vt-raakvlak);
  padding: 0 var(--space-2);
  background: transparent;
  color: var(--vms-white);
  box-shadow: inset 0 0 0 var(--vt-lijn) rgb(255 255 255 / 0.3);
  border: none;
  border-radius: 0;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  cursor: pointer;
  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)
  );
}

.mw-navknop--tekst {
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mw-navknop:hover {
  background: rgb(255 255 255 / 0.14);
}

.mw-navknop:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mw-navknop:focus-visible {
  outline: var(--vt-lijn-dik) solid var(--vms-white);
  outline-offset: calc(-1 * var(--vt-lijn-dik) - 2px);
}

.mw-titel {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.mw-samenvatting {
  margin: var(--space-1) 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  color: rgb(255 255 255 / 0.72);
}

/* ---- Eerlijkheidsregels boven de week ----
   Twee smalle regels tussen de kop en "Straks": een afgesloten week die live
   herrekend wordt, en toewijzingen die nergens op uitkomen. Ze staan buiten
   de zwarte kop, dus op de paginakleur — geen statuskleur als vlak, alleen
   een inktlijn links, want dit zijn mededelingen en geen alarm. */

.mw-noot {
  margin: var(--space-3) 0 0;
  padding: 10px 14px;
  background: var(--vms-ink-50);
  box-shadow: inset var(--vt-lijn) 0 0 var(--vms-ink-900);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--text);
}

/* De wees-regel verdient de nadruk van "let op", maar blijft tekst: de
   statuskleur zit in de lijn, niet in een vulling (vormtaal, §3). */
.mw-noot--let-op {
  box-shadow: inset var(--vt-lijn-dik) 0 0 var(--warning);
}

/* ---- Straks ---- */

.mw-straks {
  padding: var(--space-3) var(--space-5) var(--space-5);
}

.mw-straks-tijd {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: var(--space-1) 0 0;
}

.mw-straks-klok {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.mw-straks-ruit {
  --vt-ruit-kleur: var(--ll-kleur, var(--vms-white));
}

.mw-straks-plek {
  margin: 6px 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mw-straks-context,
.mw-straks-leeg {
  margin: 2px 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.4;
  color: rgb(255 255 255 / 0.72);
  text-wrap: pretty;
}

.mw-straks-knop {
  display: none; /* mobiel staat de knop op de leskaart (handoff §4.1) */
  margin-top: var(--space-4);
}

/* ---- Wijzigingenstrook ---- */

.mw-wijzigingen {
  padding: 0 var(--space-5) var(--space-5);
}

.mw-wijz-knop {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--vt-raakvlak);
  padding: 0 var(--space-4);
  background: transparent;
  color: var(--vms-white);
  box-shadow: inset 0 0 0 var(--vt-lijn) rgb(255 255 255 / 0.28);
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  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)
  );
}

.mw-wijz-knop:hover {
  background: rgb(255 255 255 / 0.1);
}

.mw-wijz-knop:focus-visible {
  outline: var(--vt-lijn-dik) solid var(--vms-white);
  outline-offset: calc(-1 * var(--vt-lijn-dik) - 2px);
}

.mw-wijz-knop .vt-ruit {
  --vt-ruit-kleur: var(--vms-white);
}

.mw-wijz-label {
  flex: 1;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
}

.mw-wijz-chevron {
  color: rgb(255 255 255 / 0.7);
  font-size: 1rem;
  transition: rotate var(--dur-fast) var(--ease-soft);
}

.mw-wijz-knop[aria-expanded='true'] .mw-wijz-chevron {
  rotate: 90deg;
}

.mw-wijz-lijst {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mw-wijz-rij {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.mw-wijz-rij .vt-ruit {
  margin-top: 5px;
}

.mw-wijz-tekst {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: rgb(255 255 255 / 0.9);
  text-wrap: pretty;
}

/* ============================================================
   Weekstrip (mobiel)
   ============================================================ */

.mw-week {
  display: block;
  padding: var(--space-4) var(--space-5) 0;
}

/* Mobiel is de strip de weekvorm. Deze regel neemt de `display: block` uit
   weekraster.css terug met dezelfde specificiteit — vandaar dat mijn-week.html
   dat bestand vóór dit bestand linkt — en de media query hieronder zet hem op
   ≥1100px weer aan. */
.mw-raster {
  display: none;
}

.mw-strip-schaal {
  display: flex;
  justify-content: space-between;
  padding-left: 36px;
  margin-bottom: 6px;
  font-family: var(--font-label);
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.mw-strip-rijen {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mw-strip-rij {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--vt-raakvlak);
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
}

.mw-strip-dag {
  width: 28px;
  flex: none;
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mw-strip-rij.is-actief .mw-strip-dag {
  color: var(--text);
  font-weight: 600;
}

.mw-baan {
  position: relative;
  display: block;
  flex: 1;
  height: var(--vt-raakvlak);
  background: var(--vms-ink-100);
}

.mw-strip-rij.is-actief .mw-baan {
  box-shadow: inset 0 0 0 2px var(--vms-ink-900);
}

.mw-strip-rij:focus-visible .mw-baan {
  outline: var(--vt-lijn-dik) solid var(--vms-ink-900);
  outline-offset: 2px;
}

.mw-baan-leeg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: 11px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.875rem;
  /* ink-500 haalt op ink-100 maar 4,38:1 — net te weinig voor AA. */
  color: var(--vms-ink-700);
}

.mw-strip-noot {
  margin: 9px 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* ============================================================
   Daglijst
   ============================================================ */

.mw-dag {
  padding: var(--space-5) var(--space-5) 0;
}

.mw-dag-kop {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  --vt-ruit-kleur: var(--vms-ink-900);
}

.mw-dag-kop .vt-label {
  flex: none;
  font-size: 0.6875rem;
  letter-spacing: var(--ls-eyebrow);
}

.mw-lessen {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.mw-les {
  display: block;
  padding: 15px 16px;
}

/* De tijdkolom plus de titel zijn samen de disclosure naar het lesdetail
   (DEC-040 besluit 7). Kantoor en vakgroep krijgen dezelfde vorm als <div>:
   dezelfde opmaak, geen belofte van een detail dat er niet is. */
.mw-les-open {
  display: flex;
  gap: 13px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}

.mw-les-open--knop {
  cursor: pointer;
}

.mw-les-open--knop:focus-visible {
  outline: var(--vt-lijn-dik) solid var(--vms-ink-900);
  outline-offset: 3px;
}

.mw-les-open--knop[aria-expanded='true'] {
  outline: var(--vt-lijn) solid var(--vms-ink-900);
  outline-offset: 3px;
}

.mw-les-kop {
  flex: 1;
  min-width: 0;
}

/* Wat níét in de knop past — "met wie", badges, de invalbriefknop — lijnt uit
   onder de titel (50px tijdkolom + 13px gat), niet onder de tijd. */
.mw-les-rest {
  margin-left: 63px;
}

.mw-les-rest:empty {
  display: none;
}

.mw-les--inval {
  background: var(--ll-zacht, var(--vms-ink-50));
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
}

.mw-les--vervallen {
  background: var(--vms-ink-50);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-400);
  --vt-ruit-kleur: var(--vms-ink-400);
}

.mw-les-tijd {
  flex: none;
  width: 50px;
}

.mw-les-start {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
}

.mw-les--vervallen .mw-les-start {
  color: var(--text-muted);
  text-decoration: line-through;
}

.mw-les-eind {
  display: block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.mw-les-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 3px;
}

.mw-les-ll {
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.12em;
  color: var(--ll-ink, var(--text-muted));
}

.mw-les-plek {
  display: block;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
}

.mw-les--vervallen .mw-les-plek {
  color: var(--text-muted);
}

.mw-les-wie,
.mw-les-badges {
  margin: 2px 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--vms-ink-700);
  text-wrap: pretty;
}

.mw-les-badges {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.mw-les-knop {
  margin-top: 11px;
}

.mw-dag-leeg {
  padding: 22px 18px;
}

.mw-dag-leeg-tekst {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--vms-ink-700);
}

/* ============================================================
   Lesdetail (DEC-040 besluit 7)
   ============================================================
   "Een tik op een lesblok toont de precieze tijd, met wie en
   het lokaal." Eén blok voor de hele pagina: het weekraster
   (desktop) en de leskaart (mobiel) openen hetzelfde detail.
   Vorm is de gewone kaart uit vormtaal.css; de leerlijnkleur
   zit alleen in de ruit en de eyebrow, want `--text-muted` haalt
   op een leerlijnvulling geen AA. */

.mw-lesdetail {
  margin: var(--space-4) var(--space-5) 0;
  padding: 16px 18px 20px;
}

/* Binnen de kaart: `.vt-kaart` schuint met `clip-path` af, en dat snijdt een
   outline buiten de vorm weg. */
.mw-lesdetail:focus-visible {
  outline: var(--vt-lijn-dik) solid var(--vms-ink-900);
  outline-offset: -5px;
}

.mw-detail-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.mw-detail-titel {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.mw-detail-sluit {
  flex: none;
  min-height: var(--vt-raakvlak);
  padding: 0 4px;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
}

.mw-detail-sluit:hover {
  color: var(--text);
}

.mw-detail-sluit:focus-visible {
  outline: var(--vt-lijn-dik) solid var(--vms-ink-900);
  outline-offset: 2px;
}

.mw-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 4px 0 0;
}

.mw-detail-ll {
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.12em;
  color: var(--ll-ink, var(--text-muted));
}

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

/* Label links, waarde rechts — één raster, zodat de waarden onder elkaar
   uitlijnen en de labels als stille kolom leesbaar blijven. */
.mw-detail-lijst {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 6px var(--space-4);
  margin: var(--space-4) 0 0;
}

.mw-detail-label {
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mw-detail-waarde {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--vms-ink-700);
  text-wrap: pretty;
}

.mw-detail-badges,
.mw-detail-inval,
.mw-detail-vervalt {
  margin: var(--space-3) 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.mw-detail-inval,
.mw-detail-vervalt {
  color: var(--vms-ink-700);
}

.mw-detail-link {
  margin-top: var(--space-4);
}

/* ============================================================
   Waar je bent
   ============================================================ */

.mw-waarje {
  margin: var(--space-5) var(--space-5) 0;
  padding: 18px 20px;
  --vt-ruit-kleur: var(--vms-ink-900);
}

.mw-waarje-lijst {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mw-waarje-rij {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.mw-waarje-naam {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.mw-waarje-naam:hover {
  border-bottom-color: var(--vms-ink-900);
}

.mw-waarje-dagen {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.mw-waarje-noot {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ============================================================
   Voet
   ============================================================ */

.mw-voet {
  padding: 22px var(--space-5) var(--space-7);
}

.mw-voet-doel {
  margin: 0;
}

.mw-voet-link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 52px;
  padding: 0 18px;
  background: var(--card);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
  color: var(--text);
  text-decoration: none;
  --vt-ruit-kleur: var(--vms-ink-900);
  clip-path: polygon(
    var(--vt-schuin-m) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-m)),
    calc(100% - var(--vt-schuin-m)) 100%,
    0 100%,
    0 var(--vt-schuin-m)
  );
}

.mw-voet-link:hover {
  background: var(--vms-ink-100);
}

.mw-voet-link .vt-label {
  flex: 1;
}

.mw-voet-chevron {
  color: var(--text-muted);
}

.mw-voet-tijd {
  margin: var(--space-3) 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* ============================================================
   Desktop — het weekraster (handoff §4.2, `8a`)
   ============================================================
   Dezelfde HTML: de strip en de daglijst gaan uit, het raster
   aan, en de rechterkolom (296px) krijgt Straks, Waar je bent
   en de wijzigingen. */

@media (min-width: 1100px) {
  .mw-inhoud {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 296px;
    /* De lege vijfde rij vangt de resthoogte van het raster op; zonder die
       rij zou de rechterkolom over de volle hoogte uitgerekt worden. */
    grid-template-areas:
      'kop kop'
      'week straks'
      'week waar'
      'week wijz'
      'week .'
      'detail .'
      'ritme .'
      'ah ah'
      'voet voet';
    grid-template-rows: auto auto auto auto 1fr auto auto auto auto;
    gap: var(--space-4);
    align-items: start;
    padding: 0 var(--space-6) var(--space-6);
  }

  .mw-kop {
    grid-area: kop;
    background: var(--card);
    color: var(--text);
    box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
    padding: var(--space-5) var(--space-5) var(--space-4);
    margin-top: var(--space-5);
    --vt-focus-kleur: var(--vms-ink-900);
  }

  .mw-kop .mw-eyebrow {
    color: var(--text-muted);
    --vt-ruit-kleur: var(--vms-ink-900);
  }

  .mw-kop .mw-samenvatting {
    color: var(--text-muted);
  }

  .mw-titel {
    font-size: 2.25rem;
  }

  .mw-navknop {
    color: var(--text);
    box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
    min-height: 40px;
    height: 40px;
  }

  .mw-navknop:hover {
    background: var(--vms-ink-100);
  }

  .mw-navknop:focus-visible {
    outline-color: var(--vms-ink-900);
  }

  /* Straks kleurt in de leerlijn van de les; zonder leerlijn zwart. */
  /* Een vlak mét tekst gebruikt de AA-vulling uit tokens.css (§ "AA-vullingen
     voor controls met tekst"), niet de heldere merkkleur: wit op #1E96FC of
     #F5420A haalt geen 4,5:1. De heldere kleur blijft de ruit en de omtrek. */
  .mw-straks {
    grid-area: straks;
    background: var(--ll-vulling, var(--vms-ink-900));
    color: var(--ll-op, var(--vms-white));
    padding: 20px 22px;
  }

  .mw-straks .mw-eyebrow,
  .mw-straks .mw-straks-context,
  .mw-straks .mw-straks-leeg {
    color: inherit;
    opacity: 0.85;
  }

  .mw-straks-ruit {
    --vt-ruit-kleur: currentColor;
  }

  .mw-straks-klok {
    font-size: 2.8rem;
  }

  .mw-straks-knop {
    display: inline-flex;
    background: var(--vms-white);
    color: var(--vms-ink-900);
    box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-white);
    min-height: 44px;
  }

  .mw-waarje {
    grid-area: waar;
    margin: 0;
  }

  .mw-wijzigingen {
    grid-area: wijz;
    background: var(--card);
    color: var(--text);
    padding: 0;
    box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
    --vt-focus-kleur: var(--vms-ink-900);
  }

  .mw-wijz-knop {
    color: var(--text);
    box-shadow: none;
    clip-path: none;
    padding: 0 20px;
    min-height: 52px;
  }

  .mw-wijz-knop:hover {
    background: var(--vms-ink-100);
  }

  .mw-wijz-knop:focus-visible {
    outline-color: var(--vms-ink-900);
    outline-offset: -4px;
  }

  .mw-wijz-knop .vt-ruit {
    --vt-ruit-kleur: var(--vms-ink-900);
  }

  .mw-wijz-chevron {
    color: var(--text-muted);
  }

  .mw-wijz-lijst {
    margin: 0;
    padding: 0 20px 18px;
  }

  .mw-wijz-tekst {
    color: var(--text);
  }

  .mw-week {
    grid-area: week;
    padding: 0;
  }

  .mw-strip,
  .mw-dag {
    display: none;
  }

  /* De ritmestrook spant dezelfde kolom als het raster (grid-area `ritme`
     naast `week`). Haar marge, padding en gap voor desktop staan helemaal
     onderaan dit bestand, ná de basisregel: dezelfde specificiteit, dus de
     volgorde beslist (Codex-review #386). */
  .mw-ritme {
    grid-area: ritme;
  }

  /* De tekening van het raster staat in weekraster.css (gedeeld met het
     Rooster-scherm van de planner). Hier staat alleen de paginakeuze: op
     desktop is het raster de weekvorm, mobiel de strip hierboven. */
  .mw-raster {
    display: block;
  }

  /* Het raster knot niet meer af en scrolt dus met de pagina; daardoor hangt
     zijn sticky dagkop aan de viewport in plaats van aan een eigen scrollvlak.
     Zonder deze verschuiving schuift die kop onder de app-balk door, die zelf
     sticky op `top: 0` staat met een hogere stapelorde (app-nav.css). Dezelfde
     regel staat in personeel-rooster.css voor Rooster > Persoon; ze staan per
     pagina omdat weekraster.css niets van paginachrome hoort te weten. */
  .mw-raster-koppen {
    top: var(--app-bar-h, 71.6px);
  }

  .mw-lesdetail {
    grid-area: detail;
    margin: 0;
  }

  .mw-voet {
    grid-area: voet;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0 0;
  }

  .mw-voet-link {
    min-height: 44px;
    flex: none;
  }

  .mw-voet-tijd {
    margin: 0;
  }

  .mw {
    padding-bottom: var(--space-6);
  }

  .mw-status,
  .mw-fout,
  .mw-herlaad {
    margin-left: var(--space-6);
    margin-right: var(--space-6);
    padding-left: 0;
    padding-right: 0;
  }

  /* De meldingskaart ("Nog geen rooster gekoppeld") houdt haar vulling: zij
     draagt een inktrand, en zonder vulling stond de kop tegen die rand aan
     (audit 2026-09-08). Alleen de buitenmarge volgt de regels hierboven. */
  .mw-melding {
    margin-left: var(--space-6);
    margin-right: var(--space-6);
  }
}

/* ============================================================
   Mijn scholen (mijn-scholen.html)
   ============================================================
   Buiten de designronde ontworpen: bewust minimaal en met exact
   dezelfde bouwstenen als "Mijn week" — zelfde kop, zelfde
   kaarten, zelfde voet. Deze stylesheet is daarom de gedeelde
   inzage-stylesheet, niet alleen die van de week. */

.ms-lijst {
  padding: var(--space-5) var(--space-5) 0;
}

.ms-kaarten {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-4);
}

.ms-kaart {
  padding: 18px 20px;
  --vt-ruit-kleur: var(--vms-ink-900);
  --vt-ruit-maat: 11px;
  /* Anker voor de achterkant van de omklapkaart (DEC-040). */
  position: relative;
}

.ms-kop {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ms-naam {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* De naam is sinds DEC-040 de disclosure van de kaart. Deze reset houdt hem
   visueel exact de kop die hij was; de focusring komt uit de globale
   `:focus-visible` in tokens.css. */
.ms-naam-knop {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* De kop (naam = disclosure) blijft zichtbaar; alleen de romp klapt om. De
   achterkant ligt absoluut over die romp: openklappen verandert de hoogte van
   de kaart niet en de kaarten eronder verspringen niet; de afgedekte voorkant
   gaat uit de toegankelijkheidsboom. */
.ms-romp {
  position: relative;
}

.ms-kaart--open .ms-voor {
  visibility: hidden;
}

.ms-achter {
  position: absolute;
  inset: 0;
  padding: 18px 20px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
}

/* Zonder deze regel wint de `display: flex` hierboven van de `display: none`
   die de browser aan `[hidden]` geeft, en ligt de achterkant altijd over de
   voorkant. */
.ms-achter[hidden] {
  display: none;
}

.ms-kaart--open {
  box-shadow: inset 0 0 0 var(--vt-lijn-dik) var(--vms-ink-900);
}

/* De acties als compacte rijen met een haarlijn ertussen, dezelfde vorm als
   de schoolkaart op Scholen (`.ka-actie` in dashboard.css): gestapelde
   46px-knoppen pasten niet in de romp en lieten de achterkant scrollen
   (DEC-042). */
.ms-achter-acties {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.ms-achter-actie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 2.25rem;
  padding: 0.2rem 0;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: var(--fw-heading);
  text-decoration: none;
  border-top: 1px solid var(--border-subtle);
}

.ms-achter-actie::after {
  content: '\203A';
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
}

.ms-achter-actie:hover {
  background: var(--vms-ink-50);
}

.ms-achter-actie:focus-visible {
  outline: var(--vt-lijn-dik) solid var(--vms-ink-900);
  outline-offset: -3px;
}

.ms-dagen {
  margin: 3px 0 var(--space-3);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--text-muted);
  text-wrap: pretty;
}

.ms-regels {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.ms-regel {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
}

.ms-regel-label {
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.ms-regel-waarde {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.35;
  text-wrap: pretty;
}

.ms-leeg {
  color: var(--text-muted);
  font-style: italic;
}

@media (min-width: 1100px) {
  .mijn-scholen-page .mw-inhoud {
    display: block;
    padding: 0 var(--space-6) var(--space-6);
  }

  .ms-lijst {
    padding: var(--space-5) 0 0;
  }

  .ms-kaarten {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

/* ============================================================
   Ritmestrook (handoff §9, `9a`)
   ============================================================
   Zwarte band onder het weekoverzicht: zes weken vooruit, per
   week een cluster van vijf ruiten (ma–vr). Gevuld = lesdag,
   12px omtrek = kantoordag, 12px wit gevuld = vakgroepoverleg,
   7px omtrek = vrij. Een vakantieweek is dus vijf kleine ruitjes:
   het ritme breekt zichtbaar. Geen legenda en geen bijschrift —
   het patroon spreekt, en de band werkt als visueel anker.

   De vierde stand (wit gevuld = vakgroepoverleg) leest sinds DEC-045
   de soort uit elk element van `medewerkers.vaste_blokken`. De
   vakgroepruit krijgt naast de witte vulling een
   inkt-haarlijn: zonder die lijn is een lesdag zónder paginakleur
   (een assistent op meerdere leerlijnen) niet te onderscheiden
   van vakgroep — beide zouden 12px wit gevuld zijn. */

.mw-ritme {
  margin: var(--space-5) var(--space-5) 0;
  background: var(--vms-ink-900);
  color: var(--vms-white);
  padding: var(--space-3) var(--space-2);
}

/* Mobiel **twee rijen van drie**, geen horizontaal scrollende rij. Zes
   clusters náást elkaar passen niet op 390px: elk cluster is vijf ruiten van
   12px plus vier gaten, en het label ("nu · 36") is breder dan de 57px die er
   dan per kolom overblijft — labels en ruiten schoven over elkaar heen. Een
   scrollende rij zou dat oplossen, maar juist niet hier: deze strook bestáát
   omdat je het patróón van zes weken in één blik ziet ("wat telt is de
   afwijking", §9). Een strook die je pas met een veeg helemaal ziet, verliest
   precies dat. Twee rijen houden alle zes zichtbaar en de leesvolgorde
   links-naar-rechts intact. Vanaf 760px is er wél ruimte voor één rij. */
.mw-ritme-weken {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3) var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .mw-ritme-weken {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.mw-ritme-week {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 10px 4px 8px;
  opacity: 0.55;
}

.mw-ritme-week.is-huidig {
  opacity: 1;
}

.mw-ritme-ruiten {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 14px;
}

/* Lesdag: gevuld in de paginakleur als die er is, anders wit. */
.mw-ritme-ruit--les {
  --vt-ruit-kleur: var(--mw-pagina, var(--vms-white));
}

/* Vakgroepoverleg: de vierde stand uit `9a` — 12px wit gevuld. De haarlijn
   erbinnen is een bewuste toevoeging op het ontwerp: zonder paginakleur valt
   de lesruit óók op wit terug, en dan zouden lesdag en vakgroep niet te
   onderscheiden zijn. Op de zwarte band leest die lijn als een randje, niet
   als een tweede kleur. Nooit de leerlijnkleur: die staat in het blok zelf,
   de strook is een patroon en geen legenda. */
.mw-ritme-ruit--overleg {
  --vt-ruit-kleur: var(--vms-white);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
}

/* Kantoor: even groot als een lesdag, maar leeg — zonder leerlijnkleur,
   want kantoor en overleg horen bij geen enkele leerlijn. */
.mw-ritme-ruit--kantoor {
  background: none;
  box-shadow: inset 0 0 0 var(--vt-lijn) rgb(255 255 255 / 0.5);
}

/* Vrij: kleiner en alleen een haarlijn. */
.mw-ritme-ruit--vrij {
  background: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3);
  margin: 0 2.5px;
}

/* Vol wit, niet 45%: de weekkolom draagt zelf al `opacity: .55` (de
   "rest op 55%" uit het ontwerp), en die twee vermenigvuldigen. Samen gaven
   ze `#555553` op `#1d1d1b` = 2,25:1 bij 10px tekst — ruim onder AA. De
   kolomdekking alleen brengt vol wit op 5,9:1 en houdt de huidige week
   (opacity 1) nog steeds zichtbaar sterker. Gevonden door de axe-gate zodra
   de pagina met échte weekdata werd gemeten; in de lege staat bestond deze
   strook niet. */
.mw-ritme-label {
  font-size: var(--fs-ui-xs);
  letter-spacing: var(--ls-eyebrow);
  color: var(--vms-white);
  text-transform: uppercase;
  white-space: nowrap;
}

.mw-ritme-week.is-huidig .mw-ritme-label {
  font-weight: 500;
  color: var(--vms-white);
}

/* Het patroon in woorden, voor wie het niet ziet. */
.mw-ritme-uitleg {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Kantoor en vakgroepoverleg op een leskaart -------------------------
   Dezelfde neutrale lezing als de blokken in strip en raster (die staan in
   weekraster.css): bezette dagdelen zijn geen lessen, dus nooit een
   leerlijnkleur.
     Kantoor : 135°-arcering
     Overleg : 2.5px inktrand op wit */

.mw-les--vast {
  background: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 7px,
    var(--vms-ink-100) 7px,
    var(--vms-ink-100) 8px
  );
}

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

.mw-les--vast .mw-les-plek {
  color: var(--vms-ink-700);
}

/* ============================================================
   Als accounthouder (design-handoff §9, ontwerp `9a`)
   ============================================================
   Rollen zijn lagen op één persoon: wat je náást docent bent
   hangt als sectie onder je week. Statuskleur draagt hier de
   stand (klaar / niet klaar); de leerlijnkleur van de pagina
   blijft eraf — die twee blijven strikt gescheiden (§3). */

.mw-accounthouder {
  margin-top: var(--space-6);
}

/* Op het werkblad spant de sectie beide kolommen, onder de ritmestrook — in
   `9a` staat hij over de volle breedte onder de week, niet in de smalle
   rechterkolom. */
@media (min-width: 1100px) {
  .mw-accounthouder {
    grid-area: ah;
    margin-top: var(--space-4);
  }
}

.mw-ah-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.mw-ah-alle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--vms-ink-700);
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.mw-ah-alle:hover {
  color: var(--vms-black);
}

.mw-ah-lijst {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1100px) {
  .mw-ah-lijst {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

.mw-ah-kaart {
  padding: var(--space-4);
}

.mw-ah-rij {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.mw-ah-naam {
  color: var(--vms-black);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

a.mw-ah-naam:hover {
  text-decoration: underline;
}

/* De stand is een woord in een statuskleur, niet een gekleurd vlak: op een
   kaart met een leerlijntint haalt een vulling geen AA. */
.mw-ah-stand {
  flex: none;
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mw-ah-stand.vt-status-ok {
  color: var(--success);
}

.mw-ah-stand.vt-status-mis {
  color: var(--danger);
}

.mw-ah-stand-regel {
  margin: 4px 0 0;
  color: var(--vms-ink-500);
  font-size: 0.9rem;
}

.mw-ah-noot {
  margin: var(--space-2) 0 0;
  color: var(--vms-ink-700);
  font-size: 0.95rem;
  line-height: 1.4;
}

.mw-ah-noot--mist {
  color: var(--danger);
}

.mw-ah-actie {
  margin: var(--space-3) 0 0;
}

/* ---- Ritmestrook op desktop (≥ 1100px) ------------------------------------
   Bewust als laatste regels van dit bestand: `.mw-ritme` hierboven zet de
   mobiele marge en padding met dezelfde specificiteit, en in CSS wint dan de
   laatste. De horizontale marge en padding gaan eraf zodat het eerste en het
   laatste cluster op dezelfde marge staan als de rasterkolommen, en de
   clusters krijgen lucht met een gap van 1rem in plaats van 0,5rem. */
@media (min-width: 1100px) {
  .mw-ritme {
    margin: 0;
    padding: var(--space-3) 0;
  }

  .mw-ritme-weken {
    gap: var(--space-4);
  }
}

/* De toelichting onder "Met wie": afwezige collega's staan hier bewust niet
   (DEC-046 besluit 4, spec §4 S2 stap 1 punt 5). */
.mw-detail-noot {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.mw-agenda {
  margin-block: 24px;
  padding-block: 20px;
  border-block-start: 1px solid var(--vms-black);
}
.mw-agenda-lijst {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
}
.mw-agenda-lijst p {
  margin-block: 4px 0;
  overflow-wrap: anywhere;
}