/*
 * Demo banner — loaded ONLY by /e/demo via runtime injection in server.js.
 * Standalone file so the parallel styling worker (touching airops.css and
 * dashboard.html) can't accidentally drop the rule. If anything in airops.css
 * shifts, override here rather than editing airops.css.
 *
 * Layout note: the dashboard chrome is `.dash { position: fixed; inset: 0 }`,
 * so plain `body { padding-top: ... }` is invisible. We instead push `.dash`
 * down by the banner's height with same-specificity rules loaded after
 * airops.css (the server injects this <link> right before </head>, after the
 * existing airops.css link in dashboard.html — so cascade order wins).
 *
 * Visual style: restrained AirHub-style "AVAILABLE NOW" badge applied as a
 * slim top bar — soft warm-tinted background with eyebrow-orange text. Should
 * read as a calm "this is a demo" notice, not a klaxon.
 */

:root {
  --airops-demo-banner-height: 30px;
}

#airops-demo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--airops-demo-banner-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background: #fff4e6;
  color: var(--hub-eyebrow, #f97316);
  border-bottom: 1px solid #f9c79b;
  font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 9999;
  pointer-events: none;
  user-select: none;
}

/* The dashboard root is `.dash { position: fixed; inset: 0 }` in airops.css.
 * `inset: 0` is the shorthand for top/right/bottom/left; we override just `top`
 * here so the dashboard content starts below the banner. */
.dash {
  top: var(--airops-demo-banner-height);
}

/* Bigscreen mode keeps the banner visible — never let the warning be hidden. */
body.bigscreen .dash {
  top: var(--airops-demo-banner-height);
}

/* On small screens shrink the type slightly so it still fits. */
@media (max-width: 800px) {
  #airops-demo-banner {
    font-size: 0.66rem;
    letter-spacing: 0.10em;
  }
}