/* =============================================================================
   訪視紀錄加厚畫面(#/visit)與小表元件 rowgrid(業主核准 2026-10-16;設計 docs/訪視紀錄加厚設計.md §4)
   只用 tokens.css 的變數;不碰 components.css。
   .savebar 只在檔尾那一段、只限這兩個畫面(.main:has(.vr-section, .vr-careplan))覆寫:手機/平板釘在畫面底是業主 2026-10-17 裁示,
   是 2026-08-11「全系統不釘住」的例外;其他畫面一字不動。
   拉條照全系統(細、常駐);留白最小化(.bar 上下 sp-2)。
   ============================================================================= */

/* ---- 三段 ---- */
.vr-section { margin-bottom: var(--sp-4); }
.vr-section .vr-sechead { margin-top: var(--sp-3); margin-bottom: var(--sp-2); }
.vr-section:first-of-type .vr-sechead { margin-top: 0; }
.vr-set { margin-bottom: var(--sp-2); }
.vr-set > .formgroup { margin-top: var(--sp-2); }
.vr-head-meta .vrow { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); font-size: 0.8125rem; margin-top: var(--sp-1); }
.vr-head-meta .vrow .val { white-space: pre-wrap; }
.vr-carry, .vr-prevplan { margin-bottom: var(--sp-2); }
.vr-saveerr { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.vr-saveerr .msg { margin-bottom: 0; }

/* ---- 生命徵象一列八格(手機 2 欄) ---- */
.vr-vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--sp-2) var(--sp-3); }
.vr-vitals .field { margin-bottom: 0; }
.inp.num { font-variant-numeric: tabular-nums; }
.inp.warn { border-color: var(--amber); background: var(--amber-bg); }   /* 超出合理區間/與上次差很多:只標黃不擋(R-531) */
.vr-prevval { margin-top: 2px; }
.vr-prevval.warn { color: var(--amber); font-weight: 700; }
@media (max-width: 600px) {
  .vr-vitals { grid-template-columns: 1fr 1fr; }
}

/* ---- form-schema 群組(一格一筆):一群一列,勾選方格+文字+空格/圈選/小方格 ---- */
.vr-group { margin-bottom: var(--sp-2); min-width: 0; }
.vr-gtitle { font-weight: 700; font-size: 0.8125rem; color: var(--ink); margin-bottom: var(--sp-1); }
.vr-opt, .vr-box { display: flex; align-items: flex-start; gap: var(--sp-2); padding: 3px 0; cursor: pointer; font-size: 0.8125rem; line-height: 1.6; }
.vr-opt .chk, .vr-box .chk { margin-top: 3px; flex: 0 0 auto; }
.vr-opt.on > .vr-opttext, .vr-box.on > .vr-opttext { color: var(--val); }
.vr-opttext { display: inline; min-width: 0; }
.vr-optwrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.vr-boxes { display: inline-flex; flex-wrap: wrap; gap: 0 var(--sp-3); }
.vr-box { padding: 1px 0; }
.inp.vr-fill { display: inline-block; width: 5.5em; padding: 1px 6px; margin: 0 2px; font-size: 0.8125rem; vertical-align: baseline; }
.inp.vr-fill.short { width: 3.5em; }
.inp.vr-fill.long { width: 12em; max-width: 100%; }
.inp.vr-sub { display: inline-block; width: auto; padding: 1px 4px; margin: 0 2px; font-size: 0.8125rem; vertical-align: baseline; }
.vr-tpl { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: 0.8125rem; }

/* ---- 上次訪視(卡 2 收合區) ---- */
details.vr-prev { margin-top: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-ctrl); padding: var(--sp-2) var(--sp-3); background: var(--paper); }
details.vr-prev > summary { cursor: pointer; font-size: 0.8125rem; }
details.vr-prev > summary .hint { display: inline; }
details.vr-prev[open] > summary { margin-bottom: var(--sp-2); }
details.vr-prev .vrow { display: flex; gap: var(--sp-1); font-size: 0.8125rem; }
.vr-minibox { margin-top: var(--sp-2); }
table.vr-mini { border-collapse: collapse; width: 100%; font-size: 0.78125rem; background: #fff; }
table.vr-mini th, table.vr-mini td { border: 1px solid var(--line); padding: 2px 6px; text-align: left; vertical-align: top; }
table.vr-mini thead th { background: var(--wash); font-weight: 700; }
.vr-trend { margin-top: var(--sp-2); }
details.trend > summary { cursor: pointer; font-size: 0.8125rem; font-weight: 700; }

/* ---- 傷口照片條與未歸列照片 ---- */
.vr-photos { margin: var(--sp-1) 0 var(--sp-2); padding: var(--sp-1) var(--sp-2); border-left: 3px solid var(--line); }
.vr-photos .bar { margin: var(--sp-1) 0; }
.vr-thumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-start; }
.vr-thumb { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.vr-thumb img { display: block; max-height: 6rem; max-width: 8rem; border: 1px solid var(--line); border-radius: var(--r-ctrl); background: #fff; }
.vr-thumb .btn.sm { padding: 1px 6px; font-size: 0.6875rem; }
label.btn { cursor: pointer; }
.vr-photos-unassigned { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--amber); border-radius: var(--r-ctrl); background: var(--amber-bg); }
.vr-photos-unassigned .vr-unassigned-row { align-items: center; }
.vr-photos-unassigned select.inp.auto { width: auto; }

/* ---- 照護計畫(卡 10;勾了「照護計畫是否調整」才展開) ---- */
.vr-careplan { margin-top: var(--sp-2); }

/* ---- 小表 rowgrid:桌機真表格 / 手機一列一卡 ---- */
.rowgrid { margin-bottom: var(--sp-2); }
.rowgrid-wrap { overflow-x: auto; }   /* 欄多時表格自己橫捲(拉條照全系統細、常駐) */
table.rowgrid-table { border-collapse: collapse; width: 100%; font-size: 0.8125rem; background: #fff; }
table.rowgrid-table th, table.rowgrid-table td { border: 1px solid var(--line); padding: 2px 4px; text-align: left; vertical-align: top; }
table.rowgrid-table thead th { background: var(--wash); font-weight: 700; white-space: nowrap; font-size: 0.78125rem; }
table.rowgrid-table td .inp { width: 100%; min-width: 5.5em; padding: 3px 6px; font-size: 0.8125rem; }
table.rowgrid-table td select.inp { min-width: 7em; }
table.rowgrid-table td .inp.num { min-width: 4em; }
table.rowgrid-table td .inp[type="date"] { min-width: 9em; }
table.rowgrid-table td.act { white-space: nowrap; width: 1%; }
table.rowgrid-table td.act .chip { margin-left: var(--sp-1); }
table.rowgrid-table tr.carried td { background: var(--amber-bg); }
table.rowgrid-table tr.extra td { border-top: 0; padding: 0 var(--sp-2) var(--sp-1); background: var(--paper); }
.rowgrid .val.ro { display: inline-block; padding: 3px 2px; color: var(--val); white-space: nowrap; }
.rowgrid .rg-foot { margin: var(--sp-1) 0 0; }
.rowgrid .rg-empty { padding: var(--sp-1) 0; }

.rowgrid.cards .rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.rowgrid.cards .row { border: 1px solid var(--line); border-radius: var(--r-ctrl); padding: var(--sp-2); background: #fff; }
.rowgrid.cards .row.carried { background: var(--amber-bg); }
.rowgrid.cards .rg-head { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.8125rem; margin-bottom: var(--sp-1); }
.rowgrid.cards .rg-head .spacer { flex: 1; }
.rowgrid.cards .rg-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--sp-1) var(--sp-2); }
.rowgrid.cards .rg-f { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 0.8125rem; }
.rowgrid.cards .rg-f .rg-l { font-weight: 700; font-size: 0.75rem; color: var(--ink); }
.rowgrid.cards .rg-f .inp { width: 100%; }
.rowgrid.cards .vr-photos { margin-top: var(--sp-2); }
@media (max-width: 600px) {
  .rowgrid.cards .rg-fields { grid-template-columns: 1fr 1fr; }
}

/* ---- 手機/平板(data-pan)不攤成 --pan-w(審查修正 2026-10-17) ----
   全系統的平移檢視是給「一列一個人、橫向十餘欄」的表格用的;訪視紀錄與個案照護資料是**輸入表單**,
   攤成 1024 寬等於邊平移邊打字(體溫填完要往右滑一屏才找得到脈搏)。這兩個畫面的 .main 維持視窗寬,
   卡片單欄一直往下(設計 §4.2「手機 390 寬單欄」)。只認畫面內容(:has),不動 pan.js 與 components.css。 */
:root[data-pan] .main:has(.vr-section, .vr-careplan) { width: 100%; }
:root[data-pan] .main:has(.vr-section, .vr-careplan) .pagehead { flex-wrap: wrap; }
:root[data-pan] .main:has(.vr-section, .vr-careplan) .headbtns { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; }
:root[data-pan] .main:has(.vr-section, .vr-careplan) .headbtns .gsearch-inp { width: 8rem; }
/* 平板/窄桌機(沒有 data-pan,2026-10-17 於 707px 寬實測):同一列放「個案照護資料」「列印訪視紀錄單」加全站搜尋框,
   共用 .headbtns 是 flex:0 0 auto 不縮,h1 被擠成 0 寬、一個字一行。只在這兩個畫面放寬:標題至少 12em,不夠就讓按鈕群換行。
   不動共用 components.css(正式站零影響)。 */
.main:has(.vr-section, .vr-careplan) .pagehead { flex-wrap: wrap; }
.main:has(.vr-section, .vr-careplan) .pagehead h1 { flex: 1 1 14em; min-width: 12em; }
.main:has(.vr-section, .vr-careplan) .headbtns { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
@media (max-width: 600px) {
  .vr-section .gridfit, .main:has(.vr-careplan) .gridfit { grid-template-columns: 1fr; }   /* 手機單欄;.vr-vitals 維持 2 欄 */
}

/* ---- 觸控裝置的小空格/圈選下拉/小表格子不得小於 16px(審查 2026-10-17) ----
   components.css 的 iOS 防自動放大規則是 .inp (0,1,0),被上面 .inp.vr-fill / .inp.vr-sub (0,2,0) 的 0.8125rem 蓋掉;
   iOS Safari 點到 <16px 的輸入格會把整頁放大且不縮回(box 2026-09-25 同一雷)。寬度用 em,放大字級後自動跟著放寬。 */
@media (pointer: coarse) {
  .inp.vr-fill, .inp.vr-sub, table.rowgrid-table td .inp, .vr-photos-unassigned select.inp.auto { font-size: max(1rem, 16px); }
}

/* ---- 卡片裡的提示(取代 toast;手機上 toast 會蓋住頁尾的儲存鈕) ---- */
.vr-note { margin-top: var(--sp-1); }
.vr-note.bad { color: var(--red); font-weight: 700; }
.vr-upnote { margin: var(--sp-1) 0 0; }
.vr-prevfocus { margin-bottom: var(--sp-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }

/* ---- 這兩個畫面的 toast 改放畫面上方(審查 2026-10-17;第二輪審查拿掉 data-pan 限制,桌機也放上方) ----
   .toasts 全系統釘在畫面底部中央 4 秒;訪視紀錄/個案照護資料的儲存列在底(手機釘住、桌機本來就 sticky 在頁尾),剛存完(「已儲存」還在)
   或剛上傳完照片就再按儲存,點到的是 toast 不是鈕(手機實測 elementFromPoint(儲存鈕中心)=DIV.toast;桌機 1100×800 以下儲存鈕也被蓋,
   Mac 13/14 吋筆電不全螢幕就會碰到——業主裁示四種環境一起顧)。不分裝置一律放到頂欄下方;其他畫面不動。 */
body:has(.vr-section, .vr-careplan) .toasts { bottom: auto; top: calc(var(--topbar-h, 3rem) + var(--sp-3)); }

/* ---- 手機/平板的「放棄/儲存」列釘在畫面底(業主 2026-10-17 裁示;只限訪視紀錄與個案照護資料兩個畫面) ----
   這是 2026-08-11「平移檢視(data-pan)不釘住」裁示的例外:這兩頁是十張卡的長表單、手機現場分段輸入,每存一次都要捲到底不合用。
   用 sticky、不用 fixed:data-pan 下 .main 自己就是直向捲動容器(components.css :root[data-pan] .main overflow-y:auto、height:100%),
   sticky 貼在它的底緣,一路捲都看得到;捲到最底時它排在內容後面,最後一張卡與「＋新增」都不會被蓋住,不必量高度補 padding。
   fixed 釘的是 100vh 的底緣——Chrome 開縮放+大字體時那一截看不見(業主手機實測 2026-08-22,位置條因此改回正常版面),
   iPhone 鍵盤彈出時 fixed 元素也會留在鍵盤後面;.shell 的高度已用 --vvh(實際看得到的高度),sticky 跟著它走。
   鍵盤彈出時 iOS Safari / Android Chrome 另外會把視覺視窗往上推(visualViewport.offsetTop>0),整個版面被推出畫面、列浮在鍵盤上方一截空白之上
   ——這一半由 pan.js undoKeyboardPush 處理(只靠程式碼判斷、沒有實機;要看什麼寫在 docs/LTC0測試站.md「真機提醒」)。
   桌機不在 data-pan,照 components.css 既有的 sticky(位置方式一字不變)。2026-08-11 註解裡「sticky 會算到畫面外」是當時捲動容器還是 .panwrap 的事。
   bottom 不是 0(第二輪審查 2026-10-17 實測):sticky 的 bottom 貼的是捲動容器的**內容盒**,.main 有 padding,bottom:0 會讓列底緣停在 .main 底緣
   上方 16px(手機)/20px(桌機),那一截內容照樣捲過去而且點得到(拇指貼螢幕底邊滑動就勾到藏在列後面的「清醒」)。
   bottom 設成負的 padding,列就貼齊 .main 的底緣;捲到底時它在內容流裡的位置不受影響。 */
.main:has(.vr-section, .vr-careplan) .savebar { bottom: calc(-1 * var(--sp-6)); }   /* 桌機 .main padding-bottom = --sp-6(components.css) */
:root[data-pan] .main:has(.vr-section, .vr-careplan) .savebar {
  position: sticky; bottom: calc(-1 * var(--sp-5)); z-index: 5;   /* data-pan 的 .main padding = --sp-5 */
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));   /* iPhone 底部手勢列;viewport-fit 沒開時是 0 */
  box-shadow: 0 -6px 12px -8px rgba(0, 0, 0, .25);
}
/* 把格子/「＋新增」捲進畫面時(scrollIntoView、Tab 到下一格、點新增後的新列——rowgrid.js add() 會對新列 scrollIntoView,
   scroll-padding 只對 scrollIntoView/焦點捲動生效,光放在這裡不夠)留住儲存列那一截,不會剛好停在它底下
   (觸控裝置的儲存列實量 80px:兩顆大鈕 + 上下 sp-3;6rem=96px 留一點餘裕,字級放大時 rem 跟著長) */
.main:has(.vr-section, .vr-careplan) { scroll-padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
/* 列上的「未儲存」小標:有改動才出現(visit.js isDirtyNow、patientcare.js snap 比對);.chip 是 inline-block,hidden 要自己藏 */
.vr-unsaved { margin-left: var(--sp-1); }
.vr-unsaved[hidden] { display: none; }