/**
* Worksheet styles — for section worksheets rendered as HTML
*/
/* Lettered question lists (a, b, c, ...).
Labels are CSS counters rather than native list markers: WebKit doesn't
paint an outside marker when the li's first child is a scroll container
(our pre blocks have overflow-x: auto) see: https://bugs.webkit.org/show_bug.cgi?id=13332 */
ol.questions {
list-style: none;
counter-reset: question;
margin-left: 2em;
margin-bottom: 1.5em;
}
ol.questions > li {
counter-increment: question;
position: relative;
margin-bottom: 1em;
padding-left: 0.25em;
}
ol.questions > li::before {
content: counter(question, lower-alpha) ".";
position: absolute;
left: -1.75em;
}
ol.questions > li > p:first-child {
margin-bottom: 0.5em;
}
/* Blank answer space — hidden on screen, blank space when printed */
.answer-space {
display: none;
}
/* Side-by-side code listings. Several short classes stacked vertically eat a
whole page for very little content, so lay them out in columns instead. The
wrapper needs markdown="block" so the fences inside still get processed:
```java ...``` ...
auto-fit means the column count follows the available width — two up in the
normal content column, one up on a narrow screen — with no per-use tuning.
The 21em floor is deliberate: it's about 40 monospace columns, so a track is
never too narrow to show a typical short listing in full. Below that the grid
drops to one column rather than squeezing. That matters most in print, where
a pre that overflows is simply clipped — there is no scrollbar to drag. */
.code-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(21em, 1fr));
gap: 1em;
/* Match the vertical rhythm of the .highlight blocks this replaces. */
margin: 5px 0 15px;
}
/* Grid items default to min-width:auto, which lets a long code line widen its
track and blow the row past the content column. Zero lets the pre's own
overflow-x handle it instead. The margins would fight `gap`, so drop them. */
.code-columns > .highlight,
.code-columns > pre {
min-width: 0;
margin: 0;
}
/* Give every listing in a row the same height, so neighbours line up at the
bottom instead of ending raggedly. The grid stretches the .highlight wrapper;
this passes that height down to the pre, which is what carries the border. */
.code-columns > .highlight {
display: flex;
flex-direction: column;
}
.code-columns > .highlight > pre {
flex: 1;
}
/* Bootstrap sets `pre code { white-space: pre-wrap }` and `pre { word-break:
break-all }`, which in a narrow column breaks lines mid-identifier. Scroll
the odd long line instead of mangling every one of them. */
.code-columns pre {
word-break: normal;
}
.code-columns pre code {
white-space: pre;
}
/* Specification comparison table — supports class on
or wrapper
*/
table.spec-table,
.spec-table table {
border-collapse: collapse;
margin: 1em auto;
}
table.spec-table th,
table.spec-table td,
.spec-table table th,
.spec-table table td {
border: 1px solid #333;
padding: 0.3em 1.2em;
text-align: center;
min-width: 3em;
font-weight: bold;
}
table.spec-table thead th,
.spec-table table thead th {
background-color: #f5f5f5;
}
table.spec-table tbody th,
.spec-table table tbody th {
background-color: #f5f5f5;
}
table.spec-table td:empty,
.spec-table table td:empty {
min-height: 1.5em;
}
/* Tables that group columns (e.g. a "circle one of two" pair under a shared
header) mark the groups with
; draw a heavier rule between them so
the grouping is visible and not just implied by the spanning header. Tables
without colgroups are unaffected. */
table.spec-table colgroup + colgroup,
.spec-table table colgroup + colgroup {
border-left: 2px solid #333;
}
/* Blank answer cells still need to be tall enough to write/mark in. */
table.spec-table tbody td:empty,
.spec-table table tbody td:empty {
height: 1.8em;
}
/* `question-rows`: a table that is really a sequence of questions. Each item is
a question row (the prompt, plus a circle-one answer) followed by a
full-width row for the written justification.
The justification gets its own row rather than a column because a column has
to share: once the other cells hold class names, which cannot wrap, whatever
is left over is under 200px. A row gets the whole table width. */
table.spec-table.question-rows,
.spec-table table.question-rows {
width: 100%;
}
table.spec-table.question-rows td,
.spec-table table.question-rows td {
padding-left: 0.6em;
padding-right: 0.6em;
vertical-align: top;
}
/* The prompt is a sentence, so left-align it, and band it so each item reads as
a prompt followed by blank space to fill in rather than as loose rows. The
answer cells stay white — they are what gets written in. */
table.spec-table.question-rows td.question,
.spec-table table.question-rows td.question {
text-align: left;
background-color: #f5f5f5;
}
/* Shrink-to-fit: 1% plus nowrap gives this column exactly the width of its
header and leaves all the rest to the question. */
table.spec-table.question-rows th:last-child,
table.spec-table.question-rows td.verdict,
.spec-table table.question-rows th:last-child,
.spec-table table.question-rows td.verdict {
width: 1%;
white-space: nowrap;
}
/* The justification is prose, not a label — no centring, no bold. */
table.spec-table.question-rows tr.answer-row > td,
.spec-table table.question-rows tr.answer-row > td {
text-align: left;
font-weight: normal;
padding-top: 0.4em;
padding-bottom: 0.4em;
}
/* Blank on the worksheet, so it needs room to write a sentence in. `:empty`
can't see that — the label is a child — so match on the label being the only
thing in the cell. With an answer after it, the row sizes to its content. */
table.spec-table.question-rows tr.answer-row > td:has(> .answer-label:only-child),
.spec-table table.question-rows tr.answer-row > td:has(> .answer-label:only-child) {
height: 5em;
}
/* Close each question + justification pair with a heavier rule, so this reads
as four items rather than eight rows. */
table.spec-table.question-rows tr.answer-row,
.spec-table table.question-rows tr.answer-row {
border-bottom: 2px solid #333;
}
/* The lead-in that says what the blank space is for. */
.answer-label {
font-weight: bold;
margin-right: 0.3em;
}
/* An answer mark inside a worksheet table, rendered only in the solutions
build. Styled like .solution so it reads as answer-key content. */
.soln-mark {
color: #0a3d91;
}
/* Check-one-box strip: a row of multiple-choice options under a question.
The box is drawn with a border rather than being a real , so it looks
the same on screen and on paper and there's nothing to (fail to) print. */
.choices {
display: flex;
flex-wrap: wrap;
gap: 0.4em 1.75em;
margin: 0.6em 0 0.25em;
}
.choices .choice {
display: inline-flex;
align-items: center;
gap: 0.45em;
}
.choices .choice-box {
flex: none;
width: 1.05em;
height: 1.05em;
border: 1px solid #333;
text-align: center;
line-height: 1.05em;
font-size: 0.95em;
font-weight: bold;
}
/* The marked answer, rendered only in the solutions build. */
.choices .choice-correct {
color: #0a3d91;
font-weight: bold;
}
.choices .choice-correct .choice-box {
border-color: #0a3d91;
}
/* Solution callouts */
.solution {
color: #0a3d91;
border-left: 3px solid #0a3d91;
padding-left: 1em;
margin: 0.5em 0;
}
/* Screen-reader-only label before each solution */
.solution::before {
content: "Solution: ";
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.solution p {
margin-bottom: 0.5em;
}
.solution ul {
margin-top: 0.25em;
margin-bottom: 0.5em;
}
/**
* Print-specific overrides for worksheets
*/
@media print {
/* Don't show link URLs in worksheet context */
a[href]::after {
content: "" !important;
}
/* Show answer spaces as blank space when printing */
.answer-space {
display: block;
min-height: 5em;
border: none;
}
/* Give code blocks a subtle background */
pre {
background-color: #f8f8f8 !important;
border: 1px solid #ccc !important;
}
/* Each task (h2) starts on a new page */
h2 {
page-break-before: always;
}
/* ...except the first one */
h2:first-of-type {
page-break-before: avoid;
}
/* Avoid page breaks inside questions, code blocks, tables */
ol.questions > li {
page-break-inside: avoid;
}
ol.questions > li > pre,
ol.questions > li > .answer-space {
page-break-inside: avoid;
}
table.spec-table,
.spec-table table,
.spec-table {
page-break-inside: avoid;
}
/* Never split a choice strip across pages, or orphan it from its question. */
.choices {
page-break-inside: avoid;
page-break-before: avoid;
}
/* Keep a set of side-by-side listings together on one page. */
.code-columns {
page-break-inside: avoid;
}
/* On screen an over-long line scrolls; on paper it would just be cut off.
Wrap it instead — ugly beats missing. */
.code-columns pre code {
white-space: pre-wrap;
}
/* Explicit page-break class for manual control:
*/
.page-break {
page-break-before: always;
break-before: page;
height: 0;
margin: 0;
border: 0;
}
/* Suppress a page break on a specific element: