/* ── Bible Reader — bible.css ─────────────────────────────────────────── */

:root {
    --bg:          #0d0b08;
    --page-bg:     #141210;
    --page-border: #242018;
    --text:        #cdc8be;
    --text-dim:    #7a7468;
    --ch-num:      #b8904a;
    --vn-color:    #505878;
    --vn-hover:    #8890c0;
    --supplied:    #9a9282;
    --spine:       rgba(0,0,0,0.55);
    --nav-bg:      #0a0905;
    --nav-border:  #201e18;
    --ctrl-bg:     #1a1812;
    --btn-bg:      #222018;
    --btn-hover:   #302e20;
    --red:         #d5001c;
    --notes-bg:    #0f0d0a;
    --notes-head:  #b8904a;
    --notes-border:#1e1c16;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

body.bible-body {
    background: var(--bg);
    color: var(--text);
    font-family: Georgia, 'Times New Roman', 'DejaVu Serif', serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Navigation ─────────────────────────────────────────────────────────── */
.bible-nav {
    flex-shrink: 0;
    z-index: 100;
    background: var(--nav-bg);
    border-bottom: 2px solid var(--red);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.6rem 1.75rem;
    flex-wrap: wrap;
}

.bible-home-link {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-dim);
    text-decoration: none;
    padding-right: 1.25rem;
    border-right: 1px solid var(--nav-border);
    white-space: nowrap;
    transition: color 0.2s;
}
.bible-home-link:hover { color: var(--text); }

.bible-controls {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.ctrl-label {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    white-space: nowrap;
}

.bible-controls select,
.bible-controls input {
    background: var(--ctrl-bg);
    border: 1px solid var(--nav-border);
    color: var(--text);
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.83rem;
    font-weight: 600;
    padding: 0.32rem 0.55rem;
    outline: none;
    border-radius: 2px;
    cursor: pointer;
}
.bible-controls select:focus,
.bible-controls input:focus { border-color: var(--red); }

#sel-book    { min-width: 155px; }
#sel-chapter { width: 72px; }
#inp-verse   { width: 66px; }

.nav-btn {
    background: var(--btn-bg);
    border: 1px solid var(--nav-border);
    color: var(--text-dim);
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.32rem 0.7rem;
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    letter-spacing: 0.05em;
}
.nav-btn:hover:not(:disabled) {
    background: var(--btn-hover);
    color: var(--text);
    border-color: #3a3828;
}
.nav-btn:disabled { opacity: 0.28; cursor: default; }

/* ── Split-pane layout ──────────────────────────────────────────────────── */
.bible-layout {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.bible-pane {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #2a2820 transparent;
}
.bible-pane::-webkit-scrollbar { width: 6px; }
.bible-pane::-webkit-scrollbar-track { background: transparent; }
.bible-pane::-webkit-scrollbar-thumb { background: #2a2820; border-radius: 3px; }

.bible-pane-text {
    flex: 1.1;
    padding: 2rem 1.5rem 4rem;
}

.bible-pane-notes {
    flex: 0.9;
    background: var(--notes-bg);
    border-left: 1px solid var(--notes-border);
}

/* Spine shadow between panes */
.bible-spine {
    flex-shrink: 0;
    width: 32px;
    background: linear-gradient(to right,
        var(--spine) 0%,
        transparent 100%);
    pointer-events: none;
}

/* ── Book wrapper ────────────────────────────────────────────────────────── */
.book-wrap {
    position: relative;
    background: var(--page-bg);
    border: 1px solid var(--page-border);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.4),
        0 10px 40px rgba(0,0,0,0.6),
        inset 0 0 80px rgba(0,0,0,0.12);
    padding: 3.5rem 4rem;
    min-height: 100%;
}

/* ── Bible text ──────────────────────────────────────────────────────────── */
.bible-text {
    position: relative;
}

/* ── Chapter heading ─────────────────────────────────────────────────────── */
.ch-heading {
    text-align: center;
    padding: 0.5rem 0 2.5rem;
}
.ch-book {
    display: block;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}
.ch-num {
    display: block;
    font-size: 2.8rem;
    font-weight: normal;
    color: var(--ch-num);
    line-height: 1;
}

/* ── Bible paragraphs ────────────────────────────────────────────────────── */
.bible-para {
    margin-bottom: 0.85em;
    line-height: 1.88;
    font-size: 1.04rem;
    color: var(--text);
    text-align: left;
}

/* ── Verse numbers ───────────────────────────────────────────────────────── */
.vn {
    font-size: 0.58em;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-weight: 700;
    color: var(--vn-color);
    vertical-align: super;
    line-height: 0;
    margin: 0 0.18em 0 0.08em;
    cursor: default;
    user-select: none;
    position: relative;
    transition: color 0.15s;
}
.vn:hover { color: var(--vn-hover); }

.vn.v-lit {
    color: var(--ch-num);
    text-shadow: 0 0 6px currentColor;
}

/* ── Red-letter words of Jesus ───────────────────────────────────────────── */
.rl { color: var(--red); }

/* ── Supplied / italicised words ─────────────────────────────────────────── */
.supplied {
    font-style: italic;
    color: var(--supplied);
}
.rl .supplied { color: #e0506a; }

/* ── Status / loading ────────────────────────────────────────────────────── */
.bible-status {
    text-align: center;
    padding: 4rem;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
}

/* ── Notes pane ──────────────────────────────────────────────────────────── */
.notes-wrap {
    padding: 2rem 1.75rem 4rem;
    min-height: 100%;
}

.notes-content {
    font-size: 0.95rem;
    line-height: 1.7;
}

.notes-placeholder {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    text-align: center;
    padding-top: 2rem;
}

/* Chapter header in the notes pane */
.notes-ch-header {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--notes-border);
}
.notes-ch-book {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-dim);
}
.notes-ch-num {
    font-size: 1.8rem;
    font-weight: normal;
    color: var(--notes-head);
    line-height: 1;
}

/* Note entries */
.note-entry {
    border-bottom: 1px solid var(--notes-border);
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
}
.note-entry:last-child {
    border-bottom: none;
}

/* Verse number label — large, links to full note page */
.note-verse-label {
    margin-bottom: 0.35rem;
}
.note-verse-link {
    font-size: 1.4rem;
    font-weight: normal;
    color: var(--notes-head);
    text-decoration: none;
    line-height: 1;
    font-family: Georgia, serif;
}
.note-verse-link:hover { color: var(--text); }

/* Chapter-level note "Read more" link */
.study-note-more {
    display: inline-block;
    margin-top: 0.5rem;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    text-decoration: none;
}
.study-note-more:hover { color: var(--text); }

.study-note-authors {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
}
.study-note-content {
    font-size: 0.88rem;
    line-height: 1.65;
    color: #a0998e;
}
.study-note-content p { margin-bottom: 0.5em; }

/* Active note (IntersectionObserver highlight) */
.note-entry-active {
    border-left: 2px solid var(--red);
    padding-left: 0.75rem;
    margin-left: -0.77rem;
}
.note-entry-active .note-verse-link {
    color: var(--text);
}
.note-entry-active .study-note-content {
    color: var(--text-dim);
}


/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .bible-pane-notes { flex: 0.75; }
}
@media (max-width: 860px) {
    .bible-layout    { flex-direction: column; overflow-y: auto; height: auto; }
    .bible-pane      { overflow-y: visible; }
    .bible-pane-text { padding: 1.25rem 0.75rem 2rem; }
    .bible-pane-notes{ border-left: none; border-top: 2px solid var(--notes-border); }
    .bible-spine     { width: 100%; height: 20px; background: linear-gradient(to bottom, var(--spine) 0%, transparent 100%); }
    .book-wrap       { padding: 2rem 1.5rem; }
    body.bible-body  { height: auto; overflow: auto; }
}
@media (max-width: 600px) {
    .bible-nav       { padding: 0.5rem 1rem; gap: 0.4rem; }
    .bible-home-link { display: none; }
}