/* Skeleton loading, the same file in asondy (web/app/css/skeleton.css).
   Shapes take the loaded content's classes; tokens are the only numbers */
:root {
    /* From the text colour, so both products and both themes agree */
    --skeleton-fill: color-mix(in srgb, var(--text) 8%, transparent);
    --skeleton-sheen: color-mix(in srgb, var(--text) 3%, transparent);
    /* Wait before painting: a faster answer shows no placeholder at all */
    --skeleton-delay: 150ms;
    /* One sweep, run a few times: it stops inside five seconds */
    --skeleton-duration: 1.2s;
    --skeleton-sweeps: 4;
    /* Most a loaded region may move from its skeleton box (browser tests) */
    --skeleton-tolerance: 1px;
    --skeleton-circle: 0.5rem;
    --skeleton-circle-lg: 2rem;
    --skeleton-gap: 0.25rem;
}

.skeleton {
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    text-decoration: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    /* Beats a badge's own tone; the position stays free for the sweep */
    background-color: transparent !important;
    background-image: linear-gradient(90deg, var(--skeleton-fill) 0 40%, var(--skeleton-sheen) 50%, var(--skeleton-fill) 60% 100%) !important;
    background-size: 300% 100% !important;
    background-repeat: no-repeat !important;
    background-position: 100% 0;
    animation: skeleton-sweep var(--skeleton-duration) ease-in-out var(--skeleton-sweeps);
    user-select: none;
    pointer-events: none;
    /* A wrapped line gets a bar per line, not one box round both */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.skeleton * { visibility: hidden; }
/* A ghost's own motion (a pulsing live dot) gives way to the sweep */
.skeleton.skeleton-ghost { animation: skeleton-sweep var(--skeleton-duration) ease-in-out var(--skeleton-sweeps); }
/* A ghost chip keeps its own corners; every other shape takes the skeleton's */
.skeleton:not(.skeleton-ghost) { border-radius: var(--label-radius); }

@keyframes skeleton-sweep {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton, .skeleton.skeleton-ghost { animation: none; }
}

/* High contrast: a system colour keeps the shapes visible */
@media (forced-colors: active) {
    .skeleton { forced-color-adjust: none; background: GrayText; }
}

/* Text keeps its line box, so skeleton lines are as tall as text */
.skeleton-text { display: inline; }
.skeleton-kpi { display: inline; }

.skeleton-block { display: block; width: 100%; height: 100%; }

.skeleton.skeleton-circle {
    display: inline-block;
    width: var(--skeleton-circle);
    height: var(--skeleton-circle);
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
}
.skeleton-circle.skeleton-circle-lg { width: var(--skeleton-circle-lg); height: var(--skeleton-circle-lg); }

.skeleton-chip { display: inline-block; padding: 0 var(--skeleton-gap); }

/* Bars rise from the base line at five heights, as a chart would */
.skeleton-chart {
    /* In a chart's own grid the bars take the whole frame */
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    gap: var(--skeleton-gap);
    width: 100%;
    height: 100%;
}
.skeleton-chart .skeleton.skeleton-bar { flex: 1 1 0; display: block; }
.skeleton-bar-1 { height: 40%; }
.skeleton-bar-2 { height: 70%; }
.skeleton-bar-3 { height: 55%; }
.skeleton-bar-4 { height: 85%; }
.skeleton-bar-5 { height: 30%; }

/* The fill adds no box: the region's own layout places the rows */
.skeleton-fill { display: contents; }

/* Inside the delay the region holds its shapes' box and paints nothing: no
   placeholder, default word or empty state flashes before the data */
.skeleton-pending { visibility: hidden; }

[aria-busy="true"] { cursor: progress; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* A disclosure row as a shape: a real summary would take focus */
.skeleton-disclosure { display: flex; align-items: center; min-height: var(--control-tap-h); }