/* ═══════════════════════════════════════════════
   Art of Education — aanvullingen blok 2 (versie 261109)
   Wordt naast styles-v2.css geladen door de pagina's van blok 2.
   Kleuren lopen via de variabelen, dus de huisstijlschakelaar werkt ook hier.
   ═══════════════════════════════════════════════ */

/* ── tabellen in een blok ── */
.tabel{border-collapse:collapse;width:100%;margin:10px 0;font-size:.92em}
.tabel th,.tabel td{border:1px solid var(--border);padding:7px 10px;text-align:left;vertical-align:top}
.tabel th{background:var(--primary-light);color:var(--dark);font-weight:700}
.tabel td.num,.tabel th.num{text-align:right;white-space:nowrap}
.tabel tr.uit td{background:var(--secondary-light)}
.tabel-wrap{overflow-x:auto}

/* ── formulekader ── */
.formule{display:block;background:var(--white);border:2px solid var(--primary);border-radius:12px;
  padding:12px 18px;margin:12px 0;font-size:1.05em;text-align:center;color:var(--dark)}
.formule small{display:block;font-size:.78em;color:var(--text-light);margin-top:4px}
.formules{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:12px 0}
.formules .formule{margin:0}

/* ── figuren ── */
.fig{margin:14px 0;text-align:center}
.fig svg{width:100%;max-width:640px;height:auto;display:inline-block}
.fig.klein svg{max-width:420px}
.fig.breed svg{max-width:860px}
.fig figcaption{font-size:.82em;color:var(--text-light);margin-top:4px}
.g-as{stroke:var(--dark);stroke-width:2;fill:none}
.g-raster{stroke:var(--border);stroke-width:1}
.g-l1{stroke:var(--primary);stroke-width:3.5;fill:none;stroke-linecap:round}
.g-l2{stroke:var(--secondary);stroke-width:3.5;fill:none;stroke-linecap:round}
.g-l3{stroke:var(--text-light);stroke-width:2;fill:none;stroke-dasharray:6 5}
.g-l4{stroke:var(--green);stroke-width:3.5;fill:none;stroke-linecap:round}
.g-l2d{stroke:var(--secondary);stroke-width:3;fill:none;stroke-dasharray:9 6}
.g-l1d{stroke:var(--primary);stroke-width:3;fill:none;stroke-dasharray:9 6}
.g-pijl{stroke:var(--dark);stroke-width:2.2;fill:none}
.g-pt{fill:var(--dark)}
.g-pt1{fill:var(--primary)}
.g-vlak1{fill:var(--primary-light);stroke:var(--primary);stroke-width:2}
.g-vlak2{fill:var(--secondary-light);stroke:var(--secondary);stroke-width:2}
.g-vlak0{fill:var(--bg);stroke:var(--border);stroke-width:2}
.g-t{fill:var(--dark);font-family:inherit;font-size:15px}
.g-t.k{font-size:13px;fill:var(--text-light)}
.g-t.b{font-weight:700}
.g-t.p{fill:var(--primary);font-weight:700}
.g-t.s{fill:var(--secondary-dark);font-weight:700}
.g-t.m{text-anchor:middle}
.g-t.e{text-anchor:end}
html[data-huisstijl="4e"] .g-l2,html[data-huisstijl="4e"] .g-l2d{stroke:#6B6766}
html[data-huisstijl="4e"] .g-t.s{fill:#3A3A3A}

/* ── schema met vakjes en pijlen (HTML, prettig op papier en in lesmodus) ── */
.keten{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;margin:14px 0}
.keten .schakel{flex:1 1 120px;background:var(--primary-light);border:2px solid var(--primary);
  border-radius:10px;padding:10px 12px;font-size:.9em;color:var(--dark);text-align:center;
  display:flex;flex-direction:column;justify-content:center}
.keten .schakel small{display:block;color:var(--text-light);font-size:.82em;margin-top:3px}
.keten .schakel.warm{background:var(--secondary-light);border-color:var(--secondary)}
.keten .pijl{flex:0 0 28px;display:flex;align-items:center;justify-content:center;
  font-size:1.3em;color:var(--primary);font-weight:700}
.keten.verticaal{flex-direction:column}
.keten.verticaal .pijl{flex:0 0 26px}
.keten.verticaal .schakel{flex:0 0 auto}

/* ── oorzaak-gevolgschema (klas 3) ── */
.og-schema{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.og-schema .og{border:2px solid var(--border);border-radius:10px;padding:10px 14px;background:var(--white);min-height:70px}
.og-schema .og b{display:block;font-size:.8em;text-transform:uppercase;letter-spacing:.06em;color:var(--primary);margin-bottom:4px}
.og-schema .og.kern{grid-column:1 / -1;border-color:var(--primary);background:var(--primary-light)}
.og-schema .og.oorzaak{grid-column:1 / -1;border-color:var(--secondary);background:var(--secondary-light)}
.og-schema .og.oorzaak b{color:var(--secondary-dark)}
.og-schema .og .lijn{border-bottom:1px dashed var(--border);height:22px}
.og-pijl{grid-column:1 / -1;text-align:center;color:var(--primary);font-weight:700;margin:-4px 0}

/* ── stappenkaart ── */
.stappenkaart{list-style:none;margin:10px 0;padding:0;counter-reset:s}
.stappenkaart li{position:relative;padding:10px 12px 10px 52px;margin-bottom:8px;border:1px solid var(--border);
  border-radius:10px;background:var(--white);counter-increment:s}
.stappenkaart li::before{content:counter(s);position:absolute;left:12px;top:9px;width:28px;height:28px;border-radius:50%;
  background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85em}
.stappenkaart li small{display:block;color:var(--text-light)}

/* ── inleverbox (naam zoals in Google Classroom) ── */
.inleverbox{display:flex;gap:14px;align-items:center;border:2px dashed var(--primary);border-radius:12px;
  padding:12px 16px;margin:12px 0;background:var(--white)}
.inleverbox .ib-ico{font-size:1.6em;flex:none}
.inleverbox .ib-naam{font-weight:700;color:var(--dark)}
.inleverbox .ib-wanneer{color:var(--primary);font-weight:700}
.inleverbox small{display:block;color:var(--text-light)}

/* ── groepskaarten (klas 4) ── */
.groepen{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:12px 0}
.groep{border:1px solid var(--border);border-top:5px solid var(--primary);border-radius:10px;padding:12px 14px;background:var(--white)}
.groep h4{font-size:1.05em;margin-bottom:4px}
.groep .g-nr{font-size:.75em;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.06em}
.groep p{font-size:.88em;margin-bottom:4px}
.groep a{font-weight:600}
.groep.aan{border-top-color:var(--secondary);background:var(--secondary-light)}

/* ── kaartjes voor spellen ── */
.kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:12px 0}
.kaart{border:2px solid var(--dark);border-radius:12px;padding:14px;background:var(--white);min-height:120px}
.kaart .k-kop{font-size:.72em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.kaart h4{font-size:1.05em;margin:4px 0 6px}
.kaart p{font-size:.86em}

/* ── checklist en StudeerBeer (zelfde als week 45 van blok 1) ── */
.check-lijst{list-style:none;padding:0;margin:0}
.check-lijst li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border)}
.check-lijst li:last-child{border-bottom:none}
.check-lijst input{width:20px;height:20px;margin-top:2px;accent-color:var(--primary);flex:none}
.sb-tips{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.sb-tip{text-align:left;border:1px solid var(--border);background:var(--white,#fff);border-radius:10px;padding:10px 14px;
  font-family:inherit;font-size:.95em;color:var(--text);cursor:pointer}
.sb-tip:hover{border-color:var(--primary);background:var(--primary-light)}
.sb-open{display:inline-block;border:0;border-radius:999px;background:var(--primary);color:#fff;padding:12px 20px;
  font-family:inherit;font-size:1em;cursor:pointer;margin-top:6px}
.sb-open:hover{filter:brightness(.92)}
.sb-disclaimer p{font-weight:700;color:var(--dark)}

/* ── rekenhulpjes ── */
.reken{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;margin:12px 0;padding:12px 16px;
  border:1px solid var(--border);border-radius:10px;background:var(--bg)}
.reken label{display:flex;flex-direction:column;font-size:.82em;color:var(--text-light);font-weight:600}
.reken input,.reken select{font-family:inherit;font-size:1rem;padding:7px 10px;border:1px solid var(--border);
  border-radius:8px;width:130px;background:var(--white);color:var(--dark)}
.reken .uitkomst{font-weight:700;color:var(--primary);font-size:1.05em;padding-bottom:6px}

/* ── ingebed model ── */
.model-frame{width:100%;height:640px;border:1px solid var(--border);border-radius:12px;background:var(--white)}
.lm-panel .model-frame{height:72vh}

/* ── minitoets (klas 4) ── */
.minitoets .mt-context{background:var(--primary-light);border:1px solid var(--primary);border-radius:10px;padding:12px 16px;margin-bottom:12px}
.minitoets ol{margin-left:24px}
.minitoets ol li{margin-bottom:6px}
.minitoets .mt-p{color:var(--text-light);font-size:.85em;white-space:nowrap}
.minitoets .mt-dicht{color:var(--text-light)}
.docent-kader{background:#FFF7D6;border:1px solid #F2DD8C;border-radius:10px;padding:14px 18px;margin:0 0 18px}
.docent-kader h3{font-size:1.1rem;margin-bottom:8px}
.docent-kader .tabel th{background:#FBEFB8}

/* ── kaders met label ── */
.label{display:inline-block;font-size:.7em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:6px;background:var(--primary);color:#fff;margin-bottom:6px}
.label.warm{background:var(--secondary)}
.actueel{border-left:4px solid var(--secondary);background:var(--secondary-light);border-radius:0 10px 10px 0;
  padding:10px 16px;margin:12px 0}

/* ── themakaarten op de weekpagina (klas 4) ── */
.thema-strips{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0}
.thema-strips .oefen-strip{margin-top:0}

/* ── print ── */
.print-verwijzing{font-style:italic;color:var(--text-light)}
@media print{
  .model-frame{display:none}
  .docent-kader{display:none!important}
}
@media (max-width:820px){
  .og-schema{grid-template-columns:1fr}
  .keten{flex-direction:column}
  .keten .pijl{transform:rotate(90deg)}
  .model-frame{height:760px}
}