/* Shared by the writing editor and the reader so both show identical formatting.
   Authors choose from fixed options; nothing here is driven by author-supplied CSS. */

:root {
    --qq-red: #b3261e; --qq-orange: #a24c00; --qq-gold: #7a5c00; --qq-green: #1e6b3a; --qq-teal: #0d6b6b;
    --qq-blue: #1b55b3; --qq-purple: #6f3fb0; --qq-pink: #b0286e; --qq-gray: #666;
}
[data-theme="dark"] {
    --qq-red: #ff8a80; --qq-orange: #ffb066; --qq-gold: #f2cd5a; --qq-green: #7bd88f; --qq-teal: #5fd6d6;
    --qq-blue: #8fb8ff; --qq-purple: #c9a5ff; --qq-pink: #ff9ccb; --qq-gray: #a8a8a8;
}

/* ---- Page looks (author's choice; readers can override in the reader bar) ---- */
.pg { background: var(--pg-bg, var(--container-bg)); color: var(--pg-fg, var(--text-color)); }
.pg-look-paper, .pg-look-parchment, .pg-look-sepia {
    --qq-red: #b3261e; --qq-orange: #a24c00; --qq-gold: #7a5c00; --qq-green: #1e6b3a; --qq-teal: #0d6b6b;
    --qq-blue: #1b55b3; --qq-purple: #6f3fb0; --qq-pink: #b0286e; --qq-gray: #666;
    --border-color: #8b8173; --text-secondary: #5d564d;
}
.pg-look-paper     { --pg-bg: #ffffff; --pg-fg: #1d1d1b; --pg-link: #0b57b8; }
.pg-look-parchment { --pg-bg: #f6ecd6; --pg-fg: #3b2f20; --pg-link: #7a3e10; }
.pg-look-sepia     { --pg-bg: #e6d5b8; --pg-fg: #3d2e1b; --pg-link: #6b3410; }
.pg-look-night {
    --pg-bg: #16181d; --pg-fg: #e4e2dc; --pg-link: #8fb8ff;
    --qq-red: #ff8a80; --qq-orange: #ffb066; --qq-gold: #f2cd5a; --qq-green: #7bd88f; --qq-teal: #5fd6d6;
    --qq-blue: #8fb8ff; --qq-purple: #c9a5ff; --qq-pink: #ff9ccb; --qq-gray: #a8a8a8;
    --border-color: #6f6a62; --text-secondary: #b5b0a6;
}
.pg a { color: var(--pg-link, var(--link-color)); }

/* ---- Layout options (font stacks live in fonts.css) ---- */
.pg-size-small  { --pg-size: 1rem; }
.pg-size-medium { --pg-size: 1.125rem; }
.pg-size-large  { --pg-size: 1.3rem; }
.pg-spacing-tight  { --pg-lh: 1.55; }
.pg-spacing-normal { --pg-lh: 1.8; }
.pg-spacing-airy   { --pg-lh: 2.1; }
.pg-align-left    { --pg-align: left; }
.pg-align-justify { --pg-align: justify; }
.pg-align-center  { --pg-align: center; }

.pg .pg-text {
    font-family: var(--rd-font, var(--pg-font, Georgia, serif));
    font-size: calc(var(--pg-size, 1.125rem) * var(--rd-scale, 1));
    line-height: var(--rd-lh, var(--pg-lh, 1.8));
    text-align: var(--pg-align, left);
    color: inherit;
}
.pg .reader-page { line-height: inherit; }
.pg .pg-text p { margin: 0 0 1.25em; }
.pg .pg-text h1, .pg .pg-text h2, .pg .pg-text h3 { line-height: 1.25; margin: 1.4em 0 .6em; font-family: var(--rd-font, var(--pg-heading-font, inherit)); }
.pg .pg-text blockquote { margin: 1.25em 0; padding-left: 1em; border-left: 3px solid var(--border-color); font-style: italic; }
.pg .pg-text ul, .pg .pg-text ol { padding-left: 1.6em; margin: 0 0 1.25em; }
.pg .pg-text li { padding: 0; border: 0; font-size: inherit; }

/* Book-style paragraphs: indented, no gaps */
.pg-paragraphs-indented .pg-text p { margin: 0; text-indent: 1.6em; }
.pg-paragraphs-indented .pg-text :is(h1, h2, h3, hr, figure, blockquote) + p,
.pg-paragraphs-indented .pg-text p:first-child,
.pg-paragraphs-indented .pg-text p[class*="ql-align-center"],
.pg-paragraphs-indented .pg-text p[class*="qq-block-"] { text-indent: 0; }

/* Drop cap on the first paragraph of a chapter's first page */
.pg-dropcap-on .first-page > p:first-of-type::first-letter {
    float: left; font-size: 3.4em; line-height: .85; padding: .06em .1em 0 0; font-weight: 700;
}

/* ---- Inline formats ---- */
.qq-color-red { color: var(--qq-red); }       .qq-hl-red { background: color-mix(in srgb, var(--qq-red) 24%, transparent); }
.qq-color-orange { color: var(--qq-orange); } .qq-hl-orange { background: color-mix(in srgb, var(--qq-orange) 24%, transparent); }
.qq-color-gold { color: var(--qq-gold); }     .qq-hl-gold { background: color-mix(in srgb, var(--qq-gold) 26%, transparent); }
.qq-color-green { color: var(--qq-green); }   .qq-hl-green { background: color-mix(in srgb, var(--qq-green) 24%, transparent); }
.qq-color-teal { color: var(--qq-teal); }     .qq-hl-teal { background: color-mix(in srgb, var(--qq-teal) 24%, transparent); }
.qq-color-blue { color: var(--qq-blue); }     .qq-hl-blue { background: color-mix(in srgb, var(--qq-blue) 22%, transparent); }
.qq-color-purple { color: var(--qq-purple); } .qq-hl-purple { background: color-mix(in srgb, var(--qq-purple) 22%, transparent); }
.qq-color-pink { color: var(--qq-pink); }     .qq-hl-pink { background: color-mix(in srgb, var(--qq-pink) 22%, transparent); }
.qq-color-gray { color: var(--qq-gray); }     .qq-hl-gray { background: color-mix(in srgb, var(--qq-gray) 24%, transparent); }
[class*="qq-hl-"] { border-radius: 3px; padding: 0 .12em; }

.ql-size-small { font-size: .8em; } .ql-size-large { font-size: 1.35em; } .ql-size-huge { font-size: 1.9em; line-height: 1.2; }
.qq-smallcaps-on { font-variant: small-caps; letter-spacing: .05em; }
.pg-text code { font-family: ui-monospace, Consolas, Menlo, monospace; font-size: .92em; padding: .05em .3em; border-radius: 4px; background: color-mix(in srgb, currentColor 10%, transparent); }
.pg-text sub, .pg-text sup { line-height: 0; }

/* Spoilers: hidden in the reader until clicked; always visible while writing */
.qq-spoiler-on { border-radius: 3px; padding: 0 .15em; background: color-mix(in srgb, currentColor 14%, transparent); }
.reader-page .qq-spoiler-on:not(.revealed) { color: transparent; background: var(--pg-fg, var(--text-color)); cursor: pointer; user-select: none; }
.reader-page .qq-spoiler-on:not(.revealed) * { color: transparent; }
.reader-page .qq-spoiler-on:focus-visible { outline: 3px solid var(--pg-link, var(--link-color)); }

/* ---- Paragraph styles ---- */
.pg .pg-text .qq-block-verse { white-space: pre-wrap; margin: 0; padding-left: 1.5em; text-indent: 0; text-align: left; line-height: 1.6; }
.pg .pg-text .qq-block-verse + :not(.qq-block-verse) { margin-top: 1.25em; }
.pg .pg-text .qq-block-epigraph { margin: 1.5em 0 1.5em auto; max-width: 75%; text-align: right; font-style: italic; opacity: .92; }
.pg .pg-text .qq-block-note { margin: 0 0 .4em; padding: .6em 1em; border-left: 4px solid var(--border-color); border-radius: 0 8px 8px 0; background: color-mix(in srgb, currentColor 7%, transparent); font-family: system-ui, sans-serif; font-size: .9em; line-height: 1.55; text-indent: 0; }
.pg .pg-text .qq-block-box { margin: 0 0 .4em; padding: .6em 1em; border: 2px solid var(--qq-blue); border-radius: 8px; background: color-mix(in srgb, var(--qq-blue) 9%, transparent); font-family: ui-monospace, Consolas, Menlo, monospace; font-size: .9em; text-indent: 0; text-align: left; }
.pg .pg-text .qq-block-letter { margin: 0 0 .5em; padding: .9em 1.3em; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 4px; background: color-mix(in srgb, #c9a86a 22%, transparent); font-style: italic; text-indent: 0; box-shadow: 0 1px 3px #0002; }
.pg .pg-text .qq-block-message { display: block; width: fit-content; max-width: 82%; margin: .3em 0; padding: .45em .95em; border-radius: 1.2em; background: color-mix(in srgb, var(--qq-blue) 17%, transparent); font-family: system-ui, sans-serif; font-size: .95em; line-height: 1.45; text-indent: 0; text-align: left; }
.pg .pg-text .qq-block-message.ql-align-right { margin-left: auto; background: color-mix(in srgb, var(--qq-green) 18%, transparent); }
.pg-text .ql-indent-1 { padding-left: 3em; } .pg-text .ql-indent-2 { padding-left: 6em; } .pg-text .ql-indent-3 { padding-left: 9em; } .pg-text .ql-indent-4 { padding-left: 12em; }
.pg-text .ql-indent-5 { padding-left: 15em; } .pg-text .ql-indent-6 { padding-left: 18em; } .pg-text .ql-indent-7 { padding-left: 21em; } .pg-text .ql-indent-8 { padding-left: 24em; }
.pg-text .ql-align-center { text-align: center; } .pg-text .ql-align-right { text-align: right; } .pg-text .ql-align-justify { text-align: justify; }

/* ---- Scene breaks / dividers ---- */
.pg .pg-text hr { height: auto; margin: 2em auto; border: 0; border-top: 1px solid var(--border-color); width: 40%; overflow: visible; text-align: center; }
.pg .pg-text hr[class*="qq-hr-"] { width: auto; border: 0; }
.pg .pg-text hr[class*="qq-hr-"]::after { display: block; color: var(--pg-fg, var(--text-color)); opacity: .75; }
.pg .pg-text hr.qq-hr-line { width: 40%; border-top: 1px solid var(--border-color); }
.pg .pg-text hr.qq-hr-stars::after { content: "*   *   *"; letter-spacing: .3em; font-size: 1.2em; }
.pg .pg-text hr.qq-hr-fleuron::after { content: "\2766"; font-size: 1.6em; }
.pg .pg-text hr.qq-hr-dots::after { content: "\2022  \2022  \2022"; letter-spacing: .4em; }
.pg .pg-text hr.qq-hr-space { margin: 3.5em 0; }