@charset "utf-8";
/* ==========================================================================
   檔案分析助理 · 主控台（重新設計）
   --------------------------------------------------------------------------
   視覺語彙「青與朱」，延續自現行主控台並收緊語意分工：
     青  --accent  你能操作的東西（按鈕、連結、選取、焦點）
     朱  --annot   只給 AI 自己的聲音（導讀、建議的問題、報告批註），用楷體
     印  --seal    品牌的章；與「朱」脫鉤，可單獨換成客戶的品牌色
     警示 --warn / 危險 --danger 自成一組，不借用朱
   字體四軌：黑體＝介面 · 明體＝文件與報告 · 楷體＝AI 的批註 · Mono＝數字與程式碼
   ========================================================================== */

/* -- 代幣 ----------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* 紙與墨 */
  --paper: #f1f4f2;
  --surface: #ffffff;
  --sunken: #e8ece9;
  --rule: #d3dad6;
  --rule-soft: #e3e8e5;
  --ink: #17201c;
  --ink-2: #4a5751;
  --ink-3: #626d67;

  /* 青：可以操作的 */
  --accent: #0d6b62;
  --accent-strong: #09524b;
  --accent-soft: #dcefe9;
  --on-accent: #ffffff;

  /* 朱：只給 AI 的聲音 */
  --annot: #c23b2a;
  --annot-soft: #fbebe6;
  --on-annot: #ffffff;

  /* 印：品牌的章（可單獨換色） */
  --seal: #c23b2a;
  --on-seal: #ffffff;

  /* 狀態 */
  --ok: #1f6b40;
  --ok-soft: #e1f2e7;
  --warn: #7a5000;
  --warn-soft: #fff4d6;
  --warn-rule: #ecd398;
  --danger: #a3241b;
  --danger-soft: #fdecea;
  --danger-rule: #f0bdb8;

  /* 圖表（一個量＝一個顏色；多系列才依序取用） */
  --s1: #0d6b62;
  --s2: #2f5d9e;
  --s3: #a06a1f;
  --s4: #6d4a8f;
  --s5: #9c3a53;

  /* 程式碼 */
  --hl-keyword: #8a2f9c;
  --hl-string: #0b7a53;
  --hl-number: #a04b0a;
  --hl-title: #1f5fae;
  --hl-builtin: #0a6c8f;

  /* 間距節奏（4px） */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* 圓角 */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-seal: 5px;

  /* 動態 */
  --t-state: 160ms;
  --t-move: 260ms;
  --t-exit: 170ms;
  --ease-in-: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);

  --shadow: 0 1px 2px rgb(23 32 28 / 0.05), 0 2px 8px rgb(23 32 28 / 0.04);
  --shadow-pop: 0 12px 40px rgb(23 32 28 / 0.16);

  /* 字體 */
  --font-sans: 'PingFang TC', 'Noto Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', system-ui, sans-serif;
  --font-serif: 'Songti TC', 'Noto Serif TC', 'Noto Serif CJK TC', 'Source Han Serif TC', 'PMingLiU', serif;
  --font-kai: 'Kaiti TC', 'BiauKai', 'DFKai-SB', '標楷體', 'TW-Kai', 'AR PL UKai TW', 'STKaiti', serif;
  --font-mono: ui-monospace, 'SF Mono', 'IBM Plex Mono', Menlo, Consolas, 'PingFang TC', monospace;

  --nav-w: 244px;
}

/* 暗色：獨立定義一組值，不從亮色推導 --------------------------------------- */
:root {
  --d-paper: #0f1513;    --d-surface: #161e1b;  --d-sunken: #1c2622;
  --d-rule: #2f3c36;     --d-rule-soft: #242f2b;
  --d-ink: #e5ebe8;      --d-ink-2: #a8b5af;    --d-ink-3: #85938d;
  --d-accent: #5cc7b6;   --d-accent-strong: #8adccf; --d-accent-soft: #15332f; --d-on-accent: #0b1513;
  --d-annot: #f07a62;    --d-annot-soft: #3a201b; --d-on-annot: #2a100a;
  --d-seal: #f07a62;     --d-on-seal: #2a100a;
  --d-ok: #6fd39c;       --d-ok-soft: #14301f;
  --d-warn: #f2d48a;     --d-warn-soft: #2e2510; --d-warn-rule: #5a4717;
  --d-danger: #ffb4ab;   --d-danger-soft: #331a1a; --d-danger-rule: #6b2c2b;
  --d-s1: #5cc7b6; --d-s2: #86aef0; --d-s3: #dfa95c; --d-s4: #bb9ae0; --d-s5: #e8899f;
  --d-hl-keyword: #d3a6ff; --d-hl-string: #7ee2b0; --d-hl-number: #f5b56b;
  --d-hl-title: #8fb0ff;   --d-hl-builtin: #7fd4ee;
}

/* 一份暗色覆寫，兩個入口共用：系統偏好、或 data-theme="dark" 明確指定 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: var(--d-paper); --surface: var(--d-surface); --sunken: var(--d-sunken);
    --rule: var(--d-rule); --rule-soft: var(--d-rule-soft);
    --ink: var(--d-ink); --ink-2: var(--d-ink-2); --ink-3: var(--d-ink-3);
    --accent: var(--d-accent); --accent-strong: var(--d-accent-strong);
    --accent-soft: var(--d-accent-soft); --on-accent: var(--d-on-accent);
    --annot: var(--d-annot); --annot-soft: var(--d-annot-soft); --on-annot: var(--d-on-annot);
    --seal: var(--d-seal); --on-seal: var(--d-on-seal);
    --ok: var(--d-ok); --ok-soft: var(--d-ok-soft);
    --warn: var(--d-warn); --warn-soft: var(--d-warn-soft); --warn-rule: var(--d-warn-rule);
    --danger: var(--d-danger); --danger-soft: var(--d-danger-soft); --danger-rule: var(--d-danger-rule);
    --s1: var(--d-s1); --s2: var(--d-s2); --s3: var(--d-s3); --s4: var(--d-s4); --s5: var(--d-s5);
    --hl-keyword: var(--d-hl-keyword); --hl-string: var(--d-hl-string); --hl-number: var(--d-hl-number);
    --hl-title: var(--d-hl-title); --hl-builtin: var(--d-hl-builtin);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.34);
    --shadow-pop: 0 12px 40px rgb(0 0 0 / 0.5);
  }
}

:root[data-theme='dark'] {
  --paper: var(--d-paper); --surface: var(--d-surface); --sunken: var(--d-sunken);
  --rule: var(--d-rule); --rule-soft: var(--d-rule-soft);
  --ink: var(--d-ink); --ink-2: var(--d-ink-2); --ink-3: var(--d-ink-3);
  --accent: var(--d-accent); --accent-strong: var(--d-accent-strong);
  --accent-soft: var(--d-accent-soft); --on-accent: var(--d-on-accent);
  --annot: var(--d-annot); --annot-soft: var(--d-annot-soft); --on-annot: var(--d-on-annot);
  --seal: var(--d-seal); --on-seal: var(--d-on-seal);
  --ok: var(--d-ok); --ok-soft: var(--d-ok-soft);
  --warn: var(--d-warn); --warn-soft: var(--d-warn-soft); --warn-rule: var(--d-warn-rule);
  --danger: var(--d-danger); --danger-soft: var(--d-danger-soft); --danger-rule: var(--d-danger-rule);
  --s1: var(--d-s1); --s2: var(--d-s2); --s3: var(--d-s3); --s4: var(--d-s4); --s5: var(--d-s5);
  --hl-keyword: var(--d-hl-keyword); --hl-string: var(--d-hl-string); --hl-number: var(--d-hl-number);
  --hl-title: var(--d-hl-title); --hl-builtin: var(--d-hl-builtin);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.34);
  --shadow-pop: 0 12px 40px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}
:root[data-theme='light'] { color-scheme: light; }

/* -- 基礎 ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; line-height: 1.4; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; }
button:not(:disabled), summary, label[for], [role='button'] { cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
svg { display: block; }
table { border-collapse: collapse; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--accent-soft); color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: 90;
  transform: translateY(-200%);
  border-radius: var(--r-md); background: var(--accent); color: var(--on-accent);
  padding: var(--sp-2) var(--sp-4); font-size: 14px; font-weight: 600;
  transition: transform var(--t-state) var(--ease-out);
}
.skip-link:focus { transform: none; text-decoration: none; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.kai { font-family: var(--font-kai); }
.serif { font-family: var(--font-serif); }
.muted { color: var(--ink-2); }
.quiet { color: var(--ink-3); }

/* -- 按鈕 ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 36px;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  padding: 6px var(--sp-3);
  font-size: 14px; font-weight: 500; line-height: 1.35;
  white-space: nowrap;
  transition: background-color var(--t-state), border-color var(--t-state), color var(--t-state);
}
.btn > svg { flex: none; width: 17px; height: 17px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
@media (hover: hover) {
  .btn:hover:not(:disabled) { border-color: var(--ink-3); background: var(--sunken); }
}
.btn--primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
@media (hover: hover) {
  .btn--primary:hover:not(:disabled) { border-color: var(--accent-strong); background: var(--accent-strong); color: var(--on-accent); }
}
.btn--quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
@media (hover: hover) {
  .btn--quiet:hover:not(:disabled) { border-color: transparent; background: var(--sunken); color: var(--ink); }
}
.btn--danger { color: var(--danger); }
@media (hover: hover) {
  .btn--danger:hover:not(:disabled) { border-color: var(--danger-rule); background: var(--danger-soft); color: var(--danger); }
}
.btn--sm { min-height: 30px; border-radius: var(--r-sm); padding: 2px var(--sp-2); font-size: 13px; }
.btn--icon { min-width: 36px; padding-inline: 7px; }
.btn--sm.btn--icon { min-width: 30px; padding-inline: 5px; }
.btn--block { width: 100%; }

/* -- 輸入 ----------------------------------------------------------------- */
.od-field > .label { margin: 0; }
.label { display: block; margin-bottom: var(--sp-1); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.label .req { color: var(--danger); font-weight: 700; }
.field {
  width: 100%; min-height: 38px;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  padding: 7px var(--sp-3);
  font-size: 14px; line-height: 1.5;
  transition: border-color var(--t-state), box-shadow var(--t-state);
}
.field::placeholder { color: var(--ink-3); }
.field:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.field:disabled { background: var(--sunken); color: var(--ink-3); cursor: not-allowed; }
textarea.field { min-height: 88px; resize: vertical; }
select.field { appearance: none; padding-right: var(--sp-6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.hint { margin-top: var(--sp-1); font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.err {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: var(--sp-1); font-size: 13px; line-height: 1.55; color: var(--danger);
}
.err > svg { flex: none; width: 15px; height: 15px; margin-top: 3px; }
.field[aria-invalid='true'] { border-color: var(--danger); }
.field[aria-invalid='true']:focus { box-shadow: 0 0 0 3px var(--danger-soft); }

.switch { display: inline-flex; align-items: center; gap: var(--sp-3); }
.switch > input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; }
.switch > .track {
  position: relative; flex: none; width: 44px; height: 26px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--sunken);
  transition: background-color var(--t-state), border-color var(--t-state);
}
.switch > .track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--surface); box-shadow: var(--shadow);
  transition: transform var(--t-state) var(--ease-out);
}
.switch > input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch > input:checked + .track::after { transform: translateX(18px); background: var(--on-accent); }
.switch > input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch > input:disabled + .track { opacity: 0.45; }

/* 會跟著內容長高的輸入框 */
.autogrow { display: grid; }
.autogrow::after { content: attr(data-value) ' '; visibility: hidden; white-space: pre-wrap; overflow: hidden; }
.autogrow > textarea, .autogrow::after {
  grid-area: 1 / 1 / 2 / 2; max-height: 192px; min-width: 0;
  overflow-wrap: anywhere; font: inherit; line-height: 1.6; padding: var(--sp-1) 0;
}
.autogrow > textarea { resize: none; overflow-y: auto; border: 0; background: none; outline: none; }
.autogrow > textarea::placeholder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -- 版面元件 -------------------------------------------------------------- */
.card { border: 1px solid var(--rule-soft); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.card--pad { padding: var(--sp-5); }
a.card, button.card { display: block; text-align: left; color: inherit; text-decoration: none; transition: border-color var(--t-state); }
@media (hover: hover) {
  a.card:hover, button.card:hover { border-color: var(--accent); text-decoration: none; }
}

.eyebrow {
  display: block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-3);
}

.chip {
  display: inline-flex; max-width: 100%; align-items: center; gap: 6px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface);
  padding: 3px var(--sp-3); font-size: 13px; line-height: 1.5; color: var(--ink-2);
  transition: border-color var(--t-state), color var(--t-state), background-color var(--t-state);
}
.chip > svg { flex: none; width: 14px; height: 14px; }
button.chip { color: var(--ink-2); }
@media (hover: hover) {
  button.chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
}
button.chip:disabled { opacity: 0.45; cursor: not-allowed; }

.seg { display: inline-flex; gap: 2px; border-radius: 10px; background: var(--sunken); padding: 3px; }
.seg > button {
  border-radius: 7px; padding: 4px var(--sp-3); font-size: 13px; font-weight: 500; color: var(--ink-2);
  transition: background-color var(--t-state), color var(--t-state);
}
@media (hover: hover) { .seg > button:hover { color: var(--ink); } }
.seg > button[aria-pressed='true'] { background: var(--surface); font-weight: 700; color: var(--ink); box-shadow: var(--shadow); }

/* 印：一個字，說明這一段是什麼 */
.seal {
  display: inline-grid; place-items: center; flex: none;
  width: 24px; height: 24px;
  border: 1.5px solid currentColor; border-radius: var(--r-seal);
  background: var(--surface);
  font-family: var(--font-serif); font-size: 13px; font-weight: 700; line-height: 1;
  color: var(--ink-2); user-select: none;
}
.seal--red { background: var(--seal); border-color: var(--seal); color: var(--on-seal); }
.seal--annot { background: var(--annot); border-color: var(--annot); color: var(--on-annot); }
.seal--alert { color: var(--danger); border-color: var(--danger-rule); background: var(--danger-soft); }
.seal--lg { width: 34px; height: 34px; border-radius: 7px; font-size: 19px; font-weight: 900; }
.seal--sm { width: 20px; height: 20px; border-radius: 4px; font-size: 11px; }

/* 朱批：AI 寫給你的東西 */
.annot { border-left: 2px solid var(--annot); padding-left: var(--sp-4); }
.annot__mark {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-kai); font-size: 16px; font-weight: 700; letter-spacing: 0.06em; color: var(--annot);
}
.annot__mark::before {
  content: attr(data-seal); flex: none;
  display: inline-grid; place-items: center; width: 21px; height: 21px;
  border-radius: 4px; background: var(--annot); color: var(--on-annot);
  font-size: 13px; font-weight: 700;
}
.annot__text { font-family: var(--font-kai); font-size: 17px; line-height: 1.8; color: var(--ink); }
.annot__text--sm { font-size: 16px; line-height: 1.75; }

/* 建議的問題：一行一個，點了就問 */
.ask {
  display: flex; width: 100%; align-items: baseline; gap: var(--sp-2);
  border-radius: var(--r-md); padding: 6px var(--sp-2) 6px 6px;
  text-align: left; font-size: 15px; line-height: 1.55; color: var(--ink);
  transition: background-color var(--t-state);
}
.ask::before { content: '›'; flex: none; font-weight: 700; color: var(--annot); }
@media (hover: hover) { .ask:hover:not(:disabled) { background: var(--annot-soft); } }
.ask:disabled { opacity: 0.5; cursor: not-allowed; }

/* 狀態徽章：顏色之外一定有文字 */
.state {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface);
  padding: 1px var(--sp-2); font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--ink-2);
}
.state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.state--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--rule)); background: var(--ok-soft); }
.state--run { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--rule)); background: var(--accent-soft); }
.state--wait { color: var(--ink-2); background: var(--sunken); }
.state--warn { color: var(--warn); border-color: var(--warn-rule); background: var(--warn-soft); }
.state--bad { color: var(--danger); border-color: var(--danger-rule); background: var(--danger-soft); }
.state--run::before { animation: pulse 1.6s ease-in-out infinite; }

.spinner {
  width: 1em; height: 1em; flex: none;
  border: 2px solid var(--rule); border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--sunken) 25%, var(--rule-soft) 50%, var(--sunken) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite;
}

.notice {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--sunken);
  padding: var(--sp-3) var(--sp-4); font-size: 14px; line-height: 1.6; color: var(--ink-2);
}
.notice > svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.notice--warn { border-color: var(--warn-rule); background: var(--warn-soft); color: var(--warn); }
.notice--bad { border-color: var(--danger-rule); background: var(--danger-soft); color: var(--danger); }
.notice--annot { border-color: color-mix(in srgb, var(--annot) 30%, var(--rule)); background: var(--annot-soft); color: var(--ink); }

@media (hover: hover) {
  .reveal { opacity: 0; transition: opacity var(--t-state); }
  .group:hover .reveal, .group:focus-within .reveal, .reveal:focus-visible { opacity: 1; }
}

/* -- 動畫 ----------------------------------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ==========================================================================
   外框：側邊欄 ＋ 主區。側邊欄固定，主區自己捲動。
   ========================================================================== */
html, body { height: 100%; }
.app { display: flex; height: 100dvh; overflow: hidden; }

.sidebar {
  display: flex; flex-direction: column; flex: none;
  width: var(--nav-w); height: 100dvh;
  border-right: 1px solid var(--rule-soft); background: var(--surface);
}
.sidebar__brand { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-4) var(--sp-4); }
.sidebar__nav { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--sp-3) var(--sp-4); }
.sidebar__foot { border-top: 1px solid var(--rule-soft); padding: var(--sp-3) var(--sp-4); }

.nav-group + .nav-group { margin-top: var(--sp-5); }
.nav-group__title { padding: 0 var(--sp-2) 6px; }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  border-radius: var(--r-md); padding: 8px var(--sp-2);
  font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none;
  transition: background-color var(--t-state), color var(--t-state);
}
.nav-item > svg { flex: none; width: 18px; height: 18px; }
.nav-item > .count { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
@media (hover: hover) {
  .nav-item:hover { background: var(--sunken); color: var(--ink); text-decoration: none; }
}
.nav-item[aria-current='page'] { background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
.nav-item[aria-current='page'] > .count { color: var(--accent-strong); }

.main { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.topbar {
  display: none; align-items: center; gap: var(--sp-3);
  border-bottom: 1px solid var(--rule-soft); background: var(--surface); padding: var(--sp-2) var(--sp-3);
}
/* .view 不自己捲動：由當下的畫面決定要整頁捲（一般頁）還是分區捲（工作區） */
.view { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.screen { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.screen--fixed { overflow: hidden; }
.scrim {
  position: fixed; inset: 0; z-index: 30;
  background: rgb(15 21 19 / 0.5); backdrop-filter: blur(2px);
  animation: fade var(--t-move) var(--ease-out);
}

@media (max-width: 1023px) {
  .sidebar {
    position: fixed; inset-block: 0; left: 0; z-index: 40;
    box-shadow: var(--shadow-pop);
    transform: translateX(-100%);
    transition: transform var(--t-move) var(--ease-out);
  }
  .app.nav-open .sidebar { transform: none; }
  .topbar { display: flex; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
  .app:not(.nav-open) .sidebar { transition-duration: var(--t-exit); transition-timing-function: var(--ease-in-); }
}

/* -- 頁面骨架 -------------------------------------------------------------- */
.page { max-width: 1120px; margin-inline: auto; padding: var(--sp-7) var(--sp-5) var(--sp-8); }
.page--wide { max-width: 1320px; }
.page--narrow { max-width: 820px; }
.page__head {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.page__head > .od-fill { flex: 1 1 320px; }
.page__title { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.page__desc { margin-top: 6px; max-width: 70ch; font-size: 15px; color: var(--ink-2); }
.section { margin-top: var(--sp-7); }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.rule { border: 0; border-top: 1px solid var(--rule-soft); }

/* -- 分頁殼（設定／系統／分析工作區）---------------------------------------- */
.tabs {
  display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--rule);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex; align-items: center; gap: 6px; flex: none;
  margin-bottom: -1px; border-bottom: 2px solid transparent;
  padding: 9px var(--sp-3);
  font-size: 14.5px; font-weight: 600; color: var(--ink-2); text-decoration: none;
  transition: color var(--t-state), border-color var(--t-state);
}
.tab > svg { width: 16px; height: 16px; }
.tab > .count { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink-3); }
@media (hover: hover) { .tab:hover { color: var(--ink); text-decoration: none; } }
.tab[aria-current] { color: var(--accent); border-bottom-color: var(--accent); }
.tab[aria-current] > .count { color: var(--accent); }

/* -- 空白、載入、錯誤 ------------------------------------------------------- */
.empty {
  display: flex; flex-direction: column; align-items: center;
  border: 1px solid var(--rule-soft); border-radius: var(--r-lg); background: var(--surface);
  padding: var(--sp-8) var(--sp-5); text-align: center;
}
.empty__icon {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
}
.empty__icon > svg { width: 24px; height: 24px; }
.empty__title { margin-top: var(--sp-4); font-size: 16px; font-weight: 600; }
.empty__text { margin-top: 6px; max-width: 52ch; font-size: 14px; color: var(--ink-2); }
.loading { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-8) 0; font-size: 14px; color: var(--ink-3); }

/* -- 表格 ----------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); }
.table { width: 100%; font-size: 14px; }
.table th { background: var(--sunken); text-align: left; font-weight: 700; white-space: nowrap; color: var(--ink-2); }
.table th, .table td { border-bottom: 1px solid var(--rule-soft); padding: 10px var(--sp-4); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .table tbody tr:hover td { background: var(--paper); } }

/* -- 檔案列 --------------------------------------------------------------- */
.file-row {
  display: flex; align-items: center; gap: var(--sp-3);
  border: 1px solid var(--rule-soft); border-radius: var(--r-md); background: var(--surface);
  padding: 8px var(--sp-3); text-align: left; width: 100%; color: inherit;
}
.file-row > svg { flex: none; width: 19px; height: 19px; color: var(--ink-3); }
@media (hover: hover) { button.file-row:hover, a.file-row:hover { border-color: var(--accent); text-decoration: none; } }

/* -- 上傳區 --------------------------------------------------------------- */
.drop {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  border: 2px dashed var(--rule); border-radius: var(--r-xl); background: var(--surface);
  padding: var(--sp-7) var(--sp-5); text-align: center;
  transition: border-color var(--t-state), background-color var(--t-state);
}
/* 點擊範圍：圖示＋說明都屬於 label，右邊的「從檔案庫選」是它的兄弟節點 */
.drop__main {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  flex: 1 1 auto; min-width: 0; cursor: pointer;
}
.drop__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.drop__icon > svg { width: 26px; height: 26px; }
.drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
@media (hover: hover) { .drop:hover { border-color: var(--accent); } }
@media (min-width: 640px) {
  .drop { flex-direction: row; text-align: left; padding: var(--sp-5); }
  .drop__main { flex-direction: row; }
}

/* ==========================================================================
   依據軌道：分析過程不再收在摺疊區裡。
   印在左側排成時間軸，程式碼、輸出與圖表就地可見。
   ========================================================================== */
.turn + .turn { margin-top: var(--sp-7); }
.turn--you { display: flex; justify-content: flex-end; }
.bubble {
  max-width: min(85%, 60ch);
  border-radius: var(--r-xl); border-top-right-radius: var(--r-sm);
  background: var(--sunken); padding: 10px var(--sp-4);
  font-size: 15.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere;
}
.turn--ai { display: flex; gap: var(--sp-3); align-items: flex-start; }
.turn--ai > .seal { margin-top: 2px; }
.turn__body { display: grid; gap: var(--sp-4); min-width: 0; flex: 1 1 0; }

.evidence { border: 1px solid var(--rule-soft); border-radius: var(--r-lg); background: var(--paper); }
.evidence__head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px var(--sp-3) 8px var(--sp-4); font-size: 14px; color: var(--ink-2);
}
.evidence__head .count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.evidence__list {
  display: grid; gap: var(--sp-5);
  margin: 0 var(--sp-4) 0 26px; border-left: 1px solid var(--rule);
  padding: var(--sp-1) 0 var(--sp-4);
}
.evidence.is-collapsed .evidence__list { display: none; }
.step { position: relative; padding-left: var(--sp-5); animation: rise var(--t-move) var(--ease-out); }
.step > .seal { position: absolute; left: -13px; top: -1px; background: var(--paper); }
.step__title { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; font-weight: 600; }
.step__note { font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.step__out { margin-top: var(--sp-2); }

.refs { border: 1px solid var(--rule-soft); border-radius: var(--r-lg); background: var(--paper); padding: var(--sp-3) var(--sp-4); }
.refs__head { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; color: var(--ink-2); }
.ref { border-left: 2px solid var(--rule); padding-left: var(--sp-3); }
.ref__where { font-size: 13px; color: var(--ink-2); }
.ref__where > b { color: var(--ink); }
.ref__text { margin-top: 2px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }

/* -- 輸入列 --------------------------------------------------------------- */
.composer { border-top: 1px solid var(--rule-soft); background: var(--surface); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.composer__inner { max-width: 760px; margin-inline: auto; }
.composer__box {
  display: flex; align-items: flex-end; gap: var(--sp-2);
  border: 1px solid var(--rule); border-radius: var(--r-xl); background: var(--surface);
  padding: 6px 6px 6px var(--sp-4);
  transition: border-color var(--t-state), box-shadow var(--t-state);
}
.composer__box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer__send { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); transition: background-color var(--t-state); }
.composer__send > svg { width: 18px; height: 18px; }
@media (hover: hover) { .composer__send:hover:not(:disabled) { background: var(--accent-strong); } }
.composer__send:disabled { background: var(--sunken); color: var(--ink-3); cursor: not-allowed; }
.composer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: 6px; padding-inline: var(--sp-2); font-size: 12.5px; color: var(--ink-3); }

/* -- 彈出面板與對話框 ------------------------------------------------------- */
.pop-wrap { position: relative; }
.pop {
  position: absolute; z-index: 50; top: calc(100% + 6px); right: 0;
  width: min(340px, calc(100vw - 32px));
  border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-pop); padding: var(--sp-4);
  animation: rise var(--t-move) var(--ease-out);
}
.pop[hidden] { display: none; }
.pop__title { font-size: 14px; font-weight: 700; margin-bottom: var(--sp-3); }

dialog.modal {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 64px);
  margin: auto; border: 1px solid var(--rule); border-radius: var(--r-xl);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop);
  padding: 0; overflow: hidden;
}
dialog.modal::backdrop { background: rgb(15 21 19 / 0.5); backdrop-filter: blur(2px); }
.modal__head { display: flex; align-items: flex-start; gap: var(--sp-3); border-bottom: 1px solid var(--rule-soft); padding: var(--sp-4) var(--sp-5); }
.modal__body { max-height: 60dvh; overflow-y: auto; padding: var(--sp-5); }
.modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); border-top: 1px solid var(--rule-soft); background: var(--paper); padding: var(--sp-3) var(--sp-5); }

/* -- 程式碼與工具輸出 ------------------------------------------------------- */
.code {
  overflow-x: auto;
  border: 1px solid var(--rule-soft); border-radius: var(--r-md); background: var(--sunken);
  padding: 10px var(--sp-3);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
  tab-size: 4; white-space: pre;
}
.code--bad { border-color: var(--danger-rule); background: var(--danger-soft); color: var(--danger); white-space: pre-wrap; }
.code--out { max-height: 240px; overflow-y: auto; }
.t-kw { color: var(--hl-keyword); }
.t-str { color: var(--hl-string); }
.t-num { color: var(--hl-number); }
.t-fn { color: var(--hl-title); }
.t-bi { color: var(--hl-builtin); }
.t-cm { color: var(--ink-3); font-style: italic; }

/* -- 模型回答的排版 --------------------------------------------------------- */
.md { overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.8; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md .table-wrap { margin: 0.8em 0; }
.md h3 { margin: 1.4em 0 0.5em; font-size: 16px; font-weight: 700; }
.md ul { list-style: disc; padding-left: 1.4em; }
.md ol { list-style: decimal; padding-left: 1.7em; }
.md li { margin: 0.25em 0; }
.md li::marker { color: var(--ink-3); }
.md strong { font-weight: 700; }
.md code { border-radius: 4px; background: var(--sunken); padding: 0.1em 0.35em; font-family: var(--font-mono); font-size: 0.88em; }
.md blockquote { border-left: 3px solid var(--rule); padding-left: 1em; color: var(--ink-2); }

/* -- 報告：文件版面（明體）-------------------------------------------------- */
.doc { font-size: 16px; line-height: 1.85; }
.doc-title { font-family: var(--font-serif); font-size: clamp(26px, 3.2vw, 32px); font-weight: 700; line-height: 1.35; letter-spacing: 0.02em; }
.doc-h2 { display: flex; align-items: baseline; gap: var(--sp-3); font-family: var(--font-serif); font-size: 21px; font-weight: 700; }
.doc-h3 { font-family: var(--font-serif); font-size: 17px; font-weight: 700; }
.doc-sec + .doc-sec { margin-top: var(--sp-7); }
.doc p { margin: var(--sp-3) 0; }
.doc ul { list-style: disc; padding-left: 1.5em; margin: var(--sp-3) 0; }
.doc li { margin: 0.3em 0; }
.doc li::marker { color: var(--ink-3); }
.doc-num { font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--annot); flex: none; }

/* 出處：朱批 */
.cite {
  display: inline-flex; align-items: baseline; gap: 3px; vertical-align: baseline;
  border-radius: 4px; background: var(--annot-soft); padding: 0 5px;
  font-family: var(--font-kai); font-size: 13px; color: var(--annot); white-space: nowrap;
}
.doc-note { border-left: 2px solid var(--annot); padding-left: var(--sp-3); font-family: var(--font-kai); font-size: 16px; line-height: 1.8; color: var(--ink-2); }

.outline { position: sticky; top: var(--sp-5); display: grid; gap: 2px; }
.outline__item {
  display: flex; gap: var(--sp-2); border-left: 2px solid var(--rule-soft);
  padding: 5px var(--sp-3); font-size: 13.5px; color: var(--ink-2); text-decoration: none;
  transition: color var(--t-state), border-color var(--t-state);
}
@media (hover: hover) { .outline__item:hover { color: var(--ink); border-color: var(--rule); text-decoration: none; } }
.outline__item[aria-current] { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* -- 圖表 ----------------------------------------------------------------- */
.figure { border: 1px solid var(--rule-soft); border-radius: var(--r-lg); background: var(--surface); padding: var(--sp-4); }
.figure__cap { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.chart { width: 100%; height: auto; }
.chart text { font-family: var(--font-sans); fill: var(--ink-3); font-size: 12px; }
.chart .ax { stroke: var(--rule); stroke-width: 1; }
.chart .grid { stroke: var(--rule-soft); stroke-width: 1; }
.chart .lbl-ink { fill: var(--ink-2); font-weight: 600; }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: 13px; color: var(--ink-2); }
.legend > li { display: flex; align-items: center; gap: 6px; }
.legend .swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* -- 狀態卡（系統狀態）------------------------------------------------------ */
.health { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; font-weight: 600; }
.health__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.metric { display: grid; gap: 2px; }
.metric__v { font-family: var(--font-mono); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.metric__k { font-size: 12.5px; color: var(--ink-3); }

/* -- 列印：只留報告本身 ----------------------------------------------------- */
@media print {
  :root { color-scheme: light; }
  body { background: #fff; font-size: 11.5pt; }
  .app { display: block; height: auto; overflow: visible; }
  .view, .screen { display: block; overflow: visible; }
  .sidebar, .topbar, .no-print, .composer, .suggest, .tabs { display: none !important; }
  /* 工作區在螢幕上是分區捲動，列印時要攤平成一份文件 */
  .ws, .chat { display: block; height: auto; }
  .ws__panes, .chat__scroll, .figure__scroll, .table-wrap { overflow: visible; }
  .evidence.is-collapsed .evidence__list { display: grid; }
  .code, .code--out { max-height: none; white-space: pre-wrap; }
  .page { max-width: none; padding: 0; }
  .card, .figure, .table-wrap { box-shadow: none; border-color: #ccc; }
  .doc-sec { break-inside: avoid; }
  .figure { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

@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;
  }
}

/* ==========================================================================
   分析工作區：一組檔案一個工作區，導讀／對話／報告是它的三個分頁。
   對話只有一欄（檔案與建議的問題不再需要右側面板，也就不必在窄螢幕重複一份）。
   ========================================================================== */
.ws { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.ws__head { border-bottom: 1px solid var(--rule-soft); background: var(--surface); padding: var(--sp-3) var(--sp-5) 0; }
.ws__crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.ws__crumb a { color: var(--ink-3); }
.ws__crumb a:hover { color: var(--accent); }
.ws__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: 2px 0 var(--sp-3); }
.ws__title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.ws__panes { min-height: 0; overflow-y: auto; }

.chat { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
.chat__scroll { min-height: 0; overflow-y: auto; }
.chat__inner { max-width: 760px; margin-inline: auto; padding: var(--sp-7) var(--sp-5); }
.suggest {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  max-width: 760px; margin-inline: auto; padding: var(--sp-3) var(--sp-5) 0;
}
.suggest__mark { font-family: var(--font-kai); font-size: 15px; font-weight: 700; color: var(--annot); }

/* 導讀分頁的變體：清單在左（助理）、目錄在左（API 文件）。
   兩個都要尊重斷點，不能用內嵌樣式硬撐成兩欄。 */
.insight-layout--list, .insight-layout--nav { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .insight-layout--list { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .insight-layout--nav  { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
}

/* 報告：文件 ＋ 大綱 */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
@media (min-width: 1100px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr) 192px; }
}
.doc-aside { display: none; }
@media (min-width: 1100px) { .doc-aside { display: block; } }

/* 導讀分頁的兩欄 */
.insight-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
@media (min-width: 1024px) {
  .insight-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-7); }
}

/* 柵格輔助：都在 4px 節奏上 */
.g2, .g3, .g4 { display: grid; gap: var(--sp-4); }
@media (min-width: 640px)  { .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px)  { .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px)  { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.screen[hidden] { display: none; }

/* 圖表在窄螢幕不縮字：改成圖本身可以橫向捲動（和表格一樣的處理） */
.figure__scroll { overflow-x: auto; margin-inline: calc(var(--sp-1) * -1); padding-inline: var(--sp-1); }
.figure__scroll > .chart { min-width: 560px; }

/* 抽屜的關閉鈕只在小螢幕出現 */
#nav-close { display: none; }
@media (max-width: 1023px) { #nav-close { display: inline-flex; } }

/* 操作回饋 */
.toast {
  display: flex; align-items: center; gap: var(--sp-2);
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow-pop);
  padding: var(--sp-2) var(--sp-4); font-size: 14px; color: var(--ink);
  animation: rise var(--t-move) var(--ease-out);
}
.toast > svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.toast.is-out { animation: fade var(--t-exit) var(--ease-in-) reverse forwards; }

/* 連結型的卡片／籌碼／列不帶瀏覽器預設的底線 */
code, kbd, samp { font-family: var(--font-mono); }
@media (hover: hover) {
  a.chip:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
  a.od-field:hover { text-decoration: none; background: var(--sunken); }
}

/* 對話分頁要撐滿工作區的高度，輸入列才會固定在底部 */
.ws__panes > [data-pane='chat'] { height: 100%; }

/* ==========================================================================
   v1.1.0 增補：報告段落樣式與檢查帶、個資遮蔽的呈現、鍵值列。
   不擴充色相 —— 個資與檢查一律走 warn / danger / 中性，朱色仍只屬於 AI 的聲音。
   ========================================================================== */

/* -- 鍵值列（狀態卡、偵測模型、變更紀錄都用它）----------------------------- */
.kv { display: flex; align-items: baseline; gap: var(--sp-3); font-size: 13.5px; }
.kv > dt, .kv > .k { flex: 1 1 0; min-width: 0; color: var(--ink-3); }
.kv > dd, .kv > .v { flex: none; margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }

/* -- 已遮蔽的個資：行內一致的標記，不用刪除線也不用色塊 --------------------- */
.mask {
  display: inline-block;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--sunken);
  padding: 0 5px; font-family: var(--font-mono); font-size: 0.86em; color: var(--ink-2);
  white-space: nowrap;
}
/* 「試試看」裡標出的命中位置 */
.hit {
  border-radius: 3px; background: var(--warn-soft);
  box-shadow: inset 0 -1.5px 0 var(--warn-rule);
  padding: 0 2px; color: var(--ink);
}

/* -- 報告檢查帶 ------------------------------------------------------------ */
.checks {
  display: grid; gap: var(--sp-3);
  border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface);
  padding: var(--sp-4);
}
.checks--attention { border-color: var(--warn-rule); background: var(--warn-soft); }
.checks__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.checks__num { display: grid; gap: 2px; }
.checks__num > .n { font-family: var(--font-mono); font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; }
.checks__num > .k { font-size: 12.5px; color: var(--ink-3); }
/* 需人工核對的數字：文件內的可跳轉標記 */
.verify {
  border-bottom: 2px solid var(--warn-rule); background: var(--warn-soft);
  border-radius: 3px 3px 0 0; padding: 0 3px; color: inherit; font: inherit;
}
/* 標籤寫在標記裡，不用 ::after —— 產生內容不是每個螢幕閱讀器都會唸出來 */
.verify__tag { margin-left: 4px; font-family: var(--font-sans); font-size: 11px; font-weight: 700; color: var(--warn); white-space: nowrap; }

/* -- 報告段落的五種樣式 ---------------------------------------------------- */
.doc-lead { font-family: var(--font-serif); font-size: 18px; line-height: 1.85; }
.doc-metrics { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: var(--sp-4) 0; }
.doc-metric {
  display: grid; gap: 2px;
  border: 1px solid var(--rule-soft); border-radius: var(--r-md); background: var(--surface);
  padding: var(--sp-3) var(--sp-4);
}
.doc-metric > .n { font-family: var(--font-mono); font-size: 21px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-metric > .k { font-size: 12.5px; color: var(--ink-3); }
.doc-metric > .d { font-size: 12.5px; }
.doc-alert {
  border: 1px solid var(--warn-rule); border-left-width: 3px; border-radius: var(--r-md);
  background: var(--warn-soft); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0;
}
.doc-alert--ok { border-color: color-mix(in srgb, var(--ok) 35%, var(--rule)); background: var(--ok-soft); }

/* 段落狀態：未撰寫 / 無異常 / 範本以外的延伸段落 —— 都有文字，不只靠顏色 */
.sec-tag {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px dashed var(--rule); border-radius: 999px; background: var(--sunken);
  padding: 1px var(--sp-2); font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.doc-sec--missing { opacity: 0.72; }
.doc-sec--extra { border-left: 2px solid var(--rule); padding-left: var(--sp-4); }

/* -- 技能的做法：Markdown 區塊在編輯器裡的預覽 ------------------------------ */
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* -- 揭露元件（details）：隱藏原生標記、箭頭隨開合轉向 --------------------- */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ''; }
.chev, .chev-r { transition: transform var(--t-state) var(--ease-out); }
details[open] > summary .chev { transform: rotate(180deg); }
details[open] > summary .chev-r { transform: rotate(90deg); }
@media (hover: hover) {
  summary:hover { background: var(--paper); }
  .refs > summary:hover, .card > summary:hover { border-radius: var(--r-lg); }
}

/* ==========================================================================
   API 文件：方法徽章、端點卡、欄位表、範例分頁。
   方法用既有代幣分級，不另開色相；方法名稱本身是文字，顏色只是輔助。
   ========================================================================== */
.meth {
  display: inline-grid; place-items: center; flex: none;
  min-width: 62px;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--sunken); color: var(--ink-2);
  padding: 2px 6px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
}
.meth--post   { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.meth--patch  { border-color: var(--warn-rule); background: var(--warn-soft); color: var(--warn); }
.meth--delete { border-color: var(--danger-rule); background: var(--danger-soft); color: var(--danger); }

/* 端點卡：收起來是一行，展開才是完整文件 */
.op { border: 1px solid var(--rule-soft); border-radius: var(--r-lg); background: var(--surface); }
.op + .op { margin-top: var(--sp-2); }
.op > summary { display: flex; align-items: center; gap: var(--sp-3); padding: 9px var(--sp-4); border-radius: var(--r-lg); }
.op[open] > summary { border-bottom: 1px solid var(--rule-soft); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.op__path { font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; }
.op__sum { font-size: 13px; color: var(--ink-3); }
.op__body { display: grid; gap: var(--sp-5); padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.op--deprecated > summary .op__path { text-decoration: line-through; text-decoration-thickness: 1px; }

/* 欄位表（參數、回應欄位）：名稱一行、型別與說明各自一行 */
.fld { display: grid; gap: var(--sp-3); }
.fld > li { display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); }
.fld code { font-size: 12.5px; font-weight: 600; }
.fld .t { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.fld .dsc { font-size: 13px; color: var(--ink-2); }
/* 寬螢幕：名稱與型別疊在左欄，說明佔右欄 —— 用 grid-area 明確指定，
   靠自動排版會把說明推到第二列去 */
@media (min-width: 768px) {
  .fld > li {
    grid-template-columns: 164px minmax(0, 1fr);
    grid-template-areas: 'n d' 't d';
    column-gap: var(--sp-4); row-gap: 0;
  }
  .fld > li > code { grid-area: n; }
  .fld > li > .t   { grid-area: t; }
  .fld > li > .dsc { grid-area: d; }
}

/* 權限範圍徽章 */
.scope { font-family: var(--font-mono); font-size: 11.5px; }

/* 把 .outline__item 也用在按鈕上（分類導覽要真的會切換） */
button.outline__item { width: 100%; text-align: left; background: none; }
button.outline__item[aria-pressed='true'] { border-color: var(--accent); color: var(--accent); font-weight: 600; }