.ai-o-optimiser-site-compatibility {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	margin: 12px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--ai-o-optimiser-border, var(--aio-hair));
	border-left-width: 4px;
	border-radius: 6px;
	background: #fff;
	line-height: 1.45;
}

.ai-o-optimiser-site-compatibility-recommended {
	border-left-color: var(--aio-pass-edge);
	background: var(--aio-pass-fill);
}

.ai-o-optimiser-site-compatibility-compatible {
	border-left-color: var(--ai-o-optimiser-ui-accent, var(--aio-accent));
	background: var(--aio-accent-tint);
}

.ai-o-optimiser-site-compatibility-review {
	border-left-color: var(--aio-warn-edge);
	background: var(--aio-warn-fill);
}

.ai-o-optimiser-site-compatibility-label {
	white-space: nowrap;
}

.ai-o-optimiser-site-family-section {
	margin-top: 14px;
}

.ai-o-optimiser-site-family-control {
	max-width: 720px;
}

.ai-o-optimiser-site-family-select {
	width: 100%;
	max-width: 520px;
	min-height: 40px;
}

.ai-o-optimiser-site-family-description {
	margin: 7px 0 0;
}

.ai-o-optimiser-site-family-examples {
	margin-top: 8px;
	padding: 8px 10px;
	border-radius: 5px;
	background: var(--aio-ground);
	color: var(--aio-muted);
}

.ai-o-optimiser-site-family-examples:empty {
	display: none;
}

@media screen and (max-width: 782px) {
	.ai-o-optimiser-site-compatibility {
		display: block;
	}

	.ai-o-optimiser-site-compatibility-label {
		display: block;
		margin-bottom: 4px;
		white-space: normal;
	}

	.ai-o-optimiser-site-family-select {
		max-width: 100%;
	}
}