/* css/keyboard-controls.css */
/* Styles for the performance controls panel next to the keyboard */

#hold-mod-pitch-section-placeholder .hold-panic-buttons { 
    display: flex; 
    flex-direction: row; 
    gap: 6px; 
    margin-bottom: 8px; 
    width: 100%; 
}
#hold-mod-pitch-section-placeholder .hold-panic-buttons button { 
    flex: 1; 
}

#hold-mod-pitch-section-placeholder .wheels-container { 
    display: flex; 
    flex-direction: row !important; /* Ensure horizontal layout for wheels */
    justify-content: space-around; 
    align-items: stretch; /* Stretch to fill height */
    width: 100%; 
    gap: 12px; /* Space between wheels */
    flex-grow: 1; /* Allow container to take available vertical space */
    padding-top: 5px; 
    min-height: 120px; /* Ensure it has some height */
}

#hold-mod-pitch-section-placeholder .wheel-group { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 2px; /* Small gap between label, fader, value */
    flex: 1; /* Each wheel group takes equal space */
}

#hold-mod-pitch-section-placeholder .wheel-group label { 
    font-size:var(--font-size-label); 
    margin-bottom: 1px;
}

#hold-mod-pitch-section-placeholder .wheel-group .value-display { 
    font-size:var(--font-size-value-display); 
    margin-top: 1px;
}

#hold-mod-pitch-section-placeholder .wheel-group input[type="range"].vertical-slider { 
    height: 100px; /* Default height for vertical sliders */
    /* General vertical slider styles from forms.css will apply */
}

/* Responsive adjustments for wheel controls */
@media (max-width: 900px) {
     #hold-mod-pitch-section-placeholder .wheel-group input[type="range"].vertical-slider { 
        height: 80px !important; 
    }
}
/* On very small screens, if hold-mod-pitch-section-placeholder itself stacks, 
   the wheels will already be somewhat arranged due to the parent flex-direction.
   We primarily ensure they stay as row items within their own container. */