/* Shared native select styling, including controls loaded by lazy modules. */
html body select:not([multiple]):not([size]),
html body select[size="1"] {
  min-height: 42px;
  max-width: 100%;
  min-width: 0;
  border: 1px solid light-dark(#dce3d6, #46523e);
  border-radius: 10px;
  padding: 10px 14px;
  background: light-dark(#fafbf8, #11170f);
  color: light-dark(#34412f, #e1e8da);
  font: inherit;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

html body select:not([multiple]):not([size]):hover,
html body select[size="1"]:hover {
  border-color: light-dark(#b1c2a1, #81946c);
  background-color: light-dark(#f5f8f0, #192215);
}

html body select:not([multiple]):not([size]):focus,
html body select[size="1"]:focus {
  outline: none;
  border-color: light-dark(#91aa7a, #a0ba7e);
  box-shadow: 0 0 0 3px light-dark(#91aa7a26, #a0ba7e26);
}

html body select:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Unsupported browsers retain their native picker and keyboard behavior. */
@supports (appearance: base-select) {
  html body select:not([multiple]):not([size]),
  html body select[size="1"],
  html body select:not([multiple]):not([size])::picker(select),
  html body select[size="1"]::picker(select) {
    appearance: base-select;
  }

  html body select::picker-icon {
    content: "";
    width: 7px;
    height: 7px;
    margin: 0 3px 3px 18px;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    opacity: .65;
    transition: transform .16s ease;
  }

  html body select:open::picker-icon {
    transform: translateY(3px) rotate(225deg);
  }

  html body select::picker(select) {
    inset-block-start: anchor(bottom);
    inset-block-end: auto;
    position-try-order: normal;
    position-try-fallbacks: flip-block;
    margin-block: 7px;
    padding: 6px;
    border: 1px solid light-dark(#dfe6d8, #46523e);
    border-radius: 13px;
    background: light-dark(#fffffd, #151d12);
    color: light-dark(#34412f, #e1e8da);
    box-shadow: 0 10px 30px #1927131a, 0 2px 6px #19271308;
    max-inline-size: calc(100vw - 24px);
    max-block-size: min(340px, 55dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: light-dark(#ccd7c2, #526348) transparent;
  }

  html body select:not([multiple]):not([size]) option,
  html body select[size="1"] option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 38px;
    padding: 9px 12px;
    margin: 2px 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
  }

  html body select:not([multiple]):is(:not([size]), [size="1"]) option:hover,
  html body select:not([multiple]):is(:not([size]), [size="1"]) option:focus {
    outline: none;
    background: light-dark(#f0f5e9, #293623);
  }

  html body select:not([multiple]):is(:not([size]), [size="1"]) option:checked {
    background: light-dark(#e9f0df, #35492a);
    color: light-dark(#3f5d2b, #d5e8bc);
    font-weight: 600;
  }

  html body select option::checkmark {
    color: light-dark(#638448, #bbd69a);
  }

  html body select:not([multiple]):is(:not([size]), [size="1"]) option:disabled {
    color: light-dark(#8d9685, #88947f);
    cursor: not-allowed;
  }
}

@media (pointer: coarse) {
  html body select:not([multiple]):not([size]),
  html body select[size="1"],
  html body select:not([multiple]):not([size]) option,
  html body select[size="1"] option {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body select,
  html body select::picker-icon {
    transition: none !important;
  }
}