/* ============================================================
   Canary Modern Theme — print.css
   Print-optimized styles for Canary Pilot Setup Guide
   Linked as: <link rel="stylesheet" media="print" href="css/print.css">
   ============================================================ */

@media print {

  /* ── Page Setup ──────────────────────────────────────────── */
  @page {
    size: letter portrait;
    margin: 0.6in 0.7in 0.6in 0.7in;
  }

  /* ── Selective Reset (preserve visual hierarchy) ────────── */
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  /* Neutralize premium visual polish for print */
  body::after {
    display: none !important;
  }

  .fade-in-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* ── Typography ────────────────────────────────────────── */
  body {
    font-size: 10pt;
    line-height: 1.35;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  /* ── Content Area: Full Width ──────────────────────────── */
  .content-area {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ── Hide Interactive / Navigation Elements ────────────── */
  .canary-header,
  .journey-rail,
  .guide-intro,
  .milestone-transition,
  .cta-next,
  .print-btn,
  .verification-block,
  .celebration,
  .action-row,
  .troubleshoot-panel,
  .screen-only {
    display: none !important;
  }

  /* ── Override JS inline styles: show ALL steps ─────────── */
  .step-section {
    display: block !important;
    opacity: 1 !important;
  }

  /* Hide JS-injected collapsed/upcoming bars */
  .step-collapsed,
  .step-upcoming {
    display: none !important;
  }

  /* Hide JS-injected action buttons, help panels, meta labels */
  .step-actions,
  .step-help-panel,
  .step-active-meta {
    display: none !important;
  }

  /* Remove active step border styling */
  .step-section.step-active {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
  }

  /* ── Victory Screen: reset for print ─────────────────── */
  .victory-screen {
    background: #ffffff !important;
  }

  .victory-screen .step-label,
  .victory-screen .step-title,
  .victory-screen .step-desc,
  .victory-screen .check-item-text {
    color: #000000 !important;
  }

  /* ── Hide Step Checkboxes ──────────────────────────────── */
  .step-check-box {
    display: none !important;
  }

  .step-check {
    cursor: default !important;
    margin-bottom: 1pt;
  }

  /* ── Reset Completed State (print always shows unchecked) ── */
  .step-section.completed {
    opacity: 1 !important;
  }

  .check-item.checked .check-item-text {
    color: #000000 !important;
    text-decoration: none !important;
  }

  .check-item.checked .check-circle {
    background: #ffffff !important;
    border-color: #000000 !important;
    box-shadow: none !important;
  }

  .check-item.checked .check-circle::after {
    display: none !important;
  }

  /* ── Hide Choice Card Interactive Elements ─────────────── */
  .choice-card-hint,
  .choice-card-arrow {
    display: none !important;
  }

  /* ── Hide Choice Selectors (content shown via mount-option) */
  #display-mount-choices,
  #waterproof-choices {
    display: none !important;
  }

  /* ── Show ALL Conditional Content ──────────────────────── */
  .mount-option {
    display: block !important;
  }

  /* Label each conditional block */
  .mount-option[data-display="cyl"]::before {
    content: "If cylindrical post:";
    display: block;
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555555 !important;
    margin: 8pt 0 2pt;
    padding-top: 4pt;
    border-top: 0.5pt solid #cccccc;
  }

  .mount-option[data-wp="tape"]::before {
    content: "Option A — Waterproof tape:";
    display: block;
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555555 !important;
    margin: 8pt 0 2pt;
  }

  .mount-option[data-wp="heatshrink"]::before {
    content: "Option B — Heatshrink tubing:";
    display: block;
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555555 !important;
    margin: 8pt 0 2pt;
    padding-top: 4pt;
    border-top: 0.5pt solid #cccccc;
  }

  /* ── Section Dividers: Hide ────────────────────────────── */
  .section-divider {
    display: none !important;
  }

  /* ── Print Header ──────────────────────────────────────── */
  .print-header {
    display: block !important;
    border-bottom: 1.5pt solid #000000;
    padding-bottom: 4pt;
    margin-bottom: 8pt;
  }

  .print-header .print-variant {
    font-size: 8pt;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #555555 !important;
    margin-bottom: 1pt;
  }

  .print-header .print-title {
    font-size: 14pt;
    font-weight: 800;
    color: #000000 !important;
    margin-bottom: 2pt;
  }

  .print-header .print-source {
    font-size: 7pt;
    color: #555555 !important;
  }

  /* ── Step Labels & Titles ──────────────────────────────── */
  .step-label {
    font-size: 7pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #666666 !important;
    margin-bottom: 1pt;
  }

  .step-title {
    font-size: 12pt;
    font-weight: 700;
    color: #000000 !important;
    margin-bottom: 2pt;
  }

  .step-desc {
    font-size: 9pt;
    color: #333333 !important;
    margin-bottom: 2pt;
  }

  /* ── Step Sections: Flow Naturally ─────────────────────── */
  .step-section {
    page-break-before: auto;
    page-break-inside: auto;
    padding: 0;
    margin-bottom: 10pt;
    border-bottom: 0.5pt solid #dddddd;
    padding-bottom: 6pt;
  }

  .step-section:last-child {
    border-bottom: none;
  }

  .step-header {
    margin-bottom: 4pt;
    page-break-after: avoid;
  }

  /* ── Deliberate Page Break Before Mounting ─────────────── */
  .print-break-before {
    page-break-before: always;
  }

  /* ── Major Section Separators ──────────────────────────── */
  #nest .step-header,
  #display .step-header,
  #cameras .step-header,
  #final-check .step-header {
    border-top: 1.5pt solid #000000;
    padding-top: 6pt;
    margin-top: 4pt;
  }

  /* ── Instruction Cards ─────────────────────────────────── */
  .instruction-card {
    background: #ffffff !important;
    border-left: 2pt solid #333333 !important;
    border-radius: 0 !important;
    padding: 5pt 8pt;
    margin: 4pt 0;
    page-break-inside: auto;
  }

  .instruction-card h4 {
    font-size: 9pt;
    font-weight: 700;
    color: #000000 !important;
    margin-bottom: 2pt;
  }

  .instruction-card p,
  .instruction-card li {
    font-size: 8.5pt;
    color: #222222 !important;
    line-height: 1.35;
  }

  /* ── Steps List (numbered items) ───────────────────────── */
  .steps-list li {
    margin-bottom: 2pt !important;
    font-size: 8.5pt !important;
    line-height: 1.35 !important;
  }

  .steps-list li .step-num {
    min-width: 16pt !important;
    width: 16pt !important;
    height: 16pt !important;
    font-size: 7.5pt !important;
    line-height: 16pt !important;
    flex-shrink: 0;
  }

  /* ── Warning Box ───────────────────────────────────────── */
  .warning-box {
    background: #fff8e1 !important;
    border: 0.75pt solid #d4a017 !important;
    border-left: 2.5pt solid #d4a017 !important;
    border-radius: 0 !important;
    padding: 4pt 8pt;
    margin: 4pt 0;
    page-break-inside: avoid;
    font-size: 8.5pt;
  }

  .warning-box p,
  .warning-box span {
    color: #5a4400 !important;
    font-size: 8.5pt;
  }

  /* ── Success Box ───────────────────────────────────────── */
  .success-box {
    background: #f0f9f0 !important;
    border: 0.75pt solid #4a8c4a !important;
    border-left: 2.5pt solid #4a8c4a !important;
    border-radius: 0 !important;
    padding: 4pt 8pt;
    margin: 4pt 0;
    page-break-inside: avoid;
    font-size: 8.5pt;
  }

  .success-box p,
  .success-box span {
    color: #1e4620 !important;
    font-size: 8.5pt;
  }

  /* ── Gather Box ────────────────────────────────────────── */
  .gather-box {
    background: #faf8f0 !important;
    border: 0.75pt solid #d4c88c !important;
    border-radius: 0 !important;
    padding: 4pt 8pt;
    margin: 4pt 0;
    page-break-inside: avoid;
  }

  .gather-label {
    font-size: 7pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #666666 !important;
    margin-bottom: 2pt;
  }

  .gather-items {
    gap: 3pt;
  }

  .gather-item {
    background: #ffffff !important;
    border: 0.75pt solid #c0b878 !important;
    border-radius: 0 !important;
    padding: 1pt 5pt;
    font-size: 8pt;
    color: #000000 !important;
  }

  /* ── Note/Info Box ─────────────────────────────────────── */
  .note-box {
    background: #f0f4ff !important;
    border: 0.75pt solid #b0c0e0 !important;
    border-left: 2.5pt solid #6080c0 !important;
    border-radius: 0 !important;
    padding: 4pt 8pt;
    margin: 4pt 0;
    page-break-inside: avoid;
    font-size: 8.5pt;
  }

  .note-box p,
  .note-box span {
    color: #3a4a6b !important;
    font-size: 8.5pt;
  }

  /* ── Figure Cards (Images) ─────────────────────────────── */
  .figure-card {
    margin: 6pt auto !important;
    max-width: 220pt !important;
    border: 0.75pt solid #cccccc !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    page-break-inside: avoid;
  }

  .figure-card img {
    max-height: 200pt !important;
    object-fit: contain !important;
    width: 100% !important;
  }

  .figure-card figcaption {
    padding: 2pt 6pt !important;
    font-size: 7pt !important;
    color: #666666 !important;
    border-top: 0.5pt solid #dddddd;
    text-align: center;
  }

  /* ── Choice Cards (print as labels, not interactive) ───── */
  .choice-card {
    background: #ffffff !important;
    border: 0.75pt solid #aaaaaa !important;
    border-radius: 0 !important;
    padding: 3pt 8pt;
    margin: 2pt 0;
    page-break-inside: avoid;
    cursor: default !important;
  }

  .choice-card-title {
    font-size: 9pt !important;
    font-weight: 700 !important;
  }

  .choice-card-desc {
    font-size: 8pt !important;
    color: #555555 !important;
  }

  /* ── Check Items (Final Checklist) ─────────────────────── */
  #checklist {
    page-break-inside: avoid;
    margin: 6pt 0 !important;
  }

  .check-item {
    padding: 3pt 0 !important;
    gap: 6pt;
    border-bottom: 0.5pt solid #e0e0e0;
    cursor: default !important;
  }

  .check-item:last-child {
    border-bottom: none;
  }

  .check-circle {
    width: 14pt !important;
    height: 14pt !important;
    min-width: 14pt !important;
    border: 1pt solid #000000 !important;
    background: #ffffff !important;
    cursor: default !important;
  }

  .check-item-text {
    font-size: 9pt;
    color: #000000 !important;
  }

  /* ── Links: show URLs inline ───────────────────────────── */
  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 7pt;
    color: #555555 !important;
    word-break: break-all;
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: '';
  }

  /* ── Prevent Orphans & Widows ──────────────────────────── */
  p {
    orphans: 3;
    widows: 3;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    orphans: 3;
    widows: 3;
    color: #000000 !important;
  }

  /* ── Print-only Help / Contact Section ────────────────── */
  .print-help {
    display: block !important;
    border-top: 1.5pt solid #000000;
    padding-top: 8pt;
    margin-top: 16pt;
    page-break-inside: avoid;
  }

  .print-help h3 {
    font-size: 11pt;
    font-weight: 700;
    color: #000000 !important;
    margin: 0 0 6pt;
  }

  .print-help p {
    font-size: 9pt;
    color: #333333 !important;
    margin: 0 0 3pt;
    line-height: 1.4;
  }

  .print-help a::after {
    content: '' !important;
  }

  .print-help-methods {
    display: flex;
    gap: 24pt;
    align-items: flex-start;
    margin-top: 6pt;
  }

  .print-help-method {
    flex: 1;
  }

  .print-help-method h4 {
    font-size: 9pt;
    font-weight: 700;
    color: #000000 !important;
    margin: 0 0 2pt;
  }

  .print-help-method p {
    font-size: 8.5pt;
    margin: 0;
  }

  .print-help-qr {
    width: 72pt;
    height: 72pt;
  }

  .print-help-qr-label {
    font-size: 7pt;
    color: #666666 !important;
    text-align: center;
    margin-top: 2pt;
  }

  /* ── Utility spacing overrides ─────────────────────────── */
  .mt-12 {
    margin-top: 6pt !important;
  }

  .mt-8 {
    margin-top: 4pt !important;
  }

} /* end @media print */

/* ============================================================
   Calibration guide (calibration.canaryaware.com) print fixes
   Added 2026-09-18: never split a visual block across pages;
   hide the interactive simulator on paper.
   ============================================================ */
@media print {
  figure, .stepshot, .holddemo, .panel, .alertkey, .tip, .monitor, .roles,
  .remember, .toast, .minitabs, .acts > li, ul.acts, img, svg {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  h2, h3, .chip {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }
  section#practice { display: none !important; }
  section:last-of-type, section:nth-last-of-type(2) {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}