/* 層 —— 知識庫的視覺系統
   隱喻：條目是沉積層，被越多來源反覆沉積的條目越厚。
   礦脈固定色：同一個主題永遠同一個顏色，任何一頁最多同時出現兩種。 */

/* 字體改在 index.html 用 <link> 直載（@import 會串行阻塞首屏） */

:root {
  --ink: #2a1d15;
  --ink-deep: #1c1209;
  --ink-soft: #3d2c21;
  --ink-line: #4a3a2e;
  --paper: #f4e9d8;
  --paper-dim: #c9a97a;
  --paper-mute: #8a6f58;
  --alert: #b5473a;
  --gold: #d9a441;
  --v0: #c96f3b; /* 赭 · 術數 */
  --v1: #d9a441; /* 土黃 · 哩程 */
  --v2: #7a8b6f; /* 苔綠 · 籌碼 */
  --v3: #5b6e8c; /* 石板藍 · 人物 */
  --v4: #a8875a; /* 砂 · 其他 */
  --vn: #4a3a2e; /* 未分群 */
  --tab-h: 62px;
  --skew: -2.5deg;

  /* 深底頁（首頁、問答）的預設 */
  --bg: var(--ink);
  --fg: var(--paper);
  --fg-muted: var(--paper-dim);
  --fg-faint: var(--paper-mute);
  --line: var(--ink-line);
  --surface: var(--ink-soft);
  color-scheme: dark;
}

/* 米紙頁（條目列表、長文、設定）。這個系統沒有「淺色/深色模式」，
   哪些頁面深、哪些頁面淺是設計決定，不跟系統走。 */
:root[data-surface="paper"] {
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-muted: var(--paper-mute);
  --fg-faint: #a28565; /* 原 #b39a7c 對比只有 2.4:1，烈日下看不見 */
  --line: var(--ink);
  --surface: #ede0cc;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { height: 100%; }
html, body {
  margin: 0;
  min-height: 100%;
  /* iOS 捲到底反彈時 fixed 的分頁列會跟著彈；關掉橡皮筋效果 */
  overscroll-behavior-y: none;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* 顆粒：深底 0.16 overlay，米底 0.07 multiply */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  opacity: 0.16; mix-blend-mode: overlay;
}
[data-surface="paper"] body::before { opacity: 0.07; mix-blend-mode: multiply; }

.hidden { display: none !important; }
.muted { color: var(--fg-muted); font-size: 13px; }
.error { color: var(--alert); font-size: 13px; font-weight: 700; min-height: 20px; margin: 4px 0 0; }

/* ── 登入 ─────────────────────────────────────────────── */
.login { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 24px; position: relative; z-index: 1; }
.login-card { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 14px; }
.login-card h1 { margin: 0; font-size: 72px; font-weight: 900; line-height: 0.85; letter-spacing: -0.04em; transform: skewY(var(--skew)); }
.login-card p { margin: 0; }
.login-card input, .login-card button {
  font: inherit; font-size: 16px; padding: 13px 14px; border-radius: 0;
  border: 3px solid var(--paper); background: transparent; color: var(--paper);
}
.login-card button { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 900; cursor: pointer; }

/* ── 版面 ─────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; min-height: 100dvh; position: relative; z-index: 1; }

#topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: flex-end; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 18px 10px;
  background: var(--bg);
  border-bottom: 3px solid var(--gold);
}
:root[data-surface="paper"] #topbar { border-bottom-color: var(--ink); }
#topbar h1 {
  flex: 1; margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -0.03em; line-height: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.icon-btn {
  border: none; background: none; color: var(--fg); font-size: 22px; font-weight: 900;
  width: 36px; height: 36px; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center;
  position: relative;
}
/* 視覺 36px、熱區 46px——拇指要的是 44px 以上 */
.icon-btn::after { content: ""; position: absolute; inset: -5px; }
.icon-btn.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#view { flex: 1; padding: 18px 18px calc(var(--tab-h) + 28px); }

#tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--ink-deep);
  border-top: 3px solid var(--gold);
  padding-bottom: env(safe-area-inset-bottom);
}
#tabs button {
  border: none; background: none; color: #93806d; /* 原 #7d6a58 對比不足 */
  height: var(--tab-h); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
#tabs button svg { width: 22px; height: 22px; }
#tabs button.active { color: var(--gold); }

/* ── 品牌字 ───────────────────────────────────────────── */
.wordmark { display: flex; align-items: flex-end; gap: 10px; }
.wordmark .glyph { font-size: 64px; font-weight: 900; line-height: 0.85; letter-spacing: -0.04em; transform: skewY(var(--skew)); }
.wordmark .veins { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; }
.wordmark .veins i { display: block; width: 22px; height: 4px; }
.home-head { display: flex; align-items: flex-end; justify-content: space-between; }
.home-head .count b { display: block; font-size: 40px; font-weight: 900; line-height: 0.9; letter-spacing: -0.03em; text-align: right; }
.home-head .count span { display: block; font-size: 11px; letter-spacing: 0.18em; color: var(--fg-muted); margin-top: 5px; text-align: right; }

/* ── 元件 ─────────────────────────────────────────────── */
.card { background: var(--surface); border: 2px solid var(--line); padding: 14px; margin-bottom: 12px; }
:root[data-surface="paper"] .card { background: transparent; }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.stat { border: 2px solid var(--line); padding: 12px; }
.stat b { display: block; font-size: 30px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.stat span { font-size: 11px; letter-spacing: 0.18em; color: var(--fg-muted); }

h2.section {
  font-size: 12px; font-weight: 900; letter-spacing: 0.24em; color: var(--fg-muted);
  margin: 22px 0 10px; display: flex; align-items: baseline; justify-content: space-between;
}
h2.section small { font-weight: 400; letter-spacing: 0; color: var(--fg-faint); font-size: 11px; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { border-bottom: 1px solid var(--paper-dim); }
.list li.thick { border-bottom: 2px solid var(--line); }
.list a, .list button.row, .list .row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 0; color: inherit; text-decoration: none;
  background: none; border: none; font: inherit; text-align: left; cursor: pointer;
}
.list .t { flex: 1; min-width: 0; }
.list .t b { display: block; font-weight: 700; font-size: 17px; line-height: 1.15; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list li.thick .t b { font-size: 20px; font-weight: 900; }
.list .t small { display: block; color: var(--fg-muted); font-size: 11px; margin-top: 3px; }

/* 岩芯：幾條色塊 = 幾份來源 */
.core { display: flex; flex-direction: column; gap: 3px; width: 14px; flex-shrink: 0; }
.core i { display: block; height: 9px; background: var(--vein, var(--vn)); }

.badge {
  font-size: 11px; font-weight: 700; padding: 2px 7px;
  border: 2px solid currentColor; color: var(--fg-muted); white-space: nowrap;
}

.search-box {
  width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; margin-bottom: 12px;
  border: 3px solid var(--line); border-radius: 0; background: transparent; color: var(--fg);
}
.search-box::placeholder { color: var(--fg-faint); }
.filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.chip {
  border: 2px solid var(--line); background: transparent; color: var(--fg);
  padding: 8px 12px; border-radius: 0; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.chip.active { background: var(--line); color: var(--bg); }
:root[data-surface="paper"] .chip.active { background: var(--ink); color: var(--paper); }
.chip.tag { border-color: var(--vein, var(--fg-muted)); color: var(--vein, var(--fg-muted)); }
.chip.tag.active { background: var(--vein, var(--fg-muted)); color: var(--paper); }

button.primary {
  background: var(--gold); color: var(--ink); border: 3px solid var(--gold); font: inherit; font-weight: 900;
  padding: 11px 16px; border-radius: 0; font-size: 14px; cursor: pointer;
}
:root[data-surface="paper"] button.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
button.ghost {
  background: transparent; color: var(--fg); border: 3px solid var(--line); font: inherit; font-weight: 900;
  padding: 10px 14px; border-radius: 0; font-size: 13px; cursor: pointer;
}
button:disabled { opacity: 0.5; cursor: default; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

/* ── 地層（首頁） ──────────────────────────────────────── */
.strata { display: flex; flex-direction: column; margin: 12px -10px 0; overflow: hidden; }
.band {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; margin-top: -10px; color: var(--ink);
  transform: skewY(var(--skew));
  animation: settle 800ms cubic-bezier(.2,.8,.2,1) both;
  text-decoration: none;
}
.band:first-child { margin-top: 0; }
.band:nth-child(2) { animation-delay: 70ms; } .band:nth-child(3) { animation-delay: 140ms; }
.band:nth-child(4) { animation-delay: 210ms; } .band:nth-child(5) { animation-delay: 280ms; }
.band > * { transform: skewY(calc(var(--skew) * -1)); }
.band .name { font-weight: 900; letter-spacing: -0.02em; }
.band .n { display: flex; align-items: baseline; gap: 4px; }
.band .n b { font-weight: 900; line-height: 1; }
.band .n span { font-size: 10px; letter-spacing: 0.15em; font-weight: 700; }
.band.h3 { height: 84px; } .band.h3 .name { font-size: 28px; } .band.h3 .n b { font-size: 24px; }
.band.h2 { height: 60px; } .band.h2 .name { font-size: 22px; } .band.h2 .n b { font-size: 20px; }
.band.h1 { height: 46px; } .band.h1 .name { font-size: 17px; } .band.h1 .n b { font-size: 16px; }
.band.more { height: 44px; background: var(--ink-soft); color: var(--paper-dim); font-size: 13px; font-weight: 700; }
.band.light { color: var(--paper); }
@keyframes settle { from { transform: translateY(16px) skewY(var(--skew)); opacity: 0; } to { transform: translateY(0) skewY(var(--skew)); opacity: 1; } }

.recall-card {
  margin-top: 22px; padding: 16px 18px; background: var(--paper); color: var(--ink);
  display: flex; align-items: center; gap: 14px; transform: rotate(-1deg); text-decoration: none;
}
.recall-card .big { font-size: 40px; font-weight: 900; line-height: 1; color: var(--alert); }
.recall-card b { display: block; font-size: 15px; font-weight: 900; }
.recall-card small { display: block; font-size: 11px; color: var(--paper-mute); margin-top: 2px; }

.two { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.cell { padding: 12px 14px; border: 2px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; text-decoration: none; color: inherit; }
.cell .lbl { font-size: 10px; font-weight: 900; letter-spacing: 0.2em; color: var(--fg-muted); }
.cell .val { font-size: 14px; font-weight: 700; line-height: 1.5; }
.cell .val em { font-style: normal; color: var(--v0); }
.vein-dot { display: inline-block; width: 4px; height: 12px; margin-right: 3px; vertical-align: -1px; background: var(--vein, var(--vn)); }

/* ── 條目內文 ─────────────────────────────────────────── */
.doc { font-size: 16px; line-height: 1.75; }
.doc h2 { font-size: 18px; font-weight: 900; letter-spacing: -0.01em; margin: 24px 0 8px; padding-bottom: 6px; border-bottom: 3px solid var(--line); }
.doc h3 { font-size: 16px; font-weight: 900; margin: 18px 0 6px; }
.doc p { margin: 10px 0; }
.doc ul, .doc ol { margin: 10px 0; padding-left: 22px; }
.doc li { margin: 4px 0; }
.doc code { background: var(--surface); padding: 2px 5px; font-family: ui-monospace, Menlo, monospace; font-size: .88em; }
.doc pre { background: var(--surface); padding: 12px; overflow-x: auto; font-size: 13px; border-left: 4px solid var(--line); }
.doc pre code { background: none; padding: 0; }
.doc blockquote { margin: 10px 0; padding: 2px 0 2px 12px; border-left: 4px solid var(--line); color: var(--fg-muted); }
.doc a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--v0); }
.doc a.wikilink.missing { border-bottom-style: dotted; color: var(--fg-muted); }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; display: block; overflow-x: auto; }
.doc th, .doc td { border: 2px solid var(--line); padding: 6px 10px; text-align: left; }
.doc th { font-weight: 900; }

/* 條目頁頂端斜切色帶 = 這一層的礦脈色 */
.page-band {
  margin: -18px -28px 22px; padding: 22px 28px 18px; background: var(--vein, var(--vn)); color: var(--ink);
  transform: skewY(var(--skew)); transform-origin: left top;
}
.page-band > div { transform: skewY(calc(var(--skew) * -1)); }
.page-band .crumb { display: flex; justify-content: space-between; font-size: 11px; font-weight: 900; letter-spacing: 0.2em; }
.page-band h2 { font-size: 40px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; margin: 12px 0 0; }
.page-band .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 11px; font-weight: 700; }
.page-band .meta .tag { background: var(--ink); color: var(--paper); padding: 1px 6px; }
.page-band.light { color: var(--paper); }
.page-band.light .meta .tag { background: var(--paper); color: var(--ink); }

.rel { padding: 8px 0; border-bottom: 1px solid var(--paper-dim); font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.rel:last-child { border-bottom: none; }
.rel a { color: inherit; text-decoration: none; font-weight: 700; }
.rel small { display: block; width: 100%; color: var(--fg-muted); font-size: 12px; margin-top: 2px; }
.rel-type { font-size: 12px; font-weight: 900; padding: 2px 8px; background: var(--ink); color: var(--paper); }

.src-item { padding: 9px 0; border-top: 6px solid var(--vein, var(--vn)); font-size: 13px; }
.src-item a { color: inherit; text-decoration: none; font-weight: 700; }
.src-item p { margin: 3px 0 0; color: var(--fg-muted); font-size: 12px; }
.src-item a.ext { font-weight: 400; color: var(--fg-muted); margin-left: 4px; }
.ext-link { display: inline-block; margin-top: 14px; font-weight: 700; color: inherit; text-decoration: none; border-bottom: 2px solid var(--line); }
.ext-link small { font-weight: 400; color: var(--fg-muted); }
a.chip { text-decoration: none; display: inline-block; }

.fact { padding: 8px 0; border-bottom: 1px solid var(--paper-dim); font-size: 14px; line-height: 1.6; }
.fact:last-child { border-bottom: none; }
.fact.expired { color: var(--fg-muted); text-decoration: line-through; text-decoration-color: var(--paper-dim); }
.fact small { display: block; color: var(--fg-muted); font-size: 12px; margin-top: 2px; }

/* 原文原句：縮在事實下面的一條岩芯。不是引用格式的花俏版，就是「這幾個字原文真的有」。 */
.src-quote {
  display: block; margin: 6px 0 2px; padding: 4px 0 4px 10px;
  border-left: 2px solid var(--vein, var(--paper-dim));
  color: var(--fg-muted); font-size: 12.5px; line-height: 1.55; quotes: none;
}
.fact.expired .src-quote { text-decoration: none; }

/* 變了什麼：舊說法劃掉、新說法接在下面 */
/* 伺服器端畫好的 mermaid。顏色全部從根 svg 的 --bg/--fg 衍生，
   所以這裡覆蓋一次就能貼合當下的表面（深底／米紙），不必各存一份 SVG。 */
.diagram-svg { max-width: 100%; height: auto; --bg: transparent; --fg: var(--ink); }
:root[data-surface="paper"] .diagram-svg { --fg: #2a1d15; }

.chg-page { display: block; font-weight: 900; font-size: 15px; color: var(--ink); text-decoration: none; margin-bottom: 6px; }

.action-bar { display: flex; gap: 8px; margin-top: 24px; }
.action-bar > * { flex: 1; }
.action-bar .sq { flex: 0 0 46px; padding: 0; display: flex; align-items: center; justify-content: center; }

.page-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }

/* ── 問答 ─────────────────────────────────────────────── */
#view.chat-view { display: flex; flex-direction: column; padding-bottom: 0; }
.chat-log { flex: 1; display: flex; flex-direction: column; gap: 14px; padding-bottom: 12px; }
.msg { max-width: 92%; font-size: 15px; line-height: 1.6; }
.msg.user { align-self: flex-end; max-width: 85%; padding: 12px 16px; background: var(--paper); color: var(--ink); font-weight: 500; transform: rotate(0.6deg); }
.msg.assistant { align-self: flex-start; display: flex; transform: rotate(-0.4deg); }
.msg.assistant::before { content: ""; width: 10px; flex-shrink: 0; background: var(--vein, var(--v2)); }
.msg.assistant .doc { padding: 14px 16px; background: var(--ink-soft); font-size: 15px; }
.msg.assistant .doc p:first-child { margin-top: 0; }
.msg.assistant .doc p:last-child { margin-bottom: 0; }
.msg-refs { margin: 0 0 0 10px; padding: 8px 16px 12px; background: var(--ink-soft); font-size: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.msg-refs a { font-size: 11px; font-weight: 700; padding: 3px 8px; border: 1px solid var(--fg-muted); color: var(--fg-muted); text-decoration: none; }
.msg.assistant .wrap { display: flex; flex-direction: column; }
.chat-form {
  position: sticky; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom));
  display: flex; gap: 8px; padding: 12px 0;
  background: var(--bg); border-top: 3px solid var(--gold);
}
.chat-form textarea {
  flex: 1; resize: none; font: inherit; font-size: 16px; padding: 12px 14px;
  border: 3px solid var(--ink-line); border-radius: 0; background: var(--ink); color: var(--fg); max-height: 120px;
}
.chat-form textarea::placeholder { color: var(--paper-mute); }
.chat-form button.primary { flex: 0 0 56px; padding: 0; }
.thinking { display: flex; gap: 8px; align-items: center; color: var(--paper-dim); font-size: 12px; padding: 8px 0; }
.thinking i { width: 10px; height: 10px; background: var(--gold); animation: dig 1.1s steps(3) infinite; }
.thinking i:nth-child(2) { animation-delay: .2s; } .thinking i:nth-child(3) { animation-delay: .4s; }
@keyframes dig { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }
.progress-log { font-size: 11px; color: var(--paper-dim); max-height: 88px; overflow-y: auto; line-height: 1.7; }
.progress-log div::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--v2); margin-right: 8px; vertical-align: -1px; }

/* ── 圖譜 ─────────────────────────────────────────────── */
.graph { width: 100%; height: 280px; background: var(--ink-soft); display: block; }
.graph-full { height: auto; }
.graph line { stroke: var(--ink-line); stroke-width: 1.5; }
.graph circle { cursor: pointer; }
/* 圖的底永遠是深的，字不能跟著頁面的 --fg 走（米紙頁上會變成深字壓深底） */
.graph text { font-size: 11px; font-weight: 700; fill: var(--paper); pointer-events: none; }

/* 關係五族的邊色：因果、抵觸、結構、用途、人事。
   對圖的底色 #3d2c21 驗過（亮度帶、彩度、對比都 ≥ 3:1）。色盲下最難分的一對是因果↔抵觸，
   落在「不能只靠顏色」的區間——所以選到節點時邊上一定有類型的字，面板也一定寫出類型。 */
:root { --rf0: #b98a00; --rf1: #da534c; --rf2: #2996f5; --rf3: #379b74; --rf4: #a26bc2; }
.rf0 { --rf: var(--rf0); } .rf1 { --rf: var(--rf1); } .rf2 { --rf: var(--rf2); }
.rf3 { --rf: var(--rf3); } .rf4 { --rf: var(--rf4); } .rfx { --rf: var(--paper-mute); }

/* typedGraph() 畫出來的圖：灰線 = 只有內文互相提到，色線 = 有標出類型的關係 */
.tg .edge.typed line { stroke: var(--rf); stroke-width: 2; }
.tg.has-sel .edge:not(.on) { opacity: 0.3; }
.tg .edge.on line { stroke: var(--paper-mute); }
.tg .edge.typed.on line { stroke: var(--rf); stroke-width: 3; }
.tg .node { cursor: pointer; }
.tg .node.sel circle { stroke: var(--gold); stroke-width: 3; }
.tg .node text { paint-order: stroke; stroke: var(--ink-soft); stroke-width: 3px; stroke-linejoin: round; }
.tg .node.quiet text { display: none; }
.tg .node.quiet:hover text, .tg .node.sel text, .tg .node.near text { display: block; }
.tg text.hide { display: none !important; } /* declutter() 收起來的：跟更重要的字撞在一起 */
.tg .node:hover text { display: block !important; }
.tg text.elabel {
  display: none; font-size: 10px; fill: var(--paper);
  paint-order: stroke; stroke: var(--ink-soft); stroke-width: 4px; stroke-linejoin: round;
}
.tg text.elabel.on { display: block; }
.rf-legend { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 6px 10px 8px; background: var(--ink-soft); color: var(--paper-dim); font-size: 11px; font-weight: 700; }
.rf-legend:empty { display: none; }
.rf-legend i { display: inline-block; width: 16px; height: 3px; margin-right: 5px; vertical-align: middle; background: var(--rf); }
.rf-legend .rf-plain i { height: 2px; background: var(--paper-mute); opacity: 0.5; }
/* 全圖的工具列：搜尋、聚落、門檻一排，關係族與條目類型各一排 */
.fg-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 10px; }
.fg-tools input:not([type=range]), .fg-tools select { flex: 1 1 180px; min-width: 0; padding: 8px 10px; border: 2px solid var(--line); border-radius: 0; background: transparent; color: var(--fg); font: inherit; font-size: 14px; }
.fg-tools select option { color: #2a1d15; }
.fg-min { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--fg-muted); white-space: nowrap; }
.fg-min input { width: 110px; accent-color: var(--gold); }
#fg-fams .chip i { display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; background: var(--rf); }
#fg-fams .chip.rf-plain i { height: 2px; background: currentColor; opacity: 0.6; }
/* 關係族預設全開，「開著」就是平常的樣子、關掉的才劃掉；條目類型預設全不選（= 全畫），選了的才反白 */
#fg-fams .chip.active { background: transparent; color: var(--fg); }
#fg-fams .chip:not(.active) { opacity: 0.4; text-decoration: line-through; }
#fg-types .chip.active { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.fg-path { font-size: 14px; line-height: 2; }
.fg-path a { color: inherit; font-weight: 900; text-decoration: none; border-bottom: 2px solid var(--gold); }
.fg-path small { display: block; }
.fg-path .chip { margin-left: 8px; padding: 2px 10px; font-size: 12px; }
.fg-stage { position: relative; }
/* 桌面：面板放圖的右邊，不蓋住圖。手機沒有位置，面板停靠在視窗底（.dock） */
@media (min-width: 1000px) {
  .fg-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
  .fg-main .gpanel.dock { top: 74px; bottom: auto; margin-top: 0; max-height: calc(100dvh - 74px - var(--tab-h) - 24px); }
  .fg-main .gpanel.dock .gp-ex { display: block; }
}
.fg-zoom { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; }
.fg-zoom button { width: 32px; height: 32px; border: 2px solid var(--ink-line); background: var(--ink); color: var(--paper); font: inherit; font-weight: 900; cursor: pointer; }
.graph.zoomed { cursor: grab; touch-action: none; }
.tg .edge.path { opacity: 1 !important; }
.tg .edge.path line { stroke-width: 4; stroke: var(--gold); }
.tg .edge.typed.path line { stroke: var(--rf); }
.tg .node.path circle { stroke: var(--paper); stroke-width: 2.5; }
.tg .node.path text, .tg text.elabel.path { display: block; }
.gp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; }
.gp-acts .gp-open { margin-top: 0; }
.gp-acts button { padding: 4px 10px; font-size: 12px; border-width: 2px; }
.rf-legend .rf-note { flex-basis: 100%; font-weight: 400; }
/* 全圖很高，面板排在圖下面就得捲下去才看得到——讓它停靠在視窗底，選了節點馬上看得到 */
.gpanel.dock { position: sticky; bottom: calc(var(--tab-h) + 6px); z-index: 2; background: var(--bg); max-height: 38vh; min-height: 0; }
.gpanel.dock .gp-ex { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rel-type[class*="rf"] { border-left: 6px solid var(--rf); }
.gpanel { margin-top: 10px; padding: 12px 14px; border: 2px solid var(--line); font-size: 13px; line-height: 1.55; min-height: 80px; max-height: 60vh; overflow-y: auto; }
.gpanel > b { display: block; font-size: 15px; }
.gpanel .gp-meta { font-size: 12px; margin-bottom: 6px; }
.gpanel .gp-ex { margin: 0 0 6px; }
.gpanel .rel { font-size: 13px; padding: 6px 0; }
.gpanel p.muted { font-size: 12px; margin: 8px 0 0; }
.gpanel .gp-open { display: inline-block; margin-top: 10px; font-weight: 900; color: inherit; text-decoration: none; border-bottom: 2px solid var(--line); }

.empty { text-align: center; color: var(--fg-muted); padding: 48px 16px; }
.empty p { margin: 8px 0; }
.empty b { color: var(--fg); font-size: 18px; font-weight: 900; }

.status-dot { width: 10px; height: 10px; display: inline-block; flex-shrink: 0; }
.status-done { background: var(--v2); } .status-pending { background: var(--gold); }
.status-error { background: var(--alert); } .status-skipped { background: var(--fg-faint); }

/* ── 編輯器 / token / 時間軸 / 回想 ────────────────────── */
.editor {
  width: 100%; min-height: 50vh; font: inherit; font-size: 15px; line-height: 1.7;
  padding: 12px; margin: 6px 0 12px; border: 3px solid var(--line); border-radius: 0;
  background: transparent; color: var(--fg); font-family: ui-monospace, Menlo, monospace; resize: vertical;
}
#view > label { display: block; margin-top: 10px; font-size: 11px; font-weight: 900; letter-spacing: 0.2em; color: var(--fg-muted); }
.token-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; border: 3px solid var(--line); padding: 10px 12px; }
.token-row code { flex: 1; min-width: 0; font-size: 12px; word-break: break-all; font-family: ui-monospace, Menlo, monospace; user-select: all; -webkit-user-select: all; }

.recall-q { font-size: 18px; line-height: 1.7; font-weight: 500; padding: 18px; background: var(--paper); color: var(--ink); transform: rotate(-0.6deg); }
.recall-q .doc p { margin: 0; }
.tl-period { display: flex; gap: 12px; margin-bottom: 18px; }
.tl-year { flex: 0 0 56px; font-weight: 900; font-size: 18px; color: var(--gold); border-right: 3px solid var(--line); padding-right: 10px; padding-top: 4px; letter-spacing: -0.02em; }
.tl-items { flex: 1; min-width: 0; }
.tl-items .fact small a { color: var(--fg-muted); text-decoration: none; font-weight: 700; }


/* ── 每日一層 ───────────────────────────────────────── */
.lesson-card {
  display: block; margin-top: 22px; padding: 16px 18px; color: var(--ink);
  background: var(--vein, var(--v1)); text-decoration: none; transform: rotate(-1deg);
}
.lesson-card.light { color: var(--paper); }
.lesson-card .lbl { font-size: 10px; font-weight: 900; letter-spacing: 0.24em; opacity: .8; }
.lesson-card h3 { margin: 6px 0 4px; font-size: 26px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; }
.lesson-card small { display: block; font-size: 12px; font-weight: 700; opacity: .85; }
.lesson-card .prog { display: flex; gap: 4px; margin-top: 12px; }
.lesson-card .prog i { flex: 1; height: 6px; background: rgba(0,0,0,.18); }
.lesson-card.light .prog i { background: rgba(255,255,255,.25); }
.lesson-card .prog i.on { background: currentColor; }

.lesson-head { margin: -18px -28px 20px; padding: 20px 28px 16px; background: var(--vein, var(--v1)); color: var(--ink); transform: skewY(var(--skew)); transform-origin: left top; }
.lesson-head.light { color: var(--paper); }
.lesson-head > div { transform: skewY(calc(var(--skew) * -1)); }
.lesson-head .crumb { display: flex; justify-content: space-between; font-size: 11px; font-weight: 900; letter-spacing: 0.2em; }
.lesson-head h2 { font-size: 36px; font-weight: 900; letter-spacing: -0.04em; line-height: 1.05; margin: 10px 0 0; }
.lesson-plain { font-size: 18px; line-height: 1.8; font-weight: 400; }
.lesson-points { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: pt; }
.lesson-points li { position: relative; padding: 10px 0 10px 40px; border-bottom: 1px solid var(--paper-dim); font-size: 15px; line-height: 1.6; font-weight: 500; }
.lesson-points li::before { counter-increment: pt; content: counter(pt); position: absolute; left: 0; top: 8px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--paper); font-weight: 900; font-size: 14px; }
.lesson-q { margin-top: 8px; padding: 16px 18px; border: 3px solid var(--ink); font-size: 16px; font-weight: 500; line-height: 1.6; }
.lesson-q .lbl { display: block; font-size: 10px; font-weight: 900; letter-spacing: 0.24em; color: var(--fg-muted); margin-bottom: 6px; }
.lesson-audio { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.lesson-audio audio { flex: 1; min-width: 0; height: 40px; }
.week-list { list-style: none; margin: 0; padding: 0; }
.week-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--paper-dim); font-size: 14px; }
.week-list li.done { color: var(--fg-muted); text-decoration: line-through; text-decoration-color: var(--paper-dim); }
.week-list li.now { font-weight: 900; }
.week-list i { width: 10px; height: 10px; background: var(--paper-dim); flex-shrink: 0; }
.week-list li.done i { background: var(--v2); } .week-list li.now i { background: var(--gold); }


/* ── 結構頁：剖面 / 橋樑 / 大綱 ────────────────────────── */
.struct-chips { margin-bottom: 16px; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -18px; padding: 0 18px 6px; }
.profile { display: block; }
.profile path.layer { stroke: var(--ink-deep); stroke-width: 1.2; cursor: pointer; transition: fill-opacity .15s; }
.profile path.layer:hover, .profile path.layer.on { stroke: var(--gold); stroke-width: 2.5; fill-opacity: 1; }
.profile text { font-size: 11px; font-weight: 700; fill: var(--fg); pointer-events: none; }
.profile text .axis, .profile text.axis { fill: var(--fg-muted); font-weight: 500; }
.chord { display: block; max-width: 100%; }
.chord path.arc { stroke: var(--ink-deep); stroke-width: 1; cursor: pointer; }
.chord path.ribbon { fill: none; stroke-linecap: round; opacity: .55; cursor: pointer; transition: opacity .15s; }
.chord path.ribbon.dim { opacity: .07; }
.chord path.ribbon.on { opacity: .95; }
.chord text { font-size: 11px; font-weight: 700; fill: var(--fg); pointer-events: none; }
.section .vein-dot { margin-right: 6px; }
.outline { list-style: none; margin: 0; padding-left: 14px; border-left: 2px solid var(--line); }
.outline.root { padding-left: 0; border-left: none; }
.outline li { margin: 7px 0; }
.outline summary { list-style: none; cursor: pointer; }
.outline summary::-webkit-details-marker { display: none; }
.ol-row { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; min-width: 0; }
.ol-row a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-row small { color: var(--fg-muted); font-weight: 500; font-size: 11px; flex-shrink: 0; }
.ol-row .ol-type { border: 1px solid var(--line); padding: 0 4px; }
.ol-row .caret { display: inline-block; width: 12px; color: var(--fg-muted); transition: transform .15s; flex-shrink: 0; }
details[open] > summary .ol-row .caret { transform: rotate(90deg); }

/* ── 桌面版：條目頁側欄 ─────────────────────────────── */
.page-aside { display: none; }
@media (min-width: 1000px) {
  #view.page-view { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; max-width: 1240px; margin: 0 auto; box-sizing: border-box; width: 100%; }
  .page-main { min-width: 0; }
  .page-main #graph, .page-main #graph-legend, .page-main #graph-panel { display: none; }
  /* 目錄長的時候側欄比視窗高，sticky 會讓下半截永遠捲不到——讓它自己捲 */
  .page-aside { display: block; position: sticky; top: 74px; max-height: calc(100dvh - 74px - var(--tab-h) - 12px); overflow-y: auto; scrollbar-width: thin; }
  .aside-graph { width: 100%; height: 440px; background: var(--ink-soft); display: block; }
  .aside-graph line { stroke: var(--ink-line); stroke-width: 1.5; }
  .aside-graph g.node { cursor: pointer; }
  .aside-graph g.node:hover circle { stroke: var(--gold); stroke-width: 3; }
  .aside-graph text { font-size: 11px; font-weight: 700; fill: var(--paper); pointer-events: none; }
  .page-aside .gpanel { max-height: 200px; }
  .page-aside .gp-hint { font-size: 12px; margin: 8px 0 0; }
}


/* ── 畫線重現 / 隨機挖 / 第二排動作 ───────────────────── */
.lesson-card .hl { display: block; margin-top: 8px; font-style: italic; opacity: .85; }
.lesson-hl { margin: 18px 0; padding: 14px 16px; border-left: 6px solid var(--gold); background: var(--paper); color: var(--ink); }
.lesson-hl .lbl { display: block; font-size: 10px; font-weight: 900; letter-spacing: .2em; color: var(--paper-mute); margin-bottom: 6px; }
.lesson-hl p { margin: 0; font-size: 17px; line-height: 1.6; font-weight: 500; }
.lesson-hl small { display: block; margin-top: 6px; color: var(--paper-mute); }
.lesson-hl a { color: inherit; }
.sub-actions { margin-top: 10px; }
button.primary.big { font-size: 18px; padding: 16px 28px; }

/* ── Threads 串 ────────────────────────────────────────── */
.threads { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.threads-post { border: 2px solid var(--line); padding: 12px 14px; }
.threads-post .doc p { margin: 0 0 10px; font-size: 15px; line-height: 1.65; }

/* ── 地層切片 ──────────────────────────────────────────── */
.asof-ctl { margin: 10px 0 14px; }
.asof-ctl input[type=range] { width: 100%; accent-color: var(--gold); }
.asof-label { font-size: 12px; color: var(--fg-muted); margin-top: 6px; }
.asof-body { padding: 0 0 14px; }

/* ── 今日籤 ────────────────────────────────────────────── */
.fortune { margin: 18px 0; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); padding: 18px; position: relative; transform: rotate(-0.4deg); }
.fortune::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--vein, var(--v0)); }
.fortune-head { display: flex; justify-content: space-between; align-items: baseline; padding-left: 8px; }
.fortune-no { font-weight: 900; letter-spacing: .2em; font-size: 13px; }
.fortune-luck { font-weight: 900; font-size: 22px; color: var(--alert); }
.fortune-poem { display: flex; flex-direction: row-reverse; justify-content: center; gap: 22px; margin: 18px 0; padding: 12px 0; border-top: 1px solid var(--paper-dim); border-bottom: 1px solid var(--paper-dim); }
.fortune-poem span { writing-mode: vertical-rl; font-size: 22px; font-weight: 700; letter-spacing: .18em; line-height: 1; font-family: "Noto Serif TC", "Songti TC", serif; }
.fortune-explain { padding-left: 8px; }
.fortune-explain .lbl { font-size: 10px; font-weight: 900; letter-spacing: .2em; color: var(--paper-mute); }
.fortune-explain p { margin: 6px 0; line-height: 1.7; font-size: 15px; }
.fortune-gb b { color: var(--alert); margin-right: 4px; }
.fortune-explain small { color: var(--paper-mute); }
.fortune-explain a { color: inherit; }
.shaking { animation: shake .5s infinite; }
@keyframes shake { 0%,100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }

/* ── 讓兩層吵架 ────────────────────────────────────────── */
.quarrel { margin: 18px 0 28px; border-top: 3px solid var(--line); padding-top: 14px; }
.quarrel h3 { margin: 0 0 8px; font-size: 22px; font-weight: 900; letter-spacing: -0.01em; }
.quarrel-vs { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.quarrel-vs a { color: inherit; text-decoration: none; font-weight: 700; border-bottom: 4px solid var(--vein, var(--vn)); }
.quarrel-vs span { font-size: 11px; font-weight: 900; letter-spacing: .2em; color: var(--fg-muted); }
.quarrel-lines { display: flex; flex-direction: column; gap: 10px; }
.qline { max-width: 88%; padding: 10px 14px; border-left: 6px solid var(--vein, var(--vn)); background: var(--ink-soft); }
.qline.b { align-self: flex-end; border-left: none; border-right: 6px solid var(--vein, var(--vn)); text-align: left; }
:root[data-surface="paper"] .qline { background: var(--paper-dim); }
.qline b { display: block; font-size: 11px; color: var(--fg-muted); margin-bottom: 3px; }
.qline p { margin: 0; font-size: 15px; line-height: 1.6; }
.quarrel-insight { margin-top: 14px; padding: 12px 14px; background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1.6; }
.quarrel-insight .lbl { display: block; font-size: 10px; font-weight: 900; letter-spacing: .2em; color: var(--paper-mute); margin-bottom: 4px; }


/* ── 阿嬤版 / 地圖 ─────────────────────────────────────── */
.doc.grandma { font-size: 17px; line-height: 1.85; }
.grandma-tag { font-size: 11px; font-weight: 900; letter-spacing: .2em; color: var(--gold); margin: 0 0 10px; }
:root[data-surface="paper"] .grandma-tag { color: var(--alert); }
.map { width: 100%; height: 62vh; min-height: 360px; background: var(--ink-soft); margin-bottom: 12px; border: 3px solid var(--line); }
.map .leaflet-tooltip { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 0; font-weight: 700; font-family: inherit; }
.map .leaflet-tooltip-top:before { border-top-color: var(--ink); }
.map .leaflet-control-attribution { font-size: 9px; background: rgba(28,18,9,.7); color: #c9a97a; }
.map .leaflet-control-attribution a { color: #d9a441; }
.map .leaflet-bar a { background: var(--ink-deep); color: var(--paper); border-color: var(--ink-line); border-radius: 0; }


/* ── 圖與表 ────────────────────────────────────────────── */
.diagram { margin: 14px 0; padding: 12px; background: var(--ink-soft); overflow-x: auto; }
.diagram svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.diagram:not(.broken):not([data-done]) pre, .diagram[data-done]:not(.broken) pre { display: none; }
.diagram.broken pre { margin: 0; }
.diagram pre { background: transparent; }
:root[data-surface="paper"] .diagram { background: var(--ink-soft); }
.tbl { overflow-x: auto; margin: 12px 0; }
.tbl table { border-collapse: collapse; font-size: 14px; min-width: 100%; }
.tbl th, .tbl td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; line-height: 1.5; }
.tbl th { font-weight: 900; background: var(--ink-soft); }
:root[data-surface="paper"] .tbl th { background: var(--paper-dim); color: var(--ink); }


/* ── 旅程 ──────────────────────────────────────────────── */
.trip-form label { display: block; margin: 12px 0 4px; font-size: 11px; font-weight: 900; letter-spacing: .2em; color: var(--fg-muted); }
.trip-form .search-box { margin-bottom: 6px; }
.trip-form .two { margin-top: 0; }
.trip-summary { font-size: 16px; line-height: 1.7; margin: 14px 0; }
.trip-day { margin-top: 22px; border-left: 8px solid var(--day); padding-left: 12px; }
.trip-day .section { margin-top: 0; }
.day-badge { display: inline-block; background: var(--day); color: var(--ink-deep); font-size: 11px; font-weight: 900; letter-spacing: .15em; padding: 3px 8px; margin-right: 8px; }
.trip-day .tbl th:nth-child(1) { white-space: nowrap; }
.stop-no { display: inline-block; min-width: 20px; height: 20px; line-height: 20px; text-align: center; background: var(--day); color: var(--ink-deep); font-size: 12px; margin-right: 4px; }
tr.confirm td { background: rgba(217,164,65,.12); }
.confirm-tag { color: var(--alert); font-weight: 900; }
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { padding: 8px 0; border-bottom: 1px solid var(--paper-dim); font-size: 15px; }
.checks input { accent-color: var(--gold); margin-right: 8px; transform: scale(1.2); }
.stop-pin span { display: block; width: 26px; height: 26px; line-height: 24px; text-align: center; border: 2px solid #1c1209; color: #1c1209; font-weight: 900; font-size: 12px; box-sizing: border-box; }
.leaflet-tooltip.leaflet-tooltip-top { font-family: inherit; }


/* ── 探索頁的工具格 ─────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 2px solid var(--line); color: inherit; text-decoration: none; min-height: 74px; }
.tile:active { background: var(--ink-soft); }
.tile b { font-size: 16px; font-weight: 900; letter-spacing: -0.01em; }
.tile small { color: var(--fg-muted); font-size: 11px; line-height: 1.4; }
.explore-week .btn-row { margin-top: 8px; }
.home-foot { margin-top: 22px; font-size: 11px; }
#explore-veins a { color: inherit; text-decoration: none; }

/* ── 底部抽屜 ─────────────────────────────────────────── */
.sheet { position: fixed; inset: 0; z-index: 30; background: rgba(28,18,9,.55); display: flex; align-items: flex-end; opacity: 0; transition: opacity .2s; }
.sheet.open { opacity: 1; }
.sheet-body { width: 100%; max-width: 560px; margin: 0 auto; background: var(--paper); color: var(--ink); border-top: 4px solid var(--gold); padding: 10px 14px max(28px, calc(20px + env(safe-area-inset-bottom))); transform: translateY(24px); transition: transform .2s; max-height: 70vh; overflow-y: auto; }
.sheet.open .sheet-body { transform: none; }
.sheet-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 12px 6px; border: none; border-bottom: 1px solid var(--paper-dim); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.sheet-item:last-child { border-bottom: none; }
.sheet-grab { width: 40px; height: 4px; background: var(--paper-dim); border-radius: 2px; margin: 2px auto 10px; }
.sheet-item b { font-size: 16px; font-weight: 900; }
.sheet-item small { color: var(--paper-mute); font-size: 12px; }
.sheet-toc { padding: 6px 0; }

/* ── 目錄 ─────────────────────────────────────────────── */
.toc { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.toc:empty { display: none; }
.toc .lbl { font-size: 10px; font-weight: 900; letter-spacing: .2em; color: var(--fg-muted); margin-bottom: 6px; }
.toc a { color: inherit; text-decoration: none; font-size: 13px; line-height: 1.5; padding: 3px 0 3px 8px; border-left: 2px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc a.toc-h3 { padding-left: 18px; color: var(--fg-muted); }
.toc a.toc-h4 { padding-left: 28px; color: var(--fg-muted); font-size: 12px; }
.toc a:hover { border-left-color: var(--gold); }
.sheet-toc a { font-size: 15px; padding: 7px 0 7px 10px; }
button.linkish { border: none; background: none; font: inherit; color: inherit; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ── 快速搜尋 ─────────────────────────────────────────── */
.quick { position: fixed; inset: 0; z-index: 40; background: rgba(28,18,9,.6); padding: max(12vh, env(safe-area-inset-top)) 14px 0; }
.quick-box { max-width: 600px; margin: 0 auto; background: var(--ink); color: var(--paper); border: 3px solid var(--gold); padding: 10px 14px 6px; max-height: 70vh; overflow-y: auto; }
.quick-box input { width: 100%; box-sizing: border-box; font: inherit; font-size: 18px; padding: 10px 4px; background: transparent; border: none; border-bottom: 2px solid var(--ink-line); color: var(--paper); outline: none; }
.quick-box .list li { border-bottom-color: var(--ink-line); }
.quick-box .list a.sel { background: var(--ink-soft); }
.quick-box .list .t b { font-size: 16px; }
.quick-box .list .t small { color: var(--paper-dim); }
.quick-hint { font-size: 11px; margin: 8px 0 4px; color: var(--paper-mute); }
#topbar #search-btn, #topbar #gear { color: var(--fg); }

/* ── 問答空白時 ────────────────────────────────────────── */
.chat-hint { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: auto; padding: 8px 0 12px; }
.chat-hint .lbl { font-size: 10px; font-weight: 900; letter-spacing: .2em; color: var(--fg-muted); }
.chat-hint .chip { white-space: normal; text-align: left; line-height: 1.4; }


/* ── 行動句 ────────────────────────────────────────────── */
.action-line { margin: 14px 0 18px; padding: 14px 16px; border-left: 6px solid var(--gold); background: var(--paper); color: var(--ink); font-size: 18px; line-height: 1.6; font-weight: 500; }
.action-line .lbl { display: block; font-size: 10px; font-weight: 900; letter-spacing: .2em; color: var(--paper-mute); margin-bottom: 6px; }
.page-band .epigraph { margin: 10px 0 0; font-size: 15px; line-height: 1.6; font-style: italic; opacity: .85; max-width: 46ch; }


/* ── iOS 鍵盤彈出時把分頁列收起來：WebKit 會把 fixed 元素推到畫面中間 ───── */
html.kb #tabs { transform: translateY(120%); transition: transform .15s; }
html.kb #view { padding-bottom: 24px; }

/* ── 換頁交叉淡化（View Transition） ──────────────────────────────────── */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ── 條目頁閱讀進度：蓋在頂欄金線上的赭色填充 ─────────────────────────── */
#topbar #read-prog {
  position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: var(--v0); transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}
:root[data-surface="paper"] #topbar #read-prog { background: var(--gold); }

/* ── 長文行寬：中文一行超過 40 字就難讀 ───────────────────────────────── */
@media (min-width: 620px) and (max-width: 999px) {
  .page-view .page-main { max-width: 660px; margin-inline: auto; }
}
@media (min-width: 1000px) {
  #page-doc { max-width: 40em; }
}

/* ── Toast ────────────────────────────────────────────────────────────── */
#toast {
  position: fixed; left: 50%; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 14px);
  transform: translate(-50%, 8px); z-index: 50;
  background: var(--ink-deep); color: var(--paper); border: 2px solid var(--gold);
  padding: 10px 16px; font-size: 14px; font-weight: 700; line-height: 1.5;
  max-width: min(92vw, 480px); opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.danger { border-color: var(--alert); }

/* ── 確認抽屜 / 危險動作 ──────────────────────────────────────────────── */
.confirm-box p { margin: 8px 0 14px; font-size: 16px; font-weight: 500; line-height: 1.6; }
button.primary.danger { background: var(--alert); border-color: var(--alert); color: var(--paper); }
:root[data-surface="paper"] button.primary.danger { background: var(--alert); border-color: var(--alert); color: var(--paper); }

/* ── 問答工具列 / 缺頁餵素材 ──────────────────────────────────────────── */
.chat-tools { display: flex; justify-content: flex-end; padding-bottom: 8px; }
.feed-gap { margin: 22px auto 0; max-width: 440px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.feed-gap .lbl { font-size: 10px; font-weight: 900; letter-spacing: .2em; color: var(--fg-muted); }
.feed-gap textarea {
  font: inherit; font-size: 16px; padding: 10px 12px; border: 3px solid var(--line);
  background: transparent; color: var(--fg); border-radius: 0; resize: vertical;
}

/* 桌面鍵盤提示在手機上沒意義 */
@media (hover: none) { .quick-hint { display: none; } }

/* ── 心得（page_notes）與問答存檔 ──────────────────────────────────────── */
.note-form { display: flex; gap: 8px; margin-top: 8px; }
.note-form input { flex: 1; min-width: 0; background: transparent; color: var(--fg);
  border: 2px solid var(--line); border-radius: 0; padding: 9px 10px; font: inherit; font-size: 16px; }
.note-form input::placeholder { color: var(--fg-faint); }
.note-row { display: flex; align-items: center; gap: 8px; }
.note-row .badge { align-self: center; }
.note-row .note-text { flex: 1; min-width: 0; }
.note-row .note-del { margin-left: auto; flex: 0 0 auto; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--fg-faint); font-size: 20px; cursor: pointer; }
.note-row .note-del:active { color: var(--fg); }
.msg .save-syn { margin: 8px 0 0 10px; align-self: flex-start; }
.lesson-note .note-form { margin-top: 6px; }