/* ==========================================================================
   Shared shimmer/skeleton loading utility - used wherever a section fetches
   data from Firestore and needs a placeholder while it's in flight.
   ========================================================================== */

.skel-shimmer {
  background: linear-gradient(100deg, #ececec 30%, #f6f6f6 50%, #ececec 70%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s ease-in-out infinite;
}

@keyframes skelShimmer {
  0% { background-position: 180% 0; }
  100% { background-position: -20% 0; }
}

.skel-shimmer--dark {
  background: linear-gradient(100deg, #1c1c22 30%, #29292f 50%, #1c1c22 70%);
  background-size: 200% 100%;
}

.skel-card {
  border-radius: 16px;
  overflow: hidden;
}

.skel-line {
  height: 12px;
  border-radius: 6px;
  margin-bottom: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .skel-shimmer {
    animation: none;
    background: #ececec;
  }
  .skel-shimmer--dark {
    background: #232329;
  }
}