/* Opdrachtenportaal Nederlands — Blaise Pascal College
   Stijl: achromatische werkomgeving. Kleur alleen op data (de blauwe lijn),
   op status (goed / fout / nakijken) en op de ene actie. Ondergrond blauwgrijs. */

:root{
  --ondergrond:#F3F4F6;
  --vlak:#FFFFFF;
  --lijn:#E3E6EB;
  --rij:#EEF0F3;
  --tekst:#1F2328;
  --grijs:#5F6368;
  --inkt:#0E6675;          /* donkere schoolteal: tekst en links, haalt WCAG AA */
  --inkt-licht:#E6F3F6;
  --primair:#172D6D;       /* schoolnavy: de ene knop per scherm */
  --primair-hover:#0E6675;
  --rood:#B42318;
  --rood-licht:#FDECEA;
  --groen:#1E6B41;
  --groen-licht:#E6F2EB;
  --geel-licht:#FFF8E1;
  --geel-tekst:#7A5A00;
  --geel-rand:#C99A1A;
  --radius:8px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Aglet Sans',system-ui,sans-serif;
  background:var(--ondergrond);color:var(--tekst);
  line-height:1.55;font-size:17px;
}
a{color:var(--inkt)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--tekst);outline-offset:2px;
}

/* Bovenbalk: de naam van het portaal, geen label boven de kop */
.topbalk{background:var(--vlak);border-bottom:1px solid var(--lijn)}
.topbalk-binnen{
  max-width:760px;margin:0 auto;padding:14px 16px;
  font-family:'Aglet Sans',sans-serif;font-weight:400;font-size:15px;
}

.wrap{max-width:760px;margin:0 auto;padding:32px 16px 72px}

/* Koppen */
header{margin-bottom:24px}
h1{
  font-family:'Aglet Slab',serif;font-weight:400;
  font-size:clamp(1.5rem,4vw,1.75rem);line-height:1.15;letter-spacing:-.01em;
}
.stand{margin-top:8px;color:var(--grijs);font-size:15px}

/* Meta-regel: losse gegevens, gescheiden door een punt, geen pillen */
.meta{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:8px;color:var(--grijs);font-size:15px}
.chip{white-space:nowrap}
.chip + .chip::before{content:"·";margin:0 8px;color:#9AA0A8}
.chip.deadline{color:var(--tekst);font-weight:700}
.chip.auto{
  color:var(--groen);background:var(--groen-licht);
  padding:0 8px;border-radius:4px;margin-left:0;font-weight:700;
}
.chip.auto::before{content:none}
.chip.auto + .chip::before{content:"·";margin-left:8px}

/* Meldingen */
.melding{margin:0 0 20px;color:var(--grijs)}
.melding.fout{color:var(--rood)}

/* Opdrachtenlijst: één vlak met scheidingslijnen, geen losse kaarten */
.lijst{
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius);
  overflow:hidden;
}
.kaart{
  display:block;text-decoration:none;color:inherit;
  padding:16px 20px;border-top:1px solid var(--rij);
}
.kaart:first-child{border-top:0}
.kaart:hover{background:#F9FAFB}
.kaart:focus-visible{outline:3px solid var(--tekst);outline-offset:-3px}
.kaart h2{
  font-family:'Aglet Sans',sans-serif;font-weight:700;
  font-size:1.1rem;line-height:1.3;
}

/* Instructie en leestekst */
.instructie{
  background:var(--inkt-licht);color:var(--tekst);border:1px solid var(--lijn);
  padding:20px 24px;margin:0 0 24px;border-radius:var(--radius);
  line-height:1.7;white-space:pre-line;
}
.leestekst{
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:20px;margin-bottom:24px;white-space:pre-line;
}
.leestekst h2{
  font-family:'Aglet Sans',sans-serif;font-weight:700;font-size:1rem;
  color:var(--grijs);margin-bottom:8px;
}

/* Leerlingcode */
.wie{margin:0 0 8px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.wie label{font-weight:700;font-size:.95rem}
.wie input{
  font-family:inherit;font-size:1.05rem;color:var(--inkt);border:none;
  border-bottom:2px solid var(--lijn);background:transparent;padding:4px 6px;width:12ch;
}
.wie input:focus{outline:none;border-bottom-color:var(--inkt)}

/* Vragen: genummerd in grijs, geen cirkels, scheiding door een regel */
ol.vragen{list-style:none;counter-reset:v;margin-top:8px;background:var(--vlak);
  border:1px solid var(--lijn);border-radius:var(--radius);padding:0 20px}
.vraag{counter-increment:v;position:relative;padding:20px 0 20px 32px;border-top:1px solid var(--rij)}
.vraag:first-child{border-top:0}
.vraag::before{
  content:counter(v)".";position:absolute;left:0;top:20px;
  font-family:'Aglet Sans',sans-serif;font-weight:700;font-size:1rem;color:var(--grijs);
}
.zin{font-size:1.06rem}
.ww{font-style:italic;color:var(--grijs);white-space:nowrap}
.invul{
  font-family:inherit;font-size:1.06rem;font-weight:700;color:var(--inkt);border:none;
  border-bottom:2px solid var(--lijn);background:transparent;padding:1px 6px;
  width:13ch;max-width:45vw;text-align:center;
}
.invul:focus{outline:none;border-bottom-color:var(--inkt);background:var(--inkt-licht)}
textarea.open{
  width:100%;min-height:110px;margin-top:10px;font-family:inherit;font-size:1rem;
  color:var(--tekst);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:10px 12px;background:var(--vlak);
}
textarea.open:focus{outline:none;border-color:var(--inkt)}
.opties{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.optie{
  display:flex;gap:10px;align-items:flex-start;background:var(--vlak);
  border:1px solid var(--lijn);border-radius:var(--radius);padding:10px 12px;cursor:pointer;
}
.optie:hover{border-color:#B9BEC8}
.optie:has(input:checked){border-color:var(--inkt);background:var(--inkt-licht)}
.optie input{margin-top:5px;accent-color:var(--inkt)}
.optie b{font-family:'Aglet Sans',sans-serif}

/* Nakijken */
.vraag.goed .invul{color:var(--groen);border-bottom-color:var(--groen);background:var(--groen-licht)}
.vraag.fout .invul{color:var(--rood);border-bottom-color:var(--rood);background:var(--rood-licht);text-decoration:line-through}
.oordeel{display:none;margin-top:10px;font-size:.95rem;border-radius:6px;padding:8px 12px}
.vraag.goed .oordeel{display:block;background:var(--groen-licht);color:var(--groen)}
.vraag.fout .oordeel{display:block;background:var(--rood-licht);color:var(--rood)}
.vraag.nakijken .oordeel{display:block;background:var(--geel-licht);color:var(--geel-tekst)}
.oordeel .juist{font-weight:700}
.toelichting{display:block;opacity:.9;margin-top:2px;font-size:.9rem}

/* Knop en resultaat */
.acties{margin-top:24px}
button{
  font-family:'Aglet Sans',sans-serif;font-weight:600;font-size:1.15rem;
  padding:12px 22px;border-radius:var(--radius);border:none;cursor:pointer;
  background:var(--primair);color:#fff;
}
button:hover{background:var(--primair-hover)}
button:disabled{opacity:.5;cursor:not-allowed}

.resultaat{
  display:none;margin-top:24px;padding:20px;
  border:1px solid var(--lijn);border-radius:var(--radius);background:var(--vlak);
  align-items:center;gap:20px;
}
.resultaat.zichtbaar{display:flex;flex-wrap:wrap}
.cijfer{
  flex:none;display:flex;flex-direction:column;align-items:flex-start;
  font-family:'Aglet Sans',sans-serif;font-weight:800;font-size:2.25rem;line-height:1;
  color:var(--tekst);min-width:4ch;
}
.cijfer.voldoende{color:var(--groen)}
.cijfer small{font-size:.8rem;font-weight:600;color:var(--grijs);margin-top:4px}
.uitslag h2{font-family:'Aglet Sans',sans-serif;font-size:1.15rem;font-weight:700}
.uitslag p{color:var(--grijs);margin-top:4px;font-size:15px}

footer{margin-top:40px;color:var(--grijs);font-size:15px}
footer a{color:var(--inkt)}

@media (max-width:480px){
  body{font-size:16px}
  .wrap{padding:24px 16px 56px}
  .kaart{padding:14px 16px}
  ol.vragen{padding:0 16px}
  .vraag{padding-left:28px}
}