/* Component: progress */

.sm-progress {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: grid;
    place-items: center;
    background: rgb(15 23 42 / 40%);
    backdrop-filter: blur(2px);
}

/* Popover (top layer) resets so the overlay still covers the viewport above modal dialogs */
.sm-progress[popover] {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    color: inherit;
    background: rgb(15 23 42 / 40%);
}

.sm-progress[popover]::backdrop { background: transparent; }

.sm-progress[hidden] { display: none !important; }

.sm-progress__card {
    width: min(420px, 92vw);
    padding: 22px;
    background: #fff;
    border-radius: var(--sm-radius);
    box-shadow: var(--sm-shadow-lg);
}

.sm-progress__label { margin: 0; font-size: 15px; font-weight: 600; color: var(--sm-ink); }

.sm-progress__meta {
    margin: 0;
    min-height: 1.4em;
    font-size: 13px;
    color: var(--sm-muted);
    font-variant-numeric: tabular-nums;
    white-space: pre-line;
    line-height: 1.45;
}

.sm-progress__actions { margin: 12px 0 0; text-align: end; }

.sm-progress-inline { display: grid; gap: 6px; }

.sm-progress-inline__label { margin: 0; font-size: 13px; color: var(--sm-muted); }

.sm-progress__track {
    height: 10px;
    border-radius: 999px;
    background: var(--sm-soft);
    overflow: hidden;
    margin: 12px 0 8px;
}

.sm-progress__bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--sm-accent), var(--sm-accent-dark));
    transition: width 0.2s var(--sm-ease, ease);
}

.sm-progress__bar.is-indeterminate {
    width: 40%;
    animation: sm-progress-slide 1.1s ease-in-out infinite;
}

@keyframes sm-progress-slide {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(260%); }
}

@media (prefers-reduced-motion: reduce) {
    .sm-progress__bar.is-indeterminate { animation: none; width: 100%; opacity: .6; }
}