/* CountCamp Lab — callout-stijl
   ----------------------------------------------------------------------
   Kleurpalet — gekozen door Mech (2026-05-29), zachter/pastel.
   Synchroon te houden met styles/countcamp.tex.

     ccConcept   #2A79A7  concept (note)               blauw
     ccOpg       #6A6EAF  opgave (note .opgave)        indigo-paars
     ccTip       #AD8EB4  vuistregel (tip)             mauve  (donkere titel)
     ccAlarm     #EC8346  alarm (warning)              oranje
     ccDont      #F05633  don't (important)            rood-oranje
     ccAns       #4D8962  antwoord (caution)           groen
     ccAlt       #9CC4A3  reserve (.tidy-alt)          licht groen (donkere titel)
     ccSpss      #4A5D7E  SPSS-syntax (.spss-syntax)   slate-blue
     ccConv      #D3D182  conventie (.conventie / .rotterdam-conventie)  olijf (donkere titel)
     ccForm      #2F7E78  formule-blok (.formule)      teal
     ccRap       #33322E  rapportage (.rapportage)     grafiet — bewust géén palet-kleur
     ccWarmDonker #3A1A0A  titelinkt op alarm + don't   warm donker, geen balk

   Titelinkt van de twee warme kaders: ccWarmDonker #3A1A0A, dieper dan de
   grafiet #33322E van de andere lichte balken. Besluit Ben 16-8-2026: de
   balken blijven, alleen de inkt gaat dieper. Gemeten contrast 16-8-2026:

     alarm #EC8346   PDF 5,93   scherm 4,38    (was 4,83 / 3,48)
     don't #F05633   PDF 4,57   scherm 3,41    (was 3,72 / 2,71)

   De PDF haalde daarmee voor allebei de 4,5 van WCAG voor gewone tekst; het
   scherm niet, want Quarto zet `opacity` op elke callout-kop en dat verwatert
   balk en letters samen. Besluit Ben 23-8-2026: die dekking gaat eruit --
   `opacity: 1` staat hieronder bij `.callout > .callout-header`. Don't heeft
   weinig lucht: gaat dat oranje ooit een tint lichter, dan zakt ook de PDF
   onder de 4,5.

   Tel de koppen hier niet over. Wat elke kop werkelijk haalt rekent
   _tools/proef_kaders/koppen_contrast.py uit, uit deze CSS; een tabel op deze
   plek gaat bij de volgende paletwissel stilletjes liegen, precies zoals het
   lijstje dat hierboven al eens is weggehaald. Twee koppen halen de 4,5 ook
   zonder dekking niet -- dat is een paletvraag en die ligt bij Ben.

   Stijl: gevulde gekleurde title-balk + lichte body. De inkt op de balk is
   wit waar dat leesbaar is en donker (#33322E; op alarm en don't #3A1A0A) waar dat niet zo is. Wélke
   balk welke inkt krijgt staat hier bewust niet opgesomd: dat rekent
   _tools/palet_gelijktrekken.py uit (WCAG-contrast) en schrijft het in
   countcamp.tex. Een lijstje hier gaat bij de volgende paletwissel stilletjes
   liegen — en dat gebeurde ook: tot 16-8-2026 stond hier "tip /
   tidy-alt", terwijl alarm en don't in de tex allang donkere inkt hadden.
   De aantekening "(donkere titel)" hierboven is wél sturend: die overrulet
   de som, en het script meldt het zodra de twee uiteenlopen.
   ---------------------------------------------------------------------- */

body {
  font-family: 'Georgia', serif;
  font-size: 1.05rem;
  line-height: 1.85;
  color: #1a1a1a;
}

h1, h2, h3 {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 600;
  color: #1a3a5c;
}
h1 { margin-top: 5rem;    margin-bottom: 1.75rem; }
h2 { margin-top: 4rem;    margin-bottom: 1.4rem; }
h3 { margin-top: 3rem;    margin-bottom: 1.1rem; }

p { margin-bottom: 1.4rem; }

div.sourceCode,
pre {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.callout {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
  border-radius: 6px;
  overflow: hidden;
}

.callout > .callout-header {
  padding: 0.6rem 1rem !important;
  font-weight: 700 !important;
  border-bottom: none !important;
  /* Quarto zet zelf een dekking op de kop: 85 % gewoon, 75 % bij
     appearance="simple". Nagemeten 23-8-2026 in de CSS die Quarto 1.9.38
     uitspuugt, niet uit de documentatie overgenomen. Die dekking geldt voor de
     balk EN de letters, dus allebei schuiven naar het wit van de bladzijde en
     het contrast zakt mee -- op papier speelt dat niet, en daardoor zeiden de
     twee formaten iets anders over dezelfde hex.
     Besluit Ben 23-8-2026: de dekking eruit. Kost een iets verzadigder balk;
     levert op dat het scherm toont wat er staat, zonder dat er ook maar een
     palet-waarde verzet hoeft te worden. Het rapportage-blok merkt er niets
     van: dat is met opzet een kale div en kende deze dekking nooit.
     `!important` moet, want Quarto's eigen selector weegt zwaarder dan deze. */
  opacity: 1 !important;
}

.callout > .callout-header .callout-title-container {
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}

.callout > .callout-body-container,
.callout > div.callout-collapse {
  padding: 1rem 1.2rem !important;
}

.callout div.sourceCode,
.callout pre {
  margin-top: 1.2rem !important;
  margin-bottom: 1.2rem !important;
}

.callout p strong:first-child {
  display: inline-block;
  margin-top: 0.4rem;
}

blockquote {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.callout li { margin-bottom: 0.55rem; }
ul, ol { margin-bottom: 1.4rem; }

/* =====================================================================
   De callouts — gevulde header-balk + lichte body
   ===================================================================== */

/* ---------- 1. Concept (callout-note, #2A79A7) ---------------------- */
.callout-note:not(.opgave):not(.tidy-alt):not(.spss-syntax):not(.rotterdam-conventie):not(.conventie):not(.formule) {
  border-color: #2A79A7 !important;
  border-left: none !important;
}
.callout-note:not(.opgave):not(.tidy-alt):not(.spss-syntax):not(.rotterdam-conventie):not(.conventie):not(.formule) > .callout-header,
.callout-note:not(.opgave):not(.tidy-alt):not(.spss-syntax):not(.rotterdam-conventie):not(.conventie):not(.formule) > .callout-header .callout-title-container {
  background-color: #2A79A7 !important;
  color: #ffffff !important;
}
.callout-note:not(.opgave):not(.tidy-alt):not(.spss-syntax):not(.rotterdam-conventie):not(.conventie):not(.formule) > .callout-body-container,
.callout-note:not(.opgave):not(.tidy-alt):not(.spss-syntax):not(.rotterdam-conventie):not(.conventie):not(.formule) > div.callout-collapse {
  background-color: #DFEBF2 !important;
}

/* ---------- 2. Opgave (callout-note .opgave, #6A6EAF) --------------- */
.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;
}

/* ---------- 3. Vuistregel (callout-tip, #AD8EB4, donkere titel) ----- */
.callout-tip {
  border-color: #AD8EB4 !important;
  border-left: none !important;
}
.callout-tip > .callout-header,
.callout-tip > .callout-header .callout-title-container {
  background-color: #AD8EB4 !important;
  color: #3a2f40 !important;
}
.callout-tip > .callout-body-container,
.callout-tip > div.callout-collapse {
  background-color: #F3EEF4 !important;
}

/* ---------- 4. Alarm (callout-warning, #EC8346) -------------------- */
.callout-warning {
  border-color: #EC8346 !important;
  border-left: none !important;
}
.callout-warning > .callout-header,
.callout-warning > .callout-header .callout-title-container {
  background-color: #EC8346 !important;
  color: #3A1A0A !important;
}
.callout-warning > .callout-body-container,
.callout-warning > div.callout-collapse {
  background-color: #FCECE3 !important;
}

/* ---------- 5. Don't (callout-important, #F05633) ------------------ */
.callout-important {
  border-color: #F05633 !important;
  border-left: none !important;
}
.callout-important > .callout-header,
.callout-important > .callout-header .callout-title-container {
  background-color: #F05633 !important;
  color: #3A1A0A !important;
}
.callout-important > .callout-body-container,
.callout-important > div.callout-collapse {
  background-color: #FDE6E0 !important;
}

/* ---------- 6. Antwoord (callout-caution, #4D8962) ----------------- */
.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;
}

/* ---------- 7. Reserve / alternatief (.tidy-alt, #9CC4A3, donkere titel) */
.callout-note.tidy-alt {
  border-color: #9CC4A3 !important;
  border-left: none !important;
}
.callout-note.tidy-alt > .callout-header,
.callout-note.tidy-alt > .callout-header .callout-title-container {
  background-color: #9CC4A3 !important;
  color: #24402c !important;
}
.callout-note.tidy-alt > .callout-body-container,
.callout-note.tidy-alt > div.callout-collapse {
  background-color: #F0F6F1 !important;
}

/* ---------- 8. SPSS-syntax (.spss-syntax, #4A5D7E) ----------------- */
.callout-note.spss-syntax {
  border-color: #4A5D7E !important;
  border-left: none !important;
}
.callout-note.spss-syntax > .callout-header,
.callout-note.spss-syntax > .callout-header .callout-title-container {
  background-color: #4A5D7E !important;
  color: #ffffff !important;
}
.callout-note.spss-syntax > .callout-body-container,
.callout-note.spss-syntax > div.callout-collapse {
  background-color: #E1E7EF !important;
}
.callout-note.spss-syntax pre,
.callout-note.spss-syntax code {
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace !important;
  font-size: 0.92rem;
}

/* ---------- 9. Conventie (.conventie / .rotterdam-conventie, #D3D182, donkere titel) */
.callout-note.rotterdam-conventie,
.callout-note.conventie {
  border-color: #D3D182 !important;
  border-left: none !important;
}
.callout-note.rotterdam-conventie > .callout-header,
.callout-note.rotterdam-conventie > .callout-header .callout-title-container,
.callout-note.conventie > .callout-header,
.callout-note.conventie > .callout-header .callout-title-container {
  background-color: #D3D182 !important;
  color: #4a4516 !important;
}
.callout-note.rotterdam-conventie > .callout-body-container,
.callout-note.rotterdam-conventie > div.callout-collapse,
.callout-note.conventie > .callout-body-container,
.callout-note.conventie > div.callout-collapse {
  background-color: #F8F8EC !important;
}

/* ---------- 10. Formule-blok (.formule, #2F7E78 teal — naslag/anker, M&M-stijl) */
.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;
}
/* eigen ƒ-merkje i.p.v. de note-ℹ */
.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;
}
/* de formule zelf wat lucht geven; legenda compact eronder */
.callout-note.formule .callout-body-container > p:has(> .math.display) {
  margin-top: 0.4rem;
  margin-bottom: 0.9rem;
}
.callout-note.formule .callout-body-container hr {
  border: none;
  border-top: 1px solid #b9d6cf;
  margin: 0.6rem 0 0.9rem;
}
.callout-note.formule .callout-body-container ul {
  margin-bottom: 0.4rem;
}

/* ---------- 11. Rapportage-blok (.rapportage, #33322E grafiet) ------
   De zin die de student letterlijk overneemt in haar eigen verslag. Dat is
   geen uitleg maar rapportage, en daar geldt APA onverkort — TAALGIDS §2,
   "Drie registers". Ben, 14-8-2026: "zolang rapportage secties maar echt APA
   zijn en dat het ook duidelijk is wanneer een rapportage rapportage is en
   dus geen uitleg."

   Bewust géén nieuwe kleur uit het palet. Die negen hexen coderen
   lés-functies (concept, opgave, alarm, antwoord); dit blok is geen
   lesonderdeel maar een stukje eindproduct. Warm grafiet leest daarom als
   drukwerk in plaats van als weer een categorie, en botst met niets in de
   kleurenblindheids-controle van het palet.

   GEEN merkje in de kop, en dat is een besluit (Ben, 15-8-2026: "haal 'm
   overal weg"). Er stond eerst een openend aanhalingsteken, als knipoog naar
   Bens eerste ingeving dat zo'n zin "toch tussen quotes" hoort te staan. In de
   render bleek het niets te betekenen: de ƒ van .formule zegt "dit is een
   formule", maar dit teken zei alleen dat er ooit iemand aan quotes dacht — en
   het las als een zetfout. De kop zegt zelf al wat het blok is. Zet er dus
   niets terug zonder reden.

   In het boek is ditzelfde blok juist stil (alleen inspringing) — zie
   boek/01_schetsen/boek.css. Eén merkteken, twee gedaanten.

   Het is bewust GEEN callout maar een kale div. Gemeten op 15-8-2026: Quarto
   zet `::: {.callout-note .x}` om in een Callout-knoop vóór callouts.lua
   draait, dus zo'n blok bereikt de filter nooit en zou in de PDF terugvallen
   op een standaard-callout. Een kale div komt er wel doorheen. Bijvangst:
   dezelfde markup werkt in het boek, waar alleen de CSS hem stil maakt. */
.rapportage {
  margin: 2rem 0;
  border-radius: 4px;
  overflow: hidden;          /* houdt de balk binnen de afgeronde hoeken */
}
.rapportage-kop {
  background-color: #33322E;
  color: #ffffff;
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
}
.rapportage-lijf {
  background-color: #F2F1ED;
  padding: 0.9rem 1rem 0.4rem;
}
/* De modelzin zelf rechtop laten. Cursief mag hier NIET generiek: dan ziet de
   student niet meer wélke tekens cursief horen — Ben, 8-6-2026, zie
   feedback_didactisch_apa_typografie_voorbeeld. */
.rapportage-lijf p {
  font-style: normal;
  line-height: 1.7;
  margin-bottom: 0.9rem;
}

/* ---------- SPSS-output-PNGs --------------------------------------- */
img[src*="/pics/"], img[src*="/output_raw/"] {
  border: 1px solid #c5c8d4;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  margin: 1rem 0;
  max-width: 100%;
}

/* ---------- inline-helpers ------------------------------------------- */

.dieren-subtitel {
  font-family: 'Georgia', serif;
  font-style: italic;
  color: #6c7a89;
  font-size: 1.05rem;
  margin-top: -0.6rem;
  margin-bottom: 1.4rem;
  padding-left: 0.1rem;
}

.getal {
  color: #b56028;
  font-weight: 500;
}

.eng {
  color: #7d8a93;
  font-style: italic;
  font-size: 0.88em;
}
.eng::before { content: "("; }
.eng::after  { content: ")"; }

blockquote {
  border-left: 4px solid #2A79A7;
  background-color: #DFEBF2;
  padding: 0.5rem 1rem;
  font-size: 1.05rem;
  color: #1a3a5c;
}

table {
  font-size: 0.95rem;
}

/* Woordenlijst-links — subtiel stippellijntje, herkenbaar als klikbaar begrip */
a[href*="woordenlijst.html#"] {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
a[href*="woordenlijst.html#"]:hover {
  border-bottom-style: solid;
}