/* ============================================================
   style-controls.css
   つまみ系操作のUI：Loop（単一区間ループ）・Repeat（Off/One/All）・
   再生ボタン(#playToggle)、Speed/AutoSpeed（自動加速）・Key（音程調整）。
   .tripleNavBtn等、複数機能で共有される土台デザインは style-core.css 側に残っている。
   ============================================================ */

.loopbtn {
  flex: 1;
  padding: 12px 0 10px;
  font-size: 20px;
  text-align: center;
  background: #1c1c24;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  cursor: pointer;
  color: var(--text-pure-white);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: background var(--dur-hover) var(--ease-snap), border-color var(--dur-hover) var(--ease-snap), transform var(--dur-press) var(--ease-snap), box-shadow var(--dur-press) var(--ease-snap);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.loopbtn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.top-controls-btn-label {
  font-family: var(--font-display, 'Instrument Sans'), sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.7;
  line-height: 1;
}

.loopbtn:hover {
  background: #252530;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.loopbtn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

#playToggle {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  border: none;
  box-shadow: 0 6px 20px var(--accent-glow);
  color: var(--text-pure-white);
}

#playToggle:hover {
  background: linear-gradient(135deg, var(--accent-hover-1), var(--accent-hover-2));
  box-shadow: 0 8px 25px var(--accent-glow);
  color: var(--text-pure-white);
}

.loopbtn { 
  background: #16161b;
}

/* ON状態（Repeat All/One、Loop有効時）：文字・アイコンをアクセントカラーに、
   背景・枠線も薄く色付けして「オンになっている」ことを一目でわかるようにする。
   currentColor を使っている .loopbtn svg にも自動で反映される。 */
.loopbtn.is-active {
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 14%, #16161b);
  border-color: var(--accent-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(56, 189, 248, 0.15) inset;
}

.loopbtn.is-active:hover {
  background: color-mix(in srgb, var(--accent-primary) 22%, #1c1c24);
  border-color: var(--accent-primary);
}

#allRepeatToggleBtn {
  position: relative;
}

.repeat-one-badge {
  position: absolute;
  top: 6px;
  right: 50%;
  transform: translateX(14px);
  font-family: var(--font-display, 'Instrument Sans'), sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-primary);
  background: #0d0d0f;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1.5px var(--accent-primary);
}

/* 三分割ボタン（前へ/中央操作/次へ）。前後の曲送り、前後のマーカー移動の両方で使う汎用デザイン。 */

.auto-speed-card {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  gap: 12px;
}

/* .control-card label { justify-content: flex-start; } (style-core.css)より
   詳細度を上げるため、.control-cardを付けて.auto-speed-header単体より
   確実に優先されるようにする。これが無いとjustify-content: space-between
   が効かず、トグルがラベルのすぐ右に張り付いて見える（右端まで届かない）。 */
.control-card .auto-speed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  /* トグル行自体の上下が詰まって窮屈に見えていたため、ゆとりを追加。
     6px 0では改善が不十分だったため14px 0に拡大（ユーザー実機確認済み）。 */
  padding: 14px 0;
}

.auto-speed-header span {
  font-family: var(--font-body, 'Instrument Sans'), sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--icon-muted);
  text-transform: none;
  letter-spacing: normal;
}

/* 【変更済み】以前はAuto Speed詳細設定を常時展開表示し、OFF時は
   カード全体を薄く(opacity: 0.45)して操作対象でないことを示していたが、
   詳細設定(.auto-speed-settings)自体をOFF時に非表示にする設計に変更した
   ため、この薄暗さ演出は不要になった（非表示なのでそもそも見えない）。 */

/* ON/OFFがOFFの間は、下の詳細設定は触れる必要がないため折りたたんで隠す */
.auto-speed-settings {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.auto-speed-settings.open {
  display: flex;
}

.auto-speed-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Every/By/Limitの3項目を横並びで、各項目はタイトル→入力欄の縦積みにする */
.auto-speed-row-triple {
  align-items: stretch;
  gap: 12px;
}

.auto-speed-field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.auto-speed-field-input {
  display: flex;
  align-items: center;
  gap: 6px;
}

.auto-speed-unit {
  font-family: var(--font-body, 'Instrument Sans'), sans-serif;
  font-size: 11px;
  color: var(--icon-muted);
  white-space: nowrap;
}

.auto-speed-row-label {
  font-family: var(--font-body, 'Instrument Sans'), sans-serif;
  font-size: 12px;
  color: var(--icon-muted);
  white-space: nowrap;
}

.auto-speed-number {
  width: 56px;
  padding: 6px 8px;
  background: #1c1c24;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-bright);
  font-family: var(--font-display, 'Instrument Sans'), sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  box-sizing: border-box;
  /* number inputのスピナー(上下矢印)は狭いポップアップ内でタップしづらく誤操作の元になるため、
     ブラウザ標準のものは非表示にし、フリック入力/キーボード入力に任せる。 */
  -moz-appearance: textfield;
}

.auto-speed-number::-webkit-outer-spin-button,
.auto-speed-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.auto-speed-direction {
  display: flex;
  width: 100%;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.auto-speed-dir-btn {
  flex: 1;
  padding: 8px 6px;
  background: #1c1c24;
  border: none;
  border-left: 1px solid var(--border-subtle);
  color: var(--icon-muted);
  font-family: var(--font-display, 'Instrument Sans'), sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-snap), color var(--dur-hover) var(--ease-snap);
}

.auto-speed-dir-btn:first-child {
  border-left: none;
}

.auto-speed-dir-btn.active {
  background: var(--accent-primary);
  color: var(--text-pure-white);
}

.auto-speed-status {
  font-family: var(--font-body, 'Instrument Sans'), sans-serif;
  font-size: 11px;
  color: #6b6b7b;
  text-align: center;
}

.mini-reset-btn {
  flex-shrink: 0;
  /* 元は↺記号1文字だけの26x26正方形だったが、"RESET"という文言に変更した
     ため、幅を可変にしてテキストに合わせて広げる。高さは既存の26pxを維持。 */
  width: auto;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: none;
  color: var(--icon-muted);
  font-family: var(--font-display, 'Instrument Sans'), sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.mini-reset-btn:hover {
  background: var(--bg-hover-subtle);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.key-control-card {
  min-width: 220px;
}

.key-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.key-disabled-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 4px;
  padding: 1px 5px;
  text-transform: uppercase;
}

.key-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.key-step-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: none;
  color: var(--icon-muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.key-step-btn:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.key-step-btn:active {
  transform: scale(0.92);
}

.key-step-btn:disabled,
.mini-reset-btn:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.key-step-btn:disabled:hover {
  background: none;
  color: var(--icon-muted);
  border-color: var(--border-subtle);
}

.key-stepper-bar {
  flex: 1;
  height: 4px;
  background: #2a2a35;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.key-stepper-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0%;
  background: var(--accent-primary);
  transition: all 0.15s ease;
}


/* Auto SpeedのON/OFFトグルスイッチ(.glow-switch)。qn-menu.cssの
   .qn-glow-switchと同じデザインを、Controlタブ内で使うため
   プレフィックス無しのクラス名で定義する（元々CSS定義自体が
   存在せず、素のbutton要素として表示されてしまっていた）。 */
.glow-switch {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: #2a2a35;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.glow-switch[aria-checked="true"] {
  background: var(--accent-primary, #3b82f6);
  animation: glow-switch-pulse 3s ease-in-out infinite;
}

@keyframes glow-switch-pulse {
  0%, 100% { box-shadow: 0 0 4px var(--accent-glow, rgba(59, 130, 246, 0.35)); }
  50% { box-shadow: 0 0 12px var(--accent-glow, rgba(59, 130, 246, 0.35)); }
}

.glow-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-bright);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.glow-switch[aria-checked="true"] .glow-switch-knob {
  transform: translateX(18px);
}