/* Sheet (pages) mode: two-page spread + thumbnail filmstrip. */

/* ── Sheet (pages) mode: two-page "book spread" layout ───────
   A dedicated view mode (also the default for a piece with no video). The video
   column is removed and a screen-filling slice of the score is shown as an open
   book: systems stack down the left page, continue down the right page
   (column-major), each scaled to fit so the whole spread fits on screen with
   NO scrolling. A full-height rule down the middle is the spine. How many
   systems each page holds and which are shown are set by _layoutSheetPages. */
body.sheet-mode #player-col { display: none; }

body.sheet-mode #score-wrapper {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;                /* anchor the #sheet-dots overlay */
  background: var(--tile-bg, #fff);  /* whole page uses the tile colour */
  cursor: pointer;                   /* click a page (left half = back, right = forward) to turn */
}
/* Two layout paths, chosen inline by _layoutSheetPages via `display`:
   - display:grid — pages have equal system counts: a two-column grid whose row
     tracks (heights set inline) span both pages, so system k lines up across
     the spine. align-content spreads the leftover height as even gaps.
   - display:block + column-count:2 — unequal counts: each page fills its height
     independently (denser), no cross-page alignment. */
body.sheet-mode .bar-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* two pages; rows set inline by JS */
  align-content: space-evenly;      /* (grid) spread leftover height as even gaps */
  column-fill: auto;                /* (multicol) fill left page, then right */
  height: 100%;
  gap: 0;                           /* zeroes row- and column-gap */
  padding: 0;
  background: var(--tile-bg, #fff);
  overflow: hidden;
  position: relative;
}
/* Each system fills its page-width column (bars share width proportional to
   their natural width via --tile-w); the row height follows. align-self:end
   seats each system on its row's baseline in the grid path. */
body.sheet-mode .score-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  align-self: end;
  break-inside: avoid;   /* (multicol) never split a system across the fold */
  width: 100%;
  margin-inline: 0;   /* left-align systems narrower than the page */
  min-width: 0;
  min-height: 0;
  /* visible (not hidden) so a fingering placed just above/below the staff in
     fingering mode isn't cropped here — it spills into the space-evenly gap
     between systems. Tiles shrink to width:100%, so there's no horizontal bleed
     to clip. */
  overflow: visible;
  padding: 4px 32px;   /* per-page margin either side of the spine */
}
body.sheet-mode .score-row.vh-hide { display: none; }
body.sheet-mode .bar-tile {
  flex: var(--tile-w, 1) 1 0;
  min-width: 0;
}
body.sheet-mode .bar-tile img {
  width: 100%;
  height: auto;
}
/* Full-height spine down the middle, between the two pages. */
body.sheet-mode .bar-strip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: rgba(0, 0, 0, 0.85);
  transform: translateX(-50%);
  pointer-events: none;
}
/* Single full-width page (portrait): no spine between pages. */
body.sheet-mode .bar-strip.single-page::after { display: none; }

/* "Too small to render legibly" fallback — shown inline by _layoutSheetPages
   (display:flex) in place of the strip; hidden everywhere else. */
#sheet-unavailable { display: none; }
body.sheet-mode #sheet-unavailable {
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2rem;
  text-align: center;
  color: #555;
  font-size: 1.15rem;
}

/* System dividers and the playhead line are meaningless without the video. */
body.sheet-mode .system-break       { display: none; }
body.sheet-mode .bar-strip > canvas { display: none; }

/* ── Sheet mode: no bottom control bar ───────────────────────
   There's no transport to drive, so drop the bar entirely and give its height
   back to the score. Page selection is a floating dot overlay (see #sheet-dots). */
body.sheet-mode #control-bar { display: none !important; }  /* beat Bootstrap .d-flex */
body.sheet-mode #detail-layout {
  height: calc(100vh - 68px);
  height: calc(100dvh - 68px);   /* reclaim the 84px the control bar used */
}

/* Floating page selector: a half-transparent pill of dots over the score,
   bottom-centre. One dot per spread; the current spread is filled. Shown by
   _updateSheetDots (display:flex) only when there's more than one spread. */
#sheet-dots {
  display: none;
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(245, 245, 245, 0.72);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.sheet-dot {
  width: 13px;
  height: 13px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.55);
  background: transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.sheet-dot:hover  { border-color: rgba(0, 0, 0, 0.85); }
.sheet-dot.active { background: rgba(0, 0, 0, 0.8); border-color: rgba(0, 0, 0, 0.8); }

/* Sheet (pages) mode button — matches the other view-mode toggles. */
.navbar #sheet-mode-btn.active     { color: #fff; }
#main-nav.nav-light #sheet-mode-btn.active { color: #1c1c1e; }

/* Tempo pill: mirrors the fingering zoom pill (see #fg-zoom in mode-fingering).
   The performance button is the left cap; this tray slides open only in
   performance mode and is collapsed (max-width:0, takes no room) otherwise. */
#tempo-control {
  display: inline-flex;
  align-items: center;
  height: 3rem;
  max-width: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  color: #555;
  border-radius: 0 1.5rem 1.5rem 0;      /* rounded right; flat left against the button */
  background: rgba(128, 128, 128, 0.26);  /* lighter tray; the button cap is darker */
  transition: max-width 0.22s ease, opacity 0.18s ease;
}
body.performance-mode #tempo-control {
  max-width: 280px;
  opacity: 1;
  padding: 0 16px 0 12px;
}
body.performance-mode #performance-mode-btn {
  background: rgba(128, 128, 128, 0.12);  /* darker cap against the lighter tray */
  border-radius: 1.5rem 0 0 1.5rem;      /* left cap of the pill */
}
#tempo-slider                               { width: 160px; accent-color: var(--gp-gold); }
#tempo-readout                              { min-width: 4.5em; text-align: right; }

/* Dark-strip mode: invert transport icon colours */
#control-bar.strip-dark .ctrl-btn                  { color: #aaa; }
#control-bar.strip-dark .ctrl-btn:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,.1); }
#control-bar.strip-dark .ctrl-btn-play             { background: #fff; color: #1c1c1e; }
#control-bar.strip-dark .ctrl-btn-play:hover       { background: #e5e5e5; transform: scale(1.07); }
#control-bar.strip-dark .text-muted                { color: #ccc !important; }
#control-bar.strip-dark #tempo-control             { color: #ccc; }
#control-bar.strip-dark .btn-outline-danger        { filter: brightness(1.3); }