/*
 * Empty state — icon, title, hint, optional CTA. Centred in whatever
 * body it sits in. Copy is pinned by the *EmptyStateParityTest files;
 * this only styles it.
 *
 *   <div class="empty">
 *     <?= icon('inbox', 'empty__icon') ?>
 *     <p class="empty__title">No tasks yet</p>
 *     <p class="empty__hint">SAGE creates its own tasks as it works.</p>
 *     <a class="btn btn--secondary btn--sm empty__cta" href="…">Open activity</a>
 *   </div>
 */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
    color: var(--color-text-muted);
}
.empty--compact { padding: var(--sp-4); }
.empty__icon  { width: 32px; height: 32px; color: var(--color-text-dim); margin-bottom: var(--sp-1); }
.empty__title { font-size: var(--fs-base); font-weight: 600; color: var(--color-text); }
.empty__hint  { font-size: var(--fs-sm); color: var(--color-text-muted); max-width: 40ch; }
.empty__cta   { margin-top: var(--sp-2); }