#bible-reader-app {
--reader-size: 1.125rem;
min-height: 50vh;
}
.paragraph-marker {
display: inline;
color: var(--color-reader-accent);
opacity: 0.6;
margin-right: 4px;
user-select: none;
}
.toolbar-title {
font-weight: 700; font-size: 1rem; color: var(--color-reader-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px;
}
.btn-text {
padding: 0.5rem 1rem; border-radius: 2rem; border: 1px solid var(--color-reader-border);
background: var(--color-reader-bg-panel); color: var(--color-reader-text); font-size: 0.9rem;
cursor: pointer; display: flex; align-items: center; gap: 0.4rem; font-weight: 600;
transition: color var(--transition-standard), border-color var(--transition-standard), box-shadow var(--transition-standard);
}
.btn-text:hover { border-color: var(--color-reader-accent); color: var(--color-reader-accent); box-shadow: var(--shadow-xs); }
.passage-titles { text-align: center; margin-bottom: 2.25rem; border-bottom: 1px solid var(--color-reader-border); padding-bottom: 1.5rem; }
.main-heading { font-family: var(--font-serif); font-size: 2.25rem; margin-bottom: 0.4rem; line-height: 1.1; letter-spacing: -0.015em; font-weight: 700; }
.sub-heading { font-family: var(--font-sans); color: var(--color-reader-text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 0.85rem; }
.passage-titles .header-meta { font-family: var(--font-sans); font-size: 0.85rem; color: var(--color-reader-text-muted); display: inline-flex; align-items: center; margin-top: 0.5rem; }
.context-notice {
padding: 1rem; background-color: color-mix(in srgb, var(--color-reader-accent) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--color-reader-accent) 25%, transparent);
border-radius: var(--radius-md); display: flex; align-items: center; gap: 0.75rem;
margin-bottom: 2rem; font-size: 0.95rem; color: var(--color-reader-text);
}
.bible-text.mode-list .verse-num {
width: 2rem;
font-size: 0.7em;
padding-block-start: 0.45em;
font-weight: 700;
opacity: 0.6;
}
.target-highlight { background-color: color-mix(in srgb, var(--color-reader-accent) 15%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-reader-accent) 15%, transparent); border-radius: 4px; }
.passage-actions-footer {
display: flex; justify-content: center; gap: 1rem; margin-top: 3rem;
padding-top: 2rem; border-top: 1px solid var(--color-reader-border);
}
.button {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; font-family: var(--font-sans);
text-decoration: none; border-radius: var(--radius-full); transition: background var(--transition-standard), box-shadow var(--transition-standard), transform var(--transition-standard); cursor: pointer;
border: 2px solid var(--color-reader-accent); background: var(--color-reader-accent);
color: var(--color-primary-contrast);
box-shadow: 0 2px 8px color-mix(in srgb, var(--color-reader-accent) 25%, transparent);
}
.button:hover {
box-shadow: 0 4px 12px color-mix(in srgb, var(--color-reader-accent) 35%, transparent);
background: color-mix(in srgb, var(--color-reader-accent) 90%, #000);
}
.button:active {
transform: translateY(0);
box-shadow: 0 2px 6px color-mix(in srgb, var(--color-reader-accent) 20%, transparent);
}
.button--outline {
background: transparent; color: var(--color-reader-accent);
border: 2px solid var(--color-reader-accent); box-shadow: none;
}
.button--outline:hover {
background: color-mix(in srgb, var(--color-reader-accent) 10%, transparent);
color: var(--color-reader-accent);
box-shadow: 0 2px 8px color-mix(in srgb, var(--color-reader-accent) 15%, transparent);
}
.context-notice .fas { color: var(--color-reader-accent); }
.passage-reader-placeholder {
margin-top: 3rem;
display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;
}
.read-chapter-cta {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.85rem 1.5rem;
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 500;
color: var(--color-reader-text);
background: transparent;
border: 1px solid var(--color-reader-border);
border-radius: var(--radius-full);
text-decoration: none;
transition: border-color var(--transition-standard), color var(--transition-standard), background-color var(--transition-standard);
}
.read-chapter-cta:hover {
border-color: var(--color-reader-accent);
color: var(--color-reader-accent);
background: color-mix(in srgb, var(--color-reader-accent) 6%, transparent);
}
.read-chapter-cta i {
font-size: 0.8em;
opacity: 0.55;
transition: opacity var(--transition-standard);
}
.read-chapter-cta:hover i {
opacity: 1;
}
.passage-not-found { text-align: center; }
@media (width <= 480px) {
.reader-toolbar .btn-icon {
width: 44px;
height: 44px;
padding: 0;
}
.reader-toolbar {
padding: 0.5rem 0.25rem;
}
.toolbar-title {
max-width: 180px;
font-size: 0.9rem;
}
.main-heading {
font-size: 1.5rem;
}
.passage-titles {
margin-bottom: 1.5rem;
padding-bottom: 1rem;
}
.passage-actions-footer {
flex-direction: column;
align-items: center;
gap: 0.75rem;
margin-top: 2rem;
padding-top: 1.5rem;
}
.passage-actions-footer .btn-text {
width: 100%;
max-width: 280px;
justify-content: center;
min-height: 44px;
}
.context-notice {
padding: 0.75rem;
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
}
.passage-title-seo {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.notable-passage-nav {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
width: 100%;
max-width: 40rem;
margin: 1.1rem auto 0;
}
.notable-expand {
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.55rem;
padding: 0.7rem 1.3rem;
font-family: var(--font-serif);
color: var(--color-reader-text);
background: transparent;
border: 1px solid var(--color-reader-border);
border-radius: var(--radius-full);
text-decoration: none;
text-align: center;
transition: border-color var(--transition-standard), color var(--transition-standard);
}
.notable-expand:hover { border-color: var(--color-reader-accent); color: var(--color-reader-accent); }
.notable-expand i { color: var(--color-reader-accent); }
.notable-expand .notable-ref { font-size: 0.88rem; opacity: 0.65; }
.notable-steps {
display: flex;
gap: 0.6rem;
width: 100%;
}
.notable-step {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 1.05rem;
font-size: 0.95rem;
color: var(--color-reader-text);
background: transparent;
border: 1px solid var(--color-reader-border);
border-radius: var(--radius-full);
text-decoration: none;
transition: border-color var(--transition-standard), color var(--transition-standard);
}
.notable-step:hover { border-color: var(--color-reader-accent); color: var(--color-reader-accent); }
.notable-prev { margin-right: auto; }
.notable-next { margin-left: auto; }
@media (width <= 380px) {
.notable-step { padding: 0.5rem 0.8rem; font-size: 0.85rem; gap: 0.35rem; }
.notable-expand { padding: 0.6rem 1rem; }
}