/* Match the reviewed signup layout without replacing the current production CSS. */
.auth-screen .auth-form-column { max-width: 400px; }
.auth-screen .auth-step-intro { width: 100%; }
.auth-screen .auth-step-description { min-height: 44px; max-width: none; margin-inline: 0; text-align: left; text-wrap: pretty; }
.auth-screen .auth-step-fields { min-height: 160px; }
@container (max-height: 440px) {
  .auth-content:has(.auth-step-fields) { justify-content: flex-start; }
  .auth-screen .auth-step-fields { min-height: 0; }
}

.sms-response-filter { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; border-radius: 8px; cursor: pointer; }
.sms-response-filter > span { display: inline-flex; align-items: center; gap: 4px; }
.sms-response-filter select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.sms-response-filter:hover, .sms-response-filter:focus-within, .sms-response-filter.is-active { background: var(--color-inset); color: var(--color-ink); }
.sms-response-summary { margin-bottom: 12px; }
.sms-response-summary button { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; border-radius: 999px; padding: 8px 14px; background: var(--color-inset); color: var(--color-ink); font-size: 14px; font-weight: 500; }
.sms-response-summary button:hover, .sms-response-summary button:focus-visible { background: var(--color-inset-strong); }