/* 離返院登記系統 視覺系統(票 01，照意外事件系統的 app.css 起手)
 *
 * 色票、字級、間距、圓角與陰影照設備報修系統(桃紅 #E4007F、米白底 #F7F7F3，跨系統慣例第六節)；
 * 頂欄主選單與手機底部分頁列照公文收文系統；底部分頁列三格(外出中、新增離院、紀錄)，我的選單從頂欄名字按鈕打開。庭芳桃紅只用在「要你動手」的地方(主要按鈕、目前分頁、焦點)。
 * 手機優先：單欄、大觸控區(最小 44px)、整頁捲動(iPhone Safari 不做整頁 fixed 版面)；720px 以上電腦版內容置中、最寬 1040px。
 *
 * 介面對齊鐵律：同一列的輸入框、下拉、按鈕同高同中線(1px 內，Chrome 與 WebKit 都用 scripts/measure-ui.mjs 量)。
 * 單行輸入框、日期、下拉一律寫死高度 --ctl-h 並拿掉瀏覽器原生外觀(下拉箭頭自己畫)：Safari 的下拉不吃最小高度、日期框會自己長高。
 *
 * token 分四組：顏色、字級、間距、圓角與陰影。元件只准用 token，不寫死數值。
 */
:root {
  /* 一、顏色：底與字 */
  --bg: #F7F7F3; --surface: #FFFFFF; --surface-2: #F0F0EA; --surface-3: #E7E7DF;
  --ink: #26302D; --ink-2: #44504B; --muted: #6B7571; --ph: #9DA49F;
  --line: #E2E4DD; --line-2: #CFD3CB;
  /* 品牌：庭芳桃紅(按鈕底用深一階，白字對比 5:1 以上) */
  --brand: #E4007F; --primary: #C8006F; --primary-hover: #A8005D; --primary-soft: #FCE8F2; --on-primary: #FFFFFF;
  /* 按鈕(2026-10-03 加強)：主按鈕用院徽亮桃紅，白字粗體(對比 4.5:1 以上)；次要按鈕白底框線，框線比 --line-2 深一階 */
  --btn-bg: #E4007F; --btn-bg-hover: #C8006F; --on-btn: #FFFFFF; --btn-weight: 800;
  --btn-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 6px 16px rgba(228, 0, 127, .32);
  --btn-line: #A9B0A7;
  /* 狀態(票 02 的狀態標籤用：逾期與已退回紅、已簽名綠、還沒填琥珀、已作廢灰) */
  --urgent: #C0271D; --urgent-soft: #FBE9E7; --on-urgent: #FFFFFF;
  --late: #B42318; --late-soft: #FDECEA; --late-line: #F4C7C2;
  --working: #9A5800; --working-soft: #FFF4DF; --working-line: #F1D9A6;
  --ok: #1D6B45; --ok-soft: #E5F3EB;
  --off: #6B7571; --off-soft: #ECEDE9;
  --focus: rgba(200, 0, 111, .24);
  /* 二、字級(手機基準 16px，不小於 13px) */
  --font: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 13px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 21px; --fs-2xl: 26px;
  /* 三、間距：4 的倍數 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;
  /* 四、圓角與陰影 */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(38, 48, 45, .05), 0 2px 10px rgba(38, 48, 45, .04);
  --shadow-2: 0 2px 4px rgba(38, 48, 45, .06), 0 10px 28px rgba(38, 48, 45, .08);
  --shadow-3: 0 18px 50px rgba(38, 48, 45, .22);
  /* 版面最寬 1040px：頂欄要排系統名稱、三格主選單、名字、切換語言、綁定、登出，印尼文的字比較長(票 01 量過) */
  --wrap: 1040px;
  /* 單行控制項(輸入框、日期、下拉、按鈕)的統一高度：同一列一定同高 */
  --ctl-h: 48px;
  --top-h: 60px;   /* 頂欄高(不含下框線 1px)；捲到某個元素時要讓開這麼多(.step-err 的 scroll-margin-top) */
  color-scheme: light;
}
/* 深色：跟著系統(prefers-color-scheme)，也可以用 data-theme 強制。登入頁(gate-mode)不跟著走，見下方。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151817; --surface: #1D2120; --surface-2: #242928; --surface-3: #2C3230;
    --ink: #ECEFEC; --ink-2: #CBD1CD; --muted: #98A29D; --ph: #6C7571;
    --line: #2C3230; --line-2: #3A413E;
    --brand: #FF4DA6; --primary: #FF5CAD; --primary-hover: #FF85C1; --primary-soft: #3A1B2B; --on-primary: #1B0912;
    --btn-bg: #FF5CAD; --btn-bg-hover: #FF85C1; --on-btn: #1B0912; --btn-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(255, 92, 173, .28);
    --btn-line: #5A635F;
    --urgent: #FF7B6E; --urgent-soft: #3C1A17; --on-urgent: #1B0912;
    --late: #FF8A7E; --late-soft: #3A1B18; --late-line: #5B2A25;
    --working: #F4B860; --working-soft: #372A12; --working-line: #54401C;
    --ok: #6FD19A; --ok-soft: #16301F;
    --off: #98A29D; --off-soft: #262B29;
    --focus: rgba(255, 92, 173, .32);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 8px 24px rgba(0, 0, 0, .35); --shadow-3: 0 18px 50px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151817; --surface: #1D2120; --surface-2: #242928; --surface-3: #2C3230;
  --ink: #ECEFEC; --ink-2: #CBD1CD; --muted: #98A29D; --ph: #6C7571;
  --line: #2C3230; --line-2: #3A413E;
  --brand: #FF4DA6; --primary: #FF5CAD; --primary-hover: #FF85C1; --primary-soft: #3A1B2B; --on-primary: #1B0912;
  --btn-bg: #FF5CAD; --btn-bg-hover: #FF85C1; --on-btn: #1B0912; --btn-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(255, 92, 173, .28);
  --btn-line: #5A635F;
  --urgent: #FF7B6E; --urgent-soft: #3C1A17; --on-urgent: #1B0912;
  --late: #FF8A7E; --late-soft: #3A1B18; --late-line: #5B2A25;
  --working: #F4B860; --working-soft: #372A12; --working-line: #54401C;
  --ok: #6FD19A; --ok-soft: #16301F;
  --off: #98A29D; --off-soft: #262B29;
  --focus: rgba(255, 92, 173, .32);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 8px 24px rgba(0, 0, 0, .35); --shadow-3: 0 18px 50px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ── 基礎 ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* [hidden] 的預設權重最低，任何自己寫的 display 都蓋得過它，所以要 !important */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); font-size: var(--fs-md); line-height: 1.6; color: var(--ink); background: var(--bg);
       min-height: 100vh; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
a.btn:hover { text-decoration: none; }  /* 做成按鈕的連結滑過去不要出現底線 */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.view { max-width: var(--wrap); margin: 0 auto;
        padding: var(--s3) max(var(--s4), env(safe-area-inset-right)) calc(var(--s8) + env(safe-area-inset-bottom)) max(var(--s4), env(safe-area-inset-left)); }

/* ── 頂欄：sticky 黏在上方；整頁照常捲動、不用 fixed，iPhone Safari 的工具列才不會蓋住內容 ──
   中間是主選單(電腦)，右邊「名字｜臉或指紋綁定｜登出」(電腦)或名字按鈕(手機)。斷點 720px 跟其他庭芳系統同一個數字。 */
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, var(--surface)); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.top-in { max-width: var(--wrap); margin: 0 auto; height: var(--top-h); display: flex; align-items: center; gap: var(--s5);
          padding: 0 max(var(--s4), env(safe-area-inset-right)) 0 max(var(--s4), env(safe-area-inset-left)); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; font-size: var(--fs-lg);
         letter-spacing: .02em; min-width: 0; flex: 0 1 auto; }
.brand img { width: 32px; height: 32px; border-radius: 50%; flex: none; display: block; }
/* 院徽與系統名稱是兩個分開的連結：點院徽回入口站(/sso.js 改開系統選單)、點系統名稱回本系統首頁(跨系統鐵律)。
   院徽 32px 配合旁邊 18px 粗體字；點擊範圍撐到 44px，外觀照舊 32px */
.brand a { display: flex; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
.brand a:hover { text-decoration: none; }
/* 院徽連結不准被擠扁(系統名稱太長時只截系統名稱，院徽與字的間距不變) */
.brand-logo { height: 44px; padding: 0 6px; margin: 0 -6px; flex: none; }
.brand-name { height: 44px; }
.brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nav a { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: var(--r-pill);
         color: var(--ink-2); font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; }
.nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-1); }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
         background: var(--ink-2); color: var(--bg); font-style: normal; font-size: 12px; font-weight: 800; line-height: 1; }
.badge.late { background: var(--late); color: #fff; }
.me { margin-left: auto; position: relative; flex: none; display: flex; align-items: center; gap: var(--s2); }
.me-links { display: flex; align-items: center; gap: var(--s4); font-size: var(--fs-sm); white-space: nowrap; }
/* 名字太長時截掉名字，不擠系統名稱 */
.me-links b { color: var(--ink); max-width: 7em; overflow: hidden; text-overflow: ellipsis; }
.me-links a, .me-links button { display: inline-flex; align-items: center; height: 44px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px;
                                background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.me-links a:hover, .me-links button:hover { color: var(--primary); }
/* 切換語言：字會在「Bahasa Indonesia」與「中文」之間換，寬度固定才不會整排跳動(共同驗收：會換字的按鈕寬度固定) */
.me-links .lang-btn { width: 5.5em; justify-content: center; }
/* 登出是表單(只收 POST)：表單本身不佔版面，裡面的按鈕照連結的樣子排 */
.me-links form, .menu form { display: contents; }
.me-btn { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid var(--line-2);
          background: var(--surface); border-radius: var(--r-pill); cursor: pointer; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); max-width: 10em; }
.me-btn > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-btn:hover { border-color: var(--primary); }
@media (min-width: 720px) { .me-btn, .menu { display: none !important; } .brand { flex: none; } }
/* 窄的電腦視窗(平板)：頂欄放不下時先拿掉名字(不影響操作)，主選單間距收一點；scripts/e2e.mjs 量 768、1024、1280 寬都不重疊 */
@media (min-width: 720px) and (max-width: 1023.98px) { .me-links b { display: none; } .nav a { padding: 0 10px; } .top-in { gap: var(--s3); } .me-links { gap: var(--s3); } }
@media (max-width: 719.98px) { .nav { display: none; } .me-links { display: none; } .brand { font-size: var(--fs-md); } .top-in { gap: var(--s3); } }

/* 我的選單(手機)：從頂欄名字按鈕下方打開(底部分頁列只有三格，沒有「我的」)，靠右、不蓋到底部分頁列 */
.menu { position: fixed; z-index: 40; right: max(var(--s3), env(safe-area-inset-right)); width: min(18rem, calc(100vw - 24px));
        top: calc(64px + env(safe-area-inset-top)); background: var(--surface);
        border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: 6px; }
.menu-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu-head b { display: block; }
.menu button, .menu a { display: flex; align-items: center; width: 100%; min-height: 48px; text-align: left; border: 0; background: none; cursor: pointer;
                        padding: 0 12px; border-radius: var(--r-sm); color: var(--ink); font-size: var(--fs-md); }
.menu button:hover, .menu a:hover { background: var(--surface-2); text-decoration: none; }

/* 底部分頁列(手機)：fixed bottom:0，整頁照常捲動；頁面底部多留 padding 給它。每格等寬 */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
          background: color-mix(in srgb, var(--surface) 94%, var(--bg)); border-top: 1px solid var(--line); backdrop-filter: blur(8px);
          padding: 6px max(var(--s2), env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(var(--s2), env(safe-area-inset-left)); }
.tabbar a, .tabbar button { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; height: 52px; padding: 0; border: 0; background: none;
                            color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; border-radius: var(--r-md); cursor: pointer; text-decoration: none; min-width: 0; }
.tabbar span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabbar svg { width: 24px; height: 24px; }
.tabbar a[aria-current="page"] { color: var(--primary); }
.tabbar .badge { position: absolute; top: 2px; left: calc(50% + 6px); }
@media (min-width: 720px) { .tabbar { display: none !important; } }
@media (max-width: 719.98px) { body.has-tabbar .view { padding-bottom: calc(var(--s8) + 64px + env(safe-area-inset-bottom)); } body.has-tabbar .toast { bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* ── 按鈕：主按鈕 .btn 院徽桃紅；次要 .btn.ghost 白底框線(同高同圓角)；破壞性 .btn.danger 紅底。高度寫死 --ctl-h，跟單行輸入框同高 ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--ctl-h); padding: 0 20px;
       border: 0; border-radius: var(--r-pill); cursor: pointer; font-weight: var(--btn-weight); white-space: nowrap; line-height: 1;
       background: var(--btn-bg); color: var(--on-btn); transition: background .15s, transform .06s, box-shadow .15s, border-color .15s;
       box-shadow: var(--btn-shadow); -webkit-appearance: none; appearance: none; }
/* 滑過的樣式只給有滑鼠的裝置：手機點過之後不會一直黏著(票 06 審查修正 11、複審) */
.btn:hover { text-decoration: none; }
@media (hover: hover) { .btn:hover { background: var(--btn-bg-hover); } }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; transform: none; }
.btn.ghost { background: var(--surface); color: var(--ink); border: 1.5px solid var(--btn-line); font-weight: 700; box-shadow: 0 1px 2px rgba(38, 48, 45, .08); }
@media (hover: hover) { .btn.ghost:hover { border-color: var(--btn-bg); background: var(--primary-soft); } }
.btn.danger { background: var(--urgent); color: var(--on-urgent); }
.btn.block { width: 100%; }
.btn svg { width: 20px; height: 20px; flex: none; }
.actions { display: flex; gap: var(--s2); margin-top: var(--s5); }
.actions .btn { flex: 1; }

/* ── 輸入：單行的一律寫死高度、拿掉原生外觀(Safari 的下拉不吃最小高度、日期框會自己長高)；下拉箭頭自己畫 ── */
.field { display: block; }
.field + .field { margin-top: var(--s4); }
.field > span { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
input[type=text], input[type=tel], input[type=date], input[type=time], input[type=number], input[type=search], input[type=email], select {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--ctl-h); margin: 0;
  background-color: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 0 14px; outline: none; font-size: var(--fs-md); line-height: normal; transition: border-color .15s, box-shadow .15s; }
select { padding-right: 40px; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7571' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px 18px; }
/* Safari 的日期與時間框寫死高度後，字會貼在上緣：改成 flex 垂直置中(2026-11-13 WebKit 實測)。
   iPhone 版 WebKit 的原生日期框窄的時候字會被截掉：票 02 的共用日期元件不要直接露出原生日期框(照 ISP 系統的做法)。 */
input[type=date], input[type=time] { display: flex; align-items: center; }
input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type=date]::-webkit-datetime-edit, input[type=time]::-webkit-datetime-edit { padding: 0; }
input[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
textarea { width: 100%; min-height: 96px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
           padding: 10px 14px; outline: none; font-size: var(--fs-md); resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--focus); }
input::placeholder, textarea::placeholder { color: var(--ph); }

/* ── 卡片、提示條、區塊標題 ── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--s5); }
.banner { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-md);
          font-size: var(--fs-sm); background: var(--surface-2); color: var(--ink-2); }
.banner.late { background: var(--late-soft); color: var(--late); }
.banner.ok { background: var(--ok-soft); color: var(--ok); }
.banner svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.sec-title { font-size: var(--fs-sm); font-weight: 800; color: var(--muted); letter-spacing: .06em; margin: 0 0 var(--s3); }

/* ── 頁面(票 01 三頁都是空的；票 06、08 補內容) ── */
.page { margin-top: var(--s4); }

/* ── 空狀態 ── */
.empty { display: grid; justify-items: center; text-align: center; gap: var(--s2); padding: var(--s8) var(--s5);
         background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.empty .art { width: 96px; height: 96px; margin-bottom: var(--s2); }
.empty h3 { font-size: var(--fs-lg); color: var(--ink-2); }

/* ── 登入頁 ──
   版面、配色照人事帳號系統示範站 demo.tinfun.org.tw(各系統登入範本)，只有系統名稱不同。
   示範站只有亮色，所以登入頁不跟著深色模式走：html.gate-mode 時整組色票換成示範站的(app.js 的 門口() 掛上、畫外框() 拿掉)。
   選擇器多掛一個 :root 是為了壓過上面深色模式那條 :root:not([data-theme="light"])。高度一律寫死(介面對齊鐵律)。 */
html.gate-mode:root {
  --bg: #F7F7F3; --surface: #FFFFFF; --ink: #303735; --ink-2: #303735; --muted: #66706D; --ph: #929996;
  --primary: #E4007F; --primary-hover: #B10063; --primary-soft: #FDEEF6; --on-primary: #FFFFFF;
  --btn-bg: #E4007F; --btn-bg-hover: #B10063; --on-btn: #FFFFFF; --btn-weight: 700;
  --btn-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 12px color-mix(in srgb, #E4007F 22%, transparent); --btn-line: #D9DED9;
  --line: #E0E4DF; --line-2: #D9DED9; --focus: rgba(228, 0, 127, .12);
  --ok: #1B5E33; --late: #A32C15;
  color-scheme: light;
}
html.gate-mode body { line-height: 1.7; }
.gate { max-width: 26rem; margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem; text-align: center; }
html.gate-mode .view { padding-top: 0; }
.gate .logo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto .7rem; box-shadow: 0 6px 18px rgba(48, 55, 53, .16); }
.gate h1 { font-size: 1.45rem; margin-bottom: .25rem; line-height: 1.7; }
/* 卡片寬度跟著裡面那條 200px 直欄走(--欄寬 只寫這裡一處，標籤、輸入框、兩顆按鈕、忘記登入碼都切齊它) */
.gate .card { --欄寬: 200px; max-width: 16rem; margin: 0 auto; padding: 1.5rem 1.4rem; text-align: left; border-radius: 16px;
              box-shadow: 0 1px 2px rgba(48, 55, 53, .05), 0 8px 24px rgba(48, 55, 53, .06); }
.gate .field { width: var(--欄寬); margin: 0 auto 1.1rem; }
.gate .field + .field { margin-top: 0; }
.gate .field > span { font-weight: 600; font-size: .9rem; margin-bottom: .4rem; color: var(--muted); line-height: 1.7; }
/* 高度寫死成示範站實際畫出來的高度(票 01 用 Playwright 量示範站：帳號框約 47px、登入碼框 71.6px、兩顆鈕 57.1px)，
   寫死是因為示範站的高度靠 padding 加行高撐，Safari 與 Chrome 會差零點幾像素 */
.gate input[type=text], .gate input[type=tel] { height: 47px; font-size: 1rem; border: 1.5px solid var(--line-2); border-radius: 10px; padding: 0 .75em; }
.gate input:focus { box-shadow: 0 0 0 3px var(--focus); }
/* 四位數字碼：固定寬置中、四個點的 placeholder；左邊多 12px 補 letter-spacing 在最後一字後面多的那格 */
.gate #code { height: 72px; font-size: 28px; letter-spacing: 12px; text-align: center; padding: 0 0 0 12px; border-width: 2px; border-radius: 12px; }
/* 登入那一列：左半「登入」、右半臉或指紋的圖示鈕，兩顆同色同高；忘記登入碼是右下角一行底線文字 */
.gate .btn { font-weight: 600; box-shadow: 0 2px 8px rgba(177, 0, 99, .22); }
.gate .login-actions { display: flex; gap: .6rem; width: var(--欄寬); margin: 0 auto; }
.gate .login-actions .btn { flex: 1 1 0; height: 57px; padding: 0; font-size: 1.05rem; }
.gate .login-actions .btn svg { width: 30px; height: 30px; }
.gate #passkey[aria-busy="true"] { opacity: .45; }
.gate .forgot { width: var(--欄寬); margin: 1rem auto 0; text-align: right; font-size: .875rem; }
.gate .forgot a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
/* 登入頁的彈窗照示範站：置中、上緣色帶就是語氣(綠＝成功、紅＝失敗)，一顆「關閉」 */
html.gate-mode .modal-bg { background: rgba(48, 55, 53, .45); align-items: center; padding: 1.25rem; }
.modal.gate-modal { max-width: 19rem; padding: 1.5rem 1.4rem; text-align: center; border-radius: 16px; border-top: 5px solid var(--line);
                    box-shadow: 0 12px 40px rgba(48, 55, 53, .28); }
.modal.gate-modal.ok { border-top-color: var(--ok); }
.modal.gate-modal.no { border-top-color: var(--late); }
.modal.gate-modal .modal-msg { font-size: 1rem; line-height: 1.75; margin-bottom: 1.25rem; word-break: break-word; }
.modal.gate-modal .btn { height: 52px; font-size: 1.05rem; padding: 0 1.6em; }

/* ── 彈窗、提示、載入 ── */
.modal-bg { position: fixed; inset: 0; z-index: 50; background: rgba(20, 23, 22, .45); display: grid; place-items: center; padding: var(--s4); }
.modal { width: 100%; max-width: 420px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: var(--s6) var(--s5) var(--s5);
         max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.modal p { font-size: var(--fs-md); line-height: 1.7; }
@media (max-width: 480px) { html:not(.gate-mode) .modal-bg { align-items: end; padding: 0; }
  html:not(.gate-mode) .modal { max-width: none; border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom)); } }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60;
         background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: var(--r-pill); font-size: var(--fs-sm);
         font-weight: 700; box-shadow: var(--shadow-3); max-width: calc(100vw - 32px); }
.toast.has-act { display: flex; align-items: center; gap: var(--s2); padding: 0 6px 0 20px; min-height: 52px; }
.toast-msg { flex: 1 1 auto; min-width: 0; line-height: 1.4; padding: 8px 0; }
/* 提示裡的動作鈕(例如「復原」)：深底上的淺色字，可點範圍 44px 高 */
.toast-act { flex: none; height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--primary-soft);
  font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.toast-act:active { background: rgba(255, 255, 255, .14); }
@media (hover: hover) { .toast-act:hover { background: rgba(255, 255, 255, .14); } }
.loading { display: grid; place-items: center; min-height: 160px; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: 2s !important; } }

/* ══ 共用元件(票 02，public/ui.js) ══════════════════════════
 * 後面每張票的畫面都用這些，不要另外再做一份。高度一律對齊 --ctl-h(48px)或 44px 可點區，同一列同高同中線。 */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.invisible { visibility: hidden; }
.field-label { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); margin-bottom: 6px; padding: 0; }
.field-err { display: block; margin-top: var(--s1); color: var(--working); font-weight: 700; font-size: var(--fs-sm); }
input.bad, select.bad, textarea.bad { border-color: var(--working); box-shadow: 0 0 0 3px var(--working-line); }
fieldset { border: 0; min-width: 0; margin: 0; padding: 0; }
/* 只有圖示的方形鈕(跟輸入框同高)；小一號的文字鈕(44px，例如存檔提示的再試一次) */
.btn.icon { width: var(--ctl-h); padding: 0; flex: none; }
.btn.sm { height: 44px; padding: 0 14px; font-size: var(--fs-sm); }

/* 日期時間：文字框加「選日期」「選時間」方形鈕，原生框蓋在鈕上、看不見(iPhone WebKit 窄的原生框會截字、Safari 的日期框會自己長高) */
.dt-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.dt-part { display: flex; align-items: center; gap: var(--s2); }
.dt-part input[type=text] { font-variant-numeric: tabular-nums; }
.dt-date input[type=text] { width: 9.5em; }
.dt-time input[type=text] { width: 5.5em; }
/* 手機：日期與時間同一列放得下(日期框比時間框寬)，文字框跟著欄寬縮放 */
@media (max-width: 719.98px) {
  .dt-row.two { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s2); }
  .dt-row.two .dt-part input[type=text] { width: auto; flex: 1 1 auto; min-width: 0; padding: 0 10px; }
}
.dt-btn { position: relative; overflow: hidden; border-radius: var(--r-md); }
.dt-btn svg { width: 22px; height: 22px; }
.dt-btn input[type=date], .dt-btn input[type=time] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
  border: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.dt-part.off { opacity: .45; }
.dt-part.off input[type=text] { background: var(--surface-2); }
.dt-part.off .btn { box-shadow: none; cursor: default; }
.dt-unknowns { display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin-top: var(--s1); }

/* 勾選框與圓圈：自己畫(各家原生大小不一)；跟字同一條中線，整列 44px 以上可點 */
.check { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; cursor: pointer; color: var(--ink); font-size: var(--fs-md); line-height: 1.3; }
input[type=checkbox], input[type=radio] { -webkit-appearance: none; appearance: none; display: block; flex: none; width: 22px; height: 22px; margin: 0; cursor: pointer;
  border: 1.5px solid var(--btn-line); background: var(--surface) no-repeat center / 16px 16px; transition: background-color .12s, border-color .12s, box-shadow .12s; }
input[type=checkbox] { border-radius: 6px; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:checked { background-color: var(--primary); border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9'/%3E%3C/svg%3E"); }
input[type=radio]:checked { border-color: var(--primary); box-shadow: inset 0 0 0 5px var(--surface); background-color: var(--primary); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* 單選與複選：一顆一顆的大選項(48px 高，整顆可點)，選中的換成淡色底加主色框；一列放不下就換行 */
.opts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.opt { display: inline-flex; align-items: center; gap: 10px; height: var(--ctl-h); padding: 0 16px 0 14px; border: 1.5px solid var(--line-2);
  border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-weight: 700; line-height: 1.2; cursor: pointer; white-space: nowrap;
  transition: border-color .12s, background-color .12s; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .opt:hover { border-color: var(--primary); } }
.opt.on { border-color: var(--primary); background: var(--primary-soft); }
.opt:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--focus); }
.opt input:focus-visible { outline: none; }
.opts-field.bad .opt { border-color: var(--working); }

/* 狀態膠囊：外出中琥珀(進行中)、已返院綠、草稿中性、未返院結束深灰、作廢淡灰。
   標記：逾時實心紅最搶眼、待跟進淡紅、外傷待對應琥珀框。圖示加字，不只靠顏色 */
.tag { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 8px; border-radius: var(--r-pill); border: 1px solid transparent;
  font-size: var(--fs-xs); font-weight: 800; line-height: 1; white-space: nowrap; vertical-align: middle; }
.tag svg { width: 16px; height: 16px; flex: none; }
.tag-draft { background: var(--surface-2); color: var(--ink-2); border-color: var(--line-2); }
.tag-out { background: var(--working-soft); color: var(--working); border-color: var(--working-line); }
.tag-returned { background: var(--ok-soft); color: var(--ok); }
.tag-ended { background: var(--surface-3); color: var(--ink-2); }
.tag-void { background: var(--off-soft); color: var(--off); text-decoration: line-through; text-decoration-thickness: 1px; }
.flag-overdue { background: var(--urgent); color: var(--on-urgent); }
.flag-followup { background: var(--late-soft); color: var(--late); border-color: var(--late-line); }
.flag-injury_pending { background: var(--surface); color: var(--working); border-color: var(--working); }
.tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.overdue-text { color: var(--late); font-weight: 800; font-variant-numeric: tabular-nums; }

/* 存檔提示：存檔中(轉圈)、已存檔 幾點幾分(綠勾)、沒有存到(紅)加「再試一次」、別人剛改過(琥珀) */
.save-hint { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s2); min-height: 44px; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.save-hint svg { width: 18px; height: 18px; flex: none; }
.save-hint.ok { color: var(--ok); }
.save-hint.bad { color: var(--late); }
.save-hint.stale { color: var(--working); }
.spin { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--primary); animation: spin .8s linear infinite; }

/* 分步驟填寫的外框：上面圓點(做完的打勾色、目前的主色)與「第幾步」、這一步的標題；下面上一步、下一步。
   兩顆按鈕寬度固定(會換字：下一步到最後變完成，印尼文更長)，第一步的上一步只是看不見、位置留著，下一步不會跳位 */
.steps { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--s5); }
.steps-head { margin-bottom: var(--s4); }
.steps-dots { display: flex; align-items: center; gap: var(--s2); list-style: none; margin-bottom: var(--s2); }
.steps-dots li { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--muted);
  font-size: var(--fs-xs); font-weight: 800; font-variant-numeric: tabular-nums; }
.steps-dots li.done { background: var(--ok-soft); color: var(--ok); }
.steps-dots li.now { background: var(--primary); color: var(--on-primary); }
.steps-count { font-size: var(--fs-sm); color: var(--muted); font-weight: 700; }
.steps-title { font-size: var(--fs-xl); font-weight: 800; line-height: 1.35; }
.steps-body .step > .field + .field, .steps-body .step > .field + fieldset, .steps-body .step > fieldset + .field, .steps-body .step > fieldset + fieldset { margin-top: var(--s5); }
/* 會換字的按鈕寬度固定(票 09 審查修正)：手機兩欄 minmax(0, 1fr) 不被長字撐開(印尼文「Selesai catat kembali」)，字太長就在按鈕裡換行，高度不變 */
.steps-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); margin-top: var(--s6); }
@media (min-width: 720px) { .steps-foot { grid-template-columns: 11em 11em; justify-content: space-between; } }
.steps-btn { width: 100%; min-width: 0; padding: 0 12px; white-space: normal; text-align: center; line-height: 1.15; overflow: hidden; }

/* 元件展示頁(只在本機開發，public/dev/)：給對齊量測與 e2e */
.dev-sec + .dev-sec { margin-top: var(--s6); }
.dev-card .field + .field, .dev-card .field + fieldset, .dev-card fieldset + .field, .dev-card fieldset + fieldset { margin-top: var(--s5); }
.dev-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.dev-row + .dev-row { margin-top: var(--s3); }
.dev-card > fieldset + .dev-row, .dev-card > .field + .dev-row { margin-top: var(--s4); }
.dev-row > input, .dev-row > select { width: 10em; }
/* 量同一列用的兩列：手機也不換行(輸入框跟著縮) */
.dev-row.dev-fit { flex-wrap: nowrap; }
.dev-row.dev-fit > input, .dev-row.dev-fit > select { flex: 1 1 0; min-width: 0; width: auto; }
.dev-row.dev-fit > .btn { flex: none; }
.dev-list-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.dev-list-row b { font-size: var(--fs-lg); }
.dev-out { margin-top: var(--s6); padding: var(--s3); background: var(--surface-2); border-radius: var(--r-md); font-family: var(--mono); font-size: var(--fs-xs);
  white-space: pre-wrap; word-break: break-all; }
.dev-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) 0; }
.dev-top h1 { font-size: var(--fs-xl); }

/* ══ 管理頁(票 03，public/admin.js)：只在電腦 ══════════════════
 * 左邊一排分頁(管理者名單、修改紀錄、查看紀錄；之後的票往下加)，右邊內容。照設備報修系統的管理頁版面。
 * 標題列右邊放這一頁的主要動作(動作在最上面)；表格可讀：表頭小字灰、列高 52px、滑過換底色。
 * 同一列的輸入框、日期、按鈕一律 --ctl-h 高、同中線(scripts/measure/03-admin.json 量)。 */
.me-links a[aria-current="page"] { color: var(--primary); font-weight: 800; }
.adm { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s7); margin-top: var(--s5); align-items: start; }
@media (max-width: 1023.98px) { .adm { grid-template-columns: 172px minmax(0, 1fr); gap: var(--s5); } }
.adm-side { position: sticky; top: calc(60px + var(--s5)); }
.adm-title { font-size: var(--fs-sm); font-weight: 800; color: var(--muted); letter-spacing: .06em; margin: 0 0 var(--s3) var(--s3); }
.adm-nav { display: grid; gap: 2px; }
.adm-link { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px 0 12px; border-radius: var(--r-md);
            color: var(--ink-2); font-weight: 700; font-size: var(--fs-sm); }
.adm-link svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.adm-link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.adm-link.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.adm-link.on svg { color: var(--primary); }
.adm-link.on::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 3px; background: var(--primary); }
.adm-main { min-width: 0; }
.adm-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); min-height: var(--ctl-h); margin-bottom: var(--s5); }
.adm-head h1 { font-size: var(--fs-2xl); line-height: 1.25; letter-spacing: .01em; }
.adm-head .btn { flex: none; }
#admNote:not(:empty) { margin-bottom: var(--s4); }
.adm-empty { display: grid; justify-items: center; text-align: center; gap: var(--s2); padding: var(--s7) var(--s5);
             background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.adm-empty .art { width: 72px; height: 72px; margin-bottom: var(--s1); }
.adm-empty h3 { font-size: var(--fs-lg); color: var(--ink-2); }
/* 表格：外框可以橫向捲動(窄的電腦表格比外框寬時，右邊的欄捲過去看得到，不會被切掉)；圓角照樣裁 */
.tbl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
            overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; position: relative; }
/* position: relative：表頭裡給螢幕報讀的隱藏字(.sr，絕對定位)以外框為準，跟著被裁，不會撐出整頁的橫向捲軸 */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl th, .tbl td { text-align: left; padding: 0 var(--s4); height: 52px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl th { height: 40px; background: var(--surface-2); font-size: var(--fs-xs); font-weight: 800; color: var(--muted); letter-spacing: .04em; white-space: nowrap; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.tbl td small { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.3; }
.tbl .nowrap { white-space: nowrap; }
.tbl th.act, .tbl td.act { width: 1%; text-align: right; white-space: nowrap; }
/* 管理者名單：頭像圓圈加姓名，旁邊「你」「停用」小膠囊；移除鈕寬度固定(印尼文 Hapus 與中文同寬，不跳)。
 * 欄寬固定、每格不換行(長名字不會把其他欄擠成一字一行、列高不變)：部門、加入時間、加入者給固定寬，姓名吃剩下的，
 * 太長就省略(滑過看完整的，title)；「你」「停用」膠囊不縮。外框比表格窄(768 寬)時橫向捲動 */
.adm-tbl { table-layout: fixed; min-width: 720px; }
.adm-tbl th, .adm-tbl td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-tbl .c-dept { width: 120px; }
.adm-tbl .c-added { width: 172px; }
.adm-tbl .c-by { width: 164px; }
.adm-tbl th.act { width: 132px; }
.adm-tbl td.act { overflow: visible; }
.adm-tbl .who { display: flex; max-width: 100%; }
.adm-tbl .who b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.adm-tbl .who .tag { flex: none; }
.who { display: inline-flex; align-items: center; gap: var(--s3); min-width: 0; }
.who b { font-size: var(--fs-md); color: var(--ink); white-space: nowrap; }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%;
          background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: var(--fs-sm); line-height: 1; }
.tag-me { background: var(--surface-2); color: var(--ink-2); border-color: var(--line-2); height: 24px; padding: 0 8px; }
.tag-off { background: var(--off-soft); color: var(--off); border-color: var(--line-2); height: 24px; padding: 0 8px 0 6px; }
.tag-off svg { width: 14px; height: 14px; }
/* 測試身分(中央的虛構同仁)：跟中央頂端色帶同一個黃，一眼看得出不是真人 */
.tag-test { background: #FFF1C7; color: #6B4E00; border-color: #F2CF66; height: 24px; padding: 0 8px; }
.adm-tbl tr[data-off] .avatar { background: var(--off-soft); color: var(--off); }
.adm-tbl tr[data-off] .who b { color: var(--muted); }
.adm-tbl tr.pending { opacity: .5; }
.rm-btn { width: 6.5em; }
.rm-btn:hover { border-color: var(--urgent); background: var(--urgent-soft); color: var(--urgent); }
/* 修改紀錄、查看紀錄：欄寬固定，細節吃剩下的寬度(1280 寬時是最寬的一欄)並自動換行；時間分兩行(日期、時分)，身分寫在同仁底下(管理者用主色)。
 * 換行只在字與字之間(印尼文不從字中間切)，一個字比欄還寬才切。表格最窄 750px：外框更窄(1000px 以下的電腦)就橫向捲動，細節欄不被切掉 */
.audit-tbl, .views-tbl { table-layout: fixed; }
.audit-tbl { min-width: 750px; }
.audit-tbl th, .audit-tbl td, .views-tbl th, .views-tbl td { padding: 10px 12px; height: auto; min-height: 52px; overflow-wrap: break-word; word-break: normal; }
.audit-tbl th, .views-tbl th { height: 40px; padding-top: 0; padding-bottom: 0; overflow: hidden; text-overflow: ellipsis; }
.c-at { width: 108px; white-space: nowrap; }
.c-who { width: 120px; }
.c-act { width: 124px; }
.c-no { width: 116px; white-space: nowrap; }
.c-to { width: 136px; }
.c-detail { color: var(--ink-2); }
.c-detail.undecodable { color: var(--muted); font-style: italic; }
.views-tbl .c-who { width: auto; }
.tbl td small.role-admin { color: var(--primary); font-weight: 700; }
/* 篩選列：開始日期、結束日期、紀錄單號、查詢，一列排開，底部對齊(標籤在上面)，輸入框與按鈕同高同中線 */
.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3) var(--s4); padding: var(--s4) var(--s5);
          background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.filter .field + .field { margin-top: 0; }
/* 日期框自己的錯誤字浮在框下面，不把同一列撐高(其他元件才會留在同一條中線) */
.filter .field { position: relative; }
.filter .field-err { position: absolute; left: 0; top: 100%; white-space: nowrap; }
.filter .dt-date input[type=text] { width: 8.6em; }
.filter-no { width: 11em; }
.filter-no input { font-variant-numeric: tabular-nums; }
.filter-no input.bad { border-color: var(--working); box-shadow: 0 0 0 3px var(--working-line); }
.filter-go { width: 6.5em; margin-left: auto; }
.filter-go[aria-busy="true"] { opacity: .6; }
.filter-err { margin-top: var(--s2); }
.res { margin-top: var(--s5); }
/* 篩選條件填錯：上一次的結果是舊條件的，筆數拿掉、表格淡掉 */
.res.stale .res-head { visibility: hidden; }
.res.stale .tbl-card, .res.stale .adm-empty { opacity: .4; }
.res-head { display: flex; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s2) var(--s1); font-size: var(--fs-sm); color: var(--ink-2); }
.res-more { color: var(--working); font-weight: 700; }
/* 從在職名冊加人(勾選視窗)：寬一點的彈窗，上面搜尋、中間可捲動的清單、下面已選幾位與按鈕 */
.modal.wide { max-width: 560px; display: flex; flex-direction: column; gap: var(--s4); }
.modal-title { font-size: var(--fs-xl); line-height: 1.3; }
.search-box { position: relative; display: block; }
.search-box svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-box input { padding-left: 44px; }
.pick-list { display: grid; align-content: start; gap: 2px; height: min(52vh, 420px); overflow-y: auto; overscroll-behavior: contain;
             border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px; background: var(--surface); }
.pick { display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding: 0 var(--s3); border-radius: var(--r-sm); cursor: pointer; }
.pick:hover { background: var(--surface-2); }
.pick:has(input:checked:not(:disabled)) { background: var(--primary-soft); }
.pick:has(input:checked:not(:disabled)) .avatar { background: var(--surface); }
.pick.on-list { cursor: default; color: var(--muted); }
.pick.on-list input { opacity: .35; }
.pick-name { font-weight: 700; white-space: nowrap; }
.pick-dept { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pick .tag { margin-left: auto; }
.pick .tag + .tag { margin-left: 0; }   /* 測試身分加已是管理者：兩個膠囊一起靠右 */
.pick-wait { display: grid; justify-items: center; gap: var(--s2); padding: var(--s6) 0; color: var(--muted); font-size: var(--fs-sm); }
.pick-wait .loading { min-height: 0; }
.pick-none { padding: var(--s6) 0; text-align: center; color: var(--muted); }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.picked { color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.modal-btns { display: flex; justify-content: flex-end; gap: var(--s2); }
.modal-btns .btn { min-width: 6.5em; }
.pick-go { width: 8.5em; }
.confirm-msg { margin-bottom: var(--s5); }

/* ── 票 04：照片(public/photo.js)：拍照區、照片格子、並排對照、放大看 ──
   照片一律 object-fit: contain 放在固定比例(3:4)的框裡：直式、橫式都完整顯示，不裁切；空的地方是淺灰底。
   拍照鈕跟標題、張數同一列同中線；格子下面一列是狀態字加刪除鈕(44px)，同一條中線。合併時這段照原樣留在檔尾即可。 */
.ph-area + .ph-area { margin-top: var(--s6); }
.ph-head { display: flex; align-items: center; gap: var(--s3); min-height: var(--ctl-h); }
.ph-title { font-weight: 800; font-size: var(--fs-md); color: var(--ink); line-height: 1.3; }
.ph-count { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.3; }
.ph-cam { margin-left: auto; flex: none; cursor: pointer; }
.ph-cam.is-off { opacity: .45; cursor: default; box-shadow: none; }
.ph-cam:focus-within { box-shadow: 0 0 0 4px var(--focus); }
.ph-msg { margin-top: var(--s2); color: var(--working); font-weight: 700; font-size: var(--fs-sm); }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.ph-grid:empty { display: none; }
.ph-tile { margin: 0; display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.ph-tile[data-state="failed"], .ph-tile[data-state="stale"] { border-color: var(--late-line); }
.ph-view { display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; background: var(--surface-3); cursor: zoom-in; }
.ph-view img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ph-view[data-ph-bad] { cursor: default; }
.ph-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 52px; padding: var(--s1) var(--s1) var(--s1) var(--s2); }
.ph-state { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; color: var(--muted); }
.ph-state svg { width: 16px; height: 16px; flex: none; }
.ph-tile[data-state="done"] .ph-state { color: var(--ok); }
.ph-tile[data-state="failed"] .ph-state, .ph-tile[data-state="stale"] .ph-state { color: var(--late); }
.btn.icon.ph-del { width: 44px; height: 44px; }
/* 並排對照：左邊離院、右邊返院，iPhone 寬度一欄約 170px，點了放大看 */
.ph-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.ph-col { display: grid; align-content: start; gap: var(--s2); min-width: 0; }
.ph-col-title { font-size: var(--fs-sm); font-weight: 800; color: var(--ink-2); text-align: center; line-height: 1.4; }
/* 框線用 box-shadow 畫，不佔版面：WebKit 在有 border 的 aspect-ratio 框裡算 height 100% 會多 2px，照片底部被切掉一條 */
.ph-cmp { box-shadow: 0 0 0 1px var(--line); border-radius: var(--r-md); overflow: hidden; }
.ph-none { padding: var(--s5) var(--s2); text-align: center; color: var(--muted); font-size: var(--fs-sm); background: var(--surface-2); border-radius: var(--r-md); }
/* 放大看：整頁蓋一層，點任何地方或按 Esc 關 */
.ph-lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(10, 12, 11, .92); cursor: zoom-out; }
.ph-lightbox img { position: absolute; top: max(env(safe-area-inset-top), 64px); bottom: max(env(safe-area-inset-bottom), 16px); left: 12px; right: 12px;
  width: calc(100% - 24px); height: calc(100% - max(env(safe-area-inset-top), 64px) - max(env(safe-area-inset-bottom), 16px)); object-fit: contain; }
.ph-close { position: absolute; top: max(env(safe-area-inset-top), 8px); right: 12px; }
/* 照片展示頁的 logout 表單：按鈕跟同一列其他按鈕同一條中線(表單本身不佔版面) */
.dev-row > form { display: contents; }

/* ══ 手寫簽名(票 05，public/sign-pad.js) ══════════════════════
 * 簽名框(畫布)固定 5:2(轉向、視窗變寬照比例重畫，不變形)，最寬 640px。框裡 touch-action: none：手指在框裡畫，頁面不會跟著捲、不會縮放。
 * 下方一列：錯誤字(還沒簽)與「清除重簽」同一條中線。簽名卡：段名與狀態膠囊同一條中線，簽署人、承辦人員、時間各一列。 */
.sign-box { position: relative; width: 100%; max-width: 640px; background: var(--surface);
  border: 1.5px dashed var(--btn-line); border-radius: var(--r-md); overflow: hidden; touch-action: none; overscroll-behavior: contain; }
.sign-box.err { border-color: var(--working); box-shadow: 0 0 0 3px var(--working-line); }
/* 比例放在畫布本身(不放外框)：外框有邊線，比例放外框的話畫布會隨大小差一點點，轉向重畫就會些微變形 */
.sign-pad { display: block; width: 100%; height: auto; aspect-ratio: 5 / 2; touch-action: none; cursor: crosshair;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.sign-line { position: absolute; left: 8%; right: 8%; bottom: 22%; border-bottom: 1px solid var(--line-2); pointer-events: none; }
.sign-foot { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); max-width: 640px; min-height: 44px; }
.sign-foot .field-err { margin: 0; flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.sign-clear { margin-left: auto; flex: none; }

.sign-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); }
.sign-card + .sign-card { margin-top: var(--s3); }
.sign-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.sign-card-head b { font-size: var(--fs-lg); line-height: 28px; }
.sign-ok { background: var(--ok-soft); color: var(--ok); }
.sign-changed, .sign-image_missing { background: var(--late-soft); color: var(--late); border-color: var(--late-line); }
.sign-corrected { background: var(--working-soft); color: var(--working); border-color: var(--working-line); }
.sign-img-box { margin-top: var(--s3); max-width: 360px; aspect-ratio: 5 / 2; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff;
  display: grid; place-items: center; overflow: hidden; }
.sign-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sign-img-miss { color: var(--muted); font-size: var(--fs-sm); }
.sign-unsigned { background: var(--working-soft); color: var(--working); border-color: var(--working-line); }
/* 名稱欄寬照最長的那個(印尼文比較長)，名稱與值同一條中線 */
.sign-meta { margin: var(--s3) 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: var(--s1) var(--s3); line-height: 1.5; }
.sign-meta-row { display: contents; }
.sign-meta dt { color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.sign-meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* 狀態膠囊的字太長(窄螢幕、印尼文)就換行，不撐出橫向捲軸 */
.sign-card-head .sign-tag { height: auto; min-height: 28px; max-width: 100%; }
.sign-card-head .sign-tag > span { white-space: normal; line-height: 1.3; padding: 3px 0; }
/* 手機：段名一列、狀態膠囊下一列(長的膠囊放不下同一列，每張卡一樣排，不會有的換行有的不換) */
@media (max-width: 519.98px) { .sign-card-head { flex-direction: column; align-items: flex-start; gap: var(--s1); } }

/* ══ 新增離院與離院草稿(票 06，public/departure-page.js) ══════════════
 * 單行輸入框、按鈕一律 --ctl-h(48px)、同一列同中線(scripts/measure/06-departure.json 量)。畫面只放欄位與按鈕，不放說明文字。 */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; min-height: var(--ctl-h); margin-bottom: var(--s5); }
.page-title { font-size: var(--fs-xl); font-weight: 800; line-height: 1.3; }
.page-head .btn svg { width: 22px; height: 22px; }
@media (max-width: 719.98px) { .page-head > .btn { flex: 1 1 100%; } }

/* 草稿清單：一張一張的卡片(整張可點)，姓名放大、生活班同一列，下面單號與最後修改(區塊標題已經是「草稿」，卡片不再放草稿膠囊) */
.draft-list { display: grid; gap: var(--s3); }
.draft-card { display: grid; gap: var(--s2); padding: var(--s4) var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.draft-card:hover { text-decoration: none; }
@media (hover: hover) { .draft-card:hover { border-color: var(--primary); } }
.draft-card-top { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; min-height: 32px; }
.draft-card-name { font-size: var(--fs-lg); font-weight: 800; line-height: 1.3; }
.draft-card-class { font-size: var(--fs-sm); color: var(--muted); font-weight: 700; }
.draft-card-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
/* 這支手機上還在送完成離院的那一張(票 07 審查修正)：紅框，姓名下面一列紅字「還沒完成，送出中」(圖示加字，不只靠顏色；自成一列，手機不會擠到換行) */
.draft-card.is-sending { border-color: var(--late); box-shadow: 0 0 0 1px var(--late) inset, var(--shadow-1); }
.draft-card-sending { justify-self: start; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 8px; border-radius: var(--r-pill);
  background: var(--late-soft); color: var(--late); font-size: var(--fs-sm); font-weight: 800; white-space: nowrap; }
.draft-card-sending svg { width: 16px; height: 16px; flex: none; }

/* 選服務對象(彈窗)：上面搜尋、中間依生活班分組的名單(可捲動)、下面取消 */
.modal.res-modal { max-width: 480px; }
.modal-title { font-size: var(--fs-lg); font-weight: 800; margin-bottom: var(--s3); }
.res-list { margin-top: var(--s3); max-height: min(52vh, 420px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: var(--r-md); }
.res-group + .res-group { border-top: 1px solid var(--line); }
.res-class { position: sticky; top: 0; z-index: 1; background: var(--surface-2); font-size: var(--fs-xs); font-weight: 800; color: var(--muted); padding: 6px var(--s4); letter-spacing: .04em; }
.res-pick { display: flex; align-items: center; width: 100%; min-height: var(--ctl-h); padding: 0 var(--s4); border: 0; border-top: 1px solid var(--line); background: var(--surface);
  text-align: left; font-size: var(--fs-md); font-weight: 700; cursor: pointer; }
.res-class + .res-pick { border-top: 0; }
.res-pick:focus-visible { background: var(--primary-soft); outline: none; }
@media (hover: hover) { .res-pick:not(:disabled):hover { background: var(--primary-soft); } }
.res-pick[aria-busy="true"] { opacity: .5; }
/* 名字旁的小膠囊：已有草稿標「草稿」(點了接手)；外出中標「外出中」、整顆變淡不能點(審查修正 13) */
.res-pick { gap: var(--s3); }
.res-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-pick .tag { margin-left: auto; height: 24px; padding: 0 8px 0 6px; font-size: var(--fs-xs); }
.res-pick .tag svg { width: 14px; height: 14px; }
.res-pick:disabled { cursor: default; color: var(--muted); }
.res-none { padding: var(--s5) var(--s4); color: var(--muted); text-align: center; }
.res-msg { margin-top: var(--s3); color: var(--late); font-weight: 700; font-size: var(--fs-sm); }

/* 草稿頁上方：服務對象姓名(放大)、生活班與單號；右邊存草稿、放棄草稿。手機兩顆按鈕排到下一列各占一半 */
.draft-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4); flex-wrap: wrap; margin-bottom: var(--s3); }
.draft-who { display: grid; gap: 2px; min-width: 0; }
.draft-name { font-size: var(--fs-2xl); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.draft-sub { font-size: var(--fs-sm); color: var(--muted); font-weight: 700; white-space: pre; font-variant-numeric: tabular-nums; }
.draft-acts { display: flex; gap: var(--s2); }
.draft-acts .btn { min-width: 8.5em; }
@media (max-width: 719.98px) { .draft-acts { flex: 1 1 100%; } .draft-acts .btn { flex: 1 1 0; min-width: 0; } }
.btn.ghost.danger-line { color: var(--late); border-color: var(--late-line); }
@media (hover: hover) { .btn.ghost.danger-line:hover { background: var(--late-soft); border-color: var(--late); } }
#dHint { margin-bottom: var(--s2); }
/* 請確認頁(票 07 審查修正)：姓名只在請確認頁放大顯示一次，上方的姓名列(存草稿、放棄草稿)與存檔提示收起來，離開這一步再出現 */
.page.is-confirm > .draft-head, .page.is-confirm > #dHint { display: none !important; }

/* 每一步：欄位上下排，間距一致；被擋下的原因(下一步前)在這一步最上面 */
/* 被擋下時 scrollIntoView 捲到這裡：上面讓開黏在上方的頂欄(高加下框線 1px)再多 16px，不然 iPhone 上整條躲在頂欄後面(票 06 複審) */
.step-err { margin-bottom: var(--s4); font-weight: 700; scroll-margin-top: calc(var(--top-h) + 1px + 16px); }
.dform > * + * { margin-top: var(--s5); }
.dform .field + .field { margin-top: var(--s5); }
.group-title { font-size: var(--fs-md); font-weight: 800; color: var(--ink); margin-bottom: var(--s2); }
/* 選了才出現的欄位：左邊一條線，看得出是上面那一題的下一層 */
.sub-group { border-left: 3px solid var(--line-2); padding-left: var(--s4); }
.sub-group > * + * { margin-top: var(--s5); }
.confirm-group > .field-label { margin-top: 0; }
.confirm-group > .dt, .confirm-group > .check { margin-top: var(--s4); }

/* 接送人、致電的家屬：上面以前填過的人(點了帶入)，下面姓名、關係、電話。電腦三格一列，手機一格一列 */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-bottom: var(--s4); }
.chip-row { display: inline-flex; align-items: center; gap: var(--s2); max-width: 100%; }
.chip { display: inline-flex; align-items: center; gap: var(--s2); height: var(--ctl-h); padding: 0 var(--s4); max-width: 100%; min-width: 0;
  border: 1.5px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--ink); cursor: pointer; line-height: 1.2; }
.chip b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip span { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
@media (hover: hover) { .chip:hover { border-color: var(--primary); } }
.chip.on { border-color: var(--primary); background: var(--primary-soft); }
/* 隱藏鈕：看起來是 26px 的小圓叉(淡灰)，可點範圍 44px 正方形；跟人名鈕之間留 8px，加上圓叉四周的空白，看起來分得開 */
.chip-hide { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer; -webkit-appearance: none; appearance: none; }
.chip-x { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-2);
  transition: background .15s, color .15s, border-color .15s; }
.chip-x svg { width: 14px; height: 14px; }
.chip-hide:active .chip-x { background: var(--late-soft); color: var(--late); border-color: var(--late-line); }
@media (hover: hover) { .chip-hide:hover .chip-x { background: var(--late-soft); color: var(--late); border-color: var(--late-line); } }
.chip-new svg { width: 18px; height: 18px; }
.trio { display: grid; gap: var(--s4); }
.trio > .field + .field { margin-top: 0; }
@media (min-width: 720px) { .trio { grid-template-columns: 1.2fr 1fr 1.2fr; gap: var(--s3); } }
/* 包數(窄)與哪幾餐並排：手機也同一列 */
.pair { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: var(--s3); }
.dform .pair > .field + .field { margin-top: 0; }

/* 出門前檢查五項：一項一列，整列可點，勾選框跟字同一條中線(字長會換行) */
.checks-field .check-row { display: flex; width: 100%; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.checks-field .check-row:last-child { border-bottom: 0; }
.checks-field .check-row span { line-height: 1.5; }

/* ══ 確認與簽名、完成離院(票 07，public/departure-page.js) ══════════════
 * 請確認頁：服務對象姓名放大(雙方一起看，Q32)，下面這張紀錄的內容(名稱與值同一條中線；手機名稱在上、值在下)、告知文字、聲明、接送人簽名。
 * 送出中：紅色提示「還沒完成，請不要讓接送人離開」加轉圈，按鈕停用、簽名框鎖住。完成畫面：綠勾、姓名、單號、離院時間，兩顆按鈕同高同中線。 */
.cf-who { display: grid; justify-items: center; gap: var(--s1); text-align: center; padding: var(--s5) var(--s4); margin-bottom: var(--s5);
  background: var(--primary-soft); border-radius: var(--r-lg); }
.cf-name { font-size: 2.25rem; font-weight: 900; line-height: 1.2; overflow-wrap: anywhere; color: var(--ink); }
.cf-sub { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); white-space: pre; font-variant-numeric: tabular-nums; }
.cf-sec + .cf-sec { margin-top: var(--s5); }
.cf-h { font-size: var(--fs-md); font-weight: 800; color: var(--ink); padding-bottom: var(--s2); margin-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.cf-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: var(--s2) var(--s4); margin: 0; line-height: 1.5; }
.cf-row { display: contents; }
.cf-list dt { color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.cf-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
@media (max-width: 519.98px) { .cf-list { grid-template-columns: minmax(0, 1fr); gap: 0; } .cf-list dd { margin-bottom: var(--s3); } .cf-list .cf-row:last-child dd { margin-bottom: 0; } }
.cf-checks { list-style: none; display: grid; gap: var(--s2); }
.cf-checks li { display: flex; align-items: flex-start; gap: var(--s2); line-height: 1.5; }
.cf-checks svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--ok); }
.cf-photos { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.cf-photos:empty { display: none; }
.cf-ph { display: grid; place-items: center; width: 96px; height: 96px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; cursor: zoom-in; }
.cf-ph img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cf-notice { margin-top: var(--s5); padding: var(--s4); background: var(--surface-2); border-radius: var(--r-md); }
.cf-notice .cf-h { border-bottom-color: var(--line-2); }
.cf-notice p { line-height: 1.75; }
.cf .sign { margin-top: var(--s5); }
.cf .sign > .field-label { font-size: var(--fs-md); font-weight: 800; color: var(--ink); }
.cf-locked { pointer-events: none; opacity: .7; }
.cf-wait { margin-top: var(--s4); align-items: center; border: 1px solid var(--late-line); }
.cf-wait b { font-size: var(--fs-lg); }
.cf-why:empty { display: none; }
.cf-spin { flex: none; width: 24px; height: 24px; border-color: var(--late-line); border-top-color: var(--late); }
/* 紅框裡的出口(連續沒送成、登入過期)：兩顆同高同中線；登入過期時已經停了，不轉圈(紅框留著) */
.cf-wait-in { display: grid; gap: var(--s1); min-width: 0; flex: 1; }
.cf-wait-acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.cf-wait.is-stopped .cf-spin { display: none; }
/* 被 scrollIntoView 捲到紅框時：手機下緣讓開底部分頁列(高 64px 加安全區)再多 16px，不被蓋住 */
@media (max-width: 719.98px) { body.has-tabbar .cf-wait { scroll-margin-bottom: calc(64px + var(--s4) + env(safe-area-inset-bottom)); } }
/* 送出中要離開的確認窗：兩顆同寬 */
.modal.cf-leave-modal { max-width: 480px; }
.steps-btn[aria-busy] { cursor: progress; }
/* 按「下一步」存檔中：按鈕停用並轉圈(票 09 審查修正)；轉圈疊在字前面，不改按鈕寬度 */
.steps-btn[aria-busy]::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .8s linear infinite; }

.done-card { display: grid; justify-items: center; text-align: center; padding: var(--s7) var(--s5) var(--s5); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.done-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.done-icon svg { width: 36px; height: 36px; }
.done-title { margin-top: var(--s3); font-size: var(--fs-xl); font-weight: 800; color: var(--ok); }
.done-name { margin-top: var(--s2); font-size: var(--fs-2xl); font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
.done-meta { display: grid; grid-template-columns: max-content max-content; align-items: center; gap: var(--s1) var(--s4); margin: var(--s4) 0 0; text-align: left; }
.done-row { display: contents; }
.done-meta dt { color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.done-meta dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.done-acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); width: 100%; max-width: 480px; margin-top: var(--s6); }
.done-acts .btn { width: 100%; padding: 0 12px; }

/* ══ 外出中清單、紀錄頁、延後返院與加註(票 08，public/records-page.js) ══════════════
 * 外出中：一張一張的卡片(整張可點進紀錄頁)，姓名放大、生活班與標記同一列，下面離院與預計返回。逾時的左邊紅條、紅框、
 * 「已逾時 1 小時 25 分鐘」紅字加實心紅的逾時膠囊(不只靠顏色)。下面草稿(只有台籍)、待跟進、外傷待對應用草稿清單的卡片樣式。
 * 紀錄頁：上面一塊(姓名放大、狀態與標記、逾時、時間、延後返院)，中間離院段內容(沿用請確認頁的 cf- 樣式)，下面加註與寫加註。 */
.home-head { margin-bottom: var(--s4); }
.home-count { font-size: var(--fs-sm); font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.home-banner { margin-bottom: var(--s4); }
.home-sec { margin-top: var(--s7); }
.out-list { display: grid; gap: var(--s3); }
.out-card { position: relative; display: grid; gap: var(--s2); padding: var(--s4) var(--s5); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; transition: border-color .15s; overflow: hidden; }
.out-card:hover { text-decoration: none; }
@media (hover: hover) { .out-card:hover { border-color: var(--primary); } }
.out-card.late { border-color: var(--late-line); background: var(--late-soft); padding-left: calc(var(--s5) + 4px); }
.out-card.late::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--urgent); }
@media (hover: hover) { .out-card.late:hover { border-color: var(--urgent); } }
.out-top { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; min-height: 32px; }
.out-name { font-size: var(--fs-lg); font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.out-class { font-size: var(--fs-sm); color: var(--muted); font-weight: 700; }
.out-flags { display: inline-flex; flex-wrap: wrap; gap: var(--s1); margin-left: auto; }
.out-flags:empty { display: none; }
.out-late { font-size: var(--fs-md); font-weight: 900; color: var(--late); font-variant-numeric: tabular-nums; }
.out-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.out-card.late .out-meta { color: var(--ink-2); }
.out-due { font-weight: 700; color: var(--ink-2); }
.out-delayed { display: inline-block; margin-left: var(--s1); padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 800; }
.draft-card-top .tag { height: 24px; padding: 0 8px 0 6px; font-size: var(--fs-xs); }
.draft-card-top .tag svg { width: 14px; height: 14px; }

.rec-head { display: grid; gap: var(--s3); }
.rec-top { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.rec-name { font-size: var(--fs-2xl); font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
.rec-tags { display: inline-flex; flex-wrap: wrap; gap: var(--s1); }
.rec-sub { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); white-space: pre-wrap; font-variant-numeric: tabular-nums; }
.rec-late { align-items: center; border: 1px solid var(--late-line); font-size: var(--fs-md); }
.rec-late b { font-weight: 900; font-variant-numeric: tabular-nums; }
.rec-fixed { align-items: center; }
.rec-void b { display: block; }
.rec-void-why { margin: var(--s1) 0 0; font-weight: 400; }
.rec-times dd { font-variant-numeric: tabular-nums; }
.rec-due-late { color: var(--late); }
.rec-was { display: inline-block; margin-left: var(--s2); font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.rec-acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s3); margin-top: var(--s1); }
@media (min-width: 720px) { .rec-acts { display: flex; justify-content: flex-end; } .rec-acts .btn { min-width: 160px; } }
.rec-sec-title { margin-top: var(--s7); }
.rec-photos { display: flex; flex-wrap: wrap; gap: var(--s2); }
.rec-ph { padding: 0; }
.rec-signs { display: grid; gap: var(--s3); }
@media (min-width: 720px) { .rec-signs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
a.tel { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin: 0 -8px; font-weight: 800; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; font-variant-numeric: tabular-nums; }

.notes { display: grid; gap: var(--s3); }
.notes-none { color: var(--muted); font-size: var(--fs-sm); padding: var(--s2) 0; }
.note { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5); display: grid; gap: var(--s2); }
.note.sending { opacity: .6; border-style: dashed; }
.note-head { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; min-height: 28px; }
.note-kind { height: 24px; padding: 0 8px; font-size: var(--fs-xs); background: var(--surface-2); color: var(--ink-2); border-color: var(--line-2); }
.note-kind.note-delay { background: var(--working-soft); color: var(--working); border-color: var(--working-line); }
.note-who { font-weight: 800; }
.note-at { margin-left: auto; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.note-text { line-height: 1.7; overflow-wrap: anywhere; }
.note-pre { white-space: pre-wrap; }
.note-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s1) var(--s4); margin: 0; line-height: 1.6; }
.note-dl dt { color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.note-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 519.98px) { .note-dl { grid-template-columns: minmax(0, 1fr); gap: 0; } .note-dl dd { margin-bottom: var(--s2); } .note-dl dd:last-child { margin-bottom: 0; } }
.note-form { margin-top: var(--s3); }
.note-form .field-err { margin-top: var(--s2); }
.note-acts { display: flex; justify-content: flex-end; margin-top: var(--s3); }
.note-acts .btn { min-width: 140px; }
@media (max-width: 719.98px) { .note-acts .btn { width: 100%; } }

.modal.dl-modal { max-width: 480px; }
.dl-who { font-size: var(--fs-sm) !important; font-weight: 700; color: var(--muted); white-space: pre-wrap; margin-bottom: var(--s4); font-variant-numeric: tabular-nums; }
.dl-form .field + .field { margin-top: var(--s4); }
.dl-form .field > .field-err { margin-top: var(--s1); }
.dl-err { margin-top: var(--s3); }

/* ══ 返院段(票 09，public/return-page.js) ══════════════════════════
 * 上方固定一段提醒(現行紙本)；填寫分五區(返院資料、身體狀態、外出期間狀況、藥品與物品點收、交接)，每區一個標題、欄位上下排。
 * 送回人姓名與關係同一列兩格等寬(手機也同一列)；全身照上面並排對照離院時的全身照。請確認頁收起姓名列、存檔提示與提醒(姓名只放大顯示一次)。 */
.rt-remind { margin-bottom: var(--s4); align-items: flex-start; background: var(--working-soft); color: var(--ink); border: 1px solid var(--working-line); line-height: 1.6; }
.rt-remind svg { color: var(--working); }
.page.is-confirm > #rHint, .page.is-confirm > .rt-remind { display: none !important; }
#rHint { margin-bottom: var(--s2); }
.rt-sec + .rt-sec { margin-top: var(--s7); }
.rt-h { font-size: var(--fs-lg); font-weight: 800; color: var(--ink); padding-bottom: var(--s2); margin-bottom: var(--s4); border-bottom: 2px solid var(--line); }
/* 兩格底部對齊(審查修正)：印尼文「Hubungan dengan penerima layanan」在手機半寬換兩行，輸入框照樣同一條線 */
.pair.rt-who { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.rt-late-msg { font-weight: 700; color: var(--late); line-height: 1.5; }
.rt-info { font-weight: 700; color: var(--ink-2); }
.rt-items > .opts-field + .opts-field { margin-top: var(--s4); }
.rt-dep { margin-top: var(--s3); }
.rt-dep-wound { margin-top: var(--s2); }
/* 送回人未簽名放在簽名框下方，做成次要選項(字小一號、灰字；審查修正) */
.rt-unsigned-pick { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px dashed var(--line); }
.rt-unsigned-pick .check { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; }
/* 印尼文副標：同仁操作的控制項在中文下面加一行印尼文(請確認頁其他內容維持中文) */
.rt-sub { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.rt-unsigned { margin-top: var(--s4); }
.rt-unsigned > * + * { margin-top: var(--s4); }
.rec-follow { border: 1px solid var(--late-line); margin-top: var(--s4); }
.rec-follow-h { margin-bottom: var(--s3); }
.note-kind.note-followup_done { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }

/* ══ 票 10：管理者動作(public/admin.js 的處理紀錄分頁；紀錄頁的作廢、結束、更正加註) ══════════════
 * 處理紀錄：上面一列搜尋框加查詢鈕(同高同中線)，下面表格。欄寬固定、每格不換行(姓名太長就省略，滑過看完整的)；
 * 三顆動作鈕寬度固定(中文與印尼文同寬，換字不跳)，不能做的停用。表格比外框寬(窄的電腦)時外框橫向捲動。
 * 視窗：服務對象選單沿用加人視窗的 .pick 樣式(單選)，下面原因，最下面取消與確定(作廢、結束用紅色)。 */
.la-filter { align-items: center; flex-wrap: nowrap; }
.la-search { flex: 1 1 auto; min-width: 0; }
.la-tbl { table-layout: fixed; min-width: 700px; }
.la-tbl th, .la-tbl td { padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-tbl .c-no { width: 120px; font-variant-numeric: tabular-nums; }
.la-tbl .c-st { width: 132px; }
.la-tbl .c-time { width: 136px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.la-tbl th.act { width: 244px; }
.la-tbl td.act { overflow: visible; }
.la-tbl .c-res b { display: block; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-md); }
.la-tbl td small { overflow: hidden; text-overflow: ellipsis; }
/* 狀態膠囊：印尼文比較長(Selesai tanpa kembali)，膠囊裡的字可以換行，不截掉 */
.la-tbl td.c-st { white-space: normal; }
.la-tbl .c-st .tag { max-width: 100%; height: auto; min-height: 28px; }
.la-tbl .c-st .tag span { white-space: normal; line-height: 1.2; padding: 3px 0; }
.la-tbl tr.pending { opacity: .5; }
.la-acts { display: inline-flex; gap: var(--s2); }
.la-btn { width: 4.9em; padding: 0; }
.la-btn[data-la="void"]:not(:disabled):hover, .la-btn[data-la="end"]:not(:disabled):hover { border-color: var(--urgent); background: var(--urgent-soft); color: var(--urgent); }
.la-modal { max-width: 600px; }
.la-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: calc(-1 * var(--s2)) 0 0; font-size: var(--fs-md); }
.la-who b { font-size: var(--fs-lg); }
.la-who span:not(.tag) { color: var(--muted); }
.la-incident { margin: 0; }
.la-form { display: grid; gap: var(--s4); }
.la-form .field + .field { margin-top: 0; }
.la-pick { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s2); min-width: 0; }
.la-pick legend { font-weight: 700; font-size: var(--fs-sm); color: var(--ink-2); padding: 0; margin-bottom: var(--s2); }
.la-res { height: min(34vh, 280px); }
.la-err { margin: 0; }
.la-ok { min-width: 6.5em; }
/* 處理視窗底部兩顆鈕寬度固定(換語言不變寬：印尼文 Batal、Anulir、Koreksi、Akhiri)，UX 審查修正 */
.la-modal .modal-btns .btn { width: 7.5em; min-width: 0; padding-left: 0; padding-right: 0; }
/* 紀錄頁：作廢、結束、更正的加註 */
.note-kind.note-void { background: var(--off-soft); color: var(--off); border-color: var(--line-2); }
.note-kind.note-ended, .note-kind.note-correction { background: var(--working-soft); color: var(--working); border-color: var(--working-line); }
.note-fix { font-weight: 700; }

/* ══ 票 11：歷史查詢(紀錄分頁)、匯出與列印 ══════════════════════════
 * 篩選列(紀錄分頁與管理頁共用，.filter 的版面)：開始日期、結束日期、服務對象、狀態、查詢(管理頁多一顆匯出 Excel)。
 * 同一列的輸入框、下拉、按鈕一律 --ctl-h 高、底部對齊(標籤在上面)，同中線(scripts/measure/11-history.json 量)。
 * 手機：兩欄格子，日期一列兩格、服務對象整列、狀態與查詢一列。 */
.hist-filter { column-gap: var(--s3); }
/* 印尼文「Semua penerima layanan」放得下(審查修正 9) */
.hist-filter .hist-res { width: 16.5em; }
.hist-filter .dt-date input[type=text] { width: 8.1em; }
.hist-filter .hist-st { width: 10.25em; }
.hist-filter .hist-go { margin-left: 0; }
.hist-filter .xp-dl { width: 10.5em; margin-left: auto; }
.hist-filter .xp-dl[aria-busy="true"] { opacity: .6; }
.hist-filter select { overflow: hidden; white-space: nowrap; }
/* 手機的篩選摘要(審查修正 3)：電腦不顯示；手機預設只顯示摘要加「篩選」鈕，按了才展開篩選列(不打後端)，第一筆在第一個畫面 */
.hist-sum { display: none; }
.hist .hist-toggle { width: 7.5em; flex: none; }
.hist .hist-toggle[aria-expanded="true"] { background: var(--primary-soft); border-color: var(--btn-bg); }
@media (max-width: 719.98px) {
  .hist .page-head { margin-bottom: var(--s3); }
  .hist-sum { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s4); background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
  .hist-sum-t { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .hist:not(.open) .hist-filter { display: none; }
  .hist.open .hist-filter { margin-top: var(--s3); }
  .hist .res { margin-top: var(--s4); }
}
@media (max-width: 719.98px) {
  /* 手機：開始日期、結束日期、服務對象各一整列(日期加選日期鈕兩格並排放不下)，最後一列狀態加查詢 */
  .hist-filter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: var(--s4); gap: var(--s4) var(--s3); }
  .hist-filter > .dt, .hist-filter .hist-res { grid-column: 1 / -1; width: auto; }
  .hist-filter .hist-st { width: auto; }
  .hist-filter .hist-go { width: 6.5em; }
  .hist-filter .dt-part { min-width: 0; flex: 1 1 auto; }
  .hist-filter .dt-date input[type=text] { width: auto; flex: 1 1 auto; min-width: 0; }
}
.hist-res-out .loading { min-height: 120px; }
.hist-banner { margin-bottom: var(--s3); }
.hist-list { display: grid; gap: var(--s3); }
.hist-card { display: grid; gap: var(--s2); padding: var(--s4) var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.hist-card:hover { text-decoration: none; }
@media (hover: hover) { .hist-card:hover { border-color: var(--primary); } }
.hist-card[data-status="void"] { background: var(--surface-2); }
.hist-top { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; min-height: 28px; }
.hist-name { font-size: var(--fs-lg); font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.hist-class { font-size: var(--fs-sm); color: var(--muted); font-weight: 700; }
.hist-tags { display: inline-flex; flex-wrap: wrap; gap: var(--s1); margin-left: auto; }
.hist-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.hist-meta .mono { font-family: var(--mono); }
.res.stale .hist-list, .res.stale > .empty { opacity: .4; }
/* 已更正、逾時返院(審查修正 14) */
.hist-flag { height: 28px; }
.hist-corrected { background: var(--working-soft); color: var(--working); border-color: var(--working-line); }
.hist-late-return { background: var(--late-soft); color: var(--late); border-color: var(--late-line); }

/* 紀錄頁與請確認頁的照片小格(.cf-ph，96px 方格)：原本是 grid，直式照片的 height: 100% 算不出來(格子的列高是 auto)，
 * 照片照原比例長高、被 overflow 切掉下半(票 11 e2e 量到)。改成 flex，100% 才對到 96px，object-fit: contain 直式橫式都完整 */
.cf-ph { display: flex; align-items: center; justify-content: center; }

/* 管理頁「匯出與列印」的表格：欄寬固定，列印鈕寬度固定(中文、印尼文同寬) */
.xp-tbl { table-layout: fixed; min-width: 700px; }
.xp-tbl th, .xp-tbl td { padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-tbl .c-no { width: 124px; }
.xp-tbl .c-st { width: 156px; }
.xp-tbl .c-at { width: 112px; font-variant-numeric: tabular-nums; }
.xp-tbl .c-back { width: 150px; }
.xp-tbl td.c-res b { display: block; overflow: hidden; text-overflow: ellipsis; }
.xp-tbl th.act { width: 112px; }
.xp-tbl td.act { overflow: visible; }
.xp-print { width: 88px; }

/* ── 列印預覽(public/print.js)：整頁蓋一層，中間一張 A4 紙；上面一條工具列(列印、關閉) ── */
body.has-pv { overflow: hidden; }
.pv { position: fixed; inset: 0; z-index: 55; overflow: auto; background: #5E6461; }
.pv-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5);
  background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-1); }
.pv-title { margin-right: auto; font-size: var(--fs-lg); font-weight: 800; }
.pv-wait { color: var(--muted); font-size: var(--fs-sm); }
.pv-wait[hidden] { display: none; }
.pv-btn { width: 8em; }
.pv-paper { box-sizing: border-box; width: 210mm; min-height: 297mm; margin: var(--s6) auto; padding: 10mm; background: #fff; box-shadow: var(--shadow-3); }
.pv-paper > .loading, .pv-paper > .banner { width: 186mm; }

/* 一張紙(.sheet)：寬 186mm(可列印寬 190mm 少 4mm，Chrome 換算像素時最右邊的框線才不會被切掉，全域 PDF 鐵律)。
 * 一律亮色(深色模式也印白底黑字)：顏色變數在這一塊重新定成亮色；字級、間距縮小成紙本的大小 */
.sheet {
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F2F2EE; --surface-3: #E7E7DF;
  --ink: #1F2624; --ink-2: #3A4541; --muted: #5C6662; --line: #9AA19C; --line-2: #9AA19C;
  --primary: #C8006F; --primary-soft: #FCE8F2;
  --urgent: #C0271D; --urgent-soft: #FBE9E7; --on-urgent: #FFFFFF; --late: #B42318; --late-soft: #FDECEA; --late-line: #F4C7C2;
  --working: #9A5800; --working-soft: #FFF4DF; --working-line: #F1D9A6; --ok: #1D6B45; --ok-soft: #E5F3EB; --off: #6B7571; --off-soft: #ECEDE9;
  --fs-xs: 8.5pt; --fs-sm: 9pt; --fs-md: 10pt; --fs-lg: 11pt; --fs-xl: 13pt; --fs-2xl: 15pt;
  --s1: 2px; --s2: 4px; --s3: 6px; --s4: 8px; --s5: 10px; --s6: 12px;
  box-sizing: border-box; width: 186mm; color: var(--ink); background: #fff; font-size: var(--fs-md); line-height: 1.45; color-scheme: light;
}
.sheet *, .sheet *::before, .sheet *::after { box-sizing: border-box; }
.pv-head { display: flex; align-items: center; gap: 4mm; padding-bottom: 3mm; border-bottom: 2px solid var(--ink); }
.pv-logo { width: 12mm; height: 12mm; object-fit: contain; }
.pv-head-t { display: grid; line-height: 1.25; }
.pv-head-t small { font-size: var(--fs-sm); color: var(--ink-2); }
.pv-head-t b { font-size: var(--fs-2xl); font-weight: 900; }
.pv-head-no { margin-left: auto; display: flex; align-items: center; gap: 2mm; font-size: var(--fs-lg); font-weight: 800; }
.pv-head-no .tag { height: 22px; font-size: var(--fs-xs); }
.pv-box { border: 1px solid var(--line); border-radius: 2mm; padding: 3mm 4mm; margin-top: 3mm; }
.pv-part { margin: 5mm 0 0; font-size: var(--fs-xl); font-weight: 900; break-after: avoid; }
.pv-kvs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 1mm 5mm; margin: 0; }
.pv-kv { display: contents; }
.pv-kv dt { color: var(--muted); font-weight: 700; }
.pv-kv dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
/* 紀錄頁的內容(離院段HTML、返院段HTML)在紙上：兩欄名稱與值，不換成手機的一欄 */
.sheet .cf-sec { break-inside: avoid; }
.sheet .cf-sec + .cf-sec { margin-top: 3mm; }
.sheet .cf-h { font-size: var(--fs-lg); padding-bottom: 1mm; margin-bottom: 1.5mm; border-bottom-color: var(--surface-3); }
.sheet .cf-list { grid-template-columns: max-content minmax(0, 1fr); gap: 1mm 5mm; }
.sheet .cf-list dd { margin-bottom: 0; }
.sheet .cf-checks svg { width: 14px; height: 14px; }
/* 照片：兩欄，每格固定高度、object-fit: contain(直式、橫式都完整)；一格不會被切到兩頁(break-inside: avoid)，多張自動換頁 */
.pv-sec { margin-top: 3mm; }
.pv-h { font-size: var(--fs-lg); font-weight: 800; margin: 0 0 1.5mm; break-after: avoid; }
.pv-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3mm; }
.pv-ph { margin: 0; height: 80mm; border: 1px solid var(--line); border-radius: 2mm; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #fff; break-inside: avoid; page-break-inside: avoid; }
.pv-ph img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pv-sign-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3mm; }
.sheet .sign-card { padding: 3mm; border-color: var(--line); border-radius: 2mm; break-inside: avoid; page-break-inside: avoid; }
.sheet .sign-card + .sign-card { margin-top: 0; }
.sheet .sign-card-head { flex-direction: row; align-items: center; }
.sheet .sign-card-head b { font-size: var(--fs-md); line-height: 22px; }
.sheet .sign-tag { height: 22px; min-height: 22px; }
.sheet .sign-img-box { max-width: none; margin-top: 2mm; border-color: var(--line); }
.sheet .sign-meta { margin-top: 2mm; gap: 0.5mm 3mm; }
.pv-notes { display: grid; gap: 2mm; }
.sheet .note { padding: 2mm 3mm; border-color: var(--surface-3); border-radius: 2mm; break-inside: avoid; }
.sheet .note-kind { height: 20px; }
.pv-foot { margin-top: 5mm; padding-top: 2mm; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); text-align: right; }

/* 真的列印：A4 直式、邊界左右上 10mm、下 14mm(放每頁頁尾)；只印那一張紙，其他畫面(頂欄、底部分頁列、提示)一律不印。
 * 每頁頁尾(審查修正 5)：Chrome 用 public/print.js 加的 @page 頁邊方塊；Safari 用 .pv-pagefoot.on(固定在每頁內容區最下面，只有單號與服務對象) */
@page { size: A4 portrait; margin: 10mm 10mm 14mm 10mm; }
.pv-pagefoot { display: none; }
@media print {
  html, body { background: #fff !important; }
  body.has-pv { overflow: visible; }
  body.has-pv > *:not(#printView) { display: none !important; }
  .pv { position: static; overflow: visible; background: #fff; }
  .pv-bar { display: none; }
  .pv-paper { width: auto; min-height: 0; margin: 0; padding: 0; box-shadow: none; }
  .sheet { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pv-pagefoot.on { display: block; position: fixed; left: 0; bottom: 0; width: 120mm; font-size: 8pt; line-height: 1.3; color: #5C6662;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font); }
}

/* ══ 票 14：已到期可刪除(public/admin.js 的到期分頁) ══════════════
 * 表格照處理紀錄：欄寬固定、每格不換行(姓名太長就省略，滑過看完整的)，刪除鈕寬度固定(中文與印尼文同寬)。
 * 不能刪的那一列姓名底下的原因用紅字。刪除視窗沿用處理視窗(.la-modal)：會刪的項目列表、無法復原的紅底提示、輸入姓名、取消與永久刪除。 */
.ex-tbl { table-layout: fixed; min-width: 760px; }
.ex-tbl th, .ex-tbl td { padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-tbl .c-closed { width: 172px; font-variant-numeric: tabular-nums; }
.ex-tbl .c-n { width: 76px; font-variant-numeric: tabular-nums; }
.ex-tbl .c-other { width: 156px; color: var(--ink-2); }
.ex-tbl th.act { width: 124px; }
.ex-tbl td.act { overflow: visible; }
.ex-tbl .ex-who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s2); min-width: 0; padding: 4px 0; }
.ex-tbl .c-res b { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-md); }
/* 名冊查無此人：姓名欄是中央 id(36 字)，整串換行顯示完整，膠囊換到下一行 */
.ex-tbl .c-res b.mono { font-size: var(--fs-xs); white-space: normal; word-break: break-all; line-height: 1.3; }
.ex-tbl .ex-who .tag { flex: none; }
.ex-tbl td small { overflow: hidden; text-overflow: ellipsis; }
.ex-tbl small.ex-block { color: var(--urgent); font-weight: 700; white-space: normal; }
.ex-tbl tr.pending { opacity: .5; }
.ex-btn { width: 6.5em; padding: 0; }
.ex-btn:not(:disabled):hover { border-color: var(--urgent); background: var(--urgent-soft); color: var(--urgent); }
.ex-closed-line { margin: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ex-what h3 { font-size: var(--fs-sm); color: var(--ink-2); margin: 0 0 var(--s2); }
.ex-what ul { margin: 0; padding-left: 1.4em; display: grid; gap: var(--s1); font-size: var(--fs-md); }
.ex-warn { margin: 0; font-weight: 700; }
.ex-modal .modal-btns .btn { width: 10em; }

/* ── 票 12：原文與翻譯並列(public/translate-view.js)。翻譯放在原文下面一行，左邊細線，字小一階、顏色淡一階 ── */
.tr { display: block; margin-top: var(--s1); padding-left: var(--s2); border-left: 3px solid var(--line-2); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; white-space: pre-wrap; font-weight: 400; }
.tr-tag { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); line-height: 1.3; }
.tr-pending .tr-tag, .tr-failed .tr-tag { display: inline; font-weight: 600; }
.tr-failed { border-left-color: var(--working-line); }
.tr-failed .tr-tag { color: var(--working); }
/* 請確認頁(固定中文)：印尼文寫的欄位，中文翻譯在上、原文在下 */
/* 原文那一行跟 .tr 一樣有左細線與縮排，下面留空，不會看起來像下一欄的欄名(UX 審查) */
.cf-src { display: block; margin: var(--s1) 0 var(--s2); padding-left: var(--s2); border-left: 3px solid var(--line-2); color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; white-space: pre-wrap; }
.cf-src-tag { font-size: var(--fs-xs); font-weight: 700; margin-right: var(--s1); }
.cf-untr { display: inline-block; margin-left: var(--s1); padding: 0 var(--s2); border-radius: var(--r-pill); background: var(--working-soft); color: var(--working); font-size: var(--fs-xs); font-weight: 700; line-height: 1.6; vertical-align: 1px; }
/* 票 12 審查修正：返院段提醒區的「不要寫全名」一句(Q49)、物品其他的說明翻譯(跟別處同一種畫法)、紀錄頁小字那一行是原文時(Q47) */
.rt-remind-name { margin: var(--s1) 0 0; font-weight: 700; }
.rt-item-tr { margin: calc(-1 * var(--s2)) 0 var(--s2); }
.tr-src .tr-text { color: var(--muted); }
/* 手機上印尼文的「Catat kembali」「Tunda waktu kembali」兩顆並排放不下(字會跑出按鈕)：改成上下兩列、各占整列 */
@media (max-width: 719.98px) { html[lang="id"] .rec-acts { grid-auto-flow: row; } }