/*
**
**
**
**
**
** Home Screen - Search First
** =================================
**
** The search first home screen (homescreen.hero.js), on when #TL-Home carries
** [data-home-layout="search"]. The first screen is a greeting, a search pill and the
** pinned apps, with an All apps button down to the drawer of every app below it. The page
** rides a spring between the two (homescreen.pager.js), and #TL-Home carries .HS-Drawer-Up
** while the drawer is showing, which both screens spring off of.
*/

/*
**
**
**
**
**
** Design Tokens
** =================================
*/

#TL-Home {
	/* The height the home screen scrolls in, which the first screen fills */
	--HS-View: 100vh;

	/* The search pill */
	--HS-Hero-Field: rgba(255, 255, 255, 0.9);
	--HS-Hero-Field-Edge: rgba(255, 255, 255, 0.85);
	--HS-Hero-Field-Shadow: 0 22px 48px -22px rgba(30, 30, 70, 0.4), 0 2px 6px rgba(30, 30, 60, 0.06);
	--HS-Hero-Field-Lift: 0 28px 56px -22px rgba(30, 30, 70, 0.46), 0 3px 8px rgba(30, 30, 60, 0.08);

	/* The spring both screens move on between the first screen and the drawer: quick, with a soft overshoot */
	--HS-Hero-Bounce: cubic-bezier(0.32, 1.28, 0.42, 1);

	/* The livelier spring the drawer's apps bubble in on */
	--HS-Hero-Pop: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* The edit pill: barely there glass that firms up under the pointer */
	--HS-Hero-Edit: rgba(255, 255, 255, 0.4);
	--HS-Hero-Edit-Shadow: 0 6px 18px -10px rgba(30, 30, 70, 0.3);

	/* The dashed ring of the add pin */
	--HS-Hero-Ring: rgba(255, 255, 255, 0.32);
	--HS-Hero-Ring-Edge: rgba(60, 60, 80, 0.28);
}

#TL-Home[data-hs-theme="dark"] {
	--HS-Hero-Field: rgba(40, 40, 46, 0.86);
	--HS-Hero-Field-Edge: rgba(255, 255, 255, 0.08);
	--HS-Hero-Field-Shadow: 0 22px 48px -22px rgba(0, 0, 0, 0.75), 0 2px 6px rgba(0, 0, 0, 0.3);
	--HS-Hero-Field-Lift: 0 28px 56px -22px rgba(0, 0, 0, 0.8), 0 3px 8px rgba(0, 0, 0, 0.35);

	--HS-Hero-Edit: rgba(40, 40, 46, 0.38);
	--HS-Hero-Edit-Shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.6);

	--HS-Hero-Ring: rgba(255, 255, 255, 0.05);
	--HS-Hero-Ring-Edge: rgba(255, 255, 255, 0.24);
}

/*
**
**
**
**
**
** Page & Snapping
** =================================
**
** The first screen and the drawer's toolbar band are the two resting places. The pager
** (homescreen.pager.js) settles the page onto one of them itself, riding its spring, rather
** than leaving it to the browser's scroll snapping, which on touch screens shifted under
** the finger as the viewport resized and let go at the wrong moments.
*/

#TL-Home[data-home-layout="search"] {
	overscroll-behavior-y: contain;
}

#TL-Home[data-home-layout="search"] > .wrapper {
	padding: 0;
}

#TL-Home .apps > .HS-Hero[hidden] {
	display: none;
}

/* At least a screen tall, so the drawer can always scroll all the way up, however few apps there are */
#TL-Home[data-home-layout="search"] .apps > .HS-Grid {
	box-sizing: border-box;
	min-height: calc(var(--HS-View) - 66px);
	padding-bottom: 120px;
}

/*
** The pieces the pager rides are kept on layers of their own ahead of time, so a ride's first
** frame has nothing to paint
*/
#TL-Home[data-home-layout="search"]:not(.HS-Editing) .apps > :is(.HS-Hero, header.HS-Toolbar, .HS-Grid) {
	will-change: translate;
}

/*
** ==== The drawer's tiles ====
** Hidden until the drawer opens, so nothing rides along under the first screen. As it comes
** up they bubble in one after another in reading order, a quick cascade that settles into
** the grid; heading back they all shrink away together. Separate translate and scale stack
** on top of each tile's own transform, which reflows and launches it.
**
** The first 120 cascade, more than the largest screen shows at once. They're layered ahead
** of time, so their icons are already painted when they bubble in. Any past that sit far
** below the first screen and are simply there. The cascade stops stepping after 60, so
** even a full screen of apps is in place within three quarters of a second.
*/
#TL-Home[data-home-layout="search"]:not(.HS-Editing) .HS-Grid > .HS-Tile:nth-child(-n + 120) {
	will-change: translate, scale, opacity;
	transition:
		transform 420ms var(--HS-Spring-Soft),
		translate 200ms ease-in,
		scale 200ms ease-in,
		opacity 160ms ease-in;
}

#TL-Home[data-home-layout="search"]:not(.HS-Drawer-Up):not(.HS-Editing) .HS-Grid > .HS-Tile:nth-child(-n + 120) {
	translate: 0 24px;
	scale: 0.6;
	opacity: 0;
	pointer-events: none;
}

#TL-Home[data-home-layout="search"].HS-Drawer-Up:not(.HS-Editing) .HS-Grid > .HS-Tile:nth-child(-n + 120) {
	--HS-Drawer-Delay: calc(min(var(--HS-Index, 0), 60) * 10ms + 90ms);

	transition:
		transform 420ms var(--HS-Spring-Soft),
		translate 560ms var(--HS-Hero-Bounce) var(--HS-Drawer-Delay),
		scale 520ms var(--HS-Hero-Pop) var(--HS-Drawer-Delay),
		opacity 200ms ease-out var(--HS-Drawer-Delay);
}

/* The drawer rests with its toolbar band this far down from the top of the page */
#TL-Home[data-home-layout="search"] .apps > header.HS-Toolbar {
	scroll-margin-top: 10px;
}

/*
**
**
**
**
**
** First Screen
** =================================
*/

#TL-Home .apps > .HS-Hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 520px;
	height: var(--HS-View);
	padding: 72px 24px 88px 24px;
	container-type: inline-size;
}

/* Heading to the drawer, the first screen lifts away and fades back; coming home it springs back in */
.HS-Hero > .HS-Hero-Center {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(640px, 100%);
	transition:
		transform 600ms var(--HS-Hero-Bounce),
		opacity 280ms ease-out;
}

#TL-Home.HS-Drawer-Up .HS-Hero > .HS-Hero-Center {
	opacity: 0.12;
	transform: translateY(-40px) scale(0.94);
	transition:
		transform 520ms var(--HS-Hero-Bounce),
		opacity 200ms ease-in;
}

/*
** ==== Greeting ====
** One line where it fits, a bold welcome and a light question, free to run wider than the
** search below it. Narrower screens break it between the two phrases, never inside one.
*/
.HS-Hero-Greeting {
	width: max-content;
	max-width: 100cqw;
	margin: 0 0 28px 0;

	/* Montserrat, which has the regular and bold weights this needs; Rubik only ships semibold and up */
	font-family: var(--Primary-Font);
	font-size: clamp(26px, 2.3vw, 34px);
	line-height: 1.22;
	letter-spacing: -0.015em;
	color: var(--HS-Text);
	text-align: center;
	text-wrap: balance;
}

.HS-Hero-Greeting > span,
.HS-Hero-Greeting > em {
	display: inline-block;
}

.HS-Hero-Greeting > span {
	font-weight: 700;
}

.HS-Hero-Greeting > em {
	font-style: italic;
	font-weight: 400;
	color: var(--HS-Text-3);
}

/* ==== Search pill - opens the system search, which grows right out of it ==== */
.HS-Hero .HS-Hero-Search {
	display: flex;
	align-items: center;
	gap: 14px;
	box-sizing: border-box;
	width: 100%;
	height: 62px;
	padding: 0 14px 0 24px;
	background-color: var(--HS-Hero-Field);
	border-radius: 31px;
	box-shadow:
		var(--HS-Hero-Field-Shadow),
		inset 0 0 0 1px var(--HS-Hero-Field-Edge);
	color: var(--HS-Text-3);
	text-align: left;
	cursor: text;
}

.HS-Hero-Search > svg {
	flex: none;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	transition: transform 360ms var(--HS-Spring);
}

.HS-Hero-Search > .HS-Hero-Search-Text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 16.5px;
	font-weight: 450;
}

/* Phones get the shorter placeholder (see Responsive) */
.HS-Hero-Search-Text > .short {
	display: none;
}

.HS-Hero-Search > .HS-Hero-Search-Key {
	flex: none;
	padding: 5px 9px;
	background-color: var(--HS-Hover);
	border-radius: 9px;
	font-family: var(--Theme-Font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--HS-Text-3);
}

.HS-Hero-Search:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 4px var(--HS-Accent-Soft),
		var(--HS-Hero-Field-Shadow),
		inset 0 0 0 1px var(--HS-Hero-Field-Edge);
}

/*
** While search is open its field stands in for the pill ("away"). Closing, the pill fades back
** in under the field as it lands ("landing", animated by TL.SearchWindow), then holds still
** for a moment ("back") so nothing fades it twice
*/
#TL-Home .HS-Hero .HS-Hero-Search[data-search-origin] {
	transition: none;
}

#TL-Home .HS-Hero .HS-Hero-Search[data-search-origin="away"] {
	opacity: 0;
}

/*
** ==== Edit - the one edit button, held in the top right corner of both screens ====
** The corner has no height and sticks to the top of the page, so the pill rides along from
** the first screen into the drawer, where it sits in the band the app search left behind.
** Edit mode's own toolbar takes over from it while editing.
*/
#TL-Home .apps > .HS-Corner {
	display: none;
}

#TL-Home[data-home-layout="search"] .apps > .HS-Corner {
	position: sticky;
	top: 0;
	z-index: 6;
	display: flex;
	justify-content: flex-end;
	height: 0;
	padding: 0 14px;
}

/*
** With the drawer up, the apps scroll under a frosted band behind the search and edit pills,
** fading out at its lower edge so they slip under it rather than being cut off. It's the one
** live blur here: it comes in once the ride has landed and leaves the moment the page heads
** home, and the wallpaper holds still under the drawer so the blur only redraws as it scrolls.
*/
#TL-Home .HS-Corner::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	height: calc(env(safe-area-inset-top, 0px) + 78px);
	background: linear-gradient(to bottom, var(--HS-Hero-Edit), transparent);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	backdrop-filter: blur(18px) saturate(1.4);
	-webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
	mask-image: linear-gradient(to bottom, #000 62%, transparent);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 140ms ease-in,
		visibility 0s linear 140ms;
}

body[data-home="true"] #TL-Home.HS-Drawer-Up:not(.HS-Editing) .HS-Corner::before {
	opacity: 1;
	visibility: visible;
	transition:
		opacity 260ms ease-out 220ms,
		visibility 0s;
}

/* Plain glass with no backdrop blur of their own: the band behind them does the frosting */
#TL-Home .HS-Corner > .HS-Corner-Edit {
	flex: none;
	margin-top: 14px;
	background-color: var(--HS-Hero-Edit);
	box-shadow: var(--HS-Hero-Edit-Shadow);
}

@media (hover: hover) {
	body[data-home="true"] #TL-Home .HS-Corner > .HS-Corner-Edit:hover {
		background-color: var(--HS-Glass-Strong);
		box-shadow: var(--HS-Glass-Shadow);
	}
}

.HS-Corner-Edit > img {
	width: 14px;
	height: 14px;
	opacity: 0.72;
	transition: transform 420ms var(--HS-Spring);
}

@media (hover: hover) {
	.HS-Corner-Edit:hover > img {
		transform: rotate(-14deg) scale(1.08);
	}
}

/*
** ==== The drawer's search - the same glass as the edit pill, opening the one search ====
** Centered in the corner, where the first screen's search pill was. It waits for the drawer
** to come up, bubbling in once the page has mostly arrived, and steps away again going home.
*/
#TL-Home .HS-Corner > .HS-Corner-Search {
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% 0;
	justify-content: flex-start;
	gap: 9px;
	width: min(460px, calc(100% - 260px));
	margin-top: 14px;
	padding: 0 18px 0 15px;
	box-sizing: border-box;
	background-color: var(--HS-Hero-Edit);
	box-shadow: var(--HS-Hero-Edit-Shadow);

	/* Half its height rather than fully round, so the search field's corners morph out of it evenly */
	border-radius: 19px;
	color: var(--HS-Text-3);
	font-weight: 500;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(0.94);
	pointer-events: none;
	transition:
		transform 220ms ease-in,
		opacity 160ms ease-in,
		visibility 0s linear 220ms,
		background-color 200ms ease,
		box-shadow 200ms ease;
}

body[data-home="true"] #TL-Home.HS-Drawer-Up:not(.HS-Editing) .HS-Corner > .HS-Corner-Search {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition:
		transform 520ms var(--HS-Hero-Pop) 140ms,
		opacity 200ms ease-out 140ms,
		visibility 0s,
		background-color 200ms ease,
		box-shadow 200ms ease;
}

.HS-Corner-Search > svg {
	flex: none;
	width: 15px;
	height: 15px;
	fill: none;
	stroke: var(--HS-Text-2);
	stroke-width: 2.4;
	stroke-linecap: round;
	transition: transform 420ms var(--HS-Spring);
}

@media (hover: hover) {
	body[data-home="true"] #TL-Home .HS-Corner > .HS-Corner-Search:hover {
		background-color: var(--HS-Glass-Strong);
		box-shadow: var(--HS-Glass-Shadow);
	}

	.HS-Corner-Search:hover > svg {
		transform: scale(1.1);
	}
}

/* While search is open its field stands in for this pill too, like the first screen's (see above) */
body[data-home="true"] #TL-Home.HS-Drawer-Up:not(.HS-Editing) .HS-Corner > .HS-Corner-Search[data-search-origin] {
	transition: none;
}

body[data-home="true"] #TL-Home.HS-Drawer-Up:not(.HS-Editing) .HS-Corner > .HS-Corner-Search[data-search-origin="away"] {
	opacity: 0;
}

/* ==== The drawer's header: the app search and its edit button give way to the one search ==== */
#TL-Home[data-home-layout="search"] .apps > header.HS-Toolbar > .HS-Search,
#TL-Home[data-home-layout="search"] .HS-Toolbar-Edit,
#TL-Home[data-home-layout="search"] .apps > .HS-Search-Empty {
	display: none;
}

/* ==== All apps - the way down to the drawer, gone once it's up ==== */
#TL-Home .HS-Hero > .HS-Hero-All {
	position: absolute;
	left: 50%;
	bottom: 26px;

	/* Centered with translate, leaving transform free for its entrance and press */
	translate: -50% 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 40px;
	min-width: 156px;
	padding: 0 20px 0 16px;
	box-sizing: border-box;

	/* Stronger glass in place of a backdrop blur, which would be redone every frame the wallpaper drifts */
	background-color: var(--HS-Glass-Strong);
	border: 1px solid var(--HS-Glass-Border);
	border-radius: 999px;
	box-shadow: var(--HS-Glass-Shadow);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--HS-Text-2);
	cursor: pointer;
}

/* A grid of nine dots that gathers in a little under the pointer */
.HS-Hero-All > svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	transition: transform 360ms var(--HS-Hero-Pop);
}

@media (hover: hover) {
	.HS-Hero-All:hover > svg {
		transform: scale(0.86) rotate(90deg);
	}
}

#TL-Home .HS-Hero > .HS-Hero-All:active {
	transform: scale(0.95);
}

/*
**
**
**
**
**
** Pinned Apps
** =================================
**
** Pins open like app icons and share their launch motion (homescreen.motion.js): pushed
** away while an app is open, settling back in a ripple, and popping up to catch the app
** that was launched from them.
*/

.HS-Hero .HS-Pinned {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22px 16px;
	width: 100%;
	margin-top: 40px;
}

.HS-Hero .HS-Pin {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	width: 76px;
	cursor: pointer;
	-webkit-touch-callout: none;
}

.HS-Pin > .HS-App-Icon {
	width: 62px;
}

/* Two lines, so longer report names still read */
.HS-Pin > .HS-Pin-Label {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	width: calc(100% + 8px);
	overflow: hidden;
	overflow-wrap: anywhere;
	text-align: center;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 15px;
	color: var(--HS-Label);
	text-shadow: var(--HS-Label-Shadow);
}

/* Apps that aren't open in the beta yet sit back a little */
.HS-Pin[data-enabled="false"] > .HS-App-Icon {
	opacity: 0.55;
}

/* ==== Report pins: the report's own 3D icon, with the reporting app's icon tucked in the corner ==== */
.HS-Pin[data-kind="report"] > .HS-App-Icon > img:first-child {
	width: 56%;
}

.HS-Pin > .HS-App-Icon > img.HS-Pin-Badge {
	position: absolute;
	right: -3px;
	bottom: -3px;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	padding: 4px;
	background: var(--HS-Icon-Fill);
	border-radius: 50%;
	box-shadow: 0 2px 6px -1px rgba(30, 30, 60, 0.3);
}

@media (hover: hover) {
	.HS-Pin:not(.HS-Pin-Add):hover > .HS-App-Icon {
		transform: translateY(-3px) scale(1.06);
		box-shadow: 0 14px 26px -10px rgba(30, 30, 60, 0.38);
	}

	.HS-Pin:not(.HS-Pin-Add):hover > .HS-App-Icon > img {
		transform: scale(1.08);
		filter: drop-shadow(0 6px 6px rgba(10, 10, 10, 0.18));
	}
}

.HS-Pin:active > .HS-App-Icon,
.HS-Pin:active > .HS-Pin-Add-Ring {
	transform: scale(0.88);
	transition-duration: 160ms;
}

/* ==== Add / Edit pin ==== */
.HS-Pin-Add > .HS-Pin-Add-Ring {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 62px;
	aspect-ratio: 1;
	background-color: var(--HS-Hero-Ring);
	border: 1.5px dashed var(--HS-Hero-Ring-Edge);
	border-radius: 50%;
	color: var(--HS-Text-2);
	transition:
		transform 360ms var(--HS-Spring),
		background-color 220ms ease,
		border-color 220ms ease;
}

.HS-Pin-Add-Ring > svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 420ms var(--HS-Spring);
}

.HS-Pin-Add > .HS-Pin-Label {
	color: var(--HS-Text-2);
}

@media (hover: hover) {
	.HS-Pin-Add:hover > .HS-Pin-Add-Ring {
		background-color: var(--HS-Glass);
		border-color: var(--HS-Text-3);
		transform: translateY(-3px);
	}

	.HS-Pin-Add:hover > .HS-Pin-Add-Ring > svg {
		transform: rotate(90deg);
	}
}

/* ==== Pinning and unpinning from the sheet ==== */
#TL-Home .HS-Pin.is-new {
	animation: HS-Pin-In 520ms var(--HS-Spring);
}

#TL-Home .HS-Pin.is-leaving {
	opacity: 0;
	transform: scale(0.4);
	transition:
		transform 240ms var(--HS-Ease-Out),
		opacity 200ms ease;
}

@keyframes HS-Pin-In {
	from {
		opacity: 0;
		transform: scale(0.4);
	}
}

/*
**
**
**
**
**
** Coming & Going
** =================================
**
** The same dive and settle as the grid (homescreen.css, Coming & Going). Pins are their
** own motion layer; the rest of the first screen zooms with the toolbar.
*/

.HS-Pin {
	opacity: 0;
	transform: translate(var(--HS-Away-X, 0px), var(--HS-Away-Y, 0px)) scale(1.12);
	transition:
		transform var(--HS-Dive),
		opacity 190ms ease-out;
}

.HS-Pin.HS-Origin {
	transform: scale(0.68);
	transition:
		transform var(--HS-Dive),
		opacity 130ms ease-out;
}

:where(body[data-home="true"]) #TL-Home .HS-Pin {
	opacity: 1;
	transform: none;
	transition:
		transform var(--HS-Settle),
		opacity 220ms ease-out;
	transition-delay: var(--HS-Ripple, calc(var(--HS-Index, 0) * 24ms + 60ms));
}

:where(body[data-home="true"]) #TL-Home .HS-Pin.HS-Origin {
	transition:
		transform var(--HS-Pop),
		opacity 160ms ease-out;
	transition-delay: var(--HS-Land);
}

.HS-Hero-Greeting,
.HS-Hero .HS-Hero-Search,
#TL-Home .HS-Corner > .HS-Corner-Edit,
#TL-Home .HS-Hero > .HS-Hero-All {
	opacity: 0;
	scale: 1.06;
	transition:
		scale var(--HS-Dive),
		opacity 170ms ease-out,
		transform 360ms var(--HS-Spring),
		box-shadow 260ms ease,
		background-color 220ms ease;
}

body[data-home="true"] .HS-Hero-Greeting,
body[data-home="true"] .HS-Hero .HS-Hero-Search,
body[data-home="true"] #TL-Home .HS-Corner > .HS-Corner-Edit,
body[data-home="true"] #TL-Home .HS-Hero > .HS-Hero-All {
	opacity: 1;
	scale: 1;
	transition:
		scale var(--HS-Settle),
		opacity 220ms ease-out,
		transform 360ms var(--HS-Spring),
		box-shadow 260ms ease,
		background-color 220ms ease;
}

/* The search pill follows the greeting in, a beat behind */
body[data-home="true"] .HS-Hero .HS-Hero-Search {
	transition-delay: 30ms, 30ms, 0ms, 0ms, 0ms;
}

/* The pill lifts toward the pointer and gives under a press */
@media (hover: hover) {
	body[data-home="true"] .HS-Hero .HS-Hero-Search:hover {
		transform: translateY(-2px);
		box-shadow:
			var(--HS-Hero-Field-Lift),
			inset 0 0 0 1px var(--HS-Hero-Field-Edge);
	}

	body[data-home="true"] .HS-Hero .HS-Hero-Search:hover > svg {
		transform: scale(1.1);
	}
}

body[data-home="true"] .HS-Hero .HS-Hero-Search:active {
	transform: scale(0.98);
	transition-duration: 220ms, 220ms, 160ms, 260ms, 220ms;
}

/* Once the drawer is up, the nudge toward it steps aside */
body[data-home="true"] #TL-Home.HS-Drawer-Up .HS-Hero > .HS-Hero-All {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}

/* Edit mode's toolbar has its own Done, so the edit pill bows out while editing */
body[data-home="true"] #TL-Home.HS-Editing .HS-Corner > .HS-Corner-Edit {
	opacity: 0;
	transform: translateY(-8px) scale(0.92);
	pointer-events: none;
}

/*
**
**
**
**
**
** Pinned Apps Sheet
** =================================
*/

/* ==== Filter ==== */
.HS-Pin-Picker > .HS-Pin-Filter {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	height: 44px;
	margin: 0 0 12px 0;
	padding: 0 14px;
	background-color: var(--HS-Glass-Strong);
	border: 1px solid var(--HS-Glass-Border);
	border-radius: 14px;
	cursor: text;
	transition: box-shadow 220ms ease;
}

.HS-Pin-Picker > .HS-Pin-Filter:focus-within {
	box-shadow: 0 0 0 4px var(--HS-Accent-Soft);
}

.HS-Pin-Filter > svg {
	flex: none;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: var(--HS-Text-3);
	stroke-width: 2.4;
	stroke-linecap: round;
}

.HS-Pin-Filter > input[name="HS-Pin-Filter"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	font-family: var(--Theme-Font);
	font-size: 16px;
	font-weight: 500;
	color: var(--HS-Text);
}

.HS-Pin-Filter > input[name="HS-Pin-Filter"]::placeholder {
	color: var(--HS-Text-3);
	font-weight: 400;
}

.HS-Pin-Picker > .HS-Pin-Count {
	margin: 0 0 14px 0;
}

/* ==== Apps and reports ==== */
.HS-Pin-Group + .HS-Pin-Group {
	margin-top: 22px;
}

.HS-Pin-Group > h3 {
	margin: 0 0 10px 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--HS-Text-3);
}

.HS-Pin-Group[hidden],
.HS-Pin-Group[data-state="empty"],
.HS-Pin-Choice[hidden],
.HS-Pin-Picker > .HS-Pin-Nothing[hidden] {
	display: none;
}

.HS-Pin-Group > .HS-Pin-Loading {
	display: none;
	margin: 0;
}

.HS-Pin-Group[data-state="loading"] > .HS-Pin-Loading {
	display: block;
	animation: HS-Pin-Loading 1.4s ease-in-out infinite;
}

@keyframes HS-Pin-Loading {
	50% {
		opacity: 0.45;
	}
}

.HS-Pin-Choices {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 8px;
}

/* Report names run long ("Store Expenses YTD Summary"), so they get wider columns */
.HS-Pin-Group[data-group="reports"] > .HS-Pin-Choices {
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.HS-Pin-Choice {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 7px 10px 7px 8px;
	background-color: var(--HS-Glass-Strong);
	border: 1px solid var(--HS-Glass-Border);
	border-radius: 14px;
	text-align: left;
	cursor: pointer;
	transition:
		transform 300ms var(--HS-Spring),
		opacity 200ms ease,
		box-shadow 220ms ease;
}

.HS-Pin-Choice:active {
	transform: scale(0.96);
}

.HS-Pin-Choice[aria-pressed="true"] {
	box-shadow: 0 0 0 2px var(--HS-Accent);
}

/* A full row dims what can't be pinned yet */
.HS-Pin-Picker[data-full="true"] .HS-Pin-Choice[aria-pressed="false"] {
	opacity: 0.5;
}

.HS-Pin-Choice > img.icon {
	flex: none;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	padding: 6px;
	background: var(--HS-Icon-Fill);
	border-radius: 50%;
	box-shadow: var(--HS-Icon-Shadow);
}

/* Report icons are full color 3D glyphs, so they get a little more of the circle */
.HS-Pin-Choice > img.icon.is-report {
	padding: 5px;
}

.HS-Pin-Choice > .name,
.HS-Pin-Choice > .text {
	flex: 1;
	min-width: 0;
}

.HS-Pin-Choice > .text {
	display: flex;
	flex-direction: column;
}

.HS-Pin-Choice .name,
.HS-Pin-Choice .meta {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.HS-Pin-Choice .name {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--HS-Text);
}

/* A report's name gets a second line before it's cut short */
.HS-Pin-Choice > .text > .name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	white-space: normal;
	overflow-wrap: anywhere;
}

.HS-Pin-Choice .meta {
	font-size: 11.5px;
	font-weight: 500;
	color: var(--HS-Text-3);
}

.HS-Pin-Choice .meta:empty {
	display: none;
}

.HS-Pin-Choice > .check {
	display: grid;
	flex: none;
	place-items: center;
	box-sizing: border-box;
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--HS-Hairline);
	border-radius: 50%;
	transition:
		background-color 200ms ease,
		border-color 200ms ease,
		transform 360ms var(--HS-Spring);
}

.HS-Pin-Choice > .check > svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: #fff;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
	transform: scale(0.4);
	transition:
		opacity 160ms ease,
		transform 360ms var(--HS-Spring);
}

.HS-Pin-Choice[aria-pressed="true"] > .check {
	background-color: var(--HS-Accent);
	border-color: transparent;
}

.HS-Pin-Choice[aria-pressed="true"] > .check > svg {
	opacity: 1;
	transform: none;
}

/* No room left: a quick shake of the head */
.HS-Pin-Choice.is-refused {
	animation: HS-Pin-Refused 380ms var(--HS-Ease-Out);
}

@keyframes HS-Pin-Refused {
	20% {
		transform: translateX(-6px);
	}

	45% {
		transform: translateX(5px);
	}

	70% {
		transform: translateX(-3px);
	}
}

/*
**
**
**
**
**
** Responsive
** =================================
*/

/* The bottom navigation takes its share of the screen */
@media only screen and (max-width: 900px) {
	#TL-Home {
		--HS-View: calc(100vh - 60px);
		--HS-View: calc(100dvh - 60px);
	}
}

@media only screen and (max-width: 640px) {
	/* Clear of the notch when the app runs full screen */
	#TL-Home .apps > .HS-Hero {
		min-height: 480px;
		padding: calc(env(safe-area-inset-top, 0px) + 68px) 18px 80px 18px;
	}

	.HS-Hero-Greeting {
		margin-bottom: 24px;
		font-size: 26px;
	}

	.HS-Hero .HS-Hero-Search {
		height: 54px;
		padding: 0 20px;
		border-radius: 27px;
	}

	/* 16px or more keeps the text the same size as the search field it opens into */
	.HS-Hero-Search > .HS-Hero-Search-Text {
		font-size: 16px;
	}

	.HS-Hero-Search-Text > .long {
		display: none;
	}

	.HS-Hero-Search-Text > .short {
		display: inline;
	}

	/* No keyboard shortcut to show on a phone */
	.HS-Hero-Search > .HS-Hero-Search-Key {
		display: none;
	}

	/* Clear of the notch when the app runs full screen */
	#TL-Home .HS-Corner > .HS-Corner-Edit {
		margin-top: calc(env(safe-area-inset-top, 0px) + 14px);
	}

	/* The drawer's search fills the space beside the edit pill */
	#TL-Home .HS-Corner > .HS-Corner-Search {
		position: static;
		flex: 1;
		width: auto;
		min-width: 0;
		margin: calc(env(safe-area-inset-top, 0px) + 14px) 10px 0 0;
		translate: none;
	}

	/* Four pins a row */
	.HS-Hero .HS-Pinned {
		gap: 20px 12px;
		margin-top: 32px;
	}

	.HS-Hero .HS-Pin {
		width: calc((100% - 36px) / 4);
		max-width: 76px;
	}

	.HS-Pin > .HS-App-Icon,
	.HS-Pin-Add > .HS-Pin-Add-Ring {
		width: 58px;
	}

	.HS-Pin-Choices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Short phones (an iPhone SE) tighten up so two rows of pins still clear the All apps button */
@media only screen and (max-width: 640px) and (max-height: 720px) {
	#TL-Home .apps > .HS-Hero {
		min-height: 440px;
		padding-top: calc(env(safe-area-inset-top, 0px) + 60px);
		padding-bottom: 74px;
	}

	.HS-Hero-Greeting {
		margin-bottom: 18px;
		font-size: 23px;
	}

	.HS-Hero .HS-Pinned {
		gap: 14px 12px;
		margin-top: 24px;
	}

	.HS-Pin > .HS-App-Icon,
	.HS-Pin-Add > .HS-Pin-Add-Ring {
		width: 54px;
	}
}

/* Touch screens have no keyboard shortcut to show */
@media (hover: none) {
	.HS-Hero-Search > .HS-Hero-Search-Key {
		display: none;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.HS-Hero > .HS-Hero-Center,
	#TL-Home[data-home-layout="search"] .HS-Grid > .HS-Tile,
	.HS-Hero-All > svg,
	.HS-Pin,
	.HS-Hero-Greeting,
	.HS-Hero .HS-Hero-Search,
	#TL-Home .HS-Corner > .HS-Corner-Edit,
	#TL-Home .HS-Corner > .HS-Corner-Search,
	#TL-Home .HS-Hero > .HS-Hero-All {
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}

	.HS-Pin-Group[data-state="loading"] > .HS-Pin-Loading,
	#TL-Home .HS-Pin.is-new,
	.HS-Pin-Choice.is-refused {
		animation: none !important;
	}

	#TL-Home[data-home-layout="search"] {
		scroll-behavior: auto;
	}
}