Fix benchmark dropdown styling and responsive menus

Author: KSemenenko

site/Features/BenchmarkComparisons/styles.css

@@ -150,10 +150,26 @@ h1 .kl-mark { background-size: 100% .11em; background-position: 0 94%; }
 .qualification-mark { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; flex: none; border-radius: 50%; background: var(--kl-graphite); color: #fff; font: 700 .72rem/1 var(--kl-font-mono); }
 .instrument { border: 1px solid var(--kl-stroke); border-radius: var(--kl-radius-xl); background: var(--kl-sheen), var(--kl-surface); box-shadow: var(--kl-shadow-lg); backdrop-filter: var(--kl-glass); }
 .instrument-bar { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: end; gap: .8rem; padding: 1rem; border-bottom: 1px solid var(--kl-line); }
-.control { display: grid; gap: .35rem; min-width: 0; color: var(--kl-muted); font: 600 .68rem/1.2 var(--kl-font-mono); letter-spacing: .06em; text-transform: uppercase; }
-.control select { width: 100%; min-width: 0; min-height: 42px; padding: 0 .8rem; border: 1px solid var(--kl-line-strong); border-radius: 12px; background: rgba(255, 255, 255, .85); color: var(--kl-ink); font: 500 .9rem var(--kl-font-sans); letter-spacing: -.01em; text-transform: none; }
-.scale-control { display: inline-flex; align-items: center; gap: .5rem; min-height: 42px; padding: 0 1rem; border: 1px solid var(--kl-line); border-radius: 12px; font-size: .88rem; font-weight: 600; white-space: nowrap; }
-.scale-control input { width: 1rem; height: 1rem; accent-color: var(--kl-graphite); }
+.control { position: relative; display: grid; gap: .5rem; min-width: 0; color: var(--kl-muted); font: 600 .68rem/1.2 var(--kl-font-mono); letter-spacing: .06em; text-transform: uppercase; }
+.control::after { content: ""; position: absolute; right: 1.1rem; bottom: 1.2rem; width: .4rem; height: .4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); pointer-events: none; }
+.control select { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; height: 46px; padding: .65rem 2.7rem .65rem 1rem; overflow: hidden; border: 1px solid var(--kl-line-strong); border-radius: 999px; background: var(--kl-sheen), var(--kl-surface); box-shadow: var(--kl-shadow-sm), inset 0 1px 0 #fff; color: var(--kl-ink); font: 500 .9rem/1.3 var(--kl-font-sans); letter-spacing: -.01em; text-align: left; text-overflow: ellipsis; text-transform: none; white-space: nowrap; cursor: pointer; }
+.control select:hover:not(:disabled), .scale-control:hover { border-color: var(--kl-muted); background-color: #fff; }
+.control select:focus-visible { border-color: var(--kl-ink); background-color: #fff; }
+.control select:disabled { color: var(--kl-muted); opacity: .6; cursor: not-allowed; }
+.scale-control { display: inline-flex; align-items: center; gap: .6rem; min-height: 46px; padding: .65rem 1rem; border: 1px solid var(--kl-line-strong); border-radius: 999px; background: var(--kl-sheen), var(--kl-surface); box-shadow: var(--kl-shadow-sm), inset 0 1px 0 #fff; font-size: .88rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
+.scale-control input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--kl-graphite); cursor: inherit; }
+@supports (appearance: base-select) {
+  .control::before { content: ""; position: absolute; z-index: 1; right: 1px; bottom: 1px; width: 2.7rem; height: 44px; border-radius: 0 999px 999px 0; background: linear-gradient(90deg, transparent, var(--kl-surface-solid) .65rem); pointer-events: none; }
+  .control::after { z-index: 2; }
+  .control select, .control select::picker(select) { appearance: base-select; }
+  .control select::picker-icon { display: none; }
+  .control select::picker(select) { max-width: calc(100vw - 2rem); max-height: min(24rem, calc(50vh - 2rem)); margin-block: .4rem; padding: .4rem; border: 1px solid var(--kl-line-strong); border-radius: 20px; background: var(--kl-surface-solid); box-shadow: var(--kl-shadow-lg); }
+  .control optgroup { color: var(--kl-muted); font: 600 .72rem/1.4 var(--kl-font-mono); }
+  .control option { gap: .65rem; min-height: 40px; padding: .65rem .8rem; border-radius: 10px; color: var(--kl-ink); font: 500 .9rem/1.4 var(--kl-font-sans); letter-spacing: -.01em; white-space: normal; cursor: pointer; }
+  .control option:checked { background: var(--kl-surface-3); font-weight: 600; }
+  .control option:hover:not(:disabled), .control option:focus-visible { background: var(--kl-brand-50); }
+  .control option:disabled { color: var(--kl-faint); cursor: not-allowed; }
+}
 .instrument-body { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; }
 .measurement-workspace { min-width: 0; padding: 1.4rem; }
 .scenario-tabs { display: flex; gap: .25rem; width: max-content; max-width: 100%; padding: .25rem; overflow-x: auto; border-radius: 999px; background: var(--kl-surface-3); scrollbar-width: none; }