失敗清單改成「檔名 + 三角形，預設收合」（leo 實測版面被壓扁）

leo：「表格最左邊的標題被壓扁了…**可以顯示沒通過的名稱，旁邊有個三角形，
點擊看到失敗細節，default 摺疊起來，重點是找到問題在哪裏**」

## 真兇
我重用 `.step` 的橫向格線（`display:flex` + 原因擠在右邊）
⇒ 中文檔名被壓成**一行一個字**（實撞截圖）。

## 改法
改用原生 `<details>/<summary>`：三角形、鍵盤可操作、預設收合都不必自己寫。
檔名一行（`word-break: break-word`，長檔名換行但不是一字一行），
原因收在裡面，需要時才展開——**先看到「哪些檔沒過」，細節是第二層**。
CSS 用實際存在的 CIS 變數（`--ink-rgb`／`--amber`；原本誤用不存在的 `--hair`／`--ink-soft`）。

## 驗
`node --check` 過、`check-cis.sh` **全過**、go build 過。
⚠️ **未真機驗**（未打包送到 leo 手上）。

cmd/arcrun-app/frontend/src/main.js

@@ -112,16 +112,21 @@ function cardTrouble(s) {
 // 而原因本來就在 status.json 裡 —— 數字不能代替原因。
 function cardFailures(f) {
   if (!f || !f.items || !f.items.length) return '';
+  // 🔴 leo 2026-08-06：「**可以顯示沒通過的名稱，旁邊有個三角形，點擊看到失敗細節，
+  //    default 摺疊起來，重點是找到問題在哪裏**」
+  //    ——他要的是先看到「哪些檔沒過」，細節是需要時才展開。
+  //    先前把原因直接攤在旁邊，害檔名欄被擠成一行一個字（實撞截圖）。
+  //    用原生 <details>：三角形、鍵盤可操作、預設收合，都不必自己寫。
   return `
     <div class="card">
       <h3>${esc(f.title)}</h3>
       <div class="d">${esc(f.note)}</div>
-      <div class="steps" style="margin-top:10px">
+      <div class="faillist">
         ${f.items.map((it) => `
-          <div class="step">
-            <span class="t">${esc(it.name)}</span>
-            <span class="m">${esc(it.reason)}</span>
-          </div>`).join('')}
+          <details class="fail">
+            <summary>${esc(it.name)}</summary>
+            <div class="failwhy">${esc(it.reason)}</div>
+          </details>`).join('')}
       </div>
       ${f.more > 0 ? `<div class="d" style="margin-top:8px">…還有 ${f.more} 份</div>` : ''}
     </div>`;