/* Printing. Loaded with media="print" (build.py), so it costs nothing on screen.
   The darts checkout chart prints as ONE page: header with the FLAME logo and the app, the chart (170 to 2),
   a footer band with a QR code. Black and white safe: nothing relies on colour (every segment is spelled out,
   T20 / D16 / 19 / Bull; trebles are outlined, doubles are filled). The PDFs in public/downloads/ are printed
   from this very page by tools/pdf.py, so what you see in the browser's print preview is what the PDF is. */

@page { size: A4; margin: 8mm; }

@media print {
  html { --sheet-h: 277mm; font-size: 10pt; }
  html, body, .w-darts { background: #fff !important; color: #000 !important; }
  html, body, h1, h2, h3, button, input { font-family: "Liberation Sans", "Noto Sans", "DejaVu Sans", sans-serif !important; }  /* system fonts print as small, searchable TrueType; the web fonts are variable and would be embedded as heavy Type 3 */
  .reveal { opacity: 1 !important; transform: none !important; }

  /* what never prints */
  .site-header, .site-footer, .sticky-cta, .skip, .print-block, .crumbs, nav[aria-label="Breadcrumb"],
  .page-hero .lede, .page-hero .art-meta, main > section:not(.print-keep), .co-tool .calc,
  .co-tool .reveal h2, .co-tool .muted, .section-head, #checkouts, .js-only, .eyebrow { display: none !important; }

  /* the sheet */
  main { display: flex; flex-direction: column; min-height: var(--sheet-h); }
  .wrap { max-width: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
  .section, .print-keep { padding: 0 !important; background: none !important; }
  .co-tool { display: block; }
  .print-only { display: flex !important; }
  .print-head { align-items: center; justify-content: space-between; gap: 6mm; padding-bottom: 2.5mm; margin-bottom: 3mm; border-bottom: 0.5mm solid #000; }
  .ph-brand, .ph-app { display: flex; align-items: center; gap: 2.5mm; font-size: 13pt; font-weight: 800; }
  .print-head img { width: 11mm; height: 11mm; border-radius: 2.2mm; }
  .page-hero { padding: 0 !important; background: none !important; }
  .page-hero h1 { max-width: none; margin: 0 0 2.5mm; font-size: 14pt; line-height: 1.15; letter-spacing: 0; color: #000; }
  .page-hero h1 em { font-style: normal; color: #000; }
  .legend { margin: 0 0 3mm; gap: 1.5mm 6mm; font-size: 8pt; display: flex; flex-wrap: wrap; }
  .legend span { display: inline-flex; align-items: center; gap: 1.5mm; }

  /* the chart: five columns, 170 down to 2 */
  .co-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3mm; margin: 0; }
  .co-card { background: none; box-shadow: none; border-radius: 0; overflow: visible; break-inside: avoid; }
  .co-card table { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
  .co-card caption { padding: 0 0 1mm; font-size: 8pt; letter-spacing: 0.04em; color: #000; text-align: start; }
  /* no column heads on paper: the score and its route are obvious from the legend, and long translated heads ("Remaining score" in Thai)
     wrap in a narrow column and push the footer onto a second page */
  .co-card thead { display: none; }
  .co-card caption { border-bottom: 0.4mm solid #000; margin-bottom: 0.4mm; }
  .co-card th, .co-card td { padding: 0.15mm 1mm; border-top: 0.2mm solid #888; text-align: start; }
  .co-card tbody th { width: 8mm; font-size: 8.5pt; font-weight: 800; }
  .co-card td { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.8mm; white-space: nowrap; }
  .co-card .bogey { color: #000; font-size: 8pt; font-style: italic; }
  .co-card .seg, .legend .seg { padding: 0.1mm 1mm; border-radius: 0.8mm; font-size: 8.5pt; font-weight: 700; line-height: 1.15; box-shadow: none; background: #fff !important; color: #000 !important; border: 0.25mm solid #000; }
  .seg.T { border-width: 0.5mm; font-weight: 800; }
  .seg.D { background: #000 !important; color: #fff !important; font-weight: 800; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .seg.b { border-width: 0.5mm; font-weight: 800; }
  .seg.s { border-color: transparent; }
  .co-card tr:target { background: none; }

  /* footer band: QR code, hint, short URL */
  .print-foot { align-items: center; gap: 6mm; margin-top: auto; padding-top: 3mm; border-top: 0.5mm solid #000; break-inside: avoid; }
  .pf-qr { width: 27mm; height: 27mm; flex: none; }
  .pf-text { min-width: 0; }
  .pf-hint { margin: 0; font-size: 12pt; font-weight: 700; line-height: 1.3; }
  .pf-url { margin: 1.5mm 0 0; font-size: 11pt; font-weight: 800; direction: ltr; unicode-bidi: isolate; text-align: start; overflow-wrap: anywhere; }

  a { color: inherit; text-decoration: none; }
}