/* WarnBanner.css — three levels, not an open-ended severity+modifier
   combination (same rule `hive-warn.css` states, copied faithfully since
   this is that component's visual language, just reached through a
   class instead of a `:host([level])` attribute selector). Colours reuse
   theme.css's own documented semantics: --cyan = "info accents", --amber
   = "warnings", --red = "errors, fail state". */

.warn-banner {
  display: block;
  border: 1px solid var(--amber);
  border-radius: 4px;
  padding: 0.5em 0.8em;
  margin-bottom: 0.6em;
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 8%, transparent);
}
.warn-banner-info {
  border-color: var(--cyan);
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
}
.warn-banner-error {
  border-color: var(--red);
  color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, transparent);
  /* Only `error` pulses — an active incident, not a standing caveat. */
  text-shadow: 0 0 6px color-mix(in srgb, currentColor 40%, transparent);
  animation: warn-banner-pulse 2.4s ease-in-out infinite;
}
@keyframes warn-banner-pulse {
  0%,
  100% {
    box-shadow: 0 0 12px -4px color-mix(in srgb, currentColor 55%, transparent);
  }
  50% {
    box-shadow: 0 0 22px -2px color-mix(in srgb, currentColor 95%, transparent);
  }
}
.warn-banner strong {
  color: inherit;
}