.compare-root {
	display: grid;
	gap: 12px;
}

.compare-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.compare-filter-btn {
	border: 1px solid var(--color-border);
	border-radius: 9999px;
	padding: 6px 12px;
	font-size: 14px;
	background: var(--color-surface);
	color: var(--color-text);
}

.compare-filter-btn[data-active="true"] {
	background: var(--color-text);
	border-color: var(--color-text);
	color: var(--color-text-inverse);
}

.compare-category {
	border: 1px solid var(--color-border);
	border-radius: 8px;
	overflow: hidden;
	background: var(--color-surface);
}

.compare-category-header {
	width: 100%;
	display: flex;
	justify-content: space-between;
	gap: 8px;
	border: 0;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-table-header);
	color: var(--color-text);
	padding: 10px 12px;
	font-weight: 600;
	text-align: left;
}

.compare-table {
	width: 100%;
	border-collapse: collapse;
}

.compare-table th,
.compare-table td {
	border-bottom: 1px solid var(--color-border-muted);
	padding: 8px 10px;
	text-align: left;
	font-size: 14px;
}

.status-pill {
	display: inline-flex;
	align-items: center;
	border-radius: 9999px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 700;
}

.status-compatible {
	background: var(--rating-like);
	color: var(--rating-text-dark);
}

.status-possible {
	background: var(--rating-okay);
	color: var(--rating-text-dark);
}

.status-incompatible {
	background: var(--rating-no);
	color: var(--rating-text-light);
}

.status-unrated {
	background: var(--color-status-neutral-bg);
	border: 1px solid var(--color-status-neutral-border);
	color: var(--color-status-neutral-text);
}

.status-missing {
	background: repeating-linear-gradient(
		135deg,
		var(--color-missing-stripe-a),
		var(--color-missing-stripe-a) 6px,
		var(--color-missing-stripe-b) 6px,
		var(--color-missing-stripe-b) 12px
	);
	color: var(--color-missing-text);
}

.compare-cards {
	display: none;
}

.compare-card {
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background: var(--color-surface);
	padding: 10px;
	margin-bottom: 8px;
}

.compare-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.compare-card-kink {
	font-weight: 600;
	margin-top: 8px;
}

.compare-card-ratings {
	margin-top: 8px;
	display: grid;
	gap: 4px;
	font-size: 14px;
}

@media (max-width: 640px) {
	.compare-table {
		display: none;
	}

	.compare-cards {
		display: block;
		padding: 10px;
	}
}