/**
 * HAC Explainer — Overlay Structure
 *
 * Backdrop, shell positioning, z-index hierarchy, close button.
 *
 * z-index plan (Phase 0 audit Decision 2):
 *   page content       0–10
 *   slideshow normal   9900
 *   drawer overlay     100000
 *   drawer panel       100001
 *   EXPLAINER BACKDROP 500000  <-- this file
 *   EXPLAINER SHELL    500001
 *   explainer deepdive 500010  (later phase)
 *   explainer threshold 500020 (later phase, v1.5 cinematic)
 *   modal overlay      999990
 */

/* ---------------------------------------------------------------------------
 * Root container — full-viewport positioned, no visual style of its own
 * ------------------------------------------------------------------------- */

.hac-explainer-root {
    position:  fixed;
    inset:     0;
    z-index:   500000;
    isolation: isolate;
    /* No pointer-events override here; the backdrop and shell each own
       their own click behavior. */
}

/* ---------------------------------------------------------------------------
 * Backdrop — sits beneath the shell, darkens the configurator further than
 * the body-class filter alone, and intercepts clicks outside the shell.
 * ------------------------------------------------------------------------- */

.hac-explainer-backdrop {
    position:     absolute;
    inset:        0;
    background:   rgba( 8, 8, 12, 0.55 );
    /* The backdrop fades in along with the shell via opacity transition
       on the root state classes (see explainer-atmosphere.css). */
    z-index:      500000;
}

/* ---------------------------------------------------------------------------
 * Shell mount — wrapper that holds the narrative shell. Centered on viewport.
 * ------------------------------------------------------------------------- */

.hac-explainer-shell-mount {
    position:        absolute;
    inset:           0;
    z-index:         500001;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         clamp( 1rem, 4vw, 3rem );
    pointer-events:  none;   /* clicks pass through to backdrop unless on shell */
}

/* ---------------------------------------------------------------------------
 * Shell — the actual visible card containing narrative + nav.
 * Re-enables pointer events for itself.
 * ------------------------------------------------------------------------- */

.hac-explainer-shell {
    position:       relative;
    pointer-events: auto;
    /* Truly fixed size — never changes between slides regardless of content.
       Width: narrower of 90vw or 1400px.
       Height: fixed at 82vh so the shell stays anchored and nav buttons
       never move. Internal regions scroll if content overflows. */
    width:          min( 90vw, 1400px );
    height:         82vh;
    max-height:     82vh;
    background:     #1c1c20;
    color:          #e8e6df;
    border-radius:  8px;
    border:         1px solid rgba( 255, 220, 140, 0.12 );
    box-shadow:     0 24px 64px rgba( 0, 0, 0, 0.6 );
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
}

/* ---------------------------------------------------------------------------
 * Close button — top-right, persistent
 * ------------------------------------------------------------------------- */

.hac-explainer-close {
    position:         absolute;
    top:              0.5rem;
    right:            0.5rem;
    z-index:          2;
    width:            2.25rem;
    height:           2.25rem;
    padding:          0;
    border:           none;
    background:       transparent;
    color:            #c8c4b8;
    cursor:           pointer;
    border-radius:    4px;
    box-shadow:       none;
    -webkit-appearance: none;
    appearance:       none;
    transition:       background-color 150ms ease, color 150ms ease;
}

.hac-explainer-close svg {
    position:  absolute;
    top:       50%;
    left:      50%;
    transform: translate( -50%, -50% );
    display:   block;
}

.hac-explainer-shell .hac-explainer-close:hover,
.hac-explainer-shell .hac-explainer-close:focus,
.hac-explainer-shell .hac-explainer-close:focus-visible {
    background: rgba( 255, 220, 140, 0.08 );
    color:      #f4efe1;
    outline:    none;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
 * Shell type classes — layout identity only, no size changes.
 * The shell is a fixed size (set above). These classes exist for CSS
 * targeting of internal layout variants; they do not resize the shell.
 * ------------------------------------------------------------------------- */

/* No size overrides — intentionally empty. Type-specific layout is handled
   by the content area (.hac-explainer-type-a/b/c/d/e) inside the shell. */

/* ---------------------------------------------------------------------------
 * Mobile — full-bleed
 * Matches the existing configurator's < 768px breakpoint convention.
 * ------------------------------------------------------------------------- */

@media ( max-width: 900px ) {
    /* Mount: hidden — shell positions itself directly */
    .hac-explainer-shell-mount {
        padding: 0;
    }

    /* Shell: position fixed with inset: 0 — this is the ONLY reliably
       correct way to fill the visible viewport on real mobile devices.
       Fixed + inset: 0 always matches exactly what the user sees,
       regardless of browser chrome, address bar state, or vh unit bugs. */
    .hac-explainer-shell,
    .hac-explainer-shell--type-a,
    .hac-explainer-shell--type-b,
    .hac-explainer-shell--type-c,
    .hac-explainer-shell--type-d,
    .hac-explainer-shell--type-e {
        position:      fixed         !important;
        inset:         0             !important;
        width:         100%          !important;
        height:        100%          !important;
        max-width:     none          !important;
        max-height:    none          !important;
        min-height:    0             !important;
        border-radius: 0             !important;
        border:        none          !important;
        overflow:      hidden        !important;
        transition:    none          !important;
        z-index:       500001        !important;
    }

    /* Slide region: fills remaining height, scrolls internally */
    .hac-explainer-slide {
        flex:       1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Nav: always at the bottom of the flex column, never scrolls away */
    .hac-explainer-nav {
        flex:       0 0 auto;
        position:   relative;
        z-index:    10;
        background: #1c1c20;
    }
}