/* Keep native form, keyboard and change-event behavior; enhance supported browsers. */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]),
  select:not([multiple])[size="1"],
  select:not([multiple]):not([size])::picker(select),
  select:not([multiple])[size="1"]::picker(select) { appearance: base-select; }

  select:not([multiple]):not([size]), select:not([multiple])[size="1"] {
    align-items: center;
    gap: 12px;
    cursor: pointer;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: start;
  }
  select::picker-icon {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    margin-inline-start: auto;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: rotate(45deg);
    color: var(--olive, #4c6245);
  }
  select:open::picker-icon { transform: rotate(225deg); }
  select::picker(select) {
    box-sizing: border-box;
    margin-block: 8px;
    padding: 6px;
    border: 1px solid var(--line, #e0e5d5);
    border-radius: 12px;
    background: var(--paper, #fffef9);
    color: var(--ink, #293a2d);
    box-shadow: 0 12px 32px rgb(41 58 45 / 14%);
    width: anchor-size(width);
    min-width: 0;
    max-width: calc(100vw - 24px);
    max-height: min(320px, 50dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #b8c5aa transparent;
  }
  select:not([multiple]):not([size]) option,
  select:not([multiple])[size="1"] option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink, #293a2d);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
  }
  select:not([multiple]):not([size]) option:is(:hover,:focus-visible),
  select:not([multiple])[size="1"] option:is(:hover,:focus-visible) { background: #edf1e6; outline: none; }
  select:not([multiple]):not([size]) option:checked,
  select:not([multiple])[size="1"] option:checked { background: #e5ecd9; color: #354e2c; font-weight: 600; }
  select option::checkmark { order: 1; margin-inline-start: auto; color: #47623b; }
  select option:disabled, select:disabled { opacity: .5; cursor: not-allowed; }
  select optgroup { font: inherit; color: var(--muted, #78836e); }
}
select[multiple], select[size]:not([size="1"]) { scrollbar-width: thin; scrollbar-color: #b8c5aa transparent; }