/* 結算指令:一行一句匯款指令、帳齡標記 — 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; }

.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; }