/* 法律文件頁的樣式 —— 刻意獨立於 design/tokens.css。
 *
 * 這兩頁(privacy.html / terms.html)是**靜態 HTML**,不經過 Vite、不載入
 * app bundle,理由有三個,每一個都是它存在的目的:
 *
 *   1. 商店審查員與爬蟲不執行 JS。`wrangler.jsonc` 的
 *      `not_found_handling: "single-page-application"` 會讓任何未知路徑回
 *      `index.html` —— 一個 SPA 路由做的 /privacy 在審查員眼裡是「有頁面」,
 *      實際上是空殼。
 *   2. 隱私權政策必須在**登入前**、在 app 完全載入不起來時仍然讀得到。
 *   3. 它要能被單獨連結、被 App Store Connect / Play Console 的中繼資料欄位
 *      指向,那些欄位收的是一個純網址。
 *
 * 所以這裡不 import 任何 token —— 色票是手抄 tokens.css 的 paper/ink 兩個值,
 * 抄的理由與 index.html 的 blocking script 抄一份主題判斷是同一個:那條路徑
 * 讀不到模組。字級與間距刻意保守,這是一份要被列印與被機器讀的文件。
 */

:root {
  --paper: #f9f9f7;
  --surface: #ffffff;
  --ink: #1f1f1d;
  --muted: #6b6b66;
  --line: #e4e4df;
  --accent: #c25a41;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0d0d0d;
    --surface: #171716;
    --ink: #ececea;
    --muted: #9a9a94;
    --line: #2c2c2a;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 32px 20px 96px;
  background: var(--paper);
  color: var(--ink);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC",
    "Microsoft JhengHei", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 720px;
  margin: 0 auto;
}

header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
  margin-bottom: 28px;
}

h1 {
  font-size: 26px;
  line-height: 1.4;
  margin: 0 0 8px;
}

h2 {
  font-size: 19px;
  line-height: 1.5;
  margin: 36px 0 10px;
  padding-top: 4px;
}

h3 {
  font-size: 16px;
  margin: 22px 0 6px;
}

p,
li {
  margin: 0 0 12px;
}

ul {
  padding-left: 22px;
}

.meta {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

/* 草案標記 —— 這一版尚未經 privacy-officer 與安全總審。它是刻意顯眼的:
   一份看起來完整、實際上還沒被審過的政策,比一份誠實說自己是草案的更糟。
   審查通過、CEO 拍板生效日之後,把這個 <aside> 整塊刪掉。 */
.draft {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.7;
}

.draft strong {
  color: var(--accent);
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 16px;
  font-size: 15px;
}

th,
td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--surface);
  font-weight: 600;
}

a {
  color: var(--accent);
}

footer {
  border-top: 1px solid var(--line);
  margin-top: 44px;
  padding-top: 16px;
  color: var(--muted);
  font-size: 14px;
}