/* Weber Browse — [weber_scores_filtering]: the filter bar of searchable comboboxes + the AJAX grid.
   Shared, cascading; theme via the --weber-browse-* variables. Namespaced .weber-browse / .weber-combo. */

.weber-browse {
	--weber-browse-border: #cfcabb;
	--weber-browse-bg:     #fff;
	--weber-browse-accent: #7a2e2e;
	--weber-browse-muted:  #8a8a8a;
	--weber-browse-hover:  #f5f2ea;
	font-size: 15px;
}

.weber-browse__bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin: 0 0 1.1rem; }
.weber-browse__filters { display: contents; }   /* the cascade fields participate directly in the bar */
.weber-browse__reset {
	border: 1px solid var(--weber-browse-border); background: var(--weber-browse-bg); border-radius: 6px;
	padding: .45rem .8rem; font: inherit; font-size: .85rem; cursor: pointer; color: var(--weber-browse-muted); height: 2.3rem;
}
.weber-browse__reset:hover { background: var(--weber-browse-hover); }

.weber-browse__results { transition: opacity .15s ease; }
.weber-browse.is-loading .weber-browse__results { opacity: .45; }

/* combobox */
.weber-combo { display: flex; flex-direction: column; gap: .25rem; min-width: 13rem; flex: 1 1 13rem; max-width: 22rem; }
.weber-combo__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--weber-browse-muted); font-weight: 600; }
.weber-combo__control { position: relative; }
.weber-combo__input {
	width: 100%; box-sizing: border-box; height: 2.3rem; padding: .35rem 2.7rem .35rem .6rem; cursor: pointer;
	border: 1px solid var(--weber-browse-border); border-radius: 6px; font: inherit; background: var(--weber-browse-bg);
}
.weber-combo__input:focus { outline: 2px solid var(--weber-browse-accent); outline-offset: -1px; cursor: text; }
.weber-combo__control::after {   /* decorative dropdown caret (it's a combobox) */
	content: '▾'; position: absolute; top: 50%; right: .7rem; transform: translateY(-50%);
	color: var(--weber-browse-muted); pointer-events: none; font-size: .7rem;
}
.weber-combo__clear {
	position: absolute; top: 50%; right: 1.6rem; transform: translateY(-50%); width: 1.4rem; height: 1.4rem;
	border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--weber-browse-muted);
}
.weber-combo__clear:hover { color: var(--weber-browse-accent); }

.weber-combo__list {
	position: absolute; z-index: 50; top: calc(100% + 2px); left: 0; right: 0; margin: 0; padding: .25rem 0;
	list-style: none; max-height: 17rem; overflow-y: auto; background: var(--weber-browse-bg);
	border: 1px solid var(--weber-browse-border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.weber-combo__list[hidden] { display: none; }
.weber-combo__opt { padding: .3rem .6rem; cursor: pointer; font-size: .9rem; display: flex; justify-content: space-between; gap: .6rem; }
.weber-combo__opt[hidden] { display: none; }
.weber-combo__opt:hover { background: var(--weber-browse-hover); }
.weber-combo__count { color: var(--weber-browse-muted); font-size: .78rem; }

@media (max-width: 640px) {
	.weber-combo { min-width: 0; flex-basis: 100%; max-width: none; }
}