/* 結算指令:一行一句匯款指令、帳齡標記 — F18。
   對帳候選的樣式跟著對帳搬去 home.css,結算歷史的樣式跟著它搬去流水頁。

   #146 這一塊搬進共同帳戶頁的管理視圖,收合標題因此改用 me.css 的 .cardfold
   (帳戶設定與成員管理是同一顆),原本這裡那一套 .sthead / .sthead-id /
   .stheadsub / .stchev 一起退役 —— 它們是 report.css 的 .rphead 那一種形狀,
   而 #144 已經把那一份也收掉了。留下來的只有兩條:警訊在標題列上的顏色,
   以及卡裡分段用的那條線。 */

/* 短缺警訊借的是 .fold-s 那個版位(#231 之後那個版位在管理視圖的入口列上,
   同成員管理的人數),但它是警訊不是摘要。me.css 的 `.mg-entry .fold-s` 把顏色
   寫死成 --dim 而且特異度相同,單靠 .warn 壓不過它;這裡多一節選擇器把它拉高,
   不去動 me.css(那一列的樣式不歸這一支)。

   **選擇器從 `.cardfold` 換成 `.mg-entry` — #231**:收合那一套跟著三張卡變成
   三個子頁一起退役了(理由寫在 me.css 那一段),而這一條要打到的節點沒有換,
   只是它現在住在入口列上。 */
.mg-entry .fold-s.stheadnote { color: var(--warn); }

/* 子頁上的三段:警訊 / 指令 / 淨部位與帳齡。以前各是一張 .card(那時整塊是
   首頁上的一個區塊),現在外面已經有一張卡了,分段靠留白與一條線 — 同 me.css
   的 .mfoot。 */
.stwarn { margin-bottom: 14px; }
#stNet { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

/* 指令分三區 — #250:方向由區塊標題講,不靠箭頭猜(settle.js 的 GROUPS)。
   標題退一階(字級與顏色同 .muted),它是版面上的分隔而不是第二層內容。 */
.stgroup + .stgroup { margin-top: 16px; }
.stgt { font-size: 0.78125rem; font-weight: 640; color: var(--dim); margin: 0 0 2px; }

/* 一列指令 = 那一行 + 它攤開時的明細,所以分隔線移到外面這一層 — #250。
   留在 .instr 上的話,明細會被畫在線的**外面**,看起來像下一筆的抬頭。 */
.strow { border-bottom: 1px solid var(--line); }
.strow:last-child { border-bottom: 0; }

.instr { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; }
.instr .pay { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.instr input.stamt { width: 92px; padding: 7px 10px; }

/* 誰跟誰 + 受款戶頭 — #250。窄螢幕上戶頭那一段自己換行(金額與鈕在
   `white-space: nowrap` 的那一格,不會被擠掉)。 */
.stwho { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.stbank { font-size: 0.71875rem; color: var(--dim); }

/* 計算明細 — #250。數字全是後端發過的,這裡只排版(settle.js 的 why())。 */
.stwhy { font-size: 0.75rem; color: var(--dim); padding: 0 0 11px; font-variant-numeric: tabular-nums; }

.stbatch { margin-top: 12px; }
/* 整批登記的頁內確認卡 — #803。筆數與合計一行,兩顆鈕排在它底下。 */
.stask { background: var(--chip); border-radius: var(--radius-s); padding: 10px 11px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stasknote { flex-basis: 100%; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

.conflict {
  font-size: 0.78125rem; color: var(--warn); background: var(--chip);
  border-radius: var(--radius-s); padding: 8px 11px; margin-bottom: 4px;
}
/* `.stver`(「帳本版本 v132」那一行)在 #250 退役 —— 它是 §4.1 的樂觀鎖版本,
   併發保護一格都不經過畫面,查證寫在 settle.js 的 drawPlan 上。 */

.short { margin-top: 8px; }

/* 帳齡:更早的那格是逾期,紅點是唯一需要一眼認出的東西 */
.ages { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.age { font-size: 0.71875rem; color: var(--dim); background: var(--chip); border-radius: var(--radius-pill); padding: 1px 8px; }
.age.over { color: var(--warn); }
/* 逾期那一點 — #392 從一個 `●` 字元換成一個畫出來的圓:`content` 裡的字符由
   字體決定大小與基線,而這一顆要與旁邊 11.5px 的字對齊。 */
.age.over::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: var(--radius-pill); background: currentColor;
  vertical-align: 1px; margin-right: 4px;
}
.age.flat { background: transparent; padding-left: 0; }

/* 結算試算那一頁 — #624(D-H36 ④)。**清單那一半一條規則都沒有**:它借的是上面
   `.strow` / `.instr` / `.stwho` 那一組(結算指令頁畫「誰要給誰多少錢」的那一
   種),同一個問題只該有一種長相。新規則只有應付那一塊與幾處留白 —— 而 `settle.css`
   在首屏閘門的關鍵路徑上(index.html 的 `<link media=print>` 全數被
   `TheFirstScreenArrivesInTime` 計入),所以這一段刻意短。 */
.spt { margin: 0 0 2px; }
.spnote { margin-bottom: 8px; }

/* 頂部每人應付 — #703。方向色同首頁第一卡(#664,home.css `.hv-take` / `.hv-give`):
   要付 accent、會收 綠、0 dim。底下那條線把它與三個方案隔開。 */
.spdue { margin-bottom: 16px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.spdue [data-tone="give"] { color: var(--accent); }
.spdue [data-tone="take"] { color: var(--ok); }
.spdue [data-tone="none"] { color: var(--dim); }

/* 三個方案 — #754。籤的長相同報表頁的 `.rptabs`(views/report.css,那一份不在這一頁
   的關鍵路徑上,所以抄形狀不抄檔);三格並排在一條橫軸上,一格 100% 寬,
   `scroll-snap` 讓手指滑一下就停在下一格。動畫是 `scroll-behavior: smooth`。 */
.sptabs { display: flex; gap: 6px; margin-bottom: 10px; }
/* **不寫 `nowrap`**:320 寬 + 大字級三顆並排放不下四個字(實測差 3px),那時讓字
   自己折成兩行,不撐出卡外。 */
.sptabs button {
  flex: 1 1 0; min-width: 0; font: inherit; font-size: 0.8125rem; line-height: 1.2;
  padding: 6px 4px; min-height: 44px; color: var(--ink); background: var(--chip);
  cursor: pointer; border: 1px solid transparent; border-radius: var(--radius-pill);
}
.sptabs button[aria-selected="true"] { background: var(--card); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.sptabs button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.sptrack {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
}
.sptrack::-webkit-scrollbar { display: none; }
.sppane { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
/* 關掉動畫的人直接跳到那一格 —— 同 style.css 那幾塊 `prefers-reduced-motion`。 */
@media (prefers-reduced-motion: reduce) {
  .sptrack { scroll-behavior: auto; }
}