:root {
  --achtergrond: #ffffff;
  --vlak: #f2f5f8;
  --tekst: #1b1f24;
  --zacht: #4a5560;
  --rand: #b8c2cc;
  --veldrand: #6b7783; /* randen van keuzelijsten en velden: minstens 3:1 tegen de achtergrond */
  --accent: #1f5f8b;
  --accent-tekst: #ffffff;
  --zin: #ffe98a;
  --woord: #ffc93c;
  --woord-tekst: #1b1f24;
  --focus: #c2410c;
  --liniaal: rgb(31 95 139 / .14);
  --leesgrootte: 1.5rem;
  --lettergreep: #0b57b0;
  --leesletter: Verdana, Tahoma, "Segoe UI", Roboto, Arial, sans-serif;
  --letterafstand: .03em;
  --woordafstand: .16em;
  --regelafstand: 1.9;
  /* Leerhulp 2.0: kleuren van de app zelf (menu, Start, speler); de leeskleuren hierboven blijven apart */
  --ui-bg: #f5f7fa;
  --ui-vlak: #ffffff;
  --ui-vlak-2: #edf1f5;
  --ui-inkt: #17232d;
  --ui-zacht: #5b6b78;
  --ui-lijn: #d5dde5;
  --ui-merk: #1d5c8c;
  --ui-merk-tekst: #ffffff;
  --ui-merk-zacht: #e1edf7;
  --ui-pro: #5a44b5;
  --ui-pro-zacht: #eeeafb;
  --ui-groen: #23775a;
  --ui-bol: rgb(255 255 255 / .16);
  --ui-schaduw: 0 1px 2px rgb(16 32 48 / .06), 0 6px 20px rgb(16 32 48 / .08);
  --ui-letter: "Lexend", "Segoe UI", Roboto, system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root[data-achtergrond="auto"] {
    --achtergrond: #15191e;
    --vlak: #222a33;
    --tekst: #eef2f5;
    --zacht: #b3bec8;
    --rand: #4b5866;
    --veldrand: #8d9aa7;
    --accent: #7cc0f0;
    --accent-tekst: #0d1b26;
    --zin: #4d4416;
    --woord: #ffd666;
    --woord-tekst: #15191e;
    --focus: #ffa463;
    --liniaal: rgb(124 192 240 / .2);
    --lettergreep: #8ecbff;
    --ui-bg: #10161c;
    --ui-vlak: #19222b;
    --ui-vlak-2: #212c37;
    --ui-inkt: #ecf1f5;
    --ui-zacht: #a9b6c1;
    --ui-lijn: #2f3b47;
    --ui-merk: #8cc4f0;
    --ui-merk-tekst: #0d1a24;
    --ui-merk-zacht: #1e3445;
    --ui-pro: #b9a8ff;
    --ui-pro-zacht: #2a2346;
    --ui-groen: #7fd3b0;
    --ui-bol: rgb(0 0 0 / .12);
    --ui-schaduw: 0 1px 2px rgb(0 0 0 / .4), 0 6px 20px rgb(0 0 0 / .35);
    color-scheme: dark;
  }
}

:root[data-achtergrond="creme"] {
  --achtergrond: #fbf5e6;
  --vlak: #f1e9d4;
  --rand: #c9b993;
  --zin: #f8d66b; /* geel op crème valt anders weg */
}

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

:root[data-achtergrond="donker"] {
  --lettergreep: #8ecbff;
  --achtergrond: #15191e;
  --vlak: #222a33;
  --tekst: #eef2f5;
  --zacht: #b3bec8;
  --rand: #4b5866;
  --veldrand: #8d9aa7;
  --accent: #7cc0f0;
  --accent-tekst: #0d1b26;
  --zin: #4d4416;
  --woord: #ffd666;
  --woord-tekst: #15191e;
  --focus: #ffa463;
  --liniaal: rgb(124 192 240 / .2);
  --ui-bg: #10161c;
  --ui-vlak: #19222b;
  --ui-vlak-2: #212c37;
  --ui-inkt: #ecf1f5;
  --ui-zacht: #a9b6c1;
  --ui-lijn: #2f3b47;
  --ui-merk: #8cc4f0;
  --ui-merk-tekst: #0d1a24;
  --ui-merk-zacht: #1e3445;
  --ui-pro: #b9a8ff;
  --ui-pro-zacht: #2a2346;
  --ui-groen: #7fd3b0;
  --ui-bol: rgb(0 0 0 / .12);
  --ui-schaduw: 0 1px 2px rgb(0 0 0 / .4), 0 6px 20px rgb(0 0 0 / .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

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

/* hoogtes van wat vast onderaan staat: het menu (telefoon) en de speler (Lezen, met tekst) */
:root {
  --nav-h: calc(4.4rem + env(safe-area-inset-bottom));
  --speler-h: 8.9rem;
  --rail-b: 0rem;
}

body {
  --onder-h: var(--nav-h);
  margin: 0;
  background: var(--ui-bg);
  color: var(--ui-inkt);
  font-family: var(--ui-letter);
  font-size: 1.05rem;
  line-height: 1.5;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 calc(var(--rail-b) + env(safe-area-inset-left));
  /* ruimte onderaan, zodat het menu, de speler of een melding nooit de laatste knoppen bedekt */
  padding-bottom: calc(var(--onder-h) + 5rem);
}
/* Lezen: de leeskleur (Aa) is de achtergrond van het hele scherm */
:root[data-plek="lezen"] body { background: var(--achtergrond); color: var(--tekst); }
:root[data-plek="lezen"] body:not(.leeg) { --onder-h: calc(var(--nav-h) + var(--speler-h)); }
html { scroll-padding-bottom: calc(var(--nav-h) + var(--speler-h) + 1rem); }
:root[data-plek="lezen"] { scroll-padding-top: 3.5rem; } /* onder de titel die bovenaan blijft staan */

/* elke plek is een eigen scherm; telefoon eerst */
.plek {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1rem 1rem 0;
}
.plek-lezen { max-width: 50rem; padding-top: 0; }
.plek-teksten, .plek-instellingen { max-width: 46rem; }
.plek-titel { font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; margin: .25rem 0 1rem; }
main:focus { outline: none; }

/* lijnpictogrammen (sprite in index.html) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.i {
  width: 1.5rem; height: 1.5rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
svg.i.vol { fill: currentColor; stroke: none; }

.naar-inhoud {
  position: absolute;
  left: -999px;
}
.naar-inhoud:focus {
  left: 1rem;
  top: 1rem;
  background: var(--ui-vlak);
  color: var(--ui-inkt);
  padding: .5rem;
  z-index: 40;
}

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


: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, .knop-klein.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;
}
label.knop:has(+ .verborgen-invoer:focus-visible),
label.knop-klein:has(+ .verborgen-invoer:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.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; flex: none; }

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

select {
  border: 2px solid var(--veldrand);
  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;
}

.voorbeeld img { cursor: pointer; }
.voorbeeld-knoppen { display: grid; gap: .5rem; justify-items: start; }

/* foto bijsnijden: vier hoeken om te verslepen, buiten het blad donkerder */
.snij-venster { width: min(46rem, calc(100vw - 2rem)); }
.snij-vak {
  position: relative;
  justify-self: center;
  line-height: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
}
.snij-vak canvas { display: block; border-radius: .25rem; }
.snij-lijnen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.snij-donker { fill: rgb(0 0 0 / .45); }
.snij-lijn { fill: none; stroke: #fff; stroke-width: 3px; vector-effect: non-scaling-stroke; }
.snij-hoek {
  position: absolute;
  width: 2.75rem;
  height: 2.75rem;
  margin: -1.375rem 0 0 -1.375rem;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: rgb(11 87 168 / .6);
  box-shadow: 0 0 0 2px rgb(0 0 0 / .55);
  cursor: grab;
  touch-action: none;
}
.snij-hoek:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

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

/* melding: zweeft onderaan, zodat ze altijd in beeld is (ook als je naar beneden gescrold bent).
   Het vak blijft altijd bestaan (leeg = onzichtbaar), zodat schermlezers elke nieuwe melding horen.
   Klikken gaan door het vak heen, behalve op de knoppen. */
.melding-vak {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-width: 40rem;
  margin: 0 auto;
  z-index: 30;
  display: flex;
  gap: .5rem;
  align-items: center;
  pointer-events: none;
}
.melding-vak:not(:has(.melding:empty)) {
  padding: .75rem 1rem;
  border-left: 5px solid var(--accent);
  background: var(--vlak);
  border-radius: .5rem;
  box-shadow: 0 .25rem 1rem rgb(0 0 0 / .25);
}
.melding { margin: 0; flex: 1; }
/* met een actieknop: de knoppen op een eigen rij onder de tekst (anders wordt de tekst te smal) */
.melding-vak:has(#melding-actie:not([hidden])) { flex-wrap: wrap; }
.melding-vak:has(#melding-actie:not([hidden])) .melding { flex-basis: 100%; }
.melding-vak button { pointer-events: auto; }
#melding-knoppen { flex: none; }

.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 {
  /* lange woorden met grote letters mogen afbreken: anders schuift de pagina opzij op een gsm */
  overflow-wrap: anywhere;
  hyphens: auto;
  /* op een smalle gsm de grootste lettermaat beperken (± 10 woorden per scherm blijft leesbaar) */
  font-size: min(var(--leesgrootte), 11vw);
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid var(--rand);
  border-radius: .75rem;
  background: var(--achtergrond);
}

.leesvak p { margin: 0 0 1em; }

/* leesliniaal: balk achter de regel (z-index -1 binnen het leesvak), vlakken erboven/eronder vager */
.leesvak { position: relative; z-index: 0; }
.liniaal {
  position: absolute; left: 0; right: 0; z-index: -1;
  background: var(--liniaal);
  border-bottom: 3px solid var(--accent);
  pointer-events: none;
  transition: top .15s ease-out;
}
.liniaal-dim {
  position: absolute; left: 0; right: 0;
  background: var(--achtergrond);
  opacity: .72;
  pointer-events: none;
  transition: top .15s ease-out, height .15s ease-out;
}
.liniaal-boven { top: 0; border-radius: .75rem .75rem 0 0; }
.liniaal-onder { bottom: 0; border-radius: 0 0 .75rem .75rem; }
.leesvak p:last-child { margin-bottom: 0; }

.leesvak .leeg {
  color: var(--zacht);
  font-size: 1.1rem;
  font-family: var(--ui-letter);
  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; }

/* twijfelwoord na een foto: misschien verkeerd gelezen (stippellijn, tot het verbeterd is) */
.leesvak.twijfel-aan .woord.twijfel {
  text-decoration: underline dotted var(--focus);
  text-decoration-thickness: .12em;
  text-underline-offset: .22em;
  text-decoration-skip-ink: none;
}

.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; }

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

@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%; }
.knop-klein[aria-pressed="true"] { background: var(--accent); color: var(--accent-tekst); }
.delen-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; max-height: 50vh; overflow: auto; }
.deel-knop { width: 100%; display: grid; grid-template-columns: 1fr; justify-content: start; justify-items: start; gap: .1rem; text-align: left; }
.deel-knop .tip { margin: 0; }
a.knop-klein { text-decoration: none; }

/* ---------- 1.4.0: leesvriendelijke weergave ---------- */
/* Lexend: letter van de app (2.0, 400–700) én keuze voor de leestekst */
@font-face {
  font-family: "Lexend";
  src: url("lib/letters/lexend-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("lib/letters/lexend-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("lib/letters/lexend-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("lib/letters/lexend-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  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, .voorbeeld-lezen .vb-woord .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; }

.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; }

/* 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; }
}

.meer-info summary { cursor: pointer; padding: .7rem 0; }
.meer-info p { margin: 0 0 .5rem; }

/* op een computer doet "Foto maken" hetzelfde als "Afbeelding kiezen" */
@media (hover: hover) and (pointer: fine) {
  .knop-camera, .knop-camera + .verborgen-invoer { display: none !important; }
}
/* sneltoetsen enkel tonen waar een toetsenbord is */
@media (hover: none) {
  .sneltoetsen { display: none; }
}

/* wat tikken op een woord doet */
.tik-rij { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; margin: -.4rem 0 .5rem; }
/* taal van de tekst (enkel zichtbaar als ze niet duidelijk Nederlands is) */
.taal-vak { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; font-weight: bold; }
.taal-vak select { width: auto; font-weight: normal; }
.tik-knop[aria-pressed="true"] { background: var(--accent); color: var(--accent-tekst); border-color: var(--accent); }

/* meelezen op de foto: de foto zelf, met de zin en het woord dat voorgelezen wordt erop aangeduid
   (multiply: als met een fluostift, de tekst eronder blijft zichtbaar) */
.fotovak {
  padding: .5rem;
  border: 2px solid var(--rand);
  border-radius: .75rem;
  background: var(--vlak);
  overflow-x: auto; /* groter gezet: de foto schuift mee met het woord */
}
.foto-blad { position: relative; cursor: pointer; width: calc(var(--fotozoom, 1) * 100%); }
.foto-blad + .foto-blad { margin-top: 1rem; }
.foto-zoom { display: flex; justify-content: flex-end; gap: .5rem; margin-bottom: .5rem; }
.foto-blad img { display: block; width: 100%; height: auto; border-radius: .4rem; user-select: none; }
.foto-zin, .foto-woord { position: absolute; pointer-events: none; border-radius: .25em; mix-blend-mode: multiply; }
.foto-zin { background: rgb(255 226 110 / .6); }

/* Mijn teksten in een bestand */
.teksten-bestand { flex-wrap: wrap; margin-top: 1rem; }

/* leesmeter (bij Mijn teksten): zeven staafjes, vandaag rechts */
.leesmeter { margin: 0 0 1rem; padding: .75rem 1rem; border: 1px solid var(--rand); border-radius: .75rem; background: var(--achtergrond); }
.leesmeter h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.leesmeter p { margin: 0 0 .6rem; }
.leesmeter-balken { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; align-items: end; height: 5.5rem; }
.leesmeter-dag { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .2rem; font-size: .8rem; color: var(--zacht); }
.leesmeter-paal { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.leesmeter-staaf { width: 100%; max-width: 2rem; min-height: 3px; border-radius: .3rem .3rem 0 0; background: var(--accent); }
.leesmeter-staaf.leeg { background: var(--rand); }
.leesmeter-dag.vandaag { color: var(--tekst); font-weight: bold; }
.foto-woord { background: rgb(255 165 30 / .6); box-shadow: 0 0 0 3px #c2410c; }
.tik-knop { font-size: .95rem; border-width: 1px; }

/* voorbeeldzin in Instellingen: zo ziet de tekst eruit */
.voorbeeld-lezen {
  font-size: min(var(--leesgrootte), 2rem);
  font-family: var(--leesletter);
  line-height: var(--regelafstand);
  letter-spacing: var(--letterafstand);
  word-spacing: var(--woordafstand);
  background: var(--achtergrond);
  border: 2px solid var(--rand);
  border-radius: .75rem;
  padding: .5rem 1rem;
  overflow-wrap: anywhere;
}
.voorbeeld-lezen .lg2 { color: var(--lettergreep); }
.voorbeeld-lezen .vb-zin { background: var(--zin); border-radius: .2em; }
.voorbeeld-lezen .vb-woord { background: var(--woord); color: var(--woord-tekst); border-radius: .2em; }

/* snelheid: schildpad en haas */
.schuif-rij { display: flex; gap: .5rem; align-items: center; font-size: 1.4rem; }
.schuif-rij input { flex: 1; }

/* tip voor een gratis extra stem */
.stem-tip {
  margin: .3rem 0 0;
  padding: .6rem .75rem;
  border: 1px dashed var(--accent);
  border-radius: .5rem;
  display: grid;
  gap: .5rem;
  justify-items: start;
}

/* knoppen zonder tekst om mee te werken (bv. "Bladzijde erbij" zonder tekst) */
label.knop-klein:has(+ .verborgen-invoer:disabled) { opacity: .45; cursor: not-allowed; }

/* uitnodigingslink plakken (Voorlezen Pro, proef) */
.uitnodiging-vorm { margin-top: .75rem; }
.uitnodiging-vorm label { display: block; margin-bottom: .4rem; }
.uitnodiging-vorm input {
  flex: 1 1 14rem;
  min-width: 0;
  font: inherit;
  padding: .5rem .6rem;
  border: 2px solid var(--veldrand);
  border-radius: .5rem;
  background: var(--achtergrond);
  color: var(--tekst);
}

/* slimme hulp: taakkaarten en keuzevenster (Pro) */
.slim-taken { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.slim-taak {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  min-height: 3.75rem; padding: .6rem .9rem; text-align: left;
  font: inherit; color: var(--tekst); background: var(--achtergrond);
  border: 2px solid var(--accent); border-radius: .75rem; cursor: pointer;
}
.slim-taak:hover { filter: brightness(1.05); }
.slim-taak-icoon { font-size: 1.6rem; line-height: 1; }
.slim-taak-tekst { display: grid; gap: .1rem; flex: 1; }
.slim-taak-tekst span { color: var(--zacht); font-size: .95rem; }
.slim-taak-pijl { font-size: 1.6rem; color: var(--accent); }

.venster {
  width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto;
  padding: 1.25rem; border: 1px solid var(--rand); border-radius: 1rem;
  background: var(--achtergrond); color: var(--tekst);
}
.venster::backdrop { background: rgb(0 0 0 / .45); }
.venster form { display: grid; gap: .9rem; }
.venster h2 { margin: 0; font-size: 1.35rem; }
.venster p { margin: 0; }
.venster fieldset { border: 1px solid var(--rand); border-radius: .75rem; padding: .6rem .8rem .8rem; display: grid; gap: .4rem; margin: 0; }
.venster legend { font-weight: bold; padding: 0 .3rem; }
.keuze { display: flex; gap: .6rem; align-items: flex-start; min-height: 2.75rem; padding: .35rem 0; cursor: pointer; }
.keuze input { width: 1.3rem; height: 1.3rem; margin-top: .15rem; flex: none; accent-color: var(--accent); }
.keuze > span { display: grid; }
.keuze .tip { margin: 0; }
.slim-kost { font-weight: bold; }
.fout { color: var(--focus); font-weight: bold; }
.venster-knoppen { justify-content: flex-end; flex-wrap: wrap; }
.venster-knoppen .hoofd { min-width: 8rem; }
@media (max-width: 30rem) {
  .venster { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 1rem 1rem 0 0; }
  .venster { padding-bottom: 0; }
  /* de knoppen blijven onderaan in beeld, Start bovenaan */
  .venster-knoppen {
    flex-direction: column; position: sticky; bottom: 0;
    background: var(--achtergrond); padding: .75rem 0 1rem; border-top: 1px solid var(--rand);
  }
  .venster-knoppen .knop { width: 100%; }
}

/* moeilijke woorden vooraf (Pro) */
.woordenlijst { margin: 0 0 1rem; scroll-margin-top: 1rem; }
.woordenlijst p { margin: 0; }
.woordenlijst-kop { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.woordenlijst-kop h2 { margin: 0; font-size: 1.2rem; }
.woordenlijst-items { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.woordenlijst-items li { display: grid; grid-template-columns: 1fr auto; gap: .15rem .6rem; align-items: start;
  padding: .6rem .75rem; border: 1px solid var(--rand); border-radius: .6rem; background: var(--achtergrond); }
.woordenlijst-items .lijst-woord { font-size: 1.25rem; font-weight: bold; }
.woordenlijst-items .lijst-uitleg, .woordenlijst-items .lijst-voorbeeld { grid-column: 1; }
.woordenlijst-items .lijst-voorbeeld { color: var(--zacht); }
.woordenlijst-items button { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.woord.moeilijk { text-decoration: underline solid var(--accent); text-decoration-thickness: .12em; text-underline-offset: .25em; }
#slim-vraag { font: inherit; width: 100%; padding: .5rem; border: 2px solid var(--rand); border-radius: .5rem;
  background: var(--achtergrond); color: var(--tekst); resize: vertical; }

/* overhoor mij (Pro) */
.overhoor { margin: 0 0 1rem; scroll-margin-top: 1rem; }
.overhoor p { margin: 0; }
.overhoor-blok { display: grid; gap: .6rem; }
.overhoor-vraag { font-size: calc(var(--leesgrootte, 1.5rem) * .9); line-height: 1.5; font-weight: bold; }
.overhoor-antwoord { font: inherit; font-size: 1.15rem; width: 100%; padding: .6rem; border: 2px solid var(--rand);
  border-radius: .5rem; background: var(--achtergrond); color: var(--tekst); resize: vertical; }
.overhoor-oordeel-kop { font-size: 1.4rem; font-weight: bold; }
.overhoor-oordeel[data-oordeel="juist"] { border-left: 6px solid #2e7d32; padding-left: .75rem; }
.overhoor-oordeel[data-oordeel="bijna"] { border-left: 6px solid #f9a825; padding-left: .75rem; }
.overhoor-oordeel[data-oordeel="fout"] { border-left: 6px solid var(--focus); padding-left: .75rem; }
.overhoor-score { font-size: 1.4rem; font-weight: bold; }

/* leer over een foto (Pro, 1.20.0) */
.leer-vak { margin: 0 0 1rem; scroll-margin-top: 1rem; display: grid; gap: .6rem; }
.leer-vak p { margin: 0; }
.leer-knoppen { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(8.5rem, max-content)); }
.leer-foto { display: block; max-width: min(100%, 22rem); max-height: 14rem; object-fit: contain;
  border-radius: .6rem; border: 1px solid var(--rand); background: var(--achtergrond); }
@media (max-width: 30rem) {
  .leer-knoppen { grid-template-columns: 1fr 1fr; }
  .leer-foto { max-height: 11rem; }
}

/* ---------- 1.21.0: zijkolom op een breed scherm, compacter op een gsm ---------- */
.slim-status-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; }
.slim-status-rij p { margin: 0; }
.link-knop {
  font: inherit; color: var(--accent); background: none; border: none; padding: .25rem .1rem;
  min-height: 2.75rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.zij-kolom { display: grid; gap: 1rem; align-content: start; }
.zij-kolom > .paneel { margin: 0; max-width: none; padding-left: 1rem; padding-right: 1rem; }
.zij-kolom .slim { margin-top: 0; }

/* breed scherm: tekst links, hulpmiddelen en slimme hulp rechts (blijven in beeld tijdens het lezen) */
@media (min-width: 68rem) {
  body:not(.leeg) .plek-lezen { max-width: 86rem; }
  body:not(.leeg) .tekst-sectie {
    display: grid; grid-template-columns: minmax(0, 1fr) 25rem; gap: 1.75rem; align-items: start;
  }
  body:not(.leeg) .zij-kolom {
    position: sticky; top: 4rem; max-height: calc(100vh - 5rem - var(--onder-h)); overflow-y: auto;
    padding: 0 .25rem 1rem; scrollbar-width: thin;
  }
  body:not(.leeg) .zij-kolom .onderaan { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 0; }
  body:not(.leeg) .zij-kolom .onderaan .knop-klein { justify-content: flex-start; }
  body:not(.leeg) .zij-kolom .slim-taken { grid-template-columns: 1fr 1fr; gap: .5rem; }
  body:not(.leeg) .zij-kolom .slim-taak { flex-direction: column; align-items: flex-start; min-height: 4.4rem; padding: .5rem .65rem; gap: .25rem; }
  body:not(.leeg) .zij-kolom .slim-taak-tekst > span, body:not(.leeg) .zij-kolom .slim-taak-pijl { display: none; }
  body:not(.leeg) .zij-kolom .slim-taak-tekst strong { font-size: .95rem; line-height: 1.25; }
  body:not(.leeg) .zij-kolom .slim-taak-icoon { font-size: 1.35rem; }
  /* leesbare regellengte, ook met veel ruimte */
  body:not(.leeg) #leesvak { max-width: 62rem; }
}

/* gsm: de slimme hulp als tegels in twee kolommen, hulpmiddelen in een raster */
@media (max-width: 40rem) {
  .slim-taken { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .slim-taak {
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    min-height: 5rem; padding: .6rem .7rem; gap: .3rem;
  }
  .slim-taak-tekst > span, .slim-taak-pijl { display: none; }
  .slim-taak-tekst strong { font-size: .98rem; line-height: 1.25; }
  .slim-taak-icoon { font-size: 1.5rem; }
  body:not(.leeg) .onderaan { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
  body:not(.leeg) .onderaan .knop-klein { justify-content: flex-start; padding: .35rem .6rem; font-size: .95rem; }
}

/* ---------- 1.26.0: knoppen passen altijd (iPhone): tekst loopt nooit uit een knop ---------- */
.knop, .knop-klein { min-width: 0; }
.knop.groot { overflow-wrap: anywhere; }
.pro-label { white-space: nowrap; overflow-wrap: normal; flex: none; }

/* ===================================================================================
   Leerhulp 2.0 (stap 1): vier vaste plekken, nieuw Start-scherm en een vaste speler.
   Ontwerp: docs/ontwerp-nieuwe-look.md en docs/ontwerp/voorstel.html.
   =================================================================================== */

/* ---------- menu: balk onderaan (telefoon), smalle balk links (tablet en computer) ---------- */
.hoofdmenu {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--ui-vlak); border-top: 1px solid var(--ui-lijn);
  padding: .4rem calc(.5rem + env(safe-area-inset-right)) calc(.4rem + env(safe-area-inset-bottom)) calc(.5rem + env(safe-area-inset-left));
}
.hoofdmenu button {
  display: grid; justify-items: center; align-content: center; gap: .2rem;
  min-height: 3.6rem; padding: .2rem 0; border: 0; border-radius: 1rem;
  background: none; color: var(--ui-zacht); font: 500 .78rem/1.2 var(--ui-letter); cursor: pointer;
}
.hoofdmenu .pil { width: 3.75rem; height: 2rem; border-radius: 1rem; display: grid; place-items: center; }
.hoofdmenu button[aria-current="page"] { color: var(--ui-inkt); font-weight: 600; }
.hoofdmenu button[aria-current="page"] .pil { background: var(--ui-merk-zacht); color: var(--ui-merk); }
.hoofdmenu .nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoofdmenu .rail-logo { display: none; }

/* ---------- Start ---------- */
.plek-start { display: grid; gap: .9rem; }
.merk { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: 1.25rem; }
img.logo { display: block; width: 2.25rem; height: 2.25rem; border-radius: .7rem; }
.groet { font-size: 1.65rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; margin: .3rem 0 0; }
.groet:focus { outline: none; }
.groet-sub { margin: -.55rem 0 .1rem; color: var(--ui-zacht); }

.hoofdknop {
  display: flex; align-items: center; gap: 1rem; min-height: 6.25rem; padding: 1.25rem;
  background: var(--ui-merk); color: var(--ui-merk-tekst); border-radius: 1.5rem;
  box-shadow: var(--ui-schaduw); cursor: pointer;
}
.hoofdknop .bol { width: 3.75rem; height: 3.75rem; flex: none; border-radius: 1.125rem; display: grid; place-items: center; background: var(--ui-bol); }
.hoofdknop .bol svg.i { width: 1.9rem; height: 1.9rem; }
.hoofdknop-tekst { display: grid; gap: .1rem; min-width: 0; }
.hoofdknop b { font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
.hoofdknop small { font-size: .9rem; opacity: .9; }
.knop-kies { display: none; }

.tegels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .65rem; }
.tegel {
  display: grid; justify-items: center; align-content: center; gap: .5rem; min-height: 6.1rem;
  padding: .85rem .4rem .75rem; text-align: center; line-height: 1.2;
  background: var(--ui-vlak); color: var(--ui-inkt); border: 1px solid var(--ui-lijn); border-radius: 1.25rem;
  font: 500 .92rem/1.2 var(--ui-letter); cursor: pointer; overflow-wrap: anywhere;
}
.tegel .ic, .prokaart .ic { width: 2.75rem; height: 2.75rem; flex: none; border-radius: .9rem; display: grid; place-items: center; }
.tegel .ic { background: var(--ui-merk-zacht); color: var(--ui-merk); }
/* de bestandskiezers zelf zijn onzichtbaar: hun knop krijgt de focusrand */
.plek-start:has(#camera:focus-visible) .knop-camera,
.plek-start:has(#bestand:focus-visible) .knop-kies,
.plek-start:has(#bestand:focus-visible) .tegel-beeld,
.plek-start:has(#document:focus-visible) label[for="document"] { outline: 3px solid var(--focus); outline-offset: 3px; }
/* computer: "Afbeelding kiezen" is de grote knop, de tegel Afbeelding valt weg */
@media (hover: hover) and (pointer: fine) {
  .knop-kies { display: flex; }
  .tegel-beeld { display: none; }
}
.plek-start .tip, .plek-start .meer-info { color: var(--ui-zacht); margin: 0; }
.plek-start .meer-info summary { padding: .5rem 0; min-height: 2.75rem; }

.sectie-kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.sectie-kop h2 { font-size: 1.05rem; font-weight: 600; margin: 0; }
.sectie-kop .link-knop { color: var(--ui-merk); font-weight: 500; text-decoration: none; }

.verder, .prokaart {
  display: flex; align-items: center; gap: .9rem; width: 100%; padding: .9rem;
  font: inherit; text-align: left; color: var(--ui-inkt); border-radius: 1.25rem; cursor: pointer;
}
.verder { background: var(--ui-vlak); border: 1px solid var(--ui-lijn); }
.miniblad {
  width: 3.5rem; height: 4.4rem; flex: none; display: grid; gap: 4px; align-content: start; padding: 7px 6px;
  background: #fff; border: 1px solid var(--ui-lijn); border-radius: .5rem;
}
.miniblad i { display: block; height: 4px; border-radius: 2px; background: #c9d3dc; }
.miniblad i:first-child { background: #e8702a; width: 70%; height: 5px; }
.miniblad i:nth-child(4) { width: 60%; }
.verder-tekst, .prokaart-tekst { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.verder-tekst b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verder-tekst small, .prokaart-tekst small { color: var(--ui-zacht); font-size: .85rem; }
.speelmini { width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ui-merk); color: var(--ui-merk-tekst); }
.speelmini svg.i { width: 1.25rem; height: 1.25rem; }

/* voortgangsbalk (Verder lezen, speler) */
progress.balk {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; margin: .35rem 0 0;
  border: 0; border-radius: 3px; overflow: hidden; background: var(--ui-vlak-2); color: var(--ui-merk);
}
progress.balk::-webkit-progress-bar { background: var(--ui-vlak-2); }
progress.balk::-webkit-progress-value { background: var(--ui-merk); border-radius: 3px; }
progress.balk::-moz-progress-bar { background: var(--ui-merk); border-radius: 3px; }

.prokaart { background: var(--ui-pro-zacht); border: 0; padding: 1rem; }
.prokaart .ic { width: 3rem; height: 3rem; background: var(--ui-pro); color: var(--ui-vlak); }
.prokaart-tekst b { font-weight: 600; }
.etiket {
  display: inline-flex; align-items: center; margin-left: .3rem; padding: 2px 9px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .02em; vertical-align: 2px; white-space: nowrap;
  background: var(--ui-pro); color: var(--ui-vlak);
}
.privacy { display: flex; align-items: center; gap: .5rem; margin: .2rem 0 0; color: var(--ui-zacht); font-size: .85rem; }
.privacy svg.i { width: 1.15rem; height: 1.15rem; color: var(--ui-groen); }

/* ---------- Lezen: titel bovenaan, tekst, vaste speler onderaan ---------- */
.plek-kop {
  position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: .6rem;
  margin: 0 -1rem; padding: .7rem 1rem .5rem; background: var(--achtergrond);
}
.plek-kop .plek-titel { flex: 1; min-width: 0; margin: 0; font-size: 1.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plek-kop .plek-titel:focus { outline: none; }
.tekst-sectie { margin-top: .25rem; }

.speler {
  position: fixed; left: var(--rail-b); right: 0; bottom: var(--nav-h); z-index: 15;
  background: var(--ui-vlak); color: var(--ui-inkt); border-top: 1px solid var(--ui-lijn);
  padding: .7rem calc(1rem + env(safe-area-inset-right)) .6rem calc(1rem + env(safe-area-inset-left));
  font-family: var(--ui-letter);
}
.speler-binnen { max-width: 40rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; }
.speler-info {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0; min-height: 1.25rem;
  font-size: .85rem; color: var(--ui-zacht); font-variant-numeric: tabular-nums;
}
.speler-rechts { display: inline-flex; align-items: center; gap: .6rem; }
.speler progress.balk { margin: 0; }
.stop-knop {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 2rem; margin: -.4rem 0; padding: 0 .7rem;
  border-radius: 999px; background: var(--ui-vlak-2); color: var(--ui-inkt); font: 600 .85rem var(--ui-letter); text-decoration: none;
}
.stop-knop svg.i { width: 1rem; height: 1rem; }
.bediening { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); align-items: center; gap: .65rem; }
.chip {
  justify-self: start; display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; min-width: 0; min-height: 2.75rem;
  padding: .45rem .75rem; border: 0; border-radius: 999px; background: var(--ui-vlak-2); color: var(--ui-inkt);
  font: 600 .9rem var(--ui-letter); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
select.chip { -webkit-appearance: none; appearance: none; width: auto; text-align: center; }
.chip svg.i { width: 1rem; height: 1rem; }
.stem-chip { justify-self: end; }
#stem-chip-naam { overflow: hidden; text-overflow: ellipsis; }
.speel {
  width: 4.4rem; height: 4.4rem; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--ui-merk); color: var(--ui-merk-tekst); box-shadow: var(--ui-schaduw);
}
.speel svg.i { width: 2.1rem; height: 2.1rem; }
.speel[data-staat="speel"] .ic-pauze, .speel[data-staat="pauze"] .ic-speel { display: none; }
.stap {
  width: 3rem; height: 3rem; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--ui-vlak-2); color: var(--ui-inkt);
}
.speel:disabled, .stap:disabled, .chip:disabled, .stop-knop:disabled { opacity: .45; cursor: not-allowed; }
/* muis: een zacht teken waar je bent (niet op een aanraakscherm, daar blijft :hover hangen) */
@media (hover: hover) {
  .hoofdmenu button:hover .pil { background: var(--ui-vlak-2); }
  .hoofdmenu button[aria-current="page"]:hover .pil { background: var(--ui-merk-zacht); }
  .hoofdknop:hover { filter: brightness(1.07); }
  .tegel:hover, .verder:hover { border-color: var(--ui-merk); }
  .sectie-kop .link-knop:hover { text-decoration: underline; }
  .speel:hover:not(:disabled), .stap:hover:not(:disabled), .chip:hover { filter: brightness(1.06); }
}
@media (max-width: 30rem) {
  .bediening { gap: .5rem; }
  .chip { padding: .45rem .6rem; gap: .3rem; }
}
@media (max-width: 22.5rem) {
  .bediening { gap: .4rem; }
  .speel { width: 3.9rem; height: 3.9rem; }
  .stap { width: 2.75rem; height: 2.75rem; }
  .chip { padding: .45rem .45rem; }
  .chip svg.i { display: none; }
  .hoofdmenu button { font-size: .7rem; }
}

/* nog geen tekst: geen speler, enkel een knop naar Start */
.lees-leeg { display: none; text-align: center; padding: 2rem 1rem; color: var(--zacht); }
body.leeg .lees-leeg { display: block; }
body:has(#bezig:not([hidden])) .lees-leeg { display: none; }
body.leeg #speler, body.leeg .tik-rij, body.leeg #leesvak, body.leeg .onderaan { display: none; }

/* bezig met lezen van een foto of bestand (bovenaan bij Lezen) */
.bezig {
  margin: .5rem 0 1rem; padding: .9rem 1rem; border-radius: 1rem;
  background: var(--ui-vlak); color: var(--ui-inkt); border: 1px solid var(--ui-lijn);
}

/* Mijn teksten en Instellingen: de panelen als kaarten in de stijl van de app */
.plek-teksten .paneel, .plek-instellingen .paneel {
  background: var(--ui-vlak); color: var(--ui-inkt); border-color: var(--ui-lijn); border-radius: 1.25rem;
}
.plek-teksten .tip, .plek-instellingen .tip { color: var(--ui-zacht); }
.plek-teksten .leesmeter, .plek-teksten .teksten-lijst li { background: var(--ui-bg); border-color: var(--ui-lijn); color: var(--ui-inkt); }
.plek-teksten .teksten-lijst .open-tekst { color: var(--ui-inkt); }
.plek-teksten .teksten-lijst .open-tekst:hover { background: var(--ui-vlak-2); }
.plek-teksten .leesmeter-staaf { background: var(--ui-merk); }
.plek-teksten .leesmeter-staaf.leeg { background: var(--ui-lijn); }
.plek-teksten .teksten-lijst .datum, .plek-teksten .leeg-lijst { color: var(--ui-zacht); }

/* meldingen zweven boven het menu en de speler */
.melding-vak { bottom: calc(var(--onder-h) + .75rem); }
.melding-vak:not(:has(.melding:empty)) { background: var(--ui-vlak); color: var(--ui-inkt); border-left-color: var(--ui-merk); }

/* typen op een telefoon: menu en speler even weg, zodat het toetsenbord de tekst niet bedekt */
@media (hover: none) {
  body:has(#tekst:focus, #uitnodiging-link:focus, #overhoor-antwoord:focus) .hoofdmenu,
  body:has(#tekst:focus, #uitnodiging-link:focus, #overhoor-antwoord:focus) .speler { display: none; }
}

/* ---------- tablet en computer: menu als smalle balk links ---------- */
@media (min-width: 48rem) {
  :root { --nav-h: 0rem; --rail-b: 6rem; }
  .hoofdmenu {
    top: 0; right: auto; width: 6rem; display: flex; flex-direction: column; align-items: center; gap: .4rem;
    padding: 1.1rem 0 calc(1rem + env(safe-area-inset-bottom)) env(safe-area-inset-left);
    border-top: 0; border-right: 1px solid var(--ui-lijn);
  }
  .hoofdmenu button { width: 5.25rem; min-height: 4rem; font-size: .8rem; }
  .hoofdmenu .rail-logo { display: block; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem; }
  .speler { padding-bottom: calc(.6rem + env(safe-area-inset-bottom)); }
  .melding-vak { left: calc(var(--rail-b) + 1rem); }
  .plek-start { max-width: 40rem; padding-top: 2rem; }
  .plek-start .merk { display: none; }
  .groet { font-size: 2rem; }
}