/* ==========================================================================
   CLI 教學 Hub — 共用樣式（Claude Code + Codex CLI + Gemini CLI + Copilot CLI）
   Token 唯一真相源：CLI-Hub/DESIGN.md
   骨架基底 = shadcn/ui neutral light；各單元僅覆寫少量品牌 accent。
   機制：:root = 全站 neutral tokens；[data-unit] 只換 --accent。
        版面 / 字級 / 間距 / 元件骨架全站共用，只留一份。
   ========================================================================== */

/* --- Design Tokens (見 DESIGN.md §2-§5) ------------------------------------ */
:root {
  /* 色彩：HSL 三數值（用時 hsl(var(--token))）— shadcn/ui neutral light */
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 5.9% 10%;

  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --primary-hover: 240 3.8% 18%;
  --accent: 240 5.9% 10%;
  --accent-foreground: 0 0% 98%;

  --link: 240 5.9% 10%;
  --link-hover: 240 3.8% 18%;

  /* 元件狀態專用（全部 token 化，CSS 不 hardcode） */
  --sidebar-hover: 240 4.8% 95.9%;
  --sidebar-active-bg: 240 4.8% 95.9%;
  --copy-success: 142 60% 50%;
  --code-prompt: 142 76% 36%;
  --code-comment: 240 3.8% 55%;
  --overlay: 240 10% 3.9%;

  --tip-bg: 240 4.8% 95.9%;
  --tip-border: 240 5.9% 90%;
  --tip-fg: 240 5.9% 10%;
  --warn-bg: 0 84% 97%;
  --warn-border: 0 72% 85%;
  --warn-fg: 0 63% 31%;
  --info-bg: 240 4.8% 95.9%;
  --info-border: 240 5.9% 90%;
  --info-fg: 240 5.2% 33.9%;

  --code-bg: 240 10% 3.9%;
  --code-fg: 0 0% 98%;
  --code-inline-bg: 240 4.8% 95.9%;
  --code-inline-fg: 240 5.9% 10%;

  /* 字體 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
    "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Source Code Pro",
    Menlo, Consolas, "Noto Sans Mono CJK TC", monospace;
  /* 藏文 (bo) 字型堆疊 — DESIGN.md §3.x。
     ⚠ 規格原指定 "Noto Sans Tibetan"，但該字型不存在於任何 Noto 發行（Google Fonts /
        notofonts / 封存 monorepo 皆僅 Serif）→ 暫用 "Noto Serif Tibetan"（唯一可得、
        疊字 GSUB 完整的 Noto 藏文），待 uiux/使用者確認 Sans↔Serif。
     fallback 內聯系統 sans stack（非 var(--font-sans)）：避免 html[lang|=bo] 上
     --font-sans:var(--font-sans-bo) 與 :root 同為 html 元素造成自我參照 cycle。 */
  --font-sans-bo: "Noto Serif Tibetan", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
    "Helvetica Neue", sans-serif;

  /* 字級階（閱讀型內容；級距 ≥1.3×、粗細兩端 400/700/750） */
  --text-xs: 0.8125rem; /* 13px */
  --text-sm: 0.9375rem; /* 15px */
  --text-base: 1.15625rem; /* 18.5px */
  --text-lg: 1.275rem; /* 20.4px */
  --text-h3: 1.275rem; /* 20.4px */
  --text-h2: 1.625rem; /* 26px */
  --text-h1: 2.125rem; /* 34px */
  --nav-text: 1rem; /* 16px — sidebar 導覽號碼 + 短標專用（長者友善，現行 15px → 16px） */
  --leading-body: 1.9;
  --leading-heading: 1.35;
  /* h1/h3 行高 tokenize（DESIGN.md §2.4 Option 1：原 h1{1.3}/h3{1.45} 硬值改 token，bo 才好覆寫） */
  --leading-h1: 1.3;
  --leading-h3: 1.45;
  /* 藏文 (bo) 行高 / 字級補償 — DESIGN.md §2.3。tsheg-bar 可上下疊 4–5 字，垂直佔位遠大於
     拉丁/CJK → 行高放鬆；字級 +8% 補視覺較小（QA 校：若 46rem 行長受損退回 18.5 只靠行高）。 */
  --leading-body-bo: 2.3;
  --leading-heading-bo: 1.7;
  --leading-h1-bo: 1.55;
  --leading-h3-bo: 1.7;
  --text-base-bo: 1.25rem; /* 20px（:root --text-base 18.5px +8%） */

  /* 字體縮放（A−/A＋/重設由 JS 改寫此值） */
  --font-scale: 1;

  /* 間距（4/8px grid） */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem; /* 80px — h2 章節大停頓 */
  --code-toolbar-h: 3.25rem; /* 52px：讓程式碼第一行起點落在複製鈕底緣下方 */

  /* 圓角 / 尺寸 / 陰影（shadcn neutral，低陰影） */
  --radius: 0.5rem;
  --radius-sm: 0.375rem;
  --radius-lg: 0.5rem;
  --viewport-min: 320px;
  --container-gutter: clamp(var(--space-4), 4vw, var(--space-12));
  --content-readable-max: 46rem;
  --content-wide-max: 72rem; /* 首頁分流區專用；非首頁外層內容一律走 readable */
  --content-max: var(--content-readable-max); /* legacy alias: reading column */
  --card-min: 19rem;
  --table-min: 44rem;
  --sidebar-w: 17rem;
  --topbar-h: 3.75rem;
  --topbar-offset: var(--topbar-h);
  /* A− 會縮小 rem；實體命中區仍不得低於 44 CSS px。 */
  --control-hit-min: 44px;
  --shadow-sm: 0 1px 2px 0 hsl(240 5.9% 10% / 0.05);
  --shadow: 0 1px 3px 0 hsl(240 5.9% 10% / 0.08);
  --shadow-md: 0 4px 6px -1px hsl(240 5.9% 10% / 0.08),
    0 2px 4px -2px hsl(240 5.9% 10% / 0.06);

  /* 動態 */
  --transition: 150ms ease;
  --transition-tab: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-copy: 200ms ease;

  /* Step List 動手步驟元件（見 DESIGN.md §7.9）
     真值僅兩個；其餘為「語義別名」指向既有色值，不另起新色。 */
  --step-marker-size: 1.75rem; /* 28px 步驟號圓徽直徑（真值） */
  --step-rail-w: 3px; /* 左側導引線寬（真值） */
  /* 動手做標籤：底/字/邊 = 既有 callout-tip 三色（語義別名） */
  --step-label-bg: var(--tip-bg);
  --step-label-fg: var(--tip-fg);
  --step-label-border: var(--tip-border);
  /* 預期會看到區：底 = 既有 --muted 淺灰（語義別名，刻意與 code-block 深色底區分成「輸入 vs 輸出」） */
  --step-expect-bg: var(--muted);

  /* 漸進式揭露註釋機制（見 DESIGN.md §7.10）
     分層：.gloss 短名詞行內 popover（看一眼即關）／ .detail-note 長原理就地 disclosure。
     全程不用品牌 accent。真值 2 個，其餘為語義別名指向既有色值（色彩零新增）。 */
  --gloss-hit-pad: 6px; /* 觸發詞命中區補白（撐 ≥44px 觸控，配負 margin 不影響行高）（真值） */
  --gloss-pop-max-w: 18rem; /* popover 最大寬（真值） */
  /* 短名詞 .gloss：虛線底色 / 浮層底·邊·字 = 既有中性色（語義別名，不另起新色） */
  --gloss-underline: var(--muted-foreground);
  --gloss-pop-bg: var(--popover);
  --gloss-pop-border: var(--border);
  --gloss-pop-fg: var(--popover-foreground);
  /* 長原理 .detail-note：summary 字 / 互動色 / body 底·邊 = 既有色值（互動色走 --link，非品牌 accent） */
  --detail-note-fg: var(--muted-foreground);
  --detail-note-accent: var(--link);
  --detail-note-body-bg: var(--muted);
  --detail-note-body-border: var(--border);

  /* 首頁 / codex index 的 TOC 章節列（Codex 獨有，併入共享段；claude 用不到無副作用）
     真值 1 個（編號欄固定寬：最長「第16章」實寬 ≈46.5px，56px 留 headroom）；
     別名 1 個（列內欄間距指向既有 spacing scale，非 one-off）。 */
  --toc-num-w: 3.5rem; /* 56px 編號欄固定寬（真值） */
  --toc-row-gap: var(--space-3); /* 12px 編號↔內容欄 column-gap（別名） */

  /* Data-viz 語義 token（traffic-audit-dashboard.html 稽核儀表板示範 demo；DESIGN.md §2.11）
     多為既有 token 別名（跟隨來源走，非重複定義）；唯一新增色相為 --trend-up。 */
  --chart-series-primary: var(--accent); /* 主序列 真實流量：跟隨單元 accent（本頁恆為 experts 紫） */
  --chart-series-muted: var(--muted-foreground); /* 次序列 機器人（虛線，刻意降階） */
  --chart-grid: var(--border); /* 格線 / 軸線 */
  --chart-axis-fg: var(--muted-foreground); /* 軸標籤 */
  --chart-tooltip-bg: var(--code-bg); /* tooltip 底，沿用 code-block 深色底 */
  --chart-tooltip-fg: var(--code-fg); /* tooltip 文字 */
  --trend-up: 142 72% 26%; /* 唯一新值：綠色家族深色變體，正向 Δ 文字（配 ▲，待 quality 實測 ≥4.5:1） */
  --trend-down: var(--warn-fg); /* 負向 Δ 文字（配 ▼） */
  --chart-h: clamp(12rem, 40vw, 18rem); /* 折線圖高度，RWD 隨容器流動 */
  --chart-min: 25rem; /* 400px：8 個 44px 週熱區加座標留白；不足時只讓 chart 局部橫捲 */
  --chart-point-r: 3px; /* 資料點半徑（hover/focus → 5px，見 .trend-chart__week:hover/:focus-within） */
  --kpi-card-min: 10rem; /* KPI 卡最小舒適寬參考值（160px） */
}

/* ==========================================================================
   per-unit accent 覆寫
   :root 為 neutral base；單元色只用於狀態線、當前項、入口卡色條與 crosslink。
   ========================================================================== */
[data-unit="claude"] {
  --accent: 24 95% 53%;
}

[data-unit="codex"] {
  --accent: 186 72% 42%;
}

[data-unit="gemini"] {
  --accent: 217 89% 52%;
}

/* experts（職業達人實戰案例）：紫色，與首頁 .unit-card--experts::before 同值同源，
   維持「入口卡色條」與「單元內頁 accent」一致（比照 claude/codex/gemini 既有慣例）。
   值 262 60% 52%（深色變體 262 65% 42%）：對比實算 6.52:1 / 9:1，見 DESIGN.md §2.10。 */
[data-unit="experts"] {
  --accent: 262 60% 52%;
}

/* copilot（GitHub Copilot CLI）：靛藍，第四個 CLI 單元、比照 claude/codex/gemini 既有慣例
   （單一 --accent 覆寫，不定義衍生 token；§2.10.2 護欄）。對比實算：hsl(240 56% 52%) on
   --background（白）≈ 7.5:1（AA 大字/AAA 邊緣，手算 sRGB 相對亮度，非工具實測）。深色變體
   見 §2.3 crosslink icon 段。 */
[data-unit="copilot"] {
  --accent: 240 56% 52%;
}

/* ==========================================================================
   藏文 (bo) webfont 自託管 + 語言 token-swap 機制 — DESIGN.md §3.x / §2.4
   ⚠ 字型替代：規格指定 "Noto Sans Tibetan"，但該字型不存在於任何 Noto 發行（僅 Serif）；
      暫用 "Noto Serif Tibetan"（唯一可得、疊字 GSUB 完整），待 uiux/使用者確認。
   自託管、禁 Google Fonts CDN runtime。VF 主檔僅 bo 頁 preload；switcher subset 全頁載。
   ========================================================================== */
@font-face {
  /* 本文全字 VF（bo 頁載）。雙 src：tech("variations") 供新瀏覽器，
     純 format("woff2") 為不支援 tech() 者的 fallback（同檔、瀏覽器只取其一、不重複下載）。 */
  font-family: "Noto Serif Tibetan";
  src: url("../fonts/NotoSerifTibetan-VF.woff2") format("woff2") tech("variations"),
    url("../fonts/NotoSerifTibetan-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* 切換器藏文標籤微 subset（~5KB，全頁載，獨立 family；保 བོད་ཡིག 疊字 GSUB：abvs/blws + GPOS） */
  font-family: "Tibetan Label";
  src: url("../fonts/noto-tibetan-switcher-subset.woff2") format("woff2")
      tech("variations"),
    url("../fonts/noto-tibetan-switcher-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* bo 語言 token-swap：html[lang|="bo"] = (0,1,1) > :root (0,1,0) 必勝；[lang|=] 容忍 bo-Tibt 等 subtag。
   只換 token、近零 component rule（仿 data-unit）。--font-mono(code) 不受影響。 */
html[lang|="bo"] {
  --font-sans: var(--font-sans-bo);
  --leading-body: var(--leading-body-bo);
  --leading-heading: var(--leading-heading-bo);
  --leading-h1: var(--leading-h1-bo);
  --leading-h3: var(--leading-h3-bo);
  --text-base: var(--text-base-bo);
}
/* bo 字距 reset：字距破壞 tsheg 與疊字 → h1/h2/h3/brand/eyebrow/group-title 一律 normal。
   :is() 特異性取最具體引數 (0,1,0) + html (0,0,1) = (0,1,1) > 各原規則必勝（不靠源序）。 */
html[lang|="bo"]
  :is(h1, h2, h3, .topbar__brand, [class*="eyebrow"], [class*="group-title"]) {
  letter-spacing: normal;
}

/* --- Reset / Base --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* 字級縮放基準：整頁 rem 連動（DESIGN.md §3） */
  font-size: calc(100% * var(--font-scale));
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  min-width: var(--viewport-min);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html.is-drawer-open,
body.is-drawer-open {
  overflow: hidden;
  overscroll-behavior: none;
}
body.is-drawer-open {
  position: fixed;
  top: var(--drawer-scroll-offset, 0px);
  left: 0;
  right: 0;
  width: 100%;
}

a {
  color: hsl(var(--link));
  text-decoration: none;
  text-underline-offset: 0.2em;
}
@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: hsl(var(--link-hover));
    text-decoration: underline;
  }
}
/* 375px 全站溢出 bug 根因之二（2026-07-21 確診，QA 於修復行內 code 換行 bug 時意外發現）：
   callout／清單／表格裡的裸網址連結（如 code.claude.com/docs/en/permission-modes、完整
   https://... URL）文字本身無空白可斷，窄螢幕下會被裁到螢幕外、撐出橫向捲動——跟行內 code
   （見上方 :not(pre) > code 的修復記錄）是同一種「長無空白 token 撐版」根因，只是元素從
   <code> 換成 <a>。下面這個既有選擇器（本用於裸連結底線樣式）天生已精準鎖定「無 class 的
   純文字型連結」——按鈕／UI 型連結（.btn、.crosslink__link、.pager__link 等）皆帶 class，
   不受影響——是最小改動的重用點：直接疊加 overflow-wrap 即可，不必另開新選擇器。全站掃描
   （HTML parser 結構驗證，非純 regex）顯示此 pattern 出現在 claude／codex／copilot／
   gemini／experts 共 40 檔、280 處連結，絕大多數是「本章官方文件參考」清單（<li> 271、
   <p> 5）；:where() 加入 td 額外涵蓋 4 處表格連結儲存格（copilot/appendix-c.html ×2、
   experts/devops.html ×2）。overflow-wrap:anywhere 純防禦性質，只在文字原本會溢出時
   介入換行，對目前已正常換行的連結零視覺副作用，不需要逐檔個別修改。 */
.content :where(p, li, td) > a:not([class]) {
  text-decoration: underline;
  text-decoration-color: hsl(var(--muted-foreground));
  text-decoration-thickness: 2px;
  overflow-wrap: anywhere;
}
.content :where(p, li, td) > a:not([class]):hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px hsl(var(--ring) / 0.12);
}

/* 跳至主內容（鍵盤 / 螢幕閱讀器） */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform var(--transition);
}
.skip-link:focus {
  transform: translateY(0);
  color: hsl(var(--primary-foreground));
  text-decoration: none;
}

/* --- Layout 外殼 ----------------------------------------------------------- */
.layout {
  min-height: 100vh;
}

/* 頂部 bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--topbar-h);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-4);
  background: hsl(var(--background) / 0.94);
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid hsl(var(--border));
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  min-height: max(2.75rem, var(--control-hit-min));
  font-weight: 750;
  font-size: var(--text-lg);
  color: hsl(var(--foreground));
  letter-spacing: -0.01em;
  /* 窄螢幕（375）讓 brand 收縮/截斷，把空間讓給固定尺寸的字級鈕 + 切換器，
     避免整列水平 overflow（字級鈕為 44px 觸控目標，不可縮）。 */
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__brand:hover {
  color: hsl(var(--foreground));
  text-decoration: none;
}
.topbar__spacer {
  flex: 1;
}

/* 漢堡鈕（手機顯示） */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 觸控目標 ≥44px */
  width: max(2.75rem, var(--control-hit-min));
  height: max(2.75rem, var(--control-hit-min));
  flex-shrink: 0;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: background var(--transition);
}
.menu-toggle:hover {
  background: hsl(var(--sidebar-hover));
}
.menu-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* 字級控制群組（shadcn outline button 群） */
.font-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  /* 字級鈕為 44px 觸控目標，不可被 flex 壓縮；窄螢幕收縮由 brand 承擔 */
  flex-shrink: 0;
}
.font-control__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 觸控目標 ≥44px（DESIGN.md §7.3） */
  min-width: max(2.75rem, var(--control-hit-min));
  height: max(2.75rem, var(--control-hit-min));
  padding: 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: hsl(var(--foreground));
  background: hsl(var(--card));
  border: 1px solid hsl(var(--input));
  /* active 段底部 2px accent 指示預留，未選時透明（避免 active 時跳版） */
  border-bottom: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
    color var(--transition), box-shadow var(--transition);
}
.font-control__btn:hover {
  background: hsl(var(--sidebar-hover));
}
/* active 段（目前生效的 scale）：neutral chip + 底部 2px 單元 accent 指示 */
.font-control__btn[aria-pressed="true"] {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  border-color: hsl(var(--input));
  border-bottom-color: hsl(var(--accent));
  box-shadow: var(--shadow-sm);
}
.font-control__btn[aria-pressed="true"]:hover {
  background: hsl(var(--card));
}
/* 到頂 / 到底：該方向鈕停用 */
.font-control__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 主體：sidebar + content */
.shell {
  display: block;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: var(--topbar-offset);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  overflow-y: auto;
  background: hsl(var(--background));
  border-right: 1px solid hsl(var(--border));
  padding: var(--space-6) var(--space-4) var(--space-12);
  /* 手機：預設藏到左側外，靠 .is-open 滑入 */
  transform: translateX(-100%);
  transition: transform 200ms ease;
  z-index: 35;
}
.sidebar.is-open {
  transform: translateX(0);
  box-shadow: var(--shadow-md);
}

/* ---------------------------------------------------------------------------
   方向甲「Quiet List」：短標單行全展開
   每項 = 號碼欄（右對齊、tabular、自成一軌）+ 單行短標（溢出 ellipsis）
   --------------------------------------------------------------------------- */
.sidebar__group {
  /* 群組間距改由 group-title 的上 margin 製造（見下） */
  margin-bottom: 0;
}
.sidebar__group-title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  padding: 0 var(--space-2);
  margin-top: var(--space-6); /* 24px 篇與篇之間的停頓 */
  margin-bottom: var(--space-2); /* 8px */
}
/* 第一篇緊貼 sidebar 上 padding，不額外加 top 停頓 */
.sidebar__group:first-child .sidebar__group-title {
  margin-top: 0;
}
.sidebar__note {
  margin: var(--space-2) var(--space-2) var(--space-4);
  padding: var(--space-2);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: var(--text-xs);
  line-height: 1.55;
}
.sidebar__list {
  list-style: none;
}
/* 項目間距 2px */
.sidebar__list > li + li {
  margin-top: 2px;
}
.sidebar__link,
.sidebar__disabled {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* 單行、上下 12px、觸控列高 44px */
  padding: var(--space-3) var(--space-2);
  min-height: 44px;
  border-radius: var(--radius-sm);
  font-size: var(--nav-text);
  font-weight: 450;
  line-height: 1.4;
  border-left: 3px solid transparent;
}
.sidebar__link {
  color: hsl(var(--foreground));
  transition: background var(--transition);
}
.sidebar__link:hover {
  /* neutral hover、無位移（DESIGN.md §7.1） */
  background: hsl(var(--sidebar-hover));
  text-decoration: none;
  color: hsl(var(--foreground));
}
.sidebar__link[aria-current="page"] {
  /* 當前頁：neutral 底 + 3px 單元 accent 左邊條 + 短標 700 */
  background: hsl(var(--sidebar-active-bg));
  border-left-color: hsl(var(--accent));
}
.sidebar__link[aria-current="page"] .sidebar__title {
  font-weight: 700;
}
.sidebar__link[aria-current="page"] .sidebar__num {
  color: hsl(var(--foreground));
}
/* 捲動章節高亮（scroll-spy，JS 加 .is-active）：標當前「節」，比 aria-current 的「頁」一階輕。
   僅當前頁 sidebar 含同頁 anchor 連結時由 JS 啟用（見 main.js）。
   只換字色、不加底，避免與當前頁底色打架。 */
.sidebar__link.is-active:not([aria-current="page"]) .sidebar__title {
  color: hsl(var(--link));
  font-weight: 700;
}
.sidebar__disabled {
  color: hsl(var(--muted-foreground));
  cursor: not-allowed;
}
/* 號碼欄：右對齊、tabular、自成一條左緣對齊軌（32px 寬） */
.sidebar__num {
  flex-shrink: 0;
  min-width: 2rem; /* 32px */
  font-size: var(--nav-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: hsl(var(--muted-foreground));
}
/* 短標：單行、溢出省略（保險，理論上短標已 ≤ 欄寬） */
.sidebar__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar__badge {
  flex-shrink: 0;
  margin-left: auto;
  font-size: var(--text-xs);
  padding: 0.05rem var(--space-2);
  border-radius: 999px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
  white-space: nowrap;
  align-self: center;
}

/* 手機抽屜底部「偏好設定」區（手機導覽精簡 / Drawer-Tools，DESIGN.md §7.13）：
   main.js 的 initTopbarTools() 於 <768px 把 topbar 的 .font-control / .lang-switch 搬入此處
   （同一節點 reparent，非複製，既有事件綁定與 aria 狀態全數沿用）；≥768px 還原回 topbar 原位，
   本容器由 JS 設 [hidden]。位於章節清單之後（章節為主、設定為輔的抽屜 IA）。不在 media-query
   內：容器本身全斷點都合法存在，只是 populate 與顯示時機完全由 JS 的 [hidden] 控制。 */
.sidebar__tools {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.sidebar__tools[hidden] {
  display: none;
}
.sidebar__tools-title {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
/* 抽屜內 font-control：三鈕等寬滿列、恢復 44px 觸控寬（覆寫 <768 cram 的 min-width:0；
   特異度 0,2,0 > 0,1,0 必勝，見下方媒體查詢區塊）。 */
.sidebar__tools .font-control {
  display: flex;
  gap: var(--space-1);
}
.sidebar__tools .font-control__btn {
  flex: 1;
  min-width: 2.75rem;
  padding: 0 var(--space-3);
}
/* 抽屜內 lang-switch：靠左；popover 改「向上」展開（工具區在抽屜底部，向下展開會被
   .sidebar 的 overflow-y:auto 裁切／溢出視窗底）。右對齊沿用 .lang-switch__pop 基底規則，
   min-width 11rem(176px) < 抽屜可用寬（--sidebar-w 272px 扣除左右 padding）不溢出。 */
.sidebar__tools .lang-switch {
  align-self: flex-start;
}
.sidebar__tools .lang-switch__pop {
  top: auto;
  bottom: calc(100% + var(--space-2));
  transform: translateY(4px);
}
.sidebar__tools .lang-switch__pop.is-open {
  transform: translateY(0);
}

/* Sidebar 遮罩（手機抽屜開啟時） */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  top: var(--topbar-offset);
  background: hsl(var(--overlay) / 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
  z-index: 34;
}
.sidebar-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* 內容區 */
.content {
  padding: var(--space-8) var(--container-gutter) var(--space-16);
}
.content__inner {
  margin: 0 auto;
  min-width: 0;
}
.content__inner--readable {
  width: min(100%, var(--content-readable-max));
}
.content__prose {
  width: min(100%, var(--content-readable-max));
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
}
.content__wide-slot {
  width: 100%;
  min-width: 0;
}

/* --- 內容排版 ------------------------------------------------------------- */
.page-head {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid hsl(var(--border));
}
/* 新手入口：緊接文章頁首，將原本 page-head 後的 32px 留白拆成「頁首→入口 16px」與
   「入口→正文 32px」。整張卡只有一個原生連結，文字保持一般 inline flow 以利換行。 */
.page-head + .newbie-gate {
  margin-top: calc(-1 * var(--space-4));
  margin-bottom: var(--space-8);
}
a.newbie-gate__link {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: var(--control-hit-min);
  padding: var(--space-3) var(--space-4);
  color: hsl(var(--foreground));
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}
.newbie-gate__copy {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}
.newbie-gate__title,
.newbie-gate__desc {
  min-width: 0;
  overflow-wrap: anywhere;
}
.newbie-gate__title {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5;
}
.newbie-gate__desc {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}
.newbie-gate__icon,
.newbie-gate__arrow {
  color: hsl(var(--muted-foreground));
  line-height: 1;
}
.newbie-gate__icon {
  font-size: 1rem;
}
.newbie-gate__arrow {
  font-size: 1.125rem;
}
.newbie-gate__link:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}
.page-head__eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}
h1 {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: -0.02em;
  font-weight: 750;
  scroll-margin-top: calc(var(--topbar-offset) + var(--space-4));
}
/* CJK 斷詞控制：中文雙字詞在窄版／放大字級時，瀏覽器預設逐字斷行會把詞攔腰斬斷
   （如「苦工」斷成「苦」／「工」）。quality + visual-refute 雙重視覺複驗抓到 3 個
   職業頁標題踩雷，搭配內文 <wbr> 在語意斷點提供換行點。只套用在有加這個 class 的
   h1，不影響全站其他 h1（多數標題字數短，尚未踩到此問題）。
   見 experts/academic-research.html、data-analysis.html、localization.html。 */
.page-head__title {
  word-break: keep-all;
}
/* 長版號、設定鍵與斜線串在 320px + A+ 時仍須留在可讀欄內。
   anywhere 只在一般換行機會不足、即將溢出時介入；不改變正常寬度的斷行。 */
.content :is(h1, h2, h3, h4, .page-head__lead, .lead) {
  min-width: 0;
  overflow-wrap: anywhere;
}
h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
  letter-spacing: -0.01em;
  font-weight: 700;
  /* 手機閱讀節奏：章節上 64px；≥768px 回復 80px。 */
  margin-top: var(--space-16);
  margin-bottom: var(--space-4);
  scroll-margin-top: calc(var(--topbar-offset) + var(--space-4));
}
h3 {
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  font-weight: 700;
  /* 手機閱讀節奏：小節上 32px；≥768px 回復 48px。 */
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  scroll-margin-top: calc(var(--topbar-offset) + var(--space-4));
}
.content p {
  margin-bottom: var(--space-4);
}
.content ul,
.content ol {
  margin: 0 0 var(--space-4) var(--space-6);
}
.content li {
  margin-bottom: var(--space-2);
}
.lead {
  font-size: var(--text-lg);
  color: hsl(var(--muted-foreground));
}
strong {
  font-weight: 700;
  color: hsl(var(--foreground));
}

/* inline code */
/* 375px 全站溢出 bug 根因（2026-07-21 確診）：本規則的 white-space 曾是 nowrap，導致單一
   行內 code 只要內容過長（如一條完整路徑），窄螢幕下會被裁到螢幕外、並把 document 撐出
   橫向捲動。修法：Option A，翻轉全站預設——直接讓所有行內 code 預設可換行/斷字，取代舊做法
   （每次遇到長 code 就得手動在個別元素補 opt-in class）。下面原本 [data-unit="codex"]、
   [data-unit="experts"]、#rules ~ .term-grid、body:has(#rules) .callout__body 四條
   一次性覆寫規則，因為宣告值與此處新預設完全相同而一併移除（同值規則疊加只增加維護負擔，
   不影響任何實際渲染結果）。逃生艙同步反轉成 opt-out，見下方 .code-nowrap。 */
:not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: hsl(var(--code-inline-bg));
  color: hsl(var(--code-inline-fg));
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  border: 1px solid hsl(var(--border));
  white-space: normal;
  overflow-wrap: anywhere;
}
/* 一般內文中的有 class 長連結也允許斷行；導覽、卡片與按鈕型連結保留元件自身幾何。 */
.content
  :where(p, li, td)
  a:not(.pager__link):not(.anchor-nav__link):not(.section-toplink):not(
    .btn
  ):not(.crosslink__link):not(.toc__item) {
  overflow-wrap: anywhere;
}

/* 行內 code 逃生艙（opt-out）：全站預設已改成可換行（white-space:normal +
   overflow-wrap:anywhere，見上方 :not(pre) > code）。極少數場合會需要讓特定 token
   堅持不換行——例如短版本號、短指令這類斷開會很怪的字串——掛這個 class 個別鎖回 nowrap。
   目前站內尚無實際套用案例，先定義備用。pre code 另有 white-space:pre 不受影響，不需要
   這個 class。（原本 opt-in 的 .code-wrap 已隨全域預設翻轉變成純重複、移除；claude/
   appendix-a.html 原殘留的 1 處 class="code-wrap" 孤兒引用已清理，全站 HTML 現無
   任何 code-wrap 殘留，見 2026-07-21 裸網址溢出修復同批次收尾。） */
.code-nowrap {
  white-space: nowrap;
}

/* --- blockquote（一般引言；callout 另有 .callout）— 全站共用 ---------------- */
.content blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-2) var(--space-4);
  border-left: 4px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  font-style: italic;
}
.content blockquote > :last-child {
  margin-bottom: 0;
}

/* --- 卡片 ----------------------------------------------------------------- */
.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  /* 卡片內 padding 32px（寬鬆） */
  padding: var(--space-8);
  margin-bottom: var(--space-6);
}
.card h3:first-child,
.card h2:first-child {
  margin-top: 0;
}

/* 定義列表（名詞解釋用） */
.term-grid {
  display: grid;
  gap: var(--space-3);
}
.term {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  /* grid item 預設 min-width:auto 會被內容 min-content 撐寬，跟 .callout__body（970 行）
     同一種修法：min-width:0 讓格子能正常縮回容器寬度。這是版面層（grid item 自動最小寬度）
     的防禦，與行內 code 是否換行（見上方 :not(pre) > code 全域預設）彼此獨立、互不取代——
     即使 code 內容本身可換行，巢狀多層 box 仍可能需要這道 min-width:0 才能完全縮回。 */
  min-width: 0;
}
.term__name {
  font-weight: 700;
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.term__name code {
  font-size: 0.85em;
}
.term__desc {
  color: hsl(var(--foreground));
  margin: 0;
}
.term__metaphor {
  margin-top: var(--space-2);
  margin-bottom: 0;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}

/* --- OS 分頁元件 (Tabs) --------------------------------------------------- */
.os-tabs {
  margin: var(--space-6) 0;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: hsl(var(--card));
  box-shadow: var(--shadow-sm);
}
.os-tabs__list {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: hsl(var(--muted));
  border-bottom: 1px solid hsl(var(--border));
}
.os-tabs__tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* 觸控高度足夠：含 2px underline 預留，min-height 44px */
  min-height: max(2.75rem, var(--control-hit-min));
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  background: transparent;
  border: none;
  /* 底部 2px 預留給 active underline，未選時透明 */
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  /* 全斷點底線（D1）：寧可截斷也不折行——折行會撐高整條列、破壞三格文字基線
     對齊，是比截斷更差的失敗態。nowrap 會被子層 .os-tabs__tab-label 繼承，
     所以即使某個 tab 的 span 還沒落地，至少也不會折行。
     注意：ellipsis 不寫在這裡——text-overflow 只作用於 block container，
     本元素是 flex container，寫在此處恆為 inert。實際生效的那一條在
     .os-tabs__tab-label（見下一組規則）。 */
  white-space: nowrap;
  transition: background var(--transition-tab), color var(--transition-tab),
    border-color var(--transition-tab), box-shadow var(--transition-tab);
}
/* D1 補救（全斷點）：text-overflow 只作用於 block container，而 .os-tabs__tab
   是 flex container、內部原為裸文字節點（被包成 anonymous flex item），
   ellipsis 無處著力；加上 justify-content:center，窄斷點實際呈現的是
   「兩側同時硬切」而非右緣「…」。本層是純結構容器：零色彩、零間距、零字級、
   零狀態，只負責提供一個可被 ellipsis 作用的 block container。 */
.os-tabs__tab-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.os-tabs__tab:hover {
  color: hsl(var(--foreground));
}
/* active tab：neutral chip + 極微陰影 + 底部 2px 單元 accent underline */
.os-tabs__tab[aria-selected="true"] {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: var(--shadow-sm);
  border-bottom-color: hsl(var(--accent));
}
.os-tabs__panel {
  padding: var(--space-4);
}
.os-tabs__panel[hidden] {
  display: none;
}
.os-tabs__panel > :last-child {
  margin-bottom: 0;
}

/* --- 程式碼區塊 ----------------------------------------------------------- */
.code-block {
  position: relative;
  margin: var(--space-4) 0;
}
.code-block pre {
  background: hsl(var(--code-bg));
  color: hsl(var(--code-fg));
  border: 1px solid hsl(var(--code-fg) / 0.14);
  border-radius: var(--radius);
  padding: var(--space-4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.7;
}
/* 有複製鈕的區塊才讓出頂部工具列帶（:has() 精準綁定，避免未來完全無按鈕的
   區塊也留一條無意義空白帶）。取代舊的 padding-right hack ——該 hack 只在
   完全無換行的單行內容才有效，一旦程式碼換行或水平捲動，按鈕仍會蓋住換行後
   的文字，故改為讓出頂部空間的做法。 */
.code-block:has(.code-block__copy) pre {
  padding-top: var(--code-toolbar-h);
}
.code-block pre code {
  font-family: inherit;
  white-space: pre;
}
.code-block__copy {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  /* 觸控目標：至少 44×44px（DESIGN.md §7.5） */
  min-width: max(2.75rem, var(--control-hit-min));
  min-height: max(2.75rem, var(--control-hit-min));
  padding: 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: hsl(var(--code-fg));
  /* code-fg 疊低 alpha 當按鈕面 */
  background: hsl(var(--code-fg) / 0.12);
  border: 1px solid hsl(var(--code-fg) / 0.2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-copy),
    border-color var(--transition-copy), color var(--transition-copy);
}
.code-block__copy:hover {
  background: hsl(var(--code-fg) / 0.22);
}
/* 成功態：轉綠（表「成功」最直覺），維持 1.5s（JS 控時） */
.code-block__copy.is-copied {
  color: hsl(var(--copy-success));
  background: hsl(var(--copy-success) / 0.18);
  border-color: hsl(var(--copy-success) / 0.45);
}
.code-block__copy.is-copy-error {
  color: hsl(var(--primary-foreground));
  background: hsl(var(--warn-fg));
  border-color: hsl(var(--warn-border));
}
/* 程式碼內的提示符與註解（手動標色，不依賴高亮庫） */
.code-block .cmt {
  color: hsl(var(--code-comment));
}
.code-block .prompt {
  color: hsl(var(--code-prompt));
  user-select: none;
}
/* 自然語言提示詞範例（非 bash/code）：覆寫預設 white-space:pre（該值為 bash 而設、禁換行），
   讓長句在卡寬內折行、不橫捲。從 .prompt-card 既有做法抽成可重用 modifier（原本只綁在
   Prompt Library 頁的 .prompt-card 內），供 prose 內文單獨出現的提示詞範例套用。 */
.code-block--wrap pre code {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* --- Callout 提示框 ------------------------------------------------------- */
.callout {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  margin: var(--space-6) 0;
  border-radius: var(--radius);
  border: 1px solid;
  border-left-width: 3px;
}
.callout__icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1.4;
}
.callout__body {
  min-width: 0;
  overflow-wrap: anywhere;
}
.callout__title {
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.callout__body > :last-child {
  margin-bottom: 0;
}
.callout--tip {
  background: hsl(var(--tip-bg));
  border-color: hsl(var(--tip-border));
  border-left-color: hsl(var(--accent));
}
.callout--tip .callout__title {
  color: hsl(var(--tip-fg));
}
/* warn 權重高於 tip/info：3px 紅色邊條 + 微浮起 + 標題放大（安全警示優先級，DESIGN.md §7.6） */
.callout--warn {
  background: hsl(var(--warn-bg));
  border-color: hsl(var(--warn-border));
  border-left-width: 3px;
  box-shadow: var(--shadow-sm);
  /* border-color 繼承 --warn-border（四邊同色，對自身底 1.48:1、對白底 1.63:1，
     未達成上方注解所述「3px 紅色邊條」的原意圖，且不足以承擔「狀態圖形元素」的
     3:1 非文字對比門檻）。左邊條改用 --warn-fg——下方 .callout__title 本來就
     用它當標題色，語意上屬於 warn 且已在作用域內，對自身底 8.96:1／對白底
     9.87:1，同構 .callout--info 的修法（B12 同型缺陷，這是第二處）。 */
  border-left-color: hsl(var(--warn-fg));
}
.callout--warn .callout__title {
  color: hsl(var(--warn-fg));
  font-size: var(--text-lg); /* 20.4px：比 tip/info 標題大一階，強化警示 */
}
.callout--info {
  background: hsl(var(--info-bg));
  border-color: hsl(var(--info-border));
  /* border-color 繼承 --info-border（1.27:1 對白底，四邊同色的細分隔線色，
     不足以承擔「狀態圖形元素」的 3:1 非文字對比門檻）。左邊條改用 --info-fg——
     本規則下方 .callout__title 本來就用它當標題色，語意上屬於 info 且已在作用域內，
     對白底 7.74:1，仿 .callout--tip 用其語意深色 token（--accent）當左邊條的模式。 */
  border-left-color: hsl(var(--info-fg));
}
.callout--info .callout__title {
  color: hsl(var(--info-fg));
}

/* --- 料源分級徽章 source-tag（DESIGN.md §7.x；非互動、純標示）-----------------
   標示內容來源可信度的四級徽章：官方 / 達人具名 / 社群 / 實驗性。
   零新增色彩 token，四 modifier 各引用既有語義色家族（tip/info/muted/warn）。
   邊框色 = 字色 /0.25 alpha（單一描邊配方，跟著字色走、跨亮暗模式自動連動）。 */
.source-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  max-width: 100%;
  font-size: var(--text-xs);
  font-weight: 450;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* icon：emoji 用，1em 隨字級縮放；HTML 端配 aria-hidden（純裝飾、不入無障礙樹） */
.source-tag__icon {
  font-size: 1em;
}
/* 官方 ✅：tip 家族（neutral） */
.source-tag--official {
  background: hsl(var(--tip-bg));
  color: hsl(var(--tip-fg));
  border-color: hsl(var(--tip-fg) / 0.25);
}
/* 達人具名 ◆：info 家族（neutral gray） */
.source-tag--practice {
  background: hsl(var(--info-bg));
  color: hsl(var(--info-fg));
  border-color: hsl(var(--info-fg) / 0.25);
}
/* 社群 ○：muted 家族（最低識別度，淡底淡字）
   字色由 --muted-foreground 改為 --info-fg（2026-07-24 對抗式驗證：113,113,122 on
   244,244,245 實測僅 4.4:1，低於 WCAG AA 4.5:1）。--info-fg 為同一徽章元件既有 token
   （.source-tag--practice 已在用，實測 7.03:1），零新增色彩 token，維持本區塊「四 modifier
   只引用既有語義色家族」的既定原則。 */
.source-tag--community {
  background: hsl(var(--muted));
  color: hsl(var(--info-fg));
  border-color: hsl(var(--info-fg) / 0.25);
}
/* 實驗性 ⚠：warn 家族（紅，警示語氣） */
.source-tag--experimental {
  background: hsl(var(--warn-bg));
  color: hsl(var(--warn-fg));
  border-color: hsl(var(--warn-fg) / 0.25);
}

/* --- 表格（DESIGN.md §7.11；wrapper-div 模式，column model 與單線格線皆正確） --
   裸 <table> 散落各章比較表 / 速查表，原零樣式吃瀏覽器醜預設 + 手機撐破。
   每張 table 由 HTML 端外包 .table-wrap 承載橫向捲動；table 維持 display:table。 */

/* wrapper：唯一吃 overflow 的 block 容器；外框/圓角/陰影/外距/底色全掛這層。
   x 軸捲動（內容超寬）、y 軸裁切（配合 border-radius 裁 thead 直角、不出縱向捲軸）。 */
.table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  margin: var(--space-6) 0;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: hsl(var(--card));
  /* 持久化捲軸（D2 方向一）：macOS 預設 overlay 捲軸平常不顯示，寬表在窄螢幕
     被裁掉一半卻看不出可以橫向滑動。標準屬性供 Firefox；WebKit/Blink 用下方
     ::-webkit-scrollbar 三兄弟強制常駐、不再是 overlay。overflow-x 為 auto，
     內容放得下時不產生捲軸盒，桌機寬螢幕零副作用。 */
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground)) hsl(var(--muted));
}
.table-wrap::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 8px;
}
.table-wrap::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}
.table-wrap::-webkit-scrollbar-thumb {
  /* 規格原給 --border 或 --muted-foreground/0.5 兩選一；--border（240 5.9% 90%）
     on --muted 軌道（240 4.8% 95.9%）僅約 1.15:1——與 A1 指出不合規的那組數值
     同量級，拉桿幾乎隱形會悖離「讓捲動可見」的目的，故選可視度較高的
     --muted-foreground。 */
  background: hsl(var(--muted-foreground) / 0.5);
}

/* table 維持 table 顯示模型：欄寬共享、列對齊、border-collapse 生效 */
.content table {
  display: table; /* 明確宣告，保住 column model（不可用 display:block） */
  width: 100%;
  min-width: var(--table-min);
  border-collapse: collapse; /* table-display 元素上生效，格線單線 */
  font-size: var(--text-sm);
  line-height: 1.7;
  background: transparent; /* 底色由 wrapper 提供 */
}
.content table thead {
  background: hsl(var(--muted));
}
.content table th {
  text-align: left;
  font-weight: 700; /* 表頭粗體（DESIGN.md §3「標題 700」，不放 500/600） */
  color: hsl(var(--foreground));
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid hsl(var(--border));
  white-space: nowrap; /* 表頭短、不折行，維持掃讀對齊 */
  vertical-align: top;
}
.content table td {
  color: hsl(var(--foreground));
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid hsl(var(--border));
  vertical-align: top;
}
/* 最後一列移除底線（外框已收邊，避免雙線） */
.content table tbody tr:last-child td {
  border-bottom: 0;
}
/* 斑馬紋：偶數資料列極淡底，降低長表串行誤讀（--muted 疊 0.4、比表頭淡） */
.content table tbody tr:nth-child(even) td {
  background: hsl(var(--muted) / 0.4);
}
/* 儲存格內 inline code 與第一欄（指令 / 按鍵欄）不折行，維持靠左掃讀軸 */
.content table code,
.content table td:first-child {
  white-space: nowrap;
}

/* .allow-wrap：table 變體，讓首欄與 inline code 改回可換行（實測 2026-07-18 QA，
   copilot/appendix-b.html B.1「記憶與設定」「安全與權限」兩張子表新增「這個設計解決的痛點」
   欄後觸發）。上面全站預設 nowrap 是刻意設計（指令／按鍵欄靠左掃讀軸，DESIGN.md §7.11），
   但這兩張表的名詞欄／白話解釋欄內含長路徑 code（如 $HOME/.copilot/copilot-instructions.md、
   ~/.copilot/permissions-config.json），nowrap 撐寬把整表推到 897px／793px，超出 1280px
   桌機側欄後可用寬度 734px，造成文字被裁切、需橫向捲動才看得到。改用 overflow-wrap:anywhere
   （而非 break-word）是因為表格 auto layout 的欄寬計算只有 anywhere 會納入 min-content 考量，
   真正讓瀏覽器縮欄，break-word 對 table 欄寬無效。只加在這兩張表（.allow-wrap class 個別掛在
   <table>），不改全站其餘表格與本頁另外兩張未超寬的表（核心身分／工具計費）。
   首欄另加 min-width:10rem——純 anywhere 沒有下限時，欄寬被 auto layout 壓到 ~108px，
   造成「permissions-config.json」這類字串斷成 permissio/ns-/config.jso/n 四截、可讀性差；
   10rem 讓它優先斷在連字號／句點等自然斷點（permissions-/config.json 兩截）。Playwright
   實測 1280px 下 96px～260px 這個範圍 overflow 皆為 0（實測到 500px 才會反推出 92px 溢出），
   10rem(=160px) 落在安全區間內，換行品質最佳。

   2026-07-24 擴充：claude/chapter8.html「settings.json 壞掉症狀」表首欄改用
   <th scope="row">（列標頭語意，螢幕閱讀器需要，不能改回 td），原選擇器只認
   td:first-child 對不到 th，導致該表次欄仍被撐出可視範圍。比照同一套邏輯將
   th[scope="row"] 併入兩條規則，不改動任何 HTML 語意標記。 */
.content table.allow-wrap td:first-child,
.content table.allow-wrap th[scope="row"],
.content table.allow-wrap code {
  white-space: normal;
  overflow-wrap: anywhere;
}
.content table.allow-wrap td:first-child,
.content table.allow-wrap th[scope="row"] {
  min-width: 10rem;
}

/* web-craft.html §9 來源表：第二欄只有四種既有短料源標籤。allow-wrap 仍讓來源與
   用途欄處理長 URL／連續字串，但不能把短徽章壓成逐字直排。width:1% 讓類型欄
   依最長既有徽章的 intrinsic width 緊湊收欄；nowrap 只限本表，不改正文與翻譯頁
   的全站 source-tag 內容韌性。橫向 overflow 仍只由既有 .table-wrap 承接。 */
.content table.source-table th:nth-child(2),
.content table.source-table td:nth-child(2) {
  width: 1%;
  white-space: nowrap;
}
.content table.source-table th:nth-child(3),
.content table.source-table td:nth-child(3) {
  width: 45%;
  overflow-wrap: anywhere;
}
.content table.source-table td:nth-child(2) .source-tag {
  max-width: none;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* --- Step List 動手步驟元件（DESIGN.md §7.9） ----------------------------
   三層語意中的 L1「必做動手步驟」。語義用 ol/li；非互動容器（不加 hover/focus）。
   左側 --accent 細導引線貫穿，步驟號圓徽以 z-index 疊在線上。 */
/* 用 .content 前綴提升特異度，蓋過 .content ol / .content li 的預設縮排與間距
   （.content ol 特異度 0,1,1 > .step-list 0,1,0，故需 .content .step-list） */
.content .step-list {
  list-style: none;
  position: relative;
  margin: var(--space-6) 0;
  padding: 0;
  /* 為左側導引線與圓徽讓出空間：圓徽直徑 + 與卡片的間距 */
  padding-left: calc(var(--step-marker-size) + var(--space-4));
  min-width: 0;
}
/* 導引線：貫穿第一顆圓徽中心到最後一顆圓徽中心（不拖尾） */
.step-list::before {
  content: "";
  position: absolute;
  left: calc(var(--step-marker-size) / 2 - var(--step-rail-w) / 2);
  /* 上下各內縮半個圓徽，使線只連接圓心、收尾不拖出最後一顆 */
  top: calc(var(--step-marker-size) / 2);
  bottom: calc(var(--step-marker-size) / 2);
  width: var(--step-rail-w);
  background: hsl(var(--accent));
  border-radius: 999px;
}
/* 單一步驟之間的縱向間距（.content li 特異度 0,1,1，故 .step 也 .content 前綴） */
.content .step {
  position: relative;
  min-width: 0;
  margin-bottom: 0;
}
.content .step + .step {
  margin-top: var(--space-6);
}
/* 步驟號圓徽：--primary 底 + 白字（3.34:1 過 AA 大字 3:1，字 ≥18.66px bold）
   絕對定位回到 padding-left 讓出的軌道，疊在導引線上 */
.step__marker {
  position: absolute;
  left: calc(-1 * (var(--step-marker-size) + var(--space-4)));
  top: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--step-marker-size);
  height: var(--step-marker-size);
  border-radius: 999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  /* 19px bold：清 WCAG 大字粗體門檻 18.66px，3:1 達標 */
  font-size: 1.1875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  font-family: var(--font-sans);
}
/* 步驟內容卡：底 --card、1px 邊、圓角、非互動 → 無 hover/focus
   內距 mobile-first：base（<768px）--space-6，≥768px 升 --space-8（見媒體查詢） */
.step__body {
  min-width: 0;
  overflow-wrap: anywhere;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.step__body > :last-child {
  margin-bottom: 0;
}
/* 動手做標籤：✋ icon + 文字雙重編碼，膠囊；色 = callout-tip 別名 */
.step__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  padding: 0.1rem var(--space-2);
  font-size: var(--text-xs); /* 13px */
  font-weight: 700;
  border-radius: var(--radius-sm);
  background: hsl(var(--step-label-bg));
  color: hsl(var(--step-label-fg));
  border: 1px solid hsl(var(--step-label-border));
}
/* .step__title / .step__desc 為 <p>，需 .content 前綴蓋過 .content p (0,1,1) 的 margin */
.content .step__title {
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: var(--space-2);
}
.content .step__title:first-child {
  margin-top: 0;
}
/* 說明文字：維持內文 18.5px 不縮（長者好讀），margin 沿用段落 --space-4 */
.content .step__desc {
  margin-bottom: var(--space-4);
}
.content .step__desc:last-child {
  margin-bottom: 0;
}
/* 內嵌 code-block / os-tabs 與說明的間距：說明→code 用 --space-4
   （code-block 自身 margin var(--space-4) 0；os-tabs 自身 var(--space-6) 0，
    在卡片內收斂為一致節奏） */
.step__body .code-block {
  margin: var(--space-4) 0;
}
.step__body .os-tabs {
  margin: var(--space-4) 0;
}
/* 預期會看到區：淺灰底（--muted，與 code-block 深色底區分「輸入 vs 輸出」）
   標籤「✅ 預期會看到」用 --muted-foreground（on --muted 實測 4.94:1 過 AA） */
.step__expect {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: hsl(var(--step-expect-bg));
  border-radius: var(--radius);
}
.step__expect > :last-child {
  margin-bottom: 0;
}
.step__expect-label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  color: hsl(var(--muted-foreground));
}

/* L2「建議執行指令」的低調 hint 標籤（無底色，緊貼其下 code-block）
   三層語意 L2：建議但非必做的指令，視覺克制於 L1 Step List。
   <p> 元素，需 .content 前綴蓋過 .content p (0,1,1) 的 margin-bottom。 */
.content .code-hint {
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}
/* hint 緊接 code-block：壓掉 code-block 預設上 margin，使兩者貼合 */
.content .code-hint + .code-block {
  margin-top: var(--space-1);
}

/* --- 頁內速查跳轉導覽 .anchor-nav（附錄 A 速查表三表互跳） ----------------
   內容 spec 委派 frontend 實作視覺：膠囊連結，全用既有 token，互動色走 --link，
   品牌 accent 增量 = 0。Mobile-first：base 可換行，寬則並排。 */
.content .anchor-nav {
  margin: 0 0 var(--space-8);
}
.content .anchor-nav ul {
  /* 蓋掉 .content ul 的預設縮排與下 margin（特異度 0,1,1） */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.content .anchor-nav li {
  margin: 0;
}
/* 兩排錨點各自的小標籤（附錄 B「依分類找」「依英文字首找」）。
   中性小字 label，accent 增量 = 0；第二排 title 與前一排 ul 拉開間距。 */
.content .anchor-nav__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 450;
  color: hsl(var(--muted-foreground));
}
.content .anchor-nav ul + .anchor-nav__title {
  margin-top: var(--space-4);
}
.anchor-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* 觸控目標 ≥44px */
  padding: var(--space-2) var(--space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--muted));
  color: hsl(var(--link));
  font-size: var(--text-sm);
  font-weight: 450;
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition),
    background-color var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .anchor-nav__link:hover {
    border-color: hsl(var(--ring));
    color: hsl(var(--link-hover));
    text-decoration: none;
  }
}
.anchor-nav__link:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* 各速查表標題列的「↑ 回頁內導覽」回跳連結：固定在標題下一行。 */
.content .section-toplink {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: max(2.75rem, var(--control-hit-min));
  margin-left: 0;
  font-size: var(--text-sm);
  font-weight: 450;
  color: hsl(var(--link));
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
}
.content .section-toplink:hover {
  color: hsl(var(--link-hover));
  text-decoration: underline;
}
.content .section-toplink:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- 漸進式揭露註釋（DESIGN.md §7.10） ------------------------------------
   分層機制：短名詞行內 popover（.gloss）／長原理就地 disclosure（.detail-note）。
   兩者皆「點擊非 hover」、雙重編碼（不靠純色傳達）、全程不用 --accent（省預算）。 */

/* === 短名詞 .gloss：行內觸發詞（點 → 貼附小浮層，看一眼即關） === */
/* 觸發詞為 <button>：去除原生鈕外觀，字色維持 --foreground 不搶權重，
   虛線底 + 字尾上標 › 做雙重編碼（色弱者也分得出可點）。
   padding + 負 margin 撐 ≥44px 命中區而不影響行高。 */
.gloss {
  display: inline-block;
  min-width: var(--control-hit-min);
  min-height: var(--control-hit-min);
  max-width: 100%;
  padding: var(--gloss-hit-pad) 2px;
  margin: calc(-1 * var(--gloss-hit-pad)) -2px;
  overflow-wrap: anywhere;
  text-align: inherit;
  vertical-align: middle;
  font: inherit;
  color: hsl(var(--foreground));
  background: transparent;
  border: 0;
  /* 雙重編碼之一：虛線底（中性 --muted-foreground，非 accent） */
  text-decoration: underline dotted hsl(var(--gloss-underline));
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 雙重編碼之二：字尾小上標 ›（--text-xs、--muted-foreground），與虛線並用 */
.gloss::after {
  content: "›";
  margin-left: 1px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: hsl(var(--muted-foreground));
  vertical-align: super;
  line-height: 0;
}
.gloss:hover {
  text-decoration-color: hsl(var(--foreground));
}
.gloss[aria-expanded="true"] {
  text-decoration-color: hsl(var(--foreground));
}

/* 浮層：render 到 body 層、position fixed（不被 step / os-tabs 的 overflow 裁切）。
   預設隱藏，JS 量測觸發詞位置後設 top/left + 加 .is-open。 */
.gloss-pop {
  position: fixed;
  z-index: 60;
  width: max-content;
  max-width: var(--gloss-pop-max-w);
  padding: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: hsl(var(--gloss-pop-fg));
  background: hsl(var(--gloss-pop-bg));
  border: 1px solid hsl(var(--gloss-pop-border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  /* 隱藏由 JS 的 [hidden] 屬性（display:none）主導；此處只控淡入過場。
     不用 visibility:hidden（會讓元素在過場期不可 focus，擋住「焦點移入關閉鈕」）。 */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--transition), transform var(--transition);
}
.gloss-pop.is-open {
  opacity: 1;
  transform: translateY(0);
}
.gloss-pop > :last-child {
  margin-bottom: 0;
}
/* 小三角箭頭：指向觸發詞。JS 依浮層在觸發詞上/下方，切 .gloss-pop--below 翻轉。
   箭頭水平位置由 JS 寫 --gloss-arrow-x（對齊觸發詞中心）。 */
.gloss-pop::after {
  content: "";
  position: absolute;
  left: var(--gloss-arrow-x, 50%);
  width: 10px;
  height: 10px;
  background: hsl(var(--gloss-pop-bg));
  border: 1px solid hsl(var(--gloss-pop-border));
  transform: translateX(-50%) rotate(45deg);
}
/* 預設浮層在觸發詞上方 → 箭頭在浮層底、只露下半邊框 */
.gloss-pop::after {
  bottom: -6px;
  border-top: 0;
  border-left: 0;
}
/* 浮層在觸發詞下方 → 箭頭翻到頂、只露上半邊框 */
.gloss-pop--below::after {
  top: -6px;
  bottom: auto;
  border-top: 1px solid hsl(var(--gloss-pop-border));
  border-left: 1px solid hsl(var(--gloss-pop-border));
  border-right: 0;
  border-bottom: 0;
}
/* 關閉鈕：右上 44×44 命中區（✕），不擠壓內文 → 用負 margin 收回視覺占位 */
.gloss-pop__close {
  float: right;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(2.75rem, var(--control-hit-min));
  height: max(2.75rem, var(--control-hit-min));
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0 var(--space-2);
  font-size: var(--text-lg);
  line-height: 1;
  color: hsl(var(--muted-foreground));
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.gloss-pop__close:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--muted));
}

/* === 長原理 .detail-note：就地 disclosure（原生 details/summary） === */
.detail-note {
  margin: var(--space-4) 0;
}
/* summary：整列 ≥44px、底透明、左起 ▸ 三角（展開轉 ▾）。
   list-style:none + ::-webkit-details-marker 移除原生三角，自畫 ▸/▾。 */
.detail-note__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  font-weight: 450;
  line-height: 1.5;
  color: hsl(var(--detail-note-fg));
  background: transparent;
  cursor: pointer;
  list-style: none;
  transition: color var(--transition);
}
.detail-note__summary::-webkit-details-marker {
  display: none;
}
/* 自畫三角：收合 ▸，展開（[open]）轉 ▾。三角色 hover 時轉 --link（非品牌 accent）。 */
.detail-note__summary::before {
  content: "▸";
  flex-shrink: 0;
  font-size: 0.85em;
  color: currentColor;
  transition: color var(--transition);
}
.detail-note[open] > .detail-note__summary::before {
  content: "▾";
}
.detail-note__summary:hover {
  color: hsl(var(--foreground));
}
.detail-note__summary:hover::before {
  color: hsl(var(--detail-note-accent));
}
.detail-note__summary:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* summary 文字含行內 code 時的包裹層（例：進階：成績單檢視器（<code>Ctrl + O</code> 打開後）…）。
   .detail-note__summary 本身是 display:flex，若不包這層，裸文字節點與 <code> 元素在 flex
   容器下會各自被視為獨立 flex item：nowrap 時窄螢幕撐出橫向捲動；就算改 flex-wrap:wrap，
   也只是各自整個 item 換到下一行、彼此間還被 gap 撐開，讀起來仍斷成三截、順序錯亂。
   用這層 span 把三角記號（::before）以外的內容收成唯一的第二個 flex item，內部維持一般
   inline 文字流，換行才會是完整句子整體換行、不再各自斷裂。
   min-width:0 覆寫 flex item 預設 min-width:auto（等於內容 min-content 寬度），讓這個
   item 在窄螢幕下真的能縮到可用寬度換行，而不是被撐到內容最寬處才溢出。
   只有 summary 內含行內 code 的案例才需要包這層（見 claude/appendix-a.html 兩個新增
   details）；沒有行內 code 的 summary（純文字節點）不受影響，也不需要包。 */
.detail-note__summary-text {
  min-width: 0;
}

/* body：CSS grid 0fr→1fr 展開動畫（260ms）。
   外層 .detail-note__body 為 grid 容器，內層 .detail-note__body-inner overflow:hidden 承載真內容。
   原生 details 在 [open] 才 render 子節點 → 用 JS 接管「先 render 再動畫」（見 main.js）。 */
.detail-note__body {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: var(--space-2);
  transition: grid-template-rows 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.detail-note.is-expanded > .detail-note__body {
  grid-template-rows: 1fr;
}
.detail-note__body-inner {
  overflow: hidden;
  min-height: 0;
}
/* body 內容外觀：淺灰底（--muted）+ 左 3px 中性邊（--border，非品牌 accent）+ 內距。
   內層 padding 放在 -inner 的子 wrapper 避免動畫期 padding 撐高 0fr 狀態。 */
.detail-note__body-box {
  padding: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: hsl(var(--foreground));
  background: hsl(var(--detail-note-body-bg));
  border-left: 3px solid hsl(var(--detail-note-body-border));
  border-radius: var(--radius-sm);
}
.detail-note__body-box > :last-child {
  margin-bottom: 0;
}

/* --- index 首頁專用 ------------------------------------------------------- */
.hero {
  margin-bottom: var(--space-12);
}
.hero__title {
  margin-bottom: var(--space-4);
}
.hero__lead {
  font-size: var(--text-lg);
  color: hsl(var(--muted-foreground));
  margin-bottom: var(--space-6);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
    transform var(--transition);
}
.btn--primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 1px solid hsl(var(--primary));
}
.btn--primary:hover {
  background: hsl(var(--primary-hover));
  border-color: hsl(var(--primary-hover));
  color: hsl(var(--primary-foreground));
  text-decoration: none;
}
.btn--primary:active {
  transform: translateY(1px);
}

/* 章節大綱清單（首頁目錄） */
.toc {
  margin-top: var(--space-8);
}
.toc__group {
  margin-bottom: var(--space-8);
}
.toc__group-title {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  margin-top: 0;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid hsl(var(--border));
}
.toc--compact .toc__group-title {
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.toc--described .toc__group-title {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.content .toc__list {
  list-style: none;
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}
.content .toc__list > li {
  min-width: 0;
  margin: 0;
}
.toc__item {
  padding: var(--space-3) var(--space-4);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
  min-width: 0;
}
.toc--compact .toc__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-1);
}
.toc--described .toc__item {
  display: grid;
  grid-template-columns: var(--toc-num-w) minmax(0, 1fr);
  column-gap: var(--toc-row-gap);
  row-gap: var(--space-1);
  align-items: start;
}
.toc__item--disabled {
  opacity: 0.7;
}
.toc__item:focus-visible {
  border-radius: var(--radius);
}
.toc__item-num {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}
.toc--compact .toc__item-num {
  grid-row: 1;
  min-width: 0;
  font-weight: 650;
}
.toc--described .toc__item-num {
  grid-column: 1;
  grid-row: 1;
  align-self: baseline;
  min-width: 0;
  font-weight: 500;
}
.toc__item-title {
  color: hsl(var(--foreground));
  min-width: 0;
  overflow-wrap: anywhere;
}
.toc--compact .toc__item-title {
  grid-row: 2;
  font-weight: 400;
}
.toc--described .toc__item-title {
  grid-column: 2;
  grid-row: 1;
  align-self: baseline;
  font-weight: 600;
  line-height: 1.45;
}
.toc--described .toc__item-desc {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 400;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.toc--described .toc__item-badge {
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
  margin-top: var(--space-1);
}
.toc--compact .toc__item-badge {
  grid-column: 1;
  grid-row: 3;
}
.toc__item-badge {
  justify-self: start;
  font-size: var(--text-xs);
  padding: 0.1rem var(--space-2);
  border-radius: 999px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
}

/* 版本時效聲明（codex index 用；claude index 無此元件，無副作用） */
.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-bottom: var(--space-8);
  background: hsl(var(--info-bg));
  border: 1px solid hsl(var(--info-border));
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: hsl(var(--info-fg));
}
.notice > :last-child {
  margin-bottom: 0;
}

/* --- 上下章導覽 ----------------------------------------------------------- */
.pager {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid hsl(var(--border));
}
.pager__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-1);
  padding: var(--space-4);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.pager__link--next {
  text-align: right;
}
.pager__dir {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}
.pager__title {
  font-weight: 600;
  color: hsl(var(--foreground));
  overflow-wrap: anywhere;
}
.pager__placeholder {
  flex: 1;
  min-width: 0;
}

/* --- 視覺輔助 ------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* .visually-hidden 套在 <table> 上時的收合修正（實測發現，2026-07-15）：
   上面這條本身的 width/height/overflow/clip 已齊全，但套在 table 元素時仍會被兩個外部
   因素撐開到超過 1px，documentElement 因而在 375px 視口產生 369px 水平溢出（scrollWidth
   744 vs clientWidth 375，Playwright 實測）：
   (1) .content table 的 min-width: var(--table-min)（704px）specificity（0,1,1）高於
       .visually-hidden（0,1,0），逕自覆蓋掉 width:1px 的收合效果；
   (2) table 預設 table-layout:auto，用寬會被內容撐開；而 .visually-hidden 自身的
       white-space:nowrap（原意是防止單一隱藏文字節點換行）被 caption/th/td 子節點繼承，
       導致長字串（本頁 SR-only 表格的中文表格說明）無法換行、進一步撐大 min-content 寬。
   下面用 .content table.visually-hidden 提高 specificity（0,2,1）鎖回 1px，並把子節點
   white-space 收斂回 normal（僅還原本應由瀏覽器預設決定的換行行為，不影響其餘用途的
   .visually-hidden，因白站目前也只有本頁一處套用在 table 上）。修復後實測 scrollWidth
   降回 375（＝clientWidth，零溢出）。 */
.content table.visually-hidden {
  width: 1px;
  height: 1px;
  min-width: 0;
  table-layout: fixed;
}
.content table.visually-hidden caption,
.content table.visually-hidden th,
.content table.visually-hidden td {
  white-space: normal;
}

/* --- 載入時淡入（克制：僅內容區一次） ------------------------------------- */
.content__inner {
  animation: fade-in 320ms ease both;
}
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Hub net-new 元件 — 統一首頁 / 單元切換器 / 章末交叉連結
   （_integration-spec.md §2.4 / §4 / §6.1；Mobile-first，min-width 增量在斷點段）
   per-unit accent 實色僅以下三類元件允許寫死 HSL（§2.4 / §3.3 / §6.1）：
     home 無 data-unit 色來源 → unit-card 簽名色寫死；
     crosslink 寫在本單元頁、需顯示「對方單元」色 → 方向 modifier 寫死對方色。
   其餘一律 var(--token)。寫死色值只作單元簽名色，不回寫為全站 token。
   ========================================================================== */

/* --- 首頁 topbar 變體（topbar--home：無 sidebar / 無切換器 / 只留 brand + 回 hub） --- */
.topbar--home .topbar__brand {
  font-weight: 750;
}
/* 無側欄的 topbar--home 變體不顯示漢堡。 */
.topbar--home .menu-toggle {
  display: none;
}

/* 回 Hub 首頁鈕（章節頁 topbar 左側，緊接漢堡後；首頁本身不顯示） */
.topbar__home {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* 觸控目標 ≥44px */
  min-width: max(2.75rem, var(--control-hit-min));
  height: max(2.75rem, var(--control-hit-min));
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--card));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition),
    border-color var(--transition);
}
.topbar__home:hover {
  background: hsl(var(--sidebar-hover));
  color: hsl(var(--foreground));
  text-decoration: none;
}
.topbar__home svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

/* --- 單元切換器（topbar 右側；復用 font-control active-chip 語言） ------------
   當前單元 = neutral chip（--card 底 + shadow-sm + 底部 2px --accent 指示）；
   非當前 = outline 態。指示色隨 data-unit 自動變化。 */
.unit-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}
.unit-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 觸控目標 44×44px */
  min-width: max(2.75rem, var(--control-hit-min));
  height: max(2.75rem, var(--control-hit-min));
  padding: 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--card));
  border: 1px solid hsl(var(--input));
  /* active 段底部 2px accent 指示預留，非當前透明（防跳版） */
  border-bottom: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition),
    color var(--transition), box-shadow var(--transition);
}
.unit-switch__btn:hover {
  background: hsl(var(--sidebar-hover));
  color: hsl(var(--foreground));
  text-decoration: none;
}
/* 當前單元（aria-current="page"）：浮起 chip + neutral 文字 + 底部 2px --accent */
.unit-switch__btn[aria-current="page"] {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  border-color: hsl(var(--input));
  border-bottom-color: hsl(var(--accent));
  box-shadow: var(--shadow-sm);
}
.unit-switch__btn[aria-current="page"]:hover {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
}

/* --- 語言切換器（Globe dropdown，Globe dropdown；DESIGN.md §7.16） -------------------
   topbar 右側，unit-switch 後 / font-control 前。觸發鈕 = menu-toggle 風格 + expanded 底部 2px accent；
   popover 復用 gloss-pop 外觀 token（--popover / --border / --shadow-md / --radius）。零新增色票。 */
.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.lang-switch__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  /* 觸控目標 44×44px，全斷點恆單一 footprint */
  min-width: max(2.75rem, var(--control-hit-min));
  height: max(2.75rem, var(--control-hit-min));
  padding: 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: hsl(var(--foreground));
  background: hsl(var(--card));
  border: 1px solid hsl(var(--input));
  /* expanded 時底部 2px accent 指示預留，未開透明（防跳版） */
  border-bottom: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition),
    color var(--transition), box-shadow var(--transition);
}
.lang-switch__trigger:hover {
  background: hsl(var(--sidebar-hover));
}
.lang-switch__trigger[aria-expanded="true"] {
  background: hsl(var(--card));
  border-bottom-color: hsl(var(--accent));
  box-shadow: var(--shadow-sm);
}
.lang-switch__globe {
  font-size: 1.05em;
  line-height: 1;
}
.lang-switch__current {
  line-height: 1;
}
/* 切換器內任何藏文標籤（選單 བོད་ཡིག 項 + bo 頁觸發鈕縮寫 བོ）走獨立 subset family，
   系統無藏文字型時仍正確顯示疊字。 */
.lang-switch [lang="bo"] {
  font-family: "Tibetan Label", var(--font-sans);
}

/* popover：trigger 下緣展開、右對齊；ul/role=menu。淡入 + 微 translateY（reduced-motion 由全域壓制）。 */
.lang-switch__pop {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 60;
  min-width: 11rem;
  max-width: var(--gloss-pop-max-w);
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--transition), transform var(--transition);
}
.lang-switch__pop.is-open {
  opacity: 1;
  transform: translateY(0);
}
.lang-switch__pop li {
  margin: 0;
}
.lang-switch__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* 觸控列高 ≥44px */
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: hsl(var(--foreground));
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.lang-switch__item:hover {
  background: hsl(var(--sidebar-hover));
  color: hsl(var(--foreground));
  text-decoration: none;
}
/* 當前語言：✓ + neutral 文字 + 700，靠底線/勾選傳達狀態 */
.lang-switch__item[aria-current="page"] {
  color: hsl(var(--foreground));
  font-weight: 700;
}
.lang-switch__check {
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
  color: hsl(var(--foreground));
}

/* topbar 細分隔（unit-switch↔lang、lang↔font-control 間 1px --border，復用 token） */
.topbar__divider {
  flex-shrink: 0;
  width: 1px;
  height: 1.5rem;
  background: hsl(var(--border));
}

/* --- 統一首頁版面（.home / .home-hero / .home-section / .unit-card） ---------
   首頁無 sidebar → 無 margin-left；四套 CLI 入口固定 2×2 等重排列。 */
.home {
  /* base（<768px）：mobile-first padding（≥768 / ≥1024 在斷點段增量） */
  padding: var(--space-8) var(--container-gutter) var(--space-16);
}
.home-hero {
  width: min(100%, var(--content-readable-max));
  margin: 0 auto var(--space-12);
}
.home-hero h1 {
  margin-bottom: var(--space-4);
  overflow-wrap: break-word;
}
.home-hero__lead {
  font-size: var(--text-lg);
  color: hsl(var(--muted-foreground));
}
.home-hero__points {
  margin: var(--space-6) 0;
  padding-left: var(--space-6);
}
.home-hero__points li + li {
  margin-top: var(--space-2);
}
.home-section {
  width: min(100%, var(--content-wide-max));
  margin: 0 auto;
}
.home-section + .home-section {
  margin-top: var(--space-12);
}
.home-section__head {
  width: min(100%, var(--content-readable-max));
  margin: 0 auto var(--space-6);
}
.home-section__head h2 {
  margin: 0 0 var(--space-3);
}
.home-section__head p {
  margin: 0;
  color: hsl(var(--muted-foreground));
}
/* 首頁 grid canonical：base 直向堆疊；≥768 固定 2×2，避免第 4 張落單被誤讀為次要。 */
.home-grid {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

/* unit-card：首頁簽名元件。整卡可點 <a>，卡頂 4px 單元識別色條。
   display:flex + flex-direction:column 讓 CTA 能用 margin-top:auto 貼齊卡底，
   使同列卡片（.home-grid 預設 align-items:stretch 拉齊等高）的 CTA 對齊在同一條底線，
   不因描述文字行數不同（4 行 vs 5 行）而讓 CTA 停在不同高度。 */
.unit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* 卡頂讓出 4px 色條空間（色條用 ::before 疊在 padding 區頂部） */
  padding: var(--space-8);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
/* 卡頂 4px 識別色條（裝飾性實色、無文字 → 不受對比約束）。
   hover 時 4px→5px（高度增量不入 transition 以免色條閃動，僅厚度變化）。 */
.unit-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}
/* eyebrow：使用 neutral --muted-foreground，避免首頁繼承任一單元品牌色。 */
.unit-card__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
  margin-bottom: var(--space-2);
}
.unit-card__title {
  font-size: var(--text-h2);
  font-weight: 700;
  color: hsl(var(--foreground));
  margin-bottom: var(--space-3);
}
.unit-card__desc {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: hsl(var(--foreground));
  margin-bottom: var(--space-4);
}
/* CTA 提示行：卡底，維持 neutral；單元色只放在卡頂色條與 hover 邊框。
   margin-top:auto 把 CTA 推到 flex column 卡片的底部，讓同列卡片 CTA 對齊同一條底線
   （見 .unit-card 的 display:flex 註解）；左右下 margin 維持 0，只動 top。 */
.unit-card__cta {
  font-size: var(--text-sm);
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0;
  margin-top: auto;
}

/* codex 卡：青綠識別。 */
.unit-card--codex::before {
  background: hsl(186 72% 42%);
}
/* claude 卡：暖橘識別。 */
.unit-card--claude::before {
  background: hsl(24 95% 53%);
}
/* gemini 卡：Google blue 識別。 */
.unit-card--gemini::before {
  background: hsl(217 89% 52%);
}
/* copilot 卡：靛藍識別，第四個 CLI 單元。值與 [data-unit="copilot"] 的 --accent（見 line 206）
   同源同值，沿用本區塊既有「首頁卡色條寫死」慣例（此處無 data-unit="copilot" 祖先，--accent
   custom property 不在作用範圍內，故跟 claude/codex/gemini 三張卡一樣寫實色字面值，非新配色決策）。 */
.unit-card--copilot::before {
  background: hsl(240 56% 52%);
}
/* 先讀指南：跨四套 CLI 的共同入口，滿行；色條依首頁工具順序走四色。 */
.unit-card--guide {
  grid-column: 1 / -1;
}
.unit-card--guide::before {
  background: linear-gradient(
    90deg,
    hsl(24 95% 53%) 0 25%,
    hsl(186 72% 42%) 25% 50%,
    hsl(217 89% 52%) 50% 75%,
    hsl(240 56% 52%) 75% 100%
  );
}
/* hub 卡：跨三套並排速查樞紐，滿行。頁面本體目前仍是 Claude/Codex/Gemini 三欄，
   入口色條改以四個教學單元的四色呈現站台層級，不暗示速查頁已有四欄。
   裝飾性實色、無文字 → 不受對比約束（DESIGN.md §7.12.3）。
   幾何 / hover 浮起（--shadow-md）皆繼承 .unit-card / .unit-card::before。 */
.unit-card--hub {
  grid-column: 1 / -1;
}
.unit-card--hub::before {
  background: linear-gradient(
    90deg,
    hsl(24 95% 53%) 0 25%,
    hsl(186 72% 42%) 25% 50%,
    hsl(217 89% 52%) 50% 75%,
    hsl(240 56% 52%) 75% 100%
  );
}
/* experts 卡：職業達人實戰案例，全寬 featured 卡（grid-column 1/-1，位於四張 CLI 卡之後、
   hub 速查卡之前）。紫色識別（三品牌橘/青/藍之外的第四色，不與任何單元 accent 衝突），
   裝飾性實色、無文字 → 不受對比約束，沿用 §1667 起 unit-card 簽名色寫死例外。
   hover 4px→5px 沿用 .unit-card:hover::before 通用規則，無需另寫。 */
.unit-card--experts {
  grid-column: 1 / -1;
}
.unit-card--experts::before {
  background: hsl(262 60% 52%);
}

/* Prompt Library 入口卡：玫瑰識別（hue 338，異於橘24/青186/藍217/紫262），全寬 featured 卡，
   位於 experts 卡之後、hub 速查卡之前（見 index.html home-grid 順序）。裝飾性 4px 實色條、
   無文字 → 不受對比約束，沿用同一套 unit-card 簽名色 hardcode 例外。 */
.unit-card--promptlib {
  grid-column: 1 / -1;
}
.unit-card--promptlib::before {
  background: hsl(338 72% 52%);
}

/* --- 單元卡降級態（可複用 de-emphasis modifier）--------------------------- */
/* 須置於 .unit-card--<unit>::before 之後。套法：class="unit-card unit-card--gemini unit-card--muted" */
.unit-card--muted::before {
  background: hsl(var(--muted-foreground));
}
.unit-card--muted .unit-card__cta {
  color: hsl(var(--muted-foreground));
}
.unit-card--muted .unit-card__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* 狀態徽章：沿用站內 .toc__item-badge 降級徽章語言；文字改 --foreground 守 AA */
.unit-card__badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 450;
  line-height: 1;
  letter-spacing: normal;
  padding: 0.1rem var(--space-2);
  border-radius: 999px;
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  white-space: nowrap;
}

/* 首頁收尾說明：直接複用既有 .callout--info（零新增規則），此處僅外距收口 */
.home-note {
  width: min(100%, var(--content-readable-max));
  margin-left: auto;
  margin-right: auto;
}

/* --- 章末交叉連結（.crosslink：對照另一套教學） ----------------------------
   插在 <nav class="pager"> 之前（單元章節皆成立）；index 頁豁免（§6.3）。
   容器非互動；左 3px 邊條色 + icon 色取「對方單元」accent（方向 modifier 寫死）。 */
.crosslink {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-12);
  padding: var(--space-6);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  /* 左 3px 邊條：方向 modifier 覆寫顏色（指對方單元色） */
  border-left: 3px solid hsl(var(--border));
  border-radius: var(--radius);
}
.crosslink__icon {
  flex-shrink: 0;
  font-size: var(--text-lg);
  line-height: 1.4;
  /* 預設中性，方向 modifier 覆寫為對方單元深色 accent */
  color: hsl(var(--muted-foreground));
}
.crosslink__body {
  min-width: 0;
}
.crosslink__label {
  font-size: var(--text-sm);
  font-weight: 450;
  color: hsl(var(--muted-foreground));
  margin: 0 0 var(--space-1);
}
.crosslink__link {
  display: inline-block;
  /* 行高 1.9 × 18.5px + 上下 padding 撐 ≥44px 命中區 */
  padding: var(--space-2) 0;
  font-size: var(--text-base);
  color: hsl(var(--link));
}
.crosslink__link:hover {
  color: hsl(var(--link-hover));
  text-decoration: underline;
}
/* multi-link 版型（僅 claude/chapter10 一處）：一容器內 1 主 + 1 補連結清單 */
.crosslink__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.crosslink__links li {
  margin: 0;
}
.crosslink__note {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
  margin: var(--space-2) 0 0;
}
/* 方向 modifier：左條色 + icon 色 = 對方單元實色（頁面 data-unit 是本單元，
   故對方色須寫死 HSL）。 */
.crosslink--to-claude {
  border-left-color: hsl(24 95% 53%);
}
.crosslink--to-claude .crosslink__icon {
  color: hsl(22 88% 36%);
}
.crosslink--to-codex {
  border-left-color: hsl(186 72% 42%);
}
.crosslink--to-codex .crosslink__icon {
  color: hsl(190 80% 26%);
}
.crosslink--to-gemini {
  border-left-color: hsl(217 89% 52%);
}
.crosslink--to-gemini .crosslink__icon {
  color: hsl(217 78% 34%);
}

/* → GitHub Copilot CLI（靛藍 hue 240，第四個 CLI 單元）。icon 深色變體 hsl(240 60% 46%) 為
   本規格手算候選值（見下方推導），非既有 token、非工具實測，落地前建議 quality lane 用
   Playwright/DevTools 實際量一次 contrast，不足則依同一手法（降明度）微調。 */
.crosslink--to-copilot {
  border-left-color: hsl(240 56% 52%);
}
.crosslink--to-copilot .crosslink__icon {
  color: hsl(240 60% 46%);
}

/* → prompt-library（玫瑰 hue 338，沿用 .unit-card--promptlib 簽名色，零新增色）。 */
.crosslink--to-prompt-library {
  border-left-color: hsl(338 72% 52%);
}
.crosslink--to-prompt-library .crosslink__icon {
  color: hsl(338 74% 38%); /* 加深玫瑰；on --card(白) ≈ 7.2:1（過 AA/AAA） */
}

/* ==========================================================================
   Prompt Library 頁（prompt-library.html，data-unit="home" 無側欄單頁）
   新元件僅 .prompt-card 家族；其餘復用既有元件（code-block / code-hint /
   source-tag--official / callout / anchor-nav / term / crosslink / page-head）。
   核心策略：單欄 × 全寬 × 自然高度 × 變異隔離——不強制等高、不並排，
   跨卡列高對齊問題從根上不存在；唯一會變高的元素是內嵌 .code-block（有語義的變異）。
   ========================================================================== */

/* 提示詞卡：非互動容器（不加 hover/focus/active，比照 .step__body / .card）。
   單欄堆疊、自然高度，卡間距用 + 選擇器製造固定 24px 鼓點。 */
.prompt-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.prompt-card + .prompt-card {
  margin-top: var(--space-6);
}
/* 頂列：角色標籤（左，可多顆）＋ 官方徽章（右，margin-left:auto）。窄屏 flex-wrap 落行。 */
.prompt-card__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.prompt-card__bar .source-tag {
  margin-left: auto;
}
/* 角色標籤：中性膠囊，沿用站內 badge 語言（--muted 底 / --border 邊 / --foreground 字，AA≈18:1）。 */
.prompt-card__role {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 450;
  padding: 2px var(--space-2);
  border-radius: 999px;
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  white-space: nowrap;
}
/* 用途標題：非文件標題（<p>，不進 heading outline），維持標題級視覺（20.4px/700）。 */
.prompt-card__title {
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  font-weight: 700;
  color: hsl(var(--foreground));
  margin-bottom: var(--space-2);
}
/* 中文導讀：內文級（18.5px/1.9 foreground），長者好讀。 */
.prompt-card__guide {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: hsl(var(--foreground));
  margin-bottom: var(--space-4);
}
/* 卡內 code-block：卡片掌控間距 → 歸零 code-block 預設 margin。
   （needs/paste 用既有 .code-hint 時，.content .code-hint + .code-block 的
    margin-top:var(--space-1) 特異度較高會勝出，自動維持 4px 貼合，不需另寫。） */
.prompt-card .code-block {
  margin: 0;
}
/* 提示詞原文換行：覆寫全站 .code-block pre code 的 white-space:pre（該值為 bash 而設、禁換行）。
   提示詞是自然語言、要「讀得到 + 複製得到」→ pre-wrap 讓長句在卡寬內折行、不橫捲。
   overflow-wrap:break-word 只作超長 token 保險。特異度 (0,2,2) > 全站 (0,1,2)。 */
.prompt-card .code-block pre code {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* ==========================================================================
   稽核儀表板示範 Demo（traffic-audit-dashboard.html 專頁；DESIGN.md §7.17）
   KPI 卡 + 雙序列折線圖（inline SVG，dashboard-demo.js 產生）+ 可排序頻道表。
   新元件僅本頁使用；表格本體沿用既有 .table-wrap / .content table（§7.11），
   本節只疊加 sort 增強層。全部 mobile-first；≥768/≥1024 覆寫併入既有斷點區塊。
   ========================================================================== */

/* 資料頁的外層與所有內頁同為 46rem；表格／圖表只可在自己的容器局部橫向捲動。 */

.dashboard-demo {
  margin: var(--space-6) 0;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden; /* 讓 __bar 淺底貼齊外層圓角 */
}
.dashboard-demo__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: hsl(var(--muted));
  border-bottom: 1px solid hsl(var(--border));
}
.dashboard-demo__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: hsl(var(--foreground));
}
.dashboard-demo__bar .source-tag {
  margin-left: auto;
}
.dashboard-demo__body {
  padding: var(--space-6);
}
/* 三區（KPI / 圖 / 表）縱向節奏統一用 --space-8，不逐區手寫 margin */
.dashboard-demo__body > * + * {
  margin-top: var(--space-8);
}

/* --- KPI 卡列（決策 3.2）：所有 viewport 維持 2×2，避免 46rem 軌內卡片過窄 -------
   用固定 repeat(2)/repeat(4) 而非逐字複製 auto-fit minmax 公式：實測 375px 行動
   寬扣除 container-gutter + dashboard-demo__body padding 後可用寬度，auto-fit
   配 --kpi-card-min(160px) 在多數行動寬度無法穩定湊出 2 欄（會落成 1 欄），固定
   欄數更穩定達成規格陳述的視覺結果；--kpi-card-min 保留為 token 供未來參考。 */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.kpi-card {
  min-width: 0; /* 允許卡片在極窄螢幕縮小，優先避免溢出而非硬撐最小寬 */
  padding: var(--space-4);
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}
.kpi-card__label {
  font-size: var(--text-xs);
  font-weight: 450;
  color: hsl(var(--muted-foreground));
  margin-bottom: var(--space-1);
}
.kpi-card__value {
  font-size: var(--text-h2);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: hsl(var(--foreground));
  margin-bottom: var(--space-1);
}
.kpi-card__delta {
  font-size: var(--text-sm);
  font-weight: 450;
  color: hsl(var(--foreground));
}
.kpi-card__delta.is-up {
  color: hsl(var(--trend-up));
}
.kpi-card__delta.is-down {
  color: hsl(var(--trend-down));
}

/* --- 趨勢折線圖（決策 3.3）：JS 產生 inline SVG，CSS 只管樣式與互動態 ------- */
.trend-chart {
  position: relative;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
}
.trend-chart__svg {
  display: block;
  width: 100%;
  /* 8 個週熱區各需至少 44 CSS px；資料最小寬只在 .trend-chart 局部捲動。 */
  min-width: var(--chart-min);
  height: var(--chart-h);
}
.trend-chart__svg text {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  fill: hsl(var(--chart-axis-fg));
}
.trend-chart__grid-line {
  stroke: hsl(var(--chart-grid));
  stroke-width: 1;
}
.trend-chart__line--human {
  fill: none;
  stroke: hsl(var(--chart-series-primary));
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.trend-chart__line--bot {
  fill: none;
  stroke: hsl(var(--chart-series-muted));
  stroke-width: 2;
  stroke-dasharray: 5 4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.trend-chart__point--human,
.trend-chart__point--bot {
  r: var(--chart-point-r);
  transition: r var(--transition);
}
.trend-chart__point--human {
  fill: hsl(var(--chart-series-primary));
}
.trend-chart__point--bot {
  fill: hsl(var(--chart-series-muted));
}
/* per-week 命中面（透明矩形，命中區 ≥44px）：hover / focus-within 放大同組資料點
   並讓 JS 顯示 tooltip；:focus-within 讓純 CSS 就能處理視覺放大，JS 只管 tooltip 文字。 */
.trend-chart__hit {
  fill: transparent;
  cursor: pointer;
}
.trend-chart__week:focus-within .trend-chart__point--human,
.trend-chart__week:focus-within .trend-chart__point--bot {
  r: 5px;
}
.trend-chart__hit:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: -2px;
}
.trend-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}
.trend-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.trend-chart__legend-swatch {
  display: inline-block;
  width: 1.25rem;
  height: 0;
  border-top: 2.5px solid hsl(var(--chart-series-primary));
}
.trend-chart__legend-swatch--muted {
  border-top-color: hsl(var(--chart-series-muted));
  border-top-style: dashed;
}
/* tooltip：水平隨熱區移動、垂直固定貼齊圖表頂部；純顯示不擋互動 */
.chart-tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  max-width: calc(100% - var(--space-4));
  padding: var(--space-1) var(--space-3);
  background: hsl(var(--chart-tooltip-bg));
  color: hsl(var(--chart-tooltip-fg));
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  white-space: nowrap;
  transition: opacity var(--transition);
  z-index: 5;
}
.chart-tooltip.is-open {
  opacity: 1;
}
.chart-tooltip--start {
  left: 0;
  transform: none;
}
.chart-tooltip--end {
  left: auto;
  right: 0;
  transform: none;
}

/* --- 可排序頻道表（決策 3.4）：疊在既有 .table-wrap + .content table 之上 --- */
.content .table-wrap caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}
.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2) 0;
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 700;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.sort-btn:hover {
  color: hsl(var(--foreground));
}
.sort-btn:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.sort-indicator {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
}
th[aria-sort="ascending"] .sort-indicator,
th[aria-sort="descending"] .sort-indicator {
  color: hsl(var(--accent));
  font-weight: 700;
}
.content table .is-up {
  color: hsl(var(--trend-up));
}
.content table .is-down {
  color: hsl(var(--trend-down));
}

/* 增強型 hover 只給具備精準滑鼠 hover 的裝置；鍵盤 focus 狀態始終保留。 */
@media (hover: hover) and (pointer: fine) {
  .newbie-gate__link:hover {
    color: hsl(var(--foreground));
    border-color: hsl(var(--ring));
    text-decoration: none;
  }
  a.toc__item:hover {
    border-color: hsl(var(--ring));
    box-shadow: var(--shadow);
    text-decoration: none;
  }
  .pager__link:hover {
    border-color: hsl(var(--ring));
    box-shadow: var(--shadow);
    text-decoration: none;
  }
  .unit-card:hover {
    border-color: hsl(var(--ring));
    box-shadow: var(--shadow-md);
    text-decoration: none;
  }
  .unit-card:hover::before {
    height: 5px;
  }
  .trend-chart__week:hover .trend-chart__point--human,
  .trend-chart__week:hover .trend-chart__point--bot {
    r: 5px;
  }
}

/* ==========================================================================
   斷點（Mobile-first，min-width 往上加） — DESIGN.md §5
   ========================================================================== */

/* topbar 窄螢幕收納（<768 brand 隱 + 換行防溢出 / <480 回 hub 只留 icon）— §4.5
   max-width 例外：核心 unit-switch 四鈕全程保留全字、不收。 */
@media (max-width: 767.98px) {
  /* 章節標題已在 .page-head 呈現，topbar brand 冗餘 → 騰空間給漢堡 + ⌂ + 切換器 + 字級鈕 */
  .topbar:not(.topbar--home) .topbar__brand {
    display: none;
  }
  /* 手機導覽精簡（Topbar Slim / Drawer-Tools）：低頻控制（字級 / 語言）改由漢堡抽屜承載 →
     topbar 內原節點藏起（僅限有側欄抽屜的頁面 = 非 .topbar--home）。兩者皆依賴 JS 才能運作
     （font-control 按鈕沒 JS 是死的、lang-switch 選單沒 JS 打不開），JS 停用時隱藏不損可用性。
     用子選擇器 `>`：JS 一旦把節點搬進 .sidebar__tools（不再是 .topbar 直接子節點），
     本規則自動失效、於抽屜內正常顯示（見下方 .sidebar__tools 區塊與 main.js initTopbarTools）。
     .topbar--home（首頁 / experts index，無側欄可承載）不受影響，font-control 維持常駐。 */
  .topbar:not(.topbar--home) > .font-control,
  .topbar:not(.topbar--home) > .lang-switch {
    display: none;
  }
  /* 內容頁 topbar 窄屏防溢出（§4.5 延伸）：低頻工具已移入 drawer，
     常態 375px 維持「漢堡 + ⌂ + 切換器(全字)」單列；320–360px／A＋才允許安全換行。
     §4.5 規定 unit-switch 四鈕全程保留全字不收 → 唯一不犧牲文字 / 不破觸控的解 = 允許 topbar 換行。
     固定 height → auto + min-height（保住未換行時的原高與 sticky 行為），column/row-gap 收一階。
     flex-wrap 自我調節：放得下不換行、放不下才落第二列；sticky 佔流正常 → 內容不被蓋。
     ≥768 本段不生效；漢堡是否隱藏改由 1280／1760 的 page-type fixed 契約決定。 */
  .topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--topbar-h);
    column-gap: var(--space-1);
    row-gap: var(--space-2);
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }
  .topbar:not(.topbar--home) {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .topbar:not(.topbar--home) .unit-switch__btn {
    min-width: 2.75rem;
    padding-left: var(--space-1);
    padding-right: var(--space-1);
  }
  /* 漢堡是 topbar 內唯一未鎖 flex-shrink 的元素，過擠時會被壓到 22px（破 44px 觸控）。
     鎖住不縮，保住觸控目標。 */
  .menu-toggle {
    flex-shrink: 0;
  }
  /* 換行後 spacer（flex:1）會獨吞一整列、把後續元素硬推到下一行 → 窄屏移除。
     僅限非首頁（.topbar--home 唯一機制是靠 spacer 把 brand 推左、字級鈕推右，
     缺此例外會讓兩者擠在左側、右側留大片空白）。spacer 不像 font-control/lang-switch
     會被 JS 搬離 .topbar 直接子節點，故沿用 .topbar__brand 的 descendant 選擇器寫法
     （不需要 `>` 讓規則隨 DOM 搬遷自動失效）。 */
  .topbar:not(.topbar--home) .topbar__spacer {
    display: none;
  }
  /* 窄屏 topbar 已換行擁擠 → 細分隔線收起，避免換行後分隔線落單 */
  .topbar__divider {
    display: none;
  }
  /* 防禦性規則（QA 實測抓到）：320px + 大字級（--font-scale 放大，如 A+ 調至 1.15）疊加時，
     .unit-switch 4 顆鈕（Claude/Codex/Gemini/Copilot）nowrap 全字寬總和隨 --font-scale
     等比放大（padding/字級皆 rem 制，隨根字級 html{font-size} 同步跟漲），量得
     scrollWidth 336px vs viewport 320px，第 4 顆 Copilot 鈕被裁到螢幕外。單獨窄螢幕或
     單獨大字級皆不觸發，只有兩者疊加才炸 → 上面 .topbar{flex-wrap:wrap} 只把整塊
     unit-switch 換到 topbar 第二列，擋不住 unit-switch 內部 4 鈕自己的溢出。
     §7.13 規定四鈕全程保留全字、不得縮寫成 icon → 唯一不犧牲文字的解 = 允許 unit-switch
     自己內部換行成兩列。光加 flex-wrap:wrap 不夠：flex 子項送進外層 .topbar 排版算式的
     hypothetical 寬度是「假設不換行」的 max-content 寬度，沒有 max-width 夾住可視寬度，
     wrap 條件永遠不成立（box 還是撐開到未換行寬度，跟母層要多少給多少）→ 加
     max-width:100% 讓 unit-switch 不超出 topbar 該行可用寬度，夾住後放不下的鈕才會落到
     第二列。gap（見上方既有宣告，row/column 同值）已覆蓋換行後的列間距，不必另加
     row-gap。只在此窄斷點生效，≥768 桌機維持原 nowrap 單行不受影響；一般情況（字級 1.0）
     內容本就放得下一行，flex-wrap 只在放不下時才觸發，不會無謂提早換行。 */
  .unit-switch {
    flex-wrap: wrap;
    max-width: 100%;
  }
  /* D1-B 滿版突破（僅窄斷點、僅 step 卡內情境）：
     A＋ 字階下容器內距同步 ×1.15，320 視口 os-tabs 內容框只剩 173.44px，
     三格 flex:1 均分後 tab #0 的文字可用寬僅 42.50px，而 Windows 實寬 65.23px。
     本規則把 .step__body 的左右內距讓給 tab 列（不含其 1px border，
     故 tab 列停在邊框內緣、不蓋線）。
     負 margin 必須是 --space-6 的反向引用而非硬寫 px：該 token 隨 --font-scale
     產生 21.6/24/27.6px，與 .step__body 的 padding 逐格逐位元同步；
     硬寫 -24px 會在 A− 過度突破 2.4px/側、在 A＋ 短缺 3.6px/側。
     祖先限定 .step__body 不可省 —— en/bo chapter1 的 os-tabs 直掛 section，
     對其套用本規則會造成雙側水平溢出約 9.2px（見規格單位 4）。 */
  .step__body .os-tabs {
    margin-inline: calc(-1 * var(--space-6));
  }
  /* D1：os-tabs 巢狀在 step-list 卡內時每格僅 77px（非獨立情境的 100px），
     Windows（7 字元）在 --text-sm/600 下約 58px 必折行。內距降階 + 字級降一階
     擠出可用寬；overflow:hidden 讓 flex:1 子項（本 tab）的自動最小寬降到 0，
     否則 tab 縮不到低於文字內容寬。
     「…」不是這條 overflow 產生的——它由 .os-tabs__tab-label 的 text-overflow
     產生，本規則只負責讓 tab 縮得下去。
     min-height（44px 觸控目標）不動，本規則不覆寫。 */
  .os-tabs__tab {
    padding-inline: var(--space-1);
    font-size: var(--text-xs);
    overflow: hidden;
  }
}
@media (max-width: 479.98px) {
  .newbie-gate__link {
    grid-template-columns: 1.25rem minmax(0, 1fr);
  }
  .newbie-gate__arrow {
    display: none;
  }
  /* <480 collapse ladder 最後一階：回 hub 鈕只留 ⌂ icon、省文字（§4.5；≥480 保留全字） */
  .topbar__home span {
    display: none;
  }
}

/* md：≥768px 只調整密度；sidebar 是否固定由 page type 的 1280/1760 契約決定。 */
@media (min-width: 768px) {
  .content {
    padding-top: var(--space-12);
    padding-bottom: var(--space-16);
  }
  h2 {
    margin-top: var(--space-20);
  }
  h3 {
    margin-top: var(--space-12);
  }
  .toc--compact .toc__item {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--toc-row-gap);
    align-items: baseline;
  }
  .toc--compact .toc__item-num {
    grid-column: 1;
    grid-row: 1;
  }
  .toc--compact .toc__item-title {
    grid-column: 2;
    grid-row: 1;
  }
  .toc--compact .toc__item-badge {
    grid-column: 2;
    grid-row: 2;
  }
  @supports (grid-template-columns: subgrid) {
    .toc--compact {
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr);
    }
    .toc--compact > .toc__group {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
    }
    .toc--compact > .toc__group > .toc__group-title {
      grid-column: 1 / -1;
    }
    .toc--compact .toc__list {
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
    }
    .toc--compact .toc__list > li {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
    }
    .toc--compact .toc__item {
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
    }
  }
  /* Step List 卡片內距 ≥768px 升 --space-8（寬鬆，DESIGN.md §7.9） */
  .step__body {
    padding: var(--space-8);
  }
  /* 提示詞卡內距 ≥768px 升 --space-8（寬鬆，比照 .step__body；Prompt Library 頁專用） */
  .prompt-card {
    padding: var(--space-8);
  }
  /* 稽核儀表板 demo：body 內距升 --space-8；KPI 維持 2×2，避免 canonical 46rem 軌內過窄。 */
  .dashboard-demo__body {
    padding: var(--space-8);
  }
  .kpi-grid {
    gap: var(--space-6);
  }
  /* 首頁（無 sidebar）：padding 升 --space-12 / --space-8；入口卡依可用寬度排列 */
  .home {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* lg：≥1024px → 垂直留白加大；水平寬度仍由 readable/wide container token 控制 */
@media (min-width: 1024px) {
  .content {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
  /* 首頁：上下 padding 升 --space-16；home-grid 維持 wide container，卡間距升 --space-8。 */
  .home {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
  .home-grid {
    gap: var(--space-8);
  }
}

/* 有 sidebar 的內頁共用固定門檻：外層皆為 46rem，≥1280px 即固定。 */
@media (min-width: 1280px) {
  body[data-page-type="reading"] .menu-toggle,
  body[data-page-type="collection"] .menu-toggle {
    display: none;
  }
  body[data-page-type="reading"] .sidebar,
  body[data-page-type="collection"] .sidebar {
    transform: translateX(0);
    box-shadow: none;
  }
  body[data-page-type="reading"] .sidebar-overlay,
  body[data-page-type="collection"] .sidebar-overlay {
    display: none;
  }
  body[data-page-type="reading"]
    .shell
    > .content:not(.content--standalone),
  body[data-page-type="collection"]
    .shell
    > .content:not(.content--standalone) {
    margin-left: var(--sidebar-w);
  }
}

/* ==========================================================================
   prefers-reduced-motion：關閉所有動態 — DESIGN.md §7
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}