.sn 
{
  color: green;
  vertical-align: super;
}

.snhl
{
  color: white;
  background-color: magenta;
  vertical-align: super;
}

.rmac 
{ 
  color: blue; 
  vertical-align: super;
}

/* Keeps a character and the mark that qualifies it on one line. The pastoral
   letter has asked for this class since it was written -- "[雅伟]" and "主*"
   both use it -- but nothing ever defined it, so both could break in two. */
.no-break
{
  white-space: nowrap;
}

/* The mark on 主 that says which Lord is meant. An asterisk at body size is
   a speck beside a Chinese character -- the reader's eye goes straight past
   the one thing the mark exists to stop it going past -- so it is set large.
   line-height: 0 keeps the taller glyph from pushing the line apart.

   !important on colour and size: while chasing 「can we make the ^ more
   obvious?」 (2026-09-23) this class appeared to be losing to something
   else entirely -- but the only tool available to look was rendering the
   page with bible.css itself blocked from loading (net::ERR_BLOCKED_BY_
   CLIENT in that tool's own network layer, confirmed after the fact),
   so that reading cannot be trusted and no real conflicting rule was ever
   found. Left here anyway: it costs nothing and only ever makes this mark
   win a fight it might not have needed to. */
.kurios 
{
  color: var(--link) !important;
  font-size: 1.5em !important;
  line-height: 0;
}

.kurios2 
{
  color: var(--link) !important;
  font-size: 1.2em !important;
  line-height: 0;
  vertical-align: super;
}

.note 
{ 
  color: #808080; 
  vertical-align: super;
}

.supplied 
{ 
  color: #808080; 
  font-style: italic; 
}

.hg0  
{ 
  color: #808080; 
  vertical-align: super;
}

.hg0word  
{ 
  color: #808080; 
}


/* The Septuagint's own chapter-and-verse reference, where its numbering
   differs from the one the rest of the page is using. An editorial note about
   where the reader is, not part of the verse. */
.lxxref
{
  color: #808080;
  font-size: 0.85em;
}


/* BSB(Yahweh). Three kinds of editorial addition, all of them the editor's
   voice rather than the translation's, so all of them set apart from the text
   the way the Chinese edition sets apart 主* and 主#.

   .yhwh-mark  the Greek reads kurios, not YHWH; [Yahweh] says which one the
               editor judges is meant, exactly as 主[雅伟] does.
   .tnote      an inline aside on the word just before it -- "(not in the
               Hebrew)", "(Yahweh in Hebrew)".
   .fnref/.fnote  a numbered footnote, kept out of the sentence because its
               text repeats the word it hangs on ("Hallelujah ... is literally
               'Praise to Yah'") and reads as a stutter inline. */
/* 主^ / Lord^ -- what the data writes 主[雅伟] / Lord [Yahweh], shown as
   the third mark beside * and # (2026-09-22). Bigger than .kurios2 (#):
   a caret is a thin stroke where * and # are solid glyphs, and at the same
   size it read as barely there (Peter, 2026-09-23: 「can we make the ^ more
   obvious?」). !important for the same unconfirmed reason .kurios has it
   just above -- see that comment. */
.yhwh-mark,
.yhwh-zh
{
  color: var(--link) !important;
  font-weight: 700;
  /* Same size as .kurios (*), not bigger, and no vertical-align: super --
     that lifted it clear of 主's baseline and, combined with the caret
     glyph's own side-bearing, read as a separate mark floating above the
     line with a gap in front of it, not one unit with 主 the way * is
     (Peter, on a real phone screenshot, 2026-09-24: 「这个^是不是看起来
     奇怪」). */
  font-size: 1.5em !important;
  line-height: 0;
}

.tnote
{
  color: #808080;
  font-style: italic;
  font-size: 90%;
}

.fnref
{
  color: #808080;
  vertical-align: super;
  font-size: 75%;
}

.fnote
{
  display: block;
  color: #808080;
  font-size: 85%;
  margin-top: .25em;
}


/* ASV(Yahweh). Two things the 1901 edition puts on the page that the other
   versions here do not, both kept from the module rather than scrubbed.

   .cite      the psalm superscription ("A Psalm of David"), which the ASV
              sets above the verse; on one line per verse it reads as an
              editorial line, so it is set apart rather than run in. */
.cite
{
  display: block;
  color: #808080;
  font-style: italic;
  font-size: 90%;
}

/* 并排对照 / 上下排列, 译者注, 原文编号 — the three switches, above the table.
   They were floated into the last column's <th>, which in 对照 is the
   rightmost of seven columns inside a sideways-scrolling box: the switch that
   leaves 对照 sat past the right edge of the window, with nothing on screen
   to say it was there. Above the table they are in the same place in both
   layouts, and neither mode can hide the way out of itself. */
.bible-switches
{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem;
  margin-bottom: .5rem;
}

/* 对照: give every column room for a line of text rather than letting the
   table squeeze the Chinese into four characters a line and grow a thousand
   pixels tall. min-width on an auto-layout table widens the table itself,
   and the box around it scrolls -- which is the trade this mode is for:
   read across, push the columns along. */
#bible-table.side-by-side th,
#bible-table.side-by-side td
{
  min-width: 14rem;
}

#bible-table.side-by-side th.col-verse,
#bible-table.side-by-side td.col-verse
{
  min-width: 2.5rem;
  width: 2.5rem;
}

/* 原文释义 — the shelf along the bottom. See js/bible.js for why it replaced
   a modal: a modal holds one definition, and the two words a reader is
   comparing then never share a screen. */
#sn-shelf
{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;                 /* over the page, under Bootstrap's modal */
  background: var(--surface-2);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
  max-height: 45vh;              /* the scripture above it keeps its room */
  overflow-y: auto;
}

.sn-shelf-head
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .4rem 1rem .2rem;
  position: sticky;              /* stays put while the cards scroll under it */
  top: 0;
  background: var(--surface-2);
}

.sn-shelf-title
{
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ink-faint);
}

.sn-card
{
  padding: .5rem 1rem .8rem;
  border-top: 1px solid var(--rule-soft);
}

.sn-card:first-child
{
  border-top: 0;
}

.sn-card-head
{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

/* 复制 and the close, as one group at the end of the head: the number is
   what the reader came for and reads first. */
.sn-card-tools
{
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex: none;
}

.sn-card-copy
{
  font-size: .8rem;
  color: var(--ink-faint);
}

.sn-card-copy:hover
{
  color: var(--ink-soft);
  text-decoration: none;
}

.sn-card-close
{
  font-size: 1.3rem;
  line-height: 1;
  padding: 0 .3rem;
  color: var(--ink-faint);
}

.sn-card-close:hover
{
  color: var(--ink-soft);
  text-decoration: none;
}

.sn-card pre
{
  margin: .3rem 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* How far the page starts below the fixed navbar.

   common.css says 5rem, which is a guess at the bar's height; it is taller
   than that whenever its controls wrap, and then the top of the chapter
   title sits behind it. The layout measures the bar and writes the real
   number into this property; 5rem stays as the value before that runs (and
   if it never does). `.anchor-offset` uses the same number so that jumping
   to a verse still leaves it clear of the bar. */
:root
{
  --navbar-height: 5rem;
  --toolbar-height: 0px;
}

body
{
  padding-top: var(--navbar-height);
}

/* Where a link to a verse should stop.
   
   `scroll-margin-top` rather than `padding-top`: padding pushed the verse
   number down inside its own cell to fake the offset, which is a layout
   change standing in for a scrolling instruction. And the old number only
   counted the navbar — the reading strip is sticky under it, so a verse
   jumped to landed behind the strip. Both, plus a little air. */
.anchor-offset
{
  padding-top: 0;
  scroll-margin-top: calc(var(--navbar-height) + var(--toolbar-height, 0px) + .75rem);
}

/* ---------------------------------------------------------------- 读经页面
   The reading page's own chrome: a toolbar under the site nav, a title, and
   the switches. Written here rather than in common.css because this file is
   served from this origin (common.css goes through the CDN mirror, which is
   a deploy behind), and because it is the reading page that needs it.

   The shape is the one a reading app has settled into: site nav, then a
   strip for "where am I and where am I going", then the text. What was here
   before put the second row inside the first, and at most window widths
   Bootstrap answered by breaking 圣经 into two stacked characters. */

.page-toolbar
{
  position: sticky;
  top: var(--navbar-height);
  z-index: 1020;                 /* under the fixed navbar, over the text */
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}

.reader-bar
{
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 0;
  flex-wrap: wrap;
}

.reader-bar-where
{
  display: flex;
  gap: .4rem;
  min-width: 0;
}

/* Wide enough for the longest book name set in Chinese, so the name is never
   clipped to 「马太福」 the way it was in the navbar. */
.reader-select
{
  width: auto;
  min-width: 8.5rem;
  height: calc(1.5em + .75rem + 2px);
}

.reader-select-chap
{
  min-width: 6.5rem;
}

.reader-bar-steps
{
  display: flex;
  align-items: center;
  gap: .1rem;
}

/* 44px. Anything a thumb aims at is 44 square or bigger -- WCAG 2.2 asks
   for 24 as a floor and every platform's own guidance says 44. These were
   36. */
.reader-step
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 1.15rem;
  text-decoration: none;
}

.reader-step:hover
{
  background: var(--rule-soft);
  color: var(--ink);
  text-decoration: none;
}

.reader-step.disabled
{
  color: var(--rule);
  pointer-events: none;
}

.reader-bar-search
{
  position: relative;
  margin-left: auto;             /* the one thing that belongs at the far end */
  flex: 0 1 22rem;
  min-width: 11rem;
}

.reader-search
{
  padding-left: 2.1rem;
}

.reader-search-icon
{
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
}

/* The title. It sat directly under the bar with nothing above it, which read
   as the page starting halfway through. A line of air above it, and the
   chapter set with the book instead of floated to the other side of the
   width: one title, the way a reader says it. */
.reader-head
{
  padding: 1.75rem 0 .75rem;
}

.reader-title
{
  margin: 0;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--ink);
}

.reader-chap
{
  margin-left: .6rem;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* The switches: quiet until wanted. They were three bright blue links, which
   in a page of black text read as the loudest thing on it. */
.bible-switches a
{
  color: var(--ink-soft);
  font-size: .875rem;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}

.bible-switches a:hover
{
  color: var(--ink);
  border-bottom-color: var(--ink-faint);
  text-decoration: none;
}

/* The chapter itself: a reading measure, a quiet version label, and hairlines
   instead of Bootstrap's grey rules. */
#bible-table
{
  margin-top: .25rem;
}

#bible-table thead th
{
  border-top: 0;
  border-bottom: 1px solid var(--rule);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-faint);
  text-transform: none;
  padding-bottom: .5rem;
}

/* No rule between the VERSIONS of one verse. With eight on, a line under
   every row made the chapter a grid of equal boxes, and the one boundary a
   reader is actually looking for -- where this verse ends -- looked like all
   the others. Paul, 2026-09-14: 「在多个 verse by verse 的时候多个经文 我发现
   很难知道是第几节因为太多了 能不能两节之间分开 类似于 横杆 但是设计不能难
   看」. The rule moves to `tr.verse-start`, below. */
#bible-table td
{
  border-top: 0;
  padding: .7rem .75rem;
  /* 1.7-1.8 is the CJK range: denser glyphs need more air between lines
     than Latin, and past 1.8 the lines stop reading as a paragraph. */
  line-height: 1.8;
}

/* The seam: one hairline where a verse starts, with a little more air over
   it than the lines inside the verse have. Space is what makes a hairline
   legible -- a darker line would read as a table again. Never above the
   first verse: a chapter should not open with a rule drawn across it. */
#bible-table tbody tr.verse-start td
{
  border-top: 1px solid var(--rule);
  padding-top: 1.15rem;
}

#bible-table tbody tr:first-child td
{
  border-top: 0;
}

/* The version name beside a verse is a label, not a heading: it says which
   voice this is and then gets out of the way. */
#bible-table td.font-weight-bold
{
  font-weight: 500 !important;
  color: var(--ink-faint);
  font-size: .9rem;
}

/* The verse number: small, grey, and never the thing the eye lands on.

   Keyed to the class, not to `td:first-child`. In the stacked layout the
   verse number is a rowspan cell, so the first cell of every row after the
   first one is the VERSION NAME -- which a `:first-child` rule quietly set
   in grey and pushed to the right. */
#bible-table tbody td.col-verse
{
  color: var(--ink-faint);
  font-size: .85rem;
  text-align: right;
  padding-right: .5rem;
}

@media (max-width: 575.98px)
{
  .reader-bar-search
  {
    flex-basis: 100%;
    margin-left: 0;
  }

  .reader-title
  {
    font-size: 1.5rem;
  }

  .reader-head
  {
    padding-top: 1.25rem;
  }
}

/* A section label is one word and must stay on one line: 圣经 broken into
   two stacked characters is the single ugliest thing the old header did. */
.navbar-nav .nav-link
{
  white-space: nowrap;
}

/* How wide a line of scripture is allowed to get.
   
   **Forty Chinese characters.** That is the accessibility limit for CJK text
   -- a line of 40 Chinese characters carries about as much as 80 Latin ones,
   which is where the Latin 50-75 rule lands -- and this app's own reader has
   used 38 since it was written. The scripture cell is 80% of the table, so
   56rem of table is 717px of text, which at 18px is exactly 40 characters.
   
   At 1440px this used to be ~900px of verse: sixty-odd characters, about
   twice what the eye tracks without losing its place on the return sweep.
   对照 is exempt -- its trade is the opposite one, and its columns are
   measured separately. */
.reader-measure
{
  max-width: 56rem;
}

/* Scripture is set in a serif, the chrome around it stays in the UI face.
   The stack names what the reader's own machine is likely to have -- Noto
   and Source Han where they are installed, then macOS's Songti and Windows'
   SimSun -- and ends in the generic, so a machine with none of them still
   gets a serif rather than falling back to the sans this page is set in. */
#bible-table tbody td
{
  font-family: "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC",
               "SimSun", Georgia, "Times New Roman", serif;
  /* 18px. CJK wants a larger base than Latin -- the glyphs carry more
     strokes in the same em -- and 18 is what this app's reader has always
     set scripture at. The site was at 16.3. */
  font-size: 1.125rem;
  color: var(--ink);
}

/* Not the labels around it: the version name and the verse number are
   apparatus, and they stay in the interface face. */
#bible-table tbody td.col-verse,
#bible-table tbody td.font-weight-bold
{
  font-family: inherit;
}

/* WH, SBLGNT, the Septuagint: the CJK-serif stack above has no real Greek
   in it, so the browser falls through it glyph by glyph to whichever font
   at the end of that chain happens to carry Greek -- usually Times New
   Roman, whose polytonic accents were never designed to sit over a serif
   x-height and read as crowded, uneven spacing (Peter's screenshot,
   2026-09-22: 「change to another Greek font, see what Peter is using in
   the existing web that one looks nice」). The production site sets no
   font at all for scripture, so its Greek renders in the page's own UI
   font -- --font-family-sans-serif, app.css -- which is what "looks nice"
   names. Matching it exactly, rather than picking a font of our own. */
#bible-table tbody td[data-code="WH"],
#bible-table tbody td[data-code="SBLGNT"],
#bible-table tbody td[data-code="LXX"]
{
  font-family: var(--font-family-sans-serif);
}

/* On a phone the bar is two rows, not three: the book picker already moves
   between books, so the two double-arrows that do the same thing step aside,
   and the chapter arrows ride along with the pickers. A sticky bar is paid
   for out of the reading area every screenful, so it is kept short. */
@media (max-width: 575.98px)
{
  .reader-step-book
  {
    display: none;
  }

  /* Basis 0 here too: this is itself a flex container, and `auto` would
     measure it at the sum of its selects' intrinsic widths -- which is the
     whole row before the arrows are even considered. */
  .reader-bar-where
  {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Basis 0, not auto: a <select> sized to its widest option (「帖撒罗尼迦
     后书」) took the whole row on its own, so the chapter arrows had nowhere
     to go but the next line. From zero it takes what is left after the
     arrows have theirs. */
  .reader-select
  {
    min-width: 0;
    flex: 1 1 0;
  }

  /* The three pickers do not want equal shares. 「节」 is one character and
     「第 28 章」 is a fixed four, while the book is four (马太福音) or seven
     (帖撒罗尼迦后书) -- and with basis 0 on all three, 「节」 was given
     exactly as much room as the book name, so the book read 「马太」. Paul,
     2026-09-14, with a red circle round it. The book now takes what the
     other two do not need, the caret sits closer in, and a name too long
     even for that ends in an ellipsis rather than mid-character. */
  .reader-select-chap
  {
    min-width: 0;
    /* 「第 119 章」 is the longest this ever says, and it is measured, not
       guessed: 65px of text plus the padding either side. */
    flex: 0 0 6rem;
  }

  .reader-select-verse
  {
    min-width: 0;
    /* 「节」, or 176 at the longest. */
    flex: 0 0 3.25rem;
  }

  .reader-select
  {
    /* A hair smaller and with the caret pulled in, which is the difference
       between 哥林多前书 fitting and not. The box keeps its height: it is
       still something a thumb has to hit. */
    font-size: .95rem;
    min-height: 38px;
    padding-left: .45rem;
    padding-right: 1rem;
    background-position: right .25rem center;
    text-overflow: ellipsis;
  }
}

/* ------------------------------------------------------- 手机上的菜单
   Collapsed, the site nav was a bare Bootstrap list: ten links a finger
   apart down a grey gradient, no rules, no grouping, the page shoved off
   the bottom of the screen. Paul, 2026-09-14: 「这也太难看了」.

   It is now a sheet: white, hairlined, rows at a thumb's height rather than
   a hand's, the disclosure caret at the right edge where a phone menu puts
   it, each submenu opening inside the row it belongs to, and the page's own
   menus (版本 · 帮助 · 语言) separated from the site's six sections. */
@media (max-width: 991.98px)
{
  .navbar .navbar-collapse
  {
    margin: .25rem -15px 0;      /* full-bleed inside .container */
    background: var(--surface-2);
    border-top: 1px solid var(--rule);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .06);
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
  }

  .navbar .navbar-collapse .nav-link
  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem 1.1rem;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 1rem;
    color: var(--ink);
  }

  .navbar .navbar-collapse .nav-item.active > .nav-link
  {
    color: var(--gold);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--gold);   /* the gold the app uses */
  }

  /* A submenu belongs to the row above it: indented, on a tint, and without
     the floating-card border it wears on a desktop. */
  .navbar .navbar-collapse .dropdown-menu
  {
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: .15rem 0 .35rem;
    background: var(--surface);
    box-shadow: none;
  }

  .navbar .navbar-collapse .dropdown-item
  {
    padding: .55rem 1.1rem .55rem 2rem;
    font-size: .95rem;
    color: var(--ink-soft);
    white-space: normal;
  }

  .navbar .navbar-collapse .dropdown-header
  {
    padding: .5rem 1.1rem .2rem 2rem;
    font-size: .75rem;
    letter-spacing: .05em;
    color: var(--ink-faint);
  }

  /* The page's own menus are not the site's sections. */
  .navbar .navbar-collapse .navbar-nav + .navbar-nav
  {
    border-top: 7px solid var(--rule-soft);
  }

  .navbar .navbar-collapse .navbar-nav:last-child .nav-link:last-child,
  .navbar .navbar-collapse .navbar-nav:last-child > .nav-item:last-child > .nav-link
  {
    border-bottom: 0;
  }
}

/* The copyright line stops standing on top of the text.

   It was `position: fixed`, so on a phone it held 40 of ~700 usable pixels
   for one line of small print, and the last verse on the screen ran under
   it. A footer belongs at the end of the document. */
.footer
{
  position: static;
  height: auto;
  padding: .9rem 1rem 1.1rem;
  border-top: 1px solid var(--rule);
}

body
{
  margin-bottom: 0;
}

/* ------------------------------------------------- 手机上的一章
   A three-column table on a 390pt phone leaves the scripture about half the
   width, and the rest scrolls off the side. So on a phone the chapter stops
   being a table and becomes what the app makes of it: the verse number, then
   each version labelled above its own line of text, full width.

   Both layouts. 对照 is a wide-screen idea — the same rule the app settled
   on (「手机是上下，但是如果宽度大于某个位置，就自动变成左右」) — so on a
   phone its columns become blocks too, each labelled from `data-version`. */
@media (max-width: 599.98px)
{
  #bible-table thead
  {
    display: none;
  }

  #bible-table,
  #bible-table tbody,
  #bible-table tr,
  #bible-table td
  {
    display: block;
    width: auto;
  }

  #bible-table tr
  {
    padding-bottom: .4rem;
  }

  /* Blocks, not table rows, so the seam is a border on the row itself --
     `td` borders are off here. Same rule as the wide layout: between
     verses, and not above the first. */
  #bible-table tbody tr.verse-start
  {
    border-top: 1px solid var(--rule);
    padding-top: .35rem;
  }

  /* And the wide layout's seam has to come back off the cells. It is set on
     every `td` of the row, which in a table is one line across; here the
     cells are stacked blocks, so it drew a line over the verse number, then
     another over the version name, then another over the text -- 「这对线
     怎么这样」 (Paul, 2026-09-14, with a red ring round two of them). The
     specificity has to match the rule it is undoing, or it loses. */
  #bible-table tbody tr.verse-start td
  {
    border-top: 0;
    padding-top: 0;
  }

  #bible-table tbody tr:first-child
  {
    border-top: 0;
  }

  #bible-table td
  {
    border-top: 0;
    padding: 0 0 .3rem;
    min-width: 0;                /* undoes the column width in 对照 */
  }

  /* The verse number heads its group instead of sitting in a column. */
  #bible-table tbody td.col-verse
  {
    text-align: left;
    padding: 1rem 0 .1rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--gold-ink);
  }

  /* Stacked: the version name is already its own cell. In 对照 it is not,
     so it comes from the attribute. */
  #bible-table tbody td.font-weight-bold,
  #bible-table.side-by-side tbody td[data-version]::before
  {
    display: block;
    padding-top: .45rem;
    font-size: .78rem;
    font-weight: 600 !important;
    letter-spacing: .04em;
    color: var(--ink-faint);
  }

  #bible-table.side-by-side tbody td[data-version]::before
  {
    content: attr(data-version);
  }

  /* An empty cell (a version that has no such verse) should not leave a
     label with nothing under it. */
  #bible-table.side-by-side tbody td[data-version]:empty::before
  {
    content: none;
  }

  /* The switch that turns 对照 on has nothing to turn on here. */
  .bible-switches #side-by-side
  {
    display: none;
  }
}

/* ================================================================ 深色
   Light, dark, or the reader's system. Three states, and the tokens below
   are the whole of it: `:root` carries the light values, the
   prefers-color-scheme block swaps them for a reader whose system is dark
   AND who has not said otherwise, and `[data-theme]` lets the switch in the
   nav win in either direction.

   Bootstrap 4 is a light-only stylesheet, so what follows re-points the
   handful of its surfaces this site actually uses -- body, navbar, tables,
   dropdowns, form controls, modal, footer -- at the tokens. Anything not
   listed inherits body colour, which is why the reading page (the page that
   matters here) is covered by the first four rules alone.

   The dark ground is not black: #16181c against #e8e6e1 is about 13:1, well
   past AA, and scripture set in pure white on pure black is the one thing
   every reader complains about. The gold and the green of the Strong's
   numbers are lifted rather than kept, because both sink into a dark ground
   at the values that work on paper. */
:root
{
  /* Say which grounds this page is written for, and mean it.

     Without this, Chrome on Android decides for itself: its Auto dark theme
     force-inverts any page it thinks is light, and our dark theme then gets
     darkened a second time -- a black panel with black text on it, which is
     what a menu looked like on Paul's tablet (2026-09-14: 「上面圣经那个
     menu 黑色看不清」). Declaring `color-scheme` is the documented way to
     tell the browser the page handles both itself, and it is also what
     makes the native widgets -- the book and chapter <select> lists, the
     scrollbars, the text fields -- follow the theme instead of popping up
     white in the middle of a dark page. */
  color-scheme: light;

  --ink: #212529;
  --ink-soft: #495057;
  /* 4.95:1 on white. It was #868e96 — 3.32:1, which is fine for a rule and
     not fine for the verse number, the version label and the placeholder
     text that are all set in it. */
  --ink-faint: #6a7178;
  --page: #fff;
  --surface: #f8f9fa;
  --surface-2: #fff;
  --rule: #e9ecef;
  --rule-soft: #f1f3f5;
  --link: #0d6efd;
  /* Two golds on purpose. --gold is the brand mark: rules, an active bar,
     an icon — non-text, where 3:1 is the bar and #b08d4f clears it. Gold as
     TEXT (the verse number on a phone) has to clear 4.5:1, and #b08d4f is
     3.10, so it gets its own darker value rather than the brand one being
     dulled everywhere. */
  --gold: #b08d4f;
  --gold-ink: #8a6d34;
  --sn: green;
  --alert-ink: #c0282d;
}

@media (prefers-color-scheme: dark)
{
  :root:not([data-theme="light"])
  {
    color-scheme: dark;
    --ink: #e8e6e1;
    --ink-soft: #b9b7b1;
    --ink-faint: #8b8983;
    --page: #16181c;
    --surface: #1c1f24;
    --surface-2: #22262c;
    --rule: #2c3138;
    --rule-soft: #23272d;
    --link: #79b0ff;
    --gold: #d5b271;
    --gold-ink: #d5b271;    /* 8.8:1 on this ground; no second value needed */
    --sn: #7fc08a;
    --alert-ink: #ff8a80;
  }
}

:root[data-theme="dark"]
{
  color-scheme: dark;
  --ink: #e8e6e1;
  --ink-soft: #b9b7b1;
  --ink-faint: #8b8983;
  --page: #16181c;
  --surface: #1c1f24;
  --surface-2: #22262c;
  --rule: #2c3138;
  --rule-soft: #23272d;
  --link: #79b0ff;
  --gold: #d5b271;
  --gold-ink: #d5b271;
  --sn: #7fc08a;
  --alert-ink: #ff8a80;
}

/* An explicit 浅色 on a dark system: the tokens above already come from
   `:root`, and this keeps the browser's own widgets from staying dark. */
:root[data-theme="light"]
{
  color-scheme: light;
}

body
{
  background: var(--page);
  color: var(--ink);
}

a
{
  color: var(--link);
}

/* The site's own chrome. */
.navbar.bg-light,
.page-toolbar,
.footer.bg-light
{
  background: var(--surface) !important;
  color: var(--ink);
  border-color: var(--rule);
}

.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link
{
  color: var(--ink);
}

.navbar-light .navbar-nav .nav-link:hover
{
  color: var(--gold);
}

.navbar-light .navbar-toggler
{
  border-color: var(--rule);
}

.dropdown-menu
{
  background: var(--surface-2);
  border-color: var(--rule);
  color: var(--ink);
}

.dropdown-item
{
  color: var(--ink);
}

.dropdown-item:hover,
.dropdown-item:focus
{
  background: var(--rule-soft);
  color: var(--ink);
}

.dropdown-item.active,
.dropdown-item:active
{
  background: var(--rule);
  color: var(--ink);
}

.dropdown-divider
{
  border-top-color: var(--rule);
}

.dropdown-header
{
  color: var(--ink-faint);
}

/* Forms: the book and chapter pickers, the search box. */
.form-control,
.custom-select
{
  background-color: var(--surface-2);
  border-color: var(--rule);
  color: var(--ink);
}

.form-control:focus,
.custom-select:focus
{
  background-color: var(--surface-2);
  color: var(--ink);
}

.form-control::placeholder
{
  color: var(--ink-faint);
}

/* The chapter. */
#bible-table td,
#bible-table th
{
  color: var(--ink);
  border-color: var(--rule-soft);
}

#bible-table thead th
{
  color: var(--ink-faint);
  border-bottom-color: var(--rule);
}

#bible-table tbody td.col-verse
{
  color: var(--ink-faint);
}

#bible-table tbody td.font-weight-bold
{
  color: var(--ink-soft);
}

.reader-title
{
  color: var(--ink);
}

.reader-chap,
.sn-shelf-title
{
  color: var(--ink-faint);
}

.reader-step
{
  color: var(--ink-soft);
}

.reader-step:hover
{
  background: var(--rule-soft);
  color: var(--ink);
}

.reader-step.disabled
{
  color: var(--rule);
}

.reader-search-icon
{
  color: var(--ink-faint);
}

.bible-switches a
{
  color: var(--ink-soft);
  border-bottom-color: var(--rule);
}

.bible-switches a:hover
{
  color: var(--ink);
  border-bottom-color: var(--ink-faint);
}

/* Strong's numbers and the footnotes under a verse. */
.sn
{
  color: var(--sn);
}

/* The morphology codes (H8804 and the like) are `color: blue` on paper,
   which is 8:1 on white and 2.4:1 on this ground -- they were all but
   invisible in dark mode, which is where they were noticed. The link blue
   of this theme is 7:1 here. */
.rmac
{
  color: var(--link);
}

.fnref,
.fnote
{
  color: var(--ink-faint);
}

/* The definition shelf. */
#sn-shelf
{
  background: var(--surface-2);
  border-top-color: var(--rule);
  color: var(--ink);
}

.sn-shelf-head
{
  background: var(--surface-2);
}

.sn-card
{
  border-top-color: var(--rule-soft);
}

.sn-card-close
{
  color: var(--ink-faint);
}

.sn-card-close:hover
{
  color: var(--ink);
}

/* Bootstrap's own surfaces that other pages use. */
.modal-content,
.card,
.list-group-item
{
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--rule);
}

.modal-header,
.modal-footer,
.card-header,
.card-footer
{
  background: var(--surface);
  border-color: var(--rule);
}

.table
{
  color: var(--ink);
}

.table td,
.table th
{
  border-color: var(--rule-soft);
}

.table thead th
{
  border-bottom-color: var(--rule);
}

.table-striped tbody tr:nth-of-type(odd)
{
  background: var(--rule-soft);
}

.text-dark
{
  color: var(--ink) !important;
}

.text-muted
{
  color: var(--ink-faint) !important;
}

.bg-light
{
  background: var(--surface) !important;
}

.border,
.border-top,
.border-bottom,
.border-left,
.border-right
{
  border-color: var(--rule) !important;
}

/* The collapsed phone menu is a sheet of paper; in the dark it is a sheet of
   the dark. */
@media (max-width: 991.98px)
{
  .navbar .navbar-collapse
  {
    background: var(--surface-2);
    border-top-color: var(--rule);
  }

  .navbar .navbar-collapse .nav-link
  {
    color: var(--ink);
    border-bottom-color: var(--rule-soft);
  }

  .navbar .navbar-collapse .dropdown-menu
  {
    background: var(--surface);
  }

  .navbar .navbar-collapse .navbar-nav + .navbar-nav
  {
    border-top-color: var(--rule);
  }
}

/* A link that leaves the site says so. Small, and set in the muted ink so it
   reads as a mark on the label rather than as a second word. */
.nav-offsite
{
  font-size: .62em;
  margin-left: .35em;
  vertical-align: .12em;
  color: var(--ink-faint);
}

/* ------------------------------------------------- 键盘、焦点、动效
   Three things every interface is supposed to have and this one did not.

   **A visible focus ring.** Bootstrap 4 draws one on some controls and not
   on others, and `:focus` alone lights it up for mouse users too. `:focus-
   visible` is the modern answer: the ring appears for the keyboard and stays
   out of the way of the mouse. Two pixels of gold at 3:1 against both
   grounds, plus an offset so it never sits on top of the glyphs. */
:focus-visible
{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Anything that takes a tap is at least 44 square, or has the room around it
   to make up for being smaller. The switches above the chapter are inline
   text links, which WCAG exempts, but they are still given a thumb's worth
   of vertical padding. */
.bible-switches a
{
  padding: .35rem 0;
}

/* **Motion.** The whole site scrolls smoothly (`scroll-behavior: smooth` in
   common.css), which for a reader with vestibular trouble is not a nicety.
   Honour the system setting. */
@media (prefers-reduced-motion: reduce)
{
  html
  {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after
  {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* **A way past the menu.** Ten nav items stand between the top of the
   document and the chapter; a keyboard or screen-reader user tabbed through
   all of them on every page. The link is invisible until it is focused,
   which is the one case where hiding a control is right. */
.skip-link
{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: .6rem 1rem;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 0 0 4px 0;
}

.skip-link:focus
{
  left: 0;
}

/* Selecting scripture to copy it should look like the site, not like the
   browser's default blue. */
::selection
{
  background: rgba(176, 141, 79, .28);
}

/* ==================================================================== 首页
   The page was a banner, a letter, and a right-hand column holding twelve
   links and six cards in whatever order they were added. Everything that
   was on it is still on it; what changed is that the page now says what it
   is for before it says everything else it has. */
.home-hero
{
  padding: 1.25rem 0 1.75rem;
}

.home-banner
{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.home-actions
{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}

.home-actions .btn
{
  min-height: 44px;             /* a thumb, not a mouse */
  display: inline-flex;
  align-items: center;
}

/* The letter is prose, so it is set like prose: the same measure the
   scripture keeps, and the leading Chinese wants. It was inside a card at
   two-thirds of the page width, which on a 1440 screen is a column of
   sixty-odd characters. */
.home-letter
{
  max-width: 44rem;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--ink);
}

.home-letter p
{
  margin-bottom: 1.1rem;
}

/* Links are places to go, not headings. They were <h5> — the page had a
   dozen fifth-level headings and no fourth-level anything. */
.home-links
{
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
}

.home-link
{
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink);
  font-size: 1rem;
  text-decoration: none;
}

.home-link:last-child
{
  border-bottom: 0;
}

.home-link:hover
{
  background: var(--rule-soft);
  color: var(--ink);
  text-decoration: none;
}

/* One card, one shape. Bootstrap's default card is a grey-bordered box with
   a grey-tinted header; six of them stacked read as six boxes rather than as
   six things to watch. */
/* The navbar must never run off the side of the page.
   Bootstrap lays the expanded navbar out as one flex row and lets it
   overflow: at 1180px the English site -- eleven sections, a badge, and the
   theme and language menus -- pushed the last two clean off the screen
   (Paul, 2026-09-14, with a screenshot of the English home page). Wrapping
   is the honest answer: a second row is ugly for a moment, a menu nobody can
   reach is broken. The height is measured into --navbar-height at load, so a
   wrapped bar does not hide the page under it. */
@media (min-width: 992px)
{
  .navbar-expand-lg .navbar-collapse
  {
    flex-wrap: wrap;
    row-gap: .25rem;
  }

  /* A little of the room back, so the wrap is rarer. Bootstrap's own
     value here is .5rem. */
  .navbar-expand-lg .navbar-nav .nav-link
  {
    padding-right: .4rem;
    padding-left: .4rem;
  }
}

/* 「新」/「New」.
   It was a 180x60 animated GIF of the word 更新！, set at height=30 and, in
   the two card headings, cut down with `clip-path: rect(0 100px 30px 38px)`
   -- which crops the 90px-wide picture to its right-hand 52px, so what the
   reader actually saw was half of the 「！」: a red stub with no word in it
   (Paul, 2026-09-14: 「这个很难看…好像很 old school」).

   As type it scales with the heading beside it, takes the theme's colours
   in both light and dark, translates, and is read aloud as a word. The gold
   is the brand mark, drawn as an outline rather than a fill so it marks the
   heading without competing with it. */
.badge-new
{
  display: inline-block;
  margin-left: .5rem;
  padding: 0 .45em;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold-ink);
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .04em;
  vertical-align: .12em;
  white-space: nowrap;
}

/* On the navbar the badge follows a link, and the link's own colour must not
   paint over it. */
.nav-link .badge-new
{
  color: var(--gold-ink);
}

.home-card
{
  margin-bottom: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
}

.home-card-head
{
  background: transparent;
  border-bottom: 1px solid var(--rule-soft);
  padding: .75rem 1rem;
}

.home-card-head h5
{
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink) !important;
}

.home-card-head a
{
  color: var(--ink);
  text-decoration: none;
}

.home-card-head a:hover
{
  color: var(--gold-ink);
  text-decoration: none;
}

.home-card .card-body
{
  padding: 0;                   /* the picture or the video IS the body */
}

.home-card video,
.home-card img
{
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 992px)
{
  /* The aside is a column of its own, not a narrow strip of the letter's. */
  .home-aside
  {
    padding-left: 2rem;
  }
}

@media (max-width: 575.98px)
{
  .home-actions .btn
  {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* The second action is a real choice, not a disabled one. Bootstrap's
   outline-secondary is grey on grey and reads as unavailable; on the dark
   ground it nearly disappears. Ink border, ink label. */
.home-actions .btn-outline-secondary
{
  color: var(--ink);
  border-color: var(--ink-faint);
  background: transparent;
}

.home-actions .btn-outline-secondary:hover,
.home-actions .btn-outline-secondary:focus
{
  color: var(--page);
  background: var(--ink);
  border-color: var(--ink);
}

/* The first action carries the site's own colour rather than Bootstrap blue. */
.home-actions .btn-primary
{
  background: #10233f;          /* the navy the app is built on */
  border-color: #10233f;
  color: #f3ecdc;
}

.home-actions .btn-primary:hover,
.home-actions .btn-primary:focus
{
  background: #1b3a5c;
  border-color: #1b3a5c;
  color: #fff;
}

@media (prefers-color-scheme: dark)
{
  :root:not([data-theme="light"]) .home-actions .btn-primary
  {
    background: var(--gold);
    border-color: var(--gold);
    color: #16181c;
  }
}

:root[data-theme="dark"] .home-actions .btn-primary
{
  background: var(--gold);
  border-color: var(--gold);
  color: #16181c;
}

/* 译者注 that are longer than the verse they hang off.
 *
 * 梁家铿译本 约 1:1 is twelve characters of scripture carrying twenty-six
 * notes: 3,798 characters, a screen and a half, between one verse and the
 * next. Folded behind a <details> rather than hidden -- those notes are the
 * reason to have that translation and the Chinese NET, and a reader who
 * wants none of them already has 「隐藏译者注」.
 *
 * <details> and not a script: it opens with JavaScript off, it prints open,
 * and the browser supplies the keyboard and the screen reader. */
.fnote-fold > summary
{
  cursor: pointer;
  list-style: none;
  display: inline-block;
  padding: .05em .5em;
  border: 1px solid var(--gold-ink);
  border-radius: 999px;
  color: var(--gold-ink);
  font-size: 95%;
  line-height: 1.5;
  user-select: none;
}

/* Safari draws its own triangle through ::-webkit-details-marker, which
   `list-style: none` alone does not remove. */
.fnote-fold > summary::-webkit-details-marker
{
  display: none;
}

.fnote-fold > summary::after
{
  content: " \25be";
}

.fnote-fold[open] > summary::after
{
  content: " \25b4";
}

.fnote-fold > summary:hover,
.fnote-fold > summary:focus-visible
{
  background: var(--gold-ink);
  color: var(--surface-2);
}

.fnote-fold[open] > summary
{
  margin-bottom: .25em;
}

@media print
{
  /* A folded note is still a note: paper has room and no way to click. */
  .fnote-fold > summary { display: none; }
}

/* One note, one block, the number hanging in the margin.
 *
 * Run together as a paragraph, 约 1:1's twenty-six notes are a wall of text
 * with nothing to say where one ends — Paul, 2026-09-14, with the fold
 * open: 「这里面也要format好点 现在一大把太难看了」. The numbers are the
 * only structure the notes come with, so they are the structure used. */
.fnote-item
{
  display: block;
  padding-left: 1.8em;
  text-indent: -1.8em;
  margin-top: .35em;
}

.fnote-item:first-child
{
  margin-top: 0;
}

.fnote-item > sup
{
  display: inline-block;
  width: 1.6em;
  margin-right: .2em;
  text-indent: 0;
  text-align: right;
  vertical-align: baseline;
  font-size: 100%;
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}

/* 致读者的信 (res/letter_*): the page came with inline color:green / blue /
   red, pure colours picked for a white page -- on the dark ground #16181c
   green is 3.2:1 and blue 2.4:1 (「dark mode 这个看起来很难看清」). The
   ranges now wear the reader's own colours, so H3068 here looks like H3068
   in the text, and each has a dark value. */
.sn-range { color: var(--sn); }
.tvm-range { color: var(--link); }
.letter-head { color: var(--alert-ink); font-weight: 600; }

/* A mark on 主 / Lord that opens its note (BibleUtils::markNotes, bible.js).
   The pure blue the marks used to be was 2.4:1 on the dark page; --link has
   a value for each theme. */
.mark-note
{
  cursor: pointer;
}

.mark-note:focus-visible
{
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 2px;
}

.mark-bubble
{
  position: absolute;
  z-index: 1080;
  max-width: min(22rem, calc(100vw - 16px));
  padding: .5rem .75rem;
  border: 1px solid var(--rule);
  border-radius: .5rem;
  background: var(--surface-2);
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}


/* The glance a Strong's number gives on hover. See js/bible.js. Never takes the
   pointer: it must not be what the mouse lands on as it leaves the number. */
#sn-tip
{
  position: absolute;
  z-index: 1040;
  max-width: 24rem;
  padding: .5rem .7rem .55rem;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  font-size: .85rem;
  line-height: 1.45;
  pointer-events: none;
}

#sn-tip pre
{
  margin: .2rem 0 0;
  white-space: pre-wrap;
  font: inherit;
  color: inherit;
}

#sn-tip .sn-tip-more
{
  margin-top: .3rem;
  color: var(--ink-faint);
  font-size: .75rem;
}

/* 犹太段落: the Masoretes' own breaks, shown only when the reader has switched them on
   (tools/import-ot-marks.py). A petuchah {פ} is a new paragraph; a setumah {ס} a smaller
   gap inside the line. The sign sits in the middle, faint, so it marks the break without
   shouting over the text. */
/* The signs are set in Noto Sans Hebrew Bold (SIL OFL; fonts/NotoSansHebrewSign-Bold.woff2, only
   the 22 letters and the braces) so that {ס} reads as a Hebrew samekh and not as an "o". */
@font-face { font-family: "NotoSansHebrewSign"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/css/fonts/NotoSansHebrewSign-Bold.woff2") format("woff2"); }
#bible-table tbody tr.jp-break td { border: 0; padding: 0 .5rem; text-align: center; color: #9aa4ad;
  font-family: "NotoSansHebrewSign", "SBL Hebrew", "Ezra SIL", "Times New Roman", serif; line-height: 1; }
/* petuchah {פ}: open section, a solid rule and a bold accent sign */
#bible-table tbody tr.jp-break.jp-P td { padding-top: 1.1rem; padding-bottom: 1.1rem; border-top: 2px solid #ff4d00; color: #ff4d00; }
#bible-table tbody tr.jp-break.jp-P .jp-sign { font-size: 1.35rem; font-weight: bold; letter-spacing: .1em; }
/* setumah {ס}: closed section, a dotted rule and a small grey sign */
#bible-table tbody tr.jp-break.jp-S td { padding-top: .35rem; padding-bottom: .35rem; border-top: 2px dotted #ff4d00; color: #ff4d00; }
#bible-table tbody tr.jp-break.jp-S .jp-sign { font-size: 1.2rem; font-weight: bold; letter-spacing: .1em; }

/* Sinaiticus Sections (tools/import-nt-marks.py), above the verse they begin: ekthesis ¶
   a thin solid rule, paragraphos ― a double rule, coronis ❦ (end of a book) a wide gap. */
#bible-table tbody tr.jp-break.jp-E td { padding-top: .5rem; padding-bottom: .5rem; border-top: 2px solid #ff4d00; color: #ff4d00; }
#bible-table tbody tr.jp-break.jp-E .jp-sign { font-size: 1.05rem; font-weight: bold; }
#bible-table tbody tr.jp-break.jp-G td { padding-top: .6rem; padding-bottom: .6rem; border-top: 4px double #ff4d00; color: #ff4d00; }
#bible-table tbody tr.jp-break.jp-G .jp-sign { font-size: .9rem; font-weight: bold; }
#bible-table tbody tr.jp-break.jp-C td { padding-top: 1.4rem; padding-bottom: 1.4rem; color: #ff4d00; }
#bible-table tbody tr.jp-break.jp-C .jp-sign { font-size: 1.3rem; }

/* The name of the break beside its sign, so {ס} cannot be read as an "o". */
#bible-table tbody tr.jp-break .jp-name { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .72rem; letter-spacing: .03em; font-weight: normal; margin-left: .4rem; }

/* The signs set inside the text itself: {פ} {ס} and the manuscript signs of Ms Sections alike in the same bright orange-red as
   their rows (Raymond, 2026-10-07: the NT markers like the OT ones). Bold, so they cannot be read past. */
.jp-inline { font-weight: bold; white-space: nowrap; }
.jp-inline.jp-P, .jp-inline.jp-S { color: #ff4d00; font-family: "NotoSansHebrewSign", "SBL Hebrew", serif; }
.jp-inline.jp-E, .jp-inline.jp-G { color: #ff4d00; }