/* Reader stylesheet consolidated (was book.css) */
/* =============================================
	 Book Reading Theme (Modern Bookish UI)
	 ============================================= */
/* CSS Variables for theming */
:root {
	--font-serif: 'Merriweather', 'Georgia', serif;
	--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-mono: 'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;

	--clr-bg: #f6f1e3; /* parchment */
	--clr-bg-alt: #fffdf8;
	--clr-fg: #2e271f;
	--clr-muted: #6e6256;
	--clr-accent: #b7791f;
	--clr-border: #dbcdb4;
	--clr-code-bg: #fbefcf;
	--clr-mark: #fff2a8;

	--leading: 1.65;
	--max-width: 58ch;
	--para-space: 0.85em;
	--font-size-base: 1.05rem;
}

/* Dark mode */
[data-theme="dark"] {
	--clr-bg: #1e1b16;
	--clr-bg-alt: #27231d;
	--clr-fg: #f3e9d7;
	--clr-muted: #b09f89;
	--clr-accent: #d39a39;
	--clr-border: #3d362d;
	--clr-code-bg: #332d24;
	--clr-mark: #5a4512;
}

/* Night high-contrast mode */
[data-theme="night"] {
	--clr-bg: #0c0d10;
	--clr-bg-alt: #13151a;
	--clr-fg: #d8dce2;
	--clr-muted: #7c8695;
	--clr-accent: #7fb4ff;
	--clr-border: #242a33;
	--clr-code-bg: #1c222b;
	--clr-mark: #25374d;
}

/* Pure black & white high contrast mode */
[data-theme="bw"] {
	--clr-bg:#000;
	--clr-bg-alt:#111;
	--clr-fg:#fff;
	--clr-muted:#cfcfcf;
	--clr-accent:#ffffff; /* keep links white, invert via underline */
	--clr-border:#444;
	--clr-code-bg:#111;
	--clr-mark:#fff; /* will invert text via mix-blend? keep simple */
}

/* High contrast (yellow accents) */
[data-theme="hc"] {
	--clr-bg:#000;
	--clr-bg-alt:#000;
	--clr-fg:#ffffff;
	--clr-muted:#f2f2f2;
	--clr-accent:#ffff00;
	--clr-border:#ffffff;
	--clr-code-bg:#000;
	--clr-mark:#ffff00;
}

[data-theme="hc"] a { text-decoration: underline; font-weight:700; }
[data-theme="hc"] .control-bar button:hover { background: #ffff00; color:#000; }
[data-theme="hc"] ::selection { background:#ffff00; color:#000; }
[data-theme="hc"] blockquote { border-left-color:#ffff00; }
[data-theme="hc"] .progress-bar { background:linear-gradient(90deg,#ffff00,#ffff00); }

/* Sepia mode */
[data-theme="sepia"] {
	--clr-bg: #f4ecd8;
	--clr-bg-alt: #fbf6eb;
	--clr-fg: #3a2e25;
	--clr-muted: #8a7a68;
	--clr-accent: #a56418;
	--clr-border: #e3d8c4;
	--clr-code-bg: #efe3cc;
	--clr-mark: #ffe7a3;
}

html { font-size: 100%; }
body {
	margin:0;
	font-family: var(--font-serif);
	font-size: var(--font-size-base);
	line-height: var(--leading);
	color: var(--clr-fg);
	background: var(--clr-bg) url('https://www.transparenttextures.com/patterns/paper-fibers.png');
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	hanging-punctuation: first last;
	overflow-y: scroll;
}

/* Layout wrapper */
.reader-shell { max-width: 100%; }
.reader { max-width: var(--max-width); margin: 0 auto; padding: 3.5rem 1.25rem 6rem; position:relative; }

/* Progress Bar */
.progress-bar { position:fixed; top:0; left:0; height:4px; background:linear-gradient(90deg,var(--clr-accent),var(--clr-accent)); width:0; z-index:100; transition:width .15s linear; }

/* Control bar */
.control-bar { position:fixed; top:0.35rem; right:0.75rem; display:flex; flex-direction:column; gap:.4rem; z-index:110; }
.control-bar button { background:var(--clr-bg-alt); color:var(--clr-fg); border:1px solid var(--clr-border); font-family:var(--font-sans); font-size:.65rem; padding:.45rem .55rem; border-radius:6px; cursor:pointer; letter-spacing:.05em; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.05); backdrop-filter: blur(6px); }
.control-bar button:hover { background:var(--clr-accent); color:#fff; }
.control-bar button:focus-visible { outline:2px solid var(--clr-accent); outline-offset:2px; }
.control-bar select { background:var(--clr-bg-alt); color:var(--clr-fg); border:1px solid var(--clr-border); font-family:var(--font-sans); font-size:.55rem; padding:.35rem .4rem; border-radius:6px; cursor:pointer; letter-spacing:.05em; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.control-bar select:focus-visible { outline:2px solid var(--clr-accent); outline-offset:2px; }

/* Typography */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-serif); font-weight:700; line-height:1.2; margin:2.4em 0 0.9em; letter-spacing:.5px; }
h1 { font-size:2.35rem; }
h2 { font-size:1.9rem; }
h3 { font-size:1.55rem; }
h4 { font-size:1.3rem; }
h5 { font-size:1.15rem; }
h6 { font-size:1rem; font-weight:600; }

p, ul, ol, blockquote, pre, table { margin:0 0 var(--para-space); }
p { text-align: justify; hyphens: auto; }

/* First paragraph drop cap */
.reader > p:first-of-type::first-letter { float:left; font-size:3.5em; line-height:.9; padding:.1em .15em .05em .05em; font-weight:700; color:var(--clr-accent); font-family: var(--font-serif); }

ul,ol { padding-left:1.4em; }
li { margin:.25em 0; }
li::marker { color:var(--clr-accent); }

a { color: var(--clr-accent); text-decoration:none; transition:color .25s; }
a:hover { text-decoration:underline; }
a:focus-visible { outline:2px solid var(--clr-accent); outline-offset:2px; }

blockquote { margin:2.2em 0; padding:1.1em 1.25em; background:var(--clr-bg-alt); border:1px solid var(--clr-border); border-left:5px solid var(--clr-accent); font-style:italic; position:relative; }
blockquote::before { content:'“'; position:absolute; font-size:4.5rem; line-height:1; top:-1.05rem; left:.25rem; color:var(--clr-accent); font-family:var(--font-serif); opacity:.25; }

mark { background: var(--clr-mark); padding:.15em .25em; border-radius:4px; }

code, pre code { font-family: var(--font-mono); font-size:.9em; background:var(--clr-code-bg); color:var(--clr-fg); }
code { padding: .15em .4em; border-radius:4px; }
pre { padding:1em 1.2em; background:var(--clr-code-bg); border:1px solid var(--clr-border); border-radius:10px; overflow:auto; }

hr { border:none; border-top:1px solid var(--clr-border); margin:3rem auto; width:60%; }

table { width:100%; border-collapse:collapse; font-size:.95em; }
th, td { border:1px solid var(--clr-border); padding:.5em .75em; text-align:left; }
th { background:var(--clr-bg-alt); }

/* Reading aids */
.reading-progress-label { position:fixed; top:.5rem; left:.75rem; font-size:.65rem; font-family:var(--font-sans); letter-spacing:.08em; background:var(--clr-bg-alt); color:var(--clr-muted); padding:.35rem .55rem; border:1px solid var(--clr-border); border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.08); }

/* Multi-column (activated via data-layout="columns") */
[data-layout="columns"] .reader { column-width: 32ch; column-gap:3.25rem; max-width:1400px; }
[data-layout="columns"] h2, [data-layout="columns"] h3, [data-layout="columns"] h4 { break-inside:avoid; }

/* Scrollbars (webkit) */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--clr-bg); }
::-webkit-scrollbar-thumb { background: var(--clr-accent); border-radius: 6px; border:3px solid var(--clr-bg); }
::-webkit-scrollbar-thumb:hover { background: #8c5d10; }

/* Footnotes (if any) */
.footnotes { font-size:.85em; border-top:1px solid var(--clr-border); margin-top:4rem; padding-top:1.5rem; }
.footnotes ol { padding-left:1.2em; }
.footnotes li { margin:.4em 0; }

/* Selection */
::selection { background: var(--clr-accent); color:#fff; }

/* Print adjustments */
@media print { body { background:#fff; } .control-bar, .progress-bar, .reading-progress-label { display:none !important; } }

@media (max-width: 720px) {
	:root { --font-size-base: 1rem; }
	.reader { padding:2.5rem 1rem 5rem; }
	.control-bar { flex-direction:row; top:auto; bottom:.75rem; right:50%; transform:translateX(50%); background:var(--clr-bg-alt); padding:.4rem .6rem; border:1px solid var(--clr-border); border-radius:8px; }
	.control-bar button { font-size:.6rem; padding:.4rem .5rem; }
	.reading-progress-label { top:auto; bottom:.5rem; left:.5rem; }
}
