/* ===========================================================================
   THE APPEARANCE RULES FOR THE WHOLE COURSE.

   This file is the other half of the contract. A lesson file marks what a
   thing IS — a main edge, a hidden edge, an emphasised arc, 30 mm of reserved
   working space — and this file decides what that looks like. No lesson file
   anywhere in the course contains a colour, a thickness, a font or a size.

   Every number here comes from project/appearance-standard.md, and the section
   of that document is named above each group. Changing the look of a hundred
   and thirty lessons is an edit to this file.

   The screen and the printed sheet share it. Anything that is only about paper
   — sheet size, margins, where a page may break — lives in print.css.

   ---------------------------------------------------------------------------
   ONE THING A DRAWING MUST DO, WRITTEN HERE BECAUSE IT IS ENFORCED HERE.

   Inside a compiled drawing, one SVG user unit is one millimetre. Every figure
   in the course is authored that way (`width="62mm"` with a viewBox 62 wide),
   because the standard states line weights in millimetres and this file has no
   other way to reach them: `stroke-width: 0.35px` below is 0.35 user units,
   and that is 0.35 mm only if the figure keeps to the scale. A figure drawn at any
   other scale gets the wrong line weights, silently.
   =========================================================================== */

/* --- the typeface -------------------------------------------------------- *
   Standard §3. XCharter lives in the site as files and is not installed on any
   machine, so a lesson prints identically wherever the site runs.            */

@font-face {
  font-family: 'XCharter';
  src: url('fonts/XCharter-Roman.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'XCharter';
  src: url('fonts/XCharter-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: 'XCharter';
  src: url('fonts/XCharter-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

:root {
  /* Type — standard §3 */
  --content-font: 'XCharter', Charter, Georgia, 'Times New Roman', serif;
  --content-size: 12pt;
  --content-leading: 1.45;
  --heading-size: 13pt;
  --note-size: 9pt;

  /* Ink. Every grey is a percentage of black, because that is what the
     standard states and what a toner printer actually lays down. Standard §8:
     when in doubt about a grey, go darker. */
  --ink: #000000;
  --grey-35: #a6a6a6;       /* the only fill the course uses          §4.2 sh */
  --grey-50: #808080;        /* grid and rule lines                       §5 */
  --grey-60: #666666;        /* auxiliary lines, notes under a drawing §4.2 */

  /* Line weights, in millimetres — standard §4.2. Named so that the table in
     the standard and the rules below can be read side by side. */
  --w-edge: 0.35;
  --w-edge-hidden: 0.25;
  --w-emphasis: 0.6;
  --w-aux: 0.25;
  --w-gauge: 0.25;
  --w-cut: 0.2;
  --w-right-angle: 0.25;
  --w-angle-mark: 0.25;
  --w-tick: 0.35;
  --w-parallel: 0.45;
  --w-rule: 0.25;
  --w-pointer: 0.3;
  --w-paper: 0.35;

  /* Text inside a drawing — standard §3 and §4.2. The standard states a cap
     height; XCharter's capital is 671/1000 of its em, so a 3.2 mm capital
     needs a 4.77 mm em, and a 2.8 mm capital a 4.17 mm one. */
  --figure-text: 4.17;
  --figure-note-text: 3.58;

  /* Rhythm */
  --gap-chunk: 6mm;
  --gap-block: 3.2mm;
  /* A drawing sits closer to the sentence that introduces it than an
     ordinary paragraph does: it belongs to that sentence. */
  --gap-figure: 1.6mm;

  /* A compiled formula is drawn at the size it was compiled at times this
     factor — standard §3. The size itself is carried by the drawing's own
     viewBox and applied by compiled-size.js. */
  --formula-scale: 1;
}

/* --- the chunk ---------------------------------------------------------- */

.lesson-content {
  font-family: var(--content-font);
  font-size: var(--content-size);
  line-height: var(--content-leading);
  color: var(--ink);
}

.lesson-content .lesson-chunk {
  margin: 0;
}

.lesson-content .lesson-chunk + .lesson-chunk {
  margin-top: var(--gap-chunk);
}

.lesson-content p {
  margin: 0 0 var(--gap-block);
}

.lesson-content p:last-child {
  margin-bottom: 0;
}

.lesson-content ul,
.lesson-content ol {
  margin: 0 0 var(--gap-block);
  padding-left: 6mm;
}

.lesson-content li {
  margin-bottom: 1mm;
}

.lesson-content li:last-child {
  margin-bottom: 0;
}

/* --- named marks (recording rules §6) ------------------------------------ *
   Standard §3: a heading has the weight of a heading without the size of one.
   Nothing here is larger, heavier or more decorated. The target is a
   scientific paper, never a middle-school worksheet.                        */

.lesson-content .heading {
  font-family: var(--content-font);
  font-size: var(--heading-size);
  font-weight: 700;
  margin: 0 0 var(--gap-block);
}

.lesson-content .task {
  margin: 0 0 var(--gap-block);
}

.lesson-content .task:last-child {
  margin-bottom: 0;
}

/* Parts of a task: (a), (b), (c). The letter belongs to the task and is stored
   with it; the task's own number is computed at assembly and never stored. */
/* The indent holds the widest label the course actually uses, and a gap after
   it. Measured in the sheet's own face at the sheet's own size: "(a)" is
   2.07 mm, "(iii)" 6.99 and "(vii)" 7.87 — and "(vii)" is in use. At the old
   7 mm indent with a 6 mm box, "(iii)" overflowed the box and left 0.6 mm
   before its own line, which reads as none, and "(vii)" ran 0.87 mm into the
   text. Lesson 05-02 printed "(iii)∠4 and ∠6"; 05-02 and 10-11 each worked
   round it in their own material and in different ways, which is how one course
   ends up printing a label two ways.
   A label wider than the 8 mm box would touch its line again: "(viii)" is
   9.04 mm and nothing uses it. Eight lettered parts on one task is itself a
   sign the task wants splitting, so the box is not widened for it. */
.lesson-content ol.subtasks {
  list-style: none;
  padding-left: 9mm;
}

.lesson-content .subtask {
  position: relative;
  margin-bottom: 2mm;
}

.lesson-content .subtask > .subtask-label {
  position: absolute;
  left: -9mm;
  width: 8mm;
}

/* THE LETTER ON THE FIRST LINE'S BASELINE. Pinned to the top of the line box it
   floated a line above its own words wherever that line held a fraction set in
   two storeys — eight parts of lesson 13-03. The letter and the body are lined
   up by their baselines instead, which is what a reader looks for.

   `baselined` is on a part built after 7 September 2026 and says the body is
   wrapped. A lesson built before it has no wrapper and keeps the rule above, so
   nothing prints wrongly while the lessons are rebuilt one at a time. When
   every lesson carries it, the rule above and this class both go and this
   becomes the only rule. */
.lesson-content .subtask.baselined {
  position: static;
  display: flex;
  align-items: baseline;
  margin-left: -9mm;
}

.lesson-content .subtask.baselined > .subtask-label {
  position: static;
  flex: 0 0 9mm;
  width: auto;
}

.lesson-content .subtask.baselined > .subtask-body {
  flex: 1 1 auto;
  min-width: 0;
}

.lesson-content .subtask.baselined > .subtask-body > :last-child {
  margin-bottom: 0;
}

/* A definition, a theorem, a postulate, a convention, a worked example: set
   apart by a rule down the side rather than by a box, which copies better and
   crowds less.

   A POSTULATE IS DRAWN EXACTLY AS A THEOREM IS, and that is deliberate. The two
   differ in where they come from and not in how a student reads them, so the
   sheet gives them one appearance and the sentence inside says which it is. The
   name exists because on route B1 a criterion is accepted without proof while on
   route A the same sentence is proved, and a box marked `theorem` on a page that
   says "postulate" is a lesson disagreeing with itself. */
.lesson-content .given-prove,
.lesson-content .definition,
.lesson-content .theorem,
.lesson-content .postulate,
.lesson-content .worked-example,
.lesson-content .hint {
  border-left: 0.5mm solid var(--ink);
  padding: 0.5mm 0 0.5mm 3mm;
  margin: 0 0 var(--gap-block);
}

.lesson-content .hint {
  border-left-color: var(--grey-60);
  font-style: italic;
}

.lesson-content .formula-strip {
  border-top: 0.25mm solid var(--ink);
  border-bottom: 0.25mm solid var(--ink);
  padding: 2mm 0;
  margin: 0 0 var(--gap-block);
}

/* A list of claims to judge, or of student work to diagnose. Numbered, plain:
   a box round it would say "activity" where the page already says so. */
.lesson-content .error-analysis {
  margin: 0 0 var(--gap-block);
}

.lesson-content .matching li,
.lesson-content .ordering li {
  margin-bottom: 2mm;
}

/* A variable. The mark says "this letter is a variable"; italic is what the
   course draws that as, and mathematics has drawn it that way for 300 years. */
.lesson-content var {
  font-style: italic;
}

.lesson-content .note {
  font-size: var(--note-size);
  color: var(--grey-60);
}

/* --- tables (standard §7) ------------------------------------------------ *
   A table is a table, not a picture. Rules 0.25 mm black; the header bold at
   10 pt; a body row 10 mm unless the author asked for taller; text centred
   vertically, so that a half-filled table stops looking broken.             */

.lesson-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 var(--gap-block);
  /* A long table may break at a row boundary, never inside a row. */
  break-inside: auto;
  page-break-inside: auto;
}

.lesson-content th,
.lesson-content td {
  border: 0.25mm solid var(--ink);
  /* The height the author states is the height the row prints at: padding and
     rule are inside it, not added to it. */
  box-sizing: border-box;
  padding: 0.8mm 2mm;
  text-align: left;
  vertical-align: middle;
  /* A blank row and a filled row of one table are the same height, or the
     worksheet and the answers would break in different places. */
  height: 10mm;
}

.lesson-content tr {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Every header cell, wherever it stands. A two-way sort has headers on both
   axes and its left column is as much a header as its top row; this used to
   say `thead th`, so a header in the body inherited the 12 pt of the sheet and
   one table printed its two headers a fifth apart in size (D-237). Only `th`
   is affected, and every `th` in the course was already 10 pt. */
.lesson-content th {
  font-size: 10pt;
  font-weight: 700;
}

.lesson-content thead {
  /* A table never begins on one sheet with its heading left on the one before. */
  break-after: avoid;
  page-break-after: avoid;
}

/* The author states a row height where the work needs more than one line.
   10 mm is the floor and holds one line of a sixteen-year-old's handwriting. */
/* A column's share of the table, stated on the column the way a row's height
   is stated on the row. Fixed layout is what makes the number the truth: left
   to itself the browser shares the width out by what is already printed in the
   cells, which starves the empty column the student writes in. */
.lesson-content table {
  table-layout: fixed;
}

.lesson-content col[data-col-width] {
  width: attr(data-col-width type(<percentage>), auto);
}

.lesson-content td[data-row-height] {
  height: attr(data-row-height type(<length>), 10mm);
}

/* --- drawings (standard §4) ---------------------------------------------- *
   A drawing is printed at its own width, which it carries itself, up to the
   text column. It is never forced to a course-wide width: this lesson holds
   figures from 52 mm to 165 mm, and squeezing a wide one narrow makes its
   labels unreadable.                                                        */

.lesson-content .figure {
  margin: var(--gap-figure) 0;
  text-align: center;
  /* A drawing is never separated from itself across a sheet. */
  break-inside: avoid;
  page-break-inside: avoid;
}

.lesson-content .figure svg {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.lesson-content .figure figcaption {
  font-size: var(--note-size);
  color: var(--grey-60);
  margin-top: 1mm;
}

/* Every line in a drawing is black, grey or white — standard §4.3. Nothing is
   ever filled unless it says so, because an unstyled SVG line falls back to
   solid black fill and prints as a blob. That failure is the reason this
   whole file exists; the rule below is what makes it impossible. */
.lesson-content .figure svg path,
.lesson-content .figure svg line,
.lesson-content .figure svg circle,
.lesson-content .figure svg ellipse,
.lesson-content .figure svg polyline,
.lesson-content .figure svg polygon {
  fill: none;
  stroke: var(--ink);
  stroke-width: var(--w-aux);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: none;
}

/* --- the closed list of marks (standard §4.2) ---------------------------- *
   An author uses these and no others. A drawing needing something not here is
   a request to extend the list, not a licence to invent a class.

   Lengths below are written in px because that is how CSS reaches SVG user
   units, and one user unit is one millimetre. See the note at the head. */

/* a main edge — the outline of a solid, the rim of a circle */
.lesson-content .figure .e {
  stroke-width: calc(var(--w-edge) * 1px);
}

/* a hidden edge — behind the solid */
.lesson-content .figure .eh {
  stroke-width: calc(var(--w-edge-hidden) * 1px);
  stroke-dasharray: 2 1.5;
}

/* an auxiliary line — a height, an axis, a line of symmetry */
.lesson-content .figure .aux {
  stroke-width: calc(var(--w-aux) * 1px);
  stroke: var(--grey-60);
}

/* An auxiliary line drawn across squared paper. The same stroke as `aux` and
   the same width; black instead of 60 % grey, because the squares are 50 % grey
   and at 0.25 mm the two are one line wherever the auxiliary runs along a
   ruling — which it does every time the distance from a point to a horizontal
   directrix is drawn on a plane and the point stands at a whole number. In
   lesson 12-12 that swallowed one of the two distances the whole activity turns
   on, and in Going Deeper it swallowed the drawn answer to the task, leaving a
   right-angle mark belonging to nothing. Compiled and looked at four ways: at
   0.30 mm the grey is still invisible, so the ink is the lever and the width is
   not. Not heavier than 0.25 mm: the two lines of the plane are 0.35 mm black,
   and a distance drawn in is not one of them. Granted by the Product Owner,
   7 September 2026. */
.lesson-content .figure .auxb {
  stroke-width: calc(var(--w-aux) * 1px);
}


/* a dimension line with its arrows */
.lesson-content .figure .gauge {
  stroke-width: calc(var(--w-gauge) * 1px);
}

.lesson-content .figure .gauge-head {
  fill: var(--ink);
  stroke: none;
}

/* The face a cutting plane makes. Hatched rather than filled: hatching is
   lines, and lines survive a photocopier where a pale fill does not —
   standard §4.3. It is not stroked and it is not opaque, because a section is
   drawn inside a whole solid: its own rim is drawn separately, near half solid
   and far half dashed, and everything else inside the solid shows through it
   as the hidden thing it is. */
.lesson-content .figure .cutface {
  fill: url(#hatch45) none;
  stroke: none;
}

/* The line of a cutting plane, and the part of a section's rim that is drawn
   solid. 0.20 mm, the thinnest this standard allows inside a figure: a section
   is read by its shape, and a heavy rim round a hatched face reads as an edge
   of the solid. */
.lesson-content .figure .cut {
  stroke-width: calc(var(--w-cut) * 1px);
}

/* a shaded face or region */
.lesson-content .figure .sh {
  fill: var(--grey-35);
  stroke: none;
}

/* the right-angle mark */
.lesson-content .figure .rt {
  stroke-width: calc(var(--w-right-angle) * 1px);
}

/* a marked point */
.lesson-content .figure .dot {
  fill: var(--ink);
  stroke: none;
}

/* an emphasised stretch of an edge or rim — the arc a task is about */
.lesson-content .figure .eb {
  stroke-width: calc(var(--w-emphasis) * 1px);
}

/* an angle mark — the small arc drawn across an angle */
.lesson-content .figure .am {
  stroke-width: calc(var(--w-angle-mark) * 1px);
}

/* the same, dashed — an angle being asked about rather than stated */
.lesson-content .figure .amd {
  stroke-width: calc(var(--w-angle-mark) * 1px);
  stroke-dasharray: 1 1;
}

/* a tick of equality — one, two or three strokes across a segment or arc */
.lesson-content .figure .tk {
  stroke-width: calc(var(--w-tick) * 1px);
}


/* an arrowhead of parallelism — one or two on each line of a parallel pair.
   Open, not filled: a filled head is a dimension line's arrow, and the two must
   not be confused on one sheet. */
.lesson-content .figure .pl {
  stroke-width: calc(var(--w-parallel) * 1px);
  fill: none;
}

/* An arrowhead at the end of a line, saying the line does not stop there — a
   number line's two ends, and the ends of a line named m or n. Open and narrow:
   filled is a dimension line's arrow, and the arrowhead of parallelism is wide
   and stands in the middle of its line. Both appear on one figure in a lesson
   on parallel lines. */
.lesson-content .figure .ah {
  stroke-width: calc(var(--w-edge) * 1px);
  fill: none;
}

/* one line of a grid, a rule or a scale — standard §5, "anything with a
   measurable step". The standard settled these two numbers on a printed sheet
   and the variables for them have stood in this file since; what was missing
   was the name that reaches them, because until the lesson on reflections in
   the coordinate plane nothing in the course drew squared paper. Every line is
   drawn explicitly with its own coordinates, never as a background or a
   pattern: both of those were tried and both dropped lines on the sheet.

   Lighter than an auxiliary line on purpose. A grid is the paper, not part of
   the figure, and at 60 % grey a lattice of twenty-six lines competes with the
   mirror drawn across it. */
.lesson-content .figure .grid {
  stroke-width: calc(var(--w-rule) * 1px);
  stroke: var(--grey-50);
}

/* An arrow running from one part of a drawing to another and carrying a word:
   the second group's marked angles came out of the first group's congruence,
   by CPCTC. It is what says one thing *came out of* another, and the course had
   nothing for it — three lessons asked and each did without.

   A dimension line was the nearest thing and it is not one: a dimension spans a
   measurement and has a head at each end, where this has one head and runs
   between two regions. It is told apart from that by having one head, and by
   the head being three millimetres against a dimension arrow's 1.6 — twice the
   size, so the two cannot be read for each other at arm's length on a copier.

   The shaft is 0.30 mm: heavier than an auxiliary line, which is a part of the
   figure, and lighter than a main edge, which this is not. */
.lesson-content .figure .ptr {
  stroke-width: calc(var(--w-pointer) * 1px);
}

/* The head of that arrow, and of the arrow of a turn. Filled, like a dimension
   line's, because the two open heads the course already has are spoken for: the
   wide one means a pair of parallel lines and the narrow one means a line goes
   on, and a student who meets a third open head has been given a third thing to
   learn about arrowheads. One filled head, one meaning: direction. */
.lesson-content .figure .ptr-head {
  fill: var(--ink);
  stroke: none;
}

/* The arrow that says which way round: a car driven round a hexagon, a figure
   turned about a centre. It is the same head on a curved shaft.

   It exists because the arrowhead the course had already means *parallel*, and
   a student meeting that mark here with a second meaning has been taught a
   false thing. */
.lesson-content .figure .turn {
  stroke-width: calc(var(--w-pointer) * 1px);
}

/* The edge of a sheet of paper, where the shortage of room is the task itself.

   Grey, and the grid's grey rather than an auxiliary line's, because paper is
   the ground a figure stands on and not part of it — the same reason the lines
   of squared paper are that grey. Heavier than those lines because it is the
   edge of that ground and not one of its rulings; and grey rather than black so
   that it is not read as one more segment of the construction drawn on it,
   which is exactly what the task is about. */
.lesson-content .figure .paper {
  stroke-width: calc(var(--w-paper) * 1px);
  stroke: var(--grey-50);
}

/* a label on the drawing — a letter, a name */
/* a value on the drawing — a length, an angle */
.lesson-content .figure text,
.lesson-content .figure .fl,
.lesson-content .figure .fv {
  font-family: var(--content-font);
  font-size: calc(var(--figure-text) * 1px);
  fill: var(--ink);
  stroke: none;
}

/* A letter naming a point is a variable, and mathematics has set a variable
   in italic for three hundred years. A value is a number and stands upright. */
.lesson-content .figure .fl {
  font-style: italic;
}

.lesson-content .figure .fv,
.lesson-content .figure .fn,
.lesson-content .figure .upright {
  font-style: normal;
}

/* A value may hold a variable inside it — "3x + 10" is three upright
   characters, one italic one and four more upright. The two runs say which
   is which; neither says how it looks. */
.lesson-content .figure .italic,
.lesson-content .formula svg .italic,
.lesson-content .formula-inline svg .italic,
.lesson-content .formula-display svg .italic {
  font-style: italic;
}

.lesson-content .formula svg .upright,
.lesson-content .formula-inline svg .upright,
.lesson-content .formula-display svg .upright {
  font-style: normal;
}

/* a note or a figure number under the drawing */
.lesson-content .figure .fn {
  font-size: calc(var(--figure-note-text) * 1px);
  fill: var(--grey-60);
  stroke: none;
}

/* --- compiled formulas (standard §3) ------------------------------------- *
   A formula is one object with one baseline and one face. Its size comes from
   its own viewBox and is applied by compiled-size.js, which also places its
   baseline; neither number is written into a lesson file.                   */

.lesson-content .formula,
.lesson-content .formula-inline {
  display: inline-block;
}

.lesson-content .formula svg,
.lesson-content .formula-inline svg,
.lesson-content .formula-display svg {
  overflow: visible;
}

.lesson-content .formula svg text,
.lesson-content .formula-inline svg text,
.lesson-content .formula-display svg text {
  font-family: var(--content-font);
  /* A compiled formula is written in thousandths of an em of the text round
     it, so one em is a thousand of its own units. Inside a drawing a CSS
     pixel is one user unit, which is what makes this exact rather than close. */
  font-size: 1000px;
  fill: var(--ink);
  stroke: none;
}

/* The pieces a compiled formula is made of, besides its letters: a sign the
   typeface does not have, and the rule under a blank to be filled in. The
   standard's closed list in §4.2 is about drawings and says nothing about the
   inside of a formula; these two names are recorded here and in the report. */
.lesson-content .formula svg .sign,
.lesson-content .formula-inline svg .sign,
.lesson-content .formula-display svg .sign {
  stroke-width: 62px;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  stroke-miterlimit: 6;
}

.lesson-content .formula svg .rule,
.lesson-content .formula-inline svg .rule,
.lesson-content .formula-display svg .rule {
  stroke-width: 60px;
  stroke-linecap: butt;
}

.lesson-content .formula svg path,
.lesson-content .formula-inline svg path,
.lesson-content .formula-display svg path {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.lesson-content .formula-display {
  display: block;
  text-align: center;
  margin: 2mm 0 var(--gap-block);
}

/* --- reserved working space (recording rules §5, standard §6) ------------ *
   The author states a height and a name saying what fills it. The height is
   what he decided the student needs and the site never changes it.

   THE DEFAULT IS NOTHING AT ALL: empty white space, no rule, no box, no
   squares. A question, and then room to answer it. Ruling every answer space
   is how a middle-school worksheet looks and this course is not that.

   Anything with a measurable step — squared paper, a coordinate plane, a
   number line, ruled lines — is drawn as explicit lines in SVG, inside the
   material, and never from this file (standard §5, D-113). A CSS background
   rounds each repeat to the output device, so the step wanders, and wanders
   differently at different margins. That was measured on paper. So there are
   no fill rules here at all, and there will not be any: a fill name this file
   does not know still reserves its height and is drawn plain, which is what
   the standard asks for. An unknown name must never cost the student space. */

.lesson-content .student-space,
.lesson-content [data-space] {
  display: block;
  box-sizing: border-box;
  min-height: 6mm;                              /* if attr() is unavailable */
  height: attr(data-space type(<length>), 6mm);
  margin: 0 0 var(--gap-block);
  overflow: hidden;                    /* the space is what the author left */
}

/* --- answers ------------------------------------------------------------- *
   Answer text sits inside the space the worksheet already reserved, so the
   two documents keep the same pagination. It is set in italic rather than in
   a colour: the answers are printed on the same black-and-white machine as
   everything else, and a colour that is not there is not a distinction.     */

.lesson-content .answer-content {
  /* AN ANSWER IS ITALIC, AT THE READING SIZE, AND UNDERLINED ON EVERY LINE —
     and the underline is painted rather than asked for as text-decoration.
     Why, measured and photographed on 15 September 2026:

     · TEXT-DECORATION SKIPS A COMPILED FORMULA. A formula is a drawing, and a
       browser draws no underline under a drawing, so an answer's line broke at
       every radical and every coordinate pair the course sets properly. An
       answer made of nothing else printed with no mark at all and read exactly
       like the task around it — the one thing this rule exists to prevent.
     · A BORDER OR A BACKGROUND ON THE PARAGRAPH IS DRAWN ONCE, at the foot of
       the whole block, because in an open space the answer is a paragraph. A
       four-line answer then carried one rule under its last line and nothing on
       the other three. The Product Owner read that and asked for the underline
       on every line, which is right.

     So: the paragraph is made inline, and the line is painted as a background
     across each of its line boxes. It follows every line as an underline does,
     and it passes under a formula because a background is painted behind
     everything in the box, drawings included.

     It costs no height — measured on all 107 answers of the first lesson
     written: nothing came nearer its gap than before, and the four-line answer
     came out a little shorter. */
  font-style: italic;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 0.25mm;
  background-position: 0 100%;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 0.3mm;
}

/* In an open space the answer is a paragraph, and a paragraph is a block: the
   line would be painted once under the whole of it. Inline, it carries the line
   on every line box it makes. */
.lesson-content p.answer-content {
  display: inline;
}

/* On a ruled blank the answer already stands on a line, and a second line under
   the first says nothing the first did not. In a cell and in an open space the
   mark stays: it is what tells a reader that these words were written in rather
   than printed with the task. */
.lesson-content .blank .answer-content {
  background-image: none;
  padding-bottom: 0;
}

/* The box a drawn answer stands in. `space()` in the compiler puts every drawn
   answer inside it, and until 17 September 2026 no stylesheet named it, so
   `npm run check:lessons` refused nine lessons and forty-four files and
   seventeen other lessons wrote a copy of the compiler in their own folder to
   avoid it.

   IT DELIBERATELY CHANGES NOTHING ON PAPER, and that was measured before it was
   written. What stands inside this box is always an ordinary `figure`, in all
   forty-four files, so the margin, the centring, the shrinking to the column and
   the guard against a drawing being cut across a sheet are already applied to
   the drawing itself, by the rules above. A box with no rules is a plain block;
   so is this one. The nine lessons print, sheet for sheet, exactly what they
   printed before.

   WHAT IT IS FOR is the check that measures whether an answer fits its space.
   That check takes the first thing it finds marked `answer-content` or
   `answer-figure` and measures that. With this box the whole answer is
   measured, drawing and sentence together. Without it, a lesson that writes the
   sentence first has only the sentence measured and a drawing of any height
   under it is called free — thirteen drawn answers of unit 5 stand in exactly
   that state today.

   BREAKING THE BOX ACROSS A SHEET IS LEFT ALONE ON PURPOSE. `break-inside:
   avoid` here would keep a sentence and its drawing together, which is better —
   and it would move sheets on lessons that are already published, so it is not
   made in passing. */
.lesson-content .answer-figure {
  display: block;
}

.lesson-content .answer-label {
  font-style: normal;
  font-weight: 700;
  margin-right: 1mm;
}

/* --- what is never drawn ------------------------------------------------- *
   The source of a compiled thing is kept beside it, in the same file, and is
   never shown on screen or on paper.                                        */

.lesson-content [data-latex] > :not(svg),
.lesson-content svg title,
.lesson-content svg desc {
  display: none;
}

/* --- marks in use beyond the list in the recording rules ----------------- *
   Recording rules §6: the list of names is open, and an element with no name
   there is given one where it appears. These are the ones the course has
   grown so far. They are marks of meaning, like the rest; none of them lets
   an author choose an appearance.                                           */

/* a line of directions addressed to the student, above the task itself */
.lesson-content .instruction {
  font-style: italic;
  margin: 0 0 var(--gap-block);
}

/* a lead-in phrase inside a line: "Result 1.", "Known from the last lesson." */
.lesson-content .lead {
  font-weight: 700;
}

/* a blank to be filled in, in running text. A rule is drawn here — and only
   here — because a gap with nothing in it is not visible as a question.

   WRITING ON IT MAKES THE LINE IT STANDS IN TALLER, AND NOTHING HERE FIXES THAT.
   The blank is an inline-block standing on the text's baseline. Empty it is one
   pixel tall — it is only a rule. Filled with an answer it becomes a whole line
   of type, 24.19 px against the 23.2 px line it stands in, so that line grows by
   two pixels. Two pixels is 0.53 mm, and a lesson with two such blanks is 1.06 mm
   taller as an answers document than as a worksheet.

   WHAT IT COSTS ON PAPER: the answers document stops falling on the same sheets
   as the worksheet, which is the promise the whole design rests on (D-107,
   D-118). On 16 September 2026, with 71 lessons answered, four printed a task on
   one sheet of the worksheet and another of the answers, and 45 of the 71 were
   not the same height in their two documents. No comparison of sheet counts sees
   it: every one of those lessons reported its counts as matching and was right.
   `checks/02` sees it, and did.

   THREE REPAIRS WERE TRIED AND ALL THREE WERE REFUSED BY MEASUREMENT. Do not
   reach for them again without reading this.

   · Shorten the answer. Does nothing: a one-letter answer costs the same
     0.53 mm and an empty one still costs 0.26.
   · Take the writing out of the flow so it paints on the rule. Removes the
     drift completely — and 65 of the course's 314 answered blanks hold an answer
     wider than the rule drawn for it, the worst by 45.2 mm, so those 65 would
     print across whatever follows them.
   · `line-height: 0` on the blank and on the answer inside it. Removes the drift
     in 44 of the 45 lessons, leaves the student's worksheet untouched in every
     one, and takes the four lessons with a task on the wrong sheet down to one.
     **And it strikes the answer through.** With the line set to nothing the
     rule is drawn at the baseline rather than under it, so it crosses the words:
     01-03's "not at the middle" printed struck out. It was applied, printed,
     read on the sheet and taken out again the same hour. The numbers were right
     and the paper was wrong, which is what the paper is for.

   What is left standing: a blank keeps its full line, and where a rule is too
   narrow for its answer the sentence reflows, which is the lesson's own to
   shorten. */
.lesson-content .blank {
  display: inline-block;
  min-width: 20mm;
  border-bottom: 0.25mm solid var(--ink);
  vertical-align: baseline;
}

.lesson-content .blank.short {
  min-width: 11mm;
}

.lesson-content .blank.wide {
  min-width: 34mm;
}

/* a cell of a table that the student fills in */
.lesson-content .blank-cell {
  /* nothing: the table's own rules already say where to write */
}

/* one alternative among several offered on the page, and the line they sit on */
.lesson-content .opt {
  white-space: nowrap;
}

.lesson-content .choice {
  margin: 0 0 var(--gap-block);
}

/* a list whose items are not counted and not bulleted */
.lesson-content ul.plain,
.lesson-content ol.plain,
.lesson-content ul.summary-rules {
  list-style: none;
  padding-left: 0;
}

.lesson-content ul.summary-rules > li {
  border-left: 0.5mm solid var(--ink);
  padding: 0.5mm 0 0.5mm 3mm;
  margin-bottom: 2mm;
}

/* a table whose cells already carry some of the work */
.lesson-content .table-prefilled td {
  height: 10mm;
}

/* the two-column proof: statements on the left, reasons on the right */
.lesson-content table.proof-two-column {
  table-layout: fixed;
}

/* A drawing standing beside the parts that read off it rather than above
   them. This is what stops a task with a small drawing and four short parts
   from taking most of a sheet, and it is also the safest arrangement under
   §6a of the standard: a drawing beside its parts cannot be separated from
   them by a sheet edge at all.

   The drawing keeps its own width; the parts take what is left. */
/* A drawing stands beside the parts read off it, in two columns, and the block
   is never split by a sheet edge — §6a of the standard, and the reason this is
   the safest arrangement there is.

   THE DRAWING IS ON THE RIGHT WHICHEVER WAY ROUND IT IS WRITTEN. Lessons made
   on 7 September 2026 write it first and lessons made before write it last, and
   `order` puts it on the right either way, so no lesson has to be rebuilt to
   print correctly.

   Flowing the text around the drawing was tried on 7 September and taken out:
   the reserved writing space refuses to stand beside a floated drawing and drops
   below it, which took one task of lesson 06-09 to 273 mm, past the height of a
   sheet.

   THE FAULT IT REPAIRED IS REAL AND IS TO BE LEFT ALONE (D-203). Parts past the
   foot of a drawing stand in a narrow column with empty paper beside them — about
   a fifth of a sheet on the rhombus task and Activity 1 of lesson 08-04, and on
   every other task laid out this way. The Product Owner read what it costs and
   said leave it, on 7 September 2026. Do not take it up, and do not work round it
   by writing a lesson's parts outside the block: a drawing beside its parts
   cannot be cut from them by a sheet edge and parts outside the block can be.
   Whoever is one day told to repair it has to make the reserved writing space
   able to stand beside a floated drawing first; that is where it broke both
   times. */
.lesson-content .figure-with-task {
  display: flex;
  gap: 5mm;
  align-items: flex-start;
  margin-bottom: var(--gap-block);
  break-inside: avoid;
  page-break-inside: avoid;
}

.lesson-content .figure-with-task > .beside {
  order: 1;
  flex: 1 1 0;
  min-width: 0;
}

.lesson-content .figure-with-task > .figure {
  order: 2;
  flex: 0 0 auto;
  margin: 0;
  float: none;
}

.lesson-content .figure-with-task > .beside {
  flex: 1 1 0;
  min-width: 0;
}

.lesson-content .figure-with-task > .figure:last-child {
  flex: 0 0 auto;
  margin: 0;
}

.lesson-content .figure-with-task > .beside > :last-child {
  margin-bottom: 0;
}

/* On a narrow screen a drawing beside its task has nowhere to stand, so the
   two sit one above the other. This is about the screen only: the sheet is
   always drawn at its full width by the printing browser. */
@media screen and (max-width: 620px) {
  .lesson-content .figure-with-task {
    display: block;
  }


  .lesson-content .figure-with-task > * + * {
    margin-top: 3mm;
  }
}

/* The summary's "at a glance" strip: a row of solids, each standing over its
   own formula. It is the one picture in a lesson that asks nothing, and it is
   meant to be read in fifteen seconds, so the solids sit in one row and each
   formula sits directly under the solid it belongs to.

   The formula is a compiled formula like any other and takes its size from
   compiled-size.js, which is the whole reason the strip is built out of
   drawings and formulas rather than lettered inside one SVG: a fraction drawn
   inside a figure would be the one formula in the course whose size no
   stylesheet controls. */
.lesson-content .at-a-glance {
  display: flex;
  gap: 8mm;
  align-items: center;
  justify-content: center;
  margin: var(--gap-block) 0;
  /* One picture. Half of it says nothing. */
  break-inside: avoid;
  page-break-inside: avoid;
}

.lesson-content .at-a-glance > .glance {
  text-align: center;
}

.lesson-content .at-a-glance > .glance > .figure {
  margin: 0 0 2mm;
}

.lesson-content .at-a-glance > .glance > .formula {
  display: block;
}

/* On a narrow screen the three cells wrap rather than shrinking the drawings,
   which would take every line weight in them below the standard's floor. The
   sheet is always drawn at full width by the printing browser. */
@media screen and (max-width: 620px) {
  .lesson-content .at-a-glance {
    flex-wrap: wrap;
  }
}

/* The course's shared drawing definitions — the hatch a cutting plane is
   filled with. Carried by the page, never by a lesson file, and never drawn
   on its own. */
.course-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --- the line a teacher measures ----------------------------------------- *
   Printed at the head of the first sheet of a lesson whose answers are read off
   the paper in centimetres, and on no other lesson (D-202). Exactly 100 mm of
   rule, with the words beside it saying what it is; a person at the copier
   needs to know nothing in advance to use it.

   Set in the note face and the note's grey, because it is not part of the
   lesson: it is about the sheet. The rule itself is black and at the weight of
   a drawn line, because a grey hairline is what a copier loses first, and this
   is the one line on the sheet that has to survive a bad copy in order to say
   that the copy was bad. */
.lesson-content .scale-check,
.document-head .scale-check {
  display: flex;
  align-items: center;
  gap: 3mm;
  margin: 2mm 0 0;
}

.scale-check-line {
  display: block;
  width: 100mm;
  flex: 0 0 100mm;
  border-bottom: 0.35mm solid var(--ink);
  height: 0;
}

.scale-check-words {
  font-size: var(--note-size);
  color: var(--grey-60);
}

@media screen and (max-width: 620px) {
  .scale-check {
    display: none;
  }
}