/* One shared selection-list design for the website and both app entries. */
.compact-select-v8__list {
    position: fixed;
    z-index: 10040;
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    padding: 3px;
    border: 1px solid color-mix(in srgb, var(--text-muted) 18%, var(--surface));
    border-radius: 4px;
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--shadow-unified);
    font-size: var(--type-body, 14px);
    text-align: start;
}
.compact-select-v8__option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1.35;
}
.compact-select-v8__option > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.compact-select-v8__check { flex: 0 0 12px; width: 12px; color: var(--primary); }
.compact-select-v8__option.is-active { background: var(--nav-item-active-bg, var(--primary-soft)); }
.compact-select-v8__option.is-selected { color: var(--primary); }
.compact-select-v8__option[aria-disabled="true"] { opacity: .55; cursor: default; }
.compact-select-v8__group { padding: 6px 10px 3px; color: var(--text-muted); font-size: .85em; font-weight: 600; }
select[multiple], select[size]:not([size="1"]):not([size="0"]) { border-radius: 4px; }
select[multiple] > option, select[size]:not([size="1"]):not([size="0"]) > option { padding: 7px 10px; }
select[multiple] > option:checked { color: var(--primary); background: var(--nav-item-active-bg, var(--primary-soft)); }
@media (pointer: coarse) { .compact-select-v8__option { min-height: 44px; } }

/* Existing country and table-choice menus retain their own selection logic. */
.phone-field-v8 .phone-country-menu-v8,
.app-shell--v8 .control-menu-v8__panel--checks {
    padding: 3px;
    border: 1px solid color-mix(in srgb, var(--text-muted) 18%, var(--surface));
    border-radius: 4px;
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--shadow-unified);
}
.app-shell--v8 .control-menu-v8.is-positioned > .control-menu-v8__panel--checks {
    max-height: min(252px, var(--floating-menu-max-height, 252px));
    overflow-y: auto;
    overscroll-behavior: contain;
}
.app-shell--v8 .control-menu-v8__panel--checks > label,
.phone-field-v8 .phone-country-option-v8 {
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 3px;
}
.app-shell--v8 .control-menu-v8__panel--checks > label:has(input:checked),
.app-shell--v8 .control-menu-v8__panel--checks > label:hover,
.phone-field-v8 .phone-country-option-v8.is-selected {
    color: var(--primary);
    background: var(--nav-item-active-bg, var(--primary-soft));
}