/**
 * Knob Controls - Arc Progress Style (Bottom-left to Bottom-right)
 */

.knob-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Dual knob group - two knobs side by side */
.knob-group--dual {
  flex-direction: row;
  gap: 12px;
  align-items: flex-start;
}

.knob-subgroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.knob-subgroup label {
  font-size: 11px;
  color: #aaa;
  text-align: center;
  white-space: nowrap;
}

.knob-group label {
  font-size: 12px;
  color: #aaa;
  text-align: center;
  white-space: nowrap;
}

.knob {
  width: 70px;
  height: 70px;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.knob--small {
  width: 55px;
  height: 55px;
}

.knob--tiny {
  width: 40px;
  height: 40px;
}

.knob__svg {
  width: 100%;
  height: 100%;
  transform: rotate(135deg); /* Start from bottom-left */
}

.knob__track {
  fill: none;
  stroke: #2a2a2a;
  stroke-width: 8;
  stroke-linecap: round;
}

.knob__fill {
  fill: none;
  stroke: #d4a574;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.05s linear;
  opacity: 0.8;
}

.knob__thumb {
  fill: #d4a574;
  filter: drop-shadow(0 0 4px rgba(212, 165, 116, 0.6));
  transition: cx 0.05s linear, cy 0.05s linear;
}

/* Green knobs for gain controls */
.knob--gain .knob__fill {
  stroke: #6fbf73;
}

.knob--gain .knob__thumb {
  fill: #6fbf73;
  filter: drop-shadow(0 0 4px rgba(111, 191, 115, 0.6));
}

.knob--gain:hover .knob__thumb {
  fill: #85d989;
  filter: drop-shadow(0 0 8px rgba(111, 191, 115, 0.8));
}

.knob--gain:active .knob__thumb {
  fill: #9fe9a3;
  filter: drop-shadow(0 0 12px rgba(111, 191, 115, 1));
}

.knob:hover .knob__track {
  stroke: #3a3a3a;
}

.knob:hover .knob__thumb {
  fill: #e0b585;
  filter: drop-shadow(0 0 8px rgba(212, 165, 116, 0.8));
}

.knob:active .knob__thumb {
  fill: #f0c595;
  filter: drop-shadow(0 0 12px rgba(212, 165, 116, 1));
}

/* Waveform Buttons */
.waveform-select {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

.wave-btn {
  width: 44px;
  height: 32px;
  background: #252525;
  border: 2px solid #333;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}

.wave-btn svg {
  width: 100%;
  height: 100%;
}

.wave-btn:hover {
  border-color: #555;
  background: #2a2a2a;
  color: #aaa;
}

.wave-btn.active {
  border-color: #d4a574;
  background: rgba(212, 165, 116, 0.1);
  color: #d4a574;
}

.wave-btn:active {
  transform: scale(0.95);
}

/* Noise type icons — fixed colours regardless of active state */
.wave-btn[data-wave="pink"] svg path {
  stroke: #e87ab0;
}

.wave-btn[data-wave="white"] svg path {
  stroke: #e8e8e8;
}

/* Rust/burnt-orange knobs for degradation controls */
.knob--degradation .knob__fill {
  stroke: #c06840;
}

.knob--degradation .knob__thumb {
  fill: #c06840;
  filter: drop-shadow(0 0 4px rgba(192, 104, 64, 0.6));
}

.knob--degradation:hover .knob__thumb {
  fill: #d47850;
  filter: drop-shadow(0 0 8px rgba(192, 104, 64, 0.8));
}

.knob--degradation:active .knob__thumb {
  fill: #e08860;
  filter: drop-shadow(0 0 12px rgba(192, 104, 64, 1));
}