@layer components {
  .page-title {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-block: calc(var(--safe-top) + var(--page-inset) + var(--space-7)) var(--space-6);
    padding-inline: var(--gutter-fluid);
  }

  .page-title:has(> .page-title__action) {
    display: grid;
    grid-template-columns: minmax(var(--space-0), var(--track-fill)) auto;
    column-gap: var(--space-6);
    row-gap: var(--space-4);
  }

  .page-title:has(> .page-title__action) > * {
    grid-column: 1;
  }

  .page-title > .page-title__action {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  @media (width >= 800px) {
    .page:has(> .page-title > .page-title__action) {
      position: relative;
    }

    .page-title > .page-title__action {
      position: absolute;
      inset-block-start: calc(var(--safe-top) + var(--space-6));
      inset-inline-end: var(--space-6);
    }
  }

  :is(.toolbar, .search-bar, .conversation-bar) ~ .page-title {
    padding-block-start: calc(var(--space-6) + var(--page-inset) / 2);
  }

  :is(.page, .priority-items) > .page-title + * {
    margin-block-start: var(--space-0);
  }

  .page-title__heading {
    --todo-marker-size: var(--item-marker-size);
    --todo-check-size: var(--item-check-size);

    display: flex;
    align-items: center;
    gap: var(--space-5);
  }

  .page-title__heading > * {
    align-self: center;
  }

  .page-title__eyebrow {
    font: var(--type-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--color-ink-faint);
  }

  .page-title__title {
    font: var(--type-display-2);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink-display);
    text-wrap: balance;
  }

  .page-title__lead {
    font: var(--type-body);
    color: var(--color-ink-muted);
    text-wrap: pretty;
  }
}