/* ===================================================================
   Unified passwordless signup - the parts added on top of the dialog.

   The dialog shell, backdrop, title, sub, goal grid and Next button are
   styled in site-navbar.css, where they were authored against the Figma
   frame; this sheet loads after it and adds only what the passwordless
   flow introduced: the step wrapper, the email row, the confirmation
   step and the error row.

   Everything here reuses the tokens the dialog already uses, so the two
   steps that bracket the goal grid read as the same component rather
   than as a second style for the same kind of element.
   =================================================================== */

/* All five steps - signup email, goals, confirmation, sign-in email and
   sign-in confirmation - are stacked in a single grid cell rather than
   shown one after another, so the dialog is exactly the same size in
   every state. Laid out in flow, the card would grow when the goal grid
   appeared and collapse again on "Check your inbox", jumping twice during
   one signup, and it would be a different size again for sign-in.

   Stacking means the tallest step (the goal grid) sets the height once
   and the rest are measured inside it, so the card never moves. */
.gfi-signup-modal__steps {
    display: grid;
    width: 100%;
}

.gfi-signup-modal__step {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centred, not top-aligned: the two short steps would otherwise sit
       against the top of a card sized for the goal grid and read as a
       rendering fault rather than a deliberate size. */
    justify-content: center;
    width: 100%;
}

/* visibility, not display:none - a step removed from layout would stop
   contributing its height and the stack would collapse to whichever
   step happens to be showing, which is the behaviour this replaces.
   visibility:hidden keeps the box, and still takes the element out of
   the tab order and out of the accessibility tree. */
.gfi-signup-modal__step[hidden] {
    display: flex;
    visibility: hidden;
    pointer-events: none;
}

/* There is deliberately no exception to the rule above for sign-in.

   An earlier version took the inactive mode's steps out of the layout, so
   sign-in sized itself to its own two short steps instead of to the goal
   grid. That made the dialog change size depending on which control you
   had pressed to open it - one card for signing up, a different one for
   signing in - which is the inconsistency the stacking was introduced to
   remove in the first place.

   All five steps stay in the stack. The goal grid is the tallest, so it
   sets the height once, and every state of the dialog - both signup steps,
   the confirmation, and both sign-in steps - is the same card. Content is
   centred inside it, so a short step reads as deliberate rather than as a
   card that failed to fill. */

/* Switches between the two modes, inside the legal/footer line.

   An anchor, not a button, so it inherits .gfi-signup-modal__legal a and
   carries no button chrome - no background box, no border, and no focus
   outline drawn around a control-shaped box. It reads as part of the
   sentence, which is what it is.

   The focus ring is kept, because a control a keyboard user can reach has
   to show where it is; it is just drawn tight around the text now, which
   is what an inline link should look like. */
.gfi-signup-modal__switch {
    font-weight: var(--gfi-fw-medium);
    cursor: pointer;
}

.gfi-signup-modal__switch:focus-visible {
    outline: 2px solid var(--gfi-color-focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ------------------------------------------------------------- email step */

/* The mint pill from the design: one rounded field with the submit button
   sitting inside its right edge. Built as a flex row rather than absolute
   positioning so the button keeps its intrinsic width in every language. */
.gfi-signup-modal__emailrow {
    display: flex;
    align-items: center;
    gap: var(--gfi-space-1);
    width: 100%;
    max-width: 480px;
    padding: var(--gfi-space-1);
    border: 1px solid var(--gfi-color-primary-100);
    border-radius: 8px;
    background: var(--gfi-color-surface-accent);
}

.gfi-signup-modal__emailrow:focus-within {
    border-color: var(--gfi-color-brand);
    box-shadow: 0 0 0 3px var(--gfi-color-focus-ring-soft);
}

.gfi-signup-modal__email {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--gfi-space-5);
    padding: 0 var(--gfi-space-2);
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: var(--gfi-font-body, Inter, sans-serif);
    font-size: var(--gfi-font-input-text);
    line-height: var(--gfi-lh-body-m);
    color: var(--gfi-color-text);
}

.gfi-signup-modal__email::placeholder {
    color: var(--gfi-color-text-soft);
    opacity: 1;
}

/* The dialog's Next button is the template for this one, minus the icon
   slot and at the smaller button size the inline pill calls for. */
.gfi-signup-modal__join {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--gfi-space-5);
    padding: 0 var(--gfi-space-3) !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: var(--gfi-color-cta-bg) !important;
    color: var(--gfi-color-cta-fg) !important;
    font-family: var(--gfi-font-body, Inter, sans-serif) !important;
    font-size: var(--gfi-font-button-l) !important;
    font-weight: var(--gfi-fw-bold) !important;
    line-height: 1 !important;
    white-space: nowrap;
    cursor: pointer;
}

.gfi-signup-modal__join:hover,
.gfi-signup-modal__join:focus-visible {
    background: var(--gfi-color-cta-bg-hover) !important;
}

.gfi-signup-modal__join:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Subject is a <p>, which global.css claims with !important. */
.gfi-signup-modal__legal {
    margin: var(--gfi-space-3) 0 0 !important;
    font-family: var(--gfi-font-body, Inter, sans-serif) !important;
    font-size: var(--gfi-font-body-s) !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;
}

.gfi-signup-modal__legal a {
    color: var(--gfi-color-brand-accent);
    text-decoration: underline;
}

/* -------------------------------------------------------------- sent step */

.gfi-signup-modal__sent-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--gfi-space-7);
    height: var(--gfi-space-7);
    margin-bottom: var(--gfi-space-3);
    border-radius: 50%;
    background: var(--gfi-color-surface-accent);
    color: var(--gfi-color-brand-accent);
}

.gfi-signup-modal__resend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--gfi-space-5);
    padding: var(--gfi-space-1) var(--gfi-space-3) !important;
    border: 1px solid var(--gfi-color-brand) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--gfi-color-brand-accent) !important;
    font-family: var(--gfi-font-body, Inter, sans-serif) !important;
    font-size: var(--gfi-font-button-m) !important;
    font-weight: var(--gfi-fw-medium) !important;
    line-height: 1 !important;
    cursor: pointer;
}

.gfi-signup-modal__resend:hover,
.gfi-signup-modal__resend:focus-visible {
    background: var(--gfi-color-surface-accent) !important;
}

.gfi-signup-modal__resend:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ------------------------------------------------------------- error row */

.gfi-signup-modal__error {
    margin: var(--gfi-space-2) 0 0 !important;
    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;
    color: var(--gfi-color-error) !important;
    text-align: center !important;
}

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

.gfi-signup-modal__error a {
    color: var(--gfi-color-error);
    text-decoration: underline;
}

/* --------------------------------------------------------- busy indicator */

.gfi-signup-modal.is-busy .gfi-signup-modal__join,
.gfi-signup-modal.is-busy .gfi-signup-modal__next,
.gfi-signup-modal.is-busy .gfi-signup-modal__resend {
    opacity: 0.6;
    pointer-events: none;
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 767px) {
    .gfi-signup-modal__emailrow {
        flex-direction: column;
        align-items: stretch;
        gap: var(--gfi-space-1);
    }

    .gfi-signup-modal__email {
        background: var(--gfi-color-surface);
        text-align: center;
    }

    .gfi-signup-modal__join {
        width: 100%;
    }
}