/* ============================================================
   COMPONENT · ANNUNCIATOR
   Backlit tile in a 4xN grid. Each tile is a state with an
   engraved caption. Off = recessed dim; On = backlit + glow.
   Annunciator panels are the canonical control-room status display.
   ============================================================ */

.c-annunciator {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 2px;
  padding: 2px;
  background: var(--color-bezel-dark);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-inset-deep);
}

.c-annunciator__tile {
  --tile-color: var(--c-bezel);
  --tile-bg:    var(--color-surface-sunken);
  --tile-fg:    var(--color-text-muted);
  --tile-glow:  transparent;

  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: var(--space-2);
  text-align: center;

  font-family: var(--font-plaque);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--tile-fg);

  background: var(--tile-bg);
  border-radius: var(--radius-xs);
  box-shadow:
    inset 0 0 0 1px var(--color-bezel-dark),
    inset 0 0 20px var(--tile-glow);
  transition: background var(--dur-fast) var(--ease-snap),
              color var(--dur-fast) var(--ease-snap),
              box-shadow var(--dur-fast) var(--ease-snap);
}

.c-annunciator__tile.is-on,
.c-annunciator__tile[data-state="on"] {
  --tile-bg: color-mix(in srgb, var(--tile-color) 25%, var(--color-surface-sunken));
  --tile-fg: color-mix(in srgb, var(--tile-color) 90%, white);
  --tile-glow: color-mix(in srgb, var(--tile-color) 40%, transparent);
  text-shadow: 0 0 4px var(--tile-color);
}

.c-annunciator__tile--ok      { --tile-color: var(--color-ok); }
.c-annunciator__tile--info    { --tile-color: var(--color-info); }
.c-annunciator__tile--caution { --tile-color: var(--color-caution); }
.c-annunciator__tile--alert   { --tile-color: var(--color-alert); }
.c-annunciator__tile--danger  { --tile-color: var(--color-danger); }
.c-annunciator__tile--hazard  { --tile-color: var(--color-hazard); }

.c-annunciator__tile--blink.is-on { animation: pulse-fade 1.2s var(--ease-pulse) infinite; }