/* hive-warn.css — shadow-DOM stylesheet for the <hive-warn> autonomous
   custom element (hive-warn.js). `level` is an attribute on the HOST
   (how callers set it, `hive-warn.js`'s own header explains why) —
   `:host([level="…"])` sets `color`/`border-color`/`background`/
   whether it pulses, same pattern as hive-btn.css's `[variant]`.

   Three levels, not an open-ended severity+modifier combination (mara,
   on review: "there should be distinction between info, warning, error
   — all warnings should be styled identically"). Colours reuse
   theme.css's own documented semantics rather than inventing new
   ones: --cyan is already "info accents", --amber already "warnings",
   --red already "errors, fail state" (see theme.css's :root comments).
   Pulse is baked into `error` specifically, not a separate opt-in
   knob — the one call site that wants attention-grabbing (an active
   incident) is also the one call site that's semantically `error`, so
   tying the two together removes a combination that shouldn't exist
   independently of the tier. */

:host {
  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);
}
:host([level="info"]) {
  border-color: var(--cyan);
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
}
:host([level="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.
     A banner that's always present and always pulsing just trains you
     to stop seeing it, so `info`/`warning` deliberately stay still.
     `currentColor` so the glow matches without a second colour switch. */
  text-shadow: 0 0 6px color-mix(in srgb, currentColor 40%, transparent);
  animation: hive-warn-pulse 2.4s ease-in-out infinite;
}
@keyframes hive-warn-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);
  }
}

/* Explicit rather than relying on plain inheritance — matches what
   every one of the three original rules declared, kept for parity. */
::slotted(strong) {
  color: inherit;
}