/*
 * 隱私政策頁的**內文樣式**（`privacy/index.html` 專用）：標題階、內文、資料表、返回鍵。
 * 殼層（色票、字階、容器、頁首、按鈕、頁尾）在 `style.css`，兩頁共用。
 *
 * 為什麼獨立一份：三花貓改版把整站換成奶油亮色之後，`style.css` 的色票層長出了
 * `--cat-*` 這一組（品牌色的單一來源），加上去就頂到單檔 500 行。與其把內文樣式硬塞回殼層，
 * 不如讓兩頁對稱 —— index 是「殼層 ＋ `landing.css` ＋ `hero.css`」，privacy 是「殼層 ＋ 這一份」。
 *
 * 顏色一律引用 `style.css` 的 token，這裡不定義色值。
 */

/*
 * 🔴 **只設 block 方向的 padding**（下方 620px 斷點那一條同理）。`<main class="wrap doc">`
 * 兩個 class 在同一個元素上、`.doc` 宣告在後，`padding: 72px 0 96px` 這種 shorthand 會把
 * `.wrap` 的 `padding-inline: var(--gutter)` 一起重設成 0 —— 手機版整頁文字貼死左緣，
 * 而**整頁不會橫捲**，所以只驗 scrollWidth 的探針對這一格全綠。
 */
.doc {
  padding-block: 72px 96px;
  /* 760px 是**內文**的寬度：gutter 活回來之後 border-box 會把它算進去，加兩個 gutter 才是同一個字行長 */
  max-width: calc(760px + var(--gutter) * 2);
}

.doc h1 {
  font-size: clamp(34px, 5vw, 50px);
}

/* 生效日期掛 `.brand-dot`（共用層那顆橘點），跟首屏膠囊、landing 的區塊小標是同一個記號 */
.doc .effective {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-3);
}

/*
 * 每個 h2 上面一小段橘色短棒。長文件在奶油底上很容易糊成一片，這根棒子是掃視時的落點；
 * 用**圖形**而不是把標題染色，字色才守得住墨線色的對比（橘字要另外加深，見殼層的色票註解）。
 */
.doc h2 {
  font-size: 24px;
  margin-top: 56px;
}

.doc h2::before {
  content: '';
  display: block;
  width: 30px;
  height: 3px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: var(--cat-orange);
}

.doc p,
.doc li {
  color: var(--text-2);
  font-size: 17px;
}

.doc > p,
.doc ul {
  margin-top: 20px;
}

.doc ul {
  padding-left: 22px;
  display: grid;
  gap: 12px;
}

/* 項目符號跟著換成橘點：預設的黑點在奶油底上比內文還重 */
.doc li::marker {
  color: var(--cat-orange);
}

.doc strong {
  color: var(--text);
  font-weight: 600;
}

/* 內文連結加底線：亮色底上只靠顏色區分連結，色盲使用者看不出它可以點 */
.doc a {
  color: var(--accent);
  /* 底線比字淡一階，靠 `currentColor` 稀釋而不是另抄一顆橘 —— 抄過來的那顆會跟色票各走各的 */
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 3px;
}

.doc a:hover {
  text-decoration-color: currentColor;
}

/* 表格比手機窄邊長：捲軸留在表格自己身上，不讓整頁橫捲 */
.table-scroll {
  margin-top: 24px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: 15px;
}

th,
td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: top;
}

/* 表頭用**比卡面深**的暖色：卡面已經是整站最亮的一階，表頭再加亮就分不出來了 */
th {
  color: var(--text);
  font-weight: 600;
  background: var(--surface-2);
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* 整頁唯一的導覽控制項，做成膠囊鍵：奶油底上一行裸文字讀不出它可以點 */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  padding: 8px 16px 8px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 15px;
  color: var(--text-2);
  text-decoration: none;
  transition: color 140ms ease, border-color 140ms ease;
}

.back-link:hover {
  color: var(--text);
  border-color: var(--cat-line-strong);
}

@media (max-width: 620px) {
  .doc {
    padding-block: 48px 72px;
  }
}