/*
 * Page header — app/components/ui/page_header_component.rb
 *
 * One bar: the ancestor trail and the h1 on a single heading line, an
 * optional badge beside the title, actions pushed to the right. The subtitle
 * sits under the bar, in the flow.
 *
 * From --bp-lg up the bar is sticky at the top of the content column. It
 * bleeds across the shell's gutter (--page-gutter, set by the admin shell)
 * and its wash and bottom rule are drawn by a pseudo-element that runs on to
 * the window's right edge, so the rule meets the rail's brand-row rule as one
 * line however wide the window is. The shell clips horizontal overflow
 * (overflow-x: clip, which does not make a scroll container) so that
 * pseudo-element never adds a sideways scroll.
 *
 * Token vars only — enforced by test/lint/css_token_lint_test.rb.
 */

/* display: contents, so the bar's sticky containing block is the content
   column rather than this wrapper (a sticky child can never leave its
   parent, and the wrapper is only as tall as the bar). */
.ui-page-header {
  display: contents;
  --page-header-h: var(--space-16);
}

.ui-page-header__bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  z-index: 0;
  min-height: var(--page-header-h);
  margin: 0 calc(var(--page-gutter, 0px) * -1) var(--space-6);
  padding: var(--space-3) var(--page-gutter, 0px);
}

.ui-page-header__bar::before {
  content: "";
  position: absolute;
  inset: 0 -100vw 0 0;
  z-index: -1;
  background: var(--color-bg);
  border-bottom: var(--border-hairline);
}

.ui-page-header__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
}

/* The trail leads straight into the title, on the title's own line and at
   its size, muted — "Referrals › R-000012" reads as one heading. */
.ui-page-header__trail .ui-breadcrumb__link {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  font-weight: 600;
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.ui-page-header__trail .ui-breadcrumb__link:hover,
.ui-page-header__trail .ui-breadcrumb__link:focus-visible {
  color: var(--color-ink);
}

.ui-page-header__trail .ui-breadcrumb__item {
  gap: var(--space-2);
}

.ui-page-header__trail .ui-breadcrumb__separator {
  color: var(--color-ink-muted);
}

.ui-page-header__title {
  margin: 0;
  min-width: 0;
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  font-weight: 600;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.ui-page-header--title-lg .ui-page-header__title {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl--line-height);
}

.ui-page-header__badge {
  display: inline-flex;
  flex-shrink: 0;
}

.ui-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-inline-start: auto;
}

.ui-page-header__subtitle {
  margin: calc(var(--space-2) * -1) 0 var(--space-6);
  max-width: 60ch;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-ink-muted);
}

@media (min-width: 1024px) {
  .ui-page-header__bar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
  }
}

@media (max-width: 767px) {
  .ui-page-header--title-lg .ui-page-header__title {
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
  }

  .ui-page-header__trail .ui-breadcrumb__link,
  .ui-page-header__title {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
  }
}