/* ==========================================================================
   REUSABLE DEV-ENVIRONMENT MARKER
   Drop into any page served from dev.nrdhub.com:
     <link rel="stylesheet" href="/assets/dev-marker.css">
     <script src="/assets/dev-marker.js"></script>
   dev-marker.js adds the banner (if the page has none), prefixes the title
   with "[DEV] " and keeps --dev-banner-h equal to the banner's real height,
   so fixed/sticky page chrome can sit below it with top: var(--dev-banner-h).
   The "DEV" pill (.dev-pill) is opt-in: put <span class="dev-pill">DEV</span>
   next to the product logo.
   ========================================================================== */
:root { --dev-banner-h: 34px; --dev-bg: #F59E0B; --dev-ink: #1F1300; }

.dev-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  min-height: 34px; box-sizing: border-box; /* not the variable: JS sets the variable FROM this height */
  display: flex; align-items: center; justify-content: center;
  padding: 6px 12px;
  background: var(--dev-bg); color: var(--dev-ink);
  border-bottom: 2px solid #B45309;
  font: 600 13px/1.35 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center; letter-spacing: .01em;
}
.dev-banner strong { font-weight: 800; letter-spacing: .06em; }
body.has-dev-banner { padding-top: var(--dev-banner-h); }

.dev-pill {
  display: inline-block; flex-shrink: 0;
  background: var(--dev-bg); color: var(--dev-ink);
  font: 800 10px/1 Inter, system-ui, sans-serif; letter-spacing: .12em;
  padding: 4px 7px; border-radius: 3px; vertical-align: middle;
}

@media (max-width: 600px) {
  .dev-banner { font-size: 11.5px; padding: 5px 10px; }
}
@media print { .dev-banner { position: static; } body.has-dev-banner { padding-top: 0; } }