.system_choices div > label {
  /* catches absolutely positioned children */
  position: relative; 

  /* disable text selection */
  user-select: none;
  -webkit-user-select: none;   /* Safari */
  -ms-user-select: none;       /* old Edge/IE */
  -webkit-touch-callout: none; /* iOS: no long-press menu */

  /* display style choices */
  text-decoration: underline dotted;
  text-decoration-thickness: 1.5px;
  cursor: pointer;
}

.system_choices div > label::after {
  content: attr(data-help);
  position: absolute; /* DEV: to avoid flow issues */
  background: #444;
  color: white;
  translate: -25%;
  padding: 4px 8px 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 14px;
  

  /* clicking label should not trigger checkbox */
  pointer-events: none; 
  transform: translateY(-100%) translateY(-12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0;
  z-index: 1;
}

/* arrow */
.system_choices div > label::before {
  content: "";
  height: 0px; width: 0px;
  position: absolute; /* DEV: to avoid flow issues */

  /* position so arrow points to top of text */
  left: 50%; bottom: 15%; 
  transform: translateY(-100%) translateY(-12px);
  
  /* downward-pointing triangle from top border, triangle size controlled here */
  border-top: 10px solid #444;  
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0; 
  z-index: 1;
}

.system_choices label:hover::after,
.system_choices label:focus-visible::after,
.system_choices label:hover::before,
.system_choices label:focus-visible::before { 
  visibility: visible;
  opacity: 1;
  pointer-events: none;
  transform: translateY(-100%) translateY(-2px);
}