/* Login, registration, password reset, Mijn Account — same sign language, form-first. */

.auth { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; padding-top: 36px; }
.auth--narrow { grid-template-columns: minmax(0, 520px); justify-content: center; padding-block: 56px 72px; }
.auth__main { display: grid; gap: 24px; min-width: 0; }
.auth__plate { display: grid; grid-template-columns: 64px 1fr; align-items: stretch; min-height: 56px; background: var(--color-brand); color: var(--color-brand-ink); border-radius: var(--radius); overflow: hidden; font: 900 20px/1 var(--font-display); font-stretch: 78%; text-transform: uppercase; }
.auth__plate > span:last-child { display: flex; align-items: center; padding: 0 18px; }
.auth__code { display: grid; place-items: center; background: var(--color-brand-ink); color: var(--color-brand); font-size: 22px; font-stretch: 62%; }
.auth__code .icon { width: 24px; height: 24px; }
.auth__h1 { font: 900 clamp(36px, 5vw, 56px)/.95 var(--font-display); font-stretch: 75%; text-transform: uppercase; }
.auth__intro { color: var(--color-text-2); }
.auth__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; font-size: 15px; color: var(--color-text-2); }
.auth__fine { font: 500 12px/1.6 var(--font-mono); color: var(--color-muted); }

.step { display: grid; gap: 18px; padding: 28px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); animation: step-in var(--dur-slow) var(--ease) both; }
@keyframes step-in { from { opacity: 0; transform: translateY(10px); } }
.step__title { display: flex; align-items: center; gap: 14px; font: 900 clamp(22px, 2.6vw, 30px)/1.05 var(--font-display); font-stretch: 80%; text-transform: uppercase; outline: none; }
.step__no { display: grid; place-items: center; flex: none; width: 44px; height: 44px; background: var(--color-brand); color: var(--color-brand-ink); border-radius: var(--radius); font-size: 22px; font-stretch: 62%; }
.step__intro { color: var(--color-text-2); max-width: 62ch; }
.fset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.done--err { border-left-color: var(--color-error); }

.auth__side { position: sticky; top: calc(var(--strip-h) + 24px); display: grid; gap: 12px; }
.aside-card { padding: 22px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); display: grid; gap: 12px; }
.aside-card--dark { background: #0B0D10; }
.aside-card__t { font: 900 20px/1.1 var(--font-display); font-stretch: 82%; text-transform: uppercase; }
.aside-card__k { font: 700 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--color-brand); }
.aside-card p { font-size: 15px; color: var(--color-text-2); }
.ticks { display: grid; gap: 10px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; color: var(--color-text-2); }
.ticks .icon { width: 20px; height: 20px; color: var(--color-go); margin-top: 2px; }

/* ── Mijn Account ─────────────────────────────────────────────────────── */
.acct { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; padding-top: 32px; }
.acct__nav { position: sticky; top: calc(var(--strip-h) + 20px); display: grid; gap: 2px; padding: 8px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.acct__nav a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--color-text-2); text-decoration: none; font-weight: 600; font-size: 15px; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.acct__nav a .icon { width: 18px; height: 18px; }
.acct__nav a:hover { background: var(--color-surface-2); color: var(--color-text); }
.acct__nav a[aria-current] { background: var(--color-brand); color: var(--color-brand-ink); }
.acct__nav hr { border: 0; border-top: 1px solid var(--color-border); margin: 6px 4px; }
.acct__body { display: grid; gap: 20px; min-width: 0; }
.acct__h { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.acct__title { font: 900 clamp(28px, 3.4vw, 44px)/1 var(--font-display); font-stretch: 76%; text-transform: uppercase; }
.panel { padding: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); display: grid; gap: 16px; }
.panel__t { font: 900 20px/1.1 var(--font-display); font-stretch: 82%; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.panel__t .icon { width: 20px; height: 20px; color: var(--color-brand); }
.panel p { color: var(--color-text-2); }
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.kv { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 10px 20px; font-size: 15px; }
.kv dt { color: var(--color-muted); }
.kv dd { margin: 0; color: var(--color-text); overflow-wrap: anywhere; }
.stat { display: grid; gap: 6px; padding: 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.stat__k { font: 700 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
.stat__v { font: 900 30px/1 var(--font-display); font-stretch: 78%; }
.stat__d { font-size: 13px; color: var(--color-muted); }
.meter { height: 8px; border-radius: 4px; background: var(--color-surface-2); overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--w, 0%); background: var(--color-brand); transform-origin: left; animation: meter var(--dur-slow) var(--ease) both; }
@keyframes meter { from { transform: scaleX(0); } }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 600 13px/1 var(--font-mono); color: var(--color-text-2); }
.flow span { padding: 8px 10px; background: var(--color-surface-2); border-radius: var(--radius-sm); }
.flow .icon { width: 14px; height: 14px; color: var(--color-brand); }

@media (max-width: 1100px) {
  .auth { grid-template-columns: 1fr; }
  .auth__side { position: static; }
  .acct { grid-template-columns: 1fr; }
  .acct__nav { position: static; display: flex; overflow-x: auto; scrollbar-width: none; }
  .acct__nav a { flex: none; }
  .acct__nav hr { display: none; }
}
@media (max-width: 520px) {
  .step { padding: 20px 16px; }
  .auth--narrow { padding-block: 32px 48px; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dd { margin-bottom: 10px; }
}
.panel { align-content: start; }
.panel .note { flex-wrap: wrap; align-items: center; }
.panel .note p { flex: 1 1 200px; }
.panel .note form { flex: none; }