/* 迪安咨询 · 阅读版 —— 连续滚动的书 */
:root{
  --nav-w: clamp(150px, 18vw, 236px);
  --paper:#FBF9F4;
  --paper-2:#F4F1E9;
  --ink:#1B1B18;
  --ink-2:#6F6D66;
  --ink-3:#9A978D;
  --line:#E6E1D5;
  --line-2:#D8D2C3;
  --accent:#2C5545;
  --hl:#FFE96B;
  --serif:"Songti SC","Source Han Serif SC","Noto Serif CJK SC","Noto Serif SC",STSong,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --fs: clamp(16px, 1.05vw + 8px, 18px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:rgba(255,233,107,.55)}

#app{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);height:100dvh}

/* ---------------- 左：目录 ---------------- */
.nav{display:flex;flex-direction:column;min-height:0;background:var(--paper-2);border-right:1px solid var(--line)}
.nav-head{padding:calc(10px + env(safe-area-inset-top)) 12px 6px;border-bottom:1px solid var(--line)}
.nav-title{font-size:12.5px;font-weight:600;letter-spacing:.04em}
.nav-sub{margin-top:3px;font-size:10px;color:var(--ink-3);letter-spacing:.02em}
.nav-search{padding:8px 10px;border-bottom:1px solid var(--line)}
.nav-search input{width:100%;height:28px;border:1px solid var(--line-2);border-radius:5px;background:var(--paper);
  color:var(--ink);font-size:11.5px;padding:0 8px;outline:none}
.nav-search input:focus{border-color:var(--accent)}
.nav-search input::placeholder{color:var(--ink-3)}

.toc{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 6px 24px;scrollbar-width:thin}
.toc::-webkit-scrollbar{width:5px}
.toc::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.ch{border-bottom:1px solid var(--line)}
.ch>summary{display:flex;gap:6px;align-items:baseline;padding:9px 6px;font-size:11.5px;font-weight:600;cursor:pointer;
  list-style:none;line-height:1.45}
.ch>summary::-webkit-details-marker{display:none}
.ch>summary .no{color:var(--ink-3);font-weight:500;font-size:10px;flex:0 0 auto}
.ch>summary::after{content:"";width:5px;height:5px;border-right:1.3px solid var(--ink-3);border-bottom:1.3px solid var(--ink-3);
  transform:rotate(45deg);flex:0 0 auto;margin-left:auto;transition:transform .15s;align-self:center}
.ch[open]>summary::after{transform:rotate(-135deg)}
.sub{padding:6px 6px 3px;font-size:10px;color:var(--ink-3);letter-spacing:.02em;line-height:1.5}
.item{display:flex;gap:5px;align-items:baseline;width:100%;text-align:left;padding:4px 6px 4px 14px;
  font-size:11.5px;line-height:1.5;color:var(--ink-2);border-left:2px solid transparent;border-radius:0 3px 3px 0}
.item .seq{flex:0 0 auto;font-size:9.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;padding-top:1px}
.item .t{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item:hover{color:var(--ink);background:rgba(0,0,0,.03)}
.item.active{color:var(--ink);font-weight:600;border-left-color:var(--accent);background:rgba(44,85,69,.06)}
.item.hl::after{content:"";display:block;width:4px;height:4px;border-radius:50%;background:var(--hl);flex:0 0 auto;margin-top:5px;
  box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.nav-foot{border-top:1px solid var(--line);padding:7px 10px calc(7px + env(safe-area-inset-bottom));font-size:10px;color:var(--ink-3)}
.nav-foot .row{display:flex;justify-content:space-between;gap:6px}
.nav-bar{height:3px;background:var(--line);border-radius:2px;margin-top:6px;overflow:hidden}
.nav-bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:2px}

/* ---------------- 右：正文 ---------------- */
.book{position:relative;min-width:0;height:100dvh;overflow-y:auto;overscroll-behavior:contain}
.book::-webkit-scrollbar{width:7px}
.book::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.sticky{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;height:calc(30px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 22px 0;background:rgba(251,249,244,.92);backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);font-size:10.5px;color:var(--ink-3);letter-spacing:.03em;white-space:nowrap;overflow:hidden}
.sticky b{color:var(--ink-2);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.sticky .sp{margin-left:auto;font-variant-numeric:tabular-nums}

.wrap{max-width:660px;margin:0 auto;padding:calc(26px + env(safe-area-inset-top)) 26px calc(120px + env(safe-area-inset-bottom))}
.book-title{font-family:var(--serif);font-size:29px;font-weight:600;letter-spacing:.01em;margin:0 0 8px;line-height:1.35}
.book-desc{font-size:12.5px;color:var(--ink-2);line-height:1.9;margin:0}
.book-rule{height:1px;background:var(--line-2);margin:22px 0 0}

.chapter{margin-top:52px}
.chapter:first-of-type{margin-top:34px}
.ch-no{display:block;font-size:10px;letter-spacing:.34em;color:var(--ink-3);margin-bottom:8px}
.ch-title{font-family:var(--serif);font-size:23px;font-weight:600;margin:0;line-height:1.5}
.ch-intro{font-size:12.5px;line-height:1.95;color:var(--ink-2);margin:10px 0 0;padding-left:12px;border-left:2px solid var(--line-2)}
.sub-head{margin:34px 0 4px;font-size:11px;letter-spacing:.1em;color:var(--ink-3);display:flex;gap:8px;align-items:center}
.sub-head::after{content:"";flex:1;height:1px;background:var(--line)}

.art{padding:26px 0 4px;border-top:1px solid var(--line)}
.art:first-of-type{border-top:0}
.art-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:10px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.art-title{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.5;margin:7px 0 0;letter-spacing:.005em}
.art-orig{font-size:10.5px;color:var(--ink-3);margin-top:5px;line-height:1.6}
.art-body{margin-top:16px}
.art-raw{display:inline-block;margin-top:8px;font-size:10px;color:#8A6D3B;background:#FBF3DC;border:1px solid #EFE1BE;
  border-radius:3px;padding:2px 7px}
.para{font-family:var(--serif);font-size:var(--fs);line-height:1.95;margin:0 0 .95em;letter-spacing:.012em;
  text-align:justify;text-justify:inter-ideograph;overflow-wrap:break-word}
.para:last-child{margin-bottom:0}
.hlk,mark.hl{background-color:var(--hl) !important;color:inherit;padding:.06em 0;border-radius:1px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

.fold{border-top:1px solid var(--line);margin-top:14px}
.fold>summary{cursor:pointer;list-style:none;padding:9px 0;font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;
  display:flex;align-items:center;gap:7px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:"";width:5px;height:5px;border-right:1.4px solid var(--ink-3);border-bottom:1.4px solid var(--ink-3);
  transform:rotate(-45deg);transition:transform .15s;flex:0 0 auto;margin-left:2px}
.fold[open]>summary::before{transform:rotate(45deg)}
.fold>summary:hover{color:var(--ink-2)}
.fold-body{padding:2px 0 12px;font-size:12px;line-height:1.9;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:break-word}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;padding:2px 0 12px}
.gallery a{display:block;aspect-ratio:3/4;background:var(--paper-2);border-radius:3px;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.src-link{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:4px 0 12px}

.end{margin:44px 0 0;text-align:center;font-size:10.5px;color:var(--ink-3);letter-spacing:.06em}
.end::before,.end::after{content:"";display:inline-block;width:26px;height:1px;background:var(--line-2);
  vertical-align:middle;margin:0 10px}

/* ---------------- 高亮工具条 ---------------- */
.selbar{position:fixed;z-index:60;display:none;align-items:center;gap:2px;padding:4px;border-radius:8px;
  background:#1F1F1C;box-shadow:0 6px 22px rgba(0,0,0,.26);transform:translate(-50%,-100%)}
.selbar.on{display:flex}
.selbar button{color:#F4F1E9;font-size:12px;padding:7px 11px;border-radius:5px;white-space:nowrap}
.selbar button:hover{background:rgba(255,255,255,.14)}
.selbar .dot{width:1px;height:16px;background:rgba(255,255,255,.18);margin:0 2px}

.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,10px);
  z-index:70;background:#1F1F1C;color:#F4F1E9;font-size:11.5px;padding:8px 14px;border-radius:20px;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;max-width:80vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

.top{position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:40;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.9);border:1px solid var(--line-2);color:var(--ink-2);display:none;align-items:center;
  justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.08);backdrop-filter:blur(6px)}
.top.on{display:flex}

.empty{padding:80px 20px;text-align:center;color:var(--ink-3);font-size:13px}

@media (max-width:820px){
  :root{--nav-w: clamp(142px, 21vw, 190px)}
  .wrap{padding:22px 20px 110px}
  .book-title{font-size:25px}
  .art-title{font-size:19.5px}
  .ch-title{font-size:21px}
  .para{line-height:1.9}
}
@media (max-width:560px){
  :root{--nav-w: 132px}
  .nav-title{font-size:11px}
  .item{font-size:10.5px;padding-left:10px}
  .sub{display:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---------------- 高亮面板 ---------------- */
.navbtn{color:var(--ink-3);font-size:10px;text-decoration:underline dotted;text-underline-offset:2px}
.navbtn:hover{color:var(--ink-2)}
.hlpanel{position:fixed;top:0;left:0;bottom:0;width:min(380px,88vw);z-index:80;background:var(--paper);
  border-right:1px solid var(--line);box-shadow:8px 0 30px rgba(0,0,0,.1);display:flex;flex-direction:column;
  transform:translateX(-102%);transition:transform .2s ease;padding-top:env(safe-area-inset-top)}
.hlpanel.on{transform:none}
.hlp-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;font-size:13px;font-weight:600;
  border-bottom:1px solid var(--line)}
.hlp-x{font-size:20px;line-height:1;color:var(--ink-3);padding:0 4px}
.hlp-list{flex:1;overflow-y:auto;padding:6px 0 20px}
.hlp-group{padding:10px 16px 2px;font-size:10px;color:var(--ink-3);letter-spacing:.04em}
.hlp-item{display:block;width:100%;text-align:left;padding:8px 16px 8px 18px;border-left:2px solid var(--hl);
  margin:2px 10px 6px;border-radius:0 4px 4px 0;background:rgba(255,233,107,.14);font-family:var(--serif);
  font-size:12.5px;line-height:1.75;color:var(--ink)}
.hlp-item:hover{background:rgba(255,233,107,.3)}
.hlp-item .del{float:right;margin-left:8px;color:var(--ink-3);font-size:11px;font-family:var(--sans)}
.hlp-empty{padding:40px 16px;text-align:center;color:var(--ink-3);font-size:12px;line-height:2}
.hlp-foot{border-top:1px solid var(--line);padding:10px 16px calc(12px + env(safe-area-inset-bottom))}
.hlp-btn{width:100%;height:32px;border:1px solid var(--line-2);border-radius:5px;font-size:11.5px;color:var(--ink-2)}
.hlp-btn:hover{border-color:var(--accent);color:var(--accent)}

/* 占位骨架：正文按章流式载入 */
.art-slot{border-top:1px solid var(--line);padding:26px 0 4px}
.art-slot:first-of-type{border-top:0}
.slot-sk b{display:block;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.5;color:var(--ink-2)}
.slot-sk span{display:block;margin-top:8px;font-size:10.5px;color:var(--ink-3);letter-spacing:.04em}
.slot-sk::after{content:"";display:block;margin-top:14px;height:68px;border-radius:3px;
  background:linear-gradient(90deg,var(--paper-2) 25%,#EFEBE0 37%,var(--paper-2) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.slot-sk::after{animation:none}}

/* 原笔记正文（逐字附在口播原文之后） */
.note-credit{margin:22px 0 8px;font-size:10.5px;letter-spacing:.08em;color:var(--ink-3);
  display:flex;align-items:center;gap:8px}
.note-credit::after{content:"";flex:1;height:1px;background:var(--line)}
.art-caption .para,.art-caption p{font-family:var(--serif);font-size:calc(var(--fs) - 1px);line-height:1.9;margin:0 0 .7em;
  color:var(--ink-2);letter-spacing:.01em;text-align:justify}
.art-caption .para:last-child,.art-caption p:last-child{margin-bottom:0}
.para.cap::selection{background:rgba(255,233,107,.55)}