失敗清單改成「檔名 + 三角形，預設收合」（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/style.css

@@ -220,3 +220,26 @@ input[type=text], input[type=password] {
 .step.now  { font-weight: 600; }
 .step .t { flex: 1; }
 .step .m { font-size: 12.5px; color: rgba(var(--ink-rgb), .45); }
+
+/* 失敗清單：檔名一行、細節收在三角形裡（leo 2026-08-06：
+   「顯示沒通過的名稱，旁邊有個三角形，點擊看到失敗細節，default 摺疊起來」）。
+   先前重用 .step 的橫向格線，害中文檔名被擠成一行一個字。 */
+.faillist { margin-top: 12px; }
+.fail { border-top: 1px solid rgba(var(--ink-rgb), .10); }
+.fail:first-child { border-top: 0; }
+.fail > summary {
+  cursor: pointer;
+  padding: 10px 2px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-break: break-word;   /* 長檔名要能換行，但不是一字一行 */
+  list-style: revert;       /* 保留原生三角形 */
+}
+.fail > summary::marker { color: var(--amber); }
+.fail[open] > summary { font-weight: 600; }
+.failwhy {
+  padding: 2px 2px 12px 18px;
+  font-size: 13px;
+  line-height: 1.7;
+  color: rgba(var(--ink-rgb), .68);
+}