/* * mcq.css — the multiple-choice question card, shared by every app in the estate. * * WHY THIS FILE EXISTS * The same question was being drawn three different ways: the Curriculum lesson player * (its own `.qz-*` rules in Curriculum/Css/lesson.css), the FlashCards study deck and the * Question Library (Tailwind classes built in QuestionGenerator/JS/QuestionRenderer.js), * and the live-lesson poll (Tailwind classes in LiveLessonServer/src/student/PollCard.tsx). * They disagreed on columns, on the option edge, and — the part that mattered to a student — * on how obviously a right answer was told apart from a wrong one. * * WHY PLAIN CSS AND NOT TAILWIND * The three hosts cannot all load the same Tailwind. Curriculum already ships hand-written * CSS precisely because tailwind.out.css is compiled from the ALMA repo and would not see * classes this app introduced; LiveLessonServer builds its own bundle entirely. Plain CSS * with its own tokens is the only mechanism all three can genuinely use. Decided by Andy, * 21 September 2026. * * WHO LOADS IT * Everything served from the ALMA web root gets it from Scripts/Courses/CourseHead.php. * The live lesson gets it from views/supporting/AppHead.ejs in LiveLessonServer: Apache * proxies /live to that Node app but still serves /CSS itself from this web root, which is * how that app already loads tailwind.out.css. So there is one copy of this file, not two — * do not add a second to any other repo. * * WHAT IT OWNS, AND WHAT IT DOES NOT * It owns the options and the mark: the option list, the letter chip, the chosen / right / * wrong / faded states, the verdict banner and the run-progress segments. It owns nothing * outside them. The lesson's badges and "Finish topic", the deck's spaced-repetition levels * and "Report a problem", the poll's teal bar and gold edge all stay with their own app — * which is why the three still look like three different places. */ :root { --mcq-ink: #0F1F2E; --mcq-muted: #64748B; --mcq-line: #E3E8EF; --mcq-card: #FFFFFF; --mcq-teal: #155E75; --mcq-teal-soft: #E3F1F5; --mcq-green: #15803D; --mcq-green-soft: #DCF5E4; --mcq-red: #E11D48; --mcq-red-soft: #FFE4EA; --mcq-gold: #D4AA3A; --mcq-radius: 14px; } /* ── The option list ────────────────────────────────────────────────────── * Short options pair up, long ones do not. The host decides which by adding * .mcq-opts--two, using the same test everywhere: four or more options, and * every one of them short. See mcqWantsTwoColumns() in QuestionRenderer.js * and wantsTwoColumns() in LiveLessonServer/src/shared/pollLayout.ts. * * Two columns is only ever an improvement while each option fits on one line. * A wide box split into two columns of wrapped text reads worse than one. */ .mcq-opts { display: grid; gap: 12px; grid-template-columns: 1fr; } .mcq-opts--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Narrower than this and a paired column is too tight for any real answer. */ @media (max-width: 620px) { .mcq-opts--two { grid-template-columns: 1fr; } } /* ── The option ─────────────────────────────────────────────────────────── * Works as a