/* ==========================================================================
   print.css — the printable document, and nothing else.

   js/export-adapters/print.js builds #printDoc, writes the report model into
   it and calls window.print(). This is the other half: on screen the surface
   does not exist, and on paper it IS the page.

   WHY A SEPARATE SURFACE RATHER THAN PRINT RULES OVER THE APPLICATION

   Hiding the chrome with @media print and printing the running screen sounds
   cheaper and is not. The grid is inside a scroll container, so it prints
   clipped at the container's width; a twenty-column table has no page-break
   behaviour; the filter bar prints as a row of empty select boxes; and every
   panel prints its ⋯, its Columns control and its Hot Fix button because
   they are children of the thing being printed.

   So the printed document is a DIFFERENT ELEMENT built from the report
   model. Inside @media print the application shell is display:none — the
   chrome is not hidden, it is not in the document at all — and #printDoc is
   the only thing the printer sees.

   COLOUR still comes from tokens, but from a deliberately unthemed set.
   Paper is white whichever theme the operator is working in, and a
   dark-theme report would print as a sheet of ink — so the --tn-paper-*
   tokens are declared once on :root in css/themes.css rather than twice in
   the theme blocks, and are read only from inside the @media print block
   below. Nothing on screen can reach them.
   ========================================================================== */

/* On screen the surface is not shown at all. It exists between build() and
   afterprint and must never flash into the layout. */
.print-doc {
  display: none;
}

/* ==========================================================================
   THE PRINTED PAGE
   ========================================================================== */
@media print {

  /* NOTHING ON PAPER IS MID-ANIMATION.

     themes.css transitions the background of the large planes so switching
     theme feels deliberate; that transition also fires when the print
     stylesheet takes over, and a printer that samples during it prints a
     colour that is on the way to being right. A printed page is one frame,
     so there are no frames. */
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  /* The application is not printed. Not dimmed, not collapsed — absent. */
  .app-shell,
  .dlg-layer,
  .tour-layer,
  .tour-mark,
  .toast-stack,
  .action-menu,
  .action-menu__scrim,
  .popover-menu,
  .drawer,
  .skip-link {
    display: none !important;
  }

  /* .tn-body is named as well as body: the application paints the shell
     background through the class, which outranks a bare element selector,
     and a printed report on the workspace grey is a page of toner nobody
     asked for. */
  html,
  body,
  body.tn-body {
    height: auto;
    overflow: visible;
    background: var(--tn-paper);
    color: var(--tn-paper-ink);
  }

  .print-doc {
    display: block;
    padding: 0;
    background: var(--tn-paper);
    color: var(--tn-paper-ink);
    font-family: var(--tn-font-sans);
    font-size: 9pt;
    line-height: 1.35;
  }

  @page {
    margin: 14mm 12mm;
  }

  /* ---- the report head ---- */
  .print-head {
    margin-bottom: 10pt;
    padding-bottom: 8pt;
    border-bottom: 1pt solid var(--tn-paper-edge);
  }

  .print-head__brand {
    font-size: 13pt;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .print-head__title {
    margin: 2pt 0 0;
    font-size: 12pt;
    font-weight: 600;
  }

  .print-head__sub {
    margin: 2pt 0 0;
    color: var(--tn-paper-muted);
    font-size: 9pt;
  }

  /* The filters and the operating context, as metadata. Two columns so a
     dozen of them do not push the first table onto page two. */
  .print-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1pt 18pt;
    margin-top: 7pt;
  }

  .print-meta__item {
    font-size: 8pt;
  }

  .print-meta__label {
    color: var(--tn-paper-muted);
  }

  .print-meta__label::after {
    content: ": ";
  }

  .print-meta__value {
    font-weight: 600;
  }

  /* ---- a section ---- */
  .print-section {
    margin-top: 12pt;
    /* a heading never prints alone at the foot of a page */
    break-inside: auto;
    break-after: auto;
  }

  .print-section__title {
    margin: 0 0 4pt;
    font-size: 10pt;
    font-weight: 600;
    break-after: avoid;
  }

  .print-section__count {
    margin-left: 8pt;
    color: var(--tn-paper-muted);
    font-size: 8pt;
    font-weight: 400;
  }

  .print-section__sub {
    margin: 0 0 4pt;
    color: var(--tn-paper-muted);
    font-size: 8pt;
    break-after: avoid;
  }

  /* ---- the table ---- */
  .print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 7.5pt;
  }

  .print-table th,
  .print-table td {
    padding: 2.5pt 4pt;
    border: 0.5pt solid var(--tn-paper-rule);
    text-align: left;
    vertical-align: top;
    word-break: break-word;
  }

  .print-table thead th {
    background: var(--tn-paper-band);
    font-weight: 600;
  }

  /* The header repeats when a table runs over a page, and a row is never
     split across two. */
  .print-table thead {
    display: table-header-group;
  }

  .print-table tfoot {
    display: table-footer-group;
  }

  .print-table tr {
    break-inside: avoid;
  }

  .print-table tfoot td {
    background: var(--tn-paper-band);
    font-weight: 600;
  }

  /* Matched on the cell rather than on the class alone: the rule above is
     `.print-table th, .print-table td`, which outranks a bare `.print-num`
     and left every figure ranged left on paper. */
  .print-table th.print-num,
  .print-table td.print-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .print-empty {
    color: var(--tn-paper-muted);
    text-align: center;
  }

  .print-foot {
    margin-top: 12pt;
    padding-top: 6pt;
    border-top: 0.5pt solid var(--tn-paper-rule);
    color: var(--tn-paper-muted);
    font-size: 7.5pt;
  }
}