/*
 * Chrome styles for the Pager Health welcome-screen layout (_WelcomeLayoutPagerHealth.cshtml).
 *
 * Loaded as a static stylesheet so the page chrome renders correctly even
 * before the Vite bundle (client/dist/style.css) is fetched. Widget styles
 * (.pg-login, .pg-field, .pg-btn) live in the bundle.
 *
 * Inter font is loaded by the Vite bundle's CSS. Until that loads, the
 * font stack falls back to system fonts.
 */

html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body.pg-page__body {
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    font-family: 'Inter', 'Helvetica Neue LT', 'Helvetica', 'Arial', sans-serif;
    color: #10151A;
}

.pg-page {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    background-color: #FFFFFF;
    background-image: url('/Images/login-background.svg');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    overflow: hidden;
}

.pg-page__rail {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 3rem 4rem;
    box-sizing: border-box;
}

.pg-page__tagline {
    margin: auto 0;
    max-width: 32rem;
}

.pg-page__tagline-heading {
    margin: 0 0 1rem 0;
    font-family: 'InterDisplay', 'Inter', sans-serif;
    font-size: clamp(2.5rem, 4.5vw, 3.5rem);
    font-weight: 300;
    line-height: 1.1;
    color: #10151A;
    letter-spacing: -0.01em;
}

.pg-page__tagline-accent {
    color: #360057;
    font-weight: 600;
}

.pg-page__tagline-sub {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    color: #525961;
}

.pg-page__ncqa {
    align-self: flex-start;
    margin-top: auto;
    display: inline-block;
}

.pg-page__ncqa img {
    height: 4.5rem;
    width: auto;
    display: block;
}

.pg-page__main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 4rem 2rem 2rem;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .pg-page {
        grid-template-columns: 1fr;
    }

    .pg-page__rail {
        padding: 1.5rem;
    }

    .pg-page__ncqa {
        margin-top: 2rem;
    }

    .pg-page__main {
        padding: 1rem;
    }
}

/*
 * Legacy panel toggle behavior — Home.js's panel-swap logic
 * (showPanel/hidePanel) toggles visibility for forgot-password /
 * registration / TOS / privacy / contact modals. The new login widget
 * lives inside #box-login; other panels keep their old chrome until
 * they're redesigned in subsequent tickets.
 */
#box-container {
    width: 100%;
    max-width: 32rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: stretch;
}

/*
 * Widen the container to the welcome-card design target (574px) only while
 * the new login widget is the active panel. Home.js's panel-swap uses
 * jQuery .hide(), which sets `style="display: none"` on #box-login when any
 * legacy panel (contact, privacy, ToS, registration, forgot-password) is
 * shown — the :has() selector flips off in that state and the container
 * reverts to 32rem so legacy panels keep their original rendered width.
 */
#box-container:has(> #box-login:not([style*="display: none"]):not([style*="display:none"])) {
    max-width: 574px;
}

#box-container > div {
    display: none;
    width: 100%;
}

#box-container > #box-login {
    display: flex;
    width: 100%;
}

#pg-login-host,
#pg-forgot-username-host {
    width: 100%;
    display: flex;
}

/*
 * Register and password-reset live directly inside .pg-page__main with no
 * #box-container wrapper — those pages never panel-swap, so they don't need
 * the legacy container chrome. Width + max-width applied to the host directly
 * mirrors the constraint #box-container imposes on the login/forgot-username
 * hosts so all welcome-screen cards render at the same width.
 */
#pg-register-host,
#pg-update-password-host {
    width: 100%;
    max-width: 574px;
}