/* The Weekly Quiz — engine styles (games build spec §C "Quiz").
 *
 * TOKENS ONLY. Every colour is var(--wp--preset--color--*), so Terminal's
 * token re-declaration (#33ff66 on #0a0f0a) and Rainbow's tokens both work
 * without a theme selector in this file. terminal.css leaves buttons inside
 * .rtg alone, so these rules carry the play state in every theme.
 *
 * States, never colour alone:
 *   - live option: 1px contrast box on base.
 *   - locked, right answer: INVERTED (contrast ground, base text), bold,
 *     solid 2px box, and a worded tag "✓ Right answer".
 *   - locked, wrong pick: struck through, DASHED 2px box, tag "✗ Your
 *     answer, wrong".
 *   - locked, neither: muted text on a hairline border-token box.
 *   - review: the pick/answer chips use the same inverted / struck-dashed
 *     idiom, and each question heads with "✓ Right" / "✗ Wrong".
 *
 * The Quiz may scroll the page (spec §C); nothing here fights for height.
 */

.rtg--quiz .rtg-stage {
	padding: .25rem 0 1rem;
}

.rtc-quiz,
.rtc-review {
	max-width: 40em;
}
.rtc-review:focus {
	outline: none;
}

/* Tally: "1 ✗  2 ✓  3  4  5" — 11px caps, the current one underlined. */
.rtc-tally {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1rem;
	list-style: none;
	margin: 0 0 .5rem;
	padding: 0;
	color: var(--wp--preset--color--muted);
}
.rtc-tally-item.is-right,
.rtc-tally-item.is-wrong {
	color: var(--wp--preset--color--contrast);
}
.rtc-tally-item.is-current {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: .2em;
}

.rtc-progress {
	color: var(--wp--preset--color--muted);
	margin: 0 0 .5rem;
}

.rtc-subtitle {
	margin: 0 0 .5rem;
	font-style: italic;
	color: var(--wp--preset--color--muted);
}

.rtc-q-text {
	font-family: var(--wp--preset--font-family--serif, serif);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 0 0 1rem;
}

.rtc-options {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin: 0 0 1rem;
}

.rtc-opt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .25rem .75rem;
	box-sizing: border-box;
	font: inherit;
	font-size: 1.0625rem;
	line-height: 1.35;
	text-align: left;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	box-shadow: none;
	padding: .75rem 1rem;
	min-height: 52px;
	width: 100%;
	margin: 0;
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color .12s, color .12s;
}
.rtc-opt:hover:not(:disabled) {
	background: var(--wp--preset--color--light);
}
.rtc-opt:focus-visible,
.rtc-next:focus-visible,
.rtc-source a:focus-visible {
	outline: 2px solid var(--wp--preset--color--clay-dark);
	outline-offset: 2px;
}
.rtc-opt:disabled {
	cursor: default;
	opacity: 1;
}
.rtc-opt.is-other {
	color: var(--wp--preset--color--muted);
	border-color: var(--wp--preset--color--border, #bbb);
}
.rtc-opt.is-correct {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--contrast);
	font-weight: 700;
}
.rtc-opt.is-wrong {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 2px dashed var(--wp--preset--color--contrast);
}
.rtc-opt.is-wrong .rtc-opt-text {
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}
.rtc-tag {
	white-space: nowrap;
	font-weight: 700;
}

.rtc-feedback[hidden] {
	display: none;
}
.rtc-feedback {
	border-top: 1px solid var(--wp--preset--color--border, #bbb);
	padding-top: .75rem;
}

.rtc-mark {
	font-weight: 700;
	margin: 0 0 .5rem;
}

.rtc-explain {
	margin: 0 0 .25rem;
	max-width: 42em;
}

/* The Source link is padded to a 44px tap target. */
.rtc-source {
	margin: 0 0 .5rem;
}
.rtc-source a {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	min-height: 44px;
	min-width: 44px;
	color: var(--wp--preset--color--clay-dark);
	text-decoration: underline;
	text-underline-offset: .15em;
}
.rtc-source-lab {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.rtc-next {
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-weight: 700;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	box-shadow: none;
	padding: .75rem 1.5rem;
	min-height: 44px;
	min-width: 44px;
	cursor: pointer;
	touch-action: manipulation;
}
.rtc-next:hover,
.rtc-next:focus-visible {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Review (the finished state). */
.rtc-score {
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 .75rem;
}

.rtc-breakdown {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--contrast);
}
.rtc-rev {
	border-bottom: 1px solid var(--wp--preset--color--border, #bbb);
	padding: .75rem 0 .25rem;
	margin: 0;
}
.rtc-rev-head {
	margin: 0 0 .25rem;
	color: var(--wp--preset--color--muted);
}
.rtc-verdict {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}
.rtc-rev.is-wrong .rtc-verdict {
	text-decoration: underline;
}
.rtc-rev-q {
	font-weight: 700;
	margin: 0 0 .5rem;
}
.rtc-rev-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem .75rem;
	margin: 0 0 .4rem;
}
.rtc-rev-lab {
	min-width: 8.5em;
	color: var(--wp--preset--color--muted);
}
.rtc-ans {
	padding: .1rem .5rem;
	border: 1px solid var(--wp--preset--color--contrast);
}
.rtc-ans.is-correct {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 700;
}
.rtc-ans.is-wrong {
	border-style: dashed;
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.rtc-opt {
		transition: none;
	}
}

/* The page template's `.wp-block-post-content p { margin-bottom: 1.4em }`
 * outranks single-class rules; restate each paragraph's margin at a
 * specificity that wins. */
.rtg p.rtc-explain {
	margin-bottom: .25rem;
}
.rtg p.rtc-mark {
	margin-bottom: .5rem;
}
.rtg p.rtc-progress {
	margin-bottom: .5rem;
}
.rtg p.rtc-score {
	margin-bottom: .75rem;
}
.rtg p.rtc-source {
	margin-bottom: .5rem;
}
.rtg p.rtc-subtitle {
	margin-bottom: .5rem;
}
.rtg p.rtc-rev-head {
	margin-bottom: .25rem;
}
.rtg p.rtc-rev-q {
	margin-bottom: .5rem;
}
.rtg p.rtc-rev-line {
	margin-bottom: .4rem;
}