/* ============================================================================
   worksheet-junior-v2.css  -  Years 7-10 Science worksheets, ONE stylesheet
   ----------------------------------------------------------------------------
   Replaces, for a junior worksheet, all three of:
     worksheet-junior.css + worksheet-core.css + worksheet-variants.css
   Migrating a sheet = swap those three <link>s for this one. No class renames:
   every class the 942 junior sheets use is styled here, and the markup
   contract for new sheets is templates/junior-worksheet-v2.html.

   Subject colour still comes from the inline style on <body>:
     style="--ws-accent:#0369a1;--ws-accent-soft:#dbeafe;"

   DESIGN RULES THIS FILE ENFORCES
   1. One look. `data-ws-variant` (a/b/c/d) is ignored; nothing here reads it.
   2. Print flows. A `.page` div is a screen card, NOT a physical sheet. In
      print the student part flows across A4 sheets and breaks are placed by
      rules: every question, table row, T/F item, sort grid and chain row is
      unbreakable, and every heading/instruction is glued to what follows.
      The teacher key always starts a fresh sheet.
   3. Type floor. Nothing a student reads is under 14px; sentences are 16px
      (12pt on paper). Labels earn prominence from weight, not smallness.
   4. Answer space is sized by intent: one line pitch (--ws-pitch) drives
      every ruled line, table answer cell, sort box, chain cell and box, and
      `data-lines="N"` / `--lines:N` sets how many.
   5. Ink-light print. No flood fills on paper: every screen tint is dropped
      in print, so the sheet looks the same whether or not the printer's
      "Background graphics" box is ticked. Ruled lines and graph grids are the
      only backgrounds that print (print-color-adjust: exact on those alone).
   6. No external fonts, no animation.
   ============================================================================ */

/* ------------------------------------------------------------------ tokens */

/* Shared tokens: where a POLISH --hs-* token (PR #2012, findings 2026-09-28-polish.md §4) means the
   same thing, the worksheet token reads it with this sheet's literal as fallback, so the value is
   right whether or not --hs-* is declared on the page. Deliberately NOT mapped: writing lines and
   frames (--hs-rule #e6d2b8 is too faint on an inkjet), white paper (must match print), the 14px
   type floor (--hs-fs-sm is 13.5px), and fonts (worksheets load no web fonts). */
:root {
  /* colour - accent pair is overridden per subject from <body style> */
  --ws-accent: #0369a1;
  --ws-accent-soft: #dbeafe;
  --ws-ink: var(--hs-ink, #1e2b3a);        /* body text; POLISH shared token (#2012) */
  --ws-ink-2: var(--hs-ink-2, #485466);    /* instructions, secondary text */
  --ws-muted: var(--hs-muted, #5f6b7a);    /* labels, captions, footer (5.4:1 on white) */
  --ws-rule: #8e9aa8;         /* writing lines: visible on an inkjet, not heavy */
  --ws-frame: #b3bdc9;        /* box and table borders */
  --ws-frame-soft: #dde3ea;   /* separators */
  --ws-tint: var(--hs-tint, #fbf3df);      /* screen-only fills; removed in print */
  --ws-desk: var(--hs-canvas, #faf6ee);    /* screen background behind the sheets */
  --ws-paper: #ffffff;

  /* difficulty steps (text + outline only, so they survive a mono printer) */
  --ws-step1: #166534;        /* recall     */
  --ws-step2: #8a4b08;        /* apply      */
  --ws-step3: #9f1239;        /* challenge  */

  /* teacher key */
  --ws-key: #6b21a8;
  --ws-key-soft: #f6f0fc;

  /* type scale (px so print and screen agree; 16px = 12pt on paper) */
  --ws-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ws-fs-title: 28px;
  --ws-fs-h2: 20px;
  --ws-fs-h3: 17px;
  --ws-fs-body: 16px;
  --ws-fs-small: 15px;        /* instructions, table text, chips */
  --ws-fs-label: 14px;        /* the floor: badges, labels, footer */
  --ws-lh: 1.5;
  --ws-lh-tight: 1.25;

  /* spacing scale (4px base) */
  --ws-s1: var(--hs-s1, 4px);
  --ws-s2: var(--hs-s2, 8px);
  --ws-s3: var(--hs-s3, 12px);
  --ws-s4: var(--hs-s4, 16px);
  --ws-s5: var(--hs-s6, 24px);
  --ws-s6: var(--hs-s8, 32px);
  --ws-s7: 48px;

  /* answer-space geometry */
  --ws-pitch: 30px;           /* one handwriting line, 7.9mm (exercise-book wide ruling); whole px so lines land on pixel rows */
  --ws-gutter: 30px;          /* hanging indent for question numbers */
  --ws-grid: 19px;            /* graph-paper square, 5.03mm; whole px so the grid does not drift in PDF */
  --ws-radius: var(--hs-r-xs, 6px);
  --ws-rule-w: 1px;
  --ws-frame-w: var(--hs-bw, 1.5px);

}

/* data-lines="N" sets --lines on anything: .ws-lines, td.ws-answer,
   .ws-sort-box, .ws-draw-box, .ws-calc-work, .ws-chain-cell ... */
[data-lines="1"]  { --lines: 1; }
[data-lines="2"]  { --lines: 2; }
[data-lines="3"]  { --lines: 3; }
[data-lines="4"]  { --lines: 4; }
[data-lines="5"]  { --lines: 5; }
[data-lines="6"]  { --lines: 6; }
[data-lines="7"]  { --lines: 7; }
[data-lines="8"]  { --lines: 8; }
[data-lines="10"] { --lines: 10; }
[data-lines="12"] { --lines: 12; }
[data-lines="14"] { --lines: 14; }
[data-lines="16"] { --lines: 16; }
/* named sizes, for authors who think in intent rather than lines */
[data-size="xs"] { --lines: 1; }   /* one word or number */
[data-size="s"]  { --lines: 2; }   /* one sentence (1 mark) */
[data-size="m"]  { --lines: 4; }   /* explain (2-3 marks) */
[data-size="l"]  { --lines: 7; }   /* describe + explain (4-5 marks) */
[data-size="xl"] { --lines: 12; }  /* extended response (6+ marks) */

/* ------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ws-desk);
  color: var(--ws-ink);
  font-family: var(--ws-font);
  font-size: var(--ws-fs-body);
  line-height: var(--ws-lh);
  counter-reset: ws-section;
}

:where(.page) :where(h1, h2, h3, h4, p, ul, ol, figure, dl, dd) {
  margin: 0;
}

.page img,
.page .ws-img,
.page video {
  display: block;
  max-width: 100%;
  height: auto;
}

.page svg { max-width: 100%; }
.page svg[viewBox] { height: auto; }

.page table { max-width: 100%; }

/* Compatibility shim for legacy inline font sizes (11-13px on ~200 inline
   `style=` subheads and unit spans). Inline style beats any selector, so this
   is the one place the file uses !important. Delete when the sheets are
   rebuilt without inline type. */
.page [style*="font-size:11px"],
.page [style*="font-size:12px"],
.page [style*="font-size:12.5px"],
.page [style*="font-size:13px"],
.page [style*="font-size: 11px"],
.page [style*="font-size: 12px"],
.page [style*="font-size: 13px"] {
  font-size: var(--ws-fs-label) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* -------------------------------------------------------- toolbar + nav */

.ws-toolbar {
  width: 210mm;
  max-width: calc(100% - 2 * var(--ws-s4));
  margin: var(--ws-s4) auto 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--ws-s2);
}
.ws-toolbar button {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  background: var(--ws-accent);
  color: #fff;
  font: 700 var(--ws-fs-label) / 1 var(--ws-font);
  cursor: pointer;
}
.ws-toolbar button:hover { filter: brightness(1.1); }
.ws-toolbar button:focus-visible { outline: 3px solid var(--ws-ink); outline-offset: 2px; }

.ws-page-nav { max-width: calc(100% - 2 * var(--ws-s4)) !important; }

/* ------------------------------------------------------------- the sheet */

.page {
  width: 210mm;
  max-width: calc(100% - 2 * var(--ws-s4));
  margin: var(--ws-s4) auto;
  padding: 16mm 16mm 12mm;
  background: var(--ws-paper);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 12px 32px rgba(15, 23, 42, .10);
}

/* ---------------------------------------------------------------- header */

.ws-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(62mm, auto);
  gap: var(--ws-s5);
  align-items: end;
  padding-bottom: var(--ws-s3);
  margin-bottom: var(--ws-s5);
  border-bottom: 3px solid var(--ws-accent);
}
.ws-header:not(:has(.ws-student-box)) { grid-template-columns: 1fr; }

.ws-kicker {
  font-size: var(--ws-fs-label);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ws-accent);
}
.ws-title {
  margin: 2px 0 var(--ws-s2);
  font-size: var(--ws-fs-title);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ws-ink);
}

/* Tier pill: Foundation / Apply / Challenge, with step pips from the body's
   data-worksheet-type so the difficulty ladder is visible at a glance. */
.ws-subtitle {
  display: inline-flex;
  align-items: center;
  gap: var(--ws-s2);
  padding: 2px 12px 2px 10px;
  border: var(--ws-frame-w) solid currentColor;
  border-radius: 999px;
  font-size: var(--ws-fs-label);
  font-weight: 700;
  color: var(--ws-ink-2);
}
.ws-subtitle::before { letter-spacing: 1px; font-size: 12px; }
body[data-worksheet-type="foundation"] .ws-subtitle { color: var(--ws-step1); }
body[data-worksheet-type="foundation"] .ws-subtitle::before { content: "\25CF\25CB\25CB"; }
body[data-worksheet-type="apply"] .ws-subtitle { color: var(--ws-step2); }
body[data-worksheet-type="apply"] .ws-subtitle::before { content: "\25CF\25CF\25CB"; }
body[data-worksheet-type="master"] .ws-subtitle { color: var(--ws-step3); }
body[data-worksheet-type="master"] .ws-subtitle::before { content: "\25CF\25CF\25CF"; }

.ws-student-box {
  display: grid;
  gap: var(--ws-s2);
}
.ws-field {
  display: grid;
  grid-template-columns: 13mm minmax(0, 1fr);
  gap: var(--ws-s2);
  align-items: end;
  font-size: var(--ws-fs-label);
  font-weight: 600;
  color: var(--ws-muted);
}
.ws-field-line {
  display: block;
  height: 24px;
  border-bottom: var(--ws-frame-w) solid var(--ws-ink-2);
}

/* ---------------------------------------------------------------- goals */

.ws-goals {
  margin-bottom: var(--ws-s5);
  padding: var(--ws-s3) var(--ws-s4);
  border-left: 4px solid var(--ws-accent);
  border-radius: 0 var(--ws-radius) var(--ws-radius) 0;
  background: var(--ws-accent-soft);
  font-size: var(--ws-fs-small);
  break-inside: avoid;
}
.ws-goals-title {
  margin-bottom: var(--ws-s1);
  font-size: var(--ws-fs-label);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ws-accent);
}
.ws-goals ul { padding-left: 20px; }
.ws-goals li + li { margin-top: 2px; }

/* ------------------------------------------------------------- hierarchy
   Level 1  section label   20px/800, numbered accent disc, full-width rule
   Level 2  activity title  17px/700, no rule
   Level 3  instruction     15px/400, secondary ink
   Level 4  question stem   16px/400, hanging accent number
   Badges sit in a right-hand column at 14px so they never compete. */

.ws-section { margin: 0 0 var(--ws-s5); }
.ws-section .ws-section { margin: 0; }            /* inner wrappers (T/F lists) */

.ws-section-label {
  display: flex;
  align-items: center;
  gap: var(--ws-s3);
  margin: 0 0 var(--ws-s4);
  padding-bottom: var(--ws-s2);
  border-bottom: 2px solid var(--ws-accent);
  font-size: var(--ws-fs-h2);
  font-weight: 800;
  line-height: var(--ws-lh-tight);
  color: var(--ws-ink);
  counter-increment: ws-section;
  break-after: avoid;
}
.ws-section-label::before {
  content: counter(ws-section);
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--ws-accent);
  color: var(--ws-accent);
  font-size: 16px;
  font-weight: 800;
}

.ws-activity-title {
  margin: var(--ws-s5) 0 var(--ws-s1);
  font-size: var(--ws-fs-h3);
  font-weight: 700;
  line-height: var(--ws-lh-tight);
  color: var(--ws-ink);
  break-after: avoid;
}
.ws-section-label + .ws-activity-title,
.ws-stimulus + .ws-activity-title { margin-top: 0; }

.ws-instruction {
  margin: 0 0 var(--ws-s3);
  font-size: var(--ws-fs-small);
  color: var(--ws-ink-2);
  break-after: avoid;
}

/* ------------------------------------------------------------- questions */

.ws-q {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--ws-s4);
  margin: 0 0 var(--ws-s5);
  break-inside: avoid;
}
.ws-q > * { grid-column: 1 / -1; min-width: 0; }
.ws-q > :first-child:not(.ws-badge-row) { grid-column: 1; grid-row: 1; }
.ws-q > .ws-badge-row {
  grid-column: 2;
  grid-row: 1;
  flex-direction: column;
  align-items: flex-end;
  margin: 2px 0 0;
}

.ws-q-stem {
  position: relative;
  padding-left: var(--ws-gutter);
  margin-bottom: var(--ws-s2);
  font-size: var(--ws-fs-body);
}
.ws-q-stem:not(:has(.ws-q-num)) { padding-left: 0; }
.ws-q-num {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: var(--ws-accent);
}
/* everything under a numbered stem lines up with the stem text, not the number */
.ws-q:has(> .ws-q-stem .ws-q-num) > :not(.ws-q-stem):not(.ws-badge-row) {
  margin-left: var(--ws-gutter);
  max-width: calc(100% - var(--ws-gutter));   /* a width:100% table would otherwise overhang */
}
.ws-q > p:not([class]) { margin: var(--ws-s2) 0 0; }
.ws-q > ul, .ws-q > ol { padding-left: 20px; margin: 0 0 var(--ws-s2); }

/* ---------------------------------------------------------------- badges */

.ws-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ws-s1) var(--ws-s2);
  margin: 0 0 var(--ws-s2);
}
.ws-badge,
.ws-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 10px;
  border: var(--ws-frame-w) solid currentColor;
  border-radius: 999px;
  background: var(--ws-paper);
  font-size: var(--ws-fs-label);
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
  color: var(--ws-ink-2);
}
.ws-badge::before, .ws-step::before { font-size: 10px; letter-spacing: 1px; }
.ws-badge-recall,    .ws-step[data-step="1"] { color: var(--ws-step1); }
.ws-badge-apply,     .ws-step[data-step="2"] { color: var(--ws-step2); }
.ws-badge-challenge, .ws-step[data-step="3"] { color: var(--ws-step3); }
.ws-badge-recall::before,    .ws-step[data-step="1"]::before { content: "\25CF\25CB\25CB"; }
.ws-badge-apply::before,     .ws-step[data-step="2"]::before { content: "\25CF\25CF\25CB"; }
.ws-badge-challenge::before, .ws-step[data-step="3"]::before { content: "\25CF\25CF\25CF"; }
.ws-badge-marks {
  border-color: transparent;
  padding-right: 0;
  color: var(--ws-ink);
}

/* ---------------------------------------------------------- answer lines */

.ws-work { display: block; margin-top: var(--ws-s1); }
.ws-lines { display: block; margin-top: var(--ws-s1); }

.ws-line {
  display: block;
  height: var(--ws-pitch);
  border-bottom: var(--ws-rule-w) solid var(--ws-rule);
}

/* Lines by count, with no spans: <div class="ws-lines" data-lines="6"></div> */
.ws-lines:empty,
.ws-lines[data-lines],
.ws-lines[data-size],
.ws-lines[style*="--lines"] {
  height: calc(var(--lines, 3) * var(--ws-pitch));
}

/* ------------------------------------------------------- ruled boxes
   Writing lines drawn without background images. Chromium rasterises CSS
   gradients into PDFs at CSS-pixel resolution, and in a table cell (which
   sits at fractional offsets) that dropped or faded every third line. Here
   ONE 1px rule is repeated by solid box-shadows at whole-pitch offsets and
   the box clips the surplus, so every line is a vector rectangle exactly one
   pitch apart. Up to 16 lines; --rule-inset / --rule-top position them. */
.ws-lines:empty,
.ws-lines[data-lines],
.ws-lines[data-size],
.ws-lines[style*="--lines"],
.ws-table:not(:has(thead)):not(:has(th)) td.ws-answer,
.ws-sort-box:not([style*="min-height:auto"]),
.ws-calc-work {
  position: relative;
  overflow: hidden;
}
.ws-lines:empty::after,
.ws-lines[data-lines]::after,
.ws-lines[data-size]::after,
.ws-lines[style*="--lines"]::after,
.ws-table:not(:has(thead)):not(:has(th)) td.ws-answer::after,
.ws-sort-box:not([style*="min-height:auto"])::after,
.ws-calc-work::after {
  content: "";
  position: absolute;
  left: var(--rule-inset, 0px);
  right: var(--rule-inset, 0px);
  top: calc(var(--rule-top, 0px) + var(--ws-pitch) - 1px);
  height: 0;
  border-top: 1px solid var(--ws-rule);
  box-shadow:
    0 calc(1 * var(--ws-pitch)) 0 var(--ws-rule),
    0 calc(2 * var(--ws-pitch)) 0 var(--ws-rule),
    0 calc(3 * var(--ws-pitch)) 0 var(--ws-rule),
    0 calc(4 * var(--ws-pitch)) 0 var(--ws-rule),
    0 calc(5 * var(--ws-pitch)) 0 var(--ws-rule),
    0 calc(6 * var(--ws-pitch)) 0 var(--ws-rule),
    0 calc(7 * var(--ws-pitch)) 0 var(--ws-rule),
    0 calc(8 * var(--ws-pitch)) 0 var(--ws-rule),
    0 calc(9 * var(--ws-pitch)) 0 var(--ws-rule),
    0 calc(10 * var(--ws-pitch)) 0 var(--ws-rule),
    0 calc(11 * var(--ws-pitch)) 0 var(--ws-rule),
    0 calc(12 * var(--ws-pitch)) 0 var(--ws-rule),
    0 calc(13 * var(--ws-pitch)) 0 var(--ws-rule),
    0 calc(14 * var(--ws-pitch)) 0 var(--ws-rule),
    0 calc(15 * var(--ws-pitch)) 0 var(--ws-rule);
  pointer-events: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.ws-table td.ws-answer { --rule-inset: 12px; }
.ws-sort-box { --rule-inset: 10px; --rule-top: var(--ws-s2); }
.ws-calc-work { --rule-inset: 12px; --rule-top: 24px; }

/* -------------------------------------------------------------- tables */

.ws-table {
  display: table;
  width: 100%;
  margin: var(--ws-s2) 0 var(--ws-s4);
  border-collapse: collapse;
  font-size: var(--ws-fs-small);
  line-height: 1.4;
}
.ws-table th,
.ws-table td {
  padding: var(--ws-s2) 10px;
  border: 1px solid var(--ws-frame);
  vertical-align: top;
  text-align: left;
  overflow-wrap: break-word;
}
.ws-table th {
  background: var(--ws-accent-soft);
  font-weight: 700;
  color: var(--ws-ink);
}
.ws-table thead { display: table-header-group; }
/* A blank grid the student fills in (every header cell is an answer cell)
   gets equal columns, whatever widths the markup asked for. */
.ws-table:has(th.ws-answer):not(:has(th:not(.ws-answer))) { table-layout: fixed; }
.ws-table tr { break-inside: avoid; }

/* Answer cells get real height: `height` on a cell acts as a minimum, which
   `min-height` (what the old markup uses inline) never did. */
.ws-table td.ws-answer {
  height: calc(var(--lines, 1.4) * var(--ws-pitch));
  min-width: 18mm;
  background: var(--ws-paper);
}
.ws-table th.ws-answer {
  height: var(--ws-pitch);
  min-width: 18mm;
}
/* A prompt | answer table (no header row) is a planning or explain table:
   give each answer three ruled lines. */
.ws-table:not(:has(thead)):not(:has(th)) td.ws-answer {
  --lines: 3;
  height: calc(var(--lines) * var(--ws-pitch) + var(--ws-s3));
  padding: 0 var(--ws-s3) var(--ws-s3);
  /* ruling inset from the cell walls so it reads as writing lines, not rows */
  background: var(--ws-paper);
}
.ws-table td.ws-answer[data-lines] { height: calc(var(--lines) * var(--ws-pitch)); }

/* --------------------------------------------------- cloze + word bank */

.ws-cloze {
  font-size: var(--ws-fs-body);
  line-height: 2.3;
  margin-bottom: var(--ws-s4);
}
.ws-blank {
  display: inline-block;
  min-width: 32mm;
  height: 1.3em;
  margin: 0 3px;
  border-bottom: var(--ws-frame-w) solid var(--ws-ink-2);
  vertical-align: baseline;
}

.ws-word-bank,
.ws-items-pool {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ws-s2);
  margin: 0 0 var(--ws-s4);
  padding: var(--ws-s3) var(--ws-s3) var(--ws-s3);
  border: var(--ws-frame-w) dashed var(--ws-frame);
  border-radius: var(--ws-radius);
  break-inside: avoid;
  break-after: avoid;
}
.ws-word-bank::before,
.ws-items-pool::before {
  flex: 0 0 100%;
  font-size: var(--ws-fs-label);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ws-muted);
}
.ws-word-bank::before { content: "Word bank"; }
.ws-items-pool::before { content: "Items to sort"; }

.ws-word,
.ws-item-chip {
  display: inline-block;
  padding: 3px 10px;
  border: var(--ws-frame-w) solid var(--ws-frame);
  border-radius: 5px;
  background: var(--ws-paper);
  font-size: var(--ws-fs-small);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ws-ink);
}

/* --------------------------------------------------------- true / false */

.ws-tf-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ws-s4);
  align-items: start;
  padding: var(--ws-s3) 0;
  border-bottom: 1px solid var(--ws-frame-soft);
  break-inside: avoid;
}
.ws-tf-item:first-child { padding-top: 0; }
.ws-tf-statement { font-size: var(--ws-fs-body); }
.ws-tf-correction {
  display: flex;
  align-items: flex-end;
  gap: var(--ws-s2);
  margin-top: 2px;
  font-size: var(--ws-fs-label);
  color: var(--ws-muted);
  white-space: nowrap;
}
/* label and line share one row: the inline width:100% becomes a flex basis
   that shrinks, so the line fills what is left after "Correct it:" */
.ws-tf-correction .ws-line { flex: 1 1 auto; min-width: 0; height: var(--ws-pitch); margin-top: 0 !important; }
.ws-tf-buttons { display: flex; gap: var(--ws-s2); }
.ws-tf-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: var(--ws-frame-w) solid var(--ws-ink-2);
  border-radius: 50%;
  font-size: var(--ws-fs-body);
  font-weight: 700;
  color: var(--ws-ink);
}

/* ---------------------------------------------------------------- sort */

.ws-sort-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40mm, 1fr));
  gap: var(--ws-s3);
  margin: var(--ws-s2) 0 var(--ws-s4);
  break-inside: avoid;
}
.ws-sort-grid > div { display: flex; flex-direction: column; min-width: 0; }
.ws-sort-col-label {
  margin-bottom: var(--ws-s1);
  font-size: var(--ws-fs-small);
  font-weight: 700;
  line-height: var(--ws-lh-tight);
  color: var(--ws-ink);
}
.ws-sort-box {
  flex: 1 0 auto;
  min-height: calc(var(--lines, 4) * var(--ws-pitch) + 2 * var(--ws-s2));
  padding: var(--ws-s2) 10px;
  border: var(--ws-frame-w) solid var(--ws-frame);
  border-top: 3px solid var(--ws-accent);
  border-radius: 0 0 var(--ws-radius) var(--ws-radius);
  background: var(--ws-paper);
}
.ws-sort-box[style*="min-height:auto"] { background: var(--ws-paper); }
/* Boxes grow with the pool: 9+ items -> 5 lines, 13+ -> 7 lines. */
:has(> .ws-items-pool > :nth-child(9)) > .ws-sort-grid .ws-sort-box { --lines: 5; }
:has(> .ws-items-pool > :nth-child(13)) > .ws-sort-grid .ws-sort-box { --lines: 7; }

/* --------------------------------------------------------------- chain */

.ws-chain { display: grid; gap: var(--ws-s2); margin: var(--ws-s2) 0 var(--ws-s4); }
.ws-chain-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  gap: var(--ws-s2);
  align-items: stretch;
  break-inside: avoid;
}
.ws-chain-cell {
  min-height: calc(var(--lines, 2) * var(--ws-pitch));
  padding: var(--ws-s2) 10px;
  border: var(--ws-frame-w) solid var(--ws-frame);
  border-radius: var(--ws-radius);
  background: var(--ws-paper);
  font-size: var(--ws-fs-small);
}
.ws-chain-cell.ws-given { border-color: var(--ws-accent); background: var(--ws-accent-soft); font-weight: 600; }
.ws-chain-cell.ws-empty { border-style: dashed; border-color: var(--ws-rule); }
.ws-chain-arrow { align-self: center; text-align: center; font-size: 20px; font-weight: 700; color: var(--ws-muted); }

/* ------------------------------------------------------------ stimulus */

.ws-stimulus {
  margin: 0 0 var(--ws-s4);
  padding: var(--ws-s3) var(--ws-s4);
  border: var(--ws-frame-w) solid var(--ws-frame);
  border-left: 5px solid var(--ws-accent);
  border-radius: 0 var(--ws-radius) var(--ws-radius) 0;
  background: var(--ws-tint);
  font-size: var(--ws-fs-body);
  break-inside: avoid;
}
.ws-stimulus > * + * { margin-top: var(--ws-s2); }
.ws-stimulus-label {
  font-size: var(--ws-fs-label);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ws-accent);
}
.ws-stimulus .ws-table { margin-bottom: 0; background: var(--ws-paper); }

/* ------------------------------------------------------ figures + images */

.ws-fig { margin: var(--ws-s3) auto var(--ws-s4); text-align: center; break-inside: avoid; }
.ws-fig svg { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.ws-fig figcaption,
.ws-data-caption,
.ws-graph-title {
  margin-top: var(--ws-s2);
  font-size: var(--ws-fs-label);
  line-height: 1.45;
  color: var(--ws-muted);
}
.ws-img { margin: var(--ws-s2) auto var(--ws-s4); max-height: 120mm; width: auto; object-fit: contain; break-inside: avoid; }
.ws-img-placeholder {
  display: flex; align-items: center; justify-content: center;
  min-height: 28mm; margin-bottom: var(--ws-s4);
  border: 2px dashed var(--ws-frame); border-radius: var(--ws-radius);
}
.ws-img-tag { font-size: var(--ws-fs-label); font-style: italic; color: var(--ws-muted); }

/* ------------------------------------------------------ drawing box (new)
   <div class="ws-draw-box" data-lines="8" data-label="Draw and label"></div>
   Height is in line pitches so it sits on the same rhythm as the lines. */
.ws-draw-box {
  position: relative;
  min-height: calc(var(--lines, 8) * var(--ws-pitch));
  margin: var(--ws-s2) 0 var(--ws-s4);
  border: var(--ws-frame-w) dashed var(--ws-rule);
  border-radius: var(--ws-radius);
  break-inside: avoid;
}
.ws-draw-box[data-label]::before {
  content: attr(data-label);
  position: absolute;
  top: 6px;
  left: 10px;
  font-size: var(--ws-fs-label);
  color: var(--ws-muted);
}
.ws-draw-box.ws-grid-paper,
.ws-graph-grid {
  background-color: var(--ws-paper);
  background-image:
    linear-gradient(to right, #c4ccd6 1px, transparent 1px),
    linear-gradient(to bottom, #c4ccd6 1px, transparent 1px),
    linear-gradient(to right, #e3e8ee 1px, transparent 1px),
    linear-gradient(to bottom, #e3e8ee 1px, transparent 1px);
  background-size: calc(2 * var(--ws-grid)) calc(2 * var(--ws-grid)), calc(2 * var(--ws-grid)) calc(2 * var(--ws-grid)), var(--ws-grid) var(--ws-grid), var(--ws-grid) var(--ws-grid);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ---------------------------------------------------- calculation (new)
   <div class="ws-calc">
     <div class="ws-calc-work" data-lines="4"></div>
     <p class="ws-calc-answer">Answer <span class="ws-calc-line"></span> <span class="ws-calc-unit">N</span></p>
   </div> */
.ws-calc {
  margin: var(--ws-s2) 0 var(--ws-s2);
  border: var(--ws-frame-w) solid var(--ws-frame);
  border-radius: var(--ws-radius);
  break-inside: avoid;
}
.ws-calc-work {
  position: relative;
  height: calc(var(--lines, 4) * var(--ws-pitch) + var(--ws-s5) + var(--ws-s3));
  padding: var(--ws-s5) var(--ws-s3) var(--ws-s3);
}
.ws-calc-work::before {
  content: "Working";
  position: absolute;
  top: 4px;
  left: var(--ws-s3);
  font-size: var(--ws-fs-label);
  font-weight: 700;
  color: var(--ws-muted);
}
.ws-calc-answer {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--ws-s2);
  padding: var(--ws-s3);
  border-top: var(--ws-frame-w) solid var(--ws-frame);
  font-weight: 700;
}
.ws-calc-line {
  display: inline-block;
  width: 40mm;
  max-width: 45%;
  height: 1.4em;
  border-bottom: 2px solid var(--ws-ink);
}
.ws-calc-unit { min-width: 3ch; font-weight: 700; }

/* -------------------------------------------------------- data table (new)
   <figure class="ws-data"><figcaption class="ws-data-caption">Table 1 ...</figcaption>
     <table class="ws-table">...</table><p class="ws-data-source">...</p></figure> */
.ws-data { margin: var(--ws-s2) 0 var(--ws-s4); break-inside: avoid; }
.ws-data .ws-data-caption { margin: 0 0 var(--ws-s1); font-weight: 700; color: var(--ws-ink); }
.ws-data .ws-table { margin: 0; }
.ws-data .ws-table td { font-variant-numeric: tabular-nums; }
.ws-data .ws-table td:not(:first-child),
.ws-data .ws-table th:not(:first-child) { text-align: center; }
.ws-data-source { margin-top: var(--ws-s1); font-size: var(--ws-fs-label); color: var(--ws-muted); }

/* -------------------------------------------------------- graph frame (new)
   <figure class="ws-graph" data-lines="9">
     <figcaption class="ws-graph-title">Graph 1: ...</figcaption>
     <div class="ws-graph-body">
       <span class="ws-graph-y">Force (N)</span>
       <div class="ws-graph-grid" role="img" aria-label="Blank grid for a line graph"></div>
       <span class="ws-graph-x">Ramp angle (degrees)</span>
     </div></figure> */
.ws-graph { margin: var(--ws-s2) 0 var(--ws-s4); break-inside: avoid; }
.ws-graph .ws-graph-title { margin: 0 0 var(--ws-s2); font-weight: 700; color: var(--ws-ink); }
.ws-graph-body {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: var(--ws-s1) var(--ws-s2);
  max-width: 150mm;
}
.ws-graph-grid {
  height: calc(var(--lines, 9) * var(--ws-pitch));
  border-left: 2px solid var(--ws-ink);
  border-bottom: 2px solid var(--ws-ink);
}
.ws-graph-y {
  grid-row: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: center;
  justify-self: center;
  font-size: var(--ws-fs-label);
  font-weight: 600;
  color: var(--ws-ink-2);
}
.ws-graph-x {
  grid-column: 2;
  text-align: center;
  font-size: var(--ws-fs-label);
  font-weight: 600;
  color: var(--ws-ink-2);
}
.ws-graph-y:empty::after, .ws-graph-x:empty::after { content: "________________ (unit: ____ )"; font-weight: 400; }

/* ------------------------------------------------ investigation (new)
   <div class="ws-investigation">
     <div class="ws-inv-step"><p class="ws-inv-label">Question</p> ... </div>
     <div class="ws-inv-step"><p class="ws-inv-label">Variables</p>
       <dl class="ws-inv-vars"><dt>Independent</dt><dd><span class="ws-line"></span></dd> ...</dl></div>
     <div class="ws-inv-step"><p class="ws-inv-label">Method</p><ol class="ws-inv-method"><li><span class="ws-line"></span></li>...</ol></div>
     <div class="ws-inv-step"><p class="ws-inv-label">Results</p><table class="ws-table">...</table></div>
     <div class="ws-inv-step"><p class="ws-inv-label">Conclusion</p><div class="ws-lines" data-lines="3"></div></div>
   </div>
   Each step is unbreakable; the whole investigation may break between steps. */
.ws-investigation {
  counter-reset: ws-inv;
  margin: var(--ws-s2) 0 var(--ws-s5);
  border: var(--ws-frame-w) solid var(--ws-frame);
  border-radius: var(--ws-radius);
}
.ws-inv-step {
  padding: var(--ws-s3) var(--ws-s4) var(--ws-s4);
  break-inside: avoid;
}
.ws-inv-step + .ws-inv-step { border-top: 1px solid var(--ws-frame-soft); }
.ws-inv-label {
  display: flex;
  align-items: center;
  gap: var(--ws-s2);
  margin-bottom: var(--ws-s1);
  font-size: var(--ws-fs-small);
  font-weight: 800;
  color: var(--ws-ink);
  counter-increment: ws-inv;
  break-after: avoid;
}
.ws-inv-label::before {
  content: counter(ws-inv);
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--ws-accent);
  color: #fff;
  font-size: var(--ws-fs-label);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.ws-inv-hint { font-size: var(--ws-fs-label); color: var(--ws-muted); }
.ws-inv-vars {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0 var(--ws-s3);
  align-items: end;
}
.ws-inv-vars dt { font-size: var(--ws-fs-small); font-weight: 600; padding-bottom: 4px; }
.ws-inv-vars dd { margin: 0; }
.ws-inv-method { margin: 0; padding-left: 24px; }
.ws-inv-method li::marker { font-weight: 700; color: var(--ws-muted); }
.ws-investigation .ws-table { margin-bottom: 0; }

/* -------------------------------------------- extended response (new)
   <div class="ws-q ws-extended"> stem + badges +
     <aside class="ws-criteria"><p class="ws-criteria-title">A top answer will</p><ul>...</ul></aside>
     <div class="ws-lines" data-size="xl"></div></div> */
.ws-extended { padding-top: var(--ws-s3); border-top: 2px solid var(--ws-frame-soft); }
.ws-criteria {
  margin: 0 0 var(--ws-s2);
  padding: var(--ws-s2) var(--ws-s3);
  border: var(--ws-frame-w) dashed var(--ws-frame);
  border-radius: var(--ws-radius);
  font-size: var(--ws-fs-label);
  color: var(--ws-ink-2);
}
.ws-criteria-title { font-weight: 800; color: var(--ws-ink); }
.ws-criteria ul { margin: 2px 0 0; padding-left: 18px; }
.ws-extended .ws-lines:not([data-lines]):not([data-size]):empty { --lines: 12; }

/* -------------------------------------------------------------- wrap-up
   Hidden, as in worksheet-junior.css: 941 sheets carry one and none has ever
   been shown. Opt a sheet in with <div class="ws-wrapup" data-show>. */
.ws-wrapup { display: none; }
.ws-wrapup[data-show] {
  display: block;
  margin-top: var(--ws-s5);
  padding: var(--ws-s3) var(--ws-s4);
  border: var(--ws-frame-w) solid var(--ws-accent);
  border-radius: var(--ws-radius);
  break-inside: avoid;
}
.ws-wrapup-label {
  font-size: var(--ws-fs-label);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ws-accent);
}

/* -------------------------------------------------------------- notes */

.ws-note {
  margin: var(--ws-s3) 0;
  padding: var(--ws-s2) var(--ws-s3);
  border-left: 3px solid var(--ws-frame);
  font-size: var(--ws-fs-small);
  color: var(--ws-ink-2);
}
.ws-note.sa-callout--beyond,
.sa-callout--beyond {
  display: block;
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--hs-beyond, #543a91);
  border-radius: 4px;
  background: var(--hs-beyond-bg, #f0ebfa);
  font-size: var(--ws-fs-body);
  line-height: var(--ws-lh);
  color: #1f2937;
}
.sa-callout--beyond strong { color: var(--hs-beyond, #543a91); }
.sa-callout--beyond strong:first-child { display: block; margin-bottom: 3px; }

/* --------------------------------------------------------------- footer */

.ws-footer {
  margin-top: var(--ws-s6);
  padding-top: var(--ws-s2);
  border-top: 1px solid var(--ws-frame-soft);
  text-align: center;
  font-size: var(--ws-fs-label);
  color: var(--ws-muted);
}

/* ========================================================= TEACHER KEY
   Two shapes exist in the estate and both are styled here:
   (1) a final `.page` whose h2 reads "Answer Key" (93 sheets). CSS cannot
       read text, so the page is recognised structurally: a `.page` after the
       first that holds no student input. Measured over all 1,975 `.page`
       divs on 4fa49c1a2 this selects exactly the 93 key pages. New sheets
       say so explicitly with `.ws-key-page`.
   (2) a `.ws-answers` section (45 sheets).
   Look: violet key colour, dashed frame, a "Teacher copy" banner that also
   prints, answer text at 15px. Every class here exists so keys stay K2-clean. */

.ws-key-page,
.page ~ .page:not(:has(.ws-line, .ws-lines, .ws-blank, .ws-sort-box, .ws-answer, .ws-tf-btn, .ws-field-line, .ws-chain-cell.ws-empty, .ws-draw-box, .ws-calc)) {
  --ws-accent: var(--ws-key);
  --ws-accent-soft: var(--ws-key-soft);
  font-size: var(--ws-fs-small);
  outline: 2px dashed var(--ws-key);
  outline-offset: -8px;
}
.ws-key-page::before,
.page ~ .page:not(:has(.ws-line, .ws-lines, .ws-blank, .ws-sort-box, .ws-answer, .ws-tf-btn, .ws-field-line, .ws-chain-cell.ws-empty, .ws-draw-box, .ws-calc))::before,
.ws-answers::before {
  content: "Teacher copy \2014  answers. Remove before handing out.";
  display: block;
  margin: 0 0 var(--ws-s4);
  font-size: var(--ws-fs-label);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ws-key);
}
.ws-key-page .ws-section-label,
.page ~ .page:not(:has(.ws-line, .ws-lines, .ws-blank, .ws-sort-box, .ws-answer, .ws-tf-btn, .ws-field-line, .ws-chain-cell.ws-empty, .ws-draw-box, .ws-calc)) .ws-section-label {
  counter-increment: none;
}
.ws-key-page .ws-section-label::before,
.page ~ .page:not(:has(.ws-line, .ws-lines, .ws-blank, .ws-sort-box, .ws-answer, .ws-tf-btn, .ws-field-line, .ws-chain-cell.ws-empty, .ws-draw-box, .ws-calc)) .ws-section-label::before {
  content: "\2713";
}
.ws-key-page .ws-activity-title,
.page ~ .page:not(:has(.ws-line, .ws-lines, .ws-blank, .ws-sort-box, .ws-answer, .ws-tf-btn, .ws-field-line, .ws-chain-cell.ws-empty, .ws-draw-box, .ws-calc)) .ws-activity-title {
  margin-top: var(--ws-s4);
  font-size: var(--ws-fs-body);
}
.ws-key-page .ws-q-stem,
.page ~ .page:not(:has(.ws-line, .ws-lines, .ws-blank, .ws-sort-box, .ws-answer, .ws-tf-btn, .ws-field-line, .ws-chain-cell.ws-empty, .ws-draw-box, .ws-calc)) .ws-q-stem {
  margin-bottom: var(--ws-s1);
  font-size: var(--ws-fs-small);
}

.ws-answers {
  --ws-accent: var(--ws-key);
  margin-top: var(--ws-s6);
  padding: var(--ws-s4) var(--ws-s5);
  border: 2px dashed var(--ws-key);
  border-radius: var(--ws-radius);
  font-size: var(--ws-fs-small);
}
.ws-answers-header {
  margin-bottom: var(--ws-s3);
  padding-bottom: var(--ws-s2);
  border-bottom: 2px solid var(--ws-key);
  font-size: var(--ws-fs-h3);
  font-weight: 800;
  color: var(--ws-ink);
}
.ws-answers .ws-answer { padding: var(--ws-s3) 0; break-inside: avoid; }
.ws-answers .ws-answer + .ws-answer { border-top: 1px solid var(--ws-frame-soft); }
.ws-answer h3 {
  margin-bottom: var(--ws-s1);
  font-size: var(--ws-fs-small);
  font-weight: 800;
  color: var(--ws-key);
  break-after: avoid;
}
.ws-answer p + p { margin-top: var(--ws-s2); }
.answer-marks { font-weight: 600; color: var(--ws-muted); }
.ws-key-note { font-size: var(--ws-fs-label); color: var(--ws-muted); }

/* ================================================================ PHONE */

@media screen and (max-width: 640px) {
  body { background: var(--ws-paper); }
  .ws-toolbar { width: auto; max-width: none; margin: 0; padding: var(--ws-s3) var(--ws-s4) 0; }
  .page {
    width: auto;
    max-width: none;
    margin: 0;
    padding: var(--ws-s4) var(--ws-s4) var(--ws-s6);
    border-radius: 0;
    box-shadow: none;
  }
  .page + .page { border-top: 8px solid var(--ws-desk); }

  .ws-header { grid-template-columns: 1fr; gap: var(--ws-s3); }
  .ws-student-box { display: none; }           /* nobody writes a name on a phone */
  .ws-title { font-size: 25px; }

  /* badges drop under the stem instead of claiming a column */
  .ws-q { grid-template-columns: minmax(0, 1fr); }
  .ws-q > .ws-badge-row { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; margin: 0 0 var(--ws-s2) var(--ws-gutter); }
  .ws-q:not(:has(> .ws-q-stem .ws-q-num)) > .ws-badge-row { margin-left: 0; }

  /* tap-sized T/F */
  .ws-tf-item { gap: var(--ws-s3); }
  .ws-tf-btn { width: var(--hs-tap, 44px); height: var(--hs-tap, 44px); }

  /* prompt | answer tables stack; data tables stay tables and wrap */
  .ws-table:not(:has(thead)):not(:has(th)),
  .ws-table:not(:has(thead)):not(:has(th)) tbody,
  .ws-table:not(:has(thead)):not(:has(th)) tr,
  .ws-table:not(:has(thead)):not(:has(th)) td { display: block; width: auto !important; }
  .ws-table:not(:has(thead)):not(:has(th)) tr { border: 1px solid var(--ws-frame); border-bottom: 0; }
  .ws-table:not(:has(thead)):not(:has(th)) tr:last-child { border-bottom: 1px solid var(--ws-frame); }
  .ws-table:not(:has(thead)):not(:has(th)) td { border: 0; }
  .ws-table:not(:has(thead)):not(:has(th)) td + td { border-top: 1px dashed var(--ws-frame-soft); }
  .ws-table th, .ws-table td { padding: 6px; font-size: var(--ws-fs-label); hyphens: auto; overflow-wrap: break-word; }
  /* 4+ columns cannot fit 328px without breaking words mid-way, so the
     table scrolls inside its own box; the page itself never scrolls sideways. */
  .ws-table:has(tr > :nth-child(4)) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ws-table:has(tr > :nth-child(4)) th { min-width: 88px; }
  .ws-table th, .ws-table td { width: auto !important; min-width: 0; }
  .ws-table td.ws-answer, .ws-table th.ws-answer { min-width: 0; }

  .ws-sort-grid[style*="1fr 1fr 1fr"],
  .ws-sort-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .ws-chain-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ws-chain-arrow { transform: rotate(90deg); line-height: 1.2; }
  .ws-blank { min-width: 24mm; }
  .ws-calc-line { width: 30mm; }
}

/* ================================================================ PRINT */

@page {
  size: A4;
  margin: 14mm 15mm 15mm;
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font: 9pt "Segoe UI", system-ui, Arial, sans-serif;
    color: #556274;
  }
}

@media print {
  html, body { background: #fff; }
  body { font-size: var(--ws-fs-body); }

  .ws-toolbar, .toolbar, .ws-page-nav { display: none !important; }

  /* A .page is not a sheet. Let the student part flow. */
  .page {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    break-after: auto;
    page-break-after: auto;
  }
  .page + .page { margin-top: var(--ws-s5); }

  /* ...except the teacher key, which always starts a fresh sheet. */
  .ws-key-page,
  .page ~ .page:not(:has(.ws-line, .ws-lines, .ws-blank, .ws-sort-box, .ws-answer, .ws-tf-btn, .ws-field-line, .ws-chain-cell.ws-empty, .ws-draw-box, .ws-calc)),
  .ws-answers {
    break-before: page;
    margin-top: 0;
    outline: 0;
  }

  /* Sections may break; the things inside them may not. */
  .ws-section { break-inside: auto; }
  .ws-q, .ws-tf-item, .ws-sort-grid, .ws-chain-row, .ws-stimulus, .ws-table tr,
  .ws-word-bank, .ws-items-pool, .ws-fig, .ws-img, .ws-draw-box, .ws-calc,
  .ws-data, .ws-graph, .ws-inv-step, .ws-goals, .ws-header, .ws-answer { break-inside: avoid; }

  /* Headings, instructions and banks stay with what follows them. */
  .ws-section-label, .ws-activity-title, .ws-instruction, .ws-stimulus-label,
  .ws-word-bank, .ws-items-pool, .ws-inv-label, .ws-answer h3 { break-after: avoid; break-inside: avoid; }

  p { orphans: 3; widows: 3; }

  /* Ink-light: drop every screen fill, keep outlines. */
  .ws-goals, .ws-stimulus, .ws-table th, .ws-chain-cell.ws-given, .sa-callout--beyond { background: none; }
  .ws-goals { border: var(--ws-frame-w) solid var(--ws-frame); border-left: 4px solid var(--ws-accent); }
  .ws-table th { border-bottom: 2px solid var(--ws-ink-2); }
  .ws-footer { margin-top: var(--ws-s5); }
}