/* 里德計時系統 — 樣式 v4（照 說明/給接手的AI看/DESIGN.md 做，改設計先改那一份）
 *
 * 視覺論點：一本乾淨的工作日誌。黑字、白紙、一條細線一條細線；
 * 數字是主角（窄體），顏色只用在「狀態」與「服務線」。
 * 沒有圓角卡片陣列、沒有漸層、沒有彩色陰影、沒有 emoji、沒有全大寫。
 *
 * 硬規則（有測試盯著）：
 * ① 字級只准 14 / 16 / 18 / 22 / 28 / 40px，最小 14。
 * ② 不寫死任何大於 375px 的 width／min-width（手機不橫捲）。
 * ③ 可以點的東西 min-height 至少 44px。
 * ④ 零外部資源：字型是嵌進去的 base64，圖示是內嵌 SVG，不接任何 CDN。
 * ⑤ 圓角只有兩種（按鈕與輸入 6px、浮動面板 12px），陰影只有一種（浮動面板）。
 */

/* ---------------------------------------------------------------- 字型
   Barlow Semi Condensed 600（SIL Open Font License 1.1, © The Barlow Project Authors）
   只嵌「0123456789:.−+—/hPmSEOW 與空白」這幾個字的子集（woff2 4.3KB），
   從 Google Fonts 的 css2?text= 取下來轉 base64——執行時零外連，斷網也長得一樣。
   用途：時數、時間、專案代碼這些「數字」。中文一律用系統字，不要拿它排中文。 */
@font-face{
  font-family:"Barlow SC";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(data:font/woff2;base64,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) format("woff2");
}

/* ---------------------------------------------------------------- 色票與尺度 */
:root{
  /* 紙與墨。層級靠底色與線做，不靠陰影 */
  --paper:#FAFAF8; --paper-2:#F1F0EC; --line:#E4E2DC;
  --ink:#17181C;--ink-strong:#0E0F12; /* 主鈕 hover 用，不用純黑 */ --ink-2:#5C5F66; --ink-3:#9A9DA3;
  /* 狀態：綠＝在跑／記滿、黃＝未滿或超過 10h、紅＝沒記或失敗 */
  --live:#1E7F5C; --warn:#B7791F; --bad:#B42318;
  /* 紅色的兩個變化：滑過／按住停止鈕時更深的那一階，以及「完全沒記那一列」的淡紅底。
     ⚠ 本來這兩個色碼直接寫在規則裡、不在這張表上——下次調紅色會漏掉它們。 */
  --bad-strong:#94180F; --bad-soft:#FCF1F0;
  /* 服務線：網站藍、SEO 橘（跟計時綠分開，不然「在跑」跟「SEO」撞色）、公部門灰藍、內部灰
     ⚠ 公部門是 2026-09-08 加的第三條線（標案）。選灰藍 #35617D 的理由：
       跟網站的 #2F5FD1 同一個色系但**明顯低彩度、低明度**（並排時一個是鮮藍、一個是墨藍），
       跟內部灰 #6B7280 也分得開。紙上對比 6.36:1、紙-深上 5.83:1，都過 4.5。
     ⚠ 色盲（尤其藍黃系）看不出灰藍與藍的差別——所以顏色**從來不是唯一的線索**：
       每一列的色點旁邊一定跟著文字小標（公部／網站／SEO），那才是真正在講話的東西。 */
  --web:#2F5FD1; --seo:#C2410C; --gov:#35617D; --int:#6B7280;
  /* 陰影只有這一種：浮動面板。列、區塊、按鈕都沒有陰影 */
  --shadow-panel:0 20px 40px -12px rgba(23,24,28,.25);
  /* 圓角只有這兩種 */
  --r-btn:0.375rem;   /* 6px：按鈕與輸入 */
  --r-panel:0.75rem;  /* 12px：浮動面板 */
  --safe-b:env(safe-area-inset-bottom, 0px);
  /* 字：中文與正文用系統字（中文沒有可嵌的好選擇），數字用嵌進來的窄體 */
  --font-text:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-num:"Barlow SC","PingFang TC","Noto Sans TC",system-ui,sans-serif;
}

*{box-sizing:border-box;}
html,body{overflow-x:clip;}
/* 響應式的第一條：每一個容器都可以被壓縮。少了這一條，flex／grid 裡面
   一個長客戶名或一張表格就會把整頁撐開，出現橫向捲軸。
   （下面 .round／.chip 那些真的需要最小寬度的，寫在後面會蓋掉這一條。） */
section,div,span,p,li,ul,button,input,select,textarea,td,th{min-width:0;}

html{font-size:16px;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-text);font-size:1rem;line-height:1.6;
  /* 長代碼、長網址不要撐破容器 */
  overflow-wrap:anywhere;
  /* 右下角那顆浮動＋（56px）＋上下各 16px＋瀏海那一圈：內容底部一定要留得比它多，
     不然捲到底的時候它就蓋在「本週」那一排數字上（實機 375 看過，＋蓋住六、日兩格）。 */
  padding-bottom:calc(6rem + var(--safe-b));
}
body.鎖捲動{overflow:hidden;}
[hidden]{display:none !important;}

/* 數字、時間、專案代碼：窄體＋等寬數字。中文不套（會 fallback 回系統字，但別故意用） */
.num,.proj-code,.week-day .h,.mon-n,.mon-h,.timer-num,.entry-h,.fill-h,
.hours-in,.big-total,.top-hours,.link-box,.svc-mini{
  font-family:var(--font-num);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
}

.wrap{max-width:40rem;margin:0 auto;padding:0 1rem;}
.grow{flex:1;min-width:0;}
.muted{color:var(--ink-2);}
.nowrap{white-space:nowrap;}

/* 動態：只留 DESIGN 第七節那四個。系統設定關掉動態效果就全部停 */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}

/* ---------------------------------------------------------------- 按鈕
   主要＝墨底白字（不是藍底）。次要＝白底墨字一條線。都沒有陰影。 */
button{
  font-family:inherit;font-size:1rem;line-height:1.3;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  border-radius:var(--r-btn);padding:0.5rem 0.9rem;min-height:2.75rem;
}
@media (hover:hover){button:hover{background:var(--paper-2);}}
button:disabled{color:var(--ink-3);border-color:var(--line);background:var(--paper-2);cursor:not-allowed;}
/* 按下去的那一刻要看得出來。
   ⚠ 絕對不可以包進 @media (hover:hover)：手機沒有 hover，包進去等於手機上
     「從按下到訊息出現」之間一點回饋都沒有——這是一天用九次、以手機為主的系統，
     沒回饋最容易讓人以為沒按到、再按一次。
   ⚠ 也不要加 transition：每天按上百次的動作不做動畫（DESIGN 第七節）。 */
button:active:not(:disabled),summary:active{background:var(--line);}
.btn-main:active:not(:disabled),.btn-stop:active:not(:disabled){opacity:0.85;}
.linkbtn:active:not(:disabled){background:var(--paper-2);}
a:active{opacity:0.7;}
/* 鍵盤走到哪裡一定要看得見（Tab 走完「記一筆」與「收工」兩條流程，每一站都有框）。
   ⚠ 連結（登出、給儀表板的 JSON）與 <summary>（？說明、出勤 ▾、更多）也要有，
     少了它們，鍵盤使用者會有幾站是「焦點不知道跑到哪裡去了」。 */
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px;}
.btn-main{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600;}
@media (hover:hover){.btn-main:hover{background:var(--ink-strong);}}
.btn-main:disabled{background:var(--paper-2);border-color:var(--line);color:var(--ink-3);}
.btn-stop{background:var(--bad);border-color:var(--bad);color:var(--paper);font-weight:600;}
@media (hover:hover){.btn-stop:hover{background:var(--bad-strong);}}
.btn-danger{color:var(--bad);border-color:var(--line);background:var(--paper);}
@media (hover:hover){.btn-danger:hover{background:var(--paper-2);}}
.btn-big{width:100%;min-height:3rem;font-size:1.125rem;font-weight:600;}
/* 什麼時候用小號：**純工具列**（旁邊只有月份切換、其他小鈕）。
   跟輸入欄位並排的按鈕**不要用小號**——它要跟欄位一樣高才對得齊
   （明細總表那一列是「選人／選月／查／匯出」，四個並排）。
   ⚠ 所以「下載一份 CSV」在管理端會有兩種大小，那是對的不是不一致：
     出勤總表那一列是工具列（小號），明細總表那一列跟欄位並排（預設大小）。
     不要為了「看起來一致」把它們統一，統一之後其中一邊就跟旁邊的欄位差半格。 */
.btn-small{min-height:2.75rem;padding:0.35rem 0.7rem;font-size:0.875rem;}
.btn-line{background:var(--paper);border:1px solid var(--line);color:var(--ink);font-weight:600;width:100%;}
.linkbtn{background:none;border:none;color:var(--ink);font-weight:600;padding:0.25rem 0.35rem;
  min-height:2.75rem;font-size:0.875rem;text-decoration:underline;text-underline-offset:3px;}
@media (hover:hover){.linkbtn:hover{background:none;color:var(--ink-strong);}}
.icon-btn{min-height:2.75rem;border:none;background:none;color:var(--ink-2);
  display:inline-flex;align-items:center;justify-content:center;padding:0.35rem;border-radius:var(--r-btn);}
@media (hover:hover){.icon-btn:hover{background:var(--paper-2);}}
/* 停用的圖示鈕不要變成一個灰方塊（那看起來像壞掉），淡掉就好 */
.icon-btn:disabled{background:none;border-color:transparent;color:var(--ink-3);}
.round{min-height:2.75rem;border-radius:var(--r-btn);border:1px solid var(--line);
  background:var(--paper);font-size:1.125rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  padding:0 0.75rem;}
svg{vertical-align:middle;}

/* ---------------------------------------------------------------- 輸入 */
input,select,textarea{
  font-family:inherit;font-size:1rem;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-btn);padding:0.55rem 0.65rem;
  background:var(--paper);max-width:100%;min-height:2.75rem;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:0;}
input[readonly],input:disabled,select:disabled{background:var(--paper-2);color:var(--ink-2);}
label{font-size:0.875rem;color:var(--ink-2);display:block;margin-bottom:0.25rem;}
.field{margin:0.75rem 0;}
.field input,.field select,.field textarea{width:100%;}
.row{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;}

/* ---------------------------------------------------------------- 區塊（不是卡片）
   區塊之間用留白（32px）分開，不用線也不用框。裡面才用線分列。 */
.card{background:none;padding:0;margin:0 0 2rem;}
.card h2{margin:0;font-size:1.125rem;font-weight:600;line-height:1.25;}
.card-head{display:flex;align-items:baseline;gap:0.5rem;margin-bottom:0.5rem;
  padding-bottom:0.5rem;border-bottom:1px solid var(--line);}
.card-head .big{margin-left:auto;font-size:1.375rem;font-weight:700;line-height:1.1;}
.hint{font-size:0.875rem;color:var(--ink-2);margin:0.5rem 0 0;}
.sub-title{font-size:0.875rem;font-weight:600;color:var(--ink-2);margin:1.5rem 0 0.5rem;}

/* 一句說明 ＋「？」收起來的細節 */
/* .hint 與 .one-line 長得很像，分工是：
   .hint  ＝ 跟在某個東西後面的補充（往上留白），全站 55 處
   .one-line ＝ 一張表最上面那一句說明，右邊要跟「？」並排（所以是 flex，往下留白）
   兩個不要互相取代，但也不要再開第三種。 */
.one-line{font-size:0.875rem;color:var(--ink-2);margin:0 0 0.5rem;display:flex;gap:0.4rem;align-items:flex-start;}
details.more{margin:0 0 1rem;}
details.more>summary{
  font-size:0.875rem;color:var(--ink);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;min-height:2.75rem;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
}
details.more>summary::-webkit-details-marker{display:none;}
details.more .more-body{font-size:0.875rem;color:var(--ink-2);background:var(--paper-2);
  border-radius:0;padding:0.75rem;margin-top:0.25rem;line-height:1.6;}
.q{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;
  border-radius:999px;background:var(--paper-2);color:var(--ink-2);font-size:0.875rem;font-weight:600;flex:none;}

/* ---------------------------------------------------------------- 頂部固定條 */
.top{position:sticky;top:0;z-index:30;background:var(--paper);
  box-shadow:0 1px 0 var(--line);padding-top:env(safe-area-inset-top, 0px);}
.top-in{max-width:40rem;margin:0 auto;padding:0.75rem 1rem 0.6rem;}
.top-row{display:flex;align-items:center;gap:0.5rem;}
.top-day{font-size:1.125rem;font-weight:600;}
.top-name{margin-left:auto;font-size:0.875rem;color:var(--ink-2);}
/* 桌機才出現的「＋ 記一筆」：手機／平板用右下角那顆浮動的 */
.top-add{display:none;margin-left:0.75rem;flex:none;}
.bar{height:0.375rem;background:var(--paper-2);overflow:hidden;margin-top:0.6rem;}
.bar i{display:block;height:100%;background:var(--ink);transition:width .3s;}
.bar i.full{background:var(--live);}
.top-hours{display:flex;align-items:center;gap:0.35rem;margin-top:0.35rem;
  font-size:0.875rem;color:var(--ink-2);}
.top-hours b{font-size:1.125rem;color:var(--ink);font-weight:600;}
.top-hours .linkbtn{margin-left:auto;}
.done-tag{margin-left:auto;color:var(--live);font-weight:600;font-size:0.875rem;}

/* ---------------------------------------------------------------- 狀態行（v5）
   頂部條第二行：打卡（左）＋已記／應記（中）＋下一個動作（右）＋異常小字（第二行）。
   ≥600px 三段排成一列；手機分成兩組、最多三行（見下面那一段）。
   ⚠ 這一條是固定條的一部分，愈長手機第一屏剩下的愈少：展開的東西一律放到下面的提示區。 */
.status{margin-top:0.4rem;}
.st-main{display:flex;align-items:center;gap:0.5rem 0.75rem;flex-wrap:wrap;}
.st-left{display:flex;align-items:baseline;gap:0.4rem;flex-wrap:wrap;min-width:0;flex:1 1 12rem;}
.st-t{font-size:1rem;font-weight:600;}
.st-t b{font-weight:600;}
.st-s{font-size:0.875rem;color:var(--ink-2);}
/* 三段都可以被壓縮、也都可以自己換行；位置夠（≥600px）就排成一列。 */
.st-mid{margin-top:0;flex:1 1 12rem;}
/* 「已記 4h ／ 應記 5h 26分 ／ 還差…」不准在字中間斷（實機 375 曾擠成「已／記 4／h」三行）：
   每一段自己不換行，段與段之間可以換。 */
.st-mid.top-hours{white-space:nowrap;flex-wrap:wrap;}
.st-mid.top-hours .st-goal,.st-mid.top-hours .linkbtn{white-space:nowrap;}

/* 手機（<600px）的三行：①打卡（幾點打的＋到現在　　下班／上班鈕、出勤 ▾）
                        ②計時（已記 ／ 應記　　還差…收工）
                        ③異常小字（遲到、外勤待確認、預計幾點可下班）
   分組的道理是「同一件事排在一起」：打卡時間跟打卡鈕是一件事，
   已記／應記跟收工是另一件事。
   ⚠ 為什麼不是「左邊自己一行、進度跟按鈕擠第二行」（v6 的排法）：
     那時候進度那一段只分得到約 190px，而「已記 4h 45分 ／ 應記 5h 07分」要 200px，
     「還差 22分，收工」又要 117px——於是被切成三行，整條變成五行（375×812 實測）。
     兩組各自佔一整行（343px）就都放得下，而且行數固定，不會因為數字變長就多一行。
   ⚠ st-left 的 flex-basis 在這裡要縮回 auto：12rem 的基準寬會讓它跟右邊那組
     加起來超過 343px，按鈕就被擠到第二行去了。 */
@media (max-width:599px){
  .st-left{flex:0 1 auto;}
  .st-mid{flex:1 1 100%;}
}
/* ≥600px 三段排成一列，「已記／應記」回到中間。
   HTML 的順序是「打卡那一句 → 打卡那組按鈕 → 已記／應記」（跟手機看到的一樣），
   所以這裡把動作那一組排到最後。⚠ order 只動桌機這一邊：手機是主要的使用場合，
   那裡的按鍵順序（Tab、螢幕閱讀器）要跟眼睛看到的完全一致。 */
@media (min-width:600px){.st-act{order:1;}}
.st-left-hours{margin-left:auto;font-size:0.875rem;}
/* 右邊那一組動作：打卡鈕、收工鈕、「出勤 ▾」。
   ⚠ v6 起「出勤 ▾」在這一組裡，不再自己佔第二行——休息日那天左邊只有一句
   「今天休息（休息日）」、中間沒有進度、右邊沒有鈕，它一個人站第二行，
   手機上看起來就是「一句話下面空一大段」（實機 375 看過）。 */
.st-act{display:flex;align-items:center;gap:0.5rem;flex:none;margin-left:auto;}
.st-act .打卡鈕{min-width:5rem;}
.st-note{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;
  margin-top:0.25rem;font-size:0.875rem;color:var(--ink-2);}
/* 目標那個數字滑過去要講得出它從哪裡來（機器算的一律說得出原因） */
.st-goal{border-bottom:1px dotted var(--line);cursor:help;}

/* ---------------------------------------------------------------- 下拉選單（原生 details）
   全站兩個：頂部條右上角的姓名（登出）、狀態行的「出勤 ▾」。
   為什麼用原生 <details>：Esc 關得掉、Tab 進得去、螢幕閱讀器講得出開合——
   自製的小面板這三樣都要自己補，補了兩個地方還會長得不一樣。
   ⚠ summary 的預設三角形要拿掉（Safari 要 -webkit-details-marker 那一條）。 */
.menu{position:relative;display:inline-flex;align-items:center;}
.menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  min-height:2.75rem;padding:0 0.25rem;font-size:0.875rem;color:var(--ink);white-space:nowrap;}
.menu>summary::-webkit-details-marker{display:none;}
@media (hover:hover){.menu>summary:hover{text-decoration:underline;text-underline-offset:3px;}}
.menu-box{position:absolute;right:0;top:100%;z-index:35;
  background:var(--paper);box-shadow:var(--shadow-panel);border-radius:var(--r-panel);
  padding:0.25rem 0.5rem;display:flex;flex-direction:column;align-items:stretch;min-width:8rem;}
.menu-box .linkbtn,.menu-box a.linkbtn{text-align:left;text-decoration:none;font-weight:400;
  min-height:2.75rem;display:flex;align-items:center;}
@media (hover:hover){.menu-box .linkbtn:hover{background:var(--paper-2);}}
/* 一行的骨架（狀態行載入中） */
.skel-1 i{margin:0.4rem 0;max-width:60%;}

/* 碼表在跑：整條變成計時條。只有那顆色點會呼吸，別的都不動 */
.timer-bar{display:flex;align-items:center;gap:0.5rem;}
.dot-run{width:0.625rem;height:0.625rem;border-radius:999px;background:var(--live);flex:none;
  animation:呼吸 1.6s ease-in-out infinite;}
@keyframes 呼吸{50%{opacity:.3;}}
.timer-what{font-size:0.875rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.timer-num{font-size:1.375rem;font-weight:700;margin-left:auto;}
.timer-bar .btn-stop{min-height:2.75rem;padding:0.4rem 0.9rem;flex:none;}

/* ---------------------------------------------------------------- 提示 */
.notices{max-width:40rem;margin:0 auto;padding:0 1rem;}
.notice{padding:0.7rem 0.85rem;margin:0.75rem 0 0;font-size:0.875rem;
  display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;
  background:var(--paper-2);border-left:0;}
.notice-warn{color:var(--warn);}
.notice-bad{color:var(--bad);}
.notice button{background:var(--paper);}
/* 第一次進來的三行歡迎：不是警告（墨色不是黃色），也不是 .notice
   ——那個類別是「今天有事要處理」，全站同時只出現一條，歡迎不該去佔那個名額。 */
.welcome{padding:0.7rem 0.85rem;margin:0.75rem 0 0;font-size:0.875rem;color:var(--ink);
  background:var(--paper-2);display:flex;gap:0.5rem;align-items:flex-start;flex-wrap:wrap;}
.welcome button{background:var(--paper);}
.歡迎行{margin:0 0 0.25rem;font-size:0.875rem;line-height:1.6;}
.歡迎行:last-child{margin-bottom:0;color:var(--ink-2);}
.offline{background:var(--bad);color:var(--paper);text-align:center;padding:0.6rem;font-size:0.875rem;
  position:sticky;top:0;z-index:50;}
.demo-bar{background:var(--warn);color:var(--paper);text-align:center;padding:0.4rem;font-size:0.875rem;font-weight:600;}
.queued{background:var(--paper-2);border-bottom:1px solid var(--line);color:var(--warn);
  padding:0.55rem 1rem;font-size:0.875rem;display:flex;align-items:center;gap:0.5rem;
  position:sticky;top:0;z-index:45;}
.queued button{background:var(--paper);}
.toast{position:fixed;left:1rem;right:1rem;bottom:calc(1rem + var(--safe-b));margin:0 auto;max-width:32rem;
  background:var(--ink);color:var(--paper);border-radius:var(--r-btn);padding:0.7rem 0.9rem;font-size:0.875rem;z-index:80;}
.toast.bad{background:var(--bad);}

/* ---------------------------------------------------------------- 服務線
   無底色，只有色點＋色字。已停用用淡灰＋刪除線。 */
.dot{width:0.5rem;height:0.5rem;border-radius:999px;flex:none;display:inline-block;}
.dot-seo{background:var(--seo);} .dot-web{background:var(--web);}
.dot-gov{background:var(--gov);} .dot-int{background:var(--int);}
.svc{display:inline-block;font-size:0.875rem;font-weight:600;line-height:1.3;white-space:nowrap;}
.svc-seo{color:var(--seo);} .svc-web{color:var(--web);}
.svc-gov{color:var(--gov);} .svc-int{color:var(--int);}
.svc-mini{display:inline-block;font-size:0.875rem;font-weight:600;line-height:1.3;flex:none;
  white-space:nowrap;margin-left:0.3rem;color:var(--ink-2);}
.svc-mini.svc-seo{color:var(--seo);} .svc-mini.svc-web{color:var(--web);}
.svc-mini.svc-gov{color:var(--gov);} .svc-mini.svc-int{color:var(--int);}
.svc-mini.svc-none{color:var(--warn);}
.dot+.svc-mini{margin-left:0.25rem;}

/* 一列裡「名字」跟右邊的「數字」搶位置的那幾個地方：中文的標點禁則會讓
   收尾的「）」懸在框外（Chrome 的懸掛標點，line-break:anywhere 也擋不掉）。
   實測長客戶名「銓皓牙醫診所暨植牙美學中心（內湖旗艦館）」在 375px 的列裡
   懸出 6.8px，離右邊的時數只剩 1.2px。名字那一欄右邊留 8px，讓它懸在自己的
   留白裡，不要去擠數字。 */
.entry-t1,.entry-t2,.fill-n1,.fill-n2,.proj-client,.mon-top .grow,
#總表結果 td.欄案子,.timer-what{line-break:anywhere;}
.entry-what,.mon-top .grow{padding-right:0.5rem;}
#總表結果 td.欄案子{padding-right:0.5rem;}

/* ---------------------------------------------------------------- 今天（細線清單） */
.entry{border-top:1px solid var(--line);}
.entry:first-of-type{border-top:none;}
.entry-main{display:flex;align-items:center;gap:0.5rem;width:100%;text-align:left;
  border:none;background:none;border-radius:0;padding:0.5rem 0;min-height:3.5rem;}
@media (hover:hover){.entry-main:hover{background:var(--paper-2);}}
.entry-what{min-width:0;flex:1;}
.entry-t1{display:block;font-size:1rem;font-weight:600;}
.entry-t2{display:block;font-size:0.875rem;color:var(--ink-2);}
.entry-h{font-size:1.125rem;font-weight:600;flex:none;}
/* 「改」寫出來：一顆箭頭圖示看不出來點下去會發生什麼事。整列都按得到（.entry-main 是一顆 56px 的按鈕） */
.entry-open{color:var(--ink-2);flex:none;display:inline-flex;align-items:center;gap:0.15rem;}
.entry-改{font-size:0.875rem;}
/* 展開的就地編輯：底色換成紙-深、上下一條線，看得出來是「同一列的裡面」 */
.entry-edit{padding:0.25rem 0.75rem 1rem;background:var(--paper-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.entry-edit .field{margin:0.75rem 0;}
.entry-edit input,.entry-edit select{background:var(--paper);}
.locked{font-size:0.875rem;color:var(--ink-3);flex:none;border:none;background:none;padding:0.35rem 0.5rem;}
/* 機器抓的欄位標記（表頭那個鎖）：淡灰、跟旁邊的字對齊 */
.lock-mark{color:var(--ink-3);display:inline-flex;vertical-align:-0.15em;}
.lock-mark svg{width:0.875rem;height:0.875rem;}
.flag{font-size:0.875rem;color:var(--warn);margin-left:0.35rem;white-space:nowrap;font-weight:600;}
.flag-bad{color:var(--bad);}
/* ⚠ .flag 預設就是黃色，所以 .flag-warn 一直沒有樣式也「剛好對」——
   那是巧合不是設計。十處在用它，把意圖寫明，免得哪天 .flag 的預設色一改就全錯。 */
.flag-warn{color:var(--warn);}

/* 剛記下來的那一列：從紙-深淡回白（400ms）。這是「記下來成功」唯一的動態 */
@keyframes 淡回白{from{background:var(--paper-2);}}
.entry.剛記{animation:淡回白 .4s ease-out;}

/* 空狀態：一句引導＋一顆次要按鈕。不用插圖、不用 emoji、不用「—」 */
.empty{background:var(--paper-2);padding:1.25rem 1rem;}
.empty-t{font-size:1rem;font-weight:600;margin-bottom:0.25rem;}
.empty-s{font-size:0.875rem;color:var(--ink-2);margin-bottom:0.75rem;}

/* 讀取中：三條淺灰骨架列，不用轉圈 */
.skel{padding:0.25rem 0;}
.skel i{display:block;height:1rem;background:var(--paper-2);margin:0.9rem 0;}
.skel i:nth-child(2){max-width:70%;}
.skel i:nth-child(3){max-width:45%;}

/* 時數步進器 */
.stepper{display:flex;align-items:center;gap:0.5rem;}
.stepper .h-in{max-width:6rem;text-align:center;font-size:1.125rem;font-weight:600;}
.stepper .unit{font-size:0.875rem;color:var(--ink-2);}

/* ---------------------------------------------------------------- 本週七格
   無框：數字在上、星期在下；今天用 2px 墨色底線標。狀態只染數字。 */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:0.25rem;}
/* 左右不留 padding：格子只有 45.6px 寬，留了 padding 之後「5h 30分」（45px）就放不下。
   上下各多 4px（v6）：375px 那格是「8h」在上、「11分」在下兩行字，
   0.5rem 的留白讓兩行字貼著上下兩格的邊，一整排看起來是黏在一起的。 */
/* 每一格是一顆按鈕（點下去看那一天記了哪幾筆），但長得還是「無框的一格」：
   沒有邊、沒有底色、沒有圓角，狀態只染數字。 */
.week-day{min-width:0;text-align:center;padding:0.75rem 0 0.65rem;
  border:none;border-bottom:2px solid transparent;border-radius:0;background:none;
  color:inherit;font-family:inherit;font-size:1rem;min-height:2.75rem;display:block;width:100%;}
@media (hover:hover){.week-day:hover:not(:disabled){background:var(--paper-2);}}
/* 還沒到的日子沒有東西可以看：停用，但不要變成一個灰方塊（那看起來像壞掉） */
.week-day:disabled,.mon-day:disabled{background:none;border-color:transparent;cursor:default;color:inherit;}
.week-day .h{display:block;font-size:1rem;font-weight:600;line-height:1.1;white-space:nowrap;}
/* 「5h 30分」在 375px 的 45.6px 格子裡要 51px、「10h 30分」要 52px；桌機右欄那格只有
   50–52px，16px 的「10h 30分」要 55px（六尺寸實測）。字級最小 14px 不能再小，
   格子寬度又是「整週寬度 ÷ 7」——所以分那半一律自己一行，本週與日曆都是。
   ⚠ 每一格都留兩行的高度：不留的話「8h」那種只有一行，底下的星期會跟隔壁對不齊。 */
.week-day .h .hm,.mon-day .mon-h .hm{display:block;line-height:1.1;}
.week-day .h,.mon-day .mon-h{min-height:2.2em;}
@media (max-width:479px){ .week-day .h{font-size:0.875rem;} }
.week-day .d{display:block;font-size:0.875rem;color:var(--ink-2);line-height:1.3;}
.week-day.warn .h{color:var(--warn);}
.week-day.bad .h{color:var(--bad);}
.week-day.today{border-bottom-color:var(--ink);}
.week-day.holiday .h,.week-day.上線前 .h{color:var(--ink-3);font-weight:400;}
.week-day .note{font-size:0.875rem;color:var(--bad);line-height:1.3;}
.week-day .note.holiday-name{color:var(--ink-3);font-weight:400;}
.week-sum{margin-top:0.75rem;font-size:0.875rem;color:var(--ink-2);}
.week-sum b{color:var(--ink);font-size:1.125rem;font-weight:600;}

/* ---------------------------------------------------------------- 這個月（日曆） */
.mon-nav{display:flex;align-items:center;gap:0.5rem;margin:0.25rem 0 0.5rem;}
.mon-nav .mon-title{font-weight:600;font-size:1rem;}
.mon-nav .icon-btn{flex:none;}
.mon-head{display:grid;grid-template-columns:repeat(7,1fr);gap:0.25rem;margin-top:0.5rem;
  font-size:0.875rem;color:var(--ink-2);text-align:center;}
.mon-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0.25rem;margin-top:0.25rem;}
.mon-day{min-width:0;padding:0.35rem 0;text-align:center;
  border:none;border-bottom:2px solid transparent;border-radius:0;background:none;
  color:inherit;font-family:inherit;font-size:1rem;min-height:2.75rem;display:block;width:100%;}
@media (hover:hover){.mon-day:hover:not(:disabled){background:var(--paper-2);}}
.mon-day .mon-n{display:block;font-size:0.875rem;color:var(--ink-3);line-height:1.2;}
/* 「8h 04分」在格子裡會折行：數字用窄體、整格不折，分那半用小一級的灰字（.hm，本週七格共用） */
.mon-day .mon-h{display:block;font-size:0.875rem;font-weight:600;line-height:1.2;white-space:nowrap;}
.hm{font-size:0.875rem;font-weight:400;color:var(--ink-2);}
.mon-day.warn .mon-h{color:var(--warn);}
.mon-day.bad .mon-h{color:var(--bad);}
.mon-day.today{border-bottom-color:var(--ink);}
.mon-day.holiday .mon-h,.mon-day.上線前 .mon-h{color:var(--ink-3);font-weight:400;}
.mon-day.mon-out{visibility:hidden;}
.mon-top{display:flex;align-items:center;gap:0.5rem;padding:0.6rem 0;border-top:1px solid var(--line);
  font-size:1rem;}
.mon-top:first-child{border-top:none;}
/* 桌機右欄的本月摘要：手機與平板不顯示（一屏放不下，那裡有「本月 ▸」可以點開）。
   同一份 DOM，用 CSS 決定哪個寬度看得到，不是畫兩套。 */
#本月摘要{display:none;}
.mon-sum{display:flex;align-items:baseline;gap:0.5rem;}
.mon-sum .big-total{font-size:1.75rem;}

/* ---------------------------------------------------------------- 浮動＋鈕（手機與平板） */
.fab{
  position:fixed;right:1rem;bottom:calc(1rem + var(--safe-b));z-index:40;
  width:3.5rem;height:3.5rem;min-height:3.5rem;border-radius:999px;
  background:var(--ink);border:none;color:var(--paper);
  display:flex;align-items:center;justify-content:center;padding:0;
}
@media (hover:hover){.fab:hover{background:var(--ink-strong);}}

/* ---------------------------------------------------------------- 面板（sheet／對話框）
   手機：從底部滑出，高＝內容、最多 88vh，內容自己捲，第一步一定在畫面裡。
   ≥600px：垂直水平置中的對話框（最寬 480px、最高 85vh）。 */
/* ⚠ 黑幕刻意不做進場動畫。看起來確實是「面板滑 220ms、黑幕瞬間出現」動一半不動一半，
   但補上去就變成全站第四個動效，超過 DESIGN 第七節訂的上限——那條上限比這點順眼重要。
   （2026-09-08 加過一次，被 測試/畫面驗證.js 第 75 條擋下來。不要再加。） */
.sheet-back{position:fixed;inset:0;background:rgba(23,24,28,.45);z-index:60;}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--paper);border-radius:var(--r-panel) var(--r-panel) 0 0;box-shadow:var(--shadow-panel);
  max-height:88vh;display:flex;flex-direction:column;
  animation:滑上來 .22s ease-out;
}
@keyframes 滑上來{from{transform:translateY(1.5rem);opacity:0;}}
.sheet-grab{width:2.25rem;height:0.25rem;border-radius:999px;background:var(--line);margin:0.5rem auto 0;flex:none;}
.sheet-head{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;flex:none;
  border-bottom:1px solid var(--line);}
.sheet-head h2{margin:0;font-size:1.125rem;font-weight:600;}
.sheet-title{font-size:1.125rem;font-weight:600;display:flex;align-items:center;gap:0.45rem;min-width:0;}
.sheet-title span.t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sheet-head .right{margin-left:auto;}
.sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0.5rem 1rem 0.75rem;}
.sheet-foot{flex:none;padding:0.75rem 1rem calc(0.75rem + var(--safe-b));border-top:1px solid var(--line);background:var(--paper);}

/* 搜尋框 */
.search-wrap{position:relative;margin:0.25rem 0 0.5rem;}
.search-wrap input{width:100%;padding-left:2.5rem;}
.search-wrap .ic{position:absolute;left:0.75rem;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none;}

/* 專案清單（sheet 第一步）：細線清單，不是一堆圓角卡片 */
.proj-list{list-style:none;margin:0;padding:0;}
.proj-row{display:flex;align-items:center;gap:0.5rem;width:100%;text-align:left;
  border:none;background:none;border-radius:0;padding:0.5rem 0;min-height:3.5rem;}
.proj-list li+li .proj-row{border-top:1px solid var(--line);}
@media (hover:hover){.proj-row:hover{background:var(--paper-2);}}
.proj-main{display:flex;flex-direction:column;gap:0.1rem;min-width:0;flex:1;}
.proj-line1{display:flex;align-items:baseline;gap:0.4rem;flex-wrap:wrap;}
.proj-code{font-weight:600;font-size:1rem;}
.proj-client{font-size:1rem;}
.proj-when{font-size:0.875rem;color:var(--ink-3);margin-left:auto;text-align:right;flex:none;}
.proj-off{font-size:0.875rem;color:var(--ink-3);text-decoration:line-through;white-space:nowrap;}
.proj-list .off .proj-code,.proj-list .off .proj-client{color:var(--ink-3);text-decoration:line-through;}
/* 同一個代碼的兩條服務線：左邊一條線把它們框在一起，看起來就不像重複列了兩次 */
.proj-list li.dup{border-left:2px solid var(--line);padding-left:0.6rem;}
.proj-list li.dup+li.dup .proj-row{border-top:1px solid var(--line);}
.dup-note{font-size:0.875rem;color:var(--ink-2);margin:0.5rem 0 0.1rem;}

/* 內部工作：小 chips */
.chips{display:flex;flex-wrap:wrap;gap:0.5rem;}
.chip{border:1px solid var(--line);background:var(--paper);border-radius:var(--r-btn);
  padding:0.35rem 0.75rem;min-height:2.75rem;font-size:0.875rem;
  display:inline-flex;align-items:center;gap:0.4rem;}
@media (hover:hover){.chip:hover{background:var(--paper-2);}}
/* 請假／休假不是工作：拉到最後、自己一行、淡色 */
.chips-leave{margin-top:0.75rem;padding-top:0.75rem;border-top:1px solid var(--line);align-items:center;}
.chip-leave{color:var(--ink-2);background:var(--paper-2);}
.chips-leave-note{margin:0;flex:1;min-width:0;}

/* 大字時數：這一頁最大的那個數字，700 只給它 */
.hours-big{display:flex;align-items:center;justify-content:center;gap:1rem;margin:0.75rem 0 0.5rem;}
.hours-in{max-width:7rem;text-align:center;font-size:2.5rem;font-weight:700;line-height:1.1;
  border:none;padding:0;min-height:3rem;background:none;}
.hours-in:focus{outline:2px solid var(--ink);}
.hours-unit{font-size:1rem;color:var(--ink-2);}
.quick{display:flex;gap:0.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:0.75rem;}
.quick button{font-size:0.875rem;padding:0.35rem 0.75rem;}
.quick button.on{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600;}
/* 欄位底下那一行提示（工項的「公司一般抓幾小時」、描述還剩幾個字、時間只填一邊）。
   ⚠ 空的時候也要留一行的高度：不留的話，一打字整張面板就往下跳一行，
     底下的「記下來」跟著移位，手指按到一半按空。1lh＝一行的高度；
     舊瀏覽器不認就吃前面那條 1.6em。 */
.std-note,.help{font-size:0.875rem;color:var(--ink-2);margin-top:0.35rem;
  min-height:1.6em;min-height:1lh;}
.or-line{display:flex;align-items:center;gap:0.75rem;color:var(--ink-3);font-size:0.875rem;margin:1rem 0;}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line);}

/* 收工分配：一列兩行不截斷（第一行代碼＋客戶，第二行服務線＋工項） */
.fill-top{font-size:1rem;margin:0.25rem 0 0.75rem;}
.fill-top b{font-size:1.375rem;font-weight:700;}
.fill-row{display:flex;align-items:center;gap:0.35rem;padding:0.5rem 0;border-top:1px solid var(--line);flex-wrap:wrap;}
.fill-row:first-of-type{border-top:none;}
.fill-name{flex:1 1 100%;min-width:0;display:flex;flex-direction:column;gap:0.1rem;}
.fill-n1{font-size:1rem;font-weight:600;display:flex;align-items:center;gap:0.35rem;flex-wrap:wrap;}
.fill-n2{font-size:0.875rem;color:var(--ink-2);}
.fill-ctl{display:flex;align-items:center;gap:0.35rem;width:100%;}
.fill-h{max-width:6rem;flex:1;text-align:center;font-weight:600;}
.fill-row .全部給它{flex:none;margin-left:auto;white-space:nowrap;}

/* ---------------------------------------------------------------- 管理端 */
/* 分頁列一律換行，不橫滑：管理端有 10 個分頁，橫滑在手機上會讓後面 6 個
   完全看不到（實測 375 寬只看得到 3 個），使用者會以為沒有那些功能。 */
.tabs{display:flex;gap:0.5rem;row-gap:0.4rem;margin:1rem 0 0;flex-wrap:wrap;}
.tabs.pills{padding-bottom:0.25rem;}
.tabs button{border-radius:var(--r-btn);white-space:nowrap;flex:none;font-size:0.875rem;}
.tabs button.on{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600;}
/* 「管理」鈕上的待核張數：有幾張顯示幾，0 不顯示（永遠掛著 0 的紅點會被自動忽略）。
   紅色在這套系統的語意是「沒記／失敗」，待核也是「有事情還沒辦」，同一個意思。 */
.pill-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;
  height:1.25rem;padding:0 0.3rem;margin-left:0.35rem;border-radius:999px;
  background:var(--bad);color:var(--paper);font-size:0.875rem;font-weight:600;line-height:1;}
.tabs button.on .pill-count{background:var(--paper);color:var(--ink);}
/* 表格放不下就橫捲。
   ⚠ 這裡曾經加過一組「捲得動的那一側浮出陰影」的提示，用了四層漸層——
     違反 DESIGN 第四節「不用漸層」，而且那個問題（不知道可以左右滑）沒有證據
     真的困擾過人。拿掉了，不要再加回來。 */
.tbl-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
  /* ⚠ position:relative 不是裝飾：表格裡每個勾選框都配一個看不見的說明標籤
     （.sr-only，給讀螢幕的人聽的），它是絕對定位。少了這一行，它的定位基準會
     跳過這個捲動框、跑到整頁上，於是「被關在框裡左右捲」的規則對它無效
     ——實測管理端「標準工時」把整頁撐寬到 504、「出勤設定」撐到 684（畫面只有 375），
     手機上整頁可以左右晃。 */
  position:relative;
}
table{border-collapse:collapse;width:100%;font-size:0.875rem;}
th,td{border-bottom:1px solid var(--line);padding:0.5rem 0.5rem;text-align:left;vertical-align:middle;}
th{color:var(--ink-2);font-weight:600;white-space:nowrap;font-size:0.875rem;}
td.n,th.n{text-align:right;font-family:var(--font-num);font-feature-settings:"tnum";}
td input,td select{min-height:2.75rem;padding:0.35rem 0.45rem;font-size:0.875rem;}
/* 勾選框：看起來還是 20px 的小方框，但**手指按得到的範圍是 44px**。
   原生的勾選框點擊範圍就等於它的大小，在手機上 20px 幾乎按不中
   （管理端「出勤異常」「標準工時」兩張表都是靠它逐列勾）。
   作法是關掉原生外觀自己畫：外框 44px 負責接手指，裡面的 ::before 才是那個方框。
   ⚠ 自己畫就要自己補齊每一種狀態——勾起來、鍵盤選到、不能改，一個都不能少，
     不然會變成「按得到但看不出有沒有勾」，比按不到更糟。 */
td input[type="checkbox"],
.篩選列 input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  box-sizing:border-box;width:2.75rem;height:2.75rem;min-height:0;padding:0;
  margin:-0.75rem;                       /* 撐大的那一圈不佔版面 */
  display:inline-grid;place-content:center;
  background:none;border:0;cursor:pointer;vertical-align:middle;flex:none;
}
td input[type="checkbox"]::before,
.篩選列 input[type="checkbox"]::before{
  content:"";display:block;width:1.25rem;height:1.25rem;
  border:1.5px solid var(--ink-3);border-radius:var(--r-btn);background:var(--paper);
}
td input[type="checkbox"]:checked::before,
.篩選列 input[type="checkbox"]:checked::before{
  background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FAFAF8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3L12.5 5'/%3E%3C/svg%3E") center/0.9rem no-repeat;
  border-color:var(--ink);
}
td input[type="checkbox"]:focus-visible::before,
.篩選列 input[type="checkbox"]:focus-visible::before{
  outline:2px solid var(--ink);outline-offset:2px;
}
td input[type="checkbox"]:disabled,
.篩選列 input[type="checkbox"]:disabled{cursor:not-allowed;}
td input[type="checkbox"]:disabled::before,
.篩選列 input[type="checkbox"]:disabled::before{opacity:0.45;background-color:var(--paper-2);}
td .kw{width:100%;}
td .hh{max-width:5rem;text-align:right;}
.big-total{font-size:1.75rem;font-weight:700;line-height:1.2;margin:0;}
.big-total-sub{font-size:0.875rem;color:var(--ink-2);margin:0.25rem 0 0.75rem;}
.src{font-size:0.875rem;color:var(--ink-2);}
.src-hand{color:var(--ink);font-weight:600;}
/* 名冊上面那一排整批的鈕：22 個人一個一個按、一個一個貼是 44 次點擊 */
.名冊整批{gap:0.5rem;margin:0 0 0.75rem;flex-wrap:wrap;}
/* 「重發」「作廢」按下去會發生什麼事，寫在那一欄的標題底下（就在按鈕正上方）。
   一個人一列寫一次的話，22 個人就是同一句話印 22 遍。 */
th.欄操作{white-space:normal;min-width:14rem;}
/* 名冊那張表：2026-09-08 多了「最後使用」一欄，六欄擠在一起之後，body 的
   overflow-wrap:anywhere 開始把「SEO/GEO組」折成「SEO/G」「EO組」兩行、
   把姓名折成一個字一行。短欄位一律不折，表格本來就包在 .tbl-scroll 裡（放不下就橫捲）。 */
#名冊表 td{white-space:nowrap;}
#名冊表 td .muted,#名冊表 td .src{white-space:nowrap;}
/* 「已發出（要補就重發）」：前半是狀態、後半是怎麼辦，讓它換行成兩行就好，不要一個字一行 */
#名冊表 td .src+.muted{display:block;}
/* 欄標題底下那一句要自己換行、而且有寬度上限：不設的話它會把那一欄撐成一整句話那麼寬，
   六欄加起來超過 1200px，最右邊那一欄（操作）就被推出畫面外。 */
#名冊表 th .th-說明{white-space:normal;max-width:15rem;}
.th-說明{display:block;font-weight:400;font-size:0.875rem;color:var(--ink-2);
  line-height:1.5;margin-top:0.25rem;}
.link-box{font-size:0.875rem;background:var(--paper-2);padding:0.6rem;margin-top:0.5rem;}
.qr{margin-top:0.75rem;background:var(--paper);padding:0.5rem;border:1px solid var(--line);display:inline-block;}
.qr svg{display:block;width:11rem;height:11rem;}
.daynav{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;flex-wrap:wrap;}
.面板錯誤{margin:0.75rem 0;}
.ok-flash{color:var(--live);font-weight:600;font-size:0.875rem;margin-left:0.5rem;}
/* 完全沒記那一列：整列淡紅底，一眼看得出先催誰 */
tbody tr.沒記那列 td{background:var(--bad-soft);}

/* 明細總表：同一份 DOM。桌機是表格，手機用 grid 重排成一列一筆。
   （v3 是畫兩份 DOM 再用 CSS 藏一份——同一筆資料維護兩處，遲早長不一樣。） */
#總表結果 table{width:100%;}
/* body 的 overflow-wrap:anywhere 會把「09:00」折成「09:0／0」、「文章優化」折成兩行
   （表格的自動欄寬會把 min-content 當成一個字）。短欄位一律不折，長的那一欄吃掉剩下的寬度。 */
#總表結果 th,#總表結果 td.欄日期,#總表結果 td.欄時間,#總表結果 td.欄工項,
#總表結果 td.n,#總表結果 td.欄來源{white-space:nowrap;}
/* 案子那一欄要留得下「代碼＋客戶名」，不然表格會把它壓成一個字一行
   （「內／部／·／行／政」直著排，實測 1280px 看到的） */
#總表結果 td.欄案子{min-width:11rem;}
@media (max-width:599px){
  #總表結果 thead{display:none;}
  #總表結果 table,#總表結果 tbody{display:block;}
  #總表結果 tbody tr{display:grid;grid-template-columns:1fr auto;column-gap:0.5rem;
    padding:0.6rem 0;border-top:1px solid var(--line);background:none;}
  #總表結果 tbody tr:first-child{border-top:none;}
  #總表結果 td{display:block;border:none;padding:0;}
  #總表結果 td.欄案子{grid-column:1;grid-row:1;font-weight:600;}
  #總表結果 td.n{grid-column:2;grid-row:1;text-align:right;font-weight:600;}
  #總表結果 td.欄日期{grid-column:1;grid-row:2;font-size:0.875rem;color:var(--ink-2);}
  #總表結果 td.欄工項{grid-column:2;grid-row:2;font-size:0.875rem;color:var(--ink-2);text-align:right;}
  /* 手機上這幾欄收起來（桌機看得到）：起、迄、描述、來源 */
  #總表結果 td.欄次要{display:none;}
  #總表結果 td.欄案子{min-width:0;}
}

/* ================================================================ 版面原型
   三個寬度是三種設計，不是同一份縮放。 */

/* 平板 600–1023px：內容 ≤640px 置中，面板改成置中的對話框 */
@media (min-width:600px){
  .wrap,.top-in,.notices{max-width:40rem;}
  .sheet{
    left:50%;right:auto;top:50%;bottom:auto;
    transform:translate(-50%,-50%);
    width:calc(100% - 2rem);max-width:30rem;
    border-radius:var(--r-panel);max-height:85vh;
    animation:對話框出現 .22s ease-out;
  }
  /* 置中的對話框沒有「從底下拉上來」這回事，拖曳條收起來 */
  .sheet-grab{display:none;}
}
@keyframes 對話框出現{from{transform:translate(-50%,-46%);opacity:0;}}

/* 桌機 ≥1024px：兩欄。左「今天」60%、右「本週」＋「本月摘要」40%，總寬 ≤1040px 置中。
   浮動＋收起來，改成頂部條右邊的「＋ 記一筆」。 */
@media (min-width:1024px){
  .wrap,.top-in,.notices{max-width:65rem;}
  #同仁端{display:grid;grid-template-columns:6fr 4fr;gap:2rem 2.5rem;align-items:start;}
  /* v5：打卡在頂部條那條狀態行裡（全寬），這裡只剩今天／本週／本月三塊 */
  #同仁端>#今天{grid-column:1;grid-row:1 / span 2;}
  #同仁端>#本週{grid-column:2;grid-row:1;}
  #同仁端>#本月摘要{grid-column:2;grid-row:2;display:block;}
  /* 兩欄之間的距離交給 grid 的 gap，區塊自己不要再多一段（不然中間空一大塊） */
  #同仁端>.card{margin-bottom:0;}
  /* 「本月 ▸」在桌機是多餘的：本月摘要就在本週正下方，那顆連結講的是同一件事 */
  #開本月{display:none;}
  .fab{display:none;}
  .top-add{display:inline-flex;align-items:center;gap:0.35rem;}
  /* 管理端的表格不要拉到整個螢幕寬，讀一列會迷路 */
  #管理內容{max-width:75rem;}
  body{padding-bottom:3rem;}
}

/* 大螢幕不再變寬：行長超過 40 個中文字就難讀了 */
@media (min-width:1440px){
  .wrap,.top-in,.notices{max-width:65rem;}
}

/* 圖示鈕的 chevron 用線畫，不在文案裡貼箭頭字元 */
.chev{display:inline-block;width:0.6rem;height:0.6rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);}
.chev-l{transform:rotate(135deg);}

/* 無障礙：跳到主要內容（只在鍵盤 focus 時看得到）與視覺隱藏的 h1 */
/* 看不見但讀得到的標籤。
   ⚠ 不要加 margin:-1px：那是給「留在文件流裡」的隱藏寫法用的，這裡已經是絕對定位、
     本來就不佔位子，加了只會把它往左推 1px 變成 left:-1，量版面的機器會判成
     「有字被切到畫面外」（實測一次紅了 24 條）。 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:0.5rem;top:-4rem;min-height:44px;display:inline-flex;align-items:center;padding:0 0.75rem;background:var(--ink);color:var(--paper);z-index:600;}
.skip-link:focus-visible{top:0.5rem;outline:2px solid var(--paper);outline-offset:2px;}