/* The table follows the same clockwise category order as the hero diagram. */
#summaryBody tr.category-start:not(:first-child)>td{
  border-top:3px solid var(--gold);
}

#summaryBody tr.category-start:not(:first-child)>td:first-child{
  position:relative;
}

#summaryBody tr.category-start:not(:first-child)>td:first-child::before{
  content:"";
  position:absolute;
  top:-6px;
  left:1rem;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 18%,transparent);
}

/* Selection must not look like an additional category separator. */
#summaryBody tr.selected{
  outline:none;
  background:color-mix(in srgb,var(--gold) 7%,var(--bg));
}

@media(max-width:560px){
  #summaryBody tr.category-start:not(:first-child)>td{
    border-top-width:2px;
  }
}