@layer components {
  /* An empty state lines up with the page, and says so by starting where the
     page's own title starts. */
  .empty {
    padding: var(--space-8) 0 var(--space-10);
    display: flex;
    flex-direction: column;
    gap: var(--space);
  }

  /* Except where a task list would have been, and then it lines up with the
     titles in that list instead — an emptied list looking like the list ending
     rather than a hole where a list should be (design scope §7).
     
     Opt-in, because --list-indent is measured from the task row's rails and
     only the task row has them. It used to apply to every empty state in the
     product, so Notifications — whose rows are a different grid with no rails
     at all — pushed "Nothing waiting." 136px right of its own title, aligned
     to a column that was not on the page. A new page now has to ask. */
  .empty--in-list { padding-left: var(--list-indent); }

  .empty__line {
    font-size: var(--text-2xl);
    font-weight: var(--weight-heavy);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--ink);
    text-wrap: balance;
  }

  .empty__hint { color: var(--ink-faint); font-size: var(--text-sm); max-width: var(--measure); }

  @media (max-width: 48rem) {
    .empty--in-list { padding-left: 0; }
  }
}