@layer components {
  .c-composition-navigation { position: relative; padding-block: var(--space-4); min-inline-size: 0; overflow-wrap: anywhere; }
  .c-composition-navigation__items { --cluster-gap: var(--space-4); }
  .c-composition-navigation--vertical .c-composition-navigation__items { flex-direction: column; align-items: flex-start; }
  .c-composition-navigation--large { font-size: var(--wa-font-lead-size); }
  .c-composition-navigation__toggle[hidden], .c-composition-navigation__items[hidden] { display: none; }
  .c-composition-navigation__toggle { --btn-bg: var(--wa-color-surface); --btn-fg: var(--wa-color-text); --btn-border: var(--wa-color-border); --btn-bg-hover: var(--wa-color-accent-soft); }
  .c-composition-navigation__items a[aria-current] { text-decoration: underline; text-underline-offset: .25em; }
  @media (max-width: 62rem) {
    .c-composition-navigation--collapsible.is-enhanced .c-composition-navigation__items {
      position: absolute; inset-block-start: 100%; inset-inline-end: 0; z-index: 20;
      inline-size: min(24rem, calc(100vw - var(--gutter) * 2)); max-block-size: 70dvh; overflow-y: auto;
      flex-direction: column; align-items: stretch; padding: var(--space-4);
      background: var(--wa-color-surface); color: var(--wa-color-text);
      border: var(--wa-border-width) solid var(--wa-color-border); border-radius: var(--wa-radius-panel); box-shadow: var(--wa-shadow-level);
    }
    .c-composition-navigation--collapsible.is-enhanced .c-composition-navigation__items a { white-space: normal; }
  }
}