/**
 * Healing Bookshelf: one wooden shelf per year, a leather spine per book,
 * and the dialog the book opens in. Fonts and color tokens come from form.css.
 * Only transform and opacity are animated.
 */

.hb-shelf,
.hb-dialog {
	--hb-font-display: "Uncial Antiqua", Palatino, "Palatino Linotype", serif;
	--hb-font-text: "IM Fell English", Georgia, "Times New Roman", serif;
	--hb-parchment: #f3e6c8;
	--hb-ink: #3a2a1a;
	--hb-accent: #3d5344;
	--hb-gold: #8d7040;
	--hb-wood: #5a3a22;
	--hb-wood-deep: #2e1d10;
	--hb-wood-light: #7a5233;
	--hb-brass: #d9b46a;
}

.hb-shelf {
	max-width: 64rem;
	margin: 2rem auto;
	color: var(--hb-ink);
	font-family: var(--hb-font-text);
}

.hb-shelf-head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	justify-content: space-between;
}

.hb-shelf-title {
	margin: 0;
	font-family: var(--hb-font-display);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 400;
	line-height: 1.15;
	color: var(--hb-ink);
}

.hb-shelf-picker {
	display: flex;
	gap: 0.6rem;
	align-items: center;
}

.hb-shelf-picker[hidden],
.hb-shelf-error[hidden],
.hb-dialog[hidden],
.hb-dialog-error[hidden] {
	display: none !important;
}

.hb-shelf-label {
	font-size: 1.1rem;
}

.hb-shelf .hb-shelf-select {
	min-height: 44px;
	min-width: 7rem;
	padding: 0.3rem 2rem 0.3rem 0.75rem;
	font-family: var(--hb-font-display);
	font-size: 1.1rem;
	color: var(--hb-ink);
	background-color: var(--hb-parchment);
	border: 1px solid rgba(58, 42, 26, 0.45);
	border-radius: 3px;
}

.hb-shelf .hb-shelf-select:focus-visible {
	outline: 2px solid var(--hb-accent);
	outline-offset: 2px;
}

.hb-shelf-intro {
	margin: 0.5rem 0 0;
	font-size: 1.1rem;
}

.hb-shelf-status {
	min-height: 1.5em;
	line-height: 1.5;
	margin: 0.35rem 0 0.5rem;
	font-style: italic;
	color: #5a4632;
}

.hb-shelf-notice {
	max-width: 64rem;
	margin: 1rem auto;
	padding: 0.75rem 1rem;
	font-family: var(--hb-font-text, Georgia, serif);
	color: #6e3228;
	background: #f7ecd6;
	border-left: 4px solid #6e3228;
}

.hb-shelf-error {
	margin: 0 0 1rem;
	padding: 1rem 1.25rem;
	background: #f7ecd6;
	border: 1px solid rgba(110, 50, 40, 0.45);
	border-radius: 4px;
}

.hb-shelf-error p,
.hb-dialog-error p {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
	color: #6e3228;
}

/* The case: a dark back panel, the row of books, and the board under them. */

.hb-shelf-case {
	position: relative;
	padding: 1.25rem 1rem 0;
	border: 0.65rem solid var(--hb-wood);
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
	background-color: var(--hb-wood-deep);
	background-image:
		var(--hb-shelf-texture, none),
		linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 22%),
		repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.025) 0 2px, rgba(0, 0, 0, 0.05) 2px 7px, rgba(255, 255, 255, 0.02) 7px 11px),
		linear-gradient(180deg, #3a2414 0%, var(--hb-wood-deep) 100%);
	background-size: cover, auto, auto, auto;
	box-shadow:
		inset 0 10px 18px rgba(0, 0, 0, 0.45),
		inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.hb-shelf-row {
	display: grid;
	grid-template-columns: repeat(12, minmax(3rem, 1fr));
	gap: 0.3rem;
	align-items: end;
	height: 15rem;
	margin: 0;
	padding: 0 0.25rem;
	list-style: none;
}

.hb-shelf-row > li {
	margin: 0;
	padding: 0;
}

.hb-slot {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 100%;
}

.hb-shelf-board {
	position: relative;
	height: 1.15rem;
	margin: 0 -1.65rem;
	border-radius: 2px;
	background-color: var(--hb-wood);
	background-image:
		var(--hb-shelf-texture, none),
		linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0.25) 100%),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 3px, rgba(255, 255, 255, 0.04) 3px 9px, rgba(0, 0, 0, 0.03) 9px 14px),
		linear-gradient(180deg, var(--hb-wood-light) 0%, var(--hb-wood) 100%);
	background-size: cover, auto, auto, auto;
	box-shadow: 0 8px 14px rgba(0, 0, 0, 0.35);
}

.hb-shelf-message {
	margin: 1.25rem 0 0;
	font-size: 1.15rem;
	text-align: center;
	color: var(--hb-ink);
}

/* Spines. Size and leather come from inline custom properties. */

.hb-shelf .hb-spine,
.hb-shelf .hb-spine:hover,
.hb-shelf .hb-spine:focus,
.hb-shelf .hb-spine:active,
.hb-shelf .hb-spine:disabled {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: var(--hb-spine-w, 3rem);
	min-width: 44px;
	height: var(--hb-spine-h, 90%);
	min-height: 44px;
	margin: 0;
	padding: 1.05rem 0 0.55rem;
	font: inherit;
	color: var(--hb-spine-ink, #f4e4bc);
	text-transform: none;
	letter-spacing: normal;
	background-color: var(--hb-leather, #5a2a1e);
	background-image: linear-gradient(90deg, var(--hb-leather-dark) 0%, var(--hb-leather) 14%, var(--hb-leather-light) 46%, var(--hb-leather) 82%, var(--hb-leather-dark) 100%);
	border: 0;
	border-radius: 3px 3px 1px 1px;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.3),
		inset 0 3px 4px rgba(255, 255, 255, 0.08),
		3px 0 4px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	transform: translateY(0);
	transition: transform 0.2s ease;
}

.hb-shelf .hb-spine:disabled {
	cursor: default;
}

/* Gold rules near the head and foot of the spine. */
.hb-spine::before,
.hb-spine::after {
	content: "";
	position: absolute;
	right: 14%;
	left: 14%;
	height: 2px;
	background: linear-gradient(90deg, rgba(217, 180, 106, 0.4), #d9b46a, rgba(217, 180, 106, 0.4));
	box-shadow: 0 4px 0 -1px rgba(217, 180, 106, 0.65);
}

.hb-spine::before {
	top: 0.45rem;
}

.hb-spine::after {
	bottom: 2.05rem;
}

.hb-spine-text {
	display: flex;
	flex: 1 1 auto;
	gap: 0.3rem;
	align-items: center;
	justify-content: center;
	min-height: 0;
	overflow: hidden;
	writing-mode: vertical-rl;
	font-family: var(--hb-font-display);
	line-height: 1;
	white-space: nowrap;
}

.hb-spine-month {
	font-size: 1rem;
	letter-spacing: 0.06em;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.hb-spine-current {
	font-size: 0.8rem;
	letter-spacing: 0.04em;
}

.hb-spine-year {
	font-family: var(--hb-font-display);
	font-size: 0.72rem;
	line-height: 1;
	letter-spacing: 0.04em;
}

.hb-shelf .hb-spine.is-current {
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.3),
		0 0 0 2px var(--hb-brass),
		0 0 12px rgba(217, 180, 106, 0.55),
		3px 0 4px rgba(0, 0, 0, 0.35);
}

/* Ribbon bookmark hanging below the current book. */
.hb-spine.is-current .hb-spine-year::after {
	content: "";
	position: absolute;
	bottom: -0.6rem;
	left: 50%;
	width: 0.55rem;
	height: 0.9rem;
	margin-left: -0.275rem;
	background: #b8322a;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}

.hb-shelf .hb-spine:not(:disabled):hover,
.hb-shelf .hb-spine:not(:disabled):focus-visible {
	transform: translateY(-0.4rem);
}

.hb-shelf .hb-spine:focus-visible {
	outline: 3px solid #f4e4bc;
	outline-offset: 3px;
}

.hb-slot-gap {
	display: block;
	width: 2.75rem;
	height: 62%;
	border: 1px dashed rgba(226, 198, 140, 0.22);
	border-bottom: 0;
	border-radius: 2px 2px 0 0;
}

/* Year switch: dim while loading, fade the new year in. */

.hb-shelf-stage {
	transition: opacity 0.2s ease;
}

.hb-shelf.is-loading .hb-shelf-stage {
	opacity: 0.45;
}

.hb-shelf-year {
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.hb-shelf-year.is-entering {
	opacity: 0;
	transform: translateY(0.6rem);
}

/* No-script links. */

.hb-shelf-links {
	margin: 1.25rem 0 0;
	font-size: 1.1rem;
}

.hb-shelf-links-title {
	margin: 0 0 0.4rem;
	font-family: var(--hb-font-display);
	font-size: 1.2rem;
	font-weight: 400;
}

.hb-shelf-links a,
.hb-shelf-back a {
	color: var(--hb-ink);
	text-underline-offset: 0.18em;
}

.hb-shelf-reader {
	scroll-margin-top: 4rem;
}

.hb-shelf-back {
	max-width: 60rem;
	margin: 1rem auto 0;
	font-family: var(--hb-font-text, Georgia, serif);
	font-size: 1.1rem;
}

/* Dialog. */

.hb-dialog {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	font-family: var(--hb-font-text);
}

.hb-dialog-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(24, 14, 6, 0.78);
	opacity: 0;
	transition: opacity 0.24s ease;
}

.hb-dialog-panel {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: min(64rem, 100%);
	max-height: calc(100vh - 2rem);
	max-height: calc(100dvh - 2rem);
	overflow: hidden;
	padding: 0.9rem 1.25rem 1.25rem;
	color: var(--hb-ink);
	background: #fbf5e6;
	border-radius: 6px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transform: translateY(0.75rem) scale(0.985);
	transition: opacity 0.24s ease, transform 0.24s ease;
}

.hb-dialog.is-open .hb-dialog-backdrop,
.hb-dialog.is-open .hb-dialog-panel {
	opacity: 1;
}

.hb-dialog.is-open .hb-dialog-panel {
	transform: none;
}

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

.hb-dialog-title {
	margin: 0;
	font-family: var(--hb-font-display);
	font-size: clamp(1.2rem, 2.4vw, 1.6rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--hb-ink);
}

.hb-dialog-title:focus {
	outline: none;
}

.hb-dialog-title:focus-visible {
	outline: 2px solid var(--hb-accent);
	outline-offset: 3px;
}

.hb-dialog .hb-dialog-close,
.hb-dialog .hb-dialog-close:hover,
.hb-dialog .hb-dialog-close:focus,
.hb-dialog .hb-dialog-retry,
.hb-dialog .hb-dialog-retry:hover,
.hb-dialog .hb-dialog-retry:focus,
.hb-shelf .hb-shelf-retry,
.hb-shelf .hb-shelf-retry:hover,
.hb-shelf .hb-shelf-retry:focus {
	min-height: 44px;
	min-width: 44px;
	padding: 0.4rem 0.9rem;
	font-family: var(--hb-font-text);
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--hb-ink);
	background: var(--hb-parchment);
	border: 1px solid rgba(58, 42, 26, 0.45);
	border-radius: 3px;
	cursor: pointer;
	text-decoration: none;
}

.hb-dialog .hb-dialog-close:focus-visible,
.hb-dialog .hb-dialog-retry:focus-visible,
.hb-shelf .hb-shelf-retry:focus-visible {
	outline: 2px solid var(--hb-accent);
	outline-offset: 3px;
}

.hb-dialog-status {
	min-height: 1.4em;
	margin: 0.5rem 0 0;
	font-style: italic;
	color: #5a4632;
}

.hb-dialog-error {
	margin: 1rem 0;
}

.hb-dialog-book {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	overflow: clip;
}

.hb-dialog .hb-book-shell {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
	min-height: 0;
	max-width: none;
	margin: 0.25rem 0 0;
}

/* flex-basis is the preferred book height. The stage can shrink when the
   screen is short, and the viewport then fills whatever height it got, so
   the page ratio is taken from the real box rather than the request. */
.hb-dialog .hb-book-stage {
	position: relative;
	flex: 1 1 42rem;
	min-height: 0;
	overflow: clip;
}

.hb-dialog .hb-book-viewport {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	container: hb-dialog-book / size;
	overflow: clip;
}

.hb-dialog .hb-book-viewport:focus {
	outline-offset: -4px;
}

.hb-dialog .hb-book-mount {
	width: min(100%, 57.5rem, calc(100cqh * 800 / 580));
	max-width: none;
}

/* StPageFlip uses one page when the book is under 560px wide. Below
   406px of height a two-page spread would be that narrow, so size one
   page (400 by 580) and let the book scale down. */
@container hb-dialog-book (max-width: 559px) {
	.hb-dialog .hb-book-mount {
		width: min(100%, calc(100cqh * 400 / 580));
	}
}

@container hb-dialog-book (max-height: 405.5px) {
	.hb-dialog .hb-book-shell:not(.hb-book-still) .hb-book-mount {
		width: min(100%, calc(100cqh * 400 / 580));
	}
}

.hb-dialog .stf__parent {
	min-width: 0 !important;
	min-height: 0 !important;
}

.hb-dialog .hb-book-still .hb-book-mount {
	height: 100%;
	min-height: 0;
	container-type: size;
}

/* A page as tall as the stage can be wider than half the book, which
   clips the outer edge. Take the shorter of the stage and that half. */
.hb-dialog .hb-book-still .hb-leaf {
	flex: 0 0 auto;
	width: auto;
	height: min(100%, calc(50cqw * 580 / 400));
	aspect-ratio: 400 / 580;
}

.hb-dialog .hb-book-list {
	min-height: 0;
	overflow: auto;
}

.hb-dialog .hb-book-shell.hb-book-list-mode .hb-book-list {
	flex: 1 1 auto;
}

html.hb-scroll-locked {
	overflow: hidden;
}

@media (max-width: 640px) {
	.hb-shelf-case {
		padding: 1rem 0.5rem 0;
		border-width: 0.45rem;
		overflow-x: auto;
	}

	.hb-shelf-row {
		grid-template-columns: repeat(12, 3rem);
		height: 13rem;
	}

	.hb-shelf-board {
		margin: 0 -0.95rem;
		min-width: calc(36rem + 4.2rem);
	}

	.hb-dialog {
		padding: 0.5rem;
	}

	.hb-dialog-panel {
		padding: 0.75rem;
		max-height: calc(100dvh - 1rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hb-shelf .hb-spine,
	.hb-shelf .hb-spine:hover,
	.hb-shelf .hb-spine:focus {
		transition: none;
	}

	.hb-shelf .hb-spine:not(:disabled):hover,
	.hb-shelf .hb-spine:not(:disabled):focus-visible {
		transform: none;
	}

	.hb-shelf-year {
		transition: opacity 0.15s ease;
	}

	.hb-shelf-year.is-entering {
		transform: none;
	}

	.hb-dialog-panel {
		transform: none;
		transition: opacity 0.15s ease;
	}

	.hb-dialog-backdrop {
		transition: opacity 0.15s ease;
	}
}