/* ==========================================================================
   Environment label — "Staging", on every page staging serves
   ==========================================================================
   The rule is core/environment.py; the markup is
   templates/core/includes/_environment_label.html. Linked only on staging.

   Fixed at the top centre, under the status bar and the notch, and
   click-through: it is read, never used, so it may sit over anything without
   taking a tap from it. Top centre is the spot no screen puts a control —
   headings start at the left, actions at the right.

   ⚠️ The colours carry their own fallbacks: the marketing and sign-in pages
   load marketing-theme.css, which does not define the --warning tokens. The
   fallback pair is the light theme's (#856404 on #fef3c7, above 4.5:1).
   ========================================================================== */

.environment-label {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    margin: 0;
    padding: 2px 10px;
    border: 1px solid var(--warning-border, #ffeeba);
    border-radius: 999px;
    background: var(--warning-bg, #fef3c7);
    color: var(--warning-text, #856404);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    pointer-events: none;
    white-space: nowrap;
}

/* The dark theme's --warning-bg is translucent; on a page that scrolls under
   the label it needs a solid ground to stay legible. */
[data-theme="dark"] .environment-label {
    background-color: var(--background, #161a12);
    background-image: linear-gradient(var(--warning-bg, transparent), var(--warning-bg, transparent));
}