/* Fonts are served from this site, not from a font CDN: the reader has to work
   with no signal, and nothing here should phone anywhere. SIL Open Font
   Licence 1.1 — see font/LICENSE-*.txt */
@font-face{font-family:'CodexUI';font-style:normal;font-weight:400;font-display:swap;
  src:url('font/spectral-400.woff2') format('woff2')}
@font-face{font-family:'CodexUI';font-style:normal;font-weight:600;font-display:swap;
  src:url('font/spectral-600.woff2') format('woff2')}
@font-face{font-family:'CodexUI';font-style:italic;font-weight:400;font-display:swap;
  src:url('font/spectral-400i.woff2') format('woff2')}
@font-face{font-family:'CodexHeb';font-style:normal;font-weight:400;font-display:swap;
  src:url('font/hebrew-400.woff2') format('woff2')}
@font-face{font-family:'CodexHeb';font-style:normal;font-weight:600;font-display:swap;
  src:url('font/hebrew-600.woff2') format('woff2')}
@font-face{font-family:'CodexGrk';font-style:normal;font-weight:400;font-display:swap;
  src:url('font/greek-400.woff2') format('woff2')}
@font-face{font-family:'CodexGrk';font-style:normal;font-weight:600;font-display:swap;
  src:url('font/greek-600.woff2') format('woff2')}
@font-face{font-family:'CodexGrk';font-style:italic;font-weight:400;font-display:swap;
  src:url('font/greek-400i.woff2') format('woff2')}
:root{
  --ui:'CodexUI',Georgia,'Times New Roman',serif;
  --heb:'CodexHeb','Times New Roman',serif;
  --grk:'CodexGrk','CodexUI',Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* One knob. --fs is set on <html> by the text-size control and everything
     else is a ratio of it, so nothing can drift out of step. The smallest
     step is deliberately not far below the base: older eyes do not get a
     separate, tinier interface just because the text is a caption. */
  --fs:19px;
  --t1:0.86rem;   /* labels, references, credits */
  --t2:0.94rem;   /* secondary prose */
  --t3:1rem;      /* body */
  --t4:1.12rem;   /* lead-in */
  --t5:1.3rem;    /* headings */
  --t6:1.7rem;    /* a headword under the glass */
  --lh:1.7;       /* leading: WCAG 1.4.12 floors this at 1.5 */
  --tap:48px;
}
/* Colour lives in scheme.css, which is generated and verified. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{font-size:var(--fs)}
body{background:var(--paper);color:var(--ink);font-family:var(--ui);
  line-height:var(--lh);font-size:var(--t3);
  padding-bottom:env(safe-area-inset-bottom,0px);
  -webkit-text-size-adjust:100%}
button,select,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.bar{position:sticky;top:0;z-index:30;background:var(--paper);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px)}
.bar-in{display:flex;align-items:center;gap:8px;
  padding:8px max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px))}
.ref{font-weight:600;font-size:var(--t4);flex:1;min-width:0;min-height:var(--tap);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.ib{min-width:var(--tap);min-height:var(--tap);display:flex;align-items:center;
  justify-content:center;border-radius:9px;color:var(--ink-soft);font-size:var(--t4)}
.ib:active{background:var(--accent-soft)}
.ib.on{color:var(--accent);background:var(--accent-soft)}

main{padding:10px max(14px,env(safe-area-inset-right,0px)) 72px max(14px,env(safe-area-inset-left,0px));
  max-width:760px;margin:0 auto}

.v{padding:12px 0;border-bottom:1px solid var(--line-soft)}
.vnum{font-family:var(--mono);font-size:var(--t1);color:var(--ink-faint);
  vertical-align:top;margin-right:7px;font-variant-numeric:tabular-nums}
.orig{display:flex;flex-wrap:wrap;gap:4px 7px;margin:3px 0 7px}
.orig[dir=rtl]{justify-content:flex-start}
.w{padding:3px 4px;border-radius:4px;line-height:1.85;
  border-bottom:1px solid transparent;
  min-height:var(--tap);display:inline-flex;align-items:center}
.w.heb{font-family:var(--heb);font-size:var(--t5)}
.w.grk{font-family:var(--grk);font-size:var(--t4)}
.w:active,.w.sel{background:var(--accent);color:var(--on-accent)}
.w.role-verb{border-bottom-color:var(--accent)}
.eng{font-size:var(--t3);color:var(--ink);line-height:var(--lh)}
.eng b{color:var(--ink);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.chip{font-size:var(--t1);padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-soft);background:var(--surface);
  min-height:var(--tap);display:inline-flex;align-items:center}
.chip.place{border-color:var(--accent);color:var(--accent)}
.chip.person{border-color:var(--good);color:var(--good)}
.chip.event{border-color:var(--warn);color:var(--warn)}
.chip.note{border-color:var(--ink-faint)}
.chip.xr{border-color:var(--crit);color:var(--crit)}

.sheet{position:fixed;left:0;right:0;bottom:0;inset:auto 0 0 0;z-index:50;background:var(--surface);
  border-radius:16px 16px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.28);
  max-height:82vh;max-height:82dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px max(16px,env(safe-area-inset-right,0px))
          calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  transform:translateY(100%);transition:transform .22s ease}
.sheet.open{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.sheet{transition:none}}
.sheet-top{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.grab{width:38px;height:4px;border-radius:2px;background:var(--line);
  margin:0 auto;flex:1}
.sheet-x{min-width:38px;min-height:38px;display:flex;align-items:center;
  justify-content:center;border-radius:9px;color:var(--ink-soft);font-size:var(--t5);
  flex:none}
.sheet-x:active{background:var(--accent-soft)}
.scrim{position:fixed;top:0;left:0;right:0;bottom:0;inset:0;z-index:40;background:rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transition:opacity .22s}
.scrim.open{opacity:1;pointer-events:auto}

.lbl{font-size:var(--t1);letter-spacing:.02em;font-weight:600;
  color:var(--ink-soft);font-family:var(--ui);margin:0 0 8px}
.hw{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hw .big{font-size:var(--t6)}
.hw .big.heb{font-family:var(--heb)} .hw .big.grk{font-family:var(--grk)}
.tr{color:var(--ink-soft);font-style:italic}
.mo{border-top:1px solid var(--line-soft);padding-top:13px;margin-top:13px}
.sn{font-family:var(--mono);font-size:var(--t1);color:var(--accent);
  background:var(--accent-soft);padding:3px 8px;border-radius:5px}
.pa{font-size:var(--t2);color:var(--ink-soft);margin:7px 0 0}
.de{font-size:var(--t2);margin:7px 0 0}
.oc{font-size:var(--t1);color:var(--ink-faint);margin:9px 0 0}
.more{font-size:var(--t2);color:var(--accent);margin-top:8px;padding:6px 0}
.row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:var(--t2)}
.row:last-child{border-bottom:0}
.row .y{white-space:nowrap;font-variant-numeric:tabular-nums}
.row .y.none{font-family:var(--ui);font-style:italic;color:var(--ink-faint);font-size:var(--t2)}
.row.sel{color:var(--accent);font-weight:600}
.note-b{font-size:var(--t2);line-height:1.55;margin:0 0 14px;
  border-left:2px solid var(--line);padding-left:12px;white-space:pre-wrap}
.note-q{font-family:var(--grk);color:var(--accent);font-size:var(--t3)}
select{background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:9px 10px;min-height:var(--tap);max-width:100%}
input[type=search]{width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:11px 12px;min-height:var(--tap)}
.hit{display:block;width:100%;text-align:left;padding:11px 0;
  border-bottom:1px solid var(--line-soft)}
.hit .r{font-weight:600;font-size:var(--t1);color:var(--accent)}
.hit .t{font-size:var(--t3);color:var(--ink-soft);display:block;margin-top:3px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.grid button{min-height:var(--tap);border:1px solid var(--line);border-radius:9px;
  background:var(--surface);font-size:var(--t2);padding:6px 2px}
.grid button:active{background:var(--accent);color:var(--on-accent)}
.blist{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
.blist button{min-height:var(--tap);border:1px solid var(--line);border-radius:9px;
  background:var(--surface);font-size:var(--t2);padding:8px 6px;text-align:left}
.ot{color:var(--ink-faint);font-size:var(--t1)}
.load{text-align:center;color:var(--ink-faint);padding:40px 0;font-style:italic}
.tabs{display:flex;gap:4px;overflow-x:auto;margin:-4px 0 12px;padding-bottom:4px}
.tabs button{white-space:nowrap;font-size:var(--t2);padding:7px 12px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-soft);min-height:36px}
.tabs button.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.foot{color:var(--ink-faint);font-size:var(--t1);line-height:1.6;padding:20px 0 0;
  border-top:1px solid var(--line);margin-top:24px}
.foot a{color:var(--accent)}
.para{height:0;border-top:1px solid var(--line);margin:18px 18% 4px;opacity:.55}
.chip.cm{border-color:var(--good);color:var(--good)}

/* ---- readability controls -------------------------------------------- */
.szbtn{min-width:76px;min-height:60px;border:1px solid var(--accent);
  border-radius:10px;color:var(--accent);background:var(--surface);
  font-size:var(--t5);font-weight:600;display:flex;align-items:center;
  justify-content:center}
.szbtn:active:not(:disabled){background:var(--accent);color:var(--on-accent)}
.szbtn:disabled{opacity:.35;border-color:var(--line);color:var(--ink-faint)}
/* Hebrew and Greek need more room between lines than English does, and the
   pointing sits above and below the letters. */
.orig{line-height:1.9}
.w.heb{line-height:2.1}
/* Links in running prose are underlined, not colour-only: colour alone is
   the first thing to go. */
.foot a,.de a{text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;
  transition:none!important}}

/* ---- tappable options instead of dropdowns ---------------------------
   A <select> defeated every older participant Sayago & Blat tested, while
   larger tappable controls did not. These are 52px tall and full width. */
.opts{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
.opt{display:block;width:100%;text-align:left;min-height:52px;
  padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);font-size:var(--t2)}
.opt.on{border-color:var(--accent);background:var(--accent-soft);
  color:var(--accent);font-weight:600}
.opt:active{border-color:var(--accent)}
#btnAa{font-size:var(--t4)}
/* links that are styled as option rows still need to look tappable */
a.opt{text-decoration:none;display:flex;align-items:center}
a.opt:visited{color:var(--ink)}
figure img{max-width:100%}

/* ---- colour swatches -------------------------------------------------- */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(102px,1fr));
  gap:10px;margin:8px 0 2px}
.sw{display:flex;flex-direction:column;align-items:center;gap:6px;
  min-height:var(--tap);padding:10px 6px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface);color:var(--ink)}
.sw.on{border-color:var(--accent);border-width:2px;padding:9px 5px}
.sw-chip{width:46px;height:46px;border-radius:8px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:var(--t4)}
.sw-name{font-size:var(--t1);text-align:center;line-height:1.3}

/* ---- Dore's engravings, set in the text ------------------------------- */
.plate{margin:22px 0;padding:0}
.plate img{width:100%;height:auto;display:block;border-radius:8px;
  background:var(--line-soft)}
.plate figcaption{font-size:var(--t1);color:var(--ink-soft);
  margin-top:8px;line-height:1.45}

/* ---- listening -------------------------------------------------------
   The play control is large and says what it does in words, not only in
   an icon. The bar sits below the text rather than over it: body gets
   padding while it is open, so the last verses of a chapter are never
   hidden behind the controls. */
.listen{display:flex;align-items:center;gap:10px;width:100%;
  min-height:var(--tap);margin:0 0 18px;padding:11px 16px;
  border:1.5px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--ink);
  font-size:var(--t4);text-align:left}
.listen svg{flex:none;color:var(--accent)}
.listen:active{background:var(--accent-soft)}

.player{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--surface);border-top:1.5px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -4px 18px rgba(0,0,0,.18)}
.player[hidden]{display:none}
body.playing{padding-bottom:calc(248px + env(safe-area-inset-bottom,0px))}
.pl-top{display:flex;align-items:flex-start;gap:10px}
.pl-txt{flex:1;font-size:var(--t4);line-height:1.45;color:var(--ink)}
.pl-sub{display:block;font-size:var(--t1);color:var(--ink-soft);margin-top:2px}
.pl-x{flex:none;width:var(--tap);height:var(--tap);display:flex;
  align-items:center;justify-content:center;border:1px solid var(--line);
  border-radius:10px;color:var(--ink)}
.pl-x:active{background:var(--accent-soft)}
#plAudio{display:block;width:100%;margin:8px 0 6px;min-height:42px}
.pl-note{font-size:var(--t1);line-height:1.5;color:var(--ink-soft)}
.pl-line{display:block;margin-top:5px}
.pl-note a{color:var(--accent)}
.pl-b{display:inline-block;margin-top:6px;min-height:40px;padding:8px 12px;
  border:1px solid var(--accent);border-radius:9px;
  color:var(--accent);font-size:var(--t1)}
.pl-b:active{background:var(--accent-soft)}

/* ---- the first screen ------------------------------------------------
   Someone arriving from a link somebody sent them. Each tip draws the
   button it is talking about rather than naming it, because "tap Aa" means
   nothing until you have seen the Aa. */
.tip{display:flex;gap:14px;align-items:flex-start;margin:0 0 20px}
.tip-d{flex:none;display:flex;gap:4px;align-items:center;padding-top:2px}
.tip-h{font-weight:600;margin:0;font-size:var(--t4)}
.demo{min-width:44px;min-height:44px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink)}
/* .start is the one big button on the first screen. The install button
   wants the same look a size down, and its own class: sharing .start made
   "the Start reading button" two buttons. */
.start,.instbtn{width:100%;border:2px solid var(--accent);
  border-radius:12px;background:var(--accent);color:var(--on-accent);
  font-weight:600}
.start{min-height:60px;font-size:var(--t5)}
.instbtn{min-height:52px;font-size:var(--t4);margin:2px 0}
.start:active,.instbtn:active{background:var(--accent-soft);color:var(--accent)}

/* ---- standing in a place --------------------------------------------
   The arrows are the control and the drag is the shortcut, not the other
   way round: dragging is not obvious, and not everybody can do it
   accurately. Each arrow is a full tap target and repeats while held. */
.pano{position:relative;width:100%;aspect-ratio:4/3;border-radius:10px;
  overflow:hidden;background:var(--line-soft);margin:10px 0 0}
.pano canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.pano canvas:active{cursor:grabbing}
.pano-load{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;margin:0;font-size:var(--t1);color:var(--ink-soft)}
.pano-ctl{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:8px 0 4px}
.pbtn{min-height:52px;border:1px solid var(--accent);border-radius:9px;
  color:var(--accent);background:var(--surface);font-size:var(--t4);
  font-weight:600;line-height:1}
.pbtn:active{background:var(--accent);color:var(--on-accent)}

/* ---- the verse under a reference -------------------------------------
   A list of bare chapter-and-verse numbers is a table of contents for a
   concordance rather than a concordance. The text goes underneath, and
   the word being looked up is picked out so the eye can find it. */
.vt{display:block;margin-top:5px;font-size:var(--t2);line-height:1.5;
  color:var(--ink-soft);white-space:normal}
.vt:empty{display:none}
.vt mark{background:var(--accent-soft);color:var(--accent);
  font-weight:600;padding:0 1px;border-radius:3px}

/* ---- the way back ----------------------------------------------------
   Named, not an arrow in a corner: "Back to the word" is an instruction,
   a bare arrow is a guess. */
.sheet-back{display:inline-flex;align-items:center;min-height:44px;
  padding:6px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface);color:var(--accent);
  font-size:var(--t2);font-weight:600;max-width:62%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-back:active{background:var(--accent-soft)}