/* Print floor stylesheet (rule: SKILL.md). Copy it into a project and load it after the page's own CSS; a page's
   print-only layout (a picks table, a letterhead) can come after it. Sizes are on paper. Set --print-font to the
   page's body face; mark a logo data-print-logo and a footer line data-print-label. Check: print_floor_check.mjs.
   For a reader who needs larger print (Jim's mom), raise both sizes: :root{--print-base:16pt;--print-label:14pt}.
   "Page X of Y" sits in the bottom margin of every page (Jim 10-13). Page-margin boxes print in Chrome and Edge;
   Safari and Firefox leave them out, and a one-page printout reads "Page 1 of 1" (CSS can't know the count ahead). */
@media print {
  @page {
    margin: 12mm;
    @bottom-right { content: "Page " counter(page) " of " counter(pages); font-family: var(--print-font, Arial, Helvetica, sans-serif);
      font-size: 12pt; line-height: 1.3; color: #000; vertical-align: middle }
  }
  html, body { zoom: 1 !important; background: #fff !important; width: auto !important; min-width: 0 !important; max-width: none !important }
  /* nothing wider than the page: a fixed-width layout (a 1080px infographic, a min-width box) would make Chrome
     shrink the whole printout, and every size here would come out smaller on paper */
  body * { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box }
  table { width: 100% !important; table-layout: auto !important }
  td, th { overflow-wrap: anywhere }
  /* no-wrap cells, badges and long commands are the usual things left sticking out past the page edge */
  body :is(td, th, span, a, b, strong, em, small, label, button, code, kbd, samp) { white-space: normal !important }
  body * { overflow-wrap: anywhere }  /* long URLs and commands wrap instead of pushing past the page edge */
  body { font-size: var(--print-base, 14pt) !important; line-height: 1.35 !important }
  body *:not([data-print-logo], [data-print-logo] *) {
    font-family: var(--print-font, Arial, Helvetica, sans-serif) !important; color: #000 !important;
    text-transform: none !important; letter-spacing: normal !important; font-style: normal !important;
    text-decoration: none !important; text-align: left !important; text-shadow: none !important; line-height: 1.35 !important
  }
  /* reading text 14pt; labels (small, table heads, captions, footers, data-print-label) 12pt */
  body :is(p, li, dd, dt, td, blockquote, div, span, strong, b, a, em, i, label, button, code, kbd, samp, pre, summary, textarea, input, select, figcaption):not([data-print-logo], [data-print-logo] *,
    small, small *, th, th *, caption, caption *, footer, footer *, [data-print-label], [data-print-label] *) { font-size: var(--print-base, 14pt) !important }
  body :is(small, small *, th, th *, caption, caption *, footer, footer *, [data-print-label], [data-print-label] *) { font-size: var(--print-label, 12pt) !important }
  /* code is the one exception to the single face: commands and file names keep a monospace face, wrapped, not clipped */
  body :is(code, kbd, samp, pre, pre *):not([data-print-logo] *) { font-family: ui-monospace, Menlo, Consolas, monospace !important }
  pre { white-space: pre-wrap !important; overflow-wrap: anywhere !important }
  h1 { font-size: 22pt !important; line-height: 1.25 !important }
  h2 { font-size: 18pt !important; line-height: 1.25 !important }
  h3 { font-size: 15pt !important; line-height: 1.25 !important }
  h4, h5, h6 { font-size: var(--print-base, 14pt) !important; line-height: 1.25 !important }
  /* lines <= 5 inches on blocks that hold text directly; layout boxes (grids, rows of cards: anything with a block
     inside it) keep the full width so their columns don't get squeezed */
  body :is(p, li, dd, dt, blockquote, figcaption, h1, h2, h3, h4, h5, h6, summary, small, label, footer, textarea) { max-width: 5in !important }
  body :is(div, span, strong, b, em, a, section, aside):not(:has(> :is(div, p, ul, ol, dl, table, section, article, aside, header, footer,
    figure, h1, h2, h3, h4, h5, h6, pre, details, nav, form))) { max-width: 5in !important }
  body :is(img, svg, picture, pre) { max-width: 100% !important; height: auto }
  body img { max-height: 2.5in !important; width: auto !important; object-fit: contain }  /* photos don't take a page each */
  h1, h2, h3, h4 { break-after: avoid }
  tr, li, blockquote, article, figure { break-inside: avoid }  /* a card prints whole, never its badge on one page and its body on the next */
}