/* ======================================
   Book Picker Modal (Ink & Slate)
====================================== */

#bookModal {
  position: fixed;
  inset: 0;
  z-index: 998;
}

#bookModal[hidden] { display: none !important; }

#bookBackdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(0,0,0,.35);
}

#bookSheet {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;

  background: var(--surface);
  color: var(--text);

  border-bottom: 1px solid var(--rule);

  padding: 10px;
  max-height: 80vh;
  overflow: auto;
}

#bookTitleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

#bookTitle {
  font-weight: 700;
  font-size: 14px;
}

#btnCloseBooks {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--text);
  height: 32px;
  padding: 0 10px;
}

#bookSearch {
  width: 100%;
  height: 34px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--text);
  padding: 0 10px;
  margin-bottom: 8px;
}

#bookList {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.bookItem {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--text);
  height: 34px;
  text-align: left;
  padding: 0 10px;
  border-radius: 6px;
}

.bookItem:active { background: var(--bg); }


/* ======================================
   Settings Modal (Ink & Slate)
====================================== */

#settingsModal {
  position: fixed;
  inset: 0;
  z-index: 999; /* higher than header z-index:10 */
}

#settingsModal[hidden] { display: none !important; }

#settingsBackdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(0,0,0,.35);
}

#settingsSheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  background: var(--surface);
  color: var(--text);

  border-top: 1px solid var(--rule);

  padding: 10px 10px 12px;

  max-height: 65vh;
  overflow: auto;
}

#settingsTitle {
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 8px;
}

#darkRow {
  display: flex;
  align-items: center;
  justify-content: space-between;

  border: 1px solid var(--rule);
  padding: 8px 10px;
  margin: 0 0 8px;

  font-size: 13px;
  background: transparent;
}

#darkToggle {
  width: 18px;
  height: 18px;
}

#btnLogout,
#btnCloseSettings {
  width: 100%;
  height: 36px;
  margin-top: 8px;

  border: 1px solid var(--rule);
  background: transparent;
  color: var(--text);

  font-size: 13px;
}

#btnLogout {
  border-color: var(--accent);
  color: var(--accent);
}

#btnCloseSettings:active,
#btnLogout:active { background: var(--bg); }

#settingsHint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}


/* ======================================
   Bible Chapter View (simple inline flow)
====================================== */

.chapterText {
  font-size: 18px;
  line-height: 1.45;
}

.chapterP { margin: 0 0 10px; }
.chapterP:last-child { margin-bottom: 0; }

/* Keep verses INLINE so we do not break each verse */
.chapterText .v {
  display: inline;
  white-space: normal;
}

/* Verse numbers + superscript spacer */
.chapterText sup.vn,
.chapterText sup.vsp {
  font-size: 0.65em;
  vertical-align: super;
  line-height: 0;
  color: var(--muted);
}

/* Spacer controls the gap after the verse number */
.chapterText sup.vsp {
  margin-right: 0.06em; /* smaller = tighter; try 0.04–0.08 */
}

/* Defensive: if any verse HTML still contains <p>, don’t let it create breaks */
.chapterText .v p {
  display: inline;
  margin: 0;
  padding: 0;
}

/* Small readability: spacing between verses */
.chapterText .v + .v {
  margin-left: 0.18em;
}
.chapterText.layout-verse .verseLine {
  margin: 0 0 6px;
}

.sectionTitle {
  font-style: italic;
  font-weight: 400;
  text-align: center;

  margin: 16px 0 12px;
  padding: 4px 8px;

  opacity: 0.85;
}