/* Progressive enhancement: without JavaScript, all original fragment links work. */
html.cs-article-navigation {
  scroll-padding-top: calc(var(--cs-article-header-height) + var(--cs-article-index-height) + 12px);
}
html.cs-article-navigation .cs-article-index {
  position: sticky;
  top: var(--cs-article-header-height);
  z-index: 20; /* The primary header and its dropdowns remain above the index. */
  /* Use the layout viewport, excluding its scrollbar, rather than 100vw. */
  width: var(--cs-article-viewport-width);
  max-width: none;
  margin-inline: calc((100% - var(--cs-article-viewport-width)) / 2);
  background: var(--bt-paper, var(--bg));
  border-top: 0; /* The header already supplies the joining border. */
  border-bottom: 1px solid var(--line);
  padding-block: 12px;
  padding-inline: max(16px, calc((var(--cs-article-viewport-width) - var(--max)) / 2));
}
html.cs-article-navigation .cs-article-nav-target {
  /* The root owns the whole offset: don't add the older per-section margin. */
  scroll-margin-top: 0;
}
html.cs-article-navigation .cs-article-index a {
  min-height: 44px;
}
html.cs-article-navigation .cs-article-index a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
/* This index follows, rather than sits inside, the short world-coins hero. */
html.cs-article-navigation .wc-index {
  background: var(--wc-paper, var(--bg));
  border-color: var(--wc-line, var(--line));
}
@media (max-width: 900px) {
  html.cs-article-navigation .cs-article-index {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 20px;
    overflow-x: auto;
    padding: 8px 12px;
    scrollbar-width: thin;
    scroll-padding-inline: 12px;
    overscroll-behavior-x: contain;
  }
  html.cs-article-navigation .cs-article-index a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}
@media (forced-colors: active) {
  html.cs-article-navigation .cs-article-index {
    background: Canvas;
    border-color: CanvasText;
  }
  html.cs-article-navigation .cs-article-index a:focus-visible {
    outline-color: Highlight;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.cs-article-navigation { scroll-behavior: auto; }
}
@media print {
  html.cs-article-navigation { scroll-padding-top: 0; }
  html.cs-article-navigation .cs-article-index { display: none; }
}