/* StreetToast (static/js/toast.js). The host is appended inside the topmost * open modal when there is one — see toast.js — and a fixed child of * an untransformed dialog still lays out against the viewport, so the same * rules place it whether it lives in a dialog or in . */ .st-host { position: fixed; right: 16px; bottom: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; } .st-toast { pointer-events: auto; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--hair, #e5e7eb); border-left: 4px solid var(--err-msg, #b91c1c); border-radius: var(--r-md, 10px); background: var(--paper, #fff); color: var(--ink, #111827); box-shadow: 0 12px 32px rgba(17, 24, 39, 0.18); font: var(--w-body, 400) var(--fs-1, 0.9rem)/1.45 var(--body, system-ui, sans-serif); animation: st-in 160ms ease-out; } .st-toast.st-warn { border-left-color: var(--warn, #d97706); } .st-toast.st-ok { border-left-color: var(--ok-msg, #047857); } .st-toast.st-out { opacity: 0; transform: translateY(4px); transition: opacity 160ms, transform 160ms; } .st-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .st-title { font-weight: var(--w-bold, 700); } .st-x { flex: none; border: 0; background: none; color: var(--dim, #6b7280); font-size: 14px; line-height: 1; padding: 2px 4px; cursor: pointer; } .st-items { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .st-items li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .st-items li > span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; } .st-items li.st-done > span { color: var(--dim, #6b7280); text-decoration: line-through; } .st-act { flex: none; border: 1px solid var(--ink, #111827); border-radius: var(--r-pill, 999px); background: var(--ink, #111827); color: var(--paper, #fff); font: var(--w-mid, 600) var(--fs-0, 0.8rem)/1 var(--body, system-ui, sans-serif); padding: 6px 10px; cursor: pointer; } .st-act:focus-visible, .st-x:focus-visible { outline: 2px solid var(--duck, #10b981); outline-offset: 2px; } @keyframes st-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (max-width: 520px) { .st-host { left: 16px; right: 16px; width: auto; } } @media (prefers-reduced-motion: reduce) { .st-toast { animation: none; } .st-toast.st-out { transition: none; } }