/* Oefensites Boater Exam (US) en Vaarbewijs (NL): één stijl, palet uit beeld/STIJL.md.
   Geen lettertypen of scripts van buiten. Volgt de systeeminstelling voor licht en donker. */
:root {
  --grond: #ffffff; --paneel: #f5f7f9; --tekst: #1b2a35; --zacht: #5b6874; --lijn: #dfe5ea;
  --accent: #0f5ea8; --signaal: #e2580a; --goed: #00843d; --fout: #c8102e;
  --goed-bg: #e6f4ec; --fout-bg: #fbe9ec; --let-bg: #fff4e5;
  --letter: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grond: #0b1219; --paneel: #16222c; --tekst: #f5f3ee; --zacht: #9fb0bd; --lijn: #24323d;
    --accent: #7fb4e8; --goed: #19b35c; --fout: #ff6b7d;
    --goed-bg: #0f2d1d; --fout-bg: #351820; --let-bg: #2e2412;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grond); color: var(--tekst); font: 17px/1.55 var(--letter); }
a { color: var(--accent); }
main, footer, .top, .disclaimer, .app { max-width: 46rem; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.top { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding-top: .9rem; padding-bottom: .9rem; border-bottom: 1px solid var(--lijn); max-width: none; }
.top .merk { font-weight: 700; text-decoration: none; color: var(--tekst); }
.top nav { display: flex; gap: 1rem; font-size: .95rem; }
.disclaimer { margin: .75rem auto 0; font-size: .85rem; background: var(--let-bg); border-radius: 8px; padding: .5rem .75rem; max-width: calc(46rem - 32px); }
@media (max-width: 46rem) { .disclaimer { margin-left: 16px; margin-right: 16px; } }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 1.25rem 0 .5rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1.05rem; margin: 1.25rem 0 .25rem; }
.lead { font-size: 1.1rem; color: var(--zacht); }
.kruimel { font-size: .85rem; color: var(--zacht); margin: 1rem 0 0; }
.knop { display: inline-block; background: var(--accent); color: #fff; padding: .7rem 1.1rem; border-radius: 10px; text-decoration: none; font-weight: 600; }
@media (prefers-color-scheme: dark) { .knop { color: #0b1219; } }
.staten { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1.25rem 0; }
.staten a { display: block; background: var(--paneel); border: 1px solid var(--lijn); border-radius: 12px; padding: 1rem; text-decoration: none; color: var(--tekst); }
.staten strong { display: block; font-size: 1.15rem; color: var(--accent); }
.staten span { font-size: .85rem; color: var(--zacht); }
.onderwerpen { list-style: none; padding: 0; margin: .5rem 0; }
.onderwerpen li { padding: .55rem 0; border-bottom: 1px solid var(--lijn); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; }
.onderwerpen span { color: var(--zacht); font-size: .85rem; }
.vragen { list-style: none; padding: 0; margin: 1.25rem 0; }
.q { background: var(--paneel); border: 1px solid var(--lijn); border-radius: 12px; padding: 1rem; margin: 0 0 1rem; }
.stem { margin: 0 0 .5rem; font-weight: 600; }
.nr { color: var(--zacht); }
.beeld { display: block; width: 100%; height: auto; border-radius: 8px; margin: .25rem 0 .75rem; background: #fff; }
.opts { margin: 0; padding-left: 1.6rem; }
.opts li { padding: .35rem .5rem; margin: .2rem 0; border-radius: 8px; }
.opts li[role=button] { cursor: pointer; border: 1px solid var(--lijn); background: var(--grond); }
.opts li[role=button]:hover { border-color: var(--accent); }
.klaar .opts li { cursor: default; }
.opts li.goed, .opts li.goed:hover { background: var(--goed-bg); border-color: var(--goed); }
.opts li.fout, .opts li.fout:hover { background: var(--fout-bg); border-color: var(--fout); }
details { margin-top: .6rem; font-size: .95rem; }
summary { cursor: pointer; color: var(--accent); }
.bron { color: var(--zacht); font-size: .85rem; }
blockquote { margin: .25rem 0 0; padding: .25rem .75rem; border-left: 3px solid var(--lijn); color: var(--zacht); font-size: .85rem; }
.score { position: sticky; bottom: 0; background: var(--tekst); color: var(--grond); padding: .75rem 1rem; border-radius: 10px 10px 0 0; font-weight: 600; text-align: center; }
.score.ok { background: var(--goed); color: #fff; }
.score.nok { background: var(--fout); color: #fff; }
.verder { font-size: .95rem; }
.verder a { margin-right: .5rem; }
.app { margin: 2.5rem auto 0; padding-top: 1.25rem; padding-bottom: 1.5rem; border-top: 1px solid var(--lijn); }
.app .badge img { display: block; }
footer { padding-top: 1rem; padding-bottom: 2rem; color: var(--zacht); font-size: .85rem; border-top: 1px solid var(--lijn); }
.disclaimer-voet { font-weight: 600; }
@media (max-width: 30rem) { h1 { font-size: 1.5rem; } .staten { grid-template-columns: 1fr; } }