/* 查到网页版外壳：照 iPad App 的样子（ios/ChaDao/Sources/Views.swift 的 Palette、Adaptive.swift 的 Gap/Radius）。
 * 配色：一张纸（ground/card/edge）+ 两档墨（ink/ink2）+ 赭红 clay（主行动、环节色条、经文出处标题）+ 金 amber（参考思路、收藏星）。 */
:root{
  --ground:#FBF4E4; --card:#FBF7EF; --edge:#EADFC6; --surface:rgba(251,247,239,.92); --border:rgba(120,53,15,.28);
  --ink:#2C2A24; --ink2:#6B6456;
  --amber:#E0A231; --amberD:#B8801B; --amberBg:#F8EBD1;
  --clay:#C9603F; --clayD:#A94A2C; --clayBg:#FAE9E2; --onClay:#fff;
  --scripture:#F5EEDC;
  --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --song:"ChaDao Song","Songti SC","STSong",serif;
  --readable:700px; --wide:1120px;
}
/* 大标题 / 主标题用 App 随包的粗宋体（Noto Serif SC 钉 700 的子集，ios/ChaDao/Resources/Fonts，
 * 由 scripts/make_font_subset.sh 产出；网页用它转的 woff2）。正文一律系统黑体（同 App Fonts.swift）。 */
@font-face{font-family:"ChaDao Song";src:url(/assets/NotoSerifSC-Bold.woff2) format("woff2");font-weight:400 900;font-display:swap}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#191713; --card:#221F19; --edge:#38322A; --surface:rgba(36,31,25,.92); --border:rgba(200,183,154,.26);
  --ink:#F0EADD; --ink2:#B5AC9A;
  --amber:#E8B855; --amberD:#F0C36A; --amberBg:#362B15;
  --clay:#DB7A5A; --clayD:#E99578; --clayBg:#3A231B; --onClay:#241611;
  --scripture:#1F1C17;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{margin:0;min-height:100%;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
/* 羊皮纸底图四边带暗角，只能整张铺满一屏（同 App 的 ParchmentBackground）；平铺会在分栏线旁露出接缝。
 * 用固定的伪元素而不是 background-attachment:fixed —— iOS Safari 不认后者。 */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:url(/assets/parchment.jpg) center/cover no-repeat}
@media (prefers-color-scheme:dark){body::before{display:none}}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.page{max-width:var(--readable);margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 20px 120px}
.page.wide{max-width:var(--wide)}
.hd{display:flex;align-items:center;gap:12px;margin:8px 0 18px}
.hd h1{font-size:32px;font-weight:700;margin:0;flex:1;letter-spacing:1px}
.hd .ic{font-family:var(--sans);font-size:15px;color:var(--ink2)}
.lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--ink2);letter-spacing:1px;margin:24px 0 8px}
.lbl a{color:var(--clayD);letter-spacing:0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px}
.card+.card{margin-top:12px}
.muted{color:var(--ink2)} .small{font-size:14px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 14px;font-size:14px;font-family:var(--sans);
  border:1px solid var(--edge);background:var(--card)}
.chip.on,.btn{background:var(--clayD);border-color:var(--clayD);color:var(--onClay)}
.btn{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:9px 18px;font-size:15px;font-family:var(--sans);font-weight:600}
.btn.o{background:none;color:var(--clayD);border:1px solid var(--clayD);font-weight:500}
.mini{display:block;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 14px;min-width:120px}
.mini b{display:block;font-size:16px;font-weight:600} .mini span{font-size:12px;color:var(--ink2)}
.scroll-x{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.scroll-x::-webkit-scrollbar{display:none}

/* 底部浮动主菜单（App 的玻璃胶囊） */
.menu{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;
  display:flex;gap:2px;padding:5px;border-radius:999px;background:rgba(251,247,239,.78);
  border:1px solid rgba(120,53,15,.16);box-shadow:0 8px 28px rgba(60,40,10,.16);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);font-family:var(--sans)}
@media (prefers-color-scheme:dark){.menu{background:rgba(34,31,25,.8);border-color:rgba(255,255,255,.1)}}
.menu a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:64px;padding:6px 10px;
  border-radius:999px;font-size:11px;color:var(--ink2)}
.menu a svg{width:22px;height:22px}
.menu a[aria-current]{color:var(--ink)}
.menu a.cur{background:var(--clay);color:var(--onClay);max-width:110px}
.menu a.cur span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}

/* 书目：旧约两列、新约两列，分组色只在这一页用 */
.books{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px}
.books .tt{grid-column:span 2;text-align:center;font-size:17px;margin:4px 0 6px}
.books .col{min-width:0}
.grp{font-size:15px;margin:14px 0 4px;font-weight:600}
.bk{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:16px}
.bk i{font-style:normal;font-family:var(--sans);font-size:11px;color:var(--ink2);width:18px;text-align:right}
.bk em{width:2px;align-self:stretch;border-radius:2px}
.bk.no{opacity:.45}
@media (max-width:820px){.books{grid-template-columns:1fr 1fr}.books .tt{grid-column:span 1}}
.chs{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px}
.chs a{display:flex;flex-direction:column;align-items:center;justify-content:center;height:64px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border);font-size:18px}
.chs a small{font-size:10px;color:var(--clayD);font-family:var(--sans)}

/* 读一章：iPad 横着左经文 44% | 右查经；窄屏上方切换 */
.read{display:grid;grid-template-columns:44fr 56fr;height:100vh;height:100dvh}
.read>section{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:max(16px,env(safe-area-inset-top)) 24px 120px}
.read .bib{border-right:1px solid rgba(120,53,15,.14)}
.seg{display:none}
@media (max-width:899px){
  .read{display:block;height:auto}
  .read>section{overflow:visible;padding-top:8px}
  .read .bib{border-right:0}
  .read[data-tab="bib"] .les,.read[data-tab="les"] .bib{display:none}
  .seg{display:flex;position:sticky;top:0;z-index:20;gap:6px;justify-content:center;padding:max(10px,env(safe-area-inset-top)) 0 10px;
    background:linear-gradient(var(--ground) 70%,transparent)}
}
.bar{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-family:var(--sans);font-size:14px}
.bar h2{font-family:var(--serif);font-size:18px;margin:0;flex:1}
.bar .pill{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface);border:1px solid var(--border)}
.bar .pill button,.bar .pill a{padding:4px 10px;border-radius:999px;color:var(--ink2)}
.vs{font-size:18px;line-height:2}
.vs h4{font-size:13px;color:var(--clayD);margin:18px 0 2px;letter-spacing:1px}
.vs p{margin:0 0 8px} .vs p.q{margin:0;padding-left:1.2em;text-indent:-1.2em} .vs p.q2{margin:0;padding-left:2.4em;text-indent:-1.2em}
.vs sup{font-family:var(--sans);font-size:10px;color:var(--ink2);margin:0 2px 0 4px;vertical-align:super}
.vs .hit{background:var(--amberBg);border-radius:3px}

/* 本课卡片 */
.lh h1{font-size:26px;margin:0 0 6px;line-height:1.35}
.meta{display:flex;gap:8px;font-size:15px;color:var(--ink2)} .meta s{text-decoration:none;color:var(--edge)}
.map{margin:14px 0 4px} .map .k{font-size:12px;font-weight:700;color:var(--ink2);letter-spacing:1px}
.map .segs{display:flex;gap:5px;margin-top:6px}
.map .segs button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0;font-size:10px;font-family:var(--sans);color:var(--ink2)}
.map .segs button::before{content:"";display:block;width:100%;height:4px;border-radius:4px;background:var(--edge)}
.map .segs button.on{color:var(--clayD)} .map .segs button.on::before{background:var(--clayD)}
.map .segs span{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.big .k{font-size:12px;font-weight:700;color:var(--clayD);letter-spacing:1px;margin:14px 0 6px}
.big p{margin:0;font-size:16px;line-height:1.8}
.obj{display:flex;gap:8px;align-items:baseline;padding:8px;border-radius:8px;background:var(--clayBg);margin-top:6px;font-size:14px;line-height:1.6}
.obj b{flex:none;width:22px;height:22px;border-radius:50%;background:var(--clayD);color:var(--onClay);font-size:12px;display:grid;place-items:center}

/* 环节 */
.st{display:flex;align-items:center;gap:10px;width:100%;padding:15px 0 5px;text-align:left}
.st i{width:4px;height:24px;border-radius:4px;background:var(--clayD)}
.st.lt i{opacity:.45} .st.lt b{color:var(--ink2)}
.st b{font-size:20px;flex:none}
.st svg{width:12px;height:12px;color:var(--ink2);transition:transform .2s}
.st.shut svg{transform:rotate(-90deg)}
.st em{margin-left:auto;font-style:normal;font-size:13px;color:var(--ink2)}
.note{border:1.5px dashed var(--edge);border-radius:12px;padding:12px;background:var(--surface);font-size:14px;color:var(--ink2);margin:8px 0 10px;line-height:1.7}
.note b.rm{display:block;color:var(--ink);font-size:16px}
.qq{display:flex;gap:11px;position:relative;padding:14px;margin:0 0 10px;border:1px solid var(--border);border-radius:12px;
  background:var(--surface);overflow:hidden;cursor:pointer}
.qq::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--clayD)}
.qq.lt::before{opacity:.45}
.qq .n{flex:none;width:26px;height:26px;margin-top:3px;border-radius:50%;background:rgba(234,223,198,.55);color:var(--ink2);
  font:600 13px/26px var(--sans);text-align:center}
.qq .b{flex:1;min-width:0}
.qq .t{font-size:17px;line-height:1.75}
.qq .ft{display:flex;gap:14px;margin-top:8px;font-size:14px;color:var(--ink2);flex-wrap:wrap}
.qq .ft .ans{color:var(--amberD)}
.qq .ref{margin-top:10px;padding:12px 12px 12px 14px;border-radius:12px;background:var(--scripture);position:relative;font-size:15px;line-height:1.8}
.qq .ref::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--clayD);opacity:.35}
.qq .ref h5{margin:0 0 2px;font-size:12px;color:var(--clayD);letter-spacing:.5px}
.qq .ref sup{font-family:var(--sans);font-size:9px;color:var(--ink2);margin:0 2px}
.qq .a{margin-top:10px;padding:12px;border-radius:12px;background:rgba(248,235,209,.7);font-size:15px;line-height:1.8}
@media (prefers-color-scheme:dark){.qq .a{background:rgba(54,43,21,.7)}}
.qq [hidden]{display:none}
.end{margin-top:24px}
.end .k{font-size:12px;color:var(--ink2);letter-spacing:1px;margin-bottom:8px}
.end .card b{display:block;font-size:16px;margin-bottom:4px}
.tool{margin-top:24px;font-size:13px;color:var(--ink2);border-top:1px solid var(--edge);padding-top:12px;line-height:1.7}

/* 安装提示条（手机直接打开、不在 iPad 外框里时） */
.inst{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:10px;padding:8px 14px;
  background:var(--card);border-bottom:1px solid var(--edge);font-family:var(--sans);font-size:13px}
.inst img{width:30px;height:30px;border-radius:7px}
.inst div{flex:1;line-height:1.3} .inst div b{display:block;font-size:14px}
.inst a.btn{padding:6px 14px;font-size:13px}
.inst button{color:var(--ink2);font-size:18px;padding:0 4px}
.loading{padding:40px 0;text-align:center;color:var(--ink2)}

/* 画重点（App MarkColor 四色：纸上的马克笔，不是贴纸） */
.mk.yellow{background:#F6E3A6} .mk.green{background:#D9E6BA} .mk.blue{background:#CFDCEA} .mk.pink{background:#F1D4CC}
@media (prefers-color-scheme:dark){.mk.yellow{background:#554318}.mk.green{background:#3A4726}.mk.blue{background:#27394B}.mk.pink{background:#4A2C24}}
.vs span[id^="v"]{cursor:pointer;border-radius:3px}
.vs .mkr{font-style:normal;font-size:11px;color:var(--amberD);margin-left:2px;font-family:var(--sans)}
.qq.mk::before{opacity:1}
.qq .qa{margin-left:auto;color:var(--ink2)}
.sw{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle}
.sw.yellow{background:#C99A24}.sw.green{background:#7E9A4E}.sw.blue{background:#5B83A8}.sw.pink{background:#C1705E}
/* 底部操作面板 */
#sheet .sh-bd{position:fixed;inset:0;z-index:90;background:rgba(20,17,12,.35)}
#sheet .sh{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:91;width:min(560px,100%);
  background:var(--card);border-radius:16px 16px 0 0;padding:16px 18px max(18px,env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.15)}
.sh-t{font-weight:700;font-size:16px;color:var(--clayD)}
.sh-v{font-size:15px;line-height:1.7;margin:6px 0 12px;max-height:6.8em;overflow:auto}
.sh-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0}
.sh-row.end{justify-content:space-between}
#sheet textarea,.ik textarea{width:100%;font:inherit;font-size:16px;line-height:1.6;padding:10px 12px;border-radius:12px;border:1px solid var(--edge);
  background:var(--ground);color:var(--ink);resize:vertical}
.dots{display:flex;gap:10px}
.dot{width:28px;height:28px;border-radius:50%;border:2px solid transparent}
.dot.yellow{background:#C99A24}.dot.green{background:#7E9A4E}.dot.blue{background:#5B83A8}.dot.pink{background:#C1705E}
.dot.none{background:var(--surface);border-color:var(--edge);color:var(--ink2);font-size:14px;line-height:24px}
.dot.on{border-color:var(--ink)}
.ik .it{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--edge);font-size:15px}
.ik .it span{flex:1} .ik .it button{color:var(--ink2)}
.ik textarea{margin-top:8px}
.card.list{padding:4px 16px}
.card.list a{display:block;padding:10px 0;border-bottom:1px solid var(--edge)} .card.list a:last-child{border-bottom:0}
.card.list a b{display:block;font-size:15px} .card.list a span{display:block;font-size:13px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbl span{font-family:var(--sans)}

/* 日程 */
.plan .ses{margin-top:10px}
.se{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--edge)}
.se .ck{flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--edge);color:var(--onClay);font-size:13px}
.se.done .ck{background:var(--leaf, #5C9040);border-color:transparent}
.se .dt{flex:none;width:44px;text-align:center;line-height:1.2} .se .dt b{display:block;font-size:16px} .se .dt span{font-size:11px;color:var(--ink2);font-family:var(--sans)}
.se a{flex:1;min-width:0} .se a b{display:block;font-size:15px;font-weight:600} .se a span{font-size:13px;color:var(--ink2)}
.se.done a{opacity:.55}
.se.nx{background:var(--clayBg);margin:0 -16px;padding:10px 16px}
.form label{display:block;font-size:13px;color:var(--ink2);margin:0 0 12px;font-family:var(--sans)}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:4px;font:inherit;font-size:16px;color:var(--ink);padding:8px 10px;border-radius:10px;border:1px solid var(--edge);background:var(--ground)}
.form .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0 12px}
.form .wd{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--ink2);margin:0 0 12px;font-family:var(--sans)}
.form .wd label{display:inline-flex;align-items:center;gap:3px;margin:0;color:var(--ink);font-size:15px}
.form .wd input{display:inline;width:auto;margin:0}
.menu a{min-width:56px}
.vs em.en{display:block;font-style:normal;font-family:Georgia,"Times New Roman",serif;font-size:15px;line-height:1.7;color:var(--ink2);margin:2px 0 6px}
.bar .pill [aria-pressed="true"]{background:var(--clayBg);color:var(--clayD)}
.lb.field .qq .t{font-size:19px;line-height:1.8}
.srch{display:flex;gap:8px;margin:0 0 8px}
.srch input{flex:1;font:inherit;font-size:16px;padding:10px 14px;border-radius:999px;border:1px solid var(--edge);background:var(--card);color:var(--ink)}
.card.list a span mark{background:var(--amberBg);color:inherit;border-radius:2px}
.hits a span{white-space:normal}

/* 哪些用粗宋：页头大标题、章名、卡片大标题、环节名、列表项那一行标题（App 的 largeTitle…title3 + headline） */
.hd h1,.lh h1,.st b,.bar h2,.mini b,.card.list a b,.sh-t,.grp,.bk,.books .tt,.ik>b,.end .card b,.se a b,.inst div b,.chs a,.home-big{
  font-family:var(--song);font-weight:700}