/**
 * 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-left: 0.5em;
	padding: 0.1em 0.5em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.75em;
	white-space: nowrap;
	opacity: 0.8;
}

.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;
}

/* -------------------------------------------------- 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;
}