/* A wrapping row, not a grid of equal columns. Children keep their own
   width; the one input that should take the spare room (the search box)
   carries filter-bar-grow. Growth is opt-in so the size never leaks into a
   field that sits in some other flex layout. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: end;
  margin-block-end: var(--space-3);
}

.filter-bar-wide {
  flex-basis: 100%;
}

.filter-bar-grow {
  flex: 1 1 12rem;
}

/* A child pushed to the far end of the row, once the row is wide enough
   to hold every child on one line. On a phone the row wraps, and a child
   pushed right of a wrapped line sits apart from everything else, so there
   it keeps its place in the run. */
@media (min-width: 40rem) {
  .filter-bar-end {
    margin-inline-start: auto;
  }
}