/* Breuken – alleen wat deze module extra nodig heeft.
   Bewust een eigen bestand naast style.css: dat laatste is van de vijf modules
   die vandaag draaien, en daar hoort een nieuwe module niet in te landen tot ze
   zichzelf bewezen heeft. */

/* De selector is met opzet zo zwaar. style.css zet
   `.sommen-grid .exercise-block { display: grid; grid-template-rows: repeat(5,1fr) }`
   op elk blok van elk blad, en dat is specifieker dan een enkele klasse. Met
   alleen `.br-blok` werd deze hele opmaak genegeerd: de figuur en de vraag
   werden rijen in een raster van vijf, links uitgelijnd en met de figuur die
   uit haar blok groeide. Elke bestaande module vecht die regel op dezelfde
   manier terug (.blok-cijfer, .blok-huis, .tb-vol); bij de verhuizing naar de
   gedeelde schil hoort die regel naar .som-blok gescopet te worden.

   Geen overflow:hidden: het gereedschap (↻ en ✕) staat met opzet net bóven het
   blok (top: -18px in style.css) en werd hier afgesneden. */
.exercises-grid .exercise-block.br-blok {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3mm;
  min-height: 0;
}

/* De kleur van een gevuld deel, op één plek.
 *
 * Dit was het rood van de site (214,62,48) op 0,78. Dat werkt op de pizza, de
 * pannenkoek, de koek en de taart, maar niet op de meloen: dat vruchtvlees ís
 * al rood, en op ware grootte (34mm) zag je gewoon niet meer welk part geteld
 * werd. Gemeten over de hele tekening bleef er in grijswaarden nog maar zes
 * niveaus verschil over in het tiende percentiel, en achtentwintig procent van
 * het part werd in zwart-wit onzichtbaar.
 *
 * Dieper rood met meer dekking lost dat op: het scheelt in kleur én in
 * grijswaarde, dus ook op een zwart-witprinter. De andere vormen worden er
 * platter van, maar daar gaat het net om: een gekleurd deel hoort gekleurd te
 * zijn. Eén kleur voor alle vormen, want ze staan door elkaar op hetzelfde
 * blad. */
:root {
  --br-vul: rgba(176, 42, 32, 0.88);
  --br-vul-sterk: rgba(176, 42, 32, 0.94);
}

/* --- de figuur ----------------------------------------------------------- */

.br-figuur {
  position: relative;
  flex: 0 0 auto;
}

.br-figuur.br-rond {
  width: 34mm;
  height: 34mm;
}

/* De reep staat als een band van 24% tot 75,5% in een vierkante tekening. We
   tonen alleen die band: het kader krijgt de verhouding van de band mee en de
   tekening schuift naar boven zodat precies dat stuk in beeld valt. De snijlaag
   heeft hetzelfde kijkvenster, dus rooster en vakjes vallen samen. */
.br-figuur.br-reep {
  /* De hoogte staat vast en de breedte volgt uit de verhouding. Twee dingen die
     hier misgingen en waarom het zo moet:
     - een procentuele maat (max-height: calc(100% - 9mm)) klapte dicht tot vier
       pixels, waardoor de reep onzichtbaar werd;
     - een max-height op een reep van 100% breed knijpt alleen de hoogte dicht,
       zodat de tekening even breed blijft en je nog maar een streepje ziet.
     36mm is bovendien klein genoeg dat de reep samen met de vraagregel binnen
     een blok van 52mm blijft. */
  height: 36mm;
  aspect-ratio: 100 / 51.5;
  width: auto;
  max-width: 100%;
  overflow: hidden;
}

.br-figuur.br-reep .br-beeld {
  position: absolute;
  left: 0;
  top: -46.6%;   /* 24 / 51,5 van de kaderhoogte */
  width: 100%;
  height: auto;
}

.br-beeld {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.br-laag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* De parten en vakjes. Een deel dat gekleurd moet worden is het antwoord, dus
   het staat er wel maar het is pas te zien met de antwoordsleutel aan. Bij
   "welke breuk is dit?" is de kleuring net de vraag en staat ze er altijd. */
.br-part {
  fill: transparent;
  stroke: #4a3826;
  stroke-width: 0.9;
  stroke-linejoin: round;
}

.br-part.br-vol { fill: var(--br-vul); }

/* Witte lijnen op de chocolade: op een donkere reep leest dat veel beter dan
   bruin op bruin, en het blijft staan op een zwart-witprinter. De lijn ligt op
   het blokje zelf, de schaduw komt er onderuit. */
.br-vak {
  fill: transparent;
  stroke: #ffffff;
  stroke-width: 1.1;
  stroke-linejoin: round;
}

/* Een vakje dat "op" is, verdwijnt naar de papierkleur: op een donkere reep
   leest weg-zijn beter dan inkleuren, en het blijft werken op een
   zwart-witprinter. */
.br-vak.br-op {
  fill: #faf6ee;
  stroke-dasharray: 1.6 1.2;
}

.br-deel {
  fill: transparent;
  stroke: #4a3826;
  /* In eenheden van het kijkvenster, zodat de lijn meeschaalt met zoom en
     papier. De strook (kijkvenster 100 breed op 85 mm) zet hieronder haar
     eigen dikte; de vormensom (kijkvenster 100 op 17 of 20 mm) ook. */
  stroke-width: 1.4;
}

/* 0,44 op een venster van 100 bij 85 mm breed is 0,37 mm: even dik als de
   lijnen van de vormensom. De halve buitenlijn valt buiten het kijkvenster en
   werd afgeknipt, dus de buitenkader oogde half zo dik: overflow tekent ze af. */
.br-strook .br-deel { stroke-width: 0.44; }
.br-figuur .br-strook { overflow: visible; }

.br-deel.br-vol { fill: var(--br-vul); }

/* Alles wat het antwoord verraadt, blijft leeg tot de sleutel aan gaat. De
   dubbele klasse is nodig: .br-vak.br-op zet een stippellijn en zou anders van
   .br-sleutel winnen, waardoor je op een "kleur de breuk" al kon zien welke
   vakjes bedoeld waren. */
.br-sleutel { fill: transparent !important; stroke-dasharray: none; }
.br-vak.br-op.br-sleutel { stroke-dasharray: none; }
/* Op de antwoordsleutel mag de vulling dekkender zijn dan in de opgave: daar
   is het geen hint meer maar het voorbeeld, en dan moet je vier gekleurde
   parten zien en niet een gekleurde koek. */
.answer-key-active .br-part.br-sleutel { fill: var(--br-vul-sterk) !important; }
.answer-key-active .br-deel.br-sleutel { fill: var(--br-vul-sterk) !important; }

/* En op de reep hoort het antwoord van een kleuropdracht gekleurd te zijn, niet
   opgegeten. Weghalen is de beeldtaal van "welke breuk is dit?", waar de vraag
   juist is hoeveel er weg is; bij "kleur de helft" hoort daar een gekleurde
   helft te staan. */
.answer-key-active .br-vak.br-sleutel {
  fill: var(--br-vul-sterk) !important;
  stroke-dasharray: none;
}

/* De getallenlijn vult de breedte van haar blok; haar hoogte volgt uit het
   kijkvenster, dat in millimeter staat. */
.br-figuur.br-lijnvak { width: 100%; }

.br-figuur.br-strookvak {
  width: 100%;
  height: 12mm;
}

.br-strook {
  width: 100%;
  height: 100%;
}

/* --- de vraag eronder ---------------------------------------------------- */

.br-vraag {
  justify-content: center;
  text-align: center;
  font-size: 0.92rem;
  color: var(--ink, #4a3826);
  display: flex;
  align-items: center;
  gap: 0.4em;
  line-height: 1.1;
}

/* De breuk zelf, het invulvak en het antwoord staan niet meer hier maar in
   notatie.css: dat is gedeeld met de rest van de fabriek. Wat hieronder volgt
   is alleen nog wat típisch breuken is. */

/* De blokken zonder tekening (vereenvoudigen, helen uithalen, deel van een
   aantal) bestaan uit één regel notatie, gecentreerd in hun blok. Iets groter
   dan de vraagregel onder een figuur: daar is de tekening de oefening en de
   tekst het bijschrift, hier is de notatie zelf de oefening. */
/* Links uitlijnen en niet centreren. Op één blad staan brede sommen (met een
   gemengd antwoord) naast smalle, en gecentreerd begon elke rij dan op een
   andere plaats: rij 1 vijf millimeter verder naar rechts dan rij 2, en dan
   lijkt de kolom scheef te staan. Nu begint elke opgave op dezelfde plaats.
   De tekeningen blijven wél gecentreerd, die staan in .br-vraag. */
.br-blok > .nt-rij {
  font-size: 1.05rem;
  width: 100%;
  justify-content: flex-start;
}

/* Bij ordenen staan er drie losse breuken naast elkaar in plaats van één som.
   Met de gewone tussenruimte van een som (0,26em, ruim een millimeter) leest
   "5/10 8/10 9/10" als één getal van drie cijfers boven een streep. De gegeven
   rij heeft dus echt lucht nodig om als drie dingen te lezen. De invulrij
   eronder niet: daar staat het teken (< of >) al tussen de vakken. */
.br-ordenen > .nt-rij.br-orden-gegeven { gap: 0.9em; }
.br-ordenen > .nt-rij.br-orden-invul { gap: 0.4em; }

/* De twee rijen dicht op elkaar: het blok centreert zijn kinderen met 3 mm
   ertussen, en dat volstaat hier. */

/* --- werkruimte ----------------------------------------------------------- */

/* Een blok waarin gerekend wordt (de som met tussenstap, de vormensom met
   notatie) zet zijn regel bovenaan: de ruimte eronder is schrijfruimte, en die
   hoort onder de som en niet errond. De selector draagt hetzelfde gewicht als
   de basisregel bovenaan dit bestand (.exercises-grid .exercise-block.br-blok),
   anders verliest hij de cascade en blijft alles stil gecentreerd staan. */
.exercises-grid .exercise-block.br-somwerk,
.exercises-grid .exercise-block.br-vormwerk { justify-content: flex-start; }

/* --- de vormensom --------------------------------------------------------- */

/* Eén kale vorm in een somregel: een vierkant rooster of een cirkel in parten.
   De vorm is bewust klein genoeg dat er zes op een regel passen, en groot
   genoeg om een tiende nog te kunnen arceren. */
.br-vorm {
  display: inline-block;
  width: 17mm;
  height: 17mm;
  flex: 0 0 auto;
}

.br-vorm svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* De laag is hier de hele figuur, geen overlay op een foto. */
.br-vorm .br-laag { position: static; }

/* Eén lijndikte op papier voor álle kale figuren: 0,37 mm. De dikte staat in
   kijkvenstereenheden (venster is 100 breed), dus de waarde hangt af van hoe
   groot de vorm getekend wordt: 0,37 x 100 / breedte in mm. Vormen van 17 mm
   krijgen 2,2; wie een andere maat introduceert, rekent zijn eigen waarde uit
   en zet ze hieronder bij, anders wordt de lijn dikker met de vorm mee. */
.br-vorm .br-part,
.br-vorm .br-deel { stroke-width: 2.2; }

/* 20 mm: 0,37 x 100 / 20 */
.br-gelijkwaardig .br-vorm .br-part,
.br-gelijkwaardig .br-vorm .br-deel { stroke-width: 1.85; }

/* 38 mm: 0,37 x 100 / 38 */
.br-procent .br-vorm .br-deel { stroke-width: 0.97; }

/* De buitenrand van het rooster ligt precies op de rand van het kijkvenster,
   dus de halve lijn erbuiten werd afgeknipt: de buitenkader oogde half zo dik
   als de binnenlijnen. Overflow laat die halve lijn gewoon meetekenen; de
   vormen hebben lucht genoeg rondom. */
.br-vorm svg { overflow: visible; }

/* De rij vormen mag iets dichter op elkaar dan een gewone som, anders raakt
   ze bij zes vormen met vier tekens uit de bladbreedte. */
.br-blok > .nt-rij.br-vormrij { gap: 0.35em; }

/* De vorm met haar breuk eronder: de stapel komt uit notatie.css, hier alleen
   wat lucht tussen vorm en breuk zodat de stippellijn niet aan het rooster
   plakt. De twee totaalvormen staan als paar dicht op elkaar, met samen één
   notatie eronder. */
.br-vormrij .nt-stapel { gap: 0.45em; }
.br-vormrij .nt-rij.br-totaalpaar { gap: 0.3em; }

/* Bovenaan uitlijnen, maar alléén de rijen die uit stapels bestaan (vorm met
   de breuk erónder): die stapels zijn niet even hoog (een invulbreuk is hoger
   dan een gedrukte), en in een gecentreerde rij schuiven de vormen van de
   hogere stapels dan omhoog. Alle vormen zijn binnen een kaart wél even hoog,
   dus bovenaan uitgelijnd liggen ze op één lijn en beginnen ook alle breuken
   op dezelfde hoogte. De vormsom (breuken náást de vormen) hoort hier níet
   bij: die is één somregel en centreert, anders hangen de tekens op
   tellerhoogte. */
.br-blok > .nt-rij.br-stapelrij { align-items: flex-start; }

/* Het teken staat twee keer tussen de stapels: één ter hoogte van de vormen,
   één ter hoogte van de breuken. Het bovenste teken krijgt de hoogte van de
   vorm en centreert daarin; het onderste centreert op de eerste regel van de
   breuk eronder. Dezelfde gap als de stapels, zodat de twee zones kloppen. */
.br-vormteken {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
  align-self: flex-start;
}

.br-vormteken > .nt-teken:first-child {
  display: inline-flex;
  align-items: center;
  height: 17mm;
}

/* Eén celmaat voor teller en noemer in een stapelrij, gedrukt of invulvak.
   Zonder dit is een invulbreuk hoger dan een gedrukte (het vak meet 1,2 em,
   een cijfer 1 em) en liggen de breukstrepen van naast elkaar staande
   stapels niet op één lijn: bij de procentkaart scheelde dat 10 px. De
   ketting (vul aan) heeft het ook nodig, maar dan om een andere reden: daar
   is één breuk half gedrukt en half vak, en zo'n asymmetrische breuk legt
   zijn streep náást zijn eigen midden. */
.br-stapelrij .nt-t,
.br-stapelrij .nt-n,
.br-vulaan .nt-t,
.br-vulaan .nt-n {
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* De hoogte van een volledige breuk in een stapelrij: twee cellen van 1,5 em
   plus de streep (2 x 0,16 em marge en 1,6 px lijn). Het midden van deze maat
   is precies de streep, dus wie hierin centreert, staat op streephoogte. */
.br-vormteken > .nt-teken:last-child {
  display: inline-flex;
  align-items: center;
  height: calc(3.32em + 1.6px);
}

.br-gelijkwaardig .br-vormteken > .nt-teken:first-child { height: 20mm; }

/* De procentkaart: twee vierkanten van 38 mm, allebei even groot want het is
   hetzelfde geheel. Zo groot omdat het honderdveld met een kleurpotlood in te
   vullen moet zijn: cellen van 3,8 mm. De lege ruimte houdt de procentzone,
   die geen vorm heeft, op breukhoogte. */
.br-procent .br-vorm { width: 38mm; height: 38mm; }
.br-procent .br-vormteken > .nt-teken:first-child { height: 38mm; }
.br-procent .br-vormspacer { display: inline-block; width: 0; height: 38mm; }

/* De procentzone heeft geen breuk maar hoort wel op streephoogte: dezelfde
   maat als een stapelbreuk, met het getal in het midden. */
.br-procent .nt-rij.br-procentzone {
  height: calc(3.32em + 1.6px);
  align-items: center;
}

/* Bij de gelijkwaardige breuken staan er hooguit drie vormen op een half blok,
   dus ze mogen groter: een twaalfdenrooster (2x6) houdt dan cellen van ruim
   drie millimeter, en dat arceert nog. */
.br-gelijkwaardig .br-vorm {
  width: 20mm;
  height: 20mm;
}

/* --- blanco en instructie ------------------------------------------------ */

.br-blok.blok-blanco { border: 1px dashed var(--wood-soft, #e6d3b3); }

.br-blok.blok-instructie {
  align-items: flex-start;
  justify-content: center;
  border: 0;
}

.br-blok.blok-instructie .instructie-tekst {
  font-weight: 600;
  font-size: 0.95rem;
}

/* De bladwissel. Het blokje is nul millimeter hoog zodat het niets van het blad
   opeet; het streepje eromheen mag daar wel buiten komen, want het staat toch
   onderaan een blad dat daar eindigt. Alleen op het scherm te zien. */
.br-blok.blok-bladwissel {
  height: 0;
  overflow: visible;
  justify-content: flex-start;
}

.bladwissel-lijn {
  position: absolute;
  left: 0;
  right: 0;
  top: -3mm;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2px dashed var(--wood, #c89a62);
}

.bladwissel-lijn span {
  transform: translateY(-50%);
  background: #ffffff;
  padding: 0 2mm;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--wood-dark, #a5763f);
  letter-spacing: 0.02em;
}

/* --- inkleuren ----------------------------------------------------------- */

/* Bij "kleur de breuk" doet het kind het werk met een potlood. De tekening moet
   dan wijken: op een volle pizza of een donkere reep valt niet te kleuren. Ze
   blijft herkenbaar, maar bleek genoeg om er overheen te gaan. De snijlijnen
   blijven donker, want daarbinnen moet gekleurd worden. */
.br-kleur.br-rond .br-beeld {
  opacity: 0.3;
  filter: saturate(0.4);
}

/* De reep is donkere chocolade en verdwijnt bij dezelfde verbleking helemaal;
   die mag dus minder ver weg. */
.br-kleur.br-reep .br-beeld {
  opacity: 0.45;
  filter: saturate(0.5) brightness(1.25);
}

/* Met de antwoordsleutel aan mag de vorm weer zichtbaar zijn: dan is het geen
   opgave meer maar een voorbeeld. */
/* De tweede en derde selector zijn voor een voorbeeldblokje: dat draagt
   answer-key-active op het blok zélf, en dan is het blok geen afstammeling
   van zichzelf. */
.answer-key-active .br-kleur.br-rond .br-beeld,
.answer-key-active .br-kleur.br-reep .br-beeld,
.answer-key-active.br-kleur.br-rond .br-beeld,
.answer-key-active.br-kleur.br-reep .br-beeld {
  opacity: 0.75;
  filter: none;
}