/* GGZ-VS/JASP-schil -- eigen huisstijl, BEWUST afwijkend van de gedeelde
   broertjes-bron (oefenboeken/broertjes/_huisstijl/werkboek.css). Deze schil
   heeft een eigen scaffold: artikelfragment-ingang, APA-rapportage, omgekeerde
   pijl. Wat hier staat is dus geen achterstand maar een keuze; wie iets aan de
   gedeelde vorm verandert, kijkt hier apart of het mee moet. */
/* ============================================================
   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.
   ============================================================ */

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

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

body {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: #2a2520;
  background-color: #f0ece4;           /* bureau-beige loopt door — geen witte doos */
}

/* ============================================================
   WEBSITE-LAYOUT — de inhoudsopgave zweeft op het bureau (crème,
   geen wit kader), naar links met lucht; alleen de leeskolom is papier.
   (gelijk aan de broertjes, zodat de vier oefenboeken één bureau delen)
   ============================================================ */
.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, en gecentreerd. */
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 */
}

/* 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;
}

/* --- 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: 'Fira Code', 'Source Code Pro', Menlo, Consolas, monospace;
  color: #4a3f30;
}
pre {
  background-color: #faf6f0;
  border-left: 3px solid #c8a97e;
  padding: 1.1em 1.4em;
  margin: 1.6em 0;
  font-size: 0.92em;
  line-height: 1.55;
  border-radius: 4px;
  overflow-x: auto;
}

/* --- 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: 'EB Garamond', 'Crimson Pro', Georgia, serif;
  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, plus de telefoon-regel van r999.
   Zelfde motief als .boekvorm: typografisch een citaat uit het boek, dus het
   houdt de kleuren van het boek en niet die van dit bureau.

   De stippellijn IS het signaal. Een kader dat je mag overslaan moet er
   anders uitzien dan een kader dat je moet doen -- .jasp heeft een massieve
   balk met een kop, dit heeft geen kop en een onderbroken rand.

   Deze regels staan met opzet ook in de drie broertjes
   (broertjes/_huisstijl/werkboek.css, dezelfde dag): het is één vorm voor de
   hele familie. Dat is de huisstijl, en huisstijl is het enige wat GGZ-VS met
   de broertjes deelt -- de didactiek niet, want hier loopt de omgekeerde pijl.

   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/. 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; }
}

/* ============================================================
   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;}