/* The line that says something is happening.
 *
 * Turbo already fires a progress bar on any navigation that takes longer than
 * `Turbo.setProgressBarDelay` — it just ships with no styling worth seeing, so
 * on a page that took two seconds nothing at all appeared and the click read as
 * ignored. This is that bar, dressed.
 *
 * Fixed to the top of the MAIN column rather than the whole window: the rail
 * and the header do not go anywhere while a page loads, and a line across them
 * says the whole app is busy when only the content is.
 *
 * It pulses rather than filling honestly, because Turbo cannot know how far
 * through it is — a bar that creeps to 90% and waits is a lie people learn to
 * distrust. A pulse says "working", which is all anybody needs. */
.turbo-progress-bar {
  position: fixed;
  top: 0;
  height: 3px;
  /* Clear of the rail so it spans the content, not the chrome. The rail's own
     width is set outright rather than through a variable — see 12-chrome.css —
     so it is matched here the same way, including collapsed. */
  left: 226px;
  right: 0;
  width: auto !important;
  background: linear-gradient(90deg,
              var(--accent, #2f6f5e) 0%,
              var(--signal, #c9772e) 50%,
              var(--accent, #2f6f5e) 100%);
  background-size: 200% 100%;
  animation: progress-pulse 1.1s ease-in-out infinite;
  transition: none !important;
  z-index: 60;
}

@keyframes progress-pulse {
  0%   { background-position: 200% 0; opacity: .55; }
  50%  { opacity: 1; }
  100% { background-position: 0 0; opacity: .55; }
}

body.nav-collapsed .turbo-progress-bar { left: 58px; }

/* Below this the rail sits above the content rather than beside it, so the
   line spans the whole width. */
@media (max-width: 860px) {
  .turbo-progress-bar { left: 0; }
}

/* Somebody who asked for less motion gets a solid line instead of a pulse —
   still visible, still says the same thing. */
@media (prefers-reduced-motion: reduce) {
  .turbo-progress-bar {
    animation: none;
    background: var(--signal, #c9772e);
    opacity: .9;
  }
}