/* ==========================================================================
   Paddy Prompt Studio — pitch shifter + tempo changer extras
   Layers on /blog/style.css, /tools/shared/tool-common.css and
   /tools/shared/speed-fx.css (drop zone, waveform, sliders, export row).
   ========================================================================== */

.sx-transport .btn-ghost { min-width: 44px; padding-inline: 0.7rem; }
.sx-compare[aria-pressed="true"] { background: rgba(251, 191, 36, 0.14); border-color: rgba(251, 191, 36, 0.6); color: #fde68a; }

/* Slider with − / + buttons either side, for exact steps on a phone */
.sx-step { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 0.5rem; }
.sx-step button {
  min-height: 44px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 1.2rem; font-weight: 800;
  color: var(--text); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border);
}
.sx-step button:hover { background: rgba(129, 140, 248, 0.16); }
.sx-step button:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
.sx-step button[disabled] { opacity: 0.35; cursor: not-allowed; }
.fx-slider.main .fx-slider-head output { font-size: 1.05rem; font-weight: 700; }

/* Helper panels: key + capo, BPM, A–B loop */
.sx-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.7rem; margin-top: 0.8rem; }
.sx-panel { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border-soft); border-radius: 14px; padding: 0.75rem 0.9rem; }
.sx-panel h3 { margin: 0 0 0.45rem; font-size: 0.92rem; color: #fff; font-family: "Inter", sans-serif; font-weight: 700; }
.sx-panel .pt-row { gap: 0.45rem; }
.sx-panel select.pt-input { min-width: 11rem; flex: 1; }
.sx-panel input.pt-input { width: 6.2rem; }
.sx-result { margin: 0.5rem 0 0; font-size: 0.92rem; color: var(--text-muted); }
.sx-result strong { color: #a5f3fc; font-family: "JetBrains Mono", ui-monospace, monospace; }
.sx-capo { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--text-dim); }
.sx-loop-out { margin: 0.5rem 0 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.82rem; color: #a5f3fc; }
.sx-panel .btn-ghost { min-height: 40px; padding: 0.4rem 0.75rem; font-size: 0.85rem; }

@media (max-width: 640px) {
  .sx-transport .fx-time { width: 100%; margin-left: 0; text-align: center; }
}
.fx-export [hidden], .sx-panel [hidden] { display: none !important; }