{# Brief mobile-first HTML template.

   Layout: hero → city intel → verified facts → crowd-work Top 10 → recent news
   → competitor warnings → previous show + historical sales footer.

   All OG tags from spec are emitted in <head>. No external stylesheet; the
   inline <style> keeps the brief a self-contained single file.
#}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ comedian }} — {{ city }} Brief · {{ show_date_short }}</title>
<meta property="og:title" content="{{ comedian }} — {{ city }} Brief · {{ show_date_short }}">
<meta property="og:description" content="10 crowd work topics · local news · city intel">
<meta property="og:image" content="{{ og_cover_url }}">
<meta property="og:url" content="{{ public_url }}">
<meta property="og:type" content="website">
<meta property="og:site_name" content="{{ comedian }}">
<meta name="twitter:card" content="summary_large_image">
<style>
  :root { --accent:#111; --muted:#666; --line:#eee; --bg:#fafafa; }
  *{box-sizing:border-box;}
  body{font:16px/1.5 -apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;color:var(--accent);background:#fff;margin:0;padding:0;}
  .wrap{max-width:720px;margin:0 auto;padding:24px 16px 48px;}
  header{padding:8px 0 16px;border-bottom:1px solid var(--line);}
  header h1{font-size:24px;margin:0 0 6px 0;}
  .meta{color:var(--muted);font-size:13px;}
  h2{font-size:18px;margin:28px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line);}
  ol,ul{padding-left:22px;margin:0 0 8px;}
  li{margin-bottom:10px;}
  .topic{padding:12px 0;border-bottom:1px solid var(--line);}
  .topic strong{display:block;margin-bottom:2px;}
  .topic .angle{color:#333;}
  .topic .risk{display:block;color:#9a3a3a;font-size:13px;margin-top:4px;}
  .small{color:var(--muted);font-size:13px;}
  .competitors li,.news li{margin-bottom:8px;}
  .competitor-title{color:#9a3a3a;}
  .pill{display:inline-block;padding:2px 8px;border-radius:999px;background:#f0f0f0;font-size:11px;letter-spacing:.03em;text-transform:uppercase;margin-right:6px;color:#555;}
  footer{margin-top:36px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;}
  @media (max-width:540px){ .wrap{padding:18px 14px 32px;} header h1{font-size:21px;} }
</style>
</head>
<body>
<div class="wrap">

  <header>
    <h1>{{ comedian }} — {{ city }} Brief</h1>
    <div class="meta">
      {{ city }}, {{ country }}
      {%- if venue %} · {{ venue }}{% endif %}
      {%- if capacity %} · {{ capacity|default(0)|int }} seats{% endif %}
      · {{ show_date_short }}
    </div>
  </header>

  <section id="crowd-work">
    <span class="pill">Crowd Work</span>
    <h2>Top 10 topics</h2>
    <ol>
      {% for idea in crowd_work[:10] %}
      <li>
        <div class="topic">
          <strong>{{ idea.title or '(untitled)' }}</strong>
          {% if idea.angle %}<div class="angle">{{ idea.angle }}</div>{% endif %}
          {% if idea.city_specificity %}<div class="small">{{ idea.city_specificity }}</div>{% endif %}
          {% if idea.safety_notes %}<div class="risk">SAFETY: {{ idea.safety_notes }}</div>{% endif %}
          {% if idea.risk_note and not idea.safety_notes %}<div class="risk">RISK: {{ idea.risk_note }}</div>{% endif %}
        </div>
      </li>
      {% endfor %}
    </ol>
  </section>

  {% if recent_clips %}
  <section id="recent-clips">
    <span class="pill">Recent Clips</span>
    <h2>{{ comedian }}'s most recent posted material</h2>
    <ul class="news">
      {% for clip in recent_clips %}
      <li>
        <strong>{{ clip.title }}</strong>
        {% if clip.published_at %} <span class="small">({{ clip.published_at[:10] }})</span>{% endif %}
        {% if clip.url %} · <a class="small" href="{{ clip.url }}">watch</a>{% endif %}
        <div class="small">Ground the ideas above against these so they don't repeat on stage.</div>
      </li>
      {% endfor %}
    </ul>
  </section>
  {% endif %}

  <section id="facts">
    <span class="pill">Verified Facts</span>
    <h2>Verified for the stage</h2>
    <ul>
      {% for fact in verified_facts %}
      <li data-confidence="{{ fact.confidence }}">
        {{ fact.claim }}
        {% if fact.source %}<div class="small">{{ fact.source }}</div>{% endif %}
      </li>
      {% else %}
      <li class="small">No facts passed verification.</li>
      {% endfor %}
    </ul>
    {% if removed_facts %}
    <details>
      <summary class="small">{{ removed_facts|length }} claim(s) removed by fact-check</summary>
      <ul>
        {% for f in removed_facts %}
        <li class="small">{{ f.claim }} <em>({{ f.removed_reason }})</em></li>
        {% endfor %}
      </ul>
    </details>
    {% endif %}
  </section>

  <section id="news">
    <span class="pill">Local News</span>
    <h2>Recent news</h2>
    <ul class="news">
      {% for n in recent_news %}
      <li>
        <strong>{{ n.title }}</strong>
        {% if n.date %} <span class="small">({{ n.date }})</span>{% endif %}
        <div class="small">{{ n.summary }}</div>
        {% if n.url %}<a class="small" href="{{ n.url }}">source</a>{% endif %}
      </li>
      {% else %}
      <li class="small">No news surfaced for this window.</li>
      {% endfor %}
    </ul>
  </section>

  {% if competitor_warnings %}
  <section id="competitors">
    <span class="pill">Competitor Coverage</span>
    <h2>Same-city shows near {{ show_date_short }}</h2>
    <ul class="competitors">
      {% for c in competitor_warnings %}
      <li>
        <div class="competitor-title">{{ c.title }}</div>
        <div class="small">{{ c.summary }}</div>
        {% if c.url %}<a class="small" href="{{ c.url }}">source</a>{% endif %}
      </li>
      {% endfor %}
    </ul>
  </section>
  {% endif %}

  {% if city_intel and (city_intel.points_of_pride or city_intel.sensitivities_to_avoid or city_intel.local_conversation_today) %}
  <section id="city-intel">
    <span class="pill">City Intel</span>
    <h2>{{ city }} context</h2>
    {% if city_intel.local_conversation_today %}
    <p><strong>What the city is talking about right now:</strong> {{ city_intel.local_conversation_today }}</p>
    {% endif %}
    {% if city_intel.points_of_pride %}
    <p class="small"><strong>Pride:</strong> {{ city_intel.points_of_pride|join(', ') }}</p>
    {% endif %}
    {% if city_intel.sensitivities_to_avoid %}
    <p class="small"><strong>Avoid:</strong> {{ city_intel.sensitivities_to_avoid|join(', ') }}</p>
    {% endif %}
  </section>
  {% endif %}

  {% if previous_show_date %}
  <section id="previous">
    <span class="pill">Previous Show</span>
    <h2>Last time in {{ city }}</h2>
    <p class="small">
      {{ previous_show_date }}
      {% if previous_show_venue %} · {{ previous_show_venue }}{% endif %}
      {% if previous_tickets_sold %} · {{ previous_tickets_sold }} tickets sold{% endif %}
    </p>
  </section>
  {% endif %}

  <footer>
    Brief for {{ comedian }} at {{ city }}, {{ country }} on {{ show_date_short }}.
    Generated by Max Amini City Briefing Agent on {{ generated_at }}.
    Public page: <a href="{{ public_url }}">{{ public_url }}</a>
  </footer>

</div>
</body>
</html>