:is(.lesson-code-editor__menu, .task-code-language-menu) {
    position: fixed;
    inset: var(--code-menu-y, 0px) auto auto var(--code-menu-x, 0px);
    margin: 0;
    width: 156px;
    max-width: calc(100vw - 16px);
    max-height: min(300px, calc(100dvh - 16px));
    overflow: auto;
    padding: 4px;
    border: 1px solid var(--border-default);
    border-radius: 7px;
    background: var(--surface-1);
    color: var(--text-primary);
    box-shadow: var(--shadow-popover);
    font: 400 var(--font-size-sm)/1.35 var(--site-font-body);
    white-space: normal;
}

:is(.lesson-code-editor__menu, .task-code-language-menu):popover-open { animation: code-language-enter .14s ease-out; }
:is(.lesson-code-editor__menu, .task-code-language-menu) button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 28px;
    padding: 4px 9px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
:is(.lesson-code-editor__menu, .task-code-language-menu) button:hover,
:is(.lesson-code-editor__menu, .task-code-language-menu) button:focus-visible {
    outline: 0;
    background: var(--surface-hover);
}
:is(.lesson-code-editor__menu, .task-code-language-menu) button[aria-checked="true"] {
    background: var(--site-accent-soft);
    color: var(--site-accent);
}
@keyframes code-language-enter {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    :is(.lesson-code-editor__menu, .task-code-language-menu):popover-open { animation: none; }
}


.task-code-language-menu button img { width: 22px; height: 22px; object-fit: contain; }