/* ==========================================================================
   XY4ZA lesbrief-sjabloon. Het gedeelde blad voor lesbrieven, het
   les-evidenceblad en de docent-tools (ouderbrief, teamgesprek,
   vakintegratie, voortgang). 16 pagina's rijden hierop.

   Dit is de PAPIER-stem van het brandbook, en dat is hier geen metafoor:
   een docent print dit blad, deelt het in het team en stopt het in een map.
   Van alles wat XY4ZA maakt is dit het meest letterlijke papier.

   Het principe uit het boek voert zichzelf uit over twee media:
   "papier vertelt, scherm bewijst". Op een scherm is de hero dus scherm
   (donker, scanlines, krijt) want hij kondigt een speelbare module aan.
   Op papier wordt diezelfde hero papier, want daar vertelt papier. Zie de
   @media print onderaan. Dat scheelt en toner en is merk-eerlijk.

   Harde regels die hier gelden (uit assets/xy4za.css, het boek):
   - Brug-geel #F5B800 bestaat ALLEEN als pixel-4 en als markeerstift.
     Nooit als vlak. De oude .box.thuis had een amber vlak: die is weg.
   - Rode pen #D63C3C alleen als stempel of doorstreping, nooit gevuld.
   - Gloed-lila alleen op scherm-donker. Op papier verboden.
   - GEEN groen. De kinderdialect-schil (assets/module.css) heeft een groen
     als "goed zo"-signaal voor kleuters, maar dit blad is voor de DOCENT en
     volgt het boek strikt. De oude vinkjes waren groen, die zijn nu Volt.
   - Vakken verschillen door VORM en een HUD-label, niet door een kleurtje.
     Dat is dezelfde les als in de modules: kleur die niets betekent, liegt.
   - Geen emoji. Functionele tekens (checkmark, pijl) mogen wel.
   ========================================================================== */

@import url("/assets/fonts.css");

:root{
  /* Kleur, exact de acht uit het boek */
  --papier:#F6F4F0;
  --papier-kaart:#FFFDF8;
  --inkt:#16121C;
  --scherm:#120E1C;
  --scherm-diep:#0C0916;
  --krijt:#F0EEF6;
  --volt:#6C3BF4;
  --gloed:#B9A0FF;       /* alleen op de scherm-hero */
  --brug:#F5B800;        /* alleen de 4 en de markeerstift */
  --rood:#D63C3C;        /* alleen stempels */

  /* Vier stemmen, strikte rollen */
  --kop:'Lexend', system-ui, sans-serif;
  --tekst:'Sora', system-ui, sans-serif;
  --hud:'JetBrains Mono', ui-monospace, monospace;
  --hand:'Kalam', cursive;

  /* Compatibiliteitslaag: dezelfde tokennamen als de oude teal-schil, zodat
     bestaande paginastijlen blijven werken maar nu merkkleuren krijgen. */
  --ink:#16121C;
  --wit:#FFFDF8;
  --grijs:rgba(22,18,28,.62);
  --primary:#6C3BF4;
  --primary-d:#4A28B8;   /* dieper Volt, leesbaar als tekst op papier */
  --groen:#6C3BF4;       /* het boek kent geen groen: alles wat groen was is Volt */
  --zacht:rgba(108,59,244,.07);
  --zachtgr:rgba(108,59,244,.07);
  --creme:#F6F4F0;
  --lijn:rgba(22,18,28,.12);
  --rand:rgba(22,18,28,.1);
  --rand-scherm:rgba(240,238,246,.12);
  --font:'Sora', system-ui, sans-serif;
}

*{box-sizing:border-box}
body{margin:0; font-family:var(--tekst); color:var(--inkt); background:var(--papier);
  line-height:1.62; -webkit-font-smoothing:antialiased}
::selection{background:var(--brug); color:var(--inkt)}

/* Het blad zelf */
.blad{max-width:840px; margin:0 auto; background:var(--papier-kaart);
  box-shadow:0 18px 50px -28px rgba(22,18,28,.45)}

/* De werkbalk: alleen op het scherm, verdwijnt bij het printen */
.balk{position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:8px;
  padding:10px 16px; background:rgba(255,253,248,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--lijn)}
.balk .rechts{margin-left:auto; display:flex; gap:8px}

/* Het logo. Xy in handschrift, de pixel-4 als brug, ZA in Lexend.
   Kalam mag hier omdat het logo een van de twee toegestane plekken is. */
.logo{display:inline-flex; align-items:center; gap:6px; text-decoration:none; margin-right:auto}
.logo__xy{font:700 19px/1 var(--hand); transform:rotate(-2deg); color:var(--inkt)}
.logo__za{font:800 17px/1 var(--kop); letter-spacing:-.02em; color:var(--inkt)}
/* De pixel-4. Letterlijk dezelfde regel als in assets/xy4za.css en assets/module.css:
   het logo moet overal identiek zijn, dus deze vijftien cellen worden niet
   "ongeveer" nagebouwd. Cellen 1,3,4,6,7,8,9,12,15 lichten op, dat is de 4. */
.brug{display:inline-grid; grid-template-columns:repeat(3,4px); grid-auto-rows:4px; gap:1px; margin:0 1px}
.brug i{display:block}
.brug i:nth-child(1),.brug i:nth-child(3),.brug i:nth-child(4),.brug i:nth-child(6),
.brug i:nth-child(7),.brug i:nth-child(8),.brug i:nth-child(9),.brug i:nth-child(12),
.brug i:nth-child(15){background:var(--brug); box-shadow:0 0 0 1px rgba(22,18,28,.15)}

.printknop{font-family:var(--tekst); font-weight:700; font-size:14px; color:#F6F4F0;
  background:var(--volt); border:none; border-radius:999px; padding:9px 18px; cursor:pointer}
.printknop:hover{background:#5A2FD8}
.terug{font-family:var(--tekst); font-weight:700; font-size:14px; color:var(--primary-d);
  background:transparent; border:1.5px solid var(--rand); border-radius:999px;
  padding:8px 16px; text-decoration:none; display:inline-flex; align-items:center}
.terug:hover{border-color:var(--volt)}

/* ---------------------------------------------------------------------------
   De hero. Op het scherm is dit de scherm-wereld: hij kondigt een speelbare
   module aan, en het boek zegt dat speelbaar op scherm hoort. De naad naar
   het papier eronder is hard, nooit een gradient. Bij het printen draait hij
   om naar papier (zie @media print).
   --------------------------------------------------------------------------- */
.hero{position:relative; background:var(--scherm); color:var(--krijt);
  padding:36px 40px; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(240,238,246,.05) 0 1px, transparent 1px 3px)}
.hero > *{position:relative}
/* De kicker is HUD: kapitaal en gespatieerd, zoals kerndoelen en data. */
.hero .kop{font:500 11.5px var(--hud); letter-spacing:.16em; text-transform:uppercase;
  color:var(--gloed)}
/* Lexend 800: het boek wil een vraag of een belofte in de kop. */
.hero h1{margin:8px 0 6px; font:800 clamp(26px,5vw,34px)/1.15 var(--kop); letter-spacing:-.02em;
  color:var(--krijt)}
.hero p{margin:0; font-size:17px; color:rgba(240,238,246,.82); max-width:60ch}
.meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.meta .chip{font:500 11.5px var(--hud); letter-spacing:.08em; text-transform:uppercase;
  color:var(--krijt); background:rgba(240,238,246,.07); border:1px solid var(--rand-scherm);
  border-radius:999px; padding:6px 12px}

/* Lopende tekst */
main{padding:32px 40px 44px}
h2{margin:34px 0 10px; font:800 21px/1.25 var(--kop); letter-spacing:-.01em;
  padding-bottom:8px; border-bottom:1.5px solid var(--rand)}
h2:first-child{margin-top:0}
h3{font:800 16px/1.3 var(--kop); margin:0 0 8px}
p{margin:.5em 0}
b,strong{font-weight:700}
ul{margin:.4em 0; padding-left:22px} li{margin:5px 0}
a{color:var(--primary-d)} a:hover{color:var(--inkt)}

/* De markeerstift: de tweede en laatste plek waar brug-geel mag bestaan. */
.marker{background:linear-gradient(180deg, transparent 54%, rgba(245,184,0,.45) 54%);
  padding:0 2px}

/* Marge-notitie in handschrift. Maximaal een per blad. */
.hand{font:700 15px/1.4 var(--hand); color:var(--rood); transform:rotate(-1.5deg);
  display:inline-block}

/* Leerdoelen. De checkmark is een functioneel teken, dus toegestaan.
   Was groen, is nu Volt: het boek kent geen groen. */
.doelen{list-style:none; padding:0}
.doelen li{position:relative; padding-left:30px; margin:8px 0}
.doelen li::before{content:"✓"; position:absolute; left:0; top:2px; width:20px; height:20px;
  border-radius:50%; background:rgba(108,59,244,.1); color:var(--volt);
  font:800 12px/1 var(--tekst); display:grid; place-items:center}

/* Kerndoel-blok. Het nummer is data, dus HUD. */
.kerndoel{background:var(--zacht); border-left:3px solid var(--volt);
  border-radius:0 10px 10px 0; padding:16px 20px}
.kerndoel q{font-style:italic; font-weight:600}
/* De bronvermelding is mono (het is data), maar NIET kapitaal en niet gespatieerd:
   er staat een URL in, en die wordt daar onleesbaar van. Lange bron-URL's moeten
   kunnen breken, anders duwen ze het blad op mobiel uit beeld. */
.kerndoel .cite{font:500 12px/1.5 var(--hud); color:var(--primary-d); margin-top:10px;
  overflow-wrap:anywhere}
.kerndoel .cite a{overflow-wrap:anywhere}

/* ---------------------------------------------------------------------------
   Het les-evidenceblad: kerndoel -> leerprestatie -> succescriteria -> bewijs.
   Dit is het bewijs-anker van de module en het scherpste dat dit blad doet:
   een thema afvinken is geen dekking, de prestatie wel.
   --------------------------------------------------------------------------- */
.evidence{border:1.5px solid var(--rand); border-radius:12px; overflow:hidden; margin:12px 0}
.evidence .rij{display:grid; grid-template-columns:190px 1fr; border-top:1px solid var(--rand)}
.evidence .rij:first-child{border-top:none}
.evidence .lab{background:var(--zacht); padding:12px 16px; font:500 11.5px var(--hud);
  letter-spacing:.08em; text-transform:uppercase; color:var(--primary-d)}
.evidence .val{padding:12px 16px}
.evidence .val ul{margin:.2em 0}
@media(max-width:620px){ .evidence .rij{grid-template-columns:1fr} .evidence .lab{padding-bottom:2px} }

/* Tijdtabel. De tijden zijn data, dus HUD. */
table.tijd{width:100%; border-collapse:collapse; margin-top:6px; font-size:15px}
table.tijd th,table.tijd td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--rand);
  vertical-align:top}
table.tijd th{background:var(--zacht); font:500 11px var(--hud); letter-spacing:.1em;
  text-transform:uppercase; color:var(--primary-d)}
table.tijd td.t{white-space:nowrap; width:104px; font:500 13px var(--hud); color:var(--primary-d)}

/* ---------------------------------------------------------------------------
   Vakken. Vroeger verschilden ze door een kleurtje: groen voor gespreksvragen,
   amber voor thuis, blauw voor achtergrond. Amber botste met brug-geel en
   groen bestaat niet in dit boek. Ze verschillen nu door hun RAND en een
   HUD-label, niet door een vlak. Wie kleur gebruikt zonder betekenis, liegt.
   --------------------------------------------------------------------------- */
.box{border:1px solid var(--rand); border-radius:12px; padding:16px 20px; margin:12px 0;
  background:var(--papier-kaart)}
.box h3{margin:0 0 8px}
.box.vraag{border-left:3px solid var(--volt); background:var(--zacht)}
.box.thuis{border-left:3px solid var(--inkt); border-style:dashed; border-left-style:solid}
.box.laag{border-left:3px solid var(--rand); background:rgba(22,18,28,.025)}

.twee{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.begrip{margin:8px 0}
.begrip b{color:var(--primary-d)}

/* Stempel: de illustratiestijl van het boek. Rode pen alleen als omlijning. */
.stempel{display:inline-block; font:800 12px/1 var(--kop); letter-spacing:.06em;
  text-transform:uppercase; color:var(--rood); border:2px solid var(--rood);
  border-radius:6px; padding:6px 10px; transform:rotate(-2deg)}
.stempel--inkt{color:var(--inkt); border-color:var(--inkt)}

footer{padding:20px 40px 34px; color:var(--grijs); font-size:13px; border-top:1px solid var(--rand)}
footer a{color:var(--primary-d)}

@media(max-width:620px){
  .twee{grid-template-columns:1fr}
  .hero,main,footer{padding-left:22px; padding-right:22px}
}

/* ---------------------------------------------------------------------------
   Print. Hier draait het principe om: op papier vertelt papier. De hero
   verliest zijn scherm-wereld en wordt een papieren kop met een inkt-lijn.
   Dat is geen concessie aan de printer, het is het boek dat zichzelf volgt.
   --------------------------------------------------------------------------- */
@media print{
  body{background:#fff}
  .balk{display:none}
  .blad{box-shadow:none; max-width:none}
  .hero{background:#fff; color:var(--inkt); border-bottom:2px solid var(--inkt); padding-bottom:24px}
  .hero::before{display:none}
  .hero .kop{color:var(--primary-d)}
  .hero h1{color:var(--inkt)}
  .hero p{color:rgba(22,18,28,.75)}
  .meta .chip{color:var(--inkt); background:transparent; border-color:var(--rand)}
  h2{break-after:avoid}
  .box,.kerndoel,table.tijd,.evidence{break-inside:avoid}
}