/* =============================================
   Signing in: the login (installer_login.html),
   the two-factor step (login_verify.html) and
   where its email's link lands when it can't
   sign in (login_link.html), Reset Password's
   steps (password/password_reset.html) and
   where the email verification link lands
   (account/verify_email.html), and where an
   invite's link lands (invites/accept_invite.
   html). One panel, the
   sign-in card, in the middle of the page; its
   fields are forms.css's.
   ============================================= */

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 230px);
    padding: 40px 16px 56px;
}

.auth-card {
    width: 100%;
    max-width: 440px;
}

.auth-card__head {
    padding: 26px 28px 0;
}

/* !important: styles.css sets every h1's size, !important, on phones */
.auth-card__title {
    margin: 0;
    color: var(--in-accent);
    font-size: 1.75rem !important;
    font-weight: 600;
    line-height: 1.2;
}

.auth-card__lead {
    margin: 8px 0 0;
    color: var(--in-text-2);
    font-size: 0.9rem;
    line-height: 1.5;
}

.auth-card__body {
    padding: 20px 28px 26px;
}

/* styles.css takes alerts' margin away */
.auth-card .alert {
    margin-bottom: 14px;
}

.auth-card__foot {
    padding: 14px 28px;
    border-top: 1px solid var(--in-border-soft);
    background-color: var(--in-sheet-2);
    color: var(--in-text-muted);
    font-size: 0.86rem;
    text-align: center;
}

.auth-card__foot p {
    margin: 0;
}

/* A field's label with a link at its right: the password's Forgot password? */
.auth-card__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.auth-card__label-row .field__label {
    margin-bottom: 5px;
}

.auth-card__link {
    font-size: 0.8rem;
    font-weight: 600;
}

.auth-card__submit {
    margin-top: 6px;
}

/* A step's outcome: an icon over a line or two, and where to go next */
.auth-card--result .auth-card__head,
.auth-card__body--result {
    text-align: center;
}

.auth-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 50%;
    background-color: var(--in-amber-wash);
    color: var(--in-amber-text);
    font-size: 1.6rem;
}

.auth-result--done {
    background-color: var(--in-complete-wash);
    color: var(--in-complete);
}

.auth-result--sent {
    background-color: var(--in-accent-wash);
    color: var(--in-accent);
}

.auth-card__message {
    margin: 0 0 10px;
    color: var(--in-text);
    font-size: 0.92rem;
    line-height: 1.5;
}

.auth-card__strong {
    margin: 0 0 8px;
    color: var(--in-text);
    font-size: 1rem;
    font-weight: 600;
}

.auth-card__note {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background-color: var(--in-sheet);
    color: var(--in-text-muted);
    font-size: 0.84rem;
}

.auth-card__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

/* The two-factor code: larger, spaced, centred */
.field .auth-code {
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.1rem;
    letter-spacing: 0.2em;
    text-align: center;
}

.auth-resend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 16px 0 0;
    color: var(--in-text-muted);
    font-size: 0.86rem;
}

@media (max-width: 480px) {
    .auth-page {
        align-items: flex-start;
        padding: 20px 12px 40px;
    }

    .auth-card__head {
        padding: 22px 20px 0;
    }

    .auth-card__body {
        padding: 18px 20px 22px;
    }

    .auth-card__foot {
        padding: 12px 20px;
    }
}