{# SPDX-FileCopyrightText: 2026 PythonWoods <dev@pythonwoods.dev> #}
{# SPDX-License-Identifier: Apache-2.0 #}
<section class="py-16 md:py-24">
  <div class="max-w-5xl mx-auto px-6">
    <div class="max-w-3xl mb-16">
      <p class="text-[11px] font-mono font-semibold tracking-[0.18em] dark:text-zinc-400 text-zinc-500 mb-4 uppercase">Governance</p>
      <h2 class="text-3xl md:text-4xl font-semibold tracking-tight dark:text-white text-zinc-900 mb-4">Suppression CAP <span class="dark:text-zinc-500 text-zinc-400">— Live Preview</span></h2>
      <p class="dark:text-zinc-500 text-zinc-500 max-w-xl text-sm leading-relaxed">When active suppressions exceed the configured CAP, zenzic-action writes this summary directly to the GitHub Actions job panel. No log diving required.</p>
    </div>
    <div class="grid md:grid-cols-12 gap-8 items-stretch">
      <div class="md:col-span-7 h-full flex flex-col [&>div]:flex-1 [&>div]:my-0">
        <p class="text-[11px] font-mono font-semibold tracking-widest dark:text-zinc-400 text-zinc-500 mb-3 uppercase">CAP exceeded — exit 1</p>
        <div class="my-6 overflow-hidden rounded-xl border dark:bg-zinc-900/40 bg-white font-mono shadow-2xl dark:border-rose-900/40 border-rose-200">
          <div class="flex items-center justify-between border-b px-6 py-3 dark:border-rose-900/40 border-rose-200 dark:bg-rose-900/20 bg-rose-50">
            <span class="text-[13px] font-semibold tracking-wide text-rose-500">✘ <span class="dark:text-zinc-200 text-zinc-800">Suppression CAP Exceeded</span></span>
            <span class="rounded-sm px-2 py-0.5 text-[11px] font-bold tabular-nums text-rose-400 bg-rose-500/10">+13</span>
          </div>
          <div class="grid grid-cols-3 divide-x dark:divide-zinc-800 divide-zinc-100">
            <div class="flex flex-col items-center gap-1 px-3 py-5">
              <span class="dark:text-zinc-500 text-zinc-400 text-[10px] tracking-widest uppercase">Active suppressions</span>
              <span class="dark:text-zinc-100 text-zinc-900 text-2xl font-light tabular-nums">43</span>
            </div>
            <div class="flex flex-col items-center gap-1 px-3 py-5">
              <span class="dark:text-zinc-500 text-zinc-400 text-[10px] tracking-widest uppercase">CAP limit</span>
              <span class="dark:text-zinc-100 text-zinc-900 text-2xl font-light tabular-nums">30</span>
            </div>
            <div class="flex flex-col items-center gap-1 px-3 py-5">
              <span class="dark:text-zinc-500 text-zinc-400 text-[10px] tracking-widest uppercase">Excess debt</span>
              <span class="text-2xl font-light tabular-nums text-rose-400">+13</span>
            </div>
          </div>
          <div class="border-t px-5 py-3 dark:bg-zinc-900/20 bg-zinc-50 dark:border-rose-900/40 border-rose-200">
            <a href="{{ base_url }}/how-to/release-governance-protocol" class="text-[11px] tracking-wide dark:text-amber-400 text-amber-600 hover:underline">📋 Remediation Playbook →</a>
          </div>
        </div>
      </div>
      <div class="md:col-span-5 h-full flex flex-col [&>div]:flex-1 [&>div]:my-0">
        <p class="text-[11px] font-mono font-semibold tracking-widest dark:text-zinc-400 text-zinc-500 mb-3 uppercase">CAP within limit — exit 0</p>
        <div class="my-6 overflow-hidden rounded-xl border dark:bg-zinc-900/40 bg-white font-mono shadow-2xl dark:border-emerald-900/40 border-emerald-200">
          <div class="flex items-center justify-between border-b px-6 py-3 dark:border-emerald-900/40 border-emerald-200 dark:bg-emerald-900/20 bg-emerald-50">
            <span class="text-[13px] font-semibold tracking-wide text-emerald-500">✔ <span class="dark:text-zinc-200 text-zinc-800">Suppression CAP — Within Limit</span></span>
          </div>
          <div class="grid grid-cols-3 divide-x dark:divide-zinc-800 divide-zinc-100">
            <div class="flex flex-col items-center gap-1 px-3 py-5">
              <span class="dark:text-zinc-500 text-zinc-400 text-[10px] tracking-widest uppercase">Active suppressions</span>
              <span class="dark:text-zinc-100 text-zinc-900 text-2xl font-light tabular-nums">18</span>
            </div>
            <div class="flex flex-col items-center gap-1 px-3 py-5">
              <span class="dark:text-zinc-500 text-zinc-400 text-[10px] tracking-widest uppercase">CAP limit</span>
              <span class="dark:text-zinc-100 text-zinc-900 text-2xl font-light tabular-nums">30</span>
            </div>
            <div class="flex flex-col items-center gap-1 px-3 py-5">
              <span class="dark:text-zinc-500 text-zinc-400 text-[10px] tracking-widest uppercase">Excess debt</span>
              <span class="text-2xl font-light tabular-nums dark:text-emerald-400 text-emerald-600">-12</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>