/* Shared dropdowns. Native selects remain the source of values. */
.kompres-select { position: relative; --select-green: var(--accent); }
html.light .kompres-select { --select-green: #3d7000; }
.kompres-select.is-open { z-index: 20; }
.kompres-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface2); color: var(--text); font: 500 .9rem/1.5 var(--font-mono); text-align: left; cursor: pointer; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.kompres-select-trigger span { min-width: 0; overflow-wrap: anywhere; }
.kompres-select-trigger::after { content: ''; flex: 0 0 7px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 200ms ease; }
.kompres-select-trigger[aria-expanded="true"]::after { transform: rotate(225deg) translate(-2px, -1px); }
.kompres-select-trigger:hover:not(:disabled), .kompres-select-trigger[aria-expanded="true"] { border-color: var(--select-green); }
.kompres-select-trigger:focus-visible { outline: 2px solid var(--select-green); outline-offset: 3px; }
.kompres-select-trigger:disabled { opacity: .45; cursor: not-allowed; }
.kompres-select-menu { position: absolute; top: calc(100% + 8px); left: 0; width: 100%; margin: 0; padding: 8px; list-style: none; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); box-shadow: 0 12px 30px rgba(0,0,0,.22); max-height: 260px; overflow-y: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(-7px); visibility: hidden; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms; }
.kompres-select.is-open .kompres-select-menu { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; transition-delay: 0s; }
.kompres-select-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 12px; min-height: 46px; border-radius: 7px; color: var(--text); font: .85rem/1.5 var(--font-mono); overflow-wrap: anywhere; cursor: pointer; transition: background 160ms ease, color 160ms ease; }

.kompres-select-option + .kompres-select-option { margin-top: 6px; }
.kompres-select-option[aria-selected="true"] { background: var(--accent-dim); color: var(--select-green); }
.kompres-select-option:not([aria-selected="true"]):is(.is-active, :hover) { background: var(--surface2); color: var(--select-green); box-shadow: inset 0 0 0 1px var(--select-green); }
.kompres-select-option[aria-selected="true"]:hover { box-shadow: inset 0 0 0 1px var(--select-green); }
.kompres-select { min-width: 0; }
.target-size-row .kompres-select { flex: 0 0 94px; }
.target-size-row .kompres-select-trigger { min-height: 46px; padding: 12px; }
.target-size-row .kompres-select-option { padding: 12px 8px; gap: 4px; }
.editor-controls .kompres-select { min-width: 120px; }
.editor-controls .kompres-select-trigger { min-height: 46px; padding: 12px 14px; font: 500 .85rem/1.5 var(--font-mono); }

.kompres-select-option[aria-selected="true"]::after { content: '✓'; font-weight: bold; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .kompres-select-trigger, .kompres-select-trigger::after, .kompres-select-menu, .kompres-select-option { transition: none; } }