/* ETO Quiz — App style. Only .eto-quiz (with its print block and related list), list cards (.eto-lc), sidebar links (.eto-side) and .eto-done-mark are styled. */
.eto-quiz, .eto-lc, .eto-side {
	--eto-bg: #faf9f6;
	--eto-surface: #fff;
	--eto-ink: #1f1e1c;
	--eto-muted: #6d6a61;
	--eto-line: #e6e2d7;
	--eto-accent: #f2b400;
	--eto-correct: #2f9e61;
	--eto-correct-bg: #eef8f2;
	--eto-mark: #fff2a8;
	--eto-wrong: #d04a4a;
	--eto-wrong-bg: #fdf0f0;
	--eto-lesson: #2f6fb0;
	--eto-lesson-bg: #eaf2fb;
}
.eto-quiz {
	max-width: 680px;
	margin: 0 auto 2em;
	color: var(--eto-ink);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 17px;
	line-height: 1.55;
}
.eto-quiz *, .eto-quiz *::before, .eto-quiz *::after { box-sizing: border-box; }
.eto-quiz [hidden] { display: none !important; }
.eto-quiz p { margin: 0 0 .6em; }
.eto-quiz :focus-visible { outline: 3px solid var(--eto-accent); outline-offset: 2px; }

/* Labels and meta line */
.eto-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: .5em; }
.eto-label {
	display: inline-block; padding: 2px 10px; border-radius: 999px;
	background: var(--eto-bg); border: 1px solid var(--eto-line);
	color: var(--eto-ink); font-size: 14px; font-weight: 600; text-decoration: none;
}
.eto-label:hover { border-color: var(--eto-accent); }
.eto-meta { color: var(--eto-muted); font-size: 15px; }
.eto-meta a { color: var(--eto-ink); font-weight: 600; }
.eto-done:empty { display: none; }
.eto-done { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--eto-correct-bg); color: var(--eto-correct); font-weight: 600; font-size: 14px; }

/* Rule box */
.eto-rule {
	background: var(--eto-bg); border: 1px solid var(--eto-line); border-left: 4px solid var(--eto-accent);
	border-radius: 14px; padding: 12px 16px; margin: .8em 0 0;
}
.eto-rule > strong { display: block; margin-bottom: .2em; }
.eto-rule-clamped:not(.eto-rule-open) { max-height: 7.2em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.eto-quiz .eto-more {
	background: none; border: 0; padding: 4px 0; margin: 0 0 .6em; color: var(--eto-ink);
	font: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; cursor: pointer;
}

/* "Show answers" — the no-JavaScript fallback only */
.eto-showall-box { position: absolute; opacity: 0; width: 1px; height: 1px; }
.eto-showall { display: inline-block; margin: .8em 0 0; font-size: 15px; cursor: pointer; text-decoration: underline; }
.eto-showall-box:focus-visible + .eto-showall { outline: 3px solid var(--eto-accent); }
.eto-js .eto-showall, .eto-js .eto-showall-box { display: none; }

/* Progress (sticks to the top while scrolling) */
.eto-progress {
	position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px;
	margin: 1em 0; padding: 10px 0; background: var(--eto-surface); font-size: 14px; color: var(--eto-muted);
}
.eto-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--eto-line); overflow: hidden; }
.eto-bar > span { display: block; width: 0; height: 100%; background: var(--eto-accent); transition: width .25s; }
.eto-right { min-width: 4.5em; text-align: right; color: var(--eto-correct); font-weight: 600; }
.eto-quiz:not(.eto-js) .eto-progress { display: none; }

/* Question cards */
.eto-card {
	background: var(--eto-surface); border: 1px solid var(--eto-line); border-radius: 14px;
	padding: 16px 18px; margin: 0 0 14px; scroll-margin-top: 60px;
}
.eto-passage { background: var(--eto-bg); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.eto-qn { color: var(--eto-muted); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.eto-qt { font-size: 18px; margin-bottom: 12px; }
.eto-qt p:last-child { margin-bottom: 0; }
.eto-opts { display: grid; gap: 8px; }
.eto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eto-stack { grid-template-columns: 1fr; }
.eto-quiz .eto-opt {
	display: flex; align-items: center; min-height: 44px; width: 100%; margin: 0;
	padding: 10px 14px; border: 1.5px solid var(--eto-line); border-radius: 10px;
	background: var(--eto-surface); color: var(--eto-ink);
	font: inherit; font-size: 17px; line-height: 1.35; text-align: left; text-transform: none; overflow-wrap: anywhere;
	cursor: pointer; transition: border-color .15s, background .15s;
}
.eto-quiz .eto-opt:hover:not(:disabled) { border-color: var(--eto-accent); background: var(--eto-bg); }
.eto-quiz .eto-opt:disabled { cursor: default; opacity: 1; }
.eto-quiz .eto-opt.eto-correct { border-color: var(--eto-correct); background: var(--eto-correct-bg); }
.eto-quiz .eto-opt.eto-correct::before { content: "✓"; margin-right: 8px; color: var(--eto-correct); font-weight: 700; }
.eto-quiz .eto-opt.eto-bad { border-color: var(--eto-wrong); background: var(--eto-wrong-bg); }
.eto-quiz .eto-opt.eto-bad::before { content: "✗"; margin-right: 8px; color: var(--eto-wrong); font-weight: 700; }
.eto-quiz mark { background: var(--eto-mark); color: inherit; padding: 0 .1em; border-radius: 2px; }
.eto-opt-t { min-width: 0; }
.eto-opt-l {
	flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px;
	border: 1.5px solid var(--eto-line); border-radius: 50%; background: var(--eto-bg);
	color: var(--eto-muted); font-size: 14px; font-weight: 700; line-height: 1;
}
.eto-quiz .eto-opt:hover:not(:disabled) .eto-opt-l { border-color: var(--eto-accent); color: var(--eto-accent); }
.eto-quiz .eto-opt.eto-correct .eto-opt-l { border-color: var(--eto-correct); background: var(--eto-correct); color: #fff; }
.eto-quiz .eto-opt.eto-bad .eto-opt-l { border-color: var(--eto-wrong); background: var(--eto-wrong); color: #fff; }
.eto-showall-box:checked ~ .eto-card .eto-opt[data-c="1"] .eto-opt-l { border-color: var(--eto-correct); background: var(--eto-correct); color: #fff; }
/* Practice round: questions already right shrink to one line */
.eto-collapsed { padding-top: 8px; padding-bottom: 8px; }
.eto-collapsed > :not(.eto-qn) { display: none !important; }
.eto-collapsed .eto-qn { margin: 0; }
.eto-collapsed .eto-qn::after { content: " · ✓ right"; color: var(--eto-correct); }
.eto-fb:empty { display: none; }
.eto-fb { margin-top: 10px; font-weight: 600; }
.eto-was-ok .eto-fb { color: var(--eto-correct); }
.eto-was-bad .eto-fb { color: var(--eto-wrong); }
.eto-ex { margin-top: 8px; padding: 10px 14px; border-radius: 10px; background: var(--eto-bg); font-size: 16px; }
.eto-ex p:last-child { margin-bottom: 0; }
/* Explanations stay folded until answered (JS) or until "Show answers" is ticked (no JS); they are always in the HTML. */
.eto-ex { display: none; }
.eto-open .eto-ex { display: block; }
.eto-showall-box:checked ~ .eto-card .eto-ex { display: block; }
.eto-showall-box:checked ~ .eto-card .eto-opt[data-c="1"] { border-color: var(--eto-correct); background: var(--eto-correct-bg); }

/* Ad spaces: the space is reserved so nothing jumps */
.eto-ad { min-height: 280px; margin: 0 0 14px; }

/* Result */
.eto-result {
	background: var(--eto-surface); border: 2px solid var(--eto-accent); border-radius: 14px;
	padding: 18px; margin: 0 0 14px; text-align: center;
}
.eto-score { font-size: 24px; font-weight: 700; }
.eto-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.eto-quiz .eto-actions button {
	min-height: 44px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid var(--eto-ink);
	background: var(--eto-surface); color: var(--eto-ink); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.eto-quiz .eto-actions .eto-retry-missed { background: var(--eto-ink); color: #fff; }
.eto-share-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.eto-share-menu a { color: var(--eto-ink); font-weight: 600; }

/* Print this test: two download tiles. The paper icon is CSS, so no image is loaded. */
.eto-pdfs {
	background: var(--eto-surface); border: 1px solid var(--eto-line); border-radius: 14px;
	padding: 16px 18px; margin: 0 0 14px; scroll-margin-top: 60px;
}
.eto-quiz .eto-pdfs-h { margin: 0 0 2px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--eto-ink); }
.eto-quiz .eto-pdfs-sub { margin: 0 0 12px; color: var(--eto-muted); font-size: 15px; }
.eto-pdfs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.eto-quiz .eto-pdf-tile {
	display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 14px;
	border: 1.5px solid var(--eto-line); border-radius: 12px; background: var(--eto-bg);
	color: var(--eto-ink); text-decoration: none; transition: border-color .15s, background .15s;
}
.eto-quiz .eto-pdf-tile:hover { border-color: var(--eto-accent); background: var(--eto-surface); }
.eto-pdf-icon {
	position: relative; flex: none; display: flex; align-items: flex-end; justify-content: center;
	width: 38px; height: 46px; padding-bottom: 5px; overflow: hidden;
	border: 1.5px solid var(--eto-line); border-radius: 6px; background: var(--eto-surface);
	font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1;
}
.eto-pdf-icon::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 9px; background: var(--eto-accent); }
.eto-pdf-answers .eto-pdf-icon::before { background: var(--eto-correct); }
.eto-pdf-txt { flex: 1; min-width: 0; line-height: 1.3; }
.eto-pdf-txt strong { display: block; font-size: 17px; }
.eto-pdf-txt span { font-size: 14px; color: var(--eto-muted); }
.eto-pdf-dl { flex: none; }

/* Related quizzes: numbered card rows. The link is stretched over the row; chips sit outside the link text. */
.eto-related { margin: 1.5em 0 0; }
.eto-quiz .eto-related h2 { margin: 0 0 2px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--eto-ink); }
.eto-quiz .eto-related-sub { margin: 0 0 12px; color: var(--eto-muted); font-size: 15px; }
.eto-quiz .eto-related-list { list-style: none; margin: 0; padding: 0; counter-reset: eto-rel; }
.eto-quiz .eto-related-list li {
	position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) 12px; column-gap: 12px; align-items: center;
	margin: 0 0 8px; padding: 12px 14px; counter-increment: eto-rel;
	background: var(--eto-surface); border: 1px solid var(--eto-line); border-radius: 12px; transition: border-color .15s, background .15s;
}
.eto-related-list li::before {
	content: counter(eto-rel); grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%; background: var(--eto-bg); border: 1px solid var(--eto-line);
	color: var(--eto-muted); font-size: 14px; font-weight: 700;
}
.eto-related-list li::after {
	content: ""; grid-column: 3; grid-row: 1 / span 2; width: 9px; height: 9px;
	border-top: 2px solid var(--eto-muted); border-right: 2px solid var(--eto-muted); transform: rotate(45deg);
}
.eto-quiz .eto-related-list a { grid-column: 2; color: var(--eto-ink); font-weight: 600; line-height: 1.35; text-decoration: none; }
.eto-related-list a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.eto-quiz .eto-related-list a:focus-visible { outline: none; }
.eto-quiz .eto-related-list li:focus-within { outline: 3px solid var(--eto-accent); outline-offset: 2px; }
.eto-quiz .eto-related-list li:hover { border-color: var(--eto-accent); background: var(--eto-bg); }
.eto-chips { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.eto-chip { padding: 0 8px; border-radius: 999px; background: var(--eto-bg); border: 1px solid var(--eto-line); font-size: 13px; line-height: 1.6; color: var(--eto-muted); }

/* "✓ best 13/16" on lists */
.eto-done-mark { margin-left: 6px; padding: 0 8px; border-radius: 999px; background: #eef8f2; color: #2f9e61; font-size: 13px; font-weight: 600; white-space: nowrap; }

@media (max-width: 540px) {
	.eto-pdfs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
	.eto-card { padding: 14px; }
	.eto-qt { font-size: 17px; }
	.eto-quiz .eto-opt { font-size: 16px; padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.eto-bar > span, .eto-quiz .eto-opt, .eto-quiz .eto-pdf-tile, .eto-quiz .eto-related-list li { transition: none; }
}

/* List pages: one text card per post (quiz or lesson) */
.eto-lc-item, .eto-lc-item.generate-columns { margin-bottom: 14px; padding: 0 7px; box-sizing: border-box; }
.eto-lc {
	position: relative; height: 100%; box-sizing: border-box; padding: 14px 16px 16px;
	background: var(--eto-surface); border: 1.5px solid var(--eto-line); border-radius: 12px; color: var(--eto-ink);
	transition: border-color .15s;
}
.eto-lc:hover { border-color: var(--eto-accent); }
.eto-lc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.eto-chip { padding: 2px 9px; border-radius: 999px; background: var(--eto-bg); color: var(--eto-muted); font-size: 12px; font-weight: 600; line-height: 1.6; }
.eto-chip-quiz { background: #fff5d6; color: #7a5a00; }
.eto-chip-lesson { background: var(--eto-lesson-bg); color: var(--eto-lesson); }
.eto-lc-t { margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.35; }
.eto-lc-t a { color: var(--eto-ink); text-decoration: none; }
.eto-lc-t a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; } /* the whole card is the link */
.eto-lc-t a:focus-visible { outline: none; }
.eto-lc:focus-within { border-color: var(--eto-accent); box-shadow: 0 0 0 3px #f2b40055; }
.eto-lc-m, .eto-lc-x { margin: 0; color: var(--eto-muted); font-size: 14px; line-height: 1.5; }
.eto-lc .eto-done-mark { position: relative; z-index: 1; display: inline-block; margin: 6px 0 0; }

/* Sidebar "Latest posts" / "Random posts": title links */
.eto-side {
	display: block; padding: 10px 12px; border: 1.5px solid var(--eto-line); border-radius: 10px;
	background: var(--eto-surface); color: var(--eto-ink); text-decoration: none; line-height: 1.35;
}
.eto-side:hover, .eto-side:focus-visible { border-color: var(--eto-accent); }
.eto-side-t { display: block; color: var(--eto-ink); font-size: 15px; font-weight: 600; } /* the sidebar makes link text white */
.eto-side-m { display: block; margin-top: 3px; color: var(--eto-muted); font-size: 13px; }