/* Chapter rail, by touch (see assets/js/shared/rail-touch.js).
   Phones only: a grip over the hairline rail; held, the rail opens into
   its contents and the chapter under the thumb is magnified, lifted
   clear of the thumb, so you can read where you're going. */

.rt-grip { display: none; }
.rt-lab { display: contents; font-style: normal; }

@media (max-width: 899px) {
  .rt-grip {
    display: block;
    position: fixed;
    right: 0;
    z-index: 51;
    width: 2.75rem;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }

  .rt-lab {
    display: inline-flex;
    align-items: center;
    gap: inherit;
    transform-origin: 100% 50%;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
  }

  [data-progress].rt-held {
    width: min(15.5rem, 70vw);
    border-radius: 0.6rem;
    background: rgba(10, 10, 14, 0.92);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  }

  [data-progress].rt-held a i,
  [data-progress].rt-held a span { opacity: 1; transform: none; transition: none; }

  [data-progress].rt-held .rt-lab {
    opacity: calc(0.4 + 0.6 * var(--rt-z, 0));
    /* Lift and size come from the script, fitted to the panel. */
    transform: translate3d(calc(var(--rt-x, 0) * -1px), 0, 0) scale(var(--rt-s, 1));
  }

  [data-progress].rt-held li.rt-near a span { font-weight: 700; }
  [data-progress].rt-held li.rt-near a::after { transform: scale(2.2); }
}

@media (prefers-reduced-motion: reduce) {
  .rt-lab { transition: none; }
}