/* Environment banner — creator (IMP-0199 feature, reworked under IMP-0424 / Audit #1231).
 *
 * Loaded from partials/env_banner_head.html, which renders ONLY when environment_banner is
 * set, i.e. never on production. That is the whole safety story for this file: the offsets
 * below re-point chrome that base.css anchors to the viewport top, and they cannot reach
 * the live site because the <link> that pulls them in is not emitted there. Nothing in
 * base.css / root.css / mobile.css had to be edited to make room.
 *
 * BUG-1036: the banner used to be a sticky z-index:9999 strip with no height contract. It
 * pushed .cr-sidebar down while leaving its height at 100vh, so the sidebar ran past the
 * viewport bottom and overflow:hidden clipped its account footer. The fix is a KNOWN height
 * published as --env-banner-h and consumed by everything anchored to y=0 or sized to the
 * full viewport. The height must stay exact, hence the single line + overflow:hidden — a
 * banner that wraps silently invalidates every offset below.
 *
 * Loaded after the app stylesheets (and after {% block extra_css %}), so these single-class
 * selectors win on order without needing extra specificity or !important.
 */

:root { --env-banner-h: 34px; }

/* Hidden state, set on <html> before first paint by env-banner.js. Zeroing the variable
   is what makes a dismissed banner cost nothing: every offset below collapses with it. */
html.env-banner-hidden { --env-banner-h: 0px; }
html.env-banner-hidden .env-banner { display: none; }

.env-banner {
    position: sticky;
    top: 0;
    /* Above page chrome (100) and below drawers/modals (1000+), which are meant to cover it. */
    z-index: 150;
    height: var(--env-banner-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    /* Symmetric so the message stays optically centred despite the absolute close button. */
    padding-inline: 2.25rem;
    background: #7c2d12;
    color: #fff;
    font: 600 13px/1 system-ui, sans-serif;
    white-space: nowrap;
    overflow: hidden;
}

.env-banner__detail {
    font-weight: 400;
    opacity: 0.85;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.env-banner__link {
    color: #fff;
    text-decoration: underline;
    flex: 0 0 auto;
}

.env-banner__close {
    position: absolute;
    inset-inline-end: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: #fff;
    line-height: var(--st-leading-icon);
    cursor: pointer;
    opacity: 0.8;
}

.env-banner__close::before {
    content: "\00d7";
    font-size: 18px;
}

.env-banner__close:hover { opacity: 1; background: rgba(255, 255, 255, 0.15); }
.env-banner__close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* Phones: drop the secondary sentence rather than let it wrap or truncate the label. */
@media (max-width: 767px) {
    :root { --env-banner-h: 30px; }
    .env-banner { gap: 0.5rem; font-size: 12px; }
    .env-banner__detail { display: none; }
}

@media print { .env-banner { display: none; } }

/* ---------------------------------------------------------------------------
   Chrome offsets (BUG-1036).
   --------------------------------------------------------------------------- */

/* base.css:14 — .cr-sidebar is sticky at top:0 and sized to the full viewport. Scoped to
   the desktop breakpoint: below 768px mobile.css:29 turns it into a fixed drawer at
   z-index 1100 that is *meant* to cover everything, banner included. */
@media (min-width: 768px) {
    .cr-sidebar {
        top: var(--env-banner-h);
        height: calc(100dvh - var(--env-banner-h));
    }
}

/* story_studio_context.css:7 (also base.css:623) — the studio context header is a
   page-level sticky bar; without this it slides under the banner on scroll. */
.ss-context-header { top: var(--env-banner-h); }