/* ==========================================================================
   PRINT — Jungle Safari Spelling Quest, Teacher Report
   Mourad Mekki Teacher Toolkit

   The screen is a jungle board game. The printout must not be. This sheet
   throws away the entire game chrome and rebuilds the report as a plain,
   ink-economical A4 document: one masthead, hairline rules, real tables with
   repeating headers, and a signature block.

   Two rules govern every choice below:
     1. Whitelist, never blacklist. Everything is hidden, then the report is
        put back. A new game screen can never leak into the paper again.
     2. Never depend on "Background graphics" being ticked in the print
        dialog. Structure comes from borders and type, which always print.
        Tints are a bonus, not the design.
   ========================================================================== */

@media print {

  /* ---------- 1. The page ---------- */
  @page {
    size: A4 portrait;
    margin: 16mm 14mm 15mm;
  }

  html, body {
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;

    /* Kill the jungle photograph, the dark overlay and the parallax. */
    background: #fff !important;
    background-image: none !important;
    background-attachment: initial !important;

    color: #14100a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 10pt;
    line-height: 1.42;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Decorative pseudo-layers: god-rays, night sky, vine corners. */
  body::before, body::after,
  .app-shell::before, .app-shell::after,
  .report-screen::before, .report-screen::after,
  .report-content::before, .report-content::after,
  .report-card::before, .report-card::after,
  .section-heading::before, .section-heading::after { content: none !important; display: none !important; }

  /* ---------- 2. Whitelist: hide the game, keep the report ---------- */
  body > *:not(#app) { display: none !important; }
  #app > *:not(.screen-root) { display: none !important; }
  .screen-root > *:not(.report-screen) { display: none !important; }

  /* Anything that survives on a technicality. */
  .topbar, .top-actions, .explorer-hud, .report-actions,
  .buddy, .campfire, .combo-meter, .coin-layer, .spark-layer,
  .safari-toast, .relic-pop, .gain-chip, .install-btn,
  .fx-fireflies, .fx-canvas, .bgfx-leaves, .bgfx-toast-layer, .bgfx-micro,
  .onboard-overlay, .shop-overlay, .studio-overlay, .battle-layer,
  .base-camp, .btn-ripple,
  button, .primary-btn, .secondary-btn, .ghost-btn, .danger-btn { display: none !important; }

  /* The on-screen report heading is replaced by the print masthead. */
  .report-screen > .section-heading { display: none !important; }

  #app, .app-shell, .screen-root, .report-screen, .report-content {
    display: block !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  /* Belt and braces: no motion, no glass, no glow on paper. */
  * {
    animation: none !important;
    transition: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }

  /* ---------- 3. Masthead ---------- */
  .print-only { display: block !important; }

  .print-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12mm;
    padding-bottom: 3mm;
    margin-bottom: 5mm;
    border-bottom: 1.4pt solid #14100a;
  }

  .print-head-title { max-width: 105mm; }

  .print-eyebrow {
    margin: 0 0 1mm;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6b6255;
  }

  .print-head h1 {
    margin: 0;
    font-size: 19pt;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #14100a;
  }

  .print-head .print-sub {
    margin: 1.5mm 0 0;
    font-size: 8.5pt;
    font-style: italic;
    color: #5d5548;
  }

  /* Right-hand identity block: label / value pairs on a hairline grid. */
  .print-meta {
    flex: 0 0 auto;
    border-collapse: collapse;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8pt;
  }
  .print-meta th {
    padding: 0.9mm 4mm 0.9mm 0;
    text-align: left;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b6255;
    white-space: nowrap;
  }
  .print-meta td {
    padding: 0.9mm 0;
    text-align: right;
    font-weight: 700;
    color: #14100a;
    white-space: nowrap;
  }

  /* ---------- 4. Section headings ---------- */
  .report-subhead,
  .report-card > h3 {
    font-family: Arial, Helvetica, sans-serif;
    color: #14100a !important;
    background: none !important;
  }

  .report-subhead {
    margin: 7mm 0 3mm;
    padding-bottom: 1.5mm;
    font-size: 11pt;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-bottom: 0.8pt solid #14100a;
    break-after: avoid;
    page-break-after: avoid;
  }

  .report-card > h3 {
    margin: 0 0 2mm;
    padding: 0 0 1.2mm;
    font-size: 9.5pt;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 0;
    border-bottom: 0.6pt solid #b8b0a2;
    break-after: avoid;
    page-break-after: avoid;
  }

  /* ---------- 5. Cards ---------- */
  .report-card {
    margin: 0 0 5mm;
    padding: 3.5mm 4mm 4mm;
    background: none !important;
    border: 0.6pt solid #cdc5b6 !important;
    border-radius: 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .report-card p { margin: 1.6mm 0; }
  .report-card p:last-child { margin-bottom: 0; }

  .recs-card ul { margin: 1.5mm 0 0; padding-left: 5mm; }
  .recs-card li { margin: 0 0 1.4mm; break-inside: avoid; }

  .report-note, .muted, .level-line {
    font-size: 8.5pt;
    color: #5d5548 !important;
  }
  .level-line { margin: 0 0 2mm !important; font-family: Arial, Helvetica, sans-serif; }

  .privacy-note {
    margin: 0 0 5mm;
    padding: 2mm 3mm;
    font-size: 8pt;
    font-style: italic;
    color: #3d4a3f !important;
    background: none !important;
    border: 0 !important;
    border-left: 2pt solid #2b7a4b !important;
    border-radius: 0 !important;
  }

  /* ---------- 6. Summary statistics ---------- */
  /* Hairline grid of figures — reads like a results table, not six bubbles. */
  .summary-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 !important;
    margin: 0 0 5mm;
    border: 0.6pt solid #cdc5b6;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .report-card .summary-grid { margin: 2mm 0 0; }

  .summary-item {
    display: block !important;
    padding: 2.6mm 3mm;
    background: none !important;
    border: 0 !important;
    border-right: 0.6pt solid #e0d9cc;
    border-bottom: 0.6pt solid #e0d9cc;
    border-radius: 0 !important;
    text-align: left;
  }
  .summary-item:nth-child(3n) { border-right: 0; }
  .summary-item:nth-last-child(-n+3) { border-bottom: 0; }

  .summary-item span {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b6255 !important;
  }
  .summary-item strong {
    display: block;
    margin-top: 0.6mm;
    font-size: 14pt;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #14100a !important;
  }
  .summary-item strong small { font-size: 8.5pt; font-weight: 400; color: #6b6255; }

  /* ---------- 7. Tables ---------- */
  .report-card table,
  .evidence-table,
  .pattern-card table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 8.8pt;
    background: none !important;
  }

  /* Headers repeat when a table runs onto a second sheet. */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr { break-inside: avoid; page-break-inside: avoid; }

  .report-card thead th {
    padding: 1.6mm 2.5mm;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 7.2pt;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    color: #14100a !important;
    background: #f2efe8 !important;
    border: 0 !important;
    border-top: 0.8pt solid #14100a !important;
    border-bottom: 0.8pt solid #14100a !important;
  }

  .report-card tbody td,
  .report-card tbody th {
    padding: 1.5mm 2.5mm;
    text-align: left;
    vertical-align: top;
    background: none !important;
    border: 0 !important;
    border-bottom: 0.5pt solid #e0d9cc !important;
  }
  .report-card tbody tr:last-child td { border-bottom: 0 !important; }

  /* Zebra tint is a nicety; the row rules above carry the structure alone. */
  .report-card tbody tr:nth-child(even) td { background: #faf8f4 !important; }

  .report-card tbody td:first-child { font-weight: 700; }
  .report-card tbody td:nth-child(2),
  .report-card tbody td:nth-child(3),
  .report-card tbody td:nth-child(4) { font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* Result verdicts: carried by weight + colour, both of which survive a
     black-and-white printer as light/medium/heavy grey. */
  .res-good { color: #1f6b40 !important; font-weight: 700; }
  .res-mid  { color: #8a6410 !important; font-weight: 700; }
  .res-bad  { color: #9c2f21 !important; font-weight: 700; }

  /* ---------- 8. Accuracy bars ---------- */
  .acc-bar {
    display: inline-block !important;
    width: 22mm;
    height: 2.4mm;
    margin-right: 1.5mm;
    vertical-align: middle;
    background: #fff !important;
    border: 0.5pt solid #8d857a !important;
    border-radius: 0 !important;
    overflow: hidden;
  }
  .acc-fill {
    display: block !important;
    height: 100%;
    border-radius: 0 !important;
    background: #6b6255 !important;
  }
  .acc-fill.high { background: #2b7a4b !important; }
  .acc-fill.mid  { background: #b0801f !important; }
  .acc-fill.low  { background: #9c2f21 !important; }

  /* ---------- 9. Word-by-word evidence grid ---------- */
  /* Two columns on screen; one full-width column on paper, because the
     evidence tables have five columns and must not be squeezed. */
  .report-grid {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }

  .empty-state {
    padding: 8mm 0;
    text-align: center;
    background: none !important;
    border: 0.6pt dashed #cdc5b6 !important;
  }

  /* ---------- 10. Signature block ---------- */
  .print-foot {
    margin-top: 8mm;
    padding-top: 3mm;
    border-top: 0.8pt solid #14100a;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .print-sign {
    display: flex;
    gap: 10mm;
    margin: 0 0 3mm;
  }
  .print-sign > div { flex: 1; }
  .print-sign .line {
    height: 8mm;
    border-bottom: 0.6pt solid #8d857a;
  }
  .print-sign .cap {
    margin: 1.2mm 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b6255;
  }

  .print-colophon {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 7pt;
    letter-spacing: 0.03em;
    color: #8d857a;
  }

  /* ---------- 11. Widows, orphans, images ---------- */
  p, li { orphans: 3; widows: 3; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  img, svg, canvas, video { display: none !important; }

  a { color: inherit !important; text-decoration: none !important; }
}

/* The masthead and signature block exist in the DOM at all times so that the
   print engine never has to wait on JS. They are simply invisible on screen. */
.print-only { display: none; }