/* =============================================================================
   元件庫　components.css
   依據：DESIGN_SYSTEM.md 第 2、3 節

   DESIGN_SYSTEM.md §4.1：所有畫面 import 本檔組裝，禁止行內樣式與新色值。
   本檔沒有的元件，先在 DESIGN_SYSTEM.md 新增定義、經業主同意，再實作於此。

   字級與間距一律 rem（見 tokens.css 說明）；註解中的 px 為預設 12pt 時的值。
   維持 px 的只有三種：分隔線 1px、狀態色條 3px、斷點 820px——
   髮絲線放大會變粗黑框，斷點是視窗尺寸而與字級無關。

   基準瀏覽器為 Chrome（設計書第二章）：不寫其他引擎的相容前綴與退路。
   ============================================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: 0.875rem; line-height: 1.55;      /* 14px */
  color: var(--ink); background: var(--paper);
}

/* ---- 字級 ---- */
/* 標題一律黑體字,不染功能區主題色(Fred 指示 2026-08-07:之前的藍色標題
   看起來像沒改;對比度也一次到頂) */
h1 {
  font-size: 1.125rem; font-weight: 700;                                       /* 18px */
  color: var(--ink);
}
/* 畫面標題列：標題靠左、回前頁靠右上角（業主指示 2026-08-02）。
   標題本身之外不放別的東西——右上角是固定給退路的位置，
   每一頁都在同一個地方，人不必找。 */
.pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.pagehead h1 { min-width: 0; }
.pagehead .btn { flex: 0 0 auto; white-space: nowrap; }
h2 { font-size: 0.84375rem; font-weight: 700; color: var(--brand); }           /* 13.5px */
.sub  { font-size: 0.78125rem; color: var(--mut); margin-top: var(--sp-1); }  /* 12.5px */
.hint { font-size: 0.75rem; color: var(--mut); }                          /* 12px */
table, .num { font-variant-numeric: tabular-nums; }

/* ---- 圖示（內嵌 SVG，單色、隨字級縮放）---- */
.icon {
  width: 1.15em; height: 1.15em; flex: 0 0 auto;
  vertical-align: -0.18em; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- 頂欄 TopBar ---- */
.topbar {
  position: sticky; top: 0; z-index: 20; height: 3.125rem;   /* 50px */
  /* 品牌青到亮青的橫向漸層，尾端再帶一點目前功能區的顏色——
     連頂欄都會隨著你所在的區域微微變色。整體壓到七成色深（業主指示）。 */
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--brand-2) 62%, #fff) 0%,
    color-mix(in srgb, var(--brand-2) 78%, #fff) 55%,
    color-mix(in srgb, var(--g-v, var(--brand-2)) 78%, #fff) 100%);
  color: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: 0 var(--sp-6);
}
.topbar .brandmark {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 700; font-size: 0.875rem; min-width: 0;      /* 14px */
}
.topbar .brandmark .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 系統名稱之前一律放標誌（業主指示 2026-07-30）。
   高度綁字級（em 而非 px）：使用者把字型調到 24pt 時，標誌要跟著長大，
   否則名稱變兩倍大而標誌還是原來那顆小點。

   **白色方形底**（業主指示 2026-07-30）：標誌本身是去背的綠與藍，
   直接疊在頂欄的淺藍漸層上，綠峰與藍浪都跟底色黏在一起看不清楚。
   給它一塊白底就分離出來了——白對頂欄漸層約 1.6:1，是看得出邊界的最低程度，
   所以再加一條比白稍暗的細框把方形的邊界釘出來。

   方形而非圓角：業主指定方形。padding 讓圖形不貼邊，
   否則綠峰的尖端會頂到白底邊緣、看起來像被切掉。 */
/* 白框留白盡量少（業主指示 2026-07-30）。留白有兩個來源，都要處理：
     一、CSS 的 padding——降到 0.04em，只留一點不讓圖形壓到框線上
     二、**圖檔自己帶的留白**——原本 1200×1200 的畫布上，墨跡只佔高度的 47%。
         CSS 內距設成 0 也沒用，那圈留白在圖裡面。已重新裁切輸出，
         圖形橫向佔 96%（見 scratchpad/logo-tight.ps1）。
   垂直方向只佔 51% 是標誌本身的長寬比（1.9:1 橫式）造成的，
   在方形白框的前提下無法再壓——那是業主指定的形狀。 */
.brandlogo {
  width: 2.2em; height: 2.2em; flex: 0 0 auto;
  object-fit: contain; vertical-align: -0.5em;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .85);
  padding: 0.04em;
  /* 白底方塊在淺色頂欄上仍偏淡，補一道極淡的外陰影把邊界撐出來。
     這是全站少數用陰影的地方（另一處是文件閱覽區），理由相同：
     沒有它就分不出圖與底。 */
  box-shadow: 0 0 0 1px rgba(20, 34, 44, .10);
}
.brandlogo.lg { width: 3em; height: 3em; }
/* 登入畫面的標題改成「標誌 ＋ 名稱」一列 */
.brandline { display: flex; align-items: center; gap: var(--sp-2); }

/* 歡迎畫面的大標誌同樣給白底方形，與頂欄一致——
   頁面底色是近白的 paper，白底方塊靠那道細框才看得出來。 */
.welcomelogo {
  background: #fff;
  border: 1px solid var(--line);
  padding: 0.15rem;
}
.topbar .right { display: flex; align-items: center; gap: var(--sp-3); font-size: 0.8125rem; min-width: 0; }
/* 頂欄的按鈕不准折行。頂欄只有 50px 高，折成兩行的按鈕上下都會被切掉——
   窄視窗（手機）必然發生：「登出」在 375px 下原本就是這樣。 */
.topbar .right .btn { white-space: nowrap; flex: 0 0 auto; }
.orgpick {
  background: rgba(255, 255, 255, .55); color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--r-ctrl); padding: var(--sp-1) var(--sp-2);
  font-size: 0.8125rem; font-family: inherit; max-width: 14rem;
  min-width: 0; flex: 0 1 auto;      /* 空間不夠時先縮它，不要去擠按鈕 */
}
.avatar {
  width: 1.375rem; height: 1.375rem; flex: 0 0 auto; border-radius: var(--r-chip);
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.71875rem; font-weight: 700;
}
/* 權限等級：使用者隨時看得到自己是什麼身分，才不會把「按鈕不見了」當成故障 */
.topbar .lvl { font-size: 0.71875rem; opacity: .8; white-space: nowrap; }
/* 圖示按鈕：頂欄專用 */
.iconbtn {
  width: 1.75rem; height: 1.75rem; flex: 0 0 auto;           /* 28px */
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink); border: 0; border-radius: var(--r-ctrl);
  cursor: pointer; font-family: inherit;
}
.iconbtn:hover { background: rgba(255, 255, 255, .5); }
.iconbtn.on { background: rgba(255, 255, 255, .5); }

/* ---- 骨架 ----
   選單與資料畫面各自獨立上下捲動（業主指示 2026-07-30）。
   做法是「兩欄各自成為捲動容器」，不是把側欄設 sticky：
   sticky 只是視覺上釘住，捲軸仍然是整頁共用的一條——滑鼠在哪一邊滾，
   動的都是同一份內容。要真的各自獨立，就得讓外框不捲、兩欄自己捲。

   外框高度＝視窗高減頂欄（頂欄 3.125rem，sticky 在最上面），
   所以整頁剛好填滿、不產生頁面捲軸；上下捲動一律發生在兩欄內部。
   overscroll-behavior: contain 擋掉捲到底之後把外層一起帶著捲的行為。 */
.shell {
  display: flex; align-items: stretch;
  height: calc(100vh - 3.125rem);
}
.nav {
  width: 12.25rem; flex: 0 0 12.25rem; background: #fff;     /* 196px */
  border-right: 1px solid var(--line);
  padding: var(--sp-2) 0;
  overflow-y: auto; overscroll-behavior: contain;
  /* 捲軸的位置一律留著（業主回報 2026-08-02：側欄會左右亂移）。
     不留的話，展開幾個大項讓側欄變得捲得動，捲軸就冒出來、把 196px 的內容
     擠成 180px，整排項目往左跳 16px；收合回去又跳回來。留著＝不論捲不捲得動，
     內容寬度都一樣。 */
  scrollbar-gutter: stable;
}
/* 分組標題：可展開收合（DESIGN_SYSTEM.md §2「側欄 Nav」）。
   二十二個項目攤平太長，字型調大時更捲不完。

   每組帶一個分類色（--g），標題與該組圖示都用它——顏色比文字快，
   掃一眼就知道自己在哪一區。日後增加財務、法務、人資等分組時往下加 g7、g8。 */
/* 分組標題＝一條有顏色的橫帶，不是一行小灰字。
   顏色只出現在 11px 小標與小圖示上，整條側欄看起來仍是黑字白底，等於沒染色；
   要讓人一眼分出六個大項，顏色必須佔面積。 */
/* 大項與中項同字級、大項黑色粗體（業主指示 2026-08-02，uiux-3）。
   取代原本的「11px 小標＋字距 1px＋分類色字」：
   一、字級與中項一致（0.84375rem＝13.5px）——業主原話「大項與中項的標題字型一樣大」。
   二、字距歸零。13.5px 再加 1px 字距會比同字級的中項看起來寬一截，
       那就不叫「一樣大」了；1px 字距本來是配 11px 小標的做法，字級一改就沒有理由。
   三、字色改 --ink（黑體字）。分類色退到左緣 4px 色條上——側欄的辨識依據從此
       只有色條與中項圖示，文字不再染色。 */
.nav .group {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  font-family: inherit; font-size: 0.84375rem;
  color: var(--ink);
  letter-spacing: 0; font-weight: 700;
  background: #fff;
  border: 0; border-left: 4px solid var(--g-v, var(--brand-2));
  cursor: pointer; text-align: left;
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);
  margin-top: var(--sp-2);
}

/* ---- 底色規則（業主指示 2026-08-02，uiux-2 第 1、3 點）----
   取代 2026-07-30 的「大項底色三階」與「細項選中態」。

   全站只有一種選中底色 --wash，三個層級（大項、中項、小項）共用同一個值：

     大項　展開中　　　　　　　白底（不論是不是目前所在）
     大項　收合中＋目前所在　　--wash
     大項　收合中＋非所在　　　白底
     中項　選中　　　　　　　　--wash ＋ 4px 深字階左緣 ＋ 粗體
     小項　選中　　　　　　　　--wash ＋ 分類色框線（見 .subnav）
     三者 hover　　　　　　　　--paper

   為什麼展開之後大項要讓出底色：**同一時間只有一塊底色**。大項與中項同時
   著色，眼睛分不出哪一塊才是「我在這裡」（業主原話：不會讓 user 視覺混淆）。
   收合中的所在大項仍然給底色，因為那時中項根本不在畫面上，沒有別的東西
   可以承接這個記號。

   ── 為什麼底色不再用色深區分（留作紀錄，勿再走回頭路）──
   原規則以同一色系的不同色深表示四種狀態，青色系實測「大項·所在」與
   「選中細項」ΔE 只有 6.5——肉眼就是同一個顏色（業主 2026-07-30 回報
   「太接近」）。青、綠這類高亮度色相混白改變不了多少明度，靠色深永遠拉不開。
   現在底色本身退出辨識工作：選中與否由那一種淺色的有無回答，
   「在哪一區」由左緣色條、圖示與內容區配色回答。兩個問題分給兩種訊號，
   就不會再撞。 */
.nav .group:hover { background: var(--paper); }

/* 展開中一律白底——.open 寫在 .here 之後，蓋掉收合時的 --wash。
   順序不能顛倒：展開的所在大項必須是白的。 */
.nav .group.here { background: var(--wash); color: var(--ink); }
.nav .group.here:hover { background: var(--wash); }
.nav .group.open { background: #fff; }
.nav .group.open:hover { background: var(--paper); }

/* 展開中的那一組，中項區底色加深（業主指示 2026-08-02）。
   原為白底，與收合中的其他大項同色，展開的那一段看起來沒有邊界；
   改為 --paper（頁面底色）之後，那一段自成一塊，一眼看得出「這一組是打開的」。
   大項標題仍是白的，於是展開的組是「白標題 ＋ 深一階的內容」，層次由此而來。

   ⚠ 這一段的三個底色必須兩兩分得開，不能再往深走：
   白（標題）→ --paper（展開的中項區）→ --wash（選中的中項）。
   再深就會吃掉 --wash 的選中記號，而選中記號全站只有那一種顏色（uiux-2）。
   左緣仍是分類色的淡色條——那是色條不是底色，
   收合成圖示列之後它是分得出哪一組是哪一組的依據之一。 */
/* ⚠ 框線**不加在這一整塊上**（業主更正 2026-08-02）：框整塊等於把「這一組展開了」
   講兩次（底色已經在講），而真正需要被一眼認出來的是「我現在在哪一項」——
   框線讓給選中的那一項（見下方 .gbody a.on）。 */
.nav .gbody.open {
  background: color-mix(in srgb, var(--line) 30%, #fff);
  border-left: 4px solid color-mix(in srgb, var(--g-v, var(--brand-2)) 35%, #fff);
}
.nav .gbody a { border-left-width: 0; padding-left: var(--sp-4); }
/* 底色加深之後，hover 不能再用 --paper（比新底色還淺，滑過去反而變亮），
   同樣往 --line 走、再深一階；用 --line 這一支灰而不是 --wash 那一支藍，
   是為了讓「滑過」與「選中」除了深淺之外還差一個色相——
   只差深淺的兩個淺色，在筆電螢幕上很難分。 */
.nav .gbody a:hover { background: color-mix(in srgb, var(--line) 52%, #fff); }
/* 中項圖示用亮階 --g-v。
   ⚠ 2026-08-02 一度改為深階 --g（對比由 1.5:1 提高到 5:1），當日業主退回：
   「還是恢復原來樣子，比較好看」。留這一句是為了不要再改一次——
   對比數字不是這裡的判準，側欄圖示是輔助記號、旁邊一律有文字（§2 圖示 icon），
   語意不靠它單獨承載。選中那一項的圖示才用深階（見下），那是「我在這裡」的記號。 */
.nav .gbody a .icon { color: var(--g-v, var(--brand-2)); }
/* 選中中項：那一種淺色底 ＋ **整圈框線** ＋ 粗體（業主指示 2026-08-02：
   「只有被選中的選項有外框，為了容易視覺分辨；線條再粗一點」）。
   原本只有左緣一條 4px 色條，那條線與底色都在左邊，右半邊什麼記號也沒有——
   一整排淺藍底的項目掃過去，選中的那一條要看兩眼才確定。整圈框把它圈出來，
   一眼就分得出來。線寬 2px：1px 在深色底上幾乎看不見，3px 以上會讓
   196px 寬的側欄看起來像被塞滿了框。框線用分類色（--g），與內容區同色系。 */
.nav .gbody a.on {
  background: var(--wash);
  border: 2px solid var(--g, var(--brand));
  border-radius: var(--r-ctrl);
  /* 加了框就要把內距扣回來，否則選中的那一條會比別條高、整排跳一下 */
  padding: calc(var(--sp-2) - 2px) calc(var(--sp-5) - 2px);
  padding-left: calc(var(--sp-4) - 2px);
  margin: 0 var(--sp-2);
  font-weight: 700;
}
.nav .gbody a.on .label { color: var(--ink); }
.nav .gbody a.on .icon { color: var(--g, var(--brand)); }

/* 分類色套用：g1–g10 可掛在側欄分組，也可掛在整個內容區（見檔尾「區段配色」）。
   三階各有用途——文字用 --g、圖示與色條用 --g-v、底色用 --g-bg。 */
.g1  { --g: var(--c1);  --g-v: var(--c1-v);  --g-bg: var(--c1-bg); }
.g2  { --g: var(--c2);  --g-v: var(--c2-v);  --g-bg: var(--c2-bg); }
.g3  { --g: var(--c3);  --g-v: var(--c3-v);  --g-bg: var(--c3-bg); }
.g4  { --g: var(--c4);  --g-v: var(--c4-v);  --g-bg: var(--c4-bg); }
.g5  { --g: var(--c5);  --g-v: var(--c5-v);  --g-bg: var(--c5-bg); }
.g6  { --g: var(--c6);  --g-v: var(--c6-v);  --g-bg: var(--c6-bg); }
.g7  { --g: var(--c7);  --g-v: var(--c7-v);  --g-bg: var(--c7-bg); }
.g8  { --g: var(--c8);  --g-v: var(--c8-v);  --g-bg: var(--c8-bg); }
.g9  { --g: var(--c9);  --g-v: var(--c9-v);  --g-bg: var(--c9-bg); }
.g10 { --g: var(--c10); --g-v: var(--c10-v); --g-bg: var(--c10-bg); }
.g11 { --g: var(--c11); --g-v: var(--c11-v); --g-bg: var(--c11-bg); }
.g12 { --g: var(--c12); --g-v: var(--c12-v); --g-bg: var(--c12-bg); }
.g13 { --g: var(--c13); --g-v: var(--c13-v); --g-bg: var(--c13-bg); }
.g14 { --g: var(--c14); --g-v: var(--c14-v); --g-bg: var(--c14-bg); }
/* 展開收合的箭頭放大（業主指示 2026-07-30：便於視力不好的人操作）。
   尺寸用 rem 不用 em，與根字級掛鉤——使用者把字級調到 20pt 它也跟著等比放大。
   線條同步加粗，不然放大只是把一根細線拉長，遠看還是看不見。

   大項圖示於 2026-08-02（uiux-3）取消，故此處只剩箭頭。原規則的理由是
   「收合狀態下分得出哪條是哪一項」，但圖示列模式底下 .nav .group 整條隱藏、
   項目平鋪，靠的是中項自己的圖示與左緣色條——大項圖示從來沒有參與那件事。 */
.nav .group .chev { display: flex; align-items: center; }
.nav .group .chev .icon {
  width: 1.375rem; height: 1.375rem; stroke-width: 2.4; transition: transform .12s;
}
.nav .group.open .chev .icon { transform: rotate(90deg); }
.nav .group .gcount { margin-left: auto; letter-spacing: 0; opacity: .8; font-weight: 400; }

/* 分組內容。收合＝不顯示；不用高度動畫——動效僅限 hover 底色與畫面切換（§3）。 */
.nav .gbody { display: none; }
.nav .gbody.open { display: block; }
.nav a {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 0.84375rem; color: var(--ink); text-decoration: none;
  padding: var(--sp-2) var(--sp-5); border-left: 3px solid transparent; cursor: pointer;
  white-space: nowrap; overflow: hidden;
}
.nav a:hover { background: var(--paper); }
.nav a.on { background: var(--wash); border-left-color: var(--brand); font-weight: 700; }

/* 尚未開發的模組：照樣列出來，但一眼看得出還不能用（業主指示：以淡色呈現）。
   用整體透明度而不是另一個灰——色票只有一組灰（--mut），再淡就得引進新色值，
   那會破壞「色票外顏色一律退回」的紀律。透明度不是顏色，可以調。
   不用停用態（那表示「暫時不能點」），這裡點得進去——進去說明它是什麼、還缺什麼。 */
.nav a.todo { color: var(--mut); opacity: .5; }
.nav a.todo:hover { opacity: .8; }
.nav a.todo::after {
  content: ''; width: 0.375rem; height: 0.375rem; margin-left: auto; flex: 0 0 auto;
  border-radius: var(--r-chip); background: var(--line);
}

/* 側欄頂端只放三橫線（業主指示 2026-07-30：旁邊的小標誌取消）。
   作用是「全部大項展開／收合」。位置沿用 Windows NavigationView 的慣例：
   側欄頂端、與項目同一條左緣。
   圖示放大到 1.5rem 並加粗線條——這是全側欄最常按的一顆。 */
.nav .navhead {
  display: flex; align-items: center;
  padding: 0 var(--sp-3) 0 var(--sp-2); margin-bottom: var(--sp-1);
}
/* 只有圖示、沒有文字（業主指示 2026-07-30）。三橫線是通用符號，
   不需要旁邊那兩個字；停留提示仍會說「展開選單／收合選單」。 */
.nav .hamburger {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink); padding: var(--sp-3); border-radius: var(--r-ctrl);
}
.nav .hamburger .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2.2; }
.nav .hamburger:hover { background: var(--paper); }

/* ---- 歡迎畫面 ----
   只在這台裝置第一次登入時出現（沒有上次的畫面可還原）。
   之後每次進來都直接回到上次那個畫面，不會再看到它。 */
.welcome {
  min-height: calc(100vh - 3.125rem);            /* 扣掉頂欄 */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-4);
  text-align: center; padding: var(--sp-6);
}
.welcomelogo { width: 9rem; height: 9rem; max-width: 40vw; max-height: 40vh; display: block; }
/* 大項標題在標誌正上方（業主指示 2026-08-02，uiux-3）。字比系統名稱大——
   這個畫面上它才是主角：系統名稱每一頁都看得到，「我在哪一個大項」只有這裡說得出來。
   用分類色（與 h1 同一組 color-mix，對比由 check-palette 把關），
   但字本身已經說清楚是哪一區，顏色只是把它與內容區的配色接起來。 */
.welcome .wgroup {
  font-size: 1.75rem; font-weight: 700; letter-spacing: 1px;
  color: color-mix(in srgb, var(--g, var(--brand)) 70%, var(--ink));
}
.welcome .wname { font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.welcome .whint { font-size: 0.875rem; color: var(--mut); }

/* 目前所在的大項另加一條較深的左緣，讓那條色帶在整列裡站得更前面。
   底色見上方 .nav .group.here——內描邊拿掉了，滿色底加描邊只是多一層雜訊。 */
.nav .group.here { border-left-color: var(--g, var(--brand)); }

/* ---- 側欄收起（三橫線）----
   目的是讓主畫面面積更大：196px → 3rem，只留圖示。Windows NavigationView 慣例。
   與大項的展開收合是兩件事，各有各的入口——三橫線管側欄寬度，
   大項標題管自己的細項。

   收起後一律平鋪、不分組：只剩圖示還要再加一層階層，只會更難點。
   所以這裡的 .gbody 是刻意不帶 .open 的——那是「平鋪」的做法，
   不是漏寫。（曾經誤把三橫線接到大項收合上，才會看起來像 bug。） */
:root[data-nav="rail"] .nav { width: 3rem; flex: 0 0 3rem; }
:root[data-nav="rail"] .nav .group { display: none; }
/* 圖示列模式沒有分組標題，項目平鋪——那時整條側欄就是一塊，
   再框一圈只是在 3rem 寬的欄子裡多兩條線。底色與框線一併拿掉。 */
:root[data-nav="rail"] .nav .gbody {
  display: block; background: none; border: 0; border-radius: 0; margin: 0;
}
:root[data-nav="rail"] .nav a,
:root[data-nav="rail"] .nav .hamburger { padding-left: 0; padding-right: 0; justify-content: center; }
:root[data-nav="rail"] .nav a { border-left-width: 3px; }
:root[data-nav="rail"] .nav .label { display: none; }
:root[data-nav="rail"] .nav a.todo::after { display: none; }

/* 資料畫面自己捲。min-height: 0 是關鍵：flex 子項的預設最小高度是內容高，
   不設 0 的話它會撐開外框，捲軸又回到整頁身上。 */
.main {
  flex: 1; min-width: 0; min-height: 0;
  padding: var(--sp-6) var(--sp-7);
  overflow-y: auto; overscroll-behavior: contain;
}
.bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-4) 0; }
.bar .spacer { flex: 1; }

/* ---- 卡片 ----
   標題列帶所屬功能區的淡底與色字：一整頁的卡片因此有層次，
   而不是白底上一堆白框。顏色由 .main 的區段 class 決定（見檔尾）。 */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); margin-bottom: var(--sp-4); overflow: hidden; }
/* 標題列＝色塊，但只到七成色深、配深色文字。
   原本用實色配白字，一旦下方緊接著同色的表頭（flush 卡片），兩條實色橫條會黏成
   一坨，反而看不出哪裡是標題、哪裡是欄位名。現在標題列中調、表頭淡底，
   兩者深淺分明，中間再加一條分隔線。 */
.card .hd {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: color-mix(in srgb, var(--g-v, var(--brand-2)) 70%, #fff);
  border-bottom: 1px solid var(--g-v, var(--brand-2));
}
.card .hd h2 { color: var(--ink); }
.card .hd .extra { font-size: 0.75rem; color: color-mix(in srgb, var(--ink) 72%, #fff); }
.card .bd { padding: var(--sp-5); }
.card .bd.flush { padding: 0; }

/* 個案總表卡（業主指示 2026-08-07，同日由灰改黃）：這張表在每個功能站都出現，
   底色不隨左欄分組變——固定黃色標題＋整卡外框，走到哪都認得。 */
.card.neutral { border: 2px solid #c8a415; }
.card.neutral .hd { background: #fff0b8; border-bottom-color: #c8a415; }
.card.neutral .tablewrap thead th { background: #fff8dd; color: #4a3b00; }

/* ---- 按鈕 ---- */
.btn {
  font-family: inherit; font-size: 0.8125rem; background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-ctrl);
  padding: var(--sp-2) var(--sp-3); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--sp-1);
}
.btn:hover { background: var(--paper); }
/* 主按鈕吃所屬功能區的顏色：在個案畫面是綠的、在核銷畫面是琥珀的，
   一眼知道自己按的是哪一區的主要動作 */
/* 主按鈕維持滿色配白字：一個畫面最多一顆，它就是要最重的那一個。
   其餘色塊都壓到七成，這一顆反而更跳得出來。
   底色另混一成半深色——琥珀、橄欖這類亮色相直接配白字只有 3.4:1，讀不清楚。 */
.btn.pri {
  background: color-mix(in srgb, var(--g, var(--brand)) 85%, var(--ink)); color: #fff;
  border-color: color-mix(in srgb, var(--g, var(--brand)) 85%, var(--ink)); font-weight: 600;
}
.btn.pri:hover {
  background: var(--g, var(--brand)); border-color: var(--g, var(--brand));
}
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: #fff; }
.btn.sm { padding: var(--sp-1) var(--sp-2); font-size: 0.75rem; }
.why { font-size: 0.75rem; color: var(--mut); }

/* ---- 分段選擇（互斥選項少時用，比下拉少一次點擊）---- */
.seg { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); }
.seg button {
  font-family: inherit; font-size: 0.8125rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-ctrl);
  padding: var(--sp-2) var(--sp-3);
}
.seg button:hover { background: var(--paper); }
.seg button.on { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }

/* ---- 小項 subnav（業主指示 2026-08-02，uiux-1）----
   中項底下的選項。位置固定在中項標題正下方、工具列與卡片群之前。

   **一律由左到右橫列，選項多就折成多排**（flex-wrap）。業主原話：
   「不要把小項的選項縱向排列或排在前一小項資料之後，user 很難找到。」
   縱向排列與「接在前一小項的資料之後」是同一個毛病的兩種長相——
   都要求使用者先捲動、先讀完前一段，才知道還有哪些選項可選。
   橫列一排的好處只有一個，但那一個就夠了：全部選項同時在視野裡。

   與 .seg 長得像，層級不同，不可互換：
     seg    　是欄位——在表單或工具列裡選一個值（如顯示模式），不換畫面
     subnav 　是導覽——換掉整個中項的內容，會改網址
   所以 subnav 用 --wash 底（與側欄選中中項同一個顏色，三個層級一致），
   seg 用 brand 實色底白字（那是「選了什麼值」，不是「我在哪一頁」）。

   下緣 3px 色條是選中態的第二個訊號：底色只有一種淺色，
   多排折行之後光靠底色，視線掃過去要停一下才找得到選中的那一顆。 */
.subnav {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-4) 0;
}
.subnav button {
  font-family: inherit; font-size: 0.8125rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-bottom: 3px solid var(--line);
  border-radius: var(--r-ctrl);
  padding: var(--sp-2) var(--sp-4);
}
.subnav button:hover { background: var(--paper); }
.subnav button.on {
  background: var(--wash);
  color: color-mix(in srgb, var(--g, var(--brand)) 75%, var(--ink));
  border-color: var(--g, var(--brand));
  font-weight: 600;
}
.subnav button .icon { color: var(--g-v, var(--brand-2)); }
.subnav button.on .icon { color: var(--g, var(--brand)); }

/* ---- 狀態晶片 ----
   實色藥丸配白字。淡底淡字在一整頁裡看不見，而狀態正是要讓人一眼掃到的東西。
   四個底色對白字都在 4.5:1 以上。 */
.chip {
  display: inline-block; font-size: 0.71875rem; font-weight: 700;    /* 11.5px */
  border-radius: var(--r-chip); padding: var(--sp-1) var(--sp-2);
  border: 1px solid transparent; white-space: nowrap; color: var(--ink);
}
.c-ok   { background: color-mix(in srgb, var(--green-v) 70%, #fff); border-color: var(--green); }
.c-pend { background: color-mix(in srgb, var(--amber-v) 70%, #fff); border-color: var(--amber); }
.c-bad  { background: color-mix(in srgb, var(--red-v)   70%, #fff); border-color: var(--red); }
.c-info { background: color-mix(in srgb, var(--g-v, var(--brand-2)) 70%, #fff);
          border-color: var(--g, var(--brand)); }

/* 晶片外觀的按鈕：權限矩陣的格子。看起來是狀態、點下去會換狀態——
   兩件事同時成立，所以既不是純晶片也不是普通按鈕。
   與出廠預設不同的格子加一圈虛線框，一眼看得出動過哪裡。 */
.chipbtn {
  font-size: 0.71875rem; font-weight: 700; color: var(--ink);
  border-radius: var(--r-chip); padding: var(--sp-1) var(--sp-2);
  border: 1px solid transparent; white-space: nowrap; cursor: pointer;
  font-family: inherit; min-width: 4.25rem;
}
.chipbtn:disabled { cursor: not-allowed; opacity: .55; }
.chipbtn.changed { outline: 2px dashed var(--ink); outline-offset: 1px; }

/* 個案總表的功能狀態格（業主指示 2026-08-07）：可點進該案的該功能。
   游標移上去時整格加線框——不框的話，格子點得動這件事完全看不出來，
   也分不清即將點到的是這一格還是整列。 */
.stagelink {
  display: inline-block; cursor: pointer;
  padding: 2px 4px; margin: -2px -4px;
  border: 1.5px solid transparent; border-radius: var(--r-chip, 8px);
}
.stagelink:hover { border-color: var(--brand-2); background: var(--wash); }

/* 個案總表每列只佔一行（業主指示 2026-08-07）：儲存格不換行，
   過長的內容以省略號截斷（拖寬該欄或點列進明細看全文），表格過寬時水平捲動。 */
.tablewrap.oneline td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18rem; }

/* ---- 表格 ---- */
table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
/* 表頭＝淡底＋色字。比上方的標題列淺兩階，兩條橫條才分得開。
   文字再往深色混一成半：青、綠這類色相在自家淡底上只有 4.3:1，
   12px 粗體要 4.5:1 才夠——欄位名讀不清楚，整張表就白做了。 */
thead th {
  background: var(--g-bg, var(--wash));
  color: color-mix(in srgb, var(--g, var(--brand)) 75%, var(--ink));
  font-size: 0.75rem; font-weight: 700;
  text-align: left; padding: var(--sp-2) var(--sp-3); white-space: nowrap;
  border-bottom: 2px solid color-mix(in srgb, var(--g, var(--brand)) 45%, #fff);
}
tbody td { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--line); vertical-align: middle; }
/* 隔列淡底：長清單一路往下看不會跳行 */
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--g-bg, var(--wash)) 55%, #fff); }
tbody tr:hover { background: var(--g-bg, var(--wash)); }
tbody tr.sel { background: var(--row-sel); }
tbody tr.clickable { cursor: pointer; }
.late { color: var(--red); font-weight: 700; }
.tablewrap { overflow-x: auto; }
td.right, th.right { text-align: right; }

/* ---- 可排序表頭（查詢中心）----
   按鈕而不是加 onclick 的 th：鍵盤要 Tab 得到、Enter 按得動，而 th 不會。
   繼承表頭的字色與字級，所以看起來還是表頭、不是一排藍色按鈕；
   游標與底線只在移過去時才出現——欄位名底下永遠有一條線的話，
   整排表頭會像十二個連結，反而看不出哪一欄正在排序。 */
.thsort {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; display: inline-flex; align-items: baseline; gap: var(--sp-1);
}
.thsort:hover { text-decoration: underline; }
.thsort.on { text-decoration: underline; text-decoration-thickness: 2px; }
.thsort .arrow { font-size: 0.875em; }

/* ---- 分頁列 ---- */
.pager {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  padding: var(--sp-3); border-top: 1px solid var(--line);
}

/* ---- KPI 卡 ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
/* KPI 卡：上緣色條加粗、整卡帶對應狀態的淡底。首頁一整排下來要有顏色節奏，
   不然紅橙綠的意義被白底稀釋掉。 */
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-5); border-top: 5px solid var(--line); }
.kpi.ok   { border-top-color: var(--green-v); background: color-mix(in srgb, var(--green-bg) 45%, #fff); }
.kpi.warn { border-top-color: var(--amber-v); background: color-mix(in srgb, var(--amber-bg) 45%, #fff); cursor: pointer; }
.kpi.bad  { border-top-color: var(--red-v);   background: color-mix(in srgb, var(--red-bg) 45%, #fff);   cursor: pointer; }
.kpi.warn:hover { background: var(--amber-bg); }
.kpi.bad:hover  { background: var(--red-bg); }
.kpi .n { font-size: 1.625rem; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; }
.kpi.bad .n  { color: var(--red); }
.kpi.warn .n { color: var(--amber); }
.kpi.ok .n   { color: var(--green); }
.kpi .lbl  { font-size: 0.84375rem; font-weight: 700; color: var(--brand); margin-top: var(--sp-1); }
.kpi .note { font-size: 0.75rem; color: var(--mut); margin-top: var(--sp-1); }

/* ---- 提示條（每畫面至多一條）---- */
.note-bar {
  background: var(--g-bg, var(--wash)); color: var(--g, var(--brand)); font-size: 0.78125rem;
  border-left: 3px solid var(--g-v, var(--brand-2));
  border-radius: var(--r-ctrl); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4);
}

/* ---- 分割檢視 ---- */
.split { display: flex; gap: var(--sp-4); align-items: stretch; }
.split .left  { flex: 0 0 46%; min-width: 0; }
.split .right { flex: 1; min-width: 0; }

/* ---- 文件閱覽（DESIGN_SYSTEM.md §2「文件閱覽 doc」）----
   深色底讓白色紙面跳出來，這是閱片介面的通則：底色越暗，紙上的字越清楚。
   工具列與縮圖列待 M1 收件模組上線後才有內容可放。 */
.doc {
  background: var(--doc-bg); border-radius: var(--r-card);
  min-height: 18rem; display: flex; flex-direction: column; overflow: hidden;
}
.doc .tools {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: #fff; font-size: 0.75rem;
}
.doc .page {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6); color: rgba(255, 255, 255, .72); font-size: 0.78125rem;
  text-align: center; line-height: 1.8;
}

/* ---- 表單 ---- */
.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-size: 0.78125rem; color: var(--mut); margin-bottom: var(--sp-1); }
.field label .req { color: var(--red); }
.inp {
  width: 100%; font-family: inherit; font-size: 0.8125rem; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-ctrl);
  padding: var(--sp-2) var(--sp-3); background: #fff;
}
.inp:focus { outline: none; border-color: var(--brand-2); }
.inp.bad { border-color: var(--red); }

/* ---- 勾選框 check（業主指示 2026-08-02：掃描前逐件挑）----
   多選多。seg 與 subnav 都是多選一，那兩個換不了這件事。
   尺寸用 rem 與根字級掛鉤——使用者把字級調大時，勾選框是最先變得難點的東西。
   accent-color 讓瀏覽器原生的勾選框吃品牌色，不必為了換個顏色去手刻一個。 */
.chk {
  width: 1.125rem; height: 1.125rem; margin: 0; flex: 0 0 auto;
  accent-color: var(--g, var(--brand)); cursor: pointer;
}
.chk:disabled { cursor: not-allowed; }
.chkrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 0.8125rem; color: var(--ink); cursor: pointer;
}
/* 停用態淡化，但不到看不見——它要說得出「這一列在，只是現在不能選」 */
.chkrow.off { color: var(--mut); opacity: .6; cursor: not-allowed; }

/* 把握度欄位（DESIGN_SYSTEM §2「把握度欄位 confInput」）。
   辨識結果逐格可改，左緣 4px 色條表示 AI 當初的把握度。
   不染整格底色：二十列的表會變成二十塊色，紅的那幾格反而不突出。
   色條窄、對比高，視線掃過去自然停在紅的那幾條上。 */
.inp.conf-hi   { border-left: 4px solid var(--green); }
.inp.conf-mid  { border-left: 4px solid var(--amber); }
.inp.conf-low  { border-left: 4px solid var(--red); }

/* 人改過的格子：虛線外框（與權限矩陣的 .chipbtn.changed 同一個語彙），
   色條同時轉為中性灰——那個顏色講的是「AI 當初多有把握」，
   人一改它就不再是這一格的狀態，繼續留著紅色會讓人以為改完還是可疑的。 */
.inp.changed {
  outline: 2px dashed var(--mut); outline-offset: 1px;
  border-left-color: var(--mut);
}

/* 註記欄：緊貼該列，但字級與縮排都與欄位值分開——
   手寫註記與表格內容是兩種東西，看起來就不該像同一種。 */
.noteinp { font-size: 0.75rem; margin-top: var(--sp-1); }
.notelbl { font-size: 0.6875rem; color: var(--mut); margin-bottom: 2px; }

/* 密碼欄位的「顯示／隱藏」切換（DESIGN_SYSTEM §2「密碼欄位」）。
   按鈕不縮：它的文字在「顯示」與「隱藏」之間換，兩個都是兩個字，
   但字型調到 24pt 以上時若讓它自然撐開，切換一次整列就跳一下寬度。 */
.pwrow { display: flex; gap: var(--sp-2); align-items: stretch; }
.pwrow .inp { flex: 1; min-width: 0; }
.pwrow .btn { flex: 0 0 auto; white-space: nowrap; }
.err { font-size: 0.75rem; color: var(--red); margin-top: var(--sp-1); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-4); }

/* ---- 版面工具（取代行內樣式；§4.1 禁止行內樣式）---- */
.vgap { height: var(--sp-4); }      /* 區塊間垂直間隔 */
.inp.auto { width: auto; }          /* 工具列中的下拉，不撐滿寬度 */
.plainlist { padding-left: var(--sp-5); }        /* 條列說明，非資料 */
.plainlist li { margin-bottom: var(--sp-2); }

/* ---- 空狀態：給下一步指引，不留白 ---- */
.empty { padding: var(--sp-6); text-align: center; color: var(--mut); font-size: 0.78125rem; }

/* ---- 訊息條（操作結果）---- */
.msg { border-radius: var(--r-ctrl); padding: var(--sp-2) var(--sp-3); font-size: 0.78125rem; margin-bottom: var(--sp-4); }
.msg.ok  { background: var(--green-bg); color: var(--green); }
.msg.bad { background: var(--red-bg);   color: var(--red); }

/* ---- 浮動訊息 toast（DESIGN_SYSTEM §2）----
   按鈕動作失敗時畫面上一定要有東西出現。固定在底部置中，同時只留一則。 */
.toasts {
  position: fixed; left: 50%; bottom: var(--sp-5); transform: translateX(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: var(--sp-2);
  width: min(34rem, calc(100vw - 2rem)); pointer-events: none;
}
.toast {
  pointer-events: auto; cursor: pointer;
  border-radius: var(--r-card); border: 1px solid var(--line);
  padding: var(--sp-3) var(--sp-4); font-size: 0.8125rem;
  box-shadow: 0 6px 20px rgba(22, 48, 58, .18);
  background: #fff;
}
.toast.bad { background: var(--red-bg);   color: var(--red);   border-color: var(--red); }
.toast.ok  { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.toast .x { float: right; opacity: .6; margin-left: var(--sp-3); }

@media print { .toasts { display: none; } }

/* ---- 對話框 ---- */
.mask {
  position: fixed; inset: 0; background: rgba(22, 48, 58, .45);
  display: flex; align-items: center; justify-content: center; z-index: 40; padding: var(--sp-5);
}
.dialog {
  background: #fff; border-radius: var(--r-card); border: 1px solid var(--line);
  width: 100%; max-width: 35rem; max-height: 90vh; overflow: auto;   /* 560px */
}
.dialog .hd { padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line); }
/* 對話框標題用黑體字,不用品牌藍;加大加粗才有標題的份量(Fred 指示 2026-08-07,同日再加大) */
.dialog .hd h2 { color: #000; font-size: 1.25rem; font-weight: 900; }   /* 20px */
.dialog .bd { padding: var(--sp-5); }
.dialog .ft { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line); display: flex; gap: var(--sp-2); justify-content: flex-end; align-items: center; }

/* ---- 登入 ---- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); }
.login-card { width: 100%; max-width: 23.75rem; }   /* 380px */

/* =============================================================================
   顯示模式（DESIGN_SYSTEM.md §1「顯示模式」）

   版面由使用者於設定畫面自選：pc（預設）／tablet／mobile，寫在 <html data-display>。
   使用者的選擇是權威——在手機上選 PC 就給 PC 版面（可橫向捲動），系統不覆寫。
   唯一例外是 data-narrow：視窗 < 820px 時強制套用 mobile 版面，
   否則預設 PC 的新使用者第一次用手機開，會直接看不懂畫面。
   ============================================================================= */

/* ---- 平板：側欄收窄、三欄降兩欄、分割檢視改直排 ---- */
:root[data-display="tablet"] .nav { width: 10.5rem; flex: 0 0 10.5rem; }
:root[data-display="tablet"] .main { padding: var(--sp-5); }
:root[data-display="tablet"] .grid3 { grid-template-columns: 1fr 1fr; }
:root[data-display="tablet"] .split { display: block; }
:root[data-display="tablet"] .split .left { margin-bottom: var(--sp-4); }

/* =============================================================================
   手機：平移檢視（DESIGN_SYSTEM.md §2「平移檢視 pan」）

   手機不把資料擠成一長條。長照的表格是「一列一個人、橫向十餘欄位」，
   擠成單欄之後每一列被拆成十餘行，欄與欄的對應關係就消失了，反而讀不出來。
   改成：資料畫面原樣攤開，螢幕在上面左右滑動，底部位置條告訴你現在看的是哪一段。

   資料畫面寬度 --pan-w 由 js/pan.js 算出：min(64rem, 3 × 視窗寬)，下限為視窗寬，
   所以螢幕至少看得到資料畫面的三分之一，不會滑到迷路。
   ============================================================================= */

/* 平移容器在 pc／平板等於不存在，版面完全照舊 */
.panwrap { display: contents; }

/* 手機／窄版：回到「整頁一起捲」。橫向平移已經佔掉一個軸，
   再讓兩欄各自縱捲，手指會不知道自己在捲哪一塊。 */
:root[data-display="mobile"] .shell,
:root[data-narrow] .shell { display: block; height: auto; }
:root[data-display="mobile"] .main,
:root[data-narrow] .main { overflow-y: visible; }

/* 側欄轉頂部橫向捲動列（不隨資料畫面平移，永遠在原位）。
   要覆寫桌機版的 height 與 overflow-y，否則會變成一條又高又能上下捲的怪東西。 */
:root[data-display="mobile"] .nav,
:root[data-narrow] .nav {
  width: auto; flex: none; height: auto; min-height: 0; overflow-y: visible;
  border-right: 0;
  border-bottom: 1px solid var(--line); display: flex; overflow-x: auto; padding: 0;
  position: sticky; top: 3.125rem; z-index: 10; background: #fff;
}
/* 手機是頂部橫向捲動列：分組標題與漢堡鈕都沒有意義，項目一律平鋪 */
:root[data-display="mobile"] .nav .group,
:root[data-narrow] .nav .group,
:root[data-display="mobile"] .nav .hamburger,
:root[data-narrow] .nav .hamburger { display: none; }
/* 手機的頂部橫列同理：那一列本來就只有一列，框起來只是多兩條線；
   底色也不加深——整條列是一個整體，沒有「哪一組展開了」這回事。 */
:root[data-display="mobile"] .nav .gbody,
:root[data-narrow] .nav .gbody {
  display: flex; background: none; border: 0; border-radius: 0; margin: 0;
}

:root[data-display="mobile"] .nav a,
:root[data-narrow] .nav a {
  border-left: 0; border-bottom: 3px solid transparent;
  white-space: nowrap; padding: var(--sp-3) var(--sp-4);
}
/* 手機的頂部橫列：選中同樣給整圈 2px 框（業主指示 2026-08-02，全系統一致），
   不再只有底下一條——那條線在橫向捲動時很容易被下一列蓋住。 */
:root[data-display="mobile"] .nav a.on,
:root[data-narrow] .nav a.on {
  border: 2px solid var(--g, var(--brand)); border-radius: var(--r-ctrl);
  padding: calc(var(--sp-3) - 2px) calc(var(--sp-4) - 2px); margin: 0 var(--sp-1);
}

/* 平移視窗 */
:root[data-display="mobile"] .panwrap,
:root[data-narrow] .panwrap {
  display: block; overflow-x: auto; overflow-y: visible;
  overscroll-behavior-x: contain;
  scrollbar-width: none;                 /* 位置條就是捲軸，不必再有一條 */
}
:root[data-display="mobile"] .panwrap::-webkit-scrollbar,
:root[data-narrow] .panwrap::-webkit-scrollbar { display: none; }

:root[data-display="mobile"] .main,
:root[data-narrow] .main {
  width: var(--pan-w, 100%); padding: var(--sp-5);
  padding-bottom: 3.5rem;                /* 讓開底部位置條 */
}

/* 表格不再自己捲——交給外層平移，否則會出現兩層水平捲動互相打架 */
:root[data-display="mobile"] .tablewrap,
:root[data-narrow] .tablewrap { overflow-x: visible; }

:root[data-display="mobile"] .topbar .brandmark .name,
:root[data-narrow] .topbar .brandmark .name,
:root[data-display="mobile"] .topbar .lvl,
:root[data-narrow] .topbar .lvl { display: none; }

/* 手機版面的頂欄只有 375px 可用，機構選擇器一路撐到 14rem 就把按鈕擠出畫面。
   先縮它：機構名看得到前幾個字就夠辨識，而**回前頁與登出不能不見**——
   側欄在這個版面已經變成頂部橫列，回前頁是這裡唯一的退路（業主指示 2026-08-02）。 */
:root[data-display="mobile"] .orgpick,
:root[data-narrow] .orgpick { max-width: 7rem; }

/* ---- 位置條 ---- */
.panbar { display: none; }

:root[data-display="mobile"] .panbar,
:root[data-narrow] .panbar {
  display: flex; align-items: center; gap: var(--sp-3);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: #fff; border-top: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-4);
}
.panbar .track {
  position: relative; flex: 1; height: 0.5rem;
  background: var(--wash); border-radius: var(--r-chip); cursor: pointer;
}
.panbar .thumb {
  position: absolute; top: 0; bottom: 0;
  background: var(--brand); border-radius: var(--r-chip); min-width: 1.5rem;
}
/* 固定寬度：百分比從「0%」變成「100%」時字數會變，若讓它自然撐開，
   軌道會跟著一起伸縮，滑動時整條位置條都在抖 */
.panbar .pos {
  font-size: 0.6875rem; color: var(--mut); white-space: nowrap;
  min-width: 2.5rem; text-align: right; font-variant-numeric: tabular-nums;
}

/* =============================================================================
   列印（DESIGN_SYSTEM.md 「列印」）
   目前唯一的列印用途是器材標籤與排程總表。兩者的共同需求相同：
   把導覽與操作元件收掉，只留內容。

   為什麼要明確處理而不是靠瀏覽器預設：預設會把側欄、頂欄、按鈕一起印出來，
   而器材標籤是要剪下來貼在器材上的——多印一條側欄就等於整張標籤不能用。
   ============================================================================= */
@media print {
  /* 導覽與操作不印 */
  .topbar, .nav, .panbar, .btn, .seg, .subnav, .mask { display: none !important; }

  /* 版面攤平：列印沒有「視窗高度」，固定高度的捲動區會只印出第一頁的內容 */
  .shell { display: block !important; height: auto !important; }
  .main  { overflow: visible !important; height: auto !important; padding: 0 !important; }
  .panwrap { display: block !important; overflow: visible !important; }

  /* 卡片不要分頁斷在中間——條碼被切成兩半就掃不到了 */
  .card { break-inside: avoid; box-shadow: none; border: 1px solid #000; }

  /* 條碼一律純黑白：印表機的省墨模式會把灰階條紋印淡，掃描器讀不到 */
  svg rect { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* 臨時密碼顯示（DESIGN_SYSTEM §2「密碼欄位」）。
   等寬、字距拉開、可選取：這串字要被念出來或抄在紙上，
   而 0 與 O、1 與 l 在一般字型下長得太像。產生時已排除易混淆字元，
   顯示端再以等寬字與字距把每一個字分開。 */
.bigcode {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.5rem; font-weight: 700; letter-spacing: 0.18em;
  color: var(--ink); background: var(--wash);
  border: 1px solid var(--line); border-radius: var(--r-ctrl);
  padding: var(--sp-3) var(--sp-4); margin: var(--sp-2) 0;
  word-break: break-all; user-select: all;
}

/* 系統文件的正文（設定 → 編碼原則，設計書 20.4）。
   等寬字：編碼原則裡到處是代碼與範例（TPE-B01、RF-TPE-202608-0001），
   比例字型會把 0 和 O、1 和 l 排得一樣寬，而那正是要看清楚的地方。
   pre 保留換行與空白——那篇文件的縮排是作者排出來的意思，不是裝飾。 */
.doctext {
  font-family: ui-monospace, 'Cascadia Mono', 'Consolas', 'Noto Sans Mono CJK TC', monospace;
  font-size: 0.8125rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word;
  margin: 0;
}
textarea.doctext { width: 100%; resize: vertical; min-height: 18rem; }

/* AI 辨識等待中的旋轉圖示(業主指示 2026-08-06:擷取進行中顯示動態 icon 讓人安心等待)
   用 currentColor 跟著按鈕文字色走,主要鈕/一般鈕都不用另外調色 */
.spinner {
  display: inline-block;
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.125em;
  margin-right: 0.45em;
  animation: spinner-turn 0.8s linear infinite;
}
@keyframes spinner-turn { to { transform: rotate(360deg); } }

/* 表單欄距壓縮(業主指示 2026-08-06):格線縫隙縮小,欄位不再另加下邊距
   (原本 .field 的 margin-bottom 疊在 grid gap 上,間距等於加了兩次) */
.grid2, .grid3, .grid4 { gap: var(--sp-2) var(--sp-3); }
.grid2 .field, .grid3 .field, .grid4 .field { margin-bottom: 0; }
/* 檢驗數字欄四直列(業主指示 2026-08-06);平板降為兩欄 */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); }
:root[data-display="tablet"] .grid4 { grid-template-columns: 1fr 1fr; }

/* 彈性表單網格（業主指示 2026-08-07，取代固定欄數）：欄數不寫死——
   每欄至少 14rem，視窗放得下幾欄就排幾欄；縮放視窗、平板、並排視窗都自動調。
   .wide＝內容較長的欄位（地址、管灌內容、簽章者…）自動佔兩格。 */
.gridflex { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1) var(--sp-2); }
:root[data-display="tablet"] .gridflex { grid-template-columns: 1fr 1fr; }
.gridflex .field { margin-bottom: 0; min-width: 0; }
.gridflex .field.wide { grid-column: span 2; }
@media (max-width: 700px) { .gridflex .field.wide { grid-column: auto; } }
/* 緊湊模式：省空間（業主指示 2026-08-07）——標籤貼近欄位、輸入框內距縮小 */
.gridflex .field label { margin-bottom: 1px; font-size: 0.75rem; }
.gridflex .inp { padding: 5px 8px; font-size: 0.8125rem; }
.gridflex .formgroup { margin: var(--sp-2) 0 2px; }

/* 表單欄位大分類標題(業主指示 2026-08-06):橫跨整列的小節標,下加細線 */
.formgroup {
  grid-column: 1 / -1;
  margin-top: var(--sp-3);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--line);
  font-weight: 700; font-size: 0.8125rem; color: var(--ink);
}
.formgroup:first-child { margin-top: 0; }

/* 欄位標題黑、填入資料藍(業主指示 2026-08-06):全系統一致,一眼分得出「欄名」與「資料」
   欄位標題用粗黑體(Fred 指示 2026-08-07:「轉介來源」「個案姓名」這些標題要黑體字) */
.field label { color: var(--ink); font-weight: 700; }
input.inp, select.inp, textarea.inp { color: var(--val); }
.inp::placeholder { color: var(--mut); opacity: 0.65; }   /* 提示例字維持灰,不與真的資料混淆 */
.val { color: var(--val); }                               /* 唯讀顯示的資料值(電子檔對照等) */