/* Detail player: layout, control bar, measure strip, transport, swatches. */

/* ── Fixed bottom control bar ───────────────────────────────── */
#control-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 84px;
  background: var(--strip-bg, #fff);
  border-top: 1px solid rgba(0,0,0,0.1);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;   /* all modes: center transport buttons */
}

/* Pin the timer to the right */
#control-bar > span:last-child {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0 !important;  /* override Bootstrap ms-auto */
}
/* Edit mode: clear-waypoints button pinned to the left, mirroring the tempo slider in perf mode */
#control-bar.sync-mode #clear-waypoints-btn {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

body {
  padding-bottom: 84px;
}

/* ── Detail page: fixed-height layout (video scrolls, strip stays put) ── */
body.player-page {
  overflow: hidden;
  padding-bottom: 0;
}

#detail-layout {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 68px - 84px);
  overflow: hidden;
}

#player-col {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

#detail-layout #score-wrapper {
  flex-shrink: 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* Performance mode: hide video and pull strip + control bar up under the navbar */
body.performance-mode #player-col   { display: none; }
body.performance-mode #detail-layout { height: auto; overflow: visible; }
body.performance-mode #control-bar  { position: relative; }
/* Allow the page to scroll down to the footer (overrides player-page's
   overflow:hidden); keep horizontal locked so the strip's padding can't bleed. */
body.performance-mode               { padding-bottom: 0; overflow-x: hidden; overflow-y: auto; }

/* ── Measure strip ───────────────────────────────────────── */
.bar-strip {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0;
  padding: 0 8px;
  overflow-x: auto;
  background: #f0f0f0;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  position: relative; /* anchor the highlight canvas */
}

/* A score-row groups one musical system's bars. By default it is transparent
   to layout (display:contents) so the strip behaves as one flat flex row —
   single-row study, performance and edit modes are unaffected. It only
   materialises into a real row box in the sheet-mode spread below. */
.score-row { display: contents; }

.bar-tile {
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--tile-bg, #fff);
  /* Skip layout/paint of off-screen tiles so the strip scales to 1000+ bars.
     The per-tile inline contain-intrinsic-size reserves each tile's true
     displayed width, keeping the playhead's offsetLeft/offsetWidth exact. */
  content-visibility: auto;
}

/* Performance mode: lead-in space so first tile sits past the playhead,
   trailing space so the last tile can fully scroll past it.
   Background matches tile colour so empty padding blends with the tiles.
   mask-image fades the strip from transparent at the left edge to fully
   opaque at the playhead anchor (10%), so anything that scrolls past the
   playhead progressively disappears. */
body.performance-mode #score-wrapper {
  background: var(--tile-bg, #fff);
}
body.performance-mode .bar-strip {
  padding-left: 25vw;
  padding-right: 90vw;
  background: var(--tile-bg, #fff);
  -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            rgba(0,0,0,0.05) 5%,
            rgba(0,0,0,0.25) 8%,
            rgba(0,0,0,0.6) 9.5%,
            black 10%);
          mask-image: linear-gradient(to right,
            transparent 0%,
            rgba(0,0,0,0.05) 5%,
            rgba(0,0,0,0.25) 8%,
            rgba(0,0,0,0.6) 9.5%,
            black 10%);
}


.bar-tile.active .bar-number {
  color: #6c757d;
  background: rgba(255,255,255,0.9);
  border: 1.5px solid rgba(100,100,100,0.5);
  border-radius: 50%;
  padding: 1px 4px;
  transform: rotate(-2deg);
}

.bar-tile.selected {
  outline-color: transparent;
  /* top+bottom edges of the selection bounding box */
  box-shadow: inset 0 3px 0 0 #ffc107, inset 0 -3px 0 0 #ffc107;
}
.bar-tile.sel-first {
  box-shadow: inset 3px 0 0 0 #ffc107, inset 0 3px 0 0 #ffc107, inset 0 -3px 0 0 #ffc107;
}
.bar-tile.sel-last {
  box-shadow: inset -3px 0 0 0 #ffc107, inset 0 3px 0 0 #ffc107, inset 0 -3px 0 0 #ffc107;
}
.bar-tile.sel-first.sel-last {
  box-shadow: inset 3px 0 0 0 #ffc107, inset -3px 0 0 0 #ffc107, inset 0 3px 0 0 #ffc107, inset 0 -3px 0 0 #ffc107;
}



.bar-tile img {
  display: block;
  height: 240px;
  width: auto;
  user-select: none;
  /* Tiles are saved as opaque white-background BGR PNGs; multiply blends ink
     with the parent's tile-bg colour so the same pixels render correctly
     regardless of the chosen tile background. */
  mix-blend-mode: multiply;
}

.system-break {
  flex-shrink: 0;
  align-self: stretch;
  width: 17px;
  background: var(--tile-bg, #fff);
  position: relative;
}
.system-break::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: #000;
}

.bar-number {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 10px;
  font-family: var(--bs-font-monospace);
  color: #6c757d;
  background: #fff;
  padding: 0 2px;
  border-radius: 2px;
  line-height: 1.4;
  pointer-events: none;
}

/* ── Hidden bar tiles ────────────────────────────────────── */
.bar-tile.bar-hidden::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.14) 0px,
    rgba(0,0,0,0.14) 24px,
    transparent        24px,
    transparent        54px
  );
  background-position: var(--hatch-phase, 0px) 0;
  pointer-events: none;
  z-index: 1;
}

/* Hidden tiles invisible in play mode */
.bar-strip:not(.sync-mode) .bar-tile.bar-hidden {
  display: none;
}

/* Repeated system-start clef/key tiles: shown only in sheet (reading) mode so
   an engraved page reads correctly; hidden in study/performance where one
   leading clef on the continuous strip is enough. */
body:not(.sheet-mode) .bar-tile.bar-system-clef {
  display: none;
}

/* Eye toggle button centered on the selected tile */
#eye-toggle-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.55);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  padding: 4px 12px;
  cursor: pointer;
  z-index: 10;
  transition: background 0.15s;
  white-space: nowrap;
}
#eye-toggle-btn:hover {
  background: rgba(0,0,0,0.75);
}

/* ── Tile background colour swatches ─────────────────────── */
.tile-bg-btn {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #adb5bd;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.tile-bg-btn[data-color="white"]  { background: #ffffff; }
.tile-bg-btn[data-color="ivory"]  { background: #fffff0; }
.tile-bg-btn[data-color="egg"]    { background: #fdf5e6; }
.tile-bg-btn[data-color="sepia"]  { background: #f4e4c1; }
.tile-bg-btn.active { border-color: var(--gp-gold); box-shadow: 0 0 0 2px rgba(200,169,107,0.35); }

/* ── Transport buttons ──────────────────────────────────── */
.ctrl-btn {
  background: none;
  border: none;
  padding: 0;
  color: #666;
  cursor: pointer;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color .12s, background .12s;
  font-size: 1.5rem;
  line-height: 1;
}
.ctrl-btn:hover:not(:disabled) { color: #111; background: rgba(0,0,0,.07); }
.ctrl-btn:disabled             { opacity: .3; pointer-events: none; }
.ctrl-btn.active               { color: var(--gp-gold); }
.ctrl-btn.recording            { animation: blink-record 1.2s linear infinite; }

.ctrl-btn-play {
  background: #1c1c1e;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 3.75rem;
  height: 3.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 1.5rem;
  transition: transform .1s, background .12s;
}
.ctrl-btn-play:hover  { background: #000; transform: scale(1.07); }
.ctrl-btn-play .bi-play-fill { margin-left: 2px; }

/* ── Loop focus (study mode) ──────────────────────────────── */
/* While a loop range is active, tiles outside it get a veil in the strip's own
   colour (= the control bar's background) so the dimmed tiles read as that
   colour, not a lighter grey. Toggled by _applyLoopFocus / _clearLoopFocus. */
.loop-dim::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(0, 0, 0, .6);  /* fallback for no color-mix support */
  background: color-mix(in srgb, var(--strip-bg, #fff) 90%, transparent);
}

/* ── Click-to-load YouTube facade ─────────────────────────────── */
/* Poster + play button shown in place of the iframe until the visitor clicks;
   removed once the real player is ready (see ensureYouTubePlayer / onReady). */
.yt-facade {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}
.yt-facade-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yt-facade-play {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 2rem;
  transition: transform .12s, background .12s;
}
.yt-facade-play .bi-play-fill { margin-left: 3px; }
.yt-facade:hover .yt-facade-play { background: #cc0000; transform: scale(1.06); }
/* Loading: dim the poster and swap the play glyph for a spinner ring. */
.yt-facade.loading { cursor: default; }
.yt-facade.loading .yt-facade-poster { opacity: 0.5; }
.yt-facade.loading .yt-facade-play { background: transparent; transform: none; }
.yt-facade.loading .yt-facade-play .bi { display: none; }
.yt-facade.loading .yt-facade-play::after {
  content: '';
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  animation: yt-facade-spin 0.8s linear infinite;
}
@keyframes yt-facade-spin { to { transform: rotate(360deg); } }