/* Toasts for every Save / Update / Delete result (js/toasts.js). Top-right on desktop, bottom on phones. */
.of-toasts { position: fixed; z-index: 2000; top: 1rem; right: 1rem; display: flex; flex-direction: column; gap: .5rem; width: min(380px, calc(100vw - 2rem)); pointer-events: none; }
.of-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: .75rem; padding: .8rem 1rem; border-radius: .9rem; background: var(--surface-card); color: var(--brand-ink); border-left: 5px solid var(--info); box-shadow: var(--shadow-md); opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s; cursor: pointer; }
.of-toast.is-in { opacity: 1; transform: none; }
.of-toast--success { border-left-color: var(--ok); }
.of-toast--error { border-left-color: var(--danger); }
.of-toast--warning { border-left-color: var(--warn); }
.of-toast--info { border-left-color: var(--info); }
.of-toast__msg { flex: 1; font-weight: 500; }
.of-toast__x { flex: none; border: 0; background: transparent; color: var(--brand-ink-500); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 .25rem; }
@media (max-width: 575.98px) {
  .of-toasts { top: auto; bottom: 1rem; left: 1rem; right: 1rem; width: auto; }
  .of-toast { transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) { .of-toast { transition: none; } }