{# Brutalist stats card — LIGHT substrate, horizontal metric-row layout.
   Rebuilt from scratch (v0.3.13) against the reference hw-depth-card-mid.svg.

   Four-role palette: GROUND (--dna-surface) substrate, INK (--dna-ink-primary)
   structure/panels/values, ACCENT (--dna-signal) data-viz + labels-on-cream +
   spots, CREAM (--dna-brand-text) knockout text/glyph on ink panels.

   Geometry is row-aware (495x300): full-width ink header (0..40), accent seam,
   hero pill + Barlow-78 value + accent underline, an N-column metric row
   (labels accent / values ink), accent activity bars, accent language band,
   and per-column momentum tints behind temporal metrics. No manuscript margins,
   no left rail, no language panel — the dark partial keeps those. #}

<g clip-path="url(#{{ uid }}-clip)">
  {# (1) Ground substrate + grain (multiply so texture darkens paper only). #}
  <rect width="{{ stats_layout.width }}" height="{{ stats_layout.height }}" fill="var(--dna-surface)"/>
  <rect width="{{ stats_layout.width }}" height="{{ stats_layout.height }}" filter="url(#{{ uid }}-grain)" opacity="0.15" style="mix-blend-mode:multiply"/>

  {# (2) Full-width ink header panel + accent seam. #}
  <rect x="{{ stats_layout.rects.light_header.x }}" y="{{ stats_layout.rects.light_header.y }}" width="{{ stats_layout.rects.light_header.w }}" height="{{ stats_layout.rects.light_header.h }}" fill="var(--dna-ink-primary)"/>
  <rect x="{{ stats_layout.rects.light_seam.x }}" y="{{ stats_layout.rects.light_seam.y }}" width="{{ stats_layout.rects.light_seam.w }}" height="{{ stats_layout.rects.light_seam.h }}" fill="var(--dna-signal)"/>

  {# (3) Cream-knockout glyph + identity + repo meta on the ink panel. #}
  {% 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-brand-text)"/>
    </svg>
  </g>
  {% endif %}
  <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>
  <text class="{{ uid }}-m" x="{{ stats_layout.texts.bio.x }}" y="{{ stats_layout.texts.bio.y }}">{{ stats_repo_label | xml_escape }}</text>

  {# (4) Breathing liveness square (accent), top-right over the ink panel. #}
  <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)" shape-rendering="crispEdges"/>

  {# (5) Hero — ink pill + cream label, ink value, accent underline. #}
  <rect x="{{ stats_layout.rects.hero_label_pill.x }}" y="{{ stats_layout.rects.hero_label_pill.y }}"
        width="{{ stats_layout.rects.hero_label_pill.w }}" height="{{ stats_layout.rects.hero_label_pill.h }}"
        fill="var(--dna-ink-primary)"/>
  <text class="{{ uid }}-hl" x="{{ stats_layout.texts.hero_label.x }}" y="{{ stats_layout.texts.hero_label.y }}">{{ hero_label | default('STARS') }}</text>
  <text class="{{ uid }}-hv" x="{{ stats_layout.texts.hero_value.x }}" y="{{ stats_layout.texts.hero_value.y }}">{{ stars_display | xml_escape }}</text>
  <rect x="{{ stats_layout.rects.hero_underline.x }}" y="{{ stats_layout.rects.hero_underline.y }}"
        width="{{ stats_layout.rects.hero_underline.w }}" height="{{ stats_layout.rects.hero_underline.h }}"
        fill="var(--dna-signal)"/>

  {# (6) Metric row. Momentum tints emit FIRST so dividers/label/value sit on
     top. Tint is decorative reinforcement (label+value carry meaning). #}
  {% for r in metric_emphasis_rects %}
  <rect data-hw-zone="momentum-tint" x="{{ r.x }}" y="{{ r.y }}" width="{{ r.w }}" height="{{ r.h }}"
        fill="var(--dna-signal)" opacity="0.10"/>
  {% endfor %}
  {% for divider_x in stats_layout.metric_divider_xs %}
  <line x1="{{ divider_x }}" y1="{{ stats_layout.lines.metric_divider_span.y1 }}"
        x2="{{ divider_x }}" y2="{{ stats_layout.lines.metric_divider_span.y2 }}"
        stroke="var(--dna-ink-primary)" stroke-width="1" opacity="0.14"/>
  {% endfor %}
  {% for slot in metric_layouts %}
  <g data-hw-metric="{{ slot.label_text }}"{% if slot.emphasis %} data-hw-emphasis="{{ slot.emphasis }}"{% endif %}>
    <text class="{{ uid }}-sl" x="{{ slot.label_x }}" y="{{ slot.label_y }}" text-anchor="{{ slot.text_anchor }}">{{ 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>
  </g>
  {% endfor %}

  {% if activity %}
  {# (7) Activity — ink pill + cream label, ink PEAK, accent bars. #}
  <rect x="{{ stats_layout.rects.activity_label_pill.x }}" y="{{ stats_layout.rects.activity_label_pill.y }}"
        width="{{ stats_layout.rects.activity_label_pill.w }}" height="{{ stats_layout.rects.activity_label_pill.h }}"
        fill="var(--dna-ink-primary)"/>
  <text class="{{ uid }}-apill" 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" %}
    {% set activity_sparkline_stroke = "var(--dna-signal)" %}
    {% include "frames/stats/zones/activity-sparkline.j2" %}
  {% else %}
    {% set activity_bar_fill = "var(--dna-signal)" %}
    {% include "frames/stats/zones/activity-bars.j2" %}
    {# Baseline grounds the BARS only. A sparkline is itself a line, so a
       separate baseline here would double up with the footer rule when no
       language band sits between them. #}
    <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-ink-primary)" stroke-width="1" opacity="0.2"/>
  {% endif %}
  {% endif %}

  {% if proportional_bar %}
  {# (8) Language band — accent segments (decreasing opacity) + cream labels,
     directly on cream (no dark panel). #}
  {% 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 %}
    <text x="{{ stats_layout.texts.language_empty.x }}" y="{{ stats_layout.texts.language_empty.y }}" class="{{ uid }}-ll">—</text>
  {% endif %}
  {% endif %}

  {# (9) Footer — accent rule (same span as the hero underline) + ink url/brand. #}
  <rect x="{{ stats_layout.rects.light_footer_rule.x }}" y="{{ stats_layout.rects.light_footer_rule.y }}"
        width="{{ stats_layout.rects.light_footer_rule.w }}" height="{{ stats_layout.rects.light_footer_rule.h }}" fill="var(--dna-signal)" opacity="0.5"/>
  <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>

  {# (10) Ink perimeter. #}
  <rect x="{{ stats_layout.light_perimeter.x }}" y="{{ stats_layout.light_perimeter.y }}"
        width="{{ stats_layout.light_perimeter.w }}" height="{{ stats_layout.light_perimeter.h }}"
        fill="none" stroke="var(--dna-ink-primary)" stroke-width="2" opacity="{{ stroke_opacity | default('0.2') }}"/>
</g>
