:root { --ink:#29291f; --muted:#777569; --rule:#d9d5c8; --accent:#a44b2e; --paper:#f5f1e7; --panel:#ebe6da; --serif:'Noto Serif SC','Songti SC',STSong,serif; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { margin:0; height:100%; overflow:hidden; }
body { color:var(--ink); background:var(--paper); font-family:var(--serif); }
button,select { font:inherit; color:inherit; }
button,summary { cursor:pointer; }
button:disabled { opacity:.45; cursor:default; }
button:focus-visible,summary:focus-visible,select:focus-visible,#sutraText:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.app-shell { height:100vh; height:100svh; display:flex; flex-direction:column; }
.topbar { flex:none; height:48px; padding:0 16px; display:flex; gap:12px; align-items:center; border-bottom:1px solid var(--rule); }
.brand-seal { width:25px; height:25px; flex:none; display:grid; place-items:center; background:var(--accent); color:#fff7e9; border-radius:2px; }
#bookTitle { flex:1; min-width:0; font-size:15px; font-weight:500; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tool-button,.text-button,.close-button { border:0; background:transparent; color:var(--muted); padding:7px 9px; font-size:12px; border-radius:3px; white-space:nowrap; }
.tool-button:hover,.text-button:hover { color:var(--accent); background:color-mix(in srgb,var(--accent) 6%,transparent); }
.close-button { font-size:24px; }
.popover { position:relative; flex:none; }
.popover summary { list-style:none; }
.popover summary::-webkit-details-marker { display:none; }
.popover[open] > summary { color:var(--accent); background:var(--panel); }
.popover-panel { position:absolute; z-index:35; right:0; top:calc(100% + 8px); width:min(370px,calc(100vw - 24px)); max-height:calc(100svh - 120px); overflow:auto; padding:20px; border:1px solid var(--rule); border-radius:5px; background:var(--paper); box-shadow:0 12px 40px rgba(30,25,15,.16); font-size:12px; line-height:1.8; }
.popover-panel p { margin:8px 0; overflow-wrap:anywhere; color:var(--muted); }
.popover-panel a { color:var(--accent); }
.eyebrow { color:var(--accent)!important; font-size:11px; }
.book-picker-label { display:block; margin-bottom:5px; }
.book-picker { width:100%; padding:9px; border:1px solid var(--rule); border-radius:3px; background:var(--paper); }
.info-actions { display:flex; gap:8px; border-top:1px solid var(--rule); margin-top:15px; padding-top:10px; }
.bookmark-on { color:var(--accent); }
.reading-layout { flex:1; min-height:0; display:grid; grid-template-columns:210px minmax(0,1fr); }
body.catalog-hidden .reading-layout { grid-template-columns:minmax(0,1fr); }
body.catalog-hidden .catalog { display:none; }
.catalog { min-height:0; overflow:auto; padding:10px 12px; border-right:1px solid var(--rule); background:color-mix(in srgb,var(--panel) 40%,var(--paper)); scrollbar-color:var(--rule) transparent; }
.catalog-heading { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--rule); font-size:13px; }
.catalog-heading strong { font-weight:500; }
.catalog-volume { font-size:11px; color:var(--muted); margin:12px 3px 4px; }
.catalog-count { color:var(--muted); font-size:10px; }
#chapterList { padding:10px 0 20px; }
.chapter { display:flex; width:100%; align-items:baseline; gap:7px; padding:9px 7px; text-align:left; border:0; background:transparent; border-radius:3px; font-size:12px; }
.chapter span { min-width:20px; color:var(--muted); font:10px 'DM Mono',monospace; }
.chapter:hover { background:color-mix(in srgb,var(--accent) 6%,transparent); }
.chapter.active { color:#fff8eb; background:var(--accent); }
.chapter.active span { color:#f6d7c6; }
.catalog-footer { border-top:1px solid var(--rule); padding:12px 3px; color:var(--muted); font-size:10px; }
.reader { min-width:0; min-height:0; display:flex; flex-direction:column; }
.reader-tools { flex:none; height:44px; display:flex; gap:12px; align-items:center; padding:0 18px; border-bottom:1px solid var(--rule); }
#sectionTitle { margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:500; }
#readingProgress { color:var(--muted); font-size:10px; white-space:nowrap; }
.content-switches { margin-left:auto; display:flex; gap:4px; }
.content-switches button { background:transparent; color:var(--muted); border:1px solid transparent; border-radius:3px; padding:6px 9px; font-size:12px; white-space:nowrap; }
.content-switches button[aria-pressed="true"] { color:var(--accent); border-color:var(--rule); background:color-mix(in srgb,var(--accent) 5%,transparent); }
.comparison-reader { flex:1; min-height:0; padding:0 18px; }
.reading-columns { position:relative; display:grid; height:100%; min-height:0; grid-template-columns:clamp(260px,27vw,400px) minmax(0,1.8fr) minmax(240px,.8fr); }
.reading-columns:has(.scan-column[hidden]) { grid-template-columns:minmax(0,1.8fr) minmax(240px,.8fr); }
.reading-columns:has(.translation-column[hidden]) { grid-template-columns:clamp(260px,27vw,400px) minmax(0,1fr); }
.reading-columns:has(.scan-column[hidden]):has(.translation-column[hidden]) { grid-template-columns:minmax(0,1fr); }
.text-column,.scan-column { min-width:0; min-height:0; display:flex; flex-direction:column; }
.original-column { border-right:1px solid var(--rule); }
.reading-columns:has(.translation-column[hidden]) .original-column { border-right:0; }
.scan-column { border-right:1px solid var(--rule); }
.column-heading { height:34px; flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 10px; border-bottom:1px solid var(--rule); color:var(--muted); font-size:11px; }
.column-heading .text-button { font-size:10px; padding:5px; }
.guide-link { text-decoration:none; }
#translationMode { max-width:115px; background:transparent; border:1px solid var(--rule); border-radius:3px; padding:2px 4px; font-size:11px; }
.chapter-guide { flex:none; margin-left:8px; color:var(--muted); font:11px/1.8 system-ui,sans-serif; }
.chapter-guide > summary { padding:4px; border-radius:3px; white-space:nowrap; }
.chapter-guide-body { position:absolute; z-index:36; top:calc(100% + 8px); right:-90px; width:min(340px,calc(100vw - 34px)); max-height:55svh; overflow:auto; padding:12px 14px; border:1px solid var(--rule); border-radius:5px; background:var(--paper); box-shadow:0 8px 24px rgba(30,25,15,.16); font-size:12px; }
.chapter-guide p { margin:6px 0; }
.chapter-guide a { color:var(--accent); }
#interpretationSources { display:flex; gap:14px; }
@media (max-width:759px) { .topbar .guide-link { font-size:10px; padding-inline:3px; } }
#closeTranslation,#closeScan { font-size:20px; }
.text-scroll { flex:1; min-height:0; overflow:auto; padding:22px clamp(12px,3vw,44px) 32px; scrollbar-color:var(--rule) transparent; overscroll-behavior:contain; }
.sutra-text p,.translation-text p { margin:0 auto .8em; text-align:justify; text-justify:inter-ideograph; overflow-wrap:anywhere; }
.sutra-text p { max-width:42em; position:relative; padding-left:10px; border-left:2px solid transparent; font-size:var(--reader-font-size,23px); line-height:var(--reader-line-height,1.68); cursor:pointer; }
.sutra-text p.active { border-left-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%,transparent); }
.sutra-text p.resume-marker::before { content:""; position:absolute; left:-5px; top:.5em; width:7px; height:7px; border-radius:50%; background:#5d8066; }
.sutra-text p.resume-marker { box-shadow:inset 0 -1px color-mix(in srgb,#5d8066 40%,transparent); }
.translation-text { padding:22px 16px 32px; }
.translation-text p { font-size:15px; line-height:var(--reader-line-height,1.8); color:var(--muted); }
.translation-text p.alignable { cursor:pointer; }
.translation-text p.linked { background:color-mix(in srgb,var(--accent) 7%,transparent); }
.translation-unavailable { font-size:11px!important; font-style:italic; }
.translation-missing { color:var(--muted); font-size:12px; line-height:1.8; }
.translation-missing a { color:var(--accent); }
.scan-frame { flex:1; min-height:0; min-width:0; overflow:auto; padding:12px; }
.scan-paper { display:block; max-width:none; width:100%; height:auto; }
.scan-status { min-height:100px; padding:24px 8px; font-size:12px; color:var(--muted); text-align:center; }
.scan-controls { flex:none; padding:8px 4px; display:flex; flex-wrap:wrap; gap:4px; align-items:center; justify-content:center; font-size:10px; color:var(--muted); }
.scan-controls button { border:0; background:transparent; font-size:18px; padding:2px 5px; }
.scan-controls select { max-width:115px; min-width:0; border:1px solid var(--rule); border-radius:4px; background:var(--paper); color:var(--ink); padding:4px; font-size:11px; }
.scan-controls a,.scan-note a { color:var(--accent); }
.scan-note { margin:0 8px 12px; font-size:10px; color:var(--muted); }
.auxiliary-scrim { position:absolute; inset:0; border:0; z-index:11; background:rgba(25,22,15,.18); }
.copy-recording-bar { flex:none; min-height:52px; padding:8px 18px max(8px,env(safe-area-inset-bottom)); border-top:1px solid var(--rule); display:flex; gap:12px; align-items:center; background:var(--paper); }
.dock-summary { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:10px; color:var(--muted); }
#recordingStatus { color:var(--accent); }
#resumeLocation { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dock-actions { display:flex; gap:6px; align-items:center; flex:none; }
.copy-confirm,.copy-secondary { padding:8px 14px; border:1px solid var(--accent); border-radius:3px; background:var(--accent); color:#fff8eb; font-size:12px; white-space:nowrap; }
.copy-secondary { color:var(--muted); background:transparent; border-color:var(--rule); }
.copy-confirm.secondary { color:var(--accent); background:transparent; border-color:var(--rule); }
body.is-recording #copyModeButton { color:var(--muted); background:transparent; border-color:transparent; padding:7px 5px; font-size:11px; }
body.dock-collapsed .dock-secondary,body.dock-collapsed .dock-summary { display:none; }
body.dock-collapsed .copy-recording-bar { justify-content:flex-end; min-height:44px; padding-top:5px; padding-bottom:max(5px,env(safe-area-inset-bottom)); }
.record-details .popover-panel { top:auto; bottom:calc(100% + 14px); }
.copy-progress-track { height:3px; margin:12px 0; background:var(--rule); }
.copy-progress-track span { display:block; height:100%; background:var(--accent); }
.has-saved-position::before { content:"● "; color:#5d8066; }
body.header-collapsed .topbar { height:38px; }
body.header-collapsed #bookTitle,body.header-collapsed .brand-seal { display:none; }
body.header-collapsed .book-info { margin-left:auto; }
.settings-panel { position:fixed; z-index:50; inset:0 0 0 auto; width:min(345px,92vw); overflow:auto; padding:22px; background:var(--panel); transform:translateX(100%); transition:transform .2s; box-shadow:-10px 0 40px rgba(25,22,15,.12); }
.settings-panel.open { transform:translateX(0); }
.panel-heading,.records-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--rule); padding-bottom:15px; }
.panel-heading h2,.records-heading h2 { font-size:20px; font-weight:500; margin:0; }
.setting-group { margin-top:22px; }
.setting-group label { display:flex; justify-content:space-between; font-size:13px; }
.setting-group output { color:var(--accent); font-size:11px; }
input[type=range] { width:100%; margin-top:14px; accent-color:var(--accent); }
.choice-row,.theme-row,.script-switch,.layout-choices { display:flex; gap:7px; margin-top:10px; }
.choice-row button,.theme-row button,.script-switch button,.layout-choices button { flex:1; padding:8px 5px; background:transparent; border:1px solid var(--rule); border-radius:3px; font-size:12px; }
.choice-row .active,.theme-row .active,.script-switch [aria-pressed="true"],.layout-choices [aria-pressed="true"] { color:var(--accent); border-color:var(--accent); }
.theme-row .paper { background:#f7f1e5; }.theme-row .mist { background:#e2e5e1; }.theme-row .night { background:#2d342e; color:#e8e2d4; }
.setting-divider { border-top:1px solid var(--rule); margin-top:26px; }
.quiet-button { border:0; background:transparent; color:var(--muted); text-decoration:underline; padding:15px 0; font-size:11px; }
.scrim { position:fixed; z-index:40; inset:0; opacity:0; pointer-events:none; background:rgba(25,22,15,.22); }
.scrim.show { opacity:1; pointer-events:auto; }
.records-dialog { width:min(600px,calc(100vw - 24px)); max-height:85svh; padding:22px; border:1px solid var(--rule); border-radius:5px; background:var(--paper); color:var(--ink); }
.records-dialog::backdrop { background:rgba(25,22,15,.35); }
.records-summary { padding:15px 0; font-size:12px; color:var(--accent); line-height:1.8; }
.records-list { max-height:50svh; overflow:auto; }
.record-day { padding:14px 0; border-bottom:1px solid var(--rule); }
.record-day strong { font-size:12px; }
.record-position { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.record-position p,.records-empty { color:var(--muted); font-size:12px; line-height:1.8; }
.record-resume { border:1px solid var(--rule); background:transparent; color:var(--accent); padding:5px 10px; font-size:12px; flex:none; }
.records-footer { padding-top:15px; display:flex; gap:12px; align-items:center; justify-content:space-between; font-size:10px; color:var(--muted); }
.copy-toast { position:fixed; z-index:70; left:50%; bottom:85px; transform:translate(-50%,10px); opacity:0; pointer-events:none; padding:10px 16px; max-width:calc(100vw - 24px); width:max-content; background:var(--panel); border:1px solid var(--rule); border-radius:4px; font-size:12px; transition:opacity .15s,transform .15s; }
.copy-toast.show { opacity:1; transform:translate(-50%,0); }
body.theme-mist { --paper:#edf0ed; --panel:#e1e5e1; --rule:#cbd0ca; --ink:#2d332d; --muted:#6d756d; }
body.theme-night { --paper:#202620; --panel:#29312a; --rule:#4a5149; --ink:#e5e0d2; --muted:#b5b6a9; --accent:#d08260; }
@media (max-width:1099px) {
  .reading-layout,body.catalog-hidden .reading-layout { grid-template-columns:minmax(0,1fr); }
  .catalog,body.catalog-hidden .catalog { display:none; position:fixed; z-index:45; top:48px; bottom:0; left:0; width:min(290px,85vw); border-right:1px solid var(--rule); box-shadow:8px 0 30px rgba(25,22,15,.12); }
  .catalog.open,body.catalog-hidden .catalog.open { display:block; }
  body.header-collapsed .catalog { top:38px; }
  .reading-columns,.reading-columns:has(.scan-column[hidden]) { grid-template-columns:minmax(0,1.8fr) minmax(230px,.8fr); }
  .reading-columns:has(.translation-column[hidden]) { grid-template-columns:minmax(0,1fr); }
  .scan-column { position:absolute; z-index:12; inset:0 auto 0 0; width:min(390px,90%); background:var(--paper); box-shadow:8px 0 30px rgba(25,22,15,.15); }
  .copy-recording-bar { gap:8px; padding-left:12px; padding-right:12px; }
  .dock-actions { gap:3px; }
}
@media (max-width:759px) {
  .topbar { padding:0 8px; gap:5px; height:44px; }
  .brand-seal { display:none; }
  #bookTitle { font-size:13px; }
  .topbar .tool-button { font-size:11px; padding:8px 6px; }
  #settingsButton span { display:none; }
  .book-info summary { font-size:10px!important; }
  .book-info .popover-panel { position:fixed; right:12px; top:52px; }
  .catalog,body.catalog-hidden .catalog { top:44px; }
  .reader-tools { padding:0 8px; gap:6px; height:40px; }
  #sectionTitle { font-size:12px; }
  #readingProgress { font-size:9px; }
  .content-switches { gap:0; }
  .content-switches button,#nextChapter { font-size:11px; padding:7px 5px; }
  .comparison-reader { padding:0 6px; }
  .reading-columns,.reading-columns:has(.scan-column[hidden]),.reading-columns:has(.translation-column[hidden]) { grid-template-columns:minmax(0,1fr); }
  .original-column { border-right:0; }
  .translation-column { position:absolute; z-index:12; inset:0 0 0 auto; width:min(420px,94%); background:var(--paper); box-shadow:-8px 0 30px rgba(25,22,15,.15); }
  .column-heading { height:30px; }
  .text-scroll { padding:14px 10px 24px; }
  .copy-recording-bar { flex-wrap:wrap; gap:5px; padding:6px 8px max(6px,env(safe-area-inset-bottom)); }
  .dock-summary { flex-direction:row; justify-content:space-between; width:100%; flex:1 1 100%; gap:10px; font-size:9px; }
  .dock-actions { flex:1; justify-content:flex-end; gap:4px; flex-wrap:wrap; }
  .dock-actions .tool-button { font-size:10px; padding:8px 5px; }
  .copy-confirm { font-size:11px; padding:9px 10px; }
  body.has-resume:not(.is-recording) #copyModeButton { display:none; }
  .record-details .popover-panel { position:fixed; top:auto; bottom:85px; right:12px; }
  body.dock-collapsed .copy-recording-bar { min-height:40px; }
  .records-footer { flex-wrap:wrap; }
}
@media (max-width:379px) {
  .dock-actions { gap:2px; }
  .dock-actions .tool-button { padding:8px 4px; }
  .copy-confirm { padding:9px 7px; }
  .dock-secondary .tool-button { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }
/* The selected paragraph supplies the scripture's keyboard focus cue. */
#sutraText:focus-visible { outline:none; }

/* Scroll space keeps boundary paragraphs at the same reading focus as middle ones. */
.text-scroll::before,.text-scroll::after { content:""; display:block; height:var(--reading-edge-space,0px); }

/* Verified original/translation pairs occupy the same row and scroll together. */
.paragraph-content { display:block; width:100%; }
.aligned-parallel .text-scroll p { display:flex; align-items:center; min-height:var(--aligned-block-height,0px); margin-bottom:18px; }
.aligned-parallel .text-scroll p.oversized-pair { align-items:flex-start; }
.translation-text p { padding-left:10px; border-left:2px solid transparent; }
.translation-text p.linked { border-left-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); color:var(--ink); }
.text-scroll p.paired-hover { background:color-mix(in srgb,var(--accent) 6%,transparent); }
.alignment-label { margin-left:auto; margin-right:8px; color:var(--accent); font-size:10px; white-space:nowrap; }

.translation-review-button { display:inline; margin-right:6px; padding:1px 4px; border:1px solid var(--rule); border-radius:2px; background:transparent; color:var(--accent); font:10px var(--serif); vertical-align:middle; }
.translation-review-content { max-height:65svh; overflow:auto; font-size:13px; line-height:1.9; }
.translation-review-content h3 { font-size:13px; color:var(--accent); margin-top:18px; }
.translation-review-content p { overflow-wrap:anywhere; white-space:pre-wrap; }

.volume-group { border-bottom:1px solid var(--rule); padding:3px 0; }
.volume-group > summary { cursor:pointer; padding:9px 5px; font-size:13px; color:var(--muted); }
.volume-group.current-volume-group > summary { color:var(--accent); font-weight:600; }
.volume-group .volume-start { margin-left:10px; padding:5px 9px; color:var(--accent); font-size:10px; }
.volume-group .chapter { padding-left:12px; }
.current-volume { flex:none; max-width:75px; overflow:hidden; text-overflow:ellipsis; padding:4px 7px; font-size:11px; color:var(--accent); border:1px solid var(--rule); }
@media (max-width:759px) { .current-volume { max-width:54px; padding:3px 4px; font-size:10px; } }

.cloud-open { white-space:nowrap; flex:none; font-size:11px; }
.cloud-dialog { max-width:600px; }
.cloud-dialog-body { max-height:70svh; overflow:auto; font-size:13px; line-height:1.8; }
.cloud-dialog-body input { width:100%; margin:8px 0; padding:9px; border:1px solid var(--rule); border-radius:3px; background:var(--paper); color:var(--ink); font-size:12px; }
.cloud-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.cloud-warning { font-size:11px; color:var(--muted); }
.cloud-restore { border-top:1px solid var(--rule); margin-top:18px; padding-top:18px; }
#cloudStatus { color:var(--accent); }
@media (max-width:379px) { .topbar .cloud-open { font-size:10px; padding:8px 3px; } }
.catalog { scroll-padding-top:150px; }
.catalog-header { position:sticky; top:-10px; z-index:2; padding:8px 0 5px; background:color-mix(in srgb,var(--panel) 40%,var(--paper)); }