.pw-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pw-space-4);
  margin-top: var(--pw-space-7);
  margin-bottom: var(--pw-space-6);
}

/* Section-level headers (h2+) get top margin for separation from preceding content */
.pw-page-header:has(h2, h3, h4, h5, h6) {
  margin-top: var(--pw-space-8);
}

.pw-page-header__title-row {
  display: flex;
  align-items: center;
  gap: var(--pw-space-3);
}

/* Specificity (0,2,0) beats base.css's `.pw-layout h1, h2, h3` (0,1,1)
   which would otherwise clobber font-weight back to semibold. The
   component supports level: 1–6 so we can't couple to a specific tag. */
.pw-layout .pw-page-header__title {
  font-family: var(--pw-font-display);
  font-size: var(--pw-text-3xl);
  font-weight: var(--pw-weight-bold);
  letter-spacing: var(--pw-tracking-tight);
  color: var(--pw-color-text);
}

.pw-page-header__subtitle {
  font-size: var(--pw-text-lg);
  color: var(--pw-color-text-secondary);
  margin-top: var(--pw-space-2);
}

.pw-page-header__actions {
  display: flex;
  gap: var(--pw-space-2);
  flex-shrink: 0;
}

/* Override Pico's width: 100% on buttons/inputs within the header */
.pw-page-header__actions :is(a, button, [role="button"]) {
  width: auto;
  white-space: nowrap;
}