/* Shared dropdown design. Native selects retain form, keyboard and focus behavior. */
:root body select {
  color: #f0f2ee;
  background-color: #252825;
  border: 1px solid #414440;
  border-radius: 12px !important;
  padding: 12px 14px;
  min-height: 44px;
  max-width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  box-sizing: border-box;
}
:root body select:hover:not(:disabled) { border-color: #81927e; }
:root body select:focus-visible { outline: 2px solid #c4edbb; outline-offset: 3px; }
:root body select:disabled { opacity: .5; cursor: not-allowed; }
@supports (appearance: base-select) {
  :root body select:not([multiple]),
  :root body select:not([multiple])::picker(select) { appearance: base-select; }
  :root body select::picker(select) {
    background: #303130;
    color: #f0f2ee;
    border: 1px solid #414440;
    border-radius: 12px;
    padding: 8px;
    margin-block: 6px;
    box-shadow: 0 18px 50px #0007;
    max-height: min(360px, 60dvh);
    max-width: calc(100vw - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #687264 transparent;
  }
  :root body select::picker-icon { color: #b5c5b0; margin-inline-start: 12px; }
  :root body select:open::picker-icon { rotate: 180deg; }
  :root body select option {
    padding: 12px;
    min-height: 44px;
    border-radius: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
    cursor: pointer;
  }
  :root body select option:hover,
  :root body select option:focus { background: #454743; outline: none; }
  :root body select option:checked { background: #354431; color: #dcf6d5; }
  :root body select option::checkmark { color: #c4edbb; }
  :root body select option:disabled { opacity: .45; cursor: not-allowed; }
  :root body select optgroup { padding: 6px; color: #b5c5b0; }
}