/* ══════════════════════════════════════════════════════════════
   PATTERN — Progress checklist
   Real-time multi-step progress indicator used inside the
   loading-overlay during phase-2 scoring.

   Markup (built by JS):
     <ul class="progress-checklist">
       <li class="done">    <span class="step-marker">✓</span> ... </li>
       <li class="active">  <span class="step-marker">·</span> ... </li>
       <li class="pending"> <span class="step-marker">○</span> ... </li>
     </ul>
   ══════════════════════════════════════════════════════════════ */

.progress-checklist {
    list-style: none;
    padding: 0;
    margin: var(--space-lg, 1.5rem) 0;
    text-align: left;
}

.progress-checklist li {
    padding: var(--space-xs, 0.25rem) 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
    color: var(--text-grey-pale, #767676);
    transition: color 0.2s ease;
}

.progress-checklist li.active {
    color: var(--fg, #000);
    font-weight: 500;
}

.progress-checklist li.done {
    color: var(--medium-grey, #666);
}

.progress-checklist .step-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.875em;
    flex-shrink: 0;
}

/* Symbol is set via CSS so the same HTML markup works for both extract
   phase (delay-based JS in dropzone.js) and score phase (poll-based JS
   in forhandsvisning.js). The JS for either phase only toggles the
   li's class — pending → active → done. */
.progress-checklist .step-marker::before { content: '○'; }
.progress-checklist li.active .step-marker::before { content: '·'; }
.progress-checklist li.done .step-marker::before { content: '✓'; }

.progress-checklist li.done .step-marker {
    background: var(--fg, #000);
    border-color: var(--fg, #000);
    color: var(--bg, #fff);
}

.progress-checklist li.active .step-marker {
    background: var(--bg, #fff);
    border-color: var(--fg, #000);
    color: var(--fg, #000);
}