/**
 * Learnomy — Quiz player stylesheet.
 *
 * Page-specific styles for the quiz shell (start screen, top bar with
 * progress ring + timer, question/answer chrome, gate screens, results
 * + review, anti-cheat warning) and the standalone-quiz distraction-free
 * route. Loaded only on the `quiz` and `standalone-quiz` routes via
 * Template_Loader::enqueue_assets() so non-quiz pages don't pay for the
 * progress-ring SVG rules, gate screens, or essay review chrome.
 *
 * Scope:
 *   .lrn-quiz, .lrn-quiz__*           — shell shared by every template
 *   .lrn-quiz-question, .lrn-quiz-question__*
 *   .lrn-quiz-gate, .lrn-quiz-gate__* — pre-start blocking screens
 *   .lrn-question-ordering*, .lrn-question-matching*,
 *   .lrn-ordering-*, .lrn-matching__* — Pro question types (Surface G)
 *
 * Out of scope (do NOT add rules for these here):
 *   .lrn-quiz-editor*  → admin-side, lives in assets/css/admin/quiz-editor.css
 *   assets/css/quiz/{focused,classic,sectioned,conversational,review-board}.css
 *                      → per-template overlays loaded conditionally by
 *                        Template_Loader after the chosen display_template.
 *
 * Responsive contract: exactly two @media queries at the bottom — 1024px
 * (tablet ↔ desktop) and 640px (mobile). The previous monolith had three
 * breakpoints in this block (640px / 1024px / 1440px) plus a stray 600px
 * inside the matching question type. Consolidating to two follows the
 * ux-foundation responsive rules and the catalog slice precedent.
 *
 * @package Learnomy
 */

/* ==========================================================================
   Start screen — pre-attempt landing for the quiz route
   ========================================================================== */

.lrn-quiz__start-screen {
	max-width: 560px;
	margin:     0 auto;
	text-align: center;
	/* Cover-page composition (owner feedback 2026-08-07): the block was
	   top-anchored, so a quiz with no description left two-thirds of the
	   viewport empty below the button and the page read as blank. Centering
	   in the upper-middle band balances short and rich content alike - the
	   conversational template already read better for exactly this reason. */
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	min-height:      min(60vh, 640px);
	padding-block:   var(--lrn-sp-8);
}

/* display:flex above would beat the UA's [hidden] rule once the quiz
   starts - re-assert it, or the start screen never leaves. */
.lrn-quiz__start-screen[hidden] {
	display: none;
}

/* ==========================================================================
   Start-screen variants — one partial, three layouts, owner-picked in
   Settings (\Learnomy\quiz_start_style: cover | brief | boarding). The DOM
   is identical across all three so every state fix ships everywhere.
   ========================================================================== */

/* ── brief: two-column exam brief - context left, decision card right ── */
.lrn-quiz__start--brief {
	max-width:  880px;
	display:    grid;
	grid-template-columns: 1.25fr 1fr;
	column-gap: var(--lrn-sp-6);
	align-items: start;
	align-content: center;
	text-align: start;
	justify-content: stretch;
}
.lrn-quiz__start--brief .lrn-quiz__title       { grid-column: 1; grid-row: 1; }
.lrn-quiz__start--brief .lrn-quiz__description { grid-column: 1; grid-row: 2; }
.lrn-quiz__start--brief .lrn-quiz__prior       { grid-column: 1; grid-row: 3; text-align: start; }
.lrn-quiz__start--brief .lrn-quiz__rules       { grid-column: 2; grid-row: 1 / span 4; margin: 0; box-shadow: var(--lrn-shadow-md, 0 4px 12px rgba(16, 24, 40, 0.08)); }
.lrn-quiz__start--brief .lrn-quiz__start-btn   { grid-column: 2; grid-row: 5; width: 100%; margin-top: var(--lrn-sp-3); }
.lrn-quiz__start--brief .lrn-quiz__enroll-gate,
.lrn-quiz__start--brief .lrn-quiz__attempts-gate { grid-column: 2; grid-row: 5; }

/* ── boarding: stat tiles + a before-you-begin checklist ── */
.lrn-quiz__start--boarding {
	max-width:  680px;
	text-align: start;
	align-items: stretch;
}
.lrn-quiz__start--boarding .lrn-quiz__rules {
	display:    grid;
	grid-template-columns: repeat(4, 1fr);
	gap:        var(--lrn-sp-2);
	background: transparent;
	border:     0;
	box-shadow: none;
	padding:    0;
}
.lrn-quiz__start--boarding .lrn-quiz__rule--stat {
	background:    var(--lrn-bg);
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-md);
	padding:       var(--lrn-sp-3);
	display:       flex;
	gap:           var(--lrn-sp-2);
	align-items:   flex-start;
	border-bottom: 1px solid var(--lrn-border);
}
.lrn-quiz__start--boarding .lrn-quiz__rule--note {
	grid-column:   1 / -1;
	background:    var(--lrn-bg-secondary);
	border:        0;
	border-radius: var(--lrn-radius-md);
	padding:       var(--lrn-sp-2) var(--lrn-sp-3);
	display:       flex;
	gap:           var(--lrn-sp-2);
	align-items:   flex-start;
	font-size:     var(--lrn-text-sm);
}
.lrn-quiz__start--boarding .lrn-quiz__prior { text-align: start; }
.lrn-quiz__start--boarding .lrn-quiz__start-btn { align-self: flex-start; }

@media (max-width: 720px) {
	.lrn-quiz__start--brief {
		display:        flex;
		flex-direction: column;
	}
	.lrn-quiz__start--brief .lrn-quiz__start-btn { width: 100%; }
	.lrn-quiz__start--boarding .lrn-quiz__rules { grid-template-columns: repeat(2, 1fr); }
}

.lrn-quiz__title {
	font-size:   var(--lrn-text-2xl);
	font-weight: var(--lrn-weight-semibold);
	margin:      0 0 var(--lrn-sp-4);
}

.lrn-quiz__description {
	color:         var(--lrn-text-secondary);
	margin-bottom: var(--lrn-sp-6);
}

.lrn-quiz__rules {
	list-style:  none;
	padding:     var(--lrn-sp-5);
	margin:      0 0 var(--lrn-sp-6);
	text-align:  start;
}

.lrn-quiz__rules li {
	display:        flex;
	align-items:    center;
	gap:            var(--lrn-sp-3);
	padding-bottom: var(--lrn-sp-3);
	font-size:      var(--lrn-text-sm);
	color:          var(--lrn-text-secondary);
}

.lrn-quiz__rules li:last-child { padding-bottom: 0; }

.lrn-quiz__rules svg {
	width:  16px;
	height: 16px;
	color:  var(--lrn-accent);
}

.lrn-quiz__start-btn {
	margin-top: var(--lrn-sp-4);
}

/* ==========================================================================
   Player shell — wraps the active question + nav
   ========================================================================== */

.lrn-quiz__player {
	max-width: 680px;
	margin:    0 auto;
}

/* ==========================================================================
   Question — prompt + answer chrome
   ========================================================================== */

.lrn-quiz-question {
	margin-bottom: var(--lrn-sp-6);
}

.lrn-quiz-question__counter {
	font-size: var(--lrn-text-sm);
	color:     var(--lrn-text-tertiary);
	margin:    0 0 var(--lrn-sp-2);
}

.lrn-quiz-question__prompt {
	font-size:   var(--lrn-text-lg);
	font-weight: var(--lrn-weight-semibold);
	margin:      0 0 var(--lrn-sp-4);
}

/* A3: rich question stem (optional passage/code/image) shown above the answers.
   Server-rendered semantic HTML (Content_HTML), so child elements inherit the
   token-driven content styles; this just spaces + visually sets it apart. */
.lrn-quiz-question__stem {
	/* Secondary context: aligned with the prompt + answers (no indent/box), just
	   muted + slightly smaller so it reads as supporting material, not a panel. */
	margin:    var(--lrn-sp-2) 0 var(--lrn-sp-4);
	color:     var(--lrn-text-secondary);
	font-size: var(--lrn-text-sm);
}
.lrn-quiz-question__stem > :first-child { margin-top: 0; }
.lrn-quiz-question__stem > :last-child { margin-bottom: 0; }
.lrn-quiz-question__stem img { max-width: 100%; height: auto; border-radius: var(--lrn-radius-md); }

.lrn-quiz-question__options {
	border:         none;
	padding:        0;
	margin:         0;
	display:        flex;
	flex-direction: column;
	gap:            0;
}

.lrn-quiz-question__option {
	display:       flex;
	align-items:   center;
	gap:           var(--lrn-sp-3);
	padding:       var(--lrn-sp-3) var(--lrn-sp-4);
	min-height:    var(--lrn-touch-min);
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-md);
	margin-bottom: var(--lrn-sp-2);
	cursor:        pointer;
	transition:    background var(--lrn-dur) var(--lrn-ease),
	               border-color var(--lrn-dur) var(--lrn-ease);
}

.lrn-quiz-question__option:hover {
	background:   var(--lrn-bg-hover);
	border-color: var(--lrn-border-heavy);
}

.lrn-quiz-question__option input:checked + .lrn-quiz-question__option-text {
	font-weight: var(--lrn-weight-medium);
}

.lrn-quiz-question__option--selected {
	background:   var(--lrn-accent-bg);
	border-color: var(--lrn-accent);
}

.lrn-quiz-question__option-text {
	font-size: var(--lrn-text-base);
}

.lrn-quiz-question__text-answer {
	margin-top: var(--lrn-sp-2);
}

.lrn-quiz-question__hint {
	margin-top: var(--lrn-sp-3);
	font-size:  var(--lrn-text-sm);
	color:      var(--lrn-text-secondary);
}

/* Immediate feedback panel — shown after answer submission in templates
   that grade per-question. */
.lrn-quiz-question__feedback {
	margin-top:    var(--lrn-sp-4);
	padding:       var(--lrn-sp-4);
	border-radius: var(--lrn-radius-lg);
}

.lrn-quiz-question__feedback-badge {
	display:       flex;
	align-items:   center;
	gap:           var(--lrn-sp-2);
	font-weight:   var(--lrn-weight-semibold);
	margin-bottom: var(--lrn-sp-2);
}

.lrn-quiz-question__feedback-badge svg {
	width:  20px;
	height: 20px;
}

.lrn-quiz-question__feedback-badge--correct {
	color:         var(--lrn-success);
	background:    var(--lrn-success-bg);
	padding:       var(--lrn-sp-3);
	border-radius: var(--lrn-radius-md);
}

.lrn-quiz-question__feedback-badge--incorrect {
	color:         var(--lrn-danger);
	background:    var(--lrn-danger-bg);
	padding:       var(--lrn-sp-3);
	border-radius: var(--lrn-radius-md);
}

.lrn-quiz-question__feedback-explanation {
	font-size: var(--lrn-text-sm);
	color:     var(--lrn-text-secondary);
	margin:    0;
}

/* ==========================================================================
   Top bar — progress ring + counter + timer
   ========================================================================== */

.lrn-quiz__top-bar {
	display:       flex;
	align-items:   center;
	gap:           var(--lrn-sp-4);
	padding:       var(--lrn-sp-3) 0;
	margin-bottom: var(--lrn-sp-6);
	border-bottom: 1px solid var(--lrn-divider);
}

.lrn-quiz__progress-ring {
	/* Tap target must meet WCAG 2.5.5 minimum (44px). The visible ring stays
	   40px via the inner SVG; the button itself expands to --lrn-touch-min. */
	width:           var(--lrn-touch-min);
	height:          var(--lrn-touch-min);
	min-width:       var(--lrn-touch-min);
	min-height:      var(--lrn-touch-min);
	padding:         0;
	border:          none;
	background:      transparent;
	cursor:          pointer;
	position:        relative;
	flex-shrink:     0;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
}

/* `border: none; background: transparent` above removes the UA focus ring along
   with the chrome, so without this the only control in the quiz header was
   keyboard-focusable with NO visible indicator at all (WCAG 2.4.7). Matches the
   ring the ordering and matching controls already use in this file, and is
   scoped to :focus-visible so a mouse click does not draw it. Radius follows
   the button, which is circular. */
.lrn-quiz__progress-ring:focus-visible {
	outline:        3px solid color-mix(in srgb, var(--lrn-accent) 30%, transparent);
	outline-offset: 2px;
	border-radius:  50%;
}

.lrn-quiz__ring-svg {
	width:     40px;
	height:    40px;
	transform: rotate(-90deg);
}

.lrn-quiz__ring-bg {
	fill:         none;
	stroke:       var(--lrn-bg-tertiary);
	stroke-width: 3;
}

.lrn-quiz__ring-fill {
	fill:             none;
	stroke:           var(--lrn-accent);
	stroke-width:     3;
	/* `butt` not `round`: a round cap on the zero-progress dasharray (0 100)
	   renders a stray dot at the top of the ring before any question is
	   answered. A butt cap on a zero-length dash draws nothing. */
	stroke-linecap:   butt;
	stroke-dasharray: 0 100;
	transition:       stroke-dasharray 0.4s ease;
}

.lrn-quiz__ring-label {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       var(--lrn-text-xs);
	font-weight:     var(--lrn-weight-semibold);
	color:           var(--lrn-text);
}

.lrn-quiz__counter {
	font-size:   var(--lrn-text-sm);
	color:       var(--lrn-text-secondary);
	font-weight: var(--lrn-weight-medium);
}

.lrn-quiz__timer {
	display:             flex;
	align-items:         center;
	gap:                 var(--lrn-sp-2);
	margin-inline-start: auto;
	font-size:           var(--lrn-text-sm);
	font-weight:         var(--lrn-weight-semibold);
	color:               var(--lrn-text-secondary);
}

.lrn-quiz__timer svg { width: 14px; height: 14px; }

.lrn-quiz__timer--urgent {
	color: var(--lrn-danger);
}

/* ==========================================================================
   Anti-cheat / tab-switch warning chrome
   ========================================================================== */

.lrn-quiz__cheat-warning {
	display:       flex;
	align-items:   center;
	gap:           var(--lrn-sp-2);
	padding:       var(--lrn-sp-3) var(--lrn-sp-4);
	margin-bottom: var(--lrn-sp-4);
	background:    var(--lrn-warn-bg);
	color:         var(--lrn-warn);
	border-radius: var(--lrn-radius-md);
	font-size:     var(--lrn-text-sm);
	font-weight:   var(--lrn-weight-medium);
}

.lrn-quiz__cheat-warning svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ==========================================================================
   Question wrap + footer navigation
   ========================================================================== */

.lrn-quiz__question-wrap {
	margin-bottom: var(--lrn-sp-6);
}

.lrn-quiz__nav {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	gap:             var(--lrn-sp-3);
	padding-top:     var(--lrn-sp-4);
	border-top:      1px solid var(--lrn-divider);
}

.lrn-quiz__nav-spacer {
	flex: 1;
}

/* ==========================================================================
   Results screen — pass / fail summary + actions (retry, exit, review)
   ========================================================================== */

.lrn-quiz__results {
	max-width: 640px;
	margin:     var(--lrn-sp-8) auto;
	padding:    var(--lrn-sp-8);
	text-align: center;
}

.lrn-quiz__results-icon {
	margin-bottom: var(--lrn-sp-4);
}

.lrn-quiz__results-icon svg {
	width:  48px;
	height: 48px;
	color:  var(--lrn-danger);
}

.lrn-quiz__results-icon--pass svg {
	color: var(--lrn-success);
}

.lrn-quiz__results-title {
	font-size:   var(--lrn-text-xl);
	font-weight: var(--lrn-weight-semibold);
	margin:      0 0 var(--lrn-sp-3);
}

.lrn-quiz__results-score {
	font-size:   var(--lrn-text-2xl);
	font-weight: var(--lrn-weight-semibold);
	margin:      0 0 var(--lrn-sp-2);
}

.lrn-quiz__results-status {
	font-size: var(--lrn-text-md);
	color:     var(--lrn-text-secondary);
	margin:    0 0 var(--lrn-sp-6);
}

.lrn-quiz__results-breakdown {
	font-size: var(--lrn-text-sm);
	color:     var(--lrn-text-tertiary);
	margin:    0 0 var(--lrn-sp-2);
}

/* A2: per-category score breakdown on the results screen. Token-driven so dark
   mode + RTL inherit; works for both the standard (.lrn-quiz__) and the
   conversational (.lrn-conv__) results cards via the shared class names. */
.lrn-quiz__results-categories,
.lrn-conv__results-categories {
	margin:        var(--lrn-sp-5) 0 var(--lrn-sp-2);
	padding-block: var(--lrn-sp-4) 0;
	border-top:    1px solid var(--lrn-border);
	text-align:    start;
}
.lrn-quiz__results-categories-title,
.lrn-conv__results-categories-title {
	font-size:     var(--lrn-text-sm);
	font-weight:   var(--lrn-weight-semibold);
	color:         var(--lrn-text-secondary);
	margin:        0 0 var(--lrn-sp-3);
	text-transform: uppercase;
	letter-spacing: .03em;
}
.lrn-quiz__results-categories-list,
.lrn-conv__results-categories-list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        var(--lrn-sp-2);
}
.lrn-quiz__results-category,
.lrn-conv__results-category {
	display:         flex;
	align-items:     baseline;
	justify-content: space-between;
	gap:             var(--lrn-sp-4);
	font-size:       var(--lrn-text-sm);
}
.lrn-quiz__results-category-name,
.lrn-conv__results-category-name {
	color:       var(--lrn-text);
	font-weight: var(--lrn-weight-medium);
}
.lrn-quiz__results-category-score,
.lrn-conv__results-category-score {
	color:         var(--lrn-text-secondary);
	font-variant-numeric: tabular-nums;
	white-space:   nowrap;
}

.lrn-quiz__results-actions {
	display:         flex;
	gap:             var(--lrn-sp-3);
	justify-content: center;
	align-items:     center;
	flex-wrap:       wrap;
}

/* Attempts-exhausted note sits inside the actions row as a sibling of the
   button. Drop it to its own full-width line, centred + muted, so a bordered
   button never sits awkwardly beside plain body text. */
.lrn-quiz__attempts-exhausted {
	flex-basis: 100%;
	margin:     0;
	text-align: center;
	color:      var(--lrn-text-secondary);
	font-size:  var(--lrn-text-sm);
}

/* ==========================================================================
   Question review — per-question breakdown after submission
   ========================================================================== */

.lrn-quiz__review {
	max-width: 680px;
	margin:    var(--lrn-sp-8) auto 0;
	/* The review is a SCANNING surface — the student is hunting for what
	   they got wrong. Start-aligned always: the sectioned template used to
	   nest this inside the centered results hero, which centered every
	   question and answer and made the list read like a poster. */
	text-align: start;
}

.lrn-quiz__review-heading {
	font-size:   var(--lrn-text-lg);
	font-weight: var(--lrn-weight-semibold);
	margin:      0 0 var(--lrn-sp-4);
}

/* Download PDF is a UTILITY action, not part of the result narrative
   (title -> score -> status), so it sits top inline-end of the summary
   card — where detail views keep export/print/share — instead of
   stretching the card taller under the badge (Varun, 2026-08-07). DOM
   order is unchanged (screen readers still meet it after the status);
   under 640px it returns to the flow, where a top-right pin would
   collide with a wrapping title. */
.lrn-quiz__results-summary {
	position: relative;
}

.lrn-quiz__results-export {
	position:         absolute;
	inset-block-start: var(--lrn-sp-4);
	inset-inline-end:  var(--lrn-sp-4);
	margin:           0;
}

@media (max-width: 640px) {
	.lrn-quiz__results-export {
		position: static;
		margin:   var(--lrn-sp-3) 0 0;
	}
}

/* Filter chips — the counts are the attempt summary, the chips narrow a
   large review to the cards worth reading. Hiding is attribute-driven
   (data-review-filter on the container, set by quiz-review.js) off the
   state classes the cards already carry. */
.lrn-quiz__review-filters {
	display:       flex;
	flex-wrap:     wrap;
	gap:           var(--lrn-sp-2);
	margin-bottom: var(--lrn-sp-4);
}

.lrn-quiz__review-filter {
	display:       inline-flex;
	align-items:   center;
	gap:           var(--lrn-sp-1);
	padding:       var(--lrn-sp-1) var(--lrn-sp-3);
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-full, 999px);
	background:    var(--lrn-bg);
	color:         var(--lrn-text-secondary);
	font-size:     var(--lrn-text-sm);
	font-family:   var(--lrn-font);
	cursor:        pointer;
	transition:    background var(--lrn-dur) var(--lrn-ease), color var(--lrn-dur) var(--lrn-ease);
}

.lrn-quiz__review-filter:hover {
	background: var(--lrn-bg-hover);
}

/* Same pair as .lrn-btn--primary. The first cut referenced --lrn-primary,
   which only exists in ADMIN scope — undefined here, so the background was
   discarded and the pressed chip rendered white-on-white (Varun's
   screenshot). Rule 25 could not catch it: it unions declarations across
   every stylesheet including admin.css, so an admin-only token passes. */
.lrn-quiz__review-filter[aria-pressed="true"] {
	background:   var(--lrn-accent);
	border-color: var(--lrn-accent);
	color:        var(--lrn-text-inverse);
}

.lrn-quiz__review-filter-count {
	font-variant-numeric: tabular-nums;
	opacity: 0.85;
}

/* Touch: a 28px pill is a miss-prone target. 40px minimum on coarse
   pointers keeps the pills comfortable without inflating desktop. */
@media (pointer: coarse), (max-width: 640px) {
	.lrn-quiz__review-filter {
		min-height: 40px;
		padding-block: var(--lrn-sp-2);
	}
}

.lrn-quiz__review[data-review-filter="incorrect"] .lrn-quiz__review-item:not(.lrn-quiz__review-item--incorrect),
.lrn-quiz__review[data-review-filter="correct"] .lrn-quiz__review-item:not(.lrn-quiz__review-item--correct),
.lrn-quiz__review[data-review-filter="pending"] .lrn-quiz__review-item:not(.lrn-quiz__review-item--pending) {
	display: none;
}

/* A group whose every card is filtered out takes its header with it. */
.lrn-quiz__review[data-review-filter="incorrect"] .lrn-sect__review-group:not(:has(.lrn-quiz__review-item--incorrect)),
.lrn-quiz__review[data-review-filter="correct"] .lrn-sect__review-group:not(:has(.lrn-quiz__review-item--correct)),
.lrn-quiz__review[data-review-filter="pending"] .lrn-sect__review-group:not(:has(.lrn-quiz__review-item--pending)) {
	display: none;
}

/* Per-group tally beside the section/category name — at 300 questions the
   student sees WHICH groups need review before opening a single card. */
.lrn-sect__review-group-summary {
	margin-inline-start: var(--lrn-sp-2);
	font-size:   var(--lrn-text-sm);
	font-weight: var(--lrn-weight-regular, 400);
	color:       var(--lrn-text-tertiary);
}

.lrn-quiz__review-item {
	padding:            var(--lrn-sp-4);
	margin-bottom:      var(--lrn-sp-3);
	border-inline-start: 3px solid var(--lrn-border);
}

/* Review cards are native <details>: past ~20 questions they render closed
   (reviewOpenByDefault / the account partial's open flag), so a large
   attempt scans as a list of titles + status glyphs. The header doubles as
   the <summary>. */
.lrn-quiz__review-item > summary.lrn-quiz__review-item-header {
	display:    flex;
	cursor:     pointer;
	list-style: none;
}

.lrn-quiz__review-item > summary.lrn-quiz__review-item-header::-webkit-details-marker {
	display: none;
}

/* A closed card's header IS the card — the open-state bottom margin would
   leave a hole under it. */
.lrn-quiz__review-item:not([open]) > summary.lrn-quiz__review-item-header {
	margin-bottom: 0;
}

/* Lucide replaces the <i> with the <svg> itself (classes carried over), so
   the element and the icon are the same node — style it directly. */
.lrn-quiz__review-item-chevron {
	flex-shrink: 0;
	align-self:  center;
	width:       16px;
	height:      16px;
	color:       var(--lrn-text-tertiary);
	transition:  transform var(--lrn-dur) var(--lrn-ease);
}

.lrn-quiz__review-item[open] > summary .lrn-quiz__review-item-chevron {
	transform: rotate(180deg);
}

.lrn-quiz__review-item--correct {
	border-inline-start-color: var(--lrn-success);
}

.lrn-quiz__review-item--incorrect {
	border-inline-start-color: var(--lrn-danger);
}

.lrn-quiz__review-item--pending {
	border-inline-start-color: var(--lrn-warn);
}

.lrn-quiz__review-item-header {
	display:       flex;
	align-items:   center;
	gap:           var(--lrn-sp-2);
	margin-bottom: var(--lrn-sp-3);
}

.lrn-quiz__review-item-status svg {
	width:  18px;
	height: 18px;
}

.lrn-quiz__review-item--correct   .lrn-quiz__review-item-status svg { color: var(--lrn-success); }
.lrn-quiz__review-item--incorrect .lrn-quiz__review-item-status svg { color: var(--lrn-danger); }
.lrn-quiz__review-item--pending   .lrn-quiz__review-item-status svg { color: var(--lrn-warn); }

.lrn-quiz__review-item-title {
	flex:        1;
	font-size:   var(--lrn-text-base);
	font-weight: var(--lrn-weight-medium);
	margin:      0;
}

.lrn-quiz__review-item-score {
	font-size:   var(--lrn-text-sm);
	color:       var(--lrn-text-tertiary);
	font-weight: var(--lrn-weight-medium);
	white-space: nowrap;
}

.lrn-quiz__review-answer {
	display:       flex;
	align-items:   center;
	gap:           var(--lrn-sp-2);
	padding:       var(--lrn-sp-2) var(--lrn-sp-3);
	margin-bottom: var(--lrn-sp-1);
	border-radius: var(--lrn-radius-md);
	font-size:     var(--lrn-text-sm);
}

.lrn-quiz__review-answer-icon svg {
	width:  14px;
	height: 14px;
	color:  var(--lrn-text-tertiary);
}

/* "Your pick" — declared BEFORE the correct/wrong states so their reveal
   colors override this neutral chip on the same element. font-weight alone
   was the only signal, which made a selected-but-wrong option look identical
   to one never chosen whenever the --wrong class failed to apply — and even
   with --wrong working, the no-reveal mode needs a neutral way to say
   "this is what you answered". */
.lrn-quiz__review-answer--selected {
	font-weight: var(--lrn-weight-medium);
	background:  var(--lrn-bg-secondary);
	box-shadow:  inset 0 0 0 1px var(--lrn-border);
}

.lrn-quiz__review-answer--correct {
	background: var(--lrn-success-bg);
}

.lrn-quiz__review-answer--correct .lrn-quiz__review-answer-icon svg {
	color: var(--lrn-success);
}

.lrn-quiz__review-answer--wrong {
	background: var(--lrn-danger-bg);
}

.lrn-quiz__review-answer--wrong .lrn-quiz__review-answer-icon svg {
	color: var(--lrn-danger);
}

.lrn-quiz__review-essay {
	margin-top:  var(--lrn-sp-3);
	padding-top: var(--lrn-sp-3);
	border-top:  1px solid var(--lrn-divider);
}

.lrn-quiz__review-essay-label {
	font-size:   var(--lrn-text-sm);
	color:       var(--lrn-text-secondary);
	margin:      0 0 var(--lrn-sp-2);
	font-weight: var(--lrn-weight-medium);
}

.lrn-quiz__review-essay-text {
	font-size:           var(--lrn-text-sm);
	color:               var(--lrn-text);
	background:          var(--lrn-bg-secondary);
	padding:             var(--lrn-sp-3);
	border-radius:       var(--lrn-radius-md);
	border-inline-start: 2px solid var(--lrn-border-heavy);
	margin:              0 0 var(--lrn-sp-2);
}

.lrn-quiz__review-essay-pending {
	display:     flex;
	align-items: center;
	gap:         var(--lrn-sp-2);
	font-size:   var(--lrn-text-sm);
	color:       var(--lrn-warn);
	margin:      0;
}

.lrn-quiz__review-essay-pending svg { width: 14px; height: 14px; }

/* ==========================================================================
   Quiz gate — pre-start blocking screens (locked, closed, cooldown, code)
   ========================================================================== */

.lrn-quiz-gate-wrap {
	display:         flex;
	justify-content: center;
	padding:         var(--lrn-sp-12) var(--lrn-sp-4);
}

.lrn-quiz-gate {
	max-width: 520px;
	width:      100%;
	text-align: center;
	padding:    var(--lrn-sp-8) var(--lrn-sp-6);
}

.lrn-quiz-gate svg {
	width:   48px;
	height:  48px;
	color:   var(--lrn-accent);
	margin:  0 auto var(--lrn-sp-4);
	display: block;
}

.lrn-quiz-gate--locked svg,
.lrn-quiz-gate--closed svg {
	color: var(--lrn-danger);
}

.lrn-quiz-gate--cooldown svg {
	color: var(--lrn-warn);
}

.lrn-quiz-gate h2 {
	font-size: var(--lrn-text-xl);
	color:     var(--lrn-text);
	margin:    0 0 var(--lrn-sp-2);
}

.lrn-quiz-gate p {
	color:  var(--lrn-text-secondary);
	margin: 0 0 var(--lrn-sp-5);
}

.lrn-quiz-gate__countdown {
	display:              inline-block;
	font-variant-numeric: tabular-nums;
	color:                var(--lrn-accent);
	font-weight:          var(--lrn-weight-semibold);
}

.lrn-quiz-gate__code-form {
	display:        flex;
	flex-direction: column;
	gap:            var(--lrn-sp-3);
	text-align:     start;
}

.lrn-quiz-gate__code-form label {
	font-size:   var(--lrn-text-sm);
	color:       var(--lrn-text-secondary);
	font-weight: var(--lrn-weight-medium);
}

.lrn-quiz-gate__code-form input {
	width:         100%;
	padding:       var(--lrn-sp-3);
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-md);
	font-size:     var(--lrn-text-base);
	background:    var(--lrn-bg);
	color:         var(--lrn-text);
	min-height:    var(--lrn-touch-min);
}

/* Keyboard-only focus ring on the code input.
   Previous rule used `:focus { outline: none }` unconditionally, which
   removed the focus ring for keyboard users too (WCAG 2.4.7 violation).
   :focus-visible scopes the override to mouse focus and keeps the ring
   visible for keyboard navigation. */
.lrn-quiz-gate__code-form input:focus-visible {
	outline:      none;
	border-color: var(--lrn-accent);
	box-shadow:   0 0 0 3px var(--lrn-accent-bg);
}

.lrn-quiz-gate__error {
	display:       flex;
	align-items:   center;
	gap:           var(--lrn-sp-2);
	background:    var(--lrn-danger-bg);
	color:         var(--lrn-danger);
	padding:       var(--lrn-sp-3);
	border-radius: var(--lrn-radius-md);
	font-size:     var(--lrn-text-sm);
	margin-bottom: var(--lrn-sp-4);
	text-align:    start;
}

.lrn-quiz-gate__error[hidden] {
	display: none;
}

.lrn-quiz-gate__error svg {
	width:  18px;
	height: 18px;
	margin: 0;
	color:  var(--lrn-danger);
}

/* ==========================================================================
   Pro question types — ordering + matching (Surface G)
   Wires the two previously-broken Pro question types into the student UI.
   ========================================================================== */

/* Ordering ---------------------------------------------------------------- */

.lrn-question-ordering {
	display:        flex;
	flex-direction: column;
	gap:            var(--lrn-sp-3);
	margin-block:   var(--lrn-sp-4);
}

.lrn-question-ordering__instruction {
	margin:    0;
	color:     var(--lrn-text-secondary);
	font-size: var(--lrn-text-sm);
}

.lrn-ordering-list {
	list-style:     none;
	padding:        0;
	margin:         0;
	display:        flex;
	flex-direction: column;
	gap:            var(--lrn-sp-2);
}

.lrn-ordering-item {
	display:       flex;
	align-items:   center;
	gap:           var(--lrn-sp-3);
	padding:       var(--lrn-sp-3) var(--lrn-sp-4);
	background:    var(--lrn-bg, var(--lrn-bg));
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-md);
	cursor:        grab;
	user-select:   none;
	transition:    border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.lrn-ordering-item:hover {
	border-color: var(--lrn-accent);
}

.lrn-ordering-item:focus-visible {
	outline:        3px solid color-mix(in srgb, var(--lrn-accent) 30%, transparent);
	outline-offset: 0;
}

.lrn-ordering-item--dragging {
	opacity: 0.45;
	cursor:  grabbing;
}

.lrn-ordering-item--drag-over {
	border-style: dashed;
	border-color: var(--lrn-accent);
	box-shadow:   inset 0 0 0 2px color-mix(in srgb, var(--lrn-accent) 25%, transparent);
}

.lrn-ordering-handle {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	color:           var(--lrn-text-secondary);
	flex-shrink:     0;
}

.lrn-ordering-handle svg {
	width:  18px;
	height: 18px;
}

.lrn-ordering-content {
	flex:        1 1 auto;
	color:       var(--lrn-text);
	font-size:   var(--lrn-text-base);
	line-height: 1.5;
}

/* Matching ---------------------------------------------------------------- */

.lrn-question-matching {
	display:        flex;
	flex-direction: column;
	gap:            var(--lrn-sp-3);
	margin-block:   var(--lrn-sp-4);
}

/* The quiz player renders EVERY answer-type branch and lets the Interactivity
   API mark all but the current question's type with the [hidden] attribute. But
   each branch sets its own display:flex, which beats the UA [hidden]{display:none}
   rule — so without this guard a single-choice question also renders the ordering
   + matching UIs (and any non-matching branch leaks for every other type). The
   attribute-qualified selectors out-specify each branch's base display, restoring
   [hidden]'s precedence. */
.lrn-quiz-question__options[hidden],
.lrn-quiz-question__text-answer[hidden],
.lrn-quiz-question__blanks[hidden],
.lrn-quiz-question__essay[hidden],
.lrn-question-ordering[hidden],
.lrn-question-matching[hidden] {
	display: none;
}

.lrn-question-matching__instruction {
	margin:    0;
	color:     var(--lrn-text-secondary);
	font-size: var(--lrn-text-sm);
}

.lrn-matching__grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   var(--lrn-sp-4);
	align-items:           start;
}

.lrn-matching__left,
.lrn-matching__right {
	list-style:     none;
	padding:        0;
	margin:         0;
	display:        flex;
	flex-direction: column;
	gap:            var(--lrn-sp-2);
}

.lrn-matching__term {
	position:        relative;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--lrn-sp-3);
	padding:         var(--lrn-sp-3) var(--lrn-sp-4);
	background:      var(--lrn-bg, var(--lrn-bg));
	border:          1px solid var(--lrn-border);
	border-radius:   var(--lrn-radius-md);
	cursor:          pointer;
	color:           var(--lrn-text);
	font-size:       var(--lrn-text-base);
	line-height:     1.4;
	transition:      border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.lrn-matching__term:hover {
	border-color: var(--lrn-accent);
}

.lrn-matching__term:focus-visible {
	outline:        3px solid color-mix(in srgb, var(--lrn-accent) 30%, transparent);
	outline-offset: 0;
}

.lrn-matching__term--selected {
	background:   color-mix(in srgb, var(--lrn-accent) 10%, transparent);
	border-color: var(--lrn-accent);
}

.lrn-matching__term--matched {
	background:   color-mix(in srgb, var(--lrn-accent) 6%, transparent);
	border-color: color-mix(in srgb, var(--lrn-accent) 50%, var(--lrn-border));
	color:        var(--lrn-text-secondary);
}

.lrn-matching__term-text {
	flex: 1 1 auto;
}

.lrn-matching__term-pair {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width: 24px;
	height:          24px;
	padding:         0 var(--lrn-sp-2);
	border-radius:   999px;
	background:      var(--lrn-accent);
	color:           var(--lrn-accent-contrast, var(--lrn-white));
	font-size:       var(--lrn-text-xs);
	font-weight:     600;
	line-height:     1;
	flex-shrink:     0;
}

.lrn-matching__term-pair:empty {
	display: none;
}

.lrn-matching__clear {
	align-self: flex-start;
	font-size:  var(--lrn-text-sm);
}

/* ==========================================================================
   Responsive — exactly two breakpoints

   Per ux-foundation responsive rules: 1024px (tablet ↔ desktop) and 640px
   (mobile). The previous code had three breakpoints in this block (640,
   1024, 1440) plus a stray 600px in the matching grid. The 1440px tier
   widened the player to 840px/results to 600px/review to 840px — a tier
   that arguably mattered on very wide displays but doubled the responsive
   contract. Consolidating onto 1024px keeps the canonical breakpoint;
   most laptops live in the 1280-1440px range and already get the
   1024px-tier max-widths. The 600px matching breakpoint promotes to
   640px (catalog precedent).
   ========================================================================== */

@media (min-width: 1024px) {
	.lrn-quiz__player {
		max-width: 760px;
	}

	.lrn-quiz__results {
		max-width: 540px;
	}

	/* The review uses the PAGE container, not a reading column. A 640-760px
	   cap on a 1200px+ container left half the viewport empty and stacked
	   every card into one narrow strip (Varun, 2026-08-07) — but a taking
	   question card CAN stay narrow, so the space goes to a two-up grid:
	   auto-fill columns give two cards side by side at 1200px, three on
	   very wide screens, and collapse back to one under ~800px of content
	   width. align-items:start keeps a short card from stretching to its
	   tall neighbour. */
	.lrn-quiz__review {
		max-width: none;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
		gap: var(--lrn-sp-4);
		align-items: start;
	}

	/* display:grid would beat the UA's [hidden] rule — reassert it, the
	   same guard the start-screen variants need. */
	.lrn-quiz__review[hidden] {
		display: none;
	}

	/* The heading spans the row; a sectioned quiz's groups each span too
	   and run their own grid, so sections keep their identity while their
	   questions share the columns.

	   The FILTER CHIPS span for the same reason, and were missed: as a normal
	   grid item the chip row took the first cell on its own, so the row it sat
	   in stayed empty to its right and the first question card began in column
	   TWO — the review appeared to start top-right, under a blank top-left
	   (Basecamp 10184327445). Anything that is chrome for the whole list
	   belongs on this selector, not in a column. */
	.lrn-quiz__review-heading,
	.lrn-quiz__review-filters,
	.lrn-sect__review-group {
		grid-column: 1 / -1;
	}

	.lrn-sect__review-group {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
		gap: var(--lrn-sp-4);
		align-items: start;
	}

	.lrn-sect__review-group-title {
		grid-column: 1 / -1;
		margin: 0;
	}

	/* The grid gap owns the spacing between cards. */
	.lrn-quiz__review .lrn-quiz__review-item {
		margin-bottom: 0;
	}
}

@media (max-width: 640px) {
	.lrn-quiz__start-screen {
		margin:        0 auto;
		padding:       var(--lrn-sp-4);
		min-height:    0;
	}

	.lrn-quiz__player {
		padding: 0 var(--lrn-sp-2);
	}

	.lrn-quiz__top-bar {
		gap: var(--lrn-sp-2);
	}

	.lrn-quiz-question__option {
		padding: var(--lrn-sp-3);
	}

	.lrn-quiz__nav {
		gap: var(--lrn-sp-2);
		/* Three buttons and ~313px. "Flag for review" and "Submit Quiz" broke
		   mid-word onto two lines, so the row rendered three buttons of
		   different heights, one of them a pill and one a rounded rect - the
		   controls a student uses under time pressure, looking broken
		   (Basecamp 10186242070).
		   Wrapping the ROW rather than the words: labels stay whole, and if
		   they cannot share a line the flag drops to its own. Chosen over
		   shrinking the text because the labels are translated - German and
		   French run longer than the English this was tuned against, so any
		   fixed size that just fits here fails there. */
		flex-wrap: wrap;
		row-gap:   var(--lrn-sp-2);
	}

	.lrn-quiz__nav > * {
		white-space: nowrap;
	}

	/* The spacer only earns its place when everything fits on one line; once
	   the row can wrap, a flexible gap pushes the wrap earlier than needed. */
	.lrn-quiz__nav-spacer {
		display: none;
	}

	.lrn-quiz__results {
		padding: var(--lrn-sp-4);
		margin:  var(--lrn-sp-4) auto;
	}

	.lrn-quiz__results-actions {
		flex-direction: column;
	}

	.lrn-quiz__results-actions .lrn-btn {
		width: 100%;
	}

	/* Matching grid stacks the term columns under the 640px line. The
	   previous monolith used 600px here; promoted to the canonical 640px
	   so the player has a single mobile-tier breakpoint. */
	.lrn-matching__grid {
		grid-template-columns: 1fr;
		gap:                   var(--lrn-sp-3);
	}
}

/* ==========================================================================
   A4 Phase 2: question map · flag-for-review · pre-submit review
   ========================================================================== */

/* Clickable numbered question map (toggled by the progress ring). */
.lrn-quiz__map {
	margin: var(--lrn-sp-3) 0 var(--lrn-sp-4);
	padding: var(--lrn-sp-4);
	border: 1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-lg);
	background: var(--lrn-bg-secondary);
}

.lrn-quiz__map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lrn-sp-3);
	margin-bottom: var(--lrn-sp-3);
	font-size: var(--lrn-text-xs);
	color: var(--lrn-text-secondary);
}

.lrn-quiz__map-legend-item {
	display: inline-flex;
	align-items: center;
	gap: var(--lrn-sp-1);
}

.lrn-quiz__map-dot {
	width: var(--lrn-sp-3);
	height: var(--lrn-sp-3);
	border-radius: var(--lrn-radius-pill);
	border: 1px solid var(--lrn-border);
	background: var(--lrn-bg);
}

.lrn-quiz__map-dot--answered {
	background: var(--lrn-success);
	border-color: var(--lrn-success);
}

.lrn-quiz__map-dot--flagged {
	background: var(--lrn-warn);
	border-color: var(--lrn-warn);
}

.lrn-quiz__map-dot--current {
	background: var(--lrn-accent);
	border-color: var(--lrn-accent);
}

.lrn-quiz__map-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
	gap: var(--lrn-sp-2);
}

.lrn-quiz__map-cell {
	position: relative;
	aspect-ratio: 1;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-md);
	background: var(--lrn-bg);
	color: var(--lrn-text);
	font-size: var(--lrn-text-sm);
	font-weight: var(--lrn-weight-medium);
	cursor: pointer;
	transition: border-color var(--lrn-dur) var(--lrn-ease),
	            background-color var(--lrn-dur) var(--lrn-ease);
}

.lrn-quiz__map-cell:hover {
	border-color: var(--lrn-accent);
}

/* Answered → success tint; flagged wins a corner marker; current → accent ring. */
.lrn-quiz__map-cell.is-answered {
	background: color-mix(in srgb, var(--lrn-success) 14%, transparent);
	border-color: color-mix(in srgb, var(--lrn-success) 45%, transparent);
}

.lrn-quiz__map-cell.is-flagged::after {
	content: "";
	position: absolute;
	top: 3px;
	inset-inline-end: 3px;
	width: var(--lrn-sp-2);
	height: var(--lrn-sp-2);
	border-radius: var(--lrn-radius-pill);
	background: var(--lrn-warn);
}

.lrn-quiz__map-cell.is-current {
	border-color: var(--lrn-accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--lrn-accent) 30%, transparent);
}

/* Flag-for-review button in the nav. */
.lrn-quiz__flag-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--lrn-sp-1);
	padding: var(--lrn-sp-1) var(--lrn-sp-3);
	border: 1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-pill);
	background: var(--lrn-bg);
	color: var(--lrn-text-secondary);
	font-size: var(--lrn-text-sm);
	cursor: pointer;
	transition: color var(--lrn-dur) var(--lrn-ease),
	            border-color var(--lrn-dur) var(--lrn-ease),
	            background-color var(--lrn-dur) var(--lrn-ease);
}

.lrn-quiz__flag-btn svg,
.lrn-quiz__flag-btn i {
	width: var(--lrn-sp-4);
	height: var(--lrn-sp-4);
}

.lrn-quiz__flag-btn:hover {
	border-color: var(--lrn-warn);
	color: var(--lrn-warn);
}

.lrn-quiz__flag-btn.is-flagged {
	background: color-mix(in srgb, var(--lrn-warn) 14%, transparent);
	border-color: var(--lrn-warn);
	color: var(--lrn-warn);
}

/* Pre-submit review screen. */
.lrn-quiz__presubmit {
	text-align: center;
	padding: var(--lrn-sp-8) var(--lrn-sp-4);
}

.lrn-quiz__presubmit-icon {
	width: var(--lrn-sp-8);
	height: var(--lrn-sp-8);
	color: var(--lrn-text-tertiary);
}

.lrn-quiz__presubmit-title {
	margin: var(--lrn-sp-3) 0 var(--lrn-sp-2);
	font-size: var(--lrn-text-lg);
	font-weight: var(--lrn-weight-semibold);
	color: var(--lrn-text);
}

.lrn-quiz__presubmit-summary {
	margin: 0 0 var(--lrn-sp-5);
	color: var(--lrn-text-secondary);
}

.lrn-quiz__presubmit-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lrn-sp-2);
}

@media (max-width: 640px) {
	.lrn-quiz__map-grid {
		grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
	}
	.lrn-quiz__presubmit-actions .lrn-btn {
		width: 100%;
	}
}

/* Category heading for one-at-a-time layouts */
.lrn-quiz__category-heading {
	display: inline-block;
	margin: 0 0 var(--lrn-sp-2);
	padding: var(--lrn-sp-1) var(--lrn-sp-3);
	background: var(--lrn-accent-bg);
	color: var(--lrn-accent);
	border-radius: var(--lrn-radius-full, 999px);
	font-size: var(--lrn-text-sm, 0.85rem);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.lrn-quiz__category-heading[hidden] {
	display: none;
}

/* ==========================================================================
   Resume banner — welcoming "your progress was restored" state on re-entry
   (card 10062949966). Token-driven; dark mode inherits via the tokens.
   ========================================================================== */

.lrn-quiz-resume-banner {
	display:       flex;
	align-items:   center;
	gap:           var(--lrn-sp-2);
	padding:       var(--lrn-sp-3) var(--lrn-sp-4);
	margin-bottom: var(--lrn-sp-4);
	background:    var(--lrn-accent-soft);
	color:         var(--lrn-text);
	border-radius: var(--lrn-radius-md);
	font-size:     var(--lrn-text-sm);
}

.lrn-quiz-resume-banner__icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--lrn-accent); }

.lrn-quiz-resume-banner__text { margin: 0; flex: 1 1 auto; }

.lrn-quiz-resume-banner__detail {
	display:     block;
	margin-top:  var(--lrn-sp-1);
	color:       var(--lrn-text-secondary);
	font-weight: var(--lrn-weight-normal);
}

.lrn-quiz-resume-banner__dismiss {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           28px;
	height:          28px;
	padding:         0;
	flex-shrink:     0;
	background:      transparent;
	border:          0;
	border-radius:   var(--lrn-radius-sm);
	color:           var(--lrn-text-secondary);
	cursor:          pointer;
}

.lrn-quiz-resume-banner__dismiss:hover { color: var(--lrn-text); }
.lrn-quiz-resume-banner__dismiss svg { width: 16px; height: 16px; }

/* ── Quiz nav: consistent control shape on phones ──────────────────────────
   Declared here, after the base `.lrn-quiz__flag-btn` block above, because an
   equal-specificity rule inside the earlier media query loses to it on source
   order — the first attempt at this fix set the radius and nothing changed.
   The flag pill sat at radius 999px beside two 6px rounded rects, reading as
   two unrelated control styles pushed together (Basecamp 10186242070). Matched
   to its neighbours; the outline still tells it apart. */
@media (max-width: 640px) {

	.lrn-quiz__flag-btn {
		border-radius: var(--lrn-radius-md);
		min-height:    var(--lrn-touch-min);
	}
}

/* ── Distraction-free means distraction-free ───────────────────────────────
   The notifications FAB is `position: fixed` bottom-right at z-index 9999. In
   an immersive quiz it floats over the answer area and, at 390px, lands on the
   nav row - measured sitting across "Flag for review" (Basecamp 10186242070).
   The buy-bar collision was solved by lifting the bell; there is nothing to
   lift it above here, because the quiz nav scrolls with the content rather
   than pinning.
   So it goes away for the duration. A student under exam conditions is the one
   person on the site who should not be offered a notifications panel, and a
   control that covers another control is worse than an absent one. It returns
   the moment they leave the quiz.

   Both selectors are needed. Scoping to `lrn-distraction-free` alone missed the
   case actually measured: a COURSE-ATTACHED quiz renders in the theme, without
   that body class, and the overlap is identical there. `:has(.lrn-quiz__player)`
   catches an attempt in progress on either chrome. */
body.lrn-distraction-free .lrn-notification-bell,
body:has(.lrn-quiz__player) .lrn-notification-bell {
	display: none;
}