/**
 * The quiz player.
 *
 * DELIBERATELY UNDER-DESIGNED
 *
 * This sits inside whatever theme and Elementor template the page already has,
 * so it sets structure - spacing, hit areas, the states a student has to be
 * able to tell apart - and inherits everything else. No font stack, no brand
 * colour, no page-level layout. A stylesheet that imposed those would fight
 * the theme on every quiz page, and the theme would win in some places and not
 * others, which is worse than either.
 *
 * `currentColor` and transparency do most of the work, so the player follows
 * the theme into dark mode without knowing dark mode exists.
 *
 * THE STATES THAT MUST NOT RELY ON COLOUR ALONE
 *
 * Correct, wrong and unanswered are marked with a word as well as a colour -
 * the word is in the markup, not in a ::before - because roughly one man in
 * twelve cannot reliably tell the red from the green.
 */

.tg-quiz {
	margin: 1.5em 0;
}

.tg-quiz__notice,
.tg-quiz__expired {
	padding: 1em 1.25em;
	border-left: 3px solid currentColor;
	background: rgba(127, 127, 127, 0.08);
}

.tg-quiz__expired {
	margin-bottom: 1em;
	font-weight: 600;
}

/* -------------------------------------------------- header */

.tg-quiz__header {
	margin-bottom: 1.5em;
	padding-bottom: 0.75em;
	border-bottom: 1px solid rgba(127, 127, 127, 0.3);
}

.tg-quiz__title {
	margin: 0 0 0.4em;
}

.tg-quiz__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	align-items: baseline;
	justify-content: space-between;
}

.tg-quiz__clock-label {
	margin-right: 0.4em;
	opacity: 0.7;
}

.tg-quiz__clock-value {
	/* Tabular figures, so the countdown does not jitter as digits change. */
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.tg-quiz__negative {
	margin: 0.6em 0 0;
	font-size: 0.9em;
	opacity: 0.8;
}

/* -------------------------------------------------- questions */

.tg-quiz__questions {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tg-quiz__question {
	margin-bottom: 2em;
	padding: 1.25em;
	border: 1px solid rgba(127, 127, 127, 0.3);
	border-radius: 6px;

	/* A question that is wider than the page takes the whole layout with it,
	   and the student loses the right-hand end of every sentence rather than
	   just this one. */
	overflow-wrap: break-word;
}

/* Author-written bodies carry tables, wide images and preformatted blocks.
   Those scroll inside the question rather than stretching the page. */
.tg-quiz__question-text {
	max-width: 100%;
	overflow-x: auto;
}

.tg-quiz__question-text img,
.tg-quiz__option-text img {
	max-width: 100%;
	height: auto;
}

.tg-quiz__question-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75em;
	margin-bottom: 0.75em;
	font-size: 0.85em;
	opacity: 0.75;
}

.tg-quiz__number {
	font-weight: 700;
	opacity: 1;
}

.tg-quiz__question-title {
	margin: 0 0 0.5em;
	font-size: 1.05em;
}

.tg-quiz__instruction {
	margin: 0.75em 0;
	font-size: 0.9em;
	opacity: 0.75;
}

/* -------------------------------------------------- options */

.tg-quiz__options {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tg-quiz__option {
	display: flex;
	gap: 0.75em;
	align-items: flex-start;

	/* A whole-row hit area. On a phone, a label the width of its text is a
	   target a student misses under time pressure. */
	padding: 0.6em 0.75em;
	border-radius: 4px;
	cursor: pointer;
}

/**
 * NOT in the review, where background colour carries meaning.
 *
 * A green tint on an option means "this was the correct answer" there, and a
 * plain hover tint sat next to it looked like a second, dimmer verdict - a
 * student moving the mouse down the page lit up whichever option it passed
 * over. Caught on a real review screen: three of four options were tinted and
 * only one of the tints meant anything.
 */
.tg-quiz__options:not(.tg-quiz__options--review) .tg-quiz__option:hover {
	background: rgba(127, 127, 127, 0.08);
}

.tg-quiz__option input {
	margin-top: 0.25em;
	flex: 0 0 auto;
}

/**
 * A flex item defaults to min-width:auto, which means it refuses to shrink
 * below its content - so one long unbroken run of text pushes the whole card
 * wider than the page instead of wrapping. These questions are full sentences,
 * and some carry chemical formulae and URLs with no spaces to break at.
 */
.tg-quiz__option-text {
	min-width: 0;
	overflow-wrap: break-word;
}

.tg-quiz__option-text > :first-child {
	margin-top: 0;
}

.tg-quiz__option-text > :last-child {
	margin-bottom: 0;
}

.tg-quiz__clear {
	align-self: flex-start;
	margin-top: 0.4em;
	padding: 0.2em 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 0.85em;
	text-decoration: underline;
	cursor: pointer;
	opacity: 0.7;
}

.tg-quiz__hint {
	margin-top: 1em;
	font-size: 0.92em;
}

.tg-quiz__hint summary {
	cursor: pointer;
	opacity: 0.8;
}

/* -------------------------------------------------- saving */

.tg-quiz__save-state {
	min-height: 1.2em;
	margin: 0.75em 0 0;
	font-size: 0.85em;
	opacity: 0.7;
}

.tg-quiz__save-state--failed {
	font-weight: 600;
	opacity: 1;

	/* The one place a colour is asserted rather than inherited. "Not saved" is
	   the only message here a student must not skim past. */
	color: #b3261e;
}

/* -------------------------------------------------- buttons */

.tg-quiz__pager {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	align-items: center;
	margin-top: 1.5em;
}

.tg-quiz__button {
	padding: 0.65em 1.4em;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.tg-quiz__button:disabled {
	cursor: default;
	opacity: 0.5;
}

.tg-quiz__button--submit {
	margin-left: auto;
	font-weight: 700;
}

/* The one action on the intro screen, so it earns more weight than the
   plain outline every other button here uses. */
.tg-quiz__button--start {
	padding: 0.8em 1.8em;
	background: color-mix(in srgb, currentColor 12%, transparent);
	font-weight: 700;
}

.tg-quiz__button--start:hover,
.tg-quiz__button--start:focus-visible {
	background: color-mix(in srgb, currentColor 20%, transparent);
}

@supports not (color: color-mix(in srgb, currentColor 12%, transparent)) {
	.tg-quiz__button--start {
		background: rgba(127, 127, 127, 0.16);
	}

	.tg-quiz__button--start:hover,
	.tg-quiz__button--start:focus-visible {
		background: rgba(127, 127, 127, 0.26);
	}
}

/*
 * A CARD, WHERE THE REST OF THIS FILE MOSTLY USES BARE FLOW.
 *
 * Reported directly: the intro screen read as "very plain" - and it was
 * the one screen in the player with nothing to distinguish it as a
 * screen at all, just a title, a flex row of dim text and a button
 * sitting loose in the page. Everything below is still the same
 * currentColor/color-mix vocabulary the file docblock commits to - no
 * font, no brand colour - just used with more conviction: a bordered
 * surface, chips instead of a plain list, a filled button instead of an
 * outline.
 */
.tg-quiz__intro {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
	align-items: flex-start;
	padding: 1.75em;
	border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
	border-radius: 10px;
	background: color-mix(in srgb, currentColor 4%, transparent);
}

.tg-quiz__attempts {
	margin: 0;
	opacity: 0.8;
}

/*
 * Duration, question count and pass mark as chips, not a dim inline list -
 * the three numbers a student actually weighs before tapping Start deserve
 * to read as three distinct facts, not one sentence of grey text.
 */
.tg-quiz__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tg-quiz__meta li {
	padding: 0.4em 0.85em;
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 999px;
	font-size: 0.92em;
	font-weight: 600;
}

@supports not (color: color-mix(in srgb, currentColor 15%, transparent)) {
	.tg-quiz__intro {
		border-color: rgba(127, 127, 127, 0.3);
		background: rgba(127, 127, 127, 0.06);
	}

	.tg-quiz__meta li {
		border-color: rgba(127, 127, 127, 0.3);
	}
}

/* -------------------------------------------------- result and review */

.tg-quiz__result {
	padding: 1.5em;
	border: 1px solid rgba(127, 127, 127, 0.3);
	border-radius: 6px;
}

.tg-quiz__result-heading {
	margin-top: 0;
}

.tg-quiz__score {
	font-size: 1.3em;
	font-weight: 700;
}

.tg-quiz__counts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
	margin: 1em 0 1.5em;
	padding: 0;
	list-style: none;
}

.tg-quiz__verdict {
	font-weight: 700;
	opacity: 1;
}

.tg-quiz__awarded {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}

/* A left edge as well as the word, so the shape of the page tells the story
   when it is scrolled quickly. */
.tg-quiz__question--correct {
	border-left: 4px solid #1e8e3e;
}

.tg-quiz__question--wrong {
	border-left: 4px solid #b3261e;
}

.tg-quiz__question--blank {
	border-left: 4px solid rgba(127, 127, 127, 0.6);
}

.tg-quiz__options--review .tg-quiz__option {
	cursor: default;
}

.tg-quiz__option--key {
	background: rgba(30, 142, 62, 0.1);
}

.tg-quiz__option--picked {
	outline: 1px solid rgba(127, 127, 127, 0.5);
}

.tg-quiz__tag {
	margin: 0 0.5em;
	padding: 0.1em 0.5em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.75em;
	white-space: nowrap;
	opacity: 0.8;
}

/* A tag on its own line ("Your order") stays a pill, not a full-width box. */
p.tg-quiz__tag {
	width: fit-content;
	margin: 0.75em 0 0.25em;
}

.tg-quiz__explanation {
	margin-top: 1em;
	padding: 0.75em 1em;
	background: rgba(127, 127, 127, 0.08);
	border-radius: 4px;
}

.tg-quiz__explanation h4 {
	margin: 0 0 0.4em;
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
}

/* -------------------------------------------------- fill in the blanks */

.tg-quiz__cloze {
	line-height: 2.4;
}

.tg-quiz__gap {
	min-width: 8em;
	margin: 0 0.25em;
	padding: 0.2em 0.5em;
	border: 0;

	/* Underlined rather than boxed: a gap in a sentence reads as a gap, and a
	   text box mid-paragraph breaks the line the student is trying to read. */
	border-bottom: 2px solid currentColor;
	background: rgba(127, 127, 127, 0.08);
	color: inherit;
	font: inherit;
}

.tg-quiz__gaps {
	margin: 0.5em 0 0;
	padding-left: 1.5em;
}

.tg-quiz__gap-review {
	margin-bottom: 0.4em;
}

.tg-quiz__gap-given {
	font-weight: 600;
}

.tg-quiz__gap-review--wrong .tg-quiz__gap-given {
	text-decoration: line-through;
	opacity: 0.7;
}

.tg-quiz__gap-accepted {
	font-weight: 600;
}

/* -------------------------------------------------- free-answer questions */

.tg-quiz__free-text {
	margin: 0.5em 0 0;
}

.tg-quiz__free-input {
	width: 100%;
	max-width: 28em;
	box-sizing: border-box;
	padding: 0.5em 0.75em;
	border: 0;

	/* Same underlined treatment as .tg-quiz__gap - a plain, low-key field
	   that reads as "type here" without competing with the choice options
	   drawn for other question types on the same paper. */
	border-bottom: 2px solid currentColor;
	background: rgba(127, 127, 127, 0.08);
	color: inherit;
	font: inherit;
}

.tg-quiz__free-answer-review {
	margin: 0.5em 0 0;
}

.tg-quiz__free-answer-row {
	margin-bottom: 0.4em;
}

.tg-quiz__free-answer-given {
	font-weight: 600;
}

.tg-quiz__free-answer-row--wrong .tg-quiz__free-answer-given {
	text-decoration: line-through;
	opacity: 0.7;
}

.tg-quiz__free-answer-accepted {
	font-weight: 600;
}

/* -------------------------------------------------- reporting a question */

/*
 * "Report a problem with this question", inside the review.
 *
 * Same restraint as the lesson-page equivalent in feedback.css: collapsed,
 * understated, and no colour of its own. This exists for the small minority
 * of questions that are actually wrong, and drawn as loudly as the answer key
 * beside it, it would suggest most of them are.
 */
.tg-quiz__report {
	margin: 1em 0 0;
	font-size: 0.9em;
}

.tg-quiz__report-summary {
	display: inline-block;
	cursor: pointer;
	opacity: 0.65;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.tg-quiz__report-summary:hover {
	opacity: 1;
}

.tg-quiz__report-form {
	display: grid;
	gap: 0.4em;
	margin: 0.75em 0 0;
	padding: 1em;
	border: 1px solid rgba(127, 127, 127, 0.35);
	border-radius: 8px;
}

.tg-quiz__report-label {
	font-weight: 600;
}

.tg-quiz__report-label + * {
	margin-bottom: 0.6em;
}

.tg-quiz__report-reason,
.tg-quiz__report-comment {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	font: inherit;
	color: inherit;
}

.tg-quiz__report-comment {
	padding: 0.5em;
	border: 1px solid rgba(127, 127, 127, 0.4);
	border-radius: 6px;
	background: rgba(127, 127, 127, 0.06);
}

/* The send button, in the player's own button language rather than a new one. */
.tg-quiz__button--report {
	justify-self: start;
}

/*
 * What happened, in the one place a student is looking.
 *
 * role="status" is on this element in the markup, so a screen reader
 * announces the outcome without the focus moving - the student is mid-review
 * and being thrown back to the top of a fifty-question page would cost them
 * their place.
 */
.tg-quiz__report-status:empty {
	display: none;
}

.tg-quiz__report-status {
	margin: 0.6em 0 0;
	padding-left: 0.7em;
	border-left: 3px solid rgba(127, 127, 127, 0.4);
}

.tg-quiz__report-status--ok,
.tg-quiz__report-status--failed {
	font-weight: 600;
}

.tg-quiz__report-status--ok {
	border-left-color: currentColor;
}

/* A section heading over its questions (Player.prototype.draw). */
.tg-quiz__section {
	margin: 1.5em 0 0.5em;
	padding-bottom: 0.35em;
	border-bottom: 1px solid currentColor;
	font-size: 1.05em;
	opacity: 0.85;
}

/* ------------------------------------------------------------------
   Essay, sorting, matching (quiz-player.js essayBox/sorter/matcher)
   ------------------------------------------------------------------ */

.tg-quiz__essay-input {
	box-sizing: border-box;
	width: 100%;
	min-height: 10em;
	padding: 0.6em 0.75em;
	font: inherit;
}

.tg-quiz__sort {
	margin: 0.5em 0;
	padding-left: 1.5em;
}

.tg-quiz__sort-item {
	display: flex;
	gap: 0.5em;
	align-items: center;
	margin: 0.35em 0;
	padding: 0.5em 0.75em;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
}

.tg-quiz__sort-text {
	flex: 1 1 auto;
}

.tg-quiz__sort-up,
.tg-quiz__sort-down {
	flex: none;
	/* A comfortable tap target even where the theme sets small button text. */
	min-width: max(2.25em, 44px);
	min-height: max(2.25em, 44px);
	cursor: pointer;
}

.tg-quiz__match-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	align-items: center;
	margin: 0.5em 0;
}

.tg-quiz__match-item {
	flex: 1 1 12em;
}

.tg-quiz__match-row select {
	flex: 1 1 12em;
	max-width: 100%;
	min-height: 2.25em;
}

.tg-quiz__sort-review {
	display: flex;
	flex-wrap: wrap;
	gap: 1em 2em;
}

.tg-quiz__sort-column {
	flex: 1 1 14em;
}

.tg-quiz__match-review {
	margin: 0.5em 0;
	padding: 0;
	list-style: none;
}

.tg-quiz__match-pair {
	margin: 0.35em 0;
}

.tg-quiz__match-pair.is-wrong .tg-quiz__match-given {
	text-decoration: line-through;
}

.tg-quiz__essay-given {
	white-space: pre-wrap;
}

.tg-quiz__pending {
	font-style: italic;
}

/* ------------------------------------------------------------------
   After the paper: where to go next
   ------------------------------------------------------------------ */

.tg-quiz__passmark {
	margin: -0.5em 0 1em;
	opacity: 0.75;
}

.tg-quiz__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	align-items: stretch;
}

/* A link in the player's own button language, so "Next lesson" and
   "Retake" read as the same kind of control as "Review answers". */
a.tg-quiz__button {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	text-decoration: none;
}

a.tg-quiz__button:hover,
a.tg-quiz__button:focus-visible {
	background: color-mix(in srgb, currentColor 10%, transparent);
}

.tg-quiz__button--next-step {
	font-weight: 700;
	max-width: 100%;
}

.tg-quiz__link-label {
	font-size: 0.75em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: 0.75;
}

.tg-quiz__link-title {
	overflow-wrap: anywhere;
}

.tg-quiz__result:focus,
.tg-quiz h2:focus {
	outline: none;
}

/* ------------------------------------------------------------------
   Submit confirmation (a native <dialog>)
   ------------------------------------------------------------------ */

.tg-quiz__dialog {
	box-sizing: border-box;
	width: min(28em, 92vw);
	padding: 1.5em;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 10px;
}

.tg-quiz__dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.tg-quiz__dialog-heading {
	margin: 0 0 0.75em;
}

.tg-quiz__dialog-line {
	margin: 0 0 0.6em;
}

/* Said in words, not only in colour - the sentence itself is the warning. */
.tg-quiz__dialog-line--warn {
	font-weight: 700;
}

.tg-quiz__dialog-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	justify-content: flex-end;
	margin-top: 1.25em;
}

.tg-quiz__button--submit-now {
	font-weight: 700;
}

/* ------------------------------------------------------------------
   Status bar: answered count and clock, kept in view while scrolling
   ------------------------------------------------------------------ */

.tg-quiz__header {
	margin-bottom: 0;
	padding-bottom: 0.5em;
	border-bottom: 0;
}

.tg-quiz__status {
	position: sticky;

	/* Below a fixed theme header or the WordPress admin bar. A theme with a
	   taller sticky header sets --tg-quiz-sticky-top on .tg-quiz. */
	top: var(--tg-quiz-sticky-top, 0);
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 1em;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 1.5em;
	padding: 0.6em 0;
	background: Canvas;
	color: CanvasText;
	border-bottom: 1px solid rgba(127, 127, 127, 0.3);
}

.admin-bar .tg-quiz__status {
	top: var(--tg-quiz-sticky-top, 32px);
}

@media (max-width: 782px) {
	.admin-bar .tg-quiz__status {
		top: var(--tg-quiz-sticky-top, 46px);
	}
}

/* Five minutes left, then one: a heavier weight and a marker besides the
   colour, so the change is not carried by red alone. */
.tg-quiz__clock--low .tg-quiz__clock-value {
	color: #b3261e;
}

.tg-quiz__clock--low .tg-quiz__clock-label::before {
	content: "\26A0\FE0E  ";
}

.tg-quiz__clock--critical .tg-quiz__clock-value {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Read by a screen reader, never drawn. */
.tg-quiz__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------
   A chosen answer has to LOOK chosen
   ------------------------------------------------------------------ */

.tg-quiz__options:not(.tg-quiz__options--review) .tg-quiz__option input {
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.2em;
	accent-color: currentColor;
}

.tg-quiz__options:not(.tg-quiz__options--review) .tg-quiz__option:has(input:checked) {
	background: color-mix(in srgb, currentColor 10%, transparent);
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.tg-quiz__option:has(input:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Accent layer
   ---------------------------------------------------------------
   One accent colour, taken from the theme where it declares one.
   Resolution order:
     1. --tg-brand, set by a site owner on :root (or any ancestor)
     2. the theme's --wp--preset--color--primary
     3. a neutral blue
   To go back to the plain, colour-free look this stylesheet used to have,
   set  --tg-accent: currentColor;  on :root. :where() keeps every rule here
   at zero specificity so a theme or Customizer rule always wins. */

:where(.tg-course-page, .tg-catalog, .tg-step-chrome, .tg-step-sticky, .tg-quiz, .tg-profile, .tg-locked) {
	--tg-accent: var(--tg-brand, var(--wp--preset--color--primary, #2563eb));
	--tg-on-accent: var(--tg-brand-contrast, #fff);
	--tg-ok: #1e8e3e;
	--tg-danger: #b3261e;
	--tg-radius: 10px;
	/* An add-on can set --tg-font; unset, the theme's own font is kept. */
	font-family: var(--tg-font, inherit);
	/* For TEXT: pulled toward the theme's own text colour, so it keeps its
	   contrast on a light theme and a dark one without detecting either. */
	--tg-accent-text: color-mix(in srgb, var(--tg-accent) 70%, currentColor);
	--tg-ok-text: color-mix(in srgb, var(--tg-ok) 65%, currentColor);
	--tg-danger-text: color-mix(in srgb, var(--tg-danger) 65%, currentColor);
}


/* Primary actions, results and chosen answers */

.tg-quiz__button--start,
.tg-quiz__button--submit-now,
.tg-quiz__button--next-step {
	border-color: transparent;
	background: var(--tg-accent);
	color: var(--tg-on-accent);
	font-weight: 700;
}

.tg-quiz__button--start:hover,
.tg-quiz__button--start:focus-visible,
.tg-quiz__button--submit-now:hover,
.tg-quiz__button--submit-now:focus-visible,
a.tg-quiz__button--next-step:hover,
a.tg-quiz__button--next-step:focus-visible {
	background: var(--tg-accent);
	color: var(--tg-on-accent);
	filter: brightness(1.1);
}

.tg-quiz__button--next-step .tg-quiz__link-label {
	opacity: 0.85;
}

.tg-quiz__button:focus-visible,
.tg-quiz__clear:focus-visible {
	outline: 2px solid var(--tg-accent);
	outline-offset: 2px;
}

.tg-quiz__intro {
	border-top: 4px solid var(--tg-accent);
}

.tg-quiz__result {
	border-top: 4px solid var(--tg-danger);
	border-radius: var(--tg-radius);
}

.tg-quiz__result--pass {
	border-top-color: var(--tg-ok);
}

.tg-quiz__result--pass .tg-quiz__result-heading {
	color: var(--tg-ok-text);
}

.tg-quiz__result--fail .tg-quiz__result-heading {
	color: var(--tg-danger-text);
}

.tg-quiz__count--correct {
	color: var(--tg-ok-text);
}

.tg-quiz__count--wrong {
	color: var(--tg-danger-text);
}

.tg-quiz__question {
	border-radius: var(--tg-radius);
}

.tg-quiz__options:not(.tg-quiz__options--review) .tg-quiz__option:has(input:checked) {
	background: color-mix(in srgb, var(--tg-accent) 12%, transparent);
	outline-color: var(--tg-accent);
}

.tg-quiz__options:not(.tg-quiz__options--review) .tg-quiz__option input {
	accent-color: var(--tg-accent);
}

.tg-quiz__option:has(input:focus-visible),
.tg-quiz__gap:focus-visible,
.tg-quiz__free-input:focus-visible {
	outline-color: var(--tg-accent);
}

.tg-quiz__status {
	border-bottom-color: color-mix(in srgb, var(--tg-accent) 35%, transparent);
}

.tg-quiz__question--correct {
	border-left-color: var(--tg-ok);
}

.tg-quiz__question--wrong {
	border-left-color: var(--tg-danger);
}

.tg-quiz__negative-note {
	margin: 0;
	padding: 0.4em 0.85em;
	border-left: 3px solid var(--tg-danger);
	background: color-mix(in srgb, var(--tg-danger) 8%, transparent);
	border-radius: 0 6px 6px 0;
	font-size: 0.92em;
}

/* ------------------------------------------------------------------
   Question palette and flags
   ------------------------------------------------------------------ */

.tg-quiz__question {
	/* Room for the sticky status bar when a palette jump scrolls here. */
	scroll-margin-top: 5.5em;
}

.tg-quiz__palette {
	margin: 0 0 1.25em;
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	border-radius: var(--tg-radius, 10px);
	padding: 0.5em 0.9em;
}

.tg-quiz__palette-summary {
	cursor: pointer;
	font-weight: 600;
}

.tg-quiz__palette-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-top: 0.75em;
}

.tg-quiz__pal {
	position: relative;
	box-sizing: border-box;
	min-width: 2.4em;
	min-height: 2.4em;
	padding: 0.2em 0.5em;
	border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
	border-radius: 6px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.9em;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.tg-quiz__pal.is-answered {
	background: color-mix(in srgb, var(--tg-accent, currentColor) 18%, transparent);
	border-color: var(--tg-accent, currentColor);
	font-weight: 700;
}

/* A flag mark in the corner: shape, not colour. */
.tg-quiz__pal.is-flagged::after {
	content: "";
	position: absolute;
	top: -1px;
	right: -1px;
	border-style: solid;
	border-width: 0 0.85em 0.85em 0;
	border-color: transparent currentColor transparent transparent;
	border-top-right-radius: 5px;
}

.tg-quiz__pal[aria-current="true"] {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.tg-quiz__pal:focus-visible {
	outline: 2px solid var(--tg-accent, currentColor);
	outline-offset: 2px;
}

.tg-quiz__palette-key {
	margin: 0.75em 0 0;
	font-size: 0.82em;
	opacity: 0.75;
}

.tg-quiz__flag {
	margin-left: auto;
	padding: 0.15em 0.7em;
	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 999px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.9em;
	cursor: pointer;
}

.tg-quiz__flag::before {
	content: "\2690\00a0";
}

.tg-quiz__flag.is-flagged {
	font-weight: 700;
	border-color: currentColor;
	background: color-mix(in srgb, var(--tg-accent, currentColor) 14%, transparent);
}

.tg-quiz__flag.is-flagged::before {
	content: "\2691\00a0";
}

.tg-quiz__flag:focus-visible {
	outline: 2px solid var(--tg-accent, currentColor);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Reading aids, essay counter, review filters, section scores
   ------------------------------------------------------------------ */

.tg-quiz {
	font-size: calc(1em * var(--tg-quiz-scale, 1));
}

.tg-quiz__tools {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	align-items: center;
	margin-top: 0.75em;
	padding-top: 0.75em;
	border-top: 1px dashed color-mix(in srgb, currentColor 25%, transparent);
}

.tg-quiz__tool,
.tg-quiz__filter {
	padding: 0.3em 0.8em;
	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 999px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.88em;
	cursor: pointer;
}

.tg-quiz__tool[aria-pressed="true"],
.tg-quiz__filter[aria-pressed="true"] {
	border-color: var(--tg-accent, currentColor);
	background: color-mix(in srgb, var(--tg-accent, currentColor) 16%, transparent);
	font-weight: 700;
}

.tg-quiz__filter:disabled {
	opacity: 0.45;
	cursor: default;
}

.tg-quiz__tool:focus-visible,
.tg-quiz__filter:focus-visible {
	outline: 2px solid var(--tg-accent, currentColor);
	outline-offset: 2px;
}

.tg-quiz__shortcuts {
	flex: 1 1 100%;
	margin: 0.25em 0 0;
	font-size: 0.8em;
	opacity: 0.75;
}

.tg-quiz__word-count {
	margin: 0.3em 0 0;
	font-size: 0.85em;
	opacity: 0.75;
}

.tg-quiz__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin: 0 0 1em;
}

.tg-quiz__sections {
	margin: 0 0 1.5em;
}

.tg-quiz__sections-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tg-quiz__section-row {
	display: grid;
	grid-template-columns: minmax(7em, 1fr) minmax(5em, 2fr) auto;
	gap: 0.75em;
	align-items: center;
	padding: 0.35em 0;
}

.tg-quiz__section-bar {
	height: 0.55em;
	border-radius: 999px;
	background: color-mix(in srgb, currentColor 12%, transparent);
	overflow: hidden;
}

.tg-quiz__section-fill {
	display: block;
	height: 100%;
	background: var(--tg-accent, currentColor);
}

.tg-quiz__section-score {
	font-variant-numeric: tabular-nums;
	font-size: 0.9em;
}

@media (max-width: 520px) {
	.tg-quiz__section-row {
		grid-template-columns: 1fr auto;
	}

	.tg-quiz__section-bar {
		grid-column: 1 / -1;
		order: 3;
	}
}

/* High contrast: the player alone, not the site. Text goes full strength, the
   dimmed helper text loses its fade, and every edge gets a solid line. */
.tg-quiz--contrast {
	padding: 1em;
	background: #fff;
	color: #000;
	border: 2px solid #000;
}

.tg-quiz--contrast *,
.tg-quiz--contrast *::before,
.tg-quiz--contrast *::after {
	opacity: 1 !important;
}

.tg-quiz--contrast :is(.tg-quiz__question, .tg-quiz__option, .tg-quiz__palette, .tg-quiz__pal, .tg-quiz__button, .tg-quiz__tool, .tg-quiz__filter, .tg-quiz__flag, .tg-quiz__result, .tg-quiz__intro) {
	border-color: #000 !important;
}

.tg-quiz--contrast .tg-quiz__option:has(input:checked) {
	background: #000 !important;
	color: #fff !important;
}

.tg-quiz--contrast :is(.tg-quiz__button--start, .tg-quiz__button--submit-now, .tg-quiz__button--next-step) {
	background: #000;
	color: #fff;
}

.tg-quiz--contrast a {
	color: #00008b;
	text-decoration: underline;
}

/* Focus mode: the site's own header, footer and menus step aside while a
   paper is being sat. Anything that contains the player stays. */
body.tg-quiz-focus :is(header, footer, aside, nav, #wpadminbar, .site-header, .site-footer):not(:has(.tg-quiz)) {
	display: none !important;
}

body.tg-quiz-focus .tg-quiz__status {
	top: 0 !important;
}

html:has(body.tg-quiz-focus) {
	margin-top: 0 !important;
}

/* ------------------------------------------------------------------
   Tiles: the facts before a quiz, the result, and the review
   ------------------------------------------------------------------ */

/* Question count, time and pass mark as three tiles, not a row of pills. */
.tg-quiz__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0.75rem;
	width: 100%;
}

.tg-quiz__meta li {
	padding: 0.9em 1em;
	border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	border-radius: var(--tg-radius);
	background: color-mix(in srgb, currentColor 3%, transparent);
	font-size: 1em;
	text-align: center;
}

/* The score, then the three counts as tiles. */
.tg-quiz__counts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: 0.75rem;
}

.tg-quiz__count {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2em;
	padding: 0.9em 0.5em;
	border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	border-top-width: 3px;
	border-radius: var(--tg-radius);
	background: color-mix(in srgb, currentColor 3%, transparent);
}

.tg-quiz__count-value {
	font-size: 1.8em;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.tg-quiz__count-label {
	font-size: 0.85em;
	font-weight: 600;
	opacity: 0.85;
}

.tg-quiz__count--correct {
	border-top-color: var(--tg-ok);
}

.tg-quiz__count--wrong {
	border-top-color: var(--tg-danger);
}

.tg-quiz__count--blank {
	border-top-color: color-mix(in srgb, currentColor 35%, transparent);
}

/* Review: each question is a card with a soft surface. */
.tg-quiz__question {
	background: color-mix(in srgb, currentColor 2.5%, transparent);
}

.tg-quiz__score {
	font-size: 1.6em;
}

/* A reading passage shared by several questions, above each of them. */
.tg-quiz__passage {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid currentColor;
	border-radius: 6px;
	background: rgba(127, 127, 127, 0.08);
}

.tg-quiz__passage-title {
	cursor: pointer;
	font-weight: 600;
}

.tg-quiz__passage-text {
	max-width: 100%;
	max-height: 24rem;
	margin-top: 0.5rem;
	overflow: auto;
}

.tg-quiz__passage-text img {
	max-width: 100%;
	height: auto;
}