/* Lil Red Wagon — reader styles. Everything hangs off CSS variables so
   themes (light/dark/sepia/contrast) are attribute swaps on .lrw-app. */

.lrw-app {
	--lrw-bg: #ffffff;
	--lrw-bg-alt: #f6f5f2;
	--lrw-text: #1f2328;
	--lrw-muted: #6b7280;
	--lrw-border: #e5e3de;
	--lrw-accent: #a4262c;
	--lrw-accent-soft: #f7ebeb;
	--lrw-link: #1d4ed8;
	--lrw-actions-bg: rgba(255, 255, 255, 0.7);
	--lrw-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
	--lrw-font-serif: Georgia, 'Times New Roman', serif;
	--lrw-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--lrw-reading-font: var(--lrw-font-serif);
	--lrw-reading-size: 18px;
	--lrw-reading-lh: 1.8;
	--lrw-reading-width: 680px;

	/* The sticky nav and study panel hang off the top bar's height, so it is
	   declared once here rather than repeated as a magic number. */
	--lrw-topbar-h: 53px;

	--lrw-hl-yellow: #fef3b3;
	--lrw-hl-blue: #bfdbfe;
	--lrw-hl-green: #bbf7d0;
	--lrw-hl-pink: #fbcfe8;
	--lrw-hl-purple: #e9d5ff;
	--lrw-hl-orange: #fed7aa;
	--lrw-hl-red: #fecaca;

	background: var(--lrw-bg);
	color: var(--lrw-text);
	font-family: var(--lrw-font-sans);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Themes style bare <button> elements for their own page content — Flatsome
   puts `margin: 0 1em 1em 0` on every one — which knocks this app's toolbars
   and icon buttons out of alignment. Neutralise it here, at the top, rather
   than chasing it class by class.

   :where() contributes no specificity, so this weighs the same as a single
   class and every rule further down the file still beats it: .lrw-btn keeps
   its margin-top, and #lrw-next keeps the margin-left:auto that holds the
   forward link against the right edge. */
.lrw-app :where(button, .button, input[type='submit'], input[type='button'], input[type='reset']) {
	margin: 0;
}

.lrw-app[data-theme='dark'] {
	--lrw-bg: #16181d;
	--lrw-bg-alt: #1f232b;
	--lrw-text: #e6e4df;
	--lrw-muted: #9aa1ac;
	--lrw-border: #2e333d;
	--lrw-accent: #e06c75;
	--lrw-accent-soft: #33262a;
	--lrw-link: #7fa7ff;
	--lrw-actions-bg: rgba(31, 35, 43, 0.82);
	--lrw-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
	--lrw-hl-yellow: #5c521a;
	--lrw-hl-blue: #1e3a5f;
	--lrw-hl-green: #1d4a2d;
	--lrw-hl-pink: #5b2340;
	--lrw-hl-purple: #3f2a5c;
	--lrw-hl-orange: #5c3a1a;
	--lrw-hl-red: #5c1f1f;
}

.lrw-app[data-theme='sepia'] {
	--lrw-bg: #f4ecd8;
	--lrw-bg-alt: #ece1c8;
	--lrw-text: #433422;
	--lrw-muted: #7a6a52;
	--lrw-border: #d8cbae;
	--lrw-accent: #8b3a2e;
	--lrw-accent-soft: #e8d9c4;
	--lrw-link: #7a4a1e;
	--lrw-actions-bg: rgba(244, 236, 216, 0.78);
}

.lrw-app[data-theme='contrast'] {
	--lrw-bg: #000000;
	--lrw-bg-alt: #101010;
	--lrw-text: #ffffff;
	--lrw-muted: #d0d0d0;
	--lrw-border: #666666;
	--lrw-accent: #ffdd00;
	--lrw-accent-soft: #333300;
	--lrw-link: #66bbff;
	--lrw-actions-bg: #000000;
}

.lrw-body { margin: 0; }

/* Some of our containers set display, which beats the hidden attribute. */
.lrw-app [hidden] { display: none !important; }

/* ---- Top bar ---- */

.lrw-topbar {
	display: flex;
	align-items: center;
	gap: 12px;
	/* Fixed height + centred items, so the bar cannot drift out of step with
	   the sticky offsets below however tall its contents happen to be. */
	box-sizing: border-box;
	min-height: var(--lrw-topbar-h);
	padding: 0 16px;
	border-bottom: 1px solid var(--lrw-border);
	background: var(--lrw-bg-alt);
	position: sticky;
	top: 0;
	z-index: 40;
}

.lrw-home {
	color: var(--lrw-accent);
	text-decoration: none;
	font-weight: 700;
	white-space: nowrap;
}

.lrw-breadcrumbs {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	color: var(--lrw-muted);
}

.lrw-breadcrumbs a { color: var(--lrw-text); text-decoration: none; }
.lrw-breadcrumbs a:hover { color: var(--lrw-accent); }
.lrw-breadcrumbs span { margin: 0 4px; }

.lrw-topbar-actions { display: flex; gap: 4px; }

.lrw-icon-btn {
	position: relative;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--lrw-text);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	height: 36px;
	min-width: 36px;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.lrw-icon-btn:hover { background: var(--lrw-accent-soft); }

.lrw-icon-btn[aria-expanded='true'],
.lrw-icon-btn[aria-pressed='true'],
.lrw-icon-btn.active {
	background: var(--lrw-accent-soft);
	border-color: var(--lrw-accent);
	color: var(--lrw-accent);
}

.lrw-icon-aa { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }

/* Small "active" dot on the Liken button when replacements are live. */
.lrw-badge-dot {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--lrw-accent);
	box-shadow: 0 0 0 2px var(--lrw-bg-alt);
}

.lrw-icon-btn:focus-visible,
.lrw-app a:focus-visible,
.lrw-app button:focus-visible,
.lrw-app input:focus-visible,
.lrw-app select:focus-visible {
	outline: 2px solid var(--lrw-accent);
	outline-offset: 2px;
}

/* Sit below the WP admin bar when it is present. */
body.admin-bar .lrw-topbar { top: 32px; }
body.admin-bar .lrw-nav,
body.admin-bar .lrw-panel {
	top: calc(var(--lrw-topbar-h) + 32px);
	max-height: calc(100vh - var(--lrw-topbar-h) - 32px);
}
body.admin-bar .lrw-settings-drawer { top: 32px; }

@media (max-width: 782px) {
	body.admin-bar .lrw-topbar { top: 46px; }
}

/* ---- Layout ---- */

.lrw-layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr) 0;
	flex: 1;
	transition: grid-template-columns 0.2s ease;
}

.lrw-layout.panel-open { grid-template-columns: 280px minmax(0, 1fr) 320px; }
.lrw-layout.nav-closed { grid-template-columns: 0 minmax(0, 1fr) 0; }
.lrw-layout.nav-closed.panel-open { grid-template-columns: 0 minmax(0, 1fr) 320px; }

/* Pin panes to columns so a hidden sibling never shifts the reading area. */
.lrw-nav { grid-column: 1; grid-row: 1; }
.lrw-main { grid-column: 2; grid-row: 1; }
.lrw-panel { grid-column: 3; grid-row: 1; }

.lrw-nav,
.lrw-panel {
	background: var(--lrw-bg-alt);
	overflow-y: auto;
	max-height: calc(100vh - var(--lrw-topbar-h));
	position: sticky;
	top: var(--lrw-topbar-h);
}

.lrw-nav { border-right: 1px solid var(--lrw-border); }
.lrw-panel { border-left: 1px solid var(--lrw-border); }
.lrw-layout.nav-closed .lrw-nav { display: none; }

/* ---- Nav tree ---- */

.lrw-nav-section { padding: 10px 0; }

.lrw-nav h3 {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lrw-muted);
	margin: 10px 16px 4px;
}

.lrw-nav-item {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	color: var(--lrw-text);
	cursor: pointer;
	font-size: 14px;
	padding: 8px 16px;
	text-decoration: none;
}

.lrw-nav-item:hover { background: var(--lrw-accent-soft); }
.lrw-nav-item.active { background: var(--lrw-accent-soft); color: var(--lrw-accent); font-weight: 600; }

.lrw-chapter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
	gap: 6px;
	padding: 8px 16px;
}

.lrw-chapter-grid a {
	border: 1px solid var(--lrw-border);
	border-radius: 6px;
	color: var(--lrw-text);
	display: block;
	font-size: 13px;
	padding: 6px 0;
	text-align: center;
	text-decoration: none;
}

.lrw-chapter-grid a:hover { border-color: var(--lrw-accent); color: var(--lrw-accent); }
.lrw-chapter-grid a.active { background: var(--lrw-accent); border-color: var(--lrw-accent); color: #fff; }

/* Front-matter (chapter 0) spans the row and shows its title. */
.lrw-chapter-grid a.intro { grid-column: 1 / -1; text-align: left; padding: 6px 10px; }

/* ---- Reading area ---- */

.lrw-main { display: flex; align-items: stretch; min-width: 0; }

.lrw-pane { flex: 1 1 50%; min-width: 0; padding: 32px 24px 80px; }

.lrw-pane-primary { flex: 1 1 100%; }
.lrw-main.split .lrw-pane-primary { flex: 6 1 0; }

.lrw-pane-compare {
	border-left: 1px solid var(--lrw-border);
	display: flex;
	flex-direction: column;
	padding-top: 0;
}

.lrw-main.split .lrw-pane-compare { flex: 4 1 0; }

/* In split view each pane scrolls on its own (height is set by JS). */
.lrw-main.split { overflow: hidden; }
.lrw-main.split .lrw-pane-primary { overflow-y: auto; overscroll-behavior: contain; }
.lrw-main.split .lrw-pane-compare { overflow: hidden; }
.lrw-compare-reading { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

/* Draggable divider between the two panes. */
.lrw-split-divider {
	flex: 0 0 8px;
	align-self: stretch;
	cursor: col-resize;
	position: relative;
	background: transparent;
	touch-action: none;
}

.lrw-split-divider::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	background: var(--lrw-border);
	transition: background 0.15s;
}

.lrw-split-divider:hover::before,
.lrw-split-divider.dragging::before,
.lrw-split-divider:focus-visible::before { background: var(--lrw-accent); width: 3px; }

.lrw-reading {
	font-family: var(--lrw-reading-font);
	font-size: var(--lrw-reading-size);
	line-height: var(--lrw-reading-lh);
	margin: 0 auto;
	max-width: var(--lrw-reading-width);
	width: 100%;
}

.lrw-main.split .lrw-reading { max-width: 620px; }

/* Compare pane header + chapter picker */

.lrw-compare-head {
	position: sticky;
	top: 0;
	background: var(--lrw-bg);
	padding: 14px 0 10px;
	z-index: 5;
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.lrw-compare-searchwrap { flex: 1 1 auto; min-width: 0; }

.lrw-compare-controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lrw-compare-search {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: baseline;
}

/* Search icon sits inside the input, on the left, ahead of the text. */
.lrw-compare-search svg {
	position: relative;
	left: 25px;
	top: 2px;
	color: var(--lrw-muted);
	pointer-events: none;
}

.lrw-compare-search:focus-within svg { color: var(--lrw-accent); }

.lrw-compare-search input {
	-webkit-appearance: none;
	appearance: none;
	background: var(--lrw-bg);
	border: 1.5px solid var(--lrw-border);
	color: var(--lrw-text);
	flex: 1;
	font-size: 14px;
	min-width: 0;
	padding: 9px 12px 9px 34px;
	transition: border-color 0.15s, box-shadow 0.15s;
	/* !important beats Flatsome's theme-level input[type=search] rules. */
	border-radius: 9px !important;
	padding-left: 32px !important;
}

.lrw-compare-search input:focus {
	border-color: var(--lrw-accent);
	box-shadow: 0 0 0 3px var(--lrw-accent-soft);
}

.lrw-compare-search input::placeholder { color: var(--lrw-muted); }
.lrw-compare-search input:focus { outline: none; }
.lrw-compare-search input::-webkit-search-decoration,
.lrw-compare-search input::-webkit-search-cancel-button,
.lrw-compare-search input::-webkit-search-results-button,
.lrw-compare-search input::-webkit-search-results-decoration { -webkit-appearance: none; display: none; }

/* Plain scroll-lock icon at the top-left of the compare pane. */
.lrw-compare-lock {
	position: relative;
	top: -14px;
	left: -19px;
	flex: 0 0 auto;
	height: 24px;
	width: 16px;
	padding: 0;
	border: none;
	background: none;
	color: var(--lrw-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.15s;
}

.lrw-compare-lock:hover { color: var(--lrw-accent); }
.lrw-compare-lock svg { width: 18px; height: 18px; }
.lrw-compare-lock[aria-pressed='true'] { color: var(--lrw-accent); }
.lrw-compare-lock .lock-open { display: inline-flex; }
.lrw-compare-lock .lock-closed { display: none; }
.lrw-compare-lock[aria-pressed='true'] .lock-open { display: none; }
.lrw-compare-lock[aria-pressed='true'] .lock-closed { display: inline-flex; }

/* Library filter dropdown, sits next to the chapter search. */
.lrw-compare-library {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	height: 40px;
	max-width: 150px;
	border: 1.5px solid var(--lrw-border);
	border-radius: 10px;
	background: var(--lrw-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
	background-size: 12px;
	color: var(--lrw-text);
	font-size: 14px;
	padding: 0 30px 0 12px;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.lrw-compare-library:hover { border-color: var(--lrw-accent); }
.lrw-compare-library:focus {
	outline: none;
	border-color: var(--lrw-accent);
	box-shadow: 0 0 0 3px var(--lrw-accent-soft);
}

.lrw-compare-suggest {
	background: var(--lrw-bg);
	border: 1px solid var(--lrw-border);
	border-radius: 10px;
	box-shadow: var(--lrw-shadow);
	margin-top: 6px;
	max-height: 320px;
	overflow-y: auto;
}

.lrw-compare-suggest:empty { display: none; }

.lrw-compare-suggest button {
	background: none;
	border: none;
	border-bottom: 1px solid var(--lrw-border);
	color: var(--lrw-text);
	cursor: pointer;
	display: block;
	font-size: 14px;
	padding: 9px 14px;
	text-align: left;
	width: 100%;
}

.lrw-compare-suggest button:hover { background: var(--lrw-accent-soft); }
.lrw-compare-suggest .muted { color: var(--lrw-muted); font-size: 12px; }


.lrw-compare-empty {
	color: var(--lrw-muted);
	font-family: var(--lrw-font-sans);
	padding: 60px 20px;
	text-align: center;
}

.lrw-compare-empty svg { color: var(--lrw-border); margin-bottom: 12px; }
.lrw-compare-empty h2 { color: var(--lrw-text); font-size: 18px; margin: 0 0 6px; }
.lrw-compare-empty p { font-size: 14px; margin: 0; }

.lrw-reading h1 {
	font-size: 1.7em;
	margin: 0 0 4px;
}

.lrw-chapter-title-sub {
	color: var(--lrw-muted);
	font-family: var(--lrw-font-sans);
	font-size: 14px;
	margin: 0 0 28px;
}

/* Source link beside a book's title — where an imported book came from.
   Sits on the baseline of the heading rather than inside its flow, so a long
   title wraps normally and the icon follows the last line. */
.lrw-book-title .lrw-source-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	margin-left: 12px;
	width: 32px;
	height: 32px;
	border: 1px solid var(--lrw-border);
	border-radius: 8px;
	color: var(--lrw-muted);
	text-decoration: none;
	flex: none;
}

.lrw-book-title .lrw-source-link:hover {
	border-color: var(--lrw-accent);
	color: var(--lrw-accent);
	background: var(--lrw-accent-soft);
}

.lrw-book-title .lrw-source-link svg { width: 16px; height: 16px; }

/* Chapter summary: the editorial introduction above the verses. Set off as
   a quoted aside so it never reads as scripture text itself. */
.lrw-chapter-summary {
	margin: 0 0 28px;
	padding-left: 16px;
	border-left: 3px solid var(--lrw-border);
	color: var(--lrw-muted);
	font-style: italic;
}

.lrw-chapter-summary p {
	margin: 0 0 0.7em;
}

.lrw-chapter-summary p:last-child {
	margin-bottom: 0;
}

.lrw-verse {
	position: relative;
	margin: 2px 0;
	padding: 8px 20px 8px 30px;
	border-radius: 10px;
	scroll-margin-top: 90px;
	transition: background 0.12s ease;
}

.lrw-verse:hover { background: var(--lrw-bg-alt); }

.lrw-app.compact .lrw-verse { padding-top: 3px; padding-bottom: 3px; }

.lrw-verse-num {
position: absolute;
left: -32px;
top: 6px;
color: var(--lrw-accent);
font-family: var(--lrw-font-sans);
font-size: 0.72em;
font-weight: 700;
line-height: inherit;
user-select: none;
background-color: white;
padding: 0 3px 0 19px;
border-radius: 10px;
}

.lrw-app.hide-nums .lrw-verse-num { display: none; }
.lrw-app.hide-nums .lrw-verse { padding-left: 14px; }

.lrw-verse.targeted { background: var(--lrw-accent-soft); }

/* Verses that carry a bulleted / numbered list. */
.lrw-verse-block .lrw-verse-text { display: block; }
.lrw-verse-block ul,
.lrw-verse-block ol { margin: 0.2em 0; padding-left: 1.4em; }
.lrw-verse-block li { margin: 0.2em 0; }
.lrw-verse-block ul { list-style: disc; }
.lrw-verse-block ol { list-style: decimal; }
.lrw-verse-text strong { font-weight: 700; }
.lrw-verse-text em { font-style: italic; }

.lrw-verse .lrw-verse-actions {
	position: absolute;
	bottom: 6px;
	right: 8px;
	display: flex;
	gap: 2px;
	align-items: center;
	background: var(--lrw-actions-bg);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	border: 1px solid var(--lrw-border);
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	padding: 2px;
	opacity: 0;
	transform: translateY(-2px);
	transition: opacity 0.12s, transform 0.12s;
	white-space: nowrap;
	pointer-events: none;
}

.lrw-verse:hover .lrw-verse-actions,
.lrw-verse:focus-within .lrw-verse-actions {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.lrw-verse-actions button {
	background: none;
	border: none;
	border-radius: 6px;
	color: var(--lrw-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	width: 26px;
	padding: 0;
	font-size: 0px;
}

.lrw-verse-actions button:hover { background: var(--lrw-accent-soft); color: var(--lrw-accent); }
.lrw-verse-actions button svg { width: 15px; height: 15px; }

.lrw-verse.bookmarked .lrw-bookmark-btn { color: var(--lrw-accent); }
.lrw-verse .lrw-note-dot {
	position: absolute;
	left: 14px;
	bottom: 4px;
	color: var(--lrw-accent);
	font-size: 9px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	line-height: 1;
}

.lrw-verse .lrw-note-dot:hover { text-decoration: underline; }

/* ---- Verse display styles (footnote / indent) ---- */

/* Footnote: smaller, muted, set off with a rule above — usually the last
   paragraph on a page. */
.lrw-verse.lrw-footnote {
	font-size: 0.82em;
	color: var(--lrw-muted);
	border-top: 1px solid var(--lrw-border);
	margin-top: 1.4em;
	padding-top: 12px;
}

/* Footnotes don't carry a verse number. */
.lrw-verse.lrw-footnote .lrw-verse-num { display: none; }

/* Indent: a set-in block, e.g. a quoted passage kept on the page. */
.lrw-verse.lrw-indent {
	margin-left: 2.2em;
	padding-left: 16px;
	border-left: 2px solid var(--lrw-border);
	font-style: italic;
}

.lrw-verse.lrw-indent .lrw-verse-num { left: calc(-2em + 16px); }
.lrw-app.hide-nums .lrw-verse.lrw-indent { padding-left: 16px; }

/* Both at once still reads sensibly. */
.lrw-verse.lrw-footnote.lrw-indent { font-style: italic; }

/* Headings: three bold section-title sizes (H2 largest → H6 smallest).
   .lrw-heading is the legacy single style, kept at the H4 size. */
.lrw-verse.lrw-h2,
.lrw-verse.lrw-h4,
.lrw-verse.lrw-h6,
.lrw-verse.lrw-heading {
	font-weight: 700;
	line-height: 1.3;
	margin: 1.6em 0 0.4em;
}

.lrw-verse.lrw-h2 { font-size: 1.7em; }
.lrw-verse.lrw-h4,
.lrw-verse.lrw-heading { font-size: 1.35em; }
.lrw-verse.lrw-h6 { font-size: 1.08em; }

/* Headings don't carry a verse number. */
.lrw-verse.lrw-h2 .lrw-verse-num,
.lrw-verse.lrw-h4 .lrw-verse-num,
.lrw-verse.lrw-h6 .lrw-verse-num,
.lrw-verse.lrw-heading .lrw-verse-num { display: none; }

/* ---- Liken (temporary word replacements) ---- */

.lrw-liken {
	background: var(--lrw-liken-bg, #e0edff);
	border-radius: 3px;
	box-shadow: inset 0 -1px 0 var(--lrw-liken-underline, #6ea8fe);
	cursor: help;
	padding: 0 2px;
	position: relative;
}

.lrw-app[data-theme='dark'] .lrw-liken { --lrw-liken-bg: #23374f; --lrw-liken-underline: #4d7fc4; }
.lrw-app[data-theme='sepia'] .lrw-liken { --lrw-liken-bg: #e3d3b0; --lrw-liken-underline: #a98b52; }

.lrw-liken:hover::after {
	content: attr(data-original);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	transform: translateX(-50%);
	background: var(--lrw-text);
	color: var(--lrw-bg);
	font-family: var(--lrw-font-sans);
	font-size: 12px;
	line-height: 1.2;
	white-space: nowrap;
	padding: 5px 9px;
	border-radius: 6px;
	box-shadow: var(--lrw-shadow);
	z-index: 50;
	pointer-events: none;
}

.lrw-liken:hover::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: calc(100% + 1px);
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--lrw-text);
	z-index: 50;
}

/* Focus mode dims everything but the hovered verse. */
.lrw-app.focus-mode .lrw-verse { opacity: 0.35; transition: opacity 0.2s; }
.lrw-app.focus-mode .lrw-verse:hover,
.lrw-app.focus-mode .lrw-verse.targeted { opacity: 1; }

/* Highlights */
mark.lrw-hl { padding: 0 1px; border-radius: 2px; color: inherit; }
mark.lrw-hl-yellow { background: var(--lrw-hl-yellow); }
mark.lrw-hl-blue { background: var(--lrw-hl-blue); }
mark.lrw-hl-green { background: var(--lrw-hl-green); }
mark.lrw-hl-pink { background: var(--lrw-hl-pink); }
mark.lrw-hl-purple { background: var(--lrw-hl-purple); }
mark.lrw-hl-orange { background: var(--lrw-hl-orange); }
mark.lrw-hl-red { background: var(--lrw-hl-red); }
mark.lrw-hl-underline { background: none; border-bottom: 2px solid var(--lrw-accent); }
mark.lrw-hl-bold { background: none; font-weight: 700; }
mark.lrw-hl-favorite { background: none; box-shadow: inset 0 -0.45em var(--lrw-hl-yellow); }

.lrw-ref { color: var(--lrw-link); text-decoration: none; border-bottom: 1px dotted var(--lrw-link); }

/* ---- Chapter prev/next ---- */

.lrw-chapter-nav {
	display: flex;
	justify-content: space-between;
	margin: 48px auto 0;
	max-width: var(--lrw-reading-width);
}

/* Forward is always on the right, even on a chapter with no previous —
   space-between alone would park a lone Next button on the left. */
.lrw-chapter-nav #lrw-next {
	margin-left: auto;
}

.lrw-chapter-nav-btn {
	border: 1px solid var(--lrw-border);
	border-radius: 10px;
	color: var(--lrw-text);
	padding: 10px 18px;
	text-decoration: none;
}

.lrw-chapter-nav-btn:hover { border-color: var(--lrw-accent); color: var(--lrw-accent); }

/* ---- Study panel ---- */

.lrw-panel-tabs { display: flex; border-bottom: 1px solid var(--lrw-border); }

.lrw-panel-tabs button {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--lrw-muted);
	cursor: pointer;
	flex: 1;
	font-size: 13px;
	padding: 12px 4px;
}

.lrw-panel-tabs button[aria-selected='true'] {
	border-bottom-color: var(--lrw-accent);
	color: var(--lrw-accent);
	font-weight: 600;
}

.lrw-panel-body { padding: 14px 16px; font-size: 14px; }

.lrw-panel-item {
	border: 1px solid var(--lrw-border);
	border-radius: 8px;
	margin-bottom: 10px;
	padding: 10px 12px;
}

.lrw-panel-item .meta { color: var(--lrw-muted); font-size: 12px; margin-top: 6px; }
.lrw-panel-item a { color: var(--lrw-link); text-decoration: none; }

.lrw-panel-item button.delete {
	background: none;
	border: none;
	color: var(--lrw-muted);
	cursor: pointer;
	float: right;
	font-size: 12px;
}

.lrw-panel-item button.delete:hover { color: var(--lrw-accent); }

.lrw-note-editor textarea {
	background: var(--lrw-bg);
	border: 1px solid var(--lrw-border);
	border-radius: 8px;
	color: var(--lrw-text);
	font-family: var(--lrw-font-sans);
	min-height: 90px;
	padding: 8px;
	width: 100%;
	box-sizing: border-box;
}

.lrw-btn {
	background: var(--lrw-accent);
	border: none;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	font-size: 13px;
	margin-top: 8px;
	padding: 8px 16px;
}

.lrw-btn.secondary { background: transparent; border: 1px solid var(--lrw-border); color: var(--lrw-text); }

/* ---- Search overlay ---- */

.lrw-search-overlay {
	background: rgba(0, 0, 0, 0.45);
	inset: 0;
	position: fixed;
	z-index: 100;
	display: flex;
	justify-content: center;
	padding: 8vh 16px 16px;
}

.lrw-search-box {
	background: var(--lrw-bg);
	border-radius: 14px;
	box-shadow: var(--lrw-shadow);
	color: var(--lrw-text);
	display: flex;
	flex-direction: column;
	max-height: 76vh;
	max-width: 640px;
	overflow: hidden;
	width: 100%;
}

#lrw-search-input {
	-webkit-appearance: none;
	appearance: none;
	background: var(--lrw-bg);
	border: none;
	border-bottom: 1px solid var(--lrw-border);
	color: var(--lrw-text);
	font-size: 17px;
	padding: 16px 18px;
	width: 100%;
	box-sizing: border-box;
}

#lrw-search-input:focus { outline: none; }
#lrw-search-input::-webkit-search-decoration,
#lrw-search-input::-webkit-search-cancel-button,
#lrw-search-input::-webkit-search-results-button,
#lrw-search-input::-webkit-search-results-decoration { -webkit-appearance: none; display: none; }

.lrw-search-suggest button {
	background: none;
	border: none;
	color: var(--lrw-muted);
	cursor: pointer;
	display: block;
	font-size: 13px;
	padding: 6px 18px;
	text-align: left;
	width: 100%;
}

.lrw-search-suggest button:hover { background: var(--lrw-accent-soft); color: var(--lrw-text); }

.lrw-search-results { overflow-y: auto; padding: 8px 0 12px; }

.lrw-search-result {
	border-bottom: 1px solid var(--lrw-border);
	display: block;
	color: var(--lrw-text);
	padding: 10px 18px;
	text-decoration: none;
}

.lrw-search-result:hover { background: var(--lrw-accent-soft); }
.lrw-search-result .ref { color: var(--lrw-accent); font-size: 13px; font-weight: 600; }
.lrw-search-result .snippet { font-size: 14px; margin-top: 2px; }
.lrw-search-result .snippet mark { background: var(--lrw-hl-yellow); color: inherit; }
.lrw-search-meta { color: var(--lrw-muted); font-size: 12px; padding: 8px 18px; }

/* ---- Settings drawer ---- */

.lrw-settings-drawer {
	background: var(--lrw-bg);
	border-left: 1px solid var(--lrw-border);
	bottom: 0;
	box-shadow: var(--lrw-shadow);
	color: var(--lrw-text);
	overflow-y: auto;
	padding: 20px;
	position: fixed;
	right: 0;
	top: 0;
	width: 300px;
	z-index: 90;
	box-sizing: border-box;
}

.lrw-settings-drawer h2 { font-size: 16px; margin: 0; }

.lrw-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.lrw-drawer-close {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 1px solid var(--lrw-border);
	border-radius: 8px;
	color: var(--lrw-muted);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 9px 11px;
}

.lrw-drawer-close:hover { border-color: var(--lrw-accent); color: var(--lrw-accent); }

.lrw-settings-drawer label {
	display: block;
	font-size: 13px;
	margin-bottom: 14px;
}

.lrw-settings-drawer select,
.lrw-settings-drawer input[type='range'] {
	display: block;
	margin-top: 4px;
	width: 100%;
}

.lrw-settings-drawer .lrw-check { display: flex; align-items: center; gap: 8px; }
.lrw-settings-drawer .lrw-check input { margin: 0; }

/* ---- Liken drawer ---- */

.lrw-liken-intro { color: var(--lrw-muted); font-size: 13px; line-height: 1.5; margin: 0 0 14px; }

.lrw-liken-master { font-weight: 600; margin-bottom: 14px; }

.lrw-liken-rule {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
}

.lrw-liken-rule input[type='text'] {
	background: var(--lrw-bg);
	border: 1px solid var(--lrw-border);
	border-radius: 7px;
	color: var(--lrw-text);
	flex: 1;
	font-size: 13px;
	min-width: 0;
	padding: 7px 9px;
}

.lrw-liken-rule .arrow { color: var(--lrw-muted); flex: 0 0 auto; }

.lrw-liken-rule .remove {
	background: none;
	border: none;
	color: var(--lrw-muted);
	cursor: pointer;
	flex: 0 0 auto;
	font-size: 14px;
	padding: 4px;
}

.lrw-liken-rule .remove:hover { color: var(--lrw-accent); }

.lrw-liken-empty { color: var(--lrw-muted); font-size: 13px; font-style: italic; margin: 6px 0 12px; }

/* ---- Import dialog ---- */

.lrw-import-box { max-height: 84vh; overflow-y: auto; }

/* The head had no right padding, which parked the close button hard against
   the box edge, and its 16px left did not line up with the body's 18px. */
.lrw-import-head { padding: 18px 18px 0; margin-bottom: 4px; }

.lrw-import-head h2 { font-size: 22px; }

.lrw-import-body { padding: 12px 18px 20px; font-family: var(--lrw-font-sans); font-size: 14px; }

.lrw-import-label {
	color: var(--lrw-muted);
	display: block;
	font-size: 12px;
	letter-spacing: 0.04em;
	margin: 14px 0 6px;
	text-transform: uppercase;
}

/* Scoped to .lrw-app because flatsome.css is loaded on the reader page too
   and its form-control rule (height: 2.507em) prints after this file.

   The field and its button sat at 34px and 48px respectively. Giving both the
   same explicit height is what actually keeps them level, rather than relying
   on a flex stretch that the input does not honour. */
.lrw-import-url-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.lrw-app .lrw-import-url-row input {
	background: var(--lrw-bg);
	border: 1px solid var(--lrw-border);
	border-radius: 8px;
	box-sizing: border-box;
	color: var(--lrw-text);
	flex: 1;
	min-width: 0;
	font-size: 14px;
	height: var(--lrw-field-h, 42px);
	padding: 0 12px;
}

.lrw-app .lrw-import-url-row input:focus {
	border-color: var(--lrw-accent);
	outline: none;
}

.lrw-app .lrw-import-url-row .lrw-btn {
	margin-top: 0;
	flex: none;
	box-sizing: border-box;
	height: var(--lrw-field-h, 42px);
	padding: 0 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.lrw-book-mode { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 4px; font-size: 13px; }
.lrw-book-mode .lrw-book-choices { display: flex; flex-direction: column; gap: 2px; margin-left: 22px; }
.lrw-book-mode .lrw-book-choices[hidden] { display: none; }

.lrw-import-drop {
	border: 2px dashed var(--lrw-border);
	border-radius: 10px;
	color: var(--lrw-muted);
	cursor: pointer;
	margin-top: 14px;
	padding: 22px 14px;
	text-align: center;
}

.lrw-import-drop small { display: block; margin-top: 6px; }
.lrw-import-drop.dragover,
.lrw-import-drop:hover { border-color: var(--lrw-accent); color: var(--lrw-text); }

.lrw-app .lrw-import-body select {
	background: var(--lrw-bg);
	border: 1px solid var(--lrw-border);
	border-radius: 8px;
	box-sizing: border-box;
	color: var(--lrw-text);
	height: var(--lrw-field-h, 42px);
	padding: 0 10px;
	width: 100%;
}

/* Shown instead of the visibility picker when a reader's imports are held for
   review: offering a choice the server overrides is worse than saying so. */
.lrw-import-note {
	background: var(--lrw-bg-alt);
	border: 1px solid var(--lrw-border);
	border-radius: 10px;
	color: var(--lrw-muted);
	font-size: 13px;
	line-height: 1.5;
	padding: 11px 13px;
}

.lrw-import-note strong { color: var(--lrw-text); font-weight: 600; }

.lrw-import-status { color: var(--lrw-muted); margin-top: 12px; min-height: 1.2em; }
.lrw-import-status.error { color: var(--lrw-accent); }

.lrw-import-books { margin: 8px 0; padding-left: 18px; }
.lrw-import-books li { margin-bottom: 4px; }

.lrw-import-sample-fe {
	border-left: 3px solid var(--lrw-border);
	color: var(--lrw-muted);
	font-size: 13px;
	margin: 10px 0;
	padding-left: 12px;
}

.lrw-import-done a { color: var(--lrw-link); }

.lrw-import-hint { color: var(--lrw-muted); font-size: 13px; margin: 6px 0 10px; }

.lrw-import-picker { display: flex; flex-direction: column; gap: 6px; max-height: 44vh; overflow-y: auto; }

.lrw-import-pick {
	background: var(--lrw-bg-alt);
	border: 1px solid var(--lrw-border);
	border-radius: 8px;
	color: var(--lrw-text);
	cursor: pointer;
	font-size: 14px;
	padding: 10px 12px;
	text-align: left;
}

.lrw-import-pick:hover { border-color: var(--lrw-accent); color: var(--lrw-accent); }
.lrw-import-pick .muted { color: var(--lrw-muted); font-size: 12px; }

.lrw-collection-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin: 4px 0 8px; cursor: pointer; }

.lrw-collection-item {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--lrw-bg-alt);
	border: 1px solid var(--lrw-border);
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	padding: 9px 12px;
}

.lrw-collection-item:hover { border-color: var(--lrw-accent); }
.lrw-collection-item input { margin: 0; flex: 0 0 auto; }
.lrw-collection-item .muted { color: var(--lrw-muted); font-size: 12px; }

.lrw-progress-wrap { margin-top: 14px; }

.lrw-progress-bar {
	background: var(--lrw-bg-alt);
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
}

.lrw-progress-fill {
	background: var(--lrw-accent);
	height: 100%;
	width: 0;
	transition: width 0.2s ease;
}

.lrw-progress-label { color: var(--lrw-muted); font-size: 13px; margin-top: 6px; }

/* ---- Highlight popup ---- */

.lrw-highlight-popup {
	background: var(--lrw-bg);
	border: 1px solid var(--lrw-border);
	border-radius: 12px;
	box-shadow: var(--lrw-shadow);
	display: flex;
	flex-direction: column;
	padding: 4px 8px 6px;
	position: absolute;
	z-index: 80;
}

/* Row 1: labeled word actions (Define / Refs / Search / Copy / + Note). */
.lrw-popup-actions {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid var(--lrw-border);
	margin-bottom: 6px;
}

.lrw-popup-action {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: none;
	border-right: 1px solid var(--lrw-border);
	border-radius: 0;
	color: var(--lrw-muted);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-size: 10px;
	line-height: 1;
	padding: 6px 10px 7px;
}

.lrw-popup-action:last-child { border-right: none; }
.lrw-popup-action:hover { color: var(--lrw-accent); }
.lrw-popup-action svg { width: 15px; height: 15px; }

/* Row 2: highlight color swatches. */
.lrw-popup-swatches {
	display: flex;
	gap: 1px;
	justify-content: center;
}

.lrw-popup-swatches button {
	/* appearance:none keeps Safari from forcing its own button shape,
	   which squashes the border-radius circle. */
	-webkit-appearance: none;
	appearance: none;
	background-clip: padding-box;
	border: 1px solid var(--lrw-border);
	border-radius: 50%;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 26px;
	height: 26px;
	width: 26px;
	min-width: 26px;
	padding: 0;
	font-size: 10px;
	line-height: 1;
	margin: 0 4px;
}

.lrw-hl-swatch-yellow { background: var(--lrw-hl-yellow); }
.lrw-hl-swatch-blue { background: var(--lrw-hl-blue); }
.lrw-hl-swatch-green { background: var(--lrw-hl-green); }
.lrw-hl-swatch-pink { background: var(--lrw-hl-pink); }
.lrw-hl-swatch-purple { background: var(--lrw-hl-purple); }
.lrw-hl-swatch-orange { background: var(--lrw-hl-orange); }
.lrw-hl-swatch-red { background: var(--lrw-hl-red); }
.lrw-hl-swatch-underline,
.lrw-hl-swatch-note { background: var(--lrw-bg-alt); color: var(--lrw-text); }

/* ---- Definition card ---- */

.lrw-define-card {
	background: var(--lrw-bg);
	border: 1px solid var(--lrw-border);
	border-radius: 12px;
	box-shadow: var(--lrw-shadow);
	color: var(--lrw-text);
	font-size: 13px;
	max-width: 320px;
	padding: 10px 14px 12px;
	position: absolute;
	z-index: 90;
}

.lrw-define-card .head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 4px;
	text-transform: capitalize;
}

.lrw-define-card .body p { margin: 6px 0 0; line-height: 1.45; }
.lrw-define-card .body em { color: var(--lrw-muted); font-style: italic; }
.lrw-define-card .body a { color: var(--lrw-link); }

/* ---- Note composer / quotes / notebook picker ---- */

.lrw-note-ref { font-weight: 600; margin: 0 0 8px; }

.lrw-note-quote {
	border-left: 3px solid var(--lrw-accent);
	background: var(--lrw-accent-soft);
	border-radius: 0 8px 8px 0;
	color: var(--lrw-muted);
	font-size: 13px;
	font-style: italic;
	margin: 0 0 10px;
	padding: 8px 10px;
}

.lrw-existing-notes { margin-bottom: 10px; }

.lrw-picker-label {
	color: var(--lrw-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 12px 0 4px;
	text-transform: uppercase;
}

.lrw-notebook-picker .lrw-picker-list { display: flex; flex-direction: column; gap: 2px; }
.lrw-notebook-picker .lrw-check { font-size: 13px; }

.lrw-picker-new {
	display: flex;
	gap: 6px;
	margin-top: 8px;
}

.lrw-picker-new input {
	background: var(--lrw-bg);
	border: 1px solid var(--lrw-border);
	border-radius: 8px;
	color: var(--lrw-text);
	flex: 1;
	font-size: 13px;
	min-width: 0;
	padding: 7px 10px;
}

.lrw-picker-new .lrw-btn { margin-top: 0; white-space: nowrap; }

/* ---- Notebooks drawer ---- */

.lrw-notebooks-body { display: flex; flex-direction: column; gap: 6px; }

.lrw-notebooks-empty { color: var(--lrw-muted); font-size: 13px; }

.lrw-notebook-row {
	background: var(--lrw-bg);
	border: 1px solid var(--lrw-border);
	border-radius: 10px;
	color: var(--lrw-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	padding: 10px 12px;
	text-align: left;
	width: 100%;
}

.lrw-notebook-row:hover { border-color: var(--lrw-accent); }
.lrw-notebook-row svg { color: var(--lrw-muted); flex: 0 0 auto; }
.lrw-notebook-row .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lrw-notebook-row .count {
	background: var(--lrw-accent-soft);
	border-radius: 999px;
	color: var(--lrw-accent);
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
}

.lrw-notebook-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.lrw-notebook-head h3 { flex: 1; font-size: 15px; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lrw-notebook-head input {
	background: var(--lrw-bg);
	border: 1px solid var(--lrw-border);
	border-radius: 8px;
	color: var(--lrw-text);
	flex: 1;
	font-size: 14px;
	min-width: 0;
	padding: 5px 8px;
}

.lrw-notebook-back { margin-top: 0; padding: 4px 10px; }

.lrw-notebook-tool {
	background: none;
	border: none;
	border-radius: 6px;
	color: var(--lrw-muted);
	cursor: pointer;
	padding: 5px 6px;
}

.lrw-notebook-tool:hover { background: var(--lrw-accent-soft); color: var(--lrw-accent); }

.lrw-panel-heading { font-size: 14px; margin: 0 0 8px; }
.lrw-refs-meta { color: var(--lrw-muted); font-size: 12px; margin: 0 0 4px; }
.lrw-panel-body .lrw-search-result { border-radius: 8px; }

/* ---- Ask the Library (AI) ---- */

.lrw-ask-box { max-width: 720px; max-height: 84vh; }

.lrw-ask-head { padding: 14px 16px 10px; }
.lrw-ask-head h2 { margin: 0; font-size: 17px; }
.lrw-ask-tools { display: flex; align-items: center; gap: 8px; }
.lrw-ask-tools select {
	background: var(--lrw-bg);
	border: 1px solid var(--lrw-border);
	border-radius: 8px;
	color: var(--lrw-text);
	font-size: 13px;
	max-width: 180px;
	padding: 5px 8px;
}
.lrw-ask-tools .lrw-btn { margin-top: 0; padding: 5px 10px; font-size: 12px; }

.lrw-ask-thread {
	flex: 1;
	overflow-y: auto;
	padding: 6px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 120px;
}

.lrw-ask-msg {
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.55;
	max-width: 92%;
	padding: 9px 13px;
}

.lrw-ask-msg.user {
	align-self: flex-end;
	background: var(--lrw-accent-soft);
	color: var(--lrw-text);
}

.lrw-ask-msg.assistant {
	align-self: flex-start;
	background: var(--lrw-bg-alt);
	width: 92%;
}

.lrw-ask-msg.pending { color: var(--lrw-muted); font-style: italic; }
.lrw-ask-answer { white-space: pre-wrap; }
.lrw-ask-answer p { margin: 0 0 0.6em; white-space: normal; }
.lrw-ask-answer p:last-child { margin-bottom: 0; }
.lrw-ask-answer a { color: var(--lrw-link); }

.lrw-ask-sources {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin-top: 10px;
}
.lrw-ask-sources .label { color: var(--lrw-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.lrw-ask-sources a {
	background: var(--lrw-bg);
	border: 1px solid var(--lrw-border);
	border-radius: 999px;
	color: var(--lrw-link);
	font-size: 12px;
	padding: 2px 10px;
	text-decoration: none;
}
.lrw-ask-sources a:hover { border-color: var(--lrw-accent); }

.lrw-ask-save { margin-top: 10px; }
.lrw-ask-save .lrw-btn { margin-top: 0; padding: 4px 10px; font-size: 12px; }
.lrw-ask-save .lrw-notebook-picker { margin-top: 8px; }

.lrw-ask-inputrow {
	display: flex;
	gap: 8px;
	border-top: 1px solid var(--lrw-border);
	padding: 12px 16px;
}

.lrw-ask-inputrow textarea {
	background: var(--lrw-bg);
	border: 1px solid var(--lrw-border);
	border-radius: 10px;
	color: var(--lrw-text);
	flex: 1;
	font-family: inherit;
	font-size: 14px;
	padding: 9px 12px;
	resize: none;
}
.lrw-ask-inputrow textarea:focus { outline: none; border-color: var(--lrw-accent); }
.lrw-ask-inputrow .lrw-btn { margin-top: 0; align-self: flex-end; }

/* ---- Toast ---- */

.lrw-toast {
	background: var(--lrw-text);
	border-radius: 10px;
	bottom: 24px;
	color: var(--lrw-bg);
	font-size: 14px;
	left: 50%;
	padding: 10px 18px;
	position: fixed;
	transform: translateX(-50%);
	z-index: 110;
}

/* ---- Library / book index cards ---- */

.lrw-index-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	margin-top: 24px;
	font-family: var(--lrw-font-sans);
}

.lrw-index-card {
	border: 1px solid var(--lrw-border);
	border-radius: 12px;
	color: var(--lrw-text);
	display: block;
	padding: 18px;
	text-decoration: none;
	transition: border-color 0.15s;
}

.lrw-index-card:hover { border-color: var(--lrw-accent); }
.lrw-index-card h2 { font-size: 17px; margin: 0 0 6px; }
.lrw-index-card p { color: var(--lrw-muted); font-size: 13px; margin: 0; }

/* ---- Shortcode embeds ---- */

.lrw-quote {
	border-left: 3px solid #a4262c;
	margin: 1.2em 0;
	padding: 0.4em 1.2em;
}

.lrw-quote cite { display: block; font-size: 0.85em; margin-top: 0.5em; }
.lrw-quote-num { font-size: 0.7em; opacity: 0.7; }

.lrw-search-embed { position: relative; max-width: 480px; }

.lrw-search-embed-input {
	border: 1px solid #ccc;
	border-radius: 8px;
	font-size: 16px;
	padding: 10px 14px;
	width: 100%;
	box-sizing: border-box;
}

.lrw-search-embed-results {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
	color: #1f2328;
	max-height: 320px;
	overflow-y: auto;
	position: absolute;
	width: 100%;
	z-index: 30;
}

.lrw-search-embed-results:empty { display: none; }

.lrw-search-embed-results a {
	border-bottom: 1px solid #eee;
	color: inherit;
	display: block;
	font-size: 14px;
	padding: 8px 12px;
	text-decoration: none;
}

.lrw-search-embed-results a:hover { background: #f6f5f2; }

/* ---- Responsive ---- */

@media (max-width: 1100px) {
	.lrw-layout.panel-open { grid-template-columns: 0 minmax(0, 1fr) 320px; }
	.lrw-layout.panel-open .lrw-nav { display: none; }
}

@media (max-width: 782px) {
	.lrw-layout,
	.lrw-layout.panel-open,
	.lrw-layout.nav-closed,
	.lrw-layout.nav-closed.panel-open { grid-template-columns: minmax(0, 1fr); }

	.lrw-nav {
		border-right: none;
		bottom: 0;
		box-shadow: var(--lrw-shadow);
		left: 0;
		max-height: none;
		position: fixed;
		top: var(--lrw-topbar-h);
		width: min(320px, 85vw);
		z-index: 60;
	}

	.lrw-layout.nav-closed .lrw-nav { display: none; }
	.lrw-layout:not(.nav-closed) .lrw-nav { display: block; }

	.lrw-panel {
		border-left: none;
		bottom: 0;
		box-shadow: var(--lrw-shadow);
		max-height: none;
		position: fixed;
		right: 0;
		top: var(--lrw-topbar-h);
		width: min(340px, 92vw);
		z-index: 60;
	}

	.lrw-pane { padding: 20px 16px 60px; }
	.lrw-breadcrumbs { display: none; }

	/* Stack the compare pane below the primary one on narrow screens. */
	.lrw-main.split { flex-direction: column; }
	.lrw-main.split .lrw-pane-primary,
	.lrw-main.split .lrw-pane-compare { flex: 1 1 auto; }
	.lrw-pane-compare { border-left: none; border-top: 1px solid var(--lrw-border); }
	.lrw-main.split .lrw-reading { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.lrw-app * { transition: none !important; scroll-behavior: auto !important; }
}

/* Reading a scanned PDF in the browser */
.lrw-ocr-offer {
	margin-top: 1rem;
}
.lrw-ocr-offer .lrw-ocr-note {
	color: var(--lrw-muted, #6b7280);
	font-size: .85em;
}
.lrw-ocr-actions {
	display: flex;
	gap: .5rem;
	margin: .9rem 0 .7rem;
}
.lrw-ocr-bar {
	background: var(--lrw-rule, #e5e7eb);
	border-radius: 999px;
	height: 6px;
	overflow: hidden;
}
.lrw-ocr-bar span {
	background: var(--lrw-accent, #a33);
	display: block;
	height: 100%;
	width: 0;
	transition: width .2s ease;
}

/* Account control in the top bar. A guest's marks are stored in their own
   browser only, so this is where the reader offers to make them portable. */
.lrw-app .lrw-account {
	text-decoration: none;
	flex: none;
}

.lrw-app .lrw-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--lrw-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	font-family: var(--lrw-font-sans);
}

/* ============================================================
   Phone layout
   ------------------------------------------------------------
   Ten icon buttons do not fit a 375px bar. Measured on an
   iPhone 12 mini the top bar overflowed by 128px, which put
   typography, light/dark, the study panel and the account
   button off-screen with no way to reach them.

   Rather than build a second set of controls, the same buttons
   move to a fixed bottom bar: every existing handler keeps
   working, the icons land under the thumb, and the reading
   column keeps its full width (a vertical rail would have cost
   ~44px of it on a screen that only has 375).
   ============================================================ */

@media (max-width: 782px) {
	.lrw-app {
		--lrw-bottombar-h: 54px;
		--lrw-safe-b: env(safe-area-inset-bottom, 0px);
	}

	/* Sit under the status bar when launched from the home screen. */
	.lrw-topbar {
		padding-top: env(safe-area-inset-top, 0px);
		min-height: calc(var(--lrw-topbar-h) + env(safe-area-inset-top, 0px));
	}

	.lrw-topbar-actions {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 55;
		gap: 0;
		justify-content: space-around;
		padding: 5px 4px;
		padding-bottom: calc(5px + var(--lrw-safe-b));
		background: var(--lrw-bg-alt);
		border-top: 1px solid var(--lrw-border);
	}

	.lrw-topbar-actions .lrw-icon-btn,
	.lrw-topbar-actions .lrw-account {
		flex: 1 1 0;
		min-width: 0;
		max-width: 68px;
		height: 44px;
	}

	/* Comparing two chapters side by side and importing a library are both
	   desktop work; neither survives a 375px screen. */
	#lrw-toggle-split,
	#lrw-open-import {
		display: none !important;
	}

	/* Keep the last verse and the chapter nav clear of the bar. */
	.lrw-pane {
		padding-bottom: calc(var(--lrw-bottombar-h) + var(--lrw-safe-b) + 28px);
	}

	/* ---- Study panel as a bottom sheet ---- */

	.lrw-panel {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		height: 72dvh;
		max-height: 72dvh;
		border-left: none;
		border-top: 1px solid var(--lrw-border);
		border-radius: 20px 20px 0 0;
		padding-bottom: var(--lrw-safe-b);
		z-index: 70;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		transition: transform 0.22s ease;
	}

	/* The grab area: a handle above the tabs, which is also what you drag. */
	.lrw-panel-tabs {
		position: relative;
		padding-top: 18px;
		flex: none;
		touch-action: none;
	}

	.lrw-panel-tabs::before {
		content: '';
		position: absolute;
		top: 7px;
		left: 50%;
		transform: translateX(-50%);
		width: 38px;
		height: 4px;
		border-radius: 99px;
		background: var(--lrw-border);
	}

	.lrw-panel-body {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.lrw-sheet-backdrop {
		position: fixed;
		inset: 0;
		z-index: 65;
		background: rgba(15, 17, 21, 0.38);
		border: 0;
		padding: 0;
		margin: 0;
		-webkit-appearance: none;
		appearance: none;
	}

	/* The library drawer should clear the bottom bar too. */
	.lrw-nav {
		bottom: calc(var(--lrw-bottombar-h) + var(--lrw-safe-b));
	}
}

/* ---- Paywall ---- */

/* Shown where the verses would be. Deliberately calm — it is an offer, not
   an obstacle, and the book around it still reads normally. */
.lrw-paywall {
	background: var(--lrw-bg-alt);
	border: 1px solid var(--lrw-border);
	border-radius: 12px;
	margin: 24px auto;
	max-width: var(--lrw-reading-width);
	padding: 32px;
	text-align: center;
}

.lrw-paywall h2 { margin: 0 0 4px; font-size: 1.4em; }
.lrw-paywall-author { color: var(--lrw-muted); margin: 0 0 18px; font-size: 14px; }

.lrw-paywall-price {
	font-size: 2em;
	font-weight: 700;
	margin: 0 0 20px;
	color: var(--lrw-text);
}

.lrw-paywall .lrw-btn { display: inline-block; text-decoration: none; }
.lrw-paywall-note { color: var(--lrw-muted); font-size: 14px; margin: 12px 0 0; }
.lrw-paywall-fine { color: var(--lrw-muted); font-size: 12px; margin: 14px 0 0; }

/* ---- Your books drawer ---- */

.lrw-author-body { padding: 0 16px 24px; }

.lrw-author-block {
	border-top: 1px solid var(--lrw-border);
	margin-top: 16px;
	padding-top: 16px;
}

.lrw-author-block:first-child { border-top: 0; margin-top: 0; }
.lrw-author-block h3 { font-size: 14px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lrw-muted); }

.lrw-author-body input[type="text"],
.lrw-author-body input[type="number"],
.lrw-author-body textarea,
.lrw-author-body select {
	width: 100%;
	margin: 0 0 8px;
	padding: 8px 10px;
	border: 1px solid var(--lrw-border);
	border-radius: 8px;
	background: var(--lrw-bg);
	color: var(--lrw-text);
	font: inherit;
}

.lrw-author-note { color: var(--lrw-muted); font-size: 13px; margin: 8px 0 0; }
.lrw-author-fine { color: var(--lrw-muted); font-size: 12px; margin: 6px 0 0; }
.lrw-author-error { color: var(--lrw-accent); font-size: 13px; }
.lrw-author-ok { color: var(--lrw-accent); font-weight: 600; }
.lrw-author-earnings { font-size: 1.3em; font-weight: 700; margin: 0; }
.lrw-author-purchase { font-size: 13px; margin: 4px 0; color: var(--lrw-muted); }

/* Test mode should be impossible to miss. */
.lrw-author-test {
	background: var(--lrw-accent-soft);
	border-radius: 6px;
	color: var(--lrw-accent);
	font-size: 12px;
	font-weight: 600;
	margin: 0 0 12px;
	padding: 6px 10px;
}

/* ---- Ask to publish -------------------------------------------------
   Shown under a book or library you own that is still private, when the
   site holds readers' imports for review. The review queue and the REST
   route already existed; this is the reader's way into them. */

.lrw-publish-ask {
	border: 1px solid var(--lrw-border);
	border-radius: 12px;
	background: var(--lrw-bg-alt);
	padding: 18px 20px;
	margin: 32px auto 8px;
	max-width: var(--lrw-reading-width);
	font-family: var(--lrw-font-sans);
	font-size: 14px;
}

.lrw-publish-ask strong {
	display: block;
	color: var(--lrw-text);
	font-size: 15px;
	margin-bottom: 4px;
}

.lrw-publish-ask p {
	color: var(--lrw-muted);
	line-height: 1.5;
	margin: 0 0 12px;
}

.lrw-publish-ask.is-pending {
	border-color: var(--lrw-accent);
	background: var(--lrw-accent-soft);
}

.lrw-app .lrw-publish-note {
	background: var(--lrw-bg);
	border: 1px solid var(--lrw-border);
	border-radius: 8px;
	box-sizing: border-box;
	color: var(--lrw-text);
	display: block;
	font-family: inherit;
	font-size: 14px;
	margin-bottom: 10px;
	padding: 9px 12px;
	resize: vertical;
	width: 100%;
}

.lrw-app .lrw-publish-note:focus {
	border-color: var(--lrw-accent);
	outline: none;
}

.lrw-publish-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.lrw-publish-error {
	color: var(--lrw-accent);
	margin: 10px 0 0;
}

/* ---- Toast action (undo) ---- */

.lrw-toast.has-action {
	align-items: center;
	display: flex;
	gap: 14px;
}

.lrw-toast-action {
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 6px;
	color: inherit;
	cursor: pointer;
	flex: none;
	font: inherit;
	font-weight: 700;
	padding: 5px 12px;
}

.lrw-toast-action:hover { opacity: 0.8; }

/* How much a selection covers, shown before it is committed — a stray drag
   on a touch screen can run much further than intended. */
.lrw-popup-scope {
	color: var(--lrw-muted);
	font-size: 12px;
	padding: 6px 10px 0;
	text-align: center;
}

/* ---- Account menu ---- */

.lrw-account-wrap { position: relative; }

.lrw-initial {
	align-items: center;
	background: var(--lrw-accent);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	height: 24px;
	justify-content: center;
	width: 24px;
}

.lrw-account-menu {
	background: var(--lrw-bg);
	border: 1px solid var(--lrw-border);
	border-radius: 10px;
	box-shadow: var(--lrw-shadow);
	padding: 14px 16px;
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	width: min(260px, calc(100vw - 32px));
	z-index: 70;
}

.lrw-account-who { margin: 0 0 6px; font-size: 14px; }
.lrw-account-label { color: var(--lrw-muted); display: block; font-size: 12px; }
.lrw-account-note { color: var(--lrw-muted); font-size: 12px; line-height: 1.5; margin: 0 0 12px; }

.lrw-account-action {
	border: 1px solid var(--lrw-border);
	border-radius: 8px;
	color: var(--lrw-text);
	display: block;
	font-size: 14px;
	padding: 8px 12px;
	text-align: center;
	text-decoration: none;
}

.lrw-account-action:hover {
	background: var(--lrw-accent-soft);
	border-color: var(--lrw-accent);
	color: var(--lrw-accent);
}

/* ---- Selection popup on touch ---- */

/* Touch systems put their own selection menu (Copy, Look Up, Translate…)
   immediately beside the selection, so a popup anchored there sits under it
   and the colour swatches become almost untappable. Docking to the bottom of
   the screen keeps the two apart and gives the swatches room. */
.lrw-highlight-popup.lrw-popup-docked {
	border-radius: 14px 14px 0 0;
	bottom: 0;
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
	left: 0;
	max-width: none;
	position: fixed;
	right: 0;
	top: auto;
	width: 100%;
	/* Clear of the home indicator on iPhone/iPad. */
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

@media (pointer: coarse) {
	/* Apple's guidance is a 44px minimum target; the desktop swatches are
	   half that, which is what makes them fiddly with a finger. */
	.lrw-popup-docked .lrw-popup-swatches {
		gap: 10px;
		justify-content: center;
		padding: 10px 12px;
	}

	.lrw-popup-docked .lrw-popup-swatches button {
		height: 44px;
		min-width: 44px;
		width: 44px;
	}

	.lrw-popup-docked .lrw-popup-actions { justify-content: center; }

	.lrw-popup-docked .lrw-popup-action {
		min-height: 44px;
		padding: 8px 14px;
	}
}