/**
 * 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:     var(--lrn-sp-8) auto;
	text-align: center;
}

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

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

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

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

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

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

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

.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-answer--selected {
	font-weight: var(--lrn-weight-medium);
}

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

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

	.lrn-quiz__review {
		max-width: 760px;
	}
}

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

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

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