/*
 * Article Detail compatibility primitives.
 *
 * Ownership:
 * - editorial-content.css: shared semantic blocks used by TinyMCE + public prose;
 * - article-editorial-system.css: public article body typography/rhythm;
 * - article-detail-v3-layout.css: masthead, opening, cover, TOC, sidebar,
 *   end-of-article, related content and responsive composition.
 *
 * Keep this file deliberately small. Do not add visual composition overrides here.
 */

.ct-reading-progress {
  position: fixed;
  z-index: 1005;
  top: var(--ct-detail-sticky-offset, 0);
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
}

.ct-reading-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ct-article-gold, #b27a1b);
  transform: scaleX(0);
  transform-origin: left;
}

.ct-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ct-detail-loading {
  padding: 80px 0;
}

.ct-article-updating {
  padding: 26px 0;
  color: #66736b;
  font-style: italic;
}

@media (prefers-reduced-motion: no-preference) {
  .ct-reading-progress span {
    transition: transform 80ms linear;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ct-reading-progress span {
    transition: none;
  }
}

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