/* Echips — статус ремонта. Дополняет forma.css (общие переменные, .page/.intro/.card и т. д.). */

#s-result{padding:0 32px 28px;display:flex;flex-direction:column;gap:14px}

.s-empty{padding:22px;border:1px dashed var(--line-strong);border-radius:14px;color:var(--ink-3);font-size:14px;line-height:1.55;text-align:center}

.s-card{border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:16px;background:var(--panel-2)}
.s-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.s-code{font:700 20px var(--mono);color:var(--ink)}

.s-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;background:var(--st-bg,var(--amber-soft));color:var(--st-c,var(--amber-deep));font:600 12px var(--grotesk)}
.s-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--st-c,var(--amber-deep))}
.s-badge[data-status="new"]{--st-c:#2F6FAD;--st-bg:#E7F0FA}
.s-badge[data-status="in_progress"]{--st-c:#8A6100;--st-bg:#FBF0D9}
.s-badge[data-status="waiting_parts"]{--st-c:#6B6155;--st-bg:#EFEAE0}
.s-badge[data-status="waiting_client"]{--st-c:#A6540F;--st-bg:#FBE7D6}
.s-badge[data-status="done"]{--st-c:#2F7A4F;--st-bg:#E4F3EA}

.s-kv{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13.5px}
.s-kv dt{color:var(--ink-3)}
.s-kv dd{margin:0;color:var(--ink-2)}
.s-kv dd.mono{font:400 13px var(--mono)}

.s-steps{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:14px}
.s-step{display:grid;grid-template-columns:12px 1fr;column-gap:12px;padding-bottom:14px;position:relative}
.s-step:last-child{padding-bottom:0}
.s-step::before{content:"";position:absolute;left:5px;top:16px;bottom:-2px;width:1px;background:var(--line-strong)}
.s-step:last-child::before{display:none}
.s-step .dot{width:12px;height:12px;border-radius:50%;background:var(--panel);border:2px solid var(--line-strong);margin-top:2px}
.s-step.past .dot{background:var(--amber-deep);border-color:var(--amber-deep)}
.s-step.on .dot{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.s-step .label{font:500 14px var(--font);color:var(--ink-3)}
.s-step.past .label{color:var(--ink-2)}
.s-step.on .label{font-weight:700;color:var(--ink)}

@media (max-width:960px){
  #s-result{padding:0 20px 24px}
}