/* ═══════════════════════════════════════════════════════════════════════
   wordhoard-print.css — the four forms.

   Room-local for now. It belongs at thewordhoard.com/print/ and served to
   every room with one <link>, exactly as wordhoard-nav.js already is; it
   lives here until that directory is deployed, and the reason it must be
   SERVED rather than pasted is written in the paper-architecture note:
   the canonical seven-line print block has sat in wordhoard-theme.css for
   weeks and not one room uses it.

   Four forms, and a room declares which one it is rendering:
     .wh-sheet      one evening, portrait, one page
     .wh-booklet    a month, landscape, 2-up, saddle-stitched
     .wh-cards      memory work, 4-up at 3x5, backs mirrored
     .wh-broadside  one thing, large, for the child reading aloud
   ═══════════════════════════════════════════════════════════════════════ */

/* Nothing below shows on screen. The forms are built into a hidden well and
   only the printer ever sees them. */
#wh-print { display: none; }

@media print {

  /* ── the shared floor: black on white, no chrome, no cost in ink ─────── */
  body { background: #fff !important; color: #000 !important; }
  .wh-noprint, nav, .room-nav, button, .actions, .toolbar,
  #wordhoard-nav-fab, #wordhoard-nav-panel { display: none !important; }
  a { color: #000 !important; text-decoration: none; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  p, li, .line { orphans: 2; widows: 2; }

  /* when a form is up, the page IS the form */
  body.wh-printing > *:not(#wh-print) { display: none !important; }
  body.wh-printing #wh-print { display: block !important; }

  /* ── 1. THE SHEET — one evening ──────────────────────────────────────── */
  body.wh-form-sheet { }
  @page wh-portrait { size: letter portrait; margin: 0.6in 0.65in; }
  .wh-sheet { page: wh-portrait; }
  .wh-sheet .leaf { break-after: page; page-break-after: always; }
  .wh-sheet .leaf:last-child { break-after: auto; page-break-after: auto; }
  .wh-sheet .leaf h2 { font-size: 15pt; margin: 0 0 .18in; }
  .wh-sheet .part { margin-bottom: .16in; break-inside: avoid; }
  .wh-sheet .who {
    font: 700 8.5pt/1.2 "Courier New", monospace; letter-spacing: .08em;
    text-transform: uppercase; color: #444;
  }
  .wh-sheet .said { font-size: 11pt; line-height: 1.45; }

  /* ── 2. THE BOOKLET — a month, folded once ───────────────────────────── */
  @page wh-landscape { size: letter landscape; margin: 0; }
  .wh-booklet { page: wh-landscape; }
  .wh-booklet .sheet {
    width: 11in; height: 8.5in; display: flex; box-sizing: border-box;
    break-after: page; page-break-after: always;
  }
  .wh-booklet .sheet:last-child { break-after: auto; page-break-after: auto; }
  .wh-booklet .half {
    width: 5.5in; height: 8.5in; box-sizing: border-box;
    padding: .5in .45in .45in; position: relative;
    display: flex; flex-direction: column; overflow: hidden;
  }
  /* the fold: a hairline a person can aim at, not a printed rule */
  .wh-booklet .half:first-child { border-right: 1px dotted #bbb; }
  .wh-booklet .half.blank > * { visibility: hidden; }
  .wh-booklet .pgnum {
    position: absolute; bottom: .3in; font: 9.5pt Georgia, serif; color: #333;
  }
  .wh-booklet .half:first-child .pgnum { left: .45in; }
  .wh-booklet .half:last-child  .pgnum { right: .45in; }
  .wh-booklet .runhead {
    position: absolute; bottom: .3in; font: italic 8.5pt Georgia, serif; color: #666;
  }
  .wh-booklet .half:first-child .runhead { right: .45in; }
  .wh-booklet .half:last-child  .runhead { left: .45in; }

  /* ── 3. THE CARDS — 4-up at 3x5, backs mirrored ──────────────────────── */
  .wh-cards { page: wh-portrait; }
  .wh-cards .cardsheet {
    display: grid; grid-template-columns: 3.5in 3.5in; grid-auto-rows: 2.6in;
    gap: 0; break-after: page; page-break-after: always;
  }
  .wh-cards .cardsheet:last-child { break-after: auto; page-break-after: auto; }
  .wh-cards .card {
    border: 1px dashed #999;                     /* the cut line */
    padding: .22in .26in; box-sizing: border-box; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
    break-inside: avoid;
  }
  .wh-cards .card .ref  { font: 700 10pt "Courier New", monospace; letter-spacing:.05em; margin-bottom:.1in; }
  .wh-cards .card .text { font-size: 10.5pt; line-height: 1.35; }
  .wh-cards .card.face .ref { font-size: 13pt; text-align: center; }
  .wh-cards .card.blank { border-style: none; }

  /* ── 4. THE BROADSIDE — one thing, big ───────────────────────────────── */
  .wh-broadside { page: wh-portrait; }
  .wh-broadside .leaf {
    break-after: page; page-break-after: always;
    min-height: 8.5in; display: flex; flex-direction: column; justify-content: center;
  }
  .wh-broadside .leaf:last-child { break-after: auto; page-break-after: auto; }
  .wh-broadside .ref  { font: 700 13pt "Courier New", monospace; letter-spacing: .08em; margin-bottom: .3in; }
  .wh-broadside .text { font-size: 22pt; line-height: 1.5; }
  .wh-broadside .text.long { font-size: 18pt; }

  /* chord charts are monospace and their alignment IS the information */
  .chord-row, .lyric-row {
    font-family: "Courier New", ui-monospace, monospace !important;
    color: #000 !important; opacity: 1 !important; height: auto !important;
  }
}