/* version-strip -horizontal scrollable strip pinning the current
 * version + jump-to-any-other version. One row, no wrap, ellipsis on
 * long labels. The current entry is visually pinned (primary border +
 * primary text) so the operator always knows where "now" is even
 * after scrolling.
 *
 * Composes:
 *   .version-strip-item                  -base chip (anchor or button)
 *   .version-strip-item.is-current       -pinned current version
 *
 * Reuse beyond recipes: framework mapping snapshots, period-close
 * locked-month timeline, any entity with an immutable version chain.
 *
 * Legacy alias: ``.recipe-version-strip`` (used by recipes/detail.html
 * since the v0 design) is kept so prod renders cleanly while the
 * template migrates to ``.version-strip``.
 */

.version-strip,
.recipe-version-strip {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  padding: 0 var(--space-3) var(--space-3);
  scroll-snap-type: x mandatory;
}

.version-strip > a,
.version-strip > button,
.recipe-version-strip > a,
.recipe-version-strip > button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--divider);
  color: var(--muted);
  font-size: var(--font-size-small);
  font-weight: 700;
  white-space: nowrap;
  scroll-snap-align: start;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}

.version-strip > a:hover,
.version-strip > button:hover,
.recipe-version-strip > a:hover,
.recipe-version-strip > button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.version-strip > .is-current,
.version-strip > .current,
.recipe-version-strip > .is-current,
.recipe-version-strip > .current {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
  cursor: default;
}