/* wr-controls.css — brand styling for the NATIVE dropdown list, on EVERY page (Bjorn 2026-09-13: "not sure what we
   have to do to fix this once and for all? Why do these constantly come up out of brand???").

   WHY IT KEPT HAPPENING
   A <select>'s option list is not part of the page: the browser draws it as its own pop-up. The page's CSS on the
   select (dark background, Poppins) does not reach that pop-up, and the pop-up cannot use web fonts — so a select
   styled `font-family: Poppins` opened a WHITE list in the browser's default SERIF font. It had been patched three
   times in three stylesheets (console-elektra.css, wr-shell.css, console.css .psel), each for its own pages only,
   so every new page or dropdown met the bug again.

   THE FIX
   This one file is injected by the worker into every HTML page it serves (src/index.js injectControlsCss), after the
   page's own CSS, so no page has to remember it.
     * Chromium 135+ (Chrome, Edge): `appearance: base-select` makes the list part of the page, so it is fully branded
       — Poppins, rounded panel, orange hover/selection.
     * The list's colours come FROM THE SELECT ITSELF: its text colour, and the inverse of it for the panel. A dark
       page (light text) gets a dark list, a light page (dark text) a light list — no per-page theme flag needed.
     * Other browsers keep their native pop-up, with a sans-serif font instead of serif. */

select:not([multiple]):not([size]) option,
select:not([multiple]):not([size]) optgroup {
  font-family: Poppins, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

@supports (appearance: base-select) and (color: rgb(from currentColor r g b)) {
  select:not([multiple]):not([size]) { appearance: base-select; }
  select:not([multiple]):not([size])::picker-icon { color: currentColor; opacity: .7; transition: rotate .15s ease; }
  select:not([multiple]):not([size]):open::picker-icon { rotate: 180deg; }

  select:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
    /* the panel is the inverse of the select's text colour: light text -> near-black panel, dark text -> near-white */
    background-color: rgb(from currentColor calc(255 - r * .93) calc(255 - g * .93) calc(255 - b * .93));
    color: inherit;
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    border-radius: 10px;
    padding: 4px;
    margin-block: 4px;
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .55);
    font-family: Poppins, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 13px;
  }
  select:not([multiple]):not([size]) option {
    padding: 7px 10px;
    border-radius: 7px;
    background: transparent;
    color: inherit;
  }
  select:not([multiple]):not([size]) option:hover,
  select:not([multiple]):not([size]) option:focus-visible { background: rgba(241, 89, 36, .16); outline: none; }
  select:not([multiple]):not([size]) option:checked { background: rgba(241, 89, 36, .26); font-weight: 600; }
  select:not([multiple]):not([size]) option::checkmark { color: #f15924; }
  select:not([multiple]):not([size]) option:disabled { opacity: .5; background: transparent; }
}