/**
 * staging-banner.css — styles for lib/staging-banner.js (2026-09-01, #743).
 * Tokens only (lib/tokens.css) -- no bare hex, per operator's design-token rule.
 * Staging artifact only -- do not link this file from the production-serving
 * admin/index.html.
 */

.faro-staging-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147483647;
  background: var(--red);
  color: var(--white);
  font-family: var(--font);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  padding: .4rem .75rem;
  box-shadow: var(--sh2);
}

/* Pushes the app chrome down so the fixed banner never overlaps the topbar. */
body.faro-has-staging-banner {
  padding-top: 2rem;
}

.faro-env-block {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--g900);
  padding: 1rem;
}

.faro-env-block-card {
  max-width: 28rem;
  width: 100%;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--red);
  border-radius: var(--r-lg);
  box-shadow: var(--sh2);
  padding: 1.25rem 1.5rem;
  font-family: var(--font);
}

.faro-env-block-title {
  margin: 0 0 .5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--red);
}

.faro-env-block-body {
  margin: 0 0 .75rem;
  font-size: .875rem;
  color: var(--g700);
}

.faro-env-block-code {
  margin: 0;
  font-size: .75rem;
  font-family: ui-monospace, monospace;
  color: var(--g500);
}