.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; counter-reset: s; }
@media (max-width: 520px) { .steps li { flex: 1 1 calc(50% - 8px); } .steps .chipbtn { width: 100%; padding: 0 10px; font-size: 14px; } }
.steps .chipbtn { display: inline-flex; align-items: center; gap: 8px; }
.steps .n { width: 24px; height: 24px; border-radius: 12px; background: var(--tint); color: var(--brand-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.steps .on { border-color: var(--brand); background: var(--tint); }
.who { font-size: 11px; font-weight: 700; color: #fff; width: 20px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.who.model { background: var(--accent); }
.who.code { background: var(--brand); }
.stop { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 9px; border-radius: 8px; }
.stop.clarify { background: var(--tint); color: var(--brand-ink); }
.stop.refuse { background: var(--warn-bg); color: var(--warn); }
.stop.handoff { background: var(--ok-bg); color: var(--ok); }
.stops { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.detail h4 { margin: 4px 0 0; font: 700 15px var(--sans); }
.js .sample { display: none; }
.js .sample.on { display: block; }
.radio { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); font-weight: 600; cursor: pointer; }
.radio input { width: 18px; height: 18px; }