/* The combobox's trigger, in its three variants — the form-time picker's
   pills, the filter bar's chip, and the one-answer field (shared/_combobox
   documents the fork). The field asks for no rule of its own: it is the pills
   trigger without the pills, so the .input dress and the content sizing below
   already draw it. Everything else it shows belongs to other families: the
   rows and filter line to pickers.css, the float to popups.css, and the chip's
   chosen wash to filters.css, where it shares a rule with the mode it sits
   beside.

   No overflow machinery on the trigger's span: the chosen live in the pills,
   so the label is only ever the prompt or a "+" — and a button whose content
   hides overflow moves its baseline to its bottom edge, which is exactly what
   knocked the composer's labels out of line with their values. */
@layer components {
  .combobox {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-half);
    flex-wrap: wrap;
  }

  .combobox__trigger {
    text-align: start;
    cursor: pointer;
    max-inline-size: 100%;
  }

  /* The trigger is content-sized — which is the whole of what "the trigger
     shrinks to a +" means (shared/_combobox). .input hands every field
     inline-size: 100%, and a 100%-wide item in a wrapping flex row claims a
     line of its own: the pills were pushed onto one row and the + onto the
     next, under a rule as wide as the form (user's image, 2026-08-29).

     Two classes deep on purpose, the same reason boosts.css goes three: this
     file sorts before inputs.css in the :app glob, so one class loses to
     .input on source order no matter what it says. */
  .combobox .combobox__trigger {
    inline-size: auto;
  }

  /* Unchosen reads like a placeholder, chosen like a value — but only where the
     prompt stands for something missing. On a filter chip the prompt IS the
     answer ("everyone" means everyone), so greying it would say the line is
     unfinished when it is simply unnarrowed. */
  .combobox:not(.combobox--sentence) .combobox__trigger [data-placeholder] {
    color: var(--color-ink-faint);
  }

  /* The caret is the vocabulary .input--select already uses for "pick from a
     list", one size down because here it trails a word instead of bounding a
     field. Faded by opacity rather than by ink so it follows the chip through
     the chosen wash. */
  .combobox--sentence .icon {
    --icon-size: 0.75em;

    opacity: 0.6;
  }

  /* One chosen person: their face, their name, and the way off — BC's pill. */
  .combobox__pills {
    display: contents;
  }

  .combobox__pill {
    --avatar-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-half);
    padding-inline: var(--inline-space-half);
    padding-block: 2px;
    background-color: var(--color-surface);
    border: var(--border);
    border-radius: var(--border-radius);
    font-size: var(--text-small);
  }

  .combobox__remove {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-ink-faint);
    cursor: pointer;

    &:hover {
      color: var(--color-ink);
    }
  }
}