/* Appel — blok "Deze week" + "Vandaag oefenen we" (v2/dezeweek.js), 19-9-2026.
   Standaard: de donkere Appel 2-huisstijl (leest de variabelen van appel2.css, werkt ook in body.licht).
   Wrapper .dw-speels: de speelse crème-stijl van vandaag.html (Fredoka/Nunito, dikke rand, schaduw). */
.dw{background:var(--surface,#1a2233);border:1px solid var(--line,#2a3550);border-radius:20px;padding:14px 14px 10px;margin:0 0 14px;color:var(--ink,#eaf0f8)}
.dw.dw-week{border-left:4px solid var(--warn,#ffcf5b)}
.dw.dw-vandaag{border-left:4px solid var(--accent,#5bb8ff)}
.dw-kop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.dw-label{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--warn,#ffcf5b)}
.dw-vandaag .dw-label{color:var(--accent,#5bb8ff)}
.dw-tel{color:var(--sub,#8ea0bd);font-size:14px}
.dw-toets{padding:10px 0 8px;border-top:1px solid var(--line,#2a3550)}
.dw-toets:first-of-type{border-top:0;padding-top:2px}
.dw-th{display:flex;gap:10px;align-items:flex-start}
.dw-emo{font-size:26px;line-height:1.2;flex:none;width:32px;text-align:center}
.dw-tt{flex:1;min-width:0}
.dw-tt b{display:block;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:18px;line-height:1.25}
.dw-tt small{display:block;color:var(--sub,#8ea0bd);font-size:14px;margin-top:2px}
.dw-tt small em{font-style:normal;font-weight:700;color:var(--warn,#ffcf5b)}
.dw-snel .dw-tt small em{color:#ff8a8a}
.dw-titel{font-size:15px;color:var(--ink,#eaf0f8);margin-top:3px;overflow-wrap:anywhere}
.dw-lijst{list-style:none;margin:8px 0 0;padding:0}
.dw-rij{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px dashed var(--line,#2a3550)}
.dw-rij:first-child{border-top:0}
.dw-wat{flex:1;min-width:0}
.dw-wat b{display:block;font-weight:700;font-size:15.5px;line-height:1.35;overflow-wrap:anywhere}
.dw-wat small{display:block;color:var(--sub,#8ea0bd);font-size:13px;margin-top:2px;overflow-wrap:anywhere}
.dw-wat small a{color:var(--accent,#5bb8ff)}
.dw-knop{flex:none;display:inline-block;background:var(--warn,#ffcf5b);color:#2a1e00;text-decoration:none;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:15px;padding:10px 14px;border-radius:999px;white-space:nowrap}
.dw-knop.dw-licht{background:var(--surface2,#212c42);color:var(--ink,#eaf0f8)}
.dw-vandaag .dw-knop{background:var(--accent,#5bb8ff);color:var(--accent-ink,#04223b)}
.dw-vandaag .dw-knop.dw-licht{background:var(--surface2,#212c42);color:var(--ink,#eaf0f8)}
.dw-nee{flex:none;color:var(--sub,#8ea0bd);font-size:13px;white-space:nowrap}
.dw-geen .dw-wat b{color:var(--sub,#8ea0bd);font-weight:600}
.dw-los,.dw-leeg{color:var(--sub,#8ea0bd);font-size:15px;margin:6px 0 4px}
.dw-leeg b{color:var(--ink,#eaf0f8)}
.dw-voet{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--sub,#8ea0bd);margin-top:6px}
.dw-voet a{color:var(--accent,#5bb8ff);text-decoration:none;margin-left:auto}
.dw-blok{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;margin:0 0 6px;border:1px solid transparent}
.dw-blok.dw-nu{background:var(--accent-soft,#1e3a5a);border-color:var(--accent,#5bb8ff)}
.dw-blok.dw-af{opacity:.55}
.dw-bt{flex:1;min-width:0}
.dw-bt b{display:block;font-weight:800;font-size:15.5px;line-height:1.3}
.dw-bt small{display:block;font-size:14px;margin-top:2px;overflow-wrap:anywhere}
.dw-bt .dw-mini{color:var(--sub,#8ea0bd);font-size:13px}
@media (max-width:420px){
  /* smal scherm: tekst over de volle breedte, knop eronder rechts (niets afgekapt, geen halve woorden) */
  .dw-rij,.dw-blok{flex-wrap:wrap}
  .dw-wat{flex:1 1 100%}
  .dw-bt{flex:1 1 calc(100% - 50px)}   /* emoji + tekst op één regel, knop eronder */
  .dw-rij .dw-knop,.dw-blok .dw-knop,.dw-nee{margin-left:auto}
  .dw-wat b,.dw-bt small{overflow-wrap:normal}
}

/* ---- speelse stijl (vandaag.html) ---- */
.dw-speels .dw{background:#fff;border:2.5px solid #1d1b18;border-radius:20px;box-shadow:5px 5px 0 #1d1b18;color:#1d1b18;padding:16px 16px 12px;margin:0 0 18px}
.dw-speels .dw.dw-week{background:#ffc233}
.dw-speels .dw.dw-vandaag{background:#d8f6e5}
.dw-speels .dw-label{font-family:Nunito,sans-serif;background:#1d1b18;color:#fff6ea;border-radius:999px;padding:4px 12px;font-size:.72rem;letter-spacing:.08em}
.dw-speels .dw-tel,.dw-speels .dw-tt small,.dw-speels .dw-wat small,.dw-speels .dw-nee,.dw-speels .dw-los,.dw-speels .dw-leeg,.dw-speels .dw-voet,.dw-speels .dw-bt .dw-mini{color:#4a4339}
.dw-speels .dw-tt b,.dw-speels .dw-bt b{font-family:Fredoka,Nunito,sans-serif;font-weight:700}
.dw-speels .dw-tt small em{color:#b3261e}
.dw-speels .dw-titel,.dw-speels .dw-leeg b{color:#1d1b18}
.dw-speels .dw-toets,.dw-speels .dw-rij{border-color:rgba(29,27,24,.25)}
.dw-speels .dw-wat b{color:#1d1b18}
.dw-speels .dw-geen .dw-wat b{color:#4a4339}
.dw-speels .dw-knop{background:#12a55f;color:#fff;border:2.5px solid #1d1b18;box-shadow:3px 3px 0 #1d1b18;font-family:Fredoka,Nunito,sans-serif;font-weight:700}
.dw-speels .dw-knop:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #1d1b18}
.dw-speels .dw-knop.dw-licht{background:#fff;color:#1d1b18}
.dw-speels .dw-vandaag .dw-knop{background:#3d7dff;color:#fff}
.dw-speels .dw-vandaag .dw-knop.dw-licht{background:#fff;color:#1d1b18}
.dw-speels .dw-wat small a,.dw-speels .dw-voet a{color:#1d4fd8}
.dw-speels .dw-blok.dw-nu{background:#fff;border:2.5px solid #1d1b18}

/* 2-10-2026: scope-onderdelen zonder oefenpagina staan ingeklapt (rol study buddy).
   Ze zijn echte toetsstof uit de planner, dus ze blijven zichtbaar — alleen niet meer
   tussen de knoppen. Terugdraaien = dit blok + de dw-zelf-tak in dezeweek.js weghalen. */
.dw-zelf{margin-top:6px}
/* appel2.css heeft een globale regel `details summary{display:flex;justify-content:space-between}`.
   Zonder deze overschrijving werd het pijltje (::before) een eigen flex-item en stond de tekst
   rechts tegen de rand. Daarom hier expliciet block + eigen lettertype. */
.dw-zelf>summary{display:block;text-align:left;color:var(--sub,#8ea0bd);
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif;font-weight:400;font-size:13.5px;
  cursor:pointer;padding:6px 0;list-style:none}
.dw-zelf>summary::-webkit-details-marker{display:none}
.dw-zelf>summary::before{content:'▾ ';}
.dw-zelf[open]>summary::before{content:'▴ ';}
.dw-speels .dw-zelf>summary{color:#4a4339}