/* Filter bar: search box plus a select that narrow a list below, with a live count */

.filter-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  align-items: end;
}
/* A select is as wide as its longest option unless told otherwise. */
.filter-bar .input {
  width: 100%;
  min-width: 0;
}
.filter-bar__count {
  grid-column: 1 / -1;
  font-size: var(--text-small);
  color: var(--color-quiet);
}
@media (min-width: 768px) {
  .filter-bar {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}