/* Sign in (with the two-factor step), forgotten password, password reset and
   the social sign-in buttons (also used by the sign-up wizard). */

/* font-size / line-height: base text metrics (16px, normal line height) so line boxes
   around inline icons, images and pills stay consistent. */
.auth { max-width: 440px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 36px) 64px; font-size: 16px; line-height: normal; }
.auth__logo { display: block; text-align: center; margin-bottom: 22px; }
.auth__logo img { height: 36px; }

.auth-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 24px; padding: clamp(22px, 3vw, 32px); box-shadow: 0 16px 40px rgba(194, 0, 0, .06); }
.auth-card--center { padding: clamp(24px, 3vw, 34px); text-align: center; }
.auth-center { text-align: center; }
.auth-card__title { font: 500 24px var(--font); color: var(--ink); margin: 0 0 6px; text-align: center; }
.auth-card__sub { font: 400 14px var(--font); color: var(--text-2); margin: 0 0 22px; text-align: center; }
.auth-card__heading { font: 500 23px var(--font); color: var(--ink); margin: 0 0 8px; }
.auth-card__text { font: 400 14px/1.5 var(--font); color: var(--text-2); margin: 0 0 22px; }
.auth-card__text--code { margin-bottom: 20px; }

/* Rounded icon tile above the centred cards. */
.auth-icon { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 18px; background: var(--pink-100); margin-bottom: 16px; }
.auth-icon i { font-size: 30px; color: var(--brand); }

.auth-input { margin-bottom: 16px; }
.auth-input--tight { margin-bottom: 14px; }
.auth-input--pair { margin-bottom: 12px; }
.auth-input--center { text-align: center; }
.auth-input--code { text-align: center; letter-spacing: .4em; font-weight: 600; }

.auth-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.auth-remember { gap: 8px; padding: 0; font-size: 13px; color: var(--text-2); }
.auth-remember .checkbox__box i { font-size: 12px; }
.auth-link { font: 500 13px var(--font); color: var(--brand); }

.auth-submit { font-size: 16px; padding: 14px; white-space: normal; }
.auth-submit--gap { margin-bottom: 14px; }
.auth-dev { font: 400 12px var(--font); color: var(--warn); margin: -6px 0 14px; }
.auth-back { font: 500 14px var(--font); color: var(--brand); display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; cursor: pointer; }
.auth-back i { font-size: 14px; }
.auth-sent { gap: 9px; border-color: #CDEBD8; margin-bottom: 16px; text-align: left; }
.auth-foot { text-align: center; font: 400 14px var(--font); color: var(--text-2); margin: 20px 0 0; }
.auth-foot a { color: var(--brand); font-weight: 500; }

/* Social sign-in */
.social-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.social-or > span:not(.social-or__text) { flex: 1; height: 1px; background: #EEE2E5; }
.social-or__text { font: 400 12px var(--font); color: var(--text-3); }
.social-list { display: flex; flex-direction: column; gap: 10px; }
.social-btn { width: 100%; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 600 14px var(--font); padding: 13px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.social-btn i { font-size: 17px; }
.social-btn--google i { color: #DB4437; }
.social-btn--facebook i { color: #1877F2; }
.social-btn--apple i { color: #111; }