/* Opdrachten in de nieuwe stijl (zelfde taal als het dashboard). Alleen opmaak: de opdrachten zelf (vragen, nakijken, punten, eindbaas) zijn niet veranderd.
   Werkt alleen op pagina's met een opdracht (:has), dus niet op lijsten en het dashboard. */
html body main:has(.opts,.vgrid) .panel{border-radius:20px!important;padding:22px 24px;gap:16px;border:0;box-shadow:none}
html body main:has(.opts,.vgrid) .meta{gap:14px;font-size:14px;font-weight:600}
html body main:has(.opts,.vgrid) .pb{height:8px;max-width:none;border-radius:99px}html body main:has(.opts,.vgrid) .pb i{border-radius:99px}
html body main:has(.opts,.vgrid) .ask{font-size:14px;color:var(--muted,#56687d);margin:0}
html body main:has(.opts) .panel>.sent{font-size:clamp(20px,3vw,28px);line-height:1.3;letter-spacing:-.3px}
html body main:has(.vgrid) .vi .sent{font-size:17px;line-height:1.4;letter-spacing:0}
html body main:has(.opts,.vgrid) .sent u{display:inline-block;min-width:110px;border-bottom:3px solid var(--navy,#123a63);text-decoration:none}
html body main:has(.opts,.vgrid) .opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
html body main:has(.opts,.vgrid) .opt{min-height:64px;padding:0 20px;border:2px solid var(--line,#d6e0ea);border-radius:16px;background:#fff;color:var(--ink,#0f2238);font-size:18px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer;transition:transform .12s,border-color .12s}
html body main:has(.opts,.vgrid) .opt:hover:not(:disabled){transform:translateY(-2px);border-color:var(--navy,#123a63)}
html body main:has(.opts,.vgrid) .opt:focus-visible,html body main:has(.opts,.vgrid) .input:focus-visible{outline:3px solid #d9562f;outline-offset:2px}
html body main:has(.opts,.vgrid) .opt.ok,html body main:has(.opts,.vgrid) .opt.right{background:var(--goodbg,#d9f0e2);border-color:var(--good,#2e8b57)}
html body main:has(.opts,.vgrid) .opt.no,html body main:has(.opts,.vgrid) .opt.wrong{background:var(--badbg,#fbe0dd);border-color:var(--bad,#c9463c)}
html body main:has(.opts,.vgrid) .opt.ok::after,html body main:has(.opts,.vgrid) .opt.right::after{content:"\2713";font-size:20px;color:var(--good,#2e8b57)}
html body main:has(.opts,.vgrid) .opt.no::after,html body main:has(.opts,.vgrid) .opt.wrong::after{content:"\2717";font-size:20px;color:var(--bad,#c9463c)}
html body main:has(.vgrid) .vi .input,html body main:has(.vgrid) input.input{min-height:44px;border:2px solid var(--line,#d6e0ea);border-radius:12px;padding:0 14px;font-size:16px;background:#fff}
html body main:has(.vgrid) .input.ok{border-color:var(--good,#2e8b57);background:var(--goodbg,#d9f0e2)}
html body main:has(.vgrid) .input.bad,html body main:has(.vgrid) .input.no{border-color:var(--bad,#c9463c);background:var(--badbg,#fbe0dd)}
html body main:has(.vgrid) .hl{background:color-mix(in srgb,#d9562f 18%,transparent);color:inherit;border-radius:6px;padding:1px 6px;font-weight:700}
html body main:has(.vgrid) .tabs{display:flex;gap:6px;overflow-x:auto;padding:4px;background:var(--sea,#eaf1f7);border-radius:14px}
html body main:has(.vgrid) .tabs a{white-space:nowrap;border-radius:10px;padding:8px 14px;font-weight:600}
html body main:has(.vgrid) .tabs a.on{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.12)}
html body main:has(.vgrid) .tabs .ck{color:var(--good,#2e8b57);margin-left:6px}
@media(max-width:800px){html body main:has(.opts,.vgrid) .opts{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html body main:has(.opts,.vgrid) .opt{transition:none}}
/* donker thema van de oude site */
html.cs-d body main:has(.opts,.vgrid) .panel{background:#14304a!important}
html.cs-d body main:has(.opts,.vgrid) .opt{background:#10283f;border-color:#2c4a63;color:#eaf1f7}
html.cs-d body main:has(.opts,.vgrid) .opt.ok,html.cs-d body main:has(.opts,.vgrid) .opt.right{background:#16372b;border-color:#5fd49a}
html.cs-d body main:has(.opts,.vgrid) .opt.no,html.cs-d body main:has(.opts,.vgrid) .opt.wrong{background:#34221f;border-color:#ff8f73}
html.cs-d body main:has(.vgrid) .input{background:#10283f;border-color:#2c4a63;color:#eaf1f7}
html.cs-d body main:has(.vgrid) .tabs{background:#14304a}html.cs-d body main:has(.vgrid) .tabs a.on{background:#10283f}
/* stappenbalk (klas 1 t/m 3) en voortgang bovenaan (klas 4) */
.op-steps{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.op-step{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line,#d6e0ea);background:#fff;color:var(--muted,#56687d);font-size:14px;font-weight:600;text-decoration:none}
.op-step i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--sea,#eaf1f7);font-style:normal;font-size:12px}
.op-step.done{color:var(--ink,#0f2238)}.op-step.done i{background:var(--good,#2e8b57);color:#fff}
.op-step.now{border-color:var(--navy,#123a63);color:var(--ink,#0f2238);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy,#123a63) 16%,transparent)}.op-step.now i{background:var(--navy,#123a63);color:#fff}
a.op-step:hover{border-color:var(--navy,#123a63)}a.op-step:focus-visible{outline:3px solid #d9562f;outline-offset:2px}
.op-top{display:flex;align-items:center;gap:14px;margin:0 0 6px}.op-top .pbar{flex:1;height:8px;border-radius:99px;background:color-mix(in srgb,var(--fg,#0f2238) 14%,transparent);overflow:hidden}.op-top .pbar i{display:block;height:100%;background:var(--navy,#123a63);border-radius:99px;transition:width .2s}
.op-top small{color:var(--muted,#56687d);font-weight:600;white-space:nowrap}.op-top .op-score{font-weight:700;white-space:nowrap}
html.cs-d .op-step{background:#10283f;border-color:#2c4a63;color:#a9bed2}html.cs-d .op-step.done,html.cs-d .op-step.now{color:#eaf1f7}
.nav a.nav-dash{font-weight:600}
@media(prefers-reduced-motion:reduce){.op-top .pbar i{transition:none}}
/* deelscherm klas 1 t/m 3: stappenlijst en spellen in de stijl van het dashboard */
html body main:has(.steps) .steps{gap:10px}
html body main:has(.steps) .step{display:flex;align-items:center;gap:14px;min-height:72px;padding:12px 18px;border-radius:18px;background:var(--sea,#eaf1f7);border:2px solid transparent;text-decoration:none;color:var(--ink,#0f2238)}
html body main:has(.steps) .step:hover{border-color:var(--navy,#123a63)}html body main:has(.steps) .step:focus-visible{outline:3px solid #d9562f;outline-offset:2px}
html body main:has(.steps) .step .ck{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--muted,#56687d);font-weight:700}
html body main:has(.steps) .step.done .ck{background:var(--good,#2e8b57);color:#fff}
html body main:has(.steps) .step.next{border-color:var(--navy,#123a63);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--navy,#123a63) 14%,transparent)}html body main:has(.steps) .step.next .ck{background:var(--navy,#123a63);color:#fff}
html body main:has(.steps) .step b{font-size:17px}html body main:has(.steps) .step small{display:block;color:var(--muted,#56687d);font-size:14px}html body main:has(.steps) .step .r{margin-left:auto;font-weight:600;color:var(--good,#2e8b57);white-space:nowrap}
html body main:has(.steps) .games{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
html body main:has(.steps) .game{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--sea,#eaf1f7);border:2px solid transparent;text-decoration:none;color:var(--ink,#0f2238);min-height:76px}
html body main:has(.steps) .game:hover{border-color:var(--c,#123a63)}html body main:has(.steps) .game:focus-visible{outline:3px solid #d9562f;outline-offset:2px}
html body main:has(.steps) .game .ic{grid-row:1/3;display:grid;place-items:center;min-width:56px;height:48px;padding:0 8px;border-radius:14px;background:var(--c,#123a63)!important;color:#fff!important;font-size:11px;font-weight:800;letter-spacing:.04em;text-align:center}
html body main:has(.steps) .game b{font-size:16px;align-self:end}html body main:has(.steps) .game small{color:var(--muted,#56687d);font-size:13px;align-self:start}
@media(max-width:900px){html body main:has(.steps) .games{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){html body main:has(.steps) .games{grid-template-columns:1fr}}
html.cs-d body main:has(.steps) .step,html.cs-d body main:has(.steps) .game{background:#14304a;color:#eaf1f7}html.cs-d body main:has(.steps) .step.next{background:#10283f}html.cs-d body main:has(.steps) .step .ck{background:#10283f}
html body main:has(.steps) .game .ic{margin-right:12px}