{% if qcp_banner %}
<div class="card" style="{% if qcp_banner.is_behind %}background:#fdedec; border:1px solid #f5b7b1;{% else %}background:#eafaf1; border:1px solid #a9dfbf;{% endif %} margin-bottom:16px;">
  {% if qcp_banner.expected_page <= 1 %}
    <div style="font-size:14px;">📖 Just getting started — nothing due yet. Dive in whenever you're ready!</div>
  {% else %}
    <div style="font-size:14px;">
      📖 According to your QCP plan, you should be at <strong>Page {{ qcp_banner.expected_page }}</strong> by now.
    </div>
    {% if qcp_banner.is_behind %}
      <div style="font-size:13px; color:#922b21; margin-top:4px;">
        You're currently <strong>{{ -qcp_banner.ahead_behind }} page(s) behind</strong>. No problem — you can
        <a href="{{ url_for('qcp_tracker') }}">go to the Tracker</a> to log or correct any day, including past ones.
      </div>
    {% elif qcp_banner.ahead_behind > 0 %}
      <div style="font-size:13px; color:#155d38; margin-top:4px;">
        You're <strong>{{ qcp_banner.ahead_behind }} page(s) ahead</strong> — keep it up!
      </div>
    {% endif %}
  {% endif %}
</div>
{% endif %}