@layer components {
  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
  }

  .site-nav__link {
    padding: 0.45em 0.75em;
    border-radius: var(--radius-m);
    color: var(--color-text-muted);
    font-size: var(--step--1);
    font-weight: 560;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);

    &:hover, &[aria-current="page"] {
      color: var(--color-text);
      background-color: color-mix(in oklab, var(--color-text) 6%, transparent);
    }
  }

  /* Account menu trigger: avatar with initials */
  .avatar-button {
    anchor-name: --account-menu;
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-full);
    background-color: var(--color-accent-subtle);
    color: var(--color-accent);
    font-size: var(--step--1);
    font-weight: 650;
    cursor: pointer;

    &:focus-visible {
      border-radius: var(--radius-full);
    }
  }

  /*
   * Account menu uses the native Popover API (light dismiss, Esc, focus handling)
   * and CSS anchor positioning to sit under its trigger.
   */
  .menu {
    position-anchor: --account-menu;
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-block;
    min-inline-size: 15rem;
    margin: var(--space-2xs) 0 0;
    padding: var(--space-3xs);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-l);
    background-color: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-l);
    opacity: 1;
    translate: 0 0;
    transition:
      opacity var(--duration-base) var(--ease-out),
      translate var(--duration-base) var(--ease-out),
      overlay var(--duration-base) allow-discrete,
      display var(--duration-base) allow-discrete;

    &:not(:popover-open) {
      opacity: 0;
      translate: 0 -0.25rem;
    }

    @starting-style {
      &:popover-open {
        opacity: 0;
        translate: 0 -0.25rem;
      }
    }

    /* Fallback for browsers without anchor positioning: pin to the top right. */
    @supports not (position-area: block-end) {
      inset: 4rem var(--gutter) auto auto;
    }
  }

  .menu__header {
    display: flex;
    flex-direction: column;
    padding: var(--space-2xs) var(--space-xs);
    font-size: var(--step--1);

    & strong { font-weight: 600; }
    & span { color: var(--color-text-muted); }
  }

  .menu__separator {
    margin-block: var(--space-3xs);
  }

  .menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    inline-size: 100%;
    padding: 0.55em var(--space-xs);
    border: none;
    border-radius: var(--radius-m);
    background: transparent;
    color: var(--color-text);
    font-size: var(--step--1);
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    cursor: pointer;

    &:hover, &:focus-visible {
      background-color: color-mix(in oklab, var(--color-text) 6%, transparent);
      box-shadow: none;
    }
  }
}