@drunkcoding/agents-and-skills 0.0.44 → 0.0.46

package/plugins/html-effectiveness/templates/03-code-review-pr.html.tmpl

@@ -1,581 +0,0 @@
-<!--
-template: 03-code-review-pr
-upstream: 03-code-review-pr.html
-slots:
-  title: string  # replaces first <h1> innerHTML
--->
-<div class="page">
-
-  <header class="pr-head">
-    <div class="repo-line">acme/web · Pull Request #247</div>
-    <h1>{{title}}</h1>
-    <div class="meta-row">
-      <div class="author">
-        <div class="avatar">MO</div>
-        <div>
-          <div class="author-name">Mira Okafor</div>
-          <div class="author-sub">opened 2 days ago</div>
-        </div>
-      </div>
-      <div class="branch">
-        mo/optimistic-tasks <span class="arrow">→</span> main
-      </div>
-      <div class="stat">
-        <span class="add">+142</span> / <span class="del">−38</span>
-        <span class="files">6 files changed</span>
-      </div>
-    </div>
-  </header>
-
-  <section class="prose">
-    <h2>What this PR does</h2>
-    <ul>
-      <li>Replaces the await-then-refetch pattern in <code style="font-family:var(--mono);font-size:12.5px;background:var(--gray-150);padding:1px 5px;border-radius:4px">TaskList</code> with optimistic cache writes, so toggling or reordering a task feels instant instead of waiting ~300ms for the round-trip.</li>
-      <li>Introduces a small <code style="font-family:var(--mono);font-size:12.5px;background:var(--gray-150);padding:1px 5px;border-radius:4px">useOptimisticTasks</code> hook that wraps the mutation, snapshots the previous list, and rolls back on error.</li>
-      <li>Extends the API client to accept an idempotency key per mutation and adds a toast when a rollback fires.</li>
-    </ul>
-  </section>
-
-  <section>
-    <h2>Risk map</h2>
-    <div class="risk-map">
-      <a class="chip attention" href="#file-hook"><span class="dot"></span>useOptimisticTasks.ts</a>
-      <a class="chip medium" href="#file-tasklist"><span class="dot"></span>TaskList.tsx</a>
-      <a class="chip medium" href="#file-api"><span class="dot"></span>api/tasks.ts</a>
-      <a class="chip safe" href="#file-toast"><span class="dot"></span>Toast.tsx</a>
-      <a class="chip safe" href="#file-types"><span class="dot"></span>types/task.ts</a>
-      <a class="chip safe" href="#file-test"><span class="dot"></span>TaskList.test.tsx</a>
-    </div>
-    <div class="legend">
-      <span><span class="dot" style="background:var(--olive)"></span> safe</span>
-      <span><span class="dot" style="background:#B89B6E"></span> worth a look</span>
-      <span><span class="dot" style="background:var(--clay)"></span> needs attention</span>
-    </div>
-  </section>
-
-  <section>
-    <h2>Files</h2>
-
-    <!-- File 1: hook (attention) -->
-    <article class="file-card" id="file-hook">
-      <div class="file-head">
-        <div>
-          <div class="file-path">src/hooks/useOptimisticTasks.ts</div>
-        </div>
-        <div style="display:flex;align-items:center;gap:12px">
-          <span class="risk-tag attention">needs attention</span>
-          <span class="file-delta"><span class="add">+58</span> <span class="del">−0</span></span>
-        </div>
-      </div>
-      <div class="diff">
-        <div class="diff-row hunk"><span class="ln"></span><span class="mark"></span><span class="code">@@ -0,0 +1,58 @@</span></div>
-        <div class="diff-row add"><span class="ln">1</span><span class="mark">+</span><span class="code">import { useMutation, useQueryClient } from '@tanstack/react-query';</span></div>
-        <div class="diff-row add"><span class="ln">2</span><span class="mark">+</span><span class="code">import { updateTask, TaskPatch } from '../api/tasks';</span></div>
-        <div class="diff-row add"><span class="ln">3</span><span class="mark">+</span><span class="code">import type { Task } from '../types/task';</span></div>
-        <div class="diff-row add"><span class="ln">4</span><span class="mark">+</span><span class="code"> </span></div>
-        <div class="diff-row add"><span class="ln">5</span><span class="mark">+</span><span class="code">export function useOptimisticTasks(boardId: string) {</span></div>
-        <div class="diff-row add"><span class="ln">6</span><span class="mark">+</span><span class="code">  const qc = useQueryClient();</span></div>
-        <div class="diff-row add"><span class="ln">7</span><span class="mark">+</span><span class="code">  const key = ['tasks', boardId];</span></div>
-        <div class="diff-row add"><span class="ln">8</span><span class="mark">+</span><span class="code"> </span></div>
-        <div class="diff-row add"><span class="ln">9</span><span class="mark">+</span><span class="code">  return useMutation({</span></div>
-        <div class="diff-row add"><span class="ln">10</span><span class="mark">+</span><span class="code">    mutationFn: (patch: TaskPatch) =&gt; updateTask(patch),</span></div>
-        <div class="diff-row add"><span class="ln">11</span><span class="mark">+</span><span class="code">    onMutate: async (patch) =&gt; {</span></div>
-        <div class="diff-row add"><span class="ln">12</span><span class="mark">+</span><span class="code">      const prev = qc.getQueryData&lt;Task[]&gt;(key);</span></div>
-        <div class="diff-row add"><span class="ln">13</span><span class="mark">+</span><span class="code">      qc.setQueryData&lt;Task[]&gt;(key, (old = []) =&gt;</span></div>
-        <div class="diff-row add"><span class="ln">14</span><span class="mark">+</span><span class="code">        old.map(t =&gt; t.id === patch.id ? { ...t, ...patch } : t)</span></div>
-        <div class="diff-row add"><span class="ln">15</span><span class="mark">+</span><span class="code">      );</span></div>
-        <div class="diff-row add"><span class="ln">16</span><span class="mark">+</span><span class="code">      return { prev };</span></div>
-        <div class="diff-row add"><span class="ln">17</span><span class="mark">+</span><span class="code">    },</span></div>
-        <div class="diff-row add"><span class="ln">18</span><span class="mark">+</span><span class="code">    onError: (_e, _p, ctx) =&gt; qc.setQueryData(key, ctx?.prev),</span></div>
-        <div class="diff-row add"><span class="ln">19</span><span class="mark">+</span><span class="code">  });</span></div>
-        <div class="diff-row add"><span class="ln">20</span><span class="mark">+</span><span class="code">}</span></div>
-      </div>
-      <div class="comments">
-        <div class="bubble blocking">
-          <div class="anchor">line 11</div>
-          <p><span class="label">Blocking</span><code>onMutate</code> doesn't call <code>qc.cancelQueries(key)</code> first. If a background refetch lands between the optimistic write and the server response, it will clobber the optimistic state and the UI will flicker back to the old value.</p>
-        </div>
-        <div class="bubble nit">
-          <div class="anchor">line 18</div>
-          <p><span class="label">Nit</span>Rollback restores the list but never surfaces the error. Consider wiring the existing <code>pushToast</code> here so users know the toggle didn't stick.</p>
-        </div>
-      </div>
-    </article>
-
-    <!-- File 2: TaskList (medium) -->
-    <article class="file-card" id="file-tasklist">
-      <div class="file-head">
-        <div>
-          <div class="file-path">src/components/TaskList.tsx</div>
-        </div>
-        <div style="display:flex;align-items:center;gap:12px">
-          <span class="risk-tag medium">worth a look</span>
-          <span class="file-delta"><span class="add">+31</span> <span class="del">−24</span></span>
-        </div>
-      </div>
-      <div class="diff">
-        <div class="diff-row hunk"><span class="ln"></span><span class="mark"></span><span class="code">@@ -42,14 +42,17 @@ export function TaskList({ boardId }: Props) {</span></div>
-        <div class="diff-row ctx"><span class="ln">42</span><span class="mark"> </span><span class="code">  const { data: tasks } = useTasks(boardId);</span></div>
-        <div class="diff-row del"><span class="ln">43</span><span class="mark">-</span><span class="code">  const [pending, setPending] = useState&lt;string | null&gt;(null);</span></div>
-        <div class="diff-row del"><span class="ln">44</span><span class="mark">-</span><span class="code"> </span></div>
-        <div class="diff-row del"><span class="ln">45</span><span class="mark">-</span><span class="code">  async function toggle(task: Task) {</span></div>
-        <div class="diff-row del"><span class="ln">46</span><span class="mark">-</span><span class="code">    setPending(task.id);</span></div>
-        <div class="diff-row del"><span class="ln">47</span><span class="mark">-</span><span class="code">    await updateTask({ id: task.id, done: !task.done });</span></div>
-        <div class="diff-row del"><span class="ln">48</span><span class="mark">-</span><span class="code">    await refetch();</span></div>
-        <div class="diff-row del"><span class="ln">49</span><span class="mark">-</span><span class="code">    setPending(null);</span></div>
-        <div class="diff-row del"><span class="ln">50</span><span class="mark">-</span><span class="code">  }</span></div>
-        <div class="diff-row add"><span class="ln">43</span><span class="mark">+</span><span class="code">  const { mutate, isPending } = useOptimisticTasks(boardId);</span></div>
-        <div class="diff-row add"><span class="ln">44</span><span class="mark">+</span><span class="code"> </span></div>
-        <div class="diff-row add"><span class="ln">45</span><span class="mark">+</span><span class="code">  const toggle = (task: Task) =&gt;</span></div>
-        <div class="diff-row add"><span class="ln">46</span><span class="mark">+</span><span class="code">    mutate({ id: task.id, done: !task.done });</span></div>
-        <div class="diff-row ctx"><span class="ln">47</span><span class="mark"> </span><span class="code"> </span></div>
-        <div class="diff-row ctx"><span class="ln">48</span><span class="mark"> </span><span class="code">  return (</span></div>
-        <div class="diff-row ctx"><span class="ln">49</span><span class="mark"> </span><span class="code">    &lt;ul className="tasks"&gt;</span></div>
-        <div class="diff-row del"><span class="ln">50</span><span class="mark">-</span><span class="code">      {tasks?.map(t =&gt; &lt;TaskRow key={t.id} task={t} busy={pending === t.id} /&gt;)}</span></div>
-        <div class="diff-row add"><span class="ln">50</span><span class="mark">+</span><span class="code">      {tasks?.map(t =&gt; &lt;TaskRow key={t.id} task={t} onToggle={toggle} /&gt;)}</span></div>
-        <div class="diff-row ctx"><span class="ln">51</span><span class="mark"> </span><span class="code">    &lt;/ul&gt;</span></div>
-      </div>
-      <div class="comments">
-        <div class="bubble nit">
-          <div class="anchor">line 43</div>
-          <p><span class="label">Nit</span><code>isPending</code> is destructured but never read. Either drop it or pass it to <code>TaskRow</code> so the checkbox can dim while the request is in flight.</p>
-        </div>
-      </div>
-    </article>
-
-    <!-- File 3: api/tasks (medium) -->
-    <article class="file-card" id="file-api">
-      <div class="file-head">
-        <div>
-          <div class="file-path">src/api/tasks.ts</div>
-        </div>
-        <div style="display:flex;align-items:center;gap:12px">
-          <span class="risk-tag medium">worth a look</span>
-          <span class="file-delta"><span class="add">+19</span> <span class="del">−6</span></span>
-        </div>
-      </div>
-      <div class="diff">
-        <div class="diff-row hunk"><span class="ln"></span><span class="mark"></span><span class="code">@@ -12,10 +12,15 @@ export type TaskPatch = Partial&lt;Task&gt; &amp; { id: string };</span></div>
-        <div class="diff-row ctx"><span class="ln">12</span><span class="mark"> </span><span class="code"> </span></div>
-        <div class="diff-row del"><span class="ln">13</span><span class="mark">-</span><span class="code">export async function updateTask(patch: TaskPatch) {</span></div>
-        <div class="diff-row del"><span class="ln">14</span><span class="mark">-</span><span class="code">  return http.patch(`/tasks/${patch.id}`, patch);</span></div>
-        <div class="diff-row add"><span class="ln">13</span><span class="mark">+</span><span class="code">export async function updateTask(</span></div>
-        <div class="diff-row add"><span class="ln">14</span><span class="mark">+</span><span class="code">  patch: TaskPatch,</span></div>
-        <div class="diff-row add"><span class="ln">15</span><span class="mark">+</span><span class="code">  key = crypto.randomUUID(),</span></div>
-        <div class="diff-row add"><span class="ln">16</span><span class="mark">+</span><span class="code">) {</span></div>
-        <div class="diff-row add"><span class="ln">17</span><span class="mark">+</span><span class="code">  return http.patch(`/tasks/${patch.id}`, patch, {</span></div>
-        <div class="diff-row add"><span class="ln">18</span><span class="mark">+</span><span class="code">    headers: { 'Idempotency-Key': key },</span></div>
-        <div class="diff-row add"><span class="ln">19</span><span class="mark">+</span><span class="code">  });</span></div>
-        <div class="diff-row ctx"><span class="ln">20</span><span class="mark"> </span><span class="code">}</span></div>
-      </div>
-      <div class="comments">
-        <div class="bubble blocking">
-          <div class="anchor">line 15</div>
-          <p><span class="label">Blocking</span>Generating the idempotency key as a default parameter means retries from the mutation layer get a <em>new</em> key each time, which defeats the purpose. The key should be minted once in <code>onMutate</code> and threaded through.</p>
-        </div>
-      </div>
-    </article>
-
-    <!-- Collapsed files -->
-    <details class="file-collapsed" id="file-toast">
-      <summary>
-        <span class="file-path">src/components/Toast.tsx</span>
-        <span style="display:flex;align-items:center;gap:12px">
-          <span class="risk-tag safe">safe</span>
-          <span class="file-delta"><span class="add">+14</span> <span class="del">−2</span></span>
-        </span>
-      </summary>
-      <div class="body">Adds a <code style="font-family:var(--mono)">variant="warning"</code> style and exports <code style="font-family:var(--mono)">pushToast</code>. Purely additive, no behaviour change for existing call sites.</div>
-    </details>
-
-    <details class="file-collapsed" id="file-types">
-      <summary>
-        <span class="file-path">src/types/task.ts</span>
-        <span style="display:flex;align-items:center;gap:12px">
-          <span class="risk-tag safe">safe</span>
-          <span class="file-delta"><span class="add">+6</span> <span class="del">−2</span></span>
-        </span>
-      </summary>
-      <div class="body">Widens <code style="font-family:var(--mono)">Task.status</code> to include <code style="font-family:var(--mono)">"archived"</code> and adds an optional <code style="font-family:var(--mono)">updatedAt</code> timestamp. Type-only change.</div>
-    </details>
-
-    <details class="file-collapsed" id="file-test">
-      <summary>
-        <span class="file-path">src/components/__tests__/TaskList.test.tsx</span>
-        <span style="display:flex;align-items:center;gap:12px">
-          <span class="risk-tag safe">safe</span>
-          <span class="file-delta"><span class="add">+14</span> <span class="del">−4</span></span>
-        </span>
-      </summary>
-      <div class="body">Adds a test asserting the row updates synchronously after click, and one asserting rollback when the mocked request rejects. Both pass locally.</div>
-    </details>
-  </section>
-
-  <footer class="next-steps">
-    <h2>Suggested next steps</h2>
-    <ul class="checklist">
-      <li>
-        <input type="checkbox" id="step1">
-        <label for="step1">Add <code>await qc.cancelQueries(key)</code> at the top of <code>onMutate</code> in <code>useOptimisticTasks.ts</code>.</label>
-      </li>
-      <li>
-        <input type="checkbox" id="step2">
-        <label for="step2">Move idempotency-key generation into the mutation context so retries reuse the same key.</label>
-      </li>
-      <li>
-        <input type="checkbox" id="step3">
-        <label for="step3">Either consume <code>isPending</code> in <code>TaskRow</code> or remove it from the destructure to keep lint clean.</label>
-      </li>
-    </ul>
-  </footer>
-
-</div>
-
-<style>
-* { box-sizing: border-box; margin: 0; padding: 0; }
-.page {
-    max-width: 920px;
-    margin: 0 auto;
-  }
-/* ---------- Header ---------- */
-  header.pr-head {
-    border: 1.5px solid var(--gray-300);
-    border-radius: 12px;
-    padding: 28px 32px;
-    background: #fff;
-    margin-bottom: 36px;
-  }
-.repo-line {
-    font-family: var(--mono);
-    font-size: 12.5px;
-    color: var(--gray-500);
-    letter-spacing: 0.01em;
-    margin-bottom: 10px;
-  }
-h1 {
-    font-family: var(--serif);
-    font-weight: 500;
-    font-size: 30px;
-    line-height: 1.25;
-    color: var(--slate);
-    margin-bottom: 18px;
-  }
-.meta-row {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 20px;
-  }
-.author {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-.avatar {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background: var(--oat);
-    color: var(--slate);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 600;
-    font-size: 13px;
-    letter-spacing: 0.02em;
-    border: 1.5px solid var(--gray-300);
-  }
-.author-name { font-weight: 500; color: var(--slate); }
-.author-sub { font-size: 12px; color: var(--gray-500); }
-.branch {
-    font-family: var(--mono);
-    font-size: 12.5px;
-    color: var(--gray-700);
-    background: var(--gray-150);
-    border: 1.5px solid var(--gray-300);
-    border-radius: 8px;
-    padding: 6px 10px;
-  }
-.branch .arrow { color: var(--gray-500); margin: 0 6px; }
-.stat {
-    font-family: var(--mono);
-    font-size: 13px;
-  }
-.stat .add { color: var(--olive); font-weight: 600; }
-.stat .del { color: var(--rust); font-weight: 600; }
-.stat .files { color: var(--gray-500); margin-left: 10px; }
-/* ---------- Section blocks ---------- */
-  section { margin-bottom: 40px; }
-h2 {
-    font-family: var(--serif);
-    font-weight: 500;
-    font-size: 21px;
-    color: var(--slate);
-    margin-bottom: 14px;
-  }
-.prose ul {
-    list-style: none;
-    padding: 0;
-  }
-.prose li {
-    position: relative;
-    padding-left: 22px;
-    margin-bottom: 10px;
-  }
-.prose li::before {
-    content: "";
-    position: absolute;
-    left: 4px;
-    top: 9px;
-    width: 6px;
-    height: 6px;
-    background: var(--gray-500);
-    border-radius: 2px;
-  }
-/* ---------- Risk map ---------- */
-  .risk-map {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-  }
-.chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 12px;
-    border-radius: 8px;
-    border: 1.5px solid var(--gray-300);
-    font-family: var(--mono);
-    font-size: 12.5px;
-    color: var(--slate);
-    text-decoration: none;
-    background: #fff;
-    transition: transform 0.12s ease;
-  }
-.chip:hover { transform: translateY(-1px); }
-.chip .dot {
-    width: 9px;
-    height: 9px;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-.chip.safe { background: rgba(120,140,93,0.10); border-color: rgba(120,140,93,0.45); }
-.chip.safe .dot { background: var(--olive); }
-.chip.medium { background: var(--oat); }
-.chip.medium .dot { background: #B89B6E; }
-.chip.attention { background: rgba(217,119,87,0.12); border-color: rgba(217,119,87,0.55); }
-.chip.attention .dot { background: var(--clay); }
-.legend {
-    margin-top: 12px;
-    font-size: 12px;
-    color: var(--gray-500);
-    display: flex;
-    gap: 18px;
-  }
-.legend span { display: inline-flex; align-items: center; gap: 6px; }
-.legend .dot { width: 8px; height: 8px; border-radius: 50%; }
-/* ---------- File sections ---------- */
-  .file-card {
-    border: 1.5px solid var(--gray-300);
-    border-radius: 12px;
-    background: #fff;
-    margin-bottom: 24px;
-    overflow: hidden;
-    scroll-margin-top: 20px;
-  }
-.file-head {
-    padding: 16px 20px;
-    border-bottom: 1.5px solid var(--gray-150);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-  }
-.file-path {
-    font-family: var(--mono);
-    font-size: 13.5px;
-    color: var(--slate);
-  }
-.file-delta {
-    font-family: var(--mono);
-    font-size: 12px;
-    color: var(--gray-500);
-  }
-.file-delta .add { color: var(--olive); }
-.file-delta .del { color: var(--rust); }
-.risk-tag {
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    padding: 3px 8px;
-    border-radius: 6px;
-    font-weight: 600;
-  }
-.risk-tag.safe { background: rgba(120,140,93,0.15); color: var(--olive); }
-.risk-tag.medium { background: var(--oat); color: #7A6A4F; }
-.risk-tag.attention { background: rgba(217,119,87,0.15); color: var(--clay); }
-/* ---------- Diff block ---------- */
-  .diff {
-    background: var(--slate);
-    font-family: var(--mono);
-    font-size: 12.5px;
-    line-height: 1.7;
-    overflow-x: auto;
-  }
-.diff-row {
-    display: grid;
-    grid-template-columns: 48px 18px 1fr;
-    align-items: baseline;
-    padding: 0 14px 0 0;
-    white-space: pre;
-  }
-.diff-row .ln {
-    text-align: right;
-    padding-right: 14px;
-    color: var(--gray-500);
-    user-select: none;
-  }
-.diff-row .mark {
-    text-align: center;
-    color: var(--gray-500);
-  }
-.diff-row .code { color: #E8E6DC; }
-.diff-row.ctx .code { color: #B8B6AC; }
-.diff-row.add { background: rgba(120,140,93,0.15); }
-.diff-row.add .mark { color: var(--olive); }
-.diff-row.del { background: rgba(176,74,63,0.15); }
-.diff-row.del .mark { color: var(--rust); }
-.diff-row.hunk {
-    background: rgba(255,255,255,0.04);
-    color: var(--gray-500);
-  }
-.diff-row.hunk .code { color: var(--gray-500); }
-/* ---------- Review comments ---------- */
-  .comments {
-    padding: 18px 20px 20px;
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-    background: var(--gray-150);
-  }
-.bubble {
-    position: relative;
-    background: #fff;
-    border: 1.5px solid var(--gray-300);
-    border-left-width: 4px;
-    border-radius: 8px;
-    padding: 12px 14px 12px 16px;
-    max-width: 680px;
-  }
-.bubble.blocking { border-left-color: var(--clay); }
-.bubble.nit { border-left-color: var(--gray-300); }
-.bubble::before {
-    content: "";
-    position: absolute;
-    left: -9px;
-    top: 16px;
-    width: 12px;
-    height: 12px;
-    background: #fff;
-    border-left: 1.5px solid var(--gray-300);
-    border-bottom: 1.5px solid var(--gray-300);
-    transform: rotate(45deg);
-  }
-.bubble.blocking::before { border-left-color: var(--clay); border-bottom-color: var(--clay); }
-.bubble .anchor {
-    font-family: var(--mono);
-    font-size: 11.5px;
-    color: var(--gray-500);
-    margin-bottom: 4px;
-  }
-.bubble .label {
-    display: inline-block;
-    font-size: 10.5px;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    font-weight: 700;
-    margin-right: 8px;
-  }
-.bubble.blocking .label { color: var(--clay); }
-.bubble.nit .label { color: var(--gray-500); }
-.bubble p { font-size: 13.5px; color: var(--gray-700); }
-.bubble code {
-    font-family: var(--mono);
-    font-size: 12.5px;
-    background: var(--gray-150);
-    padding: 1px 5px;
-    border-radius: 4px;
-  }
-/* ---------- Collapsed files ---------- */
-  details.file-collapsed {
-    border: 1.5px solid var(--gray-300);
-    border-radius: 12px;
-    background: #fff;
-    margin-bottom: 14px;
-    scroll-margin-top: 20px;
-  }
-details.file-collapsed summary {
-    list-style: none;
-    cursor: pointer;
-    padding: 14px 20px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-  }
-details.file-collapsed summary::-webkit-details-marker { display: none; }
-details.file-collapsed summary::after {
-    content: "+";
-    font-family: var(--mono);
-    color: var(--gray-500);
-    font-size: 16px;
-  }
-details.file-collapsed[open] summary::after { content: "−"; }
-details.file-collapsed .body {
-    padding: 0 20px 16px;
-    font-size: 13.5px;
-    color: var(--gray-700);
-  }
-/* ---------- Footer ---------- */
-  footer.next-steps {
-    border: 1.5px solid var(--gray-300);
-    border-radius: 12px;
-    background: #fff;
-    padding: 24px 28px;
-  }
-.checklist { list-style: none; padding: 0; }
-.checklist li {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-    padding: 8px 0;
-  }
-.checklist input[type="checkbox"] {
-    width: 17px;
-    height: 17px;
-    margin-top: 2px;
-    accent-color: var(--olive);
-    cursor: pointer;
-  }
-.checklist label { cursor: pointer; flex: 1; }
-.checklist code {
-    font-family: var(--mono);
-    font-size: 12.5px;
-    background: var(--gray-150);
-    padding: 1px 5px;
-    border-radius: 4px;
-  }
-</style>
-
-<script>
-// Briefly highlight a file card when reached via the risk-map anchors.
-  document.querySelectorAll('.risk-map a').forEach(function (a) {
-    a.addEventListener('click', function () {
-      var target = document.querySelector(a.getAttribute('href'));
-      if (!target) return;
-      target.style.transition = 'box-shadow 180ms ease';
-      target.style.boxShadow = '0 0 0 3px rgba(217,119,87,0.35)';
-      setTimeout(function () { target.style.boxShadow = 'none'; }, 1400);
-    });
-  });
-</script>