/* ===== ONE SELECT ARROW (2026-10-30) =====
   Every one-line <select> on the site draws OUR arrow, never the browser's
   (which sat against the right border): two gradient strokes, so it takes a
   token (an SVG data URI cannot read a variable), 10px in from the right edge,
   with 28px of padding beside it so the text never runs under it. The arrow,
   its room and its place are !important, because a page rule that sets
   `padding` or `background` as a shorthand would otherwise take them away. A
   page TUNES them, never draws an arrow of its own:
     --tmb-select-room     padding-right (28px)
     --tmb-select-arrow-x  the arrow's right end from the edge (10px)
     --tmb-select-arrow    its colour (--tmb-gray-600; transparent = no arrow)
   The rest (border, radius, white) has no weight at all (:where), so any page
   rule restyles the box. A list box (multiple, or size above 1) is left as the
   browser draws it. A box that opens like a select and is not one (a <summary>
   of checkboxes, a menu button) takes the class .tmb-select-arrow: the same
   arrow, never an icon of its own.

   Its own file so that a page that does not load front.css has it too: every
   page through includes/styles.php, the fantasy pages through
   fantasy_chrome_css(). A new standalone page with a select loads it after
   tokens.css. front.css's pills set the variables (34px, 14px in). */
:where(select:not([multiple]):not([size]), select[size="1"]:not([multiple]), .tmb-select-arrow) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid var(--tmb-gray-400);
    border-radius: 4px;
    background-color: #fff;
    padding-right: var(--tmb-select-room, 28px) !important;
    background-image: linear-gradient(45deg, transparent 50%, var(--tmb-select-arrow, var(--tmb-gray-600)) 50%),
                      linear-gradient(135deg, var(--tmb-select-arrow, var(--tmb-gray-600)) 50%, transparent 50%) !important;
    background-position: right calc(var(--tmb-select-arrow-x, 10px) + 5px) center,
                         right var(--tmb-select-arrow-x, 10px) center !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
}