@layer env.components {
  .env-page-header {
    container: env-page-header / inline-size;
  }
  .env-page-header[data-sticky] {
    --env-page-header-inset: var(--env-page-gutter, 0rem);
    --env-page-header-sticky-top: var(--env-scaffold-sticky-top, 0rem);
    position: sticky;
    inset-block-start: var(--env-page-header-sticky-top);
    z-index: calc(var(--env-z-sticky) - 1);
    margin-block-start: calc(-1 * var(--env-space-4));
    margin-inline: calc(-1 * var(--env-page-header-inset));
    padding-block: var(--env-space-4);
    padding-inline: var(--env-page-header-inset);
    background: var(--env-color-bg-page);
    transition: background-color var(--env-motion-duration-fast) var(--env-motion-ease-enter);
  }
  .env-page-header[data-sticky][data-scrolled] {
    background-color: var(--env-color-bg-muted);
  }
  .env-page-header-start {
    flex: none;
    --env-icon-size: var(--env-picture-size-md);
  }
  .env-page-header-start > :is(img, svg:not([width='1em'])) {
    inline-size: var(--env-icon-size);
    block-size: var(--env-icon-size);
    object-fit: contain;
  }
  .env-page-header-heading {
    flex: 1 1 auto;
  }
  .env-page-header-title-line {
    gap: var(--env-space-1) var(--env-space-3);
  }
  .env-page-header-title {
    text-wrap: balance;
  }
  .env-page-header-actions {
    flex: 1 1 100%;
  }
  @container env-page-header (width >= 37.5rem) {
    .env-page-header-row {
      flex-wrap: nowrap;
    }
    .env-page-header-actions {
      flex: none;
      justify-content: flex-end;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .env-page-header[data-sticky] {
      transition: none;
    }
  }
  @media (forced-colors: active) {
    .env-page-header[data-sticky][data-scrolled] {
      margin-block-end: calc(-1 * var(--env-control-border-width));
      border-block-end: var(--env-control-border-width) solid CanvasText;
    }
  }
}