@layer components {
  /* Page headers — what this screen is, and what you can do to it.
   *
   * The title sits at the start and the actions at the end, so the primary
   * action of every screen in the app is in the same place. A subtitle, a
   * count, a status badge go in __meta, which is a row rather than a line
   * because those are usually two or three things and not a sentence.
   */
  .page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space);
    margin-block-end: var(--space-and-half);

    h1 {
      margin: 0;
    }
  }

  .page-header__meta {
    display: flex;
    align-items: center;
    gap: var(--space-half);
    margin: var(--space-quarter) 0 0;
    color: var(--color-ink-soft);
  }

  .page-header__actions {
    display: flex;
    gap: var(--space-half);
  }

  /* A screen that is several pages of one thing names them under its title, as
     tabs. The header's own space then goes under the tabs instead, so the title
     and the pages it holds read as one block above whichever page is open. */
  .page-header:has(+ .tabs) {
    margin-block-end: var(--space);
  }

  .page-header + .tabs {
    margin-block-end: var(--space-and-half);
  }
}