.reader-layout {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
#bible-reader-app {
--color-reader-bg: var(--color-surface-solid);
--color-reader-bg-panel: var(--color-surface-hover);
--color-reader-text: var(--color-text);
--color-reader-text-muted: var(--color-text-muted);
--color-reader-accent: var(--color-primary);
--color-reader-border: var(--color-border);
--color-reader-red-letter: var(--color-red-letter);
--font-merri: 'Merriweather', serif;
--font-crimson: 'Crimson Pro', georgia, serif;
--font-garamond: 'EB Garamond', georgia, serif;
--font-libre: 'Libre Baskerville', georgia, serif;
--font-playfair: 'Playfair Display', georgia, serif;
--font-cardo: 'Cardo', serif;
--font-imfell: 'IM Fell English', serif;
--font-georgia: georgia, "Times New Roman", serif;
--font-inter: 'Inter', system-ui, sans-serif;
--reader-font: var(--font-merri);
--reader-size: 1.1875rem;
font-family: var(--font-sans);
color: var(--color-reader-text);
background: var(--color-reader-bg);
border: 1px solid var(--color-reader-border);
border-radius: var(--radius-lg);
overflow: clip;
min-height: 70vh;
position: relative;
}
:root { --reader-toolbar-height: 65px; }
.reader-toolbar {
background: var(--color-reader-bg);
border-bottom: 1px solid var(--color-reader-border);
padding: 0.75rem 1rem;
min-height: var(--reader-toolbar-height);
box-sizing: border-box;
display: flex; align-items: center; justify-content: space-between;
transition: background var(--transition-base), box-shadow var(--transition-base), top var(--transition-base);
position: relative;
z-index: var(--z-sticky-toolbar);
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
}
.reader-toolbar.is-sticky {
position: sticky;
top: var(--header-height);
box-shadow: var(--shadow-md);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.toolbar-grp { display: flex; gap: 0.5rem; align-items: center; }
.btn-icon {
background: transparent;
border: 1px solid transparent;
color: var(--color-reader-text-muted);
padding: 0.5rem; border-radius: var(--radius-sm);
cursor: pointer; transition: var(--transition-standard);
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
}
.btn-icon:hover { background: var(--color-reader-bg-panel); color: var(--color-reader-text); border-color: var(--color-reader-border); }
.btn-icon:disabled { opacity: 0.3; cursor: not-allowed; }
.btn-icon.active { background: var(--color-reader-accent); color: var(--color-primary-contrast); border-color: var(--color-reader-accent); }
.btn-icon--ai {
background: color-mix(in srgb, var(--color-reader-accent) 6%, transparent);
color: var(--color-reader-accent);
}
.btn-icon--ai:hover {
background: color-mix(in srgb, var(--color-reader-accent) 14%, transparent);
color: var(--color-reader-accent);
border-color: var(--color-reader-accent);
}
.reader-canvas { padding: 2rem 1.5rem; }
.bible-text { font-family: var(--reader-font); font-size: calc(var(--reader-size) * var(--reader-size-scale, 1)); line-height: 1.6; }
.verse-block { scroll-margin-top: calc(var(--header-height) + var(--reader-toolbar-height) + var(--space-lg)); }
.verse-omission-note {
font-style: italic;
font-size: 0.85em;
color: var(--color-text-muted);
}
.bible-text.mode-list .verse-block {
display: flex;
align-items: stretch;
margin-bottom: 0.85em;
}
.bible-text.mode-list .verse-num {
flex: 0 0 auto;
width: 2.5rem;
text-align: end;
padding-block-start: 0.4em;
padding-inline-end: 0.9rem;
font-family: var(--font-sans);
font-size: 0.75em;
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--color-reader-accent);
opacity: 0.7;
text-decoration: none;
border-inline-end: 1px solid var(--color-reader-border);
line-height: inherit;
transition: opacity var(--transition-standard);
}
.bible-text.mode-list .verse-num:hover { opacity: 1; }
.bible-text.mode-list .verse-content {
flex: 1;
text-align: left;
padding-inline-start: 1rem;
}
@media (width <= 480px) {
.bible-text.mode-list .verse-num {
width: 2rem;
padding-inline-end: 0.65rem;
}
.bible-text.mode-list .verse-content {
padding-inline-start: 0.75rem;
}
}
.bible-text.mode-reader,
.bible-text.mode-columns {
max-width: 70ch;
margin: 0 auto;
text-align: justify;
text-align-last: left;
hyphens: auto;
text-wrap: pretty;
overflow-wrap: break-word;
word-break: auto-phrase;
text-justify: inter-word;
letter-spacing: -0.005em;
word-spacing: -0.02em;
line-height: 1.75;
}
.bible-text.mode-reader .verse-block,
.bible-text.mode-columns .verse-block { display: inline; }
.bible-text.mode-reader .verse-num,
.bible-text.mode-columns .verse-num {
font-size: 0.6em;
vertical-align: super;
color: var(--color-reader-accent);
margin: 0 0.15em;
font-weight: 700;
font-family: var(--font-sans);
user-select: none;
text-decoration: none;
opacity: 0.7;
line-height: 0;
transition: opacity var(--transition-standard);
}
.bible-text.mode-reader .verse-num:hover,
.bible-text.mode-columns .verse-num:hover { opacity: 1; }
.bible-text.mode-reader .verse-content,
.bible-text.mode-columns .verse-content { display: inline; }
.bible-text.mode-reader .force-paragraph-start,
.bible-text.mode-columns .force-paragraph-start { display: block; margin-top: 1.5em; }
.bible-text.mode-reader.text-left,
.bible-text.mode-columns.text-left {
text-align: left;
text-align-last: left;
}
.bible-text.mode-columns {
max-width: 120ch;
column-count: 2;
column-gap: 3rem;
column-rule: 1px solid var(--border-color, rgb(0 0 0 / 10%));
hyphens: auto;
}
.bible-text.mode-columns .study-heading {
break-inside: avoid;
break-after: avoid-column;
}
.bible-text.mode-columns > .study-heading:first-child { margin-top: 0; }
.bible-text.mode-columns > .verse-block.force-paragraph-start:first-child,
.bible-text.mode-reader > .verse-block.force-paragraph-start:first-child { margin-top: 0; }
@media (width <= 967px) {
#view-mode-control .desktop-only-mode { display: none; }
.bible-text.mode-columns { column-count: 1; max-width: 70ch; }
}
.hide-red-letter .red-letter { color: inherit !important; }
.hide-verse-nums .verse-num { display: none !important; }
.hide-ai-notes .study-heading,
.hide-ai-notes .study-note-tag { display: none !important; }
.red-letter { color: var(--color-reader-red-letter); }
#bible-reader-app[dir="rtl"] .bible-text { direction: rtl; text-align: right; }
#bible-reader-app[dir="rtl"] .bible-text.text-left { text-align: right; }
#bible-reader-app[dir="rtl"] .verse-block { gap: 0.5rem; }
#bible-reader-app[dir="rtl"] .verse-num { text-align: left; padding-left: 0.5rem; margin-left: 0.25em; margin-right: 0; }
#bible-reader-app[dir="rtl"] .reader-toolbar,
#bible-reader-app[dir="rtl"] .toolbar-grp,
#bible-reader-app[dir="rtl"] .center-grp,
#bible-reader-app[dir="rtl"] .settings-drawer,
#bible-reader-app[dir="rtl"] .setting-group,
#bible-reader-app[dir="rtl"] .btn-group,
#bible-reader-app[dir="rtl"] .passage-actions-footer,
#bible-reader-app[dir="rtl"] .context-notice,
#bible-reader-app[dir="rtl"] .chapter-nav,
#bible-reader-app[dir="rtl"] .keyboard-hint,
#bible-reader-app[dir="rtl"] .summary-wrapper,
#bible-reader-app[dir="rtl"] .summary-trigger,
#bible-reader-app[dir="rtl"] .trv-modal-dialog,
#bible-reader-app[dir="rtl"] .picker-header,
#bible-reader-app[dir="rtl"] .picker-body,
#bible-reader-app[dir="rtl"] .version-modal-overlay,
#bible-reader-app[dir="rtl"] .version-modal,
#bible-reader-app[dir="rtl"] .version-modal-header,
#bible-reader-app[dir="rtl"] .version-modal-list,
#bible-reader-app[dir="rtl"] .version-modal-item { direction: ltr; }
.settings-drawer {
position: fixed; bottom: var(--dock-float); left: 0.75rem; right: 0.75rem; background: var(--color-reader-bg);
border: 1px solid var(--color-reader-border); box-shadow: var(--shadow-xl);
padding: 0 1.5rem 1.25rem;
z-index: var(--z-modal);
transform: translateY(calc(100% + 1rem)); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
max-width: 510px; margin: 0 auto; border-radius: var(--radius-md); display: none;
max-height: 80vh; overflow-y: auto;
}
.drawer-header {
display: flex; align-items: center; justify-content: space-between;
padding: 0.75rem 0 0.75rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid var(--color-reader-border);
position: sticky; top: 0; background: var(--color-reader-bg); z-index: 1;
}
.drawer-title {
font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-reader-text-muted);
}
.drawer-header .btn-icon { width: 28px; height: 28px; padding: 0; }
.drawer-reset { text-align: center; margin-top: 0.5rem; }
.drawer-reset .btn-icon { font-size: 0.8rem; width: auto; height: auto; padding: 0.3rem 0.9rem; color: var(--color-reader-text-muted); }
.drawer-reset .btn-icon:hover { color: var(--color-reader-text); }
@media (width <= 480px) {
.settings-drawer { padding: 0 0.9rem 0.85rem; }
.setting-group { margin-bottom: 0.6rem; }
.btn-group button {
min-height: 40px;
padding: 0.5rem 0.5rem;
}
#view-mode-control button,
#font-family-control button {
min-height: 40px;
padding: 0.4rem 0.6rem;
}
#font-size-slider {
height: 44px;
}
}
.settings-drawer.is-visible { display: block; animation: drawerSlideUp 0.3s forwards; }
.settings-drawer.is-hiding { animation: drawerSlideDown 0.3s forwards; }
@keyframes drawerSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes drawerSlideDown { from { transform: translateY(0); } to { transform: translateY(100%); } }
.setting-group { margin-bottom: 0.75rem; }
.setting-group h4 { font-size: 0.7rem; text-transform: uppercase; color: var(--color-reader-text-muted); margin-bottom: 0.3rem; letter-spacing: 0.05em; font-weight: 700; display: flex; align-items: baseline; gap: 0.4em; }
.setting-group h4 output { font-size: 0.82rem; color: var(--color-reader-accent); font-weight: 700; text-transform: none; letter-spacing: 0; }
.btn-group { display: flex; flex-wrap: wrap; gap: 4px; }
.btn-group button {
flex: 1 1 30%;
background: var(--color-reader-bg-panel); border: 1px solid var(--color-reader-border); border-radius: var(--radius-sm);
padding: 0.35rem 0.5rem; color: var(--color-reader-text); cursor: pointer; font-size: 0.82rem;
}
.btn-group button.active { background: var(--color-reader-accent); color: var(--color-primary-contrast); border-color: var(--color-reader-accent); }
.version-select { width: 100%; padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); border: 1px solid var(--color-reader-border); background: var(--color-reader-bg-panel); color: var(--color-reader-text); font-size: 0.9rem; }
.drawer-btn { width: auto; flex: 1; background: var(--color-reader-bg-panel); font-size: 0.9rem; }
#font-family-control { margin-bottom: 10px; }
#font-size-slider { width: 100%; accent-color: var(--color-reader-accent); }
#view-mode-control button,
#font-family-control button {
flex: 0 0 auto;
padding: 0.25rem 0.65rem;
font-size: 0.8rem;
}
#font-family-control button[data-val="var(--font-merri)"]    { font-family: var(--font-merri); }
#font-family-control button[data-val="var(--font-crimson)"]  { font-family: var(--font-crimson); }
#font-family-control button[data-val="var(--font-garamond)"] { font-family: var(--font-garamond); }
#font-family-control button[data-val="var(--font-libre)"]    { font-family: var(--font-libre); }
#font-family-control button[data-val="var(--font-playfair)"] { font-family: var(--font-playfair); }
#font-family-control button[data-val="var(--font-cardo)"]    { font-family: var(--font-cardo); }
#font-family-control button[data-val="var(--font-imfell)"]   { font-family: var(--font-imfell); }
#font-family-control button[data-val="var(--font-georgia)"]  { font-family: var(--font-georgia); }
#font-family-control button[data-val="var(--font-inter)"]    { font-family: var(--font-inter); }
.font-size-preview {
font-family: var(--reader-font);
font-size: var(--reader-size);
color: var(--color-reader-text);
padding: 0.3rem 0 0.35rem;
line-height: 1.5;
max-height: 5.5em;
overflow: hidden;
border-bottom: 1px solid var(--color-reader-border);
margin-bottom: 0.4rem;
}
.font-size-preview.text-justify { text-align: justify; text-align-last: left; }
.font-size-preview.hide-red-letter .red-letter { color: inherit !important; }
.font-size-preview.hide-verse-nums .verse-num { display: none !important; }
.font-size-preview .study-heading { margin: 0 0 0.4em; font-size: calc(var(--reader-size) * 0.6); }
.font-size-preview .verse-num {
font-size: 0.6em; vertical-align: super; color: var(--color-reader-accent);
margin: 0 0.15em; font-weight: 700; font-family: var(--font-sans);
user-select: none; opacity: 0.7; line-height: 0;
}
#preview-study-note { display: none; pointer-events: none; }
.sr-only { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reader-placeholder { text-align: center; padding: 3rem; color: var(--color-reader-text-muted); }
.version-trigger {
background: var(--color-reader-bg-panel);
border: 1px solid var(--color-reader-border);
cursor: pointer;
padding: 0.35rem 0.85rem;
font: inherit;
color: inherit;
border-radius: var(--radius-full);
transition: border-color var(--transition-standard), color var(--transition-standard), background-color var(--transition-standard);
}
.version-trigger:hover {
color: var(--color-reader-accent);
border-color: var(--color-reader-accent);
}
.version-trigger .fa-caret-down { font-size: 0.7em; margin-left: 0.3em; opacity: 0.6; }
.version-modal-overlay {
position: fixed;
inset: 0;
z-index: 1000;
background: rgb(0 0 0 / 45%);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--transition-standard);
padding: 1rem;
}
.version-modal-overlay.is-visible { opacity: 1; }
.version-modal {
background: var(--color-reader-bg);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
max-width: 480px;
width: 100%;
max-height: 80vh;
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(12px);
transition: transform var(--transition-standard);
}
.version-modal-overlay.is-visible .version-modal { transform: translateY(0); }
.version-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--color-reader-border);
flex-shrink: 0;
}
.version-modal-title {
font-family: var(--font-sans);
font-weight: 700;
font-size: 1.05rem;
}
.version-modal-list {
overflow-y: auto;
overscroll-behavior: contain;
padding: 0.5rem;
flex: 1;
}
.version-modal-item {
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
padding: 0.65rem 0.85rem;
border: none;
background: none;
cursor: pointer;
text-align: left;
border-radius: var(--radius-sm);
font-size: 0.9rem;
color: var(--color-reader-text);
transition: background 0.12s;
font-family: var(--font-sans);
}
.version-modal-item:hover { background: var(--color-surface-hover, hsl(0deg 0% 50% / 8%)); }
.version-modal-item.is-active {
background: color-mix(in srgb, var(--color-reader-accent) 12%, transparent);
font-weight: 600;
}
.version-abbr {
display: inline-block;
min-width: 3.5rem;
font-weight: 700;
font-size: 0.8rem;
color: var(--color-reader-text-muted);
letter-spacing: 0.03em;
}
.version-name { flex: 1; }
.version-audio-icon { color: var(--color-reader-accent); font-size: 0.8rem; margin-left: 0.3rem; }
.version-summary-icon { color: var(--color-reader-accent, #8b5cf6); font-size: 0.75rem; margin-left: 0.3rem; opacity: 0.8; }
@media (width <= 600px) { .reader-canvas { padding: 1.5rem 1rem; } }
@media (width <= 600px) {
#bible-reader-app {
margin-inline: calc(-1 * var(--space-mobile-md));
border-inline: 0;
border-radius: 0;
}
#bible-reader-app .reader-toolbar {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
@media (width <= 480px) {
.version-modal-overlay {
align-items: flex-end;
padding: 0;
}
.version-modal {
max-width: none;
max-height: 70vh;
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.version-modal-item {
padding: 0.85rem 1rem;
min-height: 48px;
}
}