@layer components {
  /* Filter row: search field + selects, wrapping on narrow screens.
   *
   *   <form class="toolbar toolbar--fill">          fills a .dt-toolbar row
   *     <div class="toolbar__search">…</div>        grows; min --toolbar-search-min
   *     <div class="toolbar__filter">…</div>        min --toolbar-filter-min
   *
   *   --toolbar-gap (0.75rem), --toolbar-search-min (220px), --toolbar-filter-min (180px)
   *
   * The minimums never exceed the row, so a phone gets full-width fields
   * instead of fields cut off at the screen's edge.
   */
  .toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--toolbar-gap, 0.75rem);
  }

  .toolbar--fill {
    flex: 1;
    min-inline-size: 0;
  }

  .toolbar__search {
    flex: 1;
    min-inline-size: min(var(--toolbar-search-min, 220px), 100%);
  }

  .toolbar__filter {
    min-inline-size: min(var(--toolbar-filter-min, 180px), 100%);
  }
}