/* The Bible version button and picker, the site's own Bible reader, and the auto-scroll button
   (reader/reader.js). */

/* ---------------------------------------------------------------- the version button (header) */
.bv-btn { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 5px 9px 5px 10px; border: 1px solid var(--rule); border-radius: 18px; background: var(--bg-raised); color: var(--ink); font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bv-btn svg { width: 16px; height: 16px; color: var(--gold); }
.bv-btn .bv-chev { width: 12px; height: 12px; color: var(--muted); }
.bv-btn .bv-lbl { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.bv-btn .bv-lbl small { font-size: 8.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
@media (hover: hover) { .bv-btn:hover { border-color: var(--coral); } }
header.top .bv-btn + .mode-toggle { margin-left: 8px; }

/* ---------------------------------------------------------------- the picker */
.bv-scrim, .br-scrim { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: flex-end; justify-content: center; background: rgba(22, 19, 15, 0.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: bv-in 0.2s ease; }
.bv-scrim[hidden], .br-scrim[hidden] { display: none; }
@keyframes bv-in { from { opacity: 0; } }
@keyframes bv-up { from { transform: translateY(40px); opacity: 0.4; } }
.bv-sheet { width: 100%; max-width: 520px; max-height: min(88vh, 720px); overflow-y: auto; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--bg); color: var(--ink); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.2); animation: bv-up 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
@media (min-width: 700px) { .bv-scrim { align-items: center; } .bv-sheet { border-radius: 22px; } }
.bv-head, .br-head { display: flex; align-items: flex-start; gap: 10px; }
.bv-head > div, .br-titles { flex: 1; min-width: 0; }
.bv-head small, .br-titles small { display: block; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.bv-head h2, .br-titles h2 { margin: 2px 0 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 24px; line-height: 1.2; }
.br-x { flex: none; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 18px; background: var(--bg-raised); color: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer; }
.bv-lede { margin: 10px 0 14px; font-family: var(--sans); font-size: 14px; color: var(--muted); }
.bv-group { margin: 0 0 14px; }
.bv-kind { display: flex; flex-direction: column; gap: 1px; margin: 0 2px 7px; font-family: var(--sans); }
.bv-kind b { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.bv-kind span { font-size: 12.5px; color: var(--muted); }
.bv-opt { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 6px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); text-align: left; font-family: var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bv-opt.is-on { border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral) inset; }
.bv-abbr { flex: none; min-width: 48px; padding: 5px 0; border-radius: 9px; background: var(--coral-soft); color: var(--gold); text-align: center; font-size: 13px; font-weight: 800; }
.bv-opt.is-on .bv-abbr { background: var(--coral); color: var(--on-gold); }
.bv-name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; }
.bv-name small { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; color: var(--muted); }
.bv-tick { flex: none; width: 20px; height: 20px; border: 2px solid var(--rule); border-radius: 50%; }
.bv-opt.is-on .bv-tick { border-color: var(--coral); background: radial-gradient(circle, var(--coral) 45%, transparent 50%); }
.bv-learn { display: block; width: 100%; margin: 4px 0 0; padding: 12px; border: 1px dashed var(--rule); border-radius: 14px; background: none; color: var(--gold); font-family: var(--sans); font-size: 14px; font-weight: 700; cursor: pointer; }
/* (the versions folded open right in settings: the reader's (.br-verfold) and the site's (.me-verfold, account/account.js)) */
.bv-fold > summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bv-fold > summary::-webkit-details-marker { display: none; }
.bv-fold > summary svg { flex: none; width: 14px; height: 14px; color: var(--muted); transition: transform 0.2s; }
.bv-fold[open] > summary svg { transform: rotate(180deg); }
.bv-fold .bv-list { padding: 10px 0 12px; }
.bv-fold .bv-group { margin-bottom: 10px; }
.bv-fold .bv-opt { gap: 10px; margin-bottom: 5px; padding: 7px 10px; border-radius: 12px; }
.bv-fold .bv-abbr { min-width: 44px; padding: 4px 0; font-size: 12px; }
.bv-fold .bv-name { font-size: 13.5px; }
.bv-fold .bv-tick { width: 18px; height: 18px; }
.bv-fold .bv-learn { padding: 10px; font-size: 13px; }
.br-verfold > summary .br-set-t { flex: 1; }
.br-verfold > summary .br-verbtn { cursor: inherit; }
.br-verfold { border-bottom: 1px solid var(--rule); }
.br-verfold > summary.br-set-row { border-bottom: none; }
.me-verfold > summary.me-set { margin-bottom: 0; }
.me-verfold[open] > summary.me-set { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.me-verfold { margin: 0 0 8px; }
.me-verfold > summary em { display: inline-flex; align-items: center; gap: 4px; }

/* ---------------------------------------------------------------- the reader */
.br-sheet { display: flex; flex-direction: column; width: 100%; max-width: 760px; height: 100vh; height: 100dvh; border-radius: 0; background: var(--bg); color: var(--ink); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.22); animation: bv-up 0.28s cubic-bezier(0.22, 1, 0.36, 1); overflow: hidden; }
/* its own window: the whole screen on a phone, a large window on a computer */
@media (min-width: 700px) { .br-scrim { align-items: center; padding: 24px; } .br-sheet { height: min(100%, 940px); border-radius: 22px; } }
.br-sheet { position: relative; }
/* The title bar floats over the text (so hiding it never moves the text). (No blur behind the
   floating bars: it's costly to animate on a phone, and they slide in and out often.) */
.br-head { position: absolute; top: 0; left: 0; right: 0; z-index: 6; align-items: center; padding: 12px 14px 10px; padding-top: max(12px, env(safe-area-inset-top)); background: color-mix(in srgb, var(--bg) 97%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease; will-change: transform; }
.br-sheet, .bk-shell { --rl-c: var(--coral); }
/* (the reading line: just under the top bar, or under the slim bar once it's folded, filling as the text is read down;
   the Bible's and the Library's, reader/readline.js) */
.rl { position: absolute; top: 0; left: 0; width: 0; height: 3px; z-index: 7; overflow: hidden; pointer-events: none; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.rl[hidden] { display: none; }
.rl i { display: block; width: 100%; height: 100%; background: var(--rl-c, var(--gold)); transform: scaleX(0); transform-origin: left center; transition: transform 0.15s linear; }
@media (prefers-reduced-motion: reduce) { .rl i { transition: none; } }
.br-gear { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg-raised); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.2s, border-color 0.2s; }
.br-gear svg { width: 19px; height: 19px; }
.br-sheet.is-set .br-gear { border-color: var(--coral); background: var(--coral-soft); color: var(--gold); }
/* (it follows the text as it scrolls: --br-hide, set as the words move, reader.js; no easing while
   it's following, so it's tied to the finger; the easing is for gliding the rest of the way) */
.br-sheet .br-head { transform: translateY(calc(var(--br-hide, 0) * -1px)); }
.br-sheet.is-sliding .br-head { transition: none; }
.br-sheet.is-immersed:not(.is-sliding) .br-head { transform: translateY(-105%); opacity: 0; pointer-events: none; }
/* (the slim bar left in its place (nav/tuck.js's) fades in as the top bar slides away and out as it comes back, in step,
   the Bible's and the Library's books' alike: reader/topbar.js. Tied to the finger while the bar follows it; easing with
   the bar when it glides) */
.br-sheet > .tk.is-own.is-on > .tk-bar, .bk-shell > .tk.is-own.is-on > .tk-bar { opacity: var(--rt-hidep, 1); transition: height 0.32s ease, padding 0.32s ease, opacity 0.3s ease; }
.br-sheet.is-sliding > .tk.is-own > .tk-bar, .bk-shell.is-sliding > .tk.is-own > .tk-bar { transition: height 0.32s ease, padding 0.32s ease; }
/* the settings, dropping down under the gear */
.br-set { position: absolute; top: var(--br-head-h, 64px); left: 0; right: 0; z-index: 5; padding: 8px 12px 12px; animation: br-drop 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
.br-set[hidden] { display: none; }
.br-set-in { max-width: 460px; margin-left: auto; padding: 6px 14px; border: 1px solid var(--rule); border-radius: 20px; background: var(--bg-raised); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.35); }
@keyframes br-drop { from { opacity: 0; transform: translateY(-8px); } }
.br-set-row, .br-set .br-set-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 8px 0; border: none; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; color: var(--ink); text-align: left; font-family: var(--sans); }
.br-set-in > :last-child { border-bottom: none; }
.br-set-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.br-set-t b { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.br-set-t small { font-size: 12px; font-weight: 500; color: var(--muted); white-space: normal; }
.br-set .br-sw { flex: none; }
.br-set .br-set-sw.is-on { background: none; }
.br-verbtn { flex: none; padding: 8px 11px; border: 1px solid var(--rule); border-radius: 18px; background: var(--coral-soft); color: var(--gold); font-family: var(--sans); font-size: 13px; font-weight: 800; cursor: pointer; }
.br-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: calc(var(--br-head-h, 64px) + 16px) var(--br-pad, 22px) calc(96px + env(safe-area-inset-bottom)); scroll-padding-top: var(--br-head-h, 64px); }
.br-body, .br-inline { -webkit-tap-highlight-color: transparent; -webkit-user-select: text; user-select: text; }
.br-ch { margin: 18px 0 6px; font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.br-ch:first-child { margin-top: 0; }
.br-h { margin: 14px 0 4px; font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--ink); }
.br-p { margin: 0 0 12px; font-family: var(--br-font, Georgia, "Times New Roman", serif); font-size-adjust: var(--br-fsa, none); font-size: 19px; line-height: calc(1.75 * var(--br-lh, 1)); }
.br-n { margin-right: 3px; font-family: var(--sans); font-size: 0.58em; font-weight: 700; color: var(--gold); vertical-align: 0.55em; line-height: 0; }
.br-notice { margin: 22px 0 0; font-family: var(--sans); font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.br-loading, .br-err { font-family: var(--sans); font-size: 14px; color: var(--muted); }
.br-err a { color: var(--gold); }
/* while reading, the auto-scroll button steps aside too (a tap on the text brings it back) */
/* (reading with the bars away: the button goes too, unless it's scrolling, or open: paused from it, or ⚡ or ? up) */
html.br-calm .as-ctl:not(.is-playing):not(.is-open):not(.tips-open) { opacity: 0 !important; pointer-events: none; }
html.br-calm .as-ctl.is-playing:not(.is-open) { opacity: 0.35 !important; }

@media (prefers-reduced-motion: reduce) { .br-head, .br-sheet .br-head { transition: opacity 0.2s ease; transform: none !important; } }
.br-step, .br-whole { padding: 9px 12px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); color: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.br-whole { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.br-step[data-br-step="1"] { margin-left: auto; }
.br-step[hidden], .br-whole[hidden] { display: none; }
html.br-open, html.br-open body { overflow: hidden; }

/* a passage drawn in place (a devotion's reading) */
.br-inline { padding: 14px 16px 6px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); }
.br-inline .br-p { font-size: 18px; }

/* ---------------------------------------------------------------- auto-scroll */
.as-ctl { position: fixed; z-index: 2147483100; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 28px; background: color-mix(in srgb, var(--bg-raised) 94%, transparent); border: 1px solid color-mix(in srgb, var(--coral) 45%, var(--rule)); box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--sans); -webkit-tap-highlight-color: transparent; }
.as-ctl[hidden] { display: none; }
.as-go { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 46px; height: 46px; padding: 0 12px; border: none; border-radius: 23px; background: var(--coral); color: var(--on-gold); font-family: var(--sans); font-size: 14px; font-weight: 800; cursor: pointer; }
.as-go svg { flex: none; width: 22px; height: 22px; }
.as-label { display: none; white-space: nowrap; }
.as-ctl.is-new:not(.is-open) .as-label { display: inline; }
.as-ctl.is-new:not(.is-open) .as-go { padding: 0 16px 0 13px; }
.as-ctl:not(.is-new) .as-go, .as-ctl.is-open .as-go { padding: 0; width: 46px; }
/* a ring pulses out twice when it appears on a new pop-up */
.as-ctl.is-pulse::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--coral); pointer-events: none; animation: as-pulse 1.3s ease-out 2; }
/* while it scrolls with the slider folded away: a quieter button, over the text */
.as-ctl.is-quiet:not(.is-open):not(.tips-open) { opacity: 0.72; }
/* (the Options or tips open: the whole thing solid; closed again, it's back to faded and fades on) */
.as-ctl.tips-open { opacity: 1 !important; }
/* while it scrolls, folded: just a small, faded arrow (a tap opens the controls again, in full color) */
.as-speed { order: -1; }
.as-ic-more { display: none; }
.as-ctl.is-playing:not(.is-open) { opacity: 0.5; padding: 3px; }
.as-ctl.is-playing:not(.is-open) .as-go { width: 36px; min-width: 36px; height: 36px; background: color-mix(in srgb, var(--coral) 55%, var(--bg-raised)); }
.as-ctl.is-playing:not(.is-open) .as-ic-pause { display: none; }
.as-ctl.is-playing:not(.is-open) .as-ic-more { display: block; width: 20px; height: 20px; }
.as-ctl { transition: opacity 0.3s ease; }
.as-go { transition: width 0.25s ease, height 0.25s ease, background 0.25s ease; }
.as-ctl.is-quiet .as-label { display: none !important; }
.as-ctl.is-quiet .as-go { padding: 0 !important; width: 46px; }

@keyframes as-pulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .as-ctl.is-pulse::after { animation: none; } }
.as-ic-pause, .as-ctl.is-playing .as-ic-play { display: none; }
.as-ctl.is-playing .as-ic-pause { display: block; }
.as-speed { display: none; align-items: center; gap: 2px; padding-right: 2px; }
.as-ctl.is-open .as-speed { display: flex; }
.as-step { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg-raised); color: var(--ink); cursor: pointer; transition: opacity 0.2s ease; -webkit-tap-highlight-color: transparent; }
.as-step svg { width: 18px; height: 18px; }
.as-step:active:not(:disabled) { transform: scale(0.94); }
.as-step:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.as-level { display: flex; flex-direction: column; align-items: center; min-width: 38px; line-height: 1; }
.as-level b { font-size: 17px; font-weight: 800; color: var(--ink); }
.as-level small { margin-top: 2px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .bv-scrim, .br-scrim, .bv-sheet, .br-sheet { animation: none; } }

/* the family tree's reader window, drawing another version itself */
.tr-reader-own { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 12px 40px; background: var(--bg); }
.tr-reader-own[hidden], .tr-reader iframe[hidden] { display: none; }


/* ---------------------------------------------------------------- the whole-Bible reader */
.br-titles { display: block; padding: 0; border: none; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.br-tline { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 2px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 24px; line-height: 1.2; }
.br-tline #br-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-tline svg { flex: none; width: 18px; height: 18px; color: var(--gold); transition: transform 0.2s ease; }
.br-sheet.is-nav .br-tline svg { transform: rotate(180deg); }
.br-tools { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 16px 10px; border-bottom: 1px solid var(--rule); }
.br-verbtn { display: inline-flex; align-items: center; gap: 4px; }
.br-verbtn svg { width: 13px; height: 13px; }
.br-sheet { position: relative; }
.br-sheet.size-sm .br-p, .br-sheet.size-sm .br-q { font-size: 17px; }
.br-sheet.size-md .br-p, .br-sheet.size-md .br-q { font-size: 19.5px; }
.br-sheet.size-lg .br-p, .br-sheet.size-lg .br-q { font-size: 23px; }
.br-sheet.size-xl .br-p, .br-sheet.size-xl .br-q { font-size: 27px; }
.br-sheet.size-xxl .br-p, .br-sheet.size-xxl .br-q { font-size: 32px; }
.br-q { margin: 0; padding-left: 1.4em; text-indent: -1.4em; font-family: var(--br-font, Georgia, "Times New Roman", serif); font-size-adjust: var(--br-fsa, none); font-size: 19px; line-height: calc(1.7 * var(--br-lh, 1)); }
.br-q2 { padding-left: 2.8em; }
.br-q + .br-p, .br-p + .br-q { margin-top: 10px; }
.br-d { margin: 4px 0 10px; font-family: Georgia, serif; font-style: italic; font-size: 15px; color: var(--muted); }
.br-bignum { float: left; margin: 2px 12px 0.22em 0; font-family: Georgia, serif; font-size: 58px; line-height: 0.9; color: var(--gold); } /* (room below: Georgia's 3, 4, 5, 7, and 9 hang under the line, into a heading or the text) */
.br-h + .br-bignum, .br-bignum + .br-h { clear: both; }
.br-verse.is-here { background: color-mix(in srgb, var(--coral) 28%, transparent); border-radius: 4px; transition: background 1.2s ease; }
.br-verse { transition: background 1.2s ease; }
/* the contents: books, chapters, verses (over the text) */
.br-nav { position: absolute; left: 0; right: 0; bottom: 0; top: var(--br-nav-top, 104px); z-index: 3; display: flex; flex-direction: column; background: var(--bg); border-top: 1px solid var(--rule); animation: bv-in 0.15s ease; }
.br-nav[hidden] { display: none; }
.bn-head { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 16px; border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 15px; }
.bn-head b { flex: 1; text-align: right; color: var(--ink); }
.bn-head b:first-child { text-align: left; }
.bn-back { padding: 7px 12px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); color: var(--ink); font: 700 13px var(--sans); cursor: pointer; }
.bn-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 6px 16px calc(24px + env(safe-area-inset-bottom)); }
.bn-sec { margin: 14px 2px 8px; font: 800 11.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.bn-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.bn-book { padding: 10px 8px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg-raised); color: var(--ink); font: 600 14px var(--sans); text-align: left; cursor: pointer; }
.bn-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.bn-num { height: 46px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg-raised); color: var(--ink); font: 700 15px var(--sans); cursor: pointer; }
.bn-book.is-here, .bn-num.is-here { border-color: var(--coral); background: var(--coral-soft); color: var(--gold); }
.bn-read { display: block; width: 100%; margin: 12px 0 4px; padding: 13px; border: none; border-radius: 14px; background: var(--coral); color: var(--on-gold); font: 800 15px var(--sans); cursor: pointer; }
@media (hover: hover) { .bn-book:hover, .bn-num:hover { border-color: var(--coral); } }

/* ---------------------------------------------------------------- the Read page's "The Bible" */
.bi { margin: 0 0 22px; padding: 18px 16px 8px; border: 1px solid var(--rule); border-radius: 20px; background: var(--bg-raised); box-shadow: 0 10px 24px -18px rgba(34, 30, 25, 0.45); }
.bi-top { display: flex; align-items: flex-start; gap: 12px; }
.bi-titles { flex: 1; min-width: 0; }
.bi-titles small { display: block; font: 800 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.bi-titles h2 { margin: 3px 0 4px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 25px; line-height: 1.15; }
.bi-titles p { margin: 0; font-family: var(--sans); font-size: 13.5px; color: var(--muted); }
.bi-ver { margin-left: 0; }
.bi-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 14px 0 6px; }
.bi-go { display: block; padding: 11px 14px; border: none; border-radius: 14px; background: var(--coral); color: var(--on-gold); font: 800 16px var(--sans); text-align: left; cursor: pointer; }
.bi-go small { display: block; margin-bottom: 1px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.bi-go.is-soft { background: var(--coral-soft); color: var(--ink); }
.bi-sec { margin: 8px 0; }
.bi-sec summary { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 2px; list-style: none; cursor: pointer; font-family: var(--serif); font-style: italic; font-size: 19px; }
.bi-sec summary::-webkit-details-marker { display: none; }
.bi-sec summary span { font-family: var(--sans); font-style: normal; font-size: 12px; color: var(--muted); }
.bi-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; padding-bottom: 8px; }
.bi-book { padding: 9px 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg); color: var(--ink); font: 600 13.5px var(--sans); text-align: left; cursor: pointer; }
@media (hover: hover) { .bi-book:hover { border-color: var(--coral); } }

/* ---------------------------------------------------------------- "On this site" (the reader) */
.br-links { display: inline-flex; align-items: center; gap: 7px; margin-left: 0; padding: 6px 10px 6px 7px; border: 1px solid var(--rule); border-radius: 18px; background: var(--bg-raised); color: var(--muted); font: 700 12.5px var(--sans); cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.br-links.is-on { color: var(--ink); }
.br-sw { position: relative; width: 28px; height: 16px; border-radius: 9px; background: var(--rule); transition: background 0.2s ease; }
.br-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease; }
.br-links.is-on .br-sw { background: var(--coral); }
.br-links.is-on .br-sw::after { transform: translateX(12px); }
.br-tools .br-verbtn { margin-left: auto; }
@media (max-width: 380px) { .br-links { padding: 6px 8px; font-size: 12px; } .br-size .size-btn { width: 28px; height: 28px; } }
/* a verse a Foundations card cites */
.br-mark { display: inline-block; width: 9px; height: 9px; margin: 0 5px 0 1px; padding: 0; border: none; border-radius: 50%; background: var(--coral); vertical-align: 0.45em; cursor: pointer; box-shadow: 0 0 0 3px var(--coral-soft); }
.br-sheet.no-links .br-mark, .br-sheet.no-links .br-site { display: none; }
/* the end of a chapter */
.br-site { margin: 26px 0 6px; padding: 16px 16px 8px; border: 1px solid var(--rule); border-radius: 18px; background: var(--bg-raised); }
.br-site-h { margin: 0 0 10px; font: 800 12px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.br-site-g { margin: 0 0 12px; }
.br-site-k { margin: 0 0 6px; font: 700 12.5px var(--sans); color: var(--muted); }
.br-chip { display: inline-block; margin: 0 6px 6px 0; padding: 7px 12px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg); color: var(--ink); font: 600 13.5px var(--sans); text-align: left; cursor: pointer; }
.br-chip.is-on { border-color: var(--coral); background: var(--coral-soft); color: var(--gold); }
.br-chip.is-show { color: var(--gold); border-style: dashed; }
.br-site-g .br-chip.is-more { display: none; }
.br-site-g.show-all .br-chip.is-more { display: inline-block; }
.br-site-g.show-all .br-chip.is-show { display: none; }
@media (hover: hover) { .br-chip:hover { border-color: var(--coral); } }
.br-think-i { margin: 0 0 10px; }
.br-think-i small { display: block; font: 700 11.5px var(--sans); color: var(--gold); }
.br-think-i p { margin: 2px 0 0; font-family: Georgia, serif; font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.br-think-q { font-style: italic; color: var(--muted) !important; }
.br-think-f { margin: 0; font: 12px var(--sans); color: var(--muted); }
.br-think-f a { color: var(--gold); }
/* a verse's links, and study notes, in the panel over the text */
.bn-items { display: grid; gap: 8px; }
.br-site-q { margin: 0 0 12px; font: 600 14px var(--sans); color: var(--muted); }
.bn-item { display: block; padding: 11px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); font: 700 15px var(--sans); text-align: left; cursor: pointer; }
.bn-item small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
/* what the site has on one verse, and why (the window from a verse's dot: whyPage) */
.br-why-ref { margin: 0 0 6px; font: 800 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.br-why-v { margin: 0 0 22px; padding: 2px 0 2px 14px; border-left: 3px solid var(--coral); font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.55; color: var(--ink); }
.br-why-h { margin: 22px 0 10px; font: 800 12px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.br-why-l { display: grid; gap: 10px; }
.br-why-i { display: grid; gap: 8px; width: 100%; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); text-align: left; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .br-why-i:hover { border-color: color-mix(in srgb, var(--coral) 55%, var(--rule)); } }
.br-why-n small { display: block; font: 800 10.5px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.br-why-n b { display: block; margin-top: 1px; font: 700 16px var(--sans); }
.br-why-s { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.br-why-s i { display: block; margin-bottom: 2px; font: italic 600 12.5px var(--sans); color: var(--muted); }
.br-why-s q { display: block; quotes: none; padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--gold) 45%, transparent); } /* (the card's own words, as it has them) */
.br-why-s mark { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, var(--coral) 22%, transparent); color: inherit; font-weight: 600; }
.br-why-go { font: 700 13px var(--sans); color: var(--coral); }
.br-notes-src { margin: 4px 0 10px; }
.br-notes-text { font-family: Georgia, serif; font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.br-notes-text p { margin: 0 0 10px; }
.bi-today { margin: 10px 0 4px; }
.bi-today-k { margin: 0 2px 6px; font: 800 11.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }

/* a passage in place (a devotion's reading), with the reader's tools above it */
.br-inline-wrap .br-inline-tools { padding: 0 0 10px; border-bottom: none; }
.br-inline-wrap.size-sm .br-inline .br-p, .br-inline-wrap.size-sm .br-inline .br-q { font-size: 16px; }
.br-inline-wrap.size-md .br-inline .br-p, .br-inline-wrap.size-md .br-inline .br-q { font-size: 18px; }
.br-inline-wrap.size-lg .br-inline .br-p, .br-inline-wrap.size-lg .br-inline .br-q { font-size: 22px; }
.br-inline-wrap.size-xl .br-inline .br-p, .br-inline-wrap.size-xl .br-inline .br-q { font-size: 26px; }
.br-inline-wrap.size-xxl .br-inline .br-p, .br-inline-wrap.size-xxl .br-inline .br-q { font-size: 30px; }
.br-inline .br-site { margin-top: 16px; background: var(--bg); }
/* a verse's links, just below its mark */
.br-pop { position: fixed; z-index: 2147483060; padding: 12px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.35); animation: bv-in 0.15s ease; }
.br-pop[hidden] { display: none; }
.br-pop-h { margin: 0 2px 8px; font: 800 11.5px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }

/* ---------------------------------------------------------------- resizable pop-ups (reader.js) */
.sheet-grip { flex: none; display: grid; place-items: center; height: 22px; margin-bottom: -6px; cursor: ns-resize; touch-action: none; -webkit-tap-highlight-color: transparent; }
.sheet-grip span { width: 44px; height: 5px; border-radius: 3px; background: var(--rule); transition: background 0.15s ease, width 0.15s ease; }
.sheet-grip:hover span, .sheet-grip:focus-visible span, .sheet-grip.is-drag span { width: 56px; background: var(--muted); }
.sheet-grip:focus { outline: none; }
/* once sized: at the bottom (on wide screens too), a lighter dim, and what's behind can be used */
.sheet-sized { align-items: flex-end !important; padding: 0 !important; background: rgba(20, 16, 12, 0.12) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; pointer-events: none; }
.sheet-sized > * { pointer-events: auto; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; animation: none !important; }
.tx-box, .tr-reader { display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- Study: the Bible above, notes below */
.br-studysw .br-sw { background: var(--rule); }
.br-tools { flex-wrap: wrap; row-gap: 8px; }
/* the divider: one thin line (a small grip on it), with a much bigger invisible place to grab */
.bs-handle { position: relative; z-index: 3; flex: none; display: grid; place-items: center; height: 1px; margin: 0; background: color-mix(in srgb, var(--ink) 22%, var(--rule)); border: none; cursor: ns-resize; touch-action: none; -webkit-tap-highlight-color: transparent; }
.bs-handle::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; } /* (a bigger place to grab, above and below it) */
.bs-handle span { position: relative; width: 40px; height: 5px; border-radius: 3px; background: var(--muted); box-shadow: 0 0 0 2px var(--bg); opacity: 0.7; transition: opacity 0.15s ease, width 0.15s ease; }
.bs-handle:hover span, .bs-handle:focus-visible span, .bs-handle.is-drag span { opacity: 1; width: 52px; }
.bs-handle.is-drag { background: var(--coral); }
.bs-handle:focus { outline: none; }
.bs-pane { display: flex; flex-direction: column; min-height: 0; background: var(--bg-raised); }
.br-sheet.is-study .bs-pane { flex: 1 1 0; }
/* in the reader, the Study tabs float over the notes, and slide away while reading (like the title) */
.br-sheet .bs-pane { position: relative; overflow: hidden; }
.br-sheet .bs-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; background: var(--bg-raised); box-shadow: 0 6px 12px -10px rgba(0, 0, 0, 0.3); transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease; will-change: transform; }
.br-sheet .bs-scroll { padding-top: calc(var(--bs-top-h, 84px) + 8px); }
.br-sheet .bs-top { overflow: visible; } /* (pinned: the study tabs stay while the pane's open; scrolling hides only the reader's top bar) */
.br-sheet.is-study #br-body { padding-bottom: 24px; }
.bs-tabs { flex: none; display: flex; gap: 4px; padding: 6px 12px 0; }
.bs-tab { flex: 1; min-width: 0; padding: 7px 8px; border: 1px solid var(--rule); border-bottom: none; border-radius: 12px 12px 0 0; background: var(--bg); color: var(--muted); font: 700 13px var(--sans); cursor: pointer; }
.bs-tab.is-on { background: var(--bg-raised); color: var(--ink); box-shadow: inset 0 3px 0 var(--coral); }
/* the open tab's commentaries or versions: a small menu dropped from its button in the row */
.bs-top { position: relative; }
.bs-srcs { position: absolute; top: calc(100% + 4px); right: 12px; z-index: 5; display: none; flex-direction: column; align-items: stretch; gap: 4px; min-width: 150px; max-height: min(50vh, 320px); overflow-y: auto; padding: 6px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.45); }
.bs-top.is-picking .bs-srcs:not(:empty) { display: flex; animation: as-rise 0.18s ease; }
.bs-srcs .bs-src { text-align: left; border-radius: 10px; }
/* (a commentary in the menu: its name, and a line on what it is) */
.bs-srcs:has(.is-about) { width: min(290px, calc(100vw - 36px)); max-height: min(60vh, 380px); }
.bs-src.is-about { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; white-space: normal; }
.bs-src.is-about b { font: 700 13px var(--sans); color: var(--ink); }
.bs-src.is-about small { font: 500 11.5px/1.35 var(--sans); color: var(--muted); }
.bs-src.is-about.is-on b, .bs-src.is-about.is-on small { color: inherit; }
.bs-about { margin-bottom: 14px; padding-top: 12px; border-top: 1px solid var(--rule); line-height: 1.5; }
.bs-about b { color: var(--ink); }
.bs-pick { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 3px; max-width: 120px; height: 30px; margin-left: 4px; padding: 0 8px 0 11px; border: 1px solid color-mix(in srgb, var(--coral) 45%, var(--rule)); border-radius: 999px; background: color-mix(in srgb, var(--coral) 10%, var(--bg-raised)); color: var(--ink); font: 700 12px var(--sans); cursor: pointer; }
.bs-pick[hidden] { display: none; }
.bs-pick-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-pick svg { flex: none; width: 13px; height: 13px; color: var(--coral); transition: transform 0.2s; }
.bs-pick[aria-expanded="true"] svg { transform: rotate(180deg); }
.bs-srcs::-webkit-scrollbar { display: none; }
.bs-src { flex: none; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg); color: var(--muted); font: 700 12.5px var(--sans); cursor: pointer; white-space: nowrap; }
.bs-src.is-on { border-color: var(--coral); background: var(--coral); color: var(--on-gold); }
.bs-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 8px 16px 0; }
.bs-scroll::after { content: ''; display: block; height: 40vh; } /* (room for the last notes to reach the top, to stay with their verses) */
.bs-seg { position: relative; padding: 6px 0 8px 34px; border-bottom: 1px dashed var(--rule); font-family: Georgia, serif; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.bs-seg p { margin: 0 0 8px; }
.bs-seg p.more { font-family: var(--sans); font-size: 12px; font-style: italic; color: var(--muted); }
.bs-v { position: absolute; left: 0; top: 8px; min-width: 26px; padding: 2px 4px; border-radius: 8px; background: var(--coral-soft); color: var(--gold); font: 800 11.5px var(--sans); text-align: center; }
.bs-ch { margin: 14px 0 4px; font: 800 11.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.bs-ch:first-child { margin-top: 4px; }
.bs-xrefs { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-xref { padding: 5px 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg); color: var(--ink); font: 600 13px var(--sans); cursor: pointer; }
.bs-xref.is-on { border-color: var(--coral); background: var(--coral-soft); }
/* (the Treasury: each word or phrase of the verse, with its passages under it) */
.bs-tw { margin: 0 0 10px; }
.bs-tw > b { display: block; margin: 0 0 5px; font: italic 600 15px Georgia, serif; color: var(--ink); }
.bs-tn { display: block; margin: -2px 0 6px; font: italic 13px Georgia, serif; color: var(--muted); }
.bs-xref.is-book { border-color: var(--coral); font-weight: 800; }
/* (the version's own, from its text, like the AMP's "[Deut 8:3]": a gold dot, and the key under them) */
.bs-xref.is-own { border-color: color-mix(in srgb, var(--gold) 60%, var(--rule)); background: color-mix(in srgb, var(--gold) 9%, var(--bg)); }
/* (a tag with the version's name, on each one only it has; and once more under them, saying why) */
.bs-own-tag { display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 6px; background: var(--gold); color: #fff; font: 800 9.5px/1.4 var(--sans); letter-spacing: 0.04em; vertical-align: 0.1em; }
.bs-own-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.bs-own-note .bs-own-tag { margin: 0 4px 0 0; }
.bs-xtext { margin: 8px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.bs-xtext .br-p, .bs-xtext .br-q { font-size: 16px; }
.bs-xtext .br-bignum, .bs-xtext .br-site, .bs-xtext .br-mark { display: none; }
.bs-xread { display: inline-block; margin-top: 4px; padding: 0; border: none; background: none; color: var(--gold); font: 700 13px var(--sans); cursor: pointer; }
.bs-credit { margin: 14px 0 0; font: 12px var(--sans); color: var(--muted); }
.bs-credit a { color: var(--gold); }
/* a passage in place, split: the Bible scrolls in its own pane, the notes in theirs */
.br-inline-wrap.is-study { display: flex; flex-direction: column; }
.br-inline-wrap.is-study > .br-inline { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius: 16px 16px 0 0; }
.br-inline-wrap.is-study > .bs-pane { border: 1px solid var(--rule); border-top: none; border-radius: 0 0 16px 16px; overflow: hidden; }
.br-inline-wrap.is-study > .bs-handle { margin: 0; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.br-inline-wrap.is-study ~ details.dv-notes { display: none; } /* (the notes are in the Study view) */

@media (max-width: 430px) {
  .br-tools { gap: 6px; }
  .br-tools .br-links { padding: 6px 9px 6px 6px; font-size: 12px; gap: 5px; }
  .br-tools .br-sw { width: 24px; height: 14px; }
  .br-tools .br-sw::after { width: 10px; height: 10px; }
  .br-tools .br-links.is-on .br-sw::after { transform: translateX(10px); }
  .br-tools .br-size .size-btn { width: 30px; height: 30px; }
  .br-tools .br-verbtn { padding: 7px 9px; font-size: 12.5px; }
}

.br-lbl-short { display: none; }
@media (max-width: 430px) {
  .br-tools { justify-content: flex-start; flex-wrap: nowrap; }
  .br-tools .br-links { margin-left: 0; }
  .br-tools .br-verbtn { margin-left: auto !important; }
  .br-lbl-long { display: none; } .br-lbl-short { display: inline; }
}
/* the header on narrow phones: the version button and Light/Dark stay on one line with the logo */
@media (max-width: 400px) {
  header.top .bv-btn { padding: 4px 7px; gap: 3px; font-size: 12px; }
  header.top .bv-btn svg { width: 14px; height: 14px; }
  header.top .bv-btn + .mode-toggle { margin-left: 6px; }
  header.top .mode-toggle button { padding: 5px 9px; }
  header.top { padding-left: 16px; padding-right: 16px; gap: 8px; }
}
.br-resting { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--coral-soft); font: 600 13.5px var(--sans); color: var(--ink); }
/* Study: Compare, a second version under the first */
.bs-tabs .bs-tab { padding: 8px 6px; font-size: 12.5px; }
.bs-pane .bs-compare .br-p, .bs-pane .bs-compare .br-q { font-size: 16.5px !important; line-height: 1.65; } /* (a little smaller than the text above, whatever its size) */
.bs-compare .br-bignum { font-size: 40px; }
.bs-compare .br-mark, .bs-compare .br-site { display: none; }
.bs-cmp-k { margin: 4px 0 8px; font: 800 11.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }

/* Red letters: the words of Jesus */
.br-wj { color: var(--wj, #B3261E); }
body.site-dark .br-wj { color: var(--wj, #F08A7E); }
.br-redsw.is-on .br-sw { background: var(--wj, #B3261E); }
body.site-dark .br-redsw.is-on .br-sw { background: var(--wj, #D9564A); }
/* phones: the switches become small pills (filled when on), so all three fit beside the text size
   and the version */
@media (max-width: 430px) {
  .br-tools { gap: 5px; }
  .br-tools .br-links { padding: 6px 9px; gap: 0; }
  .br-tools .br-links .br-sw { display: none; }
  .br-tools .br-links.is-on { border-color: var(--coral); background: var(--coral-soft); }
  .br-tools .br-redsw.is-on { border-color: color-mix(in srgb, var(--wj, #B3261E) 55%, var(--rule)); background: color-mix(in srgb, var(--wj, #B3261E) 10%, transparent); color: var(--wj, #B3261E); }
  body.site-dark .br-tools .br-redsw.is-on { color: var(--wj, #F08A7E); background: rgba(240, 138, 126, 0.14); }
}

/* Turning chapters: the text follows a sideways swipe (the browser keeps up-and-down scrolling) */
.br-sheet .br-body { touch-action: pan-y; will-change: transform; backface-visibility: hidden; }
/* the chapter's name, for a moment, after it turns */
.br-flash { position: absolute; left: 50%; top: 42%; z-index: 7; padding: 10px 18px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 86%, transparent); color: var(--bg); font: 700 15px var(--sans); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 6px) scale(0.96); }
.br-flash.is-on { animation: br-flash 1.5s ease forwards; }
@keyframes br-flash { 0% { opacity: 0; transform: translate(-50%, 6px) scale(0.96); } 14%, 70% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -4px) scale(1); } }
/* on a computer: quiet arrows at the sides, with the title */
.br-edge { display: none; }
@media (hover: hover) and (pointer: fine) {
  .br-edge { position: absolute; top: 50%; z-index: 6; display: grid; place-items: center; width: 40px; height: 64px; margin-top: -32px; padding: 0; border: 1px solid var(--rule); background: var(--bg-raised); color: var(--muted); cursor: pointer; opacity: 0.55; transition: opacity 0.25s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
  .br-edge.is-prev { left: 0; border-left: none; border-radius: 0 14px 14px 0; }
  .br-edge.is-next { right: 0; border-right: none; border-radius: 14px 0 0 14px; }
  .br-edge:hover { opacity: 1; color: var(--ink); }
  .br-edge svg { width: 20px; height: 20px; }
  .br-edge[hidden] { display: none; }
  .br-sheet.is-calm .br-edge { opacity: 0; pointer-events: none; } /* (the tools: away reading on, back looking back, apart from the title bar: reader.js setCalm) */
  .br-sheet.is-calm .br-edge.is-prev { transform: translateX(-100%); } .br-sheet.is-calm .br-edge.is-next { transform: translateX(100%); }
  .br-sheet.is-study:not(.is-side):not(.is-folded) .br-edge { top: 25%; } /* (the notes under the Bible: the arrows in the middle of the Bible's half; beside it, or tucked away, the Bible's whole height) */
}
/* a passage: its whole chapter, at the end */
.br-wholebtn { display: inline-flex; gap: 6px; margin: 18px 0 0; padding: 10px 16px; border: 1px solid var(--coral); border-radius: 999px; background: var(--coral-soft); color: var(--ink); font: 700 14px var(--sans); cursor: pointer; }
/* after reading a cross reference in full: back to where you were (in the title bar, over nothing) */
.br-tw { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.br-tw .br-titles { width: 100%; }
.br-backto { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin: 0 0 3px; padding: 2px 10px 2px 8px; border: 1px solid color-mix(in srgb, var(--coral) 70%, var(--rule)); border-radius: 999px; background: var(--coral-soft); color: var(--ink); font: 700 11.5px/16px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; animation: bv-in 0.25s ease; -webkit-tap-highlight-color: transparent; }
.br-backto span { color: var(--gold); font-weight: 800; }

@media (hover: hover) { .br-backto:hover { background: color-mix(in srgb, var(--coral) 28%, transparent); } }
.br-sheet.has-back .br-titles small { display: none; } /* (the version and time left step aside for it) */
.br-backto[hidden] { display: none; }
/* the settings' two-way choice (slide or page flip) */
.br-seg { flex: none; display: inline-flex; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); }
.br-seg button { padding: 6px 11px; border: none; border-radius: 999px; background: none; color: var(--muted); font: 700 12.5px var(--sans); cursor: pointer; white-space: nowrap; }
.br-seg button.is-on { background: var(--coral); color: var(--on-gold); }
/* five papers: the choices go under the word, and scroll sideways if they must */
.br-set-paper { flex-wrap: wrap; gap: 8px; }
.br-set-paper .br-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.br-titles small span + span { text-transform: none; letter-spacing: 0.02em; font-weight: 600; color: var(--muted); }
.br-titles small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .br-flash.is-on { animation-duration: 1.2s; } }

/* the font choices, each in its own face */
.br-set-font { flex-direction: column; align-items: stretch; }
.br-fonts { display: flex; gap: 6px; overflow-x: auto; margin: 0 -2px; padding: 2px 2px 4px; scrollbar-width: none; }
.br-fonts::-webkit-scrollbar { display: none; }
.br-font { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; padding: 8px 8px 6px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg); color: var(--ink); cursor: pointer; }
.br-font span { font-size: 22px; line-height: 1.1; }
.br-font small { font: 600 11px var(--sans); color: var(--muted); white-space: nowrap; text-align: center; }
.br-font small i { display: block; font-style: normal; font-weight: 500; font-size: 10px; }
.br-font.is-on { border-color: var(--coral); background: var(--coral-soft); box-shadow: 0 0 0 1px var(--coral) inset; }
/* a cross reference open below: its verse, softly marked above */
.br-verse.is-xref { background: color-mix(in srgb, var(--coral) 16%, transparent); border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background 0.3s ease; }
/* the Study pane: tucked away with the arrow on its tabs (or by dragging the divider to the bottom) */
.bs-tabs { align-items: flex-end; }
.bs-fold { flex: none; align-self: center; display: grid; place-items: center; width: 32px; height: 32px; margin: 0 0 0 2px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.bs-fold svg { width: 18px; height: 18px; }
.is-folded > .bs-pane, .is-folded > .bs-handle { display: none !important; }
.br-sheet.is-folded #br-body { flex: 1 1 auto !important; padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
.br-inline-wrap.is-folded > .br-inline { height: auto !important; border-radius: 16px; }
.bs-unfold { display: none; }
.is-folded > .bs-unfold { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px 9px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 13px var(--sans); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.35); cursor: pointer; animation: br-drop 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
.bs-unfold svg { width: 16px; height: 16px; color: var(--gold); }
.bs-unfold .bs-uf-up { width: 14px; height: 14px; margin-left: 1px; color: var(--muted); }
.br-sheet.is-folded > .bs-unfold { position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 6; transform: translateX(-50%); transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease; }
.br-sheet.is-folded.is-calm > .bs-unfold, .br-sheet.is-folded:is(.is-nav, .is-set, .is-ribs) > .bs-unfold { transform: translate(-50%, calc(100% + 24px)); opacity: 0; pointer-events: none; } /* (and away while the books, the settings, or the ribbons are over the words: it's for the text. From the owner: "The collapsed split pane button is showing on the Bible book selector screen") */
.br-inline-wrap.is-folded > .bs-unfold { align-self: center; margin-top: 8px; }
.bs-handle.is-folding { background: var(--muted); }
.bs-handle.is-folding span { width: 26px; }
html.br-set-open .as-ctl { opacity: 0 !important; pointer-events: none; } /* (not over the settings) */

/* settings, in groups */
.br-set-in { max-height: calc(100vh - var(--br-head-h, 64px) - 40px); max-height: calc(100dvh - var(--br-head-h, 64px) - 40px); overflow-y: auto; overscroll-behavior: contain; }
.br-set-h { margin: 14px 0 0; padding-top: 4px; font: 800 10.5px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.br-set-h:first-child { margin-top: 6px; }
/* the page */
html.br-no-nums .br-body sup.br-n, html.br-no-nums .br-inline sup.br-n { display: none; }
html.br-no-heads .br-body .br-h, html.br-no-heads .br-inline .br-h { display: none; }
/* The color modes (the site's own: index.html's setSiteTheme puts html.br-<mode> on the page) —
   the whole site takes them, so the phone's bars do too. */
/* The papers, each with its own ink and accents (buttons, verse numbers, highlights, the words of
   Jesus) in tones that go with it, a little softer than the site's, to rest the eyes. They reach the
   floating controls over the reader too. */
/* sepia: a warm, old-paper brown */
html.br-sepia body, html.br-sepia .br-sheet, html.br-sepia .br-inline, html.br-sepia .as-ctl.in-reader { --bg: #F4ECD8; --bg-raised: #F8F1E1; --ink: #4A3B2A; --muted: #8A7760; --rule: #E2D5B8; --coral: #B8894A; --coral-soft: rgba(184, 137, 74, 0.16); --gold: #8E6534; --on-gold: #2A2016; --wj: #A8321F; }
html.br-sepia body.site-dark, html.br-sepia body.site-dark .br-sheet, html.br-sepia body.site-dark .br-inline, html.br-sepia body.site-dark .as-ctl.in-reader { --bg: #2A2419; --bg-raised: #332B1F; --ink: #E6D6B8; --muted: #B3A081; --rule: #4A3F2E; --coral: #D4A865; --coral-soft: rgba(212, 168, 101, 0.16); --gold: #BF8F55; --on-gold: #221A10; --wj: #F08C72; }
/* steel: a warm steel blue */
html.br-steel body, html.br-steel .br-sheet, html.br-steel .br-inline, html.br-steel .as-ctl.in-reader { --bg: #DCE3EA; --bg-raised: #E5EBF0; --ink: #25313C; --muted: #5B6C7B; --rule: #C2CED9; --coral: #6A87A3; --coral-soft: rgba(106, 135, 163, 0.18); --gold: #4B6887; --on-gold: #F3F6F9; --wj: #B02E3C; }
html.br-steel body.site-dark, html.br-steel body.site-dark .br-sheet, html.br-steel body.site-dark .br-inline, html.br-steel body.site-dark .as-ctl.in-reader { --bg: #1B232B; --bg-raised: #222B34; --ink: #D4DDE5; --muted: #8C9DAC; --rule: #33404D; --coral: #93AECA; --coral-soft: rgba(147, 174, 202, 0.16); --gold: #83A0BD; --on-gold: #141B22; --wj: #F2878F; }
/* sage: a quiet, restful green */
html.br-sage body, html.br-sage .br-sheet, html.br-sage .br-inline, html.br-sage .as-ctl.in-reader { --bg: #E2E9DA; --bg-raised: #EAF0E3; --ink: #2B3829; --muted: #62725E; --rule: #CAD6C0; --coral: #769463; --coral-soft: rgba(118, 148, 99, 0.18); --gold: #56734A; --on-gold: #F4F7F1; --wj: #B3372A; }
html.br-sage body.site-dark, html.br-sage body.site-dark .br-sheet, html.br-sage body.site-dark .br-inline, html.br-sage body.site-dark .as-ctl.in-reader { --bg: #1C231B; --bg-raised: #232B21; --ink: #D5DFCE; --muted: #91A18A; --rule: #344131; --coral: #9BBA88; --coral-soft: rgba(155, 186, 136, 0.16); --gold: #88A876; --on-gold: #151C13; --wj: #F2917C; }
/* dusk: a soft rose-lavender, for evenings */
html.br-dusk body, html.br-dusk .br-sheet, html.br-dusk .br-inline, html.br-dusk .as-ctl.in-reader { --bg: #EBE2E7; --bg-raised: #F1EAEE; --ink: #3C2E37; --muted: #786470; --rule: #D9CAD3; --coral: #9E7090; --coral-soft: rgba(158, 112, 144, 0.17); --gold: #7E5470; --on-gold: #FAF4F7; --wj: #A8284A; }
html.br-dusk body.site-dark, html.br-dusk body.site-dark .br-sheet, html.br-dusk body.site-dark .br-inline, html.br-dusk body.site-dark .as-ctl.in-reader { --bg: #241D23; --bg-raised: #2C242B; --ink: #E4D7DF; --muted: #A6909D; --rule: #42353E; --coral: #C79BB6; --coral-soft: rgba(199, 155, 182, 0.16); --gold: #B588A5; --on-gold: #211820; --wj: #F388A2; }
/* Solarized (Ethan Schoonover's palette for code editors): the same accents on both, with the text
   and paper swapped between the base tones. Blue for buttons, yellow for verse numbers, red for the
   words of Jesus (a little lighter on the dark, to be read easily). Solarized light turns to Solarized dark with the site's dark mode; Solarized dark
   is dark either way. */
html.br-solar body, html.br-solar .br-sheet, html.br-solar .br-inline, html.br-solar .as-ctl.in-reader { --bg: #FDF6E3; --bg-raised: #F7F0DC; --ink: #586E75; --muted: #93A1A1; --rule: #EEE8D5; --coral: #268BD2; --coral-soft: rgba(38, 139, 210, 0.14); --gold: #B58900; --on-gold: #FDF6E3; --wj: #DC322F; }
html.br-solar body.site-dark, html.br-solard body, html.br-solar body.site-dark .br-sheet, html.br-solar body.site-dark .br-inline, html.br-solar body.site-dark .as-ctl.in-reader, html.br-solard .br-sheet, html.br-solard .br-inline, html.br-solard .as-ctl.in-reader { --bg: #002B36; --bg-raised: #073642; --ink: #839496; --muted: #657B83; --rule: #0B4452; --coral: #268BD2; --coral-soft: rgba(38, 139, 210, 0.2); --gold: #B58900; --on-gold: #FDF6E3; --wj: #E8605B; color-scheme: dark; }
html.br-solard .br-sheet .br-wj, html.br-solar body.site-dark .br-wj { color: var(--wj); }
/* One (Atom's One Light and One Dark, the editors' most-used theme): blue buttons, its yellow for
   verse numbers, its red for the words of Jesus (a shade deeper on the light, to be read easily) */
html.br-one body, html.br-one .br-sheet, html.br-one .br-inline, html.br-one .as-ctl.in-reader { --bg: #FAFAFA; --bg-raised: #F0F0F1; --ink: #383A42; --muted: #696C77; --rule: #E5E5E6; --coral: #3A6FE0; --coral-soft: rgba(64, 120, 242, 0.13); --gold: #A06E00; --on-gold: #FFFFFF; --wj: #C4382E; }
html.br-one body.site-dark, html.br-oned body, html.br-one body.site-dark .br-sheet, html.br-one body.site-dark .br-inline, html.br-one body.site-dark .as-ctl.in-reader, html.br-oned .br-sheet, html.br-oned .br-inline, html.br-oned .as-ctl.in-reader { --bg: #282C34; --bg-raised: #21252B; --ink: #ABB2BF; --muted: #8B919C; --rule: #3E4451; --coral: #61AFEF; --coral-soft: rgba(97, 175, 239, 0.16); --gold: #E5C07B; --on-gold: #282C34; --wj: #E5767E; color-scheme: dark; }
html.br-oned .br-sheet .br-wj, html.br-one body.site-dark .br-wj { color: var(--wj); }
/* Daylight and Midnight (GitHub's light and dark themes from the code editors: a crisp white page,
   and a deep navy one for night): blue buttons, purple verse numbers, its red for the words of Jesus */
html.br-gh body, html.br-gh .br-sheet, html.br-gh .br-inline, html.br-gh .as-ctl.in-reader { --bg: #FFFFFF; --bg-raised: #F6F8FA; --ink: #1F2328; --muted: #59636E; --rule: #D1D9E0; --coral: #0969DA; --coral-soft: rgba(9, 105, 218, 0.1); --gold: #8250DF; --on-gold: #FFFFFF; --wj: #CF222E; }
html.br-gh body.site-dark, html.br-ghd body, html.br-gh body.site-dark .br-sheet, html.br-gh body.site-dark .br-inline, html.br-gh body.site-dark .as-ctl.in-reader, html.br-ghd .br-sheet, html.br-ghd .br-inline, html.br-ghd .as-ctl.in-reader { --bg: #0D1117; --bg-raised: #161B22; --ink: #C9D1D9; --muted: #8B949E; --rule: #30363D; --coral: #58A6FF; --coral-soft: rgba(88, 166, 255, 0.15); --gold: #D2A8FF; --on-gold: #0D1117; --wj: #FF7B72; color-scheme: dark; }
html.br-ghd .br-sheet .br-wj, html.br-gh body.site-dark .br-wj { color: var(--wj); }
html.br-sepia .br-sheet, html.br-steel .br-sheet, html.br-sage .br-sheet, html.br-dusk .br-sheet, html.br-solar .br-sheet, html.br-solard .br-sheet, html.br-one .br-sheet, html.br-oned .br-sheet, html.br-gh .br-sheet, html.br-ghd .br-sheet { background: var(--bg); color: var(--ink); }
/* listening */
.br-kept { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg-raised); color: var(--gold); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.br-kept[hidden] { display: none; }
.br-kept svg { width: 18px; height: 18px; }
.br-kept-n { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid var(--bg-raised); border-radius: 999px; background: var(--coral); color: #fff; font: 800 10.5px/14px var(--sans); text-align: center; box-sizing: border-box; }
@media (hover: hover) { .br-kept:hover { border-color: var(--gold); } }
.br-kept.is-hop { animation: br-kept-hop 0.6s cubic-bezier(0.34, 1.6, 0.64, 1); }
@keyframes br-kept-hop { 30% { transform: translateY(-5px) scale(1.12); } 60% { transform: scale(0.96); } }
@media (prefers-reduced-motion: reduce) { .br-kept.is-hop { animation: none; } }
.br-listen { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg-raised); color: var(--ink); cursor: pointer; }
.br-listen svg { width: 19px; height: 19px; }
/* (Study and Aa, in the head as in a book's window) */
.br-hb { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg-raised); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.br-hb svg { width: 18px; height: 18px; }
.br-hb.br-aa { font: 700 14px var(--serif); }
.br-hb[aria-pressed="true"] { border-color: var(--coral); background: var(--coral-soft); color: var(--gold); }
.br-note { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg-raised); color: var(--gold); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.br-note svg { width: 18px; height: 18px; }
.br-note.is-picked { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--bg-raised)); } /* (verses picked: the note goes on them) */
.br-sheet.is-listening .br-listen { border-color: var(--coral); background: var(--coral-soft); color: var(--gold); }
.br-player { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; margin: 0 auto; max-width: 620px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); border: 1px solid var(--rule); border-bottom: none; border-radius: 22px 22px 0 0; background: var(--bg-raised); box-shadow: 0 -14px 34px -18px rgba(0, 0, 0, 0.45); font-family: var(--sans); animation: bp-up 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.br-player[hidden] { display: none; }
@keyframes bp-up { from { transform: translateY(100%); } }
.bp-top { display: flex; align-items: center; gap: 6px; }
.bp-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bp-titles b { font-size: 15.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-titles small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bp-icon svg { width: 19px; height: 19px; }
.bp-icon[aria-expanded="true"], .bp-icon[aria-pressed="true"] { border-color: var(--coral); background: var(--coral-soft); color: var(--gold); }
.bp-seek { display: block; padding: 12px 0 4px; cursor: pointer; touch-action: none; outline: none; }
.bp-bar { position: relative; display: block; height: 5px; border-radius: 3px; background: var(--rule); }
.bp-bar i { position: absolute; inset: 0; border-radius: 3px; background: var(--coral); transform: scaleX(0); transform-origin: left center; }
.bp-bar b { position: absolute; top: 50%; left: 0; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--bg-raised); }
.bp-seek:focus-visible .bp-bar { box-shadow: 0 0 0 3px var(--coral-soft); }
.bp-times { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--muted); }
.bp-ctrls { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 4px 0; }
.bp-c { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bp-c svg { width: 30px; height: 30px; }
.bp-c.bp-ch svg { width: 24px; height: 24px; }
.bp-c:active { background: var(--coral-soft); }
.bp-play { display: grid; place-items: center; width: 66px; height: 66px; padding: 0; border: none; border-radius: 50%; background: var(--coral); color: var(--on-gold); box-shadow: 0 10px 22px -10px rgba(120, 85, 30, 0.7); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bp-play svg { width: 30px; height: 30px; }
.bp-i-pause, .br-player.is-playing .bp-i-play { display: none; }
.br-player.is-playing .bp-i-pause { display: block; }
.bp-drive-off { display: none; }
/* Verse-repeat: selected verses use theme colors */
.br-body.is-picking-repeat .br-verse { cursor: pointer; border-radius: 4px; transition: background 0.15s ease, box-shadow 0.15s ease; }
.br-body.is-picking-repeat .br-verse.bp-v-on {
  background: var(--coral-soft);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--coral) 65%, transparent);
  border-radius: 6px;
}
@media (hover: hover) {
  .br-body.is-picking-repeat .br-verse:hover { background: color-mix(in srgb, var(--coral-soft) 70%, transparent); }
}
.bp-set-repeat { align-items: flex-start; }
.bp-set-repeat .bp-seg { justify-content: flex-end; }
.bp-rep-hint { display: block; margin: -4px 0 8px; font-size: 12px; color: var(--muted); text-align: right; }
/* the player's own settings */
.bp-set { margin: 0 0 10px; padding: 4px 2px 10px; border-bottom: 1px solid var(--rule); animation: br-drop 0.22s ease; }
.bp-set[hidden] { display: none; }
.bp-set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; }
.bp-set-row > b { font-size: 14px; color: var(--ink); }
.bp-set-row small { font-size: 12px; color: var(--muted); }
.bp-seg { flex-wrap: wrap; justify-content: flex-end; }
.bp-set-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 0; border: none; background: none; color: var(--ink); text-align: left; font-family: var(--sans); cursor: pointer; }
.bp-set-sw > span { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.bp-set-sw svg { grid-row: 1 / 3; width: 20px; height: 20px; color: var(--gold); }
.bp-set-sw b { font-size: 14px; }
.bp-set-sw small { font-size: 12px; color: var(--muted); }
.bp-set-sw.is-on .br-sw { background: var(--coral); }
.bp-set-sw.is-on .br-sw::after { transform: translateX(12px); }
.bp-set-note { margin: 4px 0 0; font-size: 11.5px; color: var(--muted); }
/* driving mode: just the big, simple controls */
.br-player.is-drive { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.br-player.is-drive .bp-top [data-bp-set], .br-player.is-drive .bp-top [data-bp-drive], .br-player.is-drive .bp-set { display: none; }
.br-player.is-drive .bp-titles b { font-size: 22px; }
.br-player.is-drive .bp-titles small { font-size: 13.5px; }
.br-player.is-drive .bp-icon { width: 48px; height: 48px; }
.br-player.is-drive .bp-bar { height: 8px; }
.br-player.is-drive .bp-bar b { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.br-player.is-drive .bp-times { font-size: 14px; }
.br-player.is-drive .bp-ctrls { padding: 12px 0 4px; }
.br-player.is-drive .bp-c { width: 76px; height: 76px; border: 1.5px solid var(--rule); background: var(--bg); }
.br-player.is-drive .bp-c svg { width: 40px; height: 40px; }
.br-player.is-drive .bp-c.bp-ch svg { width: 32px; height: 32px; }
.br-player.is-drive .bp-play { width: 104px; height: 104px; }
.br-player.is-drive .bp-play svg { width: 48px; height: 48px; }
.br-player.is-drive .bp-drive-off { display: block; width: 100%; margin-top: 14px; padding: 14px; border: 1.5px solid var(--rule); border-radius: 16px; background: var(--bg); color: var(--ink); font: 800 16px var(--sans); cursor: pointer; }
@media (max-width: 380px) { .br-player.is-drive .bp-c { width: 64px; height: 64px; } .br-player.is-drive .bp-play { width: 92px; height: 92px; } }
.br-sheet.is-listening #br-body { padding-bottom: calc(var(--bp-h, 180px) + 24px); }
.br-sheet.is-listening .bs-scroll { padding-bottom: calc(var(--bp-h, 180px) + 8px); }
/* (driving: the title bar stays put; nothing slides in or out) */
.br-sheet.is-driving .br-head { transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
/* follow along: the verse being read stands out, and its words light up as they're said */
.br-body.is-following .br-verse:not(.fa-verse) { opacity: 0.5; }
/* (the verse being read: lit, the rest a little faded; not word by word, which can't be timed exactly) */
.br-body.is-following .br-verse { transition: opacity 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease; }
.br-body.is-following .fa-verse { background: color-mix(in srgb, var(--coral) 20%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 20%, transparent); border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (prefers-reduced-motion: reduce) { .br-body.is-following .br-verse { transition: none; } .br-player { animation: none; } }
/* the settings button turns into an X while its menu is open, and the reader's Close steps aside */
.br-gear-x { display: none; }
.br-sheet.is-set .br-gear-i { display: none; }
.br-sheet.is-set .br-gear-x { display: grid; place-items: center; animation: br-spin-in 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.br-gear-i { display: grid; place-items: center; }
@keyframes br-spin-in { from { transform: rotate(-90deg); opacity: 0; } }
.br-sheet.is-set .br-x { opacity: 0; pointer-events: none; }
.br-x { transition: opacity 0.2s ease; }
@media (max-width: 400px) { .br-head { gap: 6px; } .br-gear, .br-listen, .br-kept, .br-note, .br-hb { width: 34px; height: 34px; } }
.br-tipsbtn { flex: none; padding: 7px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font: 700 12.5px var(--sans); cursor: pointer; }
html.br-listening .as-ctl { display: none !important; } /* (listening, the narration sets the pace: no auto-scroll) */

/* the contents' search: a book or a verse, suggested as you type */
.bn-find { position: relative; flex: none; display: flex; align-items: center; gap: 8px; margin: 10px 16px 2px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); }
.bn-find:focus-within { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); }
.bn-find svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
.bn-find input { flex: 1; min-width: 0; height: 44px; padding: 0; border: none; background: none; color: var(--ink); font: 16px var(--sans); outline: none; -webkit-appearance: none; appearance: none; }
.bn-sugg { position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 4; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.45); animation: bv-in 0.12s ease; }
.bn-sugg[hidden] { display: none; }
.bn-sug { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 12px; border: none; border-radius: 10px; background: none; color: var(--ink); text-align: left; font-family: var(--sans); cursor: pointer; }
.bn-sug b { font-size: 15px; }
.bn-sug small { font-size: 12px; color: var(--muted); }
.bn-sug.is-on { background: var(--coral-soft); }
@media (hover: hover) { .bn-sug:hover { background: var(--coral-soft); } }
.bn-sug-none { margin: 6px 8px; font: 13px var(--sans); color: var(--muted); }
.bi-find { margin: 16px 0 4px; }
.bi-find .bn-sugg { z-index: 20; }
.br-body.is-following .br-h:not(.fa-verse), .br-body.is-following .br-d:not(.fa-verse) { opacity: 0.5; }
.br-h.fa-verse, .br-d.fa-verse { color: var(--gold); }

/* the page turn: the page pulled over, like paper (reader.js, "the page turn") */
.br-peel { position: absolute; z-index: 4; overflow: hidden; pointer-events: none; }
.br-peel-page { position: absolute; left: 0; top: 0; margin: 0; overflow: hidden !important; transform: none !important; opacity: 1 !important; visibility: visible !important; background: var(--bg); pointer-events: none; }
.br-peel-page.is-front { z-index: 2; will-change: clip-path; }
/* the page's back, folded over: paper, lit where it curves up from the fold, darker toward its edge */
.br-peel-back { position: absolute; top: 0; left: 0; z-index: 3; height: 100%; will-change: transform, width;
  background:
    linear-gradient(to left, rgba(255, 255, 255, calc(0.35 * var(--lift, 0))), rgba(255, 255, 255, 0) 22%),
    linear-gradient(to left, rgba(60, 45, 20, 0.16), rgba(60, 45, 20, 0.02) 30%, rgba(60, 45, 20, 0.08)),
    color-mix(in srgb, var(--bg) 94%, #b8a37a);
  box-shadow: -6px 0 18px -6px rgba(0, 0, 0, calc(0.35 * var(--lift, 0))); }
body.site-dark .br-peel-back { background: linear-gradient(to left, rgba(255, 255, 255, calc(0.08 * var(--lift, 0))), transparent 25%), color-mix(in srgb, var(--bg) 88%, #fff); }
/* the shadow the lifted page casts on the one under it, just past the fold */
.br-peel-shade { position: absolute; top: 0; left: 0; z-index: 1; width: 60px; height: 100%; background: linear-gradient(to right, rgba(20, 15, 5, 0.28), rgba(20, 15, 5, 0)); opacity: 0; will-change: transform, opacity; }

/* the gestures, in the settings */
.br-gest { margin: 4px 0 2px; padding: 0; list-style: none; }
.br-gest li { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; align-items: baseline; padding: 6px 0; font-family: var(--sans); }
.br-gest li span { grid-row: 1 / 3; align-self: center; color: var(--gold); }
.br-gest li svg { width: 18px; height: 18px; display: block; }
.br-gest b { font-size: 13.5px; color: var(--ink); }
.br-gest small { font-size: 12px; color: var(--muted); }
.br-gest-row { justify-content: flex-start; gap: 8px; flex-wrap: wrap; min-height: 0; }
.br-tipsbtn.is-main { border-color: var(--coral); background: var(--coral); color: var(--on-gold); }
/* the walk-through: a soft spotlight, the gesture shown, and a word on it */
.br-tour { position: fixed; inset: 0; z-index: 2147483190; animation: bv-in 0.2s ease; }
.br-tour.is-out { opacity: 0; transition: opacity 0.25s ease; }
.br-tour-spot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 2px var(--coral), 0 0 0 9999px rgba(20, 16, 12, 0.5); transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
.br-tour-tap { animation-iteration-count: infinite !important; animation-duration: 1.8s !important; }
.br-tour-swipe { position: fixed; width: 0; height: 0; pointer-events: none; }
.br-tour-swipe i { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 2px solid var(--gold); border-radius: 50%; background: color-mix(in srgb, var(--coral) 30%, transparent); animation: br-tour-swipe 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes br-tour-swipe { 0% { transform: translateX(70px); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateX(-70px); opacity: 1; } 100% { transform: translateX(-80px); opacity: 0; } }
.br-tour-card { position: fixed; left: 50%; width: min(340px, calc(100% - 32px)); transform: translateX(-50%); padding: 14px 16px 12px; border: 1px solid color-mix(in srgb, var(--coral) 55%, var(--rule)); border-radius: 18px; background: var(--bg-raised); color: var(--ink); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.5); font-family: var(--sans); animation: br-drop 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.br-tour-card small { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.br-tour-card b { display: block; margin: 2px 0 4px; font-size: 16.5px; }
.br-tour-card p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.br-tour-card div { display: flex; justify-content: flex-end; gap: 8px; }
.br-tour-card button { padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font: 700 13px var(--sans); cursor: pointer; }
.br-tour-card button.is-main { border-color: var(--coral); background: var(--coral); color: var(--on-gold); }
@media (prefers-reduced-motion: reduce) { .br-tour-swipe i, .br-tour-tap { animation: none !important; } }
html.br-touring .as-ctl { display: none !important; }

/* the tips, above the auto-scroll button (with its controls open, in the Bible reader) */
.as-tips { position: absolute; right: 4px; bottom: calc(100% + 8px); display: none; flex-direction: column; align-items: flex-end; gap: 8px; }
.as-ctl.is-open.in-reader .as-tips, .as-ctl.tips-open.in-reader .as-tips { display: flex; animation: as-rise 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes as-rise { from { opacity: 0; transform: translateY(8px); } }
.as-tipbtn { display: grid; place-items: center; width: 38px; height: 38px; margin-right: 4px; padding: 0; border: 1px solid color-mix(in srgb, var(--coral) 45%, var(--rule)); border-radius: 50%; background: var(--bg-raised); color: var(--gold); font: 800 17px var(--sans); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.45); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.as-tipbtn svg { width: 17px; height: 17px; }
.as-ctl.is-keys [data-as-pop="keys"], .as-ctl.is-tips [data-as-pop="tips"] { background: var(--coral); color: var(--on-gold); }
.as-tipl { display: none; flex-direction: column; align-items: flex-end; gap: 6px; }
.as-ctl.is-keys .as-keyl, .as-ctl.is-tips .as-tipsl { display: flex; }
.as-ctl.is-fonts .as-keyl { display: none; }
.as-ctl.is-fonts .as-fontl { display: flex; }
.as-tipl + .as-tipl + .as-tipbtn { margin-top: 2px; }
/* the shortcuts: solid buttons (they do things), not the tips' dashed hints */
.as-key { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 11px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 13px var(--sans); white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.45); cursor: pointer; opacity: 0; transform: translateY(8px) scale(0.96); animation: as-tip-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards; -webkit-tap-highlight-color: transparent; }
.as-key > svg { flex: none; width: 16px; height: 16px; color: var(--gold); }
.as-key.as-pair { gap: 4px; padding: 3px; cursor: default; }
.as-pair > span { padding: 0 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.as-pair button { display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 38px; height: 32px; padding: 0 8px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--ink); font: 800 14px var(--serif, Georgia, serif); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.as-pair button small { font-size: 11px; }
.as-pair button svg { width: 11px; height: 11px; }
.as-pair .as-t { gap: 6px; padding: 0 12px; background: transparent; font: 700 12.5px var(--sans); }
.as-pair .as-t + .as-t { border-left: 1px solid var(--rule); border-radius: 0 999px 999px 0; }
.as-pair .as-t:first-child:not(:last-child) { border-radius: 999px 0 0 999px; }
.as-pair .as-t + .as-t:not(:last-child) { border-radius: 0; }
/* the groups (getting around; the text; light; time): a little space between, no names */
.as-key.is-gap { margin-top: 10px; }
/* the page: line spacing, font, margins in one */
.as-page .as-font { gap: 5px; padding: 0 10px; background: color-mix(in srgb, var(--coral) 12%, var(--bg-raised)); }
.as-page .as-font b { font-size: 15px; font-weight: 600; }
.as-page .as-font span { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
.as-page .as-font svg { width: 11px; height: 11px; color: var(--muted); }
/* the fonts, each in its own face */
.as-fontl { max-height: min(60vh, 460px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.as-fontpick { flex-direction: column; align-items: flex-end; gap: 0; padding: 7px 14px; font-size: 15px; font-weight: 500; }
.as-fontpick small { font: 600 10.5px var(--sans); color: var(--muted); }
.as-fontpick.is-on { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 16%, var(--bg-raised)); }
.as-fontback { font-weight: 700; }
.as-pair .as-t svg { width: 15px; height: 15px; color: var(--gold); }
.as-pair .as-t.is-on { background: color-mix(in srgb, var(--coral) 18%, var(--bg-raised)); color: var(--ink); }
.as-pair .as-t[role="switch"]:not(.is-on) { color: var(--muted); }
.as-pair [data-as-key="red"].is-on svg { color: var(--wj, #B3261E); }
body.site-dark .as-pair [data-as-key="red"].is-on svg { color: var(--wj, #F08A7E); }
.as-pair .as-t[role="switch"]:not(.is-on) svg { opacity: 0.55; }
.as-pair .as-mode { gap: 6px; min-width: 84px; padding: 0 12px; background: color-mix(in srgb, var(--coral) 16%, var(--bg-raised)); border: 1px solid color-mix(in srgb, var(--coral) 45%, var(--rule)); font: 700 12.5px var(--sans); }
.as-pair .as-mode svg { width: 15px; height: 15px; color: var(--gold); }
.as-sw { display: inline-block; width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.as-mode { white-space: nowrap; }
/* the page dimmed (brightness), over the reader but not its controls */
/* (a see-through layer over the whole screen still counts to Safari when it picks its bars' color) */
.as-pair button:disabled { opacity: 0.35; cursor: default; }
.as-key:nth-last-child(1) { animation-delay: 0ms; } .as-key:nth-last-child(2) { animation-delay: 35ms; } .as-key:nth-last-child(3) { animation-delay: 70ms; } .as-key:nth-last-child(4) { animation-delay: 105ms; } .as-key:nth-last-child(5) { animation-delay: 140ms; } .as-key:nth-last-child(6) { animation-delay: 175ms; }
@media (hover: hover) { .as-key:not(.as-pair):hover, .as-pair button:not(:disabled):hover { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 14%, var(--bg-raised)); } }
@media (prefers-reduced-motion: reduce) { .as-key { animation: none; opacity: 1; transform: none; } }
.as-tiph { margin-bottom: 2px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 82%, transparent); color: var(--bg); font: 800 11.5px var(--sans); letter-spacing: 0.04em; white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.45); animation: as-tip-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards; opacity: 0; }
.as-tiph span { font-weight: 600; letter-spacing: 0; opacity: 0.8; }
/* (hints, not actions: dashed, a lightbulb, the words in a softer weight) */
.as-tip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px; border: 1.5px dashed color-mix(in srgb, var(--coral) 70%, var(--rule)); border-radius: 999px; background: color-mix(in srgb, var(--coral) 12%, var(--bg-raised)); color: var(--ink); font: 600 12.5px var(--sans); white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.45); cursor: pointer; opacity: 0; transform: translateY(8px) scale(0.96); animation: as-tip-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards; -webkit-tap-highlight-color: transparent; }
.as-tip:nth-last-child(1) { animation-delay: 0ms; } .as-tip:nth-last-child(2) { animation-delay: 35ms; } .as-tip:nth-last-child(3) { animation-delay: 70ms; } .as-tip:nth-last-child(4) { animation-delay: 105ms; } .as-tip:nth-last-child(5) { animation-delay: 140ms; } .as-tip:nth-last-child(6) { animation-delay: 175ms; }
@keyframes as-tip-in { to { opacity: 1; transform: none; } }
@media (hover: hover) { .as-tip:hover, .as-tipbtn:hover { border-color: var(--coral); } }
@media (prefers-reduced-motion: reduce) { .as-tip { animation: none; opacity: 1; transform: none; } .as-ctl.is-open.in-reader .as-tips { animation: none; } }
.as-tip svg { flex: none; width: 15px; height: 15px; color: var(--gold); }
.as-tiph { animation-delay: 210ms; }

/* find: like a code editor's, under the title (every match lit, the one you're on brighter) */
.br-head { flex-wrap: wrap; }
.br-find { flex: 1 1 100%; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 7px; margin-top: 4px; animation: br-drop 0.2s ease; }
.br-find[hidden] { display: none; }
.br-find-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.br-find-in { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg-raised); cursor: text; }
.br-find-in:focus-within { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); }
.br-find-in svg { flex: none; width: 16px; height: 16px; color: var(--muted); }
.br-find-in input { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: none; background: none; color: var(--ink); font: 16px var(--sans); outline: none; -webkit-appearance: none; appearance: none; }
.br-find-in input::-webkit-search-cancel-button { display: none; }
.br-find-n { flex: none; font: 600 12px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.br-find.is-none .br-find-in { border-color: color-mix(in srgb, var(--wj, #B3261E) 55%, var(--rule)); }
.br-find.is-none .br-find-n { color: var(--wj, #B3261E); }
.br-find-b { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg-raised); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.br-find-b svg { width: 17px; height: 17px; }
.br-find .br-seg { flex: none; padding: 2px; }
.br-find .br-seg button { padding: 5px 10px; font-size: 12px; }
.br-find-ww { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--muted); font: 700 12px var(--sans); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.br-find-ww b { font: italic 700 12.5px Georgia, serif; text-decoration: underline; text-underline-offset: 2px; }
.br-find-ww.is-on { border-color: var(--coral); background: var(--coral-soft); color: var(--ink); }
.br-find-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11.5px var(--sans); color: var(--muted); }
@media (hover: hover) { .br-find-b:hover, .br-find-ww:hover { border-color: var(--coral); } }
@media (max-width: 400px) { .br-find-ww { padding: 6px 8px; } .br-find .br-seg button { padding: 5px 8px; } }
.br-body mark.br-fm { padding: 0 1px; border-radius: 3px; background: rgba(255, 196, 0, 0.34); color: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.br-body mark.br-fm.is-cur {
  background: color-mix(in srgb, var(--coral) 55%, rgba(255, 180, 40, 0.85));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--coral) 50%, transparent);
  color: inherit;
}
::highlight(br-find) { background-color: rgba(255, 196, 0, 0.34); }
::highlight(br-find-cur) { background-color: color-mix(in srgb, var(--coral) 50%, rgba(255, 160, 0, 0.75)); }
/* the contents' lists of verses */
.bn-sug.is-words b { color: var(--gold); }
.bn-hitbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 16px 0; font: 12.5px var(--sans); color: var(--muted); }
.bn-hit { display: block; width: 100%; padding: 10px 4px; border: none; border-bottom: 1px solid var(--rule); background: none; color: var(--ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bn-hit b { display: block; margin-bottom: 3px; font: 700 12.5px var(--sans); color: var(--gold); }
.bn-hit span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: 15.5px/1.45 var(--br-font, Georgia, serif); }
.bn-hit mark { padding: 0 1px; border-radius: 2px; background: rgba(255, 196, 0, 0.4); color: inherit; }
@media (hover: hover) { .bn-hit:hover { background: var(--coral-soft); } }
.bn-sec span { margin-left: 4px; color: var(--muted); letter-spacing: 0; }
.bn-more { background: var(--bg-raised); color: var(--ink); border: 1px solid var(--rule); }

/* the reader: no double-tap zoom (a double tap is the word ring's) */
.br-scrim, .br-scrim *, .as-ctl, .as-ctl *, .wr-ring, .wr-ring * { touch-action: manipulation; }
.br-sheet .br-body { touch-action: pan-y; }
.sheet-grip, .bs-handle, .bp-seek { touch-action: none; }

/* phones: the backdrop behind the page is the page's color (the phone's bars take their color from it) */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) { .br-scrim { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* (a phone on its side: the reader fills the screen too, on the page's color, which the phone's bars take theirs from) */
@media (min-width: 700px) and (max-height: 500px) and (pointer: coarse) { .br-scrim { padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); } .br-sheet { height: 100%; border-radius: 0; box-shadow: none; } }

/* while reading: the site behind the reader (its header, its tab bar, the page) in the paper's color, which the phone's own bars take theirs from */
html.br-open body, html.br-open #site-header, html.br-open nav.tabs-bottom { background: var(--bg) !important; transition: none !important; }

/* the site's header, dropped down over the reader's top for its color mode button (reader.js dropHeader) */
html.br-hdr .br-scrim { top: var(--br-hdr, 0px); transition: top 0.25s ease; }
html.br-hdr .br-sheet { height: calc(100dvh - var(--br-hdr, 0px)); }
html.br-hdr #site-header { transform: none !important; pointer-events: auto !important; }
html.br-hdr .as-ctl.in-reader { visibility: hidden; }
/* the button the header came down for: a wiggle and a glowing ring, to say "here" */
.hdr-look { position: relative; animation: hdr-wiggle 0.7s ease-in-out 2; box-shadow: 0 0 0 0 color-mix(in srgb, var(--coral) 60%, transparent); }
.hdr-look::after { content: ''; position: absolute; inset: -5px; border-radius: 999px; border: 2px solid var(--coral); opacity: 0; pointer-events: none; animation: hdr-ring 1.2s ease-out 2; }
@keyframes hdr-wiggle { 0%, 100% { transform: rotate(0) scale(1); } 15% { transform: rotate(-7deg) scale(1.08); } 30% { transform: rotate(6deg) scale(1.08); } 45% { transform: rotate(-5deg) scale(1.06); } 60% { transform: rotate(4deg) scale(1.04); } 75% { transform: rotate(-2deg) scale(1.02); } }
@keyframes hdr-ring { 0% { opacity: 0.9; transform: scale(0.92); } 100% { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .hdr-look { animation: none; } .hdr-look::after { animation: none; opacity: 1; } }
/* the first few times: a bubble over the pill saying what's in it */
.as-hint { position: fixed; z-index: 2147483101; max-width: 250px; padding: 10px 14px; border-radius: 16px; background: var(--ink); color: var(--bg); font: 600 14px/1.35 var(--sans); box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.45); pointer-events: none; animation: as-hint-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.as-hint::after { content: ''; position: absolute; right: 30px; bottom: -7px; width: 14px; height: 14px; background: var(--ink); transform: rotate(45deg); border-radius: 2px; }
.as-hint b { font: 700 16px var(--serif); }
.as-hint.is-going { opacity: 0; transition: opacity 0.25s; }
@keyframes as-hint-in { from { opacity: 0; transform: translateY(8px) scale(0.9); } to { opacity: 1; transform: none; } }
/* a passage drawn in a page: "Open in the reader" (not another site) */
.br-inline-open { padding: 0; border: none; background: none; color: var(--coral); font: 700 12.5px var(--sans); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* a Bible reference in the site's text: a link to it in the reader (reader.js's verse links) */
/* (gold and a touch bolder, no underline: an underline read like an error mark) */
a.br-ref { color: var(--gold); font-weight: 600; text-decoration: none; border-radius: 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s; }
a.br-ref:active { background: color-mix(in srgb, var(--gold) 16%, transparent); }
@media (hover: hover) { a.br-ref:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); } }
a.br-ref:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
/* the Options pop-up, easy to read in every color mode: each floating button solid (the mode's own
   colors, with a firm edge and a shadow to lift it off the text), and no faint grays */
.as-tipl .as-key, .as-tipl .as-tip { background: color-mix(in srgb, var(--ink) 8%, var(--bg-raised)); border: 1.5px solid color-mix(in srgb, var(--ink) 24%, var(--bg-raised)); color: var(--ink); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.45), 0 2px 5px rgba(0, 0, 0, 0.18); }
.as-tipl .as-pair > span, .as-pair .as-t[role="switch"]:not(.is-on), .as-fontpick small { color: color-mix(in srgb, var(--ink) 72%, transparent); }
.as-pair .as-t[role="switch"]:not(.is-on) svg { opacity: 0.75; }
.as-pair .as-t + .as-t { border-left-color: color-mix(in srgb, var(--ink) 16%, transparent); }
.as-pair .as-t.is-on, .as-pair .as-mode { background: color-mix(in srgb, var(--coral) 22%, var(--bg-raised)); color: var(--ink); }
.as-tiph { background: var(--ink); color: var(--bg-raised); }
/* a passage in the window over the apps (nav/sheet.js): just the reader's text; a short one with a
   way to the whole chapter, and in the chapter, those verses lit */
/* (no card around it: the words sit on the window like a page, with room to breathe, at a
   comfortable width to read) */
.br-in-nv { max-width: 640px; margin: 0 auto; padding: 6px 8px 8px; }
.br-in-nv .br-inline { padding: 0; border: none; border-radius: 0; background: none; }
.br-in-nv .br-inline .br-p { line-height: 1.75; }
.br-nv-whole { display: inline-flex; align-items: center; gap: 6px; margin: 18px 0 6px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 13px var(--sans); cursor: pointer; }
@media (hover: hover) { .br-nv-whole:hover { border-color: var(--coral); } }
.br-in-nv .br-verse.is-focus { background: color-mix(in srgb, var(--gold) 16%, transparent); border-radius: 6px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 16%, transparent); box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* (a soft wash, a little wider than the words) */

/* Text, font & colors (reader.js, "fmtBox"): opened from the settings, a panel floating over the
   page under the head, at its right, so each change shows on the text as it's made */
.br-fmt { position: absolute; right: 12px; z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: calc(100% - 24px); animation: as-rise 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
.br-fmt[hidden] { display: none; }
.br-fmt.is-book .as-key[aria-label="Show"] { display: none; } /* (in a book's window: no verse numbers, headings, or red letters) */
.br-fmt .as-tipl { display: none; }
.br-fmt.is-keys .as-keyl, .br-fmt.is-fonts .as-fontl { display: flex; }
.br-fmt-h { display: inline-flex; align-items: center; gap: 8px; padding-right: 4px; }
.br-fmt-x { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: color-mix(in srgb, var(--bg-raised) 22%, transparent); color: inherit; cursor: pointer; }
.br-fmt-x svg { width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) { .br-fmt { animation: none; } }
/* the settings' rows that open something: text, font & colors; find */
.br-set-go { display: flex; align-items: center; gap: 12px; width: 100%; border: none; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.br-set-go .br-set-t { flex: 1; min-width: 0; }
.br-set-aa { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--coral) 14%, var(--bg-raised)); color: var(--coral); font: 600 15px/1 var(--serif); }
.br-set-aa svg { width: 16px; height: 16px; }
.br-set-chev { flex: none; width: 16px; height: 16px; color: var(--muted); }
.bp-sleep-left { flex-basis: 100%; font: 700 12px var(--sans); color: var(--coral); }
.bp-sleep-left:empty { display: none; }
.bp-set-sleep { flex-wrap: wrap; }
/* a picked verse (its number tapped, reader.js pickVerse): lit in the text, and in the Study pane
   below, the note that covers it, its cross references, or the same verse in Compare */
.br-verse.is-picked { background: color-mix(in srgb, var(--gold) 20%, transparent); border-radius: 5px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background 0.25s; }
.br-verse.is-picked > .br-n { color: var(--coral); font-weight: 800; }
.bs-seg.is-picked { background: color-mix(in srgb, var(--gold) 16%, transparent); box-shadow: inset 3px 0 0 var(--coral); border-radius: 0 10px 10px 0; transition: background 0.25s; }
/* the picked verse's two small buttons, after its number: share it, listen from it */
.br-pickacts { display: inline-flex; gap: 6px; margin: 0 8px 0 4px; vertical-align: 2px; -webkit-user-select: none; user-select: none; }
.br-pickact { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 8px; border: 1px solid color-mix(in srgb, var(--coral) 40%, var(--rule)); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 12px var(--sans); line-height: 1; cursor: pointer; white-space: nowrap; animation: as-rise 0.2s ease; }
.br-pickact svg { width: 13px; height: 13px; color: var(--coral); }
@media (hover: hover) { .br-pickact:hover { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 10%, var(--bg-raised)); } }
@media (prefers-reduced-motion: reduce) { .br-pickact { animation: none; } }
/* (the one row stays one line: each tab's name on a line of its own, the short ones on a phone) */
.bs-tab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .bs-pick { max-width: 92px; padding: 0 6px 0 9px; } .bs-tabs .bs-tab { padding: 7px 4px; } }
@media (max-width: 480px) { .bs-tabs .bs-tab { flex: 1 1 auto; } } /* (each as wide as its name: "Cross refs" whole) */
/* a passage in place (a devotion's reading: Bible.inline): the window's plain page, with its
   version and "Open in the Bible" under it; with Study on, back in its box over the notes */
.br-in-place .br-in-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; font: 600 12px var(--sans); color: var(--muted); }
.br-in-place .br-in-foot .br-nv-whole { margin: 0; }
.br-in-place.is-study { max-width: none; padding: 0; }
.br-in-place.is-study > .br-inline { padding: 14px 16px 6px; border: 1px solid var(--rule); border-radius: 16px 16px 0 0; background: var(--bg-raised); }
.br-in-place.is-study > .br-in-foot { display: none; }
@media (max-width: 420px) { .bs-tabs { gap: 3px; padding-left: 8px; padding-right: 8px; } .bs-tabs .bs-tab { padding: 7px 3px; font-size: 11.5px; } .bs-pick { max-width: 76px; } .bs-fold { width: 28px; } } /* (narrow: a devotion's passage, too) */

/* Study, for a passage drawn in a page (reader.js's drawer): its button on a row of its own above the
   words (in the window over the apps, in the window's header), and the Study pane as a drawer over
   the bottom of the screen */
.bd-tabrow { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.bd-tab { pointer-events: auto; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px 0 10px; border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--rule)); border-radius: 999px; background: color-mix(in srgb, var(--bg-raised) 92%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ink); font: 700 12.5px var(--sans); cursor: pointer; box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.35); -webkit-tap-highlight-color: transparent; opacity: 0.82; transition: opacity 0.15s, border-color 0.15s; }
.bd-tab svg { width: 14px; height: 14px; color: var(--gold); }
.bd-tab:hover, .bd-tab:focus-visible, .bd-tab[aria-expanded="true"] { opacity: 1; border-color: var(--gold); }
.bd-tab[aria-expanded="true"] { background: color-mix(in srgb, var(--gold) 14%, var(--bg-raised)); }
.bd-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bd-able.is-drawer { padding-bottom: 50vh; }
.bs-drawer { position: fixed; bottom: 0; z-index: 2147483158; display: flex; flex-direction: column; height: min(50vh, 520px); height: min(50dvh, 520px); min-height: 240px; border: 1px solid var(--rule); border-bottom: none; border-radius: 18px 18px 0 0; background: var(--bg-raised); color: var(--ink); box-shadow: 0 -14px 34px -18px rgba(20, 16, 12, 0.5); transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); overflow: hidden; }
.bs-drawer.open { transform: none; }
.bs-drawer[hidden] { display: none; }
.bs-drawer .bs-pane { flex: 1; min-height: 0; background: none; }
.bs-drawer .bs-scroll { padding-bottom: env(safe-area-inset-bottom); }
.bd-grip { flex: none; display: grid; place-items: center; height: 22px; padding: 0; border: none; background: none; cursor: ns-resize; touch-action: none; } /* (dragged: taller or shorter; tapped: away, #488) */
.bs-drawer.is-sizing { transition: none; }
.bd-grip span { width: 40px; height: 4px; border-radius: 2px; background: var(--rule); }
.bd-grip:hover span { background: var(--muted); }
html.bd-open .vs-sheet { z-index: 2147483159; }
@media (prefers-reduced-motion: reduce) { .bs-drawer { transition: none; } }
.bs-drawer.is-lifted { border-bottom: 1px solid var(--rule); }

/* ---- the verses picked (reader.js pickBar): a bar up from the bottom with what to do with them */
.vp-bar { position: fixed; bottom: 0; left: 0; z-index: 2147483158; width: 100%; padding: 10px 12px; padding-bottom: max(10px, env(safe-area-inset-bottom)); border: 1px solid var(--rule); border-bottom: none; border-radius: 18px 18px 0 0; background: var(--bg-raised); color: var(--ink); box-shadow: 0 -12px 30px -16px rgba(20, 16, 12, 0.45); font-family: var(--sans); transform: translateY(105%); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); box-sizing: border-box; }
.vp-bar.open { transform: none; }
.vp-bar[hidden], .vp-bar.is-mini[hidden] { display: none !important; } /* (the small one's display: flex mustn't keep a hidden bar showing) */
.vp-top { display: flex; align-items: center; gap: 10px; margin: 0 2px 8px; }
.vp-what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vp-what b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-what small { font-size: 12.5px; color: var(--muted); }
.vp-x { flex: none; width: 34px; height: 34px; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg); color: var(--ink); font-size: 15px; cursor: pointer; }
.vp-acts { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.vp-acts::-webkit-scrollbar { display: none; }
.vp-b { flex: 1 0 auto; min-width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 8px 7px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg); color: var(--ink); font: 700 12px var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.15s ease; }
.vp-b svg { width: 20px; height: 20px; color: var(--coral); }
.vp-b:active { transform: scale(0.94); }
.vp-b.is-on { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 12%, var(--bg)); }
@media (hover: hover) { .vp-b:hover { border-color: var(--coral); } }
html.vp-open .as-ctl, html.vp-open .as-hint { visibility: hidden; }
/* (with the Study pane open: a small pill just above it, Copy and ⋯ for the whole bar) */
.vp-bar.is-mini { display: flex; align-items: center; gap: 6px; width: max-content; max-width: calc(100vw - 20px); padding: 5px 5px 5px 14px; border: 1px solid var(--rule); border-radius: 999px; transform: translate(-50%, 12px); opacity: 0; transition: transform 0.2s ease, opacity 0.2s ease; box-shadow: 0 8px 22px -10px rgba(20, 16, 12, 0.5); }
.vp-bar.is-mini.open { transform: translate(-50%, 0); opacity: 1; }
.vp-bar.is-mini .vp-what { flex: 1 1 auto; }
.vp-bar.is-mini .vp-what b { font-size: 13.5px; }
.vp-m { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font: 700 12.5px var(--sans); cursor: pointer; }
.vp-m svg { width: 15px; height: 15px; color: var(--coral); }
.vp-bar.is-mini .vp-x { width: 32px; height: 32px; }
/* (tucked away while reading on: reader.js) */
.vp-bar.is-tucked { transform: translateY(110%); }
.vp-bar.is-mini.is-tucked { transform: translate(-50%, 16px); opacity: 0; pointer-events: none; }
.vp-bar.is-mini.is-dragging { opacity: 0 !important; pointer-events: none; transition: opacity 0.12s ease; }
.is-ranging, .is-ranging * { -webkit-user-select: none !important; user-select: none !important; cursor: ns-resize; }
.is-ranging .br-verse.is-picked { transition: background 0.1s; }

/* The Study pane's tabs: an icon each, and the open one's name (on a phone, its picker's name, when it has
   one: "Geneva ▾"); on a wider screen, every name. Yours only with an account. */
.bs-tabs .bs-tab { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; padding: 7px 10px; }
.bs-tabs .bs-tab svg { width: 17px; height: 17px; flex: none; }
.bs-tabs .bs-tab .bs-tl { display: none; }
.bs-tabs .bs-tab.is-on .bs-tl { display: inline; }
.bs-tabs .bs-tab.is-on svg { color: var(--coral); }
@media (max-width: 480px) { .bs-tabs .bs-tab { min-width: 38px; padding: 7px 9px; } }
/* the tabs in a strip that scrolls sideways when the row is short (a phone), so the open tab keeps its name beside its picker */
.bs-strip { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-end; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.bs-strip::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .bs-tabs .bs-tab { flex: 1 1 auto; } .bs-tabs .bs-tab .bs-tl { display: inline; } }
html:not(.acct-in) .bs-tab[data-bs-tab="mine"] { display: none; }
/* Yours: your notes and prayers on the passage */
.bs-mines { display: flex; flex-direction: column; gap: 6px; }
.bs-mine { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 12px; border: 1px solid var(--rule); border-left: 3px solid var(--gold); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.bs-mine.is-prayer { border-left-color: #7F63A8; }
.bs-mine b { font: 700 14px var(--sans); }
.bs-mine span { font-size: 13px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bs-minech { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.bs-minech small { font: 800 10.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.bs-mine-empty { padding: 16px 4px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.bs-mine-empty p { margin: 0 0 12px; }
.bs-mapall.is-soft { margin-top: 12px; border: 1px solid var(--rule); background: var(--bg-raised); color: var(--ink); }
/* (six of them on a phone: each an even share of the row, so none is cut off or scrolled away) */
@media (max-width: 480px) { .vp-acts .vp-b { flex: 1 1 0; min-width: 0; padding: 8px 2px 7px; font-size: 11px; letter-spacing: -0.01em; } .vp-acts { gap: 4px; } }

/* ---- Side by side (the reader, a screen held sideways): the notes beside the Bible; the divider runs down
   between them, its grip upright, and the reader's bar along the top over both */
.bs-side { flex: none; align-self: center; display: none; place-items: center; width: 32px; height: 32px; margin: 0 0 0 2px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bs-side svg { width: 18px; height: 18px; }
.bs-side .is-rows { display: none; }
.bs-side[aria-pressed="true"] .is-cols { display: none; }
.bs-side[aria-pressed="true"] .is-rows { display: block; }
@media (hover: hover) { .bs-side:hover, .bs-fold:hover { color: var(--ink); } }
@media (orientation: landscape) and (min-width: 600px) { .br-sheet .bs-side { display: grid; } }
.br-sheet.is-side { flex-direction: row; max-width: min(1400px, 100vw); }
.br-sheet.is-side #br-body { box-sizing: border-box; min-width: 0; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.br-sheet.is-side > .bs-handle { width: 1px; height: auto; align-self: stretch; margin-top: var(--br-head-h, 64px); cursor: ew-resize; transition: margin-top 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
.br-sheet.is-side > .bs-handle::before { left: -14px; right: -14px; top: 0; bottom: 0; }
.br-sheet.is-side > .bs-handle span { width: 5px; height: 40px; }
.br-sheet.is-side > .bs-handle:hover span, .br-sheet.is-side > .bs-handle:focus-visible span, .br-sheet.is-side > .bs-handle.is-drag span { width: 5px; height: 52px; }
.br-sheet.is-side .bs-pane { min-width: 0; margin-top: var(--br-head-h, 64px); border-left: 1px solid var(--rule); transition: margin-top 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
.br-sheet.is-side.is-immersed:not(.is-sliding) > .bs-handle, .br-sheet.is-side.is-immersed:not(.is-sliding) .bs-pane { margin-top: var(--tk-own, 0px); } /* (the reader's bar slid away: the notes come up to just under the slim bar left in its place, nav/tuck.js, not under it. From the owner: "Landscape mode is cutting off the top of the split pane") */
@media (prefers-reduced-motion: reduce) { .br-sheet.is-side > .bs-handle, .br-sheet.is-side .bs-pane { transition: none; } }

/* ---- Write: a note in the Study pane, under the Bible or beside it (notes/notes.js's writer) */
.bs-scroll > .ntw { display: flex; flex-direction: column; gap: 8px; min-height: 100%; padding: 4px 14px 16px; box-sizing: border-box; }
/* (its buttons, kept in sight as the note's written: just under the pane's tabs, with nothing showing above
   them; in the reader, the tabs lie over the top of the pane, so the room for them is the note's own) */
.bs-scroll > .ntw { --nt-bar-h: 0px; }
.br-sheet .bs-scroll:has(> .ntw) { padding-top: 0; }
.br-sheet .bs-scroll > .ntw { padding-top: calc(var(--bs-top-h, 84px) + 8px); --nt-bar-h: var(--bs-top-h, 84px); }
.bs-scroll > .ntw .nr-tools { margin: 0 -14px; padding: 6px 10px; background: color-mix(in srgb, var(--bg-raised) 92%, transparent); }
.ntw-bar { display: flex; align-items: center; gap: 8px; }
.ntw-which { flex: 1; min-width: 0; }
.ntw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ntw-pick { width: 100%; max-width: 100%; height: 34px; padding: 0 30px 0 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 14px no-repeat; color: var(--ink); font: 700 13px var(--sans); -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
.ntw-status { flex: none; min-width: 1em; font: 600 12px var(--sans); color: var(--muted); white-space: nowrap; }
.ntw-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg); color: var(--muted); cursor: pointer; }
.ntw-ico svg { width: 16px; height: 16px; }
.ntw-more { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px 0 10px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--rule)); border-radius: 999px; background: var(--bg); color: var(--ink); font: 700 12.5px var(--sans); cursor: pointer; }
.ntw-more svg { width: 15px; height: 15px; color: var(--gold); }
.ntw-title { width: 100%; box-sizing: border-box; padding: 6px 2px; border: none; border-bottom: 1px solid var(--rule); background: none; color: var(--ink); font: 600 19px/1.3 var(--serif); outline: none; }
.ntw-title:focus { border-bottom-color: var(--coral); }
.ntw-rich { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 160px; }
.ntw-rich .nr-area { flex: 1 1 auto; min-height: 140px; }
.ntw-on { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font: 600 12px var(--sans); color: var(--muted); }
.ntw-a { display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 2px 0 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font: 700 12px var(--sans); white-space: nowrap; }
.ntw-a.is-live { border-color: color-mix(in srgb, var(--gold) 70%, var(--rule)); background: color-mix(in srgb, var(--gold) 12%, var(--bg)); }
.ntw-a.is-wait { gap: 4px; border: 1px dashed color-mix(in srgb, var(--gold) 80%, var(--rule)); background: none; color: var(--muted); }
.ntw-a-go { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: none; background: none; color: inherit; font: inherit; cursor: pointer; }
.ntw-a.is-wait svg { color: var(--gold); }
.ntw-a-x { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--muted); font: 700 11px var(--sans); cursor: pointer; }
.ntw-a-x:hover, .ntw-a-x:focus-visible { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.ntw-on .ntw-add { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px dashed color-mix(in srgb, var(--coral) 60%, var(--rule)); border-radius: 999px; background: none; color: var(--ink); font: 700 12px var(--sans); cursor: pointer; }
.ntw-on svg { width: 12px; height: 12px; }
.ntw-gate { max-width: 420px; margin: 18px auto; padding: 0 6px; text-align: center; font: 15px/1.5 var(--sans); color: var(--muted); }
.ntw-gate p { margin: 0 0 12px; }
.ntw-go { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: none; border-radius: 999px; background: var(--ink); color: var(--bg); font: 800 14px var(--sans); cursor: pointer; }
.ntw-go svg { width: 16px; height: 16px; }
/* (side by side: the arrow to the next chapter at the Bible's own edge, not over the notes; the flash in the Bible's middle.
   Only while the notes are there: tucked away, the Bible's the whole width again, and the arrow back at its right edge. From
   the owner, with a picture of it halfway across John 1, the notes tucked away: "The arrow is in the middle of the reader again") */
.br-sheet.is-side:not(.is-folded) .br-edge.is-next { right: auto; left: calc(var(--br-text-w, 50%) - 41px); }
.br-sheet.is-side:not(.is-folded) .br-flash { left: calc(var(--br-text-w, 50%) / 2); }
/* (side by side, the notes are a third of a phone on its side: the tabs give way to one button naming the one that's open,
   its whole name, and a tap on it lists them all, each with its name (reader.js, whichMenu). The tabs stay, out of sight,
   for a screen reader and a live room following its leader. From the owner: "Trying to squeeze the words in the little tab
   and split pane and landscape mode is not working") */
.bs-which, .bs-whichm { display: none; }
.br-sheet.is-side .bs-strip { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.br-sheet.is-side .bs-which { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 7px; height: 36px; margin: 2px 0 6px; padding: 0 12px 0 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font: 700 14px var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.br-sheet.is-side .bs-which > svg { flex: none; width: 13px; height: 13px; color: var(--muted); transition: transform 0.2s ease; }
.br-sheet.is-side .bs-which[aria-expanded="true"] > svg { transform: rotate(180deg); }
.bs-which-i { flex: none; display: inline-flex; color: var(--coral); }
.bs-which-i svg { width: 17px; height: 17px; }
.bs-which-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-sheet.is-side .bs-whichm:not([hidden]) { position: absolute; top: calc(100% - 4px); left: 10px; z-index: 6; display: flex; flex-direction: column; gap: 2px; min-width: 210px; max-width: calc(100% - 20px); max-height: 70vh; overflow-y: auto; padding: 6px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.45); animation: as-rise 0.16s ease; }
.bs-whichgo { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: 0; border-radius: 11px; background: none; color: var(--ink); font: 600 15px var(--sans); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bs-whichgo svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
.bs-whichgo.is-on { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.bs-whichgo.is-on svg { color: var(--coral); }
.bs-whichgo.is-layout { margin-top: 4px; border-top: 1px solid var(--rule); border-radius: 0 0 11px 11px; color: var(--muted); font-size: 14px; }
.br-sheet.is-side .bs-pane .bs-side { display: none; } /* (side by side: in the chooser's list, its last line) */
@media (hover: hover) { .bs-whichgo:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } }
/* (in the window's header: as tall as its Back button, and plain to see) */
.bd-tab.is-head { height: 34px; opacity: 1; }

/* ---- the verses picked: their bar out of the way while Yours is open over everything (notes/notes.js) */
html.nt-open .vp-bar { visibility: hidden; pointer-events: none; }

/* THE HEAD, YOUR WAY (reader/headbar.js): a setting's grip, the head's free places while the settings are open,
   the button being dragged, and where it'll land */
.hb-slot:empty { display: none; }
.hb-gone { display: none !important; } /* (one of the site's buttons, put back in the settings: reader/headbar.js) */
.hb-row { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--rule); }
.hb-row > .br-set-row, .hb-row > .br-set-sw, .br-set .hb-row > .br-set-sw { flex: 1; min-width: 0; border-bottom: none; }
.br-set-in > .hb-row:last-child { border-bottom: none; }
.hb-grip { flex: none; display: grid; place-items: center; width: 26px; height: 40px; margin-left: -8px; padding: 0; border: none; border-radius: 8px; background: none; color: color-mix(in srgb, var(--muted) 70%, transparent); cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.hb-grip svg { width: 16px; height: 16px; }
.hb-grip:hover, .hb-grip:focus-visible { color: var(--gold); background: color-mix(in srgb, var(--coral) 10%, transparent); }
.hb-row.hb-lifted { opacity: 0.4; }
/* arranging (Customize the top bar): its Done bar, held at the top of the settings; the settings that can't move
   faded back; the head's buttons wiggling, as a phone's icons do while they're being arranged */
.hb-edit-top:empty, .hb-edit-go:empty { display: none; }
/* (the settings' first line: any of them can go on the bar, held and drawn up; reader/headbar.js, and every other app's More, nav/bars.js) */
.hb-hint { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 9%, transparent); color: var(--ink); font: 600 12.5px/1.35 var(--sans); }
.hb-hint svg { flex: none; width: 16px; height: 16px; color: var(--gold); }
.hb-xtx { font: 800 14px var(--sans); line-height: 1; } /* (an app's tool that's words, not an icon: its first letter, in its row) */
.br-set .hb-row, .bk-set .hb-row { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* (held to be carried up: no text picked or callout under the finger) */
.hb-edit-go:has(.hb-editbar) { position: sticky; bottom: -6px; z-index: 2; margin: 0 -14px; padding: 8px 14px 6px; background: var(--bg-raised); }
.hb-edit-on .hb-row { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: grab; }
.hb-row.hb-held { background: var(--coral-soft); border-radius: 12px; }
.hb-editbar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--coral-soft); border: 1px solid color-mix(in srgb, var(--coral) 45%, var(--rule)); }
.hb-editbar p { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.hb-editbar b { font: 800 13.5px var(--sans); color: var(--ink); }
.hb-editbar span { font: 500 12px/1.35 var(--sans); color: var(--muted); }
.hb-done { flex: none; padding: 8px 16px; border: none; border-radius: 999px; background: var(--coral); color: var(--on-gold); font: 800 13.5px var(--sans); cursor: pointer; }
.br-set.hb-edit-on .br-set-in > :not(.hb-row):not(.hb-edit-go):not(.hb-edit-top):not(.br-set-h) { opacity: 0.35; pointer-events: none; }
.hb-editing .hb-btn { position: relative; overflow: visible; animation: hb-wiggle var(--hb-w, 0.26s) ease-in-out var(--hb-d, 0s) infinite; }
.hb-editing .hb-btn.hb-lifted { animation: none; }
@keyframes hb-wiggle { 0% { transform: rotate(-2deg) translate(0, 0.4px); } 25% { transform: rotate(-0.6deg) translate(0.4px, 0); } 50% { transform: rotate(2deg) translate(0, -0.4px); } 75% { transform: rotate(0.6deg) translate(-0.4px, 0); } 100% { transform: rotate(-2deg) translate(0, 0.4px); } }
/* its "−" (a tap puts it back in the settings), at its top left as on a phone */
.hb-minus { position: absolute; left: -5px; top: -5px; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 72%, var(--bg)); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); cursor: pointer; }
.hb-minus::before { content: ''; position: absolute; left: 4px; right: 4px; top: 8px; height: 2px; border-radius: 1px; background: var(--bg-raised); }
.hb-minus::after { content: ''; position: absolute; inset: -8px; } /* (a bigger place to tap than it looks) */
.hb-aa { font: 700 13px var(--serif); }
.hb-row .br-kept-n { position: static; margin-left: auto; border: none; }
.hb-row .br-kept-n[hidden] { display: none; }
.br-kept-n[hidden] { display: none; }
.hb-free { flex: none; width: 38px; height: 38px; border: 1.5px dashed color-mix(in srgb, var(--muted) 55%, transparent); border-radius: 50%; box-sizing: border-box; animation: hb-in 0.25s ease; }
@media (max-width: 400px) { .hb-free { width: 34px; height: 34px; } }
@keyframes hb-in { from { transform: scale(0.6); opacity: 0; } }
.hb-editing .hb-btn { touch-action: none; cursor: grab; }
/* (a button on any bar, held and carried along it or down into its settings, as a setting's carried up, with no mode to go into:
   a finger on one starts no scroll, which would take the carry away mid-way) */
.hb-btn { touch-action: none; -webkit-touch-callout: none; }
.hb-dropping .hb-free.hb-ph { border-color: var(--coral); background: var(--coral-soft); }
.hb-btn.hb-swap { outline: 2px dashed var(--coral); outline-offset: 2px; }
.hb-btn.hb-lifted { opacity: 0.3; }
.br-set.hb-take .br-set-in { outline: 2px dashed transparent; outline-offset: -4px; transition: outline-color 0.15s; }
.br-set.hb-over .br-set-in { outline-color: var(--coral); }
.hb-ghost { position: fixed; z-index: 2147483600; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 1.5px solid var(--coral); border-radius: 50%; background: var(--bg-raised); color: var(--ink); font: 700 15px var(--serif); box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.45); pointer-events: none; transform: scale(1.08); }
.hb-ghost svg { width: 20px; height: 20px; }
.hb-ghost .br-kept-n { display: none; }
@media (prefers-reduced-motion: reduce) { .hb-free, .hb-editing .hb-btn { animation: none; } }

/* the writer of a commentary: their card on the timeline (Faithful Through the Ages) */
.bs-who { display: inline; margin-left: 4px; padding: 0; border: none; background: none; color: var(--gold); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ---- ribbons (reader.js: Ribbons): where you keep your place, as the silk ribbons in a printed Bible */
/* (the ribbons in this chapter, hanging in the page's right margin, from just under the title bar; none, a faint one) */
.br-sheet .br-body:not(.br-peel-page) { position: relative; } /* (not the pages of a page turn: those lie one over the other, absolutely: .br-peel-page) */
.br-ribs-here { position: absolute; z-index: 1; top: calc(var(--br-head-h, 64px) + 2px); right: max(0px, calc(var(--br-pad, 22px) / 2 - 15px)); display: flex; justify-content: center; gap: 3px; min-width: 30px; height: 60px; padding: 0; border: none; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.br-ribs-here i { flex: none; width: 10px; height: 48px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.24) 45%, rgba(0, 0, 0, 0.12)), var(--rb); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); transition: height 0.25s ease; }
/* (none here: a ribbon's outline, dashed, in the ribbons' gold, with a + in it: a ribbon can be placed here) */
.br-ribs-here.is-none i { position: relative; width: 13px; height: 40px; background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1.5px dashed color-mix(in srgb, var(--gold) 80%, var(--ink)); border-top: none; border-radius: 0 0 3px 3px; clip-path: none; opacity: 0.9; }
.br-ribs-here.is-none i::after { content: '+'; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); font: 800 12px/1 var(--sans); color: color-mix(in srgb, var(--gold) 85%, var(--ink)); }
@media (hover: hover) { .br-ribs-here:hover i { height: 52px; } .br-ribs-here.is-none:hover i { height: 46px; opacity: 1; } }
.br-ribs-here:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 6px; }
/* (the way back to a ribbon, over the title: its color, a small ribbon) */
.br-rib-dot { display: inline-block; flex: none; width: 6px; height: 12px; margin: 0 2px 0 1px; background: var(--rb); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); }
/* (the ribbons: each, where it is; Move here; a new one) */
.br-ribbox { position: absolute; z-index: 9; top: calc(var(--br-head-h, 64px) + 8px); right: 10px; width: min(350px, calc(100% - 20px)); max-height: calc(100% - var(--br-head-h, 64px) - 28px); overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px 12px 14px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised, var(--bg)); color: var(--ink); font-family: var(--sans); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.4); animation: bv-in 0.2s ease; }
.br-ribbox[hidden] { display: none; }
.rbx-h { display: flex; align-items: center; justify-content: space-between; }
.rbx-h b { font: 800 16px var(--sans); }
.rbx-x, .rbx-del { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.rbx-x svg { width: 18px; height: 18px; } .rbx-del svg { width: 15px; height: 15px; }
@media (hover: hover) { .rbx-x:hover, .rbx-del:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); } }
.rbx-note { margin: 2px 0 10px; font: 500 12.5px/1.45 var(--sans); color: var(--muted); }
.rbx-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rbx-list li { position: relative; display: flex; align-items: center; gap: 4px; border-radius: 12px; overflow: hidden; }
/* (the row itself, over what a swipe does: Rename under its left, Remove under its right) */
.rbx-in { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; padding: 2px 2px 2px 0; border-radius: 12px; background: var(--bg-raised, var(--bg)); touch-action: pan-y; }
.rbx-list li.is-here .rbx-in { background: color-mix(in srgb, var(--coral) 11%, var(--bg-raised, var(--bg))); }
.rbx-act { position: absolute; inset: 0; display: none; align-items: center; gap: 7px; padding: 0 16px; border-radius: 12px; font: 700 13.5px var(--sans); }
.rbx-act svg { width: 16px; height: 16px; flex: none; }
.rbx-act.is-ren { justify-content: flex-start; background: color-mix(in srgb, var(--coral) 55%, var(--bg-raised, var(--bg))); color: var(--ink); }
.rbx-act.is-rem { justify-content: flex-end; background: #B3402F; color: #fff; }
.rbx-list li[data-dir="r"] .rbx-act.is-ren, .rbx-list li[data-dir="l"] .rbx-act.is-rem { display: flex; }
.rbx-list li.is-far .rbx-act.is-ren { background: var(--coral); color: var(--on-gold); }
.rbx-list li.is-far .rbx-act.is-rem { background: #9E2A1E; }
/* (Undo, for a moment, after one's removed) */
.rbx-undo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 8px 8px 8px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 88%, transparent); color: var(--bg); font: 700 13px var(--sans); animation: bv-in 0.2s ease; }
.rbx-undo button { flex: none; padding: 6px 12px; border: none; border-radius: 999px; background: var(--coral); color: var(--on-gold); font: 700 13px var(--sans); cursor: pointer; }
/* (renaming one: its name in a field, where it was) */
.rbx-list li.is-edit { gap: 6px; padding: 4px 2px 4px 8px; overflow: visible; }
.rbx-list li.is-edit input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--coral); border-radius: 10px; background: var(--bg); color: var(--ink); font: 600 16px var(--sans); }
.rbx-list li.is-edit .rbx-lay { padding: 8px 12px; }
.rbx-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 7px 8px; border: none; border-radius: 10px; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.rbx-go:disabled { cursor: default; color: var(--ink); }
@media (hover: hover) { .rbx-go:not(:disabled):hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } }
.rbx-rib { flex: none; width: 10px; height: 28px; margin-top: -6px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.24) 45%, rgba(0, 0, 0, 0.12)), var(--rb); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.rbx-go span { display: flex; flex-direction: column; min-width: 0; }
.rbx-go b { font: 700 14.5px/1.25 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rbx-go small { font: 600 12px/1.35 var(--sans); color: var(--muted); }
.rbx-move { flex: none; padding: 7px 12px; border: 1px solid var(--coral); border-radius: 999px; background: var(--coral-soft); color: var(--ink); font: 700 12.5px var(--sans); white-space: nowrap; cursor: pointer; }
.rbx-new { width: 100%; margin-top: 10px; padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--coral) 65%, var(--rule)); border-radius: 12px; background: none; color: var(--ink); font: 700 13.5px var(--sans); cursor: pointer; }
.rbx-add { margin-top: 10px; padding: 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg); }
.rbx-add > b { display: block; margin-bottom: 8px; font: 700 13px var(--sans); }
.rbx-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rbx-sugg button { padding: 7px 13px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised, var(--bg)); color: var(--ink); font: 700 13px var(--sans); cursor: pointer; }
.rbx-sugg:empty { display: none; }
.rbx-row { display: flex; gap: 6px; }
.rbx-row input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--bg-raised, var(--bg)); color: var(--ink); font: 500 16px var(--sans); }
.rbx-lay { flex: none; padding: 9px 14px; border: none; border-radius: 10px; background: var(--coral); color: var(--on-gold); font: 700 13.5px var(--sans); cursor: pointer; }
/* (a quiet word at the page's foot: "Move My reading here?") */
.br-ribcue { position: absolute; z-index: 8; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom) + var(--bp-h, 0px)); display: flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); padding: 6px 6px 6px 16px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 90%, transparent); color: var(--bg); font: 700 13.5px var(--sans); box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.45); transform: translateX(-50%); animation: br-cue-in 0.3s ease; }
.br-ribcue[hidden] { display: none; }
.br-ribcue span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rbc-yes { flex: none; padding: 8px 14px; border: none; border-radius: 999px; background: var(--coral); color: var(--on-gold); font: 700 13px var(--sans); white-space: nowrap; cursor: pointer; }
.rbc-no { flex: none; padding: 8px 10px; border: none; border-radius: 999px; background: none; color: color-mix(in srgb, var(--bg) 78%, transparent); font: 700 13px var(--sans); white-space: nowrap; cursor: pointer; }
@keyframes br-cue-in { from { opacity: 0; transform: translate(-50%, 10px); } }
@media (prefers-reduced-motion: reduce) { .br-ribcue, .br-ribbox { animation: none; } .br-ribs-here i { transition: none; } }
.br-rib-long { font-weight: inherit; }
@media (max-width: 600px) { .br-rib-long { display: none; } }

/* (a new ribbon's name: where you are, with a pin, always there; your own names, and Edit for them) */
.rbx-add .rbx-row { margin-bottom: 8px; }
.rbx-sugg { align-items: center; }
.rbx-sugg .rbx-here { display: inline-flex; align-items: center; gap: 5px; border-color: color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.rbx-sugg .rbx-here svg { width: 13px; height: 13px; color: var(--gold); }
.rbx-sugg button.is-on { border-color: var(--coral); background: var(--coral-soft); }
.rbx-sugg .rbx-editnames { border-style: dashed; color: var(--muted); }
.rbx-sugg .rbx-mine.is-edit { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised, var(--bg)); font: 700 13px var(--sans); }
.rbx-sugg .rbx-mine.is-edit button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.rbx-sugg .rbx-mine.is-edit svg { width: 12px; height: 12px; }
.rbx-keeprow { margin-top: 10px; }
.rbx-done { flex: none; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 10px; background: none; color: var(--ink); font: 700 13.5px var(--sans); cursor: pointer; }
.rbx-go b.is-color { font-weight: 700; color: color-mix(in srgb, var(--ink) 75%, transparent); }

/* (a chapter's devotion, opened from its button under "On this site": its thought, its question, the chapter, and its source) */
.br-think-page { padding: 4px 2px 8px; }
.br-think-page .br-think-k { display: block; margin-bottom: 4px; font: 800 11.5px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.br-think-page p { margin: 0 0 10px; font-family: Georgia, serif; font-size: 18px; line-height: 1.6; color: var(--ink); }
.br-think-page .br-think-q { font-size: 18px; }
.br-think-page .br-nv-whole { margin: 6px 0 14px; }
/* (the arrows at the sides, on a computer: out of sight until the pointer comes near their side, or they're reached by the
   keyboard; never over the contents, the settings, or the ribbons) */
@media (hover: hover) and (pointer: fine) {
  .br-edge { opacity: 0; }
  .br-sheet.near-prev .br-edge.is-prev, .br-sheet.near-next .br-edge.is-next, .br-edge:focus-visible { opacity: 0.7; }
  .br-edge:hover { opacity: 1; }
  .br-sheet.is-nav .br-edge, .br-sheet.is-set .br-edge, .br-sheet.is-ribs .br-edge, .br-sheet.is-finding .br-edge { display: none; }
}

/* (its question, a way into the chapter's devotion, the next page of the same window) */
.br-think-page .br-think-q.is-go { display: block; width: 100%; margin: 0 0 6px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--rule)); border-radius: 14px; background: color-mix(in srgb, var(--gold) 8%, var(--bg-raised, var(--bg))); color: var(--ink) !important; font: italic 18px/1.5 Georgia, serif; text-align: left; cursor: pointer; }
.br-think-page .br-think-q.is-go span { color: var(--gold); font-style: normal; }
@media (hover: hover) { .br-think-page .br-think-q.is-go:hover { border-color: var(--gold); } }
.br-think-hint { display: block; margin: 0 0 14px; font: 12.5px var(--sans); color: var(--muted); }

/* Mark as read, at the end of a whole chapter (reader.js readRow): a button you press, how many times and when, and the goals it counts toward */
.br-read { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 26px 0 8px; padding: 14px 0 0; border-top: 1px solid var(--rule); font-family: var(--sans); }
.br-read-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px 11px 14px; border: 1.5px solid color-mix(in srgb, var(--gold) 60%, var(--rule)); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 15px var(--sans); cursor: pointer; transition: transform 0.12s ease, background 0.2s ease; }
.br-read-btn svg { width: 18px; height: 18px; color: var(--gold); }
.br-read-btn:active { transform: scale(0.97); }
.br-read.is-today .br-read-btn { border-color: transparent; background: color-mix(in srgb, #3E7A4C 16%, var(--bg-raised)); color: color-mix(in srgb, #3E7A4C 70%, var(--ink)); font-weight: 600; font-size: 14px; }
.br-read.is-today .br-read-btn svg { color: #3E7A4C; }
body.site-dark .br-read.is-today .br-read-btn { color: #9FD0A9; }
body.site-dark .br-read.is-today .br-read-btn svg { color: #9FD0A9; }
.br-read.is-just .br-read-btn { animation: br-read-pop 0.6s ease; }
/* (marked today: two in one, #486. Read today, its left half, green as it was; Mark again, its right, the gold edge of
   the one to press. Each a full button to tap; joined, with a line between) */
.br-read-split { display: inline-flex; align-items: stretch; max-width: 100%; }
.br-read-split .br-read-btn { border-radius: 999px 0 0 999px; padding-right: 14px; }
.br-read-split .br-read-btn.br-read-again { margin-left: -1.5px; border-radius: 0 999px 999px 0; padding: 11px 16px 11px 12px; border: 1.5px solid color-mix(in srgb, var(--gold) 60%, var(--rule)); background: var(--bg-raised); color: var(--ink); font-weight: 700; font-size: 14px; }
.br-read-split .br-read-btn.br-read-again svg { color: var(--gold); }
.br-read.is-today .br-read-split .br-read-btn:first-child { border-right: 1.5px solid color-mix(in srgb, #3E7A4C 35%, transparent); }
body.site-dark .br-read.is-today .br-read-split .br-read-btn.br-read-again { color: var(--ink); }
body.site-dark .br-read.is-today .br-read-split .br-read-btn.br-read-again svg { color: var(--gold); }
@keyframes br-read-pop { 30% { transform: scale(1.06); } }
.br-read-n { font-size: 13px; color: var(--muted); }
.br-read-undo { padding: 0 0 0 4px; border: none; background: none; color: var(--gold); font: 700 13px var(--sans); cursor: pointer; }
/* (today's reading of a plan, named over the button: its chapters as chips, the one you're in outlined, the read ones
   ticked; Next to the chapter after, once this one's marked) */
.br-read-plan { flex-basis: 100%; display: flex; flex-direction: column; gap: 7px; margin-bottom: 2px; }
.br-read-k { font: 800 10.5px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #3E7A4C; }
.br-read-chs { display: flex; flex-wrap: wrap; gap: 6px; }
.br-read-ch { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 8px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 600 12.5px var(--sans); cursor: pointer; }
.br-read-ch svg { width: 13px; height: 13px; color: transparent; }
.br-read-ch.is-read { color: var(--muted); } .br-read-ch.is-read svg { color: #3E7A4C; }
.br-read-ch.is-here { border-color: color-mix(in srgb, var(--gold) 60%, var(--rule)); }
.br-read-next { display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px; border: none; border-radius: 999px; background: var(--gold); color: var(--on-gold, #1c1a17); font: 700 14px var(--sans); cursor: pointer; }
.br-read-done { display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px var(--sans); color: #3E7A4C; }
.br-read-done svg { width: 15px; height: 15px; }
.br-read-goals { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.br-read-goals button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 600 12.5px var(--sans); cursor: pointer; }
.br-read-goals button i { width: 34px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--gold) var(--p), color-mix(in srgb, var(--ink) 12%, transparent) var(--p)); }

/* ---- In church, the first time: what it's for (reader/reader.js, churchIntro) */
.chi { position: fixed; inset: 0; z-index: 2147483100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(22, 19, 15, 0.45); }
.chi[hidden] { display: none; }
.chi-box { width: min(100%, 400px); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px 20px 18px; border-radius: 20px; background: var(--bg-raised, #FBF7EE); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); font-family: var(--sans); }
.chi-box .ui-title { margin: 2px 0 10px; font-size: 26px; }
.chi-p { margin: 0 0 10px; font: 15px/1.5 var(--sans); }
.chi-l { margin: 0 0 16px; padding-left: 18px; font: 14px/1.5 var(--sans); color: var(--muted); }
.chi-l li + li { margin-top: 4px; }
.chi-box .ui-field { width: 100%; margin: 6px 0 16px; padding: 11px 13px; box-sizing: border-box; background: var(--bg); }
.chi-go { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-height: 500px) and (min-width: 600px) { /* (a phone held sideways: wider, so it all fits) */
  .chi-box { width: min(100%, 680px); padding: 16px 20px 14px; }
  .chi-box .ui-title { margin-bottom: 6px; }
  .chi-p { margin-bottom: 6px; }
  .chi-l { margin-bottom: 10px; }
  .chi-box .ui-field { margin-bottom: 10px; }
}

/* (a book at its first part or its last, pulled toward nothing: a word, fading in and out, softly: reader.js turner's edge; its own name: .br-edge is another's) */

/* (while the Bible or a book is open, a sideways swipe is the reader's, to turn: the browser's own swipe back (a
   trackpad's two fingers, or the edge of a phone's screen) is kept out of it, so it can't take you back a page that seems
   to turn forward) */
html.br-open, html.br-open body, html:has(section#reader.active), html:has(section#reader.active) body, #br-body, #reader .bk-shell { overscroll-behavior-x: none; }

/* WORDS (reader.js: press and hold the text, drag, let go): the phone's own press and hold off on the reader's text (no
   selecting, no magnifier, no Copy menu: the press is the reader's, everywhere but critique mode, which selects to quote);
   the words picked lit; the words' highlights, in the highlighters' colors, and their verses softly where another version
   words them otherwise; the glass over the finger; On this site, lit in the bar */
html:not(.critique-on) body #br-body.br-words, html:not(.critique-on) body #br-body.br-words *, html:not(.critique-on) body .br-inline.br-words, html:not(.critique-on) body .br-inline.br-words * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
::highlight(br-wpick) { background-color: color-mix(in srgb, var(--gold, #A6773A) 30%, transparent); text-decoration: underline; text-decoration-color: var(--gold, #A6773A); text-decoration-thickness: 2px; text-underline-offset: 3px; }
::highlight(bw-hl-y) { background-color: var(--hl-y); } ::highlight(bw-hl-g) { background-color: var(--hl-g); } ::highlight(bw-hl-b) { background-color: var(--hl-b); } ::highlight(bw-hl-p) { background-color: var(--hl-p); } ::highlight(bw-hl-v) { background-color: var(--hl-v); }
/* (the same marks, drawn by the reader where the browser won't paint them on text that can't be selected: Safari. reader.js, hlSet) */
.hl-g-br-wpick i { background: color-mix(in srgb, var(--gold, #A6773A) 30%, transparent); box-shadow: inset 0 -2px 0 var(--gold, #A6773A); }
.hl-g-bw-hl-y i { background: var(--hl-y); } .hl-g-bw-hl-g i { background: var(--hl-g); } .hl-g-bw-hl-b i { background: var(--hl-b); } .hl-g-bw-hl-p i { background: var(--hl-p); } .hl-g-bw-hl-v i { background: var(--hl-v); }
.br-verse.whl-soft { background: color-mix(in srgb, var(--whl) 45%, transparent); border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.br-loupe { position: fixed; z-index: 2147483165; width: 180px; height: 78px; overflow: hidden; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); background: var(--bg-raised, var(--bg)); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.45), 0 2px 6px -2px rgba(0, 0, 0, 0.2); pointer-events: none; opacity: 0; transform: scale(0.6) translateY(24px); transform-origin: 50% 100%; transition: opacity 0.12s ease, transform 0.16s cubic-bezier(0.34, 1.4, 0.64, 1); }
.br-loupe.is-on { opacity: 1; transform: none; }
.br-loupe .br-mark { display: none; }
@media (prefers-reduced-motion: reduce) { .br-loupe { transition: none; transform: none; } }
.vp-b.is-site { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--bg)); color: var(--gold); }
.vp-bar.is-words .vp-what b { font: italic 600 15.5px/1.35 var(--br-font, Georgia, serif); }
@media (max-width: 480px) { .vp-bar.is-words .vp-acts { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; } .vp-bar.is-words .vp-acts .vp-b { flex: 1 1 22%; } }
.vp-m.is-site { color: var(--gold); border-color: var(--gold); }

/* ---- a person's name, and what it means: "The name" in a word's ring, a page in the window over the apps (reader/names.js) */
.nm { padding: 4px 2px 10px; }
.nm-k { margin: 0; font: 800 10.5px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.nm-n { margin: 2px 0 0; font: italic 600 32px/1.1 var(--serif); color: var(--ink); }
.nm-o { margin: 4px 0 0; font: 15px/1.4 var(--serif); color: var(--muted); }
.nm-m { margin: 10px 0 0; font: italic 21px/1.35 var(--serif); color: var(--ink); }
.nm-here { margin: 16px 0 0; padding: 12px 14px; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--gold) 9%, var(--bg-raised)); }
.nm-here small, .nm-when small { display: block; margin: 0 0 4px; font: 800 10.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.nm-here p, .nm-when p, .nm-other p { margin: 0; font: 15.5px/1.55 var(--sans); color: var(--ink); }
.nm-when { margin: 16px 0 0; }
.nm-refs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.nm-lab { margin: 22px 0 8px; }
.nm-other { margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); }
.nm-oh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.nm-oh b { font: italic 600 21px/1.2 var(--serif); }
.nm-oh span { font: italic 15.5px/1.3 var(--serif); color: var(--ink); }
.nm-other .nm-oo { margin: 2px 0 8px; font: 13.5px var(--serif); color: var(--muted); }
.nm-tree { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--ink); font: 700 14px var(--sans); cursor: pointer; }
.nm-fine { margin: 18px 0 0; font: 12.5px/1.5 var(--sans); color: var(--muted); }
/* (words marked where Safari won't paint a highlight: boxes in a layer of the page's own. reader/hold.js, Hold.marks) */
.hl-lay { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0; pointer-events: none; will-change: transform; } /* (a layer of its own: without it, Safari left boxes taken away on the screen) (reader/hold.js's marks: the Bible's and the Library's) */
.hl-lay i { position: absolute; border-radius: 2px; }
/* (a gathering's leader's pick, on a screen following: its own gold, or the color they gave it; never this one's own
   highlight. reader.js showLead) */
::highlight(br-lead) { background-color: color-mix(in srgb, var(--gold, #A6773A) 34%, transparent); }
::highlight(br-lead-y) { background-color: var(--hl-y); } ::highlight(br-lead-g) { background-color: var(--hl-g); } ::highlight(br-lead-b) { background-color: var(--hl-b); } ::highlight(br-lead-p) { background-color: var(--hl-p); } ::highlight(br-lead-v) { background-color: var(--hl-v); }
.hl-g-br-lead i { background: color-mix(in srgb, var(--gold, #A6773A) 34%, transparent); }
.hl-g-br-lead-y i { background: var(--hl-y); } .hl-g-br-lead-g i { background: var(--hl-g); } .hl-g-br-lead-b i { background: var(--hl-b); } .hl-g-br-lead-p i { background: var(--hl-p); } .hl-g-br-lead-v i { background: var(--hl-v); }
.br-verse.is-lead { background: color-mix(in srgb, var(--gold) 18%, transparent); border-radius: 5px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone; }