/* =====================================================================
 * styles.css — app chrome + preview "sheets" + A4 print rules.
 * The .sheet markup is shared by the on-screen preview and the
 * Print -> Save as PDF path (unicode-faithful output).
 * ===================================================================== */
:root{
  --bg:#f4f5f7; --panel:#ffffff; --ink:#1b1f24; --muted:#6b7280;
  --line:#e3e6ea; --line2:#cdd2d8; --accent:#2f5fb3; --accent-d:#244a8c;
  --head:#2b3440; --ok:#2f8f3f; --warn:#c4621b;
  --mono:"DejaVu Sans Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;touch-action:pan-x pan-y}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);font-size:14px}
html.cp-open{overflow:hidden;overscroll-behavior:none}
body.cp-open{position:fixed;left:0;right:0;height:auto;overflow:visible}
button,input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink)}
h1,h2,h3{margin:.2em 0}
code{font-family:var(--mono);background:#eef1f4;padding:0 3px;border-radius:3px;font-size:.9em}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:30;display:flex;gap:.5rem;align-items:center;
  flex-wrap:wrap;padding:.55rem .8rem;background:var(--head);color:#fff;box-shadow:0 1px 6px rgba(0,0,0,.18);
  /* PWA on iPhone: keep out from under the status bar (clock/battery) */
  padding-top:calc(.55rem + env(safe-area-inset-top,0px));
  padding-left:calc(.8rem + env(safe-area-inset-left,0px));
  padding-right:calc(.8rem + env(safe-area-inset-right,0px))}
.topbar .brand{font-weight:700;letter-spacing:.04em;margin-right:.4rem}
.topbar .brand small{font-weight:400;opacity:.7;letter-spacing:0}
.topbar .spacer{flex:1}
.mobile-dock,#mobileMoreModal{display:none}
.btn{border:1px solid var(--line2);background:#fff;color:var(--ink);border-radius:7px;
  padding:.4rem .7rem;cursor:pointer;line-height:1;white-space:nowrap}
a.btn{text-decoration:none;display:inline-flex;align-items:center;gap:.25rem}
.btn:hover{background:#f0f2f5}
.btn.primary{background:var(--accent);border-color:var(--accent-d);color:#fff}
.btn.primary:hover{background:var(--accent-d)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.sm{padding:.25rem .45rem;font-size:.82rem;border-radius:6px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost:disabled:hover{background:transparent}
.btn.danger{color:#b3261e;border-color:#e3b6b3}
.btn.danger:hover{background:#fdecec}
.menu{position:relative}
.menu-pop{position:absolute;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line2);
  border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);min-width:230px;padding:.3rem;display:none}
.menu-pop.open{display:block}
.menu-pop button{display:block;width:100%;text-align:left;border:0;background:none;padding:.5rem .6rem;
  border-radius:6px;cursor:pointer;color:var(--ink)}
.menu-pop button:hover{background:#f0f2f5}
.field{display:flex;align-items:center;gap:.35rem;color:#fff;font-size:.85rem}
.field input[type=number]{width:3.4rem;padding:.25rem;border-radius:6px;border:1px solid var(--line2)}

/* ---- layout ---- */
.layout{display:grid;grid-template-columns:var(--editorW,420px) 6px 1fr;gap:0;height:calc(100vh - 52px)}
.editor,.preview-wrap{overflow:auto;height:100%}
.editor{background:var(--panel);border-right:1px solid var(--line);padding:.8rem;min-width:0}
.preview-wrap{padding:1.2rem;background:#dfe3e8}
/* draggable splitter between editor and preview */
.resizer{background:var(--line);cursor:col-resize;position:relative;touch-action:none}
.resizer::after{content:"";position:absolute;inset:0 -3px;}
.resizer:hover,.resizer:active{background:var(--accent)}
@media(max-width:880px){
  .layout{grid-template-columns:1fr;height:auto}
  .editor{border-right:0;border-bottom:1px solid var(--line)}
  .resizer{display:none}
  /* topbar menus wrap to the left here, so open dropdowns leftward (not off-screen) */
  .menu-pop{left:0;right:auto;max-width:calc(100vw - 16px)}
}

/* ---- editor ---- */
.editor h2{font-size:1rem;margin:.2rem 0 .6rem}
.ed-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.ed-head h2{margin:0;flex:1}

/* view scope: topbar switcher + editor hint + per-card badges */
.scope-sel{max-width:200px;padding:.35rem .4rem;border-radius:7px;border:1px solid rgba(255,255,255,.35);
  background:transparent;color:#fff;font-size:.85rem}
.scope-sel option{color:var(--ink)}
.scope-sel.scoped{background:var(--accent);border-color:var(--accent-d);font-weight:600}
.scope-hint{font-size:.78rem;color:#fff;background:var(--accent);border-radius:7px;
  padding:.35rem .55rem;margin-bottom:.6rem}
/* tiny flip switch (🏷 all sets) */
.allsets{display:flex;align-items:center;gap:.3rem;font-size:.78rem;color:var(--muted);
  cursor:pointer;user-select:none;white-space:nowrap}
.switch{-webkit-appearance:none;appearance:none;position:relative;width:30px;height:18px;
  background:#cdd2d8;border-radius:999px;cursor:pointer;outline:none;transition:background .15s;margin:0}
.switch:checked{background:var(--accent)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;
  border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.switch:checked::after{left:14px}

.inset-b{font-size:.7rem;font-weight:700;color:#fff;background:var(--accent);
  border-radius:5px;padding:.08rem .3rem;font-variant-numeric:tabular-nums;margin-right:.15rem}
.song-card.out-scope .sc-head .ttl,.song-card.out-scope .sc-head .num{color:var(--muted);opacity:.55}

/* review queue */
.rv-progress{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.rv-song{font-weight:700;color:var(--head);margin:.1rem 0 .45rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.rv-song .rv-sec{font-weight:600;font-size:.85rem;background:#f0f2f5;border-radius:999px;padding:.15rem .6rem}
.rv-song .rv-sec.red{background:#fdf0ef}
.rv-song .rv-sec.yellow{background:#fdf7e6}
.rv-fields{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-top:.6rem}
.rv-fields .rv-wide{grid-column:1/-1}
.rv-actions{border-top:1px dashed var(--line);padding-top:.6rem}
.rv-actions #rvBack{min-width:52px}
/* spotlight on the sheet: the mark currently under review */
.rv-target{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px;
  animation:rvpulse 1.2s ease-in-out infinite}
@keyframes rvpulse{0%,100%{outline-color:var(--accent)}50%{outline-color:rgba(47,95,179,.2)}}
@media print{.rv-target{outline:none;animation:none}}
.song-card{border:1px solid var(--line);border-radius:9px;margin-bottom:.7rem;background:#fff;overflow:hidden}
.song-card>.sc-head{display:flex;align-items:center;gap:.4rem;padding:.45rem .55rem;
  background:#f6f8fa;border-bottom:1px solid var(--line);cursor:grab}
.song-card>.sc-head:active{cursor:grabbing}
.sc-head .num{font-family:var(--mono);font-weight:700;color:var(--accent)}
.sc-head .ttl{font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-head .chev{transition:transform .15s;color:var(--muted)}
.song-card.open .sc-head .chev{transform:rotate(90deg)}
.sc-body{display:none;padding:.6rem}
.song-card.open .sc-body{display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.row{margin-bottom:.5rem}
.row>label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:.15rem}
.row input,.row textarea,.row select{width:100%;padding:.4rem .5rem;border:1px solid var(--line2);border-radius:7px;background:#fff}
.tempo-wrap{display:flex;gap:.25rem;align-items:stretch}
.tempo-wrap input{flex:1;min-width:0}
.tempo-wrap .btn{min-width:52px;font-variant-numeric:tabular-nums}
.row textarea{resize:vertical;min-height:2.4rem;line-height:1.35}
.sub{margin:.55rem 0 .3rem;font-size:.8rem;font-weight:700;color:var(--head);text-transform:uppercase;letter-spacing:.03em}
.pair{display:grid;grid-template-columns:15px 32% 1fr auto;gap:.35rem;margin-bottom:.35rem;align-items:center}
.pair input{min-width:0;padding:.35rem .45rem;border:1px solid var(--line2);border-radius:6px}
.chord-value{display:flex;align-items:center;gap:.25rem;min-width:0}
.chord-value input{flex:1}
.chord-pad-open{display:none;min-width:44px;min-height:40px;padding:.25rem}
.riff-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:.35rem;align-items:center;min-width:0;
  border:1px solid var(--line);border-radius:7px;padding:.4rem;margin-bottom:.35rem;background:#fafbfc}
.riff-row .rl{width:100%;min-width:0;font-weight:600}
.riff-row .badge{font-size:.72rem;color:#fff;background:var(--ok);border-radius:10px;padding:.1rem .4rem}
.riff-row .badge.empty{background:var(--muted)}
.riff-row .rnote{grid-column:1/-1;width:100%;min-width:0;min-height:2.8rem;margin-top:.3rem;padding:.3rem .45rem;
  border:1px solid var(--line2);border-radius:6px;resize:vertical;overflow:hidden;overflow-wrap:anywhere;line-height:1.35}
.addline{background:none;border:1px dashed var(--line2);border-radius:7px;color:var(--accent);
  padding:.35rem .5rem;cursor:pointer;width:100%}
.addline:hover{background:#f0f4fb}
.sc-actions{display:flex;gap:.35rem;margin-top:.5rem;border-top:1px dashed var(--line);padding-top:.5rem}

/* empty state */
.empty-hint{color:var(--muted);text-align:center;padding:2rem 1rem;border:1px dashed var(--line2);border-radius:10px}

/* ---- drag & drop (songs + chord sections) ---- */
.grip{cursor:grab;color:var(--muted);user-select:none;font-size:.95rem;line-height:1;text-align:center;letter-spacing:-1px}
.grip:hover{color:var(--accent)}
.grip:active{cursor:grabbing}
.song-card.dragging,.pair.dragging{opacity:.45}
.song-card.drop-before{box-shadow:0 -3px 0 -1px var(--accent)}
.song-card.drop-after{box-shadow:0 3px 0 -1px var(--accent)}
.pair.drop-before{box-shadow:0 -2px 0 0 var(--accent)}
.pair.drop-after{box-shadow:0 2px 0 0 var(--accent)}

/* ---- tab grid editor (modal) ---- */
.modal-bg{position:fixed;inset:0;background:rgba(20,24,30,.5);display:none;z-index:50;align-items:flex-start;justify-content:center;
  padding:calc(12px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px))}
.modal-bg.open{display:flex}
.modal{display:flex;flex-direction:column;background:#fff;border-radius:12px;max-width:900px;width:100%;max-height:100%;overflow:hidden;box-shadow:0 16px 50px rgba(0,0,0,.35)}
.modal-head{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);background:#fff;z-index:2;flex:none}
.modal-head h3{flex:1}
.modal-body{padding:1rem;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.tabgrid{overflow-x:auto;border:1px solid var(--line);border-radius:8px;padding:.5rem;background:#fbfcfd}
.tabgrid table{border-collapse:collapse;font-family:var(--mono)}
.tabgrid td{border:1px solid #eceff2;padding:0;text-align:center}
.tabgrid .slabel{font-weight:700;color:var(--accent);padding:0 .4rem;background:#f4f7fb;position:sticky;left:0}
.tabgrid .colhead td{font-size:.7rem;color:var(--muted);border:0;height:1.2rem}
.tabgrid .colhead .symcol{cursor:default}
.cellbtn{width:30px;height:26px;border:0;background:none;cursor:pointer;font-family:var(--mono);color:var(--ink)}
.cellbtn:hover{background:#eaf1fc}
.cellbtn.set{background:#dbe7fb;font-weight:700;color:var(--accent-d);border-radius:4px}
.symcell{font-family:var(--mono);font-weight:700;color:#7a4fb0}
.coltools{display:flex;flex-direction:column;gap:2px;padding:2px}
.coldrag{cursor:grab;color:var(--muted);font-size:.7rem;line-height:1;text-align:center;
  letter-spacing:-1px;user-select:none;padding:1px 0}
.coldrag:hover{color:var(--accent)}
.coldrag:active{cursor:grabbing}
.tabgrid td.tdrop-l{box-shadow:inset 3px 0 0 var(--accent)}
.tabgrid td.tdrop-r{box-shadow:inset -3px 0 0 var(--accent)}
.coltools button{font-size:.62rem;border:1px solid var(--line2);background:#fff;border-radius:4px;cursor:pointer;padding:1px 3px}
.coltools button:hover{background:#f0f2f5}
.tg-toolbar{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem;align-items:center}
.tg-toolbar .hint{color:var(--muted);font-size:.8rem}
.tab-preview{margin-top:.8rem}
.tab-preview pre{font-family:var(--mono);background:#10141a;color:#e6edf3;padding:.7rem;border-radius:8px;overflow:auto;font-size:12px;line-height:1.45}

/* =====================================================================
 *  PREVIEW SHEETS  (shared with print)
 * ===================================================================== */
#preview{max-width:820px;margin:0 auto}
/* edit mode: double-click deep-links into the editor; touch-action lets
   iOS fire dblclick on double-tap instead of double-tap-zooming */
body:not(.stage) #preview .songsheet{touch-action:manipulation}
body:not(.stage) #preview .songsheet .chords tr:hover td{background:#f2f6fd}
body:not(.stage) #preview .songsheet:hover{outline:1px dashed var(--line2)}
.sheet{background:#fff;color:#11151a;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.12);
  padding:16mm 14mm;margin:0 auto 1.2rem;width:210mm;min-height:auto}
.sheet h3{font-size:.92rem;margin:1.6rem 0 .55rem;color:var(--head)}
.sheet .note{font-size:.82rem;color:#333;line-height:1.5;margin:.2rem 0 .5rem}
.cover .band{font-size:2.4rem;letter-spacing:.02em;margin:0;line-height:1.05}
.cover .subtitle{font-style:italic;color:#444;margin:.2rem 0 .8rem}
.cover .meta{font-size:.8rem;color:#555;margin:.2rem 0 1.2rem;line-height:1.6}
.cover-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:.84rem}
.cover-table th{background:var(--head);color:#fff;text-align:left;padding:.32rem .5rem;font-weight:600}
.cover-table th:first-child{width:2.2rem}
.cover-table td{padding:.28rem .5rem;border-bottom:1px solid #eef1f4}
.cover-table td.c{text-align:center}
.cover-table tr.grp td{background:#eef2f7;font-weight:700;color:var(--head)}
.cover-table td.rev{width:3rem;border-left:1px solid #eef1f4}
.cover-table tbody tr:not(.grp):hover{background:#fafcff}

.legend{display:flex;flex-wrap:wrap;gap:.5rem .55rem;margin-top:.55rem}
.pill{display:inline-block;border:1px solid;border-radius:13px;padding:.12rem .6rem;font-size:.78rem;font-weight:600}
.pills{display:flex;flex-wrap:wrap;gap:.35rem .45rem;align-items:center;margin:.2rem 0 .25rem}
.pills .arr{color:#aaa;font-size:.8rem;margin:0 .1rem}

.songsheet-head{display:flex;align-items:baseline;gap:.6rem;background:var(--head);color:#fff;
  border-radius:5px;padding:.3rem .6rem;margin-bottom:.5rem}
.fh-title{font-weight:700;letter-spacing:.02em}
.fh-meta{margin-left:auto;font-size:.8rem;opacity:.85}
.songsheet .lbl{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--head);margin:.5rem 0 .15rem}
.songsheet .raw{font-size:.85rem;color:#444}
.chords{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:.1rem}
.chords td{padding:.22rem .5rem;border-bottom:1px solid #eef1f4;vertical-align:top}
/* chord label 0.62×Size, value 0.7×Size — exact parity with the vector PDF */
.chords td.cl{font-weight:600;width:36%;border-radius:2px;font-size:calc(var(--fs,12pt) * 0.62)}
.chords td.cv{font-weight:600;font-size:calc(var(--fs,12pt) * 0.7)}
.kv{font-size:.84rem;margin-top:.2rem}
.kv.muted{color:#9aa1a8}
.tab-head{margin-top:.7rem;font-size:.82rem}
.tab-head .tab-note{color:#666;font-weight:400}
/* tabs render at 0.7×Size to match the vector PDF (tabPt = chordPt*0.7) */
pre.tab{font-family:var(--mono);font-size:calc(var(--fs,12pt) * 0.7);line-height:1.32;background:#fafafa;border:1px solid #eee;
  border-radius:6px;padding:.5rem .6rem;overflow-x:auto;margin:.25rem 0 0;white-space:pre}

/* save status in the top bar */
.savestat{color:#cdd6e0;font-size:.78rem;opacity:0;transition:opacity .3s;white-space:nowrap}
.savestat.show{opacity:.92}
.savestat.warn{color:#ffd27a;opacity:1}
.menu-pop button[data-act="update"]{display:flex;align-items:center;gap:.35rem;white-space:nowrap}
.app-version{display:inline-block;padding:.24rem .38rem;border-radius:999px;background:#6b7280;color:#fff;font-size:.64rem;pointer-events:none;
  font-variant-numeric:tabular-nums;line-height:1}
.app-version.latest{background:var(--ok)}
.app-version.stale{background:#b3261e}

/* GitHub-backed sync settings */
.sync-sheet{max-width:560px}
.sync-help{font-size:.8rem;color:var(--muted);line-height:1.4;margin:.25rem 0 .7rem}
.sync-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.sync-grid label{font-size:.75rem;color:var(--muted)}
.sync-grid label:first-child,.sync-grid label:last-child{grid-column:1/-1}
.sync-grid input{display:block;width:100%;margin-top:.18rem;padding:.5rem;border:1px solid var(--line2);border-radius:7px}
.sync-transfer{display:flex;align-items:center;gap:.75rem;margin:.7rem 0;padding:.6rem;border:1px solid var(--line);border-radius:8px;font-size:.78rem;line-height:1.4}
.sync-transfer small{color:#b3261e}.sync-transfer #syncQr{flex:0 0 196px;min-height:196px;display:grid;place-items:center;color:var(--muted);text-align:center}
.sync-transfer #syncQr img,.sync-transfer #syncQr canvas{width:196px!important;height:196px!important}
.sync-state{padding:.45rem .6rem;border-radius:7px;background:#f0f2f5;color:var(--muted);font-size:.82rem}
.sync-state.ok{background:#edf7ef;color:var(--ok)}
.sync-state.warn{background:#fdecec;color:#b3261e}
.sync-library{margin:.7rem 0;padding:.6rem;border:1px solid var(--line);border-radius:8px;background:#fafbfc}
.sync-library>label{display:block;margin-bottom:.25rem;font-size:.75rem;color:var(--muted)}
#syncScan{display:none;width:100%;margin-bottom:.45rem}
.sync-picker{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.4rem;margin-bottom:.45rem}
.sync-picker select{min-width:0;padding:.45rem;border:1px solid var(--line2);border-radius:7px;background:#fff}
.sync-actions{flex-wrap:wrap}
.sync-scan-sheet{width:min(94vw,460px);height:min(78dvh,620px);display:flex;flex-direction:column;gap:.65rem}
.sync-camera{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:10px;background:#111;color:#fff}
.sync-camera video{width:100%;height:100%;object-fit:cover}
.sync-camera span{position:absolute;left:.6rem;right:.6rem;bottom:.6rem;padding:.45rem;border-radius:7px;background:#000a;text-align:center;font-size:.8rem}

/* PDF page-count readout in the top bar */
.pagecount{color:#aeb9c6;font-size:.78rem;white-space:nowrap}

/* compact (screen): denser songsheets, less wasted vertical space */
#preview.compact .songsheet{margin-bottom:10px;padding:9mm 14mm;min-height:auto}

/* compact grouping: one card per PDF page, matching the generated PDF */
.pagegroup{display:flex;flex-direction:column;align-items:center;gap:8px;
  max-width:820px;margin:0 auto 16px;padding:8px 8px 10px;
  border:1px dashed var(--line2);border-radius:12px;background:rgba(0,0,0,.025)}
.pagegroup .pagelabel{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin:.1rem .1rem 0}
.pagegroup .sheet{margin:0}

/* =====================================================================
 *  REHEARSAL MARKS & NOTES — dots on pills, screen-only block, editor rows,
 *  and the thumb-sized bottom sheet used in stage view.
 * ===================================================================== */
/* status dot: red = needs work, yellow = so-so, gray = note only */
.rdot{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:#9aa1a8;
  margin-right:.35em;vertical-align:baseline}
.rdot.red{background:#d3382f}
.rdot.yellow{background:#e6a700}
.rdot.note{background:#9aa1a8}
.rflag{font-size:.85em;margin-right:.25em;opacity:.8}
.pills .pill{position:relative}
body.stage .pills .pill,body.stage .chords tr,body.stage .songsheet-head,
body.stage pre.tab,body.stage .tab-head{cursor:pointer}

/* tab zoom overlay: full-size mono ribbon, sideways scroll */
.tabzoom pre{font-family:var(--mono);font-size:17px;line-height:1.35;white-space:pre;
  overflow-x:auto;-webkit-overflow-scrolling:touch;background:#10141a;color:#e6edf3;
  padding:.8rem .9rem;border-radius:10px;margin:.2rem 0 0}
.tz-hint{font-size:.75rem;color:var(--muted);margin-top:.4rem;text-align:center}
/* fat-thumb close target for the zoom overlay (Apple min is 44px) */
#tzClose{min-width:44px;min-height:44px;font-size:1.15rem;line-height:1;padding:.3rem .5rem;
  display:inline-flex;align-items:center;justify-content:center}
/* PC: plenty of room -> wide modal, big type */
@media (min-width:881px){
  #tabZoom .bsheet{max-width:min(1200px,94vw)}
  .tabzoom pre{font-size:28px;line-height:1.4}
}
/* phone flipped to landscape: go FULLSCREEN, maximum ribbon.
   Safe-area insets keep the title/✕ off the rounded corners and the
   EADGBe labels clear of the camera notch. */
@media (orientation:landscape) and (max-height:500px){
  #tabZoom .bsheet{max-width:none;width:100%;height:100vh;max-height:100vh;border-radius:0;
    display:flex;flex-direction:column;
    padding-top:max(.5rem, env(safe-area-inset-top,0px));
    padding-bottom:max(.5rem, env(safe-area-inset-bottom,0px));
    padding-left:max(.9rem, env(safe-area-inset-left,0px));
    padding-right:max(.9rem, env(safe-area-inset-right,0px))}
  .tabzoom pre{flex:0 1 auto;margin:auto 0;font-size:24px;line-height:1.45;
    padding-left:max(.9rem, env(safe-area-inset-left,0px))}  /* string labels clear the notch */
  #tabZoom #tzClose{min-width:54px;min-height:54px;font-size:1.4rem}  /* bigger for landscape thumbs */
  #tabZoom .tz-hint{display:none}
}

/* green "Updated" toast: shows once when a fresh version was pulled */
.updated-toast{position:fixed;top:max(10px, env(safe-area-inset-top,10px));right:12px;z-index:200;
  background:var(--ok);color:#fff;font-weight:700;font-size:.85rem;border-radius:999px;
  padding:.45rem .8rem;box-shadow:0 4px 16px rgba(0,0,0,.3);
  animation:toastin .25s ease-out}
@keyframes toastin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* rehearsal block on the songsheet — screen only, never printed */
.rehearsal{margin-top:.7rem;border-top:1px dashed var(--line2);padding-top:.35rem}
.rehearsal .rh-row{font-size:.84rem;padding:.18rem .45rem;margin:.18rem 0;
  border-left:3px solid #9aa1a8;background:#f6f7f9;border-radius:0 4px 4px 0;
  white-space:pre-line} /* one line in the note = one line on the sheet */
.rehearsal .rh-row.red{border-left-color:#d3382f;background:#fdf0ef}
.rehearsal .rh-row.yellow{border-left-color:#e6a700;background:#fdf7e6}
.rehearsal .rh-nn{font-family:var(--mono);font-size:.72rem;color:#8a929b;font-weight:700}
/* rhythm notes drawn inline wherever they appear */
.rh-rhy{display:inline-block;vertical-align:middle;max-width:100%;overflow-x:auto}
.rh-rhy svg{display:block}
.rh-rmeta{font-size:.7rem;color:#8a929b;font-variant-numeric:tabular-nums}

/* editor rows */
.rh-edit{display:grid;grid-template-columns:auto minmax(70px,auto) 1fr auto;gap:.35rem;
  align-items:center;margin-bottom:.3rem}
.rh-edit .rh-sec{font-size:.8rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rh-edit input,.rh-edit textarea{padding:.35rem .45rem;border:1px solid var(--line2);border-radius:6px;
  min-width:0;resize:vertical;line-height:1.3}
.rh-c{color:#9aa1a8;font-size:1rem !important;line-height:1}
.rh-c.red{color:#d3382f}
.rh-c.yellow{color:#e6a700}

/* bottom sheet (rehearsal + setlist) — slides from the bottom, thumb-sized */
/* z-index 70: must cover the floating stage nav (60), which sits above modals (50) */
.modal-bg.bs-bg{align-items:flex-end;justify-content:center;padding:0;z-index:70}
.bsheet{background:#fff;border-radius:16px 16px 0 0;width:100%;max-width:560px;
  max-height:82vh;overflow:auto;padding:.8rem .9rem calc(.9rem + env(safe-area-inset-bottom,0px));
  box-shadow:0 -8px 40px rgba(0,0,0,.35)}
.bs-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.bs-head h3{flex:1;margin:0;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .6rem}
.chip{min-height:40px;padding:.35rem .75rem;border-radius:999px;border:1px solid var(--line2);
  background:#fff;cursor:pointer;font-size:.9rem;line-height:1.2}
.chip.on{background:var(--accent);border-color:var(--accent-d);color:#fff}
.chip.on .rdot{outline:1.5px solid #fff}
.bs-colors{display:flex;gap:.5rem;margin:.2rem 0 .6rem}
.cbig{flex:1;min-height:46px;border:2px solid transparent;border-radius:10px;cursor:pointer;
  font-weight:600;font-size:.9rem}
.cbig.red{background:#fdf0ef;color:#b3261e}
.cbig.yellow{background:#fdf7e6;color:#8a6400}
.cbig.none{background:#f0f2f5;color:#555}
.cbig.on{border-color:currentColor}
/* pushed-note stack: one row per note, deletable */
.bs-notes{margin:.2rem 0 .4rem}
.rh-note-row{display:flex;align-items:center;gap:.5rem;font-size:.9rem;cursor:pointer;
  padding:.3rem .5rem;margin:.25rem 0;background:#f6f7f9;border-left:3px solid var(--line2);
  border-radius:0 6px 6px 0}
.rh-note-row:hover{background:#eef2f7}
.rh-note-row span:nth-child(2){flex:1;min-width:0;overflow-wrap:anywhere}
.rh-note-row .rh-n{font-family:var(--mono);font-size:.72rem;color:var(--muted);font-weight:700}
.rh-note-row .rh-pen{color:var(--muted);font-size:.85rem}
/* voice memos */
.bs-memo-bar{display:flex;gap:.6rem;align-items:center;margin:.4rem 0 .2rem}
.bs-memo-bar .btn{min-height:42px}
.rec-t{color:#b3261e;font-weight:700;font-variant-numeric:tabular-nums}
.memo-row{display:flex;align-items:center;gap:.5rem;padding:.25rem .4rem;margin:.2rem 0;
  background:#f2f6fb;border-left:3px solid var(--accent);border-radius:0 6px 6px 0}
.memo-row .m-meta{flex:1;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.memo-row .btn{min-width:42px;min-height:36px}
.chip .mbadge{font-size:.72rem}

.bs-push{display:flex;gap:.5rem;align-items:stretch}
.bs-push .btn{min-height:44px;white-space:nowrap}
#rhNote{flex:1;min-width:0;padding:.55rem .6rem;border:1px solid var(--line2);border-radius:9px;
  font-size:16px;resize:vertical;min-height:2.6rem} /* 16px = no iOS auto-zoom */
.bs-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.7rem}
.bs-actions .btn{min-height:42px;padding:.5rem 1.1rem}
.chord-pad .bs-chips{margin-bottom:.45rem}
.chord-pad{overscroll-behavior:contain}
.chord-pad .chip small{display:block;color:var(--muted);font-size:.65rem}
.chord-pad .chip.on small{color:inherit}
.cp-context{position:fixed;z-index:72;top:calc(10px + env(safe-area-inset-top,0px));left:12px;right:12px;
  max-width:536px;margin:auto;padding:.5rem .65rem;border:1px solid var(--line2);border-radius:10px;
  background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.cp-context label{display:block;margin-bottom:.15rem;color:var(--muted);font-size:.65rem;text-transform:uppercase}
.cp-edit{position:relative}
.cp-context textarea{display:block;width:100%;min-height:4.4rem;padding:.35rem .45rem;resize:none;
  border:1px solid var(--line2);border-radius:6px;font:600 16px/1.35 var(--mono);caret-color:var(--accent)}
.cp-marker{position:absolute;inset:0;padding:.35rem .45rem;border:1px solid var(--line2);border-radius:6px;
  overflow:auto;background:#fff;font:600 16px/1.35 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}
#cpText:focus+.cp-marker{display:none}
.cp-caret{display:inline-block;width:3px;height:1.1em;margin:0 1px;vertical-align:-.15em;background:var(--accent)}
.cp-compose{display:flex;align-items:center;gap:.6rem;margin:.7rem 0}
#cpPreview{flex:1;padding:.55rem .7rem;border-radius:9px;background:#f0f2f5;font:700 1.2rem var(--mono)}
#cpInsert{min-height:44px}
.cp-tools .chip{flex:1}
.cp-transpose .chip{flex:1 1 0}

/* setlist rows: big touch targets, tap row = jump, ▲▼ = reorder */
.set-row{display:flex;align-items:center;gap:.55rem;min-height:48px;padding:.3rem .25rem;
  border-bottom:1px solid var(--line);cursor:pointer}
.set-row:hover{background:#f6f8fa}
.set-row .num{font-family:var(--mono);font-weight:700;color:var(--accent)}
.set-row .ttl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-row .btn{min-width:44px;min-height:38px}
.set-row.rest{opacity:.75;cursor:default}
.set-bar{display:flex;gap:.4rem;align-items:center;margin:.1rem 0 .5rem}
.set-bar select{flex:1;min-width:0;padding:.45rem .4rem;border:1px solid var(--line2);border-radius:8px;
  background:#fff;font-size:.95rem}
.set-rest{margin-top:.7rem;font-size:.72rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:.2rem}

/* big tap-tempo pad (fixed, thumb-sized) */
.tap-pad{display:none;position:fixed;left:50%;transform:translateX(-50%);z-index:80;
  bottom:max(14px,env(safe-area-inset-bottom,14px));width:min(440px,calc(100vw - 20px));
  background:var(--head);color:#fff;border-radius:18px;padding:.7rem .8rem;
  box-shadow:0 10px 40px rgba(0,0,0,.45)}
.tap-pad.open{display:block}
.tp-info{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.5rem}
#tpBpm{font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums;min-width:3.2rem}
#tpCount{color:#aeb9c6;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tpHit{display:block;width:100%;min-height:110px;border:2px dashed rgba(255,255,255,.35);
  border-radius:14px;background:rgba(255,255,255,.08);color:#fff;font-size:1.6rem;
  font-weight:800;letter-spacing:.2em;cursor:pointer}
#tpHit:active{background:rgba(255,255,255,.22)}
.tp-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.55rem}
.tp-actions .btn{min-height:42px}
#tpHit.hit{background:rgba(255,255,255,.28)}
#tpRhythm{margin-right:auto}                 /* rhythm on the left, Cancel/Done right */
.tp-rhy{margin-top:.55rem;background:rgba(255,255,255,.08);border-radius:10px;padding:.5rem .6rem}
.tp-rhy code{display:block;font-family:var(--mono);font-size:.95rem;color:#ffd27a;
  white-space:pre-wrap;line-height:1.5}
.tp-rhy .tp-actions{margin-top:.4rem}
.tp-rhy[hidden]{display:none}
/* editable rhythm grid: one row per bar, gaps mark the beats */
#tpRhyGrid{display:flex;flex-direction:column;gap:4px;margin:.1rem 0 .4rem}
.rhy-bar{display:flex;gap:2px}
.rhy-c{flex:1;min-width:0;height:28px;border-radius:5px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);color:#8a929b;cursor:pointer;font-size:.72rem;
  font-family:var(--mono);padding:0;line-height:1}
.rhy-c.on{background:#e6a700;border-color:#e6a700;color:#111;font-weight:700}
.rhy-c.beat-start{margin-left:7px}
#tpRhyNotes{overflow-x:auto;margin:.15rem 0 .3rem}
#tpRhyNotes svg{display:block}

/* floating "back where I was" after a double-tap deep link */
.back-float{position:fixed;right:16px;bottom:16px;z-index:45;min-height:44px;
  padding:.6rem 1rem;border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.3)}
.back-float[hidden]{display:none}
body.stage .back-float{display:none}
@media print{.back-float{display:none !important}}

/* practice digest */
.dg-song{margin-bottom:.8rem}
.dg-title{font-weight:700;color:var(--head);border-bottom:1px solid var(--line);
  padding-bottom:.15rem;margin-bottom:.25rem}
#digestBody .rh-row{font-size:.88rem;padding:.22rem .5rem;margin:.2rem 0;
  border-left:3px solid #9aa1a8;background:#f6f7f9;border-radius:0 6px 6px 0}
#digestBody .rh-row.red{border-left-color:#d3382f;background:#fdf0ef}
#digestBody .rh-row.yellow{border-left-color:#e6a700;background:#fdf7e6}

/* =====================================================================
 *  STAGE / READING VIEW — full-screen, device-friendly, editor hidden.
 *  Toggled by the ⛶ View button (body.stage). Floating nav flips songs.
 * ===================================================================== */
.stage-nav{display:none}
body.stage{height:auto}
body.stage .topbar,body.stage .editor,body.stage .resizer{display:none !important}
body.stage .layout{display:block;height:auto}
/* fill the screen; JS scales the current song to be as big as fits on ONE page */
/* touch-action:pan-y -> the horizontal axis is ours (swipe = flip song), the
   vertical one stays the browser's; pinch-zoom is untouched. */
body.stage .preview-wrap{height:100vh;overflow:hidden;background:#dfe3e8;touch-action:pan-y;
  padding:calc(10px + env(safe-area-inset-top,0px)) 8px calc(80px + env(safe-area-inset-bottom,0px))}
body.stage #preview{position:relative;width:100%;height:100%;max-width:none;margin:0;will-change:transform}
body.stage .pagegroup{display:contents}
body.stage .pagegroup .pagelabel{display:none}
/* one song at a time; JS centres + scales the current sheet to fit exactly */
body.stage .sheet{display:none}
body.stage .sheet.stage-current{display:block;position:absolute;top:0;left:0;
  width:794px;max-width:none;margin:0;padding:12mm 12mm;
  transform-origin:top left;box-shadow:0 3px 18px rgba(0,0,0,.22)}
/* portrait phones: one page, tight padding, headers/pills wrap when narrow */
body.stage.stage-portrait .sheet.stage-current{padding:6mm 4mm}
/* narrow reflow: let the header and pills wrap instead of forcing width */
body.stage.stage-portrait .sheet.stage-current .songsheet-head{flex-wrap:wrap}
body.stage.stage-portrait .sheet.stage-current .fh-meta{margin-left:0}

/* ---- GIG NIGHT MODE: dark venue, chords only, big ---- */
body.stage.gig .preview-wrap{background:#07090d}
/* invert+rotate ≈ keeps hues, flips luminance: white page -> near-black */
body.stage.gig .sheet.stage-current{filter:invert(.93) hue-rotate(180deg);box-shadow:none}
body.stage.gig pre.tab,body.stage.gig .kv,body.stage.gig .rehearsal{display:none}
body.stage.gig .tab-head{opacity:.75;font-size:.75rem}  /* stays tappable -> tab zoom */
body.stage.gig .chords td.cv{font-size:calc(var(--fs,12pt) * 0.95);font-weight:700}
body.stage.gig .chords td.cl{font-size:calc(var(--fs,12pt) * 0.75)}
.stage-nav .btn.nav.on{background:var(--accent)}

/* floating navigation pill */
body.stage .stage-nav{display:flex;gap:.4rem;align-items:center;
  position:fixed;left:50%;transform:translateX(-50%);z-index:60;
  bottom:max(12px,env(safe-area-inset-bottom,12px));
  background:var(--head);color:#fff;border-radius:999px;padding:.35rem .45rem;
  box-shadow:0 6px 24px rgba(0,0,0,.35);max-width:calc(100vw - 16px)}
.stage-nav .btn.nav{border:0;background:rgba(255,255,255,.16);color:#fff;border-radius:999px;
  padding:.55rem .85rem;font-size:1rem;line-height:1;white-space:nowrap}
.stage-nav .btn.nav:hover{background:rgba(255,255,255,.3)}
.stage-nav .btn.nav.exit{background:var(--accent)}
.stage-nav .btn.nav.exit:hover{background:var(--accent-d)}
/* FIXED width: song titles vary, the ◀ ▶ buttons must NOT move between songs
   (rapid multi-skip on desktop). Ellipsis inside, buttons stay put. */
.stage-label{font-size:.82rem;padding:0 .4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  width:min(320px,38vw);flex:0 0 auto;text-align:center}

/* small screens: the stage nav must NEVER lose buttons off-screen (the blue
   ✕ Edit was overflowing). Full-width bar, label shrinks, buttons stay. */
@media(max-width:560px){
  body.stage .stage-nav{left:8px;right:8px;transform:none;max-width:none;
    justify-content:space-between}
  .stage-label{width:auto;flex:1 1 auto;min-width:0}
  .stage-nav .btn.nav{padding:.55rem .6rem;flex:0 0 auto}
}

/* small screens: make the fixed-A4 preview fluid so phones/tablets can read it */
@media(max-width:820px){
  input,select,textarea{font-size:16px}
  .topbar{flex-wrap:nowrap;padding-bottom:.45rem}
  .topbar>.brand,.topbar>.spacer,.topbar>#undoBtn,.topbar>#syncBtn,.topbar>#setBtn,.topbar>#viewBtn{display:none}
  .topbar>.scope-sel{flex:1;max-width:none;min-width:0}
  .ed-head>#reviewBtn{display:none}
  .mobile-dock{display:flex;position:fixed;z-index:45;left:0;right:0;bottom:0;
    padding:5px max(5px,env(safe-area-inset-right,0px)) calc(5px + env(safe-area-inset-bottom,0px)) max(5px,env(safe-area-inset-left,0px));
    background:var(--head);box-shadow:0 -2px 12px rgba(0,0,0,.25)}
  .mobile-dock button{flex:1;min-width:0;min-height:45px;padding:3px 1px;border:0;background:none;color:#fff;
    font-size:.65rem;line-height:1.1;border-radius:7px;position:relative}
  .mobile-dock button span{display:block;font-size:1.05rem;line-height:1.25}
  .mobile-dock button:active{background:rgba(255,255,255,.16)}
  .mobile-dock button:disabled{opacity:.35}
  .mobile-dock button[data-mobile=update].stale{background:#b3261e}
  .mobile-dock button[data-mobile=update].latest,
  .mobile-dock button[data-mobile=update].success{background:var(--ok)}
  .mobile-dock button[data-mobile=update].checking span{animation:update-spin .8s linear infinite}
  .mobile-dock button[data-mobile=update].success{animation:update-ok .8s ease-out}
  .mobile-dock button[data-mobile=more][class*=sync-]::after{content:"";position:absolute;top:4px;right:8px;
    width:7px;height:7px;border-radius:50%;background:#e6a700}
  .mobile-dock button[data-mobile=more].sync-ok::after{background:#55bd67}
  .mobile-dock button[data-mobile=more].sync-warn::after{background:#ef554b}
  .layout{padding-bottom:calc(55px + env(safe-area-inset-bottom,0px))}
  #mobileMoreModal.open{display:flex}
  .mobile-more-sheet{max-height:75vh}
  .mobile-more-sheet>.bs-head{position:sticky;top:0;z-index:2;background:#fff}
  #mobileMoreContent{display:flex;flex-direction:column;gap:.65rem}
  #mobileMoreContent .field{justify-content:space-between;color:var(--ink);min-height:38px}
  #mobileMoreContent .field input[type=number]{width:5rem}
  #mobileMoreContent>.menu,#mobileMoreContent>.btn{width:100%}
  #mobileMoreContent>.menu>.btn,#mobileMoreContent>.btn{width:100%;min-height:44px;color:var(--ink);border-color:var(--line2)}
  #mobileMoreContent>.menu>#genBtn{color:#fff}
  #mobileMoreContent .menu-pop.open{position:static!important;inset:auto!important;max-width:none!important;
    margin-top:.3rem;box-shadow:none}
  #mobileMoreModal.submenu-open .mobile-more-sheet{max-height:calc(100dvh - env(safe-area-inset-top,0px));overflow:hidden}
  #mobileMoreModal.submenu-open #mobileMoreContent>*{display:none}
  #mobileMoreModal.submenu-open #mobileMoreContent>.menu.submenu-active{display:block}
  #mobileMoreContent .pagecount,#mobileMoreContent .savestat{color:var(--muted)}
  .sync-grid{grid-template-columns:1fr}
  .sync-grid label{grid-column:auto!important}
  .sync-transfer{display:none}
  #syncScan{display:block}
  .sync-picker{grid-template-columns:minmax(0,1fr) auto}
  .sync-picker #syncLoad{grid-column:1/-1}
  body.stage .mobile-dock{display:none}
  body.stage .layout{padding-bottom:0}
  .chord-pad-open{display:inline-flex;align-items:center;justify-content:center}
  #preview{max-width:100%}
  .sheet{width:100%;padding:8mm 6mm}
  .pagegroup{max-width:100%}
}
@keyframes update-spin{to{transform:rotate(360deg)}}
@keyframes update-ok{50%{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.mobile-dock button[data-mobile=update]{animation:none!important}.mobile-dock button[data-mobile=update] span{animation:none!important}}

/* =====================================================================
 *  PRINT  ->  A4, only the sheets
 *  - cover always on its own page
 *  - default: 1 songsheet per page  ·  compact: songsheets flow, several per page
 * ===================================================================== */
@media print{
  @page{size:A4;margin:0}
  /* force background colours (header bands, pills, tinted cells) to print —
   * without this browsers drop all backgrounds and the sheets look washed out */
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
  .topbar,.editor,.modal-bg,.resizer,.stage-nav,.mobile-dock{display:none !important}
  /* rehearsal scribbles are personal — keep them off the printed booklet */
  .rehearsal,.rdot,.rflag{display:none !important}
  /* …EXCEPT the practice digest, which is printable on demand */
  body.digest-printing .layout{display:none !important}
  body.digest-printing #digestModal{display:block !important;position:static;background:#fff;padding:0}
  body.digest-printing #digestModal .bsheet{box-shadow:none;border-radius:0;max-width:none;max-height:none;padding:10mm}
  body.digest-printing #digestModal .bs-head .btn{display:none}
  body.digest-printing .dg-song{break-inside:avoid}
  .layout{display:block;height:auto}
  .preview-wrap{padding:0;background:#fff;overflow:visible}
  #preview{max-width:none;margin:0}
  /* grouping is a screen-only affordance: don't let it drive print pagination */
  .pagegroup{display:block;border:0;background:none;padding:0;margin:0;max-width:none}
  .pagegroup .pagelabel{display:none}
  .sheet{box-shadow:none;border-radius:0;margin:0;width:210mm;padding:14mm 13mm}
  .sheet.cover{min-height:297mm;page-break-after:always}
  #preview:not(.compact) .songsheet{min-height:297mm;page-break-after:always}
  #preview.compact .songsheet{min-height:auto;padding:8mm 13mm}
  .songsheet{page-break-inside:avoid}
  pre.tab{break-inside:avoid}
}