/* Keep the page's quiet margin useful while a long guide is being read. */
.reading-progress { display: none; }

@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .guide-toc[data-reading-guide] {
    position: sticky;
    top: 32px;
    max-height: calc(100vh - 64px);
    max-height: calc(100svh - 64px);
    overflow: auto;
    scrollbar-width: thin;
    /* Leave room for keyboard focus without shifting the existing text edge. */
    padding: 6px 8px 6px 6px;
    margin: -6px 0 -6px -6px;
  }

  .guide-toc[data-reading-guide] a[aria-current="location"] {
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
  }

  .guide-toc[data-reading-guide] .reading-progress {
    display: block;
    width: min(100%, 128px);
    height: 2px;
    margin-top: 20px;
    background: var(--dgl-line);
    overflow: hidden;
  }

  .reading-progress-fill {
    display: block;
    height: 100%;
    background: var(--dgl-subtle);
    transform: scaleX(0);
    transform-origin: left center;
    /* Direct position updates: no animation or trailing motion. */
    transition: none;
  }
}

@media print {
  .guide-toc[data-reading-guide] {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .guide-toc[data-reading-guide] .reading-progress { display: none; }
}