/* Vaktaalverzamelaar. Bouwt verder op ../style.css (kleuren, donkere modus). */
.logo.groen { background: var(--groen); }
.stap h2 { flex-wrap: wrap; }
.knop { background: var(--blauw); border-color: var(--blauw); color: #fff; font-weight: bold; }
.knop.groot { padding: 10px 20px; }
.knop.zacht { background: var(--vlak); border-color: var(--rand); color: var(--tekst); font-weight: normal; }
.knop:disabled { opacity: .5; cursor: not-allowed; }
.link.gevaar { color: #b42318; }
.banner.groen { background: var(--groen-licht); border-color: var(--groen); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.veld.smal { flex: 0 0 auto; min-width: 120px; }
.veld.breed { flex: 2; }
.rij.kort { margin-top: 8px; gap: 8px; align-items: center; }
.rij.kort input { flex: 1; min-width: 0; }
.paneel { border: 1px solid var(--rand); border-left: 4px solid var(--groen); border-radius: 8px; padding: 10px 14px; margin: 12px 0; }
.paneel p { margin: 0 0 6px; }
.paneel textarea { width: 100%; }
.menu { display: flex; gap: 18px; flex-wrap: wrap; padding: 8px 0 4px; }

.lijsten { display: flex; flex-wrap: wrap; gap: 8px; }
.lijstchip { border-radius: 20px; padding: 6px 14px; display: inline-flex; gap: 6px; align-items: center; }
.lijstchip small { color: var(--zacht); }
.lijstchip.actief { background: var(--groen-licht); border-color: var(--groen); font-weight: bold; }
.lijstchip.nieuw { border-style: dashed; color: var(--zacht); }

.lijstkop { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lijstkop h2 { margin: 0; }
.lijstkop .acties { margin: 0; gap: 8px; }

.toevoegen { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: end; margin-top: 10px; }
.toevoegen .veld { margin-top: 6px; }
.toevoegen input { width: 100%; }

.woordkaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }
.wk { border: 1px solid var(--rand); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: var(--vlak); }
.wk.bezig { opacity: .7; }
.wk-beeld { height: 170px; background: #fff; display: grid; place-items: center; position: relative; border-bottom: 1px solid var(--rand); }
.wk-beeld img { max-width: 100%; max-height: 170px; object-fit: contain; }
.wk-beeld .tip { color: #5b6573; font-size: 13px; padding: 12px 16px; text-align: center; }
.wk-beeld .tip b { display: block; font-size: 22px; margin-bottom: 4px; }
.wk-bron { font-size: 10px; color: var(--zacht); padding: 2px 10px 0; overflow-wrap: anywhere; }
.wk-bron a { color: inherit; }
.wk-tekst { padding: 10px 14px 6px; flex: 1; }
.wk-woord { font-size: 20px; font-weight: bold; margin: 0; overflow-wrap: anywhere; }
.wk-woord small { font-weight: normal; color: var(--zacht); font-size: 14px; margin-right: 4px; }
.wk-soort { color: var(--zacht); font-size: 12px; margin: 0 0 6px; }
.wk-uitleg { margin: 0 0 6px; }
.wk-uitleg[contenteditable=true] { outline: 2px solid var(--blauw); border-radius: 4px; padding: 2px 4px; }
.wk-zin { margin: 0 0 6px; color: var(--zacht); font-style: italic; font-size: 14px; }
.wk-eigen { width: 100%; font-size: 14px; margin-top: 4px; resize: vertical; min-height: 2.4em; }
.wk-let { font-size: 13px; margin: 0 0 6px; color: var(--zacht); }
.wk-melding { font-size: 13px; background: var(--geel-licht); border-radius: 6px; padding: 4px 8px; margin: 0 0 6px; }
.wk-knoppen { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 14px 12px; font-size: 13px; }
.wk-knoppen button.link { font-size: 13px; }
.wk-sterren { color: var(--geel); font-size: 13px; letter-spacing: 1px; }
.wk-bijsturen { padding: 0 14px 12px; display: flex; gap: 6px; }
.wk-bijsturen input { flex: 1; min-width: 0; font-size: 14px; }
.taalkeuze select { font-size: 13px; padding: 4px 6px; max-width: 170px; }
.wk-taal { margin: 6px 0; padding: 6px 8px; border-radius: 6px; background: var(--groen-licht); font-size: 14px; }
.wk-taal p { margin: 2px 0; }
.wk-taal .taalnaam { font-size: 12px; color: var(--zacht); }
.wk-taal .onzeker { color: var(--zacht); font-style: italic; }
.leeg { color: var(--zacht); text-align: center; padding: 24px 0; }

/* leerkracht: kiezen hoe je termen toevoegt */
.toevoeg-kop { margin: 16px 0 8px; }
.toevoeg-keuze { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.toevoeg-tab { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; }
.toevoeg-tab span { color: var(--zacht); font-size: 13px; }
.toevoeg-tab.actief { border: 2px solid var(--blauw); background: var(--blauw-licht); }

/* vaktermen uit cursus */
.paneel.cursus { border-left-color: var(--blauw); }
.cursus-termen { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; max-height: 420px; overflow-y: auto; margin: 8px 0 12px; }
.cursus-term { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--rand); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-weight: normal; }
.cursus-term:has(input:checked) { background: var(--blauw-licht); border-color: var(--blauw); }
.cursus-term small { color: var(--zacht); }
.cursus-term input { margin-top: 4px; }

/* stappen op de leerkrachtenpagina */
.stapkop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 22px 0 8px; font-size: 16px; }
.stapkop small { font-weight: normal; color: var(--zacht); font-size: 13px; }
#gebruik { margin-top: 10px; border-top: 1px solid var(--rand); }
.gebruik-acties { margin-top: 6px; }

/* stappenplan */
.stappenplan summary { cursor: pointer; list-style: none; }
.stappenplan summary::-webkit-details-marker { display: none; }
.stappenplan summary h2 { display: inline-flex; margin: 0; }
.stappenplan summary h2::after { content: '▾'; margin-left: 8px; color: var(--zacht); }
.stappenplan:not([open]) summary h2::after { content: '▸'; }
.stappen { padding-left: 22px; margin: 12px 0 0; }
.stappen > li { margin-bottom: 10px; }
.stappen ul { margin: 6px 0 0; padding-left: 18px; }
.mogelijkheden { margin-top: 14px; border-top: 1px solid var(--rand); padding-top: 10px; }
.mogelijkheden ul { padding-left: 18px; margin: 6px 0; }

/* tips */
.tips h3 { margin: 4px 0 6px; }
.tips h4 { margin: 14px 0 4px; }
.tips ul { margin: 0; padding-left: 20px; }
.tips li { margin-bottom: 6px; }
.fiche-nr { display: inline-block; font-size: 11px; padding: 0 7px; border-radius: 10px; background: var(--groen-licht); color: var(--tekst); }
.leertips { grid-column: 1 / -1; margin-top: 2px; border: 1px solid var(--rand); border-radius: 10px; padding: 8px 14px; }
.leertips summary { cursor: pointer; font-weight: bold; }
.leertips ul { padding-left: 20px; margin: 8px 0 4px; }
.spelkaart.hoofd { grid-column: 1 / -1; border: 2px solid var(--groen); background: var(--groen-licht); }

/* formuleercoach */
.spelkaart.coachkaart { grid-column: 1 / -1; border: 2px solid var(--blauw); }
.coach { max-width: 680px; margin: 0 auto; }
.coach img { display: block; max-width: 100%; max-height: 220px; margin: 0 auto 8px; border-radius: 8px; background: #fff; }
.coach-vraag { font-size: 18px; font-weight: bold; margin: 6px 0 10px; }
.coach textarea { width: 100%; font-size: 17px; line-height: 1.5; margin-top: 8px; }
.coach .veld input { width: 100%; }
.coach-hulp { font-size: 14px; }
.coach-hulp label { cursor: pointer; }
#c-starters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.starter { font-size: 14px; padding: 4px 10px; border-radius: 16px; border-style: dashed; }
.coach-feedback { margin-top: 14px; border-radius: 10px; padding: 12px 14px; border-left: 5px solid var(--oranje); background: var(--oranje-licht); }
.coach-feedback.s2 { border-color: var(--geel); background: var(--geel-licht); }
.coach-feedback.s3 { border-color: var(--groen); background: var(--groen-licht); }
.coach-feedback p { margin: 4px 0; }
.coach-feedback ul { margin: 4px 0; padding-left: 20px; }
.coach-sterren { color: var(--geel); font-size: 24px; letter-spacing: 2px; }
.coach-check { list-style: none; padding-left: 0 !important; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.coach-check .nog { color: var(--zacht); }
.coach-tipkop { font-weight: bold; }
.coach-vb { font-style: italic; border-top: 1px solid var(--rand); padding-top: 8px; }

/* oefenen */
.oefenkeuze { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.spelkaart { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; }
.spelkaart b { font-size: 16px; }
.spelkaart span { color: var(--zacht); font-size: 13px; }
.spelkaart:hover { border-color: var(--groen); background: var(--groen-licht); }
.balk { height: 8px; background: var(--rand); border-radius: 4px; overflow: hidden; margin: 14px 0; }
.balk div { height: 100%; width: 0; background: var(--groen); transition: width .3s; }
.vraag { text-align: center; }
.vraag .opdracht { color: var(--zacht); font-size: 14px; margin: 0 0 10px; }
.vraag .groot-woord { font-size: 28px; font-weight: bold; margin: 8px 0; }
.vraag img { max-width: 100%; max-height: 220px; border-radius: 8px; background: #fff; }
.vraag .uitleg-tekst { font-size: 17px; max-width: 560px; margin: 10px auto; }
.vraag .zin { font-size: 18px; max-width: 600px; margin: 14px auto; }
.opties { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 16px auto 0; max-width: 700px; }
.opties button { padding: 12px; font-size: 16px; text-align: center; }
.opties.lang button { text-align: left; font-size: 14px; }
.opties button.goed, .geheugen button.goed { background: var(--groen-licht); border-color: var(--groen); }
.opties button.fout { background: var(--oranje-licht); border-color: var(--oranje); }
.antwoordrij { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.antwoordrij input { font-size: 18px; padding: 10px; width: min(320px, 100%); text-align: center; }
.hint { color: var(--zacht); letter-spacing: 3px; font-family: monospace; font-size: 18px; margin-top: 8px; }
.terugkoppeling { margin: 16px auto 0; max-width: 600px; text-align: left; }
.volgende { margin-top: 12px; }

.flitskaart { perspective: 1000px; width: min(420px, 100%); height: 300px; margin: 6px auto 0; cursor: pointer; border: none; padding: 0; background: none; display: block; }
.flitskaart .binnen { position: relative; width: 100%; height: 100%; transition: transform .5s; transform-style: preserve-3d; }
.flitskaart.om .binnen { transform: rotateY(180deg); }
.flitskaart .zijde { position: absolute; inset: 0; backface-visibility: hidden; border: 2px solid var(--rand); border-radius: 14px; background: var(--vlak); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; overflow: hidden; }
.flitskaart .achter { transform: rotateY(180deg); border-color: var(--groen); }
.flitskaart img { max-width: 100%; max-height: 170px; border-radius: 8px; background: #fff; }
.flitskaart .groot-woord { font-size: 26px; font-weight: bold; }
.flitskaart small { color: var(--zacht); }

.geheugen { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; }
.geheugen button { min-height: 110px; padding: 8px; font-size: 14px; display: grid; place-items: center; overflow-wrap: anywhere; }
.geheugen button.dicht { background: var(--blauw); border-color: var(--blauw); color: transparent; }
.geheugen button.open { border-color: var(--blauw); border-width: 2px; }
.geheugen button.goed { opacity: .65; cursor: default; }
.geheugen img { max-width: 100%; max-height: 90px; }
.geheugen .w { font-weight: bold; font-size: 16px; }

.einde { text-align: center; }
.einde .score { font-size: 40px; font-weight: bold; color: var(--groen); margin: 6px 0; }
.einde ul { text-align: left; max-width: 520px; margin: 10px auto; }

@media print {
  .kop, #lijsten-stap, .lijstkop .acties, .toevoegen, .wk-knoppen, #woord-form, .info, .menu, .paneel, .wk-eigen:placeholder-shown { display: none !important; }
  .stap { border: none; padding: 0; }
  .woordkaarten { grid-template-columns: repeat(2, 1fr); }
  .wk { break-inside: avoid; }
}

/* balk bovenaan een lijst: meteen oefenen, delen, digibord */
.klaar-balk { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px -8px; padding: 10px 12px; border-radius: 12px; background: var(--groen-licht); border: 2px solid var(--groen); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.klaar-balk .klaar-tekst { font-size: 16px; }
.klaar-balk .acties { margin: 0; gap: 8px; }
@media (max-width: 600px) { .klaar-balk { margin: 10px 0; } .klaar-balk .acties { width: 100%; } .klaar-balk .acties .knop { flex: 1; } }
@media print { .klaar-balk { display: none !important; } }

/* stappenplan: "Toon waar" */
.wijs { font: inherit; font-size: 13px; padding: 1px 8px; margin-left: 4px; border-radius: 999px; border: 1px solid var(--blauw); background: var(--blauw-licht); color: var(--blauw); cursor: pointer; white-space: nowrap; }
.wijs:hover { background: var(--blauw); color: #fff; }
.stappen ol { margin: 6px 0; padding-left: 22px; }
.stappen ol li, .stappen ul li { margin: 3px 0; }
@keyframes aanwijzen { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,153,0,0); } 50% { box-shadow: 0 0 0 6px rgba(255,153,0,.85); } }
.aangewezen { animation: aanwijzen 0.8s ease-in-out 4; border-radius: 10px; position: relative; z-index: 6; }

/* stappenplan als rustige stapkaarten (één tegelijk open) */
.sk-intro { margin: 6px 0 12px; color: var(--zacht); }
.stapkaarten { display: flex; flex-direction: column; gap: 8px; }
.stapkaart { border: 1px solid var(--rand); border-radius: 12px; background: var(--vlak); }
.stapkaart > summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; }
.stapkaart > summary::-webkit-details-marker { display: none; }
.stapkaart > summary::after { content: '▸'; margin-left: auto; color: var(--zacht); font-size: 18px; }
.stapkaart[open] > summary::after { content: '▾'; }
.stapkaart[open] { border-color: var(--blauw); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.stapkaart > summary:hover { background: var(--blauw-licht); border-radius: 12px; }
.sk-nr { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--blauw); color: #fff; font-weight: bold; display: grid; place-items: center; }
.sk-leerling .sk-nr { background: var(--groen); }
.sk-tekst { display: flex; flex-direction: column; }
.sk-tekst small { color: var(--zacht); font-size: 14px; }
.sk-inhoud { padding: 2px 16px 14px 58px; line-height: 1.5; }
.sk-inhoud ol, .sk-inhoud ul { margin: 6px 0; padding-left: 20px; }
.sk-inhoud li { margin: 4px 0; }
.sk-inhoud p { margin: 6px 0; }
.sk-extra { color: var(--zacht); font-size: 14px; }
.sk-kop { font-weight: bold; margin: 4px 0 0; }
.sk-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sk-voet { color: var(--zacht); font-size: 13px; margin: 12px 0 0; }
@media (max-width: 700px) { .sk-twee { grid-template-columns: 1fr; } .sk-inhoud { padding: 2px 12px 12px 14px; } }