/* bible-connections.css — Scripture Connections (/bible/connections, /biblia/conexiones).
   Scoped to .bc inside .bible-reader; every colour comes from the reader's --br-* tokens,
   so the visitor's reader theme (Parchment, White, Sepia, Night, High contrast) applies.
   Two arc colours carry the direction: antique gold above the line ("points to"),
   slate below it ("points here"); hatched books = no data in the dataset. */
.bc {
  --bc-out: var(--br-gold);
  --bc-in: #4f6475;
  --bc-ov: var(--br-gold-2);
  --bc-card: var(--br-surface);
  --bc-radius: 14px;
}
html[data-br-theme="night"] .bc, html[data-br-theme-default="night"] .bc { --bc-in: #9db7cc; }
html[data-br-theme="contrast"] .bc, html[data-br-theme-default="contrast"] .bc { --bc-in: #12395c; --bc-ov: #5c3d00; }

.bc .bc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bc :focus-visible { outline: 3px solid var(--br-focus); outline-offset: 2px; border-radius: 6px; }
.bc a { color: var(--br-link); }

/* ---------- hero + search ---------- */
.bc-hero { position: relative; padding-bottom: .4rem; }
.bc-kicker { font-family: var(--br-font-head); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: var(--br-gold); margin: 0 0 .2rem; }
.bc-title { margin-bottom: .35rem; }
.bc-search { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: .6rem .75rem; align-items: end; margin: 1rem 0 .25rem; padding: .9rem; background: var(--br-panel); border: 1px solid var(--br-line); border-radius: var(--bc-radius); box-shadow: var(--br-shadow); }
.bc-field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.bc-label { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--br-muted); }
.bc-search input, .bc-search select { width: 100%; min-height: 2.75rem; padding: .5rem .75rem; border-radius: 10px; border: 1px solid var(--br-line); background: var(--br-surface); color: var(--br-ink); font: inherit; font-size: 1.02rem; }
.bc-search input:focus-visible, .bc-search select:focus-visible { border-color: var(--br-gold); }
.bc-go { min-width: 7rem; }
.bc-try { grid-column: 1 / -1; margin: .1rem 0 0; font-size: .92rem; color: var(--br-muted); display: flex; flex-wrap: wrap; gap: .25rem .7rem; align-items: baseline; }
.bc-try a { text-decoration: underline; text-decoration-color: var(--br-gold-2); text-underline-offset: 3px; }
@media (max-width: 760px) { .bc-search { grid-template-columns: 1fr; } .bc-go { width: 100%; } }

/* ---------- the canon map ---------- */
.bc-map { margin: 1.4rem 0 .6rem; }
.bc-map .bc-h2 { margin: 0 0 .5rem; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: var(--br-muted) !important; }
.bc-figure { margin: 0; padding: .9rem .9rem .7rem; border: 1px solid var(--br-line); border-radius: var(--bc-radius); background:
  radial-gradient(120% 90% at 50% 100%, var(--br-gold-soft) 0%, transparent 62%), var(--bc-card); }
.bc-svgwrap { position: relative; }
.bc-svg { display: block; width: 100%; height: clamp(150px, 24vw, 250px); overflow: visible; }
.bc-svg path, .bc-svg rect, .bc-svg line { vector-effect: non-scaling-stroke; }
.bc-book { fill: var(--br-ot); opacity: .85; cursor: pointer; }
.bc-book.bc-g-law { opacity: .95; } .bc-book.bc-g-wisdom { opacity: .7; } .bc-book.bc-g-prophets { opacity: .8; } .bc-book.bc-g-history { opacity: .6; }
.bc-book.bc-g-gospels, .bc-book.bc-g-acts, .bc-book.bc-g-epistles, .bc-book.bc-g-revelation { fill: var(--br-nt); }
.bc-book.bc-g-epistles { opacity: .7; }
.bc-book.is-nodata { fill: url(#bc-hatch); opacity: 1; stroke: var(--br-line); stroke-width: .5; }
.bc-book:hover { opacity: 1; }
.bc-hatch-bg { fill: var(--br-paper-2); }
.bc-hatch-line { stroke: var(--br-muted); stroke-width: 1.4; }
.bc-bracket { fill: none; stroke: var(--br-line); stroke-width: 1; }
.bc-glabel { font-family: var(--br-font-ui); font-size: 11px; fill: var(--br-muted); letter-spacing: .04em; }
.bc-arc { fill: none; stroke-linecap: round; }
.bc-arc-ov { stroke: var(--bc-ov); stroke-width: .9; }
.bc-arc-ov.is-cross { stroke: var(--br-gold); }
.bc-arc-out { stroke: var(--bc-out); opacity: .78; cursor: pointer; }
.bc-arc-in { stroke: var(--bc-in); opacity: .7; cursor: pointer; stroke-dasharray: 5 3; }
.bc-arcs.has-hot .bc-arc { opacity: .18; }
.bc-arcs .bc-arc.is-hot, .bc-arcs .bc-arc.is-sel { opacity: 1; stroke-width: 3.6px; }
.bc-arc.is-sel { stroke: var(--br-heading); }
.bc-arcs.is-drawn .bc-arc { animation: bc-fade .5s ease-out both; }
@keyframes bc-fade { from { opacity: 0; } }
.bc-centre line { stroke: var(--br-heading); stroke-width: 1.5; }
.bc-centre circle { fill: var(--br-heading); }
.bc-tip { position: absolute; top: -.4rem; padding: .2rem .5rem; border-radius: 6px; background: var(--br-heading); color: var(--br-bg); font-size: .8rem; pointer-events: none; white-space: nowrap; }
.bc-figure figcaption { margin-top: .5rem; font-size: .9rem; color: var(--br-ink-soft); line-height: 1.5; }
.bc-legend { list-style: none; margin: .45rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .82rem; color: var(--br-muted); }
.bc-key { display: inline-block; width: 1.6rem; height: .7rem; margin-right: .4rem; vertical-align: middle; border-radius: 1rem 1rem 0 0; border: 2px solid var(--bc-out); border-bottom: 0; }
.bc-key-in { border-color: var(--bc-in); border-radius: 0 0 1rem 1rem; border-top: 0; border-bottom: 2px dashed var(--bc-in); }
.bc-key-nodata { border: 1px solid var(--br-line); border-radius: 2px; background: repeating-linear-gradient(45deg, var(--br-paper-2) 0 3px, var(--br-muted) 3px 4px); }

/* ---------- explorer ---------- */
.bc-app[aria-busy="true"] { opacity: .6; transition: opacity .2s; }
.bc-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; align-items: center; margin: 1.1rem 0 .2rem; }
.bc-tools { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-left: auto; }
.bc-share { min-height: 2.4rem; }
.bc-back, .bc .bc-back a { font-weight: 600; }
.bc-trail { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; font-size: .95rem; }
.bc-trail ol { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem; margin: 0; padding: 0; }
.bc-trail li + li::before { content: "›"; margin: 0 .35rem 0 .15rem; color: var(--br-gold); }
.bc-trail [aria-current] { font-weight: 700; color: var(--br-heading); }
.bc-explore { display: grid; grid-template-columns: minmax(270px, 370px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 899px) { .bc-explore { grid-template-columns: 1fr; } .bc-explore.has-target .bc-col-read { order: -1; } }
.bc-centre-h { margin: .8rem 0 .4rem !important; font-size: clamp(1.5rem, 3vw, 2rem) !important; }
.bc-centre-h:focus { outline: none; }
.bc-filters { display: flex; flex-direction: column; gap: .45rem; margin: .4rem 0 .6rem; }
.bc-fgroup { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.bc-fgroup .bc-label { width: 100%; }
.bc-chip { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .25rem .75rem; border-radius: 999px; border: 1px solid var(--br-line); background: var(--br-surface); color: var(--br-ink) !important; font: inherit; font-size: .9rem; cursor: pointer; text-decoration: none; }
.bc-chip.is-on, .bc-chip[aria-pressed="true"] { background: var(--br-heading); border-color: var(--br-heading); color: var(--br-bg) !important; }
.bc-help { color: var(--br-muted); font-size: .9rem; line-height: 1.5; margin: .2rem 0 .6rem; }
.bc-votes-explain { border-left: 3px solid var(--br-gold-soft); padding-left: .6rem; }
.bc-h3 { font-family: var(--br-font-head); font-size: 1.08rem; margin: 1.1rem 0 .15rem; color: var(--br-heading); }
.bc-count { font-family: var(--br-font-ui); font-size: .85rem; font-weight: 600; color: var(--br-muted); }
.bc-list-out .bc-h3::before { content: ""; display: inline-block; width: .9rem; height: .45rem; margin-right: .45rem; border: 2px solid var(--bc-out); border-bottom: 0; border-radius: 1rem 1rem 0 0; vertical-align: middle; }
.bc-list-in .bc-h3::before { content: ""; display: inline-block; width: .9rem; height: .45rem; margin-right: .45rem; border-bottom: 2px dashed var(--bc-in); border-radius: 0 0 1rem 1rem; vertical-align: middle; }
.bc-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.bc-item { margin: 0; }
.bc-link { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "dir ref votes" "dir via votes"; align-items: center; gap: 0 .55rem; padding: .5rem .65rem; border-radius: 10px; border: 1px solid var(--br-line-soft); background: var(--br-surface); color: var(--br-ink) !important; text-align: left; font: inherit; cursor: pointer; text-decoration: none; min-height: 2.75rem; }
.bc-link:hover, .bc-item.is-hot .bc-link { border-color: var(--br-gold); background: var(--br-gold-soft); }
.bc-item.is-current .bc-link, .bc-link[aria-pressed="true"] { border-color: var(--br-heading); box-shadow: inset 4px 0 0 var(--br-gold); }
.bc-dir { grid-area: dir; color: var(--bc-out); font-weight: 700; }
.bc-list-in .bc-dir { color: var(--bc-in); }
.bc-iref { grid-area: ref; font-family: var(--br-font-read); font-weight: 600; font-size: 1.02rem; }
.bc-via { grid-area: via; font-size: .8rem; color: var(--br-muted); }
.bc-mutual { grid-area: ref; justify-self: end; margin-right: .2rem; color: var(--br-gold); font-weight: 700; }
.bc-votes { grid-area: votes; display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; font-size: .75rem; color: var(--br-muted); white-space: nowrap; }
.bc-bar { display: block; width: 3.6rem; height: .3rem; border-radius: 1rem; background: linear-gradient(90deg, var(--br-gold) var(--w), var(--br-line-soft) var(--w)); }
.bc-list-in .bc-bar { background: linear-gradient(90deg, var(--bc-in) var(--w), var(--br-line-soft) var(--w)); }
.bc-nodata, .bc-error { padding: .9rem 1rem; border-radius: 12px; border: 1px dashed var(--br-line); background: var(--br-panel); line-height: 1.55; }
.bc-error { border-style: solid; border-color: var(--br-nt); }

/* chapter picker */
.bc-vgrid { list-style: none; margin: .4rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); gap: .35rem; }
.bc-vgrid a { display: flex; flex-direction: column; align-items: center; padding: .35rem .2rem; border: 1px solid var(--br-line); border-radius: 10px; background: var(--br-surface); text-decoration: none; color: var(--br-ink) !important; min-height: 2.75rem; }
.bc-vgrid a:hover { border-color: var(--br-gold); }
.bc-vgrid b { font-family: var(--br-font-read); font-size: 1.05rem; }
.bc-vgrid span { font-size: .72rem; color: var(--br-muted); }
.bc-chnav { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }

/* reading */
.bc-read .bc-h2 { margin-top: .8rem; }
.bc-pair { display: grid; gap: 1rem; }
@media (min-width: 1180px) { .bc-pair.has-target { grid-template-columns: 1fr 1fr; } }
.bc-passage { border: 1px solid var(--br-line); border-radius: var(--bc-radius); background: var(--bc-card); padding: .9rem 1.05rem .8rem; box-shadow: var(--br-shadow); }
.bc-passage.is-target { border-top: 4px solid var(--br-gold); }
.bc-passage.is-centre { border-top: 4px solid var(--br-heading); }
.bc-phead { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.bc-ph { font-family: var(--br-font-head); font-size: 1.12rem; margin: 0; color: var(--br-heading); }
.bc-ver { font-size: .78rem; font-weight: 700; letter-spacing: .05em; padding: .1rem .45rem; border-radius: 6px; background: var(--br-gold-soft); color: var(--br-ink); }
.bc-text { font-family: var(--br-font-read); font-size: calc(var(--br-text-size) * .86); line-height: var(--br-text-leading); margin: .5rem 0 .3rem; }
.bc-text p { margin: 0 0 .3rem; }
.bc-v { color: var(--br-muted); }
.bc-v.is-focus { color: var(--br-ink); background: linear-gradient(90deg, var(--br-gold-soft), transparent 85%); border-left: 3px solid var(--br-gold); padding: .1rem .45rem; margin-left: -.5rem; border-radius: 0 6px 6px 0; }
.bc-vn { color: var(--br-vn); font-family: var(--br-font-ui); font-size: .62em; font-weight: 700; }
.bc-chap { font-family: var(--br-font-head); color: var(--br-gold); margin: .6rem 0 .2rem !important; font-size: .9rem; }
.bc-status { font-size: .86rem; line-height: 1.5; color: var(--br-ink-soft); margin: .45rem 0; padding: .4rem .6rem; border-radius: 8px; background: var(--br-panel); border-left: 3px solid var(--bc-in); }
.bc-status.is-warn { border-left-color: var(--br-nt); }
.bc-pfoot { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; margin-top: .4rem; padding-top: .5rem; border-top: 1px solid var(--br-line-soft); }
.bc-pfoot .br-btn { min-height: 2.5rem; }
.bc-reader { font-weight: 600; }
.bc-attrib { flex-basis: 100%; color: var(--br-muted); font-size: .76rem; }
.bc-follow { order: -1; }
.bc-loading { color: var(--br-muted); font-style: italic; }

/* ---------- journeys ---------- */
.bc-journeys { margin-top: 2.2rem; }
.bc-lead2 { color: var(--br-ink-soft); max-width: 46rem; }
.bc-jgrid { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .9rem; }
.bc-jcard a { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1rem 1.05rem 1.1rem; border-radius: var(--bc-radius); border: 1px solid var(--br-line); background: var(--bc-card); text-decoration: none; color: var(--br-ink) !important; box-shadow: var(--br-shadow); position: relative; overflow: hidden; }
.bc-jcard a::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--br-gold); }
.bc-j1 a::before { background: var(--br-nt); } .bc-j2 a::before { background: var(--br-ot); } .bc-j3 a::before { background: var(--bc-in); } .bc-j4 a::before { background: var(--br-dc); } .bc-j5 a::before { background: var(--br-heading); }
.bc-jcard a:hover { border-color: var(--br-gold); transform: translateY(-1px); }
.bc-jtag { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--br-muted); font-weight: 700; }
.bc-jt { font-family: var(--br-font-head); font-size: 1.15rem; color: var(--br-heading); }
.bc-js { font-size: .95rem; line-height: 1.5; color: var(--br-ink-soft); }
.bc-editorial { font-size: .92rem; color: var(--br-ink-soft); border-left: 3px solid var(--br-dc); padding: .3rem .7rem; background: var(--br-panel); border-radius: 0 8px 8px 0; max-width: 46rem; }
.bc-steps { list-style: none; margin: 1.4rem 0; padding: 0; counter-reset: none; }
.bc-step { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .9rem; position: relative; padding-bottom: 1.6rem; }
.bc-step::before { content: ""; position: absolute; left: 1.25rem; top: 2.6rem; bottom: 0; border-left: 2px dotted var(--br-gold-2); }
.bc-step:last-child::before { display: none; }
.bc-stepn { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--br-font-head); font-weight: 700; background: var(--br-heading); color: var(--br-bg); }
.bc-stepb .bc-h3 { margin-top: .4rem; font-size: 1.2rem; }
.bc-note { font-size: 1.03rem; line-height: 1.6; margin: .35rem 0 .6rem; max-width: 44rem; }
.bc-kind { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: baseline; margin: .2rem 0; font-size: .85rem; color: var(--br-muted); }
.bc-kname { font-weight: 700; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--br-line); color: var(--br-ink); background: var(--br-surface); }
.bc-kind.is-quotation .bc-kname { background: var(--br-gold); border-color: var(--br-gold); color: var(--br-on-accent); }
.bc-kind.is-wording .bc-kname { border-color: var(--br-gold); color: var(--br-gold); }
.bc-kind.is-typeInText .bc-kname { border-color: var(--br-nt); color: var(--br-nt); }
.bc-kind.is-patristic .bc-kname { border-color: var(--br-dc); color: var(--br-dc); }
.bc-step .bc-passage { box-shadow: none; max-width: 46rem; }
.bc-evidence { margin: .5rem 0; font-size: .9rem; max-width: 46rem; }
.bc-evidence summary { cursor: pointer; color: var(--br-link); font-weight: 600; }
.bc-evidence ul { margin: .4rem 0; padding-left: 1.1rem; }
.bc-evidence q { font-family: var(--br-font-read); }
.bc-father { margin: .8rem 0; padding: .7rem 1rem; border-left: 3px solid var(--br-dc); background: var(--br-panel); border-radius: 0 10px 10px 0; max-width: 46rem; }
.bc-father blockquote { margin: .4rem 0; font-family: var(--br-font-read); font-size: 1.05rem; font-style: italic; }
.bc-father blockquote p { margin: 0; }
.bc-fcite { font-size: .85rem; color: var(--br-ink-soft); margin: .2rem 0 0; }
.bc-ds { font-size: .85rem; color: var(--br-muted); margin: .3rem 0; }
.bc-steplinks { font-size: .92rem; margin: .3rem 0 0; }
.bc-jnav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; padding-top: 1rem; border-top: 1px solid var(--br-line); }

/* ---------- provenance ---------- */
.bc-prov { margin-top: 2rem; padding: .9rem 1rem; border-radius: 12px; background: var(--br-panel); border: 1px solid var(--br-line-soft); font-size: .86rem; color: var(--br-ink-soft); line-height: 1.55; }
.bc-prov p { margin: 0; }
.bc-about .br-section p { max-width: 46rem; line-height: 1.65; }

@media (max-width: 640px) {
  .bc-svg { height: 130px; }
  .bc-glabel { font-size: 9px; }
  .bc-figure { padding: .6rem .5rem .55rem; }
  .bc-step { grid-template-columns: 2rem minmax(0, 1fr); gap: .6rem; }
  .bc-stepn { width: 2rem; height: 2rem; font-size: .9rem; }
  .bc-step::before { left: 1rem; top: 2rem; }
  .bc-passage { padding: .75rem .8rem .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bc *, .bc *::before { animation: none !important; transition: none !important; }
  .bc-jcard a:hover { transform: none; }
}
@media print {
  .bc-map, .bc-search, .bc-filters, .bc-toolbar, .bc-prov { display: none; }
}