/* 紀錄:頂上的左右切換、日曆檢視、篩選 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`
   與 `.lghelp`)。

   金額那一行**空著也佔位**(`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 改寫在鈕自己身上。**
   理由整段記在同一支檔案的 `.lghelp` 上(一句話:量得到的是元素的邊框盒,偽元素
   不在裡面,而 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`),留著 —— 那是
   「清掉重來」在這個控制項上系統既有的答案,而這一頁沒有第二個。 */
.lgfind { 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;
  font-size: 0.8125rem; background: var(--card); padding: 9px 12px;
}
.lgq::placeholder { color: var(--dim); }

.chips { margin: 0 0 4px; }
.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 寬上佔掉將近半個畫面,而進這一頁的人要看的是流水。形狀借同一支檔案裡的
   `.chip`(同一種東西用同一種語彙),只有內距大一格 —— 它是那一塊的入口,不是
   那一塊裡的一顆籤。

   「現在有沒有在篩」有兩個說法而它們是同一件事:鈕上那個個數(樣板寫的)與
   `data-on`(顏色)。著色的規則抄月份那一顆的 `[data-on="1"]`(#229 之後是
   `.pickrow[data-on="1"] .pick-cur`),那是這一頁對「這一維選過了」既有的顏色。 */
/* `min-height` 是 D-F100(#373)補的:這顆藥丸的內距撐出 33px,而全站的下限是
   44。它與 `.chip` 同一種語彙,但 `.chip` 是「一塊裡的一顆籤」、這一顆是那一塊的
   入口 —— 長高的只有入口這一顆,那一排籤自己由 `.chiprow` 那條橫捲軸管。 */
.ftog {
  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: 6px 14px;
  margin-bottom: 2px; min-height: 44px;
}
.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); }

/* 展開的那幾排要看得出「還可以往旁邊滑」 — #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; }

/* 月份是一顆下拉而不是一排籤 — #134:每過一個月就多一顆籤,一年後要橫捲十二下
   才看得到年初。#229 把它從原生 `<select>` 換成 style.css 的 `.pick`,而這裡只做
   兩件事:把收合面收到和 `.chip` 一樣的尺寸,並讓「有選月份」讀起來和
   `.chip[aria-pressed="true"]` 一致(那一格由 log.js 寫在 `.pickrow` 的 `data-on`
   上 —— 元件自己不知道「空字串代表全部」是這一頁的意思)。

   **這一列不是 `.chiprow`**:那個類別帶著橫捲與兩邊的遮邊(#218),而一顆下拉
   永遠只有一個東西在那一列上,捲不動也不該掛漸層。更要緊的是彈出來那張紙是
   `position: fixed` 的 —— 掛著 mask 的祖先在部分瀏覽器上會變成固定定位的容器塊,
   那會讓紙掉回這一列裡面。 */
.pickrow { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.pickrow .pick-cur {
  flex: none; font-size: 0.78125rem; color: var(--dim); padding: 4px 11px;
}
.pickrow[data-on="1"] .pick-cur {
  color: var(--accent); background: var(--card); border-color: var(--accent); font-weight: 600;
}

/* 選中那一天的抬頭底下那一行 — #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; }

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

.txn { padding: 12px 0; border-bottom: 1px solid var(--line); }
.txn:last-child { border-bottom: 0; }
.txn summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.txn summary::-webkit-details-marker { display: none; }
/* 已刪除的那一列:**整列**劃掉,不是只有左半邊 — #156。規則本來掛在
   `summary > span:first-child`,而金額是 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(UI 評審 #244 第 6 章)。三十個字在 390 寬上一定折,
   而折點由字寬決定:同一份清單裡每一列斷在不同的地方,讀起來像排版壞了。所以折點
   自己挑,而每一行是一個 block。

   `<em>` 的斜體要關掉 —— 這裡借它只是為了「一個沒有語意包袱的行內容器」,同這支
   檔案裡 `.arow em`(那顆圖示)的用法。第二行縮一點:它是第一行的細節。 */
.ml { display: block; font-style: normal; }
.ml + .ml { margin-top: 1px; }

/* 分錄表上方那一句白話 — #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; }

.tag { font-size: 0.6875rem; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 1px 7px; color: var(--dim); }

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

   **那支藍在 #259 進了主題契約(`--income`,web/themes.css)。** 它本來寫死在這裡、
   自己帶一句 `@media (prefers-color-scheme: dark)`,而那種寫法在主題鎖定之後會壞:
   在淺色系統上鎖暗色,整頁是暗的、這顆籤留在亮色的藍上。判準是「這個值本來就分亮
   暗兩份」—— 那它就是主題在管的東西,不是這一支的。 */
.tag.ok { color: var(--accent); border-color: var(--accent); }
/* 收入那顆籤在 #392 換成 `--kind-income`,而同一組多了另外三格:支出、退款、
   轉帳(底下三條)。以前只有收入自己有一個 token,其餘三種借 `--warn` 或什麼
   都不借 —— 而「這一筆是哪一種」正是紀錄頁上要一眼看出來的東西。 */
.tag.in { color: var(--kind-income); border-color: var(--kind-income); }

/* 已編輯:不是錯帳,也不是退款——這一列是現在的真相,只是它有歷史。所以既不用
   已刪除的灰刪除線,也不借退款的綠;用中性的強調底,讀成「這一筆有話要說」。 */
.tag.edited { color: var(--fg); 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 > span:first-child { 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); }

/* --------------------------------------- 標題旁那顆 (?) 與它的說明 — #218

   頁頂那兩句常駐說明是**讀過一遍就不需要第二遍**的東西,而它每次進頁都佔掉標題
   與第一筆交易之間的整段版面。收進標題旁一顆 (?),點開才顯示。

   **貼著標題,不是靠右**:`.row` 是 `justify-content: space-between`,兩個項目
   時第二個會被推到卡片的另一端 —— 那顆 (?) 就成了一顆和標題無關的鈕。
   `margin-right: auto` 把剩下的寬度吃掉,它於是接在「交易流水」後面。同一條招數
   讓標題本身一格都沒動(它仍然是第一個項目、仍然靠左)。

   圓圈只有 20px(它是次要的),而點擊目標是 44px —— 同 `.dots` 那條下限,不是把
   圓圈畫大。

   ⚠️ **44 在 D-F100(#373)從 `::after` 搬到元素自己身上。** 原本是
   `.lghelp::after { inset: -12px }`:一塊看不見、不佔版面、手指按得到的方塊。對
   手指那是對的,對**量得到的東西**卻是空的 —— `getBoundingClientRect()` 回的是元
   素自己的邊框盒,偽元素不在裡面,而 D-F100 把「觸控目標 ≥44」從一行列印改成
   `test_browsers.TheLayoutHoldsOnEverySize` 的一條斷言。所以盒子自己 44×44,圓圈
   反過來搬進 `::before`。

   **`z-index: -1` 加 `isolation: isolate` 是一組,少一個就壞。** `::before` 是絕
   對定位的後代,不壓下去的話它會蓋在「?」上面(定位過的後代畫在文字之後);而
   單獨的 `z-index: -1` 會沉到 `.card` 的底色**後面**去 —— `.card` 沒有 position
   也沒有 z-index,不自成一個層疊環境,負的 z-index 於是一路沉到它下面。
   `isolation: isolate` 在這顆鈕上開一個層疊環境,那個「一路沉」因此只沉到自己這
   一層為止(自己的底色是透明的,所以圓圈看得見、「?」蓋在圓圈上)。

   ⚠️ **`margin-left: -12px` 讓圓圈一格都沒動。** 它接在「交易流水」那個標題後面
   (`margin-right: auto` 把剩下的寬度吃掉),而盒子從 20 長到 44 會把置中的圓圈往
   右推 12px。負左 margin 把盒子拉回去,多出來的命中區長在標題那幾個字上面。 */
.lghelp {
  position: relative; isolation: isolate;
  flex: none; align-self: center; margin-right: auto; margin-left: -12px;
  font: inherit; font-size: 0.75rem; font-weight: 600; line-height: 1; cursor: pointer;
  width: 44px; height: 44px; padding: 0;
  color: var(--dim); background: none; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.lghelp::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  background: var(--chip);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.lghelp[aria-expanded="true"] { color: var(--accent); }
.lghelp[aria-expanded="true"]::before { border-color: var(--accent); }

/* 那張紙照「⋯」選單(`.asheet`)的形狀:同一頁上同一種東西用同一種語彙,而它那
   三層的疊法(幕 24 / 紙 25 / 仍在登入閘之下)已經想過一次了 —— 幕直接共用
   `.ascrim`,不另開一條同樣的規則。差別只有內容:那張是一排動作,這張是一段字
   加一顆「知道了」。 */
.hsheet {
  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: 16px; box-shadow: var(--shadow);
  animation: acts-up .18s cubic-bezier(.2, .8, .3, 1);
}
@media (prefers-reduced-motion: reduce) { .hsheet { animation: none; } }
.hbody { font-size: 0.8125rem; line-height: 1.7; color: var(--dim); }
.hsheet button { margin-top: 14px; }

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