@layer components {
  /* The signed-in user's photo and first name, which opens their menu */
  .user-menu__button {
    --btn-padding: 0.25em 0.5em;

    anchor-name: --user-menu;
    min-inline-size: 0;
  }

  /* Phones have room for the photo alone, but screen readers still announce the name */
  .user-menu__name {
    @media (max-width: 639px) {
      block-size: 1px;
      clip-path: inset(50%);
      inline-size: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
    }
  }

  /* A native popover, which closes on Escape or a click elsewhere. It hangs from its button's end edge. */
  .user-menu {
    background-color: var(--color-canvas);
    border: var(--border);
    border-radius: var(--radius);
    color: var(--color-ink);
    flex-direction: column;
    inset: auto;
    margin: var(--block-space-half) 0 0;
    min-inline-size: 12rem;
    padding: var(--block-space-half);
    position-anchor: --user-menu;
    position-area: block-end span-inline-start;

    &:popover-open {
      display: flex;
    }

    /* Without anchor positioning, the button's spot at the end of the header is close enough */
    @supports not (anchor-name: --user-menu) {
      inset-block-start: calc(3rem + var(--safe-inset-top));
      inset-inline-end: var(--main-padding);
      position: absolute;
    }
  }
}