/* ==========================================================================
   Worksheet renderer — printable sheets (apps/activities/rendering.py).
   Everything is scoped under .worksheet (plus .ws-print-* for the standalone
   print layout), so loading this file never changes the rest of the site.

   Sizing: every length on a sheet is in em. When printed the sheet font is
   12pt, so 1em = 1/6 inch (a letter page is 51em x 66em). On screen the sheet
   font scales with the page card width (container query units), so previews
   are exact miniatures of the printed page.

   v2 pages (docs/CANVAS.md §5): a page is the full paper. Elements (.ws-el)
   are absolutely positioned in % of the page; the frame art (.ws-art) is
   drawn behind them. Text styles arrive as custom properties on .ws-block:
   --ws-scale (font size factor), --ws-align/--ws-justify, --ws-color,
   --ws-weight, --ws-font.
   ========================================================================== */

.worksheet {
  --font-sheet: "Andika", "Nunito", "Comic Neue", sans-serif;
  --font-sheet-display: "Fredoka", "Baloo 2", "Andika", sans-serif;
  --ws-ink: #1d1b20;
  --ws-line: #45414b;
  --ws-trace: #4f4a55;
  --ws-soft: #8c8692;
  --ws-faint: #cbc5d0;
  --ws-paper: #fff;
  --ws-w: 51;
  --ws-h: 66;
  color: var(--ws-ink);
  font-family: var(--font-sheet);
  line-height: 1.35;
  text-align: left;
  /* Unhinted glyph advances: text keeps the same width in ems at every zoom, so a line that
     fits in print (and in layout.py's estimates) also fits in the scaled-down editor. */
  text-rendering: geometricPrecision;
}
.worksheet *, .worksheet *::before, .worksheet *::after { box-sizing: border-box; }
.worksheet.ws-letter.ws-landscape { --ws-w: 66; --ws-h: 51; }
.worksheet.ws-a4 { --ws-w: 49.61; --ws-h: 70.16; }
.worksheet.ws-a4.ws-landscape { --ws-w: 70.16; --ws-h: 49.61; }

/* ---------- Pages ---------- */
.worksheet .ws-page { container-type: inline-size; background: var(--ws-paper); }
.worksheet .ws-sheet {
  position: relative;
  font-size: 12px;
  font-size: calc(100cqi / var(--ws-w));
  height: calc(var(--ws-h) * 1em);
  overflow: hidden; /* the paper edge; elements themselves never clip their content */
}
.worksheet.ws-mode-screen .ws-page {
  border: 1px solid #e6dfd3;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(45, 42, 50, 0.06), 0 8px 22px rgba(45, 42, 50, 0.08);
  overflow: hidden;
}
.worksheet.ws-mode-screen .ws-page + .ws-page { margin-top: 1rem; }
.worksheet.ws-mode-print .ws-page {
  width: 100%;
  max-width: calc(var(--ws-w) * 12pt);
  margin: 0 auto 0.35in;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
}
.worksheet.ws-fragment { container-type: inline-size; }
.worksheet.ws-fragment > .ws-sheet { font-size: calc(100cqi / (var(--ws-w) - 6)); height: auto; overflow: visible; }
.worksheet.ws-fragment .ws-block { margin: 0; }

/* Elements: position/size inline (% of the page). Flowing content may grow past the box (never clipped). */
.worksheet .ws-el { position: absolute; overflow: visible; }
.worksheet .ws-el > .ws-block { width: 100%; height: 100%; margin: 0; }
/* Smart blocks sit inside their box (style.valign: top / middle by default / bottom); "safe" keeps overflow below. */
.worksheet .ws-el > .ws-smart { display: flex; flex-direction: column; justify-content: var(--ws-valign, safe center); }
.worksheet .ws-el > .ws-smart > * { flex: none; }
.worksheet .ws-block { margin: 0 0 1.4em; break-inside: avoid; page-break-inside: avoid; }
.worksheet .ws-footer {
  position: absolute; left: 6%; right: 6%; bottom: 2em; z-index: 1;
  display: flex; justify-content: space-between; gap: 1em;
  font-size: 0.62em; line-height: 1.3; color: var(--ws-soft);
  border-top: 1px solid var(--ws-faint); padding-top: 0.25em;
}
.worksheet .ws-empty-sheet, .worksheet .ws-hint {
  margin: 0; padding: 0.8em 1em; font-size: 1.15em; font-style: italic; color: var(--ws-soft);
  border: 1.5px dashed var(--ws-faint); border-radius: 0.6em;
}
.worksheet .ws-empty-sheet { position: absolute; left: 10%; right: 10%; top: 40%; text-align: center; }
.worksheet .ws-page-break-marker { display: flex; align-items: center; gap: 0.8em; color: var(--ws-soft); font-size: 1em; }
.worksheet .ws-page-break-marker::before, .worksheet .ws-page-break-marker::after { content: ""; flex: 1; border-top: 2px dashed var(--ws-faint); }

/* ---------- Page templates (apps.activities.layout.FRAMES) ----------
   The border sits 2.6em in from the paper edge in every orientation; the footer line sits below it. */
.worksheet .ws-art {
  position: absolute; inset: 2.6em; pointer-events: none;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.worksheet .ws-tpl-simple .ws-art { border: 0.15em solid var(--ws-line); border-radius: 1em; }
.worksheet .ws-tpl-rounded .ws-art {
  border: 0.55em solid #8e7cf6; border-radius: 2.2em;
  box-shadow: inset 0 0 0 0.3em #ffe08a;
}
.worksheet .ws-tpl-dotted .ws-art { border: 0.42em dotted #f08a5d; border-radius: 1.6em; }
.worksheet .ws-tpl-stars .ws-art { border: 0.2em solid #e0a800; border-radius: 1.2em; }
.worksheet .ws-art svg.ws-art-star {
  position: absolute; width: 3.2em; height: 3.2em; overflow: visible;
  fill: #ffd23f; stroke: var(--ws-ink); stroke-width: 4; stroke-linejoin: round;
}
.worksheet .ws-art svg.ws-art-tl { top: -1.6em; left: -1.6em; }
.worksheet .ws-art svg.ws-art-tr { top: -1.6em; right: -1.6em; }
.worksheet .ws-art svg.ws-art-bl { bottom: -1.6em; left: -1.6em; }
.worksheet .ws-art svg.ws-art-br { bottom: -1.6em; right: -1.6em; }
.worksheet .ws-tpl-notebook .ws-art { border: 0.15em solid var(--ws-line); border-radius: 1em; }
.worksheet .ws-tpl-stars .ws-footer { left: 10%; right: 10%; }
.worksheet .ws-art-band {
  position: absolute; top: 0; left: 0; right: 0; height: 5.2em;
  display: flex; align-items: flex-end; gap: 0.8em 2em; padding: 0 1.6em 0.9em;
  border-bottom: 0.15em dashed var(--ws-line); border-radius: 0.9em 0.9em 0 0; background: #f3f0ff;
  font-size: 1.25em;
}
.worksheet.ws-landscape .ws-art-band { height: 3.6em; }
.worksheet .ws-tpl-certificate .ws-art { border: 0.6em double #b7950b; border-radius: 0.4em; }
.worksheet .ws-tpl-certificate .ws-art::after {
  content: ""; position: absolute; inset: 0.9em; border: 0.12em solid #b7950b; border-radius: 0.2em;
}

/* ---------- Text styles (element style -> custom properties on .ws-block) ---------- */
.worksheet .ws-block[style*="--ws-font"] { font-family: var(--ws-font); }

/* ---------- Shared pieces ---------- */
.worksheet .ws-icon { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.2em; max-width: none; }
.worksheet svg:not(.ws-icon) { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; }
.worksheet p { margin: 0; }
.worksheet h2, .worksheet h3 { font-family: var(--font-sheet); letter-spacing: 0; color: var(--ws-ink); }

.worksheet .ws-pic {
  display: inline-grid; place-items: center; flex: none;
  width: var(--pic, 6em); max-width: 100%; aspect-ratio: 1 / 1; height: auto;
  vertical-align: middle;
}
.worksheet .ws-pic img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
.worksheet .ws-emoji {
  font-size: calc(var(--pic, 6em) * 0.74); line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
/* Several emoji in one picture (counting cards: "🔴🔴🔴🔴🔴🔴") wrap into a small square that fits it. */
.worksheet .ws-emoji-multi {
  display: inline-block; width: calc(var(--emoji-cols) * 1.2em); text-align: center;
  font-size: calc(var(--pic, 6em) * 0.7 / var(--emoji-cols)); line-height: 1.15; overflow-wrap: anywhere;
}
.worksheet .ws-placeholder {
  display: grid; place-items: center; width: 100%; height: 100%; padding: 0.3em; overflow: hidden;
  border: 2px dashed #c4bbe8; border-radius: 0.6em; background: #f7f5ff; color: #635aa3;
  text-align: center; line-height: 1.15; overflow-wrap: anywhere;
}
.worksheet .ws-placeholder span { font-size: 0.85em; }
.worksheet .ws-frame { display: block; width: 100%; height: 100%; border: 1.5px solid var(--ws-line); border-radius: 0.6em; }
.worksheet .ws-pic-text > span { font-size: calc(var(--pic, 6em) * 0.22 * var(--text-scale, 1)); font-weight: 700; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }

.worksheet .ws-item { display: inline-flex; flex-direction: column; align-items: center; gap: 0.3em; text-align: center; min-width: 0; }
/* --label-scale: set by the renderer when a long word would not fit its column (layout.label_scale). */
.worksheet .ws-item-label { font-size: calc(1.3em * var(--label-scale, 1)); line-height: 1.2; overflow-wrap: anywhere; }
.worksheet .ws-item-text .ws-item-label { font-size: calc(2.2em * var(--label-scale, 1)); font-weight: 700; }

.worksheet .ws-answer-box { display: block; width: 3.2em; height: 2.6em; border: 2px solid var(--ws-ink); border-radius: 0.4em; }
.worksheet .ws-check-box { display: block; width: 1.9em; height: 1.9em; border: 2px solid var(--ws-ink); border-radius: 0.3em; }
.worksheet .ws-answer-box-lg { width: 4.4em; height: 3.8em; }
.worksheet .ws-prompt { display: flex; gap: 0.5em; align-items: flex-start; font-size: 1.3em; margin: 0 0 0.7em; }
.worksheet .ws-prompt .ws-icon { margin-top: 0.1em; }

/* ---------- Text blocks ---------- */
.worksheet .ws-heading-text {
  font-size: calc(2.4em * var(--ws-scale, 1)); font-weight: var(--ws-weight, 700); line-height: 1.15;
  text-align: var(--ws-align, center); color: var(--ws-color, var(--ws-ink)); font-family: var(--ws-font, var(--font-sheet));
  margin: 0; overflow-wrap: anywhere;
}
.worksheet .ws-instructions-text {
  display: flex; gap: 0.55em; align-items: flex-start; justify-content: var(--ws-justify, flex-start);
  font-size: calc(1.35em * var(--ws-scale, 1)); font-weight: var(--ws-weight, 400);
  text-align: var(--ws-align, left); color: var(--ws-color, inherit);
}
.worksheet .ws-instructions-text .ws-icon { width: 1.35em; height: 1.35em; margin-top: 0.05em; }
.worksheet .ws-text-body {
  font-size: calc(1.35em * var(--ws-scale, 1)); font-weight: var(--ws-weight, 400); line-height: 1.6;
  text-align: var(--ws-align, left); color: var(--ws-color, inherit); overflow-wrap: anywhere;
}
.worksheet .ws-text-body p + p { margin-top: 0.7em; }

.worksheet .ws-name-date { display: flex; flex-wrap: wrap; gap: 0.8em 2em; align-items: flex-end; font-size: calc(1.25em * var(--ws-scale, 1)); }
.worksheet .ws-field { display: flex; align-items: flex-end; gap: 0.5em; min-width: 8em; }
.worksheet .ws-field-name { flex: 2; }
.worksheet .ws-field-date { flex: 1; }
.worksheet .ws-field-label { font-weight: 700; }
.worksheet .ws-field-line { flex: 1; height: 1.5em; border-bottom: 2px solid var(--ws-line); }

/* ---------- Pictures ---------- */
.worksheet .ws-figure { margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.5em; }
.worksheet .ws-figure figcaption { font-size: 1.4em; text-align: center; }
.worksheet .ws-size-small { --pic: 10em; }
.worksheet .ws-size-medium { --pic: 18em; }
.worksheet .ws-size-large { --pic: 27em; }
.worksheet .ws-size-full { --pic: 38em; }
.worksheet .ws-coloring-frame { --pic: 36em; width: 100%; padding: 1.2em; border: 3px solid var(--ws-ink); border-radius: 1.2em; }
.worksheet.ws-landscape .ws-coloring-frame { --pic: 27em; }
.worksheet .ws-fit-cover .ws-pic img { object-fit: cover; }

/* Fill blocks take their element's whole box (pictures keep their aspect ratio inside it). */
.worksheet .ws-fill { display: flex; flex-direction: column; }
.worksheet .ws-fill > .ws-figure { width: 100%; height: 100%; min-height: 0; justify-content: var(--ws-valign, center); align-items: var(--ws-justify, center); }
.worksheet .ws-fill > .ws-figure > .ws-pic { flex: 1 1 0; width: 100%; min-height: 0; aspect-ratio: auto; max-width: none; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.worksheet .ws-fill > .ws-fit-cover > .ws-pic { overflow: hidden; border-radius: 0.6em; }
.worksheet .ws-fill > .ws-figure > .ws-pic > .ws-placeholder,
.worksheet .ws-fill > .ws-figure > .ws-pic > .ws-frame { width: 100%; height: 100%; }
.worksheet .ws-fill > .ws-coloring-frame { padding: 1.2em; }
.worksheet .ws-fill > .ws-drawing { display: flex; flex-direction: column; height: 100%; }
.worksheet .ws-fill > .ws-drawing > .ws-drawing-area { flex: 1 1 0; height: auto; min-height: 2em; }
.worksheet .ws-fill > .ws-maze { height: 100%; align-items: center; }

/* ---------- Shapes ---------- */
/* The print page does not load app.css: text for screen readers only is hidden here too. */
.worksheet .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.worksheet .ws-shape { width: 100%; height: 100%; color: var(--ws-ink); }
.worksheet .ws-shape-wrap { position: relative; width: 100%; height: 100%; }
.worksheet .ws-shape-label {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0.4em; text-align: center;
  font-size: 1.1em; font-weight: 700; line-height: 1.15; color: var(--ws-soft); overflow-wrap: normal;
}
.worksheet div.ws-shape { border: var(--stroke, 0.16em) solid currentColor; }
.worksheet .ws-shape-rounded { border-radius: 1.2em; }
.worksheet .ws-shape-circle { border-radius: 50%; }
.worksheet div.ws-shape-circle, .worksheet div.ws-shape-square { width: auto; max-width: 100%; aspect-ratio: 1; margin-inline: auto; }
.worksheet div.ws-shape-line { border-width: var(--stroke, 0.16em) 0 0; height: 0; position: relative; top: 50%; }
.worksheet div.ws-shape-line.ws-shape-vertical { border-width: 0 0 0 var(--stroke, 0.16em); width: 0; height: 100%; top: 0; left: 50%; }
.worksheet .ws-stroke-dashed { border-style: dashed !important; }
.worksheet .ws-stroke-dotted { border-style: dotted !important; }
.worksheet svg.ws-shape { display: block; height: 100%; overflow: visible; }

/* ---------- Handwriting ---------- */
.worksheet .ws-trace-row, .worksheet .ws-line { margin: 0 0 0.45em; }
.worksheet .ws-guide { color: #9b95a1; }
.worksheet .ws-baseline { color: var(--ws-line); }
/* Start dot on each dashed letter: where the pencil goes down (green, or grey in black and white). */
.worksheet .ws-trace-start { fill: var(--ws-trace-start, #3fa66b); }
.worksheet .ws-trace-dashed { color: var(--ws-color, var(--ws-trace)); }
.worksheet .ws-trace-model { color: var(--ws-color, var(--ws-ink)); }

/* ---------- Picture grid ---------- */
.worksheet .ws-task-hint {
  display: inline-flex; align-items: center; gap: 0.4em; margin: 0 0 0.8em;
  padding: 0.15em 0.8em 0.15em 0.5em; border: 1.5px solid var(--ws-line); border-radius: 99em;
  font-size: 1.05em; font-weight: 700;
}
/* Flex, not grid: same columns, and an incomplete last row is centred (10 cards: 4 + 4 + 2 in the middle). */
.worksheet .ws-grid-items {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1em;
}
.worksheet .ws-grid-item {
  flex: 0 0 calc((100% - (var(--cols, 3) - 1) * 1em) / var(--cols, 3)); min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4em;
  padding: 0.8em 0.5em; border: 1.5px solid var(--ws-line); border-radius: 0.9em; text-align: center;
  break-inside: avoid;
}
.worksheet .ws-grid-label { font-size: calc(1.3em * var(--label-scale, 1)); line-height: 1.2; overflow-wrap: anywhere; }

/* ---------- Letter / number hunt ---------- */
/* One row: a long translated label ("Busca y rodea con un círculo:") wraps beside the targets instead of
   pushing them to a line of their own, which the layout's height estimate does not count. */
.worksheet .ws-find { display: flex; align-items: center; gap: 0.6em; margin: 0 0 1em; font-size: 1.25em; font-weight: 700; }
.worksheet .ws-find-label { display: inline-flex; align-items: center; gap: 0.4em; flex: 0 1 auto; min-width: 8em; line-height: 1.15; }
.worksheet .ws-find-target { flex: none; }
.worksheet .ws-find-target {
  display: inline-grid; place-items: center; min-width: 1.8em; height: 1.8em; padding: 0 0.35em;
  border: 2px solid var(--ws-ink); border-radius: 0.35em; font-size: 1.35em;
}
.worksheet .ws-symbols {
  list-style: none; margin: 0 auto; padding: 0.6em; max-width: 100%; border: 2px solid var(--ws-ink); border-radius: 1em;
  display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 0.2em;
}
.worksheet .ws-symbols li { display: grid; place-items: center; aspect-ratio: 1 / 1; font-size: var(--sym, 2.6em); line-height: 1; }

/* ---------- Matching ---------- */
.worksheet .ws-match { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3em; }
.worksheet .ws-match-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(6em, 1.3fr) minmax(0, 1fr); align-items: center; }
.worksheet .ws-match-cell { display: flex; align-items: center; gap: 0.8em; min-width: 0; }
.worksheet .ws-match-left { justify-content: flex-end; }
.worksheet .ws-match-right { justify-content: flex-start; }
.worksheet .ws-match .ws-item { min-width: var(--pic, 5em); }
.worksheet .ws-dot { width: 0.9em; height: 0.9em; border-radius: 50%; background: var(--ws-ink); flex: none; }

/* ---------- Counting ---------- */
.worksheet .ws-count { list-style: none; margin: 0; padding: 0; }
.worksheet .ws-count-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.2em;
  padding: 0.9em 0; border-bottom: 1.5px dashed var(--ws-faint); break-inside: avoid;
}
.worksheet .ws-count-row:last-child { border-bottom: 0; }
.worksheet .ws-count-pics { display: flex; flex-wrap: wrap; gap: 0.35em; align-items: center; justify-content: var(--ws-justify, flex-start); }
.worksheet .ws-options { display: flex; gap: 0.6em; }
.worksheet .ws-option { display: grid; place-items: center; width: 1.9em; height: 1.9em; font-size: 1.7em; font-weight: 700; }
.worksheet .ws-answer-color_boxes .ws-count-row { grid-template-columns: 1fr; gap: 0.6em; }
.worksheet .ws-color-boxes { display: flex; flex-wrap: wrap; gap: 0.3em; }
.worksheet .ws-color-box { width: 1.9em; height: 1.9em; border: 1.5px solid var(--ws-ink); border-radius: 0.25em; }

/* ---------- Cut & sort, cut & glue ---------- */
.worksheet .ws-sort-cats { display: grid; grid-template-columns: repeat(var(--cats, 2), minmax(0, 1fr)); gap: 1em; margin-bottom: 1.6em; }
.worksheet .ws-sort-cat { display: flex; flex-direction: column; border: 2px solid var(--ws-ink); border-radius: 0.9em; overflow: hidden; }
.worksheet .ws-sort-title { padding: 0.35em 0.5em; border-bottom: 2px solid var(--ws-ink); font-size: calc(1.4em * var(--label-scale, 1)); font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.worksheet .ws-glue-area, .worksheet .ws-target-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3em;
  color: var(--ws-faint); font-size: 1em;
}
.worksheet .ws-glue-area { min-height: var(--glue, 16em); }
.worksheet .ws-glue-area .ws-icon, .worksheet .ws-target-box .ws-icon { width: 2em; height: 2em; }
.worksheet .ws-cutout { position: relative; margin-top: 1em; padding: 1.5em 0.8em 0.8em; border: 2px dashed var(--ws-line); border-radius: 0.6em; }
.worksheet .ws-cutout-title {
  position: absolute; top: -0.85em; left: 1em; display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0 0.4em; background: var(--ws-paper); font-size: 1.05em; font-weight: 700;
}
.worksheet .ws-cut-items {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--cut-cols, 4), minmax(0, 1fr));
}
.worksheet .ws-cut-item {
  display: flex; align-items: center; justify-content: center; min-height: calc(var(--pic, 4.5em) + 3em);
  margin: -0.75px; padding: 0.7em 0.4em; border: 1.5px dashed var(--ws-soft);
}
.worksheet .ws-targets {
  list-style: none; margin: 0 0 1.2em; padding: 0;
  display: grid; grid-template-columns: repeat(var(--targets, 3), minmax(0, 1fr)); gap: 1em;
}
.worksheet .ws-target { display: flex; flex-direction: column; align-items: stretch; gap: 0.4em; }
.worksheet .ws-target-label { flex: 1; display: flex; align-items: flex-end; justify-content: center; font-size: calc(1.3em * var(--label-scale, 1)); font-weight: 700; text-align: center; overflow-wrap: anywhere; } /* boxes line up under 1- and 2-line labels */
.worksheet .ws-target-box { min-height: calc(var(--pic, 4.5em) + 3.4em); border: 2px solid var(--ws-ink); border-radius: 0.7em; }

/* ---------- Maze ---------- */
.worksheet .ws-maze { display: flex; justify-content: var(--ws-justify, center); align-items: stretch; gap: 0.75em; }
.worksheet .ws-maze-side { display: flex; flex: none; width: var(--side, 7em); justify-content: center; }
.worksheet .ws-maze-start { align-items: flex-start; }
.worksheet .ws-maze-finish { align-items: flex-end; }
.worksheet .ws-maze-board { flex: 0 1 auto; max-width: 100%; min-width: 0; }
.worksheet .ws-maze-svg { color: var(--ws-ink); }

/* ---------- Patterns ---------- */
.worksheet .ws-pattern { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--row-gap, 1.1em); }
.worksheet .ws-pattern-row { display: flex; flex-wrap: wrap; gap: var(--gap, 0.8em); align-items: center; justify-content: var(--ws-justify, flex-start); }
.worksheet .ws-pattern-box {
  display: grid; place-items: center; width: var(--box, 5em); height: var(--box, 5em); overflow: hidden;
  border: 1.5px solid var(--ws-line); border-radius: 0.6em;
}
.worksheet .ws-pattern-box .ws-item-label { font-size: 1em; }
.worksheet .ws-pattern-box .ws-item-text .ws-item-label { font-size: calc(var(--box, 5em) * 0.45); }
.worksheet .ws-pattern-blank { border: 2px dashed var(--ws-ink); }

/* ---------- Drawing box, checklist ---------- */
.worksheet .ws-drawing-area { width: 100%; height: 20em; border: 2.5px solid var(--ws-ink); border-radius: 1em; }
.worksheet .ws-checklist { text-align: var(--ws-align, left); color: var(--ws-color, inherit); }
.worksheet .ws-checklist-title { margin: 0 0 0.5em; font-size: calc(1.6em * var(--ws-scale, 1)); font-weight: 700; color: inherit; font-family: var(--ws-font, var(--font-sheet)); }
.worksheet .ws-checklist-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7em; font-size: calc(1.35em * var(--ws-scale, 1)); font-weight: var(--ws-weight, 400); }
.worksheet .ws-checklist-items li { display: flex; gap: 0.6em; align-items: center; justify-content: var(--ws-justify, flex-start); margin: 0; }
.worksheet .ws-checkbox { width: 1.3em; height: 1.3em; flex: none; border: 2px solid var(--ws-ink); border-radius: 0.25em; }

/* ---------- Standalone print layout (activities/worksheet/print_layout.html) ---------- */
body.ws-print-body { margin: 0; background: #ece7df; color: #2d2a32; font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; }
.ws-toolbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem;
  background: #fff; border-bottom: 1px solid #e3dccf; box-shadow: 0 2px 8px rgba(45, 42, 50, 0.06);
}
.ws-toolbar-title { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-toolbar-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem;
  font: 600 0.95rem/1.2 inherit; color: #2d2a32; text-decoration: none; white-space: nowrap;
  background: #fff; border: 2px solid #d8c8b0; border-radius: 999px; cursor: pointer;
}
.ws-toolbar-btn:hover { background: #fdf6ec; color: #2d2a32; }
.ws-toolbar-primary { margin-left: auto; color: #fff; background: #5b4bdb; border-color: #5b4bdb; }
.ws-toolbar-primary:hover { color: #fff; background: #4a3bc6; }
.ws-toolbar-btn:focus-visible { outline: 3px solid rgba(91, 75, 219, 0.45); outline-offset: 2px; }
.ws-print-tip { max-width: 8.5in; margin: 0.75rem auto; padding: 0 1rem; font-size: 0.85rem; color: #6b6573; text-align: center; }
.ws-stage { padding: 0 1rem 2rem; }
.ws-notes-page {
  max-width: 8.5in; margin: 0 auto 0.35in; padding: 0.5in; line-height: 1.55;
  background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
}
@media (max-width: 560px) {
  .ws-toolbar-title { display: none; }
  .ws-stage { padding: 0 0.5rem 1.5rem; }
}

/* ---------- Printing ----------
   Every page is the full paper: the single @page rule the first sheet of a print job emits has
   margin 0 (rendering.render_print_sheets_html prints later sheets at that same size), and the
   frame art and element positions provide the margins. Named pages are avoided on purpose:
   Chrome forces a page break before every inline SVG inside a named page. */
/* ---------- Puzzle and game blocks (sizes come from the renderer as --cell, --pic, ...) ---------- */
.worksheet .ws-cutline { display: flex; align-items: center; gap: 0.5em; margin: 0.9em 0 0.6em; color: var(--ws-soft); }
.worksheet .ws-cutline::after { content: ""; flex: 1; border-top: 2px dashed var(--ws-soft); }
.worksheet .ws-cutline .ws-icon { width: 1.4em; height: 1.4em; }

/* Word search */
.worksheet .ws-wordsearch { display: flex; flex-direction: column; align-items: var(--ws-justify, center); gap: 1.2em; }
.worksheet .ws-ws-grid {
  display: grid; grid-template-columns: repeat(var(--n), var(--cell)); grid-auto-rows: var(--cell); align-content: start;
  border: 2.5px solid var(--ws-ink); border-radius: 0.5em; padding: 0.3em; font-family: var(--font-sheet); font-weight: 700;
}
/* The letter size lives on an inner element: an em in var(--cell) resolves against the font size where it is used. */
.worksheet .ws-ws-grid > span { display: grid; place-items: center; }
.worksheet .ws-ws-grid b { font-size: calc(var(--cell) * 0.58); line-height: 1; }
.worksheet .ws-ws-bank {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--bank-cols), auto);
  justify-content: center; gap: 0.6em 1.4em;
}
.worksheet .ws-ws-bank li { display: flex; flex-direction: column; align-items: center; gap: 0.25em; }
.worksheet .ws-ws-word { font-size: 1.35em; font-weight: 700; letter-spacing: 0.08em; }

/* Picture sudoku */
.worksheet .ws-sudoku { display: flex; flex-direction: column; align-items: var(--ws-justify, center); --pic: calc(var(--cell) * 0.78); }
.worksheet .ws-sudoku-grid { display: grid; grid-template-columns: repeat(var(--n), var(--cell)); border: 3px solid var(--ws-ink); }
.worksheet .ws-sudoku-cell { display: grid; place-items: center; height: var(--cell); border: 1.5px solid var(--ws-line); }
.worksheet .ws-sudoku-cutouts { display: flex; flex-wrap: wrap; justify-content: var(--ws-justify, center); --pic: calc(var(--cell) * 0.62); }
.worksheet .ws-sudoku-piece {
  display: grid; place-items: center; width: calc(var(--cell) * 0.8); height: calc(var(--cell) * 0.8);
  margin: -0.75px; border: 1.5px dashed var(--ws-soft);
}
.worksheet .ws-sudoku .ws-cutline { align-self: stretch; }

/* Jigsaw puzzle */
.worksheet .ws-puzzle { display: grid; align-items: var(--ws-valign, center); justify-items: var(--ws-justify, center); height: 100%; }
.worksheet .ws-puzzle-board { position: relative; width: var(--side); height: var(--side); border: 3px solid var(--ws-ink); --pic: var(--side); }
.worksheet .ws-puzzle-board > .ws-pic { width: 100%; height: 100%; }
.worksheet .ws-puzzle-board .ws-pic img { object-fit: cover; }
.worksheet .ws-puzzle-cuts { position: absolute; inset: 0; display: grid; grid-template: repeat(var(--rows), 1fr) / repeat(var(--cols), 1fr); }
.worksheet .ws-puzzle-cuts span { border: 1.5px dashed var(--ws-ink); position: relative; }
.worksheet .ws-puzzle-cuts b {
  position: absolute; right: 0.2em; bottom: 0.1em; font-size: 0.9em; color: var(--ws-ink);
  background: var(--ws-paper); border-radius: 0.3em; padding: 0 0.25em;
}

/* Board game */
.worksheet .ws-board {
  display: grid; grid-template: repeat(var(--rows), var(--cell)) / repeat(var(--cols), var(--cell));
  justify-content: var(--ws-justify, center); --pic: calc(var(--cell) * 0.55);
}
.worksheet .ws-board-cell {
  position: relative; display: grid; place-items: center; margin: -0.75px; border: 2px solid var(--ws-ink);
  border-radius: 0.5em; background: var(--ws-paper);
}
.worksheet .ws-board-cell.is-start, .worksheet .ws-board-cell.is-end { border-width: 3.5px; }
/* Colour games: the square (or die face) is filled with its colour; printed in black and white it is still a frame to color in. */
.worksheet .ws-board-cell[data-color], .worksheet .ws-dice-face[data-color] {
  background: var(--sq); -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.worksheet .ws-board-n { position: absolute; left: 0.3em; top: 0.15em; font-style: normal; font-size: 0.8em; color: var(--ws-soft); }
.worksheet .ws-board-item { display: flex; flex-direction: column; align-items: center; gap: 0.1em; padding: 0 0.2em; text-align: center; }
.worksheet .ws-board-item em { font-style: normal; font-weight: 700; font-size: calc(var(--cell) * 0.15); line-height: 1.1; }
.worksheet .ws-board-item.is-text em { font-size: calc(var(--cell) * 0.17); }
.worksheet .ws-board-arrow { position: absolute; width: 0; height: 0; border: 0.4em solid transparent; z-index: 1; }
.worksheet .ws-arrow-right { right: -0.45em; top: calc(50% - 0.4em); border-left-color: var(--ws-ink); border-right-width: 0; }
.worksheet .ws-arrow-left { left: -0.45em; top: calc(50% - 0.4em); border-right-color: var(--ws-ink); border-left-width: 0; }
.worksheet .ws-arrow-down { bottom: -0.45em; left: calc(50% - 0.4em); border-top-color: var(--ws-ink); border-bottom-width: 0; }

/* Bingo */
.worksheet .ws-bingo { display: grid; grid-template-columns: repeat(var(--card-cols), auto); justify-content: var(--ws-justify, center); gap: 1.6em; }
.worksheet .ws-bingo-card { border: 3px solid var(--ws-ink); border-radius: 0.8em; overflow: hidden; break-inside: avoid; }
.worksheet .ws-bingo-head {
  margin: 0; height: 2.4em; display: grid; place-items: center; font-family: var(--font-sheet-display, var(--font-sheet));
  font-size: 1.1em; font-weight: 800; letter-spacing: 0.4em; border-bottom: 3px solid var(--ws-ink);
}
.worksheet .ws-bingo-grid { display: grid; grid-template-columns: repeat(var(--n), var(--cell)); --pic: calc(var(--cell) * 0.72); }
.worksheet .ws-bingo-cell { display: grid; place-items: center; height: var(--cell); margin: -0.5px; border: 1.5px solid var(--ws-line); }
.worksheet .ws-bingo-cell.is-free b { font-size: calc(var(--cell) * 0.2); }

/* Picture graph */
.worksheet .ws-graph { display: flex; justify-content: var(--ws-justify, center); }
.worksheet .ws-graph-grid {
  display: grid; grid-template-columns: 1.6em repeat(var(--cols), var(--cell));
  grid-auto-rows: var(--cell); --pic: calc(var(--cell) * 0.9);
}
.worksheet .ws-graph-grid > span:not(.ws-graph-pic) { margin: -0.75px; border: 1.5px solid var(--ws-line); }
.worksheet .ws-graph-level { display: grid; place-items: center; font-style: normal; font-size: 0.95em; color: var(--ws-soft); }
.worksheet .ws-graph-pic { display: grid; place-items: center; height: calc(var(--cell) * 1.5); border-top: 3px solid var(--ws-ink); }

/* Ten frames */
.worksheet .ws-tenframes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4em; }
.worksheet .ws-tenframe-row { display: flex; align-items: center; justify-content: var(--ws-justify, center); gap: 1.4em; }
.worksheet .ws-tenframe {
  display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); grid-auto-rows: var(--cell);
  border: 2.5px solid var(--ws-ink); --pic: calc(var(--cell) * 0.8);
}
.worksheet .ws-tf-cell { display: grid; place-items: center; margin: -0.5px; border: 1.5px solid var(--ws-line); }
.worksheet .ws-tf-cell:nth-child(5n):not(:nth-child(10n)) { border-right-width: 2.5px; }
.worksheet .ws-tf-number { font-size: 2.6em; font-weight: 800; min-width: 1.4em; text-align: center; }

/* Picture math */
.worksheet .ws-pmath { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2em; --pic: var(--cell); }
.worksheet .ws-pmath-row { display: flex; align-items: center; justify-content: var(--ws-justify, center); gap: 0.6em; flex-wrap: nowrap; }
.worksheet .ws-pmath-group { display: flex; flex-direction: column; align-items: center; gap: 0.3em; }
.worksheet .ws-pmath-pics { display: flex; gap: 0.15em; }
.worksheet .ws-pmath-pic { position: relative; display: grid; }
.worksheet .ws-pmath-pic.is-crossed::after {
  content: ""; position: absolute; inset: 8%; border-top: 3px solid var(--ws-ink);
  transform: rotate(-35deg); transform-origin: center; top: 50%;
}
.worksheet .ws-pmath-num { font-size: 1.5em; font-weight: 700; }
.worksheet .ws-pmath-op { font-size: calc(var(--cell) * 0.7); line-height: 1; }

/* Pre-writing lines */
.worksheet .ws-prewrite { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4em; --pic: var(--cell); }
.worksheet .ws-prewrite-row { display: flex; align-items: center; gap: 0.8em; }
.worksheet .ws-prewrite-end { flex: none; display: grid; place-items: center; width: var(--cell); }
.worksheet .ws-prewrite-path { flex: 1 1 0; min-width: 0; width: 100%; height: var(--cell); overflow: visible; color: var(--ws-trace); }
.worksheet .ws-prewrite-path path { stroke-width: 0.3em; stroke-dasharray: 0.01em 0.75em; }

/* I spy */
.worksheet .ws-ispy { display: flex; flex-direction: column; gap: 1em; height: 100%; }
.worksheet .ws-ispy-area {
  position: relative; flex: none; height: var(--area); border: 3px solid var(--ws-ink); border-radius: 1em; overflow: hidden;
}
.worksheet .ws-ispy-area.has-scene { display: grid; place-items: center; --pic: var(--area); }
.worksheet .ws-ispy-area.has-scene > .ws-pic { width: 100%; height: 100%; }
.worksheet .ws-ispy-area.has-scene .ws-pic img { object-fit: cover; }
.worksheet .ws-ispy-spot { position: absolute; display: grid; aspect-ratio: 1; --pic: 100%; }
.worksheet .ws-ispy-spot .ws-pic { width: 100%; }
.worksheet .ws-ispy-spot .ws-emoji { font-size: calc(var(--area) * 0.09); }
.worksheet .ws-ispy-legend {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--legend-cols), auto);
  justify-content: var(--ws-justify, space-around); gap: 0.8em 1.6em;
}
.worksheet .ws-ispy-legend li { display: flex; align-items: center; gap: 0.6em; }

/* Missing letters */
.worksheet .ws-missing { display: flex; flex-direction: column; gap: 1em; }
.worksheet .ws-missing-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 1em; }
.worksheet .ws-missing-row { display: flex; align-items: center; justify-content: var(--ws-justify, flex-start); gap: 1em; }
.worksheet .ws-missing-pic { display: grid; place-items: center; flex: none; width: var(--pic); }
.worksheet .ws-missing-word { display: flex; gap: 0.25em; }
.worksheet .ws-letter-box {
  display: grid; place-items: center; width: var(--box); height: calc(var(--box) * 1.15); border-bottom: 2.5px solid var(--ws-ink);
}
.worksheet .ws-letter-box b { font-size: calc(var(--box) * 0.62); font-weight: 700; line-height: 1; }
.worksheet .ws-letter-box.is-blank { border: 2.5px solid var(--ws-ink); border-radius: 0.35em; }
.worksheet .ws-missing-bank {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6em; margin: 0.4em 0 0; padding-top: 0.8em;
  border-top: 2px dashed var(--ws-soft);
}
.worksheet .ws-missing-bank span:not(.sr-only) {
  display: grid; place-items: center; width: 2.3em; height: 2.3em; font-size: 1.3em; font-weight: 700;
  border: 1.5px dashed var(--ws-soft); border-radius: 0.3em;
}

/* Draw the other half */
.worksheet .ws-symmetry { display: flex; justify-content: var(--ws-justify, center); align-items: var(--ws-valign, center); height: 100%; }
.worksheet .ws-sym-half { position: relative; width: calc(var(--side) / 2); height: var(--side); overflow: hidden; }
.worksheet .ws-sym-left { --pic: var(--side); }
.worksheet .ws-sym-left > .ws-pic { position: absolute; left: 0; top: 0; width: var(--side); max-width: none; height: var(--side); }
.worksheet .ws-sym-right { border-left: 2.5px dashed var(--ws-ink); }
.worksheet .ws-symmetry.has-grid .ws-sym-half {
  background-image: linear-gradient(var(--ws-faint) 1px, transparent 1px), linear-gradient(90deg, var(--ws-faint) 1px, transparent 1px);
  background-size: calc(var(--side) / 12) calc(var(--side) / 12);
}
.worksheet .ws-symmetry.has-grid .ws-sym-left > .ws-pic { mix-blend-mode: multiply; }

/* Paper die */
.worksheet .ws-dice {
  display: grid; grid-template: repeat(3, var(--face)) / repeat(4, var(--face)) calc(var(--face) * 0.3);
  justify-content: var(--ws-justify, center); align-content: var(--ws-valign, start); --pic: calc(var(--face) * 0.74);
}
.worksheet .ws-dice-face { display: grid; place-items: center; margin: -0.75px; border: 1.5px dashed var(--ws-ink); }

@media print {
  body.ws-print-body { background: #fff; }
  .ws-toolbar, .ws-print-tip { display: none !important; }
  .ws-stage { display: block; padding: 0; }
  /* The sheet's @page margin is 0 for the whole document, so the notes' padding gives their margins;
     clone repeats it on every page the notes run over (slice would leave the middle breaks at the edge). */
  .ws-notes-page {
    max-width: none; margin: 0; padding: 0.6in; box-shadow: none;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .worksheet.ws-mode-print ~ .ws-notes-page { break-before: page; }

  .worksheet.ws-mode-print { font-size: 12pt; }
  .worksheet.ws-mode-print .ws-page {
    container-type: normal; width: calc(var(--ws-w) * 12pt); max-width: none; margin: 0;
    border: 0; border-radius: 0; box-shadow: none; overflow: hidden;
  }
  .worksheet.ws-mode-print .ws-page + .ws-page,
  .worksheet.ws-mode-print ~ .worksheet.ws-mode-print .ws-page:first-of-type { break-before: page; }
  /* 1pt short of the paper so rounding never spills a blank page. */
  .worksheet.ws-mode-print .ws-sheet { font-size: 12pt; height: calc(var(--ws-h) * 12pt - 1pt); }

  .worksheet.ws-mode-screen .ws-page { box-shadow: none; border-color: #bbb; }
  .worksheet .ws-block { break-inside: avoid; }
  .worksheet .ws-placeholder { background: none; border-color: #bbb; }
  .worksheet .ws-page-break-marker, .worksheet .ws-hint { display: none; }
}