/* app/styles/print.css — the worksheet sheet itself.
 *
 * IMPORTANT — this file is loaded TWICE, on purpose:
 *   1. worksheet.html   <link rel="stylesheet" href="app/styles/print.css" media="print">
 *   2. worksheet.css    @import url("print.css") screen;   (first line of that file)
 *
 * So every top-level rule below styles BOTH the printed page and the on-screen
 * A4 preview from one source — the preview cannot drift from the printout.
 * The `@media print` block at the bottom only ever matches through route (1);
 * inside route (2) it evaluates to `screen and print`, i.e. never.
 *
 * Conversely, app/styles/worksheet.css wraps ALL of its own rules in
 * `@media screen`, so none of the builder chrome (grid panes, overflow,
 * transforms, shadows) exists in the print cascade at all.
 *
 * Target engine: Chromium.
 */

@page {
  size: A4;
  margin: 13mm 12mm;
}

/* =========================================================================
   Sheet frame + base typography (screen preview AND print)
   Body text is a system sans at 10.5pt: school printers and PDF viewers
   render it consistently, and it sits well next to the KaTeX math faces.
   ========================================================================= */

.print-root {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 10.5pt;
  line-height: 1.35;
  color: #000;
  orphans: 2;
  widows: 2;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.print-root h1,
.print-root h2,
.print-root p,
.print-root ol,
.print-root li,
.print-root div {
  margin: 0;
  padding: 0;
}

.print-root ol {
  list-style: none;
}

/* Math inherits the sheet colour; MathLive static markup supplies the fonts. */
.print-root .ML__latex {
  color: inherit;
}

/* A LaTeX failure must never blank a worksheet (see core/render.js fallback). */
.print-root .math-error {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9pt;
  outline: 1px dashed #999;
}

/* =========================================================================
   Version section + header block
   No flex / no grid anywhere in the print flow — the meta stamp is floated,
   which fragments predictably across pages.
   ========================================================================= */

.ws-version + .ws-version {
  break-before: page;
  page-break-before: always;
}

.ws-head {
  border-bottom: 1px solid #000;
  padding-bottom: 2mm;
  margin-bottom: 1mm;
  break-inside: avoid;
  page-break-inside: avoid;
  break-after: avoid;
  page-break-after: avoid;
}

.ws-head::after {
  content: "";
  display: table;
  clear: both;
}

.ws-meta {
  float: right;
  margin-left: 6mm;
  padding-top: 1.2mm;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: 8.5pt;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
  color: #000;
}

.ws-title {
  font-size: 15pt;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.ws-vtag {
  display: inline-block;
  margin-left: 2.5mm;
  padding: 0.2mm 1.6mm;
  border: 1px solid #000;
  border-radius: 1.2mm;
  font-size: 9pt;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: 1.5pt;
  white-space: nowrap;
}

.ws-skills {
  margin-top: 1mm;
  font-size: 8.5pt;
  line-height: 1.3;
  color: #333;
}

/* Name / Class / Date rule line ----------------------------------------- */

.ws-fields {
  margin: 3mm 0 1mm;
  font-size: 10pt;
  break-inside: avoid;
  page-break-inside: avoid;
  break-after: avoid;
  page-break-after: avoid;
}

.ws-field {
  margin-right: 7mm;
  white-space: nowrap;
}

.ws-rule {
  display: inline-block;
  height: 1em;
  border-bottom: 1px solid #000;
  vertical-align: baseline;
}

.ws-rule--name  { width: 52mm; }
.ws-rule--class { width: 20mm; }
.ws-rule--date  { width: 28mm; }

/* =========================================================================
   Questions
   Each version's <ol> resets its own counter, so numbering restarts at 1.
   The number is an absolutely-positioned ::before rather than a list marker:
   outside markers get clipped at column edges in Chromium multicol.
   .ws-q never fragments (break-inside: avoid), so the absolute number can
   never be orphaned from its question.
   ========================================================================= */

.ws-questions {
  counter-reset: q;
  margin-top: 2.5mm;
}

.ws-questions.cols-2 {
  columns: 2;
  column-gap: 8mm;
}

/* NOTE: .ws-questions > .ws-q (0,2,0) so the padding survives the
   .print-root li (0,1,1) typography reset above. */
.ws-questions > .ws-q {
  counter-increment: q;
  position: relative;
  box-sizing: border-box;
  padding: 2.5mm 0 2.5mm 8mm;
  break-inside: avoid;
  page-break-inside: avoid;
}

.ws-questions > .ws-q::before {
  content: counter(q) ".";
  position: absolute;
  left: 0;
  top: 2.5mm;
  width: 6mm;
  text-align: right;
  font-weight: 700;
}

.ws-stem {
  line-height: 1.5;
}

.ws-note {
  margin-top: 0.8mm;
  font-size: 8.5pt;
  line-height: 1.3;
  color: #333;
}

/* Working space — total height of the question block, border-box. */
.ws-questions.space-none .ws-q { min-height: 0; }
.ws-questions.space-S    .ws-q { min-height: 25mm; }
.ws-questions.space-M    .ws-q { min-height: 45mm; }
.ws-questions.space-L    .ws-q { min-height: 70mm; }

/* =========================================================================
   Answer key
   ========================================================================= */

.ws-key {
  break-before: page;
  page-break-before: always;
}

.ws-key__title {
  margin-bottom: 3mm;
  padding-bottom: 1.5mm;
  border-bottom: 1px solid #000;
  font-size: 12pt;
  font-weight: 700;
  break-after: avoid;
  page-break-after: avoid;
}

.ws-key__list {
  counter-reset: k;
}

.ws-key__item {
  counter-increment: k;
  break-inside: avoid;
  page-break-inside: avoid;
}

.ws-key__item::before {
  content: counter(k) ")\00a0";
  font-weight: 700;
}

/* 'separate' — compact three-column list of answers only. */
.ws-key--compact .ws-key__list {
  columns: 3;
  column-gap: 8mm;
}

.ws-key--compact .ws-key__item {
  padding: 1mm 0;
  font-size: 10pt;
  line-height: 1.4;
}

/* 'solutions' — full width, one question per row, worked lines beneath. */
.ws-key--solutions .ws-key__list {
  columns: 1;
}

.ws-key--solutions .ws-key__item {
  padding: 1.8mm 0 2.2mm 8mm;
  text-indent: -8mm;
  border-bottom: 1px solid #ccc;
}

.ws-key--solutions .ws-key__answer {
  font-weight: 600;
}

.ws-key__sol {
  margin: 1.2mm 0 0 1mm;
  text-indent: 0;
  font-size: 9.5pt;
  line-height: 1.45;
  color: #222;
}

.ws-key__line {
  padding: 0.3mm 0;
}

/* =========================================================================
   Print-only: hide the builder and neutralise every screen-side geometry
   rule that could survive into the print cascade.
   ========================================================================= */

@media print {
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Everything that is not the sheet. */
  .builder-ui,
  .screen-only {
    display: none !important;
  }

  /* The preview chain: .builder > .preview-pane > .sheet-frame > .sheet-scaler
     > .print-root. worksheet.css only styles these inside @media screen, so
     normally there is nothing to undo — this is the belt-and-braces pass that
     guarantees no scroll clipping and, above all, NO transform in print. */
  .builder,
  .preview-pane,
  .sheet-frame,
  .sheet-scaler {
    display: block !important;
    position: static !important;
    overflow: visible !important;
    transform: none !important;
    zoom: 1 !important;
    filter: none !important;
    contain: none !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

  .print-root {
    display: block !important;
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;   /* page margins come from @page, not from padding */
    border: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  /* Screen-only page-cut guides. */
  .print-root::after {
    content: none !important;
    display: none !important;
  }
}