/*
**
**
**
**
**
** System Search
** =================================
**
** The overlay drawn by lib/scripts/search/search.window.js, in one of two layouts
** (#TL-Search[data-layout]):
**
**   full     The whole screen, frosted so the page still shows through. A floating search
**            pill, and results side by side on glass cards. Phones always get this one.
**   window   A large, rounded, translucent window over a softly dimmed page.
**
** Motion: things spring in when it opens and drop away when it closes, new results pop in
** one after another, a highlight glides to whatever is selected, and presses squish.
*/

#TL-Search {
	--Search-Surface: rgba(250, 250, 252, 0.8);
	--Search-Raised: #ffffff;
	--Search-Card: rgba(255, 255, 255, 0.68);
	--Search-Card-Edge: rgba(255, 255, 255, 0.75);
	--Search-Field: rgba(255, 255, 255, 0.92);
	--Search-Selected: rgba(10, 112, 230, 0.1);
	--Search-Selected-Edge: rgba(10, 112, 230, 0.12);
	--Search-Selected-Ring: rgba(10, 112, 230, 0.3);
	--Search-Accent: #0a70e6;
	--Search-Tint: rgba(10, 112, 230, 0.08);
	--Search-Tint-Warm: rgba(130, 90, 250, 0.08);
	--Search-Text: #1d1d1f;
	--Search-Muted: #6e6e76;
	--Search-Faint: #a1a1a8;
	--Search-Line: rgba(20, 20, 30, 0.07);
	--Search-Icon-Back: rgba(20, 20, 40, 0.06);
	--Search-Icon-Tile: linear-gradient(160deg, #ffffff, #f2f2f6);
	--Search-Shadow: rgba(20, 30, 60, 0.32);

	/* A soft spring for gliding, a bouncier one for things popping in */
	--Search-Glide: cubic-bezier(0.3, 1.22, 0.5, 1);
	--Search-Pop: cubic-bezier(0.34, 1.56, 0.64, 1);

	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 8vh 24px 24px;
	box-sizing: border-box;
	pointer-events: none;
}
#TL-Search[hidden] {
	display: none;
}
#TL-Search[data-state="open"] {
	pointer-events: all;
}
#TL-Search [data-hidden="true"] {
	display: none !important;
}

/* The page behind stays put while search is open, even when a swipe reaches past the results */
body.TL-Search-Open {
	overflow: hidden;
}

/*
** Backdrop
** =================================
*/

#TL-Search > .TL-Search-Backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(18, 18, 26, 0.18);
	-webkit-backdrop-filter: blur(6px) saturate(130%);
	backdrop-filter: blur(6px) saturate(130%);
	opacity: 0;
	transition: opacity 220ms ease;
}
#TL-Search[data-state="open"] > .TL-Search-Backdrop {
	opacity: 1;
}

/*
** Window
** =================================
**
** Springs up when it opens, and drops quickly away when it closes.
*/

#TL-Search > .TL-Search-Panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 820px;
	max-height: min(780px, 86vh);
	overflow: hidden;
	background-color: var(--Search-Surface);
	-webkit-backdrop-filter: blur(40px) saturate(180%);
	backdrop-filter: blur(40px) saturate(180%);
	border-radius: 30px;
	box-shadow:
		0 40px 100px -30px rgba(10, 10, 30, 0.45),
		0 12px 32px -16px rgba(10, 10, 30, 0.22),
		inset 0 0 0 1px rgba(255, 255, 255, 0.65);
	color: var(--Search-Text);
	opacity: 0;
	transform-origin: 50% 0;
	transition:
		opacity 130ms ease,
		transform 160ms ease-in;
}
#TL-Search[data-state="open"] > .TL-Search-Panel {
	opacity: 1;
	transform: translateY(0) scale(1);
	transition:
		opacity 160ms ease,
		transform 400ms var(--Search-Pop);
}
#TL-Search:not([data-state="open"]) > .TL-Search-Panel {
	transform: translateY(-14px) scale(0.94);
}

/*
** Search Bar
** =================================
*/

#TL-Search .TL-Search-Bar {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	padding: 0 18px 0 24px;
	height: 70px;
	border-bottom: 1px solid var(--Search-Line);
}
#TL-Search .TL-Search-Field {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
	height: 100%;
	transition:
		box-shadow 200ms ease,
		background-color 200ms ease;
}
#TL-Search .TL-Search-Glyph {
	flex-shrink: 0;
	color: var(--Search-Faint);
	transition:
		color 160ms ease,
		transform 320ms var(--Search-Pop);
}
#TL-Search .TL-Search-Field:focus-within .TL-Search-Glyph {
	color: var(--Search-Accent);
	transform: scale(1.1) rotate(-8deg);
}
#TL-Search .TL-Search-Field > input {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	outline: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--Search-Text);
	caret-color: var(--Search-Accent);
}
#TL-Search .TL-Search-Field > input::placeholder {
	color: var(--Search-Faint);
	font-weight: 400;
}

/* Clear - pops in when there's something to clear */
#TL-Search .TL-Search-Clear {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	padding: 0;
	background-color: rgba(20, 20, 30, 0.16);
	border: none;
	border-radius: 50%;
	color: #ffffff;
	cursor: pointer;
	animation: TL-Search-Pop-In 260ms var(--Search-Pop) backwards;
	transition:
		background-color 120ms ease,
		transform 180ms var(--Search-Pop);
}
#TL-Search .TL-Search-Clear[hidden] {
	display: none;
}
#TL-Search .TL-Search-Clear:hover {
	background-color: rgba(20, 20, 30, 0.26);
	transform: rotate(90deg);
}
#TL-Search .TL-Search-Clear:active {
	transform: rotate(90deg) scale(0.85);
}

/* Close - only in full screen, where there's no window edge to click outside of */
#TL-Search .TL-Search-Close {
	display: none;
}

/*
** Body
** =================================
**
** Scrolls, and holds the highlight behind the results.
*/

#TL-Search .TL-Search-Body {
	position: relative;
	flex: 1;
	min-height: 0;
	padding: 10px 12px 16px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scroll-padding: 14px;
}
#TL-Search .TL-Search-Body[data-easing="true"] {
	overflow-y: hidden;
}
#TL-Search .TL-Search-Highlight {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: var(--W, 0);
	height: var(--H, 0);
	background-color: var(--Search-Selected);
	border-radius: 14px;
	box-shadow: inset 0 0 0 1px var(--Search-Selected-Edge);
	opacity: 0;
	transform: translate(var(--X, 0), var(--Y, 0));
	scale: 0.94;
	pointer-events: none;
	transition:
		transform 260ms var(--Search-Glide),
		width 260ms var(--Search-Glide),
		height 260ms var(--Search-Glide),
		opacity 140ms ease,
		scale 260ms var(--Search-Pop);
}
#TL-Search .TL-Search-Highlight[data-visible="true"] {
	opacity: 1;
	scale: 1;
}
#TL-Search .TL-Search-Highlight[data-instant="true"] {
	transition:
		opacity 140ms ease,
		scale 260ms var(--Search-Pop);
}

/*
** Motion
** =================================
*/

/* Results that weren't showing before pop in, one after another */
#TL-Search [data-search-item][data-enter="true"] {
	animation: TL-Search-Enter 360ms var(--Search-Pop) var(--Enter-Delay, 0ms) backwards;
}
#TL-Search .TL-Search-Section[data-enter="true"] > header {
	animation: TL-Search-Fade-Up 260ms ease backwards;
}

/* A quick squish when a result is opened */
#TL-Search [data-search-item]:active,
#TL-Search [data-search-item][data-pressed="true"] {
	transform: scale(0.97);
	transition-duration: 60ms;
}

@keyframes TL-Search-Enter {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes TL-Search-Fade-Up {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes TL-Search-Pop-In {
	from {
		opacity: 0;
		transform: scale(0.4);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes TL-Search-Icon-Pop {
	from {
		transform: scale(0.6) rotate(-12deg);
	}
	to {
		transform: none;
	}
}
@keyframes TL-Search-Bob {
	0%,
	100% {
		transform: translateY(0) rotate(0);
	}
	50% {
		transform: translateY(-6px) rotate(-4deg);
	}
}
@keyframes TL-Search-Wobble {
	0%,
	100% {
		transform: rotate(0);
	}
	25% {
		transform: rotate(-10deg);
	}
	60% {
		transform: rotate(7deg);
	}
}
@keyframes TL-Search-Breathe {
	0%,
	100% {
		opacity: 0.55;
	}
	50% {
		opacity: 1;
	}
}

/*
** Results - Shared Pieces
** =================================
*/

/* Every result is a button; this resets them to a plain surface above the highlight */
#TL-Search [data-search-item] {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 9px 12px;
	box-sizing: border-box;
	background: none;
	border: none;
	border-radius: 14px;
	font-family: inherit;
	text-align: left;
	color: inherit;
	cursor: pointer;
	transition:
		box-shadow 140ms ease,
		transform 220ms var(--Search-Pop);
}
#TL-Search [data-search-item]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--Search-Selected-Ring);
}

/* Text column */
#TL-Search [data-search-item] > .text {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}
#TL-Search [data-search-item] .title,
#TL-Search [data-search-item] .subtitle,
#TL-Search [data-search-item] .meta {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#TL-Search [data-search-item] .title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--Search-Text);
}
#TL-Search [data-search-item] .subtitle {
	margin-top: 1px;
	font-size: 12.5px;
	color: var(--Search-Muted);
}
#TL-Search [data-search-item] .meta {
	font-size: 12px;
	color: var(--Search-Faint);
}

/* App icon with the page's 3D icon tucked into its corner */
#TL-Search [data-search-item] > .art {
	position: relative;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	margin: 0;
	transition: transform 280ms var(--Search-Pop);
}
#TL-Search [data-search-item][aria-selected="true"] > .art {
	transform: scale(1.08) rotate(-3deg);
}
/* The icon art sits inset on a soft tile, like it does on the home screen */
#TL-Search [data-search-item] > .art > .app-icon {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 16%;
	object-fit: contain;
	background: var(--Search-Icon-Tile);
	border-radius: 10px;
	box-shadow:
		0 3px 8px -3px rgba(10, 10, 20, 0.3),
		inset 0 0 0 1px var(--Search-Line);
}
#TL-Search [data-search-item] > .art > .badge {
	position: absolute;
	right: -5px;
	bottom: -5px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 21px;
	height: 21px;
	background-color: var(--Search-Raised);
	border-radius: 7px;
	box-shadow: 0 1px 4px rgba(10, 10, 20, 0.2);
	transition: transform 320ms var(--Search-Pop);
}
#TL-Search [data-search-item][aria-selected="true"] > .art > .badge {
	transform: translate(1px, 1px) rotate(-10deg) scale(1.12);
}
#TL-Search [data-search-item] > .art > .badge > img {
	width: 15px;
	height: 15px;
	object-fit: contain;
}

/* Missing icons: the app becomes a soft tile, a page badge just steps out */
#TL-Search [data-search-item] > .art:has(> .app-icon[data-broken="true"]) {
	background-image: linear-gradient(160deg, #dfe3ea, #c4cad4);
	border-radius: 10px;
	box-shadow: 0 3px 8px -3px rgba(10, 10, 20, 0.3);
}
#TL-Search .TL-Search-TopHit > .art:has(> .app-icon[data-broken="true"]) {
	border-radius: 15px;
}
#TL-Search .art > .app-icon[data-broken="true"] {
	visibility: hidden;
}
#TL-Search .art > .badge:has(> img[data-broken="true"]) {
	display: none;
}

/* Little status pills */
#TL-Search .flag {
	flex-shrink: 0;
	padding: 2px 8px;
	background-color: var(--Search-Icon-Back);
	border-radius: 20px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--Search-Muted);
}

/*
** Sections
** =================================
*/

#TL-Search .TL-Search-Section {
	margin-top: 12px;
}
#TL-Search .TL-Search-Section > header {
	display: flex;
	align-items: baseline;
	gap: 7px;
	padding: 4px 12px 6px;
}
#TL-Search .TL-Search-Section > header > h3 {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--Search-Text);
}
#TL-Search .TL-Search-Section > header > .count {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--Search-Faint);
}
#TL-Search .TL-Search-Section > header > .more {
	margin-left: auto;
	padding: 3px 10px;
	background-color: var(--Search-Tint);
	border: none;
	border-radius: 20px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--Search-Accent);
	cursor: pointer;
	transition:
		background-color 120ms ease,
		transform 220ms var(--Search-Pop);
}
#TL-Search .TL-Search-Section > header > .more:hover {
	background-color: var(--Search-Selected);
	transform: scale(1.05);
}
#TL-Search .TL-Search-Section > header > .more:active {
	transform: scale(0.92);
}
#TL-Search .TL-Search-Section > .note {
	margin: 8px 12px 0;
	font-size: 12px;
	color: var(--Search-Faint);
}

/* People and stores sit side by side, they're quicker to scan that way */
#TL-Search .TL-Search-Section[data-layout="people"] > .items,
#TL-Search .TL-Search-Section[data-layout="stores"] > .items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 6px;
}

/*
** Top Hit
** =================================
*/

#TL-Search .TL-Search-TopHit {
	gap: 16px;
	margin: 4px 0 8px;
	padding: 18px 20px;
	background-color: var(--Search-Raised);
	background-image: linear-gradient(135deg, var(--Search-Tint), var(--Search-Tint-Warm));
	border-radius: 22px;
	box-shadow:
		0 16px 36px -22px var(--Search-Shadow),
		inset 0 0 0 1px var(--Search-Card-Edge);
	transition:
		box-shadow 200ms ease,
		transform 260ms var(--Search-Pop);
}
#TL-Search .TL-Search-TopHit[aria-selected="true"] {
	box-shadow:
		0 18px 40px -20px rgba(10, 70, 160, 0.45),
		inset 0 0 0 1.5px var(--Search-Selected-Ring);
}
#TL-Search .TL-Search-TopHit[data-enter="true"] {
	animation-duration: 440ms;
}
#TL-Search .TL-Search-TopHit[data-enter="true"] > .art {
	animation: TL-Search-Icon-Pop 560ms var(--Search-Pop) 60ms backwards;
}
#TL-Search .TL-Search-TopHit > .art {
	width: 56px;
	height: 56px;
}
#TL-Search .TL-Search-TopHit > .art > .app-icon {
	border-radius: 15px;
	box-shadow:
		0 8px 18px -8px rgba(10, 10, 20, 0.4),
		inset 0 0 0 1px var(--Search-Line);
}
#TL-Search .TL-Search-TopHit > .art > .badge {
	width: 28px;
	height: 28px;
	border-radius: 10px;
}
#TL-Search .TL-Search-TopHit > .art > .badge > img {
	width: 21px;
	height: 21px;
}
#TL-Search .TL-Search-TopHit .eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 12px;
	font-weight: 600;
	color: var(--Search-Muted);
}
#TL-Search .TL-Search-TopHit .eyebrow > .flag {
	background-color: var(--Search-Selected);
	color: var(--Search-Accent);
}
#TL-Search .TL-Search-TopHit .title {
	margin-top: 4px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
}
#TL-Search .TL-Search-TopHit .description {
	display: -webkit-box;
	margin-top: 3px;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--Search-Muted);
}
#TL-Search .TL-Search-TopHit > .go {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 8px 12px 8px 16px;
	background-color: var(--Search-Accent);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
	border-radius: 20px;
	box-shadow:
		0 8px 16px -8px rgba(10, 112, 230, 0.75),
		inset 0 -1px 0 rgba(0, 0, 0, 0.12);
	font-size: 13.5px;
	font-weight: 600;
	color: #ffffff;
	transition:
		transform 280ms var(--Search-Pop),
		box-shadow 200ms ease;
}
#TL-Search .TL-Search-TopHit > .go > svg {
	transition: transform 280ms var(--Search-Pop);
}
#TL-Search .TL-Search-TopHit:hover > .go,
#TL-Search .TL-Search-TopHit[aria-selected="true"] > .go {
	transform: scale(1.05);
	box-shadow:
		0 10px 20px -8px rgba(10, 112, 230, 0.8),
		inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
#TL-Search .TL-Search-TopHit:hover > .go > svg,
#TL-Search .TL-Search-TopHit[aria-selected="true"] > .go > svg {
	transform: translateX(2px);
}

/*
** Rows - pages, reports, apps, shortcuts
** =================================
*/

#TL-Search .TL-Search-Row > .chevron {
	flex-shrink: 0;
	color: var(--Search-Faint);
	opacity: 0;
	transform: translateX(-6px);
	transition:
		opacity 120ms ease,
		transform 280ms var(--Search-Pop);
}
#TL-Search .TL-Search-Row[aria-selected="true"] > .chevron {
	opacity: 1;
	transform: none;
	color: var(--Search-Accent);
}

/*
** People & Stores
** =================================
*/

#TL-Search .TL-Search-Person > .photo,
#TL-Search .TL-Search-Store > .photo {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	margin: 0;
	background-color: var(--Search-Icon-Back);
	background-position: center;
	background-size: cover;
	border-radius: 50%;
	box-shadow:
		0 3px 8px -4px rgba(10, 10, 20, 0.3),
		inset 0 0 0 1px var(--Search-Line);
	transition: transform 280ms var(--Search-Pop);
}
#TL-Search .TL-Search-Person[aria-selected="true"] > .photo,
#TL-Search .TL-Search-Store[aria-selected="true"] > .photo {
	transform: scale(1.08);
}
/* A line that carries its pills along, so the name and street get the full width */
#TL-Search [data-search-item] .line {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
#TL-Search [data-search-item] .line > .title,
#TL-Search [data-search-item] .line > .subtitle {
	flex: 0 1 auto;
	min-width: 0;
}
#TL-Search [data-search-item] .line > .subtitle {
	margin-top: 0;
}
#TL-Search [data-search-item] .line > .flag {
	padding: 1px 6px;
	font-size: 9.5px;
}
#TL-Search .TL-Search-Person .line {
	margin-top: 1px;
}
#TL-Search .TL-Search-Person .flag.minor {
	background-color: rgba(214, 140, 20, 0.14);
	color: #a2650a;
}
#TL-Search .TL-Search-Person[data-status="TERMINATED"] .flag.status {
	background-color: rgba(210, 50, 50, 0.12);
	color: #b42a2a;
}
#TL-Search .TL-Search-Person[data-status="TERMINATED"] > .photo {
	filter: grayscale(1);
	opacity: 0.7;
}
#TL-Search .TL-Search-Store > .photo {
	border-radius: 12px;
}
#TL-Search .TL-Search-Store .title > span {
	font-weight: 500;
	color: var(--Search-Muted);
}
#TL-Search .TL-Search-Store .flag.mine {
	background-color: rgba(40, 160, 90, 0.13);
	color: #1f7a45;
}

/*
** Intro, Nothing Found, and Loading
** =================================
*/

#TL-Search .TL-Search-Intro > .examples {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px 12px 4px;
	animation: TL-Search-Fade-Up 260ms ease backwards;
}
#TL-Search .TL-Search-Intro > .examples > p {
	margin: 0 2px 0 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--Search-Text);
}
#TL-Search .TL-Search-Intro > .examples > .chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

/* Example chips bubble in one by one, and lift when pointed at */
#TL-Search .TL-Search-Example {
	padding: 7px 14px;
	background-color: var(--Search-Raised);
	border: none;
	border-radius: 20px;
	box-shadow:
		0 3px 8px -4px rgba(10, 10, 30, 0.22),
		inset 0 0 0 1px var(--Search-Line);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--Search-Text);
	cursor: pointer;
	animation: TL-Search-Pop-In 400ms var(--Search-Pop) backwards;
	transition:
		box-shadow 140ms ease,
		color 140ms ease,
		transform 240ms var(--Search-Pop);
}
#TL-Search .TL-Search-Example:nth-child(2) {
	animation-delay: 40ms;
}
#TL-Search .TL-Search-Example:nth-child(3) {
	animation-delay: 80ms;
}
#TL-Search .TL-Search-Example:nth-child(4) {
	animation-delay: 120ms;
}
#TL-Search .TL-Search-Example:nth-child(n + 5) {
	animation-delay: 160ms;
}
#TL-Search .TL-Search-Example:hover {
	box-shadow:
		0 8px 16px -8px rgba(10, 70, 160, 0.4),
		inset 0 0 0 1px var(--Search-Selected-Ring);
	color: var(--Search-Accent);
	transform: translateY(-2px);
}
#TL-Search .TL-Search-Example:active {
	transform: scale(0.92);
	transition-duration: 60ms;
}

#TL-Search .TL-Search-Intro > .hint,
#TL-Search .TL-Search-Zero {
	padding: 36px 30px 30px;
	text-align: center;
	animation: TL-Search-Fade-Up 320ms ease 60ms backwards;
}
#TL-Search .TL-Search-Intro > .hint > img,
#TL-Search .TL-Search-Zero > img {
	width: 68px;
	height: 68px;
	object-fit: contain;
}
#TL-Search .TL-Search-Intro > .hint > img {
	animation: TL-Search-Bob 3.2s ease-in-out 400ms infinite;
}
#TL-Search .TL-Search-Zero > img {
	animation: TL-Search-Wobble 700ms ease 120ms both;
}
#TL-Search .TL-Search-Intro > .hint > h3,
#TL-Search .TL-Search-Zero > h3 {
	margin: 12px 0 6px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--Search-Text);
	word-break: break-word;
}
#TL-Search .TL-Search-Intro > .hint > p,
#TL-Search .TL-Search-Zero > p {
	max-width: 420px;
	margin: 0 auto;
	font-size: 14px;
	line-height: 1.45;
	color: var(--Search-Muted);
}
#TL-Search .TL-Search-Loading {
	margin: 10px 12px;
	font-size: 13px;
	color: var(--Search-Faint);
	animation: TL-Search-Breathe 1.4s ease-in-out infinite;
}

/*
**
**
**
**
**
** Full Screen
** =================================
**
** The page stays in view through a frosted backdrop. The search pill drops in from the
** top, and results rise up beneath it on glass cards, side by side when there's room.
*/

#TL-Search[data-layout="full"] {
	padding: 0;
	align-items: stretch;
}
#TL-Search[data-layout="full"] > .TL-Search-Backdrop {
	background-color: rgba(238, 239, 245, 0.6);
	-webkit-backdrop-filter: blur(30px) saturate(170%);
	backdrop-filter: blur(30px) saturate(170%);
}

/* The panel is just the frame; the backdrop is the surface */
#TL-Search[data-layout="full"] > .TL-Search-Panel,
#TL-Search[data-layout="full"][data-state="open"] > .TL-Search-Panel,
#TL-Search[data-layout="full"]:not([data-state="open"]) > .TL-Search-Panel {
	max-width: none;
	max-height: none;
	height: 100%;
	height: 100dvh;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-radius: 0;
	box-shadow: none;
	transform: none;
}

/* The bar drops in, the results rise up */
#TL-Search[data-layout="full"] .TL-Search-Bar,
#TL-Search[data-layout="full"] .TL-Search-Body {
	transition:
		opacity 160ms ease,
		transform 440ms var(--Search-Pop);
}
#TL-Search[data-layout="full"]:not([data-state="open"]) .TL-Search-Bar {
	opacity: 0;
	transform: translateY(-20px) scale(0.96);
	transition-duration: 140ms;
}
#TL-Search[data-layout="full"]:not([data-state="open"]) .TL-Search-Body {
	opacity: 0;
	transform: translateY(18px);
	transition-duration: 140ms;
}

/* Search pill */
#TL-Search[data-layout="full"] .TL-Search-Bar {
	box-sizing: border-box;
	width: 100%;
	max-width: 800px;
	height: auto;
	margin: 0 auto;
	padding: max(28px, 6vh) 24px 18px;
	border-bottom: none;
}
#TL-Search[data-layout="full"] .TL-Search-Field {
	height: 62px;
	padding: 0 18px 0 22px;
	background-color: var(--Search-Field);
	border-radius: 22px;
	box-shadow:
		0 22px 50px -26px var(--Search-Shadow),
		0 4px 12px -6px rgba(20, 30, 60, 0.12),
		inset 0 0 0 1px var(--Search-Card-Edge);
}
#TL-Search[data-layout="full"] .TL-Search-Field:focus-within {
	box-shadow:
		0 24px 54px -26px rgba(10, 70, 160, 0.45),
		0 4px 12px -6px rgba(20, 30, 60, 0.12),
		inset 0 0 0 1.5px var(--Search-Selected-Ring);
}
#TL-Search[data-layout="full"] .TL-Search-Field > input {
	font-size: 21px;
}

/* Close - a quiet glass circle tucked in the corner, out of the search's way */
#TL-Search[data-layout="full"] .TL-Search-Close {
	position: absolute;
	top: 22px;
	right: 22px;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background-color: var(--Search-Card);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	backdrop-filter: blur(20px) saturate(160%);
	border: none;
	border-radius: 50%;
	box-shadow:
		0 8px 20px -12px var(--Search-Shadow),
		inset 0 0 0 1px var(--Search-Card-Edge);
	color: var(--Search-Muted);
	cursor: pointer;
	transition:
		opacity 160ms ease,
		color 140ms ease,
		background-color 140ms ease,
		transform 440ms var(--Search-Pop);
}
#TL-Search[data-layout="full"]:not([data-state="open"]) .TL-Search-Close {
	opacity: 0;
	transform: scale(0.6) rotate(-90deg);
	transition-duration: 140ms;
}
#TL-Search[data-layout="full"] .TL-Search-Close:hover {
	background-color: var(--Search-Field);
	color: var(--Search-Text);
	transform: rotate(90deg);
}
#TL-Search[data-layout="full"] .TL-Search-Close:active {
	transform: rotate(90deg) scale(0.88);
}

/* Results share the width in columns, with the top hit, people, stores, and messages across the top */
#TL-Search[data-layout="full"] .TL-Search-Body {
	padding: 6px 24px 72px;
	scroll-padding: 24px;
}
#TL-Search[data-layout="full"] .TL-Search-List {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 26px 22px;
	max-width: 1120px;
	margin: 0 auto;
}
#TL-Search[data-layout="full"] .TL-Search-List > * {
	flex: 1 1 300px;
	min-width: 0;
}
#TL-Search[data-layout="full"] .TL-Search-List > .TL-Search-TopHit,
#TL-Search[data-layout="full"] .TL-Search-List > .TL-Search-Section[data-layout="people"],
#TL-Search[data-layout="full"] .TL-Search-List > .TL-Search-Section[data-layout="stores"],
#TL-Search[data-layout="full"] .TL-Search-List > .TL-Search-Intro,
#TL-Search[data-layout="full"] .TL-Search-List > .TL-Search-Zero,
#TL-Search[data-layout="full"] .TL-Search-List > .TL-Search-Loading {
	flex-basis: 100%;
}

/* Glass cards */
#TL-Search[data-layout="full"] .TL-Search-Section {
	margin-top: 0;
}
#TL-Search[data-layout="full"] .TL-Search-Section > header {
	padding: 0 10px 8px;
}
#TL-Search[data-layout="full"] .TL-Search-Section > header > h3 {
	font-size: 14px;
}
#TL-Search[data-layout="full"] .TL-Search-Section > .items {
	padding: 6px;
	background-color: var(--Search-Card);
	border-radius: 22px;
	box-shadow:
		0 16px 40px -28px var(--Search-Shadow),
		inset 0 0 0 1px var(--Search-Card-Edge);
}
#TL-Search[data-layout="full"] .TL-Search-Section[data-layout="people"] > .items,
#TL-Search[data-layout="full"] .TL-Search-Section[data-layout="stores"] > .items {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
#TL-Search[data-layout="full"] [data-search-item] {
	padding: 10px 12px;
	border-radius: 16px;
}
#TL-Search[data-layout="full"] .TL-Search-Highlight {
	border-radius: 16px;
}

/* A bigger, bolder top hit */
#TL-Search[data-layout="full"] .TL-Search-TopHit {
	margin: 0;
	padding: 22px 24px;
	gap: 18px;
	border-radius: 26px;
}
#TL-Search[data-layout="full"] .TL-Search-TopHit > .art {
	width: 64px;
	height: 64px;
}
#TL-Search[data-layout="full"] .TL-Search-TopHit > .art > .app-icon {
	border-radius: 17px;
}
#TL-Search[data-layout="full"] .TL-Search-TopHit .title {
	font-size: 22px;
}

/* The intro sits centered under the pill */
#TL-Search[data-layout="full"] .TL-Search-Intro {
	width: 100%;
	max-width: 752px;
	margin: 0 auto;
}
#TL-Search[data-layout="full"] .TL-Search-Intro > .examples {
	justify-content: center;
	padding: 4px 0 8px;
}
#TL-Search[data-layout="full"] .TL-Search-Intro > .TL-Search-Section {
	margin-top: 18px;
}

/*
**
**
**
**
**
** Dark Mode
** =================================
**
** Follows the system theme, or the home screen's own theme while the home screen is showing
*/

body[data-theme="dark"] #TL-Search,
body[data-home="true"][data-home-theme="dark"] #TL-Search {
	--Search-Surface: rgba(30, 30, 36, 0.8);
	--Search-Raised: #2a2a31;
	--Search-Card: rgba(44, 44, 52, 0.6);
	--Search-Card-Edge: rgba(255, 255, 255, 0.07);
	--Search-Field: rgba(50, 50, 58, 0.88);
	--Search-Selected: rgba(64, 156, 255, 0.17);
	--Search-Selected-Edge: rgba(64, 156, 255, 0.2);
	--Search-Selected-Ring: rgba(64, 156, 255, 0.45);
	--Search-Accent: #3b93f7;
	--Search-Tint: rgba(64, 156, 255, 0.12);
	--Search-Tint-Warm: rgba(150, 110, 255, 0.1);
	--Search-Text: #f5f5f7;
	--Search-Muted: #a1a1a8;
	--Search-Faint: #75757e;
	--Search-Line: rgba(255, 255, 255, 0.08);
	--Search-Icon-Back: rgba(255, 255, 255, 0.08);
	--Search-Icon-Tile: linear-gradient(160deg, #3a3a41, #2a2a30);
	--Search-Shadow: rgba(0, 0, 0, 0.7);
}
body[data-theme="dark"] #TL-Search > .TL-Search-Backdrop,
body[data-home="true"][data-home-theme="dark"] #TL-Search > .TL-Search-Backdrop {
	background-color: rgba(0, 0, 0, 0.4);
}
body[data-theme="dark"] #TL-Search[data-layout="full"] > .TL-Search-Backdrop,
body[data-home="true"][data-home-theme="dark"] #TL-Search[data-layout="full"] > .TL-Search-Backdrop {
	background-color: rgba(16, 16, 20, 0.62);
}
body[data-theme="dark"] #TL-Search > .TL-Search-Panel,
body[data-home="true"][data-home-theme="dark"] #TL-Search > .TL-Search-Panel {
	box-shadow:
		0 40px 100px -24px rgba(0, 0, 0, 0.8),
		inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body[data-theme="dark"] #TL-Search [data-search-item] > .art:has(> .app-icon[data-broken="true"]),
body[data-home="true"][data-home-theme="dark"] #TL-Search [data-search-item] > .art:has(> .app-icon[data-broken="true"]) {
	background-image: linear-gradient(160deg, #3a3a43, #2a2a31);
}
body[data-theme="dark"] #TL-Search .TL-Search-Clear,
body[data-home="true"][data-home-theme="dark"] #TL-Search .TL-Search-Clear {
	background-color: rgba(255, 255, 255, 0.22);
	color: #1c1c21;
}
body[data-theme="dark"] #TL-Search .TL-Search-Person .flag.minor,
body[data-home="true"][data-home-theme="dark"] #TL-Search .TL-Search-Person .flag.minor {
	color: #f0b350;
}
body[data-theme="dark"] #TL-Search .TL-Search-Person[data-status="TERMINATED"] .flag.status,
body[data-home="true"][data-home-theme="dark"] #TL-Search .TL-Search-Person[data-status="TERMINATED"] .flag.status {
	color: #ff7b7b;
}
body[data-theme="dark"] #TL-Search .TL-Search-Store .flag.mine,
body[data-home="true"][data-home-theme="dark"] #TL-Search .TL-Search-Store .flag.mine {
	color: #5fd08f;
}

/*
**
**
**
**
**
** Phones
** =================================
**
** Always full screen: a pill under the notch, one column, and bigger targets for thumbs.
*/

@media only screen and (max-width: 640px) {
	#TL-Search[data-layout="full"] .TL-Search-Bar {
		gap: 10px;
		padding: calc(env(safe-area-inset-top, 0px) + 14px) 64px 12px 16px;
	}

	/* Close sits beside the pill, centered on it */
	#TL-Search[data-layout="full"] .TL-Search-Close {
		top: calc(env(safe-area-inset-top, 0px) + 19px);
		right: 14px;
	}
	#TL-Search[data-layout="full"] .TL-Search-Field {
		height: 50px;
		padding: 0 14px 0 16px;
		border-radius: 17px;
	}

	/* 16px or more keeps iOS from zooming in on focus */
	#TL-Search[data-layout="full"] .TL-Search-Field > input {
		font-size: 17px;
	}
	#TL-Search[data-layout="full"] .TL-Search-Body {
		padding: 4px 14px calc(env(safe-area-inset-bottom, 0px) + 40px);
	}

	/* Examples are one row to swipe through, edge to edge, without a label */
	#TL-Search[data-layout="full"] .TL-Search-Intro > .examples {
		flex-wrap: nowrap;
		margin: 0 -14px;
		padding: 0;
	}
	#TL-Search[data-layout="full"] .TL-Search-Intro > .examples > p {
		display: none;
	}
	#TL-Search[data-layout="full"] .TL-Search-Intro > .examples > .chips {
		flex: 1;
		flex-wrap: nowrap;
		gap: 8px;
		min-width: 0;
		padding: 4px 14px 12px;
		overflow-x: auto;
		scroll-padding: 0 14px;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}
	#TL-Search[data-layout="full"] .TL-Search-Intro > .examples > .chips::-webkit-scrollbar {
		display: none;
	}
	#TL-Search[data-layout="full"] .TL-Search-Example {
		flex-shrink: 0;
		padding: 10px 16px;
		font-size: 15px;
		scroll-snap-align: start;
	}
	#TL-Search[data-layout="full"] .TL-Search-List {
		gap: 20px;
	}
	#TL-Search[data-layout="full"] .TL-Search-List > * {
		flex-basis: 100%;
	}
	#TL-Search[data-layout="full"] .TL-Search-Section[data-layout="people"] > .items,
	#TL-Search[data-layout="full"] .TL-Search-Section[data-layout="stores"] > .items {
		grid-template-columns: minmax(0, 1fr);
	}
	#TL-Search[data-layout="full"] [data-search-item] {
		min-height: 58px;
	}
	#TL-Search[data-layout="full"] [data-search-item] > .art {
		width: 42px;
		height: 42px;
	}
	#TL-Search[data-layout="full"] .TL-Search-TopHit {
		flex-wrap: wrap;
		padding: 18px;
		gap: 14px;
	}
	#TL-Search[data-layout="full"] .TL-Search-TopHit > .art {
		width: 56px;
		height: 56px;
	}
	/* The answer wraps rather than trailing off */
	#TL-Search[data-layout="full"] .TL-Search-TopHit .title {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		white-space: normal;
		font-size: 19px;
		line-height: 1.2;
	}

	/* The open button goes full width under the top hit, an easy thumb target */
	#TL-Search[data-layout="full"] .TL-Search-TopHit > .go {
		justify-content: center;
		flex-basis: 100%;
		box-sizing: border-box;
		padding: 11px 16px;
		border-radius: 14px;
		font-size: 15px;
	}
	#TL-Search[data-layout="full"] .TL-Search-TopHit:hover > .go,
	#TL-Search[data-layout="full"] .TL-Search-TopHit[aria-selected="true"] > .go {
		transform: none;
	}
	#TL-Search .TL-Search-Row > .chevron {
		opacity: 1;
		transform: none;
	}
}

/* The smallest phones give the top hit's title a little more room */
@media only screen and (max-width: 360px) {
	#TL-Search[data-layout="full"] .TL-Search-TopHit > .art {
		width: 48px;
		height: 48px;
	}
	#TL-Search[data-layout="full"] .TL-Search-TopHit .title {
		font-size: 18px;
	}
}

/*
** Touch
** =================================
**
** There's no keyboard selection to show and no pointer to hover, so hover looks don't
** stick after a tap and each result answers the finger with a quick press instead.
*/

@media (hover: none) {
	#TL-Search .TL-Search-Highlight {
		display: none;
	}
	#TL-Search [data-search-item][aria-selected="true"] > .art,
	#TL-Search .TL-Search-Person[aria-selected="true"] > .photo,
	#TL-Search .TL-Search-Store[aria-selected="true"] > .photo {
		transform: none;
	}
	#TL-Search .TL-Search-Row[aria-selected="true"] > .chevron {
		color: var(--Search-Faint);
	}
	#TL-Search [data-search-item]:active {
		background-color: var(--Search-Selected);
		transform: scale(0.97);
		transition-duration: 60ms;
	}
	#TL-Search .TL-Search-TopHit:active {
		background-color: var(--Search-Raised);
		transform: scale(0.98);
	}

	/* Hover looks stay put after a tap */
	#TL-Search .TL-Search-Clear:hover {
		background-color: rgba(20, 20, 30, 0.16);
		transform: none;
	}
	#TL-Search .TL-Search-Example:hover {
		box-shadow:
			0 3px 8px -4px rgba(10, 10, 30, 0.22),
			inset 0 0 0 1px var(--Search-Line);
		color: var(--Search-Text);
		transform: none;
	}
	#TL-Search[data-layout="full"] .TL-Search-Close:hover {
		background-color: var(--Search-Card);
		color: var(--Search-Muted);
		transform: none;
	}
	#TL-Search .TL-Search-Example:active,
	#TL-Search[data-layout="full"] .TL-Search-Close:active {
		transform: scale(0.9);
	}
}

/* Calmer motion for anyone who asks for it: things fade, nothing bounces or travels */
@media (prefers-reduced-motion: reduce) {
	#TL-Search > .TL-Search-Panel,
	#TL-Search[data-state="open"] > .TL-Search-Panel,
	#TL-Search:not([data-state="open"]) > .TL-Search-Panel,
	#TL-Search[data-layout="full"] .TL-Search-Bar,
	#TL-Search[data-layout="full"] .TL-Search-Body,
	#TL-Search[data-layout="full"]:not([data-state="open"]) .TL-Search-Bar,
	#TL-Search[data-layout="full"]:not([data-state="open"]) .TL-Search-Body,
	#TL-Search[data-layout="full"] .TL-Search-Close,
	#TL-Search[data-layout="full"]:not([data-state="open"]) .TL-Search-Close,
	#TL-Search[data-layout="full"] .TL-Search-Close:hover {
		transform: none;
		transition: opacity 120ms ease;
	}
	#TL-Search *,
	#TL-Search *::before,
	#TL-Search *::after {
		animation: none !important;
	}
	#TL-Search .TL-Search-Highlight,
	#TL-Search .TL-Search-Highlight[data-instant="true"] {
		scale: 1;
		transition: opacity 120ms ease;
	}
}