/* FR-036: busy submit buttons, slow-request progress bar and back to top. Brand tokens only; dark and light themes. */

/* Busy button: keeps its colours and focus ring; the spinner is decorative (the label carries the meaning). */
.is-busy { cursor: progress; }
.is-busy[aria-disabled="true"] { opacity: .85; }
.busy-spinner { display: inline-block; flex: none; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: busy-spin .8s linear infinite; }
@keyframes busy-spin { to { transform: rotate(360deg); } }

/* Slim sage bar across the top, shown after about 500 ms. */
.progress-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 3px; overflow: hidden; pointer-events: none; background: var(--color-border); }
.progress-bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: var(--color-primary); animation: progress-slide 1.2s ease-in-out infinite; }
.progress-bar[hidden] { display: none; }
@keyframes progress-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* Back to top: fixed bottom right inside the safe area; long pages reserve room so it never hides the last content. */
.back-to-top { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 60;
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .5rem .9rem; border-radius: 999px; cursor: pointer;
  background: var(--color-raised); color: var(--color-text); border: 2px solid var(--color-picks); box-shadow: 0 4px 14px rgb(0 0 0 / .25);
  font: 700 var(--type-small)/1.2 var(--font-body); }
.back-to-top:hover { background: var(--color-surface); }
.back-to-top[hidden] { display: none; }
.back-to-top-arrow { color: var(--color-picks); font-size: 1.1em; line-height: 1; }
.has-back-to-top body { padding-bottom: 4.5rem; }
@media (forced-colors: active) { .back-to-top { border-color: ButtonText; } .progress-bar::before { background: Highlight; } }

/* Reduced motion: a static ring and a static full bar, no smooth scrolling (feedback.js). */
@media (prefers-reduced-motion: reduce) {
  .busy-spinner { animation: none !important; border-right-color: currentColor; border-style: dotted; }
  .progress-bar::before { animation: none !important; width: 100%; }
}