/* Капсулы-списки пульта и ожидание нового тона (tonepick.js) */

/* рамка фокуса — вокруг всей капсулы и только с клавиатуры: после выбора мышью у списка стоит data-ptr */
.pick select:focus-visible { outline: none; }
.pick:has(select:focus-visible:not([data-ptr])) { outline: 2px solid var(--text); outline-offset: 2px; }

/* тон готовится: капсула подсвечена, вместо «Тон» — крутилка и «Готовлю…», в списке уже выбранный тон */
.pick.busy { background: var(--accent-soft); cursor: progress; }
.pick.busy > span { display: inline-flex; align-items: center; gap: 6px; }
.pick.busy > span::before, .tone-spin {
  content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid rgba(255, 157, 133, .3); border-top-color: var(--accent-text);
  animation: tone-spin .7s linear infinite;
}
.dock .pick.busy select:disabled { opacity: 1; color: var(--text); cursor: progress; }
@keyframes tone-spin { to { transform: rotate(360deg); } }

/* плашка прямо на нотах: ноты сейчас поменяются, поэтому они приглушены */
.roll-wrap.tone-busy > .roll { opacity: .4; }
.tone-wait {
  position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 14px;
  background: rgba(12, 12, 12, .86); border: 1px solid var(--border); box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
  color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.35; pointer-events: none;
  animation: tone-in .2s ease-out;
}
.tone-wait .tone-spin { width: 14px; height: 14px; }
.tone-wait small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 500; }
@keyframes tone-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pick.busy > span::before, .tone-spin { animation-duration: 1.6s; }
  .tone-wait { animation: none; }
}