/* The controls live inside the lava-lamp popover (Wave 4). Four knob+icon stacks laid out in a row.
   On a narrow viewport the row wraps to 2×2 so all four stay reachable (spec §7d: none may drop). */
.mix-visualizer-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem 1.25rem;
    padding: 0.25rem;
}

/* One control: a RadialKnob with its Material icon as a caption underneath. RadialKnob has no icon
   slot, so the icon rides adjacent (spec §7e). Center the pair so the four read as a tidy row. */
.mix-visualizer-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

/* The caption icon is a MudIcon (a Razor component), so Blazor CSS isolation does not stamp the scope
   attribute onto its element — reach it with ::deep. */
.mix-visualizer-control ::deep .mix-visualizer-control-icon {
    opacity: 0.7;
}