/* web/styles/announce-bar.css
 * Delhivery DS: Lava #EE3C26, squared radii (0/2/4/8), Inter Tight.
 * Severity is encoded on the left border rather than a fill — a full-bleed red bar across
 * every VISION page reads as "the site is broken", which is not what an ops notice means. */
#vision-announce { display: flex; flex-direction: column; gap: 2px; }

.vab {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 2px;
  font: 500 13px/1.4 'Inter Tight', system-ui, sans-serif;
  background: #f8fafc; color: #0f172a;
  border-left: 3px solid #64748b;
}
.vab[data-sev="warn"]     { border-left-color: #d97706; background: #fffbeb; }
.vab[data-sev="critical"] { border-left-color: #EE3C26; background: #fef2f2; }

.vab strong { font-weight: 650; }
.vab span   { color: #475569; }

.vab button {
  margin-left: auto; padding: 4px 12px; border-radius: 2px;
  border: 1px solid #EE3C26; background: #fff; color: #EE3C26;
  font: 600 12px 'Inter Tight', system-ui, sans-serif; cursor: pointer;
}
.vab button:hover { background: #EE3C26; color: #fff; }

@media (prefers-color-scheme: dark) {
  .vab                      { background: #1e293b; color: #e2e8f0; }
  .vab[data-sev="warn"]     { background: #292014; }
  .vab[data-sev="critical"] { background: #2a1615; }
  .vab span                 { color: #94a3b8; }
  .vab button               { background: transparent; }
}