/* Toast queue — bottom-right stack.
   Tokens only: no literal colour, radius, duration or ease lives here. */

.toast-hint { max-width: 60ch; color: var(--ink-muted); font-size: var(--text-sm); }
.toast-hint code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink); }
.toast-triggers { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* ---------- region ---------- */

.toast-region {
  position: fixed; z-index: 400;
  right: var(--sp-5); bottom: var(--sp-5);
  display: flex; flex-direction: column; align-items: stretch;
  width: min(360px, calc(100vw - var(--sp-6)));
  pointer-events: none;       /* the empty region must not eat clicks */
}
.toast-region > * { pointer-events: auto; }
.toast-stack { display: flex; flex-direction: column; pointer-events: none; }
.toast-stack > * { pointer-events: auto; }

/* ---------- the "+N earlier" collapse ---------- */

.toast-more {
  align-self: flex-end;
  height: var(--control-h-sm); padding: 0 var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface-raised); color: var(--ink-muted);
  cursor: pointer; font: inherit; font-family: var(--font-mono); font-size: var(--text-xs);
  box-shadow: var(--shadow-1);
  opacity: 0;                 /* GSAP owns opacity; presence is the hidden attr */
}
.toast-more:hover { background: var(--surface-hover); color: var(--ink); }
.toast-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.toast-more[hidden] { display: none; }

/* ---------- one toast ---------- */

.toast {
  position: relative;
  margin-top: var(--sp-2);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-2);
  opacity: 0;                 /* GSAP fades it in */
}
.toast[hidden] { display: none; }

.toast__body { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); }

.toast__icon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 22px; height: 22px; margin-top: 1px;
  border-radius: var(--radius-pill);
  background: var(--toast-wash); color: var(--toast-ink);
}
.toast__icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.25; }

.toast__text { flex: 1 1 auto; min-width: 0; }
.toast__title { font-size: var(--text-sm); font-weight: 600; letter-spacing: -0.01em; }
.toast__message { margin-top: 2px; color: var(--ink-muted); font-size: var(--text-sm); }

.toast__tools { display: flex; align-items: center; gap: var(--sp-1); flex: 0 0 auto; }
.toast__action {
  height: var(--control-h-sm); padding: 0 var(--sp-2);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: transparent; color: var(--toast-ink);
  cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 600;
  transition: background-color var(--dur-fast) ease;
}
.toast__action:hover { background: var(--toast-wash); }
.toast__action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.toast__close {
  display: grid; place-items: center;
  width: var(--control-h-sm); height: var(--control-h-sm);
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-faint);
  cursor: pointer;
}
.toast__close:hover { background: var(--surface-hover); color: var(--ink); }
.toast__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.toast__close svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Life bar. GSAP scales it on X from a left origin, so nothing here may set
   a transform. */
.toast__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--toast-ink);
  opacity: 0.7;
}

/* --- type mapping: one local pair per type, everything else reads them --- */
.toast { --toast-ink: var(--info); --toast-wash: var(--info-wash); }
.toast[data-type="ok"] { --toast-ink: var(--ok); --toast-wash: var(--ok-wash); }
.toast[data-type="warn"] { --toast-ink: var(--warn); --toast-wash: var(--warn-wash); }
.toast[data-type="danger"] { --toast-ink: var(--danger); --toast-wash: var(--danger-wash); }
.toast[data-type="info"] { --toast-ink: var(--info); --toast-wash: var(--info-wash); }
.toast::before {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: 3px; background: var(--toast-ink);
}

.toast[data-paused="true"] .toast__bar { opacity: 1; }

@media (max-width: 520px) {
  .toast-region { right: var(--sp-3); left: var(--sp-3); bottom: var(--sp-3); width: auto; }
}

@media (pointer: coarse) {
  .toast__action, .toast__close { min-height: var(--tap-min); }
  .toast__close { width: var(--tap-min); }
}