/* ------------------------------------------------------------------ themes */

:root {
	--page: #fbfaf7;
	--panel: #ffffff;
	--sunken: #f2f0ea;
	--ink: #1d1c19;
	--ink-soft: #56534c;
	--ink-faint: #8c877d;
	--rule: #e2ded4;
	--accent: #8a5a2b;
	--accent-soft: #f0e4d4;
	--highlight: #fbf0d8;
	--shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .07);
	--reading-size: 1.125rem;
	--measure: 34rem;
	--ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
}

:root[data-theme="sepia"] {
	--page: #f6efe2;
	--panel: #fbf6ec;
	--sunken: #efe6d5;
	--ink: #3b3026;
	--ink-soft: #6a5a48;
	--ink-faint: #9d8a71;
	--rule: #e0d3ba;
	--accent: #8a5a2b;
	--accent-soft: #ecdcc4;
	--highlight: #f2e2c0;
}

:root[data-theme="dark"] {
	--page: #16171a;
	--panel: #1e2024;
	--sunken: #24262b;
	--ink: #e6e3dd;
	--ink-soft: #b0aca4;
	--ink-faint: #7d7a73;
	--rule: #33363c;
	--accent: #d9a76c;
	--accent-soft: #3a3128;
	--highlight: #3a3226;
	--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: dark) {
	:root[data-theme="auto"] {
		--page: #16171a;
		--panel: #1e2024;
		--sunken: #24262b;
		--ink: #e6e3dd;
		--ink-soft: #b0aca4;
		--ink-faint: #7d7a73;
		--rule: #33363c;
		--accent: #d9a76c;
		--accent-soft: #3a3128;
		--highlight: #3a3226;
		--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
	}
}

:root[data-size="small"] { --reading-size: 1rem; --measure: 32rem; }
:root[data-size="medium"] { --reading-size: 1.125rem; --measure: 34rem; }
:root[data-size="large"] { --reading-size: 1.3125rem; --measure: 36rem; }
:root[data-size="xlarge"] { --reading-size: 1.5rem; --measure: 38rem; }

/* ------------------------------------------------------------------- shell */

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	background: var(--page);
	color: var(--ink);
	font-family: var(--ui);
	-webkit-font-smoothing: antialiased;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
	background: none;
	border: none;
}

.topbar {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: .5rem;
	height: 3.25rem;
	padding: 0 .75rem;
	background: color-mix(in srgb, var(--page) 88%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--rule);
}

.topbar-title {
	flex: 1;
	margin: 0;
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.topbar-actions {
	display: flex;
	align-items: center;
	gap: .125rem;
}

.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 .5rem;
	border-radius: .5rem;
	color: var(--ink-soft);
	font-size: .875rem;
}

.icon-button:hover { background: var(--sunken); color: var(--ink); }

#menu-toggle { display: none; }

.layout {
	display: grid;
	grid-template-columns: 17.5rem 1fr;
	align-items: start;
}

/* ----------------------------------------------------------------- sidebar */

.sidebar {
	position: sticky;
	top: 3.25rem;
	height: calc(100vh - 3.25rem);
	overflow-y: auto;
	padding: 1rem .75rem 3rem;
	border-right: 1px solid var(--rule);
	overscroll-behavior: contain;
}

.search-box { margin-bottom: 1rem; }

.search-box input {
	width: 100%;
	padding: .5rem .625rem;
	font: inherit;
	font-size: .875rem;
	color: var(--ink);
	background: var(--panel);
	border: 1px solid var(--rule);
	border-radius: .5rem;
}

.search-box input:focus {
	outline: 2px solid var(--accent);
	outline-offset: -1px;
}

.search-hint {
	margin: .375rem .125rem 0;
	font-size: .75rem;
	line-height: 1.4;
	color: var(--ink-faint);
}

.group-heading {
	margin: 1.25rem .5rem .375rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.group-heading:first-child { margin-top: 0; }

.book-button {
	display: block;
	width: 100%;
	padding: .3125rem .5rem;
	text-align: left;
	font-size: .875rem;
	border-radius: .375rem;
	color: var(--ink-soft);
}

.book-button:hover { background: var(--sunken); color: var(--ink); }
.book-button.current { color: var(--accent); font-weight: 600; }

.chapter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
	gap: .25rem;
	padding: .5rem .5rem .75rem;
}

.chapter-grid button {
	padding: .3125rem 0;
	font-size: .8125rem;
	color: var(--ink-soft);
	background: var(--sunken);
	border-radius: .3125rem;
	text-align: center;
}

.chapter-grid button:hover { background: var(--accent-soft); color: var(--ink); }
.chapter-grid button.current { background: var(--accent); color: var(--page); font-weight: 600; }

/* --------------------------------------------------------------- scripture */

.reading {
	min-width: 0;
	padding: 2.5rem 1.5rem 6rem;
}

.chapter {
	max-width: var(--measure);
	margin: 0 auto;
	/* Jumped to by the chapter buttons: the seam lands below the bar, and above
	   the reading line in app.js that decides which chapter is being read. */
	scroll-margin-top: 4rem;
	font-family: var(--serif);
	font-size: var(--reading-size);
	line-height: 1.7;
	color: var(--ink);
}

/* Chapters run into one another, so a chapter's heading is also the seam
   between it and the chapter before: a rule, and enough of a reference to say
   where you are without looking up. The first chapter of a book announces the
   book instead. */
.chapter-heading {
	margin: 3rem 0 1.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--rule);
	font-family: var(--ui);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-faint);
	scroll-margin-top: 4rem;
}

/* Nothing above the topmost chapter to be separated from. Which chapter that is
   changes as the run grows upwards, so this follows it. */
.chapters > .chapter:first-child > .chapter-heading {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.chapter-heading.book-start {
	margin-top: 4rem;
	padding-top: 2.5rem;
}

.chapter-heading .book-name {
	display: block;
	margin-bottom: .25rem;
	font-family: var(--serif);
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
}

.chapter-heading .chapter-label { display: block; }

/* Where a chapter is asked for, and where one that would not load says so. */
.sentinel {
	max-width: var(--measure);
	margin: 0 auto;
	min-height: 1px;
}

.edge-note {
	margin: 1.5rem 0;
	font-family: var(--ui);
	font-size: .8125rem;
	line-height: 1.5;
	white-space: pre-wrap;
}

.scripture-paragraph {
	margin: 0 0 1.1em;
	text-align: left;
	hyphens: auto;
}

.scripture-stanza {
	margin: 0 0 1.3em;
	padding-left: 1.5rem;
}

.scripture-line {
	display: block;
	text-indent: -1.5rem;
}

.scripture-header {
	margin: 1.5em 0 .6em;
	font-size: .875em;
	font-style: italic;
	color: var(--ink-faint);
}

.scripture-break {
	height: 1.1em;
}

.verse-number {
	font-family: var(--ui);
	font-size: .625em;
	font-weight: 700;
	line-height: 0;
	vertical-align: .5em;
	margin-right: .15em;
	color: var(--ink-faint);
	user-select: none;
}

.verse {
	border-radius: .1875rem;
	transition: background-color .12s ease, color .18s ease;
	/* Scrolled to by a link or by the remembered position, a verse lands below
	   the sticky bar rather than behind it — and above app.js's reading line, so
	   the verse it lands on is the verse that then counts as the one being read. */
	scroll-margin-top: 5rem;
}

/* A verse only answers to a click when it has something to open: a note, or the
   editor when the reader is being served from this machine. On the published
   site the rest are text, not targets. */
.verse.selectable { cursor: pointer; }

.verse.selectable:hover { background: var(--sunken); }
.verse.selected { background: var(--highlight); }

.verse.annotated.selectable:hover { background: var(--accent-soft); }

/* ------------------------------------------------------- what has changed

   With the switch on, a verse still reading exactly as the World English Bible
   does steps back and the rewritten ones are left at full strength. The fade is
   a mix towards the page rather than a fixed grey or an opacity, so it lightens
   on a light page and darkens on a dark one from the one rule, and it does not
   touch the highlight behind a selected verse. */

.verse.unchanged {
	color: color-mix(in srgb, var(--ink) 34%, var(--page));
}

.verse.unchanged .verse-number,
.verse.unchanged .note-marker {
	color: color-mix(in srgb, var(--ink-faint) 34%, var(--page));
}

/* Selecting a faded verse is still how its note opens, and the words have to be
   readable while the panel is about them. */
.verse.unchanged.selected {
	color: var(--ink);
}

.compare-toggle.active {
	color: var(--accent);
	background: var(--accent-soft);
}

/* On for a book with nothing to compare against: the switch says so rather than
   the page quietly implying that every verse in it has been rewritten. */
.compare-toggle.warn {
	color: var(--ink-faint);
	background: none;
	text-decoration: underline dotted;
	text-underline-offset: .3em;
}

.note-marker {
	font-family: var(--ui);
	font-size: .5em;
	line-height: 0;
	vertical-align: .62em;
	margin: 0 .28em 0 -.05em;
	color: var(--accent);
	user-select: none;
	cursor: pointer;
}

/* The next and previous chapter are simply further down and further up the
   page, so the buttons that used to sit under a chapter are gone. What is left
   of that idea is the pair in the top bar, which skip a chapter at a time. */

.colophon {
	max-width: var(--measure);
	margin: 2rem auto 0;
	font-size: .75rem;
	color: var(--ink-faint);
}

.loading, .error {
	max-width: var(--measure);
	margin: 0 auto;
	font-family: var(--ui);
	font-size: .875rem;
	color: var(--ink-faint);
}

.error { color: #b4432b; }

/* ------------------------------------------------------------- note panel */

.note-panel {
	position: fixed;
	top: 3.25rem;
	right: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	width: 23rem;
	max-width: 100vw;
	height: calc(100vh - 3.25rem);
	background: var(--panel);
	border-left: 1px solid var(--rule);
	box-shadow: var(--shadow);
}

.note-panel[hidden] { display: none; }

.note-panel-head {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1rem;
	border-bottom: 1px solid var(--rule);
}

.note-panel-reference {
	flex: 1;
	font-size: .875rem;
	font-weight: 600;
	color: var(--accent);
}

.note-panel-body {
	flex: 1;
	overflow-y: auto;
	padding: 1rem 1.25rem 2.5rem;
	overscroll-behavior: contain;
}

.note-verse {
	margin: 0 0 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--rule);
	font-family: var(--serif);
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

.note-entry { margin-bottom: 1.75rem; }

.note-entry + .note-entry {
	padding-top: 1.5rem;
	border-top: 1px solid var(--rule);
}

.note-text {
	margin: 0 0 .75rem;
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--ink);
}

.note-text code {
	padding: .1em .3em;
	font-size: .875em;
	background: var(--sunken);
	border-radius: .25rem;
}

.note-text a, .note-link {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: .15em;
	cursor: pointer;
}

.note-empty {
	font-size: .875rem;
	line-height: 1.6;
	color: var(--ink-faint);
}

.note-empty button {
	margin-top: .75rem;
	padding: .3125rem .75rem;
	font-family: var(--ui);
	font-size: .8125rem;
	color: var(--ink);
	background: var(--panel);
	border: 1px solid var(--rule);
	border-radius: .375rem;
	cursor: pointer;
}

.note-empty button:hover { background: var(--sunken); }

.note-key {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: .75rem;
	padding: .625rem .75rem;
	background: var(--sunken);
	border-radius: .5rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .8125rem;
	color: var(--ink-soft);
	word-break: break-all;
}

.note-key button {
	margin-left: auto;
	padding: .25rem .5rem;
	font-family: var(--ui);
	font-size: .75rem;
	border: 1px solid var(--rule);
	border-radius: .375rem;
	background: var(--panel);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ editing

   Everything below only ever appears when the reader is served by
   reader/serve.mjs from this machine. -------------------------------------- */

.edit-toggle {
	width: auto;
	padding: 0 .5rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .02em;
}

.edit-toggle.active {
	color: var(--panel);
	background: var(--accent);
}

.editor {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.editor-field {
	display: flex;
	flex-direction: column;
	gap: .375rem;
}

.editor-label {
	display: flex;
	flex-direction: column;
	gap: .375rem;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.editor-input {
	width: 100%;
	padding: .625rem .75rem;
	font-family: var(--serif);
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--ink);
	background: var(--page);
	border: 1px solid var(--rule);
	border-radius: .5rem;
	resize: vertical;
	/* The box grows with what is typed, up to the point where it would push the
	   other box out of the panel, and scrolls beyond that. */
	max-height: 45vh;
	overflow-y: auto;
	letter-spacing: normal;
	text-transform: none;
}

.editor-input:focus {
	outline: 2px solid var(--accent);
	outline-offset: -1px;
}

.editor-hint {
	margin: 0;
	font-size: .75rem;
	line-height: 1.5;
	color: var(--ink-faint);
}

/* Only there when there is something to say — usually a refused save. An empty
   one would otherwise sit in the editor's gap as a blank row. */
.editor-status {
	margin: 0;
	font-size: .75rem;
	line-height: 1.4;
	color: var(--ink-faint);
}

.editor-status:empty { display: none; }

.editor-status.good { color: var(--accent); }

.editor-status.bad {
	flex-basis: 100%;
	white-space: pre-wrap;
	color: #b3261e;
}

:root[data-theme="dark"] .editor-status.bad { color: #f2b8b5; }

@media (prefers-color-scheme: dark) {
	:root[data-theme="auto"] .editor-status.bad { color: #f2b8b5; }
}

.editor-path {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .6875rem;
	color: var(--ink-faint);
	word-break: break-all;
}

.note-problems {
	margin-top: 1rem;
	padding: .625rem .75rem;
	border-radius: .5rem;
	background: var(--sunken);
	font-size: .75rem;
	line-height: 1.5;
	color: var(--ink-soft);
}

.scrim {
	position: fixed;
	inset: 0;
	z-index: 20;
	background: rgba(0, 0, 0, .35);
}

.scrim[hidden] { display: none; }

@media (min-width: 60.0625rem) {
	body.note-open .reading { padding-right: 24.5rem; }
}

/* -------------------------------------------------------------- small screens */

@media (max-width: 60rem) {
	#menu-toggle { display: inline-flex; }

	.layout { grid-template-columns: 1fr; }

	.sidebar {
		position: fixed;
		top: 3.25rem;
		left: 0;
		z-index: 25;
		width: 19rem;
		max-width: 85vw;
		background: var(--page);
		box-shadow: var(--shadow);
		transform: translateX(-102%);
		transition: transform .18s ease;
	}

	.sidebar.open { transform: none; }

	.reading { padding: 1.75rem 1.25rem 5rem; }

	.note-panel {
		top: auto;
		bottom: 0;
		width: 100%;
		height: 70vh;
		border-left: none;
		border-top: 1px solid var(--rule);
		border-radius: .875rem .875rem 0 0;
	}
}

@media print {
	.topbar, .sidebar, .sentinel, .note-panel, .scrim, .colophon { display: none !important; }
	.layout { display: block; }
	.reading { padding: 0; }
	.verse.annotated { text-decoration: none; }
	.verse.unchanged { color: color-mix(in srgb, var(--ink) 45%, #ffffff); }
}