/* ============================================================
   Vormtaal — de ruit
   ============================================================
   Herbruikbare CSS-laag bovenop tokens.css (handoff "Rooster &
   inval fase 3", §2 Vormtaal · §3 Design tokens · §7 Animatie).
   Dit bestand voegt géén kleuren toe: alles komt als var(--…)
   uit tokens.css. Link het ná fonts.css + tokens.css.

   De drie regels van deze laag:
   1. Radius 0 overal. De vorm komt uit de 45°-hoek van de ruit,
      niet uit ronding. Aanraakbare elementen en kaarten worden
      linksboven en rechtsonder afgeschuind (clip-path).
   2. Randen zijn `box-shadow: inset` — nooit `border`. clip-path
      snijdt een border weg, een inset-schaduw niet.
   3. Statuskleuren (--success/--warning/--danger) en leerlijn-
      kleuren zijn strikt gescheiden. Een leerlijnkleur draagt
      nooit status; een statuskleur is nooit een leerlijn.
   ============================================================ */

:root {
  --vt-lijn: 1.5px; /* randdikte                        */
  --vt-lijn-dik: 2.5px; /* nadruk: actief, afwijking        */
  --vt-schuin-s: 9px; /* afschuining knoppen/chips        */
  --vt-schuin-m: 11px; /* invoervelden, grote knoppen      */
  --vt-schuin-l: 14px; /* kaarten                          */
  --vt-raakvlak: 46px; /* minimale raakvlakhoogte          */
  --vt-raakvlak-klein: 38px; /* alleen niet-primaire acties      */
}

/* ============================================================
   Dichtheid — ruimte krimpt, tekst niet
   ============================================================
   Een weekraster is dichter dan een schooldossier; dat is goed en
   onvermijdelijk. Maar de gedeelde laag kende maar één dichtheid, dus
   loste elke pagina het zelf op — en de enige knop die elke pagina had
   was `font-size`. Zo werd een ruimteprobleem 28 keer opgelost als een
   tekstprobleem.

   `data-dicht` op een container verkleint de ruimtestappen en de
   knopmaat daarbinnen. Het raakt geen enkele tekstmaat: `--fs-ui-xs`
   (11px) blijft de bodem, ook hier.

   Twee dingen die bewust NIET krimpen:
   - Tekst. Nooit. Zie de UI-schaal in tokens.css.
   - Een primaire knop. `.vt-knop--zwart` houdt zijn volle raakvlak,
     ook in een dichte container: opslaan, bevestigen en verwijderen
     blijven 46px.

   Past het dan nog niet, dan is de cel niet te klein maar te vol.
   Laat weg, kort af met een lade, of kies een andere weergave. */

[data-dicht] {
  --space-5: 1rem;
  --space-4: 0.75rem;
  --space-3: 0.5rem;
}

[data-dicht] .vt-knop:not(.vt-knop--zwart) {
  min-height: var(--vt-raakvlak-klein);
  padding: 0 var(--space-3);
}

/* ============================================================
   De ruit — merkteken, leerlijn-marker en statusmarker
   ============================================================
   Formaat via --vt-ruit-maat, kleur via --vt-ruit-kleur. Beide
   erven, dus een ouder (bijvoorbeeld .vt-status-mis) mag ze
   zetten voor alle ruiten eronder.

   De rotatie hoort in `transform` van het element zelf en nooit
   in de keyframes: anders is de ruit een vierkant zodra de
   animatie stilstaat (reduced motion, of tijdens animation-delay). */

.vt-ruit {
  display: inline-block;
  flex: none;
  width: var(--vt-ruit-maat, 10px);
  height: var(--vt-ruit-maat, 10px);
  background: var(--vt-ruit-kleur, currentColor);
  transform: rotate(45deg);
  vertical-align: middle;
}

/* Handeling of tentatieve status, met dezelfde ruit op lijst en blokknop. */
.vms-stip {
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--warning);
  transform: rotate(45deg) scale(0.8);
}

.vms-stip[hidden] {
  display: none;
}

.vms-stip--actie {
  background: var(--vms-ink-900);
}

/* Lege ruit — de omtrekvariant (vervallen les, "nog leeg", vrij) */
.vt-ruit--outline {
  background: none;
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vt-ruit-kleur, currentColor);
}

/* Rustige ademing (handoff §7 "Algemeen"): 4,2s ease-in-out, staggerd
   `(n % 5) * 0.46s`. De modulo staat híér en niet bij de consument: een
   rij van meer dan vijf ruiten loopt zo netjes door de cyclus in plaats
   van steeds verder achterop te raken, en een consument die zijn eigen
   index doorgeeft hoeft de regel niet te kennen. `mod()` is dezelfde
   ondersteuningsklasse als het `color-mix()` dat tokens.css al gebruikt;
   valt hij toch weg, dan vervalt alleen de vertraging (alles ademt
   gelijk) — nooit de animatie zelf. */
.vt-ruit--adem {
  animation: vms-adem 4.2s ease-in-out infinite both;
  animation-delay: calc(mod(var(--vt-adem-index, 0), 5) * 0.46s);
}

/* Alleen de losse scale-eigenschap animeert; `transform` blijft de
   rotatie dragen. Eindstand = scale 1 = de ruit zoals hij staat. */
@keyframes vms-adem {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.22;
  }
}

/* ============================================================
   Vlakken — kaart en zwart vlak
   ============================================================ */

.vt-kaart {
  background: var(--card);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--border);
  border: none; /* rand komt uit de inset-schaduw hierboven */
  border-radius: 0;
  clip-path: polygon(
    var(--vt-schuin-l) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-l)),
    calc(100% - var(--vt-schuin-l)) 100%,
    0 100%,
    0 var(--vt-schuin-l)
  );
}

/* Nadrukkelijker kaart: inktrand in plaats van de zachte --border */
.vt-kaart--ink {
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
}

/* Zwart vlak — de actieve staat van de vormtaal. Op wit staat de
   omtrek (.vt-kaart / .vt-knop), gevuld zwart is "dit is het". */
.vt-vlak-zwart {
  background: var(--vms-ink-900);
  color: var(--vms-white);
}

/* ============================================================
   Knoppen en aanraakbare elementen
   ============================================================ */

.vt-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--vt-raakvlak);
  padding: 0 var(--space-4);
  background: var(--vms-white);
  color: var(--text);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
  border: none; /* clip-path zou een border wegsnijden */
  border-radius: 0;
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-soft),
    color var(--dur-fast) var(--ease-soft);
  clip-path: polygon(
    var(--vt-schuin-s) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-s)),
    calc(100% - var(--vt-schuin-s)) 100%,
    0 100%,
    0 var(--vt-schuin-s)
  );
}

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

/* Gevuld zwart = de primaire/actieve knop */
.vt-knop--zwart {
  background: var(--vms-ink-900);
  color: var(--vms-white);
  --vt-focus-kleur: var(--vms-white);
}

.vt-knop--zwart:hover {
  background: var(--vms-ink-700);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-700);
}

/* Alleen voor niet-primaire acties: onder de 44px-raakvlaknorm. */
.vt-knop--klein {
  min-height: var(--vt-raakvlak-klein);
  padding: 0 var(--space-3);
}

.vt-knop:disabled,
.vt-knop[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

.vt-knop:disabled:hover,
.vt-knop[aria-disabled='true']:hover {
  background: var(--vms-white);
}

.vt-knop--zwart:disabled:hover,
.vt-knop--zwart[aria-disabled='true']:hover {
  background: var(--vms-ink-900);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
}

/* ============================================================
   Invoervelden
   ============================================================ */

.vt-veld {
  min-height: 52px;
  padding: var(--space-2) var(--space-4);
  background: var(--card);
  color: var(--text);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--border);
  border: none; /* clip-path zou een border wegsnijden */
  border-radius: 0;
  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)
  );
}

/* ============================================================
   Focus
   ============================================================
   clip-path snijdt ook de outline weg, dus de focusring loopt
   bínnen het vlak (negatieve outline-offset). Op een donker vlak
   zet de pagina zelf --vt-focus-kleur: var(--vms-white). */

.vt-knop:focus-visible,
.vt-veld:focus-visible {
  outline: var(--vt-lijn-dik) solid var(--vt-focus-kleur, var(--vms-ink-900));
  outline-offset: calc(-1 * var(--vt-lijn-dik) - 2px);
}

/* ============================================================
   Typografie — Oswald-rollen
   ============================================================ */

/* Sectie-kicker boven een kop */
.vt-eyebrow {
  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);
}

/* Label bij een veld, kolomkop, knoplabel-als-tekst */
.vt-label {
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Zwart gevulde badge ("Inval", "Uit rooster", "Nieuwe assistent") */
.vt-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 8px;
  background: var(--vms-ink-900);
  color: var(--vms-white);
  border-radius: 0;
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================================
   Uitklapblok "Hoe werkt dit?" — uitleg die niet in de weg zit
   ============================================================
   Een native <details>: het openen en sluiten kost geen script en
   geen aria-bedrading. De ruit is de marker, in de vorm die de
   lesmomentnotitie in form.css al gebruikt — leeg als het blok
   dicht is, gevuld als het open staat. Zwart/wit: dit is chrome,
   geen leerlijn en geen status. */
.vt-uitleg {
  margin: 0.35rem 0 0.9rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.vt-uitleg summary {
  display: inline-flex;
  gap: 0.45em;
  align-items: center;
  /* Stond op 24px: genoeg voor WCAG 2.5.8, te weinig voor de raakvlaknorm die
     deze app zichzelf oplegt. Ruimer maken is hier geen nadruk maar lucht —
     het label blijft even klein en even gedempt. */
  min-height: var(--vt-raakvlak-klein);
  color: var(--vms-ink-900);
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.vt-uitleg summary::-webkit-details-marker {
  display: none;
}

.vt-uitleg summary::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  box-shadow: inset 0 0 0 var(--vt-lijn) currentColor;
  transform: rotate(45deg);
}

.vt-uitleg[open] summary::before {
  background: currentColor;
}

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

.vt-uitleg > p,
.vt-uitleg > ol {
  max-width: 68ch;
  margin: 0.45rem 0 0;
  line-height: var(--lh-body);
  text-wrap: pretty;
}

/* De kern in één zin, daaronder de stappen als korte genummerde lijst en
   tot slot "Goed om te weten". Drie blokken, één vorm — de lezer weet na
   het eerste blok hoe de andere twee lezen. */
.vt-uitleg-kern {
  color: var(--vms-ink-900);
}

.vt-uitleg > ol {
  padding-left: 1.4em;
}

.vt-uitleg > ol > li + li {
  margin-top: 0.3rem;
}

.vt-uitleg strong {
  color: var(--vms-ink-900);
  font-weight: 600;
}

.vt-uitleg em {
  font-style: normal;
  color: var(--vms-ink-900);
  border-bottom: 1px solid currentColor;
}

/* ============================================================
   Vakgroepleider-chip — twee leerlijnen in één omtrek
   ============================================================
   De afschuining snijdt linksboven én rechtsonder, dus de
   omtrek is uit zichzelf al twee losse segmenten, gedeeld door
   de diagonaal linksboven→rechtsonder. Daar past precies één
   gradient onder die naar rechtsboven loopt: zijn kleurgrens
   staat er loodrecht op en valt samen met de twee onderbrekingen.
   Bovenrand + rechterrand dragen leerlijn `-a`, onderrand +
   linkerrand leerlijn `-b`.

   `to top right` en niet `45deg`: bij een hoekwoord legt CSS de
   kleurgrens per definitie dóór de twee andere hoeken — hier dus
   exact door de twee afschuiningen, bij élke breedte. Een vaste
   45° klopt alleen op een vierkant; op een brede chip zou de
   grens de linker- en rechterrand doorsnijden in plaats van de
   twee afgeschuinde hoeken.

   Techniek: de gradient is de *achtergrond* van het buitenste
   span met `padding: var(--vt-lijn)`; het binnenste span dekt
   hem af met een witte vulling en dezelfde afschuining. Omdat
   dat binnenste vlak overal `--vt-lijn` naar binnen ligt, blijft
   er een gelijkmatige ring over — ook langs de twee schuine
   kanten. Een `border` zou door de clip-path worden weggesneden.

   De kleur zit uitsluitend in die ring. De tekst is `--vms-ink-900`:
   een leerlijnkleur haalt als tekstkleur geen AA (zie `ink` in
   js/leerlijnen.js) en draagt in deze vormtaal nooit status.

   De sleutels reizen als `data-vakgroep-a`/`-b` (js/dom.js
   `vakgroepChip`), zodat er geen hex en geen inline stijl in JS
   staat. Bij één leerlijn zijn beide gelijk; zonder bruikbare
   leerlijn ontbreken de attributen en valt de ring fail-closed
   terug op de inktkleur. */

.vt-vakgroep {
  display: inline-block;
  padding: var(--vt-lijn);
  background: linear-gradient(
    to top right,
    var(--vt-vakgroep-b, var(--vms-ink-900)) 0 50%,
    var(--vt-vakgroep-a, var(--vms-ink-900)) 50% 100%
  );
  border: none; /* clip-path zou een border wegsnijden */
  border-radius: 0;
  vertical-align: middle;
  clip-path: polygon(
    var(--vt-schuin-s) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-s)),
    calc(100% - var(--vt-schuin-s)) 100%,
    0 100%,
    0 var(--vt-schuin-s)
  );
}

.vt-vakgroep-tekst {
  display: block;
  padding: 2px 9px;
  background: var(--vms-white);
  color: var(--vms-ink-900);
  border: none;
  border-radius: 0;
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  clip-path: polygon(
    var(--vt-schuin-s) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-s)),
    calc(100% - var(--vt-schuin-s)) 100%,
    0 100%,
    0 var(--vt-schuin-s)
  );
}

/* Sleutel → leerlijnkleur, twee keer vijf. Zelfde patroon als de
   [data-leerlijn='…']-blokken in mijn-week.css, maar hier zodat de
   chip op élke pagina werkt: personeel.html en admin.html laden
   die stylesheet niet. */

.vt-vakgroep[data-vakgroep-a='groen'] {
  --vt-vakgroep-a: var(--vms-green);
}
.vt-vakgroep[data-vakgroep-a='gezond'] {
  --vt-vakgroep-a: var(--vms-blue);
}
.vt-vakgroep[data-vakgroep-a='techniek'] {
  --vt-vakgroep-a: var(--vms-red);
}
.vt-vakgroep[data-vakgroep-a='filosofie'] {
  --vt-vakgroep-a: var(--vms-yellow);
}
.vt-vakgroep[data-vakgroep-a='budo'] {
  --vt-vakgroep-a: var(--vms-purple);
}

.vt-vakgroep[data-vakgroep-b='groen'] {
  --vt-vakgroep-b: var(--vms-green);
}
.vt-vakgroep[data-vakgroep-b='gezond'] {
  --vt-vakgroep-b: var(--vms-blue);
}
.vt-vakgroep[data-vakgroep-b='techniek'] {
  --vt-vakgroep-b: var(--vms-red);
}
.vt-vakgroep[data-vakgroep-b='filosofie'] {
  --vt-vakgroep-b: var(--vms-yellow);
}
.vt-vakgroep[data-vakgroep-b='budo'] {
  --vt-vakgroep-b: var(--vms-purple);
}

/* Scheidingsstreep die de resterende breedte vult — zet hem in een
   flexrij naast een label: <span class="vt-label">…</span><i class="vt-streep"></i> */
.vt-streep {
  flex: 1;
  height: var(--vt-lijn); /* = 1.5px */
  background: var(--vms-ink-900);
}

/* ============================================================
   Status — nooit een leerlijnkleur (§6.4 tokens.css, §3 handoff)
   ============================================================
   Zet zowel de ruitkleur als de tekstkleur, zodat een marker en
   zijn regel altijd dezelfde status dragen. Beide custom
   properties erven, dus dit werkt op de ruit zelf én op een
   omhullende rij. */

.vt-status-ok {
  --vt-ruit-kleur: var(--success);
  color: var(--success);
}

.vt-status-let-op {
  --vt-ruit-kleur: var(--warning);
  color: var(--warning);
}

.vt-status-mis {
  --vt-ruit-kleur: var(--danger);
  color: var(--danger);
}

/* ============================================================
   Reduced motion
   ============================================================
   Alle vormtaal-animaties uit. De eindstand klopt dan: `scale`
   staat buiten de keyframes nergens, dus de ruit valt terug op
   scale 1 met de rotatie uit `transform`. Transities collapsen
   al via --dur-* uit tokens.css. */

@media (prefers-reduced-motion: reduce) {
  .vt-ruit--adem {
    animation: none;
  }
}