/* Zelf gehost (geen Google Fonts-aanroep vanuit de browser): DM Sans, voor zowel interfacetekst als
   koppen (rebrand 2026-09-25: geconsolideerd van twee families naar één, "één modern lettertype").
   Alleen de Latin-subset, voldoende voor Nederlands inclusief ë/ï/é. Geen 800-gewicht zelf gehost; koppen
   die eerder Manrope 800 gebruikten vallen terug op DM Sans 700 (de zwaarste beschikbare), wat ook beter
   bij de rustigere, minder drukke uitstraling past. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dmsans-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/dmsans-500.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/dmsans-600.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/dmsans-700.woff2") format("woff2");
}

/* Doelgericht (rebrand 2026-09-25): de oude, eigen namen hieronder blijven bestaan als aliassen naar de
   gedeelde tokens uit tokens.css (geladen vóór dit bestand) — zo hoeven de honderden bestaande
   `var(--ink)`-achtige aanroepen in de rest van dit bestand niet één voor één aangepast te worden, en
   volgen ze automatisch light/dark mode. De radius-, schaduw- en ease-tokens komen al rechtstreeks
   van tokens.css.
   Let op: schrijf in commentaar nooit een sterretje direct gevolgd door een schuine streep (zoals in
   "een token-naam, sterretje, streep, een volgende naam") — die twee tekens samen sluiten een CSS-
   comment ONGEWILD vroegtijdig af, en het hele blok hieronder (--ink t/m --green2) valt dan stil weg,
   zonder foutmelding. Precies dat gebeurde hier eerder (een voorbeeld met --radius en --shadow naast
   elkaar, met zo'n sterretje-streep ertussen): ontdekt op 2026-09-25 doordat elke koptekst in dark
   mode zwart bleek in plaats van licht. */
:root {
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --paper: var(--bg);
  --white: var(--surface);
  --line: var(--border);
  --green: var(--primary);
  --green-dark: var(--primary-hover);
  --green2: var(--primary-soft);
}
/* `--surface` bestond hier eerder óók als eigen, bijna-duplicaat van --paper (#f6f5f0 om precies te
   zijn); die eigen definitie is weg, dus `--surface` komt nu gewoon rechtstreeks van tokens.css. */
* {
  box-sizing: border-box;
}
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible,
.nav-item:focus-visible,
.quiet-button:focus-visible,
.primary:focus-visible,
.text-button:focus-visible,
.icon-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
::selection {
  background: #cfe0d5;
  color: var(--ink);
}
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
button,
input,
select,
textarea,
a {
  min-width: 0;
  max-width: 100%;
}
/* Knoppen en velden krijgen altijd de themakleuren (2026-09-26): zonder dit tekende de browser een
   select, een ingevuld veld of een knop zonder eigen kleur (zoals .ai-option) in donkere modus met
   zwarte tekst op het donkere vlak, een placeholder in vast grijs en een uitgeschakeld antwoordveld
   als lichtgrijs blok. `:where()` houdt de specificiteit op nul: componentregels winnen altijd. */
:where(button, input, select, textarea) {
  color: var(--text-primary);
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  background-color: var(--surface);
}
::placeholder {
  color: var(--placeholder);
  opacity: 1;
}
:where(input, select, textarea):disabled {
  color: var(--text-secondary);
  -webkit-text-fill-color: var(--text-secondary);
  background-color: var(--surface-soft);
  opacity: 1;
}
button,
.quiet-button,
.primary {
  overflow-wrap: anywhere;
  white-space: normal;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
}
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 284px 1fr;
}
.sidebar {
  position: fixed;
  inset: var(--sidebar-inset) auto var(--sidebar-inset) var(--sidebar-inset);
  width: 260px;
  background: var(--sidebar-bg);
  color: var(--text-primary);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--sidebar-radius);
  box-shadow: var(--sidebar-shadow);
  padding: 28px 16px 20px;
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.brand {
  font: 700 26px "DM Sans";
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 10px 32px;
  color: var(--sidebar-brand-ink);
}
.brand-mark {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  /* Het merkteken (illustrations/brand/logo-mark-*.webp) i.p.v. de letter D; de letter blijft in de
     markup als tekstalternatief maar is onzichtbaar. */
  background: url("/illustrations/brand/logo-mark.webp") center / contain no-repeat;
  color: transparent;
  font-size: 0;
}
/* Zijbalk: het boek-met-vlag-logo groot boven de naam, in licht én donker (eigen keuze: één logo,
   geen aparte lichte variant meer). */
.sidebar .brand { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sidebar .brand-mark { width: 170px; height: 135px; }
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-item {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sidebar-text);
  padding: 14px 16px;
  border-radius: 16px;
  text-align: left;
  font: 650 17px "DM Sans";
  cursor: pointer;
  display: flex;
  gap: 14px;
  align-items: center;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.nav-item:hover {
  background: var(--surface-soft);
  color: var(--text-primary);
}
.nav-item:focus-visible {
  box-shadow: var(--focus-ring);
}
.nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-ink);
  border-color: var(--nav-active-border);
  box-shadow: var(--nav-active-glow);
}
.nav-item.active .nav-icon {
  color: var(--sidebar-active-ink);
}
.nav-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-icon svg {
  width: 24px;
  height: 24px;
}
.sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid var(--sidebar-border);
  padding-top: 14px;
}
.profile-mini {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding: 18px 5px 0;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 10px;
  align-items: center;
}
.avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary-hover);
  font-weight: 700;
}
.profile-mini strong { font: 650 16px "DM Sans"; }
.profile-mini strong,
.profile-mini small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-mini small {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 3px;
}
.profile-mini button {
  color: var(--text-secondary);
  background: none;
  border: 0;
}
main {
  grid-column: 2;
  min-width: 0;
}
.topbar {
  height: 88px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}
.breadcrumbs {
  font: 650 28px "DM Sans";
  letter-spacing: -0.5px;
}
.button-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.quiet-button,
.select {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 10px 15px;
  color: var(--text-primary);
  font: 600 14px "DM Sans";
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}
.quiet-button:hover {
  border-color: var(--primary);
  background: var(--surface-soft);
}
.quiet-button:active,
.primary:active {
  transform: translateY(1px);
}
.quiet-button,
.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.icon-button {
  border: 0;
  background: transparent;
  font-size: 20px;
  position: relative;
  cursor: pointer;
  color: var(--text-secondary);
}
.topbar-right { display: flex; align-items: center; gap: 14px; }
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.theme-toggle:hover { background: var(--surface-soft); color: var(--text-primary); }
.theme-toggle svg { width: 20px; height: 20px; }
.menu-toggle {
  display: none;
}
.page {
  display: none;
  padding: 42px 5vw 80px;
  max-width: 1260px;
  margin: auto;
}
.page > *, .page-title > *, .settings-grid > * {
  min-width: 0;
}
.page.active {
  display: block;
}
.page-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 34px;
}
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin: 0 0 9px;
  text-transform: uppercase;
}
h1 {
  font: 700 clamp(30px, 4vw, 44px) "DM Sans";
  margin: 0;
  letter-spacing: -1.7px;
}
h2,
h3 {
  font-family: "DM Sans";
  margin: 0;
}
.subtitle {
  color: var(--muted);
  font-size: 16px;
  margin: 9px 0 0;
}
.label {
  font-size: 11px;
  letter-spacing: 1.3px;
  font-weight: 800;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 7px;
}
.label span {
  width: 7px;
  height: 7px;
  background: var(--accent-peach);
  border-radius: 50%;
}
.primary {
  background: var(--primary);
  border: 0;
  color: var(--surface);
  border-radius: var(--radius-sm);
  padding: 12px 17px;
  font: 700 14px "DM Sans";
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.primary:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow);
}
.text-button {
  border: 0;
  background: none;
  padding: 5px;
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
}
.library-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.library-head p {
  color: var(--muted);
  margin: 5px 0 20px;
}
/*
 * Twaalf herkenbare vak-identiteiten (correctie 2026-09-25: elk vak een eigen kleur+icoon i.p.v. vijf
 * generieke kleuren). `.subj-<key>` zet drie lokale custom properties (tile/icon-achtergrond/icoonkleur,
 * gevoed vanuit tokens.css); zonder die klasse valt alles terug op de neutrale `default`-variant. De
 * klasse staat op `.subject-tile` (hele kaart, zie hieronder) of rechtstreeks op `.subject-dot` (los
 * badge in een koptekst) — `.subject-dot` erft de custom properties dan gewoon van zijn omringende tegel.
 * `.lg` is de grotere variant op een vaktegel; de gewone maat blijft voor koppen in lijsten (Toetsen,
 * Voortgang). Het icoon zelf komt uit `subjectIconSvg` en erft deze kleur via `currentColor`.
 */
.subject-dot, .subject-tile {
  --subj-tile: var(--subj-default-tile);
  --subj-icon-bg: var(--subj-default-icon-bg);
  --subj-icon-ink: var(--subj-default-ink);
}
.subj-aardrijkskunde { --subj-tile: var(--subj-aardrijkskunde-tile); --subj-icon-bg: var(--subj-aardrijkskunde-icon-bg); --subj-icon-ink: var(--subj-aardrijkskunde-ink); }
.subj-biologie { --subj-tile: var(--subj-biologie-tile); --subj-icon-bg: var(--subj-biologie-icon-bg); --subj-icon-ink: var(--subj-biologie-ink); }
.subj-ckv { --subj-tile: var(--subj-ckv-tile); --subj-icon-bg: var(--subj-ckv-icon-bg); --subj-icon-ink: var(--subj-ckv-ink); }
.subj-duits { --subj-tile: var(--subj-duits-tile); --subj-icon-bg: var(--subj-duits-icon-bg); --subj-icon-ink: var(--subj-duits-ink); }
.subj-economie { --subj-tile: var(--subj-economie-tile); --subj-icon-bg: var(--subj-economie-icon-bg); --subj-icon-ink: var(--subj-economie-ink); }
.subj-engels { --subj-tile: var(--subj-engels-tile); --subj-icon-bg: var(--subj-engels-icon-bg); --subj-icon-ink: var(--subj-engels-ink); }
.subj-frans { --subj-tile: var(--subj-frans-tile); --subj-icon-bg: var(--subj-frans-icon-bg); --subj-icon-ink: var(--subj-frans-ink); }
.subj-geschiedenis { --subj-tile: var(--subj-geschiedenis-tile); --subj-icon-bg: var(--subj-geschiedenis-icon-bg); --subj-icon-ink: var(--subj-geschiedenis-ink); }
.subj-wiskunde { --subj-tile: var(--subj-wiskunde-tile); --subj-icon-bg: var(--subj-wiskunde-icon-bg); --subj-icon-ink: var(--subj-wiskunde-ink); }
.subj-natuurkunde { --subj-tile: var(--subj-natuurkunde-tile); --subj-icon-bg: var(--subj-natuurkunde-icon-bg); --subj-icon-ink: var(--subj-natuurkunde-ink); }
.subj-scheikunde { --subj-tile: var(--subj-scheikunde-tile); --subj-icon-bg: var(--subj-scheikunde-icon-bg); --subj-icon-ink: var(--subj-scheikunde-ink); }
.subj-nederlands { --subj-tile: var(--subj-nederlands-tile); --subj-icon-bg: var(--subj-nederlands-icon-bg); --subj-icon-ink: var(--subj-nederlands-ink); }
.subject-dot {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--subj-icon-bg);
  color: var(--subj-icon-ink);
}
.subject-dot svg { width: 20px; height: 20px; }
.subject-dot.lg { width: 56px; height: 56px; border-radius: 16px; }
.subject-dot.lg svg { width: 26px; height: 26px; }
.progress-track {
  height: 6px;
  background: var(--surface-soft);
  border-radius: 4px;
  overflow: hidden;
}
.progress-track i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--green);
  border-radius: 4px;
  /* Was een inline style="width:100%;animation:pulse..." — de CSP (style-src 'self', geen inline-
     uitzondering) blokkeert elk inline style-attribuut stilzwijgend (zelfde bug als eerder gevonden bij
     de vak-illustraties/hero); hier is dat onschuldig want de waarde was toch altijd vast, dus gewoon
     naar deze normale regel verplaatst. */
  animation: pulse 1.4s ease-in-out infinite;
}
.blue {
  background: var(--surface-soft);
}
.search {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  color: var(--text-secondary);
}
.search input {
  border: 0;
  outline: 0;
  margin-left: 5px;
  min-width: 0;
  width: 100%;
  background: transparent;
  color: var(--text-primary);
}
/* Actieknoppen met een icoon ervoor (rebrand 2026-09-25): één consistente maat/afstand voor elk zelf-
   gehost SVG-icoontje in een knop of zoekveld, ongeacht waar het vandaan komt (utilityIconSvg/navIconSvg). */
.btn-icon { display: inline-flex; align-items: center; gap: 7px; }
.btn-icon svg, .search svg { width: 16px; height: 16px; flex-shrink: 0; }
/*
 * Leerstof kiezen: eerst rustig een vak, dan pas de inhoud. De tegels zijn expres groot en gelijkvormig —
 * niets springt eruit qua grootte, alleen het icoon en de kleur verschillen per vak.
 */
.subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.subject-tile {
  /* Herontwerp 2026-09-25 (eigen verzoek: "de iconen voor de vakken kunnen wel weg, de pngs zijn veel
     mooier" — het losse icon-badge is weg, de illustratie zelf draagt nu de vak-identiteit). Zonder
     illustratie (zeldzaam getypt vaknaam, .subject-tile-deco-fallback) blijft de oude, rustige opzet:
     tekst in de gewone tekstkleuren op de zachte kaarttint. Mét illustratie (praktisch alle vakken,
     .has-art) vult de afbeelding de hele kaart en staat de tekst onderin op een donkere overlay, in
     altijd-witte tekst — dat is thema-onafhankelijk correct, want de overlay ligt over een foto/
     illustratie, niet over de kaarttint. position/overflow/z-index zijn voor .subject-tile-art/-deco;
     overflow:hidden snijdt wat buiten de kaartrand steekt netjes af. */
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: var(--subj-tile);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  text-align: left;
  /* Liggend 3:2, zoals de illustraties zelf (1536x1024): zo past het hele motief in de tegel. */
  aspect-ratio: 3 / 2;
  cursor: pointer;
  transition: border-color var(--motion) var(--ease), box-shadow var(--motion) var(--ease), transform var(--motion-fast) var(--ease);
}
.subject-tile.has-art { background: linear-gradient(165deg, var(--subj-tile) 0%, var(--subj-icon-bg) 100%), var(--subj-tile); }
.subject-tile:hover { border-color: var(--primary); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
/* Rechtsboven, dus vaak over de illustratie — een eigen kleine opake ronde achtergrond houdt 'm altijd
   zichtbaar, ongeacht wat eronder staat. Zonder illustratie (fallback) gebruikt 'm de gewone vaktint. */
.subject-tile-chevron { position: absolute; top: 14px; right: 14px; z-index: 1; box-sizing: content-box; width: 18px; height: 18px; padding: 11px; border-radius: 50%; background: var(--tile-arrow-bg); color: var(--tile-arrow-ink); }
.subject-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.subject-tile strong { font: 650 16px "DM Sans"; overflow-wrap: break-word; color: var(--text-primary); }
.subject-tile small { color: var(--text-secondary); font-size: 14px; }
/* Mét illustratie staat de tekst altijd in wit op de donkere overlay hieronder — bewust NIET de
   thema-tokens (die zijn voor tekst op de vlakke kaarttint, niet op een foto/illustratie). */
.subject-tile.has-art .subject-tile-text strong { color: #fff; font: 700 24px/1.15 "DM Sans"; overflow-wrap: break-word; }
.subject-tile.has-art .subject-tile-text small { color: rgba(255, 255, 255, 0.88); font-size: 16px; }
/*
 * Grote illustratie (eigen verzoek 2026-09-25) — vult nu de hele kaart (niet meer 35-60% rechtsonder:
 * zonder het icon-badge is er geen aparte kop-kolom meer om voor vrij te houden). Alleen aanwezig als
 * subjectIllustrationKey() (src/frontend/illustrations.ts) iets teruggeeft (dan krijgt dit element ook
 * de bijpassende `.illustration-subject-<sleutel>`-klasse hieronder én de kaart de `.has-art`-klasse);
 * anders rendert app.js in plaats daarvan het oude, subtiele handgetekende .subject-tile-deco-icoon
 * (nooit allebei tegelijk, en dan ook geen .has-art). De achtergrond komt bewust uit deze vaste
 * klassenlijst, niet uit een inline `style=`-attribuut: dat laatste wordt door de CSP stilzwijgend
 * geblokkeerd (`style-src 'self'`, geen inline uitzondering) — ontdekt 2026-09-25 toen de kaarten
 * zonder illustratie renderden.
 */
.subject-tile-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
}
.subject-tile-art::after {
  /* Verticale schaduw-overlay (van onder-donker naar boven-transparant): de illustratie blijft
     bovenin volledig zichtbaar, onderin — waar de titel/meta staat — is altijd genoeg contrast voor
     witte tekst, ongeacht hoe licht of druk de illustratie daar is. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 14, 12, 0.82) 0%, rgba(8, 14, 12, 0.5) 38%, rgba(8, 14, 12, 0.05) 68%, transparent 100%);
}
.illustration-subject-aardrijkskunde { background-image: url("/illustrations/subjects/aardrijkskunde.webp"); }
.illustration-subject-biologie { background-image: url("/illustrations/subjects/biologie.webp"); }
.illustration-subject-bouwen-wonen-interieur { background-image: url("/illustrations/subjects/bouwen-wonen-interieur.webp"); }
.illustration-subject-burgerschap { background-image: url("/illustrations/subjects/burgerschap.webp"); }
.illustration-subject-ckv { background-image: url("/illustrations/subjects/ckv.webp"); }
.illustration-subject-dienstverlening-producten { background-image: url("/illustrations/subjects/dienstverlening-producten.webp"); }
.illustration-subject-drama { background-image: url("/illustrations/subjects/drama.webp"); }
.illustration-subject-duits { background-image: url("/illustrations/subjects/duits.webp"); }
.illustration-subject-economie { background-image: url("/illustrations/subjects/economie.webp"); }
.illustration-subject-engels { background-image: url("/illustrations/subjects/engels.webp"); }
.illustration-subject-filosofie { background-image: url("/illustrations/subjects/filosofie.webp"); }
.illustration-subject-frans { background-image: url("/illustrations/subjects/frans.webp"); }
.illustration-subject-geschiedenis { background-image: url("/illustrations/subjects/geschiedenis.webp"); }
.illustration-subject-grieks { background-image: url("/illustrations/subjects/grieks.webp"); }
.illustration-subject-groen { background-image: url("/illustrations/subjects/groen.webp"); }
.illustration-subject-horeca-bakkerij-recreatie { background-image: url("/illustrations/subjects/horeca-bakkerij-recreatie.webp"); }
.illustration-subject-informatica { background-image: url("/illustrations/subjects/informatica.webp"); }
.illustration-subject-latijn { background-image: url("/illustrations/subjects/latijn.webp"); }
.illustration-subject-levensbeschouwing { background-image: url("/illustrations/subjects/levensbeschouwing.webp"); }
.illustration-subject-lichamelijke-opvoeding { background-image: url("/illustrations/subjects/lichamelijke-opvoeding.webp"); }
.illustration-subject-maatschappijleer { background-image: url("/illustrations/subjects/maatschappijleer.webp"); }
.illustration-subject-management-organisatie { background-image: url("/illustrations/subjects/management-organisatie.webp"); }
.illustration-subject-maritiem-techniek { background-image: url("/illustrations/subjects/maritiem-techniek.webp"); }
.illustration-subject-media-vormgeving-ict { background-image: url("/illustrations/subjects/media-vormgeving-ict.webp"); }
.illustration-subject-mobiliteit-transport { background-image: url("/illustrations/subjects/mobiliteit-transport.webp"); }
.illustration-subject-muziek { background-image: url("/illustrations/subjects/muziek.webp"); }
.illustration-subject-natuurkunde { background-image: url("/illustrations/subjects/natuurkunde.webp"); }
.illustration-subject-nederlands { background-image: url("/illustrations/subjects/nederlands.webp"); }
.illustration-subject-nlt { background-image: url("/illustrations/subjects/nlt.webp"); }
.illustration-subject-produceren-installeren-energie { background-image: url("/illustrations/subjects/produceren-installeren-energie.webp"); }
.illustration-subject-scheikunde { background-image: url("/illustrations/subjects/scheikunde.webp"); }
.illustration-subject-spaans { background-image: url("/illustrations/subjects/spaans.webp"); }
.illustration-subject-techniek { background-image: url("/illustrations/subjects/techniek.webp"); }
.illustration-subject-tekenen { background-image: url("/illustrations/subjects/tekenen.webp"); }
.illustration-subject-verzorging { background-image: url("/illustrations/subjects/verzorging.webp"); }
.illustration-subject-wiskunde { background-image: url("/illustrations/subjects/wiskunde.webp"); }
.illustration-subject-zorg-welzijn { background-image: url("/illustrations/subjects/zorg-welzijn.webp"); }
/*
 * Groot, zeer subtiel decoratief vakicoon rechtsonder in de kaart (fallback zonder AI-illustratie) —
 * geen tweede betekenisvol icoon, puur sfeer: dezelfde vorm als het badge-icoon (subjectIconSvg), alleen
 * veel groter en bijna onzichtbaar. Negatieve offset + de overflow:hidden hierboven laten het deels
 * "buiten" de kaart steken, netjes afgesneden door de kaartrand. z-index:-1 (binnen de eigen
 * stacking-context van .subject-tile, dankzij position+z-index:0 daar) houdt het altijd achter het
 * echte icoon en de tekst.
 */
.subject-tile-deco {
  position: absolute;
  right: -22px;
  bottom: -22px;
  width: 112px;
  height: 112px;
  z-index: -1;
  opacity: 0.1;
  color: var(--subj-icon-ink);
  pointer-events: none;
}
.subject-tile-deco svg { width: 100%; height: 100%; }
.subject-tile-add .subject-tile-deco { display: none; }
.subject-tile-add {
  background: var(--add-tile-bg);
  box-shadow: none;
  border: 1px dashed var(--add-tile-border);
  color: var(--add-tile-icon);
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.subject-tile-add svg { width: 22px; height: 22px; color: var(--add-tile-icon); }
.subject-tile-add:hover { border-color: var(--primary); background: var(--primary-soft); box-shadow: none; transform: none; }
.subject-tile-add:hover svg { color: var(--primary); }
.subject-tile-add strong { font: 650 14px "DM Sans"; color: var(--add-tile-ink); }
.subject-tile-add:hover strong { color: var(--primary); }
.subject-title {
  display: flex;
  align-items: center;
  gap: 16px;
}
.page-title-quiet { margin-bottom: 32px; }
.page-title-quiet h1 { font-size: clamp(34px, 4vw, 54px); letter-spacing: -1.6px; }
/*
 * Vakdetailpagina (eigen verzoek 2026-09-25, voorbeeldscreenshot "Biologie"): een ruime hero met vak-
 * icoon, titel en een brede illustratie rechts, daaronder per periode een kaart met dezelfde brede
 * illustratie. De brede varianten (`.illustration-subject-wide-<sleutel>`, onderaan dit blok) zijn
 * bewust GEEN hergebruik van de vierkante tegelillustraties: aangevraagd als eigen set (breed en laag,
 * linkerkant leeg voor tekst), zie UI.md. Tot die bestanden er zijn valt alles terug op de effen
 * vaktint (--subj-tile) — geen kapotte afbeelding, gewoon nog zonder plaatje.
 */
.subject-hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 190px;
  padding: 26px 32px;
  margin-bottom: 22px;
  border-radius: 24px;
  background: linear-gradient(105deg, var(--subj-tile, var(--surface)) 0%, var(--subj-icon-bg, transparent) 100%), var(--subj-tile, var(--surface));
  border: 1px solid var(--border);
}
.subject-hero-art {
  position: absolute;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: right center;
  /* De illustraties hebben een ruwe uitgeknipte rand aan de linkerkant: die vloeit hier zacht weg. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 46%, #000 62%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 46%, #000 62%);
}
.subject-hero-art { inset: 0; }
.subject-hero-head { display: flex; align-items: center; gap: 18px; min-width: 0; }
.subject-hero-head h1 { margin: 0; font-size: clamp(28px, 3.2vw, 38px); letter-spacing: -1px; }
.subject-hero-head .subtitle { margin: 6px 0 0; }
@media (max-width: 700px) {
  .subject-hero { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
}
/*
 * Eén rustige kaart per periode. Bij meerdere periodes staat alleen de actuele open (`renderSubjectPeriods`
 * in app.js); de rest is een regel met alleen naam en aantal — pas na een klik komen de knoppen en de
 * lijst zelf tevoorschijn. Zo blijft periode 2, 3, 4 … niet allemaal tegelijk met knoppen op het scherm.
 * (Was `background: white` — bleef wit in dark mode; nu de vaktint uit de tokens.)
 */
.period-block {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--subj-icon-bg, var(--border));
  border-radius: 24px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.period-block h4 {
  font: 700 11px "DM Sans";
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.period-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.period-head-icon { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 13px; background: var(--subj-icon-bg, var(--primary-soft)); color: var(--subj-icon-ink, var(--primary-hover)); }
.period-head-icon svg { width: 22px; height: 22px; }
.period-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.period-head strong { font: 700 13px "DM Sans"; letter-spacing: 0.08em; text-transform: uppercase; color: var(--subj-icon-ink, var(--text-primary)); }
.period-head small { color: var(--text-secondary); font-size: 14px; }
.period-head .chevron { margin-left: auto; box-sizing: content-box; width: 16px; height: 16px; padding: 8px; border-radius: 50%; background: var(--subj-tile, var(--surface-soft)); color: var(--text-secondary); transform: rotate(90deg); transition: transform 0.15s ease; flex-shrink: 0; }
.period-collapsed .period-head .chevron { transform: rotate(0deg); }
.period-collapsed .period-body { display: none; }
.period-block:not(.period-collapsed) .period-head { margin-bottom: 16px; }
/* Deze knoppen zijn de enige acties van een periode en mogen duidelijk uitspringen: een echte
   pil-vorm met rand/achtergrond in plaats van kale tekstlinkjes, met de hoofdactie ("Start met
   leren") als enige gevulde knop. */
.period-heading-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.period-heading-actions .text-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font: 650 14px "DM Sans";
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.period-heading-actions .text-button svg { width: 18px; height: 18px; flex-shrink: 0; }
.period-heading-actions .text-button:hover { border-color: var(--primary); }
.period-heading-actions .period-learn {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--surface);
  font-weight: 700;
}
.period-heading-actions .period-learn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.period-actions .btn-icon svg, .period-actions svg { width: 16px; height: 16px; }
/* Leerstof-rij als eigen kaartje (voorbeeld "Engels"): rand, afronding en ruimte ertussen. */
.material-row {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 10px;
  background: var(--surface);
}
.material-row-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.material-row-icon { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 13px; background: var(--subj-icon-bg, var(--primary-soft)); color: var(--subj-icon-ink, var(--primary-hover)); flex-shrink: 0; }
.material-row-icon svg { width: 22px; height: 22px; }
.material-row-open {
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  padding: 0;
  min-width: 0;
  flex: 1;
  color: inherit;
}
.material-row-open strong { display: block; font: 650 15px "DM Sans"; color: var(--text-primary); }
.material-row-open small { color: var(--text-secondary); font-size: 13px; }
.material-row-open:hover strong { text-decoration: underline; }
.material-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: var(--surface-soft); font: 650 13px "DM Sans"; color: var(--text-secondary); white-space: nowrap; }
.material-status svg { width: 14px; height: 14px; }
.material-status.approved { color: var(--success); background: var(--success-soft); }
.material-status.needs_review { color: var(--warning); background: var(--warning-soft); }
.material-status.failed { color: var(--danger); background: var(--danger-soft); }
.material-row-chevron { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.illustration-subject-wide-aardrijkskunde { background-image: url("/illustrations/subjects-wide/aardrijkskunde.webp"); }
.illustration-subject-wide-biologie { background-image: url("/illustrations/subjects-wide/biologie.webp"); }
.illustration-subject-wide-bouwen-wonen-interieur { background-image: url("/illustrations/subjects-wide/bouwen-wonen-interieur.webp"); }
.illustration-subject-wide-burgerschap { background-image: url("/illustrations/subjects-wide/burgerschap.webp"); }
.illustration-subject-wide-ckv { background-image: url("/illustrations/subjects-wide/ckv.webp"); }
.illustration-subject-wide-dienstverlening-producten { background-image: url("/illustrations/subjects-wide/dienstverlening-producten.webp"); }
.illustration-subject-wide-drama { background-image: url("/illustrations/subjects-wide/drama.webp"); }
.illustration-subject-wide-duits { background-image: url("/illustrations/subjects-wide/duits.webp"); }
.illustration-subject-wide-economie { background-image: url("/illustrations/subjects-wide/economie.webp"); }
.illustration-subject-wide-economie-ondernemen { background-image: url("/illustrations/subjects-wide/economie-ondernemen.webp"); }
.illustration-subject-wide-engels { background-image: url("/illustrations/subjects-wide/engels.webp"); }
.illustration-subject-wide-filosofie { background-image: url("/illustrations/subjects-wide/filosofie.webp"); }
.illustration-subject-wide-frans { background-image: url("/illustrations/subjects-wide/frans.webp"); }
.illustration-subject-wide-geschiedenis { background-image: url("/illustrations/subjects-wide/geschiedenis.webp"); }
.illustration-subject-wide-grieks { background-image: url("/illustrations/subjects-wide/grieks.webp"); }
.illustration-subject-wide-groen { background-image: url("/illustrations/subjects-wide/groen.webp"); }
.illustration-subject-wide-horeca-bakkerij-recreatie { background-image: url("/illustrations/subjects-wide/horeca-bakkerij-recreatie.webp"); }
.illustration-subject-wide-informatica { background-image: url("/illustrations/subjects-wide/informatica.webp"); }
.illustration-subject-wide-latijn { background-image: url("/illustrations/subjects-wide/latijn.webp"); }
.illustration-subject-wide-levensbeschouwing { background-image: url("/illustrations/subjects-wide/levensbeschouwing.webp"); }
.illustration-subject-wide-lichamelijke-opvoeding { background-image: url("/illustrations/subjects-wide/lichamelijke-opvoeding.webp"); }
.illustration-subject-wide-maatschappijleer { background-image: url("/illustrations/subjects-wide/maatschappijleer.webp"); }
.illustration-subject-wide-management-organisatie { background-image: url("/illustrations/subjects-wide/management-organisatie.webp"); }
.illustration-subject-wide-maritiem-techniek { background-image: url("/illustrations/subjects-wide/maritiem-techniek.webp"); }
.illustration-subject-wide-media-vormgeving-ict { background-image: url("/illustrations/subjects-wide/media-vormgeving-ict.webp"); }
.illustration-subject-wide-mobiliteit-transport { background-image: url("/illustrations/subjects-wide/mobiliteit-transport.webp"); }
.illustration-subject-wide-muziek { background-image: url("/illustrations/subjects-wide/muziek.webp"); }
.illustration-subject-wide-natuurkunde { background-image: url("/illustrations/subjects-wide/natuurkunde.webp"); }
.illustration-subject-wide-nederlands { background-image: url("/illustrations/subjects-wide/nederlands.webp"); }
.illustration-subject-wide-nlt { background-image: url("/illustrations/subjects-wide/nlt.webp"); }
.illustration-subject-wide-produceren-installeren-energie { background-image: url("/illustrations/subjects-wide/produceren-installeren-energie.webp"); }
.illustration-subject-wide-scheikunde { background-image: url("/illustrations/subjects-wide/scheikunde.webp"); }
.illustration-subject-wide-spaans { background-image: url("/illustrations/subjects-wide/spaans.webp"); }
.illustration-subject-wide-techniek { background-image: url("/illustrations/subjects-wide/techniek.webp"); }
.illustration-subject-wide-tekenen { background-image: url("/illustrations/subjects-wide/tekenen.webp"); }
.illustration-subject-wide-verzorging { background-image: url("/illustrations/subjects-wide/verzorging.webp"); }
.illustration-subject-wide-wiskunde { background-image: url("/illustrations/subjects-wide/wiskunde.webp"); }
.illustration-subject-wide-zorg-welzijn { background-image: url("/illustrations/subjects-wide/zorg-welzijn.webp"); }
.chip {
  font-size: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.muted-hint { color: var(--muted); font-size: 11px; }
/* Kaartjesbeheer binnen het bewerkscherm van een leerlijst. */
.soft-rule { border: 0; border-top: 1px solid var(--line); margin: 20px 0 14px; }
.vocab-item-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  padding: 6px;
  margin-bottom: 10px;
}
.vocab-item-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
}
.vocab-item-row:hover { background: var(--white); }
.vocab-item-row input { margin-top: 3px; flex: none; }
.vocab-item-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vocab-item-row strong { font: 600 13px "DM Sans"; }
.vocab-item-row small { color: var(--muted); font-size: 12px; }
/* Voortgangspagina (pv-*): egale, dekkende kleuren. Groen = beheersing (grijs → licht → donker),
   blauw = activiteit. Bewust geen rood of oranje: dit is inzicht, geen oordeel. */
.pv {
  --pv-new: #d5dcd3;
  --pv-busy: #8db4a0;
  --pv-nearly: #5c8a73;
  --pv-done: #315b48;
  --pv-activity: #8fb0bf;
  --pv-activity-now: #4f7f93;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.pv > * { min-width: 0; }
.pv-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pv-tile,
.pv-card,
.pv-subject { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; min-width: 0; }
.pv-tile { padding: 20px 22px; }
.pv-tile small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.pv-tile strong { display: block; font: 700 34px "DM Sans"; letter-spacing: -1px; margin: 8px 0 4px; }
.pv-tile strong span { font: 600 14px "DM Sans"; letter-spacing: 0; color: var(--muted); }
.pv-tile p { margin: 0; color: var(--muted); font-size: 12px; }
.pv-grid2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.pv-card { padding: 24px; }
.pv-card h2,
.pv-section-head h2 { font-size: 18px; }
.pv-note { color: var(--muted); font-size: 13px; margin: 6px 0 14px; }
.pv-h3 { font-size: 14px; margin: 22px 0 6px; }
.pv-chart { display: block; width: 100%; height: auto; margin-top: 6px; }
.pv-grid { stroke: var(--line); stroke-width: 1; }
.pv-tick { fill: var(--muted); font: 13px "DM Sans"; }
.pv-value { fill: var(--ink); font: 700 14px "DM Sans"; }
.pv-mark { fill: var(--pv-activity); }
.pv-mark.now,
.pv-col:hover .pv-mark { fill: var(--pv-activity-now); }
.pv-bar { display: flex; gap: 2px; height: 12px; }
/* Leerdagen (2026-10-16): vier weken als kalender, één vakje per dag. Een rustige kleur, geen reeks of norm. */
.pv-h2-next { margin-top: 28px; }
.pv-days-head,
.pv-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; }
.pv-days-head { margin-bottom: 6px; }
.pv-days-head li { text-align: center; color: var(--muted); font-size: 12px; }
.pv-day { position: relative; display: grid; place-items: center; height: 34px; border-radius: 8px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); }
.pv-day--none { background: var(--surface-soft); color: var(--muted); }
.pv-day--some { background: var(--pv-busy); }
.pv-day--more { background: var(--pv-done); color: var(--surface); font-weight: 700; }
.pv-day--future { background: transparent; border: 1px dashed var(--line); color: var(--muted); opacity: .6; }
.pv-day.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.pv-swatch.pv-day--none { background: var(--surface-soft); border: 1px solid var(--line); }
.pv-swatch.pv-day--some { background: var(--pv-busy); }
.pv-swatch.pv-day--more { background: var(--pv-done); }
.pv-days-legend { margin-top: 10px; }
.pv-seg { display: block; min-width: 6px; border-radius: 4px; }
.pv-seg.lv-new,
.pv-swatch.lv-new { background: var(--pv-new); }
.pv-seg.lv-busy,
.pv-swatch.lv-busy,
.pv-meter i.lv-busy { background: var(--pv-busy); }
.pv-seg.lv-nearly,
.pv-swatch.lv-nearly,
.pv-meter i.lv-nearly { background: var(--pv-nearly); }
.pv-seg.lv-done,
.pv-swatch.lv-done,
.pv-meter i.lv-done { background: var(--pv-done); }
.pv-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 10px 0 0; padding: 0; font-size: 12px; color: var(--muted); }
.pv-legend li { display: flex; align-items: center; gap: 6px; }
.pv-legend b { color: var(--ink); }
.pv-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pv-meter { height: 6px; background: var(--surface-soft); border-radius: 4px; overflow: hidden; margin-top: 7px; }
.pv-meter i { display: block; height: 100%; border-radius: 4px; }
.pv-goal-list { list-style: none; margin: 0; padding: 0; }
.pv-goal { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 0; border-top: 1px solid var(--line); }
.pv-goal:first-child { border-top: 0; }
.pv-goal p { margin: 0; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.pv-goal small { display: block; color: var(--muted); font-size: 11px; }
.pv-phase-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; vertical-align: middle; }
.pv-glyph { font-size: 15px; line-height: 1.3; color: var(--pv-done); }
.pv-goal.lv-new .pv-glyph { color: #9aa39c; }
.pv-goal.lv-busy .pv-glyph { color: #5f8f77; }
.pv-goal.lv-nearly .pv-glyph { color: #4a7a62; }
/* Groei van de laatste week: rustig groen labeltje, geen badge of beloning. */
.pv-gain { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 8px; background: var(--surface-soft); color: var(--green); font-size: 11px; font-weight: 700; white-space: nowrap; }
.pv-goal-value { text-align: right; min-width: 58px; }
.pv-goal-value b { display: block; font: 700 14px "DM Sans"; }
.pv-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.pv-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-filter { font: 600 12px "DM Sans"; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 6px 13px; cursor: pointer; color: var(--ink); }
.pv-filter:hover { border-color: var(--green); color: var(--green); }
.pv-filter.active { background: var(--green); border-color: var(--green); color: var(--on-primary); }
.pv-subjects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.pv-subject { padding: 22px; }
.pv-subject[hidden] { display: none; }
.pv-subject header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pv-subject header h3 { font-size: 18px; min-width: 0; overflow-wrap: anywhere; }
.pv-blocks { display: grid; gap: 18px; }
.pv-block h4 { margin: 0 0 8px; font: 700 13px "DM Sans"; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pv-block h4 small { font: 500 12px "DM Sans"; color: var(--muted); }
.pv-dir + .pv-dir { margin-top: 12px; }
.pv-dir-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 8px; font-size: 12px; margin-bottom: 5px; }
.pv-dir-head small { color: var(--muted); }
.pv-test { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.pv-test strong { font: 700 24px "DM Sans"; }
.pv-test span { color: var(--muted); font-size: 12px; }
.pv-spark { width: 140px; height: 44px; margin-left: auto; align-self: center; }
.pv-spark path { fill: none; stroke: var(--pv-done); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv-spark circle { fill: var(--pv-done); stroke: white; stroke-width: 2; }
.pv-goals { margin-top: 18px; border-top: 1px solid var(--line); }
.pv-goals summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer; padding: 13px 0 9px; font: 700 13px "DM Sans"; list-style: none; }
.pv-goals summary::-webkit-details-marker { display: none; }
.pv-goals summary small { margin-left: auto; font: 500 12px "DM Sans"; color: var(--muted); }
.pv-goals summary::after { content: "▾"; color: var(--muted); }
.pv-goals[open] summary::after { transform: rotate(180deg); }
.pv-period h5 { display: flex; justify-content: space-between; gap: 8px; margin: 12px 0 2px; font: 700 12px "DM Sans"; color: var(--green-dark); }
.pv-period h5 small { font: 500 11px "DM Sans"; color: var(--muted); }
.pv-nogoals { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.pv-idle { margin: 0; }
@media (max-width: 1000px) {
  .pv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-grid2,
  .pv-subjects { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .pv-tiles { grid-template-columns: minmax(0, 1fr); }
  .pv-card,
  .pv-subject { padding: 18px; }
}
.insight-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 25px;
  display: flex;
  gap: 15px;
}
.insight-card > span {
  width: 38px;
  height: 38px;
  background: var(--green2);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.insight-card small {
  letter-spacing: 1px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.insight-card strong {
  display: block;
  margin: 5px 0;
}
.insight-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.settings-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 27px;
  transition: box-shadow 0.2s var(--ease);
}
.settings-card:hover {
  box-shadow: var(--shadow);
}
.settings-card h2 {
  margin-bottom: 25px;
}
.settings-card > button {
  width: 100%;
  margin-top: 9px;
}
.settings-card label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-top: 20px;
}
.settings-card select {
  display: block;
  width: 100%;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 8px;
}
.plan-usage { list-style: none; margin: 16px 0 20px; padding: 0; }
.plan-usage li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.plan-usage li:last-child { border-bottom: 0; }
.plan-usage small { color: var(--muted); font-size: 12px; font-weight: 600; }
.plan-usage .plan-full small { color: var(--warning); }
#coachStatus { padding: 0 18px; }
#coachStatus:empty { display: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.method-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--warning);
  background: var(--warning-soft);
  border-radius: 20px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}
.form-hint { color: var(--muted); font-size: 12px; margin: -6px 0 4px; }
/* Waarschuwingen van de analyse in "Controleer de analyse", zoals een vermoedelijke fout in de bron (2026-10-05). */
.review-warnings { background: var(--warning-soft); border: 1px solid var(--warning); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; font-size: 14px; }
.review-warnings ul { margin: 6px 0 0; padding-left: 20px; }
.vocab-direction-picker {
  display: block;
  margin: 18px 0 4px;
  font: 600 13px "DM Sans";
}
.vocab-direction-picker select { width: 100%; margin-top: 6px; }
.ai-option-primary {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
}
.tutor-thread {
  max-height: 46vh;
  overflow-y: auto;
  margin: 16px 0;
  padding-right: 4px;
}
.tutor-empty { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.tutor-turn { margin-bottom: 16px; }
.tutor-question {
  font-weight: 600;
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px 12px 12px 3px;
  padding: 10px 13px;
  margin: 0 0 8px;
}
.tutor-answer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px 12px 3px 12px;
  padding: 12px 14px;
}
.tutor-answer p { margin: 0; font-size: 14px; line-height: 1.55; }
.tutor-hint-label {
  display: inline-block;
  font: 700 11px "DM Sans";
  letter-spacing: 0.04em;
  color: var(--primary-hover);
  background: var(--primary-soft);
  border-radius: 20px;
  padding: 2px 8px;
  margin-bottom: 7px;
}
.tutor-sources { display: block; margin-top: 9px; color: var(--muted); font-size: 11px; }
.tutor-suggestion { margin: 0 6px 6px 0; text-align: left; }
#materialTutorInput { width: 100%; min-height: 72px; resize: vertical; }
@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
.toggle-line {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}
.toggle-line small {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  margin-top: 4px;
}
.toggle-line {
  position: relative;
}
/* Visueel verborgen maar bedienbaar met toetsenbord en schermlezer (spatie wisselt); de focus is zichtbaar op het schuifje. */
.toggle-line input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.toggle-line input:focus-visible + i {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}
.toggle-line i {
  /* Niet laten krimpen naast een langere uitlegregel (anders verdwijnt het bolletje). */
  flex: none;
  margin-left: 16px;
  width: 40px;
  height: 23px;
  border-radius: 20px;
  background: var(--border-strong);
  position: relative;
}
.toggle-line i:after {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  background: var(--surface);
  left: 3px;
  top: 3px;
  border-radius: 50%;
  transition: 0.2s;
}
.toggle-line input:checked + i {
  background: var(--green);
}
.toggle-line input:checked + i:after {
  left: 20px;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  /* Rustig leren vraagt om een echte scheiding: de pagina eronder mag niet
     meelezen. Donkerder en zwaarder wazig dan een standaard dimlaag. */
  background: #16211c;
  z-index: 50;
  display: none;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-backdrop.open {
  display: grid;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to { opacity: 1; transform: none; }
}
.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: min(520px, 100%);
  max-height: 90vh;
  overflow: auto;
  overflow-x: hidden;
  min-width: 0;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
  animation: modal-in 0.18s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .modal { animation: none; }
  /* Correctie 2026-09-25: hover-lift (translateY) is decoratief, geen bounce/zoom/glow — voor wie dat
     liever niet ziet bewegen, hier in één keer voor alle hover-transities uitgezet (bestaand, hergebruikt
     blok, niet gedupliceerd). */
  .subject-tile, .subject-tile-add, .theme-toggle, .nav-item, .quiet-button, .primary {
    transition: none;
  }
  .subject-tile:hover { transform: none; }
}
.modal h2 {
  font-size: 23px;
}
.modal > p {
  color: var(--muted);
}
.modal label {
  font-weight: 700;
  font-size: 12px;
  display: block;
  margin: 15px 0 6px;
}
.modal input,
.modal select,
.modal textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  padding: 11px;
  font: inherit;
}
.modal textarea {
  min-height: 85px;
  resize: vertical;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 23px;
  flex-wrap: wrap;
  align-items: stretch;
}
.modal-actions > * {
  min-width: 0;
  max-width: 100%;
}
.ai-options {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 20px;
}
.ai-option {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.ai-option small,
.modal code { overflow-wrap: anywhere; word-break: break-word; }
.ai-option > button,
.ai-option > .quiet-button,
.ai-option > .primary {
  margin: 9px 6px 0 0;
}
.ai-option:hover {
  border-color: var(--green);
  box-shadow: 0 4px 14px rgba(30, 43, 37, 0.08);
}
.toast {
  position: fixed;
  right: 25px;
  bottom: 25px;
  background: #203a30;
  color: white;
  border-radius: 10px;
  padding: 13px 18px;
  z-index: 100;
  transform: translateY(80px);
  opacity: 0;
  transition: 0.3s;
  /* Een melding is alleen tekst; onzichtbaar lag hij anders over de onderste navigatie op de telefoon. */
  pointer-events: none;
}
.toast.show {
  transform: none;
  opacity: 1;
}
@media (max-width: 1000px) {
  .app-shell {
    grid-template-columns: 80px 1fr;
  }
  .sidebar {
    width: 80px;
    padding: 30px 12px;
  }
  .brand span,
  .nav-item:not(.active) {
    font-size: 0;
  }
  .brand {
    padding: 0 12px 35px;
  }
  .sidebar .brand-mark {
    width: 44px;
    height: 44px;
  }
  .nav-item {
    justify-content: center;
  }
  .profile-mini > div:not(.avatar),
  .profile-mini button {
    display: none;
  }
  main {
    grid-column: 2;
  }
}
@media (max-width: 680px) {
  .app-shell {
    display: block;
  }
  .sidebar {
    transform: translateX(-100%);
    width: 232px;
    transition: 0.25s;
  }
  .sidebar.open {
    transform: none;
  }
  .brand span,
  .nav-item:not(.active) {
    font-size: 14px;
  }
  .nav-item {
    justify-content: flex-start;
  }
  main {
    display: block;
  }
  .topbar {
    padding: 0 18px;
    height: 65px;
  }
  .menu-toggle {
    display: block;
  }
  .page {
    padding: 28px 18px 70px;
  }
  .page-title {
    display: block;
  }
  .page-title > .primary, .page-title > .button-row {
    margin-top: 20px;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .library-head {
    display: block;
  }
  .search {
    margin-top: 10px;
  }
  .button-row {
    flex-wrap: wrap;
    width: 100%;
  }
  .button-row > * {
    flex: 1 1 160px;
  }
  .modal {
    padding: 22px;
    width: 100%;
    max-height: calc(100dvh - 16px);
  }
  .modal-backdrop { padding: 8px; align-items: center; }
}

@media (max-width: 420px) {
  body { font-size: 14px; }
  .topbar { padding: 0 12px; gap: 8px; }
  .breadcrumbs { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page { padding: 24px 12px 74px; }
  h1 { font-size: 30px; letter-spacing: -1px; overflow-wrap: anywhere; }
  .settings-card, .insight-card { padding: 18px; }
  .modal-actions, .button-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .modal-actions > *, .button-row > * { width: 100%; flex: none; text-align: center; }
  .modal-backdrop { padding: 0; place-items: stretch; }
  .modal { width: 100%; max-height: 100dvh; min-height: 100dvh; border-radius: 0; padding: 18px 14px calc(22px + env(safe-area-inset-bottom)); }
  .modal h2 { font-size: 21px; }
  .ai-option > button,
  .ai-option > .quiet-button,
  .ai-option > .primary { width: 100%; margin-right: 0; }
  .subject-dot { width: 34px; height: 34px; }
  .subject-dot svg { width: 18px; height: 18px; }
  .subject-dot.lg { width: 50px; height: 50px; }
  .subject-dot.lg svg { width: 26px; height: 26px; }
  .subject-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .toast { left: 12px; right: 12px; bottom: 12px; text-align: center; overflow-wrap: anywhere; }
  .global-status { width: calc(100vw - 24px); justify-content: center; text-align: center; }
}

.global-status {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: #203a30;
  color: white;
  border-radius: 999px;
  padding: 9px 14px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
}
.global-status[hidden] { display: none; }
.status-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #8fa79a;
  border-top-color: white;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.ui-state {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 17px;
}
.ui-state > span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green2);
  font-weight: 800;
}
.ui-state p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.ui-state.error { border-color: var(--danger); background: var(--surface); }
.ui-state.error > span { background: var(--danger-soft); color: var(--danger); }
.ui-state.loading > span { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Leerstofbeheer: meerdere foto's van dezelfde bron als één geheel tonen/beheren. */
.page-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.page-thumb {
  position: relative;
  display: block;
  border: 1px solid var(--line, #e2e5e2);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--surface-soft);
}
.page-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-thumb-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: #203a30;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.page-thumb-remove:hover { background: var(--danger); }
/* Visuele leerlaag (eigen verzoek 2026-09-24): klein, alleen-lezen badge met het aantal herkende
   visuele elementen (diagrammen/kaarten/tabellen/...) op deze pagina — fase 1, nog geen bewerk-UI. */
.page-thumb-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(49, 91, 72, 0.88);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
/* Visuele leerlaag, fase 4 (eigen verzoek 2026-09-24): korte, alleen-lezen strook met de goedgekeurde
   visuele elementen uit dit materiaal op de materiaal-detailpagina; leeg (geen `:empty`-uitzondering
   nodig, `app.js` vult 'm alleen bij bruikbare visuals) totdat er iets te tonen is. */
.material-visuals-strip:empty { display: none; }
.material-visuals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.material-visual-thumb { display: block; border: 1px solid var(--line, #e2e5e2); border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-soft); }
.material-visual-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Vanaf telefoon uploaden via QR-code (§ pagina-beheerder): de QR-code zelf, in de modal op de computer. */
.phone-qr { display: grid; place-items: center; background: var(--surface); border-radius: 14px; padding: 18px; margin: 16px 0; }
.phone-qr svg { width: 200px; height: 200px; }
.phone-qr-meta { color: var(--text-secondary); word-break: break-all; }
.phone-count { font-weight: 700; margin: 4px 0 0; }
/* Live weergave zodra de telefoon de link heeft geopend (2026-09-26): de QR-code maakt plaats voor de
   binnenkomende foto's; een nieuw binnengekomen foto krijgt kort een messing rand. */
.phone-live-status { color: var(--text-secondary); margin: 6px 0 0; }
.phone-live-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); max-height: min(52vh, 460px); overflow-y: auto; }
.phone-live-grid:empty { display: none; }
.phone-live-new { border-color: var(--brass); box-shadow: 0 0 0 2px var(--brass); animation: phone-live-arrive 2.4s ease-out forwards; }
@keyframes phone-live-arrive { 0% { transform: scale(0.94); } 12% { transform: scale(1); } 100% { box-shadow: 0 0 0 0 var(--brass); border-color: var(--border); } }
@media (prefers-reduced-motion: reduce) { .phone-live-new { animation: none; box-shadow: none; } }
/* Drie manieren om een pagina toe te voegen: duidelijke, gelijke vierkante knoppen in plaats van een
   rij tekstknoppen, zodat je in één oogopslag ziet wat elke optie doet. */
.upload-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.upload-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 1 / 1;
  padding: 10px 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 13px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.upload-option:hover { border-color: var(--primary); background: var(--surface-soft); }
.upload-option-icon { display: flex; justify-content: center; color: var(--primary); }
.upload-option-icon svg { width: 28px; height: 28px; }
.upload-option span:last-child { font: 700 12.5px "DM Sans"; color: var(--text-primary); line-height: 1.3; }
@media (max-width: 420px) {
  .upload-option { padding: 8px 4px; gap: 6px; }
  .upload-option-icon svg { width: 22px; height: 22px; }
  .upload-option span:last-child { font-size: 11.5px; }
}

/* Vak kiezen bij lesstof toevoegen: een eigen vak typen en meteen toevoegen, naast de tegels. */
.upload-subject-new-form { display: flex; align-items: flex-end; gap: 10px; margin: 4px 0 0; }
.upload-subject-new-form label { flex: 1; margin: 0; }
.upload-subject-new-form button { flex: none; }
.upload-option:disabled { opacity: 0.6; cursor: progress; }

/* Slim leren: één vraag tegelijk, getypt antwoord, direct nagekeken (§19-21). */
.vocab-session { text-align: center; }
.vocab-session .vocab-prompt {
  font: 700 clamp(26px, 5vw, 38px) "DM Sans";
  margin: 18px 0 10px;
  word-break: break-word;
}
.vocab-session input[type="text"] {
  font-size: 18px;
  text-align: center;
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  width: 100%;
}
.vocab-session .vocab-feedback {
  margin: 14px 0 4px;
  font-weight: 700;
  font-size: 16px;
}
.vocab-session .vocab-feedback.correct { color: var(--green); }
.vocab-session .vocab-feedback.typo { color: var(--warning); }
.vocab-session .vocab-feedback.incorrect { color: var(--danger); }
/* Fout beantwoord: jouw antwoord en het juiste antwoord onder elkaar, elk met
   een label. Het juiste antwoord krijgt het meeste gewicht — dat is wat je
   moet onthouden. */
.vocab-answer-compare {
  display: grid;
  gap: 8px;
  margin: 12px auto 4px;
  max-width: 420px;
  text-align: left;
}
.vocab-answer-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.vocab-answer-label {
  font: 700 11px "DM Sans";
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.vocab-answer-value {
  font-size: 15px;
  overflow-wrap: anywhere;
}
.vocab-answer-row.given .vocab-answer-value { color: var(--danger); }
.vocab-answer-row.correct {
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
  background: var(--green2);
}
.vocab-answer-row.correct .vocab-answer-label { color: var(--green); }
.vocab-answer-row.correct .vocab-answer-value {
  font-weight: 700;
  color: var(--primary-hover);
}
.vocab-progress-bar {
  height: 6px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
  margin: 4px 0 22px;
}
.vocab-progress-bar > i {
  display: block;
  height: 100%;
  background: var(--green);
  transition: width 0.2s var(--ease);
}
.vocab-progress-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 14px 0;
}
.vocab-progress-stats > div {
  padding: 14px 10px;
  border-right: 1px solid var(--line);
}
.vocab-progress-stats > div:last-child { border: 0; }
.vocab-progress-stats span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.vocab-progress-stats strong { display: block; font: 700 18px "DM Sans"; }
.paper-result-list { display: grid; gap: 8px; margin: 14px 0; max-height: 50vh; overflow-y: auto; }
.paper-result-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.paper-result-row button {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.paper-result-row button.selected.correct { background: var(--green); color: var(--on-primary); border-color: var(--green); }
.paper-result-row button.selected.wrong { background: var(--danger); color: var(--on-primary); border-color: var(--danger); }
.item-manage-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.item-manage-row input { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; }

/* Terugknop bovenaan een sub-scherm: helpt bij "hoe kwam ik hier terug". */
.back-link {
  display: inline-block;
  margin-bottom: 10px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.back-link:hover { color: var(--green); }

.item-manage-head {
  border-bottom: none;
  padding-bottom: 0;
  color: var(--muted);
}
.item-manage-head small {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---- Leerstof: selecteren en toets genereren ---- */
.material-pick-box {
  display: grid;
  place-items: center;
  width: 26px;
  cursor: pointer;
}
.material-pick-box input { width: 17px; height: 17px; accent-color: var(--green); cursor: pointer; }
.material-pick-spacer { width: 26px; }
.material-row-main { align-items: center; }
.period-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
  padding: 12px 14px;
  background: var(--green2);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
}
.period-actions[hidden] { display: none; }
/* Een label of veld met het hidden-attribuut in een venster moet echt verdwijnen (anders wint `display` van hidden). */
.modal [hidden] { display: none; }
.period-selected { font: 600 13px "DM Sans"; color: var(--green); margin-right: auto; }
.chosen-materials {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 14px 0;
}
.chosen-materials strong { font: 700 13px "DM Sans"; }
.chosen-materials ul { margin: 8px 0 0; padding-left: 18px; }
.chosen-materials li { font-size: 13px; margin-bottom: 3px; }
.practice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* ---- Overhoren op een eigen pagina ---- */
.vocab-session {
  max-width: 640px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
}
.vocab-session-top { margin-bottom: 26px; }
.vocab-session .vocab-prompt {
  font: 700 clamp(24px, 4vw, 36px) "DM Sans";
  line-height: 1.25;
  margin: 26px 0 30px;
}
.vocab-session input[type="text"] {
  width: 100%;
  font-size: 18px;
  padding: 15px 17px;
  text-align: center;
  border: 2px solid var(--border-strong);
  border-radius: 12px;
}
.vocab-session-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.vocab-session-done h2 { font-size: 26px; margin-bottom: 10px; }
/* Grammatica oefenen (§ vanaf telefoon-uploaden-sessie hierboven is dit niet, apart onderdeel): regeluitleg
   en de vier oplopende oefenvormen binnen dezelfde .vocab-session-kaart. */
.grammar-explanation { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 4px 0 0; text-align: left; }
.vocab-session textarea {
  width: 100%;
  font-size: 16px;
  padding: 13px 15px;
  border: 2px solid var(--border-strong);
  border-radius: 12px;
  font-family: inherit;
  resize: vertical;
}
.vocab-session .grammar-option {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}
.vocab-session .grammar-option.selected { border-color: var(--green); background: var(--primary-soft); font-weight: 700; }
/* Mini-check van een leerblok: het gekozen antwoord moet in licht en donker duidelijk opvallen,
   ook na de hover-stijl van .quiet-button (die de achtergrond anders overschrijft). */
.block-option.selected,
.block-option.selected:hover {
  border-color: var(--green);
  background: var(--primary-soft);
  box-shadow: 0 0 0 1px var(--green) inset;
  color: var(--text-primary);
}
.block-option.selected::before { content: "✓"; margin-right: 8px; color: var(--green); font-weight: 700; }

@media (max-width: 680px) {
  .vocab-session { padding: 26px 18px; }
  .period-actions > button { width: 100%; }
  .period-selected { width: 100%; margin-bottom: 4px; }
}

/* Voorlezen bij het overhoren. */
.vocab-speech {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: -6px 0 16px;
}
.vocab-speech .quiet-button { padding: 7px 13px; font-size: 13px; }
.vocab-autoread {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

/* Leerdoelen per periode. */
.period-block h4 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
/* Eén tekstvlak: de leerdoelen komen uit de studiewijzer, regel voor regel. */
.goal-text textarea {
  font: 400 14px "DM Sans";
  line-height: 1.6;
  min-height: 200px;
}

/* Leerdoelen bovenaan een periode (2026-09-28): een eigen kaart met de leerdoelen zelf, niet alleen een knop. Egaal
   vlak in de vaktint, zoals de rest van de periode; UI.md "Leerdoelen bovenaan een periode". */
.goal-panel {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.goal-panel-empty { border-style: dashed; border-color: var(--border-strong); }
.goal-panel-head { display: flex; align-items: flex-start; gap: 14px; }
.goal-panel-icon { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 13px; background: var(--subj-icon-bg, var(--primary-soft)); color: var(--subj-icon-ink, var(--primary-hover)); flex-shrink: 0; }
.goal-panel-icon svg { width: 22px; height: 22px; }
.goal-panel-title { flex: 1; min-width: 0; }
.goal-panel-title h3 { margin: 0 0 2px; font: 700 17px "DM Sans"; color: var(--text-primary); }
.goal-panel-title p { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.goal-panel-edit { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.goal-panel-edit svg { width: 16px; height: 16px; }
.goal-panel-actions { margin-top: 14px; padding-left: 58px; }
.goal-panel-list { list-style: none; counter-reset: goal; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.goal-panel-list li {
  counter-increment: goal;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--subj-tile, var(--surface-soft));
}
.goal-panel-list li::before {
  content: counter(goal);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--subj-icon-ink, var(--text-secondary));
  font: 700 12px "DM Sans";
}
.goal-panel-text { flex: 1; min-width: 0; color: var(--text-primary); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.goal-panel-mastery { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--surface); color: var(--text-secondary); font: 650 12px "DM Sans"; }
.goal-panel-mastery svg { width: 12px; height: 12px; }
.goal-panel-mastery.done { background: var(--success-soft); color: var(--success); }
.goal-panel-warn { flex-shrink: 0; display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--warning-soft); color: var(--warning); cursor: pointer; }
.goal-panel-warn svg { width: 15px; height: 15px; }
.goal-panel-warn:hover, .goal-panel-warn:focus-visible { background: var(--warning); color: var(--on-primary); }
.goal-panel-more { margin-top: 8px; padding: 4px 0; border: 0; background: none; color: var(--primary); font: 650 14px "DM Sans"; cursor: pointer; }
.goal-panel-more:hover { text-decoration: underline; }
.goal-panel-sheet, .goal-panel-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.goal-panel-sheet svg, .goal-panel-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--subj-icon-ink, var(--primary)); }
.goal-panel-empty .goal-panel-sheet { padding-left: 58px; }
@media (max-width: 560px) {
  .goal-panel { padding: 14px; border-radius: 16px; }
  .goal-panel-head { gap: 10px; align-items: center; }
  .goal-panel-icon { width: 36px; height: 36px; border-radius: 11px; }
  .goal-panel-icon svg { width: 18px; height: 18px; }
  .goal-panel-title h3 { font-size: 16px; }
  .goal-panel-title p { font-size: 13px; }
  /* Op de telefoon alleen het potlood, zodat de kop op één regel blijft; de knop heeft een aria-label. */
  .goal-panel-head .goal-panel-edit { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
  .goal-panel-head .goal-panel-edit-label { display: none; }
  .goal-panel-empty .goal-panel-head { align-items: flex-start; }
  .goal-panel-actions, .goal-panel-empty .goal-panel-sheet { padding-left: 0; }
  .goal-panel-actions .primary { width: 100%; justify-content: center; }
  .goal-panel-list li { padding: 8px 10px; gap: 10px; flex-wrap: wrap; }
  .goal-panel-list li::before { width: 22px; height: 22px; }
  .goal-panel-text { font-size: 14px; flex-basis: calc(100% - 32px); }
  .goal-panel-mastery { margin-left: 32px; }
}

/* Wizard voor leerdoelen en studiewijzer (2026-09-29): stappenbalk, voorbeelden, live controle. UI.md "Leerdoelenwizard". */
/* Alle stappen op één rij (er zijn er vijf sinds de stap Lesstof; met vier kolommen viel Controleren op een tweede rij). */
.wizard-steps { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 10px 0 20px; padding: 0; }
.wizard-step { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text-secondary); font: 650 13px "DM Sans"; cursor: pointer; text-align: left; }
.wizard-step:hover { border-color: var(--primary); }
.wizard-step-number { flex-shrink: 0; width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--surface-soft); color: var(--text-secondary); font: 700 12px "DM Sans"; }
.wizard-step-number svg { width: 14px; height: 14px; }
.wizard-step.current { border-color: var(--primary); background: var(--primary-soft); color: var(--text-primary); }
.wizard-step.current .wizard-step-number { background: var(--primary); color: var(--surface); }
.wizard-step.done .wizard-step-number { background: var(--success-soft); color: var(--success); }
.wizard-step-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-wizard h2 { margin-bottom: 6px; }
.goal-wizard label { display: grid; gap: 6px; }
.goal-wizard label small { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.goal-wizard input, .goal-wizard textarea { font: 400 14px "DM Sans"; line-height: 1.55; }
.wizard-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 16px; }
.wizard-example { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.wizard-example p { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font: 700 13px "DM Sans"; }
.wizard-example svg { width: 15px; height: 15px; }
.wizard-example ul { margin: 0; padding-left: 18px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.wizard-example.good p { color: var(--success); }
.wizard-example.bad p { color: var(--warning); }
.wizard-count { margin: 8px 0 6px; font: 650 13px "DM Sans"; color: var(--primary); }
.wizard-preview { margin: 0; padding: 0; list-style: none; counter-reset: wizard; display: grid; gap: 6px; max-height: 220px; overflow-y: auto; }
.wizard-preview li { counter-increment: wizard; display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--surface-soft); font-size: 14px; line-height: 1.45; color: var(--text-primary); }
.wizard-preview li::before { content: counter(wizard); color: var(--text-muted); font: 700 12px "DM Sans"; padding-top: 2px; }
.wizard-preview li.flagged { background: var(--warning-soft); }
.wizard-preview small { grid-column: 2; display: flex; align-items: flex-start; gap: 6px; margin-top: 3px; color: var(--text-primary); font-size: 12.5px; }
.wizard-preview small svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: var(--warning); }
.wizard-tip { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.wizard-tip svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--primary); }
.wizard-terms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-height: 160px; overflow-y: auto; }
.wizard-terms li { padding: 4px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--text-primary); font: 600 13px "DM Sans"; }
/* Stap "Lesstof" in de leerdoelenwizard (2026-10-10): wat er al is, met status. */
.wizard-materials { list-style: none; display: grid; gap: 6px; margin: 12px 0; padding: 0; }
.wizard-materials li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 15px; }
.wizard-materials li svg { width: 18px; height: 18px; flex: none; color: var(--primary); }
.wizard-materials li span { flex: 1; }
.wizard-materials li small { color: var(--text-secondary); }
/* Leerdoelen die de app voorstelde (geen leerdoelen in het document), 2026-10-11. */
.wizard-suggested { display: flex; gap: 10px; margin: 14px 0; padding: 12px 14px; border-radius: 12px; background: var(--warning-soft); color: var(--text-primary); font-size: 14px; }
.wizard-suggested > svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.wizard-suggested > div { display: grid; gap: 4px; }
.wizard-suggested ul { margin: 4px 0 0; padding-left: 18px; }
/* Leerdoelen uit de studiewijzer (foto of document), 2026-10-10. */
.wizard-import { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0; padding: 14px 16px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-soft); }
.wizard-import > div { display: grid; gap: 2px; max-width: 46em; font-size: 14px; color: var(--text-secondary); }
.wizard-import strong { color: var(--text-primary); font-size: 15px; }
.wizard-import-button { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.wizard-import-button svg { width: 18px; height: 18px; }
.wizard-import-status { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--text-secondary); }
.wizard-import-status:empty { display: none; }
.wizard-move { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 14px 0; padding: 10px 12px; border-radius: 12px; background: var(--warning-soft); color: var(--text-primary); font-size: 14px; }
.wizard-move .quiet-button { display: inline-flex; align-items: center; gap: 6px; }
.wizard-move svg { width: 15px; height: 15px; }
.wizard-summary { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.wizard-summary li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.wizard-summary li div { display: grid; gap: 2px; min-width: 0; }
.wizard-summary strong { font: 700 14px "DM Sans"; color: var(--text-primary); }
.wizard-summary span { color: var(--text-secondary); font-size: 14px; overflow-wrap: anywhere; }
.wizard-summary span.warn { color: var(--warning); font-weight: 600; }
.wizard-summary .quiet-button { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.wizard-summary .quiet-button svg, .wizard-nav .primary svg { width: 15px; height: 15px; }
.wizard-nav .primary { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 560px) {
  .wizard-steps { gap: 4px; }
  .wizard-step { flex-direction: column; gap: 4px; padding: 6px 2px; text-align: center; font-size: 11px; }
  .wizard-step-name { max-width: 100%; }
  .wizard-examples { grid-template-columns: 1fr; }
}

/* Leerdoelenwizard als volledige pagina (2026-09-29): de stap in een kaart, ernaast wat je tot nu toe hebt ingevuld. */
.goal-wizard { max-width: 1100px; }
.goal-wizard .wizard-title { margin: 2px 0 12px; }
.wizard-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.wizard-layout.single { grid-template-columns: minmax(0, 760px); }
.wizard-main { padding: 26px 28px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.wizard-main .goal-text textarea { min-height: 260px; }
.wizard-aside { position: sticky; top: 90px; padding: 18px 20px; border-radius: 18px; background: var(--subj-tile, var(--surface-soft)); border: 1px solid var(--border); }
.wizard-aside h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 700 15px "DM Sans"; color: var(--text-primary); }
.wizard-aside h3 svg { width: 18px; height: 18px; color: var(--subj-icon-ink, var(--primary)); }
.wizard-aside dl { margin: 0; display: grid; gap: 10px; }
.wizard-aside dt { font: 700 12px "DM Sans"; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.wizard-aside dd { margin: 2px 0 0; color: var(--text-primary); font-size: 14px; overflow-wrap: anywhere; }
.wizard-aside .warn { color: var(--warning); font-weight: 600; }
.wizard-aside-goals { margin: 14px 0 0; padding-left: 18px; display: grid; gap: 4px; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.wizard-aside-goals li.flagged { color: var(--warning); }
.wizard-aside-more { margin: 6px 0 0; color: var(--text-muted); font-size: 13px; }
@media (max-width: 960px) {
  .wizard-layout { grid-template-columns: minmax(0, 1fr); }
  .wizard-aside { position: static; }
}
@media (max-width: 560px) {
  .wizard-main { padding: 18px 16px; border-radius: 16px; }
}

/* Leerdoel zonder leerstof (uitroepteken): twee keuzekaarten in plaats van losse knoppen. */
.goal-nocontent-badge { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 13px; background: var(--warning-soft); color: var(--warning); }
.goal-nocontent-badge svg { width: 24px; height: 24px; }
.goal-choice-lead { margin: 16px 0 8px; font: 700 14px "DM Sans"; color: var(--text-primary); }
.goal-choices { display: grid; gap: 10px; }
.goal-choice { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text-primary); text-align: left; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.goal-choice:hover, .goal-choice:focus-visible { border-color: var(--primary); background: var(--surface-soft); }
.goal-choice-icon { flex-shrink: 0; width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 12px; background: var(--primary-soft); color: var(--primary-hover); }
.goal-choice-icon svg { width: 21px; height: 21px; }
.goal-choice-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.goal-choice-text strong { font: 700 15px "DM Sans"; }
.goal-choice-text small { color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.goal-choice-chevron { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted); }

/* Wat er na het opslaan gebeurt (laatste stap van de leerdoelenwizard). */
.goal-form-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--primary-soft); color: var(--text-primary); font-size: 14px; line-height: 1.5; }
.goal-form-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--primary-hover); }

/* Overhoren zonder typen: het antwoord verschijnt pas als je erom vraagt. */
.vocab-reveal {
  display: grid;
  gap: 6px;
  max-width: 480px;
  margin: 4px auto 18px;
  padding: 16px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--green2);
  text-align: left;
}
.vocab-reveal-label {
  font: 700 11px "DM Sans";
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--green);
}
.vocab-reveal strong {
  font: 700 18px "DM Sans";
  color: var(--green-dark);
  overflow-wrap: anywhere;
}

/* Topografie: foto en overlays delen altijd dezelfde verhoudingen. */
.topo-scroll { width: 100%; overflow: auto; border: 1px solid #c6d3cb; border-radius: 12px; background: #e5f0f3; }
.topo-canvas { position: relative; width: 100%; min-width: 100%; line-height: 0; }
.topo-canvas > img { display: block; width: 100%; height: auto; max-width: none; }
#topoOverlay { position: absolute; inset: 0; pointer-events: none; }
.topo-mask { position: absolute; background: var(--surface); pointer-events: none; }
.topo-point { position: absolute; transform: translate(-50%, -50%); width: 32px; height: 32px; min-height: 32px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #254f70; color: #fff; font-weight: 800; line-height: 1; pointer-events: auto; box-shadow: 0 0 0 1px #18394f; }
.topo-point.selected { background: #8c3a00; outline: 3px solid #e8a849; z-index: 2; }
.topo-point.correct { background: #236346; }
.topo-point.incorrect { background: #963d39; }
.topo-point:focus-visible { outline: 4px solid #111; z-index: 3; }

/* Wijs-aan-op-de-foto (visuele leerlaag, fase 4, eigen verzoek 2026-09-24): eigen, kleinere variant van
   .topo-point/.topo-canvas, want los van de topografiekaart-schermen en hun eigen stijlregels. */
.photo-point-stage { position: relative; width: 100%; line-height: 0; border-radius: 12px; overflow: hidden; }
.photo-point-stage > img { display: block; width: 100%; height: auto; }
.photo-point { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: #254f70cc; border: 2px solid #fff; box-shadow: 0 0 0 1px #18394f; cursor: pointer; }
.photo-point input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.photo-point:has(input:checked) { background: #8c3a00; outline: 3px solid #e8a849; z-index: 1; }
.photo-point:has(input:focus-visible) { outline: 4px solid #111; z-index: 2; }
.topo-editor { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 16px; align-items: start; margin: 16px 0; }
.topo-editor .topo-zoom { grid-column: 1; }
.topo-editor #topoPointEditor { grid-column: 2; grid-row: 1 / span 3; }
.topo-coordinates { display: flex; gap: 10px; }
.topo-coordinates > label { min-width: 0; }
.topo-photo-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.topo-photo-grid label { width: 130px; }
.topo-photo-grid img { width: 100%; max-height: 150px; object-fit: contain; }
#topoPointsList, #topoNumberList { flex-wrap: wrap; margin: 16px 0; }
#topoProgress { margin: 18px 0; font-weight: 700; }
.topo-zoom { max-width: 220px; margin: 12px 0; }
@media (max-width: 700px) { .topo-editor { display: block; } .topo-editor #topoPointEditor { margin-top: 16px; } }

.topo-source-photo { display: block; width: 100%; height: auto; margin-top: 12px; }

/* Keep the answer beside the selected dot, inside the map viewport. */
.topo-scroll { max-height: 65dvh; overscroll-behavior: contain; }
.topo-learning-map { position: relative; min-width: 0; }
.topo-learning .topo-scroll { height: 65dvh; min-height: 350px; }
.topo-learning #topoQuestion { position: absolute; z-index: 5; width: min(280px, calc(100% - 18px)); box-sizing: border-box; margin: 0; padding: 12px; background: var(--surface); border: 2px solid #315b48; border-radius: 12px; box-shadow: 0 3px 12px #0003; }
.topo-learning #topoQuestion h2 { font-size: 1rem; margin: 0 0 8px; }
.topo-learning #topoQuestion p { margin: 6px 0; }
.topo-learning #topoQuestion input { padding: 8px; }
.topo-learning #topoQuestion button { padding: 8px 12px; min-height: 36px; }
.topo-learning #topoPlayError:empty, .topo-learning #topoImageError:empty { display: none; }
.topo-learning .topo-zoom { margin: 8px 0; }
@media (max-width: 700px) {
  .topo-learning .topo-scroll { height: 60dvh; }
  .topo-learning #topoQuestion { width: min(240px, calc(100% - 18px)); }
}
.practice-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.practice-drafts:not(:empty) { padding: 18px; background: var(--warning-soft); border: 1px solid var(--brass-line); border-radius: 14px; margin-bottom: 24px; }
.practice-drafts h3 { margin-top: 0; }

/* Touchvriendelijke taaltekens, zonder de antwoordselectie te verliezen. */
.special-characters { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 16px; }
.special-characters-label { width: 100%; text-align: center; font-size: 12px; font-weight: 500; color: var(--muted); }
.special-characters button { min-width: 44px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 18px; cursor: pointer; }
.special-characters button:hover, .special-characters button[aria-pressed="true"] { background: var(--green); color: var(--on-primary); }
.special-characters button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* Compact kaartjesbeheer: vaste pagina, alleen de gekozen rij verandert. */
.cards-editor { max-width: 1050px; margin: 0 auto; }
.cards-editor-heading { display: flex; justify-content: space-between; gap: 24px; align-items: start; margin: 18px 0 24px; }
.cards-editor-heading h1 { font-size: clamp(24px, 3vw, 36px); margin: 6px 0 8px; }
.cards-editor-heading p { margin: 0; }
.cards-editor-help { max-width: 310px; font-size: 13px; }
.cards-editor-help summary { cursor: pointer; padding: 12px 0; color: var(--green); font-weight: 700; }
.cards-editor-help p { margin-bottom: 12px; line-height: 1.6; }
.cards-editor-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.cards-editor-toolbar label { flex: 1; max-width: 420px; margin: 0; font-size: 13px; }
.cards-editor-toolbar input { display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--surface); }
.cards-editor-toolbar > span { padding-bottom: 12px; font-size: 13px; color: var(--muted); }
.cards-editor-columns, .cards-editor-row { display: grid; grid-template-columns: 28px minmax(0,1fr) minmax(0,1fr) 144px; align-items: center; gap: 12px; padding: 12px 16px; }
.cards-editor-columns { font-size: 12px; color: var(--muted); font-weight: 700; }
#cardEditorRows { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.cards-editor-row { min-height: 72px; border-bottom: 1px solid var(--line); }
.cards-editor-row:last-child { border-bottom: 0; }
.cards-editor-number { font-size: 12px; color: var(--muted); }
.cards-editor-field { margin: 0; min-width: 0; }
.cards-editor-field > span { display: none; }
.cards-editor-field input, .cards-editor-extra textarea { width: 100%; min-width: 0; min-height: 42px; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 14px; background: var(--surface); }
.cards-editor-tools { display: flex; gap: 6px; }
.cards-editor-tools button { width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; font-size: 21px; background: var(--surface); color: var(--green); cursor: pointer; }
.cards-editor-tools button:hover, .cards-editor-tools button[aria-expanded="true"] { background: var(--primary-soft); }
.cards-editor-tools small { font-size: 12px; }
.cards-editor-extra { grid-column: 2 / -1; padding-top: 8px; }
.cards-editor-extra[hidden] { display: none; }
.cards-editor-extra label { margin: 0; font-size: 13px; }
.cards-editor-extra textarea { display: block; margin-top: 8px; }
.cards-editor-extra small { font-weight: 400; }
.cards-editor-row.is-deleted { background: var(--surface-soft); }
.cards-editor-deleted-word { grid-column: 2 / 4; font-size: 14px; overflow-wrap: anywhere; }
.cards-editor-deleted-word small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.cards-editor-row .restore-language-row { padding: 8px; font-size: 12px; min-height: 44px; }
.cards-editor-pagination { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 20px 0; font-size: 13px; }
/* Uitgeschakeld zonder doorschijnendheid (was opacity .45, 3,9:1): zachte vlakkleur en secundaire tekst, licht 5,0:1 en
   donker 7,1:1, zodat het verschil met een actieve knop zichtbaar blijft zonder dat de tekst wegvalt. */
.cards-editor-pagination button:disabled, .cards-editor-top-pages button:disabled {
  color: var(--text-secondary); background: var(--surface-soft); border-color: var(--border); box-shadow: none; cursor: default;
}
.cards-editor-save { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.cards-editor-confirm { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; }
.cards-editor-confirm input { width: 18px; height: 18px; flex-shrink: 0; }
.cards-editor-save small { font-size: 12px; color: var(--muted); }
.cards-editor-save .form-error { margin: 4px 0 0; }
.cards-editor-empty { padding: 24px; text-align: center; }
@media (max-width: 700px) {
 .cards-editor-heading { display: block; margin-bottom: 16px; }
 .cards-editor-help { max-width: none; margin-top: 12px; }
 .cards-editor-toolbar { flex-wrap: wrap; gap: 8px; }
 .cards-editor-toolbar label { max-width: none; flex-basis: 100%; }
 .cards-editor-toolbar > span { padding-bottom: 0; }
 .cards-editor-columns { display: none; }
 .cards-editor-row { grid-template-columns: 20px minmax(0,1fr); gap: 8px; padding: 12px; }
 .cards-editor-number { grid-row: 1 / 4; align-self: start; padding-top: 6px; }
 .cards-editor-field { grid-column: 2; }
 .cards-editor-field > span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
 .cards-editor-tools { grid-column: 2; }
 .cards-editor-extra { grid-column: 2; }
 .cards-editor-deleted-word { grid-column: 2; }
 .cards-editor-row .restore-language-row { grid-column: 2; justify-self: start; }
 .cards-editor-row.is-deleted { min-height: 212px; }
 .cards-editor-save { padding: 12px; gap: 12px; }
 .cards-editor-save > div { min-width: 0; }
 .cards-editor-pagination { gap: 10px; }
}

.cards-editor-top-pages { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.cards-editor-top-pages button { min-width: 44px; min-height: 44px; padding: 8px; }

/* Leerflow (LK-6): rustige focusweergave met één hoofdactie. Egale kleuren, geen doorschijnende vlakken. */
/*
 * "Ga verder met leren" (herontwerp 2026-09-25, masterprompt "fancy/premium/herkenbaar"): de grote
 * illustratie (bergpad naar een doelpunt/vlag — doel, route, voortgang) vult nu de hele kaart, met een
 * eigen licht- en donkervariant (--hero-image, tokens.css) i.p.v. één bestand met een CSS-filter erover
 * — de twee originelen verschillen echt van compositie (dag/nacht), niet alleen van kleurtoon.
 * --hero-bg blijft als fallback-kleur zichtbaar zolang de afbeelding nog laadt.
 */
.learn-cta {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "text chips" "cta cta";
  grid-template-rows: 1fr auto;
  align-items: start;
  gap: 18px 24px;
  min-height: 270px;
  /* Twee lagen, komma-gescheiden (verplicht in de background-shorthand: --hero-bg is zelf soms een
     gradient/soms een vlakke kleur, --hero-image een url() — samen zonder komma is dit ongeldige CSS
     en wordt de hele declaratie genegeerd, ontdekt bij het testen). */
  background: var(--hero-image) center/cover no-repeat, var(--hero-bg);
  border: 1px solid var(--hero-border);
  border-radius: 26px;
  box-shadow: var(--hero-shadow);
  padding: 32px 36px;
  margin-bottom: 40px;
}
.learn-cta-text { grid-area: text; }
.learn-cta h2 { font: 700 clamp(28px, 3.4vw, 46px)/1.1 "DM Sans"; letter-spacing: -1.2px; margin: 4px 0 10px; }
.learn-cta p { margin: 0; color: var(--text-secondary); font-size: 18px; }
.learn-cta .eyebrow { margin-bottom: 8px; }
.study-actions .primary:only-child { margin-left: auto; }
.learn-cta-actions { display: contents; }
.learn-cta .minutes { grid-area: chips; justify-self: start; }
.learn-cta #continueLearning { grid-area: cta; justify-self: start; }
.minutes { display: flex; gap: 6px; }
.chip.active { background: var(--primary); border-color: var(--primary); color: var(--surface); }
.learn-cta .primary { display: inline-flex; align-items: center; gap: 12px; padding: 18px 30px; border-radius: 999px; font-size: 18px; }
.learn-cta .primary svg { width: 22px; height: 22px; }
@media (max-width: 760px) { .learn-cta { grid-template-columns: 1fr; grid-template-areas: "text" "chips" "cta"; padding: 24px 20px; } }
body.studying .sidebar,
body.studying .topbar { display: none; }
body.studying .app-shell { grid-template-columns: 1fr; }
body.studying main { grid-column: 1; }
.study { max-width: 720px; margin: 0 auto; padding: 10px 0 60px; }
.study-top { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.study-progress { flex: 1; height: 8px; background: var(--surface-soft); border-radius: 4px; overflow: hidden; }
.study-progress i { display: block; height: 100%; background: var(--green); border-radius: 4px; }
.study-count { font-size: 13px; color: var(--muted); white-space: nowrap; }
@media (max-width: 480px) { .study-count-step { display: none; } }
.study-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 30px; }
.study-prompt { font: 700 clamp(22px, 3.4vw, 30px) "DM Sans"; letter-spacing: -0.6px; margin: 4px 0 20px; overflow-wrap: anywhere; }
.study-note { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.study-input, .study-textarea, .study-blank, .study-pair select { width: 100%; font: 500 17px "DM Sans"; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.study-textarea { resize: vertical; min-height: 120px; }
.study-blank { width: 96px; margin: 3px 6px; padding: 8px 10px; text-align: center; }
.study-steps { font: 600 18px "DM Sans"; line-height: 2.2; background: var(--paper); border-radius: 12px; padding: 14px 18px; margin: 0 0 6px; }
ol.study-steps { padding-left: 38px; }
.study-choices { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.study-choice { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 16px; }
.study-choice:has(input:checked) { border-color: var(--green); background: var(--green2); }
.study-pairs { display: grid; gap: 10px; }
.study-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.study-pair.is-right, .study-blank.is-right { border-color: var(--green); background: var(--green2); }
.study-pair.is-wrong, .study-blank.is-wrong { border-color: var(--brass); background: var(--warning-soft); }
.study-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.study-order li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: grab; }
.study-order-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.study-grip { color: var(--muted); letter-spacing: -3px; }
.study-order-buttons { display: flex; gap: 6px; }
.study-order-buttons .quiet-button { padding: 6px 12px; }
.study-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 3px solid var(--green2); display: grid; gap: 6px; }
.study-event { padding: 10px 14px; background: var(--paper); border-radius: 10px; font-weight: 600; overflow-wrap: anywhere; }
.study-slot label { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--muted); }
.study-slot label:has(input:checked) { border: 1px solid var(--green); background: var(--green2); color: var(--ink); }
.study-source { margin: 0 0 14px; padding: 14px 18px; background: var(--paper); border-left: 4px solid var(--green); border-radius: 8px; font-size: 15px; line-height: 1.55; }
.study-table-wrap { overflow-x: auto; margin-bottom: 12px; }
.study-table { border-collapse: collapse; width: 100%; font-size: 15px; }
.study-table th, .study-table td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.study-table th { background: var(--paper); }
.study-hints { display: grid; gap: 8px; margin-top: 14px; }
.study-hint { margin: 0; padding: 10px 14px; background: var(--surface-soft); border-radius: 10px; font-size: 14px; }
.study-feedback { margin-top: 14px; }
.study-result { padding: 14px 16px; border-radius: 12px; font-size: 15px; line-height: 1.5; }
.study-result.good { background: var(--green2); }
.study-result.open { background: var(--warning-soft); }
.study-result p { margin: 8px 0 0; }
/* Fout bij vrije invoer: jouw antwoord en het juiste antwoord (eigen verzoek 2026-09-29). */
.study-result .vocab-answer-compare { margin: 10px 0 0; max-width: none; }
.study-review { margin: 24px auto 0; max-width: 520px; text-align: left; }
.study-review h2 { margin: 0 0 10px; font-size: 18px; }
.study-review ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.study-review li { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.study-review-prompt { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.study-review .vocab-answer-compare { margin: 8px 0 0; max-width: none; }
@media (max-width: 480px) {
  .study-result .vocab-answer-row, .study-review .vocab-answer-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.study-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; }
/* De tekst bij een vraag (2026-10-13): een rustig leesblok boven de vraag. */
.study-context { margin: 0 0 16px; padding: 14px 16px; border-left: 4px solid var(--primary); border-radius: 10px; background: var(--surface-soft); }
.study-context figcaption { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.study-context blockquote { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-primary); }
.study-context blockquote p { margin: 0 0 8px; }
.study-context blockquote p:last-child { margin-bottom: 0; }
/* "Meld deze vraag" (2026-10-07): klein en rustig onder de vraag; klapt uit tot een kort formulier. */
.study-report { margin-top: 14px; text-align: right; }
.study-report-open { font-size: 13px; color: var(--muted); }
.study-report-form { display: grid; gap: 8px; margin: 4px 0 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; text-align: left; }
.study-report-form legend { padding: 0 4px; font-weight: 600; }
.study-report-form .study-choice { padding: 10px 14px; font-size: 15px; }
.study-report-note { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.study-report-note textarea { width: 100%; font: inherit; color: var(--text-primary); }
.study-report-form .study-actions { margin-top: 6px; }
.study-actions .primary { padding: 14px 28px; font-size: 16px; }
.study-done { text-align: center; padding: 50px 30px; }
.study-figure { max-width: 420px; margin: 0 auto 16px; }
.study-diagram { width: 100%; height: auto; background: var(--paper); border-radius: 12px; }
.study-figure img { display: block; width: 100%; height: auto; border-radius: 12px; }
/* Naamsvermelding onder een afbeelding van Wikimedia Commons (verplicht bij CC BY en CC BY-SA). */
figure.study-figure { margin: 0 auto 16px; }
.figure-credit { margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.figure-credit a { color: inherit; text-decoration: underline; }
/* Leerblokken (visuele leerlaag, fase 2, eigen verzoek 2026-09-24). */
.block-keypoints { margin: 0 0 14px; padding-left: 20px; color: var(--ink, #1e2b25); }
.block-keypoints li { margin: 4px 0; }
.block-terms { margin: 0 0 14px; }
.block-terms dt { font-weight: 700; color: var(--ink, #1e2b25); margin-top: 8px; }
.block-terms dd { margin: 2px 0 0; color: var(--muted, #6b756e); }
.study-audio { margin-bottom: 12px; }
/* Voorlezen van de vraag (2026-10-21): klein en rustig onder de vraag, zodat de vraag zelf het belangrijkst blijft. */
.study-speech { margin: -10px 0 16px; }
.study-speech .quiet-button { padding: 7px 13px; font-size: 13px; }
.study-goals { list-style: none; margin: 18px auto 0; padding: 0; max-width: 520px; text-align: left; display: grid; gap: 8px; }
.study-goals li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 14px; background: var(--paper); border-radius: 10px; font-size: 14px; }
.vocab-importance { font-size: 12px; margin-left: auto; padding: 3px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.goal-weight { font-size: 12px; margin-left: 8px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.study-done h1 { margin-bottom: 8px; }
@media (max-width: 680px) {
  .study-card { padding: 20px; }
  .study-pair { grid-template-columns: minmax(0, 1fr); }
  .study-actions { flex-direction: column-reverse; align-items: stretch; }
  .learn-cta { padding: 18px; }
}

/* Pagina Goedgekeurde leerstof: één hoofdactie, groepen per doel, vak-eigen teksten. */
.material-page { max-width: 820px; margin: 0 auto; padding-bottom: 60px; }
.material-page h1 { margin-bottom: 4px; }
.mat-primary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; background: var(--green2); border: 1px solid var(--line); border-radius: 15px; padding: 22px 26px; margin: 22px 0; }
.mat-primary h2 { font-size: 24px; margin: 0 0 4px; }
.mat-primary p { margin: 0; color: var(--muted); font-size: 14px; max-width: 420px; }
.mat-primary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mat-primary .primary { padding: 14px 24px; font-size: 15px; }
.mat-section { margin-top: 26px; }
.mat-section a.ai-option { text-decoration: none; color: inherit; display: block; }
.mat-section h2 { font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.mat-photos { margin-top: 26px; }
.mat-photos summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.mat-footer { margin-top: 30px; }

/* Oefenstof op de leerstofpagina (de aparte pagina Oefenen bestaat niet meer). */
.mat-subhead { font-size: 14px; margin: 14px 0 8px; color: var(--muted); font-weight: 600; }
.mat-create { margin-top: 14px; }
.library-kind select { height: 46px; border: 1px solid var(--border); border-radius: 14px; padding: 0 14px; background: var(--surface); color: var(--text-primary); font: 600 14px "DM Sans"; }
/* Vakpagina: zoekbalk neemt de beschikbare breedte, filter ernaast, met lucht onder de rij. Was een
   witte <select> (ook in dark mode) en een smalle, afgekapte zoekbalk. */
.library-head { align-items: center; gap: 14px; margin-bottom: 18px; }
.library-head .search { flex: 1; min-width: 0; height: 46px; border-radius: 14px; padding: 0 16px; }
.practice-lines { margin-top: 2px; }
/* Zelf leerstof maken zonder foto is een uitzondering, geen hoofdroute: dicht bij standaard, geen drie
   knoppen die altijd meteen in beeld staan. */
.quiet-disclosure { margin: 0 0 22px; }
.quiet-disclosure summary { cursor: pointer; font: 600 13px "DM Sans"; color: var(--muted); list-style: none; padding: 2px 0; }
.quiet-disclosure summary::-webkit-details-marker { display: none; }
.quiet-disclosure summary::before { content: "＋ "; }
.quiet-disclosure[open] summary::before { content: "－ "; }
.quiet-disclosure .button-row { margin-top: 10px; }
.quiet-link { font: 600 12px "DM Sans"; padding: 0; margin-left: 4px; vertical-align: baseline; }
/* Een leerdoel koppelen aan een toets: vinkje, tekst en gewicht op één rustige rij in plaats van kriskras
   lopende tekst met een select die op een eigen regel valt. */
.goal-link-row { display: flex; align-items: center; gap: 12px; }
.goal-link-row input[type="checkbox"] { flex: none; width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; }
.goal-link-text { flex: 1; min-width: 0; }
.goal-link-text small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.goal-weight { flex: none; }
@media (max-width: 560px) {
  .library-head { flex-direction: column; gap: 8px; }
}

/* Inlogscherm: de knop terug naar de startpagina. */
.auth-back { align-self: flex-start; margin-bottom: 18px; }
/* Inlogscherm en uitnodiging: bovenaan "Terug naar de startpagina" en de knop licht/donker (sinds 2026-09-27). */
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.auth-top .auth-back { align-self: center; margin-bottom: 0; }
.auth-top-end { justify-content: flex-end; }

/* Helppagina */
.help { max-width: 760px; }
.help-toc { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 22px; }
.help-toc-link { color: var(--primary); text-decoration: none; font-weight: 600; font-size: 14px; }
.help-toc-link:hover { text-decoration: underline; }
.help-section { padding: 18px 0; border-top: 1px solid var(--border); scroll-margin-top: 16px; }
.help-section h2 { font-size: 20px; margin: 0 0 10px; }
.help-section p, .help-section li { line-height: 1.6; }
.help-section ul, .help-section ol { padding-left: 22px; }
.help-faq { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.help-faq summary { cursor: pointer; font-weight: 600; }
.help-faq p { margin: 8px 0 2px; }

/* ---------------------------------------------------------------------------
 * Video-TV (eigen verzoek: "een aparte TV, à la Netflix"): bewust een andere,
 * donkere sfeer dan de rest van de rustige app — dit is kijken, geen leren.
 * ------------------------------------------------------------------------- */
.tv-shell { --tv-bg: #121619; --tv-card: #1c2227; --tv-line: #2a323a; --tv-text: #f2f2f0; --tv-muted: #a3abb2; --tv-accent: #f0b347; background: radial-gradient(120% 60% at 0% 0%, #1d2a2a 0%, var(--tv-bg) 55%); color: var(--tv-text); border-radius: 20px; padding: clamp(18px, 4vw, 36px); min-height: calc(100vh - 140px); }
.tv-shell .tv-back { color: #cfd3d6; }
.tv-shell .tv-back:hover { color: #fff; }
.tv-head { margin: 12px 0 26px; max-width: 760px; }
.tv-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--tv-accent) !important; }
.tv-eyebrow svg { width: 18px; height: 18px; }
.tv-head h1 { color: #fff; font: 700 clamp(24px, 3.4vw, 34px) "DM Sans"; letter-spacing: -0.5px; margin: 6px 0 6px; }
.tv-sub { color: var(--tv-muted); margin: 0; }
.tv-meter { max-width: 320px; margin-top: 14px; }
.tv-meter .progress-bar { background: #2b343c; }
.tv-meter .progress-bar i { background: var(--tv-accent); }
/* Uitgelicht filmpje: groot beeld met titel en een duidelijke afspeelknop. */
.tv-feature { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: center; background: var(--tv-card); border: 1px solid var(--tv-line); border-radius: 18px; padding: clamp(12px, 2vw, 18px); margin-bottom: 30px; }
.tv-feature-thumb { padding: 0; border: 0; background: none; cursor: pointer; display: block; width: 100%; border-radius: 12px; }
.tv-feature-text h2 { color: #fff; font: 700 clamp(18px, 2.2vw, 24px)/1.25 "DM Sans"; margin: 4px 0 6px; }
.tv-feature-label { color: var(--tv-accent); font: 700 12px "DM Sans"; letter-spacing: 0.12em; text-transform: uppercase; margin: 0; }
.tv-channel { color: var(--tv-muted); font-size: 14px; margin: 0; }
.tv-play-button { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 12px 22px 12px 18px; border: 0; border-radius: 999px; background: #fff; color: #121619; font: 700 15px "DM Sans"; cursor: pointer; }
.tv-play-button svg { width: 20px; height: 20px; }
.tv-play-button:hover { background: var(--tv-accent); }
.tv-play-button:focus-visible, .tv-feature-thumb:focus-visible, .tv-card:focus-visible, .tv-next-item:focus-visible { outline: 3px solid var(--tv-accent); outline-offset: 3px; }
.tv-row { margin-bottom: 28px; }
.tv-row h2 { color: #fff; font: 700 17px "DM Sans"; margin: 0 0 14px; }
.tv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px 18px; }
.tv-card { text-align: left; background: transparent; border: none; padding: 0; cursor: pointer; color: inherit; display: grid; align-content: start; gap: 10px; border-radius: 12px; }
.tv-thumb { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: #23282e; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.tv-card:hover .tv-thumb, .tv-card:focus-visible .tv-thumb, .tv-feature-thumb:hover .tv-thumb, .tv-next-item:hover .tv-thumb { transform: scale(1.03); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4); }
.tv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Altijd zichtbare afspeelknop (ook op een telefoon, waar geen hover is). */
.tv-play { position: absolute; left: 10px; bottom: 10px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(12, 15, 18, 0.72); color: #fff; transition: background 0.15s ease, transform 0.15s ease; }
.tv-play svg { width: 18px; height: 18px; margin-left: 2px; }
.tv-thumb--big .tv-play { left: 50%; top: 50%; bottom: auto; width: 68px; height: 68px; transform: translate(-50%, -50%); background: rgba(12, 15, 18, 0.62); }
.tv-thumb--big .tv-play svg { width: 30px; height: 30px; }
.tv-thumb--small .tv-play { width: 28px; height: 28px; left: 6px; bottom: 6px; }
.tv-thumb--small .tv-play svg { width: 13px; height: 13px; }
.tv-card:hover .tv-play, .tv-feature-thumb:hover .tv-play, .tv-next-item:hover .tv-play { background: var(--tv-accent, #f0b347); color: #121619; }
.tv-badge { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; background: rgba(12, 15, 18, 0.82); color: #7fd99a; font: 700 11px "DM Sans"; padding: 4px 9px 4px 7px; border-radius: 99px; }
.tv-badge svg { width: 13px; height: 13px; }
.tv-badge--trusted { color: #f0b347; }
.tv-card.tv-watched .tv-thumb img, .tv-next-item.tv-watched .tv-thumb img { opacity: 0.55; }
.tv-info { display: grid; gap: 3px; min-width: 0; }
.tv-info strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 14px/1.35 "DM Sans"; color: var(--tv-text, var(--text-primary)); }
.tv-info small { color: var(--tv-muted, var(--text-secondary)); font-size: 12px; }
/* Speler met "Hierna" ernaast (op een telefoon eronder). */
.tv-player { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; margin-top: 14px; }
.tv-player--solo { grid-template-columns: minmax(0, 960px); }
.tv-player-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; margin-bottom: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.tv-player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tv-player-title { color: #fff; font: 700 clamp(18px, 2vw, 22px)/1.3 "DM Sans"; margin: 0 0 4px; }
.tv-player-hint { color: var(--tv-muted); font-size: 13px; margin: 14px 0 0; }
.tv-next h2 { color: #fff; font: 700 15px "DM Sans"; margin: 0 0 12px; }
.tv-next-item { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 6px; margin: 0 0 6px; text-align: left; background: none; border: 0; border-radius: 12px; color: inherit; cursor: pointer; }
.tv-next-item:hover { background: var(--tv-card); }
.tv-next-item .tv-thumb { border-radius: 8px; }
@media (max-width: 900px) {
  .tv-feature { grid-template-columns: 1fr; }
  .tv-player { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tv-shell { border-radius: 16px; padding: 16px; margin-inline: -4px; }
  .tv-grid { grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .tv-feature-text { padding: 0 4px 6px; }
  .tv-play-button { width: 100%; justify-content: center; }
  .tv-next-item { grid-template-columns: 120px minmax(0, 1fr); }
}
/* TV-strook op de vakpagina: hetzelfde donkere TV-gevoel, maar compact, als ingang naar de TV. */
.tv-teaser { --tv-text: #f2f2f0; --tv-muted: #a3abb2; --tv-accent: #f0b347; background: linear-gradient(135deg, #1b2326 0%, #121619 70%); color: #f2f2f0; border-radius: var(--radius-lg, 20px); padding: 16px 18px 18px; margin: 0 0 20px; }
.tv-teaser-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tv-teaser-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: rgba(240, 179, 71, 0.16); color: var(--tv-accent); }
.tv-teaser-icon svg { width: 22px; height: 22px; }
.tv-teaser-text { display: grid; min-width: 0; flex: 1; }
.tv-teaser-text strong { color: #fff; font: 700 16px "DM Sans"; }
.tv-teaser-text small { color: var(--tv-muted); font-size: 13px; }
.tv-teaser-all { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: transparent; color: #fff; font: 650 14px "DM Sans"; cursor: pointer; }
.tv-teaser-all svg { width: 16px; height: 16px; }
.tv-teaser-all:hover { background: #fff; color: #121619; }
.tv-teaser-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tv-teaser .tv-info strong { font-size: 13px; }
@media (max-width: 760px) {
  /* Telefoon: een rij om horizontaal door te vegen, zoals bij een streamingdienst. */
  .tv-teaser-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; gap: 12px; margin: 0 -18px; padding: 0 18px 4px; scrollbar-width: none; }
  .tv-teaser-row .tv-card { flex: 0 0 62%; scroll-snap-align: start; }
  .tv-teaser-head { flex-wrap: wrap; }
  .tv-teaser-all { order: 3; width: 100%; justify-content: center; }
}
/* De knop TV in de periode: donker, zodat je hem tussen de lichte knoppen meteen ziet. */
.period-heading-actions .period-tv { background: #1b2326; border-color: #1b2326; color: #fff; }
.period-heading-actions .period-tv svg { color: #f0b347; }
.period-heading-actions .period-tv:hover { background: #121619; border-color: #f0b347; }
/* "Filmpjes voor jou" op Leren: lichte kaarten in de stijl van het dashboard. */
.dash-tv .section-header h2 { display: inline-flex; align-items: center; gap: 10px; }
.tv-section-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #1b2326; color: #f0b347; }
.tv-section-icon svg { width: 19px; height: 19px; }
.section-note { color: var(--text-secondary); font-size: var(--text-small, 14px); }
.tv-foryou-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-4, 16px); }
.tv-card--foryou { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 10px 14px; gap: 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.tv-card--foryou:hover { border-color: var(--primary); box-shadow: var(--shadow-card, 0 8px 22px rgba(0, 0, 0, 0.08)); }
.tv-card--foryou:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.tv-card--foryou .tv-info { padding: 0 4px; }
.tv-card--foryou .tv-thumb { border-radius: 10px; }
.tv-card--foryou:hover .tv-thumb { transform: none; box-shadow: none; }
.tv-subject { color: var(--primary); font: 700 12px "DM Sans"; letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 560px) {
  .tv-foryou-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-4, 16px); gap: 12px; margin: 0 calc(var(--space-4, 16px) * -1); padding: 0 var(--space-4, 16px) 4px; scrollbar-width: none; }
  .tv-foryou-row .tv-card { flex: 0 0 64%; scroll-snap-align: start; }
  .dash-tv .section-note { display: none; }
}

/* Vakpagina: zachte vaktint-verloop over de bovenkant van de pagina (was vrijwel egaal wit), en de
   upload-knop in de zoekrij (was in de hero, over de illustratie heen). */
#page-leerstofvak[class*="subj-"] { background: linear-gradient(180deg, var(--subj-tile) 0, transparent 520px); }
.library-head .library-upload { height: 46px; flex-shrink: 0; white-space: nowrap; }
@media (max-width: 700px) { .library-head .library-upload { width: 100%; } }

/* ---- Vakpagina, tweede ronde (voorbeeld "Engels") ---- */
/* De hele pagina in de vaktint, edge-to-edge (was een verloop over alleen de bovenkant van een
   gecentreerde kolom en voelde als één groot wit vlak); de inhoud blijft even breed als eerder. */
#page-leerstofvak[class*="subj-"] {
  background: var(--subj-tile);
  max-width: none;
  margin: 0;
  padding-left: max(5vw, calc((100% - (1260px - 10vw)) / 2));
  padding-right: max(5vw, calc((100% - (1260px - 10vw)) / 2));
  min-height: calc(100vh - 77px);
}
/* Sectiekop met icoon, titel en hint ("Oefenstof | Kies hoe je wilt oefenen"). */
.mat-head { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; padding-top: 20px; border-top: 1px solid var(--border); font: 700 20px "DM Sans"; color: var(--text-primary); }
.mat-head-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--subj-icon-bg, var(--primary-soft)); color: var(--subj-icon-ink, var(--primary-hover)); flex-shrink: 0; }
.mat-head-icon svg { width: 20px; height: 20px; }
.mat-head-hint { padding-left: 14px; border-left: 1px solid var(--border-strong); font: 500 14px "DM Sans"; color: var(--text-secondary); }
/* Oefenstof-tegel: eigen kleur per soort, soort-label, volle actieknop onderaan. */
.practice-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.practice-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  text-align: left;
  padding: 18px;
  min-height: 220px;
  border-radius: 20px;
  border: 1px solid var(--kind-soft, var(--border));
  background: var(--kind-card, var(--surface));
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion) var(--ease);
}
.practice-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.practice-card.kind-cards { --kind-card: var(--kind-cards-card); --kind-soft: var(--kind-cards-soft); --kind-ink: var(--kind-cards-ink); }
.practice-card.kind-tests { --kind-card: var(--kind-tests-card); --kind-soft: var(--kind-tests-soft); --kind-ink: var(--kind-tests-ink); }
.practice-card.kind-grammar { --kind-card: var(--kind-grammar-card); --kind-soft: var(--kind-grammar-soft); --kind-ink: var(--kind-grammar-ink); }
.practice-card.kind-blocks { --kind-card: var(--kind-blocks-card); --kind-soft: var(--kind-blocks-soft); --kind-ink: var(--kind-blocks-ink); }
.practice-card.kind-maps { --kind-card: var(--kind-maps-card); --kind-soft: var(--kind-maps-soft); --kind-ink: var(--kind-maps-ink); }
.practice-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.practice-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: var(--kind-soft, var(--primary-soft)); color: var(--kind-ink, var(--primary-hover)); flex-shrink: 0; }
.practice-icon svg { width: 26px; height: 26px; }
.practice-pill { padding: 5px 12px; border-radius: 999px; background: var(--kind-soft, var(--primary-soft)); color: var(--kind-ink, var(--primary-hover)); font: 700 13px "DM Sans"; }
.practice-card strong { font: 700 18px/1.25 "DM Sans"; color: var(--text-primary); overflow-wrap: anywhere; }
.practice-card small { color: var(--text-secondary); font-size: 14px; line-height: 1.45; }
.practice-card-action { margin-top: auto; padding: 12px 16px; border-radius: 14px; background: var(--kind-soft, var(--primary-soft)); color: var(--kind-ink, var(--primary-hover)); font: 700 15px "DM Sans"; text-align: center; }
.practice-card:hover .practice-card-action { filter: brightness(0.97); }
/* Grammaticablok: de vier stappen van de leerlijn (herkennen, aanvullen, zelf maken, toepassen) als streepjes. */
.practice-steps { display: flex; gap: 5px; margin-top: 4px; }
.practice-steps i { flex: 1; height: 6px; border-radius: 999px; background: var(--kind-soft, var(--border)); }
.practice-steps i.done { background: var(--kind-ink, var(--primary)); }
.practice-steps i.now { background: color-mix(in srgb, var(--kind-ink, var(--primary)) 45%, transparent); }
/* Tegel om iets toe te voegen (grammatica fotograferen): zelfde vorm, rustiger, met een stippelrand. */
.practice-card.practice-card-add { border-style: dashed; border-color: var(--kind-ink, var(--border-strong)); background: transparent; }

/* ---------------------------------------------------------------------------
 * Premium bibliotheek (eigen verzoek 2026-09-26): schreefletter voor koppen, messing als fijn accent,
 * warme kaarten en een leesbare hero. De kleuren komen uit tokens.css (licht: perkament en ivoor,
 * donker: avondbibliotheek), zodat alles automatisch met het thema meegaat.
 * ------------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/fraunces-latin-wght.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/fraunces-latin-wght-italic.woff2") format("woff2");
}
h1, h2 { font-family: var(--font-display); font-weight: 600; }
h1 { letter-spacing: -0.02em; }
h2 { letter-spacing: -0.01em; }
.page-title h1, .page-title-quiet h1 { letter-spacing: -0.025em; position: relative; padding-bottom: 18px; }
.page-title h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 84px; height: 2px; background: linear-gradient(90deg, var(--brass), transparent); }
.eyebrow { color: var(--brass); letter-spacing: 0.16em; }
.learn-cta h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.learn-cta .eyebrow { color: var(--brass); }
.sidebar .brand span, .landing-bar .brand span, .auth-brand span { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.breadcrumbs { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.nav-item.active { box-shadow: inset 3px 0 0 var(--brass); }
.subject-tile:hover, .practice-card:hover, .material-row:hover, .settings-card:hover, .period-block:hover { border-color: var(--brass-line); }
.pv-tile, .pv-card, .settings-card, .period-block, .help-toc, .help-faq { box-shadow: var(--shadow); }

/* De hero op de Leren-pagina: de illustratie rechts, een verloop in de kaartkleur links zodat de tekst
   altijd leesbaar blijft (licht én donker). */
:root { --hero-scrim: linear-gradient(90deg, rgba(255, 253, 248, 0.97) 0%, rgba(255, 253, 248, 0.9) 34%, rgba(255, 253, 248, 0) 72%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --hero-scrim: linear-gradient(90deg, rgba(21, 32, 26, 0.96) 0%, rgba(21, 32, 26, 0.85) 34%, rgba(21, 32, 26, 0) 72%); } }
:root[data-theme="dark"] { --hero-scrim: linear-gradient(90deg, rgba(21, 32, 26, 0.96) 0%, rgba(21, 32, 26, 0.85) 34%, rgba(21, 32, 26, 0) 72%); }
.learn-cta { background-position: right 38%, center; }
.learn-cta::before { content: ""; position: absolute; inset: 0; background: var(--hero-scrim); pointer-events: none; }
.learn-cta > *, .learn-cta .minutes, .learn-cta #continueLearning { position: relative; }

/* Tegels en heroes: leesbaar op elke illustratie en op telefoon. */
.subject-tile-art::after { background: linear-gradient(to top, rgba(10, 16, 12, 0.9) 0%, rgba(10, 16, 12, 0.64) 34%, rgba(10, 16, 12, 0.1) 66%, transparent 100%); }
.subject-tile.has-art .subject-tile-text strong { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.subject-tile.has-art .subject-tile-text small { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.subject-hero-head h1 { letter-spacing: -0.02em; }
:root { --hero-scrim-m: linear-gradient(180deg, rgba(255, 253, 248, 0.96) 0%, rgba(255, 253, 248, 0.88) 55%, rgba(255, 253, 248, 0.4) 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --hero-scrim-m: linear-gradient(180deg, rgba(21, 32, 26, 0.95) 0%, rgba(21, 32, 26, 0.86) 55%, rgba(21, 32, 26, 0.4) 100%); } }
:root[data-theme="dark"] { --hero-scrim-m: linear-gradient(180deg, rgba(21, 32, 26, 0.95) 0%, rgba(21, 32, 26, 0.86) 55%, rgba(21, 32, 26, 0.4) 100%); }
@media (max-width: 700px) {
  .learn-cta::before { background: var(--hero-scrim-m); }
  .subject-tile.has-art .subject-tile-text strong { font-size: 18px; overflow-wrap: anywhere; }
  .subject-tile.has-art .subject-tile-text small { font-size: 13px; }
  .subject-hero { min-height: 250px; }
  .subject-hero-art { background-size: auto 62%; background-position: right bottom; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, #000 75%); mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, #000 75%); }
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
.modal h1, .modal h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

/* BEGIN donkere-illustraties (gegenereerd door scripts/gen-illustration-css.py) */
.illustration-subject-economie-ondernemen { background-image: url("/illustrations/subjects/economie-ondernemen.webp"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .illustration-subject-aardrijkskunde { background-image: url("/illustrations/subjects-dark/aardrijkskunde.webp"); }
  :root:not([data-theme]) .illustration-subject-biologie { background-image: url("/illustrations/subjects-dark/biologie.webp"); }
  :root:not([data-theme]) .illustration-subject-bouwen-wonen-interieur { background-image: url("/illustrations/subjects-dark/bouwen-wonen-interieur.webp"); }
  :root:not([data-theme]) .illustration-subject-burgerschap { background-image: url("/illustrations/subjects-dark/burgerschap.webp"); }
  :root:not([data-theme]) .illustration-subject-ckv { background-image: url("/illustrations/subjects-dark/ckv.webp"); }
  :root:not([data-theme]) .illustration-subject-dienstverlening-producten { background-image: url("/illustrations/subjects-dark/dienstverlening-producten.webp"); }
  :root:not([data-theme]) .illustration-subject-drama { background-image: url("/illustrations/subjects-dark/drama.webp"); }
  :root:not([data-theme]) .illustration-subject-duits { background-image: url("/illustrations/subjects-dark/duits.webp"); }
  :root:not([data-theme]) .illustration-subject-economie { background-image: url("/illustrations/subjects-dark/economie.webp"); }
  :root:not([data-theme]) .illustration-subject-economie-ondernemen { background-image: url("/illustrations/subjects-dark/economie-ondernemen.webp"); }
  :root:not([data-theme]) .illustration-subject-engels { background-image: url("/illustrations/subjects-dark/engels.webp"); }
  :root:not([data-theme]) .illustration-subject-filosofie { background-image: url("/illustrations/subjects-dark/filosofie.webp"); }
  :root:not([data-theme]) .illustration-subject-frans { background-image: url("/illustrations/subjects-dark/frans.webp"); }
  :root:not([data-theme]) .illustration-subject-geschiedenis { background-image: url("/illustrations/subjects-dark/geschiedenis.webp"); }
  :root:not([data-theme]) .illustration-subject-grieks { background-image: url("/illustrations/subjects-dark/grieks.webp"); }
  :root:not([data-theme]) .illustration-subject-groen { background-image: url("/illustrations/subjects-dark/groen.webp"); }
  :root:not([data-theme]) .illustration-subject-horeca-bakkerij-recreatie { background-image: url("/illustrations/subjects-dark/horeca-bakkerij-recreatie.webp"); }
  :root:not([data-theme]) .illustration-subject-informatica { background-image: url("/illustrations/subjects-dark/informatica.webp"); }
  :root:not([data-theme]) .illustration-subject-latijn { background-image: url("/illustrations/subjects-dark/latijn.webp"); }
  :root:not([data-theme]) .illustration-subject-levensbeschouwing { background-image: url("/illustrations/subjects-dark/levensbeschouwing.webp"); }
  :root:not([data-theme]) .illustration-subject-lichamelijke-opvoeding { background-image: url("/illustrations/subjects-dark/lichamelijke-opvoeding.webp"); }
  :root:not([data-theme]) .illustration-subject-maatschappijleer { background-image: url("/illustrations/subjects-dark/maatschappijleer.webp"); }
  :root:not([data-theme]) .illustration-subject-management-organisatie { background-image: url("/illustrations/subjects-dark/management-organisatie.webp"); }
  :root:not([data-theme]) .illustration-subject-maritiem-techniek { background-image: url("/illustrations/subjects-dark/maritiem-techniek.webp"); }
  :root:not([data-theme]) .illustration-subject-media-vormgeving-ict { background-image: url("/illustrations/subjects-dark/media-vormgeving-ict.webp"); }
  :root:not([data-theme]) .illustration-subject-mobiliteit-transport { background-image: url("/illustrations/subjects-dark/mobiliteit-transport.webp"); }
  :root:not([data-theme]) .illustration-subject-muziek { background-image: url("/illustrations/subjects-dark/muziek.webp"); }
  :root:not([data-theme]) .illustration-subject-natuurkunde { background-image: url("/illustrations/subjects-dark/natuurkunde.webp"); }
  :root:not([data-theme]) .illustration-subject-nederlands { background-image: url("/illustrations/subjects-dark/nederlands.webp"); }
  :root:not([data-theme]) .illustration-subject-nlt { background-image: url("/illustrations/subjects-dark/nlt.webp"); }
  :root:not([data-theme]) .illustration-subject-produceren-installeren-energie { background-image: url("/illustrations/subjects-dark/produceren-installeren-energie.webp"); }
  :root:not([data-theme]) .illustration-subject-scheikunde { background-image: url("/illustrations/subjects-dark/scheikunde.webp"); }
  :root:not([data-theme]) .illustration-subject-spaans { background-image: url("/illustrations/subjects-dark/spaans.webp"); }
  :root:not([data-theme]) .illustration-subject-techniek { background-image: url("/illustrations/subjects-dark/techniek.webp"); }
  :root:not([data-theme]) .illustration-subject-tekenen { background-image: url("/illustrations/subjects-dark/tekenen.webp"); }
  :root:not([data-theme]) .illustration-subject-verzorging { background-image: url("/illustrations/subjects-dark/verzorging.webp"); }
  :root:not([data-theme]) .illustration-subject-wiskunde { background-image: url("/illustrations/subjects-dark/wiskunde.webp"); }
  :root:not([data-theme]) .illustration-subject-zorg-welzijn { background-image: url("/illustrations/subjects-dark/zorg-welzijn.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-aardrijkskunde { background-image: url("/illustrations/subjects-wide-dark/aardrijkskunde.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-biologie { background-image: url("/illustrations/subjects-wide-dark/biologie.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-bouwen-wonen-interieur { background-image: url("/illustrations/subjects-wide-dark/bouwen-wonen-interieur.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-burgerschap { background-image: url("/illustrations/subjects-wide-dark/burgerschap.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-ckv { background-image: url("/illustrations/subjects-wide-dark/ckv.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-dienstverlening-producten { background-image: url("/illustrations/subjects-wide-dark/dienstverlening-producten.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-drama { background-image: url("/illustrations/subjects-wide-dark/drama.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-duits { background-image: url("/illustrations/subjects-wide-dark/duits.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-economie { background-image: url("/illustrations/subjects-wide-dark/economie.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-economie-ondernemen { background-image: url("/illustrations/subjects-wide-dark/economie-ondernemen.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-engels { background-image: url("/illustrations/subjects-wide-dark/engels.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-filosofie { background-image: url("/illustrations/subjects-wide-dark/filosofie.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-frans { background-image: url("/illustrations/subjects-wide-dark/frans.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-geschiedenis { background-image: url("/illustrations/subjects-wide-dark/geschiedenis.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-grieks { background-image: url("/illustrations/subjects-wide-dark/grieks.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-groen { background-image: url("/illustrations/subjects-wide-dark/groen.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-horeca-bakkerij-recreatie { background-image: url("/illustrations/subjects-wide-dark/horeca-bakkerij-recreatie.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-informatica { background-image: url("/illustrations/subjects-wide-dark/informatica.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-latijn { background-image: url("/illustrations/subjects-wide-dark/latijn.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-levensbeschouwing { background-image: url("/illustrations/subjects-wide-dark/levensbeschouwing.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-lichamelijke-opvoeding { background-image: url("/illustrations/subjects-wide-dark/lichamelijke-opvoeding.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-maatschappijleer { background-image: url("/illustrations/subjects-wide-dark/maatschappijleer.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-management-organisatie { background-image: url("/illustrations/subjects-wide-dark/management-organisatie.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-maritiem-techniek { background-image: url("/illustrations/subjects-wide-dark/maritiem-techniek.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-media-vormgeving-ict { background-image: url("/illustrations/subjects-wide-dark/media-vormgeving-ict.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-mobiliteit-transport { background-image: url("/illustrations/subjects-wide-dark/mobiliteit-transport.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-muziek { background-image: url("/illustrations/subjects-wide-dark/muziek.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-natuurkunde { background-image: url("/illustrations/subjects-wide-dark/natuurkunde.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-nederlands { background-image: url("/illustrations/subjects-wide-dark/nederlands.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-nlt { background-image: url("/illustrations/subjects-wide-dark/nlt.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-produceren-installeren-energie { background-image: url("/illustrations/subjects-wide-dark/produceren-installeren-energie.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-scheikunde { background-image: url("/illustrations/subjects-wide-dark/scheikunde.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-spaans { background-image: url("/illustrations/subjects-wide-dark/spaans.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-techniek { background-image: url("/illustrations/subjects-wide-dark/techniek.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-tekenen { background-image: url("/illustrations/subjects-wide-dark/tekenen.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-verzorging { background-image: url("/illustrations/subjects-wide-dark/verzorging.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-wiskunde { background-image: url("/illustrations/subjects-wide-dark/wiskunde.webp"); }
  :root:not([data-theme]) .illustration-subject-wide-zorg-welzijn { background-image: url("/illustrations/subjects-wide-dark/zorg-welzijn.webp"); }
}
:root[data-theme="dark"] .illustration-subject-aardrijkskunde { background-image: url("/illustrations/subjects-dark/aardrijkskunde.webp"); }
:root[data-theme="dark"] .illustration-subject-biologie { background-image: url("/illustrations/subjects-dark/biologie.webp"); }
:root[data-theme="dark"] .illustration-subject-bouwen-wonen-interieur { background-image: url("/illustrations/subjects-dark/bouwen-wonen-interieur.webp"); }
:root[data-theme="dark"] .illustration-subject-burgerschap { background-image: url("/illustrations/subjects-dark/burgerschap.webp"); }
:root[data-theme="dark"] .illustration-subject-ckv { background-image: url("/illustrations/subjects-dark/ckv.webp"); }
:root[data-theme="dark"] .illustration-subject-dienstverlening-producten { background-image: url("/illustrations/subjects-dark/dienstverlening-producten.webp"); }
:root[data-theme="dark"] .illustration-subject-drama { background-image: url("/illustrations/subjects-dark/drama.webp"); }
:root[data-theme="dark"] .illustration-subject-duits { background-image: url("/illustrations/subjects-dark/duits.webp"); }
:root[data-theme="dark"] .illustration-subject-economie { background-image: url("/illustrations/subjects-dark/economie.webp"); }
:root[data-theme="dark"] .illustration-subject-economie-ondernemen { background-image: url("/illustrations/subjects-dark/economie-ondernemen.webp"); }
:root[data-theme="dark"] .illustration-subject-engels { background-image: url("/illustrations/subjects-dark/engels.webp"); }
:root[data-theme="dark"] .illustration-subject-filosofie { background-image: url("/illustrations/subjects-dark/filosofie.webp"); }
:root[data-theme="dark"] .illustration-subject-frans { background-image: url("/illustrations/subjects-dark/frans.webp"); }
:root[data-theme="dark"] .illustration-subject-geschiedenis { background-image: url("/illustrations/subjects-dark/geschiedenis.webp"); }
:root[data-theme="dark"] .illustration-subject-grieks { background-image: url("/illustrations/subjects-dark/grieks.webp"); }
:root[data-theme="dark"] .illustration-subject-groen { background-image: url("/illustrations/subjects-dark/groen.webp"); }
:root[data-theme="dark"] .illustration-subject-horeca-bakkerij-recreatie { background-image: url("/illustrations/subjects-dark/horeca-bakkerij-recreatie.webp"); }
:root[data-theme="dark"] .illustration-subject-informatica { background-image: url("/illustrations/subjects-dark/informatica.webp"); }
:root[data-theme="dark"] .illustration-subject-latijn { background-image: url("/illustrations/subjects-dark/latijn.webp"); }
:root[data-theme="dark"] .illustration-subject-levensbeschouwing { background-image: url("/illustrations/subjects-dark/levensbeschouwing.webp"); }
:root[data-theme="dark"] .illustration-subject-lichamelijke-opvoeding { background-image: url("/illustrations/subjects-dark/lichamelijke-opvoeding.webp"); }
:root[data-theme="dark"] .illustration-subject-maatschappijleer { background-image: url("/illustrations/subjects-dark/maatschappijleer.webp"); }
:root[data-theme="dark"] .illustration-subject-management-organisatie { background-image: url("/illustrations/subjects-dark/management-organisatie.webp"); }
:root[data-theme="dark"] .illustration-subject-maritiem-techniek { background-image: url("/illustrations/subjects-dark/maritiem-techniek.webp"); }
:root[data-theme="dark"] .illustration-subject-media-vormgeving-ict { background-image: url("/illustrations/subjects-dark/media-vormgeving-ict.webp"); }
:root[data-theme="dark"] .illustration-subject-mobiliteit-transport { background-image: url("/illustrations/subjects-dark/mobiliteit-transport.webp"); }
:root[data-theme="dark"] .illustration-subject-muziek { background-image: url("/illustrations/subjects-dark/muziek.webp"); }
:root[data-theme="dark"] .illustration-subject-natuurkunde { background-image: url("/illustrations/subjects-dark/natuurkunde.webp"); }
:root[data-theme="dark"] .illustration-subject-nederlands { background-image: url("/illustrations/subjects-dark/nederlands.webp"); }
:root[data-theme="dark"] .illustration-subject-nlt { background-image: url("/illustrations/subjects-dark/nlt.webp"); }
:root[data-theme="dark"] .illustration-subject-produceren-installeren-energie { background-image: url("/illustrations/subjects-dark/produceren-installeren-energie.webp"); }
:root[data-theme="dark"] .illustration-subject-scheikunde { background-image: url("/illustrations/subjects-dark/scheikunde.webp"); }
:root[data-theme="dark"] .illustration-subject-spaans { background-image: url("/illustrations/subjects-dark/spaans.webp"); }
:root[data-theme="dark"] .illustration-subject-techniek { background-image: url("/illustrations/subjects-dark/techniek.webp"); }
:root[data-theme="dark"] .illustration-subject-tekenen { background-image: url("/illustrations/subjects-dark/tekenen.webp"); }
:root[data-theme="dark"] .illustration-subject-verzorging { background-image: url("/illustrations/subjects-dark/verzorging.webp"); }
:root[data-theme="dark"] .illustration-subject-wiskunde { background-image: url("/illustrations/subjects-dark/wiskunde.webp"); }
:root[data-theme="dark"] .illustration-subject-zorg-welzijn { background-image: url("/illustrations/subjects-dark/zorg-welzijn.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-aardrijkskunde { background-image: url("/illustrations/subjects-wide-dark/aardrijkskunde.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-biologie { background-image: url("/illustrations/subjects-wide-dark/biologie.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-bouwen-wonen-interieur { background-image: url("/illustrations/subjects-wide-dark/bouwen-wonen-interieur.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-burgerschap { background-image: url("/illustrations/subjects-wide-dark/burgerschap.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-ckv { background-image: url("/illustrations/subjects-wide-dark/ckv.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-dienstverlening-producten { background-image: url("/illustrations/subjects-wide-dark/dienstverlening-producten.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-drama { background-image: url("/illustrations/subjects-wide-dark/drama.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-duits { background-image: url("/illustrations/subjects-wide-dark/duits.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-economie { background-image: url("/illustrations/subjects-wide-dark/economie.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-economie-ondernemen { background-image: url("/illustrations/subjects-wide-dark/economie-ondernemen.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-engels { background-image: url("/illustrations/subjects-wide-dark/engels.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-filosofie { background-image: url("/illustrations/subjects-wide-dark/filosofie.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-frans { background-image: url("/illustrations/subjects-wide-dark/frans.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-geschiedenis { background-image: url("/illustrations/subjects-wide-dark/geschiedenis.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-grieks { background-image: url("/illustrations/subjects-wide-dark/grieks.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-groen { background-image: url("/illustrations/subjects-wide-dark/groen.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-horeca-bakkerij-recreatie { background-image: url("/illustrations/subjects-wide-dark/horeca-bakkerij-recreatie.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-informatica { background-image: url("/illustrations/subjects-wide-dark/informatica.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-latijn { background-image: url("/illustrations/subjects-wide-dark/latijn.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-levensbeschouwing { background-image: url("/illustrations/subjects-wide-dark/levensbeschouwing.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-lichamelijke-opvoeding { background-image: url("/illustrations/subjects-wide-dark/lichamelijke-opvoeding.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-maatschappijleer { background-image: url("/illustrations/subjects-wide-dark/maatschappijleer.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-management-organisatie { background-image: url("/illustrations/subjects-wide-dark/management-organisatie.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-maritiem-techniek { background-image: url("/illustrations/subjects-wide-dark/maritiem-techniek.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-media-vormgeving-ict { background-image: url("/illustrations/subjects-wide-dark/media-vormgeving-ict.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-mobiliteit-transport { background-image: url("/illustrations/subjects-wide-dark/mobiliteit-transport.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-muziek { background-image: url("/illustrations/subjects-wide-dark/muziek.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-natuurkunde { background-image: url("/illustrations/subjects-wide-dark/natuurkunde.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-nederlands { background-image: url("/illustrations/subjects-wide-dark/nederlands.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-nlt { background-image: url("/illustrations/subjects-wide-dark/nlt.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-produceren-installeren-energie { background-image: url("/illustrations/subjects-wide-dark/produceren-installeren-energie.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-scheikunde { background-image: url("/illustrations/subjects-wide-dark/scheikunde.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-spaans { background-image: url("/illustrations/subjects-wide-dark/spaans.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-techniek { background-image: url("/illustrations/subjects-wide-dark/techniek.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-tekenen { background-image: url("/illustrations/subjects-wide-dark/tekenen.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-verzorging { background-image: url("/illustrations/subjects-wide-dark/verzorging.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-wiskunde { background-image: url("/illustrations/subjects-wide-dark/wiskunde.webp"); }
:root[data-theme="dark"] .illustration-subject-wide-zorg-welzijn { background-image: url("/illustrations/subjects-wide-dark/zorg-welzijn.webp"); }
/* END donkere-illustraties */

/* Navigatie: in de ingeklapte zijbalk (tablet) geen tekst bij het actieve item. */
@media (min-width: 681px) and (max-width: 1000px) {
  .nav-item.active { font-size: 0; }
}

/* Paginakoppen met een bibliotheekbeeld rechts (verloop naar de paginakleur), en lege toestanden met de
   lege-plank-illustratie. Alleen CSS, dus geen inline stijlen (CSP). In donkere modus iets gedempt. */
#page-voortgang .page-title, #page-toetsen .page-title, #page-help .page-title, #page-instellingen .page-title { position: relative; min-height: 150px; }
#page-voortgang .page-title > *, #page-toetsen .page-title > *, #page-help .page-title > *, #page-instellingen .page-title > * { position: relative; }
#page-voortgang .page-title::before, #page-toetsen .page-title::before, #page-help .page-title::before, #page-instellingen .page-title::before {
  content: ""; position: absolute; top: -10px; right: 0; bottom: 0; width: min(46%, 520px); border-radius: 24px;
  background-repeat: no-repeat; background-size: cover; background-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%); mask-image: linear-gradient(to right, transparent 0%, #000 55%);
}
/* IMAGE_ASSET_REQUIRED (docs/CODEX-AFBEELDINGEN.md): nieuwe kopbeelden in illustrations/app/pages, met het oude beeld als terugval. */
#page-voortgang .page-title::before { background-image: url("/illustrations/app/pages/voortgang.webp"), url("/illustrations/pages/voortgang.webp"); }
#page-toetsen .page-title::before { background-image: url("/illustrations/app/pages/toetsen.webp"), url("/illustrations/pages/toetsen.webp"); }
#page-help .page-title::before { background-image: url("/illustrations/app/pages/help.webp"), url("/illustrations/pages/ai-uitleg.webp"); }
#page-instellingen .page-title::before { background-image: url("/illustrations/app/pages/instellingen.webp"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) #page-voortgang .page-title::before, :root:not([data-theme]) #page-toetsen .page-title::before, :root:not([data-theme]) #page-help .page-title::before, :root:not([data-theme]) #page-instellingen .page-title::before { filter: brightness(0.62) saturate(0.85); }
}
:root[data-theme="dark"] #page-voortgang .page-title::before, :root[data-theme="dark"] #page-toetsen .page-title::before, :root[data-theme="dark"] #page-help .page-title::before, :root[data-theme="dark"] #page-instellingen .page-title::before { filter: brightness(0.62) saturate(0.85); }
@media (max-width: 700px) {
  #page-voortgang .page-title::before, #page-toetsen .page-title::before, #page-help .page-title::before, #page-instellingen .page-title::before { opacity: 0.35; width: 70%; }
}

.ui-state.empty { position: relative; overflow: hidden; min-height: 150px; padding-left: clamp(150px, 26%, 260px); align-items: center; }
.ui-state.empty > span { position: absolute; left: 0; top: 0; bottom: 0; width: clamp(140px, 24%, 240px); height: auto; border-radius: 0; font-size: 0; background: url("/illustrations/app/states/leeg.webp") center / cover no-repeat, url("/illustrations/states/empty.webp") center / cover no-repeat; -webkit-mask-image: linear-gradient(to right, #000 60%, transparent); mask-image: linear-gradient(to right, #000 60%, transparent); }
:root[data-theme="dark"] .ui-state.empty > span { filter: brightness(0.62) saturate(0.85); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ui-state.empty > span { filter: brightness(0.62) saturate(0.85); } }
@media (max-width: 560px) { .ui-state.empty { padding-left: 16px; padding-top: 130px; } .ui-state.empty > span { width: 100%; height: 110px; bottom: auto; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); } }

/* ---------------------------------------------------------------------------
 * Premium afwerking (eigen verzoek 2026-09-26: "moet echt premium aanvoelen"). Kleine, samenhangende
 * correcties bovenop het bibliotheekthema; alle kleuren blijven tokens.
 * ------------------------------------------------------------------------- */

/* Knoppen en velden erven de lettertypefamilie. Zonder dit tekenden tekstknoppen ("Terug naar
   Leerstof", "Terug naar de startpagina") in het systeemlettertype van de browser. */
button, input, select, textarea { font-family: inherit; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3 { text-wrap: balance; }
.subtitle { text-wrap: pretty; }
::selection { background: var(--brass-soft); color: var(--text-primary); }

/* Knoppen: iets meer lucht en een zachte, warme diepte in plaats van platte blokken. */
.primary { padding: 12px 20px; letter-spacing: 0.005em; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 1px 2px rgba(40, 25, 5, 0.12); }
.primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, var(--shadow); }
.quiet-button { padding: 11px 18px; }
.quiet-button:hover { border-color: var(--brass-line); }

/* Mobiel: de ingeklapte zijbalk stak met zijn marge en schaduw nog een paar pixels het beeld in, en
   bleef met Tab bereikbaar. Nu helemaal weg tot hij open gaat. */
@media (max-width: 680px) {
  .sidebar { transform: translateX(calc(-100% - var(--sidebar-inset) - 24px)); visibility: hidden; transition: transform 0.25s var(--ease), visibility 0s linear 0.25s; }
  .sidebar.open { transform: none; visibility: visible; transition: transform 0.25s var(--ease), visibility 0s; }
}

/* "Ga verder met leren": de tijdkeuze stond los over de illustratie. Nu één rustige tekstkolom:
   titel, uitleg, een gesegmenteerde tijdkeuze en de grote knop, met de illustratie vrij rechts. */
.learn-cta { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); grid-template-areas: "text ." "chips ." "cta ."; grid-template-rows: auto auto 1fr; gap: 0 24px; padding: 36px 40px; }
.learn-cta .minutes { margin: 22px 0 22px; padding: 4px; gap: 2px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 999px; }
.learn-cta .minutes-chip { font-size: 13px; font-weight: 600; padding: 7px 14px; border: 0; background: transparent; color: var(--text-secondary); }
.learn-cta .minutes-chip:hover { color: var(--text-primary); }
.learn-cta .minutes-chip.active { background: var(--surface); color: var(--primary); box-shadow: 0 1px 3px rgba(40, 25, 5, 0.14); }
.learn-cta #continueLearning { align-self: end; }
@media (max-width: 760px) {
  .learn-cta { grid-template-columns: 1fr; grid-template-areas: "text" "chips" "cta"; padding: 24px 20px; }
  .learn-cta .minutes { margin: 18px 0; justify-self: stretch; }
  .learn-cta .minutes-chip { flex: 1; }
  .learn-cta #continueLearning { justify-self: stretch; justify-content: center; }
}

/* Vaktegels: lange vaknamen ("Maatschappijwetenschappen") breken op lettergrepen waar de browser Nederlands
   kan afbreken, anders als laatste redmiddel binnen het woord; de pijlknop is subtieler. */
.subject-tile { container-type: inline-size; }
.subject-tile.has-art .subject-tile-text strong { font-size: clamp(17px, 7.2cqi, 24px); overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
.subject-tile-chevron { width: 16px; height: 16px; padding: 9px; transition: transform var(--motion-fast) var(--ease); }
.subject-tile:hover .subject-tile-chevron { transform: translateX(2px); }
.subject-tile:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
@media (max-width: 700px) {
  .subject-grid { gap: 12px; }
  .subject-tile { aspect-ratio: 1 / 1; padding: 14px; border-radius: 18px; }
  .subject-tile.has-art .subject-tile-text strong { font-size: 17px; line-height: 1.15; }
  .subject-tile.has-art .subject-tile-text small { font-size: 12px; }
  .subject-tile-chevron { top: 10px; right: 10px; width: 14px; height: 14px; padding: 7px; }
}

/* Paginakoppen met een beeld (Voortgang, Toetsen, Help): de knoppen lagen over de illustratie en de
   ondertitel liep erin door. Tekst en knoppen nu samen links, het beeld vrij rechts. */
#page-voortgang .page-title, #page-toetsen .page-title, #page-help .page-title, #page-instellingen .page-title { flex-direction: column; align-items: flex-start; gap: 20px; min-height: 190px; }
#page-voortgang .page-title > div:first-child, #page-toetsen .page-title > div:first-child, #page-help .page-title > div:first-child, #page-instellingen .page-title > div:first-child { max-width: min(560px, 54%); }
#page-voortgang .page-title::before, #page-toetsen .page-title::before, #page-help .page-title::before, #page-instellingen .page-title::before { top: 0; bottom: auto; height: 190px; }
@media (max-width: 700px) {
  #page-voortgang .page-title > div:first-child, #page-toetsen .page-title > div:first-child, #page-help .page-title > div:first-child, #page-instellingen .page-title > div:first-child { max-width: none; }
}

/* Lege toestand: titel in de schreefletter, iets ruimer. */
.ui-state { border-radius: var(--radius-lg); }
.ui-state.empty strong { font: 600 20px/1.25 var(--font-display); letter-spacing: -0.01em; }
.ui-state.empty p { font-size: 14px; line-height: 1.55; max-width: 52ch; }

/* Vakpagina: de volle vaktint maakte de pagina grijs (licht) of marineblauw (donker), los van het
   bibliotheekpalet. Nu een zachte menging van de vaktint met de paginakleur. In donker geen vaktint (eigen verzoek
   2026-09-27: "ik wil deze standaard op 0% in de donkere modus, deze kleurt nu mee maar dit is niet mooi"): daar is
   de vakpagina gewoon de paginakleur. */
:root { --subj-page-tint: 38%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --subj-page-tint: 0%; } }
:root[data-theme="dark"] { --subj-page-tint: 0%; }
#page-leerstofvak[class*="subj-"] { background: color-mix(in srgb, var(--subj-tile) var(--subj-page-tint), var(--bg)); }
.period-block { border-color: var(--border); border-radius: var(--radius-lg); }
.period-head strong { font: 600 19px/1.2 var(--font-display); letter-spacing: -0.01em; text-transform: none; color: var(--text-primary); }

/* Instellingen: vier gelijke donkergroene balken naast elkaar voelden zwaar. Nu kaarten met de actie
   onderaan, één gevulde knop per kaart op natuurlijke breedte en Uitloggen als rustige tekstknop. */
.settings-card { display: flex; flex-direction: column; padding: 28px 30px; border-radius: var(--radius-lg); border-color: var(--border); }
.settings-card[hidden] { display: none; }
.settings-card h2 { font-size: 22px; margin: 0 0 10px; }
.settings-card > p { margin: 0 0 22px; color: var(--text-secondary); line-height: 1.55; }
.settings-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; }
.settings-actions > button { width: auto; margin: 0; }
.settings-actions .settings-logout { border-color: transparent; background: transparent; color: var(--text-secondary); }
.settings-actions .settings-logout:hover { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
@media (max-width: 420px) { .settings-actions > button { flex: 1 1 auto; } }

/* Inlogscherm: geen gat boven de knop zolang er geen foutmelding is. */
.auth-form .form-error:empty { display: none; }

/* Help: prettiger leesbare broodtekst. */
.help-section p, .help-section li { font-size: 16px; line-height: 1.7; }
.help-section h2 { font-size: 24px; }
.help-toc, .help-faq { border-radius: var(--radius); }

/* Sectiekoppen op de vakpagina in de schreefletter, zoals de andere koppen. */
.mat-head { font: 600 22px/1.2 var(--font-display); letter-spacing: -0.01em; }

/* Vensters: de rij met bijkomende acties (beheren, bewerken, verwijderen) oogt als een rustige
   voetregel onder de hoofdknoppen in plaats van als een tweede rij gelijkwaardige knoppen. */
.modal { border-radius: 22px; }
.modal .modal-actions + .button-row { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); gap: 2px 14px; }
.modal .modal-actions + .button-row .text-button { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.modal .modal-actions + .button-row .text-button:hover { color: var(--primary); }
.modal .modal-actions + .button-row #deleteSet:hover { color: var(--danger); }

/* Leerstofregel op telefoon: titel kreeg geen breedte en werd letter voor letter onder elkaar gezet.
   Nu een raster: vinkje en icoon links, titel met de status eronder, pijl rechts. */
@media (max-width: 560px) {
  .material-row { padding: 12px; }
  .material-row-main { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 6px 12px; }
  .material-row-main > :first-child { grid-column: 1; grid-row: 1 / 3; }
  .material-row-main > .material-row-icon { grid-column: 2; grid-row: 1 / 3; }
  .material-row-main > .material-row-open { grid-column: 3; grid-row: 1; }
  .material-row-main > .material-status { grid-column: 3; grid-row: 2; justify-self: start; padding: 4px 10px; font-size: 12px; }
  .material-row-main > .material-row-chevron { grid-column: 4; grid-row: 1 / 3; }
}

/* Leersessie: ruimere leestekst en meer lucht tussen titel, uitleg en knop. */
/* Eigen verzoek 2026-10-05: de titel was te groot en de uitleg nauwelijks leesbaar. Titel kleiner, de uitleg is de
   hoofdzaak (ook als de toelichting bij een aanvulling ertussen staat), en die toelichting is een leesbaar kader. */
.study-card h1:not(.study-prompt) { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; letter-spacing: -0.3px; margin: 6px 0 14px; }
.study-card h1 + .study-note, .study-card h2 + .study-note, .study-card .study-enriched-hint + .study-note { font-size: 18px; line-height: 1.7; color: var(--text-primary); max-width: 62ch; margin: 0 0 28px; }
.study-enriched-hint { font-size: 14px; line-height: 1.5; color: var(--text-primary); background: var(--warning-soft); border-left: 3px solid var(--warning); border-radius: 8px; padding: 10px 14px; margin: 0 0 18px; max-width: 62ch; }
@media (max-width: 700px) { .study-card h1 + .study-note, .study-card h2 + .study-note, .study-card .study-enriched-hint + .study-note { font-size: 17px; } }
/* "Ik leg het nog een keer anders uit" (2026-10-05): dezelfde stof op een andere manier, net zo leesbaar als de uitleg. */
.explain-card > .text-button { margin-bottom: 12px; }
.explain-form { display: inline-block; margin: -4px 0 18px; padding: 4px 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font: 700 13px "DM Sans"; }
.explain-body { max-width: 62ch; margin-bottom: 24px; }
.explain-body .study-note { font-size: 18px; line-height: 1.7; color: var(--text-primary); margin: 0 0 14px; }
.explain-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: explain-step; }
.explain-steps li { position: relative; padding-left: 46px; font-size: 18px; line-height: 1.7; color: var(--text-primary); counter-increment: explain-step; }
.explain-steps li::before { content: counter(explain-step); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font: 700 15px "DM Sans"; }
.explain-video { position: relative; display: block; width: 100%; max-width: 560px; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #23282e; cursor: pointer; }
.explain-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.explain-video-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(12, 15, 18, 0.66); color: #fff; transform: translate(-50%, -50%); }
.explain-video-play svg { width: 28px; height: 28px; margin-left: 3px; }
.explain-video:hover .explain-video-play, .explain-video:focus-visible .explain-video-play { background: var(--primary); color: var(--on-primary); }
.explain-video-frame { max-width: 560px; box-shadow: none; }
.explain-video-title { display: grid; gap: 2px; margin: 12px 0 4px; }
.explain-video-title small { color: var(--muted); }
@media (max-width: 700px) { .explain-body .study-note, .explain-steps li { font-size: 17px; } }
.study-card { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
@media (max-width: 700px) { .library-head select { width: 100%; } }

/* ---- Schermvullend leren (eigen verzoek 2026-09-26) ----
   Kaartjes, grammatica en de andere oefenvormen op de oefenpagina volgen de leersessie: geen menu of
   bovenbalk, geen kaart eromheen, alleen de vraag midden op een rustige pagina. */
.practice-top { max-width: 720px; margin: 0 auto 22px; }
/* Alleen als de oefenpagina de actieve pagina is: zonder `.active` stond deze (lege) pagina ook tijdens een leersessie
   in beeld, schermhoog boven de leerkaart, zodat de uitleg pas na scrollen zichtbaar werd. */
body.studying #page-oefenen.active { min-height: 100dvh; display: flex; flex-direction: column; }
body.studying #practiceStage { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 8vh; }
body.studying .vocab-session { background: none; border: 0; padding: 0 0 24px; width: 100%; max-width: 720px; }
body.studying .vocab-session .vocab-prompt { font-size: clamp(28px, 5vw, 44px); }

/* Aanvulling (verrijking richting het leerdoel, 2026-09-26): de "Aanvulling"-badge hergebruikt .method-badge;
   hier alleen de plaatsing en het blok met aanvullingen onder een leerblok. */
.cards-editor-field .enriched-badge { margin: 4px 0 0; }
.vocab-prompt .enriched-badge { font-size: 11px; vertical-align: super; }
.block-enrichment { margin: 18px 0 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.block-enrichment h2 { font-size: 17px; margin: 0 0 4px; }
.block-enrichment .muted-hint { margin: 0 0 6px; font-size: 13px; }

/* ---- Grammatica als eigen leerlijn (eigen verzoek 2026-09-26) ----
   Uitleg vóór het oefenen: eerst het boek (de rode draad), daaronder de extra uitleg. Rustige, dekkende vlakken. */
body.studying .vocab-session .grammar-prompt { font-size: clamp(20px, 3.2vw, 28px); line-height: 1.4; }
.grammar-explain { text-align: left; }
.grammar-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin: 14px 0 0; text-align: left; }
.grammar-block p { margin: 0 0 8px; line-height: 1.6; color: var(--text-primary); }
.grammar-block.grammar-extra { background: var(--surface-soft); }
.grammar-block .grammar-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brass); margin-bottom: 6px; }
.grammar-examples, .grammar-mistakes { margin: 8px 0 0; padding-left: 18px; }
.grammar-examples li, .grammar-mistakes li { margin: 4px 0; line-height: 1.5; }
.grammar-examples small, .grammar-mistakes small { display: block; color: var(--text-secondary); }
.grammar-block h3 { font-size: 15px; margin: 14px 0 4px; }
.grammar-note, .grammar-goal { color: var(--text-secondary); font-size: 15px; line-height: 1.6; margin: 8px 0 0; }
.grammar-hints { margin: 12px 0 0; text-align: left; color: var(--text-secondary); }
.grammar-hints summary { cursor: pointer; font-weight: 600; }
.pv-goal-grammar { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 13px; }
/* ---- Toetspagina en leerstof aanvinken (eigen verzoek 2026-09-26) ----
   Egale kleuren uit de voortgangsreeks (.pv levert --pv-new/-busy/-done). Vinkjes zijn op telefoon hele
   regels van minstens 44 px hoog. Geen rood: minder onder controle is een aandachtspunt, geen fout. */
.at-page .page-title { margin-bottom: 0; }
.at-page h1 { margin: 2px 0 4px; }
.at-summary .at-meter { height: 10px; margin: 10px 0 12px; max-width: 520px; }
.at-summary strong { font-size: 18px; }
.at-summary p { font-size: 14px; }
.at-summary small { display: block; margin-top: 8px; font-size: 12px; letter-spacing: 0; font-weight: 600; }
.at-actions { align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.at-hint { color: var(--muted); font-size: 13px; flex-basis: 100%; }
.at-materials { list-style: none; margin: 8px 0 0; padding: 0; }
.at-material { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.at-material:first-child { border-top: 0; }
.at-material-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.at-material-text strong { font-size: 15px; overflow-wrap: anywhere; }
.at-material-text span { font-size: 14px; color: var(--ink); }
.at-material-text small { color: var(--muted); font-size: 12px; }
.at-material-side { display: flex; align-items: center; gap: 12px; }
.at-material-side b { font-size: 15px; min-width: 3ch; text-align: right; }
#assessmentMaterialsDisclosure { margin-top: 14px; }
.at-period { border: 1px solid var(--line); border-radius: var(--radius, 12px); padding: 10px 14px 12px; margin: 12px 0 0; background: var(--surface); }
.at-period legend { font-weight: 700; padding: 0 6px; }
.at-all { font-size: 13px; margin: 2px 0 6px; }
.at-check { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 4px; border-top: 1px solid var(--line); cursor: pointer; }
.at-check input { width: 20px; height: 20px; flex: none; accent-color: var(--primary); }
.at-check span { overflow-wrap: anywhere; }
.subject-assessments-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; }
.subject-assessments-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-secondary); }
.subject-assessments-label svg { width: 18px; height: 18px; }
.subject-assessment { display: inline-flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.subject-assessment small { color: var(--muted); font-size: 12px; font-weight: 500; }
.pv-assessments { list-style: none; margin: 0; padding: 0; }
.pv-assessment { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 0; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.pv-assessments li:first-child .pv-assessment { border-top: 0; }
.pv-assessment small { color: var(--muted); font-size: 12px; }
.pv-assessment .pv-meter { display: block; grid-column: 1 / -1; margin-top: 2px; }
.pv-assessment .pv-meter i { display: block; }
.pv-assessment:hover strong { color: var(--primary); }
@media (max-width: 560px) {
  .at-material { grid-template-columns: minmax(0, 1fr); }
  .at-material-side { justify-content: space-between; }
  .at-actions > button { width: 100%; }
}

/* ---- Zoeken in de eigen leerstof en bronstof per leerdoel (2026-09-26) ----
   Rustig en egaal: zoekveld in dezelfde stijl als de bibliotheekzoekbalk, treffers als regels met een haarlijn,
   zoekwoorden als zachte messingmarkering. Bronstof gebruikt geen rood: weinig bronstof is een tip, geen fout. */
.source-search { margin: -6px 0 20px; }
.source-search-form { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.source-search-field { flex: 1; min-width: 0; height: 46px; border-radius: 14px; padding: 0 16px; }
.source-search-field input { background: transparent; color: var(--text-primary); font: 500 15px "DM Sans"; height: 100%; }
.source-search-form .quiet-button { height: 46px; flex-shrink: 0; }
.source-search-note { margin: 6px 0 0; color: var(--text-secondary); font-size: 13px; }
.source-search-results { margin-top: 10px; }
.source-search-results .form-error { margin: 0; }
.source-count { margin: 4px 0 2px; color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.source-results { list-style: none; margin: 0; padding: 0; }
.source-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: start; padding: 14px 0; border-top: 1px solid var(--border); }
.source-result:first-child { border-top: 0; }
.source-result-text { min-width: 0; }
.source-result-text strong { display: block; font-size: 15px; color: var(--text-primary); overflow-wrap: anywhere; }
.source-result-text small { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 12px; overflow-wrap: anywhere; }
.source-result-text p { margin: 6px 0 0; color: var(--text-primary); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.source-result mark { background: var(--brass-soft); color: var(--text-primary); border-radius: 3px; padding: 0 2px; }
.source-result-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.source-result-actions .text-button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.source-result-actions svg { width: 16px; height: 16px; }
@media (max-width: 560px) {
  .source-search-form { flex-direction: column; align-items: stretch; }
  .source-result { grid-template-columns: minmax(0, 1fr); }
  .source-result-actions { flex-direction: row; justify-content: space-between; align-items: center; }
}
.goal-coverage { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 13px; }
.goal-coverage-level { font-weight: 600; color: var(--text-primary); }
.goal-coverage-hint { display: block; margin-top: 4px; padding: 6px 10px; border-radius: 8px; background: var(--warning-soft); color: var(--text-primary); font-size: 13px; line-height: 1.45; }
.assessment-coverage .quiet-disclosure { margin: 0; }
.assessment-coverage summary { font-size: 15px; color: var(--text-primary); }
.coverage-goals { list-style: none; margin: 8px 0 0; padding: 0; }
.coverage-goal { padding: 12px 0; border-top: 1px solid var(--border); }
.coverage-goal:first-child { border-top: 0; }
.coverage-goal p { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.assessment-coverage .button-row { margin: 8px 0 4px; }

/* ===========================================================================
 * Startpagina (niet ingelogd): kop, de startpagina zelf (.home-*), de pagina's Abonnement, Voorwaarden en Privacy,
 * en de voet. Opmaak in src/frontend/landing.ts; alles wat de startpagina aan CSS heeft staat in dit ene blok
 * (sinds 2026-09-27, zie UI.md "Startpagina"). Alleen tokens, dus licht en donker volgen vanzelf het thema; geen
 * doorschijnende vlakken. De schermafbeeldingen staan in illustrations/screens/, per thema een eigen bestand: CSS
 * toont alleen dat van het actieve thema (dezelfde selectors als tokens.css).
 * ========================================================================= */
/* scroll-padding-top: wat in beeld scrolt (een onderdeel uit het menu, of een link of knop die met Tab of Shift+Tab de
   focus krijgt), komt onder de vaste kop terecht en niet erachter (WCAG 2.4.11). */
.landing { position: fixed; inset: 0; z-index: 200; overflow-x: hidden; overflow-y: auto; scroll-padding-top: 88px; background: var(--bg); color: var(--text-primary); }
.landing[hidden] { display: none; }
/* Startpagina van de server, terwijl het adres om een andere pagina vraagt: onzichtbaar tot app.js die toont (theme-init.js). */
html.boot-pending .landing[data-prerendered] { visibility: hidden; }
/* Zolang de startpagina of het inlogscherm openstaat, is de app erachter ook echt weg: anders kwam je met Tab of een
   schermlezer in knoppen die achter de startpagina verborgen zitten (WCAG 2.4.3 en 2.4.11). visibility houdt de opmaak
   van de app intact. */
.landing:not([hidden]) ~ .app-shell, #authScreen:not([hidden]) ~ .app-shell { visibility: hidden; }
.landing a:not([class]) { color: var(--primary); text-underline-offset: 2px; }
/* Focus: een dekkende messing rand (licht 5,2:1 op --bg) in plaats van de doorschijnende --focus-ring van de app, die op
   de achtergrond maar 1,6:1 haalt (WCAG 1.4.11). Een onderdeel dat de focus krijgt via het menu is geen bedieningselement
   en krijgt geen rand. */
.landing :focus-visible { outline: 2px solid var(--brass-ink); outline-offset: 3px; box-shadow: none; }
.landing [tabindex="-1"]:focus { outline: none; }
.landing .eyebrow { color: var(--brass-ink); margin-bottom: 12px; }

/* Kop: logo, hoofdmenu (alleen op de startpagina, vanaf tabletbreedte), inloggen en aanmelden. Blijft bovenaan staan. */
.landing-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px 28px; min-height: 72px; padding: 10px clamp(16px, 4vw, 48px); background: var(--bg); border-bottom: 1px solid var(--border); }
.landing-bar .brand { margin-right: auto; padding: 0; gap: 10px; font-size: 26px; color: var(--sidebar-brand-ink); text-decoration: none; }
.landing-bar .brand-mark { width: 48px; height: 36px; }
.landing-skip { position: absolute; left: 12px; top: -80px; z-index: 3; padding: 10px 16px; background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; }
.landing-skip:focus { top: 12px; }
.landing-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); }
.landing-navlink { padding: 10px 2px; border-bottom: 2px solid transparent; color: var(--text-primary); font-weight: 600; font-size: 15px; text-decoration: none; }
.landing-navlink:hover { color: var(--primary); border-bottom-color: var(--brass); }
.landing-link { color: var(--primary); font-weight: 600; text-decoration: none; }
.landing-actions { display: flex; align-items: center; gap: 8px 14px; }
.landing-login { appearance: none; padding: 10px 6px; background: none; border: 0; color: var(--text-primary); font: 600 15px "DM Sans"; white-space: nowrap; cursor: pointer; }
.landing-login:hover { color: var(--primary); }
.landing-signup { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--primary); border: 1.5px solid var(--primary); border-radius: var(--radius-sm); color: var(--on-primary); font: 700 15px "DM Sans"; white-space: nowrap; text-decoration: none; }
.landing-signup:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
/* Licht of donker: dezelfde knop als in de app (theme.ts), hier even groot als de andere knoppen in de kop. */
.landing-bar .theme-toggle { width: 44px; height: 44px; }
@media (max-width: 879px) {
  .landing-nav:not(.landing-nav-back) { display: none; }
}
@media (max-width: 560px) {
  .landing-bar { min-height: 64px; gap: 8px; padding-block: 8px; }
  .landing-bar .brand { font-size: 22px; }
  .landing-bar .brand-mark { width: 40px; height: 30px; }
  .landing-actions { gap: 4px 8px; }
  .landing-signup { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .landing-login { font-size: 14px; }
  .landing-bar .theme-toggle { width: 40px; height: 40px; }
}
@media (max-width: 400px) {
  .landing-bar .brand span { display: none; }
}

/* De startpagina: hero, "Zo werkt het", de focus-app, de prijs en waarom de app er is. */
.home-inner { max-width: 1160px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.home-section { padding: clamp(48px, 7vw, 88px) 0; }
.home-band { background: var(--surface); border-block: 1px solid var(--border); }
.home h2 { margin: 0 0 14px; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; }
.home h3 { margin: 0 0 8px; font: 700 19px/1.3 "DM Sans"; }
.home p { line-height: 1.6; }
.home-intro { max-width: 40em; margin: 0 0 clamp(28px, 4vw, 44px); color: var(--text-secondary); font-size: 17px; }
.home-checks { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.home-checks li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.home-checks-note { margin: 10px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.4; }
.home-check-icon { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.home-check-icon svg { width: 14px; height: 14px; stroke-width: 2.2; }
.home .home-cta { min-height: 48px; padding: 0 24px; font-size: 16px; }

.home-hero { padding: clamp(32px, 6vw, 80px) 0 clamp(48px, 7vw, 88px); }
.home-hero .home-inner { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
.home-hero h1 { max-width: 14em; margin: 0 0 18px; font-size: clamp(34px, 5vw, 56px); line-height: 1.08; }
.home-levels { color: var(--text-secondary); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.home-levels strong { color: var(--text-primary); font-weight: 600; }
.home-lead { max-width: 34em; margin: 0 0 26px; color: var(--text-secondary); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; text-wrap: pretty; }
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.home-actions .quiet-button { min-height: 48px; padding: 0 22px; font-size: 16px; }
@media (min-width: 960px) {
  .home-hero .home-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .home-actions > * { flex: 1 1 100%; }
}

/* Schermafbeeldingen: echte opnames van de app, als inhoud (ook in de prikkelarme modus). */
.home-shot { margin: 0; }
.home-shot img { display: block; width: 100%; height: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lift); }
.home-shot-light { display: block; }
.home-shot-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .home-shot-light { display: none; }
  :root:not([data-theme]) .home-shot-dark { display: block; }
}
:root[data-theme="dark"] .home-shot-light { display: none; }
:root[data-theme="dark"] .home-shot-dark { display: block; }
@media (max-width: 560px) {
  .home-hero-shot { max-width: 300px; margin: 0 auto; }
  .home-hero-shot img { border-radius: 24px; }
}

/* Zo werkt het: drie kaarten met een pijl ertussen. Het beeld van Codex (landing/stap-<n>.webp) valt als laag over het
   icoon; zolang het bestand er niet is, zie je het icoon. De opname van de app is onderaan afgesneden en loopt zacht weg. */
.home-steps { list-style: none; display: grid; gap: 20px clamp(28px, 3vw, 40px); margin: 0; padding: 0; }
.home-step { position: relative; display: flex; flex-direction: column; padding: clamp(20px, 2.4vw, 26px) clamp(20px, 2.4vw, 26px) 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.home-step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.home-step h3 { margin: 0; }
.home-step p { margin: 0; color: var(--text-secondary); }
.home-step-art { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--primary-soft); color: var(--primary); }
.home-step-art svg { width: 26px; height: 26px; }
.home-step-art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-size: cover; background-position: center; background-repeat: no-repeat; }
.home-step-art-1::after { background-image: url("/illustrations/app/landing/stap-1.webp"); }
.home-step-art-2::after { background-image: url("/illustrations/app/landing/stap-2.webp"); }
.home-step-art-3::after { background-image: url("/illustrations/app/landing/stap-3.webp"); }
:root[data-theme="dark"] .home-step-art-1::after { background-image: url("/illustrations/app/landing/stap-1-dark.webp"), url("/illustrations/app/landing/stap-1.webp"); }
:root[data-theme="dark"] .home-step-art-2::after { background-image: url("/illustrations/app/landing/stap-2-dark.webp"), url("/illustrations/app/landing/stap-2.webp"); }
:root[data-theme="dark"] .home-step-art-3::after { background-image: url("/illustrations/app/landing/stap-3-dark.webp"), url("/illustrations/app/landing/stap-3.webp"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .home-step-art-1::after { background-image: url("/illustrations/app/landing/stap-1-dark.webp"), url("/illustrations/app/landing/stap-1.webp"); }
  :root:not([data-theme]) .home-step-art-2::after { background-image: url("/illustrations/app/landing/stap-2-dark.webp"), url("/illustrations/app/landing/stap-2.webp"); }
  :root:not([data-theme]) .home-step-art-3::after { background-image: url("/illustrations/app/landing/stap-3-dark.webp"), url("/illustrations/app/landing/stap-3.webp"); }
}
.home-step-number { position: absolute; z-index: 1; top: -7px; left: -7px; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--bg); border-radius: 50%; background: var(--primary); color: var(--on-primary); font: 700 12px "DM Sans"; }
.home-step-shot { width: 100%; max-width: 260px; height: 300px; margin: auto auto 0; padding-top: 22px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, black 72%, transparent); mask-image: linear-gradient(to bottom, black 72%, transparent); }
.home-step-shot img { border-radius: 24px 24px 0 0; box-shadow: none; }
@media (min-width: 900px) {
  .home-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-step:not(:last-child)::after { content: "→" / ""; position: absolute; top: 44px; right: calc(-1 * clamp(28px, 3vw, 40px)); width: clamp(28px, 3vw, 40px); color: var(--primary); font: 700 22px "DM Sans"; text-align: center; }
}

/* De video onder "Zo werkt het": een brede speler met voorplaatje; op de telefoon de staande speler. */
.home-video { max-width: 960px; margin: clamp(28px, 4vw, 44px) auto 0; }
.home-video video { display: block; width: 100%; height: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.home-video .home-video-9x16 { display: none; }
.home-video-note { margin: 10px 0 0; color: var(--text-secondary); font-size: 14px; text-align: center; }
@media (max-width: 560px) {
  .home-video { max-width: 320px; }
  .home-video .home-video-16x9 { display: none; }
  .home-video .home-video-9x16 { display: block; }
}

/* Maatwerk: de stelling achter de app, kop links en de tekst in een kader ernaast (op de telefoon eronder). */
.home-tailored .home-inner { display: grid; gap: clamp(20px, 4vw, 56px); align-items: center; }
.home-tailored h2 { margin: 0; }
.home-tailored-card { padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 32px) clamp(22px, 3vw, 32px) clamp(26px, 3.4vw, 40px); background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.home-tailored-card p { margin: 0; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.6; text-wrap: pretty; }
@media (min-width: 900px) {
  .home-tailored .home-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.home-tutor .home-inner { display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; }
.home-tutor-text > p { max-width: 36em; margin: 0 0 22px; color: var(--text-secondary); font-size: 17px; }
.home-tutor-text > .home-tutor-price { margin: 22px 0 0; font-size: 15px; }
@media (min-width: 900px) {
  .home-tutor .home-inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
/* Uitlegfilmpjes: een opname van de TV naast de tekst; de opname krijgt de meeste ruimte. Op brede schermen staat de
   opname links en de tekst rechts (eigen verzoek 2026-10-09: "kun je deze tekst en afbeelding omdraaien?"); in de HTML
   en op de telefoon blijft de tekst eerst, zodat je de kop als eerste leest. */
.home-tvsection .home-inner { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.home-tv-text > p:not(.eyebrow) { max-width: 34em; margin: 0 0 22px; color: var(--text-secondary); font-size: 17px; }
.home-tv-eyebrow { display: flex; align-items: center; gap: 8px; }
.home-tv-eyebrow svg { width: 18px; height: 18px; }
.home-tv-shot img { border-radius: var(--radius-lg); }
@media (min-width: 960px) {
  .home-tvsection .home-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .home-tvsection .home-tv-shot { order: -1; }
}
@media (max-width: 560px) {
  .home-tv-shot { max-width: 300px; margin: 0 auto; }
  .home-tv-shot img { border-radius: 24px; }
}

.home-focus .home-inner { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
.home-focus-text > p { max-width: 36em; margin: 0 0 22px; color: var(--text-secondary); font-size: 17px; }
.home-downloads { padding: clamp(20px, 3vw, 28px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.home-downloads h3 { margin-bottom: 14px; }
.home-downloads p { margin: 0; color: var(--text-secondary); }
.home-downloads .home-download-beta { margin: 0 0 14px; font-size: 14px; }
.home-download-list { list-style: none; display: grid; gap: 10px; margin: 0 0 14px; padding: 0; }
.home-download { width: 100%; min-height: 48px; }
@media (min-width: 900px) {
  .home-focus .home-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
}

/* Vakken, ouders en vragen: drie rustige kaarten naast elkaar (op smalle schermen onder elkaar). */
.home-trio .home-inner { display: grid; gap: 20px; }
.home-card { min-width: 0; padding: clamp(20px, 2.6vw, 28px); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.home-card h2 { margin: 0 0 10px; font-size: 22px; line-height: 1.25; }
.home-card > p { margin: 0 0 16px; color: var(--text-secondary); font-size: 15px; }
.home-trio .home-checks { gap: 8px; font-size: 15px; }
.home-subject-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; margin: 0; padding: 0; }
.home-subject-list li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 8px 5px 5px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; font-weight: 600; hyphens: auto; }
.home-subject-art { flex: none; width: 36px; height: 36px; border-radius: 10px; background-color: var(--surface-soft); background-image: var(--img-subject, none); background-size: cover; background-position: center; }
.home-subject-name { min-width: 0; hyphens: auto; }
.home .home-subject-more { margin: 12px 0 0; color: var(--text-secondary); font-size: 14px; }
.home-faq-item { border-top: 1px solid var(--border); }
.home-faq-item summary { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; font-weight: 600; font-size: 15px; cursor: pointer; list-style: none; }
.home-faq-item summary::-webkit-details-marker { display: none; }
.home-faq-item summary::after { content: "+" / ""; flex: none; color: var(--primary); font-weight: 700; }
.home-faq-item[open] summary::after { content: "−" / ""; }
.home-faq-item p { margin: 0 0 14px; color: var(--text-secondary); font-size: 15px; }
.home .home-faq-more { margin: 0; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 14px; }
@media (min-width: 960px) {
  .home-trio .home-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

.home-price { display: grid; gap: clamp(20px, 4vw, 48px); max-width: 940px; margin: 0 auto; padding: clamp(24px, 4vw, 40px); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.home-price h2 { margin-bottom: 12px; }
.home-price-amount { margin: 0; color: var(--text-secondary); font-size: 17px; }
.home-price-amount strong { margin-right: 6px; color: var(--text-primary); font: 600 clamp(40px, 5vw, 52px)/1.05 var(--font-display); letter-spacing: -0.02em; }
.home-price-unit { margin: 8px 0 0; color: var(--text-secondary); }
.home-price-body .home-checks { margin-bottom: 24px; }
@media (min-width: 760px) {
  .home-price { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; }
}
.home-about p { max-width: 40em; margin: 0; color: var(--text-secondary); font-size: 17px; }
/* Onderaan nog één keer de knop, in een rustige balk. */
.home-final { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: clamp(32px, 5vw, 48px); padding: clamp(20px, 3vw, 28px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.home .home-final-title { margin: 0; color: var(--text-primary); font: 700 22px/1.3 "DM Sans"; }
.home-final .home-actions { margin: 0; }

/* Aanmelden, voorwaarden en privacy: smalle leeskolom met het formulier. */
.landing-main { max-width: 980px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 32px) 48px; }
.landing-main p { line-height: 1.6; }
.landing-narrow { max-width: 720px; }
.landing-narrow h1 { margin: 28px 0 12px; font-size: clamp(26px, 4vw, 36px); }
.landing-pricebox { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 14px 0 18px; }
.landing-pricebox div { padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.landing-pricebox strong { display: block; color: var(--text-primary); font-size: 22px; }
.landing-pricebox span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 13px; line-height: 1.4; }
.landing-form { display: grid; gap: 18px; max-width: 640px; margin-top: 16px; }
.landing-form fieldset { min-width: 0; margin: 0; padding: 16px 18px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.landing-form legend { padding: 0 8px; font-weight: 700; }
.landing-form label { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 600; }
.landing-form label small { display: block; margin-top: 4px; color: var(--text-secondary); font-weight: 400; }
.landing-form input:not([type="checkbox"]), .landing-form select, .landing-form textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 9px; color: var(--text-primary); font: inherit; }
.landing-check { display: flex !important; align-items: flex-start; gap: 10px; font-size: 14px !important; font-weight: 400 !important; line-height: 1.45; }
.landing-check input { flex: none; width: auto !important; margin: 3px 0 0 !important; }
.landing-price, .landing-mandate { margin: 4px 0 14px; padding: 10px 14px; background: var(--surface-soft); border-radius: var(--radius-sm); font-size: 14px; line-height: 1.5; }
.landing-mandate { padding: 12px 14px; font-size: 13px; line-height: 1.55; }
.landing-done { max-width: 640px; padding: 20px 22px; background: var(--success-soft); border: 1px solid var(--border); border-radius: var(--radius); }
.landing-form a, .legal a { color: var(--primary); }
.legal h1 { margin-top: 28px; }
.legal-section { padding: 14px 0; border-top: 1px solid var(--border); }
.legal-section h2 { margin: 0 0 8px; font-size: 18px; }
.legal-section p { line-height: 1.65; }
/* Verborgen veld tegen formulierrobots: niet zichtbaar, wel in de pagina. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Formulieren voor aanmelden (#abonnement, aanvragen of aanmelden) en voor herroepen en opzeggen (#opzeggen). */
.landing-form > .primary { justify-self: start; }
/* Het hidden-attribuut moet winnen van display: grid (.landing-form) en de display van .primary. */
.landing-form[hidden], .landing-form [hidden], .cancel-page [hidden] { display: none; }
.landing-form .form-error:empty { display: none; }
.landing-form .form-error:not(:empty) { font-size: 14px; font-weight: 600; border-left: 3px solid; padding-left: 10px; }
.landing-form .signup-field-error { margin: -4px 0 12px; }
.signup-minor { font-size: 14px; }
.signup-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.signup-show-password { margin-top: -4px; }
.signup-consent { display: grid; gap: 4px; }
.signup-facts { font-size: 13px; line-height: 1.55; }
.signup-facts p { margin: 0 0 6px; max-width: 44em; }
.signup-summary { margin: 0; }
.signup-summary p { margin: 0; }
.signup-summary ul { margin: 6px 0 0; padding-left: 20px; }
.signup-summary li + li { margin-top: 4px; }
/* #opzeggen: herroepen en opzeggen als twee blokken onder elkaar, gescheiden door een haarlijn. */
.landing-section { padding: 24px 0; border-top: 1px solid var(--border); }
.landing-section h2 { margin: 0 0 12px; font-size: 24px; }
.landing-section p { max-width: 44em; line-height: 1.65; }
.landing-main .hint { color: var(--text-secondary); font-size: 14px; }
.cancel-block > .primary { margin-top: 4px; }
.cancel-block .landing-done { margin-top: 12px; }
.cancel-block .landing-done h3 { margin: 0 0 6px; }
.legal-model { border-left: 2px solid; padding: 2px 0 2px 14px; margin: 12px 0 4px; font-size: 14px; line-height: 1.55; }
.legal-model ul { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 380px) { .signup-pair { grid-template-columns: minmax(0, 1fr); } }

/* Voet: wie de aanbieder is (art. 3:15d BW) en de vaste links. */
.landing-foot { background: var(--bg); border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 14px; }
.landing-foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 48px; max-width: 1160px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 48px) 36px; }
.landing-foot-brand { margin: 0 0 10px; color: var(--text-primary); font-weight: 600; }
.landing-foot-note { margin: -6px 0 10px; font-size: 12px; }
.landing-foot-company { font-style: normal; line-height: 1.6; }
.landing-foot-vat { margin: 10px 0 0; }
.landing-foot-trustmark { display: flex; flex-direction: column; gap: 2px; margin: 14px 0 0; }
.landing-foot-trustmark a { color: var(--primary); font-weight: 600; text-decoration: none; }
.landing-foot-trustmark a:hover { text-decoration: underline; }
.home-price-rating { margin: 10px 0 0; font-size: 15px; }
.home-price-rating a { color: var(--primary); font-weight: 600; text-decoration: none; }
.home-price-rating a:hover { text-decoration: underline; }
.landing-foot-links { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 20px; }
.landing-foot-links a, .landing-foot-links .text-button { padding: 6px 0; color: var(--primary); font-size: 14px; font-weight: 600; text-decoration: none; }
.landing-foot-links a:hover, .landing-foot-links .text-button:hover { text-decoration: underline; }
/* Eén regel over de filmpjes onder "Zo werkt het". */
/* END startpagina */

/* ---- Uitnodiging en Instellingen (2026-09-27): "Toon wachtwoord" bij de uitnodiging en de link naar opzeggen. ---- */
/* De keuzelijsten van de uitnodiging volgen het thema zoals de invoervelden (auth.css maakt ze wit; in donkere modus stond er lichte tekst op wit). */
.auth-panel .auth-form select { background: var(--surface); color: var(--text-primary); border-color: var(--border-strong); }
.auth-form .show-password { display: flex; align-items: center; gap: 8px; margin-top: -6px; font-weight: 600; }
.auth-form .show-password input { display: inline-block; width: auto; margin: 0; padding: 0; }
.auth-form .form-error:not(:empty) { font-size: 13px; }
/* Wachtwoord vergeten en het scherm van een geblokkeerd account (2026-10-03). */
.auth-form .auth-forgot { align-self: flex-start; }
.auth-done { margin-top: 26px; }
.auth-panel .blocked-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 20px; }
.auth-panel .form-hint .text-button { padding: 0; }
.settings-card > .settings-cancel-link { margin: 16px 0 0; font-size: 14px; }
.settings-cancel-link a { color: var(--primary); font-weight: 600; text-underline-offset: 3px; }

/*
 * Prikkelarme modus (Instellingen, per apparaat; `src/frontend/calm.ts`, vroeg gezet door `theme-init.js`).
 * Klasse `calm` op <html>. Wat het doet (zie UI.md "Prikkelarme modus"):
 * 1. geen sfeerbeelden: geen illustraties op vaktegels, vak- en periodekoppen, paginakoppen, lege toestanden en de
 *    "Ga verder met leren"-kaart; vaktegels worden rustige, lage kaarten in de vaktint;
 * 2. geen tweede uitlegregels: eyebrows en onderregels onder paginatitels verdwijnen, ook de eyebrows op de
 *    startpagina (de schermafbeeldingen daar blijven staan: die zijn inhoud, geen sfeerbeeld);
 * 3. geen bijzaak-cijfers: de grafiek "Activiteit per week" op Voortgang en de minutenkeuze op de leerkaart
 *    (dan geldt de standaardduur) verdwijnen;
 * 4. geen beweging: overgangen, hover-lift en animaties staan uit (alleen laadrondjes draaien nog);
 * 5. één duidelijke actie: naast de gevulde hoofdknop worden bijkomende knoppen in een paginakop tekstknoppen.
 */
:root.calm *, :root.calm *::before, :root.calm *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
:root.calm .status-spinner, :root.calm .ui-state.loading > span { animation: spin .7s linear infinite !important; }
:root.calm .subject-tile:hover { transform: none; }
:root.calm #page-leren .eyebrow, :root.calm #page-leren .subtitle,
:root.calm .page .page-title .eyebrow, :root.calm .page .page-title .subtitle,
:root.calm .subject-hero .subtitle { display: none; }
:root.calm .page-title h1::after { display: none; }
:root.calm .page-title h1 { padding-bottom: 0; }
:root.calm #page-voortgang .page-title::before, :root.calm #page-toetsen .page-title::before, :root.calm #page-help .page-title::before, :root.calm #page-instellingen .page-title::before { display: none; }
:root.calm #page-voortgang .page-title, :root.calm #page-toetsen .page-title, :root.calm #page-help .page-title, :root.calm #page-instellingen .page-title { min-height: 0; }
:root.calm .subject-tile-art, :root.calm .subject-tile-deco, :root.calm .subject-hero-art, :root.calm .period-art { display: none; }
:root.calm .subject-tile, :root.calm .subject-tile.has-art { background: var(--subj-tile); aspect-ratio: auto; min-height: 96px; box-shadow: none; }
:root.calm .subject-tile.has-art .subject-tile-text strong { color: var(--text-primary); text-shadow: none; font-size: 18px; }
:root.calm .subject-tile.has-art .subject-tile-text small { color: var(--text-secondary); text-shadow: none; font-size: 14px; }
:root.calm .subject-tile-add { aspect-ratio: auto; min-height: 96px; }
:root.calm .learn-cta { background: var(--surface); min-height: 0; box-shadow: none; row-gap: 16px; }
:root.calm .learn-cta .minutes, :root.calm .learn-cta .eyebrow, :root.calm .learn-cta-text p { display: none; }
:root.calm .pv-activity { display: none; }
:root.calm .ui-state.empty { padding-left: 24px; padding-top: 24px; min-height: 0; }
:root.calm .ui-state.empty > span { display: none; }
:root.calm .page-title .quiet-button { background: none; border-color: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
:root.calm .landing .eyebrow { display: none; }
:root.calm .home-shot img, :root.calm .home-downloads { box-shadow: none; }

/* ===========================================================================
 * Nieuwe UI voor scholieren (eigen verzoek 2026-09-30, UI.md "Nieuwe UI voor scholieren").
 * Moderne, rustige app voor 12-17 jaar: warm off-white, witte kaarten, donkergroen als merkkleur, een sans-serif
 * voor alle koppen en gedoseerde accenten. Alle waarden komen uit tokens.css (ruimte, afronding, tekstgroottes,
 * beweging). Dit blok gaat voor de oudere bibliotheekregels hierboven.
 * =========================================================================== */

/* Basis: geen schreefletter en geen messing haarlijn meer als dominante stijl. */
body { background: var(--bg); font-family: var(--font-sans); font-size: var(--text-body); }
h1, h2, h3, .modal h1, .modal h2, .learn-cta h2, .breadcrumbs, .ui-state.empty strong, .period-head strong, .mat-head, .subject-tile.has-art .subject-tile-text strong { font-family: var(--font-sans); }
h1 { font-weight: 700; letter-spacing: -0.025em; }
h2 { font-weight: 700; letter-spacing: -0.015em; }
.page-title h1, .page-title-quiet h1 { padding-bottom: 0; font-size: var(--text-page); }
.page-title h1::after { display: none; }
.eyebrow { color: var(--brass-ink); letter-spacing: 0.12em; font-size: var(--text-label); }
.sidebar .brand span, .landing-bar .brand span, .auth-brand span { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; }
.nav-item.active { box-shadow: none; }
.primary { border-radius: var(--radius-sm); box-shadow: none; }
.primary:hover { box-shadow: var(--shadow-card); }
.pv-tile, .pv-card, .settings-card, .period-block, .help-toc, .help-faq { box-shadow: var(--shadow-card); }
.subject-tile:hover, .practice-card:hover, .material-row:hover, .settings-card:hover, .period-block:hover { border-color: var(--border-strong); }

/* Zijbalk: smaller, wit, klein logo (hetzelfde merkteken, alleen kleiner), duidelijke actieve toestand. */
.app-shell { grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { width: 224px; padding: var(--space-6) var(--space-3) var(--space-4); }
.sidebar .brand { padding: 0 var(--space-2) var(--space-6); gap: var(--space-2); font-size: 20px; }
.sidebar .brand-mark { width: 96px; height: 76px; }
.sidebar nav { gap: var(--space-1); }
.nav-item { font: 600 15px var(--font-sans); padding: 10px var(--space-3); border-radius: var(--radius-sm); gap: var(--space-3); min-height: 44px; }
.nav-icon, .nav-icon svg { width: 20px; height: 20px; }
.nav-item:hover { background: var(--surface-soft); }
.nav-item.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-ink); border-color: transparent; font-weight: 700; }
.sidebar-bottom { border-top-color: var(--sidebar-border); }
.profile-mini { grid-template-columns: 36px minmax(0, 1fr) auto; border-top-color: var(--sidebar-border); padding: var(--space-3) var(--space-1) 0; }
.profile-mini .avatar { width: 36px; height: 36px; font-size: 14px; }
.profile-mini strong { font: 650 14px var(--font-sans); }
.profile-mini small { font-size: 12px; }

/* Bovenbalk: laag en rustig; op de startpagina alleen de knoppen rechts (de begroeting staat al bovenaan). */
.topbar { height: 64px; border-bottom: 0; background: var(--bg); padding: 0 clamp(16px, 4vw, 48px); }
.breadcrumbs { font: 700 18px var(--font-sans); letter-spacing: -0.01em; }
body[data-page="leren"] .breadcrumbs { visibility: hidden; }
.topbar-right { gap: var(--space-2); }
.topbar-help { display: none; width: 44px; height: 44px; border-radius: 50%; place-items: center; color: var(--text-secondary); }
.topbar-help:hover { background: var(--surface-soft); color: var(--text-primary); }
.page { max-width: calc(var(--content-max) + 2 * clamp(16px, 4vw, 48px)); padding: var(--space-4) clamp(16px, 4vw, 48px) var(--space-12); }

/* Navigatie onderaan: alleen op de telefoon. */
.bottom-nav { display: none; }

/* ---- Startpagina "Leren" ---- */
.dashboard { display: none; }
.dashboard.active { display: flex; flex-direction: column; gap: var(--space-8); }
.dashboard > #promptDrafts:empty { display: none; }

/* Afbeeldingsplekken (IMAGE_ASSET_REQUIRED): lagen van nieuw naar bestaand beeld; ontbreekt een bestand, dan tekent
   de browser de volgende laag, en onderaan altijd een kleurvlak. Nooit een kapot plaatje, geen inline stijl (CSP). */
.img-slot { display: block; background-repeat: no-repeat; background-size: cover; background-position: center; pointer-events: none; }

/* Begroeting met compacte status. */
.dash-header { position: relative; display: flex; align-items: center; min-height: 180px; margin-bottom: calc(-1 * var(--space-4)); }
.dash-header-text { position: relative; z-index: 1; max-width: 560px; }
.dash-header h1 { font-size: var(--text-page); line-height: 1.1; }
.dash-wave { display: inline-block; font-size: 0.85em; }
.dash-sub { margin: var(--space-2) 0 0; font-size: clamp(18px, 2vw, 22px); color: var(--text-secondary); }
/* Dagdoel op de startpagina (2026-10-19): vandaag als balk, de leerdagen van deze week als bolletjes, het plan, en zo
   nodig een duwtje of het voorstel van de week. */
.dash-goal { display: flex; flex-direction: column; gap: var(--space-2); max-width: 460px; margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.dash-goal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.dash-goal-text { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-meta); color: var(--text-secondary); }
.dash-goal-text svg { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }
.dash-goal-text strong { color: var(--text-primary); font-weight: 700; }
.dash-goal-edit { font-size: var(--text-meta); white-space: nowrap; }
.dash-goal .progress-bar { width: 100%; }
.dash-goal .progress-bar i { background: var(--primary); }
.dash-goal.is-reached .progress-bar i { background: var(--success); }
.dash-goal.is-reached .dash-goal-text svg { color: var(--success); }
.dash-goal-setup { gap: var(--space-3); }
.dash-goal-setup .primary { align-self: flex-start; }
.dash-goal-note, .dash-goal-meta, .dash-goal-nudge { margin: 0; font-size: var(--text-meta); color: var(--text-secondary); }
.dash-goal-nudge { padding: var(--space-2) var(--space-3); background: var(--surface-soft); border-radius: var(--radius-sm); color: var(--text-primary); }
.goal-week { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: var(--space-1) 0 0; padding: 0; }
.goal-day { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--text-secondary); }
.goal-day i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-strong); background: transparent; }
.goal-day.is-learned i { background: var(--primary); border-color: var(--primary); }
.goal-day.is-reached i { background: var(--success); border-color: var(--success); }
.goal-day.is-missed i { border-style: dashed; }
.goal-day.is-rest i { width: 10px; height: 2px; margin: 6px 0; border: 0; border-radius: 1px; background: var(--border-strong); }
.goal-day.is-today span:first-of-type { color: var(--text-primary); font-weight: 700; }
.goal-day.is-today i { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
.dash-goal-review { padding: var(--space-3); background: var(--surface-soft); border-radius: var(--radius-sm); font-size: var(--text-meta); }
.dash-goal-review p { margin: 0 0 var(--space-2); color: var(--text-primary); }
.dash-goal-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Het venster om het dagdoel in te stellen. */
.goal-form fieldset { margin: 0 0 var(--space-4); padding: 0; border: 0; }
.goal-form legend { margin-bottom: var(--space-2); font-weight: 700; }
.goal-days { display: flex; flex-wrap: wrap; gap: 6px; }
.goal-day-choice input { position: absolute; opacity: 0; pointer-events: none; }
.goal-day-choice span { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); cursor: pointer; font-weight: 600; }
.goal-day-choice input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.goal-day-choice input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.goal-choices { display: grid; gap: 6px; }
.goal-choice { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 6px var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); font-weight: 400; cursor: pointer; }
.goal-choice:has(input:checked) { border-color: var(--primary); background: var(--surface-soft); }
.goal-choice-custom input[type="number"] { width: 80px; }
.goal-choice-custom input[type="time"] { width: 120px; }
.goal-warn { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-soft); font-size: var(--text-meta); }
.dash-stats { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0 0; padding: 0; }
.dash-stats li { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: var(--text-meta); color: var(--text-secondary); }
.dash-stats li svg { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }
.dash-stats strong { color: var(--text-primary); font-weight: 700; }
.img-slot--header { position: absolute; top: calc(-1 * var(--space-4)); right: 0; bottom: 0; width: min(48%, 560px); border-radius: var(--radius-xl); background-image: url("/illustrations/app/dashboard/header.webp"), var(--hero-image), var(--image-fallback); background-position: center 40%; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%); mask-image: linear-gradient(to right, transparent 0%, #000 38%); }
:root[data-theme="dark"] .img-slot--header { background-image: url("/illustrations/app/dashboard/header-dark.webp"), url("/illustrations/app/dashboard/header.webp"), var(--hero-image), var(--image-fallback); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .img-slot--header { background-image: url("/illustrations/app/dashboard/header-dark.webp"), url("/illustrations/app/dashboard/header.webp"), var(--hero-image), var(--image-fallback); } }

/* Gedeelde kaartbouwstenen. */
.card-label { margin: 0; font-size: var(--text-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); }
.section-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.section-header h2 { font-size: var(--text-section); letter-spacing: -0.015em; }
.progress-bar { display: block; flex: 1 1 auto; height: 8px; min-width: 60px; background: var(--progress-track); border-radius: var(--radius-pill); overflow: hidden; }
.progress-bar i { display: block; height: 100%; width: 0; background: var(--subj-icon-ink, var(--primary)); border-radius: inherit; transition: width var(--motion-slow) var(--ease); }
.continue-card .progress-bar i { background: var(--primary); }
.time-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px var(--space-3); border-radius: var(--radius-pill); background: var(--surface-soft); border: 1px solid var(--border); color: var(--text-secondary); font: 600 var(--text-meta) var(--font-sans); white-space: nowrap; }
.time-badge svg { width: 16px; height: 16px; }
.time-badge--plain { min-height: 0; padding: 0; background: none; border: 0; }
.time-badge--button { cursor: pointer; }
.time-badge--button:hover { border-color: var(--border-strong); color: var(--text-primary); }
.link-action { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--space-2); border: 0; background: none; color: var(--primary); font: 700 14px var(--font-sans); cursor: pointer; border-radius: var(--radius-sm); }
.link-action svg { width: 16px; height: 16px; transition: transform var(--motion-fast) var(--ease); }
.link-action:hover svg { transform: translateX(2px); }
.link-action[aria-expanded="true"] svg { transform: rotate(90deg); }
.link-action--quiet { color: var(--text-secondary); }
.link-action--quiet:hover { color: var(--text-primary); }
.link-action:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Ga verder: de belangrijkste kaart. Tekst links, beeld subtiel rechts, één gevulde knop. */
.continue-card { position: relative; overflow: hidden; display: block; min-height: 0; padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.continue-card::before { content: none; }
.continue-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-3); max-width: 600px; }
.continue-title { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-1); }
.continue-title h2 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; }
.continue-title .subject-dot { width: 44px; height: 44px; border-radius: 14px; }
.continue-title .subject-dot svg { width: 22px; height: 22px; }
.continue-context { margin: 2px 0 0; color: var(--text-secondary); font-size: 15px; }
.continue-progress { display: flex; align-items: center; gap: var(--space-3); max-width: 420px; }
.continue-mastery-text { font-size: var(--text-meta); color: var(--text-secondary); white-space: nowrap; }
.continue-mastery-text strong { color: var(--text-primary); font-size: 15px; }
.continue-busy { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); background: var(--surface-soft); border-radius: var(--radius); max-width: 520px; }
.continue-busy > svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--primary); }
.continue-busy small { display: block; font-size: 12px; color: var(--text-secondary); }
.continue-busy-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; color: var(--text-primary); }
.continue-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-1); }
.cta { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 12px 22px; font-size: 15px; border-radius: var(--radius); }
.cta svg { width: 18px; height: 18px; transition: transform var(--motion-fast) var(--ease); }
.cta:hover svg { transform: translateX(3px); }
.cta:active { transform: scale(0.98); }
.time-choice { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.time-choice .minutes { display: flex; gap: var(--space-1); padding: 3px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-pill); }
.time-choice .minutes[hidden] { display: none; }
.time-choice .minutes-chip { min-height: 36px; padding: 6px var(--space-3); font-size: var(--text-meta); font-weight: 600; border: 0; background: transparent; color: var(--text-secondary); }
.time-choice .minutes-chip.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-card); }
.img-slot--continue { position: absolute; top: 0; right: 0; bottom: 0; width: 38%; background-color: var(--subj-tile); background-image: var(--img-continue, none), linear-gradient(135deg, var(--subj-tile), var(--subj-icon-bg)); background-position: right center; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.85) 55%); mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.85) 55%); }
.continue-card--empty { background: var(--hero-bg); }
.img-slot--empty { position: absolute; top: 0; right: 0; bottom: 0; width: 40%; background-image: url("/illustrations/app/states/eerste-leerstof.webp"), url("/illustrations/states/onboarding.webp"), var(--image-fallback); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%); mask-image: linear-gradient(to right, transparent 0%, #000 45%); }
:root[data-theme="dark"] .img-slot--empty, :root[data-theme="dark"] .img-slot--continue, :root[data-theme="dark"] .img-slot--header { filter: brightness(0.85) saturate(0.9); }
:root[data-theme="dark"] .img-slot--continue { opacity: 0.75; }
/* Donker: lichte beelden dimmen, zodat witte vakbeelden en de lichte rand om de aanbevelingsbeelden niet oplichten. */
:root[data-theme="dark"] .subject-thumb .img-slot { filter: brightness(0.82) saturate(0.9); }
:root[data-theme="dark"] .img-slot--rec { filter: brightness(0.72) saturate(0.85); opacity: 0.85; -webkit-mask-image: radial-gradient(ellipse 46% 48% at 56% 56%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 46% 48% at 56% 56%, #000 45%, transparent 100%); }

/* Voor jou: kleiner dan de hoofdkaart, per soort één zacht accent. */
.rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.rec-card { --rec-bg: var(--surface); --rec-soft: var(--surface-soft); --rec-ink: var(--primary); position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon text" "foot foot"; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3); min-height: 148px; text-align: left; background: var(--rec-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; color: var(--text-primary); transition: transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease), border-color var(--motion) var(--ease); }
.rec-card--repeat { --rec-bg: var(--rec-repeat-bg); --rec-soft: var(--rec-repeat-soft); --rec-ink: var(--rec-repeat-ink); }
.rec-card--learn { --rec-bg: var(--rec-learn-bg); --rec-soft: var(--rec-learn-soft); --rec-ink: var(--rec-learn-ink); }
.rec-card--test { --rec-bg: var(--rec-test-bg); --rec-soft: var(--rec-test-soft); --rec-ink: var(--rec-test-ink); }
.rec-icon { grid-area: icon; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--rec-soft); color: var(--rec-ink); }
.rec-icon svg { width: 20px; height: 20px; }
.rec-text { grid-area: text; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rec-text .card-label { color: var(--rec-ink); }
.rec-title { font-size: 16px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rec-subject { font-size: var(--text-meta); color: var(--text-secondary); }
.rec-foot { grid-area: foot; position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; align-self: end; }
.rec-go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-card); transition: transform var(--motion-fast) var(--ease); }
.rec-go svg { width: 16px; height: 16px; }
.img-slot--rec { position: absolute; right: 0; bottom: 0; width: 112px; height: 84px; background-size: contain; background-position: right bottom; opacity: 0.95; }
.img-slot--rec-herhalen { background-image: url("/illustrations/app/recommendations/herhalen.webp"); }
.img-slot--rec-leren { background-image: url("/illustrations/app/recommendations/leren.webp"); }
.img-slot--rec-toets { background-image: url("/illustrations/app/recommendations/toets.webp"); }
:root[data-theme="dark"] .img-slot--rec-herhalen { background-image: url("/illustrations/app/recommendations/herhalen-dark.webp"), url("/illustrations/app/recommendations/herhalen.webp"); }
:root[data-theme="dark"] .img-slot--rec-leren { background-image: url("/illustrations/app/recommendations/leren-dark.webp"), url("/illustrations/app/recommendations/leren.webp"); }
:root[data-theme="dark"] .img-slot--rec-toets { background-image: url("/illustrations/app/recommendations/toets-dark.webp"), url("/illustrations/app/recommendations/toets.webp"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .img-slot--rec-herhalen { background-image: url("/illustrations/app/recommendations/herhalen-dark.webp"), url("/illustrations/app/recommendations/herhalen.webp"); }
  :root:not([data-theme]) .img-slot--rec-leren { background-image: url("/illustrations/app/recommendations/leren-dark.webp"), url("/illustrations/app/recommendations/leren.webp"); }
  :root:not([data-theme]) .img-slot--rec-toets { background-image: url("/illustrations/app/recommendations/toets-dark.webp"), url("/illustrations/app/recommendations/toets.webp"); }
  :root:not([data-theme]) .img-slot--empty, :root:not([data-theme]) .img-slot--continue, :root:not([data-theme]) .img-slot--header { filter: brightness(0.85) saturate(0.9); }
  :root:not([data-theme]) .img-slot--continue { opacity: 0.75; }
  :root:not([data-theme]) .subject-thumb .img-slot { filter: brightness(0.82) saturate(0.9); }
  :root:not([data-theme]) .img-slot--rec { filter: brightness(0.72) saturate(0.85); opacity: 0.85; -webkit-mask-image: radial-gradient(ellipse 46% 48% at 56% 56%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 46% 48% at 56% 56%, #000 45%, transparent 100%); }
}

/* Jouw vakken: compacte, scanbare kaarten met klein vakbeeld, naam, onderwerpen en voortgang. */
.subject-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.subject-card-grid:empty { display: none; }
:where(.subject-card, .continue-card, .subject-mini) { --subj-tile: var(--subj-default-tile); --subj-icon-bg: var(--subj-default-icon-bg); --subj-icon-ink: var(--subj-default-ink); }
.subject-card { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2); padding-right: var(--space-3); min-height: 88px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text-primary); cursor: pointer; transition: transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease), border-color var(--motion) var(--ease); }
.subject-thumb { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius); overflow: hidden; background: var(--subj-icon-bg); color: var(--subj-icon-ink); }
.subject-thumb .img-slot { position: absolute; inset: 0; background-image: var(--img-subject, none); }
.subject-thumb-icon svg { width: 28px; height: 28px; }
.subject-thumb.has-art .subject-thumb-icon { visibility: hidden; }
.subject-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.subject-card-text strong { font-size: 16px; font-weight: 700; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.subject-card-text small { font-size: var(--text-meta); color: var(--text-secondary); }
.subject-card-progress { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.subject-card-pct { font-size: var(--text-meta); font-weight: 700; min-width: 34px; }
.subject-card-pct--none { min-width: 0; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.subject-card-pct--none + .progress-bar { display: none; }
.subject-card-go, .subject-mini-go { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); color: var(--text-secondary); transition: transform var(--motion-fast) var(--ease); }
.subject-card-go svg { width: 14px; height: 14px; }
.subject-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); }
.dash-empty-line { margin: 0 0 var(--space-3); color: var(--text-secondary); }
.other-subjects { margin-top: var(--space-6); }
.other-subjects h3 { margin: 0 0 var(--space-3); font-size: 16px; font-weight: 700; }
.subject-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-2); }
.subject-mini { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-2) var(--space-3); text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); cursor: pointer; transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); }
.subject-mini .subject-dot { width: 34px; height: 34px; border-radius: 10px; }
.subject-mini .subject-dot svg { width: 18px; height: 18px; }
.subject-mini strong { display: block; font-size: 14px; font-weight: 650; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.subject-mini--add { justify-content: center; gap: var(--space-2); background: transparent; border-style: dashed; border-color: var(--border-strong); color: var(--primary); }
.subject-mini--add svg { width: 18px; height: 18px; }
.subject-mini--add strong { display: inline; }
.subject-mini small { display: block; font-size: 12px; color: var(--text-secondary); }

/* Micro-interacties: lichte lift en rand bij hover, alleen functioneel. */
@media (hover: hover) {
  .rec-card:hover, .subject-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--border-strong); }
  .rec-card:hover .rec-go, .subject-card:hover .subject-card-go { transform: translateX(2px); }
  .subject-mini:hover { border-color: var(--border-strong); background: var(--surface-soft); }
}
.rec-card:focus-visible, .subject-card:focus-visible, .subject-mini:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Tablet: twee kolommen waar dat logisch is. */
@media (max-width: 1000px) {
  .app-shell { grid-template-columns: 88px minmax(0, 1fr); }
  .sidebar { width: 72px; padding: var(--space-4) var(--space-2); }
  .sidebar .brand { padding: 0 0 var(--space-5); }
  .sidebar .brand-mark { width: 44px; height: 44px; }
  .nav-item { justify-content: center; padding: 10px; }
  .subject-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .img-slot--header { width: 44%; }
  .img-slot--continue { width: 30%; }
}

/* Telefoon: één kolom, navigatie onderaan, grote aanraakvlakken. */
@media (max-width: 680px) {
  .menu-toggle { display: none; }
  .sidebar { display: none; }
  .topbar { height: 56px; padding: 0 var(--space-4); }
  .topbar-help { display: grid; }
  .page { padding: var(--space-2) var(--space-4) calc(96px + env(safe-area-inset-bottom)); }
  .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px var(--space-2) calc(6px + env(safe-area-inset-bottom)); background: var(--bottom-nav-bg); border-top: 1px solid var(--border); }
  .bottom-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; border: 0; background: none; border-radius: var(--radius); color: var(--text-secondary); font: 600 12px var(--font-sans); cursor: pointer; }
  .bottom-nav-item .nav-icon, .bottom-nav-item .nav-icon svg { width: 22px; height: 22px; }
  .bottom-nav-item.active { color: var(--sidebar-active-ink); }
  .bottom-nav-item.active .nav-icon { background: var(--sidebar-active-bg); border-radius: var(--radius-pill); width: 52px; height: 28px; }
  .bottom-nav-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  body.studying .bottom-nav { display: none; }
  body.studying .page { padding-bottom: var(--space-12); }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .dashboard.active { gap: var(--space-6); }
  .dash-header { min-height: 0; margin-bottom: 0; }
  .img-slot--header { display: none; }
  .continue-card { padding: var(--space-5) var(--space-4); }
  .img-slot--continue { width: 100%; height: 96px; bottom: auto; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); opacity: 0.55; }
  .img-slot--empty { display: none; }
  .continue-actions { flex-direction: column-reverse; align-items: stretch; }
  .continue-actions .cta { justify-content: center; width: 100%; }
  .time-choice { justify-content: center; }
  .continue-progress { max-width: none; }
  .rec-grid, .subject-card-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .rec-card { min-height: 0; }
  .subject-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subject-actions .link-action { min-height: 48px; }
  .subject-card { grid-template-columns: 56px minmax(0, 1fr) auto; min-height: 72px; }
  .subject-thumb { width: 56px; height: 56px; }
}
@media (max-width: 380px) {
  .subject-mini-grid { grid-template-columns: minmax(0, 1fr); }
  .subject-card { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .subject-thumb { width: 56px; height: 56px; }
}

/* Beweging alleen als de leerling dat wil. */
@media (prefers-reduced-motion: reduce) {
  .progress-bar i, .rec-card, .subject-card, .subject-mini, .cta svg, .link-action svg, .rec-go, .subject-card-go { transition: none; }
  .rec-card:hover, .subject-card:hover, .cta:active { transform: none; }
}

/* Prikkelarme modus: geen sfeerbeelden en geen zwaaiende hand; kaarten blijven, met hun kleur en voortgang. */
:root.calm .img-slot, :root.calm .dash-wave { display: none; }
:root.calm .subject-thumb.has-art .subject-thumb-icon { visibility: visible; }
:root.calm .dash-stats, :root.calm .dash-sub { display: none; }
:root.calm .rec-card:hover, :root.calm .subject-card:hover { transform: none; }

/* ===========================================================================
 * Nieuwe stijl op alle pagina's (eigen verzoek 2026-09-30: "trek deze stijl door over de gehele website").
 * Dezelfde bouwstenen als de startpagina: koppen zonder hoofdletterlabel, witte kaarten met ruime afronding en
 * zachte schaduw, compacte kaarten met vakbeeld, één gevulde knop per blok. Alleen CSS, behalve de toetskaarten
 * (dashboard.ts assessmentCardHtml) en het vakbeeld op de vakpagina.
 * =========================================================================== */

/* Koppen: de paginatitel staat al in de pagina, dus geen kruimelpad erboven; geen hoofdletterlabel boven een titel. */
.breadcrumbs { visibility: hidden; }
.page-title .eyebrow, .material-page > .eyebrow, .at-page .eyebrow, .subject-hero .eyebrow { display: none; }
.page-title { margin-bottom: var(--space-8); }
.page-title h1, .material-page > h1, .at-page h1, .subject-hero-head h1 { font-size: var(--text-page); line-height: 1.1; letter-spacing: -0.025em; }
.page-title .subtitle, .material-page > .subtitle { font-size: clamp(16px, 1.6vw, 19px); color: var(--text-secondary); max-width: 560px; }
#page-voortgang .page-title::before, #page-toetsen .page-title::before, #page-help .page-title::before, #page-instellingen .page-title::before { border-radius: var(--radius-xl); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%); mask-image: linear-gradient(to right, transparent 0%, #000 38%); }
.back-link, #matBack { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--text-secondary); font: 600 14px var(--font-sans); }
.back-link:hover, #matBack:hover { color: var(--text-primary); }

/* Sectiekoppen: gewone zinnen in de sectiegrootte, zoals "Voor jou" en "Jouw vakken". */
.mat-section h2, .period-block h4, .test-period-title, .settings-card h2, .pv-card h2, .pv-card h3 { font: 700 var(--text-section)/1.25 var(--font-sans); letter-spacing: -0.015em; text-transform: none; color: var(--text-primary); }
.mat-section { margin-top: var(--space-8); }
.mat-section h2 { margin: 0 0 var(--space-4); }
.mat-subhead { font: 600 var(--text-meta) var(--font-sans); color: var(--text-secondary); letter-spacing: 0; text-transform: none; margin: var(--space-4) 0 var(--space-2); }
.period-block h4 { font-size: 17px; margin-bottom: var(--space-3); }

/* Kaarten: één familie. */
.pv-card, .pv-tile, .settings-card, .period-block, .help-toc, .help-faq, .subject-hero, .mat-primary, .ai-option, .at-page .pv-card, .modal { border-radius: var(--radius-xl); }
.material-row { border-radius: var(--radius); }
.pv-card, .pv-tile, .settings-card, .period-block, .help-toc, .help-faq { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.settings-card { padding: var(--space-6); }
.settings-card p { color: var(--text-secondary); }
.period-block { border-color: var(--border); padding: var(--space-5) var(--space-6); }

/* Toetsen: per periode een kop met compacte toetskaarten (zelfde kaart als een vak), geen grote beeldtegels meer. */
#assessmentList { display: flex; flex-direction: column; gap: var(--space-8); }
.test-period-title { margin: 0 0 var(--space-4); }
.subject-card--test .subject-card-text strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }

/* Vakpagina: kop als de kaart "Ga verder": wit, tekst links, het brede vakbeeld zacht rechts. */
.subject-hero { min-height: 168px; padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); margin-bottom: var(--space-6); }
.subject-hero > .img-slot--continue { width: 44%; }
.subject-hero-head { position: relative; z-index: 1; }
.subject-hero-head .subject-dot.lg { width: 52px; height: 52px; border-radius: 16px; }
.subject-hero-head .subtitle { color: var(--text-secondary); font-size: 15px; }
.library-head .search, .library-head select, .modal input, .modal select, .modal textarea { border-radius: var(--radius); }

/* Oefenstof: rustiger kaarten, de kleur alleen in het soortlabel en een lichte knop. */
.practice-card { min-height: 0; padding: var(--space-5); gap: var(--space-2); border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.practice-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--border-strong); }
.practice-card strong { font: 700 16px/1.3 var(--font-sans); }
.practice-card small { font-size: var(--text-meta); }
.practice-card-action { align-self: flex-start; margin-top: var(--space-3); padding: 8px 14px; border-radius: var(--radius-pill); font: 700 14px var(--font-sans); }
.practice-card.practice-card-add { box-shadow: none; }

/* Pagina leerstof: dezelfde hoofdkaart als "Ga verder" en keuzes als rustige kaarten met een pijl. */
.material-page { max-width: 880px; }
.mat-primary { position: relative; padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); margin-top: var(--space-6); gap: var(--space-5); }
.mat-primary .eyebrow { color: var(--primary); letter-spacing: 0.12em; font-size: var(--text-label); margin-bottom: var(--space-1); }
.mat-primary h2 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; }
.mat-primary p { color: var(--text-secondary); font-size: 15px; }
.mat-primary .minutes { display: flex; gap: var(--space-1); padding: 3px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-pill); }
.mat-primary .minutes-chip { min-height: 36px; padding: 6px var(--space-3); font-size: var(--text-meta); font-weight: 600; border: 0; background: transparent; color: var(--text-secondary); border-radius: var(--radius-pill); }
.mat-primary .minutes-chip.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-card); }
.mat-primary .primary { min-height: 48px; border-radius: var(--radius); }
.ai-options { gap: var(--space-3); margin-top: 0; }
.ai-option { position: relative; padding: var(--space-4) var(--space-12) var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); line-height: 1.4; }
.ai-option strong { font: 700 16px var(--font-sans); color: var(--text-primary); }
.ai-option small { color: var(--text-secondary); font-size: var(--text-meta); }
button.ai-option::after, a.ai-option::after { content: ""; position: absolute; right: var(--space-5); top: 50%; width: 9px; height: 9px; border-top: 2px solid var(--text-muted); border-right: 2px solid var(--text-muted); transform: translateY(-50%) rotate(45deg); transition: transform var(--motion-fast) var(--ease); }
button.ai-option:hover::after, a.ai-option:hover::after { transform: translate(3px, -50%) rotate(45deg); border-color: var(--primary); }
.ai-option:hover { border-color: var(--border-strong); box-shadow: var(--shadow-hover); }
.ai-option-primary { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary), var(--shadow-card); }

/* Toetspagina: hoofdknop en keuzes zoals elders. */
.at-page .page-title { gap: var(--space-4); }
.at-page .subject-dot.lg { border-radius: 16px; }

/* Help: een leesbare kolom met rustige koppen. */
.help { max-width: 760px; }
.help h2 { font: 700 var(--text-section)/1.25 var(--font-sans); letter-spacing: -0.015em; margin-top: var(--space-10); }
.help-toc { padding: var(--space-5) var(--space-6); }

/* Vensters (modals): ruimer, dezelfde afronding. */
.modal { box-shadow: 0 24px 64px rgba(15, 25, 22, 0.18); }
.modal h2 { font: 700 var(--text-section)/1.25 var(--font-sans); letter-spacing: -0.015em; }

/* Studeren: de oefenkaart in dezelfde afronding. */
.study-card { border-radius: var(--radius-xl); box-shadow: var(--shadow-card); border-color: var(--border); }

@media (max-width: 680px) {
  .subject-hero > .img-slot--continue { width: 100%; height: 88px; bottom: auto; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); opacity: 0.5; }
  .subject-hero { padding: var(--space-5); padding-top: var(--space-12); }
  .mat-primary { padding: var(--space-5); }
  .mat-primary-actions, .mat-primary .primary { width: 100%; }
  .ai-option { padding-right: var(--space-10); }
}
:root.calm .subject-hero > .img-slot { display: none; }

/* Welkomstuitleg en help (2026-10-02). UI.md "Welkomstuitleg en help". Alleen bestaande beelden uit illustrations/app/. */
.welcome { max-width: 760px; margin: 0 auto; }
.welcome-card { overflow: clip; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.welcome-art { height: clamp(96px, calc(100dvh - 580px), 220px); background-color: var(--primary-soft); background-repeat: no-repeat; background-position: center; background-size: cover; }
.welcome-art--start { background-image: url("/illustrations/app/dashboard/header.webp"), var(--hero-image, none); background-position: center 40%; }
.welcome-art--leerdoelen { background-image: url("/illustrations/app/pages/voortgang.webp"); background-position: center 60%; }
.welcome-art--foto { background-image: url("/illustrations/app/states/eerste-leerstof.webp"); background-size: contain; }
.welcome-art--leren { background-image: url("/illustrations/app/recommendations/leren.webp"); background-size: contain; }
.welcome-art--toets { background-image: url("/illustrations/app/recommendations/toets.webp"); background-size: contain; }
.welcome-art--hulp { background-image: url("/illustrations/app/pages/help.webp"); }
:root[data-theme="dark"] .welcome-art--start { background-image: url("/illustrations/app/dashboard/header-dark.webp"), url("/illustrations/app/dashboard/header.webp"); }
:root[data-theme="dark"] .welcome-art--leren { background-image: url("/illustrations/app/recommendations/leren-dark.webp"), url("/illustrations/app/recommendations/leren.webp"); }
:root[data-theme="dark"] .welcome-art--toets { background-image: url("/illustrations/app/recommendations/toets-dark.webp"), url("/illustrations/app/recommendations/toets.webp"); }
:root[data-theme="dark"] .welcome-art { filter: brightness(0.85) saturate(0.9); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .welcome-art--start { background-image: url("/illustrations/app/dashboard/header-dark.webp"), url("/illustrations/app/dashboard/header.webp"); }
  :root:not([data-theme]) .welcome-art--leren { background-image: url("/illustrations/app/recommendations/leren-dark.webp"), url("/illustrations/app/recommendations/leren.webp"); }
  :root:not([data-theme]) .welcome-art--toets { background-image: url("/illustrations/app/recommendations/toets-dark.webp"), url("/illustrations/app/recommendations/toets.webp"); }
  :root:not([data-theme]) .welcome-art { filter: brightness(0.85) saturate(0.9); }
}
.welcome-body { padding: 26px 30px 24px; }
.welcome-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.welcome-top .eyebrow { margin: 0; }
.welcome-skip { color: var(--text-secondary); font-weight: 600; }
.welcome h1 { margin: 8px 0 8px; font-size: 30px; line-height: 1.2; outline: none; }
.welcome-lead { margin: 0 0 18px; color: var(--text-secondary); font-size: 17px; line-height: 1.55; }
.welcome-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.welcome-points li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-soft); color: var(--text-primary); font-size: 16px; line-height: 1.5; }
.welcome-point-icon { flex-shrink: 0; width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 10px; background: var(--primary-soft); color: var(--primary-hover, var(--primary)); }
.welcome-point-icon svg { width: 18px; height: 18px; }
.welcome-progress { list-style: none; display: flex; justify-content: center; gap: 8px; margin: 22px 0 0; padding: 0; }
.welcome-progress li { width: 8px; height: 8px; border-radius: 999px; background: var(--border-strong, var(--border)); transition: width 0.2s ease; }
.welcome-progress li.done { background: var(--primary-soft); }
.welcome-progress li.current { width: 24px; background: var(--primary); }
/* De knoppen blijven onderaan in beeld, ook als de tekst langer is dan het scherm (telefoon, ingezoomd). */
.welcome-nav { position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); flex-wrap: wrap; background: var(--surface); }
/* Tijdens de uitleg geen menubalk onderaan op de telefoon: Overslaan staat bovenaan en de knoppen krijgen de ruimte. */
body[data-page="welkom"] .bottom-nav { display: none; }
.welcome-nav-spacer { flex: 1; }
.welcome-nav .primary { display: inline-flex; align-items: center; gap: 8px; }
.welcome-nav svg { width: 16px; height: 16px; }
/* Lage schermen (laptop, ingezoomd): alles compacter, zodat de knoppen zonder scrollen in beeld staan. */
@media (max-height: 760px) {
  .welcome-body { padding: 18px 26px 18px; }
  .welcome h1 { margin: 4px 0 6px; font-size: 26px; }
  .welcome-lead { margin-bottom: 12px; font-size: 16px; }
  .welcome-points { gap: 6px; }
  .welcome-points li { padding: 8px 12px; font-size: 15px; }
  .welcome-point-icon { width: 30px; height: 30px; }
  .welcome-progress { margin-top: 12px; }
  .welcome-nav { margin-top: 12px; }
}
@media (max-height: 640px) { .welcome-art { display: none; } }
@media (max-width: 560px) {
  .welcome-art { height: clamp(96px, calc(100dvh - 680px), 150px); }
  .welcome-body { padding: 18px 16px 18px; }
  .welcome h1 { font-size: 24px; }
  .welcome-lead { font-size: 16px; }
  .welcome-nav-spacer { display: none; }
  .welcome-nav .primary { flex: 1 1 100%; justify-content: center; order: -1; }
  .welcome-nav .quiet-button { flex: 1; }
}
:root.calm .welcome-art { display: none; }
/* Prikkelarm: op Leren en in de strook op de vakpagina geen plaatjes van filmpjes, alleen de titels. Op de TV zelf
   blijven de plaatjes staan: daar kies je er bewust voor. Hover-zoom staat uit. */
:root.calm .tv-foryou-row .tv-thumb, :root.calm .tv-teaser-row .tv-thumb { display: none; }
:root.calm .tv-foryou-row, :root.calm .tv-teaser-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); overflow: visible; margin: 0; padding: 0; }
:root.calm .tv-teaser-row .tv-card, :root.calm .tv-foryou-row .tv-card { flex: none; }
:root.calm .tv-card:hover .tv-thumb, :root.calm .tv-feature-thumb:hover .tv-thumb, :root.calm .tv-next-item:hover .tv-thumb { transform: none; box-shadow: none; }
:root.calm .tv-shell { background: var(--tv-bg); }
@media (prefers-reduced-motion: reduce) { .welcome-progress li { transition: none; } }

/* "Hoe werkt dit?": een rustige link naar de goede plek in de help. */
.page-help { margin: 8px 0 0; }
.help-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--primary); font: 600 14px "DM Sans"; cursor: pointer; }
.help-link:hover { text-decoration: underline; }
.help-link-mark { width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary-hover, var(--primary)); font: 700 12px "DM Sans"; }
.goal-panel-title .page-help { margin-top: 4px; }

/* Help: startblok met rondleiding en zoeken, inhoud per groep. */
.help-start { display: grid; grid-template-columns: 1fr auto; gap: 12px 16px; align-items: center; margin-bottom: 18px; padding: 18px 20px; border-radius: var(--radius); background: var(--primary-soft); }
.help-start h2 { margin: 0 0 4px; font-size: 20px; }
.help-start p { margin: 0; color: var(--text-primary); line-height: 1.5; }
.help-search { grid-column: 1 / -1; display: block; }
.help-search input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text-primary); font: 400 16px "DM Sans"; }
.help-search-empty { grid-column: 1 / -1; margin: 0; font-weight: 600; }
.help-toc[hidden], .help-group[hidden], .help-section[hidden], .help-faq[hidden], .help-search-empty[hidden] { display: none; }
.help-toc { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 18px; }
.help-toc-group > strong { font: 700 12px "DM Sans"; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.help-toc-group > div { display: grid; gap: 6px; margin-top: 8px; }
.help-group-title { margin: 26px 0 0; font: 700 12px "DM Sans"; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.help-group-title + .help-section { border-top: 0; padding-top: 6px; }
.help-steps li { margin-bottom: 6px; }
.help-tip { padding: 10px 14px; border-radius: 12px; background: var(--surface-soft); }
.help-contact { margin-top: 10px; }
.help-section.help-flash h2 { color: var(--primary); }
@media (max-width: 560px) {
  .help-start { grid-template-columns: 1fr; }
  .help-start-actions .primary { width: 100%; justify-content: center; }
}
.upload-subject-tile .upload-option-icon { width: 40px; height: 40px; margin: 0 auto; border-radius: 12px; display: grid; place-items: center; }

/* BEGIN app-afbeeldingen (gegenereerd door scripts/gen-app-image-css.py) */
.art-aardrijkskunde { --img-subject: url("/illustrations/app/subjects/aardrijkskunde.webp"), url("/illustrations/subjects/aardrijkskunde.webp"); --img-continue: url("/illustrations/app/continue/aardrijkskunde.webp"), url("/illustrations/subjects-wide/aardrijkskunde.webp"); }
.art-biologie { --img-subject: url("/illustrations/app/subjects/biologie.webp"), url("/illustrations/subjects/biologie.webp"); --img-continue: url("/illustrations/app/continue/biologie.webp"), url("/illustrations/subjects-wide/biologie.webp"); }
.art-bouwen-wonen-interieur { --img-subject: url("/illustrations/app/subjects/bouwen-wonen-interieur.webp"), url("/illustrations/subjects/bouwen-wonen-interieur.webp"); --img-continue: url("/illustrations/app/continue/bouwen-wonen-interieur.webp"), url("/illustrations/subjects-wide/bouwen-wonen-interieur.webp"); }
.art-burgerschap { --img-subject: url("/illustrations/app/subjects/burgerschap.webp"), url("/illustrations/subjects/burgerschap.webp"); --img-continue: url("/illustrations/app/continue/burgerschap.webp"), url("/illustrations/subjects-wide/burgerschap.webp"); }
.art-ckv { --img-subject: url("/illustrations/app/subjects/ckv.webp"), url("/illustrations/subjects/ckv.webp"); --img-continue: url("/illustrations/app/continue/ckv.webp"), url("/illustrations/subjects-wide/ckv.webp"); }
.art-dienstverlening-producten { --img-subject: url("/illustrations/app/subjects/dienstverlening-producten.webp"), url("/illustrations/subjects/dienstverlening-producten.webp"); --img-continue: url("/illustrations/app/continue/dienstverlening-producten.webp"), url("/illustrations/subjects-wide/dienstverlening-producten.webp"); }
.art-drama { --img-subject: url("/illustrations/app/subjects/drama.webp"), url("/illustrations/subjects/drama.webp"); --img-continue: url("/illustrations/app/continue/drama.webp"), url("/illustrations/subjects-wide/drama.webp"); }
.art-duits { --img-subject: url("/illustrations/app/subjects/duits.webp"), url("/illustrations/subjects/duits.webp"); --img-continue: url("/illustrations/app/continue/duits.webp"), url("/illustrations/subjects-wide/duits.webp"); }
.art-economie { --img-subject: url("/illustrations/app/subjects/economie.webp"), url("/illustrations/subjects/economie.webp"); --img-continue: url("/illustrations/app/continue/economie.webp"), url("/illustrations/subjects-wide/economie.webp"); }
.art-economie-ondernemen { --img-subject: url("/illustrations/app/subjects/economie-ondernemen.webp"), url("/illustrations/subjects/economie-ondernemen.webp"); --img-continue: url("/illustrations/app/continue/economie-ondernemen.webp"), url("/illustrations/subjects-wide/economie-ondernemen.webp"); }
.art-engels { --img-subject: url("/illustrations/app/subjects/engels.webp"), url("/illustrations/subjects/engels.webp"); --img-continue: url("/illustrations/app/continue/engels.webp"), url("/illustrations/subjects-wide/engels.webp"); }
.art-filosofie { --img-subject: url("/illustrations/app/subjects/filosofie.webp"), url("/illustrations/subjects/filosofie.webp"); --img-continue: url("/illustrations/app/continue/filosofie.webp"), url("/illustrations/subjects-wide/filosofie.webp"); }
.art-frans { --img-subject: url("/illustrations/app/subjects/frans.webp"), url("/illustrations/subjects/frans.webp"); --img-continue: url("/illustrations/app/continue/frans.webp"), url("/illustrations/subjects-wide/frans.webp"); }
.art-geschiedenis { --img-subject: url("/illustrations/app/subjects/geschiedenis.webp"), url("/illustrations/subjects/geschiedenis.webp"); --img-continue: url("/illustrations/app/continue/geschiedenis.webp"), url("/illustrations/subjects-wide/geschiedenis.webp"); }
.art-grieks { --img-subject: url("/illustrations/app/subjects/grieks.webp"), url("/illustrations/subjects/grieks.webp"); --img-continue: url("/illustrations/app/continue/grieks.webp"), url("/illustrations/subjects-wide/grieks.webp"); }
.art-groen { --img-subject: url("/illustrations/app/subjects/groen.webp"), url("/illustrations/subjects/groen.webp"); --img-continue: url("/illustrations/app/continue/groen.webp"), url("/illustrations/subjects-wide/groen.webp"); }
.art-horeca-bakkerij-recreatie { --img-subject: url("/illustrations/app/subjects/horeca-bakkerij-recreatie.webp"), url("/illustrations/subjects/horeca-bakkerij-recreatie.webp"); --img-continue: url("/illustrations/app/continue/horeca-bakkerij-recreatie.webp"), url("/illustrations/subjects-wide/horeca-bakkerij-recreatie.webp"); }
.art-informatica { --img-subject: url("/illustrations/app/subjects/informatica.webp"), url("/illustrations/subjects/informatica.webp"); --img-continue: url("/illustrations/app/continue/informatica.webp"), url("/illustrations/subjects-wide/informatica.webp"); }
.art-latijn { --img-subject: url("/illustrations/app/subjects/latijn.webp"), url("/illustrations/subjects/latijn.webp"); --img-continue: url("/illustrations/app/continue/latijn.webp"), url("/illustrations/subjects-wide/latijn.webp"); }
.art-levensbeschouwing { --img-subject: url("/illustrations/app/subjects/levensbeschouwing.webp"), url("/illustrations/subjects/levensbeschouwing.webp"); --img-continue: url("/illustrations/app/continue/levensbeschouwing.webp"), url("/illustrations/subjects-wide/levensbeschouwing.webp"); }
.art-lichamelijke-opvoeding { --img-subject: url("/illustrations/app/subjects/lichamelijke-opvoeding.webp"), url("/illustrations/subjects/lichamelijke-opvoeding.webp"); --img-continue: url("/illustrations/app/continue/lichamelijke-opvoeding.webp"), url("/illustrations/subjects-wide/lichamelijke-opvoeding.webp"); }
.art-maatschappijleer { --img-subject: url("/illustrations/app/subjects/maatschappijleer.webp"), url("/illustrations/subjects/maatschappijleer.webp"); --img-continue: url("/illustrations/app/continue/maatschappijleer.webp"), url("/illustrations/subjects-wide/maatschappijleer.webp"); }
.art-management-organisatie { --img-subject: url("/illustrations/app/subjects/management-organisatie.webp"), url("/illustrations/subjects/management-organisatie.webp"); --img-continue: url("/illustrations/app/continue/management-organisatie.webp"), url("/illustrations/subjects-wide/management-organisatie.webp"); }
.art-maritiem-techniek { --img-subject: url("/illustrations/app/subjects/maritiem-techniek.webp"), url("/illustrations/subjects/maritiem-techniek.webp"); --img-continue: url("/illustrations/app/continue/maritiem-techniek.webp"), url("/illustrations/subjects-wide/maritiem-techniek.webp"); }
.art-media-vormgeving-ict { --img-subject: url("/illustrations/app/subjects/media-vormgeving-ict.webp"), url("/illustrations/subjects/media-vormgeving-ict.webp"); --img-continue: url("/illustrations/app/continue/media-vormgeving-ict.webp"), url("/illustrations/subjects-wide/media-vormgeving-ict.webp"); }
.art-mobiliteit-transport { --img-subject: url("/illustrations/app/subjects/mobiliteit-transport.webp"), url("/illustrations/subjects/mobiliteit-transport.webp"); --img-continue: url("/illustrations/app/continue/mobiliteit-transport.webp"), url("/illustrations/subjects-wide/mobiliteit-transport.webp"); }
.art-muziek { --img-subject: url("/illustrations/app/subjects/muziek.webp"), url("/illustrations/subjects/muziek.webp"); --img-continue: url("/illustrations/app/continue/muziek.webp"), url("/illustrations/subjects-wide/muziek.webp"); }
.art-natuurkunde { --img-subject: url("/illustrations/app/subjects/natuurkunde.webp"), url("/illustrations/subjects/natuurkunde.webp"); --img-continue: url("/illustrations/app/continue/natuurkunde.webp"), url("/illustrations/subjects-wide/natuurkunde.webp"); }
.art-nederlands { --img-subject: url("/illustrations/app/subjects/nederlands.webp"), url("/illustrations/subjects/nederlands.webp"); --img-continue: url("/illustrations/app/continue/nederlands.webp"), url("/illustrations/subjects-wide/nederlands.webp"); }
.art-nlt { --img-subject: url("/illustrations/app/subjects/nlt.webp"), url("/illustrations/subjects/nlt.webp"); --img-continue: url("/illustrations/app/continue/nlt.webp"), url("/illustrations/subjects-wide/nlt.webp"); }
.art-produceren-installeren-energie { --img-subject: url("/illustrations/app/subjects/produceren-installeren-energie.webp"), url("/illustrations/subjects/produceren-installeren-energie.webp"); --img-continue: url("/illustrations/app/continue/produceren-installeren-energie.webp"), url("/illustrations/subjects-wide/produceren-installeren-energie.webp"); }
.art-scheikunde { --img-subject: url("/illustrations/app/subjects/scheikunde.webp"), url("/illustrations/subjects/scheikunde.webp"); --img-continue: url("/illustrations/app/continue/scheikunde.webp"), url("/illustrations/subjects-wide/scheikunde.webp"); }
.art-spaans { --img-subject: url("/illustrations/app/subjects/spaans.webp"), url("/illustrations/subjects/spaans.webp"); --img-continue: url("/illustrations/app/continue/spaans.webp"), url("/illustrations/subjects-wide/spaans.webp"); }
.art-techniek { --img-subject: url("/illustrations/app/subjects/techniek.webp"), url("/illustrations/subjects/techniek.webp"); --img-continue: url("/illustrations/app/continue/techniek.webp"), url("/illustrations/subjects-wide/techniek.webp"); }
.art-tekenen { --img-subject: url("/illustrations/app/subjects/tekenen.webp"), url("/illustrations/subjects/tekenen.webp"); --img-continue: url("/illustrations/app/continue/tekenen.webp"), url("/illustrations/subjects-wide/tekenen.webp"); }
.art-verzorging { --img-subject: url("/illustrations/app/subjects/verzorging.webp"), url("/illustrations/subjects/verzorging.webp"); --img-continue: url("/illustrations/app/continue/verzorging.webp"), url("/illustrations/subjects-wide/verzorging.webp"); }
.art-wiskunde { --img-subject: url("/illustrations/app/subjects/wiskunde.webp"), url("/illustrations/subjects/wiskunde.webp"); --img-continue: url("/illustrations/app/continue/wiskunde.webp"), url("/illustrations/subjects-wide/wiskunde.webp"); }
.art-zorg-welzijn { --img-subject: url("/illustrations/app/subjects/zorg-welzijn.webp"), url("/illustrations/subjects/zorg-welzijn.webp"); --img-continue: url("/illustrations/app/continue/zorg-welzijn.webp"), url("/illustrations/subjects-wide/zorg-welzijn.webp"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .art-aardrijkskunde { --img-subject: url("/illustrations/app/subjects/aardrijkskunde-dark.webp"), url("/illustrations/app/subjects/aardrijkskunde.webp"), url("/illustrations/subjects-dark/aardrijkskunde.webp"); --img-continue: url("/illustrations/app/continue/aardrijkskunde-dark.webp"), url("/illustrations/app/continue/aardrijkskunde.webp"), url("/illustrations/subjects-wide-dark/aardrijkskunde.webp"); }
  :root:not([data-theme]) .art-biologie { --img-subject: url("/illustrations/app/subjects/biologie-dark.webp"), url("/illustrations/app/subjects/biologie.webp"), url("/illustrations/subjects-dark/biologie.webp"); --img-continue: url("/illustrations/app/continue/biologie-dark.webp"), url("/illustrations/app/continue/biologie.webp"), url("/illustrations/subjects-wide-dark/biologie.webp"); }
  :root:not([data-theme]) .art-bouwen-wonen-interieur { --img-subject: url("/illustrations/app/subjects/bouwen-wonen-interieur-dark.webp"), url("/illustrations/app/subjects/bouwen-wonen-interieur.webp"), url("/illustrations/subjects-dark/bouwen-wonen-interieur.webp"); --img-continue: url("/illustrations/app/continue/bouwen-wonen-interieur-dark.webp"), url("/illustrations/app/continue/bouwen-wonen-interieur.webp"), url("/illustrations/subjects-wide-dark/bouwen-wonen-interieur.webp"); }
  :root:not([data-theme]) .art-burgerschap { --img-subject: url("/illustrations/app/subjects/burgerschap-dark.webp"), url("/illustrations/app/subjects/burgerschap.webp"), url("/illustrations/subjects-dark/burgerschap.webp"); --img-continue: url("/illustrations/app/continue/burgerschap-dark.webp"), url("/illustrations/app/continue/burgerschap.webp"), url("/illustrations/subjects-wide-dark/burgerschap.webp"); }
  :root:not([data-theme]) .art-ckv { --img-subject: url("/illustrations/app/subjects/ckv-dark.webp"), url("/illustrations/app/subjects/ckv.webp"), url("/illustrations/subjects-dark/ckv.webp"); --img-continue: url("/illustrations/app/continue/ckv-dark.webp"), url("/illustrations/app/continue/ckv.webp"), url("/illustrations/subjects-wide-dark/ckv.webp"); }
  :root:not([data-theme]) .art-dienstverlening-producten { --img-subject: url("/illustrations/app/subjects/dienstverlening-producten-dark.webp"), url("/illustrations/app/subjects/dienstverlening-producten.webp"), url("/illustrations/subjects-dark/dienstverlening-producten.webp"); --img-continue: url("/illustrations/app/continue/dienstverlening-producten-dark.webp"), url("/illustrations/app/continue/dienstverlening-producten.webp"), url("/illustrations/subjects-wide-dark/dienstverlening-producten.webp"); }
  :root:not([data-theme]) .art-drama { --img-subject: url("/illustrations/app/subjects/drama-dark.webp"), url("/illustrations/app/subjects/drama.webp"), url("/illustrations/subjects-dark/drama.webp"); --img-continue: url("/illustrations/app/continue/drama-dark.webp"), url("/illustrations/app/continue/drama.webp"), url("/illustrations/subjects-wide-dark/drama.webp"); }
  :root:not([data-theme]) .art-duits { --img-subject: url("/illustrations/app/subjects/duits-dark.webp"), url("/illustrations/app/subjects/duits.webp"), url("/illustrations/subjects-dark/duits.webp"); --img-continue: url("/illustrations/app/continue/duits-dark.webp"), url("/illustrations/app/continue/duits.webp"), url("/illustrations/subjects-wide-dark/duits.webp"); }
  :root:not([data-theme]) .art-economie { --img-subject: url("/illustrations/app/subjects/economie-dark.webp"), url("/illustrations/app/subjects/economie.webp"), url("/illustrations/subjects-dark/economie.webp"); --img-continue: url("/illustrations/app/continue/economie-dark.webp"), url("/illustrations/app/continue/economie.webp"), url("/illustrations/subjects-wide-dark/economie.webp"); }
  :root:not([data-theme]) .art-economie-ondernemen { --img-subject: url("/illustrations/app/subjects/economie-ondernemen-dark.webp"), url("/illustrations/app/subjects/economie-ondernemen.webp"), url("/illustrations/subjects-dark/economie-ondernemen.webp"); --img-continue: url("/illustrations/app/continue/economie-ondernemen-dark.webp"), url("/illustrations/app/continue/economie-ondernemen.webp"), url("/illustrations/subjects-wide-dark/economie-ondernemen.webp"); }
  :root:not([data-theme]) .art-engels { --img-subject: url("/illustrations/app/subjects/engels-dark.webp"), url("/illustrations/app/subjects/engels.webp"), url("/illustrations/subjects-dark/engels.webp"); --img-continue: url("/illustrations/app/continue/engels-dark.webp"), url("/illustrations/app/continue/engels.webp"), url("/illustrations/subjects-wide-dark/engels.webp"); }
  :root:not([data-theme]) .art-filosofie { --img-subject: url("/illustrations/app/subjects/filosofie-dark.webp"), url("/illustrations/app/subjects/filosofie.webp"), url("/illustrations/subjects-dark/filosofie.webp"); --img-continue: url("/illustrations/app/continue/filosofie-dark.webp"), url("/illustrations/app/continue/filosofie.webp"), url("/illustrations/subjects-wide-dark/filosofie.webp"); }
  :root:not([data-theme]) .art-frans { --img-subject: url("/illustrations/app/subjects/frans-dark.webp"), url("/illustrations/app/subjects/frans.webp"), url("/illustrations/subjects-dark/frans.webp"); --img-continue: url("/illustrations/app/continue/frans-dark.webp"), url("/illustrations/app/continue/frans.webp"), url("/illustrations/subjects-wide-dark/frans.webp"); }
  :root:not([data-theme]) .art-geschiedenis { --img-subject: url("/illustrations/app/subjects/geschiedenis-dark.webp"), url("/illustrations/app/subjects/geschiedenis.webp"), url("/illustrations/subjects-dark/geschiedenis.webp"); --img-continue: url("/illustrations/app/continue/geschiedenis-dark.webp"), url("/illustrations/app/continue/geschiedenis.webp"), url("/illustrations/subjects-wide-dark/geschiedenis.webp"); }
  :root:not([data-theme]) .art-grieks { --img-subject: url("/illustrations/app/subjects/grieks-dark.webp"), url("/illustrations/app/subjects/grieks.webp"), url("/illustrations/subjects-dark/grieks.webp"); --img-continue: url("/illustrations/app/continue/grieks-dark.webp"), url("/illustrations/app/continue/grieks.webp"), url("/illustrations/subjects-wide-dark/grieks.webp"); }
  :root:not([data-theme]) .art-groen { --img-subject: url("/illustrations/app/subjects/groen-dark.webp"), url("/illustrations/app/subjects/groen.webp"), url("/illustrations/subjects-dark/groen.webp"); --img-continue: url("/illustrations/app/continue/groen-dark.webp"), url("/illustrations/app/continue/groen.webp"), url("/illustrations/subjects-wide-dark/groen.webp"); }
  :root:not([data-theme]) .art-horeca-bakkerij-recreatie { --img-subject: url("/illustrations/app/subjects/horeca-bakkerij-recreatie-dark.webp"), url("/illustrations/app/subjects/horeca-bakkerij-recreatie.webp"), url("/illustrations/subjects-dark/horeca-bakkerij-recreatie.webp"); --img-continue: url("/illustrations/app/continue/horeca-bakkerij-recreatie-dark.webp"), url("/illustrations/app/continue/horeca-bakkerij-recreatie.webp"), url("/illustrations/subjects-wide-dark/horeca-bakkerij-recreatie.webp"); }
  :root:not([data-theme]) .art-informatica { --img-subject: url("/illustrations/app/subjects/informatica-dark.webp"), url("/illustrations/app/subjects/informatica.webp"), url("/illustrations/subjects-dark/informatica.webp"); --img-continue: url("/illustrations/app/continue/informatica-dark.webp"), url("/illustrations/app/continue/informatica.webp"), url("/illustrations/subjects-wide-dark/informatica.webp"); }
  :root:not([data-theme]) .art-latijn { --img-subject: url("/illustrations/app/subjects/latijn-dark.webp"), url("/illustrations/app/subjects/latijn.webp"), url("/illustrations/subjects-dark/latijn.webp"); --img-continue: url("/illustrations/app/continue/latijn-dark.webp"), url("/illustrations/app/continue/latijn.webp"), url("/illustrations/subjects-wide-dark/latijn.webp"); }
  :root:not([data-theme]) .art-levensbeschouwing { --img-subject: url("/illustrations/app/subjects/levensbeschouwing-dark.webp"), url("/illustrations/app/subjects/levensbeschouwing.webp"), url("/illustrations/subjects-dark/levensbeschouwing.webp"); --img-continue: url("/illustrations/app/continue/levensbeschouwing-dark.webp"), url("/illustrations/app/continue/levensbeschouwing.webp"), url("/illustrations/subjects-wide-dark/levensbeschouwing.webp"); }
  :root:not([data-theme]) .art-lichamelijke-opvoeding { --img-subject: url("/illustrations/app/subjects/lichamelijke-opvoeding-dark.webp"), url("/illustrations/app/subjects/lichamelijke-opvoeding.webp"), url("/illustrations/subjects-dark/lichamelijke-opvoeding.webp"); --img-continue: url("/illustrations/app/continue/lichamelijke-opvoeding-dark.webp"), url("/illustrations/app/continue/lichamelijke-opvoeding.webp"), url("/illustrations/subjects-wide-dark/lichamelijke-opvoeding.webp"); }
  :root:not([data-theme]) .art-maatschappijleer { --img-subject: url("/illustrations/app/subjects/maatschappijleer-dark.webp"), url("/illustrations/app/subjects/maatschappijleer.webp"), url("/illustrations/subjects-dark/maatschappijleer.webp"); --img-continue: url("/illustrations/app/continue/maatschappijleer-dark.webp"), url("/illustrations/app/continue/maatschappijleer.webp"), url("/illustrations/subjects-wide-dark/maatschappijleer.webp"); }
  :root:not([data-theme]) .art-management-organisatie { --img-subject: url("/illustrations/app/subjects/management-organisatie-dark.webp"), url("/illustrations/app/subjects/management-organisatie.webp"), url("/illustrations/subjects-dark/management-organisatie.webp"); --img-continue: url("/illustrations/app/continue/management-organisatie-dark.webp"), url("/illustrations/app/continue/management-organisatie.webp"), url("/illustrations/subjects-wide-dark/management-organisatie.webp"); }
  :root:not([data-theme]) .art-maritiem-techniek { --img-subject: url("/illustrations/app/subjects/maritiem-techniek-dark.webp"), url("/illustrations/app/subjects/maritiem-techniek.webp"), url("/illustrations/subjects-dark/maritiem-techniek.webp"); --img-continue: url("/illustrations/app/continue/maritiem-techniek-dark.webp"), url("/illustrations/app/continue/maritiem-techniek.webp"), url("/illustrations/subjects-wide-dark/maritiem-techniek.webp"); }
  :root:not([data-theme]) .art-media-vormgeving-ict { --img-subject: url("/illustrations/app/subjects/media-vormgeving-ict-dark.webp"), url("/illustrations/app/subjects/media-vormgeving-ict.webp"), url("/illustrations/subjects-dark/media-vormgeving-ict.webp"); --img-continue: url("/illustrations/app/continue/media-vormgeving-ict-dark.webp"), url("/illustrations/app/continue/media-vormgeving-ict.webp"), url("/illustrations/subjects-wide-dark/media-vormgeving-ict.webp"); }
  :root:not([data-theme]) .art-mobiliteit-transport { --img-subject: url("/illustrations/app/subjects/mobiliteit-transport-dark.webp"), url("/illustrations/app/subjects/mobiliteit-transport.webp"), url("/illustrations/subjects-dark/mobiliteit-transport.webp"); --img-continue: url("/illustrations/app/continue/mobiliteit-transport-dark.webp"), url("/illustrations/app/continue/mobiliteit-transport.webp"), url("/illustrations/subjects-wide-dark/mobiliteit-transport.webp"); }
  :root:not([data-theme]) .art-muziek { --img-subject: url("/illustrations/app/subjects/muziek-dark.webp"), url("/illustrations/app/subjects/muziek.webp"), url("/illustrations/subjects-dark/muziek.webp"); --img-continue: url("/illustrations/app/continue/muziek-dark.webp"), url("/illustrations/app/continue/muziek.webp"), url("/illustrations/subjects-wide-dark/muziek.webp"); }
  :root:not([data-theme]) .art-natuurkunde { --img-subject: url("/illustrations/app/subjects/natuurkunde-dark.webp"), url("/illustrations/app/subjects/natuurkunde.webp"), url("/illustrations/subjects-dark/natuurkunde.webp"); --img-continue: url("/illustrations/app/continue/natuurkunde-dark.webp"), url("/illustrations/app/continue/natuurkunde.webp"), url("/illustrations/subjects-wide-dark/natuurkunde.webp"); }
  :root:not([data-theme]) .art-nederlands { --img-subject: url("/illustrations/app/subjects/nederlands-dark.webp"), url("/illustrations/app/subjects/nederlands.webp"), url("/illustrations/subjects-dark/nederlands.webp"); --img-continue: url("/illustrations/app/continue/nederlands-dark.webp"), url("/illustrations/app/continue/nederlands.webp"), url("/illustrations/subjects-wide-dark/nederlands.webp"); }
  :root:not([data-theme]) .art-nlt { --img-subject: url("/illustrations/app/subjects/nlt-dark.webp"), url("/illustrations/app/subjects/nlt.webp"), url("/illustrations/subjects-dark/nlt.webp"); --img-continue: url("/illustrations/app/continue/nlt-dark.webp"), url("/illustrations/app/continue/nlt.webp"), url("/illustrations/subjects-wide-dark/nlt.webp"); }
  :root:not([data-theme]) .art-produceren-installeren-energie { --img-subject: url("/illustrations/app/subjects/produceren-installeren-energie-dark.webp"), url("/illustrations/app/subjects/produceren-installeren-energie.webp"), url("/illustrations/subjects-dark/produceren-installeren-energie.webp"); --img-continue: url("/illustrations/app/continue/produceren-installeren-energie-dark.webp"), url("/illustrations/app/continue/produceren-installeren-energie.webp"), url("/illustrations/subjects-wide-dark/produceren-installeren-energie.webp"); }
  :root:not([data-theme]) .art-scheikunde { --img-subject: url("/illustrations/app/subjects/scheikunde-dark.webp"), url("/illustrations/app/subjects/scheikunde.webp"), url("/illustrations/subjects-dark/scheikunde.webp"); --img-continue: url("/illustrations/app/continue/scheikunde-dark.webp"), url("/illustrations/app/continue/scheikunde.webp"), url("/illustrations/subjects-wide-dark/scheikunde.webp"); }
  :root:not([data-theme]) .art-spaans { --img-subject: url("/illustrations/app/subjects/spaans-dark.webp"), url("/illustrations/app/subjects/spaans.webp"), url("/illustrations/subjects-dark/spaans.webp"); --img-continue: url("/illustrations/app/continue/spaans-dark.webp"), url("/illustrations/app/continue/spaans.webp"), url("/illustrations/subjects-wide-dark/spaans.webp"); }
  :root:not([data-theme]) .art-techniek { --img-subject: url("/illustrations/app/subjects/techniek-dark.webp"), url("/illustrations/app/subjects/techniek.webp"), url("/illustrations/subjects-dark/techniek.webp"); --img-continue: url("/illustrations/app/continue/techniek-dark.webp"), url("/illustrations/app/continue/techniek.webp"), url("/illustrations/subjects-wide-dark/techniek.webp"); }
  :root:not([data-theme]) .art-tekenen { --img-subject: url("/illustrations/app/subjects/tekenen-dark.webp"), url("/illustrations/app/subjects/tekenen.webp"), url("/illustrations/subjects-dark/tekenen.webp"); --img-continue: url("/illustrations/app/continue/tekenen-dark.webp"), url("/illustrations/app/continue/tekenen.webp"), url("/illustrations/subjects-wide-dark/tekenen.webp"); }
  :root:not([data-theme]) .art-verzorging { --img-subject: url("/illustrations/app/subjects/verzorging-dark.webp"), url("/illustrations/app/subjects/verzorging.webp"), url("/illustrations/subjects-dark/verzorging.webp"); --img-continue: url("/illustrations/app/continue/verzorging-dark.webp"), url("/illustrations/app/continue/verzorging.webp"), url("/illustrations/subjects-wide-dark/verzorging.webp"); }
  :root:not([data-theme]) .art-wiskunde { --img-subject: url("/illustrations/app/subjects/wiskunde-dark.webp"), url("/illustrations/app/subjects/wiskunde.webp"), url("/illustrations/subjects-dark/wiskunde.webp"); --img-continue: url("/illustrations/app/continue/wiskunde-dark.webp"), url("/illustrations/app/continue/wiskunde.webp"), url("/illustrations/subjects-wide-dark/wiskunde.webp"); }
  :root:not([data-theme]) .art-zorg-welzijn { --img-subject: url("/illustrations/app/subjects/zorg-welzijn-dark.webp"), url("/illustrations/app/subjects/zorg-welzijn.webp"), url("/illustrations/subjects-dark/zorg-welzijn.webp"); --img-continue: url("/illustrations/app/continue/zorg-welzijn-dark.webp"), url("/illustrations/app/continue/zorg-welzijn.webp"), url("/illustrations/subjects-wide-dark/zorg-welzijn.webp"); }
}
:root[data-theme="dark"] .art-aardrijkskunde { --img-subject: url("/illustrations/app/subjects/aardrijkskunde-dark.webp"), url("/illustrations/app/subjects/aardrijkskunde.webp"), url("/illustrations/subjects-dark/aardrijkskunde.webp"); --img-continue: url("/illustrations/app/continue/aardrijkskunde-dark.webp"), url("/illustrations/app/continue/aardrijkskunde.webp"), url("/illustrations/subjects-wide-dark/aardrijkskunde.webp"); }
:root[data-theme="dark"] .art-biologie { --img-subject: url("/illustrations/app/subjects/biologie-dark.webp"), url("/illustrations/app/subjects/biologie.webp"), url("/illustrations/subjects-dark/biologie.webp"); --img-continue: url("/illustrations/app/continue/biologie-dark.webp"), url("/illustrations/app/continue/biologie.webp"), url("/illustrations/subjects-wide-dark/biologie.webp"); }
:root[data-theme="dark"] .art-bouwen-wonen-interieur { --img-subject: url("/illustrations/app/subjects/bouwen-wonen-interieur-dark.webp"), url("/illustrations/app/subjects/bouwen-wonen-interieur.webp"), url("/illustrations/subjects-dark/bouwen-wonen-interieur.webp"); --img-continue: url("/illustrations/app/continue/bouwen-wonen-interieur-dark.webp"), url("/illustrations/app/continue/bouwen-wonen-interieur.webp"), url("/illustrations/subjects-wide-dark/bouwen-wonen-interieur.webp"); }
:root[data-theme="dark"] .art-burgerschap { --img-subject: url("/illustrations/app/subjects/burgerschap-dark.webp"), url("/illustrations/app/subjects/burgerschap.webp"), url("/illustrations/subjects-dark/burgerschap.webp"); --img-continue: url("/illustrations/app/continue/burgerschap-dark.webp"), url("/illustrations/app/continue/burgerschap.webp"), url("/illustrations/subjects-wide-dark/burgerschap.webp"); }
:root[data-theme="dark"] .art-ckv { --img-subject: url("/illustrations/app/subjects/ckv-dark.webp"), url("/illustrations/app/subjects/ckv.webp"), url("/illustrations/subjects-dark/ckv.webp"); --img-continue: url("/illustrations/app/continue/ckv-dark.webp"), url("/illustrations/app/continue/ckv.webp"), url("/illustrations/subjects-wide-dark/ckv.webp"); }
:root[data-theme="dark"] .art-dienstverlening-producten { --img-subject: url("/illustrations/app/subjects/dienstverlening-producten-dark.webp"), url("/illustrations/app/subjects/dienstverlening-producten.webp"), url("/illustrations/subjects-dark/dienstverlening-producten.webp"); --img-continue: url("/illustrations/app/continue/dienstverlening-producten-dark.webp"), url("/illustrations/app/continue/dienstverlening-producten.webp"), url("/illustrations/subjects-wide-dark/dienstverlening-producten.webp"); }
:root[data-theme="dark"] .art-drama { --img-subject: url("/illustrations/app/subjects/drama-dark.webp"), url("/illustrations/app/subjects/drama.webp"), url("/illustrations/subjects-dark/drama.webp"); --img-continue: url("/illustrations/app/continue/drama-dark.webp"), url("/illustrations/app/continue/drama.webp"), url("/illustrations/subjects-wide-dark/drama.webp"); }
:root[data-theme="dark"] .art-duits { --img-subject: url("/illustrations/app/subjects/duits-dark.webp"), url("/illustrations/app/subjects/duits.webp"), url("/illustrations/subjects-dark/duits.webp"); --img-continue: url("/illustrations/app/continue/duits-dark.webp"), url("/illustrations/app/continue/duits.webp"), url("/illustrations/subjects-wide-dark/duits.webp"); }
:root[data-theme="dark"] .art-economie { --img-subject: url("/illustrations/app/subjects/economie-dark.webp"), url("/illustrations/app/subjects/economie.webp"), url("/illustrations/subjects-dark/economie.webp"); --img-continue: url("/illustrations/app/continue/economie-dark.webp"), url("/illustrations/app/continue/economie.webp"), url("/illustrations/subjects-wide-dark/economie.webp"); }
:root[data-theme="dark"] .art-economie-ondernemen { --img-subject: url("/illustrations/app/subjects/economie-ondernemen-dark.webp"), url("/illustrations/app/subjects/economie-ondernemen.webp"), url("/illustrations/subjects-dark/economie-ondernemen.webp"); --img-continue: url("/illustrations/app/continue/economie-ondernemen-dark.webp"), url("/illustrations/app/continue/economie-ondernemen.webp"), url("/illustrations/subjects-wide-dark/economie-ondernemen.webp"); }
:root[data-theme="dark"] .art-engels { --img-subject: url("/illustrations/app/subjects/engels-dark.webp"), url("/illustrations/app/subjects/engels.webp"), url("/illustrations/subjects-dark/engels.webp"); --img-continue: url("/illustrations/app/continue/engels-dark.webp"), url("/illustrations/app/continue/engels.webp"), url("/illustrations/subjects-wide-dark/engels.webp"); }
:root[data-theme="dark"] .art-filosofie { --img-subject: url("/illustrations/app/subjects/filosofie-dark.webp"), url("/illustrations/app/subjects/filosofie.webp"), url("/illustrations/subjects-dark/filosofie.webp"); --img-continue: url("/illustrations/app/continue/filosofie-dark.webp"), url("/illustrations/app/continue/filosofie.webp"), url("/illustrations/subjects-wide-dark/filosofie.webp"); }
:root[data-theme="dark"] .art-frans { --img-subject: url("/illustrations/app/subjects/frans-dark.webp"), url("/illustrations/app/subjects/frans.webp"), url("/illustrations/subjects-dark/frans.webp"); --img-continue: url("/illustrations/app/continue/frans-dark.webp"), url("/illustrations/app/continue/frans.webp"), url("/illustrations/subjects-wide-dark/frans.webp"); }
:root[data-theme="dark"] .art-geschiedenis { --img-subject: url("/illustrations/app/subjects/geschiedenis-dark.webp"), url("/illustrations/app/subjects/geschiedenis.webp"), url("/illustrations/subjects-dark/geschiedenis.webp"); --img-continue: url("/illustrations/app/continue/geschiedenis-dark.webp"), url("/illustrations/app/continue/geschiedenis.webp"), url("/illustrations/subjects-wide-dark/geschiedenis.webp"); }
:root[data-theme="dark"] .art-grieks { --img-subject: url("/illustrations/app/subjects/grieks-dark.webp"), url("/illustrations/app/subjects/grieks.webp"), url("/illustrations/subjects-dark/grieks.webp"); --img-continue: url("/illustrations/app/continue/grieks-dark.webp"), url("/illustrations/app/continue/grieks.webp"), url("/illustrations/subjects-wide-dark/grieks.webp"); }
:root[data-theme="dark"] .art-groen { --img-subject: url("/illustrations/app/subjects/groen-dark.webp"), url("/illustrations/app/subjects/groen.webp"), url("/illustrations/subjects-dark/groen.webp"); --img-continue: url("/illustrations/app/continue/groen-dark.webp"), url("/illustrations/app/continue/groen.webp"), url("/illustrations/subjects-wide-dark/groen.webp"); }
:root[data-theme="dark"] .art-horeca-bakkerij-recreatie { --img-subject: url("/illustrations/app/subjects/horeca-bakkerij-recreatie-dark.webp"), url("/illustrations/app/subjects/horeca-bakkerij-recreatie.webp"), url("/illustrations/subjects-dark/horeca-bakkerij-recreatie.webp"); --img-continue: url("/illustrations/app/continue/horeca-bakkerij-recreatie-dark.webp"), url("/illustrations/app/continue/horeca-bakkerij-recreatie.webp"), url("/illustrations/subjects-wide-dark/horeca-bakkerij-recreatie.webp"); }
:root[data-theme="dark"] .art-informatica { --img-subject: url("/illustrations/app/subjects/informatica-dark.webp"), url("/illustrations/app/subjects/informatica.webp"), url("/illustrations/subjects-dark/informatica.webp"); --img-continue: url("/illustrations/app/continue/informatica-dark.webp"), url("/illustrations/app/continue/informatica.webp"), url("/illustrations/subjects-wide-dark/informatica.webp"); }
:root[data-theme="dark"] .art-latijn { --img-subject: url("/illustrations/app/subjects/latijn-dark.webp"), url("/illustrations/app/subjects/latijn.webp"), url("/illustrations/subjects-dark/latijn.webp"); --img-continue: url("/illustrations/app/continue/latijn-dark.webp"), url("/illustrations/app/continue/latijn.webp"), url("/illustrations/subjects-wide-dark/latijn.webp"); }
:root[data-theme="dark"] .art-levensbeschouwing { --img-subject: url("/illustrations/app/subjects/levensbeschouwing-dark.webp"), url("/illustrations/app/subjects/levensbeschouwing.webp"), url("/illustrations/subjects-dark/levensbeschouwing.webp"); --img-continue: url("/illustrations/app/continue/levensbeschouwing-dark.webp"), url("/illustrations/app/continue/levensbeschouwing.webp"), url("/illustrations/subjects-wide-dark/levensbeschouwing.webp"); }
:root[data-theme="dark"] .art-lichamelijke-opvoeding { --img-subject: url("/illustrations/app/subjects/lichamelijke-opvoeding-dark.webp"), url("/illustrations/app/subjects/lichamelijke-opvoeding.webp"), url("/illustrations/subjects-dark/lichamelijke-opvoeding.webp"); --img-continue: url("/illustrations/app/continue/lichamelijke-opvoeding-dark.webp"), url("/illustrations/app/continue/lichamelijke-opvoeding.webp"), url("/illustrations/subjects-wide-dark/lichamelijke-opvoeding.webp"); }
:root[data-theme="dark"] .art-maatschappijleer { --img-subject: url("/illustrations/app/subjects/maatschappijleer-dark.webp"), url("/illustrations/app/subjects/maatschappijleer.webp"), url("/illustrations/subjects-dark/maatschappijleer.webp"); --img-continue: url("/illustrations/app/continue/maatschappijleer-dark.webp"), url("/illustrations/app/continue/maatschappijleer.webp"), url("/illustrations/subjects-wide-dark/maatschappijleer.webp"); }
:root[data-theme="dark"] .art-management-organisatie { --img-subject: url("/illustrations/app/subjects/management-organisatie-dark.webp"), url("/illustrations/app/subjects/management-organisatie.webp"), url("/illustrations/subjects-dark/management-organisatie.webp"); --img-continue: url("/illustrations/app/continue/management-organisatie-dark.webp"), url("/illustrations/app/continue/management-organisatie.webp"), url("/illustrations/subjects-wide-dark/management-organisatie.webp"); }
:root[data-theme="dark"] .art-maritiem-techniek { --img-subject: url("/illustrations/app/subjects/maritiem-techniek-dark.webp"), url("/illustrations/app/subjects/maritiem-techniek.webp"), url("/illustrations/subjects-dark/maritiem-techniek.webp"); --img-continue: url("/illustrations/app/continue/maritiem-techniek-dark.webp"), url("/illustrations/app/continue/maritiem-techniek.webp"), url("/illustrations/subjects-wide-dark/maritiem-techniek.webp"); }
:root[data-theme="dark"] .art-media-vormgeving-ict { --img-subject: url("/illustrations/app/subjects/media-vormgeving-ict-dark.webp"), url("/illustrations/app/subjects/media-vormgeving-ict.webp"), url("/illustrations/subjects-dark/media-vormgeving-ict.webp"); --img-continue: url("/illustrations/app/continue/media-vormgeving-ict-dark.webp"), url("/illustrations/app/continue/media-vormgeving-ict.webp"), url("/illustrations/subjects-wide-dark/media-vormgeving-ict.webp"); }
:root[data-theme="dark"] .art-mobiliteit-transport { --img-subject: url("/illustrations/app/subjects/mobiliteit-transport-dark.webp"), url("/illustrations/app/subjects/mobiliteit-transport.webp"), url("/illustrations/subjects-dark/mobiliteit-transport.webp"); --img-continue: url("/illustrations/app/continue/mobiliteit-transport-dark.webp"), url("/illustrations/app/continue/mobiliteit-transport.webp"), url("/illustrations/subjects-wide-dark/mobiliteit-transport.webp"); }
:root[data-theme="dark"] .art-muziek { --img-subject: url("/illustrations/app/subjects/muziek-dark.webp"), url("/illustrations/app/subjects/muziek.webp"), url("/illustrations/subjects-dark/muziek.webp"); --img-continue: url("/illustrations/app/continue/muziek-dark.webp"), url("/illustrations/app/continue/muziek.webp"), url("/illustrations/subjects-wide-dark/muziek.webp"); }
:root[data-theme="dark"] .art-natuurkunde { --img-subject: url("/illustrations/app/subjects/natuurkunde-dark.webp"), url("/illustrations/app/subjects/natuurkunde.webp"), url("/illustrations/subjects-dark/natuurkunde.webp"); --img-continue: url("/illustrations/app/continue/natuurkunde-dark.webp"), url("/illustrations/app/continue/natuurkunde.webp"), url("/illustrations/subjects-wide-dark/natuurkunde.webp"); }
:root[data-theme="dark"] .art-nederlands { --img-subject: url("/illustrations/app/subjects/nederlands-dark.webp"), url("/illustrations/app/subjects/nederlands.webp"), url("/illustrations/subjects-dark/nederlands.webp"); --img-continue: url("/illustrations/app/continue/nederlands-dark.webp"), url("/illustrations/app/continue/nederlands.webp"), url("/illustrations/subjects-wide-dark/nederlands.webp"); }
:root[data-theme="dark"] .art-nlt { --img-subject: url("/illustrations/app/subjects/nlt-dark.webp"), url("/illustrations/app/subjects/nlt.webp"), url("/illustrations/subjects-dark/nlt.webp"); --img-continue: url("/illustrations/app/continue/nlt-dark.webp"), url("/illustrations/app/continue/nlt.webp"), url("/illustrations/subjects-wide-dark/nlt.webp"); }
:root[data-theme="dark"] .art-produceren-installeren-energie { --img-subject: url("/illustrations/app/subjects/produceren-installeren-energie-dark.webp"), url("/illustrations/app/subjects/produceren-installeren-energie.webp"), url("/illustrations/subjects-dark/produceren-installeren-energie.webp"); --img-continue: url("/illustrations/app/continue/produceren-installeren-energie-dark.webp"), url("/illustrations/app/continue/produceren-installeren-energie.webp"), url("/illustrations/subjects-wide-dark/produceren-installeren-energie.webp"); }
:root[data-theme="dark"] .art-scheikunde { --img-subject: url("/illustrations/app/subjects/scheikunde-dark.webp"), url("/illustrations/app/subjects/scheikunde.webp"), url("/illustrations/subjects-dark/scheikunde.webp"); --img-continue: url("/illustrations/app/continue/scheikunde-dark.webp"), url("/illustrations/app/continue/scheikunde.webp"), url("/illustrations/subjects-wide-dark/scheikunde.webp"); }
:root[data-theme="dark"] .art-spaans { --img-subject: url("/illustrations/app/subjects/spaans-dark.webp"), url("/illustrations/app/subjects/spaans.webp"), url("/illustrations/subjects-dark/spaans.webp"); --img-continue: url("/illustrations/app/continue/spaans-dark.webp"), url("/illustrations/app/continue/spaans.webp"), url("/illustrations/subjects-wide-dark/spaans.webp"); }
:root[data-theme="dark"] .art-techniek { --img-subject: url("/illustrations/app/subjects/techniek-dark.webp"), url("/illustrations/app/subjects/techniek.webp"), url("/illustrations/subjects-dark/techniek.webp"); --img-continue: url("/illustrations/app/continue/techniek-dark.webp"), url("/illustrations/app/continue/techniek.webp"), url("/illustrations/subjects-wide-dark/techniek.webp"); }
:root[data-theme="dark"] .art-tekenen { --img-subject: url("/illustrations/app/subjects/tekenen-dark.webp"), url("/illustrations/app/subjects/tekenen.webp"), url("/illustrations/subjects-dark/tekenen.webp"); --img-continue: url("/illustrations/app/continue/tekenen-dark.webp"), url("/illustrations/app/continue/tekenen.webp"), url("/illustrations/subjects-wide-dark/tekenen.webp"); }
:root[data-theme="dark"] .art-verzorging { --img-subject: url("/illustrations/app/subjects/verzorging-dark.webp"), url("/illustrations/app/subjects/verzorging.webp"), url("/illustrations/subjects-dark/verzorging.webp"); --img-continue: url("/illustrations/app/continue/verzorging-dark.webp"), url("/illustrations/app/continue/verzorging.webp"), url("/illustrations/subjects-wide-dark/verzorging.webp"); }
:root[data-theme="dark"] .art-wiskunde { --img-subject: url("/illustrations/app/subjects/wiskunde-dark.webp"), url("/illustrations/app/subjects/wiskunde.webp"), url("/illustrations/subjects-dark/wiskunde.webp"); --img-continue: url("/illustrations/app/continue/wiskunde-dark.webp"), url("/illustrations/app/continue/wiskunde.webp"), url("/illustrations/subjects-wide-dark/wiskunde.webp"); }
:root[data-theme="dark"] .art-zorg-welzijn { --img-subject: url("/illustrations/app/subjects/zorg-welzijn-dark.webp"), url("/illustrations/app/subjects/zorg-welzijn.webp"), url("/illustrations/subjects-dark/zorg-welzijn.webp"); --img-continue: url("/illustrations/app/continue/zorg-welzijn-dark.webp"), url("/illustrations/app/continue/zorg-welzijn.webp"), url("/illustrations/subjects-wide-dark/zorg-welzijn.webp"); }
/* END app-afbeeldingen */

/* Onderwijsniveau (2026-10-02): het leerjaar en de opleiding verschijnen alleen bij niveaus waar ze horen. */
label[hidden], .education-detail[hidden] { display: none !important; }
/* Zonder leerjaar krijgt Niveau de hele breedte, zodat "Avond- of volwassenenonderwijs" niet wordt afgekapt. */
.signup-pair:has(> label[hidden]) > label { grid-column: 1 / -1; }
.modal .education-detail small { display: block; margin: 2px 0 6px; color: var(--text-secondary); font-size: 13px; font-weight: 400; line-height: 1.4; }

/* ---- AI-tutor (premium-abonnement, 2026-10-02; src/frontend/tutor.ts) ----
   Een knop rechtsonder op elk scherm, ook boven een geopend venster (oefentoets nakijken), en een paneel ernaast.
   Egale, dekkende vlakken; op de telefoon boven de navigatie onderaan en het paneel schermvullend. */
.tutor-root { display: contents; }
.tutor-fab { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 45; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-5) 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font: 700 15px var(--font-sans); box-shadow: var(--shadow-lift); cursor: pointer; transition: transform var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); }
.tutor-fab svg { width: 22px; height: 22px; }
.tutor-fab:hover { background: var(--primary-hover); transform: translateY(-1px); }
.tutor-fab:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-lift); }
.tutor-fab[aria-expanded="true"] { background: var(--primary-hover); }
.tutor-panel { position: fixed; right: var(--space-6); bottom: calc(var(--space-6) + 60px); z-index: 45; display: flex; flex-direction: column; width: min(400px, calc(100vw - 2 * var(--space-6))); height: min(600px, calc(100vh - 120px)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lift); overflow: hidden; }
.tutor-panel[hidden] { display: none; }
.tutor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); background: var(--surface-soft); }
.tutor-head h2 { margin: 0; font-size: var(--text-card); }
.tutor-where { margin: 2px 0 0; color: var(--text-secondary); font-size: var(--text-meta); }
.tutor-head-actions { display: flex; align-items: center; gap: var(--space-2); }
.tutor-head .icon-button { font-size: 22px; line-height: 1; }
.tutor-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.tutor-intro p { margin: 0; }
.tutor-note { margin: 0; color: var(--text-secondary); font-size: var(--text-meta); }
.tutor-test { padding: var(--space-3); border-radius: var(--radius); background: var(--warning-soft); color: var(--text-primary); }
.tutor-actions { display: flex; gap: var(--space-2); }
.tutor-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.tutor-empty p { margin: 0 0 var(--space-1); color: var(--text-secondary); }
.tutor-msg { max-width: 88%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); line-height: 1.5; overflow-wrap: anywhere; }
.tutor-msg p { margin: 0; }
.tutor-msg p + p { margin-top: var(--space-2); }
.tutor-msg-student { align-self: flex-end; background: var(--primary-soft); color: var(--text-primary); border-bottom-right-radius: var(--radius-sm); }
.tutor-msg-tutor { align-self: flex-start; background: var(--surface-soft); border: 1px solid var(--border); border-bottom-left-radius: var(--radius-sm); }
.tutor-msg-concern { border-color: var(--warning); }
.tutor-thinking { color: var(--text-secondary); }
.tutor-form { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--border); background: var(--surface); }
.tutor-form textarea { width: 100%; min-height: 56px; max-height: 140px; resize: vertical; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 11px; font: inherit; }
.tutor-form-foot button { flex: none; white-space: nowrap; }
.tutor-form .form-error:empty { display: none; }
.tutor-form-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tutor-form-foot small { color: var(--text-muted); }
.tutor-terms { margin: var(--space-3) 0; padding-left: 1.2em; color: var(--text-secondary); }
.tutor-terms li + li { margin-top: var(--space-1); }
.check-line { display: flex; align-items: flex-start; gap: var(--space-2); font-weight: 500; }
.check-line input { margin-top: 3px; flex: none; }
.modal label.check-line { display: flex; font-size: 14px; font-weight: 500; margin-top: var(--space-4); }
.modal .check-line input { width: auto; padding: 0; }
.tutor-history-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 55vh; overflow-y: auto; margin: var(--space-3) 0; }
.tutor-history { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); }
.tutor-history summary { cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.tutor-history summary small { color: var(--text-secondary); }
.tutor-history[open] { display: flex; flex-direction: column; gap: var(--space-2); }
.tutor-history .tutor-msg { max-width: 100%; }
/* Ruimte onderaan elke pagina, zodat de knop nooit over de laatste knop of regel valt. */
body.has-tutor .page { padding-bottom: calc(var(--space-12) + 56px); }
/* Met het paneel open hoeft de melding onderaan er niet onder te verdwijnen. */
body.tutor-open .toast { z-index: 100; }
/* Zonder premium: het paneel is een korte uitleg, geen leeg chatvenster. */
.tutor-panel.is-intro { height: auto; }
.tutor-panel.is-intro .tutor-body { flex: none; }
/* Op een breed scherm schuift de pagina opzij zodat het paneel de opgave en de knoppen niet bedekt. */
@media (min-width: 1100px) {
  body.tutor-open main { margin-right: calc(400px + var(--space-6)); }
}
@media (max-width: 680px) {
  .tutor-fab { right: var(--space-4); bottom: calc(76px + env(safe-area-inset-bottom)); min-height: 44px; padding: 0 var(--space-4) 0 var(--space-3); }
  body.studying .tutor-fab { bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
  .tutor-panel { inset: 0; right: 0; bottom: 0; width: 100%; height: 100%; border: 0; border-radius: 0; }
  .tutor-panel.is-intro { top: auto; height: auto; max-height: 90vh; overflow-y: auto; border-top: 1px solid var(--border); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-bottom: env(safe-area-inset-bottom); }
  body.has-tutor .page { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  body.has-tutor.studying .page { padding-bottom: calc(var(--space-12) + 56px + env(safe-area-inset-bottom)); }
  body.tutor-open .tutor-fab { display: none; }
  body.tutor-open { overflow: hidden; }
  .tutor-form { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .tutor-fab { transition: none; } .tutor-fab:hover { transform: none; } }
:root.calm .tutor-fab:hover { transform: none; }

/* Keuze standaard of premium bij aanmelden en afrekenen (2026-10-02). */
.tier-choice { display: grid; gap: var(--space-2); }
.tier-option { display: flex !important; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; font-weight: 400 !important; }
.tier-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.tier-option input { flex: none; width: auto !important; margin: 4px 0 0 !important; }
.tier-option span { display: flex; flex-direction: column; gap: 2px; }
.tier-option small { color: var(--text-secondary); font-size: 14px; }
.tutor-lock { margin: 0; padding: var(--space-3); border-radius: var(--radius); background: var(--surface-soft); border: 1px solid var(--border); }

/* Hoe sta je ervoor (2026-10-15): per vak zeker / bezig / nog niet geoefend, per onderdeel. Zelfde groene reeks als de
   voortgangspagina; "nog niet geoefend" is het lichte grijs, zodat een gat zichtbaar is zonder te alarmeren. */
.dash-standing,
.subject-card-standing {
  --pv-new: #d5dcd3;
  --pv-busy: #8db4a0;
  --pv-done: #315b48;
}
.subject-card-standing { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-1); min-width: 0; }
.subject-card-standing small { font-size: var(--text-meta); color: var(--text-secondary); }
.standing-bar { height: 8px; width: 100%; }
.standing-bar .pv-seg { min-width: 4px; }
.standing-alert { display: inline-grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 6px; font-size: var(--text-meta); color: var(--text-primary); background: var(--warning-soft); border-radius: 8px; padding: 3px 8px; width: fit-content; max-width: 100%; }
.standing-alert svg { width: 15px; height: 15px; flex: none; color: var(--warning); margin-top: 1px; }
.standing-alerts { display: flex; flex-wrap: wrap; gap: 6px; }
/* Onderdelen (2026-10-15, "de uitlijning is nog niet helemaal ok", "wat beknopter"): één regel per onderdeel met vaste
   kolommen titel · balk · telling · knop, zodat alles onder elkaar staat; op de telefoon titel en knop boven, balk en
   telling eronder. */
.standing-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.standing-parts li { display: grid; grid-template-columns: minmax(0, 1fr) 140px 190px 104px; align-items: center; gap: 4px 14px; padding: 7px 0; border-top: 1px solid var(--border); }
.standing-parts li:first-child { border-top: 0; }
.standing-part-title { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.standing-part-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: var(--text-meta); white-space: nowrap; min-width: 0; }
.standing-part-flag { display: inline-flex; width: 14px; flex: none; }
.standing-part-meta svg { width: 14px; height: 14px; color: var(--warning); flex: none; }
.standing-practice { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--text-meta); font-weight: 700; padding: 4px 10px; min-height: 32px; white-space: nowrap; flex: none; }
.standing-practice svg { width: 14px; height: 14px; }
.standing-parts .standing-practice { width: 100%; }
.standing-alert .standing-practice { margin-left: 6px; min-height: 26px; padding: 2px 8px; }
.subject-standing-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px var(--space-3); margin: var(--space-3) 0; display: flex; flex-direction: column; gap: 8px; }
.standing-panel-head { display: flex; align-items: center; gap: 12px; }
.standing-panel-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.standing-panel-head h2 { font-size: 17px; margin: 0; }
.standing-panel-head > div > span { color: var(--text-secondary); font-size: var(--text-meta); }
/* Rondje dat volloopt (2026-10-15): de voortgang naar "op niveau" in één oogopslag. */
.standing-ring { position: relative; display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none; }
.standing-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.standing-ring circle { fill: none; stroke-width: 5; }
.standing-ring-track { stroke: var(--pv-new); }
.standing-ring-fill { stroke: var(--pv-done); stroke-linecap: round; }
.standing-ring b { position: relative; font-size: 13px; font-weight: 800; }
.subject-card-standing small b { color: var(--text-primary); }
.subject-standing-panel > .standing-bar { height: 10px; }
.subject-standing-panel .standing-legend { margin: 0; }
.pv-standing { padding: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.pv-standing h4 small { font-weight: 500; color: var(--muted); margin-left: 6px; }
/* Smal (telefoon, en de vakkaarten op de voortgangspagina): links titel, balk en telling onder elkaar, rechts een vaste
   kolom voor de knop; zo zijn alle balken even breed en staan de knoppen recht onder elkaar. */
.pv-standing .standing-parts li { grid-template-columns: minmax(0, 1fr) 104px; }
.pv-standing .standing-parts li .standing-part-title { grid-column: 1; grid-row: 1; }
.pv-standing .standing-parts li .standing-bar { grid-column: 1; grid-row: 2; }
.pv-standing .standing-parts li .standing-part-meta { grid-column: 1; grid-row: 3; }
.pv-standing .standing-parts .standing-practice { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
@media (max-width: 700px) {
  .standing-parts li { grid-template-columns: minmax(0, 1fr) 104px; }
  .standing-parts li .standing-part-title { grid-column: 1; grid-row: 1; }
  .standing-parts li .standing-bar { grid-column: 1; grid-row: 2; }
  .standing-parts li .standing-part-meta { grid-column: 1; grid-row: 3; white-space: normal; }
  .standing-parts .standing-practice { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .standing-alert { display: grid; grid-template-columns: auto minmax(0, 1fr); width: 100%; }
  .standing-alert .standing-practice { grid-column: 2; justify-self: start; margin-left: 0; }
}
.period-closed-badge { font-size: var(--text-meta); font-weight: 700; color: var(--text-secondary); background: var(--surface-soft, var(--surface)); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; }
.period-ended-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; margin-bottom: var(--space-3); border-radius: var(--radius-lg); background: var(--warning-soft); color: var(--text-primary); font-size: 14px; }
.period-ended-notice > svg { width: 18px; height: 18px; color: var(--warning); flex: none; }
.period-ended-notice span { flex: 1 1 240px; }
/* Donker thema: "nog niet geoefend" is een donker vlak en "zeker" het lichtste groen, zodat het lege deel niet feller
   oogt dan wat al gekend is (2026-10-15). Geldt ook voor de voortgangspagina. */
:root[data-theme="dark"] :is(.pv, .dash-standing, .subject-card-standing) { --pv-new: #2f3b36; --pv-busy: #4f7d66; --pv-nearly: #63967c; --pv-done: #86c3a2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) :is(.pv, .dash-standing, .subject-card-standing) { --pv-new: #2f3b36; --pv-busy: #4f7d66; --pv-nearly: #63967c; --pv-done: #86c3a2; }
}

/* ---- Volgende altijd in beeld (eigen verzoek 2026-10-16) ----
   In elke stap-voor-stap-flow blijft de knoppenbalk onderaan het scherm staan zolang de stap langer is dan het scherm:
   leersessie, leerblokken, kaartjes en grammatica, leerdoelen invullen en de vensters (lesstof toevoegen, controleren).
   Een zachte overgang erboven laat zien dat er nog tekst achter de balk doorloopt. Enter drukt op de hoofdknop
   (src/frontend/enter-key.ts). */
.study-card .study-actions,
.study-card > .modal-actions,
.vocab-session .modal-actions,
.vocab-session-actions,
.wizard-nav,
.modal > .modal-actions:last-child,
.modal > form:last-child > .modal-actions:last-child {
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding-top: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--surface);
}
.study-card .study-actions::before,
.study-card > .modal-actions::before,
.vocab-session .modal-actions::before,
.vocab-session-actions::before,
.wizard-nav::before,
.modal > .modal-actions:last-child::before,
.modal > form:last-child > .modal-actions:last-child::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 18px;
  background: linear-gradient(to bottom, transparent, var(--surface));
  pointer-events: none;
}
/* Tijdens het leren staan kaartjes en grammatica zonder kaart op de pagina; dan heeft de balk de kleur van de pagina. */
body.studying .vocab-session :is(.modal-actions, .vocab-session-actions) { background: var(--bg); }
body.studying .vocab-session :is(.modal-actions, .vocab-session-actions)::before { background: linear-gradient(to bottom, transparent, var(--bg)); }
/* Kaartjes zonder typen: het antwoord en "Wist ik / Wist ik niet" bleven zichtbaar voordat je het antwoord opende
   (display: flex won van het hidden-attribuut). */
.vocab-session [hidden] { display: none; }
/* Het meldformulier onder een vraag heeft zijn eigen knoppen; die blijven gewoon in het formulier staan. */
.study-report-form .study-actions { position: static; padding: 0; background: none; }
.study-report-form .study-actions::before { content: none; }
/* In een venster zit de balk tegen de onderrand, ook over de binnenmarge heen. */
.modal > .modal-actions:last-child,
.modal > form:last-child > .modal-actions:last-child { bottom: -28px; margin-bottom: -28px; padding-bottom: 28px; }
@media (max-width: 420px) {
  .modal > .modal-actions:last-child,
  .modal > form:last-child > .modal-actions:last-child { bottom: calc(-22px - env(safe-area-inset-bottom)); margin-bottom: calc(-22px - env(safe-area-inset-bottom)); padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}
@media (max-width: 680px) {
  /* Op de telefoon staat het menu onderaan; de balk van Leerdoelen invullen staat daar net boven. */
  .wizard-nav { bottom: calc(68px + env(safe-area-inset-bottom)); }
  /* De tutorknop zou over de knoppenbalk vallen; tijdens het leren en bij Leerdoelen invullen staat hij bovenaan. */
  body.studying .tutor-fab { top: calc(var(--space-3) + env(safe-area-inset-top)); bottom: auto; }
  body.has-tutor.studying .page { padding-top: calc(64px + env(safe-area-inset-top)); }
  body[data-page="leerdoelen"] .tutor-fab { top: 64px; bottom: auto; }
}
@media (max-width: 680px) {
  /* Op de telefoon: knoppen naast elkaar in plaats van onder elkaar, zodat de balk niet half het scherm vult. Bij drie
     of meer knoppen staat de hoofdknop over de hele breedte bovenaan. */
  :is(.study-card .study-actions, .study-card > .modal-actions, .vocab-session .modal-actions, .vocab-session-actions, .wizard-nav, .modal > .modal-actions:last-child, .modal > form:last-child > .modal-actions:last-child) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
  }
  :is(.study-card .study-actions, .study-card > .modal-actions, .vocab-session .modal-actions, .vocab-session-actions, .wizard-nav, .modal > .modal-actions:last-child, .modal > form:last-child > .modal-actions:last-child) > * {
    flex: 1 1 auto;
    width: auto;
    margin: 0;
  }
  :is(.study-card .study-actions, .study-card > .modal-actions, .vocab-session .modal-actions, .vocab-session-actions, .wizard-nav, .modal > .modal-actions:last-child, .modal > form:last-child > .modal-actions:last-child):has(> :nth-child(3)) > .primary {
    flex-basis: 100%;
    order: -1;
  }
  .study-report-form .study-actions { flex-direction: column-reverse; }
}
/* Foutenboek (opnieuw gebouwd 2026-10-16): per vak de open fouten met een oefenknop. */
.error-book-subject { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--line, rgba(0,0,0,.08)); border-radius: 12px; }
.error-book-subject h3 { margin: 0 0 6px; font-size: 16px; }
.error-book-subject h3 small { font-weight: 500; color: var(--muted, inherit); font-size: 13px; }
.error-book-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.error-book-list li { font-size: 14px; line-height: 1.4; }
.error-book-list .text-button { margin-left: 6px; font-size: 13px; }
.error-book-kind { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, inherit); }
/* Juist antwoord bij een fout gekoppeld of ingedeeld onderdeel, en de uitleg in de uitslag (2026-10-19). */
.study-pair .study-solution { grid-column: 1 / -1; display: block; margin-top: 4px; font-size: var(--text-meta); color: var(--text-secondary); }
.study-pair .study-solution b { color: var(--text-primary); }
.study-explanation { margin: 8px 0 0; padding-left: 10px; border-left: 3px solid var(--border); color: var(--text-primary); font-size: 15px; line-height: 1.5; }
/* Leertijd per dag (2026-10-19): tabel op een breed scherm, een blok per dag op de telefoon. */
.pv-study-time { margin-top: 22px; }
.pv-study-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; }
.pv-study-table th, .pv-study-table td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.pv-study-table thead th { border-top: 0; font-size: 12px; color: var(--muted); font-weight: 700; }
.pv-study-table tbody th { white-space: nowrap; font-weight: 700; }
.pv-study-table td:nth-child(2), .pv-study-table td:nth-child(3) { white-space: nowrap; }
@media (max-width: 700px) {
  .pv-study-table thead { display: none; }
  .pv-study-table, .pv-study-table tbody, .pv-study-table tr, .pv-study-table th, .pv-study-table td { display: block; width: 100%; }
  .pv-study-table tr { padding: 10px 0; border-top: 1px solid var(--line); }
  .pv-study-table th, .pv-study-table td { border-top: 0; padding: 2px 0; }
  .pv-study-table td::before { content: attr(data-label) ": "; color: var(--muted); font-size: 12px; }
}

/* Weekoverzicht voor ouder of verzorger in het leerprofiel (2026-10-19). */
.weekly-report { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.weekly-report h3 { margin: 0 0 var(--space-2); }
.weekly-report-form { margin-top: var(--space-3); }

/* "Ben je er nog?" tijdens een leersessie (src/frontend/idle-watch.ts, 2026-10-19). Boven de tutor, onder de toast. */
.idle-prompt { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--space-4); background: rgba(16, 28, 22, 0.45); }
.idle-card { width: min(420px, 100%); padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.idle-card h2 { margin: 0 0 var(--space-2); }
.idle-card .study-actions { margin-top: var(--space-4); }

/* "Ik snap het niet": eerst de uitleg uit de les (2026-10-19). */
.study-lesson { margin: 0; padding: var(--space-4); background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius); font-size: 15px; }
.study-lesson h2 { margin: 0 0 var(--space-2); font-size: 17px; }
.study-lesson p { margin: 0 0 var(--space-2); }
.study-lesson-points { margin: 0 0 var(--space-2); padding-left: 1.2em; }
.study-lesson-points li + li { margin-top: 4px; }
.study-lesson-terms { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--space-3); margin: 0 0 var(--space-2); }
.study-lesson-terms dt { font-weight: 700; }
.study-lesson-terms dd { margin: 0; }
.study-lesson-tutor { margin-top: var(--space-2); }
@media (max-width: 560px) { .study-lesson-terms { grid-template-columns: 1fr; } .study-lesson-terms dd { margin-bottom: 6px; } }

/* "Deze week" op de voortgangspagina (2026-10-19). */
.pv-week h3 { margin: var(--space-4) 0 var(--space-2); font-size: 16px; }
.pv-week-total { margin: 0 0 var(--space-3); color: var(--text-secondary); }
.pv-week-total strong { color: var(--text-primary); }
.pv-week-days { list-style: none; display: grid; gap: 6px; margin: 0 0 var(--space-3); padding: 0; }
.pv-week-day { display: grid; grid-template-columns: minmax(110px, 160px) 1fr 70px; align-items: center; gap: var(--space-3); font-size: var(--text-meta); }
.pv-week-day .progress-bar i { background: var(--primary); }
.pv-week-day.is-reached .progress-bar i { background: var(--success); }
.pv-week-day.is-rest .pv-week-label { color: var(--text-secondary); }
.pv-week-day.is-rest .progress-bar i { background: var(--text-secondary); }
.pv-week-min { text-align: right; font-variant-numeric: tabular-nums; }
.pv-week-struggles { margin: 0 0 var(--space-3); padding-left: 1.2em; }
.pv-week-struggles small { color: var(--text-secondary); }
@media (max-width: 560px) { .pv-week-day { grid-template-columns: 90px 1fr 56px; gap: var(--space-2); } }
/* Het dagdoelvenster: keuzerondjes naast hun tekst, niet als blok zoals de gewone invoervelden in een venster. */
.modal .goal-form label.goal-choice { display: flex; margin: 0; font-size: 14px; font-weight: 400; }
.modal .goal-form label.goal-day-choice { display: inline-block; margin: 0; }
.modal .goal-form .goal-choice input[type="radio"] { width: auto; margin: 0; padding: 0; flex-shrink: 0; }
.modal .goal-form .goal-choice input[type="number"], .modal .goal-form .goal-choice input[type="time"] { margin-top: 0; padding: 6px 8px; }
.modal .goal-form .goal-choice input[type="number"] { width: 80px; }
.modal .goal-form .goal-choice input[type="time"] { width: 120px; }
.modal .goal-form .goal-day-choice input { width: 1px; height: 1px; }

/* Nieuwe versie klaar terwijl je bezig bent (src/frontend/app-update.ts, 2026-10-19). Boven het menu op de telefoon. */
.update-bar { position: fixed; left: 50%; bottom: var(--space-4); z-index: 95; display: flex; align-items: center; gap: var(--space-3); width: min(560px, calc(100vw - 2 * var(--space-4))); padding: var(--space-3) var(--space-4); transform: translateX(-50%); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lift); font-size: var(--text-meta); }
.update-bar span { flex: 1; }
.update-bar button { flex-shrink: 0; }
@media (max-width: 680px) { .update-bar { bottom: calc(76px + env(safe-area-inset-bottom)); flex-wrap: wrap; } }

/* Knop Toevoegen (src/frontend/add-chooser.ts, 2026-10-22): groen in het menu, op de telefoon de ronde plusknop midden onderaan. */
.nav-item.nav-add { background: var(--primary); color: var(--on-primary); margin: var(--space-1) 0; }
.nav-item.nav-add:hover { background: var(--primary-hover); color: var(--on-primary); }
.nav-item.nav-add .nav-icon svg { stroke-width: 2.2; }
@media (max-width: 680px) {
  .bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bottom-nav-item.bottom-nav-add { color: var(--primary-hover); }
  .bottom-nav-add .nav-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-top: -18px; border-radius: 50%; background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-card); }
  .bottom-nav-add .nav-icon svg { width: 24px; height: 24px; stroke-width: 2.2; }
}
.add-choices { margin-top: var(--space-3); }