{# HyperWeave Rhythm Strip v2 — 600x92 4-zone instrument.
   Specimen: tier2/telemetry/receipt-types/receipts-pr-strips/rhythm-strip-v2.svg
   Zones (left → right):
     IDENTITY  16-190px:  session info + 4-chip tool legend
     VELOCITY 200-264px:  VEL label + big tok/min number + sparkline + axis
     RHYTHM   268-510px:  variable-height bars + peak marker + time axis
     STATUS   522-600px:  pulsing OK/WARN/ERR dot + dominant tool class
   Same structure for ALL skins; substrate + palette swap via var(--dna-*).
   Extends document.svg.j2. #}
{% extends "document.svg.j2" %}

{% block defs %}
  {# Sparkline gradient fill: signal color fades top→bottom #}
  <linearGradient id="{{ uid }}-spk-fill" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="var(--dna-signal)" stop-opacity="0.25"/>
    <stop offset="100%" stop-color="var(--dna-signal)" stop-opacity="0.03"/>
  </linearGradient>
  {# v0.2.23: atmosphere gradient + blooms when the genome declares them.
     Same pattern as the receipt template so codex skin's lavender backdrop
     reaches both artifacts and they read as the same family. #}
{% if atmosphere_stops %}
  <linearGradient id="{{ uid }}-atmosphere" x1="0" y1="0" x2="1" y2="1">
{% for stop in atmosphere_stops %}
    <stop offset="{{ stop.offset }}" stop-color="{{ stop.color }}"/>
{% endfor %}
  </linearGradient>
{% endif %}
{% for bloom in atmosphere_blooms %}
  <radialGradient id="{{ uid }}-{{ bloom.id }}" cx="{{ bloom.cx }}" cy="{{ bloom.cy }}" r="{{ bloom.r }}">
{% for stop in bloom.stops %}
    <stop offset="{{ stop.offset }}" stop-color="{{ stop.color }}" stop-opacity="{{ stop.opacity }}"/>
{% endfor %}
  </radialGradient>
{% endfor %}
{% endblock %}

{% block content %}
{% set sw = width | default(600) %}
{% set sh = height | default(92) %}

{# Atmosphere backdrop (codex skin) — paint full-canvas gradient, then blooms,
   then translucent substrate so atmosphere bleeds through. Other skins fall
   through to the original solid substrate paint. #}
{% if atmosphere_stops %}
<rect width="{{ sw }}" height="{{ sh }}" rx="{{ rhythm_strip_geom.card_rx }}" fill="url(#{{ uid }}-atmosphere)"/>
{% for bloom in atmosphere_blooms %}
<rect width="{{ sw }}" height="{{ sh }}" rx="{{ rhythm_strip_geom.card_rx }}" fill="url(#{{ uid }}-{{ bloom.id }})"/>
{% endfor %}
<rect width="{{ sw }}" height="{{ sh }}" rx="{{ rhythm_strip_geom.card_rx }}" fill="var(--dna-surface)"/>
{% else %}
<rect width="{{ sw }}" height="{{ sh }}" rx="{{ rhythm_strip_geom.card_rx }}" fill="var(--dna-surface)"/>
{% endif %}

{# ═══ ZONE 1: IDENTITY (16-190px) ═══ #}
<g transform="translate({{ rhythm_strip_geom.identity_x }}, {{ rhythm_strip_geom.identity_y }})" data-hw-zone="identity">
  <text class="s ink1" font-size="12" font-weight="700" y="{{ rhythm_strip_geom.identity_title_y }}" letter-spacing="-0.01em">session {{ session_id_short }}</text>
  <text class="m ink3" font-size="9" y="{{ rhythm_strip_geom.identity_info_y }}">call {{ call_number }} · {{ duration_label }} · {{ stage_count }} stages</text>
  <text class="m ink3" font-size="9" y="{{ rhythm_strip_geom.identity_token_y }}">{{ token_total_label }} tok · {{ cost_label }}</text>
  {# 4-chip tool legend at y=60 — fixed positions matching specimen #}
  <g transform="translate(0, 60)" data-hw-field="tool-chips">
{% for chip in identity_chips | default([]) %}
    <rect x="{{ chip.x }}" y="{{ rhythm_strip_geom.chip_y }}" width="{{ rhythm_strip_geom.chip_w }}" height="{{ rhythm_strip_geom.chip_h }}" rx="{{ rhythm_strip_geom.chip_rx }}" fill="var(--dna-tool-{{ chip.tool_class }})"/>
    <text class="m ink3" font-size="6" x="{{ chip.text_x }}" y="{{ rhythm_strip_geom.chip_text_y }}">{{ chip.label }}</text>
{% endfor %}
  </g>
</g>

{# Vertical divider between IDENTITY and VELOCITY #}
<line x1="{{ rhythm_strip_geom.identity_divider_x }}" y1="{{ rhythm_strip_geom.divider_y1 }}" x2="{{ rhythm_strip_geom.identity_divider_x }}" y2="{{ rhythm_strip_geom.divider_y2 }}" stroke="var(--dna-border)" stroke-width="0.5"/>

{# ═══ ZONE 2: VELOCITY (200-264px) ═══ #}
<g transform="translate({{ rhythm_strip_geom.velocity_x }}, {{ rhythm_strip_geom.velocity_y }})" data-hw-zone="velocity">
  <text class="m ink3" font-size="6.5" font-weight="700" letter-spacing="0.22em" x="{{ rhythm_strip_geom.velocity_text_x }}" y="{{ rhythm_strip_geom.velocity_label_y }}">VEL</text>
  <text class="s ink1" font-size="16" font-weight="800" x="{{ rhythm_strip_geom.velocity_text_x }}" y="{{ rhythm_strip_geom.velocity_value_y }}" letter-spacing="-0.02em">{{ velocity_label }}</text>
  <text class="m ink3" font-size="7" x="{{ rhythm_strip_geom.velocity_text_x }}" y="{{ rhythm_strip_geom.velocity_unit_y }}" letter-spacing="0.06em">tok/min</text>
</g>

{# Sparkline — fill area below + stroke line above + endpoint dots #}
<g data-hw-zone="velocity-sparkline">
  <path d="{{ sparkline_fill_path }}" fill="url(#{{ uid }}-spk-fill)" stroke="none"/>
  <path d="{{ sparkline_stroke_path }}" fill="none" stroke="var(--dna-signal)" stroke-width="1" stroke-linejoin="round" stroke-linecap="round" opacity="0.7"/>
{% if sparkline_start_point %}
  <circle cx="{{ sparkline_start_point[0] }}" cy="{{ sparkline_start_point[1] }}" r="{{ rhythm_strip_geom.sparkline_dot_r }}" fill="var(--dna-signal)" opacity="0.5"/>
  <circle cx="{{ sparkline_end_point[0] }}" cy="{{ sparkline_end_point[1] }}" r="{{ rhythm_strip_geom.sparkline_dot_r }}" fill="var(--dna-signal)" opacity="0.5"/>
{% endif %}
  <text class="m ink3" font-size="5" x="{{ rhythm_strip_geom.sparkline_label_left_x }}" y="{{ rhythm_strip_geom.sparkline_label_y }}" letter-spacing="0.06em">{{ sparkline_label_left }}</text>
  <text class="m ink3" font-size="5" x="{{ rhythm_strip_geom.sparkline_label_right_x }}" y="{{ rhythm_strip_geom.sparkline_label_y }}" text-anchor="end" letter-spacing="0.06em">{{ sparkline_label_right }}</text>
</g>

{# Vertical divider between VELOCITY and RHYTHM #}
<line x1="{{ rhythm_strip_geom.velocity_divider_x }}" y1="{{ rhythm_strip_geom.divider_y1 }}" x2="{{ rhythm_strip_geom.velocity_divider_x }}" y2="{{ rhythm_strip_geom.divider_y2 }}" stroke="var(--dna-border)" stroke-width="0.5"/>

{# ═══ ZONE 3: RHYTHM (268-510px) ═══ #}
<g transform="translate({{ rhythm_strip_geom.rhythm_x }}, {{ rhythm_strip_geom.rhythm_y }})" data-hw-zone="rhythm">
  <text class="m ink3" font-size="6" font-weight="700" letter-spacing="0.18em" x="{{ rhythm_strip_geom.rhythm_title_x }}" y="{{ rhythm_strip_geom.rhythm_title_y }}">RHYTHM</text>
  {# Baseline at y=78 (strip-relative) — bars baseline-aligned to it #}
  <line x1="{{ rhythm_strip_geom.rhythm_baseline_x1 }}" y1="{{ rhythm_strip_geom.rhythm_baseline_y }}" x2="{{ rhythm_axis_w }}" y2="{{ rhythm_strip_geom.rhythm_baseline_y }}" stroke="var(--dna-border)" stroke-width="0.3" opacity="0.5"/>
  {# Variable-height bars #}
  <g data-hw-field="bars">
{% for bar in rhythm_bars | default([]) %}
    <rect x="{{ bar.x }}" y="{{ bar.y }}" width="{{ bar.w }}" height="{{ bar.h }}" fill="var(--dna-tool-{{ bar.tool_class }})" opacity="{{ bar.opacity }}" rx="{{ rhythm_strip_geom.bar_rx }}"/>
{% endfor %}
  </g>
  {# Peak marker — horizontal signal-color line spanning the peak bar's width with vertical brackets #}
{% if rhythm_peak_marker %}
  <line x1="{{ rhythm_peak_marker.x }}" y1="{{ rhythm_peak_marker.top_line_y }}" x2="{{ rhythm_peak_marker.right_tick_x }}" y2="{{ rhythm_peak_marker.top_line_y }}" stroke="var(--dna-signal)" stroke-width="0.8" opacity="0.8"/>
  <line x1="{{ rhythm_peak_marker.x }}" y1="{{ rhythm_peak_marker.left_tick_y1 }}" x2="{{ rhythm_peak_marker.x }}" y2="{{ rhythm_peak_marker.left_tick_y2 }}" stroke="var(--dna-signal)" stroke-width="0.6" opacity="0.6"/>
  <line x1="{{ rhythm_peak_marker.right_tick_x }}" y1="{{ rhythm_peak_marker.right_tick_y1 }}" x2="{{ rhythm_peak_marker.right_tick_x }}" y2="{{ rhythm_peak_marker.right_tick_y2 }}" stroke="var(--dna-signal)" stroke-width="0.6" opacity="0.6"/>
  <text class="m" font-size="5" x="{{ rhythm_peak_marker.label_x }}" y="{{ rhythm_peak_marker.label_y }}" text-anchor="middle" fill="var(--dna-signal)" opacity="0.7" letter-spacing="0.08em">{{ rhythm_peak_label }}</text>
{% endif %}
  {# Time axis labels at strip bottom #}
  <text class="m ink3" font-size="5.5" x="{{ rhythm_strip_geom.time_label_x }}" y="{{ rhythm_strip_geom.time_label_y }}" letter-spacing="0.06em">{{ rhythm_label_left }}</text>
  <text class="m ink3" font-size="5.5" x="{{ rhythm_axis_w }}" y="{{ rhythm_strip_geom.time_label_y }}" text-anchor="end" letter-spacing="0.06em">{{ rhythm_label_right }}</text>
  {# Density axis hint — rotated -90° at zone left edge #}
  <text class="m ink3" font-size="4.5" x="{{ rhythm_strip_geom.density_x }}" y="{{ rhythm_strip_geom.density_y }}" text-anchor="end" letter-spacing="0.04em" transform="{{ rhythm_strip_geom.density_transform }}">density</text>
</g>

{# Vertical divider between RHYTHM and STATUS #}
<line x1="{{ rhythm_strip_geom.status_divider_x }}" y1="{{ rhythm_strip_geom.divider_y1 }}" x2="{{ rhythm_strip_geom.status_divider_x }}" y2="{{ rhythm_strip_geom.divider_y2 }}" stroke="var(--dna-border)" stroke-width="0.5"/>

{# ═══ ZONE 4: STATUS (522-600px) ═══ #}
<g transform="translate({{ rhythm_strip_geom.status_x }}, {{ rhythm_strip_geom.status_y }})" data-hw-zone="status">
  <circle cx="{{ rhythm_strip_geom.status_dot_cx }}" cy="{{ rhythm_strip_geom.status_dot_cy }}" r="{{ rhythm_strip_geom.status_dot_r }}" fill="var({{ status_color_var }})" opacity="0.85" data-hw-status="{{ status_severity }}"/>
  <text class="m" font-size="9" font-weight="700" x="{{ rhythm_strip_geom.status_word_x }}" y="{{ rhythm_strip_geom.status_word_y }}" fill="var({{ status_color_var }})" letter-spacing="0.1em">{{ status_word }}</text>
  <text class="m ink3" font-size="7.5" y="{{ rhythm_strip_geom.status_errors_y }}">{{ n_errors }} err</text>
  <text class="m ink3" font-size="5.5" font-weight="700" letter-spacing="0.15em" y="{{ rhythm_strip_geom.status_dominant_label_y }}">DOMINANT</text>
{% if dominant_label %}
  <text class="m" font-size="9" font-weight="700" y="{{ rhythm_strip_geom.status_dominant_y }}" fill="var(--dna-tool-{{ dominant_tool_class }})" letter-spacing="0.08em">{{ dominant_label }}</text>
  <text class="m ink3" font-size="7" y="{{ rhythm_strip_geom.status_pct_y }}">{{ dominant_pct_time }}% time</text>
{% endif %}
</g>

{# Edge finish #}
<rect x="{{ rhythm_strip_geom.edge_x }}" y="{{ rhythm_strip_geom.edge_top_y }}" width="{{ rhythm_strip_inner_w }}" height="{{ rhythm_strip_geom.edge_h }}" fill="var(--dna-ink-primary)" opacity="0.06"/>
<rect x="{{ rhythm_strip_geom.edge_x }}" y="{{ rhythm_strip_bottom_highlight_y }}" width="{{ rhythm_strip_inner_w }}" height="{{ rhythm_strip_geom.edge_h }}" fill="var(--dna-surface-deep)" opacity="0.45"/>
{# Card border #}
<rect x="{{ rhythm_strip_geom.border_x }}" y="{{ rhythm_strip_geom.border_y }}" width="{{ rhythm_strip_inner_w }}" height="{{ rhythm_strip_inner_h }}" rx="{{ rhythm_strip_geom.border_rx }}" fill="none" stroke="var(--dna-border)" stroke-width="1"/>
{% endblock %}
