/* GEGENEREERD uit oefenboeken/broertjes/_huisstijl/werkboek.css -- niet hier bewerken.
   Wijzig de bron en draai _huisstijl/uitrol.sh. */
/* stempel sha256:159c3e8e7b10a0ba40a70542992a626e9a437f5457da2c8d521c183a98d02f98 -- deze hash hoort bij de tekst hieronder. Klopt hij niet, dan is er met de hand in dit bestand geschreven en weigert uitrol.sh te overschrijven. */
/* ============================================================
   werkboek.css — GGZ-VS/JASP-werkboek
   De DOEN-arm van "De regressieve ruggengraat".
   Versie 0.1 (23-7-2026).

   DUO-SIGNATUUR met het boek (besloten 23-7-2026):
   - Papier, bureau en typografie komen uit boek/01_schetsen/boek.css
     (waarden hier GEKOPIEERD met bron-commentaar — géén koppeling; het
     boek blijft onaangeraakt). Boek en werkboek liggen op één bureau.
   - De callout-familie komt uit de countcamp/OZP1-huisstijl
     (uni_leiden/.../_common/styles/countcamp.css + ONTWERP_A §3b),
     gedeeld voor cross-cursus-herkenning. .spss-syntax heet hier .jasp.
   - De voet-callout .boekvorm ("Zelfde vorm in het boek") is nieuw:
     zand + EB Garamond = typografisch een citaat uit het boek.

   Bewuste DIVERGENTIE t.o.v. het boek: de body is LINKS uitgelijnd
   (ragged right) i.p.v. justified — dit is een naslagwerk, geen leesboek.
   ============================================================ */

/* Broertje-fonts (2-8, Ben — "rust, altijd"): Newsreader = leestekst,
   Source Sans 3 = UI, Source Code Pro = RStudio-code. Websites mogen @import. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital@0;1&family=Source+Sans+3:wght@400;600&family=Source+Code+Pro&display=swap');

/* ============================================================
   A. PAPIER & BUREAU  (uit boek.css — zelfde bureau als het boek)
   ============================================================ */

html {
  background-color: #f0ece4;          /* bureau-beige (boek.css r.8) */
}

body {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;  /* leestekst = warme leesserif */
  font-size: 18px;
  line-height: 1.7;
  color: #2a2520;
  background-color: #f0ece4;           /* bureau-beige loopt door — geen witte doos */
}

/* UI-chrome = Source Sans (sidebar, callout-koppen, kickers, ondertitel, knoppen) */
#quarto-sidebar, .sidebar-navigation,
.callout > .callout-header, .callout .callout-title-container,
#title-block-header p.subtitle.lead,
.beweging, .kicker, .data-download, #toc-toggle {
  font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================================
   WEBSITE-LAYOUT — de inhoudsopgave zweeft op het bureau (crème,
   geen wit kader), naar links met lucht; alleen de leeskolom is papier.
   ============================================================ */
.sidebar.sidebar-navigation,
.sidebar.sidebar-navigation.docked,
#quarto-sidebar,
nav.sidebar {
  background-color: transparent !important;
  border-right: none !important;
  box-shadow: none !important;
  padding-left: 0.5rem;
}
.sidebar-navigation .sidebar-item-text { color: #4a4540; }
.sidebar-navigation .sidebar-link.active { font-weight: 600; color: #2a2520; }
.sidebar-navigation .sidebar-title { color: #6a655c; }

/* De leeskolom = het papier-witte vel: lucht van de inhoudsopgave, iets breder,
   zachte schaduw zodat het los op het bureau ligt. */
main.content,
#quarto-document-content {
  background-color: #fdfcf9;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  padding: 2.6em 3.4em 4em !important;
  margin-left: auto;      /* gecentreerd: witruimte links en rechts in balans */
  margin-right: auto;
  max-width: none;    /* grid body-width (950px) bepaalt de breedte */       /* iets breder */
}

/* DIVERGENTIE: naslagwerk = links uitgelijnd, geen woordafbreking.
   (Het boek is hier justified; dat is het verschil tussen lezen en opzoeken.) */
p, li {
  text-align: left;
  hyphens: none;
  margin-bottom: 1.2em;
}

/* --- Koppen: de zes-slag-koppen ZIJN de vormgeving (geen kleur per slag) --- */
h1 {
  margin-top: 0;
  margin-bottom: 1.6em;
  font-weight: 600;
  font-size: 1.9em;
  color: #2a2520;
}
h2 {
  margin-top: 2.6em;
  margin-bottom: 1em;
  font-weight: 600;
  font-size: 1.35em;
  color: #2a2520;
}
h3 {
  margin-top: 2em;
  margin-bottom: 0.8em;
  font-weight: 500;
  font-size: 1.12em;
  color: #3a3530;
}
h1 + p, h2 + p, h3 + p { margin-top: 0.4em; }

/* Titelblok (Quarto #title-block-header) — boek-waardig, droog */
#title-block-header { margin: 0 0 2.4em; }
#title-block-header h1.title {
  font-size: 1.9em;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.35em;
  color: #2a2520;
}
#title-block-header p.subtitle.lead {
  font-size: 1.02em;
  font-weight: 400;
  color: #6a655c;
  margin: 0;
  text-align: left;
}

/* --- Sectie-structuur (broertjes 2-8): onderwerp-koppen (h2, Newsreader)
   dragen de sectie; de trede staat als klein potlood-kicker (variant C)
   erboven; de beweging-kicker bovenaan de opdracht. Alle kickers = Source Sans. --- */
.beweging {
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6a655c;
  margin: 0 0 0.4em;
}
.kicker {                        /* trede-kicker: prikkel / speel het / schud het / snap het */
  font-size: 0.6em;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a948a;
  margin: 0 0 0.1em;
  line-height: 1.2;
}
.kicker::after {
  content: "";
  display: block;
  width: 2.2em;
  height: 1px;
  background: #d6d0c6;
  margin-top: 0.5em;
}
/* een kicker luidt een nieuwe sectie in → lucht erboven, en de kop volgt strak eronder.
   Quarto wrapt elke kop in <section class="level2">, dus de kop is géén directe buur
   van de kicker maar zit ín de section die er wél op volgt. */
.kicker { margin-top: 3em; }
.kicker p, .beweging p { margin: 0; }                 /* geen dubbele alinea-marge in de kicker-div */
.kicker + section.level2 > h2,
.kicker + section.level3 > h3 { margin-top: 0.3em; }
.beweging + .kicker { margin-top: 1.6em; }            /* iets minder lucht direct onder de beweging */
.verhaal {                       /* verhaal-vleugje: Newsreaders eigen cursief, géén vreemde serif */
  font-style: italic;
  color: #4a4540;
}

/* --- Code (bestandsnamen, kolommen, JASP-velden in lopende tekst) --- */
code {
  background-color: #f5f0e8;
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: 'Source Code Pro', 'Fira Code', Menlo, Consolas, monospace;  /* RStudio-eigen */
  color: #4a3f30;
}
pre {
  background-color: #faf6f0;
  border-left: 3px solid #c8a97e;
  padding: 1.1em 1.4em;
  margin: 1.6em 0;
  font-size: 0.86em;
  line-height: 1.55;
  border-radius: 4px;
  overflow-x: auto;
  font-family: 'Source Code Pro', 'Fira Code', Menlo, Consolas, monospace;
}

/* --- Het "Vooraf, in één zin"-blockquote bovenaan + citaten --- */
blockquote {
  margin: 1.6em 0;
  padding: 0.6em 1.2em;
  border-left: 3px solid #c8b8a0;
  background-color: #f7f3ec;
  color: #4a4540;
  font-style: normal;
}
blockquote p { text-align: left; margin-bottom: 0.6em; }
blockquote p:last-child { margin-bottom: 0; }

/* --- Tabellen: APA-stijl (horizontale lijnen), als in het boek --- */
table {
  margin: 1.8em 0;
  border-collapse: collapse;
  border-top: 2.5px solid #000;
  border-bottom: 2.5px solid #000;
  line-height: 1.3;
  font-size: 0.96em;
}
thead th {
  border-bottom: 1px solid #000;
  text-align: left;
  padding: 0.42em 1em 0.22em;
  font-weight: 600;
}
tbody td { padding: 0.2em 1em; border: none; }

/* --- Horizontale separator --- */
hr {
  border: none;
  border-top: 1px solid #e0d4be;
  margin: 3em auto;
  width: 50%;
}

/* ============================================================
   B. CALLOUT-FAMILIE  (uit countcamp.css + ONTWERP_A §3b)
   Gevulde gekleurde titel-balk + lichte body. Gedeeld met de
   OZP1/MVDA-werkboeken voor cross-cursus-herkenning.
   ============================================================ */

.callout {
  margin-top: 2.4em !important;
  margin-bottom: 2.4em !important;
  border-radius: 6px;
  overflow: hidden;
}
.callout > .callout-header {
  padding: 0.55rem 1rem !important;
  font-weight: 700 !important;
  border-bottom: none !important;
}
.callout > .callout-header .callout-title-container {
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}
.callout > .callout-body-container,
.callout > div.callout-collapse {
  padding: 0.9rem 1.15rem !important;
}
.callout li { margin-bottom: 0.5rem; }

/* Neutraliseer Quarto's default note-streepje (zoals boek.css r.814) */
.callout { border-left-color: #d8d3c8 !important; }

/* ---------- Opgave (.opgave, #6A6EAF indigo) ---------- */
.callout-note.opgave {
  border-color: #6A6EAF !important;
  border-left: none !important;
}
.callout-note.opgave > .callout-header,
.callout-note.opgave > .callout-header .callout-title-container {
  background-color: #6A6EAF !important;
  color: #ffffff !important;
}
.callout-note.opgave > .callout-body-container,
.callout-note.opgave > div.callout-collapse {
  background-color: #E9E9F3 !important;
}

/* ---------- Antwoord / uitwerking (callout-caution, #4D8962 groen, collapse) ---------- */
.callout-caution {
  border-color: #4D8962 !important;
  border-left: none !important;
}
.callout-caution > .callout-header,
.callout-caution > .callout-header .callout-title-container {
  background-color: #4D8962 !important;
  color: #ffffff !important;
}
.callout-caution .callout-icon-container,
.callout-caution .callout-icon::before { display: none !important; }
.callout-caution .callout-header { padding-left: 1rem !important; }
.callout-caution > .callout-body-container,
.callout-caution > div.callout-collapse {
  background-color: #E4EDE7 !important;
}

/* ---------- JASP-klikpad (.jasp, #4A5D7E slate — "de plek waar de software woont") ---------- */
/* Zelfde slate als .spss-syntax elders: de tool wisselt, de plek niet. */
.callout-note.jasp {
  border-color: #4A5D7E !important;
  border-left: none !important;
}
.callout-note.jasp > .callout-header,
.callout-note.jasp > .callout-header .callout-title-container {
  background-color: #4A5D7E !important;
  color: #ffffff !important;
}
.callout-note.jasp > .callout-body-container,
.callout-note.jasp > div.callout-collapse {
  background-color: #E1E7EF !important;
}
.callout-note.jasp code {
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace !important;
  font-size: 0.9rem;
}
/* klikpad als pad-notatie: Analyses > T-Tests > Paired Samples */
.callout-note.jasp .klikpad { font-weight: 600; letter-spacing: 0.01em; }

/* ---------- Formule (lezen, niet rekenen) (.formule, #2F7E78 teal, ƒ) ---------- */
.callout-note.formule {
  border-color: #2F7E78 !important;
  border-left: none !important;
}
.callout-note.formule > .callout-header,
.callout-note.formule > .callout-header .callout-title-container {
  background-color: #2F7E78 !important;
  color: #ffffff !important;
}
.callout-note.formule .callout-icon-container,
.callout-note.formule .callout-icon::before { display: none !important; }
.callout-note.formule > .callout-header { padding-left: 1rem !important; }
.callout-note.formule > .callout-header .callout-title-container::before {
  content: "\0192\00a0\00a0";        /* ƒ */
  font-style: italic;
  font-weight: 700;
}
.callout-note.formule > .callout-body-container,
.callout-note.formule > div.callout-collapse {
  background-color: #E6F0EE !important;
}
.callout-note.formule .callout-body-container hr {
  border: none;
  border-top: 1px solid #b9d6cf;
  margin: 0.6rem 0 0.9rem;
  width: 100%;
}

/* ---------- APA-oefening (.apa, #7A5A44 hout-bruin, ✎ — "Schrijf het op") ---------- */
.callout-note.apa {
  border-color: #7A5A44 !important;
  border-left: none !important;
}
.callout-note.apa > .callout-header,
.callout-note.apa > .callout-header .callout-title-container {
  background-color: #7A5A44 !important;
  color: #ffffff !important;
}
.callout-note.apa .callout-icon-container,
.callout-note.apa .callout-icon::before { display: none !important; }
.callout-note.apa > .callout-header { padding-left: 1rem !important; }
.callout-note.apa > .callout-header .callout-title-container::before {
  content: "\270E\00a0\00a0";         /* ✎ */
  font-weight: 700;
}
.callout-note.apa > .callout-body-container,
.callout-note.apa > div.callout-collapse {
  background-color: #F2ECE4 !important;
}

/* ============================================================
   C. VOET-CALLOUT .boekvorm — "Zelfde vorm in het boek" (nieuw)
   Een plain div (géén Quarto-callout) zodat het machine-anker
   data-w onaangeroerd in de HTML overleeft: <div class="boekvorm"
   data-w="W6">. Typografisch een citaat uit het boek: EB Garamond,
   zand, ◠. Smalle strook aan de voet, dunne zandlijn erboven.
   ============================================================ */
.boekvorm {
  font-family: 'Newsreader', Georgia, serif;   /* in-familie met de leestekst (2-8) */
  font-style: italic;
  font-size: 0.98em;
  line-height: 1.7;
  color: #4a3f1e;
  background-color: #F8F4E8;          /* zand-body (ONTWERP_A) */
  border-top: 2px solid #C2A868;      /* dunne zandlijn */
  border-radius: 0 0 4px 4px;
  margin: 3.5em -1.5em 0;             /* smalle strook, iets in de marge */
  padding: 1em 1.5em 1.1em;
}
.boekvorm p {
  text-align: left;
  margin-bottom: 0.5em;
}
.boekvorm p:last-child { margin-bottom: 0; }
/* De titelregel (◠ **Zelfde vorm in het boek**) draagt het boogje al in
   de tekst; een stille bold-label in Garamond, géén kapitalen — dit is een
   citaat uit het boek, geen UI-etiket. */
.boekvorm > p:first-child {
  font-size: 0.94em;
  font-weight: 600;
  color: #8a7433;
  margin-bottom: 0.7em;
}
/* De cursieve slotzin (structuur-duiding) mag fluisteren */
.boekvorm em { color: #6a5a2e; }

/* ============================================================
   D. WERKNOTITIES + inline-helpers
   ============================================================ */

/* .werk — licht plakbriefje voor TODO's (bv. boek-hoofdstuk nog grof).
   Lichte variant: geen JS-rail/toggle (dat komt later uit boek's _afterbody). */
.werk {
  background-color: #fbf2ad;
  background-image: linear-gradient(180deg, #fdf8c9 0%, #f8eda1 100%);
  color: #4a4020;
  font-size: 0.82em;
  line-height: 1.5;
  padding: 0.7em 1em 0.8em;
  margin: 1.4em 0;
  box-shadow: 1px 3px 9px rgba(70, 55, 0, 0.18);
  border-radius: 1px;
}
.werk::before {
  content: "✎ werk";
  display: block;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #96832e;
  margin-bottom: 0.35em;
}
.werk p { margin-bottom: 0.4em; }
.werk p:last-child { margin-bottom: 0; }

/* .eng — Engelse term tussen haakjes, gedempt (optionele helper) */
.eng { color: #7d8a93; font-style: italic; font-size: 0.9em; }

/* ---------- .verderwil — overslaanbare verdieping (22-8-2026) -------------
   OVERGEZET UIT HET BOEK, niet hier bedacht: waarden letterlijk uit
   boek/01_schetsen/boek.css r273-297, inclusief de telefoon-regel van r999.
   Zelfde motief als .boekvorm: het kader is typografisch een citaat uit het
   boek, dus het houdt de kleuren van het boek en niet die van dit bureau.

   Waarom gestreept en niet massief: de stippellijn IS het signaal. Een kader
   dat je mag overslaan moet er anders uitzien dan een kader dat je moet doen
   -- de tool-callouts (.rcode/.jasp/.spss) hebben een massieve balk met een
   kop, dit heeft geen kop en een onderbroken rand.

   Aanleiding: Bens besluit van 22-8 om de andere soorten betrouwbaarheid
   "onder extra verdieping" te zetten "zodat ze ook gewoon kunnen skippen".
   Gemeten op 22-8: .verderwil stond in 47 bestanden in deze repo en in
   NUL bestanden onder boek/oefenboeken/ -- en in geen van de vijf
   werkboek-css'en. Zonder deze regels rendert zo'n kader als platte tekst,
   en dan is het niet overslaanbaar maar gewoon tekst.                       */
.verderwil {
  clear: right;
  font-size: 0.92em;
  background-color: #eef1f4;
  border-left: 3px dashed #9db3c4;
  padding: 0.9em 1.4em 1em;
  margin: 1.8em 2em;
  color: #45505a;
  line-height: 1.65;
  border-radius: 2px;
}
.verderwil p {
  text-align: left;
  hyphens: none;
  margin-bottom: 0.6em;
}
.verderwil p:last-child { margin-bottom: 0; }
.verderwil strong { color: #2a3b48; }

/* Op een telefoon zijn die zijmarges geen ademruimte maar een halvering
   van de leesbreedte -- zelfde reparatie als in boek.css. */
@media (max-width: 860px) {
  .verderwil { margin-left: 0; margin-right: 0; padding-left: 1em; padding-right: 1em; }
}

/* JASP-output-screenshots (later, in één ronde) — zachte kaderlijn */
img[src*="/pics/"], img[src*="screenshot"] {
  border: 1px solid #c5c8d4;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  margin: 1rem 0;
  max-width: 100%;
}

/* ============================================================
   E. PRINT — schaduw weg, wit papier
   ============================================================ */
@media print {
  html { background-color: white; }
  body {
    max-width: 100%; width: 100%; margin: 0;
    padding: 2.2cm 2.5cm 2.5cm;
    box-shadow: none; border-radius: 0; background-color: white;
    font-size: 11pt; line-height: 1.5; color: black;
  }
  .callout, .boekvorm, .verderwil, table { page-break-inside: avoid; break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; break-after: avoid; }
  .werk { display: none; }
}

/* ---------- R-code-blok (.rcode) — zelfde slate als .jasp elders:
   "de plek waar de software woont", nu R/RStudio i.p.v. JASP. ---------- */
.callout-note.rcode {
  border-color: #4A5D7E !important;
  border-left: none !important;
}
.callout-note.rcode > .callout-header,
.callout-note.rcode > .callout-header .callout-title-container {
  background-color: #4A5D7E !important;
  color: #ffffff !important;
}
.callout-note.rcode > .callout-body-container,
.callout-note.rcode > div.callout-collapse {
  background-color: #E1E7EF !important;
}

/* ---------- SPSS-menu-blok (.spss) — zelfde slate als .rcode/.jasp:
   "de plek waar de software woont", nu SPSS. ---------- */
.callout-note.spss {
  border-color: #4A5D7E !important;
  border-left: none !important;
}
.callout-note.spss > .callout-header,
.callout-note.spss > .callout-header .callout-title-container {
  background-color: #4A5D7E !important;
  color: #ffffff !important;
}
.callout-note.spss > .callout-body-container,
.callout-note.spss > div.callout-collapse {
  background-color: #E1E7EF !important;
}

/* ============================================================
   F. INHOUD-TOGGLE — klein knopje om de inhoudsopgave weg te klappen
      voor breder lezen (JS-toggle in _quarto.yml include-after-body).
   ============================================================ */
html.toc-weg .sidebar.sidebar-navigation,
html.toc-weg #quarto-sidebar { display: none !important; }
html.toc-weg main.content,
html.toc-weg #quarto-document-content {
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}
#toc-toggle {
  position: fixed;
  bottom: 14px;
  left: 14px;
  z-index: 1000;
  font-size: .85rem;
  padding: .3em .7em;
  background: #F8F4E8;
  border: 1px solid #C2A868;
  border-radius: 16px;
  color: #4a3f1e;
  cursor: pointer;
  opacity: .85;
}

/* Downloadknop voor de dataset — in de doe-sectie van elk blok */
.data-download{display:inline-block;margin:.3rem 0 1.2rem;padding:.5em 1em;background:#4A5D7E;color:#fff !important;border-radius:6px;font-weight:600;text-decoration:none !important;font-size:.95em;}
.data-download:hover{background:#3a4a66;}

/* --- Verwijzing naar de naslagpagina (10-8-2026) ---------------------
   Eén regel, op de plek waar een basishandeling voor het eerst nodig is,
   die doorlinkt naar de gereedschapskist achterin. Bewust klein en
   terzijde: hij mag de les niet onderbreken, alleen zeggen "dit staat
   ook ergens uitgelegd". Vandaar de gestippelde lijn i.p.v. een blok.

   Staat sinds 12-8-2026 hier in de bron. Hij was op 10-8 rechtstreeks in
   r/werkboek.css geschreven -- het bestand dat bovenaan zegt "niet hier
   bewerken" -- en de eerstvolgende uitrol had hem stil gewist: de tien
   [...]{.naslag}-regels in het R-boekje waren dan platte tekst geworden
   zonder pijltje en zonder lijn, en er zou niets zijn omgevallen.

   Alleen het R-boekje gebruikt hem nu (tien plekken, in de 20_blokken).
   Jasp en spss krijgen de regel wel mee maar hebben geen .naslag in hun
   tekst staan, dus daar kleurt hij niets. Dat is de bedoeling: één
   huisstijl voor de drie broertjes, ook als er eentje iets nog niet
   gebruikt. Wie hem in jasp of spss inzet, krijgt vanzelf dezelfde vorm. */
.naslag {
  display: block;
  margin: 1.4em 0 1.6em;
  padding: .55em 0 .55em .95em;
  border-left: 2px dotted #c9a866;
  font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.88em;
  line-height: 1.55;
  color: #6f6a61;
}
.naslag::before {
  content: "↳ ";
  color: #c9a866;
  font-weight: 700;
}
.naslag a { color: #4A5D7E; font-weight: 600; }

/* --- Even checken (26-8-2026) ----------------------------------------
   Zusje van .naslag hierboven, en met opzet dezelfde vorm: één regel
   terzijde, klein, die de les niet onderbreekt. Het verschil zit in de
   richting. .naslag stuurt je wég van de bladzij ("dit staat ook ergens
   uitgelegd"); .even-checken houdt je hier en stuurt je naar je eigen
   scherm ("draai dit even, dit hoor je te zien").

   Waarom de naam er zichtbaar bij staat in plaats van een icoontje: dit
   blok bestaat om een gewóónte te installeren, niet om een tekstsoort te
   markeren. Ben, 26-8-2026: "nu vragen ze aan mij, doe ik het goed? ipv
   zelf te kijken en zich af te vragen, hoe check ik of het goed gegaan
   is?" Een pictogram moet je leren; de woorden 'even checken' vragen dat
   niet, en de lezer leest ze elke keer opnieuw.

   Groen, en dus dezelfde kleur als de uitwerkings-callout (#4D8962).
   Dat is geen botsing maar dezelfde belofte: hier kun je zien of het
   klopte. Het onderscheid draagt de vorm -- een callout is een blok met
   een balk, dit is een regel met een streepje.

   Doorlopende streep tegenover de gestippelde van .naslag: een
   verwijzing is vrijblijvend, een controle niet.                       */
.even-checken {
  display: block;
  margin: 1.4em 0 1.6em;
  padding: .55em 0 .55em .95em;
  border-left: 2px solid #4D8962;
  font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.88em;
  line-height: 1.55;
  color: #55605a;
}
.even-checken::before {
  content: "even checken\00a0\00a0";
  color: #4D8962;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82em;
}
.even-checken code {
  font-family: 'Source Code Pro', 'Menlo', 'Monaco', monospace;
  font-size: 0.92em;
  background: #EAF1EC;
  padding: .05em .3em;
  border-radius: 3px;
}
.even-checken a { color: #4A5D7E; font-weight: 600; }

/* --- Begrippen-regel onder een sectiekop (5-8-2026) ------------------
   Noemt de begrippen die in die sectie behandeld worden. Doel is
   vindbaarheid: dit is ECHTE tekst, dus hij staat in de zoekindex en
   in de pagina zelf -- niet door JS toegevoegd. Zo vindt wie op
   "standaardafwijking" zoekt ook de sectie die zo niet heet, en kan
   Ben in de klas naar een subsectie linken (elke sectie heeft al een
   eigen id).                                                          */
p:has(> .begrippen:only-child) { margin: -0.35em 0 1.3em; }
.begrippen {
  display: block;
  font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.82em;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #8a8378;
}

/* ============================================================
   De route bovenaan een oefening (9-8-2026)
   De zijbalk toont alleen "Oefening 10.1" en verzwijgt de acht
   stappen erbinnen. Deze lijst zet ze bovenaan de bladzij, waar
   je begint — compact, als een routebordje, niet als een blok.
   ============================================================ */
#toc-in-deze-oefening,
nav#TOC {
  margin: 0 0 2.4rem;
  padding: 0.9rem 1.2rem 1rem;
  background: #faf7f0;
  border: 1px solid #e6ded0;
  border-left: 3px solid #c9a866;
  border-radius: 3px 8px 4px 9px / 8px 4px 9px 3px;
  font-size: 0.92em;
}
nav#TOC > h2,
nav#TOC .toc-title {
  margin: 0 0 0.5rem;
  font-size: 0.78em;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: #8a8378;
}
nav#TOC ul {
  margin: 0;
  padding-left: 1.1rem;
  list-style: none;
  counter-reset: stap;
}
nav#TOC ul li {
  margin: 0.18rem 0;
  counter-increment: stap;
}
nav#TOC ul li::before {
  content: counter(stap) ".";
  display: inline-block;
  width: 1.5rem;
  margin-left: -1.5rem;
  color: #b9a476;
  font-variant-numeric: tabular-nums;
}
nav#TOC ul li a {
  color: #4a4438;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
nav#TOC ul li a:hover {
  color: #8a6212;
  border-bottom-color: #d8c69b;
}