/* ─────────────────────────────────────────────────────────────────────────
   Shared skeleton loader — .jb-skeleton__* class family

   Used across:
   - Job hub detail page (templates/jobs/_job_skeleton.html)
   - Draft editor document pane (templates/draft/partials/document_inner.html)
   - Any future "loading content shimmer" use case

   Kept as its own stylesheet so each consumer includes one file rather
   than duplicating declarations. Replaces the inline copy previously
   living in jobs.css.
───────────────────────────────────────────────────────────────────────── */

@keyframes jb-shimmer {
    to {
        background-position: -200% 0;
    }
}

.jb-skeleton-loader {
    padding: 0;
}

.jb-skeleton__header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.jb-skeleton__avatar,
.jb-skeleton__line,
.jb-skeleton__pill {
    background: linear-gradient(
        90deg,
        var(--bg-elevated, #f3f4f6) 40%,
        rgba(0, 0, 0, 0.05) 50%,
        var(--bg-elevated, #f3f4f6) 60%
    );
    background-size: 300% 100%;
    animation: jb-shimmer 1.5s linear infinite;
}

.jb-skeleton__avatar {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    flex-shrink: 0;
}

.jb-skeleton__header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.jb-skeleton__line {
    height: 12px;
    border-radius: 4px;
}

.jb-skeleton__line--lg {
    height: 20px;
}

.jb-skeleton__line--sm {
    height: 14px;
}

.jb-skeleton__line--heading {
    height: 16px;
    margin-bottom: 16px;
}

.jb-skeleton__tags {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.jb-skeleton__pill {
    height: 28px;
    border-radius: 8px;
}

.jb-skeleton__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}