/**
 * Mobile-first quiz styling: one question per screen, visible progress bar,
 * large touch-friendly answer buttons (44px+ min target per accessibility
 * guidance in the site's design handoff).
 */

.disc-quiz-app {
	font-family: var(--disc-font-family);
	color: var(--disc-color-text);
	max-width: 640px;
	margin: 0 auto;
	padding: var(--disc-space-4) var(--disc-space-3);
}

.disc-quiz-progress {
	margin-bottom: var(--disc-space-4);
}

.disc-quiz-progress-label {
	font-size: 0.875rem;
	margin-bottom: var(--disc-space-2);
}

.disc-quiz-progress-track {
	background: var(--disc-color-secondary);
	border-radius: var(--disc-radius-pill);
	height: 8px;
	overflow: hidden;
}

.disc-quiz-progress-fill {
	background: var(--disc-color-primary);
	height: 100%;
	transition: width 0.2s ease;
}

.disc-quiz-question {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: var(--disc-space-4);
}

.disc-quiz-options {
	display: flex;
	flex-direction: column;
	gap: var(--disc-space-2);
}

.disc-quiz-option {
	display: block;
	width: 100%;
	text-align: left;
	padding: var(--disc-space-3) var(--disc-space-4);
	min-height: 44px;
	border: 2px solid var(--disc-color-secondary);
	border-radius: var(--disc-radius-card);
	background: #fff;
	color: var(--disc-color-text);
	font-family: inherit;
	font-size: 1rem;
	cursor: pointer;
}

.disc-quiz-option:hover,
.disc-quiz-option:focus-visible {
	border-color: var(--disc-color-primary);
	outline: none;
}

.disc-quiz-option[aria-pressed="true"] {
	border-color: var(--disc-color-bronze);
	background: var(--disc-color-secondary);
}

.disc-quiz-nav {
	display: flex;
	justify-content: space-between;
	margin-top: var(--disc-space-4);
}

.disc-quiz-button {
	font-family: inherit;
	font-weight: 600;
	padding: var(--disc-space-2) var(--disc-space-4);
	min-height: 44px;
	border-radius: var(--disc-radius-pill);
	border: 2px solid transparent;
	background: var(--disc-color-button-bg);
	color: var(--disc-color-button-text);
	cursor: pointer;
}

.disc-quiz-button:hover,
.disc-quiz-button:focus-visible {
	background: var(--disc-color-button-bg-hover);
	color: var(--disc-color-button-text-hover);
	border-color: var(--disc-color-button-border-hover);
	outline: none;
}

.disc-quiz-button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.disc-quiz-error {
	color: #b3261e;
	margin-top: var(--disc-space-3);
}