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

:root {
	--page: #fbfaf7;
	--panel: #ffffff;
	--sunken: #f2f0ea;
	--ink: #1d1c19;
	--ink-soft: #56534c;
	--ink-faint: #8c877d;
	--rule: #e2ded4;
	--accent: #8a5a2b;
	--accent-soft: #f0e4d4;
	--devotion: #2e7d32;
	--devotion-soft: #e0f0e0;
	--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;
	--devotion: #2e7d32;
	--devotion-soft: #dde8d0;
	--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;
	--devotion: #66bb6a;
	--devotion-soft: #263828;
	--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;
		--devotion: #66bb6a;
		--devotion-soft: #263828;
		--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 been translated

   Showing the whole Bible around the translation, a verse that is not
   translation work steps back and the work is 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.untranslated {
	color: color-mix(in srgb, var(--ink) 34%, var(--page));
}

.verse.untranslated .verse-number,
.verse.untranslated .note-marker,
.verse.untranslated .devotion-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.untranslated.selected {
	color: var(--ink);
}

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

/* The line standing where words are not there yet. It reads as a seam in the
   page rather than as scripture: the reading typeface gives way to the
   interface one, and a rule runs out to either side of it so the eye crosses it
   as a break instead of reading it as a sentence in the text. */

.stretch {
	display: flex;
	align-items: center;
	gap: .875rem;
	max-width: var(--measure);
	margin: 2.25rem auto;
	color: var(--ink-faint);
}

.stretch::before,
.stretch::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--rule);
}

.stretch-text {
	flex: 0 1 auto;
	font-family: var(--ui);
	font-size: .75rem;
	font-style: normal;
	letter-spacing: .01em;
	text-align: center;
}

/* A stretch line already draws a rule across the column, so the chapter heading
   that follows one does not draw a second directly beneath it. */
.stretch + .chapter > .chapter-heading {
	margin-top: 1.5rem;
	padding-top: 0;
	border-top: none;
}

.stretch + .chapter > .chapter-heading.book-start {
	margin-top: 2.5rem;
}

/* Said once, above the reading, when a link landed somewhere with no work in it
   and the whole Bible was put back so that there was something to show. */
.reading-note {
	max-width: var(--measure);
	margin: 0 auto 1.5rem;
	padding: .625rem .75rem;
	border-radius: .375rem;
	background: var(--sunken);
	font-family: var(--ui);
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--ink-soft);
}

/* A fresh copy of the repository, before any of it has been translated. */
.nothing-translated {
	max-width: var(--measure);
	margin: 0 auto;
	font-family: var(--ui);
	font-size: .875rem;
	color: var(--ink-faint);
}

.nothing-translated button {
	margin-top: .75rem;
	padding: .375rem .75rem;
	border: 1px solid var(--rule);
	border-radius: .375rem;
	background: var(--panel);
	font: inherit;
	color: var(--ink);
	cursor: pointer;
}

.book-list-empty {
	margin: .5rem;
	font-size: .8125rem;
	color: var(--ink-faint);
}

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

.devotion-marker {
	font-family: var(--ui);
	font-size: .5em;
	line-height: 0;
	vertical-align: .62em;
	margin: 0 .28em 0 -.05em;
	color: var(--devotion);
	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-version {
	margin: -.75rem 0 1rem;
	font-family: var(--ui);
	font-size: .6875rem;
	font-style: italic;
	color: var(--ink-faint);
	text-transform: uppercase;
	letter-spacing: .04em;
}

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

.devotion-entry { margin-bottom: 1.5rem; }

.devotion-label {
	font-family: var(--ui);
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--devotion);
	margin: 0 0 .5rem;
}

.note-label {
	font-family: var(--ui);
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--accent);
	margin: 1rem 0 .5rem;
}

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

.verse-tooltip {
	position: absolute;
	z-index: 200;
	max-width: 22rem;
	padding: .625rem .875rem;
	background: var(--panel);
	border: 1px solid var(--rule);
	border-radius: .5rem;
	box-shadow: var(--shadow);
	font-family: var(--serif);
	font-size: .875rem;
	line-height: 1.55;
	color: var(--ink);
	pointer-events: auto;
}

.verse-tooltip[hidden] { display: none; }

.verse-tooltip-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: .75rem;
	margin-bottom: .375rem;
}

.verse-tooltip-ref {
	font-family: var(--ui);
	font-size: .75rem;
	font-weight: 600;
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: .15em;
	cursor: pointer;
}

.verse-tooltip-version {
	font-family: var(--ui);
	font-size: .625rem;
	font-style: italic;
	color: var(--ink-faint);
	text-transform: uppercase;
	letter-spacing: .04em;
	white-space: nowrap;
}

.verse-tooltip-text {
	display: block;
	color: var(--ink-soft);
}

.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 appears only where there is something to save into: this
   machine, with reader/serve.mjs behind the page, or the published site with a
   GitHub token in the browser. ---------------------------------------------- */

/* The foot of the book list on the published site: the token goes in here, and
   nothing about it is ever drawn on the page but a few characters of it. */
.edit-access {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rule);
}

.edit-access-button {
	padding: .3rem .55rem;
	font: inherit;
	font-size: .75rem;
	color: var(--ink-soft);
	background: none;
	border: 1px solid var(--rule);
	border-radius: 5px;
	cursor: pointer;
}

.edit-access-button:hover:not(:disabled) {
	color: var(--ink);
	background: var(--accent-soft);
}

.edit-access-button:disabled { opacity: .55; cursor: default; }

.edit-access-status {
	margin: .4rem 0 0;
	font-size: .7rem;
	line-height: 1.45;
	color: var(--ink-faint);
}

.edit-access-status:empty { display: none; }

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

.edit-access-status.bad {
	white-space: pre-wrap;
	color: #b3261e;
}

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

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

.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.untranslated { color: color-mix(in srgb, var(--ink) 45%, #ffffff); }
	.reading-note { display: none !important; }
}

/* ------------------------------------------------- applying a pericope

   The box a passage is pasted into, and the reading of what it would do
   before it does it. Only ever on screen where editing is on. ------------ */

.paste-button { width: auto; padding: 0 .45rem; font-size: .8rem; font-weight: 600; }

.paste-scrim {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(0, 0, 0, .38);
}

.paste-panel {
	position: fixed;
	z-index: 61;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	gap: .85rem;
	width: min(46rem, calc(100vw - 2rem));
	max-height: min(46rem, calc(100vh - 3rem));
	overflow-y: auto;
	padding: 1.1rem 1.25rem 1.25rem;
	color: var(--ink);
	background: var(--panel, var(--page));
	border: 1px solid var(--rule);
	border-radius: 10px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

.paste-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.paste-head h2 {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.paste-where {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.paste-field {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.paste-field-wide { flex: 1 1 100%; }

.paste-select {
	padding: .35rem .4rem;
	font: inherit;
	font-size: .85rem;
	text-transform: none;
	letter-spacing: normal;
	color: var(--ink);
	background: var(--page);
	border: 1px solid var(--rule);
	border-radius: 5px;
}

.paste-input {
	min-height: 11rem;
	max-height: 22rem;
	padding: .6rem .7rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .8rem;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: normal;
	tab-size: 2;
	color: var(--ink);
	background: var(--page);
	border: 1px solid var(--rule);
	border-radius: 6px;
	resize: vertical;
}

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

.paste-status {
	margin: 0;
	font-size: .78rem;
	line-height: 1.45;
	color: var(--ink-faint);
}

.paste-status:empty { display: none; }
.paste-status.good { color: var(--accent); }

.paste-status.bad {
	white-space: pre-wrap;
	color: #b3261e;
}

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

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

.paste-preview:empty { display: none; }

.paste-summary, .paste-structure, .paste-path {
	margin: 0 0 .35rem;
	font-size: .82rem;
	line-height: 1.5;
}

.paste-structure { color: var(--ink-soft); }

.paste-path {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .72rem;
	color: var(--ink-faint);
}

.paste-change {
	padding: .6rem 0;
	border-top: 1px solid var(--rule);
}

.paste-change h4 {
	margin: 0 0 .35rem;
	font-size: .8rem;
	font-weight: 600;
	color: var(--accent);
}

.paste-change-field {
	display: grid;
	grid-template-columns: 4rem 1fr;
	gap: .2rem .6rem;
	margin-bottom: .35rem;
	font-size: .82rem;
	line-height: 1.5;
}

.paste-change-label {
	grid-column: 1;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.paste-change-field > :not(.paste-change-label) { grid-column: 2; }

.paste-was, .paste-now {
	white-space: pre-wrap;
	text-decoration: none;
}

.paste-was { color: var(--ink-faint); }
.paste-now { color: var(--ink); background: var(--accent-soft); border-radius: 3px; }

.paste-change-note, .paste-change-flag {
	margin: 0;
	font-size: .72rem;
	font-style: italic;
	color: var(--ink-faint);
}

.paste-actions {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	padding-top: .25rem;
}

.paste-apply, .paste-cancel {
	padding: .4rem .9rem;
	font: inherit;
	font-size: .85rem;
	border: 1px solid var(--rule);
	border-radius: 6px;
	cursor: pointer;
}

.paste-cancel { color: var(--ink-soft); background: none; }
.paste-apply { font-weight: 600; color: var(--page); background: var(--accent); border-color: var(--accent); }
.paste-apply:disabled { opacity: .45; cursor: default; }
.paste-cancel:hover:not(:disabled) { background: var(--accent-soft); }

@media (max-width: 40rem) {
	.paste-panel { width: calc(100vw - 1rem); max-height: calc(100vh - 1.5rem); }
	.paste-change-field { grid-template-columns: 1fr; }
	.paste-change-field > :not(.paste-change-label) { grid-column: 1; }
}

/* --------------------------------------------------------------- settings */

.settings-scrim {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: rgba(0, 0, 0, .38);
}

.settings-dialog {
	position: fixed;
	z-index: 71;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	gap: .5rem;
	width: min(24rem, calc(100vw - 2rem));
	max-height: min(30rem, calc(100vh - 3rem));
	overflow-y: auto;
	padding: 1.1rem 1.25rem 1.25rem;
	color: var(--ink);
	background: var(--panel, var(--page));
	border: 1px solid var(--rule);
	border-radius: 10px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

.settings-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .5rem;
}

.settings-head h2 {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
}

.settings-body {
	display: flex;
	flex-direction: column;
	gap: .85rem;
}

.settings-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.settings-label {
	font-size: .9375rem;
	color: var(--ink);
}

.settings-value {
	font-size: .875rem;
	color: var(--ink-soft);
	text-transform: capitalize;
}

.settings-group .icon-button {
	flex-shrink: 0;
}