/* ============================================
   RateCompas — print stylesheet
   Screen: hide .print-only content, style the Save as PDF button
   Print: allowlist approach — hide everything by default, then
   explicitly show only the results tree.
   ============================================ */

/* ---- Screen: default-hide print-only content ---- */
.print-only {
  display: none;
}

/* ---- Screen: Save as PDF button ---- */
.print-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 1rem;
}

.print-btn {
  background: #ffffff;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.print-btn:hover {
  border-color: var(--text-muted);
  color: var(--text);
}

.print-btn::before {
  content: "↓";
  font-weight: 600;
  opacity: 0.75;
}

/* ============================================
   Print rules — allowlist approach
   ============================================ */
@media print {
  @page {
    size: letter;
    margin: 0.6in;
  }

  /* ---- STEP 1: Hide every direct child of body ---- */
  /* This kills nav, breadcrumb container, hero, rates banners, mini-payoff
     prompt, cross-link boxes, footer, script tags — everything. */
  body > * {
    display: none !important;
  }

  /* ---- STEP 2: Show only the analyzer-wrap (container of #results) ---- */
  body > .analyzer-wrap {
    display: block !important;
  }

  /* ---- STEP 3: Inside analyzer-wrap, hide everything, then show #results ---- */
  /* This hides the form, the section-labels, the "Run the Numbers" button,
     the debt-row table, all input fields, etc. */
  .analyzer-wrap > * {
    display: none !important;
  }
  .analyzer-wrap > .results,
  .analyzer-wrap > #results {
    display: block !important;
  }

  /* ---- STEP 4: Inside #results, hide only the pieces that shouldn't print ---- */
  #results .print-actions,
  #results #spinner,
  #results .spinner,
  #results #mini-payoff {
    display: none !important;
  }
  /* Matched-lenders section (the whole result-section wrapping the grid) */
  #results .result-section:has(.lenders-grid) {
    display: none !important;
  }
  /* Inline promo boxes (e.g., "Want to pay it off faster?" amber box) */
  #results > div[style*="background:#fffbeb"],
  #results > div[style*="background: #fffbeb"] {
    display: none !important;
  }

  /* ---- STEP 5: Ensure print-only blocks actually render ---- */
  .print-only {
    display: block !important;
  }

  /* ---- Body + container reset ---- */
  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .analyzer-wrap {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ---- Convert dark-gradient banners to print-safe bordered blocks ---- */
  .rec-banner,
  .savings-banner,
  .trap-viz {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 0.85rem 1.25rem !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .rec-verdict {
    font-size: 16pt !important;
  }
  .savings-banner,
  .result-section {
    margin-top: 0.65rem !important;
  }
  .rec-banner *,
  .savings-banner *,
  .trap-viz * {
    color: #000000 !important;
  }

  /* Preserve meaningful verdict / accent colors */
  .rec-banner.yes .rec-verdict,
  .savings-banner-value,
  .comp-stat-value.green,
  .ss-value.green,
  .path-stat-value.green {
    color: #15803d !important;
  }
  .rec-banner.no .rec-verdict,
  .comp-stat-value.red,
  .ss-value.red,
  .path-stat-value.red {
    color: #b91c1c !important;
  }
  .rec-banner.maybe .rec-verdict {
    color: #b45309 !important;
  }

  /* Keep multi-column grids at two columns in print */
  .comparison,
  .compare-grid,
  .comparison-grid,
  .savings-summary,
  .metrics-grid,
  .three-col-results {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  /* Page-break hygiene */
  .metric-card,
  .result-section,
  .comp-card,
  .cmp-card,
  .path-card,
  .ss-card,
  .rec-banner,
  .savings-banner,
  .be-strip,
  .shock-callout,
  .ai-text,
  #r-ai {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Force-show AI text even if analyze() hasn't run (inline display:none) */
  .ai-text {
    display: block !important;
  }

  /* Widen bar-row labels so multi-word phrases ("Principal & int.") stay on
     one line. Screen width (72px) is too narrow once the page is 11pt print. */
  .bar-row {
    gap: 1rem !important;
  }
  .bar-label {
    width: auto !important;
    min-width: 130px !important;
    white-space: nowrap !important;
  }

  /* ---- Print-only: header ---- */
  .print-header {
    margin-bottom: 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid #0f172a;
  }
  .print-header h1 {
    font-family: var(--font-display);
    font-size: 18pt !important;
    margin: 0 0 4pt;
    color: #0f172a !important;
  }
  .print-header p {
    font-size: 9pt;
    color: #64748b !important;
    margin: 0;
  }

  /* ---- Print-only: disclaimer ---- */
  .print-disclaimer {
    margin: 1rem 0;
    padding-top: 0.5rem;
    border-top: 1px solid #cbd5e1;
    font-size: 8.5pt;
    color: #555 !important;
    line-height: 1.5;
  }
  .print-disclaimer p {
    margin: 0;
    color: #555 !important;
  }

  /* ---- Print-only: footer ---- */
  .print-footer {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid #cbd5e1;
    font-size: 8.5pt;
    color: #666 !important;
    text-align: center;
    page-break-inside: avoid;
  }
  .print-footer p {
    margin: 0;
    color: #666 !important;
  }

  /* ---- Link cleanup: neutralize colors, suppress URL-after-link ---- */
  a, a:link, a:visited {
    color: #000000 !important;
    text-decoration: none !important;
  }
  a[href]::after {
    content: "" !important;
  }
}