﻿.ai-workbench-handoff {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem;
	position: relative;
	margin-bottom: 1.25rem;
	border: 1px solid color-mix(in srgb, var(--bs-primary) 32%, var(--bs-border-color));
	border-left: .32rem solid var(--bs-primary);
	border-radius: .2rem;
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--bs-primary-bg-subtle) 72%, transparent), transparent 72%),
		var(--bs-body-bg);
	color: var(--bs-body-color);
	box-shadow: 0 .45rem 1.4rem rgba(var(--bs-primary-rgb), .08);
}

.ai-workbench-handoff__mark {
	display: grid;
	place-items: center;
	width: 2.8rem;
	height: 2.8rem;
	border: 1px solid color-mix(in srgb, var(--bs-primary) 28%, var(--bs-border-color));
	border-radius: 50%;
	background: var(--bs-primary-bg-subtle);
	color: var(--bs-primary-text-emphasis);
	font-size: 1.15rem;
}

.ai-workbench-handoff__body {
	min-width: 0;
	padding-right: 1.25rem;
}

.ai-workbench-handoff__eyebrow {
	margin-bottom: .2rem;
	color: var(--bs-primary-text-emphasis);
	font-size: .7rem;
	font-weight: 750;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.ai-workbench-handoff__headline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .55rem;
	margin-bottom: .65rem;
}

.ai-workbench-handoff__scope {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem;
	overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
	.ai-workbench-handoff {
		grid-template-columns: 1fr;
		padding: 1rem;
	}

	.ai-workbench-handoff__body {
		padding-right: .75rem;
	}
}
