/* Steppers: request status steps, wizard steps. */
.track-steps{display:grid;grid-template-columns:repeat(5,1fr)}
.track-steps span{padding:10px 12px 0;font-family:var(--mono);font-size:var(--fs-micro);color:var(--muted);border-top:3px solid var(--hair)}
.track-steps span.on{color:var(--ink);border-top-color:var(--ink)}
.steps-ol{margin:8px 0 0;padding-left:20px;display:grid;gap:4px}
.wsteps{display:flex;border:1px solid var(--hair-strong);background:var(--paper);overflow-x:auto}
.wsteps span{flex:1;padding:11px 14px;font-family:var(--mono);font-size:var(--fs-caption);border-right:1px solid var(--hair);white-space:nowrap;color:var(--muted)}
.wsteps span:last-child{border-right:0}
.wsteps span.on{color:var(--on-accent);background:var(--accent)}
.wsteps span.done{color:var(--ink)}
@media (max-width:600px){
  .track-steps span{font-size:9px;padding-inline:3px}
}
.stepper-wrap{padding:18px 14px 4px}
.stepper{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.stepper li{position:relative;display:grid;justify-items:center;gap:8px;min-width:0}
.stepper li::before{content:"";position:absolute;top:10px;right:50%;width:100%;height:2px;background:var(--hair-strong);z-index:0}
.stepper li:first-child::before{display:none}
.stepper li.done::before,.stepper li.cur::before{background:var(--ink)}
.stepper .sdot{position:relative;z-index:1;width:22px;height:22px;border-radius:var(--r-round);border:2px solid var(--hair-strong);background:var(--paper);display:grid;place-items:center;box-sizing:border-box}
.stepper li.done .sdot{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.stepper li.done .sdot svg{width:12px;height:12px}
.stepper li.cur .sdot{background:var(--accent);border-color:var(--ink);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--ink)}
.stepper .slbl{font-family:var(--mono);font-size:var(--fs-caption);line-height:1.2;white-space:nowrap;color:var(--muted);text-align:center}
.stepper li.done .slbl{color:var(--ink)}
.stepper li.cur .slbl{color:var(--ink);font-weight:600}
.stepper-m{display:none;margin:12px 0 0;font-size:var(--fs-caption);letter-spacing:.02em;color:var(--ink);text-align:center}
.stepper-closed{display:flex;align-items:center;gap:10px;margin:0;padding:14px 16px 4px;font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.02em;color:var(--muted)}
.stepper-closed .sdot{width:10px;height:10px;border-radius:var(--r-round);background:var(--hair-strong);flex:0 0 10px}
@media (max-width:600px){
  /* on a phone: circles and line only, then one line naming where it is */
  .stepper .slbl{display:none}
  .stepper li{gap:0}
  .stepper-m{display:block}
}
.wsteps-m{display:none}
@media (max-width:600px){
  /* one readable line plus a segment bar instead of the cut-off step bar (P-13) */
  .wsteps{display:none}
  .wsteps-m{display:grid;gap:8px;font-size:var(--fs-caption)}
  .wseg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
  .wseg i{height:4px;background:var(--hair)}
  .wseg i.on{background:var(--ink)}
}