/* Loading primitives — five reusable patterns.
   Drop into any project: uses CSS vars with fallbacks so non-Bloomberg
   themes still render sensibly. All classes prefixed .ld- to avoid clashes. */

:root {
  --ld-accent: var(--accent, #FF8C00);
  --ld-bg: var(--card-bg, #0a0a0a);
  --ld-border: var(--border, #333333);
  --ld-muted: var(--text-muted, #888888);
  --ld-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── A. Skeleton shimmer ──────────────────────────────────────────── */
.ld-skel {
  position: relative;
  overflow: hidden;
  background: var(--ld-bg);
}
.ld-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 140, 0, 0.08), transparent);
  animation: ld-shimmer 1.5s infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes ld-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── B. Progress fill bar (2px under a count text) ────────────────── */
.ld-progress-track {
  height: 2px;
  background: var(--ld-border);
  position: relative;
  width: 100%;
}
.ld-progress-fill {
  height: 100%;
  background: var(--ld-accent);
  width: 0%;
  transition: width 0.2s linear;
}

/* ── C. Filter-bar pulse (attention-grab on filter change) ────────── */
.ld-pulse {
  animation: ld-pulse 0.6s ease-out;
}
@keyframes ld-pulse {
  0%   { box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.5), 0 0 24px rgba(255, 140, 0, 0.6); }
  100% { box-shadow: 0 0 0 0 rgba(255, 140, 0, 0), 0 0 0 rgba(255, 140, 0, 0); }
}

/* ── D. Input spinner (right-aligned inside the input) ────────────── */
.ld-input-wrap {
  position: relative;
  display: inline-block;
}
.ld-input-wrap > input {
  padding-right: 2rem;
}
.ld-input-spinner {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 1.5px solid var(--ld-border);
  border-top-color: var(--ld-accent);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  box-sizing: border-box;
}
.ld-input-spinner.ld-on {
  opacity: 1;
  animation: ld-spin 0.7s linear infinite;
}
@keyframes ld-spin {
  to { transform: rotate(360deg); }
}

/* ── E. Prefetch bar (thin progress under range slider) ───────────── */
.ld-prefetch-wrap {
  position: relative;
}
.ld-prefetch-bar {
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 2px;
  background: var(--ld-accent);
  width: 0%;
  transition: width 0.1s linear;
  opacity: 0.6;
  pointer-events: none;
}

/* ── Button spinner variant (inline) ──────────────────────────────── */
.ld-btn-spinning {
  position: relative;
  color: transparent !important;
}
.ld-btn-spinning::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 1.5px solid rgba(0, 0, 0, 0.25);
  border-top-color: #000;
  border-radius: 50%;
  animation: ld-spin 0.7s linear infinite;
}
.btn-secondary.ld-btn-spinning::after {
  border-color: rgba(255, 140, 0, 0.25);
  border-top-color: var(--ld-accent);
}