/* ============================================================
   bw-print.css
   Bone Wizardry pages, printed.

   Students print these and write on them, so the printed page is a
   study artifact rather than a screenshot of a website. Interactions
   that only work on screen print in their *answered* state so the
   sheet is still useful on paper.

   Load after bw-header.css and the page stylesheet.
   ============================================================ */

@media print {

  /* ---------- page setup ---------- */
  @page {
    size: A4 portrait;
    margin: 18mm 16mm 20mm;
  }
  @page :first { margin-top: 14mm; }

  :root {
    --p-ink:#101014;
    --p-ink2:#33333d;
    --p-ink3:#5a5a66;
    --p-line:#c9c9d2;
    --p-hair:#e3e3ea;
    --p-accent:#5b3fa8;
  }

  html, body {
    background:#fff !important;
    color:var(--p-ink) !important;
    font-size:10.5pt;
    line-height:1.5;
  }

  /* ---------- watermark: the solid mark, low and behind everything ---------- */
  body::before {
    content:"";
    position:fixed;
    top:50%; left:50%;
    width:120mm; height:120mm;
    transform:translate(-50%,-50%);
    background:var(--p-ink);
    -webkit-mask:url(/site/img/logo/bw-logo-mask.png) center/contain no-repeat;
            mask:url(/site/img/logo/bw-logo-mask.png) center/contain no-repeat;
    opacity:.045;
    z-index:0;
    pointer-events:none;
  }
  /* fallback for engines that ignore mask in print */
  @supports not (mask: url(#x)) {
    body::before {
      background:url(/site/img/logo/bw-logo-ink-512.png) center/contain no-repeat;
      -webkit-mask:none; mask:none;
    }
  }
  body > * { position:relative; z-index:1; }

  /* ---------- running header and footer on every sheet ---------- */
  .bw-print-head {
    display:block !important;
    position:fixed; top:-13mm; left:0; right:0;
    font-size:8pt; color:var(--p-ink3);
    border-bottom:.4pt solid var(--p-hair);
    padding-bottom:2mm;
  }
  .bw-print-head .bw-print-mark {
    display:inline-block; width:5mm; height:5mm; vertical-align:-1mm;
    margin-right:2mm; background:var(--p-ink);
    -webkit-mask:url(/site/img/logo/bw-logo-mask.png) center/contain no-repeat;
            mask:url(/site/img/logo/bw-logo-mask.png) center/contain no-repeat;
  }
  .bw-print-head .bw-print-topic { float:right; }

  .bw-print-foot {
    display:block !important;
    position:fixed; bottom:-15mm; left:0; right:0;
    font-size:7.5pt; color:var(--p-ink3);
    border-top:.4pt solid var(--p-hair);
    padding-top:2mm;
  }
  .bw-print-foot .bw-print-url { float:right; }

  /* ---------- hide the chrome ---------- */
  #hd-header, .hd-header, .cmd, #cmd, #stickyCta, .hd-drawer,
  .bw-skip, .guide, #bw-guide, #bw-preflight, #bw-module-locker,
  .hp-jump, .bw-btn, .top-actions, .cluecards-actions, .bw-actions,
  nav[aria-label="Footer"], .ftr-cols, .footer-cols,
  button.next, .beat .tap, .cmd-signin {
    display:none !important;
  }

  /* ---------- typography ---------- */
  h1 { font-size:20pt; line-height:1.15; margin:0 0 4mm; }
  h2 { font-size:13pt; line-height:1.2; margin:8mm 0 2mm;
       break-after:avoid; page-break-after:avoid; }
  h3 { font-size:11pt; margin:5mm 0 1.5mm; break-after:avoid; }
  p, li { orphans:3; widows:3; }
  a { color:var(--p-ink) !important; text-decoration:none; }
  /* print the destination for external links only */
  main a[href^="http"]::after {
    content:" (" attr(href) ")";
    font-size:8pt; color:var(--p-ink3); word-break:break-all;
  }
  main a[href^="/"]::after { content:""; }

  /* ---------- sections keep together where they can ---------- */
  section, .bw-op, .bw-wt, .bw-card, .bw-ref, .bw-doc {
    break-inside:avoid-page; page-break-inside:avoid;
  }
  .sec { border:0; padding-top:0; margin-top:7mm; }
  .sec::before { display:none; }

  /* ---------- questions print answered and annotatable ---------- */
  .bw-op .row, .opt {
    border:.4pt solid var(--p-line) !important;
    background:none !important;
    padding:2mm 3mm; margin:0 0 1.5mm; border-radius:2mm;
  }
  .bw-op .row.correct, .opt.correct {
    border-color:var(--p-accent) !important;
    border-width:1pt !important;
  }
  .bw-op .row.correct::after, .opt.correct::after {
    content:"correct"; float:right;
    font-size:7.5pt; color:var(--p-accent);
  }
  .opt.mute, .opt.wrong { opacity:1 !important; }
  /* every explanation open on paper, there is nothing to click */
  .why, .teach, .teach > div, .teach-in, .beat .ar, details .bw-disclose-body,
  details[class] > *:not(summary) {
    display:block !important; height:auto !important;
    max-height:none !important; opacity:1 !important;
    visibility:visible !important; overflow:visible !important;
  }
  details { border-bottom:.4pt solid var(--p-hair); }
  details > summary { list-style:none; font-weight:600; }
  details > summary::after { display:none !important; }

  /* ---------- the walkthrough prints every case, not one at a time ---------- */
  .bw-wt .head .b { display:none; }
  .bw-wt article { break-inside:avoid-page; }

  /* ---------- writing room ---------- */
  .bw-print-notes {
    display:block !important;
    break-before:page; page-break-before:always;
  }
  .bw-print-notes h2 { margin-top:0; }
  .bw-print-notes .bw-print-lines {
    background-image:repeating-linear-gradient(
      to bottom, transparent 0, transparent 9mm, var(--p-hair) 9mm, var(--p-hair) 9.2mm);
    height:200mm;
  }

  /* ---------- trust block prints in full ---------- */
  .bw-endmatter { break-before:auto; margin-top:8mm; padding-top:4mm;
                  border-top:.4pt solid var(--p-line); }
  .bw-doc-photo { filter:grayscale(1); }
  .bw-ref-title { color:var(--p-ink) !important; }
  .bw-ref-meta cite { font-style:italic; }

  /* ---------- flatten anything still dark ---------- */
  .bw-card, .bw-op, .bw-wt, .cc-card, .method-beat, .ticket-plan,
  .hex, .bw-quote, .proof-slide {
    background:none !important;
    box-shadow:none !important;
    border-color:var(--p-line) !important;
    color:var(--p-ink) !important;
  }
  img { max-width:100% !important; break-inside:avoid; }
  svg { max-width:100%; }
}

/* the print-only furniture is invisible on screen */
.bw-print-head, .bw-print-foot, .bw-print-notes { display:none; }