/* ══════════════════════════════════════════════════════
   Shared Skeleton-Loading primitives (Coffeete)
   Compose these to build a placeholder that matches the
   shape of the real content — never use spinners for
   content loading, only these shimmering blocks.
══════════════════════════════════════════════════════ */
.skel-wrap[hidden],
.skel-wrap.d-none { display: none !important; }

.skel,
.skel-text,
.skel-circle,
.skel-block,
.skel-btn,
.skel-thumb {
    position: relative;
    overflow: hidden;
    background: #eef1f5;
    border-radius: 8px;
}
.skel::after,
.skel-text::after,
.skel-circle::after,
.skel-block::after,
.skel-btn::after,
.skel-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
    animation: skelShimmer 1.4s ease-in-out infinite;
}
@keyframes skelShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .skel::after, .skel-text::after, .skel-circle::after,
    .skel-block::after, .skel-btn::after, .skel-thumb::after { animation: none; }
}

/* a line of text */
.skel-text { height: 12px; margin: 6px 0; }
.skel-text.w-25 { width: 25%; }
.skel-text.w-40 { width: 40%; }
.skel-text.w-50 { width: 50%; }
.skel-text.w-60 { width: 60%; }
.skel-text.w-75 { width: 75%; }
.skel-text.w-100 { width: 100%; }
.skel-text.lg { height: 18px; }
.skel-text.sm { height: 9px; }

/* an avatar / round icon */
.skel-circle { border-radius: 50%; flex-shrink: 0; }

/* a rectangular block (image, thumbnail, card body) */
.skel-block { width: 100%; }
.skel-thumb { width: 100%; aspect-ratio: 16/9; border-radius: 12px; }

/* a button-shaped placeholder */
.skel-btn { border-radius: 10px; }

/* ── Composite: a single list row (avatar + two lines) ── */
.skel-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 0;
}
.skel-row .skel-row-body { flex: 1; min-width: 0; }

/* ── Composite: a card (thumbnail + title + meta) ── */
.skel-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.05);
}
.skel-card .skel-thumb { margin-bottom: .9rem; }