/* TS Exam frontend — scoped under .tsx-exam.
 *
 * Scoping contract: general text (body copy, stems) inherits the site's
 * font/color on purpose. Interactive CONTROLS (buttons, nav cells, inputs)
 * are fully explicit and double-class-scoped so theme/builder globals
 * (Elementor kits, theme.json element styles) cannot bleed into them.
 */

.tsx-exam {
	--tsx-primary: #0b6e4f;
	--tsx-primary-dark: #095c42;
	--tsx-border: #d5d9dd;
	--tsx-muted: #667079;
	--tsx-pass: #0b6e4f;
	--tsx-fail: #b3382d;
	--tsx-flag: #c78500;
	--tsx-control-text: #1d2327;
	--tsx-control-bg: #f6f7f7;
	/* Derived/overridable (Theme & Styling panel): */
	--tsx-bar: var(--tsx-primary);
	--tsx-heading: inherit;
	--tsx-right-accent: var(--tsx-pass);
	--tsx-wrong-accent: var(--tsx-fail);
	/* No max-width/background/padding here — the embedding Elementor
	   container controls page width and outer spacing. */
	font-size: 16px;
	line-height: 1.55;
}

.tsx-exam h2,
.tsx-exam h3,
.tsx-exam h4 {
	color: var(--tsx-heading);
}

.tsx-exam .tsx-note {
	color: var(--tsx-muted);
	font-size: 0.9em;
}

.tsx-exam .tsx-error {
	color: var(--tsx-fail);
	font-weight: 600;
}

/* Wrapper intentionally left unstyled — panel border/padding/background
   are controlled in Elementor on the embedding page. */

/* ---------- Buttons (hardened) ---------- */

.tsx-exam .tsx-btn {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid var(--tsx-border);
	border-radius: 6px;
	background: var(--tsx-control-bg);
	color: var(--tsx-control-text);
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	box-shadow: none;
	min-height: 0;
	width: auto;
}
.tsx-exam .tsx-btn:hover:not(:disabled) {
	background: #eef0f1;
	border-color: var(--tsx-border);
	color: var(--tsx-control-text);
}
.tsx-exam .tsx-btn:focus,
.tsx-exam .tsx-btn:focus-visible {
	outline: 2px solid var(--tsx-primary);
	outline-offset: 1px;
	box-shadow: none;
	color: var(--tsx-control-text);
	background: var(--tsx-control-bg);
}
.tsx-exam .tsx-btn:disabled {
	opacity: 0.45;
	cursor: default;
}
.tsx-exam .tsx-btn--primary,
.tsx-exam .tsx-btn--primary:focus,
.tsx-exam .tsx-btn--primary:focus-visible {
	background: var(--tsx-primary);
	border-color: var(--tsx-primary);
	color: #fff;
	font-weight: 600;
}
.tsx-exam .tsx-btn--primary:hover:not(:disabled) {
	background: var(--tsx-primary-dark);
	border-color: var(--tsx-primary-dark);
	color: #fff;
}

/* ---------- Intro / history ---------- */

.tsx-exam .tsx-intro {
	text-align: center;
}
/* Quiz title above the Start button. Font size/color are intentionally left
   to the theme/Elementor h2 styling — only the spacing below is set here. */
.tsx-exam .tsx-intro-title {
	margin-bottom: 24px;
}
/* Whitespace between the Start button and its subtext. */
.tsx-exam .tsx-intro-note {
	margin-top: 18px;
}
/* Previous-attempts section sits below the title + Start button. */
.tsx-exam .tsx-history {
	text-align: left;
	margin-top: 32px;
}
.tsx-exam .tsx-history h4 {
	margin: 0 0 8px;
}
.tsx-exam .tsx-history-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tsx-exam .tsx-history-list li {
	padding: 3px 0;
}
.tsx-exam .tsx-history-score {
	display: inline-block;
	min-width: 48px;
	font-weight: 700;
}
.tsx-exam .tsx-history-score.tsx-pass { color: var(--tsx-pass); }
.tsx-exam .tsx-history-score.tsx-fail { color: var(--tsx-fail); }
.tsx-exam .tsx-history-deltas {
	/* Own line, indented to align under the date (past the score column). */
	display: block;
	margin-left: 52px;
	color: var(--tsx-muted);
	font-size: 0.85em;
}

/* ---------- Exam header / timer ---------- */

.tsx-exam .tsx-exam-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding-bottom: 12px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--tsx-border);
}
.tsx-exam .tsx-quiz-title {
	margin: 0;
	font-size: 1.15em;
	line-height: 1.3;
	font-weight: 700;
}
.tsx-exam .tsx-timer {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}
.tsx-exam .tsx-timer-low {
	color: var(--tsx-fail);
}

/* ---------- Question ---------- */

.tsx-exam .tsx-question-meta {
	color: var(--tsx-muted);
	font-size: 0.9em;
	margin-bottom: 4px;
}
.tsx-exam .tsx-flagged-badge {
	color: var(--tsx-flag);
	font-weight: 600;
}
.tsx-exam .tsx-stem {
	margin: 4px 0 14px;
	font-size: 1.2em;
	line-height: 1.4;
}
.tsx-exam .tsx-options {
	display: grid;
	gap: 8px;
}
.tsx-exam .tsx-option {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid var(--tsx-border);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	font-weight: 400;
}
.tsx-exam .tsx-option:hover {
	border-color: var(--tsx-primary);
}
.tsx-exam .tsx-option:has(input:checked) {
	border-color: var(--tsx-primary);
	background: #f0f7f4;
}
.tsx-exam .tsx-option input[type="radio"],
.tsx-exam .tsx-option input[type="checkbox"] {
	margin: 0;
	flex: none;
	width: auto;
	accent-color: var(--tsx-primary);
}
.tsx-exam .tsx-option-letter {
	font-weight: 700;
	min-width: 1.2em;
}

/* ---------- Controls row ---------- */

.tsx-exam .tsx-controls {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 18px;
}
.tsx-exam .tsx-finish {
	margin-left: auto;
}
.tsx-exam .tsx-flag-toggle.tsx-flag-on {
	border-color: var(--tsx-flag);
	color: var(--tsx-flag);
	font-weight: 600;
}

/* ---------- Item navigator (hardened) ---------- */

.tsx-exam .tsx-nav-title {
	margin: 20px 0 8px;
}
.tsx-exam .tsx-navigator {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
	gap: 6px;
}
.tsx-exam .tsx-nav-cell {
	margin: 0;
	padding: 7px 0;
	border: 1px solid var(--tsx-border);
	border-radius: 6px;
	background: #fff;
	color: var(--tsx-control-text);
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
	text-shadow: none;
	box-shadow: none;
	min-height: 0;
	width: auto;
}
.tsx-exam .tsx-nav-cell:hover {
	border-color: var(--tsx-primary);
	background: #fff;
	color: var(--tsx-control-text);
}
.tsx-exam .tsx-nav-cell.is-answered {
	background: #e2efe9;
	border-color: #9ec8b5;
	color: var(--tsx-control-text);
}
.tsx-exam .tsx-nav-cell.is-flagged {
	box-shadow: inset 0 -3px 0 var(--tsx-flag);
}
.tsx-exam .tsx-nav-cell.is-current {
	border: 2px solid var(--tsx-primary);
	font-weight: 700;
}

/* ---------- Email gate ---------- */

.tsx-exam .tsx-email-gate {
	text-align: center;
	padding: 40px 24px;
}
.tsx-exam .tsx-email-form {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 16px;
}
.tsx-exam .tsx-email-input {
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--tsx-border);
	border-radius: 6px;
	background: #fff;
	color: var(--tsx-control-text);
	min-width: 260px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	box-shadow: none;
}
.tsx-exam .tsx-email-input:focus {
	outline: 2px solid var(--tsx-primary);
	outline-offset: 1px;
	border-color: var(--tsx-primary);
	box-shadow: none;
}
.tsx-exam .tsx-late-note {
	color: var(--tsx-fail);
	font-weight: 600;
}

/* ---------- Results ---------- */

.tsx-exam .tsx-score-card {
	text-align: center;
	padding: 24px;
	border-radius: 10px;
	margin-bottom: 24px;
	background: #f6f8f7;
}
.tsx-exam .tsx-score-card.tsx-fail {
	background: #faf3f2;
}
.tsx-exam .tsx-score-percent {
	font-size: 3em;
	font-weight: 800;
	line-height: 1.1;
}
.tsx-exam .tsx-score-card.tsx-pass .tsx-score-percent { color: var(--tsx-pass); }
.tsx-exam .tsx-score-card.tsx-fail .tsx-score-percent { color: var(--tsx-fail); }
.tsx-exam .tsx-score-verdict {
	font-weight: 700;
	letter-spacing: 0.06em;
}

.tsx-exam .tsx-result-advice {
	margin: 0 0 24px;
	padding: 14px 16px;
	border-left: 3px solid var(--tsx-primary);
	border-radius: 6px;
	background: #f6f8f7;
	color: var(--tsx-muted);
	font-size: 0.95em;
	line-height: 1.5;
}
.tsx-exam .tsx-result-advice p {
	margin: 0 0 8px;
}
.tsx-exam .tsx-result-advice p:last-child {
	margin-bottom: 0;
}

.tsx-exam .tsx-domains {
	display: grid;
	gap: 10px;
	margin: 12px 0 24px;
}
.tsx-exam .tsx-domain-row {
	display: grid;
	grid-template-columns: minmax(160px, 1fr) 2fr auto;
	gap: 12px;
	align-items: center;
}
.tsx-exam .tsx-domain-name {
	font-size: 0.95em;
}
.tsx-exam .tsx-domain-bar {
	height: 12px;
	border-radius: 6px;
	background: #edf0f2;
	overflow: hidden;
}
.tsx-exam .tsx-domain-fill {
	height: 100%;
	border-radius: 6px;
	background: var(--tsx-bar);
	min-width: 2px;
}
.tsx-exam .tsx-domain-nums {
	font-variant-numeric: tabular-nums;
	color: var(--tsx-muted);
	font-size: 0.9em;
	white-space: nowrap;
}

.tsx-exam .tsx-cta {
	text-align: center;
	border: 1px solid var(--tsx-border);
	border-radius: 10px;
	padding: 20px;
	margin: 0 0 24px;
	background: #f6f8f7;
}
.tsx-exam .tsx-cta h3 {
	margin: 0 0 6px;
}
.tsx-exam .tsx-cta .tsx-btn {
	margin-top: 20px;
}

/* ---------- Review list ---------- */

.tsx-exam .tsx-review {
	display: grid;
	gap: 8px;
}
.tsx-exam .tsx-review-item {
	border: 1px solid var(--tsx-border);
	border-radius: 8px;
	padding: 10px 14px 10px 18px;
}
.tsx-exam .tsx-review-item summary {
	cursor: pointer;
	font-weight: 600;
	/* Keep the disclosure arrow inside the padded box instead of hanging
	   into the card's border/padding area. */
	list-style-position: inside;
	padding: 2px 0;
}
/* Right/wrong color coding: accent edge + faint tint, theme-overridable. */
.tsx-exam .tsx-review-item.is-right {
	border-left: 4px solid var(--tsx-right-accent);
	background: #f2f9f5;
}
.tsx-exam .tsx-review-item.is-wrong {
	border-left: 4px solid var(--tsx-wrong-accent);
	background: #fcf4f3;
}
@supports (background: color-mix(in srgb, red 6%, white)) {
	.tsx-exam .tsx-review-item.is-right {
		background: color-mix(in srgb, var(--tsx-right-accent) 6%, #fff);
	}
	.tsx-exam .tsx-review-item.is-wrong {
		background: color-mix(in srgb, var(--tsx-wrong-accent) 6%, #fff);
	}
}
.tsx-exam .tsx-review-item.is-right .tsx-review-mark { color: var(--tsx-right-accent); }
.tsx-exam .tsx-review-item.is-wrong .tsx-review-mark { color: var(--tsx-wrong-accent); }
.tsx-exam .tsx-review-mark {
	display: inline-block;
	margin: 0 2px 0 4px;
	font-weight: 800;
}
.tsx-exam .tsx-review-body {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed var(--tsx-border);
}
.tsx-exam .tsx-explanation {
	background: #f6f8f7;
	border-radius: 6px;
	padding: 10px 12px;
	margin-top: 8px;
}

.tsx-exam .tsx-results-actions {
	margin-top: 28px;
}

@media (max-width: 600px) {
	.tsx-exam .tsx-domain-row { grid-template-columns: 1fr; gap: 4px; }
	.tsx-exam .tsx-finish { margin-left: 0; }
}