/* Offline WEB chapter reader. Loaded by index.html and www/index.html;
   phase 4 syncs this file into www/ alongside bible/ and bible-reader.js.

   The verse-reference button lives here too, rather than in each copy's
   <style>, so the reader's entry point and the reader travel together. */

/* ---------- the way in ---------- */

/* The reference is how a reader reaches the chapter, so it has to read as a
   control, not as a caption. It overrides the .verse-ref caption rule in
   index.html, which this stylesheet follows. */
.verse-ref{
  display:flex;
  align-items:center;
  gap:6px;
  margin:8px 0 0 auto;
  padding:6px 10px;
  font-family:inherit;
  font-size:11px;
  line-height:1.2;
  color:var(--accent);
  background:transparent;
  border:1px solid rgba(45,122,163,0.35);
  border-radius:999px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.verse-ref:hover{ background:rgba(45,122,163,0.08); }
.verse-ref:active{ background:rgba(45,122,163,0.18); }
.verse-ref:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.verse-ref-cue{ font-size:13px; line-height:1; }

/* ---------- the reader ---------- */

.reader{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:center;
  background: radial-gradient(circle at top, #163c54 0%, var(--bg) 60%);
}
.reader[hidden]{ display:none; }

.reader-bar{
  width:100%;
  max-width:480px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 14px 16px 10px;
}
/* Hugs its label rather than stretching, but the figure's name can be long
   ("Simeon (Who Blessed the Infant Jesus)") and the chapter never is -- so
   when the bar runs out of room the name truncates and the chapter stays
   whole. */
.reader-back{
  flex:0 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  font-family:inherit;
  font-size:12px;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-soft-invert);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.reader-back:hover{ background:rgba(163,221,240,0.12); }
.reader-back:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; }
.reader-back-arrow{ flex:0 0 auto; }
.reader-back-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.reader-title{
  flex:0 0 auto;
  margin-left:auto;   /* control on the left, chapter on the right edge */
  font-size:16px;
  color:var(--ink-invert);
  text-align:right;
  white-space:nowrap;
}

.reader-body{
  flex:1 1 auto;
  width:100%;
  max-width:480px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding: 0 16px 28px;
}
.reader-sheet{
  background:var(--card-bg);
  border-radius:18px;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  padding:18px 16px 16px;
}

/* Psalm superscriptions are not verses and must not read as one. */
.reader-super{
  margin:0 0 12px;
  font-size:13px;
  font-style:italic;
  color:var(--ink-soft);
  text-align:center;
}
.reader-verse{
  margin:0 0 9px;
  font-size:15px;
  line-height:1.62;
  color:var(--ink);
}
.reader-vnum{
  font-size:11px;
  font-weight:700;
  color:var(--accent);
  vertical-align:0.35em;
  margin-right:4px;
}
.reader-verse.cited{
  background:#e5f4fa;
  border-left:3px solid var(--gold);
  border-radius:8px;
  margin-left:-8px;
  padding:6px 10px 6px 9px;
}
/* Luke 17:36, Acts 8:37, Acts 15:34, Acts 24:7, Rom 16:25 carry no WEB text.
   The manuscript note stands in so the number is never followed by nothing. */
.reader-note{
  font-style:italic;
  color:var(--ink-soft);
}

.reader-credit{
  margin:16px 0 0;
  font-size:11px;
  color:var(--ink-soft);
  text-align:center;
}
.reader-status{
  margin:0;
  padding:22px 4px;
  font-size:14px;
  color:var(--ink-soft);
  text-align:center;
}

/* Sits at the end of the chapter, where the card's own nav row sits at the
   end of the card. */
.reader-nav{
  display:flex;
  gap:8px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed var(--line);
}
.reader-nav-btn{
  flex:1 1 0;
  min-width:0;
  font-family:inherit;
  font-size:12px;
  padding:9px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--accent);
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  -webkit-tap-highlight-color:transparent;
}
.reader-nav-btn:hover:not(:disabled){ background:rgba(45,122,163,0.08); }
.reader-nav-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.reader-nav-btn:disabled{ color:var(--ink-soft); opacity:0.45; cursor:default; }