/* The shared loader: a field narrowing to your answer (DESIGN_DIRECTION.md section 9).
   Bars are labelled with what the page actually holds; the last cut is the one that is yours, so it
   alone is orange (STUDIO_STYLE.md rule 1). Loops while the wait lasts; reduced motion shows the cut,
   still. Markup: _includes/trr-cut.html (pages) or hand-written copies in the studio index.html shells. */
.trr-cut { --cut-max: 420px; width: min(100%, var(--cut-max)); margin: var(--s-6, 32px) auto 0; text-align: left; }
.trr-cut > div { margin-top: 18px; }
.trr-cut span { display: block; font-family: 'Space Grotesk', sans-serif; font-size: var(--t-meta); color: var(--text-faint, var(--muted)); }
.trr-cut i { display: block; height: 10px; margin-top: 8px; width: var(--w); border-radius: var(--r-sm); background: var(--border-strong, var(--paper-rule)); }
.trr-cut > div:last-child i { background: var(--orange); }
.trr-cut--sm { --cut-max: 260px; margin-top: 12px; }
.trr-cut--sm > div { margin-top: 10px; }
.trr-cut--sm i { height: 6px; margin-top: 5px; }
@media (prefers-reduced-motion: no-preference) {
  .trr-cut i { animation: trr-cut 3.4s cubic-bezier(.2, .7, .2, 1) calc(var(--n) * 180ms) infinite; }
  @keyframes trr-cut {
    0%   { width: 100%; opacity: .35; }
    28%, 82% { width: var(--w); opacity: 1; }
    100% { width: var(--w); opacity: .35; }
  }
}
/* Pages that swap in tall content: hold the height so the footer does not jump when the loader goes. */
.trr-cut-hold { min-height: 100vh; }