/* 知識庫文章版面。同 styles.css 一齊用(先 link styles.css,再 link 呢個)。
   Token 一律由 styles.css 提供,呢度唔定義新顏色。 */

.article { max-width: 680px; margin-inline: auto; padding-inline: var(--space-6); }

/* 文章頭 */
.article__kicker {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .06em;
  color: var(--color-primary); margin-bottom: var(--space-3);
}
.article__title { font-family: var(--font-serif); font-size: clamp(26px, 6vw, 36px); }
.article__lede  { font-size: 19px; color: var(--color-text-muted); margin-bottom: var(--space-8); }
.article__meta  { font-size: 14px; color: var(--color-text-muted); margin-bottom: var(--space-12); }

/* 正文 —— 中文排版:行距要鬆,段落唔好長 */
.prose { font-size: 17px; line-height: 1.9; }
.prose > * + * { margin-top: var(--space-6); }
.prose h2 { margin-top: var(--space-16); font-size: 24px; }
.prose h3 { margin-top: var(--space-12); font-size: 19px; }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li + li { margin-top: var(--space-2); }
.prose strong { font-weight: 600; }

/* 圖解 —— 每篇文章都要有,係原創資產 */
/* margin-inline:0 —— 覆蓋瀏覽器對 <figure> 預設嘅 40px 左右邊距。
   唔覆蓋嘅話,390px 手機上圖解淨返 262px 闊,圖入面嘅標籤字會細到睇唔到。 */
.figure { margin-block: var(--space-12); margin-inline: 0; }
.figure .ill { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.figure figcaption {
  margin-top: var(--space-3); font-size: 14px; line-height: 1.7;
  color: var(--color-text-muted); text-align: center;
}

/* 行話解釋 —— 海外第二代好多詞唔識,用呢個 inline 解 */
.term {
  border-bottom: 2px dotted var(--color-accent-text);
  cursor: help; text-decoration: none;
}

/* 重點框 —— 用嚟放「一句講曬」同減壓提示 */
.callout {
  border-left: 4px solid var(--color-primary);
  background: var(--color-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-4) var(--space-6);
}
.callout--ease { border-left-color: var(--color-accent); }
/* 2026-09-06 設計驗收:47 版淨靠金色左邊條同 .firsthand 分(對比 2.16:1),加文字標籤 */
.callout__label {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--color-accent-text); margin-bottom: var(--space-2);
}
.callout p:last-child { margin-bottom: 0; }

/* 舖頭第一手經驗 —— 呢個係 E-E-A-T 嘅命脈,要視覺上突出 */
.firsthand {
  border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent);
  background: var(--color-surface); border-radius: var(--radius-md);
  padding: var(--space-6);
}
.firsthand__label {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--color-accent-text); margin-bottom: var(--space-2);
}

/* 目錄 */
.toc { background: var(--color-surface); border: 1px solid var(--color-border);
       border-radius: var(--radius-lg); padding: var(--space-6); font-size: 15px; }
.toc ol { margin: var(--space-3) 0 0; padding-left: 1.3em; }
.toc li + li { margin-top: var(--space-2); }

/* 相關文章 */
.related { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
@media (min-width: 700px) { .related { grid-template-columns: repeat(2, 1fr); } }
.related a {
  display: block; text-decoration: none; color: inherit;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4);
}
.related a:hover { border-color: var(--color-primary); }
.related strong { display: block; margin-bottom: var(--space-1); }
.related span { font-size: 14px; color: var(--color-text-muted); }

/* 文末 CTA —— 克制,唔好硬銷。原則見 CLAUDE.md「經營原則」 */
.article-cta {
  margin-top: var(--space-16); padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

/* 語言切換 + 建議橫幅(見 docs/I18N.md:用瀏覽器語言,唔用 IP) */
.langbar { display: flex; justify-content: flex-end; align-items: center;
           gap: var(--space-2);
           /* 左右照舊 space-6,同 .article 嘅 24px 側邊對齊;
              上邊由 space-4 收成 space-2,補返個掣由 33px 加到 44px 嗰 11px。 */
           padding: var(--space-2) var(--space-6) 0; font-size: 14px; }
/* 觸控目標 44x44 —— 2026-09-04 sps-qa 喺 375px 實測到得 38x33 / 42x33。
   WCAG 2.5.8 嘅 24px 過到,但 iOS HIG 嘅 44pt 過唔到,而佢係一粒獨立導航掣,
   唔食「句子入面 inline link」嗰個豁免。
   ⚠️ 加大嘅係掣本身(唔係用透明 ::after 撐大),咁 :focus-visible 個框
   先至同真正撳得到嘅範圍一樣大 —— 唔一致嘅焦點框對鍵盤用戶係另一個問題。 */
.langbar a { display: inline-flex; align-items: center; justify-content: center;
             min-width: 44px; min-height: 44px;
             text-decoration: none; padding-inline: var(--space-3);
             border-radius: var(--radius-full); }
.langbar a[aria-current="true"] { background: var(--color-surface); font-weight: 600; }
.langsuggest {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-6); font-size: 15px;
}
/* 同上:呢粒「唔使 / Stay」係獨立掣。.btn 本身已經 44px,
   之前呢行反而將佢覆蓋返落 36px。 */
.langsuggest button { min-height: 44px; }

/* 表格 —— 文章入面好多對照表,要有框線先掃視得到。只用現有 token。 */
.prose table {
  width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.7;
  display: block; overflow-x: auto;      /* 手機橫向捲,唔好迫爆版面 */
}
.prose thead th {
  text-align: left; font-weight: 600; white-space: nowrap;
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-border);
}
.prose th, .prose td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
/* ⚠️ 2026-09-05(sps-qa D3):`display:block; overflow-x:auto` 單獨用係兩頭唔到岸。
   Chrome 見到個 block 窄過內容,就將表縮到 min-content ——
   結果係**又有橫向捲軸、又逐格斷到一行一至三個字**。
   `hoeng-gong-siu-ji-dei-fong` 有一行高 700px,第三欄被裁走。
   min-width 唔可以落喺 `<table>` 度(佢已經係 block = 捲動容器,
   撐大佢等於撐大個窗,唔係撐大內容),要落喺 cell:
   cell 有 min-width,匿名 table box 就會闊過容器,overflow-x 先至真係捲得郁。
   td 10em ≈ 150px、行頭 7em ≈ 105px @15px(box-sizing:border-box,已含內距)。
   三欄合共 ≈ 405px > 342px,而頭兩欄只佔 255px —— 即係第三欄仲露到 ≈87px,
   讀者一眼見到「右邊仲有嘢」,先至會去橫掃。
   ⚠️ 唔准為咗「唔想有捲軸」而拆走呢條 —— 冇佢就會變返一行一個字。 */
.prose td { min-width: 10em; }
/* ⚠️ 呢度本來同 thead 一樣寫 `white-space: nowrap`。行頭係最長嗰欄
   (「食環署墳場 / 靈灰安置所」≈ 200px),nowrap 就等於用咗手機 342px 入面
   嘅 200px 去擺一個標籤,第二欄一擺落去就頂到邊,第三欄一絲都唔露 ——
   讀者連「有第三欄」都唔知,更加唔會諗到要橫掃。
   改成準佢摺兩行 + min-width 落閘,係為咗留返一截下一欄出嚟做捲動提示。 */
.prose tbody th[scope="row"] {
  font-weight: 600; white-space: normal; min-width: 7em; background: var(--color-surface);
}
.prose tbody tr:last-child th, .prose tbody tr:last-child td { border-bottom: 0; }

/* 直接答案 —— 擺喺導言同目錄之間。
   1. 手機用戶掃到標題就見到答案,唔使捲
   2. 答案獨立成段、唔靠上文,搜尋引擎同 AI 摘要抽得走
   ⚠️ 唔可以代替導言。導言負責同理心,呢格負責答問題,兩樣都要。*/
.answer {
  max-width: var(--maxw);
  margin: 0 auto var(--space-8);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.answer__label {
  display: block;
  /* 13px = DESIGN.md 嘅「標籤」級數,同 .firsthand__label 一致。
     之前 12px 係全站唯一細過 13px 嘅正文元素(2026-09-04 sps-qa)。
     ⚠️ 只改字級 —— .answer 嘅結構同語意係 AEO 嘅嘢(LOG.md 5e),唔郁。 */
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
/* line-height 1.75 = DESIGN.md 對中文正文嘅下限(原本 1.65,唔夠)。
   17px 中文字擠喺 1.65 行距入面,喺手機上係全版最難掃嗰格 —— 而呢格嘅
   全部意義就係「畀人一眼睇到個答案」。改嘅只係行距,冇郁結構同語意。 */
.answer p { margin: 0; font-size: 17px; line-height: 1.75; }
.answer p + p { margin-top: var(--space-3); }

/* ═══════════ 英文版排版 ═══════════
   2026-09-05(sps-qa E5 / E6)。之前中英共用一套,而嗰套係為中文調嘅:
   `--font-sans` 由 "Noto Sans TC" 起頭 → 11 版英文頁嘅拉丁字行緊中文字體
   入面嗰套拉丁字型,字寬同基線都唔係為拉丁文設計;
   `max-width:680px` 對 17px 中文 ≈ 40 字/行(啱),對英文桌面實測 ≈78 字元/行
   (高過 45–75 常規上限);`line-height:1.9` 對拉丁文散。

   ⚠️ 呢個 override 嘅規範位置係 styles.css 嘅 :root 區塊,同
   `--color-border-strong` 一樣暫住喺呢度(本 session 唔准郁 styles.css token)。
   article.css 全部英文頁都 link(index / order / knowledge 都有),所以覆蓋率係齊嘅。
   下次郁 styles.css 就要搬過去 —— 見 docs/DESIGN.md「暫住 token / 待搬清單」。

   ⚠️ 兩條 stack 尾都要留返 TC 字體:英文頁有中文專有名詞(冤親債主、衣包 …),
   剝走咗就會由系統亂揀一隻 CJK fallback。 */
:root:lang(en) {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans TC", "PingFang HK", sans-serif;
  --font-serif: Georgia, "Iowan Old Style", "Times New Roman",
                "Noto Serif TC", "Songti TC", serif;
}
:lang(en) body { line-height: 1.7; }
/* ⚠️ sps-qa 建議 600–640px(佢估算 ≈70 字元),但實量過之後唔照跟:
   640px 出嚟係**最長 83 字元 / 中位 75**,已經頂穿 45–75 嗰個窗。
   原因係 640 屬 border-box(已含左右各 24px 內距),真正排字嘅闊度只剩 592px。
   580 → 內容 532px → 實量最長 76 / 中位 64–67,正中。
   量度方法:逐個字符 Range.getBoundingClientRect(),按 top 座標分行數字。
   ⚠️ 唔准用 ch 單位或者肉眼估 —— ch 係「0」嘅闊度,對比例字體唔準。
   中文照舊 680(實量 41 字/行),:lang(en) 唔會撞到佢。 */
:lang(en) .article,
/* ⚠️ .page(落單 / 追蹤頁)一定要一齊收。淨係收 .article 嘅話,
   en/order.html 仍然係 680px —— 實量 **最長 94 字元**,比冇收之前嘅文章頁
   仲差。呢兩版係最需要讀得清楚嗰兩版(客人喺度交先人姓名同電郵)。 */
:lang(en) .page { max-width: 580px; }
:lang(en) .prose { line-height: 1.65; }
/* 中文字密先要 1.75 落閘;拉丁字母本身高度低、字距鬆,同一個數值反而會散。
   ⚠️ 呢條只放寬拉丁文 —— 中文段落(包括英文頁入面引嘅中文)嘅 1.75 下限唔變。 */
:lang(en) .answer p { line-height: 1.6; }