/*
 * Lab-only comparison for where the relative time can sit.
 * Loaded on the purchase-toast lab page, not on the rest of the site.
 */

.skid-toast-lab {
	box-sizing: border-box;
	max-width: 40rem;
	padding: 2.5rem 1.25rem 8rem;
	color: var(--skid-ink, #1a1a1a);
	font-family: var(--skid-font-body, Barlow, sans-serif);
}

.skid-toast-lab__title {
	margin: 0 0 0.75rem;
	font-family: var(--skid-font-heading, "Cormorant Garamond", Georgia, serif);
	font-weight: 500;
	font-size: 3.25rem;
	line-height: 0.95;
	color: var(--skid-ink-brown, #463c36);
}

.skid-toast-lab__note {
	margin: 0;
	max-width: 38rem;
	font-size: 1.05rem;
	line-height: 1.45;
	color: var(--skid-muted, #6b6560);
}

.skid-toast-lab__grid {
	display: grid;
	gap: 1.75rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.skid-toast-lab__label {
	margin: 0 0 0.45rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--skid-muted, #6b6560);
}

.skid-toast-lab__why {
	margin: 0.45rem 0 0;
	max-width: 22rem;
	font-size: 0.92rem;
	line-height: 1.4;
	color: var(--skid-muted, #6b6560);
}

.skid-toast-lab .skid-toast {
	width: min(22rem, 100%);
}

.skid-toast--when-below .skid-toast__when {
	margin: 0.12rem 0 0;
	font-size: 0.75rem;
	line-height: 1.2;
	color: var(--skid-muted, #6b6560);
}

.skid-toast__ago {
	color: var(--skid-bloom, #c794c1);
	font-weight: 400;
}

.skid-toast--when-photo .skid-toast__photo-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
}

.skid-toast--when-photo .skid-toast__when {
	margin: 0;
	max-width: calc(var(--skid-toast-line) * var(--skid-toast-leading) * 2);
	font-size: 0.62rem;
	line-height: 1.15;
	text-align: center;
	color: var(--skid-muted, #6b6560);
}