/* e-wrestling.org museum - search trial (/search2), on the hub and the fed sites.
   Uses the museum.css tokens only, so each fed's theme.css colours it. Loaded by museum_search.php. */

.s2 {
	margin: 0 0 var(--sp-6);
}

/* Inside a fed template's static layout the form sits in .prose - undo its reading-width rules */
.prose .s2,
.prose .s2 p {
	max-width: none;
}

.s2-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-3);
}

.s2-bar input[type="search"] {
	flex: 1 1 220px;
	min-width: 0;
	min-height: 44px;
	padding: var(--sp-2) var(--sp-3);
	font: inherit;
	background: var(--color-bg-elevated);
	color: var(--color-text);
	border: var(--bw-thin) solid var(--color-border-strong);
	border-radius: var(--radius);
}

.s2-bar .button {
	min-height: 44px;
}

.s2-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3) var(--sp-5);
	align-items: flex-end;
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-sm);
}

.s2-who {
	position: relative;
	flex: 1 1 240px;
	max-width: 420px;
}

.s2-who label,
.s2-sort label {
	display: block;
	margin: 0 0 var(--sp-1);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--fs-xs);
}

.s2-who input,
.s2-sort select,
.s2-years select {
	width: 100%;
	min-height: 40px;
	padding: var(--sp-1) var(--sp-2);
	font: inherit;
	background: var(--color-bg-elevated);
	color: var(--color-text);
	border: var(--bw-thin) solid var(--color-border-strong);
	border-radius: var(--radius);
}

.s2-suggest {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	background: var(--color-bg-elevated);
	border: var(--bw-thin) solid var(--color-border-strong);
	border-radius: var(--radius);
	box-shadow: 0 6px 18px var(--color-shadow);
}

.s2-suggest[hidden] {
	display: none;
}

.s2-suggest li {
	margin: 0;
}

.s2-suggest button {
	display: block;
	width: 100%;
	padding: var(--sp-2) var(--sp-3);
	font: inherit;
	text-align: left;
	cursor: pointer;
	background: none;
	color: var(--color-text);
	border: 0;
}

.s2-suggest button:hover,
.s2-suggest button:focus {
	background: var(--color-bg-alt);
	outline: none;
}

.s2-suggest .s2-count {
	margin-left: var(--sp-2);
}

/* Facets beside the results on wide screens, above them on narrow ones */
.s2-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-5);
}

@media (min-width: 900px) {
	.s2-layout {
		grid-template-columns: 220px minmax(0, 1fr);
	}
}

.s2-facets {
	font-size: var(--fs-sm);
	min-width: 0;
}

.s2-facet {
	margin: 0 0 var(--sp-3);
	border-bottom: var(--bw-thin) solid var(--color-border);
	padding: 0 0 var(--sp-2);
}

.s2-facet summary {
	cursor: pointer;
	padding: var(--sp-1) 0;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--fs-xs);
}

.s2-facet-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--sp-1) 0 0;
}

.s2-facet-scroll {
	max-height: 260px;
	overflow-y: auto;
}

.s2-check {
	display: flex;
	align-items: baseline;
	gap: var(--sp-2);
	padding: 3px 0;
	cursor: pointer;
}

.s2-check input {
	flex: none;
	margin: 0;
}

.s2-check > span:first-of-type {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.s2-fedname {
	color: var(--color-text-muted);
}

.s2-count {
	flex: none;
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}

.s2-years {
	flex-direction: row;
	gap: var(--sp-2);
}

.s2-years label {
	flex: 1 1 0;
	min-width: 0;
}

.s2-results {
	min-width: 0;
}

.s2-chip {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: baseline;
	padding: var(--sp-1) var(--sp-3);
	border: var(--bw-thin) solid var(--color-border-strong);
	border-radius: var(--radius);
	background: var(--color-bg-elevated);
}

.s2-hits {
	margin: 0;
	padding: 0;
	list-style: none;
}

.s2-hit {
	margin: 0;
	padding: var(--sp-3) 0;
	border-bottom: var(--bw-thin) solid var(--color-border);
	overflow-wrap: anywhere;
}

.s2-hit-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: center;
	margin: 0 0 var(--sp-1);
	font-size: var(--fs-xs);
}

.s2-type {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
}

.s2-hit-title {
	font-weight: var(--fw-bold);
	font-size: var(--fs-base);
}

.s2-snippet {
	margin: var(--sp-1) 0 0;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.s2 mark {
	background: var(--color-accent);
	color: var(--color-accent-text);
	padding: 0 2px;
	border-radius: 2px;
}

.s2 .pagination span[aria-current] {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.s2[aria-busy="true"] #s2-live {
	opacity: 0.6;
	transition: opacity var(--dur-fast) var(--ease);
}