/* ============================================================================
   THEMED SELECTS — loaded after rotterdam.css. CSS only, no JS: keyboard and screen-reader
   behaviour stay the browser's own.

   1. Every single-choice <select> gets the same closed field: no OS chrome, our chevron, navy on
      white on the light pages, light on dark on the player/live pages, 44px tall, orange focus.
   2. `color-scheme` follows the region, and <option> colours are explicit, so the OS-drawn list
      (Safari, Firefox, older Chrome) at least opens in the matching light/dark scheme and is
      readable on Windows (it used to be near-white text on a white list on the watch page).
   3. Where the browser supports the customizable select (Chrome/Edge 135+), the open list itself
      is ours: a rounded navy or white panel, orange checkmark and hover.

   The region is set by tokens: light by default, dark under `.theme-dark` (watch, live), navy on
   the Live page's navy filter panel. The selector is `html body select…` so it outranks the
   `body:not(.theme-dark) .filters select` rules in rotterdam.css without !important.
   ============================================================================ */
:root{
  --sel-scheme:light;
  --sel-bg:#fff;
  --sel-ink:#101242;
  --sel-border:var(--border-btn,#cfc3bb);
  --sel-panel:#fff;
  --sel-panel-border:#e9dfd8;
  --sel-hover:#fff0e7;
  --sel-check:#b83b00;   /* --accent-ink: orange as a mark on white needs the darker tone */
  --sel-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23101242' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.theme-dark{
  --sel-scheme:dark;
  --sel-bg:#14141a;
  --sel-ink:#f5f5f3;
  --sel-border:#ff6315;
  --sel-panel:#14141a;
  --sel-panel-border:#2a2a34;
  --sel-hover:rgba(255,99,21,.2);
  --sel-check:#ff6315;
  --sel-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* Live: the filter sits on the navy-2 panel, so the field and its list are navy too. */
.page-live{
  --sel-bg:#101242;
  --sel-panel:#101242;
  --sel-border:rgba(185,187,224,.5);
  --sel-panel-border:rgba(185,187,224,.3);
}

/* ---- 1 + 2: the closed field, every browser ---- */
html body select:not([multiple]):not([size]){
  appearance:none;-webkit-appearance:none;
  color-scheme:var(--sel-scheme);
  color:var(--sel-ink);
  background-color:var(--sel-bg);
  background-image:var(--sel-chev);
  background-repeat:no-repeat;
  background-position:right .8rem center;
  background-size:.75rem;
  border:2px solid var(--sel-border);
  border-radius:10px;
  padding-block:.5rem;
  padding-inline:.85rem 2.3rem;
  min-block-size:2.75rem;
  max-inline-size:100%;
  line-height:1.25;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html body select:not([multiple]):not([size]):hover{border-color:#ff6315}
html body select:not([multiple]):not([size]):focus-visible{
  outline:2px solid #ff6315;outline-offset:2px;border-color:#ff6315;box-shadow:none}
html body select option,
html body select optgroup{background-color:var(--sel-panel);color:var(--sel-ink)}

/* Phones: the athletes filter put three selects in half-width columns, so "Todos los países",
   "Tous les groupes" and friends were cut mid-word. Each select gets the full row instead. */
@media (max-width:30rem){
  .athlete-filters select{grid-column:1 / -1}
}

/* ---- 3: the open list, where the browser lets us draw it ---- */
@supports (appearance:base-select){
  html body select:not([multiple]):not([size]),
  html body select:not([multiple]):not([size])::picker(select){appearance:base-select}
  /* our background chevron stays; the built-in icon would make two */
  html body select:not([multiple]):not([size])::picker-icon{display:none}
  html body select:not([multiple]):not([size]):open{border-color:#ff6315}
  html body select:not([multiple]):not([size])::picker(select){
    color-scheme:var(--sel-scheme);
    background:var(--sel-panel);
    color:var(--sel-ink);
    border:1px solid var(--sel-panel-border);
    border-radius:12px;
    padding:.3rem;
    margin-block:.3rem;
    box-shadow:0 14px 36px rgba(0,7,53,.35);
    max-block-size:min(24rem,60vh);
    overflow-y:auto;
  }
  html body select:not([multiple]):not([size]) option{
    background-color:transparent;
    color:var(--sel-ink);
    display:flex;align-items:center;gap:.6rem;
    min-block-size:2.75rem;
    padding:.5rem .8rem;
    border-radius:8px;
    font-weight:600;
    white-space:normal;
    cursor:pointer;
  }
  html body select:not([multiple]):not([size]) option:hover{background-color:var(--sel-hover)}
  html body select:not([multiple]):not([size]) option:focus-visible{
    background-color:var(--sel-hover);outline:2px solid #ff6315;outline-offset:-2px}
  html body select:not([multiple]):not([size]) option:checked{font-weight:800}
  html body select:not([multiple]):not([size]) option::checkmark{color:var(--sel-check);font-weight:800}
  html body select:not([multiple]):not([size]) option:disabled{opacity:.5;cursor:default}
}