/* 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;
  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 */
  column-gap: 0;
  height: 100%;
  gap: 0;
  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;
  overflow: hidden;
  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;
  content-visibility: visible;
}
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;
}
/* 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 control bar: spread-thumbnail filmstrip ──────
   Replaces the transport (no video to drive) with one thumbnail per spread. */
body.sheet-mode #control-bar       { justify-content: flex-start; }
body.sheet-mode #transport-controls { display: none !important; }  /* beat Bootstrap .d-flex */

#sheet-thumbs { display: none; }
body.sheet-mode #sheet-thumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 10px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.sheet-thumb {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  padding: 3px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  cursor: pointer;
}
.sheet-thumb:hover    { border-color: rgba(0, 0, 0, 0.45); }
.sheet-thumb.active   { border-color: var(--gp-gold); box-shadow: 0 0 0 2px var(--gp-gold); }
.sheet-thumb-pages    { display: flex; gap: 3px; align-items: flex-start; }
.sheet-thumb-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 5px;            /* keep an empty (last) page visible as a blank leaf */
}
.sheet-thumb-sys      { display: flex; flex-direction: row; align-items: flex-end; }
/* Row height is set per-layout (--thumb-h) so R systems fit the bar height. */
.sheet-thumb img      { height: var(--thumb-h, 9px); width: auto; display: block; mix-blend-mode: multiply; }
.sheet-thumb-num {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  color: #333;
  font: 600 12px/22px var(--bs-font-monospace);
  text-align: center;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* 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 slider: only shown in performance mode, pinned to the left */
#tempo-control                              { display: none; }
body.performance-mode #tempo-control {
  display: flex;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #555;
}
#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); }