/* Borderless — basislaag
 *
 * Twee taken, en niets anders.
 *
 * 1. De oorspronkelijke stylesheet zit vol vaste kleurcodes (#111411, #171b17, #1c211c…).
 *    Zolang die erin staan kan geen enkel thema iets veranderen: je krijgt olijfgroene
 *    kaarten op een marineblauwe achtergrond. Hieronder wordt elke vaste kleur omgezet
 *    naar een token. Dit bestand laadt ná de inline stylesheet, dus bij gelijke
 *    specificiteit wint het.
 *
 * 2. Wat alle drie de ontwerpen delen: typografie, focusringen, beweging. Alles wat
 *    daarna nog per ontwerp verschilt staat in journey.css, premium.css en living.css.
 *
 * Er wordt hier geen enkele selector bedacht die niet al in de applicatie bestaat.
 */

:root {
  --overlay: rgba(3, 6, 16, .82);
  --halo: color-mix(in srgb, var(--muted-2) 22%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root { --halo: rgba(120, 130, 150, .16); }
}

/* ── Fundament ─────────────────────────────────────────────────────────────── */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-feature-settings: "cv05" 1, "ss03" 1;
}

/* De achtergrond is nooit één vlakke kleur: een zeer zachte lichtbron linksboven geeft
   het scherm diepte zonder dat je een verloop als zodanig opmerkt. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 12% -10%, var(--bg-far) 0%, transparent 62%),
    radial-gradient(90% 60% at 100% 0%, var(--accent-quiet) 0%, transparent 55%);
  opacity: .8;
}

h1, h2, .stage-title, .lesson-card h2, .flashcard-word {
  letter-spacing: var(--display-tracking);
  font-weight: var(--display-weight);
}

/* Toetsenbordbediening was nergens zichtbaar. Elke klikbare component krijgt nu dezelfde
   ring — dat is geen versiering maar de enige manier om de app zonder muis te gebruiken. */
:where(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
:where(button, a, input, textarea, select, summary):focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent); color: var(--on-accent); }

* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid transparent; background-clip: content-box; border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); background-clip: content-box; }

/* ── Navigatie en omhulsel ─────────────────────────────────────────────────── */

.sidebar { background: var(--sidebar); border-right-color: var(--line-soft); }

/* De zijbalk — en de lesrail — blijven staan als je scrolt (Rafi, 7 sep: "de balk moet vast
 * blijven zitten, zodat je altijd snel op een ander scherm kunt klikken").
 *
 * index.html zet er al `position: sticky; top: 0` op, en toch scrolde hij mee. De oorzaak:
 * het is een grid-item, en een grid-item rekt standaard mee met zijn rij — dus met de hoogte
 * van de hele pagina ernaast. Een plakkend element dat even hoog is als zijn container heeft
 * geen ruimte om te plakken. `align-self: start` maakt hem los van de rijhoogte en `height:
 * 100vh` maakt hem schermhoog; wordt het scherm lager dan zijn inhoud, dan scrolt hij zelf.
 * Alleen boven 720px: daaronder is hij al een balk bovenaan (index.html, 391), en die plakt. */
@media (min-width: 721px) {
  .app > .sidebar, .lesson-app > .lesson-rail { align-self: start; height: 100vh; overflow-y: auto; }
}

.nav button:hover { color: var(--text); background: var(--elev); }
.nav button.active { color: var(--text); background: var(--elev-strong); }
.brand-mark { box-shadow: var(--shadow-1); }

/* Op telefoonmaat is de zijbalk geen kolom maar een balk bovenaan die blijft staan
 * (`position: sticky` staat in index.html, samen met `--bl-topnav`).
 *
 * Die hoogte moet één getal zijn: de winkel hangt zijn eigen plakkende wegwijzer er met
 * `--bl-topnav` onder, en dat getal kan er maar één zijn. De drie ontwerpen geven de zijbalk
 * elk hun eigen kolommaten — premium 26px padding met knoppen van 34px, journey en living
 * 38px met knoppen van 42px — en dan zou de balk per ontwerp 87px of 119px hoog worden.
 * Vandaar hier één maat voor alle drie: 8 + 44 + 8 + 1px rand = 61px.
 *
 * De selector is expres zwaarder dan die van de ontwerpen (`:root[data-design="…"] .sidebar`),
 * want die staan in bestanden die ná dit bestand geladen worden. Geen !important: het extra
 * `.app >` is genoeg en blijft leesbaar. 44px is bovendien een fatsoenlijk aanraakdoel. */
@media (max-width: 720px) {
  :root[data-design] .app > .sidebar { padding-top: 8px; padding-bottom: 8px; }
  :root[data-design] .app > .sidebar .nav button { min-height: 44px; }

  /* Alleen de pictogrammen, zoals index.html op deze maat al bedoelde met `font-size: 0`.
   * De ontwerplaag zette daar per ongeluk weer een lettergrootte overheen (premium 12,5px),
   * waardoor zes bijschriften naast elkaar breder werden dan het scherm: "Duty Free" viel
   * rechts buiten beeld. Dat viel eerder niet op omdat de balk toch wegscrolde; nu hij blijft
   * staan moet elke knop bereikbaar zijn. Het bijschrift blijft in de toegankelijkheidsboom. */
  :root[data-design] .app > .sidebar .nav button { font-size: 0; padding-left: 0; padding-right: 0; }
  :root[data-design] .app > .sidebar .nav .icon { width: 20px; height: 20px; }
}

.primary-button { background: var(--accent); color: var(--on-accent); border-radius: var(--radius-control); }
.primary-button:hover { background: var(--accent-strong); }
.secondary-button { border-color: var(--line); color: var(--text); border-radius: var(--radius-control); }
.secondary-button:hover { background: var(--elev); border-color: var(--line-strong); }
.danger-button { border-color: var(--bad-line); color: var(--bad); }
.danger-button:hover { background: var(--bad-soft); }
.text-button { color: var(--accent); }

.progress-track { background: var(--track); }
.progress-track span { background: var(--accent); }
.skill-bar { background: var(--track); }
.skill-bar span { background: var(--accent); }
.mastery-track { background: var(--track); }
.mastery-track span { background: var(--accent); }
.summary-focus-bar { background: var(--track); }
.summary-focus-bar span { background: var(--accent); }
.lesson-progress { background: var(--track); }
.lesson-progress span { background: var(--accent); }
.flashcard-progress { background: var(--track); }
.flashcard-progress span { background: var(--accent); }

/* ── Lessen, kaarten en velden ─────────────────────────────────────────────── */

.lesson-row .preview-row-button { border-color: var(--line); color: var(--text); }
.lesson-row .preview-row-button:hover { background: var(--elev); }

.choice { border-color: var(--line); background: transparent; border-radius: var(--radius-control); }
.choice:hover { border-color: var(--line-strong); background: var(--elev); }
.choice.selected { border-color: var(--accent); background: var(--accent-quiet); }
.choice.correct { border-color: var(--good); background: var(--good-soft); }
.choice.incorrect { border-color: var(--bad); background: var(--bad-soft); }

.feedback { background: var(--surface-soft); border-left-color: var(--accent); }
.feedback.good { border-color: var(--good); }
.feedback.bad { border-color: var(--bad); }

.text-answer, .flashcard-answer input, .review-word-card input,
.chat-input textarea, .summary-search, .auth-form input,
.onboard-form input, .onboard-form textarea, .onboard-form select,
.test-item input.text-answer, .test-item textarea.text-answer {
  background: var(--field);
  border-color: var(--line);
  color: var(--text);
}
.text-answer:focus, .flashcard-answer input:focus, .review-word-card input:focus,
.chat-input textarea:focus, .auth-form input:focus { border-color: var(--accent); }
.check-button, .audio-button, .review-word-card button { border-color: var(--line); color: var(--text); }
.check-button:hover, .audio-button:hover, .review-word-card button:hover { background: var(--elev); }
/* De niveauknop in het rollenspel: index.html geeft de hover een vaste donkere kleur
   (#171b17) en die stond hier als enige niet omgezet. Op papier is dat een zwart vlak. */
.level-picker-button:hover { color: var(--text); background: var(--elev); }

.flashcard, .pattern-card, .listening-item, .chat-window, .review-source,
.review-word-card, .summary-focus-card, .personal-summary-box, .summary-pattern,
.storage-card, .conflict-comparison article {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--radius-card);
}
.flashcard-back { border-color: var(--bad-line); }
.review-word-card.personal { border-color: var(--accent); }
.personal-summary-box.attention { border-color: var(--warning-line); }
.personal-summary-box.strong { border-color: var(--good-line); }
.cloud-storage-card { border-color: var(--accent); }

.language-note, .storage-notice, .personal-focus-note, .roleplay-feedback {
  background: var(--surface-soft);
  border-left-color: var(--accent);
}

.bubble { background: var(--surface); border-color: var(--line); }
.bubble.right { background: var(--accent-quiet); border-color: var(--line-strong); }
.message.other { background: var(--elev); }
.message.user { background: var(--accent-quiet); border-color: var(--line-strong); }

.transcript { border-top-color: var(--line-soft); }
.translation-toggle { color: var(--accent); }

.score-ring { background: conic-gradient(var(--accent) 0 0%, var(--track) 0 100%); }
.score-ring:before { background: var(--bg); }
.level-picker-menu button:hover { background: var(--elev-strong); }
.summary-status.attention { border-color: var(--warning-line); color: var(--warning); }
.summary-status.strong { border-color: var(--good-line); color: var(--good); }
.summary-status.learning { color: var(--accent); }
.lesson-summary-number { border-color: var(--line); color: var(--accent); }

.step-item.active { background: var(--elev); color: var(--text); }
.step-item.done .step-number { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lesson-app.preview-mode .step-item:hover { background: var(--elev); color: var(--text); }
.preview-toggle { border-color: var(--line); color: var(--muted); }
.preview-toggle:hover { color: var(--text); background: var(--elev); }
.preview-toggle.active { border-color: var(--warning); color: var(--warning); }
.preview-banner, .summary-preview-banner, .profile-mode {
  border-color: var(--warning-line);
  background: var(--warning-soft);
  color: var(--warning);
  border-radius: var(--radius-control);
}
.preview-label { border-color: var(--warning-line); color: var(--warning); }

/* ── Account, opslag en modals ─────────────────────────────────────────────── */

.account-button:hover, .storage-status-button:hover { background: var(--elev); }
.account-avatar, .account-large-avatar { background: var(--elev-strong); color: var(--accent-strong); }
.cloud-status-dot, .storage-status-dot { background: var(--muted-2); box-shadow: 0 0 0 3px var(--halo); }
.cloud-status-dot.synced, .storage-status-dot.saved { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.cloud-status-dot.syncing, .cloud-status-dot.queued,
.storage-status-dot.saving, .storage-status-dot.fallback { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.cloud-status-dot.error, .cloud-status-dot.conflict, .storage-status-dot.error { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }

.modal-overlay { background: var(--overlay); backdrop-filter: blur(10px) saturate(1.1); }
.cloud-modal, .auth-card, .onboarding-card {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
}
.modal-close { border-color: var(--line); color: var(--muted); }
.modal-close:hover { color: var(--text); background: var(--elev); }
.config-example { background: var(--bg-deep); border-color: var(--line); }
.config-example span { color: var(--muted); font-family: var(--font-mono); }
.cloud-test-badge { border-color: var(--warning-line); color: var(--accent); }
.auth-tabs button.active { border-bottom-color: var(--accent); color: var(--text); }
.auth-message { border-color: var(--line); }
.auth-message.error { border-color: var(--bad-line); color: var(--bad); }
.auth-message.good { border-color: var(--good-line); color: var(--good); }
.onboarding-steps span { background: var(--line); border-radius: var(--radius-pill); }
.onboarding-steps span.done { background: var(--accent); }
.level-picker-menu { background: var(--elev); border-color: var(--line); box-shadow: var(--shadow-2); }
.level-picker-menu button:hover { background: var(--elev-strong); color: var(--text); }
.level-picker-menu button.active { color: var(--accent); }
.toast {
  background: var(--elev);
  border-color: var(--line);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-2);
}
.focus-pill, .adaptive-focus span, .summary-objectives span,
.review-badge, .summary-priority-label, .test-level, .flashcard-round-wrong span {
  border-color: var(--line);
  border-radius: var(--radius-pill);
}
.flashcard-round-wrong span { border-color: var(--bad-line); }
.flashcard-round-score strong.good { color: var(--good); }
.flashcard-round-score strong.bad { color: var(--bad); }
.review-feedback.good { color: var(--good); }
.review-feedback.bad { color: var(--bad); }

/* ─────────────────────────────────────────────────────────────────────────────
 * Beweging
 *
 * De regel: kort, kleine afstand, altijd uitlopend. Wat je opmerkt is de rust waarmee
 * iets tot stilstand komt, niet de beweging zelf. Alles hieronder is uitgeschakeld
 * zodra het systeem om minder beweging vraagt.
 * ───────────────────────────────────────────────────────────────────────────── */

@keyframes bl-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes bl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bl-scale-in { from { opacity: 0; transform: scale(.965); } to { opacity: 1; transform: none; } }
@keyframes bl-shake { 10%, 90% { transform: translate3d(-2px, 0, 0); } 30%, 70% { transform: translate3d(4px, 0, 0); } 50% { transform: translate3d(-5px, 0, 0); } }
@keyframes bl-pop { 40% { transform: scale(1.022); } 100% { transform: none; } }
@keyframes bl-pulse-ring { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes bl-sheen { from { transform: translateX(-120%); } to { transform: translateX(220%); } }

/* Wisselen van dashboardweergave. De inhoud komt op, hij springt niet. */
.dashboard-view.active { animation: bl-rise var(--dur-3) var(--ease-out) both; }

/* Een lesstap wordt volledig opnieuw opgebouwd, dus deze animaties starten vanzelf zodra
   de nieuwe elementen in beeld komen. De trapsgewijze vertraging leest als één beweging
   van boven naar beneden in plaats van vijf losse. */
.lesson-stage > .stage-kicker { animation: bl-rise var(--dur-3) var(--ease-out) both; }
.lesson-stage > .stage-title { animation: bl-rise var(--dur-3) var(--ease-out) .04s both; }
.lesson-stage > .stage-intro { animation: bl-rise var(--dur-3) var(--ease-out) .08s both; }
.lesson-stage > .stage-content { animation: bl-rise var(--dur-3) var(--ease-out) .12s both; }
.lesson-stage > .stage-actions { animation: bl-fade var(--dur-4) var(--ease-out) .2s both; }
.lesson-stage > .preview-banner { animation: bl-fade var(--dur-2) var(--ease-out) both; }

/* Lijsten die na een handeling opnieuw worden opgebouwd. */
.chapter { animation: bl-rise var(--dur-3) var(--ease-out) both; }
.lesson-summary { animation: bl-fade var(--dur-3) var(--ease-out) both; }
.modal-overlay:not(.hidden) { animation: bl-fade var(--dur-2) var(--ease-out) both; }
.modal-overlay:not(.hidden) > * { animation: bl-scale-in var(--dur-3) var(--ease-out) both; }
.auth-card, .onboarding-card { animation: bl-scale-in var(--dur-4) var(--ease-out) both; }

/* Interactie. Een knop die niet meebeweegt voelt kapot; een knop die veel meebeweegt
   voelt goedkoop. Twee pixels is genoeg. */
.primary-button, .secondary-button, .danger-button, .choice, .nav button,
.account-button, .storage-status-button, .audio-button, .check-button,
.preview-row-button, .text-button, .level-picker-button {
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.primary-button:hover, .secondary-button:hover, .danger-button:hover { transform: translateY(-1px); }
.primary-button:active, .secondary-button:active, .danger-button:active,
.choice:active, .nav button:active { transform: translateY(1px) scale(.995); }
.primary-button:hover { box-shadow: 0 6px 20px var(--accent-quiet); }

/* Goed en fout. Het verschil moet voelbaar zijn zonder dat het schreeuwt: een korte
   opzwelling tegenover een kort trillen. */
.choice.correct, .review-word-card input[style*="--good"] { animation: bl-pop var(--dur-3) var(--ease-spring); }
.choice.incorrect { animation: bl-shake var(--dur-3) var(--ease-in-out); }
.feedback.show { animation: bl-rise var(--dur-2) var(--ease-out) both; }
.flashcard-feedback { transition: opacity var(--dur-2) var(--ease-out); }

/* Balken lopen vol in plaats van te verspringen. */
.progress-track span, .skill-bar span, .mastery-track span, .summary-focus-bar span {
  transition: width var(--dur-4) var(--ease-out);
}

/* Toast komt van onderaf op zijn plek. */
.toast { transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-spring); }

/* ── Elk onderdeel komt op zijn eigen manier binnen ────────────────────────────
 *
 * Het soort onderdeel staat op de omhulling (data-stage-type). Woorden schuiven zijwaarts
 * binnen alsof je er langs loopt, grammatica klapt open als een kaart, een gesprek komt
 * bericht voor bericht, en een luisterfragment ademt op. Steeds dezelfde toonhoogte, maar
 * niet dezelfde beweging — daardoor voelt een les niet als één lange pagina.
 */

@keyframes bl-slide-in { from { opacity: 0; transform: translate3d(26px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes bl-card-in { from { opacity: 0; transform: perspective(900px) rotateX(7deg) translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes bl-breathe { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* Woordenschat en herhaling: zijwaarts, als plekken die voorbijkomen. */
[data-stage-type="vocabulary"] .stage-content,
[data-stage-type="recall"] .stage-content,
[data-stage-type="review"] .stage-content { animation: bl-slide-in var(--dur-3) var(--ease-out) .1s both; }

/* Grammatica en patronen: de kaarten kantelen naar je toe, één voor één. */
[data-stage-type="grammar"] .pattern-card { animation: bl-card-in var(--dur-3) var(--ease-out) both; }
[data-stage-type="grammar"] .pattern-card:nth-child(2) { animation-delay: .07s; }
[data-stage-type="grammar"] .pattern-card:nth-child(3) { animation-delay: .14s; }
[data-stage-type="grammar"] .pattern-card:nth-child(4) { animation-delay: .21s; }

/* Gesprekken: bericht na bericht, zoals een gesprek zich opbouwt. */
[data-stage-type="dialogue"] .bubble,
[data-stage-type="roleplay"] .message { animation: bl-rise var(--dur-3) var(--ease-out) both; }
[data-stage-type="dialogue"] .bubble:nth-child(2) { animation-delay: .1s; }
[data-stage-type="dialogue"] .bubble:nth-child(3) { animation-delay: .2s; }
[data-stage-type="dialogue"] .bubble:nth-child(4) { animation-delay: .3s; }
[data-stage-type="dialogue"] .bubble:nth-child(5) { animation-delay: .4s; }
[data-stage-type="dialogue"] .bubble:nth-child(n+6) { animation-delay: .5s; }
.chat-messages .message:last-child { animation: bl-rise var(--dur-2) var(--ease-spring) both; }

/* Oefeningen: van boven naar beneden aangereikt. */
[data-stage-type="exercises"] .exercise-card,
[data-stage-type="checkpoint"] .exercise-card { animation: bl-rise var(--dur-3) var(--ease-out) both; }
[data-stage-type="exercises"] .exercise-card:nth-child(2) { animation-delay: .07s; }
[data-stage-type="exercises"] .exercise-card:nth-child(3) { animation-delay: .14s; }
[data-stage-type="exercises"] .exercise-card:nth-child(n+4) { animation-delay: .2s; }

/* Luisteren: terwijl er geluid speelt beweegt de knop mee. Drie streepjes, geen
   equalizer met twintig balkjes — je moet zien dát er iets speelt, meer niet. */
.audio-button.speaking { border-color: var(--accent); color: var(--accent); }
.audio-button.speaking::before,
.audio-button.speaking::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 11px;
  margin-right: 3px;
  border-radius: 1px;
  background: currentColor;
  transform-origin: center;
  animation: bl-breathe .62s var(--ease-in-out) infinite;
}
.audio-button.speaking::after { margin: 0 0 0 3px; animation-delay: .21s; }

/* ── De kopbalk op een telefoon ───────────────────────────────────────────────
   Gemeten op 360 en 390 pixels breed, alle zes schermen: de kopbalk was het enige dat er
   echt buiten stak. `.topbar` is een flexrij die niet afbreekt, en de rechterkant
   (`.top-meta`) meet 259px — voortgangsknop, mijlen en accountknop naast elkaar. Samen met
   de paginatitel paste dat niet. Hoeveel het overliep hing aan de lengte van de titel: op
   Overzicht ("Goedemorgen, …") 99px, op Leerprofiel 51, op het Paspoort 35, op Lessen 8.

   Dat overlopen is niet alleen een strook leegte naast de pagina. Een telefoon zoomt uit
   tot de inhoud past, dus wordt tegelijk álles kleiner. De twee klachten — "de proporties
   kloppen niet" en "je kunt overal naar links en rechts swipen naar niets" — zijn dezelfde
   fout. Gemeten: bij een opgedragen viewport van 390 rekte de browser hem naar 487.

   De mediaquery in index.html verbergt op deze maat al het niveau, "Voortgang" en "Cloud".
   De mijlenteller kwam er later bij (rewards/mount.js) en viel buiten die regels. In plaats
   van elk nieuw onderdeel apart te verbergen breekt de balk nu af: de titel op de ene regel,
   de knoppen op de volgende. Wat er later bij komt past dan vanzelf.

   Hier en niet in index.html: base.css wordt ná het stijlblok van index.html geladen en wint
   dus bij gelijke specificiteit — dezelfde weg als de plakkende zijbalk. */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 16px 18px; }
  /* De titel krijgt een hele regel, de knoppen de volgende. Niet met alleen `flex-wrap`: dan
     probeert flexbox eerst allebei op één regel te persen, en het linkerblok is op het
     lessenscherm meer dan een titel — het leerpad hangt daar ook zijn inleidende alinea in.
     Die werd zo tot een kolom van anderhalve centimeter geknepen. `100%` maakt de afbreking
     een besluit in plaats van een uitkomst. */
  .topbar > :first-child { flex: 1 1 100%; min-width: 0; }
  /* Zodat één lang woord het overlopen niet alsnog terugbrengt. */
  .topbar h1 { overflow-wrap: anywhere; }
  .top-meta { min-width: 0; flex-wrap: wrap; }

  /* Dezelfde kop, dezelfde behandeling. `.lessons-header`, `.summary-header` en
     `.profile-header` zijn in index.html regel voor regel gelijk; alleen de laatste twee
     klappen op deze maat in. Dat de eerste ernaast viel was te zien: de inleiding werd een
     kolom van een stuk of twintig tekens met de knop ernaast. Het loopt niet buiten het
     scherm, dus een overloopmeting vindt het niet — je moet ernaar kijken. */
  .lessons-header { align-items: flex-start; flex-direction: column; }
  .lessons-header .secondary-button { width: 100%; }

  /* Zelfde soort kop, zelfde reden: een kopje met een alinea links en een etiket rechts. Het
     etiket past, de alinea niet — die kreeg 165 van de 314 pixels en werd zeven regels van
     twintig tekens. Het etiket houdt zijn eigen breedte en gaat eronder staan. */
  .summary-priority-head { flex-direction: column; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}