{# Ribbon scroll-item layout (chrome / cellular / default paradigms).

   Selected by ParadigmMarqueeConfig.item_layout == "ribbon". Each item is an
   inline label+value at ONE absolute x (resolver-computed from font metrics),
   with separators between. Stateful (activity) cells carry data-hw-status so
   the state-signal-cascade binds their value tspan to var(--hw-state-value).
   Renders Set-A and Set-B (Set-B offset by scroll_distance for the seamless
   loop). Consumes parent-scoped vars (baseline_y, ff, fs, fw, ls, sc, sg, ssz,
   sep_rect_y, tfid, sd). #}
    <g data-hw-zone="set-a">
{% for entry in scroll_items %}
{% if entry.type == 'text' %}
{% set it = entry.item %}
      <text x="{{ entry.x }}" y="{{ baseline_y }}" dominant-baseline="central"
            font-family="{{ ff }}" font-size="{{ fs }}" letter-spacing="{{ ls }}"{% if it.font_weight %} font-weight="{{ it.font_weight }}"{% elif fw %} font-weight="{{ fw }}"{% endif %}{% if it.data_hw_status %} data-hw-status="{{ it.data_hw_status }}"{% endif %}>{% if it.label %}<tspan font-size="{{ lfs }}"{% if it.label_color %} fill="{{ it.label_color }}"{% else %} fill="url(#{{ uid }}-{{ tfid }})"{% endif %}>{{ it.label }}</tspan><tspan dx="{{ label_value_gap }}"{% if it.value_color %} fill="{{ it.value_color }}"{% else %} fill="url(#{{ uid }}-{{ tfid }})"{% endif %}>{{ it.value }}</tspan>{% else %}<tspan{% if it.value_color %} fill="{{ it.value_color }}"{% else %} fill="url(#{{ uid }}-{{ tfid }})"{% endif %}>{{ it.value }}</tspan>{% endif %}{% if it.window %}<tspan dx="{{ window_gap }}" font-size="{{ lfs }}" fill="var(--dna-ink-muted)">{{ it.window }}</tspan>{% endif %}</text>
{% elif entry.type == 'separator-glyph' %}
      <text x="{{ entry.x }}" y="{{ baseline_y }}" dominant-baseline="central"
            font-family="{{ ff }}" font-size="{{ lfs }}" fill="{{ sc }}">{{ sg }}</text>
{% elif entry.type == 'separator-rect' %}
      <rect x="{{ entry.x }}" y="{{ sep_rect_y }}" width="{{ ssz }}" height="{{ ssz }}"
            fill="{{ sc }}" shape-rendering="crispEdges"/>
{% endif %}
{% endfor %}
    </g>
    <g data-hw-zone="set-b" transform="translate({{ sd }}, 0)" aria-hidden="true">
{% for entry in scroll_items %}
{% if entry.type == 'text' %}
{% set it = entry.item %}
{% set vcb = it.value_color_set_b | default(it.value_color) %}
{% set lcb = it.label_color_set_b | default(it.label_color) %}
      <text x="{{ entry.x }}" y="{{ baseline_y }}" dominant-baseline="central"
            font-family="{{ ff }}" font-size="{{ fs }}" letter-spacing="{{ ls }}"{% if it.font_weight %} font-weight="{{ it.font_weight }}"{% elif fw %} font-weight="{{ fw }}"{% endif %}{% if it.data_hw_status %} data-hw-status="{{ it.data_hw_status }}"{% endif %}>{% if it.label %}<tspan font-size="{{ lfs }}"{% if lcb %} fill="{{ lcb }}"{% else %} fill="url(#{{ uid }}-{{ tfid }})"{% endif %}>{{ it.label }}</tspan><tspan dx="{{ label_value_gap }}"{% if vcb %} fill="{{ vcb }}"{% else %} fill="url(#{{ uid }}-{{ tfid }})"{% endif %}>{{ it.value }}</tspan>{% else %}<tspan{% if vcb %} fill="{{ vcb }}"{% else %} fill="url(#{{ uid }}-{{ tfid }})"{% endif %}>{{ it.value }}</tspan>{% endif %}{% if it.window %}<tspan dx="{{ window_gap }}" font-size="{{ lfs }}" fill="var(--dna-ink-muted)">{{ it.window }}</tspan>{% endif %}</text>
{% elif entry.type == 'separator-glyph' %}
      <text x="{{ entry.x }}" y="{{ baseline_y }}" dominant-baseline="central"
            font-family="{{ ff }}" font-size="{{ lfs }}" fill="{{ sc }}">{{ sg }}</text>
{% elif entry.type == 'separator-rect' %}
      <rect x="{{ entry.x }}" y="{{ sep_rect_y }}" width="{{ ssz }}" height="{{ ssz }}"
            fill="{{ sc }}" shape-rendering="crispEdges"/>
{% endif %}
{% endfor %}
    </g>
