{# Brutalist stats defs: grain filter + clip-path + brutalist panel gradient
   + CSS classes ported VERBATIM from the v0.3.2 prototypes:
     dark substrates → the v0.3.2 brutalist dark stat card prototype (line 48)
     light scholars  → tier2/.../the v0.3.2 brutalist light scholar full-set prototype   (line 58)

   Class name set is shared (.u, .m, .hl, .hv, .hm, .sl, .sv, .al, .ll,
   .ft, .fb, .gc) but FILLS differ because the polarity inverts: dark
   variants put labels on dark substrate (accent-colored = --tm), light
   scholars put labels on PAPER zone with crimson/etc. ink (= --bg, panel
   top color). substrate_kind switches the fills.

   Field → CSS var mapping per substrate:

     === DARK SUBSTRATE ===
     prototype --th (text high)   → var(--dna-brand-text) [= variant ink]
     prototype --tm (text mid)    → var(--dna-signal)
     prototype --tl (text low)    → var(--dna-label-text)
     prototype --tg (text grid)   → var(--dna-surface-deep)
     prototype --s  (surface)     → var(--dna-surface)
     prototype --si (inset panel) → var(--dna-brand-panel-fill)
     prototype --a  (accent)      → var(--dna-signal)

     === LIGHT SCHOLAR ===
     paper text     → var(--dna-brand-text)    [variant surface_0]
     ink text       → var(--dna-ink-primary)   [variant ink, dark on paper]
     tier-1 labels  → var(--dna-bg)            [panel top = deep crimson/etc.]
     tier-2 labels  → var(--dna-label-text)    [warm-tan muted]
     hero meta/gold → var(--dna-seam-color)    [gold/etc. seam color]
     footer brand   → var(--dna-seam-color)    [gold]
#}
<filter id="{{ uid }}-grain" x="0%" y="0%" width="100%" height="100%">
  <feTurbulence type="fractalNoise" baseFrequency="1.6" numOctaves="2" seed="7"/>
  <feColorMatrix type="luminanceToAlpha"/>
  <feColorMatrix type="matrix" values="0 0 0 0 .05
                                       0 0 0 0 .05
                                       0 0 0 0 .05
                                       0 0 0 .08 0"/>
</filter>
<clipPath id="{{ uid }}-clip"><rect width="{{ width }}" height="{{ height }}"/></clipPath>
{% if panel_gradient_stops %}
<linearGradient id="{{ uid }}-panel" x1="0" x2="1" y1="0" y2="0">
{% for stop in panel_gradient_stops %}
<stop offset="{{ stop.offset }}" stop-color="{{ stop.color }}"/>
{% endfor %}
</linearGradient>
{% endif %}
<style>
  {{ font_faces | safe }}
  text { font-family: 'JetBrains Mono', monospace; shape-rendering: geometricPrecision; }
{% if substrate_kind == 'light' %}
  {# Light row fills (v0.3.13, reference hw-depth-card-mid.svg): CREAM knockout
     on the ink header/pills (--dna-brand-text), INK values/structure
     (--dna-ink-primary), ACCENT labels-on-cream (--dna-signal). Fonts match the
     reference — username 14, hero value Barlow 78, row value Barlow 27/900,
     row label JBM 8 accent. .sv size/weight MUST track stats_layout
     _ROW_VALUE_FONT_SIZE/_WEIGHT so measured textLength matches the render. #}
  .{{ uid }}-u  { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 800; letter-spacing: 0.12em; fill: var(--dna-brand-text); }
  .{{ uid }}-m  { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 700; letter-spacing: 0.12em; fill: var(--dna-brand-text); opacity: 0.65; }
  .{{ uid }}-hl { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; fill: var(--dna-brand-text); }
  .{{ uid }}-hv { font-family: 'Barlow Condensed', sans-serif; font-size: 78px; font-weight: 900; letter-spacing: -0.025em; fill: var(--dna-ink-primary); }
  .{{ uid }}-hm { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 500; letter-spacing: 0.16em; fill: var(--dna-signal); }
  .{{ uid }}-sl { font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--dna-signal); }
  .{{ uid }}-sv { font-family: 'Barlow Condensed', sans-serif; font-size: 27px; font-weight: 900; letter-spacing: -0.01em; fill: var(--dna-ink-primary); }
  .{{ uid }}-al { font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; fill: var(--dna-ink-primary); }
  .{{ uid }}-apill { font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; fill: var(--dna-brand-text); }
  .{{ uid }}-ll { font-family: 'JetBrains Mono', monospace; font-size: 7px; font-weight: 700; letter-spacing: 0.06em; fill: var(--dna-brand-text); }
  .{{ uid }}-ft { font-family: 'JetBrains Mono', monospace; font-size: 7.5px; font-weight: 700; letter-spacing: 0.05em; fill: var(--dna-ink-primary); opacity: 0.6; }
  .{{ uid }}-fb { font-family: 'JetBrains Mono', monospace; font-size: 7.5px; font-weight: 800; letter-spacing: 0.24em; fill: var(--dna-ink-primary); opacity: 0.5; }
  .{{ uid }}-gc { font-family: 'JetBrains Mono', monospace; font-size: 5.5px; font-weight: 500; fill: var(--dna-ink-primary); opacity: 0.15; }
{% else %}
  {# Dark substrate fills: bright text on dark, accent on dark. #}
  .{{ uid }}-u  { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 800; letter-spacing: 0.22em; fill: var(--dna-brand-text); }
  .{{ uid }}-m  { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 400; letter-spacing: 0.12em; fill: var(--dna-label-text); opacity: 0.8; }
  .{{ uid }}-hl { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase; fill: var(--dna-signal); }
  .{{ uid }}-hv { font-family: 'Barlow Condensed', sans-serif; font-size: 68px; font-weight: 900; letter-spacing: -0.025em; fill: var(--dna-brand-text); }
  .{{ uid }}-hm { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 500; letter-spacing: 0.16em; fill: var(--dna-label-text); }
  .{{ uid }}-sl { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase; fill: var(--dna-signal); }
  .{{ uid }}-sv { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; fill: var(--dna-brand-text); }
  .{{ uid }}-al { font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; fill: var(--dna-label-text); }
  .{{ uid }}-ll { font-family: 'JetBrains Mono', monospace; font-size: 7px; font-weight: 700; letter-spacing: 0.15em; fill: var(--dna-surface); opacity: 0.7; }
  .{{ uid }}-ft { font-family: 'JetBrains Mono', monospace; font-size: 7.5px; font-weight: 500; letter-spacing: 0.14em; fill: var(--dna-label-text); opacity: 0.7; }
  .{{ uid }}-fb { font-family: 'JetBrains Mono', monospace; font-size: 7.5px; font-weight: 700; letter-spacing: 0.28em; fill: var(--dna-label-text); opacity: 0.5; }
  .{{ uid }}-gc { font-family: 'JetBrains Mono', monospace; font-size: 5.5px; font-weight: 500; fill: var(--dna-surface-deep); }
{% endif %}
  @keyframes {{ uid }}-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
  .{{ uid }}-sd { animation: {{ uid }}-pulse 2.618s ease-in-out infinite; will-change: opacity; }
  @media (prefers-reduced-motion: reduce) { .{{ uid }}-sd { animation: none !important; opacity: 0.8; } }
</style>
