{# Chart paradigm: brutalist DARK substrate (v0.3.2 split).
   Ported element-by-element from tier2/genomes/brutalist/emerald/brutalist-star-history-v4b.svg.
   900x500, flat slab, grain, heavy structural rules, polyline with area fill,
   crosshair markers, nested-square milestones.
   Chart fragments (area, polyline, markers, milestones) come from chart_engine. #}

{# v0.3.2 viewport defaults: aligned with the v0.3.2 brutalist dark chart prototype
   celadon panel. Prototype chart area spans x=90 to x=857, y=140 to y=388 —
   pre-v0.3.2 defaults (80,150,760,245) drifted axis rails 10px left and grid
   baseline 5px high relative to the locked spec. #}
<g clip-path="url(#{{ uid }}-clip)" class="{{ uid }}-chart">

  {# L0: FLAT SLAB #}
  <rect width="{{ chart_layout.width }}" height="{{ chart_layout.height }}" fill="var(--dna-surface)"/>

  {# L1: GRAIN — paints before the perimeter and left rail so the structural
     stroke + accent bar read as crisp ink layered over the substrate texture. #}
  <rect x="{{ chart_layout.brutalist_dark_grain_rect.x }}" y="{{ chart_layout.brutalist_dark_grain_rect.y }}"
        width="{{ chart_layout.brutalist_dark_grain_rect.w }}" height="{{ chart_layout.brutalist_dark_grain_rect.h }}"
        filter="url(#{{ uid }}-grain)"/>

  {# L2: ASYMMETRIC L-FRAME — heavy left accent rail anchors the chart as a
     Y-axis spine while the outer perimeter ships as a barely-visible 1.5px
     hairline on all four sides. The visual asymmetry (6px solid accent left,
     1.5px @ 0.25 opacity top/right/bottom) reads as an L-frame even though
     structurally the perimeter is uniform — the rail dominates the eye.
     Matches the v0.3.2 brutalist dark prototype's celadon panel exactly
     (lines 55-56 of hw-elegant-mono-star-charts-v3.html). #}
  <rect x="{{ chart_layout.rects.brutalist_left_rail.x }}" y="{{ chart_layout.rects.brutalist_left_rail.y }}"
        width="{{ chart_layout.rects.brutalist_left_rail.w }}" height="{{ chart_layout.rects.brutalist_left_rail.h }}"
        fill="var(--dna-signal)" data-hw-zone="accent-rail"/>
  <rect x="{{ chart_layout.brutalist_perimeter_rect.x }}" y="{{ chart_layout.brutalist_perimeter_rect.y }}"
        width="{{ chart_layout.brutalist_perimeter_rect.w }}" height="{{ chart_layout.brutalist_perimeter_rect.h }}"
        fill="none"
        stroke="var(--dna-border, var(--dna-signal))" stroke-width="1.5" stroke-opacity="0.25"/>

  {# STRUCTURAL RULES — y-coordinates from the v0.3.2 brutalist dark chart prototype
     pigment panel lines 71-78. Top rule y=42 separates identity header from
     title zone; mid rule y=122 separates title zone from chart viewport; footer
     rule y=440 separates chart from footer zone. Pre-fix the mid rule was at
     y=140 (same as viewport_y), causing the topmost Y-axis label to render
     visually on top of the rule — visible as "3K" bleeding into the title box.
     Moving the rule to y=122 puts an 18px gap between rule and chart top,
     matching the light variant's title-zone-end hairline at y=122. #}
  <line x1="{{ chart_layout.lines.brutalist_header_rule.x1 }}" y1="{{ chart_layout.lines.brutalist_header_rule.y1 }}"
        x2="{{ chart_layout.lines.brutalist_header_rule.x2 }}" y2="{{ chart_layout.lines.brutalist_header_rule.y2 }}"
        stroke="var(--dna-border, var(--dna-signal))" stroke-width="2.5" opacity="0.55"/>
  <line x1="{{ chart_layout.lines.brutalist_title_rule.x1 }}" y1="{{ chart_layout.lines.brutalist_title_rule.y1 }}"
        x2="{{ chart_layout.lines.brutalist_title_rule.x2 }}" y2="{{ chart_layout.lines.brutalist_title_rule.y2 }}"
        stroke="var(--dna-border, var(--dna-signal))" stroke-width="2.5" opacity="0.55"/>
  <line x1="{{ chart_layout.lines.brutalist_footer_rule.x1 }}" y1="{{ chart_layout.lines.brutalist_footer_rule.y1 }}"
        x2="{{ chart_layout.lines.brutalist_footer_rule.x2 }}" y2="{{ chart_layout.lines.brutalist_footer_rule.y2 }}"
        stroke="var(--dna-border, var(--dna-signal))" stroke-width="2.5" opacity="0.55"/>

  {# Y-axis rail + baseline #}
  <line x1="{{ chart_layout.y_axis_line.x1 }}" y1="{{ chart_layout.y_axis_line.y1 }}"
        x2="{{ chart_layout.y_axis_line.x2 }}" y2="{{ chart_layout.y_axis_line.y2 }}"
        stroke="var(--dna-border, var(--dna-signal))" stroke-width="2" opacity="0.5"/>
  <line x1="{{ chart_layout.x_axis_line.x1 }}" y1="{{ chart_layout.x_axis_line.y1 }}"
        x2="{{ chart_layout.x_axis_line.x2 }}" y2="{{ chart_layout.x_axis_line.y2 }}"
        stroke="var(--dna-border, var(--dna-signal))" stroke-width="2" opacity="0.5"/>

  {# ZONE 1: HEADER #}
  <g data-hw-zone="header">
    {# Header glyph translate(20,13) unified across dark/light to match
       the v0.3.2 brutalist light chart prototype:64. 16×16 glyph at
       x=20 with text at x=42 leaves a 6px breathing gap (dark template was
       at translate(18,16) with text x=42 → 8px gap; unified to translate(20,13)
       for cross-substrate spatial parity per user feedback). #}
    {% if glyph_path %}
    <g data-hw-zone="glyph" transform="translate({{ chart_layout.rects.brutalist_glyph.x }}, {{ chart_layout.rects.brutalist_glyph.y }})">
      <svg viewBox="{{ glyph_viewbox }}" width="{{ chart_layout.rects.brutalist_glyph.w }}" height="{{ chart_layout.rects.brutalist_glyph.h }}">
        <path d="{{ glyph_path }}"{% if glyph_fill_rule %} fill-rule="{{ glyph_fill_rule }}"{% endif %} fill="var(--dna-chart-glyph, var(--dna-glyph-inner, var(--dna-signal)))"/>
      </svg>
    </g>
    {% endif %}
    {# Header user text formatted as "ELI64S / README-AI" matching prototype
       line 427 (the v0.3.2 brutalist dark chart prototype pigment panel). The
       redundant top-right repo URL was removed per visual review — the
       same URL renders in the bottom-left footer at (24, 472), so emitting
       it twice was visual clutter and pushed the status dot into an
       awkward position above the corner. #}
    {# Title formatted "OWNER / REPO" with spaces around slash, matching
       prototype line 427's "ELI64S / README-AI" cadence. chart_title is
       upper-cased repo slug "OWNER/REPO" from resolver; we re-split to
       insert visual breathing room around the separator. #}
    <text class="{{ uid }}-hdr-user" x="{{ chart_layout.texts.brutalist_header_user.x }}" y="{{ chart_layout.texts.brutalist_header_user.y }}">{{ chart_title | replace('/', ' / ') }}</text>
    {# Status dot y=17 centers at y=21, aligned with header text cap-center
       (text y=28 baseline minus 0.7*12/2 ≈ y=24). Pre-fix y=11 placed dot
       9px above text visual center. #}
    <rect class="{{ uid }}-status-dot" x="{{ chart_layout.rects.brutalist_status_dot.x }}" y="{{ chart_layout.rects.brutalist_status_dot.y }}"
          width="{{ chart_layout.rects.brutalist_status_dot.w }}" height="{{ chart_layout.rects.brutalist_status_dot.h }}"
          fill="var(--dna-signal)" shape-rendering="crispEdges"/>
  </g>

  {# ZONE 2: TITLE + HERO. Positions ported from
     the v0.3.2 brutalist dark chart prototype pigment panel lines 433-436:
       title-main at (24, 90), title-sub at (24, 108)
       hero-value at (cw-24, 90) right-anchored, hero-label at (cw-24, 108)
     Title subtitle text includes "LIFETIME GROWTH · {date range}" — date
     range derived from chart_window_label when populated. #}
  <g data-hw-zone="title">
    <text class="{{ uid }}-title-main" x="{{ chart_layout.texts.brutalist_dark_title.x }}" y="{{ chart_layout.texts.brutalist_dark_title.y }}">{{ chart_series_title | default('STAR HISTORY') }}</text>
    {# chart_date_range from resolver: "Jan 2024 — May 2026" with em-dash.
       Prototype line 36 shows "→" right-arrow. Replace em-dash with arrow
       for the v0.3.2 brutalist cadence. #}
    <text class="{{ uid }}-title-sub" x="{{ chart_layout.texts.brutalist_dark_subtitle.x }}" y="{{ chart_layout.texts.brutalist_dark_subtitle.y }}">{{ chart_subtitle_label | default('LIFETIME GROWTH') }}{% if chart_date_range %} · {{ chart_date_range | upper | replace('—', '→') }}{% endif %}</text>

    <text class="{{ uid }}-hero-value" x="{{ chart_layout.texts.brutalist_dark_hero_value.x }}" y="{{ chart_layout.texts.brutalist_dark_hero_value.y }}" text-anchor="{{ chart_layout.texts.brutalist_dark_hero_value.anchor }}">{{ chart_current_stars }}</text>
    <text class="{{ uid }}-hero-label" x="{{ chart_layout.texts.brutalist_dark_hero_label.x }}" y="{{ chart_layout.texts.brutalist_dark_hero_label.y }}" text-anchor="{{ chart_layout.texts.brutalist_dark_hero_label.anchor }}">{{ chart_hero_label | default('TOTAL STARS') }}</text>
  </g>

  {# ZONE 3: CHART #}
  <g data-hw-zone="chart">
    {% for label in chart_y_labels %}
    <text class="{{ uid }}-axis-y" x="{{ label.x }}" y="{{ label.y }}" text-anchor="{{ label.anchor }}">{{ label.text }}</text>
    {% endfor %}

    {%- for gl in chart_gridlines %}
      {%- include "components/chart-gridlines.svg.j2" %}
    {%- endfor %}
    {%- if chart_area %}
      {%- include "components/chart-area.svg.j2" %}
    {%- endif %}
    {%- if chart_polyline %}
    <g class="{{ uid }}-ghost-line" opacity="0.15">{% include "components/chart-polyline.svg.j2" %}</g>
    {% include "components/chart-polyline.svg.j2" %}
    <g class="{{ uid }}-bright-core">{% include "components/chart-polyline.svg.j2" %}</g>
    {%- endif %}
    <g data-hw-zone="markers">
    {%- for m in chart_markers %}
      {%- set partial = 'endpoint-' ~ m.shape if m.is_endpoint else m.shape %}
      {%- include "components/chart-markers/" ~ partial ~ ".svg.j2" %}
    {%- endfor %}
    </g>
    <g data-hw-zone="milestones">
    {%- for ms in chart_milestones %}
      {%- include "components/chart-milestone-brutalist.svg.j2" %}
    {%- endfor %}
    </g>
    {%- for ax in chart_axes %}
      {%- include "components/chart-axes.svg.j2" %}
    {%- endfor %}
    {%- if chart_empty_state %}
      {%- include "components/chart-empty-state.svg.j2" %}
    {%- endif %}
  </g>

  {# X-AXIS LABELS #}
  <g data-hw-zone="x-axis">
    {% for label in chart_x_labels %}
    <text class="{{ uid }}-axis-x" x="{{ label.x }}" y="{{ label.y }}" text-anchor="{{ label.anchor }}">{{ label.text }}</text>
    {% endfor %}
  </g>

  {# FOOTER #}
  <g data-hw-zone="footer">
    {# Footer is text-only per the v0.3.2 brutalist dark chart prototype.
       Prior status-marker rects were hallucinated and removed per user feedback. #}
    {# Footer text baseline y=472: footer zone spans y=440 (structural rule)
       to y=500 (canvas bottom), height 60px, center y=470. For 8px font with
       baseline-to-visual-center offset ~2.8px, baseline at y=472 puts visual
       center at y=469.2 — vertically centered in the footer zone. Pre-fix
       was at y=462, 10px above zone center. #}
    <text class="{{ uid }}-foot" x="{{ chart_layout.texts.brutalist_footer_url.x }}" y="{{ chart_layout.texts.brutalist_footer_url.y }}">{{ chart_subject_url | default(chart_repo) }}</text>
    <text class="{{ uid }}-foot-brand" x="{{ chart_layout.texts.brutalist_footer_brand.x }}" y="{{ chart_layout.texts.brutalist_footer_brand.y }}" text-anchor="{{ chart_layout.texts.brutalist_footer_brand.anchor }}">{{ chart_brand_label | default('HYPERWEAVE · STAR HISTORY') }}</text>
  </g>

</g>
