/* Print rules for cards.html. Two artefacts come off this one page: an A5 lessons
   card and an A4 client report. */

/* Two page sizes in one stylesheet. A named page is the only way both can print
   correctly from the same file: the printable root carries a class, the class carries
   the page. Chrome honours it. A browser that does not falls back to A4, which is
   what the card printed on before, so nothing gets worse anywhere. */
@page { size: A4; margin: 14mm; }
@page a5card { size: A5; margin: 10mm; }
.page-a5 { page: a5card; }

@media print {
  .topbar, .screen-only, #tip { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  /* Poppins arrives over the network and a report is printed on a plane or in a
     school whose wi fi wants a login first. The stack falls straight through to the
     system face and the page prints: the type changes, nothing waits. */
  body, .a5, .report { font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; }

  /* ---- the A5 card ---- */
  .a5 { box-shadow: none; border-radius: 0; width: 100%; margin: 0; }
  .a5 .rule-ta { border: none; background: none; resize: none; }
  .a5 .clause-in { border: none; background: none; padding-left: 0; }
  /* An empty clause reference is not a card line, so it does not print. */
  .a5 .clause-row.empty { display: none; }

  /* ---- the A4 report ---- */
  .report { max-width: none; }
  .rpage {
    box-shadow: none; border-radius: 0; padding: 0 0 4mm 0; margin: 0;
    page-break-after: always; break-after: page;
  }
  .rpage:last-child { page-break-after: auto; break-after: auto; }
  /* Nothing that has to be read together is allowed to straddle a fold: a criterion
     and its evidence, a finding and its quote, a chart and its legend. */
  .rcrit, .rfind, .rchart-card, .rfig, table.dbt tr { page-break-inside: avoid; break-inside: avoid; }
  .rcover { min-height: 200mm; }
  /* The charts scroll on a phone and must not on paper. */
  .chart-scroll { overflow: visible; }
  .chart-scroll svg, .rchart svg { min-width: 0; }
  .rfoot { border-top: 1px solid #ccc; }
  img { max-width: 100%; }
  a { color: inherit; text-decoration: none; }
}