/*
 * Info filter bar (spec §4.15) [M computed] [M js:d44cea47]. py 16, white, border-b gray-100, z 40.
 * Plan fix 3: not sticky (live: sticky top 64/80 under a 136/116 header hid the search field). The live shadow-sm after
 * 100px of scroll only showed while stuck, so it goes with the stickiness.
 */
.info-filter {
	position: relative;
	z-index: 40;
	padding-block: calc(var(--spacing) * 4);
	background-color: var(--color-white);
	border-bottom: 1px solid var(--color-gray-100);
}
.no-js .info-filter { display: none; }
.info-filter__stack { display: flex; flex-direction: column; gap: calc(var(--spacing) * 3); }
.info-filter__row { display: flex; align-items: center; gap: calc(var(--spacing) * 3); }

/* Search: icon 20 gray-400 at inline-start 16; input py 12, ps 48, pe 16, radius 12, gray-50; 16/24 → 18/28 from 640 */
.info-filter__search { position: relative; flex: 1 1 0%; }
.info-filter__search-icon {
	position: absolute;
	inset-inline-start: calc(var(--spacing) * 4);
	top: 50%;
	translate: 0 -50%;
	color: var(--color-gray-400);
	pointer-events: none;
}
.info-filter__input {
	width: 100%;
	padding-block: calc(var(--spacing) * 3);
	padding-inline: calc(var(--spacing) * 12) calc(var(--spacing) * 4);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-xl);
	background-color: var(--color-gray-50);
	font-size: var(--text-base);
	line-height: var(--text-base-lh);
	outline: none;
	transition: all var(--duration-fast) var(--ease-default);
}
.info-filter__input:focus,
.info-filter__input:focus-visible {
	background-color: var(--color-white);
	border-color: var(--color-brand-orange);
	box-shadow: 0 0 0 2px var(--color-orange-20a);
	outline: none;
}
@media (min-width: 40rem) { .info-filter__input { font-size: var(--text-lg); line-height: var(--text-lg-lh); } }

/* Toggle (below 1024): 48×48, radius 12, gray-50, border gray-200, gray-600; orange when open or a category is active */
.info-filter__toggle {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: calc(var(--spacing) * 12);
	height: calc(var(--spacing) * 12);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-xl);
	background-color: var(--color-gray-50);
	color: var(--color-gray-600);
	transition: all var(--duration-fast) var(--ease-default);
}
.info-filter__toggle:hover { border-color: var(--color-brand-orange); }
.info-filter__toggle[aria-expanded="true"],
.info-filter__toggle.is-active {
	background-color: var(--color-brand-orange);
	border-color: var(--color-brand-orange);
	color: var(--color-white);
}
.info-filter__toggle-icon--open { display: none; }
.info-filter__toggle[aria-expanded="true"] .info-filter__toggle-icon--open,
.info-filter__toggle.is-active .info-filter__toggle-icon--open { display: block; }
.info-filter__toggle[aria-expanded="true"] .info-filter__toggle-icon--closed,
.info-filter__toggle.is-active .info-filter__toggle-icon--closed { display: none; }
@media (min-width: 64rem) { .info-filter__toggle { display: none; } }

/* Pill panel: collapsed below 1024 (max-h 0 / opacity 0 → 160 / 1, 300 ms); always open from 1024 */
.info-filter__panel {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	transition: max-height var(--duration-base) var(--ease-default), opacity var(--duration-base) var(--ease-default), visibility 0s linear var(--duration-base);
}
.info-filter__panel.is-open {
	max-height: 160px;
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}
@media (min-width: 64rem) {
	.info-filter__panel { max-height: 160px; opacity: 1; visibility: visible; }
}
.info-filter__pills { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2); padding-top: calc(var(--spacing) * 1); }

/* Pills: px 12 py 8, 12/16 medium (px 16, 14/20 from 640); active orange/white, inactive gray-100/gray-600, hover gray-200 */
.info-filter__pill {
	padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
	border-radius: var(--radius-full);
	background-color: var(--color-gray-100);
	color: var(--color-gray-600);
	font-size: var(--text-xs);
	line-height: var(--text-xs-lh);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
	transition: all var(--duration-fast) var(--ease-default);
}
.info-filter__pill:hover { background-color: var(--color-gray-200); }
.info-filter__pill.is-active,
.info-filter__pill[aria-pressed="true"] { background-color: var(--color-brand-orange); color: var(--color-white); }
@media (min-width: 40rem) {
	.info-filter__pill { padding-inline: calc(var(--spacing) * 4); font-size: var(--text-sm); line-height: var(--text-sm-lh); }
}