/* ============================================================
   Gospel Companion — the reference layer as part of the reader
   (bible/library.js, and the "In this verse" block bible/reference.js
   renders into #pWhen). Loaded after bible.html's own <style>, so it
   may quietly re-place #pWhen; every token is the reader's own.
   ============================================================ */

/* ---- the ⓘ on a book row: quiet on a mouse, always there on touch ---- */
.rlBookRow{display:flex;align-items:center;gap:2px}
.rlBookRow > .rlBook{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlInfo{flex:none;width:24px;height:24px;padding:0;border:0;border-radius:7px;background:none;cursor:pointer;
  color:var(--faint);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,color .15s,background .15s}
.rlInfo svg{width:14px;height:14px}
.rlInfo:hover,.rlInfo:focus-visible{color:var(--gold);background:rgba(232,184,115,.12);opacity:1;outline:none}
.rlBookRow:hover .rlInfo,.rlBookRow:focus-within .rlInfo{opacity:.75}
@media(hover:none){.rlInfo{opacity:.5}}

/* ---- the Library section in the rail ---- */
.rlLib{display:flex;flex-direction:column;gap:2px;margin:4px 0 2px;padding-top:10px;border-top:1px solid var(--line-faint)}
.rlLibHead{display:flex;align-items:center;gap:8px;width:100%;padding:3px 8px;border:0;border-radius:8px;
  background:none;cursor:pointer;font-family:var(--font-body);text-align:left}
.rlLibHead:hover{background:rgba(142,153,194,.1)}
.rlLibHead .rlLbl{color:var(--gold)}
.rlLibN{margin-left:auto;font-size:11px;color:rgba(142,153,194,.75)}
.rlLibChev{color:var(--faint);font-size:15px;line-height:1;transform:rotate(90deg);transition:transform .2s}
.rlLib.on .rlLibChev{transform:rotate(-90deg)}
.rlLibRows{display:none;flex-direction:column;gap:1px;padding-top:3px}
.rlLib.on .rlLibRows{display:flex}
.rlLibRows a.rlRow{text-decoration:none}
.rlLibRows a.rlRow .n{font-size:11px;letter-spacing:.02em}

/* ---- the book introduction sheet ---- */
.bkShade{position:fixed;inset:0;z-index:78;background:rgba(4,6,15,.55);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .2s}
.bkShade.on{opacity:1;pointer-events:auto}
.bkSheet{position:fixed;z-index:79;display:none;overflow:auto;overscroll-behavior:contain;
  background:rgba(10,15,34,.98);border:1px solid rgba(232,184,115,.32);box-shadow:0 18px 60px rgba(0,0,0,.7);
  font:400 13px var(--font-body);color:var(--starlight);line-height:1.6;
  left:0;right:0;bottom:0;max-height:88vh;border-radius:22px 22px 0 0;padding:18px 18px calc(24px + env(safe-area-inset-bottom))}
.bkSheet.on{display:block;animation:bkUp .26s cubic-bezier(.2,.7,.3,1) both}
@keyframes bkUp{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:1200px){
  .bkSheet{left:0;right:auto;top:56px;bottom:0;width:min(400px,42vw);max-height:none;
    border-radius:0 18px 18px 0;border-left:0;padding:20px 22px 40px}
  .bkSheet.on{animation:bkIn .26s cubic-bezier(.2,.7,.3,1) both}
  @keyframes bkIn{from{transform:translateX(-14px);opacity:0}to{transform:none;opacity:1}}
  /* the reader stays legible behind the sheet — it is never left */
  .bkShade{background:rgba(4,6,15,.3);backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){.bkSheet.on{animation:none}}
.bkX{position:absolute;right:12px;top:12px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-faint);
  background:rgba(10,15,34,.9);color:var(--faint);font-size:17px;line-height:1;cursor:pointer}
.bkX:hover{color:var(--gold);border-color:var(--hairline)}
.bkEyebrow{font:600 10px var(--font-body);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);padding-right:36px}
.bkName{font-family:var(--font-display);font-size:26px;letter-spacing:.05em;margin:4px 0 8px;font-weight:600;line-height:1.15}
.bkKind{margin:0 0 14px;font-size:13.5px;font-weight:300;color:#DDE3F5}
.bkSec{font:600 10px var(--font-body);letter-spacing:.28em;text-transform:uppercase;color:var(--faint);
  margin:18px 0 9px;display:flex;align-items:center;gap:8px}
.bkSec::after{content:'';flex:1;height:1px;background:var(--line-faint)}
.bkFacts{display:flex;flex-direction:column;gap:10px}
.bkFact{padding:11px 13px;border-radius:12px;background:rgba(13,18,40,.55);border:1px solid var(--line-faint)}
.bkFactL{display:block;font:600 9.5px var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.bkFact p{margin:0;font-size:13px;font-weight:300;color:#DDE3F5;line-height:1.6}
.bkSrc{display:block;font-style:normal;font-size:10.5px;line-height:1.5;color:rgba(142,153,194,.8);margin-top:6px}
.bkPurpose{display:block;padding:12px 14px;border-radius:12px;text-decoration:none;
  background:rgba(232,184,115,.07);border:1px solid rgba(232,184,115,.28);transition:all .25s}
.bkPurpose:hover{background:rgba(232,184,115,.13)}
.bkPurpose b{display:block;font-size:13.5px;font-weight:400;color:var(--starlight);line-height:1.65;margin-bottom:6px}
.bkPurpose span{display:block;font-size:10.5px;line-height:1.5;color:var(--gold)}
.bkOutline{display:flex;flex-direction:column;gap:4px}
.bkOut{display:flex;align-items:baseline;gap:10px;padding:7px 10px;border-radius:9px;text-decoration:none;
  color:var(--starlight);border:1px solid transparent;transition:all .2s}
.bkOut:hover{background:rgba(142,153,194,.1);border-color:var(--line-faint)}
.bkOut em{flex:none;width:74px;font-style:normal;font:600 11px var(--font-body);color:var(--aqua);letter-spacing:.02em}
.bkOut span{flex:1;min-width:0;font-size:13px;font-weight:300}
.bkStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:7px}
.bkStat{padding:9px 10px;border-radius:11px;background:rgba(13,18,40,.55);border:1px solid var(--line-faint);text-align:center}
.bkStat b{display:block;font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--gold);line-height:1.2}
.bkStat span{display:block;font-size:10px;letter-spacing:.1em;color:var(--faint);margin-top:3px;line-height:1.35}
.bkBtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.bkBtn{flex:1 1 150px;display:flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;border:0;
  cursor:pointer;text-align:center;text-decoration:none;background:linear-gradient(105deg,#FDF6E8,var(--gold));
  color:#1a1206;font:600 12.5px var(--font-body)}
.bkBtn.ghost{background:none;border:1px solid rgba(232,184,115,.5);color:var(--gold)}
.bkCredit{margin-top:14px;font-size:10px;line-height:1.5;color:rgba(142,153,194,.7)}

/* ---- "About this book" in the chapter header ---- */
.chapAbout{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;cursor:pointer;
  background:none;border:1px solid var(--line-faint);color:var(--faint);
  font:600 10px var(--font-body);letter-spacing:.14em;text-transform:uppercase;transition:all .25s;align-self:center}
.chapAbout:hover{color:var(--gold);border-color:var(--hairline)}
.chapAbout svg{width:13px;height:13px}

/* ---- "About {book}" above the chapter grid ---- */
.bkCard{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 16px;padding:12px 14px;border-radius:14px;cursor:pointer;
  text-align:left;background:rgba(232,184,115,.06);border:1px solid rgba(232,184,115,.26);
  color:var(--starlight);font-family:var(--font-body);transition:all .25s}
.bkCard:hover{background:rgba(232,184,115,.12);border-color:var(--hairline)}
.bkCardI{flex:none;width:32px;height:32px;border-radius:10px;background:rgba(232,184,115,.14);color:var(--gold);
  display:flex;align-items:center;justify-content:center}
.bkCardI svg{width:17px;height:17px}
.bkCardBody{flex:1;min-width:0}
.bkCardBody b{display:block;font-size:14px;font-weight:600}
.bkCardBody span{display:block;font-size:12px;color:var(--faint);line-height:1.45}
.bkCardChev{flex:none;color:var(--gold);font-size:19px;line-height:1}

/* ---- the ⓘ on a home-grid book tile ---- */
.bkCell{position:relative}
.bkCell > .bookBtn{width:100%}
.bkCell > .rlInfo{position:absolute;right:2px;top:2px;width:22px;height:22px;border-radius:6px}
.bkCell:hover > .rlInfo,.bkCell:focus-within > .rlInfo{opacity:.7}
@media(hover:none){.bkCell > .rlInfo{opacity:.4}}

/* ---- the library chips on the home screen ---- */
.libStrip{margin:0 0 22px}
.libChips{display:flex;flex-wrap:wrap;gap:7px}
.libChip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;text-decoration:none;
  background:var(--glass-soft);border:1px solid var(--line-faint);color:var(--starlight);
  font:500 12.5px var(--font-body);transition:all .2s}
.libChip:hover{border-color:var(--gold);transform:translateY(-1px)}
.libChip:hover b{color:var(--gold)}
.libChip svg{flex:none}
.libChip i{font-style:normal;font-size:11px;color:var(--faint)}

/* ============================================================
   "In this verse" — the one block under the study controls
   (bible/reference.js renders into #pWhen)
   ============================================================ */
#tabVerse #pWhen{margin:0 0 6px}
.vrRow{margin-bottom:12px}
.vrRow:last-child{margin-bottom:0}
.vrLbl{display:block;font:600 9.5px var(--font-body);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:7px}
.vrChips{display:flex;flex-wrap:wrap;gap:6px}
.vrChip{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:5px 11px;border-radius:999px;
  text-decoration:none;background:var(--glass-soft);border:1px solid var(--line-faint);
  color:var(--starlight);font:400 12px var(--font-body);transition:all .2s}
.vrChip:hover{border-color:var(--hairline);color:var(--gold)}
.vrChip i{font-style:normal;font-size:10px;opacity:.8;line-height:1}
.vrChip.word{border-style:dashed;border-color:rgba(91,227,213,.3);color:#CFE6F5}
.vrChip.word:hover{border-style:solid;border-color:rgba(91,227,213,.55);color:var(--aqua)}
.vrMore{align-self:center;font-size:11px;color:rgba(142,153,194,.75)}
.vrRow .wwLink{margin-bottom:6px}
.vrRow .wwLink:last-child{margin-bottom:0}