/* GTW AI Hub — 設計系統
 *
 * 2026-08-26 建立，取代 Stitch 匯出檔。
 * 為什麼不再用 Stitch：那個專案有 69 個 screen、同一頁十幾個版本，
 * 而且標題與實際主題脫鉤（「Refined Dark Mode」其實是淺色底）。
 * 沒有人答得出「線上跑的是哪一版」。現在 repo 就是唯一來源，git 歷史就是版本記錄。
 *
 * 配色：遊戲橘子橘 #ff6600 當唯一強調色，其餘全用中性灰階。
 * 字體：Noto Sans（拉丁）+ Noto Sans TC（中日韓），兩支都載，中英文一致。
 * 明暗：預設跟隨系統；<html data-theme="light|dark"> 可手動覆寫。
 */

/* ── Design tokens ──────────────────────────────────────────────── */
:root {
  /* 品牌 */
  --brand:            #ff6600;
  --brand-strong:     #e25500;
  --brand-soft:       #fff1e8;
  --on-brand:         #ffffff;

  /* 中性（淺色模式）。畫布刻意帶一點暖灰，卡片才浮得起來——
     純白畫布 + 純白卡片會分不出層次。 */
  --canvas:           #f7f6f3;
  --surface:          #ffffff;
  --surface-2:        #f0efeb;
  --line:             #e2e0dc;
  --line-strong:      #cfccc6;
  --ink:              #16150f;
  --ink-2:            #56534c;
  --ink-3:            #8b877e;
  --pill-ink:         #16150f;   /* 選中的 pill 底色 */
  --on-pill-ink:      #ffffff;

  /* 標籤用的淡色盤。參考圖裡的分類標籤是多色的（Design/Commercial/Dev），
     只用一個橘色分不出類別。這些都刻意低飽和，橘子橘才留得住強調地位。 */
  --tint-a-bg: #ede9fb; --tint-a-ink: #4c3aa0;   /* 紫 */
  --tint-b-bg: #e2eefb; --tint-b-ink: #1d5a92;   /* 藍 */
  --tint-c-bg: #e3f3e8; --tint-c-ink: #1f6b41;   /* 綠 */
  --tint-d-bg: #fdeadf; --tint-d-ink: #9a4a10;   /* 橘（淡） */
  /* 重點卡的底色。原本直接用 --brand 整張塗滿橘子橘，
     使用者 2026-09-01 回報「太重了」——一頁 19 張卡裡有一張整片飽和橘，
     搶掉的注意力比它承載的資訊多。改成粉橘底 + 一般深色字，
     標籤仍留品牌橘，所以還是一眼看得出是哪一張。 */
  --accent-bg:   #ffe4d6;
  --accent-line: #f3c4ab;

  --ok:               #17734a;
  --warn:             #8a5a00;
  --danger:           #a3251b;

  /* 形狀與節奏 */
  --page:             #d8d6d1;   /* app 外框後面的底色。要比 canvas 明顯暗，不然看不出是個框 */
  --r-app:    28px;
  --r-card:   18px;
  --r-pill:   999px;
  --r-input:  10px;
  --gap:      16px;
  --gap-lg:   24px;
  --pad:      20px;
  --rail-w:   64px;
  --shadow:   0 1px 2px rgba(22,21,15,.05), 0 6px 20px rgba(22,21,15,.05);

  --font-sans: "Noto Sans", "Noto Sans TC", system-ui, -apple-system, sans-serif;
}

/* 深色。放在 media 與 [data-theme] 兩處：
   前者跟隨系統，後者讓手動切換能覆寫回去（只寫一處的話切不回來）。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page:        #0a0a0a;
    --canvas:      #121212;
    --surface:     #1c1c1b;
    --surface-2:   #232322;
    --line:        #2e2e2c;
    --line-strong: #3d3d3a;
    --ink:         #f2f0ec;
    --ink-2:       #b4b0a8;
    --ink-3:       #86827a;
    --pill-ink:    #f2f0ec;
    --on-pill-ink: #16150f;
    --brand-soft:  #33200f;
    --tint-a-bg: #2a2540; --tint-a-ink: #c3b6ff;
    --tint-b-bg: #1c2c3d; --tint-b-ink: #9ccbf5;
    --tint-c-bg: #1b2f24; --tint-c-ink: #94d7ae;
    --tint-d-bg: #33210f; --tint-d-ink: #ffb787;
    --accent-bg:   #3a2318;
    --accent-line: #5c3a28;
    --shadow:      0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  --page:        #0a0a0a;
  --canvas:      #121212;
  --surface:     #1c1c1b;
  --surface-2:   #232322;
  --line:        #2e2e2c;
  --line-strong: #3d3d3a;
  --ink:         #f2f0ec;
  --ink-2:       #b4b0a8;
  --ink-3:       #86827a;
  --pill-ink:    #f2f0ec;
  --on-pill-ink: #16150f;
  --brand-soft:  #33200f;
  --tint-a-bg: #2a2540; --tint-a-ink: #c3b6ff;
  --tint-b-bg: #1c2c3d; --tint-b-ink: #9ccbf5;
  --tint-c-bg: #1b2f24; --tint-c-ink: #94d7ae;
  --tint-d-bg: #33210f; --tint-d-ink: #ffb787;
  --accent-bg:   #3a2318;
  --accent-line: #5c3a28;
  --shadow:      0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
}

/* ── 基礎 ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── 版面骨架 ───────────────────────────────────────────────────── */
/* 側邊欄是有文字的（不是只有圖示的細欄）。可收放成只剩圖示。
   2026-08-26 改：上一版做成 64px 純圖示欄，使用者要回有文字的版本。
   收放狀態記在 <html data-side="collapsed">，存 localStorage。 */
:root { --side-w: 236px; --side-w-min: 68px; --pad-y: 18px; }
:root[data-side="collapsed"] { --side-w: var(--side-w-min); }

/* 整個 app 裝在一個大圓角容器裡，外面留一圈灰底。
   四張參考圖都是這個做法——邊到邊的版面看起來像網頁，裝進框裡才像應用程式。 */
/* dvh：手機瀏覽器的網址列收合時，100vh 會比可見高度多出一截，版面跟著跳。
   不支援 dvh 的舊瀏覽器讀第一行。
   底部多留 72px：右下角的聊天按鈕是固定定位，會蓋住最後一排卡片。 */
.page { padding: 20px 20px 92px; min-height: 100vh; min-height: 100dvh; }
.app {
  background: var(--canvas); border-radius: var(--r-app);
  padding: 18px; max-width: 1560px; margin: 0 auto;
}
.shell { display: flex; align-items: flex-start; gap: 16px; }

.side {
  width: var(--side-w); flex: 0 0 var(--side-w);
  position: sticky; top: var(--pad-y);
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 0 12px 12px;
  display: flex; flex-direction: column; gap: 4px;
  transition: width .18s, flex-basis .18s;
  overflow: hidden;
}
/* 品牌列的高度刻意跟頂列一樣（52px），兩邊的第一個元素才會齊平。
   上一版沒對齊，圖示欄整條比頂列高出一截，看起來像浮在上面。 */
.side__brand {
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 8px; margin-bottom: 4px;
  font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
}
.side__mark {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px;
  background: var(--brand); color: var(--on-brand);
  display: grid; place-items: center; font-size: 15px; font-weight: 800;
}
.sidelink {
  display: flex; align-items: center; gap: 12px;
  height: 42px; padding: 0 10px; border-radius: 12px;
  color: var(--ink-2); font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: background .15s, color .15s;
}
@media (hover: hover) { .sidelink:hover { background: var(--surface-2); color: var(--ink); } }
.sidelink[aria-current="page"] { background: var(--brand); color: var(--on-brand); }
.sidelink .material-symbols-outlined { flex: 0 0 24px; font-size: 22px; }
.sidelink__text { overflow: hidden; }

.side__spacer { flex: 1; min-height: 12px; }
.side__toggle {
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 10px; border-radius: 12px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-3); font: inherit; font-size: 13px; white-space: nowrap;
}
@media (hover: hover) { .side__toggle:hover { background: var(--surface-2); color: var(--ink); } }
.side__toggle .material-symbols-outlined { flex: 0 0 24px; font-size: 22px; transition: transform .18s; }
:root[data-side="collapsed"] .side__toggle .material-symbols-outlined { transform: rotate(180deg); }

/* 收起來時只留圖示。文字用 display:none 而不是 opacity：
   opacity 的文字還會佔寬度，把圖示擠歪。 */
:root[data-side="collapsed"] .side { padding: 0 10px 12px; }
:root[data-side="collapsed"] .sidelink__text,
:root[data-side="collapsed"] .side__toggle-text,
:root[data-side="collapsed"] .side__brand-text { display: none; }
:root[data-side="collapsed"] .sidelink,
:root[data-side="collapsed"] .side__toggle { justify-content: center; padding: 0; }
:root[data-side="collapsed"] .side__brand { justify-content: center; padding: 0; }

.main { flex: 1; min-width: 0; }

/* ── 頂列 ───────────────────────────────────────────────────────── */
.topbar {
  background: var(--surface); border-radius: var(--r-pill);
  height: 52px; padding: 0 8px 0 20px;
  display: flex; align-items: center; gap: var(--gap);
  box-shadow: var(--shadow); margin-bottom: var(--gap-lg);
}
.topbar__title { font-weight: 600; letter-spacing: -.01em; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.iconbtn {
  width: 36px; height: 36px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer;
}
@media (hover: hover) { .iconbtn:hover { border-color: var(--line-strong); color: var(--ink); } }
.hamburger { display: none; }

/* ── 頁首 ───────────────────────────────────────────────────────── */
.pagehead { margin-bottom: var(--gap-lg); }
.eyebrow { font-size: 12px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.pagehead h1 { margin: 2px 0 0; font-size: 30px; line-height: 1.25; letter-spacing: -.02em; }
.pagemeta {
  margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3);
  display: flex; gap: 6px; flex-wrap: wrap;
}
.lede { margin: 8px 0 0; max-width: 68ch; color: var(--ink-2); font-size: 14px; }
.lede + .lede { margin-top: 4px; }   /* 連續的說明行靠緊一點，看得出是同一組 */

.toolbar {
  display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap;
  margin-bottom: var(--gap-lg);
}
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 7px 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500;
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--pill-ink); color: var(--on-pill-ink); border-color: transparent; }
.chip__count {
  margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--brand); color: var(--on-brand); font-size: 11px; font-weight: 700;
}
.chip[aria-pressed="true"] .chip__count { background: var(--brand); color: var(--on-brand); }

.stats { margin-left: auto; display: flex; gap: 32px; }
.stat__label { font-size: 12px; color: var(--ink-3); letter-spacing: .04em; }
.stat__value { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }

/* ── 統計卡（頂部那排大數字）──────────────────────────────────── */
.statcards {
  display: grid; gap: var(--gap); margin-bottom: var(--gap-lg);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.statcard {
  background: var(--surface); border-radius: var(--r-card); padding: 18px 20px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px;
}
.statcard--accent { background: var(--brand); color: var(--on-brand); }
.statcard--accent .statcard__label, .statcard--accent .statcard__note { color: rgba(255,255,255,.85); }
.statcard--a { background: var(--tint-a-bg); color: var(--tint-a-ink); }
.statcard--b { background: var(--tint-b-bg); color: var(--tint-b-ink); }
.statcard--c { background: var(--tint-c-bg); color: var(--tint-c-ink); }
.statcard__label { font-size: 12.5px; font-weight: 600; opacity: .85; }
.statcard__value { font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.statcard__note { font-size: 12px; color: var(--ink-3); }

/* ── 首頁「從這裡開始」──────────────────────────────────────────
   一條窄帶，不是 hero。淺橘底而不是實心橘：整塊實心品牌色太重。
   步驟超過三個就該獨立一頁，這裡塞不下。 */
.start {
  display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap;
  margin-bottom: var(--gap-lg);
  padding: 16px 20px; border-radius: var(--r-card);
  background: var(--brand-soft); border: 1px solid var(--accent-line);
}
.start__lead { min-width: 180px; }
.start__eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--brand-strong);
}
.start__lede { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-2); }
.start__steps { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.start__step {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); text-decoration: none;
  box-shadow: var(--shadow);
}
@media (hover: hover) { .start__step:hover { color: var(--brand-strong); } }
.start__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--r-pill);
  background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 700;
}
.start__body { display: flex; flex-direction: column; line-height: 1.35; }
.start__body b { font-size: 14px; font-weight: 650; }
.start__body i { font-style: normal; font-size: 12px; color: var(--ink-3); }
.start__step .material-symbols-outlined { font-size: 18px; color: var(--ink-3); }

/* ── 站內最近更新 ───────────────────────────────────────────────── */
/* 上一版做成一排藥丸，跟正上方的「從這裡開始」撞版型，長短不一還會
   排出鋸齒狀；六個橘標籤也把強調色稀釋掉。改成有日期欄的細列：
   結構跟上下都不一樣，標題對齊、行高一致，安靜地指路就好。 */
.upd { margin-bottom: var(--gap-lg); }
.upd__lead {
  display: flex; align-items: center; gap: 12px; margin-bottom: 2px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ink-3);
}
.upd__lead::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.upd__list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  column-gap: 28px;
}
.upd__item {
  display: flex; align-items: baseline; gap: 12px; min-width: 0;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.upd__item time {
  flex: none; width: 40px; font-size: 12px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
/* 標題一律單行截斷——中文標題長度差很多，讓它折行整條就忽高忽低。 */
.upd__item b {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.upd__tag { flex: none; font-size: 12px; color: var(--ink-3); }
@media (hover: hover) { .upd__item:hover b { color: var(--brand-strong); } }
@media (hover: hover) { .upd__item:hover time { color: var(--brand); } }

/* ── 分段控制與搜尋 ─────────────────────────────────────────────── */
.segment {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface); border-radius: var(--r-pill); box-shadow: var(--shadow);
}
/* 高度與最小寬度都釘死：字數不同的標籤（「全部」2 字 vs「產業動態」4 字）
   本來會長出不同寬度的膠囊，一排看起來參差不齊。 */
.segment__btn {
  height: 34px; min-width: 112px; padding: 0 14px;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap;
}
.segment__btn[aria-pressed="true"] { background: var(--pill-ink); color: var(--on-pill-ink); }
.segment__btn .material-symbols-outlined { font-size: 18px; }
.segment__count {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; min-width: 18px; padding: 0 6px;
  border-radius: var(--r-pill); font-size: 11px; font-weight: 700;
  background: var(--brand); color: var(--on-brand);
}

.search {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px;
  background: var(--surface); border-radius: var(--r-pill);
  padding: 0 16px; height: 40px; box-shadow: var(--shadow); color: var(--ink-3);
}
.search input {
  flex: 1; border: 0; background: transparent; font: inherit; font-size: 14px;
  color: var(--ink); outline: none; min-width: 0;
}
.search .material-symbols-outlined { font-size: 20px; }

/* ── 區塊標題 ───────────────────────────────────────────────────── */
.section { margin-bottom: 28px; }
/* 標題在左，細線往右補滿。比整條橫線少一點份量，
   又比只有標題更清楚地把上下切開。 */
.section__head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.section__title {
  margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em;
  white-space: nowrap;
}
.section__title .material-symbols-outlined { font-size: 18px; vertical-align: -3px; margin-right: 4px; }
.section__count {
  display: inline-flex; align-items: center; justify-content: center;
  height: 20px; min-width: 20px; padding: 0 7px; margin-left: 8px;
  border-radius: var(--r-pill); font-size: 11px; font-weight: 700;
  background: var(--surface-2); color: var(--ink-2);
}
.section__rule { flex: 1; height: 1px; background: var(--line-strong); opacity: .7; }
.section__sub {
  margin: 0; font-size: 12.5px; color: var(--ink-3); white-space: nowrap;
}
@media (max-width: 720px) {
  .section__head { flex-wrap: wrap; }
  .section__sub { white-space: normal; flex-basis: 100%; }
}

/* ── 卡片 ───────────────────────────────────────────────────────── */
.cards {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  /* 同一列的卡片等高（grid 預設的 stretch）。原本是 align-items:start，
     每張卡各自貼齊內容，同一列高低參差。
     等高之後底部那行來源要靠 .card__meta 的 margin-top:auto 壓到底，
     不然短的卡片會在下面留一塊空白。 */
}
.card {
  background: var(--surface); border-radius: var(--r-card); padding: var(--pad);
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
@media (hover: hover) { .card:has(> a.card__title):hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(22,21,15,.06), 0 12px 28px rgba(22,21,15,.09); } }
/* 強調卡：對應附圖裡那幾張黃色卡的角色。橘子橘只用在這裡，用多了就不強調了。 */
/* 重點卡：粉橘底，字色與一般卡相同。
   標籤保留品牌橘，讓它仍然是整頁第一眼會看到的那一張。 */
.card--accent { background: var(--accent-bg); }
.card--accent .card__summary { color: var(--ink-2); }
.card--accent .card__meta { color: var(--ink-3); }

.card__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* 高度釘死，不靠字體行高。中日韓字與拉丁字的行高不同，
   「重點」跟「MIT」放在一起會差幾 px——看得出來但講不出哪裡怪。 */
.tag {
  display: inline-flex; align-items: center; height: 24px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 0 10px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2);
}
.tag--brand { background: var(--brand-soft); color: var(--brand-strong); }
/* 重點卡上的「重點」標籤改成實心橘。
   --brand-soft(#fff1e8) 跟粉橘卡底(#ffe4d6)幾乎同色，放上去會糊掉，
   等於這張卡沒有任何標記。整片底色淡下來之後，
   「這是重點」就只剩這一枚標籤在講，它必須看得見。 */
.card--accent .tag--brand { background: var(--brand); color: var(--on-brand); }
.tag--a { background: var(--tint-a-bg); color: var(--tint-a-ink); }
.tag--b { background: var(--tint-b-bg); color: var(--tint-b-ink); }
.tag--c { background: var(--tint-c-bg); color: var(--tint-c-ink); }
.tag--d { background: var(--tint-d-bg); color: var(--tint-d-ink); }
.card__title { font-size: 16px; font-weight: 650; line-height: 1.45; letter-spacing: -.01em;
  /* 標題允許資料自己斷行：km.json 的 title 裡放 \n 就會換行。
     pre-line 只保留換行、空白照常收合，不影響沒有 \n 的標題。 */
  white-space: pre-line; }
@media (hover: hover) { a.card__title:hover { color: var(--brand-strong); } }
@media (hover: hover) { .card--accent a.card__title:hover { color: var(--brand-strong); text-decoration: underline; } }
/* 整張卡都是點擊範圍。卡片 hover 會整張浮起，看起來整張可點，
   但原本只有標題是連結，點摘要或空白處沒有反應。
   標題的 ::after 蓋滿整張卡；卡片裡其他按鈕與連結墊高一層，仍然各自可點。
   只套在標題是連結的卡片上——沒有連結的卡片不浮起，也不假裝可點。 */
.card:has(> a.card__title) { position: relative; cursor: pointer; }
.card > a.card__title::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
}
.card:has(> a.card__title) :is(a, button):not(.card__title) { position: relative; z-index: 1; }
/* 首頁「顯示其餘」：收合時只露出前幾則。篩選中由 JS 拿掉 data-collapsed。 */
.cards[data-collapsed] > .card--later { display: none; }
.more {
  display: flex; align-items: center; justify-content: center;
  margin: var(--gap) auto 0; height: 40px; padding: 0 22px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, color .15s, transform .2s ease-out;
}
.more[hidden] { display: none; }
@media (hover: hover) { .more:hover { border-color: var(--brand); color: var(--brand-strong); } }
.more:active { transform: scale(.97); transition: transform 100ms ease-out; }
.card__summary { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.card__foot { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); }

/* 卡片上的「看安裝指令」按鈕。指令本身放浮動視窗——
   直接印在卡片裡會讓那張卡比同列其他卡高一倍，而卡片是等高的，
   一張長卡會把整列撐高、中間留一大片空白。 */
.card__btn {
  align-self: flex-start; margin-bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
@media (hover: hover) { .card__btn:hover { border-color: var(--brand); color: var(--brand-strong); } }
/* 有連結的卡片，cta 也走同一顆按鈕，主要動作不能比次要動作弱。
   margin-top:auto 把它壓到卡片底部——卡片等高，說明長短不同按鈕才會齊。 */
a.card__btn { text-decoration: none; margin-top: auto; }
.card__btn .material-symbols-outlined { font-size: 18px; }

/* 指令浮動視窗 */
.codebox {
  width: min(680px, calc(100vw - 32px));
  padding: 0; border: 0; border-radius: var(--r-card);
  background: var(--surface); color: var(--ink);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.codebox::backdrop { background: rgba(0,0,0,.45); }
.codebox__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.codebox__title { font-weight: 650; font-size: 15px; margin-right: auto; }
.codebox__copy {
  margin-top: 10px;
  height: 32px; min-width: 96px; padding: 0 14px; border-radius: var(--r-pill);
  border: 0; background: var(--brand); color: var(--on-brand);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
@media (hover: hover) { .codebox__copy:hover { background: var(--brand-strong); } }
.codebox__close {
  width: 32px; height: 32px; border-radius: var(--r-pill);
  border: 0; background: transparent; color: var(--ink-3); cursor: pointer;
  display: grid; place-items: center;
}
@media (hover: hover) { .codebox__close:hover { background: var(--surface-2); color: var(--ink); } }
.codebox__body { padding: 4px 16px 8px; max-height: 70vh; overflow-y: auto; }
.codebox__sec { padding: 12px 0; }
.codebox__sec + .codebox__sec { border-top: 1px solid var(--line); }
.codebox__seclabel { margin: 0 0 10px; font-size: 13px; font-weight: 650; color: var(--ink); }
/* UI 路徑用有序清單，不是 <pre>：選單路徑複製起來沒有用，
   做成可複製的程式碼區塊只會誤導。 */
.codebox__steps { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.85; }
.codebox__steps li { margin: 0 0 2px; }
.codebox__pre {
  margin: 0; padding: 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  overflow-x: auto; white-space: pre;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px; line-height: 1.8;
}
.codebox__note { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); }
.codebox__img {
  display: block; width: 100%; max-width: 720px; height: auto;
  margin: 10px 0 0; border: 1px solid var(--line); border-radius: 8px;
}
/* 內容區可以捲動，但 macOS 的捲軸平時是隱形的：
   內容剛好被切在摺線上時，讀者看到的是半顆按鈕，會以為壞了。
   （2026-08-31 實測：body scrollHeight 767 / clientHeight 663，
   捲到底按鈕完整可見，但初始畫面把它切一半。）
   兩個提示：底部留白讓元素不會齊平被切，以及一道漸層說明下面還有東西。 */
.codebox__body { position: relative; padding-bottom: 20px; }
.codebox__fade {
  position: sticky; bottom: 0; height: 28px; margin-top: -28px;
  pointer-events: none;
  background: linear-gradient(to top, var(--surface), transparent);
}
.codebox__foot {
  margin: 0; padding: 12px 16px 16px; font-size: 12px; color: var(--ink-3);
  border-top: 1px solid var(--line);
}

/* 按鈕與底部資訊一起貼底，同一列的按鈕才會對齊 */
.card__actions { margin-top: auto; display: flex; flex-direction: column; }

.card__meta {
  padding-top: 8px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* 情報卡的來源與日期壓到卡片底部。
   卡片是等高的，但這一行原本緊跟在摘要後面，
   所以同一列裡摘要長短不同，分隔線就一張比一張高低不一。
   2026-09-01 使用者回報「忽高忽低我覺得很亂」。
   上面第 323 行的註解早就寫了要這樣做，但規則裡一直沒有這一行。
   **用直接子元素選取器**：工具卡與學習資源卡的 .card__meta 包在
   .card__actions 裡（那層自己已經 margin-top:auto），不能一起改到。 */
.card > .card__meta { margin-top: auto; }
.card--accent .card__meta { border-top-color: var(--accent-line); }

/* 頁尾的判準說明。刻意不做成卡片：它不是一則內容，是這一頁的規則。 */
.gatenote {
  margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line-strong);
  color: var(--ink-3); font-size: 13px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px;
}
.gatenote__title { font-weight: 650; color: var(--ink-2); }
.gatenote p { margin: 0; }

.empty {
  background: var(--surface); border-radius: var(--r-card); padding: var(--pad);
  color: var(--ink-2); box-shadow: var(--shadow);
}
.notice {
  border-radius: var(--r-card); padding: 14px var(--pad); margin-bottom: var(--gap);
  background: var(--surface); border-left: 4px solid var(--danger); color: var(--ink);
  box-shadow: var(--shadow);
}

/* ── RWD ────────────────────────────────────────────────────────── */
/* 平板：導覽字縮小、卡片欄位自動變少（grid 用 auto-fill，不用另外寫）。 */
@media (max-width: 900px) {
  .main { padding: 14px 16px 32px 0; }
  .pagehead h1 { font-size: 25px; }
  .stats { gap: 20px; }
  .stat__value { font-size: 21px; }
}

/* 手機：側邊欄變抽屜，靠漢堡鈕滑出。 */
@media (max-width: 720px) {
  :root { --gap-lg: 18px; --pad: 16px; }
  .page { padding: 8px 8px 84px; }
  .app { padding: 10px; border-radius: 18px; }
  .shell { gap: 0; }
  .side {
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    width: 236px; flex-basis: 236px; border-radius: 0; padding: 0 12px 12px;
    transform: translateX(-100%); transition: transform .2s;
  }
  html[data-nav="open"] .side { transform: none; }
  /* 手機一律展開顯示文字：抽屜有空間，收成圖示反而更難點。 */
  :root[data-side="collapsed"] .sidelink__text,
  :root[data-side="collapsed"] .side__brand-text { display: block; }
  :root[data-side="collapsed"] .sidelink,
  :root[data-side="collapsed"] .side__brand { justify-content: flex-start; padding: 0 10px; }
  .side__toggle { display: none; }
  .hamburger { display: grid; }
  .scrim {
    position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.5);
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  html[data-nav="open"] .scrim { opacity: 1; pointer-events: auto; }
  .pagehead h1 { font-size: 22px; }
  .stats { margin-left: 0; width: 100%; gap: 24px; }
  .cards { grid-template-columns: 1fr; }
  /* 篩選列在 390px 一行放不下四個 pill（4×112 = 448px）。
     2026-08-26 第一版讓它橫向捲——「整頁沒有溢出」的數字是綠的，
     但實際上第四個 chip 被切掉，而且畫面上沒有任何線索說它可以滑，
     等於把一個分類藏起來。改成換行成 2×2，什麼都不藏。 */
  .segment {
    display: flex; flex-wrap: wrap; gap: 4px;
    border-radius: var(--r-card);   /* 兩行的膠囊形狀很怪，改成方角卡片 */
    padding: 4px; width: 100%;
  }
  .segment__btn { flex: 1 1 calc(50% - 4px); min-width: 0; }
  /* 手機一行三格。原本 minmax(200px,1fr) 在 390px 只放得下一格，
     四張統計卡就吃掉一整個畫面高度，要滑很久才看到內容。 */
  .statcards { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .statcard { padding: 12px 10px; gap: 2px; border-radius: 14px; }
  .statcard__label { font-size: 12px; line-height: 1.35; }
  .statcard__value { font-size: 22px; }
  .statcard__note { display: none; }   /* 三格擠不下註解，留數字與標籤就夠 */
}

/* 按下去的瞬間就要有回饋。手機沒有 hover，原本按卡片、分頁籤、側欄
   都要等到換頁才看得出有沒有按到。縮放只動 transform，不影響版面。
   iOS Safari 要頁面上有 touchstart 監聽 :active 才會觸發，
   監聽放在 web/bot-widget.js（每一頁都會載入）。 */
.sidelink, .side__toggle, .iconbtn, .start__step, .segment__btn,
.card__btn, .codebox__copy, .codebox__close {
  -webkit-tap-highlight-color: transparent;
  /* 按下 100ms 縮進去，放開 200ms 彈回來——兩個方向都要有動畫，不能放開時瞬間跳回。 */
  transition: background-color .15s, color .15s, border-color .15s, transform .2s ease-out;
}
.sidelink:active, .side__toggle:active, .iconbtn:active, .start__step:active,
.segment__btn:active, .card__btn:active, .codebox__copy:active, .codebox__close:active {
  transform: scale(.97); transition: transform 100ms ease-out;
}
.upd__item:active b { color: var(--brand-strong); }
/* 卡片面積大，縮 3% 會跳太多，只縮 1.5%。 */
.card:has(> a.card__title) { -webkit-tap-highlight-color: transparent; }
.card:has(> a.card__title):active { transform: scale(.985); transition: transform 100ms ease-out; }

/* 觸控裝置的輸入框至少 16px。iOS Safari 遇到小於 16px 的輸入框，
   點下去會自動放大整頁，打完字還要自己縮回來。
   用 pointer: coarse 而不是寬度判斷：iPad 寬度大，但一樣會放大。 */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
}

/* 使用者在系統開了「增加對比」：陰影分不出層次，改用實線框；
   次要文字加深一級。 */
@media (prefers-contrast: more) {
  .card, .side, .topbar, .search, .segment, .start__step { box-shadow: none; border: 1px solid var(--line-strong); }
  :root { --ink-3: var(--ink-2); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .card:has(> a.card__title):hover,
  .card:has(> a.card__title):active { transform: none; }
}

/* 換頁時右邊內容淡一下，讓「有在動」看得出來。
   不放轉圈：本機幾十毫秒就換完了，轉圈只會閃一下更吵。 */
main[data-loading] { opacity: .45; transition: opacity .12s ease; }