/* Englishan Quiz Engine — front end
   Editorial "proofreader" identity: typographic masthead, serif example
   sentence, badge-free options, and a dark editor's note carrying the
   reasoning on check. Themed via CSS custom properties. */

.eqe {
	--eqe-accent: #4b3bf0;
	--eqe-accent-ink: #2a1fb0;
	--eqe-radius: 16px;
	--eqe-paper: #ffffff;
	--eqe-ink: #17171f;
	--eqe-muted: #6a6b7c;
	--eqe-line: #e7e7ef;
	--eqe-correct: #0f9d58;
	--eqe-correct-bg: #eef8f2;
	--eqe-revise: #e23744;
	--eqe-revise-bg: #fdeff0;
	--eqe-note: #17171f;
	--eqe-note-ink: #f2f2fa;
	--eqe-note-muted: #a9aac2;
	--eqe-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
	--eqe-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	container-type: inline-size;
	box-sizing: border-box;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--eqe-ink);
	line-height: 1.5;
	/* Clearance from whatever sits above and below — on a monetized page that
	   can be an in-content ad unit. 40px desktop, 50px on touch layouts. */
	margin-block: 40px;
	max-width: 44rem;
	background: var(--eqe-paper);
	border: 1px solid var(--eqe-line);
	border-radius: 22px;
	box-shadow: 0 1px 2px rgba(20,20,40,.05), 0 30px 60px -42px rgba(30,25,90,.5);
	overflow: hidden;
}
.eqe *, .eqe *::before, .eqe *::after { box-sizing: border-box; }
.eqe [hidden] { display: none !important; }
.eqe__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.eqe--theme-dark {
	--eqe-paper: #16172a; --eqe-ink: #ecebfb; --eqe-muted: #a2a5c4; --eqe-line: #2c2f4d;
	--eqe-correct: #34d399; --eqe-correct-bg: rgba(52,211,153,.12); --eqe-revise: #fb7185; --eqe-revise-bg: rgba(251,113,133,.12);
	--eqe-note: #0c0d1a; --eqe-accent-ink: #b9b4ff;
}
@media (prefers-color-scheme: dark) {
	.eqe--theme-auto {
		--eqe-paper: #16172a; --eqe-ink: #ecebfb; --eqe-muted: #a2a5c4; --eqe-line: #2c2f4d;
		--eqe-correct: #34d399; --eqe-correct-bg: rgba(52,211,153,.12); --eqe-revise: #fb7185; --eqe-revise-bg: rgba(251,113,133,.12);
		--eqe-note: #0c0d1a; --eqe-accent-ink: #b9b4ff;
	}
}

/* Masthead — a colourful top bar that sets the card apart from the post */
.eqe__mast {
	position: relative; overflow: hidden; color: #fff;
	padding: clamp(1.2rem, 4cqi, 1.55rem) clamp(1.3rem, 4cqi, 1.65rem) clamp(1.15rem, 3cqi, 1.4rem);
	background: linear-gradient(135deg, var(--eqe-accent) 0%, color-mix(in srgb, var(--eqe-accent) 48%, #ff6ec7) 100%);
}
.eqe__mast::before { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 150% at 100% 0%, rgba(255,255,255,.28), transparent 55%); pointer-events: none; }
.eqe__mast-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.eqe__eyebrow { position: relative; display: inline-block; margin-block-start: .65rem; font-family: var(--eqe-mono); font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.32); background: rgba(255,255,255,.12); padding: .2rem .62rem; border-radius: 999px; }
/* The title is a paragraph, not a heading — it names the card without adding
   an entry to the article's outline. Font properties are pinned because a
   theme's own `.entry-content p` rules would otherwise reach it. */
.eqe__title { position: relative; margin: 0; padding: 0; font-family: inherit; font-size: clamp(1.45rem, 3.9cqi, 1.85rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: #fff; text-transform: none; }

/* Length toggle — glassy on the colour bar. Buttons hold the 48px tap-target
   floor so a thumb aiming here can't slip onto a nearby ad unit. */
.eqe__toggle { position: relative; display: inline-flex; border: 1.5px solid rgba(255,255,255,.5); border-radius: 999px; padding: 2px; background: rgba(255,255,255,.14); flex: none; }
.eqe__toggle button { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: .78rem; color: #fff; padding: .3rem .9rem; min-block-size: 44px; min-inline-size: 48px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.eqe__toggle button.is-on { background: #fff; color: #2a1fb0; }

/* Progress — a rounded track inside the body, set off from the colour bar.
   The fill animates with transform, not width: it stays on the compositor,
   and layout-property animation is banned on ad-carrying pages. */
.eqe__prog { height: 6px; border-radius: 999px; background: var(--eqe-line); overflow: hidden; margin-block-end: 1rem; }
.eqe__prog-fill { display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--eqe-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s ease; }
[dir="rtl"] .eqe__prog-fill { transform-origin: 100% 50%; }
.eqe.is-live .eqe__prog[hidden] { display: none; }

/* Body */
.eqe__body { padding: clamp(1.25rem, 4cqi, 1.65rem); }
.eqe__count { font-family: var(--eqe-mono); font-size: .72rem; letter-spacing: .08em; color: var(--eqe-muted); }
.eqe.is-live .eqe__count { display: inline-block; margin-block-end: .5rem; }

/* Questions */
.eqe__stack { margin: 0; }
.eqe__q { margin: 0; }
.eqe.is-live .eqe__q { display: none; }
.eqe.is-live .eqe__q.is-active { display: block; }
.eqe__q-num { font-family: var(--eqe-mono); font-size: .75rem; color: var(--eqe-muted); }
.eqe.is-live .eqe__q-num { display: none; }
.eqe__prompt { margin: .1rem 0 .55rem; color: var(--eqe-muted); font-weight: 600; font-size: .92rem; }
.eqe__sentence { font-family: var(--eqe-serif); font-size: clamp(1.3rem, 3.4cqi, 1.6rem); line-height: 1.4; font-weight: 500; margin: 0 0 1.4rem; color: var(--eqe-ink); }

/* Options — no badges; an ink rule fills the left edge on selection.
   The list reset is forced so themes can't add bullets or indentation. */
.eqe ul.eqe__options { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; gap: .5rem; }
.eqe .eqe__opt-wrap { position: relative; list-style: none !important; margin: 0 !important; padding: 0 !important; }
.eqe .eqe__opt-wrap::marker { content: "" !important; }
.eqe .eqe__opt-wrap::before { content: none; }
.eqe__opt {
	position: relative; inline-size: 100%; text-align: start; display: flex; align-items: center; gap: .9rem;
	padding: .9rem 1.1rem; border: 1.5px solid var(--eqe-line); border-radius: 14px; background: var(--eqe-paper);
	color: var(--eqe-ink); font: inherit; font-size: 1.05rem; font-weight: 600; cursor: pointer; appearance: none;
	transition: border-color .32s cubic-bezier(.22, .61, .36, 1), background .32s cubic-bezier(.22, .61, .36, 1), box-shadow .38s cubic-bezier(.22, .61, .36, 1), transform .38s cubic-bezier(.22, .61, .36, 1);
}
.eqe__opt::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 11px; inline-size: 3px; border-radius: 3px; background: transparent; transform: scaleY(0); transform-origin: center; transition: background .32s cubic-bezier(.22, .61, .36, 1), transform .4s cubic-bezier(.22, .61, .36, 1); }
.eqe__opt:hover:not(:disabled):not(.is-correct):not(.is-wrong):not(.is-dim) {
	border-color: color-mix(in srgb, var(--eqe-accent) 62%, var(--eqe-line));
	background: color-mix(in srgb, var(--eqe-accent) 5%, var(--eqe-paper));
	box-shadow: 0 12px 34px -18px color-mix(in srgb, var(--eqe-accent) 48%, transparent);
	transform: translateY(-1px);
}
.eqe__opt:hover:not(:disabled):not(.is-correct):not(.is-wrong):not(.is-dim)::before {
	background: var(--eqe-accent); transform: scaleY(1);
}
.eqe__opt:hover:not(:disabled):not(.is-correct):not(.is-wrong):not(.is-dim) .eqe__opt-text {
	color: var(--eqe-accent-ink);
}
.eqe__opt:active:not(:disabled):not(.is-correct):not(.is-wrong):not(.is-dim) {
	transform: translateY(0); transition-duration: .12s;
}
.eqe__opt.is-selected { border-color: var(--eqe-accent); background: color-mix(in srgb, var(--eqe-accent) 6%, var(--eqe-paper)); }
.eqe__opt.is-selected::before { background: var(--eqe-accent); transform: scaleY(1); }
.eqe__opt-text { flex: 1; transition: color .32s cubic-bezier(.22, .61, .36, 1); }
.eqe__opt-letter {
	flex: none; inline-size: 1.75rem; block-size: 1.75rem; display: inline-flex; align-items: center; justify-content: center;
	border: 1.5px solid var(--eqe-line); border-radius: 8px; background: var(--eqe-paper);
	font-size: .82rem; font-weight: 700; line-height: 1; color: var(--eqe-muted);
	transition: border-color .32s cubic-bezier(.22, .61, .36, 1), background .32s cubic-bezier(.22, .61, .36, 1), color .32s cubic-bezier(.22, .61, .36, 1);
}
.eqe__opt:hover:not(:disabled):not(.is-correct):not(.is-wrong):not(.is-dim) .eqe__opt-letter { border-color: var(--eqe-accent); color: var(--eqe-accent); }
.eqe__opt.is-selected .eqe__opt-letter { border-color: var(--eqe-accent); background: var(--eqe-accent); color: #fff; }
.eqe__opt.is-correct .eqe__opt-letter { border-color: var(--eqe-correct); background: var(--eqe-correct); color: #fff; }
.eqe__opt.is-wrong .eqe__opt-letter { border-color: var(--eqe-revise); background: var(--eqe-revise); color: #fff; }
.eqe__mark { inline-size: 1.4rem; block-size: 1.4rem; flex: none; opacity: 0; }
.eqe__mark svg { inline-size: 100%; block-size: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.eqe__opt.is-correct { border-color: var(--eqe-correct); background: var(--eqe-correct-bg); }
.eqe__opt.is-correct::before { background: var(--eqe-correct); transform: scaleY(1); }
.eqe__opt.is-correct .eqe__mark { opacity: 1; color: var(--eqe-correct); }
.eqe__opt.is-wrong { border-color: var(--eqe-revise); background: var(--eqe-revise-bg); }
.eqe__opt.is-wrong::before { background: var(--eqe-revise); transform: scaleY(1); }
.eqe__opt.is-wrong .eqe__opt-text { text-decoration: line-through; text-decoration-color: var(--eqe-revise); text-decoration-thickness: 2px; }
.eqe__opt.is-wrong .eqe__mark { opacity: 1; color: var(--eqe-revise); }
.eqe__opt.is-dim { opacity: .5; }
.eqe__opt:disabled { cursor: default; }
.eqe__opt-why { display: none; }

/* Fill */
.eqe__fill { display: flex; flex-direction: column; gap: .35rem; }
.eqe__fill-label { font-size: .8rem; color: var(--eqe-muted); font-weight: 600; }
.eqe__fill-input { padding: .85rem .95rem; font: inherit; font-size: 1.1rem; font-family: var(--eqe-serif); background: var(--eqe-paper); border: 1.5px solid var(--eqe-line); border-radius: 14px; color: var(--eqe-ink); }
.eqe__fill-input:focus { border-color: var(--eqe-accent); outline: none; }
.eqe__fill-input.is-correct { border-color: var(--eqe-correct); background: var(--eqe-correct-bg); }
.eqe__fill-input.is-wrong { border-color: var(--eqe-revise); background: var(--eqe-revise-bg); }

/* Verdict */
.eqe__verdict { display: flex; align-items: center; gap: .55rem; margin-block-start: 1rem; font-weight: 700; }
.eqe__verdict-icon { inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; display: grid; place-items: center; flex: none; }
.eqe__verdict-icon svg { inline-size: 1rem; block-size: 1rem; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.eqe__verdict.is-correct .eqe__verdict-icon { background: var(--eqe-correct); }
.eqe__verdict.is-wrong .eqe__verdict-icon { background: var(--eqe-revise); }
.eqe__verdict.is-correct .eqe__verdict-text { color: var(--eqe-correct); }
.eqe__verdict.is-wrong .eqe__verdict-text { color: var(--eqe-revise); }

/* Editor's note — the dark reasoning hero */
.eqe__note { margin-block-start: .85rem; background: var(--eqe-note); color: var(--eqe-note-ink); border-radius: 13px; padding: .8rem .95rem; }
.eqe--theme-dark .eqe__note, .eqe--theme-auto .eqe__note { border: 1px solid var(--eqe-line); }
.eqe.is-live .eqe__note { display: none; }
.eqe.is-live .eqe__q.is-checked .eqe__note { display: block; }
.eqe__note-head { display: flex; align-items: center; gap: .4rem; font-family: var(--eqe-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--eqe-note-muted); margin-block-end: .5rem; }
.eqe__note-head svg { inline-size: .95rem; block-size: .95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eqe__reason-main { margin: 0 0 .5rem; font-size: .92rem; line-height: 1.5; color: var(--eqe-note-ink); }
.eqe__reason-yours { margin: 0 0 .5rem; font-size: .86rem; line-height: 1.45; color: #ffb9bf; display: flex; gap: .45rem; align-items: baseline; }
.eqe__reason-yours::before { content: "\2717"; font-weight: 800; color: var(--eqe-revise); flex: none; }
.eqe__rule { margin: 0 0 .5rem; font-family: var(--eqe-mono); font-size: .76rem; line-height: 1.45; color: var(--eqe-note-muted); }
.eqe__rule:last-child { margin-block-end: 0; }
.eqe__fixline { margin: 0; display: flex; gap: .5rem; align-items: center; font-family: var(--eqe-serif); font-size: 1rem; color: #fff; }
.eqe--theme-dark .eqe__fixline, .eqe--theme-auto .eqe__fixline { color: var(--eqe-note-ink); }
.eqe__fixline svg { inline-size: 1rem; block-size: 1rem; flex: none; fill: none; stroke: #57e39a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Controls */
.eqe__controls { display: flex; justify-content: flex-end; margin-block-start: 1.4rem; }
.eqe__finish { display: flex; gap: .55rem; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.eqe__action { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.4rem; min-block-size: 48px; font: inherit; font-weight: 700; color: #fff; background: var(--eqe-accent); border: 0; border-radius: 13px; cursor: pointer; transition: filter .15s, transform .15s, opacity .15s; }
.eqe__action:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.eqe__action:disabled { opacity: .4; cursor: default; }
.eqe__action svg { inline-size: 1.05rem; block-size: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

/* Results */
.eqe__results { text-align: center; }
.eqe__score-ring { inline-size: 7.5rem; block-size: 7.5rem; margin: .5rem auto 1rem; border-radius: 50%; display: grid; place-content: center; background: radial-gradient(closest-side, var(--eqe-paper) 78%, transparent 79%), conic-gradient(var(--eqe-accent) calc(var(--eqe-pct,0) * 1%), var(--eqe-line) 0); }
.eqe__score-num { font-size: 2.3rem; font-weight: 800; line-height: 1; }
.eqe__score-of { font-size: .9rem; color: var(--eqe-muted); }
.eqe__verdict-final { font-size: 1.08rem; font-weight: 650; margin: 0 0 1.2rem; }
.eqe__report { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin: 0 auto 1.15rem; max-width: 30rem; }
.eqe__name { flex: 1 1 12rem; min-inline-size: 0; padding: .7rem .9rem; font: inherit; border: 1.5px solid var(--eqe-line); border-radius: 12px; background: var(--eqe-paper); color: var(--eqe-ink); }
.eqe__name:focus { border-color: var(--eqe-accent); outline: none; }
.eqe__download { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.1rem; min-block-size: 48px; font: inherit; font-weight: 700; border: 1.5px solid var(--eqe-line); border-radius: 12px; background: var(--eqe-paper); color: var(--eqe-ink); cursor: pointer; transition: border-color .15s, transform .15s; }
.eqe__download:hover { border-color: var(--eqe-accent); transform: translateY(-1px); }
.eqe__download svg { inline-size: 1.05rem; block-size: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.eqe__results-actions { display: flex; gap: .55rem; justify-content: center; flex-wrap: wrap; }
.eqe__more, .eqe__see, .eqe__share, .eqe__review, .eqe__retry { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.1rem; min-block-size: 48px; font: inherit; font-weight: 700; border-radius: 13px; cursor: pointer; border: 1.5px solid var(--eqe-line); background: var(--eqe-paper); color: var(--eqe-ink); transition: border-color .15s, transform .15s; }
.eqe__more, .eqe__share { background: var(--eqe-accent); color: #fff; border-color: var(--eqe-accent); }
.eqe__more:hover, .eqe__see:hover, .eqe__share:hover, .eqe__review:hover, .eqe__retry:hover { transform: translateY(-1px); }
.eqe__see:hover, .eqe__review:hover, .eqe__retry:hover { border-color: var(--eqe-accent); }
.eqe__more svg, .eqe__see svg, .eqe__share svg, .eqe__review svg, .eqe__retry svg { inline-size: 1rem; block-size: 1rem; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

.eqe__nojs { font-size: .8rem; color: var(--eqe-muted); margin-block-start: 1rem; }
.eqe.is-live .eqe__nojs { display: none; }

.eqe :focus-visible { outline: 3px solid color-mix(in srgb, var(--eqe-accent) 55%, transparent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .eqe * { transition: none !important; } }

/* End-of-lesson attach card */
.eqe-attach { margin-block-start: 2.5rem; }
.eqe-attach__heading { margin-block: 2.5rem .2rem; }
.eqe-attach__heading + .eqe-attach { margin-block-start: .6rem; }
.eqe-attach__title { margin: 0 0 .8rem; font-size: 1.05rem; font-weight: 700; color: inherit; }

@container (max-width: 30rem) {
	.eqe__controls { justify-content: stretch; }
	.eqe__action { flex: 1; justify-content: center; }
	.eqe__finish { width: 100%; }
	.eqe__finish .eqe__more, .eqe__finish .eqe__see { flex: 1; justify-content: center; }
}
.eqe--compact { max-width: none; }

/* Focus on masthead controls needs a light ring against the gradient. */
.eqe__mast :focus-visible, .eqe__toggle button:focus-visible { outline-color: #fff; }

/* Touch layouts: a wider ad-clearance band and full-height tap targets. */
@media (max-width: 782px) {
	.eqe { margin-block: 50px; }
	.eqe__toggle button { min-block-size: 48px; }
}

/* --- Images in questions and options (2.0.0) ------------------------- */
/* The question photograph is deliberately compact. A full-width picture
   pushed the answers below the fold and pulled a needlessly heavy file;
   capped at 400px the options stay in view, the download roughly halves,
   and a 600px-wide upload still covers a 2x retina screen. */
.eqe__q-figure {
	margin: 0 auto 16px;
	max-inline-size: 400px;
	border-radius: 14px;
	overflow: hidden;
	background: color-mix(in srgb, var(--eqe-accent) 7%, var(--eqe-line));
	border: 1px solid var(--eqe-line);
	box-shadow: 0 10px 26px -20px rgba(20, 20, 40, .55);
}

.eqe__q-image {
	display: block;
	width: 100%;
	height: auto;
	/* Reserving the ratio stops the option list jumping as the image
	   arrives, which matters on a page carrying ad units. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.eqe__options--images {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.eqe__options--images .eqe__opt-wrap {
	margin: 0;
}

.eqe__options--images .eqe__opt {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	overflow: hidden;
	height: 100%;
}

.eqe__opt-image {
	display: block;
	position: relative;
	background: rgba(0, 0, 0, .04);
}

.eqe__opt-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.eqe__options--images .eqe__opt-text {
	display: block;
	padding: 8px 10px;
	text-align: center;
}

.eqe__options--images .eqe__opt-letter {
	position: absolute;
	inset-block-start: 6px;
	inset-inline-start: 6px;
	z-index: 1;
}

.eqe__options--images .eqe__mark {
	position: absolute;
	inset-block-start: 6px;
	inset-inline-end: 6px;
	z-index: 1;
}

@media (min-width: 620px) {
	.eqe__options--images {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}