/* 好友那一頁 — D-H25(#445),合併稿 §6.1。
 *
 * **一個色碼都沒有**(D-F102 / #392):每一格顏色都是 themes.css 的 token,四個主題
 * 因此一起翻。字級全部用 rem(#360:root 由 web/prefs.css 釘在 16px)。
 *
 * **卡與列的形狀不是新的**:`.card` / `.row` / `.ghost` / `.primary` / `input` 全部
 * 是 style.css 那一份,這裡只補「一列上左邊兩行字、右邊幾顆鈕」這個排法 —— 它與
 * notify.css 的 `.nrow`(左邊標題與細節、右邊時間)是同一族,差別只在右邊那一欄是
 * 按得下去的東西,所以要 wrap 而不是 nowrap:320 寬上一列擠不下兩顆 44 的藥丸加一
 * 個名字,擠不下就換行,不橫捲。 */

/* 每一張卡自己的小標。**不是 `<h3>`**:頁名由標題列印一次(D-F85 ②「卡裡沒有第二
   顆標題」),而這四段是同一頁裡的分段,不是四個頁名。 */
.fr-h {
  font-size: 1rem; font-weight: 640; letter-spacing: -.01em;
  margin-bottom: 6px;
}

/* 一列:左邊名字 + 一行細節,右邊按得到的東西。 */
.fr-item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.fr-item:last-child { border-bottom: 0; }
.fr-say { flex: 1; min-width: 0; }
.fr-say b { font-weight: 600; overflow-wrap: anywhere; }
.fr-sub { display: block; margin-top: 2px; font-size: 0.78125rem; color: var(--dim); }
.fr-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* 還沒回覆的那幾列 —— 它們還不是好友,所以整列退一階,而不是多一個標籤。 */
.fr-out .fr-say b { font-weight: 400; color: var(--dim); }

/* 二次確認與「要不要換一組碼」那幾張小卡 — §6.1。**底色用 `--chip` 而不是
   `--danger-soft`**:攤開它的那一下還沒有做任何事,一塊紅底會讓「留著」看起來也很
   危險;真正不可逆的那一顆自己是 `.ghost.danger`(紅字)。 */
.fr-ring {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px; padding: 12px 14px;
  background: var(--chip); border-radius: var(--radius-m);
  font-size: 0.8125rem;
}
.fr-ring span { flex: 1; min-width: 0; }
.fr-ask { font-size: 0.78125rem; color: var(--dim); }

.fr-empty { padding: 18px 0; text-align: center; color: var(--dim); }

/* 我的好友碼 —— 電話裡唸得出口,所以印得比一般字大、字距鬆一格,而且
   `tabular-nums`(`.num`,style.css)讓每一碼等寬。**`overflow-wrap` 不是保險**:
   10 碼加字距在 320 寬的卡上剛好貼著邊,而一格橫捲比一行折行難用得多。 */
.fr-code {
  margin: 4px 0 10px;
  font-family: var(--font-heading);
  font-size: 1.625rem; font-weight: 640; letter-spacing: .12em;
  overflow-wrap: anywhere;
}
/* 連結本身以看得見、選得起來的文字出現 — 理由逐字同 me-invite 的 `.inv-link`
   (#200):剪貼簿那條路一壞,使用者要有肉眼抄得到的退路,而 `execCommand("copy")`
   要選起來的正是這一段。 */
.fr-link { font-size: 0.75rem; padding: 8px 10px; }
.fr-note { margin-top: 8px; font-size: 0.75rem; }
.fr-add .fr-acts { margin: 10px 0 0; }

/* 我的 QR — #453(#449 的位子落地)。`qrSVG()` 回來的 `<svg>` 自己帶留白(§ISO
   18004 那圈 quiet zone,見 qr-code.js 檔頭),這裡只頂住卡片的寬 —— 不再是虛線
   佔位框(那句「QR 稍後」跟著退場)。 */
.fr-qr {
  display: flex; align-items: center; justify-content: center;
  margin-top: 12px;
}
.fr-qr svg { max-width: 100%; height: auto; }

/* 「我的碼」與「貼上朋友的」之間那條線 —— 同一張卡上的兩件事(給出去、收進來)。 */
.fr-sep { margin: 16px 0; border-top: 1px solid var(--line); }
.fr-add label { display: block; margin-bottom: 6px; }
.fr-add .ghost { margin-top: 10px; }

/* 資訊項:讀完就算的那幾則(對方接受了、對方婉拒了)。**沒有鈕**,所以它不是
   `.fr-acts` 那一族;還沒讀過的那幾則用一顆點,顏色與導覽列上那顆徽章同一格
   token —— 兩處講的是同一個數字(同 notify.css 的 `.nrow.unread`)。 */
.fr-info { border-bottom: 0; padding: 8px 0; }
.fr-new .fr-say b::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 7px; height: 7px; margin: -2px 6px 0 0;
  border-radius: 50%; background: var(--warn);
}

.fr-guest .primary { margin-top: 14px; }

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

/* 「我的帳號」那一列右邊那顆小圈 — §4.4,數字由 nav.js 的 paintBadge() 寫。
   **它不是 `.nbadge`**:那一顆是 absolute,定位基準是 `nav button`(style.css),
   掛進 `.mg-entry` 這種沒有定位祖先的一列會飄到整張卡的角落去。這一顆是那一列裡
   的一格,所以是 inline —— 形狀照 `.pick-badge`(切換器每一列右上角那一顆),兩處
   講的是同一種東西:掛在一列上的一個數字。 */
.mg-entry .fr-dot {
  flex: none; margin-left: 6px;
  min-width: 17px; padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--warn); color: var(--on-warn);
  font-size: 0.65625rem; line-height: 1.0625rem; font-weight: 650; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------ 挑好友 — v-friendPick(#446,§6.2)

   兩段卡與每一列的排法都是上面那一組(`.fr-h` / `.fr-item` / `.fr-say` /
   `.fr-acts`):這一頁與好友頁是同一種東西的兩個用途(一份好友清單,一次是「這
   幾位是誰」,一次是「這幾位要不要進這本帳」),所以它只補三格 —— 勾選框那一列、
   座位那一排、以及讓它們在 320 上換行而不橫捲的那一條。 */

/* 勾選框 + 名字是一整列可按的字。**`min-width: 0` 在兩層都要**:名字長的那一位在
   320 上要折行,而 flex 子項的預設 `min-width: auto` 會讓它把整列撐出卡外。 */
.fp-who {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0; cursor: pointer;
}
.fp-who b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

/* 那顆方塊 —— 形狀逐字同 add.css 的 `.share input[type=checkbox]`,而**選擇器
   自己寫一份**:那一條住在 add.css(記一筆那一頁的樣式表),兩頁共用一條選擇器
   等於讓其中一頁的改動悄悄改掉另一頁(判準逐字同 me-list.css 那一格的說明)。

   沒有這一條的話,style.css 的 `input { width: 100% }` 會把它拉成一條橫槓 ——
   那條規則自己的註解就寫著這個坑。 */
.fp-who input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; flex: none; margin: 0; padding: 0; cursor: pointer;
  background: var(--chip); border: 1px solid var(--line); border-radius: 6px;
}
.fp-who input[type=checkbox]:checked { background: var(--card); border-color: var(--accent); }
.fp-who input[type=checkbox]:checked::after {
  content: ""; display: block; width: 4px; height: 9px; margin: 1px auto 0;
  border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.fp-who input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 「接手哪個座位」那一排 —— `.seg`(style.css)自己會 wrap,這裡只讓它**獨占一
   行**:座位名是使用者自己取的字,和名字擠在同一行上,320 寬的第一位好友就把整
   排藥丸推出卡外。`flex-basis: 100%` 讓它在 `.fr-item` 那個 wrap 容器裡換到下一
   行,而不是把那一列撐寬(那就是橫捲)。 */
.fp-seats { flex-basis: 100%; margin-top: 2px; }
.fp-seats button[disabled] { opacity: .45; cursor: default; }

/* 勾選框與名字對齊在同一條中線上 —— `.fr-item` 預設是 `baseline`(左邊兩行字、
   右邊幾顆鈕),而這一列左邊只有一行字加一個 20px 的方塊。 */
.fp-row { align-items: center; }

/* 沒有好友時那兩條出路貼著那句話置中,不靠右 —— `.fr-acts` 預設 `margin-left:
   auto`(它在別的列上是「右邊那一欄」),而這裡它們是整張卡唯一按得到的東西。 */
.fr-empty + .fr-acts { margin: 0 auto; }