/* Bible hover cards (bible-hover.js) + auto-linked references (src/bible/linker.js).
   Parchment / charcoal / gold by default; follows the Scholar's Desk design
   tokens when present (--sd-*), and the reader's night mode (html[data-br-night]). */

.bible-ref {
  color: inherit;
  text-decoration: none;
  border-bottom: 1.5px dotted var(--sd-link, #a27d3d);
  border-radius: 2px;
  transition: background-color .12s ease;
}
.bible-ref:hover { background: rgba(162, 125, 61, .14); }
.bible-ref:focus-visible { outline: 2px solid var(--sd-link, #a27d3d); outline-offset: 2px; background: rgba(162, 125, 61, .14); }

.bh-card {
  --bh-paper: var(--sd-card, #f7f2e8);
  --bh-paper-2: var(--sd-surface, #efe7d6);
  --bh-ink: var(--sd-ink, #2e2a26);
  --bh-soft: var(--sd-ink-soft, #5b544a);
  --bh-line: var(--sd-line, rgba(162, 125, 61, .45));
  --bh-gold: var(--sd-link, #8a6a2f);
  --bh-font: var(--sd-font-ui, "Segoe UI", system-ui, -apple-system, Arial, sans-serif);
  --bh-serif: var(--sd-font-head, "Cormorant Garamond", Cambria, Georgia, serif);
  position: fixed;
  z-index: 2147483000;
  width: 380px;
  max-width: calc(100vw - 16px);
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
  background: var(--bh-paper);
  color: var(--bh-ink);
  border: 1px solid var(--bh-line);
  border-radius: var(--sd-radius-card, 12px);
  box-shadow: 0 16px 38px rgba(40, 34, 26, .24), 0 2px 6px rgba(40, 34, 26, .12);
  font: 14px/1.45 var(--bh-font);
  text-align: left;
  animation: bh-in .14s ease-out;
}
.bh-card[hidden] { display: none; }
@keyframes bh-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bh-card { animation: none; } }

.bh-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px 6px; }
.bh-ref { font: 700 16px/1.2 var(--bh-serif); letter-spacing: .2px; color: var(--bh-ink); }
.bh-x { border: 0; background: transparent; color: var(--bh-soft); font-size: 20px; line-height: 1; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; }
.bh-x:hover, .bh-x:focus-visible { background: var(--bh-paper-2); color: var(--bh-ink); }

.bh-versions { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 8px; border-bottom: 1px solid var(--bh-line); }
.bh-chip {
  font: 600 12px/1 var(--bh-font); padding: 6px 9px; min-height: 28px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--bh-line); background: transparent; color: var(--bh-soft);
}
.bh-chip:hover { background: var(--bh-paper-2); color: var(--bh-ink); }
.bh-chip.is-active { background: var(--bh-gold); border-color: var(--bh-gold); color: #fff; }
.bh-chip.is-served { border-color: var(--bh-gold); color: var(--bh-ink); }
.bh-more select {
  font: 600 12px/1 var(--bh-font); min-height: 28px; max-width: 120px; padding: 4px 6px; border-radius: 999px;
  border: 1px solid var(--bh-line); background: var(--bh-paper); color: var(--bh-soft); cursor: pointer;
}
.bh-chip:focus-visible, .bh-more select:focus-visible, .bh-open:focus-visible, .bh-attr a:focus-visible { outline: 2px solid var(--bh-gold); outline-offset: 2px; }
.bh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bh-body { padding: 10px 14px; overflow: auto; flex: 1 1 auto; }
.bh-loading, .bh-msg { color: var(--bh-soft); font-style: italic; }
.bh-text { margin: 0; font: 16px/1.55 var(--bh-serif); color: var(--bh-ink); }
.bh-vn { font: 700 10px/1 var(--bh-font); color: var(--bh-gold); margin: 0 2px 0 1px; vertical-align: super; }
.bh-note { margin: 0 0 6px; font-size: 12px; color: var(--bh-soft); }

.bh-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 8px 12px 10px; border-top: 1px solid var(--bh-line); background: var(--bh-paper-2); border-radius: 0 0 var(--sd-radius-card, 12px) var(--sd-radius-card, 12px); }
.bh-attr { margin: 0; font-size: 11px; line-height: 1.35; color: var(--bh-soft); flex: 1 1 auto; }
.bh-attr a { color: inherit; text-decoration: underline; }
.bh-open { flex: 0 0 auto; font: 700 13px/1.2 var(--bh-font); color: var(--bh-gold); text-decoration: none; white-space: nowrap; padding: 6px 2px; }
.bh-open:hover { text-decoration: underline; }

/* Phones: a bottom sheet instead of a floating card. */
.bh-card.bh-sheet {
  left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto !important; max-width: none;
  max-height: 62vh; border-radius: 16px 16px 0 0; border-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -10px 30px rgba(40, 34, 26, .28);
}
.bh-card.bh-sheet .bh-foot { border-radius: 0; }
.bh-card.bh-sheet .bh-chip { min-height: 34px; padding: 8px 11px; font-size: 13px; }
.bh-card.bh-sheet .bh-more select { min-height: 34px; }

/* Night reading (the Bible reader's toggle). */
html[data-br-night] .bh-card {
  --bh-paper: #2a251e; --bh-paper-2: #332d24; --bh-ink: #ece3d0; --bh-soft: #c9bea6; --bh-line: #4d4436; --bh-gold: #d6bc7b;
}
html[data-br-night] .bh-chip.is-active { color: #1f1b16; }

@media print { .bh-card { display: none !important; } .bible-ref { border-bottom: 0; } }