/*
 * Game Pulse: "Find a player" (includes/search.php, assets/js/search.js).
 * The header's box (a field on desktop, an icon button on phones), its instant results and the /search/ page.
 * Everything reads the look contract's tokens (docs/pilot/game-pulse-r12-design.md section 2), with the theme's
 * presets as fallbacks for pages that print no Game Pulse stylesheet, so the box takes on each game's look.
 */

/* The aliases are declared again inside each game group, so they resolve to that game's tokens there. */
.gp-find,
.gp-find [data-game] {
	--gp-find-ink: var(--gp-ink, var(--wp--preset--color--ink, #0F172A));
	--gp-find-muted: var(--gp-ink-muted, var(--wp--preset--color--muted, #64748B));
	--gp-find-well: var(--gp-surface-sunk, var(--wp--preset--color--surface, #FFFFFF));
	--gp-find-line: var(--gp-btn-border, 1px solid var(--wp--preset--color--border, #CBD5E1));
	--gp-find-accent: var(--gp-accent, var(--wp--preset--color--primary-text, #B45309));
	--gp-find-hover: var(--gp-row-hover, color-mix(in srgb, var(--wp--preset--color--primary, #D97706) 9%, transparent));
	color: var(--gp-find-ink);
	font-family: var(--gp-body-font, inherit);
}

.gp-find .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.gp-find__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.gp-find__field > .gp-find__glass {
	position: absolute;
	left: 0.75rem;
	color: var(--gp-find-muted);
	pointer-events: none;
}

.gp-find input[type="search"] {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	padding: 0.5rem 0.875rem 0.5rem 2.25rem;
	color: var(--gp-find-ink);
	font: inherit;
	font-size: 0.9375rem;
	background: var(--gp-find-well);
	border: var(--gp-find-line);
	border-radius: 999px;
	-webkit-appearance: none;
	appearance: none;
}

.gp-find input[type="search"]::placeholder {
	color: var(--gp-find-muted);
	opacity: 1;
}

.gp-find input[type="search"]:focus-visible {
	outline: 2px solid var(--gp-find-accent);
	outline-offset: 1px;
}

/* ---- the header: a field on desktop ------------------------------------------------------------------------ */

.gp-find--header {
	position: relative;
	flex: 0 1 auto;
	min-width: 0;
}

.gp-find--header .gp-find__form {
	margin: 0;
}

.gp-find--header .gp-find__field {
	width: clamp(9rem, 15vw, 14rem);
}

.gp-find--header input[type="search"] {
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
	font-size: 0.875rem;
}

.gp-find__open {
	display: none;
	place-items: center;
	box-sizing: border-box;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--wp--preset--color--ink, currentColor);
	background: var(--wp--preset--color--surface, transparent);
	border: 1px solid var(--wp--preset--color--border, currentColor);
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
}

.gp-find__open:hover,
.gp-find__open[aria-expanded="true"] {
	color: var(--wp--preset--color--primary-text, currentColor);
	border-color: var(--wp--preset--color--primary, currentColor);
}

.gp-find__open:focus-visible {
	outline: 2px solid var(--gp-find-accent);
	outline-offset: 2px;
}

/* ---- the header on phones and narrow windows: an icon button, the field drops below the bar ---------------- */

@media (max-width: 899px) {
	.pulse-header:has(.gp-find--header) {
		position: relative;
	}

	.gp-find--header {
		position: static;
	}

	.gp-find__open {
		display: inline-grid;
	}

	.gp-find--header .gp-find__form {
		display: none;
	}

	.gp-find--header.is-open .gp-find__form {
		position: absolute;
		top: 100%;
		right: 0.75rem;
		left: 0.75rem;
		z-index: 70;
		display: block;
		padding: 0.625rem;
		background: var(--gp-surface-2, var(--wp--preset--color--surface, #FFFFFF));
		border: var(--gp-frame-border, 1px solid var(--wp--preset--color--border, #CBD5E1));
		border-top: 0;
		border-radius: 0 0 12px 12px;
		box-shadow: var(--gp-pop-shadow, 0 16px 40px -14px rgba(15, 23, 42, 0.5));
	}

	.gp-find--header.is-open .gp-find__field {
		width: auto;
	}

	.gp-find--header.is-open input[type="search"] {
		padding-top: 0.6rem;
		padding-bottom: 0.6rem;
		font-size: 1rem;   /* 16 px: no zoom on focus in mobile Safari */
	}

	.gp-find--header .gp-find__pop {
		position: static;
		width: auto;
		max-height: min(65vh, 32rem);
		margin-top: 0.5rem;
		border: 0;
		box-shadow: none;
		padding: 0;
	}
}

/* ---- instant results (the header's popover) ---------------------------------------------------------------- */

.gp-find__pop {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: 70;
	box-sizing: border-box;
	width: min(30rem, calc(100vw - 1.5rem));
	max-height: min(70vh, 36rem);
	padding: 0.375rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	color: var(--gp-find-ink);
	text-align: left;
	background: var(--gp-surface-2, var(--wp--preset--color--surface, #FFFFFF));
	border: var(--gp-frame-border, 1px solid var(--wp--preset--color--border, #CBD5E1));
	border-radius: 12px;
	box-shadow: var(--gp-pop-shadow, 0 16px 40px -14px rgba(15, 23, 42, 0.5), 0 2px 6px rgba(15, 23, 42, 0.12));
}

.gp-find__pop[hidden] {
	display: none;
}

.gp-find__pop .gp-find__group + .gp-find__group {
	margin-top: 0.25rem;
	padding-top: 0.25rem;
	border-top: 1px solid var(--gp-grid-line, var(--wp--preset--color--border, #E2E8F0));
}

/* A label on the popover's own background (a look's title ink is drawn for its panels, not for its tooltip). */
.gp-find__pop .gp-find__game {
	margin: 0;
	padding: 0.4rem 0.5rem 0.2rem;
	color: var(--gp-find-muted);
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-shadow: none;
	text-transform: uppercase;
}

.gp-find__pop .gp-find__hit {
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 0.45rem 0.6rem;
}

.gp-find__pop .gp-find__sub {
	grid-column: 1 / -1;
}

.gp-find__note {
	margin: 0;
	padding: 0.6rem 0.75rem;
	color: var(--gp-find-muted);
	font-size: 0.875rem;
}

.gp-find__all {
	display: block;
	margin-top: 0.25rem;
	padding: 0.55rem 0.75rem;
	color: var(--gp-find-accent);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	border-top: 1px solid var(--gp-grid-line, var(--wp--preset--color--border, #E2E8F0));
}

.gp-find__all:hover,
.gp-find__all.is-active {
	background: var(--gp-find-hover);
	text-decoration: underline;
}

/* ---- one group of matches (both the popover and the page) -------------------------------------------------- */

.gp-find__game {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--gp-ink-strong, var(--gp-find-ink));
	font-family: var(--gp-head-font, inherit);
	text-shadow: none;
}

.gp-find__icon {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 1.375rem;
	height: 1.375rem;
}

.gp-find__icon :is(img, svg) {
	max-width: 20px;
	max-height: 20px;
}

.gp-find__icon svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}

.gp-find__count {
	margin-left: auto;
	padding: 0 0.45rem;
	color: var(--gp-find-muted);
	font-family: var(--gp-num-font, inherit);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0;
	text-shadow: none;
	text-transform: none;
	background: var(--gp-find-well);
	border-radius: 999px;
}

.gp-find__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-find__list > li {
	margin: 0;
}

.gp-find__hit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	column-gap: 0.75rem;
	padding: 0.55rem 0.7rem;
	color: inherit;
	text-decoration: none;
	border-radius: var(--gp-radius-inner, 8px);
}

.gp-find__hit:hover,
.gp-find__hit.is-active {
	background: var(--gp-find-hover);
}

.gp-find__hit.is-active {
	outline: 2px solid var(--gp-find-accent);
	outline-offset: -2px;
}

.gp-find__hit:focus-visible {
	outline: 2px solid var(--gp-find-accent);
	outline-offset: -2px;
}

.gp-find__name {
	overflow: hidden;
	color: var(--gp-ink-strong, var(--gp-find-ink));
	font-weight: 650;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gp-find__name mark {
	padding: 0 0.05em;
	color: inherit;
	background: color-mix(in srgb, var(--gp-find-accent) 26%, transparent);
	border-radius: 3px;
}

.gp-find__kind {
	color: var(--gp-find-muted);
	font-size: 0.75rem;
	white-space: nowrap;
}

.gp-find__sub {
	grid-column: 1 / -1;
	overflow: hidden;
	color: var(--gp-find-muted);
	font-size: 0.8125rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- the /search/ page ------------------------------------------------------------------------------------- */

.gp-find--page .gp-find__form {
	margin: 0 0 1rem;
}

.gp-find__label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--gp-find-muted);
	font-size: 0.875rem;
	font-weight: 600;
}

.gp-find--page .gp-find__field {
	max-width: 40rem;
}

.gp-find--page input[type="search"] {
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
	font-size: 1rem;
}

.gp-find__submit {
	flex: none;
	padding: 0.65rem 1.1rem;
	color: var(--gp-btn-ink, var(--gp-find-ink));
	font: inherit;
	font-weight: 600;
	background: var(--gp-btn-bg, var(--gp-find-well));
	border: var(--gp-btn-border, var(--gp-find-line));
	border-radius: 999px;
	cursor: pointer;
}

.gp-find__submit:hover {
	background: var(--gp-btn-hover-bg, var(--gp-find-hover));
}

.gp-find.is-enhanced .gp-find__submit {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
}

.gp-find__status {
	margin: 0 0 1rem;
	color: var(--gp-find-muted);
	font-size: 0.9375rem;
}

.gp-find__status[hidden],
.gp-find__intro[hidden] {
	display: none;
}

.gp-find--page .gp-find__results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
	align-items: start;
	gap: 1rem;
}

.gp-find--page .gp-find__group {
	box-sizing: border-box;
	min-width: 0;
	padding: 0.75rem;
	color: var(--gp-find-ink);
	background: var(--gp-surface-2, var(--wp--preset--color--surface, #FFFFFF));
	border: var(--gp-frame-border, 1px solid var(--wp--preset--color--border, #E2E8F0));
	border-radius: var(--gp-frame-radius, 14px);
	box-shadow: var(--gp-frame-shadow, none);
	border-image: var(--gp-frame-image, none);
}

.gp-find--page .gp-find__game {
	margin: 0 0 0.4rem;
	padding: 0 0.25rem 0.5rem;
	font-size: 1.0625rem;
	border-bottom: 1px solid var(--gp-grid-line, var(--wp--preset--color--border, #E2E8F0));
}

.gp-find__more {
	margin: 0.5rem 0.4rem 0;
	color: var(--gp-find-muted);
	font-size: 0.8125rem;
}

.gp-find__scope {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: 0.5rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--gp-find-muted);
	font-size: 0.9375rem;
}

.gp-find__scope > li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	padding: 0.5rem 0.6rem;
	background: var(--gp-surface-2, transparent);
	border: var(--gp-frame-border, 1px solid var(--wp--preset--color--border, #E2E8F0));
	border-radius: var(--gp-radius-inner, 8px);
}

.gp-find__scope strong {
	color: var(--gp-ink-strong, var(--gp-find-ink));
	font-family: var(--gp-head-font, inherit);
}

@media (prefers-reduced-motion: no-preference) {
	.gp-find__hit,
	.gp-find__open {
		transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
	}
}