/* Shared select styling; native semantics and keyboard navigation are retained. */
:root { --select-hover: #e5f7fe; --select-chosen: #eeecff; --select-focus: #54c7ea; }
:root[data-theme='dark'] { --select-hover: #293f4b; --select-chosen: #39354e; }
:root body select {
  color: var(--fg);
  border-width: 1px;
  border-color: var(--border);
  border-radius: 10px;
  background-color: var(--surface);
  font-family: inherit;
  font-weight: 400;
  cursor: pointer;
}
:root body .toolbar select {
  height: 40px;
  min-height: 40px;
  padding-block: 0;
  padding-inline: 12px 34px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--surface);
}
@media (hover: hover) and (pointer: fine) { :root body select:hover:not(:disabled) { border-color: #a9cdda; } }
:root body select:focus-visible { outline: 2px solid var(--select-focus); outline-offset: 2px; box-shadow: none; }
:root body select:disabled { cursor: not-allowed; background-color: var(--surface-alt); color: var(--fg-muted); opacity: .65; }
:root body select option { background: var(--surface); color: var(--fg); }
:root body .gfield--select > select { border: 0; background-color: transparent; }
:root body .gfield--select .gfield__outline { border-width: 1px; border-radius: 10px; }
:root body .gfield--select:focus-within .gfield__outline { border-color: var(--select-focus); }
:root body .fin-select { border: 1px solid var(--border); border-radius: 10px; background-color: var(--surface); }
:root body .fin-select select { border: 0; background-color: transparent; }
:root body .fin-select:focus-within { box-shadow: 0 0 0 2px var(--select-focus); }
:root[data-theme='dark'] select { color-scheme: dark; }
:root:not([data-theme='dark']) select { color-scheme: light; }
/* Browsers supporting customizable selects also receive a styled open menu. */
@supports (appearance: base-select) {
  :root body select:not([multiple]):not([size]),
  :root body select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  :root body select:not([multiple]):not([size]) { background-image: none; align-items: center; }
  :root body select::picker-icon { color: var(--fg-muted); margin-inline-start: auto; }
  :root body select::picker(select) {
    padding: 6px;
    margin-block: 6px;
    background: var(--surface);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 28px #26354b22;
    max-height: min(320px, 60vh);
    overflow-y: auto;
  }
  :root body select option { padding: 10px 12px; min-height: 36px; border-radius: 7px; font-size: 13px; }
  :root body select option:focus { background: var(--select-hover); }
@media (hover: hover) and (pointer: fine) { :root body select option:hover { background: var(--select-hover); } }
  :root body select option:checked { background: var(--select-chosen); }
  :root body select option::checkmark { color: #54a8c4; }
  :root body .gfield--select::after { display: none; }
}