/*
 * Project:     DMsHelper
 * File:        Home.css
 * Description: Lore Book component for the Home/Index landing page — replaces
 *              the old rotating tour-map click-through. Built on the shared
 *              parchment design tokens defined in site.css.
 * File Location: \wwwroot\css\Home.css
 * Created:     GRK 07/28/2026
 * History:     GRK 07/28/2026 Initial Release
 *              GRK 07/28/2026 Replaced the collapsible <details> Table of Contents
 *                   (.dh-book__toc*) with a left sidebar (.dh-book-layout,
 *                   .dh-book-sidebar) matching the Campaign treeview's shell,
 *                   plus .book-page-list* — ported from campaign.css's
 *                   drag-to-reorder book management styles, since the DM-only
 *                   reorder/remove controls now live directly in this sidebar.
 *              GRK 07/28/2026 Sidebar title became a header row (.dh-book-sidebar__header)
 *                   holding the title plus a DM-only Edit toggle
 *                   (.dh-book-sidebar__edit-btn) that turns drag-to-reorder
 *                   on/off (.book-page-list--editing) instead of pages always
 *                   being draggable.
 *              GRK 07/29/2026 On wide viewports (>=1400px) the sidebar is pinned near
 *                   the browser's left edge (position: fixed) instead of
 *                   sitting inline next to the book, and the book itself
 *                   centers independently in the full viewport — so the
 *                   TOC no longer shifts the book off-center. Below that
 *                   width there isn't enough room for both without overlap,
 *                   so it falls back to the original inline layout.
 *              GRK 07/29/2026 Deduped .book-page-list* against campaign.css's copy —
 *                   the shared component rules moved to bookpages.css
 *                   (loaded alongside this file), leaving only
 *                   #BookTocList's own available-height sizing here.
 *              GRK 07/30/2026 Added .dh-book__edit-btn — DM-only pencil, pinned to the
 *                   page's top-right corner, that opens a page-text edit
 *                   modal reusing textmodals.css's .dh-text-edit-modal* classes
 *                   (same modal chrome as VCPlayerDescription's edit modal).
 *              GRK 07/30/2026 Added .dh-book__body--single for short reading
 *                   pages (HomeController.UseSingleColumn) that look sparse
 *                   balanced across 2 columns — constrained to one column's
 *                   width (not just column-count: 1) so it sits on the left
 *                   page with a spine crease and a blank right page still
 *                   showing, rather than stretching full-width and losing
 *                   the open-book look entirely.
 *              GRK 07/30/2026 Replaced .dh-book::before (a full-height spine
 *                   line positioned against the whole page) with column-rule
 *                   on .dh-book__body, and a matching ::after on
 *                   .dh-book__body--single for the single-column case —
 *                   .dh-book::before started right where .dh-book__title
 *                   sits (title has no margin-top, and the old spine's
 *                   "top: 1rem" landed inside that same space), so long
 *                   titles rendered with a line visibly crossing through
 *                   them. Scoping the line to .dh-book__body instead means
 *                   it can only ever start below the title, since the title
 *                   is a sibling that comes before .dh-book__body in the DOM.
 *              GRK 08/02/2026 Added .dh-book-sidebar__titlewrap and
 *                   .dh-book-sidebar__campaign — the campaign name now
 *                   renders as a subtitle under "Table of Contents" so
 *                   players with more than one campaign know which one's
 *                   book they're looking at.
 *              GRK 08/02/2026 Added .dh-preview-banner — the "View as
 *                   Player" preview mode's banner above the book layout.
 *              GRK 08/02/2026 Added .dh-preview-select — the sidebar's own
 *                   group picker that triggers preview mode
 *                   (#HomePreviewGroupSelect), real-DM-view only.
 */

.dh-preview-banner {
	align-items: center;
	background: var(--dh-red);
	border-radius: 6px;
	color: var(--dh-parchment);
	display: flex;
	font-family: var(--dh-serif-body);
	font-size: 0.85rem;
	justify-content: space-between;
	margin: 0 0 0.75rem;
	padding: 0.5rem 1rem;
}

	.dh-preview-banner i {
		margin-right: 0.4rem;
	}

	.dh-preview-banner a {
		color: var(--dh-parchment);
		font-weight: 700;
		text-decoration: underline;
	}

	.dh-preview-banner a:hover {
		color: var(--dh-gold);
	}

.dh-book-layout {
	align-items: flex-start;
	display: flex;
	gap: 1rem;
	margin: 1.5rem auto 0;
	max-width: 1200px;
	padding: 0 1rem;
}

.dh-book-sidebar {
	background: var(--dh-panel-bg-soft);
	background-image: var(--dh-noise), var(--dh-panel-bg-soft);
	border: 1px solid var(--dh-panel-border);
	border-radius: 6px;
	box-shadow: var(--dh-panel-shadow);
	flex: 0 0 280px;
	min-width: 0;
	padding: 0.75rem;
}

.dh-book-sidebar__header {
	align-items: center;
	border-bottom: 1px solid var(--dh-parchment-dark);
	display: flex;
	justify-content: center;
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	position: relative;
}

.dh-book-sidebar__titlewrap {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dh-preview-select {
	align-items: center;
	display: flex;
	gap: 0.35rem;
	margin: 0 0 0.5rem;
}

	.dh-preview-select label {
		color: var(--dh-ink-light);
		flex: 0 0 auto;
		font-family: var(--dh-serif-body);
		font-size: 0.75rem;
	}

		.dh-preview-select label i {
			margin-right: 0.15rem;
		}

	.dh-preview-select select {
		flex: 1 1 auto;
		font-family: var(--dh-serif-body);
		font-size: 0.8rem;
		min-width: 0;
	}

.dh-book-sidebar__title {
	color: var(--dh-red);
	font-family: var(--dh-serif-title);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
}

.dh-book-sidebar__campaign {
	color: var(--dh-ink-light);
	font-family: var(--dh-serif-body);
	font-size: 0.7rem;
	font-style: italic;
	margin-top: 0.15rem;
	max-width: 220px;
	overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dh-book-sidebar__edit-btn {
	background: none;
	border: 1px solid transparent;
	border-radius: 4px;
	color: var(--dh-ink-light);
	font-size: 0.8rem;
	padding: 0.2rem 0.4rem;
	position: absolute;
	right: 0;
}

	.dh-book-sidebar__edit-btn:hover {
		color: var(--dh-crimson);
	}

	.dh-book-sidebar__edit-btn--active {
		background: var(--dh-red);
		border-color: var(--dh-gold);
		color: var(--dh-parchment);
	}

		.dh-book-sidebar__edit-btn--active:hover {
			color: var(--dh-parchment);
		}

.dh-book-wrap {
	flex: 1 1 0;
	min-width: 0;
}

.dh-book {
	position: relative;
	background: linear-gradient(160deg, #ede1c5 0%, #f8f0dc 55%, #e8d9b5 100%);
	background-image: var(--dh-noise), linear-gradient(160deg, #ede1c5 0%, #f8f0dc 55%, #e8d9b5 100%);
	border: 1px solid var(--dh-parchment-dark);
	border-radius: 6px;
	box-shadow: 0 10px 30px var(--dh-shadow), inset 0 0 24px rgba(43, 29, 14, 0.08);
	height: 1080px;
	display: flex;
	flex-direction: column;
	padding: 2.5rem 3rem;
}

	/* DM-only pencil — opens the page-text edit modal. Pinned to the page's
	   top-right corner so it stays put while .dh-book__scroll scrolls beneath it. */
	.dh-book__edit-btn {
		position: absolute;
		top: 1.25rem;
		right: 1.5rem;
		z-index: 2;
		background: none;
		border: 1px solid transparent;
		border-radius: 4px;
		color: var(--dh-ink-light);
		font-size: 1rem;
		padding: 0.3rem 0.5rem;
	}

		.dh-book__edit-btn:hover {
			color: var(--dh-crimson);
		}

.dh-book__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
}

.dh-book__title {
	font-family: var(--dh-serif-display);
	font-size: clamp(1.4rem, 4vw, 2rem);
	color: var(--dh-red);
	text-align: center;
	margin: 0 0 1.5rem;
	text-shadow: 1px 1px 0 var(--dh-parchment-dark);
}

.dh-book__part {
	font-family: var(--dh-serif-body);
	font-style: italic;
	font-size: 0.85rem;
	color: var(--dh-ink-light);
	text-align: center;
	margin: -1rem 0 1.25rem;
}

.dh-book__body {
	font-family: var(--dh-serif-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--dh-ink);
	text-align: justify;
	min-height: 300px;
}

@media (min-width: 700px) {
	.dh-book__body {
		column-count: 2;
		column-gap: 6rem;
		column-fill: balance;
		column-rule: 1px solid var(--dh-parchment-dark);
	}

	.dh-book__body--single {
		column-count: 1;
		position: relative;
		width: calc((100% - 6rem) / 2);
	}

		/* Mimics column-rule (which needs 2 actual columns to render) at the
		   same spot a facing column's rule would sit — centered in the gap
		   between this narrow column and the blank "page" beside it. */
		.dh-book__body--single::after {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			left: calc(100% + 3rem);
			width: 1px;
			background: var(--dh-parchment-dark);
		}
}

	.dh-book__body p:first-of-type::first-letter {
		font-family: var(--dh-serif-display);
		font-size: 2.6em;
		float: left;
		line-height: 0.8;
		padding: 0.05em 0.1em 0 0;
		color: var(--dh-crimson);
	}

.dh-book__empty {
	font-family: var(--dh-serif-body);
	font-style: italic;
	color: var(--dh-ink-light);
	text-align: center;
	padding: 3rem 1rem;
}

/* ── Controls ── */
.dh-book__nav {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
}

.dh-book__nav-btn {
	font-family: var(--dh-serif-title);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dh-parchment);
	background: var(--dh-red);
	border: 1px solid var(--dh-gold);
	border-radius: 4px;
	padding: 0.5rem 1.1rem;
	text-decoration: none;
	transition: background 0.15s, transform 0.1s;
	white-space: nowrap;
}

	.dh-book__nav-btn:hover {
		background: var(--dh-red-hover);
		color: black;
	}

	.dh-book__nav-btn.disabled {
		pointer-events: none;
		opacity: 0.35;
	}

.dh-book__progress {
	font-family: var(--dh-serif-body);
	font-size: 0.95rem;
	color: var(--dh-ink-light);
	text-align: center;
}

/* ============================================================
   TOC SIDEBAR — the shared .book-page-list* component rules now live in
   bookpages.css; this is just #BookTocList's own available-height sizing
   for its narrower context (vs. #BookPageList's Campaign-panel context).
   ============================================================ */

#BookTocList {
	max-height: calc(100vh - 220px);
}

@media (max-width: 900px) {
	.dh-book-layout {
		flex-direction: column;
	}

	.dh-book-sidebar {
		flex: 0 0 auto;
		width: 100%;
	}

	#BookTocList {
		max-height: 240px;
	}
}

@media (max-width: 600px) {
	.dh-book {
		padding: 1.75rem 1.25rem;
	}
}

@media (min-width: 1400px) {
	.dh-book-layout {
		display: block;
		max-width: none;
	}

	.dh-book-sidebar {
		position: fixed;
		top: calc(70px + 1rem);
		left: 1.5rem;
		width: 260px;
	}

	.dh-book-wrap {
		max-width: 840px;
		margin: 1.5rem auto 0;
	}
}