/* Sign-in pages (/login, /login/verify, /login/forgot, /login/reset) and the lock page (/lock): logo, notice, the second step. Colours come from tokens.css only. */

.login-logo { margin: -4px 0 16px; text-align: center; }
.login-logo img { display: inline-block; max-width: 100%; max-height: 90px; }
.login-notice {
  margin-top: 18px;
  padding: 10px 12px;
  font-size: var(--text-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
  color: var(--color-info-ink);
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-control);
}

/* The second step: who is signing in, the code, recovery codes, set-up when it is required. */
.login-second-step.is-enrol { max-width: 560px; }
.login-second-step p { margin: 0 0 12px; }
.login-who { font-size: var(--text-sm); overflow-wrap: anywhere; }
.login-who .login-email { color: var(--color-text-muted); }
.login-error {
  margin: 0 0 12px;
  padding: 8px 12px;
  color: var(--color-error-ink);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--radius-control);
}
.login-second-step input[name="code"] { width: 100%; font-size: 20px; letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.login-second-step input[name="recovery"] { width: 100%; font-family: var(--font-mono); font-variant-ligatures: none; }
.login-recovery { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.login-recovery > summary { cursor: pointer; color: var(--color-link); }
.login-recovery > summary:hover { color: var(--color-link-hover); }
.login-recovery[open] > summary { margin-bottom: 10px; }
.login-cancel { margin-top: 16px; text-align: center; font-size: var(--text-sm); }

/* Codes by email: where the code went, Send again, and the offer on the app and enrol forms. */
.login-sent { overflow-wrap: anywhere; }
.login-send { margin-top: 10px; }
.login-alt { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.login-alt p { margin: 0 0 8px; overflow-wrap: anywhere; }

/* The idle lock: who is signed in, the password, and the way out. */
.lock-box p { margin: 0 0 12px; }

/* Password reset: the link under the sign-in form, the reset pages and their way back to it. */
.reset-box p { margin: 0 0 12px; }
.login-forgot, .reset-box .login-back { margin: 16px 0 0; text-align: center; font-size: var(--text-sm); }

/* The public legal pages (/privacy, /terms): a reading column on the bare layout. */
.legal-box { max-width: 720px; margin: 24px auto; }
.legal-body h3 { margin: 20px 0 8px; font-size: var(--text-md); }
.legal-body p, .legal-body li { line-height: 1.55; }
.legal-body p { margin: 0 0 12px; }
.legal-body ul { margin: 0 0 12px 20px; padding: 0; }
.legal-links { margin-top: 20px; font-size: var(--text-sm); text-align: center; }