/* Skeleton shapes (editor/skeleton.js): lines and blocks where text and photos are about to come. The colour follows
   --skeleton-ink, so a skeleton inside the customer's palette takes its text colour; a calm shimmer runs over it,
   and stops under prefers-reduced-motion. */
.skeleton { --skeleton-ink: var(--charcoal, #4e4e4e); display: grid; gap: 8px; }
.skeleton-line, .skeleton-heading, .skeleton-button, .skeleton-photo, .skeleton-card {
  display: block; border-radius: 6px;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.55) 50%, transparent 70%) 0 0 / 200% 100%,
    color-mix(in srgb, var(--skeleton-ink) 14%, transparent);
  animation: skeleton-shimmer 1.8s linear infinite;
}
.skeleton-line { height: 0.7em; width: var(--skeleton-width, 90%); }
.skeleton-heading { height: 1.1em; width: 55%; }
.skeleton-button { height: 1.9em; width: 9em; border-radius: 999px; }
.skeleton-photo { min-height: 72px; }
.skeleton-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.skeleton-card { padding: 10px; background-color: color-mix(in srgb, var(--skeleton-ink) 7%, transparent); }
.skeleton-card .skeleton-line { background-color: color-mix(in srgb, var(--skeleton-ink) 18%, transparent); }
.skeleton-block { padding: 10px; border-radius: 8px; border: 1px dashed color-mix(in srgb, var(--skeleton-ink) 22%, transparent); }
.skeleton-hero { border-style: solid; }
@keyframes skeleton-shimmer { to { background-position: -200% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton-line, .skeleton-heading, .skeleton-button, .skeleton-photo, .skeleton-card { animation: none; }
}