/* ═══ NATIVE CHROME CLEANUP ═══════════════════════════════════════════ Custom select (replaces the OS-rendered open option list — the one thing the base select's appearance:none couldn't reach), plus small resets for the number-spinner and date-icon native controls. */ /* ── Custom select ─────────────────────────────────────────────────────── */ .csel { position: relative; display: inline-block; width: 100%; } .csel-native { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .csel-trigger { appearance: none; -webkit-appearance: none; font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--hairline); /* Button group (5px), not field group: a dropdown reads as a clickable pill with a chevron, and in toolbar rows (.tdl-sort, .trk-picker) it sits beside real buttons. Trades a slight mismatch with text inputs in form bodies for matching the buttons it visually belongs with. */ border-radius: var(--radius-md); padding: 0 24px 0 8px; height: var(--control-h); width: 100%; display: block; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-repeat: no-repeat; background-position: right 8px center; background-size: 9px 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%235c5953' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } body.dark .csel-trigger { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%239c9c9c' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .csel-trigger:hover { border-color: var(--fg); background-color: var(--hover-bg); } .csel-trigger:disabled { cursor: default; opacity: .5; } .csel.open .csel-trigger { border-color: var(--fg); } /* Match the two contexts that sized the native