/* Oefeningen met directe terugkoppeling (blok "quiz"), op het blog en op de lespagina's.
   De HTML maakt oefening_html() in v2/includes/oefening.php, het nakijken oefening.js. */

.blog-keuze, .blog-tegel, .blog-chip, .blog-kolom { transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease; }
.blog-keuze:focus-visible, .blog-tegel:focus-visible, .blog-chip:focus-visible, .blog-kolom:focus-visible { outline: 2px solid #1C1917; outline-offset: 2px; }
/* Groen betekent hier "goed", rood "fout": die blijven zo, los van de huisstijl. */
.blog-keuze.is-goed, .blog-chip.is-goed { border-color: #34d399; background: #d1fae5; color: #065f46; }
.blog-keuze.is-fout, .blog-chip.is-fout { border-color: #fb7185; background: #ffe4e6; color: #9f1239; }
.blog-keuze:disabled { cursor: default; }
.blog-keuze.is-dicht:not(.is-goed):not(.is-fout) { opacity: .55; }
.blog-chip.is-gekozen { border-color: #1C1917; background: #FBF7F2; box-shadow: 0 0 0 2px #1C1917; }
.blog-chip.is-getoond, .blog-keuze.is-getoond { border-color: #f59e0b; background: #fef3c7; color: #92400e; }
.blog-kolom:hover { border-color: #D67474; background: #FBF7F2; }
.blog-tegel:hover { border-color: #D67474; }
.blog-tegel.is-goed { border-color: #10b981; }
.blog-tegel.is-fout { border-color: #fb7185; animation: blog-schud 300ms; }
.blog-tegel.is-getoond { border-color: #f59e0b; }
.blog-tegel.is-getoond [data-tegel-label] { background: rgba(180, 83, 9, .9); }
.blog-tegel[data-klaar] { cursor: default; }
.blog-rooster input.is-goed { border-color: #10b981; background: #d1fae5; color: #065f46; }
.blog-rooster input.is-fout { border-color: #fb7185; background: #ffe4e6; color: #9f1239; }
.blog-rooster input.is-getoond { border-color: #f59e0b; background: #fef3c7; color: #92400e; }
/* Zolang er niets is nagekeken: grijs (groen betekent goed). */
.blog-rooster input.is-actief:not(.is-goed):not(.is-getoond):not(.is-fout) { background: #f5f5f5; border-color: #a3a3a3; }
.blog-rooster input:focus { outline: none; border-color: #404040; box-shadow: inset 0 0 0 2px #404040; }
/* Klaar (goed of getoond) en niet meer nodig voor een kruisend woord: niet meer aan te klikken. */
.blog-rooster input.is-vast { pointer-events: none; cursor: default; }
.blog-rooster input.is-vast:focus { box-shadow: none; }
.blog-rooster input.is-vast.is-goed:focus { border-color: #10b981; }
.blog-rooster input.is-vast.is-getoond:focus { border-color: #f59e0b; }
[data-hint].is-klaar { color: #737373; text-decoration: line-through; }
[data-invul].is-goed { border-color: #34d399; color: #065f46; }
[data-invul].is-fout { border-color: #f59e0b; color: #92400e; }
[data-invoer].is-goed { border-color: #34d399; background: #ecfdf5; color: #065f46; }
[data-invoer].is-fout { border-color: #fb7185; background: #fff1f2; color: #9f1239; }
[data-invoer].is-getoond { border-color: #f59e0b; background: #fffbeb; color: #92400e; }
.blog-einde:not(.hidden) { animation: blog-op 400ms ease-out; }
@keyframes blog-schud { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes blog-op { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .blog-tegel.is-fout, .blog-einde:not(.hidden) { animation: none; } }