/* Ancient Bible reader — inherits the Ancient Library design tokens */
#ab-reader{max-width:46rem;margin:0 auto;}
#ab-reader .hd{text-align:center;margin:0 0 1.4rem;}
#ab-reader .kick{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ab-muted-soft);}
#ab-reader .ttl{font-family:'Sorts Mill Goudy',Georgia,serif;font-size:2rem;color:var(--ab-ink);margin:.15em 0 .1em;}
/* v22: ‹ title › — chevrons to the previous and next chapter, in the title's face, muted
   until hovered. A missing neighbour keeps its slot (visibility, not display) so the title
   does not shift sideways between the first chapter and the rest. */
#ab-reader .ttl-row{display:flex;align-items:center;justify-content:center;gap:.35em;}
#ab-reader .pg{font-family:'Sorts Mill Goudy',Georgia,serif;font-size:2.4rem;line-height:1;color:var(--ab-muted);
  text-decoration:none;padding:.05em .3em;min-width:1em;text-align:center;border-radius:2px;}
#ab-reader a.pg:hover,#ab-reader a.pg:focus-visible{color:var(--ab-teal);background:var(--ab-bg);}
#ab-reader .pg.off{visibility:hidden;}
#ab-reader .by{font-size:.85rem;color:var(--ab-muted);font-style:italic;}
#ab-reader .nav{text-align:center;margin:0 0 1.2rem;}
/* v23: one "Fragments" label, then the fragment ids as chips — 4Q1 has 40 of them and
   "Fragment f1 … Fragment f47" filled half a phone screen before any text. */
#ab-reader .nav .navlab{display:inline-block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ab-muted);margin:0 .6em .35em 0;vertical-align:middle;}
#ab-reader .nav button{background:none;border:1px solid var(--ab-line);color:var(--ab-muted);
  font-family:inherit;font-size:.8rem;padding:.25em .8em;margin:.15em;cursor:pointer;border-radius:2px;}
#ab-reader .nav button.on{background:var(--ab-teal);border-color:var(--ab-teal);color:#fff;}
#ab-reader .stage{position:relative;}
#ab-reader .line{display:flex;align-items:baseline;margin:.15em 0;}
#ab-reader .num{flex:0 0 2.4em;text-align:right;padding-right:.9em;color:var(--ab-muted-soft);
  font-size:.72em;user-select:none;}
/* v24: every verse is numbered; the ones between the fives are quieter, so the rhythm stays */
#ab-reader .num.minor{opacity:.55;}
/* v24: the text column scales with --ab-fs (A− / A+ in the toolbar, 0.85–1.5, remembered) */
#ab-reader .body{font-size:calc(1em * var(--ab-fs,1));}
#ab-reader .entog .fs{display:inline-flex;border:1px solid var(--ab-line);border-radius:4px;overflow:hidden;background:var(--ab-card,#fff);}
#ab-reader .entog .fs button{font-family:'Sorts Mill Goudy',Georgia,serif;color:var(--ab-teal);background:var(--ab-card,#fff);border:0;
  border-left:1px solid var(--ab-line);padding:.25em .7em;cursor:pointer;line-height:1;}
#ab-reader .entog .fs button:first-child{border-left:0;}
#ab-reader .entog .fs button.dn{font-size:.8rem;}
#ab-reader .entog .fs button.up{font-size:1.1rem;}
#ab-reader .entog .fs button:hover{background:var(--ab-bg);}
#ab-reader .txt{flex:1 1 auto;min-width:0;}
#ab-reader .body.rtl .num{text-align:left;padding-right:0;padding-left:.9em;}
#ab-reader .body.rtl .txt{min-width:0;overflow-wrap:break-word;}
#ab-reader .body.rtl .txt{direction:rtl;text-align:right;font-family:'Ezra SIL','Times New Roman',serif;
  font-size:1.42em;line-height:2.05;}
#ab-reader .w{cursor:pointer;border-bottom:1px dotted transparent;transition:border-color .12s;}
/* Tap area (2026-09-09 review, item 3). `.w` carried no padding, so the target was the glyph
   box: on John 1, 75 of 300 sampled words were under the 24px minimum and the smallest was
   10px; on 1QS 113 were, 35 of them under 10px. Hebrew was already fine — niqqud makes the
   words wide. Vertical padding on an inline box costs nothing (it does not grow the line box),
   and the negative horizontal margin gives the padding back to the layout, so the text does not
   move: measured, line height and body height unchanged to the pixel, smallest target 10->16px,
   median height 22->37px. Not applied in gloss mode, where `.w` is a flex column and already
   large. */
#ab-reader:not(.ab-en-gloss) .txt .w{padding:.42em .16em;margin:0 -.16em;}
#ab-reader .w:hover{border-bottom-color:var(--ab-teal);}
#ab-reader .w.sel{background:rgba(85,116,123,.13);border-bottom-color:var(--ab-teal);}
#ab-reader .pop{display:none;position:absolute;z-index:40;width:22rem;max-width:92vw;background:#fff;
  border:1px solid var(--ab-line);box-shadow:0 6px 22px rgba(0,0,0,.09);padding:.85rem 1rem;
  font-size:.88rem;line-height:1.55;border-radius:2px;}
#ab-reader .pop .hw{font-family:'Sorts Mill Goudy',Georgia,serif;font-size:1.25rem;color:var(--ab-ink);}
#ab-reader .pop .hw.rtl{font-family:'Ezra SIL','Times New Roman',serif;direction:rtl;font-size:1.3em;}
#ab-reader .pop .xlit{color:var(--ab-muted-soft);font-size:.62em;font-style:italic;margin-left:.5em;}
#ab-reader .pop .pos{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ab-muted-soft);}
#ab-reader .pop .gram{color:var(--ab-teal-dk);font-size:.86em;letter-spacing:.02em;margin:.15em 0 .35em;}
#ab-reader .pop .gloss{font-weight:700;margin:.1em 0 .5em;color:var(--ab-ink);}
#ab-reader .pop .def{color:var(--ab-muted);font-size:.86em;}
#ab-reader .pop .def.clamp{max-height:8.5em;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);}
#ab-reader .pop .def.none{font-style:italic;}
#ab-reader .pop .exp{background:none;border:none;color:var(--ab-teal);cursor:pointer;padding:.25em 0;
  font-family:inherit;font-size:.8em;}
#ab-reader .pop .segs{border-top:1px solid var(--ab-line);margin-top:.7em;padding-top:.5em;}
#ab-reader .pop .segshd{font-size:.72em;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ab-muted-soft);margin-bottom:.35em;}
#ab-reader .pop .ent.sub{border-left:2px solid var(--ab-line);padding-left:.6em;margin-bottom:.5em;}
#ab-reader .pop .ent.sub .hw{font-size:1rem;}
#ab-reader .pop .ent.sub .def{display:none;}
#ab-reader .pop .ent.sub .exp{display:none;}
#ab-reader .pop .ent.sub .pos{display:none;}
#ab-reader .pop .ent.sub .gloss{font-weight:400;font-style:italic;margin:.05em 0 .2em;}
#ab-reader .pop .seglabel{font-size:.72em;color:var(--ab-muted);font-style:italic;}
#ab-reader .pop .src{border-top:1px solid var(--ab-line);margin-top:.6em;padding-top:.4em;
  font-size:.7rem;color:var(--ab-muted-soft);}
#ab-reader .pop .r{color:var(--ab-teal);}
#ab-reader .hint{text-align:center;font-size:.78rem;color:var(--ab-muted-soft);margin:1.2rem 0 .6rem;font-style:italic;}
#ab-reader .colophon{border-top:1px solid var(--ab-line);padding-top:.7rem;font-size:.72rem;
  color:var(--ab-muted-soft);line-height:1.5;}
#ab-reader .colophon a{color:var(--ab-muted);}

/* ---------------- English translation toggle (v12) ---------------- */
#ab-reader .entog{display:flex;align-items:center;justify-content:center;gap:.6em;
  flex-wrap:wrap;margin:0 0 1.15rem;}
#ab-reader .entog .lbl{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ab-muted-soft);}
#ab-reader .entog .seg{display:inline-flex;border:1px solid var(--ab-line);border-radius:4px;
  overflow:hidden;background:#fff;}
#ab-reader .entog .seg button{font-family:inherit;font-size:.8rem;color:var(--ab-teal);
  background:#fff;border:0;border-left:1px solid var(--ab-line);padding:.4em 1em;cursor:pointer;}
#ab-reader .entog .seg button:first-child{border-left:0;}
#ab-reader .entog .seg button.on{background:var(--ab-teal);color:#fff;}
#ab-reader .entog .seg button:hover:not(.on){background:var(--ab-bg);}
#ab-reader .entog .ennote{flex-basis:100%;text-align:center;font-size:.78rem;font-style:italic;
  color:var(--ab-muted-soft);}
#ab-reader .en{display:none;}
#ab-reader .envn{color:var(--ab-muted-soft);font-size:.68em;vertical-align:top;
  margin-right:.45em;user-select:none;}
/* under-each-verse: English joins the flex line as a full-width third row */
#ab-reader.ab-en-inter .line{flex-wrap:wrap;}
#ab-reader.ab-en-inter .en{display:block;flex-basis:100%;direction:ltr;text-align:left;
  font-size:.92rem;color:var(--ab-muted);line-height:1.6;margin:.05em 0 .95em;
  padding-left:14px;border-left:2px solid var(--ab-line);}
/* side-by-side: the stage breaks out of the 46rem column; original keeps its reading side */
#ab-reader.ab-en-side .stage{width:min(96vw,66rem);position:relative;left:50%;
  transform:translateX(-50%);}
#ab-reader.ab-en-side .line{display:grid;grid-template-columns:2.2em 1fr 1fr;gap:0 1.6rem;
  align-items:start;border-bottom:1px solid var(--ab-line);padding-bottom:.45em;margin-bottom:.7em;}
/* The .body carries dir=rtl for Hebrew/Aramaic, and CSS grid COLUMNS FOLLOW DIRECTION:
   under rtl, column 1 is the RIGHTMOST. So one assignment serves both scripts —
   num in col 1 (reading edge), original in col 2, English in col 3 (far side).
   Hebrew: number right, Hebrew right-of-centre, English left. Greek: mirrored. */
#ab-reader.ab-en-side .num{grid-column:1;}
#ab-reader.ab-en-side .txt{grid-column:2;grid-row:1;}
#ab-reader.ab-en-side .en{display:block;grid-column:3;grid-row:1;direction:ltr;text-align:left;
  font-size:.92rem;color:var(--ab-muted);line-height:1.6;}
@media(max-width:760px){
  #ab-reader.ab-en-side .stage{width:auto;left:auto;transform:none;}
  #ab-reader.ab-en-side .line{display:flex;flex-wrap:wrap;border-bottom:0;
    padding-bottom:0;margin-bottom:.15em;}
  #ab-reader.ab-en-side .en{flex-basis:100%;margin:.05em 0 .95em;padding-left:14px;
    border-left:2px solid var(--ab-line);}
}

/* ---------------- v13 ---------------- */
/* parallel-text row (MT <-> LXX, scroll -> biblical book) */
#ab-reader .par{text-align:center;font-size:.8rem;color:var(--ab-muted-soft);
  margin:1.1rem 0 .8rem;font-style:italic;}
#ab-reader .par a{color:var(--ab-teal);font-style:normal;}
#ab-reader .parsep{margin:0 .5em;color:var(--ab-line);}
/* #vN verse permalink highlight */
#ab-reader .line.vmark{background:rgba(85,116,123,.08);outline:2px solid rgba(85,116,123,.25);
  outline-offset:2px;border-radius:2px;}
/* keyboard focus for word spans (a11y) */
#ab-reader .w:focus{outline:none;border-bottom-color:var(--ab-teal);}
#ab-reader .w:focus-visible{outline:2px solid var(--ab-teal);outline-offset:1px;
  border-radius:1px;}
/* expanded lexicon entries scroll instead of pushing the popup off-screen */
#ab-reader .pop .def:not(.clamp){max-height:55vh;overflow:auto;}

/* ---------------- v16 ---------------- */
/* word-by-word gloss mode: each word becomes a small column, gloss beneath */
#ab-reader .gl{display:none;}
#ab-reader.ab-en-gloss .txt .w{display:inline-flex;flex-direction:column;align-items:center;
  vertical-align:top;text-align:center;margin:.12em .08em .34em;}
#ab-reader.ab-en-gloss .gl{display:block;direction:ltr;unicode-bidi:isolate;
  font-family:'Gentium Book Basic',Georgia,serif;font-size:.6em;line-height:1.3;
  color:var(--ab-muted);max-width:9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#ab-reader.ab-en-gloss .txt{line-height:1.55;}
#ab-reader.ab-en-gloss .body.rtl .txt{line-height:1.5;}
/* clickable verse numbers (live): click copies the #vN permalink; the numbers the
   five-verse rhythm hides reappear on row hover */
#ab-reader .num[data-n]{cursor:pointer;transition:color .12s;}
#ab-reader .num[data-n]:hover{color:var(--ab-teal);}
#ab-reader .line:hover .num[data-n]:empty::before{content:attr(data-n);opacity:.45;}
#ab-reader .num.vcopied{color:var(--ab-teal);}
/* dark mode: tokens swap in ab.php; these override the reader's literal whites */
/* v24: a manual theme choice (data-theme on <html>, set by the header toggle in ab.php) wins over
   the OS setting; with no choice the OS decides, as before. */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) #ab-reader .pop,:root:not([data-theme="light"]) #ab-reader .entog .seg,:root:not([data-theme="light"]) #ab-reader .entog .seg button{background:var(--ab-card,#fff);}
:root:not([data-theme="light"]) #ab-reader .entog .seg button.on{background:var(--ab-teal);color:#141310;}
:root:not([data-theme="light"]) #ab-reader .pop{box-shadow:0 6px 22px rgba(0,0,0,.5);}
:root:not([data-theme="light"]) #ab-reader .w.sel{background:rgba(143,177,185,.16);}
}
:root[data-theme="dark"] #ab-reader .pop,:root[data-theme="dark"] #ab-reader .entog .seg,:root[data-theme="dark"] #ab-reader .entog .seg button{background:var(--ab-card,#fff);}
:root[data-theme="dark"] #ab-reader .entog .seg button.on{background:var(--ab-teal);color:#141310;}
:root[data-theme="dark"] #ab-reader .pop{box-shadow:0 6px 22px rgba(0,0,0,.5);}
:root[data-theme="dark"] #ab-reader .w.sel{background:rgba(143,177,185,.16);}

/* ---------------- v17: concordance link, LSJ, Jastrow ---------------- */
#ab-reader .pop .conc{display:inline-block;margin:.5em .8em .1em 0;font-size:.8em;color:var(--ab-teal);}
/* v23: the expand button and the concordance link sat flush ("Show full entryEvery
   occurrence →"); the button had no right margin. */
#ab-reader .pop .exp{margin-right:1em;}
#ab-reader .pop .lsj{background:none;border:1px solid var(--ab-line);color:var(--ab-teal);
  cursor:pointer;padding:.25em .7em;border-radius:3px;font-family:inherit;font-size:.78em;margin-top:.4em;}
#ab-reader .pop .lsj:hover{border-color:var(--ab-teal);background:var(--ab-bg);}
#ab-reader .pop .lsj[disabled]{opacity:.6;cursor:default;}
#ab-reader .pop .lsjart,#ab-reader .pop .jas{border-top:1px solid var(--ab-line);margin-top:.6em;padding-top:.5em;}
#ab-reader .pop .lsjhd,#ab-reader .pop .jashd{font-size:.72em;text-transform:uppercase;
  letter-spacing:.09em;color:var(--ab-muted-soft);margin-bottom:.3em;}
#ab-reader .pop .lsjhd.none{font-style:italic;text-transform:none;letter-spacing:0;}
#ab-reader .pop .lsjsrc{font-size:.68em;color:var(--ab-muted-soft);margin-top:.35em;}
#ab-reader .pop .gk{font-family:'Gentium Book Basic',Georgia,serif;}
#ab-reader .pop .ls-s{margin:.35em 0;}
#ab-reader .pop .ls-l2,#ab-reader .pop .ls-l3{margin-left:.7em;}
#ab-reader .pop .ls-cut{font-style:italic;color:var(--ab-muted-soft);margin-top:.4em;}
#ab-reader .pop .ja-e{margin-bottom:.5em;}
#ab-reader .pop .ja-hw{font-family:'Ezra SIL','Times New Roman',serif;direction:rtl;
  unicode-bidi:isolate;font-size:1.1em;color:var(--ab-ink);}
#ab-reader .pop .ja-m{font-style:italic;color:var(--ab-muted-soft);margin-left:.4em;}
#ab-reader .pop .ja-s{margin:.25em 0;}
#ab-reader .pop .ja-l1,#ab-reader .pop .ja-l2,#ab-reader .pop .ja-l3{margin-left:.7em;}


/* ---------------------------------------------------------------- the way onward (2026-09-09)
   Items 2 and 5 of the review: the only next-chapter control was the chevron beside the title,
   2,247px above the foot of John 1, and there was no way to jump to a chapter at all. Both are
   asked at the same moment — the end of the chapter — so they share one bar. */
.ab-chapfoot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;
  margin:1.6rem 0 .2rem;padding:.85rem 0 0;border-top:1px solid var(--ab-line);font-size:.95rem;}
.ab-chapfoot .cf{color:var(--ab-teal);text-decoration:none;padding:.35em .1em;border-radius:2px;}
.ab-chapfoot .cf:hover{color:var(--ab-teal-dk);text-decoration:underline;}
.ab-chapfoot .cf.off{flex:0 0 1px;padding:0;}
.ab-chapfoot .cf-a{color:var(--ab-muted-soft);}
.ab-chapfoot .cf-pick{position:static;text-align:center;}
.ab-chapfoot .cf-pick summary{list-style:none;cursor:pointer;color:var(--ab-muted);font-size:.86rem;
  padding:.35em .6em;border:1px solid var(--ab-line);border-radius:3px;display:inline-block;}
.ab-chapfoot .cf-pick summary::-webkit-details-marker{display:none;}
.ab-chapfoot .cf-pick summary::after{content:" \25be";color:var(--ab-muted-soft);}
.ab-chapfoot .cf-pick summary:hover{border-color:var(--ab-teal);color:var(--ab-teal);}
.ab-chapfoot .cf-pick[open] summary{border-color:var(--ab-teal);color:var(--ab-teal);}
/* The list opens as a panel anchored to the bar, not in the flow of it: opened in flow it
   pushed the "next chapter" link off its own line and moved the way onward at the moment the
   reader was looking for it. Anchored to .ab-chapfoot, so the row above never moves. */
.cf-grid{position:absolute;left:0;right:0;top:100%;z-index:6;
  display:flex;flex-wrap:wrap;gap:.25rem;justify-content:center;margin:.45rem 0 0;
  max-height:14rem;overflow-y:auto;padding:.5rem;
  background:var(--ab-card,#fffdf7);border:1px solid var(--ab-line);border-radius:3px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);}
.cf-grid .cf-n{min-width:2.1em;padding:.4em .35em;text-align:center;font-size:.9rem;
  color:var(--ab-teal);text-decoration:none;border:1px solid transparent;border-radius:2px;}
.cf-grid .cf-n:hover{border-color:var(--ab-line);background:var(--ab-card,#fffdf7);}
.cf-grid .cf-n.on{color:var(--ab-ink);border-color:var(--ab-line);background:var(--ab-card,#fffdf7);font-weight:700;}
@media(max-width:520px){
  .ab-chapfoot{font-size:.9rem;gap:.35rem;}
  .ab-chapfoot .cf-pick{order:3;flex:1 0 100%;margin-top:.3rem;}
}

/* the arrow-key hint (item 7) */
#ab-reader .hint .hint-k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  border:1px solid var(--ab-line);border-radius:2px;padding:0 .3em;font-size:.92em;}

/* the word card's close (item 6): Esc works too, but a card that opened under a thumb needs a
   visible way out — dismissing by tapping a non-word part of the reader is not discoverable. */
#ab-reader .pop .pclose{position:absolute;top:.35rem;right:.4rem;width:1.7rem;height:1.7rem;
  display:flex;align-items:center;justify-content:center;border:0;background:transparent;
  color:var(--ab-muted-soft);font-size:1.15rem;line-height:1;cursor:pointer;border-radius:3px;padding:0;}
/* Astra paints button:hover/:focus solid blue (the same leak that turned the theme toggle
   into a blue disc, RESUME 0aq). Say transparent loudly enough to outrank it. */
button.pclose,button.pclose:hover,button.pclose:focus,button.pclose:active{
  background:transparent!important;background-color:transparent!important;box-shadow:none!important;}
#ab-reader .pop .pclose:hover{color:var(--ab-ink);}
#ab-reader .pop .pclose:focus-visible{outline:2px solid var(--ab-teal);outline-offset:1px;}
#ab-reader .pop .ent{padding-right:1.5rem;}

/* v31: the active nav button (Dead Sea Scrolls fragments) kept white text on the lightened
   dark-mode teal at 2.29:1; it now matches .entog .seg button.on above (8.10:1). */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) #ab-reader .nav button.on{color:#141310;}
}
:root[data-theme="dark"] #ab-reader .nav button.on{color:#141310;}