/* =============================================================================
   元件庫　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; }

/* 行距可調（業主指示 2026-08-12：設定要能調行跟行之間的距離）。
   --ui-lh 由 prefs.js 寫在 <html> 上，沒設定過時退回 1.5。
   用**倍數**不用固定高度：字級 5pt–48pt 全站等比縮放，寫死高度的話字調大之後
   行距不跟著長，字就疊在一起了。

   **表格的列高不是 line-height 決定的，是儲存格的上下內距決定的**
   （業主再指示 2026-08-12：「行距還包括表格之間一行一行的距離」）。
   個案總表每列只印一行字（.oneline），只調 line-height 幾乎看不出差別——
   兩列之間的空隙來自 td 的 padding。所以另外導一個 --row-pad 出來，
   讓內距跟著同一個倍數走。基準點取 1.5：那一格算出來剛好是原本的 --sp-2，
   沒動過設定的人看到的版面與之前一模一樣。 */
:root { --row-pad: calc(var(--sp-2) * var(--ui-lh, 1.5) / 1.5); }

/* 畫布底色鋪滿(2026-08-13,平板白色直條案):瀏覽器縮放或「電腦版網站」模式下,
   可視範圍可能比頁面本體寬,多出來的區域畫的是 <html> 的底色——不設就是刺眼的白。
   鋪成與內容同色,就算再出現「頁面外」區域也不顯眼。 */
html { background: var(--paper); }

body {
  font-family: var(--font);
  /* 文字行高踩住 1.0 的地板(業主指示 2026-08-13:行距下限開放到 0.8):
     0.8 與 0.9 這兩檔只有 --row-pad 跟著縮(表格列更緊),文字行高不再往下——
     中文字行高低於 1.0,上下兩行會互相切到。 */
  font-size: 0.875rem; line-height: max(var(--ui-lh, 1.5), 1);   /* 14px */
  color: var(--ink); background: var(--paper);
}
/* 儲存格裡換行的長文字、說明列、輸入欄的多行內容也跟著鬆 */
td, th, .inp, textarea.inp, .hint, .note-bar { line-height: max(var(--ui-lh, 1.5), 1); }
/* 設定頁的行距樣張：框起來才看得出上下兩列的間隔變了。
   裡面放的是真的表格（同個案總表那一套樣式），所以調整時看到的就是總表會變成的樣子。 */
.lh-sample {
  border: 1px solid var(--line); border-radius: var(--r-ctrl);
  padding: var(--sp-3); background: #fff; margin: var(--sp-2) 0;
  max-width: 34rem;
}

/* ---- 字級 ---- */
/* 標題一律黑體字,不染功能區主題色(Fred 指示 2026-08-07:之前的藍色標題
   看起來像沒改;對比度也一次到頂) */
h1 {
  font-size: 1.125rem; font-weight: 700;                                       /* 18px */
  color: var(--ink);
  margin: 0.2em 0;   /* 縮減空白(業主指示 2026-09-20:標題/說明/工具列/卡片之間留白最小化) */
}
/* 畫面標題列：標題靠左、回前頁靠右上角（業主指示 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; }
/* 標題列右側的按鈕群（回前頁、個案現況…）。包成一組再交給 space-between，
   否則兩顆會被拆開、一顆卡在標題與另一顆中間。 */
.headbtns { display: flex; gap: var(--sp-2); flex: 0 0 auto; align-items: center; }

/* 全站搜尋(業主指示 2026-08-12:回前頁左邊,放大鏡圖示+小輸入格) */
.gsearch { position: relative; display: inline-flex; align-items: center; gap: var(--sp-1); }
.gsearch .icon { color: var(--mut); }
.gsearch-inp { width: 11rem; padding: 6px 8px; }
.gsearch-drop {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 60;
  min-width: 16rem; max-width: 24rem;
  background: #fff; border: 1px solid var(--brand-2); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12); overflow: hidden;
}
.gsearch-hit {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 8px 12px; font-size: 0.8125rem; color: var(--ink); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gsearch-hit:hover { background: color-mix(in srgb, var(--brand-2) 25%, #fff); }
.gsearch-none { padding: 8px 12px; display: block; }
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: var(--topbar-h);   /* 50px；收起時 14px */
  /* 品牌青到亮青的橫向漸層，尾端再帶一點目前功能區的顏色——
     連頂欄都會隨著你所在的區域微微變色。整體壓到七成色深（業主指示）。 */
  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);
}
/* flex: 1 1 auto ——擠壓一律先由系統名稱吸收(它縮到 0 也還能在框內左右滑動看完整
   內容,見下面的觸控規則)。右側那一組是操作出口,不參與擠壓,見 .topbar .right。 */
.topbar .brandmark {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 700; font-size: 0.875rem;
  /* 擠壓時名稱可縮到 0,但標誌要保住自己的寬度:原本 min-width:0 讓整個 brandmark 縮成 0,標誌溢出到右側那一組按鈕底下
     被蓋住(2026-10-19 業主手機實測);2.2em+邊框=標誌的寬度,見 .brandlogo */
  min-width: calc(2.2em + 0.2em);
  flex: 1 1 auto;
}
.topbar .brandmark .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 觸控裝置(手機與平板,業主指示 2026-08-13 之五):被截斷的字=資訊不見。
   系統名稱與身分標籤改成「框內左右滑動」看完整內容——省略號只告訴你有字被吃掉,
   滑得動才看得到吃掉了什麼。捲軸藏起來,框的寬度不變。 */
@media (pointer: coarse) {
  .topbar .brandmark .name { text-overflow: clip; overflow-x: auto; scrollbar-width: none; }
  .topbar .brandmark .name::-webkit-scrollbar { display: none; }
  .topbar .lvl {
    max-width: 5.5rem; min-width: 2rem; flex: 0 1 auto;
    overflow-x: auto; scrollbar-width: none;
  }
  .topbar .lvl::-webkit-scrollbar { display: none; }
  /* 滑動框畫出細邊線(業主指示 2026-08-13 之六):有邊界才看得出這是一個
     「框」、字是在框裡滑——半透明白線與頂欄漸層相融,同登出鈕的白系。 */
  .topbar .brandmark .name,
  .topbar .lvl {
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: var(--r-ctrl);
    padding: 0.1rem 0.4rem;
  }
}

/* 系統名稱之前一律放標誌（業主指示 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;
}
/* 右側那一組的最尾端是兩顆出口鈕(全螢幕、收起頂欄)。原本寫 min-width: 0,
   意思是「這一組可以被壓小」——但裡面每一項都是 flex: 0 0 auto 壓不動,
   壓小的結果不是變窄,是子項整排**溢出到螢幕右邊之外**:按鈕還在,只是在畫面外面。
   業主 iPhone 實測 2026-08-15「上收的功能還是沒有」就是這個:375px 的螢幕上,
   字級 13pt 起「收起頂欄」被推出畫面 21px、16pt 起連全螢幕鈕也出去了。
   改成 flex: 0 0 auto:這一組維持它需要的寬度,要讓就讓左邊的系統名稱去讓。 */
/* 版本與上線日期(業主指示 2026-09-17:「請增加一個程式的版本跟日期資料,在右邊」)。
   在 .right 的**外面**、緊貼它左邊:.right 壓不動是刻意的(見上面 2026-08-15 的說明),
   往裡面塞就是把登出與兩顆圖示鈕推出畫面。這一格 flex:0 1 auto + min-width:0,
   擠的時候先縮它、縮到剩省略號,右邊那一排一顆都不會動。
   小字、淡、不加框、游標不變手指:一看就知道是參考資訊,不是可以按的東西。 */
.topbar .ver { flex: 0 1 auto; min-width: 0; margin-left: auto; padding-right: var(--sp-3);
  font-size: 0.6875rem; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 手機(≤600px)頂欄放不下:右側那一排本身就吃掉大半個螢幕。改在「我的設定」顯示。 */
@media (max-width: 600px) { .topbar .ver { display: none; } }
/* 測試站標籤(2026-10-16,LTC0 測試站):伺服器設了 SITE_LABEL 才出現(app.js siteLabelMark),
   正式站這一格 hidden、不佔位。紅底白字=語義色「紅=必須注意」(對白字 5.5:1),不是裝飾。
   頂欄最左、標誌前面,flex:0 0 auto 不參與擠壓——擠壓一律由系統名稱吸收(見 .brandmark),
   右側那一排照舊壓不動;手機 ≤600px **不藏**(跟 .ver 相反:這一格就是要每一種裝置都看得到)。
   登入卡的 .brandline 也用同一個元素。收起頂欄/全螢幕的薄邊跟標誌一起讓位(見下面 :is() 那條)。 */
.sitelabel { display: inline-block; flex: 0 0 auto; background: var(--red); color: #fff;
  font-size: 0.71875rem; font-weight: 700; line-height: 1.2; letter-spacing: .05em;
  padding: 0.15rem 0.45rem; border-radius: var(--r-chip); white-space: nowrap; }
.sitelabel[hidden] { display: none; }
/* 手機(≤600px,同 .ver 的分界):頂欄那一列本來就被右側那排吃滿——實測 390px 只剩 48px 給標誌+名稱,
   標籤(51px)再擠進去整頁就橫向溢出到 397px(整頁左右平移,verify-view-state-mobile 那一組測試明文禁止)。
   改成**浮在標誌的位置上**:absolute 不佔版面、pointer-events:none 點下去穿透到底下的 .brandmark
   仍是「回首頁」、標誌讓位(只有測試站的手機看不到標誌;正式站沒有標籤,標誌照舊)。 */
@media (max-width: 600px) {
  .topbar .sitelabel { position: absolute; left: var(--sp-2); top: 50%; transform: translateY(-50%);
    pointer-events: none; z-index: 1; }
  .topbar .sitelabel:not([hidden]) + .brandmark .brandlogo { display: none; }
}
/* 目前作業的護理所切換(R-640/R-642):左側選單頂端、漢堡鈕右邊 */
.nav .navhead .agswitch { flex: 1 1 auto; min-width: 0; }
.nav .navhead .agswitch select { width: 100%; font-size: 0.9em; padding: 4px 22px 4px 8px; height: auto; }
.topbar .right { display: flex; align-items: center; gap: var(--sp-3); font-size: 0.8125rem; flex: 0 0 auto; }
/* 頂欄的按鈕不准折行。頂欄只有 50px 高，折成兩行的按鈕上下都會被切掉——
   窄視窗（手機）必然發生：「登出」在 375px 下原本就是這樣。 */
.topbar .right .btn { white-space: nowrap; flex: 0 0 auto; }
/* 窄螢幕的觸控裝置:光是「不讓右側那一組被壓爛」還不夠——放大字級之後,
   頭像＋層級＋登出＋兩顆圖示鈕連同原本的間距,本身就塞不進 375px。
   把頂欄左右內距與右側間距收到最小,換回約 60px:12pt→19pt 都放得下。
   只認 data-narrow(<600px),平板與桌面的呼吸感不動。 */
@media (pointer: coarse) {
  :root[data-narrow] .topbar { padding: 0 var(--sp-2); }
  :root[data-narrow] .topbar .right { gap: var(--sp-2); }
  /* 2026-10-23 統一 15 級(R-821)後手機第 8 級 = 20px,這一排在 390px 寬要 390px、超出螢幕。
     字級超過 16px 時整排等比縮回 16px 的大小(--tb-zoom 由 prefs.js applyPrefs 算),內容字級照使用者設定不動。 */
  :root[data-narrow] .topbar .right { zoom: var(--tb-zoom, 1); }
}
.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; }
/* 圖示按鈕：頂欄專用。尺寸經業主兩輪校準（2026-08-13：28px 太小看不清、
   44px 又太大）——桌面鈕 32px／圖示 20px，觸控裝置鈕 40px／圖示 22px，
   線條 1.8 維持清晰。 */
.iconbtn {
  width: 2rem; height: 2rem; flex: 0 0 auto;                 /* 32px */
  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 .icon { width: 1.25rem; height: 1.25rem; stroke-width: 1.8; }   /* 20px */
@media (pointer: coarse) {
  .iconbtn { width: 2.5rem; height: 2.5rem; }                /* 40px */
  .iconbtn .icon { width: 1.375rem; height: 1.375rem; }      /* 22px */
}
.iconbtn:hover { background: rgba(255, 255, 255, .5); }
.iconbtn.on { background: rgba(255, 255, 255, .5); }

/* ---- 頂欄收放（業主指示 2026-08-12：側欄收成圖示列之後，還在佔位的那條標誌列
   也要收得掉）----

   收起來不是整條不見，是縮成一條薄邊、中間留一顆朝下的箭號。
   整條消失的話就沒有任何地方按得回來，只剩清 localStorage 一條路——
   Windows 的功能區（ribbon）收起時同樣留一條可以按回去的邊，照它做。

   箭號用側欄分組那張 chevron（朝右）轉出來：展開時朝上（按下去往上收），
   收起時朝下（按下去往下展開）。方向就是「按了會發生什麼」，不是「現在是什麼狀態」——
   後者要人先想一層，而這顆鈕不值得想。 */
.topfold .icon { transform: rotate(-90deg); transition: transform .12s ease; }
:root[data-top="hidden"] .topfold .icon { transform: rotate(90deg); }

/* 全螢幕也走同一條薄邊(業主指示 2026-08-15)。原本 data-fs 只收側欄,那條 42px 的
   標誌列原封不動 —— 業主 iPhone 實測「全螢幕好了,但往上收縮的功能還是沒有」講的
   就是這個:iOS 收不掉網址列已經是系統限制,頂欄那 42px 是我們自己的,本來就該讓開。
   收成薄邊而不是整條拿掉:iPhone 沒有 Esc、也沒有全螢幕 API,退出全螢幕唯一的路
   就是頂欄那顆鈕,整條消失等於把人關在裡面出不來。 */
/* 兩種薄邊(收頂欄、全螢幕)幾何完全相同,選擇器用 :is() 收成一份
   (清理輪 2026-08-15:原本每一條都寫兩份,審查點名「下次調薄邊要改六個地方,
   漏一個就是 iPhone 那種只有單一狀態壞掉的難查 bug」)。
   只有「薄邊上留哪一顆出口鈕」是兩種薄邊真正不同的地方,留在下面各寫各的。 */
:root:is([data-top="hidden"], [data-fs]) .topbar {   /* 高度由 --topbar-h 收成 14px：按得到，又幾乎不佔高度 */
  padding: 0 var(--sp-6);
  justify-content: center;
}
/* 收起時頂欄只留那一顆鈕：標誌、版本、機構下拉、頭像、層級、登出全部讓位。
   .ver 要單獨列名（跟 .brandmark 一樣）：下面那一條只管 .right 的直接子元素，
   版本那一格是頂欄自己的子元素，不列名就會殘留在薄邊上、把它撐高。 */
:root:is([data-top="hidden"], [data-fs]) .topbar .brandmark,
:root:is([data-top="hidden"], [data-fs]) .topbar .sitelabel,
:root:is([data-top="hidden"], [data-fs]) .topbar .ver,
:root:is([data-top="hidden"], [data-fs]) .topbar .right > *:not(.topfold):not(.fsbtn) { display: none; }
/* 薄邊上只放「當下真的有事做」的那一顆,兩種薄邊各留各的:
     一般收合 → 展開頂欄(全螢幕鈕收起來也還在,不是出口,不必留)
     全螢幕   → 離開全螢幕(收合鈕在這裡按了不會有事,頂欄已經是薄邊了)
   兩個狀態同時成立時(收著頂欄再進全螢幕),全螢幕的規則在後面,出口是離開全螢幕。 */
:root[data-top="hidden"]:not([data-fs]) .topbar .right > .fsbtn { display: none; }
:root[data-fs] .topbar .right > .topfold { display: none; }
:root:is([data-top="hidden"], [data-fs]) .topbar .right { gap: 0; }
/* 鈕本身也要壓扁，否則 28px 的鈕會把 14px 的薄邊撐回去 */
:root[data-top="hidden"] .topfold,
:root[data-fs] .fsbtn { height: 0.875rem; width: 3.5rem; border-radius: 0; position: relative; }

/* 觸控裝置(業主 iPhone 實測 2026-08-14:「上收之後按不回來」):
   14px 的薄邊用滑鼠點得到,用手指點不到 —— 對觸控來說它就是壞的。
   薄邊加高到 22px(與頂欄圖示鈕的觸控校準一致),再用看不見的 ::after
   把實際可點範圍往四周擴到約 44px 高:視覺維持一條細邊,指尖卻有整塊可按。 */
@media (pointer: coarse) {
  /* --topbar-h 的觸控覆寫在基準定義之後(檔尾),這裡只放不會被順序打敗的規則 */
  :root[data-top="hidden"] .topfold,
  :root[data-fs] .fsbtn { height: 1.375rem; width: 5rem; }
  :root[data-top="hidden"] .topfold::after,
  :root[data-fs] .fsbtn::after {
    content: ''; position: absolute; left: -1.5rem; right: -1.5rem; top: -0.25rem; bottom: -1.25rem;
  }
}

/* 骨架的高度原本三處各寫死一次「扣掉頂欄 3.125rem」。頂欄變矮之後那個數字
   就不對了——畫面底部會多出一段 36px 的空白，或捲軸多出一截。
   改成一個變數，頂欄自己的高度與三處扣除量都讀它，收放時一起變。 */
:root { --topbar-h: 3.125rem; }
:root:is([data-top="hidden"], [data-fs]) { --topbar-h: 0.875rem; }
/* 觸控時薄邊是 22px(見上面的 iPhone 修正),骨架扣的高度要一起變 */
@media (pointer: coarse) {
  :root:is([data-top="hidden"], [data-fs]) { --topbar-h: 1.375rem; }
}

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

   外框高度＝視窗高減頂欄（--topbar-h，sticky 在最上面；頂欄收起時它自己會變小），
   所以整頁剛好填滿、不產生頁面捲軸；上下捲動一律發生在兩欄內部。
   overscroll-behavior: contain 擋掉捲到底之後把外層一起帶著捲的行為。 */
.shell {
  display: flex; align-items: stretch;
  /* 高度用 --vvh（pan.js 由 visualViewport 量到的「實際看得到的高度」）而不是 100vh：
     業主手機實測 2026-08-22：Chrome 開了頁面縮放＋大字體時，100vh／innerHeight 會比
     真正看得到的多出一截（793 vs 694），底部釘的位置條與表格末幾列都掉到看不見的地方。 */
  height: calc(var(--vvh, 100vh) - var(--topbar-h) - var(--panbar-h, 0px));
  /* 側欄寬度（業主指示 2026-08-11：中間可左右拖曳改變兩邊面積）。
     寫成變數而不是寫死在 .nav 上，是因為拖曳時要改的只有這一個數；
     單位用 rem，字級調大時側欄跟著等比放大，與全站的縮放方式一致。
     使用者拖過之後由 app.js 以行內樣式覆寫這一行——行內樣式同時也蓋得過
     下面平板那一條，所以「選了平板又自己拖過」不會被平板的預設值搶回去。 */
  --nav-w: 12.25rem;                                          /* 196px */
}
.nav {
  width: var(--nav-w); flex: 0 0 var(--nav-w); background: #fff;
  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;
}

/* ---- 分隔條：拖它改變選單與資料畫面的寬度（業主指示 2026-08-11） ----

   本體 5px 寬、完全透明，只有游標形狀（col-resize）在說「這裡抓得住」；
   滑過或用鍵盤選到才亮出一條 brand 色的線。做成一直看得見的一條粗線，
   等於在畫面正中間多加一道分隔，而側欄本來就有 border-right 了。

   5px 是可靠抓得到的最小寬度（滑鼠移動的誤差約 2–3px）；再細就得靠運氣，
   再粗就會在側欄與內容之間留出一道看得出來的空白。

   拖曳中在 <html> 掛 data-drag="navw"：整頁強制 col-resize 並停掉文字選取，
   否則游標一離開這 5px 就變回箭頭，看起來像拖曳斷掉了。 */
.navgrip {
  flex: 0 0 5px; align-self: stretch;
  background: none; border: 0; padding: 0;
  cursor: col-resize; touch-action: none;
  position: relative; z-index: 5;
}
.navgrip::before {
  content: ''; position: absolute; inset: 0 2px;
  border-radius: 1px; background: transparent;
  transition: background .12s;
}
.navgrip:hover::before,
.navgrip:focus-visible::before,
.navgrip[data-on]::before { background: var(--brand); }
.navgrip:focus-visible { outline: none; }
:root[data-drag="navw"], :root[data-drag="navw"] * {
  cursor: col-resize !important; user-select: none !important;
}
/* 全螢幕模式(業主指示 2026-08-13 之二):側欄連圖示列都收掉,整片螢幕給資料。
   data-fs 由 app.js 跟著 fullscreenchange 掛在 <html> 上;要用選單就先退出全螢幕
   (頂欄那顆四角向內的鈕,或系統返回手勢)。
   頂欄的部分見上面「頂欄收放」那一段:2026-08-15 起它也一起收成薄邊。 */
/* 只有大全螢幕(data-fs)收側欄;小全螢幕(data-fs2)保留左側選單,手機同(業主指示 2026-10-05,R-625;與 work 09-20 一致) */
:root[data-fs] .nav,
:root[data-fs] .navgrip { display: none; }

/* 只有圖示列模式藏分隔條：圖示列的寬度就是那個模式的定義。
   窄版（手機）原本也藏——那是側欄還是頂部橫列時代的理由；側欄回到左邊之後
   （2026-08-11），展開的選單與資料畫面一樣有左右之分，一樣可以拖
   （業主指示 2026-08-13）。窄版預設是圖示列，按 ☰ 展開後分隔條才出現。 */
:root[data-nav="rail"] .navgrip { display: none; }

/* 觸控裝置的分隔條要給手指抓（手機、平板都算，認 pointer: coarse 不認寬度）：
   5px 是滑鼠準頭的尺寸，指尖抓不住；加寬到 14px，並常駐一條看得見的細線——
   觸控沒有「滑過變色」，看不見的東西等於不存在。拖曳中整條變 brand 色。 */
@media (pointer: coarse) {
  .navgrip { flex-basis: 14px; }
  .navgrip::before { inset: 0 4px; background: var(--line); border-radius: 3px; }
  /* 手指感應區外擴(業主回報 2026-08-30 手機拖不動):看起來 14px,實際可抓約 42px。 */
  .navgrip::after { content: ''; position: absolute; top: 0; bottom: 0; left: -14px; right: -14px; }
  .navgrip:hover::before, .navgrip[data-on]::before { background: var(--brand); }
}

/* 分組標題：可展開收合（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));
  /* 分組之間一條分隔線（業主指示 2026-08-12：要有分隔線，不要取消）。
     全收起時分組之間只剩空白，七組連成一片，看不出一組到哪裡結束。 */
  border-top: 1px solid var(--line);
  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-08-13):選單上下捲動時它不跟著跑,
     隨時按得到。要有底色——透明的話,捲上來的選單文字會從它底下透出來。 */
  position: sticky; top: 0; z-index: 3; background: #fff;
}
/* 只有圖示、沒有文字（業主指示 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(var(--vvh, 100vh) - var(--topbar-h));     /* 扣掉頂欄;--vvh=實際看得到的高度 */
  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 慣例。
   與大項的展開收合是兩件事，各有各的入口——三橫線管側欄寬度，
   大項標題管自己的細項。

   2026-08-11 起，收起後**仍保留分組的展開收縮**（Fred 指示，取代原本的平鋪做法）。
   原本收起後 .group 整個藏掉、.gbody 一律攤平，理由是「只剩圖示還要再加一層
   階層只會更難點」。但那讓同一條側欄有兩套行為：展開時分組收得起來、收起後
   收不起來；而且兩邊各看各的，收起再展開會發現分組狀態對不上。
   現在兩種寬度共用同一份 open 狀態（app.js 的 openGroupSet／saveNavGroups），
   在哪一邊收起來，換到另一邊仍然是收起來的。 */
:root[data-nav="rail"] .nav { width: 3rem; flex: 0 0 3rem; }   /* 電腦版恢復原寬(業主指示 2026-08-31:太窄看不清) */
:root[data-pan][data-nav="rail"] .nav { width: 1.5rem; flex: 0 0 1.5rem; }   /* 手機/平板維持窄版(業主:手機版很好) */
:root[data-nav="rail"] .nav .group {
  justify-content: center; padding-left: 0; padding-right: 0;
}
/* 收起時分組那一列顯示「＞」而不是分組圖示（業主指示 2026-08-12）。
   原本相反：收起時藏箭頭、顯示分組圖示，理由是「3rem 放不下箭頭又放圖示」。
   但那讓**這一組現在是收的還是開的，在收起的側欄裡完全看不出來**——
   七組同時有的收、有的開，畫面上卻只看到七顆長得一樣的圖示。
   箭頭本身就帶著狀態（收＝＞、開＝轉 90 度朝下），與展開時同一個符號、
   同一個轉法，兩種寬度看起來是同一件事。
   分組圖示因此兩種寬度都不顯示（下面 .nav .gicon 那條）——
   分不出哪一組是哪一組？分組底下的每一個項目本來就各有自己的圖示，
   要認的是項目，不是分組那一列。 */
:root[data-nav="rail"] .nav .group .chev { display: flex; }
/* 圖示列模式的細項不另加底色與框線——3rem 寬的欄子裡再框一圈只是多兩條線。
   收合狀態由 .open 決定，與展開時同一套。 */
:root[data-nav="rail"] .nav .gbody {
  background: none; border: 0; border-radius: 0; margin: 0;
}
:root[data-nav="rail"] .nav .gbody:not(.open) { display: none; }

/* 分組圖示兩種寬度都不顯示（2026-08-12 起，見上面那條）：
   展開時那一列已經有文字與數量，收起時那個位置讓給「＞」放收合狀態。
   標記留著不刪——分組設定裡的 icon 還在，日後要改回來只是改這一行。 */
.nav .gicon { display: none; }
: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 的話它會撐開外框，捲軸又回到整頁身上。

   overscroll-behavior 只鎖直軸（業主手機實測 2026-08-13）。原本寫簡寫 contain
   會兩軸都鎖：只設 overflow-y 時，橫軸會被規範自動補成捲動容器（auto），
   於是手機的橫向滑動打在 .main 上、.main 橫向沒東西捲、又被 contain 擋住不准
   外傳——手勢就死在原地，外層 .panwrap 的平移永遠收不到。桌面滾輪走另一條
   事件路徑，所以只有觸控會中。橫軸放行後，橫滑自然鏈到 .panwrap。 */
.main {
  flex: 1; min-width: 0; min-height: 0;
  padding: var(--sp-6) var(--sp-7);
  overflow-y: auto;
  overscroll-behavior-x: auto; overscroll-behavior-y: contain;
}
.bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-2) 0; }   /* 上下距減半,縮減空白(業主指示 2026-09-20) */
.bar .spacer { flex: 1; }

/* 儲存列釘在畫面底部（Fred 回報 2026-08-11）。
   「個案基本資料」那一站把六張卡片一次攤開：整頁 6,388px、98 個欄位，
   儲存鈕原本落在最底下，要捲七個螢幕才看得到——欄位明明能打字，
   改完卻找不到地方存，使用者的結論是「這頁不能修改」。

   釘在 .main 的底緣（.main 自己捲，見下方「資料畫面自己捲」）。
   上緣留一條線與陰影，讓它看得出是浮在內容之上，不是內容的一部分。 */
.savebar {
  position: sticky; bottom: 0; z-index: 5;
  margin: var(--sp-4) 0 0; padding: var(--sp-3) 0;
  background: var(--wash, #f4f7fa);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 12px -8px rgba(0, 0, 0, .25);
}

/* 平移檢視不釘住（Fred 回報 2026-08-11）。
   那個模式的捲動容器是 .panwrap（水平平移），不是 .main；
   sticky 的參考對象跟著換掉，儲存列會被算到 top: 5300 這種畫面外的位置，
   看起來就是「按鈕跑到表單中間」。那個模式本來就是整頁上下捲，
   讓它回到正常流程的位置最單純。 */
:root[data-pan] .savebar {
  position: static; box-shadow: none;
}

/* ---- 表尾分頁列與欄寬拖拉 ----
   原本整段寫在 caselist.js 的行內樣式(違反 DESIGN_SYSTEM §4.1),
   2026-08-13 收進元件庫;動態幾何(欄寬、表寬)仍由 JS 寫行內。 */
.pgbar {
  display: flex; align-items: center; gap: 8px; padding: 2px 12px 6px;
  font-size: 0.75rem; color: var(--mut); flex-wrap: wrap;
}
.pgpager { display: inline-flex; gap: 4px; align-items: center; }
.pgbtn {
  font-family: inherit; font-size: 0.75rem; padding: 1px 7px;
  border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
  background: #fff; color: inherit;
}
.pgbtn.on { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 700; }
.pgbtn:disabled { opacity: .45; cursor: default; }
.pgsel {
  font-family: inherit; font-size: 0.75rem; padding: 1px 4px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
}
/* 勾選提示(業主指示 2026-08-13):方格出現時,總表第一行先講「先選擇個案」 */
.pickhint { padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--line); }

/* 欄界拖拉柄:常駐細豎線標出欄界(業主指示 2026-08-05);滑過整條變醒目 */
.colgrip {
  position: absolute; top: 0; right: -4px; width: 9px; height: 100%;
  cursor: col-resize; user-select: none; z-index: 2;
  background: linear-gradient(to right, transparent 4px, #b9cdd3 4px, #b9cdd3 5px, transparent 5px);
}
.colgrip:hover { background: rgba(43, 108, 124, .4); }

/* ---- 卡片 ----
   標題列帶所屬功能區的淡底與色字：一整頁的卡片因此有層次，
   而不是白底上一堆白框。顏色由 .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); }
/* 卡片標題右側說明用深色(業主指示 2026-08-12:原 72% 太淡看不清) */
.card .hd .extra { font-size: 0.75rem; color: var(--ink); }
/* 個案總表標題列右側:排序說明+結案篩選三顆鈕(業主指示 2026-08-19),說明在左、鈕靠右 */
.card .hd .closedbar { flex: 1; display: flex; align-items: center; gap: var(--sp-3); margin-left: var(--sp-3); min-width: 0; }
.card .hd .closedbar .btns { display: flex; gap: var(--sp-1); flex: none; }
/* 小鈕不撐高標題列(業主指示 2026-08-19:按鈕小一點、不佔額外空間、貼標題右邊一小段距離) */
.card .hd .closedbar .btns .btn.sm { padding-top: 2px; padding-bottom: 2px; line-height: 1.3; }
.card .hd .closedbar .extra { margin-left: auto; text-align: right; }
.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; }

/* ⚠ WebKit(iPhone 與 Mac)的 <button> 會保留原生外觀,而原生外觀會干擾按鈕**內部**的排版 ——
   box 就是因此在 iPhone 上「藍色底塊畫得出來、裡面的圖示卻不見」(2026-09-22 業主回報)。
   Windows / Android 不受影響,所以只有 iPhone 與 Mac 看得出問題。
   ⚠ 不要加在 select 上 —— 那會讓下拉箭頭消失。 */
button, .btn, .iconbtn { -webkit-appearance: none; appearance: none; }

/* ---- 按鈕 ---- */
.btn {
  font-family: inherit; font-size: 0.8125rem; background: #fff; color: var(--ink);
  /* 框線加粗到與狀態晶片(.chip)同等份量(業主指示 2026-08-13):
     1px 的 --line 太淡,按鈕與底色分不開 */
  border: 2px 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); }
/* 主按鈕吃所屬功能區的顏色（--g）：同一顆「儲存」在收案區是藍的、在器材區是珊瑚色的，
   一眼知道自己按的是哪一區的主要動作 */
/* 主按鈕維持滿色配白字：一個畫面最多一顆，它就是要最重的那一個。
   其餘色塊都壓到七成，這一顆反而更跳得出來。
   底色另混一成半深色——琥珀、橄欖這類亮色相直接配白字只有 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: 2px solid var(--line); border-radius: var(--r-ctrl);   /* 與 .btn 同步加粗(2026-08-13) */
  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 {
  /* relative 是欄寬把手(.colgrip 絕對定位)的掛點;釘頂表格(.vscroll)蓋成 sticky,
     sticky 一樣是定位元素,把手照掛(2026-08-27) */
  position: relative;
  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(--row-pad) var(--sp-3); white-space: nowrap;
  border-bottom: 2px solid color-mix(in srgb, var(--g, var(--brand)) 45%, #fff);
}
/* 上下內距吃 --row-pad（＝行距倍數），左右不動：行距講的是「行跟行之間」，
   把欄跟欄之間也一起撐開，表格會橫向爆出去而那不是使用者要的。 */
tbody td { padding: var(--row-pad) 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; }
/* 停用的主檔列整列灰掉(器材與倉儲四顆模式鈕,業主指示 2026-08-17 之九):仍列在清單裡,一眼分得出不能用 */
tbody tr.off td { color: var(--mut); opacity: .7; }
tbody tr.off td .chk { opacity: 1; }
/* 勾選的那一列整列上底色(業主指示 2026-09-17:「個案總表的任何勾選,那一行就顯示不同的顏色的底色,
   方便看後面的欄位時知道是誰的資料,否則會看錯行的資料」)。
   欄位很多、要橫向捲動時,底色是唯一能一路跟著看的線索。
   寫在 td 上才蓋得過隔列淡底與 hover(那兩個寫在 tr);:has() 讓勾一下就變色,不必等程式重畫。
   顏色選淡黃:和「已結案」的紫、排序鍵的藍都分得開,列印不受影響(總表不列印)。 */
tbody tr:has([data-upick]:checked) > td,
tbody tr.picked > td { background: #FFF3BF; }
tbody tr:has([data-upick]:checked):hover > td,
tbody tr.picked:hover > td { background: #FFEC9E; }
/* 已結案的個案整列換底色(業主指示 2026-08-19):已結案=不再訪視,不管怎麼排序都要一眼分得出。
   寫在 td 上才蓋得過隔列淡底與 hover(那兩個寫在 tr) */
tbody tr.closed td { background: var(--closed-v); }
tbody tr.closed:hover td { background: color-mix(in srgb, var(--closed-v) 85%, var(--closed)); }
/* 逾期未執行的排程整列淡紅底(訪視排程狀態改版 2026-08-26):積壓要一眼看到 */
tbody tr.overdue td { background: color-mix(in srgb, var(--red-v) 45%, #fff); }
tbody tr.overdue:hover td { background: color-mix(in srgb, var(--red-v) 65%, #fff); }

/* ---- 訪視排程狀態:全所工作量格線(人 × 日,2026-08-26)----
   直欄是日子、格子是件數;今天那欄加深、週末淡灰。數字做成可點的入口
   (點了進排程清單看那個人那一天),所以長得像連結不像按鈕。 */
.schedgrid table { min-width: 100%; }
.schedgrid th, .schedgrid td { text-align: center; padding: var(--sp-1) var(--sp-1); min-width: 1.75rem; }
.schedgrid th:first-child, .schedgrid td:first-child { text-align: left; white-space: nowrap; padding-inline: var(--sp-2); }
.schedgrid .we { background: color-mix(in srgb, var(--mut) 12%, transparent); }
.schedgrid .today { background: color-mix(in srgb, var(--g-v, var(--brand-2)) 55%, #fff); }
.schedgrid button.cnt {
  border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700;
  color: var(--brand); text-decoration: underline; padding: 0;
}
.c-closed { background: var(--closed-v); border-color: var(--closed); }
.late { color: var(--red); font-weight: 700; }
.tablewrap { overflow-x: auto; }
/* 表格自己捲、表頭釘住(業主指示 2026-08-27:所有表格,欄位名稱以上固定不動;
   高度由 ui.js pinHead() 算,這裡只管捲動與 sticky)。th 的實色底本來就有,
   資料列捲過去不會透出來。 */
.tablewrap.vscroll { overflow-y: auto; overscroll-behavior-y: contain; }
.tablewrap.vscroll thead th { position: sticky; top: 0; z-index: 4; }
/* 大全螢幕=只留表格(業主指示 2026-08-27,同日更正:只有 data-fs 大全螢幕
   把表格以上收掉;data-fs2 小全螢幕保留整頁內容——標題、功能鈕、篩選列都在,
   只遮瀏覽器介面與側欄):表格之前的元素(由 ui.js pinHead 的 fsMark 標記)
   在 data-fs 下收掉,離開自動長回來。 */
:root[data-fs] .main .fshide { display: none !important; }
:root[data-fs] .main { padding: var(--sp-2); }
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); }
/* 營運儀表(2026-08-17):info=純數字、沒有警戒語意的磚(總數、分布);任何磚只要帶連結就可點 */
.kpi.info { border-top-color: var(--brand-2); }
.kpi.info .n { color: var(--brand); }
.kpi.link { cursor: pointer; }
.kpi.link:hover { box-shadow: 0 1px 6px rgba(0,0,0,.12); }
/* 警戒門檻(2026-08-17):表格列裡的行內編輯——數字格窄一點、不佔整列;.bar 在格子裡不要上下留白 */
.bar.thr { margin: 0; flex-wrap: nowrap; }
.bar.thr .inp { width: 6em; }
.bar.thr select.inp { width: auto; }

/* ---- 提示條（每畫面至多一條）---- */
.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); }
/* 標籤粗黑體（Fred 指示 2026-08-07:「轉介來源」這些標題要黑體字）。
   原本這裡寫灰、檔尾另一條寫黑,靠檔案順序決勝——已合併成這一條(2026-08-13)。 */
.field label { display: block; font-size: 0.78125rem; color: var(--ink); font-weight: 700; margin-bottom: var(--sp-1); }
.field label .req { color: var(--red); }

/* ---- 欄位修改歷程(業主指示 2026-08-15)----

   「被改過第二次的欄位要呈現不同顏色,而且點得進去看時間軸。」

   兩級,分別對應兩件不同的事:
     一次(琥珀)   有人動過。正常作業,提示而已,不要搶眼。
     兩次以上(紅) 同一格被反覆改——這才是要跳出來的:多半代表有爭議、
                  或有人拿到的資訊不一樣。業主要的就是這一級。

   底色用最淡的那一階(--*-bg),輸入框本身仍是白底,不影響讀值與填寫。
   標籤維持黑體黑字(業主指示 2026-08-06:欄位標題黑、資料藍),顏色由底色與
   「改過 N 次」那顆小鈕表達——標籤也染色會跟既有的配色規則打架。

   ⚠ 淡底一律用 box-shadow 的擴散(spread)畫,**不可以改成 padding + 負 margin**:
   box-shadow 完全不參與版面計算。實測過 padding 的版本——有色的欄位輸入框左緣
   313、無色的 301,寬度也差 24px,一頁九十幾格有的有色有的沒有,左緣就參差不齊,
   看起來像版面壞掉(而且 .gridflex 那種並排的版面,負 margin 還會吃到隔壁欄)。 */
.field[data-hist] {
  border-radius: var(--r-ctrl);
  background: var(--amber-bg);
  box-shadow: 0 0 0 var(--sp-2) var(--amber-bg);
}
.field[data-hist="many"] {
  background: var(--red-bg);
  box-shadow: 0 0 0 var(--sp-2) var(--red-bg);
}

/* 「改過 N 次」小鈕:做成鈕而不是把整格變可點——整格可點會跟「點欄位要輸入」
   打架,想改字卻跳出對話框比沒有這個功能還糟。跟在標籤後面,不另佔一行。 */
.fh-mark {
  margin-left: var(--sp-2); padding: 0 var(--sp-2);
  font-family: inherit; font-size: 0.6875rem; font-weight: 700; line-height: 1.6;
  color: var(--amber); background: #fff;
  border: 1px solid var(--amber-v); border-radius: var(--r-chip);
  cursor: pointer; vertical-align: middle;
}
.field[data-hist="many"] .fh-mark { color: var(--red); border-color: var(--red-v); }
.fh-mark:hover { background: var(--amber-bg); }
.field[data-hist="many"] .fh-mark:hover { background: var(--red-bg); }
/* 觸控裝置:11px 的小鈕手指按不到(同 2026-08-14 頂欄薄邊那個教訓),
   看不見的 ::after 把可點範圍擴到 44px,視覺維持小鈕 */
@media (pointer: coarse) {
  .fh-mark { position: relative; }
  .fh-mark::after {
    content: ''; position: absolute; left: -0.5rem; right: -0.5rem; top: -0.75rem; bottom: -0.75rem;
  }
}

/* 時間軸清單:由舊到新,讀的人是在追「這一格怎麼變成現在這樣」 */
.fh-list { list-style: none; margin: var(--sp-3) 0; padding: 0; }
.fh-ev {
  border-left: 3px solid var(--line); padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2); background: var(--paper); border-radius: var(--r-ctrl);
}
.fh-ev.scan { border-left-color: var(--brand-2); }      /* 掃描填入與人改的要分得出來 */
.fh-ev.human { border-left-color: var(--red-v); }
.fh-when { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.71875rem; opacity: .85; }
.fh-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; flex: 0 0 auto;
  background: var(--brand); color: #fff; border-radius: var(--r-chip); font-weight: 700;
}
.fh-who { margin-left: auto; font-weight: 700; }
/* 值可能很長(病史、住院經過),要能換行,不可以撐破對話框 */
.fh-val {
  display: flex; align-items: baseline; gap: var(--sp-2);
  margin-top: var(--sp-1); font-size: 0.8125rem; overflow-wrap: anywhere;
}
/* 刪除(業主指示 2026-08-15:刪除也算一種修改,而且要註明)。
   「(空白)」看起來像沒填過——那跟「本來有、被人刪掉」是完全不同的兩件事,
   後者才是要追的。所以刪除那一筆自己標一個「刪除」小籤,新值寫「已刪除」。 */
.fh-tag {
  padding: 0 var(--sp-2); border-radius: var(--r-chip);
  background: var(--red-bg); color: var(--red); font-weight: 700;
}
.fh-ev.del { border-left-color: var(--red); }
.fh-to.del { color: var(--red); }
.fh-from { color: var(--mut); text-decoration: line-through; }
.fh-arrow { flex: 0 0 auto; opacity: .6; }
.fh-to { font-weight: 700; }
.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); }

/* ⚠ 觸控裝置的表單元件字級一律 ≥16px ——
   iOS Safari 碰到字級小於 16px 的 input/select/textarea 會**自動放大整個畫面,而且不會縮回**。
   預設 12pt 時 .inp 是 0.8125rem = 13px,正好中這個雷(box 踩過,2026-09-25 稽核出來)。
   桌機(Windows / Mac)不受影響,維持原本緊湊的字級 —— 只有手指操作的裝置才放大。
   max():使用者把「字型大小」調大時,以他自己的設定為準。 */
@media (pointer: coarse) {
  input, select, textarea, .inp { font-size: max(1rem, 16px); }
}
.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); }

/* 歷次擷取的並列比較（2026-08-21）：擷取前/擷取後兩欄，不同的列左緣琥珀色條
   ＋淡底；相同的列不染色，視線只停在有差的那幾列。 */
table.cmp td { vertical-align: top; }
table.cmp tr.cmp-diff td { background: color-mix(in srgb, var(--amber) 12%, #fff); }
table.cmp tr.cmp-diff td:first-child { border-left: 4px solid var(--amber); font-weight: 600; }

/* 人改過的格子：虛線外框（與權限矩陣的 .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); }

/* 警告訊息(業主指示 2026-08-30):全系統警告一律紅色粗體+閃爍,擺在按鈕附近 */
@keyframes warnblink { 0%, 55% { opacity: 1; } 70%, 85% { opacity: 0.25; } 100% { opacity: 1; } }
.msg.bad, .err, .toast.bad {
  color: var(--red); font-weight: 700;
  animation: warnblink 1.1s ease-in-out infinite;
}
.dialog .ft .errslot { flex: 1; text-align: left; min-width: 0; }
.warncap { color: var(--red); font-weight: 700; animation: warnblink 1.1s ease-in-out infinite; }
.dialog .ft .warncap { flex: 1; text-align: left; min-width: 0; font-size: 0.8125rem; }
.dialog .ft .errslot .msg { margin-bottom: 0; }

/* ---- 浮動訊息 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: calc(var(--vvh, 100vh) * 0.9); overflow: auto;   /* 560px;高度用實際可見高度,手機網址列伸縮時底部按鈕才不會被推出畫面 */
}
/* 寬版對話框(2026-08-21):空白轉介單這類多欄表單用 */
.dialog.wide { max-width: 62rem; }
/* 彈性欄數格線(業主指示 2026-08-21:「輸入要讓螢幕能夠彈性縮放」):
   欄數跟著可用寬度走——夠寬三欄、窄一點兩欄、手機/放大檢視一欄,
   不像 grid3 永遠三欄(放大後一格擠到放不下字)。 */
.gridfit { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sp-2) var(--sp-3); }
.gridfit .field { margin-bottom: 0; }
.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: calc(var(--vvh, 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，寫在 <html data-display>。
   「mobile」選項已於 2026-08-12 拆除（業主在電腦上誤點過兩次，選單變橫列像壞掉），
   死選擇器已於 2026-08-13 清除。小螢幕由 data-narrow 自動判斷（≤600px，
   app.js 的 NARROW_PX）；平移另看 data-pan（pan.js 的 syncPanAttr）。
   ============================================================================= */

/* ---- 平板：側欄收窄、三欄降兩欄、分割檢視改直排 ---- */
:root[data-display="tablet"] .shell { --nav-w: 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 × 視窗寬)，下限為視窗寬，
   所以螢幕至少看得到資料畫面的三分之一，不會滑到迷路。
   ============================================================================= */

/* 上傳進度（斷點續傳，2026-08-11）的外框。四個站共用同一條；
   裡面的進度條、百分比、預估時間由全系統共用的 YshProgress 畫（業主 2026-10-23，規則庫 R-818）。 */
.upbar { margin: var(--sp-2) 0; }

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

/* 手機／窄版也保留左側選單（業主指示 2026-08-11：「手機版的顯示與電腦版都要有
   左側選單」）。原本手機是把側欄攤成頂部橫向捲動列——與電腦版長得完全不一樣，
   業主 2026-08-05 就說過那「看起來像壞掉」，這次索性整段拿掉。

   側欄留在左邊、維持自己的縱向捲動（與電腦版同一套），資料畫面照舊左右平移。
   兩個軸各歸各的容器：直的在側欄與資料畫面裡各自捲，橫的在 .panwrap 上平移。

   窄畫面預設收成圖示列（3rem，見 app.js 的 syncNarrow）：196px 的側欄在 375px 的
   螢幕上會吃掉一半以上，剩下的寬度連一欄表格都放不下。按 ☰ 就展開成完整選單，
   要看得到項目名稱時用；展開後資料畫面變窄，但它本來就是靠平移在看的。

   平移規則認 data-pan、不認 data-narrow（業主平板實測 2026-08-13）：
   平移與窄版是兩件事。平板比 600 寬、走電腦版版面，但整張表攤不開，
   原本表格被硬壓成一團又沒得拖。data-pan 由 pan.js 的 syncPanAttr 決定：
   窄版一定平移；觸控裝置（pointer: coarse）視窗 ≤1280 也平移。
   窄版專屬的規則（頂欄縮寫、機構選擇器）仍認 data-narrow。 */
:root[data-narrow] .shell { display: flex; height: calc(var(--vvh, 100vh) - var(--topbar-h) - var(--panbar-h, 0px)); }
:root[data-pan] .main { overflow-y: auto; }

/* 平移視窗：側欄留在左邊之後，它是 .shell 這個彈性列的第二欄。
   flex: 1 拿走側欄以外的全部寬度，min-width: 0 是必要的——彈性項目的預設
   min-width: auto 會被裡面那個比螢幕寬的 .main 撐開，橫向捲動就發生在整個外框上，
   側欄跟著被推出畫面。 */
:root[data-pan] .panwrap {
  display: block; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;                 /* 位置條就是捲軸，不必再有一條 */
}
:root[data-pan] .panwrap::-webkit-scrollbar { display: none; }

:root[data-pan] .main {
  width: var(--pan-w, 100%); height: 100%; padding: var(--sp-5);
}

/* 表格自己的拉條要留著（業主手機實測 2026-08-22）：原本寫 overflow-x: visible
   把捲動權全交給外層平移，但卡片是 overflow: hidden，比資料區還寬的表格（個案總表）
   就被卡片右緣硬切掉，滑到底也看不到後面的欄。現在表格在卡片裡自己左右拉，
   拉到底才輪到外層平移（overscroll-behavior-x: contain 擋掉連動）。
   手機瀏覽器的捲軸預設只在滑動時才閃一下，業主要的是看得到的拉條，
   所以用 ::-webkit-scrollbar 畫一條常駐的。 */
:root[data-pan] .tablewrap { overflow-x: auto; overscroll-behavior-x: auto; }   /* contain→auto(2026-08-30):表格捲到底,手勢接力給整頁 */

/* 表格自畫拉條(R-444 之七,ui.js mountTableBars):平板連表格元素的原生捲軸樣式都不理,
   改成程式自己畫——表格=黃、畫面=綠;橫向在表格上方、直向在右側;常駐、可點可拖。 */
.twshell { position: relative; min-width: 0; }
.twshell .tablewrap { scrollbar-width: none; }
.twshell .tablewrap::-webkit-scrollbar { display: none; }
.twbar { background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-chip); touch-action: none; cursor: pointer; }
.twbar.h { position: relative; height: 0.3125rem; margin: 0 0 0.125rem; }   /* 細(業主指示 2026-09-20) */
.twbar.h .thumb { position: absolute; top: 0; bottom: 0; min-width: 1.5rem; }
.twbar.v { position: absolute; top: 0.4375rem; right: 0; bottom: 0; width: 0.3125rem; }
.twbar.v .thumb { position: absolute; left: 0; right: 0; min-height: 1.5rem; }
.twbar .thumb {
  background: color-mix(in srgb, var(--amber-v) 75%, #fff);   /* 表格=淡黃 */
  border-radius: var(--r-chip);
}
@media print { .twbar { display: none !important; } }

/* 窄版原本把系統名稱與身分整個藏掉——業主 2026-08-13 之五:手機也要看得到,
   改為上面的「框內左右滑動」,不再隱藏。 */

/* ---- 位置條 ----
   放在頂欄與資料區之間、走正常版面，不再 position: fixed 釘底（業主手機實測 2026-08-22：
   釘底的那一條被釘到視窗看不見的一截裡，見上面 .shell 的 --vvh 說明）。
   它佔的高度由 pan.js 寫進 --panbar-h，.shell 的高度扣掉它。 */
.panbar { display: none; }

:root[data-pan] .panbar {
  display: flex; align-items: center; gap: var(--sp-3);
  background: #fff; border-bottom: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-4);
}
:root[data-pan] .panbar[hidden] { display: none; }
.panbar .track {
  position: relative; flex: 1; height: 0.3125rem;   /* 全部改細(業主指示 2026-09-20) */
  background: var(--wash); border-radius: var(--r-chip); cursor: pointer;
  border: 1px solid var(--line);
}
.panbar .thumb {
  position: absolute; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--green-v) 65%, #fff);   /* 系統畫面拉條=綠色(業主指示 2026-08-30 之四) */
  border-radius: var(--r-chip); min-width: 1.5rem;
}
/* ---- 直向拉條(業主指示 2026-08-30) ----
   平板瀏覽器的原生捲軸太細、還會自動消失,讓人漏看下面的資料。
   自己畫一條常駐的,外觀與橫向位置條一致:淺軌道+藍滑塊。
   走 .shell 的 flex 第三欄,佔實際版面,不蓋住內容。 */
.vbar { display: none; }
:root[data-pan] .vbar {
  display: block; position: relative;
  flex: 0 0 0.3125rem; width: 0.3125rem;   /* 全部改細(業主指示 2026-09-20) */
  background: var(--wash); border-left: 1px solid var(--line);
  cursor: pointer; touch-action: none;
}
:root[data-pan] .vbar[hidden] { display: none; }
.vbar .thumb {
  position: absolute; left: 0.0625rem; right: 0.0625rem;
  background: color-mix(in srgb, var(--green-v) 65%, #fff);   /* 系統畫面拉條=綠色(業主指示 2026-08-30 之四) */
  border-radius: var(--r-chip); min-height: 2.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, .vbar, .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; }

/* 規則書與工作紀錄(業主指示 2026-08-22):Markdown 轉出來的正文。
   表格是主角(規則書一條一列),窄畫面交給 .tablewrap 左右拉;標題之間留足夠空隙,
   文件很長,靠標題分段才找得到。 */
.md { line-height: 1.7; }
.md h1 { font-size: 1.375rem; margin: var(--sp-5) 0 var(--sp-3); }
.md h2 { font-size: 1.125rem; margin: var(--sp-6) 0 var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.md h3 { font-size: 1rem; margin: var(--sp-4) 0 var(--sp-2); }
.md p { margin: 0 0 var(--sp-3); }
.md ul, .md ol { margin: 0 0 var(--sp-3) 1.5rem; }
.md li { margin-bottom: var(--sp-1); }
.md code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.875em; background: var(--wash); padding: 0 0.25em; border-radius: 3px; }
.md pre { background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-ctrl); padding: var(--sp-3); overflow-x: auto; font-size: 0.8125rem; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }
.md .tablewrap { margin: 0 0 var(--sp-4); }
.md .mdtable { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
.md .mdtable th, .md .mdtable td { border: 1px solid var(--line); padding: var(--sp-1) var(--sp-2); vertical-align: top; text-align: left; }
.md .mdtable th { background: var(--wash); white-space: nowrap; }
.md .mdtable td:nth-child(1) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.md .mdtable td:nth-child(2) { white-space: nowrap; }
.md .mdtable td:nth-child(3) { min-width: 20rem; }

/* 表單欄距壓縮(業主指示 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＝內容較長的欄位（地址、管灌內容、簽章者…）自動佔兩格。 */
/* 表單欄位排法（業主指示 2026-08-11：每一個欄位的寬度都可以調整，比照個案總表）。
   從 grid 改為 flex-wrap：grid 的欄是整排一起決定的，單獨把某一欄拉寬，
   同一行的其他欄位會跟著被推——那不是「調整這一格」，是「調整整個表格」。
   flex 讓每一格自己決定寬度，拉寬一格就只有那一格變，放不下的自動換行。

   預設寬度算出來與原本的三欄一模一樣：(100% - 兩個間距) ÷ 3。
   欄數寫成 --cols，平板改成 2 就好，不必再寫一次寬度公式。 */
.gridflex {
  --cols: 3; --colgap: var(--sp-2);
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--sp-1) var(--colgap);
}
:root[data-display="tablet"] .gridflex { --cols: 2; }
.gridflex > .field {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--colgap)) / var(--cols));
  margin-bottom: 0; min-width: 0; position: relative;
}
.gridflex > .field.wide {
  flex-basis: calc((100% - (var(--cols) - 1) * var(--colgap)) / var(--cols) * 2 + var(--colgap));
}
.gridflex > .formgroup { flex-basis: 100%; }
@media (max-width: 700px) {
  .gridflex > .field.wide { flex-basis: calc((100% - (var(--cols) - 1) * var(--colgap)) / var(--cols)); }
}

/* 欄寬拖拉握把：與個案總表的欄界同一個樣子（常駐細豎線，滑過變醒目），
   使用者在兩個地方看到的是同一件事。 */
.fgrip {
  position: absolute; top: 1.1rem; right: calc(var(--sp-2) / -2 - 2px);
  width: 9px; bottom: 2px; cursor: col-resize; user-select: none; z-index: 2;
  background: linear-gradient(to right, transparent 4px, #b9cdd3 4px, #b9cdd3 5px, transparent 5px);
}
.fgrip:hover, .fgrip[data-on] { background: rgba(43, 108, 124, .4); }
/* 緊湊模式：省空間（業主指示 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-21「資料陳列可以稍微寬鬆一點」）：
   欄距、列距、格子內距都加一級，字級也回到一般大小——照原始資料檔的格式排，但要好讀好改。 */
.gridflex.loose { --colgap: var(--sp-4); gap: var(--sp-3) var(--colgap); }
.gridflex.loose .field label { margin-bottom: 3px; font-size: 0.8125rem; }
.gridflex.loose .inp { padding: 8px 10px; font-size: 0.9375rem; }
.gridflex.loose .formgroup { margin: var(--sp-4) 0 var(--sp-1); }

/* 只顯示有資料的欄位（業主指示 2026-08-21；ui.js filledToggle）：作用中時空的格子/列/小節標藏起來 */
/* 顯示有資料欄位(業主更正 2026-09-09):**修改畫面**的空欄位名稱與格子保留——
   可能是資料遺漏,要能直接補輸入;只淡化讓有資料的跳出來,滑過/點進去恢復。
   唯讀陳列(vrow)沒有輸入需求,照舊收合。 */
.filled-only .field.is-empty { opacity: .35; }
.filled-only .field.is-empty:hover, .filled-only .field.is-empty:focus-within { opacity: 1; }
.filled-only .vrow.is-empty, .filled-only .paper .prow.is-empty { display: none; }
.filled-only .formgroup.is-empty { display: none; }

/* 紙本版面（業主指示 2026-08-21「查看/修改的格式跟原始文件一樣」）：
   照轉介單的列與相對寬度排成表格——每列一橫條、格子並排、左欄名右值，外觀像紙上的表格。
   格子裡仍是原本的 .field（輸入格/歷程/底色全在），只藏它自己的 label。 */
.gridflex > .paper { flex-basis: 100%; }
.paper { border: 1px solid var(--line, #b9c4d0); border-bottom: 0; border-radius: var(--r-ctrl); overflow: hidden; background: #fff; }
.paper .prow { display: flex; border-bottom: 1px solid var(--line, #b9c4d0); }
.paper .pcell { display: flex; align-items: stretch; border-right: 1px solid var(--line, #b9c4d0); }
.paper .pcell:last-child { border-right: 0; }
.paper .plabel { flex: 0 0 auto; max-width: 9rem; padding: 6px 8px; background: var(--bg-soft, #f2f5f8); font-weight: 600; font-size: 0.8125rem; display: flex; align-items: center; border-right: 1px solid var(--line, #b9c4d0); }
.paper .pval { flex: 1 1 auto; min-width: 0; padding: 4px 6px; display: flex; align-items: center; }
.paper .pval .field { margin: 0; width: 100%; }
/* 紙本格式的欄位標籤由 .plabel 印,藏掉 .field 自己的 label */
.paper .pval .field > label { font-size: 0; margin: 0; line-height: 0; }
.paper .pval .field .inp { width: 100%; }
@media (max-width: 700px) { .paper .prow { flex-direction: column; } .paper .pcell { border-right: 0; border-bottom: 1px solid var(--line, #b9c4d0); } .paper .pcell:last-child { border-bottom: 0; } }

/* 表單欄位大分類標題(業主指示 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-09-09:「基本資料」「健康狀況」字改大一點、明顯一點) */
.formgroup.big { font-size: 1.35rem; padding: var(--sp-2) var(--sp-3); background: var(--wash); border-left: 5px solid var(--brand, #2a7); border-bottom: none;
  margin-top: 2.5rem; }   /* 兩段之間隔開一截(業主指示 2026-09-09:看起來是兩個不一樣部分) */

/* 欄位標題黑、填入資料藍(業主指示 2026-08-06):全系統一致,一眼分得出「欄名」與「資料」
   欄位標題用粗黑體(Fred 指示 2026-08-07:「轉介來源」「個案姓名」這些標題要黑體字) */
.field label { color: var(--ink); font-weight: 700; }
/* 填入的資料維持「資料藍、普通字重」(2026-08-06 規則;2026-08-16 一度改黑粗,
   業主看過覺得視覺效果不好,同日還原)。欄名另靠顏色分三類(下面)。 */
input.inp, select.inp, textarea.inp { color: var(--val); }
.inp::placeholder { color: var(--mut); opacity: 0.65; }   /* 提示例字維持灰,不與真的資料混淆 */
.val { color: var(--val); }                               /* 唯讀顯示的資料值(電子檔對照等) */

/* 結案前提醒(業主指示 2026-08-19):未完成排程、未回存訪視包——橙色,提醒不硬擋 */
.note-bar.warn { background: color-mix(in srgb, var(--amber-v) 70%, #fff); color: var(--ink); border-left-color: var(--amber); }

/* 站名關鍵字黑體(業主指示 2026-08-19):六個訪視包站的「接案／護理／醫師」加粗;
   選中那一條整串已是 700,關鍵字再加到 900 才分得出 */
.nav .gbody a .label b { font-weight: 800; color: var(--ink); }
.nav .gbody a.on .label b { font-weight: 900; }

/* 可拉大縮小的內容框(業主指示 2026-08-20 晚,匯入全人評估表的辨識結果):
   內容多的清單收在固定高度的框裡自己捲,右下角拖拉改高度(CSS resize);
   min/max 讓它既收得很小、也拉得開到看完整份 */
.resizebox {
  resize: vertical; overflow: auto;
  height: 16rem; min-height: 5rem; max-height: calc(var(--vvh, 100vh) * 0.8);
  border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem;
  background: #fff;
}

/* ══ 訪視行事曆(R-414,照 Google Calendar)══════════════════════════════ */
.calbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:.5rem;padding:.6rem .8rem;border-bottom:1px solid var(--line)}
.calnav{display:flex;align-items:center;gap:.4rem}
.caltitle{font-weight:700;font-size:1.05rem;margin:0 .4rem;white-space:nowrap}
.calpeople{display:flex;flex-wrap:wrap;gap:.35rem;padding:.45rem .8rem;border-bottom:1px solid var(--line)}
.calperson{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--line);
  border-radius:999px;padding:.15rem .6rem;background:#fff;cursor:pointer;font-size:.85rem}
.calperson.off{opacity:.4}
.calperson.off .caldot{background:#c4c7cc!important}
.caldot{width:.7rem;height:.7rem;border-radius:50%;display:inline-block}
.calhead{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;
  font-size:.8rem;color:var(--ink-soft,#666);padding:.3rem 0;border-bottom:1px solid var(--line)}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr)}
.calcell{min-height:6.2rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:.15rem;overflow:hidden;cursor:pointer}
.calcell:nth-child(7n){border-right:none}
.calcell.dim .caldate{color:#b6b9be}
.calcell.today .caldate{background:var(--brand,#1a73e8);color:#fff;border-radius:50%}
.caldate{width:1.5rem;height:1.5rem;line-height:1.5rem;text-align:center;font-size:.8rem;margin:0 auto .15rem}
.calev{--evc:#8e24aa;display:flex;align-items:center;gap:.25rem;background:var(--evc);color:#fff;   /* 行程一律紫色(業主指示 2026-08-27) */
  border-radius:4px;padding:.1rem .3rem;margin:.12rem 0;font-size:.72rem;line-height:1.25;
  cursor:pointer;overflow:hidden;white-space:nowrap}
.calev.wide{font-size:.85rem;padding:.3rem .5rem}
.calev.done{}   /* 完成=打 ✓,不畫線(業主指示 2026-09-02;原畫線規則退場) */
.calev.past{opacity:.45}   /* 過期=淡色(過去的行程照樣看得到) */
.calev.clash{box-shadow:inset 0 0 0 2px #d93025,0 0 0 1px #d93025}
.calevt{font-weight:700;flex:0 0 auto}
.calevn{overflow:hidden;text-overflow:ellipsis}
.calmore{font-size:.72rem;color:var(--ink-soft,#666);cursor:pointer;padding:.05rem .3rem}
.calmore:hover{text-decoration:underline}
.calweek{display:grid;grid-template-columns:repeat(7,1fr);min-height:22rem}
.calwcol{border-right:1px solid var(--line);padding:.2rem;display:flex;flex-direction:column;gap:.1rem}
.calwcol:last-child{border-right:none}
.calwcol.today .calwhead{color:var(--brand,#1a73e8);font-weight:800}
.calwhead{text-align:center;font-size:.8rem;padding:.25rem 0;border-bottom:1px solid var(--line);margin-bottom:.2rem}
/* 捲動時上半部釘住(業主指示 2026-08-27):月份列+人員列+星期表頭包成一塊黏在捲動容器頂端;
   卡片預設 overflow:hidden 會讓 sticky 失效,行事曆這張卡改 visible */
.card.calcard{overflow:visible}
/* top 用 .main 的上內距負值:黏住時貼齊捲動範圍最上緣,格子不會從內距的縫露出來 */
.calsticky{position:sticky;top:calc(-1 * var(--sp-6));z-index:6;background:#fff;
  border-radius:var(--r-card) var(--r-card) 0 0;border-bottom:1px solid var(--line)}
.calweek.wkhead{min-height:0}
.calweek.wkhead .calwhead{margin-bottom:0}
.callist{display:flex;flex-direction:column;gap:.2rem}
.calline{display:flex;gap:.6rem;padding:.2rem 0}
.calline b{flex:0 0 4.5rem;color:var(--ink-soft,#666);font-weight:600}
.calwarn{color:#d93025;font-weight:700;padding:.3rem 0}
.calacts{display:flex;gap:.5rem;flex-wrap:wrap;padding-top:.6rem}
.calscope{display:flex;align-items:center;gap:.5rem;padding:.35rem 0;cursor:pointer}
.calrow{display:flex;align-items:center;gap:.5rem;margin:.45rem 0;flex-wrap:wrap}
.calrow>b{flex:0 0 4rem;color:var(--ink-soft,#666);font-weight:600}
.caledit .inp{padding:.35rem .5rem;border:1px solid var(--line);border-radius:6px}
/* 手機(600px 以下,NARROW_PX 同 app.js):格子縮小、事件列只留色條+名字 */
@media (max-width:600px){
  .calcell{min-height:4.2rem}
  .calev{font-size:.62rem;padding:.05rem .2rem}
  .calevt{display:none}
  .caltitle{font-size:.95rem}
}

/* ---- 頁面捲軸加粗(業主回報 2026-08-30:平板上行事曆右側拉條看不見) ----
   平板瀏覽器預設是細細的浮動捲軸,捲一下才出現。改成常駐、加粗、色塊明顯,
   整站的主要捲動區(頁面本身與 .main)一體適用。
   業主指示 2026-09-20(box/ltc1/work 三系統):**所有地方拉條永不消失,可以窄**——
   原 html 的 scrollbar-color 一設就會停用 ::-webkit-scrollbar 自畫拉條(手機因此仍會躲),
   移除之;並加全站窄版常駐拉條,主要捲動區維持加粗。
   自畫替代條處(scrollbar-width:none,如表格/位置條)不受影響,各自已有常駐條。 */
*::-webkit-scrollbar { width: 0.3125rem; height: 0.3125rem; }   /* 全部改細(業主指示 2026-09-20:所有系統所有拉條) */
*::-webkit-scrollbar-track { background: var(--wash); }
*::-webkit-scrollbar-thumb { background: var(--brand-2); border-radius: 0.4375rem; }
/* 手機版拉條收窄(業主指示 2026-09-20:螢幕直接滑很容易,拉條只作指示;主要捲動區同窄) */
html:is([data-narrow], [data-display="mobile"])::-webkit-scrollbar,
:root:is([data-narrow], [data-display="mobile"]) *::-webkit-scrollbar { width: 0.3125rem; height: 0.3125rem; }
html::-webkit-scrollbar, .main::-webkit-scrollbar { width: 0.3125rem; height: 0.3125rem; }   /* 加粗版取消,全部改細(業主指示 2026-09-20) */
html::-webkit-scrollbar-track, .main::-webkit-scrollbar-track { background: var(--wash); }
html::-webkit-scrollbar-thumb, .main::-webkit-scrollbar-thumb {
  background: var(--brand-2); border-radius: 0.4375rem; min-height: 2rem;
}
html::-webkit-scrollbar-thumb:hover, .main::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* 欄寬把手觸控化(業主回報 2026-08-31 手機拖不動):鎖住觸控捲動,
   觸控裝置手指感應區外擴——看起來一樣細,實際可抓約 29px。 */
.colgrip { touch-action: none; }
@media (pointer: coarse) {
  .colgrip::after { content: ''; position: absolute; top: 0; bottom: 0; left: -10px; right: -10px; }
}

/* ---- 表格檢視框(R-446 業主指示 2026-08-31) ---- */
/* 下緣的整條點狀調高把手取消(業主指示 2026-09-01):底部改標準橫向拉條(twbar.h.bot),
   調大小只剩右下角把手 */
.twshell.vb { padding-bottom: 0; }
.vbgrip {
  position: absolute; z-index: 6; touch-action: none;
  background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-chip);
}
.vbgrip.c {   /* 右下角:調寬+高 */
  right: 0; bottom: 0; width: 1.5rem; height: 1.5rem; cursor: nwse-resize; z-index: 7;
  background: var(--wash);
}
.vbgrip.c::before {
  content: ''; position: absolute; right: 4px; bottom: 4px;
  width: 11px; height: 11px;
  border-right: 3px solid var(--brand); border-bottom: 3px solid var(--brand);
}
@media (pointer: coarse) {
  .vbgrip::after { content: ''; position: absolute; inset: -12px; }
}
/* 抓手平移(長按左鍵):游標變抓物手掌 */
.tablewrap.grabbing, .tablewrap.grabbing * { cursor: grabbing !important; user-select: none !important; }

/* 調整檢視框時不讓瀏覽器自動補捲動(R-446:往上縮會跳) */
.main, .panwrap { overflow-anchor: none; }

/* 小全屏鈕改用 ︿/﹀ 圖示(2026-09-01),舊的旋轉樣式作廢 */
.topfold .icon { transform: none !important; }

/* 大全屏=純表格(業主指示 2026-09-01 之二):除欄位名稱與資料外一律不顯示。
   離開:Esc(電腦)/系統返回或下拉(手機)/表格上連點兩下。 */
:root[data-fs] .topbar, :root[data-fs] .panbar, :root[data-fs] .vbar,
:root[data-fs] .twbar, :root[data-fs] .vbgrip { display: none !important; }
:root[data-fs] .main { padding: 0 !important; }
:root[data-fs] .card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
:root[data-fs] .twshell.vb { padding-bottom: 0 !important; }
:root[data-fs] .tablewrap { border: 0 !important; }

/* 大全屏離開鈕(業主指示 2026-09-01):標準 iconbtn 外觀(整系統一致),只在 data-fs 顯示、定位右上角 */
.fsexit { display: none !important; }
:root[data-fs] .fsexit {
  display: inline-flex !important; position: fixed; top: 0.375rem; right: 0.375rem; z-index: 99;
  background: #fff;
}

/* 大全屏的卡片標題列只留標題字(業主指示 2026-09-01 之四) */
:root[data-fs] .hd > :not(h2) { display: none !important; }

/* 大全屏:表格卡片的標題列一定要顯示,並保留原本的底色樣式(業主指示 2026-09-01 之五) */
:root[data-fs] .card > .hd { display: flex !important; }

/* 大全屏的頁面標題(卡片沒有標題列的表格用;業主指示 2026-09-01 之五):
   縮成一條與卡片標題列同風格的標題帶,只留標題字 */
:root[data-fs] .pagehead { background: var(--wash); border-bottom: 1px solid var(--line); padding: 0.3rem 0.75rem; margin: 0; }
:root[data-fs] .pagehead h1 { font-size: 1.05rem; margin: 0; }
:root[data-fs] .pagehead > :not(h1) { display: none !important; }

/* 歷次訪視展開列(業主指示 2026-09-01:一次訪視一筆,個案總表展開/收縮) */
tr.visitsub > td { background: #f4f7f4; padding: 6px 12px; white-space: normal !important; }
.visitlist { display: flex; flex-direction: column; gap: 4px; }
.visitrow a { color: var(--link, #1652C2); text-decoration: underline; }
/* 每一次訪視一列,接案/護理/醫師三種各一欄,沒有資料就留白(業主指示 2026-09-16,R-594) */
table.visitgrid { border-collapse: collapse; width: auto; background: #fff; }
table.visitgrid th, table.visitgrid td { border: 1px solid #c9d2c9; padding: 4px 10px; text-align: left; vertical-align: middle; white-space: nowrap; }
table.visitgrid thead th { background: #e6ede6; font-weight: 700; }
table.visitgrid td.empty { background: #fafafa; }
table.visitgrid .chips { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

/* 排序鍵欄頭底色:第1鍵最深、第2/3鍵漸淺(業主指示 2026-09-01);
   升/降箭頭與序號由 wireSort 一律標在欄名後 */
thead th.sortk1 { background: #aec8ee !important; }
thead th.sortk2 { background: #cfdef6 !important; }
thead th.sortk3 { background: #e6eefb !important; }

/* 排序序號:保留但淺色小字(業主指示 2026-09-01 二修);下方橫向拉條與檢視框收斂 */
thead th .sortn { color: rgba(20, 40, 80, 0.72); font-size: 0.82em; margin-left: 1px; font-weight: 600; }   /* 序號加深(業主指示 2026-09-02:原 0.38 太淡) */
.twbar.h.bot { margin: 0.125rem 0 0; }

/* 訪視次數展開中=圈圈標記(業主指示 2026-09-02):一眼分得出這筆正展開,收合恢復原樣 */
.stagelink.vopen {
  display: inline-block; padding: 0.05rem 0.5rem;
  border: 2px solid var(--brand); border-radius: 999px;
  background: color-mix(in srgb, var(--brand-2) 22%, #fff);
  font-weight: 700;
}

/* 個案總表：四文件入口固定單排（2026-09-15 核准） */
.packet-actions { display:flex; flex-wrap:nowrap; gap:3px; align-items:center; }
.packet-actions .packet-action { min-width:0; font-family:inherit; cursor:pointer; }
.packet-actions .packet-action:disabled { background:#edf0f2; border-color:#d5dce0; color:#89979d; cursor:default; }
.packet-choice-dialog { max-width:min(560px,90vw); max-height:calc(var(--vvh, 100vh) * 0.8); overflow:auto; border:1px solid #a8c9d5; border-radius:12px; padding:22px; }
.packet-choice-dialog::backdrop { background:#18374466; }
.packet-choice { display:block; width:100%; margin:8px 0; padding:10px; text-align:left; }
.packet-choice-close { margin-top:14px; }

.packet-actions .packet-action[hidden] { display:none; }

.packet-actions .packet-original { background:#e9ddfa; border-color:#8462aa; color:#39214f; }
.packet-actions .packet-current { background:#ffe1b8; border-color:#b97627; color:#583407; }