/* Pinned below the fixed header, not parked at the top of the document flow.
 *
 * Flashes used to sit in normal flow immediately after </header>, which was
 * invisible-but-harmless while every page that raised one was short enough to be
 * read from the top. The snapshot upload form is the first that is not: you
 * scroll down to pick a file, submit, and the answer appears somewhere above the
 * viewport. An error nobody can see is the same as no error at all.
 *
 * --header-height is already maintained per breakpoint in general.css for
 * #main's offset, so this rides the same value rather than inventing a second
 * one that would drift.
 *
 * Both the server-rendered bar (partials/flash.ejs) and the AJAX ones
 * (flash.js -> #flash-container) live in this stack, so they stack rather than
 * overlap.
 */
#flash-container,
.flash-bar {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: 1300;
}

/* The container is only a positioned anchor when empty — it must not sit over
 * the page catching clicks. */
#flash-container {
  pointer-events: none;
}
#flash-container > * {
  pointer-events: auto;
}

/* A server-rendered bar and any AJAX bars must not land on top of each other.
 * The container is offset by one bar's height when a flow bar precedes it. */
.flash-bar ~ #flash-container {
  top: calc(var(--header-height) + 3.25rem);
}

.flash-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-inverse);
  animation: flash-slide-in 300ms ease-out;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
}

/* Inside the container the bars are stacked by normal flow, not each fixed on
 * top of the last. */
#flash-container .flash-bar {
  position: static;
}

.flash-success {
  background-color: var(--color-success);
}

.flash-error {
  background-color: var(--color-danger);
}

.flash-warning {
  background-color: var(--color-warning);
  color: var(--color-text);
}

.flash-info {
  background-color: var(--status-info);
}

.flash-message {
  flex: 1;
  margin-right: var(--space-3);
}

.flash-dismiss {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0 var(--space-2);
  line-height: 1;
  opacity: 0.8;
}

.flash-dismiss:hover {
  opacity: 1;
}

.flash-bar.flash-hiding {
  animation: flash-slide-out 300ms ease-in forwards;
}

@keyframes flash-slide-in {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes flash-slide-out {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}