/* Demo environment banner
 *
 * Fixed-top warning bar shown on the beta environment (fv.we8x.com) and any
 * dev session with BETA_ENVIRONMENT_BANNER=true. Users can collapse the bar
 * into a small "Demo" tag pinned to the top-right corner; state persists in
 * localStorage. The body gets top padding only while the banner is expanded
 * (via :has()), so layout doesn't jump when it's collapsed.
 */

.demo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  pointer-events: none;
}

.demo-banner__expanded {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: #b45309; /* warning orange */
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.3;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
}

/* Force white across all banner children. Pico CSS and public_marketing.css
 * set explicit colors on `p`, `strong`, and SVG fill — without these resets
 * the banner text falls back to navy/gray over the orange background.
 */
.demo-banner__expanded,
.demo-banner__expanded p,
.demo-banner__expanded strong,
.demo-banner__expanded span,
.demo-banner__expanded button,
.demo-banner__expanded svg {
  color: #ffffff;
  fill: currentColor;
}

.demo-banner__icon {
  display: inline-flex;
  flex-shrink: 0;
}

.demo-banner__text {
  flex: 1;
  margin: 0;
  color: #ffffff;
}

.demo-banner__text strong {
  color: #ffffff;
  font-weight: 700;
}

.demo-banner__minimize {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(0, 0, 0, 0.15);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms ease;
}

.demo-banner__minimize:hover,
.demo-banner__minimize:focus-visible {
  background: rgba(0, 0, 0, 0.30);
  outline: none;
}

.demo-banner__tag {
  display: none;
  position: fixed;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 10000;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  background: #b45309;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
  transition: background 120ms ease;
}

.demo-banner__tag,
.demo-banner__tag svg,
.demo-banner__tag span {
  color: #ffffff;
  fill: currentColor;
}

.demo-banner__tag:hover,
.demo-banner__tag:focus-visible {
  background: #92400e;
  outline: none;
}

.demo-banner--collapsed .demo-banner__expanded {
  display: none;
}

.demo-banner--collapsed .demo-banner__tag {
  display: inline-flex;
}

/* Push body content down while the banner is expanded so the fixed bar
 * doesn't cover the top of the page. Collapsed → no padding needed; the
 * floating tag overlays in the corner without affecting layout flow.
 */
body:has(.demo-banner:not(.demo-banner--collapsed)) {
  padding-top: 40px;
}