/* StreetToast (static/js/toast.js). The host is appended inside the topmost
 * open modal <dialog> 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 <body>. */
.st-host {
  position: fixed;
  right: 16px;
  bottom: calc(16px + var(--bottomnavh, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
/* The same notice as the page's own (member-agent.css .ducky-notice): a
 * tone-tinted wash with a flat 3px edge on a small radius. It used to be a
 * white card — hairline border, 4px edge, --r-md corners and a deep shadow —
 * and the thick edge bent into a crescent round the big corners, so a toast
 * read as a different object from every other notice on the site. The
 * shadow stays, lighter: this one floats over the page. */
.st-toast {
  pointer-events: auto;
  box-sizing: border-box;
  padding: 10px 12px;
  border-left: 3px solid var(--cuck-deep);
  border-radius: var(--r-xs);
  background: var(--cuck-bg);
  color: var(--ink);
  box-shadow: var(--sh-2);
  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(--bill-deep);
  background: color-mix(in srgb, var(--bill) 14%, var(--paper));
}
.st-toast.st-ok { border-left-color: var(--duck-deep); background: var(--duck-bg); }
.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); }
/* The 'ok' toast's check (toast.js): a duck-deep disc whose white tick
 * draws itself in on the settle curve, stamped in on the pop curve — the
 * same mark as components.css's .act-ok, sized to the title's line. Kept
 * here rather than borrowing .act-ok, which fades itself out after 1.6s:
 * this one belongs to the toast for as long as the toast is up. */
.st-check {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 7px;
  vertical-align: -2px;
  animation: st-check-pop 320ms var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}
.st-check svg { display: block; width: 100%; height: 100%; }
.st-check circle { fill: var(--duck-deep); }
.st-check path {
  fill: none;
  stroke: var(--paper);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: st-check-draw 260ms var(--ease-settle) 140ms forwards;
}
@keyframes st-check-pop {
  0%   { transform: scale(0.65); opacity: 0; }
  65%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes st-check-draw { to { stroke-dashoffset: 0; } }
/* A first connected account's duck stamp (Act.duckStamp) rides the title
 * line; it is a badge beside the words, not a second heading. */
.st-title .act-duck-stamp { width: 20px; height: 20px; margin-inline-start: 8px; }
.st-x {
  flex: none;
  border: 0;
  background: none;
  color: var(--dim);
  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); text-decoration: line-through; }
.st-act {
  flex: none;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  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); outline-offset: 2px; }
@keyframes st-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.st-toast { animation-timing-function: var(--ease-settle, ease-out); }
@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; }
  /* The check is shown whole and still. */
  .st-check, .st-check path { animation: none; }
  .st-check path { stroke-dashoffset: 0; }
}