/* ============================================================================
   COMPONENT: empty-state — guiding empty states so no screen is a blank void
   (docs/FLOWS.md key states). Icon + title + one next-step hint.
   ========================================================================== */

@layer components {
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
    border: var(--border-width) dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
  }

  .empty-state__icon { color: var(--color-text-muted); }

  .empty-state__title {
    margin: 0;
    font-weight: var(--weight-medium);
    font-size: var(--text-lg);
  }
}