/* The music stand (stand.js): the whole screen, paper white by day, light on dark at night; big targets for a
   finger on a stand, and nothing that moves the page while someone reads it. */
body.stand-on{overflow:hidden}
#stand{position:fixed;inset:0;z-index:1000;background:#f4f1ea;color:#1d1a17;--sd-line:#d9d2c6;--sd-raise:#fff;--sd-mute:#6c655b;--sd-acc:#b8540d;--sd-live:#d23b2f}
#stand.night{background:#101012;color:#ece9e4;--sd-line:#2c2c31;--sd-raise:#1c1c20;--sd-mute:#a19a91;--sd-acc:#ff9f5a}
#stand .sd{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;height:100%;height:100dvh}
#stand .sd-top{grid-row:1}#stand .sd-tools{grid-row:2}#stand .sd-main{grid-row:3}#stand .sd-foot{grid-row:4}   /* the tools row may be missing: the rest keep their rows */
#stand .sd-top,#stand .sd-foot,#stand .sd-tools{display:flex;align-items:center;gap:8px;padding:8px max(12px,env(safe-area-inset-left));background:var(--sd-raise);border-bottom:1px solid var(--sd-line);min-width:0}
#stand .sd-foot{border-top:1px solid var(--sd-line);border-bottom:0;padding-bottom:max(8px,env(safe-area-inset-bottom));justify-content:space-between}
#stand .sd-tools{flex-wrap:wrap;background:transparent}
#stand .grow{flex:1}
#stand .sd-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;justify-content:center;padding:0 12px;border:1px solid var(--sd-line);border-radius:10px;background:var(--sd-raise);color:inherit;font:600 15px/1 system-ui,-apple-system,sans-serif;cursor:pointer}
#stand .sd-btn.on,#stand .sd-btn[aria-pressed=true]{border-color:currentColor}
#stand .sd-btn.primary{background:var(--sd-acc);border-color:var(--sd-acc);color:#fff}
#stand .sd-btn:disabled{opacity:.4;cursor:default}
#stand .sd-title{display:grid;min-width:0;line-height:1.2}
#stand .sd-title b{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stand .sd-title span{font-size:13px;color:var(--sd-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stand .sd-seg{display:inline-flex;border:1px solid var(--sd-line);border-radius:10px;overflow:hidden}
#stand .sd-seg button{min-height:42px;padding:0 14px;border:0;background:transparent;color:var(--sd-mute);font:600 14px system-ui,sans-serif;cursor:pointer}
#stand .sd-seg button[aria-pressed=true]{background:#1d1a17;color:#fff}#stand.night .sd-seg button[aria-pressed=true]{background:#ece9e4;color:#101012}
#stand .sd-livechip{color:var(--sd-live);font:700 13px system-ui,sans-serif;white-space:nowrap}
#stand .sd-btn.sd-live{color:#fff;background:var(--sd-live);border-color:var(--sd-live);max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#stand .sd-main{position:relative;overflow:auto;padding:8px 12px;-webkit-overflow-scrolling:touch}
#stand .sd-where{color:var(--sd-mute);font:500 14px system-ui,sans-serif}
#stand .sd-empty,#stand .sd-warn{text-align:center;color:var(--sd-mute);margin:12px auto;max-width:640px}
#stand .sd-warn{color:var(--sd-acc);font-weight:600}
/* the set list */
#stand .sd-set{max-width:820px;margin:0 auto;padding:8px 0 24px}
#stand .sd-set h2{font:700 24px/1.2 system-ui,sans-serif;margin:8px 4px 12px}
#stand .sd-svnote{margin:0 4px 12px;color:var(--sd-mute)}
#stand .sd-set ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#stand .sd-set li button{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;padding:14px 16px;border:1px solid var(--sd-line);border-radius:12px;background:var(--sd-raise);color:inherit;font:inherit;cursor:pointer}
#stand .sd-set li button.live{border-color:var(--sd-live)}
#stand .sd-n{font:700 22px/1 system-ui,sans-serif;color:var(--sd-mute);min-width:24px}
#stand .sd-sg{display:grid;gap:3px;flex:1;min-width:0}
#stand .sd-sg b{font-size:19px}#stand .sd-sg span{color:var(--sd-mute);font-size:15px}
#stand .sd-sg .sd-form{color:inherit;font-variant-numeric:tabular-nums}
#stand .sd-cue{font-style:italic;color:var(--sd-acc)!important}
#stand .sd-hint{color:var(--sd-mute);font-size:14px;margin:16px 4px}
/* the chord sheet: a spread of pages, marks over each */
#stand .sd-pages{display:flex;gap:16px;justify-content:center;align-items:flex-start;min-height:100%}
#stand .sd-page{position:relative;flex:none;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18),0 6px 22px rgba(0,0,0,.08);border-radius:2px;overflow:hidden}
#stand .sd-page canvas{position:absolute;inset:0;width:100%;height:100%}
#stand.night .sd-page{background:#000}#stand.night .sd-page canvas{filter:invert(1) hue-rotate(180deg)}
#stand .sd-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#stand .sd-ink path.hl{mix-blend-mode:multiply}#stand.night .sd-ink path.hl{mix-blend-mode:screen}
#stand .marking .sd-page{cursor:crosshair;touch-action:none}
#stand .sd-notes{position:absolute;inset:0;pointer-events:none}
#stand .sd-tag{position:absolute;pointer-events:auto;transform:translateY(-4px);max-width:44%;padding:4px 8px;border:1px solid #e0c14d;border-radius:6px;background:#fff6c7;color:#3a2e00;font:600 13px/1.25 system-ui,sans-serif;text-align:left;box-shadow:0 2px 6px rgba(0,0,0,.15);cursor:pointer;white-space:pre-wrap}
#stand .sd-tag.band{background:#e3f1ff;border-color:#8ab6e6;color:#0d2a4a}
#stand .sd-tag small{display:block;font-weight:500;opacity:.75;margin-top:2px}
#stand .sd-pens{display:inline-flex;gap:6px}
#stand .sd-pc{width:28px;height:28px;border-radius:50%;border:2px solid var(--sd-raise);box-shadow:0 0 0 1px var(--sd-line);cursor:pointer}
#stand .sd-pc.on{box-shadow:0 0 0 2px currentColor}
#stand .sd-chk{display:inline-flex;align-items:center;gap:6px;font:500 14px system-ui,sans-serif}
/* words, for singers; the form, for whoever leads and the drummer */
#stand .sd-words{max-width:900px;margin:0 auto;padding:8px 8px 40px;line-height:1.35}
#stand .sd-words section{margin:0 0 1em;padding:6px 10px;border-left:4px solid transparent;border-radius:4px}
#stand .sd-words section.live,#stand .sd-secs li.live{border-left-color:var(--sd-live);background:rgba(210,59,47,.08)}
#stand .sd-words h3{font:700 .6em/1.2 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--sd-mute);margin:0 0 .25em}
#stand .sd-words p{margin:0}#stand .sd-words .sd-none{color:var(--sd-mute)}
#stand .sd-size{position:sticky;bottom:8px;display:flex;gap:8px;justify-content:flex-end}
#stand .sd-formv{max-width:900px;margin:0 auto;padding:12px 8px 32px;display:grid;gap:18px}
#stand .sd-big{display:flex;gap:28px;flex-wrap:wrap}
#stand .sd-big span{display:grid}#stand .sd-big small{color:var(--sd-mute);font:600 13px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em}
#stand .sd-big b{font:700 44px/1.1 system-ui,sans-serif}
#stand .sd-secs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
#stand .sd-secs li{padding:12px 16px;border:1px solid var(--sd-line);border-left-width:4px;border-radius:10px;background:var(--sd-raise);font:700 20px system-ui,sans-serif}
/* a note being written */
#stand .sd-notebox{position:fixed;left:50%;top:20%;transform:translateX(-50%);width:min(420px,calc(100vw - 24px));padding:14px;display:grid;gap:10px;background:var(--sd-raise);border:1px solid var(--sd-line);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.3);z-index:2}
#stand .sd-notebox label span{display:block;font-weight:400;color:var(--sd-mute);font-size:13px}
#stand .sd-notebox textarea{width:100%;box-sizing:border-box;font:16px/1.4 system-ui,sans-serif;padding:10px;border:1px solid var(--sd-line);border-radius:10px;background:transparent;color:inherit}
#stand .sd-row{display:flex;gap:8px;flex-wrap:wrap}
/* a phone: the song's name gets the room; the views go on a row of their own, across the width */
@media (max-width:700px){#stand .sd-wide{display:none}#stand .sd-title{flex:1}#stand .sd-title b{font-size:16px}#stand .sd-btn{padding:0 10px}
  #stand .sd-top{flex-wrap:wrap;row-gap:6px}#stand .sd-top .grow{display:none}
  #stand .sd-top .sd-seg{order:10;flex:1 1 100%;display:flex}#stand .sd-top .sd-seg button{flex:1}
  #stand .sd-btn.sd-live{order:11;flex:1 1 100%;max-width:none}#stand .sd-livechip{order:11;flex:1 1 100%}}
/* a chart (chords.js): each chord over the syllable it falls on; the stand's and the check screen's alike */
.chart{--ch-c:#b8540d;line-height:1.25}
.chart .ch-sec{break-inside:avoid;margin:0 0 1em;padding:4px 8px;border-left:4px solid transparent;border-radius:4px}
.chart .ch-sec.live{border-left-color:#d23b2f;background:rgba(210,59,47,.08)}
.chart h3{font:700 .62em/1.2 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;opacity:.7;margin:0 0 .3em}
.chart p{margin:0 0 .15em}
.chart .ch-line{display:flex;flex-wrap:wrap;align-items:flex-end}
.chart .ch-line>span,.chart .ch-line{white-space:pre-wrap}
.chart .ch-w{display:inline-flex;flex-direction:column;white-space:pre}
.chart .ch-w b,.chart .ch-flow b{color:var(--ch-c);font-weight:700;padding-right:.45em;line-height:1.15}
.chart .ch-flow{font-weight:600;white-space:pre-wrap;letter-spacing:.02em}
.chart .ch-flow b{padding-right:0}
.chart .ch-cue{font-style:italic;color:var(--ch-c);font-size:.8em}
.chart .ch-gap{height:.5em}
.chart .ch-none{padding:0}.chart .ch-none::before{content:'\00a0'}   /* words with no chord over them: the chord row still there, empty */
#stand.night .chart{--ch-c:#ffb27a}
/* the stand's chart: columns down the screen, turned a screen at a time */
#stand .sd-chartwrap{height:100%;overflow:hidden;position:relative}
#stand .sd-chart{height:100%;column-width:var(--ch-col,24em);column-gap:40px;column-fill:auto;overflow:hidden}
#stand .sd-chartbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;max-width:100%;margin:0 auto}
#stand .sd-chart{margin:0 auto}                                          /* the columns, as wide as the words, in the middle */
/* scrolling, chosen per device: one column down the middle; the last lines can come up to the top */
#stand .sd-chartwrap.scroll{height:auto;overflow:visible}
#stand .sd-chart.scroll{height:auto;columns:auto;column-count:1;overflow:visible;max-width:36em;padding-bottom:45vh}
#stand .sd-pages.scroll{flex-direction:column;align-items:center;gap:20px;min-height:0;padding-bottom:45vh}
/* the foot: where you are, and how pages turn */
#stand .sd-mid{display:inline-flex;align-items:center;gap:12px;min-width:0}
#stand .sd-turn button{min-height:36px;padding:0 12px;font-size:13px}
@media (max-width:520px){#stand .sd-mid .sd-where{display:none}}
/* a turn: the new page eases in from the side it came from */
@keyframes sd-in-n{from{transform:translateX(28px);opacity:.25}}
@keyframes sd-in-p{from{transform:translateX(-28px);opacity:.25}}
#stand .sd-main.turn-n > *{animation:sd-in-n 170ms ease-out}
#stand .sd-main.turn-p > *{animation:sd-in-p 170ms ease-out}
@media (prefers-reduced-motion:reduce){#stand .sd-main.turn-n > *,#stand .sd-main.turn-p > *{animation:none}}
#stand .sd-chartbar select{min-height:44px;border:1px solid var(--sd-line);border-radius:10px;background:var(--sd-raise);color:inherit;font:600 15px system-ui,sans-serif;padding:0 8px}
#stand .sd-shapes{color:var(--sd-mute);font:600 14px system-ui,sans-serif}
/* the chart check screen (chartcheck.js): the sheet, the text, the chart as the band sees it */
#chartcheck{position:fixed;inset:0;z-index:1000;background:var(--color-paper,#fff);color:var(--color-ink,#1d1a17)}
#chartcheck .cc{display:grid;grid-template-rows:auto auto minmax(0,1fr);height:100%;height:100dvh}
#chartcheck .cc-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px max(16px,env(safe-area-inset-left));border-bottom:1px solid var(--color-rule,#ddd)}
#chartcheck .cc-t{display:grid;min-width:0}#chartcheck .cc-t b{font-size:17px}
#chartcheck .grow{flex:1}
#chartcheck .cc-notes{margin:8px 16px 0;display:grid;gap:4px}
#chartcheck .cc-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:0;min-height:0}
#chartcheck .cc-body.nopdf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#chartcheck .cc-body>div{min-height:0;overflow:auto;padding:12px 16px;border-right:1px solid var(--color-rule,#ddd)}
#chartcheck .cc-pdf{background:var(--color-sunk,#e9e6df)}#chartcheck .cc-pdf canvas{display:block;margin:0 auto 8px;box-shadow:0 1px 4px rgba(0,0,0,.2);background:#fff}
#chartcheck .cc-edit{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px}
#chartcheck .cc-text{width:100%;box-sizing:border-box;min-height:320px;resize:none;font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;padding:10px;border:1px solid var(--color-rule,#ddd);border-radius:10px;background:transparent;color:inherit}
#chartcheck .cc-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-weight:600;font-size:14px;margin-bottom:8px}
#chartcheck .cc-chart{font-size:17px}
@media (max-width:1100px){#chartcheck .cc-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#chartcheck .cc-body .cc-prev{grid-column:1/-1;border-top:1px solid var(--color-rule,#ddd)}
  #chartcheck .cc-body.nopdf .cc-prev{grid-column:auto;border-top:0}#chartcheck .cc-body{overflow:auto;grid-auto-rows:minmax(60vh,auto)}}
@media (max-width:700px){#chartcheck .cc-body,#chartcheck .cc-body.nopdf{grid-template-columns:1fr;overflow:auto}#chartcheck .cc-body>div{border-right:0;border-bottom:1px solid var(--color-rule,#ddd);overflow:visible}
  #chartcheck .cc-body .cc-prev{grid-column:auto}#chartcheck .cc-edit{grid-template-rows:auto auto auto}#chartcheck .cc-text{min-height:0;height:42vh}
  #chartcheck .cc-top .grow{display:none}#chartcheck .cc-t{flex:1 1 100%}#chartcheck .cc-top .btn{flex:1}}

/* the recording, from Listen in the top bar: a panel over the foot of the page, the player loaded only on Play */
#stand .sd-listen{position:absolute;left:0;right:0;bottom:calc(68px + env(safe-area-inset-bottom));z-index:5;display:flex;justify-content:center;padding:0 12px;pointer-events:none}
#stand .sd-listen-in{pointer-events:auto;width:min(560px,100%);max-height:60vh;overflow:auto;background:var(--sd-raise);border:1px solid var(--sd-line);border-radius:16px;box-shadow:0 8px 40px #0004;padding:14px}
#stand .sd-listen .sd-row{display:flex;justify-content:flex-end;margin-top:8px}
#stand .sd-listen .lsn-open{color:var(--sd-acc)}

#stand .sd-cuebar{position:absolute;left:50%;top:70px;transform:translateX(-50%);z-index:6;max-width:92%;display:flex;align-items:baseline;gap:14px;padding:10px 22px;border-radius:14px;background:#F6B400;color:#000;box-shadow:0 6px 24px rgba(0,0,0,.35);font:800 clamp(22px,5vw,44px)/1.15 system-ui,-apple-system,sans-serif;animation:sd-cue .5s ease 2}
#stand .sd-cuebar[hidden]{display:none}#stand .sd-cuebar span{font-weight:600;font-size:.45em;opacity:.75;white-space:nowrap}
@keyframes sd-cue{50%{transform:translateX(-50%) scale(1.06)}}
@media (prefers-reduced-motion:reduce){#stand .sd-cuebar{animation:none}}
#stand .sd-cuebox{position:absolute;right:10px;top:62px;z-index:7;display:flex;flex-wrap:wrap;gap:8px;max-width:min(420px,94vw);padding:12px;border-radius:12px;background:var(--sd-raise,#fff);border:1px solid var(--sd-line,#ccc);box-shadow:0 8px 28px rgba(0,0,0,.3)}
#stand .sd-cuebox .sd-btn{min-height:44px;padding:0 14px;font-weight:700}