/* CoralGrid — the dropdown lists in the brand coral.
   Where the browser lets a <select>'s list be styled (customizable select:
   Chrome / Android WebView 135+): a white panel whose option under the pointer
   is tinted coral and the chosen one filled with it. Elsewhere the list stays
   the system's (globals.css gives every select the coral accent and focus).

   Served as is from /public, linked in app/layout.tsx: Next's CSS compiler
   drops these selectors (::picker(select), ::picker-icon, ::checkmark, :open)
   and the whole block with them, so they cannot live in globals.css. */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]),
  select:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
  }
  select:not([multiple]):not([size])::picker(select) {
    margin-block: 0.25rem;
    padding: 0.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.625rem;
    background: #fff;
    box-shadow:
      0 10px 15px -3px rgb(15 23 42 / 0.12),
      0 4px 6px -4px rgb(15 23 42 / 0.1);
  }
  select:not([multiple]):not([size]) option {
    padding: 0.45rem 0.65rem;
    border-radius: 0.4rem;
    color: #0f172a;
  }
  select:not([multiple]):not([size]) option:hover,
  select:not([multiple]):not([size]) option:focus-visible {
    outline: none;
    background: #fff1ef;
    color: #c23b2b;
  }
  select:not([multiple]):not([size]) option:checked {
    background: #ff6b5b;
    color: #fff;
  }
  /* The fill marks the choice; no tick beside it. */
  select:not([multiple]):not([size]) option::checkmark {
    display: none;
  }
  select:not([multiple]):not([size])::picker-icon {
    color: #94a3b8;
    transition: rotate 0.15s ease;
  }
  select:not([multiple]):not([size]):open::picker-icon {
    color: #ff6b5b;
    rotate: 180deg;
  }
}