/* motion-stage-bar.css — the Signed → Submitted → Confirmed rail, as it appears on a trade card.
   Markup is built by MK.stageBar(host) in /motion-kit.js; this file is only its look and its transitions.
   Needs /motion-kit.css for --mk-* and @keyframes mk-pulse / mk-draw.
     <link rel="stylesheet" href="/motion-kit.css">
     <link rel="stylesheet" href="/brand/motion-stage-bar.css">
     const bar = MK.stageBar(host, { steps: ['Signed','Submitted','Confirmed'] });
     bar.set(1);               // Submitted is live, Signed is done
     bar.set(2,'done');        // all three green
     bar.set(2,'bad');         // the last step failed
   The grammar: a step behind the live one turns green and draws its check in (.4 s), its connector fills
   left→right on the spring (.45 s), and the live step pulses its accent ring every 2 s so a card that is
   waiting on a block never looks frozen. A failure paints the live step red and stops every pulse. */
.mk-bar{display:flex;align-items:center;font:500 12.5px var(--font,system-ui)}
.mk-bar .mk-st{display:flex;align-items:center;gap:8px;color:var(--dim,#5f5f63);white-space:nowrap;transition:color .3s var(--mk-ease-plain,ease)}
.mk-bar .mk-st .mk-no{position:relative;width:22px;height:22px;border-radius:999px;border:1.5px solid var(--line-2,#2b2b31);display:grid;place-items:center;font:600 11px var(--mono,monospace);flex:none;transition:border-color .3s ease,background-color .3s ease,color .3s ease}
.mk-bar .mk-st .mk-no svg{width:12px;height:12px}
.mk-bar .mk-st.on{color:var(--text,#f4f4f2)}
.mk-bar .mk-st.on .mk-no{border-color:var(--accent,#c6f135);color:var(--accent,#c6f135);background:var(--accent-bg,rgba(198,241,53,.14));animation:mk-pulse 2s ease-in-out infinite}
.mk-bar .mk-st.done{color:var(--sub,#9c9c9a)}
.mk-bar .mk-st.done .mk-no{border-color:var(--green,#34d17b);background:var(--green,#34d17b);color:var(--on-accent,#0b0f03);animation:none}
.mk-bar .mk-st.bad{color:var(--red-2,#ff8080)}
.mk-bar .mk-st.bad .mk-no{border-color:var(--red,#ff5c5c);background:var(--red,#ff5c5c);color:var(--on-accent,#0b0f03);animation:none}
.mk-bar .mk-seg{flex:1;height:1.5px;background:var(--line-2,#2b2b31);margin:0 10px;min-width:14px;position:relative;overflow:hidden}
.mk-bar .mk-seg::after{content:"";position:absolute;inset:0;background:var(--green-line,rgba(52,209,123,.4));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--mk-ease-spring,cubic-bezier(.2,.8,.2,1))}
.mk-bar .mk-seg.done::after{transform:scaleX(1)}
/* a narrow panel (the extension side panel at 360 px) keeps the numbers and drops the words, except the
   live one — the same trick onboarding.css plays below 560 px */
@media (max-width:420px){.mk-bar .mk-st .mk-tx{display:none}.mk-bar .mk-st.on .mk-tx{display:inline}}
@media (prefers-reduced-motion:reduce){
  .mk-bar .mk-st.on .mk-no{animation:none}
  .mk-bar .mk-seg::after{transition:none}
  .mk-bar .mk-st,.mk-bar .mk-st .mk-no{transition:none}
}