/* ================================================================
   Circle Ledger — components/skeleton.css
   Shimmer skeleton loading placeholders.
================================================================ */

/* ── Shimmer keyframe ── */
@keyframes sk-shimmer {
    0%   { background-position: -40rem 0; }
    100% { background-position: 40rem 0; }
}

@keyframes sk-pulse {
    0%, 100% { opacity: .55; }
    50%       { opacity: 1; }
}

/* ── Shared skeleton base ── */
.sk {
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        var(--slate-100) 25%,
        var(--slate-200) 37%,
        var(--slate-100) 63%
    );
    background-size: 80rem 100%;
    animation: sk-shimmer 1.4s ease infinite;
}

/* ── Block sizes ── */
.sk_xs  { height: 0.625rem; }
.sk_sm  { height: 0.875rem; }
.sk_md  { height: 1rem; }
.sk_lg  { height: 1.25rem; }
.sk_xl  { height: 1.75rem; }

/* ── Width helpers ── */
.sk_w_full { width: 100%; }
.sk_w_3_4  { width: 75%; }
.sk_w_2_3  { width: 66.67%; }
.sk_w_1_2  { width: 50%; }
.sk_w_1_3  { width: 33.33%; }
.sk_w_1_4  { width: 25%; }

/* ── Margin ── */
.sk + .sk       { margin-top: var(--space-2); }
.sk_mb_2        { margin-bottom: var(--space-2); }
.sk_mb_3        { margin-bottom: var(--space-3); }

/* ── Radius overrides ── */
.sk_rounded      { border-radius: var(--radius-md); }
.sk_pill         { border-radius: var(--radius-pill); }
.sk_circle       { border-radius: 50%; }

/* ── Avatar skeletons ── */
.sk_avatar_sm { width: var(--avatar-sm); height: var(--avatar-sm); border-radius: 50%; flex-shrink: 0; }
.sk_avatar_md { width: var(--avatar-md); height: var(--avatar-md); border-radius: 50%; flex-shrink: 0; }
.sk_avatar_lg { width: var(--avatar-lg); height: var(--avatar-lg); border-radius: 50%; flex-shrink: 0; }

/* ── Composite skeleton cards ── */
.skeleton_block_lg {
    height: 6rem;
    border-radius: var(--radius-lg);
    background: var(--slate-100);
    margin-bottom: var(--space-3);
    animation: sk-pulse 1.4s ease infinite;
}
.skeleton_block {
    height: 3rem;
    border-radius: var(--radius-md);
    background: var(--slate-100);
    margin-bottom: var(--space-2);
    animation: sk-pulse 1.4s ease infinite;
}

/* ── Group card skeleton ── */
.sk_group_card {
    background: var(--surface);
    border: var(--border-thin) solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--gc-pad);
    margin-bottom: var(--gc-mb);
    display: flex;
    gap: var(--gc-gap);
    align-items: flex-start;
}
.sk_group_card_icon {
    width: var(--gc-icon-size);
    height: var(--gc-icon-size);
    border-radius: var(--gc-icon-radius);
    flex-shrink: 0;
}
.sk_group_card_body { flex: 1; min-width: 0; }

/* ── Payment row skeleton ── */
.sk_payment_row {
    display: flex;
    align-items: center;
    gap: var(--row-gap);
    padding: var(--row-py) 0;
    border-bottom: var(--border-thin) solid var(--slate-100);
}
.sk_payment_row:last-child { border-bottom: none; }

/* ── Stats skeleton ── */
.sk_stats_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--stat-mb);
}
.sk_stat_card {
    background: var(--surface);
    border: var(--border-thin) solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--stat-pad);
    animation: sk-pulse 1.4s ease infinite;
    height: 5rem;
}

/* .page_loader, .empty_state, .empty_state_icon, .empty_state_title,
   .empty_state_text, .empty_state_action are defined in shared.css */