/* Print / save-as-PDF. Only the chart goes on the page.
   @page's own size/margin is set dynamically, from whichever page shape is
   chosen (A4 or iPad) — see reading.js's applyPageSizeCSS — since @page
   cannot be scoped by a class the way everything else here is. */

@media print {
  html, body { height: auto; background: #fff; display: block; }
  #app { height: auto; display: block; }

  .toolbar,
  .editor-pane,
  .status,
  .name-field-toggle,
  .name-menu,
  #audio-dock,
  .library .song-tools { display: none !important; }

  .chart-section.playing { background: none; box-shadow: none; }
  .phrase.playing { outline: 0; }

  .split { display: block; }
  .chart-pane { padding: 0; background: #fff; overflow: visible; flex: none; }

  .chart {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    font-size: 11pt;
  }

  .chart-title { font-size: 18pt; }
  .chart-meta { font-size: 9pt; }
  .chart-total { font-size: 8.5pt; }
  .sec-name { font-size: 11pt; }
  .sec-bars { font-size: 8pt; }
  .ph-text, .ph-voicing, .ph-arrangement, .ph-texture, .ph-fill, .ph-tbd, .ph-ref { font-size: 10.5pt; }
  .ph-repeat { font-size: 16pt; }
  .note { font-size: 8.5pt; color: #000; }

  /* selection highlighting is a screen affordance, not part of the chart */
  .phrase.selected { outline: 0; }
  .chart-section.selected { background: none; box-shadow: none; }
  .chart-drag { display: none !important; }

  .chart-section,
  .repeat-group,
  .phrase { break-inside: avoid; }

  .gcell { height: 4.8mm; min-width: 3.6mm; font-size: 8.5pt; }
  .grid-view.compact .gcell { height: 4.6mm; }

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