/* Small shared foundation for viewport-edge-aware mobile UI. */
:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --mobile-page-gutter: clamp(0.75rem, 4vw, 1rem);
  --mobile-header-height: 58px;
  --touch-target-min: 44px;
  --mobile-fixed-bottom-offset: calc(0.75rem + var(--safe-area-bottom));
}

.environment-banner {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  font-weight: 800;
  justify-content: center;
  line-height: 1.3;
  min-height: calc(44px + var(--safe-area-top));
  padding: calc(0.45rem + var(--safe-area-top)) max(1rem, var(--safe-area-right)) 0.45rem max(1rem, var(--safe-area-left));
  text-align: center;
  width: 100%;
}

.environment-banner::before {
  content: "⚠";
  margin-right: 0.5rem;
}

.environment-banner--warning {
  background: #fef3c7;
  border-bottom: 1px solid #f59e0b;
  color: #78350f;
}

.environment-banner--danger {
  background: #fee2e2;
  border-bottom: 1px solid #dc2626;
  color: #7f1d1d;
}

.environment-banner-inner {
  max-width: 72rem;
}

.environment-banner-label--compact {
  display: none;
}

@media (max-width: 600px) {
  .environment-banner {
    font-size: 0.8125rem;
    min-height: calc(36px + var(--safe-area-top));
    padding-bottom: 0.35rem;
    padding-top: calc(0.35rem + var(--safe-area-top));
  }

  .environment-banner-label--full {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .environment-banner-label--compact {
    display: inline;
  }
}