<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Comparison · {{ run_ids_label }}</title>
<style>
  /* ── Page geometry ─────────────────────────────────────────────── */
  @page {
    size: A4 landscape;
    /* Top margin holds the AMX logo running header. 18mm is enough
       for the 12mm-tall mark plus 3mm breathing room above and
       below — the page content starts cleanly below it so a table
       never collides with the logo. */
    margin: 18mm 14mm 16mm 14mm;
    background: rgb(15, 15, 14);
    {% if logo_data_url %}
    @top-right {
      /* ``content: element()`` pulls the .running-logo block in
         from the document body. Going through a running element
         (instead of ``content: url()`` directly) lets us pin the
         image to a real CSS box size — without it WeasyPrint
         renders the favicon at its 256×256px native size and
         clips the right edge against the page trim. */
      content: element(amxlogo);
      vertical-align: top;
    }
    {% endif %}
    @bottom-right {
      content: counter(page) " / " counter(pages);
      font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
      font-size: 8pt;
      color: rgb(120, 113, 108);
    }
    @bottom-left {
      content: "AMX run comparison · {{ generated_at }}";
      font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
      font-size: 8pt;
      color: rgb(120, 113, 108);
    }
  }

  /* Hidden source for the running-header logo. ``position: running()``
     yanks this out of the normal flow on every page and parks it in
     the @top-right margin box. The wrapping div fixes the box size
     so the favicon scales cleanly instead of being drawn at 256px
     native (which would clip past the page edge). */
  .running-logo {
    position: running(amxlogo);
    width: 12mm;
    height: 12mm;
    line-height: 0;
    margin-top: 3mm;
  }
  .running-logo img {
    width: 12mm;
    height: 12mm;
    display: block;
  }

  /* ── Density (scales with run count) ───────────────────────────── */
  :root {
    --base-fs: {{ base_font_pt }}pt;
    --cell-fs: {{ cell_font_pt }}pt;
    --bg: rgb(15, 15, 14);
    --surface: rgb(26, 25, 24);
    --surface-subtle: rgb(19, 17, 15);
    --surface-raised: rgb(31, 29, 27);
    --border: rgb(42, 39, 35);
    --border-strong: rgb(61, 57, 52);
    --ink: rgb(245, 244, 242);
    --ink-muted: rgb(168, 162, 158);
    --ink-dim: rgb(120, 113, 108);
    --accent: rgb(251, 146, 60);
    --accent-soft: rgba(251, 146, 60, 0.18);
    --accent-soft-2: rgba(251, 146, 60, 0.10);
    --accent-ring: rgba(251, 146, 60, 0.55);
    --positive: rgb(74, 222, 128);
    --positive-soft: rgba(74, 222, 128, 0.16);
    --warning: rgb(234, 179, 8);
    --warning-soft: rgba(234, 179, 8, 0.16);
    --critical: rgb(248, 113, 113);
    --critical-soft: rgba(248, 113, 113, 0.16);
    --info: rgb(34, 211, 238);
    --info-soft: rgba(34, 211, 238, 0.16);
  }

  html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: var(--base-fs);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  }

  .mono {
    font-family: "Menlo", "Consolas", "Courier New", monospace;
  }

  /* ── Header ────────────────────────────────────────────────────── */
  header.report-header {
    margin-bottom: 12pt;
  }
  header.report-header h1 {
    margin: 0;
    font-size: 18pt;
    font-weight: 600;
    letter-spacing: -0.3pt;
    color: var(--ink);
  }
  header.report-header .runids {
    margin-top: 4pt;
    font-size: 10pt;
    color: var(--ink-muted);
    font-family: "Menlo", "Consolas", "Courier New", monospace;
  }
  header.report-header .meta {
    margin-top: 2pt;
    font-size: 8.5pt;
    color: var(--ink-dim);
  }

  .missing-banner {
    background: var(--critical-soft);
    border: 0.6pt solid rgba(248, 113, 113, 0.4);
    color: var(--critical);
    border-radius: 6pt;
    padding: 6pt 10pt;
    font-size: 9pt;
    margin: 6pt 0 10pt 0;
  }

  /* ── Card (one per section) ───────────────────────────────────── */
  section.card {
    background: var(--surface);
    border: 0.6pt solid var(--border);
    border-radius: 10pt;
    margin-bottom: 12pt;
    overflow: hidden;
    break-inside: avoid-page;
  }
  .card-header {
    padding: 12pt 16pt 10pt 16pt;
    border-bottom: 0.6pt solid var(--border);
  }
  .card-title {
    margin: 0;
    font-size: 12pt;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.1pt;
  }
  .card-desc {
    margin: 3pt 0 0 0;
    font-size: 9pt;
    color: var(--ink-muted);
  }

  /* ── Tables ───────────────────────────────────────────────────── */
  table.report {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--cell-fs);
  }
  table.report thead th {
    background: var(--surface-subtle);
    color: var(--ink-dim);
    font-size: calc(var(--cell-fs) - 1.5pt);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6pt;
    padding: 7pt 12pt;
    text-align: left;
    border-bottom: 0.6pt solid var(--border);
  }
  table.report tbody td {
    padding: 8pt 12pt;
    border-top: 0.4pt solid var(--border);
    color: var(--ink);
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  table.report tbody tr:first-child td { border-top: none; }
  table.report td.metric-name {
    color: var(--ink);
    font-weight: 500;
  }
  table.report td.num,
  table.report th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: "Menlo", "Consolas", "Courier New", monospace;
  }
  table.report td.runid {
    font-family: "Menlo", "Consolas", "Courier New", monospace;
    color: var(--ink-muted);
  }

  /* Winner cell — amber rim + soft amber wash, mirroring the
     ``ring-1 ring-inset ring-accent/50 bg-accent-soft/20`` look in
     the Studio modal. ``inset`` shadow keeps cell padding intact. */
  table.report td.winner {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 0.8pt var(--accent-ring);
    color: var(--ink);
  }

  /* ── Status pill ───────────────────────────────────────────────── */
  .pill {
    display: inline-block;
    padding: 1.5pt 8pt;
    border-radius: 999pt;
    font-size: calc(var(--cell-fs) - 1pt);
    font-weight: 600;
    letter-spacing: 0.2pt;
    line-height: 1.2;
  }
  .pill.positive { background: var(--positive-soft); color: var(--positive); }
  .pill.warning  { background: var(--warning-soft);  color: var(--warning); }
  .pill.critical { background: var(--critical-soft); color: var(--critical); }
  .pill.accent   { background: var(--accent-soft);   color: var(--accent); }
  .pill.neutral  { background: rgba(120, 113, 108, 0.20); color: var(--ink-muted); }

  /* ── Confidence + logprob badges (per-column section) ─────────── */
  .badge {
    display: inline-block;
    padding: 1pt 6pt;
    border-radius: 4pt;
    font-size: calc(var(--cell-fs) - 1.5pt);
    font-weight: 600;
    margin-right: 4pt;
    letter-spacing: 0.1pt;
  }
  .badge.high { background: var(--positive-soft); color: var(--positive); }
  .badge.medium, .badge.med { background: var(--warning-soft); color: var(--warning); }
  .badge.low { background: var(--critical-soft); color: var(--critical); }

  .meta-line {
    margin-top: 4pt;
    color: var(--ink-dim);
    font-size: calc(var(--cell-fs) - 1.5pt);
  }
  .meta-line .mono { color: var(--ink-muted); }

  .desc {
    color: var(--ink);
    font-size: var(--cell-fs);
    line-height: 1.4;
    word-break: break-word;
  }

  .empty {
    color: var(--ink-dim);
    font-style: normal;
  }

  /* ── Column widths (driven by run count) ───────────────────────── */
  table.percol col.asset-col { width: {{ asset_col_pct }}%; }
  table.percol col.run-col   { width: {{ run_col_pct }}%; }
  table.aggregates col.metric-col { width: 26%; }
  table.aggregates col.run-col    { width: {{ aggregate_run_col_pct }}%; }

  table.summary th, table.summary td { font-size: var(--cell-fs); }

  hr.sep {
    border: none;
    border-top: 0.4pt solid var(--border);
    margin: 0;
  }
</style>
</head>
<body>

{% if logo_data_url %}
<div class="running-logo" aria-hidden="true">
  <img src="{{ logo_data_url|safe }}" alt="">
</div>
{% endif %}

<header class="report-header">
  <h1>Comparison · {{ runs|length }} run{% if runs|length != 1 %}s{% endif %}</h1>
  <div class="runids">Run ids: {{ run_ids_label }}</div>
  <div class="meta">Generated {{ generated_at }} · AMX {{ amx_version }}</div>
</header>

{% if missing %}
<div class="missing-banner">
  {{ missing|length }} run id{{ "s" if missing|length != 1 else "" }} not found in history:
  {% for m in missing %}#{{ m }}{% if not loop.last %}, {% endif %}{% endfor %}
</div>
{% endif %}

{# ── Summary card ──────────────────────────────────────────────── #}
<section class="card">
  <div class="card-header">
    <h2 class="card-title">Summary</h2>
    <p class="card-desc">One row per run.</p>
  </div>
  <table class="report summary">
    <thead>
      <tr>
        <th>Run</th>
        <th>Command</th>
        <th>LLM</th>
        <th>Doc / Code</th>
        <th class="num">Duration</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {% for r in summary_rows %}
      <tr>
        <td class="runid">#{{ r.run_id }}</td>
        <td class="mono">{{ r.command or "—" }}</td>
        <td class="mono">{{ r.llm_provider_model or r.llm_model or "—" }}</td>
        <td>
          {% set doc = r.doc_profile or "" %}
          {% set code = r.code_profile or "" %}
          {% if doc and code %}{{ doc }} / {{ code }}{% elif doc or code %}{{ doc or code }}{% else %}—{% endif %}
        </td>
        <td class="num">{% if r.duration_sec %}{{ "%.2f"|format(r.duration_sec) }}s{% else %}—{% endif %}</td>
        <td><span class="pill {{ r.status_class }}">{{ r.status_label }}</span></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</section>

{# ── Aggregates card ──────────────────────────────────────────── #}
{% if aggregate_rows %}
<section class="card">
  <div class="card-header">
    <h2 class="card-title">Aggregates</h2>
    <p class="card-desc">Per-run roll-ups (model time, tokens, cost, confidence band split, approval rate). Best value per row is highlighted.</p>
  </div>
  <table class="report aggregates">
    <colgroup>
      <col class="metric-col">
      {% for rid in run_ids %}<col class="run-col">{% endfor %}
    </colgroup>
    <thead>
      <tr>
        <th>Metric</th>
        {% for rid in run_ids %}<th class="num">#{{ rid }}</th>{% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for arow in aggregate_rows %}
      <tr>
        <td class="metric-name">{{ arow.label }}</td>
        {% for rid in run_ids %}
        {% set cell = arow.cells[rid] %}
        <td class="num{% if cell.is_winner %} winner{% endif %}">{{ cell.display }}</td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
</section>
{% endif %}

{# ── Per-column descriptions card ─────────────────────────────── #}
{% if percol_rows %}
<section class="card">
  <div class="card-header">
    <h2 class="card-title">Per-column descriptions</h2>
    <p class="card-desc">Each cell shows the chosen description for that run. The cell with the highest logprob across the row gets the winner highlight.</p>
  </div>
  <table class="report percol">
    <colgroup>
      <col class="asset-col">
      {% for rid in run_ids %}<col class="run-col">{% endfor %}
    </colgroup>
    <thead>
      <tr>
        <th>Asset</th>
        {% for rid in run_ids %}<th>#{{ rid }}</th>{% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for prow in percol_rows %}
      <tr>
        <td class="mono">{{ prow.label }}</td>
        {% for rid in run_ids %}
        {% set cell = prow.cells[rid] %}
        {% if cell %}
        <td class="{% if cell.is_winner %}winner{% endif %}">
          <div class="desc">{{ cell.description }}</div>
          <div class="meta-line">
            {% if cell.confidence %}<span class="badge {{ cell.confidence_class }}">{{ cell.confidence }}</span>{% endif %}
            {% if cell.logprob_display %}<span class="mono">logprob {{ cell.logprob_display }}</span>{% endif %}
            {% if cell.token_count %}<span class="mono"> · {{ cell.token_count }} tok</span>{% endif %}
          </div>
        </td>
        {% else %}
        <td class="empty">—</td>
        {% endif %}
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
</section>
{% endif %}

{% if not aggregate_rows and not percol_rows %}
<p class="empty">No aggregate metrics or per-column overlap to display for the selected runs.</p>
{% endif %}

{# ── Quality metrics card (Tier 0/1/2 academic metrics) ────────── #}
{% if quality_per_run %}
<section class="card quality">
  <div class="card-header">
    <h2 class="card-title">Quality metrics</h2>
    <p class="card-desc">
      Tier {{ quality_tier }} academic text-quality analysis.
      {% if quality_references_summary %}References: {{ quality_references_summary }}.{% endif %}
    </p>
  </div>
  <table class="report">
    <thead>
      <tr>
        <th>Run</th>
        <th class="num">Diversity (TTR)</th>
        <th class="num">Schema grounding</th>
        <th class="num">chrF</th>
        <th class="num">ROUGE-L</th>
        <th class="num">BERTScore</th>
        <th class="num">Embed. agree.</th>
        <th class="num">Judge win-rate</th>
      </tr>
    </thead>
    <tbody>
      {% for row in quality_per_run %}
      <tr>
        <td class="runid">#{{ row.run_id }}</td>
        <td class="num">{% if row.type_token_ratio is not none %}{{ "%.0f"|format(row.type_token_ratio * 100) }}%{% else %}—{% endif %}</td>
        <td class="num">{% if row.schema_grounding is not none %}{{ "%.0f"|format(row.schema_grounding * 100) }}%{% else %}—{% endif %}</td>
        <td class="num">{% if row.chrf is not none %}{{ "%.0f"|format(row.chrf * 100) }}%{% else %}—{% endif %}</td>
        <td class="num">{% if row.rouge_l is not none %}{{ "%.0f"|format(row.rouge_l * 100) }}%{% else %}—{% endif %}</td>
        <td class="num">{% if row.bertscore is not none %}{{ "%.0f"|format(row.bertscore * 100) }}%{% else %}—{% endif %}</td>
        <td class="num">{% if row.embedding_agreement is not none %}{{ "%.0f"|format(row.embedding_agreement * 100) }}%{% else %}—{% endif %}</td>
        <td class="num">
          {% if row.judge_win_rate is not none %}
            {{ "%.0f"|format(row.judge_win_rate * 100) }}% ({{ row.judge_wins }}/{{ row.judge_pairings }})
          {% else %}—{% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</section>
{% endif %}

{# ── Methods / academic citations (always shown if metrics ran) ──── #}
{% if quality_citations %}
<section class="card methods">
  <div class="card-header">
    <h2 class="card-title">Methods</h2>
    <p class="card-desc">Bibliographic references for the metrics above.</p>
  </div>
  <div style="padding: 8pt 16pt 12pt 16pt;">
    <ul style="margin: 0; padding-left: 18pt; color: var(--ink-muted); font-size: calc(var(--cell-fs) - 0.5pt); line-height: 1.5;">
      {% for cite in quality_citations %}
      <li><strong style="color: var(--ink);">{{ cite.label }}.</strong> {{ cite.citation }}{% if cite.url %} <span class="mono" style="color: var(--ink-dim);">{{ cite.url }}</span>{% endif %}</li>
      {% endfor %}
    </ul>
  </div>
</section>
{% endif %}

</body>
</html>
