/* Lagos Life: toast (owner 5d). Spec: site/cards-sheets.html#toast
   One visible at a time, top centre, --toast-offset from the top (Sonner, preserved). */
.ll-toast-region {
  position: fixed; top: var(--toast-offset); left: 50%; transform: translateX(-50%);
  width: min(var(--toast-width), calc(100% - var(--space-6)));
  z-index: var(--z-toast); pointer-events: none;
}
.ll-toast {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; min-height: var(--control-lg); padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
  border-radius: var(--radius-sheet);
  background: var(--surface-toast); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--border-glass), var(--shadow-raised);
  font: var(--type-label); font-weight: var(--weight-medium);
  pointer-events: auto;
}
.ll-toast[data-entering] { animation: ll-toast-in var(--duration-enter) var(--ease-out) both; }
@keyframes ll-toast-in { from { opacity: 0; transform: translateY(calc(var(--space-4) * -1)); } to { opacity: 1; transform: translateY(0); } }
.ll-toast__emoji { flex: none; font-family: var(--font-emoji); font-size: var(--icon-md); line-height: 1; }
.ll-toast__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
.ll-toast__title { overflow-wrap: anywhere; }
.ll-toast__desc { font: var(--type-label-sm); color: var(--ink-positive); }
.ll-toast[data-tone="error"] .ll-toast__desc { color: var(--rose-deep); }
.ll-toast[data-tone="reward"] { box-shadow: inset 0 0 0 1px var(--border-glass), var(--shadow-raised), var(--glow-gold); }
.ll-toast__close {
  flex: none; display: inline-grid; place-items: center; width: var(--control-sm); height: var(--control-sm);
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); font: var(--type-label-lg);
}
.ll-toast__timer { position: absolute; left: var(--space-5); right: var(--space-5); bottom: 0; height: 2px; border-radius: var(--radius-full); background: var(--line); overflow: hidden; }
.ll-toast { position: relative; }
.ll-toast__timer > span { display: block; height: 100%; width: 100%; background: var(--ink-soft); transform-origin: left; animation: ll-toast-timer var(--_life, var(--toast-duration)) linear forwards; }
.ll-toast:hover .ll-toast__timer > span, .ll-toast:focus-within .ll-toast__timer > span { animation-play-state: paused; }
@keyframes ll-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ll-toast--static { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .ll-toast[data-entering] { animation: none; }
  .ll-toast__timer { display: none; }
}