@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 is centred in the
     space the list is not filling.

     It used to line up with the titles in that list — an emptied list looking
     like the list ending rather than a hole where a list should be (design
     scope §7) — so the centring is the whole of what this modifier does now.
     The quiet type it used to bring with it has moved down to .empty__line
     itself: an empty state never shouts, wherever it stands. That was two
     decisions in one class, and the pages that could not take the centring —
     Notifications, Projects, Tags, the workspace chooser — were losing the
     quiet along with it and saying "Nothing waiting." in 60px of full ink, in
     a product whose loudest thing is meant to be the work.

     The minimum height is what makes "centred" mean anything: with none, the
     block is only as tall as two lines of text and sits directly under the
     standfirst, which is not the middle of anything. 40vh leaves it clear of
     the view button in the corner on a short window. */
  .empty--in-list {
    min-height: 40vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
  }

  /* The words, and they are quiet.

     A cleared Today is the reward for a day's work and this used to shout the
     news: 60px in full ink, the largest and heaviest thing the product ever
     draws. --ink-faint rather than anything fainter because faint is the
     floor — it is the last ink in the product that still clears 4.5:1 on the
     canvas (see _tokens.css), and an empty state nobody can read is not
     subtle, it is missing. What carries the subtlety instead is the weight and
     the size. */
  .empty__line {
    font-size: var(--text-lg);
    font-weight: var(--weight-normal);
    letter-spacing: var(--tracking-normal);
    line-height: var(--leading-tight);
    color: var(--ink-faint);
    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 { min-height: 30vh; }
  }
}