/* RiskCompass — stijlsysteem
 *
 * De tokens komen één op één uit het awareness-platform, zodat beide
 * applicaties als één familie ogen: dezelfde blauwe primaire kleur, dezelfde
 * slate-neutralen, dezelfde straal van 0.5rem, dezelfde spaarzame schaduwen
 * waarbij randen het werk doen.
 *
 * Twee afwijkingen, beide bewust:
 *   1. Geen Tailwind. Er is geen buildstap in dit project, dus de tokens worden
 *      geconsumeerd door semantische klassen in plaats van utility-klassen.
 *   2. Wel eigen tokens voor succes, waarschuwing en informatie. Het awareness-
 *      platform gebruikt daar losse paletklassen, waardoor statuskleuren niet
 *      meebewegen met een thema. Hier zijn het tokens.
 *
 * Kleuren staan als HSL-tripels zonder hsl()-omhulsel, zodat een tenant ze aan
 * kan passen met alleen een ander tripel, precies zoals het awareness-platform
 * dat runtime doet.
 */

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  /* 44% en niet 46,9%: op de tabelkopachtergrond haalde dat 4,34:1,
     net onder de 4,5:1 die WCAG 2.2 AA voor normale tekst vraagt. */
  --muted-foreground: 215.4 16.3% 44%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --success: 142 71% 35%;
  --success-foreground: 0 0% 100%;
  --warning: 25 95% 45%;
  --warning-foreground: 0 0% 100%;
  --info: 221 83% 53%;
  --info-tekst: 221 83% 48%;
  --info-foreground: 0 0% 100%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  --brand-secondary: 262 83% 58%;
  --radius: 0.5rem;

  /* Risiconiveaus. Deze vier horen bij de visuele taal van het product en
     staan daarom hier, niet in de instelbare referentiedata. */
  --niveau-laag: 142 71% 40%;
  --niveau-gemiddeld: 25 95% 48%;
  --niveau-hoog: 0 74% 50%;
  --niveau-kritiek: 262 72% 52%;
  /* Dezelfde kleuren, donkerder, voor tekst op een etiket met 15% vulling.
     De vulkleur zelf haalde daar 2,5:1 — onleesbaar volgens WCAG 2.2 AA.
     Deze lichtheden zijn uitgerekend op precies 4,5:1 of hoger. */
  /* Deze waarden zijn uitgerekend tegen de etiketvulling zoals die op een
     kaart valt, niet op zuiver wit — dat scheelde net genoeg om 4,43:1 op te
     leveren in plaats van 4,5. Marge ingebouwd. */
  --niveau-laag-tekst: 142 71% 25%;
  --niveau-gemiddeld-tekst: 25 95% 32%;
  --niveau-hoog-tekst: 0 74% 42%;
  --niveau-kritiek-tekst: 262 72% 52%;

  color-scheme: light;
}

:root[data-thema="donker"],
:root:not([data-thema="licht"]) .thema-volgt-systeem {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 72% 51%;
    --success: 142 69% 45%;
    --warning: 32 95% 55%;
    --info: 217 91% 60%;
  --info-tekst: 217 91% 60%;
    --info-tekst: 217 91% 60%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
    --brand-secondary: 262 83% 70%;
    --niveau-laag: 142 69% 45%;
    --niveau-gemiddeld: 32 95% 55%;
    --niveau-hoog: 0 72% 57%;
    --niveau-kritiek: 262 83% 68%;
    /* Donker thema: de etiketvulling is donker, dus de tekst moet juist
       lichter. Alleen 'hoog' haalde 4,5:1 niet en gaat van 57% naar 59%. */
    --niveau-laag-tekst: 142 69% 45%;
    --niveau-gemiddeld-tekst: 32 95% 55%;
    --niveau-hoog-tekst: 0 72% 59%;
    --niveau-kritiek-tekst: 262 83% 68%;
    color-scheme: dark;
  }
}

:root[data-thema="donker"] {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 72% 51%;
  --success: 142 69% 45%;
  --warning: 32 95% 55%;
  --info: 217 91% 60%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 224.3 76.3% 48%;
  --brand-secondary: 262 83% 70%;
  --niveau-laag: 142 69% 45%;
  --niveau-gemiddeld: 32 95% 55%;
  --niveau-hoog: 0 72% 57%;
  --niveau-kritiek: 262 83% 68%;
  /* Donker thema: de etiketvulling is donker, dus de tekst moet juist
     lichter. Alleen 'hoog' haalde 4,5:1 niet en gaat van 57% naar 59%. */
  --niveau-laag-tekst: 142 69% 45%;
  --niveau-gemiddeld-tekst: 32 95% 55%;
  --niveau-hoog-tekst: 0 72% 59%;
  --niveau-kritiek-tekst: 262 83% 68%;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: hsl(var(--primary)); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: calc(var(--radius) - 4px);
}

/* ---------------------------------------------------------------- Typografie */

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.125rem; }
h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
}
p { margin: 0 0 0.75rem; }
.gedempt { color: hsl(var(--muted-foreground)); }
.klein { font-size: 0.8125rem; }
.mini { font-size: 0.6875rem; }
.nummer { font-variant-numeric: tabular-nums; }
/* Referenties en datums horen op één regel te blijven; een afgebroken
   RA-2026-0001 is onleesbaar en kost drie regels in een tabelkolom. */
a.nummer, td.nummer, .etiket { white-space: nowrap; }

/* -------------------------------------------------------------------- Layout */

.schil { display: flex; min-height: 100vh; }

/* De rail blijft staan en is precies zo hoog als het scherm. Zonder dit rekte
   hij mee met de pagina, en stond het merk onderaan een auditlog van zevenduizend
   pixels — in de praktijk nooit in beeld. De menulijst schuift binnen zijn eigen
   vak, dus het merk eronder drukt nooit een menu-item weg en dekt er nooit een af. */
.rail {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  width: 14rem;
  flex-shrink: 0;
  border-right: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}
.rail-kop {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 3.5rem;
  padding: 0 0.875rem;
  border-bottom: 1px solid hsl(var(--border));
}
.rail-kop svg { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }
.rail nav { flex: 1; overflow-y: auto; padding: 0.75rem 0.5rem; }
.rail-groep {
  padding: 0.75rem 0.75rem 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Zonder alfa: met 0,8 bleef er 3,24:1 over. */
  color: hsl(var(--muted-foreground));
}
.rail a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--radius) - 2px);
  color: hsl(var(--muted-foreground));
  font-weight: 500;
  text-decoration: none;
}
.rail a:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.rail a.actief { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.rail a svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* Het merkje bij Signalen. Het droeg de etiketstijl van een kritiek signaal:
   donkerrode tekst op een lichtrood vlak. Dat leest goed op de witte menubalk
   en slecht op het blauwe vlak van het actieve item — en juist dáár keek
   iedereen ernaar, want daar staat het merkje dat je net hebt aangeklikt.
   Nu een eigen vorm die op beide ondergronden vol contrast heeft: vol rood in
   rust, en omgekeerd zodra het item actief is. */
.menu-telling {
  margin-left: auto;
  min-width: 1.3rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.3rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.rail a.actief .menu-telling {
  background: hsl(var(--primary-foreground));
  color: hsl(var(--primary));
}
.rail-voet {
  display: block;
  padding: 0.75rem;
  border-top: 1px solid hsl(var(--border));
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
}
.rail-voet:hover { color: hsl(var(--foreground)); text-decoration: none; }

.werkvlak { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* De bovenbalk blijft staan, net als de rail ernaast. Hij draagt waar je bent,
   de taalkeuze en uitloggen; die schoven bij een lange lijst weg en waren dan
   alleen terug te halen door helemaal naar boven te scrollen.

   De z-index houdt hem boven de vastgezette eerste tabelkolom op smalle
   schermen (die staat op 1) en onder de overslaan-link (die staat op 100). */
.balk {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 3.5rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}
.balk-rechts { display: flex; align-items: center; gap: 0.5rem; }

main { flex: 1; padding: 1.5rem; }
.pagina { max-width: 1200px; margin: 0 auto; }
.pagina > * + * { margin-top: 1.5rem; }
.paginakop { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* --------------------------------------------------------------- Bouwstenen */

.kaart {
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  background: hsl(var(--card));
  padding: 1.25rem;
}
.kaart > h2 + * { margin-top: 1rem; }
.kaart-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
/* Op een telefoon stond de uitleg náást de kop, in een kolom van 190px die
   zeven regels hoog werd. Onder de kop is het gewoon een zin. */
@media (max-width: 560px) {
  .kaart-kop { gap: 0.35rem; }
  .kaart-kop > :not(:first-child) { flex: 1 1 100%; }
}

.raster { display: grid; gap: 1rem; }
/* Elke kaart zo hoog als zijn eigen inhoud. De matrixkaart werd uitgerekt tot
   de hoogte van de lijst ernaast, met een half scherm wit eronder, en de
   statuskaart met één woord erin was even hoog als de kaart ernaast (O10). */
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.raster-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.kental { display: flex; flex-direction: column; gap: 0.125rem; }
/* Een kental dat naar zijn rijen leidt is een link en ziet er ook zo uit: hij
   licht op onder de muis en houdt de kleur van gewone tekst, want de cijfers
   erin dragen hun eigen betekenis (F6, O18). */
a.kental { text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; }
a.kental:hover { border-color: hsl(var(--primary)); box-shadow: 0 1px 0 hsl(var(--primary) / 0.12) inset; }
a.kental:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.kental-waarde { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kental-label { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }

/* Knoppen */
.knop {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.knop:hover { background: hsl(var(--primary) / 0.9); text-decoration: none; }
.knop:disabled { opacity: 0.5; cursor: not-allowed; }
.knop svg { width: 1rem; height: 1rem; }
.knop-rand {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  border-color: hsl(var(--input));
}
.knop-rand:hover { background: hsl(var(--accent)); }
.knop-stil {
  background: transparent;
  color: hsl(var(--muted-foreground));
  padding: 0.375rem 0.75rem;
}
.knop-stil:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.knop-gevaar { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.knop-gevaar:hover { background: hsl(var(--destructive) / 0.9); }
.knop-klein { padding: 0.3rem 0.625rem; font-size: 0.8125rem; }

/* Formulieren */
.veld { display: block; margin-bottom: 1rem; }
.veld > label, label.veldlabel {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 500;
  color: hsl(var(--foreground));
}
.veld-hint { display: block; margin-top: 0.3rem; font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }

/* Verplicht of niet was aan niets te zien: twee velden naast elkaar, alleen de
   bovenste moest worden ingevuld (O12). Eén regel in plaats van een markering
   in tweeëntwintig sjablonen, en daarmee ook geldig voor elk veld dat er nog
   bij komt. Een sterretje zou de lezer weer laten raden, dus het woord staat
   er voluit. Het staat hier en niet in de vertaalbestanden omdat het Content-
   Security-Policy geen stijl in een attribuut toelaat en de stylesheet niet
   door Jinja gaat; `test_het_woord_verplicht_staat_in_beide_talen_gelijk`
   bewaakt dat de twee bij de vertaling blijven passen. */
.veld:has(:required) > label::after,
label.veldlabel:has(+ :required)::after {
  font-weight: 400;
  color: hsl(var(--muted-foreground));
}
html[lang="nl"] .veld:has(:required) > label::after,
html[lang="nl"] label.veldlabel:has(+ :required)::after { content: " (verplicht)"; }
html[lang="en"] .veld:has(:required) > label::after,
html[lang="en"] label.veldlabel:has(+ :required)::after { content: " (required)"; }
/* Alles wat een tekstveld is, ook zonder expliciet type-attribuut. Selecteren
   op [type="text"] mist juist de velden die het standaardtype gebruiken.

   De uitsluitingen staan in :where(), dat geen specificiteit toevoegt. Zonder
   die omhulling zou deze regel zwaarder wegen dan elke klasse, en kon een
   veld dat er als kop uit hoort te zien zijn rand niet kwijtraken. */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="hidden"])),
select, textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font: inherit;
}
textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"])):focus,
select:focus, textarea:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.25);
}
.veldrij { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Tabellen */
/* Een tabel die zijwaarts schuift moet dat laten zien. Zonder aanwijzing valt
   op een telefoon stelselmatig de rechterkant weg — en dat is juist de kolom
   met de acties. Twee schaduwen die alleen verschijnen als er iets buiten beeld
   staat: de `local`-lagen dekken ze af zodra je aan die kant bent. Geen JS. */
.tabeltelling { margin: 0 0 0.5rem; }
.tabelhouder {
  overflow-x: auto;
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  background:
    linear-gradient(to right, hsl(var(--card)) 30%, hsl(var(--card) / 0)) left / 2rem 100% no-repeat local,
    linear-gradient(to left, hsl(var(--card)) 30%, hsl(var(--card) / 0)) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, hsl(var(--foreground) / 0.16), hsl(var(--foreground) / 0)) left / 0.7rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, hsl(var(--foreground) / 0.16), hsl(var(--foreground) / 0)) right / 0.7rem 100% no-repeat scroll;
}
table { width: 100%; border-collapse: collapse; }
thead th {
  padding: 0.625rem 0.875rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
  border-bottom: 1px solid hsl(var(--border));
  white-space: nowrap;
}
tbody td { padding: 0.625rem 0.875rem; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: hsl(var(--muted) / 0.5); }

/* Etiketten */
.etiket {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.etiket-laag      { background: hsl(var(--niveau-laag) / 0.15);      color: hsl(var(--niveau-laag-tekst)); }
.etiket-gemiddeld { background: hsl(var(--niveau-gemiddeld) / 0.15); color: hsl(var(--niveau-gemiddeld-tekst)); }
.etiket-hoog      { background: hsl(var(--niveau-hoog) / 0.15);      color: hsl(var(--niveau-hoog-tekst)); }
.etiket-kritiek   { background: hsl(var(--niveau-kritiek) / 0.15);   color: hsl(var(--niveau-kritiek-tekst)); }
.etiket-neutraal  { background: hsl(var(--muted));                   color: hsl(var(--muted-foreground)); }
/* Eigen tekstvariant, net als bij de risiconiveaus: de vulkleur zelf haalde
   4,37:1 op zijn eigen 12%-vlak. L=48% haalt 5,21:1. */
.etiket-info      { background: hsl(var(--info) / 0.12);             color: hsl(var(--info-tekst)); }
/* De vlakkleur --warning haalt op haar eigen tint 3,4:1. Dat viel niet op zolang
   er nergens een waarschuwingsetiket in beeld kwam; zodra dat wel zo was, zakte
   hij door de 4,5:1 van WCAG 2.2 AA. Dezelfde reparatie als bij .alarm en
   .melding-let-op: de tekstvariant van dezelfde kleur (B11). */
.etiket-waarschuwing { background: hsl(var(--warning) / 0.15);       color: hsl(var(--niveau-gemiddeld-tekst)); }
/* Idem: --destructive haalde 3,09:1 op zijn eigen vlak. Dit etiket staat op de
   signalenlijst, dus het stond er al die tijd — alleen had geen enkele axe-rit
   een signaal in beeld om het op te merken. */
.etiket-kritiek-ernst { background: hsl(var(--destructive) / 0.15);  color: hsl(var(--niveau-hoog-tekst)); }

/* Meldingen */
.melding {
  display: flex;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border: 1px solid;
  border-radius: 0.75rem;
}
.melding-fout { border-color: hsl(var(--destructive) / 0.4); background: hsl(var(--destructive) / 0.06); color: hsl(var(--destructive)); }
.melding-goed { border-color: hsl(var(--success) / 0.4); background: hsl(var(--success) / 0.06); color: hsl(var(--success)); }
/* Dezelfde reden als bij .alarm: de vlakkleur haalt op zijn eigen tint maar
   3,34:1. De tekstvariant van oranje haalt 5,9:1. */
.melding-let-op { border-color: hsl(var(--warning) / 0.4); background: hsl(var(--warning) / 0.06); color: hsl(var(--niveau-gemiddeld-tekst)); }
.melding-info { border-color: hsl(var(--info) / 0.35); background: hsl(var(--info) / 0.06); color: hsl(var(--info)); }

/* Een melding met een uitleg en een knop erin: de tekst leest door, de knop
   staat rechts en zakt op een smal scherm mee naar beneden. */
.melding { flex-wrap: wrap; align-items: baseline; margin-bottom: 1rem; }
.melding > .klein { flex: 1 1 18rem; color: hsl(var(--foreground)); }
.melding > .knop { margin-left: auto; align-self: center; }

/* Lege staat */
.leeg { text-align: center; padding: 3rem 1.5rem; }
.leeg svg { width: 3rem; height: 3rem; color: hsl(var(--muted-foreground)); margin-bottom: 0.75rem; }
.leeg h2 { margin-bottom: 0.25rem; }
.leeg p { color: hsl(var(--muted-foreground)); margin-bottom: 1.25rem; }

/* Stappen */
.stappen { display: flex; gap: 0.25rem; flex-wrap: wrap; border-bottom: 1px solid hsl(var(--border)); }
.stappen a {
  padding: 0.625rem 0.875rem;
  border-bottom: 2px solid transparent;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
  text-decoration: none;
}
.stappen a:hover { color: hsl(var(--foreground)); text-decoration: none; }
.stappen a.actief { border-bottom-color: hsl(var(--primary)); color: hsl(var(--foreground)); }
/* Een afgeronde stap draagt een vinkje. Het teken zegt "hier is iets
   ingevuld", niet "hier hoef je niet meer heen": de stap blijft gewoon te
   openen (O27). */
.stappen a.af { color: hsl(var(--foreground)); }
.stapvinkje { margin-left: 0.35rem; color: hsl(var(--niveau-laag-tekst)); font-weight: 700; }

/* --------------------------------------------------- Risicomatrix en appetijt */

.matrix { display: grid; grid-template-columns: auto auto; gap: 0.5rem 0; align-items: center; }
.matrix-y {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  justify-self: end;
  padding-left: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
}
.matrix-x {
  grid-column: 2;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
}
.matrix-raster {
  display: grid;
  grid-template-columns: 1.5rem repeat(5, var(--cel, 3.5rem));
  grid-template-rows: auto repeat(5, var(--cel, 3.5rem));
  gap: 3px;
}
.matrix-as { display: grid; place-items: center; font-weight: 600; color: hsl(var(--muted-foreground)); }
.matrix-as.kolom { align-items: end; padding-bottom: 0.2rem; }
.matrix-cel {
  display: grid;
  place-items: center;
  border-radius: calc(var(--radius) - 2px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.22s,
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  line-height: 1.1;
  text-align: center;
}
/* Geen opacity: op een gekleurd vlak mengt dat de tekst met de vulling en
   haalde de score 2,27:1. Het verschil in grootte en gewicht draagt de
   rangorde al. */
/* Het enige echte gegeven per vak — hoeveel risico's erin vallen — stond in de
   kleinste letter van de pagina, op een felgekleurde ondergrond (O6). Het
   witte schijfje leest op alle vier de niveaukleuren, in beide thema's. */
.matrix-cel small {
  display: block;
  margin-top: 0.15rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: hsl(0 0% 100% / 0.85);
  color: hsl(222.2 47.4% 11.2%);
  font-size: 0.75rem;
  font-weight: 700;
}
.matrix-cel.opgelicht { transform: scale(1.06); z-index: 1; box-shadow: 0 6px 14px -4px rgb(0 0 0 / 0.35); }

[data-niveau="laag"]      { background: hsl(var(--niveau-laag));      color: #062e14; }
[data-niveau="gemiddeld"] { background: hsl(var(--niveau-gemiddeld)); color: #2b1400; }
[data-niveau="hoog"]      { background: hsl(var(--niveau-hoog));      color: #ffffff; }
[data-niveau="kritiek"]   { background: hsl(var(--niveau-kritiek));   color: #ffffff; }

/* In het donkere thema zijn de niveauvlakken lichter gekozen. Wit haalde daar
   nog maar 4,16:1 op hoog en 3,67:1 op kritiek — onder de 4,5:1 van WCAG 2.2 AA.
   Donkere tekst haalt er 5,05 en 5,72, en sluit aan bij laag en gemiddeld, die
   in beide thema's al donkere tekst hebben. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) [data-niveau="hoog"]    { color: #270606; }
  :root:not([data-thema="licht"]) [data-niveau="kritiek"] { color: #1c0640; }
}
:root[data-thema="donker"] [data-niveau="hoog"]    { color: #270606; }
:root[data-thema="donker"] [data-niveau="kritiek"] { color: #1c0640; }

.schaal-houder { position: relative; width: calc(14 * var(--vak, 2.5rem)); max-width: 100%; padding: 0.75rem 0; }
.schaal { display: grid; grid-template-columns: repeat(14, var(--vak, 2.5rem)); }
.schaal-vak {
  height: var(--vak, 2.5rem);
  display: grid;
  place-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.22s;
}
.schaal-vak:first-child { border-radius: calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px); }
.schaal-vak:last-child { border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0; }
.schaal-vak.opgelicht { outline: 3px solid hsl(var(--foreground)); outline-offset: -3px; }

.schaal-houder input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  margin: 0;
  left: calc(var(--vak, 2.5rem) - var(--duim, 14px) / 2);
  width: calc(12 * var(--vak, 2.5rem) + var(--duim, 14px));
  height: calc(var(--vak, 2.5rem) + 1.5rem);
  background: transparent;
  pointer-events: none;
}
.schaal-houder input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 100%; }
.schaal-houder input[type="range"]::-moz-range-track { background: transparent; height: 100%; }
.schaal-houder input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  cursor: ew-resize;
  width: var(--duim, 14px);
  height: calc(var(--vak, 2.5rem) + 1.5rem);
  background: hsl(var(--card));
  border: 2px solid hsl(var(--foreground));
  border-radius: 7px;
  box-shadow: 0 3px 8px -2px rgb(0 0 0 / 0.4);
}
.schaal-houder input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  cursor: ew-resize;
  width: var(--duim, 14px);
  height: calc(var(--vak, 2.5rem) + 1.5rem);
  background: hsl(var(--card));
  border: 2px solid hsl(var(--foreground));
  border-radius: 7px;
  box-shadow: 0 3px 8px -2px rgb(0 0 0 / 0.4);
}
.schaal-houder input[type="range"]:focus { outline: none; }
.schaal-houder input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid hsl(var(--ring)); outline-offset: 2px; }
.schaal-houder input[type="range"]:focus-visible::-moz-range-thumb { outline: 3px solid hsl(var(--ring)); outline-offset: 2px; }

.legenda { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.75rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.legenda li { display: grid; grid-template-columns: 0.875rem 1fr; gap: 0.6rem; align-items: start; }
.legenda i { width: 0.875rem; height: 0.875rem; border-radius: 4px; margin-top: 0.25rem; }
.legenda b { display: block; }
.legenda span { color: hsl(var(--muted-foreground)); font-size: 0.8125rem; }

/* Impacttabel met aankruisvakjes */
.impacttabel td.keuze { text-align: center; padding: 0; }
.impacttabel td.keuze label {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  cursor: pointer;
  padding: 0.25rem;
}
.impacttabel td.keuze input { margin: 0; width: 1.125rem; height: 1.125rem; accent-color: hsl(var(--primary)); }
/* Wissen staat er alleen als er iets te wissen valt, en het is geen zesde
   keuzevakje: een lege radioknop naast vijf gevulde leest als een niveau. */
.kolom-wissen { width: 2.25rem; text-align: center; }
.wisknop {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  line-height: 1;
}
.wisknop:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.wisknop:focus-within { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
.impacttabel td.keuze:has(input:checked) { background: hsl(var(--primary) / 0.1); }
.impacttabel .criterium { font-size: 0.75rem; color: hsl(var(--muted-foreground)); display: block; margin-top: 0.2rem; }

.ladder { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.ladder li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
}
.ladder li:has(input:checked) { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.06); }
.ladder input { width: 1.125rem; height: 1.125rem; accent-color: hsl(var(--primary)); flex-shrink: 0; }
.ladder .gewicht { margin-left: auto; font-size: 0.75rem; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }

/* Uitkomstblok */
.uitkomst { display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; }
.uitkomst-deel { display: flex; flex-direction: column; gap: 0.125rem; }
.uitkomst-deel .waarde { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- Responsief */

/* Het uitklapmenu bestaat alleen op smalle schermen. Op een breed scherm is er
   geen knop en staat de lijst er gewoon; de <details> staat open in de HTML,
   zodat dit niet afhangt van hoe een browser een gesloten <details> verbergt. */
/* De scroll staat op de <details> zelf, niet op de <nav> erbinnen.

   Nieuwe Chrome-versies schuiven een anonieme ::details-content-doos tussen de
   twee. De <nav> is daardoor geen flexitem van .menu meer, `flex: 1` doet niets,
   en de lijst groeit door tot voorbij de onderkant van de rail — bovenop het
   merk. Op 1280x800 dekte "Made by dvesters.nl" daardoor "Organisaties" af, en
   op 1440x700 twee menu-items; precies wat M1 verbiedt.

   Overflow op de details werkt in elke browser, met of zonder die tussendoos. */
.menu { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
/* Nieuwe Chrome-versies schuiven een anonieme ::details-content-doos tussen de
   <details> en zijn inhoud. De <nav> is daardoor geen flexitem van .menu meer:
   `flex: 1` doet niets, de lijst groeit door tot voorbij de onderkant van de
   rail, en overflow op de <details> houdt hem niet tegen. De doos zelf moet het
   scrollvak zijn. In browsers zonder dit pseudo-element verandert er niets; daar
   is de <nav> wél gewoon het flexitem. */
.menu::details-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.menu > summary { display: none; }
.menu > nav { flex: 1; }

@media (max-width: 860px) {
  .schil { flex-direction: column; }
  .rail {
    position: static;
    height: auto;
    width: 100%;
    flex-direction: row;
    align-items: center;
    border-right: none;
    border-bottom: 1px solid hsl(var(--border));
    overflow-x: auto;
  }
  .rail-kop { border-bottom: none; border-right: 1px solid hsl(var(--border)); }
  /* Geen schuifstrook meer: de knop klapt de volledige lijst uit. */
  .rail { overflow-x: visible; flex-wrap: wrap; }
  /* Als lade is het menu geen eigen scrollvak: hij schuift met de pagina mee. */
  .menu { flex: 1 1 100%; min-width: 0; overflow: visible; }
  .menu > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
  }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu > summary svg { width: 1.125rem; height: 1.125rem; }
  .menu:not([open]) > nav { display: none; }
  .rail nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.25rem;
    padding: 0.5rem;
    border-top: 1px solid hsl(var(--border));
  }
  /* De bovenbalk draagt op deze breedte titel, taal, naam, rol en uitloggen.
     Op één regel met een vaste hoogte paste dat niet: de pagina schoof 62px
     opzij en "Uitloggen" viel buiten beeld. Laten afbreken dus. */
  .balk { height: auto; flex-wrap: wrap; padding-block: 0.5rem; row-gap: 0.25rem; }
  .rail-groep { grid-column: 1 / -1; padding-top: 0.5rem; }
  .rail-voet { flex: 1 1 100%; padding: 0.5rem 0.75rem; }
  .rail a { white-space: nowrap; }
  main { padding: 1rem; }
  .matrix-raster { --cel: 2.75rem; }
  .schaal-houder { --vak: min(2.5rem, calc((100vw - 5rem) / 14)); }
}

@media (max-width: 860px) {
  /* Zonder dit verlies je bij zijwaarts schuiven het onderwerp van de rij. */
  .tabelhouder th:first-child,
  .tabelhouder td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: hsl(var(--card));
    box-shadow: 1px 0 0 hsl(var(--border));
  }
  .tabelhouder thead th:first-child { background: hsl(var(--muted)); }
}

@media print {
  .rail, .balk, .knop, .stappen { display: none !important; }
  body { background: #fff; }
  .kaart { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===================================================================
 * Schikking — klassen in plaats van stijlattributen
 *
 * Deze klassen vervangen de inline style-attributen die eerder in de
 * templates stonden, zodat de Content-Security-Policy geen
 * 'unsafe-inline' meer nodig heeft voor style-src. Bewust weinig en
 * betekenisvol: kijk eerst of een bestaande klasse (klein, mini,
 * gedempt, nummer, kaart, raster, veldrij, veld, etiket) het al doet,
 * pas dan hier iets toevoegen.
 *
 * De sectie staat onderaan omdat een paar klassen — schaal-compact en
 * matrix-compact — een waarde uit het responsieve blok overschrijven,
 * precies zoals het stijlattribuut dat deed.
 * =================================================================== */

/* Rijen, richting en uitlijning */
.rij { display: flex; gap: 0.5rem; }
.rij-krap { display: flex; gap: 0.25rem; }
/* Een invoerveld in een tabelrij: zo breed als zijn inhoud vraagt, niet zo
   breed als de kolom. */
.veld-krap { width: auto; min-width: 8rem; padding: 0.25rem 0.5rem; font-size: 0.8125rem; }
.rij-ruim { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.rij-midden { display: flex; align-items: center; gap: 0.75rem; }
.stapel { display: flex; flex-direction: column; gap: 0.5rem; }
.wikkel { flex-wrap: wrap; }
.gecentreerd { justify-content: center; }
.boven-uitgelijnd { align-items: start; }
.zelf-midden { align-self: center; }
.duw-rechts { margin-left: auto; }
.krimpbaar { min-width: 0; }
.een-kolom { grid-template-columns: 1fr; }
.rechts { text-align: right; }
.midden { text-align: center; }
.afgekapt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ruimte. De schaal loopt op: mini, krap, klein, standaard, groot, ruim. */
.ruimte-boven-mini { margin-top: 0.25rem; }
.ruimte-boven-krap { margin-top: 0.4rem; }
.ruimte-boven-klein { margin-top: 0.5rem; }
.ruimte-boven { margin-top: 1rem; }
.ruimte-boven-groot { margin-top: 1.25rem; }
.ruimte-boven-ruim { margin-top: 1.5rem; }
.ruimte-onder-klein { margin-bottom: 0.5rem; }
.ruimte-onder { margin-bottom: 1rem; }
.ruimte-onder-groot { margin-bottom: 1.25rem; }
.ruimte-links-mini { margin-left: 0.25rem; }
.ruimte-links { margin-left: 0.5rem; }
.ruimte-rechts { margin-right: 0.5rem; }
.geen-marge { margin: 0; }

/* Breedtes */
.smal { max-width: 34rem; }
.veld-smal { max-width: 9rem; }
.leesregel { max-width: 70ch; }
.leesregel-kort { max-width: 62ch; }
.vol-breed { width: 100%; justify-content: center; }

/* Nadruk en tint */
.halfvet { font-weight: 600; }
.normaal { font-weight: 400; }
.strakke-letters { letter-spacing: -0.01em; }
.wijde-letters { letter-spacing: 0.14em; }
/* Alarmtekst gebruikt het rood dat voor tekst is bedoeld, niet het rood van
   een vlak. `--destructive` haalt op wit 3,76:1 en dat is te weinig voor
   normale tekst; dat viel niet eerder op omdat .alarm tot nu toe alleen op
   grote cijfers stond, waar 3:1 genoeg is. Zodra hij op een gewone regel
   kwam te staan, zakte hij door de ondergrens (B11). */
.alarm { color: hsl(var(--niveau-hoog-tekst)); }
.niet-gekozen { opacity: 0.5; }
/* Een cel zonder risico's toont alleen zijn score. Die was met opacity
   onleesbaar; het ontbreken van het grote aantal is al het signaal. */
.matrix-cel .vervaagd { font-weight: 400; }

/* Varianten op bestaande bouwstenen */
.etiket-groot { font-size: 0.9375rem; padding: 0.25rem 0.75rem; }
.etiket-reeks { margin: 0 0.25rem 0.25rem 0; }
.melding-compact { margin-bottom: 0.5rem; padding: 0.6rem 0.875rem; }
.leeg-compact { padding: 2rem 1rem; }
.kental-compact { font-size: 1.375rem; }
.select-compact { width: auto; padding: 0.25rem 0.5rem; font-size: 0.8125rem; }
.keuzelabel { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; cursor: pointer; }
.uitkomst-deel .waarde-datum { font-size: 1rem; }
/* Ook hier de schermbreedte meenemen. Deze regel staat ná de media-query en
   heeft dezelfde specificiteit, dus hij won altijd — waardoor de
   responsieve terugval dode code was en de schaal op een telefoon 151px
   buiten beeld liep. */
.schaal-compact { --vak: min(2.25rem, calc((100vw - 5rem) / 14)); }
.matrix-compact { --cel: 2.75rem; }
.niveau-streep { width: 0.875rem; height: 1.75rem; border-radius: 4px; }
.niveau-streep-lang { height: 2.25rem; }

/* Tekstvakken; de basishoogte van 6rem staat bij de formulieren. */
.tekstvak-opmerking { min-height: 3rem; }
.tekstvak-maatregel { min-height: 3.5rem; }
.tekstvak-klein { min-height: 4rem; }
.tekstvak-criterium { min-height: 5rem; margin-top: 0.4rem; }
.tekstvak-ruim { min-height: 8rem; }

/* Tabellen en lijsten */
.geen-rijen { text-align: center; padding: 2rem; }
.kolom-referentie { width: 5.5rem; }
.kolom-niveau { width: 7rem; }
.kolom-categorie { min-width: 11rem; }
.kolom-niveaukop { min-width: 8rem; }
.kolom-geen { width: 3rem; }
.keuzevink { width: 1.125rem; }
.opsomming { padding-left: 1.1rem; margin: 0.4rem 0 0; }
.opsomming-genummerd { padding-left: 1.2rem; margin: 0.4rem 0 0; }
.kenmerken {
  margin: 1rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
}
.kenmerken dd { margin: 0; }
/* Een naam als RC_SESSION_MAX_AGE_SECONDS of RISICOMANAGEMENTPLATFORM breekt
   nergens af. In een kolom van `auto 1fr` duwt zo'n woord de waardekolom de
   kaart uit — gemeten 13px buiten de rand op 375px. Op een telefoon krijgt de
   waarde daarom de volle breedte, en mag een te lang woord alsnog breken. */
.kenmerken dd { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .kenmerken { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .kenmerken dd { margin-bottom: 0.5rem; }
  .kenmerken dd:last-child { margin-bottom: 0; }
}

/* Eigen plekken */
.logo-merk { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }
.railtitel { font-weight: 700; letter-spacing: -0.01em; }
.inline-formulier { display: inline; }
.filterbalk { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.filterveld { min-width: 11rem; }
.optierij {
  align-items: end;
  padding: 0.75rem 0;
  border-bottom: 1px solid hsl(var(--border));
}
.optielabel { flex: 1; cursor: pointer; margin: 0; }
.codeblok {
  word-break: break-all;
  background: hsl(var(--muted));
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.8125rem;
}
.restwaarde { padding: 0.5rem 0; }
.restwaarde-leeg { padding: 0.6rem 0; }
.maatregel {
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  margin-top: 0.75rem;
}
details.maatregel[open] > .maatregel-kop .maatregel-samenvatting,
details.maatregel:not([open]) > .maatregel-kop .maatregel-open-titel { display: none; }

.maatregel-kop { padding: 0.75rem 1rem; cursor: pointer; font-weight: 500; }
.maatregel-inhoud { padding: 0 1rem 1rem; }

/* Aanmeldschermen (inloggen, activeren) staan los van de schil */
.aanmeldscherm {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 1.5rem;
  background: hsl(var(--muted));
}
.aanmeldpaneel { width: 100%; max-width: 23rem; }
.aanmeldmerk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.merknaam { font-size: 1.125rem; font-weight: 700; }
.paneelkop { font-size: 1.125rem; margin-bottom: 0.25rem; }

/* ===========================================================================
   Risicoappetijt: slotbalk en bevestiging

   Het wijzigen van de appetijt is een besluit, geen instelling. Die zwaarte
   mag je zien: de toestand staat bovenaan in een eigen balk, en de
   bevestigingskaart heeft een accentrand zodat hij niet wegvalt tussen de
   gewone kaarten.
   =========================================================================== */

.slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.875rem 1.125rem;
  border: 1px solid;
  border-radius: 0.75rem;
}
.slot-tekst { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.slot-dicht {
  border-color: hsl(var(--border));
  background: hsl(var(--muted));
}
.slot-open {
  border-color: hsl(var(--warning) / 0.45);
  background: hsl(var(--warning) / 0.07);
}
.slot-open .slot-tekst strong { color: hsl(var(--warning)); }
.slot-formulier { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.slot-formulier input { width: 14rem; }
.slot-formulier label { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }

.appetijt-indeling {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  align-items: start;
}

.kaart-nadruk {
  border-color: hsl(var(--primary) / 0.45);
  box-shadow: 0 1px 0 hsl(var(--primary) / 0.12) inset;
}

.verplaatsingen { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.5rem; }
.verplaatsingen li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Een schuif die vaststaat hoort er ook uit te zien alsof hij vaststaat. */
.schaal-houder input[type="range"]:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
  border-color: hsl(var(--muted-foreground));
  opacity: 0.55;
}
.schaal-houder input[type="range"]:disabled::-moz-range-thumb {
  cursor: not-allowed;
  border-color: hsl(var(--muted-foreground));
  opacity: 0.55;
}

/* Dag-één-scherm: drie stappen in plaats van vier nullen. Geen eigen kleuren
   of maten verzinnen — hetzelfde kaart-, knop- en tekstvocabulaire als de rest. */
.leeg-begin { max-width: 46rem; }
.beginstappen {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.beginstappen li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--muted) / 0.4);
}
.beginstappen li > strong { grid-column: 1; }
.beginstappen li > .klein { grid-column: 1; }
.beginstappen li > .knop,
.beginstappen li > span.klein.gedempt:last-child { grid-column: 2; grid-row: 1 / span 2; }

@media (max-width: 560px) {
  .beginstappen li { grid-template-columns: 1fr; }
  .beginstappen li > .knop,
  .beginstappen li > span.klein.gedempt:last-child {
    grid-column: 1; grid-row: auto; justify-self: start; margin-top: 0.5rem;
  }
}

/* Verborgen tot hij focus krijgt. Geen display:none en geen visibility:hidden,
   want dan is hij ook voor het toetsenbord weg. */
.overslaan {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 100;
  padding: 0.5rem 0.875rem;
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.overslaan:focus { top: 0.5rem; }

.alleen-voorlezer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   Beheerschermen: rustiger indelen

   Deze schermen toonden eerder twee talen naast elkaar en vijf tot tien velden
   op een rij. Dat leverde een raster op waarin niets meer leidde. Nu geldt:
   één taal tegelijk, één blok per categorie, en de niveaus als vijf kolommen
   met een duidelijke kop.
   =========================================================================== */

.taalkeuze {
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  padding: 0.625rem 0.875rem;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--muted) / 0.6);
}
.taalkeuze-label { font-weight: 500; }
.taalkeuze-knoppen {
  display: inline-flex;
  border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  background: hsl(var(--background));
}
.taalknop {
  padding: 0.3rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
}
.taalknop + .taalknop { border-left: 1px solid hsl(var(--input)); }
.taalknop:hover { background: hsl(var(--accent)); text-decoration: none; }
.taalknop.actief { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* Eén categorie is één blok. De naam staat als kop in het blok zelf, zodat de
   vijf niveaus eronder duidelijk bij die ene categorie horen. */
.criteriumblok {
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  background: hsl(var(--card));
  padding: 1rem 1.125rem 1.25rem;
}
.criteriumblok + .criteriumblok { margin-top: 1rem; }
.criteriumblok-kop { margin-bottom: 0.875rem; }
/* De categorienaam is de kop van het blok en ziet er ook zo uit. Dat hij
   bewerkbaar is blijkt pas bij aanwijzen; een veld dat er altijd als veld
   uitziet zou zes invoervakken toevoegen aan een scherm dat al vol staat.
   De selector is specifieker dan de algemene invoerregel, anders wint die. */
input.categorienaam {
  font-size: 1.0625rem;
  font-weight: 600;
  border-color: transparent;
  background: transparent;
  padding-left: 0;
}
input.categorienaam:hover:not([readonly]) { border-color: hsl(var(--input)); }
input.categorienaam:focus { border-color: hsl(var(--ring)); background: hsl(var(--background)); }

.criteriumrij {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.criteriumcel { display: flex; flex-direction: column; gap: 0.3rem; }
.criteriumkop {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
}
.criteriumnummer {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums;
}
.tekstvak-criterium { min-height: 4.5rem; font-size: 0.8125rem; }

/* De kansladder is een genummerde reeks, geen tabel. Toon hem ook zo. */
.tredenlijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.trede {
  display: flex;
  align-items: end;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
}
/* De tekst van een trede is de inhoud; die krijgt alle ruimte die overblijft.
   Zonder flex-grow krimpt het veld tot zijn standaardbreedte en valt de tekst
   halverwege weg. */
.trede > .krimpbaar { flex: 1 1 auto; min-width: 0; }
.trede .veld-smal { flex: 0 0 auto; width: 6.5rem; }
.tredenummer {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: calc(var(--radius) - 4px);
  background: hsl(var(--muted));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--muted-foreground));
}

/* Beleid per niveau: drie groepen in plaats van vijf losse velden op een rij. */
.beleidblok { border: 1px solid hsl(var(--border)); border-radius: 0.75rem; background: hsl(var(--card)); padding: 1rem 1.125rem 1.25rem; }
.beleidblok + .beleidblok { margin-top: 1rem; }
.beleidkop { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; }
.beleidgroepen { display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.beleidgroep > h3 { margin-bottom: 0.5rem; }
.beleidvelden { display: flex; gap: 1rem; flex-wrap: wrap; }
.dagenveld { display: flex; flex-direction: column; gap: 0.2rem; width: 9rem; }
.dagenveld label { font-size: 0.75rem; color: hsl(var(--muted-foreground)); font-weight: 500; }
.dagenveld .met-eenheid { position: relative; }
/* Ruimte voor het woord 'dagen' rechts in het veld. Zonder deze marge loopt
   een getal van drie cijfers tegen de eenheid aan. */
.dagenveld .met-eenheid input { padding-right: 3.6rem; }
.dagenveld .eenheid {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  pointer-events: none;
}
.keuzelijst { display: grid; gap: 0.5rem; }
.keuzeregel { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 400; }
.keuzeregel input { width: 1.05rem; height: 1.05rem; accent-color: hsl(var(--primary)); }

/* Een bevroren kader valt alleen nog af te lezen, dus moet aangevinkt zichtbaar
   verschillen van uitgevinkt. De browser tekent een uitgeschakeld vakje grijs
   op grijs — gemeten: 236 tegen 248 op de grijswaarde, en `accent-color` geldt
   niet voor uitgeschakelde vakjes. Daarom tekenen we het vakje hier zelf. De
   HTML blijft een selectievakje, dus voorleessoftware leest nog steeds
   "aangevinkt, uitgeschakeld" (O5, O19). */
.keuzeregel input:disabled {
  appearance: none;
  border: 1px solid hsl(var(--border));
  border-radius: 0.25rem;
  background: hsl(var(--card));
  display: grid;
  place-content: center;
}
.keuzeregel input:disabled:checked {
  /* Gedempt, niet grijs: de stand is af te lezen, maar de knal van een knop
     die je kúnt indrukken hoort er niet bij. */
  background: hsl(var(--primary) / 0.5);
  border-color: hsl(var(--primary) / 0.5);
}
.keuzeregel input:disabled:checked::after {
  content: "";
  width: 0.5rem;
  height: 0.28rem;
  border: 0.125rem solid hsl(var(--primary-foreground));
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translateY(-0.06rem);
}
.keuzeregel:has(input:disabled) { cursor: default; }

/* ===========================================================================
   Uitkomstbalk van een assessment

   Impact maal kans is risico. Die som staat er ook als som: drie vaste
   kolommen met een maalteken en een isgelijkteken ertussen. Vaste breedtes,
   zodat een lang kanslabel de verdeling niet verschuift en het beeld gelijk
   blijft terwijl je door de stappen loopt.

   De linkerrand kleurt mee met het risiconiveau. Dat is het kenmerk van dit
   product: de vierkleurenschaal is hier geen decoratie maar de kern.
   =========================================================================== */

.uitkomstbalk {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  background: hsl(var(--card));
}

/* Het niveau kleurt de risicoscore zelf, niet een strook langs de kaart. De
   kleur hoort bij die ene waarde: 20 is kritiek, niet de kaart eromheen. Een
   gekleurde rand langs een kaart zegt niet waar hij over gaat. */
.uitkomstbalk.niveau-laag .uitkomst-risico .uitkomst-waarde { color: hsl(var(--niveau-laag-tekst)); }
.uitkomstbalk.niveau-gemiddeld .uitkomst-risico .uitkomst-waarde { color: hsl(var(--niveau-gemiddeld-tekst)); }
.uitkomstbalk.niveau-hoog .uitkomst-risico .uitkomst-waarde { color: hsl(var(--niveau-hoog-tekst)); }
.uitkomstbalk.niveau-kritiek .uitkomst-risico .uitkomst-waarde { color: hsl(var(--niveau-kritiek-tekst)); }

.uitkomst-risico .uitkomst-toelichting { font-weight: 600; }
.uitkomstbalk.niveau-laag .uitkomst-risico .uitkomst-toelichting { color: hsl(var(--niveau-laag-tekst)); }
.uitkomstbalk.niveau-gemiddeld .uitkomst-risico .uitkomst-toelichting { color: hsl(var(--niveau-gemiddeld-tekst)); }
.uitkomstbalk.niveau-hoog .uitkomst-risico .uitkomst-toelichting { color: hsl(var(--niveau-hoog-tekst)); }
.uitkomstbalk.niveau-kritiek .uitkomst-risico .uitkomst-toelichting { color: hsl(var(--niveau-kritiek-tekst)); }

.uitkomstbalk .uitkomst-deel {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 11rem;
  min-width: 0;
}
.uitkomst-rechts { margin-left: auto; text-align: right; align-items: flex-end; }

/* De balk leest als een som: impact × kans = risico → restrisico. Wat daarna
   komt hoort niet bij die som en krijgt daarom een scheidingslijn in plaats van
   een rekenteken; anders deelt het de plek en de opmaak van de uitkomst (O3).
   De lijn hoort bij het vak zelf, zodat hij meeloopt als de balk afbreekt. */
.uitkomstbalk .uitkomst-gescheiden {
  padding-left: 1.25rem;
  border-left: 1px solid hsl(var(--border));
}

.uitkomst-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
}
.uitkomst-waarde {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.uitkomst-datum { font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
.uitkomst-toelichting {
  /* Geen afkapping. De kanstekst is een hele zin — "Meer dan twee keer
     gebeurd binnen het bedrijf, afgelopen 12 maanden" — en die werd na twee
     regels middenin afgebroken, terwijl de impacttekst ernaast compleet was.
     Half afgelezen beleid is erger dan een balk die een regel hoger wordt: de
     kolommen liggen vast op 11rem, dus de verdeling verschuift niet (O17). */
  font-size: 0.75rem;
  line-height: 1.35;
  color: hsl(var(--muted-foreground));
}
.uitkomst-teken {
  align-self: center;
  font-size: 1.25rem;
  /* Ook hier geen alfa. Deze tekens zijn decoratief (aria-hidden), maar één
     regel voor alle tekstkleur is te handhaven en een uitzondering niet. */
  color: hsl(var(--muted-foreground));
  margin-top: 0.75rem;
}

.kopregel { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

@media (max-width: 720px) {
  .uitkomst-teken { display: none; }
  .uitkomstbalk .uitkomst-deel { width: calc(50% - 0.625rem); }
  .uitkomst-rechts { margin-left: 0; text-align: left; align-items: flex-start; }
}

/* ===========================================================================
   Eigen gezicht

   De familiegelijkenis met het awareness-platform zit in de tokens: hetzelfde
   blauw, dezelfde slate-neutralen, dezelfde straal, dezelfde rust. Wat dit
   product eigen maakt is de vierkleurenschaal. Die komt hier terug als een
   dunne lijn onder de bovenbalk: laag, gemiddeld, hoog, kritiek, in die
   volgorde. Geen decoratie maar het onderwerp zelf.
   =========================================================================== */

.balk {
  /* Hier stond `position: relative`. Die overschreef de `sticky` hierboven, en
     de balk schoof toch weg. Een sticky element is óók het houvast voor wat er
     absoluut in staat, dus de vierkleurenlijn hieronder werkt gewoon. */
  border-bottom: none;
  box-shadow: inset 0 -1px 0 hsl(var(--border));
}
.balk::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    hsl(var(--niveau-laag)) 0 25%,
    hsl(var(--niveau-gemiddeld)) 25% 50%,
    hsl(var(--niveau-hoog)) 50% 75%,
    hsl(var(--niveau-kritiek)) 75% 100%
  );
  opacity: 0.85;
}

/* De organisatienaam is in een applicatie voor meerdere organisaties belangrijk
   genoeg om te lezen, niet om weg te moffelen onder de productnaam. */
.rail-kop { align-items: center; }
.railtitel { font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.rail-kop .mini { font-size: 0.75rem; color: hsl(var(--primary)); font-weight: 500; }

.rail-voet {
  letter-spacing: 0.02em;
  /* Geen alfa: met 0,85 bleef er 3,85:1 over, onder de 4,5:1 van WCAG 2.2 AA. */
  color: hsl(var(--muted-foreground));
}

/* Paginakoppen krijgen lucht. Een titel die tegen zijn inhoud aan plakt laat
   een scherm voller lijken dan het is. */
.paginakop { margin-bottom: 0.25rem; }
.paginakop h1 + p { margin-top: 0.35rem; }
/* De uitklap in een paginakop staat onder de titel en de knoppen, over de
   volle breedte. De kop is een flexrij; zonder dit zou de uitleg naast de
   titel gaan staan in een kolom van een paar honderd pixels. */
.paginakop > details.uitleg { flex-basis: 100%; margin-top: 0.1rem; }

/* ===========================================================================
   Risicoregister: kolombreedtes

   De risiconaam is waar de lezer op scant; die krijgt de ruimte. De scores zijn
   hoogstens twee cijfers en hebben dus niets aan een brede kolom. Zonder deze
   verdeling breekt elke naam over drie regels en worden de rijhoogtes ongelijk,
   wat het scannen juist tegenwerkt.
   =========================================================================== */

/* De minimumbreedte is de som van de elf vaste kolommen (65,25rem) plus de
   ruimte die de risiconaam minstens nodig heeft. Staat hij lager, dan houdt
   `table-layout: fixed` de vaste kolommen op hun maat en krimpt de naamkolom
   naar nul: de naam valt dan bovenop de eigenaar en de koppen erboven lopen
   over elkaar heen. Liever zijwaarts schuiven — de houder laat dat zien —
   dan kolommen die elkaar overlappen (O28). */
/* Elke kolom is zo breed als zijn kop op één regel nodig heeft, gemeten in
   beide talen en inclusief het sorteerpijltje. Te smal betekent hier niet
   "iets kleiner", maar een kop die midden in een woord afbreekt of over de
   buurkolom heen loopt. De langste vertaling bepaalt dus de maat, ook als de
   Nederlandse korter is: "Likelihood" is anderhalf keer "Kans". */
/* Twaalf kolommen is te veel voor één blik (O11). Standaard staan er zeven;
   de vijf scorekolommen eronder komen erbij met het selectievakje ernaast.
   Geen JavaScript: het vakje staat vóór de tabelhouder in de HTML, dus een
   zusselector kan de kolommen verbergen. */
.kolomschakelaar { position: absolute; width: 1px; height: 1px; opacity: 0; }
.kolomknop {
  cursor: pointer;
  border-bottom: 1px dashed hsl(var(--border));
  color: hsl(var(--foreground));
}
.kolomschakelaar:focus-visible ~ .tabeltelling .kolomknop {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}
.kolomschakelaar:not(:checked) ~ .tabeltelling .kolomknop-minder,
.kolomschakelaar:checked ~ .tabeltelling .kolomknop-meer { display: none; }
.kolomschakelaar:not(:checked) ~ .tabelhouder .kol-extra { display: none; }
.kolomschakelaar:not(:checked) ~ .tabelhouder .registertabel { min-width: 61rem; }

.registertabel { table-layout: fixed; min-width: 97rem; }
.registertabel .kol-referentie { width: 8rem; }
.registertabel .kol-naam { width: auto; }
.registertabel .kol-eigenaar { width: 10rem; }
.registertabel .kol-status { width: 7.25rem; }
.registertabel .kol-score { width: 6rem; text-align: right; }
.registertabel .kol-kansscore { width: 7.75rem; }
.registertabel .kol-prioriteitscore { width: 7.5rem; }
.registertabel .kol-restscore { width: 7.75rem; }
.registertabel .kol-niveau { width: 8.75rem; }
.registertabel .kol-datum { width: 7rem; }
/* De algemene tabelkop staat op `nowrap`. In een tabel met vaste kolommen
   betekent dat: een kop die niet past, loopt over de buurkolom heen — precies
   wat er gebeurde met "Likelihood" naast "Risk". Hier mag een kop afbreken. */
.registertabel th { white-space: normal; }
.registertabel td { vertical-align: middle; }
.registertabel .kol-naam a { display: block; }
/* Het etiket bij een achterstallige datum krijgt een eigen regel: een etiket
   breekt niet af en zou naast de datum buiten de kolom steken. */
.registertabel td.nummer .etiket { display: flex; width: fit-content; margin-top: 0.2rem; }
/* Eén lang woord zonder spaties past in geen enkele kolom. Zonder deze regel
   steekt het buiten de cel uit en schuift het over de buurkolom heen. */
.registertabel th,
.registertabel td { overflow-wrap: anywhere; }

/* ===========================================================================
   Kansladder

   De treden sluiten elkaar in, dus je kiest er één en alles eronder volgt. Dat
   is precies wat je moet zien: de gekozen trede staat vol, de treden eronder
   staan aan maar rustiger, de treden erboven zijn leeg. De verticale lijn links
   maakt het een ladder in plaats van een lijstje.

   De hoogste trede staat bovenaan. Lezen gaat dan van zwaar naar licht, en de
   gekozen trede staat altijd boven wat eruit volgt.
   =========================================================================== */

.kansladder {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.4rem;
  position: relative;
}
.kansladder::before {
  content: "";
  position: absolute;
  left: 0.42rem;
  top: 1.35rem;
  bottom: 1.35rem;
  width: 2px;
  background: hsl(var(--border));
}

.kanstrede { position: relative; }
.kanstrede label,
.kanstrede-inhoud {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.875rem;
  margin-bottom: 0.3rem;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  font-weight: 400;
  color: hsl(var(--muted-foreground));
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.kanstrede label:hover { background: hsl(var(--accent)); }
.kanstrede-inhoud { cursor: default; }

.kanstrede-punt {
  position: absolute;
  left: -1.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  border: 2px solid hsl(var(--border));
  background: hsl(var(--card));
  transition: background-color 0.15s, border-color 0.15s;
}
.kanstrede-tekst { flex: 1; min-width: 0; }
/* Geen pil maar een vakje. Rond en gevuld las als een knop, terwijl het een
   uitkomst is die je niet aanklikt (O18, KAN-2). */
.kanstrede-score {
  flex-shrink: 0;
  min-width: 1.75rem;
  text-align: center;
  padding: 0.05rem 0.4rem;
  border-radius: 0.3rem;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-weight: 600;
}

/* Een trede die geldt omdat hij uit de keuze volgt. */
.kanstrede.geldt label,
.kanstrede.geldt .kanstrede-inhoud { color: hsl(var(--foreground)); }
.kanstrede.geldt .kanstrede-punt {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

/* De gekozen trede zelf: die draagt het oordeel. */
.kanstrede.keuze label,
.kanstrede.keuze .kanstrede-inhoud {
  background: hsl(var(--primary) / 0.08);
  border-color: hsl(var(--primary));
  color: hsl(var(--foreground));
  font-weight: 500;
}
.kanstrede.keuze .kanstrede-punt {
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.25);
}
.kanstrede.keuze .kanstrede-score {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* Aanwijzen laat vooruit zien wat de keuze zou betekenen. */
.kanstrede.voorbeeld:not(.geldt) .kanstrede-punt { border-color: hsl(var(--primary) / 0.5); }
.kanstrede.voorbeeld:not(.geldt) label { color: hsl(var(--foreground)); }

.kanstrede input:focus-visible + label {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .kanstrede label, .kanstrede-punt { transition: none; }
}

/* ===========================================================================
   Bedragschaal

   Vier grenzen, vijf bereiken. De strook bovenaan toont hoe de vijf niveaus de
   schaal verdelen; de breedte van elk vak volgt uit de schuifposities, dus je
   ziet meteen of een bereik onevenredig groot is.

   De niveaus lopen van neutraal naar rood. Dat is dezelfde oploop als in de
   risicomatrix, maar gedempt: dit is een instelscherm, geen alarm.
   =========================================================================== */

[data-niveau-schaal="1"] { background: hsl(210 25% 88%); color: hsl(215 25% 27%); }
[data-niveau-schaal="2"] { background: hsl(48 85% 82%); color: hsl(38 60% 25%); }
[data-niveau-schaal="3"] { background: hsl(32 90% 78%); color: hsl(25 70% 25%); }
[data-niveau-schaal="4"] { background: hsl(14 85% 76%); color: hsl(10 65% 25%); }
[data-niveau-schaal="5"] { background: hsl(0 70% 72%); color: hsl(0 60% 22%); }

.bedragschaal { display: grid; gap: 0.875rem; }

/* De balk bestaat uit twee delen: de strook met de vier eindige gebieden, en
   daarnaast een vast vak voor het gebied zonder bovengrens. Dat vak kan niet op
   schaal, want het loopt tot oneindig. Weglaten zou het verbergen; meeschalen
   zou de vier andere platdrukken. */
.bedragschaal { --open-vak: 5.5rem; --open-kier: 0.5rem; --greep: 0.9rem; }
.bedragbalk { display: flex; gap: var(--open-kier); align-items: stretch; height: 2rem; }
.bedragstrook { display: flex; gap: 3px; flex: 1 1 auto; min-width: 0; }
span.bedragvak-open {
  flex: 0 0 var(--open-vak);
  gap: 0.35rem;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  border-radius: calc(var(--radius) - 4px);
  position: relative;
  overflow: visible;
  font-size: 0.75rem;
  font-weight: 600;
}
span.bedragvak-open > span { font-size: 1.05rem; line-height: 1; }
/* Een streepje markeert dat hier de schaal ophoudt en het open einde begint. */
span.bedragvak-open::before {
  content: "";
  position: absolute;
  left: -0.25rem;
  top: 0.2rem;
  bottom: 0.2rem;
  border-left: 2px dotted hsl(var(--muted-foreground) / 0.5);
}

.bovengrensveld { display: flex; flex-direction: column; gap: 0.3rem; max-width: 22rem; }
.bovengrensveld > label { font-weight: 500; }
.bovengrensveld .met-valuta input { font-size: 1rem; font-weight: 600; }
.bedragvak {
  display: grid;
  place-items: center;
  border-radius: calc(var(--radius) - 4px);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 1.5rem;
  overflow: hidden;
  transition: flex-basis 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* De vier schuiven liggen over elkaar op één spoor.
   Het spoor is een dunne lijn, maar het klikgebied van elke schuif beslaat de
   volle hoogte van de rij: een greep van vier pixels hoog is niet te pakken. */
/* De schuiven lopen over precies hetzelfde stuk als de strook erboven, dus
   zonder het vaste vak voor het open einde. Anders zouden de greepjes naast de
   grenzen staan die ze verzetten. */
.bedragschuiven {
  position: relative;
  height: 1.75rem;
  margin-right: calc(var(--open-vak) + var(--open-kier));
}
.bedragschuiven::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: hsl(var(--border));
}
/* De greep is een halve breedte naar binnen geplaatst door de browser: bij de
   laagste waarde raakt zijn linkerrand de linkerkant, niet zijn midden. Door de
   input een halve greep breder te maken dan zijn spoor, valt het midden van de
   greep precies op de grens die hij verzet. */
.bedragschuiven input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--greep, 0.9rem) / -2);
  width: calc(100% + var(--greep, 0.9rem));
  height: 100%;
  margin: 0;
  background: transparent;
  pointer-events: none;
}
.bedragschuiven input[type="range"]::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
}
.bedragschuiven input[type="range"]::-moz-range-track {
  height: 100%;
  background: transparent;
}
.bedragschuiven input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  cursor: ew-resize;
  width: var(--greep, 0.9rem);
  height: 1.75rem;
  background: hsl(var(--card));
  border: 2px solid hsl(var(--primary));
  border-radius: 5px;
  box-shadow: 0 2px 5px -1px rgb(0 0 0 / 0.3);
}
.bedragschuiven input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  cursor: ew-resize;
  width: 0.9rem;
  height: 1.75rem;
  background: hsl(var(--card));
  border: 2px solid hsl(var(--primary));
  border-radius: 5px;
  box-shadow: 0 2px 5px -1px rgb(0 0 0 / 0.3);
}
.bedragschuiven input[type="range"]:disabled::-webkit-slider-thumb {
  border-color: hsl(var(--muted-foreground));
  opacity: 0.5;
  cursor: not-allowed;
}
.bedragschuiven input[type="range"]:disabled::-moz-range-thumb {
  border-color: hsl(var(--muted-foreground));
  opacity: 0.5;
  cursor: not-allowed;
}
.bedragschuiven input[type="range"]:focus { outline: none; }
.bedragschuiven input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 3px solid hsl(var(--ring));
  outline-offset: 2px;
}
.bedragschuiven input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 3px solid hsl(var(--ring));
  outline-offset: 2px;
}

.bedragvelden {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.bedragveld { display: flex; flex-direction: column; gap: 0.25rem; }
.bedragveld label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
}
.met-valuta { position: relative; }
.met-valuta input { padding-left: 1.85rem; font-variant-numeric: tabular-nums; }
.valutateken {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: hsl(var(--muted-foreground));
  pointer-events: none;
}

.bedragniveaus {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.bedragniveaus li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0.6rem;
  border-radius: calc(var(--radius) - 4px);
  background: hsl(var(--muted) / 0.7);
  font-size: 0.8125rem;
}
.bedragniveau-naam { color: hsl(var(--muted-foreground)); }
.bedragniveau-bereik { font-weight: 600; }

/* De genummerde kop boven een tekstcriterium krijgt dezelfde oploop, zodat
   beide soorten categorieën dezelfde schaal uitstralen. */
.criteriumnummer[data-niveau-schaal] { color: inherit; }

/* De niveaukoppen boven de impacttabel dragen dezelfde genummerde bol als het
   beheerscherm. Een kop in kapitalen verdraagt geen bol ernaast, dus deze
   koppen staan in gewone letters. */
.impacttabel thead th.kolom-niveaukop {
  text-transform: none;
  letter-spacing: 0;
  text-align: center;
  min-width: 8rem;
}
.niveaukop { display: inline-flex; align-items: center; gap: 0.4rem; }
.niveaukop-naam { font-size: 0.8125rem; }


/* ===========================================================================
   Kaderversies: de acties staan in de rij waar ze over gaan

   Een knop bóven de tabel weet niet over welke versie hij gaat — precies de
   verwarring die dit scherm moest oplossen. Daarom staat elke actie in zijn
   eigen rij. De naamkolom slokt de resterende ruimte op zodat de knoppen naast
   elkaar passen in plaats van onder elkaar te vallen.
   =========================================================================== */

/* De acties mogen afbreken als de rij te smal wordt. Op `nowrap` liep de
   knoppenrij buiten de tabel en werd "Nieuwe versie maken" op een gewoon
   laptopscherm halverwege afgesneden (O8). De knoppen zelf breken niet. */
.rijacties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: flex-end;
  align-items: center;
}
.rijacties form { display: inline-flex; }
.rijacties .knop { white-space: nowrap; }

/* De risiconaam is waar de lezer op scant, dus die houdt een ondergrens. Zonder
   die grens brak hij over vier regels terwijl de eigenaarskolom ernaast leeg
   stond en de signalen alle ruimte namen (O8). */
.lijsttabel td:nth-child(2) { min-width: 15rem; }
/* De signalen mogen afbreken. Een etiket is normaal één regel, maar hier staan
   er meerdere naast een naam die ook ruimte nodig heeft; zonder afbreken duwt
   deze kolom de hele tabel voorbij de rand van het scherm. */
.lijsttabel td:last-child { max-width: 12rem; }
.lijsttabel td:last-child .etiket { white-space: normal; }

.kadertabel td { vertical-align: middle; }
.kadertabel th:last-child, .kadertabel td:last-child { text-align: right; }
/* De naamkolom nam alle ruimte, waardoor de acties ernaast op één knop per
   regel uitkwamen. De naam krijgt wat er overblijft, niet alles. */
.kadertabel td:nth-child(2) { width: auto; }
.kadertabel td:nth-child(3), .kadertabel td:nth-child(4),
.kadertabel td:nth-child(5) { white-space: nowrap; }

/* Verwijderen is geen knop maar een woord: zichtbaar aanwezig, nooit de actie
   waar je per ongeluk op klikt. De pagina erachter vraagt door. */
.knop-gevaartekst { color: hsl(var(--destructive)); }
.knop-gevaartekst:hover {
  color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.08);
}

.etiket-mini { font-size: 0.6875rem; padding: 0.05rem 0.375rem; }
.smal { max-width: 40rem; }

/* ===========================================================================
   Methodiek: vier profielen en hun losse onderdelen

   De vier kaarten staan bovenaan omdat de meeste organisaties daar klaar zijn.
   De losse schakelaars staan eronder, niet ernaast: wie ze nodig heeft zoekt ze
   wel op, en wie ze niet nodig heeft moet er niet over struikelen.
   =========================================================================== */

/* Het volwassenheidsbeeld staat bovenaan de methodiek en is nergens
   opgeslagen: het volgt uit de gradaties eronder. De naam draagt het meeste
   gewicht, de twee cijfers ernaast zijn feiten en geen oordeel (O6). */
.beeldkaart {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}
.beeldnaam { display: grid; gap: 0.2rem; min-width: min(100%, 18rem); flex: 1; }
.beeldnaam .groot { font-size: 1.5rem; line-height: 1.2; }
.beeldnaam p { margin: 0.25rem 0 0; }
.beeldcijfers {
  display: flex;
  gap: 1.75rem;
  margin: 0;
}
.beeldcijfers > div { display: grid; gap: 0.15rem; }
.beeldcijfers dt, .beeldcijfers dd { margin: 0; }
.beeldcijfers dd { font-size: 1.25rem; font-weight: 600; }
/* De onderdelen die u nog mist, als links naar de kaart waar u ze aanzet.
   Een eis noemen zonder de weg erheen is de helft van het werk (O18). */
.mist a { font-weight: 600; }

/* Een link midden in een zin is niet alleen aan zijn kleur te herkennen: wie
   kleurenblind is ziet er gewone tekst staan (WCAG 1.4.1). Onderstreept dus,
   en niet pas bij aanwijzen. */
.tekstlink { text-decoration: underline; text-underline-offset: 0.2em; }

/* De drie gradaties één keer uitgelegd, boven de lijst. Bij elk onderdeel
   herhalen zou tien keer dezelfde zin opleveren (O15). */
.gradatielegenda {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  display: grid;
  gap: 0.3rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.625rem;
}
.gradatielegenda strong { font-variant-numeric: tabular-nums; margin-right: 0.35rem; }

.gradatiekeuze {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.gradatiekeuze > label { flex-basis: 100%; }
.gradatiekeuze .kieslijst { flex: 1; min-width: min(100%, 14rem); }

/* Wat elke gradatie aanzet, met het cijfer ervoor. Wat nog niet meedoet blijft
   staan en wordt gedempt: dan zie je wat de volgende stap oplevert in plaats
   van alleen wat je nu hebt (O27). */
.keuzekolom { display: grid; gap: 0.6rem; align-content: start; }
.kenmerkladder {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}
.kenmerkladder li { display: flex; gap: 0.5rem; align-items: baseline; }
.kenmerkladder .nummer {
  min-width: 1rem;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--muted-foreground));
}
.kenmerkladder .kenmerk-uit { color: hsl(var(--muted-foreground)); }
.kenmerkladder .kenmerk-aan::marker { content: none; }

/* "Lees meer": de uitgebreide toelichting achter een native <details>. Geen
   JavaScript, dus hij werkt ook met een strikte CSP en zonder scripts. De
   samenvatting erboven is wat iemand moet lezen om te kunnen kiezen; dit is
   voor wie wil weten waaróm. */
.samenvatting { margin: 0.35rem 0 0; }
details.uitleg { margin-top: 0.6rem; }
details.uitleg > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: hsl(var(--primary));
  list-style: none;
  /* Een klikdoel van minstens 24 pixels hoog, ook als de tekst kleiner is. */
  min-height: 1.5rem;
}
details.uitleg > summary::-webkit-details-marker { display: none; }
details.uitleg > summary::before {
  content: "›";
  display: inline-block;
  transition: transform 0.15s ease;
}
details.uitleg[open] > summary::before { transform: rotate(90deg); }
details.uitleg > summary:hover { text-decoration: underline; }
.uitlegtekst {
  margin-top: 0.6rem;
  padding: 0.9rem 1rem;
  border-left: 2px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.35);
  border-radius: 0 0.5rem 0.5rem 0;
}
.uitlegtekst p { margin: 0 0 0.65rem; }
/* Op een breed scherm twee kolommen, zoals een krant. Eén kolom van 70 tekens
   in een kaart van meer dan duizend pixels laat een half scherm wit liggen; de
   regel langer maken zou de leesbaarheid kosten. Kolommen lossen allebei op. */
@media (min-width: 70rem) {
  .uitlegtekst > p { break-inside: avoid; }
  .uitlegtekst { column-count: 2; column-gap: 2.5rem; }
  .uitlegtekst > h3, .uitlegtekst > h4, .uitlegtekst > dl, .uitlegtekst > ol {
    column-span: all;
  }
}
.uitlegtekst p:last-child { margin-bottom: 0; }
.uitlegtekst h3, .uitlegtekst h4 {
  margin: 1.1rem 0 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

/* Wat elke gradatie inhoudt: het cijfer als anker, de uitleg eronder. */
.gradatieuitleg { margin: 0; display: grid; gap: 0.15rem; }
.gradatieuitleg dt {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  margin-top: 0.6rem;
}
.gradatieuitleg dt:first-of-type { margin-top: 0; }
.gradatieuitleg dt .nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: hsl(var(--muted));
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
}
.gradatieuitleg dd { margin: 0 0 0 1.75rem; }

/* De volwassenheidsschaal als genummerde ladder, met uw eigen trede gemerkt.
   Niet `.schaal`: die naam is al van de appetijtschaal, en twee betekenissen
   onder één klassenaam is precies hoe een pagina stilletjes breekt (O1). */
.volwassenheidsladder { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.9rem; }
.volwassenheidsladder > li::marker {
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
}
.volwassenheidsladder p { margin: 0.2rem 0 0; }
.ladderkop { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.volwassenheidsladder > li.ladder-hier > .ladderkop > strong { color: hsl(var(--primary)); }

/* In de beeldkaart mag de uitleg over de volle breedte, onder de cijfers. */
.beeldkaart > details.uitleg.breed { flex-basis: 100%; margin-top: 0.25rem; }

.faseskop {
  margin: 1.5rem 0 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.modulelijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.modulelijst > li {
  padding: 0.75rem 0.9rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.625rem;
}
.modulelijst > li.module-aan {
  border-color: hsl(var(--primary) / 0.35);
  background: hsl(var(--primary) / 0.04);
}
.modulekop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.modulelijst p { margin: 0.25rem 0 0; }
.kenmerkregel { font-style: italic; }

/* Vanaf een breed scherm twee kolommen: links waar het over gaat, rechts wat
   u kiest. Eén kolom liet een leesregel van 70 tekens staan in een kaart van
   1150 pixels, met een half scherm wit ernaast — de regel was goed, het gat
   niet (O10). De toelichting eronder loopt over beide kolommen, want dat is
   lopende tekst en die hoort niet tussen een formulier geperst. */
@media (min-width: 62rem) {
  .modulelijst > li {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(17rem, 1fr);
    column-gap: 2rem;
    align-items: start;
  }
  /* De kop over beide kolommen, daaronder waar het over gaat naast wat u
     kiest. De keuzekolom houdt de keuze en de ladder bij elkaar, zodat de
     lengte van de samenvatting links niet bepaalt waar de ladder rechts
     terechtkomt. */
  .modulelijst > li > .modulekop { grid-column: 1 / -1; }
  .modulelijst > li > .samenvatting { grid-column: 1; margin-top: 0; }
  .modulelijst > li > .keuzekolom { grid-column: 2; }
  .modulelijst > li > details.uitleg,
  .modulelijst > li > .kenmerkregel { grid-column: 1 / -1; }
  .keuzekolom > .gradatiekeuze { margin-top: 0; }
  .keuzekolom > .kenmerkladder { margin-top: 0; }
}

/* In de uitklap mag de gradatie-uitleg de breedte gebruiken: drie kolommen
   naast elkaar leest als een vergelijking, drie blokken onder elkaar als een
   lijst — en vergelijken is wat u hier doet. */
@media (min-width: 62rem) {
  .gradatieuitleg {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1.75rem;
  }
  .gradatieuitleg dt { grid-row: 1; margin-top: 0; }
  .gradatieuitleg dd { grid-row: 2; margin-left: 0; }
  .uitlegtekst > p.leesregel { max-width: none; }
}

/* MAPGOOD: zeven vakken naast elkaar, een leeg vak valt op omdat het dat hoort
   te doen — een aspect zonder risico's is een vraag, geen resultaat. */
.mapgoodraster {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  /* Elk vak wordt zo hoog als zijn eigen inhoud. Zonder dit rekt één
     openstaand formulier de hele rij mee en staat er een half scherm wit
     naast zes dichte vakken (O10). */
  align-items: start;
}
.mapgoodvak h2 { margin: 0 0 0.25rem; font-size: 0.9375rem; }
.mapgoodvak p { margin: 0; }
.mapgoodtelling {
  margin-top: 0.75rem;
  font-size: 1.75rem;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.mapgoodtelling .klein { font-weight: 400; }
.leeg-aspect { border-style: dashed; }
/* Een nul is geen telling maar een afwezigheid. Zes van de zeven vakken toonden
   hun nul met hetzelfde gewicht als het ene vak dat wél iets bevatte, en het
   scherm werd een muur van nullen (O6). */
.leeg-aspect .mapgoodtelling { color: hsl(var(--muted-foreground)); font-weight: 400; }

/* De rondgang onder de telling: wat is bekeken, wat leverde het op, door wie.
   Dit is het verschil tussen "hier is niets" en "hier keek nog nooit iemand",
   en daarom staat het onder het cijfer en niet ernaast. */
.rondgang {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid hsl(var(--border));
  display: grid;
  gap: 0.5rem;
}
.rondgang p { margin: 0; }
.rondgang .kenmerken { gap: 0.15rem 0.75rem; }
.rondgangformulier > summary {
  display: inline-flex;
  cursor: pointer;
  list-style: none;
}
.rondgangformulier > summary::-webkit-details-marker { display: none; }
.rondgangformulier form { display: grid; gap: 0.6rem; margin-top: 0.75rem; }
.rondgangformulier fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.rondgangformulier legend { padding: 0; }
.rondgangformulier textarea { width: 100%; }

.veldrij-vier {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  align-items: end;
}
.veldrij-vier .veld { margin-bottom: 0; }
.veld-breed { grid-column: 1 / -1; }
.smal-breed { max-width: 52rem; }
/* Kop links, acties rechts — maar op een telefoon past dat niet naast elkaar.
   Zonder afbreken duwden de twee knoppen op Inzicht de pagina 34px voorbij de
   rand, en dan schuift het hele scherm zijwaarts. */
.rij.tussen { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.soatabel input { width: 100%; min-width: 12rem; }

/* Analyse- en contextblokken op het assessment */
.aspectkeuze, .vinkraster {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.aspectvak, .vinkvak {
  display: grid;
  gap: 0.1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  cursor: pointer;
}
.aspectvak input, .vinkvak input { margin-bottom: 0.25rem; }
.aspectvak:has(input:checked), .vinkvak:has(input:checked),
.aspectvak.gekozen {
  border-color: hsl(var(--primary) / 0.5);
  background: hsl(var(--primary) / 0.05);
}

.rpnvak, .restvak {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.625rem;
  background: hsl(var(--muted));
}
.rpngetal { font-size: 1.5rem; }
.rpnvak p { flex-basis: 100%; margin: 0; }

/* De vlinderdas: oorzaken links, gevolgen rechts, de gebeurtenis in het midden.
   Op een smal scherm vallen de kanten onder elkaar; de knoop in het midden
   blijft dan gewoon de scheiding tussen beide. */
.vlinderdas {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
}
.das-kant { display: grid; gap: 0.75rem; align-content: start; }
.das-kant h3 { margin: 0; font-size: 0.8125rem; text-transform: uppercase;
               letter-spacing: 0.06em; color: hsl(var(--muted-foreground)); }
.das-midden {
  align-self: center;
  display: grid;
  gap: 0.2rem;
  max-width: 14rem;
  padding: 0.875rem 1rem;
  text-align: center;
  border: 1px solid hsl(var(--warning) / 0.45);
  border-radius: 0.75rem;
  background: hsl(var(--warning) / 0.07);
}
.das-knoop {
  padding: 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.625rem;
}
.das-tekst { display: flex; justify-content: space-between; gap: 0.5rem; align-items: start; }
.barrieres { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.25rem;
             font-size: 0.8125rem; }
.barrieres li { padding: 0.2rem 0.5rem; border-left: 3px solid hsl(var(--success)); }
.barrieres li.ontbreekt { border-left-color: hsl(var(--destructive)); color: hsl(var(--muted-foreground)); }
.das-toevoegen { display: flex; gap: 0.375rem; margin-top: 0.5rem; }
.das-toevoegen input { flex: 1; min-width: 0; }
.tekstvak-mini { min-height: 3.5rem; }

@media (max-width: 60rem) {
  .vlinderdas { grid-template-columns: 1fr; }
}

/* Beleidsdocumenten: een invuloefening, geen leeg vel.

   Afgeleide paragrafen krijgen een andere achtergrond en geen invoerveld. Dat
   verschil moet je zien zonder te lezen: het ene vraagt iets van je, het andere
   laat zien wat er al is. */
.beleidsraster {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
}
.beleidskaart { display: flex; flex-direction: column; gap: 0.6rem; }
.beleidskaart h2 { margin: 0; font-size: 1rem; }
.beleidskaart p { margin: 0; }
.beleidskaart .rij:last-child { margin-top: auto; }

.voortgang { display: grid; gap: 0.3rem; }
.voortgangbalk {
  display: block;
  /* Ook een lege meter moet een meter zijn. Als vlakje in de gedempte kleur
     was 0% niet van een scheidingslijntje te onderscheiden (O18). De omtrek
     maakt er een bak van die nog gevuld kan worden, en de bak is hoog genoeg
     om als bak te lezen. */
  height: 0.5rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  box-shadow: inset 0 0 0 1px hsl(var(--border));
  overflow: hidden;
}
/* Standaard leeg: een waarde buiten de reeks hieronder zou anders een volle
   balk tekenen, en dat is precies het omgekeerde van wat er dan aan de hand is. */
.voortgangdeel { display: block; height: 100%; width: 0; background: hsl(var(--primary)); }
.voortgangdeel[data-deel="0"] { width: 0%; }
.voortgangdeel[data-deel="10"] { width: 10%; }
.voortgangdeel[data-deel="20"] { width: 20%; }
.voortgangdeel[data-deel="30"] { width: 30%; }
.voortgangdeel[data-deel="40"] { width: 40%; }
.voortgangdeel[data-deel="50"] { width: 50%; }
.voortgangdeel[data-deel="60"] { width: 60%; }
.voortgangdeel[data-deel="70"] { width: 70%; }
.voortgangdeel[data-deel="80"] { width: 80%; }
.voortgangdeel[data-deel="90"] { width: 90%; }
.voortgangdeel[data-deel="100"] { width: 100%; }

.paragraaf h2 { margin: 0; font-size: 1rem; }
.paragraaf-afgeleid { background: hsl(var(--muted) / 0.6); border-style: dashed; }
.paragraaf-afgeleid table td { border: 0; padding: 0.2rem 0.6rem 0.2rem 0; }

/* Sorteerbare kolomkoppen. De pijl staat naast het label en duwt de kolom niet
   breder: hij krijgt vaste ruimte, ook als hij leeg is. */
th a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
th a:hover { color: hsl(var(--foreground)); }
.sorteerpijl { display: inline-block; min-width: 0.7em; margin-left: 0.25em; font-size: 0.85em; }
th.gesorteerd { color: hsl(var(--foreground)); }

.paginabalk { display: flex; gap: 0.5rem; align-items: center; justify-content: center; margin-top: 0.75rem; }
.filterveld.breed { flex: 1 1 18rem; }

/* Filterbalk: velden naast elkaar zolang het past, daarna onder elkaar. */
.filterbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.filterbalk .veld { flex: 1 1 10rem; min-width: 0; margin: 0; }
.filterbalk .rij { flex: 0 0 auto; }

/* ===========================================================================
   Kieslijst — smal dicht, breed open

   Een <select> van de browser kan niet breder opengaan dan hij dicht is. Waar
   een optie een hele zin nodig heeft om iets te betekenen, moest je dus kiezen
   tussen een veld dat de regel opeet en een keuze op goed geluk.

   Dicht is dit een veld van vaste breedte, zodat de rijen van een tabel
   uitlijnen (O8). Open valt er een paneel overheen dat zo breed is als de tekst
   vraagt. De kleuren zijn dezelfde vijftrapsschaal als de impacttabel en de
   bedragschaal, via [data-niveau-schaal] (O5).
   =========================================================================== */

/* De wisknop krijgt altijd zijn kolom, ook als er niets te wissen valt. Anders
   zijn de velden van ingevulde en lege regels net niet even breed (O8). */
.kieslijst {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.6rem;
  align-items: center;
}
/* Zonder JavaScript blijft het keuzeveld staan en is de rest er niet. */
.kieslijst:not(.kieslijst-verrijkt) { display: block; }
.kieslijst:not(.kieslijst-verrijkt) select { width: 100%; }

.kieslijst-knop {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
  text-align: left;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.35;
  padding: 0.4rem 0.55rem;
  border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  cursor: pointer;
}
.kieslijst-knop:hover { border-color: hsl(var(--ring)); }
.kieslijst-knop[aria-expanded="true"] {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.25);
}
.kieslijst-knop:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
/* De gekozen kleur zit op een tint van 12%: het veld moet de zwaarte tonen,
   niet schreeuwen, en de tekst moet er zwart op blijven staan (B11). */
.kieslijst-knop[data-niveau-schaal] { background: none; }
.kieslijst-knop[data-niveau-schaal="1"] { background: hsl(210 25% 88% / 0.45); }
.kieslijst-knop[data-niveau-schaal="2"] { background: hsl(48 85% 82% / 0.45); }
.kieslijst-knop[data-niveau-schaal="3"] { background: hsl(32 90% 78% / 0.45); }
.kieslijst-knop[data-niveau-schaal="4"] { background: hsl(14 85% 76% / 0.45); }
.kieslijst-knop[data-niveau-schaal="5"] { background: hsl(0 70% 72% / 0.45); }

.kieslijst-vul { display: flex; align-items: flex-start; gap: 0.45rem; flex: 1 1 auto; min-width: 0; }
.kieslijst-pijl { color: hsl(var(--muted-foreground)); flex: 0 0 auto; line-height: 1.4; }
.kieslijst-tekst { min-width: 0; }
.kieslijst-leeg { color: hsl(var(--muted-foreground)); }
.kieslijst-bol {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.05rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* [data-niveau-schaal] staat eerder in dit bestand en weegt even zwaar, dus
   een kleur hier zou die van de schaal overschrijven. Alleen invullen waar de
   optie geen niveau heeft. */
.kieslijst-bol:not([data-niveau-schaal]) {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

/* Twee regels, daarna een beletselteken. Afbreken mag; een derde regel zou de
   rijhoogtes in de tabel weer ongelijk maken. */
.tweeregels {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kieslijst-chips { display: flex; gap: 0.2rem; flex: 0 0 auto; }
.kieslijst-chip {
  display: inline-grid;
  place-items: center;
  min-width: 1.7rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kieslijst-chip:not([data-niveau-schaal]) {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.kieslijst-wis {
  justify-self: center;
  border: 0;
  background: none;
  color: hsl(var(--muted-foreground));
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.2rem 0.3rem;
  border-radius: 999px;
  cursor: pointer;
}
.kieslijst-wis:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.kieslijst-wis:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }

.kieslijst-paneel {
  position: absolute;
  grid-column: 1 / -1;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  /* Minstens zo breed als het veld, en waar het veld smal is minstens 46rem:
     het paneel bestaat juist omdat de tekst niet in het veld past. */
  width: max(100%, min(46rem, 86vw));
  max-height: min(28rem, 70vh);
  overflow-y: auto;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.6rem;
  box-shadow: 0 12px 32px -12px hsl(222 47% 11% / 0.35);
  padding: 0.4rem;
}
/* Rechts op de pagina zou het paneel er anders uit lopen. */
.kieslijst-rechts .kieslijst-paneel { left: auto; right: 0; }

.kieslijst-paneelkop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.25rem 0.45rem 0.4rem;
  border-bottom: 1px solid hsl(var(--border));
  margin-bottom: 0.3rem;
}
.kieslijst-titel { font-size: 0.8125rem; font-weight: 600; }
.kieslijst-hint { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
.kieslijst-dims {
  display: flex;
  gap: 0.25rem;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  font-weight: 700;
}
/* Dezelfde tussenruimte en breedte als de merkknoppen eronder, zodat B, I en V
   precies boven hun eigen kolom staan. */
.kieslijst-dims span { width: 1.7rem; text-align: center; }

.kieslijst-zoek { margin: 0 0.2rem 0.35rem; width: calc(100% - 0.4rem); font-size: 0.8125rem; }
.kieslijst-opties { display: grid; gap: 0.1rem; }
.kieslijst-niets { padding: 0.6rem 0.5rem; margin: 0; color: hsl(var(--muted-foreground)); font-size: 0.8125rem; }

.kieslijst-keus {
  display: grid;
  grid-template-columns: 1.25rem 1fr auto;
  gap: 0.6rem;
  align-items: center;
  width: 100%;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  padding: 0.4rem 0.45rem;
  cursor: pointer;
}
.kieslijst-keus-stil { cursor: default; }
button.kieslijst-keus:hover { background: hsl(var(--accent)); }
.kieslijst-keus:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -1px; }
.kieslijst-keus[aria-selected="true"] { border-color: hsl(var(--ring)); }
.kieslijst-keus[aria-selected="true"][data-niveau-schaal-regel="1"] { background: hsl(210 25% 88% / 0.4); }
.kieslijst-keus[aria-selected="true"][data-niveau-schaal-regel="2"] { background: hsl(48 85% 82% / 0.4); }
.kieslijst-keus[aria-selected="true"][data-niveau-schaal-regel="3"] { background: hsl(32 90% 78% / 0.4); }
.kieslijst-keus[aria-selected="true"][data-niveau-schaal-regel="4"] { background: hsl(14 85% 76% / 0.4); }
.kieslijst-keus[aria-selected="true"][data-niveau-schaal-regel="5"] { background: hsl(0 70% 72% / 0.4); }
.kieslijst-regeltekst { min-width: 0; line-height: 1.35; }
.kieslijst-naam { display: block; font-size: 0.6875rem; color: hsl(var(--muted-foreground)); }
/* Op de gekozen regel ligt een kleurvlak. Gedempte tekst haalt daarop de 4,5:1
   van WCAG 2.2 AA niet; het formaatverschil draagt de rangorde dan wel. */
.kieslijst-keus[aria-selected="true"] .kieslijst-naam { color: hsl(var(--foreground)); }

.kieslijst-merken { display: flex; gap: 0.25rem; flex: 0 0 auto; }
.kieslijst-merk {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 5px;
  border: 1px solid hsl(var(--input));
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground));
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: pointer;
}
.kieslijst-merk:hover { border-color: hsl(var(--ring)); color: hsl(var(--foreground)); }
.kieslijst-merk[aria-pressed="true"] {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.kieslijst-merk:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }

/* Op een telefoon is het veld al bijna zo breed als het scherm. Het paneel
   breder maken zou het buiten beeld duwen; de tekst loopt daar gewoon door
   over meer regels. */
@media (max-width: 600px) {
  .kieslijst-paneel,
  .kieslijst-rechts .kieslijst-paneel { width: 100%; left: 0; right: auto; }
}

/* In het donkere thema liggen dezelfde pastels op een donkere kaart. Op 45%
   zou de tekst erop wegvallen, dus de tint is daar lichter aangezet. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kieslijst-knop[data-niveau-schaal="1"] { background: hsl(210 25% 88% / 0.16); }
  :root:not([data-theme="light"]) .kieslijst-knop[data-niveau-schaal="2"] { background: hsl(48 85% 82% / 0.16); }
  :root:not([data-theme="light"]) .kieslijst-knop[data-niveau-schaal="3"] { background: hsl(32 90% 78% / 0.16); }
  :root:not([data-theme="light"]) .kieslijst-knop[data-niveau-schaal="4"] { background: hsl(14 85% 76% / 0.16); }
  :root:not([data-theme="light"]) .kieslijst-knop[data-niveau-schaal="5"] { background: hsl(0 70% 72% / 0.18); }
  :root:not([data-theme="light"]) .kieslijst-keus[aria-selected="true"][data-niveau-schaal-regel="1"] { background: hsl(210 25% 88% / 0.14); }
  :root:not([data-theme="light"]) .kieslijst-keus[aria-selected="true"][data-niveau-schaal-regel="2"] { background: hsl(48 85% 82% / 0.14); }
  :root:not([data-theme="light"]) .kieslijst-keus[aria-selected="true"][data-niveau-schaal-regel="3"] { background: hsl(32 90% 78% / 0.14); }
  :root:not([data-theme="light"]) .kieslijst-keus[aria-selected="true"][data-niveau-schaal-regel="4"] { background: hsl(14 85% 76% / 0.14); }
  :root:not([data-theme="light"]) .kieslijst-keus[aria-selected="true"][data-niveau-schaal-regel="5"] { background: hsl(0 70% 72% / 0.16); }
}
:root[data-theme="dark"] .kieslijst-knop[data-niveau-schaal="1"] { background: hsl(210 25% 88% / 0.16); }
:root[data-theme="dark"] .kieslijst-knop[data-niveau-schaal="2"] { background: hsl(48 85% 82% / 0.16); }
:root[data-theme="dark"] .kieslijst-knop[data-niveau-schaal="3"] { background: hsl(32 90% 78% / 0.16); }
:root[data-theme="dark"] .kieslijst-knop[data-niveau-schaal="4"] { background: hsl(14 85% 76% / 0.16); }
:root[data-theme="dark"] .kieslijst-knop[data-niveau-schaal="5"] { background: hsl(0 70% 72% / 0.18); }
:root[data-theme="dark"] .kieslijst-keus[aria-selected="true"][data-niveau-schaal-regel="1"] { background: hsl(210 25% 88% / 0.14); }
:root[data-theme="dark"] .kieslijst-keus[aria-selected="true"][data-niveau-schaal-regel="2"] { background: hsl(48 85% 82% / 0.14); }
:root[data-theme="dark"] .kieslijst-keus[aria-selected="true"][data-niveau-schaal-regel="3"] { background: hsl(32 90% 78% / 0.14); }
:root[data-theme="dark"] .kieslijst-keus[aria-selected="true"][data-niveau-schaal-regel="4"] { background: hsl(14 85% 76% / 0.14); }
:root[data-theme="dark"] .kieslijst-keus[aria-selected="true"][data-niveau-schaal-regel="5"] { background: hsl(0 70% 72% / 0.16); }

/* Het raster waarin kieslijsten staan: een vaste naamkolom links, het veld
   rechts. Vaste breedtes, zodat de regels uitlijnen ook als een omschrijving
   afbreekt (O8). Géén overflow: dat zou het paneel afknippen. */
.keuzeraster { display: grid; gap: 0; }
.keuzeraster-kop,
.keuzeraster-regel {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.4rem 0.15rem;
  border-bottom: 1px solid hsl(var(--border));
}
.keuzeraster-regel:last-child { border-bottom: 0; }
.keuzeraster-kop {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
  font-weight: 700;
}
.keuzeraster-naam { font-weight: 600; font-size: 0.875rem; line-height: 1.3; }
/* Een regel van veertig aanslagen leest niet; breder dan dit wordt het veld niet. */
.keuzeraster .kieslijst { max-width: 46rem; }
.keuzeraster-naam .etiket { margin-left: 0.35rem; }
@media (max-width: 640px) {
  .keuzeraster-kop { display: none; }
  .keuzeraster-regel { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; padding: 0.6rem 0.15rem; }
}