/* ============================================================
   CSR PHONE PLAYBOOK (contractor-csr-coaching.html only)
   Screen: print button + scorecard boxes. Print: only #playbook
   (the playbook steps + scorecard) goes on paper.
   ============================================================ */

.csr-print-row {
  margin-block: var(--space-6) var(--space-2);
}

.csr-print-only { display: none; }

/* Scorecard items get an empty box to tick, not the checkmark the
   diagnostic lists use. */
.diagnostic-body .csr-score-list li::before {
  content: '';
  top: 0.35em;
  width: 0.9em;
  height: 0.9em;
  border: 2px solid var(--color-primary);
  border-radius: 2px;
}
.diagnostic-body .csr-score-list li {
  padding-left: var(--space-8);
}

.csr-cta {
  margin-top: var(--space-10);
}

@media print {
  @page { margin: 16mm 14mm; }

  html, body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Only the body section prints; header, breadcrumb, hero, FAQ, CTA, footer,
     the mobile call bar and the subscribe pop-up are all left off. */
  body > *:not(.diagnostic-body) { display: none !important; }
  .diagnostic-body > .container > *:not(#playbook) { display: none !important; }

  .diagnostic-body {
    padding: 0 !important;
    background: #fff !important;
  }
  .diagnostic-body .container { max-width: none; padding: 0; }

  /* Scroll-reveal starts elements at opacity 0; on paper everything shows. */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .csr-print-only { display: block; }
  .csr-print-head {
    font-size: 9pt !important;
    color: #444 !important;
    border-bottom: 1px solid #999;
    padding-bottom: 4pt;
    margin-bottom: 10pt !important;
  }

  .diagnostic-body h2 {
    font-size: 16pt;
    color: #000;
    border-top: none;
    padding-top: 0;
    margin-block: 6pt 8pt;
  }
  .diagnostic-body h3 {
    font-size: 12pt;
    color: #000;
    margin-block: 10pt 4pt;
    break-after: avoid;
  }
  .diagnostic-body p,
  .diagnostic-body li {
    font-size: 10.5pt;
    line-height: 1.45;
    color: #000;
    margin-bottom: 4pt;
  }
  .diagnostic-body ul { margin-block: 4pt 6pt; }
  .diagnostic-body ul li::before { color: #000; }
  .diagnostic-body .csr-score-list li::before { border-color: #000; }

  .csr-step { break-inside: avoid; }
  .csr-scorecard { break-inside: avoid; break-before: page; }
}