/* =====================================================================
   BibleKey — the chapter page.
   Scripture is set in the app's own reading face (New York) at the app's
   own measure. Everything else stays out of its way.
   ===================================================================== */

.chapter-wrap { max-width: 700px; }
/* beats `.page-head .wrap`, so the heading and the text share a left edge */
.page-head .wrap.chapter-wrap { max-width: 700px; }

.page-head .ch-title {
    font-family: var(--serif); font-size: clamp(21px, 2.4vw, 27px);
    font-style: italic; color: var(--gold-ink); font-weight: 600;
    letter-spacing: -0.015em; margin: -8px 0 18px;
}

/* Translation bar — quiet, hairline, sits above the text like the app's chrome */
.tx-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-bottom: 13px; margin-bottom: 30px;
    border-bottom: 1px solid var(--card-edge);
}
.tx-label { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); }
.tx-links { display: flex; gap: 6px; }
.tx-links a {
    font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
    color: var(--ink-muted); text-decoration: none;
    padding: 5px 12px; border-radius: var(--r-full);
    border: 1px solid transparent; transition: all .2s ease;
}
.tx-links a:hover { color: var(--gold-ink); background: var(--gold-wash); }
.tx-links a.on { color: var(--gold-ink); background: var(--gold-wash); border-color: var(--gold-hair); }

/* The text itself */
.chapter-text {
    font-family: var(--serif);
    font-size: 20px; line-height: 1.72; color: var(--ink);
    letter-spacing: -0.003em;
}
.chapter-text .v { margin-bottom: 15px; text-wrap: pretty; }
.chapter-text .v:target { background: var(--hl-yellow); border-radius: 4px; box-shadow: 0 0 0 5px var(--hl-yellow); }
.chapter-text .vnum {
    font-family: var(--sans); font-size: 11.5px; font-weight: 700;
    color: var(--gold); vertical-align: 0.42em; margin-right: 7px;
    font-variant-numeric: tabular-nums; letter-spacing: 0;
}

/* Understand This — the app's insight card, on the page */
.insight {
    margin-top: 56px; padding: 34px 34px 38px;
    background: var(--surface); border: 1px solid var(--card-edge);
    border-radius: var(--r-card); box-shadow: var(--lift-subtle);
}
.insight h2 { font-size: clamp(24px, 3vw, 31px); letter-spacing: -0.02em; margin-bottom: 6px; }
.insight h3 {
    font-family: var(--sans); font-size: 12px; font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-ink);
    margin-top: 30px; margin-bottom: 9px;
}
.insight p { font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }

.all-ch { margin-top: 36px; font-size: 14px; color: var(--ink-faint); text-align: center; }
.all-ch a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid var(--card-edge); }
.all-ch a:hover { color: var(--gold-ink); border-bottom-color: var(--gold-hair); }

.attrib { margin-top: 22px; font-size: 12px; line-height: 1.6; color: var(--ink-ghost); text-align: center; }

@media (max-width: 720px) {
    .chapter-text { font-size: 18.5px; line-height: 1.7; }
    .insight { padding: 26px 24px 30px; }
}

/* Verse numbers become links where that verse has its own page */
.chapter-text .vnum--linked {
    text-decoration: none; cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.chapter-text .vnum--linked:hover { color: var(--gold-deep); border-bottom-color: var(--gold-hair); }

.tx-hint {
    font-size: 12.5px; color: var(--ink-faint); margin: -14px 0 24px;
    letter-spacing: 0.01em;
}