/*
 * Cadence — Digital Sheet Music Management Platform
 * Copyright © DoubTech. The LICENSE file in the repo root governs use of this file.
 *
 * score-breakdown.css — Styles for the practice focus panel
 * (score-breakdown.js): the glassed-out backdrop that dims and blurs the rest
 * of the music, the card holding a uniformly scaled horizontal row of clipped
 * measure fragments from the active rendering's engraved SVG pages,
 * the per-measure beat strips drawn under the zoomed bars, the beat numbers a
 * student counts along to, and the panel's controls — the 1/2/4/8/16 bar-count
 * picker, an accessible play/pause icon with Space shortcut, count-aware
 * previous/next controls, the loop / play-through toggle, and the scrub that
 * slides the focused window through the whole piece. The
 * counting DOTS themselves are
 * score-teach.css's `.teach-breakdown-*` classes, reused verbatim so the
 * breakdown, the playback cursor, and the metronome rings stay one colour
 * system. The persistent crop carries an inset accent outline so the selected
 * range remains visibly identified while prepared frame children rebuild.
 * The card fills the viewport and its dedicated crop slot keeps the
 * uniformly contain-fitted engraving clear of every control without page
 * scrollbars. Focus note labels are HTML overlays projected from canonical
 * notehead geometry; their compact ten-pixel size and placement clearance
 * remain in screen pixels after the engraving has been contain-scaled.
 * `.rehearsal` is
 * z-index 10001 and the teaching menu is 10100 — this
 * overlay sits above both, since it is opened from that menu and must cover
 * the viewer it was opened over.
 */

/* ── Glassed-out backdrop ────────────────────────────────────────────────
   Dim AND blur: dimming alone leaves the surrounding staves legible enough to
   pull the eye, which defeats the point of isolating a bar to study it. */
.sb-overlay {
  position: fixed;
  inset: 0;
  z-index: 10102;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(8, 10, 14, 0.62);
  backdrop-filter: blur(7px) saturate(0.7);
  -webkit-backdrop-filter: blur(7px) saturate(0.7);
  opacity: 0;
  transition: opacity 220ms ease;
}
.sb-overlay.sb-shown { opacity: 1; }

/* ── The zoomed card ─────────────────────────────────────────────────────
   transform-origin 0 0 because score-breakdown.js's flipTransform() computes
   its release transform in the card's own top-left coordinate space. */
.sb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;
  background: var(--c-surface);
  box-shadow: var(--shadow-float);
  transform-origin: 0 0;
}
.sb-card.sb-animating,
.sb-overlay.sb-animating .sb-card {
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* The slot is precisely the viewport space left after the controls and
   caption. JS measures it before contain-fitting the selected music. */
.sb-crop-slot {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* The crop: a window onto the cloned page. Its pixel size is computed by
   zoomLayout() — this rule only has to clip. White, because engraved SVG
   pages are drawn on paper, not on the app surface. */
.sb-crop {
  position: relative;
  overflow: hidden;
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: #fff;
}
/* Every selected measure is a clipping window onto its source page. Fragments
   are absolutely placed in one row by JS; overflow hidden removes the source
   system wrap while retaining the entire staff stack inside each measure. */
.sb-fragment {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
/* The cloned page SVG, offset inside a fragment so only its measure remains.
   Never interactive — it is a still, and a stray click on a note inside it
   must fall through to the backdrop's dismiss. */
.sb-page {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.sb-note-label {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  font-size: 10px;
  white-space: nowrap;
}

/* ── Beat marks under each zoomed bar ────────────────────────────────────
   One strip per selected measure, spanning that measure's own width, so a
   selection crossing a meter change gets each bar's own beat count. */
.sb-strip {
  position: absolute;
  height: 16px;
  pointer-events: none;
}
.sb-guide {
  position: absolute;
  z-index: 0;
  top: -160px;
  bottom: -24px;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(76, 183, 183, 0.22);
}
.sb-beat-num {
  position: absolute;
  z-index: 2;
  top: 17px;
  transform: translateX(-50%);
  min-width: 1.25em;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #1d2733;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.95);
}

.sb-caption {
  font-size: 13px;
  color: var(--c-text-secondary);
}

.sb-close {
  position: absolute;
  top: 4px;
  right: 8px;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--c-text-secondary);
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.sb-close:hover,
.sb-close:focus-visible { background: var(--c-surface-hover); color: var(--c-text-primary); }

/* ── Controls ────────────────────────────────────────────────────────────
   The head row carries the bar-count picker and the loop/play-through
   toggle; the nav row under the music carries the step buttons and the
   scrub. Both are padded clear of `.sb-close`, which is absolutely
   positioned over the card's top-right corner. */
.sb-head,
.sb-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.sb-head { padding-right: 38px; }

.sb-counts {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-sm);
  background: var(--c-surface-hover);
}
.sb-count {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--c-text-secondary);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.sb-count:hover:not(:disabled) { color: var(--c-text-primary); }
.sb-count:disabled { opacity: 0.35; cursor: default; }
/* The active size is the only explanation the student gets for why 16 bars
   are tiny, so it has to be unmissable rather than a subtle tint. */
.sb-count[aria-pressed="true"] {
  background: var(--c-accent);
  color: #fff;
}

.sb-label-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-text-primary);
  cursor: pointer;
}
.sb-playback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-text-primary);
  cursor: pointer;
}
.sb-playback:hover,
.sb-playback:focus-visible { background: var(--c-surface-hover); }
.sb-playback[data-state="pause"] { background: var(--c-accent); color: #fff; border-color: transparent; }
.sb-playback svg { width: 21px; height: 21px; fill: currentColor; }
.sb-label-toggle[aria-pressed="true"] { background: var(--c-accent); color: #fff; }
.sb-label-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sb-subdivision-select {
  min-height: 44px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text-primary);
  padding: 0 9px;
  font: inherit;
  font-size: 14px;
}

/* Play-along has to be discoverable, so the toggle is a labelled control
   rather than an icon — it names the mode it is currently in. */
.sb-mode {
  margin-left: auto;
  appearance: none;
  border: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-text-primary);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.sb-mode[aria-pressed="true"] {
  border-color: transparent;
  background: var(--c-accent);
  color: #fff;
}

.sb-step {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--c-text-secondary);
  font-size: 14px;
  line-height: 1;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.sb-step:hover:not(:disabled) { background: var(--c-surface-hover); color: var(--c-text-primary); }
.sb-step:disabled { opacity: 0.3; cursor: default; }

/* A native range: pointer drag, touch, and one-bar arrow-key stepping come
   free. `--sb-scrub-pos` (set by score-breakdown.js) fills the track behind
   the thumb so how far through the piece the focus sits is readable at a
   glance. */
.sb-scrub {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  margin: 0;
  border-radius: 3px;
  background:
    linear-gradient(to right, var(--c-accent) var(--sb-scrub-pos, 0%), var(--c-surface-hover) var(--sb-scrub-pos, 0%));
  cursor: pointer;
}
.sb-scrub:disabled { opacity: 0.4; cursor: default; }
.sb-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--c-surface);
  background: var(--c-accent);
}
.sb-scrub::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--c-surface);
  background: var(--c-accent);
}

.sb-range {
  min-width: 3.5em;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-secondary);
}

/* The sounding bar, so at 8 or 16 bars the student can see which strip is
   under the beat. Measure granularity is all the host reports, so this marks
   the whole bar rather than trying to sit on a beat. The rule underlines the
   strip instead of boxing the staff above it: the strip's own height is the
   only measurement this stylesheet knows, and guessing at the staff's would
   be wrong at every zoom. */
.sb-strip.sb-strip-current {
  border-bottom: 2px solid var(--c-accent);
  border-radius: 1px;
}

/* Keep the result, drop the motion. */
@media (prefers-reduced-motion: reduce) {
  .sb-overlay { transition: none; }
  .sb-card.sb-animating,
  .sb-overlay.sb-animating .sb-card { transition: none; }
}