/* ==========================================================================
   Shared shell for the app pages that also have a logged-out view
   (/resumes, /roadmap).

   Two independent pieces, applied via body classes:

     .qg-space-page  Home-page space animation as the page backdrop, behind
                     every panel and the nav. Used signed in and out.
     .qg-public      Logged-out layout: fixed public top nav, no app sidebar.

   Load AFTER the page stylesheet (it overrides the light app canvas) and
   BEFORE public_top_nav.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Space backdrop
   -------------------------------------------------------------------------- */

/* space_animation.js paints white stars, orbit rings and planets onto
   #spaceCanvas. It needs the flat QG blue underneath that the home hero uses,
   and it falls back to viewport sizing when no .hero element is present. */
body.qg-space-page {
    background: #004aad;
}

.qg-space-page .animated-background {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.qg-space-page #spaceCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Everything the page renders sits above the canvas. */
.qg-space-page .qg-public-shell,
.qg-space-page .desktop-container,
.qg-space-page .mobile-container {
    position: relative;
    z-index: 1;
}

/* Let the animation show through the app chrome instead of the usual
   light-grey app canvas. */
.qg-space-page .main-content,
.qg-space-page .mobile-content,
.qg-space-page .desktop-container,
.qg-space-page .mobile-container {
    background: transparent !important;
}

/* The sidebar is the same QG blue as the backdrop, so give it an edge. */
.qg-space-page .sidebar {
    border-right: 1px solid rgba(255, 255, 255, 0.16);
}

/* The backdrop is already dark, so it carries over to dark mode unchanged;
   only the theme's own body override needs beating. */
html[data-theme='dark'] body.qg-space-page {
    background: #00306e !important;
}

@media (max-width: 768px) {
    /* dashboard_mobile.css forces the light app canvas onto body below 768px. */
    body.qg-space-page {
        background: #004aad !important;
    }

    html[data-theme='dark'] body.qg-space-page {
        background: #00306e !important;
    }
}

/* --------------------------------------------------------------------------
   2. Logged-out shell — public top nav instead of the app sidebar
   -------------------------------------------------------------------------- */

body.qg-public {
    display: block;
    padding-top: var(--qg-topnav-offset);
    scroll-padding-top: calc(var(--qg-topnav-offset) + 12px);
}

body.qg-public [id] {
    scroll-margin-top: calc(var(--qg-topnav-offset) + 12px);
}

/* The nav's section links are plain in-page anchors, so glide to them rather
   than snapping. Targets html because that's the scrolling element; safe to
   leave unscoped since this sheet only loads on these pages. */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Deliberately not .desktop-container: that wrapper is hidden below 768px by
   dashboard_mobile.css, and the public view has no separate mobile layout. */
.qg-public-shell {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.qg-public-shell > .main-content {
    margin-left: 0;
    width: 100%;
}

/* --------------------------------------------------------------------------
   3. Public panels on small screens

   The public views render the .roadmap-desktop panel at every width, so they
   need the small-screen treatment that roadmap.css and learning_hub_brand.css
   reserve for the separate .roadmap-mobile panel.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    /* roadmap.css hides .roadmap-desktop outright below 768px because the
       logged-in page ships a dedicated mobile panel. The public views don't —
       they're a single responsive panel — so keep it on screen. */
    body.qg-public .roadmap-desktop.roadmap-panel {
        display: block !important;
        border-radius: 18px;
    }

    body.qg-public .roadmap-desktop .rm-hero {
        padding: 1.55rem 1.2rem 4.4rem;
        border-radius: 18px 18px 0 0;
    }

    body.qg-public .roadmap-desktop .rm-hero__title {
        font-size: 1.45rem;
        line-height: 1.2;
    }

    body.qg-public .roadmap-desktop .rm-hero__lead {
        font-size: 0.92rem;
    }

    /* Three stats only stay on one line at phone widths once they're shrunk to
       the sizes the .roadmap-mobile panel uses. */
    body.qg-public .roadmap-desktop .rm-hero__stats {
        gap: 1.1rem;
        margin-top: 1.15rem;
    }

    body.qg-public .roadmap-desktop .rm-hero__stat-num {
        font-size: 1.45rem;
    }

    body.qg-public .roadmap-desktop .rm-hero__stat-label {
        font-size: 0.65rem;
    }

    body.qg-public .roadmap-desktop .rm-hero__stat-div {
        height: 28px;
    }

    body.qg-public .roadmap-desktop .rm-body {
        gap: 1.7rem;
        padding: 0 1rem 1.85rem;
    }

    body.qg-public .roadmap-desktop .roadmap-video-embed {
        margin: -3.4rem auto 0;
    }

    /* styles.css reserves a 100px gutter here for the collapsed app sidebar
       (body:not(.has-mobile-layout) .main-content). There's no sidebar in the
       public shell, so reclaim the width. */
    body.qg-public .qg-public-shell > .main-content {
        margin-left: 0;
        width: 100%;
        padding: 1.25rem 1rem 2.5rem;
    }
}