/* Print templates. Built from project data in #print-root; the editing UI is hidden. */

/* Page margins hold the running title, date and page numbers. Content adds its own side padding
   (below), so it keeps a white border even when a browser or the "Margins: None" setting drops these. */
@page { size: A4 portrait; margin: 13mm 12mm 13mm; }
@page script { size: A4 portrait; margin: 13mm 12mm 13mm; }
@page board { size: A4 landscape; margin: 11mm 10mm 12mm; }

@media print {
  html, body { background: #fff !important; color: #111 !important; }
  body { font: 10pt/1.45 'Hanken Grotesk', Arial, sans-serif; }
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none !important; }

  /* Storyboard-only prints default to landscape even where named pages are unsupported */
  body[data-print='board'] { page: board; }

  .p-script { page: script; }
  .p-board { page: board; }
  .p-script + .p-board { break-before: page; }

  /* Inner padding: about 20mm total at the sides with default margins, 8mm if margins are removed.
     "clone" repeats the top and bottom padding on every page the script runs across. */
  .p-script { padding: 6mm 8mm; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .p-board-page { padding: 6mm 8mm 0; }

  .p-eyebrow { font: 700 7.5pt/1 'Hanken Grotesk', Arial, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #555; margin: 0 0 4pt; }
  h1 { font: 800 26pt/0.95 'Big Shoulders Display', 'Arial Narrow', sans-serif; text-transform: uppercase; margin: 0; }
  h2 { font: 800 13pt/1 'Big Shoulders Display', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 6pt; padding-bottom: 3pt; border-bottom: 1.2pt solid #111; }

  /* Script */
  .p-titleblock { padding-bottom: 9pt; margin-bottom: 12pt; border-bottom: 2.5pt solid #111; }
  .p-facts { display: flex; flex-wrap: wrap; gap: 3pt 16pt; margin-top: 8pt; font-size: 9pt; }
  .p-facts b { font-weight: 700; color: #555; text-transform: uppercase; font-size: 7.5pt; letter-spacing: 0.08em; }
  .p-section { margin-bottom: 14pt; }
  .p-dl { display: grid; grid-template-columns: 30mm 1fr; gap: 4pt 10pt; margin: 0; }
  .p-dl dt { font-weight: 700; font-size: 8pt; text-transform: uppercase; letter-spacing: 0.06em; color: #444; padding-top: 1pt; }
  .p-dl dd { margin: 0; white-space: pre-line; }
  .p-scripttext { white-space: pre-wrap; font: 10pt/1.55 'IBM Plex Mono', 'Courier New', monospace; }
  .p-av { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .p-av th { text-align: left; font-size: 7.5pt; letter-spacing: 0.1em; text-transform: uppercase; color: #444; padding: 4pt 6pt; border-bottom: 1pt solid #111; }
  .p-av td { vertical-align: top; padding: 6pt; border-bottom: 0.6pt solid #bbb; white-space: pre-line; }
  .p-av tr { break-inside: avoid; }
  .p-av .c-no { width: 8mm; }
  .p-av .c-time { width: 22mm; }
  .p-av td.c-no { font: 800 13pt/1.1 'Big Shoulders Display', 'Arial Narrow', sans-serif; }
  .p-av td.c-time { font: 8pt/1.4 'IBM Plex Mono', monospace; }
  .p-av thead th { border-bottom: 1pt solid #111; }
  .p-dur { display: block; margin-top: 2pt; font-weight: 500; }
  .p-beat-label { font-weight: 700; margin-bottom: 2pt; }
  .p-super { margin-top: 4pt; padding: 2pt 4pt; border: 0.8pt solid #111; display: inline-block; }
  .p-empty { color: #666; font-style: italic; }

  /* Storyboard */
  .p-board-page { break-after: page; display: flex; flex-direction: column; }
  .p-board-page:last-child { break-after: auto; }
  .p-board-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12pt; padding-bottom: 6pt; margin-bottom: 8pt; border-bottom: 2pt solid #111; }
  .p-board-head h1 { font-size: 20pt; }
  .p-board-facts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2pt 12pt; font-size: 8.5pt; color: #333; }
  .p-frames { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, var(--col-w, 1fr))); gap: 8pt 4mm; }
  .p-frame { break-inside: avoid; display: flex; flex-direction: column; gap: 4pt; min-width: 0; }
  /* Fixed mm width from the layout; height follows the format's exact aspect ratio. The explicit
     height is a fallback for browsers without aspect-ratio. The image is contained, never stretched. */
  .p-frame-img {
    position: relative; box-sizing: border-box; flex: none;
    width: var(--img-w); height: var(--img-h); max-width: 100%; margin: 0 auto;
    border: 0.8pt solid #111; background: #fff; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  @supports (aspect-ratio: 1 / 1) { .p-frame-img { height: auto; aspect-ratio: var(--ar, 16 / 9); } }
  .p-frame-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .p-frame-img span { color: #888; font-size: 8pt; }
  .p-frame-head { display: flex; justify-content: space-between; gap: 6pt; align-items: baseline; }
  .p-frame-head strong { font: 800 13pt/1 'Big Shoulders Display', 'Arial Narrow', sans-serif; text-transform: uppercase; }
  .p-frame-head span { font: 7.5pt 'IBM Plex Mono', monospace; color: #333; }
  .p-action { font-size: 9.5pt; font-weight: 600; line-height: 1.35; white-space: pre-line; }
  .p-frame .p-dl { grid-template-columns: 15mm 1fr; gap: 1.5pt 6pt; font-size: 8pt; }
  .p-frame .p-dl dt { font-size: 6.5pt; }

  .per-6 .p-board-head { padding-bottom: 4pt; margin-bottom: 6pt; }
  .per-6 .p-board-head h1 { font-size: 16pt; }
  .per-6 .p-frames { gap: 7pt 4mm; }
  .per-6 .p-frame { gap: 3pt; }
  .per-6 .p-frame-head strong { font-size: 11pt; }
  .per-6 .p-action { font-size: 8.5pt; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .per-6 .p-frame .p-dl { font-size: 7.2pt; line-height: 1.3; }
  .per-6 .p-frame .p-dl dd { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

  /* One row of six narrow frames (square and vertical formats): stack labels above values */
  .cols-6 .p-frame-head { flex-direction: column; align-items: flex-start; gap: 1pt; }
  .cols-6 .p-frame .p-dl { grid-template-columns: 1fr; gap: 0; }
  .cols-6 .p-frame .p-dl dd { margin-bottom: 2pt; }
  .cols-6 .p-action { -webkit-line-clamp: 4; }
}