/* Page Header pattern (layout visual reference: ui-viz page heading, dashboard-composition.md §8): space-between row, aligned to the
   bottom, 24px gap, 20px to the first card. The Breadcrumb is the HM Breadcrumb (its own 14px look, ui-viz had static 12px text).
   Spacing values are pattern-local. */
:root, [data-hm-theme] {
  --hm-page-header-gap: 24px;
  --hm-page-header-margin-bottom: 20px;
  --hm-page-header-breadcrumb-gap: 10px;
  --hm-page-header-title-font-size: 28px;
  --hm-page-header-title-line-height: 36px;
  --hm-page-header-title-font-weight: 700;
  --hm-page-header-title-color: var(--hm-sem-fg-primary);
  --hm-page-header-description-gap: 8px;
  --hm-page-header-description-font-size: 14px;
  --hm-page-header-description-line-height: 20px;
  --hm-page-header-description-color: var(--hm-sem-fg-secondary);
  --hm-page-header-actions-gap: 8px;
}

[data-slot="page-header"] {
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--hm-page-header-gap);
  min-width: 0;
  margin-bottom: var(--hm-page-header-margin-bottom);
}
[data-slot="page-header-content"] {
  flex: 1 1 320px;
  min-width: 0;
}
[data-slot="page-header-content"] > [data-slot="breadcrumb"] {
  margin-bottom: var(--hm-page-header-breadcrumb-gap);
}
[data-slot="page-header-title"] {
  margin: 0;
  color: var(--hm-page-header-title-color);
  font-size: var(--hm-page-header-title-font-size);
  line-height: var(--hm-page-header-title-line-height);
  font-weight: var(--hm-page-header-title-font-weight);
  overflow-wrap: anywhere;
}
[data-slot="page-header-description"] {
  margin: var(--hm-page-header-description-gap) 0 0;
  color: var(--hm-page-header-description-color);
  font-size: var(--hm-page-header-description-font-size);
  line-height: var(--hm-page-header-description-line-height);
  overflow-wrap: anywhere;
}
[data-slot="page-header-actions"] {
  gap: var(--hm-page-header-actions-gap);
  margin-left: auto;
}