/* Opt-in list composition. FilterBar's general layout contract stays unchanged. */
/* Data Table Story composition only: intrinsic search width decides when tools wrap. */
.hm-data-table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hm-filter-bar-gap); min-width: 0; }
.hm-data-table-search { flex: 1 0 max-content; min-width: 0; max-width: 100%; }
.hm-data-table-search [data-slot="filter-bar-search"] { width: var(--hm-filter-bar-search-width); max-width: 100%; }
.hm-data-table-view-options { flex: 0 0 auto; margin-left: auto; }
.hm-list-search-basic, .hm-list-search-extended { gap: 8px; }
.hm-list-search-basic { justify-content: center; }
.hm-list-search-extended { justify-content: flex-start; }
/* Override Dashboard's general nowrap only for these opted-in list searches. */
[data-slot="dashboard-layout"] [data-slot="filter-bar"]:is(.hm-list-search-basic, .hm-list-search-extended) { flex-wrap: wrap; }
.hm-list-search-basic > [data-slot="filter-bar-actions"],
.hm-list-search-extended > [data-slot="filter-bar-actions"] { margin-left: 0; }
@media (max-width: 640px) {
  .hm-list-search-basic > [data-slot="filter-bar-actions"],
  .hm-list-search-extended > [data-slot="filter-bar-actions"] { justify-content: flex-end; }
}