/* ══════════════════════════════════════════════════════════════════════
   RWD — 一定要最後載入（同權重後寫者贏）
   平板 761–1024：欄數減、看板欄窄一點
   手機 ≤760：頂欄兩排、表格改卡片、看板單欄、底部操作列
   ══════════════════════════════════════════════════════════════════════ */

/* ── 平板 ─────────────────────────────────────────────────────────── */
@media(max-width:1024px){
  .brand span{display:none}
  .brand{gap:0}
  .col{flex-basis:220px}
  .stat .n{font-size:24px}
  .dash-grid{grid-template-columns:1fr}
  .cols3{grid-template-columns:1fr}
  .tbl .hide-md{display:none}
  .search{width:170px}
}

/* ── 手機 ─────────────────────────────────────────────────────────── */
@media(max-width:760px){
  /* 設定頁使用率：手機改成一人兩行（名字＋最後開站／長條＋數字） */
  #peopleBox .ppl-bars{grid-template-columns:1fr auto}
  #peopleBox .ppl-row{display:grid;grid-column:1 / -1;grid-template-columns:1fr minmax(64px,auto);gap:4px 10px;padding:6px 0;border-bottom:1px solid var(--line-2)}
  #peopleBox .ppl-name{grid-column:1}
  #peopleBox .ppl-last{grid-column:2;grid-row:1;text-align:right}
  #peopleBox .ppl-track{grid-column:1;grid-row:2;align-self:center}
  #peopleBox .ppl-n{grid-column:2;grid-row:2}

  /* 手機自動倍率永遠是 100%，這顆用不到；留著還會讓 360px 的頂端列多換一行 */
  #zoomBtn{display:none}
  .top-in{height:auto;padding:8px 12px;gap:8px;flex-wrap:wrap;align-items:center}
  .brand{order:1}
  .brand .lg{height:26px}
  .top-act{order:2;flex:1 1 auto;justify-content:flex-end;gap:6px;min-width:0}
  /* 搜尋放在第一排、吃滿剩下的寬度。
     原本它被藏起來、改放在底部操作列，但那條列上每一顆都跟頂欄或清單頁重複
     （四顆頁面鈕＝頂欄、我的＝清單頁的「我的案子」chip、新增＝清單頁的「＋」），
     2026-09-06 整條拿掉，每一頁多出約 76px 的高度。 */
  .search{flex:1 1 auto;min-width:0;width:auto;font-size:16px}   /* 16px：iOS 小於這個會自動放大整頁 */
  .who,.savestate.ok{display:none}
  .savestate .t{display:inline}
  .nav{order:3;flex:0 0 100%;width:100%;margin:0 -12px -1px;padding:0 12px}
  .nav button{padding:9px 12px;font-size:15px}

  .main{padding:14px 12px calc(24px + env(safe-area-inset-bottom))}
  .ph h2{font-size:19px}
  .stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .stat{padding:11px 12px}
  .stat .n{font-size:21px}
  .stat .l{font-size:13px}
  .cols2{grid-template-columns:1fr}

  /* 表格：改卡片。桌機表格在手機直接不畫（清單頁會渲染 .cards） */
  .tblwrap.rwd{display:none}
  /* 排序控制項在手機自己佔一排，別跟篩選下拉擠在一起 */
  .sortbar{margin-left:0;width:100%}
  .sortbar select{flex:1;min-width:0}
  /* 兩顆等高，方向鈕才不會比選單矮一截、也才點得準 */
  .sortbar .btn{align-self:stretch;padding-top:0;padding-bottom:0}
  /* iOS 對字級小於 16px 的表單元件會在聚焦時自動放大整頁，使用者得手動縮回去 */
  .filters select,.filters input[type=text],.filters input[type=search]{font-size:16px}
  .summary{font-size:12.5px;gap:10px}
  .summary .legend{margin-left:0;width:100%}

  /* 看板：單欄＋上方狀態切換 */
  .board{flex-direction:column;gap:8px}
  .col{flex:0 0 auto;width:100%;max-height:none}
  .col.folded{flex:0 0 auto;width:100%}
  .col.folded .col-h{writing-mode:horizontal-tb;height:auto;padding:8px 11px}
  .kcard{cursor:default}
  .board.single .col{display:none}
  .board.single .col.cur{display:flex}
  .dropzones{display:none}

  /* 抽屜＝整頁 */
  .drawer{width:100%;max-width:100%}
  .dh{padding:10px 14px 8px}
  .dh h3{font-size:17px}
  .dh .sub{font-size:12.5px;gap:6px 10px}
  .dh .kpis{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
  .dh .kpi b{font-size:18px}
  .dh .kpi i{font-size:11px}
  .db{padding:12px 12px 90px}
  .tabs button{padding:9px 12px;font-size:15px}
  .quick{grid-template-columns:1fr 1fr}
  .kv{grid-template-columns:1fr}
  /* 清除鈕在手機要點得到——22px 用手指按太小。表格本來就會橫捲，不怕變寬 */
  .datewrap .dateclr{width:32px;height:32px;font-size:15px}
  .datewrap.has > input{padding-right:32px}
  .tbl.edit{min-width:640px}
  .sec-h .c{display:none}
  .anchors{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .chips.tracks{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .statusbar .since{display:none}

  /* 彈窗：貼滿 */
  .modalmask{padding:8px}
  .modal{max-height:calc(92vh / var(--z,1))}
  .modal-foot .n{margin-left:0;width:100%;justify-content:space-between}

  /* 設定 */
  .bigtabs{grid-template-columns:1fr 1fr}
  .aliasrow{grid-template-columns:1fr auto;gap:4px 8px}
  .aliasrow .ar{display:none}

}

/* ── 更窄的機型 ─────────────────────────────────────────────────── */
@media(max-width:400px){
  .stats{grid-template-columns:1fr 1fr}
  .stat .n{font-size:19px}
  .brand .lg{height:23px}
  .dh .kpis{grid-template-columns:repeat(3,1fr)}
  .dh .kpi b{font-size:16px}
}

/* ── App 模式（加到主畫面後開）───────────────────────────────────
   沒有網址列，所以要自己讓開瀏海／動態島，並收掉整頁橡皮筋回彈。
   env() 在沒有安全區的裝置會解析成 0px，桌機加了也不會怎樣。 */
@media(display-mode:standalone),(display-mode:minimal-ui){
  .top{padding-top:env(safe-area-inset-top)}
  body{overscroll-behavior-y:contain}
  /* App 裡長按元件跳出「拷貝／查詢」選單很干擾，但輸入框與內容區要留著 */
  .nav button,.top-act button{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
}

/* ── 列印 ─────────────────────────────────────────────────────────── */
@media print{
  .top,.mask,.toast{display:none !important}
  .drawer{position:static;width:100%;transform:none;box-shadow:none}
  .tblwrap{max-height:none;overflow:visible}
  /* 戰情室每天固定寬、平常靠橫捲：印的時候不捲、整張縮到紙寬（不然只印得到前幾天） */
  .gx-scroll{overflow:visible}
  .gx-in{zoom:.55}
  .gx-row > .gx-lb{position:static}
  .gx-bar,.gx-we,.gx-now{print-color-adjust:exact;-webkit-print-color-adjust:exact}   /* 不印底色的話，加長的框看起來跟真實工期一樣長 */
}

/* 星星在手機上要點得到：撐開觸控範圍但不推動版面（負 margin 抵銷 padding）。
   斷點跟 isMobile() 同一個數字，那邊是 760 這裡也要 760。 */
@media(max-width:760px){
  .star{font-size:19px;padding:6px;margin:-6px 0 -6px -6px}
}

/* 追蹤日期／任務／提醒彈窗 */
@media(max-width:760px){
  /* 【2026-09-17】抽屜分頁多了「任務」變成 5 個，手機放不下，「檔案」被切到只剩一個字、
     而且這排不能滑。不用「可以左右滑」的解法——看不到右邊還有分頁，正是這次壞掉的原因。
     改成平均分寬、數字排到名稱下面，360px 也五個都看得到。 */
  .drawer .tabs{gap:0}
  /* 【2026-09-21】再加「週會」＝案件有 6 個分頁。字再縮一級，360px 還是六個都看得到。 */
  .drawer .tabs button{flex:1 1 0;min-width:0;flex-direction:column;gap:2px;padding:7px 1px 6px;font-size:13.5px;letter-spacing:0}
  .drawer .tabs button .n{font-size:11px;padding:0 3px}
  /* 追蹤日期：上次／下次並排、追蹤人整列，不要三格疊成一長條把「記錄一筆進度」擠下去 */
  .fu-grid{grid-template-columns:1fr 1fr;gap:10px 12px}
  .fu-f:nth-child(3){grid-column:1/-1}
  .fu-hint{font-size:11.5px}
  .fu-quick .chip{padding:5px 10px}
  .fu-row{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"nm nm nm" "od dt by";gap:4px 10px;padding:12px 14px}
  .fu-row .nm{grid-area:nm;white-space:normal}
  .fu-row .od{grid-area:od} .fu-row .dt{grid-area:dt} .fu-row .by{grid-area:by}
  .modal-foot .fu-tip{display:none}
  /* 週會：四格表單在手機會擠成一條線，改兩欄。
     ⚠ 會議日期與記錄人各佔一整列：日期輸入框本身就寬（還有一顆清除鈕），
     擠成半格會把年份切掉，變成「2026/09/2」。已施工與剩餘並排剛好。 */
  .wk-grid{grid-template-columns:1fr 1fr;gap:10px 12px}
  .wk-grid .wk-f:nth-child(1),.wk-grid .wk-f:nth-child(4){grid-column:1/-1}
  .wkbar-n b{font-size:19px}
  .wkrow .rowact{opacity:1;gap:4px}
  .wkrow .rowact .btn{min-height:34px}
  .task{gap:8px}
  .t-l1{grid-template-columns:1fr}                 /* 名稱、負責人上下排 */
  .t-l2{padding-left:0}
  /* 手機的清除鈕是 32px（比桌機大、好按），日期框要跟著加寬，不然年月日被切成「2026/09/:」 */
  .t-l2 .datewrap > input{width:12em}
  .t-l2 .datewrap.has > input{padding-right:32px}
  .g-row{grid-template-columns:minmax(0,7.5em) minmax(0,1fr);gap:6px;padding:3px 6px}
  /* 甘特圖頁：案名欄縮窄；人員週表改成一天一列往下排（七欄在手機上每欄只剩 40px） */
  .gx-row{grid-template-columns:8.5em var(--gx-w,600px)}
  .gx-lb{font-size:13px;padding:6px 8px}
  .pweek{grid-template-columns:minmax(0,1fr)}   /* ⚠ 不能寫 1fr：超長案名會把欄撐寬、整頁橫向捲動 */
  .pday{min-height:0;min-width:0}
  .g-lb{font-size:12px}
  .task .rowact{opacity:1;gap:4px}
  .task .rowact .btn{min-width:34px;min-height:34px}   /* 原本 24px 又緊貼，手指很容易誤刪已完成的任務 */
}

/* 導覽多了「甘特圖」變六顆：360px 的手機「設定」只露出一個字 → 再窄一點的螢幕縮間距與字級 */
@media(max-width:400px){ .nav button{padding:9px 8px;font-size:14px} }

/* 會議錄音：手機上一列塞不下六欄，改成兩行 */
@media(max-width:760px){
  .meet-row,#p-meet .meet-row{grid-template-columns:auto 1fr auto;grid-template-areas:"t t s" "d l w";gap:3px 10px;padding:10px 12px}
  .meet-row .mr-t{grid-area:t;white-space:normal}
  .meet-row .mr-s{grid-area:s}
  .meet-row .mr-d{grid-area:d;font-size:13px;color:var(--ink-3)}
  .meet-row .mr-w{grid-area:w;text-align:right}
  .meet-row .mr-l{grid-area:l;font-size:13px}
  .meet-row .mr-c{display:none}
  #p-meet .meet-row{grid-template-areas:"c c s" "t t t" "d l w"}
  #p-meet .meet-row .mr-c{display:block;grid-area:c}
  .mtodo{flex-direction:column}
  .mtodo .mtd-act{justify-content:flex-start}
  .mv-b{padding:12px}
  .rec-main .rec-t{font-size:34px}
  #p-meet .meet-quick #meetLabel{max-width:none;flex-basis:100%}
  #p-meet .meet-quick .mq-btns{width:100%}
  #p-meet .meet-quick .mq-btns .btn{flex:1 1 0;text-align:center;justify-content:center}
  .modal.meet-assign{max-height:calc(88vh / var(--z,1))}
  .ed-2,.ed-4,.ed-todo{grid-template-columns:minmax(0,1fr) auto}
  .ed-2 .in,.ed-4 .in,.ed-todo .in{grid-column:1 / -1}
  .ed-todo .ed-st{grid-column:1}
  .ed-2 .js-edrm,.ed-4 .js-edrm,.ed-todo .js-edrm{grid-column:2;justify-self:end}
  .ed-act .btn{flex:1 1 0}
  .mv-sec.editing{padding:8px}
}