/* ============================================================
   Course Kit 官網 — 使用說明五頁專屬樣式（page-help.css）
   五頁（help.html／help-quick-start.html／help-self-tracking.html／
   help-statistics.html／help-shared-courses.html）共用這份檔案。
   沿用 page-article.css 的 .art-layout／.art-toc／.toc-mobile／.art-content／
   .callout（新增）／.faq 骨架，這裡只補 help 專屬的視覺：
   側欄五項導覽的 active 態、情境卡（quick-start 用）、提示框、
   雙角色對照卡、首頁三功能小卡、通知內容摺疊表格。
   跟 site.css／page-article.css 一起載入，兩者在前。
   ============================================================ */

/* ---------- 側欄／手機摺疊：help 五項導覽（跨五頁內容完全一致，只有 active 態不同） ---------- */
.help-toc a{font-weight:600}
.help-toc a.on,.help-toc-mobile a.on{color:var(--brand-text);font-weight:800}
.art-toc.help-toc a.on{border-left-color:var(--brand-deep)}

/* ---------- 情境卡（quick-start 三情境用） ---------- */
.scn{margin-top:32px;padding:26px 28px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.scn-badge{display:inline-block;font-size:var(--fs-xs);font-weight:800;letter-spacing:.06em;
  color:var(--brand-text);background:var(--brand-tint-2);border:1px solid var(--brand-border);
  border-radius:999px;padding:4px 12px;margin-bottom:10px;margin-right:14px}  /* 2026-08-07 Lucy：徽章與後面標題文字要有空隙，目錄與內文全部適用 */
.scn h2{font-size:clamp(20px,2.4vw,26px);margin-top:0}
.scn-status{color:var(--ink-2);font-size:var(--fs-md);margin-top:8px}
.scn h3{font-size:var(--fs-lg);margin-top:22px}
.scn ol{margin-top:10px}
.scn .tip{margin-top:18px;padding:14px 18px;background:var(--brand-tint-2);
  border:1px solid var(--brand-border);border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--ink-2)}
.scn .tip b{color:var(--heading)}

/* ---------- 小提示（.tip）：操作小撇步／替代路徑，小、行內感，跟下面 .callout（前提／警告，
   大塊有底色）分工。原本 .tip 只在 .scn 情境卡裡有樣式（上面那條），這裡補一條不綁 .scn 的通用版，
   讓 self-tracking／statistics 這類純 .art-content 頁面也能用同一套視覺，數值跟 .scn .tip 對齊，
   兩條同時存在時 .scn .tip 特異度較高會贏，quick-start 頁視覺不受影響。 ---------- */
.tip{margin-top:18px;padding:14px 18px;background:var(--brand-tint-2);
  border:1px solid var(--brand-border);border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--ink-2)}
.tip b{color:var(--heading)}

/* ---------- 情境截圖（.help-shot）：2026-08-09 把 6 個 help/guide 頁的 <span class="todo">
   截圖待補換成實圖，圖檔搬自舊 docs-site guide 頁。.scn 情境卡與 statistics／self-tracking
   那種純 .art-content 單流程頁都用得到，所以不綁 .scn，寫法比照 .tip 的「卡內／卡外共用」處理。
   一個情境可能對應舊站好幾張截圖（例如同時示範方式 A／B，或续課四張連續步驟圖），用 flex-wrap
   讓多張圖並排、單張時自然只占一格；深色模式不用額外處理，全站已有的
   img:not([src*="otter"])... 那條全域 dark 規則會自動套用降亮度＋這裡再補的細邊框。

   2026-08-09 二輪（Lucy 回報可用性問題 A）：原本 max-width 240px 不分單張／多張，手機直式
   截圖（實際原圖 858-1536px 寬，遠比 240px 有餘裕）裡的紅框標註在這個尺寸下完全看不清楚。
   當時改成一律放大到 400px（或多圖組 340px），結果 Lucy 三輪回報「過度放大」：單張手機
   直式截圖（長寬比 width/height ≈ 0.46，例 self1-create-course.jpg）400px 反而比實際需要
   的閱讀尺寸大上一截，只有「一張圖裡塞 2-3 支手機並排」的合成圖（長寬比 ≈ 0.92-1.47，例
   coach4-check-remaining.png）才需要放大才看得清楚裡面每一格。中間量出巨大空隙（0.46 vs
   0.92 起跳），拿 0.7 當安全閾值。

   2026-08-09 三輪：改成兩級制，用 HTML class 標記（不用 JS 量測加 class 會 FOUC，CSS
   本身也做不到「依圖檔比例選取」），靠 assets/tag_wide_shots.py 依「圖檔實際寬高比」
   （見腳本內 WIDE_FILES 表，來源是 PIL 量測全部 43 張 .help-shot 圖檔）幫符合的 <img>
   加 class="shot-wide"，腳本冪等：已有 shot-wide 的 img 重跑會跳過、不會重複加 class。
   - 預設（無 shot-wide，單張手機直式截圖）：回到 240px，貼著原尺寸的可讀最小值，
     不用另外放大就看得出操作重點；這批圖原圖本身已經 850-1550px 寬，240px 縮圖只是
     「看得出畫面在講哪個功能」，紅框看不清楚的細節本來就該靠下面的 lightbox 點開看原圖，
     不需要縮圖自己扛。
   - shot-wide（合成多格截圖，一張圖裡 2-3 支手機並排）：維持 400px。多格圖本身就是
     「一張圖等於好幾張圖」，即使有 lightbox，240px 縮圖下每一格會小到看不出裡面手機
     畫面在演示什麼，400px 是實測（見驗收截圖）能看清每一格輪廓、又不會整張圖蓋過內文
     節奏的折衷值，跟兩輪前判斷單張圖的折衷值同一個數字純屬巧合（合成圖的「單元格」
     本身就跟一張直式截圖差不多窄，等於多格版面需要的總寬度自然落在同一個區間）。
   - 兩張以上並排的情境卡（.help-shot:has(>:nth-child(2))，例如續課提醒、批次匯入四張
     連續步驟圖）：這批圖全部是直式手機截圖（無 shot-wide），2x2 排版邏輯與 340px
     上限維持不動 —— 一次改動就把每類圖的尺寸都調整，不利於分辨這輪「單張直式圖太大」
     的回饋到底改到了哪裡；340px 本身也已經是三輪前為「2 張一列不爆版、375 寬不橫向
     捲動」實測調過的值（見下方保留的說明），比這輪新訂的 240px 單張預設值大，是因為
     「一列擠兩張」跟「單張獨占一行」是不同的視覽情境，2 張並排時稍大一點才看得出兩張
     在對比什麼（例如續課「收到回覆」與「手動續約」兩條路徑並排），不是這輪要處理的
     「單張圖過度放大」問題，所以刻意不跟著降到 240px；有需要再回頭調。若之後真的有
     合成圖（shot-wide）被放進多圖組，下面補一條 shot-wide 專屬上限，維持跟單張 shot-wide
     一致的 400px 天花板（目前 43 張圖裡沒有這種案例，先防呆）。 ---------- */
.help-shot{margin-top:14px;display:flex;flex-wrap:wrap;gap:14px}
.help-shot img{display:block;width:100%;max-width:240px;min-width:0;height:auto;border-radius:var(--r-sm);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);cursor:zoom-in}
.help-shot img.shot-wide{max-width:400px}
.help-shot:has(>:nth-child(2)) img{width:auto;flex:0 1 calc(50% - 7px);max-width:340px}
.help-shot:has(>:nth-child(2)) img.shot-wide{max-width:400px}
/* width:auto 蓋掉上面基礎規則的 width:100%：flexbox 裡 flex-basis 已經接手決定主軸尺寸，
   但 width:100% 沒清掉的話會被瀏覽器當成額外約束疊上去，實測（375 寬手機）會讓每張圖
   照樣撐滿整個 .help-shot 容器寬度、變回單欄，flex-basis 的 50% 完全沒生效——這裡
   width:auto 讓 flex-basis／max-width 兩條全權決定寬度，才會真的兩張一列。
   min-width:0（上面基礎規則補的，這條不用重複寫）：img 是 replaced element，flex 子項目
   預設 min-width:auto 會吃「內容建議尺寸」，這裡是 max-width（340/400），變成瀏覽器不准
   收縮低於 340px 的隱性下限——實測（375 寬手機）容器明明只剩 ~277px，兩張圖卻各自卡在
   340px 硬擠出橫向捲動（document.scrollWidth 389 > innerWidth 375，是這輪修完才抓到的
   真實 regression，不是假設性風險）。补 min-width:0 解掉這個 flexbox 經典陷阱，
   讓 flex-shrink:1 真的能把圖縮到比 max-width 小，318px 前那版本卡住的兩欄設計才會生效。
   手機寬度（.help-shot 本身沒有斷點，靠 flex-wrap 自動換行）：flex-basis 50%-7px 在容器
   窄到裝不下兩張 340px 圖時，靠 flex-shrink:1（預設值，這裡沒覆寫成 0）自然縮小；
   容器窄到個位數張看起來還是太擠時（.scn 卡片 padding 吃掉版寬後，375 寬實測容器只剩
   ~277px，兩張各自 shrink 到 ~131px 仍然是直式手機截圖看得出内容的尺寸，比原本 1 欄
   240px 上限的方案更小但换來「兩張一組」不跳成單欄的一致性；如果之後 Lucy 覺得這個寬度
   在最窄手機上還是太擠，下一輪可以在這裡加 @media (max-width:480px) 把多圖規則退回單欄，
   目前量測（見驗收截圖）判讀還在能看清的範圍，先不加）。 */

/* ---------- 情境影片（.help-shot video）：2026-08-09 第二批，coach 指南 4 個情境
   （建立課程／排課／記事本／申請結束課程）舊站是 <video> demo 不是截圖，圖檔搬不了，
   直接把舊 docs-site/guide/coach/*.mp4 檔案一起搬過來。跟上面 .help-shot img 共用外框視覺
   （圓角／邊框／陰影），max-width 對齊上面「單張截圖」放大後的 400px（原本是 360，這輪
   跟截圖一起放大維持視覺一致，見 Lucy 回報問題 A 的「影片一併檢視放大」）：這四個情境都是
   「一個情境一支影片」單獨占版，不像截圖常常 2-4 張並排要縮小才擠得下；240px 寬底下瀏覽器
   原生 controls 列（播放鍵／時間軸／音量／全螢幕）會太擠不好點，400px 給 controls 留足空間。
   max-height 420px 對齊舊站 guide.css 的 .step-img-wrap video 那條，避免直向錄影在窄版位裡
   被拉得過高。影片不加 lightbox：原生 controls 已經有全螢幕按鈕能看大圖，額外疊一層點擊全開
   的邏輯會跟「點擊播放/暫停」互相搶事件，維持現狀不做。
   深色模式：img 那條全域 filter:brightness(.94) 規則只認 <img> 標籤，video 吃不到，
   這裡另外補一條同數值的 video 專屬 dark 規則，讓影片首幀跟旁邊截圖亮度感一致，
   不會一亮一暗看起來像沒套到主題。控制列本身是瀏覽器原生 UI，不同瀏覽器早就有自己的
   深色態，不用也不能在這裡蓋。 ---------- */
.help-shot video{display:block;width:100%;max-width:400px;max-height:420px;height:auto;
  border-radius:var(--r-sm);border:1px solid var(--line);box-shadow:var(--shadow-sm);background:#000}
:root[data-theme="dark"] .help-shot video{filter:brightness(.94)}

/* ---------- 截圖 lightbox（.lb）：2026-08-09，Lucy 回報問題 A 建議的做法。
   先查過 zh/index.html 的 SHOTS 表（data-shot → 檔名對照，行 561-592），那不是 lightbox，
   只是「首頁截圖換圖」的資料表，全站（含 assets/*.js 四支）都沒有既有 lightbox 可以重用，
   所以在這裡新寫一份極簡版，不依賴外部套件。
   DOM 由 assets/site-motion.js 在 runtime 動態建立、append 到 body（見該檔案尾端新增的
   「情境截圖 lightbox」區塊），不需要逐一改 10 個 help 頁的 HTML；只在頁面裡真的有
   .help-shot img 時才會建立，其他頁面（blog／index…）不受影響。
   點縮圖＝看同一張圖的原始尺寸（沒有另外準備高解析度版本，縮圖跟原圖是同一個檔案，
   原圖本身已經有 858-1536px 寬，遠比縮圖大，足夠看清楚紅框標註）。 ---------- */
.lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:clamp(20px,6vw,56px);background:rgba(6,20,30,.82)}
.lb.is-open{display:flex}
.lb-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:var(--r-sm);box-shadow:var(--shadow-lg)}
.lb-close{position:absolute;top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px);
  width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.3);
  background:rgba(11,36,54,.65);color:#fff;font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.lb-close:hover{background:rgba(11,36,54,.9)}
.lb-close:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.lb{transition:none}}

/* ---------- 提示框：資訊／注意兩色（免費版限制、付費邊界等），前提或警告用，大塊有底色，跟上面 .tip 分工 ---------- */
.callout{margin:24px 0;padding:18px 22px;border-radius:var(--r-md);font-size:var(--fs-md)}
.callout p{color:var(--ink-2);margin:0}
.callout p+p{margin-top:8px}
.callout-info{background:var(--brand-tint-2);border:1px solid var(--brand-border)}
.callout-warn{background:var(--warm);border:1px solid var(--warm-line)}

/* ---------- 連續提示框防卡片牆（2026-08-04）：.callout 單獨出現（前後接一般內文／標題）24px 就夠，
   但另一個 .callout 緊接在後，好幾張同底色卡片疊一起讀起來像牆。
   用相鄰選擇器只加大「連續卡片之間」的間距，.callout 本身的 24px 不動
   （那條全站 10 頁共用，單獨使用時的間距不能變）。
   2026-08-08：原本還有一條 .role-split+.callout，隨 role-split 一起刪（見下方說明）。 ---------- */
.callout+.callout{margin-top:48px}

/* ---------- 步驟清單：self-tracking／statistics／shared-courses 原本手打數字的 <h3>「1. 標題」
   改包進語意化 <ol><li>，h3 本身標籤與文字不動（字級／line-height 沿用 site.css 的 h1,h2,h3 標籤選擇器
   ＋ page-article.css 的 .art-content h3，都是後代選擇器，巢進 li 一樣生效，不會掉樣式）。
   這裡只重置 <ol>/<li> 從 .art-content ul/ol/li（page-article.css）繼承來的清單樣式
   （padding-left 22px、marker、li 自己的 margin-top/line-height），讓視覺跟改前的 h3+p/ul
   自由排列完全一致，靠 class 特異度（兩個 class）蓋掉原本「.art-content ol」「.art-content li」
   （一個 class＋一個標籤）這兩條規則。 ---------- */
.art-content .step-list{list-style:none;padding-left:0;margin-top:0}
.art-content .step-list>li{margin-top:0;line-height:inherit;color:inherit}

/* ---------- 雙角色對照（.role-split）2026-08-08 移除 ----------
   唯一使用者是 help-shared-courses.html 的「記錄出席，雙方介面不同」section，
   Lucy 2026-08-08 裁定整段刪除，這組規則跟著變孤兒。要復活的話備份在
   help-shared-courses.html.bak-2026-08-08-trim 與本檔同日期的 git 紀錄裡。 ---------- */

/* ---------- 四張功能／導覽小卡（help.html 首段用，2026-08-03 從三張功能卡加「快速上手」湊成
   四張同權重卡，待 Lucy 確認：見 .key-takeaway 的「三大功能」文案是否要跟著調整） ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:28px 0 0}
.feat-grid > a{display:block;padding:20px 22px;border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .2s,border-color .2s}
.feat-grid > a:hover{transform:translateY(-3px);border-color:var(--brand-2)}
/* M17（DESIGN_REVIEW 2026-08-01）：三張卡標題原本是 <h3>，但 h1 後面沒有 h2 銜接，
   直接跳級。2026-08-02 改成 <p class="fg-title">，不補視覺隱藏的 h2（免得語意更混亂）。
   這條規則把原本「site.css 的 h1,h2,h3 標籤選擇器」+「這裡的 .feat-grid h3」兩層疊出來的
   視覺原封不動搬過來，只是選擇器換成 class，視覺零變化。 */
.feat-grid .fg-title{font-size:var(--fs-lg);margin:0;color:var(--heading);letter-spacing:-.022em;line-height:1.35;font-weight:800}
.feat-grid p{font-size:var(--fs-sm);color:var(--sub);margin-top:8px}
.feat-grid .fg-who{font-size:var(--fs-xs);color:var(--faint);margin-top:10px}
/* 四欄在窄桌機／平板會太擠（900 斷點是 .art-layout 收成單欄的地方，這裡跟著收成 2x2，
   同一列兩張卡還是靠 grid 自動等高），手機維持既有 640 斷點收 1 欄。 */
@media (max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.feat-grid{grid-template-columns:1fr}}

/* ---------- 通知內容摺疊表格（shared-courses 用，視覺語言同 .faq / .toc-mobile） ---------- */
.notif{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:0 22px;
  box-shadow:var(--shadow-sm);margin:22px 0}
.notif summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:700;color:var(--heading);
  font-size:var(--fs-md);display:flex;align-items:center;justify-content:space-between;gap:12px}
.notif summary::-webkit-details-marker{display:none}
.notif summary::after{content:"";width:9px;height:9px;border:2px solid var(--brand-deep);border-top:0;
  border-left:0;transform:rotate(45deg) translateY(-2px);transition:transform .3s;flex:0 0 auto}
.notif[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.notif .table-wrap{margin:0 0 20px}

/* ---------- next-guide 上一頁／下一頁卡（GitBook 風格，2026-08-04 Lucy 選定），
   只用在 help 系列頁面，跟 blog 頁用的純文字版 .ng-text 分開，
   外層 <section class="next-guide sec-tight"> 的版位間距不動，只換內層卡片。
   2026-08-04 二版：拆 .gb-next（下一頁，靠右）／.gb-prev（上一頁，靠左，箭頭在左）兩種卡，
   .gb-grid 從 flex 改 2 欄 grid，each 卡固定吃自己的欄位（grid-column），
   只有一張卡時另一欄留空，卡片自然只佔半寬，不用另外寫「只有一張時」的特殊邏輯。 ---------- */
.gb-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gb-grid .gb-prev{grid-column:1}
.gb-grid .gb-next{grid-column:2}
/* 2026-08-09 Lucy 回報問題 B：原本 border 吃 var(--line)（#E6EBEE，跟白底 --bg #FAFAFA
   幾乎沒有對比，dark 模式的 --line 是 rgba(255,255,255,.14) 更淡），又沒有底色，
   兩顆大方塊在頁面上幾乎隱形。改法：
   - 底色補 var(--surface)＋var(--shadow-sm)：讓它讀成一張「卡片」而不是一塊透明留白，
     跟站上其他可點卡片（.feat-grid > a／.scn／.notif）視覺語言一致，不是新發明一種樣式。
   - 邊框從 var(--line) 換成 var(--brand-border)：light 模式 #bfe6f1 對白底有實際可辨的
     色彩對比（不是灰上灰），dark 模式的 --brand-border 是 rgba(127,214,240,.30)，
     同樣比 --line 的 .14 明顯；兩個主題各自的品牌色 token 已經先過對比驗證（見檔頭
     dark mode 說明段落跟 site.css 的 --brand-text 對比註解），這裡沿用不用重新量。
   - hover 態原本 border-color 已經是 var(--brand-border)（等於 hover 後跟現在的預設態一樣），
     沒有「回饋感」；現在預設態先升到 var(--brand-border)，hover 再進一步加深到 var(--brand-2)
     （light #7abcd0／dark 沿用同一顆，兩個主題都比 --brand-border 深一階），底色也從
     --brand-tint-2 加深到 --brand-2 的低透明度版，讓 hover confirm 有東西在變，
     不是「本來就這樣」。 ---------- */
.gb-prev,.gb-next{display:block;text-decoration:none;border:1.5px solid var(--brand-border);
  border-radius:14px;padding:18px 22px;background:var(--surface);box-shadow:var(--shadow-sm);
  transition:border-color .2s,background .2s,box-shadow .2s,transform .2s}
.gb-next{text-align:right}
.gb-prev{text-align:left}
.gb-prev:hover,.gb-next:hover{border-color:var(--brand-2);background:var(--brand-tint-2);
  box-shadow:var(--shadow-md);transform:translateY(-2px)}
.gb-prev:hover .gb-title,.gb-next:hover .gb-title{color:var(--brand-text)}
.gb-next:hover .gb-chev{transform:translateX(4px)}
.gb-prev:hover .gb-chev{transform:translateX(-4px)}
.gb-prev:focus-visible,.gb-next:focus-visible{outline:2px solid var(--brand-deep);outline-offset:2px}
.gb-label{display:flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;color:var(--faint);text-transform:uppercase;margin:0 0 6px}
.gb-next .gb-label{justify-content:flex-end}
.gb-prev .gb-label{justify-content:flex-start}
.gb-title{display:flex;align-items:center;gap:10px;font-size:var(--fs-xl);font-weight:800;color:var(--heading);line-height:1.3;margin:0;transition:color .2s}
.gb-next .gb-title{justify-content:flex-end}
.gb-prev .gb-title{justify-content:flex-start}
.gb-chev{font-size:var(--fs-xl);color:var(--brand-text);transition:transform .2s;flex:none}
@media (prefers-reduced-motion:reduce){.gb-prev,.gb-next,.gb-chev,.gb-title{transition:none}}

/* ============================================================
   2026-08-04 GitBook 版型二版：左樹狀導覽／中內容，兩欄。
   一版是三欄（左樹／內容／常駐右欄「本頁目錄」220px），2026-08-04 實測後拆掉常駐右欄：
   它在 1280／1440 都固定 220px 不隨螢幕縮放，項目是膠囊徽章＋標題強制換行最短兩行，
   教練指南頁 11 項疊到 687px 高，還把內容欄擠到 56 字元（低於 60-75 舒適閱讀區間）。
   改法：右欄唯一版本改用收合面板（.help-toc-panel，原本只在 <1200 用），
   套用門檻拉到全寬，放進 .art-content 內容區頂端，預設收起，三欄變兩欄。
   跟左樹的手機降級面板（.help-tree-panel，仍只在 <960 出現）刻意拉開視覺差異
   （色調／summary 文字都不同，見下方兩段各自的註解），390 寬兩顆手風琴疊在一起也分得出誰是誰。
   只給 11 個 help 頁用（.help-layout），跟 blog 三頁共用的 .art-layout（page-article.css，
   兩欄，不准動）完全分開，不共用 grid class，改這裡不會波及 blog。
   斷點：960 以上「左樹 200px＋內容」兩欄；960 以下單欄，左樹降級成 .help-tree-panel。
   跟 page-article.css 的 .toc-mobile（只在 900 生效，跟這裡要的 960 對不上）分開一條路，不指望它。
   左樹 aside 借 page-article.css 既有的 .art-toc 基底（sticky／字級／ol,li,a／a.on），
   這裡只加 help 專屬的視覺，不重寫 .art-toc 本身。
   常駐右欄 aside（.art-toc.help-toc）已經沒有任何寬度會顯示它。
   2026-08-04 同日的動線那一輪把 10 頁的死 markup 整段拔掉了（那是重複的連結清單，
   留在 DOM 裡沒有好處），所以現在站上已經沒有任何元素帶這組 class。
   下面那條 display:none 留著當防呆，避免之後有人複製舊版型時又把右欄帶回來。
   ============================================================ */
.help-layout{display:grid;gap:28px;align-items:start;grid-template-columns:200px minmax(0,1fr)}
.art-toc.help-toc{display:none}
/* 拆掉右欄後，1fr 內容欄實測在 1280 寬會撐到 78ch（page-article.css 給 .art-content 的全站
   共用上限），超過 60-75 字元的舒適閱讀上限。這裡只在 .help-layout 範圍內收窄，
   不動 .art-content 本身的 78ch（page-article.css 不准碰，blog 頁的 .art-layout 也還要用）。 */
.help-layout .art-content{max-width:68ch}

@media (max-width:960px){
  .help-layout{grid-template-columns:minmax(0,1fr)}
  .art-toc.help-tree{display:none}
}

/* ---------- 左樹狀導覽本體（11 頁 markup 完全一致，只有 a.on 位置不同；
   a.on 的顏色/粗體/左框線直接吃 page-article.css 的「.art-toc a.on」，這裡不重複宣告） ---------- */
.help-tree{font-size:var(--fs-sm)}
.help-tree .tree-group{font-size:var(--fs-xs);font-weight:800;letter-spacing:.06em;color:var(--faint);
  text-transform:uppercase;margin:16px 0 4px 16px}
.help-tree > ol > li:first-child .tree-group{margin-top:4px}

/* ---------- 左樹手機/平板降級版（<960）：.help-tree-panel，獨立 <details>。
   視覺複製自 page-article.css 的 .toc-mobile（那份斷點卡在 900，跟這裡要的 960 對不上，
   且該檔不准動，blog 頁還在吃），這裡用專屬 class 重新宣告一份，不動 page-article.css 一個字。
   白底＋灰邊框（中性色），跟下面 .help-toc-panel 的品牌色調刻意不同：這是「換頁」用的導覽，
   不是「跳段落」用的目錄，色調保持中性避免被誤認成品牌強調內容。 ---------- */
.help-tree-panel{display:none}
@media (max-width:960px){
  /* 2026-08-07 Lucy 圈校間距：上緣原本 0（lead 直貼卡片，太擠）補 28px；
     下緣原本 24px 再疊 .art-body 的 44px padding-top 共 68px（太鬆），
     margin-bottom 歸零、由下面那條 :has 規則把 .art-body 收成 28px，上下打平。 */
  .help-tree-panel{display:block;margin:28px 0 0;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r-md);padding:0 20px;box-shadow:var(--shadow-sm)}
  .help-tree-panel summary{list-style:none;cursor:pointer;padding:16px 0;font-weight:700;color:var(--heading);
    font-size:var(--fs-md);display:flex;align-items:center;justify-content:space-between;gap:12px}
  .help-tree-panel summary::-webkit-details-marker{display:none}
  .help-tree-panel summary::after{content:"";width:9px;height:9px;border:2px solid var(--brand-deep);
    border-top:0;border-left:0;transform:rotate(45deg) translateY(-2px);transition:transform .3s;flex:0 0 auto}
  .help-tree-panel[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
  .help-tree-panel ol{list-style:none;margin:0;padding:0 0 16px;border-left:2px solid var(--line)}
  .help-tree-panel a{display:block;padding:6px 0 6px 14px;color:var(--sub)}
  .help-tree-panel .toc-sub{padding-left:28px;font-size:var(--fs-sm)}
  .help-tree-panel .tree-group{font-size:var(--fs-xs);font-weight:800;letter-spacing:.06em;color:var(--faint);
    text-transform:uppercase;margin:10px 0 2px 14px}
  .help-tree-panel a.on{color:var(--brand-text);font-weight:800}
  /* 配上面 .help-tree-panel 的間距收斂：只在「有 help-layout 的頁」（11 個 help 頁）
     把 .art-body 的 44px padding-top 收成 28px，blog 三頁的 .art-body 不受影響
     （page-article.css 不准碰的前提維持）。:has() 目前全站支援的瀏覽器都有，
     萬一沒有就退回 44px 的舊間距，只是鬆一點、不會壞版。 */
  .art-body:has(.help-layout){padding-top:28px}
}

/* ---------- 本頁目錄收合面板（.help-toc-panel）：2026-08-04 二版從「只在 <1200 出現的
   右欄降級版」升格成「所有寬度都用的唯一版本」，放在 .art-content 開頭（內容欄自己的頂端，
   不是整頁最上方），預設收起，跟置頂的左樹面板分屬不同區塊，不會背對背疊在一起。
   跟左樹面板刻意做兩處視覺差異，390 寬即使真的相鄰也一眼看出不是同一顆手風琴：
   (1) 品牌淺色底＋品牌邊框（左樹面板是白底灰邊的中性色），
   (2) summary 文字「本頁段落」對左樹的「說明頁面」，點出「這是本頁內部段落」而不是
   「這是說明區其他頁面」，且 summary 文字顏色用品牌色（左樹面板是一般 ink 色）。
   已知限制：本頁目錄不追蹤捲動位置、不會有「目前讀到哪段」的高亮態。桌面版舊常駐右欄
   原本靠 site-motion.js 的 scrollspy 提供這個效果，但那段 JS 選擇器只認 .art-toc／.toc-mobile，
   這裡是獨立 class 抓不到，要接回去得動 site-motion.js——這次任務範圍只列 page-help.css
   與 11 個 help 頁，沒有動它，這裡先留一句記錄，不是本輪要修的項目。 ---------- */
.help-toc-panel{display:block;margin:0 0 28px;background:var(--brand-tint-2);border:1px solid var(--brand-border);
  border-radius:var(--r-md);padding:0 20px;box-shadow:var(--shadow-sm)}
.help-toc-panel summary{list-style:none;cursor:pointer;padding:16px 0;font-weight:700;color:var(--brand-text);
  font-size:var(--fs-md);display:flex;align-items:center;justify-content:space-between;gap:12px}
.help-toc-panel summary::-webkit-details-marker{display:none}
.help-toc-panel summary::after{content:"";width:9px;height:9px;border:2px solid var(--brand-deep);
  border-top:0;border-left:0;transform:rotate(45deg) translateY(-2px);transition:transform .3s;flex:0 0 auto}
.help-toc-panel[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.help-toc-panel ol{list-style:none;margin:0;padding:0 0 16px;border-left:2px solid var(--brand-border)}
.help-toc-panel a{display:block;padding:6px 0 6px 14px;color:var(--ink-2)}
.help-toc-panel .toc-sub{padding-left:28px;font-size:var(--fs-sm)}
.help-toc-panel .scn-badge{margin-bottom:0}
/* ---------- 2026-08-06 Lucy 裁定：自主紀錄／統計分析／協作課程三頁不要折疊，
   .help-toc-panel 在這三頁改用 <nav><p class="toc-label">…</p></nav> 取代 <details><summary>，
   內容永遠展開。summary 版的樣式（上面幾條）留給還在用 details 版的其他 help 頁，
   這裡另外補一條 .toc-label 版，視覺對齊 summary（同樣的字重／顏色／上下 padding），
   只是拿掉 cursor:pointer 與展開箭頭，因為它不再是可互動元件。 ---------- */
.help-toc-panel > .toc-label{margin:0;padding:16px 0;font-weight:700;color:var(--brand-text);font-size:var(--fs-md)}

/* ---------- faq 頁「還是沒找到答案」包進 .callout 後，裡面的 <p class="note"> 會被
   .callout p{color;margin:0} 蓋掉原本 site.css 的 .note 樣式（faint 色、margin-top 12px），
   這裡補一條加特異度的規則把樣式還回去，文字/內容都不動，純粹修補級聯衝突。 ---------- */
.callout .note{color:var(--faint);margin-top:12px}

/* ---------- 內文跨頁連結（2026-08-06 Lucy 裁定）：FAQ 答案（.ans）與 help 內文段落（p）裡
   連到其他頁的 <a>，原本直接繼承內文黑字，跟一般文字看不出差異、不知道能點。
   這裡只鎖住「文字裡的行內連結」（.art-content 底下的 p／.ans），卡片型連結
   （.feat-grid／.gb-prev／.gb-next／左樹／本頁目錄／.scn-badge 情境清單）各自已有一整塊可點的
   視覺語言，不套用這條，避免多一種樣式互相打架。顏色沿用站內既有的連結色 token
   （--brand-text，跟 .nav-links a:hover／.breadcrumb a:hover 同一顆），底線用 --brand-border
   壓低對比、hover 時加深到 --brand-text，維持讀起來還是內文、不是按鈕。 ---------- */
.art-content p a,.art-content .ans a{color:var(--brand-text);text-decoration:underline;
  text-decoration-color:var(--brand-border);text-underline-offset:2px}
.art-content p a:hover,.art-content .ans a:hover{text-decoration-color:var(--brand-text)}

/* ---------- faq 頁群組標題與出口卡（2026-08-06 Lucy 圈校） ----------
   四顆群組 h2 裸露在 .art-content 裡，吃到 site.css 全域 h2 的 clamp(27px,4vw,46px)，
   在 FAQ 清單裡壓過問題本身；收到 .scn h2 同一階，跟其他 help 頁卡片標題對齊。
   出口卡的 h2 另外吃到 page-article.css 的 .art-content h2 margin-top:52px，
   在 .callout 內側變成卡頂一大截空隙，歸零（卡自身 padding 已足夠）。 ---------- */
.faq-cat{font-size:clamp(20px,2.4vw,26px)}
.help-layout .callout h2{font-size:clamp(20px,2.4vw,26px);margin-top:0}

/* ---------- dark mode ----------
   .scn／.notif／.feat-grid > a／.help-tree-panel 的 #fff 卡片背景，跟卡片內
   var(--ink) 標題／summary 文字，已在上方原地把 token 換成 var(--surface)／
   var(--heading)，light 值不變，dark 自動接上 site.css 的覆寫，這裡不用重複列。
   這裡另外抓到一個既有的配色地雷：.callout-warn 的底色是 var(--warm)，跟
   --brand／--brand-tint 一樣是「永遠不隨主題變」的固定強調色（見 site.css dark
   區塊註解），但它的文字（.callout p／.callout .note）是跟 .callout-info 共用同
   一條規則，用的是會隨主題翻轉的 var(--ink-2)／var(--faint)。.callout-info 底色
   （--brand-tint-2）本身也會跟著翻，兩邊一起變不會壞；.callout-warn 底色不變，
   文字卻在 dark 模式被换成近白色，等於「近白字疊在維持原樣的淺黃底」，會看不清楚。
   固定底色只能配固定文字色，這裡補一條 dark-only 覆寫，把 warn 變體的文字釘回
   不隨主題變的 var(--ink)／原本 light 模式的 --ink-2 相近深度，維持它在任何主題
   下都是「淺黃底配深字」的原始設計意圖。 ---------- */
:root[data-theme="dark"] .callout-warn p{color:var(--ink)}
:root[data-theme="dark"] .callout-warn .note{color:var(--ink-2)}