/* Lore — reader (single-lore_part). Themes, typography controls, paragraph
   comment bubbles, progress bar, sticky action bar. Only loaded on parts. */

.lore-reader-page .lore-main { padding-bottom: 0; }

.lore-progress-bar { position: sticky; top: var(--header-h); left: 0; right: 0; height: 3px; background: var(--line); z-index: 30; }
.lore-progress-bar > span { display: block; height: 100%; background: var(--ember); width: 0%; transition: width .1s linear; }

.lore-reader-head {
	max-width: 720px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-3);
	display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
}
.lore-reader-head__titles { min-width: 0; }
.lore-reader-head__story { font-size: .8rem; color: var(--ink-faint); margin-bottom: 2px; }
.lore-reader-head__story a { color: var(--teal-dark); font-weight: 600; }
.lore-reader-head__part { font-family: var(--lore-font-serif); font-size: 1.4rem; margin: 0; }
.lore-reader-head__tools { display: flex; gap: 4px; flex: none; }

/* Reader surface — variables set here get overridden by the theme skin. */
.lore-reader {
	--reader-bg: var(--paper);
	--reader-fg: var(--ink);
	--reader-fg-soft: var(--ink-soft);
	--reader-size: 1.15rem;
	--reader-leading: 1.85;
	--reader-font: var(--lore-font-serif);
	background: var(--reader-bg); color: var(--reader-fg);
	padding: var(--space-4) var(--space-4) var(--space-10);
	transition: background-color .2s ease, color .2s ease;
}
.lore-reader__inner { max-width: 720px; margin: 0 auto; font-family: var(--reader-font); font-size: var(--reader-size); line-height: var(--reader-leading); }
.lore-reader__inner h2, .lore-reader__inner h3 { font-family: var(--reader-font); }
.lore-reader__inner blockquote { border-left: 3px solid var(--ember); margin: 1.5em 0; padding-left: var(--space-4); color: var(--reader-fg-soft); font-style: italic; }
.lore-reader__inner img { border-radius: var(--radius-md); margin: 1em 0; }
.lore-reader__inner hr { border: 0; border-top: 1px solid var(--line); margin: 2em auto; width: 40%; }

/* Theme skins */
.lore-reader[data-theme="sepia"] { --reader-bg: #f4ecd8; --reader-fg: #433422; --reader-fg-soft: #6b5c44; }
.lore-reader[data-theme="dark"] { --reader-bg: #17171b; --reader-fg: #e9e8e4; --reader-fg-soft: #b3b1ab; }

/* Font family choice */
.lore-reader[data-font="sans"] { --reader-font: var(--lore-font-ui); }

/* Font size steps */
.lore-reader[data-size="S"] { --reader-size: 1rem; }
.lore-reader[data-size="M"] { --reader-size: 1.15rem; }
.lore-reader[data-size="L"] { --reader-size: 1.3rem; }
.lore-reader[data-size="XL"] { --reader-size: 1.5rem; }

/* Line height steps */
.lore-reader[data-leading="tight"] { --reader-leading: 1.55; }
.lore-reader[data-leading="normal"] { --reader-leading: 1.85; }
.lore-reader[data-leading="loose"] { --reader-leading: 2.2; }

/* Paragraphs with a comment-bubble affordance */
.lore-reader p[data-p] { position: relative; padding-right: 2.4em; }
.lore-p-bubble {
	position: absolute; right: 0; top: 0.1em;
	display: inline-flex; align-items: center; gap: 3px;
	background: none; border: 0; cursor: pointer; color: var(--ink-faint);
	opacity: .35; padding: 2px 4px; border-radius: var(--radius-pill); font-size: .72rem; font-weight: 700;
}
.lore-p-bubble .lore-icon { width: 15px; height: 15px; }
.lore-reader p[data-p]:hover .lore-p-bubble, .lore-p-bubble:focus-visible { opacity: 1; }
.lore-p-bubble.has-comments { opacity: .9; color: var(--ember); }
@media (hover: none) {
	.lore-p-bubble { opacity: .6; }
	.lore-p-bubble.has-comments { opacity: 1; }
}

/* Chapter author note */
.lore-authors-note { max-width: 720px; margin: var(--space-6) auto; padding: var(--space-4); background: var(--paper-alt); border-radius: var(--radius-lg); font-size: .9rem; }
.lore-authors-note__label { font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); margin-bottom: 6px; }

/* Sticky bottom action bar (mobile vote/comment/share) */
.lore-reader-actions {
	position: sticky; bottom: 0; left: 0; right: 0; z-index: 25;
	background: var(--white); border-top: 1px solid var(--line);
	display: flex; align-items: center; justify-content: space-around; padding: 8px var(--space-4);
	padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
}
@media (min-width: 900px) { .lore-reader-actions { position: static; border: 0; background: transparent; justify-content: flex-start; gap: var(--space-4); max-width: 720px; margin: 0 auto; padding: var(--space-4); } }
.lore-vote-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; cursor: pointer; color: var(--ink-soft); font-size: .68rem; font-weight: 700; padding: 6px 14px; }
.lore-vote-btn .lore-icon { width: 24px; height: 24px; }
.lore-vote-btn.is-voted { color: var(--ember); }
.lore-vote-btn.is-voted .lore-icon { fill: var(--ember); }
.lore-vote-btn.lore-pop .lore-icon { animation: lore-pop .3s ease; }
@keyframes lore-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Reader footer: next part card + chapter comments */
.lore-next-part { max-width: 720px; margin: var(--space-8) auto; padding: 0 var(--space-4); }
.lore-next-part__card { display: flex; align-items: center; gap: var(--space-4); background: var(--paper-alt); border-radius: var(--radius-lg); padding: var(--space-4); }
.lore-next-part__card img { width: 56px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); flex: none; }
.lore-next-part__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.lore-next-part__title { font-weight: 700; }

.lore-chapter-comments { max-width: 720px; margin: var(--space-6) auto; padding: 0 var(--space-4); }
.lore-chapter-comments__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }

/* TOC dropdown trigger in reader head */
.lore-reader-toc-btn { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 600; background: var(--paper-alt); border-radius: var(--radius-pill); padding: 6px 12px; border: 0; cursor: pointer; }