/* Shared loading feedback: see js/loader.js. Set --rf-loader-color on <html> to recolour it (default red). */
:root { --rf-loader-color: #e60000; }

/* Progress bar across the top: the script sets the width; this fills, glows at its head and shimmers so it reads as "in progress" */
.rf-loader { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 2147483000; pointer-events: none; opacity: 0; transition: opacity .25s; }
.rf-loader span { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 0 4px 4px 0; transition: width .35s ease;
  background-color: var(--rf-loader-color);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 140px 100%; background-repeat: repeat-x;
  box-shadow: 0 0 10px var(--rf-loader-color), 0 0 5px var(--rf-loader-color); }
.rf-loading .rf-loader { opacity: 1; }
.rf-loading .rf-loader span { animation: rf-shimmer 1.1s linear infinite; }
.rf-loading, .rf-loading body { cursor: progress; }
@keyframes rf-shimmer { from { background-position: -140px 0; } to { background-position: 140px 0; } }

/* Small corner spinner while a background request runs */
.rf-badge { position: fixed; left: 1rem; bottom: 1rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); z-index: 2147483000; opacity: 0; pointer-events: none; transition: opacity .2s; }
.rf-badge::after { content: ""; position: absolute; inset: .6rem; border: 2px solid var(--rf-loader-color); border-right-color: transparent; border-radius: 50%; }
.rf-busy .rf-badge { opacity: 1; }
.rf-busy .rf-badge::after { animation: rf-spin .7s linear infinite; }

/* A spinner in front of the label of the button that was pressed; the label stays, the button cannot be pressed twice */
.rf-btn-loading { pointer-events: none; opacity: .85; cursor: progress; }
.rf-btn-loading::before { content: ""; display: inline-block; flex: none; box-sizing: border-box; width: 1em; height: 1em; margin-inline-end: .55em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.15em; animation: rf-spin .7s linear infinite; }
@keyframes rf-spin { to { transform: rotate(360deg); } }

/* Read aloud by screen readers, not shown */
.rf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* People who ask for less motion get a bar that simply grows, with no shimmer, and a still ring */
@media (prefers-reduced-motion: reduce) {
  .rf-loader span { transition: none; }
  .rf-loading .rf-loader span { animation: none; }
  .rf-busy .rf-badge::after, .rf-btn-loading::before { animation: none; }
}