/* ==========================================================================
   print.css — Pro Se Step Navigator
   Renders a clean, professional printed checklist.
   ========================================================================== */

@media print {
  /* ---------- Page setup ---------- */
  @page {
    margin: 1.5cm 2cm;
    size: letter portrait;
  }

  /* ---------- Base reset ---------- */
  *,
  *::before,
  *::after { box-sizing: border-box; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 10pt;
    line-height: 1.5;
  }

  a { color: #000 !important; text-decoration: underline; word-break: break-word; }

  /* ---------- Hide non-print elements ---------- */
  .top-bar,
  .skip-link,
  .focus-mode-exit,
  .toast-host,
  .btn-save-fav,
  .steps-toolbar,
  .step-actions-row,
  .step-note-wrap,
  .step-deadline-wrap,
  .wizard-nav,
  .panel-section,   /* help directory & mistakes panels */
  dialog.modal,
  .back-to-home,
  #btn-mark-all,
  #btn-clear-steps,
  #btn-clear-deadlines,
  #btn-print,
  #btn-share-steps,
  .migration-banner,
  .generic-warning,
  [id="back-to-home"],
  .fav-list { display: none !important; }

  /* ---------- Print header ---------- */
  .print-header {
    display: block !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14pt;
    font-weight: bold;
    border-bottom: 2pt solid #000;
    padding-bottom: 4pt;
    margin-bottom: 8pt;
  }

  /* ---------- Page header (court + action title) ---------- */
  .page-header {
    margin-bottom: 8pt;
    border-bottom: 0.5pt solid #ccc;
    padding-bottom: 6pt;
  }

  .page-header h1 {
    font-size: 13pt;
    margin: 0 0 2pt;
  }

  .steps-subtitle {
    font-size: 9pt;
    color: #555;
    margin: 0;
  }

  /* ---------- Disclaimer ---------- */
  .disclaimer-banner {
    display: block !important;
    border: 1pt solid #000;
    padding: 4pt 6pt;
    margin-bottom: 8pt;
    font-size: 8pt;
    font-style: italic;
    background: #fff !important;
    color: #000 !important;
  }

  /* ---------- Progress wrap — hide the visual bar, keep the text ---------- */
  .progress-wrap { margin-bottom: 8pt; }
  .progress-track { display: none !important; }
  #step-progress-fill { display: none !important; }
  .progress-header {
    font-size: 9pt;
    color: #555;
    display: flex;
    justify-content: space-between;
  }

  /* ---------- Steps list ---------- */
  .steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .step-item {
    display: flex;
    gap: 8pt;
    margin-bottom: 10pt;
    padding-bottom: 10pt;
    border-bottom: 0.5pt solid #ddd;
    page-break-inside: avoid;
    align-items: flex-start;
  }

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

  /* Checkbox square drawn with CSS */
  .step-item::before {
    content: '';
    flex-shrink: 0;
    width: 13pt;
    height: 13pt;
    border: 1.5pt solid #000;
    border-radius: 2pt;
    margin-top: 1pt;
    background: #fff;
    display: block;
  }

  /* Check mark for completed steps */
  .step-item.completed::before {
    content: '✓';
    font-size: 9pt;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
  }

  /* Overdue step — draw a small "!" marker */
  .step-item.deadline-overdue::before {
    border-color: #c0392b;
  }

  .step-number {
    flex-shrink: 0;
    width: 16pt;
    height: 16pt;
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7pt;
    font-weight: bold;
    font-family: Arial, sans-serif;
  }

  .step-body { flex: 1; min-width: 0; }

  .step-text {
    font-size: 10pt;
    margin: 0 0 3pt;
    color: #000;
    white-space: pre-line;
  }

  .step-source {
    display: block;
    font-size: 8pt;
    color: #444;
    margin-top: 2pt;
  }

  /* Print the href after source links */
  .step-source::after {
    content: ' (' attr(href) ')';
    font-size: 7.5pt;
    color: #666;
  }

  /* Deadline badge — keep visible on print */
  .deadline-badge {
    display: inline-block !important;
    font-size: 7.5pt;
    border: 0.5pt solid #666;
    padding: 0 3pt;
    border-radius: 2pt;
    color: #555;
    margin-bottom: 2pt;
  }

  .deadline-badge--overdue {
    border-color: #c0392b;
    color: #c0392b;
    font-weight: bold;
  }

  /* Hide step actions that don't print well */
  .step-actions-row,
  .step-note-wrap,
  .step-deadline-wrap { display: none !important; }

  /* ---------- Flow diagram — print the text list, drop the SVG + links ---------- */
  .flow-diagram {
    border: 0.5pt solid #000;
    padding: 4pt 6pt;
    margin-bottom: 8pt;
    page-break-inside: avoid;
  }
  .flow-diagram-title { font-size: 11pt; font-weight: bold; margin-bottom: 3pt; }
  .evict-timeline,
  .debt-timeline,
  .flow-links,
  .flow-fallback-lead { display: none !important; }
  .flow-fallback-list { font-size: 9.5pt; margin: 0; padding-left: 14pt; }

  /* ---------- Footer disclaimer (always prints) ----------
     .site-footer itself must NOT be display:none here — a hidden
     ancestor can't be overridden by a visible descendant, which is
     exactly why .footer-disclaimer's own !important never actually
     rendered before this fix. Only the two disclaimer paragraphs
     (legal-advice notice + unaffiliated-project notice) print; the
     in-app nav links and translation-service links serve no purpose
     on paper. */
  .site-footer {
    display: block !important;
    /* Reset the on-screen navy fill + white text (styles.css) — without
       this the footer printed as illegible white-on-navy. */
    background: none !important;
    color: #555 !important;
    margin: 12pt 0 0;
    padding: 6pt 0 0;
    border-top: 0.5pt solid #ccc;
  }
  .footer-links,
  .footer-langs { display: none !important; }
  .footer-disclaimer,
  .footer-unofficial {
    display: block !important;
    font-size: 7.5pt;
    color: #555;
    font-style: italic;
  }

  /* ---------- Page numbers ---------- */
  @page { @bottom-right { content: counter(page) " of " counter(pages); font-size: 8pt; } }
}