@layer components {
  /* Row / object actions. Uses <details> so it works without JS. */
  .menu { position: relative; display: inline-block; }
  .menu > summary { list-style: none; cursor: pointer; }
  .menu > summary::-webkit-details-marker { display: none; }

  /* Clicking outside closes the menu without JS: the open summary casts a
     transparent full-viewport overlay, so any outside click toggles it shut
     (the panel sits above the overlay, so its items still receive clicks). */
  .menu[open] > summary::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 10;
    cursor: default;
  }

  .menu__list {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 12rem;
    padding: var(--space-1);
    background: var(--surface-raised);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    box-shadow: 0 6px 22px rgba(20, 18, 12, 0.14);
    z-index: 20;
  }
  /* For a trigger near the container's left edge, drop the panel rightward. */
  .menu--start .menu__list { left: 0; right: auto; }
  .menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink);
    text-decoration: none;
    border-radius: var(--radius-sm);
  }
  .menu__item:hover { background: var(--surface); text-decoration: none; }
  /* button_to items render as <form class="button_to"><button> */
  .menu__list .button_to { display: block; }
  button.menu__item { background: none; border: 0; text-align: left; cursor: pointer; }
  .menu__item .icon { width: 1em; height: 1em; color: var(--ink-3); }
  .menu__item--danger { color: var(--seal); }
  .menu__item--danger .icon { color: var(--seal); }
  .menu__sep { height: 1px; margin: var(--space-1) 0; background: var(--rule); }
}