/* The one cross-form rule set.
 *
 * `.loading-spinner`, its `::before` and `@keyframes spin` were declared in
 * `main`'s template and consumed by three forms that do not own them:
 * `user_management_html`, `returned_prescriptions_html` and
 * `spoke_mar_generation_html`. A rule declared in the shell and used by the
 * leaves has no home in one-asset-per-form, so it lives here and is
 * head-linked. At runtime a leaf root is a descendant of `main`'s root either
 * way; what this buys is the leaves rendering their loading state on the
 * DESIGNER canvas, where `main`'s styles do not reach.
 *
 * Unscoped, exactly as they were: these are app-global class rules, not
 * form-scoped ones. `spin` stays unprefixed — `main` is the app's only
 * `animation:` declaration and this is the sole declaration of the name, so
 * prefixing would rewrite `main` for a collision that cannot happen.
 *
 * `main`'s box-sizing reset and its `body` font live here for the same reason
 * and one more: both are app-global, on the page for the whole session, so
 * scoping them to `.spoke-shell` would NARROW what they reach — and `body`
 * cannot be scoped at all. Order audit: `px_theme/_px_theme_css.py` declares
 * no bare `body` and no `*` selector, so a head link, early, creates no tie
 * with the dependency's injected rules. Re-audit if the dependency ever grows
 * one.
 */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* Loading spinner */
.loading-spinner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; color: #888; font-size: 15px;
}
.loading-spinner::before {
  content: ''; width: 36px; height: 36px; border: 3px solid #ddd;
  border-top-color: var(--px-accent); border-radius: 50%; animation: spin 0.8s linear infinite;
  margin-bottom: 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }