/* Environment banner — admin (IMP-0199 feature, reworked under IMP-0424 / Audit #1231).
 *
 * Loaded from _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 admin.css anchors to the viewport top, and they cannot reach the live
 * site because the <link> that pulls them in is not emitted there. admin.css itself is
 * untouched.
 *
 * BUG-1036: the banner used to be a sticky z-index:9999 strip with no height contract, so
 * .admin-sidebar (fixed, 100vh) ran past the viewport bottom and .admin-header disappeared
 * underneath the banner on scroll. The fix is a KNOWN height published as --env-banner-h
 * and consumed by everything anchored to y=0. The height must stay exact, hence the single
 * line + overflow:hidden — a banner that wraps silently invalidates every offset below.
 *
 * Loaded after admin.css (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 (sidebar/header 100) and below modals and overlays (1000+). */
    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: var(--env-banner-bg);
    color: var(--text-primary);
    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: var(--text-primary);
    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: var(--text-primary);
    line-height: 1;
    cursor: pointer;
    opacity: 0.8;
}

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

.env-banner__close:hover { opacity: 1; background: var(--tint-text-primary-150); }
.env-banner__close:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 1px; }

/* Narrow windows: drop the secondary sentence rather than let it wrap or truncate. */
@media (max-width: 700px) {
    :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).
   --------------------------------------------------------------------------- */

/* admin.css:37 — fixed with no `top`, so its static position already clears the banner;
   only the height was wrong, by exactly the banner height. Pinned explicitly all the same
   so the two numbers cannot drift apart. */
.admin-sidebar {
    top: var(--env-banner-h);
    height: calc(100dvh - var(--env-banner-h));
}

/* admin.css:136 — sticky at top:0, so on scroll it slid under the banner. */
.admin-header { top: var(--env-banner-h); }