/* 1.21.1: readable sign-in screens with touch targets and room for error messages. */
.auth-body { min-height: 100svh; padding: 32px 20px; }
.auth-body .auth-shell { min-width: 0; max-width: 100%; }
.auth-body .login-card { min-width: 0; padding: 30px; }
.auth-body .login-card h1 { font-size: clamp(25px, 5vw, 31px); line-height: 1.2; overflow-wrap: anywhere; }
.auth-body .login-card > p { font-size: 15px; line-height: 1.55; }
.auth-body .login-card > p.eyebrow { font-size: 12px; }
.auth-body .auth-form-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.auth-body .field { min-width: 0; }
.auth-body .field-label { font-size: 14px; line-height: 1.45; }
.auth-body .field input { width: 100%; max-width: 100%; min-width: 0; min-height: 48px; font-size: 16px; }
.auth-body .field input[aria-invalid="true"] { border-color: #ae342a; background: #fff8f7; }
.auth-body .field-error { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.auth-body .auth-submit { min-height: 48px; margin-top: 22px; font-size: 15px; }
.auth-body .auth-links { display: grid; gap: 2px; padding-top: 18px; margin-top: 22px; border-top: 1px solid var(--line); }
.auth-body .auth-links a { display: flex; align-items: center; min-height: 44px; padding: 6px 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.auth-body .auth-code { font-variant-numeric: tabular-nums; font-size: 22px; letter-spacing: .18em; }
.auth-body .auth-foot { font-size: 14px; line-height: 1.5; }
.auth-body .auth-foot a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; gap: 8px; }
.auth-body .auth-foot svg { flex-shrink: 0; }
.auth-body .alert { align-items: flex-start; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.auth-body .alert > span:not(.alert-icon) { min-width: 0; }
.auth-body .alert button { flex: 0 0 44px; min-width: 44px; min-height: 44px; margin-top: -8px; margin-right: -8px; }
.auth-body :is(a, button, input):focus-visible { outline: 3px solid #167b97; outline-offset: 3px; }
@media (max-width: 480px) {
  .auth-body { padding: 22px 14px; }
  .auth-body .login-card { padding: 23px 20px; }
  .auth-body .auth-brand { margin-bottom: 18px; }
}
@media (max-height: 720px) {
  .auth-body { place-items: start center; }
}