/* bible.css — gaya panel Bible, di-scope seluruhnya di bawah #view-bible supaya
   tidak bocor ke halaman portal (dashboard/studies/about) yang pakai Tailwind.
   Semua custom property diberi prefix --bible- supaya tidak menimpa token Tailwind
   root. Posisi vertikal (top) diisi lewat JS saat showBible() dari tinggi header
   portal yang sesungguhnya (lihat setBibleViewportTop() di index.html). */
#view-bible{
 --bible-bg:#14161a;--bible-panel:#1c1f26;--bible-line:#2a2f3a;--bible-fg:#d7dae0;--bible-dim:#8b93a3;
 --bible-acc:#e0b45c;--bible-acc2:#7aa2f7;--bible-grn:#7fbf7f;--bible-red:#e06c75;--bible-txtc:#e8e3d5;
 --bible-tpl:#4fb457;--bible-tpb:#e8563f;
 --bible-rb-bg:rgba(122,162,247,.10);--bible-rb-line:var(--bible-acc);
 position:fixed;left:0;right:0;bottom:0;top:80px;z-index:30;
 background:var(--bible-bg);color:var(--bible-fg);font:14px/1.55 "Segoe UI",system-ui,sans-serif;
 display:flex;flex-direction:column;overflow:hidden;
}
/* #view-bible (selector ID) mengalahkan spesifisitas .hidden (selector class) milik
   Tailwind — tanpa baris ini, "display:flex" di atas selalu menang walau .hidden dipasang. */
#view-bible.hidden{display:none}
#view-bible *{box-sizing:border-box;margin:0}
#view-bible #bible-toolbar{display:flex;gap:10px;align-items:center;padding:8px 12px;background:var(--bible-panel);border-bottom:1px solid var(--bible-line);position:relative}
#view-bible #hnav{position:absolute;left:calc(var(--ckiri,250px) + 6px);right:calc(var(--ckanan,360px) + 6px);top:50%;
 transform:translateY(-50%);display:flex;align-items:center;justify-content:center;gap:12px;pointer-events:none}
#view-bible #hpos{text-align:center;font-size:16px;font-weight:600;color:var(--bible-acc);letter-spacing:.4px;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#view-bible .hb{pointer-events:auto;cursor:pointer;user-select:none;flex:none;color:var(--bible-dim);
 font-size:21px;line-height:1;padding:0 7px;border-radius:6px}
#view-bible .hb:hover{color:var(--bible-acc);background:var(--bible-line)}
#view-bible .hb.mati{opacity:.22;pointer-events:none}
#view-bible #bible-toolbar b{color:var(--bible-acc);letter-spacing:.5px}
#view-bible .tgl,#view-bible #abar{position:relative;z-index:1}
#view-bible .tgl{cursor:pointer;user-select:none;padding:3px 9px;border:1px solid var(--bible-line);border-radius:12px;color:var(--bible-dim);font-size:12px}
#view-bible .tgl.on{color:var(--bible-acc);border-color:var(--bible-acc)}
#view-bible .bible-main{flex:1;display:grid;grid-template-columns:var(--ckiri,250px) 6px 1fr 6px var(--ckanan,360px);min-height:0}
#view-bible .bible-main>section{overflow-y:auto;min-height:0}
#view-bible .gtr{cursor:col-resize;background:transparent}
#view-bible .gtr:hover,#view-bible .gtr.drag{background:var(--bible-acc2);opacity:.45}
#view-bible #kiri{border-right:1px solid var(--bible-line);background:var(--bible-panel);padding:8px}
#view-bible #kanan{border-left:1px solid var(--bible-line);background:var(--bible-panel);padding:10px;display:flex;flex-direction:column;min-height:0}
#view-bible h3{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--bible-dim);margin:10px 4px 6px}
/* ==== TREE ala theWord: buku > pasal > ayat ==== */
#view-bible .tw{font-size:13px}
#view-bible .tw .tg{cursor:pointer;color:var(--bible-dim);display:inline-block;width:14px;text-align:center}
#view-bible .tw .nm{cursor:pointer}
#view-bible .tw .pl .nm,#view-bible .tw .pl>.nm{color:var(--bible-tpl)}
#view-bible .tw .pb .nm,#view-bible .tw .pb>.nm{color:var(--bible-tpb)}
#view-bible .tw .nm:hover{color:var(--bible-acc);opacity:1}
#view-bible .tw .row{padding:1.5px 2px;border-radius:4px}#view-bible .tw .row.on>.nm{color:var(--bible-acc);opacity:1}
#view-bible .tw .anak{margin-left:16px;border-left:1px dotted var(--bible-line);padding-left:6px;display:none}
#view-bible .tw .buka>.anak{display:block}
/* ==== VIEW ==== */
#view-bible #tengah{padding:0;display:flex;flex-direction:column;overflow:hidden}
#view-bible #tengahAtas{flex:1;overflow-y:auto;min-height:0;padding:14px 22px}
#view-bible .ay{margin:0 0 3px;padding:1px 8px 1px 48px;position:relative;border-radius:6px;border-left:3px solid transparent;line-height:1.4}
#view-bible .ay.sel{background:var(--bible-rb-bg);border-left-color:var(--bible-rb-line)}
#view-bible .ay .no{position:absolute;left:2px;top:3px;color:var(--bible-dim);font-size:12px;width:30px;text-align:right;cursor:pointer}
#view-bible .ay .no:hover{color:var(--bible-acc)}
#view-bible .ay .vp{position:absolute;left:34px;top:4px;font-size:8.5px;color:var(--bible-acc2);cursor:pointer;opacity:0}
#view-bible .ay:hover .vp,#view-bible .ay.sel .vp{opacity:.7}#view-bible .ay .vp:hover{opacity:1}
#view-bible .ay .vp.geser{color:var(--bible-red)}
#view-bible .ay.playing{box-shadow:inset 2px 0 0 var(--bible-acc2)}
#view-bible .ay.sel .no{color:var(--bible-acc)}
#view-bible .tr{margin:0}#view-bible .tr .lbl{display:inline-block;width:34px;font-size:10px;color:var(--bible-dim);vertical-align:top;padding-top:2px}
#view-bible .ay.sel .lbl{color:var(--bible-acc)}
#view-bible .t-bsb,#view-bible .t-kjv,#view-bible .t-ylt{color:var(--bible-dim);font-size:13px}
#view-bible .t-grk{color:#a9bbd8;font-size:13.5px}
#view-bible .t-sabda{color:var(--bible-txtc);font-size:14.5px}
#view-bible .tr.b1>.tx{color:#f2f5f8;font-size:15.5px}
#view-bible .tr.b2>.tx{color:#629b7d;font-size:13px}
#view-bible .tr.b3>.tx{color:#71787f;font-size:13px}
#view-bible .tr.b4>.tx{color:#629b7d;font-size:13px}
#view-bible .tr.b5>.tx{color:#71787f;font-size:13px}
#view-bible .kt .gi{color:var(--bible-txtc);font-size:11px;line-height:1.25;margin-top:1px}
/* blok warna kata (ala theWord), disimpan localStorage per-pengunjung */
#view-bible .hl{border-radius:2px;padding:0 1px}
#view-bible .hl-y{background:#e5c542;color:#15130a}#view-bible .hl-g{background:#8fce8f;color:#0e150e}
#view-bible .hl-b{background:#7db3e8;color:#0c1219}#view-bible .hl-p{background:#e39bd0;color:#170e14}
#view-bible .hl-o{background:#e8965a;color:#170f08}
#view-bible #pal{position:fixed;z-index:99;display:none;gap:6px;padding:7px 9px;background:var(--bible-panel);
 border:1px solid var(--bible-line);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.55);align-items:center}
#view-bible #pal .pd{width:18px;height:18px;border-radius:50%;cursor:pointer;border:1px solid var(--bible-line)}
#view-bible #pal .pd:hover{border-color:var(--bible-fg)}
#view-bible #pal .px{width:auto;height:auto;border:none;border-radius:4px;color:var(--bible-red);font-size:13px;padding:0 3px;line-height:18px}
#view-bible .inter{display:none;flex-wrap:wrap;gap:4px;margin:8px 0 4px;padding:8px;background:var(--bible-panel);border:1px solid var(--bible-line);border-radius:8px}
#view-bible .ay.buka .inter{display:flex}
#view-bible .kt{padding:4px 7px;background:var(--bible-bg);border:1px solid var(--bible-line);border-radius:6px;text-align:center;min-width:54px}
#view-bible .kt .o{font-size:16px;cursor:pointer}#view-bible .kt .o:hover{color:var(--bible-acc)}
#view-bible .kt .g{font-size:10.5px;color:var(--bible-dim)}
#view-bible .kt .lm{font-size:11.5px;color:var(--bible-grn);cursor:pointer}#view-bible .kt .lm:hover{text-decoration:underline}
#view-bible .kt .s{font-size:10px;color:var(--bible-acc2);cursor:pointer}#view-bible .kt .s:hover{text-decoration:underline}
#view-bible .kt .sbar{display:flex;gap:5px;justify-content:center;align-items:center}
#view-bible .kt .uc{cursor:pointer;font-size:9.5px;opacity:.45}#view-bible .kt .uc:hover{opacity:1}
#view-bible .kt.lx{border-color:#39507a}#view-bible .kt.lx .o{color:#a9bbd8}
#view-bible .ktsek{align-self:center;font-size:9.5px;letter-spacing:1.5px;color:#7a94c4;border:1px solid #39507a;
 border-radius:4px;padding:2px 6px;margin:0 2px;flex-basis:100%;max-width:max-content}
/* ==== KAMUS LAYAR ==== */
#view-bible #kamusBox{display:none;border-top:1px solid var(--bible-line);margin-top:8px;padding-top:2px;max-height:46%;min-height:0;overflow-y:auto}
#view-bible #kamusBox h3 .tutup{float:right;cursor:pointer;color:var(--bible-dim)}#view-bible #kamusBox h3 .tutup:hover{color:var(--bible-red)}
#view-bible #kamusBox h3 .uck{cursor:pointer;opacity:.5}#view-bible #kamusBox h3 .uck:hover{opacity:1}
#view-bible #kamusBox h3 .klaf{font-weight:400;font-size:11px;color:var(--bible-dim);margin-left:6px}
#view-bible .kentri{font-size:12.5px;margin:4px 0 10px;line-height:1.5}
#view-bible .kentri .ksrc{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--bible-acc);margin-bottom:2px}
#view-bible .kentri i{color:var(--bible-txtc)}
#view-bible .kref{color:var(--bible-acc2);cursor:pointer}#view-bible .kref:hover{text-decoration:underline}
/* ==== SEARCH VIEW ==== */
#view-bible #sq{width:100%;background:var(--bible-bg);border:1px solid var(--bible-line);color:var(--bible-fg);padding:7px 10px;border-radius:6px;outline:none;margin-bottom:8px}
#view-bible #sq:focus{border-color:var(--bible-acc2)}
#view-bible #shasil{flex:1;overflow-y:auto;min-height:0}
#view-bible .ring{color:var(--bible-acc);font-size:13px;margin:4px 0 8px}
#view-bible .grp{margin:2px 0}
#view-bible .grp>.kep{display:flex;align-items:center;gap:6px;cursor:pointer;padding:2.5px 4px;border-radius:4px;font-size:12.5px}
#view-bible .grp>.kep:hover{background:var(--bible-bg)}
#view-bible .grp>.kep .tg{color:var(--bible-dim);width:12px;text-align:center}
#view-bible .grp>.kep i{font-style:normal;min-width:44px}
#view-bible .grp>.kep .n{color:var(--bible-dim);font-size:11px;min-width:34px;text-align:right}
#view-bible .grp>.kep b{height:8px;background:var(--bible-acc);border-radius:2px;display:block}
#view-bible .grp.pb>.kep b{background:var(--bible-red)}
#view-bible .grp>.isi{display:none;margin-left:14px}
#view-bible .grp.buka>.isi{display:block}
#view-bible .hit{font-size:12px;padding:4px 6px;border-bottom:1px solid var(--bible-line);border-left:2px solid transparent;cursor:pointer}
#view-bible .hit:hover{background:var(--bible-bg)} #view-bible .hit b{color:var(--bible-acc2)}
#view-bible .hit.on{background:var(--bible-rb-bg);border-left-color:var(--bible-rb-line)}
#view-bible mark{background:none;color:var(--bible-acc);font-weight:600}
#view-bible footer{display:flex;gap:18px;padding:5px 14px;background:var(--bible-panel);border-top:1px solid var(--bible-line);font-size:11.5px;color:var(--bible-dim)}
@media(max-width:760px){
 #view-bible #bible-toolbar{flex-wrap:wrap;padding:7px 10px}
 #view-bible #bible-toolbar>b{display:none}#view-bible #hnav{position:static;transform:none;order:-1;width:100%;justify-content:center}
 #view-bible .bible-main{grid-template-columns:minmax(150px,34vw) 4px minmax(300px,1fr) 4px minmax(210px,38vw)}
}
