/*
 * status-banner.css — the "clear line in front" for every page under
 * aaas-design.web.app. Shown at the top of the viewport, coloured by the
 * page's status from design/registry.json. Reads status via status-banner.js.
 *
 * Design tokens mirror design/deliveries.html (basalt/circuit palette) so
 * pages don't need to rewrite their own look. noindex pages use the muted
 * variant; production-critical pages use the stronger glow.
 */

:root {
  --sb-basalt-deep: #080809;
  --sb-circuit: #00f3ff;
  --sb-accent-red: #F43F6C;
  --sb-warning: #f59e0b;
  --sb-success: #22c55e;
  --sb-text-muted: rgba(224, 224, 222, 0.55);
  --sb-text-strong: #e0e0de;
  --sb-border: rgba(255, 255, 255, 0.08);
}

.aaas-status-banner {
  position: sticky;
  top: 0;
  z-index: 2147483000; /* above page content, below browser chrome */
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 28px;
  padding: 0.4rem 1.25rem;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--sb-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--sb-text-strong);
}

.aaas-status-banner[hidden] { display: none !important; }

.aaas-status-banner .sb-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.aaas-status-banner .sb-label { font-weight: 700; }
.aaas-status-banner .sb-meta { color: var(--sb-text-muted); font-weight: 400; letter-spacing: 0.08em; }
.aaas-status-banner .sb-spacer { margin-left: auto; display: flex; gap: 1.25rem; align-items: center; }
.aaas-status-banner a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  opacity: 0.85;
}
.aaas-status-banner a:hover { opacity: 1; }

/* ───────── Status variants ───────── */
.aaas-status-banner[data-status="live"] {
  background: rgba(0, 243, 255, 0.08);
  border-bottom-color: rgba(0, 243, 255, 0.35);
  color: var(--sb-circuit);
}
.aaas-status-banner[data-status="live"] .sb-dot {
  background: var(--sb-circuit);
  box-shadow: 0 0 10px var(--sb-circuit);
}

.aaas-status-banner[data-status="stale"] {
  background: rgba(245, 158, 11, 0.14);
  border-bottom-color: rgba(245, 158, 11, 0.4);
  color: var(--sb-warning);
}
.aaas-status-banner[data-status="stale"] .sb-dot {
  background: var(--sb-warning);
  box-shadow: 0 0 10px var(--sb-warning);
}

.aaas-status-banner[data-status="deprecated"] {
  background: rgba(244, 63, 108, 0.14);
  border-bottom-color: rgba(244, 63, 108, 0.4);
  color: var(--sb-accent-red);
}
.aaas-status-banner[data-status="deprecated"] .sb-dot {
  background: var(--sb-accent-red);
  box-shadow: 0 0 10px var(--sb-accent-red);
}

.aaas-status-banner[data-status="archived"] {
  background: rgba(224, 224, 222, 0.08);
  border-bottom-color: rgba(224, 224, 222, 0.15);
  color: var(--sb-text-muted);
}
.aaas-status-banner[data-status="archived"] .sb-dot {
  background: var(--sb-text-muted);
}

.aaas-status-banner[data-status="broken"] {
  background: rgba(239, 68, 68, 0.16);
  border-bottom-color: rgba(239, 68, 68, 0.45);
  color: #ef4444;
  animation: sb-pulse 2.2s ease-in-out infinite;
}
.aaas-status-banner[data-status="broken"] .sb-dot {
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444;
}

@keyframes sb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

@media (max-width: 640px) {
  .aaas-status-banner {
    flex-wrap: wrap;
    padding: 0.4rem 0.9rem;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }
  .aaas-status-banner .sb-spacer {
    margin-left: 0;
    width: 100%;
    gap: 0.9rem;
  }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .aaas-status-banner[data-status="broken"] { animation: none; }
}