/* PageHeader: the snapshot's title block. A mono eyebrow for what the screen belongs to, the title
   in display type, one quiet line under it; the screen's controls on the right, bottom-aligned with
   the title, wrapping to their own line when there is not room for both.

   The title is sized by the width the header has, not the window's: 32 px across a wide page, 24 in
   a phone-width column, which is also what the customer's column is on a desktop. The breakpoint
   is a number because a container query cannot read a custom property. */
/* **A title sits where it sits whether or not its row holds a button** (Reed, 8 Oct 2026: "the
   Orders title sits lower than Designs and Organizations, probably because its row holds a
   button"). It did: `align-items: flex-end` put the words' *bottom* on the button's bottom, and a
   42 px control is taller than a 32/1.1 px title, so on the one page with a button the title
   started seven pixels down. The words are aligned to the row's top now and the actions keep the
   bottom edge they were drawn with, so the title's top is the header's top on every page and the
   controls still finish level with it wherever the words are the taller of the two. */
.page-header {
  container-type: inline-size;
  margin: 0 0 var(--space-7);
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-10);
}

.page-header-words {
  min-width: 0;
}

.page-header-eyebrow {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}

.page-header-title {
  font-size: var(--text-display-4);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin: 0;
}

@container (min-width: 40rem) {
  .page-header-title {
    font-size: var(--text-display-1);
    letter-spacing: var(--tracking-display-1);
  }
}

.page-header-description {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin: var(--space-2) 0 0;
}

.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-self: end;
  gap: var(--space-2);
}