@layer components {
  /*
   * Header with centered menu trigger
   *
   * Layout: [actions-start] [menu trigger + title] [actions-end]
   * On mobile: stacks title below trigger
   */
  .header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "start center end";
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space-sm) var(--inline-space-lg);
    block-size: var(--header-height);
    background-color: var(--color-canvas);
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
  }

  .header__start {
    grid-area: start;
    display: flex;
    align-items: center;
    gap: var(--inline-space);
  }

  .header__center {
    grid-area: center;
    display: flex;
    align-items: center;
    gap: var(--inline-space);
  }

  .header__end {
    grid-area: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--inline-space);
  }

  /*
   * Page title in header
   */
  .header__title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-ink);
  }

  /*
   * Skip to main content link (accessibility)
   */
  .header__skip {
    position: absolute;
    inset-inline-start: -9999px;
  }

  .header__skip:focus {
    inset-inline-start: var(--inline-space-lg);
    z-index: 100;
  }

  /*
   * Mobile: Stack title below center
   */
  @media (max-width: 640px) {
    .header--mobile-stack {
      grid-template-columns: auto 1fr auto;
      grid-template-rows: auto auto;
      grid-template-areas:
        "start center end"
        "title title title";
      block-size: auto;
      padding-block: var(--block-space-sm);
    }

    .header--mobile-stack .header__center {
      justify-content: center;
    }

    .header--mobile-stack .header__title {
      grid-area: title;
      text-align: center;
      padding-block-start: var(--block-space-sm);
      font-size: var(--text-base);
    }
  }
}