/* Silo — toasts.
   A real notification stack in the HeroUI shape, drawn as a pill: a circular
   icon badge carrying the countdown as a ring, the message, and a close that
   appears on hover. Toasts dock bottom-centre and stack back-to-front (newest
   in front, older ones peeking out behind at a smaller scale), fanning out to
   full height while the pointer is over them or a close button holds focus.

   The stack's geometry is measured in JS (pills differ in width and height, so
   the expanded offsets can't be pure CSS) and handed to each toast as --y /
   --s; everything else — colour, motion, theming — lives here.
   Markup is built by js/silo-toast.js. */

/* the countdown ring sweeps this, so it has to be a real registered angle */
@property --st-sweep {
  syntax: '<angle>';
  initial-value: 360deg;
  inherits: false;
}

.st-region {
  --st-paper: #fcfcfb;
  --st-line: rgba(23, 24, 26, 0.08);
  --st-text: #17181a;
  --st-muted: #7c848c;
  --st-dim: #9aa1a9;
  --st-chip: #ededec;
  --st-shadow: 0 10px 30px rgba(23, 24, 26, 0.14), 0 2px 6px rgba(23, 24, 26, 0.07);

  position: fixed;
  z-index: 10500;
  width: min(440px, calc(100vw - 28px));
  /* height is measured onto the element so the stack never claims more of
     the page than it actually covers */
  height: 0;
  /* the box itself stays transparent to the pointer — only the pills take
     clicks, so a persistent toast can't sit on top of the page beneath it */
  pointer-events: none;
}
.st-region:empty { display: none; }
.st-region > * { pointer-events: auto; }

/* the standing live regions silo-toast.js announces through */
.st-announcer {
  position: fixed;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* placement — the anchored edge also decides which way the stack grows */
.st-region[data-placement$="-bottom"] { bottom: 20px; }
.st-region[data-placement$="-top"] { top: 20px; }
.st-region[data-placement^="right"] { right: 16px; }
.st-region[data-placement^="left"] { left: 16px; }
.st-region[data-placement^="center"] { left: 50%; transform: translateX(-50%); }

/* ===== the pill ===== */
.st-toast {
  position: absolute;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  padding: 9px 10px 9px 9px;
  overflow: hidden;
  border: 1px solid var(--st-line);
  border-radius: 999px;
  background: var(--st-paper);
  color: var(--st-text);
  box-shadow: var(--st-shadow);
  font-family: inherit;
  /* --cx centres the pill under a centre placement; --x is the drag offset */
  transform:
    translate3d(calc(var(--cx, 0px) + var(--x, 0px)), calc(var(--y, 0px) + var(--dy, 0px)), 0)
    scale(var(--s, 1));
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.24s ease,
    width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.st-region[data-placement^="center"] .st-toast { left: 50%; --cx: -50%; }
.st-region[data-placement^="right"] .st-toast { right: 0; }
.st-region[data-placement^="left"] .st-toast { left: 0; }
.st-region[data-placement$="-bottom"] .st-toast {
  bottom: 0;
  transform-origin: bottom center;
}
.st-region[data-placement$="-top"] .st-toast {
  top: 0;
  transform-origin: top center;
}

/* enter / exit — the settled state is the transform above, so both ends only
   describe the offset they come from or leave toward */
.st-toast[data-state="entering"] {
  opacity: 0;
  transform: translate3d(var(--cx, 0px), var(--enter, 26px), 0) scale(0.94);
}
.st-toast[data-state="leaving"] {
  opacity: 0;
  transform:
    translate3d(calc(var(--cx, 0px) + var(--x, 0px)), calc(var(--y, 0px) + var(--dy, 0px)), 0)
    scale(0.9);
  transition:
    transform 0.22s cubic-bezier(0.4, 0, 1, 1),
    opacity 0.19s ease;
}
/* beyond the visible depth a toast is still stacked, just faded out */
.st-toast[data-hidden] { opacity: 0; pointer-events: none; }

/* dragged pills follow the pointer 1:1 and must not lag behind it */
.st-toast[data-dragging] {
  transition: none;
  cursor: grabbing;
  user-select: none;
}

/* ===== icon badge, with the countdown drawn around it ===== */
.st-icon {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--st-icon-bg, var(--st-chip));
  color: var(--st-icon-fg, var(--st-text));
}
.st-icon svg { width: 15px; height: 15px; display: block; }
.st-toast[data-no-icon] { grid-template-columns: minmax(0, 1fr) auto; padding-left: 17px; }
.st-toast[data-no-icon] .st-icon { display: none; }

/* the ring: a conic sweep masked down to a 2px annulus */
.st-icon::after {
  content: "";
  position: absolute;
  inset: -3.5px;
  border-radius: 50%;
  background: conic-gradient(var(--st-bar, var(--st-dim)) var(--st-sweep), transparent 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: st-sweep linear forwards;
  animation-duration: var(--life, 5s);
  opacity: 0.9;
}
.st-toast[data-paused] .st-icon::after { animation-play-state: paused; }
.st-toast:not([data-timed]) .st-icon::after { display: none; }
@keyframes st-sweep {
  from { --st-sweep: 360deg; }
  to { --st-sweep: 0deg; }
}

/* the indeterminate ring a promise toast spins while it is pending */
.st-icon .st-spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: st-spin 0.7s linear infinite;
}
@keyframes st-spin { to { transform: rotate(360deg); } }

/* ===== copy ===== */
.st-body {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.st-title {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--st-text);
  overflow-wrap: anywhere;
}
.st-desc {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.42;
  color: var(--st-muted);
  overflow-wrap: anywhere;
}

/* ===== trailing slot: an optional action, then the close ===== */
.st-end {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.st-action {
  height: 28px;
  padding: 0 13px;
  border: 1px solid var(--st-line);
  border-radius: 999px;
  background: transparent;
  color: var(--st-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
}
.st-action:hover { background: var(--st-chip); }
.st-close {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--st-dim);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.st-close svg { width: 11px; height: 11px; display: block; }
.st-toast:hover .st-close,
.st-close:focus-visible { opacity: 1; }
.st-close:hover { background: var(--st-chip); color: var(--st-text); }

/* keyboard users get a ring everywhere; pointer users get none */
.st-close:focus-visible,
.st-action:focus-visible {
  outline: 2px solid var(--st-bar, var(--st-dim));
  outline-offset: 1px;
}

/* ===== colours ===== */
.st-toast[data-color="default"] {
  --st-icon-bg: var(--st-chip);
  --st-icon-fg: #4c5359;
  --st-bar: #9aa1a9;
}
.st-toast[data-color="primary"] {
  --st-icon-bg: #fbe9f0;
  --st-icon-fg: #c04476;
  --st-bar: #e0447c;
}
.st-toast[data-color="success"] {
  --st-icon-bg: #e4f3ec;
  --st-icon-fg: #1a7f57;
  --st-bar: #1a7f57;
}
.st-toast[data-color="warning"] {
  --st-icon-bg: #fbeedb;
  --st-icon-fg: #96631a;
  --st-bar: #d9922c;
}
.st-toast[data-color="danger"] {
  --st-icon-bg: #fbe9e8;
  --st-icon-fg: #a53b35;
  --st-bar: #c0453f;
}

/* solid — the colour carries the whole pill */
.st-toast[data-variant="solid"] {
  border-color: transparent;
  background: var(--st-solid-bg);
  color: #fff;
  --st-icon-bg: rgba(255, 255, 255, 0.2);
  --st-icon-fg: #fff;
  --st-line: rgba(255, 255, 255, 0.24);
  --st-bar: rgba(255, 255, 255, 0.9);
}
.st-toast[data-variant="solid"] .st-title,
.st-toast[data-variant="solid"] .st-action { color: #fff; }
.st-toast[data-variant="solid"] .st-desc { color: rgba(255, 255, 255, 0.78); }
.st-toast[data-variant="solid"] .st-close { color: rgba(255, 255, 255, 0.72); }
.st-toast[data-variant="solid"] .st-close:hover,
.st-toast[data-variant="solid"] .st-action:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.st-toast[data-variant="solid"][data-color="default"] { --st-solid-bg: #17181a; }
.st-toast[data-variant="solid"][data-color="primary"] { --st-solid-bg: #e0447c; }
.st-toast[data-variant="solid"][data-color="success"] { --st-solid-bg: #1a7f57; }
.st-toast[data-variant="solid"][data-color="warning"] { --st-solid-bg: #b8791f; }
.st-toast[data-variant="solid"][data-color="danger"] { --st-solid-bg: #c0453f; }

/* bordered — no fill, the colour lives in the outline */
.st-toast[data-variant="bordered"] {
  background: color-mix(in srgb, var(--st-paper) 62%, transparent);
  backdrop-filter: blur(16px);
  border-color: var(--st-bar);
  box-shadow: none;
}

/* ===== dark ===== */
html[data-silo-theme="dark"] .st-region {
  --st-paper: #202226;
  --st-line: rgba(255, 255, 255, 0.1);
  --st-text: #f2f3f5;
  --st-muted: #9aa1ab;
  --st-dim: #767c85;
  --st-chip: #2c2f34;
  --st-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
}
html[data-silo-theme="dark"] .st-toast[data-color="default"] {
  --st-icon-bg: rgba(255, 255, 255, 0.08);
  --st-icon-fg: #d3d7dc;
  --st-bar: #6e747c;
}
html[data-silo-theme="dark"] .st-toast[data-color="primary"] {
  --st-icon-bg: rgba(255, 128, 171, 0.17);
  --st-icon-fg: #ff9dc0;
  --st-bar: #ff80ab;
}
html[data-silo-theme="dark"] .st-toast[data-color="success"] {
  --st-icon-bg: rgba(38, 190, 130, 0.17);
  --st-icon-fg: #54d6a0;
  --st-bar: #34c88f;
}
html[data-silo-theme="dark"] .st-toast[data-color="warning"] {
  --st-icon-bg: rgba(232, 160, 60, 0.17);
  --st-icon-fg: #f0b45c;
  --st-bar: #e8a03c;
}
html[data-silo-theme="dark"] .st-toast[data-color="danger"] {
  --st-icon-bg: rgba(224, 90, 80, 0.18);
  --st-icon-fg: #ff8f86;
  --st-bar: #e0655c;
}
html[data-silo-theme="dark"] .st-toast[data-variant="solid"] {
  color: #101113;
  --st-icon-bg: rgba(16, 17, 19, 0.15);
  --st-icon-fg: #101113;
  --st-line: rgba(16, 17, 19, 0.2);
  --st-bar: rgba(16, 17, 19, 0.75);
}
html[data-silo-theme="dark"] .st-toast[data-variant="solid"] .st-title { color: #101113; }
html[data-silo-theme="dark"] .st-toast[data-variant="solid"] .st-desc { color: rgba(16, 17, 19, 0.72); }
html[data-silo-theme="dark"] .st-toast[data-variant="solid"] .st-close { color: rgba(16, 17, 19, 0.6); }
html[data-silo-theme="dark"] .st-toast[data-variant="solid"][data-color="default"] { --st-solid-bg: #e8eaed; }
html[data-silo-theme="dark"] .st-toast[data-variant="solid"][data-color="primary"] { --st-solid-bg: #ff80ab; }
html[data-silo-theme="dark"] .st-toast[data-variant="solid"][data-color="success"] { --st-solid-bg: #34c88f; }
html[data-silo-theme="dark"] .st-toast[data-variant="solid"][data-color="warning"] { --st-solid-bg: #e8a03c; }
html[data-silo-theme="dark"] .st-toast[data-variant="solid"][data-color="danger"] { --st-solid-bg: #e0655c; }

/* ===== small screens: the pill spans the dock, above the safe area ===== */
@media (max-width: 560px) {
  .st-region {
    right: 12px;
    left: 12px;
    width: auto;
    transform: none;
  }
  .st-region[data-placement$="-bottom"] { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .st-region[data-placement$="-top"] { top: calc(14px + env(safe-area-inset-top, 0px)); }
  .st-toast { max-width: 100%; }
}

/* ===== reduced motion: keep the stack, drop the travel ===== */
@media (prefers-reduced-motion: reduce) {
  .st-toast,
  .st-toast[data-state="leaving"] {
    transition: opacity 0.12s linear;
  }
  /* both ends sit at the resting transform, so a pill only fades in and out */
  .st-toast[data-state="entering"],
  .st-toast[data-state="leaving"] {
    transform: translate3d(var(--cx, 0px), var(--y, 0px), 0) scale(var(--s, 1));
  }
  .st-icon::after,
  .st-icon .st-spin { animation: none; }
}