/* public/layout/loading.css - the ONE shimmer. No per-page shimmer allowed.
 * Wired via @import at the top of app-layout.css (all app pages) and a direct
 * <link> on chart-preview.html (which does not use app-layout.css). */

@keyframes qh-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.qh-skeleton {
  background: linear-gradient(
    110deg,
    color-mix(in srgb, var(--qh-surface-soft, #171514) 90%, transparent) 10%,
    color-mix(in srgb, var(--qh-surface-muted, #1d1a18) 92%, transparent) 30%,
    color-mix(in srgb, var(--qh-surface-soft, #171514) 90%, transparent) 50%
  );
  background-size: 200% 100%;
  animation: qh-shimmer var(--qh-duration-shimmer) ease-in-out infinite;
  border-radius: var(--qh-radius-sm);
  min-height: 20px;
}

.qh-skeleton--text   { height: 1em; border-radius: var(--qh-radius-sm); }
.qh-skeleton--block  { border-radius: var(--qh-radius-md); }
.qh-skeleton--card   { border-radius: var(--qh-radius-lg); }
.qh-skeleton--circle { border-radius: 50%; }

.qh-skeleton + .qh-skeleton { margin-top: var(--qh-space-3); }
.qh-skeleton-group > * + * { margin-top: var(--qh-space-3); }

/* Loaded -> neutralize any stray skeleton. */
.is-loaded .qh-skeleton { animation: none; background: none; }

/* Defensive hidden guard (covers display->hidden swaps on migrated pages). */
[class*="-state"][hidden] { display: none; }

/* Reduced motion: static tinted block, no sweep (net-new a11y win). */
@media (prefers-reduced-motion: reduce) {
  .qh-skeleton {
    animation: none;
    background: color-mix(in srgb, var(--qh-surface-muted, #1d1a18) 92%, transparent);
  }
}