{# Brutalist stats card — DARK substrate. Ported element-by-element from
   the v0.3.2 brutalist dark stat card prototype
   (celadon panel, lines 42-80; all 6 dark variants share identical
   structure — only --dna vars change). 495×280 canvas, 4px baseline grid.

   Order of operations matters because of SVG z-stacking:
     1. Substrate fill
     2. Perimeter stroke
     3. Left accent rail
     4. Grain filter rect (applied to right zone, overlays substrate)
     5. Grid coords (gc class — 6 numerals at far left)
     6. Header inset panel (--si surface, y=0→32)
     7. Provider glyph + identity text + status dot in header
     8. Rule under header at y=32
     9. STARS label + delta indicator + hero value
    10. Rule under hero at y=128
    11. Vertical divider at x=250 + horizontal subrule at y=164
    12. 4 stat labels + 4 stat values
    13. Rule at y=200 + ACTIVITY/PEAK labels
    14. 52 activity bars + baseline rule at y=246
    15. Language bar zone at y=252→264 with proportion overlays
    16. Footer line at y=264
    17. Footer text + brand
#}

<g clip-path="url(#{{ uid }}-clip)">
  {# (1) Substrate canvas — --dna-surface #}
  <rect width="{{ stats_layout.width }}" height="{{ stats_layout.height }}" fill="var(--dna-surface)"/>

  {# (2) Perimeter — 1.5px accent at 0.3 opacity, inset 0.75px from edges. #}
  <rect x="{{ stats_layout.dark_perimeter.x }}" y="{{ stats_layout.dark_perimeter.y }}"
        width="{{ stats_layout.dark_perimeter.w }}" height="{{ stats_layout.dark_perimeter.h }}"
        fill="none" stroke="var(--dna-signal)" stroke-width="1.5" opacity="0.3"/>

  {# (3) Left accent rail — solid 6px accent. #}
  <rect x="{{ stats_layout.rects.left_rail.x }}" y="{{ stats_layout.rects.left_rail.y }}"
        width="{{ stats_layout.rects.left_rail.w }}" height="{{ stats_layout.rects.left_rail.h }}"
        fill="var(--dna-signal)"/>

  {# (4) Grain filter — overlays the right zone (x=6 onward). #}
  <rect x="{{ stats_layout.grain_right_rect.x }}" width="{{ stats_layout.grain_right_rect.w }}"
        height="{{ stats_layout.grain_right_rect.h }}" filter="url(#{{ uid }}-grain)"/>

  {# Grid coord numerals at x=11 down the left margin were in the prototype
     the v0.3.2 brutalist dark stat card prototype:56 (industrial spec-sheet aesthetic) but
     removed per user feedback — the faint 01-06 markers read as visual noise
     rather than informational design. .cx-gc CSS class definition stays in
     defs.j2 unused for now (cleanup deferred to a separate sweep). #}

  {# (6) Header inset panel — y=0→32, fills brand_panel_fill (the --si tone). #}
  <rect x="{{ stats_layout.header_right_rect.x }}" y="{{ stats_layout.header_right_rect.y }}"
        width="{{ stats_layout.header_right_rect.w }}" height="{{ stats_layout.header_right_rect.h }}"
        fill="var(--dna-brand-panel-fill)"/>

  {# (7) Provider glyph + identity + status dot. Glyph at (24,8) 14×14
     filled with --th (--dna-ink-primary). #}
  {# Glyph translate y unified with light template at y=11 — both substrates
     now align glyph visual center (y=18) with username text cap-center (y~18). #}
  {% if glyph_path %}
  <g data-hw-zone="glyph" transform="translate({{ stats_layout.rects.brutalist_glyph.x }},{{ stats_layout.rects.brutalist_glyph.y }})">
    <svg viewBox="{{ glyph_viewbox }}" width="{{ stats_layout.rects.brutalist_glyph.w }}" height="{{ stats_layout.rects.brutalist_glyph.h }}">
      <path d="{{ glyph_path }}"{% if glyph_fill_rule %} fill-rule="{{ glyph_fill_rule }}"{% endif %} fill="var(--dna-glyph-inner, var(--dna-signal))"/>
    </svg>
  </g>
  {% endif %}
  {# Username + repo meta baselines unified across dark/light at y=22 to
     match the v0.3.2 brutalist light scholar full-set prototype:88 — both substrates
     render the same card with same spatial layout regardless of polarity. #}
  <text class="{{ uid }}-u" x="{{ stats_layout.texts.identity.x }}" y="{{ stats_layout.texts.identity.y }}"
    {%- if identity_text_length %} textLength="{{ identity_text_length }}" lengthAdjust="spacingAndGlyphs"{%- endif %}>{{ stats_username | upper | xml_escape }}</text>
  {# v0.3.9 algorithmic: identity_x + bio_x come from brutalist paradigm
     stats config (identity_x=44, bio_x=134); identity_zone_width derived
     in compose/resolvers/stats.py as bio_x - identity_x - padding = 70. #}
  <text class="{{ uid }}-m" x="{{ stats_layout.texts.bio.x }}" y="{{ stats_layout.texts.bio.y }}">{{ stats_repo_label | xml_escape }}</text>
  <rect class="{{ uid }}-sd" x="{{ stats_layout.rects.brutalist_status_dot.x }}" y="{{ stats_layout.rects.brutalist_status_dot.y }}"
        width="{{ stats_layout.rects.brutalist_status_dot.w }}" height="{{ stats_layout.rects.brutalist_status_dot.h }}"
        fill="var(--dna-signal)"/>

  {# (8) Rule under header — 2.5px accent at 0.55 opacity. #}
  <line x1="{{ stats_layout.lines.header_rule.x1 }}" y1="{{ stats_layout.lines.header_rule.y1 }}"
        x2="{{ stats_layout.lines.header_rule.x2 }}" y2="{{ stats_layout.lines.header_rule.y2 }}"
        stroke="var(--dna-signal)" stroke-width="2.5" opacity="0.55"/>

  {# (9) STARS label + delta indicator + hero value. #}
  <text class="{{ uid }}-hl" x="{{ stats_layout.texts.hero_label.x }}" y="{{ stats_layout.texts.hero_label.y }}">{{ hero_label | default('STARS') }}</text>
  {% if stars_delta_display | default('') %}
  <text class="{{ uid }}-hm" x="{{ stats_layout.texts.hero_delta.x }}" y="{{ stats_layout.texts.hero_delta.y }}" text-anchor="{{ stats_layout.texts.hero_delta.anchor }}">{{ stars_delta_display | default('LIFETIME') }}</text>
  {% endif %}
  <text class="{{ uid }}-hv" x="{{ stats_layout.texts.hero_value.x }}" y="{{ stats_layout.texts.hero_value.y }}">{{ stars_display | xml_escape }}</text>

  {# (10) Rule under hero — 2.5px accent 0.55 opacity. #}
  <line x1="{{ stats_layout.lines.hero_rule.x1 }}" y1="{{ stats_layout.lines.hero_rule.y1 }}"
        x2="{{ stats_layout.lines.hero_rule.x2 }}" y2="{{ stats_layout.lines.hero_rule.y2 }}"
        stroke="var(--dna-signal)" stroke-width="2.5" opacity="0.55"/>

  {# (11) Metric dividers: 4-slot GitHub keeps the locked center rule;
     non-4 cards use strip-style cell dividers. #}
  {% for divider_x in stats_layout.metric_divider_xs %}
  <line x1="{{ divider_x }}" y1="{{ stats_layout.lines.metric_vertical.y1 }}"
        x2="{{ divider_x }}" y2="{{ stats_layout.lines.metric_vertical.y2 }}"
        stroke="var(--dna-signal)" stroke-width="1.5" opacity="0.3"/>
  {% endfor %}
  <line x1="{{ stats_layout.lines.metric_row.x1 }}" y1="{{ stats_layout.lines.metric_row.y1 }}"
        x2="{{ stats_layout.lines.metric_row.x2 }}" y2="{{ stats_layout.lines.metric_row.y2 }}"
        stroke="var(--dna-signal)" stroke-width="1" opacity="0.22"/>

  {# (12) 4 stat labels + values — 2x2 grid. STREAK retained per locked
     v0.3.2 decision; prototype shows REVIEWS but production keeps STREAK. #}
  {% for slot in metric_layouts %}
  <text class="{{ uid }}-sl" x="{{ slot.label_x }}" y="{{ slot.label_y }}">{{ slot.label_text | xml_escape }}</text>
  <text class="{{ uid }}-sv" x="{{ slot.value_x }}" y="{{ slot.value_y }}" text-anchor="{{ slot.text_anchor }}"
    {%- if slot.value_text_length %} textLength="{{ slot.value_text_length }}" lengthAdjust="spacingAndGlyphs"{%- endif %}>{{ slot.value_display | xml_escape }}</text>
  {% endfor %}

  {% if activity %}
  {# (13) Activity zone. #}
  <line x1="{{ stats_layout.lines.activity_top.x1 }}" y1="{{ stats_layout.lines.activity_top.y1 }}"
        x2="{{ stats_layout.lines.activity_top.x2 }}" y2="{{ stats_layout.lines.activity_top.y2 }}"
        stroke="var(--dna-signal)" stroke-width="2.5" opacity="0.55"/>
  <text class="{{ uid }}-al" x="{{ stats_layout.texts.activity_label.x }}" y="{{ stats_layout.texts.activity_label.y }}">ACTIVITY · {% if activity.type == "sparkline_30d" %}30D{% else %}52W{% endif %}</text>
  <text class="{{ uid }}-al" x="{{ stats_layout.texts.activity_peak.x }}" y="{{ stats_layout.texts.activity_peak.y }}" text-anchor="{{ stats_layout.texts.activity_peak.anchor }}">PEAK · {{ activity_peak_label | default('—') }}</text>

  {% if activity.type == "sparkline_30d" %}
    {% include "frames/stats/zones/activity-sparkline.j2" %}
  {% else %}
    {% include "frames/stats/zones/activity-bars.j2" %}
  {% endif %}
  <line x1="{{ stats_layout.lines.activity_baseline.x1 }}" y1="{{ stats_layout.lines.activity_baseline.y1 }}"
        x2="{{ stats_layout.lines.activity_baseline.x2 }}" y2="{{ stats_layout.lines.activity_baseline.y2 }}"
        stroke="var(--dna-signal)" stroke-width="0.5" opacity="0.3"/>
  {% endif %}

  {% if proportional_bar %}
  {# (15) Language bar zone. Background inset (--si)
     + proportional accent overlays + percentage labels. Currently shows
     a single 'PY · 68%' / 'IPYNB · 18%' band; v0.3.3 will plumb resolver-
     side language data per repo. #}
  <line x1="{{ stats_layout.lines.language_top.x1 }}" y1="{{ stats_layout.lines.language_top.y1 }}"
        x2="{{ stats_layout.lines.language_top.x2 }}" y2="{{ stats_layout.lines.language_top.y2 }}"
        stroke="var(--dna-signal)" stroke-width="1" opacity="0.35"/>
  <g>
    <rect x="{{ stats_layout.language_shell_rect.x }}" y="{{ stats_layout.language_shell_rect.y }}"
          width="{{ stats_layout.language_shell_rect.w }}" height="{{ stats_layout.language_shell_rect.h }}"
          fill="var(--dna-brand-panel-fill)"/>
    {% if language_segments %}
      {% for lang in language_segments %}
        <rect x="{{ lang.x }}" y="{{ lang.y }}" width="{{ lang.w }}" height="{{ lang.h }}" fill="var(--dna-signal)" opacity="{{ lang.opacity }}"/>
        {% if lang.show_label %}
        <text x="{{ lang.label_x }}" y="{{ lang.label_y }}" class="{{ uid }}-ll">{{ lang.label_text | xml_escape }}</text>
        {% endif %}
      {% endfor %}
    {% else %}
      {# No language data — draw the language bar shell without overlays so
         the visual zone is preserved (matches prototype's three-band layout
         when ratios collapse to zero). #}
      <text x="{{ stats_layout.texts.language_empty.x }}" y="{{ stats_layout.texts.language_empty.y }}" class="{{ uid }}-ll">—</text>
    {% endif %}
  </g>

  {# (16) Footer line at y=264 + footer text. #}
  <line x1="{{ stats_layout.lines.language_footer.x1 }}" y1="{{ stats_layout.lines.language_footer.y1 }}"
        x2="{{ stats_layout.lines.language_footer.x2 }}" y2="{{ stats_layout.lines.language_footer.y2 }}"
        stroke="var(--dna-signal)" stroke-width="1" opacity="0.35"/>
  {% endif %}
  {# Footer URL x=14 aligns with first language label first letter (= absolute
     x=14 inside translate(6,252) transform group above) for a shared left-edge. #}
  <text class="{{ uid }}-ft" x="{{ stats_layout.texts.footer_url.x }}" y="{{ stats_layout.texts.footer_url.y }}">{{ subject_url | default(stats_username | lower) | xml_escape }}</text>
  <text class="{{ uid }}-fb" x="{{ stats_layout.texts.footer_brand.x }}" y="{{ stats_layout.texts.footer_brand.y }}" text-anchor="{{ stats_layout.texts.footer_brand.anchor }}">HYPERWEAVE</text>
</g>
