body.yc-search-open {
	overflow:hidden;
}

.search_header {
	position:fixed;
	inset:0;
	z-index:999999;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity .22s ease,visibility .22s ease;
}

.search_header.shows--in-searching {
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}

.search_overlay {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	padding:0;
	border:0;
	background:rgb(var(--primary-text-code) / 72%);
	-webkit-backdrop-filter:blur(12px);
	backdrop-filter:blur(12px);
	cursor:default;
}

.search_shell {
	position:relative;
	z-index:1;
	width:min(720px,100%);
	min-width:0;
	padding:48px 42px 38px;
	border:1px solid var(--diver);
	border-radius:24px;
	background:var(--surface-color);
	box-shadow:0 32px 90px rgb(var(--primary-text-code) / 34%);
	transform:translateY(18px) scale(.98);
	transition:transform .28s cubic-bezier(.2,.8,.2,1);
}

.search_header.shows--in-searching .search_shell {
	transform:translateY(0) scale(1);
}

.search_body {
	min-width:0;
}

.search_body h2 {
	margin:0 0 20px;
	padding-inline-end:40px;
	color:var(--primary-text);
	font-size:26px;
	font-weight:600;
	line-height:1.45;
	text-wrap:balance;
	overflow-wrap:anywhere;
}

.search_control {
	min-width:0;
	display:flex;
	align-items:center;
	gap:8px;
	padding:7px;
	border:1px solid var(--diver);
	border-radius:17px;
	background:var(--surface-soft);
	transition:border-color var(--transition),background var(--transition),box-shadow var(--transition);
}

.search_control:focus-within {
	border-color:var(--uicolor);
	background:var(--surface-color);
	box-shadow:0 0 0 4px rgb(var(--uicolor-code) / 10%);
}

.search_control.is-invalid {
	border-color:var(--danger-color);
	box-shadow:0 0 0 4px color-mix(in srgb,var(--danger-color) 10%,transparent);
}

.search_control input[type="search"] {
	min-width:0;
	height:54px;
	flex:1;
	padding:0 13px;
	border:0;
	outline:0;
	background:transparent;
	color:var(--primary-text);
	caret-color:var(--uicolor);
	font-family:var(--font-family);
	font-size:17px;
	font-weight:600;
	line-height:1.5;
	text-align:start;
}

.search_control input[type="search"]::placeholder {
	color:var(--secondarytext);
	opacity:.85;
}

.search_control input[type="search"]::-webkit-search-cancel-button {
	cursor:pointer;
}

.search_control button[type="submit"] {
	width:54px;
	height:54px;
	min-width:54px;
	min-height:54px;
	flex:0 0 54px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	border:0;
	border-radius:13px;
	background:var(--uicolor);
	color:var(--on-color);
	box-shadow:0 10px 24px rgb(var(--uicolor-code) / 24%);
	font-size:17px;
	cursor:pointer;
	transition:transform var(--transition),box-shadow var(--transition),background var(--transition);
}

.search_control button[type="submit"] span {
	display:flex;
	align-items:center;
	justify-content:center;
}

.search_error {
	margin:9px 4px 0;
	color:var(--danger-color);
	font-size:11px;
	font-weight:700;
	line-height:1.6;
	overflow-wrap:anywhere;
}

.search_closse {
	position:absolute;
	top:16px;
	inset-inline-end:16px;
	width:38px;
	height:38px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	border:1px solid var(--diver);
	border-radius:12px;
	background:var(--surface-soft);
	color:var(--primary-text);
	font-size:15px;
	cursor:pointer;
	transition:transform var(--transition),color var(--transition),border-color var(--transition),background var(--transition);
}

.search_closse:focus-visible,
.search_control button[type="submit"]:focus-visible {
	outline:3px solid color-mix(in srgb,var(--uicolor) 35%,transparent);
	outline-offset:3px;
}

@media (hover:hover) and (pointer:fine) {
	.search_control button[type="submit"]:hover {
		box-shadow:0 15px 30px rgb(var(--uicolor-code) / 32%);
		transform:translateY(-2px);
	}

	.search_closse:hover {
		border-color:color-mix(in srgb,var(--danger-color) 32%,var(--diver));
		background:color-mix(in srgb,var(--danger-color) 8%,var(--surface-color));
		color:var(--danger-color);
	}
}

/* =========================
   Mobile App Experience
========================= */
@media only screen and (max-width:767px) {
	.search_header {
		align-items:flex-start;
		justify-content:stretch;
		padding:0;
		overflow-y:auto;
		overscroll-behavior:contain;
	}

	.search_overlay {
		position:fixed;
		-webkit-backdrop-filter:blur(7px);
		backdrop-filter:blur(7px);
	}

	.search_shell {
		width:100%;
		max-width:none;
		padding-top:max(68px,calc(env(safe-area-inset-top) + 58px));
		padding-right:max(18px,env(safe-area-inset-right));
		padding-bottom:max(24px,env(safe-area-inset-bottom));
		padding-left:max(18px,env(safe-area-inset-left));
		border:0;
		border-block-end:1px solid var(--diver);
		border-radius:0 0 24px 24px;
		box-shadow:0 24px 70px rgb(var(--primary-text-code) / 28%);
		transform:translateY(-18px);
	}

	.search_header.shows--in-searching .search_shell {
		transform:translateY(0);
	}

	.search_body h2 {
		margin-bottom:16px;
		padding-inline-end:54px;
		font-size:clamp(21px,6vw,23px);
		line-height:1.5;
	}

	.search_control {
		gap:6px;
		padding:6px;
		border-radius:16px;
	}

	.search_control input[type="search"] {
		height:50px;
		padding-inline:10px;
		font-size:16px;
		font-weight:600;
	}

	.search_control button[type="submit"] {
		width:50px;
		height:50px;
		min-width:50px;
		min-height:50px;
		flex-basis:50px;
		border-radius:12px;
	}

	.search_error {
		margin-block-start:10px;
		font-size:12px;
	}

	.search_closse {
		top:max(12px,calc(env(safe-area-inset-top) + 8px));
		inset-inline-end:14px;
		width:44px;
		height:44px;
		border-radius:12px;
		font-size:16px;
	}
}

/* =========================
   Small Mobile Adjustments
========================= */
@media only screen and (max-width:390px) {
	.search_shell {
		padding-top:max(64px,calc(env(safe-area-inset-top) + 56px));
		padding-right:max(13px,env(safe-area-inset-right));
		padding-bottom:max(20px,env(safe-area-inset-bottom));
		padding-left:max(13px,env(safe-area-inset-left));
		border-radius:0 0 20px 20px;
	}

	.search_body h2 {
		margin-bottom:14px;
		padding-inline-end:50px;
	}

	.search_control {
		gap:4px;
		padding:5px;
		border-radius:14px;
	}

	.search_control input[type="search"] {
		height:48px;
		padding-inline:8px;
	}

	.search_control button[type="submit"] {
		width:48px;
		height:48px;
		min-width:48px;
		min-height:48px;
		flex-basis:48px;
		border-radius:11px;
	}
}

@media (hover:none) and (pointer:coarse) {
	.search_control button[type="submit"]:active {
		transform:scale(.96);
	}

	.search_closse:active {
		background:var(--surface-color);
		transform:scale(.94);
	}
}

@media (prefers-reduced-motion:reduce) {
	.search_header,
	.search_shell,
	.search_closse,
	.search_control,
	.search_control button[type="submit"] {
		transition:none;
	}
}