/* =====================================================================
   The styled <select> popup's ROWS.

   **Why this is not in app/globals.css with the rest of it.** Lightning CSS -
   the optimizer Next runs over every stylesheet it processes - cannot parse a
   pseudo-element followed by a descendant selector. Every rule here was
   originally written flat in globals.css as

       select[data-slot="select"]::picker(select) option { … }

   and Lightning DROPPED all six of them while emitting

       Pseudo-elements like '::before' or '::after' can't be followed by
       selectors like 'Ident("option")'

   as a warning that did not fail the build. So the panel had our border, our
   shadow and our open animation, and the options inside it were bare UA rows.
   Rewriting them as `& option` nesting silenced the warning and still dropped
   the rules, which is worse - a silent failure instead of a loud one.

   `public/` is served verbatim and never goes through that pipeline, so the
   rules survive. It is linked from app/layout.tsx.

   If the select rows ever go plain again, check that the <link> is still there
   before anything else.

   Every rule is scoped to the PICKER, never to `option` on its own: with base
   appearance the closed control renders a clone of the selected option's
   content, so a bare `option { padding: … }` pads the collapsed control too -
   a 36px filter suddenly carries a 6px inset and sits a shade off every input
   beside it. The scoping is the point, and it is also what Lightning choked on.

   Colours are the same `--*` custom properties globals.css defines on :root,
   so this file re-themes with the page and needs no copy of the palette.
   ===================================================================== */
@supports (appearance: base-select) {
  select[data-slot="select"]::picker(select) option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: calc(var(--radius) - 0.25rem);
    font-size: 0.875rem;
    line-height: 1.25rem;
    cursor: pointer;
    transition:
      background-color 75ms linear,
      color 75ms linear;
  }

  /* Keyboard and pointer land on the same paint, the way the menu items do.
     `:checked` is the current value and stays legible when it is not the row
     under the cursor. */
  select[data-slot="select"]::picker(select) option:hover,
  select[data-slot="select"]::picker(select) option:focus,
  select[data-slot="select"]::picker(select) option:active {
    background: var(--accent);
    color: var(--accent-foreground);
    outline: none;
  }

  select[data-slot="select"]::picker(select) option:checked {
    font-weight: 500;
  }

  /* The UA tick, in the app's own accent rather than a system blue. */
  select[data-slot="select"]::picker(select) option::checkmark {
    color: var(--primary);
  }

  select[data-slot="select"]::picker(select) option:disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  /* Group headings read as headings - same treatment as a menu label. */
  select[data-slot="select"]::picker(select) optgroup {
    padding: 0.375rem 0.5rem 0.125rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-foreground);
  }
}