{# Chart paradigm: chrome.
   Ported element-by-element from tier2/genomes/chrome/horizon/github-star-history-card-v6.svg.
   900x500, material stack (envelope + well + rail), Catmull-Rom data curve with line glow,
   diamond markers, scanlines, horizon glow, milestone diamonds.
   Chart fragments (polyline, markers, milestones) come from chart_engine. #}

{# MATERIAL STACK — every color genome-driven via CSS vars + _profile_visual_context
   template params. Fallbacks preserve chrome specimen fidelity. #}
<g clip-path="url(#{{ uid }}-clip)">
  <rect width="{{ chart_layout.width }}" height="{{ chart_layout.height }}" fill="url(#{{ uid }}-env)" filter="url(#{{ uid }}-bevel)"/>
  <rect x="{{ chart_layout.chrome_outer_rect.x }}" y="{{ chart_layout.chrome_outer_rect.y }}"
        width="{{ chart_layout.chrome_outer_rect.w }}" height="{{ chart_layout.chrome_outer_rect.h }}"
        rx="{{ chart_layout.chrome_outer_rect.rx }}" fill="none"
        stroke="var(--dna-surface-deep)" stroke-width="0.8"/>
  <rect x="{{ chart_layout.chrome_well_rect.x }}" y="{{ chart_layout.chrome_well_rect.y }}"
        width="{{ chart_layout.chrome_well_rect.w }}" height="{{ chart_layout.chrome_well_rect.h }}"
        rx="{{ chart_layout.chrome_well_rect.rx }}" fill="url(#{{ uid }}-well)"/>
  <rect x="{{ chart_layout.chrome_rail_rect.x }}" y="{{ chart_layout.chrome_rail_rect.y }}"
        width="{{ chart_layout.chrome_rail_rect.w }}" height="{{ chart_layout.chrome_rail_rect.h }}"
        fill="url(#{{ uid }}-env)" opacity="0.78"/>
  <rect x="{{ chart_layout.chrome_top_highlight_rect.x }}" y="{{ chart_layout.chrome_top_highlight_rect.y }}"
        width="{{ chart_layout.chrome_top_highlight_rect.w }}" height="{{ chart_layout.chrome_top_highlight_rect.h }}"
        rx="{{ chart_layout.chrome_top_highlight_rect.rx }}"
        fill="var(--dna-border-tint, rgba(91,163,212,0.14))" opacity="0.9"/>
  <rect x="{{ chart_layout.chrome_outer_rect.x }}" y="{{ chart_layout.chrome_outer_rect.y }}"
        width="{{ chart_layout.chrome_outer_rect.w }}" height="{{ chart_layout.chrome_outer_rect.h }}"
        rx="{{ chart_layout.chrome_outer_rect.rx }}" fill="none"
        stroke="url(#{{ uid }}-rim)" stroke-width="1.0"/>
</g>

{# ZONE 1: HEADER. v0.3.9 Bug F: glyph fill consumes the variant's
   ``glyph_inner`` chromatic (matches chrome badge's variant-aware glyph
   color). Fallback to ``--dna-signal`` for genomes that don't declare
   per-variant glyph_inner. #}
{% if glyph_path %}
<g data-hw-zone="glyph" transform="translate({{ chart_layout.rects.chrome_glyph.x }},{{ chart_layout.rects.chrome_glyph.y }})">
  <svg viewBox="{{ glyph_viewbox }}" width="{{ chart_layout.rects.chrome_glyph.w }}" height="{{ chart_layout.rects.chrome_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 %}
<text data-hw-zone="label" class="{{ uid }}-label" x="{{ chart_layout.texts.chrome_label.x }}" y="{{ chart_layout.texts.chrome_label.y }}">{{ chart_header_label }}</text>
<text data-hw-zone="identity" class="{{ uid }}-identity" x="{{ chart_layout.texts.chrome_identity.x }}" y="{{ chart_layout.texts.chrome_identity.y }}" text-anchor="{{ chart_layout.texts.chrome_identity.anchor }}"
  {%- if chart_header_identity_text_length %} textLength="{{ chart_header_identity_text_length }}" lengthAdjust="spacingAndGlyphs"{%- endif %}>{{ chart_repo }}</text>

<line x1="{{ chart_layout.chrome_header_rule.x1 }}" y1="{{ chart_layout.chrome_header_rule.y1 }}"
      x2="{{ chart_layout.chrome_header_rule.x2 }}" y2="{{ chart_layout.chrome_header_rule.y2 }}"
      stroke="url(#{{ uid }}-sep)" stroke-width="0.8"/>

{# ZONE 2: TITLE + HERO #}
<text data-hw-zone="title" class="{{ uid }}-title" x="{{ chart_layout.texts.chrome_title.x }}" y="{{ chart_layout.texts.chrome_title.y }}">{{ chart_series_title | default('STAR HISTORY') }}</text>
<text data-hw-zone="hero-value" class="{{ uid }}-hero" x="{{ chart_layout.texts.chrome_hero_value.x }}" y="{{ chart_layout.texts.chrome_hero_value.y }}" text-anchor="{{ chart_layout.texts.chrome_hero_value.anchor }}">{{ chart_current_stars }}</text>

<text data-hw-zone="subtitle" class="{{ uid }}-subtitle" x="{{ chart_layout.texts.chrome_subtitle.x }}" y="{{ chart_layout.texts.chrome_subtitle.y }}">{{ chart_subtitle_label | default('LIFETIME GROWTH') }}</text>
<text data-hw-zone="hero-label" class="{{ uid }}-hero-label" x="{{ chart_layout.texts.chrome_hero_label.x }}" y="{{ chart_layout.texts.chrome_hero_label.y }}" text-anchor="{{ chart_layout.texts.chrome_hero_label.anchor }}">{{ chart_hero_label | default('TOTAL STARS') }}{{ chart_hero_suffix | default('') }}</text>

<line x1="{{ chart_layout.chrome_title_rule.x1 }}" y1="{{ chart_layout.chrome_title_rule.y1 }}"
      x2="{{ chart_layout.chrome_title_rule.x2 }}" y2="{{ chart_layout.chrome_title_rule.y2 }}"
      stroke="url(#{{ uid }}-sep)" stroke-width="0.5" opacity="0.6"/>

{# ZONE 3: CHART BODY #}
<g data-hw-zone="chart">
  {# Scanline texture in bottom 20% of chart for reflective-surface character.
     Scanlines use the genome's declared highlight_color (specular_light)
     which for chrome paradigm is a required field. #}
  <g data-hw-zone="scanlines" stroke="{{ specular_light }}" stroke-width="0.5" opacity="0.06">
    {% for line in chart_layout.chrome_scanlines %}
    <line x1="{{ line.x1 }}" y1="{{ line.y1 }}" x2="{{ line.x2 }}" y2="{{ line.y2 }}"/>
    {% endfor %}
  </g>

  {# Gridlines — genome ink_muted for subtle presence. #}
  <g data-hw-zone="grid" stroke="var(--dna-ink-muted)" stroke-width="0.4" opacity="0.18">
    {% for line in chart_layout.chrome_grid_guides %}
    <line x1="{{ line.x1 }}" y1="{{ line.y1 }}" x2="{{ line.x2 }}" y2="{{ line.y2 }}"/>
    {% endfor %}
  </g>
  <line x1="{{ chart_layout.chrome_low_gridline.x1 }}" y1="{{ chart_layout.chrome_low_gridline.y1 }}" x2="{{ chart_layout.chrome_low_gridline.x2 }}" y2="{{ chart_layout.chrome_low_gridline.y2 }}" stroke="var(--dna-ink-muted)" stroke-width="0.4" opacity="0.1"/>

  {# Y-axis labels — derived from data via chart_engine _nice_y_ticks.
     The +3 y-offset matches the chrome baseline convention. #}
  {% 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 %}

  {# Horizon glow — 2px highlight band at x-axis baseline. Genome specular_light
     drives the hue (obsidian-prism → lavender, liquid-mercury → silver-white). #}
  <rect class="{{ uid }}-horizon" x="{{ chart_layout.chrome_horizon_rect.x }}"
        y="{{ chart_layout.chrome_horizon_rect.y }}" width="{{ chart_layout.chrome_horizon_rect.w }}"
        height="{{ chart_layout.chrome_horizon_rect.h }}"
        fill="{{ specular_light }}" filter="url(#{{ uid }}-horizon-glow)"/>

  {# Y-axis left rail — genome signal accent. #}
  <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-signal)" stroke-width="0.8" opacity="0.55"/>

  {# Chart engine fragments — structured data rendered through Jinja partials. #}
  {%- 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 %}
    {%- include "components/chart-polyline.svg.j2" %}
  {%- 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.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>

<line x1="{{ chart_layout.chrome_x_axis_rule.x1 }}" y1="{{ chart_layout.chrome_x_axis_rule.y1 }}"
      x2="{{ chart_layout.chrome_x_axis_rule.x2 }}" y2="{{ chart_layout.chrome_x_axis_rule.y2 }}"
      stroke="url(#{{ uid }}-sep)" stroke-width="0.4" opacity="0.55"/>

{# ZONE 4: X-AXIS LABELS — year numbers derived from data (star-history.com style). #}
<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>

<line x1="{{ chart_layout.chrome_footer_rule.x1 }}" y1="{{ chart_layout.chrome_footer_rule.y1 }}"
      x2="{{ chart_layout.chrome_footer_rule.x2 }}" y2="{{ chart_layout.chrome_footer_rule.y2 }}"
      stroke="url(#{{ uid }}-sep)" stroke-width="0.4" opacity="0.55"/>

{# ZONE 5: FOOTER #}
<g data-hw-zone="status" transform="translate({{ chart_layout.rects.chrome_status_anchor.x }},{{ chart_layout.rects.chrome_status_anchor.y }})">
  <rect class="{{ uid }}-dia" x="{{ chart_layout.rects.chrome_status_diamond.x }}" y="{{ chart_layout.rects.chrome_status_diamond.y }}"
        width="{{ chart_layout.rects.chrome_status_diamond.w }}" height="{{ chart_layout.rects.chrome_status_diamond.h }}"
        rx="{{ chart_layout.rects.chrome_status_diamond.rx }}"
        transform="rotate(45)" fill="var(--hw-core, var(--dna-signal))"/>
</g>

<text data-hw-zone="subject-url" class="{{ uid }}-foot" x="{{ chart_layout.texts.chrome_footer_url.x }}" y="{{ chart_layout.texts.chrome_footer_url.y }}">{{ chart_subject_url | default(chart_repo) }}</text>
<text data-hw-zone="brand" class="{{ uid }}-brand" x="{{ chart_layout.texts.chrome_footer_brand.x }}" y="{{ chart_layout.texts.chrome_footer_brand.y }}" text-anchor="{{ chart_layout.texts.chrome_footer_brand.anchor }}">{{ chart_brand_label | default('HYPERWEAVE · STAR HISTORY') }}</text>
