/* UQ Horizontal Scroll Nav (scrlnav) */
.uq-scrlnav {
  --uq-scrlnav-top: 0px;
  --uq-scrlnav-gap: 12px;
  --uq-scrlnav-pad-x: 12px;
  --uq-scrlnav-pad-y: 8px;
  --uq-scrlnav-border: 1px solid rgba(0,0,0,0.08);
  --uq-scrlnav-accent: var(--accent, #1e73be);
  --uq-scrlnav-muted: rgba(0,0,0,0.5);
  position: sticky;
  top: var(--uq-scrlnav-top);
  background: var(--base-3, #fff);
  z-index: 10;
  border-bottom: var(--uq-scrlnav-border);
}

/* Optional gradient edge hint */
.uq-scrlnav.uq-scrlnav--gradient { position: sticky; }
.uq-scrlnav.uq-scrlnav--gradient::before,
.uq-scrlnav.uq-scrlnav--gradient::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; width: 28px; pointer-events: none; z-index: 2;
}
.uq-scrlnav.uq-scrlnav--gradient::before { left: 0; background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)); }
.uq-scrlnav.uq-scrlnav--gradient::after  { right:0; background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0)); }
.uq-scrlnav.uq-scrlnav--gradient.is-at-start::before { opacity: .2; }
.uq-scrlnav.uq-scrlnav--gradient.is-at-end::after   { opacity: .2; }

.uq-scrlnav__track {
  display: flex;
  align-items: center;
  gap: var(--uq-scrlnav-gap);
  padding: var(--uq-scrlnav-pad-y) var(--uq-scrlnav-pad-x);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  position: relative;
}
.uq-scrlnav__track::-webkit-scrollbar { display: none; }

.uq-scrlnav__item {
  display: inline-flex;
  align-items: center;
  padding: 6px 8px;
  color: var(--uq-scrlnav-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.uq-scrlnav__item:hover,
.uq-scrlnav__item:focus { color: var(--uq-scrlnav-accent); outline: none; }
.uq-scrlnav__item.is-active { color: var(--uq-scrlnav-accent); font-weight: 700; }

.uq-scrlnav__indicator {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--uq-scrlnav-accent);
  transition: transform .2s ease, width .2s ease;
}

.uq-scrlnav__advancer {
  appearance: none;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--uq-scrlnav-muted);
  margin: 6px;
}
.uq-scrlnav__advancer[disabled] { opacity: .4; cursor: default; }

.uq-scrlnav__advancer--left { float: left; }
.uq-scrlnav__advancer--right { float: right; }

/* Dragging UX */
.uq-scrlnav__track.is-dragging { cursor: grabbing; user-select: none; }

/* Pills variant */
.uq-scrlnav.uq-scrlnav--pills { border-bottom: none; }
.uq-scrlnav.uq-scrlnav--pills .uq-scrlnav__item {
  border-bottom: none;
  border-radius: 999px;
  padding: 6px 12px;
}
.uq-scrlnav.uq-scrlnav--pills .uq-scrlnav__item.is-active {
  background: var(--uq-scrlnav-accent);
  color: #fff;
}