/* Apple look and feel (Joseph, 2026-10-24): system blue instead of the dark pink, San Francisco type, light grey page with white rounded cards, a segmented tab control */
:root {
  --bg: #f5f5f7; --fg: #1d1d1f; --muted: #6e6e73; --line: rgba(60,60,67,.16);
  --accent: #0071e3; --hl: #d6e8fc; --card: #ffffff; --seg: rgba(118,118,128,.12); --seg-on: #ffffff;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --serif: "New York", ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #000000; --fg: #f5f5f7; --muted: #98989d; --line: rgba(235,235,245,.16); --accent: #0a84ff; --hl: #1c3b63; --card: #1c1c1e; --seg: rgba(118,118,128,.24); --seg-on: #636366; }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font: 17px/1.55 var(--serif); }

.bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; flex: none;
  padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); font: 14px var(--sans); }
.bar h1 { font-size: 16px; margin: 0 8px 0 0; color: var(--accent); }
.bar select { font-size: 14px; padding: 4px 6px; }

/* Split screen: verses on the left half, explanations on the right half. Each side scrolls on its own. */
.layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; }
#verses { overflow-anchor: none; overflow: auto; padding: 8px 24px 40px 16px; border-right: 1px solid var(--line); }
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  #verses { border-right: 0; border-bottom: 1px solid var(--line); }
}

.verse { padding: 12px 8px; border-bottom: 1px solid var(--line); border-radius: 4px; }
.verse.sel { background: color-mix(in srgb, var(--hl) 35%, transparent); }
.verse .num { color: var(--accent); font: bold 13px var(--sans); margin-right: 6px; cursor: pointer;
  background: none; border: 0; padding: 2px 4px; border-radius: 4px; }
.verse .num:hover { background: var(--hl); }
.line { margin: 4px 0; }
.vn { color: var(--accent); font: bold 13px var(--sans); margin: 0 6px 0 4px; }
.line.afr, .line.dsv { color: var(--muted); font-size: 15px; }
.line.orig { font-size: 21px; line-height: 1.8; }
.line.orig.rtl { direction: rtl; text-align: right; font-size: 24px; }
.tag { font: 11px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-right: 6px; }

.w { cursor: pointer; border-radius: 3px; }
.w:hover { background: var(--hl); }
.w.on { background: var(--hl); outline: 1px solid var(--accent); }

.keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { font: 13px var(--sans); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 2px 10px; cursor: pointer; color: var(--fg); }
.chip:hover, .chip.on { border-color: var(--accent); background: var(--hl); }
.chip .g { font-family: var(--serif); font-size: 15px; margin-right: 4px; }
.chip .d { color: var(--muted); }

#panel { display: flex; flex-direction: column; min-height: 0; background: var(--card); font: 15px/1.55 var(--sans); }
.tabs { display: flex; flex: none; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1 1 auto; min-width: 0; padding: 10px 4px; white-space: nowrap; background: none; border: 0; border-bottom: 3px solid transparent;
  font: 600 12.5px var(--sans); color: var(--muted); cursor: pointer; }
.tabs button:hover { color: var(--fg); }
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
#panel-title { flex: none; padding: 12px 20px 0; font-weight: 600; color: var(--accent); }
#panel-title:empty { display: none; }
#panel-body { flex: 1; min-height: 0; overflow: auto; padding: 8px 20px 40px; }
#panel .hint { color: var(--muted); margin: 12px 0; }
#panel h2 { margin: 8px 0 2px; font-size: 24px; font-family: var(--serif); }
#panel .sn { color: var(--accent); font-weight: 600; }
#panel dl { margin: 10px 0 0; }
#panel dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 8px; }
#panel dd { margin: 0; }

.grp { margin: 14px 0 6px; }
.grp > summary { cursor: pointer; font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); padding: 6px 0; }
.src { margin: 14px 0; border: 1px solid var(--line); border-radius: 8px; }
.src > summary { cursor: pointer; padding: 8px 12px; font-weight: 600; }
.src > summary .work { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.src .txt { padding: 0 14px 12px; font-family: var(--serif); font-size: 16px; }
.src .txt p { margin: 8px 0; }
.src .txt a, .src > summary a { color: var(--accent); font: 12px var(--sans); }

.point { margin: 12px 0; padding-left: 12px; border-left: 3px solid var(--accent); font-family: var(--serif); font-size: 16px; }
.point .by { font: 700 13px var(--sans); color: var(--accent); display: block; margin-bottom: 2px; }
#panel h3 { font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin: 20px 0 4px; }
.syn { font-family: var(--serif); font-size: 16.5px; margin: 8px 0; }
.fnref { color: var(--accent); cursor: pointer; font: 700 11px var(--sans); margin-left: 1px; padding: 0 1px; }
.fnref:hover { background: var(--hl); }
.fnref + .fnref::before { content: ","; color: var(--muted); }
.footnotes { font: 13px/1.5 var(--sans); color: var(--muted); padding-left: 22px; }
.footnotes li { margin: 4px 0; }
.footnotes a { color: var(--accent); }
.xlist { font: 16px/1.8 var(--serif); margin: 12px 0; }
.src .txt p.comm { font-size: 16.5px; margin: 8px 0 10px; }
.exc { margin-top: 6px; }
.exc > summary { cursor: pointer; font: 12px var(--sans); color: var(--muted); }
.exc > div { color: var(--muted); font-size: 14px; }
.err { color: var(--accent); padding: 24px 0; }

/* Exegesis tab: 3-letter source codes with a hover reference */
.cites { color: var(--muted); font: 12px var(--sans); }
abbr.cc { text-decoration: none; border-bottom: 1px dotted var(--accent); color: var(--accent); font-weight: 700; cursor: default; letter-spacing: .02em; }
abbr.cc.link { cursor: pointer; }
abbr.cc:hover { background: var(--hl); }
.exw { margin: 10px 0 12px; padding-left: 10px; border-left: 3px solid var(--line); }
.exh { margin: 0 0 3px; }
.exg, .exn { margin: 2px 0; font-size: 14px; line-height: 1.45; }
.exn { color: var(--muted); }
.exq { margin: 16px 0; }
.exq h3 { font-size: 14px; margin: 0 0 4px; }
.exo { margin: 4px 0 0; padding-left: 22px; font-size: 14px; line-height: 1.5; }
.exo li { margin: 4px 0; }

/* fuller dictionary entries in the word panel */
.lexmore h3 { margin: 14px 0 6px; }
details.lex { border: 1px solid var(--line, #ddd); border-radius: 6px; margin: 6px 0; padding: 4px 8px; }
details.lex summary { cursor: pointer; font-weight: 600; }
.lextext { white-space: pre-wrap; font-size: 0.92em; line-height: 1.45; margin-top: 6px; }

.reftip { position: fixed; z-index: 50; max-width: 420px; padding: 8px 10px; background: var(--bg, #fff); color: var(--fg, #222); border: 1px solid var(--accent); border-radius: 6px; font: 13px/1.4 var(--sans); box-shadow: 0 4px 14px rgba(0,0,0,.2); pointer-events: none; }

.parse { margin: 0 0 12px; padding: 8px 10px; background: color-mix(in srgb, var(--hl) 35%, transparent); border-left: 3px solid var(--accent); border-radius: 4px; font: 14px/1.4 var(--sans); }
.parse-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-right: 8px; }
.parse-text { font-weight: 600; }

.exgrp { margin: 12px 0 6px; }
.exgrp > summary { cursor: pointer; font: 700 14px var(--sans); color: var(--accent); padding: 6px 0; }


.chap-title { font: 700 20px var(--sans); color: var(--accent); margin: 30px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.chap:first-child .chap-title { border-top: 0; margin-top: 8px; }

.kn { font-size: .68em; color: var(--muted); font-style: italic; margin: 0 2px; }

/* the Bibles list (top bar): ticks and order */
.bibles { position: relative; }
#bibles-btn { font: 14px var(--sans); padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg); cursor: pointer; }
#bibles-panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 380px; max-width: 92vw; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
#bibles-panel[hidden] { display: none; }
.bhint { margin: 0 0 8px; font: 12px var(--sans); color: var(--muted); }
.brow { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.bchk { flex: none; width: 22px; height: 22px; border: 1.5px solid var(--muted); border-radius: 4px; background: none; color: var(--accent); font: 700 15px/1 var(--sans); cursor: pointer; padding: 0; }
.bchk.on { border-color: var(--accent); }
.bname { flex: 1; text-align: left; background: none; border: 0; color: var(--fg); font: 14px var(--sans); cursor: pointer; padding: 3px 2px; }
.bmove { flex: none; width: 26px; height: 24px; border: 1px solid var(--line); border-radius: 4px; background: none; color: var(--muted); font-size: 10px; cursor: pointer; }
.bmove:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.bmove:disabled { opacity: .3; cursor: default; }
.line.grk { font-size: 19px; line-height: 1.7; }

/* pop-up over a Greek / Hebrew word */
.wordtip { position: fixed; z-index: 50; max-width: 360px; padding: 8px 11px; background: var(--card); color: var(--fg); border: 1px solid var(--accent); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.2); font: 13px/1.45 var(--sans); pointer-events: none; }
.wt-head { display: flex; align-items: baseline; gap: 10px; }
.wt-lemma { font: 18px var(--serif); color: var(--accent); }
.wt-id { color: var(--muted); font-size: 12px; }
.wt-parse { margin-top: 3px; font-weight: 600; }
.wt-mean { margin-top: 3px; color: var(--muted); }
.line.orig .w:hover { background: var(--hl); border-radius: 3px; }

/* sizes of the Bible lines (Joseph, 2026-10-24): the first line of each verse 17px, every other line 15px, for all the Bibles; the Hebrew is always 17px */
.verse .line, .verse .line.orig, .verse .line.grk { font-size: 15px; line-height: 1.6; }
.verse > .line:first-child, .verse > .line.orig:first-child, .verse > .line.grk:first-child { font-size: 17px; color: var(--fg); }
.verse .line.orig.rtl, .verse > .line.orig.rtl:first-child { font-size: 17px; line-height: 1.8; }

/* the version's three-letter abbreviation in a column at the left of every line */
.verse .line { position: relative; padding-left: 44px; }
.verse .line > .tag { position: absolute; left: 0; top: .55em; width: 38px; margin: 0; font-size: 11px; font-weight: 600; text-align: left; }

.line.lxx .lw:hover { background: var(--hl); border-radius: 3px; }
.lw { cursor: pointer; border-radius: 3px; }
.lw.on { background: var(--hl); outline: 1px solid var(--accent); }

.bar-link { margin-left: auto; font: 13px var(--sans); color: var(--muted); text-decoration: none; }
.bar-link:hover { color: var(--accent); text-decoration: underline; }

/* books and chapters that are not built yet: grey in the lists */
option.unbuilt { color: #a1a1a6; }
@media (prefers-color-scheme: dark) { option.unbuilt { color: #636366; } }


/* ---- Apple look: structure ---- */
html { -webkit-font-smoothing: antialiased; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
* { scrollbar-width: thin; scrollbar-color: rgba(128,128,128,.4) transparent; }

.bar { position: relative; z-index: 10; gap: 8px 12px; padding: 10px 16px; background: color-mix(in srgb, var(--card) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.bar h1 { font: 600 17px var(--sans); letter-spacing: -.01em; color: var(--fg); margin: 0 10px 0 0; }
.bar select, #bibles-btn { font: 14px var(--sans); color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; }
.bar select:hover, #bibles-btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
#bibles-btn { cursor: pointer; }

.layout { gap: 12px; padding: 12px; background: var(--bg); }
#verses, #panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); overflow: hidden; }
#verses { overflow: auto; border-right: 1px solid var(--line); padding: 8px 20px 40px 14px; }
@media (max-width: 860px) { #verses { border-bottom: 1px solid var(--line); } }

.verse { border-bottom: 1px solid var(--line); border-radius: 10px; }
.verse.sel { background: color-mix(in srgb, var(--accent) 10%, transparent); border-bottom-color: transparent; }
.verse .num:hover, .fnref:hover, abbr.cc:hover { background: var(--hl); }
.w:hover, .lw:hover, .line.orig .w:hover, .line.lxx .lw:hover { background: var(--hl); }
.w.on, .lw.on { background: var(--hl); outline: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.chap-title { font: 700 26px var(--sans); letter-spacing: -.02em; color: var(--fg); border-top: 0; margin: 28px 0 6px; padding-top: 6px; }

/* the tabs as a segmented control */
.tabs { margin: 12px 14px 6px; padding: 2px; gap: 2px; background: var(--seg); border: 0; border-radius: 9px; }
.tabs button { padding: 6px 4px; border: 0; border-radius: 7px; font: 500 12.5px var(--sans); color: var(--fg); background: none; }
.tabs button:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.tabs button.active { background: var(--seg-on); color: var(--fg); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 0 0 .5px rgba(0,0,0,.04); }
#panel-title { color: var(--fg); }
#panel h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; }
#panel .sn { color: var(--accent); }

/* section headings in grey capitals, like Apple's grouped lists */
.grp > summary, #panel h3 { color: var(--muted); letter-spacing: .05em; }
.exgrp > summary { color: var(--fg); }
.src { background: color-mix(in srgb, var(--bg) 70%, var(--card)); border: 1px solid var(--line); border-radius: 12px; }
.src > summary { padding: 10px 14px; }
details.lex { background: color-mix(in srgb, var(--bg) 70%, var(--card)); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; }
.point, .exw { border-left-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.parse { background: color-mix(in srgb, var(--accent) 9%, transparent); border-left: 0; border-radius: 10px; padding: 9px 12px; }

/* pop-ups and the Bibles list */
.reftip, .wordtip { background: color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.22); }
.wt-lemma { color: var(--accent); }
#bibles-panel { border-radius: 14px; background: color-mix(in srgb, var(--card) 92%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0,0,0,.24); padding: 12px; }
.bchk { border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--muted) 70%, transparent); color: #fff; font-size: 13px; }
.bchk.on { background: var(--accent); border-color: var(--accent); }
.bmove { border-radius: 7px; }
.bar-link { color: var(--accent); }
.bar-link:hover { text-decoration: underline; }
.err { color: #ff3b30; }

/* phones (Joseph, 2026-10-24): smaller Book / Chapter / Verse lists so that they fit on one line at the top, with the Bibles button */
@media (max-width: 600px) {
  .bar { gap: 6px; padding: 8px 10px; }
  .bar h1 { display: block; flex: none; margin: 0; font: 600 11.5px var(--sans); letter-spacing: -.01em; white-space: nowrap; }
  .bar select, #bibles-btn { font-size: 12.5px; padding: 3px 4px; border-radius: 7px; }
  #book { flex: 1 1 0; width: auto; min-width: 72px; max-width: 120px; }
  #chapter, #verse { width: 46px; }
  #bibles-panel { width: 92vw; }
  .bar-link { font-size: 12px; }
  .tabs button { font-size: 11px; padding: 6px 2px; }
}

/* "Sources & licences" at the bottom of the page, 8px from the edge (Joseph, 2026-10-24) */
.foot { flex: none; text-align: center; padding: 0 0 8px; font: 11px var(--sans); }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--accent); text-decoration: underline; }

/* the app name in blue (Joseph, 2026-10-24) */
.bar h1 { color: var(--accent); }

/* the app name at the far right of the top bar, right aligned (Joseph, 2026-10-24) */
.bar h1 { order: 99; margin: 0 0 0 auto; text-align: right; }

/* chapter title size (Joseph, 2026-10-24) */
.chap-title { font-size: 20px; }

/* the drawn Book / Chapter / Verse list */
.csmenu { position: fixed; z-index: 40; overflow: auto; padding: 5px; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0,0,0,.24);
  background: color-mix(in srgb, var(--card) 94%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); font: 14px var(--sans); }
.csitem { display: flex; align-items: center; gap: 4px; padding: 5px 12px 5px 6px; border-radius: 7px; cursor: pointer; white-space: nowrap; color: var(--fg); }
.csitem .cscheck { width: 16px; flex: none; text-align: center; color: var(--accent); font-weight: 700; }
.csitem:hover { background: var(--accent); color: #fff; }
.csitem:hover .cscheck { color: #fff; }
.csitem.unbuilt { color: #a1a1a6; }
.csitem.unbuilt:hover { color: #fff; opacity: .85; }
@media (prefers-color-scheme: dark) { .csitem.unbuilt { color: #6e6e73; } }

/* the top Bible version of each verse in full colour, every other version of the same verse in grey (Joseph, 2026-10-24) */
.verse > .line { color: var(--muted); }
.verse > .line:first-child, .verse > .line.orig:first-child, .verse > .line.grk:first-child, .verse > .line.afr:first-child, .verse > .line.dsv:first-child { color: var(--fg); }

/* phones: the Bibles list is as wide as the screen (8px from both edges), so it can never be cut off (Joseph, 2026-10-24) */
@media (max-width: 600px) {
  .bibles { position: static; }
  #bibles-panel { left: 8px !important; right: 8px; width: auto; max-width: none; top: calc(100% + 6px); }
}

/* top bar (Joseph, 2026-10-24): the name at the left, left aligned; Book, Chapter, Verse and Bibles at the right, right aligned; the three lists keep the same size whatever is chosen */
.bar h1 { order: -1; margin: 0 auto 0 0; text-align: left; }
#book { width: 160px; }
#chapter, #verse { width: 64px; }
@media (max-width: 600px) {
  #book { flex: 1 1 0; width: auto; min-width: 72px; max-width: 120px; }
  #chapter, #verse { width: 46px; }
}

/* the panel tabs as separate pills (Joseph, 2026-10-24): the open one filled with blue */
.tabs { flex-wrap: wrap; gap: 6px; padding: 0; margin: 12px 14px 6px; background: none; border-radius: 0; }
.tabs button { flex: 0 1 auto; padding: 5px 13px; border-radius: 999px; background: var(--seg); color: var(--fg); font: 500 12.5px var(--sans); box-shadow: none; }
.tabs button:hover { background: color-mix(in srgb, var(--fg) 14%, transparent); }
.tabs button.active { background: var(--accent); color: #fff; font-weight: 600; box-shadow: none; }
@media (max-width: 600px) { .tabs { gap: 5px; margin: 10px 10px 4px; } .tabs button { padding: 4px 10px; font-size: 12px; } }

/* phones: smaller pills so that all six stay on one line at the top of the panel (Joseph, 2026-10-24) */
@media (max-width: 600px) {
  .layout { padding: 6px; gap: 6px; }
  .tabs { flex-wrap: nowrap; gap: 3px; margin: 8px 6px 4px; }
  .tabs button { flex: 1 1 auto; min-width: 0; padding: 4px 4px; white-space: nowrap; font-size: clamp(9px, 2.6vw, 12px); }
}

/* computer: the six pills always stay on one line; their text shrinks with the width of the panel (Joseph, 2026-10-24) */
#panel { container-type: inline-size; }
@media (min-width: 601px) {
  .tabs { flex-wrap: nowrap; gap: 4px; }
  .tabs button { flex: 1 1 auto; min-width: 0; padding: 5px 7px; white-space: nowrap; font-size: clamp(9px, calc((100cqw - 132px) / 28), 12.5px); }
}

/* the pills resize with the screen down to a minimum text size (9px); below that they keep that size and the row scrolls sideways instead of clipping (Joseph, 2026-10-24) */
.tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 1 0 auto; min-width: auto; }
@media (min-width: 601px) { .tabs button { font-size: clamp(9px, calc((100cqw - 175px) / 28), 12.5px); } }
@media (max-width: 600px) { .tabs button { font-size: clamp(9px, calc((100cqw - 112px) / 28), 12px); } }

.foot .dot { margin: 0 8px; color: var(--muted); }

/* the Bible text and the commentary text use the same type as the pill titles: the system sans-serif (San Francisco on Apple devices) (Joseph, 2026-10-24) */
:root { --serif: var(--sans); }
body { font-family: var(--sans); }

/* the space around and between the Bible window and the panel window is blue (Joseph, 2026-10-24) */
.layout { background: var(--accent); }

/* softer: the space around and between the two windows is grey, and the windows (and the Bibles list) have rounder corners (Joseph, 2026-10-24) */
:root { --gap: #d1d1d6; }
@media (prefers-color-scheme: dark) { :root { --gap: #3a3a3c; } }
.layout { background: var(--gap); }
#verses, #panel { border-radius: 20px; isolation: isolate; }
#bibles-panel { border-radius: 20px; }

/* the scroll bar of the Bible window sits inside the window; its ends stop short of the rounded corners (Joseph, 2026-10-24) */
#verses { scrollbar-width: auto; scrollbar-color: auto; }
#verses::-webkit-scrollbar { width: 14px; }
#verses::-webkit-scrollbar-track { background: transparent; margin: 20px 0; }
#verses::-webkit-scrollbar-thumb { background: rgba(128,128,128,.5); border-radius: 8px; border: 4px solid transparent; background-clip: padding-box; }
#verses::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,.8); background-clip: padding-box; }
@supports not selector(::-webkit-scrollbar) { #verses { scrollbar-width: thin; scrollbar-color: rgba(128,128,128,.5) transparent; } }

/* smaller Bible text and less space around each verse (Joseph, 2026-10-24): first line 15px, other lines 13px, Hebrew 15px */
.verse .line, .verse .line.orig, .verse .line.grk { font-size: 13px; line-height: 1.45; margin: 2px 0; }
.verse > .line:first-child, .verse > .line.orig:first-child, .verse > .line.grk:first-child { font-size: 15px; }
.verse .line.orig.rtl, .verse > .line.orig.rtl:first-child { font-size: 15px; line-height: 1.7; }
.verse { padding: 6px 8px; }
.verse .num, .vn { font-size: 11.5px; }
.verse .line { padding-left: 40px; }
.verse .line > .tag { width: 34px; font-size: 10px; top: .45em; }