/* Shared action menus: neutral surfaces, compact rows and visible keyboard focus. */
.app-context-menu {
    --context-menu-radius: 0;
    --context-menu-item-radius: 0;
    --context-menu-padding: 8px;
    --context-menu-row-height: 38px;
    box-sizing: border-box;
    display: grid;
    gap: 2px;
    padding: var(--context-menu-padding);
    border: 1px solid var(--border-default);
    border-radius: var(--context-menu-radius);
    background: var(--surface-1);
    color: var(--text-primary);
    box-shadow: var(--shadow-popover);
    animation: context-menu-appear 180ms ease-out;
}
:is(.app-context-menu:not(.app-context-menu--mixed) :where(button), .app-context-menu__item) {
    width: 100%;
    min-width: 0;
    min-height: var(--context-menu-row-height);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--context-menu-padding);
    border: 0;
    border-radius: var(--context-menu-item-radius);
    background: transparent;
    color: var(--text-primary);
    font: 400 var(--font-size-100)/var(--line-height-control) var(--site-font-body);
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background 150ms ease;
}
:is(.app-context-menu:not(.app-context-menu--mixed) :where(button), .app-context-menu__item) i { flex-shrink: 0; color: inherit; }
:is(.app-context-menu:not(.app-context-menu--mixed) :where(button), .app-context-menu__item):is(:hover, .active, [aria-current="page"], [aria-expanded="true"]) { background: var(--surface-hover); }
:is(.app-context-menu:not(.app-context-menu--mixed) :where(button), .app-context-menu__item):focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
:is(.app-context-menu:not(.app-context-menu--mixed) :where(button), .app-context-menu__item):is(.is-danger, .danger) { color: var(--danger); }
:is(.app-context-menu:not(.app-context-menu--mixed) :where(button), .app-context-menu__item):disabled { opacity: .5; cursor: not-allowed; background: transparent; }
.app-context-menu__separator { height: 1px; margin: 4px; border: 0; opacity: 1; background: var(--border-muted); }
.app-context-menu[hidden] { display: none; }
@media (pointer: coarse) {
    .app-context-menu { --context-menu-row-height: 44px; }
}
@keyframes context-menu-appear {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .app-context-menu,
    :is(.app-context-menu:not(.app-context-menu--mixed) :where(button), .app-context-menu__item) { animation: none; transition: none; }
}