/* Inburgering Plan — stylesheet */
:root{
  --nl-red:#AE1C28; --nl-blue:#21468B; --nl-blue-2:#16307a; --nl-orange:#FF7900;
  --bg:#f4f6fa; --card:#ffffff; --ink:#12151c; --ink2:#4a5262; --ink3:#79808f;
  --line:#e2e6ee; --line2:#eef1f6;
  --ok:#0e7c50; --ok-bg:#e6f6ee; --warn:#a35b00; --warn-bg:#fff5e6;
  --err:#b3261e; --err-bg:#fdecea; --info:#21468B; --info-bg:#eaf0fb;
  --shadow:0 1px 2px rgba(18,21,28,.06),0 8px 24px rgba(18,21,28,.07);
  --shadow-lg:0 18px 60px rgba(18,21,28,.28);
  --r:14px; --r-sm:9px; --r-lg:22px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans','Noto Sans Arabic',sans-serif;
  /* Geometrische schreefloze voor het woordmerk: strakke cirkelvormen die in
     schuine kapitalen modern en zelfverzekerd staan. Futura hoort bij macOS,
     Century Gothic bij Windows, URW Gothic bij de meeste Linux-distributies.
     Eindigt op Noto Sans zodat een naam in elk schrift blijft renderen. */
  --display:'Futura','Century Gothic','URW Gothic','Avant Garde','Questrial',
            'Trebuchet MS','Noto Sans',sans-serif;
  /* one colour per exam part, so a subject is recognisable at a glance */
  --c-lezen:#1d4ed8;     --c-lezen-bg:#dbe6fe;
  --c-luisteren:#6d28d9; --c-luisteren-bg:#e9e2fd;
  --c-spreken:#be123c;   --c-spreken-bg:#fde0e7;
  --c-schrijven:#047857; --c-schrijven-bg:#d3f5e6;
  --c-knm:#b45309;       --c-knm-bg:#fdeecd;
  --maxw:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
  --safe-b:env(safe-area-inset-bottom,0px);
}
html[data-theme="dark"]{
  --c-lezen:#93b4ff;     --c-lezen-bg:#16234a;
  --c-luisteren:#c4b1fb; --c-luisteren-bg:#261a4d;
  --c-spreken:#fda4bd;   --c-spreken-bg:#43121f;
  --c-schrijven:#6ee7b7; --c-schrijven-bg:#0c3327;
  --c-knm:#fcd34d;       --c-knm-bg:#3d2a09;
  --bg:#0e1116; --card:#161b23; --ink:#e9edf4; --ink2:#a8b1c2; --ink3:#7d8698;
  --line:#252c38; --line2:#1d232d;
  --ok:#4ade80; --ok-bg:#0f2a1e; --warn:#fbbf24; --warn-bg:#2c2211;
  --err:#f87171; --err-bg:#2d1517; --info:#7aa5f0; --info-bg:#141f33;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 18px 60px rgba(0,0,0,.7);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans); background:var(--bg); color:var(--ink);
  font-size:15.5px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none; min-height:100dvh;
}
body.locked{overflow:hidden}
html[dir="rtl"] body{font-family:'Noto Sans Arabic',var(--sans)}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.25;font-weight:680;letter-spacing:-.011em}
h1{font-size:1.55rem} h2{font-size:1.16rem} h3{font-size:1rem} h4{font-size:.9rem}
p{margin:0 0 .8em}
a{color:var(--nl-blue)} html[data-theme="dark"] a{color:var(--info)}
button{font:inherit;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.muted{color:var(--ink2)} .dim{color:var(--ink3)} .small{font-size:.85rem}
.tiny{font-size:.775rem} .bold{font-weight:650} .center{text-align:center}
.mono{font-variant-numeric:tabular-nums}
.row{display:flex;gap:10px;align-items:center} .row.wrap-r{flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:10px}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px}
.grow{flex:1} .hidden{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- page title + navigation HUD ----------
   The page title and the deadline sit above the bar; the bar itself is one
   capsule holding the tabs on the left and the controls on the right. -------- */
header.top{
  background:linear-gradient(135deg,var(--nl-blue) 0%,var(--nl-blue-2) 55%,#0e2358 100%);
  color:#fff; position:relative; z-index:30;
  box-shadow:0 2px 14px rgba(0,0,0,.16);
  padding-top:env(safe-area-inset-top,0px);
}
/* Title and deadline sit centred above the bar, on one line where there is
   room and stacked where there is not. */
.page-head{display:flex;align-items:baseline;justify-content:center;gap:12px;
  flex-wrap:wrap;padding:15px 0 3px;text-align:center}
/* Schuine kapitalen met ruime spatiëring. De text-indent compenseert de
   spatie die letter-spacing achter de laatste letter zet — zonder die
   correctie staat een gecentreerde titel net iets links van het midden. */
.page-title{font-family:var(--display);font-size:1.5rem;font-weight:500;color:#fff;margin:0;
  font-style:italic;text-transform:uppercase;letter-spacing:.13em;text-indent:.13em;
  line-height:1.25;max-width:100%;overflow-wrap:anywhere;
  text-shadow:0 1px 2px rgba(0,0,0,.22)}
.hud{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:9px 0 12px; padding:6px 8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 4px 18px rgba(0,0,0,.14);
  backdrop-filter:blur(6px);
}
.hud-right{display:flex;align-items:center;gap:7px;flex:0 0 auto;margin-inline-start:auto}
.deadline-pill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;
  padding:5px 11px;border-radius:999px;font-size:.735rem;font-weight:650;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px}
.deadline-pill.urgent{background:rgba(255,150,60,.34);border-color:rgba(255,190,130,.55)}
.deadline-pill.crit{background:rgba(230,70,60,.46);border-color:rgba(255,160,150,.6)}
button.deadline-pill{cursor:pointer}
.hbtn{
  width:36px;height:36px;border-radius:11px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.11);color:#fff;cursor:pointer;display:grid;place-items:center;
  font-size:1rem;flex:0 0 auto;transition:background .18s var(--ease),transform .18s var(--ease)
}
.hbtn:hover{background:rgba(255,255,255,.26)}
.hbtn:active{transform:scale(.92)}
.hbtn.avatar{border-radius:50%;font-weight:700;font-size:.82rem;
  background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.32)}
.hbtn.on{background:#fff;color:var(--nl-blue);border-color:#fff}

/* ---------- tabs, inline in the HUD ---------- */
nav.tabs{position:relative;flex:1 1 260px;min-width:0;margin-inline-end:6px}
nav.tabs .scroller{
  display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:1px 0;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
nav.tabs .scroller::-webkit-scrollbar{display:none}
.tab{
  background:transparent;border:1px solid transparent;
  border-radius:10px;padding:7px 11px;cursor:pointer;white-space:nowrap;color:rgba(255,255,255,.8);
  font-weight:600;font-size:.83rem;display:flex;align-items:center;gap:6px;
  transition:background .18s var(--ease),color .18s var(--ease),transform .16s var(--ease);
  scroll-snap-align:start;flex:0 0 auto;position:relative
}
.tab:hover{background:rgba(255,255,255,.16);color:#fff}
.tab:active{transform:scale(.96)}
.tab.active{background:#fff;color:var(--nl-blue);border-color:#fff;font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.18)}
.tab .ico{font-size:.96rem;line-height:1}
.tab .st{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);flex:0 0 auto}
.tab .st.planned{background:#8ab4ff} .tab .st.progress{background:var(--nl-orange)}
.tab .st.done{background:#4ade80} .tab .st.off{background:transparent;border:1px solid rgba(255,255,255,.4)}
.tab.active .st.planned{background:var(--nl-blue)} .tab.active .st.progress{background:var(--nl-orange)}
.tab.active .st.done{background:var(--ok)} .tab.active .st.off{border-color:var(--ink3)}
.tab.muted-tab{opacity:.62}

/* ---------- main ---------- */
/* sits flush under the blue header: no strip of any kind in between */
main{padding:18px 0 40px;min-height:50vh;background:var(--bg);margin:0;border:0}
header.top + main{margin-top:0}
/* De inleverbalk staat sticky ín de inhoud (zie .sticky-foot), dus er hoeft
   geen ruimte meer onder gereserveerd te worden — alleen wat lucht. */
main.with-foot{padding-bottom:calc(20px + var(--safe-b))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px;box-shadow:var(--shadow);margin-bottom:13px}
.card.tight{padding:12px 13px}
.card.flush{margin-bottom:0}
.card h2,.card h3{margin-top:0}
.grid{display:grid;gap:13px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.g5{grid-template-columns:repeat(5,1fr)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--nl-blue);color:#fff;border:1px solid transparent;border-radius:11px;
  padding:9px 16px;font-weight:640;font-size:.9rem;cursor:pointer;text-decoration:none;
  transition:filter .16s var(--ease),transform .12s var(--ease),background .16s var(--ease);
  min-height:40px
}
.btn:hover{filter:brightness(1.1)} .btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.42;cursor:not-allowed;transform:none;filter:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--line2);filter:none}
.btn.soft{background:var(--info-bg);color:var(--info);border-color:transparent}
.btn.warm{background:var(--nl-orange);color:#241000}
.btn.ok{background:var(--ok);color:#fff}
.btn.danger{background:var(--err);color:#fff}
.btn.sm{padding:6px 11px;font-size:.82rem;border-radius:9px;min-height:34px}
.btn.lg{padding:12px 22px;font-size:1rem;border-radius:13px;min-height:48px}
.btn.block{width:100%}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--line2);color:var(--ink2);
  border-radius:999px;padding:3px 11px;font-size:.775rem;font-weight:600;white-space:nowrap}
.chip.b{background:var(--info-bg);color:var(--info)}
.chip.g{background:var(--ok-bg);color:var(--ok)}
.chip.o{background:var(--warn-bg);color:var(--warn)}
.chip.r{background:var(--err-bg);color:var(--err)}
input[type=text],input[type=date],input[type=time],input[type=number],input[type=password],select,textarea{
  font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:10px 11px;width:100%;transition:.14s;min-height:44px
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--nl-blue);outline-offset:-1px;border-color:transparent}
textarea{min-height:110px;resize:vertical;line-height:1.6}
label.fld{display:block;margin-bottom:12px}
label.fld > span.lb{display:block;font-size:.83rem;font-weight:640;color:var(--ink2);margin-bottom:5px}
input[type=range]{width:100%;accent-color:var(--nl-blue);min-height:32px}
/* a date box always has a visible calendar button next to it, so nobody has to
   type a date by hand */
.datefield{display:flex;gap:6px;align-items:stretch}
.datefield > input{flex:1 1 auto;min-width:0}
.dpick{flex:0 0 auto;width:46px;min-height:44px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);border-radius:10px;cursor:pointer;font-size:1.05rem;display:grid;place-items:center;
  transition:background .16s var(--ease),border-color .16s var(--ease),transform .12s var(--ease)}
.dpick:hover{background:var(--info-bg);border-color:var(--nl-blue)}
.dpick:active{transform:scale(.94)}
input[type=checkbox],input[type=radio]{accent-color:var(--nl-blue);width:18px;height:18px;flex:0 0 auto}

/* ---------- progress ---------- */
.bar{height:7px;background:var(--line2);border-radius:99px;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--nl-blue);border-radius:99px;transition:width .5s var(--ease)}
.bar > i.ok{background:var(--ok)} .bar > i.warn{background:var(--nl-orange)}
.ring{--p:0;width:56px;height:56px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:conic-gradient(var(--nl-blue) calc(var(--p)*1%),var(--line2) 0);transition:background .5s var(--ease)}
.ring > b{width:43px;height:43px;border-radius:50%;background:var(--card);display:grid;place-items:center;
  font-size:.76rem;font-weight:700}
.ring.done{background:conic-gradient(var(--ok) calc(var(--p)*1%),var(--line2) 0)}
.ring.sm{width:42px;height:42px} .ring.sm > b{width:32px;height:32px;font-size:.66rem}

/* ---------- dashboard: subject cards ---------- */
.subj{
  background:var(--card);border:1px solid var(--line);border-radius:13px;padding:12px;
  display:flex;flex-direction:column;gap:9px;cursor:pointer;position:relative;overflow:hidden;
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)
}
.subj:hover{border-color:var(--nl-blue);transform:translateY(-2px);box-shadow:var(--shadow)}
.subj.off{opacity:.55;background:var(--line2)}
.subj .top{display:flex;align-items:center;gap:8px}
.subj .ic{font-size:1.25rem;line-height:1}
.subj .nm{font-weight:700;font-size:.9rem;line-height:1.2;flex:1;min-width:0}
.subj .nm small{display:block;font-weight:500;font-size:.7rem;color:var(--ink3)}
.subj .meta{font-size:.72rem;color:var(--ink2);display:flex;justify-content:space-between;gap:6px}
.tgl{position:relative;width:38px;height:22px;border-radius:99px;background:var(--line);
  border:0;cursor:pointer;flex:0 0 auto;transition:background .22s var(--ease);padding:0}
.tgl::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:transform .22s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tgl.on{background:var(--ok)}
.tgl.on::after{transform:translateX(16px)}
html[dir=rtl] .tgl.on::after{transform:translateX(-16px)}

/* ---------- calendar ---------- */
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;gap:10px;flex-wrap:wrap}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dow{text-align:center;font-size:.7rem;font-weight:700;color:var(--ink3);
  text-transform:uppercase;letter-spacing:.05em;padding-bottom:3px}
.cal-day{
  aspect-ratio:1/1;min-height:52px;border:1px solid var(--line);border-radius:10px;padding:4px 5px;
  background:var(--card);cursor:default;display:flex;flex-direction:column;gap:2px;
  position:relative;overflow:hidden;text-align:start;
  transition:border-color .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease)
}
.cal-day.has{cursor:pointer}
.cal-day.has:hover{border-color:var(--nl-blue);box-shadow:0 0 0 2px var(--info-bg);transform:translateY(-2px)}
.cal-day.has:active{transform:scale(.96)}
.cal-day.pad{opacity:.25;background:transparent;border-color:transparent}
.cal-day .dnum{font-size:.76rem;font-weight:700;color:var(--ink2);line-height:1}
.cal-day.today{border-color:var(--nl-orange);border-width:2px}
.cal-day.today .dnum{color:var(--nl-orange)}
.cal-day.blocked{background:repeating-linear-gradient(45deg,var(--line2),var(--line2) 5px,transparent 5px,transparent 10px)}
.cal-day.blocked .dnum{color:var(--ink3);text-decoration:line-through}
.cal-day.past{opacity:.55}
.cal-day .marks{display:flex;flex-wrap:wrap;gap:2px;margin-top:auto;width:100%}
.mk{width:100%;font-size:.58rem;font-weight:700;border-radius:4px;padding:1px 3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.mk.ex{background:var(--info-bg);color:var(--info)}
.mk.pe{background:var(--warn-bg);color:var(--warn)}
.mk.of{background:var(--nl-red);color:#fff}
.mk.dl{background:#2b1055;color:#fff}
.mk.dn{background:var(--ok-bg);color:var(--ok)}
.legend{display:flex;flex-wrap:wrap;gap:11px;margin-top:11px;font-size:.75rem;color:var(--ink2)}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-inline-end:5px;vertical-align:-1px}

/* ---------- overlay + panel (animates out of, and back into, the navbar) ---------- */
.ovl{position:fixed;inset:0;background:rgba(10,14,22,.5);backdrop-filter:blur(4px);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;transition:opacity .28s var(--ease)}
.ovl.in{opacity:1}
.panel{
  background:var(--card);border-radius:var(--r-lg);width:min(940px,100%);
  max-height:min(86dvh,860px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:var(--shadow-lg);transform-origin:top center;will-change:transform,opacity;
  opacity:0;transition:transform .34s var(--ease),opacity .26s var(--ease)
}
.panel.in{opacity:1;transform:none !important}
.panel.narrow{width:min(460px,100%)}
.panel.mid{width:min(660px,100%)}
.panel-h{padding:16px 20px 13px;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:flex-start;gap:12px;flex:0 0 auto;background:var(--card)}
.panel-b{padding:16px 20px;overflow:auto;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.panel-f{padding:12px 20px calc(14px + var(--safe-b));border-top:1px solid var(--line);display:flex;gap:9px;
  justify-content:flex-end;flex-wrap:wrap;flex:0 0 auto;background:var(--card)}
.x{background:none;border:0;font-size:1.25rem;line-height:1;cursor:pointer;color:var(--ink3);
  padding:6px 9px;border-radius:9px;transition:background .16s var(--ease),transform .16s var(--ease);min-height:36px}
.x:hover{background:var(--line2);color:var(--ink)}
.x:active{transform:scale(.9)}
@media (prefers-reduced-motion:reduce){
  .ovl,.panel,.tab,.btn,.subj,.cal-day,.tgl,.tgl::after{transition-duration:.01ms !important}
}

/* ---------- dropdown menu ---------- */
.dd{position:fixed;background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-lg);min-width:250px;max-width:min(320px,92vw);padding:7px;z-index:220;color:var(--ink);
  opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;
  transition:opacity .2s var(--ease),transform .22s var(--ease);max-height:80dvh;overflow:auto}
html[dir=rtl] .dd{transform-origin:top left}
.dd.in{opacity:1;transform:none}
.dd .hd{padding:9px 12px 9px;border-bottom:1px solid var(--line);margin-bottom:5px}
.dd .grp{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);
  font-weight:750;padding:9px 12px 4px}
.dd button.it{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;
  padding:11px 12px;border-radius:11px;cursor:pointer;text-align:start;font-size:.9rem;color:var(--ink);
  transition:background .14s var(--ease);min-height:44px}
.dd button.it:hover{background:var(--line2)}
.dd button.it.sel{background:var(--info-bg);color:var(--info);font-weight:650}
.dd button.it .ic{width:22px;text-align:center;flex:0 0 auto}
.dd .sep{height:1px;background:var(--line);margin:5px 8px}

/* ---------- exercise ---------- */
.ex-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.ex-body{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
  box-shadow:var(--shadow);margin-bottom:13px}
.reading{font-size:1.02rem;line-height:1.75;white-space:pre-wrap;overflow-wrap:break-word}
.reading h4{font-size:1.04rem;margin:1.1em 0 .35em} .reading h4:first-child{margin-top:0}
.qbox{border:1px solid var(--line);border-radius:12px;padding:13px 14px;margin-bottom:11px;background:var(--card);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.qbox.correct{border-color:var(--ok);background:var(--ok-bg)}
.qbox.wrong{border-color:var(--err);background:var(--err-bg)}
.qn{font-size:.71rem;font-weight:800;color:var(--ink3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
.opt{display:flex;gap:10px;align-items:flex-start;padding:10px 11px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:7px;cursor:pointer;background:var(--card);
  transition:border-color .16s var(--ease),background .16s var(--ease),transform .12s var(--ease)}
.opt:hover{border-color:var(--nl-blue);background:var(--info-bg)}
.opt:active{transform:scale(.99)}
.opt.picked{border-color:var(--nl-blue);background:var(--info-bg);font-weight:600}
.opt.right{border-color:var(--ok);background:var(--ok-bg)}
.opt.bad{border-color:var(--err);background:var(--err-bg)}
.opt .k{font-weight:800;color:var(--ink3);flex:0 0 auto;width:17px}
.opt input{margin-top:3px}
.expl{margin-top:9px;padding:10px 12px;background:var(--info-bg);border-radius:10px;
  font-size:.875rem;color:var(--ink);border-inline-start:3px solid var(--info)}
.expl b{color:var(--info)}

/* click-to-translate */
.nl{cursor:help;border-bottom:1px dotted transparent;transition:.1s;border-radius:3px}
.nl:hover{border-bottom-color:var(--nl-orange);background:rgba(255,121,0,.13)}
.tip{position:fixed;z-index:300;background:#12151c;color:#fff;padding:9px 13px;border-radius:11px;
  font-size:.86rem;max-width:min(310px,88vw);box-shadow:var(--shadow-lg);line-height:1.45;
  opacity:0;transform:scale(.95);transition:opacity .16s var(--ease),transform .16s var(--ease)}
.tip.in{opacity:1;transform:none}
html[data-theme="dark"] .tip{background:#2b3341;border:1px solid #3a4453}
.tip .src{display:block;font-size:.66rem;opacity:.6;margin-top:5px;text-transform:uppercase;letter-spacing:.05em}
.tip .w{font-weight:700;color:var(--nl-orange);display:block;margin-bottom:2px}
.tip.phrase{max-width:min(380px,90vw)}
.tip.phrase .w{font-weight:600;font-size:.8rem;opacity:.85;border-bottom:1px solid rgba(255,255,255,.18);
  padding-bottom:5px;margin-bottom:6px}

/* audio player */
.player{background:var(--info-bg);border-radius:12px;padding:13px 14px;margin-bottom:12px}
.player .ctrls{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
/* volwaardige afspeelbalk: terug · afspelen · vooruit · voortgang · snelheid */
.pctrl{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.pbtn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);cursor:pointer;display:grid;place-items:center;
  font-size:.95rem;flex:0 0 auto;transition:background .16s var(--ease),transform .16s var(--ease)}
.pbtn:hover{background:var(--line2)}
.pbtn:active{transform:scale(.92)}
.pbtn[disabled]{opacity:.4;cursor:not-allowed}
.pinfo{flex:1 1 130px;min-width:110px}
.pbar{height:5px;border-radius:999px;background:var(--line);overflow:hidden}
.pbar i{display:block;height:100%;width:0;border-radius:999px;background:var(--nl-blue);
  transition:width .25s var(--ease)}
html[data-theme="dark"] .pbar i{background:var(--info)}
.pmeta{margin-top:5px;font-variant-numeric:tabular-nums}
.pspeed select{height:36px;padding:0 7px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-size:.8rem;cursor:pointer}
.pctrl.on .playbtn{box-shadow:0 0 0 4px var(--info-bg)}
@media (max-width:520px){
  .pinfo{flex:1 1 100%;order:5}
}
.playbtn{width:46px;height:46px;border-radius:50%;border:0;background:var(--nl-blue);color:#fff;
  font-size:1.1rem;cursor:pointer;display:grid;place-items:center;flex:0 0 auto;
  transition:filter .16s var(--ease),transform .14s var(--ease)}
.playbtn:hover{filter:brightness(1.15)} .playbtn:active{transform:scale(.92)}
.playbtn[disabled]{opacity:.4;cursor:not-allowed}
.rec{width:54px;height:54px;border-radius:50%;border:0;background:var(--nl-red);color:#fff;
  font-size:1.2rem;cursor:pointer;display:grid;place-items:center;transition:transform .14s var(--ease)}
.rec:active{transform:scale(.92)}
.rec.on{animation:pulse 1.15s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(174,28,40,.55)}50%{box-shadow:0 0 0 15px rgba(174,28,40,0)}}
.timer{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.24rem;min-width:60px}

/* misc */
.note{background:var(--info-bg);border-inline-start:3px solid var(--info);padding:10px 13px;
  border-radius:10px;font-size:.875rem;margin-bottom:12px}
.note.w{background:var(--warn-bg);border-color:var(--nl-orange)}
.note.e{background:var(--err-bg);border-color:var(--err)}
.note.g{background:var(--ok-bg);border-color:var(--ok)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line2);font-size:.875rem}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--ink2)} .kv .v{font-weight:640;text-align:end}
.list-item{display:flex;gap:11px;align-items:center;padding:11px 12px;border:1px solid var(--line);
  border-radius:11px;margin-bottom:8px;background:var(--card);cursor:pointer;
  transition:border-color .16s var(--ease),transform .16s var(--ease)}
.list-item:hover{border-color:var(--nl-blue);transform:translateX(2px)}
.list-item:active{transform:scale(.99)}
html[dir=rtl] .list-item:hover{transform:translateX(-2px)}
.list-item.done{background:var(--ok-bg);border-color:transparent}
.num{width:32px;height:32px;border-radius:9px;background:var(--line2);display:grid;place-items:center;
  font-weight:750;font-size:.8rem;flex:0 0 auto;color:var(--ink2)}
.num.done{background:var(--ok);color:#fff} .num.now{background:var(--nl-orange);color:#241000}
/* subject colours: every part has its own badge colour wherever its icon appears */
.num.sub-lezen{background:var(--c-lezen-bg);color:var(--c-lezen)}
.num.sub-luisteren{background:var(--c-luisteren-bg);color:var(--c-luisteren)}
.num.sub-spreken{background:var(--c-spreken-bg);color:var(--c-spreken)}
.num.sub-schrijven{background:var(--c-schrijven-bg);color:var(--c-schrijven)}
.num.sub-knm{background:var(--c-knm-bg);color:var(--c-knm)}
.num.big{width:38px;height:38px;font-size:1.06rem;border-radius:11px}
.subj .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:1rem;flex:0 0 auto;line-height:1}
.subj .ic.sub-lezen{background:var(--c-lezen-bg)}
.subj .ic.sub-luisteren{background:var(--c-luisteren-bg)}
.subj .ic.sub-spreken{background:var(--c-spreken-bg)}
.subj .ic.sub-schrijven{background:var(--c-schrijven-bg)}
.subj .ic.sub-knm{background:var(--c-knm-bg)}
/* a thin coloured edge ties the whole card to its subject */
.subj{border-inline-start-width:3px}
.subj.s-lezen{border-inline-start-color:var(--c-lezen)}
.subj.s-luisteren{border-inline-start-color:var(--c-luisteren)}
.subj.s-spreken{border-inline-start-color:var(--c-spreken)}
.subj.s-schrijven{border-inline-start-color:var(--c-schrijven)}
.subj.s-knm{border-inline-start-color:var(--c-knm)}
.subj.off{border-inline-start-color:var(--line)}
.toast{position:fixed;bottom:calc(22px + var(--safe-b));left:50%;background:#12151c;color:#fff;
  padding:11px 20px;border-radius:12px;z-index:400;box-shadow:var(--shadow-lg);font-size:.9rem;
  max-width:88vw;text-align:center;
  transform:translate(-50%,20px);opacity:0;transition:opacity .24s var(--ease),transform .24s var(--ease)}
.toast.in{transform:translate(-50%,0);opacity:1}
.steps{display:flex;gap:6px;margin-bottom:18px}
.steps i{height:4px;flex:1;background:var(--line);border-radius:9px;transition:background .3s var(--ease)}
.steps i.on{background:var(--nl-blue)}
.flag{display:inline-block;width:22px;text-align:center}
.wizard{max-width:560px;margin:30px auto}
.pick{display:block;width:100%;text-align:start;border:1.5px solid var(--line);background:var(--card);
  border-radius:12px;padding:13px 15px;margin-bottom:9px;cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease),transform .14s var(--ease)}
.pick:hover{border-color:var(--nl-blue);background:var(--info-bg)}
.pick:active{transform:scale(.99)}
.pick.sel{border-color:var(--nl-blue);background:var(--info-bg);box-shadow:0 0 0 2px var(--info-bg)}
.pick .t{font-weight:680;margin-bottom:2px} .pick .d{font-size:.83rem;color:var(--ink2)}
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pill{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 14px;
  cursor:pointer;font-size:.85rem;font-weight:600;color:var(--ink);min-height:38px;
  transition:background .16s var(--ease),color .16s var(--ease),transform .12s var(--ease)}
.pill:active{transform:scale(.95)}
.pill.on{background:var(--nl-blue);color:#fff;border-color:transparent}
.pill.blocked{background:var(--err-bg);color:var(--err);border-color:transparent}
table.tb{width:100%;border-collapse:collapse;font-size:.875rem}
table.tb th,table.tb td{padding:8px 10px;border-bottom:1px solid var(--line2);text-align:start}
table.tb th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);font-weight:750}
details.acc{border:1px solid var(--line);border-radius:11px;margin-bottom:9px;overflow:hidden;background:var(--card)}
details.acc > summary{padding:12px 15px;cursor:pointer;font-weight:640;list-style:none;display:flex;
  justify-content:space-between;align-items:center;gap:10px;font-size:.92rem;min-height:44px}
details.acc > summary::-webkit-details-marker{display:none}
details.acc > summary:hover{background:var(--line2)}
details.acc[open] > summary{border-bottom:1px solid var(--line)}
details.acc .in{padding:14px 15px}
/* De inleverbalk hoort BIJ de inhoud, niet erboven.
   Met position:fixed stond hij buiten de flow, waardoor de laatste
   antwoordoptie erachter verdween hoeveel ruimte we er ook onder
   reserveerden. position:sticky houdt hem tijdens het scrollen in beeld én
   laat hem aan het einde van de pagina zijn eigen plek innemen, ná de laatste
   vraag. Daarmee kan er per definitie niets meer achter vallen. */
.sticky-foot{position:sticky;bottom:0;z-index:55;margin:26px 0 0;
  background:var(--card);border:1px solid var(--line);border-bottom:0;
  border-radius:14px 14px 0 0;
  padding:12px 15px calc(12px + var(--safe-b));
  box-shadow:0 -4px 18px rgba(18,21,28,.12)}
html[data-theme="dark"] .sticky-foot{box-shadow:0 -4px 18px rgba(0,0,0,.45)}
.sticky-foot .wrap{max-width:none;padding:0;
  display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
details.faq{border:1px solid var(--line);border-radius:10px;padding:10px 13px;margin-bottom:8px;
  background:var(--card)}
details.faq summary{cursor:pointer;font-weight:640;list-style:none;display:flex;
  justify-content:space-between;gap:10px;align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+';color:var(--ink3);font-weight:400;font-size:1.2rem;line-height:1}
details.faq[open] summary::after{content:'−'}
details.faq[open]{border-color:var(--info)}
.fadein{animation:fadeUp .32s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .hud{gap:8px}
  .page-title{font-size:1.3rem}
}
@media (max-width:760px){
  .g5{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body{font-size:15px}
  .wrap{padding:0 12px}
  .hud{margin:7px 0 9px;padding:5px 6px;border-radius:15px;gap:7px}
  .page-head{padding:10px 0 0;gap:8px}
  .page-title{font-size:1.13rem}
  .hbtn{width:34px;height:34px;font-size:.94rem}
  .tab{padding:7px 10px;font-size:.79rem}
  .deadline-pill{font-size:.68rem;padding:4px 8px}
  main{padding:14px 0 32px}
  .card{padding:13px;border-radius:13px}
  .g5{grid-template-columns:repeat(2,1fr)}
  .cal-day{min-height:44px;padding:3px;border-radius:8px} .mk{font-size:.5rem;padding:0 2px}
  .cal-day .dnum{font-size:.68rem}
  .ring{width:48px;height:48px} .ring>b{width:37px;height:37px;font-size:.68rem}
  .ex-body{padding:14px 13px}
  .panel{max-height:92dvh;border-radius:20px}
  .panel-h{padding:14px 16px 11px} .panel-b{padding:14px 16px} .panel-f{padding:11px 16px calc(12px + var(--safe-b))}
  .legend{font-size:.68rem;gap:8px}
  .wizard{margin:16px auto}
  table.tb th,table.tb td{padding:7px 6px;font-size:.82rem}
  .timer{font-size:1.1rem;min-width:52px}
}
@media (max-width:400px){
  .g5{grid-template-columns:1fr 1fr}
  .subj{padding:10px}
  .subj .nm{font-size:.83rem}
}
@media print{header.top,nav.tabs,.sticky-foot,.btn,.ovl{display:none !important}}