/* ─────────────────────────────────────────────────────────────────────────
   SELECT — the app's rules on top of Tom Select's own stylesheet.

   @layer components, not base: the vendor sheet is imported into base AFTER
   base.css (crm/css/vendor/tom-select.css, linked from shell/base.html), so an
   equal-specificity rule in base would lose to it. components beats base
   whatever the link order.

   Group headings: Tom Select draws an <optgroup> label with an option's padding
   and near-black text, so "The Gathering team" read as a person you could pick
   (METIS-pub#402). A heading reads as a heading — small, muted, spaced caps,
   with a rule above it.

   Global to every Tom Select that has optgroups, on purpose: a group heading
   should never look like an option. That is the "meant to affect every
   instance" case docs/dev/web/ui-guide.md § Forms and Selects allows.
   ───────────────────────────────────────────────────────────────────────── */
@layer components {
  .ts-dropdown .optgroup-header {
    margin-top: var(--space-1);
    padding: var(--space-2) var(--space-2) var(--space-1);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* Darker than --color-text-muted, which is ≈3.5:1 on white — too faint for
       text this small. This mix measures 6.1:1 (Approvals row 5). */
    color: color-mix(in oklab, var(--color-text-muted), var(--color-text) 40%);
    background: var(--color-surface);
  }

  /* A group at the top of the dropdown gets no rule above it — without this a
     stray line sits on the dropdown's top edge. It is the common case, not an
     edge one: Tom Select leaves an empty-value option out of its dropdown, so
     the Responsible picker's "— None —" is never above the first group, and a
     holon with no team of its own (dev holon 223) opens straight onto its
     parent's group. Verified live on dev. */
  .ts-dropdown .optgroup:first-child .optgroup-header {
    margin-top: 0;
    border-top: 0;
  }
}