/* 通知中心:清單列與置頂的狀態型區塊。

   ⚠️ **未讀徽章(`.nbadge`)與它的定位基準在 D-F97(#358)搬去 web/style.css 了。**
   這一行有前科(#171 更正過一次):通知鈕從 #166 起就不在 nav 上,#168 把第二顆
   徽章的家從 `#v-more` 那張卡換進彈出選單,#201 再把整張選單裁掉、入口換成鈴鐺
   —— 每一次搬家都要回來改這一支,因為它寫的是「那顆徽章站在哪裡」。這一次搬的
   不只是位子:徽章長在**導覽列**上(「我的帳號」那一格),而那是 shell 的骨架,
   不是這一頁的入口 —— 拿掉通知這一頁,那顆徽章不會跟著回到原樣,它會變成一個
   沒有數字的空位。所以它跟著 `nav` 與 `.fab` 住在 style.css,不再住在這裡。 */

/* 一則一列:左邊標題與細節,右邊時間。 */
.nrow {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.nrow:last-child { border-bottom: 0; }
.nmain { flex: 1; min-width: 0; }
.nmain b { font-weight: 600; }
.nsub { display: block; margin-top: 2px; font-size: 0.78125rem; color: var(--dim); }

/* 右邊那一欄是**兩個不同的時間** — #245。上面是交易發生日(使用者說的那一天),
   下面是它被記進帳本的相對時間。補記一個月前的三筆帳,下面三行會是同一句「14
   分鐘前」,而上面那三個日期正是它們之間唯一的差別。 */
.nwhen {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-size: 0.75rem; color: var(--ink); white-space: nowrap;
}
.nago { font-size: 0.6875rem; color: var(--dim); }

/* 跳得過去的那一列是一顆真的按鈕(notify.js 的 row()),所以先把瀏覽器給按鈕的
   那一身衣服脫掉:它要和旁邊那幾個 <div> 長得一模一樣,差別只在按得下去。 */
button.nrow {
  width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--line);
}
button.nrow:last-child { border-bottom: 0; }

/* 還沒讀過的那幾則 — #245。**用一顆點,不換底色**:底色是置頂那一疊的語彙
   (`.nrow.state`),而「還沒讀」與「還沒解決」是兩件事,同一種訊號說兩句話就
   分不出是哪一句。點的顏色與導覽列上那顆徽章同一個,兩處講的是同一個數字。 */
.nrow.unread .nmain b { font-weight: 700; }
.nrow.unread .nmain b::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 7px; height: 7px; margin: -2px 6px 0 0;
  border-radius: 50%; background: var(--warn);
}

/* 那一列上的那顆鈕(全部標為已讀)。**`.nfhead` 那一組在 D-F85 ②(#358 把這一頁
   變成子頁時)收掉了**:它存在的理由是「`.row` 是 space-between,三個孩子會把未讀
   數推到正中間」,而第三個孩子正是與標題列重複的那顆 `<h3>通知</h3>` —— 標題拿掉
   之後那一列只剩兩樣,space-between 自己就把它們推到兩邊。 */
.nf-seen { padding: 5px 11px; }

/* 狀態型置頂,底色與事件型分開:它們不是「發生過的事」,是還沒解決的事,讀
   過也不會消失,所以不該混在流水裡看起來像剛剛才發生的一則。 */
.nrow.state {
  background: var(--chip); border-bottom: 0; border-radius: var(--radius-m);
  margin-bottom: 6px; padding: 12px 14px;
}
.nrow.state .nwhen { color: var(--warn); }

.nempty { padding: 22px 0; text-align: center; color: var(--dim); }

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