@layer components {
  /* Empty states — what a list looks like before anything is in it.
   *
   * Named for what the rest of the world calls them. The house word is "blank
   * slate", but nobody outside arrives at that phrase on their own: they grep
   * "empty state", find nothing, and build a second one.
   *
   * The useful ones say what would be here and how to put something here, so
   * the actions slot is part of the component rather than an afterthought.
   */
  .empty-state {
    --empty-state-padding: var(--space-two-and-half);
    --empty-state-background: var(--color-canvas);

    display: grid;
    justify-items: center;
    gap: var(--space-half);
    margin: 0;
    padding: var(--empty-state-padding);
    border-radius: var(--radius-large);
    background: var(--empty-state-background);
    color: var(--color-ink-soft);
    text-align: center;
    text-wrap: balance;
  }

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

  .empty-state__description {
    margin: 0;
    max-inline-size: var(--main-width);
  }

  .empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-half);
    margin-block-start: var(--space-half);
  }

  /* Inside a panel that already supplies the surface. */
  .empty-state--quiet {
    --empty-state-background: transparent;
    --empty-state-padding: var(--space-and-half);
  }

  /* For a drop target or a slot waiting to be filled, where the outline says
     "something goes here" rather than "there is nothing here". */
  .empty-state--outlined {
    --empty-state-background: transparent;

    border: var(--border-dashed);
  }
}