/* Release 232: shared visual history for people, teams and organizations. */
body.cs2day-v2 .cs2-detail-timeline {
	gap: 7px;
	margin-top: 14px;
}

body.cs2day-v2 .cs2-detail-timeline article.cs2-detail-timeline__event {
	align-items: center;
	background: color-mix(in srgb, var(--cs2-card-elevated) 74%, transparent);
	border: 1px solid color-mix(in srgb, var(--cs2-border) 78%, transparent);
	border-left: 3px solid var(--cs2-border);
	border-radius: 6px;
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(0, 1fr) auto;
	min-height: 62px;
	padding: 8px 10px;
	transition: background-color 160ms ease, border-color 160ms ease;
}

body.cs2day-v2 .cs2-detail-timeline article.cs2-detail-timeline__event--join {
	border-left-color: color-mix(in srgb, var(--cs2-accent) 72%, var(--cs2-border));
}

body.cs2day-v2 .cs2-detail-timeline article.cs2-detail-timeline__event--leave {
	border-left-color: color-mix(in srgb, var(--cs2-error) 68%, var(--cs2-border));
}

body.cs2day-v2 .cs2-detail-timeline article.cs2-detail-timeline__event:hover {
	background: color-mix(in srgb, var(--cs2-card-elevated) 88%, var(--cs2-bg));
	border-color: color-mix(in srgb, var(--cs2-text-muted) 34%, var(--cs2-border));
}

body.cs2day-v2 .cs2-detail-timeline__identity {
	align-items: center;
	color: var(--cs2-text);
	display: grid;
	gap: 8px;
	grid-template-columns: 42px 26px minmax(0, 1fr);
	min-width: 0;
	text-decoration: none;
}

body.cs2day-v2 .cs2-detail-timeline__identity:hover,
body.cs2day-v2 .cs2-detail-timeline__identity:focus {
	color: var(--cs2-text);
	text-decoration: none;
}

body.cs2day-v2 .cs2-detail-timeline__media,
body.cs2day-v2 .cs2-detail-timeline__media img,
body.cs2day-v2 .cs2-detail-timeline__media b {
	border-radius: 5px;
	height: 42px;
	width: 42px;
}

body.cs2day-v2 .cs2-detail-timeline__media {
	align-items: center;
	background: var(--cs2-bg);
	border: 1px solid var(--cs2-border);
	display: flex;
	justify-content: center;
	overflow: hidden;
}

body.cs2day-v2 .cs2-detail-timeline__media img {
	display: block;
	object-position: center;
}

body.cs2day-v2 .cs2-detail-timeline__media--person img { object-fit: cover; }
body.cs2day-v2 .cs2-detail-timeline__media--entity img { object-fit: contain; padding: 3px; }

body.cs2day-v2 .cs2-detail-timeline__media b {
	display: grid;
	font-size: 11px;
	place-items: center;
}

body.cs2day-v2 .cs2-detail-timeline__arrow {
	align-items: center;
	background: var(--cs2-bg);
	border: 1px solid var(--cs2-border);
	border-radius: 4px;
	display: flex;
	font-size: 15px;
	font-weight: 800;
	height: 26px;
	justify-content: center;
	width: 26px;
}

body.cs2day-v2 .cs2-detail-timeline__event--join .cs2-detail-timeline__arrow { color: var(--cs2-accent); }
body.cs2day-v2 .cs2-detail-timeline__event--leave .cs2-detail-timeline__arrow { color: var(--cs2-error); }

body.cs2day-v2 .cs2-detail-timeline__copy {
	display: block;
	min-width: 0;
}

body.cs2day-v2 .cs2-detail-timeline__copy strong {
	color: var(--cs2-text);
	display: block;
	overflow: hidden;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.cs2day-v2 .cs2-detail-timeline__copy small {
	font-size: 11px;
	margin-top: 3px;
}

body.cs2day-v2 .cs2-detail-timeline__event time {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (max-width: 420px) {
	body.cs2day-v2 .cs2-detail-timeline article.cs2-detail-timeline__event {
		align-items: start;
		grid-template-columns: minmax(0, 1fr);
	}

	body.cs2day-v2 .cs2-detail-timeline__event time {
		padding-left: 76px;
	}
}