/* Two-bar phrasing shares the existing writing surface and instrument colours. */
.editor-panel .phrase-view-controls {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 75%, var(--panel));
}
.editor-panel .phrase-view-controls button {
  min-width: 55px;
  min-height: 28px;
  padding: 5px 8px;
  border-radius: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}
.editor-panel .phrase-view-controls button:hover { color: var(--ink); background: var(--hover); }
.editor-panel .phrase-view-controls button[aria-pressed=true],
.editor-panel .phrase-view-controls button[aria-selected=true],
.editor-panel .phrase-view-controls button.chosen,
.editor-panel .phrase-view-controls button.is-active {
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 9%, transparent);
  font-weight: 600;
}
.editor-panel .phrase-view-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.editor-canvas .tab-svg.phrase-svg { width: 100%; min-width: 640px; }
.editor-canvas .phrase-svg .measure-header { user-select: none; }
.editor-canvas .phrase-svg rect.measure-band,
.editor-canvas .phrase-svg .measure-band rect { fill: transparent; stroke: none; pointer-events: none; }
.editor-canvas .phrase-svg .active-measure rect.measure-band,
.editor-canvas .phrase-svg rect.measure-band.active-measure,
.editor-canvas .phrase-svg .active-measure .measure-band rect {
  fill: color-mix(in srgb, var(--track-bg) 40%, transparent);
}
.editor-canvas .phrase-svg .measure-title {
  fill: var(--ink);
  font: 650 12px var(--sans);
  letter-spacing: .1px;
}
.editor-canvas .phrase-svg .measure-meta { fill: var(--muted); font: 11px var(--sans); }
.editor-canvas .phrase-svg .active-measure .measure-title { fill: var(--track); }
.editor-canvas .phrase-svg .active-measure .measure-meta { fill: color-mix(in srgb, var(--ink) 74%, var(--muted)); }
.editor-canvas .phrase-svg .measure-divider {
  stroke: color-mix(in srgb, var(--line) 72%, var(--muted));
  stroke-width: 1.4;
  stroke-linecap: square;
  stroke-dasharray: none;
  vector-effect: non-scaling-stroke;
  opacity: .8;
  pointer-events: none;
}
.editor-panel .canvas-footer .phrase-range { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.editor-panel .canvas-footer .phrase-range strong { color: var(--ink); font-weight: 600; }

@media (max-width: 1050px) {
  .editor-panel .phrase-view-controls { padding: 2px; }
  .editor-panel .phrase-view-controls button { min-width: 52px; padding-inline: 7px; font-size: 10px; }
  .editor-canvas .phrase-svg .measure-meta { font-size: 10px; }
}

@media (max-width: 600px) {
  .editor-panel .phrase-view-controls button { min-width: 49px; }
  .editor-panel .canvas-footer .phrase-range { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .editor-panel .phrase-view-controls button { transition: none; }
}

.editor-canvas .phrase-svg .continuation-tail { stroke-dasharray: 4 4; opacity: .55; pointer-events: none; }

/* Playback keeps readable pitch/kit labels while the score moves beneath them. */
.editor-canvas .tab-svg[data-following="true"] > .string-label { visibility:hidden; }
.editor-canvas .tab-svg .playback-string-key .string-label { visibility:visible; }
.editor-canvas .phrase-svg .sounding-measure .measure-title { fill:var(--play); }
.editor-canvas .phrase-svg .sounding-measure .measure-band { fill:color-mix(in srgb,var(--play) 6%,transparent); }
.drum-grid[data-following="true"] .drum-row > span:first-child { position:sticky;left:0;z-index:2;background:var(--canvas);box-shadow:6px 0 0 var(--canvas); }

/* The following rail owns its strip; notes, tails and interaction targets share its clip. */
.playback-string-key { pointer-events:all; }
.playback-string-key .string-label { pointer-events:none; }