/* ============================================================================
   SKELETON LOADERS — shown only after a short delay (see js/skeleton.js),
   never on fast loads. Pure CSS shimmer, no images/JS animation needed.
   ============================================================================ */

@keyframes skel-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skel {
  background: linear-gradient(90deg, var(--line) 25%, var(--paper) 37%, var(--line) 63%);
  background-size: 800px 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  display: block;
}

.skel-line { height: 12px; margin-bottom: 8px; border-radius: 4px; }
.skel-line.w-60 { width: 60%; }
.skel-line.w-80 { width: 80%; }
.skel-line.w-40 { width: 40%; }
.skel-pill { height: 32px; width: 120px; border-radius: 20px; }
.skel-circle { border-radius: 50%; }

/* ---------------- Book/course card skeleton (catalog grid) ---------------- */
.skel-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 14px);
  overflow: hidden;
}
.skel-card .skel-cover { width: 100%; aspect-ratio: 3/4; border-radius: 0; }
.skel-card .skel-body { padding: 16px; }
.skel-card .skel-btn { height: 40px; border-radius: 8px; margin-top: 12px; }

/* ---------------- Founder card skeleton ---------------- */
.skel-founder { display: flex; gap: 16px; align-items: flex-start; }
.skel-founder .skel-avatar { width: 64px; height: 64px; flex-shrink: 0; }

/* ---------------- Row skeleton (orders, reviews, admin table rows) ---------------- */
.skel-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px;
}
.skel-row .skel-avatar { width: 40px; height: 40px; flex-shrink: 0; }
.skel-row .skel-row-body { flex: 1; min-width: 0; }