/* ============================================================================
   SVS HRM — weergave 2 — basis: letter, reset, typografie, focus, hulpklassen
   ========================================================================= */

/* Inter, lokaal geleverd (font-src 'self'). Eén variabel bestand van 48 KB dekt alle
   gewichten. Valt terug op de systeemletter zolang hij laadt; `font-display: swap`
   voorkomt een leeg scherm. */
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

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

body {
  margin: 0;
  background: var(--grond);
  color: var(--tekst);
  font-family: var(--letter);
  font-size: var(--tekst-l);
  line-height: var(--regelhoogte);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 1, "cv11" 1;
}

h1, h2, h3, h4 { margin: 0; line-height: var(--regelhoogte-kop); color: var(--tekst);
  text-wrap: balance; }
h1 { font-size: var(--tekst-pagina); font-weight: 600; letter-spacing: -.015em; }
h2 { font-size: var(--tekst-sectie); font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: var(--tekst-kaart); font-weight: 600; }
h4 { font-size: var(--tekst-l); font-weight: 600; }
p  { margin: 0 0 var(--ruimte-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--inkt-700); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { text-decoration-color: currentColor; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { max-width: 100%; }
table { border-collapse: collapse; }
code, kbd, pre { font-family: var(--letter-vast); }

/* ---- Focus -----------------------------------------------------------------
   Eén zichtbare ring voor alles wat je met het toetsenbord bereikt. */
:focus-visible {
  outline: var(--focusring) solid var(--groen-700);
  outline-offset: 2px;
  border-radius: var(--radius-1);
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Skip-link --------------------------------------------------------------- */
.overslaan {
  position: absolute; left: var(--ruimte-4); top: -100px; z-index: 100;
  padding: var(--ruimte-2) var(--ruimte-4);
  background: var(--inkt-900); color: var(--tekst-op-donker);
  border-radius: var(--radius-2); font-weight: 600; text-decoration: none;
  transition: top var(--duur-normaal) var(--soepel);
}
.overslaan:focus { top: var(--ruimte-4); }

/* ---- Typografische hulpklassen ------------------------------------------- */
.label {
  display: block;
  font-size: var(--tekst-s); font-weight: 500; letter-spacing: 0;
  color: var(--tekst-3);
}
.meta { font-size: var(--tekst-s); color: var(--tekst-2); }
.getal, .cijfer, td.getal, .waarde, .num { font-variant-numeric: tabular-nums; }
.afgekapt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.twee-regels {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.alleen-schermlezer {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.toelichting { color: var(--tekst-2); font-size: var(--tekst-m); max-width: 72ch; }

/* ---- Raster ------------------------------------------------------------------ */
.raster { display: grid; gap: var(--ruimte-4); grid-template-columns: repeat(12, 1fr); }
.kol-3  { grid-column: span 3; }
.kol-4  { grid-column: span 4; }
.kol-5  { grid-column: span 5; }
.kol-6  { grid-column: span 6; }
.kol-7  { grid-column: span 7; }
.kol-8  { grid-column: span 8; }
.kol-12 { grid-column: 1 / -1; }

.stapel { display: flex; flex-direction: column; gap: var(--ruimte-4); }
.rij { display: flex; align-items: center; gap: var(--ruimte-3); }
.rij-eind { margin-left: auto; }
.rechts { display: flex; align-items: center; justify-content: flex-end; gap: var(--ruimte-2);
  flex-wrap: wrap; }
.verspreid { display: flex; align-items: center; justify-content: space-between;
  gap: var(--ruimte-4); }

@media (max-width: 1023px) {
  .kol-3, .kol-4, .kol-5, .kol-6, .kol-7, .kol-8 { grid-column: 1 / -1; }
}

/* ---- Beweging --------------------------------------------------------------- */
@keyframes opkomen { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes vervagen { from { opacity: 0; } to { opacity: 1; } }
@keyframes glans { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes draai { to { transform: rotate(360deg); } }
@keyframes inschuiven { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes meeromhoog { from { transform: translateY(12%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

[hidden] { display: none !important; }

/* ---- Opstarten --------------------------------------------------------------- */
.opstart { display: flex; flex-direction: column; align-items: center;
  gap: var(--ruimte-3); padding-top: 40vh; color: var(--tekst-3);
  font-size: var(--tekst-s); }
.opstart::after { content: "Bezig met laden"; }
.opstart-punt { display: none; }