/* css/nook-editor.css
   The Reading Nook look for create.html: the sign-in screen, the two waiting
   screens, and the story editor (preview and unlocked). Loaded after nook.css.

   The editor (js/modules/story-editor.js) builds its own markup from Tailwind
   classes and a 3,000-line inline style block that sits INSIDE #editor-view,
   so it comes later in the document than this sheet. Rules here that touch
   the editor carry !important on purpose; the markup and every id stay as
   they are, this sheet only repaints them. Nothing here changes a hook. */

/* ---------- Shell ---------- */
.create-main { min-height: calc(100vh - 66px - 120px); padding: 32px 0 56px; }
.create-main .hidden { display: none !important; }
body { overflow-x: hidden; }

/* ---------- Small pieces shared by the waiting screens ---------- */
.nook-spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--teal); animation: nook-spin 0.9s linear infinite; margin: 0 auto; }
.nook-spinner--inline { width: 20px; height: 20px; border-width: 3px; margin: 0; display: inline-block; }
@keyframes nook-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nook-spinner { animation: none; border-top-color: var(--line); } }

.nook-wait { max-width: 860px; margin: 0 auto; padding: 24px 24px 0; text-align: center; }
.nook-wait--small { padding-top: 80px; }
.nook-wait h1 { font-size: clamp(30px, 3.6vw, 42px); font-weight: 700; margin: 8px 0 12px; text-wrap: balance; }
.nook-wait h2 { font-size: 26px; font-weight: 700; margin: 18px 0 6px; }
.nook-wait > p, .nook-wait .lead { font-size: 18px; color: var(--muted); line-height: 1.5; margin: 0 auto; max-width: 620px; }
.nook-wait__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.nook-keep { font-family: inherit; font-style: normal; font-size: 16px; font-weight: 600; color: var(--muted); margin: 34px auto 0 !important; }

/* The steps, one path across the page: done (teal tick), now (honey), later (grey) */
.nook-steps { list-style: none; margin: 36px auto 0; padding: 0; display: flex; align-items: flex-start; justify-content: center; gap: 0; max-width: 780px; }
.nook-step { flex: 0 0 150px; display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0.55; transition: opacity 0.4s; }
.nook-step__circle { width: 72px; height: 72px; border-radius: 50%; background: var(--card) !important; border: 3px solid var(--line) !important; display: grid; place-items: center; box-shadow: none !important; margin: 0 0 10px; overflow: hidden; position: relative; transition: border-color 0.4s, background 0.4s; }
.nook-step__circle img, .nook-step__circle .inline-flex { width: 38px; height: 38px; object-fit: contain; }
.nook-step__circle .inline-flex img { width: 100%; height: 100%; }
.nook-step__words p { margin: 0; }
.nook-step__words .font-bold { font-size: 17px; color: var(--ink); }
.nook-step__words .text-sm { font-size: 14px; color: var(--muted); margin-top: 2px; }
.nook-step__line { flex: 1 1 40px; height: 4px; margin-top: 34px; border-radius: 4px; background: var(--line); overflow: hidden; }
.nook-step__fill { height: 100%; background: var(--teal); transition: width 0.8s ease; }
/* the editor paints its own tint and border on the stage cards while the book finishes; the circle carries the state instead */
.extension-stage-card { background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* now */
.nook-step.active { opacity: 1; }
.nook-step.active .nook-step__circle { border-color: var(--honey) !important; background: var(--honey-soft) !important; animation: nook-breathe 2.2s ease-in-out infinite; }
/* done */
.nook-step.completed { opacity: 1; }
.nook-step.completed .nook-step__circle { border-color: var(--teal) !important; background: #E6F4F2 !important; }
.nook-step.completed .nook-step__circle img { opacity: 0.9; }
/* the wizard swaps in a star sticker for done steps; keep the tick honest and small */
.nook-step .step-shine { display: none; }
@keyframes nook-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .nook-step.active .nook-step__circle { animation: none; } }

/* What is happening right now */
.nook-now { margin: 34px auto 0; max-width: 620px; background: #F1F7F5; border: 1px solid #D6E8E4; border-radius: var(--radius); padding: 24px 28px 22px; }
.nook-now__spinner { margin-top: 16px; display: flex; justify-content: center; }
.nook-now__spinner > * { margin: 0 auto; }
.nook-now__spinner .flex { justify-content: center; }
.nook-now__title { font-size: 22px; font-weight: 700; color: var(--ink) !important; margin: 0 0 6px; }
.nook-now__desc { font-size: 16px; color: var(--muted) !important; margin: 0; line-height: 1.5; }
/* the "Continue to Editor" link the wizard inserts after a picture failure */
#progress-spinner > div.rounded-full { width: 44px; height: 44px; border: 4px solid var(--line) !important; border-top-color: var(--teal) !important; box-shadow: none !important; }
#continue-to-editor-container { margin-top: 18px; }
#continue-to-editor-container p { font-size: 15px; color: var(--muted); }
#continue-to-editor-container a { background: var(--teal) !important; color: #fff !important; font-weight: 800; border-radius: 999px; padding: 12px 22px; box-shadow: 0 6px 18px rgba(45, 156, 146, 0.28) !important; transform: none !important; }
#continue-to-editor-container a:hover { background: var(--teal-ink) !important; }

/* Your book so far: the wizard and the editor both draw thumbnails in here */
.nook-sofar { margin: 26px auto 0; }
.nook-sofar > p, .nook-sofar__label { font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-ink) !important; margin: 0 0 12px !important; }
.nook-sofar .rounded-xl.overflow-hidden, .nook-sofar .rounded-lg.overflow-hidden { border: 3px solid #fff !important; box-shadow: 0 6px 16px rgba(42, 35, 64, 0.18) !important; border-radius: 4px !important; }
.nook-sofar .rounded-xl.overflow-hidden span, .nook-sofar .rounded-lg.overflow-hidden span { background: rgba(42, 35, 64, 0.72) !important; }
.nook-sofar .animate-pulse { background: var(--card) !important; border: 2px dashed var(--line) !important; color: var(--muted) !important; }
.nook-sofar .animate-pulse .inline-flex img { opacity: 0.55; }
/* the 12 page cells on the unlock wait */
.ext-cell { width: 56px; height: 56px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: var(--muted); background: var(--card); border: 2px solid var(--line); position: relative; overflow: hidden; }
.ext-cell img { width: 100%; height: 100%; object-fit: cover; }
.ext-cell .ext-cell__num { position: absolute; bottom: 0; right: 0; font-size: 10px; font-weight: 800; color: #fff; background: rgba(42, 35, 64, 0.72); padding: 1px 5px; border-top-left-radius: 6px; }
.ext-cell.is-ready { border-color: var(--teal); background: #E6F4F2; color: var(--teal-ink); }
.ext-cell.is-written { border-color: var(--honey); background: var(--honey-soft); color: var(--ink); }
.ext-cell.is-written img, .ext-cell.is-painting img, .ext-cell.is-refining img { width: 28px; height: 28px; opacity: 0.85; }
.ext-cell.is-painting { border-color: var(--honey); background: var(--honey-soft); animation: nook-breathe 2.2s ease-in-out infinite; }
.ext-cell.is-refining { border-color: var(--teal); background: #E6F4F2; animation: nook-breathe 2.2s ease-in-out infinite; }
.ext-cell.is-waiting { opacity: 0.7; }
.ext-cell.ext-thumb-pop { animation: extThumbPop 0.45s ease-out both; }
@keyframes extThumbPop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
#extension-page-progress .ext-note { margin-top: 12px; font-size: 14px; color: var(--muted); }

/* A line while they wait: its own small box, so it never runs into the line below */
.nook-tip { margin: 30px auto 0; max-width: 560px; background: var(--honey-soft); border: 1px solid #F1D9A6; border-radius: 14px; padding: 14px 18px 16px; text-align: left; }
.nook-tip__label { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #8A6516; margin: 0 0 6px !important; }
.nook-fact { margin: 0 !important; font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 17px; color: var(--ink) !important; line-height: 1.5; display: flex; gap: 10px; align-items: flex-start; transition: opacity 0.5s; }
.nook-fact .inline-flex { flex: 0 0 auto; margin-top: 3px; }
.nook-fact .inline-flex img, .nook-fact img { width: 22px; height: 22px; object-fit: contain; }
.nook-keep { display: flex; align-items: center; justify-content: center; gap: 8px; }
.nook-keep img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }

/* the burst of pages when the book finishes */
#extension-progress-view.extension-completing { animation: extensionComplete 0.6s ease-out forwards; }
@keyframes extensionComplete {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.98); }
}

/* ---------- Opening an existing book ---------- */
.nook-opening { position: fixed; inset: 0; z-index: 40; background: var(--paper); display: flex; align-items: center; justify-content: center; }
.nook-opening.hidden { display: none !important; }
.nook-opening .nook-wait--small { padding-top: 0; }

/* ---------- Sign in ---------- */
.nook-signin { max-width: 560px; margin: 40px auto 0; padding: 0 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.nook-signin h1 { font-size: clamp(30px, 3.6vw, 40px); font-weight: 700; margin: 0; text-wrap: balance; }
.nook-signin .lead { font-size: 18px; color: var(--muted); line-height: 1.5; margin: 0 0 10px; }
.nook-google-btn { width: min(100%, 360px); font-size: 19px; padding: 16px 26px; }
.nook-google-btn:disabled { opacity: 0.7; cursor: wait; }
.nook-google-mark { width: 24px; height: 24px; flex: 0 0 auto; }
.nook-signin .fine { font-size: 14px; color: var(--muted); margin: 0; max-width: 400px; }
.nook-signin__back { margin-top: 18px; }

/* =====================================================================
   THE EDITOR
   ===================================================================== */

/* ---------- Ground: the same painted desk the cover was made on ---------- */
/* The desk is a pseudo-element BEHIND the editor (z-index -1 inside the
   editor's own stacking context). The editor's children are left alone:
   giving them position:relative would pull its fixed dialogs into the flow. */
/* Two skies, each running from the top of the editor to the footer, with a
   living layer on top (js/nook-scene.js). While the book is a preview the
   sun is going down (a sunset sky, the town in silhouette along the bottom,
   birds and a balloon). Once it is theirs it is bedtime (the night town
   painting, a moon high up, stars down to the rooftops, fireflies). The night
   painting is anchored at the foot of the page with its painted sky masked
   off, so our own deeper sky runs from the top down to the rooftops. --ns-img
   is the painting's height on the page, set by the script. */
#editor-view { position: relative; isolation: isolate; padding: 24px 0 56px; --ns-img: 1190px; }
/* open sky and rooftops at the foot of the page, so the town and what happens over it can be seen */
#editor-view.nook-on-desk { padding-bottom: 300px; }
@media (max-width: 1100px) { #editor-view.nook-on-desk { padding-bottom: 170px; } }
/* the editor's own phone rule zeroes the padding with !important, so this one has to shout too;
   on phones in preview the town sits just above the unlock sash */
@media (max-width: 768px) {
    body #editor-view.nook-on-desk { padding-bottom: 200px !important; }
}
body.nook-editor-open .create-main { padding-top: 0; padding-bottom: 0; }
#editor-view.nook-on-desk::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 100vw; max-width: 100vw; transform: translateX(-50%);
    pointer-events: none; z-index: -1;
}
#editor-view[data-ground="sunset"] { background: linear-gradient(#5E5A93 0%, #9A7BA6 22%, #D9929C 46%, #F0B486 68%, #F6D094 86%, #F8DDA6 100%); }
#editor-view[data-ground="sunset"]::before { background: none; }
#editor-view[data-ground="night"] { background: linear-gradient(#183A4E 0%, #23495E 40%, #3A6A7C 100%); }
#editor-view[data-ground="night"]::before {
    background: url('/images/nook/painted/closing-lg.webp') center bottom / 100% auto no-repeat;
    -webkit-mask-image: linear-gradient(to top, #000 0, #000 calc(var(--ns-img) * 0.50), transparent calc(var(--ns-img) * 0.62));
    mask-image: linear-gradient(to top, #000 0, #000 calc(var(--ns-img) * 0.50), transparent calc(var(--ns-img) * 0.62));
}
/* the small words around the book: light on the night, ink on the sunset */
#editor-view[data-ground="night"] #auto-save-indicator { color: rgba(255, 255, 255, 0.82) !important; }
#editor-view[data-ground="night"] #read-to-me-row .dm-nar-status { color: rgba(255, 255, 255, 0.9); }
#editor-view[data-ground="night"] .page-rail-personal-label { color: rgba(255, 255, 255, 0.85) !important; }
#editor-view[data-ground="night"] #book-container { box-shadow: 0 26px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08) !important; }
#editor-view[data-ground="sunset"] #auto-save-indicator { color: #3B2E4F !important; }
#editor-view[data-ground="sunset"] #read-to-me-row .dm-nar-status { color: #3B2E4F; }
#editor-view[data-ground="sunset"] #book-container { box-shadow: 0 26px 50px rgba(59, 46, 79, 0.35) !important; }
/* the status box above the book never touches the header */
#editor-view > .mb-4.relative { margin-top: 0 !important; }

/* ---------- The living layer ---------- */
.nook-scene { position: absolute; left: 50%; top: 0; bottom: 0; width: 100vw; max-width: 100vw; transform: translateX(-50%); overflow: hidden; pointer-events: none; z-index: -1; }
.nook-scene > * { pointer-events: none; }
/* night */
.ns-moon { position: absolute; top: 56px; left: 7%; width: 120px; height: 120px; filter: drop-shadow(0 0 22px rgba(247, 239, 210, 0.45)); }
.ns-stars { position: absolute; left: 0; right: 0; top: 0; }
.ns-star { position: absolute; border-radius: 50%; background: #F6F1DE; opacity: 0.85; animation: ns-twinkle 4s ease-in-out infinite alternate; box-shadow: 0 0 4px rgba(246, 241, 222, 0.7); }
.ns-star--gold { background: #F3C96B; box-shadow: 0 0 6px rgba(243, 201, 107, 0.8); }
@keyframes ns-twinkle { 0% { opacity: 0.25; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.15); } }
.ns-cloud { position: absolute; left: -30%; width: 34vw; max-width: 460px; height: 110px; border-radius: 50%; opacity: 0.13; filter: blur(22px);
    background: radial-gradient(closest-side, #fff 0, rgba(255,255,255,0.7) 55%, transparent 100%); animation: ns-drift linear infinite; }
.nook-scene--sunset .ns-cloud { opacity: 0.42; background: radial-gradient(closest-side, #FFF1E2 0, rgba(255, 230, 214, 0.75) 55%, transparent 100%); }
@keyframes ns-drift { from { left: -35%; } to { left: 110%; } }
.ns-flies { position: absolute; left: 0; right: 0; }
.ns-fly { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #FFE49A; box-shadow: 0 0 8px 3px rgba(255, 228, 154, 0.75);
    animation: ns-wander ease-in-out infinite alternate, ns-blink ease-in-out infinite alternate; }
@keyframes ns-wander { from { transform: translate(0, 0); } to { transform: translate(var(--dx), var(--dy)); } }
@keyframes ns-blink { 0%, 30% { opacity: 0; } 60%, 100% { opacity: 1; } }
/* a shooting star crosses most of the sky */
.ns-shoot { position: absolute; width: 220px; height: 2px; border-radius: 2px; transform-origin: 100% 50%; transform: rotate(14deg);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.9) 70%, #fff 100%); animation: ns-shoot 3.6s cubic-bezier(0.2, 0.6, 0.4, 1) forwards; }
.ns-shoot::after { content: ''; position: absolute; right: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px rgba(255,255,255,0.85); }
@keyframes ns-shoot { 0% { opacity: 0; transform: rotate(14deg) translateX(0); } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: rotate(14deg) translateX(70vw); } }
/* a little rocket, up and away */
.ns-rocket { position: absolute; width: 34px; height: 64px; filter: drop-shadow(0 0 10px rgba(255, 190, 100, 0.55)); animation: ns-launch 14s cubic-bezier(0.3, 0, 0.6, 1) forwards; }
.ns-rocket .ns-flame { transform-origin: 50% 0; animation: ns-flame 0.18s ease-in-out infinite alternate; }
@keyframes ns-flame { from { transform: scaleY(0.8) scaleX(0.9); } to { transform: scaleY(1.25) scaleX(1.1); } }
@keyframes ns-launch { 0% { opacity: 0; transform: translate(0, 0) rotate(-8deg); } 6% { opacity: 1; } 60% { transform: translate(18vw, -60vh) rotate(-16deg); } 100% { opacity: 0; transform: translate(34vw, -120vh) rotate(-22deg); } }
/* a bird with wings that beat */
.ns-bird { position: absolute; left: -80px; width: 60px; height: 40px; animation: ns-cross 18s linear forwards; }
.ns-bird--rtl { left: auto; right: -80px; animation-name: ns-cross-rtl; }
.ns-bird .ns-wing { transform-box: view-box; transform-origin: 32px 22px; animation: ns-beat 0.42s ease-in-out infinite alternate; }
.ns-bird .ns-wing--back { animation-delay: -0.1s; }
@keyframes ns-beat { from { transform: rotate(-22deg); } to { transform: rotate(50deg); } }
@keyframes ns-cross { 0% { transform: translate(0, 0); } 50% { transform: translate(calc(50vw + 60px), -22px); } 100% { transform: translate(calc(100vw + 140px), 6px); } }
@keyframes ns-cross-rtl { 0% { transform: translate(0, 0) scaleX(-1); } 50% { transform: translate(calc(-50vw - 60px), -22px) scaleX(-1); } 100% { transform: translate(calc(-100vw - 140px), 6px) scaleX(-1); } }
.ns-flock { position: absolute; left: -250px; width: 240px; height: 136px; animation: ns-cross 24s linear forwards; }
.ns-flock--rtl { left: auto; right: -250px; animation-name: ns-cross-rtl; }
.ns-flock .ns-bird { position: absolute; right: auto; animation: none; width: 40px; height: 27px; }
/* sunset */
.ns-sun { position: absolute; left: 84%; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, #FFF3C4 0, #FFE08A 45%, #FDBF6A 70%, rgba(253, 191, 106, 0) 71%);
    box-shadow: 0 0 80px 30px rgba(255, 214, 140, 0.55), 0 0 200px 80px rgba(255, 190, 120, 0.25); animation: ns-sunglow 6s ease-in-out infinite alternate; }
@keyframes ns-sunglow { from { box-shadow: 0 0 80px 30px rgba(255, 214, 140, 0.55), 0 0 200px 80px rgba(255, 190, 120, 0.25); } to { box-shadow: 0 0 95px 38px rgba(255, 214, 140, 0.62), 0 0 240px 100px rgba(255, 190, 120, 0.3); } }
.ns-town { position: absolute; left: 0; right: 0; bottom: 0; }
.ns-town svg { display: block; width: 100%; height: auto; }
.ns-town .ns-win { animation: ns-window ease-in-out infinite alternate; }
@keyframes ns-window { 0%, 40% { opacity: 0.15; } 70%, 100% { opacity: 0.95; } }
.ns-balloon { position: absolute; left: -90px; width: 64px; height: 92px; animation: ns-float 40s linear forwards, ns-bob 3s ease-in-out infinite alternate; }
@keyframes ns-float { from { left: -90px; } to { left: calc(100% + 40px); } }
@keyframes ns-bob { from { margin-top: 0; } to { margin-top: 14px; } }
.ns-butterfly { position: absolute; left: -70px; width: 46px; height: 34px; animation: ns-flutter 18s linear forwards; }
.ns-butterfly--rtl { left: auto; right: -70px; animation-name: ns-flutter-rtl; }
.ns-butterfly .ns-wing { transform-origin: 22px 16px; animation: ns-flap 0.32s ease-in-out infinite alternate; }
.ns-butterfly .ns-wing--r { animation-direction: alternate-reverse; }
@keyframes ns-flap { from { transform: scaleX(1); } to { transform: scaleX(0.35); } }
@keyframes ns-flutter { 0% { transform: translate(0, 0); } 25% { transform: translate(25vw, -40px); } 50% { transform: translate(50vw, 30px); } 75% { transform: translate(75vw, -50px); } 100% { transform: translate(calc(100vw + 120px), 0); } }
@keyframes ns-flutter-rtl { 0% { transform: translate(0, 0); } 25% { transform: translate(-25vw, -40px); } 50% { transform: translate(-50vw, 30px); } 75% { transform: translate(-75vw, -50px); } 100% { transform: translate(calc(-100vw - 120px), 0); } }
.ns-plane { position: absolute; left: 0; top: 0; width: 52px; height: 26px; opacity: 0; offset-rotate: auto; animation: ns-fly 12s cubic-bezier(0.3, 0, 0.7, 1) forwards; }
.ns-plane svg { display: block; width: 100%; height: 100%; }
@keyframes ns-fly { 0% { offset-distance: 0%; opacity: 0; } 5% { opacity: 0.95; } 94% { opacity: 0.95; } 100% { offset-distance: 100%; opacity: 0; } }
.ns-plane--simple { left: -80px; opacity: 0.9; animation: ns-glide 10s ease-in-out forwards; }
@keyframes ns-glide { 0% { transform: translate(0, 0) rotate(-6deg); } 40% { transform: translate(40vw, 60px) rotate(4deg); } 100% { transform: translate(calc(100vw + 140px), -30px) rotate(-10deg); } }
/* sunset: the moon already up, the first stars coming out, high pink wisps */
.ns-stars--dusk { height: 38%; }
.ns-star--dusk { opacity: 0; background: #FFF6E3; box-shadow: 0 0 4px rgba(255, 246, 227, 0.6); animation: ns-emerge 6s ease-out both, ns-twinkle-soft 4s ease-in-out infinite alternate; }
@keyframes ns-emerge { from { opacity: 0; } to { opacity: 0.85; } }
@keyframes ns-twinkle-soft { from { opacity: 0.35; transform: scale(0.85); } to { opacity: 0.85; transform: scale(1.1); } }
.ns-wisp { position: absolute; left: -50%; height: 14px; border-radius: 50%; filter: blur(7px); background: linear-gradient(90deg, rgba(255, 214, 224, 0) 0, rgba(255, 226, 232, 0.95) 30%, rgba(255, 240, 236, 0.95) 70%, rgba(255, 214, 224, 0) 100%); animation: ns-drift linear infinite; }
/* a kite on its string, swaying from the hand at the bottom left */
.ns-kite { position: absolute; width: 176px; height: 270px; transform-origin: 2% 100%; animation: ns-kite-sway 4.5s ease-in-out infinite alternate, ns-appear 26s ease-in-out forwards; }
.ns-kite svg { display: block; width: 100%; height: 100%; }
.ns-kite .ns-kite-tail { transform-box: view-box; transform-origin: 200px 150px; animation: ns-tail 1.1s ease-in-out infinite alternate; }
@keyframes ns-kite-sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes ns-tail { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes ns-appear { 0% { opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
/* a party balloon that got away */
.ns-lost { position: absolute; width: 40px; height: 92px; animation: ns-rise 44s linear forwards; }
.ns-lost svg { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; animation: ns-sway 2.8s ease-in-out infinite alternate; }
@keyframes ns-rise { 0% { opacity: 0; } 6% { opacity: 1; } 96% { opacity: 1; } 100% { bottom: calc(100% + 40px); opacity: 0; } }
@keyframes ns-sway { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
/* the biplane and its banner */
.ns-biplane { position: absolute; left: -420px; display: flex; align-items: center; gap: 0; animation: ns-tow 26s linear forwards, ns-bob 2.6s ease-in-out infinite alternate; }
.ns-biplane__plane { width: 120px; height: 60px; }
.ns-biplane__plane svg { display: block; width: 100%; height: 100%; }
.ns-biplane .ns-prop { transform-box: view-box; transform-origin: 104px 30px; animation: ns-spin 0.12s linear infinite; }
.ns-rope { width: 44px; height: 2px; background: #3B2E4F; opacity: 0.7; margin-top: 2px; }
.ns-banner { background: #FFFDF7; color: #3B2E4F; border: 1.5px solid #3B2E4F; border-radius: 6px; padding: 6px 16px; font-weight: 800; font-size: 17px; white-space: nowrap; font-family: 'Nunito', system-ui, sans-serif; transform-origin: 100% 50%; animation: ns-flutter-banner 1.4s ease-in-out infinite alternate; }
@keyframes ns-tow { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 460px)); } }
@keyframes ns-spin { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
@keyframes ns-flutter-banner { from { transform: skewY(-3deg); } to { transform: skewY(3deg); } }
/* soap bubbles */
.ns-bubble { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.75); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.75) 0, rgba(255, 255, 255, 0.08) 45%, rgba(190, 225, 255, 0.18) 100%); box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.45); opacity: 0; animation: ns-bubble ease-out forwards, ns-wobble ease-in-out infinite alternate; }
@keyframes ns-bubble { 0% { transform: translate(0, 0) scale(0.6); opacity: 0; } 8% { opacity: 0.95; } 88% { opacity: 0.9; transform: translate(var(--dx), calc(var(--rise) * -1)) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--rise) * -1 - 10px)) scale(1.25); } }
@keyframes ns-wobble { from { margin-left: -4px; } to { margin-left: 4px; } }
/* a rainbow over the rooftops */
.ns-rainbow { position: absolute; width: 38vw; max-width: 560px; aspect-ratio: 2 / 1; border-radius: 900px 900px 0 0; opacity: 0; animation: ns-rainbow 18s ease-in-out forwards;
    background: radial-gradient(circle at 50% 100%, transparent 62%, #E8563F 62.5% 65%, #F6A23B 65% 67.5%, #F6C46B 67.5% 70%, #2D9C92 70% 72.5%, #3F7FBF 72.5% 75%, #7B5EA7 75% 77.5%, transparent 78%);
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 35%); mask-image: linear-gradient(to top, transparent 0, #000 35%); }
@keyframes ns-rainbow { 0% { opacity: 0; } 30% { opacity: 0.55; } 70% { opacity: 0.55; } 100% { opacity: 0; } }
/* a jet far up, with a contrail */
.ns-jet { position: absolute; left: -300px; width: 18px; height: 6px; border-radius: 3px; background: #fff; opacity: 0.85; animation: ns-jet 44s linear forwards; }
.ns-jet::before { content: ''; position: absolute; right: 100%; top: 1.5px; width: 320px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.85) 100%); }
.ns-jet--rtl { left: auto; right: -300px; animation-name: ns-jet-rtl; }
.ns-jet--rtl::before { right: auto; left: 100%; background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.85) 100%); }
@keyframes ns-jet { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 340px)); } }
@keyframes ns-jet-rtl { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 340px)); } }
/* chimney smoke */
.ns-puff { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: rgba(110, 92, 128, 0.42); filter: blur(2.5px); animation: ns-puff 4.2s ease-out forwards; }
@keyframes ns-puff { 0% { transform: translate(0, 0) scale(0.5); opacity: 0.8; } 100% { transform: translate(var(--px, 24px), var(--up, -110px)) scale(2.4); opacity: 0; } }
@media (max-width: 1100px) {
    .ns-moon { top: 20px; left: auto; right: 6%; width: 74px; height: 74px; }
    .ns-sun { width: 88px; height: 88px; left: 72%; }
    .ns-kite { width: 104px; height: 160px; }
    .ns-biplane { zoom: 0.72; }
    .ns-rainbow { width: 70vw; }
    .ns-bird { width: 46px; height: 31px; }
    .ns-flock { zoom: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
    .ns-star, .ns-cloud, .ns-fly, .ns-bird, .ns-bird .ns-wing, .ns-flock, .ns-butterfly, .ns-plane, .ns-rocket, .ns-rocket .ns-flame, .ns-shoot, .ns-sun, .ns-balloon, .ns-town .ns-win, .ns-wisp, .ns-kite, .ns-kite .ns-kite-tail, .ns-lost, .ns-lost svg, .ns-puff, .ns-biplane, .ns-biplane .ns-prop, .ns-banner, .ns-bubble, .ns-rainbow, .ns-jet { animation: none !important; }
    .ns-star--dusk { opacity: 0.6; }
    .ns-fly { opacity: 0.7; }
}
/* the old night sky is retired: no stars, no shooting stars */
#starfield-overlay, .starry-bg, .starry-bg-twilight, .starry-bg-midnight, .shooting-star, #sparkle-container { display: none !important; }
body.theme-twilight, body.theme-midnight { background: var(--paper) !important; color: var(--ink); }

/* ---------- The status pill above the book ---------- */
#editor-status-bar {
    background: rgba(255, 255, 255, 0.94) !important; border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-sm) !important; border-radius: 999px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    padding: 12px 22px !important; gap: 10px 18px !important; max-width: min(100% - 32px, 1200px); flex-wrap: wrap; justify-content: center;
}
#editor-status-bar h1 { font-family: 'Lora', Georgia, serif !important; font-weight: 500 !important; font-size: 20px !important; letter-spacing: 0 !important; }
#editor-status-bar #story-title-text, #editor-status-bar #story-title-text span { color: var(--ink) !important; text-shadow: none !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: var(--ink) !important; }
#editor-status-bar #story-subtitle { color: var(--muted) !important; font-size: 14px !important; }
#editor-status-bar button { font-family: inherit; }
#autofill-pages-btn { background: var(--honey) !important; border: 0 !important; color: var(--ink) !important; font-weight: 800 !important; box-shadow: none !important; }

/* ---------- The book ---------- */
#book-container {
    background: #3A2E52 !important; /* a cloth cover, one shade off the ink */
    border-radius: 14px !important; padding: 18px !important;
    box-shadow: 0 26px 50px rgba(42, 35, 64, 0.32), 0 4px 10px rgba(42, 35, 64, 0.18) !important;
}
#book-container > .absolute.inset-0 { display: none !important; } /* the star and glow layers */
#book-container > .book-spine { display: block; background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.14) 42%, rgba(0,0,0,0.26) 50%, rgba(0,0,0,0.14) 58%, rgba(0,0,0,0) 100%) !important; }
.magical-book { transform: none !important; }
.magical-book:hover { transform: none !important; box-shadow: 0 26px 50px rgba(42, 35, 64, 0.32), 0 4px 10px rgba(42, 35, 64, 0.18) !important; }
.book-floor-shadow { display: none !important; }
#left-page, #right-page, .page-container { background: #FFFDF8 !important; border-radius: 6px !important; }
/* the turning leaf and the page it lands on are clones without ids: they get the same paper, so the page
   underneath never shows through (the old right page used to double up with the new one mid-turn) */
.page-turn-piece, .page-turn-face { background: #FFFDF8 !important; border-radius: 6px !important; }
.page-turn-piece > .page-container, .page-turn-face > .page-container { background: #FFFDF8 !important; }
#left-page-image, #right-page-image { border-radius: 6px !important; border: 1px solid var(--line) !important; box-shadow: none !important; background: var(--frame) !important; }
.magical-image-frame { position: relative; overflow: hidden; transition: none !important; }
.magical-image-frame::before { display: none !important; }
.magical-image-frame:hover { transform: none !important; box-shadow: none !important; }
.story-text-area { font-family: 'Lora', Georgia, serif !important; color: var(--ink) !important; }
.story-text-area:focus { outline: none; background: var(--honey-soft) !important; border-radius: 8px; }
.edit-hint { color: var(--teal-ink) !important; background: var(--card); border: 1px solid var(--line); }
.page-number { color: var(--muted) !important; }
/* the redo pill on every picture: white paper with ink, so it reads on any picture */
.redo-control { background: rgba(255, 255, 255, 0.95) !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; box-shadow: 0 6px 16px rgba(42, 35, 64, 0.25) !important; backdrop-filter: none !important; font-family: inherit; font-weight: 800 !important; }
.redo-control:hover { background: #fff !important; }
.redo-control .redo-count { color: var(--muted); font-weight: 700; }
.redo-control svg { color: var(--teal-ink); }
.redo-control--buy { background: var(--honey) !important; color: var(--ink) !important; }
.new-image-ready { outline: 3px solid var(--teal) !important; outline-offset: 2px; animation: none !important; }

/* Page arrows: the same round white buttons as Back to top */
#prev-page-btn, #next-page-btn {
    background: var(--card) !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important;
    box-shadow: 0 8px 22px rgba(42, 35, 64, 0.16) !important; width: 56px !important; height: 56px !important;
}
#prev-page-btn:hover, #next-page-btn:hover { background: var(--paper) !important; transform: translateY(-50%) !important; }
#prev-page-btn > div, #next-page-btn > div { display: none !important; }
#next-page-btn.is-unlock { background: var(--honey) !important; border-color: var(--honey) !important; color: var(--ink) !important; }

/* Read to me: the storyteller's bookmark, honey like the demo page */
#read-to-me-row .dm-nar-btn { background: var(--honey) !important; color: var(--ink) !important; box-shadow: 0 6px 18px rgba(228, 168, 59, 0.35) !important; font-weight: 800 !important; }
#read-to-me-row .dm-nar-btn:hover { box-shadow: 0 10px 24px rgba(228, 168, 59, 0.45) !important; }

/* The page numbers under the book */
.page-rail-btn { background: var(--card) !important; border: 1.5px solid var(--line) !important; color: var(--ink) !important; font-family: inherit !important; font-weight: 700 !important; box-shadow: none !important; }
.page-rail-btn:hover { border-color: var(--ink) !important; }
.page-rail-btn.is-active { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.page-rail-btn--locked { background: var(--honey-soft) !important; border-color: var(--honey) !important; color: var(--ink) !important; }
.page-rail-btn--personal { opacity: 1 !important; background: rgba(255, 255, 255, 0.7) !important; border: 1.5px dashed var(--muted) !important; color: var(--muted) !important; }
.page-rail-btn--personal.is-included { background: #E6F4F2 !important; border: 1.5px solid var(--teal) !important; color: var(--teal-ink) !important; }
.page-rail-btn--personal.is-included::before { content: '\2713 '; font-weight: 800; }
.page-rail-btn--personal.is-active, .page-rail-btn--personal.is-included.is-active { background: var(--ink) !important; border: 1.5px solid var(--ink) !important; color: #fff !important; }
.page-rail-personal-label { color: var(--muted) !important; }
#auto-save-indicator { color: var(--muted) !important; }
#auto-save-indicator .auto-save-text { font-size: 13px; }

/* ---------- Sections under the book (cover, print and save) ---------- */
#cover-section, .export-section {
    background: #FFFDF8 !important; border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important; box-shadow: var(--shadow-sm) !important; padding: 26px 28px !important;
}
#cover-section h3, .export-section h3 { color: var(--ink) !important; font-size: 22px !important; font-weight: 700 !important; }
#cover-section h3 img, .export-section h3 img { display: none; }
.export-section p { color: var(--muted) !important; }
#story-cover-display { border-radius: 6px !important; border: 6px solid #fff; box-shadow: 0 14px 30px rgba(42, 35, 64, 0.22) !important; background: var(--frame) !important; }
.cover-editor-card { background: var(--paper) !important; border: 1px solid var(--line) !important; box-shadow: none !important; }
.magical-export-btn { transform: none !important; font-family: inherit; }
.magical-export-btn:hover { transform: none !important; }
.magical-export-btn img { filter: none; }

/* ---------- Unlock: the right-hand card on a desktop ---------- */
#unlock-full-content > div { border-radius: var(--radius) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; }
#unlock-full-content h2 { color: var(--ink) !important; font-size: 22px !important; }
#unlock-full-content .border-yellow-400 { border-color: var(--honey) !important; background: #FFFDF8 !important; border-radius: 14px !important; }
#unlock-full-content .bg-yellow-500 { background: var(--honey) !important; color: var(--ink) !important; }
#unlock-full-content .text-yellow-700 { color: var(--muted) !important; }
#unlock-full-content button.bg-yellow-500 { background: var(--honey) !important; color: var(--ink) !important; border-radius: 999px !important; font-size: 17px !important; font-weight: 800 !important; box-shadow: 0 6px 18px rgba(228, 168, 59, 0.38) !important; }
#unlock-full-content button.bg-yellow-500:hover { background: #D99A2B !important; }
#unlock-full-content .text-green-500 { color: var(--teal) !important; }
#unlock-full-content .border-purple-200 { border-color: var(--line) !important; border-radius: 12px !important; }
#unlock-full-content .border-purple-200:hover { background: var(--paper) !important; }
#unlock-full-content .text-purple-600 { color: var(--teal-ink) !important; }
#unlock-full-content .text-emerald-600 { color: var(--teal-ink) !important; background: #E6F4F2 !important; }
#unlock-full-content .bg-gray-50 { background: var(--paper) !important; }
#unlock-full-content .opacity-80 { opacity: 1 !important; }
#unlock-full-content .text-gray-600, #unlock-full-content .text-gray-800 { color: var(--ink) !important; }
#unlock-full-content .text-gray-400, #unlock-full-content .text-gray-500 { color: var(--muted) !important; }
#unlock-full-content .group-hover\:text-gray-900 { color: var(--ink) !important; }
#unlock-collapse-btn { color: var(--muted) !important; }
#unlock-desktop-tab { background: var(--honey) !important; color: var(--ink) !important; }
/* the bottom sash on tablets and phones */
/* (body prefix: the editor's own sash rules carry !important at the same specificity) */
body #unlock-sash { background: var(--honey-soft) !important; border-top: 2px solid var(--honey) !important; box-shadow: 0 -8px 24px rgba(42, 35, 64, 0.16) !important; }
body #unlock-sash::before { display: none !important; }
body #unlock-sash .font-bold.text-gray-900 { color: var(--ink) !important; }
body #unlock-sash .text-xs.text-gray-500 { color: var(--muted) !important; font-weight: 600 !important; }
body #unlock-sash > div > div > div.w-10.h-10 { background: var(--honey) !important; box-shadow: none !important; }
body #unlock-sash .bg-gradient-to-r { background: var(--teal) !important; color: #fff !important; }
#unlock-sidebar.unlock-sidebar-attention { animation: none !important; box-shadow: none !important; transform: translateY(-50%) !important; }
#unlock-sidebar.unlock-sidebar-attention #unlock-full-content > div { animation: nook-attention 1.3s ease-in-out 2; }
#unlock-sidebar.unlock-sidebar-attention #unlock-full-content button.bg-yellow-500 { animation: nook-attention-btn 1.3s ease-in-out 2; }
@keyframes nook-attention { 0%, 100% { box-shadow: var(--shadow); transform: scale(1); } 50% { box-shadow: 0 0 0 5px rgba(228, 168, 59, 0.55), 0 0 46px 14px rgba(228, 168, 59, 0.45), var(--shadow); transform: scale(1.02); } }
@keyframes nook-attention-btn { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* Laptops with the unlock panel open. The editor reserves 344 px for the panel, but the page
   arrows sit 80 px outside the book, so between about 1180 and 1440 px wide the next arrow slid
   under the panel (1366x768 is the most common laptop). Pulling the book in by the arrow width
   keeps both arrows clear. Wider screens have the room already. */
@media (min-width: 769px) and (max-width: 1499px) {
    body:has(#unlock-sidebar:not(.hidden):not(.unlock-collapsed)) #editor-view .book-3d-container { margin-left: 84px; margin-right: 84px; }
}
/* The panel is 712 px tall and was centered on the whole window, so on screens under about
   800 px tall its top and close button went under the sticky header. Center it in the space
   below the header and let it scroll inside itself when that space is short. */
@media (min-width: 769px) {
    #unlock-sidebar:not(.unlock-collapsed) { top: calc(50% + 34px) !important; max-height: calc(100vh - 84px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 768px) {
    #unlock-sidebar.unlock-sidebar-attention { transform: none !important; }
    body #unlock-sidebar.unlock-sidebar-attention #unlock-sash { animation: nook-attention-sash 1.3s ease-in-out 2; }
    @keyframes nook-attention-sash { 0%, 100% { box-shadow: 0 -8px 24px rgba(42, 35, 64, 0.16); } 50% { box-shadow: 0 0 0 5px rgba(228, 168, 59, 0.55), 0 -10px 46px 14px rgba(228, 168, 59, 0.45); } }
}
/* "Scroll down to see the rest": a real pill with a nodding arrow, bottom left, clear of the page numbers and the unlock card */
#preview-scroll-indicator { left: 16% !important; bottom: 22px !important; display: flex; align-items: center; gap: 12px; background: #FFFDF8 !important; color: var(--ink) !important; border: 1px solid var(--line); border-radius: 999px; padding: 7px 22px 7px 7px; box-shadow: 0 14px 34px rgba(42, 35, 64, 0.2), 0 2px 6px rgba(42, 35, 64, 0.08) !important; font-family: inherit; font-weight: 700; font-size: 15.5px; letter-spacing: 0.01em; animation: nook-hint-in 0.9s ease-out both !important; }
#preview-scroll-indicator.hidden { display: none !important; }
#preview-scroll-indicator:hover { background: #fff !important; box-shadow: 0 18px 40px rgba(42, 35, 64, 0.24), 0 2px 6px rgba(42, 35, 64, 0.08) !important; }
#preview-scroll-indicator:hover .nook-scroll-hint__arrow { background: var(--teal); }
#preview-scroll-indicator:hover .nook-scroll-hint__arrow::before, #preview-scroll-indicator:hover .nook-scroll-hint__arrow::after { border-color: #fff; }
#preview-scroll-indicator:focus-visible { outline: 3px solid var(--honey); outline-offset: 3px; }
/* a pale teal disc with two chevrons that nod down, one after the other */
.nook-scroll-hint__arrow { position: relative; width: 38px; height: 38px; border-radius: 50%; background: #E6F4F2; color: transparent; font-size: 0; overflow: hidden; transition: background 0.2s ease; }
.nook-scroll-hint__arrow::before, .nook-scroll-hint__arrow::after { content: ''; position: absolute; left: 50%; width: 10px; height: 10px; border-right: 2.5px solid var(--teal-ink); border-bottom: 2.5px solid var(--teal-ink); border-radius: 1px; transform: translate(-50%, 0) rotate(45deg); animation: nook-chev 1.7s ease-in-out infinite; }
.nook-scroll-hint__arrow::before { top: 9px; }
.nook-scroll-hint__arrow::after { top: 16px; animation-delay: 0.18s; }
@keyframes nook-chev { 0%, 100% { transform: translate(-50%, 0) rotate(45deg); opacity: 0.35; } 50% { transform: translate(-50%, 4px) rotate(45deg); opacity: 1; } }
@keyframes nook-hint-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nook-scroll-hint__arrow::before, .nook-scroll-hint__arrow::after { animation: none; opacity: 1; } #preview-scroll-indicator { animation: none !important; } }

/* ---------- The first-time card ---------- */
#welcome-banner > div { border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; }
#welcome-banner h3 { color: var(--ink) !important; }
#welcome-banner .bg-purple-100 { background: var(--honey-soft) !important; }
#welcome-banner .text-purple-500 { color: var(--teal-ink) !important; }
#welcome-banner .text-slate-600 { color: var(--muted) !important; }

/* the round "Show me around" button from the welcome tour */
#dm-welcome-tour-pill { background: var(--card) !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; box-shadow: 0 8px 22px rgba(42, 35, 64, 0.16) !important; font-family: inherit !important; }
#dm-welcome-tour-pill:hover { background: var(--paper) !important; }

/* ---------- Dialogs ---------- */
#editor-view [id$="-modal"].fixed.inset-0 { background: rgba(42, 35, 64, 0.55) !important; backdrop-filter: blur(4px); }
#image-picker-modal > div { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; }
#image-picker-modal > div > .absolute.inset-0 { display: none !important; }
#image-picker-modal h3, #image-picker-modal .text-white { color: var(--ink) !important; }
#image-picker-modal .text-gray-300 { color: var(--muted) !important; }
#image-picker-modal h3 img { display: none; }
#modal-regen-counter > div { background: var(--honey-soft) !important; border: 1px solid var(--honey) !important; color: var(--ink) !important; }
#close-picker-modal-btn { background: var(--card) !important; color: var(--ink) !important; border: 1.5px solid var(--line) !important; }
#close-picker-modal-btn:hover { border-color: var(--ink) !important; }
#regenerate-in-modal-btn { background: var(--teal) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(45, 156, 146, 0.28) !important; font-family: inherit; }
#regenerate-in-modal-btn:hover { background: var(--teal-ink) !important; }
#confirm-image-selection-btn { background: var(--card) !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; box-shadow: none !important; font-family: inherit; }
#confirm-image-selection-btn:hover { background: var(--paper) !important; }
#confirm-image-selection-btn img { display: none; }
#suggest-edit-btn, #picker-cover-text-btn { color: var(--ink) !important; border: 1.5px solid var(--line) !important; background: var(--card) !important; font-family: inherit; }
#suggest-edit-btn:hover, #picker-cover-text-btn:hover { border-color: var(--ink) !important; background: var(--paper) !important; }
#picker-character-toggle-row .text-blue-200, #picker-character-toggle-row .text-blue-300\/70 { color: var(--ink) !important; }
#image-picker-modal .polaroid-frame { background: #fff !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-sm) !important; }
#image-picker-modal .polaroid-frame.selected { box-shadow: 0 0 0 4px var(--teal), 0 16px 34px rgba(45, 156, 146, 0.35) !important; border-color: var(--teal) !important; background: #E6F4F2 !important; transform: translateY(-4px); }
#image-picker-modal .polaroid-frame.selected .text-center::before { content: '\2713  Chosen'; background: var(--teal); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 800; margin-right: 8px; letter-spacing: 0.02em; }
#image-picker-modal #regenerate-in-modal-btn, #image-picker-modal #regenerate-in-modal-btn span { color: #fff !important; }
#image-picker-modal .polaroid-frame .text-gray-700 { color: var(--ink) !important; }
#original-story-text-section { display: none !important; }
body .scene-char-chip { background: var(--card) !important; color: var(--ink) !important; border: 1.5px solid var(--line) !important; font-family: inherit; font-weight: 700 !important; font-size: 15px !important; }
body .scene-char-chip:hover { border-color: var(--ink) !important; }
body .scene-char-chip.scene-char-chip-active { background: var(--teal) !important; color: #fff !important; border-color: var(--teal) !important; }
body .scene-char-chip.scene-char-chip-active .scene-char-chip-check { color: #fff !important; }
body .scene-char-chip .scene-char-chip-name { color: inherit !important; opacity: 1 !important; }
body #picker-character-toggle-row .text-sm { color: var(--ink) !important; font-weight: 700; }
body #picker-character-toggle-row .text-xs { color: var(--muted) !important; }
.picker-zoom-btn { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--teal-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; vertical-align: middle; }
.picker-zoom-btn:hover { border-color: var(--ink); color: var(--ink); }
.picker-zoom-btn svg { width: 14px; height: 14px; }
#image-picker-modal .polaroid-frame .text-center { display: flex; align-items: center; justify-content: center; }

/* ---------- The words on the cover ---------- */
/* the facts beside the cover */
.cover-facts { display: flex; flex-direction: column; gap: 4px; }
.cover-facts__label { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-ink); margin: 10px 0 0; }
.cover-facts__label:first-child { margin-top: 0; }
.cover-facts__value { font-family: 'Lora', Georgia, serif; font-size: 22px; color: var(--ink); margin: 0; line-height: 1.3; }
.cover-facts__value.is-empty { color: var(--muted); font-style: italic; }
.cover-facts__note { font-size: 15px; color: var(--muted); margin: 14px 0 4px; line-height: 1.5; max-width: 420px; }
/* the sheet */
.cover-text-modal { display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(42, 35, 64, 0.55); backdrop-filter: blur(4px); }
.cover-text-modal.hidden { display: none !important; }
.cover-text-sheet { width: min(100%, 520px); max-height: 92vh; overflow-y: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.cover-text-sheet h2 { font-size: 26px; font-weight: 700; margin: 0; }
.cover-text-sheet__lead { font-size: 16px; color: var(--muted); margin: 0; line-height: 1.5; }
.cover-text-field { display: flex; flex-direction: column; gap: 6px; }
.cover-text-field span { font-size: 15px; font-weight: 700; color: var(--ink); }
.cover-text-field em { font-style: normal; font-weight: 600; color: var(--muted); }
.cover-text-field input { font: inherit; font-size: 18px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.cover-text-field input:focus { outline: none !important; border-color: var(--teal) !important; box-shadow: 0 0 0 3px rgba(45, 156, 146, 0.18) !important; }
.cover-text-field small { font-size: 13px; color: var(--muted); }
#cover-text-no-author { align-self: flex-start; margin-top: -4px; }
.cover-text-error { margin: 0; font-size: 15px; color: #B3261E; background: #FCEBEA; border: 1px solid #F3C1BD; border-radius: 10px; padding: 10px 12px; }
.cover-text-error[hidden] { display: none; }
.cover-text-cost { margin: 4px 0 0; font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 16px; color: var(--ink); }
.cover-text-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.cover-text-actions .nook-btn { font-size: 17px; padding: 14px 24px; }
.cover-text-actions .nook-btn:disabled { background: #E4DEE8; color: #5C536F; box-shadow: none; cursor: not-allowed; }
/* the legacy book-file dialog just names the cover words */
.book-cover-line p { margin: 0; }
#book-cover-line { font-family: 'Lora', Georgia, serif; font-size: 18px; }
@media (max-width: 640px) {
    .cover-text-sheet { padding: 22px 18px 20px; }
    .cover-text-sheet h2 { font-size: 22px; }
    .cover-text-actions .nook-btn { width: 100%; }
}

/* ---------- More dialogs: unlock choices, scene edits, the welcome tour ---------- */
#editor-status-bar button { white-space: nowrap !important; }
/* the unlock dialog */
#unlock-story-modal > div { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; }
#unlock-story-modal > div > .absolute.inset-0 { display: none !important; }
#unlock-story-modal h2, #unlock-story-modal h3 { color: var(--ink) !important; }
#unlock-story-modal .unlock-tier-card { background: var(--card) !important; border-color: var(--line) !important; box-shadow: none !important; }
#unlock-story-modal .unlock-tier-card.border-amber-400 { border-color: var(--honey) !important; background: #FFFDF8 !important; }
#unlock-story-modal .bg-amber-500 { background: var(--honey) !important; color: var(--ink) !important; }
#unlock-story-modal .text-amber-700, #unlock-story-modal .text-purple-700, #unlock-story-modal .text-teal-600 { color: var(--ink) !important; }
#unlock-story-modal .text-amber-600, #unlock-story-modal .text-purple-500 { color: var(--teal) !important; }
#unlock-story-modal .unlock-tier-btn { background: var(--teal) !important; color: #fff !important; border-radius: 999px !important; font-weight: 800 !important; transform: none !important; box-shadow: 0 6px 18px rgba(45, 156, 146, 0.28) !important; font-family: inherit; }
#unlock-story-modal .unlock-tier-btn:hover { background: var(--teal-ink) !important; }
#unlock-story-modal .unlock-tier-btn[data-tier="hardcover_bundle"] { background: var(--honey) !important; color: var(--ink) !important; box-shadow: 0 6px 18px rgba(228, 168, 59, 0.38) !important; }
#unlock-story-modal .unlock-tier-btn[data-tier="hardcover_bundle"]:hover { background: #D99A2B !important; }
#close-unlock-modal { background: var(--card) !important; color: var(--ink) !important; border: 1.5px solid var(--line) !important; }
/* the scene-edit dialogs (page and cover): paper, not slate */
body #suggest-edit-modal:not(.hidden) > div, body #cover-scene-edit-modal:not(.hidden) > div { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; }
#suggest-edit-modal, #cover-scene-edit-modal { background: rgba(42, 35, 64, 0.55) !important; }
body #suggest-edit-modal .text-white, body #suggest-edit-modal .text-gray-300, body #suggest-edit-modal .text-gray-400, body #suggest-edit-modal h3, body #suggest-edit-modal label,
body #cover-scene-edit-modal .text-white, body #cover-scene-edit-modal .text-gray-300, body #cover-scene-edit-modal .text-gray-400, body #cover-scene-edit-modal h3, body #cover-scene-edit-modal label { color: var(--ink) !important; }
body #suggest-edit-modal .text-gray-500, body #cover-scene-edit-modal .text-gray-500 { color: var(--muted) !important; }
#suggest-edit-modal .bg-slate-700\/50, #cover-scene-edit-modal .bg-slate-700\/50 { background: var(--card) !important; border: 1px solid var(--line); }
#suggest-edit-modal textarea, #cover-scene-edit-modal textarea { background: #fff !important; color: var(--ink) !important; border: 1.5px solid var(--line) !important; font-family: inherit; font-size: 17px; }
#suggest-edit-modal textarea:focus, #cover-scene-edit-modal textarea:focus { border-color: var(--teal) !important; box-shadow: 0 0 0 3px rgba(45, 156, 146, 0.18) !important; --tw-ring-color: transparent !important; }
#suggest-edit-modal textarea::placeholder, #cover-scene-edit-modal textarea::placeholder { color: var(--muted) !important; }
body #cover-scene-edit-modal .text-blue-200, body #cover-scene-edit-modal .text-blue-300, body #cover-scene-edit-modal .text-cyan-200, body #cover-scene-edit-modal .text-purple-200, body #cover-scene-edit-modal .text-purple-300, body #cover-scene-edit-modal .text-gray-200, body #cover-scene-edit-modal p, body #cover-scene-edit-modal label, body #cover-scene-edit-modal li,
body #suggest-edit-modal .text-blue-200, body #suggest-edit-modal .text-blue-300, body #suggest-edit-modal .text-purple-200, body #suggest-edit-modal .text-gray-200, body #suggest-edit-modal p, body #suggest-edit-modal label { color: var(--ink) !important; }
body #cover-scene-edit-modal .bg-blue-900\/40, body #suggest-edit-modal .bg-blue-900\/40 { background: var(--honey-soft) !important; border-color: var(--honey) !important; }
body #cover-scene-edit-modal .cover-scene-example, body #suggest-edit-modal .suggest-example { background: var(--honey-soft) !important; color: var(--ink) !important; border: 1px solid var(--honey); font-size: 14px !important; padding: 6px 12px !important; }
#suggest-edit-modal .suggest-example, #cover-scene-edit-modal .suggest-example { background: var(--honey-soft) !important; color: var(--ink) !important; border: 1px solid var(--honey); font-size: 14px !important; padding: 6px 12px !important; }
#suggest-edit-modal button.w-full, #cover-scene-edit-modal button.w-full { border-radius: 999px !important; font-family: inherit; }
#suggest-edit-modal button.bg-gradient-to-r, #cover-scene-edit-modal button.bg-gradient-to-r { background: var(--teal) !important; color: #fff !important; }
#suggest-edit-modal button.bg-gradient-to-r:hover, #cover-scene-edit-modal button.bg-gradient-to-r:hover { background: var(--teal-ink) !important; }
#suggest-edit-modal button.border-slate-600, #cover-scene-edit-modal button.border-slate-600 { background: var(--card) !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; }
#suggest-edit-modal .text-green-200, #suggest-edit-modal .text-green-300, #suggest-edit-modal .text-green-400,
#cover-scene-edit-modal .text-green-200, #cover-scene-edit-modal .text-green-300, #cover-scene-edit-modal .text-green-400 { color: var(--teal-ink) !important; }
#suggest-edit-modal .bg-green-900\/30, #cover-scene-edit-modal .bg-green-900\/30 { background: #E6F4F2 !important; border-color: var(--teal) !important; }
#suggest-edit-modal .bg-red-900\/30, #cover-scene-edit-modal .bg-red-900\/30 { background: #FCEBEA !important; border-color: #F3C1BD !important; }
#suggest-edit-modal .text-red-300, #cover-scene-edit-modal .text-red-300 { color: #B3261E !important; }
#suggest-edit-modal .text-amber-400, #cover-scene-edit-modal .text-amber-400 { color: var(--ink) !important; }
/* the welcome card and tour keep their layout; teal replaces the purple */
body #dm-welcome-tour .wt-primary, body #dm-welcome-tour .wt-next { background: var(--teal) !important; box-shadow: 0 6px 18px rgba(45, 156, 146, 0.28) !important; border-radius: 999px !important; font-family: inherit; }
body #dm-welcome-tour .wt-primary:hover, body #dm-welcome-tour .wt-next:hover { background: var(--teal-ink) !important; }
body #dm-welcome-tour .wt-card li i { background: var(--honey-soft) !important; color: var(--ink) !important; }
body #dm-welcome-tour .wt-dots i.on { background: var(--teal) !important; }
body #dm-welcome-tour .wt-count { color: var(--teal-ink) !important; }
body #dm-welcome-tour-pill i { background: var(--honey) !important; color: var(--ink) !important; }

/* ---------- The retake-pack dialog (js/modules/regeneration-payment.js) ---------- */
body #regeneration-pack-modal { background: rgba(42, 35, 64, 0.6) !important; backdrop-filter: blur(4px); }
body #regeneration-pack-modal .modal-content { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; }
body #regeneration-pack-modal .modal-content > .absolute.inset-0 { display: none !important; }
body #regeneration-pack-modal h2, body #regeneration-pack-modal h3, body #regeneration-pack-modal .text-gray-800 { color: var(--ink) !important; }
body #regeneration-pack-modal .text-gray-600, body #regeneration-pack-modal .text-gray-700 { color: var(--muted) !important; }
body #regeneration-pack-modal .pack-card { background: var(--card) !important; border: 1.5px solid var(--line) !important; border-radius: 14px !important; transform: none !important; }
body #regeneration-pack-modal .pack-card:hover, body #regeneration-pack-modal .pack-card.selected, body #regeneration-pack-modal .pack-card.ring-4 { border-color: var(--teal) !important; box-shadow: 0 0 0 3px rgba(45, 156, 146, 0.18) !important; }
body #regeneration-pack-modal .pack-card > .absolute { background: var(--honey) !important; color: var(--ink) !important; }
body #regeneration-pack-modal .pack-card .bg-purple-50 { background: var(--honey-soft) !important; }
body #regeneration-pack-modal .pack-card .text-purple-600 { color: var(--ink) !important; }
body #regeneration-pack-modal #close-pack-modal { background: var(--card) !important; color: var(--ink) !important; border: 1.5px solid var(--line) !important; }
body #regeneration-pack-modal #cancel-pack-selection { background: var(--card) !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; border-radius: 999px !important; font-family: inherit; font-weight: 700 !important; }
body #regeneration-pack-modal #continue-to-payment { background: var(--teal) !important; color: #fff !important; border-radius: 999px !important; font-family: inherit; font-weight: 800 !important; transform: none !important; box-shadow: 0 6px 18px rgba(45, 156, 146, 0.28) !important; }
body #regeneration-pack-modal #continue-to-payment:disabled { background: #E4DEE8 !important; color: #5C536F !important; box-shadow: none !important; }
body #regeneration-pack-modal .bg-emerald-100 { background: #E6F4F2 !important; color: var(--teal-ink) !important; }
body #regeneration-pack-modal .bg-amber-100 { background: var(--honey-soft) !important; color: var(--ink) !important; }

/* ---------- Toast ---------- */
#toast { border-left-color: var(--teal) !important; font-family: inherit; }
#toast-icon { color: var(--teal-ink) !important; }

/* ---------- Image protection (moved from create.html) ---------- */
.protected-image-container { position: relative; }
.protected-image { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.image-protection-overlay { position: absolute; inset: 0; z-index: 10; background: transparent; cursor: default; }
body.devtools-open .protected-image { filter: blur(20px); }
body.devtools-open .image-protection-overlay::after {
    content: 'Preview protected. Purchase to unlock full quality images.';
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.7); color: white; font-size: 1rem; text-align: center; padding: 2rem; border-radius: inherit;
}

/* ---------- Narrow screens ---------- */
@media (max-width: 1100px) {
    /* smaller screens: the night painting stays at a readable size, anchored at the bottom, the sky above */
    #editor-view[data-ground="night"]::before { background-size: 1100px auto; }
    .ext-cell { width: 48px; height: 48px; }
    /* the status box above the book: one slim strip on tablets and phones */
    body #editor-view > .mb-4.relative { margin-top: 0 !important; margin-bottom: 10px !important; padding-top: 0 !important; }
    body #editor-status-bar { padding: 10px 16px !important; gap: 4px 12px !important; margin: 0 auto !important; border-radius: 18px !important; box-shadow: var(--shadow-sm) !important; }
    body #editor-status-bar h1, body #editor-status-bar #story-title-text { font-size: 17px !important; line-height: 1.25 !important; }
    body #editor-status-bar #story-subtitle { font-size: 13px !important; margin-top: 2px !important; }
    body #editor-status-bar > div:last-child { gap: 8px !important; margin-top: 4px !important; }
    body #autofill-pages-btn { font-size: 13px !important; padding: 6px 12px !important; }
}
@media (max-width: 1100px) {
    /* centered on tablets and phones. The editor's own phone rule centers it with
       auto margins; the Tailwind -translate-x-1/2 class then pushed it half off the
       left edge, so no transform here */
    body #preview-scroll-indicator { left: 0 !important; right: 0 !important; margin: 0 auto !important; width: fit-content !important; transform: none !important; bottom: 22px !important; font-size: 15px; }
    body #preview-scroll-indicator.hidden { display: none !important; }
}
@media (max-width: 768px) {
    /* above the bottom unlock sash on phones */
    body[data-book-mode="preview"] #preview-scroll-indicator { bottom: 96px !important; }
}
@media (max-width: 860px) {
    .nook-step { flex: 0 1 150px; }
    .nook-step__line { flex: 1 1 16px; }
}
@media (max-width: 640px) {
    .create-main { padding: 20px 0 40px; }
    .nook-wait { padding: 12px 16px 0; }
    .nook-wait h1 { font-size: 28px; }
    .nook-wait > p, .nook-wait .lead { font-size: 16px; }
    .nook-steps { margin-top: 28px; }
    .nook-step { flex: 0 1 84px; }
    .nook-step__circle { width: 54px; height: 54px; border-width: 2.5px !important; }
    .nook-step__circle img, .nook-step__circle .inline-flex { width: 28px; height: 28px; }
    .nook-step__line { margin-top: 25px; height: 3px; min-width: 10px; }
    .nook-step__words .font-bold { font-size: 13px; }
    .nook-step__words .text-sm { display: none; }
    .nook-tip { padding: 12px 14px 14px; }
    .nook-fact { font-size: 16px; }
    .nook-now { padding: 20px 18px; }
    .nook-now__title { font-size: 19px; }
    .ext-cell { width: 46px; height: 46px; }
    .nook-signin { margin-top: 16px; }
    #toast { white-space: normal; }
    #regeneration-pack-modal .modal-content { max-height: 90vh; overflow-y: auto; padding: 1.25rem; }
    body #editor-status-bar { padding: 8px 12px !important; gap: 4px 10px !important; border-radius: 16px !important; box-shadow: none !important; width: 100% !important; }
    body #editor-status-bar h1, body #editor-status-bar #story-title-text { font-size: 15px !important; }
    body #editor-status-bar #story-subtitle { font-size: 12.5px !important; }
    #editor-status-bar #story-title-text img { width: 16px; height: 16px; }
    body #autofill-pages-btn { font-size: 12.5px !important; padding: 6px 10px !important; }
    body #editor-status-bar > div:last-child { gap: 6px !important; }
}

/* ---------- Previous exports (the list under the two big buttons) ---------- */
.existing-pdfs-section h4 { color: var(--ink) !important; font-weight: 700 !important; font-size: 16px !important; margin-top: 8px; }
.existing-pdfs-section h4 span { color: var(--muted) !important; }
.existing-pdfs-section h4 img { display: none; }
.pdf-download-item { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; }
.pdf-download-item .text-blue-800 { color: var(--ink) !important; font-weight: 700 !important; }
.pdf-download-item .text-blue-600 { color: var(--muted) !important; }
.pdf-download-item .bg-blue-500 { background: var(--teal) !important; color: #fff; width: 32px !important; height: 32px !important; }
.pdf-download-item button { background: var(--teal) !important; color: #fff !important; border-radius: 999px !important; transform: none !important; font-family: inherit; box-shadow: 0 4px 12px rgba(45, 156, 146, 0.28) !important; padding: 10px 20px !important; }
.pdf-download-item button:hover { background: var(--teal-ink) !important; }

/* ---------- Personal pages (dedication, letter, photo...) on paper, like the story pages ---------- */
.keepsake-page-premium-bg { background: #FFFDF8 !important; border-radius: 0 !important; padding: 26px 30px !important; }
.keepsake-page-premium-bg::before, .keepsake-page-premium-bg::after { display: none !important; }
.keepsake-page-premium-bg .shadow-xl, .keepsake-page-premium-bg .shadow-lg { box-shadow: var(--shadow-sm) !important; border: 1px solid var(--line); }
.keepsake-page-premium-bg .text-purple-900, .keepsake-page-premium-bg .text-purple-800 { color: var(--ink) !important; font-family: 'Lora', Georgia, serif !important; font-weight: 500 !important; }
.keepsake-page-premium-bg .text-gray-700, .keepsake-page-premium-bg .text-gray-800 { color: var(--ink) !important; }
.keepsake-page-premium-bg .text-gray-500, .keepsake-page-premium-bg .text-gray-400 { color: var(--muted) !important; }
.keepsake-page-premium-bg .text-blue-600 { color: var(--teal-ink) !important; }
.keepsake-page-premium-bg .bg-amber-50 { background: var(--honey-soft) !important; border-color: var(--honey) !important; color: var(--ink) !important; }
.keepsake-page-premium-bg .bg-amber-50 strong { color: var(--ink) !important; }
.keepsake-page-premium-bg textarea, .keepsake-page-premium-bg input[type="text"] { border: 1.5px solid var(--line) !important; border-radius: 12px !important; background: #fff !important; color: var(--ink) !important; font-family: 'Lora', Georgia, serif; }
.keepsake-page-premium-bg textarea:focus, .keepsake-page-premium-bg input[type="text"]:focus { border-color: var(--teal) !important; box-shadow: 0 0 0 3px rgba(45, 156, 146, 0.2) !important; outline: none !important; }
.keepsake-page-premium-bg input[type="checkbox"] { accent-color: var(--teal); }
/* the "Help me write this" buttons: their gradient never renders, so they were white on white */
.keepsake-page-premium-bg button[id^="ai-"][id$="-btn"] { background: var(--teal) !important; color: #fff !important; font-weight: 700 !important; font-family: inherit; box-shadow: 0 4px 12px rgba(45, 156, 146, 0.3) !important; border: 0 !important; }
.keepsake-page-premium-bg button[id^="ai-"][id$="-btn"]:hover { background: var(--teal-ink) !important; }
.keepsake-page-premium-bg button[id^="ai-"][id$="-btn"] img { width: 16px; height: 16px; }
/* a compact form in a narrower column: the title small on the left, the include box and the
   help button on the same line to the right, normal-size fields. No white card inside the page. */
.keepsake-page-premium-bg .keepsake-page-content-wrapper > .bg-white { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 4px 0 !important; }
.keepsake-page-premium-bg .keepsake-page-header { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; gap: 8px 12px !important; margin-bottom: 2px; }
.keepsake-page-premium-bg .keepsake-page-header > div { display: contents; }
.keepsake-page-premium-bg .keepsake-page-header h3 { flex: 1 1 auto !important; font-size: 20px !important; margin: 0 !important; }
.keepsake-page-premium-bg .keepsake-page-header h3 img { width: 22px !important; height: 22px !important; }
.keepsake-page-premium-bg .keepsake-page-header label { margin: 0 !important; border: 1.5px solid var(--line); border-radius: 999px; padding: 5px 12px; background: #fff; font-weight: 700; cursor: pointer; }
.keepsake-page-premium-bg .keepsake-page-header label input { width: 16px !important; height: 16px !important; }
.keepsake-page-premium-bg .keepsake-page-header label span { font-size: 13px !important; }
.keepsake-page-premium-bg .keepsake-page-header label:has(input:checked) { border-color: var(--teal); background: #E6F4F2; }
.keepsake-page-premium-bg .keepsake-page-header label:has(input:checked) span { color: var(--teal-ink) !important; }
.keepsake-page-premium-bg .keepsake-page-header button { margin: 0 !important; padding: 7px 14px !important; font-size: 13px !important; }
.keepsake-page-disabled .keepsake-page-header { background: transparent !important; padding: 0 !important; margin-bottom: 2px !important; border-radius: 0 !important; }
.keepsake-page-premium-bg .bg-amber-50 { background: none !important; border: 0 !important; padding: 0 !important; font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 13.5px !important; color: var(--muted) !important; }
.keepsake-page-premium-bg .bg-amber-50 strong { color: var(--muted) !important; font-weight: 500; }
.keepsake-page-premium-bg textarea { font-size: 16px !important; line-height: 1.55 !important; padding: 12px 14px !important; min-height: 96px; }
.keepsake-page-premium-bg input[type="text"] { font-size: 16px !important; padding: 10px 14px !important; }
.keepsake-page-premium-bg .bg-purple-100 { background: var(--honey-soft) !important; color: var(--ink) !important; border: 1px solid var(--honey); }
.keepsake-page-premium-bg .text-gray-700.mb-1, .keepsake-page-premium-bg label.block { color: var(--muted) !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: 0.06em; text-transform: uppercase; }
@media (min-width: 1100px) {
    .keepsake-page-premium-bg .photo-dropzone { max-width: 420px; margin: 0 auto; }
    .keepsake-page-premium-bg .photo-dropzone img.h-40 { height: auto !important; max-height: 280px; }
}
/* the photo page: a real drop zone, a big camera, a button you can see */
.keepsake-page-premium-bg .photo-dropzone { border: 2px dashed var(--honey) !important; background: var(--paper) !important; border-radius: 14px !important; padding: 18px 16px !important; }
.keepsake-page-premium-bg .photo-dropzone > div:first-child img { width: 56px !important; height: 56px !important; }
.keepsake-page-premium-bg label[for="photo-upload"] { background: var(--teal) !important; color: #fff !important; font-weight: 700 !important; font-family: inherit; box-shadow: 0 4px 12px rgba(45, 156, 146, 0.3) !important; padding: 9px 20px !important; font-size: 14px !important; }
.keepsake-page-premium-bg label[for="photo-upload"]:hover { background: var(--teal-ink) !important; }
.keepsake-page-premium-bg .photo-dropzone p { margin-top: 10px !important; font-size: 14px !important; }
.keepsake-page-disabled::before { background: rgba(42, 35, 64, 0.14) !important; }

/* ---------- Polish My Story ---------- */
/* the box is capped to the screen (its Tailwind cap never rendered, so it grew past the top),
   and the page behind stays put while it is open */
#polish-story-modal > div { max-height: min(90vh, 900px) !important; background: var(--paper) !important; border: 1px solid var(--line); border-radius: 22px !important; }
body:has(#polish-story-modal.modal-visible) { overflow: hidden; }
#polish-story-modal > div > div:first-child { background: #fff !important; color: var(--ink) !important; border-bottom: 1px solid var(--line); }
#polish-story-modal > div > div:first-child h2 { font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: 22px; color: var(--ink); }
#polish-story-modal > div > div:first-child p { color: var(--muted) !important; }
#polish-story-modal #close-polish-modal-btn { color: var(--ink) !important; border: 1.5px solid var(--ink); }
#polish-story-modal #close-polish-modal-btn:hover { background: var(--paper) !important; }
#polish-story-modal #polish-modal-content { background: var(--paper); }
#polish-story-modal .polish-diff-card { background: #fff !important; border: 1.5px solid var(--line) !important; border-radius: 16px !important; }
#polish-story-modal .polish-diff-card:hover { transform: none !important; box-shadow: var(--shadow-sm) !important; }
#polish-story-modal .polish-diff-card.accepted { border-color: var(--teal) !important; background: #F1F7F5 !important; }
#polish-story-modal .polish-diff-card.rejected { border-color: var(--honey) !important; background: #FFFBF3 !important; }
#polish-story-modal .polish-diff-card .bg-purple-100 { background: var(--honey-soft) !important; color: var(--ink) !important; }
#polish-story-modal .polish-accept-btn { background: var(--teal) !important; color: #fff !important; border-radius: 999px !important; font-weight: 700; padding: 8px 14px !important; }
#polish-story-modal .polish-accept-btn:hover { background: var(--teal-ink) !important; }
#polish-story-modal .polish-keep-original-btn { background: #fff !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; border-radius: 999px !important; font-weight: 700; padding: 8px 14px !important; }
#polish-story-modal .polish-diff-card.accepted .polish-accept-btn::before { content: '\2713 '; }
#polish-story-modal .polish-diff-card.rejected .polish-keep-original-btn { background: var(--honey-soft) !important; border-color: var(--honey) !important; }
#polish-story-modal .polish-original-text { background: var(--paper) !important; border: 1px solid var(--line) !important; border-left: 3px solid var(--muted) !important; color: var(--ink) !important; font-family: 'Lora', Georgia, serif; font-size: 15px !important; }
#polish-story-modal .polish-new-text { background: #F1F7F5 !important; border: 1px solid #CDE6E2 !important; border-left: 3px solid var(--teal) !important; color: var(--ink) !important; font-family: 'Lora', Georgia, serif; font-size: 15px !important; }
#polish-story-modal .text-purple-600 { color: var(--teal-ink) !important; }
#polish-story-modal #polish-modal-footer { background: #fff !important; border-top: 1px solid var(--line) !important; }
#polish-story-modal #polish-count-line { color: var(--ink) !important; font-weight: 700; }
#polish-story-modal #polish-accept-all-btn { background: #fff !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; border-radius: 999px !important; }
#polish-story-modal #polish-apply-btn, #polish-story-modal #polish-retry-btn { background: var(--teal) !important; color: #fff !important; border-radius: 999px !important; box-shadow: 0 6px 18px rgba(45, 156, 146, 0.28); }
#polish-story-modal #polish-apply-btn:hover { background: var(--teal-ink) !important; }
#polish-story-modal .polish-progress-bar { background: linear-gradient(90deg, var(--teal), var(--honey), var(--teal)) !important; background-size: 200% 100% !important; }
#polish-story-modal .bg-purple-100.animate-pulse { background: var(--honey-soft) !important; }
/* the editor's dialogs live inside the editor's own stacking context, so they can never rise
   above the sticky site header (z-index 60); the header steps aside while a tall dialog is open */
#polish-story-modal { z-index: 1000 !important; }
body:has(#polish-story-modal.modal-visible) .nook-header, body:has(#image-picker-modal:not(.hidden)) .nook-header, body:has(#cover-text-modal:not(.hidden)) .nook-header, body:has(#lightbox:not(.hidden)) .nook-header, body:has(#preview-interstitial-modal.modal-visible) .nook-header, body:has(#autofill-wizard-modal.modal-visible) .nook-header { visibility: hidden; }
#polish-story-modal .polish-accept-btn, #polish-story-modal .polish-keep-original-btn, #polish-story-modal #polish-modal-footer button { white-space: nowrap; }
@media (max-width: 768px) {
    #polish-story-modal .polish-diff-card > div:first-child { flex-wrap: wrap; gap: 10px; }
    #polish-story-modal .polish-diff-card > div:first-child > div:last-child { flex: 1 1 100%; display: flex; gap: 8px; }
    #polish-story-modal .polish-diff-card > div:first-child > div:last-child button { flex: 1; text-align: center; justify-content: center; }
    #polish-story-modal #polish-modal-footer > div { flex-direction: column; align-items: stretch; gap: 10px; }
    #polish-story-modal #polish-modal-footer > div > div:last-child { flex-direction: column; align-items: stretch; }
    #polish-story-modal #polish-modal-footer button { justify-content: center; }
}

/* ---------- Building the book file: the working card and the ready card ---------- */
.pdf-progress { background: #fff !important; border: 1.5px solid var(--teal) !important; border-radius: 16px !important; box-shadow: var(--shadow-sm); }
.pdf-progress .text-white { color: var(--ink) !important; }
.pdf-progress .text-purple-200 { color: var(--muted) !important; }
.pdf-progress .animate-spin { width: 34px !important; height: 34px !important; border: 4px solid rgba(45, 156, 146, 0.2) !important; border-top-color: var(--teal) !important; }
.pdf-progress > div.mt-4 { background: transparent !important; padding: 0 !important; }
.pdf-progress > div.mt-4 > div { background: var(--honey-soft) !important; height: 12px !important; }
.pdf-progress > div.mt-4 > div > div { background: linear-gradient(90deg, var(--teal), #7FD0C8, var(--teal)) !important; background-size: 200% 100% !important; height: 12px !important; animation: nook-progress-shimmer 1.6s linear infinite !important; }
@keyframes nook-progress-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.pdf-complete { background: #F1F7F5 !important; border: 1.5px solid var(--teal) !important; border-radius: 16px !important; }
.pdf-complete .text-white { color: var(--ink) !important; }
.pdf-complete .text-green-300 { color: var(--muted) !important; }
.pdf-complete .bg-green-500 { background: var(--teal) !important; width: 36px !important; height: 36px !important; }
.pdf-complete .bg-green-500 span { color: #fff !important; }
.pdf-complete a { background: var(--teal) !important; color: #fff !important; border-radius: 999px !important; transform: none !important; box-shadow: 0 6px 18px rgba(45, 156, 146, 0.28) !important; padding: 12px 24px !important; font-family: inherit; }
.pdf-complete a:hover { background: var(--teal-ink) !important; }
.pdf-complete .border-green-600\/30 { border-color: #CDE6E2 !important; }
.pdf-complete .text-green-200\/70 { color: var(--muted) !important; font-size: 14px !important; }
#export-digital-btn[disabled] { opacity: 1 !important; cursor: wait !important; background: var(--teal-ink) !important; }
@media (max-width: 640px) {
    .pdf-complete .flex.items-center.gap-4 { flex-wrap: wrap; }
    .pdf-complete .flex.items-center.gap-4 > .flex-1 { flex: 1 1 60%; }
    .pdf-complete .flex.items-center.gap-4 > .flex.gap-2 { flex: 1 1 100%; }
    .pdf-complete a { display: block; text-align: center; }
}

/* ---------- Every dialog, one palette ----------
   The editor's dialogs were written in Tailwind purples, pinks and gradients, and the gradient
   classes never render on markup added after the page loads, which left buttons white on white.
   These rules catch them all: the editor's own dialogs and the ones appended to the body. */
#editor-view button.bg-gradient-to-r, body > div button.bg-gradient-to-r, #editor-view a.bg-gradient-to-r, body > div a.bg-gradient-to-r,
#editor-view button.bg-purple-600, body > div button.bg-purple-600, #editor-view button.bg-purple-500, body > div button.bg-purple-500,
#editor-view button.bg-indigo-600, body > div button.bg-indigo-600, #editor-view button.bg-blue-500, body > div button.bg-blue-500, #editor-view button.bg-green-600, body > div button.bg-green-600,
#editor-view label.bg-gradient-to-r, body > div label.bg-gradient-to-r {
    background: var(--teal) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; font-family: inherit; box-shadow: 0 6px 18px rgba(45, 156, 146, 0.28) !important; transform: none !important;
}
#editor-view button.bg-gradient-to-r:hover, body > div button.bg-gradient-to-r:hover, #editor-view button.bg-purple-600:hover, body > div button.bg-purple-600:hover, #editor-view button.bg-purple-500:hover, body > div button.bg-purple-500:hover { background: var(--teal-ink) !important; }
#editor-view button.bg-gradient-to-r span, body > div button.bg-gradient-to-r span, #editor-view button.bg-purple-600 span, body > div button.bg-purple-600 span { color: #fff !important; }
/* Gold marks the buttons that get a book printed and shipped: Preview & Ship, and the hardcover
   choices. The selectors carry "html body ...[id]" on purpose: the teal catch-all above is more
   specific than a bare id, and it was quietly turning these teal too. */
html body .get-book-btn.is-primary[id], html body #upgrade-digital-hardcover[id], html body #upgrade-hardcover-btn[id], html body #upsell-get-hardcover[id] {
    background: var(--honey) !important; color: var(--ink) !important; box-shadow: 0 6px 18px rgba(228, 168, 59, 0.38) !important;
}
html body .get-book-btn.is-primary[id]:hover, html body #upgrade-digital-hardcover[id]:hover, html body #upgrade-hardcover-btn[id]:hover, html body #upsell-get-hardcover[id]:hover { background: #D99A2B !important; }
html body .get-book-btn.is-primary[id] .text-left div { color: var(--ink) !important; }
#upgrade-digital-hardcover span, #upgrade-hardcover-btn span { color: var(--ink) !important; }
/* quiet second choices: an outlined pill instead of gray or bare text */
#cancel-digital-upgrade, #skip-keepsake-btn, #skip-bundle-checkout-btn, #fix-one-by-one-btn, #interstitial-skip-btn, #custom-confirm-cancel-btn, #cancel-export-btn, #comparison-keep-mine-btn,
#editor-view button.bg-gray-100, body > div button.bg-gray-100, #editor-view button.bg-gray-200, body > div button.bg-gray-200, #editor-view button.bg-slate-100, body > div button.bg-slate-100 {
    background: #fff !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; border-radius: 999px !important; font-weight: 700 !important; font-family: inherit; box-shadow: none !important;
}
#cancel-digital-upgrade:hover, #skip-keepsake-btn:hover, #skip-bundle-checkout-btn:hover, #fix-one-by-one-btn:hover, #interstitial-skip-btn:hover { background: var(--paper) !important; }
#cancel-digital-upgrade, #skip-keepsake-btn { width: auto !important; margin: 6px auto 0 !important; display: inline-block; padding: 9px 20px !important; }
/* dialog headers painted purple become ink on paper */
body > div > div > div.bg-gradient-to-r.from-purple-600, #editor-view div.bg-gradient-to-r.from-purple-600.text-white, #keepsake-editor-modal div.bg-gradient-to-r.from-purple-600, #digital-upgrade-modal div.bg-gradient-to-r.from-purple-600 { background: var(--ink) !important; color: #FBF7F0 !important; }
#digital-upsell-modal > div > div[style*="linear-gradient"] { background: var(--ink) !important; }
#digital-upsell-modal .text-yellow-300, #digital-upsell-modal .text-amber-300 { color: var(--honey) !important; }
#digital-upsell-modal .bg-purple-50, #digital-upsell-modal .border-purple-200, #digital-upsell-modal .border-purple-300 { background: var(--paper) !important; border-color: var(--line) !important; }
#digital-upsell-modal .text-purple-600, #digital-upgrade-modal .text-purple-600, #digital-upgrade-modal .text-purple-800, #digital-upgrade-modal .text-purple-700, #digital-upgrade-modal .text-purple-900 { color: var(--teal-ink) !important; }
#digital-upgrade-modal .bg-purple-50, #digital-upgrade-modal .from-purple-50, #digital-upgrade-modal .border-purple-200 { background: var(--paper) !important; border-color: var(--line) !important; }
#digital-upgrade-modal .from-amber-50, #digital-upsell-modal .from-amber-50 { background: var(--honey-soft) !important; border-color: var(--honey) !important; }
/* the legacy book-file dialog */
#export-settings-modal h2, #export-settings-modal h3 { color: var(--ink) !important; font-family: 'Lora', Georgia, serif; font-weight: 500 !important; }
#export-settings-modal .text-purple-600, #export-settings-modal .text-purple-700, #export-settings-modal .text-emerald-700, #export-settings-modal .text-emerald-600 { color: var(--teal-ink) !important; }
#export-settings-modal .bg-emerald-50, #export-settings-modal .from-emerald-50, #export-settings-modal .from-violet-100, #export-settings-modal .bg-purple-50 { background: var(--paper) !important; border-color: var(--line) !important; }
#export-settings-modal .w-32.h-40 { background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--line); }
#export-settings-modal .blur-2xl { display: none !important; }
/* the keepsake editor dialog (the older all-in-one form) */
#keepsake-editor-modal .text-purple-900, #keepsake-editor-modal .text-purple-800, #keepsake-editor-modal .text-blue-900, #keepsake-editor-modal .text-blue-800, #keepsake-editor-modal .text-rose-900, #keepsake-editor-modal .text-rose-800, #keepsake-editor-modal .text-amber-900, #keepsake-editor-modal .text-amber-800, #keepsake-editor-modal .text-emerald-900, #keepsake-editor-modal .text-emerald-800 { color: var(--ink) !important; }
#keepsake-editor-modal .text-blue-700, #keepsake-editor-modal .text-rose-700, #keepsake-editor-modal .text-amber-700, #keepsake-editor-modal .text-emerald-700, #keepsake-editor-modal .text-blue-600, #keepsake-editor-modal .text-rose-600 { color: var(--muted) !important; }
#keepsake-editor-modal div[class*="from-"][class*="-50 "], #keepsake-editor-modal div[class*="bg-"][class*="-50 "], #keepsake-editor-modal div[class$="-50"] { background: var(--paper) !important; }
#keepsake-editor-modal div[class*="border-"][class*="-200"], #keepsake-editor-modal div[class*="border-"][class*="-300"] { border-color: var(--line) !important; }
#keepsake-editor-modal button[class*="-100"] { background: #fff !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; border-radius: 999px !important; }
/* the other purple dialogs: the "your book hit a snag" note, the confirm box, the data recovery screen */
body > div .bg-purple-50, body > div .border-purple-200, body > div .from-purple-50 { background: var(--honey-soft) !important; border-color: var(--honey) !important; }
body > div .text-purple-700, body > div .text-purple-800, body > div .text-purple-900, body > div .text-purple-600 { color: var(--ink) !important; }
#custom-confirm-yes-btn { background: var(--teal) !important; color: #fff !important; border-radius: 999px !important; }
/* focus rings in the house color instead of Tailwind purple */
#editor-view textarea:focus, #editor-view input[type="text"]:focus, body > div textarea:focus, body > div input[type="text"]:focus { outline: none !important; border-color: var(--teal) !important; box-shadow: 0 0 0 3px rgba(45, 156, 146, 0.22) !important; --tw-ring-color: transparent !important; }
/* a picture being drawn again, and one that needs another try */
[data-regeneration-container] > .relative { border-color: var(--honey) !important; background: var(--paper) !important; color: var(--teal-ink) !important; }
[data-regeneration-container] > .relative .animate-spin { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(45, 156, 146, 0.2); border-top-color: var(--teal); }
[data-regeneration-container] > .relative .animate-spin img { display: none; }
[data-regeneration-container] > .relative .text-3xl { display: none; }
[data-regeneration-container] > .relative .text-amber-700, [data-regeneration-container] > .relative .text-orange-700 { color: var(--ink) !important; }
[data-regeneration-container] > .relative .save-and-retry-btn { background: var(--teal) !important; color: #fff !important; border-radius: 999px !important; }
[data-regeneration-container] > .relative .retry-same-btn { background: #fff !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; border-radius: 999px !important; }
/* the "story extension didn't complete" card in the unlock column */
#retry-extension-btn { background: var(--teal) !important; color: #fff !important; border-radius: 999px !important; box-shadow: 0 6px 18px rgba(45, 156, 146, 0.28) !important; transform: none !important; }
/* the file that did not finish: a clear note, not a red slab */
.pdf-failed, #pdf-progress-container .bg-red-50, #pdf-progress-container [class*="from-red"] { background: #fff !important; border: 1.5px solid #E8563F !important; border-radius: 16px !important; }
#pdf-progress-container .text-red-800, #pdf-progress-container .text-red-700, #pdf-progress-container .text-red-600 { color: var(--ink) !important; }
#pdf-progress-container button { background: var(--teal) !important; color: #fff !important; border-radius: 999px !important; box-shadow: 0 6px 18px rgba(45, 156, 146, 0.28) !important; padding: 10px 22px !important; }
/* titles on the dark dialog headers stay cream, whatever their own classes say */
body > div > div > div.bg-gradient-to-r.from-purple-600 h2, body > div > div > div.bg-gradient-to-r.from-purple-600 h3, #editor-view div.bg-gradient-to-r.from-purple-600.text-white h2, #editor-view div.bg-gradient-to-r.from-purple-600.text-white h3, #keepsake-editor-modal div.bg-gradient-to-r.from-purple-600 h2, #digital-upgrade-modal div.bg-gradient-to-r.from-purple-600 h2, #digital-upsell-modal h2, #digital-upsell-modal h2 span { color: #FBF7F0 !important; -webkit-text-fill-color: #FBF7F0 !important; background: none !important; }
#digital-upsell-modal h2 .text-yellow-300, #digital-upsell-modal h2 .text-amber-300 { color: var(--honey) !important; -webkit-text-fill-color: var(--honey) !important; }
#start-export-btn { background: var(--teal) !important; color: #fff !important; }
#digital-upgrade-modal .from-amber-500, #digital-upsell-modal .from-amber-500 { background: var(--honey) !important; color: var(--ink) !important; }
/* three choices stack on a phone; the picker shows two pictures a row */
@media (max-width: 640px) {
    #digital-upsell-modal div[style*="repeat(3"] { grid-template-columns: 1fr !important; }
    #digital-upsell-modal .h-28 { height: auto !important; }
    #picker-thumbnails-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
    #image-picker-modal .polaroid-frame .text-center { flex-wrap: wrap; gap: 4px; }
}
@media (min-width: 641px) and (max-width: 1000px) {
    #picker-thumbnails-container { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
    #digital-upgrade-modal .grid-cols-2, #digital-upgrade-modal div[style*="repeat(2"] { grid-template-columns: 1fr !important; }
    #digital-upgrade-modal button, #digital-upsell-modal button { border-radius: 16px !important; white-space: normal; }
}

/* ---------- Personal pages as a spread: the printed page on the left, the controls on the right ----------
   The left leaf reproduces the print layout from bonus-content-generator.js (cream-to-blue page,
   teal Lora headings, white cards, ruled lines when blank). Sizes are in cqw against the leaf,
   scaled from the 816px print page, with a floor so the words stay readable. */
#book-container.keepsake-spread #left-page > .relative.flex-1 { display: none !important; }
#book-container.keepsake-spread #left-page .page-number { visibility: hidden; }
/* the frame fades pictures in only once they are marked loaded; the preview's pictures are plain */
.keepsake-preview-host img, .magical-image-frame.keepsake-preview-host img { opacity: 1 !important; transition: none !important; }
#book-container.keepsake-spread #left-page-image.keepsake-preview-host { aspect-ratio: auto !important; height: auto !important; flex: 1 1 auto; display: flex !important; flex-direction: column; align-items: stretch; background: transparent !important; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(42, 35, 64, 0.1) !important; overflow: hidden; margin-bottom: 0 !important; container-type: inline-size; }
.kps { flex: 1; display: flex; position: relative; background: linear-gradient(135deg, #FDF8F2 0%, #F0F9FF 100%); }
.kps__page { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 7cqw 5cqw; font-family: 'Lora', Georgia, serif; color: #374151; }
.kps__h1 { font-family: 'Lora', Georgia, serif; font-size: max(4.4cqw, 17px); color: #2D9C92; margin: 0 0 4.5cqw; font-weight: 500; line-height: 1.2; }
.kps__h2 { font-family: 'Lora', Georgia, serif; font-size: max(3.9cqw, 16px); color: #2D9C92; margin: 0 0 3.5cqw; font-weight: 600; line-height: 1.2; }
/* The short gold rule under "A Letter For <name>": 72px wide on the printed page. */
.kps__h2-rule { width: 8.8cqw; height: 0.25cqw; margin: -1.8cqw auto 4.9cqw; background: #C5A059; border-radius: 1cqw; }
.kps__card { width: 100%; max-width: 86cqw; background: #fff; padding: 4.5cqw 4.9cqw; border-radius: 2.4cqw; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, 0.08); }
.kps__card--left { text-align: left; }
.kps__card--tight { padding: 2.4cqw; margin-top: 3cqw; }
.kps__quoteish { font-size: max(2.2cqw, 13px); line-height: 1.8; font-style: italic; white-space: pre-line; margin: 0; overflow-wrap: anywhere; }
.kps__rule { margin-top: 3cqw; padding-top: 2.4cqw; border-top: 2px solid #E5E7EB; }
.kps__from { font-family: 'Nunito', 'Inter', system-ui, sans-serif; font-size: max(1.96cqw, 12px); color: #2D9C92; font-weight: 700; margin: 0; }
.kps__p { font-size: max(1.96cqw, 12px); line-height: 1.8; margin: 0 0 2.4cqw; overflow-wrap: anywhere; }
.kps__p--dear { font-size: max(2.2cqw, 13px); }
.kps__p--faint { color: #CBD5E0; font-size: max(2.7cqw, 13px); }
.kps__signoff { text-align: right; font-size: max(2.2cqw, 13px); font-style: italic; color: #2D9C92; margin: 3.5cqw 0 0; }
.kps__lines { display: flex; flex-direction: column; gap: 2.4cqw; }
.kps__line { border-bottom: 2px solid #E5E7EB; min-height: 3.6cqw; }
.kps__line--short { display: inline-block; min-width: 34cqw; }
.kps__love { text-align: right; margin-top: 4cqw; }
.kps__love span { display: block; color: #CBD5E0; font-size: max(2.4cqw, 13px); margin-bottom: 1.5cqw; }
.kps__numline { display: flex; align-items: center; gap: 1.8cqw; margin-bottom: 2.7cqw; }
.kps__numline span { font-family: 'Nunito', 'Inter', system-ui, sans-serif; font-size: max(2.9cqw, 14px); color: #2D9C92; font-weight: 700; min-width: 3.6cqw; }
.kps__numline .kps__line { flex: 1; }
.kps__face { width: 30cqw; height: 30cqw; margin: 2cqw auto 3cqw; border-radius: 50%; overflow: hidden; border: 0.6cqw solid #2D9C92; box-shadow: 0 1.2cqw 3.6cqw rgba(45, 156, 146, 0.3); }
.kps__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kps__face--blank { background: linear-gradient(135deg, #2D9C92, #10B981); display: grid; place-items: center; }
.kps__face--blank .kps__star { width: 13cqw; height: 13cqw; }
.kps__trait { font-family: 'Nunito', 'Inter', system-ui, sans-serif; font-size: max(2.45cqw, 13px); color: #2D3748; font-weight: 600; margin: 1.8cqw 0; }
.kps__trait .kps__star { width: 2.45cqw; height: 2.45cqw; min-width: 13px; min-height: 13px; vertical-align: -0.4cqw; margin-right: 0.8cqw; display: inline-block; }
.kps__frame { width: 35.3cqw; height: 52.9cqw; margin: 0 auto; border: 1cqw solid #fff; border-radius: 1.8cqw; background: #FAFAFA; box-shadow: 0 1.2cqw 3.6cqw rgba(0, 0, 0, 0.1); position: relative; overflow: visible; }
.kps__frame::before { content: ''; position: absolute; inset: -0.5cqw; background: linear-gradient(45deg, #2D9C92, #10B981); border-radius: 2.3cqw; z-index: -1; }
.kps__frame img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 1cqw; }
.kps__caption { font-size: max(1.96cqw, 12px); font-style: italic; line-height: 1.6; margin: 0; }
.kps__mark { font-size: max(7.8cqw, 34px); color: #2D9C92; line-height: 1; margin-bottom: 2cqw; font-family: 'Lora', Georgia, serif; }
.kps__mark--faint { color: #E5E7EB; }
.kps__quote { font-size: max(2.94cqw, 14px); line-height: 1.6; font-style: italic; margin: 0 0 3.5cqw; max-width: 62cqw; overflow-wrap: anywhere; }
.kps__author { font-family: 'Nunito', 'Inter', system-ui, sans-serif; font-size: max(1.96cqw, 12px); color: #6B7280; font-weight: 700; margin: 0; }
.kps--off .kps__page { opacity: 0.35; filter: grayscale(0.6); }
.kps__off { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); background: var(--ink); color: #FBF7F0; font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.06em; padding: 8px 18px; border-radius: 999px; box-shadow: 0 8px 20px rgba(42, 35, 64, 0.3); white-space: nowrap; }
@media (max-width: 768px) {
    #book-container.keepsake-spread #left-page-image.keepsake-preview-host { min-height: 300px; }
}
.kps__note { margin: 0; padding: 9px 12px; font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 13px; line-height: 1.45; color: var(--muted); text-align: center; background: #FFFDF8; border-top: 1px solid var(--line); }
/* a page not in the book: the form goes quiet under a paper wash, no gray slab and no pill in the middle
   (the left leaf already wears the stamp, and the note says how to add it) */
.keepsake-page-disabled::before { background: rgba(251, 247, 240, 0.62) !important; backdrop-filter: none !important; border-radius: 12px !important; }
.keepsake-page-disabled::after { display: none !important; }
.keepsake-page-disabled textarea, .keepsake-page-disabled input[type="text"], .keepsake-page-disabled .photo-dropzone, .keepsake-page-disabled button[id^="ai-"] { opacity: 0.55; }
/* the illustration leaf is dark to its very edge, live and mid-turn, so no cream line shows
   around the picture and nothing pale flashes when the page flips */
#left-page.illus-leaf, #right-page.illus-leaf, .page-container.illus-leaf, .page-turn-piece > .illus-leaf, .page-turn-face > .illus-leaf { background: #0d1220 !important; }
.page-turn-piece:has(> .illus-leaf), .page-turn-face:has(> .illus-leaf) { background: #0d1220 !important; }
.illus-leaf > .magical-image-frame, .illus-leaf > #left-page-image, .illus-leaf > #right-page-image { border: 0 !important; background: #0d1220 !important; border-radius: 0 !important; box-shadow: none !important; }

/* ---- phone tour, Sep 19 2026 ---- */
/* Page buttons in the bar layout are static, but a tap leaves :hover stuck on touch screens and the
   desktop hover rule above (translateY(-50%)) then lifted whichever button was tapped by half its height. */
@media (max-width: 1024px) {
    #prev-page-btn:hover, #next-page-btn:hover, #prev-page-btn:focus, #next-page-btn:focus, #prev-page-btn:active, #next-page-btn:active { transform: none !important; }
}
/* Help Me Write: its Tailwind gradient header never rendered on late markup, so the title, the
   "3 quick questions" line and the close button were all white on white. Ink header like the other sheets. */
#autofill-wizard-modal div.from-amber-500 { background: var(--ink) !important; color: #FBF7F0 !important; }
#autofill-wizard-modal div.from-amber-500 h2 { color: #FBF7F0 !important; }
#autofill-wizard-modal div.from-amber-500 p { color: rgba(251, 247, 240, 0.8) !important; }
#autofill-wizard-modal #close-autofill-wizard-btn { background: transparent !important; color: #FBF7F0 !important; border: 1.5px solid rgba(251, 247, 240, 0.75) !important; }
#autofill-wizard-modal #close-autofill-wizard-btn:hover { background: rgba(251, 247, 240, 0.15) !important; }
/* The status box on tablets and phones: the words on their own line, Help Me Write (personal
   pages only) centered under them. */
@media (max-width: 1100px) {
    body #editor-status-bar { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 8px 8px !important; }
    body #editor-status-bar > div:first-child { flex: 1 1 100% !important; }
    body #editor-status-bar > div:last-child { display: contents !important; }
}
/* a rocket launched in the sky to the LEFT of the book drifts left as it climbs (mirror of ns-launch), so it never crosses behind the book */
.ns-rocket--ltr { animation-name: ns-launch-left; }
@keyframes ns-launch-left { 0% { opacity: 0; transform: translate(0, 0) rotate(8deg); } 6% { opacity: 1; } 60% { transform: translate(-18vw, -60vh) rotate(16deg); } 100% { opacity: 0; transform: translate(-34vw, -120vh) rotate(22deg); } }
/* beside the book the sky column is narrow (about 170px at 1280 wide), so a side launch climbs nearly straight up and stays in view for the whole flight */
/* dead straight and nose up (a tilt while moving vertically reads as sliding), gathering speed on the way,
   and fully lit until it is clear off the top of the screen: the fade only happens out of sight */
.ns-rocket--side, .ns-rocket--side.ns-rocket--ltr { animation-name: ns-launch-side; animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.55); }
@keyframes ns-launch-side { 0% { opacity: 0; transform: translateY(0); } 5% { opacity: 1; } 92% { opacity: 1; transform: translateY(-118vh); } 100% { opacity: 0; transform: translateY(-130vh); } }

/* These overlays used a Tailwind gradient as their dimmed backdrop. nook.css flattens every
   gradient, which left them see-through: the unlock pop-up floated over an undimmed page, and
   on phones the bottom unlock sash showed on top of it. */
#unlock-story-modal, #image-picker-modal, #export-settings-modal, #payment-redirect-modal, #success-modal { background-color: rgba(42, 35, 64, 0.72) !important; }
#unlock-story-modal { z-index: 80 !important; }

/* ---------- The calm editor (Sep 2026) ----------
   Under the book: page numbers, then ONE button (Watch it as a movie), then who reads it on a
   quiet line. Then the cover card and the Get your book card: one big gold button that fits
   where the buyer is, and quiet tiles for everything else. */
#read-to-me-row .dm-movie-launch {
    padding: 15px 30px; border: none; color: #fff; font-weight: 800; font-size: 18px;
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 55%, #ec4899 100%);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.45), 0 2px 6px rgba(0, 0, 0, 0.15);
}
#read-to-me-row .dm-movie-launch:hover { box-shadow: 0 10px 28px rgba(139, 92, 246, 0.55), 0 2px 6px rgba(0, 0, 0, 0.15); }
/* the movie loads with its button, a few seconds on a slow connection: hold its place so the
   cards below do not jump when it appears */
#read-to-me-row:empty { min-height: 56px; }
/* who reads it: words, not a second button */
#family-voice-row .dm-fv-row-btn { background: none !important; border: 0 !important; box-shadow: none !important; padding: 8px 10px; min-height: 44px; font-size: 15.5px; font-weight: 800; color: #FFE2A6; }
#family-voice-row .dm-fv-row-btn:hover { background: none !important; }
#family-voice-row .dm-fv-row-btn:hover > span:not(.dm-fv-change) { text-decoration: underline; text-underline-offset: 3px; }
#family-voice-row .dm-fv-change { opacity: 1; font-weight: 700; color: #fff; }
#family-voice-row .dm-fv-change::before { content: '\00b7'; display: inline-block; margin-right: 8px; color: #FFE2A6; text-decoration: none; }
#editor-view[data-ground="sunset"] #family-voice-row .dm-fv-row-btn, #editor-view[data-ground="sunset"] #family-voice-row .dm-fv-change::before { color: #3B2E4F; }
#editor-view[data-ground="sunset"] #family-voice-row .dm-fv-change { color: #3B2E4F; }

/* Your cover: the picture at its full size (483 x 600, as before the calm layout), with what is
   written on it and the two buttons in the column beside it. Where that column would be too
   narrow (under 900px wide) everything stacks: the cover, then the words, then the buttons. */
.cover-card-grid { display: grid; grid-template-columns: 1fr; grid-template-areas: "thumb" "facts" "actions"; row-gap: 18px; }
.cover-card-thumb { grid-area: thumb; width: 483px; max-width: 100%; }
.cover-card-thumb #story-cover-display { width: 100%; max-height: none; }
.cover-card-grid .cover-facts { grid-area: facts; }
.cover-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 10px; }
.cover-actions .nook-btn { margin: 0; }
@media (min-width: 900px) {
    .cover-card-grid { grid-template-columns: minmax(0, 483px) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "thumb facts" "thumb actions"; column-gap: 28px; row-gap: 14px; align-items: start; }
}
.cover-redraw-btn.new-image-ready { border-color: var(--teal) !important; box-shadow: 0 0 0 3px rgba(45, 156, 146, 0.25); }

/* Get your book */
.get-book-card .get-book-sub { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--muted) !important; }
.get-book-primary-slot:empty, .get-book-secondary-slot:empty { display: none; }
/* a digital buyer's "Upgrade to a printed book": clearly second to the gold Download, but warmer
   than the quiet tiles (soft honey, honey border, full width) */
.get-book-secondary-slot { margin-top: 12px; }
html body .get-book-btn.is-upgrade[id] {
    background: var(--honey-soft) !important; color: var(--ink) !important; border: 1.5px solid var(--honey) !important;
    border-radius: 999px !important; box-shadow: none !important; padding: 14px 26px !important;
}
html body .get-book-btn.is-upgrade[id]:hover { background: #F7E2B5 !important; }
html body .get-book-btn.is-upgrade[id] .text-left div { color: var(--ink) !important; }
html body .get-book-btn.is-upgrade[id] .text-left .text-sm { opacity: 0.8; }
.get-book-btn.is-upgrade .text-left .font-bold { font-size: 17px; }
.get-book-btn { width: 100%; border: 0; cursor: pointer; text-align: left; }
.get-book-btn .text-left .font-bold { font-size: 16px; }
.get-book-btn .text-left .text-sm { font-size: 13.5px; line-height: 1.35; }
/* the lead: big, gold, full width */
html body .get-book-btn.is-primary[id] { border-radius: 999px !important; padding: 18px 28px !important; }
.get-book-btn.is-primary .text-left .font-bold { font-size: 19px; }
.get-book-btn.is-primary .text-left .text-sm { font-size: 14px; }
/* the tiles: quiet, outlined, same weight as each other */
.get-book-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 14px; }
.get-book-tiles > .hidden { display: none !important; }
.get-book-tile-wrap { display: flex; }
.get-book-tile-wrap > * { flex: 1 1 auto; }
html body .get-book-tiles .get-book-btn[id]:not(.is-primary) {
    background: var(--card) !important; color: var(--ink) !important; border: 1.5px solid var(--line) !important;
    border-radius: 14px !important; box-shadow: none !important; padding: 12px 14px !important; height: 100%;
}
html body .get-book-tiles .get-book-btn[id]:not(.is-primary):hover { border-color: var(--ink) !important; background: #fff !important; }
html body .get-book-tiles .get-book-btn[id]:not(.is-primary) > div { justify-content: flex-start !important; }
html body .get-book-tiles .get-book-btn[id]:not(.is-primary) .text-left div { color: var(--ink) !important; }
html body .get-book-tiles .get-book-btn[id]:not(.is-primary) .text-left .text-sm { color: var(--muted) !important; opacity: 1; }
html body .get-book-tiles .get-book-btn[id]:not(.is-primary) img, html body .get-book-tiles .get-book-btn[id]:not(.is-primary) svg { width: 24px; height: 24px; }
/* a tile building its file turns teal so the white "Building your book file" words show */
html body .get-book-tiles #export-digital-btn[disabled] { background: var(--teal-ink) !important; border-color: var(--teal-ink) !important; }
html body .get-book-tiles #export-digital-btn[disabled] .text-left div { color: #fff !important; }
html body .get-book-btn.is-primary#export-digital-btn[disabled] { background: #D99A2B !important; }

@media (max-width: 640px) {
    #read-to-me-row .dm-movie-launch { font-size: 17px; padding: 14px 26px; }
    .cover-card-thumb { width: 100%; }
    .cover-facts__value { font-size: 19px; }
    .cover-facts__note { font-size: 14px; }
    .cover-actions .nook-btn { width: 100%; justify-content: center; }
    html body .get-book-btn.is-primary[id] { padding: 16px 20px !important; }
    .get-book-btn.is-primary .text-left .font-bold { font-size: 17.5px; }
    .get-book-tiles { grid-template-columns: 1fr; }
    /* two lines on a phone: the title, then "Softcover or hardcover, shipped to you" */
    html body .get-book-btn.is-upgrade[id] { padding: 12px 16px !important; }
    .get-book-btn.is-upgrade .text-left .font-bold { font-size: 16px; }
    .get-book-btn.is-upgrade .text-left .text-sm { font-size: 13px; }
}

/* ---------- Calm editor, round 2 (Sean's review) ---------- */
/* Phones and tablets: the Previous / Next bar under the book used to sit right on the page
   numbers (the editor's own phone rule zeroes their top margin). Give them room. */
@media (max-width: 1024px) {
    body #page-controls { margin-top: 16px !important; }
}
/* "Scroll down to see the rest" on computers and tablets: pinned at the left edge, level with
   Show me around on the right (right 16px, bottom 16px), so the two floating pills frame the page.
   placeScrollIndicator() steps it aside if it would ever cover a button. Phones keep it centered. */
@media (min-width: 641px) {
    html body #preview-scroll-indicator { left: 16px !important; right: auto !important; bottom: 16px !important; margin: 0 !important; width: fit-content !important; transform: none !important; }
}
/* the free preview on a tablet has the Unlock bar along the bottom: stay above it */
@media (min-width: 641px) and (max-width: 768px) {
    html body[data-book-mode="preview"] #preview-scroll-indicator { bottom: 96px !important; }
}
/* Phones and small tablets: a little room above the status box so it reads as its own rounded
   box instead of hanging off the header, inset like the book */
@media (max-width: 768px) {
    body #editor-view > .mb-4.relative { padding-top: 14px !important; }
    body #editor-status-bar { width: calc(100% - 24px) !important; margin: 0 auto !important; box-shadow: var(--shadow-sm) !important; }
}
/* the hint shrunk to its round arrow when its full spot would cover a button (see placeScrollIndicator) */
html body #preview-scroll-indicator.is-compact { padding: 7px !important; gap: 0 !important; }
#preview-scroll-indicator.is-compact .nook-scroll-hint__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* free preview: the "Get your book" card leads only to the prices, so it steps back while the price
   panel is open beside the page (updatePreviewGetBookCard) */
html body #premium-upgrade-prompt.get-book-card--prices-beside { display: none !important; }
/* A tile alone on its row (Share for a digital buyer, every tile on a phone) centers its picture
   and words, like the Download and Upgrade buttons above it */
html body .get-book-tiles:not(:has(> :not(.hidden) ~ :not(.hidden))) .get-book-btn[id]:not(.is-primary) > div { justify-content: center !important; }
@media (max-width: 640px) {
    html body .get-book-tiles .get-book-btn[id]:not(.is-primary) > div { justify-content: center !important; }
}