:root {
  --achtergrond: #ffffff;
  --vlak: #f2f5f8;
  --tekst: #1b1f24;
  --zacht: #4a5560;
  --rand: #b8c2cc;
  --accent: #1f5f8b;
  --accent-tekst: #ffffff;
  --zin: #fff3b0;
  --woord: #ffc93c;
  --woord-tekst: #1b1f24;
  --focus: #c2410c;
  --leesgrootte: 1.5rem;
  --lettergreep: #0b57b0;
  --leesletter: Verdana, Tahoma, "Segoe UI", Roboto, Arial, sans-serif;
  --letterafstand: .03em;
  --woordafstand: .16em;
  --regelafstand: 1.9;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root[data-achtergrond="auto"] {
    --achtergrond: #15191e;
    --vlak: #222a33;
    --tekst: #eef2f5;
    --zacht: #b3bec8;
    --rand: #4b5866;
    --accent: #7cc0f0;
    --accent-tekst: #0d1b26;
    --zin: #3b3511;
    --woord: #ffd666;
    --woord-tekst: #15191e;
    --focus: #ffa463;
    --lettergreep: #8ecbff;
    color-scheme: dark;
  }
}

:root[data-achtergrond="creme"] {
  --achtergrond: #fbf5e6;
  --vlak: #f1e9d4;
  --rand: #c9b993;
}

:root[data-achtergrond="blauw"] { --achtergrond: #e3f0fb; --vlak: #d3e5f5; --rand: #9db8d0; }
:root[data-achtergrond="groen"] { --achtergrond: #e6f4e3; --vlak: #d6eacf; --rand: #a3c19a; }
:root[data-achtergrond="geel"] { --achtergrond: #fdf6c9; --vlak: #f5ebb0; --rand: #cdbf73; --zin: #ffd9a8; --woord: #f5a524; }
:root[data-achtergrond="roze"] { --achtergrond: #fbe6ee; --vlak: #f3d4e0; --rand: #cfa2b5; }

:root[data-achtergrond="donker"] {
  --lettergreep: #8ecbff;
  --achtergrond: #15191e;
  --vlak: #222a33;
  --tekst: #eef2f5;
  --zacht: #b3bec8;
  --rand: #4b5866;
  --accent: #7cc0f0;
  --accent-tekst: #0d1b26;
  --zin: #3b3511;
  --woord: #ffd666;
  --woord-tekst: #15191e;
  --focus: #ffa463;
  color-scheme: dark;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--tekst);
  font-family: Verdana, Tahoma, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.5;
}

main, .kop, .paneel, .voet {
  max-width: 50rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.naar-inhoud {
  position: absolute;
  left: -999px;
}
.naar-inhoud:focus {
  left: 1rem;
  top: 1rem;
  background: var(--achtergrond);
  padding: .5rem;
  z-index: 10;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .75rem;
  padding-bottom: .5rem;
}

h1 {
  font-size: 1.6rem;
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.knop, .knop-klein {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 2px solid var(--accent);
  border-radius: .75rem;
  background: var(--vlak);
  color: var(--tekst);
  font: inherit;
  cursor: pointer;
  text-align: center;
}

.knop {
  min-height: 3.25rem;
  padding: .5rem 1rem;
  font-weight: bold;
}

.knop-klein {
  min-height: 2.75rem;
  padding: .35rem .8rem;
}

.knop.groot {
  min-height: 4rem;
  font-size: 1.2rem;
  padding: .75rem 1.25rem;
}

.knop.hoofd {
  background: var(--accent);
  color: var(--accent-tekst);
}

.knop:disabled, .knop-klein:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.knop:hover:not(:disabled), .knop-klein:hover:not(:disabled) {
  filter: brightness(1.08);
}

.knop[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-tekst);
}

/* bestandskiezer verbergen maar bereikbaar laten via het label */
.verborgen-invoer {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.verborgen-invoer:focus-visible + .knop,
label.knop:has(+ .verborgen-invoer:focus-visible),
label.knop-klein:has(+ .verborgen-invoer:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.uitleg { font-size: 1.15rem; margin: .5rem 0 1rem; }

.grote-knoppen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}

.tip {
  color: var(--zacht);
  font-size: .95rem;
}

kbd {
  border: 1px solid var(--rand);
  border-radius: .25rem;
  padding: 0 .3rem;
  font-family: inherit;
}

.paneel {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: .75rem;
  padding: 1rem;
  margin-bottom: 1rem;
  display: grid;
  gap: .9rem;
}

.rij {
  display: grid;
  gap: .3rem;
}

.rij label, .rij .label { font-weight: bold; }
.rij label.vinkje { font-weight: normal; display: flex; gap: .5rem; align-items: center; }
.vinkje input { width: 1.4rem; height: 1.4rem; }

select, input[type="range"] {
  font: inherit;
  min-height: 2.75rem;
  width: 100%;
}

select {
  border: 2px solid var(--rand);
  border-radius: .5rem;
  background: var(--achtergrond);
  color: var(--tekst);
  padding: .25rem .5rem;
}

.knoppenrij { display: flex; gap: .5rem; }

.voorbeeld {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.voorbeeld img {
  max-width: 10rem;
  max-height: 10rem;
  border: 1px solid var(--rand);
  border-radius: .5rem;
  object-fit: contain;
  background: #fff;
}

.bezig { margin-top: 1rem; }
.bezig p { margin: 0 0 .3rem; font-weight: bold; }
progress { width: 100%; height: 1.25rem; accent-color: var(--accent); }

.melding:empty { display: none; }
.melding {
  margin: 1rem 0 0;
  padding: .75rem 1rem;
  border-left: 5px solid var(--accent);
  background: var(--vlak);
  border-radius: .5rem;
}

.tekst-sectie { margin-top: 1.5rem; }

.bediening {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1rem;
  position: sticky;
  top: 0;
  background: var(--achtergrond);
  padding: .5rem 0;
  z-index: 5;
}

.bediening .hoofd { flex: 1 1 12rem; }

.leesvak, .tekstvak {
  font-size: var(--leesgrootte);
  font-family: var(--leesletter);
  line-height: var(--regelafstand);
  letter-spacing: var(--letterafstand);
  word-spacing: var(--woordafstand);
  max-width: 40em;
}

.leesvak {
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid var(--rand);
  border-radius: .75rem;
  background: var(--achtergrond);
}

.leesvak p { margin: 0 0 1em; }
.leesvak p:last-child { margin-bottom: 0; }

.leesvak .leeg {
  color: var(--zacht);
  font-size: 1.1rem;
  font-family: Verdana, Tahoma, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: 1.5;
}

.leesvak .woord {
  cursor: pointer;
  border-radius: .2em;
  padding: 0 .05em;
}

.leesvak .zin.actief { background: var(--zin); border-radius: .2em; }

.leesvak .woord.actief {
  background: var(--woord);
  color: var(--woord-tekst);
  box-shadow: 0 .12em 0 var(--tekst);
}

.tekstvak {
  width: 100%;
  padding: 1rem;
  border: 2px solid var(--accent);
  border-radius: .75rem;
  background: var(--achtergrond);
  color: var(--tekst);
}

.onderaan { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .6rem; }

.voet {
  color: var(--zacht);
  font-size: .95rem;
  margin-top: 2rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--rand);
}

body.sleep main { outline: 4px dashed var(--accent); outline-offset: 4px; }

@media (max-width: 30rem) {
  .grote-knoppen { grid-template-columns: 1fr; }
  h1 { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* extra stemmen en mp3 */
.stem-extra {
  margin-top: .4rem;
  padding: .75rem;
  border: 1px dashed var(--rand);
  border-radius: .5rem;
  display: grid;
  gap: .5rem;
}
.stem-extra p, .mp3-paneel p { margin: 0; }
.knoppenrij { flex-wrap: wrap; }
.mp3-paneel { margin-top: .75rem; }
.mp3-paneel > div { display: grid; gap: .6rem; }
.mp3-paneel audio { width: 100%; }
a.knop-klein { text-decoration: none; }

/* ---------- 1.4.0: leesvriendelijke weergave ---------- */
@font-face {
  font-family: "Lexend";
  src: url("lib/letters/lexend-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("lib/letters/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("lib/letters/opendyslexic-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}
:root[data-lettertype="lexend"] { --leesletter: "Lexend", Verdana, sans-serif; }
:root[data-lettertype="atkinson"] { --leesletter: "Atkinson Hyperlegible", Verdana, sans-serif; }
:root[data-lettertype="opendyslexic"] { --leesletter: "OpenDyslexic", Verdana, sans-serif; }

:root[data-ruimte="ruim"] { --letterafstand: .08em; --woordafstand: .3em; --regelafstand: 2.2; }
:root[data-ruimte="extra"] { --letterafstand: .14em; --woordafstand: .5em; --regelafstand: 2.6; }

/* lettergrepen: om de andere lettergreep in een andere kleur */
.leesvak .lg2 { color: var(--lettergreep); }
.leesvak .woord.actief .lg2 { color: #083d7a; }

/* focus: tijdens het voorlezen de andere zinnen vager */
.leesvak.focus:has(.zin.actief) .zin:not(.actief) { opacity: .35; }
.leesvak .zin { transition: opacity .2s; }

/* kop met twee knoppen */
.kop { flex-wrap: wrap; }
.kop-knoppen { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }

.paneel h2 { font-size: 1.2rem; margin: 0; }
.paneel h2.groep {
  font-size: 1.05rem;
  margin: .4rem 0 -.3rem;
  padding-top: .6rem;
  border-top: 1px solid var(--rand);
}
.paneel h2.groep:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* bediening: zin terug / verder als kleine vierkante knoppen */
#zin-terug, #zin-verder { min-width: 3.25rem; padding: .5rem .75rem; font-size: 1.15rem; }

/* Mijn teksten */
.teksten-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.teksten-lijst li {
  display: flex;
  gap: .5rem;
  align-items: stretch;
  background: var(--achtergrond);
  border: 1px solid var(--rand);
  border-radius: .6rem;
  padding: .4rem;
}
.teksten-lijst .open-tekst {
  flex: 1;
  display: grid;
  justify-items: start;
  gap: .1rem;
  text-align: left;
  border: 0;
  background: none;
  color: var(--tekst);
  font: inherit;
  padding: .35rem .5rem;
  border-radius: .4rem;
  cursor: pointer;
  min-height: 2.75rem;
}
.teksten-lijst .open-tekst:hover { background: var(--vlak); }
.teksten-lijst .titel { font-weight: bold; }
.teksten-lijst .datum { color: var(--zacht); font-size: .9rem; }
.leeg-lijst { color: var(--zacht); margin: 0; }

/* uitleg van een woord (Pro) */
.uitleg-paneel { margin-top: 1rem; }
.uitleg-paneel p { margin: 0; }
.uitleg-kop { font-size: 1.2rem; }

/* slimme hulp (Pro) */
.slim { margin-top: 1rem; }
.slim p { margin: 0; }
.slim-knoppen { display: grid; gap: .75rem; }
.slim .rij { max-width: 20rem; }
.pro-label {
  font-size: .75rem;
  vertical-align: middle;
  background: var(--accent);
  color: var(--accent-tekst);
  border-radius: 1rem;
  padding: .1rem .5rem;
}
#slim-bezig { display: flex; gap: .5rem; align-items: center; }
#slim-bezig progress { width: 6rem; }

.pro-info summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; gap: .4rem; }
.pro-info ul { margin: .25rem 0 0; padding-left: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .leesvak .zin { transition: none; }
}