/* Sign-in pages (/login, /login/verify): 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); }