/*
 * Playground first-load shell.
 *
 * Reserves the final layout dimensions at first paint so React mounts into
 * already-sized space instead of materializing a 2200px subtree out of nothing.
 *
 * The shell is absolute-positioned inside #playground-container and sits
 * behind the React tree. After React mounts, the <body>.playground-mounted
 * class hides the shell (display: none).
 *
 * SSR-forward-compatible: pure CSS, no React or web-component dependencies.
 * A future Lit-SSR renderer can include this file verbatim.
 */

/*
 * Region heights are CONTENT-driven, not viewport-driven.
 *
 * The panel heights reflect what React actually renders once mounted:
 *  - cold:     near-empty panel (no service yet) → ~80px
 *  - non-cold: editor + preview split view with content → ~1050px
 *
 * Earlier iterations derived panel height from `100vh - sum`, which worked on
 * tall viewports but catastrophically under-reserved on short ones (e.g. a
 * 720px laptop viewport). Content size does not track viewport size, so the
 * shell must not either. See the design doc and the plan for calibration
 * notes.
 */
:root {
    --playground-shell-hero-height: 140px;
    --playground-shell-sample-filter-height: 220px;
    --playground-shell-prompt-bar-height: 260px;
    --playground-shell-tabs-height: 52px;
    --playground-shell-panel-height: 1050px;
    --playground-shell-panel-height-cold: 80px;
}

.playground-shell {
    position: absolute;
    inset: 0;
    /* Shell sits above React during the brief mount-overlap window — never swallow clicks */
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    box-sizing: border-box;
    background: transparent;
}

.playground-shell__hero {
    min-height: var(--playground-shell-hero-height);
    flex: 0 0 auto;
}

.playground-shell__sample-filter {
    min-height: var(--playground-shell-sample-filter-height);
    flex: 0 0 auto;
    display: none;
}

.playground-shell__prompt-bar {
    min-height: var(--playground-shell-prompt-bar-height);
    flex: 0 0 auto;
}

.playground-shell__tabs {
    min-height: var(--playground-shell-tabs-height);
    flex: 0 0 auto;
}

.playground-shell__panel {
    min-height: var(--playground-shell-panel-height);
    flex: 1 1 auto;
}

/* State-aware region: only cold visits reserve space for the sample filter */
html.playground-shell--cold .playground-shell__sample-filter {
    display: block;
}

html.playground-shell--cold .playground-shell__panel {
    min-height: var(--playground-shell-panel-height-cold);
}

/* Mobile: stretch naturally to viewport height, no per-region reservation */
@media (max-width: 1023px) {
    .playground-shell {
        min-height: 100vh;
    }
    .playground-shell__hero,
    .playground-shell__sample-filter,
    .playground-shell__prompt-bar,
    .playground-shell__tabs {
        min-height: 0;
        flex: 0 0 auto;
    }
    .playground-shell__panel {
        min-height: 0;
        flex: 1 1 auto;
    }
}

/* Hide the shell once React has mounted its first commit */
body.playground-mounted .playground-shell {
    display: none;
}

/*
 * Prevent Flash of Unstyled Content (FOUC).
 *
 * The custom element's shadow DOM adopts 25 stylesheets when the element
 * upgrades. There is a small window between "shadow root contains content"
 * and "adopted stylesheets have applied", during which the content is
 * visible but unstyled. The shell reserves layout space for this window,
 * but on its own it cannot COVER the unstyled content — it sits beside
 * the host, not on top of it.
 *
 * Hiding the host until body.playground-mounted is set guarantees that the
 * first frame the user sees of the host is the fully-styled, React-mounted
 * one. The useEffect in ServiceDefinitionPlayground.tsx adds the class in
 * React's first commit cleanup phase, at which point stylesheets have
 * already been adopted.
 *
 * Uses visibility (not display: none) to preserve layout flow while hidden.
 */
body:not(.playground-mounted) cds-cpq-service-definition-playground {
    visibility: hidden;
}

/*
 * Container rules scoped to the shell-visible phase only.
 * After React mounts and body.playground-mounted is set, these rules no longer
 * apply, so the React subtree is free to size the container naturally.
 *
 * - position: relative establishes the absolute-positioning context for .playground-shell
 * - min-height reserves body height before React mounts. Value is the sum of
 *   non-cold shell regions (hero + prompt-bar + tabs + panel) plus shell padding,
 *   so the container is large enough to hold the biggest shell variant. Cold
 *   shell is shorter and will leave unused space below, which is fine — we only
 *   care about preventing the body from growing when React mounts.
 */
body:not(.playground-mounted) #playground-container {
    position: relative;
    min-height: calc(
        var(--playground-shell-hero-height) + var(--playground-shell-prompt-bar-height) +
            var(--playground-shell-tabs-height) + var(--playground-shell-panel-height) + 48px
    );
}