/* ============================================================================
   announcements.css — the publisher's service announcements, a slim banner
   under the top bar (ui/announcements.js). One line per announcement, a
   tone, a close button. Never on the demo.
   ========================================================================== */

.announce { flex: 0 0 auto; }
.announce__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 7px var(--s-5);
  font-size: var(--fs-sm); line-height: 1.4;
  border-bottom: 1px solid var(--border);
}
.announce__icon { flex: 0 0 auto; display: inline-grid; place-items: center; }
.announce__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.announce__close { flex: 0 0 auto; margin: -4px -6px -4px 0; opacity: .8; }
.announce__close:hover { opacity: 1; }
.announce--info    { background: var(--info-soft);    color: var(--info-ink);    border-bottom-color: color-mix(in srgb, var(--info) 30%, transparent); }
.announce--warning { background: var(--warning-soft); color: var(--warning-ink); border-bottom-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.announce--success { background: var(--success-soft); color: var(--success-ink); border-bottom-color: color-mix(in srgb, var(--success) 30%, transparent); }
.announce--danger  { background: var(--danger-soft);  color: var(--danger-ink);  border-bottom-color: color-mix(in srgb, var(--danger) 30%, transparent); }
@media (max-width: 560px) { .announce__item { padding: 7px var(--s-3); } }
@media print { .announce { display: none; } }