/* ===================================================================
   印光法师文钞 · 文白对照 —— 「纸墨」主题
   宣纸为底，墨为字，朱砂一色作点睛；原文宋体、白话楷体。
   =================================================================== */

:root {
  --paper:    #f6f1e6;   /* 宣纸 */
  --paper-2:  #efe7d4;   /* 重一度的纸 */
  --paper-3:  #e7dcc4;
  --ink:      #322a1e;   /* 浓墨 */
  --ink-2:    #6d5f49;   /* 淡墨 */
  --ink-3:    #a3937a;   /* 飞白 */
  --line:     #d9cdb2;   /* 界栏 */
  --cinnabar: #b03a26;   /* 朱砂 */
  --cinnabar-soft: rgba(176, 58, 38, .12);
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --kai:   "Kaiti SC", "STKaiti", "KaiTi", "LXGW WenKai GB Screen", "Noto Serif SC", serif;
  --fs: 17px;            /* 阅读基准字号，JS 可调 */
  --topbar-h: 52px;
  --reader-w: 44rem;
}
html[data-theme="night"] {
  --paper:    #171310;
  --paper-2:  #1f1a14;
  --paper-3:  #2a2319;
  --ink:      #d9cfbc;
  --ink-2:    #a29478;
  --ink-3:    #6e6450;
  --line:     #383021;
  --cinnabar: #d4694e;
  --cinnabar-soft: rgba(212, 105, 78, .14);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  /* 宣纸细纹 */
  background-image: radial-gradient(rgba(0,0,0,.022) 1px, transparent 1px);
  background-size: 5px 5px;
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.8;
}
button { font-family: inherit; color: inherit; }

/* ---------------- 顶栏 ---------------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.icon-btn {
  width: 48px; height: 48px; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer; color: var(--ink-2);
}
.icon-btn:active { color: var(--cinnabar); }
.topbar-title {
  border: 0; background: none; cursor: pointer;
  font-size: 15px; letter-spacing: .12em; font-weight: 600;
  max-width: 56vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink);
}

/* 阅读进度细线（仅文章页显示） */
.read-progress {
  position: fixed; left: 0; z-index: 31;
  top: calc(var(--topbar-h) + env(safe-area-inset-top));
  height: 2px; width: 0;
  background: var(--cinnabar);
  pointer-events: none;
}

/* ---------------- 朱印 ---------------- */
.seal {
  flex: none; width: 38px; height: 38px;
  background: var(--cinnabar); color: #f6f1e6;
  display: grid; place-items: center;
  font-size: 13px; line-height: 1.15; font-weight: 600;
  letter-spacing: .08em; text-align: center;
  writing-mode: vertical-rl;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px rgba(246,241,230,.5), inset 0 0 0 3px var(--cinnabar);
}

/* ---------------- 抽屉 ---------------- */
.drawer {
  position: fixed; top: 0; bottom: 0; z-index: 50;
  width: min(86vw, 340px);
  display: flex; flex-direction: column;
  background: var(--paper);
  transition: transform .28s cubic-bezier(.2, .7, .3, 1);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.drawer-left  { left: 0;  transform: translateX(-102%); border-right: 1px solid var(--line); }
.drawer-right { right: 0; transform: translateX(102%);  border-left: 1px solid var(--line); }
.drawer.open  { transform: translateX(0); box-shadow: 0 0 48px rgba(40,30,10,.25); }
.overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(30, 22, 8, .32);
  opacity: 0; transition: opacity .28s;
}
.overlay.show { opacity: 1; }

.drawer-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--line);
}
.drawer-head-text { flex: 1; min-width: 0; }
.drawer-head-text strong { display: block; font-size: 16px; letter-spacing: .1em; }
.drawer-head-text small { color: var(--ink-3); font-size: 12px; }

/* 目录树 */
.nav-search { padding: 10px 14px 6px; }
.nav-search input {
  width: 100%; padding: 8px 12px; font: 14px var(--serif);
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; outline: none;
}
.nav-search input:focus { border-color: var(--cinnabar); }
.nav-tree { flex: 1; overflow-y: auto; padding: 4px 0 12px; overscroll-behavior: contain; }
.nav-tree details { border-bottom: 1px solid transparent; }
.nav-tree summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; font-size: 14.5px;
}
.nav-tree summary::-webkit-details-marker { display: none; }
.nav-tree summary .tri {
  flex: none; width: 0; height: 0; transition: transform .18s;
  border-left: 5px solid var(--ink-3);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.nav-tree details[open] > summary .tri { transform: rotate(90deg); }
.nav-vol > summary { font-weight: 600; letter-spacing: .06em; }
.nav-vol > summary .count { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-weight: 400; }
.nav-juan > summary { padding-left: 28px; color: var(--ink-2); font-size: 13.5px; }
.nav-cat-label { padding: 7px 16px 3px 40px; font-size: 12px; color: var(--ink-3); letter-spacing: .2em; }
.nav-item {
  display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 7px 16px 7px 40px; font-size: 14px; line-height: 1.5; color: var(--ink-2);
}
.nav-item:hover { color: var(--ink); }
.nav-item.active {
  color: var(--cinnabar);
  background: linear-gradient(90deg, var(--cinnabar-soft), transparent 70%);
  border-left: 2px solid var(--cinnabar); padding-left: 38px;
}
.nav-item.visited:not(.active)::after { content: "·"; color: var(--cinnabar); margin-left: 4px; }
.nav-empty { padding: 24px 16px; color: var(--ink-3); font-size: 13.5px; text-align: center; }

/* 全文检索 */
.ft-btn {
  display: block; width: calc(100% - 28px); margin: 8px 14px;
  padding: 8px 12px; cursor: pointer;
  border: 1px solid var(--cinnabar); border-radius: 8px;
  background: var(--cinnabar-soft); color: var(--cinnabar);
  font-size: 13.5px; letter-spacing: .05em;
}
.search-count { padding: 8px 16px 2px; font-size: 12px; color: var(--ink-3); letter-spacing: .15em; }
.search-hit {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--line); background: none;
  padding: 9px 16px; line-height: 1.55;
}
.search-hit .sh-title { font-size: 14px; color: var(--ink); }
.search-hit .sh-vol { margin-left: 8px; font-size: 11px; color: var(--ink-3); }
.search-hit .sh-snip { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-2); font-family: var(--kai); }
.search-hit mark, mark.find-hit {
  background: var(--cinnabar-soft); color: var(--cinnabar);
  border-radius: 2px; padding: 0 1px;
}
.search-hit:active { background: var(--paper-2); }

.drawer-foot { border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.pref-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--ink-2); padding: 5px 0;
}
.pref-btns { display: flex; gap: 8px; }
.chip-btn {
  border: 1px solid var(--line); background: var(--paper-2);
  border-radius: 999px; padding: 4px 14px; font-size: 13px; cursor: pointer;
  color: var(--ink-2); transition: all .15s;
}
.chip-btn:active, .chip-btn.on { color: var(--cinnabar); border-color: var(--cinnabar); }

/* ---------------- 阅读主区 ---------------- */
.reader {
  max-width: var(--reader-w);
  margin: 0 auto;
  padding: calc(var(--topbar-h) + env(safe-area-inset-top)) 0 0;
  min-height: 100vh;
}
.reader-inner { padding: 0 22px calc(48px + env(safe-area-inset-bottom)); }

/* 模式切换：原文 / 白话 / 对照 */
.mode-bar {
  position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top)); z-index: 20;
  display: flex; justify-content: center; gap: 0;
  padding: 10px 0 12px;
  background: linear-gradient(var(--paper) 78%, transparent);
}
.mode-bar .seg {
  border: 1px solid var(--line); background: var(--paper-2);
  font-size: 13.5px; letter-spacing: .1em; padding: 5px 18px; cursor: pointer;
  color: var(--ink-2);
}
.mode-bar .seg:first-child { border-radius: 999px 0 0 999px; }
.mode-bar .seg:last-child { border-radius: 0 999px 999px 0; }
.mode-bar .seg + .seg { border-left: 0; }
.mode-bar .seg.on { background: var(--cinnabar); border-color: var(--cinnabar); color: #f8f3e8; }

/* 文章头 */
.art-head { text-align: center; padding: 26px 0 8px; }
.art-crumb { font-size: 12.5px; color: var(--ink-3); letter-spacing: .25em; }
.art-title {
  font-size: 24px; font-weight: 900; line-height: 1.45;
  letter-spacing: .06em; margin: 10px 0 6px;
}
.art-head .rule {
  width: 56px; height: 3px; margin: 14px auto 0;
  background: var(--cinnabar); border-radius: 2px;
}

/* 正文 */
.art-body { font-size: var(--fs); }
.para-pair { margin: 0 0 4px; }
.p-orig {
  margin: 1.1em 0 .4em; text-align: justify; text-indent: 2em;
  line-height: 2.05; letter-spacing: .015em;
}
.p-trans {
  margin: 0 0 1.1em; padding: 2px 0 2px 14px;
  border-left: 2px solid var(--cinnabar-soft);
  font-family: var(--kai);
  font-size: calc(var(--fs) - 1px);
  color: var(--ink-2); line-height: 1.95; text-align: justify;
}
/* 单读模式：原文连排向书页靠拢——段距收窄，靠首行缩进分段 */
.art-body[data-mode="orig"] .p-trans { display: none; }
.art-body[data-mode="orig"] .p-orig { margin: 0 0 .4em; }
.art-body[data-mode="trans"] .p-orig { display: none; }
.art-body[data-mode="trans"] .p-trans { border-left: 0; padding-left: 0; text-indent: 2em; }
/* 不配对的段组：原文块 + 白话块 */
.block-label {
  font-size: 12px; letter-spacing: .3em; color: var(--ink-3);
  margin: 1.6em 0 .2em; display: flex; align-items: center; gap: 10px;
}
.block-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.art-body[data-mode="orig"] .block-label, .art-body[data-mode="trans"] .block-label { display: none; }

/* 提要盒（白话版底本自带【提要】） */
.art-summary {
  margin: 0 0 1.4em; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper-2);
  font-family: var(--kai); font-size: calc(var(--fs) - 2px);
  line-height: 1.9; color: var(--ink-2); text-align: justify;
}
.art-summary b {
  color: var(--cinnabar); font-weight: 600;
  letter-spacing: .2em; margin-right: .6em;
}

/* 行内注释角标 */
sup.note-ref {
  font-size: .62em; color: var(--cinnabar);
  cursor: pointer; padding: 0 .15em; user-select: none;
  font-family: var(--serif);
}
sup.note-ref:active { background: var(--cinnabar-soft); border-radius: 3px; }

/* 名相词条 */
.term {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
  border-bottom: 1px dotted var(--cinnabar);
  text-decoration: none;
}
.term:active { background: var(--cinnabar-soft); }

/* 注释区 */
.notes-sec { margin-top: 2.4em; border-top: 1px solid var(--line); padding-top: 1em; }
.notes-sec h3 { font-size: 14px; letter-spacing: .3em; color: var(--ink-3); font-weight: 600; }
.note-item { font-size: calc(var(--fs) - 3px); color: var(--ink-2); line-height: 1.85; margin: .65em 0; }
.note-item .note-n { color: var(--cinnabar); font-weight: 600; margin-right: 6px; }
.note-item .note-term { font-weight: 600; color: var(--ink); }

/* 篇间导航 */
.art-nav {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 3em; padding-top: 1.2em; border-top: 1px solid var(--line);
}
.art-nav button {
  flex: 1; border: 1px solid var(--line); background: var(--paper-2);
  padding: 12px 14px; border-radius: 8px; cursor: pointer;
  font-size: 13.5px; color: var(--ink-2); text-align: left; line-height: 1.5;
}
.art-nav button:last-child { text-align: right; }
.art-nav button small { display: block; color: var(--ink-3); font-size: 11px; letter-spacing: .2em; }
.art-nav button:active { border-color: var(--cinnabar); color: var(--cinnabar); }
.art-anomaly { margin-top: 2em; font-size: 12px; color: var(--ink-3); }

/* ---------------- 首页 ---------------- */
.home { padding: 40px 22px calc(60px + env(safe-area-inset-bottom)); }
.home-hero { display: flex; justify-content: center; gap: 22px; padding: 28px 0 36px; }
.home-hero .v-title {
  writing-mode: vertical-rl; font-size: 34px; font-weight: 900;
  letter-spacing: .28em; line-height: 1.3;
}
.home-hero .v-sub {
  writing-mode: vertical-rl; font-size: 14px; color: var(--ink-2);
  letter-spacing: .42em; padding-top: 10px; font-family: var(--kai);
}
.home-hero .seal { width: 46px; height: 46px; font-size: 15px; align-self: flex-end; }
.resume-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper-2);
  border-radius: 10px; padding: 14px 16px; margin: 0 0 26px;
}
.resume-card small { display: block; color: var(--ink-3); font-size: 11.5px; letter-spacing: .25em; margin-bottom: 4px; }
.resume-card strong { font-size: 15.5px; font-weight: 600; }
.resume-card .pct { float: right; color: var(--cinnabar); font-size: 13px; }
.home h2 {
  font-size: 13px; color: var(--ink-3); letter-spacing: .35em;
  font-weight: 600; margin: 26px 0 10px;
}
.vol-card {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; cursor: pointer;
  border: 0; border-top: 1px solid var(--line); background: none;
  padding: 13px 2px; font-size: 16px;
}
.vol-card:last-of-type { border-bottom: 1px solid var(--line); }
.vol-card .vol-name { font-weight: 600; letter-spacing: .04em; }
.vol-card .vol-group { font-size: 12px; color: var(--ink-3); }
.vol-card .vol-count { margin-left: auto; flex: none; font-size: 12.5px; color: var(--ink-3); }
.home-note { margin-top: 30px; font-size: 12.5px; color: var(--ink-3); line-height: 1.9; font-family: var(--kai); }

/* ---------------- AI 抽屉 ---------------- */
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px 4px; }
.ai-log { flex: 1; overflow-y: auto; padding: 10px 14px; overscroll-behavior: contain; }
.ai-msg { max-width: 92%; font-size: 14px; line-height: 1.8; margin: 8px 0; }
.ai-msg.user {
  margin-left: auto; background: var(--cinnabar-soft);
  padding: 8px 12px; border-radius: 10px 10px 2px 10px;
}
.ai-msg.bot {
  background: var(--paper-2); border: 1px solid var(--line);
  padding: 8px 12px; border-radius: 10px 10px 10px 2px;
  font-family: var(--kai);
}
.ai-msg.bot cite { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3); font-style: normal; }
.ai-input { display: flex; gap: 8px; padding: 8px 14px 4px; border-top: 1px solid var(--line); }
.ai-input textarea {
  flex: 1; resize: none; padding: 8px 12px; font: 14px var(--serif);
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; outline: none; line-height: 1.6;
}
.ai-input textarea:focus { border-color: var(--cinnabar); }
.ai-disclaimer { margin: 4px 0 8px; text-align: center; font-size: 11.5px; color: var(--ink-3); }

/* 注释弹卡 */
.sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(30,22,8,.32); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  max-height: 62vh; overflow-y: auto;
  background: var(--paper); border-top: 2px solid var(--cinnabar);
  border-radius: 14px 14px 0 0;
  padding: 6px 22px calc(22px + env(safe-area-inset-bottom));
  animation: sheet-up .22s ease-out;
}
@keyframes sheet-up { from { transform: translateY(40%); opacity: .4; } }
.sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 6px auto 10px; }
.sheet-body h4 { margin: 0 0 6px; font-size: 17px; }
.sheet-body h4 .note-n { color: var(--cinnabar); font-size: 13px; margin-left: 8px; }
.sheet-body p { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--ink-2); white-space: pre-line; }

/* 载入态 */
.loading { padding: 80px 0; text-align: center; color: var(--ink-3); letter-spacing: .3em; font-size: 13px; }

/* ---------------- 平板/桌面：三栏常驻 ---------------- */
@media (min-width: 1180px) {
  .drawer-left { transform: none; box-shadow: none; }
  .drawer-right { transform: none; box-shadow: none; }
  .drawer-right:not(.open) { display: flex; }
  body[data-wide] .reader { margin-left: 340px; margin-right: 340px; max-width: none; }
  body[data-wide] .reader .reader-inner, body[data-wide] .home { max-width: var(--reader-w); margin: 0 auto; }
  body[data-wide] .topbar { left: 340px; right: 340px; }
  .overlay { display: none; }
  #btn-nav, #btn-ai, #btn-ai-close { visibility: hidden; }
}