/* ============================================================================
 * COMPONENT — Announcements
 * ----------------------------------------------------------------------------
 * Renderer: shared/components/announcements.php
 *
 * A stack of platform messages above the page. It borrows the alert component's
 * look rather than inventing a second one — a user should not have to learn two
 * visual languages for "the system is telling you something".
 *
 * Everything here is about the stack and the dismissal; the individual message
 * is alert.css.
 * ========================================================================== */

.announcements {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-block-end: var(--sp-5);
}

/* Removal is animated so the ones below do not jump up under the cursor before
   the eye has followed the one that left. */
.announcement {
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.announcement.is-going {
  opacity: 0;
  /* translate, not margin: the row keeps its height until it is removed from
     the DOM, so nothing reflows mid-animation. */
  transform: translateY(-4px);
}

/* An announcement's body is written in a textarea and keeps its line breaks, so
   it needs the leading a single-line alert does not. */
.announcement .alert__text {
  line-height: var(--lh-normal);
}