{# Pre-trade traffic-light verdict header for /sim result panels.
   CSS dots instead of emoji circles — Linux without a color-emoji font
   renders 🟢🟡🔴 monochrome, making the verdict unreadable. #}
{% if signal %}
<div class="traffic-light traffic-light--{{ signal.color }}">
  <span class="tl-dot tl-dot--{{ signal.color }}" aria-hidden="true"></span>
  <span class="sr-only">
    {%- if signal.color == 'green' -%}OK
    {%- elif signal.color == 'yellow' -%}Caution
    {%- else -%}Stop
    {%- endif -%}:
  </span>
  <span class="explanation">{{ signal.explanation }}</span>
  {% if signal.suggestion %}
    <div class="suggestion">{{ signal.suggestion }}</div>
  {% endif %}
  {% if signal.lot_method_recommended %}
    <div class="muted">Lot method recommended: {{ signal.lot_method_recommended }}</div>
  {% endif %}
</div>
{% endif %}