/* The Bible reader: a page that should read like a book, not like a web page.
   Settings (font, size, background, red letters, verse numbers, footnotes, reading view) are
   classes on <body>, set by assets/bible.js from what the member chose. */

body.bible-app {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--b-bg, var(--bg));
  color: var(--b-fg, var(--text));
  /* Room for the bar, which is fixed: sticky can't be relied on inside the installed app on iOS. */
  padding-top: calc(3.1rem + env(safe-area-inset-top));
}

/* The chapter and the day's reading: the page itself never scrolls, only the text between the
   bar at the top and the player at the foot. Nothing is position: fixed, so iOS can't carry the
   bars off with the page when it loses track of the screen (as it does after the keyboard). */
html:has(body.b-shell) { height: 100%; overflow: hidden; }
body.bible-app.b-shell { position: relative; height: 100%; min-height: 0; overflow: hidden; padding: 0; }
.b-shell .b-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain;
  display: flex; flex-direction: column;
  padding-top: calc(3.1rem + env(safe-area-inset-top));
}
.b-shell .b-bar { position: absolute; }
.b-shell .b-player { position: relative; flex-shrink: 0; }
body.b-shell.b-playing .b-steps { margin-bottom: 0; padding-bottom: 1.25rem; }

/* Backgrounds: the app's own, or paper for reading in sunlight. */
body.bible-app.b-paper { --b-bg: #f6efe2; --b-fg: #2c2621; --b-muted: #8a7f70; --b-rule: #e0d5c2; }
body.bible-app:not(.b-paper) { --b-muted: var(--muted); --b-rule: var(--divider); }
/* Light is a white page, not the chat's gray. */
:root[data-theme="light"] body.bible-app:not(.b-paper) { --b-bg: #fff; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body.bible-app:not(.b-paper) { --b-bg: #fff; }
}

/* The book and chapter stay in view; the bar slides away as you read down and returns when you
   pull up (assets/bible.js). */
.b-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  /* A shade off the page, so the bar reads as a bar: lighter on a dark page, darker on a light one. */
  --b-bar-mix: black 4%; --b-bar-line: black 16%;
  background: color-mix(in srgb, var(--b-bg, var(--panel)), var(--b-bar-mix));
  border-bottom: 1px solid color-mix(in srgb, var(--b-bg, var(--panel)), var(--b-bar-line));
  /* The same space above the contents as below (plus the notch), so they sit mid-bar; the total is
     what it always was, so the text below doesn't move. */
  padding-top: calc(.25rem + 1px + env(safe-area-inset-top)); padding-bottom: calc(.25rem - 1px);
  /* On a wide screen the bar's contents keep within the text column (38rem, 1.25rem padding), the
     back arrow flush with the verse markers at its left edge (its glyph sits 10px into its tap
     target, which is pulled .5rem left; measured by tests/player_layout_test.js); on a phone, the
     usual edges. */
  padding-left: max(.75rem, env(safe-area-inset-left), calc(50% - 17.75rem - 4px));
  padding-right: max(.75rem, env(safe-area-inset-right), calc(50% - 17.75rem));
  transition: transform .22s ease;
}
.b-bar.b-bar-away { transform: translateY(-101%); }
:root[data-theme="dark"] body.bible-app:not(.b-paper) .b-bar { --b-bar-mix: white 5%; --b-bar-line: white 18%; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.bible-app:not(.b-paper) .b-bar { --b-bar-mix: white 5%; --b-bar-line: white 18%; }
}

/* The magnifier and speaker are marks in the bar, not buttons with a box round them; each line
   icon is centered in its round target, so the halo is centered on it. */
.b-search, .b-listen {
  background: none; border: 0; color: inherit; padding: 0;
  display: inline-grid; place-items: center;
  width: 2.2rem; height: 44px;
}
/* The bar's four controls answer the pointer alike: one neutral shade (not the icon's own color,
   which turns accent while the player is open), round.
   Only where there's a real pointer, so a tap on a phone doesn't leave a halo stuck behind. */
body.bible-app.b-paper { --halo: rgba(44,38,33,.10); }
.b-search, .b-listen, .b-bar .menu > summary { border-radius: 50%; }
.b-bar .menu > summary { width: 2.2rem; height: 44px; color: inherit; }
@media (hover: hover) {
  .b-search:hover, .b-listen:hover, .b-bar .menu > summary:hover { --ib-halo: var(--halo); }
}
.b-bar .menu[open] > summary { --ib-halo: var(--halo); }
.b-listen.on { color: var(--accent); }
/* The chapter title's capitals sit 1px high in their line. */
.b-bar .b-where { position: relative; top: 1px; }
.b-listen[hidden] { display: none; }
.b-where { flex: 1; text-align: left; font-size: 1.05rem; font-weight: 600; color: inherit; background: none; border: 0; padding: .2rem 0; }
/* Measured by what's visible (the dots are a sliver of ink in a wide box), these leave about 30px
   between each of the four (book, magnifier, speaker, dots), room enough to tap the right one;
   tests/icon_check.js measures them. */
.b-bar .bible-menu { margin-left: 1px; }
.b-bar .b-listen { margin-left: 3px; }
.b-bar details.menu { margin-left: -5px; }
/* The translation code on the bar (card #254; app.css): a text button, its halo a rounded rectangle around the code, not
   the icons' circle, with a little room before the book. */
.b-bar details.b-tr-bar { margin-left: 0; margin-right: 6px; }
.b-bar .b-tr-bar > summary { width: auto; height: 34px; border-radius: var(--chip-radius); }
/* On a phone, about 22–25px instead, so a long book name ("Song of Solomon 8") keeps to one line;
   on the narrowest, the name a touch smaller as well. */
@media (max-width: 480px) {
  .b-bar .b-search { margin-left: -10px; }
  .b-bar .b-listen { margin-left: -4px; }
  .b-bar .bible-menu { margin-left: -7px; }
  .b-bar details.menu { margin-left: -11px; }
}
/* …and 4px more each where the whole book name and chapter fit even so (bible.js fitRef, fitReading: Larry, 2026-10-17). */
@media (max-width: 480px) {
  .b-bar.b-roomy .b-search { margin-left: -6px; }
  .b-bar.b-roomy .b-listen { margin-left: 0; }
  .b-bar.b-roomy .bible-menu { margin-left: -3px; }
  .b-bar.b-roomy details.menu { margin-left: -7px; }
}
@media (max-width: 380px) {
  .b-bar .b-where { font-size: .9rem; white-space: nowrap; }
}
.b-where .b-ref { margin-right: .3rem; }
/* The book and chapter keep to one line with their ▾, whatever else the bar holds (the count's
   circle took the room a long name had): if a name can't fit whole, it ends in "…" rather than
   pushing the ▾ onto a line of its own. */
.b-bar .b-where { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.b-bar .b-where .b-ref { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.b-bar .b-ref-in { display: inline-block; white-space: nowrap; }   /* its own width, for fitting (bible.js fitReading) */
@media (max-width: 480px) {
  .b-bar .b-where { font-size: .95rem; }
  .b-bar .b-where .b-ref { margin-right: .15rem; }
  /* (Narrower on its left than its right, and the magnifier 2px further off: the letters keep the gap
     to the magnifier the other marks have, which .35rem a side had cut by 5px; tests/icon_check.js.) */
}
@media (max-width: 380px) {
  .b-bar .b-where { font-size: .88rem; }
}

/* The page itself. touch-action lets the reader scroll up and down while sideways swipes are
   handled as page turns. */
.b-page { flex: 1; width: 100%; max-width: 38rem; margin: 0 auto; padding: 1rem 1.25rem 3rem; touch-action: pan-y; overflow-x: clip; }
.b-chapter { will-change: transform; }
/* The margins either side of the column turn the page (see bible.js). */
@media (min-width: 760px) {
  body.bible-app { cursor: default; }
  body.bible-app:not(.b-marks-page) main.b-page { cursor: auto; }
}
.b-title { font-size: 1.5rem; margin: .4rem 0 1rem; font-weight: 600; padding-left: 1.1rem; }
/* The text is inset a little, leaving a gutter for the note dots. */
.b-chapter { font-size: var(--b-size, 1.12rem); line-height: var(--b-lead, 1.65); padding-left: 1.1rem; }
.b-chapter p { margin: 0 0 .75rem; }
.b-chapter .b-q1, .b-chapter .b-q2, .b-chapter .b-q3, .b-chapter .b-q4 { margin-bottom: .1rem; }
.b-q1 { padding-left: 1.2rem; text-indent: -1.2rem; }
.b-q2 { padding-left: 2.4rem; text-indent: -1.2rem; }
.b-q3, .b-q4 { padding-left: 3.4rem; text-indent: -1.2rem; }
.b-pi, .b-mi, .b-li1 { padding-left: 1.2rem; }
.b-li2 { padding-left: 2.4rem; }
.b-pc, .b-qc { text-align: center; }
.b-b { height: .7rem; }
.b-s, .b-s2 { font-size: 1rem; font-weight: 600; margin: 1.4rem 0 .5rem; }
.b-ms { font-size: 1.15rem; font-weight: 600; margin: 1.6rem 0 .6rem; text-align: center; }
/* A reading the whole-Bible switch added to a Prayer Book's plan (card #441): a small plain word after its heading. */
.b-ms .b-added { font-size: .75rem; font-weight: 500; color: var(--b-muted); margin-left: .35rem; vertical-align: .1em; }
/* On a day's reading, each reading's heading opens its chapter: the heading's own color, with a
   faint underline to say it goes somewhere. */
.b-ms a, .b-part > h3.b-s a { color: inherit; text-decoration: underline; text-decoration-color: var(--b-rule);
  text-decoration-thickness: 1px; text-underline-offset: .22em; }
@media (hover: hover) { .b-ms a:hover, .b-part > h3.b-s a:hover { text-decoration-color: currentColor; } }
.b-r, .b-mr, .b-sp { font-size: .85rem; color: var(--b-muted); font-style: italic; margin: -.2rem 0 .7rem; }
.b-d { font-size: .9rem; color: var(--b-muted); font-style: italic; margin-bottom: .6rem; }
/* The divine name. The source has it as LORD, so rather than font-variant — whose synthetic small
   caps sit at x-height and come out too small — the capitals themselves are set a little smaller
   and the initial put back to full size. One number to tune, and it stays a capital throughout. */
.nd { font-size: .80em; }
.nd::first-letter { font-size: 1.25em; }   /* 1 / .80, so the L matches the text around it */
.add { font-style: italic; opacity: .85; }

/* Verse numbers: quiet, but a tap target for the commentary link. The dark theme's accent is a
   mid blue that sinks into the page, so the numbers get a lighter color of their own. */
/* A shade larger than a typographer would set them: they are tapped, not just read. */
.b-chapter .vn {
  font-size: .72em; font-weight: 600; color: var(--b-vn, var(--accent)); vertical-align: .38em;
  margin-right: .2em; cursor: pointer; text-decoration: none;
  /* Padding above and below an inline number widens what a thumb can hit without moving a
     single line of the text. */
  padding: .45em .16em;
  /* A number is something you tap, not prose: a hold on one should open the sheet, not start
     selecting it. */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  position: relative;
}
/* … and an invisible target round it, wider and taller than the padding allows (Larry, 2026-10-07: the numbers, like
   the note dots, "hard to hit"): it reaches a little over the words either side and between the lines, not onto them. */
.b-chapter .vn::before { content: ''; position: absolute; inset: -6px -7px -6px -9px; }
@media (pointer: coarse) { .b-chapter .vn::before { inset: -8px -8px -8px -11px; } }
/* Nor should a finger still down after the sheet opens go on selecting the text behind it. */
body:has(.b-sheet) .b-chapter { user-select: none; -webkit-user-select: none; }
/* (and the Settings page's samples, card #403) */
:root[data-theme="dark"] body.bible-app:not(.b-paper), :root[data-theme="dark"] .set-sample { --b-vn: #9fb6d8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.bible-app:not(.b-paper), :root:not([data-theme="light"]) .set-sample { --b-vn: #9fb6d8; }
}
body.b-nonums .b-chapter .vn { display: none; }

/* Footnote and cross-reference markers */
.b-chapter .fn, .b-chapter .xr {
  font-size: .62em; vertical-align: .45em; color: var(--b-muted); cursor: pointer; padding: 0 .12em;
}
/* A cross-reference is shown by its dotted word, not by a marker of its own. */
.b-chapter .xr { display: none; }
body.b-nonotes .b-chapter .fn, body.b-nonotes .b-chapter .xr { display: none; }
/* Reading view: nothing but the words. */
body.b-plain .b-chapter .vn, body.b-plain .b-chapter .fn, body.b-plain .b-chapter .xr,
body.b-plain .b-dot { display: none; }

/* Notes shown in place, for people who'd rather not tap */
.b-inline-note { display: none; font-size: .82em; color: var(--b-muted); margin: .1rem 0 .6rem; padding-left: 1rem; border-left: 2px solid var(--b-rule); }
body.b-notes-inline .b-inline-note { display: block; }
/* On a near-black page a faint rule is lost, so a note in the dark gets a panel of its own. */
:root[data-theme="dark"] body.bible-app:not(.b-paper) .b-inline-note {
  background: #1a1d22; border-left: 3px solid #646b76; border-radius: 0 6px 6px 0; padding: .35rem .7rem .35rem .9rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.bible-app:not(.b-paper) .b-inline-note {
    background: #1a1d22; border-left: 3px solid #646b76; border-radius: 0 6px 6px 0; padding: .35rem .7rem .35rem .9rem;
  }
}
body.b-notes-inline .b-chapter .fn, body.b-notes-inline .b-chapter .xr { display: none; }

/* A verse with a note gets a dot in the margin: visible, thumb-sized, out of the way. */
.b-dot {
  position: absolute; left: -1.1rem; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); opacity: .55; border: 0; padding: 0; cursor: pointer;
}
/* … and a bigger, invisible target round it (Larry, 2026-10-07: "hard to hit. Make the tappable area larger"): 40px
   tall, reaching out into the margin more than into the text, so a word beside it stays tappable. */
.b-dot::before { content: ''; position: absolute; inset: -14px -6px -14px -18px; }
@media (pointer: coarse) { .b-dot::before { inset: -16px -8px -16px -20px; } }
/* Two small things whose tap areas overlap (a dot beside a verse number, card #75; a footnote letter before one, any
   such pair, card #92), on a phone: a tap near them opens this chooser over them (bible.js openPairPick): a pill of
   the page, as if the spot were blown up, its two halves the buttons and a line between; no words. */
.b-pairpick { position: fixed; z-index: 60; display: flex; border-radius: 999px; overflow: hidden;
  background: var(--b-bg, var(--bg)); border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.b-pairpick button { background: none; border: 0; padding: 0 14px; cursor: pointer; min-width: 72px; height: 64px;
  display: flex; align-items: center; justify-content: center; }
.b-pairpick button + button { border-left: 1px solid var(--b-muted, var(--border)); }
.b-pairpick button:active, .b-pairpick button:hover { background: var(--halo); }
.b-pairpick-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); opacity: .55; }
.b-pairpick-vn { font-weight: 600; line-height: 1; color: var(--b-vn, var(--accent)); }
.b-pairpick-fn { line-height: 1; color: var(--b-muted, var(--muted)); }

/* Cross-references: one word in the verse carries a dotted underline; tapping it opens the list. */
.b-chapter .xr-word {
  text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, var(--b-muted) 70%, transparent);
  text-underline-offset: .25em; text-decoration-thickness: 1px; cursor: pointer;
}
/* Names linked to the resources (RESOURCES-TODO R9): the word in the text's own color, its dotted underline green,
   one link style for all (Larry, 2026-10-05: "I meant the green underline … not the whole text"). */
:root { --rlink: #1f7a44; }
:root[data-theme="dark"] { --rlink: #6fcf97; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rlink: #6fcf97; } }
.b-chapter a.b-rlink, .set-sample .b-rlink {      /* (and the Settings page's sample, a span: card #403) */
  color: inherit; text-decoration: underline dotted; text-decoration-color: var(--rlink);
  text-underline-offset: .25em; text-decoration-thickness: 1.5px; cursor: pointer;
}
.b-chapter a.b-rlink:hover { text-decoration-style: solid; }
/* Theme links (R24): the same, blue (Larry, 2026-10-06: "On, blue dotted"). */
:root { --tlink: #2a62c9; }
:root[data-theme="dark"] { --tlink: #7aa7ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tlink: #7aa7ff; } }
.b-chapter a.b-tlink, .set-sample .b-tlink { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--tlink);
  text-underline-offset: .25em; text-decoration-thickness: 1.5px; cursor: pointer; }
.b-chapter a.b-tlink:hover { text-decoration-style: solid; }
/* Whatever else is tapped in the text sits above a verse number's invisible target, which reaches 8-11px over
   its neighbors, the lines above and below too ("Hittite? b c 4": a tap on "c" opened verse 4's commentary). */
.b-chapter .fn, .b-chapter .xr-word, .b-chapter a.b-rlink, .b-chapter a.b-tlink { position: relative; z-index: 1; }
/* A heading over the text (R12): from below, the whole width, a strip of the text left at the top
   (DESIGN.md 5a: never at the side on a phone); its own scrolling. */
.b-sheet.b-res { top: calc(env(safe-area-inset-top, 0px) + 7.5rem); max-height: none; padding-top: .3rem; }
.b-res-head { position: sticky; top: -.3rem; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin: 0 -1.25rem .2rem; padding: .3rem .6rem .3rem 1.25rem; background: var(--b-sheet); }
.b-res-page { font-size: .8rem; color: var(--b-muted, var(--muted)); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.b-res-page:hover { color: var(--accent); }
.b-res-close { width: 44px; height: 44px; }
.b-res .rs-heading h1, .b-res .rs-entry h1 { font-size: 1.6rem; margin-top: 0; }
.b-res .rs-credit { margin-top: 1.4rem; }
.b-sheet.b-res { overflow-x: hidden; }            /* an article sliding out goes out of sight */
.b-flash { background: rgba(120, 170, 255, .28); border-radius: 4px; transition: background .8s; /* design-ok: same-both-themes */ }

/* The cross-reference list */
.b-xlist { list-style: none; margin: 0; padding: 0; }
.b-xlist li { border-top: 1px solid var(--b-sheet-rule); padding: .6rem .1rem; }
/* The row's own button is the verse text; the little translation buttons beside the reference are
   styled by .b-xver and must not be caught by this. */
.b-xlist .b-xgo { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; padding: 0; font: inherit; }
.b-xlist .b-xref { color: var(--accent); font-size: .85rem; font-weight: 600; }
.b-xlist .b-xtext { display: block; font-size: .95rem; line-height: 1.45; }
.b-xlist li > button:not(.b-xgo) { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; padding: 0; font: inherit; }
.b-loading { color: var(--muted); }

/* Words of Jesus: red, not a pastel of it. On a dark page a true red is still readable (#ff453a
   is about 5:1 against the darkest background), so there is no need to lighten it toward pink. The
   dark color follows the app's own theme choice as well as the system's, as --b-vn does. */
body.b-red .wj { color: #c00000; /* design-ok: same-both-themes */ }
body.b-red.b-paper .wj { color: #b00000; /* design-ok: same-both-themes */ }
:root[data-theme="dark"] body.b-red:not(.b-paper) .wj { color: #ff453a; /* design-ok: same-both-themes */ }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.b-red:not(.b-paper) .wj { color: #ff453a; /* design-ok: same-both-themes */ }
}

/* Fonts */
/* The reader's sizes as classes, put on the page by the server (bible_body_look) so the text is
   drawn at its size from the start; bible.js sets the same values as it changes them. */
body.b-size-0 { --b-size: 0.95rem; --b-lead: 1.5; }
body.b-size-1 { --b-size: 1.03rem; --b-lead: 1.55; }
body.b-size-2 { --b-size: 1.12rem; --b-lead: 1.65; }
body.b-size-3 { --b-size: 1.22rem; --b-lead: 1.7; }
body.b-size-4 { --b-size: 1.35rem; --b-lead: 1.75; }
body.b-size-5 { --b-size: 1.5rem; --b-lead: 1.8; }
body.b-size-6 { --b-size: 1.7rem; --b-lead: 1.85; }
body.b-csize-0 { --c-size: 0.95rem; --c-lead: 1.5; }
body.b-csize-1 { --c-size: 1.03rem; --c-lead: 1.55; }
body.b-csize-2 { --c-size: 1.12rem; --c-lead: 1.65; }
body.b-csize-3 { --c-size: 1.22rem; --c-lead: 1.7; }
body.b-csize-4 { --c-size: 1.35rem; --c-lead: 1.75; }
body.b-csize-5 { --c-size: 1.5rem; --c-lead: 1.8; }
body.b-csize-6 { --c-size: 1.7rem; --c-lead: 1.85; }
/* No class yet (it's the server's from the first draw now): the default, serif. */
.b-chapter { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; }
body.b-font-serif .b-chapter { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; }
body.b-font-system .b-chapter { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
body.b-font-legible .b-chapter { font-family: "Atkinson Hyperlegible", Verdana, sans-serif; letter-spacing: .01em; }

/* Chapter steps at the foot of the page */
.b-steps { display: flex; justify-content: space-between; gap: 1rem; max-width: 38rem; margin: 0 auto 2rem; padding: 0 1.25rem calc(1rem + env(safe-area-inset-bottom)); }
.b-steps a { color: var(--accent); text-decoration: none; font-size: .95rem; }
/* "↑ Top" at the very end of a chapter or a day's reading (Larry, 2026-10-05), in the chapter links' style. */
.b-top { text-align: center; max-width: 38rem; margin: 0 auto; padding: 0 1.25rem calc(1.5rem + env(safe-area-inset-bottom)); }
/* (spaced so the links' 44px reaches, app.css, meet without overlapping) */
.b-steps + .b-top, .b-steps + .b-intro-line { margin-top: -3px; }
.b-top a { color: var(--accent); text-decoration: none; font-size: .95rem; display: inline-block; padding: .4rem .75rem; border-radius: var(--radius); }
.b-top a:hover { background: var(--halo); }
/* The book's introduction beside ↑ Top (RESOURCES-TODO R15): the same quiet link. */
.b-top .b-top-intro { background: none; border: 0; font: inherit; color: var(--accent); font-size: .95rem; padding: .4rem .75rem; border-radius: var(--radius); cursor: pointer; }
.b-top .b-top-intro:hover { background: var(--halo); }
.b-top.b-intro-line { padding-bottom: 0; }
/* Discuss (card #377): under a chapter, after each passage of a day's reading, and at its end, the book's board in the
   chapter links' style. Flush right, the word ending at the text's edge (card #381; Larry: "a kind of 'period'"); a
   finished day's "Discuss in Samuel · Psalms" on a line of its own. */
.b-steps + .b-discuss-line { margin-top: -3px; }
.b-top.b-discuss-line { width: 100%; padding-bottom: 0; text-align: right; }   /* (the full column: .b-scroll is a flex column) */
.b-discuss-line + .b-intro-line { margin-top: 0; }
a.b-discuss { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .75rem; border-radius: var(--radius); }
a.b-discuss:hover { background: var(--halo); }
.b-discuss-line a.b-discuss, .b-discuss-after a.b-discuss { margin-right: -.75rem; }
.b-discuss-lead { display: inline-flex; align-items: center; gap: .35rem; }
.b-discuss-after { text-align: right; font-size: .95rem; }
.b-chapter .b-discuss-after { margin: -.5rem 0 2rem; }   /* close under its own passage, clear of the next (card #407); .b-chapter: over ".b-chapter p" */
.b-discuss-day { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 .3rem; margin-top: .3rem; font-weight: 400; }
.ex-all a.b-discuss, .b-doneline a.b-discuss { padding: .2rem .4rem; }
.ex-discuss { text-align: center; }
/* The chooser, for someone in more than one study (card #381): a page dialog like the site's others (card #400,
   DESIGN.md §5a), centered on a computer and a sheet along the bottom on a phone; narrower than a page of text. */
@media (min-width: 700px) { dialog.page-dialog.discuss-pick { max-width: 24rem; } }
.discuss-pick .dp-groups label { padding: 0 .4rem; border-radius: var(--radius); cursor: pointer; }
.discuss-pick .dp-groups label:hover { background: var(--halo); }
.discuss-pick .dp-go { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1rem 0; }
.discuss-pick .dp-always { padding: 0 .4rem; font-size: .9rem; color: var(--muted); }
.discuss-pick .dp-undo { margin: .4rem 0 0; font-size: .85rem; color: var(--muted); }
.b-intro-line + .b-top { margin-top: 7px; }
body.b-shell.b-playing .b-top { padding-bottom: 1.25rem; }
/* Under a day's reading (card #26; Larry, 20 Oct: "grouped with Book introductions and Top, which should all be buttons,
   albeit smaller"): small outlined buttons, ↑ Top on a line of its own, centered, at the very bottom. */
.ex-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 38rem; margin: 0 auto;
  padding: 0 1rem calc(1.5rem + env(safe-area-inset-bottom)); }
.ex-btn { display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; padding: 0 .7rem; border: 1px solid var(--b-btn-edge);
  border-radius: 10px; background: none; color: var(--accent); font: inherit; font-size: .9rem; font-weight: 500; text-decoration: none;
  white-space: nowrap; cursor: pointer; }
.ex-btn:hover { background: var(--halo); }
.ex-btn .ic { width: 16px; height: 16px; }
.ex-break { flex-basis: 100%; height: 0; }
body.b-shell.b-playing .ex-row { padding-bottom: 1.25rem; }
/* The day's steps, in place of "I've finished today's reading" (card #26): done (green ✓), the one to do now (its
   finished button), and those after it, grayed. In a commentary step, the same row at the foot of its last page. */
.ex-seq { margin: 2rem auto 1rem; max-width: 30rem; text-align: left; }
.ex-seq, .ex-stepline, .b-discuss-after, .discuss-pick { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; }   /* the site's, as app.css body: not the text's */
.ex-seq h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 1rem; margin: 0 0 .5rem; }
.ex-seq h2 span { font-size: .85rem; font-weight: 400; color: var(--b-muted); }
.ex-seq ol { list-style: none; margin: 0; padding: 0; border: 1px solid var(--b-btn-edge); border-radius: var(--radius); overflow: hidden; }
.ex-seq li { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; min-height: 56px; border-top: 1px solid var(--b-rule); }
.ex-seq li:first-child { border-top: 0; }
.ex-seq .ex-num { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  font-size: .9rem; border: 1.8px solid var(--b-muted); color: var(--b-muted); }
.ex-seq li.now .ex-num { border-color: var(--selected); background: var(--selected); color: var(--selected-ink); }
.ex-seq li.done .ex-num { border-color: var(--done); background: var(--done); color: var(--panel); }
.ex-seq .ex-what { flex: 1; min-width: 0; line-height: 1.3; color: inherit; text-decoration: none; border-radius: 8px; padding: .2rem .3rem; margin: -.2rem -.3rem; }
.ex-seq a.ex-what:hover { background: var(--halo); }
.ex-seq li.here .ex-what { font-weight: 600; }
.ex-seq .ex-what small { display: block; font-size: .8rem; font-weight: 400; color: var(--b-muted); }
.ex-seq li.later .ex-what { color: var(--b-muted); }
/* The finished buttons (Larry, 20 Oct): "Now reading", outlined; on hover "Done", filled green, as it stays once finished.
   Both words share one grid cell, so the button keeps one width. */
.ex-seq :is(.ex-mark, .ex-ok) { flex: none; display: inline-grid; place-items: center; min-height: 34px; padding: 0 .7rem; border-radius: 10px;
  font: inherit; font-weight: 600; font-size: .9rem; border: 1.5px solid var(--done); background: var(--done); color: var(--panel); cursor: pointer; }
.ex-seq .ex-mark { border-color: var(--accent); background: none; color: var(--accent); }
.ex-seq .ex-mark > span { grid-area: 1 / 1; }
.ex-seq .ex-mark > span + span, .ex-seq .ex-mark:is(:hover, :focus-visible) > span:first-child { visibility: hidden; }
.ex-seq .ex-mark:is(:hover, :focus-visible) > span + span { visibility: visible; }
.ex-seq .ex-mark:is(:hover, :focus-visible) { border-color: var(--done); background: var(--done); color: var(--panel); /* design-ok: done-fill-hover */ }
.ex-seq .ex-ok:hover { filter: brightness(.9); /* design-ok: filled-hover */ }
.ex-seq button:disabled { opacity: .6; cursor: default; }
.ex-all { text-align: center; margin: .75rem 0 0; font-weight: 600; }
.ex-all a { color: var(--accent); font-weight: 400; }
.ex-stepline { text-align: center; font-size: .8rem; color: var(--b-muted); margin: .25rem 0 1rem; }
/* Under a commentary step's page, set off from the comment above it as the "Go on ›" button was (#327). */
.b-comm-page > .ex-stepline { margin: 1.5rem 0 1rem; }
.b-comm-page > .ex-seq + .ex-stepline { margin-top: .25rem; }
.b-comm-page .ex-seq { margin: 1.5rem auto 1rem; }

/* The audio player: a compact bar pinned to the foot of the screen. */
.b-player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; flex-direction: column; align-items: center;
  background: var(--b-sheet, var(--panel)); border-top: 1px solid var(--b-sheet-edge, var(--divider));
  /* A little room above the controls; the home-indicator inset goes below them, where the time,
     the place and Voice sit (Larry, 2026-10-03: the space above looked too big). */
  padding: .55rem 1rem calc(.5rem + env(safe-area-inset-bottom) / 2);
  box-shadow: 0 -4px 12px rgba(0,0,0,.15);
  touch-action: manipulation;
}
.b-player-row {
  display: flex; align-items: center; justify-content: center; gap: 2rem;   /* (Larry, 2026-10-14: "slightly farther" from play) */
}
/* ‹ ▶ ›: filled glyphs in an accent circle drawn at the icons' weight; play filled with the accent
   (Larry, 2026-10-14: bigger for fingers on a phone, a wider gap from play, larger glyphs, a darker
   circle, "MOAR color"). */
.b-player-row button {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1.8px solid var(--accent); color: var(--accent);
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer; padding: 0;
  touch-action: manipulation;
}
.b-player-row button.b-play { width: 62px; height: 62px; background: var(--accent); color: #fff; }
/* Under the pointer, or a finger's press, ‹ and › fill like Play (Larry, 2026-10-14: the halo made them "greyer"; "Make
   it more striking"). Hover only where there is a pointer, so a tap on a phone doesn't leave one filled. */
@media (hover: hover) {
  .b-player-row button:hover { background: var(--accent); color: #fff; /* design-ok: player-fill-hover */ }
}
.b-player-row button:active { background: var(--accent); color: #fff; /* design-ok: player-fill-hover */ }
.b-player-row button.b-play:hover, .b-player-row button.b-play:active { background: var(--accent-dark); border-color: var(--accent-dark); /* design-ok: filled-hover */ }
.b-player-row button svg { display: block; width: 30px; height: 30px; }
.b-player-row button.b-play svg { width: 36px; height: 36px; }
@media (pointer: coarse) {
  .b-player-row button { width: 58px; height: 58px; }
  .b-player-row button.b-play { width: 70px; height: 70px; }
  .b-player-row button svg { width: 34px; height: 34px; }
  .b-player-row button.b-play svg { width: 40px; height: 40px; }
}
/* The place marker (card #316): a thin red arrow in the right margin, pointing at the verse of your place; its button
   is larger than the arrow, for the finger. It glides when it moves. Loose (tapped), it stays in the middle of the
   screen with "Tap again to set" beside it. Off screen, a stub at the screen's edge points to it. */
.b-page { position: relative; }
.b-marker, .b-marker-stub {
  position: absolute; z-index: 3; width: 34px; height: 44px; margin: -22px 0 0; padding: 0 2px 0 0;
  display: flex; align-items: center; justify-content: flex-end;
  background: none; border: 0; color: var(--marker); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.b-marker[hidden], .b-marker-stub[hidden] { display: none; }
.b-marker svg, .b-marker-stub svg { width: 16px; height: 16px; }
.b-marker.b-glide { transition: top .45s ease, left .45s ease; }
.b-marker.b-loose { position: fixed; z-index: 9; }
.b-marker-tip {
  display: none; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 2px;
  font-size: .85rem; white-space: nowrap; padding: .3rem .6rem; border-radius: 8px; color: var(--text);
  background: var(--b-sheet, var(--popover)); border: 1px solid var(--b-sheet-edge, var(--divider)); box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.b-marker.b-loose .b-marker-tip { display: block; }
.b-marker { touch-action: none; }                    /* dragged, it moves and the page doesn't (card #349) */
.b-marker.b-loose.b-drag .b-marker-tip { display: none; }
.b-marker-stub { position: fixed; z-index: 9; height: 44px; margin-top: -22px; }   /* (a 44px reach: card #470) */
/* Quiet, the stub is a red dot (card #330), less in the way than an arrow. */
.b-marker-dot { width: 10px; height: 10px; margin-right: 3px; border-radius: 50%; background: currentColor; }
/* While the marker is being moved, a pale copy where it would go back to; a tap puts it back (card #331). */
.b-marker-stub.b-home .b-marker-dot { opacity: .35; }
/* The halo (DESIGN.md §3): a circle on the arrow as seen, not the whole tap area. */
.b-marker::before, .b-marker-stub::before { content: ''; position: absolute; width: 28px; height: 28px; top: calc(50% - 14px); right: -5px; border-radius: 50%; }
.b-marker-stub::before { right: -4px; }
@media (hover: hover) { .b-marker:hover::before, .b-marker-stub:hover::before { background: var(--halo); } }
/* In a commentary step, the arrow sits in a margin kept on the right of each comment, and scrolls with it. The pages
   reach into the sheet's own right margin for it, so the column is as wide as on the reading pages (#328; Larry: "an
   extra, unnecessary bit of padding on the right side of the commentary page"). */
.b-comm.b-seq .b-comm-page { position: relative; padding-right: 24px; }
.b-comm.b-seq .b-comm-track { margin-right: -1.25rem; }
.b-player-ref {
  text-align: center;
  font-size: .75rem; color: var(--b-muted, var(--muted));
  /* Room between it and the buttons (Larry, 2026-10-03: "move the chapter and verse down further
     below the play button"); the time and Voice stay on its line, at the bar's foot. */
  line-height: 1; margin-top: .85rem;
  /* One line, between the time and Voice, never under them. */
  /* Never an ellipsis: a short book name where the full one doesn't fit (fitPlace in bible.js). */
  max-width: calc(100% - 15.5rem); white-space: nowrap; overflow: hidden;
}
.b-player-ref:empty { display: none; }
/* Where you are in the recording and its length, at the bar's left, mirroring the Voice link. */
.b-player-time {
  position: absolute; left: max(calc(1rem + 10px), calc(50% - 17.75rem)); bottom: calc(.5rem + env(safe-area-inset-bottom) / 2);
  font-size: .75rem; line-height: 1; color: var(--b-muted, var(--muted)); font-variant-numeric: tabular-nums;
}
.b-player-time:empty { display: none; }
.b-voice-link {
  /* Under the right edge of the text (a 38rem column with 1.25rem padding), or in from the
     screen's edge on a phone. */
  position: absolute; right: max(calc(1rem + 10px), calc(50% - 17.75rem)); bottom: calc(.5rem + env(safe-area-inset-bottom) / 2);
  font-size: .75rem; line-height: 1; color: var(--b-muted, var(--muted)); background: none; border: 0;
  cursor: pointer; padding: 0;
}
.b-voice-link:hover { text-decoration: underline; }
/* Speed, just left of Voice, in the same small type; its list opens above it as Voice's does. */
.b-speed-link {
  position: absolute; right: calc(max(calc(1rem + 10px), calc(50% - 17.75rem)) + 2.9rem); bottom: calc(.5rem + env(safe-area-inset-bottom) / 2);
  font-size: .75rem; line-height: 1; color: var(--b-muted, var(--muted)); background: none; border: 0;
  cursor: pointer; padding: 0; font-variant-numeric: tabular-nums;
}
.b-speed-link:hover { text-decoration: underline; }
.b-speed-link[hidden] { display: none; }
.b-voices.b-speeds { right: calc(max(.5rem, calc(50% - 17.75rem)) + 2.4rem); min-width: 4.5rem; }
.b-voices {
  position: absolute; bottom: 100%; right: max(.5rem, calc(50% - 17.75rem)); margin-bottom: .4rem;
  background: var(--b-sheet, var(--panel)); border: 1px solid var(--popover-rim);
  border-radius: 10px; padding: .4rem; max-height: 50vh; overflow-y: auto;
  box-shadow: var(--popover-lift); display: flex; flex-direction: column; gap: .15rem;
}
.b-voices button {
  all: unset; display: block; padding: .4rem .8rem; border-radius: 6px; font-size: .85rem;
  white-space: nowrap; cursor: pointer;
}
.b-voices button:hover { background: var(--halo); }
.b-voices button.on { font-weight: 600; color: var(--accent); background: var(--chosen); box-shadow: inset 3px 0 0 var(--accent); }
.b-player[hidden] { display: none; }
/* The tint for what is being read, one strength for both players (the verse here, the sentence in
   the commentary): stronger in the dark. */
body.bible-app { --b-reading: 16%; }
:root[data-theme="dark"] body.bible-app { --b-reading: 35%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.bible-app { --b-reading: 35%; } }
.v.b-speaking { background: color-mix(in srgb, var(--accent) var(--b-reading), transparent); border-radius: 3px; }
/* A heading while it's read aloud (bible.js trackRec): lit as a verse is. */
.b-title.b-speaking, .b-ms.b-speaking, .b-s.b-speaking, .b-d.b-speaking { background: color-mix(in srgb, var(--accent) var(--b-reading), transparent); border-radius: 3px; }
:root[data-theme="dark"] .v.b-speaking { background: color-mix(in srgb, var(--accent) 35%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .v.b-speaking { background: color-mix(in srgb, var(--accent) 35%, transparent); }
}
/* The word being read: a rounded block behind it, a shade stronger than the verse's tint. The
   spread shadow pads it out without moving the words around it. */
.b-w-on {
  --b-word: color-mix(in srgb, var(--accent) 38%, var(--b-bg, var(--bg)));
  background: var(--b-word); box-shadow: 0 0 0 .14em var(--b-word);
  border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
:root[data-theme="dark"] .b-w-on { --b-word: color-mix(in srgb, var(--accent) 75%, var(--b-bg, var(--bg))); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .b-w-on { --b-word: color-mix(in srgb, var(--accent) 75%, var(--b-bg, var(--bg))); }
}
/* Spans lit together (a word in two spans, "(Proverbs"; or several words, "people. …") are one block: square
   where one meets the next, and the left one's fill carried over the space between (bible.js WordLight.joins). */
.b-w-on.b-w-jr { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.b-w-on.b-w-jl { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.b-w-on.b-w-jr, .b-comm-page .b-w-in.b-w-on.b-w-jr, .b-art-reading .b-w-in.b-w-on.b-w-jr { box-shadow: 0 0 0 .14em var(--b-word), .3em 0 0 .14em var(--b-word); }

/* The note sheet */
/* .b-peek: a verse a commentary cites, over the commentary (itself a .b-sheet): the same sheet. */
.b-sheet, .b-peek {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--b-sheet); color: var(--text);
  border-top: 1px solid var(--b-sheet-edge); border-radius: 14px 14px 0 0; padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  box-shadow: 0 -1px 0 var(--b-rule), 0 -10px 34px rgba(0,0,0,.28);
  max-height: 50dvh; overflow-y: auto;
  /* A drag that reaches the end of the sheet stops there instead of passing to the chapter behind,
     which on a phone rubber-bands the page and carries this pinned sheet along with it. */
  overscroll-behavior: contain;
}
/* The parts of the sheet that are not a scrolling surface: a drag on them should do nothing at
   all. (Not on .b-sheet itself — the verse sheet scrolls when its buttons don't fit.) */
.b-comm-head, .b-comm-foot, .b-look { touch-action: none; }
/* The sheet sits over the chapter, so the join wants to be plain: a defined edge along the top,
   and a shadow deep enough to lift it off the text. */
.b-sheet, .b-peek { border-top: 2px solid var(--b-sheet-edge); }
.b-peek { z-index: 36; }            /* over the commentary and its player (35) */
/* No line of space below its last line (Larry, 2026-10-03): the foot as the player's. */
.b-peek { padding-bottom: calc(.55rem + env(safe-area-inset-bottom) / 2); }
.b-peek > :last-child { margin-bottom: 0; }
/* In the dark the page is nearly black and the old sheet only a shade lighter, with a top line
   darker than either: the sheet gets a surface a clear step up and an edge you can see. */
:root { --b-sheet: var(--panel); --b-sheet-edge: var(--divider); --b-sheet-rule: var(--divider); }
:root[data-theme="dark"] { --b-sheet: #2b2f36; --b-sheet-edge: #646b76; --b-sheet-rule: #41464e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --b-sheet: #2b2f36; --b-sheet-edge: #646b76; --b-sheet-rule: #41464e; }
}
:root[data-theme="dark"] .b-sheet, :root[data-theme="dark"] .b-peek { box-shadow: 0 -1px 0 rgba(255,255,255,.14), 0 -12px 36px rgba(0,0,0,.6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .b-sheet, :root:not([data-theme="light"]) .b-peek { box-shadow: 0 -1px 0 rgba(255,255,255,.14), 0 -12px 36px rgba(0,0,0,.6); }
}
.b-sheet h3, .b-peek h3 { margin: 0 0 .4rem; font-size: .9rem; color: var(--muted); font-weight: 600; }
.b-sheet p, .b-peek p { margin: 0 0 .5rem; font-size: 1rem; line-height: 1.5; }
.b-sheet .b-xref { color: var(--accent); }

/* Today's reading */
.b-fixed { pointer-events: none; }
.b-fixed .b-ref { pointer-events: auto; cursor: default; }      /* its tooltip: the day's passages */
.b-none { color: var(--b-muted); }
.b-finish { margin: 2rem 0 1rem; text-align: center; }
.b-finish .primary { padding: .7rem 1.4rem; font-size: 1rem; }
.b-doneline { color: var(--b-muted); }

/* What you can do with a verse */
/* The publisher's own words, under a translation we read from API.Bible rather than hold. */
.b-notice {
  margin: 2rem 0 0; padding-top: .8rem; border-top: 1px solid var(--b-rule);
  font-size: .78rem; line-height: 1.5; color: var(--b-muted, var(--muted));
}
.b-quoted { font-size: .95rem; line-height: 1.45; color: var(--muted); margin: 0 0 .8rem; }
/* A button on a sheet needs its own surface: in the dark theme the page's background is nearly
   black and the sheet is only a little lighter, so a button colored like the page disappears
   into it. These sit a step above the sheet, with an edge you can see. */
:root { --b-btn: var(--bg); --b-btn-edge: var(--divider); }
:root[data-theme="dark"] { --b-btn: #383d45; --b-btn-edge: #5a616b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --b-btn: #383d45; --b-btn-edge: #5a616b; }
}

.b-acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.b-acts button { flex: 1 1 8rem; background: var(--b-btn); border: 1px solid var(--b-btn-edge); border-radius: 10px; color: inherit; font-size: .95rem; padding: .6rem .8rem; }

/* The password sheet for a member's own translation, and the page when it stays locked */
.b-unlock form { margin: 0; }
.b-unlock .b-acts button.primary { background: var(--button); border-color: var(--button); color: var(--button-ink); }
.b-unlock-err { color: #c00000; }
:root[data-theme="dark"] .b-unlock-err { color: #ff453a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .b-unlock-err { color: #ff453a; }
}
.b-chapter .b-byo-unlock { flex: 0 1 auto; margin-top: .5rem; }

/* Search */
.b-find { position: fixed; inset: 0; z-index: 40; background: var(--panel); color: var(--text); display: flex; flex-direction: column; }
.b-find header { display: flex; gap: .5rem; align-items: center; padding: calc(.6rem + env(safe-area-inset-top)) .8rem .6rem; border-bottom: 1px solid var(--divider); }
/* The words sit in their own box so Clear can sit at the end of them. Clear empties the words;
   the ✕ outside closes the search altogether. */
.b-find-box { flex: 1; position: relative; display: flex; }
.b-find-box input { padding-right: 4.1rem; }
.b-clear {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  border: 1px solid var(--b-rule); border-radius: 999px; background: var(--b-btn);
  color: var(--muted); font: inherit; font-size: .72rem; font-weight: 600;
  padding: .12rem .5rem; cursor: pointer;
}
.b-clear:hover { border-color: var(--accent); color: var(--accent); }
/* The browser's own ✕ inside a search field would make two of them. */
.b-find input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.b-find input { flex: 1; font-size: 1rem; padding: .45rem .6rem; border-radius: 10px; border: 1px solid var(--field-edge); background: var(--bg); color: inherit; }
.b-scopes { display: flex; gap: .4rem; overflow-x: auto; padding: .6rem .8rem; border-bottom: 1px solid var(--divider); }
.b-scopes button { flex: none; background: var(--bg); border: 1px solid var(--divider); border-radius: 999px; color: inherit; font-size: .85rem; padding: .35rem .8rem; }
.b-scopes button.on { background: var(--selected); border-color: var(--selected); color: var(--selected-ink); }
.b-scopes button:not(.on):hover { background: var(--halo); }
.b-hits { flex: 1; overflow-y: auto; padding: .4rem 1rem 2rem; }
/* Which translations are being looked in: the same chips as the scope row, checked in any number. */
.b-vers button.on { background: var(--selected); border-color: var(--selected); color: var(--selected-ink); }
/* Said once, at the top, when the translation being read isn't one of the ones searched. */
.b-find-note {
  margin: 0; padding: .55rem 1rem; font-size: .82rem; line-height: 1.45;
  background: var(--accent-soft); color: var(--text); border-bottom: 1px solid var(--divider);
}
.b-find-syntax { font-size: .82rem; color: var(--muted); }
.b-find-syntax b { font-weight: 600; color: inherit; }
/* Books…: every book, checked in any combination. */
.b-books-pick { max-height: 46vh; overflow-y: auto; padding: 0 1rem .6rem; border-bottom: 1px solid var(--divider); }
/* …and, between the Testaments, "Include the Apocrypha" (T5): shown only here, off unless checked. */
.b-books-pick .b-apoc-pick { margin: .2rem 0 .1rem; font-size: .95rem; }
.b-books-acts { display: flex; gap: .5rem; justify-content: flex-end; margin: .7rem 0 .2rem; }
.b-books-acts button {
  min-height: 2.2rem; padding: .3rem .9rem; font-size: .9rem; border-radius: 9px;
  border: 1px solid var(--b-btn-edge); background: var(--b-btn); color: inherit; cursor: pointer;
}
.b-books-acts button.primary { background: var(--button); border-color: var(--button); color: var(--button-ink); }
.b-books-acts button:not(.primary):hover { background: var(--halo); }
/* A result: the reference, the translations the words turn up in, then the wording of the first
   of them. Tapping the words reads the verse in whatever is being read; tapping a translation
   reads it in that one. */
.b-xhead { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .2rem; }
.b-xvers { display: flex; gap: .25rem; flex-wrap: wrap; }
.b-xver {
  padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--b-rule);
  background: none; color: var(--muted); font: inherit; font-size: .72rem; font-weight: 600;
  cursor: pointer;
}
.b-xver:hover { border-color: var(--accent); color: var(--accent); }
.b-xver.on { background: var(--chosen); border-color: transparent; color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.b-xgo {
  display: block; width: 100%; text-align: left; margin: .15rem 0 0; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; line-height: 1.5; cursor: pointer;
}
.b-hint, .b-count { color: var(--muted); font-size: .9rem; }
.b-goto { display: block; width: 100%; text-align: left; background: var(--accent-soft, rgba(51,144,236,.12)); border: 0; border-radius: 10px; color: inherit; font-size: 1rem; padding: .7rem .9rem; margin: .5rem 0; }
.b-hits mark { background: rgba(255, 213, 79, .45); color: inherit; border-radius: 3px; /* design-ok: same-both-themes */ }

/* The book and chapter picker */
.b-picker { position: fixed; inset: 0; z-index: 40; background: var(--panel); color: var(--text); display: flex; flex-direction: column; }
.b-picker header { display: flex; gap: .5rem; align-items: center; padding: .6rem .8rem; border-bottom: 1px solid var(--divider); }
/* The close button on a full-screen panel: a glyph, not a browser's gray box. */
.b-close {
  flex: none; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%;
  background: none; color: var(--b-muted, var(--muted)); font-size: 1.1rem; cursor: pointer;
}
.b-close:hover { background: var(--halo); color: inherit; }
.b-picker input { flex: 1; font-size: 1rem; padding: .45rem .6rem; border-radius: 10px; border: 1px solid var(--field-edge); background: var(--bg); color: inherit; }
.b-picker .b-list { flex: 1; overflow-y: auto; padding: .4rem 0 2rem; }
.b-picker .b-group { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: .8rem 1rem .3rem; }
.b-picker button.b-bk { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; font-size: 1rem; padding: .6rem 1rem; }
/* The book being read: the chosen item's look (card #343, DESIGN.md §2a), blue on a soft blue fill, with a bar. */
.b-picker button.b-bk.on { color: var(--accent); font-weight: 700; background: var(--chosen); box-shadow: inset 3px 0 0 var(--accent); border-radius: 6px; }
.b-picker button.b-bk:hover { background: var(--halo); }
/* On a phone the books wrap, as chips, rather than one name to a line (Larry, 19 Oct, card #218: "I want the Bible
   book selector to wrap, not be a list, on the phone"); rectangular, as the translations are (card #254: "these should be similar "chips""). */
@media (max-width: 759px) {
  .b-picker .b-books { display: flex; flex-wrap: wrap; gap: .4rem; padding: .2rem 1rem .4rem; }
  .b-picker button.b-bk { width: auto; min-height: 44px; padding: 0 .85rem; border: 1px solid var(--divider); border-radius: var(--chip-radius); background: var(--bg); font-size: .95rem; }
  .b-picker button.b-bk.on { border-color: var(--accent); background: var(--chosen); border-radius: var(--chip-radius); }
}
/* The Apocrypha (T5): a group between the Testaments, closed until its name is tapped; the name keeps the groups'
   look, with a › at the right that turns when open, as a menu's sections have (DESIGN.md §5). */
.b-picker .b-apoc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; box-sizing: border-box; padding-top: .8rem; padding-bottom: .3rem; }
.b-picker .b-apoc > summary::-webkit-details-marker { display: none; }
.b-picker .b-apoc > summary::after { content: '›'; font-size: 1.15rem; line-height: 1; text-transform: none; transition: transform .15s ease; }
.b-picker .b-apoc[open] > summary::after { transform: rotate(90deg); }
.b-picker .b-apoc > summary:hover { background: var(--halo); }
/* Recent chapters, at the top of the picker */
.b-recent { display: flex; flex-wrap: wrap; gap: .4rem; padding: .2rem 1rem .6rem; }
.b-chip { background: var(--bg); border: 1px solid var(--divider); border-radius: var(--chip-radius); color: inherit; font-size: .9rem; padding: .4rem .8rem; }
.b-chip:hover { background: var(--halo); }

.b-chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: .4rem; padding: .6rem 1rem 1.5rem; }
.b-chapters button { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--divider); background: var(--bg); color: inherit; font-size: .95rem; }
.b-chapters button.on { background: var(--selected); color: var(--selected-ink); border-color: var(--selected); }
.b-chapters button:not(.on):hover { background: var(--halo); }

/* On a wide screen the picker holds its content in a column and sets the books in three, rather
   than running one name per line across the whole window. The search panel does the same. */
@media (min-width: 760px) {
  .b-picker header, .b-find header { max-width: 46rem; width: 100%; margin-inline: auto; }
  .b-picker .b-list, .b-find .b-hits, .b-find .b-scopes { max-width: 46rem; width: 100%; margin-inline: auto; }
  .b-picker .b-books { columns: 3; column-gap: 1.5rem; }
  .b-picker button.b-bk { break-inside: avoid; }
  .b-chapters { grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); }
}


/* The verse picked out by a tap, waiting for the second one that opens its actions. A neutral
   tint, not one of the highlight colors, so a picked verse is never mistaken for a highlighted
   one — and a tint rather than an underline, because a dotted underline in this text already
   means "there are cross-references here". It outlives no more than the next tap. */
.b-chapter .v.b-picked {
  --b-pick: 11%;
  background: color-mix(in srgb, currentColor var(--b-pick), transparent);
  border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor var(--b-pick), transparent);
}
/* Light text on a dark page needs more of itself to show; paper a little more than white. */
:root[data-theme="dark"] .b-chapter .v.b-picked { --b-pick: 32%; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .b-chapter .v.b-picked { --b-pick: 32%; }
}
body.bible-app.b-paper .b-chapter .v.b-picked { --b-pick: 16%; }

/* ---------- a person's own marks ---------- */
/* The tint sits behind the words rather than over them, so the text keeps its contrast in both
   themes: in the dark one the colors are dimmed to a wash. */
.b-chapter .b-hl { border-radius: 3px; padding: .06em 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.b-chapter .b-hl-yellow { background: #fff3a8; /* design-ok: same-both-themes */ }
.b-chapter .b-hl-green  { background: #c7f0c2; /* design-ok: same-both-themes */ }
.b-chapter .b-hl-blue   { background: #c8e4ff; /* design-ok: same-both-themes */ }
.b-chapter .b-hl-pink   { background: #ffd4e6; /* design-ok: same-both-themes */ }
.b-chapter .b-hl-orange { background: #ffdcb5; /* design-ok: same-both-themes */ }
.b-chapter .b-hl { color: #1c1b18; /* design-ok: same-both-themes */ }
:root[data-theme="dark"] body.bible-app:not(.b-paper) .b-chapter .b-hl { color: inherit; }
:root[data-theme="dark"] body.bible-app:not(.b-paper) .b-chapter .b-hl-yellow { background: #5c5320; /* design-ok: same-both-themes */ }
:root[data-theme="dark"] body.bible-app:not(.b-paper) .b-chapter .b-hl-green  { background: #29512a; /* design-ok: same-both-themes */ }
:root[data-theme="dark"] body.bible-app:not(.b-paper) .b-chapter .b-hl-blue   { background: #234260; /* design-ok: same-both-themes */ }
:root[data-theme="dark"] body.bible-app:not(.b-paper) .b-chapter .b-hl-pink   { background: #5d2c43; /* design-ok: same-both-themes */ }
:root[data-theme="dark"] body.bible-app:not(.b-paper) .b-chapter .b-hl-orange { background: #5e4021; /* design-ok: same-both-themes */ }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.bible-app:not(.b-paper) .b-chapter .b-hl { color: inherit; }
  :root:not([data-theme="light"]) body.bible-app:not(.b-paper) .b-chapter .b-hl-yellow { background: #5c5320; /* design-ok: same-both-themes */ }
  :root:not([data-theme="light"]) body.bible-app:not(.b-paper) .b-chapter .b-hl-green  { background: #29512a; /* design-ok: same-both-themes */ }
  :root:not([data-theme="light"]) body.bible-app:not(.b-paper) .b-chapter .b-hl-blue   { background: #234260; /* design-ok: same-both-themes */ }
  :root:not([data-theme="light"]) body.bible-app:not(.b-paper) .b-chapter .b-hl-pink   { background: #5d2c43; /* design-ok: same-both-themes */ }
  :root:not([data-theme="light"]) body.bible-app:not(.b-paper) .b-chapter .b-hl-orange { background: #5e4021; /* design-ok: same-both-themes */ }
}

/* A bookmark or a note leaves a small flag at the end of the verse. */
.b-flag {
  background: none; border: 0; padding: 0 .15em; cursor: pointer; line-height: 1;
  font-size: .72em; vertical-align: .2em; color: var(--accent);
}
.b-flag-bookmark { color: #d1584f; cursor: default; /* design-ok: same-both-themes */ }
/* A note's flag: a bold drawn pencil on an accent disc, big enough to see and to tap. */
.b-flag-note {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.45em; height: 1.45em; margin-left: .25em; padding: 0; border-radius: 50%;
  font-size: .85em; vertical-align: -.2em;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.b-flag-note svg {
  width: 1em; height: 1em;
}
/* Dark's accent is a mid blue: the pencil takes the lighter ink used for the lone Back glyph. */
:root[data-theme="dark"] body.bible-app:not(.b-paper) .b-flag-note {
  color: var(--back-ink, #7fb2ff); background: color-mix(in srgb, var(--back-ink, #7fb2ff) 20%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.bible-app:not(.b-paper) .b-flag-note {
    color: var(--back-ink, #7fb2ff); background: color-mix(in srgb, var(--back-ink, #7fb2ff) 20%, transparent);
  }
}
body.b-plain .b-flag { display: none; }

.b-swatches { display: flex; justify-content: center; align-items: center; gap: .55rem; margin: 0 0 .7rem; }
.b-sw-label { font-size: .9rem; color: var(--muted); margin-right: .15rem; }
.b-sw { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); cursor: pointer; /* design-ok: same-both-themes */ }
/* The colors as little glass beads: a light catching the top left, a shade underneath. */
.b-sw:not(.b-sw-off) {
  background-image: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,0) 42%),
                    linear-gradient(to bottom, rgba(255,255,255,.18), rgba(0,0,0,.14));
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.25);
/* design-ok: same-both-themes */ }
.b-sw.on { box-shadow: 0 0 0 2px var(--accent); }
.b-sw.on:not(.b-sw-off) { box-shadow: inset 0 -2px 3px rgba(0,0,0,.18), 0 0 0 2px var(--accent); }
/* A bead keeps its color under the pointer; the halo rings it instead. */
@media (hover: hover) {
  .b-sw:not(.on):hover { box-shadow: inset 0 -2px 3px rgba(0,0,0,.18), 0 0 0 4px var(--halo); }
  .b-sw-off:not(.on):hover { box-shadow: 0 0 0 4px var(--halo); }
}
.b-sw-yellow { background-color: #ffe97a; /* design-ok: same-both-themes */ } .b-sw-green { background-color: #a8e6a0; /* design-ok: same-both-themes */ }
.b-sw-blue { background-color: #a6d2ff; /* design-ok: same-both-themes */ } .b-sw-pink { background-color: #ffb8d5; /* design-ok: same-both-themes */ }
.b-sw-orange { background-color: #ffc588; /* design-ok: same-both-themes */ }
.b-sw-off { background: var(--b-btn); border-color: var(--b-btn-edge); color: var(--muted); font-size: .9rem; }
.b-notebox {
  width: 100%; box-sizing: border-box; margin: 0 0 .7rem; padding: .6rem;
  border: 1px solid var(--field-edge); border-radius: 10px; background: var(--bg); color: inherit;
  font: inherit; font-size: 1rem; resize: vertical;
}

/* ---------- the My marks screen ---------- */
.b-marks { padding: 0 1rem 3rem; max-width: 40rem; margin: 0 auto; }
.b-latest-set { margin: .8rem 0 0; }   /* the box that shows it, off at first (card #317) */
.b-latest { margin: .8rem 0 0; }   /* Latest bookmark, above the tabs (card #78) */
/* Filled like button.primary, with the bookmark's icon, so it isn't taken for one of the tabs (card #122). */
.b-latest-go {
  display: inline-flex; align-items: center; gap: .5rem; min-height: var(--tap); padding: 0 1rem; max-width: 100%;
  border-radius: 10px; background: var(--button); color: var(--button-ink); font-weight: 600; text-decoration: none;
}
.b-latest-go:hover { background: var(--button-hover); /* design-ok: filled-hover */ }
.b-latest-go .ic { width: 20px; height: 20px; flex: none; }
.b-latest-go span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-tabs { display: flex; gap: 11px .4rem; flex-wrap: wrap; margin: .8rem 0 1rem; }   /* (rows 11px apart: the 44px reaches, app.css, meet) */
.b-tab {
  font-size: .85rem; padding: .3rem .7rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--b-rule); color: var(--muted);
}
.b-tab.on { background: var(--selected); border-color: var(--selected); color: var(--selected-ink); }
.b-order { align-items: center; margin-top: -.2rem; }   /* newest first or Bible order (card #27) */
.b-order-label { font-size: .85rem; color: var(--muted); }
.b-mark { border-bottom: 1px solid var(--b-rule); padding: .8rem 0; }
.b-mark-ref { font-weight: 600; text-decoration: none; color: var(--accent); display: inline-flex; align-items: center; gap: .55rem; }
/* The kind of mark, before its reference (card #124): bookmark and note in the accent on its soft tint; a highlight
   on its own color (yellow where none is set), the ink dark in both themes. */
.b-mark-sign {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.b-mark-sign .ic { width: 18px; height: 18px; }
.b-kind-title { display: flex; align-items: center; gap: .6rem; font-size: 1.4rem; margin: 0 0 .4rem; }   /* the kind shown (card #125) */
.b-kind-title .b-mark-sign { width: 36px; height: 36px; }
.b-kind-title .b-mark-sign .ic { width: 21px; height: 21px; }
.b-kind-highlight .b-mark-sign { background: #ffe97a; color: #333; /* design-ok: same-both-themes */ }   /* a highlighter's yellow where no color is set (the heading, card #125) */
.b-c-yellow .b-mark-sign { background: #ffe97a; /* design-ok: same-both-themes */ }
.b-c-green .b-mark-sign { background: #a8e6a0; /* design-ok: same-both-themes */ }
.b-c-blue .b-mark-sign { background: #a6d2ff; /* design-ok: same-both-themes */ }
.b-c-pink .b-mark-sign { background: #ffb8d5; /* design-ok: same-both-themes */ }
.b-c-orange .b-mark-sign { background: #ffc588; /* design-ok: same-both-themes */ }
.b-mark-text { margin: .35rem 0; line-height: 1.5; color: var(--muted); }
.b-kind-note .b-mark-text { border-left: 4px solid var(--b-rule); padding-left: .6rem; }
.b-kind-highlight .b-mark-text { border-left: 4px solid var(--b-rule); padding-left: .6rem; }
.b-c-yellow.b-mark .b-mark-text { border-left-color: #ffe97a; /* design-ok: same-both-themes */ }
.b-c-green.b-mark .b-mark-text { border-left-color: #a8e6a0; /* design-ok: same-both-themes */ }
.b-c-blue.b-mark .b-mark-text { border-left-color: #a6d2ff; /* design-ok: same-both-themes */ }
.b-c-pink.b-mark .b-mark-text { border-left-color: #ffb8d5; /* design-ok: same-both-themes */ }
.b-c-orange.b-mark .b-mark-text { border-left-color: #ffc588; /* design-ok: same-both-themes */ }
.b-mark-note { margin: .45rem 0 .2rem; white-space: pre-wrap; line-height: 1.5; }
.b-mark-when { margin: .2rem 0 0; font-size: .78rem; color: var(--muted); }
.b-marks-note, .b-imported { font-size: .85rem; color: var(--muted); margin: 1.4rem 0 0; line-height: 1.5; }
.b-delete-all { margin: 1.6rem 0 0; }
.b-one-bookmark { margin: .8rem 0 0; }
.b-import { margin: 0 0 1rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* ---------- the commentary sheet ---------- */
/* One commentary fills the sheet; the next is a swipe to the left. */
/* A definite height, not just a limit: the pages inside are sized against it, and without one
   they grow to the length of the commentary and the chapter behind scrolls instead. */
.b-comm {
  height: 76dvh; max-height: 76dvh; overflow: hidden;
  display: flex; flex-direction: column;
}
.b-comm-body { overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 0 .7rem; }
.b-comm-head { display: flex; align-items: center; gap: .3rem; margin: 0 0 .5rem; }
.b-comm-name { flex: 1; min-width: 0; text-align: center; }
.b-comm-name .b-comm-who {
  display: block; font-size: .95rem; font-weight: 700; color: var(--accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.b-comm-name .b-comm-when { display: block; font-size: .76rem; color: var(--muted); }
.b-comm-step {
  flex: none; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; padding: 0;
  display: grid; place-items: center; background: none; color: var(--accent); cursor: pointer;
  position: relative;
}
/* The tap is taken well round the round button, corners and all (Larry, 2026-10-13: "limited to the characters,
   rather than the space around them. Widen."); the circle stays what is seen. */
.b-comm-step::before { content: ""; position: absolute; inset: -10px -8px; }
.b-comm-step:disabled { color: var(--divider); cursor: default; }
.b-comm-on .ic { transform: scaleX(-1); }
/* The track is the window; the rail inside it is what moves, so the pages either side stay
   hidden. (Transforming the window itself would carry its own clipping along with it.) */
.b-comm-track { flex: 1; min-height: 0; overflow: hidden; margin: 0 0 .7rem; }
.b-comm-rail { display: flex; gap: 16px; height: 100%; will-change: transform; }   /* RAIL_GAP in bible.js */
.b-comm-page {
  flex: 0 0 100%; height: 100%; box-sizing: border-box;
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: .2rem;   /* no overflow-x: hidden, which stopped the swipe on an iPhone (#332) */
  overscroll-behavior: contain;      /* reaching the end doesn't move the chapter behind */
  touch-action: pan-y;
}
.b-comm-page p { margin: 0 0 .55rem; font-size: .97rem; line-height: 1.55; }
/* On a wide screen the comment keeps a readable column, as the Bible text does. */
/* A sheet spans the window, but what it says belongs under the column it refers to: a note on a
   verse read at the far left of a wide screen, with the verse itself in the middle, is a note
   about nothing in particular. */
@media (min-width: 760px) {
  /* 38rem is the column, 1.25rem the page's own padding and 1.1rem the chapter's: together they
     put a sheet's first word exactly under the first word of a verse. */
  .b-sheet { padding-inline: max(1.25rem, calc((100% - 38rem) / 2 + 2.35rem)); }
}
.b-comm-wait { color: var(--muted); }
.b-comm-entry { margin: 0 0 .9rem; }
.b-comm-entry summary {
  cursor: pointer; list-style: none; margin: 0 0 .3rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .01em; text-transform: uppercase;
  color: var(--accent);
}
.b-comm-entry summary::-webkit-details-marker { display: none; }
.b-comm-entry summary span + span { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.b-comm-entry:not([open]) summary { margin-bottom: 0; padding-bottom: .55rem; border-bottom: 1px solid var(--b-rule); }
.b-comm-entry p { margin: 0 0 .55rem; font-size: .97rem; line-height: 1.55; }
.b-comm-more {
  flex: 1 1 8rem; text-align: center; background: var(--b-btn); border: 1px solid var(--b-btn-edge);
  border-radius: 10px; color: inherit; font-size: .95rem; padding: .6rem .8rem; text-decoration: none;
}
.b-works { overflow-y: auto; max-height: 56vh; margin: 0 0 .7rem; }
.b-work {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: .7rem; row-gap: 0; padding: .4rem .1rem; border-bottom: 1px solid var(--b-rule);
}
.b-work input { grid-column: 1; grid-row: 1 / span 2; width: 1.1rem; height: 1.1rem; }
.b-work-name { grid-column: 2; grid-row: 1; font-size: .98rem; line-height: 1.3; }
.b-work-when { grid-column: 2; grid-row: 2; font-size: .78rem; line-height: 1.3; color: var(--muted); }
.b-work-away .b-work-name, .b-work-away .b-work-when { opacity: .55; }

/* Small buttons under the commentary: which works, resources, Bible Hub, and how it's set. */
.b-comm-foot { gap: .45rem; justify-content: center; }
.b-comm-foot button, .b-comm-foot .b-comm-more {
  flex: 1 1 0; min-width: 0; max-width: 11rem;      /* not the width of the window */
  padding: .55rem .4rem; font-size: .9rem;
}
.b-comm-foot [data-comm="look"] { flex: 0 0 3.2rem; max-width: 3.2rem; font-weight: 600; }
/* In a commentary step, what Choose says, its small "Whole Bible" button in the line (card #512). */
.b-comm-seqnote { margin: .5rem .75rem 0; text-align: center; font-size: .9rem; line-height: 1.7; color: var(--muted); }
.b-comm-seqnote button { padding: .1rem .55rem; margin: 0 .1rem; font-size: .85rem; }

/* How the commentary reads: a panel over the foot of the sheet, the text still visible behind. */
.b-look {
  /* Inside the sheet's own column, not the whole window: left/right 0 is the sheet's content
     edge, and the panel is no wider than it needs to be. */
  /* Sitting over the row of buttons, not part-way through it: 4rem was a guess at that row's
     height and landed across the middle of it. */
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  max-width: 22rem; margin-inline: auto;
  background: var(--popover); border: 1px solid var(--popover-rim); border-radius: var(--radius);
  box-shadow: var(--popover-lift); padding: .5rem .6rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.b-look-row { display: flex; align-items: center; gap: .4rem; }
.b-look-row > span { flex: 1; color: var(--muted); font-size: .85rem; }
.b-look-row button {
  flex: 0 0 auto; min-height: 2.2rem; padding: .3rem .7rem; font-size: .9rem;
  border: 1px solid var(--b-btn-edge); border-radius: 9px; background: var(--b-btn); color: inherit;
}
.b-look-faces button { flex: 1 1 0; }
.b-look-faces button.on { border-color: var(--accent); color: var(--accent); font-weight: 600; background: var(--chosen); box-shadow: inset 3px 0 0 var(--accent); }
.b-look [data-look="done"] { flex: 1; }

/* The commentary's own face and size, apart from the Bible text's. */
.b-comm-page { font-size: var(--c-size, 1rem); line-height: var(--c-lead, 1.55); }
.b-comm-page p { font-size: inherit; line-height: inherit; }
body.b-cfont-serif .b-comm-page { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; }
body.b-cfont-system .b-comm-page { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
body.b-cfont-legible .b-comm-page { font-family: "Atkinson Hyperlegible", Verdana, sans-serif; letter-spacing: .01em; }

/* A pointer wants to be told what it is over. */
.b-acts button:hover, .b-comm-more:hover, .b-look-row button:hover {
  background: var(--b-btn-hover); border-color: var(--b-btn-edge-hover);
/* design-ok: filled-hover */ }
.b-comm-step:not(:disabled):hover { background: var(--halo); }
:root { --b-btn-hover: #e9e9ee; --b-btn-edge-hover: #c9c9d1; }
:root[data-theme="dark"] { --b-btn-hover: #4a4a54; --b-btn-edge-hover: #7a7a86; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --b-btn-hover: #4a4a54; --b-btn-edge-hover: #7a7a86; }
}

/* The curated commentary: a capsule of the point, then who made it, then the comment itself. */
.b-comm-page .c-cap { margin: 1.1em 0 .3em; }
.b-comm-page .c-cap strong { font-weight: 600; }
.b-comm-page .c-attr { color: var(--muted); font-style: italic; white-space: nowrap; }

/* The group's commentary (DDBG): each member's note under their name, an editor's lead-in in italics, and a pill
   to the message on its board. Notes on one passage are stacked, a rule between them. */
.b-comm-page .c-note + .c-note { border-top: 1px solid var(--border); margin-top: 1.1em; padding-top: 1em; }
.b-comm-page .c-by { font-weight: 600; color: var(--muted); font-size: .85em; margin-bottom: .3em; }
.b-comm-page .c-lead { font-style: italic; color: var(--muted); }
.b-comm-page .c-date { color: var(--muted); }
.b-comm-page .c-note ul { margin: 0 0 .55rem; padding-left: 1.3em; }
.b-comm-page .c-note li { margin: 0 0 .3em; }
.b-comm-page .c-orig {
  display: inline-block; margin-left: .15em; padding: 0 .6em; border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); font-size: .78em; font-style: normal; line-height: 1.7; text-decoration: none;
  white-space: nowrap; vertical-align: .08em;
}
.b-comm-page .c-orig:hover { background: var(--halo); color: var(--text); }

/* Thompson's chains (cli/import_tcr.php): each chain's heading, then its first verse and its next.
   The topic's name after the heading, and "First" and "Next", are drawn, not written, so the voice
   reading the page doesn't say them. */
.b-comm-page .tcr-chain { margin: 0 0 1.1rem; }
.b-comm-page .tcr-topic { margin: 0 0 .35rem; font-size: 1rem; }
.b-comm-page .tcr-topic::after { content: " · " attr(data-topic); font-weight: normal; color: var(--muted); }
.b-comm-page .tcr-stop { margin: 0 0 .45rem; }
.b-comm-page .tcr-at, .b-comm-page .tcr-q { display: inline; }    /* blocks to the read-aloud, a line to the eye */
.b-comm-page .tcr-stop::before {
  content: "First"; display: inline-block; margin-right: .45em; padding: 0 .5em;
  border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); font-size: .72em; line-height: 1.6; vertical-align: .1em;
}
.b-comm-page .tcr-next::before { content: "Next"; }
.b-comm-page .tcr-ref { font-weight: 600; margin-right: .35rem; }
.b-comm-page .tcr-tail { margin-top: 1.1rem; padding-top: .7rem; border-top: 1px solid var(--divider); border-bottom: 0; }

/* "Commentary: Full screen". The sheet stops being a sheet and takes the whole screen, so nothing
   of the chapter shows beneath it — the square corners say so, and the top inset keeps the first
   line clear of the notch. */
body.b-commfull .b-comm {
  top: 0;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
}

/* The verse the commentary is about, above it. Set apart from the commentary's own prose: the
   reference in the muted color, the words themselves in italic, and a rule beneath. */
.b-comm-verse {
  margin: 0 0 .7rem; padding: 0 0 .7rem;
  border-bottom: 1px solid var(--divider);
  font-style: italic; font-size: .96rem; line-height: 1.45;
}
.b-comm-ref { font-style: normal; font-weight: 600; color: var(--muted); margin-right: .35rem; }
/* The way out. Always there, and the only way out when the commentary covers the screen. */
.b-comm-close {
  flex: 0 0 auto; border: 0; background: none; color: var(--muted);
  font-size: 1rem; line-height: 1; padding: .35rem .1rem .35rem .5rem; cursor: pointer;
}
/* Filling the screen, this is the only way back to the text, so it is bigger than it is on a
   sheet — and given room around it, being the one thing on that row anybody reaches for. */
body.b-commfull .b-comm-close { font-size: 1.6rem; padding: .3rem .25rem .3rem .7rem; }
.b-comm-vn { font-style: normal; font-weight: 600; font-size: .8em; color: var(--muted); margin-right: .15em; }

/* The reader's settings outgrew a single list, so they are in sections that open one at a time.
   Plain <details>, needing no script: the shared name makes them exclusive where the browser
   supports it, and where it does not, more than one simply opens — which is no worse than the
   list this replaced. The outer menu's own summary is a round ⋮ button, so these undo that. */
.menu nav .submenu > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: auto; height: auto; min-height: var(--tap); border-radius: 0; background: none;
  padding: .7rem 1rem; font-size: 1rem; color: var(--text);
}
.menu nav .submenu > summary::-webkit-details-marker { display: none; }
.menu nav .submenu > summary::after {
  content: '›'; color: var(--muted); font-size: 1.15rem; line-height: 1;
  transition: transform .15s ease;
}
.menu nav .submenu[open] > summary::after { transform: rotate(90deg); }
.menu nav .submenu > summary:hover { background: var(--halo); }
/* Open, a section's name stays at full strength, a heading over its items, which sit on a shaded panel (app.css draws
   it: card #343, DESIGN.md §2a). */
.menu nav .submenu[open] > summary { color: var(--text); font-weight: 700; }
.menu nav .submenu-body a,
.menu nav .submenu-body button { padding-left: 1.1rem; }
.menu nav .submenu-body .text-size { padding-left: 1.1rem; padding-right: calc(.5rem + 3px); }

/* "A new version is ready" banner — mirrors the chat's update bar. */
.b-update-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(4.2rem + env(safe-area-inset-top)); z-index: 60;
  display: flex; gap: .75rem; align-items: center; width: max-content; white-space: nowrap;
  background: rgba(30,30,30,.92); color: #fff; padding: .6rem .6rem .6rem 1rem; border-radius: var(--radius);
/* design-ok: same-both-themes */ }
.b-update-now {
  border: 0; background: var(--accent); color: #fff; font: inherit; font-weight: 600;
  min-height: 36px; padding: 0 .9rem; border-radius: 18px; cursor: pointer;
}

/* The Hebrew and Greek versions (INTERLINEAR-PLAN.md): Hebrew runs right to left, larger, with room
   between lines for its vowel points and accents, in Ezra SIL (SIL Open Font License; chosen by
   Larry 2026-10-02), which places the accents as printed Hebrew Bibles do. Phones don't have such a
   font, so the site supplies it; the browser only fetches it for a page with Hebrew on it. */
/* Greek in Gentium Plus (SIL Open Font License; Larry 2026-10-02), cut down to the Greek and Latin
   letters, so polytonic Greek looks the same on every device. */
@font-face {
  font-family: "Gentium Plus"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/GentiumPlus-Greek.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0300-036F, U+0370-03FF, U+1F00-1FFF, U+2000-206F, U+2E00-2E7F;
}
@font-face {
  font-family: "Ezra SIL"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/EzraSIL.woff2") format("woff2");   /* relative to a.php, which serves this file */
}
body .b-chapter[lang="he"], body .b-part[lang="he"] {   /* body: over the reader's own font choice */
  font-family: "Ezra SIL", "SBL Hebrew", "Noto Serif Hebrew", "Taamey Frank CLM", "Times New Roman", serif;
  font-size: 1.35em; line-height: 2; text-align: right;
}
.b-chapter[lang="he"] .b-title, .b-chapter[lang="he"] .b-notice { font-family: inherit; }
.b-chapter[lang="he"] .b-title { direction: ltr; text-align: left; font-size: .75em; }
.b-chapter[lang="he"] .b-notice { direction: ltr; text-align: left; font-size: .6em; line-height: 1.5; }
.b-chapter[lang="he"] sup.vn { font-size: .55em; }
/* The Targums' Aramaic, in the same square script as the Hebrew, set the same way. */
body .b-chapter[lang="arc"], body .b-part[lang="arc"] {
  font-family: "Ezra SIL", "SBL Hebrew", "Noto Serif Hebrew", "Taamey Frank CLM", "Times New Roman", serif;
  font-size: 1.35em; line-height: 2; text-align: right;
}
.b-chapter[lang="arc"] .b-title, .b-chapter[lang="arc"] .b-notice { font-family: inherit; }
.b-chapter[lang="arc"] .b-title { direction: ltr; text-align: left; font-size: .75em; }
.b-chapter[lang="arc"] .b-notice { direction: ltr; text-align: left; font-size: .6em; line-height: 1.5; }
.b-chapter[lang="arc"] sup.vn { font-size: .55em; }
body .b-chapter[lang="grc"], body .b-part[lang="grc"] {
  font-family: "Gentium Plus", "Gentium", "Times New Roman", "Iowan Old Style", Georgia, serif;
  font-size: 1.12em;
}

/* The verse sheet's six actions: words where there is room, one row of icons on a phone (card #96; Larry: "Instead of
   six big buttons, use icons. “All” can stet.", then "Icons when narrow"): bookmark, note, send to chat, copy, All, and
   an aleph and an alpha for the interlinear (the ancient texts). On a phone each is an icon button (DESIGN.md §3): a
   --tap square, the round halo under the pointer; a verse already bookmarked or noted shows that button selected. */
.b-il-letters { font-size: 1.15em; line-height: 1; letter-spacing: .08em; white-space: nowrap; }
.b-il-letters [lang="he"] { font-family: "Ezra SIL", serif; }
.b-il-letters [lang="grc"] { font-family: "Gentium Plus", serif; }
.b-acts .sm { display: none; }
@media (min-width: 560px) {
  .b-actions .b-acts { flex-wrap: nowrap; }
  .b-actions .b-acts button { flex: 1 1 auto; white-space: nowrap; }
}
@media (max-width: 559px) {
  .b-actions .b-acts { display: flex; flex-wrap: nowrap; justify-content: space-around; gap: 0; }
  .b-actions .b-acts button { flex: 0 0 var(--tap); width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%;
    background: none; display: grid; place-items: center; font-size: 1rem; font-weight: 600; white-space: nowrap; }
  .b-actions .b-acts button:hover { background: none; --ib-halo: var(--halo); }
  .b-actions .b-acts button.on { --ib-halo: var(--accent-soft); color: var(--accent); }
  .b-actions .b-acts .lg { display: none; }
  .b-actions .b-acts .sm { display: block; }
}

/* The interlinear sheet (bible.js, "the interlinear"): a verse's words as stacks — Strong's number,
   transliteration, the word, gloss, grammar — wrapping onto further lines, right to left for the
   Hebrew. ‹ › in the heading step a verse at a time. */
.b-interlinear { max-height: 72dvh; }
.b-il-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.b-il-head h3 { flex: 1; margin: 0; text-align: center; font-size: 1rem; }
.b-il-head h3 span { font-weight: 400; color: var(--muted); }
.b-il-prev, .b-il-next {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--accent);
  display: grid; place-items: center; cursor: pointer; padding: 0; flex: none;
}
.b-il-next .ic { transform: scaleX(-1); }
.b-il-prev:hover:not(:disabled), .b-il-next:hover:not(:disabled) { background: var(--halo); }
.b-il-prev:disabled, .b-il-next:disabled { opacity: .3; cursor: default; }
.b-il-verse { display: flex; flex-wrap: wrap; gap: .9rem .5rem; justify-content: flex-start; }
.b-il-w { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 3.2rem; max-width: 9rem; }
.b-il-num {
  font-size: .72rem; color: var(--accent); background: none; border: 0; padding: 0 .25rem; border-radius: 6px;
  cursor: pointer; min-height: 1.1em; font-family: inherit;
}
.b-il-num:hover { background: var(--halo); }
.b-il-tr { font-size: .78rem; color: var(--muted); font-style: italic; }
.b-il-word { font-size: 1.5rem; line-height: 1.6; }
.b-il-verse[lang="he"] .b-il-word { font-family: "Ezra SIL", "SBL Hebrew", serif; font-size: 1.75rem; line-height: 1.9; }
.b-il-verse[lang="grc"] .b-il-word { font-family: "Gentium Plus", "Times New Roman", serif; }
.b-il-gl { font-size: .85rem; line-height: 1.25; }
.b-il-parse {
  font-size: .68rem; color: var(--muted); background: none; border: 0; padding: .1rem .3rem; margin-top: .15rem;
  border-radius: 6px; cursor: pointer; font-family: inherit;
}
.b-il-parse:hover { background: var(--halo); }
.b-il-k { font-size: .72rem; color: var(--muted); margin-top: .15rem; }
.b-il-wait { color: var(--muted); }
.b-il-detail {
  position: relative; margin-top: .9rem; padding: .8rem 2.2rem .8rem .9rem; border-radius: 10px;
  background: var(--b-btn); border: 1px solid var(--b-btn-edge); font-size: .92rem; line-height: 1.5;
}
.b-il-detail h4 { margin: 0 0 .4rem; font-size: 1rem; }
.b-il-lemma { font-size: 1.3rem; }
.b-il-lemma[lang="he"] { font-family: "Ezra SIL", serif; }
.b-il-lemma[lang="grc"], .b-il-def[lang="grc"] b { font-family: "Gentium Plus", serif; }
.b-il-sub { font-weight: 400; font-size: .85rem; color: var(--muted); }
.b-il-part { margin: .3rem 0; }
.b-il-close {
  position: absolute; top: .2rem; right: .2rem; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer;
}
.b-il-close:hover { background: var(--halo); }
.b-il-credit {
  margin: 1.4rem 0 0; padding-top: .6rem; border-top: 1px solid var(--divider);
  font-size: .62rem; line-height: 1.4; color: var(--muted);
}
/* Footnote markers side by side ("b c"): a little space between, and opened together. */
sup.fn + sup.fn { padding-left: .22em; }   /* padding, not margin: the space between "b c" is tappable too */
.b-note-one { margin: .3rem 0; }
.b-note-mk { color: var(--accent); margin-right: .2em; }
/* On a phone a word's entry covers the interlinear (its ✕ brings it back). */
.b-interlinear.b-il-covered .b-il-head, .b-interlinear.b-il-covered .b-il-verse, .b-interlinear.b-il-covered .b-il-credit { display: none; }
.b-interlinear.b-il-covered .b-il-detail { margin-top: 0; border: 0; background: none; padding: .2rem 2.4rem .5rem 0; }
.b-il-more { margin: .7rem 0 0; }
.b-il-more a { color: var(--link); font-weight: 600; text-decoration: none; }
.b-il-more a:hover { text-decoration: underline; }

/* "Show all" (bible.js): one verse in each chosen translation, its code beside it. */
.b-showall { max-height: 72dvh; }
.b-sa-row { display: grid; grid-template-columns: 3.4rem 1fr; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--divider); }
.b-sa-row:last-child { border-bottom: 0; }
.b-sa-code { font-size: .78rem; font-weight: 700; color: var(--accent); padding-top: .2rem; }
.b-sa-text { font-size: .98rem; line-height: 1.5; }
.b-sa-text[lang="he"] { font-family: "Ezra SIL", serif; font-size: 1.3rem; line-height: 1.9; text-align: right; }
.b-sa-text[lang="arc"] { font-family: "Ezra SIL", serif; font-size: 1.3rem; line-height: 1.9; text-align: right; }
.b-sa-text[lang="grc"] { font-family: "Gentium Plus", serif; font-size: 1.05rem; }
.b-sa-foot { margin: .8rem 0 0; }
.b-sa-pick { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--divider); }
/* Six buttons on a phone: a little tighter. */
.b-sa-none { flex-basis: 100%; text-align: left; padding-left: 0; font-size: .85rem; }
.b-il-src { margin: .2rem 0 .3rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
/* The commentary read aloud: the speaker in its header (lit while it reads), and the paragraph
   being read. */
.b-comm-listen, .b-art-listen {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--b-muted, var(--muted)); cursor: pointer; position: relative;
}
.b-comm-listen .ic, .b-art-listen .ic { width: 22px; height: 22px; }
.b-comm-listen:hover, .b-art-listen:hover { background: var(--halo); }
.b-comm-listen.on, .b-art-listen.on { color: var(--accent); background: var(--halo); }
/* An article's speaker (card #10), in its title, after the words. */
.rs-entry h1 .b-art-listen { display: inline-grid; vertical-align: middle; margin: -.3rem 0 -.2rem .2rem; }
.rs-entry h1 .b-art-listen[hidden] { display: none; }
.b-no-voice .b-comm-listen, .b-no-voice .b-art-listen { display: none !important; }   /* no voice on the device (#10) */
/* (The work's name is a flex box on a phone, for its 44px reach: its words, wrapped one by one to light them, would
   lose the spaces between them, so the gap stands in for the space.) */
.b-art-reading .rs-work a { flex-wrap: wrap; column-gap: .3em; }
/* The sentence being read is tinted, not its whole paragraph (Larry, 2026-10-03): each of its words,
   the tint carried across the space after it (a shadow to its right) except after the last. */
.b-comm-reading { background: none; }
.b-comm-page .b-w-in, .b-art-reading .b-w-in {
  /* Solid (mixed with the sheet's own color), so where a word's tint overlaps the space's there's
     no darker seam. */
  --b-sent: color-mix(in srgb, var(--accent) var(--b-reading, 16%), var(--b-sheet, var(--b-bg, var(--bg))));
  background: var(--b-sent); box-shadow: .3em 0 0 var(--b-sent);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.b-comm-page .b-w-in.b-w-end, .b-art-reading .b-w-in.b-w-end { box-shadow: none; }
/* The word being read is exactly as it is in the chapter's player (.b-w-on): its own fill and
   rounded block, over the sentence's tint, the tint still carried across the space after it (Larry,
   2026-10-14: an untinted gap after the lit "by"). */
.b-comm-page .b-w-in.b-w-on, .b-art-reading .b-w-in.b-w-on { background: var(--b-word); box-shadow: 0 0 0 .14em var(--b-word), .3em 0 0 var(--b-sent); }
.b-comm-page .b-w-in.b-w-on.b-w-end, .b-art-reading .b-w-in.b-w-on.b-w-end { box-shadow: 0 0 0 .14em var(--b-word); }
/* A quote's reference ("2 Samuel 24:1") is set off by a margin as well as a space: the tint carried across both. */
.b-comm-page .b-comm-ref .b-w-in:last-child { box-shadow: .3em 0 0 var(--b-sent), calc(.3em + .35rem) 0 0 var(--b-sent); }
/* (Lit, its shadows take its rounded corners: the last reaches 3px on, under the next word, so no notch shows.) */
.b-comm-page .b-comm-ref .b-w-in.b-w-on:last-child { box-shadow: 0 0 0 .14em var(--b-word), .3em 0 0 var(--b-sent), calc(.3em + .35rem + 3px) 0 0 var(--b-sent); }
/* The commentary's player (read aloud): the chapter player's bar, over the full-screen commentary,
   which leaves room for it at its foot. */
.b-comm-player, .b-art-player { z-index: 35; }
/* One bar at the foot of a phone (Larry, 2026-10-07): while the commentary reads, the chapter's or
   the day's bar steps aside (it was under the full-screen sheet anyway), and comes back after. A
   wide screen keeps both, side by side (below). */
@media (max-width: 1099px) {
  body.b-comm-reading-on .b-player:not(.b-comm-player), body.b-art-reading-on .b-player:not(.b-art-player) { display: none; }
}
body.b-comm-reading-on .b-comm, .rs-entry.b-art-reading { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }
/* While it reads aloud the player's controls take the place of the foot's buttons (Choose, Bible
   Hub, Aa), which come back when the reading stops (Larry, 2026-10-03). */
body.b-comm-reading-on .b-comm-foot { display: none; }

/* ---------- the commentary beside the text, on a wide screen ----------
   (Larry, 2026-10-05: "make the commentary placement that way by default for wide-enough desktop.
   Automatically drops below when screen is narrower. No user options on this.") From 1100 px the
   commentary is a panel at the right, the whole height of the screen, in its own design (head,
   pages, foot or player); the text, its bar and the chapter's player narrow beside it, so nothing
   of the text is covered. Narrower, it is the sheet below, as before. "Full screen" and reading
   aloud don't change it here: the panel is already as tall as the screen. */
@media (min-width: 1100px) {
  :root { --b-side: min(560px, 44vw); }
  .b-sheet.b-comm, body.b-commfull .b-sheet.b-comm, .b-sheet.b-res {
    top: 0; bottom: 0; right: 0; left: auto; width: var(--b-side);
    height: auto; max-height: none; box-sizing: border-box;
    border-radius: 0; border-top: 0; border-left: 1px solid var(--b-sheet-edge);
    box-shadow: -8px 0 22px rgba(0,0,0,.10);
    padding: calc(.9rem + env(safe-area-inset-top, 0px)) 1.5rem calc(1rem + env(safe-area-inset-bottom));
    scrollbar-gutter: stable;     /* the scroll bar's room kept whether or not it shows, so the panel's content doesn't
                                     change width from one article to the next (Larry, 2026-10-14) */
  }
  body.b-commfull .b-comm-close { font-size: 1rem; padding: .35rem .1rem .35rem .5rem; }
  body.b-comm-reading-on .b-sheet.b-comm { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }
  .b-shell .b-comm-player, .b-comm-player, .b-art-player.b-art-in-sheet { position: fixed; bottom: 0; left: auto; right: 0; width: var(--b-side); box-sizing: border-box; }
  body:has(.b-sheet.b-comm) .b-peek, body:has(.b-sheet.b-res) .b-peek { left: auto; right: 0; width: var(--b-side); box-sizing: border-box; padding-inline: 1.5rem;
    border-left: 1px solid var(--b-sheet-edge); }   /* (the panel's edge line runs on past it: Larry, 2026-10-06) */
  /* The text beside it. */
  body.b-shell:has(.b-sheet.b-comm) .b-scroll, body.b-shell:has(.b-sheet.b-res) .b-scroll { margin-right: var(--b-side); }
  /* (The bar's side padding is reckoned from the screen's width, not the bar's: the text column's
     edges, in the narrower space.) */
  body.b-shell:has(.b-sheet.b-comm) .b-bar, body.b-shell:has(.b-sheet.b-res) .b-bar {
    right: var(--b-side);
    padding-left: max(.75rem, calc((100% - var(--b-side)) / 2 - 17.75rem - 4px));
    padding-right: max(.75rem, calc((100% - var(--b-side)) / 2 - 17.75rem));
  }
  body.b-shell:has(.b-sheet.b-comm) .b-player:not(.b-comm-player), body.b-shell:has(.b-sheet.b-res) .b-player:not(.b-art-player) { margin-right: var(--b-side); }
  .b-sheet.b-res { padding-top: calc(.3rem + env(safe-area-inset-top, 0px)); }
  .b-res-head { top: calc(-.3rem - env(safe-area-inset-top, 0px)); margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; }
}

/* A theme's article opened from a verse (R24): the link to its citation, and the citation's flash when reached. */
/* A pill, the works' own (a.rs-tag), flush under the work's name (Larry, 2026-10-06: "a pill, flush tight"). */
.rs-cite { margin: 0 0 .35rem; line-height: 1; text-align: right; }   /* (flush right: Larry, 2026-10-06) */
.rs-cite a.rs-tag { background: var(--accent); border: 1px solid var(--accent); color: #fff; border-radius: 5px; padding: .2rem .55rem; }   /* (a filled button: Larry, 2026-10-06) */
/* The verse reached by the link: stays marked, in a light blue, the blue links' color (Larry, 2026-10-06: the purple
   "not distinctive enough" on the dark theme). */
:root { --cite-on: #d6e6ff; --cite-ring: #2a62c9; }
:root[data-theme="dark"] { --cite-on: rgba(122, 167, 255, .32); --cite-ring: #7aa7ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cite-on: rgba(122, 167, 255, .32); --cite-ring: #7aa7ff; } }
.rs-body a.r-ref.rs-cite-on { background: var(--cite-on); box-shadow: 0 0 0 2px var(--cite-ring); border-radius: 4px; }
@keyframes rs-cite-flash { 0% { box-shadow: 0 0 0 6px var(--cite-ring); } 100% { box-shadow: 0 0 0 2px var(--cite-ring); } }
.rs-body a.r-ref.rs-cite-flash { animation: rs-cite-flash 1.2s ease-out; }

/* Search results in the reader's sheet (T9): the sheet has its own close button. */
.b-res .rs-close { display: none; }
/* The chooser's Apocrypha closed: its books hidden (as the Resources' book list's, resources.css .rs-apoc). */
.b-picker .b-apoc:not([open]) > :not(summary) { display: none; }
.b-picker .b-apoc:not([open])::details-content { display: none; }