/*
 * Oranjetalent SoftSkills — gedeeld designsysteem (v1.2, 19 juli 2026).
 * ÉÉN bron van waarheid voor kleur, typografie, ruimte, hoeken, schaduw en
 * componentstijlen — gebruikt door zowel het kandidaat- als het beheerportaal
 * (templates/layout.php en templates/admin/layout.php), zodat schermen nooit
 * meer los van elkaar kunnen drijven. Wijzig kleuren/maten HIER, niet in een
 * losse <style>-blok per template.
 *
 * Kleurenbron: de tinten zijn overgenomen uit de live huisstijl op
 * oranjetalent.nl/soft-skills (het merkoranje en de vijf domeinkleuren van de
 * Big Five-cirkels). De tekstdragende varianten (--kleur-*-tekst) zijn bewust
 * verdonkerd t.o.v. het decoratieve merkoranje/de decoratieve domeinkleuren:
 * wit tekst op het felle merkoranje (#ff7b00) haalt met WCAG-berekening maar
 * ~2,6:1 contrast (ruim onder de vereiste 4,5:1 voor normale tekstgrootte);
 * de --tekst-varianten zijn zo gekozen dat ze WEL de 4,5:1-drempel halen
 * (marge ingebouwd), terwijl het felle oranje bewaard blijft voor decoratieve
 * doeleinden (randen, focusring, hover-gloed) waar geen tekst op staat.
 */

:root {
  /* ---- Merkkleur (decoratief; NIET voor tekstdragende vlakken) ---------- */
  --kleur-merk-fel: #ff7b00;
  --kleur-merk-fel-zacht: #ffe4c7;

  /* ---- Interactief (knoppen, links, actieve status) — AA-veilig -------- */
  --kleur-actie: #c1440c;
  --kleur-actie-hover: #a3390a;
  --kleur-actie-zacht: #fdf1e9;
  --kleur-actie-rand: #f0c9a8;

  /* ---- Semantisch: succes/waarschuwing/fout, telkens vlak + tekst ------- */
  --kleur-succes: #1a7f37;
  --kleur-succes-vlak: #e7f6ec;
  --kleur-succes-rand: #9bd4ac;
  --kleur-waarschuwing: #8a5a00;
  --kleur-waarschuwing-vlak: #fff8e6;
  --kleur-waarschuwing-rand: #f0c36d;
  --kleur-fout: #b3261e;
  --kleur-fout-vlak: #fdecea;
  --kleur-fout-rand: #f2b8b5;
  --kleur-info: #0969b3;
  --kleur-info-vlak: #eaf4fb;
  --kleur-info-rand: #b8dcf2;

  /* ---- De vijf Big Five-domeinen — zelfde palet als de publieke pagina -- */
  --domein-O: #6c4fc4;  /* Openheid voor ervaring */
  --domein-C: #186a8c;  /* Consciëntieusheid */
  --domein-E: #c1440c;  /* Extraversie (= --kleur-actie, hetzelfde merkoranje) */
  --domein-V: #0b6e54;  /* Vriendelijkheid */
  --domein-S: #8a6508;  /* Emotionele stabiliteit (N gespiegeld) */

  /* ---- Grijswaarden / oppervlaktes -------------------------------------- */
  --inkt: #17171a;
  --inkt-gedempt: #5c5c63;
  --inkt-zwak: #85858c;
  --oppervlak: #ffffff;
  --achtergrond: #f7f7f8;
  --lijn: #e2e2e6;
  --lijn-sterk: #c9c9d0;
  --koptekst-bg: #111113;

  /* ---- Typografie -------------------------------------------------------- */
  --lettertype: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --tekst-xs: 12px;
  --tekst-sm: 13px;
  --tekst-md: 15px;
  --tekst-lg: 17px;
  --tekst-xl: 22px;
  --tekst-xxl: 28px;

  /* ---- Ruimteschaal (8px-raster) ----------------------------------------- */
  --ruimte-1: 4px;
  --ruimte-2: 8px;
  --ruimte-3: 12px;
  --ruimte-4: 16px;
  --ruimte-5: 24px;
  --ruimte-6: 32px;
  --ruimte-7: 48px;

  /* ---- Hoeken en schaduw -------------------------------------------------- */
  --hoek-sm: 6px;
  --hoek-md: 10px;
  --hoek-lg: 14px;
  --hoek-pil: 999px;
  --schaduw-kaart: 0 1px 2px rgba(23, 23, 26, 0.05), 0 1px 1px rgba(23, 23, 26, 0.03);
  --schaduw-zwevend: 0 8px 24px rgba(23, 23, 26, 0.12), 0 2px 6px rgba(23, 23, 26, 0.08);
}

/* =========================================================================
   Basis
   ========================================================================= */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--tekst-md)/1.55 var(--lettertype);
  color: var(--inkt);
  background: var(--achtergrond);
}
h1, h2, h3 { font-family: var(--lettertype); font-weight: 700; color: var(--inkt); }
h1 { font-size: var(--tekst-xxl); line-height: 1.25; margin: 0 0 var(--ruimte-1); letter-spacing: -0.01em; }
h2 { font-size: var(--tekst-lg); margin: var(--ruimte-6) 0 var(--ruimte-3); padding-bottom: var(--ruimte-2); border-bottom: 1px solid var(--lijn); }
h1 + p.muted, h1 + .subtitel { margin-top: 0; margin-bottom: var(--ruimte-5); }
a { color: var(--kleur-actie); }
code {
  background: var(--achtergrond); border: 1px solid var(--lijn);
  padding: 1px 6px; border-radius: var(--hoek-sm); font-size: var(--tekst-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.muted { color: var(--inkt-gedempt); font-size: var(--tekst-sm); }

/* Zichtbare focusring op alles wat toetsenbord-bereikbaar is (toegankelijkheid). */
:focus-visible {
  outline: 3px solid var(--kleur-info);
  outline-offset: 2px;
  border-radius: var(--hoek-sm);
}

/* =========================================================================
   Layout — koptekst, hoofdinhoud, voettekst
   ========================================================================= */
header.app-kop {
  background: var(--koptekst-bg); color: #fff;
  padding: var(--ruimte-4) var(--ruimte-5);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--ruimte-3);
}
header.app-kop .merk { font-weight: 700; font-size: var(--tekst-lg); letter-spacing: -0.01em; }
header.app-kop .merk span { color: var(--kleur-merk-fel); }
header.app-kop nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ruimte-4); }
header.app-kop nav a {
  color: #cfcfd4; text-decoration: none; font-size: var(--tekst-sm); font-weight: 500;
  padding: var(--ruimte-1) 0; border-bottom: 2px solid transparent;
}
header.app-kop nav a:hover, header.app-kop nav a:focus-visible { color: #fff; border-bottom-color: var(--kleur-merk-fel); }

main.app-main { max-width: 960px; margin: 0 auto; padding: var(--ruimte-5); }
main.app-main.breed { max-width: 1180px; }

footer.app-voet {
  max-width: 960px; margin: var(--ruimte-6) auto var(--ruimte-4);
  padding: var(--ruimte-4) var(--ruimte-5) 0; color: var(--inkt-zwak); font-size: var(--tekst-xs);
  border-top: 1px solid var(--lijn);
}
footer.app-voet.breed { max-width: 1180px; }
footer.app-voet a { color: var(--inkt-gedempt); }

@media (max-width: 640px) {
  main.app-main, footer.app-voet { padding-left: var(--ruimte-3); padding-right: var(--ruimte-3); }
  header.app-kop { padding: var(--ruimte-3) var(--ruimte-3); }
}

/* ---- Gecentreerde authenticatiepagina's (beheerderslogin, S21-reserve) --- */
body.auth-scherm {
  min-height: 100vh; display: flex; flex-direction: column;
}
body.auth-scherm main.auth-main {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: var(--ruimte-5) var(--ruimte-3);
}
.auth-kaart {
  width: 100%; max-width: 400px; background: var(--oppervlak);
  border: 1px solid var(--lijn); border-radius: var(--hoek-lg);
  box-shadow: var(--schaduw-zwevend); padding: var(--ruimte-6) var(--ruimte-5);
}
.auth-kaart .merk-boven {
  text-align: center; font-weight: 700; font-size: var(--tekst-md);
  color: var(--inkt-gedempt); margin-bottom: var(--ruimte-4);
}
.auth-kaart .merk-boven span { color: var(--kleur-actie); }
.auth-kaart h1 { text-align: center; font-size: var(--tekst-xl); }
.auth-kaart p.muted { text-align: center; }
.auth-kaart form.stack { max-width: none; }
.auth-terug { text-align: center; margin-top: var(--ruimte-4); font-size: var(--tekst-sm); }
.auth-kaart details { margin-top: var(--ruimte-5); }
.auth-kaart details summary { cursor: pointer; }

/* =========================================================================
   Meldingen (flash/error/banner)
   ========================================================================= */
.flash, .error, .banner {
  padding: var(--ruimte-3) var(--ruimte-4); border-radius: var(--hoek-md);
  margin-bottom: var(--ruimte-4); border: 1px solid; font-size: var(--tekst-sm);
}
.flash { background: var(--kleur-succes-vlak); border-color: var(--kleur-succes-rand); color: #0f5c2b; }
.error { background: var(--kleur-fout-vlak); border-color: var(--kleur-fout-rand); color: #8a1c14; }
.banner { background: var(--kleur-waarschuwing-vlak); border-color: var(--kleur-waarschuwing-rand); color: #6b4600; }
.banner strong { color: var(--kleur-waarschuwing); }

/* =========================================================================
   Kaarten en raster
   ========================================================================= */
.card {
  background: var(--oppervlak); border: 1px solid var(--lijn);
  border-radius: var(--hoek-md); padding: var(--ruimte-4);
  box-shadow: var(--schaduw-kaart); margin-bottom: var(--ruimte-4);
}
.card .k { color: var(--inkt-gedempt); font-size: var(--tekst-sm); }
.card .v { font-size: var(--tekst-lg); font-weight: 600; margin-top: 2px; }
.card.kort { margin: var(--ruimte-4) 0; }
.card.kort p:first-child { margin-top: 0; }
.card.kort p:last-child { margin-bottom: 0; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ruimte-3); }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

/* Formulierbreedte-varianten (form.stack is standaard max 520px). */
form.stack.breed { max-width: none; }
form.stack.middel { max-width: 640px; }
/* Auth-kaart: knoppen altijd de volle breedte van de kaart. */
.auth-kaart .btn { width: 100%; }

/* =========================================================================
   Knoppen
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ruimte-2);
  background: var(--kleur-actie); color: #fff; border: 1px solid transparent;
  padding: 10px 18px; border-radius: var(--hoek-sm); font-size: var(--tekst-sm); font-weight: 600;
  cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.btn:hover { background: var(--kleur-actie-hover); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: var(--oppervlak); color: var(--inkt); border-color: var(--lijn-sterk); }
.btn.secondary:hover { background: var(--achtergrond); border-color: var(--inkt-zwak); }
.btn.danger { background: var(--kleur-fout); }
.btn.danger:hover { background: #942019; }
.btn.klein { padding: 6px 12px; font-size: var(--tekst-xs); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
form.inline { display: inline; }

/* =========================================================================
   Formulieren
   ========================================================================= */
form.stack { display: flex; flex-direction: column; gap: var(--ruimte-4); max-width: 520px; }
label { font-weight: 600; display: block; margin-bottom: var(--ruimte-1); font-size: var(--tekst-sm); }
input[type=email], input[type=password], input[type=text], input[type=number],
input[type=search], input[type=date], textarea, select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--lijn-sterk); border-radius: var(--hoek-sm);
  font-size: var(--tekst-md); font-family: var(--lettertype); background: var(--oppervlak); color: var(--inkt);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }
fieldset { border: 1px solid var(--lijn); border-radius: var(--hoek-md); padding: var(--ruimte-3) var(--ruimte-4); margin: 0; }
legend { font-weight: 600; padding: 0 var(--ruimte-2); }
.choice-row { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); margin-top: var(--ruimte-2); }
.choice-row label {
  font-weight: 400; display: flex; align-items: center; gap: var(--ruimte-2);
  background: var(--oppervlak); border: 1px solid var(--lijn); border-radius: var(--hoek-sm);
  padding: 6px 12px; cursor: pointer; margin-bottom: 0;
}
.choice-inline { font-weight: 400; display: flex; gap: var(--ruimte-2); align-items: flex-start; max-width: 640px; margin-bottom: 0; }
.choice-inline input[type=checkbox] { margin-top: 4px; flex: none; }

/* =========================================================================
   Badges / status-labels (pilvorm — zelfde vorm als de merkbadges)
   ========================================================================= */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px; border-radius: var(--hoek-pil); font-size: var(--tekst-xs); font-weight: 600;
  background: var(--achtergrond); color: var(--inkt-gedempt); border: 1px solid var(--lijn);
  white-space: nowrap;
}
.badge.ok { background: var(--kleur-succes-vlak); color: var(--kleur-succes); border-color: var(--kleur-succes-rand); }
.badge.warn { background: var(--kleur-waarschuwing-vlak); color: var(--kleur-waarschuwing); border-color: var(--kleur-waarschuwing-rand); }
.badge.info { background: var(--kleur-info-vlak); color: var(--kleur-info); border-color: var(--kleur-info-rand); }
.badge.fout { background: var(--kleur-fout-vlak); color: var(--kleur-fout); border-color: var(--kleur-fout-rand); }
.badge .voortgang-mini {
  display: inline-block; width: 44px; height: 4px; border-radius: var(--hoek-pil);
  background: rgba(0,0,0,.12); overflow: hidden; position: relative; top: 1px;
}
.badge .voortgang-mini > span { display: block; height: 100%; background: currentColor; border-radius: var(--hoek-pil); }

/* =========================================================================
   Tabellen
   ========================================================================= */
table {
  width: 100%; border-collapse: collapse; background: var(--oppervlak);
  border: 1px solid var(--lijn); border-radius: var(--hoek-md); overflow: hidden;
  margin-bottom: var(--ruimte-5);
}
th, td { text-align: left; padding: var(--ruimte-3) var(--ruimte-4); border-bottom: 1px solid var(--lijn); font-size: var(--tekst-sm); vertical-align: top; }
th { background: var(--achtergrond); font-weight: 600; color: var(--inkt-gedempt); font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: .03em; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--achtergrond); }
th a { color: inherit; text-decoration: none; }
th a:hover { color: var(--inkt); text-decoration: underline; }
.tabel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--ruimte-5); }
.tabel-scroll table { margin-bottom: 0; }
@media (max-width: 640px) {
  table { font-size: var(--tekst-xs); }
  th, td { padding: var(--ruimte-2) var(--ruimte-3); }
}

/* =========================================================================
   Filterbalk (kandidatenoverzicht)
   ========================================================================= */
.filterbalk {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--ruimte-3);
  background: var(--oppervlak); border: 1px solid var(--lijn); border-radius: var(--hoek-md);
  padding: var(--ruimte-3) var(--ruimte-4); margin-bottom: var(--ruimte-4);
  box-shadow: var(--schaduw-kaart);
}
.filterbalk .veld { display: flex; flex-direction: column; gap: 4px; }
.filterbalk label { margin-bottom: 0; font-size: var(--tekst-xs); color: var(--inkt-gedempt); font-weight: 600; }
.filterbalk .zoekveld { flex: 1 1 220px; min-width: 160px; }
.filterbalk select, .filterbalk input { padding: 7px 10px; font-size: var(--tekst-sm); min-width: 140px; }
.filterbalk .zoekveld input { min-width: 100%; }
.filterbalk details { position: relative; }
.filterbalk details summary {
  cursor: pointer; font-size: var(--tekst-sm); font-weight: 600; color: var(--kleur-actie);
  padding: 7px 2px; list-style: none; user-select: none;
}
.filterbalk details summary::-webkit-details-marker { display: none; }
.filterbalk details[open] summary { color: var(--inkt); }
.filterbalk .meer-filters-paneel {
  display: flex; flex-wrap: wrap; gap: var(--ruimte-3); align-items: end;
  padding-top: var(--ruimte-3); margin-top: var(--ruimte-1);
  width: 100%; border-top: 1px dashed var(--lijn);
}
.filterbalk .filter-acties { display: flex; align-items: center; gap: var(--ruimte-3); margin-left: auto; }
.filterbalk .filter-wis { font-size: var(--tekst-sm); color: var(--inkt-gedempt); }
@media (max-width: 640px) {
  .filterbalk { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .filterbalk .veld, .filterbalk select, .filterbalk input { width: 100%; min-width: 0; }
  /* In een kolom-flexcontainer is flex-grow verticale groei — de zoekveld-kolom
     (flex:1 1 220px in de standaard rijindeling) moet dat hier niet meer doen. */
  .filterbalk .zoekveld { flex: none; }
  .filterbalk .filter-acties { margin-left: 0; }
}

/* =========================================================================
   Kandidatenoverzicht — regelopbouw (naam prominent, e-mail eronder)
   ========================================================================= */
.kandidaat-cel .naam { font-weight: 600; color: var(--inkt); display: block; }
.kandidaat-cel .email { color: var(--inkt-zwak); font-size: var(--tekst-xs); display: block; margin-top: 1px; }
tr.historie-rij td { padding-top: var(--ruimte-2); padding-bottom: var(--ruimte-2); color: var(--inkt-gedempt); }
tr.historie-rij .inspring { padding-left: var(--ruimte-5); color: var(--lijn-sterk); }

/* =========================================================================
   Vragenlijst / likert
   ========================================================================= */
.progress { color: var(--inkt-gedempt); font-size: var(--tekst-sm); margin-bottom: var(--ruimte-2); }
.item { border-bottom: 1px solid var(--lijn); padding: var(--ruimte-4) 0; }
.item:last-child { border-bottom: none; }
.item.missing { background: var(--kleur-fout-vlak); border-radius: var(--hoek-md); padding: var(--ruimte-4) var(--ruimte-3); }
.likert { display: flex; justify-content: space-between; gap: var(--ruimte-2); margin-top: var(--ruimte-3); flex-wrap: wrap; }
.likert label {
  font-weight: 400; font-size: var(--tekst-xs); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 0;
}
.logout-form { display: inline; }

@media (max-width: 480px) {
  .likert { justify-content: center; }
  .likert label { flex: 0 0 30%; }
}

/* =========================================================================
   Kandidaatprofiel — spectrumweergave per Big Five-domein
   ========================================================================= */
.dimension {
  background: var(--oppervlak); border: 1px solid var(--lijn); border-radius: var(--hoek-lg);
  padding: var(--ruimte-5); margin-bottom: var(--ruimte-4); box-shadow: var(--schaduw-kaart);
}
.dimension h2 { display: flex; align-items: center; gap: var(--ruimte-3); border-bottom: none; margin: 0 0 var(--ruimte-2); padding-bottom: 0; }
.dim-letter {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--domein-kleur, var(--kleur-actie)); color: #fff;
  font-weight: 700; font-size: var(--tekst-md); flex: none;
}
/* Per-domein kleur (v1.2): dezelfde vijf tinten als de Big Five-cirkels op
   oranjetalent.nl/soft-skills, hier op de letter gezet via een klasse. */
.dim-letter.dl-O { --domein-kleur: var(--domein-O); }
.dim-letter.dl-C { --domein-kleur: var(--domein-C); }
.dim-letter.dl-E { --domein-kleur: var(--domein-E); }
.dim-letter.dl-V { --domein-kleur: var(--domein-V); }
.dim-letter.dl-S { --domein-kleur: var(--domein-S); }
.track {
  position: relative; height: 10px; border-radius: var(--hoek-pil); margin: var(--ruimte-4) 0 var(--ruimte-2);
  background: linear-gradient(90deg, #f3d9c2, #f9ede1 50%, #f3d9c2); border: 1px solid var(--lijn);
}
.track.klein { height: 8px; margin: var(--ruimte-2) 0 4px; }
.marker {
  position: absolute; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px;
  border-radius: 50%; background: var(--kleur-actie); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--kleur-actie);
}
.track.klein .marker { width: 12px; height: 12px; }
.poles { display: flex; justify-content: space-between; gap: var(--ruimte-3); font-size: var(--tekst-sm); color: var(--inkt-gedempt); }
.scorelijn { margin-top: 4px; }
details.facets { margin-top: var(--ruimte-3); }
details.facets summary { cursor: pointer; font-weight: 600; padding: var(--ruimte-2) 0; }
.facet { padding: var(--ruimte-3) 0 4px; border-top: 1px solid var(--lijn); }
.facet-kop { display: flex; justify-content: space-between; gap: var(--ruimte-3); flex-wrap: wrap; }
.facet-naam { font-weight: 600; }
.facet-noot { margin: 2px 0 var(--ruimte-2); }

/* =========================================================================
   Recruitersrapport (briefing-recruitersrapport-v2.md) — radardiagram,
   bipolaire schaalkaarten (alle 35, altijd), waarschuwingsblok en printstijl.
   Kleurgebruik is NEUTRAAL: geen groen/rood/stoplicht voor hoog/laag (§1.3)
   — "opvallend" wordt uitsluitend met een label en een dikkere rand getoond.
   ========================================================================= */
.recruitersrapport h2 { display: flex; align-items: center; gap: var(--ruimte-3); }

.rapport-disclaimer, .rapport-waarschuwing {
  background: var(--kleur-info-vlak); border-color: var(--kleur-info-rand); color: var(--inkt);
}
.rapport-disclaimer strong, .rapport-waarschuwing strong { color: var(--kleur-info); }

/* Compact, uitklapbaar uitlegkader domein vs. facet (verbeterronde punt C) —
   dicht bij het openen van de pagina, zoals de rest van het rapport. */
.uitlegkader {
  background: var(--oppervlak); border: 1px solid var(--lijn); border-radius: var(--hoek-md);
  padding: var(--ruimte-3) var(--ruimte-4); margin: var(--ruimte-4) 0; font-size: var(--tekst-sm);
}
.uitlegkader summary { font-size: var(--tekst-md); }
.uitlegkader-inhoud { margin-top: var(--ruimte-3); }
.uitlegkader-inhoud p { margin: 0 0 var(--ruimte-3); }
.uitlegkader-inhoud p:last-child { margin-bottom: 0; }

.radar-wrap { display: flex; justify-content: center; margin: var(--ruimte-5) 0 var(--ruimte-2); }
.radar-legenda { text-align: center; margin-top: 0; }
.radar-as { stroke: var(--lijn-sterk); stroke-width: 1; }
.radar-schil { fill: var(--lijn-sterk); opacity: .4; stroke: none; }
.radar-kandidaat { fill: rgba(193, 68, 12, .16); stroke: var(--kleur-actie); stroke-width: 2; }
.radar-punt { stroke: #fff; stroke-width: 1.5; fill: var(--kleur-actie); }
.radar-punt.dl-O { fill: var(--domein-O); }
.radar-punt.dl-C { fill: var(--domein-C); }
.radar-punt.dl-E { fill: var(--domein-E); }
.radar-punt.dl-V { fill: var(--domein-V); }
.radar-punt.dl-S { fill: var(--domein-S); }
.radar-label { font-size: 13px; font-weight: 700; fill: var(--inkt-gedempt); }
.radar-label.dl-O { fill: var(--domein-O); }
.radar-label.dl-C { fill: var(--domein-C); }
.radar-label.dl-E { fill: var(--domein-E); }
.radar-label.dl-V { fill: var(--domein-V); }
.radar-label.dl-S { fill: var(--domein-S); }

/* Compact overzicht van alle opvallende schalen, direct onder het radar-
   diagram: hoog en laag staan door elkaar in één lijst (geen goed/fout-
   scheiding), elke regel met de eigen poolnaam, geen waarderende kleur —
   uitsluitend klikbare links naar de bijbehorende kaart verderop. */
.opvallend-overzicht {
  background: var(--oppervlak); border: 1px solid var(--lijn); border-radius: var(--hoek-lg);
  padding: var(--ruimte-4); margin: var(--ruimte-4) 0; box-shadow: var(--schaduw-kaart);
}
.opvallend-overzicht h3 { margin: 0 0 var(--ruimte-3); font-size: var(--tekst-md); }
.opvallend-overzicht a { color: var(--inkt); text-decoration: none; }
.opvallend-overzicht a:hover, .opvallend-overzicht a:focus-visible { text-decoration: underline; color: var(--kleur-actie); }

/* Gegroepeerd per domein (verbeterronde punt F): de domeinkop weegt duidelijk
   zwaarder (grotere letter, vetter, eigen regel) dan de facetten eronder —
   dezelfde hiërarchie als de kaarten zelf, niet een platte lijst waarin
   domein en facet gelijk ogen. */
.opvallend-domeingroep { margin-bottom: var(--ruimte-3); }
.opvallend-domeingroep:last-child { margin-bottom: 0; }
.opvallend-domeinkop {
  display: flex; align-items: center; gap: var(--ruimte-2); margin: 0 0 6px;
  font-size: var(--tekst-md);
}
.opvallend-domeinkop .dim-letter { width: 26px; height: 26px; font-size: var(--tekst-sm); }
.opvallend-domeingroep ul {
  margin: 0; padding-left: 0; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--ruimte-5);
}
.opvallend-domeingroep li { padding-left: 34px; font-size: var(--tekst-sm); }
@media (max-width: 640px) { .opvallend-domeingroep ul { grid-template-columns: 1fr; } }

/* Meescrollende domeinbalk (verbeterronde punt F): springt direct naar een
   domeinkaart, met het aantal opvallende schalen binnen dat domein. Blijft
   bovenin zichtbaar terwijl je door de 35 kaarten scrolt; niet in de print. */
.domein-navbalk {
  position: sticky; top: 0; z-index: 5; display: flex; gap: var(--ruimte-2);
  background: var(--oppervlak); border: 1px solid var(--lijn); border-radius: var(--hoek-pil);
  padding: 6px var(--ruimte-3); margin: var(--ruimte-4) 0; box-shadow: var(--schaduw-zwevend);
  width: max-content;
}
.domein-navlink {
  display: flex; align-items: center; gap: 4px; text-decoration: none;
  padding: 2px 6px 2px 2px; border-radius: var(--hoek-pil);
}
.domein-navlink:hover, .domein-navlink:focus-visible { background: var(--achtergrond); }
.domein-navlink .dim-letter { width: 24px; height: 24px; font-size: var(--tekst-xs); }
.domein-navtelling { font-size: var(--tekst-xs); font-weight: 700; color: var(--inkt-gedempt); }
.radar-label.dl-S { fill: var(--domein-S); }

/* Eén kaart per schaal (domein of facet) — een <details>, dicht tenzij
   "opvallend". Facetkaarten krijgen een lichte inspringing zodat de
   domein→facet-hiërarchie zichtbaar blijft zonder aparte kleur. */
.schaal-kaart {
  background: var(--oppervlak); border: 1px solid var(--lijn); border-radius: var(--hoek-lg);
  padding: var(--ruimte-4); margin-bottom: var(--ruimte-3); box-shadow: var(--schaduw-kaart);
}
.schaal-kaart.facet { margin-left: var(--ruimte-4); }
.schaal-kaart.opvallend { border-width: 2px; border-color: var(--lijn-sterk); }
.schaal-kaart summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: var(--ruimte-3); flex-wrap: wrap;
}
.schaal-kaart summary::-webkit-details-marker { display: none; }
.schaal-kaart .schaal-titel { flex: 1 1 auto; }
.schaal-kaart .schaal-inhoud { margin-top: var(--ruimte-3); }
.spreiding-melding { margin: 0 0 var(--ruimte-3) var(--ruimte-4); font-size: var(--tekst-sm); }

/* Badge voor "opvallend t.o.v. de referentiegroep": een NEUTRAAL label, geen
   kleurwaardering — anders dan .badge.ok/.warn/.fout wordt hier bewust geen
   succes/waarschuwing/foutkleur gebruikt (briefing §1.3). */
.badge.opvallend { background: var(--achtergrond); color: var(--inkt); border: 1px solid var(--inkt-zwak); font-weight: 700; }

.percentielbalk {
  position: relative; height: 14px; border-radius: var(--hoek-pil);
  background: var(--achtergrond); border: 1px solid var(--lijn); margin: var(--ruimte-3) 0 var(--ruimte-1);
}
.percentielbalk .middengebied {
  /* left/width worden per schaal inline gezet vanuit de daadwerkelijk
     geconfigureerde drempel (report.marking.*); deze 10%/80% is alleen de
     statische fallback als die inline stijl om wat voor reden ontbreekt.
     --inkt-zwak i.p.v. --lijn-sterk (verbeterronde punt F): de vorige band
     was nauwelijks te onderscheiden van de balk zelf (~1,3:1 contrast). */
  position: absolute; top: 0; bottom: 0; left: 10%; width: 80%;
  background: var(--inkt-zwak); opacity: .3; border-radius: var(--hoek-pil);
}
/* Eén neutrale markerkleur, ongeacht hoog of laag (briefing §1.3) — zelfde
   accentkleur als de kandidaatprofiel-marker, geen groen/rood-onderscheid. */
.percentielbalk .marker { top: 50%; width: 14px; height: 14px; background: var(--kleur-actie); box-shadow: 0 0 0 1px var(--kleur-actie); }

/* Facetten (4 items, 17 mogelijke somscores) zijn minder precies dan
   domeinen (24 items) — dunnere balk en kleinere/grijzere marker als visuele
   ondergeschiktheid t.o.v. het domeinpercentiel (verbeterronde punt B).
   Domeinen behouden de normale .percentielbalk-maat. */
.percentielbalk.klein { height: 8px; }
.percentielbalk.klein .marker { width: 10px; height: 10px; }
.facet-percentiel { font-size: var(--tekst-xs); color: var(--inkt-zwak); }

/* Twee kolommen, links de lage pool en rechts de hoge pool — BEIDE altijd
   met Krachten én Valkuilen (briefing §1.2/§1.7: nooit maar één kant, nooit
   goed/fout-labels). De kolom waar de kandidaat het dichtst bij zit krijgt
   een subtiele achtergrondnadruk, geen kleurwaardering. */
.poolkolommen {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--ruimte-4);
  margin: var(--ruimte-4) 0; font-size: var(--tekst-sm);
}
@media (max-width: 640px) { .poolkolommen { grid-template-columns: 1fr; } }
.poolkolom { padding: var(--ruimte-3); border-radius: var(--hoek-md); }
.poolkolom.nadruk { background: var(--achtergrond); }
.poolkolom .poolnaam { font-weight: 700; margin: 0 0 var(--ruimte-2); }
.poolkolom .poollabel { font-weight: 600; color: var(--inkt-gedempt); margin: var(--ruimte-2) 0 4px; font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: .03em; }
.poolkolom ul { margin: 0; padding-left: 1.2em; }

.gespreksvragen, .uitleg { margin-top: var(--ruimte-3); font-size: var(--tekst-sm); }

/* Gedeeld uitklap-chevron (verbeterronde punt E): zonder deze markering
   oogden "Gespreksvragen" en "Wat meet dit?" als vetgedrukte, dode koppen —
   niet duidelijk dat erop geklikt kan worden. Draait 90° open. */
.gespreksvragen summary, .uitleg summary, .uitlegkader summary {
  cursor: pointer; font-weight: 600; padding: var(--ruimte-1) 0;
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.gespreksvragen summary::-webkit-details-marker, .uitleg summary::-webkit-details-marker,
.uitlegkader summary::-webkit-details-marker { display: none; }
.gespreksvragen summary::before, .uitleg summary::before, .uitlegkader summary::before {
  content: ''; display: inline-block; width: 0; height: 0; flex: none;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 6px solid var(--inkt-gedempt); transition: transform 120ms ease;
}
.gespreksvragen[open] summary::before, .uitleg[open] summary::before,
.uitlegkader[open] summary::before { transform: rotate(90deg); }
.gespreksvragen ul { margin: var(--ruimte-1) 0 0; padding-left: 1.2em; }

/* Knoppenrij "Printweergave" / "Download als PDF" (verbeterronde punt H) —
   zelfde printweergave, geen aparte PDF-generator. */
.print-knoppen { display: flex; align-items: center; gap: var(--ruimte-3); flex-wrap: wrap; margin-bottom: var(--ruimte-4); }

/* Print-only content: alleen zichtbaar via @media print hieronder. */
.alleen-printen { display: none; }

/* ---- Printweergave (bouwspec hfst. 0/4): nette afdrukstijl, uitklap open -- */
@media print {
  .niet-printen, header.app-kop, footer.app-voet, .btn, form { display: none !important; }
  main.app-main { max-width: none; padding: 0; }
  .schaal-kaart, .card, .dimension, .opvallend-overzicht, .opvallend-domeingroep, .uitlegkader {
    box-shadow: none; border: 1px solid #999; break-inside: avoid;
  }
  details > summary { display: none; }

  /* Kandidaatnaam/datum/normset-versie op elke pagina (punt H): position:fixed
     herhaalt in de meeste browsers op elke afgedrukte pagina, i.t.t. een
     browser-eigen kop-/voettekst die de gebruiker kan uitzetten. */
  .alleen-printen.print-kopregel {
    display: block; position: fixed; top: 0; left: 0; right: 0;
    font-size: 10px; color: #555; border-bottom: 1px solid #ccc;
    padding-bottom: 4px; margin: 0; background: #fff;
  }
  body { background: #fff; padding-top: 22px; }
}