/* =============================================================
   worksheets.css — eTutors Academy (etutors.pk)
   -------------------------------------------------------------
   The ONLY custom stylesheet for the Worksheets section. Loaded
   ONLY on worksheet tool pages (e.g. /resources/worksheets/math),
   never site-wide. Everything is prefixed  wg-  so it can never
   collide with Bootstrap, etutors.css, or any legacy stylesheet.

   Sections:
     1. Worksheet-type chips
     2. Controls panel (main + advanced) + buttons + lists
     3. Output area
     4. The printable worksheet (A4 page that FILLS, pinned footer)
     5. Page separator (screen-only "end of page" marker)
     6. Worksheet-type element styles (maths + future types)
     7. On-screen responsiveness
     8. Print isolation + page fill
============================================================= */


/* =============================================================
   1. WORKSHEET-TYPE CHIPS
============================================================= */
.wg-types { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px 0; padding: 0; list-style: none; }
.wg-type {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--et-border, #E5E7EB); background: var(--et-white, #fff);
  color: var(--et-text, #1A1A2E); font-weight: 600; font-size: var(--et-text-sm, .875rem);
  text-decoration: none; transition: all .2s;
}
.wg-type:hover, .wg-type:focus { border-color: var(--et-teal, #0F7B6C); color: var(--et-teal, #0F7B6C); }
.wg-type.is-active { background: var(--et-teal, #0F7B6C); border-color: var(--et-teal, #0F7B6C); color: #fff; }
.wg-type.is-soon { opacity: .6; pointer-events: none; }
.wg-type .wg-type-soon { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }


/* =============================================================
   2. CONTROLS PANEL + BUTTONS + LISTS
============================================================= */
.wg-panel {
  background: var(--et-white, #fff);
  border: 1px solid var(--et-border, #E5E7EB);
  border-radius: var(--et-radius, 14px);
  box-shadow: var(--et-shadow-sm, 0 2px 8px rgba(13,27,75,.07));
  padding: 0;                          /* header sits flush; body padded below */
  overflow: hidden;
}
/* Accent header strip */
.wg-panel-head {
  background: linear-gradient(135deg, var(--et-navy, #0D1B4B), #16277a);
  color: #fff; padding: 20px 26px;
}
.wg-panel-head h3 { margin: 0 0 3px; font-size: 1.2rem; font-weight: 800; color: #fff; }
.wg-panel-head p  { margin: 0; color: rgba(255,255,255,.8); font-size: var(--et-text-sm, .875rem); }
.wg-panel-body { padding: 24px 26px 22px; }

.wg-panel .form-group { margin-bottom: 18px; }
.wg-panel label { font-weight: 600; color: var(--et-text, #1A1A2E); margin-bottom: 6px; }
.wg-panel .form-control { height: 44px; border-radius: 10px; }
.wg-panel select.form-control { height: 44px; }
.wg-field-label { display: block; font-weight: 700; color: var(--et-text, #1A1A2E); margin-bottom: 8px; }

/* Pill checkboxes (operations + options) */
.wg-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.wg-checks label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 9px 15px; border: 1px solid var(--et-border, #E5E7EB);
  border-radius: 999px; background: var(--et-cream, #FAFAF7);
  cursor: pointer; font-weight: 500; font-size: var(--et-text-sm, .875rem); transition: all .15s;
}
.wg-checks label:hover { border-color: var(--et-teal-lt, #13A68F); }
.wg-checks input { margin: 0; }
.wg-checks label:has(input:checked) { border-color: var(--et-teal, #0F7B6C); background: #E9F6F3; color: var(--et-teal, #0F7B6C); font-weight: 700; }

/* Advanced options: pill toggle + collapsible block */
.wg-divider { border: 0; border-top: 1px solid var(--et-border, #E5E7EB); margin: 22px 0; }
.wg-adv-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--et-cream, #FAFAF7); border: 1px solid var(--et-border, #E5E7EB);
  border-radius: 999px; padding: 9px 18px; cursor: pointer;
  color: var(--et-teal, #0F7B6C); font-weight: 700; font-size: var(--et-text-sm, .9rem); transition: all .2s;
}
.wg-adv-toggle:hover { border-color: var(--et-teal, #0F7B6C); background: #E9F6F3; }
.wg-adv-toggle .wg-chev { transition: transform .2s; display: inline-block; }
.wg-adv-toggle.is-open .wg-chev { transform: rotate(90deg); }
.wg-advanced { display: none; margin-top: 18px; padding-top: 20px; border-top: 1px dashed var(--et-border, #E5E7EB); }
.wg-advanced.is-open { display: block; }

/* Action buttons */
.wg-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
/* A neutral "ghost" button with VISIBLE dark text (Reset) */
.wg-btn-ghost {
  background: #fff; color: var(--et-text, #1A1A2E); border: 1.5px solid var(--et-border, #E5E7EB);
  border-radius: 100px; padding: 12px 26px; font-weight: 600; font-size: var(--et-text-base, 1rem);
  display: inline-block; line-height: 1.4; cursor: pointer; transition: all .2s;
}
.wg-btn-ghost:hover { border-color: var(--et-teal, #0F7B6C); color: var(--et-teal, #0F7B6C); }
.wg-help { font-size: var(--et-text-sm, .875rem); color: var(--et-muted, #6B7280); margin: 14px 0 0; }

/* On-brand checkmark list (default <ul> bullets are unreliable across the site) */
.wg-list { list-style: none; padding: 0; margin: 10px 0 0; }
.wg-list li { position: relative; padding-left: 28px; margin-bottom: 10px; color: var(--et-muted, #6B7280); line-height: 1.6; }
.wg-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--et-teal, #0F7B6C); font-weight: 800; }


/* =============================================================
   3. OUTPUT AREA
============================================================= */
#wg-output { margin-top: 30px; }
.wg-output-scroll { overflow-x: auto; }


/* =============================================================
   4. THE PRINTABLE WORKSHEET  (A4 page that fills; pinned footer)
============================================================= */
.wg-sheet {
  background: #fff; color: #111;
  width: 210mm; min-height: 297mm;          /* A4 page on screen */
  margin: 0 auto 26px auto;
  /* Padding matches the @page print margin (12mm, see Section 8) exactly,
     on all four sides. At print time the browser adds its own 12mm page
     margin and this padding drops to 0 — so the content area is the same
     size on screen as it is on paper, and line breaks / spill-over match
     what you'll actually get out of the printer. (Previously this was an
     uneven 15mm/16mm/12mm, which is why the on-screen preview didn't line
     up with the printed page.) */
  padding: 12mm;
  border: 1px solid var(--et-border, #E5E7EB);
  border-radius: 14px;
  box-shadow: var(--et-shadow, 0 4px 20px rgba(13,27,75,.10));
  display: flex; flex-direction: column;     /* footer pins to the bottom */
  font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.4;
}
.wg-a4     { width: 210mm; min-height: 297mm; }
.wg-letter { width: 8.5in;  min-height: 11in; }

.wg-sheet-head { flex: 0 0 auto; }

.wg-title { font-size: 38px; font-weight: 800; text-align: center; color: #111; display: flex; justify-content: center; align-items: center; gap: 12px; margin: 0 0 6px; }
.wg-title .wg-ic { font-size: 28px; line-height: 1; }
.wg-subtitle { font-size: 17px; text-align: center; color: #555; margin-bottom: 20px; }

.wg-meta { display: flex; justify-content: space-between; gap: 24px; margin: 36px 0 30px; font-size: 16px; }
.wg-meta > span { flex: 1; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.wg-meta .wg-line { flex: 1; border-bottom: 1.5px solid #bbb; height: 1px; }

/* Problems grid. By default rows are natural (top-aligned). Pages
   flagged .wg-fill STRETCH their rows to fill the whole page so the
   sheet is fully used with large, legible boxes. */
.wg-problems {
  flex: 1 1 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 26px;
  align-content: start;
  grid-auto-rows: minmax(64px, max-content);
}
.wg-problems.wg-cols-1 { grid-template-columns: 1fr; }
.wg-problems.wg-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wg-fill .wg-problems { align-content: stretch; grid-auto-rows: minmax(min-content, 1fr); }

/* One problem cell — larger box + larger text for clean printing */
.wg-problem {
  position: relative; border: 1px dashed #d6d6d6; border-radius: 10px;
  padding: 16px 18px; min-height: 64px;
  display: flex; align-items: center; justify-content: center;
  page-break-inside: avoid; break-inside: avoid;
}
.wg-qno { position: absolute; top: 7px; left: 11px; font-size: 13px; font-weight: 700; color: #9aa0a6; }
.wg-large  { font-size: 29px; letter-spacing: .5px; }
.wg-center { text-align: center; }
.wg-answer { color: #0a7d16; font-weight: 700; }

/* Footer note — normal flow, pinned to the bottom of the page (no overlap) */
.wg-footer-note {
  flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid #eee; margin-top: 16px; padding-top: 8px;
  color: #8a8f98; font-size: 12px;
}


/* =============================================================
   5. PAGE SEPARATOR  (screen-only "end of page" marker)
============================================================= */
.wg-page-sep { display: flex; align-items: center; gap: 14px; max-width: 210mm; margin: 6px auto 26px; color: var(--et-muted, #6B7280); font-size: 13px; font-weight: 700; }
.wg-page-sep::before, .wg-page-sep::after { content: ""; flex: 1; border-top: 2px dashed #c9ccd1; }


/* =============================================================
   6. WORKSHEET-TYPE ELEMENT STYLES  (maths + future types)
============================================================= */
.wg-vmath { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 29px; width: max-content; min-width: 100px; margin: 0 auto; text-align: right; }
.wg-vrow { padding: 1px 6px; }
.wg-vop  { float: left; }
.wg-vrule { border-top: 2px solid #222; margin: 6px 0; }
.wg-vans { min-height: 34px; }

/* ---- Handwriting: the 4-line guide box ----
   IMPORTANT: uses real CSS borders on absolutely-positioned rule divs,
   NOT a background-image. Background-image lines are unreliable at
   print time (some print drivers drop them even with color-adjust
   forced) — borders always print, in every browser and PDF driver.

   The four rules are semantically:
     .top    — ascender ceiling (capitals, and b/d/f/h/k/l/t reach here)
     .mid1   — x-height ceiling (a/c/e/i/m/n/o/r/s/u/v/w/x/z top out here)
     .mid2   — THE BASELINE (every letter's foot sits exactly here)
     .bottom — descender floor (g/j/p/q/y drop down to here)

   POSITIONING METHOD — read this before changing the numbers below:
   An earlier version tried to measure each font's real ascent/descent
   with a hidden <canvas> and calculate exact pixel positions in JS.
   That was unreliable in practice (canvas can resolve/report a font's
   metrics differently than the browser renders that same font on the
   page) and produced badly broken alignment — worse than a simple
   guess. Positioning is therefore plain CSS in "em" units, scaling
   automatically with font-size.

   NELSON-STYLE EQUAL SPACING (current layout):
   All three bands (ascender zone, x-height zone, descender zone) are
   the SAME height — 0.50em each — matching the equal-spaced 4-line
   copybook layout used by Nelson handwriting:
     top    at 0.20em   (ascender line)
     mid1   at 0.70em   (x-height line)
     mid2   at 1.20em   (THE BASELINE — every letter's foot sits here)
     bottom at 1.70em   (descender line)
   The 0.20em top/bottom pads (v3, was 0.25em) trim 4px per row so a
   full 8-row sheet fits one printed A4 page with margin to spare.
   The band size (0.50em) is chosen to equal a standard sans-serif
   font's x-height, so SMALL letters (a c e m n o …) fill the middle
   band mid1→mid2 exactly — the property Nelson cares about most.
   The one unavoidable trade-off with a normal screen font: its
   ascenders/capitals rise only ≈0.73–0.80em above the baseline, so
   they stop a little short of the top line, and descenders (≈0.20em)
   stop short of the bottom line. Real 1:1:1 metrics only exist in
   dedicated commercial school fonts. If after a test print you want
   ascenders closer to the top line, shrink the band: change every
   0.25-step below to a smaller step (e.g. 0.45em bands = top 0.25,
   mid1 0.65, mid2 1.10, bottom 1.55, wrap top 0.30, height 1.75em)
   — accepting that small letters will then poke slightly above mid1.
   .wg-ghost-wrap top = 0.40em because 0.40 + 0.80 (typical HTML text
   ascent) lands the ghost text's baseline exactly on mid2 at 1.20em.
   (The SVG dashed style needs no such assumption — SVG's y attribute
   places the baseline directly; see the generator scripts.)
   The box's own font-size is kept in sync with the ghost text's actual
   (possibly auto-shrunk) size by a two-line JS helper — see
   hwSyncGuideFontSize in the generator script — so these "em" values
   always scale correctly even after long text shrinks to fit. */
.wg-trace-lines {
  position: relative; width: 100%;
  height: 1.9em;              /* 0.20em pad + 3 × 0.50em equal bands + 0.20em pad */
  font-size: 38px;            /* default; JS syncs this to the ghost's real (possibly shrunk) size */
  border-radius: 10px;
}
.wg-trace-rule { position: absolute; left: 14px; right: 14px; height: 0; border-top-style: solid; }
.wg-trace-rule.top    { top: 0.20em; border-top-width: 2.5px; border-top-color: #f2a8a8; } /* ascender line   */
.wg-trace-rule.mid1   { top: 0.70em; border-top-width: 1.5px; border-top-color: #bab6b6; } /* x-height line   */
.wg-trace-rule.mid2   { top: 1.20em; border-top-width: 1.5px; border-top-color: #bab6b6; } /* BASELINE        */
.wg-trace-rule.bottom { top: 1.70em; border-top-width: 2.5px; border-top-color: #f2a8a8; } /* descender line  */
.wg-ghost-wrap { position: absolute; left: 14px; right: 14px; top: 0.40em; line-height: 1; }

.wg-ghost { font-size: 38px; color: #000; letter-spacing: .05em; opacity: .55; line-height: 1; pointer-events: none; white-space: nowrap; }

/* "Outline" trace-text style — a hollow letter (transparent fill, solid
   stroke around the glyph) instead of a solid grey fill. This replaced
   an earlier attempt at a dashed-fill effect built with
   background-clip:text, which rendered as visible noise against the
   glyph anti-aliasing on screen and was silently dropped by several
   print drivers (backgrounds are the least reliable thing to print).
   -webkit-text-stroke paints the glyph itself — not a background — so
   it renders cleanly and prints exactly like normal text, every time. */
.wg-ghost-dashed { opacity: .7; }
@supports (-webkit-text-stroke: 1px black) {
  .wg-ghost-dashed {
    color: transparent;
    -webkit-text-stroke: 1.6px #444;
  }
}

/* Alphabet mode: letters spread edge-to-edge across the full line rather
   than sitting bunched in the middle. RTL for Urdu reverses the visual
   order automatically so the first letter still lands on the right.
   align-items:baseline (not center) matters here: it's what makes a
   capital+lowercase pair like "Aa" share one common foot line even
   though the two characters are different heights — exactly the same
   baseline concept as the English guide above. */
.wg-letters-row { display: flex; justify-content: space-between; align-items: baseline; width: 100%; font-size: 38px; opacity: .55; line-height: 1; }
.wg-letters-row.wg-rtl { direction: rtl; }
.wg-ghost-letter { font-size: inherit; color: #000; letter-spacing: .02em; white-space: nowrap; }

/* Blank ruled writing line (the "plain" style) — a single real border,
   same reasoning as above: guaranteed to print, and width:100% so it
   never collapses to a sliver the way an unsized flex child would. */
.wg-worklines { width: 100%; min-height: 46px; border-bottom: 1.5px solid #999; }

.wg-urdu { font-family: 'Noto Nastaliq Urdu','Jameel Noori Nastaleeq',serif; font-size: 36px; letter-spacing: 1px; }
/* Urdu needs only ONE line (this border), so — unlike the English
   4-line guide above — there's no need to calculate a separate
   baseline position at all. display:flex + align-items:flex-end simply
   sits the text's own bottom edge (which already includes whatever
   descent the real, actually-rendered font has) right on this border,
   using the browser's own text layout rather than any measurement or
   guess. Any part of a letter that genuinely extends below the
   baseline in Urdu script (e.g. the dot under ب) falls naturally past
   the line — that's correct Urdu letterforms, not a rendering error.
   direction:rtl un-does the default left-to-right flex order, and
   text-align:right is a harmless belt-and-braces fallback. */
.wg-workline-urdu {
  width: 100%; border-bottom: 1.5px solid #000; min-height: 44px; margin: 8px 0;
  display: flex; align-items: flex-end; justify-content: flex-start;
  direction: rtl; text-align: right;
}
/* Nastaliq is a diagonal, sweeping script — its natural "descent" (the
   full height of its line-box below the visual baseline) is generously
   sized by the font to cover its most extreme swashes, so a plain
   flush-to-the-bottom alignment (align-items:flex-end above) puts more
   of an ORDINARY word's visible ink below the line than we want. This
   padding nudges the text up a little so more of it sits above the
   line, leaving only the parts that genuinely dip low (tails, the dot
   under ب, etc.) crossing it. Scoped to Urdu only — .wg-ghost and
   .wg-letters-row are shared with the English guide above, which
   should NOT get this nudge. If it still needs adjusting, change only
   this value. */
.wg-workline-urdu > .wg-ghost,
.wg-workline-urdu > .wg-letters-row {
  padding-bottom: 0.18em;
}

/* ---- DASHED trace text (SVG) ------------------------------------
   True dashed letter outlines are impossible with CSS alone —
   -webkit-text-stroke can't be dashed, and background-clip tricks
   don't survive print drivers (see the .wg-ghost-dashed note above).
   So the "Dashed outline" style renders the trace text as REAL
   inline SVG <text> with stroke-dasharray. SVG strokes are page
   CONTENT (like normal text), never backgrounds, so they print
   reliably in every browser/PDF driver — same principle as the
   border-based guide lines.
   The generator scripts set x / y / font-size / stroke-dasharray on
   each <text> after shrink-to-fit (deterministic multiplication of
   the final font-size — no font-metric guessing for English; a
   one-off rendered-DOM baseline measurement for Nastaliq). */
.wg-svg-trace { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.wg-svg-trace text {
  fill: none;
  stroke: #555;
  stroke-width: 1.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  letter-spacing: .05em;
}

/* Urdu dashed rows use the boxed-row style of printed copybooks (see
   the school-book sample this was modelled on): a full rectangle per
   line rather than a single baseline. position:relative hosts the
   absolutely-positioned SVG; height is set by JS from the measured
   Nastaliq line-box so blank and traced rows match. */
.wg-urow {
  position: relative; width: 100%;
  min-height: 2.1em;              /* fallback before JS sizes it */
  font-size: 36px;
  border: 1.5px solid #555;
  border-radius: 6px;
  margin: 8px 0;
}
.wg-urow .wg-svg-trace text {
  font-family: 'Noto Nastaliq Urdu','Jameel Noori Nastaleeq',serif;
  direction: rtl;
  letter-spacing: normal;         /* letter-spacing breaks Nastaliq joining */
  stroke-width: 1.2px;
}

/* "Book style" model line — the solid example the child copies from
   (first line of the Model → Trace → Blank mode). Full-opacity solid
   text; a bordered band (a real border, not a background, so it
   always prints) makes it read as the header line of the exercise,
   like the shaded band in printed copybooks. */
.wg-hw-model .wg-ghost,
.wg-hw-model .wg-letters-row { opacity: 1; font-weight: 600; }
.wg-hw-model .wg-trace-lines,
.wg-hw-model .wg-workline-urdu.wg-model-band {
  border: 2px solid #b9a7d6;
  border-radius: 8px;
}
.wg-hw-model .wg-workline-urdu.wg-model-band {
  padding: 0 12px;
  border-bottom-width: 2px;       /* keep the writing line visible inside the band */
}


.wg-grid-table { font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size: 22px; line-height: 1; border-collapse: collapse; margin: 18px auto; }
.wg-grid-table td { width: 30px; height: 30px; text-align: center; border: 2px solid #e0e0e0; letter-spacing: 1px; }
.wg-highlight { background: #fadc3e; }
.wg-wordbank { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; justify-content: center; }
.wg-tag { padding: 6px 12px; background: #eef3ff; border-radius: 999px; font-size: 14px; }

.wg-shape-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; width: 100%; }
.wg-shape-cell { border: 1px dashed #ddd; border-radius: 10px; padding: 10px; text-align: center; }
.wg-shape-cell svg { width: 100%; height: 84px; }

.wg-clock { width: 132px; height: 132px; margin: 6px auto; display: block; }


/* =============================================================
   7. ON-SCREEN RESPONSIVENESS
============================================================= */
@media screen and (max-width: 820px) {
  .wg-sheet, .wg-a4, .wg-letter { width: 100%; min-width: 0; min-height: 0; padding: 22px 18px; }
  .wg-fill .wg-problems { grid-auto-rows: minmax(64px, max-content); align-content: start; } /* don't stretch on small screens */
  .wg-title { font-size: 28px; }
  .wg-title .wg-ic { font-size: 23px; }
  .wg-subtitle { font-size: 16px; }
  .wg-large { font-size: 26px; }
  .wg-problems.wg-cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .wg-page-sep { max-width: 100%; }
}
@media screen and (max-width: 520px) {
  .wg-problems, .wg-problems.wg-cols-3 { grid-template-columns: 1fr; }
  .wg-shape-grid { grid-template-columns: repeat(3, 1fr); }
}


/* =============================================================
   8. PRINT ISOLATION + PAGE FILL
   Hide all chrome/controls/copy + on-screen separators, and print
   ONLY the worksheets. Full pages fill the sheet; the last partial
   page keeps its natural height.
============================================================= */
@page { size: A4; margin: 12mm; }

@media print {
  html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff !important; }

  /* The 4-line guide, blank ruled line, Urdu baseline, and the outline
     ghost-text effect (text-stroke) are all real borders/text-paint now
     — none of them are backgrounds, so they always print regardless of
     the "Background graphics" print-dialog setting. Only wg-highlight
     (word-search worksheet) is an actual background colour and still
     needs the adjust forced. */
  .wg-highlight {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  .et-topbar, .et-navbar, .et-footer, #loader,
  .et-page-hero, .et-cta-banner, .et-stats-bar,
  .wg-noprint, .wg-page-sep,
  #tawkchat-container, .tawk-min-container, .tawk-max-container,
  iframe[title*="chat" i] { display: none !important; }

  #wg-tool, .wg-section { padding: 0 !important; margin: 0 !important; background: #fff !important; }
  #wg-output { margin: 0 !important; }
  .wg-output-scroll { overflow: visible !important; }

  /* Sheet = the printable area of one A4 page (297mm - 2×12mm margins
     = 273mm; use 270mm for a small safety margin against spill). */
  .wg-sheet {
    box-shadow: none !important; border: none !important; border-radius: 0 !important;
    margin: 0 auto !important; padding: 0 !important;
    width: auto !important;
    height: 270mm; min-height: 0 !important;
    page-break-after: always;
  }
  .wg-sheet:not(.wg-fill) { height: auto !important; }   /* sparse last page: natural height */
  .wg-sheet:last-of-type  { page-break-after: auto !important; }
  .wg-problem { break-inside: avoid; page-break-inside: avoid; }
  .wg-large { font-size: 28px; }
}



/* =============================================================
   MULTIPLICATION TABLES — vertical single-table columns +
   full-page blank grid (added for
   /resources/worksheets/multiplication-tables). Append-only:
   nothing above this block was changed.
============================================================= */

/* Single table(s) format: one table per column, filling the
   whole page height top to bottom (relies on .wg-fill already
   stretching .wg-problem to the row height — see section 6). */
.wg-mult-col { height: 100%; width: 100%; display: flex; flex-direction: column; }
.wg-mult-row {
  flex: 1 1 0; min-height: 0;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid #eee;
}
.wg-mult-row:last-child { border-bottom: none; }
.wg-mult-no { flex: 0 0 auto; width: 24px; font-size: 13px; font-weight: 700; color: #9aa0a6; }
.wg-mult-eq { flex: 1 1 auto; text-align: center; font-size: clamp(18px, 2.4vw, 30px); letter-spacing: .5px; }

/* Blank grid format: a CSS grid (not a fixed-size table) so every
   cell shares the available width/height equally and the whole
   square scales up to fill the page. */
.wg-mult-grid-wrap { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; }
.wg-mult-grid { width: 100%; height: 100%; display: grid; border: 2px solid #333; }
.wg-mult-cell {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #ddd; font-size: clamp(13px, 2vw, 24px);
}
.wg-mult-cell.is-head { font-weight: 700; }

@media screen and (max-width: 820px) {
  .wg-mult-eq { font-size: 22px; }
  .wg-mult-cell { font-size: 16px; }
}

@media print {
  .wg-mult-eq { font-size: 26px; }
  .wg-mult-cell { font-size: 20px; }
}






/* =============================================================
   CUTTING & PASTING ACTIVITY — v2 (consistent cut/paste sizing)
   for /resources/worksheets/cutting-pasting. Append-only and fully
   self-contained (every class is wg-cp-*), so it can sit anywhere
   among your other appended worksheet blocks.

   THE KEY IDEA: one shared square size, --cp-unit. Every cut-out
   card AND every paste target (match slot, order slot, sequence
   tile) is exactly this square, so a cut piece lands on its target
   perfectly. "Sort" is the exception by design — its group boxes are
   larger because several cards are pasted into one box.

   Print-safety kept from v1: every line/box is a REAL border and all
   shape shading is SVG `fill` (never a CSS background, which print
   drivers drop).
============================================================= */

/* One place to change the cut/paste square size for the whole sheet. */
.wg-cp-page {
  --cp-unit: 24mm;                         /* the shared cut/paste square */
  --cp-gap: 3mm;
  height: 100%; width: 100%;
  display: flex; flex-direction: column;
}

.wg-cp-instr { text-align: center; font-size: 16px; color: #444; margin: 0 0 12px; }
.wg-cp-instr i { color: #777; margin-right: 6px; }

/* ---- Top work area: target boxes stretch to fill the page middle ---- */
.wg-cp-targets {
  flex: 1 1 auto; min-height: 0;
  display: grid; gap: 12px;                /* column count set inline per activity */
  grid-auto-rows: minmax(calc(var(--cp-unit) + 12mm), 1fr);
  align-content: stretch;
  margin-bottom: 6px;
}
.wg-cp-box {
  border: 2px solid #333; border-radius: 12px;
  padding: 8px 10px;
  display: flex; flex-direction: column;
  min-height: calc(var(--cp-unit) + 12mm);
}
.wg-cp-box-label {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 17px; color: #222;
  border-bottom: 1px dashed #bbb; padding-bottom: 6px; margin-bottom: 6px;
}
.wg-cp-box-label svg { display: inline-block; vertical-align: middle; }
.wg-cp-box-body {
  flex: 1 1 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 12px;
}
/* Match rows keep the [given] -> [slot] pair on one line */
.wg-cp-box-body.wg-cp-match { flex-wrap: nowrap; gap: 10px; }
.wg-cp-arrow { flex: 0 0 auto; font-size: 22px; color: #666; }

/* ---- THE SHARED UNIT: cut card, paste slot, "given" square, tile ----
   All four are identical squares, so a cut card fits its target exactly. */
.wg-cp-card,
.wg-cp-slot,
.wg-cp-shown,
.wg-cp-tile {
  width: var(--cp-unit); height: var(--cp-unit);
  box-sizing: border-box; border-radius: 10px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.wg-cp-card  { border: 1.6px dashed #8a8f98; }   /* cut-out card (in the strip) */
.wg-cp-slot  { border: 2px dashed #9aa0a6; background: transparent; } /* empty paste target */
.wg-cp-shown { border: 2px solid #333; }         /* the "given" half in Match  */
.wg-cp-tile  { border: 2px solid #333; }         /* printed sequence tile      */
.wg-cp-tile.is-blank { border-style: dashed; border-color: #9aa0a6; } /* paste target */

/* Keep any SVG / emoji comfortably inside its unit on every screen size */
.wg-cp-card svg, .wg-cp-slot svg, .wg-cp-shown svg, .wg-cp-tile svg { max-width: 84%; max-height: 84%; }
.wg-cp-card .wg-cp-emoji, .wg-cp-slot .wg-cp-emoji, .wg-cp-shown .wg-cp-emoji { line-height: 1; }

/* ---- "Complete the sequence" tile row ---- */
.wg-cp-seq {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
  align-content: center; justify-content: center;
  margin-bottom: 6px;
}

/* ---- Cut line + the cut-out strip (pinned to the page bottom) ---- */
.wg-cp-cutline {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  color: #666; font-size: 14px; font-weight: 600;
  margin: 8px 0 8px;
}
.wg-cp-cutline::before, .wg-cp-cutline::after { content: ""; flex: 1 1 auto; border-top: 2px dashed #888; }
.wg-cp-cutline i { color: #777; }

.wg-cp-strip { flex: 0 0 auto; border: 1.5px solid #cfcfcf; border-radius: 10px; padding: 8px; }
.wg-cp-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ---- Value sizing (identical wherever a value appears in a unit) ---- */
.wg-cp-big   { font-size: 34px; font-weight: 800; letter-spacing: 1px; line-height: 1; }
.wg-cp-mini  { font-size: 22px; font-weight: 700; }
.wg-cp-emoji { line-height: 1; }
.wg-cp-ans   { color: #0a7d16; font-weight: 700; }       /* key answers (text turns green) */
.wg-cp-ans svg { vertical-align: middle; }

/* Sort answer key: a neat wrapped mini list inside the ample group box */
.wg-cp-keylist { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; justify-content: center; }

/* ---- On-screen responsiveness (print keeps the mm unit above) ---- */
@media screen and (max-width: 820px) {
  .wg-cp-page { --cp-unit: 20mm; }
  .wg-cp-big  { font-size: 28px; }
}
@media screen and (max-width: 520px) {
  .wg-cp-page { --cp-unit: 16mm; }
  .wg-cp-big  { font-size: 22px; }
  .wg-cp-targets { grid-template-columns: 1fr 1fr !important; }
}








/* =============================================================
   MISSING NUMBERS worksheet (wg-mn-*)
   APPEND this whole block to the END of css/worksheets.css.
   Print-safe: shading/lines use borders only (never background),
   because print drivers drop CSS backgrounds by default.
============================================================= */

/* Sequence row — slightly smaller than .wg-large so an 8-term
   sequence of 3–4-digit numbers fits on one line of an A4 page. */
.wg-mn-seq { font-size: 24px; letter-spacing: .5px; line-height: 1.5; }
.wg-mn-gap { letter-spacing: 0; font-weight: 600; }
.wg-mn-comma { margin: 0 2px; color: #555; }

/* Number line — the line is a border-top on the row; each tick is
   a small border-left drawn by ::before (borders survive print). */
.wg-mn-numline {
  display: flex; justify-content: space-between;
  margin: 30px 10px 8px; border-top: 3px solid #333;
}
.wg-mn-tick {
  flex: 1 1 0; min-width: 0; text-align: center; position: relative;
  padding-top: 16px; font-size: 19px; font-weight: 600;
}
.wg-mn-tick::before {
  content: ""; position: absolute; top: -3px; left: 50%; margin-left: -1px;
  height: 12px; border-left: 3px solid #333;
}
/* Missing label: a short write-on line under its tick. */
.wg-mn-blankline {
  display: inline-block; min-width: 34px; height: 20px;
  border-bottom: 2px solid #333; vertical-align: bottom;
}

/* Hundred square — reuses .wg-grid-table but with wider cells so
   three-digit numbers (100) fit, centred on the page. */
.wg-mn-hundred-wrap { width: 100%; display: flex; justify-content: center; }
.wg-mn-hundred td { width: 42px; height: 36px; font-size: 17px; border-color: #bbb; }

@media screen and (max-width: 820px) {
  .wg-mn-seq { font-size: 19px; }
  .wg-mn-tick { font-size: 15px; }
  .wg-mn-hundred td { width: 28px; height: 26px; font-size: 12px; }
}

@media print {
  .wg-mn-seq { font-size: 24px; }
  .wg-mn-hundred td { width: 42px; height: 36px; }
}


/* =============================================================
   HANDWRITING PAGES — v2 FIXES (append-only; nothing above changed)

   .wg-plain-prompt replaces the wg-tag pill that the "Blank ruled
   lines" style used for its prompt. Two problems with the pill:
     1. its fixed line-height couldn't contain Nastaliq's very tall
        line box, so the Urdu text overlapped the ruled line below;
     2. its background colour is dropped by print drivers, so the
        screen and the printout looked different.
   A plain text block with a script-appropriate line-height has
   neither problem — it renders identically on screen and paper.  */
.wg-plain-prompt { font-size: 17px; color: #555; line-height: 1.4; margin: 0 0 4px; }
.wg-plain-prompt.wg-urdu {
  font-size: 20px;            /* overrides .wg-urdu's 36px for the prompt */
  line-height: 2.2;           /* room for Nastaliq's tall line box        */
  letter-spacing: 0;          /* letter-spacing breaks Nastaliq joining   */
  text-align: right;
}

/* Taller blank ruled line for writing Nastaliq on plain-style sheets
   (the default 46px is sized for English handwriting). */
.wg-worklines-tall { min-height: 64px; }


/* =============================================================
   HANDWRITING PAGES — v3 FIX (append-only; nothing above changed)

   .wg-ghost sets line-height:1, which the English 4-line guide
   maths depends on — but Nastaliq glyphs extend far beyond a 1em
   line box, so with line-height:1 the Urdu model/solid text
   visually escaped its band upwards (clearly broken in print).
   Restore the browser's natural line box inside Urdu rows only;
   the flex align-end baseline design then contains the glyphs the
   way it was originally intended to. English guides keep 1.     */
.wg-workline-urdu .wg-ghost,
.wg-workline-urdu .wg-letters-row,
.wg-workline-urdu .wg-ghost-letter { line-height: normal; }


/* =============================================================
   HANDWRITING PAGES — v3 (append-only; nothing above changed
   except the .wg-trace-lines geometry block and the
   .wg-worklines-tall value, both exclusive to these pages)

   Copybook-style rows: slimmer chrome so a full 8-row sheet
   genuinely fits one printed A4 page, no line numbers (real
   copybooks don't number their lines — see the samples this page
   follows), and one shared SVG pipeline for every Urdu text style,
   painted by class.                                              */

/* Slim per-row card: the default .wg-problem padding (16/18) plus
   row margins made 8 handwriting rows overflow the 270mm print
   sheet, which mangled pagination (footers over rows). */
.wg-problem.wg-hw-row { padding: 8px 14px; min-height: 0; }
.wg-hw-row .wg-qno    { display: none; }
.wg-hw-row .wg-urow   { margin: 0; }

/* Cap the alphabet baseline row: Nastaliq's natural line box is
   ~2.6× the font size (mostly air); uncapped it also overflowed
   the printed page. flex-end keeps the letters sitting on the
   bottom border; the little visual overflow above is harmless. */
.wg-hw-row .wg-workline-urdu { height: 72px; min-height: 0; }

/* One SVG pipeline for every Urdu text style — paint by class.
   Dots come from stroke-dasharray "0.1 gap" + the round linecap
   set on .wg-svg-trace text above; size/spacing are inline styles
   from svgFinalize. The others are plain fills/strokes: */
.wg-urow text.wg-ut-dots    { fill: none; }                     /* stroke rules above */
.wg-urow text.wg-ut-solid   { fill: #8a8a8a; stroke: none; }    /* grey ghost         */
.wg-urow text.wg-ut-outline { fill: none; stroke: #555; }       /* hollow outline     */
.wg-urow text.wg-ut-model   { fill: #000; stroke: none; }       /* solid model line   */

/* Model line band on the boxed row (the Urdu model used to sit on
   the HTML baseline row; it now uses the same boxed pipeline). */
.wg-urow.wg-model-band { border: 2px solid #b9a7d6; }