/* LLQP Exam Pro — lesson body (.lqx). Loaded on course, lesson and quiz pages only.
   Blocks: .lqx-goals, .lqx-case, .lqx-trap, .lqx-key, .lqx-tip, .lqx-calc, .lqx-table (+ .lqx-scroll wrapper),
   .lqx-recap, details.lqx-test, .lqx-figure, .lqx-label.
   Colours: --llqp-primary (indigo), --llqp-accent (violet), --llqp-hint (gold) from the settings;
   module colour --lqx-mod from the root class .lqx-m0 … .lqx-m7 (added by tools/build_course.py). */

.lqx {
	--lqx-primary: var(--llqp-primary, #5956e9);
	--lqx-accent: var(--llqp-accent, #8b5cf6);
	--lqx-gold: var(--llqp-hint, #f4b740);
	--lqx-mod: var(--lqx-primary);
	--lqx-ink: #1d1c35;
	--lqx-muted: #5f6178;
	--lqx-line: #e4e3f1;
	--lqx-soft: #f6f6fd;
	--lqx-case: #0e9f8e;
	--lqx-trap: #c2255c;
	--lqx-radius: 14px;
	max-width: 800px;
	color: var(--lqx-ink);
	font-size: var(--llqp-font, 17px);
	line-height: 1.7;
	overflow-wrap: break-word;
	-webkit-text-size-adjust: 100%;
}
.lqx-m0 { --lqx-mod: #14132b; }
.lqx-m1 { --lqx-mod: #5956e9; }
.lqx-m2 { --lqx-mod: #0e9f8e; }
.lqx-m3 { --lqx-mod: #e8820c; }
.lqx-m4 { --lqx-mod: #c2255c; }
.lqx-m5 { --lqx-mod: #8b5cf6; }
.lqx-m6 { --lqx-mod: #1c7ed6; }
.lqx-m7 { --lqx-mod: #b7860b; }

.lqx *, .lqx *::before, .lqx *::after {
	box-sizing: border-box;
}
.lqx > *:first-child {
	margin-top: 0;
}
.lqx h2, .lqx h3, .lqx h4 {
	color: var(--lqx-ink);
	line-height: 1.3;
	font-weight: 750;
	letter-spacing: -0.01em;
}
.lqx h2 {
	position: relative;
	font-size: 1.45em;
	margin: 1.9em 0 0.65em;
	padding: 0 0 0.35em;
	border-bottom: 2px solid var(--lqx-line);
}
.lqx h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 3.2em;
	height: 2px;
	background: var(--lqx-mod);
}
.lqx h3 {
	font-size: 1.16em;
	margin: 1.5em 0 0.5em;
	color: #2a2950;
}
.lqx p, .lqx ul, .lqx ol {
	margin: 0 0 1em;
}
.lqx ul, .lqx ol {
	padding-left: 1.35em;
}
.lqx li {
	margin: 0.3em 0;
}
.lqx li::marker {
	color: var(--lqx-mod);
}
.lqx strong {
	color: #0f0e24;
	font-weight: 700;
}
.lqx sup {
	font-size: 0.7em;
	line-height: 0;
}
.lqx a {
	color: var(--lqx-primary);
	text-underline-offset: 2px;
}
.lqx .lqx-label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 0.45em;
	font-size: 0.76em;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.lqx .lqx-label::before {
	display: none;
}

/* ------------------------------------------------------------------ boxes */
.lqx-goals, .lqx-case, .lqx-trap, .lqx-key, .lqx-tip, .lqx-calc, .lqx-recap {
	position: relative;
	margin: 1.4em 0;
	padding: 1em 1.25em;
	border-radius: var(--lqx-radius);
	border: 1px solid var(--lqx-line);
	background: #fff;
}
.lqx-goals > :last-child, .lqx-case > :last-child, .lqx-trap > :last-child, .lqx-key > :last-child,
.lqx-tip > :last-child, .lqx-calc > :last-child, .lqx-recap > :last-child {
	margin-bottom: 0;
}
.lqx-goals p:not(.lqx-label), .lqx-case p:not(.lqx-label), .lqx-trap p:not(.lqx-label),
.lqx-key p:not(.lqx-label), .lqx-tip p:not(.lqx-label) {
	margin-bottom: 0.7em;
}

/* Box icons: a small coloured disc with a glyph, drawn in CSS (no image). */
.lqx-goals .lqx-label::before, .lqx-case .lqx-label::before, .lqx-trap .lqx-label::before,
.lqx-key .lqx-label::before, .lqx-tip .lqx-label::before, .lqx-calc .lqx-label::before,
.lqx-recap .lqx-label::before {
	display: inline-grid;
	place-items: center;
	flex: none;
	border-radius: 50%;
	letter-spacing: 0;
	line-height: 1;
	width: 1.75em;
	height: 1.75em;
	color: #fff;
	font-weight: 800;
	font-size: 0.95em;
	text-transform: none;
}
.lqx-goals .lqx-label::before { content: "\2713"; background: var(--lqx-primary); }
.lqx-case .lqx-label::before { content: "\2192"; background: var(--lqx-case); }
.lqx-trap .lqx-label::before { content: "!"; background: var(--lqx-trap); }
.lqx-key .lqx-label::before { content: "\2605"; background: var(--lqx-mod); }
.lqx-tip .lqx-label::before { content: "i"; background: var(--lqx-gold); color: #3d2a00; font-family: Georgia, serif; font-style: italic; }
.lqx-calc .lqx-label::before { content: "="; background: var(--lqx-accent); }
.lqx-recap .lqx-label::before { content: "\2714"; background: var(--lqx-gold); color: #14132b; }

/* Goals */
.lqx-goals {
	background: linear-gradient(135deg, #f1f0ff 0%, #f8f3ff 100%);
	border-color: #dddbfb;
}
.lqx-goals .lqx-label, .lqx-goals h2, .lqx-goals h3 {
	color: var(--lqx-primary);
	border: 0;
	margin-top: 0;
}
.lqx .lqx-goals ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
.lqx .lqx-goals li {
	position: relative;
	list-style: none;
	padding-left: 1.8em;
}
.lqx .lqx-goals li::marker {
	content: none;
}
.lqx .lqx-goals li::before {
	content: "";
	position: absolute;
	left: 0.25em;
	top: 0.55em;
	width: 0.75em;
	height: 0.4em;
	border-left: 2.5px solid var(--lqx-primary);
	border-bottom: 2.5px solid var(--lqx-primary);
	transform: rotate(-45deg);
}

/* Case study */
.lqx-case {
	border-left: 5px solid var(--lqx-case);
	background: #f0fbf9;
	border-color: #cfeee9;
	border-left-color: var(--lqx-case);
}
.lqx-case .lqx-label { color: var(--lqx-case); }

/* Exam trap */
.lqx-trap {
	background: #fff3f7;
	border-color: #f7d3e0;
	border-left: 5px solid var(--lqx-trap);
}
.lqx-trap .lqx-label { color: var(--lqx-trap); }

/* Key points */
.lqx-key {
	background: var(--lqx-soft);
	border-color: #e2e1f6;
	border-left: 5px solid var(--lqx-mod);
}
.lqx-key .lqx-label { color: var(--lqx-mod); }

/* Tip */
.lqx-tip {
	background: #fffaf0;
	border-color: #f8e5bb;
	border-left: 5px solid var(--lqx-gold);
}
.lqx-tip .lqx-label { color: #8a5d00; }

/* Worked calculation */
.lqx-calc {
	background: #faf8ff;
	border-color: #e5ddfd;
	border-left: 5px solid var(--lqx-accent);
	font-variant-numeric: tabular-nums lining-nums;
}
.lqx-calc .lqx-label { color: #6d3fd8; }
.lqx-calc p:not(.lqx-label) {
	margin: 0 0 0.6em;
	padding: 0.65em 0.9em;
	background: #fff;
	border: 1px dashed #d9cdfb;
	border-radius: 10px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.88em;
	line-height: 1.85;
	overflow-x: auto;
}
.lqx-calc p:not(.lqx-label):last-child {
	margin-bottom: 0;
}
.lqx-calc strong {
	padding: 0.05em 0.35em;
	border-radius: 5px;
	background: #fff1cc;
	box-shadow: inset 0 -2px 0 var(--lqx-gold);
	color: #1d1c35;
}
.lqx-calc code, .lqx-calc pre {
	font-size: 0.92em;
}

/* Recap */
.lqx-recap {
	margin-top: 2em;
	background: #14132b;
	background: linear-gradient(140deg, #14132b 0%, #232058 100%);
	color: #ecebff;
	border: 0;
}
.lqx-recap strong, .lqx-recap h2, .lqx-recap h3 {
	color: #fff;
	border: 0;
}
.lqx-recap h2::after {
	display: none;
}
.lqx .lqx-recap .lqx-label { color: var(--lqx-gold); }
.lqx-recap li::marker { color: var(--lqx-gold); }
.lqx-recap a { color: #c9c7ff; }

/* ------------------------------------------------------------------ tables */
.lqx table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2em 0;
	font-size: 0.9em;
	line-height: 1.5;
	background: #fff;
}
.lqx .lqx-scroll {
	position: relative;
	margin: 1.3em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--lqx-line);
	border-radius: 12px;
	background:
		linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left center / 24px 100% no-repeat local,
		linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) right center / 24px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(20, 19, 43, 0.14), rgba(20, 19, 43, 0)) left center / 10px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(20, 19, 43, 0.14), rgba(20, 19, 43, 0)) right center / 10px 100% no-repeat scroll;
	background-color: #fff;
}
.lqx .lqx-scroll > table {
	margin: 0;
	background: transparent;
}
div.lqx-table {
	margin: 1.3em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 12px;
	border: 1px solid var(--lqx-line);
}
div.lqx-table table {
	margin: 0;
}
/* A table not wrapped by the build (older content): keep a border and let it scroll. */
.lqx > table.lqx-table {
	border: 1px solid var(--lqx-line);
}
.lqx th, .lqx td {
	padding: 0.6em 0.8em;
	border-bottom: 1px solid var(--lqx-line);
	text-align: left;
	vertical-align: top;
}
.lqx td + td, .lqx th + th {
	border-left: 1px solid #efeef8;
}
.lqx thead th, .lqx table > tr:first-child > th, .lqx tbody:first-child > tr:first-child > th {
	background: var(--lqx-mod);
	color: #fff;
	font-weight: 700;
	border-bottom: 0;
	white-space: nowrap;
}
.lqx-m7 thead th {
	color: #fff;
}
.lqx tbody th {
	background: #f3f2fc;
	color: var(--lqx-ink);
	font-weight: 700;
}
.lqx tbody tr:nth-child(even) td {
	background: rgba(89, 86, 233, 0.04);
}
.lqx tbody tr:hover td {
	background: rgba(89, 86, 233, 0.08);
}
.lqx tbody tr:last-child td, .lqx tbody tr:last-child th {
	border-bottom: 0;
}
.lqx td strong {
	color: #0f0e24;
}
.lqx caption {
	caption-side: bottom;
	padding: 0.5em;
	color: var(--lqx-muted);
	font-size: 0.9em;
}

/* ------------------------------------------------------------------ test yourself */
.lqx details.lqx-test {
	margin: 1.6em 0;
	border: 1px solid #dddbfb;
	border-radius: var(--lqx-radius);
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(20, 19, 43, 0.04);
}
.lqx details.lqx-test > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.65em;
	padding: 0.85em 1.15em;
	font-weight: 750;
	color: var(--lqx-primary);
	background: linear-gradient(135deg, #f3f2ff 0%, #f7f2ff 100%);
	user-select: none;
	transition: background-color 0.15s ease;
}
.lqx details.lqx-test > summary:hover {
	background: #ecebff;
}
.lqx details.lqx-test > summary:focus-visible {
	outline: 3px solid rgba(89, 86, 233, 0.35);
	outline-offset: -3px;
}
.lqx details.lqx-test > summary::-webkit-details-marker {
	display: none;
}
.lqx details.lqx-test > summary::marker {
	content: "";
}
.lqx details.lqx-test > summary::before {
	content: "?";
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--lqx-primary);
	color: #fff;
	font-size: 0.85em;
	font-weight: 800;
}
.lqx details.lqx-test > summary::after {
	content: "";
	flex: none;
	margin-left: auto;
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.2s ease;
}
.lqx details.lqx-test[open] > summary {
	border-bottom: 1px solid #e6e4fb;
}
.lqx details.lqx-test[open] > summary::after {
	transform: translateY(0.1em) rotate(-135deg);
}
.lqx details.lqx-test > :not(summary) {
	margin-left: 1.15em;
	margin-right: 1.15em;
}
.lqx details.lqx-test > summary + * {
	margin-top: 1em;
}
.lqx details.lqx-test > :last-child {
	margin-bottom: 1.1em;
}
/* Question / answer pairs: "<p><strong>1.</strong> question</p><p>answer</p>" */
.lqx details.lqx-test > p:has(> strong:first-child) {
	margin-bottom: 0.3em;
	font-weight: 600;
}
.lqx details.lqx-test > p:has(> strong:first-child) + p:not(:has(> strong:first-child)) {
	padding: 0.5em 0.8em;
	border-left: 3px solid var(--lqx-case);
	border-radius: 0 8px 8px 0;
	background: #f0fbf9;
	font-size: 0.95em;
}

/* ------------------------------------------------------------------ figures */
.lqx-figure {
	margin: 1.6em 0;
	text-align: center;
}
.lqx-figure img, .lqx-figure svg {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}
.lqx-figure figcaption {
	margin-top: 0.5em;
	font-size: 0.88em;
	color: var(--lqx-muted);
}

/* Placeholder lessons (test fixtures only) */
.lqx-placeholder > p:last-child {
	color: var(--lqx-muted);
	font-style: italic;
}

/* ------------------------------------------------------------------ small screens */
@media (max-width: 640px) {
	.lqx {
		font-size: calc(var(--llqp-font, 17px) - 1px);
		line-height: 1.65;
	}
	.lqx h2 {
		font-size: 1.28em;
		margin-top: 1.6em;
	}
	.lqx h3 {
		font-size: 1.1em;
	}
	.lqx-goals, .lqx-case, .lqx-trap, .lqx-key, .lqx-tip, .lqx-calc, .lqx-recap {
		margin: 1.2em 0;
		padding: 0.85em 0.95em;
		border-radius: 12px;
	}
	.lqx-case, .lqx-trap, .lqx-key, .lqx-tip, .lqx-calc {
		border-left-width: 4px;
	}
	.lqx-calc p:not(.lqx-label) {
		padding: 0.55em 0.7em;
		font-size: 0.84em;
	}
	.lqx table {
		font-size: 0.86em;
	}
	/* Tables keep readable columns and scroll sideways inside their wrapper. */
	.lqx .lqx-scroll > table, div.lqx-table table {
		min-width: 520px;
	}
	.lqx > table.lqx-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.lqx th, .lqx td {
		padding: 0.5em 0.6em;
	}
	.lqx thead th {
		white-space: normal;
	}
	.lqx details.lqx-test > summary {
		padding: 0.8em 0.9em;
	}
	.lqx details.lqx-test > :not(summary) {
		margin-left: 0.9em;
		margin-right: 0.9em;
	}
}

/* ------------------------------------------------------------------ Tutor LMS compatibility
   Tutor 4 styles headings, paragraphs and lists of the lesson wrapper with (0,3,1) selectors
   (".tutor-lesson-content .tutor-lesson-wrapper h2", "p:not(:last-child)"…). The ":not(#lqx-id)"
   below adds ID weight so the lesson keeps its own typography inside any theme or Tutor version. */
.lqx > :first-child:not(#lqx-id) { margin-top: 0; }
.lqx :is(h2, h3, h4):not(#lqx-id) { font-family: inherit; line-height: 1.3; color: var(--lqx-ink); font-weight: 750; }
.lqx h2:not(#lqx-id) { font-size: 1.45em; margin: 1.9em 0 0.65em; }
.lqx h3:not(#lqx-id) { font-size: 1.16em; margin: 1.5em 0 0.5em; color: #2a2950; }
.lqx h4:not(#lqx-id) { font-size: 1.05em; margin: 1.3em 0 0.4em; }
.lqx p:not(#lqx-id) { margin: 0 0 1em; }
.lqx :is(ul, ol):not(#lqx-id) { list-style: revert; padding-inline-start: 1.35em; margin: 0 0 1em; }
.lqx .lqx-goals ul:not(#lqx-id) { list-style: none; padding-inline-start: 0; margin-bottom: 0; }
.lqx .lqx-label:not(#lqx-id) { margin: 0 0 0.45em; }
.lqx :is(.lqx-goals, .lqx-case, .lqx-trap, .lqx-key, .lqx-tip) p:not(.lqx-label):not(#lqx-id) { margin-bottom: 0.7em; }
.lqx .lqx-calc p:not(.lqx-label):not(#lqx-id) { margin: 0 0 0.6em; }
.lqx :is(.lqx-goals, .lqx-case, .lqx-trap, .lqx-key, .lqx-tip, .lqx-calc, .lqx-recap) > :last-child:not(#lqx-id) { margin-bottom: 0; }
.lqx .lqx-recap :is(h2, h3, h4):not(#lqx-id) { color: #fff; }
.lqx details.lqx-test > summary + *:not(#lqx-id) { margin-top: 1em; }
.lqx details.lqx-test > p:has(> strong:first-child):not(#lqx-id) { margin-bottom: 0.3em; }
.lqx details.lqx-test > :last-child:not(#lqx-id) { margin-bottom: 1.1em; }
@media (max-width: 640px) {
	.lqx h2:not(#lqx-id) { font-size: 1.28em; margin-top: 1.6em; }
	.lqx h3:not(#lqx-id) { font-size: 1.1em; }
}

@media print {
	.lqx details.lqx-test > :not(summary) {
		display: block;
	}
	.lqx-recap {
		background: #fff;
		color: #000;
		border: 1px solid #999;
	}
}