/*
	ESAT pass page. Loaded only where [lr_esat_pass] is on the page.

	Tokens come from the theme's style.css, with fallbacks so the page still
	reads if the plugin is ever shown under another theme. Unlayered like the
	rest of the booking plugin's CSS, and scoped to .lr-pass so nothing here can
	move a pixel anywhere else. The correct and incorrect colours are the pair
	the timed mock runner already measured for contrast.
*/

/*
 * The app is a dashboard inside an article page, and the theme gives every
 * paragraph in .entry-content a reading measure of 24rem. Inside a card 900
 * pixels wide that wrapped every line a third of the way across (Lucas, 17
 * September 2026). The body prefix beats both theme rules without !important.
 */
body .entry-content .lr-pass-intro p,
body .entry-content .lr-pass-intro h2,
body .entry-content .lr-pass-intro h3,
body .entry-content .lr-pass p,
body .entry-content .lr-pass li,
body .entry-content .lr-pass h2,
body .entry-content .lr-pass h3,
body .entry-content .lr-pass h4 {
	max-width: none;
}

.lr-pass {
	--lr-pass-right: #1f7a3d;
	--lr-pass-right-wash: #f1f8f3;
	--lr-pass-wrong: var(--lr-color-danger, #c63838);
	--lr-pass-wrong-wash: var(--lr-color-danger-wash, #fef2f2);
	--lr-pass-border: var(--lr-color-border-card, #dce6ec);
	--lr-pass-accent: var(--lr-color-accent, #002147);
	--lr-pass-muted: var(--lr-color-text-muted, #55697d);

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

.lr-pass__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.lr-pass__title {
	font-family: var(--lr-font-heading, Georgia, serif);
	font-size: var(--lr-text-2xl, 2rem);
	line-height: var(--lr-leading-h2, 1.2);
	margin: 0 0 var(--lr-space-3, 12px);
}

.lr-pass__eyebrow {
	font-family: var(--lr-font-mono, monospace);
	font-size: var(--lr-text-xs, 0.75rem);
	letter-spacing: var(--lr-tracking-label, 0.08em);
	text-transform: uppercase;
	color: var(--lr-pass-muted);
	margin: 0 0 var(--lr-space-2, 8px);
}

.lr-pass__lead,
.lr-pass__meta {
	color: var(--lr-pass-muted);
	margin: 0 0 var(--lr-space-4, 16px);
}

.lr-pass__head {
	margin-bottom: var(--lr-space-6, 32px);
}

.lr-pass__h3 {
	font-family: var(--lr-font-heading, Georgia, serif);
	font-size: var(--lr-text-lg, 1.25rem);
	margin: 0 0 var(--lr-space-2, 8px);
}

.lr-pass__card {
	border: 1px solid var(--lr-pass-border);
	border-radius: var(--lr-radius-large, 10px);
	background: var(--lr-color-bg-card, #fff);
	padding: var(--lr-space-5, 24px);
	margin-bottom: var(--lr-space-5, 24px);
}

.lr-pass__card--resume {
	border-left: 4px solid var(--lr-pass-accent);
}

.lr-pass__modules {
	display: grid;
	gap: var(--lr-space-5, 24px);
}

.lr-pass__modules .lr-pass__card {
	margin-bottom: 0;
}

.lr-pass__actions,
.lr-pass__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lr-space-3, 12px);
}

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

.lr-pass__finish {
	margin-left: auto;
}

.lr-pass__link-btn {
	background: none;
	border: 0;
	padding: 0;
	color: var(--lr-pass-accent);
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
}

.lr-pass__details {
	margin-top: var(--lr-space-4, 16px);
}

.lr-pass__details summary {
	cursor: pointer;
	font-weight: 600;
}

.lr-pass__topics {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--lr-space-3, 12px);
	font-size: var(--lr-text-sm, 0.875rem);
}

.lr-pass__topics th,
.lr-pass__topics td {
	text-align: left;
	padding: var(--lr-space-2, 8px);
	border-bottom: 1px solid var(--lr-pass-border);
	vertical-align: middle;
}

.lr-pass__topics thead th {
	color: var(--lr-pass-muted);
	font-weight: 600;
}

.lr-pass__bar {
	display: inline-block;
	width: 64px;
	height: 6px;
	margin-right: var(--lr-space-2, 8px);
	border-radius: 3px;
	vertical-align: middle;
	background: linear-gradient(90deg, var(--lr-pass-accent) var(--lr-pass-pct, 0%), var(--lr-pass-border) var(--lr-pass-pct, 0%));
}

.lr-pass__resume-list,
.lr-pass__history {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lr-pass__resume-list li,
.lr-pass__history li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lr-space-3, 12px);
	padding: var(--lr-space-2, 8px) 0;
	border-bottom: 1px solid var(--lr-pass-border);
}

.lr-pass__history-what {
	flex: 1 1 16rem;
}

.lr-pass__history-score {
	font-variant-numeric: tabular-nums;
}

.lr-pass__error {
	border-left: 4px solid var(--lr-pass-wrong);
	background: var(--lr-pass-wrong-wash);
	padding: var(--lr-space-3, 12px) var(--lr-space-4, 16px);
}

/* ------------------------------------------------------------ runner */

.lr-pass__bar-top {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lr-space-2, 8px) var(--lr-space-4, 16px);
	padding: var(--lr-space-3, 12px) 0;
	background: var(--lr-color-bg-card, #fff);
	border-bottom: 1px solid var(--lr-pass-border);
	font-size: var(--lr-text-sm, 0.875rem);
}

.lr-pass__where {
	flex: 1 1 14rem;
	font-weight: 600;
}

.lr-pass__clock,
.lr-pass__score {
	font-family: var(--lr-font-mono, monospace);
	font-size: var(--lr-text-md, 1.125rem);
	font-variant-numeric: tabular-nums;
}

.lr-pass__clock--low {
	color: var(--lr-pass-wrong);
}

.lr-pass__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: var(--lr-space-4, 16px) 0;
}

.lr-pass__nav-btn {
	min-width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--lr-pass-border);
	border-radius: var(--lr-radius-small, 4px);
	background: var(--lr-color-bg-card, #fff);
	color: inherit;
	font: inherit;
	font-size: var(--lr-text-sm, 0.875rem);
	cursor: pointer;
}

.lr-pass__nav-btn--done {
	background: var(--lr-color-accent-wash, #eef2f8);
}

.lr-pass__nav-btn--here {
	border-color: var(--lr-pass-accent);
	box-shadow: inset 0 0 0 1px var(--lr-pass-accent);
}

.lr-pass__question {
	margin-top: var(--lr-space-4, 16px);
}

.lr-pass__prompt p {
	margin: 0 0 var(--lr-space-3, 12px);
}

.lr-pass__figure {
	margin: var(--lr-space-4, 16px) 0;
}

.lr-pass__svg svg {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

.lr-pass__options {
	border: 0;
	margin: var(--lr-space-4, 16px) 0 0;
	padding: 0;
	display: grid;
	gap: var(--lr-space-2, 8px);
}

.lr-pass__option {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--lr-space-3, 12px);
	padding: var(--lr-space-3, 12px) var(--lr-space-4, 16px);
	border: 1px solid var(--lr-pass-border);
	border-radius: var(--lr-radius-medium, 6px);
	cursor: pointer;
	background: var(--lr-color-bg-card, #fff);
}

.lr-pass__option:has(input:checked) {
	border-color: var(--lr-pass-accent);
	box-shadow: inset 0 0 0 1px var(--lr-pass-accent);
}

.lr-pass__option:has(input:focus-visible) {
	outline: 2px solid var(--lr-pass-accent);
	outline-offset: 2px;
}

.lr-pass__option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.lr-pass__letter {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--lr-pass-border);
	font-family: var(--lr-font-mono, monospace);
	font-size: var(--lr-text-sm, 0.875rem);
}

.lr-pass__option--key {
	border-color: var(--lr-pass-right);
	background: var(--lr-pass-right-wash);
}

.lr-pass__option--key .lr-pass__letter {
	border-color: var(--lr-pass-right);
	color: var(--lr-pass-right);
	font-weight: 700;
}

.lr-pass__option--wrong {
	border-color: var(--lr-pass-wrong);
	background: var(--lr-pass-wrong-wash);
}

.lr-pass__review {
	margin-top: var(--lr-space-5, 24px);
	padding: var(--lr-space-4, 16px) var(--lr-space-5, 24px);
	border-left: 4px solid var(--lr-pass-wrong);
	background: var(--lr-color-bg-light, #f7fafc);
	border-radius: 0 var(--lr-radius-medium, 6px) var(--lr-radius-medium, 6px) 0;
}

.lr-pass__review--right {
	border-left-color: var(--lr-pass-right);
}

.lr-pass__verdict {
	font-weight: 700;
	margin: 0 0 var(--lr-space-3, 12px);
}

.lr-pass__facts {
	margin: 0 0 var(--lr-space-3, 12px);
	padding-left: 1.1rem;
	color: var(--lr-pass-muted);
	font-size: var(--lr-text-sm, 0.875rem);
}

.lr-pass__review h4 {
	font-size: var(--lr-text-base, 1rem);
	margin: var(--lr-space-4, 16px) 0 var(--lr-space-1, 4px);
}

.lr-pass__review p {
	margin: 0 0 var(--lr-space-2, 8px);
}

.lr-pass__steps {
	padding-left: 1.25rem;
	margin: 0;
}

.lr-pass__steps li {
	margin-bottom: var(--lr-space-3, 12px);
}

@media (max-width: 600px) {
	.lr-pass__card {
		padding: var(--lr-space-4, 16px);
	}

	.lr-pass__finish {
		margin-left: 0;
	}

	.lr-pass__topics th:nth-child(3),
	.lr-pass__topics td:nth-child(3) {
		display: none;
	}
}

/* ------------------------------------------------------------ tabs */

.lr-pass__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lr-space-2, 8px);
	border-bottom: 1px solid var(--lr-pass-border);
	margin-bottom: var(--lr-space-5, 24px);
}

.lr-pass__tab {
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	padding: var(--lr-space-3, 12px) var(--lr-space-2, 8px);
	font: inherit;
	font-weight: 600;
	color: var(--lr-pass-muted);
	cursor: pointer;
}

.lr-pass__tab--on {
	color: var(--lr-pass-accent);
	border-bottom-color: var(--lr-pass-accent);
}

.lr-pass__tab:focus-visible {
	outline: 2px solid var(--lr-pass-accent);
	outline-offset: 2px;
}

.lr-pass__hint {
	margin: var(--lr-space-3, 12px) 0 0;
	font-size: var(--lr-text-sm, 0.875rem);
	color: var(--lr-pass-muted);
}

.lr-pass__h4 {
	font-size: var(--lr-text-base, 1rem);
	margin: var(--lr-space-4, 16px) 0 var(--lr-space-2, 8px);
}

.lr-pass__filters {
	display: flex;
	align-items: center;
	gap: var(--lr-space-3, 12px);
	margin-bottom: var(--lr-space-4, 16px);
}

.lr-pass__select {
	font: inherit;
	padding: 6px 10px;
	border: 1px solid var(--lr-pass-border);
	border-radius: var(--lr-radius-small, 4px);
	background: var(--lr-color-bg-card, #fff);
}

/* ------------------------------------------------------------ statistics */

.lr-pass {
	/* Categorical slots 1 to 5, one per module, validated on white on
	   17 September 2026 (adjacent CVD delta E 9.1, normal-vision 19.6). Three
	   sit below 3:1, so every chart carries labels and a table view. */
	--lr-pass-s1: #2a78d6;
	--lr-pass-s2: #eb6834;
	--lr-pass-s3: #1baf7a;
	--lr-pass-s4: #eda100;
	--lr-pass-s5: #e87ba4;
	--lr-pass-under: #2a78d6;
	--lr-pass-over: #e34948;
	--lr-pass-grid: #e1e0d9;
	--lr-pass-axis: #c3c2b7;
	--lr-pass-surface: var(--lr-color-bg-card, #fff);
}

.lr-pass__kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--lr-space-3, 12px);
	margin-bottom: var(--lr-space-5, 24px);
}

.lr-pass__kpi {
	border: 1px solid var(--lr-pass-border);
	border-radius: var(--lr-radius-large, 10px);
	background: var(--lr-pass-surface);
	padding: var(--lr-space-4, 16px);
}

.lr-pass__kpi p {
	margin: 0;
}

.lr-pass__kpi-label {
	font-size: var(--lr-text-sm, 0.875rem);
	color: var(--lr-pass-muted);
}

.lr-pass__kpi-value {
	font-size: var(--lr-text-xl, 1.75rem);
	font-weight: 600;
	line-height: 1.2;
	margin-top: var(--lr-space-1, 4px) !important;
}

.lr-pass__kpi-note {
	font-size: var(--lr-text-xs, 0.75rem);
	color: var(--lr-pass-muted);
}

.lr-pass__plot {
	overflow-x: auto;
}

.lr-pass__svg-chart {
	display: block;
	max-width: 100%;
	height: auto;
	overflow: visible;
}

.lr-pass__grid {
	stroke: var(--lr-pass-grid);
	stroke-width: 1;
}

.lr-pass__axis {
	stroke: var(--lr-pass-axis);
	stroke-width: 1;
}

.lr-pass__tick {
	fill: var(--lr-pass-muted);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.lr-pass__label {
	fill: var(--lr-color-text-main, #1f374e);
	font-size: 12px;
}

.lr-pass__value {
	fill: var(--lr-pass-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.lr-pass__line {
	fill: none;
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.lr-pass__dot {
	stroke: var(--lr-pass-surface);
	stroke-width: 2;
	cursor: pointer;
}

.lr-pass__line.lr-pass__s1 { stroke: var(--lr-pass-s1); }
.lr-pass__line.lr-pass__s2 { stroke: var(--lr-pass-s2); }
.lr-pass__line.lr-pass__s3 { stroke: var(--lr-pass-s3); }
.lr-pass__line.lr-pass__s4 { stroke: var(--lr-pass-s4); }
.lr-pass__line.lr-pass__s5 { stroke: var(--lr-pass-s5); }
.lr-pass__dot.lr-pass__s1, .lr-pass__key.lr-pass__s1 { fill: var(--lr-pass-s1); background: var(--lr-pass-s1); }
.lr-pass__dot.lr-pass__s2, .lr-pass__key.lr-pass__s2 { fill: var(--lr-pass-s2); background: var(--lr-pass-s2); }
.lr-pass__dot.lr-pass__s3, .lr-pass__key.lr-pass__s3 { fill: var(--lr-pass-s3); background: var(--lr-pass-s3); }
.lr-pass__dot.lr-pass__s4, .lr-pass__key.lr-pass__s4 { fill: var(--lr-pass-s4); background: var(--lr-pass-s4); }
.lr-pass__dot.lr-pass__s5, .lr-pass__key.lr-pass__s5 { fill: var(--lr-pass-s5); background: var(--lr-pass-s5); }

.lr-pass__bar-mark {
	fill: var(--lr-pass-s1);
	cursor: pointer;
}

.lr-pass__bar-mark--thin {
	fill: var(--lr-pass-grid);
}

.lr-pass__bar-under {
	fill: var(--lr-pass-under);
	cursor: pointer;
}

.lr-pass__bar-over {
	fill: var(--lr-pass-over);
	cursor: pointer;
}

.lr-pass__svg-chart [tabindex]:focus-visible {
	outline: none;
	stroke: var(--lr-color-text-main, #1f374e);
	stroke-width: 2;
}

.lr-pass__bar-mark:hover,
.lr-pass__bar-under:hover,
.lr-pass__bar-over:hover,
.lr-pass__dot:hover {
	opacity: 0.8;
}

.lr-pass__legend {
	list-style: none;
	margin: 0 0 var(--lr-space-2, 8px);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--lr-space-2, 8px) var(--lr-space-4, 16px);
	font-size: var(--lr-text-sm, 0.875rem);
}

.lr-pass__legend li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.lr-pass__key {
	display: inline-block;
	width: 14px;
	height: 3px;
	border-radius: 2px;
}

.lr-pass__tip {
	position: fixed;
	z-index: 1000;
	pointer-events: none;
	display: grid;
	gap: 2px;
	max-width: 260px;
	padding: 8px 10px;
	border-radius: var(--lr-radius-medium, 6px);
	background: var(--lr-color-bg-card, #fff);
	box-shadow: 0 4px 16px rgba(11, 11, 11, 0.12), 0 0 0 1px rgba(11, 11, 11, 0.1);
	font-size: var(--lr-text-sm, 0.875rem);
	color: var(--lr-color-text-main, #1f374e);
}

.lr-pass__tip[hidden] {
	display: none;
}

.lr-pass__tip span {
	color: var(--lr-pass-muted);
}

.lr-pass__empty {
	margin: 0;
	padding: var(--lr-space-4, 16px);
	border: 1px dashed var(--lr-pass-border);
	border-radius: var(--lr-radius-medium, 6px);
	color: var(--lr-pass-muted);
	font-size: var(--lr-text-sm, 0.875rem);
}

.lr-pass__mistakes,
.lr-pass__weak-list,
.lr-pass__plain-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lr-pass__mistakes li {
	display: grid;
	gap: 2px;
	padding: var(--lr-space-2, 8px) 0;
	border-bottom: 1px solid var(--lr-pass-border);
}

.lr-pass__mistakes .lr-pass__meta {
	margin: 0;
	font-size: var(--lr-text-xs, 0.75rem);
}

.lr-pass__mistake-error {
	font-weight: 600;
}

.lr-pass__weak {
	display: grid;
	grid-template-columns: minmax(10rem, 1.2fr) minmax(6rem, 1fr) auto;
	grid-template-areas: "name meter button" "meta meta button";
	align-items: center;
	gap: 4px var(--lr-space-3, 12px);
	padding: var(--lr-space-3, 12px) 0;
	border-bottom: 1px solid var(--lr-pass-border);
}

.lr-pass__weak-name {
	grid-area: name;
	font-weight: 600;
}

.lr-pass__weak--top .lr-pass__weak-name::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--lr-pass-over);
}

.lr-pass__weak .lr-pass__meter { grid-area: meter; }
.lr-pass__weak .lr-pass__meta { grid-area: meta; margin: 0; font-size: var(--lr-text-sm, 0.875rem); }
.lr-pass__weak .lr-pass__btn { grid-area: button; }

.lr-pass__meter {
	display: block;
	height: 8px;
	border-radius: 4px;
	background: #cde2fb;
	overflow: hidden;
}

.lr-pass__meter-fill {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--lr-pass-s1);
}

.lr-pass__plain-list li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--lr-space-3, 12px);
	padding: 6px 0;
	border-bottom: 1px solid var(--lr-pass-border);
	font-size: var(--lr-text-sm, 0.875rem);
}

@media (max-width: 600px) {
	.lr-pass__weak {
		grid-template-columns: 1fr auto;
		grid-template-areas: "name button" "meter button" "meta meta";
	}
}

.lr-pass__hit {
	fill: transparent;
	cursor: pointer;
}

/* ------------------------------------------------------------ accounts */

.lr-pass__auth {
	max-width: 460px;
	margin: var(--lr-space-5, 24px) auto;
}

.lr-pass__field {
	display: grid;
	gap: 4px;
	margin: 0 0 var(--lr-space-3, 12px);
}

.lr-pass__field label,
.lr-pass__label-text {
	font-size: var(--lr-text-sm, 0.875rem);
	font-weight: 600;
}

.lr-pass__input {
	font: inherit;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--lr-pass-border);
	border-radius: var(--lr-radius-medium, 6px);
	background: var(--lr-pass-surface, #fff);
	color: inherit;
}

.lr-pass__input:focus-visible {
	outline: 2px solid var(--lr-pass-accent);
	outline-offset: 1px;
}

.lr-pass__check {
	margin: 0 0 var(--lr-space-3, 12px);
	font-size: var(--lr-text-sm, 0.875rem);
}

.lr-pass__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lr-pass__ok {
	border-left: 4px solid var(--lr-pass-right);
	background: var(--lr-pass-right-wash);
	padding: var(--lr-space-3, 12px) var(--lr-space-4, 16px);
}

.lr-pass__head-row {
	display: flex;
	align-items: center;
	gap: var(--lr-space-4, 16px);
}

.lr-pass__avatar {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.lr-pass__avatar--initial {
	display: inline-grid;
	place-items: center;
	background: var(--lr-color-accent-wash, #eef2f8);
	color: var(--lr-pass-accent);
	font-weight: 700;
	font-size: 1.4rem;
}

.lr-pass__avatar--large {
	width: 112px;
	height: 112px;
	font-size: 2.6rem;
	margin-bottom: var(--lr-space-3, 12px);
}

.lr-pass__profile-photo label.lr-pass__btn {
	cursor: pointer;
}

.lr-pass__plain-list--ticks li::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-top: 0.55em;
	border-radius: 50%;
	background: var(--lr-pass-s1);
}

.lr-pass__plain-list--ticks li {
	justify-content: flex-start;
	border-bottom: 0;
	font-size: var(--lr-text-base, 1rem);
}

.lr-pass__tab-short {
	display: none;
}

/* ------------------------------------------------------------ syllabus */

.lr-pass__syl-group {
	border-top: 1px solid var(--lr-pass-border);
	padding: var(--lr-space-2, 8px) 0;
}

.lr-pass__syl-group summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--lr-space-2, 8px);
	cursor: pointer;
	padding: var(--lr-space-2, 8px) 0;
	font-weight: 600;
}

.lr-pass__syl-code {
	font-family: var(--lr-font-mono, monospace);
	font-size: var(--lr-text-sm, 0.875rem);
	color: var(--lr-pass-muted);
	min-width: 3.2rem;
}

.lr-pass__syl-name {
	flex: 1 1 12rem;
}

.lr-pass__syl-stat {
	font-size: var(--lr-text-sm, 0.875rem);
	color: var(--lr-pass-muted);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.lr-pass__syl-node {
	margin: 0 0 var(--lr-space-3, 12px) var(--lr-space-4, 16px);
	padding-left: var(--lr-space-3, 12px);
	border-left: 2px solid var(--lr-pass-border);
}

.lr-pass__syl-node-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--lr-space-2, 8px);
	font-weight: 600;
}

.lr-pass__syl-skills {
	list-style: none;
	margin: var(--lr-space-2, 8px) 0 0;
	padding: 0;
}

.lr-pass__syl-skill {
	display: grid;
	grid-template-columns: 12px 1fr auto;
	gap: var(--lr-space-2, 8px);
	align-items: baseline;
	padding: 4px 0;
	font-size: var(--lr-text-sm, 0.875rem);
}

.lr-pass__syl-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid var(--lr-pass-axis);
	box-sizing: border-box;
}

.lr-pass__syl-skill--started .lr-pass__syl-dot { border-color: var(--lr-pass-s1); }
.lr-pass__syl-skill--working .lr-pass__syl-dot { background: #86b6ef; border-color: #86b6ef; }
.lr-pass__syl-skill--strong .lr-pass__syl-dot { background: var(--lr-pass-s1); border-color: var(--lr-pass-s1); }

.lr-pass__syl-key {
	display: inline-flex;
	vertical-align: middle;
}

/* ------------------------------------------------------------ more charts */

.lr-pass__area {
	fill: var(--lr-pass-s1);
	opacity: 0.1;
	pointer-events: none;
}

.lr-pass__cross {
	stroke: var(--lr-pass-axis);
	stroke-width: 1;
	pointer-events: none;
}

.lr-pass__heat {
	display: grid;
	gap: 6px;
}

.lr-pass__heat-row {
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	align-items: center;
	gap: var(--lr-space-3, 12px);
}

.lr-pass__heat-label {
	font-size: var(--lr-text-sm, 0.875rem);
}

.lr-pass__heat-cells {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}

.lr-pass__heat-cell {
	display: inline-block;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	cursor: pointer;
}

.lr-pass__heat-cell--empty {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--lr-pass-axis);
}

.lr-pass__heat-cell:focus-visible {
	outline: 2px solid var(--lr-color-text-main, #1f374e);
	outline-offset: 1px;
}

.lr-pass__heat-key {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	margin-top: var(--lr-space-3, 12px);
}

.lr-pass__heat-cell--key {
	width: 16px;
	height: 16px;
	cursor: default;
}

/* ------------------------------------------------------------ phone: an app */

@media (max-width: 640px) {
	/* THE NAVIGATION IS AT THE TOP ON A PHONE, AND IT IS STICKY.
	 *
	 * It was a fixed bar at the bottom, which is the native pattern, and on an
	 * iPhone it was nowhere: `position: fixed` is measured against the nearest
	 * TRANSFORMED ancestor rather than the viewport, and the section this page
	 * puts the app in carries a reveal animation, so the bar sat six thousand
	 * pixels down the page. Lucas, on his phone: "there is not a menu at the
	 * top that tells me Profile, Statistics, it is just a random long page".
	 * He was right twice over, because sticky is what he asked for and it is
	 * also immune to the bug: sticky positions against the scrolling ancestor.
	 */
	.lr-pass--app .lr-pass__tabs {
		position: sticky;
		top: 0;
		z-index: 50;
		/* Full width and square: the pill shape it wears on a desktop left
		   gaps at the corners, and the card behind it showed through as it
		   scrolled under. It also reaches into the page's side gutter, so the
		   bar spans the screen the way an app's does. */
		border-radius: 0;
		margin: 0 calc(-1 * var(--lr-pass-gutter, 20px)) var(--lr-gap-medium, 16px);
		padding: 0 var(--lr-pass-gutter, 20px);
		width: calc(100% + 2 * var(--lr-pass-gutter, 20px));
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 0;
		background: var(--lr-pass-surface, #fff);
		border-bottom: 1px solid var(--lr-pass-border);
		box-shadow: 0 6px 18px rgba(12, 28, 48, 0.06);
	}

	.lr-pass--app .lr-pass__tab {
		padding: 11px 2px 10px;
		border-bottom: 3px solid transparent;
		border-top: 0;
		font-size: 0.72rem;
		line-height: 1.15;
	}

	.lr-pass--app .lr-pass__tab--on {
		border-bottom-color: var(--lr-pass-accent);
	}

	.lr-pass__tab-long {
		display: none;
	}

	.lr-pass__tab-short {
		display: inline;
	}

	.lr-pass__heat-row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* A transformed ancestor also traps anything else the app pins, so inside the
 * app the page's reveal animation stands down. The animation is decoration on
 * a marketing page; here it breaks the navigation. */
body:has(.lr-pass--app) .lr-section-full,
body:has(.lr-pass--app) .lr-section-full > *,
body:has(.lr-pass--app) .entry-content {
	transform: none !important;
	will-change: auto !important;
	filter: none !important;
	perspective: none !important;
}

/* ------------------------------------------------------------------
 * SIGNED IN, THE APP IS THE WHOLE ENVIRONMENT.
 *
 * Lucas: "wouldn't it be best for the login environment to be more like
 * an app itself, not a page within my website, but a whole environment,
 * like you get when you sign up to Instagram or Facebook". Yes. Once a
 * student is signed in, the site's header, its 1,143 pixel footer and
 * the floating chips all step aside and the app owns the viewport.
 *
 * The way out is inside the app, not around it: its own footer carries
 * the Lucas Rey mark and a link to lucasrey.com, and Profile carries
 * Sign out. Signed out, none of this applies, so the page a visitor or
 * a crawler meets is untouched.
 * ------------------------------------------------------------------ */

body:has(.lr-pass--app) #masthead,
body:has(.lr-pass--app) .site-header,
body:has(.lr-pass--app) .site-footer,
body:has(.lr-pass--app) .lr-site-footer,
body:has(.lr-pass--app) .lr-whatsapp,
body:has(.lr-pass--app) .ast-scroll-top,
body:has(.lr-pass--app) #ast-scroll-top {
	display: none !important;
}

body:has(.lr-pass--app) .site-content,
body:has(.lr-pass--app) .content-area,
body:has(.lr-pass--app) .lr-container-outer,
body:has(.lr-pass--app) .site-main,
body:has(.lr-pass--app) .entry-content,
body:has(.lr-pass--app) .lr-article-single {
	margin: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	max-width: none !important;
}

body:has(.lr-pass--app) .lr-pass--app {
	min-height: 100vh;
	min-height: 100dvh;
}

/* Kept for a home-screen install, where there is no browser chrome either. */
@media (display-mode: standalone) {
	#masthead,
	.lr-breadcrumb,
	.site-footer,
	.lr-site-footer {
		display: none !important;
	}
}

/* The site's floating book and WhatsApp chip sits where the app's bottom
   tab bar is on a phone and took its taps (found 17 September 2026). Inside
   the app the tab bar is the navigation, so the chip steps aside. */
@media (max-width: 640px) {
	body:has(.lr-pass--app) .lr-whatsapp {
		display: none !important;
	}
}

.lr-pass__file-btn {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--lr-pass-accent);
	border-radius: var(--lr-radius-medium, 6px);
	color: var(--lr-pass-accent);
	font-weight: 600;
	cursor: pointer;
}

.lr-pass__file-btn:hover,
.lr-pass__file-btn:focus-visible {
	background: var(--lr-color-accent-wash, #eef2f8);
	outline: none;
}

/* ------------------------------------------------------------ my pass */

.lr-pass__countdown-value {
	font-size: clamp(2.2rem, 1.6rem + 2.5vw, 3.2rem) !important;
	color: var(--lr-pass-accent);
}

.lr-pass__links {
	list-style: none;
	margin: var(--lr-space-4, 16px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--lr-space-3, 12px);
}

.lr-pass__links li {
	display: flex;
}

/* The whole card is the link, as on the module cards. No underline at
   rest: the border, the arrow and the hover lift say it is clickable. */
.lr-pass__link-card {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lr-space-3, 12px);
	padding: var(--lr-space-3, 12px) var(--lr-space-4, 16px);
	border: 1px solid var(--lr-pass-border);
	border-radius: var(--lr-radius-medium, 6px);
	color: inherit !important;
	text-decoration: none !important;
	transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.lr-pass__link-card:hover,
.lr-pass__link-card:focus-visible {
	border-color: var(--lr-color-accent, #1a56c4);
	box-shadow: 0 6px 18px rgba(12, 28, 48, 0.08);
}

.lr-pass__link-card:active {
	transform: translateY(1px);
}

.lr-pass__links .lr-pass__meta {
	margin: 0;
	font-size: var(--lr-text-sm, 0.875rem);
}

.lr-pass__link-title {
	font-weight: 600;
	color: var(--lr-pass-accent);
}

.lr-pass__book {
	padding: var(--lr-space-4, 16px);
	border-left: 4px solid var(--lr-pass-accent);
	background: var(--lr-color-accent-wash, #eef2f8);
	border-radius: 0 var(--lr-radius-medium, 6px) var(--lr-radius-medium, 6px) 0;
}

.lr-pass__book p {
	margin: 0 0 var(--lr-space-2, 8px);
}

.lr-pass__book-title {
	font-family: var(--lr-font-heading, Georgia, serif);
	font-size: var(--lr-text-lg, 1.25rem);
	font-weight: 600;
}

.lr-pass__danger summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--lr-pass-wrong);
}

.lr-pass__danger form {
	margin-top: var(--lr-space-3, 12px);
}

@media (max-width: 640px) {
	.lr-pass--app .lr-pass__tabs {
		grid-template-columns: repeat(6, 1fr);
	}

	.lr-pass--app .lr-pass__tab {
		font-size: 0.72rem;
	}
}

/* The Lucas Rey mark inside the app. Navy stroke and blue dot on light
   surfaces, as svg/mark.svg; cream and pale blue on dark, as mark-reversed. */
.lr-pass__logo {
	flex: 0 0 auto;
	display: block;
	color: #002147;
}

.lr-pass__logo-dot {
	fill: #1a56c4;
}

.lr-pass__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--lr-space-4, 16px);
	color: inherit;
	text-decoration: none;
}

.lr-pass__brand:hover .lr-pass__brand-name,
.lr-pass__brand:focus-visible .lr-pass__brand-name {
	text-decoration: underline;
}

.lr-pass__brand-name {
	font-family: var(--lr-font-heading, Georgia, serif);
	font-size: var(--lr-text-lg, 1.2rem);
	font-weight: 600;
	color: #002147;
	line-height: 1;
}

.lr-pass__brand-app {
	font-family: var(--lr-font-mono, monospace);
	font-size: var(--lr-text-xs, 0.75rem);
	letter-spacing: var(--lr-tracking-label, 0.08em);
	text-transform: uppercase;
	color: var(--lr-pass-muted);
	padding-left: 10px;
	border-left: 1px solid var(--lr-pass-border);
	line-height: 1.2;
}

.lr-pass__auth .lr-pass__brand {
	display: flex;
	margin-bottom: var(--lr-space-5, 24px);
}

.lr-pass__logo--bar {
	margin-right: -4px;
}

.lr-pass__foot {
	margin: var(--lr-space-6, 32px) 0 0;
	padding: var(--lr-space-4, 16px) 0;
	border-top: 1px solid var(--lr-pass-border);
	color: var(--lr-pass-muted);
	font-size: var(--lr-text-sm, 0.875rem);
}

.lr-pass__foot-brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.lr-pass__rights {
	max-width: 640px;
	margin: var(--lr-space-3, 12px) auto 0;
	text-align: center;
}

.lr-pass__rights > p {
	margin: 0 0 var(--lr-space-2, 8px);
}

.lr-pass__terms {
	text-align: left;
}

.lr-pass__terms summary {
	text-align: center;
	cursor: pointer;
	text-decoration: underline;
}

.lr-pass__terms[open] {
	padding: var(--lr-space-3, 12px) var(--lr-space-4, 16px);
	border: 1px solid var(--lr-pass-border);
	border-radius: var(--lr-radius-large, 10px);
	background: var(--lr-color-bg-card, #fff);
	color: inherit;
}

.lr-pass__terms h4,
.lr-pass__terms-card h4 {
	margin: var(--lr-space-4, 16px) 0 4px;
	font-size: var(--lr-text-base, 1rem);
}

.lr-pass__terms ul,
.lr-pass__terms-card ul {
	margin: 0;
	padding-left: 1.2em;
	list-style: disc;
}

.lr-pass__terms li,
.lr-pass__terms-card li {
	font-size: var(--lr-text-base, 1rem);
	margin: 0 0 4px;
}

.lr-pass__loading {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--lr-pass-muted);
}

@media (prefers-reduced-motion: no-preference) {
	.lr-pass__loading .lr-pass__logo-dot {
		animation: lr-pass-dot 1.2s ease-in-out infinite;
		transform-origin: 27px 37px;
	}
}

@keyframes lr-pass-dot {
	50% { opacity: 0.35; }
}

/* No dark-mode recolouring of the mark. There was a block here that turned
   the logo and the "Lucas Rey" name cream whenever the device asked for dark
   mode, on the assumption that the page would go dark too. This site does
   not: its background stays cream, so on any phone or laptop set to dark mode
   the logo was cream on cream, invisible, and only a faint hover state gave it
   away (Lucas, 18 September 2026). The mark follows the page, which is light. */

:root[data-theme="dark"] .lr-pass__logo,
:root[data-theme="dark"] .lr-pass__brand-name {
	color: #fffdf6;
}

:root[data-theme="dark"] .lr-pass__logo-dot {
	fill: #8fb0d9;
}

@media (max-width: 600px) {
	.lr-pass__brand-name {
		font-size: 1.05rem;
	}
	/* Room above the fixed bottom tab bar. */
	.lr-pass--app .lr-pass__foot {
		margin-bottom: 72px;
	}
}

.lr-pass__device-list {
	list-style: none;
	margin: 0 0 var(--lr-space-3, 12px);
	padding: 0;
}

.lr-pass__device-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding: var(--lr-space-2, 8px) 0;
	border-bottom: 1px solid var(--lr-pass-border);
}

.lr-pass__device-list .lr-pass__meta {
	margin: 0;
}

.lr-pass__device-name {
	font-weight: 600;
}

.lr-pass__offers {
	display: grid;
	gap: var(--lr-space-3, 12px);
}

.lr-pass__offer {
	padding: var(--lr-space-3, 12px) var(--lr-space-4, 16px);
	border: 1px solid var(--lr-pass-border);
	border-radius: var(--lr-radius-large, 10px);
}

.lr-pass__offer-title {
	font-weight: 600;
	margin: 0 0 4px;
}

.lr-pass__next {
	border-left: 4px solid var(--lr-pass-s1, #2a78d6);
}

.lr-pass__level-list {
	list-style: none;
	margin: 0 0 var(--lr-space-3, 12px);
	padding: 0;
}

.lr-pass__level-list li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 9.5em;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--lr-pass-border);
}

.lr-pass__levels-module {
	margin: var(--lr-space-3, 12px) 0 4px;
	font-size: var(--lr-text-base, 1rem);
}

.lr-pass__level-steps {
	display: inline-flex;
	gap: 2px;
}

.lr-pass__level-step {
	width: 22px;
	height: 8px;
	border-radius: 4px;
	background: var(--lr-pass-border);
}

.lr-pass__level-step--on {
	background: var(--lr-pass-s1, #2a78d6);
}

.lr-pass__level-word {
	color: var(--lr-pass-muted);
	font-size: var(--lr-text-sm, 0.875rem);
}

.lr-pass__more {
	margin: var(--lr-space-4, 16px) 0;
}

.lr-pass__more > summary {
	cursor: pointer;
	font-weight: 600;
	padding: var(--lr-space-3, 12px) var(--lr-space-4, 16px);
	border: 1px solid var(--lr-pass-border);
	border-radius: var(--lr-radius-large, 10px);
	background: var(--lr-color-bg-card, #fff);
}

@media (max-width: 600px) {
	.lr-pass__level-list li {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.lr-pass__level-word {
		grid-column: 1 / -1;
	}
}

.lr-pass__clock--hidden {
	visibility: hidden;
}

.lr-pass__instructions {
	color: var(--lr-pass-muted);
	font-size: var(--lr-text-sm, 0.875rem);
	margin: 0 0 var(--lr-space-3, 12px);
}

.lr-pass__notice {
	padding: var(--lr-space-2, 8px) var(--lr-space-3, 12px);
	border-left: 3px solid var(--lr-pass-s1, #2a78d6);
	background: var(--lr-color-bg-card, #fff);
	margin: 0 0 var(--lr-space-3, 12px);
}

/* ------------------------------------------------------------------
 * The 2026 look: the same tokens the rest of the site uses, so the app
 * reads as part of lucasrey.com rather than a plugin bolted to it
 * (Lucas, 17 September 2026: "this one just looks very old").
 * ------------------------------------------------------------------ */

.lr-pass {
	--lr-pass-surface: var(--lr-color-bg-card, #fff);
	--lr-pass-line: color-mix(in srgb, var(--lr-color-ink, #002147) 10%, transparent);
	--lr-pass-shadow: 0 1px 2px rgba(0, 33, 71, 0.04), 0 8px 24px rgba(0, 33, 71, 0.06);
	font-size: var(--lr-font-size-body, 1.0625rem);
	line-height: var(--lr-leading-ui, 1.55);
}

.lr-pass__card,
.lr-pass__more > summary,
.lr-pass__terms[open] {
	border: 1px solid var(--lr-pass-line);
	border-radius: var(--lr-radius-large, 14px);
	background: var(--lr-pass-surface);
	box-shadow: var(--lr-pass-shadow);
	padding: var(--lr-space-5, 24px);
	margin-bottom: var(--lr-space-4, 16px);
}

.lr-pass__title {
	font-size: var(--lr-font-size-h2, 2rem);
	line-height: var(--lr-leading-h2, 1.28);
	letter-spacing: var(--lr-tracking-2xl, -0.016em);
	margin: 0 0 var(--lr-space-2, 8px);
}

.lr-pass__h3 {
	font-size: var(--lr-font-size-h3, 1.4rem);
	line-height: var(--lr-leading-h3, 1.4);
	letter-spacing: -0.01em;
}

.lr-pass__lead {
	font-size: var(--lr-font-size-lead, 1.25rem);
	line-height: 1.5;
}

/* The tab bar reads as one control, not seven links. */
.lr-pass__tabs {
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--lr-pass-line);
	border-radius: 999px;
	background: color-mix(in srgb, var(--lr-color-ink, #002147) 4%, transparent);
}

.lr-pass__tab {
	border-radius: 999px;
	border: 0;
	padding: 8px 14px;
	font-weight: 600;
}

.lr-pass__tab[aria-selected="true"] {
	background: var(--lr-pass-surface);
	box-shadow: 0 1px 2px rgba(0, 33, 71, 0.08);
}

/* Figures: big, calm, and aligned on a grid. */
.lr-pass__kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--lr-space-4, 16px);
}

.lr-pass__kpi {
	border: 1px solid var(--lr-pass-line);
	border-radius: var(--lr-radius-large, 14px);
	background: var(--lr-pass-surface);
	padding: var(--lr-space-4, 16px) var(--lr-space-5, 24px);
}

.lr-pass__kpi-value,
.lr-pass__countdown-value {
	font-size: var(--lr-font-size-h2, 2rem);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	margin: 2px 0;
}

.lr-pass__kpi-label {
	font-family: var(--lr-font-mono, monospace);
	font-size: var(--lr-text-xs, 0.75rem);
	letter-spacing: var(--lr-tracking-label, 0.08em);
	text-transform: uppercase;
	color: var(--lr-pass-muted);
	margin: 0;
}

.lr-pass__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--lr-space-4, 16px);
}

/* The next step and the plan: the two cards that should catch the eye. */
.lr-pass__next,
.lr-pass__plan {
	border-left: 4px solid var(--lr-pass-s1, #2a78d6);
	background: linear-gradient(180deg, color-mix(in srgb, var(--lr-pass-s1, #2a78d6) 5%, transparent), transparent 60%), var(--lr-pass-surface);
}

.lr-pass__offer {
	border-radius: var(--lr-radius-medium, 10px);
}

.lr-pass__level-step {
	height: 10px;
	border-radius: 999px;
}

@media (min-width: 900px) {
	.lr-pass__head {
		padding-bottom: var(--lr-space-4, 16px);
		border-bottom: 1px solid var(--lr-pass-line);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.lr-pass__card,
	.lr-pass__kpi {
		transition: box-shadow 160ms ease, transform 160ms ease;
	}
	.lr-pass__module:hover,
	.lr-pass__offer:hover {
		box-shadow: 0 2px 4px rgba(0, 33, 71, 0.06), 0 14px 32px rgba(0, 33, 71, 0.10);
	}
}

.lr-pass__goal-bar {
	display: block;
	height: 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--lr-color-ink, #002147) 8%, transparent);
	overflow: hidden;
	margin: 0 0 var(--lr-space-3, 12px);
}

.lr-pass__goal-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--lr-pass-s1, #2a78d6);
}

.lr-pass__badges {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var(--lr-space-3, 12px);
	padding: 0;
}

.lr-pass__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--lr-pass-line, #dce6ec);
	border-radius: 999px;
	font-size: var(--lr-text-sm, 0.875rem);
	background: color-mix(in srgb, var(--lr-pass-s1, #2a78d6) 6%, transparent);
}

/* ------------------------------------------------------------------
 * The house style, taken from the two pages Lucas rates most: /books/
 * and /teaching/esat/move-register/. Their patterns, reused rather than
 * imitated: accent mono eyebrows, accent-wash stat panels with a big
 * accent number, edition cards for anything priced, and a left accent
 * rule on the card that carries the argument.
 * ------------------------------------------------------------------ */

.lr-pass__eyebrow {
	font-family: var(--lr-font-mono, monospace);
	font-size: 0.78rem;
	letter-spacing: var(--lr-letter-spacing-mono, 0.08em);
	text-transform: uppercase;
	font-weight: 500;
	color: var(--lr-color-accent, #1a56c4);
}

.lr-pass__card,
.lr-pass__more > summary,
.lr-pass__terms[open] {
	padding: var(--lr-padding-card, 24px);
}

/* Figures, as on the book page: a wash panel, one big accent number. */
.lr-pass__kpi {
	border: 0;
	border-radius: var(--lr-radius-large, 14px);
	background: var(--lr-color-accent-wash, #eef2f8);
	padding: var(--lr-space-5, 24px);
}

.lr-pass__kpi-value,
.lr-pass__countdown-value {
	display: block;
	font-size: clamp(2.25rem, 1.9rem + 1.2vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--lr-tracking-display, -0.022em);
	color: var(--lr-color-accent, #1a56c4);
	margin-bottom: var(--lr-space-2, 8px);
}

.lr-pass__kpi-label {
	color: var(--lr-color-text-subtle, #55697d);
}

/* Side by side, the numbers sit on one line even when a label takes two.
 * The line height is declared here so the two lines reserved below are the
 * two lines actually drawn: reserving 2.7em against an inherited 1.5 left
 * the two-line tile four pixels low, which is exactly what it looked like. */
@media (min-width: 700px) {
	.lr-pass__kpi-label {
		display: block;
		line-height: 1.35;
		min-height: 2.7em;
	}
}

.lr-pass__kpi-value--none {
	font-size: var(--lr-font-size-h4, 1.25rem);
	font-weight: 600;
	color: var(--lr-color-text-subtle, #55697d);
	letter-spacing: normal;
}

.lr-pass__kpi-note {
	font-size: var(--lr-text-sm, 0.875rem);
	color: var(--lr-color-text-subtle, #55697d);
	margin: 0;
}

/* Anything priced looks like a book edition. */
.lr-pass__offer {
	display: flex;
	flex-direction: column;
	gap: var(--lr-space-2, 8px);
	padding: var(--lr-space-5, 24px);
	border: 1px solid var(--lr-color-border-card, #dce6ec);
	border-radius: var(--lr-radius-large, 14px);
	background: var(--lr-color-bg-card, #fff);
}

.lr-pass__offer-title {
	font-family: var(--lr-font-heading, Georgia, serif);
	font-size: var(--lr-font-size-h4, 1.25rem);
	font-weight: 700;
	margin: 0;
}

.lr-pass__offer .lr-btn-primary {
	align-self: flex-start;
	margin-top: var(--lr-space-2, 8px);
}

/* The card carrying the argument: the move-register feature rule. */
.lr-pass__next,
.lr-pass__plan {
	border: 1px solid var(--lr-color-border-card, #dce6ec);
	border-left: 4px solid var(--lr-color-accent, #1a56c4);
	border-radius: var(--lr-radius-medium, 10px);
	background: var(--lr-color-bg-card, #fff);
}

.lr-pass__plain-list {
	display: flex;
	flex-direction: column;
	gap: var(--lr-gap-small, 8px);
	line-height: 1.65;
}

.lr-pass__meta,
.lr-pass__hint {
	color: var(--lr-color-text-subtle, var(--lr-pass-muted));
}

/* ------------------------------------------------------------------
 * The words the page carries in its own HTML: what this is, and what a
 * pass costs. Shown to a visitor who is not signed in, to a reader with
 * no JavaScript, and to every crawler; removed by the app the moment a
 * student signs in. Styled on the same patterns as /books/.
 * ------------------------------------------------------------------ */

.lr-pass-intro {
	max-width: 1080px;
	margin: 0 auto var(--lr-space-7, 40px);
}

.lr-pass-intro[hidden] {
	display: none;
}

.lr-pass-intro__eyebrow {
	font-family: var(--lr-font-mono, monospace);
	font-size: 0.78rem;
	letter-spacing: var(--lr-letter-spacing-mono, 0.08em);
	text-transform: uppercase;
	font-weight: 500;
	color: var(--lr-color-accent, #1a56c4);
	margin: 0 0 var(--lr-space-2, 8px);
}

.lr-pass-intro__title {
	margin: 0 0 var(--lr-space-4, 16px);
	font-size: var(--lr-font-size-h2, clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem));
	letter-spacing: var(--lr-tracking-display, -0.022em);
}

.lr-pass-intro__heading {
	margin: var(--lr-space-6, 32px) 0 var(--lr-space-3, 12px);
}

.lr-pass-intro__offers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--lr-gap-medium, 16px);
}

.lr-pass-intro__offer {
	display: flex;
	flex-direction: column;
	gap: var(--lr-space-2, 8px);
	padding: var(--lr-space-5, 24px);
	border: 1px solid var(--lr-color-border-card, #dce6ec);
	border-radius: var(--lr-radius-large, 14px);
	background: var(--lr-color-bg-card, #fff);
}

.lr-pass-intro__offer-title {
	margin: 0;
	font-family: var(--lr-font-heading, Georgia, serif);
	font-size: var(--lr-font-size-h4, 1.25rem);
	font-weight: 700;
}

.lr-pass-intro__price {
	margin: 0;
	font-size: clamp(2rem, 1.7rem + 1vw, 2.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--lr-tracking-display, -0.022em);
	color: var(--lr-color-accent, #1a56c4);
}

.lr-pass-intro__note {
	margin: 0;
	font-size: var(--lr-text-sm, 0.9rem);
	color: var(--lr-color-text-subtle, #55697d);
}

.lr-pass-intro__offers + .lr-pass-intro__note {
	margin-top: var(--lr-space-4, 16px);
}

.lr-pass-intro__lead {
	font-size: var(--lr-text-lg, 1.0625rem);
	line-height: 1.7;
}

/* ------------------------------------------------------------------
 * The app's own confirmation, in the app's own clothes, in place of the
 * browser's. <dialog> gives the focus trap and the Escape key for free.
 * ------------------------------------------------------------------ */

.lr-pass__ask {
	max-width: 27rem;
	padding: var(--lr-padding-card, 24px);
	border: 1px solid var(--lr-color-border-card, #dce6ec);
	border-radius: var(--lr-radius-large, 14px);
	background: var(--lr-color-bg-card, #fff);
	color: var(--lr-color-text, #16283a);
	box-shadow: 0 18px 48px rgba(12, 28, 48, 0.22);
}

.lr-pass__ask::backdrop {
	background: rgba(12, 28, 48, 0.45);
}

.lr-pass__ask-text {
	margin: 0 0 var(--lr-space-4, 16px);
	font-size: var(--lr-text-lg, 1.0625rem);
	line-height: 1.6;
}

.lr-pass__ask-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lr-gap-small, 8px);
	justify-content: flex-end;
}

/* The two answers are the same size: the theme's secondary button is smaller
 * than its primary, which made Cancel look like an afterthought beside it. */
.lr-pass__ask-actions .lr-pass__btn {
	margin: 0;
	padding: 0.72rem 1.15rem;
	font-size: 1rem;
	line-height: 1.2;
}

/* A button that cannot be pressed must not look pressable: Check sits
 * disabled until an option is chosen, and at full opacity with a pointer
 * cursor it read as broken rather than as waiting (found 18 September 2026,
 * walking the app as a student). */
.lr-pass button:disabled,
.lr-pass__ask button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ------------------------------------------------------------------
 * Buttons, matched to the site.
 *
 * The app asked for .lr-btn-secondary on eighteen buttons and the theme
 * defines no such class, anywhere. Those buttons therefore arrived with
 * no styling at all: a 21 pixel grey browser control with an outset
 * border, beside a 52 pixel navy primary. That is what Lucas saw as
 * buttons "not aligned with the CSS of the website" (18 September 2026).
 * They now use the site's own secondary, .lr-btn-outline, and every
 * button in the app is given one set of metrics so a row of them lines
 * up whatever kind they are.
 * ------------------------------------------------------------------ */

.lr-pass .lr-pass__btn,
.lr-pass__ask .lr-pass__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.72rem 1.3rem;
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	border-radius: var(--lr-radius-small, 6px);
	text-decoration: none !important;
	cursor: pointer;
}

/* A fallback that matches the theme's own outline button, in case this
 * stylesheet loads where the theme's does not. */
.lr-pass .lr-btn-outline {
	background-color: var(--lr-color-btn-outline-bg, transparent);
	color: var(--lr-color-accent, #002147);
	border: 1px solid var(--lr-color-accent, #002147);
}

.lr-pass .lr-btn-outline:hover {
	background-color: var(--lr-color-accent-wash, #eef2f8);
}

/* ------------------------------------------------------------------
 * Signed in, the page gets out of the way.
 *
 * Lucas: "make sure that the passes pages look more like an app than a
 * webpage". A student who has signed in is not reading a page about the
 * product, they are using it, so the things that sell it stand down: the
 * breadcrumb, the page heading and its description, the book card, and
 * the list of links that follows the app. The site header and footer
 * stay, because a person still needs a way back out.
 *
 * None of this touches the signed out page, which is what a visitor and
 * every crawler see, so the words and the links that do the selling and
 * the internal linking are untouched.
 * ------------------------------------------------------------------ */

body:has(.lr-pass--app) .lr-breadcrumb,
body:has(.lr-pass--app) .entry-content > .wp-block-group.lr-surface-raised,
body:has(.lr-pass--app) .entry-content > .wp-block-group.lr-spacer-md,
/* Every block of the page except the one holding the app. Two passes were
   needed to get this right and both failures are worth keeping: aimed at
   the app's own parent it hid the app (a blank white page), and aimed one
   level too deep it emptied the hero band without removing it, leaving a
   240 pixel navy rectangle with nothing in it above a book advert. The
   :has() pair says what was meant all along: hide a block unless the app
   is inside it. */
body:has(.lr-pass--app) .lr-section-full > *:not(.lr-pass):not(:has(.lr-pass)) {
	display: none !important;
}

/* With the page furniture gone the app should sit where the eye expects
   an app to start, not halfway down a column of white. */
body:has(.lr-pass--app) .lr-section-full {
	padding-top: var(--lr-space-4, 16px);
}

@media (max-width: 640px) {
	body:has(.lr-pass--app) .lr-section-full {
		padding-top: 0;
	}
}

/* ------------------------------------------------------------------
 * The comparison table and the figure on the signed out page.
 * ------------------------------------------------------------------ */

.lr-pass-intro__table {
	margin: var(--lr-space-4, 16px) 0 var(--lr-space-3, 12px);
	overflow-x: auto;
}

.lr-pass-intro__table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	line-height: 1.5;
	text-align: left;
}

.lr-pass-intro__table th,
.lr-pass-intro__table td {
	padding: 0.6rem 0.8rem;
	border-bottom: 1px solid var(--lr-color-border-subtle, #dce6ec);
	vertical-align: top;
}

.lr-pass-intro__table thead th {
	font-weight: 600;
	background: var(--lr-color-accent-wash, #eef2f8);
	white-space: nowrap;
}

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

.lr-pass-intro__table td {
	color: var(--lr-color-text-subtle, #55697d);
}

.lr-pass-intro__table td:last-child {
	color: var(--lr-color-text, #16283a);
	font-weight: 500;
}

.lr-pass-intro__no {
	opacity: 0.7;
}

.lr-pass-fig {
	margin: var(--lr-space-5, 24px) 0;
}

.lr-pass-fig__svg {
	width: 100%;
	height: auto;
	color: var(--lr-color-accent, #1a56c4);
	font-family: var(--lr-font-family, system-ui, sans-serif);
	/* The figure is drawn at 1040 wide; below that a phone scrolls it rather
	   than shrinking five cards into illegibility. */
	min-width: 680px;
}

.lr-pass-fig {
	overflow-x: auto;
}

.lr-pass-fig__card {
	fill: var(--lr-color-bg-card, #fff);
	stroke: var(--lr-color-border-card, #dce6ec);
	stroke-width: 1.2;
}

.lr-pass-fig__card--accent {
	fill: var(--lr-color-accent-wash, #eef2f8);
	stroke: var(--lr-color-accent, #1a56c4);
}

.lr-pass-fig__eyebrow {
	font-family: var(--lr-font-mono, monospace);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	fill: var(--lr-color-text-subtle, #55697d);
}

.lr-pass-fig__step {
	font-family: var(--lr-font-mono, monospace);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	fill: var(--lr-color-accent, #1a56c4);
}

.lr-pass-fig__name {
	font-size: 14px;
	font-weight: 600;
	fill: var(--lr-color-text, #16283a);
}

.lr-pass-fig__note {
	font-size: 12.5px;
	fill: var(--lr-color-text-subtle, #55697d);
}

.lr-pass-fig__arrow {
	stroke: var(--lr-color-accent, #1a56c4);
	stroke-width: 1.4;
	fill: none;
}

.lr-pass-fig figcaption {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--lr-color-text-subtle, #55697d);
}

/* ------------------------------------------------------------------
 * A card that does one thing IS the button for it.
 *
 * Lucas, on an iPhone: "the cards themselves should be buttons. You
 * shouldn't have a button within the card". A module card on a free
 * account offers exactly one action, so a navy pill stranded inside a
 * white card was a second target for the same tap.
 * ------------------------------------------------------------------ */

.lr-pass__card-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lr-gap-small, 12px);
	width: 100%;
	text-align: left;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.lr-pass__card-btn:hover,
.lr-pass__card-btn:focus-visible {
	border-color: var(--lr-color-accent, #1a56c4);
	box-shadow: 0 6px 18px rgba(12, 28, 48, 0.08);
}

.lr-pass__card-btn:active {
	transform: translateY(1px);
}

.lr-pass__card-btn-text {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.lr-pass__card-btn .lr-pass__h3 {
	margin: 0;
}

.lr-pass__card-btn .lr-pass__meta {
	margin: 0;
}

.lr-pass__card-btn-go {
	flex: 0 0 auto;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--lr-color-accent, #1a56c4);
}

/* ------------------------------------------------------------------
 * A phone shows less, and what it shows is tighter.
 *
 * "Some of the bullet points don't read well, and there is too much
 * information." Cards were a screen tall each, so five modules meant
 * five screens of scrolling to find anything.
 * ------------------------------------------------------------------ */

@media (max-width: 640px) {
	.lr-pass__card,
	.lr-pass-intro__offer {
		padding: 16px;
	}

	.lr-pass__card + .lr-pass__card,
	.lr-pass__modules > * + * {
		margin-top: 12px;
	}

	.lr-pass__h3 {
		font-size: 1.0625rem;
		line-height: 1.3;
	}

	.lr-pass__meta,
	.lr-pass__hint {
		font-size: 0.9rem;
		line-height: 1.45;
	}

	/* Bullets: the marker was sitting on the first line's descenders and the
	   text wrapped under it rather than beside it. */
	.lr-pass__plain-list li,
	.lr-pass__plain-list--ticks li {
		display: grid;
		grid-template-columns: 14px 1fr;
		align-items: start;
		gap: 10px;
		line-height: 1.5;
		text-wrap: pretty;
	}

	.lr-pass__plain-list--ticks li::before {
		margin-top: 7px;
	}

	/* On a phone every action fills the width, so it reads as a row in a list
	   rather than a pill adrift in a card. */
	.lr-pass__actions {
		display: grid;
		gap: 8px;
	}

	.lr-pass__actions .lr-pass__btn {
		width: 100%;
	}

	/* The long reads collapse: the footer already carries the short notice. */
	.lr-pass__terms-card {
		font-size: 0.9rem;
	}
}

/* ------------------------------------------------------------------
 * An app, not a book (Lucas, 18 September 2026).
 * ------------------------------------------------------------------ */

/* The status under the greeting is a chip, not a paragraph. */
.lr-pass__chip {
	display: inline-block;
	margin: 6px 0 0;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--lr-color-accent-wash, #eef2f8);
	color: var(--lr-color-accent, #002147);
	font-size: 0.875rem;
	font-weight: 600;
}

/* What a pass unlocks: a two-column grid of short rows with a tick. */
.lr-pass__unlock {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px;
	margin: 12px 0 16px;
	padding: 0;
	list-style: none;
}

.lr-pass__unlock li {
	display: grid;
	grid-template-columns: 20px 1fr;
	grid-template-rows: auto auto;
	column-gap: 8px;
	padding: 10px 12px;
	border-radius: var(--lr-radius-medium, 10px);
	background: var(--lr-color-accent-wash, #eef2f8);
}

.lr-pass__unlock-tick {
	grid-row: 1 / 3;
	align-self: center;
	font-weight: 700;
	color: var(--lr-color-accent, #002147);
}

.lr-pass__unlock-name {
	font-weight: 600;
	line-height: 1.25;
}

.lr-pass__unlock-note {
	font-size: 0.8125rem;
	color: var(--lr-color-text-subtle, #55697d);
	line-height: 1.3;
}

/* Prices are tiles, and the tile is the button. */
.lr-pass__offers--tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.lr-pass__price-tile {
	display: grid;
	justify-items: center;
	gap: 4px;
	padding: 16px 8px;
	border: 1px solid var(--lr-color-border-card, #dce6ec);
	border-radius: var(--lr-radius-large, 14px);
	background: var(--lr-color-bg-card, #fff);
	text-align: center;
	text-decoration: none !important;
	color: inherit !important;
	transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.lr-pass__price-tile:hover,
.lr-pass__price-tile:focus-visible {
	border-color: var(--lr-color-accent, #002147);
	box-shadow: 0 6px 18px rgba(12, 28, 48, 0.08);
}

.lr-pass__price-tile:active {
	transform: translateY(1px);
}

.lr-pass__price-length {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--lr-color-text-subtle, #55697d);
}

.lr-pass__price-amount {
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--lr-color-accent, #002147);
}

.lr-pass__price-go {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--lr-color-accent, #002147);
}

.lr-pass__pay-note {
	margin-top: 10px;
	font-size: 0.8125rem;
}

/* The upgrade banner reads as one strong line. */
.lr-pass__upgrade {
	background: var(--lr-color-accent-wash, #eef2f8);
	border-color: transparent;
}

/* The terms are one tappable line until opened. */
details.lr-pass__terms-card > summary {
	cursor: pointer;
	list-style: none;
	margin: 0;
}

details.lr-pass__terms-card > summary::-webkit-details-marker {
	display: none;
}

details.lr-pass__terms-card > summary::after {
	content: " \25BE";
	font-size: 0.8em;
	color: var(--lr-color-text-subtle, #55697d);
}

@media (max-width: 400px) {
	.lr-pass__offers--tiles {
		gap: 6px;
	}

	.lr-pass__price-amount {
		font-size: 1.4rem;
	}
}

/* A small status chip inside a card, in place of a sentence of advice. */
.lr-pass__mini {
	display: inline-block;
	margin: 8px 0 0;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--lr-color-accent-wash, #eef2f8);
	color: var(--lr-color-text-subtle, #55697d);
	font-size: 0.8125rem;
	font-weight: 600;
}

/* The next step is one tappable card; its action shows as a pill. */
.lr-pass__next-btn {
	flex-wrap: wrap;
	align-items: flex-end;
}

.lr-pass__next-go {
	flex: 0 0 auto;
	padding: 10px 16px;
	border-radius: var(--lr-radius-small, 6px);
	background: var(--lr-color-accent, #002147);
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.lr-pass__next-go {
		width: 100%;
		text-align: center;
	}
}

/* ------------------------------------------------------------------
 * Every diagram has a phone version. The wide row from 600px up (an iPad
 * fits it), the column of cards below. The wide drawing no longer carries
 * a min-width, so nothing scrolls sideways at any width.
 * ------------------------------------------------------------------ */

.lr-pass-fig {
	overflow: visible;
}

.lr-pass-fig .lr-pass-fig__svg {
	min-width: 0;
	width: 100%;
	height: auto;
	display: block;
}

.lr-pass-fig__narrow {
	display: none;
}

@media (max-width: 599px) {
	.lr-pass-fig__wide {
		display: none;
	}

	.lr-pass-fig__narrow {
		display: block;
		max-width: 420px;
	}
}

/* The site's dropdown cards inside the app: the theme draws them; this only
   spaces them and keeps their text at the app's size. */
.lr-pass details.lr-pass__more {
	margin: 12px 0 0;
}

.lr-pass details.lr-pass__more .lr-details-content p {
	margin: 0 0 10px;
	max-width: none;
}

.lr-pass details.lr-pass__more .lr-details-content p:last-child {
	margin-bottom: 0;
}