/* public/assets/css/print_doc.css -- the ONE look for every results printout.
 *
 * 2026-10-14 (Joe: "check that all pdf printouts now have the same
 * formatting"). Every PDF in the app is the browser's own Print / Save as PDF;
 * each printout used to carry its own fonts, sizes and colours. They now share
 * this file:
 *
 *   band-test.php                    banded level test (public link)
 *   activities/_shared/endScreen.js  activity session records (via runtime/_page.php)
 *   runners/crosswordRunner.js       crossword result       (via runtime/_page.php)
 *   assets/js/landing/tt_weekly.js   weekly speaking check  (landing/lv2/_head.php, media=print)
 *   teacher/mobile/lessonPlans.js    lesson plan (own window, linked)
 *   _account_export.php              data export (a downloaded file, so INLINED, print only)
 *
 * NOT here, by design: certificate.php, training/certificate.php and report.php
 * are formal documents with their own navy/serif design.
 *
 * Markup:
 *   <div class="pd">
 *     <div class="pd-brand">d<em>AI</em>ologue <small>Kind of record</small></div>
 *     <h1>Title</h1>
 *     <p class="pd-sub">date · other facts</p>
 *     <div class="pd-sum"><div><b>67%</b>Score</div>...</div>
 *     <table>...</table>   (.ok / .mid / .no colour a result cell)
 *     <h2>Section</h2> ...
 *     <p class="pd-foot">small print</p>
 *   </div>
 *
 * Print-only record inside an app page: give the .pd the class pd-print, make
 * it a DIRECT CHILD OF <body>, and add the class pd-has-print to <html>. Then
 * on paper everything else is display:none (never visibility:hidden -- that
 * keeps the hidden page's space and gave blank pages), and the app shell's
 * html,body { height:100%; overflow:hidden } (dashboard.css, student.css) is
 * undone, which otherwise clips the printout to page 1.
 */

.pd {
  color: #111; background: #fff;
  font: 11pt/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pd .pd-brand { font-size: 12pt; font-weight: 700; letter-spacing: -.01em; margin: 0 0 6pt; }
.pd .pd-brand em { font-style: normal; color: #4f46e5; }
.pd .pd-brand small { font-size: 9.5pt; font-weight: 600; color: #555; margin-left: 3pt; }
.pd h1 { font-size: 17pt; line-height: 1.2; font-weight: 700; margin: 0 0 2pt; }
.pd .pd-sub { font-size: 10pt; color: #555; margin: 0 0 12pt; }
.pd .pd-sum { display: flex; flex-wrap: wrap; gap: 8pt; margin: 0 0 12pt; }
.pd .pd-sum > div { border: 1px solid #ccc; border-radius: 6pt; padding: 5pt 10pt; font-size: 9pt; color: #444; break-inside: avoid; }
.pd .pd-sum b { display: block; font-size: 14pt; color: #111; }
.pd h2 { font-size: 12pt; font-weight: 700; margin: 14pt 0 4pt; break-after: avoid; }
.pd table { width: 100%; border-collapse: collapse; font-size: 10pt; margin: 0 0 10pt; }
.pd thead { display: table-header-group; }   /* repeat the header row on every page */
.pd th, .pd td { border-bottom: 1px solid #ddd; padding: 4pt 5pt; text-align: left; vertical-align: top; }
.pd th { font-size: 8.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #555; border-bottom-color: #999; }
.pd tr { break-inside: avoid; }
.pd ul { margin: 0 0 8pt; padding-left: 16pt; }
.pd li { margin: 0 0 2pt; break-inside: avoid; }
.pd .ok  { color: #047857; font-weight: 700; }
.pd .mid { color: #b45309; font-weight: 700; }
.pd .no  { color: #b91c1c; font-weight: 700; }
.pd .pd-muted { color: #777; }
.pd .pd-foot { margin-top: 12pt; font-size: 8.5pt; color: #666; }

.pd-print { display: none; }

@media print {
  @page { size: A4 portrait; margin: 14mm; }
  html.pd-has-print, html.pd-has-print body {
    height: auto !important; min-height: 0 !important; overflow: visible !important;
    background: #fff !important; padding: 0 !important; margin: 0 !important;
  }
  html.pd-has-print body::before, html.pd-has-print body::after { display: none !important; }
  html.pd-has-print body > *:not(.pd-print) { display: none !important; }
  html.pd-has-print .pd-print { display: block !important; }
}