/* ═══════════════════════════════════════════════════════════════════════
   link.tattoo — the claim bar's status glyph

   Three paths stacked in one 28×14 box. The cosine runs while the lookup
   is out; when the answer lands it collapses vertically to a flat line and
   the tick or cross draws itself out of that line. One shape resolving
   into another, rather than two icons swapping places.
   ═══════════════════════════════════════════════════════════════════════ */

.hs{display:flex;align-items:center;justify-content:center;
  min-width:38px;padding:0 12px 0 4px;flex:none}
.hs svg{width:28px;height:14px;display:block;overflow:visible}
.hs path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* the cosine: a dash chasing itself along the curve */
.hs .w{stroke:var(--dim);stroke-dasharray:24 40;opacity:0;
  transform-origin:50% 50%;
  transition:opacity .16s ease,transform .3s cubic-bezier(.65,.05,0,1)}
.hs.is-wave .w{opacity:1;animation:hs-run .7s linear infinite}
@keyframes hs-run{to{stroke-dashoffset:-64}}

/* the verdicts, drawn rather than shown: pathLength="1" in the markup
   means one dashoffset unit covers any shape, cross included */
.hs .g{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;
  transition:stroke-dashoffset .32s cubic-bezier(.65,.05,0,1) .09s,
             opacity .1s ease .09s}

/* the collapse — the wave flattens as the glyph draws out of it */
.hs.is-ok .w,.hs.is-no .w{opacity:0;transform:scaleY(.04)}
.hs.is-ok .tick,.hs.is-no .cross{opacity:1;stroke-dashoffset:0}
.hs.is-ok .tick{stroke:var(--live)}
.hs.is-no .cross{stroke:var(--accent)}

@media(prefers-reduced-motion:reduce){
  .hs .w{animation:none;stroke-dasharray:none;transition:none}
  .hs .g{transition:none}
  .hs.is-ok .w,.hs.is-no .w{transform:none}
}

/* the bar is align-items:stretch, so the glyph needs its own centring */
.claim-bar .hs{align-self:stretch}