{#- Career-at-a-glance timeline, driven by `criteria.career` in data/criteria.yaml.
    Bands tile the full width left→right. Each band's share of the width is its
    `weight` (defaults to its duration in years), so you can stretch or compress a
    phase without touching the SVG. Ticks sit at band starts; milestone dots are
    interpolated by year within their band, so they always line up. -#}
{%- set car = criteria.career -%}
{%- set X0 = 15 -%}{%- set X1 = 705 -%}{%- set W = X1 - X0 -%}
{%- set gap = car.band_gap | default(4) -%}
{%- set fills = car.fills or ['#dbe7f4', '#aac6e4', '#4a86c8', '#0f3f73'] -%}
{%- set strokes = car.strokes or ['#aac6e4', '#8fb2d8', '', ''] -%}
{#- total weight, then per-band pixel segments -#}
{%- set tn = namespace(t=0) -%}
{%- for b in car.bands -%}{%- set tn.t = tn.t + (b.weight | default(b.end - b.start)) -%}{%- endfor -%}
{%- set total = tn.t or 1 -%}
{%- set ns = namespace(cum=0, segs=[]) -%}
{%- for b in car.bands -%}
  {%- set s0 = X0 + (ns.cum / total) * W -%}
  {%- set ns.cum = ns.cum + (b.weight | default(b.end - b.start)) -%}
  {%- set s1 = X0 + (ns.cum / total) * W -%}
  {%- set _ = ns.segs.append({'b': b, 's0': s0, 's1': s1}) -%}
{%- endfor -%}
{%- macro px(year) -%}
  {%- for s in ns.segs if year >= s.b.start and year <= s.b.end -%}
    {%- if loop.first -%}{{ (s.s0 + (year - s.b.start) / ((s.b.end - s.b.start) or 1) * (s.s1 - s.s0)) | round(1) }}{%- endif -%}
  {%- else -%}{{ X1 }}{%- endfor -%}
{%- endmacro -%}
<p class="figcap">{{ car.caption }}</p>
<svg viewBox="0 0 720 118" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="{{ car.aria or car.caption }}">
  <!-- milestone flags (right side) -->
  {%- for m in car.milestones %}
  {%- set cx = px(m.year) %}
  {%- set ty = 16 + loop.index0 * 18 %}
  <text x="{{ m.text_x or X1 }}" y="{{ ty }}" text-anchor="end" font-size="9.5" fill="#555b63">{{ m.year }} — <tspan font-weight="700" fill="{{ m.accent or '#0f3f73' }}">{{ m.label }}</tspan></text>
  <line x1="{{ cx }}" y1="{{ ty + 4 }}" x2="{{ cx }}" y2="46" stroke="#b9cde6" stroke-width="1.2"/>
  <circle cx="{{ cx }}" cy="48" r="3" fill="{{ m.accent or '#0f3f73' }}"><title>{{ m.title or m.label }}</title></circle>
  {%- endfor %}

  <!-- timeline bands -->
  {%- for s in ns.segs %}
  {%- set st = strokes[loop.index0] if loop.index0 < strokes|length else '' %}
  <rect x="{{ (s.s0 + gap) | round(1) }}" y="52" width="{{ (s.s1 - s.s0 - 2 * gap) | round(1) }}" height="16" rx="4" fill="{{ fills[loop.index0 % fills|length] }}"{% if st %} stroke="{{ st }}" stroke-width="1"{% endif %}><title>{{ s.b.title }}</title></rect>
  {%- endfor %}

  <!-- year ticks -->
  {%- for s in ns.segs %}
  <text x="{{ s.s0 | round(1) }}" y="80" font-size="8.5" fill="#8a9099">{{ s.b.tick | default(s.b.start) }}</text>
  {%- endfor %}
  <text x="{{ X1 }}" y="80" text-anchor="end" font-size="8.5" fill="#8a9099">{{ car.end_label or 'now' }}</text>

  <!-- role labels -->
  {%- for s in ns.segs %}
  {%- set b = s.b %}
  {%- set anchor = b.anchor or 'middle' %}
  {%- set lx = X1 if anchor == 'end' else ((s.s0 + s.s1) / 2) | round(1) %}
  {#- labels alternate top/bottom row by position so neighbours never collide;
      override per band with an explicit label_dy in the YAML -#}
  {%- set ly = 96 + (b.label_dy | default(14 if loop.index0 % 2 else 0)) %}
  {%- set fill = b.role_fill or ('#1c1f23' if b.role_strong else '#555b63') %}
  <text x="{{ lx }}" y="{{ ly }}" text-anchor="{{ anchor }}" font-size="9.5" fill="{{ fill }}"{% if b.role_strong %} font-weight="700"{% endif %}>{{ b.label }}</text>
  {%- endfor %}
</svg>