/*
 * Cadence — Digital Sheet Music Management Platform
 * Copyright © DoubTech. The LICENSE file in the repo root governs use of this file.
 *
 * score-teach.css — Styles for the teaching UX (score-teach.js): the
 * direct-drag selection's floating icon toolbar, legacy contextual menu, the
 * multi-measure selection highlight, and the
 * beat/subdivision breakdown strip ("count this bar out for me"). Reuses the
 * app's surface/border/shadow design tokens and the annotation tray's popover
 * vocabulary (see annotations.css's `.anno-guided`) so this reads as one
 * system rather than a bolt-on, and the metronome's exact three-tone wedge
 * colours (see styles.css's `.metro-wedge-highlight`) so the breakdown, the
 * cursor, and the metronome rings match. `.rehearsal` is z-index 10001 —
 * everything here sits well above it since it is only ever opened from
 * inside the rehearsal viewer.
 */

/* ── Long-press contextual menu ──────────────────────────────────────────── */
.teach-menu {
  position: fixed;
  z-index: 10100;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-float);
}
.teach-menu-item {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--c-text-secondary);
  font: inherit;
  font-size: 13px;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.teach-menu-item:hover,
.teach-menu-item:focus-visible {
  background: var(--c-surface-hover);
  color: var(--c-text-primary);
}

/* Compact glass toolbar retained beside the selected range. */
.teach-tools {
  position: fixed;
  z-index: 10101;
  display: flex;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--c-surface) 92%, transparent);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(12px);
}
.teach-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-text-primary);
  cursor: pointer;
}
.teach-tool-btn:hover,
.teach-tool-btn:focus-visible { background: var(--c-surface-hover); }
.teach-tool-btn svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Once Teach owns a one-pointer range drag, the page must not pan beneath it. */
.rehearsal.teach-enabled .rh-page-wrap { touch-action: none; }

/* ── Playback position: a vertical line, never a filled box ──────────────
   score-transport.js's createCursor() appends this to the page wrapper and
   drives its `left` (a percentage of the page box, so it stays registered at
   any viewer zoom — see rehearsal.js's .rh-zoom layer).

   A LINE, deliberately. The point of the cursor is to teach counting, which
   means the reader has to see the notes it is passing over; a filled
   highlight sitting on the bar hides exactly the music being counted. The
   glow is what makes a 2px line findable on a dense 19-staff conductor score
   without covering anything.

   z-index clears `.anno-overlay` (annotations.css) and the selection box
   below, so the playhead is never painted under a musician's ink or under a
   range they happen to have selected. */
.score-cursor-scrubber {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10095;
  width: 2px;
  background: #7FD6D6;
  box-shadow: 0 0 6px rgba(127, 214, 214, 0.9);
  pointer-events: none;
}

/* ── Multi-measure selection highlight ───────────────────────────────────
   Mirrors annotations-core.js's .anno-measure-hit box, one per measure in
   the selected range; the host positions each box against its own
   measure-grid geometry (see score-teach.js's renderSelectionHighlight doc).

   Outline only, no fill: this marks a RANGE the reader chose, and it stays on
   screen while they play that range back, so a tint over the staff obscures
   the very bars they are trying to read. Selection and playback position are
   different concepts — this one is a bracket, the playhead above is a line,
   and neither is a block over the music. */
.teach-selection-hit {
  position: absolute;
  z-index: 10090;
  border: 2px solid var(--c-accent);
  border-radius: 4px;
  pointer-events: none;
}

/* ── Beat breakdown strip ("count this bar out for me") ─────────────────── */
.teach-breakdown {
  position: absolute;
  z-index: 10090;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 14px;
  pointer-events: none;
}
.teach-breakdown-cell {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
/* Same hex values as styles.css's .metro-wedge-highlight so the breakdown,
   the cursor, and the metronome rings read as one system. */
.teach-breakdown-beat1 { background: #FF7A59; box-shadow: 0 0 5px rgba(255, 122, 89, 0.9); }
.teach-breakdown-beat { background: #7FD6D6; box-shadow: 0 0 5px rgba(127, 214, 214, 0.85); }
.teach-breakdown-subdivision { background: #4CB7B7; opacity: 0.85; width: 5px; height: 5px; }

/* ── Loop practice indicator ─────────────────────────────────────────────── */
.teach-loop-badge {
  position: absolute;
  z-index: 10090;
  top: -10px;
  right: -10px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--c-accent);
  color: #08161c;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .teach-menu { animation: teach-menu-in 120ms ease-out; }
}
@keyframes teach-menu-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}