/*
 * MAKKELIJKER LEZEN — de opmaakkant van het instellingenscherm.
 *
 * Waarom dit een apart stijlblad is en niet in scherm.css staat: scherm.css
 * beschrijft hoe het oefenscherm er standaard uitziet. Dit blad beschrijft wat
 * er verandert als iemand daar iets aan bijstelt. Die twee door elkaar zetten
 * maakt allebei onleesbaar, en er wordt door twee mensen tegelijk aan gewerkt.
 *
 * DE HARDE GRENS. De server stuurt `style-src 'self'` mee (gereedschap/serve.mjs).
 * Een style-attribuut of een stijlblok dat je vanuit code toevoegt wordt STIL
 * geweigerd: de pagina rendert kaal zonder foutmelding. Alles wat hier staat is
 * daarom gewone CSS in een bestand, en toegankelijk.js zet uitsluitend
 * data-attributen op <html>. Er wordt vanuit code geen enkele stijl geschreven.
 *
 * De onderbouwing van elke maat staat in app/TOEGANKELIJKHEID.md, met bronnen.
 */

/* ── 1. de drie standen ───────────────────────────────────────────────────
 *
 * Standaard verandert er niets. Alleen wie iets kiest krijgt een andere maat;
 * dat is bewust, want het scherm zoals het nu is, is door de eigenaar
 * goedgekeurd en dit mag daar niet ongevraagd overheen.
 *
 * De maten: 17 en 20 pixels. De ondergrens die de British Dyslexia Association
 * aanhoudt is 16 px (12-14 punt), en de leestekst in dit scherm is vandaag
 * 13,5 tot 14. "Groter" tilt hem dus over die ondergrens heen, "Grootst" gaat
 * daar met een halve stap overheen.
 *
 * WAT ER BEWUST NIET GEBEURT: elke tekst met zijn eigen factor vermenigvuldigen.
 * De leestekst in dit scherm loopt van 12,5 tot 14 px — verschillen van een
 * halve pixel die niemand ziet. Die verschillen meeschalen betekent dat elk
 * getal uit scherm.css hier herhaald moet worden, en dan lopen twee bestanden
 * uit elkaar zonder dat iemand het merkt. Er zijn daarom twee maten: één voor
 * lopende tekst en knoppen, één voor de vraag erboven.
 */
:root {
  --tf-leesmaat: 0px;   /* 0 = niet ingesteld; de regels hieronder slaan dan aan noch af */
  --tf-vraagmaat: 0px;
}

html[data-tf-tekst="groot"] {
  --tf-leesmaat: 17px;
  --tf-vraagmaat: 23px;
}

html[data-tf-tekst="grootst"] {
  --tf-leesmaat: 20px;
  --tf-vraagmaat: 26px;
}

/*
 * WELKE TEKST MEEGROEIT, EN WAAROM DAT GEEN OPSOMMING IS.
 *
 * Hier stond eerst een lijst met alle klassen die scherm.css gebruikt. Dat werkte
 * precies één dag: er wordt aan dit scherm door meer dan één iemand tegelijk
 * gebouwd, en het eerstvolgende nieuwe scherm ("Wat ga je oefenen?") groeide niet
 * mee omdat zijn klassen nog niet in de lijst stonden. Een lijst die je moet
 * bijwerken is een lijst die je vergeet — dezelfde les die de bundelaar al leerde.
 *
 * Het staat er nu andersom: ALLE lopende tekst in het scherm groeit mee, en er is
 * een korte lijst van wat níét meegroeit. Die uitzonderingen zijn allemaal van
 * dezelfde soort — dingen die geen zin zijn maar een merkje: de knoppen in de
 * bovenbalk, de vakjes van het overzicht, de letter voor een antwoord, en de
 * kleine hoofdletterregels boven een kop. Die groter maken kost alleen ruimte.
 *
 * IN `:not()` STAAN ALLEEN LOSSE KLASSEN, GEEN SAMENGESTELDE SELECTORS. Hier
 * stond eerst `.strook *`, en dat is een samengestelde selector binnen `:not()`:
 * die kent Safari pas vanaf 16.4. Op een iPhone die op iOS 15 vastzit — precies
 * het toestel waarvoor deze knop bedoeld is — wordt dan de HELE regel ongeldig
 * verklaard, zonder foutmelding, en groeit er niets mee. Dezelfde stille val als
 * de voortgangsbalk in app/SCHERM.md. Alles wat in de bovenbalk staat is een
 * `.rond`, een `.teller` of een `.klok`, dus die drie namen doen hetzelfde werk.
 */
html:is([data-tf-tekst="groot"], [data-tf-tekst="grootst"])
  :is(p, li, button, summary, label, h2, h3, textarea, .wie, .wat, .fout, .waarom, .stapkop, .slotvraag, .onderwerpnaam, .onderwerpmeta):not(
    .rond, .teller, .klok, .merk, .vakje, .stip,
    .legendaitem, .overzichtlegenda,
    .sloteyebrow, .kieseyebrow, .overzichteyebrow, .startetiket, .notitiebij, .leesvoorbeeldkop,
    .tf-meta, .tf-mono,
    /* deze krijgen hieronder de grotere kopmaat en mogen hier dus niet blijven
       hangen; zonder deze uitzondering wint de regel met de meeste onderdelen */
    .vraag, .voorbeeldvraag, .slottitel, .startnaam, .starttitel, .leestitel, .kiestitel,
    .leeseyebrow
  ) {
  font-size: var(--tf-leesmaat);
}

/* De vraag blijft groter dan zijn antwoorden; anders verdwijnt het verschil
   tussen wat er gevraagd wordt en waaruit je kiest. */
html:is([data-tf-tekst="groot"], [data-tf-tekst="grootst"])
  :is(h1, .vraag, .voorbeeldvraag, .slottitel, .startnaam, .starttitel, .leestitel, .kiestitel) {
  font-size: var(--tf-vraagmaat);
}

/*
 * Negatieve letterafstand gaat eruit zodra de tekst groter wordt. scherm.css zet
 * -0.015em op de koppen om ze strak te laten ogen; dat is precies de verkeerde
 * kant op voor wie moeite heeft letters van elkaar te scheiden.
 */
html:is([data-tf-tekst="groot"], [data-tf-tekst="grootst"])
  :is(h1, h2, h3, .vraag, .slottitel, .startnaam, .starttitel, .leestitel, .voorbeeldvraag, .leesnaam, .deelkop, .overzichttitel, .kiestitel) {
  letter-spacing: 0;
}

/*
 * Twee plekken waar grote tekst niet past en dat ook niet hoeft.
 * Het overzichtsraster: twintig vakjes moeten in één blik te overzien blijven,
 * dus daar telt de maat van het vakje en niet van het cijfer erin.
 */
html:is([data-tf-tekst="groot"], [data-tf-tekst="grootst"]) .vakje {
  font-size: 13px;
}

/* De voortgangsbalkjes bij een onderwerp dragen geen tekst. */
html:is([data-tf-tekst="groot"], [data-tf-tekst="grootst"]) :is(.onderwerpbalk, .onderwerpvulling) {
  font-size: 0;
}

/*
 * HET BEELD KRIJGT EEN HOGERE ONDERGRENS ZODRA DE TEKST GROTER WORDT.
 *
 * Zonder deze regel gebeurde er iets dat op geen enkele controle te zien was:
 * de vraagkaart groeit mee met de letters, het beeld staat als eerste ruimte af,
 * en op een Galaxy-formaat zakte het bij de grootste stand naar zijn ondergrens
 * van 132. De rij ronde knoppen bovenin ligt over het beeld heen en is 56 hoog —
 * dus 42 procent van de situatie ging schuil achter knoppen. Bij één bordvraag
 * stond het woord STOP eronder.
 *
 * Dat is precies waar de ondergrens in app/SCHERM.md tegen bedoeld is: onder een
 * bepaalde maat is het geen situatie meer maar een streepje. Wie de letters
 * groter zet, krijgt daarom ook een groter beeld; wat er niet meer bij past
 * schuift in de kaart, en dat is de plek die daarvoor is.
 */
html[data-tf-tekst="groot"] .beeld {
  min-height: 176px;
}

html[data-tf-tekst="grootst"] .beeld {
  min-height: 204px;
}

/* ── 2. ruimer zetten ─────────────────────────────────────────────────────
 *
 * Eén schakelaar voor drie dingen die in het onderzoek steeds samen genoemd
 * worden: regelafstand, letterafstand en woordafstand. Ze los aanbieden zou
 * drie schuifjes opleveren waar niemand een keuze in maakt.
 *
 * De maten volgen WCAG 2.1 succescriterium 1.4.12 (Text Spacing): regelafstand
 * 1,5x, letterafstand 0,12x en woordafstand 0,16x de lettergrootte moeten
 * zonder verlies van inhoud kunnen. Dat criterium eist dat het KAN; hier is het
 * een knop die het DOET. Regelafstand staat op 1,75 omdat 1,55 al de standaard
 * is en 1,5 dus geen stap zou zijn.
 */
html[data-tf-ruimte="ruim"] :is(
  .laadregel, .optie, .kort, .staptekst, .wat, .waarom,
  .slottekst, .slotleeg, .slotdeelregel, .slotreden, .slotvraag,
  .stopkaart p, .overzichtregel, .startstand, .startcijfers, .startnorm,
  .voorbeeldantwoord, .leesbij, .leesuitleg, .leeswaarschuwing
) {
  line-height: 1.75;
  letter-spacing: 0.045em;
  word-spacing: 0.16em;
}

html[data-tf-ruimte="ruim"] :is(.vraag, .voorbeeldvraag, .stapkop, .wie, .fout, .deelkop, .slottitel) {
  line-height: 1.45;
  letter-spacing: 0.02em;
  word-spacing: 0.16em;
}

/*
 * En rust tussen de elementen. Meer lucht rond een antwoord is niet alleen
 * prettiger kijken: het maakt van elk antwoord een eigen blok in plaats van een
 * rij in een lijst, en dat scheelt bij het terugvinden waar je was.
 */
html[data-tf-ruimte="ruim"] .opties {
  gap: 12px;
}

html[data-tf-ruimte="ruim"] .optie {
  padding: 15px 14px;
}

html[data-tf-ruimte="ruim"] .kaart {
  gap: 18px;
}

html[data-tf-ruimte="ruim"] .uitleg {
  gap: 13px;
}

html[data-tf-ruimte="ruim"] .meer {
  gap: 24px;
}

html[data-tf-ruimte="ruim"] .misgaat {
  gap: 11px;
}

/* ── 3. meer contrast ─────────────────────────────────────────────────────
 *
 * De KLEUREN van deze stand staan in tokens.css, want daar horen kleurwaarden.
 * Daar staat ook waarom het géén zwart op wit wordt: de achtergrond blijft het
 * gebroken wit van het merk, omdat puur zwart op puur wit bij een deel van de
 * lezers met dyslexie glans en bewegende letters geeft.
 *
 * Hier staat alleen wat er verder aan vastzit en geen kleur is.
 */

/* Het aangetikte antwoord mag niet alleen aan een tint te zien zijn. */
:root[data-tf-contrast="hoog"] .optie[aria-pressed="true"] {
  border-width: 3px;
}

/* De focusring wordt dikker: wie met een toetsenbord werkt moet hem zien
   liggen, ook op een lichte kaart. */
:root[data-tf-contrast="hoog"] .scherm :focus-visible,
:root[data-tf-contrast="hoog"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-width: 4px;
}

/*
 * DE ILLUSTRATIES ONDER DE ONDERWERPRIJEN GAAN HIER HELEMAAL UIT.
 *
 * Sinds 19-08-2026 staat er onder elke onderwerprij in het kiesscherm een
 * gedempte illustratie; zie de uitleg bij `.onderwerprij` in scherm.css. Ze
 * halen daar ruim de eis van 4,5:1 en zouden dus kunnen blijven staan.
 *
 * Ze gaan tóch weg, en niet alleen verder gedempt. Wie deze knop indrukt vraagt
 * om het grootst mogelijke verschil tussen tekst en achtergrond; een tekening
 * ónder die tekst is letterlijk het tegenovergestelde, hoe zwak hij ook staat.
 * Een gedempte tekening is bovendien een vorm van versiering waarvan het effect
 * per persoon verschilt, precies zoals de gekleurde overlays die om die reden
 * niet in dit scherm zitten. Halfweg terugtreden zou betekenen dat we hem toch
 * laten staan bij de mensen die hem het minst kunnen hebben.
 *
 * Wat er dan overblijft is de gewone achtergrondkleur van de rij: dezelfde rij,
 * dezelfde tekst, alleen schoon eronder. Nagemeten op 390 en 360 breed: de
 * onderwerpnaam gaat van 13,9:1 naar 18,5:1 in de lichte stand en van 11,7:1
 * naar 13,9:1 in de donkere; de metaregel van 11,3:1 naar 16,4:1.
 */
:root[data-tf-contrast="hoog"] .metbeeld::before,
:root[data-tf-contrast="hoog"] .metbeeld::after {
  content: none;
}

/* ── 4. de twee ingangen naar dit scherm ──────────────────────────────────
 *
 * De eerste is een gewone rustige knop in het kiesscherm; die heeft geen eigen
 * opmaak nodig, want hij gebruikt `.knop-rustig` uit scherm.css. De tweede is
 * dit tandwiel, links in de bovenbalk naast het kruisje.
 *
 * WAAROM DAAR. Niet in de rechtergroep: die is bij een oefenexamen al gevuld
 * met de klok, het bewaarmerkje en de teller, en met de voorleesknop erbij past
 * er op een telefoon van 360 breed niets meer naast. Links staat alleen het
 * kruisje, en daar is ruimte.
 *
 * WAAROM ÜBERHAUPT EEN KNOP IN DE BALK. Omdat je pas merkt dat de tekst te klein
 * is als er een vraag voor je staat. De instelling twee schermen verderop
 * verstoppen betekent dat precies de mensen voor wie hij bedoeld is hem nooit
 * vinden. Hij erft `.rond`, dus ook de donkere stand boven een beeld.
 */
.leestandwiel {
  flex: none;
}

/*
 * DE BOVENBALK KRIJGT ER TWEE KNOPPEN BIJ, EN DAT MERK JE OP EEN SMALLE TELEFOON.
 *
 * Bij een oefenexamen met voorlezen aan stonden er op 360 breed zes dingen in
 * die balk: kruisje, tandwiel, klok, bewaarmerkje, voorlezen en de teller.
 * Gemeten werd het krap genoeg dat de ronde knoppen van 44 naar 41 werden
 * geperst — en 44 is de aanraakmaat die in dit hele scherm geldt.
 *
 * De knoppen mogen daarom niet krimpen. De teller mag wél; die wordt niet
 * aangeraakt maar afgelezen.
 *
 * WAT HIER WEG IS, EN WAAROM. Er stond ook een regel die de ruimte tussen de
 * knoppen op smalle schermen van 8 naar 5 zette. Die was nodig zolang de
 * cirkels 44 breed waren. Sinds 30-08-2026 is de getekende cirkel 34 en
 * blijft alleen het onzichtbare aanraakvlak 44 (zie .rond in scherm.css), dus
 * er is ruimte over. Die regel liet hier nog staan en drukte de knoppen op een
 * telefoon weer tegen elkaar aan — precies de drukte die de eigenaar meldde.
 */
.rechts .rond {
  flex: none;
}

/*
 * En de twee pillen mogen nooit over twee regels lopen. Dat gebeurde wél zodra
 * de ronde knoppen niet meer krompen: "29:18" werd "29:1 / 8" en de teller
 * "01 / 50" brak in tweeën. Een klok die je moet ontcijferen is erger dan een
 * klok die een paar pixels smaller is, dus op een smal scherm gaat de ruimte in
 * de pil eraf en de regelafbreking eruit.
 */
.klok,
.teller {
  white-space: nowrap;
}

@media (max-width: 400px) {
  .klok,
  .teller {
    padding-right: 8px;
    padding-left: 8px;
    letter-spacing: 0;
  }
}

/* ── 5. de voorleesknop in de bovenbalk ───────────────────────────────── */

/*
 * Hij staat naast de geluidsknop en niet in de kaart. Reden: de kaart schuift
 * als de uitleg opengaat, en een voorleesknop die wegschuift is een knop die je
 * moet zoeken op het moment dat je hem nodig hebt. De vorm is dezelfde `.rond`
 * als zijn buren, dus hij erft ook de donkere stand boven een beeld.
 */
#voorleesknop[hidden] {
  display: none !important;
}

#voorleesknop[aria-pressed="true"] {
  border-color: transparent;
  background: var(--tf-accent-vlak, var(--tf-accent));
  color: var(--tf-accent-ink);
}

/* ── 6. het instellingenscherm zelf ───────────────────────────────────── */

/*
 * Van vorm gelijk aan het kiesscherm ernaast: eyebrow, titel, kruisje, en een
 * lijst die schuift onder een kop die stilstaat. Dat is geen luiheid maar het
 * besluit uit app/SCHERM.md dat je nooit hoeft te zoeken hoe je ergens weg komt.
 * De laag van 34 is die van het kiesscherm plus twee: dit vel kan er bovenop
 * komen te liggen, want je opent het vanuit dat scherm.
 */
.leesvel {
  position: absolute;
  z-index: 34;
  inset: 0;
  background: var(--tf-bg);
}

.leesvel[hidden] {
  display: none !important;
}

.leeskaart {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 100%;
  flex-direction: column;
  padding: 20px 18px 0;
}

.leeskop {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.leeseyebrow {
  margin: 0;
  color: var(--tf-muted);
  font: 400 10px var(--tf-font-mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.leestitel {
  margin: 3px 0 0;
  color: var(--tf-ink);
  font: 600 19px/1.2 var(--tf-font-display);
}

/*
 * Wat de app uit zichzelf al deed, in één regel. Alleen zichtbaar als de
 * telefoon zelf om grotere tekst had gevraagd.
 */
.leesmelding {
  margin: 0;
  padding: 10px 12px;
  border: var(--tf-border) solid var(--tf-accent-line);
  border-radius: var(--tf-radius-element);
  background: var(--tf-accent-tint-soft);
  color: var(--tf-ink-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

/*
 * Alleen de lijst schuift; de kop erboven en de knop eronder staan stil. Dat is
 * dezelfde afspraak als bij de uitslag en bij de knop onder een vraag: je moet
 * nooit hoeven zoeken hoe je hier weg komt.
 */
.leeslijst {
  display: flex;
  overflow-y: auto;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 15px;
  padding: 14px 0 calc(20px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}

.leesuitleg {
  margin: 0;
  color: var(--tf-ink-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

/* het levende voorbeeld */

.leesvoorbeeld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 12px 12px;
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface);
}

.leesvoorbeeldkop {
  margin: 0;
  color: var(--tf-muted);
  font: 400 10px var(--tf-font-mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.voorbeeldvraag {
  margin: 0;
  color: var(--tf-ink);
  font: 700 20px/1.28 var(--tf-font-display);
  letter-spacing: -0.015em;
}

.voorbeeldantwoord {
  margin: 0;
  padding: 12px 13px;
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-element);
  background: var(--tf-surface);
  color: var(--tf-ink);
  font-size: 14px;
  line-height: 1.38;
}

/* één instelling */

.leesgroep {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.leesnaam {
  margin: 0;
  color: var(--tf-ink);
  font: 600 15px var(--tf-font-display);
  letter-spacing: -0.01em;
}

.leesbij {
  margin: -2px 0 2px;
  color: var(--tf-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.leeswaarschuwing {
  margin: -2px 0 2px;
  padding: 9px 11px;
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-element);
  background: var(--tf-surface-warm);
  color: var(--tf-ink-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

.leeswaarschuwing[hidden] {
  display: none !important;
}

/*
 * De keuzeknoppen. Aanraakmaat 48, zoals elke andere knop in dit scherm, en ze
 * mogen omlaag vallen in plaats van te krimpen — bij de grootste tekststand
 * past "Grootst" anders niet meer op één regel.
 */
.leeskeuze {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.leeskeuze button {
  min-height: var(--tf-hit-comfort);
  flex: 1 1 auto;
  padding: 10px 14px;
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-element);
  background: var(--tf-surface);
  color: var(--tf-ink);
  font: 500 13.5px var(--tf-font-ui);
  cursor: pointer;
}

/*
 * De gekozen stand is aan drie dingen te zien en niet alleen aan kleur: hij
 * heeft een vinkje, hij is vetter, en zijn rand is de accentkleur. Dat is
 * dezelfde afspraak als bij de statusregels in tokens.css, en het is wat WCAG
 * 1.4.1 vraagt: kleur mag nooit het enige teken zijn.
 */
.leeskeuze button[aria-pressed="true"] {
  border-color: var(--tf-accent-strong);
  background: var(--tf-accent-tint);
  font-weight: 700;
}

.leeskeuze button[aria-pressed="true"]::before {
  margin-right: 7px;
  content: "\2713";
}

.leeskeuze button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

/*
 * ER IS ÉÉN UITGANG EN DAT IS HET KRUISJE.
 *
 * Hieronder stond een amber knop "Klaar" in een vaste voet. Die was fout om twee
 * redenen. Er valt niets te bevestigen — elke keuze werkt meteen — dus hij deed
 * precies hetzelfde als het kruisje erboven, en hij was het luidste element op
 * een scherm waar de knoppen erbóven het werk doen. En hij kostte 76 pixels
 * hoogte, op het scherm waar de eerste meting liet zien dat je op een iPhone SE
 * maar één van de vijf instellingen ziet staan. De kop met het kruisje staat
 * vast bovenin, dus de uitgang is altijd in beeld.
 */

/* ── 7. minder beweging ───────────────────────────────────────────────────
 *
 * Geen instelling maar een systeemvoorkeur. Wie op zijn telefoon "verminder
 * beweging" aan heeft staan, heeft dat niet voor deze app aangezet en hoort er
 * niet nog een keer om gevraagd te worden.
 */
@media (prefers-reduced-motion: reduce) {
  #balkvulling,
  .meerpijl,
  .slotpijl {
    transition: none !important;
  }
}