/* Empty state (shared/_empty_state): title, optional description, one primary action
   (+ optional neutral secondary). */
@layer components {
  .empty-state {
    text-align: center;
    padding-block: var(--space-6);
  }

  .empty-state-title {
    font: var(--type-h2);
    color: var(--text);
  }

  /* One sentence, held to a readable line — an empty state makes the same argument as the
     chart's GAP hatch: say what is not there instead of showing a void. */
  .empty-state-desc {
    margin-top: var(--space-1);
    max-width: var(--column-narrow);
    margin-inline: auto;
    color: var(--text-secondary);
    text-wrap: pretty;
  }

  .empty-state-actions {
    margin-top: var(--space-4);
    display: flex;
    justify-content: center;
    gap: var(--space-3);
  }
}