SF Permits MCP Server

{# showcase_risk.html — Revision Risk Meter (visual-first redesign) #}
{# Receives: showcase.revision_risk #}
{% set risk = showcase.revision_risk %}
<div class="showcase-risk glass-card"
     data-track="showcase-view"
     data-showcase="risk"
     style="padding: var(--space-6);">
  <style>
    .risk-intel-label {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      margin-bottom: var(--space-4);
    }
    .risk-gauge-layout {
      display: flex;
      align-items: center;
      gap: var(--space-5);
      margin-bottom: var(--space-4);
    }
    .risk-gauge-svg {
      flex-shrink: 0;
    }
    .risk-gauge-meta {
      flex: 1;
    }
    .risk-context-label {
      font-family: var(--sans);
      font-size: var(--text-sm);
      color: var(--text-secondary);
      margin-bottom: var(--space-3);
      line-height: 1.5;
    }
    .risk-triggers-link {
      font-family: var(--mono);
      font-size: var(--text-xs);
      color: var(--accent);
      text-decoration: none;
      border-bottom: 1px solid rgba(94, 234, 212, 0.3);
      padding-bottom: 1px;
    }
    .risk-triggers-link:hover {
      border-bottom-color: var(--accent);
    }
    .risk-cta-row {
      padding-top: var(--space-4);
      border-top: 1px solid var(--glass-border);
      display: flex;
      justify-content: flex-end;
    }
  </style>

  <div class="risk-intel-label">Predictive Intelligence</div>

  <div class="risk-gauge-layout">
    <svg class="risk-gauge-svg" viewBox="0 0 120 120" width="120" height="120" aria-label="Revision risk gauge: 24.6%">
      <!-- Background track -->
      <circle cx="60" cy="60" r="50" fill="none" stroke="var(--glass-border)" stroke-width="8"/>
      <!-- Filled arc — 24.6% of 314 ≈ 77, so dashoffset = 314 - 77 = 237 -->
      <circle cx="60" cy="60" r="50" fill="none" stroke="var(--dot-amber)" stroke-width="8"
              stroke-dasharray="314" stroke-dashoffset="237" stroke-linecap="round"
              transform="rotate(-90 60 60)"/>
      <!-- Center percentage -->
      <text x="60" y="65" text-anchor="middle" fill="var(--text-primary)"
            font-family="var(--mono)" font-size="20" font-weight="300">24.6%</text>
    </svg>

    <div class="risk-gauge-meta">
      <div class="risk-context-label">Restaurant alterations in the Mission</div>
      <a href="/tools/revision-risk?demo=restaurant-mission" class="risk-triggers-link">5 common triggers</a>
    </div>
  </div>

  <div class="risk-cta-row">
    <a href="/tools/revision-risk?demo=restaurant-mission"
       class="ghost-cta"
       data-track="showcase-click"
       data-showcase="risk">Check your risk &rarr;</a>
  </div>
</div>