/*
 * Flash messages are toasts: they float over the page, centred just under the header,
 * and never move what's on it (toast_controller.js dismisses them). Colour carries
 * meaning (red = error, green = success), but each message also has an icon and a
 * role, so it never relies on colour alone.
 */

.flash-stack {
  position: fixed;
  top: calc(var(--shell-header-height, 68px) + var(--space-2));
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  pointer-events: none;
}

/* It's a popover: undo the browser's popover box (centred, bordered, opaque). */
.flash-stack[popover] {
  inset: calc(var(--shell-header-height, 68px) + var(--space-2)) 0 auto 0;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  color: inherit;
  background: transparent;
  border: 0;
}

.flash-stack:empty {
  display: none;
}

/* Pages without the shell's header (sign in, a call's guest door). */
body:not(:has(.shell__header)) .flash-stack,
body:not(:has(.shell__header)) .flash-stack[popover] {
  top: var(--space-4);
}

.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background-color: var(--color-card-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-card);
  pointer-events: auto;
}

.flash .icon {
  margin-top: 1px;
}

/* Tints over the card colour: toasts float over the page, so they stay opaque. */
.flash--alert {
  color: var(--color-red);
  background-image: linear-gradient(rgba(255, 149, 128, 0.1), rgba(255, 149, 128, 0.1));
  border-color: rgba(255, 149, 128, 0.3);
}

.flash--notice {
  color: var(--color-green);
  background-image: linear-gradient(rgba(138, 255, 128, 0.1), rgba(138, 255, 128, 0.1));
  border-color: rgba(138, 255, 128, 0.3);
}

.flash {
  width: 100%;
  max-width: 480px;
}

.flash__text {
  flex: 1;
  min-width: 0;
}

.flash__close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--radius-subtle);
  cursor: pointer;
  opacity: 0.8;
}

.flash__close:hover,
.flash__close:focus-visible {
  opacity: 1;
  background-color: var(--color-card);
}