@layer components {
  /* Each kind of waiting item is a full-row card on the page; the items in
     it share rows when the pane has room, like the page's own cards. */
  .inbox__section {
    display: grid;
    gap: 1rem;
  }

  .inbox__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
    gap: 1rem;
    align-items: start;
  }

  .inbox__item {
    display: grid;
    gap: 0.375rem;
  }

  .inbox__person {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);

    & a {
      color: var(--foreground);
      font-weight: var(--font-weight-medium);
    }
  }
}