Comparison
Source ordervsSpecificity
Source order
you moved the import to the bottom of the file and the styles started applying.
The final tie-break in the cascade: with equal importance, layer and specificity, the declaration that appears later wins. It is the reason bundler import order and the position of a component's stylesheet in the output are load-bearing, and the reason the same code can behave differently in dev and in a production build. Relying on it deliberately is fine and cheap; relying on it accidentally is a class of bug that only appears after a build change.
Full entry →Specificity
your new rule does nothing until you nest it one level deeper, and now it wins.
A three-part score — ids, then classes and attributes and pseudo-classes, then elements — compared left to right to break a tie between rules. It is not a single number, so a hundred classes never beat one id, and adding a selector to win is how a stylesheet ends up with rules nobody dares delete. It only comes into play after origin and layer have already been decided, which is why a rule in a later layer can win with a much lower score.
Full entry →