/* 類別成員：型別卡片內可展開的「成員」區塊；成員卡片縮排、縮小。 */
.card .members { margin-top: 10px }
.card .members > summary { cursor: pointer; color: var(--mut); font-size: 13px; padding: 4px 0 }
.card .members > summary:hover { color: var(--accent) }
.card.member { margin: 8px 0 8px 16px; padding: 12px 14px; border-left: 3px solid var(--accent) }
.card.member h2 { font-size: 15px }
main { max-width: 1100px; margin: auto; padding: 24px 28px 60px }
#hint { margin: 4px 0 0 }
#tabs { display: flex; gap: 8px; margin: 18px 0 6px; flex-wrap: wrap }
#tabs button { white-space: nowrap }
#tabs button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent) }
#message { padding: 6px 0 10px; font-size: 13px }
article.card h2 { margin: 0 0 6px; font-size: 19px; line-height: 1.35 }
article.card h2 a { color: var(--fg); text-decoration: none }
article.card h2 a:hover { color: var(--accent); text-decoration: underline }
.meta { font-size: 12.5px; color: var(--mut); margin-bottom: 8px }
.kind {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 1px 7px; border-radius: 6px; background: var(--code); color: var(--accent); margin-right: 6px;
}
.card dl { display: grid; grid-template-columns: 108px 1fr; gap: 6px 12px; margin: 10px 0 4px }
.card dt { color: var(--mut); font-size: 13px } .card dd { margin: 0 }
.card h3 { font-size: 13px; color: var(--mut); margin: 14px 0 6px; text-transform: none }
.doc { line-height: 1.6 } .doc p { margin: .3em 0 } .doc ul { margin: .3em 0; padding-left: 1.3em }
/* 符號註釋：描述／參數表／回傳／其他標籤（由 renderDoc 產生）。 */
.doc .doc-desc > :first-child { margin-top: 0 }
.docparams { border-collapse: collapse; width: 100%; margin: 6px 0; font-size: 13px }
.docparams th, .docparams td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top }
.docparams th { color: var(--mut); font-weight: 600; background: var(--code) }
.docparams td code { font-size: 12px }
.docreturns, .doctag { margin: .35em 0; font-size: 13px }
.docreturns .lbl, .doctag .lbl { color: var(--mut); margin-right: 6px; font-weight: 600 }
.doctag .lbl { font-family: ui-monospace, Consolas, "Courier New", monospace }
.files a { display: inline-block; margin: 0 12px 6px 0 }
.preview { font: 13px/1.6 ui-monospace, Consolas, "Courier New", monospace; color: var(--mut); white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 0 }
/* 靜態首頁的文件搜尋；只過濾 .doc-section，不動功能區。 */
.docsearch { margin: 10px 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.docsearch input[type="search"] { width: min(420px, 100%) }
.doc-section[hidden] { display: none }

/* 文件分組：色點＋標題＋數量＋備註；顏色為固定色票（明暗主題共用）。 */
.docgroup { display: flex; align-items: baseline; gap: 8px; margin: 26px 0 10px; font-size: 16px; flex-wrap: wrap }
.docgroup:first-child { margin-top: 8px }
.docgroup .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--doc-color); align-self: center; flex: none }
.docgroup .gtitle { font-weight: 700 }
.docgroup .count, .docgroup .gnote { color: var(--mut); font-size: 12.5px; font-weight: 400 }
.docnote { font-size: 13px; color: var(--fg); margin: 2px 0 6px }
.docwarn { border: 1px solid var(--warn); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; font-size: 13px; color: var(--warn) }
.docwarn ul { margin: 4px 0 0; padding-left: 1.2em }
pre.blob { background: var(--code); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; overflow: auto; font-size: 12.5px; line-height: 1.55 }
.deps { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin-top: 6px }
.deps code { font-size: 12.5px }
@media (max-width: 640px) {
  main { padding: 16px 16px 48px }
  .card dl { grid-template-columns: 1fr }
  .card dt { font-weight: 700 }
}

/* 「API 宣告」篩選列。 */
#filters { margin: 4px 0 10px; display: flex; flex-direction: column; gap: 6px }
#filters .supported { font-size: 12.5px; color: var(--mut); overflow-wrap: anywhere }
#filters .chips { display: flex; flex-wrap: wrap; gap: 6px 8px }
#filters .chip.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent) }
#filters .chip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--doc-color); margin-right: 6px; vertical-align: middle }
#filters .kindfilter { font-size: 13px; color: var(--mut) }
#filters .kindfilter select { width: auto; margin-left: 6px }

/* API 頁：檔案層級的 lazy 折疊；展開時才上色／渲染註釋。 */
.symtools { display: flex; gap: 8px; margin: 8px 0 12px; flex-wrap: wrap }
details.symgroup { border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; background: var(--card); overflow: hidden }
details.symgroup > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; display: flex; align-items: baseline; gap: 8px }
details.symgroup > summary:hover { background: var(--line2) }
details.symgroup > summary .sfile { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 13px; overflow-wrap: anywhere }
details.symgroup > summary .count { color: var(--mut); font-size: 12px; font-weight: 400 }
details.symgroup[open] > summary { border-bottom: 1px solid var(--line2) }
details.symgroup .syms { padding: 10px 12px 12px }
details.symgroup .syms .card { margin: 8px 0 }

/* 符號簽名列：等寬、可換行、深淺色一致。 */
.sig {
  margin: 6px 0 10px; padding: 9px 12px; border-radius: 10px;
  background: var(--code); border: 1px solid var(--line);
  color: var(--fg); font-size: 12.5px; white-space: pre-wrap;
  word-break: break-word; overflow-x: auto;
}

/* 近期改動：提交卡片與差異檢視。 */
.commits { display: flex; flex-direction: column; gap: 6px }
/* 近期改動列表：每筆 commit 一列，連到各自的 diff 頁。 */
.commit-list { display: flex; flex-direction: column; gap: 4px }
.commit-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
  padding: 8px 10px; border: 1px solid var(--line2); border-radius: 8px;
  color: var(--fg); text-decoration: none; background: var(--bg);
}
.commit-row:hover { background: var(--line2); border-color: var(--line) }
.commit-row .commit-top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap }
.commit-row .hash { color: var(--accent); font-size: 12.5px; background: none; padding: 0 }
.commit-row .when { color: var(--mut); font-size: 12px; white-space: nowrap }
.commit-row .subject { font-weight: 600; flex: 1 1 240px; overflow-wrap: anywhere }
.commit-row .files { width: 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--mut); font-size: 12px }
.commit { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg) }
.commit-head {
  display: flex; flex-direction: column; gap: 3px; align-items: stretch; width: 100%;
  text-align: left; background: transparent; border: 0; border-radius: 0; padding: 8px 12px;
}
.commit-head:hover { background: var(--line2) }
.commit-top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap }
.commit-head .hash { color: var(--accent); font-size: 12.5px; background: none; padding: 0 }
.commit-head .when { color: var(--mut); font-size: 12px; white-space: nowrap }
.commit-head .subject { font-weight: 600; white-space: normal; overflow-wrap: anywhere }
.commit-files { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 7px 12px; border-top: 1px solid var(--line2) }
.commit-files a.cfile { font-size: 12px; color: var(--mut) }
.commit-files a.cfile:hover { color: var(--accent) }
.wt-wrap { margin: 6px 0 2px }
.commit .diff, .wt-wrap .diff { padding: 8px 12px 10px }

/* 統一分歧（unified diff）：等寬、可橫向捲動，+／- 綠紅底色。 */
.dpre {
  margin: 0; background: var(--code); border: 1px solid var(--line); border-radius: 10px;
  overflow: auto; padding: 8px 0; white-space: pre;
  font: 12.5px/1.55 ui-monospace, Consolas, "Courier New", monospace;
}
.dline { display: block; padding: 0 12px }
.dmark { display: inline-block; width: 1.3em; color: var(--mut); user-select: none }
.d-add { background: rgba(16, 185, 129, .14) }
.d-del { background: rgba(239, 68, 68, .13) }
.d-add .dmark { color: #059669 } .d-del .dmark { color: #dc2626 }
.d-hunk { color: #8b5cf6; background: rgba(139, 92, 246, .08) }
.d-file { color: var(--mut); font-weight: 600 }
.d-meta { color: var(--mut) }

/* 靜態匯出：<details class="commit">（動態版用 button.commit-head，故這些規則不衝突）。 */
details.commit > summary { padding: 8px 12px; cursor: pointer }
details.commit > summary::marker { color: var(--mut) }
details.commit > summary:hover { background: var(--line2) }
details.commit > summary .cbody { display: block }
details.commit > summary .commit-top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap }
details.commit > summary .hash { color: var(--accent); font-size: 12.5px; background: none; padding: 0 }
details.commit > summary .when { color: var(--mut); font-size: 12px; white-space: nowrap }
details.commit > summary .subject { display: block; font-weight: 600; white-space: normal; overflow-wrap: anywhere }
details.commit > .commit-files { border-top: 1px solid var(--line2) }
details.commit > .dpre { margin: 8px 12px 10px }

/* ── 開發索引：可捲動時的導覽強化 ── */

/* 分頁列固定在上方，捲到哪都按得到。 */
#tabs {
  position: sticky; top: var(--appbar-h, 52px); z-index: 6;
  background: var(--hdr); backdrop-filter: blur(8px);
  padding: 8px 0; margin: 12px 0 2px;
}
/* 篩選列不固定：往下捲時讓它捲出，避免 appbar＋分頁＋篩選三層吃掉太多高度。 */
#filters {
  background: var(--bg); padding: 6px 0 8px;
}
#filters .frow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px }
#filters .groupfilter { font-size: 13px; color: var(--mut) }
#filters .groupfilter select { width: auto; margin-left: 6px }

/* 依檔案分組的 sticky 小標題（滑動時知道在哪個檔案）。 */
h3.group {
  position: sticky; top: calc(var(--appbar-h, 52px) + var(--tabs-h, 44px)); z-index: 4;
  margin: 16px 0 6px; padding: 4px 0;
  font-size: 13px; color: var(--mut);
  background: var(--bg); border-bottom: 1px solid var(--line2);
}

/* 回到頂端鈕。 */
#totop {
  position: fixed; right: 20px; bottom: 20px; z-index: 20;
  width: 42px; height: 42px; border-radius: 50%; font-size: 18px; cursor: pointer;
  background: var(--card); color: var(--fg); border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
#totop:hover { color: var(--accent); border-color: var(--accent) }

/* 待辦頁：進度、篩選與唯讀任務清單。 */
.todo-main { max-width: 900px; margin: 0 auto; padding: 18px 16px 64px }
.todo-head { margin-top: 0 }
.todo-progress { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden }
.todo-progress span { display: block; height: 100%; background: var(--accent) }
.todo-meta { margin-top: 8px; color: var(--mut); font-size: 13px }
.todo-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 }
.todo-tools input[type="search"] { width: min(320px, 100%) }
.todo-section { margin: 16px 0 }
.todo-section h2 { font-size: 16px; margin: 0 0 6px }
.todo-section .count { color: var(--mut); font-size: 13px; font-weight: 400 }
.todo-section ul { list-style: none; margin: 0; padding: 0 }
.todo-item { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--line2) }
.todo-item:last-child { border-bottom: 0 }
.todo-item .tick { flex: 0 0 18px; width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--accent-fg); margin-top: 2px }
.todo-item.done .tick { background: var(--accent); border-color: var(--accent) }
.todo-item.done .label { color: var(--mut); text-decoration: line-through }
.todo-item .label { overflow-wrap: anywhere }
.todo-item.depth-1 { margin-left: 18px }
.todo-item.depth-2 { margin-left: 36px }
.todo-item.depth-3 { margin-left: 54px }
.todo-item.depth-4 { margin-left: 72px }
.todo-item.depth-5 { margin-left: 90px }
/* hidden 屬性要勝過 .todo-item 的 display:flex，否則篩選只改屬性、畫面不變。 */
.todo-item[hidden], .todo-section[hidden], #todo-empty[hidden] { display: none }

/* 待辦更新提示（右下／底部置中，不打斷操作）。 */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--accent); color: var(--accent-fg); padding: 10px 16px; border-radius: 999px; box-shadow: var(--shadow); z-index: 30; font-size: 13px; max-width: min(90vw, 520px); text-align: center }
.toast[hidden] { display: none }

/* TODO 分類索引：可點的大分類 chips，與篩選／搜尋同步隱藏。 */
.todo-index { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px }
.todo-index a { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg); text-decoration: none; font-size: 13px }
.todo-index a:hover { border-color: var(--accent) }
.todo-index a.on { border-color: var(--accent); color: var(--accent); background: var(--line2) }
.todo-index a .count { color: var(--mut); font-size: 12px }
.todo-index a[hidden] { display: none }
.todo-section { scroll-margin-top: 80px }

/* 分類索引：收在 sticky appbar 的下拉，捲到任何位置都能換分類。 */
.appbar .todo-index-wrap { position: relative; margin: 0; border: 0; background: transparent }
.appbar .todo-index-wrap > summary { list-style: none; cursor: pointer; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; color: var(--fg); white-space: nowrap }
.appbar .todo-index-wrap > summary::-webkit-details-marker { display: none }
.appbar .todo-index-wrap > summary::after { content: " ▾"; color: var(--mut) }
.appbar .todo-index-wrap[open] > summary { border-color: var(--accent) }
.appbar .todo-index-wrap #todo-index { position: absolute; top: calc(100% + 6px); right: 0; width: min(520px, calc(100vw - 24px)); max-height: 55vh; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 10px; margin: 0; z-index: 30 }