/* ============================================================
   YIZZOO - Printed sheets, shared by every maker
   The Scavenger Hunt Builder, the Secret Code Maker, and whatever
   makes paper next. Each tool keeps its OWN sheet layouts in its own
   stylesheet; this is the part they all share: the page, the frame,
   the ornaments, the name line and the footer.

   The rules are tools/printables/_print.css's, because what these
   tools print has to be indistinguishable from a printable made by
   hand: no full bleed, almost no solid fill, readable in grayscale,
   and cut lines PALE so a wandering cut leaves nothing anybody
   notices.

   Load it BEFORE the tool's own sheet, which may refine it.
   ============================================================ */

/* The print block never shows on screen. */
.yz-print{ display: none; }

@media print{

  @page{ size: letter portrait; margin: 0.5in; }

  /* Everything that is not the sheets, gone. The page content sits
     inside <main>, so it takes two rules: drop everything beside
     main, then everything inside it except the print block. Written
     as a not() rather than a list of class names so a new piece of
     site furniture cannot quietly start printing. */
  body > *:not(main){ display: none !important; }
  main > *:not(.yz-print){ display: none !important; }
  main{ display: block !important; padding: 0 !important; margin: 0 !important; }
  .yz-print, .yz-print[hidden]{ display: block !important; }

  html, body{
    background: #fff !important;
    color: #1a1a1a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11.5pt;
    line-height: 1.5;
    margin: 0;
  }
  *, *::before, *::after{ box-sizing: border-box; }
  html{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* One .yz-pp per printed sheet. The last must not force a blank one,
     which is the classic way a three sheet print comes out as four. */
  .yz-pp{
    page-break-after: always;
    break-after: page;
    position: relative;
    min-height: 9.6in;
    padding-bottom: 0.35in;
  }
  .yz-pp:last-child{ page-break-after: auto; break-after: auto; }

  /* ---- a whole page in a frame ----------------------------
     The checklist, the coded note: one framed page each. */
  .yz-pp__page{
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 9.55in;
    border: 0.5pt solid #444;
    padding: 0.34in 0.42in 0.46in;
    text-align: center;
  }
  /* The footer belongs INSIDE the frame's padding. At the frame's own
     edge it printed straight through the corner ornaments. */
  .yz-pp__page .yz-pp__slug{ left: 0.42in; right: 0.42in; bottom: 0.17in; }
  .yz-pp__page .yz-pp__h1{ font-size: 24pt; }

  /* ---- the ornaments ---------------------------------------
     One corner file, four rotations: it is drawn symmetric about its
     own diagonal for exactly this. Pulled out over the rule so it sits
     ON the corner rather than beside it.

     No color set on purpose: an SVG behind an <img> cannot see this
     document's color, so its currentColor resolves to its own black.
     That is what these are drawn for, and what the paid printables
     use them as. Straight rules are CSS and curves are SVG, because a
     rule has to stretch and an SVG that stretches distorts its
     corners. */
  .yz-pp__corner{
    position: absolute;
    width: 0.42in; height: 0.42in;
  }
  .yz-pp__corner--tl{ top: -0.5pt;    left: -0.5pt;  }
  .yz-pp__corner--tr{ top: -0.5pt;    right: -0.5pt; transform: rotate(90deg); }
  .yz-pp__corner--br{ bottom: -0.5pt; right: -0.5pt; transform: rotate(180deg); }
  .yz-pp__corner--bl{ bottom: -0.5pt; left: -0.5pt;  transform: rotate(270deg); }

  /* The small mark under a label. Fixed width so it never stretches. */
  .yz-pp__mini{
    width: 0.52in;
    height: auto;
    margin: 0.06in auto 0;
  }

  .yz-pp__h1{
    font-size: 21pt;
    line-height: 1.15;
    margin: 0;
    text-align: center;
  }
  /* Under the title, at a fixed width so the engraved rule keeps its
     taper. Stretched, a swelled rule stops looking cut and starts
     looking like a mistake. */
  .yz-pp__divider{
    display: block;
    width: 2.4in;
    height: auto;
    margin: 0.07in auto 0.16in;
  }

  /* THE NAME LINE ARRIVES EMPTY. A box somebody writes in is blank,
     and what it is for is said BELOW it, never printed inside it. */
  .yz-pp__nameline{ margin: 0.1in auto 0.24in; width: 3.2in; }
  .yz-pp__rule{
    display: block;
    height: 0;
    border-bottom: 0.75pt solid #444;
  }
  .yz-pp__namelabel{
    display: block;
    margin-top: 3pt;
    font-family: "Trebuchet MS", "Gill Sans", sans-serif;
    font-size: 8pt;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #777;
  }

  /* ---- the footer on every sheet ---------------------------- */
  .yz-pp__slug{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: space-between;
    font-family: "Trebuchet MS", "Gill Sans", sans-serif;
    font-size: 7.5pt;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #999;
    border-top: 0.5pt solid #ddd;
    padding-top: 5pt;
  }
}