/* Cursusplatform — gedeelde stylesheet (offline, geen afhankelijkheden) */
:root{
  --bg:#f6f7f9; --panel:#ffffff; --panel-2:#f0f2f5; --ink:#15181d; --ink-2:#4a5260;
  --line:#dfe3ea; --accent:#1f6feb; --accent-ink:#ffffff;
  --ok:#1a7f4b; --ok-bg:#e6f5ec; --bad:#b42318; --bad-bg:#fdeceb; --warn:#8a5a00; --warn-bg:#fdf3e0;
  --code-bg:#0f1420; --code-ink:#e6edf7;
  --radius:10px; --mono:"Cascadia Mono","JetBrains Mono",Consolas,"Courier New",monospace;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
[data-theme="dark"]{
  --bg:#0e1117; --panel:#161b22; --panel-2:#1c222b; --ink:#e6edf3; --ink-2:#9aa6b2;
  --line:#2a323d; --accent:#4c8dff; --accent-ink:#08101f;
  --ok:#4ade80; --ok-bg:#0f2a1c; --bad:#f87171; --bad-bg:#2c1414; --warn:#fbbf24; --warn-bg:#2b2110;
  --code-bg:#0a0d14; --code-ink:#dbe6f5;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:15px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}
.side{background:var(--panel);border-right:1px solid var(--line);padding:18px 14px 40px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:block;font-weight:700;font-size:16px;color:var(--ink);letter-spacing:-.2px;margin:0 6px 4px}
.brand small{display:block;font-weight:500;font-size:11.5px;color:var(--ink-2);letter-spacing:0}
.switch{display:block;margin:12px 6px 0;padding:6px 10px;border:1px dashed var(--line);border-radius:7px;font-size:12.5px;font-weight:600;text-align:center;color:var(--ink-2)}
.switch:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.navgroup{margin-top:18px}
.navgroup h4{margin:0 6px 6px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2)}
.side nav a{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:6px 9px;border-radius:7px;color:var(--ink-2);font-size:13.5px}
.side nav a:hover{background:var(--panel-2);color:var(--ink);text-decoration:none}
.side nav a.active{background:var(--accent);color:var(--accent-ink);font-weight:600}
.side nav a .w{font-size:11px;opacity:.75;font-variant-numeric:tabular-nums}
.main{padding:34px 40px 90px;max-width:1000px}
@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .main{padding:22px 18px 60px}
}

/* ---------- typography ---------- */
h1{font-size:29px;line-height:1.2;letter-spacing:-.5px;margin:0 0 6px}
h2{font-size:21px;margin:38px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);letter-spacing:-.3px}
h3{font-size:16.5px;margin:26px 0 6px}
h4{font-size:14px;margin:18px 0 4px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
p,ul,ol,table{margin:0 0 12px}
ul,ol{padding-left:22px}
li{margin:3px 0}
.lead{font-size:16.5px;color:var(--ink-2);margin-bottom:18px}
.muted{color:var(--ink-2)}
code{font-family:var(--mono);font-size:.9em;background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;white-space:nowrap}
pre{background:var(--code-bg);color:var(--code-ink);padding:13px 15px;border-radius:var(--radius);overflow-x:auto;font-family:var(--mono);font-size:12.8px;line-height:1.6;margin:0 0 14px}
pre code{background:none;border:0;padding:0;color:inherit;white-space:pre;font-size:inherit}
kbd{font-family:var(--mono);font-size:11.5px;background:var(--panel-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 5px}

/* ---------- components ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:0 0 14px}
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
table{width:100%;border-collapse:collapse;font-size:13.5px;display:block;overflow-x:auto}
th,td{border-bottom:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
th{background:var(--panel-2);font-weight:600;white-space:nowrap}
td code{white-space:pre-wrap}
.note,.tip,.warn,.exam{border-left:3px solid var(--accent);background:var(--panel);border-radius:0 var(--radius) var(--radius) 0;padding:11px 15px;margin:0 0 14px;font-size:14px}
.tip{border-color:var(--ok);background:var(--ok-bg)}
.warn{border-color:var(--bad);background:var(--bad-bg)}
.exam{border-color:var(--warn);background:var(--warn-bg)}
/* alleen de EERSTE <b> is het label van het kader; verdere <b> blijven inline */
.note>b:first-child,.tip>b:first-child,.warn>b:first-child,.exam>b:first-child{
  display:block;margin-bottom:2px;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.pill.w{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn{display:inline-block;font:inherit;font-size:14px;font-weight:600;padding:8px 16px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.btn:hover{background:var(--panel-2);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hr{height:1px;background:var(--line);margin:26px 0}

/* "Eerst de basis" — uitleg die geen voorkennis veronderstelt */
.basis{border:1px solid var(--line);border-left:4px solid var(--accent);background:var(--panel);
  border-radius:0 var(--radius) var(--radius) 0;padding:4px 20px 14px;margin:0 0 18px}
.basis>h4:first-child{color:var(--accent);font-size:12px;margin:14px 0 8px}
.basis p:last-child,.basis ul:last-child,.basis pre:last-child{margin-bottom:0}
.basis h3{font-size:15.5px;margin:16px 0 4px}

/* objective header */
.obj{scroll-margin-top:14px}
.obj-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:34px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--accent)}
.obj-head h2{border:0;margin:0;padding:0;font-size:20px}
.terms{font-size:13px;color:var(--ink-2);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;margin:0 0 16px}
.terms b{color:var(--ink)}

/* progress */
.track{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);margin:0 6px 2px}
.bar{height:6px;border-radius:99px;background:var(--panel-2);overflow:hidden;flex:1;border:1px solid var(--line)}
.bar span{display:block;height:100%;background:var(--accent);width:0;transition:width .25s}
.chk{display:flex;gap:9px;align-items:flex-start;font-size:14px;padding:5px 0;cursor:pointer}
.chk input{margin-top:4px;flex:none;accent-color:var(--accent);width:15px;height:15px}
.chk.done span{color:var(--ink-2);text-decoration:line-through}

/* stat */
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.stat .n{font-size:26px;font-weight:700;letter-spacing:-1px;line-height:1.1}
.stat .l{font-size:12px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}

/* quiz */
.q{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:0 0 12px}
.q .stem{font-weight:600;margin-bottom:10px}
.q .stem .qn{color:var(--ink-2);font-weight:500;margin-right:6px;font-variant-numeric:tabular-nums}
.opt{display:flex;gap:10px;align-items:flex-start;padding:7px 10px;border:1px solid var(--line);border-radius:8px;margin:0 0 6px;cursor:pointer;font-size:14px;background:var(--bg)}
.opt:hover{border-color:var(--accent)}
.opt input{margin-top:3px;flex:none;accent-color:var(--accent)}
.opt.correct{background:var(--ok-bg);border-color:var(--ok)}
.opt.wrong{background:var(--bad-bg);border-color:var(--bad)}
.opt.locked{cursor:default}
.opt.locked:hover{border-color:var(--line)}
.opt.correct.locked:hover{border-color:var(--ok)}
.opt.wrong.locked:hover{border-color:var(--bad)}
.fill input[type=text]{font-family:var(--mono);font-size:14px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);width:min(420px,100%)}
.expl{margin-top:10px;padding:11px 14px;border-left:3px solid var(--accent);background:var(--panel-2);border-radius:0 8px 8px 0;font-size:13.5px}
.expl b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin-bottom:3px}
.verdict{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.verdict.ok{color:var(--ok)}
.verdict.no{color:var(--bad)}
.score{font-size:15px}
.score .big{font-size:40px;font-weight:800;letter-spacing:-1.5px;display:block;line-height:1}

/* flashcards */
.fc{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:38px 30px;min-height:210px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;cursor:pointer;user-select:none}
.fc .front{font-size:21px;font-weight:600;letter-spacing:-.3px}
.fc .back{font-size:16px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);width:100%;color:var(--ink-2)}
.fc .back code{white-space:pre-wrap}
.fc .hint{font-size:12px;color:var(--ink-2);margin-top:14px;text-transform:uppercase;letter-spacing:.06em}
select{font:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
.themebtn{position:fixed;right:16px;top:14px;z-index:9;font-size:12px;padding:5px 11px;border-radius:99px;border:1px solid var(--line);background:var(--panel);color:var(--ink-2);cursor:pointer}
.toc{font-size:14px;columns:2;column-gap:26px}
@media (max-width:640px){.toc{columns:1}}
.toc a{display:block;padding:2px 0}


/* ---------- kruimelpad in de zijbalk ---------- */
.crumb{display:block;margin:0 6px 10px;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.crumb:hover{color:var(--accent);text-decoration:none}

/* ---------- portal: cursusoverzicht en cursuspagina ---------- */
.shell{max-width:940px;margin:0 auto;padding:46px 22px 90px}
.shell .top{margin-bottom:30px}
.shell h1{font-size:32px}
.masthead{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2);font-weight:700;margin:0 0 8px}
.begroeting{display:flex;align-items:center;gap:7px;margin:4px 0 10px;font-size:14px;
  font-weight:600;color:var(--accent)}
.begroeting::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--ok)}

.cursus{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin:0 0 14px;color:var(--ink)}
.cursus:hover{border-color:var(--accent);text-decoration:none}
.cursus h2{font-size:20px;margin:0;padding:0;border:0;letter-spacing:-.3px}
.cursus .sub{font-size:13.5px;color:var(--ink-2);margin:2px 0 0}
.cursus p{margin:10px 0 0;color:var(--ink-2);font-size:14px}
.cursus .meta{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.cursus[aria-disabled="true"]{opacity:.6;pointer-events:none}

.sub-cursus{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px;color:var(--ink);height:100%}
.sub-cursus:hover{border-color:var(--accent);text-decoration:none}
.sub-cursus h3{margin:0;font-size:18px;letter-spacing:-.2px}
.sub-cursus .sub{font-size:12.5px;color:var(--ink-2);margin:2px 0 0}
.sub-cursus p{margin:10px 0 0;color:var(--ink-2);font-size:13.5px;flex:1}
.sub-cursus .cijfers{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0 0;font-size:12px;color:var(--ink-2)}
.sub-cursus .cijfers b{display:block;font-size:17px;color:var(--ink);font-weight:700;line-height:1.2;
  font-variant-numeric:tabular-nums}
.sub-cursus .voortgang{margin:16px 0 0}
.sub-cursus .voortgang .bar{margin:5px 0 0}
.sub-cursus .voortgang .cap{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-2)}
.sub-cursus .ga{margin:16px 0 0;font-size:13.5px;font-weight:600;color:var(--accent)}

@media (max-width:860px){ .shell{padding:26px 18px 60px} .shell h1{font-size:26px} }

/* ---------- aanmeldpagina ---------- */
.aanmeldscherm{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.aanmeldkaart{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 30px;width:100%;max-width:380px}
.aanmeldkaart h1{font-size:24px;margin:0 0 4px}
.aanmeldkaart label{display:block;font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-2);margin:14px 0 5px}
.aanmeldkaart input{width:100%;font:inherit;padding:9px 11px;border-radius:8px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.aanmeldkaart input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.aanmeldkaart .btn{width:100%;margin-top:20px}
.melding{margin:16px 0 0;padding:9px 12px;border-radius:8px;font-size:13.5px;border:1px solid}
.melding.fout{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.melding.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}

/* ---------- wie is aangemeld ---------- */
.gebruikersbalk{position:fixed;right:16px;top:14px;z-index:9;display:flex;align-items:center;gap:8px}
.gebruikersbalk .wie{display:flex;align-items:center;gap:8px;font-size:12.5px;
  color:var(--ink);background:var(--panel);border:1px solid var(--line);
  border-radius:99px;padding:4px 13px 4px 5px;white-space:nowrap}
.gebruikersbalk .wienaam{font-weight:600}
.gebruikersbalk .avatar{display:grid;place-items:center;width:24px;height:24px;
  border-radius:99px;background:var(--accent);color:var(--accent-ink);
  font-size:10.5px;font-weight:700;letter-spacing:.02em}
.gebruikersbalk button,.gebruikersbalk .balkknop{font:inherit;font-size:12px;padding:5px 11px;
  border-radius:99px;border:1px solid var(--line);background:var(--panel);color:var(--ink-2);
  cursor:pointer;text-decoration:none;line-height:1.5}
.gebruikersbalk button:hover,.gebruikersbalk .balkknop:hover{border-color:var(--accent);
  color:var(--accent);text-decoration:none}
/* De themaknop stond los rechtsboven; binnen de balk hoort hij niet meer vast te staan. */
.gebruikersbalk .themebtn{position:static}
.opslagmelding{font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.opslagmelding.fout{color:var(--bad)}
/* Ruimte vrijhouden voor de vaste balk, zodat hij niet over een titel valt. */
body.heeft-balk .main{padding-top:64px}
body.heeft-balk .shell{padding-top:74px}

@media (max-width:700px){
  .gebruikersbalk .wienaam{max-width:32vw;overflow:hidden;text-overflow:ellipsis}
  body.heeft-balk .main,body.heeft-balk .shell{padding-top:60px}
}

/* ---------- beheerpagina ---------- */
.beheerform .velden{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.beheerform label{display:block;font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-2);margin:0 0 5px}
.beheerform input[type=text]{width:100%;font:inherit;padding:8px 11px;border-radius:8px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.beheerform input[type=text]:focus{outline:2px solid var(--accent);outline-offset:1px;
  border-color:var(--accent)}
.beheerform .metknop{display:flex;gap:8px}
.beheerform .metknop .btn{white-space:nowrap;padding:8px 12px;font-size:13px}
.beheerform .hint{margin:5px 0 0;font-size:12px;color:var(--ink-2);line-height:1.45}
.beheerform .keuze{display:flex;gap:9px;align-items:flex-start;margin:16px 0 0;
  font-size:13.5px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-2)}
.beheerform .keuze input{margin:3px 0 0;flex:none}
.beheerform .keuze b{color:var(--ink)}
.beheerform > .btn{margin-top:18px}

.gebruiker{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin:0 0 12px}
.gebruiker h3{margin:0;font-size:16.5px}
.gebruiker .sub{margin:3px 0 0;font-size:12.5px;color:var(--ink-2)}
.gebruiker .acties{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.gebruiker .acties .btn{font-size:13px;padding:6px 12px}
.gebruiker .uitkomst{margin:12px 0 0;padding:10px 12px;border-radius:8px;font-size:13px;
  background:var(--ok-bg);border:1px solid var(--ok);color:var(--ink)}
.btn.gevaar{border-color:var(--bad);color:var(--bad)}
.btn.gevaar:hover{background:var(--bad-bg)}
.pill.let{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}