/* =========================================================
   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. */

/* Issue #1000 — this was the original home of the [data-theme] selector
   pattern (#157), added ahead of anything actually setting the attribute.
   Folded into light-dark() now, same as the rest of the app; --surface-1
   isn't reused for the dark value because the skeleton wants to stay a
   touch lighter than the page surface for visibility. */
:root {
  --skeleton-base: light-dark(var(--surface-1), #2a2a2a);
  --skeleton-shine: light-dark(rgba(255,255,255,0.6), rgba(255,255,255,0.06));
  --skeleton-duration: 1.4s;
}

.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; }
}