@drunkcoding/agents-and-skills 0.0.45 → 0.0.46

package/plugins/html-effectiveness/templates/10-svg-illustrations.html.tmpl

@@ -1,444 +0,0 @@
-<!--
-template: 10-svg-illustrations
-upstream: 10-svg-illustrations.html
-slots:
-  title: string  # replaces first <h1> innerHTML
--->
-<div class="sheet">
-
-  <header>
-    <h1>{{title}}</h1>
-    <p class="lead">
-      Three 720×320 hand-drawn SVGs for the Acme docs section on
-      background jobs. Flat fills, 1.5–2px strokes, palette-locked. Each
-      exports standalone via the button below it.
-    </p>
-    <div class="meta">720 × 320 · inline SVG · no external assets</div>
-  </header>
-
-  <!-- ============================================================
-       A — Queue
-       ============================================================ -->
-  <figure>
-    <div class="canvas">
-      <svg id="ill-queue" xmlns="http://www.w3.org/2000/svg" width="720" height="320" viewBox="0 0 720 320">
-        <defs>
-          
-          <marker id="qa" markerWidth="10" markerHeight="10" refX="8" refY="4" orient="auto" markerUnits="userSpaceOnUse">
-            <path d="M0,0 L0,8 L8,4 z" fill="#87867F"/>
-          </marker>
-        </defs>
-
-        <rect width="720" height="320" fill="#FAF9F5"/>
-
-        <!-- queue label -->
-        <text x="60" y="96" class="s" fill="#87867F">queue</text>
-
-        <!-- five job rects -->
-        <g>
-          <rect x="60"  y="110" width="70" height="100" rx="10" fill="#F0EEE6" stroke="#3D3D3A" stroke-width="1.5"/>
-          <text x="95"  y="164" text-anchor="middle" class="m" fill="#3D3D3A">job 5</text>
-
-          <rect x="140" y="110" width="70" height="100" rx="10" fill="#F0EEE6" stroke="#3D3D3A" stroke-width="1.5"/>
-          <text x="175" y="164" text-anchor="middle" class="m" fill="#3D3D3A">job 4</text>
-
-          <rect x="220" y="110" width="70" height="100" rx="10" fill="#F0EEE6" stroke="#3D3D3A" stroke-width="1.5"/>
-          <text x="255" y="164" text-anchor="middle" class="m" fill="#3D3D3A">job 3</text>
-
-          <rect x="300" y="110" width="70" height="100" rx="10" fill="#F0EEE6" stroke="#3D3D3A" stroke-width="1.5"/>
-          <text x="335" y="164" text-anchor="middle" class="m" fill="#3D3D3A">job 2</text>
-
-          <!-- head of queue, highlighted -->
-          <rect x="380" y="110" width="70" height="100" rx="10" fill="#D97757" stroke="#141413" stroke-width="2"/>
-          <text x="415" y="164" text-anchor="middle" class="m" fill="#FAF9F5">job 1</text>
-        </g>
-
-        <!-- arrow to worker -->
-        <line x1="458" y1="160" x2="522" y2="160" stroke="#87867F" stroke-width="1.5" marker-end="url(#qa)"/>
-
-        <!-- worker -->
-        <rect x="530" y="90" width="130" height="140" rx="10" fill="#E3DACC" stroke="#141413" stroke-width="2"/>
-        <text x="595" y="156" text-anchor="middle" class="m" fill="#141413">worker</text>
-        <text x="595" y="172" text-anchor="middle" class="m" fill="#87867F">pool=4</text>
-
-        <!-- annotations -->
-        <text x="415" y="234" text-anchor="middle" class="s" fill="#87867F">next to run</text>
-        <text x="60"  y="258" class="s" fill="#87867F">Jobs are pulled FIFO; the worker leases one at a time.</text>
-      </svg>
-    </div>
-    <figcaption>
-      <div class="cap-text">
-        <div class="cap-title">Queue</div>
-        <div class="cap-sub">For "How jobs are picked up" — intro page header.</div>
-      </div>
-      <button class="dl" data-target="ill-queue" data-filename="acme-jobs-queue.svg">Download SVG</button>
-    </figcaption>
-  </figure>
-
-  <!-- ============================================================
-       B — Retry with backoff
-       ============================================================ -->
-  <figure>
-    <div class="canvas">
-      <svg id="ill-retry" xmlns="http://www.w3.org/2000/svg" width="720" height="320" viewBox="0 0 720 320">
-        <defs>
-          
-        </defs>
-
-        <rect width="720" height="320" fill="#FAF9F5"/>
-
-        <!-- timeline axis -->
-        <line x1="60" y1="190" x2="660" y2="190" stroke="#D1CFC5" stroke-width="1.5"/>
-        <text x="60" y="214" class="s" fill="#87867F">t = 0</text>
-        <text x="660" y="214" text-anchor="end" class="s" fill="#87867F">time →</text>
-
-        <!-- attempts: exponential spacing at x = 100, 170, 310, 590 -->
-        <!-- attempt 1 (fail) -->
-        <circle cx="100" cy="190" r="8" fill="#FAF9F5" stroke="#D97757" stroke-width="2"/>
-        <line x1="96" y1="186" x2="104" y2="194" stroke="#D97757" stroke-width="1.5"/>
-        <line x1="104" y1="186" x2="96" y2="194" stroke="#D97757" stroke-width="1.5"/>
-        <text x="100" y="222" text-anchor="middle" class="m" fill="#3D3D3A">try 1</text>
-
-        <!-- attempt 2 (fail) -->
-        <circle cx="170" cy="190" r="8" fill="#FAF9F5" stroke="#D97757" stroke-width="2"/>
-        <line x1="166" y1="186" x2="174" y2="194" stroke="#D97757" stroke-width="1.5"/>
-        <line x1="174" y1="186" x2="166" y2="194" stroke="#D97757" stroke-width="1.5"/>
-        <text x="170" y="222" text-anchor="middle" class="m" fill="#3D3D3A">try 2</text>
-
-        <!-- attempt 3 (fail) -->
-        <circle cx="310" cy="190" r="8" fill="#FAF9F5" stroke="#D97757" stroke-width="2"/>
-        <line x1="306" y1="186" x2="314" y2="194" stroke="#D97757" stroke-width="1.5"/>
-        <line x1="314" y1="186" x2="306" y2="194" stroke="#D97757" stroke-width="1.5"/>
-        <text x="310" y="222" text-anchor="middle" class="m" fill="#3D3D3A">try 3</text>
-
-        <!-- attempt 4 (success) -->
-        <circle cx="590" cy="190" r="9" fill="#788C5D" stroke="#141413" stroke-width="1.5"/>
-        <path d="M585,190 L589,194 L596,185" fill="none" stroke="#FAF9F5" stroke-width="1.5" stroke-linecap="round"/>
-        <text x="590" y="222" text-anchor="middle" class="m" fill="#3D3D3A">try 4</text>
-
-        <!-- dashed backoff arcs (loop back over the gap) -->
-        <path d="M 100 182 Q 135 130 170 182" fill="none" stroke="#87867F" stroke-width="1.5" stroke-dasharray="4 4"/>
-        <text x="135" y="124" text-anchor="middle" class="m" fill="#87867F">+1s</text>
-
-        <path d="M 170 182 Q 240 110 310 182" fill="none" stroke="#87867F" stroke-width="1.5" stroke-dasharray="4 4"/>
-        <text x="240" y="104" text-anchor="middle" class="m" fill="#87867F">+2s</text>
-
-        <path d="M 310 182 Q 450 80 590 182" fill="none" stroke="#87867F" stroke-width="1.5" stroke-dasharray="4 4"/>
-        <text x="450" y="74" text-anchor="middle" class="m" fill="#87867F">+4s</text>
-
-        <!-- annotation -->
-        <text x="60" y="262" class="s" fill="#87867F">Each failure waits twice as long before re-queuing; jitter not pictured.</text>
-      </svg>
-    </div>
-    <figcaption>
-      <div class="cap-text">
-        <div class="cap-title">Retry with backoff</div>
-        <div class="cap-sub">For "Handling failures" — retry policy header.</div>
-      </div>
-      <button class="dl" data-target="ill-retry" data-filename="acme-jobs-retry.svg">Download SVG</button>
-    </figcaption>
-  </figure>
-
-  <!-- ============================================================
-       C — Fan-out
-       ============================================================ -->
-  <figure>
-    <div class="canvas">
-      <svg id="ill-fanout" xmlns="http://www.w3.org/2000/svg" width="720" height="320" viewBox="0 0 720 320">
-        <defs>
-          
-          <marker id="fa" markerWidth="9" markerHeight="9" refX="7" refY="3.5" orient="auto" markerUnits="userSpaceOnUse">
-            <path d="M0,0 L0,7 L7,3.5 z" fill="#87867F"/>
-          </marker>
-        </defs>
-
-        <rect width="720" height="320" fill="#FAF9F5"/>
-
-        <!-- source -->
-        <rect x="60" y="128" width="110" height="64" rx="10" fill="#E3DACC" stroke="#141413" stroke-width="2"/>
-        <text x="115" y="158" text-anchor="middle" class="m" fill="#141413">enqueue</text>
-        <text x="115" y="172" text-anchor="middle" class="m" fill="#87867F">batch()</text>
-
-        <!-- fan-out arrows: from (170,160) to four shard boxes at x=300 -->
-        <line x1="170" y1="160" x2="296" y2="64"  stroke="#87867F" stroke-width="1.5" marker-end="url(#fa)"/>
-        <line x1="170" y1="160" x2="296" y2="128" stroke="#87867F" stroke-width="1.5" marker-end="url(#fa)"/>
-        <line x1="170" y1="160" x2="296" y2="192" stroke="#87867F" stroke-width="1.5" marker-end="url(#fa)"/>
-        <line x1="170" y1="160" x2="296" y2="256" stroke="#87867F" stroke-width="1.5" marker-end="url(#fa)"/>
-
-        <!-- four shard boxes -->
-        <g>
-          <rect x="300" y="44"  width="120" height="40" rx="10" fill="#F0EEE6" stroke="#3D3D3A" stroke-width="1.5"/>
-          <text x="360" y="69"  text-anchor="middle" class="m" fill="#3D3D3A">shard 0</text>
-
-          <rect x="300" y="108" width="120" height="40" rx="10" fill="#F0EEE6" stroke="#3D3D3A" stroke-width="1.5"/>
-          <text x="360" y="133" text-anchor="middle" class="m" fill="#3D3D3A">shard 1</text>
-
-          <rect x="300" y="172" width="120" height="40" rx="10" fill="#F0EEE6" stroke="#3D3D3A" stroke-width="1.5"/>
-          <text x="360" y="197" text-anchor="middle" class="m" fill="#3D3D3A">shard 2</text>
-
-          <rect x="300" y="236" width="120" height="40" rx="10" fill="#F0EEE6" stroke="#3D3D3A" stroke-width="1.5"/>
-          <text x="360" y="261" text-anchor="middle" class="m" fill="#3D3D3A">shard 3</text>
-        </g>
-
-        <!-- converge arrows to merge -->
-        <line x1="420" y1="64"  x2="546" y2="160" stroke="#87867F" stroke-width="1.5" marker-end="url(#fa)"/>
-        <line x1="420" y1="128" x2="546" y2="160" stroke="#87867F" stroke-width="1.5" marker-end="url(#fa)"/>
-        <line x1="420" y1="192" x2="546" y2="160" stroke="#87867F" stroke-width="1.5" marker-end="url(#fa)"/>
-        <line x1="420" y1="256" x2="546" y2="160" stroke="#87867F" stroke-width="1.5" marker-end="url(#fa)"/>
-
-        <!-- merge box -->
-        <rect x="550" y="128" width="110" height="64" rx="10" fill="#788C5D" stroke="#141413" stroke-width="2"/>
-        <text x="605" y="158" text-anchor="middle" class="m" fill="#FAF9F5">merge</text>
-        <text x="605" y="172" text-anchor="middle" class="m" fill="#E3DACC">await all</text>
-
-        <!-- annotations -->
-        <text x="232" y="42"  class="s" fill="#87867F">fan-out</text>
-        <text x="486" y="42"  text-anchor="end" class="s" fill="#87867F">fan-in</text>
-        <text x="60"  y="300" class="s" fill="#87867F">Parent job spawns N children, then blocks on a completion barrier.</text>
-      </svg>
-    </div>
-    <figcaption>
-      <div class="cap-text">
-        <div class="cap-title">Fan-out / fan-in</div>
-        <div class="cap-sub">For "Batch and parallel work" — fan-out pattern header.</div>
-      </div>
-      <button class="dl" data-target="ill-fanout" data-filename="acme-jobs-fanout.svg">Download SVG</button>
-    </figcaption>
-  </figure>
-
-  <!-- ============================================================
-       Palette + usage notes
-       ============================================================ -->
-  <section class="palette">
-    <h2>Palette &amp; rules</h2>
-
-    <div class="swatches">
-      <div class="swatch">
-        <div class="swatch-chip" style="background:#FAF9F5"></div>
-        <div class="swatch-meta">
-          <div class="swatch-name">ivory</div>
-          <div class="swatch-hex">#FAF9F5</div>
-        </div>
-      </div>
-      <div class="swatch">
-        <div class="swatch-chip" style="background:#141413"></div>
-        <div class="swatch-meta">
-          <div class="swatch-name">slate</div>
-          <div class="swatch-hex">#141413</div>
-        </div>
-      </div>
-      <div class="swatch">
-        <div class="swatch-chip" style="background:#D97757"></div>
-        <div class="swatch-meta">
-          <div class="swatch-name">clay</div>
-          <div class="swatch-hex">#D97757</div>
-        </div>
-      </div>
-      <div class="swatch">
-        <div class="swatch-chip" style="background:#788C5D"></div>
-        <div class="swatch-meta">
-          <div class="swatch-name">olive</div>
-          <div class="swatch-hex">#788C5D</div>
-        </div>
-      </div>
-      <div class="swatch">
-        <div class="swatch-chip" style="background:#E3DACC"></div>
-        <div class="swatch-meta">
-          <div class="swatch-name">oat</div>
-          <div class="swatch-hex">#E3DACC</div>
-        </div>
-      </div>
-      <div class="swatch">
-        <div class="swatch-chip" style="background:#F0EEE6"></div>
-        <div class="swatch-meta">
-          <div class="swatch-name">gray-150</div>
-          <div class="swatch-hex">#F0EEE6</div>
-        </div>
-      </div>
-      <div class="swatch">
-        <div class="swatch-chip" style="background:#D1CFC5"></div>
-        <div class="swatch-meta">
-          <div class="swatch-name">gray-300</div>
-          <div class="swatch-hex">#D1CFC5</div>
-        </div>
-      </div>
-      <div class="swatch">
-        <div class="swatch-chip" style="background:#87867F"></div>
-        <div class="swatch-meta">
-          <div class="swatch-name">gray-500</div>
-          <div class="swatch-hex">#87867F</div>
-        </div>
-      </div>
-    </div>
-
-    <ul class="notes">
-      <li>Strokes are 1.5px for neutral boxes, 2px for emphasised containers.</li>
-      <li>All rectangles use <code>rx="10"</code>; no drop shadows or gradients.</li>
-      <li>Labels inside boxes are 11px mono; annotations outside are 12px sans, gray-500.</li>
-      <li>Clay marks "the thing in focus"; olive marks "success / done".</li>
-      <li>Each SVG carries its own <code>&lt;style&gt;</code> block so the download stands alone.</li>
-    </ul>
-  </section>
-
-</div>
-
-<style>
-* { margin: 0; padding: 0; box-sizing: border-box; }
-.sheet {
-    max-width: 760px;
-    margin: 0 auto;
-  }
-header { margin-bottom: 56px; }
-h1 {
-    font-family: var(--serif);
-    font-weight: 500;
-    font-size: 34px;
-    letter-spacing: -0.01em;
-    margin-bottom: 10px;
-  }
-.lead {
-    font-size: 14px;
-    line-height: 1.6;
-    color: var(--gray-700);
-    max-width: 560px;
-  }
-.meta {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--gray-500);
-    margin-top: 18px;
-  }
-/* ---------------------------------------------------------------- */
-
-  figure {
-    margin: 0 0 72px 0;
-  }
-.canvas {
-    border: 1px solid var(--gray-300);
-    border-radius: 12px;
-    overflow: hidden;
-    background: var(--ivory);
-  }
-.canvas svg { display: block; width: 100%; height: auto; }
-figcaption {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 24px;
-    padding: 18px 4px 0;
-  }
-.cap-text { flex: 1; }
-.cap-title {
-    font-family: var(--serif);
-    font-size: 19px;
-    font-weight: 500;
-    margin-bottom: 4px;
-  }
-.cap-sub {
-    font-size: 13px;
-    line-height: 1.55;
-    color: var(--gray-500);
-  }
-.dl {
-    flex-shrink: 0;
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--slate);
-    background: var(--gray-150);
-    border: 1px solid var(--gray-300);
-    border-radius: 6px;
-    padding: 7px 12px;
-    cursor: pointer;
-  }
-.dl:hover { background: var(--oat); }
-.dl:active { transform: translateY(1px); }
-/* ----------------------------------------------------------------
-     Palette reference strip
-     ---------------------------------------------------------------- */
-  .palette {
-    border-top: 1px solid var(--gray-300);
-    padding-top: 36px;
-    margin-top: 8px;
-  }
-.palette h2 {
-    font-family: var(--serif);
-    font-weight: 500;
-    font-size: 19px;
-    margin-bottom: 18px;
-  }
-.swatches {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
-    gap: 10px;
-    margin-bottom: 32px;
-  }
-.swatch {
-    border: 1px solid var(--gray-300);
-    border-radius: 8px;
-    overflow: hidden;
-    background: #fff;
-  }
-.swatch-chip {
-    height: 44px;
-  }
-.swatch-meta {
-    padding: 8px 10px 10px;
-  }
-.swatch-name {
-    font-size: 12px;
-    color: var(--gray-700);
-  }
-.swatch-hex {
-    font-family: var(--mono);
-    font-size: 10px;
-    color: var(--gray-500);
-  }
-.notes {
-    font-size: 13px;
-    line-height: 1.7;
-    color: var(--gray-700);
-    list-style: none;
-  }
-.notes li {
-    padding-left: 18px;
-    position: relative;
-    margin-bottom: 6px;
-  }
-.notes li::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0.65em;
-    width: 8px;
-    height: 1px;
-    background: var(--gray-500);
-  }
-/* --- */
-
-.m { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; }
-.s { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 12px; }
-/* --- */
-
-.m { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; }
-.s { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 12px; }
-/* --- */
-
-.m { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; }
-.s { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 12px; }
-</style>
-
-<script>
-document.querySelectorAll('.dl').forEach(function (btn) {
-    btn.addEventListener('click', function () {
-      var svg  = document.getElementById(btn.dataset.target);
-      var src  = new XMLSerializer().serializeToString(svg);
-      var blob = new Blob([src], { type: 'image/svg+xml;charset=utf-8' });
-      var url  = URL.createObjectURL(blob);
-      var a    = document.createElement('a');
-      a.href = url;
-      a.download = btn.dataset.filename || 'illustration.svg';
-      a.click();
-      setTimeout(function () { URL.revokeObjectURL(url); }, 1000);
-    });
-  });
-</script>

package/plugins/html-effectiveness/templates/11-status-report.html.tmpl

@@ -1,152 +0,0 @@
-<!--
-template: 11-status-report
-upstream: 11-status-report.html
-slots:
-  title: string
-  auto_pill?: string
-  date_range: string
-  repo?: string
-  summary[]: { num, label, delta?, delta_kind?: up|flat|down, warn?: bool }
-  highlights?: { items[]: { strong, body: html } }
-  shipped?: { rows[]: { pr, title: html, author, risk: low|med|high } }
-  velocity_svg?: html
-  velocity_caption?: string
-  carryover?: { items[]: { tag, body: html, who? } }
-  footer?: html
--->
-<div class="page report report--status">
-  <header>
-    <div class="header-top">
-      <h1>{{title}}</h1>
-      {{#auto_pill}}<span class="auto-pill">{{auto_pill}}</span>{{/auto_pill}}
-    </div>
-    <div class="date-range">
-      {{date_range}}
-      {{#repo}} &middot; <span class="repo">{{repo}}</span>{{/repo}}
-    </div>
-  </header>
-
-  <section>
-    <div class="summary-band">
-      {{#summary}}
-      <div class="stat-card {{#warn}}warn{{/warn}}">
-        <div class="stat-num">{{num}}</div>
-        <div class="stat-label">{{label}}</div>
-        {{#delta}}<div class="stat-delta {{delta_kind}}">{{delta}}</div>{{/delta}}
-      </div>
-      {{/summary}}
-    </div>
-  </section>
-
-  {{#highlights}}
-  <section>
-    <h2>Highlights</h2>
-    <hr class="rule">
-    <ul class="highlights">
-      {{#items}}
-      <li><strong>{{strong}}</strong> {{{body}}}</li>
-      {{/items}}
-    </ul>
-  </section>
-  {{/highlights}}
-
-  {{#shipped}}
-  <section>
-    <h2>Shipped</h2>
-    <hr class="rule">
-    <table class="shipped">
-      <thead>
-        <tr><th style="width:90px;">PR</th><th>Title</th><th style="width:140px;">Author</th><th style="width:100px;">Risk</th></tr>
-      </thead>
-      <tbody>
-        {{#rows}}
-        <tr>
-          <td><a class="pr-link" href="#">{{pr}}</a></td>
-          <td>{{{title}}}</td>
-          <td class="author">{{author}}</td>
-          <td><span class="risk"><span class="risk-dot {{risk}}"></span>{{risk}}</span></td>
-        </tr>
-        {{/rows}}
-      </tbody>
-    </table>
-  </section>
-  {{/shipped}}
-
-  {{#velocity_svg}}
-  <section>
-    <h2>Velocity</h2>
-    <hr class="rule">
-    <div class="chart-panel">
-      {{{velocity_svg}}}
-      {{#velocity_caption}}<div class="chart-caption">{{velocity_caption}}</div>{{/velocity_caption}}
-    </div>
-  </section>
-  {{/velocity_svg}}
-
-  {{#carryover}}
-  <section>
-    <h2>Carryover</h2>
-    <hr class="rule">
-    <div class="carryover">
-      {{#items}}
-      <div class="carry-item">
-        <span class="carry-tag">{{tag}}</span>
-        <div class="carry-body">{{{body}}}{{#who}} <span class="who">&middot; {{who}}</span>{{/who}}</div>
-      </div>
-      {{/items}}
-    </div>
-  </section>
-  {{/carryover}}
-
-  {{#footer}}<footer>{{{footer}}}</footer>{{/footer}}
-</div>
-
-<style>
-.report--status { max-width: 860px; margin: 0 auto; padding: 56px 24px 120px; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
-.report--status header { margin-bottom: 40px; }
-.report--status .header-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
-.report--status h1 { font-family: var(--serif); font-weight: 500; font-size: 38px; letter-spacing: -0.01em; margin: 0; }
-.report--status .auto-pill { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); background: var(--gray-100); border: var(--border-thick); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
-.report--status .date-range { color: var(--gray-500); font-size: 14px; }
-.report--status .date-range .repo { font-family: var(--mono); font-size: 13px; color: var(--gray-700); }
-.report--status section { margin-bottom: 52px; }
-.report--status h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: -0.01em; margin: 0 0 6px; }
-.report--status hr.rule { border: none; border-top: 1px solid var(--gray-300); margin: 0 0 22px; }
-.report--status .summary-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
-@media (max-width: 720px) { .report--status .summary-band { grid-template-columns: repeat(2, 1fr); } }
-.report--status .stat-card { background: var(--white); border: var(--border-thick); border-radius: var(--radius-panel); padding: 20px 22px 18px; }
-.report--status .stat-card.warn { border-left: 4px solid var(--clay); padding-left: 19px; }
-.report--status .stat-num { font-family: var(--serif); font-size: 44px; font-weight: 500; line-height: 1; color: var(--slate); margin-bottom: 8px; }
-.report--status .stat-label { font-family: var(--sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); }
-.report--status .stat-delta { font-family: var(--mono); font-size: 11px; margin-top: 6px; }
-.report--status .stat-delta.up { color: var(--olive); }
-.report--status .stat-delta.flat { color: var(--gray-500); }
-.report--status .stat-delta.down { color: var(--rust); }
-.report--status .highlights { list-style: none; margin: 0; padding: 0; }
-.report--status .highlights li { position: relative; padding: 0 0 14px 26px; font-size: 15px; color: var(--gray-700); }
-.report--status .highlights li::before { content: ""; position: absolute; left: 6px; top: 8px; width: 7px; height: 7px; border-radius: 2px; background: var(--clay); }
-.report--status .highlights li strong { color: var(--slate); font-weight: 600; }
-.report--status table.shipped { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border: var(--border-thick); border-radius: var(--radius-panel); overflow: hidden; }
-.report--status table.shipped thead th { text-align: left; font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); background: var(--gray-100); padding: 12px 16px; border-bottom: 1px solid var(--gray-300); }
-.report--status table.shipped tbody td { padding: 13px 16px; border-bottom: 1px solid var(--gray-100); font-size: 14px; vertical-align: middle; }
-.report--status table.shipped tbody tr:last-child td { border-bottom: none; }
-.report--status table.shipped tbody tr:hover { background: var(--ivory); }
-.report--status .pr-link { font-family: var(--mono); font-size: 13px; color: var(--clay); text-decoration: none; border-bottom: 1px dotted transparent; }
-.report--status .pr-link:hover { border-bottom-color: var(--clay); }
-.report--status .author { color: var(--gray-700); font-size: 13px; }
-.report--status .risk { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--gray-500); text-transform: capitalize; }
-.report--status .risk-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
-.report--status .risk-dot.low { background: var(--olive); }
-.report--status .risk-dot.med { background: var(--clay); }
-.report--status .risk-dot.high { background: var(--rust); }
-.report--status .chart-panel { background: var(--white); border: var(--border-thick); border-radius: var(--radius-panel); padding: 24px 28px 18px; }
-.report--status .chart-panel svg { display: block; width: 100%; height: auto; }
-.report--status .chart-caption { font-size: 12px; color: var(--gray-500); margin-top: 12px; }
-.report--status .carryover { background: var(--oat); border-radius: var(--radius-panel); padding: 20px 22px; }
-.report--status .carry-item { display: flex; align-items: baseline; gap: 14px; padding: 8px 0; }
-.report--status .carry-item + .carry-item { border-top: 1px solid rgba(20, 20, 19, 0.08); }
-.report--status .carry-tag { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-700); background: var(--ivory); border-radius: 4px; padding: 3px 7px; flex-shrink: 0; }
-.report--status .carry-body { font-size: 14px; color: var(--gray-700); }
-.report--status .carry-body .who { color: var(--gray-500); font-size: 12px; }
-.report--status footer { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--gray-300); font-family: var(--mono); font-size: 12px; color: var(--gray-500); }
-</style>