/*
  Topic Question Generator — Textbook Template CSS
  -------------------------------------------------
  Dense two-column exercise layout, styled like a printed textbook exercise
  page: collapsed questions, small diagrams, minimal white space. No marks and
  no answer spaces (students answer in their own workbooks).

  IMPORTANT: the generic ".question-list { display:flex }" rule in the HSC
  template would disable CSS multi-column, so this file explicitly sets
  display:block on the textbook question list to re-enable the two columns.
*/

.exam-document.template-textbook {
  /* Prompt text starts after the number column plus the heading gap. */
  --content-indent: calc(var(--question-number-width, 6mm) + 1.8mm);
  /* Diagram label text target — see fitDiagramSvg(). A dense two-column
     exercise page wants compact diagrams. */
  --diagram-text-mm: 2.7;
  background: #ffffff;
  font-family: var(--exam-font, "Times New Roman", Times, serif);
  color: var(--exam-ink, #111827);
}

/* Maths typography */
.template-textbook .math,
.template-textbook .math-frac,
.template-textbook .question-prompt,
.template-textbook .question-text,
.template-textbook .question-diagram,
.template-textbook .question-table,
.template-textbook .question-matching,
.template-textbook .choice-list {
  font-family: var(--exam-math-font, "Cambria Math", "STIX Two Math", "STIXGeneral", "Times New Roman", serif);
}

/* ── Page ────────────────────────────────────────── */

.template-textbook .textbook-page {
  min-height: auto;
  padding: 10mm 11mm 11mm;
  page-break-after: auto;
  break-after: auto;
}

/* ── Header (compact) ────────────────────────────── */

.template-textbook .textbook-header {
  border-bottom: 2px solid var(--exam-border, #111827);
  padding-bottom: 2.5mm;
  margin-bottom: 4mm;
  break-inside: avoid;
  page-break-inside: avoid;
}

.template-textbook .textbook-school {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5mm;
  color: var(--exam-muted, #4b5563);
}

.template-textbook .textbook-header h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
}

.template-textbook .textbook-topic {
  margin: 0.5mm 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--exam-muted, #4b5563);
}

/* ── Section header (spans full width above the columns) ─ */

.template-textbook .textbook-section {
  break-inside: auto;
}

.template-textbook .textbook-section-header {
  padding: 0 0 1mm;
  margin: 3mm 0 2.5mm;
  break-inside: avoid;
  page-break-inside: avoid;
}

.template-textbook .textbook-section-header h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--exam-muted, #4b5563);
  border-bottom: 1px solid #d1d5db;
  padding-bottom: 1mm;
}

.template-textbook .textbook-section-header p {
  margin: 1mm 0 0;
  font-size: 11px;
  color: var(--exam-muted, #4b5563);
}

/* ── Question list — two true CSS columns ─────────── */

/* The gutter does the separating, not the rule. At 7mm the two columns read as
   one block of text with a hairline through it, and the eye tracks across the
   gap mid-sentence. A gutter wider than the space between words — closer to an
   indent — makes the column boundary unambiguous without the reader having to
   look for it. */
.template-textbook .question-list {
  display: block;            /* override .question-list flex from hsc template */
  /* row-gap, NOT the `gap` shorthand. `gap` sets column-gap too, so declaring
     it after column-gap silently reset the gutter to zero — which is why the
     two columns printed hard up against the divider with about 1mm of air,
     and why changing column-gap appeared to do nothing. */
  row-gap: 0;                /* neutralise inherited flex gap */
  column-count: 2;
  column-gap: 13mm;
  column-rule: 1px solid #e3e6ea;
  column-fill: balance;
}

/* Each question collapses tightly and stays intact within a column. */
.template-textbook .exam-question {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: inline-block;     /* most reliable column break-inside in Chrome */
  width: 100%;
  margin: 0 0 2.4mm;
  padding: 0;
  font-size: 10.3pt;
  line-height: 1.25;
  box-sizing: border-box;
}

/* Diagram questions stay inside their column (do NOT span both columns), and
   carry extra trailing space so the NEXT question's number does not read as a
   caption for the drawing above it. This template zeroes padding on
   .exam-question, so the space has to come from the margin. */
.template-textbook .exam-question.has-diagram,
.template-textbook .exam-question.has-diagram-answer-layout {
  column-span: none;
  display: inline-block;
  width: 100%;
  margin-bottom: 4.6mm;
}

/* ── Topic bands in a two-column flow ─────────────────────────────────
   .question-list is a CSS multi-column container, so a band is just another
   block in the flow: it appears at the top of whichever column the topic
   change lands in, which is the correct reading position. It must be
   inline-block/width:100% for the same reason the questions are — that is
   what makes Chrome honour break-inside inside columns. */

.template-textbook .topic-band {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  margin: 3.5mm 0 2.2mm;
  padding-bottom: 0.8mm;
  border-bottom: 1px solid #c8ccd2;
}

.template-textbook .question-list > .topic-band:first-child,
.template-textbook .question-list > .topic-band-group:first-child .topic-band {
  margin-top: 0;
}

/* The band and its first question are one box in the column flow, so a column
   break can never land between a heading and the questions it introduces.
   inline-block/width:100% for the same reason .exam-question uses them: it is
   what makes Chrome honour break-inside inside a multi-column container. */
.template-textbook .topic-band-group {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.template-textbook .topic-band-label {
  font-size: 8.6pt;
  letter-spacing: 0.08em;
  color: #0f5496;
}


/* Everything that sits UNDER a prompt — diagram, caption, table, subparts,
   answer rules — lines up with the prompt text, not with the question number.
   --question-number-width is set per document from the paper's largest question
   number (see getDocumentMetrics), so the alignment is exact whether the paper
   runs to Q9 or Q240. */

/* ── Question number + prompt ─────────────────────── */

.template-textbook .question-heading {
  display: grid;
  grid-template-columns: var(--question-number-width, 6mm) 1fr;
  gap: 1.8mm;
  align-items: start;
  font-size: 10.3pt;
  line-height: 1.25;
}

.template-textbook .question-number {
  font-size: 10.3pt;
  font-weight: 800;
  color: #0f5496;
  line-height: 1.25;
  white-space: nowrap;       /* never let "Q146." wrap or collide with the prompt */
  padding-right: 1mm;
}

.template-textbook .question-number::after {
  content: ".";
}

.template-textbook .question-prompt,
.template-textbook .question-text {
  font-size: 10.3pt;
  line-height: 1.25;
  margin: 0;
}

/* Marks never show in a textbook exercise. */
.template-textbook .question-marks {
  display: none !important;
}

/* Subparts sit under the stem, aligned with the prompt text rather than with
   the question number, so (a) (b) (c) cannot be mistaken for new questions. */
.template-textbook .question-subparts {
  margin: 1.4mm 0 0;
  padding-left: var(--content-indent, 6mm);
  font-size: 10.3pt;
  line-height: 1.25;
}

.template-textbook .question-subpart {
  margin: 0 0 1.2mm;
}

.template-textbook .subpart-heading {
  grid-template-columns: 4.6mm 1fr auto;
  gap: 1.2mm;
}

/* ── Multiple-choice options — inline A B C D ─────── */

.template-textbook .choice-list {
  list-style: none;
  counter-reset: mc-opt;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 9px;
  padding: 1mm 0 0 var(--content-indent, 6mm);
  margin: 0;
}

.template-textbook .choice-list li {
  counter-increment: mc-opt;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
  font-size: 10pt;
}

.template-textbook .choice-list li::before {
  content: counter(mc-opt, upper-alpha) ")";
  font-weight: 700;
  color: #0f5496;
  min-width: 15px;
  font-size: 9.5pt;
  flex-shrink: 0;
}

/* ── Diagrams — sized to the COLUMN, not to a fixed 50mm ────────────────
   A textbook column is ~84mm of usable width. The old 50mm cap shrank every
   diagram to about 55% of it, which is unnoticeable on a circle but made wide
   diagrams (double number lines, number lines, fraction bars) print smaller
   than the sentence that referred to them, with unreadable tick labels.

   Now the wrapper fills the column and each aspect band gets its own height
   budget. data-aspect is set by fitDiagramSvg() in question-renderer.js from
   the diagram's own viewBox. */

/* The 6mm indent aligns diagrams with the prompt text, so it has to come OUT
   of the available width. max-width:100% plus a 6mm margin overruns the column
   by exactly that margin, which in the right-hand column runs off the page. */
.template-textbook .question-diagram {
  margin: 1.6mm 0 1.4mm var(--content-indent, 6mm);
  max-width: calc(100% - var(--content-indent, 6mm));
  min-height: 0;
}

.template-textbook .exam-question.has-diagram .question-diagram,
.template-textbook .exam-question.has-diagram-answer-layout .question-diagram {
  max-width: calc(100% - var(--content-indent, 6mm));
}

/* Printed size is set inline by fitDiagramSvg() from the diagram's own ink at a
   fixed scale, so label text is the same size in every question. The rules here
   are only the bounds it works within: never wider than the column, and a
   generous per-band height ceiling that should not normally bind. If a ceiling
   does bind, the aspect-ratio pulls the width in with it, so the drawing stays
   undistorted — it just prints smaller than the target scale. */

.template-textbook .question-diagram svg {
  display: block;
  height: auto;
  max-width: 100%;
  max-height: 44mm;          /* fallback for any diagram without a viewBox */
}

.template-textbook .question-diagram[data-aspect="wide"] svg {
  max-height: 40mm;
}

.template-textbook .question-diagram[data-aspect="landscape"] svg {
  max-height: 54mm;          /* must clear a full-width protractor (~49mm) */
}

.template-textbook .question-diagram[data-aspect="square"] svg {
  max-height: 50mm;
}

.template-textbook .question-diagram[data-aspect="tall"] svg {
  max-height: 58mm;
}

/* Diagrams sit under their prompt, left-aligned with the text. */
.template-textbook .question-diagram {
  display: flex;
  justify-content: flex-start;
}

/* Captions / notes stay small */
.template-textbook .question-diagram-caption,
.template-textbook .question-diagram-note {
  margin-left: var(--content-indent, 6mm);
  text-align: left;
  font-size: 9pt;
}

/* ── Tables — compact, and never wider than the column ────────────────
   The column is ~84mm and a place-value table can be 5 columns, so cells get
   ~16mm each. The type has to come down and the padding in with it, or a word
   like "Thousandths" cannot fit even when wrapped. */

.template-textbook .question-table-wrap {
  margin: 1.5mm 0 1.5mm var(--content-indent, 6mm);
  max-width: calc(100% - var(--content-indent, 6mm));
}

.template-textbook .question-table {
  font-size: 8.4pt;
}

.template-textbook .question-table th,
.template-textbook .question-table td {
  padding: 0.8mm 0.8mm;
  height: auto;
  min-height: 7mm;
  line-height: 1.15;
}

/* A place-value header can be a single long word ("Thousandths") in a ~16mm
   cell. Allowing it to break gives "Thousandth / s", which reads as a typo, so
   the header type is sized to fit the cell whole instead of being broken.
   Values stay at full size — they are what the student reads. */
.template-textbook .question-table th[scope="col"] {
  font-size: 6.9pt;
  letter-spacing: -0.01em;
  padding: 0.8mm 0.4mm;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

/* ── No answer spaces at all ──────────────────────── */

.template-textbook .answer-space,
.template-textbook .student-diagram-space {
  display: none !important;
}

/* ── Responsive (screen preview) ──────────────────── */

@media screen and (max-width: 820px) {
  .template-textbook .textbook-page {
    padding: 16px;
  }

  .template-textbook .question-list {
    column-count: 1;
    column-rule: none;
  }
}

/* ── Print ───────────────────────────────────────── */

@page textbook-page {
  size: A4;
  margin: 10mm 11mm 11mm 11mm;
}

@media print {
  .exam-document.template-textbook {
    width: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .template-textbook .textbook-page {
    page: textbook-page;
  }

  .template-textbook .exam-section,
  .template-textbook .textbook-page {
    width: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    page-break-after: auto !important;
    break-after: auto !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  /* Balance the columns on EVERY page, not just the last.

     column-fill:auto fills the left column to the full page height before
     starting the right, so whenever a tall unbreakable question would not fit
     in the remaining right column it moved to the next page — leaving pages
     that ended with a full left column and a half-empty right one, which reads
     as though the page stopped early. Balancing keeps both columns finishing
     at roughly the same depth, so a page always looks complete. */
  .template-textbook .question-list {
    display: block !important;
    row-gap: 0 !important;          /* never the `gap` shorthand — it resets column-gap */
    column-count: 2 !important;
    column-gap: 13mm !important;
    column-fill: balance !important;
  }

  /* The multiple choice section is short and always ends on its own page, so
     filling the left column first left ten questions on the left and two on the
     right with 40% of the page blank. Balancing splits it evenly instead. */
  .template-textbook .question-list-mc {
    column-fill: balance !important;
  }

  .template-textbook .exam-question {
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 2.4mm !important;
    padding: 0 !important;
    font-size: 10.3pt !important;
    line-height: 1.25 !important;
  }

  .template-textbook .exam-question.has-diagram,
  .template-textbook .exam-question.has-diagram-answer-layout {
    margin-bottom: 4.6mm !important;
  }

  .template-textbook .question-heading,
  .template-textbook .question-number,
  .template-textbook .question-prompt,
  .template-textbook .question-text {
    font-size: 10.3pt !important;
    line-height: 1.25 !important;
  }

  /* Print keeps the same per-aspect budgets as the screen preview, so what
     the teacher sees is what the PDF exports. */
  .template-textbook .question-diagram svg {
    height: auto !important;
    max-width: 100%;
    max-height: 44mm;
  }

  .template-textbook .question-diagram[data-aspect="wide"] svg { max-height: 40mm; }
  .template-textbook .question-diagram[data-aspect="landscape"] svg { max-height: 54mm; }
  .template-textbook .question-diagram[data-aspect="square"] svg { max-height: 50mm; }
  .template-textbook .question-diagram[data-aspect="tall"] svg { max-height: 58mm; }

  .template-textbook .question-marks,
  .template-textbook .answer-space,
  .template-textbook .student-diagram-space,
  .template-textbook .mc-answer-sheet {
    display: none !important;
  }
}