@layer modules {
  /* Positioned by row_menu_controller.js, end-aligned under its trigger.
     Items reuse .popup__btn so they read like the nav selector's menu rows. */
  .row-menu__popup {
    --btn-background: transparent;

    background: var(--color-surface);
    border: 1px solid var(--color-ink-light);
    border-radius: var(--radius);
    color: var(--color-ink);
    filter: drop-shadow(0 0.5rem 1.5rem oklch(var(--lch-void) / 15%));
    inset: auto;
    margin: 0;
    min-inline-size: 14ch;
    padding: var(--block-space-half);
    position: fixed;

    &:popover-open {
      display: flex;
      flex-direction: column;
      row-gap: calc(var(--block-space-half) / 2);
    }

    /* button_to wraps its button in a form; let the button be the row. */
    form {
      display: contents;
    }

    .popup__btn:hover {
      --btn-background: var(--color-ink-lightest);

      filter: none;
    }
  }
}