/*
 * Served as-is from public/ (linked in app/layout.tsx): the CSS build drops the customizable-select
 * syntax (::picker(select), appearance: base-select), so it cannot live in styles/globals.css.
 */
/*
 * DS Select: native option lists cannot use web fonts (Windows Chrome draws them with a system font).
 * Where the customizable select is supported, the list is drawn in the page instead, in the site font
 * and DS colours; other browsers keep the native list. The DS draws its own chevron.
 */
@supports (appearance: base-select) {
  select.ds-select,
  select.ds-select::picker(select) {
    appearance: base-select;
  }
  select.ds-select {
    border: 0;
    padding-block: 0;
    align-items: center;
  }
  select.ds-select::picker-icon {
    display: none;
  }
  select.ds-select::picker(select) {
    margin-block: 4px;
    padding: 6px;
    max-height: 320px;
    border: 0;
    border-radius: 12px;
    background: var(--surface);
    box-shadow:
      var(--shadow-modal),
      0 0 0 1px var(--gray-200);
    font-family: var(--font-sans);
  }
  select.ds-select option {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--color-fg-secondary);
    cursor: pointer;
  }
  select.ds-select option:hover,
  select.ds-select option:focus-visible {
    background: var(--brand-50);
    color: var(--brand-700);
    outline: none;
  }
  select.ds-select option:checked {
    font-weight: 600;
    color: var(--brand-700);
  }
  select.ds-select option::checkmark {
    display: none;
  }
}