{# Primer badge defs (v04alpha2) — shields-anatomy two-plate badge: a tinted
   label plate (brand glyph + mono label) and a clear value plate split by a
   paired 1px groove + 1px shine seam, inside a 20px rx4 chip with an inner
   white highlight, a 1px border, and a hair drop-shadow.

   Substrate differences (label tint, seam pair, highlight, shadow) live in the
   content partials dispatched by substrate_kind. The bg gradient stamps the
   resolved-variant surface literals so the chip renders true in static
   renderers (no var() cascade in paint attributes). #}
<clipPath id="{{ uid }}-clip">
  <rect width="{{ width }}" height="{{ height }}" rx="{{ badge_corner_rx }}"/>
</clipPath>
<linearGradient id="{{ uid }}-bg" x1="0" y1="0" x2="0" y2="1">
  <stop offset="0" stop-color="{{ _genome_raw.surface_1 }}"/>
  <stop offset="1" stop-color="{{ _genome_raw.surface_0 }}"/>
</linearGradient>
<style>{{ font_faces | safe }}
/* Primer badges are FLAT — suppress the global expression.css state glow
   (warning/critical drop-shadow, offline grayscale/dim). The state lives entirely
   in the animated mark + value word; the specimen carries no halo. Element + two
   attribute selectors outrank the global svg[data-hw-status] rule, so this wins
   regardless of style-block order. */
svg[data-hw-genome="primer"][data-hw-status="warning"],
svg[data-hw-genome="primer"][data-hw-status="critical"],
svg[data-hw-genome="primer"][data-hw-status="failing"],
svg[data-hw-genome="primer"][data-hw-status="offline"]{filter:none;opacity:1}
/* State marks — each state's signature motion, all compositor (transform /
   opacity), reduced-motion gated. Static renderers freeze at the resting frame.
   Specimen-derived timings: ping 2.2s, spin .9s, throb 1.0s, shake .65s. */
.hw-pri-ping{transform-box:fill-box;transform-origin:center;animation:hw-pri-ping 2.2s ease-out infinite;will-change:transform,opacity}
.hw-pri-ping2{transform-box:fill-box;transform-origin:center;animation:hw-pri-ping 2.2s ease-out -1.1s infinite;will-change:transform,opacity}
.hw-pri-spin{transform-box:fill-box;transform-origin:center;animation:hw-pri-spin .9s linear infinite;will-change:transform}
.hw-pri-throb{transform-box:fill-box;transform-origin:center;animation:hw-pri-throb 1.0s ease-in-out infinite;will-change:transform}
.hw-pri-shake{animation:hw-pri-shake .65s ease-in-out infinite;will-change:transform}
@keyframes hw-pri-ping{0%{transform:scale(.5);opacity:0}12%{opacity:.7}100%{transform:scale(2.3);opacity:0}}
@keyframes hw-pri-spin{to{transform:rotate(360deg)}}
@keyframes hw-pri-throb{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
@keyframes hw-pri-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.5px)}75%{transform:translateX(1.5px)}}
@media (prefers-reduced-motion:reduce){.hw-pri-ping,.hw-pri-ping2,.hw-pri-spin,.hw-pri-throb,.hw-pri-shake{animation:none}}
</style>
