/* <analysis-progress> : étapes de l'analyse en temps réel. */

analysis-progress { display: grid; gap: 18px; }
.progress-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.progress-head h2 { font-size: 18px; letter-spacing: -0.01em; }
.progress-head p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.elapsed { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--muted); white-space: nowrap; padding-top: 3px; }
.groups { display: grid; gap: 18px; }
.groups.cols { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .groups.cols { grid-template-columns: 1fr; } }
.group h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.steps { list-style: none; margin: 0; padding: 0; }
.step-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 7px 0; position: relative; }
.step-item:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 33px; bottom: -5px; width: 2px; border-radius: 1px; background: var(--border); }
.step-item.done:not(:last-child)::after { background: color-mix(in srgb, var(--ok) 50%, var(--border)); }
.dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; color: #fff; }
.dot .i { width: 13px; height: 13px; stroke-width: 3; }
.dot .spinner { width: 14px; height: 14px; border-width: 2px; }
.step-item.running .dot { border-color: transparent; }
.step-item.done .dot { background: var(--ok); border-color: var(--ok); }
.step-item.error .dot { background: var(--bad); border-color: var(--bad); }
.step-item.skipped .dot { border-style: dashed; }
.step-text { min-width: 0; padding-top: 1px; }
.step-label { font-size: 14px; font-weight: 500; }
.step-item.pending .step-label, .step-item.skipped .step-label { color: var(--faint); font-weight: 400; }
.step-detail { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.step-item.error .step-detail { color: var(--bad); }
.step-time { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; padding-top: 2px; }
.step-item.running .step-time { color: var(--focus); }