/* The original wrapping menu remains the fallback until the hub script creates its track. */
#reading > .purpose-chips[data-purpose-ready] {
  display: block;
  min-inline-size: 0;
}

#reading > .purpose-chips[data-purpose-ready] > .purpose-chip-frame {
  --purpose-fade-width: clamp(32px, 5vw, 64px);
  position: relative;
  min-inline-size: 0;
  max-inline-size: 100%;
  gap: inherit;
}

#reading > .purpose-chips[data-purpose-ready] > .purpose-chip-frame::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: var(--purpose-fade-width);
  background: linear-gradient(to right, transparent, var(--canvas));
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

#reading > .purpose-chips[data-purpose-ready][data-purpose-expanded="false"] > .purpose-chip-frame[data-right-overflow="true"]::after {
  opacity: 1;
}

#reading > .purpose-chips[data-purpose-ready] > .purpose-chip-frame > .purpose-chip-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: inherit;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  box-sizing: border-box;
}

#reading > .purpose-chips[data-purpose-ready] > .purpose-chip-frame > .purpose-chip-track > .purpose-chip {
  flex: 0 0 auto;
  white-space: nowrap;
}

#reading > .purpose-chips[data-purpose-ready][data-purpose-expanded="false"] > .purpose-chip-frame > .purpose-chip-track {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

#reading > .purpose-chips[data-purpose-ready][data-purpose-expanded="false"] > .purpose-chip-frame > .purpose-chip-track::-webkit-scrollbar {
  display: none;
}

#reading > .purpose-chips[data-purpose-ready][data-purpose-expanded="false"] > .purpose-chip-frame > .purpose-chip-track.is-dragging,
#reading > .purpose-chips[data-purpose-ready][data-purpose-expanded="false"] > .purpose-chip-frame > .purpose-chip-track.is-dragging > .purpose-chip {
  cursor: grabbing;
}

#reading > .purpose-chips[data-purpose-ready][data-purpose-expanded="false"] > .purpose-chip-frame > .purpose-chip-track > .purpose-chip:focus-visible {
  outline-color: currentColor;
  outline-offset: -3px;
}