/* =========================================================
   SKELETON LOADING PRIMITIVES (issue #157)
   =========================================================
   A small reusable set of loading placeholders used across js/* render
   functions while network data is in flight. Composed from three shapes
   (.skeleton-rect / .skeleton-circle / .skeleton-line) built on one base
   (.skeleton) that owns the shimmer animation, so every placeholder in the
   app animates identically and can be re-themed from one place.

   Usage: pair with the JS helpers in js/skeleton.js (skeletonLine/
   skeletonRect/skeletonCircle build the markup; beginSkeletonLoading/
   endSkeletonLoading manage role="status"/aria-busy on the container).
   Don't hand-roll a new shimmer animation elsewhere — extend this file. */

:root {
  --skeleton-base: var(--surface-1);
  --skeleton-shine: rgba(255,255,255,0.6);
  --skeleton-duration: 1.4s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --skeleton-base: #2a2a2a;
    --skeleton-shine: rgba(255,255,255,0.06);
  }
}
:root[data-theme="dark"] {
  --skeleton-base: #2a2a2a;
  --skeleton-shine: rgba(255,255,255,0.06);
}
:root[data-theme="light"] {
  --skeleton-base: var(--surface-1);
  --skeleton-shine: rgba(255,255,255,0.6);
}

.skeleton {
  position: relative;
  display: block;
  background: var(--skeleton-base);
  overflow: hidden;
}

/* transform-only animation (no layout/paint of geometry) to keep this cheap
   on low-power devices — see prefers-reduced-motion override below. */
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
  animation: skeleton-shimmer var(--skeleton-duration) ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}

.skeleton-rect { border-radius: var(--radius-sm); }
.skeleton-circle { border-radius: 50%; }
.skeleton-line { height: 10px; border-radius: var(--radius-xs); }

.skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.skeleton-lines {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}