{# 05 / RECOMMENDATION + COST -- merges the v0.1.0 verdict block and
   cost_breakdown.html into one section so users see the
   "what library / what proxy / what does it cost" picture in one
   pass. #}
<section class="block">
  <div class="block-num">05 / RECOMMENDATION + COST</div>
  <h3>Recommended approach</h3>
  {% set syn = report.synthesis_result %}
  {% set rec = (syn.recommendation if syn else None) %}
  {% if rec and rec.primary_library and rec.primary_library != 'unknown' %}
  <div class="verdict"
       style="margin-bottom:18px;padding:20px 22px;border:1px solid var(--line);border-radius:4px;background:var(--bg-card);">
    {% if syn.verdict %}
    <h4 style="font-family:'Fraunces',serif;font-weight:500;font-size:20px;margin:0 0 14px;">{{ syn.verdict }}</h4>
    {% endif %}
    <div class="conf-grid"
         style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;">
      <div class="conf">
        <div class="conf-label" style="font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);">Tooling</div>
        <div class="conf-value" style="font-family:'Fraunces',serif;font-size:18px;color:var(--ink);margin:4px 0;">{{ rec.primary_library }}</div>
        <div class="conf-bar" style="height:4px;background:var(--bg-deep);border-radius:2px;overflow:hidden;"><span style="display:block;height:100%;background:var(--accent);width: {{ rec.confidence | format_percent }};"></span></div>
        <div class="conf-pct" style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);margin-top:4px;">{{ rec.confidence | format_percent }} confidence</div>
      </div>
      <div class="conf">
        <div class="conf-label" style="font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);">Proxy type</div>
        <div class="conf-value" style="font-family:'Fraunces',serif;font-size:18px;color:var(--ink);margin:4px 0;">{{ rec.proxy_type }}</div>
        <div class="conf-bar" style="height:4px;background:var(--bg-deep);border-radius:2px;overflow:hidden;"><span style="display:block;height:100%;background:var(--accent);width: {{ rec.proxy_confidence | format_percent }};"></span></div>
        <div class="conf-pct" style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);margin-top:4px;">{{ rec.proxy_confidence | format_percent }} confidence</div>
      </div>
      <div class="conf">
        <div class="conf-label" style="font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);">Cost band</div>
        <div class="conf-value" style="font-family:'Fraunces',serif;font-size:18px;color:var(--ink);margin:4px 0;">{{ rec.cost_band_low_usd | format_money }} &ndash; {{ rec.cost_band_high_usd | format_money }}</div>
        <div class="conf-pct" style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-3);margin-top:4px;">per {{ rec.cost_unit_count }} req &middot; range</div>
      </div>
    </div>
    {% if rec.rationale %}
    {# T47.3: rationale uses ``var(--ink)`` (the high-contrast token), not
       ``var(--ink-2)``. The card background is ``var(--bg-card)`` -- in
       dark mode that's ``#161618`` and ``var(--ink-2)`` (#b8b6b1) was
       readable in isolation but failed WCAG AA against the rest of the
       card's typography stack (heading + meta both use ``var(--ink)``),
       creating a perceived dim/illegible patch. ``var(--ink)`` is
       ``#e6e4e0`` in dark mode / ``#18181B`` in light mode -- contrast
       ratios 13:1 dark, 17:1 light against ``--bg-card``. #}
    <p style="margin-top:14px;color:var(--ink);font-size:14px;line-height:1.5;">{{ rec.rationale }}</p>
    {% endif %}
  </div>
  {% else %}
  <p class="lede">No recommendation was synthesised on this scan. Inspect sections 01 and 04 for raw signals.</p>
  {# T18: combined synthesis (recommendation + verdict + starter_code) #}
  {# failed -- offer a free per-section retry. Hides automatically once #}
  {# the section renders successfully because the outer `if rec` flips. #}
  {% if synthesis_section_failed(report, 'synthesis') %}
    {% with section_name='synthesis', section_label='this section' %}
      {% include 'partials/retry_section.html' %}
    {% endwith %}
  {% endif %}
  {% endif %}

  {% include 'partials/cost_breakdown.html' %}
</section>