{# Year-end tax projection card. Shows placeholder if tax config absent. #}
<div class="kpi">
  {% if has_tax_config and projection %}
    <div class="flex items-baseline justify-between">
      <div class="label-uc">Year-end tax projection</div>
      <div class="text-[11px] text-label-3">Dec 31, {{ projection.year }}</div>
    </div>
    <div class="num text-[22px] font-bold mt-2">${{ "{:,.0f}".format(projection.total_tax) }}</div>
    <div class="text-[11px] text-label-2 mt-1">
      Federal <span class="num text-label-1">${{ "{:,.0f}".format(projection.federal_tax) }}</span>
      <span class="text-label-3 mx-1">·</span>
      State <span class="num text-label-1">${{ "{:,.0f}".format(projection.state_tax) }}</span>
    </div>
    {% if projection.bracket_warnings %}
    <div class="mt-2 text-[11px] text-warn">
      {% for w in projection.bracket_warnings %}<div>{{ w }}</div>{% endfor %}
    </div>
    {% endif %}
    <div class="text-[11px] text-label-3 mt-2">Estimate only — single marginal rate.</div>
  {% else %}
    <div class="label-uc">Year-end tax projection</div>
    <div class="text-[12px] text-label-2 mt-2 leading-[1.5]">
      Tell net-alpha your filing status and tax rates and it'll project this year's tax bill from your realized gains. See the
      <a href="/tax?view=projection" class="text-indigo no-underline hover:underline">Tax page</a>
      for the one-time setup snippet.
    </div>
  {% endif %}
</div>