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

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

#icosmo-matrix-synth-container #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 */
}

#icosmo-matrix-synth-container #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 */
}

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

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

#icosmo-matrix-synth-container #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) {
     #icosmo-matrix-synth-container #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. */