@layer components {
  .c-component-page__header:has(> .c-composition-header-surface--sticky) { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); }
  .c-composition-header-surface { position: relative; }
  .c-composition-header-surface--sticky { background: color-mix(in srgb,var(--wa-header-background) 88%,transparent); border-block-end: var(--wa-border-width) solid var(--wa-color-border); backdrop-filter: blur(var(--space-4)); }
  .c-composition-header-surface--opaque { background: var(--wa-header-background); backdrop-filter: none; }
  .c-composition-header-surface--scroll-shadow[data-scrolled="true"] { box-shadow: 0 .5rem 1.5rem color-mix(in srgb,var(--wa-color-text) 8%,transparent); }
  .c-composition-header--compact.c-composition-container { padding-block: var(--space-4); }
  .c-composition-header--compact > .c-composition-navigation { padding-block: 0; }
  .c-composition-header--roomy { min-block-size: 6.2rem; }
  .c-composition-header--bar { display: flex; flex-wrap: nowrap; gap: var(--space-4); align-items: center; justify-content: space-between; }
  .c-composition-header--bar > * { min-inline-size: 0; }
  .c-composition-header--bar > :first-child { flex: 0 1 auto; }
  .c-composition-header--bar > .c-composition-navigation { flex: 0 0 auto; }
  .c-composition-header--bar .c-composition-link-box__copy { min-inline-size: 0; }
  @media (max-width: 50rem) {
    .c-composition-header--bar { flex-wrap: wrap; }
    .c-composition-header--bar > :first-child { flex: 1 0 auto; }
    .c-composition-header--bar > .c-component-action { flex: 0 0 auto; white-space: nowrap; }
  }
}