/* Reusable source/status badge help. Styled to match the terminal UI. */
.status-help-badge{
  position:relative;
  cursor:help;
  outline:none;
}

.inline-ref.tag{
  display:inline-flex;
  align-items:center;
  vertical-align:baseline;
  width:auto;
  min-height:0;
  margin:0;
  padding:2px 6px;
  border-width:1px;
  border-style:solid;
  border-radius:999px;
  font-size:.72rem;
  line-height:1.15;
  white-space:nowrap;
}

.inline-ref.exact-badge{
  color:#8bffc0;
  border-color:#39785c;
  background:#07150f;
}

.status-help-badge:focus-visible{
  box-shadow:0 0 0 1px #baffdc,0 0 12px var(--shadow);
}

.damage-symptom-tag{
  cursor:help;
  user-select:text;
}

.damage-symptom-tag.is-selected{
  box-shadow:0 0 0 1px #baffdc,0 0 12px var(--shadow);
}

.status-help-badge::after{
  content:attr(data-status-tip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  z-index:260;
  width:max-content;
  max-width:min(300px,75vw);
  padding:7px 9px;
  border:1px solid #3f8062;
  border-radius:6px;
  background:#031009;
  color:#dfffee;
  box-shadow:0 10px 28px rgba(0,0,0,.42),0 0 13px var(--shadow);
  font-size:.72rem;
  font-weight:500;
  line-height:1.35;
  letter-spacing:0;
  text-align:left;
  white-space:normal;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,3px);
  transition:opacity .12s ease,transform .12s ease;
}

.status-help-badge::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 3px);
  z-index:261;
  width:8px;
  height:8px;
  border-right:1px solid #3f8062;
  border-bottom:1px solid #3f8062;
  background:#031009;
  opacity:0;
  transform:translateX(-50%) rotate(45deg);
  pointer-events:none;
  transition:opacity .12s ease;
}

.status-help-badge:hover::after,
.status-help-badge:focus-visible::after,
.damage-symptom-tag.is-selected::after{
  opacity:1;
  transform:translate(-50%,0);
}

.status-help-badge:hover::before,
.status-help-badge:focus-visible::before,
.damage-symptom-tag.is-selected::before{
  opacity:1;
}

@media(max-width:700px){
  .status-help-badge::after{
    max-width:240px;
  }
}