/* Shared appearance of the worksheet sheet itself — used by both the
   screen preview and print output, so the two never visually drift. */

@font-face {
  font-family: 'Andika';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/andika/Andika-Regular.woff2') format('woff2');
  font-display: block;
}

@font-face {
  font-family: 'Andika';
  font-style: normal;
  font-weight: 700;
  src: url('../assets/fonts/andika/Andika-Bold.woff2') format('woff2');
  font-display: block;
}

@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/lexend/Lexend-Regular.woff2') format('woff2');
  font-display: block;
}

@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 700;
  src: url('../assets/fonts/lexend/Lexend-Bold.woff2') format('woff2');
  font-display: block;
}

@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/opendyslexic/OpenDyslexic-Regular.woff2') format('woff2');
  font-display: block;
}

@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  font-weight: 700;
  src: url('../assets/fonts/opendyslexic/OpenDyslexic-Bold.woff2') format('woff2');
  font-display: block;
}

@font-face {
  font-family: 'Comic Neue';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/comicneue/ComicNeue-Regular.woff2') format('woff2');
  font-display: block;
}

@font-face {
  font-family: 'Comic Neue';
  font-style: normal;
  font-weight: 700;
  src: url('../assets/fonts/comicneue/ComicNeue-Bold.woff2') format('woff2');
  font-display: block;
}

.ws-page {
  width: 170mm;
  box-sizing: border-box;
  background: #ffffff;
  color: #202020;
  font-family: var(--ws-font-family, 'Andika'), sans-serif;
  font-size: calc(var(--ws-font-size-pt, 18) * 1pt);
  line-height: var(--ws-line-height, 1.5);
  text-align: left;
  /* Anchors .ws-page-break-marker, which positions against this box's own
     top rather than the viewport — the page has no fixed height, it grows
     with content that may print as more than one page (workstream A). */
  position: relative;
}

/* Tint is screen-visible whenever selected; printing it is a separate,
   explicit opt-in to save ink by default (blueprint 8.5/8.6). */
.ws-page.ws-page--tinted {
  background: var(--ws-tint-color, #ffffff);
}

/* Atomic blocks per layout/paginate.js — never split across a page
   (blueprint v3, workstream A). */
.ws-header,
.ws-title,
.ws-image-wrap {
  break-inside: avoid;
}

.ws-header {
  display: flex;
  gap: 12mm;
  margin-bottom: 4mm;
  font-size: 11pt;
}

.ws-header-field {
  border-bottom: 0.3mm solid #333;
  padding-bottom: 1mm;
  flex: 1;
}

.ws-title {
  font-size: calc((var(--ws-font-size-pt, 18) + 4) * 1pt);
  margin: 0 0 3mm 0;
  font-weight: 700;
}

/* The activity's instruction to the child ("Look at the picture and write
   about it."), under the title, at the passage's size so a child can read it. */
.ws-instruction {
  margin: 0 0 3mm 0;
}

.ws-image-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 3mm;
}

.ws-image {
  max-width: var(--ws-image-max-width-mm, 60mm);
  max-height: var(--ws-image-max-height-mm, 45mm);
  object-fit: contain;
}

.ws-body {
  margin: 0;
  position: relative; /* anchors .ws-line-stripes, which positions against this box */
}

/* One per sentence when settings.sentencePerLine is on; otherwise a single
   .ws-sentence wraps the whole passage (blueprint brief section 5: "one
   sentence per line... helping children who lose their place"). */
.ws-sentence {
  position: relative; /* stacks above .ws-line-stripes */
  z-index: 1;
  margin: 0;
  text-align: left;
  letter-spacing: var(--ws-letter-spacing-mm, 0mm);
  word-spacing: var(--ws-word-spacing-mm, 0mm);
  /* The fit model (layout/paginate.js) breaks between individual measured
     lines, with no minimum run before/after a break — Chromium's default
     of 2 would move a line the model didn't account for, desyncing the
     printed page count from the one reported to the teacher (blueprint v3,
     workstream A). */
  orphans: 1;
  widows: 1;
}

.ws-body.ws-sentence-per-line .ws-sentence {
  margin-bottom: 0.25em;
}

/* Positioned from real measured line boxes (render/html.js), never a fixed
   CSS repeat — see measureBodyLineBoxes' doc comment for why. Screen-visible
   whenever lineStripes is on; printing it is a separate ink-saving opt-in
   (blueprint 8.5), same pattern as tint. */
.ws-line-stripes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ws-line-stripe {
  position: absolute;
  left: -2mm;
  right: -2mm;
  background: rgba(20, 20, 20, 0.06);
}

/* Line numbers (settings.lineNumbers): a gutter inside the content box —
   the text rewraps to the narrower width and the fit check measures it.
   Never in the page margin, which not every engine prints. The gutter
   width comes from config.LINE_NUMBER_GUTTER_MM via an inline property. */
.ws-body.ws-body--line-numbers {
  padding-left: var(--ws-line-number-gutter-mm);
}

/* What the child copies (read & copy, "Copy:"): a thin bar just left of
   the target's lines, or of the title. Positioned outside the text so the
   layout is the same with or without it; it bleeds into the margin like
   the stripes do. */
.ws-copy-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ws-copy-mark-bar {
  position: absolute;
  left: -3mm;
  width: 0.8mm;
  background: var(--ws-copy-mark-color);
}

.ws-title.ws-copy-mark {
  position: relative;
}

.ws-title.ws-copy-mark::before {
  content: '';
  position: absolute;
  left: -3mm;
  top: 0.15em;
  bottom: 0.15em;
  width: 0.8mm;
  background: var(--ws-copy-mark-color);
}

/* Syllable arcs: one small SVG per line, drawn from the measured spans
   (render/html.js); top is set inline. */
.ws-arcs {
  position: absolute;
  left: 0;
  overflow: visible;
  pointer-events: none;
}

.ws-arc {
  fill: none;
  stroke: var(--ws-arc-color);
  stroke-width: 0.3;
  stroke-linecap: round;
}

.ws-line-numbers {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--ws-line-number-gutter-mm);
  pointer-events: none;
}

/* Small and grey, vertically centred on its measured line, right-aligned
   against the text. A fixed size: scaling with a 32pt passage font would
   push three-digit numbers out of the 8mm gutter. */
.ws-line-number {
  position: absolute;
  left: 0;
  right: 2mm;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 9pt;
  line-height: 1;
  letter-spacing: 0;
  color: #6b7280;
}

/* Gap-fill: every gap on a sheet has the same width (inline style, from
   worksheet/selection.js blankWidthEm), so its length doesn't give the
   answer away. The answer sits inside: faint on screen so the teacher sees
   what was blanked, hidden in print (print.css) with visibility, so the
   printed box is exactly the measured one. */
.ws-blank {
  display: inline-block;
  text-align: center;
  border-bottom: 0.3mm solid #202020;
  letter-spacing: 0;
  word-spacing: 0;
}

.ws-blank-answer {
  color: #9CA3AF;
}

/* The answer key: the same boxes, the answers in bold (print.css prints them). */
.ws-body--answers .ws-blank-answer {
  color: #202020;
  font-weight: 700;
}

/* "Answers" on an answer-key sheet, so it isn't handed out by mistake. */
.ws-answer-tag {
  margin: 0 0 2mm auto;
  width: max-content;
  padding: 0.5mm 2mm;
  border: 0.3mm solid #202020;
  font-size: 11pt;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Gap-fill word bank: the missing words, spread out in a box. */
.ws-word-bank {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0;
  padding: 2mm 3mm;
  margin-bottom: 3mm;
  border: 0.3mm solid #202020;
  break-inside: avoid;
}

/* The teacher's own questions, each with its answer lines. */
.ws-questions {
  margin-top: 4mm;
}

.ws-question {
  break-inside: avoid;
  margin-bottom: 3mm;
}

.ws-question-text {
  margin: 0 0 1mm 0;
}

/* "Put in order": a column of items, box then sentence. */
.ws-sequence-item {
  display: grid;
  grid-template-columns: var(--ws-sequence-box-mm) 1fr;
  column-gap: 4mm;
  align-items: start;
  margin-bottom: 3mm;
  break-inside: avoid;
}

.ws-sequence-box {
  box-sizing: border-box;
  width: var(--ws-sequence-box-mm);
  height: var(--ws-sequence-box-mm);
  border: 0.3mm solid #202020;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
}

.ws-sequence-text {
  margin: 0;
}

/* "Read it, then draw it": an empty box after the passage. Its height and
   top gap are set inline from config; border-box keeps the height exact. */
.ws-drawing-box {
  box-sizing: border-box;
  border: 0.3mm solid #333333;
  break-inside: avoid;
}

.ws-copy-area {
  /* The first block's margin-top is set inline by render/html.js from
     config.COPY_AREA_GAP_MM — the single source of truth also used by
     layout/measure.js's row budget, so the two can never drift apart. */
}

/* One block per entry in layout.copyBlocks — never split across a page
   (blueprint v3, workstream A: an SVG ruling block is atomic). */
.ws-copy-block {
  break-inside: avoid;
}

/* A second copy block means the fit check decided the copy exercise needs
   a fresh page; break-before only takes effect when actually printed. */
.ws-copy-block--new-page {
  break-before: page;
}

.ws-ruling {
  display: block;
  /* The last baseline lies on the SVG's bottom edge; clipped, half of its
     stroke (or all of it, by rounding) went missing. */
  overflow: visible;
}

.ws-ruling-line {
  stroke: #666;
  stroke-width: 0.25;
}

.ws-ruling-baseline {
  stroke: #333;
  stroke-width: 0.3;
}

.ws-ruling-dashed {
  stroke-dasharray: 2 1.5;
}

/* Screen preview aid only (upgrade blueprint v3, workstream A) — never
   printed (.no-print, hidden by styles/print.css) and never rendered into
   a packet sheet. Positioned against .ws-page's own top; see
   render/html.js's renderPageBreakMarkers. */
.ws-page-break-marker {
  position: absolute;
  left: -4mm;
  right: -4mm;
  border-top: 0.5mm dashed #94a3b8;
  pointer-events: none;
}

.ws-page-break-label {
  position: absolute;
  right: 0;
  top: 1mm;
  font-size: 8pt;
  color: #64748b;
  background: #ffffff;
  padding: 0 1.5mm;
}