/* The printable sheet: the drawing, the numbers, the graphs and the working —
   nothing that only makes sense on a screen. */
@media print {
  /*
   * Nothing above the drawing goes on the sheet.
   *
   * The stepper, the question that opens the step and the arrow picker are all
   * ways of getting to a result rather than parts of one — a printed page is
   * where you already are, so navigation on it is noise. The sheet starts with
   * the drawing.
   */
  .app-header,
  .sidebar,
  .stepper,
  .prompt,
  #ask,
  #vectors,
  .vectors,
  .segmented,
  .transport,
  /* The host as well as the bar: it also carries the transport's hint line,
     which would otherwise print on its own with nothing to belong to. */
  #transport,
  .stage-tools,
  .btn,
  .info,
  .info__bubble,
  .toast,
  .modal-backdrop { display: none !important; }

  html, body { height: auto; background: #fff; color: #000; }
  body { display: block; }

  .app-main { display: block; }
  .viewport { display: block; padding: 0; overflow: visible; }
  .viewport__stage {
    border: none;
    padding: 0;
    background: #fff;
    break-inside: avoid;
    min-height: 0;
  }
  .viewport__stage svg { max-width: 100% !important; }

  .readout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5mm;
    margin-top: 5mm;
    break-inside: avoid;
  }
  .stat, .panel, .explain, .disclosure, .graph__canvas, .compare-row { border-color: #999; box-shadow: none; }

  .graph { break-inside: avoid; margin-top: 5mm; }
  .graph__canvas svg { max-width: 100% !important; }

  /* The teaching panels are the point of the sheet, so they print open. */
  .explain, .disclosure { break-inside: avoid; margin-top: 4mm; }
  .explain > .explain__body,
  .disclosure > .disclosure__body { display: block !important; }
  .explain > summary, .disclosure > summary { font-weight: 700; }
  .explain__formula, .explain__worked { background: #f4f4f4; border-color: #999; }
  .kind { border-left-color: #666; }
  .numbers__row { background: #f8f8f8; border-color: #999; }

  .table th, .table td { border-color: #999; }
  .banner, .approx-flag { border-color: #999; background: #fff; color: #000; }

  .app-footer {
    border-top: 1px solid #999;
    color: #444;
    margin-top: 5mm;
  }

  @page { margin: 12mm; }
}

/* ------------------------------------------------------------------------
 * What appears only on paper, and what can be left off it.
 *
 * The classes are put on <body> just before printing and taken off after, so
 * nothing about the screen depends on them.
 * ---------------------------------------------------------------------- */
.print-only { display: none; }

@media print {
  .print-only { display: block; }

  .print-summary { break-inside: avoid; margin-top: 6mm; }
  .print-summary__group { break-inside: avoid; margin-top: 4mm; }
  .print-summary__title {
    margin: 0 0 1mm;
    font-size: 10pt;
    font-weight: 700;
  }
  .print-summary .dims { margin: 0; }

  .print-no-drawing .viewport__stage,
  .print-no-drawing #legend,
  .print-no-drawing #vectors { display: none !important; }
  .print-no-inputs .print-summary { display: none !important; }
  .print-no-measurements .measurements { display: none !important; }
  .print-no-graphs #graphs { display: none !important; }
  .print-no-working .explain-host,
  .print-no-working .banners { display: none !important; }
}

/* ------------------------------------------------------------------------
 * One section to a page.
 *
 * A forced break at the very start of the flow is ignored by the fragmenter,
 * so whichever section happens to be first — the drawing normally, the graphs
 * if the drawing has been switched off — does not leave a blank sheet in front
 * of it. Each of the others starts fresh.
 * ---------------------------------------------------------------------- */
@media print {
  #graphs,
  .measurements,
  .print-summary,
  .explain-host {
    break-before: page;
    page-break-before: always;    /* for older print engines */
  }

  /* The drawing and what it means stay together, and so does each graph. */
  .viewport__stage, #legend { break-inside: avoid; }
  #legend { break-before: avoid; margin-top: 3mm; }
  .banners { break-before: avoid; }
}