/* v3 toasts (reference §5, core §6, §8). Bottom-right on desktop, above
   the tab bar on phones, max 3 (js/v3/toast.js). --raised + shadow on
   light (no border), raised + 1px border on dark (--float-border). */

.lg-toasts {
  position: fixed;
  inset: auto var(--space-6) var(--space-6) auto;
  z-index: var(--layer-toast);
  width: min(24rem, calc(100vw - var(--space-8)));
  pointer-events: none;
}
.lg-toasts__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lg-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: 1px solid var(--float-border);
  border-radius: var(--radius-card);
  background: var(--raised);
  color: var(--text);
  box-shadow: var(--shadow-menu);
  pointer-events: auto;
}
.lg-toast__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
}
.lg-toast--success .lg-toast__icon { background: var(--success-tint); color: var(--success); }
.lg-toast--info .lg-toast__icon { background: var(--primary-tint); color: var(--primary-ink); }
.lg-toast--warning .lg-toast__icon { background: var(--warning-tint); color: var(--warning); }
.lg-toast--error .lg-toast__icon { background: var(--danger-tint); color: var(--danger); }
.lg-toast__body { flex: 1; min-width: 0; padding-top: 0.125rem; }
.lg-toast__title { margin: 0; font-size: var(--size-body); line-height: var(--leading-body); font-weight: 600; }
.lg-toast__text {
  margin: 0;
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.lg-toast__link {
  display: inline-block;
  margin-top: var(--space-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-size: var(--size-body);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.lg-toast__close {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: calc(var(--space-1) * -1) 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.lg-toast__close:hover { background: var(--neutral-tint); color: var(--text); }

@media (prefers-reduced-motion: no-preference) {
  .lg-toast { animation: lg-toast-in var(--dur-enter) var(--ease); }
  .lg-toast--out { animation: lg-toast-out var(--dur-exit) var(--ease) forwards; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-toast { animation: lg-toast-fade var(--dur-enter) linear; }
  .lg-toast--out { animation: lg-toast-fade var(--dur-exit) linear reverse forwards; }
}
@keyframes lg-toast-in { from { opacity: 0; transform: translateY(0.5rem); } }
@keyframes lg-toast-out { to { opacity: 0; transform: translateY(0.25rem); } }
@keyframes lg-toast-fade { from { opacity: 0; } }

/* While the unsaved-changes footer shows, toasts sit above it so they never
   cover Save changes (found in the Phase 6 event page check). */
html[data-lg-savebar] .lg-toasts { bottom: calc(var(--control-height) + var(--space-6) + var(--space-4)); }

/* Phones: full width above the tab bar and the home indicator. */
@media (max-width: 39.99em) {
  .lg-toasts {
    inset: auto var(--space-4) calc(var(--bar-height) + env(safe-area-inset-bottom) + var(--space-2)) var(--space-4);
    width: auto;
  }
  html[data-lg-savebar] .lg-toasts {
    bottom: calc(var(--bar-height) + env(safe-area-inset-bottom) + var(--control-height-touch) * 2 + var(--space-8));
  }
  .lg-toast__close { width: var(--touch-target); height: var(--touch-target); }
}