@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). */

  .avatar-menu__trigger {
    align-items: center;
    anchor-name: --avatar-menu;
    background: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    gap: 0.5ch;
    padding: 0;
  }

  .avatar-menu {
    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));

    background: var(--color-bg);
    border: var(--border);
    border-radius: 1.25em;
    box-shadow:
      0 0 0 1px oklch(var(--lch-always-black) / 0.04),
      0 0.4em 1.2em -0.4em oklch(var(--lch-always-black) / 0.15),
      0 1em 3em -1em oklch(var(--lch-always-black) / 0.35);
    flex-direction: column;
    gap: 1px;
    min-inline-size: 24ch;
    padding: var(--block-space-half);

    opacity: 0;
    transform: scale(0.95) translateY(0.35rem);
    transform-origin: bottom left;
    transition: 0.2s allow-discrete;
    transition-property: display, opacity, overlay, transform;

    /* 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;
    }

    &:popover-open {
      display: flex;
      opacity: 1;
      transform: none;
    }

    @starting-style {
      &:popover-open {
        opacity: 0;
        transform: scale(0.95) translateY(0.35rem);
      }
    }
  }

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