/* 報表:月份 chips、分類佔比的圓餅、各人的水平長條、餘額曲線 — FR-9。
 *
 * 長條全部是原生 div 的寬度百分比;圓餅是手寫 SVG(#238,理由在 report.js 的
 * drawCategories 上面 —— uPlot 沒有圓餅,而它是這個專案唯一的第三方)。
 * **兩張圖都由 vendored uPlot 畫 — #203**
 * (#148 只換了累積支出,餘額曲線留著手寫 SVG,於是同一頁上有兩套外觀);顏色
 * 仍然一格都沒有搬家 —— 那幾條 `.rpspend .lN` 是給 JS 讀的探針,見下面。 */

/* 報表分頁進來第一眼那個當月淨支出 — #144。
   F17 到 #143 之間它是首頁上一顆整條可按的折疊標題:`.rphead` 是 button(手機上
   按得到的面積),右邊一顆 `.rpchev` 箭頭跟著 aria-expanded 轉。報表變成自己的
   分頁之後沒有東西要折疊,剩下的只是一個標題與一個數字,那三組規則因此退役。 */
.rphead-id { min-width: 0; }
.rphead-id .big { display: block; }

/* 頁首那三列 — D-F74(使用者裁示 2026-09-03:「整個報表在最上面有一條自定義的日
   期區間,然後在他下面提供一個方便的 ui 快速選擇」)。

   **月份步進器(`.rpstep` / `.rparrow` / `#rpStepMonth`)與月份 chips(`#rpMonths`)
   那五條規則跟著它們的節點一起退役** — #217 / D-F15 的那個控制項被 D-F74 取代。
   留一條沒有人用的規則,下一個人會以為畫面上還有一顆前後鈕。

   三列在 390px 上疊起來約 132px:第一列是既有的 `.rpsp-dates`(它在 D-F61 就驗過
   390),第二列是三顆 `.seg`,第三列單行 34px。仍然比它取代掉的「步進器 + 一整排
   會換行到三行的 chips」矮。

   ⚠️ **那三個數字在 D-F100(#373)各長高了一格。** 第三列的 34 變成 44(底下
   `.rppicks button` 的 `min-height`),第二列的 `.seg` 由 style.css 那條全站規則從
   41 長到 44,第一列的日期欄從 40 長到 44 —— 整組因此約 150px。這裡沒有重量,只是
   把那句「132px」的帳更新到它現在真正的樣子。 */
.rpmodes { margin-top: 10px; }

/* 第三列:**可左右滑動**,舊/小的在左,預設選中的那一格靠右(drawPicks() 渲染完
   把它捲到中央)。

   `overflow-x: auto` 而不是換行:「按月」那一列在跑了兩年的帳本上有二十幾格,換
   行版本會長成三四行、把底下每一張卡推下去,而使用者要的是一條「往左邊看更舊的」
   的軸。`scroll-snap` 讓手指放開時停在一整格上,不會切一半。

   `-webkit-overflow-scrolling` 不寫:iOS 8 之後預設就是慣性捲動。 */
.rppicks {
  display: flex; gap: 8px; margin-top: 10px;
  overflow-x: auto; scroll-snap-type: x proximity;
  /* 捲動容器把自己的焦點外框裁掉了 —— 留兩格讓 `:focus-visible` 的框看得見。 */
  padding: 2px 0;
}
.rppicks:empty { display: none; }
/* ⚠️ **`min-height` 從 34 改成 44 — D-F100(#373),而這是這一票在 report.css 裡
   唯一動到的一格。** 使用者 2026-09-07 裁的是「全站觸控目標一律 ≥44×44」,而這一
   排是報表頁上唯一不吃 style.css 共用規則的觸控目標(它不是 `.seg`、不是
   `.ghost`、不是 `input` —— 它自己寫了一條 `min-height`,所以共用層那三條下限一
   條都套不到它)。`padding` 一格沒動:內距決定字離邊框多遠,44 只在它撐不到的時
   候補進來。 */
.rppicks button {
  scroll-snap-align: center; flex: none;
  font: inherit; font-size: 0.8125rem; line-height: 1;
  padding: 9px 12px; min-height: 44px;
  color: var(--ink); background: var(--chip);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  white-space: nowrap; cursor: pointer;
}
/* 選中的那一格與 `.seg` 那組**同一種樣子**:同一頁上「選一個」只准有一種長相
   (style.css 的 `.seg button[aria-pressed="true"]` 就是那一份)。 */
.rppicks button[aria-pressed="true"] {
  background: var(--card); border-color: var(--accent); color: var(--accent);
  font-weight: 600;
}

/* `.rpspaced` 跟著它唯一的使用者退役 — #249:月報卡上那段「支出減退款…」收進
   標題旁邊的問號裡(`.bal-sheet`,樣式在 home.css),而紙裡的段距由
   `.bal-sheet .muted + .muted` 給。留一條沒有人用的規則,下一個人會以為畫面上
   還有一段需要撐開的說明。 */
.rpname { font-weight: 600; }

/* 已經退出這個帳本的人 — #249。`by_member` 從 #203 起帶著他(不然 Σ承擔 ≡ 淨支
   出會破),但那一列上看不出他是誰。**是一段字不是一個色點**:色點在這一頁上
   已經是分類的語言(`.rpdot`),而「已離開」是一句話,單色列印也讀得出來。 */
.rpleft { margin-left: 6px; font-size: 0.75rem; }

/* 戶頭自己付掉的那一列 — #249。**它與人的那幾列同一種版型**(同一個 `.rpmem`
   格子、同一把尺),因為它答的是同一個問題的最後一格:這個月的錢是誰先出的。
   名字用 dim 是唯一的差別 —— 它不是一個人,而那件事在「墊付」這種字眼旁邊要看
   得出來,不然它會被讀成一位叫「家用帳戶」的成員。
   **待分攤那一列同理 — #299**,一併吃這條規則:它也不是一個人,「承擔」旁邊要
   看得出來它是還沒分掉的那一份,不是漏列的一個成員。 */
.rpdirect .rpname, .rpunassigned .rpname { color: var(--dim); }

/* 共用的長條:外框是槽,<i> 是填色。overflow 收邊,免得填滿時圓角被切方。 */
.rpbar {
  height: 8px; border-radius: var(--radius-pill);
  background: var(--chip); overflow: hidden;
}
.rpbar i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--accent); }

/* 分類佔比:一個圓環加一份圖例 — #238。**橫條那三條規則跟著退役**(`.rpcat .row`
   / `.rpcat .rpbar` / `.rpcat .muted` 的左邊距);`.rpbar` 本體留著,各人那張卡
   還在用它。

   **圓是 SVG,顏色是 `currentColor`。** 每一塊 `<circle>` 與圖例上的色點共用同一
   組 `.cN`,所以「這一塊是哪個顏色」在畫面上只有一份答案;那六個 token 就是
   style.css 既有的六個資料色(累積支出的四條 lane 加兩條餘額線用的也是它們)——
   這裡不長出第二套配色,深色模式也因此自己會跟。

   選擇器以 `.rpcats` 開頭,同這支檔案底下 `#rpSpend` / `#rpChart` 那一組的理由:
   `.c0` 這種名字太泛,而 view 的 css 是掛在整份文件上的。

   ⚠️ **它以前以那個 id 開頭,而那在 #243 變成了一個 bug。** 那一票讓同一份圓環
   多一個版位(個人記帳首頁的 `#rpSoloCats`),而 id 選擇器只認得原本那一個 ——
   **沙盒實測(390×844,chromium 頭無介面,2026-08-24)首頁畫出來的是一個全黑的
   圓**:`fill: none` 沒生效所以整個圓被填滿,六個 `.cN` 也沒生效所以圖例的色點是
   白的。作用域換成兩個版位共有的那個 class,而它與 id 一樣把 `.c0` 關在裡面。 */
.rpcats .rppie { display: block; width: 176px; height: 176px; margin: 14px auto 8px; }
/* stroke 畫在路徑兩側:半徑 40、粗 17,所以圓環佔 31.5–48.5,離 viewBox 邊還有
   1.5 的餘裕。`fill: none` 少一個字,中間那個洞就會被填成黑色。 */
.rpcats .rppie circle { fill: none; stroke: currentColor; stroke-width: 17; }
/* 六塊的顏色在 #392 換成 `--chart-1` … `--chart-6`。**它們以前借的是六個語意
   token**(accent / warn / cash / settled / ink / dim)—— 而借的代價是「這一塊
   是餐飲」與「這一格是警告」同色,換一個主題就要重驗一次那六個湊在一起好不好
   看。現在它們是一組專門為了「同一張圖上要分得開」而定的序列色,五個主題各一
   份,兩兩的 OKLab 距離由 test_web.TheBalanceLinesStayApartInEveryTheme 守著。

   **同一組色同時是成員色**(fmt.js 的 swatchOf):同一個人在首頁的色塊與在報表
   圓餅上本來就該是同一個顏色。 */
.rpcats .c0 { color: var(--chart-1); }
.rpcats .c1 { color: var(--chart-2); }
.rpcats .c2 { color: var(--chart-3); }
.rpcats .c3 { color: var(--chart-4); }
.rpcats .c4 { color: var(--chart-5); }
.rpcats .c5 { color: var(--chart-6); }

/* 圖例:一列一類 —— 色點、分類名、金額、百分比。四欄格子而不是 `.row`,金額與
   百分比才對得齊(名字長短不一,靠 flex 的話右邊兩格會各自浮在不同的位置)。 */
.rpcat {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: baseline; gap: 2px 10px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.rpcat:last-child { border-bottom: 0; }
/* 點得下去的那幾列是真的 `<button>` — #249(分類下鑽)。**不是掛 onclick 的
   div**:鍵盤走得到、讀屏唸得出「按鈕」,而那是這個 app 裡「看起來可以按」與
   「真的可以按」同一件事的唯一寫法。

   按鈕自己帶一圈邊框與置中的字,所以三樣要收掉再把底線加回去(`.rpcat` 那條
   `border-bottom` 會被 `border: 0` 一起吃掉);`font`/`color` 要 inherit —— 少
   了它們,同一份圖例在報表分頁上會突然變成系統字。
   排在 `.rpcat` 之後:同特異度時後到的贏,而這幾條是覆寫。 */
.rpcats button.rpcat {
  width: 100%; font: inherit; color: inherit; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.rpcats button.rpcat:last-child { border-bottom: 0; }
.rpdot {
  width: 10px; height: 10px; border-radius: 3px;
  align-self: center; background: currentColor;
}
/* 進不了圓餅的那幾類:**空心**。實心的色點會讓人在圓上去找一塊不存在的顏色,
   而右邊那一格已經寫著它沒有進圖。 */
.rpcats .rpdot.off { background: none; border: 1px dashed var(--dim); }
/* 「其他」那一列底下的分類名 —— 併的是塊不是資料,名字要留在畫面上。跨到整列
   的右端,與名字切齊。 */
.rpmerged { grid-column: 2 / -1; font-size: 0.75rem; }

/* 兩張圓並排,底下一份圖例 — D-F76(#314,個人記帳分類圓餅成對)。
 * 樣式與 home.css 的 .pie-pair 逐字相同。 */
.pie-pair { display: flex; gap: 12px; margin-top: 12px; }
.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;
}
.pie-tab[aria-pressed="true"] { background: var(--chip); border-color: var(--line); }
.pie-tab .rpcats .rppie {
  width: 100%; height: auto; aspect-ratio: 1; margin: 0 auto 6px;
}
.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; }

/* 各人:三欄格子 —— 標籤、長條、金額。兩列共用同一組欄寬,承擔與墊付的長條
   起點與終點才會對齊,不然「同一個尺規」就只是嘴上說說。 */
.rpmem { padding: 12px 0; border-bottom: 1px solid var(--line); }
.rpmem:last-child { border-bottom: 0; }
.rpduo {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 8px 10px; margin-top: 8px;
}
.rpduo .k { font-size: 0.75rem; color: var(--dim); }
.rpduo b { font-size: 0.8125rem; text-align: right; white-space: nowrap; }
/* 墊付那條長條的藍在 #259 進了主題契約(`--paid`,web/themes.css)—— 同 log.css
   `.tag.in` 的那一支:本來寫死在這裡、自己帶一句 media query,而主題鎖定之後那種
   寫法會在淺色系統鎖暗色時留在亮色的值上。 */
.rpduo i.paid { background: var(--chart-paid); }

/* 累積支出:一條線畫一段日子,x 軸是日期(一格一天)— D-F61。
   顏色全部取 style.css 既有的變數(這裡不長出第二套配色);**顏色不是唯一的分
   辨方式** —— 三條線是三種線形,每條在 legend 上還有自己的名字,單色列印或色覺
   不同的人也讀得出哪條是哪條。

   **#148 之後這幾條規則是給 JS 讀的,不是給瀏覽器畫的。** 圖改由 uPlot 畫在
   canvas 上,而 canvas 吃不到 var() —— report.js 的 laneColours() 掛一組
   `.rpspend > .lN` 的探針進 DOM、問 getComputedStyle、再拿掉。所以「線色定義在
   哪裡」一個字都沒有搬:還是這裡,還是那四個 token,深色模式也還是自己會跟。 */
/* **只剩一條 lane — D-F61。** 這裡原本有四條(`.l0`–`.l3`):月份疊圖時一個月一
   條線,月份多過四條就從頭輪。日期軸那一版只有一條支出線,那三格因此沒有任何消
   費者 —— 留著它們,下一個人會照著以為這張圖還會疊。`report.js` 的 `LANES` 是同
   一件事的另一半(探針掛幾格由它長出來)。 */
.rpspend .l0 { color: var(--accent); }
/* 疊在同一組軸上的兩條餘額線 — #182。它們不輪 lane(各自永遠只有一條),所以
   各自一格;顏色是 style.css 新開的第五、第六個資料色,理由寫在那裡。 */
.rpspend .lbal { color: var(--chart-cash); }
.rpspend .lset { color: var(--chart-settled); }
/* 探針只被 getComputedStyle 問一次就拿掉,但它在 DOM 裡的那一瞬間不該佔位、不
   該被看見。**不能用 display:none** —— 那會讓 color 以外的東西不再解析,而下一
   個人加一條需要版面的規則時會踩到。 */
.rpprobe { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; }

/* uPlot 的樣式表是 vendor 原檔(位元組與上游相同,才驗得起 sha256),裡面的顏色
   是它自己的預設:十字線 #607D8B、選取框半透明黑。接上專案 token 的工作在這裡
   做,不去改那個檔。

   **選擇器一律以 #rpSpend / #rpChart 開頭。** vendor 那條 <link> 是 report.js 動態
   附加的,排在 head 裡所有靜態 stylesheet 之後,同分時後到的贏;用 id 拉高一個級
   距,載入順序就不再是必須記住的事。**兩個 id 一組規則 — #203**:餘額曲線也是
   uPlot 了,而「兩張圖看起來是同一套東西」該是同一段 CSS,不是兩段抄得很像的。 */
#rpSpend .uplot, #rpChart .uplot { width: 100%; font-family: inherit; }
/* 只有直線 —— `.u-cursor-y` 那半跟著 #155 一起走:那個元素現在根本不會被建出來
   (`cursor.y: false`),留一條指不到東西的規則,下一個人會以為畫面上有它。 */
#rpSpend .u-cursor-x, #rpChart .u-cursor-x { border-color: var(--dim); }
#rpSpend .u-select, #rpChart .u-select { background: var(--chip); }
/* legend 就是長按/停留時讀值的地方:一列一條線,欄是日期 / 當日增減 / 到當天為
   止。數字靠右並用等寬數字,三條線疊起來時位數才對得起來。 */
#rpSpend .u-legend, #rpChart .u-legend {
  margin: 10px 0 0; font-size: 0.78125rem; color: var(--ink);
  text-align: left; width: 100%;
}
#rpSpend .u-legend th, #rpSpend .u-legend td,
#rpChart .u-legend th, #rpChart .u-legend td { padding: 3px 0 3px 10px; }
#rpSpend .u-legend th:first-child, #rpSpend .u-legend td:first-child,
#rpChart .u-legend th:first-child, #rpChart .u-legend td:first-child { padding-left: 0; }
#rpSpend .u-legend thead th, #rpChart .u-legend thead th { color: var(--dim); font-weight: 500; }
/* ⚠️ `.u-value` 就是那個 <td>,不是它裡面的東西 —— 給它 display:block 會把整列
   拆成三行疊起來(實測過)。要動的只有對齊與字形。 */
#rpSpend .u-legend .u-value, #rpChart .u-legend .u-value {
  font-variant-numeric: tabular-nums; text-align: right;
}

/* 自訂區間那一列 — D-F61,**節點在 D-F74 從累積支出卡搬到頁首,樣式一格未動**
   (它已經在 390 上驗過,而搬家換的是它掛在誰底下)。`.rpsp-range` 那條外層規則
   跟著它唯一的使用者退役:三列現在各自是頁首那張卡的一個子節點。

   **兩格日期會換行,而那是刻意的**:390px 上一行放得下「從 [日期] 到 [日期]
   [套用]」,再窄一點(或使用者把字放大)就折成兩行,而折行之後每一格仍然貼著自
   己的標籤。`flex: 1 1 120px` 讓兩格日期分掉剩下的寬度 —— `input` 在 style.css
   是 `width: 100%`,不覆寫的話兩格會各自撐滿一行。 */
.rpsp-dates {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.rpsp-dates label.f { flex: none; margin: 0; }
.rpsp-dates input {
  flex: 1 1 120px; width: auto; min-width: 0; padding: 8px 10px; font-size: 0.8125rem;
}
.rpsp-dates button { flex: none; margin: 0; }

/* 累積支出的標題列 — #182:「累積支出」與那個月累積到現在多少,同一列的兩端。
   金額比報表那張卡的 38px 小,而且與餘額卡並排那兩個**同一級(20px)**:首頁
   上這是第三個大數字,三個同級才讀得出「這一頁有三塊」。實測 26px 時
   NT$70,872 會比餘額卡的 NT$34,520 更搶眼,而那個順序是反的。 */
.rpsp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rpsp-head h3 { flex: none; }
/* 標題與它的問號同一組 — #220,同餘額卡那兩顆的 `.bal-name`。整組不收縮:收縮
   的話「累積支出」會先被折成兩行,而問號要貼在字尾不是貼在卡緣。 */
.rpsp-head .bal-name { flex: none; }
.rpsp-head .big { font-size: 1.25rem; margin: 0; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* 時間區間:這條線畫的是哪一段,不是那個月有幾天。 */
.rpsp-span { margin-top: 2px; font-size: 0.78125rem; }
.rpsp-span:empty { display: none; }
/* 圖底下那句話在 #220 收進標題旁邊的問號裡(`.bal-sheet`,樣式在 home.css
   ——「一張彈出來的紙」在這個 app 裡只有一種樣子,#216 就定了),所以 `.rpsp-key`
   那條規則跟著退役。 */

/* 兩張圖共用的外框。**手寫曲線那四條規則跟著它一起退役 — #203**:線色、零軸的
   虛線、圓點現在都由 uPlot 畫在 canvas 上(顏色從上面那組探針讀)。名字刻意不
   在這裡重打一次 —— `test_home_chart` 掃的是「整支檔案裡還有沒有那幾個字」。 */
.rpchart { margin-top: 10px; }

.rpnote {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 8px; font-size: 0.75rem; color: var(--dim);
}

.rpempty {
  margin-top: 12px; padding: 16px; text-align: center;
  background: var(--chip); border-radius: var(--radius-m); font-size: 0.8125rem; color: var(--dim);
}

.rpmsg { margin-top: 10px; font-size: 0.8125rem; color: var(--dim); }
.rpmsg:empty { display: none; }