/*
 * GDV Supplier Registry: the comparison page.
 *
 * Buttons and the call-to-action panel are gdv-public-ui's, the gate notice and
 * the declaration's italics the brand page's. Colours are gdv-public-ui's
 * tokens; the one colour of this page's own, the indigo that marks a differing
 * answer, is neither green nor red, so it reads as difference and never as
 * merit. No text here is set smaller than the theme's body text.
 */

.gdv-sr-cmp {
	max-width: 75rem;
	margin-left: auto;
	margin-right: auto;
}

.gdv-sr-cmp .gdv-sr-cmp__heading {
	margin: 0 0 16px;
}

.gdv-sr-cmp .gdv-sr-cmp__actions {
	margin: 0 0 24px;
}

/*
 * The page's lists that are layouts, not running text. neve-child gives every ul
 * a disc and a 1.375em bottom margin through a selector of six :not() classes
 * and an element (style.css), so this answers it with seven classes rather than
 * !important, as public.css does for the brand page.
 */
.gdv-sr-cmp.gdv-sr-cmp.gdv-sr-cmp.gdv-sr-cmp.gdv-sr-cmp.gdv-sr-cmp ul:is(.gdv-sr-cmp__choices, .gdv-sr-cmp__legend) {
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

/* ===== Step 1: what matters ===== */

.gdv-sr-cmp .gdv-sr-cmp__choices {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gdv-sr-cmp .gdv-sr-cmp__choices > li {
	margin: 0;
	list-style: none;
}

/*
 * Each choice a row that leads on: the name in the theme's heading face and
 * green, the question under it in the text colour, a round yellow arrow on the
 * right. The row tints on hover. The green is 4.88:1 on the page and 4.52:1 on
 * the tint, normal text at 1.25rem; the arrow in the text colour is 4.77:1 on
 * the yellow. The name stays a step under the step's heading, so the rows read
 * as choices rather than as headings of their own.
 */
.gdv-sr-cmp .gdv-sr-cmp__choice {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px 20px;
	border: 1px solid var(--gdv-ui-border-strong, #797979);
	border-radius: var(--gdv-ui-radius, 6px);
	color: var(--gdv-ui-text, #444444);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gdv-sr-cmp .gdv-sr-cmp__choice:hover {
	border-color: var(--green, #427a7b);
	background-color: #f3f7f7;
}

.gdv-sr-cmp .gdv-sr-cmp__choice:focus-visible {
	outline: 3px solid var(--gdv-ui-focus, #8a6100);
	outline-offset: 2px;
}

.gdv-sr-cmp .gdv-sr-cmp__choice-words {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
}

/* Cantata One has one weight, so the name stays at 400 rather than draw a fake bold. */
.gdv-sr-cmp .gdv-sr-cmp__choice-name {
	font-family: 'Cantata One', Georgia, serif;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--green, #427a7b);
}

.gdv-sr-cmp .gdv-sr-cmp__choice-question {
	font-size: 1.125rem;
}

.gdv-sr-cmp .gdv-sr-cmp__choice-go {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	/* Drawn only: the whole row is the link, so the circle needs no activation size of its own. */
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--yellow, #e1ad4e);
	color: #444444;
	transition: transform 0.15s ease;
}

.gdv-sr-cmp .gdv-sr-cmp__choice:hover .gdv-sr-cmp__choice-go {
	transform: translateX(3px);
}

.gdv-sr-cmp .gdv-sr-cmp__choice-icon {
	width: 20px;
	height: 20px;
}

@media (prefers-reduced-motion: reduce) {
	.gdv-sr-cmp .gdv-sr-cmp__choice,
	.gdv-sr-cmp .gdv-sr-cmp__choice-go {
		transition: none;
	}
}

/* On a phone the row keeps its arrow and gives the words more of the width. */
@media (max-width: 600px) {
	.gdv-sr-cmp .gdv-sr-cmp__choice {
		gap: 12px;
		padding: 18px 16px;
	}
}

/* ===== Step 2: the product types ===== */

.gdv-sr-cmp .gdv-sr-cmp__types {
	min-width: 0;
	margin: 0 0 24px;
	padding: 0;
	border: 0;
}

/* Neve pulls every fieldset legend 15px left (style-main-new.css); the step's heading and the group names stay on the edge the rest of the step starts from. */
.gdv-sr-cmp .gdv-sr-cmp__types > legend,
.gdv-sr-cmp .gdv-sr-cmp__group-name {
	margin-left: 0;
	padding: 0;
}

/* A product type group: its name in semibold, its tick boxes indented behind a thin line, as on the brand editor. */
.gdv-sr-cmp .gdv-sr-cmp__group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.gdv-sr-cmp .gdv-sr-cmp__group + .gdv-sr-cmp__group {
	margin-top: 20px;
}

.gdv-sr-cmp .gdv-sr-cmp__group-name {
	font-weight: 600;
}

.gdv-sr-cmp fieldset.gdv-sr-cmp__group > .gdv-sr-cmp__ticks,
.gdv-sr-cmp .gdv-sr-cmp__country-field {
	margin: 6px 0 0 4px;
	padding-left: 16px;
	border-left: 2px solid var(--gdv-ui-border, #d6d6d6);
}

.gdv-sr-cmp .gdv-sr-cmp__ticks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.gdv-sr-cmp .gdv-sr-cmp__ticks label,
.gdv-sr-cmp .gdv-sr-cmp__match label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.gdv-sr-cmp .gdv-sr-cmp__match {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 24px;
}

/* The country after the any or all choice, in the shape of a product type group: its name in semibold, the select behind the thin line. */
.gdv-sr-cmp .gdv-sr-cmp__country {
	margin: 0 0 24px;
}

.gdv-sr-cmp .gdv-sr-cmp__country-label {
	display: block;
	margin: 0;
	font-weight: 600;
}

/* The error red is 6.3:1 on white, #ff8a80 7.05:1 on the dark page. */
.gdv-sr-cmp .gdv-sr-cmp__error {
	margin: 0 0 12px;
	color: var(--gdv-ui-danger, #b32d2e);
}

/*
 * A tick box, not the pill switch neve-child draws every checkbox as: the type
 * selector outranks the theme's, hover included. The tick's green is 4.88:1 on
 * white.
 */
.gdv-sr-cmp .gdv-sr-cmp__form input[type="checkbox"] {
	appearance: auto;
	-webkit-appearance: auto;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	min-width: 24px;
	margin: 0;
	background-color: transparent;
	border-radius: 3px;
	accent-color: var(--gdv-ui-success, #427a7b);
	transition: none;
}

.gdv-sr-cmp .gdv-sr-cmp__form input[type="checkbox"]::before {
	content: none;
}

.gdv-sr-cmp .gdv-sr-cmp__form input[type="checkbox"]:hover {
	background-color: transparent;
}

.gdv-sr-cmp .gdv-sr-cmp__form input[type="radio"] {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--gdv-ui-success, #427a7b);
}

/* ===== Step 3: the selection above the grid, centred under its heading ===== */

.gdv-sr-cmp .gdv-sr-cmp__summary {
	margin: 0 0 24px;
	font-weight: 600;
	text-align: center;
}

/* ===== The bar above the grid ===== */

.gdv-sr-cmp .gdv-sr-cmp__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	margin: 0 0 24px;
	padding: 12px 16px;
	border: 1px solid var(--gdv-ui-border, #d6d6d6);
	border-radius: var(--gdv-ui-radius, 6px);
}

/* The status filter: two links, the current one filled in, so it does not rest on colour alone. */
.gdv-sr-cmp .gdv-sr-cmp__filter {
	display: inline-flex;
	flex-wrap: wrap;
	margin: 0;
	border: 1px solid var(--gdv-ui-border-strong, #797979);
	border-radius: var(--gdv-ui-radius, 6px);
	overflow: hidden;
}

.gdv-sr-cmp .gdv-sr-cmp__option {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	color: var(--gdv-ui-text, #444444);
	text-decoration: none;
}

.gdv-sr-cmp .gdv-sr-cmp__option + .gdv-sr-cmp__option {
	border-left: 1px solid var(--gdv-ui-border-strong, #797979);
}

.gdv-sr-cmp .gdv-sr-cmp__option.is-current {
	background: var(--gdv-ui-text, #444444);
	color: var(--gdv-ui-bg, #ffffff);
	font-weight: 600;
}

.gdv-sr-cmp .gdv-sr-cmp__option:focus-visible,
.gdv-sr-cmp .gdv-sr-cmp__switch:focus-visible {
	outline: 3px solid var(--gdv-ui-focus, #8a6100);
	outline-offset: -3px;
}

/* "Show only questions that differ": a link drawn as a switch, its knob to the right when on. */
.gdv-sr-cmp .gdv-sr-cmp__switch-row {
	margin: 0;
}

.gdv-sr-cmp .gdv-sr-cmp__switch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: var(--gdv-ui-text, #444444);
	text-decoration: none;
}

.gdv-sr-cmp .gdv-sr-cmp__switch-track {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 24px;
	border: 2px solid var(--gdv-ui-border-strong, #797979);
	border-radius: 12px;
	box-sizing: border-box;
}

.gdv-sr-cmp .gdv-sr-cmp__switch-track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--gdv-ui-border-strong, #797979);
}

.gdv-sr-cmp .gdv-sr-cmp__switch.is-on .gdv-sr-cmp__switch-track {
	border-color: var(--gdv-ui-success, #427a7b);
	background: var(--gdv-ui-success, #427a7b);
}

.gdv-sr-cmp .gdv-sr-cmp__switch.is-on .gdv-sr-cmp__switch-track::after {
	left: 18px;
	background: var(--gdv-ui-bg, #ffffff);
}

.gdv-sr-cmp .gdv-sr-cmp__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--gdv-ui-text-faint, #666666);
}

.gdv-sr-cmp .gdv-sr-cmp__legend li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* The legend's differing sample: a pill-sized patch with the cell's tint and bar. */
.gdv-sr-cmp .gdv-sr-cmp__swatch {
	display: inline-block;
	width: 32px;
	height: 1.5em;
	border-radius: 3px;
	background: #eceefb;
	box-shadow: inset 3px 0 0 #4a4fb0;
}

/* ===== The reference and the order ===== */

.gdv-sr-cmp .gdv-sr-cmp__reference {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
}

.gdv-sr-cmp .gdv-sr-cmp__reference-label {
	font-weight: 600;
}

.gdv-sr-cmp .gdv-sr-cmp__select {
	min-height: 44px;
	max-width: 100%;
}

.gdv-sr-cmp .gdv-sr-cmp__ordering {
	margin: 0 0 32px;
}

.gdv-sr-cmp .gdv-sr-cmp__ordering-sentence {
	margin: 0 0 16px;
}

.gdv-sr-cmp .gdv-sr-cmp__order {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gdv-sr-cmp .gdv-sr-cmp__order-item {
	padding: 16px 20px;
	border: 1px solid var(--gdv-ui-border, #d6d6d6);
	border-radius: var(--gdv-ui-radius, 6px);
}

/*
 * A brand's name in the order: the theme paints every h3 gold, centred and at
 * 1.35em through h3:not(.widget-title):not(.extract-title), so this is
 * element-qualified one class deeper and sets the colour and alignment back.
 */
.gdv-sr-cmp .gdv-sr-cmp__order-item h3.gdv-sr-cmp__order-name {
	margin: 0 0 8px;
	color: var(--gdv-ui-text, #444444);
	text-align: left;
	letter-spacing: normal;
}

.gdv-sr-cmp .gdv-sr-cmp__similarity,
.gdv-sr-cmp .gdv-sr-cmp__differs-label,
.gdv-sr-cmp .gdv-sr-cmp__full {
	margin: 0 0 8px;
}

.gdv-sr-cmp .gdv-sr-cmp__reasons {
	color: var(--gdv-ui-text-faint, #666666);
}

.gdv-sr-cmp .gdv-sr-cmp__differences {
	margin: 0 0 8px;
	padding-left: 1.25rem;
}

.gdv-sr-cmp .gdv-sr-cmp__full {
	margin-bottom: 0;
}

/* ===== The grid ===== */

/*
 * The brand columns scroll sideways inside this box while the question column
 * stays in place; the page itself never scrolls sideways.
 */
.gdv-sr-cmp .gdv-sr-cmp__scroll {
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--gdv-ui-border, #d6d6d6);
	border-radius: var(--gdv-ui-radius, 6px);
}

.gdv-sr-cmp .gdv-sr-cmp__scroll:focus-visible {
	outline: 3px solid var(--gdv-ui-focus, #8a6100);
	outline-offset: 2px;
}

.gdv-sr-cmp .gdv-sr-cmp__grid {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	border: 0;
}

.gdv-sr-cmp .gdv-sr-cmp__grid th,
.gdv-sr-cmp .gdv-sr-cmp__grid td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--gdv-ui-border, #d6d6d6);
	vertical-align: top;
	text-align: left;
	overflow-wrap: anywhere;
}

.gdv-sr-cmp .gdv-sr-cmp__grid thead th {
	font-weight: 600;
	border-bottom: 2px solid var(--gdv-ui-border-strong, #797979);
}

.gdv-sr-cmp .gdv-sr-cmp__grid td,
.gdv-sr-cmp .gdv-sr-cmp__grid .gdv-sr-cmp__brand {
	min-width: 140px;
}

/* The question column: in place while the brands scroll, with its own ground so they pass under it. */
.gdv-sr-cmp .gdv-sr-cmp__grid .gdv-sr-cmp__q {
	position: sticky;
	left: 0;
	z-index: 1;
	width: 260px;
	min-width: 200px;
	background: var(--gdv-ui-bg, #ffffff);
	box-shadow: 1px 0 0 var(--gdv-ui-border, #d6d6d6);
	font-weight: 500;
}

.gdv-sr-cmp .gdv-sr-cmp__brand-name,
.gdv-sr-cmp .gdv-sr-cmp__offers,
.gdv-sr-cmp .gdv-sr-cmp__full-link {
	display: block;
}

.gdv-sr-cmp .gdv-sr-cmp__offers {
	font-weight: 400;
	color: var(--gdv-ui-text-faint, #666666);
}

.gdv-sr-cmp .gdv-sr-cmp__full-link {
	margin-top: 4px;
	font-weight: 400;
}

/* "Identical for every brand" under the question's label; a fixed radius, so a tag that wraps in a narrow column stays a rounded box. */
.gdv-sr-cmp .gdv-sr-cmp__tag {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 10px;
	border: 1px solid var(--gdv-ui-border, #d6d6d6);
	border-radius: 12px;
	line-height: 1.4;
	color: var(--gdv-ui-text-faint, #666666);
	font-weight: 500;
}

/* An answer: each choice a neutral pill, the status marker after them. No colour depends on the answer. */
.gdv-sr-cmp .gdv-sr-cmp__answer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

/* A fixed radius, not a full round: a long choice wraps and must stay a rounded box rather than turn into an oval. */
.gdv-sr-cmp .gdv-sr-cmp__pill {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid var(--gdv-ui-border-strong, #797979);
	border-radius: 12px;
	line-height: 1.4;
}

.gdv-sr-cmp .gdv-sr-row__declared {
	font-style: italic;
}

/* The brand page's three status markers, the tick alone in the green. */
.gdv-sr-cmp .gdv-sr-cmp__state {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--gdv-ui-text-faint, #666666);
}

.gdv-sr-cmp .gdv-sr-cmp__state-icon {
	width: 18px;
	height: 18px;
}

.gdv-sr-cmp .gdv-sr-cmp__state--validated {
	color: var(--gdv-ui-success, #427a7b);
}

/*
 * The three cells that are not an answer, each in its own box so none reads as
 * a blank. The faint grey is 4.64:1 on the light stripe and 4.84:1 on the dark one.
 */
.gdv-sr-cmp .gdv-sr-cmp__box {
	display: inline-block;
	padding: 1px 10px;
	border-radius: 6px;
	font-style: italic;
	color: var(--gdv-ui-text-faint, #666666);
}

.gdv-sr-cmp .gdv-sr-cmp__box--nd {
	border: 1px dashed var(--gdv-ui-border-strong, #797979);
}

.gdv-sr-cmp .gdv-sr-cmp__box--filtered {
	border: 1px dotted var(--gdv-ui-border-strong, #797979);
}

.gdv-sr-cmp .gdv-sr-cmp__box--na {
	background: repeating-linear-gradient(135deg, #e4e8e6 0 6px, transparent 6px 12px);
}

/*
 * A differing answer: a tint and a 3px indigo bar on its left edge, said in
 * words to a screen reader. The bar is 5.99:1 on the tint, the text 8.44:1;
 * in the dark scheme 7.12:1 and 13.73:1.
 */
.gdv-sr-cmp .gdv-sr-cmp__grid .gdv-sr-cmp__cell--differs {
	background: #eceefb;
	box-shadow: inset 3px 0 0 #4a4fb0;
}

/* On a phone the question column narrows so two brands show beside it. */
@media (max-width: 600px) {
	.gdv-sr-cmp .gdv-sr-cmp__grid .gdv-sr-cmp__q {
		width: 150px;
		min-width: 150px;
	}

	.gdv-sr-cmp .gdv-sr-cmp__grid td,
	.gdv-sr-cmp .gdv-sr-cmp__grid .gdv-sr-cmp__brand {
		min-width: 120px;
	}

	.gdv-sr-cmp .gdv-sr-cmp__bar {
		padding: 12px;
	}
}

@media (prefers-color-scheme: dark) {
	.gdv-sr-cmp .gdv-sr-cmp__error {
		color: #ff8a80;
	}

	/* The name 6.5:1 and the question 13.24:1 on the dark tint; the arrow 7.89:1 on the yellow. */
	.gdv-sr-cmp .gdv-sr-cmp__choice-name {
		color: #8cbcbd;
	}

	.gdv-sr-cmp .gdv-sr-cmp__choice:hover {
		border-color: #8cbcbd;
		background-color: #26302f;
	}

	.gdv-sr-cmp .gdv-sr-cmp__choice-go {
		color: #212121;
	}

	.gdv-sr-cmp .gdv-sr-cmp__state--validated {
		color: #8cbcbd;
	}

	.gdv-sr-cmp .gdv-sr-cmp__box--na {
		background: repeating-linear-gradient(135deg, #2a2f2d 0 6px, transparent 6px 12px);
	}

	.gdv-sr-cmp .gdv-sr-cmp__grid .gdv-sr-cmp__cell--differs,
	.gdv-sr-cmp .gdv-sr-cmp__swatch {
		background: #262947;
		box-shadow: inset 3px 0 0 #aeb2ff;
	}
}