{#- Five-year research-program roadmap, driven by `criteria.program` in
    data/criteria.yaml. One track per research stream; each track tiles
    `total_years` left→right in `phases`, whose widths are their `years` span,
    so you can rebalance a stream without touching the SVG. The year axis,
    gridlines, row positions and canvas height are all computed. The chip row
    underneath lists the target outcomes; chip widths follow their text. -#}
{%- set pg = criteria.program -%}
{%- set LX = 15 -%}{%- set LABEL_W = 167 -%}
{%- set X0 = LX + LABEL_W + 12 -%}{%- set X1 = 706 -%}{%- set W = X1 - X0 -%}
{%- set total = pg.total_years | default(5) -%}
{%- set gap = pg.phase_gap | default(3) -%}
{%- set fills = pg.fills or ['#dbe7f4', '#7ba3d0', '#0f3f73'] -%}
{%- set text_fills = pg.text_fills or ['#1c1f23', '#ffffff', '#ffffff'] -%}
{%- set TOP = 22 -%}{%- set ROW_H = 46 -%}{%- set BAR_H = 22 -%}{%- set BAR_DY = 6 -%}
{%- set nrows = pg.streams | length -%}
{%- set tracks_bottom = TOP + (nrows - 1) * ROW_H + BAR_DY + BAR_H -%}
{%- set chips_y = tracks_bottom + 18 -%}
{%- set CHIP_H = 17 -%}
{%- set height = chips_y + CHIP_H + 6 -%}
{%- macro edge(year) -%}{{ (X0 + (year / total) * W) | round(1) }}{%- endmacro -%}
<p class="figcap">{{ pg.caption }}</p>
<svg viewBox="0 0 720 {{ height | round(1) }}" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="{{ pg.aria or pg.caption }}">
  <!-- year axis -->
  <g font-size="8.5" fill="#8a9099" text-anchor="middle">
    {%- for y in range(1, total + 1) %}
    <text x="{{ (X0 + (y - 0.5) / total * W) | round(1) }}" y="12">{{ ('Year ' ~ y) if y == 1 else y }}</text>
    {%- endfor %}
  </g>
  <!-- year gridlines behind the tracks -->
  <g stroke="#e6edf7" stroke-width="1">
    {%- for y in range(1, total) %}
    <line x1="{{ edge(y) }}" y1="{{ TOP }}" x2="{{ edge(y) }}" y2="{{ tracks_bottom }}"/>
    {%- endfor %}
  </g>

  {%- for st in pg.streams %}
  {%- set row_y = TOP + loop.index0 * ROW_H %}
  {%- set bar_y = row_y + BAR_DY %}

  <!-- stream label -->
  <text x="{{ LX }}" y="{{ row_y + 15 }}" font-size="9.5" font-weight="700" fill="#1c1f23">{{ st.name }}</text>
  <text x="{{ LX }}" y="{{ row_y + 26 }}" font-size="8.2" fill="#8a9099">{{ st.partners }}</text>

  <!-- phase segments -->
  {%- set ns = namespace(cum=0) %}
  {%- for p in st.phases %}
  {%- set s0 = X0 + (ns.cum / total) * W %}
  {%- set ns.cum = ns.cum + p.years %}
  {%- set s1 = X0 + (ns.cum / total) * W %}
  {%- set w = (s1 - s0) - (0 if loop.last else gap) %}
  {%- set fi = loop.index0 % (fills | length) %}
  <rect x="{{ s0 | round(1) }}" y="{{ bar_y }}" width="{{ w | round(1) }}" height="{{ BAR_H }}" rx="4"
        fill="{{ p.fill or fills[fi] }}"{% if loop.first %} stroke="#aac6e4" stroke-width="1"{% endif %}><title>{{ p.title or p.label }}</title></rect>
  <text x="{{ ((s0 + s0 + w) / 2) | round(1) }}" y="{{ bar_y + 14.5 }}" text-anchor="middle" font-size="8.6"
        fill="{{ p.text_fill or text_fills[fi] }}">{{ p.label }}</text>
  {%- endfor %}
  {%- endfor %}

  <!-- target outcomes -->
  {%- if pg.outcomes %}
  <text x="{{ LX }}" y="{{ chips_y + 12 }}" font-size="7.6" font-weight="700" fill="#8a9099" letter-spacing="0.7">{{ pg.outcomes_label | default('BY YEAR 5') }}</text>
  {%- set ns3 = namespace(x=LX + 62) %}
  {%- for o in pg.outcomes %}
  {%- set cw = (o | length) * 4.75 + 18 %}
  <rect x="{{ ns3.x | round(1) }}" y="{{ chips_y }}" width="{{ cw | round(1) }}" height="{{ CHIP_H }}" rx="8.5"
        fill="#f2f6fb" stroke="#c6d4e4" stroke-width="0.8"/>
  <text x="{{ (ns3.x + cw / 2) | round(1) }}" y="{{ chips_y + 11.5 }}" text-anchor="middle" font-size="8.4" fill="#0f3f73">{{ o }}</text>
  {%- set ns3.x = ns3.x + cw + 7 %}
  {%- endfor %}
  {%- endif %}
</svg>