@layer app {
  /* ============================================================
     Empty states: one short note where a list has nothing yet
     ============================================================ */

  .empty-state {
    color: color-mix(in srgb, var(--color-dark) 60%, transparent);
    font-size: 0.95rem;
    line-height: 1.45;
    padding: 1rem 1.25rem;
    text-align: center;
    text-wrap: balance;
  }

  .empty-state__text {
    margin: 0;

    .icon {
      color: var(--color-primary);
      margin-inline-end: 0.4em;
    }
  }

  .empty-state__action {
    margin-top: 0.75rem;
  }
}