/* ---------- Layout helpers for placeholders ---------- */
.graph-placeholder {
border: 1px solid var(--tblr-border-color);
background: repeating-linear-gradient(
    45deg,
    color-mix(in hsl, var(--tblr-bg-surface) 82%, var(--tblr-border-color)),
    color-mix(in hsl, var(--tblr-bg-surface) 82%, var(--tblr-border-color)) 8px,
    color-mix(in hsl, var(--tblr-bg-surface) 76%, var(--tblr-border-color)) 8px,
    color-mix(in hsl, var(--tblr-bg-surface) 76%, var(--tblr-border-color)) 16px
);
border-radius: .5rem;
display: grid;
place-items: center;
color: var(--tblr-muted);
}
.graph-lg   { height: 280px; }
.graph-sm   { height: 140px; }
.muted-note { font-size: .875rem; color: var(--tblr-secondary); }

.blog-skeleton {
height: 100px;
border-radius: .5rem;
background: linear-gradient(
    90deg,
    color-mix(in hsl, var(--tblr-bg-surface) 96%, var(--tblr-border-color)),
    color-mix(in hsl, var(--tblr-bg-surface) 92%, var(--tblr-border-color)) 40%,
    color-mix(in hsl, var(--tblr-bg-surface) 96%, var(--tblr-border-color)) 80%
);
}

/* Make “Download” buttons look disabled until wired */
.is-dormant { pointer-events: none; opacity: .6; }

/* Subtle divider spacing mimic from the wireframe */
.section-gap { margin-top: .5rem; margin-bottom: 1rem; }


        /* --------- Placeholder visuals --------- */
    .img-skeleton {
    height: 160px;
    border-radius: .5rem;
    border: 1px solid var(--tblr-border-color);
    background: linear-gradient(
        90deg,
        color-mix(in hsl, var(--tblr-bg-surface) 96%, var(--tblr-border-color)),
        color-mix(in hsl, var(--tblr-bg-surface) 92%, var(--tblr-border-color)) 40%,
        color-mix(in hsl, var(--tblr-bg-surface) 96%, var(--tblr-border-color)) 80%
    );
    }
    .line-skeleton {
    height: .7rem;
    border-radius: .3rem;
    background: color-mix(in hsl, var(--tblr-bg-surface) 90%, var(--tblr-border-color));
    margin-bottom: .45rem;
    }
    .line-skeleton.thin { height: .5rem; }
    .line-skeleton.w-85 { width: 85%; }
    .line-skeleton.w-70 { width: 70%; }
    .line-skeleton.w-55 { width: 55%; }

    .muted-note { color: var(--tblr-secondary); font-size: .875rem; }
    .is-dormant { pointer-events: none; opacity: .65; }

    /* Pagination dots like the wireframe */
    .dots .btn { width: 10px; height: 10px; padding: 0; border-radius: 50%; }
    .dots .btn.active { background-color: var(--tblr-primary); }

    /* Bottom gray bars (skeleton footer) */
    .footer-skeleton .bar {
    height: 12px;
    border-radius: 8px;
    background: color-mix(in hsl, var(--tblr-bg-surface) 88%, var(--tblr-border-color));
    }