@layer components {
  /* Footer avatar menu — the personal corner, bottom-left. A lean list of
     tall icon+label rows that pops up from the avatar (BC5-style). The popover
     shell is shared with the palette (palette.css). */

  .avatar-menu__trigger {
    align-items: center;
    anchor-name: --avatar-menu;
    display: inline-flex;
    gap: 0.5ch;
  }

  .avatar-menu {
    --menu-offset: 0.35rem;

    position-anchor: --avatar-menu;
    margin: 0;
    inset: auto;
    inset-block-end: calc(anchor(top, var(--footer-height, 4rem)) + 0.5rem);
    inset-inline-start: anchor(left, var(--inline-space));

    gap: 1px;
    min-inline-size: 24ch;
    padding: var(--block-space-half);
    transform-origin: bottom left;

    /* Closed, the items must not catch pointer events — otherwise hotkey#click
       (guarded only by computed pointer-events) fires their global Shift chords
       while the menu is hidden, e.g. Shift+A signing out from anywhere. The
       footer re-enables pointer-events on its a/button/form, so guard the
       descendants directly rather than the dialog. */
    &:not(:popover-open) :is(a, button, form) {
      pointer-events: none;
    }
  }

  .avatar-menu__theme {
    display: flex;
    justify-content: center;
    padding-block-start: var(--block-space-half);
  }
}