/*
 * ══ 兩頁純文字頁的版位：web/privacy.html 與 web/support.html ══
 *
 * 顏色一律 var(--c-*)，唯一來源 web/palette.css（跟其餘三支手寫 CSS 同一條規矩，
 * src/__tests__/landingCss.test.ts 會把這個檔一起掃進「零 hex」那條護欄）。
 *
 * ── 為什麼另開一個檔，而不是塞進 sections.css ────────────────────────────
 *
 * sections.css 是**首頁的版位**：hero、捲動場景、waitlist、那六個裝飾標籤。
 * 這兩頁一段都用不到。倒過來說也成立：這裡的規則首頁一條都不會用到。
 * 混在一起之後，讀 sections.css 的人會分不出哪些規則是首頁的責任——
 * 而 src/__tests__/landingMeta.test.ts 對 sections.css 有一條「@media 總數必須是 3」
 * 的護欄（契約 L14：只准 768 與 480 兩個斷點 + 一個 reduced-motion），
 * 在那個檔裡多寫任何一條媒體查詢都會紅。
 *
 * ── 這個檔**刻意一條 @media 都沒有** ──────────────────────────────────
 *
 * 不是忘了，是不需要：底下每一條規則都只動「上下」與字級，左右完全交給 .wrap。
 * .wrap 在 480 以下會自己從 24px 縮成 16px（sections.css 的斷點區塊），
 * 所以這兩頁的窄螢幕 padding 是**自動跟著生效**的。
 *
 * ⚠️ 這件事有一個踩過的坑：**不准在這裡寫 `padding: 36px 24px` 那種簡寫。**
 * 簡寫的四個邊都會寫入，會把 .wrap 的 `padding: 0 24px` 整個覆蓋掉，
 * 於是 480 斷點改的那條 .wrap 對這兩頁完全無效——首頁的 .pillars／.scene／.waitlist
 * 三個 section 就是踩了這個坑，才各自要把 24px 與 16px 各重寫一次
 * （理由逐字寫在 sections.css 那三處）。.footer 是修好的那個前例：只寫上下兩條長寫。
 * 底下 .doc 照 .footer 的寫法。
 */

/* ── 導覽列上的「回首頁」 ─────────────────────────────────────── */

/*
 * **這一顆刻意不掛 .nav__link。**
 *
 * sections.css 的 768 斷點裡有一條 `.nav__link { display: none }`，用意是
 * 「窄螢幕上收掉首頁那三個頁內錨點，免得把 sticky 導覽列撐成兩層」。
 * 那條對首頁是對的（那三個錨點指向的段落就在同一頁上，捲一下就到），
 * 但對這兩頁是**致命的**：這一顆是這兩頁唯一的出路，被藏掉之後
 * 手機上的隱私權政策就是一條死路——而且不會有任何測試紅，版面也不會破。
 *
 * 修法有兩條路，這裡選了第二條：
 *   (a) 掛 .nav__link 再補一條 `display: inline-block` 蓋回去（就是 .nav__cta 的做法）。
 *       它靠的是「同特異性、pages.css 排在 sections.css 後面」的來源順序——
 *       兩個檔案的 <link> 順序一換就靜悄悄地失效。
 *   (b) 自己是一個 class，跟那條媒體查詢**完全沒有交集**。
 * 代價是這裡重寫了一次藥丸的樣式（七行）。用七行重複換掉一個「順序一換就壞、
 * 壞了沒有東西會說話」的耦合，這筆划算。
 *
 * 樣式本身照 sections.css 的 .nav__link：3px 硬邊 + 藥丸 + 卡片底。
 * --c-ink 對 --c-card 是 17.79:1。
 */
.doc-nav__back {
  font-size: 20px;
  padding: 5px 14px;
  border: 3px solid var(--c-ink);
  border-radius: 999px;
  background: var(--c-card);
  color: var(--c-ink);
  text-decoration: none;
}

/* hover 只換底色不換字色：--c-ink 對 --c-band 是 15.84:1，仍過 AAA。 */
.doc-nav__back:hover {
  background: var(--c-band);
}

.doc-nav__back:focus-visible {
  outline: 3px solid var(--c-ink);
  outline-offset: 3px;
}

/* ── 內文本體 ─────────────────────────────────────────────────── */

/*
 * max-width 蓋掉 .wrap 的 1080px。
 *
 * 1080 是**排版**用的寬度（三格賣點、捲動場景的兩欄），不是**閱讀**用的。
 * 15px 的內文拉到 1080px 一行會超過 60 個中文字，眼睛跳回行首時很容易跳錯行。
 * 680px 在 15px 下大約是 40 個中文字一行。
 *
 * padding 只寫上下（理由見檔頭）。左右留給 .wrap，480 的縮排才會自動生效。
 */
.doc {
  max-width: 680px;
  padding-top: 36px;
  padding-bottom: 48px;
}

/*
 * 「最後更新」那一行。11px，跟首頁 .waitlist__note 同一級——
 * 它是查證用的資訊，不是要讀的內容。
 * 顏色不寫：.prose 已經是 --c-sub，對頁面底 --c-page 是 7.87:1（過 AAA）。
 */
.doc__updated {
  font-size: 11px;
  margin: 4px 0 28px;
}

/*
 * 段標題。字級吃 base.css 的 .t-head（30px，GenYo 不受 11 整數倍限制）。
 * 上緣那條 3px 實線是這一頁唯一的分隔手段——沒有底色塊、沒有陰影，
 * 跟整站「3px 硬邊」的視覺語言一致。
 */
.doc__section {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 3px solid var(--c-ink);
}

.doc__section-title {
  margin: 0 0 12px;
}

/*
 * 條列。列點符號留著（那是「這是一串並列的事實」的語意），
 * 只把預設的左內縮從瀏覽器的 40px 收成 22px——40px 在 375px 的螢幕上
 * 會讓每一列的可用寬度少掉一成。
 */
.doc__list {
  margin: 0;
  padding-left: 22px;
}

.doc__list li {
  margin-bottom: 10px;
}

.doc__list li:last-child {
  margin-bottom: 0;
}

/*
 * 內文裡的連結（含 mailto:）。
 *
 * 顏色**必須明寫**：不寫的話會吃到瀏覽器預設的藍，那個顏色沒有人量過對比，
 * 而且它跟這一頁整組冷暖色完全不搭。--c-ink 對頁面底 --c-page 是 17.05:1。
 * 底線留著——這一頁的連結散在整段文字裡，只靠顏色分辨太吃力
 * （對分不出這兩個顏色的人來說，等於沒有連結）。
 */
.doc__link {
  color: var(--c-ink);
}

.doc__link:focus-visible {
  outline: 3px solid var(--c-ink);
  outline-offset: 2px;
}

/*
 * 信箱地址那一塊。做成一張卡片，理由跟首頁的 #waitlist-error 一樣：
 * 這一頁只有一個「請你動手做的事」，它要跟周圍的說明文字分得開，
 * 而這一站沒有任何強調色可以用（整份色票裡一個紅都沒有），
 * 所以靠**形狀**不靠顏色。--c-ink 對 --c-card 是 17.79:1。
 */
.doc__contact {
  margin: 16px 0 0;
  padding: 14px 18px;
  background: var(--c-card);
  border: 3px solid var(--c-ink);
  border-radius: 10px;
  color: var(--c-ink);
}