@reportforge/playwright-pdf 0.4.1 → 0.5.0

package/dist/templates/partials/charts.hbs

@@ -71,12 +71,14 @@
   var remaining = 0;
   function chartDone() { if (--remaining === 0) window.__chartsReady = true; }
 
-  var passed  = {{charts.passRate.passed}};
-  var failed  = {{charts.passRate.failed}};
-  var skipped = {{charts.passRate.skipped}};
-  var flaky   = {{charts.passRate.flaky}};
-  var total   = passed + failed + skipped + flaky;
-  var passRate = total > 0 ? Math.round((passed / total) * 100) : 0;
+  var passed   = {{charts.passRate.passed}};
+  var failed   = {{charts.passRate.failed}};
+  var timedOut = {{charts.passRate.timedOut}};
+  var skipped  = {{charts.passRate.skipped}};
+  var flaky    = {{charts.passRate.flaky}};
+  // Pass rate is the canonical server-side stat (flaky counts as pass, denominator
+  // is every test) so the doughnut centre can never disagree with the KPI strip.
+  var passRate = {{stats.passRate}};
 
   /* ── Centre-text plugin for the doughnut ─────────────────────────────── */
   var centerTextPlugin = {
@@ -107,11 +109,11 @@
   new Chart(document.getElementById('passRateChart'), {
     type: 'doughnut',
     data: {
-      labels: ['Passed', 'Failed', 'Skipped', 'Flaky'],
+      labels: ['Passed', 'Failed', 'Timed Out', 'Skipped', 'Flaky'],
       datasets: [{
-        data: [passed, failed, skipped, flaky],
-        backgroundColor: ['#3F7D58', '#C3553C', '#7A786E', '#D49452'],
-        borderColor:     ['#FAF9F5', '#FAF9F5', '#FAF9F5', '#FAF9F5'],
+        data: [passed, failed, timedOut, skipped, flaky],
+        backgroundColor: ['#3F7D58', '#C3553C', '#B5803A', '#7A786E', '#D49452'],
+        borderColor:     ['#FAF9F5', '#FAF9F5', '#FAF9F5', '#FAF9F5', '#FAF9F5'],
         borderWidth: 2,
         hoverOffset: 4
       }]
@@ -135,8 +137,9 @@
   /* ── Horizontal suite results bar ────────────────────────────────────── */
   var suiteLabels  = [{{{jsonArray charts.suiteResults 'label'}}}];
   var suitePassed  = [{{{jsonArray charts.suiteResults 'passed'}}}];
-  var suiteFailed  = [{{{jsonArray charts.suiteResults 'failed'}}}];
-  var suiteSkipped = [{{{jsonArray charts.suiteResults 'skipped'}}}];
+  var suiteFailed   = [{{{jsonArray charts.suiteResults 'failed'}}}];
+  var suiteTimedOut = [{{{jsonArray charts.suiteResults 'timedOut'}}}];
+  var suiteSkipped  = [{{{jsonArray charts.suiteResults 'skipped'}}}];
 
   remaining += 1;
   new Chart(document.getElementById('suitesBarChart'), {
@@ -144,9 +147,10 @@
     data: {
       labels: suiteLabels,
       datasets: [
-        { label: 'Passed',  data: suitePassed,  backgroundColor: '#3F7D58', borderRadius: 3 },
-        { label: 'Failed',  data: suiteFailed,  backgroundColor: '#C3553C', borderRadius: 3 },
-        { label: 'Skipped', data: suiteSkipped, backgroundColor: '#7A786E', borderRadius: 3 }
+        { label: 'Passed',    data: suitePassed,   backgroundColor: '#3F7D58', borderRadius: 3 },
+        { label: 'Failed',    data: suiteFailed,   backgroundColor: '#C3553C', borderRadius: 3 },
+        { label: 'Timed Out', data: suiteTimedOut, backgroundColor: '#B5803A', borderRadius: 3 },
+        { label: 'Skipped',   data: suiteSkipped,  backgroundColor: '#7A786E', borderRadius: 3 }
       ]
     },
     options: {
@@ -161,7 +165,17 @@
         },
         y: {
           stacked: true,
-          ticks: { font: { size: 9, family: 'Inter, sans-serif' }, color: '#1F1F1C' },
+          // Widen the label gutter so the longest label isn't clipped at the canvas edge.
+          afterFit: function(scale) { if (!scale.$rfPadded) { scale.$rfPadded = true; scale.width += 8; } },
+          ticks: {
+            font: { size: 9, family: 'Inter, sans-serif' }, color: '#1F1F1C', autoSkip: false,
+            // Truncate long suite / describe labels so they fit the axis gutter
+            // instead of clipping at the canvas edge.
+            callback: function(value) {
+              var l = this.getLabelForValue(value);
+              return l.length > 24 ? l.slice(0, 23) + '…' : l;
+            }
+          },
           grid:   { display: false },
           border: { color: '#D6D4C8' }
         }

package/dist/templates/partials/cover-page.hbs

@@ -9,7 +9,7 @@
   <div class="cover-page__divider"></div>
 
   <span class="cover-page__verdict cover-page__verdict--{{stats.verdict}}">
-    {{upperCase stats.verdict}}
+    {{verdictLabel stats.verdict}}
   </span>
 
   <div class="cover-page__stats-strip">

package/dist/templates/partials/executive-summary.hbs

@@ -1,6 +1,6 @@
 <div class="section">
   <span class="verdict verdict--{{stats.verdict}}">
-    {{upperCase stats.verdict}}
+    {{verdictLabel stats.verdict}}
   </span>
 
   <div class="kpi-strip">
@@ -19,6 +19,10 @@
       <div class="kpi-card__value">{{stats.failed}}</div>
       <div class="kpi-card__label">Failed</div>
     </div>
+    <div class="kpi-card kpi-card--timedout">
+      <div class="kpi-card__value">{{stats.timedOut}}</div>
+      <div class="kpi-card__label">Timed Out</div>
+    </div>
     <div class="kpi-card kpi-card--skip">
       <div class="kpi-card__value">{{stats.skipped}}</div>
       <div class="kpi-card__label">Skipped</div>

package/dist/templates/partials/failure-deep-dive.hbs

@@ -1,5 +1,5 @@
 {{#if failures.length}}
-<div class="section page-break">
+<div class="section">
   <h2>Failures ({{failures.length}}{{#if overflowFailureCount}} shown · {{overflowFailureCount}} more in sidecar{{/if}})</h2>
   {{#if overflowFailureCount}}
   <div class="overflow-banner">
@@ -9,7 +9,7 @@
   </div>
   {{/if}}
   {{#each failures}}
-  <div class="failure-item no-break">
+  <div class="failure-item failure-item--{{severity}} no-break">
     {{#if ../options.showFullFailures}}
 
     <div class="failure-item__header">

package/dist/templates/partials/requirements-matrix.hbs

@@ -23,7 +23,7 @@
         <td style="color:{{#if failed}}var(--fail){{else}}var(--pass){{/if}};font-weight:600;">{{failed}}</td>
         <td>
           <div class="coverage-bar">
-            <div class="coverage-bar__fill" style="width:{{coveragePct}}%;"></div>
+            <div class="coverage-bar__fill coverage-bar__fill--{{coverageBand coveragePct}}" style="width:{{coveragePct}}%;"></div>
           </div>
           <span style="font-size:9.5px;color:var(--text-3);">{{coveragePct}}%</span>
         </td>

package/dist/templates/partials/slow-tests.hbs

@@ -16,9 +16,9 @@
       <tr class="no-break">
         <td style="font-weight:500;">{{title}}</td>
         <td style="font-size:9px;color:var(--text-3);font-family:'JetBrains Mono',monospace;">{{suiteTitle}}</td>
-        {{#if ../showProject}}<td style="font-size:9px;color:var(--text-3);">{{project}}</td>{{/if}}
+        {{#if ../showProject}}<td style="font-size:9px;color:var(--text-3);white-space:nowrap;">{{project}}</td>{{/if}}
         <td style="font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--text-2);text-align:right;">{{durationFormatted}}</td>
-        <td><span class="badge badge--{{status}}">{{status}}</span></td>
+        <td>{{statusBadge status}}</td>
       </tr>
       {{/each}}
     </tbody>

package/dist/templates/partials/suite-breakdown.hbs

@@ -15,6 +15,7 @@
     <span class="suite-stats">
       <span class="badge badge--passed">{{stats.passed}}</span>
       {{#if stats.failed}}<span class="badge badge--failed">{{stats.failed}}</span>{{/if}}
+      {{#if stats.timedOut}}<span class="badge badge--timedout">{{stats.timedOut}}</span>{{/if}}
       {{#if stats.skipped}}<span class="badge badge--skipped">{{stats.skipped}}</span>{{/if}}
       {{#if stats.flaky}}<span class="badge badge--flaky">{{stats.flaky}}</span>{{/if}}
     </span>
@@ -41,7 +42,7 @@
           </div>
           {{/if}}
         </td>
-        <td><span class="badge badge--{{status}}">{{status}}</span></td>
+        <td>{{statusBadge status}}</td>
         <td style="color:var(--text-2);font-family:'JetBrains Mono',monospace;font-size:9.5px;">{{formatDuration duration}}</td>
         {{#if ../../options.showRetries}}<td style="color:var(--text-3);text-align:center;">{{retryCount}}</td>{{/if}}
       </tr>

package/dist/templates/styles/base.css

@@ -149,14 +149,19 @@ tr:last-child td { border-bottom: none; }
 }
 
 /* ── Page breaks ────────────────────────────────────────────────────────── */
-.page-break { page-break-before: always; }
-.no-break   { page-break-inside: avoid; }
-.page-group { page-break-before: always; page-break-inside: avoid; break-inside: avoid; }
-.page-group > .section { page-break-inside: avoid; break-inside: avoid; }
-.page-group > .section:last-child { margin-bottom: 0; }
+.no-break { page-break-inside: avoid; }
 
 /* ── Section wrapper ────────────────────────────────────────────────────── */
-.section { margin-bottom: 24px; page-break-inside: avoid; }
+/* Large sections (suite breakdown, failures, tables) MAY flow across pages —
+   their rows carry .no-break so they never split mid-row. Only the small atomic
+   blocks below stay glued together, and headings stick to the content beneath. */
+.section { margin-bottom: 24px; }
+.kpi-strip, .summary-row, .charts-grid, .release-gate, .flaky-callout,
+.trend-card, .flakiness-card, .cover-page__stats-strip, .env-grid {
+  page-break-inside: avoid; break-inside: avoid;
+}
+h2, h3 { page-break-after: avoid; break-after: avoid; }
+.suite-group__header { page-break-after: avoid; break-after: avoid; }
 
 /* ── Code / stack trace ─────────────────────────────────────────────────── */
 pre, code {
@@ -235,3 +240,236 @@ code {
 
 /* ── Failure-analysis one-liner — shared by detailed + executive templates ── */
 .analysis-oneliner { font-size: 0.9em; opacity: 0.9; margin-top: 4px; }
+
+/* ── Release gate — ship/hold banner, shared by all templates ────────────── */
+.release-gate {
+  display: flex; align-items: center; gap: 16px;
+  padding: 16px 20px; border-radius: 6px; margin-bottom: 22px;
+  border: 1px solid;
+  position: relative; overflow: hidden;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+.release-gate--pass {
+  background: var(--pass-dim); border-color: #C5DBC9;
+}
+.release-gate--fail {
+  background: var(--fail-dim); border-color: #E5C9BD;
+}
+.release-gate__icon {
+  font-size: 22px; font-weight: 700; flex-shrink: 0; width: 32px;
+  text-align: center; line-height: 1;
+}
+.release-gate--pass .release-gate__icon { color: var(--pass); }
+.release-gate--fail .release-gate__icon { color: var(--fail); }
+.release-gate__body { flex: 1; }
+.release-gate__label {
+  font-family: 'Inter', system-ui, sans-serif; font-size: 8px;
+  font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
+  color: var(--text-3); margin-bottom: 4px;
+}
+.release-gate__verdict {
+  font-family: 'Source Serif Pro', Georgia, serif;
+  font-size: 18px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.1;
+}
+.release-gate__verdict--pass { color: var(--pass); }
+.release-gate__verdict--fail { color: var(--fail); }
+.release-gate__detail {
+  font-family: 'Inter', system-ui, sans-serif; font-size: 10px;
+  color: var(--text-2); margin-top: 4px;
+}
+.release-gate__meta {
+  display: flex; flex-direction: column; gap: 3px; align-items: flex-end;
+  font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text-3);
+  flex-shrink: 0; text-align: right;
+}
+.release-gate__sep { color: var(--border-3); }
+.release-gate__flaky-warn { color: var(--flaky); font-weight: 600; }
+
+/* ── Failure severity — colour the card's left edge by triage rank ───────── */
+/* Two-class specificity beats the per-template `.failure-item` border shorthand. */
+.failure-item.failure-item--critical { border-left-color: var(--fail); }
+.failure-item.failure-item--high     { border-left-color: #A35E1E; }
+.failure-item.failure-item--medium   { border-left-color: var(--timeout); }
+.failure-item.failure-item--low      { border-left-color: var(--text-3); }
+
+/* ── History trend card — shared by detailed + executive (charts.hbs) ─────── */
+.trend-card {
+  background: var(--surface);
+  border: 1px solid var(--border-2);
+  border-radius: 6px;
+  padding: 16px 18px 14px;
+  margin-bottom: 24px;
+  page-break-inside: avoid;
+}
+.trend-card__header {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 14px;
+}
+.trend-card__title {
+  font-family: 'Inter', system-ui, sans-serif;
+  font-size: 9px; font-weight: 700;
+  letter-spacing: 1.2px; text-transform: uppercase;
+  color: var(--text-3);
+}
+.delta       { font-size: 11px; font-weight: 700; }
+.delta-up    { color: var(--pass); }
+.delta-down  { color: var(--fail); }
+
+/* ── Run history table (generated by JS) ─────────────────────────────────── */
+.trend-run-history {
+  margin-top: 10px;
+  border-top: 1px solid var(--border);
+  padding-top: 8px;
+}
+.rh-item {
+  display: flex; align-items: center; gap: 12px;
+  padding: 5px 8px; border-radius: 4px;
+  font-size: 9px; font-family: 'Inter', system-ui, sans-serif;
+}
+.rh-item:nth-child(odd) {
+  background: var(--surface-2);
+  -webkit-print-color-adjust: exact; print-color-adjust: exact;
+}
+.rh-dot      { flex-shrink: 0; }
+.rh-date     { color: var(--text-2); flex: 1; }
+.rh-rate     { font-weight: 700; min-width: 34px; color: var(--text-1); }
+.rh-rate--pass    { color: var(--pass); }
+.rh-rate--fail    { color: var(--fail); }
+.rh-rate--partial { color: var(--flaky); }
+.rh-tests    { color: var(--text-3); min-width: 58px; }
+.rh-dur      { color: var(--text-3); }
+
+/* ── Verdict dots (used in run history rh-dot) ───────────────────────────── */
+.verdict-dot     { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+.verdict-passed  { background: var(--pass);  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+.verdict-partial { background: var(--flaky); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+.verdict-failed  { background: var(--fail);  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+.verdict-unknown { background: var(--skip);  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+
+/* ── Flakiness trend table (R8) ─────────────────────────────────────────── */
+.flakiness-card {
+  margin: 24px 0 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.flakiness-card__header {
+  display: flex;
+  align-items: center;
+  padding: 10px 16px;
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--border);
+}
+
+.flakiness-card__title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-3);
+}
+
+.flakiness-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 11px;
+}
+
+.flakiness-table thead th {
+  padding: 8px 12px;
+  text-align: left;
+  font-weight: 600;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-3);
+  border-bottom: 1px solid var(--border);
+  background: var(--surface-2);
+}
+
+.flakiness-table tbody tr {
+  border-bottom: 1px solid var(--border);
+}
+
+.flakiness-table tbody tr:last-child {
+  border-bottom: none;
+}
+
+.flakiness-table tbody td {
+  padding: 8px 12px;
+  vertical-align: middle;
+  color: var(--text-1);
+}
+
+.flakiness-table__test {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.flakiness-table__rate {
+  width: 72px;
+  font-weight: 600;
+  color: var(--flaky);
+}
+
+.flakiness-table__count {
+  width: 72px;
+  color: var(--text-3);
+}
+
+.flakiness-table__spark {
+  width: 140px;
+}
+
+.flaky-spark {
+  display: flex;
+  gap: 3px;
+  align-items: center;
+}
+
+.flaky-dot {
+  flex-shrink: 0;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--border, #e5e3d8);
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+}
+
+.flaky-dot--hit {
+  background: #f59e0b;
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+}
+
+/* ── Environment grid — compact ci-environment, shared by minimal + executive ─ */
+.env-grid {
+  display: grid; grid-template-columns: 1fr 1fr;
+  gap: 0;
+  background: var(--surface);
+  border: 1px solid var(--border-2);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.env-item {
+  display: flex; gap: 12px; font-size: 10.5px; align-items: baseline;
+  padding: 10px 18px;
+  border-bottom: 1px solid var(--border);
+  border-right: 1px solid var(--border);
+}
+.env-item:nth-child(even) { border-right: none; }
+.env-item:nth-last-child(-n+2) { border-bottom: none; }
+.env-item__key {
+  font-family: 'Inter', system-ui, sans-serif; font-weight: 600;
+  font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase;
+  color: var(--text-2); min-width: 80px;
+}
+.env-item__val {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9.5px; color: var(--text-1);
+}

package/dist/templates/styles/detailed.css

@@ -57,7 +57,7 @@
 
 /* ── KPI strip ───────────────────────────────────────────────────────────── */
 .kpi-strip {
-  display: grid; grid-template-columns: repeat(5, 1fr);
+  display: grid; grid-template-columns: repeat(6, 1fr);
   gap: 10px; margin-bottom: 22px;
 }
 .kpi-card {
@@ -74,6 +74,7 @@
 .kpi-card--total::before { background: var(--accent); }
 .kpi-card--pass::before  { background: var(--pass); }
 .kpi-card--fail::before  { background: var(--fail); }
+.kpi-card--timedout::before { background: var(--timeout); }
 .kpi-card--skip::before  { background: var(--skip); }
 .kpi-card--flaky::before { background: var(--flaky); }
 
@@ -87,6 +88,7 @@
 .kpi-card--total .kpi-card__value { color: var(--info); }
 .kpi-card--pass  .kpi-card__value { color: var(--pass); }
 .kpi-card--fail  .kpi-card__value { color: var(--fail); }
+.kpi-card--timedout .kpi-card__value { color: var(--timeout); }
 .kpi-card--skip  .kpi-card__value { color: var(--skip); }
 .kpi-card--flaky .kpi-card__value { color: var(--flaky); }
 
@@ -230,10 +232,12 @@
 }
 .coverage-bar__fill {
   height: 100%; border-radius: 3px;
-  background: var(--pass);
   -webkit-print-color-adjust: exact;
   print-color-adjust: exact;
 }
+.coverage-bar__fill--low  { background: var(--fail); }
+.coverage-bar__fill--mid  { background: var(--timeout); }
+.coverage-bar__fill--high { background: var(--pass); }
 
 /* ── Environment table ───────────────────────────────────────────────────── */
 .env-table {
@@ -254,160 +258,6 @@
   font-size: 9.5px; color: var(--text-1);
 }
 
-/* ── History trend card ──────────────────────────────────────────────────── */
-.trend-card {
-  background: var(--surface);
-  border: 1px solid var(--border-2);
-  border-radius: 6px;
-  padding: 16px 18px 14px;
-  margin-bottom: 24px;
-  page-break-inside: avoid;
-}
-.trend-card__header {
-  display: flex; align-items: center; justify-content: space-between;
-  margin-bottom: 14px;
-}
-.trend-card__title {
-  font-family: 'Inter', system-ui, sans-serif;
-  font-size: 9px; font-weight: 700;
-  letter-spacing: 1.2px; text-transform: uppercase;
-  color: var(--text-3);
-}
-.delta       { font-size: 11px; font-weight: 700; }
-.delta-up    { color: var(--pass); }
-.delta-down  { color: var(--fail); }
-
-/* ── Run history table (generated by JS) ─────────────────────────────────── */
-.trend-run-history {
-  margin-top: 10px;
-  border-top: 1px solid var(--border);
-  padding-top: 8px;
-}
-.rh-item {
-  display: flex; align-items: center; gap: 12px;
-  padding: 5px 8px; border-radius: 4px;
-  font-size: 9px; font-family: 'Inter', system-ui, sans-serif;
-}
-.rh-item:nth-child(odd) {
-  background: var(--surface-2);
-  -webkit-print-color-adjust: exact; print-color-adjust: exact;
-}
-.rh-dot      { flex-shrink: 0; }
-.rh-date     { color: var(--text-2); flex: 1; }
-.rh-rate     { font-weight: 700; min-width: 34px; color: var(--text-1); }
-.rh-rate--pass    { color: var(--pass); }
-.rh-rate--fail    { color: var(--fail); }
-.rh-rate--partial { color: var(--flaky); }
-.rh-tests    { color: var(--text-3); min-width: 58px; }
-.rh-dur      { color: var(--text-3); }
-
-/* ── Verdict dots (used in run history rh-dot) ───────────────────────────── */
-.verdict-dot     { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
-.verdict-passed  { background: var(--pass);  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-.verdict-partial { background: var(--flaky); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-.verdict-failed  { background: var(--fail);  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-.verdict-unknown { background: var(--skip);  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-
-/* ── Flakiness trend table (R8) ─────────────────────────────────────────── */
-.flakiness-card {
-  margin: 24px 0 0;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.flakiness-card__header {
-  display: flex;
-  align-items: center;
-  padding: 10px 16px;
-  background: var(--surface-2);
-  border-bottom: 1px solid var(--border);
-}
-
-.flakiness-card__title {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--text-3);
-}
-
-.flakiness-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 11px;
-}
-
-.flakiness-table thead th {
-  padding: 8px 12px;
-  text-align: left;
-  font-weight: 600;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--text-3);
-  border-bottom: 1px solid var(--border);
-  background: var(--surface-2);
-}
-
-.flakiness-table tbody tr {
-  border-bottom: 1px solid var(--border);
-}
-
-.flakiness-table tbody tr:last-child {
-  border-bottom: none;
-}
-
-.flakiness-table tbody td {
-  padding: 8px 12px;
-  vertical-align: middle;
-  color: var(--text-1);
-}
-
-.flakiness-table__test {
-  max-width: 300px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.flakiness-table__rate {
-  width: 72px;
-  font-weight: 600;
-  color: var(--flaky);
-}
-
-.flakiness-table__count {
-  width: 72px;
-  color: var(--text-3);
-}
-
-.flakiness-table__spark {
-  width: 140px;
-}
-
-.flaky-spark {
-  display: flex;
-  gap: 3px;
-  align-items: center;
-}
-
-.flaky-dot {
-  flex-shrink: 0;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--border, #e5e3d8);
-  print-color-adjust: exact;
-  -webkit-print-color-adjust: exact;
-}
-
-.flaky-dot--hit {
-  background: #f59e0b;
-  print-color-adjust: exact;
-  -webkit-print-color-adjust: exact;
-}
-
 /* ── Failure Analysis ───────────────────────────────────────────────────── */
 /* NOTE: .analysis-oneliner lives in base.css — the executive template renders it too. */
 .failure-analysis { margin-top: 24px; }
@@ -428,6 +278,3 @@
 .cluster--env-config        { border-color: oklch(55% 0.15 145); }
 .cluster--unknown           { border-color: oklch(60% 0.00 0);   }
 .confidence-warning { font-size: 0.8em; opacity: 0.75; }
-
-</content>
-</invoke>