/* Chapter Post — reading UI (theme-agnostic).
   Themes restyle by overriding the CSS variables on .sc-reader, or any .sc-* rule. */
.sc-reader {
	--sc-accent: #2563eb;
	--sc-on-accent: #ffffff;
	--sc-panel-bg: #ffffff;
	--sc-text: #0f172a;
	--sc-muted: #64748b;
	--sc-border: #e6eaf0;
	--sc-active-bg: #eff4ff;
}

/* Top progress bar */
.sc-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: transparent;
	z-index: 2147483000;
	pointer-events: none;
}
.sc-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--sc-accent);
	transition: width 0.08s linear;
}

/* In-content chapter heading (shown by un-integrated themes) */
.sc-chapter-heading { line-height: 1.15; }

/* Thin "reading progress by chapter" bar under the post title. */
.sc-chapterbar {
	margin: 0 0 20px;
}
.sc-chapterbar__label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sc-muted, #64748b);
}
.sc-chapterbar__track {
	display: block;
	height: 4px;
	border-radius: 999px;
	background: var(--sc-active-bg, #eff4ff);
	overflow: hidden;
}
.sc-chapterbar__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background-color: var(--sc-accent, #2563eb);
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
	transition: width 0.3s ease;
}

/* Prev / next nav — outlined "cards": a chevron on the outer edge, a small
   uppercase PREV/NEXT CHAPTER N label, and the chapter title beneath. */
.sc-nav {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 10px;
	margin-top: 8px;
}
.sc-nav__link {
	flex: 1 1 0;
	min-width: 0;
	/* Never wider than half the row: on the first/last chapter the opposite card
	   is hidden on desktop, and without this cap the lone button would stretch
	   across the whole content width. Half the row minus half the 10px gap. */
	max-width: calc(50% - 5px);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border: none;
	border-radius: 12px;
	background-color: var(--sc-accent, #2563eb);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
	text-decoration: none;
	color: var(--sc-on-accent, #fff);
	box-shadow: 0 4px 14px -6px rgba(37, 99, 235, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.sc-nav__link:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
	box-shadow: 0 10px 22px -8px rgba(37, 99, 235, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* Chevrons hug the outer edge so the label/title get the rest of the card. */
.sc-nav__prev { padding-left: 6px; }
/* margin-left:auto keeps a lone "next" card on the right-hand half. */
.sc-nav__next { text-align: right; padding-right: 6px; margin-left: auto; }
/* Text column (label + title). min-width:0 lets the title ellipsize. */
.sc-nav__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.sc-nav__next .sc-nav__body { align-items: flex-end; }
.sc-nav__dir {
	font-size: 0.68em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
	white-space: nowrap;
}
.sc-nav__title {
	max-width: 100%;
	font-size: 0.88em;
	font-weight: 400;
	color: var(--sc-on-accent, #fff);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sc-nav__chevron {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	color: rgba(255, 255, 255, 0.85);
}
/* Disabled edge (first / last chapter): faded, non-interactive. */
.sc-nav__link.is-disabled {
	opacity: 0.5;
	pointer-events: none;
	cursor: default;
}

@media (max-width: 640px) {
	.sc-nav { gap: 8px; }
	.sc-nav__link { padding: 10px 12px; gap: 6px; max-width: calc(50% - 4px); }
	.sc-nav__prev { padding-left: 4px; }
	.sc-nav__next { padding-right: 4px; }
	.sc-nav__dir { font-size: 0.6em; letter-spacing: 0.02em; }
	.sc-nav__chevron svg { width: 16px; height: 16px; }
}

/* Desktop: drop the edge placeholder so a single real card fills the row. */
@media (min-width: 641px) {
	.sc-nav__link.is-disabled { display: none; }
}

/* Floating toggle / FAB — docked to the right edge, vertically centered (a side handle) */
.sc-fab {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2147483000;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px 12px 12px;
	border: none;
	border-radius: 999px 0 0 999px;
	background: var(--sc-accent);
	color: var(--sc-on-accent);
	font: 600 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
}
.sc-fab:hover { filter: brightness(1.05); }
.sc-fab__icon { display: inline-flex; }
.sc-fab__count { letter-spacing: 0.02em; }

/* TOC popup — a floating card anchored to the right-edge handle, vertically centered (desktop) */
.sc-toc {
	position: fixed;
	right: 64px;
	top: 50%;
	width: 370px;
	max-width: calc(100vw - 84px);
	max-height: min(80vh, 620px);
	background: var(--sc-panel-bg);
	color: var(--sc-text);
	z-index: 2147483001;
	border: 1px solid var(--sc-border);
	border-radius: 16px;
	box-shadow: 0 20px 55px rgba(15, 23, 42, 0.28);
	transform: translate(14px, -50%) scale(0.96);
	transform-origin: center right;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.sc-toc.is-open { opacity: 1; visibility: visible; transform: translate(0, -50%) scale(1); }

.sc-toc__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--sc-border);
}
.sc-toc__book { color: var(--sc-accent); display: inline-flex; }
.sc-toc__post {
	flex: 1 1 auto;
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sc-toc__close {
	flex: 0 0 auto;
	border: none;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: var(--sc-muted);
}
.sc-toc__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sc-muted);
}
.sc-toc__total {
	background: var(--sc-active-bg);
	color: var(--sc-accent);
	border-radius: 999px;
	padding: 2px 9px;
	font-size: 12px;
}
.sc-toc__list {
	list-style: none;
	margin: 0;
	padding: 0 10px 24px;
	overflow-y: auto;
	flex: 1 1 auto;
}
.sc-toc__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 12px;
	border-radius: 10px;
	text-decoration: none;
	color: var(--sc-text);
	transition: background 0.15s;
}
.sc-toc__link:hover { background: var(--sc-active-bg); }
.sc-toc__item.is-active .sc-toc__link { background: var(--sc-active-bg); }
.sc-toc__num {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #f1f5f9;
	color: var(--sc-muted);
	font-weight: 700;
	font-size: 13px;
}
.sc-toc__item.is-active .sc-toc__num { background: var(--sc-accent); color: var(--sc-on-accent); }
.sc-toc__text {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Click-catcher. Transparent on desktop (chat-box style, page stays visible);
   dimmed on mobile where the popup becomes a bottom sheet. */
.sc-reader__overlay {
	position: fixed;
	inset: 0;
	background: transparent;
	z-index: 2147483000;
	opacity: 0;
	transition: opacity 0.2s;
}
.sc-reader__overlay.is-open { opacity: 1; }

@media (max-width: 640px) {
	/* Dock the toggle to the right edge, vertically centered (a side handle). */
	.sc-fab {
		right: 0;
		left: auto;
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		padding: 12px 16px 12px 12px;
		border-radius: 999px 0 0 999px;
		box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
	}
	.sc-toc {
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		max-height: 82vh;
		border-radius: 18px 18px 0 0;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		transform: translateY(100%) scale(1);
		transform-origin: bottom center;
	}
	.sc-toc.is-open { transform: translateY(0) scale(1); }
	.sc-reader__overlay { background: rgba(15, 23, 42, 0.45); }
}