/* The controls row sits in the mix-detail foreground, below the back button and above the masthead.
   A horizontal row of four icon+slider controls. On narrow viewports it wraps to keep all four
   present (spec §3b: wrap is the chosen mobile behaviour — none may drop). */
.mix-visualizer-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin: 0.5rem 0 1.5rem;
}

/* One control: a compact label icon followed by the slider. The slider gets a fixed-ish track width
   so the four read as a tidy row rather than stretching unevenly. */
.mix-visualizer-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 180px;
    min-width: 160px;
    max-width: 260px;
}

.mix-visualizer-control-icon {
    flex: 0 0 auto;
    opacity: 0.7;
}

/* MudSlider renders a Razor component, so its root is reached with ::deep (a bare scoped selector
   would not be stamped onto the child component's element). Let the slider fill the remaining width
   of its control so the icon+slider pair lays out cleanly. */
.mix-visualizer-control ::deep .mud-slider {
    flex: 1 1 auto;
    margin: 0;
}