/* The Bible in Flowchart – reader. Layout: book page left, vision screen right, control rail below. */
.bif{
  --bg:#e9ecee;--surface:#f7f8f8;--ink:#1b2333;--muted:#5a6475;--line:#cdd3da;
  --tekhelet:#2a4f8f;--tekhelet-soft:rgba(42,79,143,.14);--glow:rgba(214,170,60,.30);--screen:#121a29;
  --display:"Frank Ruhl Libre",Georgia,"Times New Roman",serif;
  --body:"Assistant","Segoe UI",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);font:16px/1.5 var(--body);
  padding:16px;border-radius:12px;max-width:1320px;margin:0 auto;display:grid;gap:14px;text-align:left;
}
.bif *{box-sizing:border-box}
.bif [hidden]{display:none!important}
.bif button,.bif select{font-family:var(--body)}

.bif-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px}
.bif-brand h2{font:700 clamp(22px,3vw,30px)/1.1 var(--display);margin:0;color:var(--ink);letter-spacing:.01em}
.bif-brand p{margin:2px 0 0;color:var(--muted);font-size:14px}
.bif-bh{font-family:var(--display);color:var(--tekhelet);margin-right:10px}
.bif-status{font-size:13px;color:var(--muted)}
.bif-status b{color:var(--tekhelet)}

.bif-toc{display:flex;flex-wrap:wrap;gap:6px}
.bif-toc button{font:600 13px var(--body);border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:5px 11px;border-radius:999px;cursor:pointer;line-height:1.3}
.bif-toc button[aria-current="true"]{background:var(--tekhelet);border-color:var(--tekhelet);color:#fff}
.bif-toc .bif-lk{opacity:.65;margin-left:4px;font-size:11px}
.bif-toc .bif-lockic{margin-left:4px;font-size:11px;opacity:.7}

.bif-desk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
/* the book page stands in front of the reader: as tall as the screen allows, no scrolling */
.bif-page{height:calc(100vh - var(--bif-top, 230px));min-height:420px;width:auto}
.bif-side{max-height:calc(100vh - var(--bif-top, 230px));min-height:420px;grid-template-rows:auto auto minmax(0,1fr)}
.bif-script{max-height:none!important;min-height:120px}
@media (max-width:860px){
  .bif-desk{grid-template-columns:minmax(0,1fr)}
  .bif-page{height:auto;width:100%;min-height:0}
  .bif-side{max-height:none;min-height:0}
  .bif-script{max-height:300px!important}
}
/* page chrome: the reader is the page, so the theme's title and top gap go */
body:has(#bif) .wp-block-post-title{display:none}
body:has(#bif) main.wp-block-group{margin-top:0!important;padding-top:12px!important}
body:has(#bif) .entry-content > .alignfull{max-width:none}

.bif-page{position:relative;background:#fff;border:1px solid var(--line);box-shadow:0 14px 30px -18px rgba(10,20,40,.45);aspect-ratio:515.88/728.52;max-width:100%;overflow:hidden}
.bif-page img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-select:none;pointer-events:none;max-width:none}
.bif-hl{position:absolute;border:2px solid #d6a93c;background:var(--glow);border-radius:3px;pointer-events:none;transition:all .45s ease;mix-blend-mode:multiply;opacity:0}
.bif-hl.on{opacity:1}
.bif-hot{position:absolute;cursor:pointer;border-radius:3px}
.bif-hot:hover{outline:1px dashed var(--tekhelet);background:var(--tekhelet-soft)}
.bif-pnum{position:absolute;right:8px;bottom:6px;font:600 11px var(--body);color:#667;background:rgba(255,255,255,.85);padding:1px 6px;border-radius:4px}

.bif-lock{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(160deg,#1d2a44,#0f1626)}
.bif-card{background:var(--surface);color:var(--ink);max-width:300px;padding:22px;border-radius:10px;text-align:center;display:grid;gap:10px;margin:16px}
.bif-card h3{margin:0;font:700 21px var(--display);color:var(--ink)}
.bif-card p{margin:0;color:var(--muted);font-size:14px}
.bif-cta{display:block;font:700 15px var(--body);background:var(--tekhelet);color:#fff!important;border-radius:8px;padding:10px 14px;text-decoration:none}
.bif-login{font-size:13px;color:var(--tekhelet)!important}

.bif-side{display:grid;gap:12px;min-width:0}
.bif-screen{position:relative;background:var(--screen);border-radius:10px;overflow:hidden;aspect-ratio:16/10;max-width:100%}
.bif-cam{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;transition:transform 1.6s cubic-bezier(.45,.05,.2,1)}
.bif-cam img{display:block;width:100%;height:100%;max-width:none;pointer-events:none}
.bif-screen.locked .bif-cam{opacity:0}
.bif-vign{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
.bif-sub{position:absolute;left:0;right:0;bottom:0;padding:28px 18px 14px;background:linear-gradient(transparent,rgba(5,9,16,.88) 45%);color:#f3f1ea;font:600 clamp(15px,1.6vw,18px)/1.45 var(--body);text-shadow:0 1px 2px #000;max-height:60%;overflow:hidden}
.bif-sub .w.said{color:#f0c96a}
.bif-tag{position:absolute;top:10px;left:12px;font:700 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:#c9d4e8;background:rgba(255,255,255,.08);padding:4px 8px;border-radius:4px}
.bif-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e2544b;margin-right:6px;vertical-align:1px;opacity:.35}
.bif.playing .bif-dot{opacity:1;animation:bifblink 1.2s infinite}
@keyframes bifblink{50%{opacity:.25}}

.bif-rail{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px}
.bif-rail button{font:600 14px var(--body);border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:7px 11px;cursor:pointer;min-height:38px;line-height:1.2}
.bif-rail button.bif-primary{background:var(--tekhelet);color:#fff;border-color:var(--tekhelet);min-width:104px}
.bif-rail button:disabled{opacity:.45;cursor:default}
.bif-grow{flex:1 1 auto}
.bif-rail label{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;margin:0}
.bif-rail select{font-size:14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:6px;padding:5px;max-width:190px}
.bif-prog{height:4px;background:var(--line);border-radius:4px;overflow:hidden;flex-basis:100%}
.bif-prog i{display:block;height:100%;width:0;background:var(--tekhelet);transition:width .4s}

.bif-script{background:var(--surface);border:1px solid var(--line);border-radius:10px;max-height:300px;overflow:auto}
.bif-script h4{position:sticky;top:0;margin:0;background:var(--surface);font:700 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line)}
.bif-script ol{margin:0;padding:6px 6px 8px;list-style:none;counter-reset:s}
.bif-script li{counter-increment:s;display:grid;grid-template-columns:2.2em 1fr;gap:6px;padding:7px 8px;border-radius:6px;cursor:pointer;font-size:14.5px;line-height:1.45;margin:0}
.bif-script li::before{content:counter(s);color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px;padding-top:2px}
.bif-script li:hover,.bif-script li.cur{background:var(--tekhelet-soft)}
.bif-script li.cur{box-shadow:inset 3px 0 0 var(--tekhelet)}
.bif-empty{padding:14px;color:var(--muted);font-size:14px}

.bif button:focus-visible,.bif select:focus-visible,.bif li:focus-visible,.bif a:focus-visible{outline:2px solid var(--tekhelet);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.bif-cam,.bif-hl,.bif-prog i{transition:none}.bif.playing .bif-dot{animation:none}}

/* ---------- full-screen reader page ---------- */
body.bif-app{margin:0;background:#e9ecee;color:#1b2333;font-family:"Assistant","Segoe UI",system-ui,sans-serif}
.bif-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding:8px max(16px,env(safe-area-inset-left,0px));background:#121a29;color:#e3e7ee;font:600 14px/1.3 "Assistant","Segoe UI",system-ui,sans-serif}
.bif-bar a{color:#c9d4e8;text-decoration:none}
.bif-bar a:hover{color:#fff}
.bif-bar-home{font:700 18px/1.2 "Frank Ruhl Libre",Georgia,serif;color:#fff!important}
.bif-bar-home .bif-bh{color:#7ea3e6}
.bif-bar-nav{display:flex;flex-wrap:wrap;gap:4px 16px;flex:1 1 auto}
.bif-bar-acct{display:flex;gap:14px;align-items:center}
.bif-bar-cta{background:#2a4f8f;color:#fff!important;padding:6px 12px;border-radius:6px}
.bif-app-main{padding:12px max(12px,env(safe-area-inset-right,0px)) 16px max(12px,env(safe-area-inset-left,0px))}
.bif-app .bif{max-width:none;border-radius:10px;padding:12px}
.bif-app .bif-brand{display:none}
.bif-app .bif-head{justify-content:flex-end}
@media (max-width:600px){.bif-bar-nav{order:3;flex-basis:100%}}

/* desktop: vision screen takes about half the height, controls and script stay in view */
@media (min-width:861px){
  .bif-screen{aspect-ratio:auto;height:calc((100vh - var(--bif-top, 230px)) * 0.56);min-height:240px}
}

/* navigation for the full book: book/portion menu + page number */
.bif-toc{align-items:center;gap:10px}
.bif-toc select{font:600 14px var(--body);padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);min-width:0;max-width:100%;flex:0 1 340px}
.bif-goto{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);margin:0}
.bif-goto input{width:5.5em;font:600 14px var(--body);padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
.bif-lockinfo{font-size:13px;color:var(--muted)}