{# Primer strip defs (v04alpha2) — card material (bg gradient + two-layer drop
   shadow + inner edge-highlight gradient) + the shared-pipeline type classes
   (identity / metric-label / metric-value). Sizes/weights/tracking MUST match
   data/paradigms/primer.yaml strip config so measured width == rendered width.
   Does NOT define {{ uid }}-clip (the parent strip.svg.j2 defs do). Substrate
   split is by panel_gradient_stops presence, never a substrate_kind conditional.
   Paint attributes stamp resolved-variant literals (no var() cascade) so the
   card renders true in static renderers. #}
<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>
{# Inner edge-highlight — a white crown fading by 45%, ending in a faint ink
   tint at the bottom edge on light substrates (the card's "lit top". On dark
   the lift comes mostly from the surface_1 crown; the highlight stays faint). #}
<linearGradient id="{{ uid }}-lp" x1="0" y1="0" x2="0" y2="1">
{% if panel_gradient_stops %}  <stop offset="0" stop-color="white" stop-opacity="0.85"/>
  <stop offset="45%" stop-color="white" stop-opacity="0"/>
  <stop offset="100%" stop-color="rgba({{ ink_rgb }},0.05)"/>
{% else %}  <stop offset="0" stop-color="white" stop-opacity="0.08"/>
  <stop offset="45%" stop-color="white" stop-opacity="0"/>
  <stop offset="100%" stop-color="rgba(0,0,0,0)"/>
{% endif %}</linearGradient>
{# NO drop-shadow filter: a full-bleed embedded card has no canvas for a blur
   to render into — the viewBox clips it to corner-notch smudges outside the
   rounded edge. The surface_1 crown, edge highlight, and border do the lift. #}
<style>
{{ font_faces | safe }}
/* Primer strips are FLAT — suppress the global expression.css state glow
   (warning/critical drop-shadow, offline grayscale). The state lives in the
   animated mark alone; numbers stay the heroes. Element + two attribute selectors
   outrank the global svg[data-hw-status] rule 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}
.{{ uid }}-identity {
  font-family: var(--dna-font-display, 'Inter', system-ui, sans-serif);
  font-size: {{ identity_font_size }}px; font-weight: {{ identity_font_weight }}; letter-spacing: {{ identity_letter_spacing_em }}em;
  fill: {{ _genome_raw.ink }};
}
.{{ uid }}-metric-label {
  font-family: var(--dna-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: {{ strip_metric_label_size }}px; font-weight: {{ strip_metric_label_weight }}; letter-spacing: {{ strip_metric_label_letter_spacing_em }}em; text-transform: uppercase;
  /* Muted ink_secondary — labels are annotation, not accent; the glyph in
     glyph_inner and the pulse are the only accents (one accent family). */
  fill: {{ _genome_raw.ink_secondary }};
}
.{{ uid }}-metric-value {
  font-family: var(--dna-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: {{ strip_metric_value_size }}px; font-weight: {{ strip_metric_value_weight_resolved }}; letter-spacing: {{ strip_metric_value_letter_spacing_em }}em;
  fill: {{ _genome_raw.ink }};
}
/* Strip status mark — the same animated state-glyph set as the badge (ping /
   spin / throb / shake), all compositor (transform / opacity), reduced-motion
   gated. Static renderers freeze at the resting frame. */
.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>
