/* moduleregister.js — het moduleoverzicht (N2). Alleen tokens.
   Rustig met opzet: dit scherm is een ingang, geen werkplek. Wie hier
   blijft hangen heeft niets gevonden. */
.mo { padding: 4px 0 8px; }
.mo-titel { margin: 0 0 4px; font: 800 20px/1.25 var(--font-ui); color: var(--ink, var(--c-ink)); }
.mo-waarvoor {
  margin: 0 0 20px; font-size: 13.5px; line-height: 1.6;
  color: var(--ink2, var(--c-ink-2)); max-width: 68ch;
}
.mo-leeg { font-size: 13px; color: var(--ink3, var(--c-ink-3)); margin: 0; font-style: italic; }

/* ---- blok 2 · vier stuurgetallen ---- */
.mo-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 10px; margin-bottom: 20px;
}
.mo-kpi {
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-klein, 11px);
  padding: 12px 14px; background: var(--kaart);
  display: flex; flex-direction: column; gap: 1px;
}
.mo-kpi b {
  font: 700 22px/1.15 var(--font-mono); color: var(--ink, var(--c-ink));
  font-variant-numeric: tabular-nums;
}
.mo-kpi.is-accent b { color: var(--accent); }
.mo-kpi.is-let b { color: var(--let, var(--c-amber)); }
.mo-kpi__label { font-size: 12px; font-weight: 700; color: var(--ink2, var(--c-ink-2)); }
/* B08 · de bron staat klein onder het getal. Een getal zonder bron is een
   bewering; met bron is het een meting. */
.mo-kpi__bron { font-size: 10.5px; color: var(--ink3, var(--c-ink-3)); line-height: 1.35; }
.mo-kpi.is-klik { cursor: pointer; transition: border-color 160ms ease; }
.mo-kpi.is-klik:hover { border-color: var(--accent); }
.mo-kpi.is-klik:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- blokken 3, 4 en 6 ---- */
.mo-blokken { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 820px) { .mo-blokken { grid-template-columns: 1fr; } }
.mo-blok {
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-klein, 11px);
  overflow: hidden; background: var(--kaart);
}
.mo-blok h3 {
  margin: 0; padding: 9px 13px; background: var(--rail, var(--grijs));
  border-bottom: var(--lijndikte) solid var(--c-lijn);
  font: 700 10.5px var(--font-mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink3, var(--c-ink-3));
}
.mo-blok ul { margin: 0; padding: 4px 0; list-style: none; }
.mo-blok li {
  display: flex; gap: 9px; align-items: baseline; padding: 8px 13px;
  font-size: 12.5px; line-height: 1.45; border-top: var(--lijndikte) solid var(--c-lijn);
  color: var(--ink, var(--c-ink));
}
.mo-blok li:first-child { border-top: 0; }
.mo-blok li i { font-size: 10px; color: var(--ink3, var(--c-ink-3)); }
.mo-blok .mo-r { margin-left: auto; font-size: 11px; color: var(--ink2, var(--c-ink-2)); white-space: nowrap; }
.mo-blok p { padding: 10px 13px; }
.mo-sig--stop i { color: var(--stop, var(--c-rood)); }
.mo-sig--let i { color: var(--let, var(--c-amber)); }

/* ---- blok 5 · waar je heen kunt ---- */
.mo-heen { display: flex; flex-wrap: wrap; gap: 6px; padding: 11px 13px; }
.mo-heenkaart {
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px;
  padding: 5px 12px; font: 600 12px var(--font-ui); color: var(--ink2, var(--c-ink-2));
  text-decoration: none; background: var(--kaart);
}
.mo-heenkaart:hover { border-color: var(--accent); color: var(--accent); }
.mo-heenkaart:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .mo-kpi.is-klik { transition: none; } }