/* 個人帳號:身分卡與跨帳戶合計 — F17。
 *
 * 這幾條原本是 me.css 的 .ident-name / .ident-id / .mine-sep / .mine-total /
 * .stmsg,跟著版面一起搬過來並改成 ac- 前綴:一個 view 一支樣式表(style.css
 * 檔頭的約定),兩支檔案共用同一個 class 名稱只會讓下一次改動不知道該改哪邊。 */

/* 「目前是誰」的大字,呼應共同帳戶頁 #poolNote.mine-name 的同一個名字。 */
.ac-name { color: var(--ink); font-size: 1.125rem; font-weight: 640; letter-spacing: -.015em; }
.ac-id { margin-top: 2px; margin-bottom: 12px; }

/* 一張卡裡三段(改名、加入別的帳戶、登出)之間的分隔線。 */
.ac-sep { height: 1px; background: var(--line); margin: 20px 0 16px; }

.ac-line { margin-top: 6px; }
.ac-note { margin-top: 8px; }

/* 合計區一個帳本一行,幣別是分組的標題 — #187。同一個幣別的第一組不必推開,
   第二個幣別以後才需要跟上一組的尾行拉開距離。 */
.ac-cur { margin-top: 14px; }
.ac-cur:first-of-type { margin-top: 10px; }

/* 尾行的總權益:一條線把它跟上面那幾個帳本分開——它是那幾行加起來的,不是
   另一個帳本。 */
.ac-sum { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

/* 「這個名字管到哪裡為止」那一句 — #199。它跟著上面那顆儲存鈕,不是下一段的
   開頭,所以推開的距離比 .ac-sep 小。 */
.ac-hint { margin-top: 10px; }

/* 儲存鈕跟它上面那個輸入框拉開一點 — #199。改密碼那一段是「兩個欄位 + 一顆
   鈕」,鈕貼著第二個框時讀起來像第三個欄位。改名那一顆一併適用(同一張卡上兩
   顆同樣的鈕不該一顆貼著、一顆不貼)。 */
/* ⚠️ **`#acIdent` 在 D-F83(#345)之後不存在了**:「我的身分」那張大卡拆成名字 /
   Email / 密碼三頁,所以這一條跟著改成點名那三張卡。規則本身一個字沒動 —— 它管的
   仍然是同一批鈕(儲存名字、寄一組數字給我、儲存密碼)。 */
#acNameCard .ghost, #acMailCard .ghost, #acPassCard .ghost { margin-top: 12px; }

/* 失敗原文貼在它發生的區塊裡,不彈 toast。空的時候不占版面。 */
.ac-msg { margin-top: 10px; font-size: 0.8125rem; color: var(--dim); }
.ac-msg:empty { display: none; }

/* 「改用那個帳號登入」— D-G85 ②(#343)。它接在錯誤訊息底下,是那一句話的下一
   步,所以獨立成一列而不是擠在旁邊。撐到 44px:`.ghost` 的預設高度大約 30px,
   而這一顆是「我的 Email 已經有帳號了」的人唯一按得到的出路。 */
.ac-switch { display: block; margin-top: 10px; min-height: 44px; }

/* 週期記帳那一頁的一列 — #237。分隔線的形狀沿用 me.css 的 `.mrow`(成員管理那
   份名單):兩份都是「一個東西一列,列裡面有幾行字加一排鈕」,而使用者在同一個
   app 裡不該讀到兩種列。最後一列不畫線——那條線是「下面還有一列」的意思。 */
.rr { padding: 14px 0; border-bottom: 1px solid var(--line); }
.rr:last-child { border-bottom: 0; }
.rr-head { font-weight: 640; }
.rr-what, .rr-next, .rr-why { margin-top: 4px; }

/* 自動暫停的原因是後端拒絕的原文,它講的是「要修的是什麼」——用警示色,因為它
   和旁邊那兩行(描述、下次入帳)不是同一種話:那兩行是這條規則的樣子,這一行
   是一件待辦的事。 */
.rr-why { color: var(--warn); }

/* 那一排常駐的金額欄(`.rr-edit`)在 #257 被收掉了:清單上每一列都掛著一個打得
   下去的輸入框,而使用者九成九只是來看一眼。改金額現在住在「編輯」攤開的那張面板
   裡(`.rr-form`,見檔尾)。 */

/* 一條都沒有時那一句。它要跟標題拉開,不然讀起來像標題的副標。 */
.rr-none { margin-top: 12px; }

/* 設定那一頁 — #241。它是「我的帳號」的第四個子頁,所以規則跟著這一頁的其餘三個
   住在同一支樣式表(`.ac-sep` / `.ac-note` 是原封沿用的,同一個 app 裡不該有兩種
   分隔線)。**畫面上那三個東西真正長什麼樣不在這裡**:主題色、縮放與 ＋ 鈕的左右
   是全站的覆寫,住在 web/prefs.css。 */

/* 一組設定(標題 + 那排鈕 + 一句說明)。段與段之間拉開,不然三排鈕讀起來像九顆
   互相有關係的鈕。 */
.ac-set { margin-top: 16px; }
.ac-set-t { font-weight: 600; margin-bottom: 8px; }

/* 系統設定那一頁的段落 — D-H6(#367)。每一段的標題列是一顆 `.mg-entry`(語彙與
   我的帳號第一層那七列入口逐字相同,樣式住在 me.css),而這兩條只管它上下那兩格:
   最上面那句「這幾項只留在這台裝置上」與攤開來的那一格。

   `.set-body` 的下內距等於一列自己的上下內距(me.css 的 `.mg-entry` 是 16px):
   攤開的一段與下一段的標題列之間,因此與兩個標題列之間一樣寬。第一個 `.ac-set`
   不再自己推開 —— 它上面已經有那一列的 16px 了,兩個加起來是 32px,讀起來會像
   段落跟標題不是一組。 */
.set-intro { padding: 14px 0 12px; }
.set-body { padding-bottom: 16px; }
.set-body > .ac-set:first-child { margin-top: 0; }

/* 主題那一格 — #392(D-F102)。**它以前是一排六顆文字鈕,而六顆塞不進 320 寬**:
   `.seg` 的每一顆有 44px 的下限(D-F100),六顆加間距是 300+,而字最長的那一顆
   (「低飽和深色」)自己就要 90px。所以這一格換成 **2×3 的色卡**。

   一格 = 那個主題的一小塊畫面:`--bg` 的底、`--card` 的小卡、`--accent` 的圓點,
   底下一行名字。**三個顏色由 `data-theme` 掛在那一格自己身上**,而不是由 JS 抄一
   份色碼進來(settings.js 那一段寫著同一句話)—— 印出來的必定就是按下去會得到的
   東西,沒有第二個作者。

   `minmax(0, 1fr)` 而不是 `1fr`:格線的預設最小寬度是 `auto`,而「低飽和深色」那
   五個字會把它自己那一欄撐開,三欄因此不等寬(390 上實測過同一種病)。

   ⚠️ 「跟系統」那一格**沒有自己的主題塊**(那正是它的意思),所以它的色卡畫的是
   `:root` 那一份 —— 在深色系統上它會是深的,而那正好就是選了它會得到的東西。 */
.ac-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ac-theme {
  font: inherit; font-size: 0.75rem; color: var(--ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  min-height: 44px; padding: 8px; text-align: center;
  background: var(--chip); border: var(--border-w) solid transparent;
  border-radius: var(--radius-m);
}
/* 色卡本體。**它自己是一個縮小的畫面**:外框是那個主題的 `--bg`,裡面一塊
   `--card`,右下一顆 `--accent` 的圓點。 */
.ac-theme .ac-chip {
  position: relative; height: 34px; border-radius: var(--radius-s);
  background: var(--bg); border: var(--border-w) solid var(--line);
}
.ac-theme .ac-chip::before {
  content: ""; position: absolute; left: 5px; right: 5px; top: 6px; height: 12px;
  border-radius: 3px; background: var(--card); border: var(--border-w) solid var(--line);
}
.ac-theme .ac-chip::after {
  content: ""; position: absolute; right: 6px; bottom: 5px;
  width: 10px; height: 10px; border-radius: var(--radius-pill);
  background: var(--accent);
}
/* 「跟系統」那一格 — 太陽加月亮,不是色卡(settings.js 的 themeHTML 寫著為什麼)。
   **兩顆 icon 每一格都印**,而看得到它們的只有這一格:讓 JS 依值決定要不要印,那
   一段插值就成了「兩個函式呼叫接起來」,而 test_web 的 innerHTML 掃描只認得單獨
   一發 SAFE_CALL —— 一條 CSS 比一個掃描不出來的形狀便宜。 */
.ac-theme .ac-chip .ic { display: none; }
.ac-theme .ac-chip-auto { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ac-theme .ac-chip-auto::before, .ac-theme .ac-chip-auto::after { content: none; }
.ac-theme .ac-chip-auto .ic { display: inline-block; color: var(--dim); }
/* 選中的那一格:形狀與 `.seg button[aria-pressed="true"]` 逐字相同,因為它們是同
   一句話。**邊框的 accent 是選中那一格自己的顏色** —— 剛按下去的那一刻整個 app
   也已經是它了。 */
.ac-theme[aria-pressed="true"] {
  background: var(--card); border-color: var(--accent); font-weight: 600;
}
.ac-theme:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ------------------------------------------------------------------- #257
   UI 評審 #244 那一輪:第一層的 ID 那一行、合計的分組與可點的列、週期記帳那一頁
   的展開面板,以及設定頁的 ＋ 鈕小示意。 */

/* ID 與它的複製鈕同一行,鈕不被那串 id 擠掉。那一句用途小字跟著它,不是下一段的
   開頭 —— 所以與 `.ac-id` 之間只留一點點。 */
.ac-idrow { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.ac-idrow .ac-id { margin: 0; overflow-wrap: anywhere; }
.ac-copy { flex: none; padding: 4px 10px; }
.ac-idwhy { margin: 4px 0 12px; }

/* 合計的分組標題(待付 / 待收 / 投資估值 / 戶頭餘額)。比幣別那一行(`.ac-cur`)
   輕:幣別是分組,這是分組裡的分組。 */
.ac-grp { margin-top: 10px; }
.ac-cur + .ac-grp { margin-top: 6px; }

/* 點得下去的那一列 —— 切到那本帳的首頁。`>` 是 CSS 畫的不是標記裡的字:那一行
   的文字內容是「帳本名 + 那個數字」,多一個字元進去就會被讀進每一個唸得出它的
   地方(讀屏、測試的逐行比對)。 */
.ac-line[data-pool] { cursor: pointer; }
.ac-line[data-pool] .num::after {
  content: "›"; color: var(--dim); margin-left: 8px;
}

/* 週期記帳那一頁 — #257。「＋ 新增」在清單上方,空狀態那一顆在那句話下面。 */
.rr-new { margin: 12px 0 4px; }

/* 一列上的動作。刪除被推到最右邊、再多留一段距離 —— 它與「暫停」是兩種不同等級
   的後果,而評審抓到的正是兩顆貼在一起(#244)。 */
.rr-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rr-acts .ghost { flex: none; white-space: nowrap; }
.rr-del { margin-left: auto; padding-left: 14px; }

/* 「有一期還沒記」與自動暫停那兩行。原因的原文是次行,所以它比框架那一句淡。 */
.rr-due { margin-top: 4px; }
.rr-note { margin-top: 2px; }

/* 展開的編輯面板。與上面那排鈕之間一條線:它是同一列裡的另一層,不是下一列。 */
.rr-form {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.rr-form .f { display: block; margin: 14px 0 6px; font-size: 0.78125rem; color: var(--dim); }
.rr-form .ghost { margin-top: 14px; }

/* 執行紀錄:一期一行。已刪除的那一筆留在列上(那一期算記過了),但字要看得出來
   它不是一筆還活著的帳。 */
.rr-log { margin-top: 6px; }
.rr-log:first-of-type { margin-top: 12px; }
.rr-lognone { margin-top: 12px; }

/* ＋ 鈕位置的小示意 — #257。一格代表畫面的圓角框,點停在選中的那一邊;`data-fab`
   是設定頁畫上去的,同主題色卡的 `data-theme`(印出來的就是按下去會得到的東西)。 */
.ac-fab {
  position: relative; height: 56px; margin-top: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--chip);
}
.ac-fab i {
  position: absolute; bottom: 8px; width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent); font-style: normal; font-size: 1.0625rem;
  display: flex; align-items: center; justify-content: center;
}
.ac-fab[data-fab="right"] i { right: 10px; }
.ac-fab[data-fab="left"] i { left: 10px; }

/* 回報問題 — #318 */
.ac-feedback-text {
  font: inherit; color: var(--ink); background: var(--bg); width: 100%;
  box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 10px 12px; min-height: 96px; resize: vertical; margin-top: 8px;
}
.ac-feedback-text:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
#acFeedbackSend {
  margin-top: 10px;
}


/* 我的裝置 — D-F80 / D-E42(#339)。**規則住在這裡而不是一支新的 views/settings.css**:
   設定頁的每一段都用著這一支的語彙(`.ac-sep` 分段、`.ac-set` 一組、`.ac-note` 說
   明),而它是「我的帳號」這一區共用的東西 —— 為了一頁再開一支樣式表,分隔線與段落
   標題就會有兩份抄本,沒有東西守著它們一起改(#195 的形狀)。 */

/* 一列一台裝置。分隔線的形狀沿用 `.rr`(週期記帳那一頁的列):兩份都是「一個東西
   一列,列裡面有幾行字加一顆鈕」,而使用者在同一個 app 裡不該讀到兩種列。 */
.ac-dev { padding: 12px 0; border-bottom: 1px solid var(--line); }
.ac-dev:last-child { border-bottom: 0; }
.ac-dev-t { font-weight: 640; }
.ac-dev-when { margin-top: 4px; }

/* 「目前這台」——它是一句標記不是一顆鈕,所以走 `--chip` 的藥丸而不是邊框。 */
.ac-dev-now {
  margin-left: 8px; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--chip); color: var(--dim); font-size: 0.75rem; font-weight: 500;
}

/* 那兩顆會把人登出的鈕。**44px 的下限寫在這裡而不是 `.ghost`**:那一條全站共用
   (清單、面板、每一張卡上都有它),改它會動到整個 app 的密度;而這兩顆的後果是
   「按錯就要重新登入」,點擊目標不該比別的鈕小。 */
.ac-dev-off, .ac-dev-all { min-height: 44px; }

/* 訪客按下登出之前那張確認卡 — D-G85 ①(#343)。**它長在被按的那一顆底下**,
   而不是一張飄在畫面中央的原生對話框:使用者的眼睛還停在剛剛按的地方。
   兩顆都撐到 44px(觸控目標),而**主要動作是「先去綁 Email」**——危險的那一顆
   用 `.ghost.danger` 的空心外框,不是實心的 `.primary`。`.primary` 自己帶
   `width:100%` 與 `margin-top:18px`,所以這裡把兩顆各自壓回同一列的尺寸。 */
.ac-confirm {
  margin-top: 12px; padding: 12px;
  border: 1px solid var(--warn); border-radius: var(--radius-m);
}
.ac-confirm-say { font-size: 0.8125rem; }
.ac-confirm .ac-confirm-b {
  min-height: 44px; margin-top: 10px; width: 100%; font-size: 0.875rem;
}
.ac-dev-off { margin-top: 8px; }
.ac-dev-all { margin-top: 14px; }


/* 儲值與兌換碼那一頁 — D-H5(#366)、D-H19(#435)。**規則住在這裡而不是一支新的樣
   式表**:它是「我的帳號」的第八列入口按進去的那一頁,而這一頁的段落、說明、分
   隔線全部用著這一支的語彙(理由逐字同上面「我的裝置」那一段)。額度用完那一刻
   彈出來的**那張卡**不在這裡,它是兩支 view 共用的東西,住在 web/paywall.css。 */

/* 免費額度 / 月訂閱 / 儲值餘額 / 合計可用,一種 kind 一塊,label 靠左、數字靠右
   —— D-H19(#435)。**不是一張固定欄寬的表**:月訂閱那一格「每天 20 次,到
   2026/10/9,今天還剩 17」比別欄長得多,四欄硬擠進一張 grid 在 320 寬上會逼出橫
   捲(既有的 layout 守衛守著這件事,同 `.ac-plan` 舊版「390 寬實測放得下」的判
   準);拆成一塊一塊上下排,哪一格都不會被擠出視窗。 */
.ac-plan-kind + .ac-plan-kind { margin-top: 14px; }
.ac-plan-name { font-weight: 600; }
.ac-plan-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }

/* 「目前用量」與上面那幾塊之間拉開:上面講的是四個桶,這一行講的是**這個人**。 */
.ac-plan-use { margin-top: 18px; }

/* 兌換碼那一列 — D-H19(#435)。跟改名字那一段同一套元件(`.f` label、`.ghost`
   鈕、`.ac-msg` 錯誤貼文),不新造一份語彙。 */
.ac-redeem .ghost { margin-top: 8px; }