/* shared/kz2-skeleton.css — KZ2 F5.
   Skeleton loading placeholders, replacing bare "Loading…" text. Quiet by
   design (F5's own instruction): a slow opacity pulse, never a sliding
   shimmer band or anything that reads as "exciting." Works on pages using
   either token system (style.css or kz2-shell.css) via var() fallbacks. */

.kz2-skeleton {
  display: block;
  background: var(--kz2-border, var(--border, #d8d5cf));
  border-radius: var(--kz2-radius-sm, var(--radius-sm, 3px));
  animation: kz2-skeleton-pulse 1.4s ease-in-out infinite;
}

.kz2-skeleton-line { height: 0.9em; margin-bottom: 6px; }
.kz2-skeleton-line:last-child { margin-bottom: 0; width: 70%; }
.kz2-skeleton-circle { border-radius: 50%; }
.kz2-skeleton-block { border-radius: var(--kz2-radius-md, var(--radius-md, 8px)); }

.kz2-skeleton-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.kz2-skeleton-row .kz2-skeleton-circle { width: 40px; height: 40px; flex-shrink: 0; }
.kz2-skeleton-row-body { flex: 1; }

@keyframes kz2-skeleton-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

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