/* Calm and clear: water and ink. System fonts only; nothing is loaded from elsewhere.
   Colour is never the only sign: every status is also written out in words. Light by default, dark when the
   computer asks for it. All text colours keep a contrast of at least 4.5 to 1 with their background. */

:root {
  --inkt: #132a43;          /* headings, header band */
  --tekst: #1d2b38;
  --zacht-tekst: #475966;
  --achtergrond: #eef4f6;   /* the page: a light water tint */
  --kaart: #ffffff;         /* a card on the page */
  --zacht: #f3f7f9;         /* a quiet fill inside a card */
  --rand: #b8c9d1;
  --rand-zacht: #d9e4e9;
  --accent: #0b6a6e;        /* buttons and links: deep teal */
  --accent-donker: #08494c;
  --accent-licht: #dff1f1;
  --op-accent: #ffffff;
  --fout: #8a1c1c;
  --fout-achtergrond: #fdecec;
  --goed: #1b6b3a;
  --goed-achtergrond: #e8f5ec;
  --let-op-achtergrond: #fff4d6;
  --let-op-rand: #8a6100;
  --schaduw: 0 1px 2px rgba(19, 42, 67, 0.08), 0 4px 14px rgba(19, 42, 67, 0.06);
  --straal: 12px;
  --straal-klein: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --inkt: #e6f0f5;
    --tekst: #e3ebf0;
    --zacht-tekst: #aebfca;
    --achtergrond: #0d1b27;
    --kaart: #14283a;
    --zacht: #1a3146;
    --rand: #4b6679;
    --rand-zacht: #2c4458;
    --accent: #6fd0d4;
    --accent-donker: #9be0e3;
    --accent-licht: #17434a;
    --op-accent: #06222a;
    --fout: #ffb3b3;
    --fout-achtergrond: #3a1a1e;
    --goed: #9fe0b4;
    --goed-achtergrond: #163826;
    --let-op-achtergrond: #3b3216;
    --let-op-rand: #e0b44f;
    --schaduw: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { background: var(--achtergrond); }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tekst);
  background: var(--achtergrond);
}

/* ---- the page: a header band, the steps, and the content on a card ------------------------------------------- */

.kop {
  background: var(--inkt);
  color: #ffffff;
  padding: 1rem 1.5rem 1.1rem;
}
@media (prefers-color-scheme: dark) { .kop { background: #0a141d; border-bottom: 1px solid var(--rand-zacht); } }
.kop h1 { color: inherit; margin: 0; font-size: 1.5rem; letter-spacing: 0.01em; }
.kop h1::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.6rem; border-radius: 50% 50% 50% 0; background: #7fd6da; transform: rotate(-45deg); }
.omgeving { margin: 0.2rem 0 0; font-size: 0.88rem; color: #cfdfe8; }
.wie { margin: 0.5rem 0 0; font-size: 0.95rem; color: #ffffff; }
.wie:empty { display: none; }
.wie button { margin-left: 0.4rem; padding: 0.15rem 0.6rem; font-size: 0.85rem; background: transparent; color: #ffffff; border-color: #9fb9c8; }
.wie button:hover { background: rgba(255, 255, 255, 0.14); }

#stappen, .melding, .status, main {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}
#stappen { padding: 0.9rem 1rem 0; }
.melding, .status { padding-left: 1rem; padding-right: 1rem; }
main {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 1.25rem 1.6rem 1.75rem;
  background: var(--kaart);
  border: 1px solid var(--rand-zacht);
  border-radius: var(--straal);
  box-shadow: var(--schaduw);
}
@media (max-width: 42rem) {
  .kop { padding: 0.8rem 1rem; }
  main { margin-left: 0.5rem; margin-right: 0.5rem; padding: 1rem; }
}

h1 { font-size: 1.6rem; margin: 1rem 0 0.25rem; }
h2 { font-size: 1.45rem; margin: 0.25rem 0 0.75rem; color: var(--inkt); line-height: 1.25; }
h3 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; color: var(--inkt); }
h4 { font-size: 1rem; margin: 0 0 0.25rem; color: var(--inkt); }
h4 small { font-weight: normal; }

p { margin: 0.5rem 0; }
small, .hint { color: var(--zacht-tekst); font-size: 0.9rem; }

a { color: var(--accent); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.sla-over { position: absolute; left: -999px; }
.sla-over:focus { position: static; display: inline-block; padding: 0.5rem; background: var(--kaart); }

/* messages */
.melding:empty, .status:empty { display: none; }
.melding, .fout:not(:empty) {
  margin-top: 0.75rem;
  margin-bottom: 0;
  padding: 0.7rem 1rem;
  border: 1px solid var(--fout);
  border-left-width: 6px;
  border-radius: var(--straal-klein);
  background: var(--fout-achtergrond);
  color: var(--fout);
  font-weight: 600;
}
.fout:not(:empty) { margin: 0.75rem 0; }
.fout ul { margin: 0.25rem 0 0; }
.status {
  margin-top: 0.75rem;
  margin-bottom: 0;
  padding: 0.7rem 1rem;
  border: 1px solid var(--goed);
  border-left-width: 6px;
  border-radius: var(--straal-klein);
  background: var(--goed-achtergrond);
  color: var(--goed);
}
.let-op {
  margin: 1rem 0;
  padding: 0.7rem 1rem;
  border: 1px solid var(--let-op-rand);
  border-left-width: 6px;
  border-radius: var(--straal-klein);
  background: var(--let-op-achtergrond);
}
.let-op h3 { margin-top: 0; }

/* steps: pills in a row, the current one filled */
.dossierkop { font-weight: 700; margin-right: 0.75rem; color: var(--inkt); }
.stappen { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0.4rem 0 0; padding: 0; }
.rondes { display: inline-flex; gap: 0.4rem; margin-right: 0.75rem; }
#stappen button { border-radius: 999px; padding: 0.3rem 0.9rem; font-size: 0.95rem; background: var(--kaart); }
#stappen button.zoeken { margin-left: 0.4rem; }
button[aria-current="step"], button[aria-pressed="true"],
#stappen button[aria-current="step"], #stappen button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--op-accent);
}

/* buttons and fields */
button {
  font: inherit;
  padding: 0.5rem 1rem;
  border: 2px solid var(--accent);
  border-radius: var(--straal-klein);
  background: var(--kaart);
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
button:hover { background: var(--accent-licht); }
button[aria-current="step"]:hover, button[aria-pressed="true"]:hover { background: var(--accent-donker); border-color: var(--accent-donker); }
button.belangrijk { background: var(--accent); color: var(--op-accent); }
button.belangrijk:hover { background: var(--accent-donker); border-color: var(--accent-donker); }
button.gevaar { border-color: var(--fout); color: var(--fout); }
button.gevaar:hover { background: var(--fout-achtergrond); }
.knoppen { margin: 1.25rem 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }

.veld { margin: 0.75rem 0; }
.veld > label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.sneltoetsen { margin-left: 0.5rem; }
.sneltoetsen button { padding: 0.3rem 0.7rem; font-size: 0.9rem; }
input[type="text"], input[type="number"], select, textarea {
  font: inherit;
  padding: 0.5rem 0.65rem;
  border: 2px solid var(--rand);
  border-radius: var(--straal-klein);
  background: var(--kaart);
  color: var(--tekst);
  max-width: 100%;
}
input[type="text"]:focus-visible, input[type="number"]:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); }
textarea { width: 100%; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.vinkje { margin: 0.3rem 0; }
.vinkje input { width: 1.15rem; height: 1.15rem; vertical-align: middle; }
/* the window of cities: three columns, so the list is short and the result stays near */
.steden-kiezen fieldset { columns: 3 12rem; column-gap: 1.5rem; }
.steden-kiezen .vinkje { break-inside: avoid; }

fieldset { min-width: 0; }
fieldset.groep {
  margin: 1.25rem 0;
  padding: 0.9rem 1.1rem 1.1rem;
  border: 1px solid var(--rand-zacht);
  border-radius: var(--straal);
  background: var(--zacht);
}
fieldset.groep legend { font-weight: 700; padding: 0 0.5rem; color: var(--inkt); }
.bevestiging-veld { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px dashed var(--rand); font-weight: 600; }
.vakken { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.5rem 1rem; }
fieldset.vak { margin: 0; padding: 0.3rem 0.7rem 0.55rem; border: 1px solid var(--rand-zacht); border-radius: var(--straal-klein); background: var(--kaart); }
fieldset.vak legend { font-weight: 600; padding: 0 0.3rem; }
.keuze { display: inline-block; margin-right: 0.75rem; white-space: nowrap; }
.keuze input { width: 1.05rem; height: 1.05rem; vertical-align: middle; }
.vakken-overzicht { margin: 0 0 0.9rem; padding: 0.6rem 0.9rem; border: 1px solid var(--rand-zacht); border-radius: var(--straal-klein); background: var(--kaart); }
.vakken-overzicht h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.vakken-overzicht ul, ul.ingevulde-vakken { margin: 0.25rem 0; padding-left: 1.2rem; }

/* folded parts: a quiet frame, the summary in the accent colour */
details { margin: 0.5rem 0; }
details > summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 0.15rem 0; }
details > summary:hover { color: var(--accent-donker); }
details.vakken-bijvoegen { margin: 0.5rem 0; }
details.vakken-bijvoegen summary { margin-bottom: 0.5rem; }
details.profiel-sector, details.bewuste-keuze, details.voldoet-niet, details.wat-als, details.resultatenlijst {
  margin: 0.75rem 0;
  border: 1px solid var(--rand-zacht);
  border-radius: var(--straal-klein);
  padding: 0.5rem 0.9rem;
  background: var(--zacht);
}
details.bewuste-keuze { margin: 1.25rem 0; }
details.steden-kiezen { margin: 0.9rem 0; padding: 0.5rem 0.9rem; border: 1px solid var(--rand-zacht); border-radius: var(--straal-klein); background: var(--zacht); }

.sectoren { display: grid; grid-template-columns: minmax(10rem, 1fr) 1fr 1fr; gap: 0.25rem 1rem; align-items: end; }
.sectoren .veld { margin: 0; }
.sectoren .veld > label { font-weight: 400; font-size: 0.85rem; }
.treffers { margin: 0.75rem 0; padding-left: 0.9rem; border-left: 4px solid var(--accent-licht); }

/* the start: who are you */
.gebruikers { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; padding: 0; margin: 1.25rem 0 0.5rem; }
.gebruikers button { min-width: 11rem; padding: 1.1rem 1.6rem; font-size: 1.2rem; border-radius: var(--straal); box-shadow: var(--schaduw); }

/* dossiers */
.dossiers { list-style: none; padding: 0; margin: 0.75rem 0; }
.dossiers li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; margin: 0.4rem 0; border: 1px solid var(--rand-zacht); border-radius: var(--straal-klein); background: var(--zacht); }
.dossiers li:hover { border-color: var(--rand); }
.code { display: inline-block; min-width: 9rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 600; color: var(--inkt); }
.dossiers button { padding: 0.3rem 0.8rem; font-size: 0.92rem; }
.bevestiging { margin: 0.75rem 0; padding: 0.7rem 1rem; border: 2px solid var(--fout); border-radius: var(--straal-klein); }

/* proposals */
.voorstellen { list-style: none; padding: 0; }
.voorstellen > li { margin: 0.75rem 0; padding: 0.85rem 1rem; border: 1px solid var(--rand-zacht); border-radius: var(--straal); background: var(--zacht); }
.voorstellen .waarde { font-size: 1.05rem; margin-top: 0; }
.passage { margin: 0.25rem 0; }
mark { background: #ffe58a; color: #1d2b38; padding: 0 0.15rem; border-radius: 3px; }
.overgenomen:not(:empty) { color: var(--goed); font-weight: 600; }

/* versions and list */
.versies { padding-left: 1.2rem; }
.opleidingen, .wensen, .buiten-skdb, .opleidingen-kiezen { list-style: none; padding: 0; }
.opleidingen-kiezen > li { margin: 0.35rem 0; padding: 0.45rem 0.7rem; border: 1px solid transparent; border-bottom-color: var(--rand-zacht); border-radius: var(--straal-klein); }
.opleidingen-kiezen > li:hover { background: var(--zacht); }
.opleidingen-kiezen .hint { margin: 0 0 0 1.7rem; }
.locatie-opleiding { margin: 1.75rem 0; }
fieldset.locaties { margin: 0.6rem 0 0; border: 1px solid var(--rand-zacht); border-radius: var(--straal-klein); }
.opleidingen > li, .wensen > li { margin: 0.75rem 0; }
article.opleiding { padding: 0.9rem 1.1rem; border: 1px solid var(--rand-zacht); border-radius: var(--straal); background: var(--kaart); box-shadow: var(--schaduw); }
article.opleiding dl { display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr; gap: 0.25rem 1rem; margin: 0.4rem 0 0; }
article.opleiding dt { font-weight: 600; color: var(--zacht-tekst); }
article.opleiding dd { margin: 0; }
.shortlist-vinkje { display: block; margin: 0.4rem 0; padding: 0.3rem 0.7rem; font-size: 0.9rem; }
.shortlist-vinkje[aria-pressed="true"] { font-weight: 700; }
.toelating { padding: 0.05rem 0.5rem; border: 1px solid currentColor; border-radius: 999px; font-size: 0.92rem; }
.toelating-voldoet { color: var(--goed); background: var(--goed-achtergrond); }
.toelating-voldoet-niet { color: var(--fout); background: var(--fout-achtergrond); }
.toelating-onbekend { color: var(--zacht-tekst); background: var(--zacht); }
.meldingen { margin: 0.25rem 0; padding-left: 1.2rem; }

/* study environment (list 2) under an opleiding */
details.studieomgeving, details.studieresultaten { margin-top: 0.75rem; border-top: 1px dashed var(--rand); padding-top: 0.5rem; }
.gepagineerd .knoppen { margin: 0.5rem 0; }
.dimensie-blok, .resultaat-blok { margin: 0.9rem 0; }

#wat-als-uitkomst { margin-top: 0.75rem; }
/* a neutral highlight for something worth noticing without being a warning: no red/yellow/green, just a quiet bar */
.skdb-wijziging { margin: 0.5rem 0; padding: 0.5rem 0.75rem; border-left: 4px solid var(--rand); }
.dimensie-blok .dimensie { margin-bottom: 0.15rem; }
.criterium { margin: 0.15rem 0; font-weight: 600; }
.dimensie-blok table, .resultaat-blok table { border-collapse: collapse; margin: 0.3rem 0; min-width: 22rem; }
.dimensie-blok th, .dimensie-blok td, .resultaat-blok th, .resultaat-blok td { border: 1px solid var(--rand-zacht); padding: 0.25rem 0.65rem; text-align: left; }
.dimensie-blok thead th, .resultaat-blok thead th { background: var(--zacht); }
.alleen-lezer { position: absolute; left: -999px; }

@media (max-width: 40rem) {
  .sectoren { grid-template-columns: 1fr; }
  article.opleiding dl { grid-template-columns: 1fr; }
  article.opleiding dt { margin-top: 0.4rem; }
  .gebruikers button { width: 100%; }
}

/* The report: readable on screen and clean on paper. The afweging keeps its line breaks and spaces. */
article.verslag { margin-top: 1rem; padding: 1.25rem 1.4rem; border: 1px solid var(--rand-zacht); border-radius: var(--straal); background: var(--kaart); }
article.verslag h3:first-child { margin-top: 0; }
article.verslag h3 { padding-bottom: 0.25rem; border-bottom: 2px solid var(--accent-licht); }
table.invoer-overzicht { border-collapse: collapse; width: 100%; }
table.invoer-overzicht caption { text-align: left; font-weight: 600; padding: 0.25rem 0; }
table.invoer-overzicht th, table.invoer-overzicht td { border: 1px solid var(--rand-zacht); padding: 0.35rem 0.6rem; text-align: left; vertical-align: top; }
table.invoer-overzicht thead th { background: var(--zacht); }
.afweging { white-space: pre-wrap; border-left: 4px solid var(--accent); padding-left: 0.9rem; }
.handtekening { height: 4rem; max-width: 24rem; border-bottom: 1px solid var(--tekst); }
.ronde-twee { margin-top: 1.5rem; padding: 0.9rem 1.1rem; border: 1px solid var(--rand-zacht); border-radius: var(--straal); background: var(--zacht); }

@page liggend { size: A4 landscape; margin: 1.2cm; }
@media print {
  html, body { background: #ffffff; }
  body { color: #000000; font-size: 11pt; }
  .sla-over, .kop, #stappen, #melding, #status, #feedback, section > .knoppen, section > p, section > h2 { display: none !important; }
  main { max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; background: #ffffff; }
  article.verslag { border: 0; padding: 0; }
  article.verslag h3 { border-bottom: 1px solid #999999; }
  article.verslag li, table.invoer-overzicht tr { break-inside: avoid; }
  /* the comparison has a row per place: it runs over pages, with its headings repeated, and each row stays whole */
  .tabel-breed { overflow: visible; max-height: none; page: liggend; }
  table.vergelijking thead th, table.vergelijking thead th:first-child { position: static; }
  table.vergelijking { font-size: 8pt; width: 100%; table-layout: auto; }
  table.vergelijking thead { display: table-header-group; }
  table.vergelijking tr { break-inside: avoid; }
}

/* the comparison of the shortlist: a row per place, the themes as columns */
table.vergelijking { border-collapse: collapse; }
table.vergelijking th, table.vergelijking td { padding: 0.3rem 0.5rem; vertical-align: top; border-bottom: 1px solid var(--rand-zacht); }
table.vergelijking thead th { font-size: 0.85rem; }
.verslag .eenheden { font-size: 0.85rem; color: var(--zacht-tekst); }
/* the table scrolls in its own frame, so its heading row and first column stay in view */
.tabel-breed { overflow: auto; max-height: 75vh; border: 1px solid var(--rand-zacht); border-radius: var(--straal-klein); }
table.vergelijking thead th { position: sticky; top: 0; z-index: 2; background: var(--zacht); border-bottom: 2px solid var(--rand); }
table.vergelijking thead th:first-child { left: 0; z-index: 3; }
table.vergelijking .groepskop th { text-align: left; background: var(--accent-licht); color: var(--inkt); }
table.vergelijking tbody th { text-align: left; min-width: 13rem; position: sticky; left: 0; background: var(--kaart); }
table.vergelijking td { min-width: 5.5rem; }
@media print { table.vergelijking tbody th { position: static; min-width: 0; } table.vergelijking td { min-width: 0; } }

/* the page "Zo test je" */
.teststappen { padding-left: 1.4rem; }
.teststappen li { margin: 0.5rem 0; }
.testvragen { padding-left: 1.2rem; }
.testvragen li { margin: 0.35rem 0; }
.oefentekst { margin: 0.75rem 0; padding: 0.75rem 1.1rem; border-left: 4px solid var(--accent); border-radius: var(--straal-klein); background: var(--zacht); }

/* the remark at every step, for the psychologists who test: a quiet block under the content */
body { padding-bottom: 3rem; }
#feedback { width: calc(100% - 1.5rem); max-width: 64rem; margin: 0 auto; }
#feedback .feedback { border: 1px solid var(--rand-zacht); border-radius: var(--straal-klein); background: var(--zacht); padding: 0.4rem 0.9rem; }
#feedback textarea { width: 100%; box-sizing: border-box; }

/* the tick "Onthoud mij op deze computer": the box next to its label, the warning under it */
.veld.keuze > input[type="checkbox"] { width: auto; margin-right: 0.35rem; vertical-align: middle; }
.veld.keuze > label { display: inline; font-weight: 400; }
.veld.keuze > .hint { margin: 0.2rem 0 0 1.5rem; }
.inloggen input[type="password"], .inloggen input[type="email"] { width: 100%; max-width: 22rem; box-sizing: border-box; }