{# Chart paradigm: brutalist LIGHT substrate / light scholar (v0.3.2 split).
   Paper canvas + dark ink axes/lines. Same spatial composition as dark for
   v0.3.2 MVP; full brutalist strip grammar (dark plot panel inset, accent seam for
   milestones, paper-texture filter with multiply blend) queued for v0.3.3
   light-scholar polish.
   Substrate inversion happens via CSS vars from variant_overrides. #}

{# v0.3.2 viewport defaults: aligned with the v0.3.2 brutalist light chart prototype
   pulse panel lines 73-78. Title zone occupies y=44→122; chart starts at
   y=130 (8px gap below hairline). Earlier vy=140 left an extra 10px of
   empty paper that visually merged with the y-axis label zone and made
   the chart top read as bleeding into the title boundary. #}
<g clip-path="url(#{{ uid }}-clip)" class="{{ uid }}-chart">

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

  {# L1: PAPER GRAIN — substrate-aware grain filter (defined in brutalist-defs.j2
     as low-frequency desaturated noise for light substrate); applied at
     opacity .15 with mix-blend-mode multiply per the v0.3.2 brutalist light
     scholar prototype (hw-codex-star-charts-light-scholar.html:569). Full
     canvas size + emitted BEFORE the perimeter so the noise darkening fans
     across the entire substrate without competing with the inset stroke.
     The multiply blend ensures the noise darkens the cream paper rather
     than adding a contrasting dapple. #}
  <rect width="{{ chart_layout.width }}" height="{{ chart_layout.height }}" filter="url(#{{ uid }}-grain)" opacity="0.15" style="mix-blend-mode:multiply"/>

  {# L2: PERIMETER — dark ink at low opacity for paper substrate. 0.75px inset
     + stroke-width=1 matches prototype line 570 exactly; the v0.3.2 build
     used 1.25 inset + 2px stroke which read as too prominent against the
     paper substrate, dominating the surface treatment. #}
  <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-ink-primary, var(--dna-border))" stroke-width="1" stroke-opacity="{{ stroke_opacity | default('0.20') }}"/>

  {# v0.3.2 Phase D light scholar additives — dark header panel + gold seam rule.
     Matches the v0.3.2 brutalist light chart prototype pulse panel: dark gradient
     panel inset spans y=0 to y=42; gold seam at y=42 (2.5px opacity 0.7)
     separates the dark header from the paper chart body. Painted BEFORE the
     structural rules so dark ink and gold layer correctly. Gated on
     panel_gradient_stops so dark variants skip the gradient overlay and keep
     their flat dark substrate. #}
  {% if panel_gradient_stops %}
  {# Dark header panel + accent seam (archive variant prototype lines
     25-31). Panel y=0→42, accent seam y=42 h=2.5. #}
  <rect x="{{ chart_layout.rects.brutalist_light_header_panel.x }}" y="{{ chart_layout.rects.brutalist_light_header_panel.y }}"
        width="{{ chart_layout.rects.brutalist_light_header_panel.w }}" height="{{ chart_layout.rects.brutalist_light_header_panel.h }}"
        fill="url(#{{ uid }}-panel)"/>
  <rect x="{{ chart_layout.rects.brutalist_light_header_seam.x }}" y="{{ chart_layout.rects.brutalist_light_header_seam.y }}"
        width="{{ chart_layout.rects.brutalist_light_header_seam.w }}" height="{{ chart_layout.rects.brutalist_light_header_seam.h }}"
        fill="var(--dna-seam-color, var(--dna-signal))" opacity="0.7"/>

  {# Title-zone tinted panel — a light panel between dark header and
     paper chart body. Fills with a 50/50 blend of panel-gradient[0] and
     surface_0 — the variant's "tinted paper" version. For now we use
     surface_2 which is the variant's tinted paper tone. #}
  <rect x="{{ chart_layout.rects.brutalist_light_title_panel.x }}" y="{{ chart_layout.rects.brutalist_light_title_panel.y }}"
        width="{{ chart_layout.rects.brutalist_light_title_panel.w }}" height="{{ chart_layout.rects.brutalist_light_title_panel.h }}"
        fill="var(--dna-chart-title-bg, var(--dna-surface-deep))"/>
  {# Hairline at y=122 separating title zone from chart body. #}
  <rect x="{{ chart_layout.rects.brutalist_light_title_hairline.x }}" y="{{ chart_layout.rects.brutalist_light_title_hairline.y }}"
        width="{{ chart_layout.rects.brutalist_light_title_hairline.w }}" height="{{ chart_layout.rects.brutalist_light_title_hairline.h }}"
        fill="var(--dna-ink-primary)" opacity="0.15"/>
  {% endif %}

  {# Y-axis rail + baseline — dark ink on paper, thinner stroke (1px) than
     dark variants (which use accent at 1.5px). Prototype lines 43-45. #}
  <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-ink-primary)" stroke-width="1" opacity="0.2"/>
  <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-ink-primary)" stroke-width="1" opacity="0.2"/>

  {# Left edge — dual-rule: 3px dark ink + 3px accent seam. Matches
     prototype lines 21-22 (archive variant double-bar treatment). The
     accent half emphasizes the variant's seam color as a visible vertical
     signature when the chart is rendered at small scale. #}
  <rect x="{{ chart_layout.rects.brutalist_light_ink_bar.x }}" y="{{ chart_layout.rects.brutalist_light_ink_bar.y }}"
        width="{{ chart_layout.rects.brutalist_light_ink_bar.w }}" height="{{ chart_layout.rects.brutalist_light_ink_bar.h }}"
        fill="var(--dna-ink-primary)" data-hw-zone="accent-bar"/>
  <rect x="{{ chart_layout.rects.brutalist_light_seam_bar.x }}" y="{{ chart_layout.rects.brutalist_light_seam_bar.y }}"
        width="{{ chart_layout.rects.brutalist_light_seam_bar.w }}" height="{{ chart_layout.rects.brutalist_light_seam_bar.h }}"
        fill="var(--dna-seam-color, var(--dna-signal))"/>

  {# ZONE 1: HEADER #}
  <g data-hw-zone="header">
    {# Header glyph translate(20,13) per the v0.3.2 brutalist light chart prototype:64
       — 16×16 glyph at x=20 means it ends at x=36; text at x=42 leaves a 6px
       gap. Pre-fix used translate(24,16) which ended at x=40 with text at
       x=42 → 2px gap (visually crammed). #}
    {% 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-seam-color, var(--dna-ink-primary)))"/>
      </svg>
    </g>
    {% endif %}
    {# Header user text only — top-right repo URL removed per visual review
       (was redundant with the bottom-left footer URL and pushed the status
       dot into an awkward position above the corner). #}
    {# Title with spaces around slash matching prototype cadence. #}
    <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 the 8x8 dot at y=21 — aligns with header text
       visual cap-center (12px font baseline y=28 - 0.7*12/2 ≈ 24, dot center
       at y=21 puts it within 3px of text cap-center). Pre-fix used y=11
       which placed the dot 9px above text cap-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-seam-color, var(--dna-signal))" shape-rendering="crispEdges"/>
  </g>

  {# ZONE 2: TITLE + HERO. Same positions as dark per user-verified shared
     layout. Polarity inverts via CSS-var routing in defs (title-main fills
     --dna-bg = panel top crimson; hero-value fills --dna-ink-primary = dark
     ink). #}
  <g data-hw-zone="title">
    {# Prototype baseline values from the v0.3.2 brutalist light chart prototype:75-78:
       STAR HISTORY hero text baseline y=92 (visual center ~y=78); subtitle and
       TOTAL STARS label baseline y=110. Pulls text visually toward the centre
       of the y=44→122 title zone (78px tall, centre at y=83). #}
    <text class="{{ uid }}-title-main" x="{{ chart_layout.texts.brutalist_light_title.x }}" y="{{ chart_layout.texts.brutalist_light_title.y }}">{{ chart_series_title | default('STAR HISTORY') }}</text>
    <text class="{{ uid }}-title-sub" x="{{ chart_layout.texts.brutalist_light_subtitle.x }}" y="{{ chart_layout.texts.brutalist_light_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_light_hero_value.x }}" y="{{ chart_layout.texts.brutalist_light_hero_value.y }}" text-anchor="{{ chart_layout.texts.brutalist_light_hero_value.anchor }}">{{ chart_current_stars }}</text>
    <text class="{{ uid }}-hero-label" x="{{ chart_layout.texts.brutalist_light_hero_label.x }}" y="{{ chart_layout.texts.brutalist_light_hero_label.y }}" text-anchor="{{ chart_layout.texts.brutalist_light_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.12">{% 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 border — seam-color hairline at y=448 separating chart body from
     footer zone. Mirrors the the v0.3.2 brutalist light chart prototype
     pattern (line 462 hairline in the dark stat card; this is the chart-frame
     analog). Earlier light chart had no footer-top border which made the
     footer zone visually merge with the chart body. #}
  <line x1="{{ chart_layout.lines.brutalist_light_footer_rule.x1 }}" y1="{{ chart_layout.lines.brutalist_light_footer_rule.y1 }}"
        x2="{{ chart_layout.lines.brutalist_light_footer_rule.x2 }}" y2="{{ chart_layout.lines.brutalist_light_footer_rule.y2 }}"
        stroke="var(--dna-seam-color, var(--dna-signal))" stroke-width="1" opacity="0.4"/>

  {# FOOTER — seam color (variant accent) marker instead of dark-mode signal #}
  <g data-hw-zone="footer">
    {# Footer text baseline y=472 (vertically centered in footer zone y=440-500).
       The status marker rect+dot were hallucinated additions — no chart
       prototype carries a footer status indicator. Removed per user feedback;
       footer is text-only matching the v0.3.2 brutalist light chart prototype:155. #}
    <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>
