/* The console's flashed messages, shown as notifications in one corner rather
   than as a block pushed into the top of whatever page raised them.
   Markup is in templates/partials/flash.html. */

.fl-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 3000;             /* over the sticky dialog bar and the support widget */
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: min(380px, calc(100vw - 32px));
  pointer-events: none;      /* the page underneath stays usable */
}

.fl-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px 11px 13px;
  border-radius: 11px;
  border: 1px solid var(--c-line, #e2e8f0);
  background: var(--c-card, #fff);
  box-shadow: 0 8px 24px rgba(15, 28, 43, .14);
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-ink, #1c2b3a);
  border-left-width: 4px;
  opacity: 1;
  transform: translateX(0);
  transition: opacity .22s ease, transform .22s ease;
}

/* Entering and leaving are the same movement in reverse. `.go` is added when a
   toast is dismissed or times out, and the element is removed on transitionend
   so both routes out look identical. */
@keyframes fl-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* `backwards`, not `both`: with `both` the animation's final state stays
   applied after it finishes, and an animation beats an ordinary declaration --
   so adding `.go` changed nothing, no transition ran, and the toast never
   left. `backwards` still covers the frame before it starts. */
.fl-toast { animation: fl-in .22s ease backwards; }
.fl-toast.go { opacity: 0; transform: translateX(14px); }

@media (prefers-reduced-motion: reduce) {
  .fl-toast { animation: none; transition: opacity .01s linear; }
  .fl-toast.go { transform: none; }
}

.fl-toast i:first-child { font-size: 14px; margin-top: 1px; flex: 0 0 auto; }
.fl-msg { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.fl-x {
  flex: 0 0 auto;
  /* The theme's `button { width: 100% }` (stylesheet.css, on narrow screens)
     caught this too: the close button took the whole toast and squeezed the
     message to one letter per line. */
  width: auto;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1;
  color: var(--c-ink-muted, #8a97a7);
}
.fl-x:hover { color: var(--c-ink, #1c2b3a); }

/* One accent per kind, on the left edge and the icon. The body text stays the
   page's own ink: coloured text on a tinted ground was the part of the old
   alerts that read poorly. */
.fl-toast.ok   { border-left-color: #157347; }
.fl-toast.ok   i:first-child { color: #157347; }
.fl-toast.err  { border-left-color: var(--c-bad-ink, #c0392b); }
.fl-toast.err  i:first-child { color: var(--c-bad-ink, #c0392b); }
.fl-toast.warn { border-left-color: var(--c-warn-ink, #8a5a12); }
.fl-toast.warn i:first-child { color: var(--c-warn-ink, #8a5a12); }
.fl-toast.info { border-left-color: var(--c-info-ink, #6d3fd1); }
.fl-toast.info i:first-child { color: var(--c-info-ink, #6d3fd1); }

/* A phone has no room for a column down one side. */
@media (max-width: 560px) {
  .fl-stack { left: 16px; right: 16px; max-width: none; }
}