/*
  Making History review questions — the look. Questions live in rounds.yml;
  the page in index.html. Cloned on 2026-10-06 from the pub trivia's
  trivia.css (../review-trivia/), keeping only what a question-then-answer
  walkthrough uses: the title cards, the question and answer screens, the
  bottom bar with its jump menu, and the error screen. Same palette and fonts
  as the lecture decks.

  Sizes are in vh/vw so the screen fills whatever the projector gives it.
  Question text is not sized here: index.html shrinks each one until it fits.
*/

:root {
	--bg: #0d1412;
	--panel: #111d1a;
	--text: #e6ece4;
	--muted: #9fb1a3;
	--border: #22302b;
	--green: #a8c686;
	--teal: #6fb3a0;
	--gold: #d9b26a;
	--gold-hi: #f2d08a;
	--red: #d98a6a;
	--serif: 'Fraunces', Georgia, serif;
	--sans: 'Inter', system-ui, sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }

#app {
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	gap: 1.2vh;
	padding: 1.6vh 1.4vw;
}

/* ---------- header, nav and buttons ---------- */

.bar, .nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.eyebrow {
	margin: 0;
	font-family: var(--mono);
	font-size: clamp(10px, 1.35vh, 15px);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--teal);
}
.eyebrow b { color: var(--gold); font-weight: 500; }
.tools { display: flex; gap: .5rem; flex-wrap: wrap; }
.nav .where { font-family: var(--mono); font-size: clamp(10px, 1.35vh, 15px); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.nav .mid { display: flex; align-items: center; justify-content: center; gap: 1.2rem; flex-wrap: wrap; min-width: 0; }
/* The jump menu: styled like the buttons, dark when it opens. */
#jump {
	max-width: 40vw;
	font-family: var(--mono);
	font-size: clamp(10px, 1.45vh, 17px);
	letter-spacing: .06em;
	color: var(--text);
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: .55em .8em;
	cursor: pointer;
	color-scheme: dark;
}
#jump:hover { border-color: var(--teal); }
#jump:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.btn {
	font-family: var(--mono);
	font-size: clamp(10px, 1.45vh, 17px);
	letter-spacing: .1em;
	text-transform: uppercase;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: .65em 1.1em;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { border-color: var(--teal); background: rgba(111,179,160,.08); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn.primary { background: var(--gold); border-color: var(--gold); color: #0d1412; font-weight: 500; }
.btn.primary:hover { background: var(--gold-hi); border-color: var(--gold-hi); }
.btn.big { font-size: clamp(12px, 2vh, 22px); padding: .8em 1.6em; }
.btn.armed { border-color: var(--red); color: var(--red); }
.btn kbd { font-family: var(--mono); font-size: .8em; opacity: .65; margin-left: .6em; }
.btn:disabled { opacity: .35; cursor: default; }

/* ---------- the screen every step is drawn on ---------- */

#main { position: relative; flex: 1; min-height: 0; }
.screen {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 2vh;
	padding: 3.5vh 4vw 3vh;
	border-radius: 6px;
	border: 1px solid #1c3d35;
	background: radial-gradient(ellipse 80% 70% at 50% 42%, #17392f 0%, #10241f 55%, #0d1412 100%);
	overflow: hidden;
	animation: fade .3s ease-out;
}
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

.head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	font-family: var(--mono);
	font-size: clamp(11px, 2vh, 24px);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--teal);
}
.head .num { color: var(--gold); }
.head .pts { color: var(--muted); margin-left: 1em; }

/* Round title card */
.card {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.4vh;
	text-align: center;
}
.card .round-no {
	margin: 0;
	font-family: var(--mono);
	font-size: clamp(14px, 2.8vh, 32px);
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--teal);
}
.card h2 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 700;
	font-size: clamp(40px, 13vh, 170px);
	line-height: .95;
	color: var(--gold);
	text-shadow: 0 .05em 0 rgba(0,0,0,.45);
	animation: rise .6s ease-out;
}
.card h2.sm { font-size: clamp(32px, 10vh, 130px); }
.card .intro {
	margin: 0;
	max-width: 34ch;
	font-family: var(--serif);
	font-size: clamp(18px, 3.6vh, 44px);
	line-height: 1.3;
	color: var(--green);
	animation: rise .6s .15s ease-out both;
}
.card .meta {
	margin: 0;
	font-family: var(--mono);
	font-size: clamp(11px, 1.9vh, 21px);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	animation: rise .6s .3s ease-out both;
}
.card .meta b { color: var(--gold); font-weight: 500; }

/* A question, and the same question with its answer */
.q-main {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 3.5vw;
}
.q-fig {
	flex: 0 1 50%;
	min-width: 0;
	margin: 0;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	justify-items: center;
	gap: 1vh;
}
.q-fig.tall { flex-basis: 34%; }
.q-fig.alone { flex-basis: 100%; }
.q-fig img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: contain;
	filter: drop-shadow(0 10px 28px rgba(0,0,0,.55));
}
.credit {
	margin: 0;
	font-family: var(--mono);
	font-size: clamp(9px, 1.2vh, 13px);
	color: var(--muted);
	text-align: center;
	line-height: 1.4;
}
.q-box {
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.q-text {
	margin: 0;
	max-width: 30ch;
	font-family: var(--serif);
	font-weight: 500;
	line-height: 1.22;
	text-align: center;
	text-wrap: balance;
}
.has-fig .q-text { text-align: left; max-width: none; }

.prompt, .bank {
	margin: 0;
	text-align: center;
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(16px, 3vh, 36px);
	color: var(--teal);
}
.bank {
	font-style: normal;
	font-family: var(--mono);
	font-size: clamp(12px, 2.1vh, 24px);
	letter-spacing: .04em;
	line-height: 1.7;
	color: var(--green);
}
.bank span { white-space: nowrap; }
.bank span + span::before { content: '·'; color: var(--muted); margin: 0 .7em; }

.answer { text-align: center; animation: rise .35s ease-out; }
.answer .resp {
	margin: 0 auto;
	max-width: 52ch;
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(22px, 5.2vh, 64px);
	line-height: 1.15;
	color: var(--gold);
}
.answer .resp.long { font-size: clamp(16px, 3vh, 34px); font-weight: 500; line-height: 1.35; text-align: left; }
.answer .meta {
	margin: .9vh 0 0;
	font-family: var(--mono);
	font-size: clamp(10px, 1.45vh, 16px);
	color: var(--muted);
	line-height: 1.5;
}
.answer .meta .acc { color: var(--green); }
.answer .context {
	display: inline-block;
	margin: 1.2vh 0 0;
	padding: .35em .8em;
	border: 1px solid var(--border);
	border-left: 3px solid var(--teal);
	border-radius: 4px;
	font-family: var(--mono);
	font-size: clamp(10px, 1.6vh, 18px);
	color: var(--text);
	background: rgba(13,20,18,.55);
}


/* ---------- error screen ---------- */

.setup {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.6vh;
	text-align: center;
	overflow-y: auto;
}
.trouble { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 4.6vh, 52px); color: var(--gold); }
.detail {
	margin: 0;
	max-width: min(100%, 76em);
	max-height: 60vh;
	overflow: auto;
	text-align: left;
	white-space: pre-wrap;
	font-family: var(--mono);
	font-size: clamp(11px, 1.7vh, 17px);
	line-height: 1.5;
	background: rgba(13,20,18,.75);
	border: 1px solid var(--border);
	border-left: 4px solid var(--red);
	border-radius: 4px;
	padding: 1em 1.3em;
}

/* ---------- motion and small screens ---------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 640px) {
	#app { padding: 10px 8px; }
	.q-main.has-fig { flex-direction: column; }
	.q-fig { flex: 0 1 40%; }
	.has-fig .q-text { text-align: center; }
	.row { grid-template-columns: 2.4em minmax(0, 1fr) auto; }
}