/* =========================================================================
   overlay.css — overlay surfaces (DESIGN.md v2 §2.9) + empty state
   Sheet + scrim + Toast(Sonner) + Alert(api-banner) + empty
   Dependency: tokens.css, primitives.css (button used inside)
   ========================================================================= */

/* ============================ ALERT (api-banner) ============================ */
.api-banner {
  display: none; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) clamp(var(--sp-4), 4vw, var(--sp-12));
  background: var(--muted); color: var(--muted-foreground);
  font-size: var(--fs-body-sm); border-bottom: 1px solid var(--border);
}
.api-banner.is-shown { display: flex; }
.api-banner iconify-icon { font-size: var(--icon-fs-md); flex: none; }
.api-banner__close { margin-left: auto; color: var(--foreground); }

/* ============================ EMPTY STATE ============================ */
.empty {
  display: none; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-20) var(--sp-4); text-align: center; color: var(--muted-foreground);
}
.empty.is-shown { display: flex; }
.empty iconify-icon { font-size: var(--icon-fs-3xl); color: var(--muted-foreground); }
.empty h2 { font-size: var(--fs-h1); color: var(--foreground); font-weight: 600; }

/* ============================ TOAST (Sonner) ============================ */
/* fixed bottom center, stacks up to 3, 2s auto-dismiss, reduced-motion => opacity only */
.toaster {
  position: fixed; left: 50%; bottom: var(--sp-8); transform: translateX(-50%);
  z-index: 80; display: flex; flex-direction: column-reverse; align-items: center; gap: var(--sp-2);
  pointer-events: none;
}
.toast {
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4); box-shadow: var(--elevation-toast);
  font-size: var(--fs-body-sm); display: flex; align-items: center; gap: var(--sp-2);
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-mid) var(--ease-standard);
}
.toast.is-shown { opacity: 1; transform: translateY(0); }
/* stacked older toasts recede slightly (Sonner behaviour) */
.toast.is-stacked { opacity: 0.7; transform: translateY(0) scale(0.96); }
.toast iconify-icon { color: var(--license-free); font-size: var(--icon-fs-md); }
.toast code { font-family: var(--font-mono); font-size: var(--fs-mono); }

/* ============================ MOBILE SHEET ============================ */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 60; background: var(--scrim);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-mid) var(--ease-standard);
}
.sheet-scrim.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--card); border-top: 1px solid var(--border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--sp-4) clamp(var(--sp-4), 4vw, var(--sp-12)) var(--sp-8);
  transform: translateY(100%); transition: transform var(--dur-sheet) var(--ease-sheet);
  max-height: 85vh; overflow-y: auto;
}
.sheet.is-open { transform: translateY(0); }
.sheet__handle { width: 40px; height: 4px; border-radius: var(--radius-full); background: var(--border); margin: 0 auto var(--sp-4); }
.sheet__grid { display: flex; flex-direction: column; gap: var(--sp-4); }
.sheet__grid .toolbar__group { flex-wrap: wrap; }