/* Themed dropdown lists. Replaces the browser's plain white option list with one that matches the app.
   Uses Chrome's customizable <select> (appearance: base-select). Browsers without it keep the old look. */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]) { appearance: base-select; display: flex; align-items: center; }
  select:not([multiple]):not([size])::picker-icon { display: none; }      /* the app draws its own arrow */
  select:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
    margin-top: 6px; padding: 6px; min-width: anchor-size(width);
    max-height: 300px; overflow: auto;
    border-radius: 12px;
    background: linear-gradient(180deg, #1E1E23, #16161A);
    border: 1px solid rgba(212,180,131,.32);
    box-shadow: 0 18px 40px -12px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
    scrollbar-width: thin; scrollbar-color: rgba(212,180,131,.5) transparent;
    opacity: 0; transform: translateY(-4px);
    transition: opacity .12s ease, transform .12s ease, overlay .12s allow-discrete, display .12s allow-discrete;
  }
  select:not([multiple]):not([size]):open::picker(select) { opacity: 1; transform: none; }
  @starting-style { select:not([multiple]):not([size]):open::picker(select) { opacity: 0; transform: translateY(-4px); } }
  select:not([multiple]):not([size]) option {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px;
    background: transparent; color: var(--text1, #EDE7DB);
    font: 400 14px/1.25 var(--sans); cursor: pointer;
  }
  select:not([multiple]):not([size]) option::checkmark { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #D4B483; box-shadow: 0 0 8px rgba(212,180,131,.7); order: 0; }
  select:not([multiple]):not([size]) option:not(:checked)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(212,180,131,.3); flex: none; }
  select:not([multiple]):not([size]) option:hover,
  select:not([multiple]):not([size]) option:focus-visible { background: rgba(212,180,131,.14); color: #F4E6C8; outline: 0; }
  select:not([multiple]):not([size]) option:checked { color: #D4B483; font-weight: 600; }
  select:not([multiple]):not([size]) option:disabled { opacity: .4; cursor: default; }

  html[data-theme-active="day"] select:not([multiple]):not([size])::picker(select) {
    background: #FBFAF8; border-color: rgba(120,92,40,.22); box-shadow: 0 18px 40px -14px rgba(40,30,10,.35);
  }
  html[data-theme-active="day"] select:not([multiple]):not([size]) option { color: #26231E; }
  html[data-theme-active="day"] select:not([multiple]):not([size]) option:hover,
  html[data-theme-active="day"] select:not([multiple]):not([size]) option:focus-visible { background: rgba(160,122,44,.12); color: #1A1712; }
  html[data-theme-active="day"] select:not([multiple]):not([size]) option:checked { color: #8A6A24; }
  html[data-theme-active="day"] select:not([multiple]):not([size]) option::checkmark { background: #A07A2C; box-shadow: none; }
}