/**
 * Elemental Quiz Builder — frontend styles.
 *
 * Everything is scoped under .eyq-quiz. This file holds STRUCTURE only: every
 * colour, font, size, spacing, height, radius, border, duration and opacity is
 * a CSS variable declared by the quiz's design template (EYQ_Template::css_vars,
 * inlined on the wrapper and as a defaults block on the stylesheet). There are
 * no literal colours, px or ms values here, so nothing is hardcoded — change a
 * value in Elemental Quiz → Templates and it applies everywhere.
 *
 * Responsiveness is fluid instead of breakpoint-based: side padding shrinks via
 * min(), answer cards stack when narrower than their minimum width, headings
 * scale with clamp() between the template's min and max sizes, and the primary
 * button goes full-width below the configured viewport width.
 */

.eyq-quiz {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: var(--eyq-halign);
	justify-content: var(--eyq-valign);
	width: 100%;
	max-width: 100%;
	min-height: var(--eyq-min-height);
	margin: 0;
	padding: var(--eyq-pad-top) min(var(--eyq-pad-x), var(--eyq-pad-x-fluid)) var(--eyq-pad-bottom);
	background-color: var(--eyq-bg);
	background-image: linear-gradient(var(--eyq-bg-overlay), var(--eyq-bg-overlay)), var(--eyq-bg-image);
	background-size: var(--eyq-bg-size);
	background-position: var(--eyq-bg-position);
	background-repeat: no-repeat;
	color: var(--eyq-text);
	font-family: var(--eyq-font-body);
	font-size: var(--eyq-fs-base);
	font-weight: var(--eyq-body-weight);
	line-height: var(--eyq-lh-base);
	text-align: left;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

.eyq-quiz--full {
	min-height: 100vh;
	min-height: 100dvh;
}

.eyq-quiz *,
.eyq-quiz *::before,
.eyq-quiz *::after {
	box-sizing: border-box;
}

.eyq-quiz [hidden] {
	display: none !important;
}

.eyq-quiz--glow::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 120% 70% at 15% -10%, var(--eyq-glow-a), transparent 60%),
		radial-gradient(ellipse 110% 80% at 110% 110%, var(--eyq-glow-b), transparent 60%);
	pointer-events: none;
	z-index: 0;
	transition: background var(--eyq-dur-slow) ease;
}

.eyq-stage {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--eyq-max-width);
}

.eyq-quiz h1,
.eyq-quiz h2,
.eyq-quiz h3 {
	font-family: var(--eyq-font-display);
	font-weight: var(--eyq-heading-weight);
	margin: 0;
	padding: 0;
	letter-spacing: var(--eyq-heading-ls);
	text-transform: var(--eyq-heading-tt);
	color: var(--eyq-heading);
}

.eyq-quiz p {
	margin: 0;
	padding: 0;
}

/* ---------- progress ---------- */

.eyq-progress {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--eyq-progress-h);
	background: var(--eyq-line);
	z-index: 5;
}

.eyq-progress__fill {
	height: 100%;
	width: 0%;
	background: var(--eyq-progress);
	transition: width var(--eyq-dur) ease, background var(--eyq-dur) ease;
}

.eyq-dots {
	display: flex;
	justify-content: var(--eyq-jc-question);
	flex-wrap: wrap;
	gap: var(--eyq-dots-gap);
	margin: 0 0 var(--eyq-dots-bottom);
}

.eyq-dot {
	width: var(--eyq-dot-size);
	height: var(--eyq-dot-size);
	border-radius: 50%;
	background: var(--eyq-line);
	transition: background var(--eyq-dur) ease, transform var(--eyq-dur) ease;
}

.eyq-dot.is-done {
	background: var(--eyq-progress);
}

.eyq-dot.is-current {
	background: var(--eyq-text);
	transform: scale(1.25);
}

.eyq-progress--bar .eyq-dots,
.eyq-progress--dots .eyq-progress,
.eyq-progress--none .eyq-progress,
.eyq-progress--none .eyq-dots,
.eyq-quiz--no-progress .eyq-progress,
.eyq-quiz--no-progress .eyq-dots {
	display: none;
}

.eyq-step-row {
	display: flex;
	justify-content: var(--eyq-jc-question);
	align-items: center;
	gap: var(--eyq-timer-gap);
	flex-wrap: wrap;
	margin-bottom: var(--eyq-step-gap);
}

.eyq-step {
	font-size: var(--eyq-fs-step);
	color: var(--eyq-kicker);
	letter-spacing: var(--eyq-small-ls);
	text-align: var(--eyq-align-question);
}

/* ---------- timer ---------- */

.eyq-timer {
	display: inline-flex;
	align-items: center;
	gap: var(--eyq-timer-dot-gap);
	font-size: var(--eyq-fs-step);
	letter-spacing: var(--eyq-small-ls);
	color: var(--eyq-timer);
	font-variant-numeric: tabular-nums;
	padding: var(--eyq-timer-pad-y) var(--eyq-timer-pad-x);
	border: var(--eyq-border-w) solid var(--eyq-line);
	border-radius: var(--eyq-pill-radius);
}

.eyq-timer__dot {
	width: var(--eyq-timer-dot);
	height: var(--eyq-timer-dot);
	border-radius: 50%;
	background: var(--eyq-accent);
	animation: eyq-pulse var(--eyq-dur-pulse) ease-in-out infinite;
}

.eyq-timer.is-warning {
	color: var(--eyq-text);
	border-color: var(--eyq-text);
}

.eyq-timer.is-warning .eyq-timer__dot {
	background: var(--eyq-text);
	animation-duration: calc(var(--eyq-dur-pulse) / 2);
}

.eyq-result__time {
	font-size: var(--eyq-fs-small);
	color: var(--eyq-text-dim);
	letter-spacing: var(--eyq-small-ls);
	margin: calc(-1 * var(--eyq-field-gap)) 0 var(--eyq-tagline-gap);
}

/* ---------- screens ---------- */

.eyq-screen {
	display: none;
	width: 100%;
}

.eyq-screen.is-active {
	display: block;
}

.eyq-quiz--animated .eyq-screen.is-active {
	animation: eyq-rise var(--eyq-dur) ease both;
}

@keyframes eyq-rise {
	from {
		opacity: 0;
		transform: translateY(var(--eyq-rise));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- intro ---------- */

.eyq-intro {
	text-align: var(--eyq-align-intro);
}

.eyq-kicker {
	color: var(--eyq-kicker);
	font-size: var(--eyq-fs-kicker);
	margin-bottom: var(--eyq-kicker-gap);
}

.eyq-intro__title {
	font-size: var(--eyq-fs-title);
	line-height: var(--eyq-lh-title);
	margin: 0 0 var(--eyq-title-gap);
}

.eyq-intro__title em,
.eyq-intro__title i {
	font-style: var(--eyq-em-style);
	font-weight: var(--eyq-em-weight);
	color: var(--eyq-heading-em);
}

.eyq-intro__desc {
	font-size: var(--eyq-fs-desc);
	line-height: var(--eyq-lh-desc);
	color: var(--eyq-desc);
	max-width: var(--eyq-desc-w);
	margin-block: 0 var(--eyq-result-name-gap);
	margin-inline: var(--eyq-mi-intro);
}

.eyq-facts {
	display: flex;
	gap: var(--eyq-facts-gap);
	justify-content: var(--eyq-jc-intro);
	margin: var(--eyq-facts-top) 0 var(--eyq-facts-bottom);
	flex-wrap: wrap;
}

.eyq-fact {
	text-align: left;
	flex: 0 1 var(--eyq-fact-w);
	width: var(--eyq-fact-w);
	max-width: 100%;
	padding-top: var(--eyq-fact-pad);
	border-top: var(--eyq-border-w) solid var(--eyq-line);
}

.eyq-fact b {
	display: block;
	font-family: var(--eyq-font-display);
	font-weight: var(--eyq-heading-weight);
	font-size: var(--eyq-fs-fact-title);
	margin-bottom: calc(var(--eyq-fact-pad) / 3);
	color: var(--eyq-heading);
}

.eyq-fact span {
	display: block;
	font-size: var(--eyq-fs-fact);
	color: var(--eyq-text-dim);
	line-height: var(--eyq-lh-base);
}

/* ---------- buttons ---------- */

.eyq-quiz .eyq-btn {
	font-family: var(--eyq-font-body);
	cursor: pointer;
	border: 0;
	background: none;
	color: inherit;
	margin: 0;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	text-decoration: none;
	display: inline-block;
	line-height: var(--eyq-lh-btn);
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	border-radius: 0;
	min-height: var(--eyq-btn-min-h);
	text-align: center;
}

.eyq-quiz .eyq-btn--primary {
	background: var(--eyq-btn-bg);
	color: var(--eyq-btn-text);
	font-size: var(--eyq-fs-btn);
	font-weight: var(--eyq-btn-weight);
	padding: var(--eyq-btn-pad-y) var(--eyq-btn-pad-x);
	border-radius: var(--eyq-btn-radius);
	letter-spacing: var(--eyq-btn-ls);
	text-transform: var(--eyq-btn-tt);
	/* Full width when the viewport is narrower than --eyq-btn-full-below (0 = never). */
	min-width: clamp(0%, calc((var(--eyq-btn-full-below) - 100vw) * 1000), 100%);
	transition: transform var(--eyq-dur-fast) ease, opacity var(--eyq-dur-fast) ease;
}

.eyq-quiz .eyq-btn--primary:hover,
.eyq-quiz .eyq-btn--primary:focus {
	opacity: var(--eyq-hover-opacity);
	color: var(--eyq-btn-text);
	text-decoration: none;
}

.eyq-quiz .eyq-btn--primary:active {
	transform: scale(0.98);
}

.eyq-quiz .eyq-btn--primary[aria-disabled="true"] {
	opacity: var(--eyq-disabled-opacity);
	cursor: not-allowed;
}

.eyq-quiz .eyq-btn--ghost {
	font-size: var(--eyq-fs-ghost);
	color: var(--eyq-ghost);
	padding: var(--eyq-ghost-pad-y) 0;
	border-bottom: var(--eyq-border-w) solid var(--eyq-line);
	transition: color var(--eyq-dur-fast) ease, border-color var(--eyq-dur-fast) ease;
}

.eyq-quiz .eyq-btn--ghost:hover,
.eyq-quiz .eyq-btn--ghost:focus {
	color: var(--eyq-text);
	border-color: var(--eyq-text-dim);
	background: none;
}

.eyq-quiz .eyq-btn:focus-visible,
.eyq-quiz .eyq-opt:focus-visible,
.eyq-quiz .eyq-scale__btn:focus-visible,
.eyq-quiz .eyq-input:focus-visible {
	outline: var(--eyq-outline-w) solid var(--eyq-focus);
	outline-offset: var(--eyq-outline-offset);
}

/* ---------- question ---------- */

.eyq-q-head {
	text-align: var(--eyq-align-question);
	margin-bottom: var(--eyq-qhead-gap);
}

.eyq-q-text {
	font-size: var(--eyq-fs-question);
	line-height: var(--eyq-lh-question);
	color: var(--eyq-question);
	max-width: var(--eyq-text-w);
	margin-block: 0;
	margin-inline: var(--eyq-mi-question);
	outline: none;
}

.eyq-q-tag {
	display: inline-block;
	font-size: var(--eyq-fs-tag);
	color: var(--eyq-kicker);
	margin-bottom: var(--eyq-tag-gap);
}

/*
 * Up to --eyq-columns cards per row, never narrower than --eyq-card-min-w:
 * cards stack by themselves on narrow screens (no breakpoint needed).
 */
.eyq-options {
	display: grid;
	gap: var(--eyq-options-gap);
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			max(var(--eyq-card-min-w), calc((100% - (var(--eyq-columns) - 1) * var(--eyq-options-gap)) / var(--eyq-columns))),
			1fr
		)
	);
}

.eyq-options--single {
	grid-template-columns: minmax(0, 1fr);
}

.eyq-quiz .eyq-opt {
	--eyq-el-color: var(--eyq-accent);
	--eyq-el-soft: var(--eyq-surface);

	text-align: var(--eyq-align-answers);
	justify-content: var(--eyq-jc-answers);
	background: var(--eyq-surface);
	border: var(--eyq-border-w) solid var(--eyq-line);
	border-radius: var(--eyq-radius);
	padding: var(--eyq-card-pad) min(var(--eyq-card-pad), var(--eyq-pad-x-fluid));
	margin: 0;
	width: 100%;
	font-family: var(--eyq-font-body);
	font-size: var(--eyq-fs-answer);
	font-weight: var(--eyq-body-weight);
	line-height: var(--eyq-lh-answer);
	color: var(--eyq-answer-text);
	transition: background var(--eyq-dur-fast) ease, border-color var(--eyq-dur-fast) ease, transform var(--eyq-dur-fast) ease;
	min-height: var(--eyq-card-min-h);
	display: flex;
	align-items: center;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.eyq-cards--outline .eyq-opt {
	background: transparent;
	border-color: var(--eyq-line-strong);
}

.eyq-quiz .eyq-opt:hover,
.eyq-quiz .eyq-opt:focus {
	background: var(--eyq-surface-hover);
	border-color: var(--eyq-line-strong);
	color: var(--eyq-answer-text);
}

.eyq-quiz .eyq-opt:active {
	transform: scale(0.99);
}

.eyq-quiz .eyq-opt.is-selected {
	border-color: var(--eyq-selected);
	background: var(--eyq-surface-hover);
}

.eyq-quiz .eyq-opt--multi.is-selected::after {
	content: "";
	width: var(--eyq-check-size);
	height: var(--eyq-check-size);
	border-radius: 50%;
	background: var(--eyq-selected);
	margin-left: auto;
	flex: 0 0 auto;
}

/* sensory (illustrated) options */

.eyq-quiz .eyq-opt--sensory {
	flex-direction: column;
	align-items: var(--eyq-jc-answers);
	justify-content: flex-end;
	gap: var(--eyq-icon-gap);
	min-height: var(--eyq-sensory-min-h);
	background: linear-gradient(155deg, var(--eyq-el-soft) 0%, var(--eyq-surface) 78%);
	border-color: var(--eyq-line);
}

.eyq-quiz--no-tint .eyq-opt--sensory {
	background: var(--eyq-surface);
}

.eyq-quiz .eyq-opt--sensory:hover,
.eyq-quiz .eyq-opt--sensory:focus {
	border-color: var(--eyq-el-color);
	background: linear-gradient(155deg, var(--eyq-el-soft) 0%, var(--eyq-surface-hover) 78%);
}

.eyq-quiz--no-tint .eyq-opt--sensory:hover,
.eyq-quiz--no-tint .eyq-opt--sensory:focus {
	border-color: var(--eyq-line-strong);
	background: var(--eyq-surface-hover);
}

.eyq-quiz .eyq-opt--sensory.is-selected {
	border-color: var(--eyq-el-color);
}

.eyq-opt__icon {
	width: var(--eyq-icon-size);
	height: var(--eyq-icon-size);
	color: var(--eyq-el-color);
	flex: 0 0 auto;
}

.eyq-quiz--no-tint .eyq-opt__icon {
	color: var(--eyq-text);
}

.eyq-opt__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.eyq-opt__text {
	font-size: inherit;
	line-height: inherit;
}

/* rating scale */

.eyq-scale {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--eyq-jc-question);
	gap: var(--eyq-scale-gap);
}

.eyq-quiz .eyq-scale__btn {
	min-width: var(--eyq-scale-size);
	min-height: var(--eyq-scale-size);
	padding: 0 var(--eyq-scale-gap);
	border: var(--eyq-border-w) solid var(--eyq-line-strong);
	border-radius: var(--eyq-radius);
	background: transparent;
	color: var(--eyq-text);
	font-family: var(--eyq-font-body);
	font-size: var(--eyq-fs-scale);
	font-weight: var(--eyq-scale-weight);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background var(--eyq-dur-fast) ease, border-color var(--eyq-dur-fast) ease, transform var(--eyq-dur-fast) ease;
	margin: 0;
}

.eyq-quiz .eyq-scale__btn:hover,
.eyq-quiz .eyq-scale__btn:focus {
	background: var(--eyq-surface-hover);
	color: var(--eyq-text);
}

.eyq-quiz .eyq-scale__btn.is-selected {
	background: var(--eyq-btn-bg);
	color: var(--eyq-btn-text);
	border-color: var(--eyq-btn-bg);
}

.eyq-scale__labels {
	display: flex;
	justify-content: space-between;
	gap: var(--eyq-actions-gap);
	margin-top: var(--eyq-options-gap);
	font-size: var(--eyq-fs-tag);
	color: var(--eyq-text-dim);
}

/* inputs */

.eyq-quiz .eyq-input {
	display: block;
	width: 100%;
	margin: 0;
	padding: var(--eyq-input-pad-y) var(--eyq-input-pad-x);
	background: var(--eyq-input-bg);
	border: var(--eyq-border-w) solid var(--eyq-line);
	border-radius: var(--eyq-radius);
	color: var(--eyq-text);
	font-family: var(--eyq-font-body);
	font-size: var(--eyq-fs-input);
	line-height: var(--eyq-lh-base);
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	transition: border-color var(--eyq-dur-fast) ease, background var(--eyq-dur-fast) ease;
}

.eyq-quiz .eyq-input::placeholder {
	color: var(--eyq-placeholder);
	opacity: var(--eyq-placeholder-opacity);
}

.eyq-quiz .eyq-input:focus {
	border-color: var(--eyq-line-strong);
	background: var(--eyq-surface-hover);
	outline: none;
}

.eyq-quiz .eyq-textarea {
	min-height: var(--eyq-textarea-h);
	resize: vertical;
}

.eyq-quiz .eyq-textarea--short {
	min-height: calc(var(--eyq-textarea-h) / 1.5);
}

.eyq-q-error,
.eyq-lead__error {
	margin-top: var(--eyq-error-gap);
	font-size: var(--eyq-fs-small);
	color: var(--eyq-error);
	text-align: var(--eyq-align-question);
	padding: var(--eyq-msg-pad-y) var(--eyq-msg-pad-x);
	border: var(--eyq-border-w) solid var(--eyq-line-strong);
	border-radius: var(--eyq-radius);
}

.eyq-q-foot {
	display: flex;
	justify-content: var(--eyq-jc-question);
	align-items: center;
	gap: var(--eyq-foot-items-gap);
	flex-wrap: wrap;
	margin-top: var(--eyq-foot-gap);
}

/* ---------- lead capture ---------- */

.eyq-lead {
	max-width: var(--eyq-lead-w);
	margin-inline: var(--eyq-mi-lead);
	text-align: var(--eyq-align-lead);
}

.eyq-lead__title {
	font-size: var(--eyq-fs-lead-title);
	line-height: var(--eyq-lh-lead-title);
	margin-bottom: var(--eyq-pre-gap);
	outline: none;
}

.eyq-lead__desc {
	color: var(--eyq-desc);
	font-size: var(--eyq-fs-desc);
	line-height: var(--eyq-lh-desc);
	margin-bottom: var(--eyq-tag-gap);
}

.eyq-lead-form {
	text-align: left;
	margin-top: var(--eyq-lead-form-gap);
}

.eyq-field {
	display: block;
	margin-bottom: var(--eyq-field-gap);
}

.eyq-field__label {
	display: block;
	font-size: var(--eyq-fs-step);
	color: var(--eyq-kicker);
	margin-bottom: calc(var(--eyq-field-gap) / 2);
	letter-spacing: var(--eyq-small-ls);
}

.eyq-req {
	color: var(--eyq-text);
}

.eyq-field--checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--eyq-tag-gap);
	font-size: var(--eyq-fs-small);
	line-height: var(--eyq-lh-base);
	color: var(--eyq-text-dim);
	cursor: pointer;
}

.eyq-quiz .eyq-field--checkbox input {
	margin: calc(var(--eyq-checkbox-size) / 4) 0 0;
	width: var(--eyq-checkbox-size);
	height: var(--eyq-checkbox-size);
	flex: 0 0 auto;
	accent-color: var(--eyq-selected);
}

.eyq-field.is-invalid .eyq-input,
.eyq-field.is-invalid input[type="checkbox"] {
	border-color: var(--eyq-error);
	outline: var(--eyq-border-w) solid var(--eyq-error);
}

.eyq-field.is-invalid .eyq-field__label,
.eyq-field--checkbox.is-invalid {
	color: var(--eyq-error);
}

.eyq-lead__actions {
	display: flex;
	justify-content: var(--eyq-jc-lead);
	align-items: center;
	gap: var(--eyq-actions-gap);
	flex-wrap: wrap;
	margin-top: var(--eyq-lead-actions-gap);
}

.eyq-lead__thanks {
	margin-top: var(--eyq-lead-actions-gap);
	color: var(--eyq-text-dim);
	font-size: var(--eyq-fs-input);
}

.eyq-lead-slot {
	margin-block: var(--eyq-lead-slot-top) 0;
	margin-inline: var(--eyq-mi-lead);
	padding-top: var(--eyq-lead-slot-pad);
	border-top: var(--eyq-border-w) solid var(--eyq-line);
	max-width: var(--eyq-lead-w);
}

/* ---------- result ---------- */

.eyq-result {
	text-align: var(--eyq-align-result);
}

.eyq-result__pre {
	font-size: var(--eyq-fs-notes);
	color: var(--eyq-text-dim);
	margin-bottom: var(--eyq-pre-gap);
}

.eyq-result__name {
	font-size: var(--eyq-fs-result);
	line-height: var(--eyq-lh-result);
	color: var(--eyq-result-name);
	margin: 0 0 var(--eyq-result-name-gap);
	transition: color var(--eyq-dur-slow) ease;
	outline: none;
}

.eyq-result__tagline {
	font-style: var(--eyq-em-style);
	font-weight: var(--eyq-em-weight);
	font-size: var(--eyq-fs-tagline);
	color: var(--eyq-text-dim);
	margin-bottom: var(--eyq-tagline-gap);
}

.eyq-result__score {
	font-family: var(--eyq-font-display);
	font-weight: var(--eyq-heading-weight);
	font-size: var(--eyq-fs-score);
	margin: 0 0 var(--eyq-result-name-gap);
}

.eyq-result__correct {
	font-size: var(--eyq-fs-notes);
	color: var(--eyq-text-dim);
	margin-bottom: var(--eyq-tagline-gap);
}

.eyq-result__image {
	margin-block: 0 var(--eyq-image-gap);
	margin-inline: var(--eyq-mi-result);
	max-width: var(--eyq-image-w);
}

.eyq-result__image img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: var(--eyq-mi-result);
	border-radius: var(--eyq-radius);
}

.eyq-result__desc {
	max-width: var(--eyq-result-desc-w);
	margin-block: 0 var(--eyq-desc-gap);
	margin-inline: var(--eyq-mi-result);
	font-size: var(--eyq-fs-result-desc);
	line-height: var(--eyq-lh-result-desc);
	color: var(--eyq-text);
}

.eyq-result__notes {
	font-size: var(--eyq-fs-notes);
	color: var(--eyq-text-dim);
	margin-block: 0 var(--eyq-notes-gap);
	margin-inline: var(--eyq-mi-result);
	max-width: var(--eyq-desc-w);
	line-height: var(--eyq-lh-notes);
}

.eyq-bars {
	max-width: var(--eyq-bars-w);
	margin-block: 0 var(--eyq-bars-bottom);
	margin-inline: var(--eyq-mi-result);
	text-align: left;
}

.eyq-bar {
	display: grid;
	grid-template-columns: minmax(0, min(var(--eyq-bar-label-w), 22%)) 1fr min(var(--eyq-bar-pct-w), 14%);
	align-items: center;
	gap: var(--eyq-options-gap);
	margin-bottom: var(--eyq-bars-gap);
	font-size: var(--eyq-fs-small);
}

.eyq-bar__label {
	color: var(--eyq-text-dim);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.eyq-bar__label.is-dominant {
	color: var(--eyq-text);
	font-weight: var(--eyq-bold-weight);
}

.eyq-bar__track {
	height: var(--eyq-bar-h);
	background: var(--eyq-line);
	border-radius: calc(var(--eyq-bar-h) / 2);
	overflow: hidden;
}

.eyq-bar__fill {
	height: 100%;
	width: 0%;
	border-radius: calc(var(--eyq-bar-h) / 2);
	background: var(--eyq-bar-fill);
	transition: width var(--eyq-dur-slow) cubic-bezier(0.2, 0.8, 0.2, 1);
}

.eyq-bar__pct {
	color: var(--eyq-text-dim);
	text-align: right;
}

.eyq-result__actions {
	display: flex;
	gap: var(--eyq-actions-gap);
	justify-content: var(--eyq-jc-result);
	flex-wrap: wrap;
	align-items: center;
}

.eyq-footer-note {
	margin-block: var(--eyq-footer-gap) 0;
	margin-inline: var(--eyq-mi-footer);
	font-size: var(--eyq-fs-footer);
	color: var(--eyq-text-dim);
	opacity: var(--eyq-footer-opacity);
	text-align: var(--eyq-align-footer);
	max-width: var(--eyq-desc-w);
	line-height: var(--eyq-lh-notes);
}

/* ---------- loading / notices ---------- */

.eyq-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--eyq-tag-gap);
	color: var(--eyq-text-dim);
	font-size: var(--eyq-fs-notes);
	z-index: 3;
	background: var(--eyq-bg);
}

.eyq-loading__dot {
	width: var(--eyq-dot-size);
	height: var(--eyq-dot-size);
	border-radius: 50%;
	background: var(--eyq-accent);
	animation: eyq-pulse var(--eyq-dur-pulse) ease-in-out infinite;
}

@keyframes eyq-pulse {
	0%,
	100% {
		opacity: 0.3;
		transform: scale(0.8);
	}
	50% {
		opacity: 1;
		transform: scale(1);
	}
}

.eyq-admin-notice {
	position: relative;
	z-index: 2;
	margin: 0 0 var(--eyq-notice-gap);
	padding: var(--eyq-msg-pad-y) var(--eyq-msg-pad-x);
	border: var(--eyq-border-w) dashed var(--eyq-line-strong);
	border-radius: var(--eyq-radius);
	color: var(--eyq-text-dim);
	font-size: var(--eyq-fs-step);
	text-align: center;
}

.eyq-noscript {
	text-align: center;
	color: var(--eyq-text-dim);
	margin-top: var(--eyq-notice-gap);
}

/* Standalone preview page: the background colour is set inline from the design. */
.eyq-preview-body {
	margin: 0;
}

/* ---------- motion ---------- */

.eyq-quiz:not(.eyq-quiz--animated) *,
.eyq-quiz:not(.eyq-quiz--animated)::before {
	animation: none !important;
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.eyq-quiz,
	.eyq-quiz *,
	.eyq-quiz::before,
	.eyq-quiz *::before,
	.eyq-quiz *::after {
		animation: none !important;
		transition: none !important;
	}
}