/* Zulli Toast — project overrides.
   Everything here targets custom properties or re-declares vendor rules in
   an unlayered stylesheet, which beats @layer zulli-toast without
   !important — see docs/zulli-toast/README.md "Customising". Do not edit
   zulli-toast.css/.js directly; put project-specific tweaks here instead. */

/* doc_core.css (proposal/invoice/contract editors) resets the whole page with
   an unscoped `*, *::before, *::after { margin: 0; padding: 0; }`. That rule
   is unlayered, and unlayered CSS always wins over the layered
   `@layer zulli-toast` rules — regardless of specificity or which file loads
   first — so it silently zeroed out the toast's own padding on every editor
   page. With no padding the box shrinks to the text's own size, and the
   bottom accent bar (positioned from the box edge) ends up drawn through the
   middle of a wrapped title instead of below it. Restate the padding here,
   unlayered, so it wins back regardless of what other resets a page loads. */
.zt{ padding:var(--zt-pad-y) var(--zt-pad-x); }

/* The vendor centers a "compact" (no body/meta/actions) toast's icon and
   close button against the title, assuming a single short line. Our
   showToast() bridge (core/js/toast.js) puts the whole Django message into
   `title` uncapped, so a long one (e.g. "Invoice sent to <email>. Payment
   link: <url>") wraps to several lines — centering then pins the icon/close
   to the middle of that block instead of its top line. Keep them pinned to
   the top regardless of how many lines the title wraps to. */
.zt[data-compact]{ align-items:start; }
.zt[data-compact] .zt-icon{ margin-block-start:2px; }
.zt[data-compact] .zt-aside{ margin-block-start:-2px; }

/* The vendor's exit animation (zt-out) slides a dismissed toast sideways
   (translateX) while its own FLIP reflow simultaneously slides the
   survivors vertically (translateY) to close the gap — always, since the
   engine's reflow is vertical for every stack position it supports. The
   two motions run on different axes at the same time, which reads as the
   stack moving in two conflicting directions instead of one clean motion.
   Drop the sideways slide and leave a plain fade + shrink, so the only
   directional motion on screen during a dismiss is the survivors' reflow. */
@keyframes zt-out-clean{ to{ opacity:0; transform:scale(.97); } }
.zt[data-leaving]{ animation-name: zt-out-clean; }

/* The vendor's action button is a filled grey box with a fixed blue label —
   it reads as a generic default button and, on a non-info toast (success,
   danger…), its blue clashes with the role colour the icon and bottom bar
   already use. Drop the box and let it read as a plain accent-coloured
   link instead, so it matches whatever role the toast is. Keep a little
   vertical padding rather than zeroing it out completely: the bottom accent
   bar / lifespan rail is position:absolute (see zulli-toast.css §5/"lifespan"),
   so it never adds to the flow height the way real padding would — with
   padding-block:0 the link's own text sat right on top of it. */
.zt-action{
  padding-block:4px;
  padding-inline:0;
  background:transparent;
  border:0;
  border-radius:2px;
  color:var(--zt-accent);
  display:inline-flex;
  align-items:center;
}
.zt-action:hover{ background:transparent; text-decoration:underline; text-underline-offset:3px; }
.zt-action:focus-visible{ outline-color:var(--zt-accent); }
.zt-action[data-danger]{ color:var(--zt-danger); }
.zt-action[data-danger]:focus-visible{ outline-color:var(--zt-danger); }
.zt-actions .zt-action{ padding-block:4px; padding-inline:0; font-size:12.5px; background:transparent; border:0; }
.zt-actions .zt-action:hover{ background:transparent; }
.zt-actions{ gap:16px; }