/* ===================================================================
   Passwordless sign-in.

   The form itself borrows the host page's own field and button classes
   (see gfi_auth_render_login_form), so the only thing this sheet owns
   is what the four login pages did not already have: the result line
   and the explanatory note under the button.
   =================================================================== */

.gfi-auth__message {
    margin: var(--gfi-space-2) 0 0 !important;
    padding: var(--gfi-space-1) var(--gfi-space-2) !important;
    border-radius: 8px;
    font-family: var(--gfi-font-body, Inter, sans-serif) !important;
    font-size: var(--gfi-font-body-s) !important;
    font-weight: var(--gfi-fw-medium) !important;
    line-height: var(--gfi-lh-body-s) !important;
    text-align: center !important;
}

.gfi-auth__message[hidden] {
    display: none !important;
}

.gfi-auth__message.is-error {
    background: #fdf1f1;
    color: var(--gfi-color-error) !important;
}

.gfi-auth__message.is-success {
    background: var(--gfi-color-surface-accent);
    color: var(--gfi-color-accent-600) !important;
}

/* Offered next to "we could not find an account": a button rather than a
   link, because it opens the signup dialog in place instead of navigating. */
.gfi-auth__signup-link {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: inherit !important;
    font: inherit !important;
    text-decoration: underline;
    cursor: pointer;
}

.gfi-auth__note {
    margin: var(--gfi-space-2) 0 0 !important;
    font-family: var(--gfi-font-body, Inter, sans-serif) !important;
    font-size: var(--gfi-font-caption) !important;
    font-weight: var(--gfi-fw-regular) !important;
    line-height: var(--gfi-lh-body-s) !important;
    color: var(--gfi-color-text-soft) !important;
    text-align: center !important;
}

/* Once the link is out, the button is still usable - a visitor who mistyped
   and corrected the address needs to be able to ask again - but it stops
   being the loudest thing on the card. */
.gfi-auth.is-sent [data-gfi-auth-send] {
    opacity: 0.75;
}

[data-gfi-auth-send].is-loading {
    opacity: 0.6;
    pointer-events: none;
}