/* ============================================================================
   inloggen.css — the login page (inloggen.html)
   ----------------------------------------------------------------------------
   Builds on site.css. One centred card on the washes; the states (form, sent,
   too many tries, logging in, link expired) swap inside it.
   ========================================================================== */

.in {
  position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 7.5rem var(--pad) 5rem;
}
.in__kaart {
  position: relative; width: min(100%, 34rem); padding: clamp(1.6rem, 4vw, 2.6rem);
  border-radius: 1.75rem; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line);
  box-shadow: 0 30px 70px -34px rgba(90, 60, 140, 0.4), 0 2px 8px rgba(13, 14, 17, 0.04);
}
.in__label { font-size: 0.8125rem; color: var(--accent); margin-bottom: 0.6rem; }
.in__kop { font-weight: 500; font-size: var(--kop-hero); line-height: var(--kop-hero-lh); letter-spacing: var(--kop-hero-ls); }
.in__kop:focus { outline: none; }
.in__tekst { margin-top: 1rem; color: #46464b; line-height: 1.6; text-wrap: pretty; }
.in__form { margin-top: 1.75rem; display: grid; gap: 1rem; }
.in__form .knop { width: 100%; }
.in__acties { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.in__voet { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); }
.in__terug { position: relative; margin-top: 1.5rem; font-size: 0.93rem; }
.in__terug a { text-decoration: none; color: var(--muted); }
.in__terug a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.22em; }

@media (max-width: 40rem) { .in .wash { opacity: 0.34 !important; } }