/* Shared by the main app and the independently styled Settings surface.
   Keep native select semantics, keyboard navigation, labels and form events. */
select option, select optgroup {
  background:var(--paper);
  color:var(--ink);
}
select:focus:not(:focus-visible) { outline:none; }
select:focus-visible {
  outline:2px solid var(--clay) !important;
  outline-offset:3px;
}
/* Progressive enhancement: older browsers retain theme-colored native menus. */
@supports (appearance:base-select) {
  select:not([multiple]):not([size]),
  select:not([multiple]):not([size])::picker(select) { appearance:base-select; }
  select::picker(select) {
    background:var(--paper);
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:.5rem;
    padding:.3rem;
    margin-block:.3rem;
    box-shadow:0 6px 18px rgb(0 0 0 / .15);
    max-height:min(20rem,60dvh);
    overflow:auto;
  }
  select::picker-icon { color:var(--ink-muted); margin-inline-start:.6rem; }
  select option {
    margin-block:2px;
    padding:.55rem .7rem;
    border-radius:.3rem;
    font:inherit;
    min-height:2.25rem;
    gap:.6rem;
  }
  select option:hover,select option:focus-visible {
    background:color-mix(in srgb,var(--clay) 12%,var(--paper));
    color:var(--ink);
    outline:none;
  }
  select option:checked { color:var(--clay); background:var(--paper); }
  select option:checked:hover,select option:checked:focus-visible {
    background:color-mix(in srgb,var(--clay) 12%,var(--paper));
  }
  select option::checkmark { color:var(--clay); }
  select option:disabled { color:var(--ink-muted); opacity:.6; }
}
@media(forced-colors:active) {
  select option,select optgroup,select::picker(select) { background:Canvas; color:CanvasText; }
  select:focus-visible { outline-color:Highlight !important; }
}