/* Floating translucent paper shared by passage, settings, and detail panels. */
:root {
  --panel-paper: #f0eee8;
  --panel-ink: #393833;
  --panel-rule: #8a857b;
  --panel-selected: #d9d5ca;
  --panel-action: #56524b;
}
.control-dialog {
  --ink:var(--panel-ink);--muted:#666157;--rule:#8a857b65;
  color: var(--panel-ink);
  background: url('/panel-fiber.svg') 0 0 / 180px 180px repeat,
    linear-gradient(135deg, rgb(248 246 240 / .76), rgb(240 238 232 / .68));
  border: 1px solid #fffdf2a6;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 #ffffff66, 0 6px 18px #39383320, 0 24px 64px #39383338;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.control-dialog::backdrop, .navigation-dialog::backdrop {
  background: rgb(57 56 51 / .12);
  backdrop-filter: blur(2px);
}
.navigation-heading { border-color: #8a857b4d; }
.navigation-heading h1, .dialog-heading h1 { font-family: var(--serif); font-weight: 400; }
.navigation-heading button, .control-dialog .close-dialog {
  background: #e4e1d9b3; border: 1px solid #8a857b; border-radius: 3px;
}
.picker-context {
  background: rgb(240 238 232 / .25);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #8a857b38;
  margin-bottom: 12px;
}
.picker-book-row h2 { font-weight: 400; }
.picker-actions {
  background: rgb(240 238 232 / .18);
  border-color: #8a857b65;
}
.control-dialog .number-grid button {
  background: #e4e1d999;
  border-color: var(--panel-rule);
  border-radius: 2px 3px 2px 2px;
  color: var(--panel-ink);
  font-family: var(--serif);
  font-size: 1.4rem;
  font-variant-numeric: lining-nums tabular-nums;
  box-shadow: none;
}
.control-dialog .number-grid button:hover { background: #d9d5ca; border-color: #686359; }
.control-dialog .number-grid button[aria-pressed=true],
.control-dialog .number-grid button[aria-pressed=true]:hover,
.book-list button[aria-pressed=true] {
  background: var(--panel-selected); color: var(--panel-ink);
  border-color: #686359; outline:2px solid #686359;outline-offset:2px;font-weight:700;
}
.book-list button {
  background: #e4e1d999; border-color: var(--panel-rule); border-radius: 2px;
  font-family: var(--serif); font-size: 1.125rem;
}
.testament-jumps button { background: #e4e1d999; border-color: var(--panel-rule); border-radius: 2px; }
.control-dialog .primary-button {
  background: var(--panel-action); color: #faf9ee; border-radius: 3px;
  font-family: var(--serif); font-weight: 400; font-size: 1.125rem;
}
.settings-dialog select { background: #f3f1eb; border-color: var(--panel-rule); border-radius: 3px; }
/* Equal side tracks keep the passage title on the actual center line. */
.reader-header {
  display:grid;grid-template-columns:max(144px,9rem) minmax(0,1fr) max(144px,9rem);
  align-items:center;align-content:center;gap:12px;padding-bottom:10px;
}
.reader-header .header-icon {
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;min-height:48px;padding:11px;
  border:0;border-radius:4px;background:transparent;color:#4a463f;
  text-decoration:none;justify-self:center;
}
.header-icon svg { width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
.reader-header .reader-home{justify-self:start}
.reader-preferences{display:flex;justify-content:flex-end;align-items:center;gap:4px;min-width:0}
.reader-preferences .version-chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:6px 8px;border:0;border-radius:4px;background:transparent;color:#4a463f;font:500 .875rem/1.3 var(--sans);white-space:nowrap}
.reader-preferences .version-chip:hover{background:#e8e4dc}
.reader-preferences .header-icon{flex:none}
.reader-header .title-control {
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  width:100%;max-width:100%;min-width:0;min-height:54px;gap:3px;
  padding:4px 2px;border:0;border-radius:4px;background:transparent;
  box-shadow:none;text-align:center;color:#393833;
}
.reader-header .title-control .book-name { max-width:100%;font-family:var(--serif);font-size:clamp(1.2rem,3.7vw,1.8rem);line-height:1.2;overflow-wrap:break-word; }
.chapter-trigger { display:inline-flex;align-items:center;justify-content:center;gap:7px;max-width:100%;padding-bottom:2px;border-bottom:1px solid #77716680; }
.chapter-trigger .location-line { font-size:1rem;line-height:1.35;margin:0;letter-spacing:0; }
.chapter-trigger svg { flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; }
.reader-header .title-control:hover,.reader-header .header-icon:hover { background:#e8e4dc88; }
.reader-header .title-control:active,.reader-header .header-icon:active { background:#d9d5cacc; }
.reader-header .title-control[aria-expanded=true] .chapter-trigger svg { transform:rotate(180deg); }
@media(max-width:600px) {
  .reader-header { grid-template-columns:max(128px,8rem) minmax(0,1fr) max(128px,8rem);gap:4px;padding-bottom:8px; }
  .reader-preferences .header-icon{width:44px;min-height:44px;height:44px;padding:9px}
  .reader-preferences .version-chip{padding:6px 4px}
}
.reader-header.compact-reader-header{grid-template-columns:48px minmax(0,1fr) auto;row-gap:0}
.compact-reader-header .reader-home{grid-column:1;grid-row:1}
.compact-reader-header .reader-preferences{grid-column:3;grid-row:1}
.reader-header.compact-reader-header .title-control{grid-column:1/-1;grid-row:2}
@supports not (backdrop-filter: blur(1px)) {
  .control-dialog { background-color: var(--panel-paper); }
}
@media(prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  .control-dialog, .picker-context, .picker-actions {
    background: var(--panel-paper); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .control-dialog::backdrop { background: #39383373; backdrop-filter: none; }
  .control-dialog .number-grid button, .book-list button { border-color: #686359; }
}
@media(forced-colors:active) {
  .control-dialog, .picker-context, .picker-actions { background: Canvas; color: CanvasText; }
  .control-dialog .number-grid button[aria-pressed=true], .book-list button[aria-pressed=true] {
    background: Highlight; color: HighlightText; forced-color-adjust: none;
  }
}

/* A compact directory keeps book, chapter and verse navigation in fixed places. */
.navigation-dialog{--picker-accent:#686359;width:min(calc(100vw - 32px),680px);height:min(88dvh,820px);max-height:calc(100dvh - 32px);inset:0;margin:auto}
.navigation-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:10px 16px;min-height:64px}
.navigation-heading h1{font:400 1.4rem/1.4 var(--serif);text-align:center}
.navigation-heading button{position:static;background:transparent;border:0;color:var(--panel-ink)}
.picker-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex:none;border-bottom:1px solid #8a857b50;background:transparent}
.picker-tabs button{min-height:52px;padding:8px 4px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--panel-ink);font:400 1.125rem/1.4 var(--sans)}
.picker-tabs button[aria-selected=true]{color:var(--picker-accent);border-bottom-color:var(--picker-accent);font-weight:600}
.navigation-dialog .navigation-scroll{padding:0 12px 16px;overscroll-behavior:contain}
.navigation-dialog .picker-context{padding:12px 4px;margin:0 0 4px;border:0}
.navigation-dialog #picker-title{margin:0;font:500 1rem/1.4 var(--sans);overflow-wrap:anywhere}
.navigation-dialog .book-group+.book-group{margin:0}
.navigation-dialog .book-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,max(23%,4.5rem)),1fr));gap:8px;background:transparent}
.navigation-dialog .book-list button{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;min-height:88px;padding:12px 8px;border:1px solid #8a857b55;border-radius:5px;border-bottom:3px solid transparent;background:#fffdf22e;color:var(--panel-ink);outline-offset:-3px;box-shadow:inset 0 1px 0 #ffffff30}
.book-abbreviation{font:400 1.5rem/1.2 var(--serif)}
.book-full-name{font:400 .875rem/1.4 var(--sans);overflow-wrap:anywhere}
.navigation-dialog .book-list button[aria-pressed=true]{color:var(--panel-ink);background:#d9d5cab3;border-color:var(--picker-accent);outline:0}
.navigation-dialog .book-list button[aria-pressed=true] .book-full-name{font-weight:600}
.navigation-dialog .book-list button:hover,.navigation-dialog .number-grid button:hover{background:#e8e4dc99}
.navigation-dialog .number-grid{grid-template-columns:repeat(auto-fit,minmax(max(48px,3rem),1fr));gap:6px}
.navigation-dialog .number-grid button{min-height:52px;border:1px solid #8a857b55;border-radius:5px;background:#fffdf22e;font:400 1.4rem/1.2 var(--serif)}
.navigation-dialog .number-grid button[aria-pressed=true]{background:#d9d5cab3;color:var(--panel-ink);border-color:var(--picker-accent);box-shadow:inset 0 -2px var(--picker-accent);outline:0;font-weight:700}
.navigation-dialog #verse-section{margin:0;padding:0;border:0}
.navigation-dialog .testament-jumps{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;gap:0;border-top:1px solid #8a857b50;padding-bottom:env(safe-area-inset-bottom);background:#f0eee82e}
.navigation-dialog .testament-jumps button{min-height:56px;padding:8px 4px;border:0;border-radius:0;background:transparent;color:var(--panel-ink);font:400 1rem/1.4 var(--sans)}
.navigation-dialog .testament-jumps button[aria-pressed=true]{color:var(--panel-ink);background:#d9d5ca99;box-shadow:inset 0 3px var(--picker-accent);font-weight:600}
.navigation-dialog .picker-actions{flex-direction:row;align-items:center;gap:12px;padding:10px 16px max(10px,env(safe-area-inset-bottom))}
.navigation-dialog .picker-actions .primary-button{flex:0 0 auto;min-height:48px;padding:10px 16px;font:500 1rem/1.4 var(--sans)}
#picker-destination{flex:1;min-width:0;margin:0;text-align:left;font:400 .95rem/1.4 var(--sans);color:#57534c;overflow-wrap:anywhere}
.navigation-dialog button:focus-visible{outline:3px solid var(--picker-accent);outline-offset:-3px}
.navigation-dialog.large-picker-text .picker-tabs button{font-size:.875rem}
.navigation-dialog.large-picker-text .picker-actions{flex-direction:column;align-items:stretch;gap:4px}
.navigation-dialog.large-picker-text #picker-destination{text-align:center}
.navigation-dialog.large-picker-text .navigation-heading h1{font-size:1rem}
@media(max-width:600px){.navigation-dialog{height:calc(100dvh - 48px);max-width:calc(100vw - 32px);border-radius:12px;inset:0;margin:auto}.navigation-heading{padding-top:max(10px,env(safe-area-inset-top))}}
@media(max-height:480px){.navigation-dialog{height:calc(100dvh - 24px);max-height:calc(100dvh - 24px)}}
@media(max-height:480px){.navigation-dialog .navigation-heading{min-height:48px}.picker-tabs button{min-height:44px;padding:4px}.navigation-dialog .picker-context{padding-top:6px;padding-bottom:6px}.navigation-dialog .picker-actions{padding-top:6px;padding-bottom:6px}}
@media(forced-colors:active){.navigation-dialog{--picker-accent:Highlight}.navigation-dialog .book-list button[aria-pressed=true],.navigation-dialog .number-grid button[aria-pressed=true]{background:Highlight;color:HighlightText;forced-color-adjust:none}}
.control-dialog #picker-title,.control-dialog .book-group h3{color:#5d584f}
.control-dialog .close-dialog,.control-dialog select{color:var(--panel-ink)}
.reader-header .location-line{color:#57534c}
.control-dialog :focus-visible{outline-color:#686359}
.control-dialog .text-action{color:var(--panel-ink)}
.settings-dialog input{accent-color:var(--panel-action)}
.settings-dialog input[type=range]::-webkit-slider-thumb{background:var(--panel-action)}
.settings-dialog input[type=range]::-moz-range-thumb{background:var(--panel-action)}
/* Full English names need wider cells; every abbreviation starts on the same line. */
.navigation-dialog .book-list button{justify-content:flex-start}
.navigation-dialog .book-full-name{min-height:2.8em;word-break:normal;overflow-wrap:normal}
html:lang(en) .navigation-dialog .book-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,max(30%,8.75rem)),1fr))}

/* Shared controls for the library, reader, preferences and detail panels. */
:root{--ui-font:system-ui,'Microsoft YaHei',sans-serif;--ui-title:Georgia,'SimSun',serif;--ui-ink:#393833;--ui-muted:#666157;--ui-line:#8a857b65;--ui-selected:#ded9ce;--ui-action:#56524b}
.library-page{--ink:var(--ui-ink);--muted:var(--ui-muted);--line:var(--ui-line);--paper:#f3f2ed;--control:#f7f5ef;--focus:#686359}
.ui-dialog.control-dialog{box-sizing:border-box;width:min(calc(100vw - 32px),480px);max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);inset:0;margin:auto;padding:20px;overflow:auto;filter:none;color:var(--ui-ink);font:1rem/1.5 var(--ui-font);border-radius:12px}
.ui-dialog.control-dialog .panel-heading,.ui-dialog.control-dialog .dialog-heading{position:sticky;top:-20px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -2px 16px;padding:0 0 12px;border-bottom:1px solid var(--ui-line);background:var(--panel-paper)}
.ui-dialog.control-dialog .panel-heading h2,.ui-dialog.control-dialog .dialog-heading h1{margin:0;min-width:0;font:400 1.25rem/1.4 var(--ui-title);overflow-wrap:anywhere;color:var(--ui-ink)}
.ui-dialog.control-dialog .dialog-heading>div{min-width:0}
.ui-dialog.control-dialog .panel-close,.ui-dialog.control-dialog .close-dialog,#navigation-close{position:static;flex:none;display:grid;place-items:center;min-width:48px;min-height:48px;padding:4px;border:0;border-radius:4px;background:transparent;color:var(--ui-ink);font:400 30px/1 var(--ui-font)}
.ui-dialog fieldset,.ui-dialog .ui-choices{min-width:0;border:0;padding:0;margin:16px 0}
.ui-dialog legend{padding:0 0 10px;font:400 1rem/1.5 var(--ui-font);color:var(--ui-muted)}
.ui-dialog .choice-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:14px 10px;margin:8px 0;border:1px solid var(--ui-line);border-radius:5px;background:#fffdf22e;color:var(--ui-ink);cursor:pointer;overflow-wrap:anywhere;font:400 1rem/1.5 var(--ui-font)}
.ui-dialog .choice-row:has(input:checked){background:var(--ui-selected);border-color:#686359;box-shadow:inset 3px 0 #686359}
.ui-dialog .choice-row input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--ui-action)}
.ui-dialog .choice-row span{min-width:0}.ui-dialog .choice-row strong{display:block;font-weight:500}.ui-dialog .choice-row small{display:block;margin-top:4px;font-size:.85rem;color:var(--ui-muted)}
.edition-trigger{display:inline-flex;align-items:center;gap:8px;min-height:48px;min-width:44px;padding:8px;border:0;border-radius:4px;background:transparent;color:var(--ui-ink);font:500 1rem/1.4 var(--ui-font)}
.version-icon{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.version-inline{display:inline-flex;align-items:center;gap:8px}
.ui-dialog .setting-section{margin:16px 0;padding:0 0 16px;border:0;border-bottom:1px solid var(--ui-line)}
.ui-dialog .setting-label,.ui-dialog .toggle-row{color:var(--ui-ink);font:400 1rem/1.5 var(--ui-font)}
.ui-dialog .segmented{display:flex;flex-wrap:wrap;gap:8px}.ui-dialog .segmented button{flex:1;min-width:48px;min-height:48px;padding:8px;border:1px solid var(--ui-line);border-radius:5px;background:#fffdf22e;color:var(--ui-ink);font:400 1rem/1.4 var(--ui-font)}
.ui-dialog .segmented button[aria-pressed=true]{background:var(--ui-selected);border-color:#686359;box-shadow:inset 0 -2px #686359;color:var(--ui-ink)}
.ui-dialog .size-controls{display:flex;align-items:center;gap:10px}.ui-dialog .size-controls input{min-width:0;flex:1}.ui-dialog .size-controls button{flex:none;min-width:48px;min-height:48px;border:1px solid var(--ui-line);border-radius:5px;background:#e4e1d999;color:var(--ui-ink)}
.ui-dialog .toggle-row{min-height:48px;gap:12px}.ui-dialog input{accent-color:var(--ui-action)}
.ui-dialog .setting-link,.ui-dialog .context-entry,.ui-dialog .bookmark-entry>button{min-height:48px;color:var(--ui-ink);font:400 1rem/1.5 var(--ui-font);border-color:var(--ui-line);overflow-wrap:anywhere}
.ui-dialog .primary-button{min-height:48px;background:var(--ui-action);color:#faf9ee;border-radius:5px;font:500 1rem/1.4 var(--ui-font)}
.library-page .filters button[aria-pressed=true],.library-page .filters button[aria-pressed=true]:hover{background:var(--ui-action);border-color:var(--ui-action)}
.library-page button:hover,.ui-dialog button:hover{background:#e5e1d7}.ui-dialog .primary-button:hover{background:#48443d}
.ui-dialog :focus-visible,.library-page :focus-visible{outline:3px solid #686359;outline-offset:3px}
.library-dialog::backdrop{background:rgb(57 56 51 / .12);backdrop-filter:blur(2px)}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.ui-dialog.control-dialog{background:var(--panel-paper);backdrop-filter:none}.library-dialog::backdrop{background:#39383373;backdrop-filter:none}}

.ui-dialog .note-reference{font:500 1rem/1.5 var(--ui-font);color:var(--ui-muted);overflow-wrap:anywhere;margin:0 0 16px}
#note-prompt{display:block;margin-bottom:8px;font:400 1rem/1.5 var(--ui-font)}
#note-text{box-sizing:border-box;width:100%;min-height:140px;max-height:42dvh;resize:vertical;padding:12px;border:1px solid var(--ui-line);border-radius:5px;background:#faf8f0a6;color:var(--ui-ink);font:400 max(16px,1rem)/1.6 var(--ui-font)}
#note-status{font:400 .875rem/1.5 var(--ui-font);margin:8px 0}#note-status:empty{display:none}
.note-actions,.audio-actions,.note-row-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.note-actions button,.audio-actions button,.note-row-actions button{min-height:48px;padding:10px 14px;border:1px solid var(--ui-line);border-radius:5px;font:400 1rem/1.4 var(--ui-font);color:var(--ui-ink);background:#f0eee855}
.note-actions .primary-button,.audio-actions .primary-button{color:#faf9ee;background:var(--ui-action);flex:1}
.ui-dialog button:disabled{opacity:.55;cursor:default}
.personal-note{margin-top:20px;padding:0 0 20px;border-bottom:1px solid var(--ui-line)}
.personal-note h2{font:500 1rem/1.5 var(--ui-font);margin:0 0 8px}.personal-note-text{white-space:pre-wrap;overflow-wrap:anywhere;font:400 1rem/1.65 var(--ui-font)}
.notes-empty{margin-top:20px}

/* Inline note labels are included in the pagination measurement. */
#scripture .verse{cursor:pointer;outline-offset:4px;-webkit-tap-highlight-color:rgb(137 119 93 / .15)}
#scripture .verse:focus-visible{outline:2px solid var(--ui-action)}
.verse .verse-number{position:relative}
.verse.note-emphasis .verse-text{text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#89775d;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-skip-ink:auto;background:rgb(137 119 93 / .07)}
.verse.verse-selected .verse-text{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:var(--ui-action);text-decoration-thickness:2px;text-underline-offset:.2em;background:rgb(137 119 93 / .15)}
.note-mark{position:relative;display:inline-block;vertical-align:baseline;white-space:nowrap;margin-left:.4em;padding:1px 5px;border:1px solid #89775d70;border-radius:3px;background:#ece7dc80;color:#66563f;font:400 max(14px,.55em)/1.5 var(--ui-font);text-decoration:none;cursor:pointer}
button.note-mark::after{content:'';position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);min-width:44px;min-height:44px;width:100%;height:100%}
.note-mark:focus-visible{outline:2px solid var(--ui-action);outline-offset:3px}
@media(max-width:600px){.ui-dialog.note-dialog{inset:auto 0 0;margin:0 auto;width:100%;max-width:100%;max-height:calc(100dvh - 16px);border-radius:12px 12px 0 0;padding-bottom:max(20px,env(safe-area-inset-bottom))}}