/* Loading placeholders, shared.
 *
 * The home page and /builds each had their own copy, and they had already
 * drifted (12px radius against 14px, different body padding, different line
 * heights), so the same "loading" moment looked slightly different depending
 * which page you came from. /saved, /collections and the home trending rail had
 * no skeleton at all and showed a line of text or a spinner instead.
 *
 * The card deliberately mirrors a real build card: same radius, square
 * thumbnail, same body padding, and a footer row standing in for the tag and
 * date. It has to occupy the space the real card will, or the page jumps when
 * the builds arrive.
 *
 * Markup:
 *   <div class="skel-card">
 *     <div class="skel-card-img skel"></div>
 *     <div class="skel-card-body">
 *       <div class="skel-line title skel"></div>
 *       <div class="skel-line short skel"></div>
 *       <div class="skel-card-foot">
 *         <div class="skel-line tag skel"></div><div class="skel-line date skel"></div>
 *       </div>
 *     </div>
 *   </div>
 */

/* The shimmer itself. Put .skel on anything that should read as "not here yet". */
.skel { position: relative; overflow: hidden; background: var(--surface2); }
.skel::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: skelShimmer 1.25s infinite;
}
@keyframes skelShimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

.skel-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
}
.skel-card-img { width: 100%; aspect-ratio: 1 / 1; }
.skel-card-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }

.skel-line { height: 11px; border-radius: 6px; }
.skel-line.title { height: 15px; width: 78%; }
.skel-line.short { width: 45%; }

/* Stands in for the card footer: a tag on the left, the date on the right. */
.skel-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; }
.skel-line.tag { height: 16px; width: 38%; border-radius: 999px; }
.skel-line.date { height: 9px; width: 26%; }