[data-fui-comp="ui-filter-toolbar"] {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-md, 12px) var(--spacing-md, 12px);
  margin: 0;
  padding: 0;
  border: 0;
}

/* Each control claims a comfortable min width and grows to fill the
   row; min-inline-size:0 lets it shrink below content width so a wide
   <select> or search box never forces horizontal overflow of a narrow
   ancestor (the bug both eval apps shipped). */
[data-fui-comp="ui-filter-toolbar"] .ui-filter-toolbar__facet {
  flex: 1 1 12rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
[data-fui-comp="ui-filter-toolbar"] .ui-filter-toolbar__search {
  flex: 2 1 14rem;
}
/* Pill facets prefer their natural one-line width: max-content basis
   (no grow) so a group never fragments its pills inside a cramped cell
   while horizontal space is free. Groups wrap BETWEEN each other when
   they can't fit side by side; shrink (with the pill-group's own
   flex-wrap) only kicks in when a single group is wider than the whole
   toolbar. The ≤32rem container query below overrides flex-basis to
   100%, so the mobile stack is unaffected. */
[data-fui-comp="ui-filter-toolbar"] .ui-filter-toolbar__pills {
  flex: 0 1 max-content;
}
/* ui.Search / ui.Select fill their facet cell. */
[data-fui-comp="ui-filter-toolbar"] .ui-filter-toolbar__search [data-fui-comp="ui-search-input"] {
  display: flex;
  inline-size: 100%;
}

/* Actions cluster: pushed to the trailing edge on a wide row; wraps to
   its own line and stretches full width on a narrow one. Always stays
   on-screen and tappable — never clipped. */
[data-fui-comp="ui-filter-toolbar"] .ui-filter-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm, 8px);
  margin-inline-start: auto;
}
[data-fui-comp="ui-filter-toolbar"] .ui-filter-toolbar__actions .ui-button {
  min-block-size: var(--spacing-touch-target, 44px);
}

/* Pill facet — fieldset reset + legend as a field label. */
[data-fui-comp="ui-filter-toolbar"] .ui-filter-toolbar__legend {
  padding: 0;
  margin-block-end: var(--spacing-xs, 4px);
  font-weight: 500;
  font-size: var(--text-sm, 0.9rem);
  color: var(--color-text, #18181B);
}
[data-fui-comp="ui-filter-toolbar"] .ui-filter-toolbar__pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs, 6px);
}
[data-fui-comp="ui-filter-toolbar"] .ui-filter-toolbar__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* nowrap: a multi-word label stays on one line — pills wrap between
     themselves, never mid-label (the "Waiting On Customer" → 3 lines bug). */
  white-space: nowrap;
  min-block-size: var(--spacing-touch-target, 44px);
  padding: 0 var(--spacing-md, 14px);
  border: 1px solid var(--color-border, #E4E4E7);
  border-radius: 999px;
  background: var(--color-surface, #FFFFFF);
  color: var(--color-text-muted, #52525B);
  font-size: var(--text-sm, 0.9rem);
  cursor: pointer;
  user-select: none;
  transition: background var(--duration-fast, 150ms) var(--easing-standard, ease),
              color var(--duration-fast, 150ms) var(--easing-standard, ease),
              border-color var(--duration-fast, 150ms) var(--easing-standard, ease);
}
[data-fui-comp="ui-filter-toolbar"] .ui-filter-toolbar__pill:hover {
  color: var(--color-text, #18181B);
  border-color: var(--color-text-muted, #a1a1aa);
}
/* Visually hide the radio; the pill label is the visible control. */
[data-fui-comp="ui-filter-toolbar"] .ui-filter-toolbar__pill-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
[data-fui-comp="ui-filter-toolbar"] .ui-filter-toolbar__pill:has(.ui-filter-toolbar__pill-input:checked) {
  background: var(--color-primary, #4F46E5);
  border-color: var(--color-primary, #4F46E5);
  color: var(--color-primary-fg, #FFFFFF);
  font-weight: 600;
}
[data-fui-comp="ui-filter-toolbar"] .ui-filter-toolbar__pill:has(.ui-filter-toolbar__pill-input:focus-visible) {
  outline: 2px solid var(--color-primary, #4F46E5);
  outline-offset: 2px;
}

/* Single-column stack when the toolbar itself (not the viewport) is
   narrow — correct even inside a slim sidebar on a wide screen. Every
   control, and the whole actions cluster, goes full width and Apply
   stretches so it stays an obvious, reachable tap target. */
@container (max-width: 32rem) {
  [data-fui-comp="ui-filter-toolbar"] .ui-filter-toolbar__facet,
  [data-fui-comp="ui-filter-toolbar"] .ui-filter-toolbar__actions {
    flex-basis: 100%;
    margin-inline-start: 0;
  }
  [data-fui-comp="ui-filter-toolbar"] .ui-filter-toolbar__actions .ui-filter-toolbar__apply {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-fui-comp="ui-filter-toolbar"] .ui-filter-toolbar__pill { transition: none; }
}