/* Shared cross-version switcher.
   Sits in each version page's topbar. Uses inherited (active version's) colors
   so it's theme-aware in both Paper and Ink. */

.versions-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid currentColor;
}
.versions-switch__home,
.versions-switch__item {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  padding: 5px 10px;
  line-height: 1;
  opacity: 0.55;
  border-right: 1px solid currentColor;
  transition: opacity 120ms ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.versions-switch > :last-child { border-right: 0; }
.versions-switch__home {
  font-family: ui-monospace, Menlo, monospace;
  padding: 5px 8px;
  opacity: 0.7;
}
.versions-switch__home:hover,
.versions-switch__item:hover { opacity: 1; }

.versions-switch__item[aria-current="page"] {
  font-weight: 700;
  opacity: 1;
  position: relative;
}
.versions-switch__item[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: 1px;
  height: 2px;
  background: currentColor;
}

/* small back-only link (kept for compatibility with earlier markup) */
.versions-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: inherit;
  opacity: 0.7;
  text-decoration: none;
}
.versions-back:hover { opacity: 1; }

/* Mobile: the switcher has 11+ items and would overflow on narrow screens.
   Allow horizontal scroll with momentum on touch; keep items full-size so
   they remain tappable. The scrollbar is suppressed for visual quiet. */
@media (max-width: 720px) {
  .versions-switch {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .versions-switch::-webkit-scrollbar { display: none; }
  .versions-switch__home,
  .versions-switch__item { flex-shrink: 0; }
}