/* ============================================================================
   HSCScience worksheet — THE FOUR SKINS
   ----------------------------------------------------------------------------
   Loaded after `worksheet-core.css`, which owns geometry, the type scale and
   print behaviour. This file owns colour, type family and the small number of
   structural deltas each direction genuinely needs.

   Values are lifted from the approved design canvas
   (artifact 23a57d08-5d52-4ae0-b1ba-bf2c91965365), not re-derived.

   ----------------------------------------------------------------------------
   WHERE THIS FILE DEPARTS FROM THE CANVAS, AND WHY

   The canvas artboards were drawn as screen comps at 794x1123px. Three of their
   values do not survive contact with a printer, and are changed here on purpose:

   1. BODY TYPE. The canvas sets question text at 14.5-16px depending on
      direction, sub-instructions at 13-14px, and answer-key prose at 13-13.5px.
      Anything that is a sentence is raised to 16px (12pt). This is the single
      biggest change and it costs roughly one question per page in A/B/C. It is
      also the entire reason variant D exists, which wins that page back by
      putting the working beside the question instead of beneath it.

   2. VARIANT C'S GRID PITCH. The canvas uses `background-size: 20px 20px`.
      20px is 5.29mm, which is not graph paper — it is 5.29mm paper that looks
      like graph paper on a screen. Changed to exactly 5mm so a student can
      measure on it, and so it shares a baseline with the 5mm ruling in A, B
      and D (`--ws-rule-pitch` in the core file).

   3. MICRO-LABELS. The canvas goes to 9.5-10.5px on uppercase labels
      (C's NAME/DATE, D's "Working", B's "Answers"). Floored at 12px. At 9.5px
      an uppercase tracked label prints at ~7pt and greys out on an inkjet.

   Everything else — hues, borders, spacing, the spine, the band, the numerals —
   is the canvas's own value.
   ============================================================================ */

/* ============================================================================
   A — EXAM PAPER
   Black on white, marks bracketed on the right, ruled lines, a solid
   SOLUTIONS band. For exam practice and past-paper style sheets, where looking
   like the real thing is the point.
   ============================================================================ */

body[data-ws-variant="a"] {
  --ws-ink: #111318;
  --ws-muted: #4a5160;
  --ws-line: #c9cfda;
  --ws-rule-faint: #dde1e8;
  --ws-blank-rule: #9aa2b1;
  --wsv-accent: #111318;
  --ws-work-rule: #c9cfda;

  --ws-font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ws-font-display: "Libre Franklin", Helvetica, Arial, sans-serif;

  background: #ffffff;
  color: var(--ws-ink);
  font-family: var(--ws-font-body);
}

body[data-ws-variant="a"] .ws-sheet { background: #ffffff; }
/* The classic sheet draws a coloured accent bar down the left edge. An exam
   paper does not have one. */
body[data-ws-variant="a"] .ws-sheet::before { display: none; }
body[data-ws-variant="a"] .ws-sheet { padding-left: var(--ws-page-pad-x); }

body[data-ws-variant="a"] .ws-header {
  border-bottom: var(--ws-rule-heavy) solid var(--ws-ink);
  padding-bottom: 10px;
}
body[data-ws-variant="a"] .ws-kicker {
  font-family: var(--ws-font-display);
  font-size: var(--ws-label);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ws-muted);
}
body[data-ws-variant="a"] .ws-title {
  font-family: var(--ws-font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ws-ink);
}
body[data-ws-variant="a"] .ws-purpose {
  color: var(--ws-ink);
  max-width: 60ch;
}

/* The type badge becomes an outlined stamp — no flood fill, which is both
   truer to a real paper and cheaper to print. */
body[data-ws-variant="a"] .ws-badge,
body[data-ws-variant="a"] .ws-badge[data-type] {
  background: transparent;
  color: var(--ws-ink);
  border: var(--ws-rule-structural) solid var(--ws-ink);
  border-radius: 0;
  font-family: var(--ws-font-display);
  letter-spacing: 0.1em;
  padding: 5px 11px;
}

body[data-ws-variant="a"] .ws-section {
  border-top: var(--ws-rule-hair) solid var(--ws-rule-faint);
  padding-top: 14px;
}
body[data-ws-variant="a"] .ws-section:first-of-type { border-top: 0; }
body[data-ws-variant="a"] .ws-section h2 {
  font-family: var(--ws-font-display);
  font-weight: 700;
  color: var(--ws-ink);
}

/* Marks right-aligned in brackets, the way a paper does it. */
body[data-ws-variant="a"] .ws-marks {
  float: right;
  background: transparent;
  color: var(--ws-ink);
  border-radius: 0;
  font-family: var(--ws-font-display);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
}
body[data-ws-variant="a"] .ws-marks::before { content: "("; }
body[data-ws-variant="a"] .ws-marks::after  { content: ")"; }

body[data-ws-variant="a"] .ws-box {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
body[data-ws-variant="a"] .ws-hint {
  font-style: italic;
  color: var(--ws-muted);
}

body[data-ws-variant="a"] .ws-reflect {
  border-top: var(--ws-rule-hair) solid var(--ws-ink);
  border-bottom: var(--ws-rule-hair) solid var(--ws-ink);
  border-left: 0;
  border-right: 0;
  padding: 11px 0;
}
body[data-ws-variant="a"] .ws-checkbox {
  border: var(--ws-rule-structural) solid var(--ws-ink);
  border-radius: 0;
}

/* The SOLUTIONS band. Solid ink, but one line deep — about 3% of the page
   area, which is a stamp, not a flood. */
body[data-ws-variant="a"] .ws-answers {
  background: transparent;
  border: var(--ws-rule-hair) solid var(--ws-ink);
  padding: 0;
  margin: 0;
}
body[data-ws-variant="a"] .ws-answers-header {
  background: var(--ws-ink);
  color: #ffffff;
  border-radius: 0;
  margin: 0;
  padding: 7px 14px;
  font-family: var(--ws-font-display);
  font-size: var(--ws-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body[data-ws-variant="a"] .ws-answer {
  background: transparent;
  border: 0;
  border-top: var(--ws-rule-hair) solid var(--ws-rule-faint);
  border-radius: 0;
  margin: 0;
  padding: 12px 14px 14px;
}
body[data-ws-variant="a"] .ws-answer:first-of-type { border-top: 0; }
body[data-ws-variant="a"] .ws-answer h3 {
  font-family: var(--ws-font-display);
  font-weight: 600;
  color: var(--ws-ink);
  font-size: var(--ws-meta);
}

/* ============================================================================
   B — EDITORIAL WORKBOOK   (the default)
   Cream, teal spine, oversized serif numerals in the margin. For concept and
   consolidation worksheets — most of the estate.
   ============================================================================ */

body[data-ws-variant="b"],
body:not([data-ws-variant]) {
  --ws-ink: #22201c;
  --ws-ink-strong: #14120f;
  --ws-muted: #6a635a;
  --ws-line: #e2dbcc;
  --ws-blank-rule: #cfc6b4;
  --wsv-accent: #0b5563;      /* teal */
  --wsv-accent-warm: #a3341c; /* rust */
  --ws-paper-cream: #fdfaf3;
  --ws-work-rule: #eee7d9;

  --ws-font-body: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ws-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;

  color: var(--ws-ink);
  font-family: var(--ws-font-body);
}

/* The cream is #fdfaf3 — about 2% ink coverage at 100% fill. It reads as paper
   rather than as a tint, and costs less than a single line of body copy. */
body[data-ws-variant="b"] .ws-sheet,
body:not([data-ws-variant]) .ws-sheet {
  background: var(--ws-paper-cream);
}

/* The spine. The classic sheet already draws a 3mm accent bar in this exact
   position, so B recolours and widens it rather than adding a second element. */
body[data-ws-variant="b"] .ws-sheet::before,
body:not([data-ws-variant]) .ws-sheet::before {
  background: var(--wsv-accent);
  width: 13px;
}

body[data-ws-variant="b"] .ws-header,
body:not([data-ws-variant]) .ws-header {
  border-bottom: var(--ws-rule-hair) solid var(--ws-line);
}
body[data-ws-variant="b"] .ws-kicker,
body:not([data-ws-variant]) .ws-kicker {
  color: var(--wsv-accent-warm);
  font-size: var(--ws-label);
  font-weight: 600;
  letter-spacing: 0.15em;
}
body[data-ws-variant="b"] .ws-title,
body:not([data-ws-variant]) .ws-title {
  font-family: var(--ws-font-display);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ws-ink-strong);
}
body[data-ws-variant="b"] .ws-purpose,
body:not([data-ws-variant]) .ws-purpose {
  color: #3d3830;
  max-width: 58ch;
}

/* The oversized margin numeral.

   Drawn from the ordinal ALREADY IN THE HEADING, not from a CSS counter. The
   <h2> text is "1. Finding the scale", so a counter would render a second "1"
   beside it and the heading would read "1  1. Finding the scale". The markup
   transform wraps the existing "1." in `.ws-h2-ord`; this rule moves that span
   into the margin and enlarges it. Same characters, repositioned — nothing is
   duplicated and nothing is hidden, so the visible text of the page is
   unchanged and content-preservation still compares equal. */
body[data-ws-variant="b"] .ws-section,
body:not([data-ws-variant]) .ws-section {
  position: relative;
  padding-left: 62px;
}
body[data-ws-variant="b"] .ws-h2-ord,
body:not([data-ws-variant]) .ws-h2-ord {
  position: absolute;
  left: 0;
  top: -2px;
  width: 42px;
  text-align: right;
  font-family: var(--ws-font-display);
  font-size: 46px;
  line-height: 0.85;
  font-weight: 400;
  color: #c9bfa9;
}
body[data-ws-variant="b"] .ws-section h2,
body:not([data-ws-variant]) .ws-section h2 {
  color: var(--ws-ink-strong);
  font-weight: 600;
  font-size: 17px;
}

body[data-ws-variant="b"] .ws-marks,
body:not([data-ws-variant]) .ws-marks {
  background: transparent;
  color: var(--wsv-accent);
  border-radius: 0;
  padding: 0;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* The answer card: white on cream, which is what makes the writing area read
   as a place to write rather than as more page. */
body[data-ws-variant="b"] .ws-box > .ws-work,
body:not([data-ws-variant]) .ws-box > .ws-work {
  background: #ffffff;
  border: var(--ws-rule-hair) solid var(--ws-line);
  border-radius: 3px;
  padding: 0 12px;
}

body[data-ws-variant="b"] .ws-box,
body:not([data-ws-variant]) .ws-box {
  background: transparent;
  border: 0;
  padding: 0;
}
body[data-ws-variant="b"] .ws-hint,
body:not([data-ws-variant]) .ws-hint { color: #8a6a2f; }

body[data-ws-variant="b"] .ws-reflect,
body:not([data-ws-variant]) .ws-reflect {
  background: #f3ece0;
  border: 0;
  border-radius: 3px;
  padding: 11px 15px;
}
body[data-ws-variant="b"] .ws-checkbox,
body:not([data-ws-variant]) .ws-checkbox {
  border: var(--ws-rule-structural) solid var(--wsv-accent);
  border-radius: 2px;
  background: #fff;
}

body[data-ws-variant="b"] .ws-answers,
body:not([data-ws-variant]) .ws-answers {
  background: #faf3ea;
  border-left: 3px solid var(--wsv-accent-warm);
  margin: 0;
  padding: 12px 16px 15px;
}
body[data-ws-variant="b"] .ws-answers-header,
body:not([data-ws-variant]) .ws-answers-header {
  background: transparent;
  color: var(--wsv-accent-warm);
  border-radius: 0;
  padding: 0 0 7px;
  margin: 0;
  font-size: var(--ws-label);
  font-weight: 700;
  letter-spacing: 0.16em;
}
body[data-ws-variant="b"] .ws-answer,
body:not([data-ws-variant]) .ws-answer {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 10px;
}
body[data-ws-variant="b"] .ws-answer h3,
body:not([data-ws-variant]) .ws-answer h3 {
  color: var(--ws-ink-strong);
  font-size: var(--ws-meta);
  font-weight: 600;
}

/* ============================================================================
   C — ENGINEERING PAD
   5mm graph-paper answer areas, monospace marks, hard corners. For anything
   drawn, plotted or constructed.
   ============================================================================ */

body[data-ws-variant="c"] {
  --ws-ink: #16202b;
  --ws-muted: #5b6b7c;
  --ws-line: #c6d0da;
  --ws-blank-rule: #b6c2ce;
  --wsv-accent: #0d5c7a;
  --wsv-accent-warm: #b04a12;
  --ws-grid: #dfe6ec;

  --ws-font-body: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ws-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  color: var(--ws-ink);
  font-family: var(--ws-font-body);
}

body[data-ws-variant="c"] .ws-sheet::before { display: none; }
body[data-ws-variant="c"] .ws-sheet { padding-left: var(--ws-page-pad-x); }

body[data-ws-variant="c"] .ws-header {
  border: 2px solid var(--ws-ink);
  border-radius: 0;
  padding: 13px 16px;
}
body[data-ws-variant="c"] .ws-kicker {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-label);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ws-muted);
}
body[data-ws-variant="c"] .ws-title {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ws-ink);
}
body[data-ws-variant="c"] .ws-purpose { color: #2c3a48; }

body[data-ws-variant="c"] .ws-badge,
body[data-ws-variant="c"] .ws-badge[data-type] {
  font-family: var(--ws-font-mono);
  border-radius: 0;
  letter-spacing: 0.12em;
  padding: 4px 8px;
  font-size: var(--ws-label);
}

body[data-ws-variant="c"] .ws-section h2 {
  font-weight: 700;
  color: var(--ws-ink);
  font-size: 16px;
}
body[data-ws-variant="c"] .ws-marks {
  font-family: var(--ws-font-mono);
  background: transparent;
  color: var(--wsv-accent);
  border-radius: 0;
  padding: 0;
  letter-spacing: 0;
  text-transform: none;
  float: right;
}
body[data-ws-variant="c"] .ws-marks::before { content: "["; }
body[data-ws-variant="c"] .ws-marks::after  { content: "]"; }

body[data-ws-variant="c"] .ws-box {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

/* The working surface IS the design.

   5mm exactly, not the canvas's 20px (= 5.29mm), so the grid is measurable.
   The lines are #dfe6ec at 1px: light enough not to compete with pencil, dark
   enough to survive an inkjet. Verified against a rasterised print render —
   see docs/worksheets/VARIANT-VERIFICATION.md — because a grid this light is
   exactly the thing that turns to grey mush or vanishes entirely. */
body[data-ws-variant="c"] .ws-box > .ws-work {
  border: var(--ws-rule-hair) solid var(--ws-line);
  border-radius: 0;
  padding: 0;
  background-color: #fdfdfc;
  background-image:
    linear-gradient(to right,  var(--ws-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ws-grid) 1px, transparent 1px);
  background-size: var(--ws-rule-pitch) var(--ws-rule-pitch);

  /* A drawn answer needs room to be drawn in. The answer space inherits its
     height from the number of `.ws-line` spans the author wrote, and three of
     them is 15mm — three squares, which is not a surface anyone can construct a
     scale diagram on. 26mm is the canvas's own value (its 100px block) and is
     the floor here. Measured, not assumed: the first C block rendered at
     58.7px tall before this rule. */
  min-height: 26mm;
}
/* The individual rules are the grid's own horizontals now — drawing them
   again on top would double every fifth line and read as a defect. */
body[data-ws-variant="c"] .ws-box > .ws-work .ws-line { border-bottom: 0; }

body[data-ws-variant="c"] .ws-hint {
  font-style: normal;
  color: var(--ws-muted);
}
body[data-ws-variant="c"] .ws-hint::before {
  content: "HINT ";
  font-family: var(--ws-font-mono);
  font-weight: 600;
  color: var(--wsv-accent-warm);
}

body[data-ws-variant="c"] .ws-reflect {
  border: var(--ws-rule-hair) solid var(--ws-ink);
  border-radius: 0;
  padding: 10px 14px;
}
body[data-ws-variant="c"] .ws-checkbox {
  border: var(--ws-rule-structural) solid var(--ws-ink);
  border-radius: 0;
}

body[data-ws-variant="c"] .ws-answers {
  background: #f2f8fa;
  border: var(--ws-rule-hair) dashed var(--wsv-accent);
  margin: 0;
  padding: 11px 15px 14px;
}
body[data-ws-variant="c"] .ws-answers-header {
  background: transparent;
  color: var(--wsv-accent);
  border-radius: 0;
  margin: 0 0 6px;
  padding: 0;
  font-family: var(--ws-font-mono);
  font-size: var(--ws-label);
  font-weight: 600;
  letter-spacing: 0.16em;
}
body[data-ws-variant="c"] .ws-answers-header::before { content: "// "; }
body[data-ws-variant="c"] .ws-answer {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 10px;
}
body[data-ws-variant="c"] .ws-answer h3 {
  color: var(--ws-ink);
  font-weight: 700;
  font-size: var(--ws-meta);
}

/* ============================================================================
   D — TWO-COLUMN COMPACT
   Question left, working right. For short-answer drills and printing-cost-
   sensitive sets.

   Its named weakness is column overflow: a long stem or a long algebraic
   working run will exhaust its half-width column. The measured breaking point
   is recorded in docs/worksheets/VARIANT-VERIFICATION.md. The guards below
   are what keep overflow from becoming clipping.
   ============================================================================ */

body[data-ws-variant="d"] {
  --ws-ink: #1b1d21;
  --ws-muted: #5f6670;
  --ws-line: #d5dae1;
  --ws-blank-rule: #c3c8d0;
  --wsv-accent: #16606b;
  --wsv-accent-warm: #9d3b16;
  --ws-work-rule: #e6eaee;

  --ws-font-body: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ws-font-display: "Newsreader", Georgia, "Times New Roman", serif;

  color: var(--ws-ink);
  font-family: var(--ws-font-body);
}

body[data-ws-variant="d"] .ws-sheet::before { display: none; }
body[data-ws-variant="d"] .ws-sheet { padding-left: var(--ws-page-pad-x); }

body[data-ws-variant="d"] .ws-header {
  border-bottom: 3px solid var(--wsv-accent);
  padding-bottom: 9px;
}
body[data-ws-variant="d"] .ws-kicker {
  color: var(--wsv-accent);
  font-size: var(--ws-label);
  font-weight: 600;
  letter-spacing: 0.09em;
}
body[data-ws-variant="d"] .ws-title {
  font-family: var(--ws-font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ws-ink);
}
body[data-ws-variant="d"] .ws-purpose { color: #33383f; }

/* The section head becomes a tinted bar, so the eye can find the next question
   quickly in a dense sheet. */
body[data-ws-variant="d"] .ws-section h2 {
  background: #eef4f4;
  border-left: 4px solid var(--wsv-accent);
  padding: 8px 12px;
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ws-ink);
}
body[data-ws-variant="d"] .ws-marks {
  float: right;
  background: transparent;
  color: var(--wsv-accent);
  border-radius: 0;
  padding: 0;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* ---- the two columns ----------------------------------------------------

   `.ws-work` is a single element, so it can be placed in column 2 spanning
   every row the question occupies. This is the reason the core file introduces
   the wrapper at all: loose `.ws-line` siblings cannot express this, because
   their grid row index depends on how many <p> elements happen to precede them.

   `min-width: 0` on both tracks is load-bearing. Grid items default to
   `min-width: auto`, which refuses to shrink below the widest unbreakable
   thing inside them — a long KaTeX run or a chemical formula — and the column
   silently widens past its track instead of wrapping. */
body[data-ws-variant="d"] .ws-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
  align-content: start;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  min-width: 0;
}
body[data-ws-variant="d"] .ws-box > * {
  grid-column: 1;
  min-width: 0;
}
body[data-ws-variant="d"] .ws-box > .ws-work {
  grid-column: 2;
  /* NOT `1 / -1`: that resolves against the EXPLICIT grid, and only the columns
     are declared explicitly, so -1 is row line 1 and the panel spans one row —
     leaving every paragraph after the first to fall below it at full width. */
  grid-row: 1 / span 50;
  align-self: stretch;
  margin-top: 0;
  min-width: 0;

  border: var(--ws-rule-hair) solid var(--ws-line);
  border-radius: 3px;
  background: #fcfdfd;
  padding: 0 11px;
}
body[data-ws-variant="d"] .ws-box > .ws-work::before {
  content: "Working";
  display: block;
  padding: 6px 0 2px;
  font-size: var(--ws-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9aa2ad;
}

/* Overflow guards. The column is half-width, so the two things that break it
   are an unbreakable token wider than the track, and a stem taller than the
   working area. The first is prevented; the second is allowed to push the row
   taller rather than clip, which keeps a long question readable at the cost of
   the density D exists for. */
body[data-ws-variant="d"] .ws-box > *,
body[data-ws-variant="d"] .ws-work {
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Maths is the exception: never break inside a rendered expression — scroll on
   screen, and let it hang into the gutter in print rather than mid-formula. */
body[data-ws-variant="d"] .katex,
body[data-ws-variant="d"] .katex-display {
  word-break: normal;
  overflow-wrap: normal;
}
body[data-ws-variant="d"] .katex-display { overflow-x: auto; }

/* A question that carries a figure cannot use half a column. Opt it back out
   to full width — the assignment rule sends figure-bearing worksheets to C,
   but a single stray figure inside an otherwise short-answer sheet must not
   be crushed. */
body[data-ws-variant="d"] .ws-box:has(.ws-fig),
body[data-ws-variant="d"] .ws-box:has(.ws-img),
body[data-ws-variant="d"] .ws-box:has(.ws-img-placeholder),
body[data-ws-variant="d"] .ws-box:has(table) {
  display: block;
}
body[data-ws-variant="d"] .ws-box:has(.ws-fig) > .ws-work,
body[data-ws-variant="d"] .ws-box:has(.ws-img) > .ws-work,
body[data-ws-variant="d"] .ws-box:has(.ws-img-placeholder) > .ws-work,
body[data-ws-variant="d"] .ws-box:has(table) > .ws-work {
  margin-top: 10px;
}

body[data-ws-variant="d"] .ws-hint {
  background: #fdf6e8;
  border-radius: 3px;
  padding: 8px 10px;
  color: #8a5a1e;
  font-style: normal;
}

body[data-ws-variant="d"] .ws-reflect {
  border-top: 2px solid var(--wsv-accent);
  border-bottom: var(--ws-rule-hair) solid var(--ws-line);
  border-left: 0;
  border-right: 0;
  padding: 10px 2px;
}
body[data-ws-variant="d"] .ws-checkbox {
  border: var(--ws-rule-structural) solid var(--wsv-accent);
  border-radius: 50%;
}

/* The key gets a vertical ANSWERS spine — the most distinct of the four at a
   glance, which matters most in D because the sheet is dense. */
body[data-ws-variant="d"] .ws-answers {
  background: #f7fafa;
  border: var(--ws-rule-hair) solid var(--wsv-accent);
  border-radius: 3px;
  border-left: 34px solid var(--wsv-accent);
  margin: 0;
  padding: 11px 14px 13px;
  position: relative;
}
body[data-ws-variant="d"] .ws-answers-header {
  background: transparent;
  color: var(--wsv-accent);
  border-radius: 0;
  margin: 0 0 6px;
  padding: 0;
  font-size: var(--ws-label);
  font-weight: 700;
  letter-spacing: 0.12em;
}
body[data-ws-variant="d"] .ws-answer {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 10px;
}
body[data-ws-variant="d"] .ws-answer h3 {
  color: var(--ws-ink);
  font-weight: 700;
  font-size: var(--ws-meta);
}

/* ============================================================================
   SCREEN-ONLY CONCESSIONS
   D's two columns are a print layout. On a phone they become one column —
   the working simply follows its question, which is the pre-existing
   behaviour and is correct at that width.
   ============================================================================ */

@media screen and (max-width: 850px) {
  body[data-ws-variant="d"] .ws-box { display: block; }
  body[data-ws-variant="d"] .ws-box > .ws-work { margin-top: 10px; }
  body[data-ws-variant="b"] .ws-section,
  body:not([data-ws-variant]) .ws-section { padding-left: 46px; }
  body[data-ws-variant="b"] .ws-section::before,
  body:not([data-ws-variant]) .ws-section::before {
    font-size: 34px;
    width: 32px;
  }
}

/* A, C and D leave the heading ordinal inline — it reads correctly there, and
   only B moves it into the margin. Stated explicitly so the span cannot inherit
   B's 46px margin treatment if the rules above are ever reordered. */
body[data-ws-variant="a"] .ws-h2-ord,
body[data-ws-variant="c"] .ws-h2-ord,
body[data-ws-variant="d"] .ws-h2-ord {
  position: static;
  font-size: inherit;
  color: inherit;
  width: auto;
}