/*
 * DE MATEN. Eén afspraak voor de site én het oefenscherm.
 *
 * WAAROM DIT BESTAAT.
 * Alles in deze map is op 390 pixels gebouwd en daarna per pagina uitgebreid.
 * Zo kreeg elke pagina zijn eigen breekpunt: 720 hier, 760 daar, 780, 860,
 * 1040. Op een computer voelt dat als vijf losse pagina's in plaats van één
 * product, en niemand weet nog welk getal de bedoeling was. Dit bestand maakt
 * er één set van. Wie iets nieuws bouwt — op de site of in het oefenscherm —
 * leest hier de maten en verzint ze niet opnieuw.
 *
 * WAT ER NIET IN MAG.
 * Geen kleur (die hoort in app/tokens.css), geen opmaak van een onderdeel (die
 * hoort in het stijlblad van dat onderdeel). Hier staan alleen: hoe breed,
 * hoeveel kolommen, en waar de sprong zit.
 *
 * DE STILLE VAL. De server stuurt `style-src 'self'` mee (gereedschap/serve.mjs).
 * Een style-attribuut in de html en een stijl die vanuit code wordt gezet worden
 * STIL geweigerd: de pagina rendert kaal zonder foutmelding. Dat is hier al drie
 * keer gebeurd. Alle vormgeving hoort dus in een .css-bestand, ook de opmaak van
 * één enkel element.
 *
 * ── DE DRIE MATEN ────────────────────────────────────────────────────────
 *
 *   390   telefoon    de maat waarop dit product bedacht is en waarop het het
 *                     vaakst gebruikt wordt. Blijft de maat die voorgaat.
 *   768   tablet      geen doelgroep, wél de plek waar dit soort ontwerpen
 *                     kapotgaat: te breed voor de telefoonindeling, te smal
 *                     voor de computerindeling. Wat hier breekt, breekt op
 *                     álle tussenmaten. Daarom is dit een verplichte toets en
 *                     geen extraatje.
 *   1280  computer    thuis achter een scherm. Moet werken, hoeft niet te
 *                     winnen van de telefoon.
 *
 * ── DE TWEE SPRONGEN ─────────────────────────────────────────────────────
 *
 * Twee breekpunten, en niet meer. Elke derde is een plek waar iets kan gaan
 * afwijken zonder dat iemand het merkt.
 *
 *   @media (min-width: 761px)    "vanaf tablet"    één kolom wordt meerdere
 *   @media (min-width: 1024px)   "vanaf computer"  volle breedte, zijkolommen
 *
 * WAAROM 761 EN NIET 720 OF 768.
 * app/tokens.css klapt het hoofdmenu dicht onder 760 (`max-width: 760px`). Dat
 * bestand is van de hele app en wordt hier niet aangeraakt. Eén breekpunt dat
 * daar niet mee samenvalt, geeft een strook breedtes waar het menu al een balk
 * is maar de pagina nog een telefoonindeling heeft, of andersom. 761 valt er
 * precies tegenaan. Gevolg: op 768 is de indeling die van een tablet, en dat is
 * ook de maat waarop we hem nameten.
 *
 * WAAROM 1024 EN NIET 1040.
 * Een rond getal dat iedereen onthoudt, en het is de smalste breedte waarop een
 * zijkolom van 240 naast een leesblok van 700 past zonder dat een van beide
 * knelt. Het oude 1040 in voorrang.css deed hetzelfde en is hierheen getrokken.
 *
 * ── DE LEESBREEDTE ───────────────────────────────────────────────────────
 *
 * Een blad is 1120 breed op een computer, maar lopende tekst is dat nooit. Een
 * regel van 1120 pixels is ongeveer 150 tekens; je oog verliest dan bij elke
 * terugsprong de regel. Vandaar drie waarden, elk voor een ander soort tekst:
 *
 *   --site-lees        68ch   lopende tekst, alinea's, uitleg
 *   --site-lees-blok  780px   een blok met randen eromheen (uitklappers,
 *                             kaders): daar telt niet het aantal tekens maar
 *                             hoe breed het vlak op het scherm oogt
 *   --site-lede        54ch   de zin onder een kop; kort, dus mag smaller
 *
 * `ch` en niet pixels, want de maat hoort bij het lettertype: wordt de tekst
 * groter, dan schuift de regellengte mee en blijft het aantal tekens gelijk.
 *
 * ── VAN ÉÉN KOLOM NAAR MEERDERE ──────────────────────────────────────────
 *
 * DE REGEL: je schrijft nooit op hoeveel kolommen er zijn. Je schrijft op hoe
 * smal een kaart mág worden, en de browser rekent het aantal uit:
 *
 *     grid-template-columns: repeat(auto-fit, minmax(var(--kolom-kaart), 1fr));
 *
 * WAAROM ZO. Schrijf je "2 kolommen vanaf tablet, 4 vanaf computer", dan klopt
 * dat voor die ene rij en niet voor de volgende, en bij elke rij erbij moet
 * iemand opnieuw nadenken. Met een minimum per kaartsoort gebeurt de sprong
 * vanzelf op de breedte waar de kaart anders te smal zou worden — ook op de
 * tussenmaten waar niemand naar kijkt. Er is dan ook geen breekpunt nodig voor
 * kaarten, en dus geen plek waar het mis kan gaan.
 *
 * De minima zijn niet willekeurig: `--kolom-kaart` is de smalste breedte waarop
 * de langste kaarttitel op deze site ("Proefrit: zelf aan de situatie draaien")
 * nog op twee regels past. Wordt hij smaller, dan wordt zo'n kaart een toren van
 * losse woorden en is de rij niet meer in één blik te lezen.
 *
 * De twee breekpunten hierboven zijn dus alleen voor dingen die auto-fit niet
 * kan: tekst náást beeld, een zijkolom, een balk die blijft plakken.
 *
 * WAT DIT BESTAND WEL EN NIET LEVERT. De afspraak zit in de waarden hieronder,
 * niet in kant-en-klare klassen voor kaartjes: elke kant heeft zijn eigen naam
 * voor zo'n rij (`.site-punten`, `.tf-plans`, `.vr-beeldrij`) en die hoeven niet
 * te versmelten. Wat wél gedeeld is, is gedeeld omdat het anders uit de pas
 * loopt: de bladbreedte (`.site-blad`), de balk bovenaan (`.site-balk`) en de
 * tweekolomsindeling voor stapels blokken (`.site-kolommen`).
 *
 * ── TEKST OP EEN BEELD ───────────────────────────────────────────────────
 *
 * Het openingsbeeld draagt de tekst. De kleuren daarvoor staan hier en niet in
 * tokens.css, en ze wisselen NIET mee met de lichte of donkere stand. Reden: de
 * foto verandert niet als de lezer zijn telefoon op donker zet. Zou de tekst dat
 * wel doen, dan is de ene stand leesbaar en de andere niet, en dan moet je alles
 * twee keer nameten. Nu is het contrast op een beeld in beide standen hetzelfde
 * getal.
 *
 * Bij de onderwerpbeelden in het oefenscherm bleek er geen sluier te bestaan
 * waarbij de tekening zichtbaar blijft én een gedempte tekstkleur binnen de norm
 * valt. Dat is hier opgelost door de sluier alleen dáár dicht te maken waar de
 * tekst staat, en hem open te laten lopen over het deel van het beeld dat je
 * moet kunnen zien. Zie site.css, hoofdstuk "het openingsbeeld", voor de
 * gemeten waarden.
 */

:root {
  /* ── het blad ── */
  --site-marge: 32px;     /* wat er links en rechts naast het blad overblijft */
  --site-max: 1120px;     /* zo breed wordt het blad hoogstens */

  /* ── leesbreedtes ── */
  --site-lees: 68ch;
  --site-lees-blok: 780px;
  --site-lede: 54ch;

  /* ── kolommen ── */
  --kolom-kaart: 250px;   /* kaartjes in een rij */
  --kolom-breed: 320px;   /* blokken met een beeld erin */
  --site-gat: 16px;       /* de ruimte tussen twee kaarten */
  --site-gat-ruim: 40px;  /* tussen twee kolommen van een indeling */

  /* ── zijkolom (de inhoudsopgave van een hoofdstuk) ── */
  --site-zijkolom: 236px;

  /*
   * Hoe hoog de balk bovenaan is. Nagemeten in de browser, niet geschat: een
   * menuknop is 44 hoog (`--tf-hit`) met 12 ruimte erboven en eronder, plus de
   * lijn eronder. Alles wat onder een plakkende balk vandaan moet blijven — een
   * anker, een tweede plakkend blok — rekent hiermee, zodat er maar één getal is
   * dat kan verschuiven.
   */
  --site-balk-hoogte: 69px;

  /* ── tekst op een beeld; wisselt niet mee met licht of donker ── */
  --op-beeld-ink: #ffffff;
  --op-beeld-zacht: #e8e1d4;
  --op-beeld-sluier: 20 17 13;
}

/*
 * Het blad. Eén klasse voor alle pagina's van de site, zodat er geen pagina meer
 * is met zijn eigen breedte. Hij hangt aan `--tf-shell-max` uit app/tokens.css,
 * zodat de bestaande `.tf-shell` gewoon blijft werken en er niets dubbel staat.
 */
.site-blad {
  --tf-shell-max: var(--site-max);
}

/*
 * Twee kolommen van gelijkwaardige blokken, en pas vanaf een computer.
 *
 * Dit is het antwoord op een pagina die uit een stapel losse blokken bestaat —
 * een lijst met veelgestelde vragen bijvoorbeeld. Zo'n stapel mag niet over de
 * volle 1120 uitgerekt worden (dan wordt elke vraagregel onleesbaar lang), maar
 * hem in één smalle kolom laten staan geeft op een breed scherm een pagina die
 * voor de helft leeg is. Twee kolommen lost allebei op.
 *
 * NIET met auto-fit, en dat is met opzet: hier zijn de blokken hele secties met
 * een eigen kop, en die moeten links en rechts even breed zijn. Bij kaarten
 * telt alleen de minimumbreedte, hier telt de symmetrie.
 */
.site-kolommen {
  display: grid;
  gap: var(--site-gat-ruim);
  align-items: start;
}

@media (min-width: 1024px) {
  .site-kolommen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── de balk bovenaan ────────────────────────────────────────────────────
 *
 * EIGENAARSBESLUIT 19-08-2026: op een breed scherm loopt het menu mee omlaag,
 * met de knop "Aan de slag" er altijd in. Op een telefoon verandert er niets —
 * daar is het menu een knop die uitklapt (app/tokens.css), en een balk die
 * blijft plakken kost daar schermhoogte die de leerling harder nodig heeft.
 *
 * HIJ STAAT IN DIT BESTAND en niet in site.css, omdat het boekhoofdstuk
 * voorrang.html site.css niet laadt en dezelfde balk draagt. Eén balk voor alle
 * vier de pagina's; dat is precies wat "aanvoelen als één product" betekent.
 *
 * WAAROM DE BALK BUITEN HET BLAD STAAT.
 * Het openingsbeeld eronder loopt van rand tot rand. Zat de balk in het blad,
 * dan zou dat beeld er links en rechts langs omhoog schuiven. `.site-balk` is
 * daarom schermbreed; `.site-balk-binnen` — dat is de balk zelf — houdt zich aan
 * de bladbreedte.
 *
 * De grens is 761 en niet een eigen getal: dat is precies de breedte waarop
 * app/tokens.css het menu weer als balk toont.
 */

.site-balk {
  background: var(--tf-bg);
}

/* Let op: dit vak staat NAAST het blad en niet erin, dus het erft de
   bladbreedte niet. Het leest daarom rechtstreeks uit --site-max. Verandert die,
   dan schuift de balk mee met de pagina eronder. */
.site-balk-binnen {
  width: min(100% - var(--site-marge), var(--site-max));
  margin: 0 auto;
}

@media (min-width: 761px) {
  .site-balk {
    position: sticky;
    top: 0;
    z-index: 40;
    /* Zonder deze lijn loopt de tekst van de pagina er tijdens het scrollen
       tegenaan en lijkt de balk te zweven. */
    box-shadow: 0 1px 0 var(--tf-line);
  }

  /* Een anker halverwege de pagina moet niet ónder de balk uitkomen. */
  :root {
    scroll-padding-top: calc(var(--site-balk-hoogte) + 16px);
  }
}