:root {
    /* hooks only. skin overrides these */
    --menu-bg: transparent;
    --menu-border: 1px solid transparent;
    --title-padding: 4px;
    --item-padding-y: 6px;
    --item-padding-x: 8px;
    --font-size: 14px;
}

/* container position and visibility */
#context-menu {
    position: absolute;
    display: none;
    width: max-content;
    /* visuals come from skin.css */
}

/* simple block title */
#menu-title {
    padding: var(--title-padding);
    margin-bottom: 2px;
    /* visuals come from skin.css */
}

/* vertical list of buttons */
#button-container {
    display: flex;
    flex-direction: column;
    /* optional separation line. skin can override or remove */
    border: var(--menu-border);
}

/* menu item hit area and layout */
.menu-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    padding: var(--item-padding-y) var(--item-padding-x);
    width: 100%;
    text-align: left;

    border: 0;
    background: none;
    cursor: pointer;
    font-size: var(--font-size);
}

/* do not set colors here. only flow */
.left-text,
.right-text {
    flex-grow: 0;
    text-align: left;
    white-space: pre;
}

/* minimal affordance without color */
.menu-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* optional hover state kept neutral */
.menu-button:hover {
    filter: brightness(1.05);
}

/* high contrast users will still see it via outline */
@media (prefers-reduced-motion: reduce) {
    .menu-button { transition: none; }
}