/* ===========================================================================
   lg.quiz — the questions under a reading or listening text
   ---------------------------------------------------------------------------
   The quiz head ("Did you understand the text?  2 / 6"), the progress strip,
   one question with its number in a circle, the four options as pills, and
   the marks an answered option gets. Built for the reading text and shared
   with the listening exercise, whose questions now print the same markup.

   Where the questions sit - a column beside the text, two columns under the
   player, a bottom sheet on a phone - is each page's own file:
   lg.reading-text.css and lg.listening-text.css. This is how they look.

   SCOPE. Every rule is under
       :is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz)
   which is exactly as specific as the .exercise-reading .lg-read__quiz the
   rules were written with - :is() takes its most specific argument. The
   overrides in lg.reading-text.css were written against that weight, and
   they still win because that file loads after this one.
   =========================================================================== */

/* --- The quiz head ------------------------------------------------------- */
.lg-read__quiz-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 0.75rem;
}

/* Caps and letterspaced, the eyebrow treatment: it labels the column rather
   than introducing a section, and at heading weight it would compete with the
   text's own title across the gap. */
.lg-read__quiz-title {
	margin: 0;
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.lg-read__quiz-count {
	flex: 0 0 auto;
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}

/* --- The progress strip -------------------------------------------------- */
/* One segment per question, equal widths, filling as they are answered. The
   same device as the grammar sheet's stepper; the colours are the same two the
   exercise strip uses, so a right answer looks the same in both sections. */
.lg-read__steps {
	display: flex;
	gap: 0.3rem;
	margin: 0 0 1.75rem;
}

.lg-read__step {
	flex: 1 1 0;
	height: 4px;
	border-radius: 999px;
	background-color: var(--lg-score-ring-track);
	transition: background-color 0.2s ease;
}

.lg-read__step--correct {
	background-color: var(--lg-score);
}

/* Not red. A wrong answer here is three pixels of history, and an alarm colour
   in a row of six shouts about a question the reader has already seen the
   answer to. Same value, same reasoning, as the grammar strip. */
.lg-read__step--wrong {
	background-color: var(--lg-answer-wrong);
}

/* --- One question -------------------------------------------------------- */
/* The number and the question on one line, as the drawing has them: "1" in a
   soft circle, then the question in the heading face. a.css floats and sizes
   .question-number as a standalone label above the text. */
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .question-number {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;

	/* Centre the circle on the QUESTION's first line, not on the block. The
	   two numbers in the sum are .question's font-size and line-height just
	   below; the third is this circle's own height. Written out rather than
	   guessed at, so that changing the question type here forces the same
	   edit. em would not do: it would resolve against 0.85rem, this
	   element's size, not the question's. */
	margin: calc((1.05rem * 1.35 - 1.75rem) / 2) 0 0;
	padding: 0;
	border-radius: 50%;
	background-color: var(--lg-surface-alt);
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
	float: none;
}

/* flex:1 1 0 with min-width:0 is what keeps a long question ON the number's
   row. Left at the default flex:0 1 auto, a block flex item asks for its
   max-content width - the whole question as one unbroken line - and
   flex-wrap:wrap answers that by dropping it to a line of its own rather than
   shrinking it, which is why the number was left stranded above.

   Sized from zero instead, it takes the space the number leaves and breaks
   inside itself. Because every line then starts at this box's left edge, the
   second line lands under the first WORD and not under the numeral: the
   hanging indent comes free from the flex row, with no text-indent to keep in
   step with the circle's width. */
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .question {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
}

/* The row the two share. .question-number is printed before .question and
   neither is wrapped, so the row is made here with a flex container on the
   question box and the rest of its children pushed onto their own lines.

   Why not wrap them in the PHP: the same two elements are printed for
   listening, and a wrapper would have to be added there too for no gain. */
/* border:0 because a.css:1671 gives .question-box a 3px dotted top border and
   10px of padding above and below it. That was the separator between questions
   back when they sat two abreast with nothing else between them; the column
   now has its own hairline on .exercise-box, and two rules drawing the same
   line one padding apart is what made the list look ruled twice. */
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .question-box {
	display: flex;
	flex-wrap: wrap;
	/* flex-start, not center: once the question runs to two lines, centring
	   would float the numeral down beside the middle of the block. It belongs
	   against the first line - see the offset on .question-number. */
	align-items: flex-start;
	column-gap: 0.6rem;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--lg-border);
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}

/* A question answered on an EARLIER visit sits back. The class is written by
   the server and only by the server (reading-listening.php, where
   .question-box is opened), so a question answered in front of you keeps its
   full weight and only the ones you are returning to are dimmed - which is
   the whole point of the distinction.

   On the box rather than its parts, so the number, the question and the marked
   options recede together. The inline opacity the closed options already carry
   multiplies with this, which is why the figure is 0.72 and not the 0.6 those
   use: two thirds of six tenths is too faint to read a past answer off.

   Restored on hover and on focus-within, because dimmed is meant to mean "not
   what you are working on", not "no longer legible" - the answer you gave last
   time is often exactly what you came back to look at. focus-within carries
   that to the keyboard, where there is no hover to give. */
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .question-box.lg-read__q--restored {
	opacity: 0.72;
	transition: opacity 0.15s ease;
}

:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .question-box.lg-read__q--restored:hover,
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .question-box.lg-read__q--restored:focus-within {
	opacity: 1;
}

:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .question-box > .answers,
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .question-box > div[id^="result"],
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .question-box > .error-report {
	flex: 0 0 100%;
}

/* --- The options --------------------------------------------------------- */
/* Two per row, pill-shaped, with the letter in its own circle. a.css lays
   .answers out as a table and .answer as a table-cell; all of that has to be
   undone before the grid can take over. */
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .answers,
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .answers.long-answers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
	width: auto;
	margin: 0.9rem 0 0;
	padding: 0;
}

:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .answers-row {
	display: contents;
}

/* a.css:2007 puts .answer in with .button: a 3px #E8E8E8 border, an 8px
   radius, right and bottom margins, and

       background: linear-gradient(to bottom, white 0%, white 20%, #F3F3F3 100%);

   That last one is why background-color alone was not enough. The shorthand
   sets background-IMAGE, and a gradient is an image - so setting only the
   colour leaves the gradient painting on top of it and the pill still looks
   like a 2014 button. background-image:none is the line that actually removes
   it.

   box-shadow too, from the rule just above that one. Every property listed
   here is undoing something rather than choosing it, except the radius and the
   flex row. */
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .answer {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--lg-border);
	/* A pill on one line, the SAME corners on two or three.

	   999px rounds to half of whatever the height is, so a wrapped answer
	   turned into a lozenge with half-circle ends. This is half of the
	   ONE-LINE height instead, fixed: the 1.6rem letter badge (taller than a
	   line of text) + the 0.75rem padding top and bottom + the 1px borders.
	   On one line that is exactly a pill; on more lines the corners stay that
	   size and the sides run straight.

	   Change it with the badge size or the padding above - the three numbers
	   are the ones in this calc(). */
	border-radius: calc((1.6rem + 1.5rem) / 2 + 1px);
	background-color: var(--lg-surface);
	background-image: none;
	box-shadow: none;
	color: var(--lg-text);
	font-family: var(--lg-font);
	font-size: 0.95rem;
	line-height: 1.3;
	text-align: left;
	vertical-align: baseline;
	/* opacity: a wrong answer fades back and the right one comes up to full
	   strength when the correction is shown - see the answer handler. */
	transition: border-color 0.15s ease, background-color 0.15s ease, opacity 0.3s ease;
}

:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .answer.active-answer {
	cursor: pointer;
}

/* a.css:2112 sets .active-answer:hover to a 3px border, which would make the
   pill jump by two pixels on hover; the border-WIDTH has to stay put and only
   the colour change. The same rule darkens .mc_number on hover, which is kept -
   it is the one bit of that block worth having. */
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .answer.active-answer:hover {
	border: 1px solid var(--lg-border-strong);
	box-shadow: 0 2px 6px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.08);
}

:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .answer.active-answer:hover > .mc_number {
	background-color: var(--lg-surface-alt);
	color: var(--lg-text);
}

/* The a/b/c/d marker. a.css draws .mc_number as a coral-bordered box; here it
   is the same soft circle as the question number, so the two read as one
   family of markers rather than as a label and a button. */
/* a.css:2561 gives it negative margins, a fixed 22px box and line-height, and
   vertical-align:middle - all of which are for an inline marker sitting in a
   line of text. Here it is a flex item in a row, so the alignment comes from
   the row and every one of those has to be unset or the letter sits three
   pixels high with a hole to its left. */
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .mc_number {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--lg-surface-alt);
	background-image: none;
	color: var(--lg-text-muted);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
	vertical-align: baseline;
}

/* The tick or cross that replaces the letter once answered. Sized to the
   circle it stands in place of, so the row does not jump. */
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .answer .mc_icon {
	flex: 0 0 auto;
	width: 1.6rem;
	height: auto;
	margin: 0;
	vertical-align: baseline;
}

/* --- An answered question ------------------------------------------------ */
/* THE GRAMMAR SHEET'S MARKS, exactly. Every rule below is
   lg.exercise-mc.css's, re-scoped: same tokens, same disc, same SVGs, same
   filename test. A reader answering a question should not be able to tell
   which section they are in from the way it is marked.

   HOW CORRECT AND WRONG ARE TOLD APART

   The only thing separating them in the DOM is the image FILENAME - the PHP
   and the click handler both prepend correct.png or wrong.png. So:

       .answer:has(.mc_icon[src*="correct"])

   :has() is what makes this work without touching either, and it works
   identically for a freshly clicked answer and for one restored on reload,
   because both paths now produce the same tag. That is why the PHP was changed
   to emit the grammar sheet's <img> rather than something of its own.

   Without :has() the whole block is dropped and an answered option keeps the
   inline opacity the PHP sets - dimmed and unmarked, which is legible rather
   than broken. */

/* The PNG is hidden and the mark redrawn as a disc. The files are transparent
   art at a different weight to this design, and no combination of object-fit
   and background turns a transparent PNG into a filled circle. */
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .answer .mc_icon {
	display: none;
}

/* ::before is the option's first child, and the script prepends the image as
   the first child too - so the mark lands where the letter was and the text
   does not shift when one replaces the other. Sized to .mc_number, which it
   stands in place of. */
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .answer:has(.mc_icon)::before {
	content: "";
	flex: 0 0 auto;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.85rem 0.85rem;
	text-decoration: none;
}

/* Correct: a white tick on the site's green. */
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .answer:has(.mc_icon[src*="correct"])::before {
	background-color: var(--lg-ok-text);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

/* Wrong: a white cross on the error red. */
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .answer:has(.mc_icon[src*="wrong"])::before {
	background-color: var(--lg-bad-text);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

/* The pill behind the mark. */
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .answer:has(.mc_icon[src*="correct"]) {
	border-color: var(--lg-ok-text);
	background-color: var(--lg-ok-bg);
	opacity: 1;
}

:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .answer:has(.mc_icon[src*="wrong"]) {
	border-color: var(--lg-bad-text);
	background-color: var(--lg-bad-bg);
	opacity: 1;
}

/* Everything not picked, once the question is closed. The PHP sets opacity:0.6
   inline and a stylesheet cannot override an inline style, so the fade is left
   to it and only the border is quietened. */
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .answers[data-already-answered="1"] .answer {
	border-color: var(--lg-border);
	box-shadow: none;
}

/* A closed question takes no pointer. The PHP already drops .active-answer, so
   the hover rules do not fire; this is for the cursor. */
:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .answers[data-already-answered="1"] .answer {
	cursor: default;
}

/* One column only once even two pills will not fit. */
@media (max-width: 560px) {

	:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .answers,
	:is(.exercise-reading .lg-read__quiz, .exercise-listening .lg-listen__quiz) .answers.long-answers {
		grid-template-columns: minmax(0, 1fr);
	}
}