/* Toast (toast() in js/ui/overlay.js): inverted — ink on paper, radius 16; above the tab bar on phones, 24 px on desktop.
   JS adds .show on the next frame and removes it before deleting the node. Tones: toast-success / -error / -info / -default. */
@layer components {
  .toast-host {
    position: fixed; z-index: 200; left: max(12px, var(--safe-l)); right: max(12px, var(--safe-r)); bottom: calc(var(--shell-bottom) + 16px);
    display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
  }
  .toast {
    pointer-events: auto; width: 100%; max-width: 460px; display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 16px;
    background: var(--ink); color: var(--paper); border-radius: var(--r-group); box-shadow: var(--shadow-pop); font-size: var(--fs-caption); font-weight: 500;
    opacity: 0; transform: translateY(24px) scale(.96); transition: opacity 240ms ease-out, transform 460ms var(--ease-settle);   /* slides up, overshoots a hair, settles */
  }
  .toast.show { opacity: 1; transform: none; }
  .toast-ico { display: grid; color: var(--paper); opacity: .8; }
  .toast-success .toast-ico { color: var(--good-inv); opacity: 1; }
  .toast-error .toast-ico { color: var(--danger-inv); opacity: 1; }
  .toast-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .toast-act { margin-left: auto; min-height: 44px; padding: 0 10px; color: var(--paper); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
  @media (min-width: 761px) { .toast-host { bottom: 24px; } .toast-act { min-height: 36px; } }
}