{# Hourly-cost panel fragment loaded by HTMX after a daily-bar click.
   The chart is initialised by the bootstrap script in base.html — no
   executable JS lives in this fragment. #}
<div>
    <h3 style="margin-bottom:0.4rem;">Hourly cost — {{ day }}</h3>
    {% if has_data %}
    <p style="color:#888;font-size:0.82rem;margin:0 0 0.5rem;">
        {{ total_cost }} on {{ day }}.
    </p>
    <div id="hourly-cost-chart-{{ day }}"
         class="cost-chart"
         style="width:100%;min-height:320px;"
         data-figure-id="hourly-cost-chart-data-{{ day }}"
         data-height="320"
         data-on-click="portfolio-hour"
         data-day="{{ day }}"></div>
    <script type="application/json" id="hourly-cost-chart-data-{{ day }}">{{ chart_json|safe }}</script>
    {% else %}
    <p>No cost recorded for {{ day }}.</p>
    {% endif %}
</div>