/* routr native select theme. Load after the page's existing styles.
   Classic OS pickers may ignore option colors. No custom combobox or JS.
   Preserve the browser/OS palette when forced colors are active. */
@media (forced-colors: none) {
  :root select {
    color-scheme: dark;
    accent-color: #9ed9ac;
    background-color: #111613;
    color: #d5ddd7;
    border-color: #789a84;
  }

  :root select:focus-visible {
    outline: 1px solid #9ed9ac;
    outline-offset: 4px;
  }

  :root select option,
  :root select optgroup {
    background-color: #111613;
    color: #d5ddd7;
  }

  :root select option:checked {
    background-color: #234b31;
    color: #e4f7e9;
  }

  :root select:disabled,
  :root select option:disabled,
  :root select optgroup:disabled,
  :root select optgroup:disabled option {
    color: #93a499;
    cursor: default;
  }

  /* Enhance single dropdowns only; leave listboxes and multi-selects native.
     Both parts must opt in. Unsupported browsers ignore this entire block. */
  @supports (appearance: base-select) and selector(select::picker(select)) {
    :root select:not([multiple]):is(:not([size]), [size="0"], [size="1"]),
    :root select:not([multiple]):is(:not([size]), [size="0"], [size="1"])::picker(select) {
      appearance: base-select;
    }

    :root select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) {
      column-gap: 1em;
    }

    :root select:not([multiple]):is(:not([size]), [size="0"], [size="1"])::picker(select) {
      background: #111613;
      color: #d5ddd7;
      border: 1px solid #789a84;
      border-radius: 2px;
      padding: 4px;
      font: inherit;
      box-shadow: 0 8px 24px #0008;
      max-block-size: min(22rem, 70dvh);
      max-inline-size: calc(100vw - 16px);
      overflow: auto;
      /* Keep native anchor positioning and viewport collision handling. */
    }

    :root select:not([multiple]):is(:not([size]), [size="0"], [size="1"])::picker-icon {
      color: #9ed9ac;
    }

    :root select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) option {
      min-block-size: 44px;
      padding: 10px 12px;
      border-radius: 1px;
      font: inherit;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    :root select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) option:not(:disabled):is(:hover, :focus) {
      background-color: #326044;
      color: #f0fff4;
    }

    :root select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) option:focus-visible {
      outline: 1px solid #9ed9ac;
      outline-offset: -2px;
    }

    :root select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) option::checkmark {
      color: #9ed9ac;
    }
  }
}

/* Respect the user's contrast theme, including its chosen highlight color.
   !important only counteracts the existing page's more-specific brand rules. */
@media (forced-colors: active) {
  :root select {
    appearance: auto !important;
    forced-color-adjust: auto;
    color-scheme: light dark;
    background-color: Field !important;
    color: FieldText !important;
    border-color: ButtonText !important;
  }

  :root select:focus-visible {
    outline-color: Highlight !important;
  }

  :root select option:checked {
    background-color: Highlight;
    color: HighlightText;
  }
}