@layer components {
  .msg { margin: var(--space-6) auto; max-width: 28rem; text-align: center; display: grid; gap: var(--space-3); justify-items: center; }
  .msg h2 { font-family: var(--font-display); font-size: var(--text-lg); }
  .msg p { color: var(--text-muted); }
  .skel { display: grid; gap: var(--space-2); padding: var(--space-5); }
  .skel i {
    display: block; height: 4.5rem; border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--surface), var(--surface-3), var(--surface));
    background-size: 200% 100%; animation: shimmer 1.3s var(--ease-out) infinite;
  }
  @keyframes shimmer { to { background-position: -200% 0; } }
  @keyframes spin { to { transform: rotate(1turn); } }
  @keyframes busy-pulse { 50% { opacity: 0.35; } }
  .busy-spin {
    width: 2.25rem; height: 2.25rem;
    border: 3px solid var(--border);
    border-block-start-color: var(--accent);
    border-radius: 99px;
    animation: spin 0.7s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .busy-spin { animation: busy-pulse 1.2s ease-in-out infinite; border-block-start-color: var(--border); background: var(--accent); }
  }

  /* toasts: popover so they render above modal dialogs */
  #toasts {
    position: fixed; inset: auto 0 calc(56px + var(--tab-safe, 0px) + var(--space-3)) 0; margin: 0;
    width: 100%; max-width: 100%; border: 0; padding: 0 var(--space-3); background: transparent; overflow: visible;
    display: flex; justify-content: center; pointer-events: none; z-index: 40;
  }
  #toasts:empty { display: none; }
  .toast {
    pointer-events: auto; display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 44px; padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
    border-radius: 99px; background: var(--text); color: var(--bg); font-weight: 500;
    box-shadow: var(--shadow-dialog); max-width: 100%; text-wrap: balance;
  }
  .toast:not(:has(button)) { padding-inline-end: var(--space-4); }
  .toast button {
    border: 0; background: transparent; color: oklch(0.42 0.12 60); font: inherit; font-weight: 700;
    min-height: 36px; padding: 0 var(--space-2); border-radius: 99px; cursor: pointer;
  }
  .toast button:hover { background: oklch(0 0 0 / 0.08); }

  #busy {
    width: auto; max-width: 16rem; padding: var(--space-6);
    justify-items: center; gap: var(--space-4); text-align: center;
    background: var(--surface); color: var(--text); border-radius: var(--radius-md);
    box-shadow: var(--shadow-dialog);
  }
  #busy[open] { display: grid; }
  #busy:not([open]) { display: none; }
  #busy p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
}