/* Pagine di accesso (login, reset password, 2FA). Usano solo i token di tokens.css.
   Port del layout auth del vecchio design/ su "Linea nero-oro": fondo piatto, card
   bianca con bordo 1px, accento oro (campo con testo nero). */
body {
  margin: 0;
  min-height: 100dvh;
  background: rgb(var(--c-bg));
  color: rgb(var(--c-ink));
  font-size: var(--text-body);
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  /* spazio in fondo per il pie' di pagina fisso (.z1-footer.is-fixed) */
  padding: 24px 24px 76px;
}

.wrap { width: 100%; max-width: 448px; }

.topbar { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
/* Marchio su placca bianca (il wordmark ha fondo bianco): angoli e bordo del tema. */
.brand-plate {
  display: inline-flex; align-items: center;
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-line));
  border-radius: var(--r-card);
  padding: 12px 18px;
}
.brand-plate img { display: block; height: 66px; width: auto; }

/* La card riprende .card del tema (PATTERNS §3: padding 24px). */
.card { padding: 1.5rem; }

h1 { font-size: var(--text-title); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; margin: 0 0 6px; text-wrap: balance; overflow-wrap: anywhere; }
.sub { color: rgb(var(--c-muted)); font-size: .875rem; line-height: 1.5; margin: 0 0 22px; max-width: 46ch; }

.target {
  display: flex; align-items: center; gap: 9px;
  border: 1px dashed rgb(var(--c-line));
  border-radius: var(--r-control);
  padding: 8px 11px; margin: 0 0 20px;
  color: rgb(var(--c-ink)); font-size: .8125rem; line-height: 1.4;
}
.target svg { flex: none; color: rgb(var(--c-muted)); }
.target a { color: rgb(var(--c-ink)); font-weight: 600; text-decoration-color: rgb(var(--c-brand)); text-underline-offset: 3px; overflow-wrap: anywhere; }

label { display: block; font-size: .875rem; font-weight: 500; color: rgb(var(--n-700)); margin-bottom: 6px; }

input[type=text], input[type=password], input[type=email] {
  width: 100%;
  padding: 12px 13px;
  margin-bottom: 18px;
  border: 1px solid rgb(var(--n-300));
  border-radius: var(--r-control);
  background: rgb(var(--c-surface));
  color: rgb(var(--c-ink));
  font-family: inherit; font-size: 16px;
  transition: border-color var(--dur-fast);
}
input::placeholder { color: rgb(var(--c-muted)); opacity: .9; }
input[type=text]:focus-visible, input[type=password]:focus-visible, input[type=email]:focus-visible { border-color: rgb(var(--c-ink)); }

button, .btn {
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: var(--r-control);
  background: rgb(var(--c-brand));
  color: rgb(var(--c-on-brand));
  font-family: inherit; font-size: .9375rem; font-weight: 600;
  cursor: pointer;
  box-shadow: var(--light-inset);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter var(--dur-fast);
}
button:not(:disabled):hover, .btn:hover { filter: brightness(.95); }
button:disabled { opacity: .5; cursor: not-allowed; }
/* Azione secondaria (es. "Continua senza passkey"): stessa forma, senza il campo oro. */
button.ghost, .btn-ghost {
  background: transparent; color: rgb(var(--c-ink));
  border: 1px solid rgb(var(--c-line)); box-shadow: none; font-weight: 500;
}
button.ghost:not(:disabled):hover, .btn-ghost:hover { filter: none; background: rgb(var(--n-100)); }
@media (prefers-reduced-motion: no-preference) { button:active, .btn:active { transform: scale(.985); } }

a { color: rgb(var(--c-ink)); text-decoration-color: rgb(var(--c-brand)); text-underline-offset: 3px; }

/* Codice OTP: sei celle collegate a un campo nascosto */
.otp-row { display: flex; gap: 8px; margin-bottom: 18px; }
.otp-box {
  width: 100%; aspect-ratio: 1;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px; font-weight: 500;
  border: 1px solid rgb(var(--n-300));
  border-radius: var(--r-control);
  background: rgb(var(--c-surface)); color: rgb(var(--c-ink));
  padding: 0;
}
.otp-box:focus-visible { border-color: rgb(var(--c-ink)); }

.recovery-box {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgb(var(--c-surface));
  border: 1px dashed rgb(var(--c-line));
  border-radius: var(--r-control);
  padding: 10px 12px; margin-top: 6px;
}
.recovery-box code { font-size: .8125rem; letter-spacing: .03em; word-break: break-all; }

.copy-btn {
  width: auto; padding: 6px 10px;
  font-size: .75rem; font-weight: 500;
  background: rgb(var(--n-100)); color: rgb(var(--c-ink));
  border: 1px solid rgb(var(--c-line));
  box-shadow: none;
}
.copy-btn:hover { background: rgb(var(--n-200)); filter: none; }

.steps { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; }
.steps li { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; color: rgb(var(--c-muted)); line-height: 1.5; }
.steps .n {
  flex: none; width: 22px; height: 22px;
  border-radius: var(--r-pill);
  background: rgb(var(--c-ink)); color: #fff;
  font-size: .75rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

.qr-frame {
  background: #fff;
  border: 1px solid rgb(var(--c-line));
  border-radius: var(--r-card);
  padding: 14px;
  width: fit-content;
  margin: 0 auto 22px;
}
.qr-frame img { display: block; width: 176px; height: 176px; }

@media (max-width: 480px) {
  body { padding: 14px 14px 76px; align-items: flex-start; }
  .card { padding: 1.25rem 1.125rem; }
  h1 { font-size: 1.375rem; }
}