/* CarPilot 的網頁樣式。**一份，全站共用。**
 *
 * 在這之前 privacy / terms / support 各自帶一份幾乎一樣的 inline <style>，
 * 改一個顏色要改三次——而它們早就分岔了：安裝頁是 #131519、這三頁是
 * #0b0f12、測速地圖是 #14161a，三種底黑；綠色也有三種。五個頁面看起來像
 * 五個不同的產品。
 *
 * 這裡的顏色**直接取自 App 的 `TripPalette.charcoal`**，所以網頁跟待機頁、
 * 報告頁是同一個東西。改色請兩邊一起改。
 */

:root {
  --bg: #131519;
  --surface: #1B1E24;
  --line: #272B33;
  --primary: #E9EBEF;
  --secondary: #8A9099;
  --tertiary: #565C66;
  /* brand＝執法與警示，action＝唯一那顆按鈕。兩者不互換（同 App）。 */
  --brand: #FF4B3A;
  --action: #00D89A;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
          "Noto Sans TC", Helvetica, Arial, sans-serif;
  /* 標題、導覽、標籤用等寬——那是 App 的語彙。內文不用：法務文件要好讀，
   * 而等寬中文與長段落是互斥的。 */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--primary);
  font: 16px/1.7 var(--sans);
  -webkit-text-size-adjust: 100%;
}

/* 站殼的寬度，**所有頁面一致**。導覽與頁尾掛在這一層，所以它一動、換頁時
 * header/footer 就跟著位移——站內切換時那是最刺眼的破綻。內文欄自己收窄
 * （見下面的 #page.doc），不要回頭把 max-width 掛到 main 上。 */
main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 44px 24px 96px;
}

/* 法務文件的內文欄。68ch 而不是 760px：760 配 18px 內文是一行 90 字以上，
 * 讀長文會掉行。首頁不收窄——它是圖與短句，擠在 68ch 裡截圖會小到看不清。 */
#page.doc { max-width: 68ch; }

/* ---- 導覽 ---- */

nav {
  display: flex;
  /* 手機上排不下時，flex 預設不換行——它會改成把「首頁」這種兩個字的項目
   * **從中間折斷**。允許換行、並且禁止在項目內部斷字。 */
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-bottom: 48px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

nav a { color: var(--tertiary); text-decoration: none; white-space: nowrap; }
nav a:hover { color: var(--primary); }
/* **目前在哪一頁要看得出來。** 三頁的導覽本來一模一樣。 */
nav a[aria-current="page"] { color: var(--action); }
/* 語言切換靠右——它不是第五個目的地，是同一頁的另一個版本。標籤一律用該語言
 * 自己的寫法（同 App 的語言選單）：看得懂英文的人要能在中文頁面裡找到它。 */
nav .lang { margin-left: auto; color: var(--secondary); }
nav .lang:hover { color: var(--primary); }

/* ---- 標題 ---- */

h1 {
  font: 800 clamp(30px, 7vw, 40px)/1.1 var(--sans);
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 10px;
}

h2 {
  font: 700 19px/1.35 var(--sans);
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 40px 0 10px;
}

/* 生效日期那一行。等寬＋字距，跟導覽同一族——它是 metadata 不是內文。 */
.meta {
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tertiary);
  margin: 0 0 40px;
}

.lead { font-size: 18px; color: var(--secondary); margin: 0 0 36px; }

p, li { color: var(--secondary); }
li { margin-bottom: 8px; }
strong { color: var(--primary); font-weight: 600; }

/* ---- 連結 ---- */

a { color: var(--action); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primary); }
/* 鍵盤焦點是無障礙必需，不是選配——但只有可操作的元件需要焦點框。
   `#page` 是 nav.js 為了讀屏軟切換用 `.focus()` 送焦點過去的地景（landmark），
   iOS Safari 會把它判定成 `:focus-visible`，於是整個 #page 被畫上綠框。
   把選擇器限定在互動元件，程式化的 landmark 焦點就不會有視覺副作用。 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--action); outline-offset: 3px; border-radius: 2px;
}

/* ---- 卡片 ---- */

aside {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 28px 0;
}
aside > :first-child { margin-top: 0; }
aside > :last-child { margin-bottom: 0; }

/* ---- 頁尾 ---- */

footer {
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font: 500 12px/1.6 var(--mono);
  letter-spacing: 0.06em;
  color: var(--tertiary);
}

/* ---- 首頁 ---- */

/* 字標用等寬大寫——那是 App 啟動畫面上的同一個東西。 */
.wordmark {
  font: 800 clamp(34px, 9vw, 54px)/1 var(--mono);
  letter-spacing: 0.12em;
  margin: 0 0 12px;
}
.wordmark span { color: var(--brand); }

/* 上架前先放狀態，不放按鈕：Ad Hoc 安裝頁（/install/）不對外，商店連結還沒有，
 * 給一顆按不動的按鈕比沒有按鈕更糟。 */
.soon {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 26px;
  font: 600 15px/1 var(--sans);
  color: var(--secondary);
}

/* 唯一那顆按鈕，用 action 色。頁面上不會有第二顆——多一顆就沒有主要動作。
 * 目前沒有頁面用到它：商店連結上線時，首頁的 .soon 換回這顆。 */
.btn {
  display: inline-block;
  background: var(--action);
  color: var(--bg);
  text-decoration: none;
  font: 700 17px/1 var(--sans);
  padding: 17px 34px;
  border-radius: 14px;
  transition: transform .18s ease, filter .18s ease;
}
.btn:hover { color: var(--bg); filter: brightness(1.08); }
.btn:active { transform: scale(.985); }
.btn-note { font-size: 13px; color: var(--tertiary); margin: 12px 0 0; }

/* auto-fit：手機上自己收成兩欄，不用為了斷點再寫一組規則。 */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  margin: 44px 0 8px;
}
.shots figure { margin: 0; }
.shots img,
.dash img {
  width: 100%;
  /* HTML 上的 width/height 是給瀏覽器**保留版面**用的，不是最終尺寸。少了
   * height:auto，那個 height 就變成實際高度：手機上寬度被壓成 160 px、高度
   * 卻還是 860，整張圖直接拉長變形。有寫 width/height 屬性就一定要配這一行。 */
  height: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: block;
  background: var(--surface);
}
/* 儀表介紹：圖之後接標題與一段說明，所以欄比截圖牆寬、間距也大一格。 */
.dash {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  margin: 26px 0 8px;
}
.dash figure { margin: 0; }
.dash h3 {
  font: 700 16px/1.3 var(--sans);
  color: var(--primary);
  margin: 16px 0 6px;
}
.dash p { margin: 0; font-size: 15px; }

.shots figcaption {
  font: 500 12px/1.5 var(--mono);
  letter-spacing: 0.04em;
  color: var(--tertiary);
  margin-top: 10px;
}

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px 36px;
}
.cols ul { margin: 0 0 18px; padding-left: 1.15em; }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }