@drunkcoding/agents-and-skills 0.0.12 → 0.0.14

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

@@ -0,0 +1,444 @@
+<!--
+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

@@ -0,0 +1,152 @@
+<!--
+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>