/* The original spade and star lead the reading line; movement follows scrolling. */
.reading-progress {
  position: fixed;
  inset: var(--reading-progress-top, 0px) 0 auto;
  height: 1px;
  z-index: 11;
  overflow: visible;
  visibility: hidden;
  pointer-events: none;
}

.reading-progress.is-ready {
  visibility: visible;
}

.reading-progress span {
  position: absolute;
  inset: 0;
}

.reading-progress-tip {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 32px;
  height: 22px;
  max-width: none;
  transform: translateY(-50%);
  transform-origin: center;
  /* No spin, easing, or autonomous motion, including under reduced motion. */
  transition: none;
}

.reading-progress-tip[data-direction="left"] {
  transform: translateY(-50%) rotate(180deg);
}

@media (forced-colors: active) {
  .reading-progress { height: 2px; }
  .reading-progress span { background: Highlight; }
  .reading-progress-tip { display: none; }
}

@media print {
  .reading-progress { display: none !important; }
}