/* Design tokens — Linear 設計語言 × CRA 識別。 深色＝暖炭黑 canvas＋亮金 #e8be06 為唯一彩色重點；淺色＝冷灰白＋薰衣草藍 #5e6ad2 （2026-09-01：淺色金色版偏費力，回退回藍白）。層次靠 hairline 邊框而非陰影，標題負字距。 */ :root { color-scheme: dark; /* 讓 select/checkbox/scrollbar/dialog 原生走深色 */ /* Surface ladder（canvas → surface-1..3）— 暖炭黑而非冷藍黑，維持 ~+7 明度階梯。 暖中性刻意偏向品牌金（暖色），讓金黃重點色坐得住＝法遵儀表的權威感（非 AI 慣用冷黑）。 */ --bg: #17150f; --panel: #201d16; --panel-2: #29251c; /* hover / featured 抬升 */ --panel-3: #322d22; /* 下拉 / 巢狀 */ /* Text（ink 階梯）— 暖米白，非冷白 */ --text: #f4f1ea; --muted: #a49b88; /* ink-subtle（暖灰，灰底上對比 ~5.9:1） */ --muted-2: #ddd6c7; /* ink-muted（次級強調） */ --line: #37322a; /* hairline（暖面板上需更亮才看得見） */ --line-strong: #4a4335; /* 深色模式品牌色＝政勤 logo 金黃（唯一彩色重點：品牌/CTA/focus/連結）。淺色模式改回薰衣草藍。 */ --primary: #e8be06; --primary-dark: #c9a406; /* pressed / focus tint */ --primary-hover: #f5cf3a; --primary-bg: rgba(232,190,6,.14); --on-primary: #17150f; /* 疊在 --primary 上的文字色：金黃底用深暖墨（淺色藍底則覆寫為白） */ /* 語意色（Linear 產品調色盤，深色微調）。狀態三色＝正常 --green／注意 --amber／錯誤 --red（未知＝--muted）， 深淺兩組都要彼此分得開（CIEDE2000：深色 綠↔橘 46、橘↔紅 28、橘↔品牌金 19；淺色 綠↔琥珀 36、琥珀↔紅 26）。 */ --green: #4cb782; --green-bg: rgba(39,166,68,.14); --red: #eb5757; --red-bg: rgba(235,87,87,.13); /* 注意＝橘（2026-10-02）。原本為了不跟品牌金「兩黃相撞」改成藍綠 #2dd4bf，結果跟正常的綠只差 ΔE 13＝ 系統健康「Gemini 金鑰 注意」看起來像正常（2026-10-01 管理員實測）。橘離金、紅、綠都夠遠；名稱沿用免動呼叫端。 */ --amber: #ff9f43; --amber-bg: rgba(255,159,67,.13); /* AML 語意色：深色＝政勤 logo 藍（提亮以在深底可見）；淺色主題覆寫回原本的紅（見下） */ --aml: #4a9fd8; --aml-bg: rgba(74,159,216,.14); --amber-line: rgba(255,159,67,.38); /* 警示邊框：深色＝橘邊、淺色覆寫回原黃 */ /* Type scale — rem 化以支援 Dynamic Type / 瀏覽器字型縮放（÷16；16px 預設下像素等值）。 字級一律走這些 token，讓使用者放大字型時整站文字隨之縮放；版面 spacing/radius 仍用 px。 */ --fs-display: 2.125rem; /* 34px */ --fs-h1: 1.75rem; /* 28px */ --fs-h2: 1.375rem; /* 22px */ --fs-h3: 1.125rem; /* 18px */ --fs-body: 1rem; /* 16px（Notion-lean：提升 body 讀感，2026-09-14） */ --fs-md: 0.875rem; /* 14px（卡片／面板小標、次要說明。2026-09-23 補這一階＝原本 13→16 中間是空的， 大家只好各寫 .85/.875/.88/.9rem，全站因此飄出 23 種字級） */ --fs-sm: 0.8125rem; /* 13px */ --fs-xs: 0.75rem; /* 12px（body 文字下限） */ /* Spacing (4/8px grid) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px; /* Radius 階梯（Notion-lean 收緊 2026-09-14：tiny 4、button/input 6、card/menu 8、dialog 12、pill）。 Notion 是方中帶柔、小圓角的塊感；由 12/16 收到 8/12＝更 Notion，仍在 preflight #6 允許集（4/6/8/12）。 一律用 token 別散寫 7/9/10 這種 off-scale 值，否則同區塊圓角對不上會顯得尷尬。 */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px; /* Elevation — 深色下不用陰影堆層次，改用頂緣微高光 + 深黑投影 */ /* --sh-1＝卡片「靜止」的那層（.panel/.project-card/.card/.stat…）。原本深色只有 inset 頂光、 淺色只有 1px 微影 → 整頁像「一張紙上畫格線」。補一層真正的投影給層次，hover 再換 --sh-2。 */ --sh-1: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 3px rgba(0,0,0,.36); --sh-2: 0 2px 6px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.5); /* 分層陰影（Open Props 風）：更柔更真實的浮起感 */ --sh-3: 0 4px 10px rgba(0,0,0,.4), 0 24px 56px rgba(0,0,0,.62); --ring: 0 0 0 3px rgba(232,190,6,.4); /* 文字欄位聚焦的光暈（欄位才用；按鈕／卡片的鍵盤焦點用下面的 --focus-ring） */ /* 鍵盤焦點環（2026-10-01）：outline＋間距，全站一份。outline 會跟著元件圓角，也不會蓋掉元件自己的陰影 （box-shadow 光暈會：卡片一聚焦就沒了投影；在主色鈕上光暈跟鈕同色＝看不出焦點）。 */ --focus-ring: 2px solid var(--primary); --focus-offset: 2px; /* 動效 token（2026-10-01 蘋果質感輪；規則見 DESIGN.md「Motion」）。時長三階： 1＝按下／hover／顏色（即時回饋）、2＝浮層進出與淡入淡出、3＝位移（彈簧有尾巴，視覺上約等於 ease-out 的第 2 階）。 曲線：顏色／透明度／退場一律 --ease-out（不回彈）；位移與縮放的「進場」用彈簧。 彈簧＝WWDC23「Animate with springs」的 duration＋bounce 參數化（阻尼比＝1−bounce、從靜止出發的步階響應）， 取樣到誤差 <0.1% 為止再用 linear() 逐點近似：--spring＝bounce .15（Apple 的 snappy，過衝 0.6%）、 --spring-soft＝bounce 0（smooth，不過衝；抽屜、變形轉場）。 */ --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --ease-out: cubic-bezier(.2,.8,.2,1); --spring: linear(0, 0.054, 0.176, 0.322, 0.467, 0.598, 0.707, 0.795, 0.862, 0.912, 0.947, 0.971, 0.987, 0.997, 1.003, 1.005, 1.006, 1.006, 1.005, 1.005, 1.004, 1.003, 1.002, 1.001, 1); --spring-soft: linear(0, 0.058, 0.18, 0.321, 0.455, 0.573, 0.671, 0.75, 0.812, 0.86, 0.897, 0.924, 0.944, 0.96, 0.971, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1); /* 舊名沿用（呼叫端不必改）：改成引用上面的 token，全站既有 transition 一起換上新節奏。 */ --ease: var(--ease-out); --tr: var(--dur-1) var(--ease-out); --tr-fast: var(--dur-1); --tr-slow: var(--dur-3); /* 按下回饋：按下 --dur-1 縮到 --press-scale、放開用彈簧回彈。列狀按鈕／分頁把 --press-scale 設 1（見檔尾）。 */ --press-scale: .97; --press-tr: var(--dur-3) var(--spring); --lift-y: -2px; /* 可點卡片 hover 浮起的位移 */ --lift-bg: var(--panel-2); /* 浮起＝往上一層：深色越上層越亮（surface ladder），淺色維持白、靠陰影（見淺色覆寫） */ /* 材質（2026-10-01）：半透明底＋背景模糊＋細邊＝浮在內容上的那一層。厚度對應 Apple 的 thin／regular／thick： 越常放長文的越不透明（HIG：thicker materials … better contrast for text）。 */ --mat-blur: saturate(180%) blur(20px); --mat-bar: rgba(32,29,22,.72); /* 頂欄 */ --mat-pop: rgba(41,37,28,.82); /* 下拉選單／通知（以 --panel-2 為底＝深色的抬升層） */ --mat-thick: rgba(32,29,22,.9); /* 抽屜（整片長文） */ --mat-edge: rgba(255,255,255,.08); /* 材質的細邊：深色用一條極淡的亮線 */ /* 底線頁籤的細底軌（.seg-bar，2026-10-01 方案 A）。深色不能沿用 --line-strong：它比面板亮 ΔL*≈22， 淺色的同一條只亮/暗 ΔL*≈12–17 ⇒ 深色下那條軌會比字還搶眼。取 --line（ΔL*≈12）＝與淺色同一級。 */ --tab-line: var(--line); /* 分段切換（.seg-pill）的軌道與滑動底塊。軌道用疊色＝放在畫布、卡片、對話框上都比底下那一層再深一階； 深色的底塊要比軌道「亮」（越上層越亮），借 --panel 會比軌道暗＝看起來是凹下去的洞。 */ --seg-track: rgba(0,0,0,.24); --seg-thumb: var(--panel-3); --seg-thumb-sh: 0 1px 2px rgba(0,0,0,.45); /* AI 搜尋鈕的「未啟用」態（啟用態的霓虹是刻意的品牌色，不走 token）。深色下要沉下去， 不然一塊發亮的淺藍方塊會比畫面上任何東西都搶眼（2026-09-23 回饋）。 */ --ai-face: linear-gradient(180deg, rgba(74,159,216,.16), rgba(74,159,216,.10)); --ai-line: rgba(122,190,240,.42); --ai-ink: #9fd0f2; --ai-glow: rgba(96,181,255,.32); --noise: .035; /* 紙面噪點強度（body::before）。原寫死 .028＝在淺色幾乎看不見， 等於白付一層 fixed 元素；改 token 後淺色另給更高值。 */ /* 版面寬度＝全站唯一值。原本有三種（一般 1200／專案列表 1500／裁罰·簡報·資料治理 1440）， 在寬螢幕上切頁時內容左緣會左右跳最多 150px＝「每頁邊界不一樣」。**不要再為單頁放寬 .view** （preflight #16 會擋 :has 例外與寫死值）；某頁真的需要更寬＝調這個值，全站一起動。 */ --page-max: 1440px; /* 等寬資料字（代號/字號/法條/金額/覆核率）＝法遵「卷宗」精確感。 2026-09-23 已套進 .data-table td.num／通用 .mono class（見 DESIGN.md）；.stat 的大數字 2026-10-02 改回內文字型＋tabular-nums （Geist Mono 的 0 帶斜線，大字像「Ø」）。 中文黑體排在泛用 monospace 前面：等寬字型都沒有中文字形，落到泛用 monospace 時 Chrome 繁中預設是細明體（襯線）， prompt／紀錄這類 
 裡的中文就整段變成明體（2026-10-01 二輪體檢）。 */
  --mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Noto Sans TC", "Microsoft JhengHei", monospace;

  /* 標籤（.tag/.badge）的底：半透明墨色，不是某一階 surface。原本借 --panel-2，正好就是表格列 hover 與深色對話框的底色
     ⇒ 一滑過列、一進對話框，標籤的底就消失只剩字（2026-10-01 二輪體檢）。疊色＝放在哪一層都比那一層再深（淺色）／再亮（深色）一階。 */
  --tag-bg: rgba(244,241,234,.07);
}

/* 淺色主題（Linear inverse）：白底、深字、保留薰衣草藍重點。切換由右上角按鈕 + localStorage 控制。
   2026-09-01：曾試暖米白＋brass 金統一，但淺色下金字/暖紙看起來費力（尤其資料庫頁），回退回此藍白版。 */
:root[data-theme="light"] {
  color-scheme: light;
  /* canvas 略深＋轉冷灰，白卡片才浮得起來（原 #f7f8f8 對白卡明度差僅 ~3%＝偏平）；panel-2/3、line 同步下移保住 hover 對比與 hairline 俐落度。深色不動。 */
  --bg: #eef0f4;
  --panel: #ffffff;
  --panel-2: #e3e7ee;
  --panel-3: #d9dde6;
  --text: #16171a;
  --muted: #616873;               /* AA：bg 4.93 / panel 5.62 / panel-2 4.53（原 #6b7280 在畫布上只有 4.24） */
  --muted-2: #3a3d44;
  --line: #e6e9ef;                 /* Notion-lean：淺色 hairline 更淡（原 #dce0e7），邊框克制 */
  --line-strong: #cbd0d6;
  --primary: #5e6ad2;
  --primary-dark: #4b56c9;
  --primary-hover: #4b56c9;        /* 淺色下 hover 加深而非變亮 */
  --primary-bg: rgba(94,106,210,.10);
  --on-primary: #fff;              /* 淺色藍底上用白字 */
  --ring: 0 0 0 3px rgba(94,106,210,.4);  /* 淺色 focus 環維持藍（--ring 只定義於 :root，需在此覆寫） */
  --green: #0f7a3d; --green-bg: rgba(15,122,61,.10);
  --red: #c0362c;   --red-bg: rgba(192,54,44,.09);
  --amber: #8a5a00; --amber-bg: rgba(138,90,0,.10);          /* 淺色照舊：維持原本的琥珀黃 */
  --aml: var(--red); --aml-bg: var(--red-bg);                 /* 淺色照舊：AML 維持原本的紅 */
  --amber-line: rgba(242,201,76,.35);                          /* 淺色照舊：警示邊框維持原本黃 */
  --sh-1: 0 1px 2px rgba(16,24,40,.05), 0 4px 12px rgba(16,24,40,.07);
  --sh-2: 0 1px 3px rgba(16,24,40,.06), 0 6px 16px rgba(16,24,40,.10);   /* 分層陰影（Open Props 風）：更柔更真實的浮起感 */
  --sh-3: 0 4px 10px rgba(16,24,40,.08), 0 18px 40px rgba(16,24,40,.16);
  --tab-line: var(--line-strong);   /* 淺色：--line 太淡（對畫布 ΔL*≈3）＝底軌看不見 */
  --seg-track: rgba(30,42,70,.07);
  --seg-thumb: var(--panel);
  --seg-thumb-sh: 0 1px 2px rgba(16,24,40,.10), 0 0 0 1px rgba(16,24,40,.04);
  --ai-face: linear-gradient(180deg, #f2f9ff, #e6f3ff);
  --ai-line: #7cc4ff; --ai-ink: #2b6cb0; --ai-glow: rgba(96,181,255,.5);
  --noise: .05;                    /* 淺色底噪點要更強才看得出「紙」；深色本來就有 canvas 明度幫忙 */
  --tag-bg: rgba(30,42,70,.11);    /* 白底上≈原本的 --panel-2，hover 列（--panel-2）上再深一階 */
  --lift-bg: var(--panel);         /* 淺色的抬升面是白底加陰影；變灰（--panel-2）反而像被按下去 */
  --mat-bar: rgba(255,255,255,.72);
  --mat-pop: rgba(255,255,255,.82);
  --mat-thick: rgba(255,255,255,.9);
  --mat-edge: rgba(16,24,40,.1);
}

* { box-sizing: border-box; }
/* 作者樣式的 display（flex／grid／inline-flex…）會蓋過瀏覽器的 [hidden] ⇒ 設了 hidden 還看得見。
   頂欄、吐司、裁罰下載鈕、deck 表單都各自補過一條 X[hidden]{display:none}；根因是同一個，全站一條收掉。 */
[hidden] { display: none !important; }

/* 永遠保留垂直捲軸溝槽：否則篩選/換頁使清單長短變化時，捲軸忽隱忽現會讓整頁內容左右抖動。 */
/* font-size:100%＝沿用瀏覽器/使用者預設(通常 16px)，讓 rem 型級隨使用者字型設定縮放（Dynamic Type）。 */
/* text-size-adjust：iPhone 橫放時 Safari 會自己把字放大（版面跟著爆）；tap-highlight：點一下閃一塊灰底方框，
   不是原生 App 的手感——按下回饋改由 :active 的縮放／底色給（見檔尾「按下回饋」）。 */
html { overflow-y: scroll; font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* 拉丁與數字一律 Geist（自帶字檔）。中文：有裝 Noto Sans TC 就用它（開發機與視覺回歸基準都是它，標點比微軟正黑緊），
     沒裝就明確落到各平台的系統黑體——Mac／iPhone＝蘋方、Windows＝微軟正黑體 UI。原本 Noto 之後直接是 sans-serif，
     多數同仁電腦沒裝 Noto，中文字型交給瀏覽器預設（使用者改過預設字型就跟著變）。 */
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;          /* Notion-lean：段落更鬆、好讀 */
  letter-spacing: normal;    /* Notion-lean：body 不收緊字距（標題仍保留略負，見下） */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 捲軸：全站細軌＋隨主題的把手色。原本是 OS 原生捲軸（Windows 上是帶上下箭頭的粗灰軌），
   對話框／表格／抽屜裡一出現就整塊變廉價。`scrollbar-width` 是標準屬性，不需 ::-webkit-*。
   把手用 --line-strong（hairline 的強化版）＝深淺主題都自動對，軌道透明＝不切出一條灰帶。 */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* 標題字距用 em（2026-10-01）：跟著字級等比例（使用者放大字型時一起放大），同一級標題各處一致。
   原本寫 px，h3 在卡片／許願／Skill 各寫一個值（-.2／-.3px）。中文標題只能「略」負——收太緊字會黏在一起。 */
h1 { font-size: var(--fs-h1); line-height: 1.2; letter-spacing: -.01em; }   /* Notion-lean：字距放鬆一階，仍保留略負 */
h2 { font-size: var(--fs-h2); line-height: 1.25; letter-spacing: -.01em; }

/* 細噪點紙面質感（Notion/編輯風，2026-09-14）：固定全屏、極淡、灰階、不吃點擊。
   inline SVG feTurbulence data-URI＝自足、零外連（CSP img-src data: 允許；data: 非外部 url→圖表匯出內嵌 styles.css 也不 canvas taint）。
   opacity 是唯一強度旋鈕。
   **必須待在所有內容後面**（z-index:-1；html 沒有背景 ⇒ body 的背景傳遞到 canvas，噪點仍看得見）：
   原本是 z-index:1＝一層蓋在頁面上的 fixed 元素，它蓋得到「沒有 position 的」內容面
   （.panel／.penalty-view＝一般流排版），卻蓋不到「有 position+z-index 的」分頁列
   ⇒ 目前那張頁籤是乾淨的 --panel，接縫下面那張紙被噪點提亮約 3 階 ⇒ 兩個面顏色不一樣，
   接縫就變成一條「明顯的線」（2026-09-29 回報；前兩輪調 --tab-back／--tab-line 都沒打到這個）。
   **別再把它放到內容上面**——任何 positioned 元素都會逃掉噪點、在交界處長出同一條線。
   注意：視覺回歸的 calm() 會關掉噪點，所以這個問題截圖測試看不到，只有真的開著噪點才看得出來。 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--noise);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

button, select, textarea, input { font: inherit; }
/* 程式碼類元素沒給字型＝瀏覽器的泛用 monospace，Chrome 繁中預設是細明體（襯線）：模型 ID、金鑰、JSON 一律長成明體。
   泛用 monospace 還會讓 Chrome 把字縮成 13/16（行內 code 原本就比旁邊小一號），換成具名字型後這個縮放就沒了 ⇒ 行內的自己縮 .9em。 */
code, kbd, samp, pre { font-family: var(--mono); }
code, kbd, samp { font-size: .9em; }
::placeholder { color: var(--muted); }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); }
/* 沒有自己樣式的連結＝品牌色。原本全站沒有這條，表格裡的「跳轉」「原文」、新聞標題是瀏覽器預設藍（深色模式淡紫）。
   :where() 特異度 0：任何有 class 的連結樣式（.navlink／.btnlink／.back-link…）照樣贏。penalty 自己有一條同義的。 */
:where(a) { color: var(--primary); }

/* Smooth micro-interactions on all interactive elements（scale＝按下回饋：按下快、放開彈回，見 :root --press-tr） */
button, .navlink, .btnlink, a, input, select, textarea {
  transition: border-color var(--tr), background var(--tr), box-shadow var(--tr), color var(--tr), transform var(--tr), scale var(--press-tr);
}

/* 鍵盤焦點環（WCAG 2.4.7）：全站同一圈 outline＋間距，圓角自動跟著元件（2026-10-01；原本是貼著元件的 box-shadow 光暈，
   會蓋掉卡片／浮動鈕自己的陰影，在主色鈕上又跟鈕同色看不出來）。只掛 :focus-visible＝滑鼠點擊不出現。
   文字欄位不吃這圈：聚焦＝正在輸入，由下方欄位規則給主色邊框＋光暈。tabindex="-1"＝程式移過去的焦點，不畫。
   清單列／分頁的環畫在裡面（outline-offset 負值，見檔尾「按下回饋」那段）：列與列之間沒有空隙，外擴會壓到鄰居、被捲動區切掉。 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  padding: 0 var(--sp-3);
  /* 按鈕字不折行：flex 工具列被擠窄時，中文按鈕的最小寬度是「一個字」，會被壓成一字一行
     （「新增型/號」「立即爬取 Google/模型」，2026-10-01 二輪體檢）。原本靠各處零星補 nowrap。 */
  white-space: nowrap;
}
/* 例外：按鈕本身裝的是「一則內容」而不是動作字（清單列、領域說明、節點說明、追問句、檔名、選項）＝照常折行。
   分頁列（.seg）不在這裡：頁籤字不折、放不下就整顆換到下一列（.seg 一律 flex-wrap，2026-10-01 改底線頁籤後）。 */
.help-row, .add-domain-item, .wf-panel-item, .ai-fu, .law-timeline-pen, .fd-file, .sh-main { white-space: normal; }
button:hover { border-color: var(--line-strong); background: var(--panel-2); }
/* 按下＝縮一點（2026-10-01；原本 translateY(1px)）。用獨立的 scale 屬性不用 transform：
   浮動鈕／拖曳中的元素自己的 transform（置中、位移）不會被蓋掉（原本按下覆核跳題鈕會往下跳半顆，得逐一補例外）。 */
button:active, .btnlink:active { scale: var(--press-scale); --press-tr: var(--dur-1) var(--ease-out); }
button:disabled { opacity: .5; cursor: not-allowed; scale: none; }
/* 進行中（aria-busy）≠ 不能用：停用只是防連點，「產生中 12/60」「儲存中…」要看得清楚——不吃上面的半透明、游標轉圈；
   帶圖示的鈕（.btn-ic）圖示換成轉圈（見 .spinner）。modal() 的送出鈕自動掛；自己鎖按鈕的，disabled 時一併設 aria-busy="true"。 */
button[aria-busy="true"] { opacity: 1; cursor: progress; }
button.small { min-height: 30px; padding: 0 10px; font-size: var(--fs-sm); }
button.block { width: 100%; }

.primary { border-color: var(--primary); background: var(--primary); color: var(--on-primary,#fff); box-shadow: none; }
.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.primary:active { background: var(--primary-dark); border-color: var(--primary-dark); }
.ghost { border: 0; background: transparent; color: var(--muted-2); padding: 6px 8px; min-height: 0; box-shadow: none; }
.ghost:hover { background: var(--panel-2); color: var(--text); }
.ghost.danger:hover { background: var(--red-bg); color: var(--red); }
/* toggle 圖示鈕（如 Bug 回報模式）開啟中的高亮 */
.ghost[aria-pressed="true"] { background: var(--primary-bg); color: var(--primary); }
.danger { color: var(--red); }
.icon { border: 0; background: transparent; color: var(--red); min-height: 0; padding: 2px 6px; font-size: var(--fs-sm); }
.icon:hover { background: var(--red-bg); }

/* 欄位外觀。型別要列全：沒列到的 number／url／date… 就是瀏覽器預設的小方框（2026-10-01 二輪體檢：AI 模型費率、
   寄信設定的抓取天數、MCP 的 URL）。type=search 刻意不列：搜尋框都包在 searchBox()（.filter-search）或 penalty 的
   .serp-input 複合列裡、各自有樣式，列進來會把 serp 那條搜尋列撐高。
   單行欄位剛好 40px＝與按鈕、日期選取器、搜尋膠囊同高（篩選列才對得齊）：行高 1.25 × 16px＋上下 9px＋邊框 2px。
   原本吃 body 的 1.6 行高＝45.6px，比同一列的按鈕高一截；多行的 textarea 在下面拿回 body 行高。 */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=tel],
input[type=date], input[type=datetime-local], input[type=time], input[type=month], input[type=week], textarea, select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--text);
  padding: 9px 11px;
  line-height: 1.25;
}
/* 數字欄多半是行內小格（費率、金額、年份、天數）：照內容寬，不撐滿整列；放在 .field 裡（grid）照樣撐滿欄寬。 */
input[type=number] { width: auto; }
input:hover, textarea:hover, select:hover { border-color: var(--line-strong); }
/* 只給文字類欄位：勾選框／單選鈕原本也吃 :focus（不是 :focus-visible）＝滑鼠點一下就出一圈光暈。它們改走上面的鍵盤焦點環。 */
:is(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file]), textarea, select):focus { border-color: var(--primary); outline: none; box-shadow: var(--ring); }
/* 出錯的欄位（toast(msg,'error',{field}) 標上 aria-invalid，一打字就拿掉）：紅框，聚焦時紅色光暈。
   聚焦那條也要寫紅框：上面那條欄位聚焦規則特異度與它相同，靠排在後面才蓋得過它的主色框。 */
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--red); }
input[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus, select[aria-invalid="true"]:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-bg); }
/* 頁面上（不在對話框裡）的表單錯誤：紅字寫在欄位與送出鈕之間（登入頁）。浮動提示在畫面最底，手機鍵盤升起時剛好被蓋住
   （2026-10-01 手機實測）。對話框裡的錯誤由 util.js toast() 寫進 .dialog-error。 */
.form-error { margin: 0; color: var(--red); font-size: var(--fs-sm); line-height: 1.45; }
/* 多行輸入一律隨內容長高（`rows` 變成「最少幾行」），不在框內出現捲軸——框內捲軸＝看不到自己
   打的字、還多一條難看的軌道。上限 50vh 後才交給框內捲動（不設上限會把對話框撐爆）。
   原本 domains.js／penalty/ai_ask.js 各自用 JS 量 scrollHeight 手動長高，已改由這一行統一。
   resize:none——會自己長高就不需要右下角那個拖曳把手（工作日誌週表一格一個，滿版都是斜線）。
   line-height:inherit＝拿回段落行高（上面那條 1.25 只給單行欄位）。 */
textarea { resize: none; field-sizing: content; max-height: 50vh; line-height: inherit; }
/* 自訂 select 下拉箭頭：appearance:none 收掉 OS 原生箭頭，改嵌一顆灰 chevron（SVG 描邊＝
   DESIGN.md 允許的寫死色例外）→ 跨平台一致、擺脫「未美化  不支援偽元素/背景旋轉 → 用 :open 換成向上 chevron（現代瀏覽器 baseline；
   不支援者維持向下＝現行行為、無回歸）。全站  的方向由作業系統決定，同一列兩個下拉一個往上一個往下）。 */
.fm-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fm-group:not(:has(.fm-btn.on)) > .fm-clear { display: none; }
.fm-clear { min-height: 40px; padding: 0 10px; font-size: var(--fs-md); }
.fm { position: relative; display: inline-flex; max-width: 100%; }
.fm-btn {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  min-height: 40px; padding: 0 12px 0 16px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--panel); color: var(--text); font-size: var(--fs-md); font-weight: 500;
}
.fm-btn:hover { border-color: var(--line-strong); background: var(--panel); }
.fm-btn > .fm-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fm-btn .fm-k { color: var(--muted); }
.fm-caret { display: inline-flex; color: var(--muted); transition: transform var(--dur-2) var(--ease-out); }
.fm-btn[aria-expanded="true"] .fm-caret { transform: rotate(180deg); }
/* 已套用：品牌色疊色底＋品牌色框（同 .ghost[aria-pressed=true] 的「開著」語彙），一眼看得出清單被篩過 */
.fm-btn.on { background: var(--primary-bg); border-color: var(--primary); }
.fm-btn.on .fm-k, .fm-btn.on .fm-caret { color: var(--primary); }
.fm .dot { width: 8px; height: 8px; border-radius: var(--r-pill); flex: none; }
/* 底色／邊框／陰影與進出場＝全站浮層共用的材質，見檔尾「浮層」段（同 .nav-dd-menu／.rp-menu） */
.fm-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 45; transform-origin: top left;
  min-width: max(100%, 200px); max-width: min(360px, calc(100vw - 32px)); max-height: min(360px, 60vh); overflow: auto;
  padding: 4px; border-radius: var(--r-md);
}
/* 膠囊靠右、選單會超出視窗時改靠右對齊（util.js 打開時量），也改從右上角長出來 */
.fm-menu.fm-menu-r { left: auto; right: 0; transform-origin: top right; }
.fm-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 0 10px;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted-2);
  font-size: var(--fs-md); text-align: left;
}
.fm-opt:hover, .fm-opt:focus-visible { background: var(--panel-2); color: var(--text); }
.fm-opt .fm-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fm-opt .fm-n { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.fm-check { display: inline-flex; color: var(--primary); opacity: 0; }
.fm-opt[aria-checked="true"] { color: var(--text); }
.fm-opt[aria-checked="true"] .fm-check { opacity: 1; }
.dot.cat-bug, .dot.pri-p0 { background: var(--red); }
.dot.cat-feature { background: var(--green); }
.dot.cat-wontdo, .dot.pri-p2 { background: var(--muted); }
.dot.pri-p1 { background: var(--amber); }

/* 區塊層級＋width:100%：放進一般區塊（面板、包一層的 div）也撐到 340px。原本 inline-flex＝縮成 input 的
   預設寬（約 240px），自動化「新增節點」面板的 placeholder 只剩半句。flex-basis 260px：篩選列這一行擠不下
   就整顆換行，不會被壓到 placeholder 看不完（15 個中文字放得下）。 */
.filter-search { position: relative; display: flex; align-items: center; flex: 1 1 260px; width: 100%; max-width: 340px; }
.filter-search-icon { position: absolute; left: 12px; display: inline-flex; color: var(--muted); pointer-events: none; }
/* 搜尋框＝Google 那種膠囊（2026-09-24 定案；先前一度改成矩形系，使用者要的是 Google 形狀）。
   全站搜尋框都照這條，並且要在 corner-shape: round 清單裡（膠囊兩端是半圓，不能被 squircle 壓平）。 */
.filter-search input {
  width: 100%; min-height: 40px; padding: 8px 16px 8px 36px; border-radius: var(--r-pill);   /* 40px＝與同列的下拉、按鈕同高（原本 38.8px） */
  border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: var(--fs-sm);
}
.filter-search input:hover { border-color: var(--line-strong); }
.filter-search input:focus { border-color: var(--primary); outline: none; box-shadow: var(--ring); }
.filter-search input::placeholder { color: var(--muted); }
/* 清除 ×（util.js searchBox）：與主搜尋列 .serp-input 的 .usearch-clear 同一顆、同一個位置感。原生 type=search 的 ×
   由瀏覽器畫（各平台長得不一樣、只在 hover 出現）→ 藏掉。有沒有字看 :placeholder-shown（呼叫端直接改 value 也跟得上）；
   有字時右內距讓出 × 的位置，沒字時 placeholder 照舊吃滿。 */
.filter-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.filter-search-clear { position: absolute; right: 10px; display: inline-flex; align-items: center; justify-content: center;
  min-height: 0; padding: 2px; border: 0; border-radius: var(--r-xs); background: none; color: var(--muted); }
.filter-search-clear:hover { color: var(--text); background: none; }
.filter-search input:placeholder-shown ~ .filter-search-clear { display: none; }
.filter-search input:not(:placeholder-shown) { padding-right: 36px; }
/* 抽屜／對話框裡的搜尋框吃滿整列（340px 上限是給篩選列上「跟其他篩選並排」用的）。 */
.help-search .filter-search, .rjd-search .filter-search, .dialog-body > .filter-search { max-width: none; width: 100%; }

/* .vault-val：管理員在使用者管理頁擷取使用者登入密碼的明文顯示（login_credentials，非已移除的密碼庫）。 */
.vault-val { flex: 1; word-break: break-all; }
.vault-val.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; background: var(--panel-3); padding: 4px 8px; border-radius: var(--r-xs); }

@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; padding: 12px 16px; }
  .layout { grid-template-columns: 1fr; }
  .details, .domain-grid, .de-fields { grid-template-columns: 1fr; }
  .actions { grid-template-columns: repeat(2, 1fr); }
  .control-point { font-size: var(--fs-h2); }
}

/* 頂層分頁「拖曳/點兩側切換」導覽層（tabswipe.js）；可用 localStorage cra_tabswipe=0 停用。
   低調設計：靜止時只露一個小箭頭把手、每隔幾秒輕微晃動暗示可點；hover 才展開分頁名。 */
.ts-pill { --ts-in: 0; position: fixed; top: 50%; z-index: 40; transform: translateY(-50%);
  display: flex; align-items: center; gap: 0; min-height: 0; padding: 12px 3px;
  background: transparent; border: 0; cursor: pointer; }
.ts-pill[hidden] { display: none; }
.ts-prev { left: 2px; }
.ts-next { right: 2px; flex-direction: row-reverse; }
/* 把手＝小圓角方塊裝一個箭頭（材質同頂欄：--mat-bar＋--mat-blur）；靜止低透明、hover 提亮 */
.ts-chev { flex: none; width: 20px; height: 38px; display: grid; place-items: center;
  font-size: var(--fs-h3); line-height: 1; color: var(--muted); border-radius: var(--r-md);
  background: var(--mat-bar); border: 1px solid var(--mat-edge); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  opacity: calc(.3 + var(--ts-in) * .7); transition: opacity .2s, color .2s, border-color .2s; }
.ts-pill:hover .ts-chev, .ts-pill:focus-visible .ts-chev { opacity: 1; color: var(--text); border-color: var(--amber); }
.ts-pill:focus-visible { outline: none; }
.ts-pill:focus-visible .ts-chev { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* 分頁名預設收合（max-width 0），hover 才滑出 */
.ts-name { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; color: var(--text);
  font-size: var(--fs-sm); transition: max-width .26s ease, opacity .2s, padding .26s; }
.ts-pill:hover .ts-name, .ts-pill:focus-visible .ts-name { max-width: 170px; opacity: 1; padding: 0 8px; }
body.ts-dragging { cursor: grabbing; user-select: none; }
/* 每隔幾秒輕微晃動一下（把手朝畫面中心 nudge）；prev 錯開時間，避免同時晃。
   **提示要有終點**（2026-09-30）：原本是 `infinite`＝每 2.5 秒畫面邊緣就抖一下、永遠不停。
   這是一個每天盯八小時的工具，餘光一直有東西在動很耗人，而且 DESIGN.md 自己寫「不自動播放」。
   改成播 3 輪（約 15 秒）就安靜；而且**用過一次就永久不再提示**（tabswipe.js 寫
   localStorage `cra_ts_hinted`＋掛 body.ts-used）——提示的功能是教會你，教會了就該閉嘴。 */
@keyframes ts-wobble-next { 0%,86%,100% { transform: translateX(0); } 90% { transform: translateX(-4px); } 95% { transform: translateX(-1px); } }
@keyframes ts-wobble-prev { 0%,86%,100% { transform: translateX(0); } 90% { transform: translateX(4px); } 95% { transform: translateX(1px); } }
.ts-next .ts-chev { animation: ts-wobble-next 5s ease-in-out 3; }
.ts-prev .ts-chev { animation: ts-wobble-prev 5s ease-in-out 2.5s 3; }
/* 滑鼠裝置：把手靜止時隱形——常駐 30% 的淡灰小方塊，看起來像兩顆多出來的輪播箭頭（2026-09-30 體檢）。
   游標移到那一側邊緣的把手上才浮出；拖曳中照 --ts-in 漸顯。上面那 3 輪教學晃動改成跟著節奏「探頭」
   一下再退回，播完（或用過一次）就不見。觸控裝置（hover:none）維持原樣。 */
@media (hover: hover) {
  .ts-chev { opacity: var(--ts-in); }
  .ts-next .ts-chev { animation: ts-wobble-next 5s ease-in-out 3, ts-peek 5s ease-in-out 3; }
  .ts-prev .ts-chev { animation: ts-wobble-prev 5s ease-in-out 2.5s 3, ts-peek 5s ease-in-out 2.5s 3; }
}
@keyframes ts-peek { 0%, 80%, 100% { opacity: 0; } 86%, 95% { opacity: .7; } }
.ts-pill:hover .ts-chev, body.ts-dragging .ts-chev, body.ts-used .ts-chev { animation: none; }
@media (prefers-reduced-motion: reduce) { .ts-chev { animation: none; transition: none; } .ts-name { transition: none; } }

/* ── 分頁、切換與篩選（2026-10-01 方案 A：依用途分三種長相，每種全站只有一種；規則見 DESIGN.md「分頁、切換與篩選」）──
   換頁       segTabs()               底線頁籤 .seg-bar：細底軌＋目前那頁一條品牌色底線，切換時滑過去
   二級分頁   segTabs({sub:true})     次級底線頁籤 .seg-bar.seg-sub：字小一階、底線改中性色
   切換檢視   segTabs({inline:true})  分段切換 .seg-pill：軌道＋會滑的白色底塊，全站同一尺寸（40px＝與同列控制項齊高）
   篩選       filterMenu()            篩選膠囊（見上方 .fm-*）
   原本頁面級分頁是「互相重疊的資料夾頁籤」＋自動把下一塊畫成內容面（.view > .seg-bar + *），同站其他地方又是
   灰底按鈕段、膠囊列＝同一種東西三種長相（2026-10-01 使用者回報）。底線頁籤坐在畫布上、不需要接一張紙，
   下面的內容照全站慣例自己是卡片；重疊補償（--tab-lap／--pad-l／--pad-r）與內容面規則一併刪除。 */
.seg { display: inline-flex; flex-wrap: wrap; align-items: center; max-width: 100%; position: relative; }
/* 中文字墨在行盒裡偏高 2.33px（Geist 定行盒高度、中文走 Noto Sans TC 的 em box）：text-box-trim 修到 −0.33px。
   **只給單行、固定／最小高度的控制項**（頁籤、分段、chip）——段落用了會把行距一起剪掉。 */
.seg button, .seg [role="tab"] { text-box: trim-both cap alphabetic; }
.seg > button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-sm); background: transparent; box-shadow: none; font-weight: 500;
  transition: color var(--tr);
}
.seg > button:hover { background: transparent; }
/* 「選到了」的那一塊（底線或底塊）＝不會被重建的獨立元素，util.js 量目前按鈕的位置用 transform 移過去；
   第一次定位不播（.ready 之後才有 transition）。不靠按鈕自己的 border／font-weight 標示 active＝切換時寬度不變、不抖。 */
.seg-ind { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; opacity: 0; }
/* 筆數（segTabs 的 [key, label, n]）：分段切換裡是灰字；底線頁籤裡是灰色小圓章（Primer UnderlineNav 的 Counter） */
.seg-n { margin-left: 6px; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ① 底線頁籤 */
.seg.seg-bar {
  --seg-pad: 12px;
  display: flex; margin: 0 0 var(--sp-4);
  box-shadow: inset 0 -1px 0 var(--tab-line);      /* 細底軌畫在列上＝貫穿整列；放不下換行時手機版改畫在每顆按鈕上 */
}
.seg.seg-bar > button { min-height: 40px; padding: 0 var(--seg-pad); color: var(--muted); font-size: var(--fs-md); }
/* 第一顆往左吃回自己的內距：字的左緣對齊頁首標題與下方內容（底線也從那裡開始） */
.seg.seg-bar > .seg-ind + button { margin-left: calc(-1 * var(--seg-pad)); }
.seg.seg-bar > button:hover, .seg.seg-bar > button.seg-on { color: var(--text); }
/* hover 預覽：沒選到的那顆底下浮出一條中性色底線（Fluent 2 的作法）；點下去，品牌色那條才滑過來 */
.seg.seg-bar > button::after {
  content: ""; position: absolute; left: var(--seg-pad); right: var(--seg-pad); bottom: 0; height: 2px;
  background: var(--line-strong); opacity: 0; transition: opacity var(--tr);
}
.seg.seg-bar > button:not(.seg-on):hover::after { opacity: 1; }
/* 原始寬 100px、JS 用 scaleX(字寬/100) 縮放：1px 的條在 150% 縮放下會先被吸附成 1.33px 再放大＝底線超出字（見 util.js segTabs） */
.seg.seg-bar > .seg-ind { z-index: 2; width: 100px; height: 2px; background: var(--primary); transform-origin: 0 0; }
.seg.seg-bar > .seg-ind.ready { transition: transform 260ms var(--ease), opacity 120ms; }
.seg.seg-bar .seg-n {
  min-width: 20px; padding: 0 6px; line-height: 18px; text-align: center;
  border-radius: var(--r-pill); background: var(--tag-bg); color: var(--muted-2);
}
/* hub 頁首與它的分頁列是同一個頁首：拉近一點（原本 32px＋標題下距，分頁列看起來跟標題沒關係） */
.view > .page-head + .seg.seg-bar:not(.seg-sub) { margin-top: calc(-1 * var(--sp-3)); }

/* ② 次級底線頁籤：字小一階、底線中性色＝層級一眼分得出來（品牌色只留給頁面級那一條） */
.seg.seg-bar.seg-sub { --seg-pad: 10px; margin: 0 0 var(--sp-3); }
.seg.seg-bar.seg-sub > button { min-height: 34px; font-size: var(--fs-sm); }
.seg.seg-bar.seg-sub > .seg-ind { background: var(--muted-2); }

/* ③ 分段切換：軌道（疊色，放在畫布／卡片／對話框上都比底下深一階）＋白色底塊 */
.seg.seg-pill { gap: 2px; padding: 4px; border-radius: var(--r-md); background: var(--seg-track); }
.seg.seg-pill > button { min-height: 32px; padding: 0 12px; color: var(--muted-2); font-size: var(--fs-md); }
.seg.seg-pill > button:hover, .seg.seg-pill > button.seg-on { color: var(--text); }
.seg.seg-pill > .seg-ind { border-radius: var(--r-sm); background: var(--seg-thumb); box-shadow: var(--seg-thumb-sh); }
/* 動寬高是 Motion「只動 transform/opacity」的例外：底塊有圓角，scaleX 會把圓角壓扁；它是 absolute、改寬高不推動任何東西 */
.seg.seg-pill > .seg-ind.ready { transition: transform 260ms var(--ease), width 260ms var(--ease), height 260ms var(--ease), opacity 120ms; }

/* 換頁轉場（配合 main.js 的 renderRouted）：只讓內容區 #view 動，頂欄與導覽不動——
   給 #view 自己的 view-transition-name 就會從 root 快照裡獨立出來，root 仍會交叉淡入
   但那一區沒有變化＝看不出來。時長比照 --tr 系列，短而不拖。
   包在 prefers-reduced-motion: no-preference 裡：要求減少動態的人連 name 都不掛，
   瀏覽器就完全不會為它做轉場（JS 那邊也有一道，兩邊都擋）。 */
@media (prefers-reduced-motion: no-preference) {
  /* 只在轉場期間掛（util.js viewTransition 加 .vt-live）：常駐的話 #view 會自成疊層，裡面的抽屜蓋不過頂欄。 */
  #view.vt-live { view-transition-name: cra-view; }
  /* 等長、同曲線、加法混色＝兩張的不透明度相加恆為 1：兩頁同一個位置都是白卡時，轉場中途不會透出灰底。
     原本舊頁 110ms 淡出、新頁 190ms 淡入，而且自訂 animation 會蓋掉瀏覽器預設的 plus-lighter
     ⇒ 中途兩張都半透明、白卡變灰再變白＝「切頁閃一下」（2026-10-01 回報；放慢 10 倍實測白卡 255→249、
     深色 27.7→24.3）。也不再上下位移：兩頁同位置的標題會跟著抖。 */
  ::view-transition-old(cra-view), ::view-transition-new(cra-view) {
    animation-duration: var(--dur-2); animation-timing-function: var(--ease-out); animation-fill-mode: both;
    mix-blend-mode: plus-lighter; }
  ::view-transition-old(cra-view) { animation-name: cra-vt-out; }
  ::view-transition-new(cra-view) { animation-name: cra-vt-in; }
}
/* 就地轉場（util.js viewTransition）：from 節點「長成」to 節點，例：專案卡片 → 專案詳情摘要。
   group 管位置與大小、old/new 交叉淡入；比換頁略長，因為真的有東西在移動——位移走不過衝的彈簧（--spring-soft）。 */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(cra-morph) { animation-duration: var(--dur-3); animation-timing-function: var(--spring-soft); }
  ::view-transition-old(cra-morph), ::view-transition-new(cra-morph) { animation-duration: var(--dur-3); height: 100%; }
}
@keyframes cra-vt-out { to { opacity: 0; } }
@keyframes cra-vt-in { from { opacity: 0; } }

/* 中文折行：末行只剩一兩個字（孤字）在中文裡特別難看。桌面寬度下標題幾乎不折行＝無作用，
   但手機 390px 實測：結果標題孤字 1/12 → 0、末行平均 15.8 → 21.3 字（行長更均勻）；
   摘要孤字 3/20 → 0。balance 只給短文字（瀏覽器對行數有上限，長文會自動忽略），
   pretty 給段落（成本低，專門處理孤行）。不支援的瀏覽器忽略它＝維持現狀。
   **一定要寫 longhand text-wrap-style**：簡寫 text-wrap 會順便把 text-wrap-mode 設回 wrap，
   同一個元素上的 .nowrap（white-space:nowrap）就被取消——資料品質表的日期折成「2026-07-／30」（2026-10-01 二輪體檢）。 */
.view h1, .view h2, .view h3, .view h4, .page-head .ph-title { text-wrap-style: balance; }
.view p, .empty, .muted { text-wrap-style: pretty; }

/* 狀態標籤＝全站一套（2026-10-02）：正常／成功 .tag.ok、注意 .tag.warn、失敗／錯誤 .tag.err，中性（執行中、停用、未知）＝不加修飾的 .tag。
   原本同一種「成功／失敗／啟用中」有純文字、彩色字、膠囊三種寫法，lab 拿 .tag.warn 標「失敗」（只因為沒有 .tag.err）。字要寫出來，不只靠顏色。 */
.tag.ok { background: var(--green-bg); color: var(--green); }
.tag.warn { background: var(--amber-bg); color: var(--amber); }
/* 字往 --text 混兩成：深色的紅疊在自己的淡紅底上只有 4.1:1（12px 字要 4.5），混了 4.9；淺色反而更深、更清楚。綠與橘本身就夠（5.6／6.4）。 */
.tag.err { background: var(--red-bg); color: color-mix(in srgb, var(--red) 80%, var(--text)); }
/* 頁首 meta（公司 · 負責人 · 變更負責人）對齊成一列 */
.setup-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
/* 每顆 chip 整體為單位換行：中文 flex item 的 min-content=單一字元，不 nowrap 會被壓成
   「變更負／責人」「更／新」直排。nowrap＋不收縮 → 空間不足時靠 .setup-meta 的 flex-wrap 整顆換行。*/
.setup-meta > span, .setup-meta > button { white-space: nowrap; flex-shrink: 0; }
.setup-dot { color: var(--muted); }
/* 變更負責人＝一組小控件：標籤＋下拉＋「更新」同高（30px）同一條中線 */
.setup-owner { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* 右內距留給 select 的 chevron（全站 select 是 padding-right:30px；只寫 0 8px 會讓長名字壓到箭頭上） */
.setup-owner-sel { width: auto; min-width: 9rem; min-height: 30px; padding: 0 30px 0 10px; font-size: var(--fs-sm); flex-shrink: 0; }

/* ---- AI 法規影響：依「本期間有修正的法規」分組的垂直 feed（由上往下滑） ---- */
.li-feed { display: flex; flex-direction: column; gap: 12px; margin-top: .6rem; }
.li-lawgroup-h { display: flex; align-items: center; gap: 8px; padding: 10px 4px 4px; position: sticky; top: 0;
  background: var(--bg); z-index: 1; font-size: var(--fs-body); }
.li-lawgroup-h:first-child { padding-top: 0; }
.li-lawglyph { display: inline-flex; color: var(--muted-2); flex: none; }
.li-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; background: var(--panel); min-width: 0; }
.li-dhead { margin-bottom: .6rem; }
.li-field { margin: .7rem 0; }
.li-flabel { font-size: var(--fs-xs); letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.li-cp { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--text); font: inherit; line-height: 1.6; }
.li-cp:disabled { opacity: .6; cursor: default; }
.li-ai { margin: .7rem 0; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); }
.li-aitext { font-size: var(--fs-md); line-height: 1.7; white-space: pre-wrap; }
.li-diff-add { color: var(--red); font-weight: 600; background: var(--red-bg); border-radius: 3px; padding: 0 2px; }

/* 指派工具列：左（計數＋挑人＋動作）右（全選/取消）兩簇對齊，控制項等高 */
.setup-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
  position: sticky; top: 0; z-index: 2; }
.setup-tb-left { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.setup-tb-right { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

/* 依法規指派清單：每列＝一部法規，欄位對齊（勾選 / 法規名 / 條數 / 負責人） */
.setup-list { margin-top: .6rem; max-height: 60vh; overflow: auto; padding: 0; }
.setup-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .8rem;
  border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; }
.setup-row:last-child { border-bottom: 0; }
.setup-row:hover { background: var(--panel-2); }
.setup-row.sel { background: var(--primary-bg); }
.lawpick { flex: none; width: 1.15rem; height: 1.15rem; display: inline-flex; align-items: center;
  justify-content: center; color: var(--primary-hover); }
.law-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.law-count { flex: none; min-width: 6.5rem; text-align: right; white-space: nowrap; }
.law-assignees { flex: none; width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-2); }
@media (max-width: 720px) { .law-assignees { display: none; } }
.setup-run { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

/* 依法規類型指派：卡片格＋長按拖曳連選＋選取動畫（卡片感） */
.lawtype-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem; margin-top: .6rem; user-select: none; }
.lawtype-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: .85rem .9rem; cursor: pointer; box-shadow: var(--sh-1);
  transition: translate var(--dur-3) var(--spring), scale var(--press-tr), box-shadow var(--dur-2) var(--ease-out), border-color var(--tr), background var(--tr); }
.lawtype-card:hover { translate: 0 var(--lift-y); box-shadow: var(--sh-2); border-color: var(--line-strong); }   /* 浮起＝全站可點卡片同一組（見 .project-card） */
.lawtype-card.sel { border-color: var(--primary); background: var(--panel-3); }
.lawtype-card.pop { animation: ltc-pop .22s cubic-bezier(.2,1.4,.4,1); }
@keyframes ltc-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
.ltc-check { position: absolute; top: .55rem; right: .6rem; display: inline-flex; color: var(--primary-hover);
  opacity: 0; transform: scale(.4); transition: opacity .14s ease, transform .14s ease; }
.lawtype-card.sel .ltc-check { opacity: 1; transform: scale(1); }
.ltc-name { font-weight: 600; padding-right: 1.4rem; line-height: 1.3; }
.ltc-meta { margin-top: .25rem; }
.ltc-assignees { margin-top: .45rem; color: var(--primary-hover); }
.ltc-assignees.muted { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .lawtype-card, .lawtype-card.pop { transition: none; animation: none; } }

/* 覆核人員多選下拉（reviewerPicker）— 打勾＋彈入動畫，仿法條頁挑選 */
.rp { position: relative; display: inline-flex; }
.rp-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 13rem; min-height: 30px; padding: 0 10px; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--fs-sm); }
/* 外觀＝全站原生  的原生鈕
   文案與圖示都改不了、各頁長相不一 → 全站一律走這顆（preflight #12 擋新的裸 file input）。 */
.fp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fp-btn { display: inline-flex; align-items: center; gap: 6px; }
.fp-ic { display: inline-flex; color: var(--muted-2); }
.fp-btn:hover .fp-ic { color: var(--text); }
.fp-name { font-size: var(--fs-sm); word-break: break-all; }

/* ── Bug 回報（浮動面板 + 紀錄頁；前身：平台鏡像）──────────────────── */
.mv-item { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: var(--fs-md); cursor: pointer; }
.mv-item span { flex: 1; }
.mv-prob { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.mv-prob-t { min-width: 90px; font-size: var(--fs-sm); }
/* 紀錄頁列內編輯器 */
.mirror-view .mv-edit-row td { background: var(--panel-2); }
.mirror-view .mv-editor { padding: 6px 4px; }
.mirror-view .mv-editor h4 { margin: 10px 0 4px; font-size: var(--fs-sm); color: var(--muted); font-weight: 650; }
.mirror-view .mv-editor h4:first-child { margin-top: 0; }
/* 浮動回報面板：右下角固定面板；開關由頂欄 Bug 圖示切換（開＝顯示、關＝移除），面板內「關閉」鈕也是關掉模式。 */
.bugpanel { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 340px; max-width: calc(100vw - 36px); max-height: 600px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--r-md, 12px); box-shadow: var(--sh-2); overflow: hidden; }
.bugpanel-head { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.bugpanel-head .bp-my { margin-left: auto; font-size: var(--fs-sm); text-decoration: none; }   /* 工具列上的連結靠顏色辨識；底線會拖過全形括號的留白 */
.bugpanel-head .bp-my:hover { text-decoration: underline; }
/* 面板裡的連結（我的回報／查看我的回報／查看紀錄）：全站沒有 a 的顏色規則＝瀏覽器預設藍紫色，深色底上幾乎看不見。 */
.bugpanel a { color: var(--primary); text-underline-offset: 3px; }
/* 送出結果／錯誤寫在標題列第二行（bugpanel.js say()）：手機上吐司會被面板或漢堡選單蓋住。 */
.bugpanel-status { flex-basis: 100%; font-size: var(--fs-sm); color: var(--green); }
.bugpanel-status.error { color: var(--red); }
.bugpanel-body { padding: 10px 14px; overflow-y: auto; max-height: min(58vh, 460px); }
.bugpanel-sec { margin-bottom: 12px; }
.bugpanel-sec h4 { margin: 0 0 4px; font-size: var(--fs-sm); color: var(--muted); font-weight: 650; }
/* 問題類型：類型名是固定標籤、補充說明在它下一行（勾了才出現）——原本類型名只是輸入框的 placeholder，一打字就看不出是哪一類。 */
.bugpanel .bp-prob-in { display: block; width: calc(100% - 24px); margin: 2px 0 6px 24px; }
.bugpanel textarea { min-height: calc(2lh + 20px); }   /* 筆記：field-sizing:content 沒字時只有一行高，看起來像單行欄位（同 .app-dialog textarea） */
.bugpanel .fp { margin-bottom: 6px; }
.bugpanel-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
/* 「收起」＝收成同一角落的膠囊「Bug 回報（已勾 N）」，點膠囊再展開（桌機手機同一套；手機預設收合，見檔尾 720px 區塊）。 */
.bugpanel .bp-collapse { display: inline-flex; align-items: center; justify-content: center; min-height: 0; padding: 4px; color: var(--muted); }
.bugpanel-pill { display: none; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 0; background: transparent; box-shadow: none; color: var(--text); font-size: var(--fs-md); font-weight: 600; }
.bugpanel-pill svg { display: block; color: var(--muted-2); }
.bugpanel.bp-collapsed { width: auto; border-radius: var(--r-pill); corner-shape: round; }
.bugpanel.bp-collapsed > :not(.bugpanel-pill) { display: none; }
.bugpanel.bp-collapsed > .bugpanel-pill { display: inline-flex; }
/* 紀錄頁：點列展開的原始 JSON 檢視 */
.mirror-view .mv-json-row td { background: var(--panel-2); }
/* pre-wrap + overflow-wrap:anywhere：JSON 內含截圖 base64 data-URL 這種超長單詞，white-space:pre 會把表格撐爆，改為換行且長字強制斷。 */
.mirror-view .mv-json { margin: 0; padding: 10px 12px; max-height: 420px; overflow: auto; font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.5; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.mirror-view tr[data-expandable] { cursor: pointer; }

/* 紀錄表整體穩固：欄寬固定＋內容換行，避免內容/截圖/JSON 把表格撐爆或窄螢幕擠壓；
   紀錄數量少 → 關閉 .data-table 的 content-visibility 視窗化（其 44px 估高對高列會造成捲動亂跳）。 */
.mirror-view .data-table { table-layout: fixed; width: 100%; min-width: 980px; }
.mirror-view .data-table tbody tr { content-visibility: visible; contain-intrinsic-size: auto; }
/* 欄寬：狀態要放得下「已完成修正」＋下拉箭頭（104px 會把選項文字切掉）；
   操作有 5 顆鈕（JSON／編輯／回覆／複製／刪除），150px 會擠成三行。 */
.mirror-view .data-table thead th:nth-child(1) { width: 76px; }    /* 編號 */
.mirror-view .data-table thead th:nth-child(2) { width: 164px; }   /* 時間 */
.mirror-view .data-table thead th:nth-child(3) { width: 96px; }    /* 回報人 */
.mirror-view .data-table thead th:nth-child(5) { width: 148px; }   /* 狀態 */
.mirror-view .data-table thead th:nth-child(6) { width: 236px; }   /* 操作 */
/* 內容欄（第 4 欄，未指定寬→吃剩餘）強制換行，長 URL/字串不撐欄 */
.mirror-view .data-table td:nth-child(4) { overflow-wrap: anywhere; word-break: break-word; }

/* ── 條文比對面板（law_detail 
）＋通用文字 diff（diff.js）─────────
   顏色一律走 token（DESIGN.md 硬規則）；綠＝新增、紅＝刪除；雙欄在窄螢幕收合成單欄。 */
.law-compare { margin: 0 0 var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); }
.law-compare > summary { padding: 10px 14px; cursor: pointer; font-weight: 600; color: var(--muted-2); }
.law-compare[open] > summary { border-bottom: 1px solid var(--line); }
.law-compare-ctl { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; padding: 12px 14px; }
.law-compare-ctl label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--muted); }
.law-compare-tas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 14px 12px; }
.law-compare-ta { min-height: 60px; }
.law-compare-out { padding: 0 14px 14px; }
.diff { overflow-x: auto; }
.diff-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.diff-pane { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); white-space: pre-wrap; word-break: break-word; line-height: 1.6; }
.diff-inline { white-space: pre-wrap; word-break: break-word; line-height: 1.6; }
ins.diff-add { background: var(--green-bg); color: var(--green); text-decoration: none; border-radius: 3px; padding: 0 1px; }
del.diff-del { background: var(--red-bg); color: var(--red); border-radius: 3px; padding: 0 1px; }
@media (max-width: 720px) { .diff-split, .law-compare-tas { grid-template-columns: 1fr; } }
/* 更新覆核卡：管控重點內容（左，可編輯）與 AI 建議（右）左右並列；窄螢幕改上下堆疊。 */
.cp-ai-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 860px) { .cp-ai-split { grid-template-columns: 1fr; } }

/* ── 精緻化：載入骨架 / 專案卡刪除鈕收斂 / 覆核頁匯出選單 ───────────────── */
/* 載入骨架 shimmer（取代「載入中…」純文字；reduced-motion 由全域 blanket 停用動畫）。 */
.skeleton { display: grid; gap: 10px; }
.skeleton-row { height: 14px; border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--panel-3) 37%, var(--panel-2) 63%);
  background-size: 400% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; }
@keyframes skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
/* 進行中的小轉圈（只給「正在跑」的狀態，DESIGN.md Motion：infinite 只准給載入中）：吃 currentColor，放在文字旁。
   帶圖示的鈕忙碌時（.btn-ic[aria-busy]）前面那顆圖示換成同尺寸的轉圈＝字不位移，呼叫端只要設 aria-busy、換字。 */
.spinner, .btn-ic[aria-busy="true"]::before { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px;
  border: 2px solid color-mix(in srgb, currentColor 22%, transparent); border-top-color: currentColor; animation: cra-spin .8s linear infinite; }
.btn-ic[aria-busy="true"]::before { content: ""; box-sizing: border-box; width: 15px; height: 15px; }   /* 15px＝圖示尺寸（::before 不吃全站 * 的 border-box） */
.btn-ic[aria-busy="true"] > svg:first-child { display: none; }
@keyframes cra-spin { to { transform: rotate(360deg); } }
.crawl-running { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }

/* 專案卡「刪除」：可 hover 的桌面平時隱藏，hover 卡片或鍵盤 focus 才現，降低誤點；觸控裝置維持常顯。 */
@media (hover: hover) {
  .project-card .pc-top .icon.danger { opacity: 0; transition: opacity var(--tr); }
  .project-card:hover .pc-top .icon.danger,
  .project-card .pc-top .icon.danger:focus-visible { opacity: 1; }
  /* Skills 卡動作列：Notion 式「乾淨卡片、動作滑過才現」——桌面平時隱藏整列動作，hover 卡片或鍵盤 focus 進來才浮出（focus-within 覆蓋整列，非只 danger 鈕）；觸控裝置維持常顯。
     動作列與狀態列疊在 .sk-foot 同一格、滑過時互換：原本動作列自己佔一條（隱形），卡底就多一條空帶。用 opacity 不用 display＝格子高度不變、hover 時卡片不跳高。 */
  .skill-card2 .sk-foot > * { grid-area: 1 / 1; }
  .skill-card2 .sk-actions,
  .skill-card2 .sk-track { transition: opacity var(--tr); }
  .skill-card2 .sk-actions { opacity: 0; }
  .skill-card2:hover .sk-actions,
  .skill-card2:focus-within .sk-actions { opacity: 1; }
  /* 藏起來的狀態列一定要 pointer-events:none：opacity<1 會讓它自成疊層、畫在「不透明的動作列」上面，
     透明但照樣攔點擊——滑過卡片後點「檢視內容／複製／編輯」正中央沒反應，只剩按鈕頂端露出的 3px 點得到（2026-10-01 UX 實測）。 */
  .skill-card2:hover .sk-track,
  .skill-card2:focus-within .sk-track { opacity: 0; pointer-events: none; }
  /* 刪除鈕同專案卡：滑過才現。原本寫在這個區塊外面＝手機上永遠透明、卻照樣點得到（右上角一塊看不見的刪除）。 */
  .skill-card2 .icon.danger { opacity: 0; transition: opacity var(--tr); }
  .skill-card2:hover .icon.danger, .skill-card2 .icon.danger:focus-visible { opacity: 1; }
}

/* 覆核頁「匯出」下拉（
）：把 4 顆匯出鈕收成一顆。 */
.exports-menu { position: relative; }
.exports-menu > summary { list-style: none; cursor: pointer; }
.exports-menu > summary::-webkit-details-marker { display: none; }
/* 按鈕內的下拉箭頭（圖示 chevron-down）：展開時翻向上（DESIGN.md「下拉箭頭方向」）。