/* ============================================================
   Gospel Companion — the Study Desk (bible.html)
   Loaded on every width. The three-pane desk applies only when
   `body.desk` is set (≥1200 px, by bible/desk.js); everything else
   here is the interaction layer: hover handles, the selection
   toolbar, the right-click menu, six panel tabs, the Sage tab.
   Tokens are the reader's own (:root in bible.html).
   ============================================================ */

/* ---- verse hover handle + selected verse ---- */
.verse{position:relative}
.vHandle{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:7px;
  border:1px solid rgba(142,153,194,.3);background:rgba(10,15,34,.92);color:var(--faint);
  display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;cursor:pointer;
  opacity:0;transition:opacity .15s,color .15s,border-color .15s;z-index:3}
.vHandle:hover{color:var(--gold);border-color:var(--hairline)}
@media(hover:hover){.verse:hover .vHandle{opacity:1}}
.paraMode .vHandle{display:none}
.verse.sel{background:rgba(232,184,115,.09);box-shadow:inset 2px 0 0 var(--gold)}
.esvStruct .verse.sel{border-radius:6px}

/* ---- selection toolbar ---- */
.selTool{position:fixed;z-index:70;display:flex;align-items:center;gap:8px;height:40px;padding:0 10px;border-radius:999px;
  background:rgba(11,15,30,.97);border:1px solid rgba(232,184,115,.4);
  box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 24px rgba(232,184,115,.12);
  font:500 12.5px var(--font-body);color:var(--starlight);white-space:nowrap;
  transform:translate(-50%,-100%);opacity:0;pointer-events:none;transition:opacity .12s}
.selTool.on{opacity:1;pointer-events:auto}
.selTool .sep{width:1px;height:20px;background:rgba(142,153,194,.3)}
.selTool button{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:4px 4px;border-radius:8px;display:inline-flex;align-items:center;gap:6px}
.selTool button:hover{color:var(--gold)}
.selTool button.sage{color:var(--gold)}
.swDot{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.18);cursor:pointer;display:inline-block;transition:transform .12s}
.swDot:hover{transform:scale(1.18)}
.swDot.clear{background:none;border:1px dashed rgba(142,153,194,.5);position:relative}
.swDot.clear::after{content:'×';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--faint)}

/* ---- right-click menu ---- */
.ctxMenu{position:fixed;z-index:71;width:262px;padding:6px;border-radius:14px;
  background:rgba(11,15,30,.97);border:1px solid rgba(232,184,115,.35);
  box-shadow:0 18px 50px rgba(0,0,0,.65);font:400 13px var(--font-body);color:var(--starlight);
  display:none}
.ctxMenu.on{display:block}
.ctxMenu .mi{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:9px;
  background:none;border:0;color:inherit;font:inherit;cursor:pointer;text-align:left}
.ctxMenu .mi:hover,.ctxMenu .mi:focus-visible{background:rgba(232,184,115,.12);outline:none}
.ctxMenu .mi .k{margin-left:auto;color:var(--faint);font-size:11px}
.ctxMenu .mi.gold{color:var(--gold)}
.ctxMenu .mi svg{flex:none}
.ctxMenu .div{height:1px;background:rgba(142,153,194,.18);margin:5px 6px}
.ctxMenu .mhead{padding:6px 10px 4px;font:600 11px var(--font-body);letter-spacing:.04em;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctxMenu .sw{display:flex;align-items:center;gap:10px;padding:8px 10px}
.ctxMenu .sw .swDot{margin-left:0}
.ctxMenu .sw span.lbl{flex:1}
.ctxMenu .sw .dots{display:flex;gap:6px;margin-left:auto}

/* ---- six panel tabs ---- */
.pTabs{flex-wrap:wrap;gap:4px}
.pTabs button{white-space:nowrap;padding:6px 9px;font-size:10.5px;letter-spacing:.06em}
.pEmpty{display:none;padding:26px 6px 10px;color:var(--faint);font-size:13.5px;line-height:1.6}
.pEmpty b{color:var(--starlight);font-weight:500}
#panel.empty .pEmpty{display:block}
#panel.empty .pRefRow,#panel.empty .pVerse,#panel.empty .pContext,#panel.empty .pTabs,#panel.empty .pTab{display:none}
.pActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 16px}
.pActions button{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;border:1px solid rgba(142,153,194,.25);
  background:none;color:var(--starlight);font:400 12.5px var(--font-body);cursor:pointer;text-align:left}
.pActions button:hover{border-color:var(--hairline);color:var(--gold)}
.pActions button.on{border-color:rgba(232,184,115,.5);color:var(--gold);background:rgba(232,184,115,.08)}
.pActions button svg{flex:none}

/* ---- Sage tab ---- */
.sg{display:flex;flex-direction:column;gap:12px;min-height:320px}
.sgDoor{padding:18px 16px;border-radius:14px;border:1px solid rgba(232,184,115,.35);background:rgba(232,184,115,.06);text-align:center}
.sgDoor h4{margin:8px 0 6px;font-family:var(--font-display);font-size:16px;letter-spacing:.06em;color:var(--starlight);font-weight:600}
.sgDoor p{margin:0 0 14px;font-size:12.5px;line-height:1.55;color:var(--faint)}
.sgBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:999px;border:0;cursor:pointer;
  background:linear-gradient(105deg,#FDF6E8,var(--gold));color:#1a1206;font:600 12.5px var(--font-body)}
.sgBtn.ghost{background:none;border:1px solid rgba(232,184,115,.5);color:var(--gold)}
.sgThread{display:flex;flex-direction:column;gap:10px}
/* Sage's face beside every answer — the app's own avatar, matched to
   SageAvatar (lib/features/companion/presentation/widgets/sage_avatar.dart):
   a circle on the panel navy with a hairline gold ring that breathes while
   he is reading or answering and holds steady once the answer is cited.
   The art is the app's, resized by scripts/build_sage_web.py. */
.sgRow{display:flex;align-items:flex-start;gap:8px}
.sgRow .sgBubble{flex:1;min-width:0}
.sgAvatar{
  flex:none;width:36px;height:36px;padding:2px;border-radius:50%;overflow:hidden;
  background:rgba(10,15,34,.9);border:1px solid rgba(232,184,115,.35);
  box-shadow:0 0 9px rgba(232,184,115,.1);
}
.sgAvatar img{display:block;width:100%;height:100%;object-fit:contain}
.sgAvatar.live{animation:sgBreathe 1.4s ease-in-out infinite alternate}
@keyframes sgBreathe{
  from{border-color:rgba(232,184,115,.35);box-shadow:0 0 9px rgba(232,184,115,.1)}
  to{border-color:rgba(232,184,115,.8);box-shadow:0 0 20px rgba(232,184,115,.35)}
}
/* Earlier conversations. The same threads the app keeps, read from the
   account — so a question asked on a laptop is in the app afterwards. Shown
   only before a conversation starts, where the chips are. */
.sgRecent{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.sgRecent > b{font:600 10px var(--font-body);letter-spacing:.22em;text-transform:uppercase;
  color:var(--faint);margin-bottom:2px}
.sgPast{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;
  padding:9px 12px;border-radius:12px;border:1px solid rgba(142,153,194,.2);
  background:rgba(13,18,40,.5);cursor:pointer;font-family:var(--font-body);
  transition:border-color .3s,background .3s}
.sgPast:hover{border-color:var(--hairline);background:rgba(232,184,115,.06)}
.sgPast span{font-size:12.5px;line-height:1.4;color:var(--starlight);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sgPast i{font-style:normal;font-size:10.5px;color:var(--faint)}

/* the bar above an open conversation, and over the Earlier list */
.sgBar{display:flex;align-items:center;gap:8px;padding-bottom:8px;
  border-bottom:1px solid rgba(142,153,194,.16);margin-bottom:2px}
.sgBarBtn{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;
  border:1px solid rgba(142,153,194,.26);background:none;color:var(--faint);
  font:400 11px var(--font-body);cursor:pointer;transition:color .3s,border-color .3s}
.sgBarBtn:hover{color:var(--gold);border-color:var(--hairline)}
.sgBarTitle{font:600 10px var(--font-body);letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint)}
.sgNote{margin:10px 2px 0;font-size:12.5px;line-height:1.6;color:var(--faint);font-weight:300}
/* ---- the history browser: search, categories, day piles ---- */
.sgSearch{display:flex;align-items:center;gap:7px;height:32px;padding:0 11px;border-radius:10px;
  border:1px solid rgba(142,153,194,.28);background:rgba(13,18,40,.72);margin:2px 0 10px;color:var(--faint)}
.sgSearch svg{flex:none}
.sgSearch input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--starlight);
  font:400 12.5px var(--font-body)}
.sgSearch input::placeholder{color:rgba(142,153,194,.7)}
.sgSearch input::-webkit-search-cancel-button{filter:invert(.6)}
.sgCats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.sgCat{padding:5px 10px;border-radius:999px;border:1px solid rgba(142,153,194,.25);background:none;
  color:var(--faint);font:500 10.5px var(--font-body);letter-spacing:.06em;cursor:pointer;transition:all .2s}
.sgCat:hover{border-color:var(--hairline);color:var(--starlight)}
.sgCat.on{color:var(--gold);border-color:rgba(232,184,115,.45);background:rgba(232,184,115,.08)}
.sgCat u{text-decoration:none;opacity:.55;margin-left:5px}
.sgCat u:empty{display:none}
.sgGroup{font:600 9.5px var(--font-body);letter-spacing:.22em;text-transform:uppercase;
  color:var(--faint);margin:10px 2px 0}
.sgGroup:first-child{margin-top:0}
.sgAll{margin-top:4px;padding:9px;border-radius:10px;border:1px dashed rgba(232,184,115,.32);
  background:none;color:var(--gold);font:500 11.5px var(--font-body);cursor:pointer;transition:all .2s}
.sgAll:hover{background:rgba(232,184,115,.07);border-style:solid}

/* the door inside a quota-wall answer — Companion Unlimited, offered once,
   without urgency theatre. It sits inside Sage's own bubble so it reads as
   part of what he said, not as an ad dropped on top of him. */
.sgDoorIn{margin-top:12px;padding-top:12px;border-top:1px solid rgba(232,184,115,.22)}
.sgDoorIn b{display:block;font-family:var(--font-display);font-size:14px;letter-spacing:.04em;
  color:var(--starlight);font-weight:600;margin-bottom:5px}
.sgDoorIn span{display:block;font-size:12.5px;line-height:1.55;color:var(--faint);margin-bottom:12px}
.sgDoorIn .sgBtn{text-decoration:none;font-size:12px;padding:9px 18px}

/* the greeting face on the sign-in door */
.sgFace{display:block;margin:0 auto 4px;height:72px;width:auto}
.sgBubble{border-radius:14px;padding:11px 13px;font-size:13px;line-height:1.6;white-space:pre-wrap;word-wrap:break-word}
.sgBubble.me{background:rgba(232,184,115,.12);border:1px solid rgba(232,184,115,.3);margin-left:36px;color:var(--starlight)}
.sgBubble.sage{background:rgba(17,22,44,.85);border:1px solid rgba(142,153,194,.22);color:var(--starlight)}
.sgBubble.sage.err{border-color:rgba(232,106,154,.4);color:var(--faint)}
.sgBubble.sage.think{color:var(--faint)}
.sgBubble.sage.think i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:5px;animation:sgDot 1s infinite alternate}
.sgBubble.sage.think i:nth-child(2){animation-delay:.2s}.sgBubble.sage.think i:nth-child(3){animation-delay:.4s}
@keyframes sgDot{from{opacity:.25;transform:translateY(0)}to{opacity:1;transform:translateY(-3px)}}
.sgCite{display:inline-flex;align-items:center;gap:3px;font:600 10px var(--font-body);color:var(--aqua);border:1px solid rgba(91,227,213,.4);
  border-radius:6px;padding:0 5px;margin:0 2px;vertical-align:1px;cursor:pointer;background:none;line-height:16px}
.sgCite:hover{background:rgba(91,227,213,.12)}
.sgSources{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sgSrc{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;border:1px solid rgba(142,153,194,.28);
  background:none;color:var(--faint);font:400 11.5px var(--font-body);cursor:pointer;max-width:100%}
.sgSrc b{color:var(--aqua);font-weight:600}
.sgSrc:hover{border-color:var(--hairline);color:var(--starlight)}
.sgChips{display:flex;flex-wrap:wrap;gap:6px}
.sgChip{padding:6px 11px;border-radius:999px;border:1px solid rgba(142,153,194,.3);background:none;color:var(--starlight);font:400 11.5px var(--font-body);cursor:pointer}
.sgChip:hover{border-color:var(--hairline);color:var(--gold)}
.sgInputRow{display:flex;align-items:center;gap:8px;border-radius:999px;border:1px solid rgba(232,184,115,.45);padding:4px 4px 4px 14px;background:rgba(13,18,40,.7)}
.sgInputRow input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--starlight);font:400 13px var(--font-body)}
.sgInputRow input::placeholder{color:rgba(142,153,194,.7)}
.sgInputRow button{width:34px;height:34px;border-radius:50%;border:0;background:var(--gold);color:#1a1206;font-weight:700;cursor:pointer;flex:none}
.sgInputRow button:disabled{opacity:.45;cursor:default}
.sgFoot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:var(--faint)}
.sgPill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;border:1px solid rgba(91,227,213,.4);color:var(--aqua);font-size:11px}
.sgPill.gold{border-color:rgba(232,184,115,.5);color:var(--gold)}
.sgFoot a{color:var(--gold);text-decoration:none}
.sgNote{font-size:11px;line-height:1.5;color:rgba(142,153,194,.7)}

/* ---- the rail (hidden until the desk) ---- */
#rail{display:none}

/* ============================================================
   THE DESK — ≥1200 px, body.desk
   ============================================================ */
@media(min-width:1200px){
  body.desk{--rail:260px}
  body.desk.deskResults{--rail:360px}
  body.desk .topbar{position:fixed;top:0;left:0;right:0;height:56px;z-index:45;margin:0;padding:0 18px;
    background:rgba(10,15,34,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline);flex-wrap:nowrap;gap:10px}
  body.desk .topbar h1{font-size:18px;white-space:nowrap}
  body.desk .topbar .backBtn{padding:7px 12px;font-size:10px}
  body.desk .topbar .topTopicsBtn{padding:7px 12px;font-size:10px;margin-left:0}
  body.desk .topbar .omniWrap{margin:0 8px 0 10px;flex:1;max-width:520px;min-width:240px}
  body.desk .topbar #omni{height:36px;padding-top:0;padding-bottom:0;font-size:13px}
  body.desk .topbar #settingsBtn{width:36px;height:36px;font-size:18px}
  body.desk .topbar #verSelect{padding:7px 10px}
  body.desk .deskHide{display:none !important}
  body.desk .wrap{max-width:none;margin:0;padding:74px 0 60px;
    padding-left:var(--rail);padding-right:var(--pw,430px)}
  body.desk #home,body.desk #chapters{max-width:880px;margin:0 auto;padding:0 26px}
  body.desk #reader{max-width:780px;margin:0 auto;padding:0 30px}
  /* My Study and chapter-less search results share #results: the same
     centred column as Home, not the full span from rail to panel. The
     deskResults rules below outrank this and keep the rail-slot layout. */
  body.desk #results{max-width:880px;margin:20px auto 0;padding:0 26px}
  body.desk .crumbs{margin-top:6px}
  body.desk .wrap > p{display:none}

  /* rail */
  body.desk #rail{display:flex;flex-direction:column;gap:14px;position:fixed;left:0;top:56px;bottom:0;width:260px;
    padding:16px 14px;overflow:auto;border-right:1px solid var(--line-faint);background:rgba(10,15,34,.55);z-index:20}
  body.desk.deskResults #rail{display:none}
  .rlSearch{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:10px;border:1px solid rgba(142,153,194,.28);background:rgba(13,18,40,.72)}
  .rlSearch input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--starlight);font:400 12px var(--font-body)}
  .rlSearch input::placeholder{color:rgba(142,153,194,.7)}
  .rlLbl{font:600 10.5px var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
  .rlGrp{font:600 10px var(--font-body);letter-spacing:.18em;text-transform:uppercase;margin:6px 0 2px;padding-left:8px}
  .rlBooks{display:flex;flex-direction:column;gap:1px;font-size:13px}
  .rlBook{padding:5px 8px;border-radius:8px;color:#B4BDDD;background:none;border:0;text-align:left;font:400 13px var(--font-body);cursor:pointer}
  .rlBook:hover{background:rgba(142,153,194,.1);color:var(--starlight)}
  .rlBook.on{background:rgba(232,184,115,.12);color:#F5D9A8;font-weight:600}
  .rlChapters{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:4px 0 8px}
  .rlCh{height:26px;border-radius:7px;border:1px solid rgba(142,153,194,.2);background:none;color:var(--faint);
    display:flex;align-items:center;justify-content:center;font:400 11.5px var(--font-body);cursor:pointer}
  .rlCh:hover{border-color:var(--hairline);color:var(--starlight)}
  .rlCh.on{background:rgba(232,184,115,.18);border-color:var(--gold);color:#F5D9A8;font-weight:600}
  .rlCh.hl{border-color:rgba(232,184,115,.5);color:var(--starlight)}
  .rlRow{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#B4BDDD;padding:4px 8px;border-radius:8px;background:none;border:0;width:100%;text-align:left;font-family:var(--font-body);cursor:pointer}
  .rlRow:hover{background:rgba(142,153,194,.1);color:var(--starlight)}
  .rlRow b{font-weight:500;color:var(--starlight)}
  .rlRow .n{margin-left:auto;color:var(--faint);font-size:11.5px}
  .rlRow svg{flex:none}

  /* results move into the rail slot while a chapter is open */
  body.desk.deskResults #results{position:fixed;left:0;top:56px;bottom:0;width:var(--rail);overflow:auto;margin:0;
    padding:12px 12px 40px;border-right:1px solid var(--line-faint);background:rgba(10,15,34,.55);z-index:20}
  body.desk.deskResults #results .rCard{padding:9px 11px}
  body.desk.deskResults #results .rRef{font-size:12.5px}
  body.desk.deskResults #results .rTxt{font-size:12.5px;line-height:1.5}
  body.desk.deskResults #results .resSection{font-size:10.5px}
  body.desk.deskResults #reader{display:block}

  /* panel docks on the right, always present */
  body.desk #panel{position:fixed;left:auto;right:0;top:56px;bottom:0;width:var(--pw,430px);max-height:none;border-radius:0;
    transform:none !important;z-index:30;border-left:1px solid var(--hairline)}
  body.desk #panel .pClose{display:none}
  body.desk #panel .pInner{padding:18px 20px 40px}
  body.desk #shade{display:none}
  body.desk #panel .pGrip{display:block}
}

/* ---- collapse controls (desk only) ---- */
.rlIco{width:36px;height:36px;border-radius:10px;border:1px solid transparent;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.rlIco:hover{border-color:var(--hairline);background:rgba(232,184,115,.08)}
.rlHead{display:flex;align-items:center;gap:6px}
.rlHead .rlSearch{flex:1}
.pFold,.pStrip,#deskResultsClose{display:none}
@media(min-width:1200px){
  body.desk.railOff{--rail:56px}
  body.desk.railOff #rail{width:56px;padding:12px 0;align-items:center;gap:6px}
  body.desk #panel .pFold{display:flex;position:absolute;left:8px;top:14px;z-index:6}
  body.desk #panel .pInner{padding-left:44px}
  body.desk #panel .pClose{display:block}
  body.desk #panel.empty .pClose{display:none}
  body.desk.panelOff{--pw:44px}
  body.desk.panelOff #panel{width:44px !important;overflow:hidden;border-left:1px solid var(--line-faint)}
  body.desk.panelOff #panel .pInner,body.desk.panelOff #panel .pGrip{display:none}
  body.desk.panelOff #panel .pStrip{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0}
  .pStripLbl{writing-mode:vertical-rl;font:600 10.5px var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
  body.desk.deskResults #deskResultsClose{display:flex;position:fixed;left:12px;top:64px;z-index:21;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:999px;border:1px solid rgba(232,184,115,.4);background:rgba(11,15,30,.96);color:var(--starlight);font:500 11.5px var(--font-body);cursor:pointer}
  body.desk.deskResults #deskResultsClose:hover{border-color:var(--gold);color:var(--gold)}
  body.desk.deskResults #results{padding-top:46px}
}

/* ============================================================
   THE REFERENCE LAYER — names in Study mode, the name sheet, the
   dictionary / people / places search sections, the In English card
   (bible/reference.js)
   ============================================================ */
.entName{border-bottom:1px dotted rgba(232,184,115,.65);padding-bottom:1px;cursor:pointer;transition:background .15s}
.entName:hover,.entName.on,.entName:focus-visible{background:rgba(232,184,115,.18);border-radius:3px;border-bottom-color:var(--gold);outline:none}
.entSheet{position:fixed;z-index:72;width:min(360px,calc(100vw - 24px));padding:14px 16px 14px;border-radius:16px;
  background:rgba(10,15,34,.97);border:1px solid rgba(232,184,115,.35);box-shadow:0 18px 50px rgba(0,0,0,.6);
  font:400 13px var(--font-body);color:var(--starlight);display:none;line-height:1.5}
.entSheet.on{display:block}
.esClose{position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-faint);background:none;color:var(--faint);font-size:16px;cursor:pointer}
.esClose:hover{color:var(--gold)}
.esEyebrow{font:600 10.5px var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);padding-right:30px}
.esName{font-family:var(--font-display);font-size:20px;letter-spacing:.05em;margin:4px 0 2px;line-height:1.2}
.esOrig{font-size:12px;color:var(--faint);margin-bottom:6px}
.esShort{margin:6px 0 4px;font-size:13px;color:#DDE3F5;font-weight:300}
.esShort strong{font-weight:600;color:var(--starlight)}
.esRef{color:var(--aqua);text-decoration:none;border-bottom:1px dotted rgba(91,227,213,.45)}
.esDict{margin:4px 0 6px;font-size:12.5px;color:var(--faint);font-weight:300}
.esDict b{color:var(--gold);font-weight:600}
.esBtns{display:flex;gap:8px;margin-top:10px}
.esBtn{flex:1;display:flex;align-items:center;justify-content:center;padding:9px 12px;border-radius:999px;text-decoration:none;
  background:linear-gradient(105deg,#FDF6E8,var(--gold));color:#1a1206;font:600 12.5px var(--font-body)}
.esBtn.ghost{background:none;border:1px solid rgba(232,184,115,.5);color:var(--gold)}
.esCredit{margin-top:10px;font-size:10.5px;color:rgba(142,153,194,.7);text-align:center}
@media(max-width:899px){
  .entSheet{left:0 !important;right:0;bottom:0;top:auto !important;width:auto;border-radius:22px 22px 0 0;
    padding-bottom:calc(20px + env(safe-area-inset-bottom));box-shadow:0 -20px 60px rgba(0,0,0,.6)}
}
.refDict{display:block;padding:14px 16px;border-radius:16px;margin-bottom:12px;text-decoration:none;color:var(--starlight);
  background:linear-gradient(180deg,rgba(232,184,115,.07),rgba(13,18,40,.5));border:1px solid rgba(232,184,115,.22);animation:riseIn .42s ease both}
.refDict:hover{border-color:var(--hairline)}
.refDict .rdHead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.refDict .rdHead b{font-family:var(--font-display);font-size:15px;color:var(--gold);letter-spacing:.05em}
.refDict .rdSrc{margin-left:auto;font-size:11px;color:var(--faint);border:1px solid var(--line-faint);border-radius:999px;padding:2px 9px}
.refDict p{margin:0;font-size:13.5px;line-height:1.6;font-weight:300;color:#DDE3F5}
.refDict .rdMore{display:inline-block;margin-top:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.refEnt{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;margin-bottom:8px;text-decoration:none;color:var(--starlight);
  background:var(--glass-soft);border:1px solid var(--line-faint);animation:riseIn .42s ease both}
.refEnt:hover{border-color:var(--hairline);transform:translateY(-1px)}
.refEnt .reIco{width:34px;height:34px;border-radius:10px;background:rgba(232,184,115,.12);display:flex;align-items:center;justify-content:center;font-size:15px;flex:none}
.refEnt .reBody{min-width:0;flex:1}
.refEnt .reBody b{display:block;font-size:14px;font-weight:600}
.refEnt .reBody span{display:block;font-size:12px;color:var(--faint);line-height:1.4}
.refEnt .reChev{color:var(--gold);font-size:18px;flex:none}
body.desk.deskResults #results .refDict{padding:10px 12px}
body.desk.deskResults #results .refEnt{padding:8px 10px}
.enCard{margin:10px 0 8px;padding:11px 13px;border-radius:12px;background:rgba(13,18,40,.55);border:1px solid var(--line-faint);color:var(--faint)}
.enHead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.enLbl{font:600 9.5px var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.enHead b{font-size:15px;color:var(--starlight);font-weight:600}
.enHead i,.enPos{font-style:normal;color:var(--faint);font-size:11.5px}
.enPos{margin-top:6px}
.enCard ol{margin:6px 0 0 16px;padding:0;font-size:12.5px;line-height:1.55;color:#B4BDDD}
.enCard li{margin-bottom:2px}
.enCredit{font-size:10px;color:rgba(142,153,194,.7);margin-top:7px}

/* ---- word study cards (bible/wordstudy.js): how it's translated, word
   family, every place it appears, where the manuscripts differ ---- */
.wsxWrap{margin:4px 0 10px}
.wsxCard{margin:10px 0 8px;padding:11px 13px;border-radius:12px;background:rgba(13,18,40,.55);border:1px solid var(--line-faint);color:var(--faint)}
.wsxHead{font:600 9.5px var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.wsxRow{display:flex;gap:14px;align-items:flex-start}
.wsxRing{flex:none}
.wsxRing path{transition:opacity .2s}
.wsxRing path.dim{opacity:.3}
.wsxLegend{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wsxLeg{display:flex;align-items:center;gap:8px;width:100%;padding:4px 6px;border-radius:8px;background:none;border:none;color:var(--starlight);font:400 12.5px var(--font-body);text-align:left;cursor:pointer}
.wsxLeg.off{cursor:default;color:var(--faint)}
.wsxLeg.on{background:rgba(232,184,115,.1);color:var(--gold);font-weight:600}
.wsxLeg i{flex:none;width:9px;height:9px;border-radius:50%;background:rgba(142,153,194,.35)}
.wsxLeg span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wsxLeg em{font-style:normal;font-size:11px;color:var(--faint)}
.wsxVerses{margin-top:8px;max-height:280px;overflow-y:auto}
.wsxVerses:empty{display:none}
.wsxCredit{font-size:10px;color:rgba(142,153,194,.7);margin-top:8px;line-height:1.45}
.wsxFam{display:flex;flex-wrap:wrap;gap:6px}
.wsxFamChip{padding:6px 10px;border-radius:10px;cursor:pointer;background:var(--glass-soft);border:1px solid var(--line-faint);color:var(--faint);font:400 11.5px var(--font-body);text-align:left}
.wsxFamChip:hover{border-color:var(--hairline)}
.wsxFamChip b{font-family:Georgia,serif;font-size:14px;color:var(--starlight);font-weight:400}
.wsxFamChip em{display:block;font-style:normal;font-size:10px;color:var(--aqua);margin-top:2px}
.wsxBar{display:flex;align-items:center;gap:8px;width:100%;padding:3px 4px;border-radius:8px;background:none;border:none;color:var(--starlight);font:400 12px var(--font-body);cursor:pointer;text-align:left}
.wsxBar.on{color:var(--gold);font-weight:600}
.wsxBar span{flex:none;width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wsxBar i{flex:1;height:8px;display:block}
.wsxBar u{display:block;height:8px;border-radius:4px;background:rgba(232,184,115,.45);text-decoration:none}
.wsxBar.on u{background:rgba(232,184,115,.9)}
.wsxBar em{flex:none;width:34px;text-align:right;font-style:normal;font-size:11px;color:var(--faint)}
.wsxVar{display:block;font-style:normal;font-size:10.5px;color:var(--aqua);margin-bottom:2px}

/* ---- morphology chips row: "Commands · 96", "Questions Jesus asked · 62" ---- */
.mcRow{margin:0 0 14px;padding:10px 12px;border-radius:12px;background:rgba(13,18,40,.55);border:1px solid var(--line-faint)}
#results .mcRow{margin:14px 0 0}
.mcLbl{font:600 9.5px var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.mcChips{display:flex;flex-wrap:wrap;gap:6px}
.mcChip{padding:6px 11px;border-radius:999px;cursor:pointer;background:rgba(91,227,213,.06);border:1px solid rgba(91,227,213,.35);color:var(--aqua);font:600 11px var(--font-body)}
.mcChip.zero{opacity:.5}
.mcChip.on{color:var(--gold);border-color:var(--hairline);background:rgba(232,184,115,.1)}
.mcList{margin-top:8px;max-height:320px;overflow-y:auto}
.mcList:empty{display:none}
.mcHow{font-size:11px;line-height:1.45;color:var(--faint);margin:0 0 8px}

/* ============================================================
   PASSAGES IN THE MIDDLE (bible/passages.js)
   Several references searched at once become the passages
   themselves, at reading size, where the chapter used to be.
   Desk widths only; below 1200 px the results list is unchanged.
   ============================================================ */
#passages{display:none}
@media(min-width:1200px){
  body.desk.deskPassages #passages{display:block;max-width:780px;margin:0 auto;padding:0 30px}
  body.desk.deskResults.deskPassages #reader{display:none}
  .psgBar{display:flex;align-items:center;gap:12px;margin:6px 0 20px;flex-wrap:wrap}
  .psgBack{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border-radius:999px;
    background:var(--glass-soft);border:1px solid var(--line-faint);color:var(--starlight);
    font:500 12px var(--font-body);letter-spacing:.04em;cursor:pointer}
  .psgBack:hover{border-color:var(--hairline);color:var(--gold)}
  .psgCount{font:600 10.5px var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
  .psg{margin:0 0 16px;padding:18px 20px 14px;border-radius:16px;cursor:pointer;
    background:linear-gradient(180deg,rgba(13,18,40,.55),rgba(10,15,34,.35));
    border:1px solid var(--line-faint);transition:border-color .25s,background .25s}
  .psg:hover{border-color:rgba(232,184,115,.3)}
  .psg:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
  .psg.on{border-color:var(--hairline);background:linear-gradient(180deg,rgba(232,184,115,.07),rgba(10,15,34,.4));
    box-shadow:inset 2px 0 0 var(--gold)}
  .psgHead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
  .psgHead h3{margin:0;font-family:var(--font-display);font-size:17px;letter-spacing:.06em;
    font-weight:600;color:var(--gold)}
  .psgHead span{font:400 11.5px var(--font-body);color:var(--faint)}
  .psgTxt{font-size:var(--vsize,16.5px);font-weight:300;line-height:1.8;color:var(--starlight)}
  .psgNum{font-family:var(--font-display);font-size:11px;color:var(--gold);opacity:.85;
    padding-right:4px;vertical-align:4px}
  .psgMore{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:rgba(142,153,194,.8)}
  .psgDoors{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  .psgDoor{min-height:34px;padding:0 13px;border-radius:999px;background:none;
    border:1px solid rgba(142,153,194,.28);color:#B4BDDD;font:500 12px var(--font-body);cursor:pointer}
  .psgDoor:hover{border-color:var(--hairline);color:var(--gold)}
  .psgDoor[data-door="study"]{border-color:rgba(232,184,115,.4);color:var(--gold)}
  .psgFoot{margin:22px 0 0;font-size:10.5px;line-height:1.6;color:rgba(142,153,194,.7)}
  /* the panel's passage stepper: "2 of 3" beside the reference */
  .pOf{flex:none;margin-left:auto;font:600 9.5px var(--font-body);letter-spacing:.1em;
    text-transform:uppercase;color:var(--faint);white-space:nowrap}
  body.desk #panel .pRefRow .pOf + .pStep{margin-left:8px}
}
@media (prefers-reduced-motion: reduce){.psg{transition:none}}

/* ---- panel sections that fold and remember (bible/psections.js) ---- */
.pSec.pFoldable{cursor:pointer;user-select:none;min-height:26px}
.pSec.pFoldable:hover,.pSec.pFoldable:focus-visible{color:var(--gold);outline:none}
.pSec.pFoldable:focus-visible{text-decoration:underline}
.pSecN{flex:none;font-size:10px;letter-spacing:.08em;color:var(--faint);
  border:1px solid var(--line-faint);border-radius:999px;padding:1px 7px}
.pChev{flex:none;width:8px;height:8px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s;opacity:.75}
.pSec.shut .pChev{transform:rotate(-45deg) translate(-1px,1px)}
.pSecOff{display:none !important}
@media (prefers-reduced-motion: reduce){.pChev{transition:none}}

/* With the passages in the middle the rail list is a table of contents:
   references only, since the text is right there beside it. */
@media(min-width:1200px){
  body.desk.deskResults.deskPassages #results .rCard .rTxt,
  body.desk.deskResults.deskPassages #results .rCard .rOpen{display:none}
  body.desk.deskResults.deskPassages #results .rCard{padding:8px 11px}
  body.desk.deskResults.deskPassages #results .rCard .rRef{margin:0}
}

@media(prefers-reduced-motion:reduce){
  .sgAvatar.live{animation:none;border-color:rgba(232,184,115,.6)}
}