/* ============================================================
   FLASH MESSAGES — toasts & page banners
   Source: docs/designs/Design System.html § Flash messages & toasts.
   Two carriers, chosen by lifespan — never by severity:
   • toast  → transient feedback (Rails flash[:notice]/[:alert])
   • banner → persistent, page-level context (system status, billing)
   Field-level validation stays inline in the form (see Forms).
   ============================================================ */

/* ---------------- toasts ---------------- */
.toast-region {
  position: fixed; z-index: 60;
  right: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 10px;
  width: 380px; max-width: calc(100vw - 40px);
  pointer-events: none;                /* clicks fall through gaps */
}
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 13px 14px 14px;
  position: relative; overflow: hidden;
}
.toast .t-icon {
  flex: none; width: 26px; height: 26px; border-radius: var(--radius-md);
  display: grid; place-items: center; margin-top: 1px;
}
.toast .t-icon svg { width: 15px; height: 15px; }
.toast .t-body { flex: 1; min-width: 0; }
.toast .t-title { font-size: 14px; font-weight: 600; color: var(--color-fg); line-height: 1.4; }
.toast .t-desc { font-size: 13px; color: var(--color-fg-muted); margin-top: 2px; line-height: 1.5; }
.toast .t-desc .mono { font-size: 12px; }
.toast .t-action {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 500; color: var(--color-accent-600);
  background: none; border: none; padding: 0; cursor: pointer;
}
.toast .t-action:hover { color: var(--color-accent-700); }
.toast .t-close {
  flex: none; background: none; border: none; cursor: pointer;
  color: var(--color-fg-subtle); padding: 3px; border-radius: var(--radius-sm);
  margin: -3px -3px 0 0; line-height: 0;
}
.toast .t-close:hover { background: var(--color-neutral-100); color: var(--color-fg); }
.toast .t-progress {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  transform-origin: left; background: var(--color-neutral-300);
}

/* variant = a tinted icon chip; the surface itself stays calm white */
.toast-success .t-icon { background: var(--color-success-50); color: var(--color-success-600); }
.toast-danger  .t-icon { background: var(--color-danger-50);  color: var(--color-danger-600); }
.toast-warning .t-icon { background: var(--color-warning-50); color: var(--color-warning-600); }
.toast-info    .t-icon { background: var(--color-info-50);    color: var(--color-info-600); }
.toast-accent  .t-icon { background: var(--color-accent-50);  color: var(--color-accent-600); }

/* motion — respects reduced-motion (see below) */
@keyframes atrium-toast-in  { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes atrium-toast-out { to   { opacity: 0; transform: translateX(14px); } }
@keyframes atrium-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast.in  { animation: atrium-toast-in  .18s cubic-bezier(.2,.7,.3,1); }
.toast.out { animation: atrium-toast-out .2s ease forwards; }
.toast.auto .t-progress { animation: atrium-toast-progress var(--toast-life, 5s) linear forwards; }
.toast.auto:hover .t-progress { animation-play-state: paused; }   /* hover holds the message */
.toast.out  .t-progress { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .toast.in, .toast.out { animation: none; }
  .toast.auto .t-progress { animation: none; background: transparent; }
}

/* ---------------- page banner (persistent) ---------------- */
.page-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 16px; font-size: 14px; line-height: 1.5;
  border: 1px solid transparent; border-radius: var(--radius-md);
}
.page-banner.full { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
.page-banner .b-icon { flex: none; margin-top: 1px; }
.page-banner .b-body { flex: 1; min-width: 0; }
.page-banner .b-body strong { font-weight: 600; }
.page-banner .b-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.page-banner .b-actions a { font-weight: 500; }
.page-banner .b-close {
  flex: none; background: none; border: none; cursor: pointer; line-height: 0;
  padding: 3px; border-radius: var(--radius-sm); color: currentColor; opacity: .55;
}
.page-banner .b-close:hover { opacity: 1; }
.banner-success { background: var(--color-success-50); border-color: #A7F3D0; color: var(--color-success-700); }
.banner-danger  { background: var(--color-danger-50);  border-color: #FECACA; color: var(--color-danger-700); }
.banner-warning { background: var(--color-warning-50); border-color: #FDE68A; color: var(--color-warning-700); }
.banner-info    { background: var(--color-info-50);    border-color: #BFDBFE; color: var(--color-info-600); }
.banner-accent  { background: var(--color-accent-50);  border-color: color-mix(in oklab, var(--color-accent-200) 70%, white); color: var(--color-accent-800); }
.page-banner .b-body :where(a) { color: inherit; text-decoration: underline; text-underline-offset: 2px; }