.status-art{position:relative;display:inline-block;isolation:isolate;font-weight:800;line-height:1.45;vertical-align:baseline;background:#f8f5ed;padding:.08em .38em;border-radius:.32em;box-shadow:0 0 0 1px #203d322e}
.status-ink{position:relative;z-index:1}
.status-art--fire .status-ink{color:#862915;background:linear-gradient(0deg,#702414 5%,#a93b12 35%,#d98724 59%,#862915 85%,#bf6420);background-size:100% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.3px #702414;text-shadow:none;animation:letter-fire 2.8s ease-in-out infinite}
.status-vapour{position:absolute;inset:0;pointer-events:none;z-index:0}
.status-vapour i{position:absolute;bottom:55%;left:16%;width:24%;height:100%;border-radius:50%;background:radial-gradient(ellipse,#7e78695c,transparent 70%);filter:blur(3px);opacity:0;animation:letter-smoke 3.9s ease-out infinite}
.status-vapour i:nth-child(2){left:43%;animation-delay:1.3s}.status-vapour i:nth-child(3){left:68%;animation-delay:2.6s}
.status-art--tyre .status-ink{color:#111;background:repeating-linear-gradient(128deg,#101010 0 3px,#555 3px 3.7px,#171717 3.7px 6px,#f8f5ed 6px 7px,#161616 7px 10px);background-size:24px 24px;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.25px #101010;filter:drop-shadow(0 1px 0 #fff8eac0);animation:letter-tread 6s linear infinite}
.status-art--done{color:#173b2b}
.status-art--done .status-ink{background:linear-gradient(105deg,#173b2b 10%,#28744b 25%,#173b2b 40%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.2px #173b2b;animation:delivery-shine 5s ease-in-out infinite}
.status-check{display:inline-grid;place-items:center;width:1.25em;height:1.25em;margin-right:.3em;border:1px solid #173b2b;border-radius:50%;background:#f8f5ed;vertical-align:-.15em;animation:delivery-settle .65s ease-out both}
.status-check svg{width:.95em;height:.95em;fill:none;stroke:#173b2b;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.status-check path{stroke-dasharray:22;stroke-dashoffset:0;animation:delivery-check .65s ease-out both}
.status-brake{position:absolute;left:0;right:0;bottom:-3px;height:4px;background:repeating-linear-gradient(90deg,#111 0 9px,#1113 9px 12px,#fff 12px 13px);clip-path:polygon(0 0,100% 22%,96% 100%,4% 70%);transform-origin:left;animation:letter-brake 4.5s ease-out infinite;pointer-events:none}
.status-badge:has(.status-art){background:none!important;overflow:visible;padding:8px 0}
.status-choice[aria-pressed=true]:has(.status-art){background:#f4f2ec;color:#203d32}
.order-filters button[aria-pressed=true]:has(.status-art){background:#f4f2ec;color:#203d32;border-color:#203d32}
@keyframes letter-fire{0%,100%{background-position:0 12%;filter:drop-shadow(0 -1px 2px #ffad2f25)}50%{background-position:0 78%;filter:drop-shadow(0 -2px 3px #f2703a4d)}}
@keyframes letter-smoke{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.65}100%{opacity:0;transform:translate(-6px,-1.3em) scale(1.9)}}
@keyframes letter-tread{to{background-position:48px 0}}
@keyframes letter-brake{0%,8%{transform:scaleX(.05);opacity:0}24%{transform:scaleX(1);opacity:.7}67%,100%{transform:scaleX(1);opacity:0}}
@keyframes delivery-shine{0%,25%{background-position:100% 0}65%,100%{background-position:0 0}}
@keyframes delivery-check{0%{stroke-dashoffset:22}18%,100%{stroke-dashoffset:0}}
@keyframes delivery-settle{0%{transform:scale(.85)}15%{transform:scale(1.08)}24%,100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.status-art *{animation:none!important}.status-vapour{display:none}.status-brake{opacity:.5}}

/* Each achieved/current step retains its own status colour. */
.steps li[data-step="new"]{--step-colour:#a33d24}.steps li[data-step="dispatched"]{--step-colour:#202020}.steps li[data-step="completed"]{--step-colour:#203d32}.steps li.current,.steps li.done{border-color:var(--step-colour);color:var(--step-colour)}.status-art--fire{box-shadow:0 0 0 1px #a33d243d}.status-art--tyre{box-shadow:0 0 0 1px #2020203d}.status-art--done{box-shadow:0 0 0 1px #203d323d}
