/*
 * 官網的樣式。**這裡不發明任何東西**，數字全部照抄 App 的 lib/theme.ts：
 * 顏色、字級、行高、圓角、卡片的框跟陰影、按鈕的長相。
 * 改 App 的 theme 就要回頭改這一份，兩邊要是同一個東西。
 *
 * 字體用系統預設（安卓是思源黑體），跟 App 一樣。
 * App 那邊 fonts.serif 是 undefined，就是「不指定，用系統的」，
 * 所以網站也不去外面載字，順便省掉讓讀隱私權政策的人被第三方記錄一次。
 */

:root {
  /* colors（theme.ts 的 colors）*/
  --bg: #F7F3EC;
  --surface: #FFFDF9;
  --surface-alt: #F1EADF;
  --border: #E2D9CB;
  --border-lit: #F0E9DD;
  --text: #2A2622;
  --soft: #6E655B;
  --faint: #A79C90;
  --primary: #6E655B;
  --on-primary: #FFFDF9;
  --accent: #B5654A;
  --accent-soft: #F3E4DD;

  /* spacing */
  --xs: 4px;
  --sm: 8px;
  --md: 16px;
  --lg: 24px;
  --xl: 36px;

  /* radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* 卡片的陰影：只落在下緣，左右跟上緣保持乾淨 */
  --card-shadow: 0 4px 8px -3px rgba(42, 38, 34, 0.18);

  /* 系統字。安卓是思源黑體，iOS 是蘋方 */
  --font: -apple-system, BlinkMacSystemFont, "Noto Sans TC", "PingFang TC",
    "Heiti TC", "Microsoft JhengHei", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* font.body 16 / line.body 24，跟 App 的內文同一級 */
  font: 16px/24px var(--font);
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 620px; margin: 0 auto; padding: 0 var(--lg); }

/*
 * 標題：font.h1 26 / line.h1 38，h2 是 19 / 29。
 * 都不加粗，層級靠字級跟顏色分，不靠字重。
 */
h1 { font-size: 26px; line-height: 38px; font-weight: 400; margin: 0 0 var(--xs); }
h2 { font-size: 19px; line-height: 29px; font-weight: 400; margin: var(--xl) 0 var(--sm); }
p { margin: 0 0 var(--md); }
a { color: var(--accent); }
/* 內文裡要強調的那一句。不加粗，改用深一階的顏色 */
strong { font-weight: 400; color: var(--text); }

/* 小字：font.small 14 / line.small 21，font.tiny 13 / line.tiny 20 */
.small { font-size: 14px; line-height: 21px; color: var(--soft); }
.tiny { font-size: 13px; line-height: 20px; color: var(--faint); }

/*
 * 卡片。theme.ts 的 panel：米白底、1px 邊、圓角 14，內距 18。
 * App 的卡片有下緣陰影，網頁上不要：那是為了讓一疊卡片有前後關係，
 * 這裡四張是並列的清單，加陰影只是變吵。
 */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px;
  /* 卡片之間 15。這一個不照 App 的 spacing 表，是網頁上看起來剛好的距離 */
  margin-bottom: 15px;
}
.card h2 { margin: 0 0 var(--xs); }
/* 說明文字用 font.small 14 / line.small 21，跟 App 的次要文字同一級 */
.card p { margin: 0; color: var(--soft); font-size: 14px; line-height: 21px; }

/*
 * 按鈕。theme.ts 的 Button：藥丸形、上下 6 左右 14、最矮 36、
 * 咖啡底配米白字，字距 0.3。
 */
.btn {
  display: inline-block;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0.3px;
  text-decoration: none;
}
.btn.outline {
  background: transparent;
  border: 1px solid #CFC3B0;
  color: var(--text);
}

/* 表格。邊框跟卡片同一支顏色 */
table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--sm) 0 var(--md);
  font-size: 15px;
  line-height: 23px;
}
th, td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
th { background: var(--surface-alt); font-weight: 400; color: var(--soft); }

ul, ol { padding-left: 20px; margin: 0 0 var(--md); }
li { margin: var(--xs) 0; }

/* 頁尾。分隔線用清單那條淡的 */
footer {
  border-top: 1px solid var(--border);
  margin-top: var(--xl);
  padding: var(--lg) 0 56px;
  text-align: center;
  color: var(--faint);
  font-size: 13px;
  line-height: 20px;
}
footer a { color: var(--soft); text-decoration: none; }
footer a:hover { color: var(--accent); }
footer .links { margin-bottom: var(--sm); line-height: 30px; }
footer .sep { color: var(--border); margin: 0 var(--sm); }

.back { display: inline-block; margin-top: var(--lg); }