/* Loading States
 * Branded progress bar for Turbo navigation + busy overlay for Turbo Frames.
 * Turbo injects <div class="turbo-progress-bar"> and adds [busy] to <turbo-frame>.
 * Reduced motion handled globally by _reset.css (kills all animations/transitions).
 */

@layer components {
  /* --- Turbo navigation progress bar --- */
  .turbo-progress-bar {
    height: 3px;
    background: linear-gradient(
      to right,
      oklch(var(--lch-flare)),
      oklch(var(--lch-golden))
    );
  }

  /* --- Turbo Frame busy overlay --- */
  turbo-frame[busy] {
    position: relative;
    min-height: 3rem;

    &::after {
      content: "Loading…";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      background: var(--color-canvas);
      color: var(--color-ink-muted);
      font-size: 0.875rem;
    }
  }
}