/* KidsDigitaal leswerkblad - de pagina om het blad heen.
   Het blad zelf (alles binnen #kdlDoc) wordt getekend door de tekenmodule van
   de Werkbladgenerator en krijgt daar ook zijn stijl vandaan. Hier staat alleen
   de balk met knoppen, het voorbeeld met watermerk en wat een les extra heeft
   ten opzichte van de generator: een plaatje bij een vraag. */

html,body{margin:0;padding:0;}
body.kdl{background:#EEF3F8;color:#1e2933;font-family:'Nunito','Segoe UI',Tahoma,sans-serif;-webkit-text-size-adjust:100%;}

/* ---------- balk ---------- */
.kdl-balk{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #DCE4EC;display:flex;align-items:center;gap:14px;padding:10px 18px;}
.kdl-terug{display:inline-flex;align-items:center;gap:6px;font-family:'Baloo 2','Trebuchet MS',Verdana,sans-serif;font-weight:600;font-size:15px;color:#5b7084;text-decoration:none;padding:8px 10px;border-radius:10px;flex-shrink:0;}
.kdl-terug:hover{background:#F2F6FA;color:#1e2933;}
.kdl-terug svg{width:18px;height:18px;}
.kdl-naam{flex:1;min-width:0;}
.kdl-naam small{display:block;font-size:12px;font-weight:600;color:#5b7084;letter-spacing:.04em;text-transform:uppercase;}
.kdl-naam h1,.kdl-naam b{display:block;margin:0;font-family:'Baloo 2','Trebuchet MS',Verdana,sans-serif;font-weight:700;font-size:18px;line-height:1.2;color:#1e2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kdl-acties{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.kdl-vink{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:#1e2933;cursor:pointer;user-select:none;}
.kdl-vink input{width:18px;height:18px;accent-color:#00a8ff;margin:0;}
.kdl-knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Baloo 2','Trebuchet MS',Verdana,sans-serif;font-weight:800;font-size:15px;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;color:#fff;background:#00a8ff;border:0;border-radius:12px;height:46px;padding:0 20px;box-shadow:0 4px 0 #0087d6;cursor:pointer;transition:transform .08s ease,box-shadow .08s ease;}
.kdl-knop:hover{transform:translateY(-1px);box-shadow:0 5px 0 #0087d6;}
.kdl-knop:active{transform:translateY(3px);box-shadow:0 1px 0 #0087d6;}
.kdl-knop svg{width:20px;height:20px;}
.kdl-knop.is-tweede{background:#fff;color:#1e2933;box-shadow:inset 0 0 0 2px #C9D5E0,0 4px 0 #C9D5E0;}
.kdl-knop.is-tweede:hover{box-shadow:inset 0 0 0 2px #C9D5E0,0 5px 0 #C9D5E0;}
.kdl-knop.is-tweede:active{box-shadow:inset 0 0 0 2px #C9D5E0,0 1px 0 #C9D5E0;}
.kdl-knop[disabled]{opacity:.55;cursor:default;transform:none;}

/* Alleen voor de beheerder: wisselen tussen de twee weergaven. */
.kdl-beheer{background:#32365f;color:#fff;font-size:13.5px;font-weight:500;padding:7px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.kdl-beheer a{color:#fff;font-weight:700;}
.kdl-beheer span{opacity:.8;}

/* ---------- keuze pakket of Super (voorbeeld, na Afdrukken) ---------- */
.kdl-keuze-laag{position:fixed;inset:0;z-index:300;background:rgba(30,41,51,.45);display:flex;align-items:center;justify-content:center;padding:16px;}
.kdl-keuze{position:relative;width:100%;max-width:560px;max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:18px;padding:26px 22px 22px;box-shadow:0 18px 44px rgba(20,40,70,.28);box-sizing:border-box;}
.kdl-keuze h3{font-family:'Baloo 2','Trebuchet MS',Verdana,sans-serif;font-weight:700;font-size:22px;margin:0 34px 4px 0;color:#1e2933;}
.kdl-keuze-uitleg{margin:0 0 16px;color:#5b7084;font-size:15px;}
.kdl-keuze-rij{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.kdl-keuze-rij.is-een{grid-template-columns:1fr;}
.kdl-keuze.is-breed{max-width:780px;}
.kdl-keuze-rij.is-drie{grid-template-columns:repeat(3,1fr);}
@media (max-width:760px){ .kdl-keuze-rij.is-drie{grid-template-columns:1fr 1fr;} }
.kdl-keuze-kaart{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;font:inherit;color:#1e2933;background:#F1F3F7;border:2px solid transparent;border-radius:16px;padding:14px 14px 15px;cursor:pointer;}
.kdl-keuze-kaart.is-gekozen{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#00c300,#00a0ff) border-box;border:3px solid transparent;padding:13px 13px 14px;}
.kdl-keuze-kaart.is-gekozen::after{content:"\2713";position:absolute;top:10px;right:12px;width:22px;height:22px;border-radius:50%;background:#00a8ff;color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.kdl-keuze-label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5b7084;padding-right:26px;}
.kdl-keuze-naam{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;}
.kdl-keuze-naam b{font-family:'Baloo 2','Trebuchet MS',Verdana,sans-serif;font-weight:700;font-size:17px;line-height:1.2;}
.kdl-keuze-prijs{font-weight:700;font-size:15px;color:#1e2933;}
.kdl-keuze-sub{font-size:14px;font-weight:500;color:#5b7084;line-height:1.35;}
.kdl-keuze-knop{width:100%;margin-top:16px;box-sizing:border-box;}
@media (max-width:520px){ .kdl-keuze-rij{grid-template-columns:1fr;} }
/* Pc: meer lucht in de keuze (12 nov). */
@media (min-width:600px){
  .kdl-keuze{max-width:600px;padding:34px 34px 32px;border-radius:22px;}
  .kdl-keuze .kdl-meld-dicht{top:18px;right:18px;}
  .kdl-keuze h3{font-size:24px;margin:0 44px 6px 0;}
  .kdl-keuze-uitleg{font-size:16px;margin:0 0 24px;}
  .kdl-keuze-rij{gap:16px;}
  .kdl-keuze-kaart{gap:6px;padding:18px 18px 20px;}
  .kdl-keuze-kaart.is-gekozen{padding:17px 17px 19px;}
  .kdl-keuze-kaart.is-gekozen::after{top:14px;right:14px;}
  .kdl-keuze-knop{margin-top:26px;}
  .kdl-keuze.is-breed{max-width:820px;}
}
/* ---------- over dit werkblad (tekst voor lezers en zoekmachines) ---------- */
.kdl-over{width:210mm;max-width:100%;box-sizing:border-box;margin:0 auto 60px;padding:6px 30px 10px;color:#42525f;font-size:16px;line-height:1.6;}
.kdl-over h2{font-family:'Baloo 2','Trebuchet MS',Verdana,sans-serif;font-weight:700;font-size:22px;color:#1e2933;margin:0 0 6px;}
.kdl-over h3{font-family:'Baloo 2','Trebuchet MS',Verdana,sans-serif;font-weight:700;font-size:18px;color:#1e2933;margin:18px 0 4px;}
.kdl-over p{margin:0 0 10px;max-width:68ch;}
.kdl-over ul,.kdl-over ol{margin:0;padding-left:20px;}
.kdl-over .kdl-buren{columns:2;column-gap:28px;}
.kdl-over .kdl-buren li{break-inside:avoid;}
.kdl-over a{color:#0077CC;}
.kdl-over-links{display:flex;flex-wrap:wrap;gap:6px 20px;}
@media (max-width:720px){ .kdl-over{padding:4px 16px 10px;} .kdl-over .kdl-buren{columns:1;} }

/* ---------- melden ---------- */
.kdl-meldknop{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:500;color:#5b7084;padding:8px 10px;border-radius:10px;}
.kdl-meldknop:hover{background:#F2F6FA;color:#1e2933;}
.kdl-meldknop svg{width:16px;height:16px;}
.kdl-meld-laag{position:fixed;inset:0;z-index:300;background:rgba(30,41,51,.45);display:flex;align-items:center;justify-content:center;padding:16px;}
.kdl-meld{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:18px;padding:24px 22px 20px;box-shadow:0 18px 44px rgba(20,40,70,.28);box-sizing:border-box;}
.kdl-meld h3{font-family:'Baloo 2','Trebuchet MS',Verdana,sans-serif;font-weight:700;font-size:20px;margin:0 30px 14px 0;color:#1e2933;}
.kdl-meld-dicht{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:10px;background:#F2F6FA;color:#5b7084;font-size:15px;cursor:pointer;}
.kdl-meld-lab{display:block;font-size:14px;font-weight:600;margin:0 0 6px;color:#1e2933;}
.kdl-meld-keuze{width:100%;height:44px;border:2px solid #DCE4EC;border-radius:12px;padding:0 10px;font:inherit;font-size:15px;color:#1e2933;background:#fff;margin-bottom:14px;box-sizing:border-box;}
.kdl-meld-redenen{display:flex;flex-direction:column;gap:8px;}
.kdl-meld-reden{display:flex;align-items:center;gap:10px;border:2px solid #E6ECF2;border-radius:12px;padding:10px 12px;font-size:15px;font-weight:500;color:#1e2933;cursor:pointer;}
.kdl-meld-reden:hover{border-color:#BFE0FF;background:#F7FBFF;}
.kdl-meld-reden input{width:18px;height:18px;accent-color:#00a8ff;margin:0;flex-shrink:0;}
.kdl-meld-stuur{width:100%;margin-top:16px;}
.kdl-meld-uitkomst{margin:10px 0 0;font-size:14px;color:#5b7084;}
.kdl-meld-uitkomst:empty{display:none;}
@media (max-width:720px){ .kdl-meldknop span{display:none;} }

/* ---------- podium met de bladzijden ---------- */
.kdl-podium{padding:26px 12px 60px;display:flex;flex-direction:column;align-items:center;}
#kdlDoc{width:210mm;}
#kdlDoc .page{margin:0 auto 22px;box-shadow:0 8px 28px rgba(30,41,51,.12);}
.kdl-wacht{font-family:'Baloo 2','Trebuchet MS',Verdana,sans-serif;font-weight:600;font-size:17px;color:#5b7084;padding:60px 20px;text-align:center;}
.kdl-fout{max-width:520px;margin:50px auto;background:#fff;border-radius:16px;padding:26px 28px;box-shadow:0 8px 28px rgba(30,41,51,.10);text-align:center;}
.kdl-fout h1{font-family:'Baloo 2','Trebuchet MS',Verdana,sans-serif;font-weight:700;font-size:22px;margin:0 0 8px;}
.kdl-fout p{margin:0 0 18px;color:#5b7084;font-size:15.5px;line-height:1.5;}

/* ---------- wat een les extra heeft: plaatje en kaartje bij een vraag ---------- */
#kdlDoc .q-body.kdl-met-afb{display:flex;align-items:center;gap:18px;}
#kdlDoc .q-body.kdl-met-afb>.kdl-rest{flex:1;min-width:0;}
#kdlDoc .kdl-afb{flex:0 0 auto;width:132px;height:112px;display:flex;align-items:center;justify-content:center;}
#kdlDoc .kdl-afb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;display:block;}
/* Een brede plaat (tabel, kaart, grafiek) krijgt de volle breedte boven de opdracht. */
#kdlDoc .q-body.kdl-afb-breed{display:block;}
#kdlDoc .q-body.kdl-afb-breed>.kdl-afb{width:100%;height:190px;justify-content:flex-start;margin-bottom:10px;}
#kdlDoc .q-body.kdl-met-afb .mc-grid{grid-template-columns:1fr;gap:7px;}
#kdlDoc .q-body.kdl-afb-breed .mc-grid{grid-template-columns:1fr 1fr;gap:9px;}
#kdlDoc .q-body.kdl-mc2 .mc-grid{grid-template-columns:1fr 1fr;gap:9px;}
#kdlDoc .lees .kdl-afb{float:right;width:150px;height:118px;margin:0 0 8px 16px;}
/* Een blok met een plaatje heeft de volle breedte nodig, ook op een blad in twee kolommen. */
#kdlDoc .content.kolmulti>.vraag:has(.kdl-afb){grid-column:1/-1;}
/* Twee even brede kolommen, ook als een blok breder wil zijn dan zijn kolom;
   werkblad.js geeft zo'n blok daarna de volle breedte (kdl-vol). */
#kdlDoc .werkblad-pagina .content.kolmulti{grid-template-columns:repeat(var(--kol,2),minmax(0,1fr));}
#kdlDoc .content.kolmulti>.vraag.kdl-vol{grid-column:1/-1;}
#kdlDoc .kdl-kaart{margin:0 0 10px;}
#kdlDoc img.kdl-keuze-afb{display:block;width:auto;height:64px;max-width:120px;object-fit:contain;}
#kdlDoc img.kdl-keuze-afb.is-klein{display:inline-block;height:34px;max-width:60px;vertical-align:middle;margin:2px 2px;}
#kdlDoc .kdl-kaart .flitskaart{font-size:20px;}

/* ---------- schrijfruimte ----------
   Een kind moet op elke lijn en in elk vak echt kunnen schrijven. In de
   generator stond de eerste schrijflijn 16 px onder de letterblokjes en was een
   invulvak 26 px hoog (Robert, 12 nov 2026: "de schrijflijn zit te dicht op de
   blokjes"). Hier krijgt elke lijn een eigen schrijfstrook van 40 px (ruim
   10 mm) en elk vak minstens 36 px. Gemeten met test/schrijfruimte.mjs. */
#kdlDoc .zin-lijnen,#kdlDoc .lijnen{margin-top:0;}
#kdlDoc .zin-lijnen .lijn,#kdlDoc .lijnen .lijn,#kdlDoc .vt-lijnen .lijn{height:40px;margin:0;}
#kdlDoc .antwlijn{align-items:flex-end;}
#kdlDoc .antwlijn .lijn.lang{height:40px;}
#kdlDoc .klok-lijn,#kdlDoc .geld-lijn,#kdlDoc .invul-lijn{min-height:36px;}
/* min-height wint van de vaste hoogte die de generator in de code meegeeft. */
#kdlDoc .invul{min-height:36px;}
#kdlDoc .vulin{line-height:2.9;}
#kdlDoc .reken-kol{row-gap:10px;}

/* ---------- voorbeeld: watermerk eroverheen, en niet het hele blad ---------- */
body.kdl-voorbeeld #kdlDoc .page{user-select:none;-webkit-user-select:none;}
body.kdl-voorbeeld #kdlDoc .page::after{content:"";position:absolute;inset:0;z-index:60;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='330' height='230' viewBox='0 0 330 230'%3E%3Ctext x='165' y='128' text-anchor='middle' transform='rotate(-28 165 115)' font-family='Trebuchet MS,Verdana,Arial,sans-serif' font-weight='800' font-size='40' letter-spacing='3' fill='%231e2933' fill-opacity='.15'%3EVOORBEELD%3C/text%3E%3C/svg%3E");
  background-size:330px 230px;background-position:center 40px;}
/* De bladzijden na de eerste zijn wazig. De tekst daar is al onzin (de server
   heeft hem onleesbaar gemaakt); de waas is er zodat het er rustig uitziet. */
body.kdl-voorbeeld #kdlDoc .page.kdl-wazig .content{filter:blur(4.5px);}
#kdlDoc .kdl-afb .kdl-vlak{display:block;width:100px;height:90px;border-radius:12px;background:#E4EAF0;}

.kdl-aanbod{width:210mm;max-width:100%;box-sizing:border-box;background:#fff;border-radius:18px;padding:26px 30px 28px;box-shadow:0 8px 28px rgba(30,41,51,.12);margin:0 auto;}
.kdl-aanbod h2{font-family:'Baloo 2','Trebuchet MS',Verdana,sans-serif;font-weight:700;font-size:24px;line-height:1.2;margin:0 0 8px;color:#1e2933;}
.kdl-aanbod p{margin:0 0 18px;font-size:16px;line-height:1.55;color:#42525f;max-width:60ch;}
.kdl-aanbod .kdl-rij{display:flex;flex-wrap:wrap;gap:12px;}
.kdl-printstop{display:none;}

/* ---------- smal scherm ---------- */
@media (max-width:720px){
  .kdl-balk{flex-wrap:wrap;gap:8px 10px;padding:8px 12px;}
  .kdl-terug span{display:none;}
  .kdl-naam b{font-size:16px;}
  .kdl-acties{width:100%;justify-content:space-between;}
  .kdl-knop{height:44px;padding:0 16px;font-size:14px;}
  .kdl-podium{padding:14px 0 44px;}
  .kdl-aanbod{border-radius:0;padding:22px 18px 24px;}
  .kdl-aanbod .kdl-knop{flex:1 1 100%;}
}

/* ---------- downloaden: de laag met voortgang terwijl de pdf gemaakt wordt ---------- */
.kdl-pdf-laag{position:fixed;inset:0;z-index:300;background:rgba(30,41,51,.45);display:flex;align-items:center;justify-content:center;padding:16px;}
.kdl-pdf-melding{background:#fff;border-radius:16px;padding:22px 26px;max-width:340px;width:100%;text-align:center;box-shadow:0 12px 40px rgba(30,41,51,.25);font-family:'Nunito','Segoe UI',Tahoma,sans-serif;color:#1e2933;}
.kdl-pdf-melding strong{display:block;font-family:'Baloo 2','Trebuchet MS',Verdana,sans-serif;font-size:20px;font-weight:800;margin-bottom:6px;}
.kdl-pdf-melding span{font-size:15px;color:#5b6b7a;}
.kdl-knop.is-bezig{opacity:.75;cursor:progress;}

/* ---------- printen: alleen de bladzijden, randloos op A4 ---------- */
@media print{
  @page{size:A4;margin:0;}
  html,body.kdl{background:#fff !important;}
  .kdl-balk,.kdl-beheer,.kdl-aanbod,.kdl-wacht,.kdl-meld-laag,.kdl-keuze-laag,.kdl-pdf-laag,.kdl-over{display:none !important;}
  .kdl-podium{display:block !important;padding:0 !important;}
  #kdlDoc{zoom:1 !important;width:210mm !important;margin:0 !important;}
  #kdlDoc .page{margin:0 !important;box-shadow:none !important;border-radius:0 !important;}
  /* Een voorbeeld is om te bekijken, niet om te printen. */
  body.kdl-voorbeeld #kdlDoc{display:none !important;}
  body.kdl-voorbeeld .kdl-printstop{display:block !important;font-family:'Segoe UI',Tahoma,sans-serif;font-size:16pt;padding:30mm 20mm;color:#1e2933;}
}