/* ============================================================
   Your Custom Bible — Design system
   Direction: Traditional study Bible
   - Parchment paper tones, charcoal ink, deep Oxford blue,
     muted gold accents.
   - UI type: Source Sans Pro (sans). Scripture type: Source Serif 4.
   ============================================================ */

@font-face {
	font-family: 'sourceSansPro';
	src: url(fonts/SourceSansPro-Regular.ttf?version=1);
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'sourceSansPro';
	src: url(fonts/SourceSansPro-Italic.ttf?version=1);
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'sourceSansPro';
	src: url(fonts/SourceSansPro-Bold.ttf?version=1);
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'sourceSerif4';
	src: url(fonts/SourceSerif4.ttf?version=1);
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'sourceSerif4';
	src: url(fonts/SourceSerif4-Italic.ttf?version=1);
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Sura';
	src: url(fonts/Sura-Regular.ttf?version=1);
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Sura';
	src: url(fonts/Sura-Bold.ttf?version=1);
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'AtkinsonHyperlegible';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/AtkinsonHyperlegible-Italic-latin-ext.woff2?version=1) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'AtkinsonHyperlegible';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/AtkinsonHyperlegible-Italic-latin.woff2?version=1) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'AtkinsonHyperlegible';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/AtkinsonHyperlegible-Regular-latin-ext.woff2?version=1) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'AtkinsonHyperlegible';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/AtkinsonHyperlegible-Regular-latin.woff2?version=1) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'EBGaramond';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/EBGaramond-Italic-latin-ext.woff2?version=1) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'EBGaramond';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/EBGaramond-Italic-latin.woff2?version=1) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'EBGaramond';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/EBGaramond-Regular-latin-ext.woff2?version=1) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'EBGaramond';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/EBGaramond-Regular-latin.woff2?version=1) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Literata';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/Literata-Italic-latin-ext.woff2?version=1) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Literata';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/Literata-Italic-latin.woff2?version=1) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Literata';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/Literata-Regular-latin-ext.woff2?version=1) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Literata';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/Literata-Regular-latin.woff2?version=1) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'OpenDyslexic';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/OpenDyslexic-Regular.woff2?version=1) format('woff2');
}

@font-face {
	font-family: 'OpenDyslexic';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(fonts/OpenDyslexic-Bold.woff2?version=1) format('woff2');
}

@font-face {
	font-family: 'OpenDyslexic';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/OpenDyslexic-Italic.woff2?version=1) format('woff2');
}

@font-face {
	font-family: 'OpenDyslexic';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(fonts/OpenDyslexic-BoldItalic.woff2?version=1) format('woff2');
}

/* ---------- Light theme: "Parchment" ---------- */
:root {
	--font-ui: 'sourceSansPro', 'Segoe UI', system-ui, sans-serif;
	--font-scripture: 'sourceSerif4', 'Sura', Georgia, 'Times New Roman', serif;
	/* The brand is app chrome, not scripture: it must never follow the
	   reading font the gear menu picks, so it gets its own stack. */
	--font-brand: 'sourceSerif4', Georgia, 'Times New Roman', serif;
	--background: #f4efe2;
	--surface: #fffaf1;
	--surface-soft: #f0e9d8;
	--border-light: #eae2cf;
	--border: #d9cdb2;
	--text-primary: #2b2419;
	--text-secondary: #5f5340;
	--text-muted: #998a6e;
	--primary: #34507a; /* deep Oxford blue */
	--primary-dark: #263c60;
	--primary-light: #6d87a8;
	--orp: #1558b0; /* speed reader fixation letter: a brighter blue than --primary,
	   which is too close to the scripture text to read as a highlight */
	--accent-soft: #e6ebf2;
	--secondary: #a0772c; /* muted gold */
	--gold: #a0772c;
	--gold-light: #d9c18a;
	--shadow-sm: 0 1px 2px 0 rgb(79 64 38 / 0.1);
	--shadow: 0 6px 16px -6px rgb(79 64 38 / 0.18);
	--shadow-lg: 0 12px 28px -8px rgb(79 64 38 / 0.22);
	--shadow-xl: 0 20px 45px -12px rgb(79 64 38 / 0.3);
	--radius-sm: 6px;
	--radius: 10px;
	--radius-lg: 14px;
	--radius-xl: 18px;
	--woc: #a01a1a;
}

/* ---------- Scripture font options ----------
   The gear menu sets body[data-font]; each rule only swaps the reading
   stack so the UI keeps --font-ui. Settings fall back to the default
   stack when the chosen font has no glyph for a character. */
body[data-font='ebGaramond'] {
	--font-scripture: 'EBGaramond', 'sourceSerif4', Georgia, 'Times New Roman', serif;
}

body[data-font='literata'] {
	--font-scripture: 'Literata', 'sourceSerif4', Georgia, 'Times New Roman', serif;
}

body[data-font='sura'] {
	--font-scripture: 'Sura', 'sourceSerif4', Georgia, 'Times New Roman', serif;
}

body[data-font='atkinson'] {
	--font-scripture: 'AtkinsonHyperlegible', 'sourceSansPro', 'Segoe UI', sans-serif;
}

body[data-font='openDyslexic'] {
	--font-scripture: 'OpenDyslexic', 'sourceSerif4', Georgia, 'Times New Roman', serif;
}

/* ---------- Dark theme: "Candlelight" ---------- */
body.dark {
	--background: #19140e;
	--surface: #251e14;
	--surface-soft: #2d261a;
	--border-light: #2c2519;
	--border: #403527;
	--text-primary: #ece2cc;
	--text-secondary: #b7a783;
	--text-muted: #88785c;
	--primary: #9fb6d4;
	--primary-dark: #7e97bc;
	--primary-light: #c7d5ea;
	--orp: #8ec5ff;
	--accent-soft: #2a333f;
	--secondary: #d8bb6e;
	--gold: #d8bb6e;
	--gold-light: #8f7a3f;
	--woc: #e05252;
	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.35);
	--shadow: 0 6px 16px -6px rgb(0 0 0 / 0.5);
	--shadow-lg: 0 12px 28px -8px rgb(0 0 0 / 0.55);
	--shadow-xl: 0 20px 45px -12px rgb(0 0 0 / 0.65);
}

/* ---------- Base ---------- */
* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-ui);
	font-size: 18px;
	color: var(--text-primary);
	background-color: var(--background);
	margin: 0;
	padding: 0;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body,
body #header,
body #dropdown,
body a,
body button,
body select,
body input {
	transition: background-color 0.25s ease, color 0.25s ease,
		border-color 0.25s ease, box-shadow 0.25s ease;
}

::selection {
	background: var(--gold-light);
	color: var(--text-primary);
}

button {
	font-family: inherit;
}

/* Words of Christ (red letter). The colour is turned off while the setting is
   disabled via a body-level .woc-off class. */
.woc {
	color: var(--woc);
}

body.woc-off .woc {
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

a {
	color: var(--primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--primary-dark);
}

/* ---------- Main body / scripture column ---------- */
#body {
	padding-top: 96px;
	padding-left: 24px;
	padding-right: 24px;
	max-width: 900px;
	margin: 0 auto;
	font-family: var(--font-scripture);
}

.page {
	display: none;
}

#chapter {
	max-width: 40rem;
	margin: 0 auto;
}

/* ---------- Header ---------- */
#header {
	background-color: var(--surface);
	border-bottom: 1px solid var(--border);
	text-align: center;
	height: 72px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-sm);
}

#header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--gold) 20%,
		var(--gold) 80%,
		transparent
	);
	opacity: 0.85;
}

#brand {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	user-select: none;
	padding: 4px 16px;
	border-radius: var(--radius);
}

#brand img {
	height: 38px;
	width: 38px;
	object-fit: contain;
}

#brandText {
	text-align: left;
	line-height: 1.15;
}

.brand-title {
	font-family: var(--font-brand);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--text-primary);
}

.brand-sub {
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.34em;
	color: var(--gold);
	margin-top: 2px;
}

#rightIcons {
	display: flex;
	gap: 12px;
	align-items: center;
	position: absolute;
	right: 0;
	margin-right: 18px;
	color: var(--text-secondary);
}

#menuIcon,
#gearIcon,
#advancedIcon {
	cursor: pointer;
	color: var(--text-secondary);
	transition: color 0.2s ease, transform 0.2s ease;
}

#menuIcon:hover,
#gearIcon:hover,
#advancedIcon:hover {
	color: var(--primary);
	transform: scale(1.05);
}

/* ---------- Dropdown menu ---------- */
#dropdown,
#settingsDropdown,
#advancedDropdown {
	position: absolute;
	top: 78px;
	background-color: var(--surface);
	z-index: 1000;
	box-shadow: var(--shadow-xl);
	display: none;
	padding: 8px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	min-width: 300px;
	max-height: calc(100vh - 90px);
	max-height: calc(100dvh - 90px);
	overflow-y: auto;
	color: var(--text-primary);
}

#dropdown {
	right: 16px;
}

#settingsDropdown {
	right: 54px;
}

#advancedDropdown {
	right: 90px;
}

#dropdown > div,
#settingsDropdown > div,
#advancedDropdown > div {
	padding: 10px 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	border-radius: var(--radius);
	transition: background-color 0.15s ease;
	color: var(--text-primary);
	font-size: 0.95rem;
}

#dropdown > div:hover,
#settingsDropdown > div:hover,
#advancedDropdown > div:hover {
	background-color: var(--surface-soft);
}

.menu-divider {
	border: none;
	border-top: 1px solid var(--border-light);
	margin: 6px 4px;
}

#dropdown .buttonHolder,
#settingsDropdown .buttonHolder,
#advancedDropdown .buttonHolder {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

#dropdown button,
#settingsDropdown button,
#advancedDropdown button {
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-primary);
	padding: 7px 16px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9rem;
	transition: all 0.2s ease;
}

#dropdown button:hover,
#settingsDropdown button:hover,
#advancedDropdown button:hover {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
}

#dropdown .buttonHolder button.selected,
#settingsDropdown .buttonHolder button.selected,
#advancedDropdown .buttonHolder button.selected {
	background: var(--primary-dark);
	color: #fff;
	border-color: var(--primary-dark);
}

#dropdown select,
#settingsDropdown select,
#advancedDropdown select {
	padding: 7px 10px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-primary);
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.9rem;
	cursor: pointer;
	transition: all 0.2s ease;
}

#dropdown select:hover,
#settingsDropdown select:hover,
#advancedDropdown select:hover {
	border-color: var(--primary);
}

#dropdown select:focus,
#settingsDropdown select:focus,
#advancedDropdown select:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

#dropdown input[type="checkbox"],
#settingsDropdown input[type="checkbox"],
#advancedDropdown input[type="checkbox"] {
	display: block;
	width: 18px;
	height: 18px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--primary);
}

/* ---------- Activity types ----------
   One colour per activity type, plus a soft tint of it for pill backgrounds.
   Classes rather than inline colours so the palette can differ per theme.
   The hues are kept as far apart as possible (grey, blue, green, violet,
   red, orange, cyan, pink) so pills stay tellable apart at a glance. */
.act-default {
	--activity-color: #7a7466;
	--activity-tint: rgb(122 116 102 / 0.14);
}

.act-cotd {
	--activity-color: #1e56a8;
	--activity-tint: rgb(30 86 168 / 0.14);
}

.act-devotions {
	--activity-color: #2e7d32;
	--activity-tint: rgb(46 125 50 / 0.14);
}

.act-biblestudy {
	--activity-color: #6d28c6;
	--activity-tint: rgb(109 40 198 / 0.14);
}

.act-church {
	--activity-color: #b3261e;
	--activity-tint: rgb(179 38 30 / 0.14);
}

.act-other1 {
	--activity-color: #b45309;
	--activity-tint: rgb(180 83 9 / 0.16);
}

.act-other2 {
	--activity-color: #0e7490;
	--activity-tint: rgb(14 116 144 / 0.14);
}

.act-other3 {
	--activity-color: #bd2a6e;
	--activity-tint: rgb(189 42 110 / 0.14);
}

body.dark .act-default {
	--activity-color: #ada697;
	--activity-tint: rgb(173 166 151 / 0.2);
}

body.dark .act-cotd {
	--activity-color: #6d9eeb;
	--activity-tint: rgb(109 158 235 / 0.2);
}

body.dark .act-devotions {
	--activity-color: #4fc46a;
	--activity-tint: rgb(79 196 106 / 0.18);
}

body.dark .act-biblestudy {
	--activity-color: #a88bfa;
	--activity-tint: rgb(168 139 250 / 0.18);
}

body.dark .act-church {
	--activity-color: #ee5c4a;
	--activity-tint: rgb(238 92 74 / 0.18);
}

body.dark .act-other1 {
	--activity-color: #f2a53c;
	--activity-tint: rgb(242 165 60 / 0.18);
}

body.dark .act-other2 {
	--activity-color: #45c4e0;
	--activity-tint: rgb(69 196 224 / 0.18);
}

body.dark .act-other3 {
	--activity-color: #ef69ae;
	--activity-tint: rgb(239 105 174 / 0.18);
}

/* The activity select in the small page pickers. In the advanced dropdown it
   deliberately shares the plain #advancedDropdown select style. */
.activity-picker select.activity-select {
	color: var(--activity-color);
	background-color: var(--activity-tint);
	border-color: var(--activity-color);
	font-weight: 700;
}

/* Small activity selector, top right of the home and index pages. */
.activity-picker-holder {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 10px;
}

#index .activity-picker-holder {
	flex-basis: 100%;
}

.activity-picker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 6px 5px 12px;
	border: 1.5px solid var(--activity-color);
	border-radius: 999px;
	background-color: var(--activity-tint);
	font-family: 'sourceSansPro', sans-serif;
}

.activity-picker-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--text-muted);
}

.activity-picker select.activity-select {
	padding: 3px 8px;
	border: 1px solid var(--activity-color);
	border-radius: 999px;
	background-color: var(--surface);
	font-size: 0.85rem;
}

/* In the chapter pickers (the home card heading and the index page top right)
   the picker stays quiet: just a small colour dot and a plain select. */
.home-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 12px;
}

.home-card-head h2 {
	margin: 0;
}

.activity-quiet .activity-picker {
	gap: 6px;
	padding: 0;
	border: none;
	background: none;
}

.activity-quiet .activity-picker::before {
	content: "";
	align-self: center;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--activity-color);
}

.activity-quiet .activity-picker-label {
	display: none;
}

.activity-quiet .activity-picker select.activity-select {
	padding: 2px 4px;
	border-color: transparent;
	border-radius: 6px;
	background: transparent;
	color: var(--text-secondary);
	font-size: 0.8rem;
	font-weight: 400;
}

.activity-quiet .activity-picker select.activity-select:hover {
	border-color: var(--border);
	background-color: var(--surface-soft);
}

/* ---------- Index: book picker ---------- */
#index {
	flex-wrap: wrap;
	gap: 14px;
	font-family: var(--font-ui);
}

.index-sections {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	flex-basis: 100%;
	gap: 14px;
}

.index-order {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 6px 0 14px;
}

.index-order-button {
	font-family: var(--font-ui);
	font-size: 0.95rem;
	font-weight: 600;
	padding: 6px 0;
	border: 0;
	background: none;
	box-shadow: inset 0 -2px 0 var(--border);
	color: var(--primary);
	cursor: pointer;
	transition: color 0.2s ease, box-shadow 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}

.index-order-button:hover {
	color: var(--primary-dark);
	box-shadow: inset 0 -2px 0 var(--primary-light);
}

.index-order-button.active {
	color: var(--primary-dark);
	box-shadow: inset 0 -2px 0 var(--gold);
	font-weight: 700;
}

.index-section {
	flex-basis: 100%;
}

.index-section-title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 4px 0 16px;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.32em;
	color: var(--gold);
	text-align: center;
	overflow-wrap: break-word;
}

.index-section-title::before,
.index-section-title::after {
	content: "";
	flex: 1 1 0;
	min-width: 0;
	height: 1px;
	background: var(--border);
}

.index-books {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

div.index-book-row {
	display: contents;
}

div.index-book {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--text-primary);
	cursor: pointer;
	user-select: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px 7px 7px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background-color: var(--surface);
	box-shadow: var(--shadow-sm);
	transition: all 0.2s ease;
	white-space: nowrap;
	line-height: 1.2;
}

div.index-book:hover {
	border-color: var(--primary);
	color: var(--primary);
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}

/* The expand marker is drawn with two background bars rather than a "+"/"–"
   glyph, so it can never fall back to a missing-glyph box, and it looks the
   same in every font. */
div.index-book::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 1px solid var(--border);
	border-radius: 50%;
	color: var(--text-muted);
	background-image: linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-size: 10px 2px, 2px 10px;
	background-position: center;
	background-repeat: no-repeat;
	transition: all 0.2s ease;
}

div.index-book.open::before {
	background-color: var(--secondary);
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 10px 2px;
	border-color: var(--secondary);
	color: #fff;
}

div.index-book.open {
	border-color: var(--secondary);
	box-shadow: var(--shadow);
}

div.index-chapters {
	flex-basis: 100%;
	width: 100%;
	margin: 4px 0 18px;
	line-height: 1.5;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

div.index-chapters a {
	min-width: 42px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	background-color: var(--surface);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	font-family: 'sourceSansPro', sans-serif;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.2s ease;
	box-shadow: var(--shadow-sm);
}

div.index-chapters a:hover {
	border-color: var(--primary);
	background-color: var(--primary);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}

div.index-chapters a:active {
	transform: translateY(0);
}

/* ---------- Home page ---------- */
.home-cards {
	max-width: 46rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 8px 4px;
}

.home-card {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: 20px 24px;
}

.home-card h2 {
	margin: 0 0 12px;
	font-family: var(--font-ui);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.home-today-chapter {
	margin: 4px 0 14px;
	font-family: var(--font-scripture);
	font-size: 1.6rem;
	color: var(--text-primary);
}

.home-button {
	display: inline-block;
	border: 1px solid var(--primary);
	background-color: var(--primary);
	border-radius: 999px;
	padding: 10px 22px;
	cursor: pointer;
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	color: #fff;
	transition: all 0.2s ease;
	box-shadow: var(--shadow-sm);
}

.home-button:hover {
	background-color: var(--primary-dark);
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}

.home-continue {
	line-height: 1.6;
}

.home-continue a {
	color: var(--primary);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--border);
}

.home-continue a:hover {
	border-color: var(--primary);
}

.home-history-link {
	display: inline-block;
	margin-top: 12px;
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--primary);
	text-decoration: none;
	border-bottom: 1px solid var(--border);
}

.home-history-link:hover {
	border-color: var(--primary);
}

.home-empty {
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.92rem;
	color: var(--text-muted);
	font-style: italic;
	margin: 0;
}

.home-search-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.home-search-row input {
	flex: 1;
	min-width: 200px;
	padding: 10px 14px;
	font-size: 0.95rem;
	font-family: 'sourceSansPro', sans-serif;
	color: var(--text-primary);
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
}

.home-search-row input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.home-card .index-order {
	margin: 4px 0 14px;
}

/* ---------- Buttons ---------- */
.standardButton {
	display: inline-block;
	border: 1px solid var(--border);
	background-color: var(--surface);
	border-radius: var(--radius-sm);
	padding: 10px 20px;
	text-align: center;
	cursor: pointer;
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--text-primary);
	transition: all 0.2s ease;
	box-shadow: var(--shadow-sm);
}

.standardButton:hover {
	border-color: var(--primary);
	background-color: var(--primary);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}

/* ---------- Chapter navigator ---------- */
.chapter-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin: 10px 0 28px;
}

.chapter-nav.bottom {
	margin-top: 36px;
	margin-bottom: 8px;
}

.chapter-nav button {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 50%;
	width: 48px;
	height: 48px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	box-shadow: var(--shadow-sm);
	color: var(--text-secondary);
	flex-shrink: 0;
	position: relative;
}

.chapter-nav button .chrono-corner {
	display: none;
	position: absolute;
	bottom: 3px;
	right: 3px;
	color: var(--gold);
	pointer-events: none;
}

body.chrono-nav .chapter-nav button .chrono-corner {
	display: flex;
}

.chapter-nav button:hover {
	border-color: var(--primary);
	color: var(--primary);
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}

#chapterTitle {
	font-family: var(--font-scripture);
	font-size: 1.5em;
	font-weight: 600;
	color: var(--text-primary);
	letter-spacing: 0.04em;
	text-align: center;
	display: flex;
	align-items: center;
	gap: 16px;
	line-height: 1.3;
}

#chapterTitle .title-text {
	/* Long book names (Song of Solomon, 1 Chronicles) must wrap onto a second
	   line instead of widening the page and raising a horizontal scrollbar. */
	white-space: normal;
	overflow-wrap: break-word;
	min-width: 0;
}

/* Says the four settings behind the version tag came from a shared link, so the
   reader is not left wondering why the chapter reads unlike their own. */
#chapterTitle .version-shared {
	font-family: var(--font-ui);
	font-size: 0.55em;
	font-style: italic;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
	vertical-align: middle;
}

#chapterTitle .title-rule {
	flex: 1;
	height: 1px;
	min-width: 12px;
	background: linear-gradient(90deg, transparent, var(--gold-light));
}

#chapterTitle .title-rule:last-child {
	background: linear-gradient(90deg, var(--gold-light), transparent);
}

@media (max-width: 560px) {
	#chapterTitle .title-rule {
		display: none;
	}

	/* Scripture type is larger now, so claw back the gutters to keep the
	   line length readable on phones. */
	#body {
		padding-left: 16px;
		padding-right: 16px;
	}

	.index-order {
		gap: 12px;
	}

	.index-order-button {
		padding: 8px 0;
		font-size: 0.8rem;
		gap: 5px;
	}

	.index-section-title {
		letter-spacing: 0.14em;
		gap: 8px;
		margin: 2px 0 12px;
		justify-content: center;
	}

	.index-section-title::before,
	.index-section-title::after {
		display: none;
	}
}

/* ---------- Page turning ---------- */
#chapter.page-turn {
	height: calc(100vh - 96px);
	height: calc(100dvh - 96px);
	flex-direction: column;
	overflow: hidden;
}

#chapter.page-turn .chapter-nav.bottom,
#chapter.page-turn #chapterSpacer {
	display: none;
}

#chapter.page-turn > .chapter-nav {
	flex: 0 0 auto;
}

.page-turn-viewport {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	position: relative;
	/* horizontal drags are page turns, so don't let the browser pan with them */
	touch-action: pan-y;
	-webkit-user-select: text;
	user-select: text;
}

.page-turn-viewport #chapterText {
	height: 100%;
	column-fill: auto;
	-webkit-column-fill: auto;
	transition: transform 0.28s ease;
}

.page-turn-viewport.no-anim #chapterText {
	transition: none;
}

.page-turn-controls {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 12px 16px 14px;
}

.page-turn-btn {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-secondary);
	box-shadow: var(--shadow-sm);
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.page-turn-btn:hover {
	border-color: var(--primary);
	color: var(--primary);
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}

.page-turn-btn:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

#pageTurnDots {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	overflow: hidden;
	gap: 7px;
	max-width: 55%;
	min-height: 12px;
}

.page-turn-dot {
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--border);
	cursor: pointer;
	transition: all 0.2s ease;
}

.page-turn-dot:hover {
	background: var(--gold);
}

.page-turn-dot.active {
	background: var(--primary);
	transform: scale(1.2);
}

.page-turn-count {
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.85rem;
	color: var(--text-muted);
	white-space: nowrap;
	min-width: 3.5em;
	text-align: center;
}

/* ---------- Scripture typography ---------- */
#chapter p,
#chapter .reg1,
#chapter .indent1stline,
#chapter .indent1stlinered,
#chapter .indentred1,
#chapter .indent,
#chapter .indentred,
#chapter .tab1stline,
#chapter .calibre2 p {
	margin-bottom: 0.75rem;
	line-height: 1.55;
}

.hdg {
	font-family: var(--font-scripture);
	font-weight: 700;
	font-size: 1.2em;
	color: var(--text-primary);
	font-variant: small-caps;
	letter-spacing: 0.05em;
	margin-bottom: 0.9rem;
}

.subhdg {
	font-family: var(--font-scripture);
	font-weight: 600;
	font-size: 1.08em;
	color: var(--text-primary);
	margin-top: 1.6rem;
	margin-bottom: 0.75rem;
}

.reftext {
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.72em;
	vertical-align: super;
	margin-right: 5px;
	color: var(--secondary);
	font-weight: 600;
}

span.fn {
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.7em;
	vertical-align: super;
	margin-left: 2px;
	margin-right: 1px;
	color: var(--secondary);
	font-weight: 600;
	cursor: default;
}

.fnverse {
	font-family: 'sourceSansPro', sans-serif;
	vertical-align: super;
	font-size: 0.72em;
	color: var(--secondary);
	font-weight: 600;
}

.footnotesbot {
	font-size: 0.88em;
	color: var(--text-muted);
	font-style: italic;
}

div.fn {
	margin-top: 2.2rem;
	background: var(--surface);
	border: 1px solid var(--border-light);
	border-left: 3px solid var(--gold-light);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	padding: 1rem 1.2rem;
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.9em;
	color: var(--text-secondary);
	box-shadow: var(--shadow-sm);
}

div.fn > b {
	display: block;
	color: var(--secondary);
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	margin-bottom: 0.4rem;
}

/* The epub's footnote block contains empty spacer <p class="calibre2">s (inline
   height). They inherit .calibre2's tall padding — squash them flat. */
div.fn p.calibre2 {
	padding: 0;
	margin: 0;
	height: 0 !important;
	overflow: hidden;
}

.cross1 {
	color: var(--text-muted) !important;
	font-style: italic;
	font-weight: 400;
	font-size: 0.6em;
}

.indent1stline,
.indent1stlinered,
.indentred1 {
	margin-left: 26px;
}

.indent,
.indentred {
	margin-left: 52px;
	margin-top: 0;
	margin-bottom: 0;
}

.reg1,
.tab1stline {
	margin-bottom: 0.85rem;
	line-height: 1.55;
}

.calibre2 {
	padding: 20px 0 28px;
}

.calibre2 .hdg {
	font-size: 1.45em;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 0.6rem;
	line-height: 1.3;
}

.calibre2 .cross {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
}

.calibre2 .cross p {
	margin: 0;
	font-size: 0.88rem;
	color: var(--text-muted);
}

.spell {
	display: none;
}

/* ---------- Page headings (Home / Search / About / History) ----------
   These are app chrome, not scripture, so they keep the UI font and must
   not follow the reading font the gear menu picks. Scripture headings are
   .hdg / .subhdg, which deliberately do follow it. */
h1,
h2,
h3 {
	font-family: var(--font-ui);
	color: var(--text-primary);
	font-weight: 700;
	letter-spacing: 0.01em;
}

h1 {
	font-size: 2rem;
	margin-bottom: 1rem;
}

h2 {
	font-size: 1.6rem;
	margin-bottom: 0.75rem;
}

h3 {
	font-size: 1.15rem;
	margin-bottom: 0.5rem;
	color: var(--secondary);
	gap: 0;
}

#historyLinks h3 {
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--text-muted);
	margin: 1.4rem 0 0.5rem;
}

#historyLinks p {
	font-size: 1.05rem;
	line-height: 1.6;
}

.history-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 0.4rem;
}

.history-header h2 {
	margin: 0;
}

.history-filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'sourceSansPro', sans-serif;
}

.history-filter-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--text-muted);
}

.history-filter-select {
	padding: 4px 10px;
	border: 1px solid var(--activity-color, var(--border));
	border-radius: 999px;
	background-color: var(--activity-tint, var(--surface));
	color: var(--activity-color, var(--text-primary));
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
}

.history-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-bottom: 0.4rem;
}

.history-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.8rem;
	color: var(--text-secondary);
}

.history-legend-swatch {
	width: 12px;
	height: 12px;
	border-radius: 4px;
	background-color: var(--activity-color);
}

.history-day {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 0.5rem;
}

.history-entry {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 12px;
	border: 1.5px solid var(--activity-color);
	border-radius: 999px;
	background-color: var(--activity-tint);
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.95rem;
	line-height: 1.5;
	white-space: nowrap;
}

.history-entry a {
	color: var(--text-primary);
}

.history-entry a:hover {
	color: var(--activity-color);
}

.history-finished {
	color: var(--text-muted);
}

#historyLinks a {
	font-family: 'sourceSansPro', sans-serif;
}

/* ---------- Search ---------- */
.search-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	max-width: 560px;
}

#search input#searchInput {
	width: 100%;
	max-width: 560px;
	padding: 12px 18px;
	font-size: 1rem;
	font-family: 'sourceSansPro', sans-serif;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text-primary);
	box-shadow: var(--shadow-sm);
}

#search input#searchInput:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-status {
	margin: 14px 2px 10px;
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--gold);
	min-height: 1em;
}

.search-more {
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-muted);
	font-weight: 400;
}

.search-result {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 10px 14px;
	margin-bottom: 8px;
	border: 1px solid var(--border-light);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: all 0.2s ease;
}

.search-result:hover {
	border-color: var(--primary);
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}

.search-ref {
	font-family: var(--font-scripture);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--primary);
	white-space: nowrap;
}

.search-text {
	font-family: var(--font-scripture);
	font-size: 1.02rem;
	line-height: 1.55;
	color: var(--text-primary);
}

.search-text mark {
	background: var(--gold-light);
	color: var(--text-primary);
	border-radius: 2px;
	padding: 0 2px;
}

#search select#searchScope {
	padding: 11px 42px 11px 16px;
	font-size: 0.92rem;
	font-family: 'sourceSansPro', sans-serif;
	border: 1px solid var(--border);
	border-radius: 999px;
	background-color: var(--surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23998a6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	-webkit-appearance: none;
	appearance: none;
	color: var(--text-primary);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	max-width: 100%;
}

#search select#searchScope:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-mode {
	display: flex;
	gap: 18px;
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.92rem;
	color: var(--text-secondary);
}

.search-mode label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	user-select: none;
}

.search-mode input {
	accent-color: var(--primary);
}

#searchHistory {
	max-width: 560px;
	margin-top: 14px;
}

.search-history-heading {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--text-muted);
	margin: 0 0 8px;
}

.search-history-clear {
	background: none;
	border: none;
	padding: 0;
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.72rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
	cursor: pointer;
}

.search-history-clear:hover {
	color: var(--secondary);
}

.search-history-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.search-history-chip {
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.85rem;
	padding: 5px 12px;
	border: 1px solid var(--border-light);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text-secondary);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: all 0.2s ease;
}

.search-history-chip:hover {
	border-color: var(--primary);
	color: var(--primary);
	transform: translateY(-1px);
}

.search-history-meta {
	color: var(--text-muted);
	font-size: 0.75rem;
}

p {
	margin-bottom: 1rem;
}

address {
	margin-top: 2rem;
	margin-bottom: 2rem;
	text-align: right;
	color: var(--text-secondary);
	font-style: italic;
}

hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 32px 0;
}

/* ---------- Speed reader ---------- */
.modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: var(--shadow-xl);
	padding: 36px 40px;
	z-index: 1000;
	border-radius: var(--radius-lg);
	background-color: var(--surface);
	max-width: calc(100vw - 32px);
	border: 1px solid var(--border);
	color: var(--text-primary);
	text-align: center;
}

#speedWordFrame {
	position: relative;
	min-height: 1.2em;
	font-family: var(--font-scripture);
	font-size: 48px;
	line-height: 1.2;
}

#speedWord {
	position: absolute;
	top: 0;
	left: 50%;
	white-space: nowrap;
	will-change: transform;
}

#speedWord .orp {
	color: var(--orp);
}

.sr-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	background: var(--surface-soft);
	color: var(--text-primary);
	cursor: pointer;
	border-radius: var(--radius);
	transition: all 0.2s ease;
	box-shadow: var(--shadow-sm);
}

.sr-button:hover {
	border-color: var(--primary);
	color: var(--primary);
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}

#pausePlayBtn {
	font-size: 22px;
	width: 56px;
	height: 56px;
	margin: 24px auto 0;
	padding: 0;
}

#currentVerse {
	margin-top: 14px;
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.sr-verse-buttons {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
}

.sr-verse-buttons .sr-button {
	width: 42px;
	height: 42px;
	padding: 0;
}

/* ---------- Read to me ---------- */
.read-to-me {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	background-color: var(--surface);
	border-top: 1px solid var(--border);
	box-shadow: var(--shadow-lg);
	padding: 12px 20px;
	color: var(--text-primary);
	font-family: var(--font-ui);
}

/* The panel is pinned to the viewport, so the reading column has to be told
   how much room is left below it. The height comes from the panel itself
   (set as --rtm-panel-h by the component) because it reflows on narrow
   screens. */
body.rtm-open #body {
	padding-bottom: calc(var(--rtm-panel-h, 0px) + 16px);
}

body.rtm-open #chapter.page-turn {
	height: calc(100vh - 96px - var(--rtm-panel-h, 0px) - 16px);
	height: calc(100dvh - 96px - var(--rtm-panel-h, 0px) - 16px);
}

.rtm-head {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 760px;
	margin: 0 auto;
}

.rtm-now {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--font-scripture);
	font-size: 1.05rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rtm-close {
	flex: 0 0 auto;
	border: none;
	background: none;
	color: var(--text-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 6px 8px;
	border-radius: var(--radius-sm);
}

.rtm-close:hover {
	color: var(--text-primary);
	background: var(--surface-soft);
}

.rtm-progress {
	max-width: 760px;
	margin: 8px auto 0;
	height: 3px;
	border-radius: 2px;
	background: var(--border-light);
	overflow: hidden;
}

.rtm-progress-bar {
	height: 100%;
	width: 0;
	background: var(--primary);
	transition: width 0.25s ease;
}

.rtm-row {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	max-width: 760px;
	margin: 12px auto 0;
}

.rtm-transport {
	display: flex;
	align-items: center;
	gap: 10px;
}

.rtm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--border);
	background: var(--surface-soft);
	color: var(--text-secondary);
	border-radius: 50%;
	cursor: pointer;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.rtm-btn:hover:not(:disabled) {
	border-color: var(--primary);
	color: var(--primary);
}

.rtm-btn:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.rtm-btn-play {
	width: 52px;
	height: 52px;
	background: var(--primary);
	border-color: var(--primary);
	color: var(--surface);
}

.rtm-btn-play:hover:not(:disabled) {
	color: var(--surface);
	filter: brightness(1.12);
}

.rtm-options {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 1 1 240px;
	min-width: 0;
}

.rtm-field {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.rtm-field > span {
	white-space: nowrap;
}

.rtm-field b {
	color: var(--text-secondary);
	font-weight: 600;
	letter-spacing: 0;
}

.rtm-field select {
	max-width: 210px;
	padding: 6px 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text-primary);
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.85rem;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.rtm-field input[type='range'] {
	flex: 1 1 auto;
	min-width: 90px;
	accent-color: var(--primary);
}

.rtm-note {
	max-width: 760px;
	margin: 8px auto 0;
	font-size: 0.8rem;
	color: var(--text-muted);
}

.rtm-note:empty {
	display: none;
}

/* A refusal to read aloud, or an engine that failed to start. */
.rtm-note.rtm-note-warn {
	color: var(--woc);
	font-weight: 600;
}

/* The verse being read is marked in the text itself. It is a fixed overlay
   positioned from the verse's client rects rather than a wrapper element, so
   the chapter markup - and the word-study links built inside it - is never
   restructured. */
.rtm-marks {
	position: fixed;
	inset: 0;
	z-index: 50;
	pointer-events: none;
}

.rtm-mark {
	position: absolute;
	width: 3px;
	margin-left: -1.5px;
	border-radius: 2px;
	background-color: var(--gold);
	opacity: 0.7;
	/* the bars are reused, so this slides the rule from the verse just read to
	   the one being read instead of jumping */
	transition: top 0.35s ease, height 0.35s ease, left 0.35s ease;
}

/* A page turn or a jump scroll has to cut rather than slide. */
.rtm-marks.rtm-jump .rtm-mark {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.rtm-mark {
		transition: none;
	}
}

@media (max-width: 560px) {
	.read-to-me {
		padding: 10px 14px;
	}

	.rtm-row {
		gap: 12px;
	}

	.rtm-options {
		flex: 1 1 100%;
	}
}

/* ---------- Word lookup popup ---------- */
.word-link {
	text-decoration: underline dotted;
	cursor: pointer;
}

.word-popup {
	display: none;
	position: fixed;
	z-index: 1000;
	width: 320px;
	max-width: calc(100vw - 24px);
	background: var(--surface);
	color: var(--text-primary);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	padding: 14px 16px 16px;
	pointer-events: auto;
}

.word-popup-close {
	position: absolute;
	top: 6px;
	right: 10px;
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var(--text-muted);
	padding: 4px;
}

.word-popup-close:hover {
	color: var(--text-primary);
}

.word-popup-ref {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-top: 2px;
	margin-right: 28px;
}

.word-popup-orig {
	font-family: var(--font-scripture), 'Noto Serif Hebrew', serif;
	font-size: 26px;
	line-height: 1.3;
	margin: 10px 0 2px;
	direction: ltr;
	text-align: left;
}

.word-popup-orig[dir='rtl'] {
	text-align: right;
}

.word-popup-translit {
	font-style: italic;
	color: var(--text-secondary);
	font-size: 0.95rem;
}

.word-popup-parse {
	color: var(--text-secondary);
	font-size: 0.9rem;
	margin-top: 4px;
}

.word-popup-strong {
	color: var(--primary);
	font-size: 0.85rem;
	margin-top: 6px;
}

.word-popup-gloss {
	font-family: var(--font-scripture);
	font-size: 1.05rem;
	font-style: italic;
	line-height: 1.4;
	margin-top: 8px;
	border-top: 1px solid var(--border-light);
	padding-top: 8px;
}

/* ---------- Shared settings notice ---------- */
/* Sits in the gear menu where the four settings it stands in for would be. It
   is a notice about the page rather than a setting, so it reads as a block and
   does not light up under the pointer the way a menu row does. */
#settingsDropdown .shared-note {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 10px;
	cursor: default;
	background-color: var(--accent-soft);
	border: 1px solid var(--border-light);
	border-radius: var(--radius);
	margin: 6px 0;
}

#settingsDropdown .shared-note:hover {
	background-color: var(--accent-soft);
}

.shared-note-label {
	font-size: 0.95rem;
	color: var(--primary);
}

.shared-note-actions {
	display: flex;
	gap: 10px;
}

/* Adopt is the one to reach for when the version is to stay, so it carries the
   weight; Discard is the way back. */
#settingsDropdown .shared-note-actions button {
	flex: 1 1 0;
	justify-content: center;
	font-size: 0.9rem;
	padding: 8px 10px;
}

#settingsDropdown .shared-note-actions button:first-child {
	background-color: var(--primary);
	border-color: var(--primary);
	color: var(--surface);
}

#settingsDropdown .shared-note-actions button:first-child:hover {
	color: var(--surface);
	filter: brightness(1.12);
}

/* ---------- Share ---------- */
/* The panel is the overlay: a layer over the page that holds the backdrop and
   the sheet. */
.share-overlay {
	position: fixed;
	inset: 0;
	z-index: 1050;
}

.share-backdrop {
	position: absolute;
	inset: 0;
	background: rgb(43 36 25 / 0.45);
}

.share-sheet {
	position: absolute;
	z-index: 1100;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(520px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	padding: 20px 22px 22px;
	background-color: var(--surface);
	color: var(--text-primary);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
	font-family: var(--font-ui);
	text-align: left;
}

/* The dialog is focused when it opens so Escape and Tab land inside it; that
   is not a keyboard user's cue, so only :focus-visible draws a ring. */
.share-sheet:focus {
	outline: none;
}

.share-sheet:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.share-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.share-title {
	margin: 0;
	font-family: var(--font-brand);
	font-size: 1.3rem;
	font-weight: 400;
	color: var(--primary);
}

.share-close {
	border: none;
	background: none;
	color: var(--text-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 6px 8px;
	border-radius: var(--radius-sm);
}

.share-close:hover {
	color: var(--text-primary);
	background: var(--surface-soft);
}

.share-ref {
	margin: 16px 0 0;
	font-family: var(--font-scripture);
	font-size: 1.15rem;
	line-height: 1.35;
}

.share-tag {
	font-family: var(--font-ui);
	font-size: 0.85rem;
	color: var(--text-muted);
}

.share-note {
	margin: 6px 0 0;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--text-muted);
}

.share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* A thumb to hit, not a mouse pointer. */
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background-color: var(--surface-soft);
	color: var(--text-primary);
	font-family: inherit;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease,
		border-color 0.15s ease;
}

.share-btn:hover {
	border-color: var(--primary);
	color: var(--primary);
}

.share-btn-primary {
	width: 100%;
	margin-top: 18px;
	background-color: var(--primary);
	border-color: var(--primary);
	color: var(--surface);
	font-size: 1rem;
}

.share-btn-primary:hover {
	color: var(--surface);
	filter: brightness(1.12);
}

.share-btn-done {
	border-color: var(--primary);
	color: var(--primary);
}

.share-url-row {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.share-url {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background-color: var(--background);
	color: var(--text-secondary);
	font-family: var(--font-ui);
	/* Anything smaller and a phone zooms in when the field takes focus. */
	font-size: 1rem;
	text-overflow: ellipsis;
}

.share-url:focus {
	outline: 2px solid var(--primary);
	outline-offset: -1px;
}

.share-status {
	margin: 12px 0 0;
	min-height: 1.2em;
	font-size: 0.85rem;
	line-height: 1.2;
	color: var(--text-muted);
}

.share-status-good {
	color: var(--primary);
}

/* The sheet covers the page, so the page behind it should hold still. */
body.share-open {
	overflow: hidden;
}

@media (max-width: 560px) {
	/* A phone gets the sheet from the bottom edge, where the thumb already is,
	   and keeps clear of the home indicator. */
	.share-sheet {
		top: auto;
		bottom: 0;
		left: 0;
		transform: none;
		width: 100%;
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		border-bottom: none;
		padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
	}
}