/* ==========================================================================
 * Reader — long-form/Bible reading surface
 * ========================================================================== */
/* Bible/long-form Reader: full-height squircle, 14.0625vw sticky paper-cut picker, text scrolls beneath it. */

.-bible-page {
	width: 93.75vw;
	height: calc(100dvh - 28.125vw);
	min-height: 125vw;
	position: relative;
	overflow: hidden;
	clip-path: var(--squircle);
	background: #FFFDF9;
	color: #342D29;
}

.-bible-picker {
	top: 0;
	z-index: 12;
	width: 100%;
	height: 14.0625vw;
	display: grid;
	grid-template-columns: 1.3fr .72fr .9fr;
	gap: 1.5625vw;
	position: absolute;
	padding: 1.5625vw;
	background: #FFFDF9;
	box-shadow: 0 2.1875vw 4.6875vw rgb(75 52 43 / 16%);
}

.-reader-select {
	min-width: 0;
	height: 10.9375vw;
	position: relative;
	display: flex;
	align-items: center;
	isolation: isolate;
	overflow: visible;
	background: #0000;
}

.-reader-select::before {
	inset: 0;
	content: "";
	z-index: -1;
	position: absolute;
	clip-path: var(--squircle);
	background: color-mix(in srgb,var(--app-theme) 36%,#fff);
}

.-reader-select-label {
	display: none;
}

.-reader-select-value {
	flex: 1;
	min-width: 0;
	padding: 0 1.25vw 0 3.125vw;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #3B312D;
	font-size: 3.125vw;
	font-weight: 900;
}

.-form-dropdown-chevron,
.-reader-select .material-symbols-rounded {
	display: grid;
	aspect-ratio: 1/1;
	place-items: center;
	flex: none;
	color: var(--app-accent);
	font-size: 6.25vw;
	background: var(--field-surface);
	margin: 1.5625vw;
	height: -webkit-fill-available;
	border-radius: 50%;
	width: 9.375vw;
}

.-reader-select-menu {
	left: 0;
	right: 0;
	top: calc(100% + 1.5625vw);
	z-index: 50;
	max-height: 78.125vw;
	display: none;
	position: absolute;
	overflow: hidden auto;
	padding: 1.5625vw;
	clip-path: var(--squircle);
	background: rgb(255 255 255 / 82%);
	backdrop-filter: blur(4.6875vw);
	box-shadow: 0 2.5vw 6.25vw rgb(62 44 36 / 18%);
}

.-reader-select.---open {
	overflow: visible;
}

.-reader-select.---open .-reader-select-menu {
	display: block;
}

.-reader-select-option {
	min-height: 11.25vw;
	display: flex;
	align-items: center;
	padding: 0 3.125vw;
	color: #3B312D;
	font-size: 3.125vw;
	font-weight: 800;
	clip-path: var(--squircle);
}

.-reader-select-option.---active {
	color: #fff;
	background: var(--app-accent);
}

.-bible-text {
	width: 100%;
	height: 100%;
	overflow: hidden auto;
	padding: 18.75vw 5vw 12.5vw;
	scroll-behavior: smooth;
}

.-bible-reference {
	margin: 0 0 3.125vw;
	color: var(--app-accent);
	font-size: 3.125vw;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .3125vw;
}

.-bible-translation {
	margin: -1.5625vw 0 5vw;
	color: #806F66;
	font-size: 3.125vw;
	font-weight: 700;
}

.-bible-verse {
	display: flex;
	gap: 1.5625vw;
	margin: 0 0 2.5vw;
	align-items: flex-start;
}

.-bible-verse-num {
	width: 6.25vw;
	flex: none;
	padding-top: .625vw;
	color: var(--app-accent);
	font-size: 3.125vw;
	font-weight: 900;
	text-align: right;
}

.-bible-verse-copy {
	flex: 1;
	min-width: 0;
	font: 500 4.375vw/1.86 Georgia,"Times New Roman",serif;
	user-select: text;
}

.-bible-word {
	display: inline;
	cursor: text;
	border-radius: 1.25vw;
}

.-reader-highlight {
	color: inherit;
	background: rgb(232 198 109 / 58%);
}

.-reader-selection-tools {
	left: 0;
	top: 0;
	z-index: 99999;
	display: flex;
	gap: 1.5625vw;
	position: fixed;
	padding: 1.5625vw;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%,1.5625vw) scale(.94);
	clip-path: var(--squircle);
	background: rgb(52 43 39 / 88%);
	backdrop-filter: blur(3.125vw);
	transition: opacity .18s,transform .22s;
}

.-reader-selection-tools.---show {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%,0) scale(1);
}

.-reader-selection-tool {
	width: 10.9375vw;
	height: 10.9375vw;
	display: grid;
	place-items: center;
	color: #fff;
	clip-path: var(--squircle);
	background: rgb(255 255 255 / 12%);
}

.-reader-selection-tool .material-symbols-rounded {
	font-size: 6.25vw;
}

.-reader-selection-tools.---note-mode {
	width: min(87.5vw, 420px);
	padding: 3.125vw;
	background: rgb(52 43 39 / 92%);
}

.-reader-selection-note {
	width: 100%;
	display: flex;
	gap: 2.1875vw;
	flex-flow: column;
}

.-reader-selection-note textarea {
	width: 100%;
	min-height: 25vw;
	padding: 3.125vw;
	border: 0;
	outline: 0;
	resize: none;
	color: var(--app-color);
	font: 600 3.4375vw/1.5 var(--app-font);
	clip-path: var(--squircle);
	background: var(--field-surface);
}

.-reader-selection-note textarea:focus {
	background: var(--field-focus);
}

.-reader-selection-note-actions {
	display: flex;
	gap: 1.5625vw;
}

.-reader-selection-note-cancel,
.-reader-selection-note-save {
	flex: 1;
	min-height: 10.9375vw;
	display: grid;
	place-items: center;
	font-size: 3.125vw;
	font-weight: 900;
	clip-path: var(--squircle);
}

.-reader-selection-note-cancel {
	color: #fff;
	background: rgb(255 255 255 / 12%);
}

.-reader-selection-note-save {
	color: #fff;
	background: var(--app-accent);
}

.-reader-tools-intro,
.-reader-empty {
	margin: 0 3.125vw;
	padding: 4.6875vw;
	color: var(--app-muted);
	font-size: 3.125vw;
	font-weight: 650;
	line-height: 1.55;
	clip-path: var(--squircle);
	background: #fff;
}

.-reader-tools-intro {
	display: grid;
	grid-template-columns: 12.5vw 1fr;
	gap: 1.5625vw 3.125vw;
	align-items: center;
}

.-reader-tools-intro > .material-symbols-rounded {
	width: 12.5vw;
	height: 12.5vw;
	display: grid;
	grid-row: 1/3;
	place-items: center;
	color: var(--app-accent);
	font-size: 7.5vw;
	clip-path: var(--squircle);
	background: var(--dimmer);
}

.-reader-tools-intro b {
	align-self: end;
	color: var(--app-color);
	font-size: 4.375vw;
}

.-reader-tools-intro small {
	align-self: start;
	font-size: 3.125vw;
	font-weight: 700;
}

.-reader-tool-card {
	margin: 0 3.125vw 3.125vw;
	padding: 4.6875vw;
	clip-path: var(--squircle);
	background: #fff;
}

.-reader-tool-card b {
	display: block;
	font-size: 3.4375vw;
}

.-reader-tool-card span {
	display: block;
	margin-top: .9375vw;
	color: var(--app-muted);
	font-size: 3.125vw;
	font-weight: 700;
}

.-reader-tool-card p {
	margin: 1.5625vw 0 0;
	color: var(--app-muted);
	font-size: 3.125vw;
	line-height: 1.5;
}

.-reader-tool-card textarea {
	width: 100%;
	min-height: 25vw;
	margin-top: 3.125vw;
	padding: 3.125vw;
	resize: none;
	border: 0;
	outline: 0;
	color: var(--app-color);
	font: 600 3.125vw/1.5 var(--app-font);
	clip-path: var(--squircle);
	background: var(--widget-item-background);
}

.-reader-note-save {
	min-height: 10.9375vw;
	margin-top: 2.1875vw;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 3.125vw;
	font-weight: 900;
	clip-path: var(--squircle);
	background: var(--app-accent);
}

.-reader-loading {
	min-height: 62.5vw;
	display: flex;
	gap: 3.125vw;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	color: var(--app-muted);
	font-size: 3.125vw;
	font-weight: 800;
}

.-reader-cache-note {
	width: fit-content;
	margin: 0 0 3.125vw;
	padding: 1.5625vw 3.125vw;
	clip-path: var(--squircle);
	color: var(--app-accent);
	background: color-mix(in srgb, var(--app-theme) 55%, #fff 45%);
	font-size: 3.125vw;
	font-weight: 900;
}