/*
**
**
**
**
**
** Summary Cards
** =================================
**
** The cards right under the Today briefing in the daily summary: tasks (scripts/browser.js) and
** nearby jobs (scripts/nearbyjobs.js). They share the briefing card's shape, a glass tile holding
** a large 3D icon beside white copy, but wear the wallpaper's softer companion accent
** (--HS-Accent-2 in wallpapers.css, Accents) and sit a touch smaller, so Today still leads:
** maroon Today with autumn gold cards on Fall Leaves, and so on for every theme.
**
** Markup lives in templates/sys.apps.html.
**
**   --Summary-Sheen   A soft highlight across the top left corner, like light on glass
**   --Summary-Scrim   A thin veil over the accent: a little white mist on light home screens so the
**                     color reads natural rather than saturated, a shade of dark on dark ones
**   --Summary-Glass   The translucent white behind the icon, count, chips, and arrow
*/

.TL-Message-Preview-Home.TL-Summary-Card {
	--Summary-Sheen: rgba(255, 255, 255, 0.22);
	--Summary-Scrim: rgba(255, 252, 248, 0.1);
	--Summary-Glass: rgba(255, 255, 255, 0.2);

	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 0;
	padding: 14px 16px;
	color: #fff;
	background-color: #3c9684;
	background-image:
		radial-gradient(120% 90% at 0% 0%, var(--Summary-Sheen), transparent 60%),
		linear-gradient(var(--Summary-Scrim), var(--Summary-Scrim)),
		var(--HS-Accent-2, linear-gradient(135deg, #3c9684 0%, #4caa91 58%, #84caae 125%));
	overflow: visible;
	outline: none;
}

/* On the home screen the card takes its color from the wallpaper. The layers stay on the background
   because winter's snow and Christmas's candy canes already use the card's ::before and ::after */
#TL-Home .daily-summary .TL-Message-Preview-Home.TL-Summary-Card {
	background-color: #3c9684;
	background-image:
		radial-gradient(120% 90% at 0% 0%, var(--Summary-Sheen), transparent 60%),
		linear-gradient(var(--Summary-Scrim), var(--Summary-Scrim)),
		var(--HS-Accent-2, var(--HS-Accent));
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow:
		0 14px 28px -16px var(--HS-Accent-2-Glow, var(--HS-Accent-Glow)),
		0 2px 6px rgba(20, 10, 20, 0.06);
}

#TL-Home[data-hs-theme="dark"] .daily-summary .TL-Message-Preview-Home.TL-Summary-Card {
	--Summary-Sheen: rgba(255, 255, 255, 0.1);
	--Summary-Scrim: rgba(10, 10, 14, 0.22);

	border-color: rgba(255, 255, 255, 0.08);
	box-shadow:
		0 18px 34px -16px rgba(0, 0, 0, 0.6),
		0 12px 28px -18px var(--HS-Accent-2-Glow, var(--HS-Accent-Glow));
}

#TL-Home .daily-summary .TL-Message-Preview-Home.TL-Summary-Card:hover,
#TL-Home .daily-summary .TL-Message-Preview-Home.TL-Summary-Card:focus-visible {
	box-shadow:
		0 18px 32px -14px var(--HS-Accent-2-Glow, var(--HS-Accent-Glow)),
		0 2px 6px rgba(20, 10, 20, 0.08);
}

#TL-Home .daily-summary .TL-Message-Preview-Home.TL-Summary-Card:active {
	transform: scale(0.98);
}

/*
**
** Icon
** =================================
** A glass tile with the 3D icon, like the briefing card's
*/

.TL-Summary-Card-Icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 50px;
	height: 50px;
	background-color: var(--Summary-Glass);
	border-radius: 15px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.TL-Summary-Card-Icon > img {
	width: 34px;
	height: 34px;
	transition: transform 420ms cubic-bezier(0.34, 1.6, 0.64, 1);
}

.TL-Summary-Card:hover .TL-Summary-Card-Icon > img {
	transform: scale(1.12) rotate(-6deg);
}

/*
**
** Copy
** =================================
*/

.TL-Summary-Card-Copy {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	text-align: left;
}

.TL-Summary-Card-Eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.82;
}

.TL-Summary-Card-Title {
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: -0.01em;
}

/* The number in the title, in a small glass pill so it reads at a glance */
.TL-Summary-Card-Count {
	display: inline-block;
	min-width: 12px;
	padding: 0 6px;
	font-variant-numeric: tabular-nums;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.26);
	border-radius: 7px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.TL-Summary-Card-Body {
	font-size: 12.5px;
	line-height: 17px;
	opacity: 0.9;
}

/*
**
** Go Arrow
** =================================
*/

.TL-Summary-Card-Go {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	background-color: var(--Summary-Glass);
	border-radius: 50%;
	transition: transform 360ms cubic-bezier(0.34, 1.6, 0.64, 1);
}

.TL-Summary-Card:hover .TL-Summary-Card-Go {
	transform: translateX(3px) scale(1.06);
}

/* Touch screens don't hover, so nothing stays nudged after a tap */
@media (hover: none) {
	.TL-Summary-Card:hover .TL-Summary-Card-Icon > img,
	.TL-Summary-Card:hover .TL-Summary-Card-Go {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.TL-Summary-Card-Icon > img,
	.TL-Summary-Card-Go {
		transition: none;
	}
}