/* Shared controls. Native select retains its value, events and validation. */
button { min-width: 44px; }
select {
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  text-overflow: ellipsis;
}
select:disabled { opacity: .45; cursor: default; }
button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@supports (appearance: base-select) {
  select, select::picker(select) { appearance: base-select; }
  select { display: inline-flex; align-items: center; justify-content: space-between; white-space: nowrap; }
  select::picker(select) {
    padding: 4px;
    margin-block: 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 10%, transparent);
    max-block-size: min(320px, 50dvh);
    max-inline-size: calc(100vw - 16px);
    overflow: auto;
  }
  select::picker-icon { color: var(--muted); margin-inline-start: 8px; }
  select option {
    min-block-size: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    gap: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  select option:checked { color: var(--accent); background: var(--pale); }
  select option:hover, select option:focus-visible { background: var(--pale); }
  select option::checkmark { color: var(--accent); }
}