/* WebinarHub 360 - centred account-access composition.
   Only loads on public access routes; no form markup or field overrides.
   Preserve the current FPD palette, fixed global header and footer-free layout. */
/* The older enterprise stylesheet sets body padding-top: 0 !important.
   Restore clearance for these routes, otherwise the fixed header obscures them. */
body.enterprise-ui.wh-v4.wh-auth-centered {
    padding-top: var(--hub-header-height, 76px) !important;
}

body.wh-v4.wh-auth-centered .app-shell:not(.has-sidebar) > main {
    min-height: calc(100vh - var(--hub-header-height, 76px));
    min-height: calc(100dvh - var(--hub-header-height, 76px));
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 3.5vw, 54px) 0;
}

/* The older styles force top-alignment and add extra vertical margins.
   The short journeys instead occupy their natural height and are centred. */
body.wh-v4.wh-auth-centered .app-shell:not(.has-sidebar) > main > :is(
    .fpd-signin, .auth-grid.wh4-signup
) {
    width: min(100%, 1320px) !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 0 clamp(16px, 3vw, 36px) !important;
    min-height: 0 !important;
    height: auto !important;
    align-content: center !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}

body.wh-v4.wh-auth-centered .fpd-signin:not(.hub-recovery) > :is(
    .fpd-signin__hero, .fpd-signin__workspace
),
body.wh-v4.wh-auth-centered .auth-grid.wh4-signup > :is(
    .auth-art.registration-context, .auth-form
) {
    align-self: stretch !important;
    min-height: 0 !important;
    height: auto !important;
}

/* The login composition retains both branded columns at matching heights. */
body.wh-v4.wh-auth-centered .fpd-signin:not(.hub-recovery) > .fpd-signin__workspace {
    display: flex !important;
    align-items: stretch !important;
}
body.wh-v4.wh-auth-centered .fpd-signin:not(.hub-recovery) .fpd-signin__card {
    height: auto !important;
    min-height: 100% !important;
}

/* Recovery and PIN pages: avoid a full-viewport panel plus a second
   margin/padding layer, which had pushed their visual centres downward. */
body.wh-v4.wh-auth-centered .hub-recovery.fpd-signin {
    min-height: 0 !important;
    max-width: 1320px !important;
    gap: clamp(18px, 2vw, 28px) !important;
}
body.wh-v4.wh-auth-centered .hub-recovery > .hub-recovery__hero {
    border-radius: 20px !important;
    border: 1px solid #dce9ed !important;
}
body.wh-v4.wh-auth-centered .hub-recovery > .hub-recovery__workspace {
    border-radius: 20px !important;
    border: 1px solid #dce9ed !important;
}
body.wh-v4.wh-auth-centered .hub-pin-layout.auth-grid {
    min-height: 0 !important;
}

/* Long account-creation and registration-option content is not clipped;
   the page grows and scrolls normally when it exceeds the viewport. */
@media (max-width: 900px) {
    body.wh-v4.wh-auth-centered .app-shell:not(.has-sidebar) > main {
        justify-content: flex-start;
        padding-block: 22px 32px;
    }
    body.wh-v4.wh-auth-centered .app-shell:not(.has-sidebar) > main > :is(
        .fpd-signin, .auth-grid.wh4-signup
    ) {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        padding-inline: clamp(12px, 3vw, 22px) !important;
    }
    body.wh-v4.wh-auth-centered .app-shell:not(.has-sidebar) > main > .hub-recovery.fpd-signin {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
}
@media (max-width: 520px) {
    body.wh-v4.wh-auth-centered .app-shell:not(.has-sidebar) > main {
        padding-block: 14px 26px;
    }
    body.wh-v4.wh-auth-centered .app-shell:not(.has-sidebar) > main > :is(
        .fpd-signin, .auth-grid.wh4-signup
    ) {
        padding-inline: 12px !important;
    }
}

/* On narrow screens the actual task comes before the informational panel.
   This prevents account forms from being pushed below the first viewport. */
@media (max-width: 900px) {
    body.wh-v4.wh-auth-centered .fpd-signin:not(.hub-recovery) > .fpd-signin__workspace,
    body.wh-v4.wh-auth-centered .auth-grid.wh4-signup > .auth-form {
        order: 1 !important;
        grid-row: auto !important;
    }
    body.wh-v4.wh-auth-centered .fpd-signin:not(.hub-recovery) > .fpd-signin__hero,
    body.wh-v4.wh-auth-centered .auth-grid.wh4-signup > .auth-art.registration-context {
        order: 2 !important;
        grid-row: auto !important;
        min-height: 0 !important;
    }
    body.wh-v4.wh-auth-centered .hub-recovery > .hub-recovery__workspace {
        grid-row: 1 !important;
        order: 1 !important;
    }
    body.wh-v4.wh-auth-centered .hub-recovery > .hub-recovery__hero {
        grid-row: 2 !important;
        order: 2 !important;
    }
}