/*
 * The comparison, in this site's clothes (D189).
 *
 * The platform lays a comparison out (`oview-bricks/assets/compare.css`) and
 * this site hands each part the class it ALREADY has for that part, on
 * `oview/compare/classes` in oview-site-one.php: a card is `ov-card`, its
 * heading `ov-heading`, a bar `ov-bar`, a note `ov-note-chip`, a tier head
 * `ov-tier__head`. So a comparison card and a fragrance page card are one
 * card, not a copy that drifts - and `check-class-drift.js` would fail a copy.
 *
 * What is here is only what no existing class says: the two sides facing each
 * other, which tier a shared note sits in, and a few sizes. The colour of each
 * measure is in votes.css, on the same rules the vote cards use.
 */

.oview-compare__lede {
	font-size: var(--text-xl);
	line-height: 1.6;
}

/* The same corner as every large card on a fragrance page. */
.oview-compare__side {
	border-radius: var(--radius-2xl);
}

.oview-compare__name {
	font-family: var(--font-serif);
	font-size: var(--h2);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.04rem;
}

.oview-compare__meta {
	letter-spacing: 0.1rem;
}

.oview-compare__versus {
	font-family: var(--font-serif);
	font-size: var(--h3);
}

/* `ov-card` spaces its children for a stack of short lines; these hold charts. */
.oview-compare__card,
.oview-compare__next {
	gap: var(--space-l);
}

.oview-compare__legend {
	color: var(--color-text-body);
}

.oview-compare__number {
	font-size: var(--text-l);
	color: var(--color-text);
}

/* --- which tier a note sits in, on each side -------------------------------- */

/*
 * The same three tiers the notes pyramid draws, keyed on the group the data
 * carries rather than on a class per tier, so a note is never told its tier
 * twice.
 */
.oview-compare__tag {
	border: var(--border-hair) solid var(--color-tier-top-line);
	background: var(--color-tier-top-tint);
	color: var(--color-text-body);
}

.oview-compare__tag[data-group="middle"],
.oview-compare__chip[data-group="middle"] {
	border-color: var(--color-tier-mid-line);
	background: var(--color-tier-mid-tint);
}

.oview-compare__tag[data-group="base"],
.oview-compare__chip[data-group="base"] {
	border-color: var(--color-tier-base-line);
	background: var(--color-tier-base-tint);
}

.oview-compare__tier[data-group="middle"] .oview-compare__swatch {
	background: var(--color-tier-mid);
}

.oview-compare__tier[data-group="base"] .oview-compare__swatch {
	background: var(--color-tier-base);
}

@media (max-width: 767px) {
	.oview-compare__name {
		font-size: var(--h3);
	}

	.oview-compare__value {
		font-size: var(--h3);
	}

	.oview-compare__versus {
		font-size: var(--text-l);
	}
}