/* The chord sheet in print (P20, P26, P36), loaded after sheet.css
   (public/studio/chart/index.html). Moved verbatim from sheet.css by P36. */

/* The Grid's printed chart (grid.ts, print-grid.ts) is for paper only. */
.sheet__pchart { display: none; }

/* ---- Print: the sheet alone, in ink, two columns (P26) ------------------------------

   Modelled on the Chord Lens extension's sheet-print.css, adapted to this DOM:
   - Lead and Lyrics flow in two columns, page after page, whatever the screen
     layout (Sheet only's screen pages and columns are unwrapped). column-fill:
     auto fills a page's left column, then its right, so no page is balanced
     into two half-empty columns and nothing leaves a gap.
   - The unbreakable unit is a line (and an instrumental row), never a whole
     section: a section longer than the space left used to be pushed whole to
     the next page, leaving a blank half page. A section name never ends a column.
   - Colour becomes type. Background graphics are off by default and coloured
     text copies badly, so chords are bold ink and a section is its name in
     caps with a hairline under it. No playback state prints: a page has no "now".
   - The Grid prints its own real-book chart (P36, below), one column, with
     rows never cut by a page break.
   Ink ratios on white: ink 17.9:1, muted 7.1:1, rule 10.6:1, hair 1.6:1 (decoration). */

@media print {
  @page { margin: 14mm; }

  /* Only the sheet prints, in page flow: its ancestors stop positioning,
     sizing or clipping it (decision 32). */
  html, body { height: auto !important; min-height: 0 !important; overflow: visible !important; background: #fff !important; }
  body *:not(:has(.sheet)):not(.sheet):not(.sheet *) { display: none !important; }
  body :has(.sheet) {
    display: block !important; position: static !important; overflow: visible !important;
    width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
    transform: none !important; contain: none !important;
  }
  .sheet, .sheet[data-place] {
    --sheet-ink: #14161a;
    --sheet-ink-muted: #55585f;
    --sheet-rule: #3b3f45;
    --sheet-rule-hair: #c9ccd1;
    --st-chord-ink: var(--sheet-ink);
    --st-text: var(--sheet-ink);
    --st-text-dim: var(--sheet-ink-muted);
    --st-text-faint: var(--sheet-ink-muted);
    --st-line: var(--sheet-rule-hair);
    --st-bg: #fff;
    display: block;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    border-radius: 0;
    outline: 0;
    background: #fff;
    color: var(--sheet-ink);
  }
  .sheet__head, .sheet__row, .sheet__foot, .sheet__notice, .sheet__lock, .sheet__notation { display: none !important; }

  /* The header: title, then "Key … · Capo … · N BPM · Simplified" (print.ts). */
  .sheet__print { display: block; margin: 0 0 10pt; padding: 0 0 7pt; border-bottom: 0.5pt solid var(--sheet-rule-hair); }
  .sheet__print-title { margin: 0; font: 700 16pt/1.15 var(--st-font); }
  .sheet__print-settings { margin: 3pt 0 0; color: var(--sheet-ink-muted); font: 400 9pt/1.3 var(--st-font); font-variant-numeric: tabular-nums; }

  /* "In this song": printed once, wrapping, in ink; not for Lyrics, which has no chords. */
  .sheet__toolbar { display: block; margin: 0 0 10pt; padding: 0 0 7pt; border-bottom: 0.5pt solid var(--sheet-rule-hair); }
  .sheet[data-view='lyrics'] .sheet__toolbar { display: none; }
  .sheet__used { max-width: none; gap: 4pt; }
  .sheet__caption { color: var(--sheet-ink-muted); font-size: 7pt; }
  .sheet__tiles { flex-wrap: wrap; gap: 5pt; overflow: visible; }
  .sheet__tile, .sheet[data-place] .sheet__tile, .sheet__tile[aria-current='true'] { flex: 0 0 64px; padding: 5px 3px 4px; background: none; outline-color: var(--sheet-rule-hair); break-inside: avoid; }
  .sheet__tile-name, .sheet__tile[aria-current='true'] .sheet__tile-name { color: var(--sheet-ink); font-size: 8pt; }
  [data-slot='sheet'] .dia__grid { stroke: #888; }
  [data-slot='sheet'] .dia__nut, [data-slot='sheet'] .dia__dot { fill: var(--sheet-ink); }
  [data-slot='sheet'] .dia__open { stroke: var(--sheet-ink); }
  [data-slot='sheet'] .dia__key { fill: #fff; stroke: var(--sheet-rule); }
  [data-slot='sheet'] .dia__tone { fill: var(--sheet-ink-muted); }
  [data-slot='sheet'] .dia__key--black, [data-slot='sheet'] .dia__tone--root { fill: var(--sheet-ink); }

  /* Paper, not a scrolling panel: no padding under the last line (it made a blank last page). */
  .sheet__body, .sheet[data-place] .sheet__body, .sheet__frame, .sheet__scroll {
    display: block; height: auto; min-height: 0; max-width: none; padding: 0; overflow: visible;
  }
  .sheet:not([data-view='grid']) .sheet__scroll { container-type: normal; }
  /* The grid's bars share the paper's width (`--bar-w` reads the scroll box's width). */
  .sheet[data-view='grid'] .sheet__scroll { container-type: inline-size; }

  /* ---- Lead and Lyrics: two continuous columns ---- */
  .sheet__lead, .sheet__lead[data-columns] { columns: 2; column-gap: 9mm; column-fill: auto; padding: 0; }
  .sheet__lead[data-columns] .sheet__page, .sheet__lead[data-columns] .sheet__col { display: contents; }
  .sheet__block, .sheet[data-place] .sheet__block { display: block; margin: 0 0 10pt; padding: 0; border-left: 0; }
  .sheet__block .sheet__block-head { display: flex; align-items: baseline; gap: 6pt; margin: 0 0 3pt; padding: 0; break-after: avoid; }
  /* Sheet only's screen split: the parts print as one section, as on paper they flow anyway. */
  .sheet[data-place] .sheet__block[data-more] { margin-bottom: 0; }
  .sheet__block .sheet__block-head[data-cont] { display: none; }
  .sheet__tag {
    padding: 0 0 1.5pt; border-radius: 0; outline: 0; background: none;
    border-bottom: 0.5pt solid var(--sheet-rule-hair);
    color: var(--sheet-ink); font: 700 8pt/1.3 var(--st-font-mono); letter-spacing: 0.1em;
  }
  .sheet__time, .sheet__range, .sheet__gblock .sheet__time { color: var(--sheet-ink-muted); font-size: 7.5pt; }
  .sheet__line, .sheet__line[data-state] {
    display: block; margin: 0 0 4pt; padding: 0; border: 0; border-radius: 0; background: none;
    font: 400 9pt/1.4 var(--st-font-mono); break-inside: avoid;
  }
  .sheet__chords, .sheet__line[data-state] .sheet__chords { display: block; color: var(--sheet-ink); font-weight: 700; opacity: 1; white-space: pre-wrap; }
  .sheet__lyric, .sheet__line[data-state] .sheet__lyric { display: block; color: var(--sheet-ink); font-weight: 400; }
  /* A Lead line with words prints as chords riding on their words (print-line.ts). */
  .sheet__line:has(.sheet__segs) > :not(.sheet__segs) { display: none; }
  .sheet__segs { display: block; color: var(--sheet-ink); white-space: pre-wrap; }
  .sheet__seg { display: inline-block; vertical-align: baseline; white-space: pre; }
  .sheet__seg-chord { display: block; padding-right: 0.6em; font-weight: 700; }
  .sheet__seg-word { display: block; }
  .sheet__seg-word:empty::after { content: '\200b'; }
  .sheet__instrumental { padding: 0; color: var(--sheet-ink-muted); font-size: 8.5pt; break-inside: avoid; }

  /* ---- Grid: a real-book chart (P36, decision 48) ----
     The screen Grid's blocks don't print; its printed form (print-grid.ts)
     does: 4 bars a row at equal widths, thin bar lines, a heavier line at each
     row's start, a double bar ending each section and a final bar ending the
     song. Chords sit side by side on their beats, in every bar (no `%`).
     A section's boxed mark stays with its first row, and no row is cut. */
  .sheet[data-view='grid'] { page: sheet-grid; }
  .sheet[data-view='grid'] .sheet__print-tempo[data-meter]::after { content: ' · ' attr(data-meter); }
  .sheet[data-view='grid'] .sheet__body, .sheet[data-place][data-view='grid'] .sheet__body { padding: 0; }
  .sheet__grid { display: block; padding: 0; }
  .sheet__gblock { display: none !important; }
  .sheet__pchart { display: block; }
}

/* ---- The Grid's printed chart (P36): drawn in print, and hidden at the paper's
   width while print-grid.ts measures which size each bar fits at. ---- */
.sheet__pchart[data-measuring] { display: block; position: absolute; top: 0; left: 0; width: 182mm; visibility: hidden; pointer-events: none; }
.sheet__pchart { --sheet-ink: #14161a; --sheet-ink-muted: #55585f; color: var(--sheet-ink); font-family: var(--st-font); }

.sheet__psec + .sheet__psec { margin-top: 3mm; }
.sheet__pkeep { break-inside: avoid; }
.sheet__phead { display: flex; align-items: baseline; gap: 2mm; margin: 0 0 1.3mm; }
.sheet__pmark { padding: 0.5mm 1.6mm 0.4mm; border: 0.9pt solid var(--sheet-ink); color: var(--sheet-ink); font: 700 8.5pt/1.2 var(--st-font); letter-spacing: 0.02em; }
.sheet__ptime { color: var(--sheet-ink-muted); font: 400 7pt/1 var(--st-font); font-variant-numeric: tabular-nums; }

.sheet__prow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 9.6mm; margin: 0 0 1.9mm; break-inside: avoid; }

/* Bar lines: thin; heavier at a row's start; a double bar after a section (and the pickup); the final bar. */
.sheet__pbar {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(max-content, 1fr)); column-gap: 2.5mm; align-items: center;
  min-width: 0; padding: 0 1.2mm 0 1.8mm; border-right: 0.75pt solid var(--sheet-ink); font-size: 12.5pt;
}
.sheet__pbar:first-child { border-left: 1.8pt solid var(--sheet-ink); }
.sheet__psec > .sheet__prow:last-child > .sheet__pbar:last-child,
.sheet__psec > .sheet__pkeep:last-child > .sheet__prow > .sheet__pbar:last-child,
.sheet__prow[data-lead='1'] > .sheet__pbar:first-child { border-right: 2.6pt double var(--sheet-ink); }
.sheet__psec:last-child > .sheet__prow:last-child > .sheet__pbar:last-child,
.sheet__psec:last-child > .sheet__pkeep:last-child > .sheet__prow > .sheet__pbar:last-child { border-right: 2.4pt solid var(--sheet-ink); }
.sheet__psec:last-child > .sheet__prow:last-child > .sheet__pbar:last-child::after,
.sheet__psec:last-child > .sheet__pkeep:last-child > .sheet__prow > .sheet__pbar:last-child::after {
  content: ''; position: absolute; top: 0; right: 1.3pt; bottom: 0; border-left: 0.75pt solid var(--sheet-ink);
}
.sheet__pno { position: absolute; top: 0.2mm; left: 1mm; color: var(--sheet-ink-muted); font: 400 5.5pt/1 var(--st-font); font-variant-numeric: tabular-nums; }

/* Each chord in its beat's slot (beat 3 is the half), side by side; a light slash on a held beat. */
.sheet__pc, .sheet__pslash { grid-row: 1; white-space: nowrap; }
.sheet__pbar [data-beat='2'] { grid-column-start: 2; }
.sheet__pbar [data-beat='3'] { grid-column-start: 3; }
.sheet__pbar [data-beat='4'] { grid-column-start: 4; }
.sheet__pslash { justify-self: center; color: var(--sheet-ink-muted); font: 300 0.96em/1 var(--st-font); }

/* Chord type: bold sans; the extension smaller and raised; the slash bass kept. */
.sheet__pc { font: 700 1em/1 var(--st-font); letter-spacing: -0.01em; }
/* A bar too full for 12.5pt steps down to the size it fits at, measured (print-grid.ts fitPrintBars);
   past 8pt its chords wrap onto a second line, still in beat order, inside the same bar lines. */
.sheet__pbar[data-size='10'] { font-size: 10pt; }
.sheet__pbar[data-size='9'] { font-size: 9pt; }
.sheet__pbar[data-size='8'], .sheet__pbar[data-size='wrap'] { font-size: 8pt; }
.sheet__pbar[data-size='wrap'] { display: flex; flex-wrap: wrap; align-content: center; gap: 0.8mm 2.5mm; }
/* Two lines leave no room above for the row's bar number: start them after it. */
.sheet__pbar[data-size='wrap']:has(> .sheet__pno) { padding-left: 3.8mm; }
.sheet__pc-ext { margin-left: 0.03em; font-size: 0.64em; line-height: 0; vertical-align: 0.62em; }
/* ♯ and ♭ come from a fallback font (Geist has none) that draws them thin: a touch heavier. */
.sheet__pc-acc { display: inline-block; margin: 0 0.02em; font-size: 0.9em; vertical-align: 0.16em; line-height: 0; -webkit-text-stroke: 0.04em currentColor; }