/* 首頁三塊的樣式 — F23:餘額 / 誰要給誰多少錢 / 細節。
 *
 * 水位語言的樣式在這一檔已經沒有殘留:權益長條與「該匯/該收」標記隨 F13 走,
 * F22 那張「這個月要匯」獨立卡的 .mn* 隨 F23 走(它併進第二塊,同一個數字不
 * 在同一頁上出現兩次),「月繳建議」並列的 .mr 也一起走。 */

/* 還沒有任何帳戶時的引導 — F21。刻意只有一張卡:使用者說的是「有點引導就好」,
   多步驟精靈是另一種擋路的方式。 */
.hs-title { font-size: 1.0625rem; font-weight: 640; letter-spacing: -.01em; margin: 2px 0 6px; }
.hs-note { margin-top: 10px; }
.hs-sep { height: 1px; background: var(--line); margin: 20px 0 14px; }

/* 二、誰要給誰多少錢。每一行是一個行動,不是一個部位。

   **自己那一行不染色,只加底與放大。** 「要匯出去」染色會讀起來像好消息或
   警訊,它兩者都不是(這是 F22 那張卡就定下的判斷,併進來之後照舊)。認出
   「這是我」靠的是名字後面那顆「你」與淺底,以及它永遠排第一。 */
.who.fl-me { background: var(--chip); border-radius: var(--radius-s); padding-left: 10px; padding-right: 10px; }
.fl-me .val b { font-size: 1.0625rem; }
.fl-you {
  font-style: normal; font-size: 0.6875rem; font-weight: 600; color: var(--accent);
  background: var(--chip); border-radius: var(--radius-pill); padding: 1px 7px; margin-left: 6px;
}
/* 別人那一行的「你」是空的,空的 chip 會變成一顆看不懂的小圓角方塊 */
.fl-you:empty { display: none; }
.fl-me .fl-you { background: var(--card); }
/* 結算指令那一種畫法裡的「要匯給」:是連接詞,不該跟名字一樣重 */
.fl-arrow { font-style: normal; font-size: 0.75rem; color: var(--dim); margin: 0 7px; }
/* 成分:預設收起,點右邊那顆箭頭**往下推開** — #182 建立、#220 換版位。

   使用者 2026-08-23 原話:「往下點下去的詳細資訊有點太亂,還有新長出來的資訊
   應該往下展開而不是塞在中間一個小格子」。#182 把那三個事實收進 `.who .id` 裡
   的一個 span:它擠在名字底下、與金額同一列,寬度是那一列剩下的部分,一句話在
   那裡折成三四行(390×844 實測到的)。現在每一位成員是一個 `.fl-item`(上面那
   一行 + 底下的展開區),展開區佔滿整個卡寬,把後面每一行往下推。

   **`.hide` 那一條照舊自己寫**,理由也照舊:style.css 的 `.who .id span
   { display: block }` 是 (0,2,1),壓得過 `.fl-why.hide` 的 (0,2,0)。展開區搬出
   `.id` 之後那一場仗其實已經打完了,但 `.fl-note` / `.fl-draft` 這些兄弟隨時會
   被搬進去,而 `#flow` 把它拉到 (1,2,0) 是零成本的保險。

   **動畫是 animation 不是 transition,而那是被迫的也是這個 app 的既有語彙。**
   點下去之後 `paintFlow()` 重畫整塊(`#flow` 的 innerHTML 換掉),展開區那個節點
   因此是**新生的** —— transition 要的是同一個元素上的值變了,新生的元素沒有起
   點。`.bal-sheet` 的 `bal-up`(#216)踩的是同一條路:一張彈出來的紙也是每次重
   畫,所以它也是 keyframes。**開有動畫、關沒有**,兩者一致。

   **`max-height` 的上限只活在 keyframes 裡。** 靜態規則不寫 max-height,所以動畫
   跑完之後沒有任何東西夾住高度 —— 事實再長也不會被切掉。

   **140px / .26s / linear 是量出來的。** max-height 的動畫只有「0 到內容高度」
   那一段看得見,後面那一段元素已經停在自己的高度上,什麼都不動 —— 所以看得見的
   時間是 `時長 × 內容高 ÷ 上限`。390×844 實測:三個事實 82px、四個 107px(單行
   19.4px + 5px 間距),於是看得見的是 152ms 與 199ms,都落在 skill 規範的
   150–300ms 裡。上限先寫 220px 時同一組內容只動 82ms,實測太短。linear 同理:
   ease-out 會把那一段擠在前 30ms 跑完。

   內容超過 140px(五個以上事實、或某一句折成兩行)時動畫的最後一小段會跳一下
   ——**只有那 .26s 之內**,停下來的高度仍然是內容自己的高度。

   ⚠️ **動畫是點名制,不是「開著就跑」— D-F72(#309)。** 這一條原本掛在
   `#flow .fl-why:not(.hide)` 上,而上面那一段自己已經寫出了它為什麼會壞:整塊
   每次重畫,展開區那個節點**是新生的**。新生 + 「開著就跑」= 每一次重畫,**每一
   個開著的展開區**都重跑一次 fl-open —— 兩位成員同時展開時點任何一列(或者只是
   記完一筆讓 onState 重畫一次),另一列會當場塌回 0 再長回來。390 實測:咪那一
   列沒有被碰到,高度 82px → 0px、opacity 1 → 0,再花 260ms 長回來。
   所以掛的是 `.fl-open`,而那個 class 由 home.js 只發給**這一下被點開的那一列**
   (`whyJust`),用完就清。 */
#flow .fl-why { overflow: hidden; }
#flow .fl-why.hide { display: none; }
#flow .fl-why.fl-open { animation: fl-open .26s linear; }
@keyframes fl-open { from { max-height: 0; opacity: 0; } to { max-height: 140px; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #flow .fl-why.fl-open { animation: none; } }
/* 展開區的內距住在裡面那一層:會動的是外層那一格的高度,內距跟著一起動的話
   收合的那一瞬間卡片高度會分兩段跳。左邊那條細線同 .fl-draft / .bk-cand 的語言
   (這是一段附屬說明,不是一則警告);22px 是 `.sw`(10px)加 `.who` 的 gap
   (12px),所以第一個字與上面那一行的名字對齊。 */
.fl-facts {
  margin: 2px 0 12px 22px; padding-left: 11px;
  border-left: 2px solid var(--line);
}
/* 一行一個事實 —— 長的句子在自己那一行折行,不與別的事實搶同一行。 */
.fl-fact { font-size: 0.78125rem; color: var(--dim); line-height: 1.55; }
.fl-fact + .fl-fact { margin-top: 5px; }

/* 分隔線畫在整組(行 + 展開區)的下緣,不是那一行自己的下緣 —— 展開的時候線
   夾在行與它自己的成分中間,讀起來像那一行已經結束了。style.css 的
   `.who:last-child` 現在對每一個 `.who` 都成立(它是 `.fl-item` 裡唯一的孩子),
   所以那一條要在這裡接手,不然整塊一條分隔線都不剩。 */
#flow .fl-item { border-bottom: 1px solid var(--line); }
#flow .fl-item:last-child { border-bottom: 0; }
#flow .fl-item .who { border-bottom: 0; }
/* 一行一顆,44px 的點擊目標(同 .bk-open 的理由)。它排在金額之後 = 最右邊。 */
.fl-more {
  flex: none; font: inherit; color: var(--dim); cursor: pointer;
  background: none; border: 0; padding: 0 2px;
  min-width: 32px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* ⚠️ **展開時轉向那一條在 #367(D-H6)搬去 style.css 了**:記號現在是一顆 svg
   (`web/icons/chevron.js`),而轉的是它 —— 這一層也轉的話就是 180°。同 .fl-noteq
   與 me.css 的 .ledger-fold。 */
.fl-more .caret { font-size: 0.75rem; line-height: 1; }
/* 自己那一行的內距讓按鈕貼到卡緣,不然它會比別人那幾行往左縮 10px。 */
.who.fl-me .fl-more { margin-right: -6px; }

.fl-none { padding: 10px 0; }
.fl-note { margin-top: 12px; line-height: 1.5; }

/* 結算指令那一種畫法裡,一整列就是一顆鈕 — #254(票 ④)。**版面一個 px 都不
   換**:`.who` 那條規則(style.css)給的 flex、內距與分隔線照舊生效,這裡只是
   把瀏覽器替 `<button>` 加的那一套(自己的字體、置中、邊框、背景)拆回來。

   `button.who` 是 (0,1,1),壓得過 `.who` 的 (0,1,0);而 `.who.fl-me` 是
   (0,2,0),所以自己那一行的淺底仍然贏得過這裡的 `background: none` —— 那正是
   要的(認出「這是我」靠的就是那個底)。 */
button.who {
  width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--line);
}
button.who:last-child { border-bottom: 0; }
/* 最右邊那個「›」:它說的是「這一列有地方可去」,不是一個要跟金額搶注意力的
   東西。同 .mg-entry 的箭頭(#367 之後連那段 path 都是同一份,字級因此一起降)。 */
.fl-go { flex: none; font-size: 0.8125rem; color: var(--dim); margin-left: -4px; }

/* 底部那段常駐說明的開關 — #254(票 ⑤)。**它是一行字,不是一顆藥丸**:那一段
   是註腳,一顆有邊框的鈕會讓它看起來比上面的指令還重要。44px 的點擊目標同
   .fl-more,靠內距撐出來而不是靠高度(它自己只有一行字高)。 */
.fl-noteq {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 12px; padding: 11px 0; min-height: 22px;
  font: inherit; font-size: 0.78125rem; color: var(--dim);
  background: none; border: 0; cursor: pointer;
}
.fl-noteq .caret { font-size: 0.6875rem; line-height: 1; }
/* 開關在上、說明在下,兩者是一組 —— 收起來的時候卡底不該留下一段空白。 */
.fl-noteq + .fl-note { margin-top: 2px; }
.fl-note.hide { display: none; }

/* 合資池的「拆夥的話拿回多少」是**試算不是待辦** — F28。這一行排在數字之前
   而且不是 muted:它要改變底下每一個數字被讀成什麼,晚一步或輕一分都來不及
   ——使用者照著匯出去之後才讀到「其實這只是試算」沒有任何意義。
   左側細線同 close.css 的語言:這是一句限定條件,不是一則警告。 */
.fl-draft {
  margin: 2px 0 12px; padding: 9px 0 9px 11px; line-height: 1.55;
  font-size: 0.84375rem; border-left: 2px solid var(--line);
}

/* 空帳戶的下一步 — F30。「目前兩清 ✓」的版位換成兩顆按鈕,所以第一句話要先把
   那個結論收回來(不是兩清,是還沒開始),再給路。按鈕與它的說明是一組,說明
   在按鈕底下而不是旁邊:390px 寬放不下兩欄。 */
.fl-blank { margin: 2px 0 14px; line-height: 1.55; }
.fl-step { margin-top: 14px; }
.fl-step:first-of-type { margin-top: 0; }
.fl-step .fl-note { margin-top: 6px; }

/* 一、餘額:**一張卡、兩個數字一左一右** — #216(使用者裁示 2026-08-23)。

   **左=戶頭餘額、右=帳面餘額**,照 #182 原本那一份定位。#183 中間把它們拆成
   上下兩張卡(帳面字大在上、戶頭字小在下),#216 收回那個拆法:兩張卡讀起來像
   兩件事,而它們是同一個問題的兩個答案。**兩個一樣大**因此也跟著回來 —— 一大
   一小會讀成主從。

   **24px 是量出來的,不是挑出來的。** 入口鈕搬去卡底之後這一列不必再讓出 88px
   +8px,每一半從 112px 變成 154px(卡內寬 320px 扣 12px 間距再對半)。
   `NT$999,999` 在 20/24/28px 下各是 106/127/148px,而負號那一格再多約 12px:
   24px 兩邊都進得去、28px 在七位數負值上會截。八位數以上仍然會省略尾巴 ——
   該讓的是數字的尾巴,#147 就定下的取捨。

   右半格為 null(集資戶頭、關帳後)時整格不進畫面,左半格靠 flex: 1 自己撐滿
   那一列 —— 一個數字的排版不必另外寫一條規則。 */
.bal-head { display: flex; align-items: flex-start; gap: 12px; }
.bal-one { flex: 1; min-width: 0; }
.bal-head .big {
  font-size: 1.5rem; margin: 2px 0 0;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bal-head .big small { font-size: 0.875rem; margin-right: 3px; }
/* 標題與它的問號同一行。標題本身不收縮(收縮的話「戶頭餘額」會先被折成兩行,
   而問號要貼在字尾,不是貼在卡緣)。 */
.bal-name { display: flex; align-items: center; gap: 2px; min-width: 0; }
.bal-name .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 小問號 — #216:解釋收在它後面,點開才顯示。

   ⚠️ **「28px 而不是 44px」那個折衷在 D-F100(#373)被推翻了。** 當年的帳寫著:
   「這一顆是一次性的解釋,而 44px 高的它會把標題那一行撐開、把兩個大數字往下推
   出第一屏」——那筆帳仍然是真的,而且量得到:390×844 上 `.bal-head` 那一整塊從
   **66px 長到 90px**(標題列 28→44、數字那一列 22→44,各補一段)。只是使用者裁的
   是「全站觸控目標一律 ≥44×44」,沒有「它只是解釋」這個例外。

   **圓圈仍然是 28px。** 長大的是盒子不是畫面:框與底搬到 `::before` 那一層(絕對
   定位、置中、28×28),元素自己剩下一個 44×44 的透明方塊 —— 同 log.css 的
   `.dots`(`min-width/min-height: 44px` + `border: 0`)那一份,這個 app 對「小圖示
   鈕」既有的答案。

   `::before` **不用 `z-index`**:它只有一圈框、沒有底,而框畫在 28px 的周長上、
   「?」站在正中間,兩者一格都不重疊 —— 需要 `z-index: -1` 的是有底色的那一種
   (log.css 的 `.lghelp`,它連 `isolation: isolate` 一起寫,理由記在那裡)。

   ⚠️ **`margin-left: -8px` 是為了讓問號一格都不動。** 盒子從 28 長到 44,圓圈的
   圓心跟著往右挪 8px —— 而 #216 的原話是「問號要貼在字尾,不是貼在卡緣」。負左
   margin 把盒子往左拉回 8px,圓圈於是停在它本來的位置,多出來的 8px 命中區長在
   標題那幾個字上面(標題不是觸控目標,重疊不會搶走誰的點擊)。 */
.bal-q {
  position: relative; flex: none; font: inherit; font-size: 0.75rem; line-height: 1;
  width: 44px; height: 44px; padding: 0; margin-left: -8px;
  color: var(--dim); background: none; border: 0;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.bal-q::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border: 1px solid var(--line); border-radius: 50%;
}
.bal-q[aria-expanded="true"] { color: var(--accent); }
.bal-q[aria-expanded="true"]::before { border-color: var(--accent); }

/* 數字與它的入口同一列 — #225。數字自己收縮(`.bal-head .big` 那條省略尾巴的
   規則靠 min-width: 0 才生效),筆不收縮:它是一個點得到的東西,讓掉的只能是
   數字的尾巴。 */
.bal-num { display: flex; align-items: center; gap: 4px; min-width: 0; }
.bal-num .big { min-width: 0; }
/* 「更新餘額」那支筆 — #225(使用者裁示 2026-08-23:「入口改成戶頭餘額旁邊的
   一支筆」)。

   **視覺 22px,觸控 44px** —— 這句話沒變,換的是 44 寫在哪一層。

   ⚠️ **D-F100(#373):`::after` 那塊透明方塊退役,44 改寫在元素自己身上。**
   原本的做法是「盒子 22×22,44 的下限補在 `::after` 上,它 `position: absolute`
   不佔版面」——那對手指是對的,對**量得到的東西**卻是空的:`getBoundingClientRect()`
   回的是元素自己的邊框盒,偽元素不在裡面。D-F100 把「觸控目標 ≥44」從一行列印改
   成 `test_browsers.TheLayoutHoldsOnEverySize` 的一條斷言,而一條看不見 `::after`
   的斷言只有兩種收場:放它過(那條線就白畫了),或整支測試永遠紅。所以盒子自己
   長到 44。

   **筆的字形一格都沒動**(還是那支 17px 的 SVG),按下去那圈實心底也還是 22px 的
   圓 —— 它搬到 `::before`,而那一層要 `z-index: -1`(它有底色,不加就蓋住筆)加
   `isolation: isolate`(不加的話負的 z-index 會沉到 `.card` 的底色後面,實心圈整顆
   看不見 —— `.card` 沒有 position 也沒有 z-index,不自成一個層疊環境)。

   ⚠️ **`margin-left: -11px` 是為了讓筆貼著數字**(#225 的原話:「筆貼在數字後面,
   不是貼在卡緣」)。盒子從 22 長到 44,置中的筆會跟著往右挪 11px;負左 margin 把
   盒子拉回去,筆於是停在原位,多出來的命中區長在數字的尾巴上 —— 數字不是觸控
   目標,重疊不搶點擊。

   **上下不補負 margin**:那會讓這顆與上面那顆 `.bal-q` 的兩塊 44 區疊在一起
   (兩列之間只有幾個像素),而 D-F100 要的是「都 44」不是「都 44 而且互相搶」。
   代價就是那張卡高了 —— 帳記在 `.bal-q` 上面。 */
.bal-pen {
  position: relative; isolation: isolate; flex: none; font: inherit; line-height: 1;
  width: 44px; height: 44px; padding: 0; margin: 2px 0 0 -11px;
  background: none; border: 0; color: var(--accent); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
/* 展開時那支筆變實心圈,不是換一個字形:同一顆鈕的兩個狀態要看得出來,而換
   字形會讓「這是不是同一顆鈕」變成一個要想的問題(同 .bk-open 原本靠底色講的
   那件事)。 */
.bal-pen[aria-expanded="true"]::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  background: var(--chip); border-radius: 50%;
}
.bk-pen { display: block; }

/* 卡底那一區:只剩摘要一整行 — #225(入口搬去數字旁邊那支筆)。

   **分隔線畫在 .bk-sum 上,不在這一層。** 共用戶頭還沒回報過時整行不畫
   (#183),那時候這一層是空的 —— 線畫在這裡會在卡底留下一條沒有內容的橫線
   (390×844 實測)。#216 把線放在這一層是因為那時候入口也住在這裡,空摘要下面
   還有一顆鈕撐著;鈕走了,線就得跟著那句話走。 */
.bal-act { min-width: 0; }
#bankSum { min-width: 0; }

/* 問號的彈層 — #216。形狀照 log.css 的 .ascrim / .asheet(「更多」那張向上彈的
   選單,#168 起就是這個 app 裡「一張彈出來的紙」長的樣子):一層幕加一張紙,
   點幕就關。

   **抄的是版面,規則住在這裡。** style.css 凍結之後只收「不只一個 view 用得到」
   的東西(ARCHITECTURE §4.3),而這兩張紙只有首頁開得出來。

   z-index 同那一組(幕 24 / 紙 25):蓋過 nav(22)與浮動的記一筆(21),仍然在
   登入閘(auth.css 的 30)之下 —— 沒有身分時 app 不該有東西冒出來。

   **`.hide` 那兩條自己寫。** `.bal-sheet` 與 `.hide` 同特異度(各一個 class),
   而 view 的 css 後掛進 <head> —— 後到的贏,`display: block` 會蓋掉
   `display: none`,彈層於是開場就攤在畫面上。同 .bk-dot / .bk-mode 踩過的坑。 */
.bal-scrim { position: fixed; inset: 0; z-index: 24; background: var(--scrim); }
.bal-scrim.hide { display: none; }
.bal-sheet {
  position: fixed; left: 8px; right: 8px; z-index: 25;
  bottom: calc(var(--navh, 68px) + 8px);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-l); padding: 14px 16px 16px; box-shadow: var(--shadow);
  animation: bal-up .18s cubic-bezier(.2, .8, .3, 1);
}
.bal-sheet.hide { display: none; }
@keyframes bal-up { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .bal-sheet { animation: none; } }
/* 紙彈在畫面底部,離被按的那顆問號很遠 —— 它要自己說得出「這是哪一個數字」
   (同 .atitle 的理由)。 */
.bal-sheet-t {
  font-size: 0.9375rem; font-weight: 640; letter-spacing: -.01em;
  padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--line);
}
.bal-sheet .muted { line-height: 1.6; }
.bal-sheet .muted + .muted { margin-top: 10px; }
/* 紙裡的分節小標 — D-F95(#357)。一張紙收了兩顆問號的話,兩段話之間要有人說
   「換一個問題了」;段距(上面那一條的 10px)只講得出「還是同一件事的下一句」。

   **它比 `.bal-sheet-t` 小一號、沒有那條分隔線**:紙的標題只有一個(那是「這是
   哪一個數字」),而小標是它底下的層級 —— 兩個一樣大的字會讓人以為紙裡塞了第二
   張紙。顏色用正文色而不是 `--dim`:段落本身就是 dim 的,小標再 dim 一次就沉到
   內文底下去了。

   **今天唯一的使用者是 report.js 的分類佔比那張紙**,而它仍然住在這裡:
   `.bal-sheet` 整個家族的規則都在這一支(#216 起),拆一條出去就是同一個彈層的
   樣式住在兩支 css 裡。 */
.bal-sheet-h {
  margin: 14px 0 4px; font-size: 0.84375rem; font-weight: 640; color: var(--ink);
}
.bal-sheet-t + .bal-sheet-h { margin-top: 0; }
/* 差額還掛著的紅點 — #204。實心 --warn,同 `.mg-dot.bad` 的作法(帳上有一件事
   沒收乾淨,用同一種紅講)。7px:它排在那支筆後面,再大就變成第三
   個要讀的東西。

   `.hide` 是單一 class,跟 `.bk-dot` 同特異度,而 view 的 css 是後掛進 <head>
   的 —— 後到的贏,`classList.toggle("hide")` 會加得上去卻不生效(#158 的
   `#payerLabel`、#174 的 `#stCloseLabel` 都是這個坑)。所以收起來那一條自己
   寫,不靠 style.css 那一條。 */
/* #254(票 ④)把三個字放進去,所以它從一個 7px 的圓變成一顆小籤:寬度由字撐
   開,顏色與圓點時代逐字相同(實心 --warn)。一個沒有字的色塊要人自己猜它在說
   什麼 —— UI 評審 #244 抓到的正是那一下猜測。 */
.bk-dot {
  display: inline-block; border-radius: var(--radius-pill); flex: none;
  margin-left: 6px; padding: 1px 6px;
  background: var(--warn); color: var(--on-warn);
  font-size: 0.65625rem; line-height: 0.9375rem; font-weight: 650; white-space: nowrap;
}
.bk-dot.hide { display: none; }

/* 摘要那一行:上次回報的實際餘額多少、跟戶頭餘額差多少。#147 之前它整條就是
   入口那顆按鈕,入口搬走之後它只剩資訊 —— 而資訊一個字都沒少。

   **分隔線畫在這一行自己身上**(#225):入口離開卡底之後,這一行是那一區唯一
   的內容,而它有不畫的時候(共用戶頭還沒回報過 — #183)。線跟著那句話走,那句
   話不在的時候線也不在。仍然不長一個獨立的 .bk-sep div —— 那會多一份 margin,
   而這張卡每一個 px 都在跟「誰要給誰多少錢」搶第一屏。 */
.bk-sum {
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
  border-top: 1px solid var(--line); margin-top: 14px; padding-top: 10px;
}
/* 「實際餘額」不參與收縮:讓得出去的是後面那句差額,不是這四個字。沒有這一條,
   flex 會先把最左邊的標籤壓成兩行(NT$987,654,321 那種長度實測到的)。 */
.bk-sum .label { flex: none; }
.bk-sum-v {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bk-sum-v b { font-weight: 600; }
.bk-sub { margin-top: 12px; line-height: 1.5; }

/* 三、細節:折疊起來的東西的組標題,不是一張卡 */
.dt-head { display: block; margin: 26px 4px 10px; }

/* INV-1 自檢:帳平時整張卡不進 DOM,只有帳不平才長出這張警示卡 */
.invAlert { border-color: var(--danger); }
.invAlert .msg { color: var(--danger); font-weight: 600; line-height: 1.45; margin-top: 6px; }
.invAlert .raw { color: var(--dim); font-size: 0.75rem; margin-top: 6px; }

/* 實際餘額的回報表單。owner-only 被拒時的錯誤跟 close.css 的 .cz-block 同一
 * 套語言:左側 warn 色的細線,不是整卡變紅。 */
/* 一個輸入、兩種結論(F18):先看到差額,再選它是什麼意思。差額那一行是要
   拿來做決定的數字,所以比上面「上次回報與帳面差多少」的 muted 說明更重:
   對得上是 good,對不上是 warn。 */
.bk-diff { margin-top: 8px; font-size: 0.84375rem; line-height: 1.5; }

.bk-modes { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.bk-mode {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 9px 11px; border-radius: var(--radius-s); border: 1px solid transparent;
}
/* 差額為 0 時「修正帳面」整個選項收起。style.css 的 .hide 只有一個 class,
   壓不過上面那條 display: flex —— 這一檔排在 style.css 後面,同特異度時後來
   者勝。兩個 class 疊起來才蓋得掉。 */
.bk-mode.hide { display: none; }
.bk-mode:has(input:checked) { background: var(--chip); border-color: var(--line); }
/* style.css 的 input 選到所有 input,包含 width: 100% —— radio 不擋掉那條就會
   撐成整列寬,把說明文字擠成一行一個字。add.css 的 .share checkbox 早就踩過
   同一顆地雷,做法照抄:寬高寫死。 */
.bk-mode input[type=radio] {
  width: 18px; height: 18px; flex: none;
  accent-color: var(--accent); margin: 1px 0 0; padding: 0;
}
.bk-mode-t { flex: 1; min-width: 0; font-size: 0.84375rem; }
.bk-mode-t b { font-weight: 600; }
.bk-mode-t .muted { display: block; margin-top: 2px; line-height: 1.45; }

/* 對帳候選:唯讀診斷,靠左邊那條細線說「這只是提示」。 */
.bk-candhead { margin-top: 14px; }
.bk-cand {
  font-size: 0.78125rem; color: var(--dim); margin-top: 6px;
  border-left: 2px solid var(--line); padding: 2px 0 2px 10px;
}
/* 送出鈕捲進畫面時,底下要留得下那條固定的導覽列 — #225 的 bug。

   **量到的**(390×844,首頁餘額卡,表單展開,scrollY = 0):送出鈕
   `[35, 750, 320, 49]`,而 `nav` 是 `position: fixed` 的 `[0, 776, 390, 68]`
   (z-index 22)、浮動的「記一筆」是 `[318, 772, 56, 56]`(z-index 21)。鈕的
   下緣 23px 因此壓在 nav 底下,而被蓋掉的那一段正中央是「首頁」那一格 ——
   **使用者已經在首頁上,點下去什麼都不會發生**。選了②③④之後表單更長:鈕落在
   y=833(②④)與 y=906(③),整顆掉出 844 的視窗外,elementFromPoint 對鈕上
   15 個取樣點全部回 OFFSCREEN(0/15 點得到)。這就是「輸入任何數字都沒反應」。

   `scroll-margin-bottom` 是 `scrollIntoView({block: "end"})` 的落點補償:
   home.js 在展開表單與換選項時各叫一次,鈕的下緣因此停在那兩層浮的東西上面,
   而不是停在它們底下。--navh 由 nav.js 量完真的高度寫進 :root,回退值同
   `.bal-sheet` 那一條。

   **+84 是浮動的「記一筆」,不是留白。** 只補 nav 的話鈕停在 y=706,而 `.fab`
   坐在 `bottom: calc(var(--navh) + 16px)`、56px 高 —— 它的頂在畫面底部上方
   `--navh + 72`,正好蓋掉鈕最右邊那 37px(390 實測:15 個取樣點有 2 個回
   `BUTTON#fab`)。72 是那顆鈕自己的 16 + 56,末尾的 12 是呼吸。 */
#bankSubmit { scroll-margin-bottom: calc(var(--navh, 68px) + 84px); }

.bk-block {
  margin-top: 10px; padding: 10px 12px;
  border-left: 2px solid var(--warn); color: var(--warn);
  background: var(--chip); border-radius: 0 8px 8px 0; font-size: 0.84375rem;
}

/* 二點七五、最近幾筆 — #243,個人記帳限定(home.js 的 paintRecent)。

   **三欄一列,中間那欄自己收縮。** 日期與金額都是等寬數字,寬度可預期;會長到
   撐破版面的是說明(使用者自己打的字),所以省略號只掛在它身上 —— 同 `.bal-num`
   讓數字自己收縮的那一條(#225)。

   分隔線畫在**列與列之間**(`+` 選擇器)而不是每一列的上緣:第一列上面是卡片
   標題、最後一列下面是那句「完整的流水在紀錄那一頁」,兩端各多一條橫線會把它們
   讀成清單的一部分。 */
.hr-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; }
.hr-row + .hr-row { border-top: 1px solid var(--line); }
.hr-date { flex: none; font-size: 0.78125rem; color: var(--dim); }
.hr-what { flex: 1; min-width: 0; font-size: 0.875rem; }
.hr-desc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 種類與分類自己一行,而不是接在說明後面:說明被省略號截斷時,吃掉的正好是最
   右邊 —— 接在後面的話「支出 · 買菜」是第一個不見的東西。 */
.hr-tag { display: block; font-size: 0.75rem; margin-top: 2px; }
.hr-amt { flex: none; font-size: 0.875rem; }
.hr-none { margin-top: 6px; }
.hr-note { margin-top: 10px; font-size: 0.78125rem; }

/* 帳面餘額那張紙上,公積金那一行底下的一句解釋 — #254(票 ④)。那一行是這個詞
   在首頁上唯一出現的地方,所以它自己要說得出自己是誰。字級比那一行小一階:它是
   註腳,不是第二個數字。 */
.bal-note {
  display: block; margin-top: 4px; font-size: 0.75rem; color: var(--dim); line-height: 1.55;
}

/* 空帳本上,那支筆要做的事寫成一句話 — #254(票 ⑦)。它站在摘要那一行的版位上
   (那時候摘要沒有東西可講 —— 一筆都沒記、也還沒回報過),所以這裡只補一條上緣
   的線與間距,形狀同 .bk-sum。 */
.bk-start {
  display: block; width: 100%; margin-top: 14px; padding-top: 10px;
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
  text-align: left;
}

/* 最近幾筆:一整列就是一顆鈕 — #254(票 ②)。同 button.who 那一段的理由與作法
   ——版面照舊由 .hr-row 那條規則給,這裡只拆掉瀏覽器替 <button> 加的那一套。
   `button.hr-row` 是 (0,1,1),壓得過 .hr-row 的 (0,1,0)。 */
button.hr-row {
  width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: none; border: 0;
}
/* 列與列之間那條線由 `.hr-row + .hr-row`(0,2,0)給,它壓得過上面那句
   `border: 0`(0,1,1)—— 兩顆鈕之間仍然有線。 */
.hr-go { flex: none; font-size: 0.75rem; color: var(--dim); }

/* 二點五、這個月誰出的錢 / 這個月誰收的錢 — #286(D-F59)、#313(D-F75)。
 *
 * **圓餅與圖例一條規則都不在這裡**:那一整組住在 report.css 的 `.rpcats` 底下,
 * 而那是 web/pie.js 與 CSS 之間的契約(#243 實測過漏掉 `.rpcats` 的樣子:390×844
 * 上畫出來的是一個全黑的圓)。三個 host 共用同一份,這裡再抄一份就是同一張圖兩
 * 套外觀。
 *
 * 這一條補的只是這張卡自己的呼吸:標題(.label)與底下那一句口徑之間 —— style.css
 * 的 .label / .muted 都沒有外距,兩行會黏在一起。寫成規則而不是 inline style,是
 * 因為那句話是樣板裡的固定內容,不是一個算出來的值。 */
#payersCard > .muted { margin-top: 6px; }

/* 兩張圓並排,底下一份圖例 — D-F75(#313,使用者裁示 2026-09-03)。
 *
 * **各佔一半減掉中間那道間隙的一半**(`calc(50% - 6px)` 配 `gap: 12px`)。圓是
 * SVG、viewBox 100×100,所以縮放不影響環寬比例(`stroke-width` 定義在 viewBox
 * 的座標系裡)—— 兩張並排不必為了粗細再開一條規則。 */
.pie-pair { display: flex; gap: 12px; margin-top: 12px; }
/* 一整格就是一顆鈕 —— 同 `button.hr-row` 與 report.css 的 `button.rpcat` 那兩段
   的理由與作法:版面由上面那條 flex 給,這裡只拆掉瀏覽器替 `<button>` 加的那一
   套(字型、顏色、置中、邊框),再把選中狀態要用的那一圈邊框留成透明的 —— 選中
   與沒選中的兩顆因此一樣大,切換時版面不會抖。 */
.pie-tab {
  flex: 0 0 calc(50% - 6px); min-width: 0;
  padding: 8px 4px 10px; font: inherit; color: inherit; text-align: center;
  background: none; border: 1px solid transparent; border-radius: var(--radius-m);
  cursor: pointer;
}
/* 選中的那一張:淺底加一圈線。**不只靠顏色** —— 底色與邊框是形狀上的差別,而讀
   屏讀的是 `aria-pressed`(同圖例那一列「顏色不是唯一的資訊載體」的判斷)。 */
.pie-tab[aria-pressed="true"] { background: var(--chip); border-color: var(--line); }
/* 圓填滿鈕裡那一格。`.pie-tab .rpcats .rppie` 是 (0,3,0),壓得過 report.css 那條
   `.rpcats .rppie` 的 (0,2,0) —— 那一條寫死 176px,兩張並排時 390 上會撐破版面。
   `aspect-ratio` 讓高度跟著寬度走,而不是繼承那條規則的 176px。 */
.pie-tab .rpcats .rppie {
  width: 100%; height: auto; aspect-ratio: 1; margin: 0 auto 6px;
}
/* 空的那一邊:一個虛線灰圈 — D-F75。**它不掛 `.rppie`**,所以上面那兩條
   (固定尺寸與 `stroke-width: 17`)碰不到它:那一組講的是有東西可畫的圓,而這一
   個要讀得出「這一邊沒有東西」。細線加虛線,顏色是 `--dim` —— 一個實心或空白的
   圓環會被讀成「有東西,只是很小」(pie.js 檔頭的原話)。 */
.rppie-empty {
  display: block; width: 100%; height: auto; aspect-ratio: 1; margin: 0 auto 6px;
}
.rppie-empty circle {
  fill: none; stroke: var(--dim); stroke-width: 2; stroke-dasharray: 5 4;
}
/* 圓底下兩行:這一張是哪一種、一整圈是多少錢。字級比金額小一階 —— 它是標籤,
   數字才是那一格要人讀的東西。 */
.pie-name { display: block; font-size: 0.78125rem; color: var(--dim); }
.pie-tab .num { display: block; margin-top: 2px; font-size: 0.9375rem; }