.reading-preview {max-width:48rem;margin:2rem auto;background:var(--bg-1);border:1px solid var(--br1);border-radius:18px;overflow:hidden;color:var(--t1);box-shadow:0 14px 45px rgba(28,24,18,.06)}
.reading-header {padding:2rem 2.5rem 1.3rem;border-bottom:1px solid var(--br1);background:var(--bg-2)}
.reading-eyebrow {font:700 .72rem var(--ff-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ac);margin-bottom:.7rem}
.reading-header h2 {font:600 clamp(1.7rem,5vw,2.5rem)/1.2 var(--ff-lora);overflow-wrap:anywhere;margin:0 0 1rem}
.reading-status {font-size:.85rem;line-height:1.6;color:var(--t2)}
.reading-preparation {padding:1.5rem 2.5rem;line-height:1.8;color:var(--t2)}
.reading-preparation h3 {font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ac);margin:0 0 .5rem}
.reading-preparation p {white-space:pre-wrap;margin:0 0 1.2rem;overflow-wrap:anywhere}
.reading-text {font:400 1.12rem/1.95 var(--ff-lora),Georgia,serif;padding:1.5rem 3rem 2rem;overflow-wrap:anywhere}
.reading-text p {margin:0 0 1.25em;white-space:pre-line}
.reading-live-note {margin:0;padding:0 2rem 1.5rem;color:var(--t2);font:.85rem/1.6 var(--ff-ui)}
.reading-text p:first-child::first-letter {font-size:2.7em;line-height:1;float:left;margin:.12em .1em 0 0;color:var(--ac)}
.reading-actions {display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:1.25rem 2rem;border-top:1px solid var(--br1)}
.reading-actions button,.reading-revision button {border:0;border-radius:8px;background:var(--ac);color:white;padding:.85rem 1.15rem;font:700 .9rem var(--ff-ui);cursor:pointer}
.reading-actions a {font-size:.85rem;color:var(--t2);text-decoration:underline;text-underline-offset:3px}
.reading-revision {padding:1rem 2rem;background:var(--ac-bg);font-size:.85rem}
.reading-revision span {display:block;margin-bottom:.5rem}
.has-reading-preview #generationPage {margin-top:1rem!important}
.has-reading-preview #generationPage > div {box-shadow:none!important;border-width:1px!important}
@media(max-width:600px) {.reading-header,.reading-preparation {padding:1.3rem}.reading-text {padding:1.2rem 1.3rem;font-size:1.08rem;line-height:1.85}.reading-actions {padding:1.2rem}.reading-preview {margin:1rem auto;border-radius:12px}}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto}}

.has-reading-preview #generationWaitingTips {display:none}

.has-reading-preview #configSection {display:none!important}
.has-reading-preview .gen-main {min-height:0;padding-top:0;padding-bottom:0}
.has-reading-preview #generationPage > div > div:first-child {display:none}
.reading-actions:not(:has(button:not([hidden]))):not(:has(a:not([hidden]))) {display:none}

.reading-cast {display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.75rem;list-style:none;padding:0;margin:.75rem 0}
.reading-cast li {padding:1rem;border:1px solid var(--br1);border-radius:10px;background:var(--bg-2);overflow-wrap:anywhere}
.reading-cast strong,.reading-cast span {display:block}
.reading-cast strong {color:var(--t1);font-family:var(--ff-lora)}
.reading-cast span {font-size:.8rem;line-height:1.5;margin-top:.35rem}

/* The saved-book offer already has the purchase actions. Keep one decision. */
.has-reading-preview:has(#completionOutcomeOffer:not(.hidden)) #completionUpsellAnchor,
.has-reading-preview:has(#completionOutcomeOffer:not(.hidden)) #completionUpsellBtn {display:none}
.has-reading-preview:has(#completionOutcomeOffer:not(.hidden)) #completionAnother {flex:none;background:transparent!important;border:0!important;text-decoration:underline;font-weight:400!important;padding:.5rem 0!important}

.reading-actions.reader-in-view {position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);z-index:20;width:calc(100% - 2rem);max-width:44rem;box-sizing:border-box;padding:.8rem 1rem;background:var(--bg-1);border:1px solid var(--br1);border-radius:12px;box-shadow:0 4px 24px rgba(28,24,18,.14)}
.reading-preview:has(.reading-actions button:not([hidden])) .reading-text {padding-bottom:9rem}

/* Keep the fixed reading controls clear of the general feedback launcher. */
body:has(.reading-actions.reader-in-view button:not([hidden])) #feedbackFab {display:none}

.reading-navigation {display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:1rem 1.3rem;border-bottom:1px solid var(--br1)}
.reading-navigation[hidden] {display:none}
.reading-navigation button,.reading-navigation select {font:inherit;color:var(--t1);background:var(--bg-2);border:1px solid var(--br1);border-radius:8px;padding:.6rem;cursor:pointer}
.reading-navigation button:disabled {opacity:.45;cursor:default}
.reading-navigation label {font-size:.8rem}
.reading-navigation label span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.publication-message {font:400 .75rem/1.4 var(--ff-ui);color:var(--t2)}
.publication-message:not(:empty) {flex-basis:100%}

/* Backend stage weights are not measured time remaining. Let actual prose show
   progress; preserve status/reconnect messages without the misleading percent. */
.has-reading-preview #generationDetails,
.has-reading-preview #generationEstimatedProgress {display:none}
.has-reading-preview #generationPage > div {padding:1rem!important}

/* Let the opening establish its value before showing the existing paid offers. */
.has-reading-preview:has(#readingPreview[data-generating="true"]) #generationPricing,
.has-reading-preview:has(#readingPreview[data-generating="true"]) #generationFaq,
.has-reading-preview:has(#readingPreview[data-generating="true"]) .wab-footer {display:none}

/* The reader already shows live writing/packaging status. Keep internal scene
   counters and floating overlays away from the prose; error/recovery panels
   remain independent and visible when needed. */
.has-reading-preview:has(#readingPreview[data-generating="true"] #readingText:not([hidden])) #generationPage,
.has-reading-preview:has(#readingPreview[data-generating="true"] #readingText:not([hidden])) #feedbackFab {display:none!important}