/* ==========================================================================
   /Register - the account step (registrationAccountPageHtml(),
   RegistrationRenderFunctions.php; driven by Registration.js)

   Only what the kit lacks. The card, its fields, the password toggle, the
   join steps and the action bar are css/aca-forms.css's; the section head is
   css/public_site.css's. This sheet keeps the page compact, so the first field
   sits near the top of a phone, and lays out the quiet sign-in line and the
   three notices a 409 answer shows.
   ========================================================================== */

.reg-page .reg-section {
    padding-top: var(--aca-space-5);
}

.reg-account {
    max-width: 44rem;
    margin: 0 auto;
}

.reg-account .fh-section-head {
    margin-bottom: var(--aca-space-2);
}

.reg-account .fh-eyebrow,
.reg-account .fh-section-title {
    margin-bottom: var(--aca-space-1);
}

.reg-account .fh-section-title {
    line-height: 1.2;
}

.reg-account .fh-section-lead,
.reg-account__quiet,
.reg-closed__sign-in {
    line-height: 1.4;
}

.reg-account__quiet,
.reg-closed__sign-in {
    margin: 0 0 var(--aca-space-3);
    color: var(--aca-fg-muted);
}

.reg-account .aca-stepper {
    margin-bottom: var(--aca-space-3);
}

.reg-account__form > .aca-card {
    margin-bottom: var(--aca-space-3);
}

.reg-account__error {
    margin: 0 0 var(--aca-space-3);
}

/* --------------------------------------------------------------------------
   The 409 notices: a title line, an optional sentence, the buttons in a row
   that wraps on a phone, then the status line of the notice's own send.
   -------------------------------------------------------------------------- */

.reg-account__notice-title {
    margin: 0 0 var(--aca-space-1);
    font-weight: 700;
}

.reg-account__notice-text {
    margin: 0 0 var(--aca-space-2);
}

.reg-account__notice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aca-space-2);
    margin-top: var(--aca-space-2);
}

.reg-account__notice-status {
    margin: var(--aca-space-2) 0 0;
    font-weight: 600;
}

/* A tablet or a phone shows the join steps as one pill: it shares the eyebrow's
   line, so the first field starts near the top of a phone. */
@media (max-width: 991px) {
    .reg-page .reg-section {
        padding-top: var(--aca-space-2);
    }

    .reg-account {
        position: relative;
    }

    .reg-account > .aca-stepper {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
    }

    .reg-account .fh-eyebrow {
        display: flex;
        align-items: center;
        min-height: 2rem;
        padding-right: 10.5rem;
    }

    .reg-account__notice-actions .btn {
        min-height: 44px;
    }
}

@media (max-width: 576px) {
    .reg-account__notice-actions .btn {
        flex: 1 1 100%;
    }
}