/**
 * The reader. Layered on `fwapp.css`, which reads the theme's tokens.
 *
 * ⚠️ **THE TEXT IS IN THE THEME'S BODY FONT, AND HEADINGS INHERIT THE THEME'S HEADING FONT** for
 * the passage title and chapter markers. Section headings inside Scripture stay in the body font:
 * they are part of reading, and a display face (Trajan) is for titles.
 *
 * Words of Christ are the app's `ColorTheme.red` (#7F1518 / #D98E8E), the same value as the
 * accent, so red letter here and in the app agree. The divine name is a capital and small
 * capitals whichever way the source spells it (`FWAPP_Reader_Blocks`).
 */

.fwapp-goto { margin: 0 0 20px; }

.fwapp-goto .fwapp-passage-input { text-transform: none; letter-spacing: 0; font-family: inherit; }

.fwapp-passage-title { margin: 0 0 8px; }

.fwapp-versions,
.fwapp-parts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin: 0 0 20px;
}

.fwapp-versions a,
.fwapp-parts a {
	border: 1px solid var( --fwapp-rule );
	border-radius: 999px;
	padding: 2px 12px;
	font-size: .9rem;
	text-decoration: none;
	color: var( --fwapp-ink-muted );
}

.fwapp-parts a { min-width: 2.2em; text-align: center; padding: 2px 8px; }

.fwapp-versions a[aria-current],
.fwapp-parts a[aria-current] {
	background: var( --fwapp-panel );
	border-color: var( --fwapp-panel );
	color: #F8F8F8;
}

.fwapp-parts .fwapp-muted { font-size: .9rem; width: 100%; }

/* The text. */

.fwapp-text {
	font-size: calc( 1.15rem * var( --fwapp-text-scale, 1 ) );
	line-height: 1.65;
}

.fwapp-text p { margin: 0 0 .9em; }

.fwapp-chapter {
	font-size: 1.05rem;
	color: var( --fwapp-ink-muted );
	margin: 1.5em 0 .5em;
	font-weight: 600;
}

.fwapp-heading {
	font-family: var( --fervent-font-body, inherit );
	font-size: 1rem;
	margin: 1.4em 0 .5em;
}

h4.fwapp-heading { font-weight: 400; font-style: italic; color: var( --fwapp-ink-muted ); }

/*
 * Poetry: each line its own paragraph. A line that wraps hangs TWO steps in, deeper than the next
 * indented line's one step, so a reader can always tell a wrapped half from the poem's next line —
 * the convention of a printed Bible.
 */

.fwapp-text .fwapp-line {
	margin: 0;
	padding-left: calc( var( --indent, 0 ) * 1.25em + 2.5em );
	text-indent: -2.5em;
}

.fwapp-indent-1 { --indent: 0; }
.fwapp-indent-2 { --indent: 1; }
.fwapp-indent-3 { --indent: 2; }
.fwapp-indent-4 { --indent: 3; }

.fwapp-text .fwapp-stanza { margin-top: .8em; }

.fwapp-text .fwapp-line + .fwapp-prose { margin-top: .9em; }

.fwapp-vn {
	font-size: .62em;
	color: var( --fwapp-ink-muted );
	margin-right: .2em;
	vertical-align: super;
	line-height: 0;
}

.fwapp-woc { color: var( --fwapp-accent ); }

.fwapp-dn { font-variant-caps: small-caps; }

.fwapp-sc { font-variant-caps: all-small-caps; }

.fwapp-added { font-style: italic; }

.fwapp-fn {
	font-size: .62em;
	vertical-align: super;
	line-height: 0;
	text-decoration: none;
	margin-left: .05em;
}

.fwapp-empty,
.fwapp-absent { font-style: italic; }

.fwapp-notes {
	border-top: 1px solid var( --fwapp-rule );
	margin: 24px 0 0;
	padding: 12px 0 0;
	font-size: .9rem;
}

.fwapp-notes ol { list-style: none; margin: 0; padding: 0; }

.fwapp-notes li { margin: 0 0 6px; }

.fwapp-fn-back { font-weight: 600; text-decoration: none; margin-right: 4px; }

.fwapp-step {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 28px 0 16px;
	font-weight: 600;
}

.fwapp-step a[rel="next"] { margin-left: auto; text-align: right; }

.fwapp-copyright { color: var( --fwapp-ink-muted ); font-size: .8rem; }

/* Search. */

.fwapp-search { margin: 0 0 18px; }

.fwapp-search .fwapp-search-input { text-transform: none; letter-spacing: 0; font-family: inherit; }

.fwapp-search-options { margin: 8px 0 0; }

.fwapp-search-options summary { cursor: pointer; font-weight: 600; padding: 12px 0; }

.fwapp-search-options summary .fwapp-muted { font-weight: 400; font-size: .9rem; margin-left: 6px; }

.fwapp-search-options .fwapp-stack-form { margin: 6px 0 0; }

.fwapp-search-state { padding: 12px 0; }

.fwapp-search-count { margin: 0 0 4px; }

.fwapp-hits { list-style: none; margin: 12px 0 0; padding: 0; }

.fwapp-hit { border-top: 1px solid var( --fwapp-rule ); padding: 12px 0; }

.fwapp-hit p { margin: 0 0 4px; }

.fwapp-hit-where { font-weight: 600; }

.fwapp-hit-where a { text-decoration: none; }

.fwapp-hit-text { line-height: 1.6; }

.fwapp-hit-text mark { background: var( --fwapp-hl-yellow, light-dark( #FBF3A8, #684324 ) ); color: inherit; font-weight: 600; padding: 0 1px; border-radius: 2px; }

.fwapp-search-link { margin: -6px 0 14px; font-size: .9rem; }

/* A verse a link opened at (a search result's `#v29-9`): clear of the theme's fixed header, and marked. */
.fwapp-vn[id] { scroll-margin-top: 7rem; }

.fwapp-vn:target { color: var( --fwapp-accent ); font-weight: 700; outline: 2px solid var( --fwapp-accent ); outline-offset: 2px; border-radius: 3px; }

/* Further Study, at the end of a chapter. */

.fwapp-further { border-top: 1px solid var( --fwapp-rule ); margin: 28px 0 0; padding: 12px 0 0; }

.fwapp-further summary { cursor: pointer; font-weight: 600; padding: 12px 0; }

.fwapp-further-head { margin: 10px 0 4px; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var( --fwapp-ink-muted ); }

.fwapp-further ul { list-style: none; margin: 0; padding: 0; }

.fwapp-further li { border-top: 1px solid var( --fwapp-rule ); }

.fwapp-further li a { display: grid; gap: 2px; padding: 10px 0; text-decoration: none; color: inherit; }

.fwapp-further-name { font-weight: 600; color: var( --fwapp-accent ); }

.fwapp-further-host { font-size: .85rem; color: var( --fwapp-ink-muted ); }

.fwapp-further-foot { font-size: .85rem; margin-top: 8px; }

/* The Bible Guide, a panel over the chapter (`BibleGuideView`). */

.fwapp-guide { border: 1px solid var( --fwapp-rule ); border-radius: var( --fwapp-radius ); background: var( --fwapp-surface ); padding: 0 16px; margin: 0 0 20px; }

.fwapp-guide > summary { cursor: pointer; font-weight: 600; padding: 12px 0; }

.fwapp-guide[open] > summary { border-bottom: 1px solid var( --fwapp-rule ); }

.fwapp-guide-section { padding: 12px 0 4px; }

.fwapp-guide-section h3 { margin: 0 0 6px; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var( --fwapp-ink-muted ); }

.fwapp-guide-section p { margin: 0 0 6px; }

.fwapp-guide-key-where { font-weight: 600; }

.fwapp-guide-key { line-height: 1.6; }

.fwapp-guide-bullets { margin: 0; padding-left: 1.2em; }

.fwapp-guide-bullets li { margin: 0 0 4px; }

.fwapp-guide-links,
.fwapp-guide-plain { list-style: none; margin: 0; padding: 0; }

.fwapp-guide-links li,
.fwapp-guide-plain li { padding: 6px 0; border-top: 1px solid var( --fwapp-rule ); }

.fwapp-guide-plain .fwapp-muted { display: block; font-size: .9rem; }

.fwapp-guide-note { font-size: .85rem; margin: 8px 0 0; }

.fwapp-main .fwapp-guide .fwapp-button { display: inline-block; font-weight: 600; padding: 10px 16px; border-radius: 10px; text-decoration: none; margin: 12px 0 16px; }

.fwapp-main .fwapp-guide a.fwapp-primary { background: var( --fwapp-panel ); color: #F8F8F8; }

/* ESV audio: Listen, the transport bar, and the verse being spoken. */

.fwapp-main .fwapp-listen { min-height: 44px; margin: 0 0 12px; padding: 8px 14px; border-radius: 999px; border: 1px solid var( --fwapp-rule ); background: var( --fwapp-surface ); color: var( --fwapp-ink ); font: inherit; font-weight: 600; cursor: pointer; }

.fwapp-audio-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	background: var( --fwapp-surface, #fff ); color: var( --fwapp-ink );
	border-top: 1px solid var( --fwapp-rule ); box-shadow: 0 -4px 16px rgba( 0, 0, 0, .14 );
	padding: 10px 12px calc( 10px + env( safe-area-inset-bottom ) );
	font-family: inherit;
}

.fwapp-audio-bar[hidden] { display: none; }

.fwapp-audio-bar button, .fwapp-audio-bar select { font: inherit; color: var( --fwapp-ink ); background: var( --fwapp-page ); border: 1px solid var( --fwapp-rule ); border-radius: 999px; cursor: pointer; }

.fwapp-audio-play { width: 44px; height: 44px; flex: none; font-size: 1rem; }

.fwapp-audio-close { width: 44px; height: 44px; flex: none; }

/* Two rows: play, the passage and its scrubber, and close; then Play Audio Passage and Auto-Advance
 * side by side, each a 44px control (app §14). */
.fwapp-audio-plays,
.fwapp-audio-advance { order: 2; flex: 1 1 40%; min-width: 0; min-height: 44px; padding: 6px 10px; }

.fwapp-audio-middle { flex: 1 1 calc( 100% - 120px ); min-width: 0; }

.fwapp-audio-title { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fwapp-audio-scrub { width: 100%; accent-color: var( --fwapp-accent ); }

.fwapp-audio-times { display: flex; justify-content: space-between; font-size: .75rem; color: var( --fwapp-ink-muted ); font-variant-numeric: tabular-nums; }

.fwapp-audio-message { order: 3; flex-basis: 100%; margin: 0; font-size: .85rem; color: var( --fwapp-ink-muted ); }

.fwapp-audio-message[hidden] { display: none; }

body.fwapp-audio-on { padding-bottom: 150px; }

body.fwapp-audio-on .fwapp-hl-bar, body.fwapp-audio-on .fwapp-hl-sheet { bottom: 136px; }

.fwapp-text .fwapp-v.fwapp-spoken { background: light-dark( rgba( 127, 21, 24, .10 ), rgba( 217, 142, 142, .18 ) ); border-radius: 3px; box-shadow: 0 0 0 2px light-dark( rgba( 127, 21, 24, .10 ), rgba( 217, 142, 142, .18 ) ); }

/* --- The passage picker (`templates/passage-picker.php`, `picker.js`) --------------------------
 * `PassageMenuView`'s tiles: a tint with an ink label and a hue hairline in light, the hue itself
 * with a white label in dark — `ColorTheme.tint(for:)`, `edge(for:)` and `groupLabel`, value for value. */
.fwapp-picker { margin: 12px 0 20px; }
.fwapp-tiles { display: grid; grid-template-columns: repeat( auto-fill, minmax( 64px, 1fr ) ); gap: 6px; margin: 0 0 14px; }
.fwapp-numbers { grid-template-columns: repeat( auto-fill, minmax( 52px, 1fr ) ); }
.fwapp-tile {
	display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 4px;
	border-radius: 8px; border: 1px solid var( --fwapp-hue-edge ); background: var( --fwapp-hue-tint );
	color: light-dark( #282528, #FFFFFF ); font-weight: 500; font-variant-numeric: tabular-nums;
	text-decoration: none; text-align: center; line-height: 1.15; font-size: .95rem;
}
.fwapp-tile:hover, .fwapp-tile:focus-visible { text-decoration: underline; }
.fwapp-tile:focus-visible { outline: 2px solid var( --fwapp-accent ); outline-offset: 2px; }
.fwapp-hue-orange { --fwapp-hue-tint: light-dark( #F1D0C7, #C34D28 ); --fwapp-hue-edge: light-dark( #BD4B27, #C34D28 ); }
.fwapp-hue-yellow { --fwapp-hue-tint: light-dark( #F7E0C7, #A9611F ); --fwapp-hue-edge: light-dark( #A8611F, #A9611F ); }
.fwapp-hue-green { --fwapp-hue-tint: light-dark( #E1E4DE, #47803C ); --fwapp-hue-edge: light-dark( #2D5126, #47803C ); }
.fwapp-hue-blue { --fwapp-hue-tint: light-dark( #DEDFE7, #5366E5 ); --fwapp-hue-edge: light-dark( #1F2655, #5366E5 ); }
.fwapp-hue-purple { --fwapp-hue-tint: light-dark( #E5E0E6, #A058A5 ); --fwapp-hue-edge: light-dark( #522D55, #A058A5 ); }
.fwapp-crumb { margin: 0 0 10px; font-weight: 500; font-size: 1.1rem; }
.fwapp-crumb a { color: var( --fwapp-ink ); text-decoration: none; display: inline-block; min-height: 44px; line-height: 44px; }
.fwapp-title-button {
	font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.fwapp-title-button span { font-size: .6em; vertical-align: middle; color: var( --fwapp-accent ); }
.fwapp-picker-sheet {
	width: min( 640px, calc( 100vw - 24px ) ); max-height: calc( 100dvh - 48px ); overflow: auto;
	margin: auto auto 0; padding: 12px 16px 20px; border: 1px solid var( --fwapp-rule ); border-radius: 14px 14px 0 0;
	background: var( --fwapp-surface ); color: var( --fwapp-ink );
}
@media ( min-width: 700px ) { .fwapp-picker-sheet { margin: auto; border-radius: 14px; } }
.fwapp-picker-sheet::backdrop { background: rgba( 0, 0, 0, .45 ); }
.fwapp-sheet-close { display: flex; justify-content: flex-end; margin: 0; }
.fwapp-sheet-close button { min-height: 44px; }

/* --- Reading settings (`FWAPP_Preferences`), as classes on <html> set before paint ------------ */
html.fwapp-size-minus2 { --fwapp-text-scale: .882; }
html.fwapp-size-minus1 { --fwapp-text-scale: .941; }
html.fwapp-size-plus1 { --fwapp-text-scale: 1.118; }
html.fwapp-size-plus2 { --fwapp-text-scale: 1.235; }
html.fwapp-size-plus3 { --fwapp-text-scale: 1.353; }
/* One verse per line: prose breaks before each verse number. Poetry keeps its version's lines. */
html.fwapp-verse-lines .fwapp-text .fwapp-prose .fwapp-vn::before { content: ""; display: block; }
html.fwapp-verse-lines .fwapp-text .fwapp-prose > .fwapp-vn:first-child::before { display: none; }
html.fwapp-no-red .fwapp-woc { color: inherit; }
.fwapp-sample { border: 1px solid var( --fwapp-rule ); border-radius: 10px; padding: 12px 14px; background: var( --fwapp-surface ); }
.fwapp-settings h3 { margin: 18px 0 8px; font-size: 1rem; }
.fwapp-copy-example { white-space: pre-line; }

/* --- Recent Passages (`assets/recent.js`): a day is a small section header, as in the app ----- */
.fwapp-recent-day { font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var( --fwapp-ink-muted ); margin: 20px 0 4px; }
.fwapp-recent-list { margin-top: 0; }
.fwapp-recent-clear { margin-top: 20px; }
.fwapp-recent-clear button { min-height: 44px; margin: 0 8px 8px 0; }

/* --- The reading bar and bookmarks (`assets/bookmarks.js`) ------------------------------------
 * `BookmarkGlyph`: a slot on screen (or aimed at) is solid in its hue; one holding a passage is its
 * quiet tint with a hue outline; an empty one is a muted outline. `Bookmark.fill` / `edge`. */
.fwapp-bm { width: 26px; height: 26px; display: block; }
.fwapp-bm path { stroke-width: 1.6; stroke-linejoin: round; }
.fwapp-bm-1 { --fwapp-bm-fill: light-dark( #E5E0E6, #2B142D ); --fwapp-bm-edge: light-dark( #522D55, #A058A5 ); }
.fwapp-bm-2 { --fwapp-bm-fill: light-dark( #F1D0C7, #371005 ); --fwapp-bm-edge: light-dark( #BD4B27, #C34D28 ); }
.fwapp-bm-3 { --fwapp-bm-fill: light-dark( #E1E4DE, #0E210A ); --fwapp-bm-edge: light-dark( #2D5126, #47803C ); }
.fwapp-bm-filled path { fill: var( --fwapp-bm-edge ); stroke: var( --fwapp-bm-edge ); }
.fwapp-bm-set path { fill: var( --fwapp-bm-fill ); stroke: var( --fwapp-bm-edge ); }
.fwapp-bm-empty path { fill: none; stroke: light-dark( #595959, #A09F9F ); }
.fwapp-bm-button {
	min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
}
.fwapp-bm-button:focus-visible { outline: 2px solid var( --fwapp-accent ); outline-offset: -2px; border-radius: 8px; }
.fwapp-reading-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
	display: flex; align-items: center; justify-content: space-between; gap: 4px;
	padding: 4px 16px calc( 4px + env( safe-area-inset-bottom ) );
	background: var( --fwapp-surface ); border-top: 1px solid var( --fwapp-rule );
}
.fwapp-bm-row { display: inline-flex; margin-right: auto; }
.fwapp-chevron {
	min-width: 56px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.9rem; line-height: 1; color: var( --fwapp-accent ); text-decoration: none;
}
html.fwapp-has-reading-bar body { padding-bottom: calc( 60px + env( safe-area-inset-bottom ) ); }
html.fwapp-has-reading-bar .fwapp-audio-bar { bottom: calc( 52px + env( safe-area-inset-bottom ) ); }
/* The theme's open menu (a button up to 1,359 pixels with assets/menu.css) ends above the bar, so its last rows are never under it. */
@media ( max-width: 1359px ) {
	html.fwapp-has-reading-bar .fervent-nav { max-height: calc( 100vh - var( --fervent-header-h, 64px ) - 60px - env( safe-area-inset-bottom ) ); }
}
.fwapp-bm-selector { display: flex; align-items: center; gap: 2px; margin: 0 0 8px; flex-wrap: wrap; }
.fwapp-bm-selector .fwapp-muted { margin-right: 8px; font-size: .9rem; }

/* --- Show Highlights and Show Notes (`highlights.js`, Settings → Highlights & Notes) ---------- */
/* Until the script has drawn only the marks the reader chose, none is coloured: no flash of the hidden. */
html.fwapp-hl-pending .fwapp-text .fwapp-hl { background: none; box-shadow: none; }
.fwapp-note-card {
	display: block; margin: .4em 0 .9em; padding: .1em 0 .1em .8em; font-size: .85em; line-height: 1.5;
	border-left: 3px solid var( --fwapp-hl, var( --fwapp-rule ) ); color: var( --fwapp-ink ); font-family: var( --fervent-font-ui, inherit );
}
.fwapp-note-card .fwapp-note-ref { font-weight: 600; color: var( --fwapp-ink-muted ); margin-right: .5em; }
.fwapp-notes-end { margin-top: 1.5em; }
.fwapp-notes-end h2 { font-size: 1rem; margin: 0 0 .5em; }

/* --- Get Started and About (`FWAPP_Help_Pages`) ------------------------------------------------ */
.fwapp-terms { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 12px; }
.fwapp-terms dt { font-weight: 600; }
.fwapp-terms dd { margin: 0; }
.fwapp-tagline { font-size: 1.1rem; }

/* --- Settings → Further Study: a tool switched off is not offered ----------------------------- */
html.fwapp-no-tool-ferventword .fwapp-further [data-tool="ferventword"],
html.fwapp-no-tool-blueletterbible .fwapp-further [data-tool="blueletterbible"],
html.fwapp-no-tool-logos .fwapp-further [data-tool="logos"],
html.fwapp-no-tool-ferventword.fwapp-no-tool-blueletterbible.fwapp-no-tool-logos .fwapp-further { display: none; }

/* --- The Bible Guide's quotations, both passages printed (`GuideQuotationView`) --------------- */
.fwapp-quotation summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .4em; flex-wrap: wrap; }
.fwapp-quotation-head { margin: .6em 0 .2em; font-weight: 600; font-size: .9rem; }
.fwapp-quotation-words { margin: 0 0 .4em; font-family: var( --fervent-font-reading, var( --fervent-font-body, inherit ) ); }
.fwapp-quotation-words sup { font-size: .65em; margin: 0 .15em 0 .3em; color: var( --fwapp-ink-muted ); }
.fwapp-quotation-notice { font-size: .8rem; }
.fwapp-more-button { background: none; border: 0; cursor: pointer; font-size: 1.5rem; }
.fwapp-more-menu {
	position: fixed; right: 12px; bottom: calc( 60px + env( safe-area-inset-bottom ) ); z-index: 950;
	display: grid; min-width: 220px; padding: 6px 0; border-radius: 12px;
	background: var( --fwapp-surface ); border: 1px solid var( --fwapp-rule ); box-shadow: 0 6px 24px rgba( 0, 0, 0, .18 );
}
.fwapp-more-menu[hidden] { display: none; }
.fwapp-more-menu a, .fwapp-more-menu button {
	display: block; min-height: 44px; padding: 10px 16px; text-align: left; font: inherit; color: var( --fwapp-ink );
	background: none; border: 0; text-decoration: none; cursor: pointer;
}
.fwapp-more-menu a:hover, .fwapp-more-menu button:hover { background: var( --fwapp-page ); }

/* Touch targets (app §14's 44px) without changing how the pills look: each one's tap area reaches
 * 44px tall through a transparent extension above and below it. */
.fwapp-versions a,
.fwapp-parts a,
.fwapp-step a { position: relative; }
.fwapp-versions a::after,
.fwapp-parts a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY( -50% ); }
.fwapp-step a::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY( -50% ); }

/* "Make KJV Your Default?" (`assets/version-habit.js`): the picker's sheet, with the app's two answers. */
.fwapp-version-offer h2 { margin: 8px 0 8px; font-size: 1.2rem; }
.fwapp-offer-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.fwapp-offer-buttons button { min-height: 44px; }