/* ============================================================
   Option 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;
}

/* The icon in front of each menu row. Fixed width so the labels line up with
   each other however wide a name is, and stroke-only so it takes the row's
   colour in both themes without a second set of paths. The rows carrying one
   draw their contents together at the left rather than at either end, which is
   what the menu's own rule does for the rows that hold a control. */
#dropdown > div.menu-item {
	justify-content: flex-start;
	gap: 12px;
}

#dropdown .menu-icon {
	flex: none;
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.8;
}

#dropdown > div.menu-item:hover .menu-icon {
	opacity: 1;
}

#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-plan {
	--activity-color: #0d9488;
	--activity-tint: rgb(13 148 136 / 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);
}

/* A day that has already been read: the button steps back to a muted
   outline so an unread day's blue button stands out. */
.home-button-secondary {
	border-color: var(--border);
	background-color: var(--surface);
	color: var(--text-secondary);
	box-shadow: none;
}

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

/* The daily-nudge toggle on a plan card or subscription row. A bell that glows
   when reminders are on, so the reader can see at a glance which plans nudge
   them. */
.plan-notify-toggle {
	flex: none;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 999px;
	background-color: var(--surface);
	cursor: pointer;
	font-size: 0.95rem;
	line-height: 1;
	color: var(--text-muted);
	transition: all 0.2s ease;
	box-shadow: var(--shadow-sm);
}

.plan-notify-toggle:hover {
	border-color: var(--primary);
	color: var(--primary);
}

.plan-notify-on {
	border-color: var(--primary);
	color: #fff;
	background-color: var(--primary);
}

.plan-notify-on:hover {
	background-color: var(--primary-dark);
	border-color: var(--primary-dark);
	color: #fff;
}

/* When the reminder should arrive. Sits beside the bell and only appears once
   it is on, so it is quiet until there is a reminder to set a time for. The
   browser's own time control is used rather than a built one, so it follows the
   reader's locale and picks up their own formatting. */
.plan-notify-time {
	flex: none;
	height: 2.2rem;
	padding: 0 0.45rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background-color: var(--surface);
	color: var(--text-muted);
	font-size: 0.85rem;
	font-family: inherit;
	line-height: 1;
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: all 0.2s ease;
}

.plan-notify-time:hover,
.plan-notify-time:focus {
	border-color: var(--primary);
	color: var(--primary);
	outline: none;
}

.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;
}

/* ---------- Reading plans ---------- */
.plans-page {
	max-width: 46rem;
	margin: 0 auto;
	padding: 16px 4px 48px;
}

.plans-section {
	margin-bottom: 30px;
}

.plans-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.plans-section-head h2 {
	margin: 0;
	font-size: 1.2rem;
}

.plans-intro {
	margin: 0;
	max-width: 38rem;
	color: var(--text-secondary);
	font-size: 0.98rem;
	line-height: 1.6;
}

.plans-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.plans-row {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 16px 18px;
}

/* A plan the reader is on, as opposed to one on offer: a gold rule down the
   side, which is the same accent the chapter titles use. */
.plans-row-subscription {
	border-left: 3px solid var(--gold);
}

.plans-row-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.plans-row-title {
	margin: 0;
	font-size: 1.05rem;
}

.plans-row-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.plans-tag {
	padding: 2px 9px;
	border: 1px solid var(--border);
	border-radius: 999px;
	font-family: var(--font-ui);
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
}

.plans-tag-done {
	color: var(--secondary);
	border-color: var(--gold-light);
}

.plans-progress {
	margin: 8px 0 2px;
	font-family: var(--font-ui);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text-secondary);
}

/* What the plan covers and how fast: the facts a reader weighs before
   subscribing, and the numbers the schedule is worked out from. */
.plans-plan-line {
	margin: 2px 0 0;
	font-family: var(--font-ui);
	font-size: 0.88rem;
	color: var(--text-muted);
}

/* What a plan of so many chapters a day adds up to. Smaller than the line
   above it, because it is the answer to a question rather than the facts. */
.plans-plan-length {
	margin: 2px 0 0;
	font-family: var(--font-ui);
	font-size: 0.8rem;
	color: var(--text-muted);
}

/* The chapters themselves are scripture, so they wear the reading font. */
.plans-readings {
	margin: 8px 0 0;
	font-family: var(--font-scripture);
	font-size: 1.08rem;
	line-height: 1.5;
	color: var(--text-primary);
}

.plans-empty {
	margin: 6px 0 0;
	font-family: var(--font-ui);
	font-size: 0.9rem;
	font-style: italic;
	color: var(--text-muted);
}

.plans-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

/* On a coloured button the label is the background colour, which is a light
   parchment in one theme and a near-black in the other - readable on the
   brand blue either way, where white would not be. */
.plans-primary {
	border-color: var(--primary);
	background-color: var(--primary);
	color: var(--background);
}

.plans-primary:hover {
	border-color: var(--primary-dark);
	background-color: var(--primary-dark);
	color: var(--background);
}

.plans-order-select,
.plans-form select,
.plans-form input[type='text'],
.plans-form input[type='number'],
.plans-inline-field input {
	padding: 8px 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background-color: var(--surface);
	color: var(--text-primary);
	font-family: var(--font-ui);
	font-size: 0.92rem;
}

.plans-order-select:focus,
.plans-form select:focus,
.plans-form input:focus,
.plans-inline-field input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.plans-inline-field {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-ui);
	font-size: 0.85rem;
	color: var(--text-muted);
}

.plans-note {
	font-family: var(--font-ui);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--secondary);
}

/* The way from a plan in the list to the plan itself, which is a view of it
   rather than one more thing to do to it. */
.plans-row-link {
	font-family: var(--font-ui);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--primary);
	text-decoration: none;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}

.plans-row-link:hover {
	border-color: var(--primary);
}

/* ---------- One plan, day by day ---------- */
.plan-page {
	max-width: 46rem;
	margin: 0 auto;
	padding: 16px 4px 48px;
}

.plan-page-title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 6px;
}

.plan-page-title h1 {
	margin: 0;
	font-size: 1.5rem;
}

.plan-page-back {
	font-family: var(--font-ui);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--primary);
	text-decoration: none;
	border-bottom: 1px solid var(--border);
	margin-left: auto;
}

.plan-page-back:hover {
	border-color: var(--primary);
}

.plan-days {
	margin-top: 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background-color: var(--surface);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

/* One day per row: the number and the date on the left, what is read on the
   right. Tight leading and a rule between rows, because a year of this is 365
   rows long and anything airier becomes a scroll of nothing. */
.plan-day {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding: 7px 16px;
	border-bottom: 1px solid var(--border-light);
}

.plan-day:last-child {
	border-bottom: none;
}

.plan-day-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	min-width: 12.5rem;
	flex: 1 1 12.5rem;
}

.plan-day-number {
	font-family: var(--font-ui);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--text-muted);
	white-space: nowrap;
	min-width: 3.6rem;
}

.plan-day-date {
	font-family: var(--font-ui);
	font-size: 0.85rem;
	color: var(--text-secondary);
	white-space: nowrap;
}

.plan-day-readings {
	font-family: var(--font-scripture);
	font-size: 1rem;
	line-height: 1.4;
	flex: 1 1 12rem;
	min-width: 0;
}

.plan-day-readings a {
	color: var(--primary);
	text-decoration: none;
	white-space: nowrap;
}

.plan-day-readings a:hover {
	border-bottom: 1px solid var(--primary);
}

.plan-day-sep {
	color: var(--text-muted);
}

.plan-day-rest {
	margin: 0;
	flex: 1 1 12rem;
	font-family: var(--font-ui);
	font-size: 0.85rem;
	font-style: italic;
	color: var(--text-muted);
}

/* Today is the one row the reader is asked to come back to. */
.plan-day-today {
	background-color: var(--accent-soft);
}

.plan-day-today .plan-day-number {
	color: var(--primary);
}

/* Says which plan a chapter was opened from, because the arrows either side of
   it are following that plan rather than the order of the Bible. */
.plan-reading-note {
	margin: 0 0 4px;
	padding: 7px 12px;
	border: 1px solid var(--border-light);
	border-left: 3px solid var(--gold);
	border-radius: var(--radius-sm);
	background-color: var(--surface-soft);
	font-family: var(--font-ui);
	font-size: 0.82rem;
	color: var(--text-secondary);
	text-align: center;
}

/* ---------- Building a plan ---------- */
.plans-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 18px 20px;
}

.plans-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.plans-field > label,
.plans-field-label {
	font-family: var(--font-ui);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-muted);
}

.plans-order-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.plans-choice {
	padding: 8px 16px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background-color: var(--surface);
	color: var(--text-secondary);
	font-family: var(--font-ui);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.plans-choice:hover {
	border-color: var(--primary);
	color: var(--primary);
}

.plans-choice.selected {
	border-color: var(--primary);
	background-color: var(--primary);
	color: var(--background);
}

.plans-choice.selected:hover {
	color: var(--background);
}

.plans-book-groups {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.plans-book-group {
	border: 1px solid var(--border-light);
	border-radius: var(--radius);
	margin: 0;
	padding: 10px 14px 14px;
}

.plans-book-group legend {
	padding: 0 6px;
	font-family: var(--font-ui);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
}

.plans-book-group-head {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.plans-book-group-head .plans-choice {
	padding: 4px 12px;
	font-size: 0.82rem;
}

.plans-book-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
	gap: 4px 10px;
}

.plans-book {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 4px;
	border-radius: var(--radius-sm);
	font-family: var(--font-ui);
	font-size: 0.9rem;
	color: var(--text-primary);
	cursor: pointer;
}

.plans-book:hover {
	background-color: var(--surface-soft);
}

.plans-book input {
	margin: 0;
}

.plans-pace-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.plans-radio {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-ui);
	font-size: 0.92rem;
	color: var(--text-primary);
	cursor: pointer;
}

.plans-radio input[type='number'] {
	width: 5.5rem;
}

.plans-summary {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 0.9rem;
	color: var(--text-secondary);
}

.plans-form-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.plans-form-error {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 0.9rem;
	color: var(--woc);
}

/* ---------- Plans on the home page ---------- */
.plans-card-link {
	margin-top: 0;
}

.home-plans {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.plan-card {
	padding: 12px 14px;
	border: 1px solid var(--border-light);
	border-radius: var(--radius);
	background-color: var(--surface-soft);
}

.plan-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.plan-card-name {
	font-family: var(--font-ui);
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--text-primary);
}

.plan-card-tag {
	padding: 1px 8px;
	border: 1px solid var(--border);
	border-radius: 999px;
	font-family: var(--font-ui);
	font-size: 0.66rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
}

.plan-card-progress {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
}

.plan-card-bar {
	flex: 1;
	min-width: 40px;
	height: 6px;
	border-radius: 999px;
	background-color: var(--border-light);
	overflow: hidden;
}

.plan-card-bar-fill {
	height: 100%;
	background-color: var(--primary);
	border-radius: 999px;
}

.plan-card-progress-text {
	font-family: var(--font-ui);
	font-size: 0.82rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--text-secondary);
}

.plan-card-readings {
	margin-top: 6px;
	font-family: var(--font-scripture);
	font-size: 1rem;
	line-height: 1.45;
	color: var(--text-primary);
}

.plan-card-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}

/* The whole plan from this subscription, beside the button that opens today. */
.home-plan-link {
	font-family: var(--font-ui);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--primary);
	text-decoration: none;
	border-bottom: 1px solid var(--border);
}

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

.plan-card-actions .home-button {
	padding: 7px 18px;
	font-size: 0.88rem;
}

/* ---------- 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;
}

/* The same corner, marking a chapter being read through a plan. It is shown
   per arrow rather than for both at once: an arrow carries the mark only when
   there is a step in that direction inside the plan's day, so it does not
   promise a move the plan cannot make. */
.chapter-nav button .plan-corner {
	display: none;
	position: absolute;
	bottom: 3px;
	right: 3px;
	color: var(--gold);
	pointer-events: none;
}

.chapter-nav button.plan-step-left .plan-corner,
.chapter-nav button.plan-step-right .plan-corner {
	display: flex;
}

/* A plan step in either direction hides the clock on that arrow, since the
   arrows are following the plan and the clock would be describing something
   else. Body prefixes the rule so it outranks the chrono-nav show rule below. */
body .chapter-nav button.plan-step-left .chrono-corner,
body .chapter-nav button.plan-step-right .chrono-corner {
	display: none;
}

.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.85em;
	vertical-align: super;
	margin-left: 2px;
	margin-right: 1px;
	color: var(--secondary);
	font-weight: 600;
	cursor: default;
}

/* A letter in the text opens its note, but only while the notes are on screen.
   They are hidden together, so a pointer cursor on a marker the reader cannot
   click would be promising something that is not there.

   They also have to be findable. A superscript is a small thing in the middle
   of a line of text, and a finger cannot be asked to hit one at reading size,
   so the target is widened with the space the line leaves above and below it.
   Padding on an inline box is not part of the line it sits in, so nothing in
   the text moves; it is only claimed where there was already nothing to read.

   Nothing else marks these out the way a word link or a search highlight does.
   A note is an aside to the reading, and the letter only needs to be as
   prominent as being tappable, not as prominent as being important. */
body.fn-on span.fn {
	cursor: pointer;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
}

/* Nothing is claimed either side of the letter. The width a reader could have
   here belongs to the words: the next word starts about 6px away, so any reach
   worth the name takes the last letter of the word in front of it out of the
   word lookup. The height is the half that is free, and it is the half a
   fingertip runs out of first on a superscript, so that is where this spends
   itself. */

.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;
}

/* ---------- Highlights ---------- */
/* The words a search result or a word study sent the reader here for, marked in
   the chapter they land on. A tint behind the text rather than the browser's
   yellow, so a marked chapter still reads as scripture. */
.chapter-hl {
	background: var(--gold-light);
	color: inherit;
	border-radius: 3px;
	padding: 0 1px;
	/* a mark that falls over a line break is tinted on both lines, not only the
	   first */
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* The way back to unmarked text. Fixed to the viewport, because the chapter
   scrolls under it and in page turning mode does not scroll at all. */
#clearHighlights {
	position: fixed;
	right: 14px;
	bottom: 14px;
	z-index: 60;
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background-color: var(--surface);
	color: var(--text-secondary);
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.82rem;
	font-weight: 600;
	box-shadow: var(--shadow);
	cursor: pointer;
}

#clearHighlights:hover {
	border-color: var(--primary);
	color: var(--primary);
}

/* The read to me panel is pinned to the bottom of the screen too, so the button
   sits above it rather than under it. */
body.rtm-open #clearHighlights {
	bottom: calc(var(--rtm-panel-h, 0px) + 14px);
}

/* ---------- Reference jump ----------
   A field to type a reference into, at the top of both lists of chapters to go
   to: the index page and the home page's chapter picker. The answers sit under
   it rather than over the books, so the field never covers the list it is
   meant to serve. */
.ref-jump {
	flex-basis: 100%;
	position: relative;
	margin: 0 0 14px;
}

#homePicker .ref-jump {
	flex-basis: auto;
	margin: 0 0 14px;
}

input.ref-jump-input {
	width: 100%;
	max-width: 420px;
	padding: 11px 18px;
	font-size: 1rem;
	font-family: var(--font-ui);
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text-primary);
	box-shadow: var(--shadow-sm);
}

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

.ref-jump-list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	margin-top: 8px;
	max-height: 320px;
	overflow-y: auto;
}

.ref-jump-option {
	font-family: var(--font-scripture);
	font-size: 1rem;
	padding: 7px 14px;
	border: 0;
	border-radius: var(--radius);
	background: none;
	color: var(--text-primary);
	cursor: pointer;
	text-align: left;
}

.ref-jump-option:hover,
.ref-jump-option.selected {
	background: var(--surface-soft);
	color: var(--primary);
}

/* ---------- 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;
}

/* The way through to the page for this word, across the foot of the popup.
   Words the tables leave without a Strong's number have no page, and the
   button is hidden for those. */
.word-popup-study {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 9px 10px;
	background: none;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--primary);
	font-family: var(--font-ui);
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.word-popup-study:hover {
	background: var(--accent-soft);
	border-color: var(--primary);
}

/* ---------- Footnote popup ---------- */
/* The word popup's card again, with the note where the gloss is: a letter and
   a reference above, the text below. The shell and the close button and the
   ref line are the .word-popup classes and are not restated here. */
.footnote-popup {
	width: 340px;
}

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

.footnote-popup-text {
	font-family: var(--font-scripture);
	font-size: 1.05rem;
	line-height: 1.45;
	margin-top: 8px;
	border-top: 1px solid var(--border-light);
	padding-top: 8px;
}

/* The alternative readings the BSB italicises come across as the markup they
   were, so they read as the block at the foot of the chapter reads rather
   than as a run of emphasis. */
.footnote-popup-text i {
	color: var(--text-secondary);
}

/* ---------- Word study page ---------- */
/* App chrome, so the UI font; the script and the English words are set back to
   the reading font where they belong. */
.word-page {
	font-family: var(--font-ui);
	max-width: 44rem;
	margin: 0 auto;
	padding-bottom: 40px;
}

.word-page-bar {
	margin-bottom: 14px;
}

.word-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px 8px 10px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--text-secondary);
	font-family: var(--font-ui);
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: all 0.2s ease;
}

.word-back:hover {
	color: var(--primary);
	border-color: var(--primary);
	transform: translateY(-1px);
}

.word-status {
	font-size: 0.95rem;
	color: var(--text-muted);
	margin-bottom: 12px;
}

.word-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 20px 22px;
	margin-bottom: 8px;
}

.word-headword {
	font-family: var(--font-scripture), 'Noto Serif Hebrew', serif;
	font-size: 2.6rem;
	line-height: 1.35;
	margin: 0;
	word-break: break-word;
}

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

.word-transliteration {
	font-family: var(--font-scripture);
	font-size: 1.15rem;
	font-style: italic;
	color: var(--text-secondary);
	margin: 2px 0 10px;
}

.word-meta,
.word-stats {
	margin: 0 0 4px;
	font-size: 0.9rem;
	color: var(--text-muted);
}

.word-strong {
	font-weight: 700;
	color: var(--primary);
}

.word-dot {
	margin: 0 8px;
	opacity: 0.6;
}

.word-origin {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 14px 0 4px;
	font-size: 0.9rem;
	color: var(--text-muted);
}

.word-origin-link {
	background: var(--accent-soft);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	padding: 5px 12px;
	color: var(--primary);
	font-family: var(--font-ui);
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
}

.word-origin-link:hover {
	border-color: var(--primary);
}

/* Strong's own entry for the number, in the card: the headword it is listed
   under, its transliteration and its pronunciation. A definition list because
   that is what it is - pairs of names and values. */
.word-dictionary {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 16px;
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--border-light);
}

.word-dictionary dt {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--text-muted);
	align-self: center;
}

.word-dictionary dd {
	margin: 0;
	font-family: var(--font-scripture);
	font-size: 1.05rem;
	color: var(--text-primary);
}

.word-dictionary dd[dir='rtl'] {
	text-align: right;
	unicode-bidi: isolate;
}

/* A Strong's number inside a definition or a derivation: a link to that word's
   own page. */
.word-ref {
	font-variant-numeric: tabular-nums;
	color: var(--primary);
	text-decoration: none;
	border-bottom: 1px dotted var(--primary-light);
}

.word-ref:hover {
	color: var(--primary-dark);
	border-bottom-style: solid;
}

.word-section {
	margin-top: 30px;
}

.word-section h2 {
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--text-muted);
	margin-bottom: 12px;
}

.word-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.word-count {
	font-size: 0.85rem;
	color: var(--text-muted);
}

/* Strong's entry itself: the real definition, kept a size above the notes
   because it is what the reader came for. */
.word-definition-strong {
	font-size: 1.12rem;
	line-height: 1.65;
	color: var(--text-primary);
	margin: 0 0 4px;
}

/* What the BSB does with the word, under the definition rather than instead of
   it: a second answer, from this translation rather than from a dictionary. */
.word-usage {
	margin-top: 14px;
	padding: 12px 14px;
	background: var(--surface-soft);
	border-radius: var(--radius-sm);
}

.word-usage-text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--text-secondary);
}

.word-usage-label {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--text-muted);
	margin-right: 6px;
}

.word-definition-main {
	font-family: var(--font-scripture);
	font-size: 1.15rem;
	font-style: italic;
	color: var(--primary);
}

.word-derivation {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--text-primary);
}

/* The dictionary is someone else's work under CC-BY-SA, so the page that quotes
   it says where it came from. */
.word-credit {
	margin: 12px 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--text-muted);
}

.word-note {
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--text-muted);
	margin: 10px 0 0;
}

/* One row per English rendering: the words, a bar for their share, the count.
   Rows that still have verses are buttons, so the whole row is the target. */
.word-rendering {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	background: none;
	font-family: var(--font-ui);
	font-size: 1rem;
	color: var(--text-primary);
	cursor: pointer;
	text-align: left;
	width: 100%;
	transition: background-color 0.15s ease;
}

.word-rendering:hover {
	background: var(--surface-soft);
}

.word-rendering.selected {
	background: var(--accent-soft);
	border-color: var(--primary);
}

.word-rendering.plain {
	cursor: default;
	opacity: 0.75;
}

.word-rendering.plain:hover {
	background: none;
}

.word-rendering-text {
	font-family: var(--font-scripture);
	font-style: italic;
	flex: 0 1 auto;
	min-width: 40%;
}

.word-rendering-bar {
	flex: 1 1 auto;
	height: 6px;
	border-radius: 3px;
	background: var(--surface-soft);
	overflow: hidden;
}

.word-rendering-fill {
	display: block;
	height: 100%;
	background: var(--secondary);
}

.word-rendering-count {
	flex: 0 0 auto;
	font-size: 0.85rem;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

/* The renderings past the first few, folded away: a common word has hundreds
   of them and they would bury the verses. */
.word-more {
	margin-top: 4px;
	border-top: 1px solid var(--border-light);
	padding-top: 4px;
}

.word-more-summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	color: var(--primary);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.word-more-summary::-webkit-details-marker {
	display: none;
}

.word-more-summary::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s ease;
}

.word-more[open] .word-more-summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.word-more-summary:hover {
	background: var(--surface-soft);
}

/* The row is the button, so it holds no text of its own: it is a wide, short
   hit area over the row rather than a label inside it. */
.word-rendering-choose {
	position: absolute;
	inset: 0;
	background: none;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	padding: 0;
}

.word-rendering-choose:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 1px;
}

.word-forms {
	margin-bottom: 18px;
}

.word-forms h3 {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--text-muted);
	margin: 0 0 8px;
}

.word-form-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.word-form-list li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	background: var(--surface);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	padding: 6px 10px;
	font-size: 1rem;
}

.word-form-list li[dir='rtl'] {
	text-align: right;
}

.word-form-text[dir='rtl'] {
	direction: rtl;
	unicode-bidi: isolate;
}

.word-form-text {
	font-family: var(--font-scripture);
}

.word-form-list .word-form-code .word-form-text {
	font-family: var(--font-ui);
	font-size: 0.9rem;
	color: var(--text-secondary);
}

.word-form-count {
	font-size: 0.78rem;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

.word-filter {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background: var(--accent-soft);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	padding: 8px 12px;
	margin: 0 0 12px;
	font-size: 0.9rem;
}

.word-filter-label {
	font-family: var(--font-scripture);
	font-style: italic;
}

.word-filter-clear {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 4px 12px;
	color: var(--primary);
	font-family: var(--font-ui);
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

/* One closed list per book, opened on demand: a common word has thousands of
   references and rendering them all at once would swamp the page. */
.word-book {
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	background: var(--surface);
	margin-bottom: 8px;
	overflow: hidden;
}

.word-book-name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
	list-style: none;
	user-select: none;
}

.word-book-name::-webkit-details-marker {
	display: none;
}

.word-book-name::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--text-muted);
	border-bottom: 2px solid var(--text-muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s ease;
}

.word-book[open] .word-book-name::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.word-book-name:hover {
	color: var(--primary);
}

.word-book-count {
	font-size: 0.82rem;
	color: var(--text-muted);
	font-weight: 400;
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}

.word-book-verses {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 14px 14px;
}

.word-verse {
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 4px 9px;
	color: var(--text-primary);
	font-family: var(--font-ui);
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
	transition: all 0.15s ease;
}

.word-verse:hover {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

@media (max-width: 560px) {
	.word-headword {
		font-size: 2.1rem;
	}

	.word-card {
		padding: 16px;
	}

	.word-rendering-text {
		min-width: 30%;
	}

	.word-rendering-bar {
		display: none;
	}

	/* Without the bar there is nothing holding the count to the right, so it
	   lines up as a column of its own instead of trailing each word. */
	.word-rendering-count {
		margin-left: auto;
	}
}

/* ---------- 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));
	}
}
/* Why a reminder did not switch on. The bell used to flicker back off with
   no explanation; this is the small, temporary explanation in its place. */
.plan-notify-error {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	transform: translateX(-50%);
	z-index: 1000;
	max-width: min(28rem, calc(100vw - 2rem));
	padding: 0.8rem 1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-md, 0.5rem);
	background: var(--surface);
	box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.18));
	color: var(--text);
	font-size: 0.9rem;
	text-align: center;
}

/* Whether this browser is listening for plan reminders at all. Deliberately
   quiet: it is a note for when the bells do not behave, not a badge shouting
   at a reader who has not asked anything. */
.push-status {
	margin: 0.25rem 0 0.75rem;
	color: var(--text-muted);
	font-size: 0.85rem;
}

/* ---------- Slash jump (global quick open) ---------- */
.slash-jump {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.slash-jump[hidden] {
	display: none;
}

.slash-jump-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.slash-jump-dialog {
	position: relative;
	width: min(90vw, 560px);
	background-color: var(--surface, #fff);
	border: 1px solid var(--border, #ccc);
	border-radius: 12px;
	padding: 20px 22px 18px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.slash-jump-title {
	margin: 0 0 12px;
	font-size: 1.15rem;
	font-weight: 600;
}

.slash-jump-input {
	width: 100%;
	font-size: 1.1rem;
	padding: 10px 12px;
	box-sizing: border-box;
	border: 1px solid var(--border, #ccc);
	border-radius: 8px;
}

.slash-jump-hint {
	margin: 10px 0 0;
	font-size: 0.85rem;
	color: var(--text-muted, #666);
}

.slash-jump-status {
	margin: 10px 0 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--primary, #2a6fdb);
	min-height: 1.2em;
}

#highlightNav button {
	padding: 8px 14px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background-color: var(--surface);
	color: var(--text-secondary);
	font-family: 'sourceSansPro', sans-serif;
	font-size: 0.82rem;
	font-weight: 600;
	box-shadow: var(--shadow);
	cursor: pointer;
}

#highlightNav button:hover {
	border-color: var(--primary);
	color: var(--primary);
}

body.rtm-open #highlightNav {
	bottom: calc(var(--rtm-panel-h, 0px) + 70px);
}

#highlightNav {
	display: flex;
	gap: 8px;
	align-items: center;
}

#highlightNav #clearHighlights {
	position: static;
}

.search-match-position {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--text-secondary);
	min-width: 2.5em;
	text-align: center;
}

mark.chapter-hl-current {
	background-color: #bcd7ff;
	color: #10233f;
	box-shadow: 0 0 0 1px #5b8def;
}

#backToSearchResults {
	background-color: var(--surface);
	border: none;
	box-shadow: none;
	padding: 4px 6px;
	color: var(--primary);
	text-decoration: underline;
	cursor: pointer;
}

#backToSearchResults:hover {
	background-color: var(--surface);
	color: var(--primary);
}