.report-content .evidence-statement{
  margin:0 0 17px;
}

.report-content .evidence-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  vertical-align:baseline;
  margin-left:5px;
  padding:2px 5px;
  border:1px solid #d7dde0;
  border-radius:999px;
  background:#fafbfb;
  color:#7b858b;
  font:600 9px/1.15 var(--sans);
  letter-spacing:.025em;
  white-space:nowrap;
  cursor:help;
  transform:translateY(-1px);
  outline:none;
}

.report-content .evidence-badge:hover,
.report-content .evidence-badge:focus-visible{
  border-color:#c5cdd1;
  background:#f7f9f9;
  color:#5f6a70;
}

.report-content .evidence-badge::after{
  content:attr(data-hint);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  z-index:30;
  width:max-content;
  max-width:min(300px,calc(100vw - 24px));
  padding:7px 9px;
  border:1px solid #d8dee1;
  border-radius:7px;
  background:#182127;
  color:#f3f6f7;
  box-shadow:0 8px 22px rgba(12,19,26,.14);
  font:500 10px/1.4 var(--sans);
  letter-spacing:0;
  text-transform:none;
  white-space:normal;
  overflow-wrap:anywhere;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,4px);
  transition:opacity .12s ease,transform .12s ease;
}

.report-content .evidence-badge::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 4px);
  z-index:31;
  width:7px;
  height:7px;
  border-right:1px solid #d8dee1;
  border-bottom:1px solid #d8dee1;
  background:#182127;
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) rotate(45deg);
}

.report-content .evidence-badge:hover::after,
.report-content .evidence-badge:focus-visible::after,
.report-content .evidence-badge:hover::before,
.report-content .evidence-badge:focus-visible::before{
  opacity:1;
}

.report-content .evidence-badge:hover::after,
.report-content .evidence-badge:focus-visible::after{
  transform:translate(-50%,0);
}

@media(max-width:720px){
  .report-content .evidence-badge{
    margin-left:4px;
    padding:2px 4px;
    font-size:8.5px;
    /* A transform on the badge makes fixed descendants use the badge as
       their containing block. Use relative top positioning instead so the
       mobile hint is genuinely anchored to the viewport. */
    transform:none;
    top:-1px;
  }

  .report-content .evidence-badge::after{
    position:fixed;
    left:max(12px,env(safe-area-inset-left));
    right:max(12px,env(safe-area-inset-right));
    bottom:max(14px,env(safe-area-inset-bottom));
    width:auto;
    max-width:none;
    box-sizing:border-box;
    padding:10px 12px;
    z-index:120;
    font-size:11px;
    line-height:1.45;
    transform:translateY(6px);
  }

  .report-content .evidence-badge:hover::after,
  .report-content .evidence-badge:focus-visible::after{
    transform:translateY(0);
  }

  .report-content .evidence-badge::before{
    display:none;
  }
}

@media print{
  .report-content .evidence-badge{
    border-color:#ccc;
    background:transparent;
    color:#666;
  }
  .report-content .evidence-badge::before,
  .report-content .evidence-badge::after{
    display:none!important;
  }
}