From what I understand of CSS specificity and cascades, if an element is targeted twice with selectors of the same specificity then the latter style should be applied. However, this doesn’t seem to be the case in the following example, where the selector is first grouped with another a higher specificity.

https://codepen.io/rjwtrmn/pen/rNbbaoQ

<div class="a">
  I should be blue
  <div class="d">I should be green, but I am pink</div>
</div>

.a,
.b .c {
  color: red;
  .d {
    color: pink;
  }
}


.a {
  color: blue;
  .d {
    color: green;
  }
}

From the documentation and answers to similar questions on here I expected each selector in the CSS group to be independent with regards to specificity calculations. Am I misunderstanding the spec or is it a known bug?