/*
 * Block: sn/comparison-table
 * Builds on the shared .x9fd853c9 / .xda8cb14a base (base.css). Adds a
 * highlighted "best" column, badges, centred yes/no markers and a sticky
 * feature column so labels stay visible while scrolling on mobile.
 */

.x7e58ec17 {
	margin: var(--sn-sp-8) 0;
	container-type: inline-size; /* compact rules react to the column width, not the viewport */
}

.x45160c19 {
	margin: 0 0 var(--sn-sp-3);
}

.x0d9680bf {
	margin: 0 0 var(--sn-sp-4);
	color: var(--sn-text-muted);
}

.x0d9680bf > :last-child { margin-bottom: 0; }

.x976b31de {
	min-width: 560px;
}

/* ---------- Header row ---------- */

/* Corner is sticky like the label column, with an opaque background so
   column headers slide underneath it instead of into it. */
.x976b31de thead .x4d6abc86 {
	position: sticky;
	left: 0;
	z-index: 2;
	/* Opaque and painted with the SAME colour as the header band in base.css.
	   THE ANSWER CHANGES WITH EVERY SKIN, which is why this has now been wrong
	   on three market passes: the band lives in base.css and the corner lives
	   here. On this skin the thead is TRANSPARENT over PAPER, so the correct
	   value is the page ground (#FFFFFF) — anything else, including the
	   canvas grey, reads as a patch cut out of the band.
	   Re-check it whenever .x9fd853c9 thead th changes. */
	background: var(--sn-bg);
	box-shadow: inset -1px 0 0 var(--sn-border);
}

.x213c2545 {
	text-align: center;
	vertical-align: bottom;
	white-space: normal;
}

.x1a3e7a76 {
	display: block;
	color: var(--sn-heading);
	font-size: var(--sn-fs-md);
	font-weight: 800;
	line-height: var(--sn-lh-compact);
	letter-spacing: -.02em;
	/* Column titles are CONTENT (bookmaker names), not labels — undo the
	   uppercase/tracking the thead cell inherits from base.css. */
	text-transform: none;
}

.x08d80ff9 {
	display: inline-block;
	margin-bottom: var(--sn-sp-2);
	padding: 2px var(--sn-sp-2);
	border-radius: 0;
	/* The black key's colours: ink tile, paper type (19.80). Not red — red
	   is spent on the column's top bar, and one mark per column is enough. */
	background: var(--sn-heading);
	color: var(--sn-bg);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-2xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	white-space: nowrap;
}

/* ---------- Feature (first) column: sticky + accent ---------- */

.x52c297a4 {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 120px;
	max-width: 200px; /* long labels wrap instead of eating the viewport */
	/* Opaque page ground: the wrapper is transparent on this skin, so cells
	   must slide UNDER this column rather than show through it. */
	background: var(--sn-bg);
	color: var(--sn-text);
	font-weight: 700;
	box-shadow: inset -1px 0 0 var(--sn-border);
}

/*
 * The sticky label is OPAQUE, so it does not inherit the row hover from
 * base.css and stayed flat while the rest of the row lit up — the row appeared
 * to break in half at the sticky edge.
 *
 * It has to be the RESOLVED value of that hover, not an approximation: base.css
 * paints rows with --sn-state-hover, which on this skin is a translucent 4%
 * INK wash compositing over paper. The same mix, made opaque, is the only
 * value that lands on the identical colour (#F5F5F5). Change one of these and
 * change the other.
 */
.x9fd853c9 tbody tr:hover .x52c297a4 {
	background: color-mix(in srgb, var(--sn-heading) 4%, var(--sn-bg));
}

/* ---------- Cells + markers ---------- */

.x08ef7300 {
	text-align: center;
	vertical-align: middle;
}

.x6039cda3 {
	width: 20px;
	height: 20px;
	vertical-align: middle;
}

/*
 * YES/NO ARE SEMANTIC, NOT THE ACTION COLOUR. The yes marker read
 * --sn-primary on an older skin; here primary is INK and the signal is the
 * brand red, and neither may mean "yes". Measured on paper: tip 5.45:1,
 * danger 6.97:1. The icons differ in SHAPE as well as colour, so the
 * distinction never rests on hue alone.
 */
.xed686e5b { color: var(--sn-tip); }
.xb8c1b5eb  { color: var(--sn-danger); }

.x6039cda3 + .x7932b207 {
	margin-left: var(--sn-sp-1);
}

.x7932b207 {
	color: var(--sn-text);
}

.x161fee18 {
	color: var(--sn-text-muted);
}

/* ---------- Highlighted "best" column ---------- */

/* The "best" column: a 4px SIGNAL bar across its head — one of the few red
   marks on the page, and a graphic (3.55:1 on paper clears 1.4.11). The title
   stays ink; a red title would be small red text. */
.x213c2545.is-highlighted {
	box-shadow: inset 0 4px 0 var(--sn-signal);
}

/* Semi-transparent by design, so it layers over the row hover. A neutral 3%
   ink wash, NOT a red tint: a column of pink cells reads as a warning. */
.x976b31de td.is-highlighted {
	background: color-mix(in srgb, var(--sn-heading) 3%, transparent);
}

/* ---------- Footnote ---------- */

.x3abe1c6a {
	margin: var(--sn-sp-3) 0 0;
}

/* ---------- Compact mode (narrow column/viewport) ----------
   Container query is the primary mechanism; the media query below is a
   fallback for browsers without container-query support. Keep both in sync. */

@container (max-width: 640px) {
	/* The sticky label may take at most ~40% of the visible table. */
	.x52c297a4 {
		min-width: 104px;
		max-width: 38cqw;
		font-size: var(--sn-fs-xs);
	}

	.x976b31de th,
	.x976b31de td {
		padding: var(--sn-sp-2) var(--sn-sp-3);
	}

	.x1a3e7a76 {
		font-size: var(--sn-fs-sm);
	}

	.x7932b207 {
		font-size: var(--sn-fs-sm);
	}

	.x6039cda3 {
		width: 16px;
		height: 16px;
	}
}

@media (max-width: 640px) {
	.x52c297a4 {
		min-width: 104px;
		max-width: 40vw;
		font-size: var(--sn-fs-xs);
	}

	.x976b31de th,
	.x976b31de td {
		padding: var(--sn-sp-2) var(--sn-sp-3);
	}

	.x1a3e7a76 {
		font-size: var(--sn-fs-sm);
	}

	.x7932b207 {
		font-size: var(--sn-fs-sm);
	}

	.x6039cda3 {
		width: 16px;
		height: 16px;
	}
}