/* De inlogpagina (templates/v2/pages/inloggen.html, B166, B195), naar het
   ontwerp in docs/inloggen/ (README §3, §5): het logo boven één witte kaart in
   het midden, zonder menu, zonder schaduw. Alleen de maten en kleuren van
   tokens.css en de bouwstenen van basis.css (.btn, .v-status, .v-avatar);
   daarbuiten alleen wat het ontwerp zelf noemt: het draaiende teken van 18 px
   en de binnenrand van 20 px op een telefoon.
   Knoptekst 14 px (--fs-5) zoals elke knop in het portaal: de 15 px van het
   ontwerp staat niet in de schaal van DESIGN.md. */

.inl-body { margin: 0; background: var(--c-canvas); }

.inl-pagina {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  padding: var(--sp-7) var(--sp-5);
}
.inl-logo { display: block; height: 40px; width: auto; }

.inl-kaart {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}

/* ---- kop: statuslabel, titel, uitleg ---- */
.inl-kop { display: flex; flex-direction: column; gap: var(--sp-2); }
.inl-kop .v-status { align-self: flex-start; }
.inl-klein { font-size: var(--fs-6); line-height: var(--lh-6); font-weight: var(--fw-semibold); color: var(--c-text-3); }
.inl-titel { font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-semibold); }
.inl-tekst { margin: 0; font-size: var(--fs-4); line-height: var(--lh-4); color: var(--c-text-2); text-wrap: pretty; }

/* ---- de drie stappen bij een uitnodiging ---- */
.inl-stappen { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.inl-stappen li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.inl-stapnr {
  flex: none; width: var(--sp-5); height: var(--sp-5); border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-primary-soft); color: var(--c-primary);
  font-size: var(--fs-6); font-weight: var(--fw-semibold);
}
.inl-stap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inl-staptitel { font-size: var(--fs-5); line-height: var(--lh-5); font-weight: var(--fw-semibold); }
.inl-staptekst { font-size: var(--fs-5); line-height: var(--lh-5); color: var(--c-text-2); text-wrap: pretty; }

/* ---- het grijze vlak: 'U was op', het account; groen: Aanvraag verstuurd ---- */
.inl-vlak {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--c-canvas);
}
.inl-vlak--account { flex-direction: row; align-items: center; gap: var(--sp-3); }
.inl-vlak--klaar { background: var(--st-klaar-bg); }
.inl-vlak-label { font-size: var(--fs-6); line-height: var(--lh-6); color: var(--c-text-3); }
.inl-vlak-waarde { font-size: var(--fs-5); line-height: var(--lh-5); font-weight: var(--fw-semibold); }
.inl-vlak-tekst { font-size: var(--fs-5); line-height: var(--lh-5); color: var(--c-text); }
.inl-klaar { color: var(--st-klaar-fg); }
.inl-account { display: flex; flex-direction: column; min-width: 0; }
.inl-afkap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- knoppen en hulptekst ---- */
.inl-knoppen { display: flex; flex-direction: column; gap: var(--sp-3); }
.inl-knoppen form { margin: 0; }
.inl-knoppen .btn { width: 100%; }
.inl-knop-hoofd { height: var(--h-lg); }
.inl-knop-tweede { height: var(--h-veld); }
.inl-hulp { margin: 0; font-size: var(--fs-5); line-height: var(--lh-5); color: var(--c-text-3); text-wrap: pretty; }
.inl-melding {
  margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  font-size: var(--fs-5); line-height: var(--lh-5);
  color: var(--st-blok-fg); background: var(--st-blok-bg);
}

/* ---- Bezig (situatie 2): de knop wordt een vlak van dezelfde hoogte ---- */
.inl-bezig-blok {
  display: none; height: var(--h-lg); align-items: center; justify-content: center; gap: var(--sp-3);
  border: 1px solid var(--c-line-soft); border-radius: var(--r-md);
  background: var(--c-canvas); color: var(--c-text-2);
  font-size: var(--fs-5); line-height: var(--lh-5);
}
.inl-draai {
  flex: none; width: 18px; height: 18px; border-radius: var(--r-full);
  border: 2px solid var(--c-line-strong); border-top-color: var(--c-primary);
  animation: inl-draai .8s linear infinite;
}
@keyframes inl-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .inl-draai { animation-duration: 2.4s; } }
.inl-bezig .inl-niet-bezig { display: none; }
.inl-bezig .inl-bezig-blok { display: flex; }

/* ---- telefoon (§5): paginarand 16, de kaart vult de breedte ---- */
@media (max-width: 639px) {
  .inl-pagina { padding: var(--sp-6) var(--sp-4); }
  .inl-kaart { padding: var(--sp-5) 20px; }
}