.topic-strip{
  --pill-gap: .5rem;
  --pill-height: 40px;       /* make thinner with 32px if you like */
  --arrow-size: 40px;
  --fade-width: 18px;
}

.topic-viewport{
  overflow: visible;
  position: relative;
  height: auto;
  scroll-behavior: smooth !important;
}

.topic-track {
  display: flex;
  flex-wrap: wrap;     /* ← allow wrapping into new lines */
  gap: .5rem;          /* spacing between pills */
  align-items: flex-center;
  height: auto;
  overflow: visible;   /* no scrolling */
  scroll-snap-type: none; /* disable snap since we don’t scroll anymore */
}
.topic-track::-webkit-scrollbar{ display: none; }

.topic-pill{
  scroll-snap-align: start;
  white-space: nowrap;
}
.topic-pill > button{
  /*height: var(--pill-height);*/
  line-height: 1.5;
}

.topic-nav{
  position: absolute;
  top: 50%;
  width: var(--arrow-size);
  height: var(--arrow-size);
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.topic-nav-left { left: .25rem; }
.topic-nav-right{ right: .25rem; }

/* Edge fades (subtle) */
/*.topic-viewport::before,
.topic-viewport::after{
  content: "";
  position: absolute; top:0; bottom:0; width: 4rem;
  pointer-events: none; z-index: 1;
}*/
.topic-viewport::before{
  left: 0;  background: linear-gradient(to right, var(--bs-body-bg), transparent);
}
.topic-viewport::after{
  right: 0; background: linear-gradient(to left,  var(--bs-body-bg), transparent);
}

.topic-pill button {
  border-color: #6c757d;
  color: #6c757d;
}

/* Active pill style */
.topic-pill button.active{
  border-color: var(--bs-info);
  background: var(--bs-info-bg-subtle, rgba(13,202,240,.15));
  color: var(--bs-info);
  position: relative;
  z-index: 2 !important;
}

.topic-pill button:focus{
  box-shadow: none !important;
}

.topic-pill button:hover{
  color: var(--bs-info);
  border-color: var(--bs-info);
  background: none;
  cursor: pointer !important;
}

.topic-pill button.active:hover{
  color: var(--bs-info);
  background: var(--bs-info-bg-subtle, rgba(13,202,240,.15));
}