/* Shared native dropdowns: preserve form, keyboard and accessibility behaviour. */
.focus-control select {
  appearance: none;
  padding-inline-end: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 17px center, right 12px center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* Unsupported browsers keep their platform picker. Do not replace selects
   with a separate JS menu or override multi-select/listbox presentation. */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]),
  select:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
  }
  select:not([multiple]):not([size]) {
    gap: 12px;
    text-overflow: ellipsis;
  }
  .focus-control select {
    background-image: none;
    padding-inline-end: 14px;
  }
  select::picker-icon {
    content: '';
    width: 6px;
    height: 6px;
    margin-inline-start: auto;
    margin-inline-end: 2px;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    color: var(--muted, #59655e);
    rotate: 45deg;
    flex-shrink: 0;
    align-self: center;
    translate: 0 -2px;
  }
  select::picker(select) {
    color: var(--text, #25312c);
    background: var(--card, #fff);
    border: 1px solid var(--line, #dce4df);
    border-radius: var(--radius-sm, 9px);
    padding: 4px;
    box-shadow: var(--shadow-popover, 0 8px 24px #0002);
    max-block-size: min(320px, 60dvh);
    overflow: auto;
  }
  select:not([multiple]):not([size]) option {
    background: var(--card, #fff);
    color: var(--text, #25312c);
    padding: 7px 10px;
    border-radius: 5px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  select:not([multiple]):not([size]) option:checked { font-weight: 600; }
  select:not([multiple]):not([size]) option:not(:disabled):hover,
  select:not([multiple]):not([size]):not(:has(option:hover)) option:not(:disabled):focus {
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    outline: none;
  }
  select:not([multiple]):not([size]) option:disabled { color: var(--muted, #59655e); }
}