/**
 * reading-progress.css
 * The bar along the bottom of the reading area that says how far through the
 * document you are. Built by js/reading-progress.js.
 *
 * Styled to match the Android app's indicator, which sits above its tab bar:
 * a thin track, an accent fill, and the percentage to its right.
 *
 * Dependencies: --ts-accent (css/styles-core.css); --v5-* in the Studio
 * layout (css/v5-shell.css).
 */

.ts-read-progress {
  /* Fixed, and given left/width/bottom by js/reading-progress.js from the
     scrolling element's own rectangle — see place() for why not sticky. */
  position: fixed;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.9rem;
  /* The pull-back over the scroller's own padding is set by
     js/reading-progress.js, which measures it: it differs between layouts. */
  background: rgba(10, 10, 10, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  pointer-events: none;   /* it reports; it is not a control */
}

.ts-read-progress[hidden] { display: none; }

.ts-read-progress-track {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.ts-read-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--ts-accent);
  transition: width 0.15s linear;
}

.ts-read-progress-pct {
  flex: none;
  min-width: 2.6rem;
  text-align: right;
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;   /* the number must not jiggle as it counts */
  color: var(--ts-accent);
}

/* ---------- on a light page ---------- */

body.light-mode .ts-read-progress {
  background: rgba(255, 255, 255, 0.94);
  border-top-color: rgba(0, 0, 0, 0.08);
}
body.light-mode .ts-read-progress-track { background: rgba(0, 0, 0, 0.1); }

body.v5:not(.v5-dark) .ts-read-progress {
  background: rgba(255, 255, 255, 0.94);
  border-top-color: var(--v5-line);
}
body.v5:not(.v5-dark) .ts-read-progress-track { background: var(--v5-line); }
body.v5:not(.v5-dark) .ts-read-progress-fill { background: var(--v5-accent); }
body.v5:not(.v5-dark) .ts-read-progress-pct { color: var(--v5-accent); }

body.v5.v5-dark .ts-read-progress {
  background: rgba(13, 16, 23, 0.94);
  border-top-color: var(--v5-line);
}
body.v5.v5-dark .ts-read-progress-track { background: var(--v5-line); }
body.v5.v5-dark .ts-read-progress-fill { background: var(--v5-accent); }
body.v5.v5-dark .ts-read-progress-pct { color: var(--v5-accent); }

@media (prefers-reduced-motion: reduce) {
  .ts-read-progress-fill { transition: none; }
}