/* ==========================================================================
   env-banner — the non-production environment strip (S251, BT-183; ui-guideline.md §3 / Q47).

   A full-width, persistent, non-dismissible note at the very top of every page outside production
   ("Test site — bookings and data here are not real. Visit theraveesh.com"), rendered by
   {% env_banner %} in every shell. In normal document flow: every family's top bar is
   `position: sticky; top: 0`, so at load the strip sits above the bar, and on scroll it scrolls away
   while the bar pins — nothing overlaps.

   This is a shared partial, so it may use only Tier 0 (brand-kit.css) and its own `--env-banner-*`
   interface properties (design_lint Rule 9). Each family maps the colours once, at `:root`, from its
   own warning tokens (same shape as nav-badge): atoms-desktop.css, atoms-calendar.css,
   atoms-mobile.css (also `--env-banner-safe-top` for the notch), public-atoms.css, and the guest
   sign-in stack's guest_auth.css. Dark mode follows because each family's dark block redefines the
   tokens those mappings read.

   MARKUP: .env-banner[role=note] > .env-banner__icon (decorative) + p.env-banner__text
   (+ a.env-banner__link to the real site).
   ========================================================================== */

.env-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--env-banner-gap, 0.5rem);
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: calc(var(--env-banner-pad-y, 0.375rem) + var(--env-banner-safe-top, 0rem)) var(--env-banner-pad-x, 1rem) var(--env-banner-pad-y, 0.375rem);
  background: var(--env-banner-bg);
  color: var(--env-banner-fg);
  border-bottom: var(--env-banner-border-width, 0.125rem) solid var(--env-banner-accent);
  font-size: var(--env-banner-font-size, 0.875rem);
  line-height: var(--env-banner-line-height, 1.35);
  text-align: center;
}
.env-banner__icon {
  flex: none;
  width: 1.125em;
  height: 1.125em;
}
.env-banner__text {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.env-banner__link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.env-banner__link:hover { text-decoration-thickness: 0.125em; }
.env-banner__link:focus-visible {
  outline: 0.125rem solid currentColor;
  outline-offset: 0.125rem;
  border-radius: 0.125rem;
}