/* 紀錄:頂上的左右切換、日曆檢視、篩選 chips、月份分隔列、流水列與展開後的分錄層 */

/* ------------------------------------------- 交易明細 / 日曆檢視 — #239

   頂上那一組是 style.css 的 `.seg`(這個 app 對「幾選一」既有的語彙:記一筆的
   種類、帳戶設定的三組、報表的月份都是它),只多兩件事 —— **左右各半**
   (`flex: 1`,而不是跟著字寬走),以及和底下那一塊之間的一格距離。使用者的話是
   「最上面分左右按鈕」,而兩顆貼著左邊、右邊留一大片空白讀起來不是左右兩半。 */
.lgtabs { margin-bottom: 12px; }
.lgtabs button { flex: 1; }

/* 月份那一列:‹ 2026 年 8 月 ›。形狀借報表那一組月份 stepping(#217),規則住在
   這裡而不是 style.css —— 那份從 #144 起只收「不只一個 view 用得到」的東西
   (ARCHITECTURE §4.3),而 report.css 是報表自己的檔案,兩頁不互相 import。

   月份的字走這一頁自己的 `monthText`(「2026 年 8 月」),**不是報表那邊的
   `2026-08`**:同一頁上月份分隔列與篩選下拉都是這個寫法,而兩頁不統一是 #217
   登記過的取捨,不是漏改。 */
.calstep { align-items: center; margin: 0 0 8px; }
.calstep b { font-size: 0.84375rem; font-weight: 640; }
.calarrow {
  font: inherit; font-size: 1.0625rem; line-height: 1; cursor: pointer;
  min-width: 44px; min-height: 44px; padding: 0;
  color: var(--dim); background: none; border: 0;
}
.calarrow:disabled { opacity: .3; cursor: not-allowed; }

/* 七格一列。**兩層用同一條 `grid-template-columns`**,所以星期抬頭與底下的日期
   永遠對得齊 —— 各寫一份的下場是某一種字級底下差半格,而那種錯位讀的人只會記錯
   星期幾。 */
.calhead, .calgrid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calhead {
  padding-bottom: 5px; border-bottom: 1px solid var(--line);
  font-size: 0.71875rem; color: var(--dim); text-align: center;
}
.calgrid { gap: 2px; padding: 5px 0 6px; }

/* 一格 = 日期 + 當天支出的小字。44px 是點擊目標的下限(同這支檔案裡的 `.dots`)。

   金額那一行**空著也佔位**(`min-height`):0 的那一天留白,而如果那一行的高度
   跟著內容縮,同一列上有金額與沒金額的格子會一高一矮,整張月曆就成了鋸齒。 */
.calcell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font: inherit; cursor: pointer; min-height: 44px; padding: 5px 1px;
  color: var(--ink); background: none;
  border: 1px solid transparent; border-radius: var(--radius-s);
}
.calcell b { font-size: 0.8125rem; font-weight: 500; line-height: 1; }
.calsum {
  max-width: 100%; min-height: 1.25em; font-size: 0.625rem; line-height: 1.25;
  color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 選中的那一天:著色的規則與這一頁其他「被選中」的東西同一句話(`.chip` 的
   `aria-pressed="true"`)。今天只在數字底下畫一條線 —— 它是一個座標,不是一個
   選擇,而兩者長得一樣的話畫面上就有兩個「現在在這裡」。 */
.calcell[aria-pressed="true"] { background: var(--card); border-color: var(--accent); }
.calcell[aria-pressed="true"] b { color: var(--accent); font-weight: 640; }

/* 今天那一格的標記 — #248(UI 評審 #244 第 7 章)。原本只有一條 1px 的下劃線,
   而在 1x 的螢幕上它和沒有標記讀起來是同一件事(那也是 `.txn.dead` 在 #156 修過
   的同一種病:一條看不出來的線等於沒有線)。

   **加重的是同一個記號,不是換一個**:線變 2px、字加粗,今天仍然只在數字底下畫
   一條線 —— 它是一個座標,不是一個選擇,而兩者長得一樣的話畫面上就有兩個「現在
   在這裡」(選中那一格是著色的底 + 邊框,那一條規則一格都沒動)。

   **排在選中那一條後面**:兩條選擇器同分(各一個 class + 一個屬性),而今天被選
   中時要讀得出「這是今天」—— 粗體與那條線因此蓋得過去,顏色留給選中那一條。 */
.calcell[data-today] b {
  font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}

/* 月份底下那一行:左邊當月支出合計,右邊「回今天」 — #248。
   `.row` 是 space-between,兩個項目剛好各據一端。 */
.calsub { align-items: center; margin: 0 0 6px; font-size: 0.75rem; color: var(--dim); }
/* ⚠️ **`::after` 那塊透明命中區在 D-F100(#373)退役,44 改寫在鈕自己身上。**
   理由整段記在同一支檔案底下那段 ⛔ 註解上(一句話:量得到的是元素的邊框盒,偽
   元素不在裡面,而 D-F100 把「觸控目標 ≥44」變成了一條斷言)。

   **字級與顏色一格都沒動** —— 長大的是盒子:`min-height` 把它撐到 44,而 12px 的
   字仍然由 `<button>` 自己垂直置中。這一顆站在 `.calsub` 那一列裡
   (`align-items: center`),所以整列跟著高到 44。 */
.calhome {
  font: inherit; font-size: 0.75rem; cursor: pointer;
  white-space: nowrap; color: var(--accent);
  background: none; border: 0; padding: 4px 0 4px 8px;
  min-height: 44px; min-width: 44px;
}
.calhome:disabled { color: var(--dim); cursor: default; }

/* 頂上那一格關鍵字 — #248(UI 評審 #244 第 4 章)。

   **底走 `--card` 而不是 style.css 的 `--bg`。** 那條全域規則是給表單裡的欄位寫
   的(它們躺在卡片上,所以要比卡片深一階);這一格躺在同一張卡上,再深一階讀起
   來像一個沒填完的表單。`type="search"` 在 iOS Safari 上會自己長出圓角與內距,
   `appearance: none` 把它收回這個 app 自己的形狀(同 add.css 對核取方塊那一條的
   理由:系統的畫法關掉、元素本身留著)。

   收尾那顆 ✕ 是瀏覽器畫的(`::-webkit-search-cancel-button`),留著 —— 那是
   「清掉重來」在這個控制項上系統既有的答案,而這一頁沒有第二個。 */
/* 一列上兩件事:打字收窄,與那顆漏斗 — #594。使用者原話「篩選按鈕 放到 搜尋說明
   或分類 的右邊」。搜尋框吃掉剩下的寬(`flex: 1`),那顆鈕 `flex: none` 守住自己
   的 44(見底下 `.ftog`)。

   `.lgq` 上那個 `min-width: 0` 同這支檔案裡 `.lg-rows` 與 `.txn summary > .lg-main`
   那兩條:flex 子項的預設 `min-width: auto` 是它的**內容寬**,而一格 `<input>` 的
   內容寬是它的 `size`(預設 20ch)。**今天它咬不到** —— 360 寬實測這一格分到
   276px,20ch 在 0.8125rem 底下遠小於它(拿掉那一行再跑一次,版面一格都沒動)。
   留著是因為下一個把 placeholder 加長、或把字級調大的人不會回來看這一行。 */
.lgfind { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
/* 高度不寫在這裡:`padding` 撐出來的 40px 由 style.css 那條全站的
   `input:not([type=checkbox]):not([type=radio]) { min-height: 44px }` 補到 44
   (D-F100 / #373)。內距留著 —— 它決定的是字離邊框多遠,不是這一格多高。 */
.lgq {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 0;
  font-size: 0.8125rem; background: var(--card); padding: 9px 12px;
}
.lgq::placeholder { color: var(--dim); }

.chips { margin: 0 0 4px; }
/* 頂端那一行區間 — #706(開題者裁 ①:「<籤名> · <起> – <迄>」,收合展開都在)。
   小一號、淡色:它是清單的抬頭,不是一個控制項。漏斗裡那一排籤(`.rptabs`)與
   期間列(`.period`)的樣式住在 views/report.css,兩頁共用一份(同上面
   `.period` 那一段的理由);這裡只補它們在漏斗裡跟下面幾排籤的間距。 */
.lgspan { font-size: 0.75rem; color: var(--dim); margin: 0 0 6px; }
.chips > .period { margin: 8px 0 6px; }
.chiprow { display: flex; align-items: center; gap: 6px; padding: 3px 0; overflow-x: auto; scrollbar-width: none; }
.chiprow::-webkit-scrollbar { display: none; }
.chiplabel { flex: none; width: 3em; font-size: 0.75rem; color: var(--dim); }

/* 五排籤收合成一顆「篩選」 — #218(UI review 4,使用者核准 2026-08-23)。五排在
   390 寬上佔掉將近半個畫面,而進這一頁的人要看的是流水。**它是那一塊的入口,不是
   那一塊裡的一顆籤** —— #218 當年把這句話畫成「內距大一格的 `.chip`」,#594 改畫成
   搜尋框旁邊的一顆圖示鈕(下一段),而那句話本身一個字沒變。

   「現在有沒有在篩」有兩個說法而它們是同一件事:那顆膠囊上的個數(樣板寫的)與
   `data-on`(顏色)。著色那一格與 `.chip[aria-pressed="true"]` 同一組值 —— 那是
   這一頁對「這一維選過了」既有的顏色(#218 當年抄的是月份那顆下拉的
   `.pickrow[data-on="1"]`,而它在 #592 跟著那顆下拉一起退場了)。 */
/* #594 把它從那一塊的第一顆籤變成搜尋框右邊的一顆圖示鈕(理由在 log.js 的
   `listHTML` 檔頭)。形狀因此改抄 style.css 的 `.hd-icon`:44×44 的方塊、內容置中、
   `padding: 0` —— **44 是 D-F100 的下限**(`test_browsers` 的 `TAP_MIN`,量的是
   `getBoundingClientRect()`),票面寫的 40 會在那一條上紅。

   **名字沒有換成 `lgfind-tog`**:`.ftog` 這個字在 `test_web_states` 的三支探針與
   log.css 的四條規則上都指著同一顆鈕,而換掉它換不到任何東西 —— 搬家的是版位,
   不是這顆鈕是什麼。它住在哪裡由 `.lgfind` 那條規則說。

   `data-on` / `aria-expanded` 三條著色規則一個字都沒動:它們答的是「現在有沒有在
   篩」與「那一塊攤開了沒有」,而那兩件事與它畫的是字還是圖無關。 */
.ftog {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  font: inherit; cursor: pointer; position: relative;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0;
  color: var(--dim); background: var(--chip);
  border: 1px solid transparent; border-radius: var(--radius-pill);
}
.ftog[data-on="1"] { color: var(--accent); background: var(--card); border-color: var(--accent); font-weight: 600; }
.ftog[aria-expanded="true"] { border-color: var(--line); }
.ftog[aria-expanded="true"][data-on="1"] { border-color: var(--accent); }

/* 現在在篩幾維 —— 那顆鈕上原本寫著「篩選 · 2」的那一半。幾何抄 style.css 的
   `.band-badge`(全站「右上角一顆小數字」既有的形狀),顏色走主色那一對:
   `--on-accent` 站在 `--accent` 上是對比表裡的「主色鈕字/主色」那一列。

   **它掛在鈕的裡面,不是像 `.band-badge` 那樣騎在邊上**:那一顆騎的是一張整寬的
   卡(騎出去的 6px 落在卡與卡的間隙裡),而這一顆的宿主是一顆貼著內容右緣的
   44×44 —— 騎出去就是「有元素寬過視口」那一條不變量(D-F99)的邊界。20px 的
   icon 在 44 裡置中佔 12–32,膠囊佔 25–42 × 3–20,兩者不疊。

   **沒在篩就不印它**(樣板那一句 `picked ? … : ""`),所以這裡沒有「0 要不要藏」
   那一條規則:一顆永遠在的膠囊寫 0 與寫 2 長得一樣醒目,而這顆膠囊唯一的工作就是
   讓「這份清單被篩過」在收合狀態下看得見(#218 記的那一筆)。 */
.ftog-n {
  position: absolute; top: 3px; right: 3px;
  min-width: 17px; padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent);
  font-size: 0.6875rem; line-height: 17px; font-weight: 600; text-align: center;
}

/* 展開的那幾排要看得出「還可以往旁邊滑」 — #218。使用者的原話是「種類那排被切
   一半看不出可橫滑」:切一半是版面的意外,讀起來像畫壞了,不像一個邀請。

   做法是把那一排的內容在邊上**淡出**(mask),而不是在邊上疊一道陰影 —— 那一排
   的籤自己有不透明的底(`.chip` 的 `--chip`),背景層畫什麼都被蓋住(第一版試的
   就是那個經典的捲動陰影,390 實測整條看不見)。淡出的是內容本身,所以蓋不住。

   **淡出只在真的捲得動的那一邊出現**,而那一格由 log.js 量完寫在 `data-l` /
   `data-r` 上 —— 「捲得動嗎」只有版面答得出來(CSS 問不到 scrollWidth)。一律
   吊一道遮邊會說謊:整排明明塞得下,邊上卻還掛著一道漸層,讀起來像被截掉了。

   mask 作用在**捲動框**上(不是跟著內容跑),所以捲到底時那一邊的漸層被 data-r
   收掉,最後一顆籤是完整的。`-webkit-` 那一份留給舊的 iOS Safari。 */
.chiprow[data-r="1"] {
  -webkit-mask-image: linear-gradient(to right, var(--mask-ink) calc(100% - 30px), transparent);
  mask-image: linear-gradient(to right, var(--mask-ink) calc(100% - 30px), transparent);
}
.chiprow[data-l="1"] {
  -webkit-mask-image: linear-gradient(to right, transparent, var(--mask-ink) 22px);
  mask-image: linear-gradient(to right, transparent, var(--mask-ink) 22px);
}
.chiprow[data-l="1"][data-r="1"] {
  -webkit-mask-image: linear-gradient(to right, transparent, var(--mask-ink) 22px, var(--mask-ink) calc(100% - 30px), transparent);
  mask-image: linear-gradient(to right, transparent, var(--mask-ink) 22px, var(--mask-ink) calc(100% - 30px), transparent);
}

.chip {
  flex: none; font: inherit; font-size: 0.78125rem; cursor: pointer; white-space: nowrap;
  color: var(--dim); background: var(--chip);
  border: 1px solid transparent; border-radius: var(--radius-pill); padding: 4px 11px;
}
.chip[aria-pressed="true"] { color: var(--accent); background: var(--card); border-color: var(--accent); font-weight: 600; }

/* ⛔ **月份那顆下拉在 #592 整個退場了** —— 連同它的 `.pickrow` / `.pickrow
   .pick-cur` / `.pickrow[data-on="1"] .pick-cur` 三條規則。它是「一個日曆月」的
   選單(#134 / #229),而使用者要的是報表那一列 `‹ 從 [日期] 到 [日期] ›`
   (原話:「紀錄的 選月份的ui 換成 跟這條同款」)。

   **那一列的樣式不在這裡** —— `.period` 那一組住在 `views/report.css`,兩頁共用
   一份(理由寫在那裡:兩頁各抄一份的下場是同一列控制在兩頁上折行的時機不一樣)。
   `index.html` 上那一排 view 樣式表是**一起**翻成 `media="all"` 的(auth.js 的
   `viewStylesReady()`),所以那一份在這一頁上照樣生效。

   留一條沒有人用的規則,下一個人會以為畫面上還有那一列(同 report.css 對
   `.rpspaced` 那一段登記過的理由)。 */

/* 選中那一天的抬頭底下那一行 — #248(UI 評審 #244 第 7 章)。左邊是「另有…筆
   (不計入支出)」(那一天沒有這種交易時是空的),右邊是「＋ 記這一天」。

   **那一句在左邊、鈕在右邊,而不是反過來**:讀的順序是「這個數字為什麼是這樣」
   在前、「我要做什麼」在後。左邊空著時 `.row` 的 space-between 讓鈕自己靠右,
   版面一格都不用改。 */
.daynote { align-items: center; margin-top: 6px; gap: 8px; }
.daynote .muted { font-size: 0.75rem; }
.dayadd { position: relative; flex: none; font-size: 0.75rem; padding: 5px 11px; }
.dayadd::after { content: ""; position: absolute; inset: -10px -4px; }

/* 月份分隔列:左邊月份,右邊該月小計。小計算的是篩選後看得到的那幾筆。 */
.mbar {
  margin-top: 14px; padding-bottom: 5px;
  font-size: 0.78125rem; color: var(--dim); border-bottom: 1px solid var(--line);
}
.chips + .mbar { margin-top: 6px; }

/* 交易明細那一側的月份分節標題 — D-H29 §1(使用者原話:「每月做分節」)。
   **日曆那一側的 `.mbar` 不跟**(dayHTML 印的那一列講的是「選中的那一天」,而那
   一列上面沒有第二個同級的東西會捲過它),所以 sticky 掛在這一個類別上而不是
   `.mbar` 自己。

   `top: 0` 相對的是**頁面自己那個捲動容器**:這個 app 的 `<header>` 在正常流裡
   (style.css 的 `header` 沒有 position),整頁由 body 捲,所以捲上去之後標題就停
   在視口頂緣、頭上沒有任何一層固定的東西會蓋住它。⚠️ 票面把它寫成「相對 `#v-log`
   這個捲動容器(pane 自己 overflow-y:auto)」—— 那個 pane 今天不是捲動容器,而把
   它改成捲動容器要動整個外殼(#467 桌機那一票的題目),不在這一張票裡。

   **底要不透明**:它停在那裡的時候底下的列正從它身後捲過去,而紙的第一階就是
   `--bg`(交替帶的另一階 `--bg-2` 在它下面一列開始)。下緣那條線改讀 `--rule`
   —— 分節要看得見(對底 3.0),分列只要分得出來(`--line`,1.2),兩條線在 #550
   就是這樣分工的。 */
.lgmonth {
  position: sticky; top: 0; z-index: 2;
  padding-top: 6px; background: var(--bg);
  border-bottom: 1.5px solid var(--rule);
}

/* 一個日期一組 — D-H29 §1。**交替的是組,不是列**(理由整段寫在 log.js 的
   `dayGroups` 上面:同一天兩筆一深一淺讀起來像分成了兩天)。

   日期不再印在每一列上:同一組本來就是同一天,而每列重印一次「2026-08-05」把
   390 寬裡最貴的那一格(說明)擠掉了。改成一組左上角一格小日期。

   **寬度跟著字級走,不寫死 px**:demo 3 那一版寫的是 46px,而字級偏好調大之後
   「8/5」會溢出那一格(agy 對 demo 3 的警告)。#553 為此挑了 `5.4ch`。

   ⚠️ **那個單位不能是 `ch`** — #620。`ch` 與 `ex` 在 `zoom` 底下**兩個引擎算出來
   不一樣**(實測 390×844、大字級、`zoom: 1.15`):同一條 `width: 5.4ch` 的 computed
   值 Chrome 是 `45.4348px`、Safari 是 `52.269px` —— 剛好 1.15 倍,Safari 把 `zoom`
   也乘進了字型度量(`5.4ex` 同病:33.26 / 38.27)。`em` / `rem` / `px` 三個單位兩
   邊逐格相同。多出來的那 6.8px 全部從說明那一格身上扣,而那一格已經沒有餘裕:
   Safari 的紀錄列因此在大字級底下把第二行(短句 + 徽章)折成兩行,
   `TheLogRowsReadAsOneLedger` 的退款列量到 67.99 > 60.75。

   **所以改用 `em`**:它跟著這一行自己的字級走(`@supports not (zoom: 1)` 那條
   Firefox 退路換的是 root font-size,`0.71875rem` 的字與這個寬度一起縮放 —— 那正是
   當初不寫死 px 的理由),而 `zoom` 底下兩個引擎算得一樣。

   ⚠️ **票面那一句 `min-width: 44px` 沒有跟著進來,而那是量出來的**:44 是觸控目標
   的下限(D-F100),而這一格不是觸控目標 —— 它是一句字。加上去之後 320×568 大字級
   的紀錄頁**橫向溢出**(實測:`div > span [290…323] 寬 33`,`TheLayoutHoldsOnEverySize`
   的「有元素寬過視口」當場紅):那一格吃掉 44 + 8 的縫之後,列上那個不縮的金額
   (`.txn summary > .num` 是 `flex: none`)被推出視口。`3.1em` 在同一格是 35.65px,
   而這一格要裝的最長一個是「12/31」—— 量到 32.55px(tabular-nums、0.71875rem)。
   (舊的 `5.4ch` 量到 45.45px,比要裝的多了 13px;上面那句「在同一格是 31px」是
   #553 估的,不是量的。) */
.lg-dg { display: flex; align-items: flex-start; gap: 8px; }
.lg-dg[data-alt="0"], .lg-dg[data-alt="0"] .txn { background: var(--bg); }
.lg-dg[data-alt="1"], .lg-dg[data-alt="1"] .txn { background: var(--bg-2); }
.lg-day {
  flex: none; width: 3.1em; padding-top: 4px;
  font-size: 0.71875rem; line-height: 1.35; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.lg-rows { flex: 1; min-width: 0; }

.empty { padding: 22px 0; text-align: center; }

/* 一本還沒記過帳的帳本 — #248(UI 評審 #244 第 4 章)。這一段不是「篩空了」的
   第二種寫法:那一句在說使用者設錯了條件,而這裡他一個條件都沒設。所以它要接著
   說下一步是什麼,而那顆鈕就是那一步。

   第一行不掛 `.muted`:它是這一段的主詞,而底下那一句才是註腳。 */
.lgnone { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lgnone .lgfirst { margin-top: 8px; }

/* **一列多高就是一屏看得到幾筆** — 總檢 ⑤(三層盒子吃掉 390 的 53%、一屏 3 筆)。
   **一列的高度不是字撐出來的,是那顆「⋯」撐出來的** —— `.dots` 的 `min-height:
   44` 是 D-F100 的觸控目標下限(不准動),而兩行字只有 36px。所以剩下能省的只有
   上下內距:12 → 4 把一列從 62 收到 52,390×844 標準字級的第一屏因此從 6 列變成
   9 列(`test_browsers.TheLogRowsReadAsOneLedger` 逐格量,改大當場紅)。 */
.txn { padding: 4px 0; border-bottom: 1px solid var(--line); }
.txn:last-child { border-bottom: 0; }
/* 那四格之間的縫 10 → 8 — #620。三道縫共 6px,而它們全部落在**說明那一格**身上
   (`.lg-main` 是列上唯一 `flex: 1` 的東西,其餘三個都 `flex: none`)。買的是第二行
   的餘裕:短句 + 徽章在 390 大字級上原本只剩 3.8px 的空隙,一根捲動條(Safari 的
   視口因此是 373 不是 390)就把它擠成第三行。8px 是這一頁既有的縫(`.lg-dg`、
   `.lgfind` 都是它),不是為這一票發明的數字。 */
.txn summary { display: flex; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; line-height: 1.35; }
.txn summary::-webkit-details-marker { display: none; }

/* 每一列左緣那條 4px 的軌,顏色 = 這一筆是哪一種交易 — D-H29 §1(使用者原話:
   「每筆左邊 4px 的軌講的是『哪一種交易』」)。

   ⚠️ **它是一個真的節點,不是 `::before`**,而那不是風格問題:`getBoundingClientRect()`
   回的是元素自己的邊框盒,偽元素不在裡面(同一條理由在這支檔案底下那段 D-F100 的
   ⛔ 註解上寫過一次)—— 探針量不到偽元素,一條量不到的線只有兩種收場。

   **沒有對應 token 的種類走 `--dim`**(沖正、對帳、重估、關帳分配),形狀同 log.js
   的 SPEND / SHORT:表裡沒有的就是預設那一格。被刪掉那一列也是 `--dim`:它的金額
   已經不算數了,軌不該還在喊「這是一筆支出」。

   軌是圖形不是字,所以它對兩種底(`--bg` / `--bg-2`)各要 ≥3.0 ——
   `test_web.EveryThemeMeetsContrast.PAIRS` 的八格。 */
.kind-rail {
  flex: none; width: 4px; align-self: stretch; border-radius: 2px;
  background: var(--dim);
}
.kind-rail[data-kind="expense"] { background: var(--kind-expense); }
.kind-rail[data-kind="income"] { background: var(--kind-income); }
.kind-rail[data-kind="refund"] { background: var(--kind-refund); }
.kind-rail[data-kind="transfer"] { background: var(--kind-transfer); }
.txn.dead .kind-rail { background: var(--dim); }

/* 展開之後的第一列:收合時被拿掉的那句完整的「日期 · 種類 · 分類 · 出錢:… ·
   分攤:…」 — D-H29 §1(「那句機器句下放明細」)。**一個字不丟**,只是換了讀者:
   要對帳的人展開就看得到,不必記得它本來在哪裡。 */
.lg-full { font-size: 0.71875rem; margin-top: 8px; }
/* 已刪除的那一列:**整列**劃掉,不是只有左半邊 — #156。規則本來掛在
   `summary > span:first-child`(#553 之後那一格是 `.lg-main` —— summary 的第一個
   子節點換成了種類軌),而金額是 summary 的倒數第二個 flex item,所以那一列
   最顯眼的東西(NT$1,500)看起來就是一筆活的帳,標題那條線在 1x 又細到看不出來。
   DESIGN-DRAFT §3.5 與 §6.4 兩處都寫「原紀錄以刪除線保留」,講的是那一筆紀錄,
   不是它的某一段。掛在 summary 上,兩個 flex item 一起繼承 —— 形狀同這支檔案裡
   的 `.trow`(編輯軌跡那幾列從第一天就是整列劃掉,含金額)。 */
.txn.dead summary { text-decoration: line-through; opacity: .55; }

/* 小字那一行 — #248 把它拆成兩行(座標一行、內容一行),**#553 把它收回一行**:
   收合的那一列上現在只有一句短的(誰先付 · 幾人分),而完整的那一句在展開那一側。

   `<em>` 的斜體要關掉 —— 這裡借它只是為了「一個沒有語意包袱的行內容器」,同這支
   檔案裡 `.arow em`(那顆圖示)的用法。

   ⚠️ **`display` 是 inline,而那一格是量出來的**:它 block 的時候,那一列上的徽章
   (退款 / 收入 / 已刪除 / 待分攤 / 📎)被擠到第三行去,一列 74px —— 390×844 的第
   一屏因此只剩 6 列。行內排之後徽章與短句同一行,一列 52px、第一屏 9 列
   (`test_browsers.TheLogRowsReadAsOneLedger` 逐格量)。 */
.ml { font-style: normal; font-size: 0.71875rem; }

/* 分錄表上方那一句白話 — #248(UI 評審 #244 第 5 章)。分錄照舊(那是給要看的人
   看的),這一行是給其他人的:它比分錄大一點、在分錄之前,所以先讀到的是「這一筆
   是什麼」,要對帳的人再往下看借貸兩邊。 */
.plain { font-size: 0.8125rem; margin-top: 10px; }

.post { font-size: 0.78125rem; color: var(--dim); margin-top: 6px; }
.post div { display: flex; justify-content: space-between; padding: 2px 0; }
/* 科目名斷得了行 —— **#553 逼出來的,而它是量到的**。分錄那一列是
   `justify-content: space-between` 的 flex,而帳本名裡那一段連續的拉丁字母沒有斷
   點(`rules.NAME_MAX` 給到 64 個字元,矩陣的種子就是「微咪家用
   HouseholdSharedBudget2026 …」)—— 那一格的 min-content 因此是整段英文的寬度,
   右邊那格金額被推出去。這張票把日期那一格從列上挪到左邊的槽(39px),分錄那一列
   跟著窄 39px,而 320×568 大字級剛好是它撐不住的那一格(實測:
   `TheLayoutHoldsOnEverySize` 的「有元素寬過視口」紅在 `div > span [290…323]`)。
   `anywhere` 讓那段英文斷得了行,金額因此永遠留在版面裡。 */
.post div > span:first-child { min-width: 0; overflow-wrap: anywhere; }

/* 徽章不准斷在字中間 — #620。中日文字之間到處都是合法的斷行點,所以一顆放不下的
   「退款」會被拆成「退」與「款」兩行:那一列因此高 43px(實測 Safari,390×844 大
   字級),而讀的人看到的是半顆籤。`nowrap` 讓它要嘛整顆留在這一行、要嘛整顆換行。 */
.tag { font-size: 0.6875rem; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 1px 7px; color: var(--dim); white-space: nowrap; }

/* 退款、收入。兩者都不是錯帳,顏色只在說「錢往哪個方向走」——被刪掉那一列的灰
   刪除線才是「這筆不算數」。

   **那支藍在 #259 進了主題契約(`--income`,web/themes.css)。** 它本來寫死在這裡、
   自己帶一句 `@media (prefers-color-scheme: dark)`,而那種寫法在主題鎖定之後會壞:
   在淺色系統上鎖暗色,整頁是暗的、這顆籤留在亮色的藍上。判準是「這個值本來就分亮
   暗兩份」—— 那它就是主題在管的東西,不是這一支的。

   **退款籤在 #550 從 `--accent` 改讀 `--kind-refund`** — #503 ①(D-H29 §3-6)。
   契約裡從 #392 起就有 `--kind-refund`,而這一顆籤是它唯一該有的讀者;借主色的代
   價在低飽和深色那一塊量得出來:那一塊的 `--kind-income` 逐字等於 `--accent`,所
   以「退款」與「收入」兩顆籤在同一條紀錄清單上**同色**。改讀自己那一格之後兩顆籤
   各有一個身分,而 `--accent` 回去只當「現在在哪一頁」。底色那一格跟著來:
   `--kind-refund-soft`,同 `.tag.in` 以外那三種籤的形狀。

   由 `test_web.TheRefundTagReadsItsOwnKind` 守著 —— 改回 `var(--accent)` 當場紅。 */
.tag.ok { color: var(--kind-refund); border-color: var(--kind-refund); background: var(--kind-refund-soft); }
/* 收入那顆籤在 #392 換成 `--kind-income`,而同一組多了另外三格:支出、退款、
   轉帳(底下三條)。以前只有收入自己有一個 token,其餘三種借 `--warn` 或什麼
   都不借 —— 而「這一筆是哪一種」正是紀錄頁上要一眼看出來的東西。 */
.tag.in { color: var(--kind-income); border-color: var(--kind-income); }

/* 已編輯:不是錯帳,也不是退款——這一列是現在的真相,只是它有歷史。所以既不用
   已刪除的灰刪除線,也不借退款的綠;用中性的強調底,讀成「這一筆有話要說」。

   **那個「強調」到 #494 才第一次生效。** 這一條原本寫的是 `color: var(--fg)`,
   而 `--fg` 這個名字在這個 repo 裡一天都沒有存在過(#248 寫下它的那天,主要文字
   色就叫 `--ink`)—— 指著沒有定義的變數又沒帶退路,整條 `color:` 在 computed-value
   time 就是 invalid,於是這顆籤一路繼承 `.tag` 的 `--dim`,跟旁邊那幾顆沒有話要說
   的籤逐字同色。要的一直是主要文字色:`--dim` 的框加 `--chip` 的底本來就是這一顆
   籤「中性」的那一半,重的那一半在字上。 */
.tag.edited { color: var(--ink); border-color: var(--dim); background: var(--chip); }

/* 「已編輯」現在是一顆鈕 — #248(UI 評審 #244 第 4 章)。軌跡本來就看得見(展開
   就在分錄底下),而評審沒有找到它 —— 徽章自己就是那份資料的名字,所以它按得下
   去。**外觀一格都不換**:它仍然是那顆徽章,只是多了一個游標與一個焦點框
   (`font: inherit` 把按鈕預設的字級與字體收回來)。 */
button.tag { font: inherit; font-size: 0.6875rem; cursor: pointer; }

/* 編輯軌跡:被蓋掉的舊版本在展開之後長在這裡。刪除線與 .txn.dead 同一個意思
   ——那幾版不算數了——差別只在它們現在住在取代它們的那一列底下。 */
.trail { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.tlabel { font-size: 0.75rem; color: var(--dim); margin-bottom: 4px; }
.trow {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 3px 0; font-size: 0.8125rem; text-decoration: line-through; opacity: .6;
}
.tnote { font-size: 0.71875rem; margin-top: 6px; line-height: 1.5; }

/* 長按整列會刪除,所以那一列不該在長按時被系統選字或跳出原生選單 —— 兩者都會
   蓋掉手勢的回饋。形狀同 me-list.js 那一份長按所在的列。 */
.txn summary { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* 編輯那張表單的樣式不在這裡 — #136:編輯跳到「記一筆」那個畫面,用的是
   views/add.css。這一頁只剩退款那張內嵌表單(.rform,見下)。 */

.jump {
  font: inherit; font-size: 0.71875rem; cursor: pointer; white-space: nowrap;
  background: none; border: 0; padding: 1px 2px 1px 6px; color: var(--accent);
}
.back { font-size: 0.71875rem; color: var(--dim); }

/* 被跳到的那列閃一下,否則在長流水裡捲過去也認不出來是哪筆。 */
.txn.hit { animation: hit 1.5s ease-out; }
@keyframes hit { from { background: var(--chip); } to { background: transparent; } }

/* `.acts`(展開後那三顆鈕的橫排)在 #209 收掉了 —— 動作只走「⋯」選單與長按。 */

.rform { margin-top: 10px; padding-top: 2px; border-top: 1px dashed var(--line); }
.rform label.f { margin-top: 10px; }
.rform .rerr { font-size: 0.78125rem; margin-top: 8px; }
.rform .rerr:empty { display: none; }
.rform button { margin-top: 12px; }

/* 沒有帳戶時的空狀態 — F21 */
.lg-empty { margin-top: 4px; }

/* ------------------------------------------------ 每一列的「⋯」與它的選單 — #202

   長按不會自己說話,所以編輯與刪除在收合的那一列上要看得見一個入口。那顆鈕站在
   summary 裡,金額的右邊。

   **金額不准被它擠掉**(票的原話,390 寬)。summary 是 `justify-content:
   space-between` 的 flex:兩個項目時說明靠左、金額靠右,加進第三個之後同一條
   規則會把金額推到中間、三者平分縫隙。所以說明那一格改吃掉剩下的寬度(flex: 1),
   金額與鈕各自釘住不縮 —— 兩個項目時的版面因此一格都沒動,鈕只是接在金額後面。
   `min-width: 0` 是讓長說明在 flex 裡真的斷得了行(flex 項目預設 min-width: auto)。 */
.txn summary > .lg-main { flex: 1; min-width: 0; }
.txn summary > .num { flex: none; }

/* 44px 是點擊目標的下限(同 home.css 那條)。⋯ 本身只有一個字高,靠 min-height
   把它撐到指頭按得到;`align-self: center` 讓它在兩行高的那一列上置中,而不是
   跟著 summary 的 stretch 拉成一條長條。 */
.dots {
  flex: none; align-self: center; font: inherit; font-size: 1.0625rem; line-height: 1;
  min-width: 44px; min-height: 44px; padding: 0;
  cursor: pointer; background: none; border: 0; color: var(--dim);
}
.dots[aria-expanded="true"] { color: var(--accent); }

/* 選單那張紙照的是「更多」那一張向上彈出的選單(#168)的形狀:同一種東西用同一
   種語彙,而且它那三層的疊法已經想過一次了。

   **形狀照抄,規則住在這裡而不是 style.css。** style.css 凍結之後只收「不只一個
   view 用得到」的東西(ARCHITECTURE §4.3),而這張選單從第一天就只有紀錄頁開得
   出來。抄的是版面(離 nav 8px、左右各 8px、圓角、卡片底、往上 16px 的彈出),
   不是那幾條規則本身。

   `--navh` 是 nav 量出來寫在 :root 上的高度,退路 68px 只在它還沒寫上來的那一
   瞬間用得到 —— 這裡不寫死 nav 的高度,它是字級與安全區算出來的。

   **z-index 蓋過整個底部 chrome**(nav 22、浮動的記一筆 21):選單開著的時候,
   點得到的只該有選單自己與那層幕。仍然在登入閘(auth.css 的 30)之下 —— 沒有
   身分時 app 不該有東西冒出來。 */
.ascrim { position: fixed; inset: 0; z-index: 24; background: var(--scrim); }
.asheet {
  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: 12px 16px 2px; box-shadow: var(--shadow);
  animation: acts-up .18s cubic-bezier(.2, .8, .3, 1);
}
@keyframes acts-up { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .asheet { animation: none; } }

/* 選單要說得出「這是哪一筆」:紙彈在畫面底部,離被按的那一列很遠。 */
.atitle { padding-bottom: 10px; border-bottom: 1px solid var(--line); }

/* 一項一列。形狀同「更多」選單裡那三列:圖示、名字、一條分隔線,而 15px 的上下
   內距讓每一列有 52px 高(≥ 44px 的點擊目標)。 */
.arow {
  display: flex; align-items: center; gap: 12px; width: 100%;
  font: inherit; color: var(--ink); background: none; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--line); padding: 15px 0;
}
.arow:last-child { border-bottom: 0; }
.arow em { font-size: 1.0625rem; font-style: normal; color: var(--dim); width: 22px; text-align: center; }
.arow b { flex: 1; text-align: left; font-weight: 600; }

/* 「刪除」與展開後那顆鈕同一個顏色語彙(.ghost.danger)。
   停用寫在它後面:兩條選擇器同分(各兩個 class / 屬性),後面那條才蓋得住,而
   一顆按不下去的鈕不該還在喊危險。 */
.arow.adanger { color: var(--danger); }
.arow[disabled] { color: var(--dim); cursor: not-allowed; }

/* 理由那一行:跟在動作名底下,不是取代它 —— 使用者要先讀到「刪除」,才讀
   「為什麼現在不行」。 */
.awhy { display: block; margin-top: 2px; font-size: 0.75rem; font-weight: 400; color: var(--dim); }

/* ⛔ **`.lghelp` / `.hsheet` / `.hbody` 在 #516 整組拿掉了。** 它們畫的是紀錄頁
   標題旁那顆 (?) 與它彈出來的那張紙(#218),而那顆問號連同它的內容搬進了設定頁
   的詳細說明 —— 留著三條沒有人套用的規則,下一個人得自己去證明它們是死的。
   幕那一條(`.ascrim`)留著:「⋯」選單仍然用它。

   ⚠️ **D-F100(#373)那條理由留在這裡**,因為這支檔案還有兩處指著它:觸控目標的
   44 從 `::after` 搬到元素自己身上,原本是一塊 `inset: -12px` 的透明方塊 —— 對
   手指那是對的,對**量得到的東西**卻是空的:`getBoundingClientRect()` 回的是元素
   自己的邊框盒,偽元素不在裡面,而 D-F100 把「觸控目標 ≥44」從一行列印改成
   `test_browsers.TheLayoutHoldsOnEverySize` 的一條斷言。所以盒子自己 44×44,裝飾
   反過來搬進 `::before`。`.dots` 與 `.calsub` 那顆「回今天」照的是同一條。 */


/* 展開之後那一列縮圖 — #363。骨架與每一格的樣子住在 views/add.css(兩頁共用的
   `.atts` / `.att` / `.attshot`,理由寫在那一段的開頭);這裡只給它與上面那段
   白話句之間的一段距離。 */
.attslot { margin: 8px 0 4px; }
.attslot:empty { display: none; }
/* summary 上那顆「📎 n」。`.tag` 的長相照舊,只是不點得動 —— 它是一個事實,而
   看圖那個動作在展開之後的縮圖上。 */
.tag.clip { cursor: default; }