/* =====================================================================
   Account pages — what they add to the login page
   (AccountTmpl.php: the code that confirms the email, and the three steps
   of a forgotten password)

   Load after socialauth.css (your signup.css), socialauth.rtl.css for
   Hebrew, and login.css. The pages carry the login page's class (sa-login)
   as well as their own (sa-account), so the title, fields, button and the
   line under it are the login page's, from Frame.svg. Only what the login
   page does not have lives here: the explanation under the title, the
   address the letter went to, "Send it again" and its notice, and the
   server's answer above the button.

   Nothing here uses left/right, so Hebrew needs no rules of its own.
   ===================================================================== */

/* -------------------------------------------------- title and explanation */

/* On the login page the title's bottom margin is the gap to the buttons.
   Here the explanation follows it, so the title moves closer and the
   explanation takes over the gap to the form. */
.sa-account .sa-title {
    margin-bottom: 12px;
}

.sa-account .sa-intro {
    margin: 0 0 32px;
    font-size: 16px;
    line-height: 24px;
    color: var(--sa-muted);
}

/* "email address" in the reset explanation */
.sa-account .sa-intro span {
    color: var(--sa-text);
    font-weight: 500;
}

/* "Edit Email Address" in the code page's explanation */
.sa-account .sa-intro a {
    color: var(--sa-brand);
    font-weight: 500;
    letter-spacing: 0.016em;
    text-decoration: none;
}

.sa-account .sa-intro a:hover {
    text-decoration: underline;
}

.sa-account .sa-intro a:focus-visible {
    outline: 2px solid var(--sa-brand);
    outline-offset: 2px;
}

/* ------------------------------------------- the address the letter went to */

.sa-account .sa-sent-to {
    margin: -16px 0 32px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--sa-text);
    /* A long address breaks anywhere rather than widening the column. */
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------- under the button */

.sa-account .sa-alt {
    margin-top: 24px;
}

/* "Send it again" — a link that works like a button */
.sa-account [data-sa-resend] a {
    cursor: pointer;
}

/* Resting after a letter went out, so the next one is not asked for at once */
.sa-account [data-sa-resend] a.is-disabled {
    color: var(--sa-muted);
    cursor: default;
    pointer-events: none;
    text-decoration: none;
}

.sa-account [data-sa-resend] .fa-spinner {
    margin-inline-start: 6px;
}

/* Its notice, right under it */
.sa-account .sa-message {
    margin: 16px 0 0;
}

/* --------------------------------------- the server's answer above the button */

/* The last field's own margin is the gap to the button; the answer takes
   the lower part of it. */
.sa-account .sa-form-error .sa-error-text {
    margin: -12px 0 16px;
}

/* ==================================================================
   768px and up — the title is centred, and what belongs to it follows
   ================================================================== */

@media (min-width: 768px) {

    .sa-account .sa-title {
        margin-bottom: 16px;
    }

    .sa-account .sa-intro,
    .sa-account .sa-sent-to {
        text-align: center;
    }
}

/* ==================================================================
   1024px and up
   ================================================================== */

@media (min-width: 1024px) {

    .sa-account .sa-intro {
        margin-bottom: 40px;
    }

    .sa-account .sa-sent-to {
        margin: -24px 0 40px;
    }
}