/* Staging banner — shown on every page when Rails.env.staging?. Staging runs
   on a raw copy of prod data, so this must be impossible to miss: a viewer
   must never mistake it for the live site or start entering real information.

   Solid crimson (deliberately outside the navy/teal palette — this is an
   alarm, not chrome) and distinct from the impersonation banner (#dc2626,
   z-index 10000, components.css). `sticky` keeps it in normal flow (no
   content overlap) while pinning to the top on scroll. */

.staging-banner {
  position: sticky;
  top: 0;
  z-index: 10001; /* above the impersonation banner if both ever show */
  background: #c62828;
  color: #fff;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.staging-banner-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  flex-wrap: wrap;
  text-align: center;
}

.staging-banner-inner i {
  font-size: 1rem;
}

.staging-banner-inner strong {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Inset crimson frame around the whole page so the staging state still reads
   after the banner scrolls out of view. Applied via the env-staging body
   class the layouts add when Rails.env.staging?. */
body.env-staging {
  box-shadow: inset 0 0 0 3px #c62828;
}

/* When impersonating on staging, both banners want the top edge. The
   impersonation banner is position:fixed and would be hidden under the
   staging banner (and its Exit button unreachable). On staging only, put it
   back in normal flow so it stacks below the staging banner instead. */
body.env-staging .impersonation-banner {
  position: sticky;
}