/* A New Page, THE SAMPLE POP-UP (/css/anp-sample-popup.css, Joel's item 65, 2026-10-17).
   Every sample book (the age pages' sample nights, the Littles free book) and the Littles "See what you'll say" card
   open as one kind of pop-up: a picture book lying on a table. Soft paper cream (#FFF8EC), 24px corners, a deep soft
   shadow, the page behind dimmed and softly blurred. Centred, min(1400px, 94vw) wide, up to 90vh tall; full screen at
   700px and under with the buttons pinned to the bottom (safe-area padding). Behaviour lives in /js/anp-popup.js.
   Colours (WCAG AA on the cream): navy #1F2E55 text (12.9:1), muted #4B5674 (7.1:1), accent #7A4E00 (6.9:1); the
   Next button is white on navy; the one gold button is navy on gold. No gold text anywhere. */
.sp-back,.sp-panel{--sp-cream:#FFF8EC;--sp-cream-2:#F4ECDC;--sp-ink:#1F2E55;--sp-muted:#4B5674;--sp-accent:#7A4E00;--sp-white:#FFFFFF;--sp-line:rgba(31,46,85,.12);--sp-gold:#F2B544;--sp-gold-edge:#C98E1C;--sp-dim:rgba(11,15,26,.55);--sp-serif:var(--font-serif,"Fraunces",Georgia,serif);--sp-sans:var(--font-sans,"Lexend",system-ui,sans-serif)}
html.sp-open .anp-esa-banner,html.sp-open .anp-chrome-help{visibility:hidden}
/* nothing on the page behind moves while a pop-up is open (the Littles fireflies, the lamp, Nan, every loop) */
html.sp-open *,html.sp-open *::before,html.sp-open *::after{animation-play-state:paused!important}
/* Part 8, item 244: the scroll lock is also explicit (the body is pinned by js/anp-popup.js; these two make it hold on every browser) */
html.sp-open,html.sp-open body{overflow:hidden}

/* ---------- the dimmed, softly blurred page behind ---------- */
.sp-back{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:8990;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--sp-dim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sp-back[hidden]{display:none}
dialog.sp-panel::backdrop{background:rgba(11,15,26,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ---------- the book ---------- */
.sp-panel{position:relative;box-sizing:border-box;display:flex;flex-direction:column;width:min(1400px,94vw);max-width:min(1400px,94vw);max-height:90vh;max-height:90dvh;margin:auto;padding:0;border:0;overflow:hidden;background:var(--sp-cream);color:var(--sp-ink);border-radius:24px;box-shadow:0 2px 6px rgba(11,15,26,.10),0 40px 90px -20px rgba(11,15,26,.55)}
dialog.sp-panel:not([open]){display:none}
.sp-panel:focus{outline:none}
.sp-head{flex:none;display:flex;align-items:center;gap:14px;padding:14px 14px 12px 20px;border-bottom:1px solid var(--sp-line);background:var(--sp-cream)}
.sp-spine{flex:none;display:block;width:auto;height:56px;max-width:96px;object-fit:contain;border-radius:6px;background:var(--sp-cream-2);box-shadow:0 1px 2px rgba(31,46,85,.18),0 6px 14px -6px rgba(31,46,85,.35)}
.sp-titles{flex:1;min-width:0}
.sp-title{margin:0;font:600 1.375rem/1.2 var(--sp-serif);color:var(--sp-ink);letter-spacing:0;text-wrap:balance}
.sp-sub{margin:3px 0 0;font:400 1rem/1.4 var(--sp-sans);color:var(--sp-muted)}
.sp-x{flex:none;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:50%;background:transparent;color:var(--sp-ink);cursor:pointer;font:700 1.5rem/1 var(--sp-sans)}
.sp-x svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.sp-x:hover{background:rgba(31,46,85,.08)}
.sp-x:focus-visible{outline:3px solid var(--sp-ink);outline-offset:2px}
.sp-body{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:18px 24px 16px}

/* ---------- the bottom bar: big Back / Next, a quiet page count and soft dots ---------- */
.sp-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--sp-line);background:var(--sp-cream)}
.sp-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:56px;min-width:132px;padding:0 26px;border-radius:999px;font:700 1.0625rem/1.1 var(--sp-sans);cursor:pointer;text-align:center;text-decoration:none}
.sp-prev{border:2px solid var(--sp-ink);background:transparent;color:var(--sp-ink)}
.sp-next,.sp-primary{border:2px solid var(--sp-ink);background:var(--sp-ink);color:var(--sp-white)}
.sp-prev:hover{background:rgba(31,46,85,.06)}
.sp-btn:focus-visible{outline:3px solid var(--sp-ink);outline-offset:3px}
.sp-btn:disabled,.sp-btn[hidden]{visibility:hidden}
.sp-btn[hidden]{display:inline-flex}
.sp-count{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;font:600 .9375rem/1.2 var(--sp-sans);color:var(--sp-muted);text-align:center}
.sp-dots{display:flex;gap:7px}
.sp-dots i{display:block;width:8px;height:8px;border-radius:50%;background:rgba(31,46,85,.22)}
.sp-dots i.on{background:var(--sp-ink)}

/* ---------- the calm end card ---------- */
.sp-end{text-align:center;align-self:center}
.sp-end[hidden]{display:none}
.sp-end-h{margin:0;font:600 clamp(1.75rem,1.2rem + 1.4vw,2.25rem)/1.15 var(--sp-serif);color:var(--sp-ink);outline:none}
.sp-end-go,.sd-body .hs-cta .sp-end-go{width:auto;display:inline-flex;align-items:center;justify-content:center;min-height:56px;margin-top:22px;padding:0 30px;border-radius:999px;background:var(--sp-gold);color:var(--sp-ink);font:700 1.125rem/1.1 var(--sp-sans);text-decoration:none;box-shadow:0 3px 0 var(--sp-gold-edge)}
.sp-end-go:focus-visible{outline:3px solid var(--sp-ink);outline-offset:3px}
.sp-end-fine{margin:10px 0 0;font:400 .9375rem/1.4 var(--sp-sans);color:var(--sp-muted)}
.sp-end-keep{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:10px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--sp-ink);font:600 1rem/1.2 var(--sp-sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sp-end-keep:focus-visible{outline:3px solid var(--sp-ink);outline-offset:2px}

/* a missing picture is a soft cream panel, never a broken image */
.sp-missing{background:var(--sp-cream-2)!important;min-height:200px}
.sp-missing img{visibility:hidden}

/* ---------- the age pages' sample night inside the book (the real reader, flattened onto the cream page) ---------- */
.sd-body .sn-story{max-width:none;margin:0}
.sd-body .bookcap-top{margin:0 auto 14px;color:var(--sp-ink)}
.sd-body .bookstack{margin:0}
.sd-body .bookstack::before{display:none}
.sd-body .book,body[data-age="older"] .sd-body .book{transform:none;padding:0;background:transparent;box-shadow:none;border-radius:0;animation:none}
.sd-body .book .ribbon{display:none}
.sd-body .book .art{background:transparent;border-radius:12px;overflow:hidden}
.sd-body .book .art img:not(.hs-reveal){display:block;width:auto;max-width:100%;height:auto;margin:0 auto;aspect-ratio:auto;aspect-ratio:revert-layer;object-fit:contain;max-height:min(42vh,420px)}
.sd-body .book .hs-reveal{transition:none}
.sd-body .book .pagecopy{padding:16px 0 0}
.sd-body .book.is-end .pagecopy{display:none}
.sd-body .hs-nav{margin-top:10px}
.sd-body .hs-under{margin-top:12px}
.sd-body .hs-wrong,.sd-body .hs-honest{color:var(--sp-muted)}
@media (min-width:1024px){
  /* an open spread: the picture on the left, the words on the right */
  .sd-body .book{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);column-gap:32px;align-items:center}
  .sd-body .book .art{grid-column:1;grid-row:1;align-self:center}
  .sd-body .book .art img:not(.hs-reveal){max-height:min(calc(90vh - 300px),600px);max-height:min(calc(90dvh - 300px),600px)}
  .sd-body .book .pagecopy{grid-column:2;grid-row:1;padding:0}
  .sd-body .book .hs-cta{grid-column:2;grid-row:1}
}
.sd-body .story-cap{padding:12px 16px}

/* ---------- the Littles free book inside the book ---------- */
dialog.lit-peek.sp-panel{width:min(1400px,94vw);max-width:min(1400px,94vw);max-height:90vh;max-height:90dvh;overflow:hidden;background:var(--sp-cream);border-radius:24px}
dialog.lit-peek.sp-panel[open]{display:flex}
.lit-peek.sp-panel .in{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding:0}
.lit-peek.sp-panel.is-end .in{display:none}
.lit-peek.sp-panel .sp-head h3{font:600 1.375rem/1.2 var(--sp-serif);color:var(--sp-ink)}
.lit-peek.sp-panel .tapnote{margin:0 0 10px;opacity:1;color:#5E5A54;font:400 15px/1.4 var(--sp-sans);text-align:center}
.lit-peek.sp-panel .lb-stage{margin-top:0}
.lit-peek.sp-panel .lit-peek-page{background:transparent;border-radius:0}
.lit-peek.sp-panel .art{max-width:none;width:auto;aspect-ratio:auto;max-height:none;border-radius:16px;background:transparent;display:flex;justify-content:center}
.lit-peek.sp-panel .art picture{display:block;width:auto;height:auto}
.lit-peek.sp-panel .art img{display:block;width:auto;height:auto;max-width:100%;max-height:min(46vh,460px);object-fit:contain;border-radius:16px;margin:0 auto}
.lit-peek.sp-panel .line{text-align:center;min-height:0;margin:16px 0 0;color:var(--sp-ink)}
.lit-peek.sp-panel .lit-name{margin:12px 0 0;text-align:center;font:400 .9375rem/1.4 var(--sp-sans);color:var(--sp-muted)}
.lit-peek.sp-panel .sp-bar .sp-count{font-size:.9375rem}
@media (min-width:1024px){
  .lit-peek.sp-panel .lit-peek-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
  .lit-peek.sp-panel .art img{max-height:min(calc(90vh - 260px),600px);max-height:min(calc(90dvh - 260px),600px)}
  .lit-peek.sp-panel .line{text-align:left;margin:0;font-size:clamp(36px,3vw,48px)}
}
/* the Littles end card and the "in the free week" note: calm, the cover and Nan, nothing moving */
.lit-peek.sp-panel .lit-end{flex:1 1 auto;min-height:0;overflow-y:auto;background:var(--sp-cream);border-radius:0;padding:28px 24px calc(28px + env(safe-area-inset-bottom,0px))}
.lit-peek.sp-panel .lit-end-x{position:absolute;top:12px;right:12px}
.lit-peek.sp-panel .lit-end h3{font:600 28px/1.2 var(--sp-serif);color:var(--sp-ink)}
.lit-peek.sp-panel .lit-end .lit-gold{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;border-radius:999px;background:var(--sp-gold);color:var(--sp-ink);font:700 1.125rem/1.1 var(--sp-sans);text-decoration:none;box-shadow:0 3px 0 var(--sp-gold-edge)}
.lit-peek.sp-panel .lit-end .lit-lock-fine,.lit-peek.sp-panel .lit-end .sp-end-fine{margin:10px 0 0;font:400 .9375rem/1.4 var(--sp-sans);color:var(--sp-muted)}
.lit-peek.sp-panel .lit-end .sub{color:var(--sp-muted)}
.lit-peek.sp-panel .lit-end .end-more{margin-top:20px}
.lit-peek.sp-panel .lit-end .end-foot{margin-top:8px}

/* ---------- the Littles game card ("See what you'll say") ---------- */
.gc-pic{margin:0 auto;display:flex;justify-content:center;border-radius:16px;overflow:hidden;background:transparent}
.gc-pic picture{display:block}
.gc-pic img{display:block;width:auto;height:auto;max-width:100%;max-height:min(34vh,340px);object-fit:contain;border-radius:16px}
.gc-steps{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gc-step{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 18px 20px;border-radius:20px;background:var(--sp-white);box-shadow:0 1px 2px rgba(31,46,85,.06),0 12px 28px -14px rgba(31,46,85,.28)}
.gc-ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--sp-cream-2);color:var(--sp-ink);margin-bottom:4px}
.gc-ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gc-step b{font:700 .875rem/1.2 var(--sp-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--sp-accent)}
.gc-step .who{font:600 1.0625rem/1.3 var(--sp-sans);color:var(--sp-ink)}
.gc-step q{display:block;margin-top:4px;font:500 1.3125rem/1.45 var(--sp-sans);color:var(--sp-ink);quotes:"\201C" "\201D"}
.gc-bar{justify-content:center}
.gc-bar .sp-btn{min-width:200px}

/* ---------- phones: full screen, picture on top, words below, buttons pinned to the bottom ---------- */
@media (max-width:700px){
  .sp-back{padding:0}
  .sp-panel,dialog.lit-peek.sp-panel{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;box-shadow:none}
  dialog.lit-peek.sp-panel{width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:100dvh;margin:0}
  .sp-head{padding:10px 8px 10px 14px;gap:10px;padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .sp-spine{height:44px;max-width:72px}
  .sp-title{font-size:1.1875rem}
  .sp-sub{font-size:.9375rem}
  .sp-body{padding:14px 16px 16px}
  .sp-bar{padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));gap:8px}
  .sp-btn{min-width:0;flex:1 1 0;padding:0 14px}
  .sp-count{flex:0 1 auto}
  .gc-steps{grid-template-columns:minmax(0,1fr);gap:12px}
  .gc-pic img{max-height:28vh}
}
@media (max-width:360px){.sp-count{font-size:.875rem}.sp-btn{font-size:1rem}}
/* item 67: in the Littles free book, Next is gold with navy text (7.3:1), the Littles action colour */
.lit-peek.sp-panel .sp-next{background:var(--sp-gold);border-color:var(--sp-gold);color:var(--sp-ink);box-shadow:0 3px 0 var(--sp-gold-edge)}

/* Part 10b (Oct 18): the note on page 1 of a book that was NOT opened from the reading-check sample ("an example at a starting level", with a link to
   the 1-minute sample check), and the first-page note when the check found nothing yet. 14.5px muted #4B5674 on the cream (7.1:1); the link is navy, underlined. */
.hs-note{max-width:880px;margin:0 auto 12px;text-align:center;font:400 14.5px/1.3 var(--sp-sans,"Lexend",system-ui,sans-serif);color:#4B5674}
.hs-note[hidden]{display:none}
.hs-note-link{display:inline;margin:0;padding:0;border:0;background:none;color:#1F2E55;font:600 14.5px/1.3 var(--sp-sans,"Lexend",system-ui,sans-serif);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hs-note-link:focus-visible{outline:3px solid #1F2E55;outline-offset:2px;border-radius:3px}