/* Oefenvrae (RTT V1): gebruik die bestaande veranderlikes uit app.css */
#oefenvrae-root { max-width: 60rem; }
#oefenvrae-root h1 { font-family: var(--display); margin: 0 0 0.5rem; }
.ov-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ov-item {
  display: flex; flex-direction: column; gap: 0.25rem; width: 100%; min-height: 48px; padding: 0.6rem 0.8rem;
  text-align: left; font: inherit; color: var(--text); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.ov-item:hover, .ov-item:focus-visible { border-color: var(--accent); }
.ov-kop { display: flex; gap: 0.75rem; align-items: center; }
.ov-id { font-weight: 700; color: var(--accent); }
.ov-vlak { color: var(--muted); font-size: 0.85rem; }
.ov-merk { margin-left: auto; font-weight: 700; font-size: 1.1rem; }
.ov-reg { color: var(--ok); }
.ov-gedeeltelik { color: var(--geel); }
.ov-fout { color: var(--danger); }
.ov-open { overflow-wrap: anywhere; }
.oe-nav .btn, .oe-nasien .btn, .oe-memo-knoppie { min-height: 44px; }
.oe-titel { font-size: 1.15rem; }
.oe-vraag, .oe-teks { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.oe-vraag { margin-bottom: 0.75rem; }
.oe-bron { margin: 0.5rem 0 1rem; color: var(--muted); font-size: 0.9rem; overflow-wrap: anywhere; }
.oe-memo { margin-top: 1rem; padding: 0.75rem 1rem; background: var(--bg-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.oe-memo[hidden] { display: none; }
.oe-blok h3, .oe-nasien h3 { font-size: 0.95rem; margin: 0.75rem 0 0.35rem; color: var(--accent); }
.oe-kode {
  margin: 0; padding: 0.6rem 0.75rem; background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  font-family: ui-monospace, Consolas, monospace; font-size: 0.9rem;
  white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; overflow-x: auto;
}
.oe-rig { margin: 0; padding-left: 1.2rem; overflow-wrap: anywhere; }
.oe-nasien { margin-top: 1.25rem; }
.oe-gestoor { margin: 0.25rem 0 0; color: var(--ok); font-weight: 600; min-height: 1.4em; }
@media (max-width: 480px) { .oe-nav .btn { flex: 1 1 auto; } }

/* Eksamenmodus (assets/js/eksamenmodus.js): klok, antwoordarea, memo-hek, punte-selfnasien */
.em-kas { margin: 1rem 0; padding: 0.75rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--geel, var(--accent)); border-radius: var(--radius); background: var(--bg-2); }
.em-klok { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.em-tyd { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.4rem; }
.em-tyd.em-oor { color: var(--danger); }
.em-tyd-info { color: var(--muted); font-size: 0.9rem; }
.em-werk { margin-top: 0.6rem; display: grid; gap: 0.5rem; }
.em-antwoord { width: 100%; box-sizing: border-box; min-height: 14rem; font: inherit; line-height: 1.5; padding: 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--text); resize: vertical; }
.em-woorde { margin: 0; color: var(--muted); font-size: 0.9rem; }
.em-woorde.em-onder { color: var(--geel, var(--muted)); }
.em-woorde.em-bo { color: var(--danger); }
.em-bevestig { display: flex; gap: 0.5rem; align-items: flex-start; cursor: pointer; }
.em-bevestig input { margin-top: 0.3rem; }
.em-lêer { width: 100%; box-sizing: border-box; min-height: 44px; font: inherit; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--text); }
.em-klaar-rij .btn, .em-memo-knoppie, .em-begin, .em-stoor-punte { min-height: 44px; }
.em-rede { margin: 0.5rem 0; }
.em-memo-knoppie:disabled { opacity: 0.55; cursor: not-allowed; }
.em-punte { margin-bottom: 0.9rem; }
.em-punt-rij { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.35rem 0; }
.em-punt-naam { flex: 1 1 12rem; overflow-wrap: anywhere; }
.em-punt-inp { width: 5rem; min-height: 44px; box-sizing: border-box; font: inherit; padding: 0.3rem 0.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--text); }
.em-som { font-weight: 700; margin: 0.5rem 0; }
.em-vorige { margin-top: 0.75rem; border-top: 1px solid var(--line); padding-top: 0.5rem; }
.em-vorige-opsom { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.em-vorige-poging { margin: 0.5rem 0; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.em-vorige-datum { margin: 0 0 0.3rem; color: var(--muted); font-size: 0.9rem; }
.em-vorige-konsep { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.em-vorige-lêer { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.9rem; overflow-wrap: anywhere; }