/* Quote Guesser: the quote and four answer buttons. The page shell comes from year.css. */
.question-card { margin: 0 0 14px; padding: 20px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--rx-lg, 3px); }
.question-card h1 { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.kind-chip { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--pill, 3px); color: var(--muted); font-size: 12px; font-weight: 600; text-transform: capitalize; }
.choice-list { display: grid; gap: 10px; }
.choice {
  appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; text-align: left;
  background: var(--card-2, var(--card)); color: var(--ink); border: 2px solid var(--line); border-radius: var(--rx-sm, 3px);
  font: inherit; font-size: 16px; font-weight: 500; line-height: 1.3; cursor: pointer; overflow-wrap: anywhere;
}
.choice:hover:not(:disabled) { border-color: var(--accent); }
.choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice-key { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--rx-sm, 3px); color: var(--muted); font-size: 13px; font-weight: 700; }
.choice[aria-pressed="true"] { border-color: var(--accent); }
.choice:disabled { cursor: default; }
/* after answering: the right answer is gold, a wrong pick is dimmed with a strike */
.choice.is-right { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.choice.is-right .choice-key { border-color: currentColor; color: inherit; }
.choice.is-wrong { opacity: 0.55; text-decoration: line-through; }
.answer-verdict { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--accent); }
.answer-verdict.is-wrong { color: var(--muted); }
.answer { margin-top: 14px; }
@media (min-width: 641px) {
  .stage { max-width: 640px; }
  .question-card h1 { font-size: 26px; }
  .choice-list { grid-template-columns: 1fr 1fr; }
}
/* quotes are long: smaller, italic, and the name of the speaker shown after answering */
.question-card h1 { font-size: 19px; font-style: italic; line-height: 1.45; font-weight: 500; }
.answer-who { margin-top: 2px; color: var(--ink); font-size: 16px; font-weight: 600; }
@media (min-width: 641px) { .question-card h1 { font-size: 23px; } }