/* ============================================================================
 * COMPONENT — Empty state
 * ----------------------------------------------------------------------------
 * Renderer: shared/components/empty-state.php
 *
 * Shown wherever a list has nothing in it. Worth treating as a real component
 * rather than a stray "No records found": on a new platform the empty state is
 * the first thing most users see, and it is the best place to tell them what to
 * do next — which is why the action slot is part of the component.
 * ========================================================================== */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-12) var(--sp-5);
}

.empty--tight { padding-block: var(--sp-8); }

.empty__icon {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  margin-block-end: var(--sp-4);
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  color: var(--ink-muted);
}

.empty__icon .icon {
  inline-size: 26px;
  block-size: 26px;
}

.empty__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin-block-end: var(--sp-2);
}

.empty__text {
  max-inline-size: 42ch;
  color: var(--ink-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

.empty__action {
  margin-block-start: var(--sp-5);
}