/* ==========================================================================
   Forgotten password (/login/forgot/)
   Rides on /login/login.css: the same card, title, sub, error and row styles.
   Only what the reset request adds lives here.
   ========================================================================== */

.forgot .login__form {
    margin-top: var(--space-5, 20px);
}

.forgot__note {
    margin: var(--space-5, 20px) 0 0;
    font-size: var(--text-meta, 13px);
    line-height: var(--leading-normal, 1.5);
    color: var(--gray-500, #78716C);
}

/* The status line is always in the page so screen readers hear it change;
   empty, it takes no room. */
.forgot__note:empty {
    margin: 0;
}

.forgot__note a {
    color: var(--phase-learn-dark, #C73E3E);
}

/* Focused by script when the sent state opens, never by Tab (tabindex="-1"). */
.forgot [data-forgot-sent-title]:focus {
    outline: none;
}

.forgot__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-2xl, 48px);
    height: var(--icon-2xl, 48px);
    margin-bottom: var(--space-4, 16px);
    border-radius: var(--radius-full, 999px);
    background: var(--phase-learn-very-light, #FEF2F2);
    color: var(--phase-learn-dark, #C73E3E);
}

.forgot__icon svg {
    width: var(--icon-lg, 24px);
    height: var(--icon-lg, 24px);
}

/* The inline "send it again" is a ws_button so it keeps the button semantics,
   but it reads as a link in the sentence. */
.forgot__note .login__link.ws-btn {
    display: inline;
    height: auto;
    border: 0;
    background: none;
    box-shadow: none;
    font: inherit;
    font-weight: var(--font-semibold, 600);
    line-height: inherit;
    vertical-align: baseline;
}

.forgot__note .login__link.ws-btn[aria-disabled="true"] {
    opacity: 0.6;
    cursor: progress;
}