/* Loading: quiet bars shaped like what is coming. No spinners in content.
   .skel        one text line (.short = 55%, .title = taller and 40%)
   .skel-block  an image or card placeholder; set height with style or a view class
   Put aria-busy="true" on the container while it loads; fill() in js/lib/dom.js removes it. */

.skel, .skel-block {
  border-radius: var(--r-1);
  background: linear-gradient(90deg, rgb(243 237 224 / 0.05) 0%, rgb(243 237 224 / 0.11) 50%, rgb(243 237 224 / 0.05) 100%);
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
}
.skel { height: 0.9rem; margin: 0.7rem 0; }
.skel.short { width: 55%; }
.skel.title { height: 1.6rem; width: 40%; margin-bottom: 1rem; }
.skel-block { height: 8rem; border-radius: var(--r-3); }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel, .skel-block { animation: none; } }