/* SortedCars — report print stylesheet
   =====================================
   Loaded with media="print" on /reports/result and /reports/free-car-check.
   The screen design is dark "Liquid Glass"; browsers strip backgrounds when
   printing, so without this sheet reports print near-white-on-white. This
   sheet flattens the report to an ink-friendly white/black document and
   re-adds ONLY the colours that carry meaning (plate, verdicts, badges).

   It is also the single source of truth for the server-generated PDF
   (workers/api/src/utils/report-pdf.js renders the same page via headless
   Chrome page.pdf(), which applies print CSS automatically).

   @page margin boxes (running header + "Page X of Y") are native in
   Chrome 131+ / Safari 18.2+ and safely ignored by older browsers. */

@page {
  size: A4;
  margin: 16mm 12mm 18mm;

  @top-left {
    content: "SortedCars \2014  sortedcars.co.uk";
    font-family: Inter, -apple-system, sans-serif;
    font-size: 8pt;
    color: #94a3b8;
  }
  /* @top-right (the registration) is injected per-report by the page JS. */
  @bottom-center {
    content: "Page " counter(page) " of " counter(pages);
    font-family: Inter, -apple-system, sans-serif;
    font-size: 8pt;
    color: #94a3b8;
  }
}

/* First page carries the on-page report header — no running header needed. */
@page :first {
  @top-left { content: ""; }
  @top-right { content: ""; }
}

@media print {

  /* ── 1. Page canvas ──────────────────────────────────────────────────── */

  /* The page canvas is painted from the COLOUR SCHEME, not from body's
     background, and site/style.css declares `color-scheme: dark` on :root for
     the screen design. So with "Background graphics" ticked, Chrome painted all
     ten pages near-black (RGB 18,18,18) — html and body computed white below it
     and the white never won, because it is not what fills the canvas.
     Ten pages of black ink per report.
     Declaring the light scheme for print is the fix; the backgrounds set below
     then land on white as intended. */
  :root, html, body { color-scheme: light !important; }

  html, body {
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 10.5pt;
  }

  /* ── 2. Hide everything that isn't the report ────────────────────────── */
  #bg-canvas,
  #header-placeholder,
  #footer-placeholder,
  .sc-hero,
  .sc-search,
  #landing-upsell,
  .rr-status,
  .rr-email,
  .scr-actions,
  .scr-report-foot,
  .sc-upgrade-card,
  .sc-email-card,
  .ai-disclaimer,
  #cookie-banner {
    display: none !important;
  }

  /* ── 3. Flatten the glass — everything in the report goes ink-friendly ─ */
  .sc-results, .sc-results *,
  #report-root, #report-root * {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
    color: #0f172a !important;
  }
  .sc-rpt-shell::after, .sc-rpt-card::after, .sc-rpt-verdict::after,
  .sc-rpt-facts::after, .sc-rpt-tl-cell::after,
  .scr-report::before, .scr-report::after,
  .scr-section::before, .scr-section::after {
    display: none !important;
  }

  /* NOTE: no `display` override here — the free-check skeleton shell stays
     inline-hidden on provenance reports and must stay hidden in print too. */
  .sc-results { padding: 0 !important; margin: 0 !important; }
  .sc-rpt-shell {
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Cards and boxed rows: white with light hairline borders. */
  .sc-rpt-card, .scr-section, .scr-detail-card, .scr-detail-cell,
  .scr-detail-item, .scr-guarantee-card, .scr-check-card, .scr-vehicle-card {
    background: #ffffff !important;
    border: 1px solid #dbe2ea !important;
  }
  .sc-rpt-fact, .sc-rpt-mot-stat, .sc-rpt-tl-cell {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
  }
  .sc-rpt-card h2 { border-bottom: 1px solid #e2e8f0 !important; }
  .sc-rpt-head { border-bottom: 1px solid #cbd5e1 !important; }
  .sc-mot-test { border-bottom: 1px solid #e2e8f0 !important; }

  /* Secondary text in grey — after the flatten so it wins on labels only. */
  .sc-rpt-fact .lbl, .sc-rpt-tl-cell .tl-label, .sc-rpt-mot-stat .lbl,
  .sc-rpt-meta, .sc-rpt-vehicle, .sc-mot-defects li,
  .sc-mot-meta, .sc-mot-plate, .sc-mot-defect-type,
  .sc-rpt-verdict-sub, .scr-verdict-text p,
  .sc-ogl-attribution, .sc-ogl-attribution a, .sc-rpt-attribution {
    color: #475569 !important;
  }
  .sc-rpt-meta strong { color: #0f172a !important; }
  a { color: #1d4ed8 !important; text-decoration: underline; }

  /* Brand words keep their colours in the report masthead. */
  .sc-rpt-brand .orange, .scr-brand .orange { color: #ff700a !important; }
  .sc-rpt-brand .blue, .scr-brand .blue { color: #2d6eef !important; }

  /* ── 4. Meaningful colour, force-printed ─────────────────────────────── */
  .sc-rpt-plate, .sc-rpt-plate-band, .sc-rpt-plate-text,
  .sc-rpt-verdict, .sc-rpt-verdict-icon, .sc-mot-badge, .sc-rpt-tl-cell,
  .rr-sandbox, .sc-rpt-no-guarantee, .scr-verdict-card {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .sc-rpt-plate { background: #ffd400 !important; border: 1px solid #c9a300 !important; }
  .sc-rpt-plate-band { background: #003399 !important; color: #ffffff !important; }
  .sc-rpt-plate-text { color: #000000 !important; }

  .sc-rpt-verdict.good { background: #f0fdf4 !important; border: 1px solid #86efac !important; }
  .sc-rpt-verdict.warn { background: #fefce8 !important; border: 1px solid #fde047 !important; }
  .sc-rpt-verdict.bad  { background: #fef2f2 !important; border: 1px solid #fca5a5 !important; }
  .sc-rpt-verdict.good .sc-rpt-verdict-head { color: #15803d !important; }
  .sc-rpt-verdict.warn .sc-rpt-verdict-head { color: #a16207 !important; }
  .sc-rpt-verdict.bad  .sc-rpt-verdict-head { color: #b91c1c !important; }
  .sc-rpt-verdict.good .sc-rpt-verdict-icon { background: #22c55e !important; color: #ffffff !important; }
  .sc-rpt-verdict.warn .sc-rpt-verdict-icon { background: #eab308 !important; color: #ffffff !important; }
  .sc-rpt-verdict.bad  .sc-rpt-verdict-icon { background: #ef4444 !important; color: #ffffff !important; }

  .sc-pass { color: #15803d !important; }
  .sc-fail { color: #b91c1c !important; }
  .sc-warn { color: #a16207 !important; }
  .sc-mot-badge.pass { background: #dcfce7 !important; color: #15803d !important; border: 1px solid #86efac !important; }
  .sc-mot-badge.fail { background: #fee2e2 !important; color: #b91c1c !important; border: 1px solid #fca5a5 !important; }

  /* Two MOT lines keep their meaning on paper: a clean test, and a plate that
     changed mid-history. Flattened to grey they'd read as ordinary notes. */
  .sc-mot-clean { color: #15803d !important; }
  .sc-mot-plate.changed { color: #b91c1c !important; }

  .sc-rpt-tl-cell.good::before  { background: #22c55e !important; }
  .sc-rpt-tl-cell.amber::before { background: #facc15 !important; }
  .sc-rpt-tl-cell.red::before   { background: #f87171 !important; }
  .sc-rpt-tl-cell.unknown::before { background: #cbd5e1 !important; }

  .sc-rpt-no-guarantee { background: #fefce8 !important; border: 1px solid #fde047 !important; color: #a16207 !important; }

  /* Sandbox / test-data notice stays visible on paper, restyled for light. */
  .rr-sandbox {
    background: #fffbeb !important;
    border: 1px solid #f59e0b !important;
    color: #7c2d12 !important;
  }
  .rr-sandbox b { color: #7c2d12 !important; }

  /* ── 5. Fragmentation — where pages may and may not break ────────────── */
  .sc-rpt-card, .scr-section, .scr-detail-card {
    break-inside: avoid;          /* ignored (and flows) if taller than a page */
  }
  .sc-rpt-card h2, .sc-rpt-card h3, .scr-section h2 { break-after: avoid; }
  .sc-mot-test, .sc-rpt-fact, .sc-rpt-verdict, .sc-rpt-mot-stat,
  .scr-detail-cell, .scr-detail-item { break-inside: avoid; }

  /* Long sections start on a fresh page. */
  #mot-summary-section { break-before: page; }
  /* Starts a fresh page, and must not be left stranded alone on it: the first
     paid card below is break-inside: avoid, so without break-after the card
     jumps to the next page and the heading prints on a page of its own. */
  .sc-rpt-paid-head { break-before: page; break-after: avoid; }
  .sc-rpt-paid-head {
    border-bottom: 2px solid #ff700a !important;
    color: #b45309 !important;
  }

  /* MOT history unclamped — print the full record, no scroll containers. */
  #mot-history-section, #mot-history-list {
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
  }

  img, canvas { max-width: 100% !important; }

  /* ── 6. Things that only make sense on a screen ──────────────────────── */

  /* The locked teaser. On screen the CSS blur reads as "paywalled — pay to see
     it", which is the whole point of it. On paper it is just twelve illegible
     smudges per report: Chrome rasterises filter: blur() into the output, so
     the reader gets grey mush where they expect words and reasonably concludes
     the printer failed.
     The item NAMES above each one still print, under the section heading "Not
     included in the free check", which says everything the blurred line said. */
  .veh-lock p { display: none !important; }
  .veh-lock {
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
  }
  .veh-lock h3 { margin: 0 !important; color: #0f172a !important; }

  /* The share link. The on-screen control is an <input>, which cannot wrap: it
     truncates to its box with an ellipsis, so the printed page ended in "…" and
     the address was unusable — and there is no Copy button on paper. Hide the
     input and the buttons; print the full URL as ordinary wrapping text.
     See the print-only paragraph in site/partials/share-link.html. */
  .veh-share-actions, .veh-share-row, .veh-share-done { display: none !important; }
  .veh-share-url-print {
    display: block !important;
    font-family: ui-monospace, Menlo, Consolas, monospace !important;
    font-size: 10pt !important;
    color: #0f172a !important;
    word-break: break-all;        /* a URL has no spaces to break at */
    margin: 0 !important;
  }
}