/**
 * CMGQ Gated Questions — front end styles.
 *
 * No font-family is declared anywhere in this file. Type inherits from the
 * theme so the card reads as part of the page, not as a form bolted onto it.
 * Override the custom properties below to retune it without editing this file.
 */

.cmgq-gate {
	--cmgq-accent: #3747f4;
	--cmgq-ink: #1a1c2e;
	--cmgq-muted: #6a6f7e;
	--cmgq-line: #dfe1ea;
	--cmgq-surface: #ffffff;
	--cmgq-radius: 4px;

	margin: 2em 0;
}

.cmgq-card {
	background: var(--cmgq-surface);
	border: 1px solid var(--cmgq-line);
	border-left: 4px solid var(--cmgq-accent);
	border-radius: var(--cmgq-radius);
	padding: 1.5em 1.6em;
	color: var(--cmgq-ink);
}

.cmgq-gate.is-answered .cmgq-card {
	border-left-color: var(--cmgq-line);
	background: transparent;
}

.cmgq-card__prompt {
	margin: 0 0 0.35em;
	font-size: 1.125em;
	font-weight: 700;
	line-height: 1.4;
}

.cmgq-card__hint {
	margin: 0 0 1em;
	color: var(--cmgq-muted);
	font-size: 0.9em;
	line-height: 1.5;
}

.cmgq-card__fields {
	margin: 0 0 1em;
}

/* Labels for screen readers. Themes usually define this class, but not all
   of them do, and an undefined class means the question renders twice on the
   page. Scoped to the card so it can't collide with the theme's own rule. */
.cmgq-gate .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Inputs inherit type from the theme, but never below 16px: anything smaller
   makes iOS Safari zoom the page on focus. */
.cmgq-input {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.6em 0.7em;
	font: inherit;
	font-size: max(1rem, 16px);
	line-height: 1.5;
	color: inherit;
	background: #fff;
	border: 1px solid var(--cmgq-line);
	border-radius: var(--cmgq-radius);
}

.cmgq-input:focus {
	outline: 2px solid var(--cmgq-accent);
	outline-offset: 1px;
	border-color: var(--cmgq-accent);
}

.cmgq-input[readonly] {
	background: #f6f7f9;
	color: var(--cmgq-muted);
	border-style: dashed;
}

.cmgq-choices {
	border: 0;
	margin: 0;
	padding: 0;
}

.cmgq-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	padding: 0.5em 0;
	line-height: 1.5;
	cursor: pointer;
}

.cmgq-choice input {
	margin: 0.25em 0 0;
	flex: 0 0 auto;
	accent-color: var(--cmgq-accent);
}

.cmgq-choice input:disabled + span {
	color: var(--cmgq-muted);
}

.cmgq-count {
	margin: 0.4em 0 0;
	font-size: 0.8em;
	color: var(--cmgq-muted);
}

.cmgq-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9em;
}

.cmgq-button {
	display: inline-block;
	padding: 0.7em 1.4em;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	background: var(--cmgq-accent);
	border: 1px solid var(--cmgq-accent);
	border-radius: var(--cmgq-radius);
	cursor: pointer;
}

.cmgq-button:hover,
.cmgq-button:focus {
	filter: brightness(0.92);
	color: #fff;
}

.cmgq-button:focus-visible {
	outline: 2px solid var(--cmgq-ink);
	outline-offset: 2px;
}

.cmgq-button[disabled] {
	opacity: 0.6;
	cursor: default;
}

.cmgq-button--quiet {
	color: var(--cmgq-accent);
	background: transparent;
	font-weight: 500;
	padding: 0.5em 1em;
}

.cmgq-button--quiet:hover,
.cmgq-button--quiet:focus {
	color: var(--cmgq-accent);
	background: rgba(55, 71, 244, 0.06);
	filter: none;
}

.cmgq-status {
	font-size: 0.9em;
	color: var(--cmgq-muted);
}

.cmgq-gate.is-answered .cmgq-status::before {
	content: "✓";
	margin-right: 0.4em;
	color: var(--cmgq-accent);
	font-weight: 700;
}

.cmgq-error {
	margin: 0.8em 0 0;
	padding: 0.6em 0.8em;
	font-size: 0.9em;
	color: #8a1f1f;
	background: #fdf1f1;
	border-radius: var(--cmgq-radius);
}

.cmgq-card__retake {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
	margin-top: 1.2em;
	padding-top: 1em;
	border-top: 1px solid var(--cmgq-line);
}

.cmgq-card__retake .cmgq-card__hint {
	margin: 0;
}

.cmgq-gate--loggedout .cmgq-card,
.cmgq-gate--error .cmgq-card {
	border-left-color: var(--cmgq-muted);
}

/* Applied by JavaScript only. Without the script nothing is hidden, so a
   failure to load leaves the module readable. */
.cmgq-hidden {
	display: none !important;
}

.cmgq-revealed {
	animation: cmgq-fade 0.35s ease-out both;
}

@keyframes cmgq-fade {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cmgq-revealed {
		animation: none;
	}
}

/* Answer history
   ------------------------------------------------------------------ */

.cmgq-history {
	--cmgq-accent: #3747f4;
	--cmgq-muted: #6a6f7e;
	--cmgq-line: #dfe1ea;
}

.cmgq-history__module {
	margin: 0 0 2.5em;
}

.cmgq-history__title {
	margin: 0 0 0.6em;
	padding-bottom: 0.4em;
	border-bottom: 2px solid var(--cmgq-line);
}

.cmgq-attempt {
	border-bottom: 1px solid var(--cmgq-line);
}

.cmgq-attempt__summary {
	padding: 0.8em 0;
	cursor: pointer;
	font-weight: 600;
}

.cmgq-attempt__summary:focus-visible {
	outline: 2px solid var(--cmgq-accent);
	outline-offset: 2px;
}

.cmgq-tag {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0.1em 0.6em;
	font-size: 0.75em;
	font-weight: 500;
	color: var(--cmgq-accent);
	border: 1px solid var(--cmgq-accent);
	border-radius: 999px;
	vertical-align: middle;
}

.cmgq-answers {
	margin: 0 0 1.2em;
	padding: 0 0 0 1em;
	border-left: 3px solid var(--cmgq-line);
}

.cmgq-answers__item {
	margin: 0 0 1.4em;
}

.cmgq-answers__item:last-child {
	margin-bottom: 0.6em;
}

.cmgq-answers__title {
	margin: 0 0 0.15em;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.4;
}

.cmgq-answers__q {
	margin: 0 0 0.5em;
	color: var(--cmgq-muted);
	line-height: 1.5;
}

.cmgq-answers__a {
	margin: 0;
	line-height: 1.6;
}

.cmgq-result {
	display: inline-block;
	margin: 0.4em 0 0;
	padding: 0.1em 0.7em;
	font-size: 0.8em;
	font-weight: 600;
	border-radius: 999px;
}

.cmgq-result--yes {
	color: #1b5e20;
	background: #e6f4e8;
	border: 1px solid #b8ddbf;
}

.cmgq-result--no {
	color: #8a1f1f;
	background: #fdf1f1;
	border: 1px solid #f0c9c9;
}

.cmgq-result::before {
	margin-right: 0.35em;
	font-weight: 700;
}

.cmgq-result--yes::before {
	content: "\2713";
}

.cmgq-result--no::before {
	content: "\2715";
}

.cmgq-answers__time {
	display: block;
	margin-top: 0.3em;
	font-size: 0.8em;
	color: var(--cmgq-muted);
}

.cmgq-empty {
	color: var(--cmgq-muted);
}

@media (max-width: 600px) {
	.cmgq-card {
		padding: 1.2em 1.1em;
	}

	.cmgq-card__actions .cmgq-button {
		width: 100%;
		text-align: center;
	}
}