/*
	What ESAT students get wrong (T-047). Loaded only where [lr_esat_stats] is on the
	page (LR_Booking_Pass_Stats::styles), scoped to .lr-stats and its siblings the
	shortcode prints, so nothing here can move a pixel anywhere else.

	Tokens come from the theme's style.css, each with the light value as fallback, and
	only tokens the theme's dark block redefines are used for surfaces, so the tables
	read in dark mode too.

	Widths, checked by reading this file against the theme (26 September 2026, no
	browser in that session; the render check at 390, 820 and 1280 pixels is still owed):
	- 390: one column. Tables are two or four short columns; the theme's global
	  `table { min-width: 480px }` is lifted here so they fit, and each table still
	  sits in its own scroll box, never the page, if a long topic name will not wrap.
	- 820: the two tables of each module sit side by side from 760 pixels, each
	  about half of the content column.
	- 1280: the same two columns, the whole capped at 1080 pixels like the pass page.
*/

body .entry-content .lr-stats p,
body .entry-content .lr-stats li,
body .entry-content .lr-stats h2,
body .entry-content .lr-stats h3,
body .entry-content .lr-stats figcaption,
body .entry-content .lr-stats__review,
body .entry-content .lr-stats__empty {
	max-width: none;
}

.lr-stats {
	max-width: 1080px;
	margin-inline: auto;
	color: var(--lr-color-text-main, #1f374e);
	line-height: var(--lr-leading-body, 1.6);
}

.lr-stats__lede {
	font-size: 1.05rem;
}

.lr-stats h2 {
	margin-top: var(--lr-space-8, 40px);
}

.lr-stats__module {
	margin-top: var(--lr-space-6, 24px);
}

.lr-stats__pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lr-space-4, 16px);
}

@media (min-width: 760px) {
	.lr-stats__pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

.lr-stats__fig {
	margin: 0;
	min-width: 0;
}

.lr-stats__scroll {
	overflow-x: auto;
	border: 1px solid var(--lr-color-border-card, #dce6ec);
	border-radius: var(--lr-radius-card, 8px);
	background: var(--lr-color-bg-card, #ffffff);
}

.lr-stats__scroll:focus-visible {
	outline: 2px solid var(--lr-color-accent, #002147);
	outline-offset: 2px;
}

.lr-stats__table {
	width: 100%;
	min-width: 0;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.95rem;
	line-height: 1.45;
	text-align: left;
}

.lr-stats__table th,
.lr-stats__table td {
	padding: 0.55rem 0.8rem;
	border-bottom: 1px solid var(--lr-color-border-subtle, #dce6ec);
	vertical-align: top;
	overflow-wrap: break-word;
}

.lr-stats__table tbody tr:last-child th,
.lr-stats__table tbody tr:last-child td {
	border-bottom: 0;
}

.lr-stats__table thead th {
	font-weight: 600;
	background: var(--lr-color-surface-muted, #fffdf6);
	color: var(--lr-color-text, #16283a);
}

.lr-stats__table tbody th {
	font-weight: 500;
}

.lr-stats__table .num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.lr-stats__fig figcaption {
	margin-top: var(--lr-space-2, 8px);
	font-size: 0.9rem;
	color: var(--lr-color-text-muted, #55697d);
}

.lr-stats__how {
	padding-left: 1.2em;
}

.lr-stats__review {
	padding: var(--lr-space-3, 12px) var(--lr-space-4, 16px);
	border: 2px solid var(--lr-color-danger, #c63838);
	border-radius: var(--lr-radius-card, 8px);
}

/* A phone: tighter cells, and a header that may wrap onto two lines. */
@media (max-width: 599px) {
	.lr-stats__table {
		font-size: 0.9rem;
	}

	.lr-stats__table th,
	.lr-stats__table td {
		padding: 0.5rem 0.55rem;
	}

	/* Four columns in about 350 pixels: "at least 1,000" and "1 min 05 s" may break
	   between words, so the narrowest the module table can be is its longest single
	   words ("Mathematics", "least") plus padding, about 260 pixels. */
	.lr-stats__table .num {
		white-space: normal;
	}
}