/* Process steps - numbered badges joined by a rail. Stacked by default;
   .ps-row (5 steps or fewer) becomes one row from 560px up. No motion. */
.ps-heading { margin: 0 0 12px; font-size: 1.05em; font-weight: 750; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ps-progress {
    margin: 0 0 14px; padding: 8px 12px; border-radius: var(--e-radius-sm); background: var(--e-hero);
    font-size: .88em; font-weight: 650; color: var(--e-ink); overflow-wrap: anywhere;
}
.ps-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ps-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 0 0 18px; }
.ps-step:last-child { padding-bottom: 0; }
.ps-step::before {
    content: ""; position: absolute; left: 21px; top: 50px; bottom: 6px; width: 2px; border-radius: 2px;
    background: color-mix(in srgb, var(--e-accent) 30%, var(--e-line));
}
.ps-step:last-child::before { display: none; }
.ps-badge {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--e-hero); color: var(--e-accent-fg);
    border: 1px solid color-mix(in srgb, var(--e-accent) 30%, var(--e-line));
    font-weight: 750; font-size: 1.05em; font-variant-numeric: tabular-nums;
}
.ps-badge svg { width: 22px; height: 22px; }
.ps-body { min-width: 0; padding-top: 2px; }
.ps-num { min-height: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .74em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--e-ink-3); }
.ps-state { text-transform: none; letter-spacing: 0; font-size: 1.05em; }
.ps-here { background: var(--e-accent); color: var(--e-accent-ink); }
html:not(.e-custom-accent) .ps-here { background: linear-gradient(135deg, var(--e-accent), var(--e-accent-2)); }
.ps-title { margin: 3px 0 0; font-size: 1em; line-height: 1.3; font-weight: 700; color: var(--e-ink); overflow-wrap: anywhere; }
.ps-desc { margin: 4px 0 0; font-size: .9em; color: var(--e-ink-2); overflow-wrap: anywhere; }

/* tracker states - each also carries visible text ("Done", "Current step") */
.ps-done .ps-badge { background: var(--e-accent); color: var(--e-accent-ink); border-color: transparent; }
.ps-current .ps-badge {
    background: var(--e-bg); color: var(--e-accent-fg); border: 3px solid var(--e-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--e-accent) 18%, transparent);
}
.ps-todo .ps-badge { background: var(--e-surface); color: var(--e-ink-3); border-color: var(--e-line-strong); }
.ps-todo .ps-title { color: var(--e-ink-2); }
.ps-done::before { background: var(--e-accent); }
.ps-current::before, .ps-todo::before { background: repeating-linear-gradient(to bottom, var(--e-line-strong) 0 4px, transparent 4px 8px); }

@media (min-width: 560px) {
    .ps-row .ps-list { grid-template-columns: repeat(var(--ps-n, 4), minmax(0, 1fr)); gap: 16px; }
    .ps-row .ps-step { grid-template-columns: 1fr; gap: 10px; padding: 0; }
    .ps-row .ps-step::before { left: 54px; right: -10px; top: 21px; bottom: auto; width: auto; height: 2px; }
    .ps-row .ps-current::before, .ps-row .ps-todo::before { background: repeating-linear-gradient(to right, var(--e-line-strong) 0 4px, transparent 4px 8px); }
}
html[data-compact="1"] .ps-step { padding-bottom: 12px; }