/* Bound desktop dropdowns in the page instead of tall OS popups, which can
   move offscreen and commit a selection on the opening click in Chrome.
   Keep touch pickers and unsupported browsers native. Multiple/visible-list
   selects are separate controls; data-native-select is an explicit escape hatch. */
@supports (appearance: base-select) {
  @media (hover: hover) and (pointer: fine) {
    select:not([multiple]):not([size]:not([size="0"], [size="1"])):not([data-native-select]):not([hidden]) {
      appearance: base-select;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
      min-inline-size: 0;
      background-image: none;
      padding-inline-end: .75rem;

      &::picker(select) {
        appearance: base-select;
        position-area: block-end span-inline-end;
        position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
        position-try-order: most-height;
        box-sizing: border-box;
        max-block-size: min(18rem, 100%);
        max-inline-size: calc(100vw - 1rem);
        overflow: auto;
        overscroll-behavior: contain;
        border: 1px solid #b7c5d6;
        border-radius: 6px;
        background: #fff;
        color: #17293b;
        font: inherit;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
      }

      & option {
        min-block-size: 40px;
        padding: .5rem .75rem;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      & option:not(:disabled):is(:hover, :focus-visible) { background: #e4edf6; }
      & option:checked { background: #002868; color: #fff; }
      & option:disabled { color: GrayText; }
      &:focus-visible { outline: 2px solid #002868; outline-offset: 2px; }
    }
  }
}