@charset "UTF-8";
/* ==========================================================================
   Economic Trivia — v7 "Deck"
   --------------------------------------------------------------------------
   The quiz card in the sidebar of single posts. It reads as one of the
   reference's numbered index cards: an outlined panel, the question number
   set large in the display face, a hairline under it, then the question and a
   pair of pill controls.

   The answer reveal is the card's one inverted moment — a black well inside
   the light panel — which is the same emphasis-by-inversion the rest of the
   design uses.

   Class names are generated by assets/js/economic-trivia.js and must not
   change: .economic-trivia-widget, .trivia-header, .trivia-title,
   .trivia-subtitle, .trivia-question-container, .trivia-question,
   .question-number, .question-text, .trivia-answer (+ .show), .answer-label,
   .answer-text, .trivia-controls, .trivia-btn (+ .btn-show-answer, .btn-next,
   .btn-restart), .trivia-progress, .progress-info, .trivia-complete,
   .complete-icon, .complete-message, .complete-stats, .trivia-loading,
   .trivia-error, .loading-spinner.
   ========================================================================== */

.economic-trivia-widget {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* ── The header ──────────────────────────────────────────────────────────── */
.trivia-header {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--line);
}

.trivia-title {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: var(--track-tight);
	color: var(--ink-100);
}

.trivia-subtitle {
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
}

/* ── The question ────────────────────────────────────────────────────────── */
.trivia-question-container {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.trivia-question {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

/* The numeral, set like an index card's — the widget prints it as
   "Question 3", which reads correctly at this size. */
.question-number {
	font-family: var(--font-display);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
}

.question-text {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: var(--track-tight);
	color: var(--ink-100);
	text-wrap: balance;
}

/* ── The answer reveal ───────────────────────────────────────────────────
   Collapsed until the widget adds .show. Animating max-height rather than
   height keeps it working without measuring the content. */
.trivia-answer {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	padding: 0 clamp(0.85rem, 1.8vw, 1.1rem);
	background: var(--dark);
	border-radius: var(--radius);
	transition: max-height 0.45s var(--ease-out), opacity 0.35s var(--ease),
		padding 0.45s var(--ease-out);
}

.trivia-answer.show {
	max-height: 420px;
	opacity: 1;
	padding: clamp(0.85rem, 1.8vw, 1.1rem);
}

.answer-label {
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--on-dark-dim);
	margin-bottom: 0.4rem;
}

.answer-text {
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--on-dark);
}

/* ── The controls ────────────────────────────────────────────────────────── */
.trivia-controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.trivia-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.65em 1.2em;
	border: 1px solid var(--line-firm);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--ink-300);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.trivia-btn:hover:not([disabled]) {
	background: var(--ink-100);
	border-color: var(--ink-100);
	color: var(--plate-pure);
	transform: translateY(-1px);
}

/* "Show Answer" is the primary action while the answer is hidden, so it takes
   the one filled pill — the same rule the rest of the design follows. */
.btn-show-answer {
	background: var(--ink-100);
	border-color: var(--ink-100);
	color: var(--plate-pure);
}

.btn-show-answer:hover:not([disabled]) {
	background: var(--dark-3);
	border-color: var(--dark-3);
}

.trivia-btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
}

.trivia-progress {
	margin-left: auto;
}

.progress-info {
	font-family: var(--font-display);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ink-500);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ── The completion state ────────────────────────────────────────────────── */
.trivia-complete {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
	padding: clamp(1rem, 2.2vw, 1.5rem) 0;
}

.complete-icon {
	font-size: 1.9rem;
	line-height: 1;
}

.complete-message {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 700;
	letter-spacing: var(--track-tight);
	color: var(--ink-100);
}

.complete-stats {
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--ink-400);
	margin-bottom: 0.5rem;
}

.btn-restart {
	background: var(--ink-100);
	border-color: var(--ink-100);
	color: var(--plate-pure);
}

.btn-restart:hover:not([disabled]) {
	background: var(--dark-3);
	border-color: var(--dark-3);
}

/* ── Loading and error states ────────────────────────────────────────────── */
.trivia-loading,
.trivia-error {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	min-height: 140px;
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--ink-400);
	text-align: center;
}

/* The spinner is shared with the quotes widget, which declares the keyframes.
   Both stylesheets are enqueued independently, so it is redeclared here —
   identical @keyframes of the same name collapse harmlessly. */
.trivia-loading .loading-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid var(--line);
	border-top-color: var(--ink-100);
	border-radius: 50%;
	animation: st-spin 0.8s linear infinite;
}

@keyframes st-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.trivia-answer {
		transition-duration: 1ms;
	}

	.trivia-loading .loading-spinner {
		animation-duration: 2s;
	}
}