/* Leesbaarheid en toegankelijkheid (audit 27-10-2026, WCAG 2.2 AA). Laadt als laatste; alles hier is in één keer terug te
   draaien door dit bestand weg te laten. Contrast per paar staat in Strong rapport/Strong-platform-audit-gebruiksgemak-2026-10-27.html.
   - merkgroen blijft het merkgroen; tekst óp groen wordt donker (8,8:1 i.p.v. 2,1:1)
   - groene, grijze, oranje en rode tekst een tint donkerder (alle ≥ 4,5:1)
   - klikdoelen minstens 24 × 24 px, zichtbare focusrand */
:root {
  --green-d: #2f7d12;   /* was #4fa923: groene tekst en labels 2,99 → 5,17 */
  --muted: #5f6670;     /* was #7a828c: hulptekst 3,89 → 5,80 */
  --red: #c62a2f;       /* was #e5484d: rood op lichtrood 3,43 → 4,87 */
}
.btn.primary { color: var(--ink); }
.btn.primary:hover { background: #5cbd2c; border-color: #5cbd2c; color: var(--ink); }
.score.hi, .vink, .teller, .palet-item.sel i { color: var(--ink); }
.pill.a, .ic-tender, .fr4, .cx.af, .cx-blok th { color: #8a5600; }
.fr-knoppen input:checked + .fr-k.fr4 { color: #8a5600 !important; }
.btn.klaar, .kb.g, .eis.voorstel { color: var(--green-d); }

/* rode knop voor onomkeerbare handelingen */
.btn.gevaar { background: var(--red); border-color: var(--red); color: #fff; }
.btn.gevaar:hover { background: #a92227; border-color: #a92227; }

/* klikdoelen en focus */
.btn.sm { min-height: 28px; }
.btn, .tabs a, .pill.click, .lnk { min-height: 24px; }
:focus-visible { outline: 2px solid #05659f; outline-offset: 2px; }

/* eigen venster voor bevestigen en invoer (app.js: bevestig / vraagTekst) */
.vraag-scherm { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(17, 19, 21, .45); }
.vraag-box { background: #fff; border-radius: 12px; width: min(460px, 100%); padding: 20px 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.vraag-box h2 { font-size: 18px; margin: 0 0 8px; text-wrap: balance; }
.vraag-box p { margin: 6px 0; color: var(--ink2); }
.vraag-box textarea { min-height: 90px; width: 100%; }
.vraag-knoppen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.veld-fout { color: var(--red); font-size: 13px; font-weight: 600; margin: 2px 0 4px; }
.in[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
@media (prefers-reduced-motion: no-preference) { .vraag-box { animation: vraag-in .16s ease-out; } }
@keyframes vraag-in { from { transform: translateY(6px); opacity: .6; } to { transform: none; opacity: 1; } }

/* Mijn dag: lege onderdelen samen op één regel (app2.js) */
.md-leeg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.md-leeg span { background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; }
.md-leeg span::before { content: "✓ "; color: var(--green-d); font-weight: 700; }

/* Kandidaatkop met contact en volgende stap (app2.js) */
.kand-kop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; }
.kand-kop .kk-av { width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 700 16px Archivo, Inter, sans-serif; }
.kand-kop .kk-naam { font: 700 18px Archivo, Inter, sans-serif; margin: 0; }
.kand-kop .kk-sub { color: var(--muted); font-size: 13px; }
.kand-kop .kk-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 760px) { .kand-kop { grid-template-columns: auto minmax(0, 1fr); } .kand-kop .kk-acts { grid-column: 1 / -1; justify-content: flex-start; } }

/* Telefoon: brede tabellen scrollen binnen hun kaart in plaats van de pagina te verbreden (gemeten: de kandidatenlijst
   met contactknoppen was ± 55 px te breed). Niets wordt verborgen, zodat echte overloop zichtbaar blijft. */
@media (max-width: 760px) {
  #view .card, #view .grid > * { min-width: 0; max-width: 100%; }
  #view .card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}