/* ─── player.css — notation player design system ───────────────────────────
 *  Shared by demo.html and index.html. Owns the notation panel, playback
 *  bar, controls, popovers, slider, glow, highlight, and scrollbar
 *  theming for the notation area.
 */

/* ─── Design tokens ────────────────────────────────────────────────────────── */
:root {
  --font-ui:   'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --highlight:       #fdff8d;
  --highlight-light: #fffce7;
  --highlight-glow:  #ffff69;
  --highlight-dark:  #2a2a29;

  /* Notation bar */
  --nb-font-family: var(--font-ui);
  --nb-font-size: 0.8125rem;
  --nb-font-size-sm: 0.6875rem;
  --nb-font-weight: 600;

  --nb-gap: 8px;
  --nb-hide-delay: 2500ms;
  --nb-touch-min: 44px;
  --nb-popover-offset: 16px;

  --nb-radius-sm: 6px;
  --nb-radius-md: 10px;
  --nb-radius-lg: 50%;

  --nb-transition-fast: 120ms ease;
  --nb-transition-normal: 200ms ease;
  --nb-transition-slow: 300ms ease;

  --nb-scrim-start: rgba(0, 0, 0, 0.72);
  --nb-scrim-mid: rgba(0, 0, 0, 0.40);
  --nb-scrim-end: transparent;

  --nb-surface: rgba(255, 255, 255, 0.08);
  --nb-surface-hover: rgba(255, 255, 255, 0.14);
  --nb-surface-active: rgba(255, 255, 255, 0.20);

  --nb-text-primary: rgba(255, 255, 255, 1.0);
  --nb-text-secondary: rgba(255, 255, 255, 0.7);
  --nb-text-tertiary: rgba(255, 255, 255, 0.5);
  --nb-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

  --nb-accent: var(--highlight, #fdff8d);

  --nb-hero-size: 48px;
  --nb-hero-icon: 22px;
  --nb-hero-bg: rgba(255, 255, 255, 0.95);
  --nb-hero-fg: #111;
  --nb-hero-bg-hover: #fff;
  --nb-hero-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  --nb-hero-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.5);

  --nb-utility-size: 36px;
  --nb-utility-icon: 18px;

  --nb-popover-bg: rgba(18, 18, 22, 0.96);
  --nb-modal-bg: rgba(18, 18, 22, 0.99);   /* solid panel for large modals */
  --nb-popover-border: rgba(255, 255, 255, 0.10);
  --nb-popover-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);

  --nb-track-bg: rgba(255, 255, 255, 0.20);
  --nb-track-height: 3px;
  --nb-track-height-hover: 5px;
  --nb-thumb-size: 0px;
  --nb-thumb-size-hover: 14px;
}

* { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ─── Notation panel ──────────────────────────────────────────────────────── */
.notation-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  border: none;
  border-radius: 0;
  overflow: hidden;
  padding: 0;
  isolation: isolate;
  transition: background 0.5s ease;
}

.notation-content-area {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  z-index: 1;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  padding-bottom: 80px;
}
.notation-content-area #notation { flex: 1; min-width: 0; width: 100%; position: relative; padding-left: 8px; }

/* SVG rendering */
.notation-content-area #notation svg,
.notation-panel svg {
  width: 100%;
  height: auto;
  display: block;
}

.notation-glow-overlay {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    #ffff69 0%,
    rgba(255, 255, 105, 0.18) 25%,
    rgba(255, 255, 105, 0.06) 35%,
    rgba(255, 255, 105, 0) 45%);
  will-change: transform;
  display: none;
}

.notation-panel g.note.playing,
.notation-panel g.chord.playing,
.notation-panel g.rest.playing {
  fill: #ff0d00 !important;
  stroke: #ff2200 !important;
  opacity: 1 !important;
}

.notation-panel g.note,
.notation-panel [data-line] { cursor: pointer; }

.tut-score-visible {
  position: relative;
  z-index: 501;
}
.tut-notes-pulse .notation-bar *:focus-visible {
  outline: none;
}
.tut-notes-pulse g.note,
.tut-notes-pulse g.chord,
.tut-notes-pulse g.rest {
  fill: #c04030;
  transition: fill 1s ease;
}

.notation-panel .placeholder {
  color: #6b7280;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

/* ─── Notation bar ──────────────────────────────────────────────────────────── */
.notation-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: auto;
  background: linear-gradient(to top,
    var(--nb-scrim-start) 0%,
    var(--nb-scrim-mid) 50%,
    var(--nb-scrim-end) 100%);
  padding: 0 16px 10px 16px;
  transform: translateY(0);
  transition: transform var(--nb-transition-slow);
  will-change: transform;
}
.notation-bar.nb-hidden { transform: translateY(100%); }
.notation-bar.nb-hidden .notation-controls,
.notation-bar.nb-revealing .notation-controls {
  pointer-events: none;
}
.nb-touch-zone {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
}
.notation-bar.nb-hidden .nb-touch-zone { pointer-events: auto; touch-action: none; }

.nb-pull-pill {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  min-width: 110px;
  height: 22px;
  border-radius: 11px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--nb-transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}
.nb-pull-pill-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--pull-progress, 0%);
  background: var(--nb-accent);
  opacity: 0.3;
}
.nb-pull-pill-time {
  position: relative;
  font-size: 0.625rem;
  font-weight: 600;
  font-family: var(--nb-font-family);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  padding: 0 14px;
  white-space: nowrap;
}
.notation-bar.nb-hidden .nb-pull-pill { opacity: 1; }
.notation-bar.nb-visible { transform: translateY(0); }

.notation-controls {
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--nb-text-primary);
  text-shadow: var(--nb-text-shadow);
  font-family: var(--nb-font-family);
  font-size: var(--nb-font-size);
}

.bar-seek {
  display: flex;
  align-items: center;
  min-width: 0;
}

.nb-controls-row {
  display: flex;
  align-items: center;
  gap: var(--nb-gap);
  flex-wrap: wrap;
}

.bar-left  { display: flex; align-items: center; flex-shrink: 0; }
.bar-time  { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.bar-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }

#mixerSlot:empty { display: none; }

/* ── Shared button base ── */
.notation-controls .control-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--nb-text-secondary);
  cursor: pointer;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--nb-radius-sm);
  transition: background var(--nb-transition-fast), color var(--nb-transition-fast);
  flex-shrink: 0;
}
.notation-controls .control-btn:hover:not(:disabled) {
  background: var(--nb-surface-hover);
  color: var(--nb-text-primary);
}
.notation-controls .control-btn:focus-visible {
  outline: 2px solid var(--nb-accent);
  outline-offset: 2px;
}
.notation-controls .control-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.notation-controls .control-btn svg { display: block; flex-shrink: 0; }

/* ── Play / Pause — hero button ── */
.notation-controls .btn-play-pause {
  width: var(--nb-hero-size);
  height: var(--nb-hero-size);
  border-radius: var(--nb-radius-lg);
  background: var(--nb-hero-bg);
  color: var(--nb-hero-fg);
  border: none;
  box-shadow: var(--nb-hero-shadow);
  transition: background var(--nb-transition-fast), box-shadow var(--nb-transition-normal), transform var(--nb-transition-fast);
}
.notation-controls .btn-play-pause:hover:not(:disabled) {
  background: var(--nb-hero-bg-hover);
  color: var(--nb-hero-fg);
  box-shadow: var(--nb-hero-shadow-hover);
  transform: scale(1.06);
}
.notation-controls .btn-play-pause:active:not(:disabled),
.notation-controls .btn-play-pause.btn-press {
  transform: scale(0.95);
}

/* ── Hero pill ── */
.nb-hero-pill {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.nb-hero-pill .btn-play-pause {
  position: relative;
  z-index: 2;
  margin-top: calc((var(--nb-hero-size) - var(--nb-utility-size)) / -2);
  margin-bottom: calc((var(--nb-hero-size) - var(--nb-utility-size)) / -2);
}

/* ── Metronome ── */
.nb-metronome {
  width: var(--nb-utility-size);
  height: var(--nb-utility-size);
  border-radius: var(--nb-radius-lg);
}

/* ── Time display ── */
.bar-time .playback-time {
  font-size: var(--nb-font-size);
  font-weight: var(--nb-font-weight);
  font-variant-numeric: tabular-nums;
  color: var(--nb-text-primary);
  white-space: nowrap;
  text-shadow: var(--nb-text-shadow);
}
.bar-time .playback-time-total { color: var(--nb-text-tertiary); }
.bar-time .playback-time-sep {
  color: var(--nb-text-tertiary);
  font-size: var(--nb-font-size-sm);
}

/* ── Utility buttons ── */
.nb-utility-wrap {
  position: relative;
  flex-shrink: 0;
}
.nb-utility-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: var(--nb-utility-size);
  height: var(--nb-utility-size);
  padding: 3px 0 2px;
  background: none;
  border: none;
  border-radius: var(--nb-radius-sm);
  color: var(--nb-text-secondary);
  cursor: pointer;
  transition: background var(--nb-transition-fast), color var(--nb-transition-fast);
}
.nb-utility-btn:hover {
  background: var(--nb-surface-hover);
  color: var(--nb-text-primary);
}
.nb-utility-btn:active {
  background: var(--nb-surface-active);
}
.nb-utility-btn:focus-visible {
  outline: 2px solid var(--nb-accent);
  outline-offset: 2px;
}
.nb-utility-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.nb-utility-btn.active {
  background: var(--nb-accent);
  color: #111;
}
.nb-utility-btn.active:hover { filter: brightness(0.96); }
.nb-utility-btn svg { display: block; flex-shrink: 0; width: var(--nb-utility-icon); height: var(--nb-utility-icon); }
.nb-utility-label {
  font-size: var(--nb-font-size-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-top: auto;
}

/* ── Popovers ── */
.zoom-popover,
.speed-popover {
  display: none;
  position: absolute;
  bottom: calc(100% + var(--nb-popover-offset));
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  padding: 6px;
  background: var(--nb-popover-bg);
  border: 1px solid var(--nb-popover-border);
  border-radius: var(--nb-radius-md);
  box-shadow: var(--nb-popover-shadow);
  z-index: 1;
}
.zoom-popover.open,
.speed-popover.open { display: flex; }

.zoom-popover { padding: 4px; }
.zoom-popover .zoom-option {
  padding: 6px 16px;
  background: none;
  border: none;
  border-radius: var(--nb-radius-sm);
  color: var(--nb-text-secondary);
  font-family: var(--nb-font-family);
  font-size: var(--nb-font-size);
  font-weight: var(--nb-font-weight);
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--nb-transition-fast), color var(--nb-transition-fast);
}
.zoom-popover .zoom-option:hover { background: var(--nb-surface-hover); color: var(--nb-text-primary); }
.zoom-popover .zoom-option:focus-visible { outline: 2px solid var(--nb-accent); outline-offset: -2px; }
.zoom-popover .zoom-option.active { color: var(--nb-accent); }

.speed-popover { padding: 4px; }
.speed-popover .speed-option {
  padding: 6px 16px;
  background: none;
  border: none;
  border-radius: var(--nb-radius-sm);
  color: var(--nb-text-secondary);
  font-family: var(--nb-font-family);
  font-size: var(--nb-font-size);
  font-weight: var(--nb-font-weight);
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--nb-transition-fast), color var(--nb-transition-fast);
}
.speed-popover .speed-option:hover { background: var(--nb-surface-hover); color: var(--nb-text-primary); }
.speed-popover .speed-option:focus-visible { outline: 2px solid var(--nb-accent); outline-offset: -2px; }
.speed-popover .speed-option.active { color: var(--nb-accent); }

/* ── Download dropdown ── */
.download-menu {
  position: fixed;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  min-width: 175px;
  background: var(--nb-popover-bg);
  border: 1px solid var(--nb-popover-border);
  border-radius: var(--nb-radius-md);
  color: var(--nb-text-primary);
  z-index: 10;
  box-shadow: var(--nb-popover-shadow);
}
.download-menu.open { display: flex; }
.download-menu button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-radius: var(--nb-radius-sm);
  color: var(--nb-text-primary);
  font-family: var(--nb-font-family);
  font-size: var(--nb-font-size);
  font-weight: var(--nb-font-weight);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--nb-transition-fast);
}
.download-menu button:hover { background: var(--nb-surface-hover); }

/* ─── Playback slider ─────────────────────────────────────────────────────── */
.notation-controls .playback-slider {
  flex: 1 1 auto;
  min-width: 60px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}
.notation-controls .playback-slider::-webkit-slider-container { background: transparent; }
.notation-controls .playback-slider::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--nb-track-height);
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--nb-accent) 0%,
    var(--nb-accent) var(--progress, 0%),
    var(--nb-track-bg) var(--progress, 0%),
    var(--nb-track-bg) 100%
  );
  transition: height var(--nb-transition-fast);
}
.notation-controls .playback-slider::-moz-range-track {
  width: 100%;
  height: var(--nb-track-height);
  border-radius: 2px;
  background: var(--nb-track-bg);
  transition: height var(--nb-transition-fast);
}
.notation-controls .playback-slider::-moz-range-progress {
  height: var(--nb-track-height);
  border-radius: 2px 0 0 2px;
  background: var(--nb-accent);
}
.notation-controls .playback-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--nb-thumb-size);
  height: var(--nb-thumb-size);
  border-radius: 50%;
  background: var(--nb-accent);
  border: none;
  margin-top: calc((var(--nb-thumb-size) - var(--nb-track-height)) / -2);
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  transition: width var(--nb-transition-fast), height var(--nb-transition-fast), margin-top var(--nb-transition-fast);
}
.notation-controls .playback-slider::-moz-range-thumb {
  width: var(--nb-thumb-size);
  height: var(--nb-thumb-size);
  border-radius: 50%;
  background: var(--nb-accent);
  border: none;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  transition: width var(--nb-transition-fast), height var(--nb-transition-fast);
}
/* Hover: expand track + reveal thumb */
.bar-seek:hover .playback-slider::-webkit-slider-runnable-track { height: var(--nb-track-height-hover); }
.bar-seek:hover .playback-slider::-moz-range-track { height: var(--nb-track-height-hover); }
.bar-seek:hover .playback-slider::-moz-range-progress { height: var(--nb-track-height-hover); }
.bar-seek:hover .playback-slider::-webkit-slider-thumb {
  width: var(--nb-thumb-size-hover);
  height: var(--nb-thumb-size-hover);
  margin-top: calc((var(--nb-thumb-size-hover) - var(--nb-track-height-hover)) / -2);
}
.bar-seek:hover .playback-slider::-moz-range-thumb {
  width: var(--nb-thumb-size-hover);
  height: var(--nb-thumb-size-hover);
}
.notation-controls .playback-slider:focus-visible {
  outline: 2px solid var(--nb-accent);
  outline-offset: 2px;
}
.notation-controls .playback-slider:disabled { cursor: not-allowed; opacity: 0.3; }

/* ─── YouTube embed: click shield + YouTube link ─────────────────────────── */
.yt-embed-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* ─── Audio mixer ─────────────────────────────────────────────────────────── */
.yt-mixer {
  width: 90px;
  cursor: default;
  user-select: none;
}
.yt-mixer:hover { background: none; }
.yt-mixer-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}
.yt-mixer-ends {
  display: flex;
  justify-content: space-between;
  padding: 0 0 0 3px;
}
.yt-mixer-end {
  font-family: var(--nb-font-family);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  color: var(--nb-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.2px;
}
.yt-mixer-end--orig  { color: #ff8a8a; transition: all 0.15s ease; }
.yt-mixer-end--synth { color: var(--nb-accent, rgba(253,255,141,0.8)); transition: all 0.15s ease; }
.yt-mixer-end--orig.at-extreme {
  background: #e8191a; color: #fff;
  padding: 1px 3px; border-radius: 2px; margin: -1px -3px;
}
.yt-mixer-end--synth.at-extreme {
  background: var(--nb-accent, #fdff8d); color: #111;
  padding: 1px 3px; border-radius: 2px; margin: -1px -3px;
}
.yt-mixer-content .yt-mixer-slider { width: 100%; height: 10px; }
.yt-mixer-slider {
  --mix: 0; --orig-a: 1; --synth-a: 0.4;
  -webkit-appearance: none; appearance: none;
  width: 80px; height: 6px; border-radius: 3px;
  outline: none; cursor: pointer;
  touch-action: none;
  background: linear-gradient(to right,
    rgba(232,25,26,var(--orig-a)) 0%,
    rgba(232,25,26,var(--orig-a)) calc(var(--mix) * 1%),
    rgba(253,255,141,var(--synth-a)) calc(var(--mix) * 1%),
    rgba(253,255,141,var(--synth-a)) 100%);
}
.yt-mixer-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: grab;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.yt-mixer-slider:hover::-webkit-slider-thumb { transform: scale(1.4); box-shadow: 0 0 6px rgba(255,255,255,0.4); }
.yt-mixer-slider:active::-webkit-slider-thumb { transform: scale(1.6); background: var(--nb-accent, #fdff8d); cursor: grabbing; }
.yt-mixer-slider::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: grab;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.yt-mixer-slider:hover::-moz-range-thumb { transform: scale(1.4); box-shadow: 0 0 6px rgba(255,255,255,0.4); }
.yt-mixer-slider:active::-moz-range-thumb { transform: scale(1.6); background: var(--nb-accent, #fdff8d); cursor: grabbing; }
.yt-mixer-slider::-moz-range-track { height: 6px; border-radius: 3px; background: transparent; }
.yt-mixer-slider:focus-visible { outline: none; }

/* ─── Scrollbars ──────────────────────────────────────────────────────────── */
.notation-content-area::-webkit-scrollbar { width: 6px; height: 6px; }
.notation-content-area::-webkit-scrollbar-track { background: transparent; }
.notation-content-area {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.25) transparent;
}
.notation-content-area::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.22);
  border-radius: 3px;
}
.notation-content-area::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.38); }

/* ─── Page mode variant ──────────────────────────────────────────────────── */
.notation-panel--page {
  overflow: clip;
  height: auto;
  min-height: 100dvh;
  isolation: auto;
}
.notation-panel--page .notation-content-area {
  overflow: visible;
  -webkit-overflow-scrolling: auto;
  overscroll-behavior: auto;
  contain: content;
}
.notation-panel--page .notation-content-area #notation > div {
  contain: layout paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 100% auto 3000px;
}
.notation-panel--page .notation-bar {
  position: sticky;
  bottom: 0;
  z-index: 100;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .notation-bar {
    --nb-hero-size: 44px;
    --nb-hero-icon: 22px;
    --nb-utility-size: 38px;
    --nb-utility-icon: 20px;
    padding: 14px 8px 4px 8px;
  }
  .nb-utility-label { display: none; }
  .nb-controls-row { flex-wrap: nowrap; gap: 6px; }
  .bar-left { flex-shrink: 1; min-width: 0; }
  .bar-right { flex-wrap: nowrap; gap: 3px; }
  .nb-hero-pill { flex-shrink: 1; min-width: 0; }
  .yt-mixer { width: auto; flex: 1 1 0; min-width: 40px; max-width: 140px; margin: 0 4px; }
  .yt-mixer-content { position: relative; }
  .yt-mixer-ends { position: absolute; bottom: 100%; left: 3px; right: 0; }
  .yt-mixer-slider { box-shadow: inset 0 1px 3px rgba(0,0,0,0.35); }
}

@media (max-width: 480px) {
  .bar-time .playback-time { font-size: var(--nb-font-size-sm); }
  .bar-time .playback-time-sep { display: none; }
}

/* ─── Touch / coarse-pointer targets ──────────────────────────────────────── */
@media (pointer: coarse) {
  .notation-controls .control-btn { min-height: var(--nb-touch-min); min-width: var(--nb-touch-min); }
  .nb-utility-btn { min-width: var(--nb-touch-min); min-height: var(--nb-touch-min); }
  .nb-metronome { min-width: var(--nb-touch-min); min-height: var(--nb-touch-min); }
  .notation-controls .playback-slider { height: 32px; }
  .notation-controls .playback-slider::-webkit-slider-runnable-track { height: var(--nb-track-height-hover); }
  .notation-controls .playback-slider::-moz-range-track { height: var(--nb-track-height-hover); }
  .notation-controls .playback-slider::-moz-range-progress { height: var(--nb-track-height-hover); }
  .notation-controls .playback-slider::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6.5px; }
  .notation-controls .playback-slider::-moz-range-thumb { width: 18px; height: 18px; }
}

/* ─── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .notation-glow-overlay { animation: none; }
  .notation-bar { transition: none; }
  .notation-controls .control-btn,
  .nb-utility-btn { transition: none; }
  .notation-controls .btn-play-pause { transition: none; transform: none; }
  .notation-controls .btn-play-pause:hover:not(:disabled) { transform: none; }
  .notation-controls .btn-play-pause:active:not(:disabled) { transform: none; }
  .notation-controls .playback-slider::-webkit-slider-thumb { transition: none; }
  .notation-controls .playback-slider::-webkit-slider-runnable-track { transition: none; }
  .notation-controls .playback-slider::-moz-range-track { transition: none; }
  .notation-controls .playback-slider::-moz-range-thumb { transition: none; }
}