/* ==========================================================================
   ABM Loading primitives
   --------------------------------------------------------------------------
   Shared, non-blocking loading states for page boot, skeleton placeholders and
   form/button feedback. Keep this file additive so page-specific CSS can stay
   authoritative during the progressive cleanup.
   ========================================================================== */

.abm-loader {
  pointer-events: none;
  z-index: var(--abm-z-loader, 3000);
}

.abm-loader[hidden] {
  display: none !important;
}

.abm-loading-placeholder[hidden],
.abm-loader-inline[hidden] {
  display: none !important;
}

.abm-loading-placeholder,
.abm-loader-inline {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: var(--abm-color-muted, #64748b);
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.35;
}

.abm-loading-placeholder--block {
  display: flex;
  width: 100%;
}

.abm-loading-dot,
.abm-loader-dot {
  flex: 0 0 auto;
  width: .72rem;
  height: .72rem;
  border: 2px solid rgba(15, 39, 64, .16);
  border-top-color: var(--abm-color-amber, #f5b301);
  border-radius: 999px;
  animation: abmLoadingSpin .72s linear infinite;
}

.abm-loading-region[aria-busy="true"] {
  cursor: wait;
}

.abm-skeleton {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 1rem;
  overflow: hidden;
  border-radius: var(--abm-radius-md, 16px);
  background: linear-gradient(90deg, #edf2f7 0%, #f8fafc 46%, #edf2f7 100%);
  background-size: 220% 100%;
}

.abm-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .56), transparent);
  animation: abmSkeletonSweep 1.25s ease-in-out infinite;
}

.abm-skeleton--text,
.abm-skeleton-line {
  height: .86rem;
  border-radius: 999px;
}

.abm-skeleton--title {
  height: 1.25rem;
  border-radius: 999px;
}

.abm-skeleton--meta {
  height: .72rem;
  border-radius: 999px;
}

.abm-skeleton--avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
}

.abm-skeleton--chip {
  width: 72px;
  height: 28px;
  border-radius: 999px;
}

.abm-skeleton--media {
  aspect-ratio: 16 / 10;
  min-height: 120px;
}

.abm-skeleton--card {
  min-height: 160px;
  border-radius: var(--abm-radius-xl, 24px);
}

.abm-skeleton-stack {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.abm-skeleton-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  min-width: 0;
}

.abm-btn.is-loading,
.abm-btn--loading,
.btn.is-loading:not(.btn-close),
.abm-submit-btn.is-loading,
button.is-loading,
a[data-abm-loading].is-loading {
  position: relative;
  pointer-events: none;
  cursor: wait;
  color: transparent !important;
  user-select: none;
}

.abm-btn.is-loading::after,
.abm-btn--loading::after,
.btn.is-loading:not(.btn-close)::after,
.abm-submit-btn.is-loading::after,
button.is-loading::after,
a[data-abm-loading].is-loading::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1rem;
  height: 1rem;
  margin: -.5rem 0 0 -.5rem;
  border: 2px solid rgba(15, 39, 64, .20);
  border-top-color: var(--abm-color-amber, #f5b301);
  border-radius: 999px;
  animation: abmLoadingSpin .72s linear infinite;
}

.abm-btn.is-loading *,
.abm-btn--loading *,
.btn.is-loading:not(.btn-close) *,
.abm-submit-btn.is-loading *,
button.is-loading *,
a[data-abm-loading].is-loading * {
  visibility: hidden;
}

@keyframes abmLoadingSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes abmSkeletonSweep {
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .abm-loading-dot,
  .abm-loader-dot,
  .abm-skeleton::after,
  .abm-btn.is-loading::after,
  .abm-btn--loading::after,
  .btn.is-loading:not(.btn-close)::after,
  .abm-submit-btn.is-loading::after,
  button.is-loading::after,
  a[data-abm-loading].is-loading::after {
    animation: none !important;
  }
}