.discipline-bar { overflow-x: auto; overflow-y: hidden; }
.discipline-bar.is-scrolling { overflow: hidden; }

/* Keep the track measurable at the same width as the page content. */
@media (max-width: 600px) {
  .discipline-bar .wrap { width: calc(100% - 40px); margin-inline: auto; }
}

.discipline-bar.is-scrolling .wrap,
.discipline-bar.is-manual-scroll .wrap {
  width: max-content;
  max-width: none;
  margin-left: 56px;
  margin-right: 0;
  justify-content: flex-start;
}

.discipline-bar.is-scrolling .wrap > *,
.discipline-bar.is-manual-scroll .wrap > * { flex: none; }

.discipline-bar.is-scrolling .wrap {
  animation: discipline-scroll var(--discipline-scroll-duration) linear infinite;
}

.discipline-bar.is-scrolling:hover .wrap { animation-play-state: paused; }

.discipline-bar.is-manual-scroll:focus-visible { outline: 2px solid #20291c; outline-offset: -4px; }

@media (max-width: 900px) {
  .discipline-bar.is-scrolling .wrap,
  .discipline-bar.is-manual-scroll .wrap { margin-left: 24px; }
}

@media (max-width: 600px) {
  .discipline-bar.is-scrolling .wrap,
  .discipline-bar.is-manual-scroll .wrap { margin-left: 20px; }
}

@keyframes discipline-scroll {
  to { transform: translateX(var(--discipline-scroll-distance)); }
}