/* ============================================================
 * Skeleton — content placeholders during load
 * Heilsugátt DS · net-new · CSS-only
 *
 * Shimmer sweeps a LIGHT band in BOTH themes (the export's sweep was
 * derived from --bg-primary, so in dark it was a near-invisible dark
 * sweep). Theme-aware via element-scoped --skeleton-shine (no :root token).
 * a11y: wrap the group in aria-hidden + a sibling .sr-only role="status".
 * Reduced-motion freezes the shimmer.
 * ============================================================ */

.skeleton {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  --skeleton-shine: rgba(255, 255, 255, 0.85);   /* light theme */
}
[data-theme="dark"] .skeleton { --skeleton-shine: rgba(152, 162, 179, 0.28); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .skeleton { --skeleton-shine: rgba(152, 162, 179, 0.28); }
}

.skeleton-text { height: 12px; margin: 7px 0; }
.skeleton-text.w-40 { width: 40%; }
.skeleton-text.w-60 { width: 60%; }
.skeleton-text.w-80 { width: 80%; }
.skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-block { height: 64px; border-radius: var(--radius-md); }

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
  animation: lsh-shimmer 1.4s ease-in-out infinite;
}
@keyframes lsh-shimmer { 100% { transform: translateX(100%); } }

.skeleton-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.skeleton-row .skeleton-lines { flex: 1; }

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