/* Reader-only presentation. Source, editor and exports keep their original styles. */
#app[data-score-presentation=overlay] #paper,
#app[data-score-presentation=overlay] #paper :is(.bounded-pdf-frame,.bounded-pdf-slot){background:transparent!important;box-shadow:none!important}
#app[data-score-presentation=overlay] #paper :is(.bounded-pdf-canvas,.bounded-pdf-preview){mix-blend-mode:multiply;filter:grayscale(1);background:transparent!important;box-shadow:none!important}
html[data-tone=dark] #app[data-score-presentation=overlay] #paper :is(.bounded-pdf-canvas,.bounded-pdf-preview){filter:grayscale(1) invert(1);mix-blend-mode:screen}
#app[data-score-presentation=overlay] #paper .watermark-layer{mix-blend-mode:multiply}
html[data-tone=dark] #app[data-score-presentation=overlay] #paper .watermark-layer{filter:grayscale(1) invert(1);mix-blend-mode:screen}
html[data-tone=dark] #app[data-score-presentation=overlay] #paper .live-annotation-layer{mix-blend-mode:screen}
#app[data-score-presentation=overlay] #paper .watermark-item img{mix-blend-mode:normal}
#app[data-score-presentation=overlay] #paper .live-annotation-chord{color:var(--accent)!important;background:transparent!important}
#app[data-score-presentation=overlay] #paper .music-symbol{color:var(--accent)!important}
#app[data-score-presentation=flow] #viewerShell{overflow:auto!important;display:block!important;touch-action:pan-y}
#app[data-score-presentation=flow] #viewerShell[hidden]{display:none!important}
#app[data-score-presentation=flow] #paper{display:block!important;width:100%!important;max-width:none!important;height:auto!important;min-height:100%!important;transform:none!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;padding:24px clamp(18px,3vw,48px) 60px!important}
.reader-flow{font-family:BandItFlow,Arial,sans-serif;max-width:1000px;margin:auto;color:var(--text);text-align:left}
.reader-flow-title{font-size:clamp(26px,3vw,40px);text-align:center;margin:4px 0 10px;font-family:BandItFlowBold,Arial,sans-serif;line-height:1.3}
.reader-flow-artist{text-align:center;color:var(--muted);margin:0 0 38px;font-size:16px}
.reader-flow-part{margin:0 0 32px}.reader-flow-part h2{font-size:17px;color:var(--accent);margin:0 0 16px}
.reader-flow-row{position:relative;font-size:var(--flow-size,24px);display:flex;align-items:baseline;flex-wrap:wrap;column-gap:.3em;row-gap:0;line-height:1.5;margin-bottom:12px}
.reader-flow-word{display:inline-block;white-space:nowrap;padding-top:1.2em}.reader-flow-syllable{display:inline;position:relative}
.reader-flow-chord{font-family:BandItFlowBold,Arial,sans-serif;font-size:.78em;color:var(--accent);font-weight:bold;white-space:nowrap}
.reader-flow-syllable>.reader-flow-chord{position:absolute;top:-1.2em;left:0;transform:translateX(-50%);line-height:1.2}
.reader-flow-row.instrumental{gap:22px;margin:18px 0 28px}.reader-flow-row.instrumental .reader-flow-chord{font-size:.78em}
.reader-flow-mark{align-self:center;display:inline-block;color:var(--accent);line-height:0;max-width:100%}.reader-flow-mark svg{display:block;width:100%;height:auto}
.reader-flow.hide-chords .reader-flow-chord{visibility:hidden}.reader-flow.hide-symbols .reader-flow-mark{display:none}
#app[data-score-presentation=flow] #basicPosition,#app[data-score-presentation=flow] #pageDots{display:none!important}
#app[data-score-presentation=flow] #basicToolbar [data-action=view],#app[data-score-presentation=flow] :is(#scorePlayback,#scoreTransportToggle){display:none!important}
#app[data-score-presentation=flow].locked #viewerShell,#app[data-score-presentation=flow].basic-locked #viewerShell{overflow:hidden!important;touch-action:none}
@media(max-width:600px){#app[data-score-presentation=flow] #paper{padding:20px 16px 45px!important}.reader-flow-title{font-size:27px}}

/* Basic 25: a reader surface has its own palette, independent of menu tone. */
#app[data-score-presentation=flow]{--flow-background:var(--reader-ground,var(--bg,#f9f8f4))}
html[data-theme=paper] #app[data-score-presentation=flow]{--flow-background:#f9f8f4}
html[data-theme=bandit] #app[data-score-presentation=flow]{--flow-background:#17191c}
html[data-theme=gala] #app[data-score-presentation=flow]{--flow-background:#102137}
html[data-theme=live] #app[data-score-presentation=flow]{--flow-background:#061326}
#app[data-score-presentation=flow] :is(.stage,#viewerShell){background:var(--flow-background)!important}
.reader-flow{color:var(--flow-ink,var(--text))}
.reader-flow-artist{color:var(--flow-muted,var(--muted))}
.reader-flow-part h2,.reader-flow-chord,.reader-flow-mark{color:var(--flow-accent,var(--accent))}
.reader-flow-extras{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:0 0 20px;max-width:100%;font-size:var(--flow-size,24px)}
.reader-flow-extras[hidden]{display:none}
.reader-flow-note{white-space:pre-wrap;overflow-wrap:anywhere;min-width:0;max-width:100%;padding:.35em .6em;border-inline-start:2px solid var(--flow-accent);border-radius:4px;font-size:calc(var(--flow-size,24px) * var(--note-scale,.85));line-height:1.4}
.reader-flow.hide-notes .reader-flow-note{display:none}
#app[data-score-presentation=flow] .basic-edge{color:var(--flow-muted)!important}

/* Basic 25: headings are anchors too; annotations keep their reading order. */
.reader-flow-headline{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin:0 0 16px;font-size:var(--flow-size,24px);max-width:100%}
.reader-flow-headline h2{margin:0;flex:0 0 auto;max-width:100%;overflow-wrap:anywhere}
.reader-flow-headline .reader-flow-note{border:0;border-radius:0;padding:0}
.reader-flow-headline .reader-flow-note:not([data-note-background=none]){padding:.2em .4em;border-radius:3px}
.reader-flow-headline .reader-flow-mark{flex-shrink:0}
.reader-flow-side-mark{align-self:flex-end;margin-bottom:.2em}
.reader-flow-side-mark.reader-flow-note{border:0;padding:0}
.reader-flow-extras[data-placement=above]{margin:0 0 4px}
/* Paper insets must not leave stationary blank bands across flowing text.
   Breathing room belongs to the scrollable content, not its viewport. */
html[data-theme] #app.basic-reader[data-score-presentation=flow] .stage{padding-top:max(var(--reader-top-inset,0px),var(--reader-frame-inset,0px))!important;padding-bottom:var(--reader-frame-inset,0px)!important}
#app[data-score-presentation=flow] #viewerShell{padding-top:0!important;padding-bottom:0!important;scroll-snap-type:none;scroll-padding-block:8px}
#app[data-score-presentation=flow] #paperWrap{height:auto!important;max-height:none!important;overflow:visible!important;aspect-ratio:auto!important}

#app[data-score-presentation=flow] #paperWrap{touch-action:pan-y}

.reader-flow-row.chordpro-flow-row{box-sizing:border-box}.chordpro-flow-word{position:relative;box-sizing:content-box;flex:none;height:1.5em;padding-top:1.2em}.chordpro-flow-text{position:absolute;top:1.2em;white-space:pre}.chordpro-flow-chord{position:absolute;top:0;transform:translateX(-50%);line-height:1.2}
