/* =====================================================================
   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;
}

/* ── Understand this chapter ──────────────────────────────────────────────
   Anyone can put the text on a page. The reason to be here is what sits
   underneath it, so say so before the reading starts rather than after.
   This is the app's own "Understand This" affordance, at chapter scale. */
.understand-cta {
    display: flex; align-items: center; gap: 16px;
    margin: 0 0 30px; padding: 16px 20px;
    background: var(--gold-wash); border: 1px solid var(--gold-hair);
    border-radius: var(--r-lg); text-decoration: none; color: inherit;
    transition: background .25s var(--ease), border-color .25s var(--ease),
                transform .25s var(--ease), box-shadow .25s var(--ease);
}
.understand-cta:hover {
    background: color-mix(in srgb, var(--gold-wash) 60%, var(--surface));
    border-color: var(--gold); transform: translateY(-1px);
    box-shadow: var(--lift-subtle);
}
.understand-cta .understand-med {
    width: 38px; height: 38px; min-width: 38px; border-radius: 50%;
    background: var(--gold-light); border: 1px solid var(--gold-hair);
    display: flex; align-items: center; justify-content: center; color: var(--gold-ink);
}
.understand-cta .understand-med .key-mark { width: 19px; height: 19px; }
.uc-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.uc-text strong {
    font-family: var(--serif); font-size: 18px; font-weight: 700;
    color: var(--ink); letter-spacing: -0.015em;
}
.uc-text span { font-size: 13.5px; color: var(--ink-muted); line-height: 1.45; }
.uc-arrow { width: 19px; height: 19px; min-width: 19px; color: var(--gold); transition: transform .25s var(--ease); }
.understand-cta:hover .uc-arrow { transform: translateY(3px); }

/* ── Which verses open ────────────────────────────────────────────────────
   A number with a page behind it gets a quiet gold field; one without is a
   plain position marker. The difference has to be visible at a glance, and
   invisible enough to read past. */
.chapter-text .vnum { color: var(--ink-ghost); font-weight: 600; }
.chapter-text .vnum--linked {
    color: var(--gold-ink); font-weight: 700;
    /* --gold-wash at 0.09 disappears on cream; this needs to be seen */
    background: color-mix(in srgb, var(--gold) 20%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent);
    border-radius: 5px; padding: 2px 5px; margin-right: 6px;
    text-decoration: none; border-bottom: none;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.chapter-text .vnum--linked:hover {
    background: var(--gold); color: #fff; border-bottom: none;
    box-shadow: inset 0 0 0 1px var(--gold);
}
@media (prefers-color-scheme: dark) {
    .chapter-text .vnum--linked {
        background: color-mix(in srgb, var(--gold) 16%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 34%, transparent);
    }
    .chapter-text .vnum--linked:hover { color: #1F1B17; }
}

@media (max-width: 720px) {
    /* 18px is not a tap target. Grow the hit area to fill the line box without
       changing what the marker looks like or reaching into the lines around it. */
    .chapter-text .vnum--linked { position: relative; }
    .chapter-text .vnum--linked::after {
        content: ''; position: absolute; top: -7px; right: -7px; bottom: -7px; left: -7px;
    }

    .understand-cta { padding: 14px 16px; gap: 13px; }
    .uc-text strong { font-size: 16.5px; }
    .uc-text span { font-size: 12.5px; }
}