/* web-v2/css/components/status-banner.css
   Live-source status strip shown under the header when the feed is degraded/down. */

.status-banner {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .9rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  line-height: 1.35;
  color: var(--threat-prealert);
  background: var(--threat-prealert-bg);
  border-bottom: 1px solid var(--threat-prealert);
  flex-shrink: 0;
  position: relative;
  z-index: 99;
}
.status-banner[hidden] { display: none; }

.status-banner[data-state="down"] {
  color: var(--threat-rockets);
  background: var(--threat-rockets-bg);
  border-bottom-color: var(--threat-rockets);
}

.status-banner__icon { font-size: .9rem; flex-shrink: 0; }
.status-banner__msg  { flex: 1; min-width: 0; color: var(--text-primary); text-wrap: pretty; }

.status-banner__link {
  flex-shrink: 0;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.status-banner__link { padding: .35rem 0; transition: text-decoration-thickness .15s; }
.status-banner__link:hover { text-decoration-thickness: 2px; }
.status-banner__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (max-width: 768px) {
  .status-banner { font-size: .62rem; padding: .35rem .6rem; gap: .4rem; }
}