/* Theorieplatform — design tokens (Swiss-calm). Bron: docs/architecture_and_design/01-design-system.md */

:root{
  --brand:37 99 235; --brand-strong:29 78 216; --on-brand:255 255 255;
  --bg:226 232 240; --surface:255 255 255; --text:15 23 42; --muted:71 85 105;
  --border:203 213 225; --good:21 128 61; --bad:185 28 28; --radius:12px;
  --text-scale:1;
  --field:255 255 255; --field-border:203 213 225; --hover:15 23 42;
  /* Blauw als TEKST/KADER (los van --brand, dat voor gevulde vlakken blijft).
     In dark mode lichter zodat tekst/randen leesbaar blijven op donker canvas. */
  --accent:37 99 235;
  /* Gemarkeerd-vlag: vol rood, leesbaar met witte tekst in beide modi (los van
     --bad, dat in cb-modus oranje wordt — markeren is geen goed/fout-signaal). */
  --mark:220 38 38;
}

/* Dark mode (SET-05) */
[data-theme="dark"]{
  --brand:37 99 235; --brand-strong:59 130 246; --on-brand:255 255 255;
  --bg:13 20 36; --surface:30 41 59; --text:226 232 240; --muted:148 163 184;
  --border:51 65 85; --good:74 222 128; --bad:248 113 113;
  --field:17 26 45; --field-border:71 85 105; --hover:226 232 240;
  --accent:96 165 250;
}

/* Kleurenblind-modus: feedback wordt blauw/oranje i.p.v. groen/rood (SET-04) */
[data-palette="cb"]{ --good:37 99 235; --bad:217 119 6; }

html{font-size:calc(16px * var(--text-scale));}
body{background:rgb(var(--bg));color:rgb(var(--text));font-family:'Source Sans 3',system-ui,sans-serif;margin:0;}

/* App-achtergrond: de lichtsporen-illustratie van het inlogscherm, ook achter de
   beheeromgeving. `position:fixed` in plaats van `background-attachment:fixed` —
   dat laatste negeert iOS Safari (dan zoomt het beeld over de volle documenthoogte
   in) en het dwingt op elke scroll een herschildering af.
   z-index:-1 kan omdat de body-achtergrond naar de canvas propageert en dus ónder
   deze laag valt; content zonder eigen z-index blijft er gewoon bovenop staan.
   De gradient-laag erover is de leesbaarheidsmarge: zonder die tint concurreert de
   gloed rechtsboven met muted tekst die direct op de achtergrond staat. */
.app-bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgb(var(--bg) / .55), rgb(var(--bg) / .55)),
                   url("../img/backgrounds/login-bg-light.webp");
  background-size:cover;background-position:68% 42%;background-repeat:no-repeat;
}
[data-theme="dark"] .app-bg{
  background-image:linear-gradient(rgb(var(--bg) / .5), rgb(var(--bg) / .5)),
                   url("../img/backgrounds/login-bg-dark.webp");
}
@media print{ .app-bg{display:none;} }
h1,h2,h3,h4,.font-head,.nav,.btn{font-family:'Lexend',system-ui,sans-serif;}

/* Dyslexie-modus (SET-03): font + ruimere spatiëring */
[data-font="dyslexic"] body,
[data-font="dyslexic"] h1,[data-font="dyslexic"] h2,[data-font="dyslexic"] h3,[data-font="dyslexic"] h4,
[data-font="dyslexic"] .font-head,[data-font="dyslexic"] .nav,[data-font="dyslexic"] .btn{
  font-family:'Atkinson Hyperlegible','Source Sans 3',system-ui,sans-serif;
  letter-spacing:.03em; word-spacing:.08em; line-height:1.85;
}

.tnum{font-variant-numeric:tabular-nums;}
.card{background:rgb(var(--surface));border:1px solid rgb(var(--border));border-radius:var(--radius);}
/* Zachte verhoging voor split-cards (zelfde zachtheid als de overlay-schaduw 0 8px 24px) */
.card-elevated{box-shadow:0 4px 16px rgb(15 23 42 / .08);}
.btn{display:inline-flex;align-items:center;gap:.5rem;height:44px;padding:0 1rem;border-radius:10px;font-weight:600;font-size:.95rem;cursor:pointer;border:0;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease;}
.btn-primary{background:rgb(var(--brand));color:rgb(var(--on-brand));}
.btn-primary:hover{background:rgb(var(--brand-strong));transform:translateY(-1px);box-shadow:0 4px 14px rgb(var(--brand) / .35);}
.btn-secondary{background:rgb(var(--surface));color:rgb(var(--text));border:1px solid rgb(var(--border));}
.btn-secondary:hover{border-color:rgb(var(--accent));color:rgb(var(--accent));transform:translateY(-1px);}
/* Afgerond/voldoende-geoefend (groen) — zelfde gedrag als btn-primary */
.btn-success{background:rgb(var(--good));color:#fff;border:1px solid rgb(var(--good));}
.btn-success:hover{filter:brightness(.94);transform:translateY(-1px);box-shadow:0 4px 14px rgb(var(--good) / .35);}
.btn:active{transform:translateY(0);}
.btn-ghost{background:transparent;color:rgb(var(--muted));}
.btn-ghost:hover{background:rgb(var(--hover) / .08);color:rgb(var(--text));}
.focusable:focus-visible{outline:2px solid rgb(var(--accent));outline-offset:2px;}
.progress{height:8px;background:rgb(var(--border));border-radius:999px;overflow:hidden;}
.progress>span{display:block;height:100%;background:rgb(var(--brand));}

/* Achtergrondtaken (publiceren, sync): draaiende indicator + een balk zonder bekend
   eindpunt. Bewust eigen CSS en geen `animate-spin`: die class zit niet in onze
   Tailwind-build, en zo blijft deze weergave los van de CSS-buildstap. */
@keyframes draai{to{transform:rotate(360deg);}}
.draait{animation:draai 1s linear infinite;}
.spinner{display:inline-block;width:1rem;height:1rem;border-radius:999px;
  border:2px solid currentColor;border-top-color:transparent;}
.balk{height:4px;border-radius:999px;background:rgb(var(--border));overflow:hidden;}
.balk>span{display:block;height:100%;width:35%;border-radius:999px;
  background:rgb(var(--brand));animation:balk-loop 1.6s ease-in-out infinite;}
@keyframes balk-loop{from{transform:translateX(-100%);}to{transform:translateX(320%);}}
/* Wie bewegende beelden liever niet ziet, krijgt een rustige vulling in plaats van
   niets — de balk moet nog steeds "er loopt iets" communiceren. */
@media (prefers-reduced-motion:reduce){
  .draait{animation:none;}
  .balk>span{animation:none;width:100%;opacity:.45;}
}

/* Trage navigatie (zie static/js/bezig.js): melding over het hele scherm zodat een
   tweede klik nergens meer landt. z-index boven de sticky header (z-20) en de
   menu's (z-30). Bewust géén Tailwind-classes in de JS-kant: deze CSS is
   handgeschreven en hoeft dus niet mee door de Tailwind-buildstap. */
.bezig-scrim{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:rgb(var(--bg) / .72);backdrop-filter:blur(2px);}
.bezig-kaart{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem;
  max-width:min(24rem,90vw);box-shadow:0 8px 24px rgb(15 23 42 / .18);}
.bezig-spinner{color:rgb(var(--brand));width:1.5rem;height:1.5rem;flex:none;}
.bezig-kop{font-family:'Lexend',system-ui,sans-serif;font-weight:600;}
.bezig-uitleg{font-size:.875rem;color:rgb(var(--muted));margin-top:.125rem;}

/* Invoervelden & pulldowns — verdiepte vlakken, los van cards (SET-05) */
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,.field{
  background:rgb(var(--field));border:1px solid rgb(var(--field-border));
  color:rgb(var(--text));border-radius:10px;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,select:focus,textarea:focus,.field:focus{
  outline:none;border-color:rgb(var(--accent));box-shadow:0 0 0 3px rgb(var(--accent) / .25);
}
select option{background:rgb(var(--surface));color:rgb(var(--text));}
::placeholder{color:rgb(var(--muted));opacity:1;}

/* Auth-formulieren (login, wachtwoord vergeten/instellen): één kolom van gelijke
   maat. Zonder deze regel valt een kaal <input> terug op zijn intrinsieke breedte
   (size=20) en staat het e-mailveld zichtbaar smaller dan het wachtwoordveld, dat
   zijn 100% uit .pw-wrap haalt. Hoogte gelijk aan .btn (44px) zodat velden en de
   Inloggen-knop hetzelfde ritme houden — en 44px is meteen de minimale tapmaat.
   De rechter-padding komt uit een variabele: .pw-wrap zet 'm ruimer voor de
   toon/verberg-knop, zonder specificiteitsgevecht met de :not()-keten hierboven. */
.auth-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]){
  width:100%;height:44px;padding:0 var(--veld-pr,.875rem) 0 .875rem;font-size:1rem;
}
.auth-form .pw-wrap{--veld-pr:2.75rem;}
/* Zachte hover voor nav/menu-items (licht oplichten i.p.v. verdonkeren) */
.hover-soft:hover{background:rgb(var(--hover) / .08);}

/* Antwoordopties */
.opt{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;padding:.9rem 1rem;border:1px solid rgb(var(--border));border-radius:10px;background:rgb(var(--surface));color:rgb(var(--text));cursor:pointer;font-size:1rem;}
.opt:hover{border-color:rgb(var(--accent));}
/* Letter A/B/C met dunne verticale scheidslijn naar de antwoordtekst (CBR-stijl) */
.opt-letter{flex:none;width:1.25rem;text-align:center;font-family:'Lexend',system-ui,sans-serif;font-weight:600;color:rgb(var(--muted));border-right:1px solid rgb(var(--border));padding-right:.75rem;margin-right:.25rem;}
/* Gevulde merkkleur-balk bij geselecteerde optie (zonder JS, via :has()) */
.opt:has(input:checked){background:rgb(var(--brand));border-color:rgb(var(--brand));color:rgb(var(--on-brand));}
.opt:has(input:checked) .opt-letter{color:rgb(var(--on-brand));border-color:rgb(var(--on-brand) / .4);}
.opt-selected{border-color:rgb(var(--accent));box-shadow:inset 0 0 0 1px rgb(var(--accent));}
.opt-correct{border-color:rgb(var(--good));background:rgb(var(--good) / .12);color:rgb(var(--good));font-weight:600;}
.opt-wrong{border-color:rgb(var(--bad));background:rgb(var(--bad) / .08);color:rgb(var(--bad));}
.icon-toolbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:8px;color:rgb(var(--muted));cursor:pointer;background:transparent;border:0;}
.icon-toolbtn:hover{background:rgb(var(--hover) / .08);color:rgb(var(--text));}

/* Menu's (profielmenu / mobiel menu): verborgen tot .open via header.js */
[data-menu]{display:none;}
[data-menu].open{display:block;}

/* Leerstof-weergave: typografie + NTC-blokken (begrip/voorbeeld/belangrijk).
   Content is bij de sync met nh3 gesaneerd tot deze tags/classes. */
.leerstof-prose{line-height:1.6;}
.leerstof-prose p{margin:0 0 .75rem;}
.leerstof-prose h2,.leerstof-prose h3,.leerstof-prose h4{font-family:'Lexend',system-ui,sans-serif;font-weight:600;margin:1rem 0 .5rem;line-height:1.3;}
.leerstof-prose ul,.leerstof-prose ol{margin:0 0 .75rem 1.25rem;}
.leerstof-prose li{margin:.25rem 0;}
.leerstof-prose cite{font-style:italic;color:rgb(var(--muted));}
.leerstof-prose table{border-collapse:collapse;width:100%;margin:.75rem 0;display:block;overflow-x:auto;}
.leerstof-prose th,.leerstof-prose td{border:1px solid rgb(var(--border));padding:.5rem .75rem;text-align:left;}
.leerstof-prose th{background:rgb(var(--brand) / .06);}
.leerstof-prose .begrip,.leerstof-prose .voorbeeld,.leerstof-prose .belangrijk{border-radius:10px;padding:.85rem 1rem;margin:.75rem 0;border-left:4px solid;}
.leerstof-prose .begrip>:last-child,.leerstof-prose .voorbeeld>:last-child,.leerstof-prose .belangrijk>:last-child{margin-bottom:0;}
.leerstof-prose .belangrijk{background:rgb(var(--bad) / .07);border-color:rgb(var(--bad));}
.leerstof-prose .begrip{background:rgb(var(--accent) / .07);border-color:rgb(var(--accent));}
.leerstof-prose .voorbeeld{background:rgb(var(--good) / .07);border-color:rgb(var(--good));}
.leerstof-prose .borden-strook{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;}
.leerstof-prose .borden-strook-titel{font-weight:600;width:100%;}

/* Voorkeuren-formulier (settings/_prefs_form.html): segmented control, toggle-switch,
   rij-indeling, icoon-badge en opslaan-statuskleuren. Herbruikt op de
   instellingenpagina én in de examen-instellingen-modal. */
.seg{display:inline-flex;border:1px solid rgb(var(--border));border-radius:10px;overflow:hidden;}
.seg label{position:relative;cursor:pointer;font-family:'Lexend';}
.seg input{position:absolute;opacity:0;width:0;height:0;}
.seg span{display:block;padding:.5rem .9rem;font-size:.875rem;color:rgb(var(--muted));}
.seg input:checked + span{background:rgb(var(--brand));color:#fff;}
.row{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid rgb(var(--border));}
.row:last-child{border-bottom:0;}
.ico{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:rgb(var(--accent) / .14);color:rgb(var(--accent));flex-shrink:0;}
.switch{position:relative;display:inline-block;}
.switch input{position:absolute;opacity:0;width:0;height:0;}
.switch span{width:46px;height:26px;border-radius:999px;background:rgb(var(--border));position:relative;display:inline-block;cursor:pointer;transition:.15s;}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:999px;background:#fff;transition:.15s;}
.switch input:checked + span{background:rgb(var(--brand));}
.switch input:checked + span::after{left:23px;}
#prefs-status[data-state="saved"]{color:rgb(var(--good));}
#prefs-status[data-state="error"]{color:rgb(var(--bad));}