<section data-block="noir:case_file" class="py-10">
  <div class="mx-auto max-w-3xl px-4">
    <article class="noir-file noir-grain p-6 md:p-8">
      <div class="flex flex-wrap items-start justify-between gap-4">
        <div class="min-w-0">
          {% if caseNumber %}<div class="noir-label" style="color:hsl(var(--primary));">Case No. {{ caseNumber }}</div>{% endif %}
          {% if subject %}<h3 class="noir-heading mt-2 text-2xl md:text-3xl" style="color:hsl(var(--foreground));">{{ subject }}</h3>{% endif %}
        </div>
        {% if status == "cold" %}<span class="noir-stamp" style="color:hsl(var(--muted-foreground));">Cold</span>{% elif status == "closed" %}<span class="noir-stamp" style="color:hsl(var(--destructive));">Closed</span>{% elif status == "active" %}<span class="noir-stamp" style="color:hsl(var(--primary));">Active</span>{% else %}<span class="noir-stamp" style="color:hsl(var(--primary));">Open</span>{% endif %}
      </div>
      {% if summary %}<p class="noir-body mt-4 leading-relaxed" style="color:hsl(var(--muted-foreground));">{{ summary }}</p>{% endif %}
      {% if fields %}
      <dl class="mt-6 border-t border-[hsl(var(--border))]">
        {% for row in fields %}
        <div class="flex items-baseline justify-between gap-4 border-b border-[hsl(var(--border))] py-2">
          <dt class="noir-label" style="color:hsl(var(--muted-foreground));">{{ row.label }}</dt>
          <dd class="noir-mono text-right text-sm" style="color:hsl(var(--foreground));">{{ row.value }}</dd>
        </div>
        {% endfor %}
      </dl>
      {% endif %}
    </article>
  </div>
</section>
