/* Alert messages */
.alert {
  padding: var(--block-space);
  border-radius: var(--border-radius, 0.5em);
  margin: var(--block-space) 0;
}

.alert--error {
  /* Fully opaque error toast background */
  background-color: var(--color-negative);
  border: 1px solid var(--color-negative);
  color: var(--color-ink-reversed);
}

.alert--success {
  /* Fully opaque success toast background */
  background-color: var(--color-positive);
  border: 1px solid var(--color-positive);
  color: var(--color-ink-reversed);
}

.alert strong {
  display: block;
  margin-block-end: 0.5em;
}

.alert p {
  margin: 0;
}

/* Toast-style flash messages:
   Keep them visible regardless of scroll position. */
#flash-messages {
  position: fixed;
  left: auto;
  bottom: var(--block-space);
  right: var(--block-space);
  transform: none;
  z-index: 2147483647;
  margin: 0;
  width: min(60ch, calc(100vw - (var(--block-space) * 2)));
  pointer-events: none;
}

/* When #flash-messages wraps the actual flash markup, don't re-position it. */
#flash-messages .flash-messages {
  position: static;
  transform: none;
  right: auto;
  width: 100%;
  pointer-events: auto;
  margin: 0;
}

/* Dashboard layout renders .flash-messages directly (not inside #flash-messages). */
.flash-messages {
  position: fixed;
  left: auto;
  bottom: var(--block-space);
  right: var(--block-space);
  transform: none;
  z-index: 2147483647;
  margin: 0;
  width: min(60ch, calc(100vw - (var(--block-space) * 2)));
  pointer-events: none;
}

.flash-messages .alert {
  margin: 0;
  pointer-events: auto;
}

@keyframes flash-toast-dismiss {
  to {
    opacity: 0;
    transform: translateY(0.25rem);
  }
}

.flash-messages.flash-toast--dismiss .alert {
  animation: flash-toast-dismiss 300ms ease-out forwards;
}

@media print {
  #flash-messages,
  .flash-messages {
    display: none;
  }
}