/* Article reading controls. Loaded only on story pages. */
.site-header__inner { gap: 12px; }
.header-reader-open {
	display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
	border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text);
	font: 600 21px/1 var(--serif); cursor: pointer;
}
.header-reader-open[hidden] { display: none; }
.header-reader-open:hover { color: var(--accent); border-color: var(--accent); }
.reader-fab { display: none; }
.reader-settings__close {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	min-width: 44px; min-height: 44px; padding: 8px; border: 0; border-radius: 8px;
	background: transparent; color: var(--text); font: 600 15px/1.2 var(--sans); cursor: pointer;
}
.reader-settings__close:hover { background: var(--bg); }
.story__body { font-family: var(--reader-font, var(--serif)); font-size: var(--reader-size, 20px); line-height: var(--reader-spacing, 1.8); overflow-wrap: anywhere; }
.story__body > h2, .story__body > h3, .story__body > h4 { font-family: inherit; }
.story__body > h2 { font-size: 1.35em; }
.story__body > h3 { font-size: 1.15em; }

.reader-settings {
	width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 40px); margin: auto;
	padding: 24px; overflow-y: auto; overscroll-behavior: contain;
	border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text);
	box-shadow: 0 24px 80px #0004; font: 15px/1.5 var(--sans);
}
.reader-settings::backdrop { background: #0008; backdrop-filter: blur(3px); }
.reader-settings__header { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
.reader-settings__header h2 { margin-top: 4px; font-size: 27px; }
.reader-settings__eyebrow { color: var(--muted); font-size: 12px; }
.reader-settings__close { flex-shrink: 0; margin: -8px -8px 0 0; font-size: 28px; font-weight: 400; }
.reader-settings__fields { display: grid; gap: 24px; margin-top: 24px; }
.reader-settings__field { display: grid; gap: 10px; font-weight: 600; }
.reader-settings__field > span { display: flex; justify-content: space-between; }
.reader-settings__field output { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.reader-settings select {
	width: 100%; min-height: 46px; padding: 10px; border: 1px solid var(--border); border-radius: 8px;
	background: var(--bg); color: var(--text); font: 16px/1.4 var(--sans);
}
.reader-settings input[type="range"] { width: 100%; min-height: 28px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.reader-settings__themes { border: 0; margin: 0; padding: 0; min-width: 0; }
.reader-settings__themes legend { padding: 0; margin-bottom: 10px; font-weight: 600; }
.reader-settings__themes > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.reader-theme {
	display: grid; gap: 3px; padding: 12px 8px; border: 2px solid transparent; border-radius: 10px;
	font: 24px/1.2 Georgia, serif; cursor: pointer; box-shadow: inset 0 0 0 1px #8884;
}
.reader-theme span { font: 600 12px/1.3 var(--sans); }
.reader-theme--light { background: #faf9f7; color: #202124; }
.reader-theme--sepia { background: #f4ecd8; color: #3b3024; }
.reader-theme--dark { background: #1c1c20; color: #ece8e1; }
.reader-theme[aria-pressed="true"] { border-color: var(--accent); outline: 2px solid var(--surface); outline-offset: -4px; }
.reader-settings__preview {
	padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
	font-family: var(--reader-font, var(--serif)); font-size: var(--reader-size, 20px); line-height: var(--reader-spacing, 1.8); overflow-wrap: anywhere;
}
.reader-settings__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; margin-top: 20px; }
.reader-settings__footer p { color: var(--muted); font-size: 12px; flex: 1 1 140px; }
.reader-settings__footer button { font-size: 13px; }

body[data-reader-theme="sepia"] {
	--bg: #f4ecd8; --surface: #fcf5e6; --text: #3b3024; --muted: #72634f; --border: #dfd1b8;
}
body[data-reader-theme="dark"] {
	--bg: #161619; --surface: #222226; --text: #ece8e1; --muted: #b3adb0; --border: #3b383c;
	--accent: #efa4ad; --accent-hover: #ffd2d7; --shadow: 0 2px 12px #0003; color-scheme: dark;
}
body[data-reader-theme="sepia"] .site-header, body[data-reader-theme="dark"] .site-header,
body[data-reader-theme="sepia"] .part-nav, body[data-reader-theme="dark"] .part-nav { background: var(--bg); }
body[data-reader-theme="sepia"] .story__hook, body[data-reader-theme="dark"] .story__hook,
body[data-reader-theme="sepia"] .recap__body, body[data-reader-theme="dark"] .recap__body { color: var(--muted); }
body[data-reader-theme="dark"] .part-strip, body[data-reader-theme="dark"] .parts-list__item.is-current .parts-list__row { background: var(--surface); }
body[data-reader-theme="dark"] .btn--primary, body[data-reader-theme="dark"] .part-end__next,
body[data-reader-theme="dark"] .part-end__next:hover { color: #22181b; }
body[data-reader-theme="dark"] .part-end__next-teaser { color: #402b31; }

@media (max-width: 380px) {
	.reader-settings { padding: 20px; }
}
@media (max-width: 540px) {
	.reader-settings { margin-bottom: 16px; }
}
@media (max-width: 767px) {
	body.has-reader-fab .part-nav { display: none; }
	html:has(body.has-reader-fab .site-header.has-part-nav) { scroll-padding-top: calc(var(--header-h) + 12px); }
	/* Reserve a small edge beside prose only; ad slots retain their full available width. */
	body.has-reader-fab .story__title, body.has-reader-fab .story__hook, body.has-reader-fab .story__meta,
	body.has-reader-fab .story__body > p, body.has-reader-fab .story__body > h2,
	body.has-reader-fab .story__body > h3, body.has-reader-fab .story__body > h4,
	body.has-reader-fab .story__body > ul, body.has-reader-fab .story__body > ol,
	body.has-reader-fab .story__body > blockquote { padding-right: 20px; }
	.reader-fab {
		position: fixed; top: 45vh; right: env(safe-area-inset-right, 0px); z-index: 35;
		display: block;
		color: var(--text); transition: opacity .15s;
	}
	.reader-fab[hidden], .reader-fab [hidden] { display: none !important; }
	.reader-fab.is-suppressed { visibility: hidden; opacity: 0; pointer-events: none; }
	.reader-fab__link {
		position: relative; display: grid; place-items: center; width: 44px; height: 48px; padding: 0;
		border: 0; background: transparent; color: var(--accent); cursor: pointer;
	}
	.reader-fab__link::before {
		content: ""; position: absolute; inset: 0 0 0 auto; width: 34px;
		border: 1px solid var(--border); border-right: 0; border-radius: 12px 0 0 12px;
		background: var(--surface); box-shadow: var(--shadow);
	}
	.reader-fab__link svg { position: relative; transform: translateX(5px); }
	.reader-fab__link:hover::before { background: var(--bg); }
}
@media print {
	.header-reader-open, .reader-settings, .reader-fab { display: none !important; }
}