/* ==========================================================================
   CARL · No AI Needed worksheet system
   Shared print stylesheet. One file for every sheet in the library.
   Paper: US Letter (8.5 x 11in). A4 handled by @page fallback.
   Ink budget: black + one print-safe CARL teal. Nothing else.
   ========================================================================== */

/* Self-hosted, not fetched from Google.
   Three reasons, in order of how much they cost. The layout was
   non-deterministic: a sheet verified on a machine that could reach Google and
   a sheet printed on one that could not were different sheets, and swapping the
   display font for one with other metrics pushed 15 of 153 over a page. A
   teacher printing offline or behind a district firewall got the fallback. And
   a Canadian K-12 sheet should not call a third party from a school device to
   render itself. The files are here, the render is the same everywhere, and
   Fredoka is OFL so self-hosting and PDF embedding are both permitted
   (licence kept beside the file as Fredoka-OFL.txt). */
/* STATIC FACES, NOT THE VARIABLE FILE. On screen the variable font renders
   fine, but Chromium's PDF export does not embed it: every sheet exported with
   Poppins and Liberation Sans in place of Fredoka, so the PDF a teacher
   downloads was not the sheet that was verified. Four fixed weights export and
   embed properly. */
@font-face {
  font-family: "Fredoka";
  src: url("fonts/Fredoka-Regular.ttf") format("truetype");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("fonts/Fredoka-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("fonts/Fredoka-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("fonts/Fredoka-Bold.ttf") format("truetype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Ink */
  --ink:        #001930;   /* navy deep, used instead of black */
  --ink-soft:   #4A5B6B;
  --ink-meta:   #8B95A0;
  --rule:       #D5DDE3;
  --rule-soft:  #E6ECF0;

  /* The single accent. Print-safe CARL teal, AA on white. */
  --accent:      #0F7C8A;
  --accent-tint: #EEF7F9;
  --accent-rule: #B9DDE3;

  /* Tracing */
  --trace-body:  #E3EAEE;  /* fat guide stroke under the numeral */
  --trace-dash:  #001930;  /* dashed centre line, hero only */
  --trace-thin:  #8A9AA7;  /* dotted numerals in the writing rows */

  /* Type. Fredoka carries everything a child reads: rounder, friendlier, and
     the single-storey letterforms match how K students are taught to print.
     Poppins stays on teacher-facing chrome so the sheet still reads as CARL. */
  --font-display: "Fredoka", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui:      "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Page geometry */
  --page-w: 8.5in;
  --page-h: 11in;
  --page-pad-x: 0.62in;
  --page-pad-y: 0.5in;
}

* { box-sizing: border-box; }

html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

body {
  margin: 0;
  background: #E9EDF0;
  font-family: var(--font-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------- the page */

.sheet {
  position: relative;
  width: var(--page-w);
  min-height: var(--page-h);
  margin: 24px auto;
  padding: var(--page-pad-y) var(--page-pad-x);
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 25, 48, .18);
  display: flex;
  flex-direction: column;
}

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

.sheet-head { flex: none; }

.head-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: 8.5pt;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
}

.namedate { display: flex; gap: 22px; flex: none; }

.nd {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 8.5pt;
  color: var(--ink-soft);
}
.nd u {
  display: block;
  width: 1.45in;
  border-bottom: 1.2px solid var(--ink);
  text-decoration: none;
}
.nd--sm u { width: 1.05in; }

.head-rule {
  margin: 9px 0 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

/* Title and subtitle share a line, baseline aligned. */
.title-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.sheet-title {
  position: relative;
  font-family: var(--font-display);
  margin: 15px 0 0;
  padding-left: 14px;
  font-size: 24pt;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.sheet-title::before {
  content: "";
  position: absolute;
  left: 0; top: .1em; bottom: .1em;
  width: 5px;
  background: var(--ink);
  border-radius: 3px;
}

.sheet-sub {
  font-family: var(--font-display);
  margin: 0;
  font-size: 11pt;
  font-weight: 500;
  color: var(--ink);
}
.sheet-sub .t { color: var(--accent); }
.sheet-sub .m { color: var(--ink-soft); }

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

.sheet-foot {
  flex: none;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 7.5pt;
  color: var(--ink-meta);
}
.foot-brand {
  font-weight: 700;
  letter-spacing: .1em;
  font-size: 8pt;
  color: var(--ink);
}
.foot-badge {
  padding: 2.5px 8px;
  border: 1px solid var(--accent-rule);
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 6.8pt;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.foot-meta { margin-left: auto; }

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

.sheet-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------ numeral rendering */

.n-body  { fill: none; stroke: var(--trace-body); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.n-dash  { fill: none; stroke: var(--trace-dash); stroke-width: 2.6; stroke-dasharray: 7 9; stroke-linecap: round; stroke-linejoin: round; }
.n-solid { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.n-thin  { fill: none; stroke: var(--trace-thin); stroke-width: 4; stroke-dasharray: 5.5 7.5; stroke-linecap: round; stroke-linejoin: round; }

/* row-scale versions (rows are wide viewBoxes, so strokes read smaller) */
.n-body--row { stroke-width: 22; }
.n-find      { stroke-width: 10; }
.n-dash--row { stroke-width: 2.4; stroke-dasharray: 6 8; }

/* stroke-order marks */
.mark-dot   { fill: var(--accent); }
.mark-num   { fill: #fff; font-size: 11px; font-weight: 600; text-anchor: middle; font-family: var(--font-display); }
.mark-arrow { fill: var(--accent); }

/* writing guides */
/* Three weights, not three of the same. The baseline is what a child sits the
   numeral on, so it is much the heaviest; the top line is a ceiling hint only. */
.g-top  { stroke: #DFE6EB; stroke-width: 1.3; }
.g-mid  { stroke: #C9D3DA; stroke-width: 1.3; stroke-dasharray: 7 9; }
.g-base { stroke: var(--ink); stroke-width: 2.6; }

/* ten frame */
.frame { fill: none; stroke: var(--ink); stroke-width: 4.5; }
.tf { margin-top: auto; padding-top: 10px; }

/* counting shapes */
.shape { fill: none; stroke: var(--ink); stroke-width: 4.5; stroke-linejoin: round; }

/* ------------------------------------------------------------- components */

/* Two sides, each centred on its own content. The motif takes the left, the
   word chip, instruction and model numeral take the right. The right side is
   wider because it carries three elements to the left's one: at 50/50 the
   instruction wrapped to three lines on any number with a longer hint. */
.hero {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  align-items: center;
}
.hero-half  { display: flex; align-items: center; justify-content: center; gap: 20px; }
.hero-meta  { display: flex; align-items: center; gap: 18px; }
.hero-motif { flex: none; }
.hero-num   { flex: none; }

/* Motif ink. Every motif SVG carries these classes instead of its own colours,
   so any artwork dropped into assets/motifs/ stays inside the ink budget and
   stays legible after a photocopier flattens it to grey. */
.ck-form   { fill: #fff; stroke: var(--ink); stroke-width: var(--ck-sw, 8); stroke-linejoin: round; stroke-linecap: round; }
.ck-accent { fill: var(--accent-tint); stroke: var(--accent); stroke-width: var(--ck-sw, 8); stroke-linejoin: round; stroke-linecap: round; }
.ck-ink    { fill: var(--ink); }
.ck-white  { fill: #fff; }
.ck-line   { fill: var(--ink); }

.word-chip {
  font-family: var(--font-display);
  display: inline-block;
  padding: 5px 20px;
  border: 1.6px solid var(--ink);
  border-radius: 999px;
  font-size: 15pt;
  font-weight: 600;
  letter-spacing: .01em;
}

.hero-hint {
  max-width: 1.7in;
  font-family: var(--font-display);
  margin: 0;
  font-size: 9pt;
  color: var(--ink-soft);
  line-height: 1.5;
}
.hero-hint b { color: var(--accent); font-weight: 600; }

/* activity headings */
.act { margin-top: 10px; }
.act-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}
.act-tag {
  flex: none;
  padding: 3px 11px 3px 10px;
  background: var(--ink);
  color: #fff;
  font-size: 7.5pt;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: 3px 999px 999px 3px;
}
.act-do { font-family: var(--font-display); font-size: 11pt; font-weight: 500; }
.act-do .t { color: var(--accent); font-weight: 600; }

/* the open (Layout B) heading style */
.oh {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
}
.oh-n {
  flex: none;
  width: 20px; height: 20px;
  border: 1.6px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: 8.5pt;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.oh-t { font-family: var(--font-display); font-size: 11.5pt; font-weight: 500; }
.oh-t b { font-weight: 600; }
.oh-rule { flex: 1 1 auto; height: 1px; background: var(--rule); }

/* panels */
.panel {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}
.panel--tint { background: var(--accent-tint); border-color: var(--accent-rule); }
.panel--flat { border: 0; padding: 0; }

.panel-head {
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
  font-size: 9.5pt;
  font-weight: 600;
}
.panel-head span { font-weight: 500; }
.panel-head i {
  font-style: normal;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 7.5pt;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* The two columns are height-matched by the grid, so whichever panel has less
   content would otherwise end in a hole. Making them flex columns lets the
   shorter one distribute its slack as spacing instead. */
/* Not 50/50. Writing lines want width; the counting panel does not, and a
   narrower counting column keeps its star rows short enough that a high number
   like 8 (ten stars, two rows) still fits the page. */
.grid2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 11px; }
.grid2 > .panel { display: flex; flex-direction: column; }

.rows { display: flex; flex-direction: column; gap: 8px; }

.svgfull { display: block; width: 100%; height: auto; }

/* ----------------------------------------------------------------- print */

@page { size: 8.5in 11in; margin: 0; }

@media print {
  body { background: #fff; }
  .sheet {
    margin: 0;
    box-shadow: none;
    width: 100%;
    /* NOT 100vh. Content exactly as tall as the page box makes Chromium round
       up and emit a blank second page, so every sheet printed as two and a
       teacher running the alphabet pack got 52 pages for 26 sheets. Two
       hundredths of an inch short is invisible on paper and decisive here. */
    min-height: calc(100vh - 0.02in);
    page-break-after: always;
    break-after: page;
  }
  .sheet:last-of-type { page-break-after: auto; break-after: auto; }
  .no-print { display: none !important; }
}

/* --------------------------------------------- review chrome (never prints) */

.motif-picker {
  max-width: 8.5in;
  margin: 10px auto 0;
  padding: 12px 16px 14px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.mp-label { margin: 0 0 8px; font-size: 9pt; color: var(--ink-soft); }
.mp-label b { color: var(--ink); }
.mp-row { display: flex; gap: 26px; align-items: flex-end; }
.mp-row figure { margin: 0; text-align: center; }
.mp-row figcaption { margin-top: 4px; font-size: 7.5pt; color: var(--ink-meta); }
.mp-row .hero-motif { margin: 0; }

.rev-bar {
  max-width: 8.5in;
  margin: 30px auto 0;
  padding: 14px 18px;
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  font-size: 10pt;
}
.rev-bar h2 { margin: 0 0 3px; font-size: 12pt; font-weight: 600; }
.rev-bar p  { margin: 0; color: #A9BCCB; font-size: 9pt; line-height: 1.55; }
.rev-bar .pill {
  display: inline-block; margin-right: 7px; padding: 2px 9px;
  border-radius: 999px; background: rgba(255,255,255,.12);
  font-size: 7.5pt; letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
}

/* ---------------------------------------------------------------------------
   LETTER SHEETS
   Added for the A-Z set. Nothing here changes a number sheet.
   --------------------------------------------------------------------------- */

/* The numbers put a wide trace row beside a narrow ten frame. A letter sheet
   puts two writing lines beside four pictures. The writing lines are the taller
   of the two, so the pictures get the narrower column and centre in the slack
   rather than being stretched into a second row the page cannot afford. */
/* Two writing rows are short and wide; four pictures are square. Splitting the
   row 2.45 : 1 is what makes both fill the same height, so neither column ends
   up as a band of white. Get this ratio wrong and the pictures either strand
   themselves in empty space or push the sheet onto a second page. */
.grid2--letters { grid-template-columns: 1.5fr 1fr; }
.grid2--letters .pics { margin-top: auto; margin-bottom: auto; }
.grid2--letters .rows { margin-top: auto; margin-bottom: auto; }

/* The letter hero carries two glyphs where a number sheet carries one, so the
   formation hint needs more column or it wraps to four lines. */
.hero--letters { grid-template-columns: 0.82fr 2.18fr; }

/* The picture panel is the one narrow column in the library, so its instruction
   is the one that wraps. Top-align the step number there, or the badge floats
   to the middle of a two-line heading and stops reading as a step marker. */
.grid2--letters .panel-head { align-items: flex-start; }
.grid2--letters .panel-head > i { margin-top: 1px; }

/* Beginning-sound pictures. Outline only: the child colours these in, so no
   fill can be pre-set, and the line has to survive a photocopier. */
.ico path,
.ico circle,
.ico ellipse,
.ico line,
.ico polyline {
  fill: none;
  stroke: var(--ink);
  stroke-width: var(--ico-sw, 4.6);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico .dot { fill: var(--ink); stroke: none; }

/* Supplied art comes two ways. Stroke art is outlines with no fill, like the
   built-in pictures. Fill art is compound filled shapes, which is what most
   colouring-book art and most Illustrator exports actually are: the "outline"
   is a filled shape with holes. Painting the wrong one makes the picture
   vanish, so the builder tags which is which. */
.ico--fill path,
.ico--fill circle,
.ico--fill ellipse,
.ico--fill rect,
.ico--fill polygon { fill: var(--ink); stroke: none; }

/* White is never repainted. It is doing a job: the inside of an eye, or a
   knock-out stopping the shape behind it showing through. */
.ico .ck-white,
.ico--fill .ck-white { fill: #fff; stroke: none; }

/* The picture boxes were dropped: a box is drawn outside the art, so it costs
   the art the space it takes, and the art is the thing being looked at. The
   staggered layout is what separates the pictures now. */

/* Working-file nav. Screen only: it never reaches a printed sheet. */
.wf-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 22px;
  background: var(--ink); color: #fff;
  font: 600 13px/1 var(--font-ui);
}
.wf-nav-label { opacity: .62; letter-spacing: .04em; }
.wf-nav a {
  color: #fff; text-decoration: none;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .13);
}
.wf-nav a:hover { background: rgba(255, 255, 255, .26); }

/* Per-letter hero image. Replaces the mascot on the letter sheets: the picture
   carries the sound, so it changes with the letter. */
.hero-art { display: block; }
.hero-art.img-slot rect {
  fill: none;
  stroke: var(--accent-rule);
  stroke-width: 2.4;
  stroke-dasharray: 9 7;
}
.hero-art.img-slot text {
  text-anchor: middle;
  fill: var(--ink-meta);
  font: 500 15px var(--font-ui);
}
.hero-art.img-slot .slot-word {
  font: 700 19px var(--font-display);
  fill: var(--ink-soft);
}

/* Section 1 stacks an uppercase trace row on a lowercase one. The first ends on
   the baseline and the second starts at the x-height, so with the default row
   gap they read as one crowded block. This is the one place on the sheet that
   needs more air than everything else. */
.rows--trace { gap: 15px; }

/* Picture grid. Sized by height and centred, because two rows of square boxes
   fix the box size as soon as the panel height is fixed: stretching the block
   to the full page width would buy no extra picture size, only a taller sheet. */
.pic-grid { display: block; width: 100%; }

/* A picture that has neither supplied art nor a drawn fallback. Holds the space
   and names the word, so a half-finished library still prints a reviewable
   sheet and it is obvious at a glance which drawing is still missing. */
.pic-slot rect {
  fill: none;
  stroke: var(--accent-rule);
  stroke-width: 2.2;
  stroke-dasharray: 8 6;
}
.pic-slot text {
  text-anchor: middle;
  fill: var(--ink-meta);
  font-family: var(--font-ui);
  font-weight: 500;
}

/* The trace band is a constant width in glyph units, which is right: a pencil
   line is the same width whether the child writes a big A or a small a. But
   the letter box puts the x-height at 57 units against the capitals' 114, so a
   band tuned for numerals is nearly half the height of every lowercase letter.
   At 26 it swallowed the counters of a, e, g, o and s, and the e closed up
   into a solid blob. Letter sheets get a thinner band; the numbers keep theirs. */
.sheet--letters .n-body { stroke-width: 19; }
.sheet--letters .n-body--row { stroke-width: 16; }
.sheet--letters .n-dash { stroke-width: 2.2; stroke-dasharray: 6 8; }
.sheet--letters .n-dash--row { stroke-width: 2; stroke-dasharray: 5 7; }

/* ------------------------------------------------------- matching sheets */

/* Two stacked activities, each sized in inches by the builder, so the panels
   must not stretch to fill: the slack belongs between them, not inside them. */
.sheet-body--match { gap: 13px; padding-top: 12px; }
.sheet-body--match > .panel { flex: 0 0 auto; }

/* The dot the child draws from. Open, not solid, so a pencil line landing on
   it still reads as a line rather than disappearing into a blob. */
.m-dot {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 3.4;
}

/* A qualifier on an instruction, for the one sheet where x is at the end of
   the word rather than the start. */
.ph-note {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 7.5pt;
  font-weight: 500;
  color: var(--accent);
}
.ph-note b { font-weight: 700; }

/* -------------------------------------------------- stacked picture sheets */

/* Panels sized in inches by the builder, so they must not stretch to fill:
   the slack belongs between them, not inside them. */
.sheet-body--stack { gap: 13px; padding-top: 12px; }
.sheet-body--stack > .panel { flex: 0 0 auto; }

/* Words printed under a picture. Small and grey: the child is looking at the
   drawing, and the word is there for whoever is reading the page aloud. */
/* The word under a picture is CONTENT, not chrome. It was --ink-meta (#8B95A0),
   which sits at luminance 149 against a photocopier threshold of 150: at true
   print size the labels broke into fragments, "sailboat" copying as "sci ouct".
   Dark enough to survive a third-generation copy, still lighter than the
   drawing so it does not compete with it. */
.pic-word, .chart-word {
  font-family: var(--font-display);
  font-weight: 500;
  text-anchor: middle;
  fill: var(--ink-word, #35424E);
}
.chart-word { font-weight: 600; fill: var(--ink-soft); }

/* Boxes to colour, one per beat. */
.tick-box { fill: #fff; stroke: var(--ink); stroke-width: 3; }

/* A box or a line to write in. Dashed and teal, which is the library's signal
   for "this part is yours", the same as the writing guides. */
.write-box {
  fill: none;
  stroke: var(--accent-rule);
  stroke-width: 3;
  stroke-dasharray: 9 7;
}
.write-rule { stroke: var(--accent); stroke-width: 4.5; stroke-linecap: round; }

/* Separates the cue picture from the choices on the rhyming sheets. */
.cue-rule { stroke: var(--rule); stroke-width: 2.5; }

.chart-grid { display: block; width: 100%; height: auto; }

/* The chart is a poster, not a worksheet: no name, no date, no eyebrow. */
.sheet-head--chart .title-row { margin-bottom: 10px; }
.sheet-head--chart .sheet-title { font-size: 26pt; }

/* The five vowels to choose from, bound together so a row of three cells does
   not read as fifteen loose letters. */
.opt-strip { fill: var(--accent-tint); stroke: none; }

/* ------------------------------------------------------------ line tracing */

/* One weight all the way down the page. A path does not get fainter as it gets
   harder: a child who is struggling with row five needs a thicker target than
   row one, not a thinner one. */
.trace-path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
  stroke-dasharray: 15 13;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trace-start { fill: var(--accent); }

/* ------------------------------------------------------------------ shapes */

.shape-hero { display: block; }
/* Same three-layer trick as the numerals: a fat pale body to aim inside, and a
   dashed centre line to follow. */
.shape-body { fill: none; stroke: var(--trace-body); stroke-width: 22;
              stroke-linejoin: round; }
.shape-dash { fill: none; stroke: var(--ink); stroke-dasharray: 9 8;
              stroke-linecap: round; stroke-linejoin: round; }
.shape-solid { fill: none; stroke: var(--ink); stroke-linejoin: round; }
/* A frame to draw inside, not a shape to copy. Plain, thin and grey, because a
   dashed teal box on the square sheet reads as the answer. */
.draw-box { fill: none; stroke: var(--rule); stroke-width: 2; }
.corner-dot { fill: var(--accent); }
.hero--shape { display: grid; grid-template-columns: 1fr 1.55fr; gap: 14px;
               align-items: center; margin-top: 8px; }

/* -------------------------------------------------------------------- math */

.math-sign { stroke: var(--ink); stroke-width: 7; stroke-linecap: round;
             fill: none; }
.count-box { fill: none; stroke: var(--rule); stroke-width: 2; }
.take-tell { font-family: var(--font-display); font-weight: 600;
             font-size: 21px; fill: var(--accent); }

/* Colour-testing spaces on the standalone people colouring sheets. */
.colour-palette{display:flex;gap:12px;margin:0 0 14px}
.colour-palette span{display:block;width:54px;height:32px;border:1.2px solid var(--ink);border-radius:6px}
.colour-palette + .svgfull{max-height:6.8in;width:100%;object-fit:contain}