/*
 * A comparison, laid out (D189).
 *
 * The floor every site gets: where the two sides sit, the shared middle line
 * the bars grow out of, and the three columns of a list both sides share.
 * Everything here is inside `:where()`, so it scores nothing and any rule a
 * site writes wins without a fight (D167). A site's LOOK - its type, its
 * card, which colour a measure is - belongs to the site, through the classes
 * it adds on `oview/compare/classes` and its own stylesheet.
 *
 * ⚠️ THE MIDDLE COLUMN IS 17rem WIDE IN TWO PLACES, the spine and the row grid,
 * and they must agree or the band the labels sit on drifts off them. The
 * columns either side of it are equal, which is what puts it in the middle.
 */

/*
 * The page's own rhythm, the account page's shape. Not inside `:where()`:
 * Bricks prints its theme style after every stylesheet, and a container rule
 * that scores nothing would lose to it (design.md).
 */
.oview-compare-page > .brxe-container {
	padding-block: var(--space-xl, 2rem) var(--space-xxl, 2.8rem);
}

:where(.oview-compare) {
	display: flex;
	flex-direction: column;
	gap: var(--space-xxl, 2.8rem);
	min-width: 0;
}

/* The title on the left, and the share row beside it where there is room. */
:where(.oview-compare__intro) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-l, 1.4rem) var(--space-xl, 2rem);
}

:where(.oview-compare__intro-text) {
	display: flex;
	flex: 1 1 48rem;
	flex-direction: column;
	gap: var(--space-s, 0.8rem);
	min-width: 0;
}

:where(.oview-compare__eyebrow, .oview-compare__meta, .oview-compare__card-note, .oview-compare__fact-detail, .oview-compare__amount, .oview-compare__number) {
	font-family: var(--font-mono, ui-monospace, monospace);
	font-variant-numeric: tabular-nums;
}

:where(.oview-compare__eyebrow, .oview-compare__fact-label, .oview-compare__legend, .oview-compare__group, .oview-compare__only-head, .oview-compare__shared-head, .oview-compare__tag) {
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: var(--text-xs, 1.2rem);
	letter-spacing: 0.12rem;
	text-transform: uppercase;
}

:where(.oview-compare p, .oview-compare h1, .oview-compare h2, .oview-compare ul) {
	margin: 0;
}

:where(.oview-compare__title) {
	text-wrap: balance;
}

:where(.oview-compare__vs, .oview-compare__versus) {
	font-style: italic;
	color: var(--color-text-muted, currentColor);
}

:where(.oview-compare__lede) {
	max-width: 64ch;
	text-wrap: pretty;
	color: var(--color-text-body, currentColor);
}

/* --- the two sides ------------------------------------------------------ */

:where(.oview-compare__sides) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--space-l, 1.4rem);
}

:where(.oview-compare__side) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xl, 2rem);
	min-width: 0;
	padding: var(--space-l, 1.4rem);
	border: var(--border-hair, 1px) solid var(--color-border, currentColor);
	border-radius: var(--radius-l-2);
}

/* The second side is the first one's mirror, so the two bottles face each other. */
:where(.oview-compare__side[data-side="b"]) {
	flex-direction: row-reverse;
	text-align: end;
}

:where(.oview-compare__side[data-empty]) {
	flex-direction: column;
	align-items: stretch;
	text-align: start;
}

:where(.oview-compare__stage) {
	flex: 0 0 13rem;
	aspect-ratio: 3 / 4;
}

:where(.oview-compare__shot) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

:where(.oview-compare__body) {
	display: flex;
	flex: 1 1 14rem;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs, 0.5rem);
	min-width: 0;
}

:where(.oview-compare__side[data-side="b"] .oview-compare__body) {
	align-items: flex-end;
}

:where(.oview-compare__name a) {
	color: inherit;
	text-decoration: none;
}

:where(.oview-compare__score) {
	display: flex;
	align-items: baseline;
	gap: var(--space-s, 0.8rem);
}

:where(.oview-compare__value) {
	font-weight: 800;
}

:where(.oview-compare__versus) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5.6rem;
	height: 5.6rem;
	border: var(--border-hair, 1px) solid var(--color-border, currentColor);
	border-radius: var(--radius-full);
}

/* --- the picker --------------------------------------------------------- */

:where(.oview-compare__picker) {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	gap: var(--space-s, 0.8rem);
	min-width: 0;
	text-align: start;
}

.oview-compare__picker[hidden] {
	display: none;
}

/*
 * ⚠️ ONE CLASS DEEP, NOT `:where()`. It is a `<label>`, and a theme's rule for
 * every label scores more than nothing: on this install that made it 158-grey
 * at 2.68:1, which `check-mobile.js` refused.
 */
.oview-compare__picker-label {
	font-weight: 600;
	color: var(--color-text-body, currentColor);
}

:where(.oview-compare__field) {
	width: 100%;
}

:where(.oview-compare__results) {
	display: grid;
	gap: var(--space-3xs, 0.2rem);
	padding: 0;
	list-style: none;
}

:where(.oview-compare__result) {
	display: grid;
	grid-template-columns: 3.2rem minmax(0, 1fr);
	grid-template-areas: "shot name" "shot meta";
	align-items: center;
	column-gap: var(--space-s, 0.8rem);
	padding: var(--space-2xs, 0.4rem);
	border-radius: var(--radius-s);
	color: inherit;
	text-decoration: none;
}

:where(.oview-compare__result:hover, .oview-compare__result:focus-visible) {
	background: var(--color-surface-hover, transparent);
}

:where(.oview-compare__result-shot) {
	grid-area: shot;
	width: 3.2rem;
	height: 4rem;
	object-fit: contain;
}

:where(.oview-compare__result-name) {
	grid-area: name;
	font-weight: 600;
}

:where(.oview-compare__result-meta) {
	grid-area: meta;
	font-size: var(--text-xs, 1.2rem);
	color: var(--color-text-muted, currentColor);
}

/* A house with no space in its name ("Dolce&Gabbana") pushed the other side off a 320px phone. */
:where(.oview-compare__result-name, .oview-compare__result-meta) {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* --- who comes out ahead ------------------------------------------------ */

/* A hairline between every fact, in both directions, however many wrap: the gap IS the line. */
:where(.oview-compare__facts) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--border-hair, 1px);
	border: var(--border-hair, 1px) solid var(--color-border, currentColor);
	border-radius: var(--radius-l-2);
	background: var(--color-border, currentColor);
	overflow: hidden;
}

:where(.oview-compare__fact) {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs, 0.4rem);
	padding: var(--space-l, 1.4rem) var(--space-xl, 2rem);
	background: var(--color-surface, Canvas);
}

:where(.oview-compare__fact-label, .oview-compare__fact-detail, .oview-compare__card-note, .oview-compare__meta, .oview-compare__votes, .oview-compare__amount, .oview-compare__word, .oview-compare__scale) {
	font-size: var(--text-xs, 1.2rem);
	color: var(--color-text-muted, currentColor);
}

:where(.oview-compare__fact-winner) {
	display: flex;
	align-items: center;
	gap: var(--space-2xs, 0.4rem);
	font-size: var(--text-xl, 1.6rem);
	font-weight: 700;
}

:where(.oview-compare__fact-arrow) {
	flex: none;
	width: 1.6rem;
	height: 1.6rem;
	color: var(--color-text-muted, currentColor);
}

/* --- a card of rows ----------------------------------------------------- */

:where(.oview-compare__card) {
	display: flex;
	flex-direction: column;
	gap: var(--space-l, 1.4rem);
	min-width: 0;
	padding: var(--space-xl, 2rem);
	border: var(--border-hair, 1px) solid var(--color-border, currentColor);
	border-radius: var(--radius-l-2);
}

:where(.oview-compare__card-head) {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2xs, 0.4rem) var(--space-m, 1rem);
}

:where(.oview-compare__card-title) {
	font-size: var(--text-xl, 1.6rem);
	font-weight: 700;
}

:where(.oview-compare__rows) {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* The band the labels sit on, drawn once behind every row so it never breaks. */
:where(.oview-compare__spine) {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 17rem;
	transform: translateX(-50%);
	border-radius: var(--radius-l-2);
	background: var(--color-surface-sunk, transparent);
}

:where(.oview-compare__row) {
	position: relative;
	display: grid;
	grid-template-columns: 6.4rem minmax(0, 1fr) 17rem minmax(0, 1fr) 6.4rem;
	grid-template-areas: "amount-a track-a label track-b amount-b";
	align-items: center;
	column-gap: var(--space-m, 1rem);
}

:where([data-kind="scores"] .oview-compare__row) {
	grid-template-columns: 9rem minmax(0, 1fr) 17rem minmax(0, 1fr) 9rem;
}

:where(.oview-compare__amount[data-side="a"], .oview-compare__reading[data-side="a"]) {
	grid-area: amount-a;
	justify-self: end;
	align-items: flex-end;
	text-align: end;
}

:where(.oview-compare__amount[data-side="b"], .oview-compare__reading[data-side="b"]) {
	grid-area: amount-b;
}

:where(.oview-compare__track[data-side="a"]) {
	grid-area: track-a;
}

:where(.oview-compare__track[data-side="b"]) {
	grid-area: track-b;
}

:where(.oview-compare__row > .oview-compare__label, .oview-compare__metric) {
	grid-area: label;
}

:where(.oview-compare__legend) {
	display: flex;
	align-items: center;
	gap: var(--space-s, 0.8rem);
	padding-bottom: var(--space-s, 0.8rem);
}

:where(.oview-compare__legend[data-side="a"]) {
	grid-column: 1 / 3;
	justify-content: flex-end;
}

:where(.oview-compare__legend[data-side="b"]) {
	grid-column: 4 / 6;
}

:where(.oview-compare__thumb) {
	width: 2.4rem;
	height: 3.2rem;
	object-fit: contain;
}

:where(.oview-compare__group) {
	grid-column: 3;
	padding: var(--space-m, 1rem) 0 var(--space-2xs, 0.4rem);
	text-align: center;
	color: var(--color-text-muted, currentColor);
}

:where(.oview-compare__label) {
	padding: var(--space-s, 0.8rem) var(--space-m, 1rem);
	font-weight: 600;
	text-align: center;
}

:where(.oview-compare__label[data-single]) {
	font-weight: 500;
	color: var(--color-text-muted, currentColor);
}

:where(.oview-compare__track) {
	display: block;
	height: 1.2rem;
	border-radius: var(--radius-full);
	background: var(--color-surface-sunk-2, transparent);
	overflow: hidden;
}

:where(.oview-compare__fill) {
	display: block;
	height: 100%;
	border-radius: var(--radius-full);
	background: var(--color-accent, currentColor);
}

/*
 * ⚠️ THE FIRST SIDE'S BAR GROWS LEFTWARD, from the middle, by its margin.
 * Not `justify-content`, which only a flex track honours: a site handing the
 * track its own bar class may make it a block, and the bar would then sit on
 * the wrong end with nothing to say so.
 */
:where(.oview-compare__track[data-side="a"] .oview-compare__fill) {
	margin-inline-start: auto;
}

:where(.oview-compare__metric) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3xs, 0.2rem);
	padding: var(--space-m, 1rem);
	text-align: center;
}

:where(.oview-compare__metric .oview-compare__label) {
	padding: 0;
}

:where(.oview-compare__reading) {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs, 0.2rem);
}

:where(.oview-compare__number) {
	font-weight: 500;
}

/* --- a list both sides share -------------------------------------------- */

:where(.oview-compare__venn) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 30rem minmax(0, 1fr);
	grid-template-areas: "only-a shared only-b";
	align-items: start;
	gap: var(--space-xl, 2rem);
}

:where(.oview-compare__only) {
	display: flex;
	flex-direction: column;
	gap: var(--space-l, 1.4rem);
	padding-top: var(--space-l, 1.4rem);
}

:where(.oview-compare__only[data-side="a"]) {
	grid-area: only-a;
	align-items: flex-end;
	text-align: end;
}

:where(.oview-compare__only[data-side="b"]) {
	grid-area: only-b;
}

:where(.oview-compare__tier) {
	display: flex;
	flex-direction: column;
	gap: var(--space-s, 0.8rem);
}

:where(.oview-compare__only[data-side="a"] .oview-compare__tier) {
	align-items: flex-end;
}

:where(.oview-compare__tier-head) {
	display: flex;
	align-items: center;
	gap: var(--space-s, 0.8rem);
}

:where(.oview-compare__swatch) {
	width: 0.8rem;
	height: 0.8rem;
	border-radius: var(--radius-s);
	background: var(--color-accent, currentColor);
}

:where(.oview-compare__chips) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs, 0.4rem);
}

:where(.oview-compare__only[data-side="a"] .oview-compare__chips) {
	justify-content: flex-end;
}

:where(.oview-compare__chip) {
	padding: var(--space-2xs, 0.4rem) var(--space-s, 0.8rem);
	border: var(--border-hair, 1px) solid var(--color-border, currentColor);
	border-radius: var(--radius-full);
}

:where(.oview-compare__shared) {
	grid-area: shared;
	display: flex;
	flex-direction: column;
	gap: var(--space-s, 0.8rem);
	padding: var(--space-l, 1.4rem);
	border-radius: var(--radius-l-2);
	background: var(--color-surface-sunk, transparent);
}

:where(.oview-compare__shared-head) {
	text-align: center;
}

:where(.oview-compare__shared-list) {
	display: flex;
	flex-direction: column;
	gap: var(--space-s, 0.8rem);
	padding: 0;
	list-style: none;
}

:where(.oview-compare__shared-row) {
	display: grid;
	grid-template-columns: 5.6rem minmax(0, 1fr) 5.6rem;
	align-items: center;
	gap: var(--space-s, 0.8rem);
}

:where(.oview-compare__shared-name) {
	font-weight: 600;
	text-align: center;
}

:where(.oview-compare__tag) {
	justify-self: start;
	padding: var(--space-3xs, 0.2rem) var(--space-2xs, 0.4rem);
	border-radius: var(--radius-s);
}

:where(.oview-compare__tag[data-side="a"]) {
	justify-self: end;
}

:where(.oview-compare__caption) {
	padding-top: var(--space-s, 0.8rem);
	border-top: var(--border-hair, 1px) solid var(--color-border, currentColor);
	font-size: var(--text-s, 1.2rem);
	text-align: center;
	color: var(--color-text-muted, currentColor);
}

/* --- share it, and where to go next ------------------------------------ */

:where(.oview-compare__share) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs, 0.5rem);
}

:where(.oview-compare__share[data-where="foot"]) {
	justify-content: center;
}

:where(.oview-compare__share-label) {
	margin-inline-end: var(--space-xs, 0.5rem);
	font-weight: 600;
}

:where(.oview-compare__share-list) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs, 0.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.oview-compare__native[hidden] {
	display: none;
}

:where(.oview-compare__next) {
	display: flex;
	flex-direction: column;
	gap: var(--space-l, 1.4rem);
	padding: var(--space-xl, 2rem);
	border: var(--border-hair, 1px) solid var(--color-border, currentColor);
	border-radius: var(--radius-l-2);
}

:where(.oview-compare__next-title) {
	font-size: var(--text-xl, 1.6rem);
	font-weight: 700;
}

:where(.oview-compare__next-grid) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
	gap: var(--space-s, 0.8rem);
}

:where(.oview-compare__next-link) {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	grid-template-areas: "picture name" "picture meta";
	align-items: center;
	column-gap: var(--space-m, 1rem);
	padding: var(--space-s, 0.8rem) var(--space-m, 1rem);
	border: var(--border-hair, 1px) solid var(--color-border, currentColor);
	border-radius: var(--radius-l-2);
	color: inherit;
	text-decoration: none;
}

.oview-compare__next-link[hidden] {
	display: none;
}

:where(.oview-compare__next-link:hover, .oview-compare__next-link:focus-visible) {
	background: var(--color-surface-hover, transparent);
}

:where(.oview-compare__next-icon, .oview-compare__next-shot) {
	grid-area: picture;
	justify-self: center;
}

:where(.oview-compare__next-icon) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: var(--radius-m-2);
	background: var(--color-surface-sunk, transparent);
	color: var(--color-text-body, currentColor);
}

:where(.oview-compare__next-icon svg) {
	width: 2rem;
	height: 2rem;
}

:where(.oview-compare__next-shot) {
	width: 3.2rem;
	height: 4.4rem;
	object-fit: contain;
}

:where(.oview-compare__next-name) {
	grid-area: name;
	font-weight: 600;
}

:where(.oview-compare__next-meta) {
	grid-area: meta;
	font-size: var(--text-xs, 1.2rem);
	color: var(--color-text-muted, currentColor);
}

:where(.oview-compare__next-meta:empty) {
	display: none;
}

/* --- a phone ------------------------------------------------------------ */

/*
 * ⚠️ THE MIDDLE BAND BECOMES A LINE. There is no 17rem to spare beside two
 * bars on a phone, so each label moves above its row, the two bars meet at a
 * hairline, and the reading still runs out from one middle.
 */
@media (max-width: 767px) {
	:where(.oview-compare__sides) {
		align-items: stretch;
		gap: var(--space-2xs, 0.4rem);
	}

	:where(.oview-compare__side, .oview-compare__side[data-side="b"]) {
		min-width: 0;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-s, 0.8rem);
		padding: var(--space-m, 1rem);
	}

	:where(.oview-compare__stage) {
		flex-basis: auto;
		width: 100%;
	}

	:where(.oview-compare__versus) {
		align-self: center;
		width: 3.6rem;
		height: 3.6rem;
	}

	:where(.oview-compare__card) {
		padding: var(--space-l, 1.4rem);
	}

	:where(.oview-compare__fact) {
		padding: var(--space-m, 1rem);
	}

	:where(.oview-compare__spine) {
		width: var(--border-thick, 0.2rem);
		border-radius: var(--radius-l-2);
		background: var(--color-border, currentColor);
	}

	:where(.oview-compare__row, [data-kind="scores"] .oview-compare__row) {
		grid-template-columns: 4.6rem minmax(0, 1fr) minmax(0, 1fr) 4.6rem;
		grid-template-areas: "label label label label" "amount-a track-a track-b amount-b";
		column-gap: var(--space-2xs, 0.4rem);
		padding-bottom: var(--space-2xs, 0.4rem);
	}

	:where([data-kind="scores"] .oview-compare__row) {
		grid-template-columns: 6.4rem minmax(0, 1fr) minmax(0, 1fr) 6.4rem;
	}

	:where(.oview-compare__legend[data-side="a"]) {
		grid-column: 1 / 3;
	}

	:where(.oview-compare__legend[data-side="b"]) {
		grid-column: 3 / 5;
	}

	/* A label sits on the line, and breaks it, rather than the line running through the word. */
	:where(.oview-compare__row > .oview-compare__label, .oview-compare__metric, .oview-compare__group) {
		position: relative;
		justify-self: center;
		padding: var(--space-s, 0.8rem) var(--space-s, 0.8rem) var(--space-2xs, 0.4rem);
		background: var(--color-surface, Canvas);
	}

	:where(.oview-compare__group) {
		grid-column: 1 / -1;
	}

	:where(.oview-compare__venn) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas: "shared shared" "only-a only-b";
		gap: var(--space-l, 1.4rem);
	}

	:where(.oview-compare__only) {
		padding-top: 0;
	}
}