/* Detailed-report section navigator */

.detail-page {
  scroll-padding-top:76px;
}

.detail-page .jumpbar {
  top:0;
  padding:0;
  color:#20252c;
  background:rgba(250,248,243,.96);
  border-bottom:1px solid rgba(17,19,24,.14);
  box-shadow:0 10px 30px rgba(8,10,13,.09);
  backdrop-filter:blur(18px) saturate(130%);
}

.detail-page .jumpbar .shell {
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  padding-top:9px;
  padding-bottom:9px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.detail-page .jumpbar .shell::-webkit-scrollbar {
  display:none;
}

.detail-page .jumpbar a {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 13px;
  border:1px solid transparent;
  border-radius:999px;
  color:#4d5662;
  background:transparent;
  font-size:12px;
  font-weight:650;
  line-height:1;
  letter-spacing:0;
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.detail-page .jumpbar a:hover {
  color:#15191f;
  background:#eee8de;
  border-color:rgba(17,19,24,.09);
}

.detail-page .jumpbar a.active,
.detail-page .jumpbar a[aria-current="location"] {
  color:#ffffff;
  background:#15191f;
  border-color:#15191f;
  box-shadow:0 6px 18px rgba(8,10,13,.17);
}

.detail-page main > section {
  scroll-margin-top:76px;
}

@media (max-width:900px) {
  .detail-page .jumpbar .shell {
    width:100%;
    padding-right:16px;
    padding-left:16px;
  }

  .detail-page .jumpbar a {
    min-height:36px;
    padding:0 12px;
    font-size:11px;
  }
}

@media (max-width:560px) {
  .detail-page {
    scroll-padding-top:72px;
  }

  .detail-page .jumpbar {
    top:0;
  }

  .detail-page main > section {
    scroll-margin-top:72px;
  }
}
