/*
 * Select pills (README "Selects"): 38px (44px on phones) with a 1.5px divider outline; a muted label sits before the
 * bold value, followed by a chevron (13.5px text, 15px chevron — A-21, D-20). A real <select> is overlaid so keyboard and screen readers get
 * the native control. Rendered by filter_select(label, name, choices, selected:).
 */
@layer components {
  .select-pill {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px 0 16px;
    border: 1.5px solid var(--color-divider);
    border-radius: var(--radius-pill);
    font-size: 13.5px;
    white-space: nowrap;
    cursor: pointer;
  }
  .select-pill:hover { background: var(--color-btn-hover); }
  .select-pill:focus-within { box-shadow: var(--ring); }

  .select-pill__label { color: var(--color-neutral-700); }
  .select-pill__value { font-weight: 700; }
  .select-pill .icon { font-size: 15px; }

  .select-pill select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    appearance: none;
  }

  /* Phone hit target */
  @media (max-width: 767px) {
    .select-pill { height: 44px; }
  }
}