/* A New Page, DESIGN PASS OCT 13 "Lamp-lit": the signed-in reading app (2026-10-14, in-app builder).
   Loaded LAST on the pages it restyles (after design/anp.css, the pass-* sheets and /css/anp-tokens.css),
   so these rules win on equal specificity. PRESENTATION ONLY: nothing here changes what is read, what is
   marked, the word-tap rule, the reread rule or the check-up. Brief v2: ink #1F2E55, cream #FBF8F1,
   paper #F4ECDC, gold #F2B544 (button) and #E9A93A (line accents), Fraunces + Lexend, nothing under 14px,
   one gold button per screen, no purple, no emoji in the chrome (symbols from /icons/anp).
   Hard rule (Joel): no motion, sparkle or sound while a child line is on screen. Missed words stay the soft
   gold underline from storybook.css (Julie, Oct 11): this sheet never restyles .w.miss. */

/* =====================================================================================================
   1. THE STORY READER, "Lamp on" (storybook.js adds .sb-lamp on the nightly session only)
   ===================================================================================================== */
/* the book opens onto still, warm paper (the world sky stays on the cover and the doorway) */
.sb-overlay.sb-lamp.sb-opened{background:linear-gradient(180deg,#FBF8F1 0%,#F6EFE2 100%) !important;color:#1F2E55}
.sb-lamp.sb-opened .sb-ambient{display:none}
.sb-lamp.sb-opened .sb-stage{padding:60px 16px 88px;perspective:none}
body:has(#anp-dock) .sb-lamp.sb-opened .sb-stage{padding-bottom:152px}
/* phone: the page buttons ride in the dock row, so the page runs down to the dock */
body.sb-docked .sb-lamp.sb-opened .sb-stage{padding:56px 12px calc(66px + env(safe-area-inset-bottom,0px))}
.sb-lamp .sb-book{animation:none;filter:none}
.sb-lamp .sb-book.single{width:min(560px,100%);height:100%;max-height:880px}
.sb-lamp .sb-page{background:#FFFDF8;color:#1F2E55;border:1px solid rgba(31,46,85,.08);box-shadow:0 1px 2px rgba(31,46,85,.06),0 12px 32px rgba(31,46,85,.08)}
.sb-lamp .sb-book.single .sb-page{border-radius:20px}
.sb-lamp .sb-page-in{animation:none}
/* the art holds still (no Ken Burns), 220px tall on a phone */
.sb-lamp .sb-art-kb:not(.no-kb){animation:none}
.sb-lamp .sb-art{height:clamp(150px,26vh,220px);border-radius:16px;box-shadow:none}
.sb-lamp .sb-art-emoji,.sb-lamp .sb-pal .sb-pal-ic{animation:none}
/* margin sketches sit already drawn: nothing draws itself beside the words */
.sb-lamp .sb-doodle{opacity:.28}
.sb-lamp .sb-doodle path{animation:none;stroke-dashoffset:0}
.sb-lamp .sb-folio{font-size:14px;letter-spacing:.08em;color:rgba(31,46,85,.72)}
.sb-lamp .sb-cliffline{animation:none;color:#1F2E55}
.sb-lamp .sb-artifact,.sb-lamp .sb-artifact .sb-stamp{animation:none}
.sb-lamp .sb-artifact .sb-stamp{opacity:.9}
.sb-lamp .sb-reveal-star{animation:none}
.sb-lamp .sb-reveal-star img{display:block;filter:drop-shadow(0 0 18px rgba(242,181,68,.55))}
.sb-lamp .sb-enter-emoji img{display:block;margin:0 auto;filter:drop-shadow(0 0 22px rgba(255,214,140,.75))}

/* the grown-up's line: a quiet serif, 19/30 (ink at 68%: the brief's 62% measures 4.0:1 on this paper,
   under the 4.5:1 a 19px line needs; 68% measures about 4.8:1 and still reads as the quiet voice) */
.sb-lamp .sb-pp{font-family:"Fraunces",Georgia,serif}
.sb-lamp .sb-pp p{font-size:19px;line-height:30px;font-weight:400;letter-spacing:0;word-spacing:.06em;color:rgba(31,46,85,.68)}
.sb-lamp .sb-pp .k{display:flex;align-items:center;gap:8px;margin-bottom:8px;font:600 14px/1.3 "Lexend",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:rgba(31,46,85,.72)}
.sb-lamp .sb-pp .k::before{content:"";flex:none;width:18px;height:18px;background:url(/icons/anp/anp-open-book.svg) center/contain no-repeat}
.sb-lamp .sb-pp .tv-cue{font:500 14px/1.4 "Lexend",system-ui,sans-serif;color:rgba(31,46,85,.8);background:rgba(31,46,85,.05);border-color:rgba(31,46,85,.16)}
.sb-lamp .sb-page-body.dropcap > div > .sb-pp:first-of-type p:first-of-type::first-letter,
.sb-lamp .sb-page-body.dropcap .sb-pp:first-child p:first-of-type::first-letter{color:#1F2E55;font-family:"Fraunces",Georgia,serif;font-weight:600}
.sb-lamp .sb-listen-note p{font-family:"Fraunces",Georgia,serif;color:rgba(31,46,85,.8)}

/* the child's line: big and still, Lexend 600, 40px phone / 48px computer, on #FFF8EA with a 2px gold edge */
.sb-lamp .sb-cc{background:#FFF8EA;border:2px solid #F2B544;border-radius:20px;box-shadow:none;padding:22px 18px 18px;color:#1F2E55}
.sb-lamp .sb-cc.climax{border-color:#D99A2B;box-shadow:0 0 0 4px rgba(242,181,68,.22)}
.sb-lamp .sb-cc .youread{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px;font:600 14px/1.3 "Lexend",system-ui,sans-serif;letter-spacing:.06em;color:rgba(31,46,85,.72)}
.sb-lamp .sb-cc .youread::before{content:"";flex:none;width:18px;height:18px;background:url(/icons/anp/anp-finger-point.svg) center/contain no-repeat}
.sb-lamp .sb-cc .line{font-family:"Lexend",system-ui,sans-serif;font-weight:600;font-size:40px;line-height:1.35;letter-spacing:.03em;word-spacing:.2em;color:#1F2E55}
.sb-lamp .sb-cc .tv-mark{color:#1F2E55}
.sb-lamp .sb-cc .subnote,.sb-lamp .sb-tapnote{font-size:14px;line-height:1.45;color:rgba(31,46,85,.72)}
@media (min-width:1024px){.sb-lamp .sb-cc .line{font-size:48px}}
/* Reading aids "Bigger text" scales from the new base (the aid's own rule was written for the old 39px line) */
body.anp-aids-big .sb-overlay.sb-lamp .sb-cc .line{font-size:48px}
body.anp-aids-big .sb-overlay.sb-lamp .sb-pp p{font-size:22px;line-height:34px}
@media (min-width:1024px){body.anp-aids-big .sb-overlay.sb-lamp .sb-cc .line{font-size:56px}}
/* Decision 2 (tire-kick Oct 14, P1-14): on a phone a child line of more than 20 words is 32px (session.js sets
   data-long from the word count; never split, never scaled). Every other line stays 40 phone / 48 computer.
   With "Bigger text" on, a long line keeps the same 8px step up (40px). */
@media (max-width:767px){
  .sb-lamp .sb-cc .line[data-long]{font-size:32px}
  body.anp-aids-big .sb-overlay.sb-lamp .sb-cc .line[data-long]{font-size:40px}
}
/* the reread prompt: same words, same one star, same taps; ink and gold, and the star fills without moving */
.sb-lamp .sb-reread{border-top-color:rgba(31,46,85,.14)}
.sb-lamp .sb-reread-lab{color:#1F2E55}
.sb-lamp .sb-reread-job{font-size:15px;color:rgba(31,46,85,.72)}
.sb-lamp .sb-reread-pip{transition:none;border-color:rgba(31,46,85,.22);color:rgba(31,46,85,.4);background:#fff}
.sb-lamp .sb-reread-pip:active{transform:none}
.sb-lamp .sb-reread-pip.on{transform:none;background:#F2B544;border-color:#D99A2B;color:#1F2E55}
.sb-lamp .sb-reread-done{color:#1F2E55}
.sb-lamp .sb-reread-faster{animation:none}
/* the grown-up's quiet corner ("If she gets stuck"): 14px and up, a 44px target */
.sb-lamp .sb-pcorner summary{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:14px;font-weight:600;letter-spacing:0;color:rgba(31,46,85,.78);text-decoration:underline;text-underline-offset:3px}
.sb-lamp .sb-pcorner p,.sb-lamp .sb-pscript{font-size:14px;color:rgba(31,46,85,.8)}
.sb-lamp .sb-finish{background:#1F2E55;box-shadow:none}

/* the chrome: close at top left (44px), a thin gold progress bar, the night star at right */
.sb-lamp .sb-close{position:fixed;top:8px;left:16px;z-index:70;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border-radius:50%;border:1px solid rgba(31,46,85,.15);background:#fff;color:#1F2E55;display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 2px rgba(31,46,85,.08)}
.sb-lamp .sb-close:focus-visible,.sb-lamp .sb-nav:focus-visible{outline:3px solid #F2B544;outline-offset:3px}
.sb-lamp .sb-night{position:fixed;top:16px;right:16px;z-index:52;width:28px;height:28px;pointer-events:none}
.sb-lamp .sb-progress{position:fixed;z-index:52;left:76px;right:60px;top:27px;bottom:auto;transform:none;height:6px;gap:0;border-radius:6px;background:rgba(31,46,85,.10);overflow:hidden;display:flex}
.sb-lamp .sb-prog-star{flex:1 1 0;height:6px;font-size:0;line-height:0;color:transparent;text-shadow:none;transition:none;animation:none;transform:none}
.sb-lamp .sb-prog-star.done,.sb-lamp .sb-prog-star.here{background:#E9A93A;text-shadow:none;transform:none;animation:none}
.sb-lamp:not(.sb-opened) .sb-progress,.sb-lamp:not(.sb-opened) .sb-night{display:none}
/* one ink "Next page" button under the book, the back arrow beside it; never over the child's line */
.sb-lamp .sb-nav{position:fixed;top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:none;animation:none;transition:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.sb-lamp .sb-nav:hover{transform:none}
.sb-lamp .sb-nav.prev{left:max(72px,calc(50% - 280px));width:56px;height:56px;border-radius:50%;border:1px solid rgba(31,46,85,.18);background:#fff;color:#1F2E55;font-size:28px}
.sb-lamp .sb-nav.next{right:max(72px,calc(50% - 280px));left:calc(max(72px,calc(50% - 280px)) + 68px);width:auto;height:56px;border-radius:999px;border:0;background:#1F2E55;color:#fff;font:700 17px/1 "Lexend",system-ui,sans-serif}
.sb-lamp .sb-nav.prev:hover{background:#fff}
.sb-lamp .sb-nav.next:hover{background:#141E3C}
/* the Reading aids and "?" buttons float in the bottom corners on wider screens (72px clear of them); on a
   phone they live in the bottom dock, so the buttons sit above the dock edge to edge */
body:has(#anp-dock) .sb-lamp .sb-nav{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
body:has(#anp-dock) .sb-lamp .sb-nav.prev{left:16px}
body:has(#anp-dock) .sb-lamp .sb-nav.next{left:84px;right:16px}
/* "Lamp on": while a child line is open the chrome steps back to 40% (static, no transition) */
/* (fresh-eyes P0-2) only the decorative chrome steps back: the progress bar and the night star. Close, Back and
   "Next page" stay at full strength (4.5:1 and up). The aids and "?" buttons sit at 40% once: in the dock on a
   phone, on their own on wider screens (never both, which compounded to 16%). */
.sb-lamp.sb-line-open .sb-progress,.sb-lamp.sb-line-open .sb-night,
body.sb-line-open #anp-dock,body.sb-line-open:not(:has(#anp-dock)) .anp-aids-btn,body.sb-line-open:not(:has(#anp-dock)) #anp-help-btn{opacity:.4;transition:none}
body.sb-line-open #anp-dock:focus-within,body.sb-line-open .anp-aids-btn:focus-visible,body.sb-line-open #anp-help-btn:focus-visible{opacity:1}
/* the page change: a 200ms crossfade (storybook.js lays a still copy of the old page on top and fades it) */
.sb-lamp .sb-xfade{position:absolute;inset:0;z-index:20;pointer-events:none;opacity:1;transition:opacity .2s linear}
.sb-lamp .sb-xfade.go{opacity:0}
.sb-lamp .sb-xfade-face{position:absolute;inset:0}
/* computer: a two-page spread on one page, the art at left (520) and the words at right (560) */
@media (min-width:1100px) and (min-height:640px){
  .sb-lamp .sb-book.single{width:min(1180px,100%)}
  .sb-lamp .sb-fit{flex-direction:row;align-items:center;justify-content:center;gap:40px}
  .sb-lamp .sb-fit > .sb-art{flex:0 0 520px;width:520px;height:min(520px,calc(100vh - 260px))}
  .sb-lamp .sb-fit > .sb-page-body{flex:0 1 560px;max-width:560px;min-width:0}
  .sb-lamp .sb-nav.prev{left:calc(50% - 200px)}
  .sb-lamp .sb-nav.next{left:calc(50% - 132px);right:auto;width:332px}
}
@media (prefers-reduced-motion: reduce){
  .sb-lamp .sb-xfade{transition:none}
}

/* =====================================================================================================
   2. THE NIGHT START: one Tonight card, three symbol chips, one Start (session.js startScreen)
   (session.js injects its own #anp-night-css at runtime, after this sheet, so these lead with body.anp-lesson)
   ===================================================================================================== */
body.anp-lesson{background:#FBF8F1}
body.anp-lesson .nb-spread{background:#FFFDF8;border-color:rgba(31,46,85,.10);border-radius:20px;box-shadow:0 1px 2px rgba(31,46,85,.06),0 12px 32px rgba(31,46,85,.08)}
body.anp-lesson .nb-k{font:600 14px/1.3 "Lexend",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:rgba(31,46,85,.72)}
body.anp-lesson .nb-page h2{color:#1F2E55}
body.anp-lesson .nb-sub{color:rgba(31,46,85,.8)}
body.anp-lesson .nb-meta{font-size:15px;font-weight:600;color:#1F2E55}
body.anp-lesson .nb-strip.nb-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:20px 0 0;padding:0;background:none;border:0;border-radius:0}
body.anp-lesson .nb-strip.nb-chips li:not(:last-child)::after{display:none}
body.anp-lesson .nb-chips .nb-stop{gap:6px;min-height:92px;padding:12px 4px 10px;border-radius:16px;background:#FFFDF8;border:1.5px solid rgba(31,46,85,.14);color:#1F2E55}
body.anp-lesson .nb-chips .nb-stop .dotc{width:40px;height:40px;border:0;background:rgba(31,46,85,.06);box-shadow:none;transform:none;transition:none}
body.anp-lesson .nb-chips .nb-stop .dotc img{display:block;width:26px;height:26px}
body.anp-lesson .nb-chips .nb-stop .lbl{font-size:15px;font-weight:600;color:#1F2E55;text-align:center}
body.anp-lesson .nb-chips .nb-stop.now{background:#FFF8EA;border-color:#F2B544}
body.anp-lesson .nb-chips .nb-stop.now .dotc{background:#F2B544;box-shadow:none;transform:none}
body.anp-lesson .nb-chips .nb-stop.now .lbl::after{color:#1F2E55}
body.anp-lesson .nb-chips .nb-stop.done .dotc{background:#1F2E55;color:#FBF8F1}
body.anp-lesson .nb-chips .nb-stop .tip{background:#1F2E55}
/* "What's tonight?": the details, one tap away */
body.anp-lesson .nb-what{margin-top:16px;border-top:1px solid rgba(31,46,85,.12)}
body.anp-lesson .nb-what summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;font-size:16px;font-weight:600;color:#1F2E55}
body.anp-lesson .nb-what summary::-webkit-details-marker{display:none}
body.anp-lesson .nb-what .chev{display:inline-flex;transition:transform .2s}
body.anp-lesson .nb-what[open] .chev{transform:rotate(180deg)}
body.anp-lesson .nb-what .nb-how{margin:0 0 6px;background:rgba(31,46,85,.05);border-radius:12px;color:#1F2E55}
body.anp-lesson .nb-after{margin-top:12px}
body.anp-lesson .nb-link{border:0;padding:10px 0;font-size:15px;font-weight:600;color:#1F2E55;text-decoration:underline;text-underline-offset:3px}
body.anp-lesson .nb-more summary{color:#1F2E55}
body.anp-lesson .nb-more .list button{color:#1F2E55}
body.anp-lesson .nb-foot{color:rgba(31,46,85,.72)}

/* =====================================================================================================
   3. THE NIGHT'S PARTS: the header is an ink card, the current part a gold chip with its number
   ===================================================================================================== */
body.anp-lesson .seg-bar{background:#1F2E55;color:#FBF8F1;border:0;border-radius:0 0 16px 16px;box-shadow:0 8px 24px rgba(31,46,85,.14)}
body.anp-lesson .seg-bar .seg-strip li:not(:last-child)::after{border-top-color:rgba(251,248,241,.35)}
body.anp-lesson .seg-bar .seg-strip .nb-stop .dotc{background:transparent;border:1.5px solid rgba(251,248,241,.45);color:#FBF8F1;font:700 15px/1 "Lexend",system-ui,sans-serif;box-shadow:none;transform:none;transition:none}
body.anp-lesson .seg-bar .seg-strip .nb-stop.now .dotc{width:36px;height:36px;background:#F2B544;border-color:#F2B544;color:#1F2E55;font-size:16px;box-shadow:0 0 0 3px rgba(242,181,68,.28)}
body.anp-lesson .seg-bar .seg-strip .nb-stop.done .dotc{background:rgba(251,248,241,.16);border-color:transparent;color:#FBF8F1}
body.anp-lesson .seg-bar .seg-strip .nb-stop .lbl,body.anp-lesson .seg-bar .seg-strip .nb-stop.now .lbl,body.anp-lesson .seg-bar .seg-strip .nb-stop.done .lbl{color:#FBF8F1}
body.anp-lesson .seg-bar .seg-strip .nb-stop.now .lbl::after{color:#FFE3A3}
/* numbered steps as gold chips (the big-word routine; was circled digits) */
body.anp-lesson .anp-steps{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
body.anp-lesson .anp-steps li{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.45;color:#1F2E55}
body.anp-lesson .anp-steps .anp-chip{flex:none;width:32px;height:32px;font-size:15px}
body.anp-lesson .anp-steps-t{padding-top:4px}

/* =====================================================================================================
   4. THE END OF THE NIGHT (session.js windDown): the lamp ring, one sentence, two tiles, the thread,
      one gold "Goodnight". The motion here runs only after the reading is over.
   ===================================================================================================== */
body.anp-lesson .eon{position:relative;margin:16px 0 0;padding:56px 24px 28px;border-radius:24px;text-align:center;color:#F3EBDD;overflow:hidden;
  background:radial-gradient(60% 40% at 50% 20%,rgba(255,200,120,.30),transparent 70%),linear-gradient(180deg,#2C3D6E,#141E3C)}
body.anp-lesson .eon-ring{width:132px;height:132px;margin:0 auto;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,#FFE3A3 0%,#F2B544 45%,rgba(242,181,68,0) 72%);animation:eonGlow 1.6s cubic-bezier(.22,1,.36,1) both}
body.anp-lesson .eon-ring img{display:block}
@keyframes eonGlow{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
body.anp-lesson .eon-h{margin:24px 0 8px;font:500 34px/1.15 "Fraunces",Georgia,serif;color:#F3EBDD}
body.anp-lesson .eon-line{margin:0 auto;max-width:32ch;font-size:17px;line-height:1.5;color:rgba(243,235,221,.86)}
body.anp-lesson .eon-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:24px 0 4px}
body.anp-lesson .eon-stat{flex:0 1 150px;min-width:124px;padding:14px 12px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
body.anp-lesson .eon-stat-disc{display:grid;place-items:center;width:36px;height:36px;margin:0 auto 6px;border-radius:50%;background:#FBF8F1}
body.anp-lesson .eon-stat b{display:block;font:600 30px/1.1 "Fraunces",Georgia,serif;color:#FFE3A3}
body.anp-lesson .eon-stat span{display:block;margin-top:2px;font-size:14px;line-height:1.3;color:rgba(243,235,221,.86)}
body.anp-lesson .eon-thread{display:block;width:100%;max-width:320px;height:auto;aspect-ratio:320/48;margin:18px auto 0;overflow:visible}
body.anp-lesson .eon-thread path{fill:none;stroke:#E9A93A;stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:eonDraw 1s cubic-bezier(.22,1,.36,1) .3s forwards}
body.anp-lesson .eon-thread circle.read{fill:#FFE3A3}
body.anp-lesson .eon-thread circle.tonight{fill:#F2B544;stroke:#FFE3A3;stroke-width:2}
body.anp-lesson .eon-thread circle.rest{fill:rgba(243,235,221,.32)}
@keyframes eonDraw{to{stroke-dashoffset:0}}
body.anp-lesson .eon-days{display:grid;grid-template-columns:repeat(7,1fr);max-width:320px;margin:4px auto 0;font-size:14px;color:rgba(243,235,221,.72)}
body.anp-lesson .eon-days .on{color:#FFE3A3;font-weight:700}
body.anp-lesson .eon-week{margin:14px 0 0;font-size:15px;font-weight:600;color:#FFE3A3}
body.anp-lesson a.btn.eon-done{display:flex;align-items:center;justify-content:center;max-width:420px;min-height:56px;margin:16px auto 0;border:0;border-radius:999px;background:#F2B544;color:#1F2E55;font:700 17px/1 "Lexend",system-ui,sans-serif;text-decoration:none;box-shadow:0 4px 0 #D99A2B,0 12px 32px rgba(242,181,68,.38)}
body.anp-lesson a.btn.eon-done.ghost{background:transparent;color:#1F2E55;border:1.5px solid rgba(31,46,85,.3);box-shadow:none}
body.anp-lesson .eon-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 20px;margin:12px 0 0;font-size:15px}
body.anp-lesson .eon-links a{display:inline-flex;align-items:center;min-height:44px;color:#1F2E55;font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* teens: a thin gold ring, no glow, nothing drawing itself, no sparkle */
body.anp-lesson .eon.eon-teen{background:linear-gradient(180deg,#1F2E55,#141E3C)}
body.anp-lesson .eon-teen .eon-ring{width:112px;height:112px;background:none;border:1.5px solid #F2B544;animation:none}
body.anp-lesson .eon-teen .eon-thread path{animation:none;stroke-dashoffset:0}
body.anp-lesson .cb-pal.has-lamp img{display:block;margin:0 auto}
@media (min-width:768px){body.anp-lesson .eon{padding:64px 40px 32px}}
@media (prefers-reduced-motion: reduce){
  body.anp-lesson .eon-ring{animation:none}
  body.anp-lesson .eon-thread path{animation:none;stroke-dashoffset:0}
}

/* =====================================================================================================
   5. NO PURPLE IN THE APP: the retired violet tokens resolve to ink on every page that loads this sheet
   ===================================================================================================== */
:root{--anp-violet:#1F2E55;--anp-violet-deep:#141E3C}
.pill{background:rgba(31,46,85,.08)}
.evalflag{background:#F4ECDC;border-color:rgba(31,46,85,.25)}
.tv-cue{background:rgba(31,46,85,.06)}

/* =====================================================================================================
   6. THE PARENT REPORT (report.html): one sentence on top, the sounds-learned ring, the thread of nights,
      then the details. Print / save as PDF is the ink button, Email to teacher the outline.
   ===================================================================================================== */
body.anp-page.rp-lamp{background:#FBF8F1;color:#1F2E55}
.rp-lamp .rp-top{margin-top:16px;padding:24px}
.rp-lamp .rp-top-line{margin:0 0 16px;max-width:42ch;font:500 22px/1.35 "Fraunces",Georgia,serif;color:#1F2E55;text-wrap:pretty}
.rp-lamp .rp-top-viz{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px}
.rp-lamp .rp-ring{margin:0;display:flex;align-items:center;gap:16px}
.rp-lamp .rp-ring svg{flex:none;width:120px;height:120px}
.rp-lamp .rp-ring-track{fill:none;stroke:rgba(31,46,85,.10);stroke-width:10}
.rp-lamp .rp-ring-arc{fill:none;stroke:#E9A93A;stroke-width:10;stroke-linecap:round}
.rp-lamp .rp-ring-n{font:600 30px "Fraunces",Georgia,serif;fill:#1F2E55}
.rp-lamp .rp-ring figcaption span{display:block}
.rp-lamp .rp-ring-k{font-size:16px;font-weight:600;line-height:1.3;color:#1F2E55}
.rp-lamp .rp-ring-s{margin-top:2px;font-size:14px;color:rgba(31,46,85,.72)}
.rp-lamp .rp-thread{margin:0;flex:1 1 240px;max-width:340px}
.rp-lamp .rp-thread svg{display:block;width:100%;height:auto;aspect-ratio:320/48;overflow:visible}
.rp-lamp .rp-thread-line{fill:none;stroke:#E9A93A;stroke-width:3;stroke-linecap:round}
.rp-lamp .rp-thread circle.read{fill:#F2B544;stroke:#D99A2B;stroke-width:1.5}
.rp-lamp .rp-thread circle.rest{fill:rgba(31,46,85,.2)}
.rp-lamp .rp-thread-days{display:grid;grid-template-columns:repeat(7,1fr);margin-top:2px;text-align:center;font-size:14px;color:rgba(31,46,85,.72)}
.rp-lamp .rp-thread-days .on{font-weight:700;color:#1F2E55}
.rp-lamp .rp-thread figcaption{margin-top:6px;font-size:14px;color:rgba(31,46,85,.72)}
.rp-lamp .rp-chip-k{margin:12px 0 6px;font:600 15px/1.3 "Lexend",system-ui,sans-serif;color:#1F2E55}
.rp-lamp .rp-actions .rp-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.rp-lamp .rp-btn-ink{gap:10px;background:#1F2E55;color:#fff;border:0}
.rp-lamp .rp-btn-ink:hover{background:#141E3C;color:#fff}
.rp-lamp .rp-btn-ic{display:block;width:24px;height:24px;filter:brightness(0) invert(1)}
.rp-lamp .rp-btn-outline{background:transparent;color:#1F2E55;border:1.5px solid rgba(31,46,85,.4)}
.rp-lamp .rp-btn-outline:hover{border-color:#1F2E55}
.rp-lamp .rp-btn-gold{background:#F2B544;color:#1F2E55}
.rp-lamp .rp-print-foot{display:none}
@media (max-width:560px){
  .rp-lamp .rp-top{padding:20px 18px}
  .rp-lamp .rp-top-line{font-size:20px}
  .rp-lamp .rp-actions .rp-btn{flex:1 1 100%}
}
/* PRINT: a one-page progress note for the week, 11pt, no backgrounds, ink only, symbols as line art; the
   tap-to-open details follow on the next page; the reader's first name and the dates sit in the foot */
@media print{
  body.rp-lamp,body.rp-lamp #note{font-size:11pt!important;color:#1F2E55!important}
  body.rp-lamp #note *,body.rp-lamp #note *::before{background:transparent!important;box-shadow:none!important;color:#1F2E55!important;text-shadow:none!important}
  body.rp-lamp #note .rp-card,body.rp-lamp #note .rp-tile,body.rp-lamp #note .fcx-card,body.rp-lamp #note .rp-chip,body.rp-lamp #note .iep{border:1px solid rgba(31,46,85,.45)!important}
  body.rp-lamp #note p,body.rp-lamp #note li,body.rp-lamp .rp-line-v,body.rp-lamp .rp-line-k,body.rp-lamp .rp-body p,body.rp-lamp .rp-body li,
  body.rp-lamp .rp-tile-k,body.rp-lamp .rp-tile-s,body.rp-lamp .rp-chip,body.rp-lamp .rp-sky-list,body.rp-lamp #note .subnote,body.rp-lamp .rp-body .foot,
  body.rp-lamp .rp-body .meta,body.rp-lamp .rp-body .rsub,body.rp-lamp .rp-checkup-top-slot .fcx-line-p,body.rp-lamp .rp-checkup-top-slot .fcx-cap,
  body.rp-lamp .rp-hero .rp-kicker,body.rp-lamp .rp-hero .rp-when,body.rp-lamp .rp-print-note,body.rp-lamp .rp-thread figcaption,body.rp-lamp .rp-ring-s,
  body.rp-lamp .rp-thread-days,body.rp-lamp .probetable,body.rp-lamp .rtable,body.rp-lamp .headline{font-size:11pt!important;line-height:1.4!important}
  body.rp-lamp .rp-hero .rp-title,body.rp-lamp #note[data-look] .rp-hero .rp-title{font-size:18pt!important}
  body.rp-lamp #note h2,body.rp-lamp .rp-plain h2,body.rp-lamp .rp-card > h2,body.rp-lamp .rp-checkup-top-slot .fcx-h{font-size:14pt!important}
  body.rp-lamp #note h3,body.rp-lamp .rp-body h3,body.rp-lamp .rp-sum h2,body.rp-lamp .rp-body h2.rt{font-size:12pt!important}
  body.rp-lamp .rp-top{padding:8pt 10pt!important;margin-top:6pt!important;break-inside:avoid}
  body.rp-lamp .rp-top-line{font-size:13pt!important;margin-bottom:6pt!important}
  body.rp-lamp .rp-ring svg{width:1in;height:1in}
  body.rp-lamp .rp-ring-arc,body.rp-lamp .rp-thread-line{stroke:#1F2E55!important}
  body.rp-lamp .rp-ring-track{stroke:rgba(31,46,85,.25)!important}
  body.rp-lamp .rp-ring-n{fill:#1F2E55!important}
  body.rp-lamp .rp-thread circle.read{fill:#1F2E55!important;stroke:#1F2E55!important}
  body.rp-lamp .rp-thread circle.rest{fill:none!important;stroke:#1F2E55!important;stroke-width:1!important}
  body.rp-lamp .rp-thread{max-width:3in}
  body.rp-lamp #rp-teacher > .rp-body{column-count:1!important}
  body.rp-lamp .rp-more{break-before:page;page-break-before:always}
  body.rp-lamp .rp-print-note{break-before:avoid;page-break-before:avoid}
  body.rp-lamp .rp-more > details:last-of-type{break-after:avoid}
  body.rp-lamp .rp-print-foot{display:block!important;margin-top:12pt;padding-top:4pt;border-top:1px solid rgba(31,46,85,.45);font-size:9pt!important}
  body.rp-lamp .rp-has-marginbox .rp-print-foot{display:none!important}
  body.rp-lamp img:not(.rp-btn-ic){filter:grayscale(1)}
  @page{size:letter;margin:.5in .5in .6in}
}

/* =====================================================================================================
   7. SETTINGS: four grouped cards with symbol headers (Readers, Account, Reading aids, Privacy); the reading
      aids as clear switches with a live preview line. "Remove permanently" stays on the reader's own sheet.
   ===================================================================================================== */
body.set-lamp{background:#FBF8F1;color:#1F2E55}
.set-lamp .set-group{margin-top:24px;padding:24px;background:#FFFDF8;border:1px solid rgba(31,46,85,.10);border-radius:20px;box-shadow:0 1px 2px rgba(31,46,85,.06),0 12px 32px rgba(31,46,85,.08);scroll-margin-top:72px}
.set-lamp .set-group-h{display:flex;align-items:center;gap:12px;margin:0}
.set-lamp .set-group-h h2{margin:0;font:600 28px/1.15 "Fraunces",Georgia,serif;color:#1F2E55}
.set-lamp .set-group-ic{flex:none;width:32px;height:32px}
.set-lamp .set-group .set-card.set-sub{margin:20px 0 0;padding:20px 0 0;background:none;border:0;border-top:1px solid rgba(31,46,85,.12);border-radius:0;box-shadow:none}
.set-lamp .set-group .set-group-h + .set-card.set-sub{margin-top:12px;padding-top:4px;border-top:0}
.set-lamp .set-sub-h{margin:0 0 8px;font:700 19px/1.25 "Lexend",system-ui,sans-serif;color:#1F2E55}
.set-lamp .set-card .sub{color:rgba(31,46,85,.78)}
.set-lamp .danger-link{color:#B4451F}
.set-lamp .set-aids-kid{margin-top:12px;padding:12px 16px 16px;border-radius:16px;background:#F4ECDC}
.set-lamp .set-aids-name{margin:4px 0 0;font-weight:700;font-size:17px}
.set-lamp .set-aid-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;border-bottom:1px solid rgba(31,46,85,.1)}
.set-lamp .set-aid-lab b{display:block;font-size:16px;font-weight:600}
.set-lamp .set-aid-lab span{display:block;font-size:14px;line-height:1.35;color:rgba(31,46,85,.72)}
.set-lamp .set-aid-sw{flex:none;position:relative;width:60px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.set-lamp .set-aid-sw::before{content:"";position:absolute;left:4px;right:4px;top:6px;bottom:6px;border-radius:999px;background:rgba(31,46,85,.28)}
.set-lamp .set-aid-sw[aria-checked="true"]::before{background:#1F2E55}
.set-lamp .set-aid-knob{position:absolute;top:10px;left:8px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .16s}
.set-lamp .set-aid-sw[aria-checked="true"] .set-aid-knob{transform:translateX(20px)}
.set-lamp .set-aid-sw:focus-visible{outline:3px solid #F2B544;outline-offset:2px;border-radius:999px}
.set-lamp .set-aid-preview{margin-top:12px;padding:14px 16px;border-radius:14px;background:#FFFDF8;border:1px solid rgba(31,46,85,.12)}
.set-lamp .set-aid-pp{margin:0 0 8px;font:400 17px/1.6 "Fraunces",Georgia,serif;color:rgba(31,46,85,.72)}
.set-lamp .set-aid-cc{margin:0;font:600 24px/1.4 "Lexend",system-ui,sans-serif;letter-spacing:.03em;color:#1F2E55}
.set-lamp .set-aid-preview.aid-focus .set-aid-pp{opacity:.45}
.set-lamp .set-aid-preview.aid-big .set-aid-cc{font-size:29px}
.set-lamp .set-aid-preview.aid-big .set-aid-pp{font-size:20px}
.set-lamp .set-aid-preview.aid-space .set-aid-cc{letter-spacing:.055em;word-spacing:.14em}
.set-lamp .set-aid-preview.aid-column .set-aid-cc{max-width:15ch;line-height:1.8}
@media (max-width:560px){.set-lamp .set-group{padding:20px 16px}.set-lamp .set-group-h h2{font-size:24px}}
@media (prefers-reduced-motion: reduce){.set-lamp .set-aid-knob{transition:none}}

/* =====================================================================================================
   8. THE PAYWALL CARD (join.html #paywall): a night band behind the heading, one price card, the trust row
      with the lock symbol, one gold button, "Not now". The sign-up form (#startfree) is untouched.
   ===================================================================================================== */
#paywall .hero{margin-top:8px;padding:32px 24px 28px;border-radius:24px;color:#F3EBDD;
  background:radial-gradient(40% 60% at 80% 20%,rgba(255,214,140,.18),transparent 70%),linear-gradient(180deg,#2C3D6E,#1F2E55 45%,#141E3C)}
#paywall .hero h1{color:#F3EBDD}
#paywall .hero .lead{color:rgba(243,235,221,.86)}
#paywall .hero a{color:#FFE3A3}
#paywall .plans.pw-one{display:block;max-width:520px;margin:24px auto 0}
#paywall .pw-one .pw-plan{display:block;padding:28px 24px 20px;background:#FFFDF8;border:2px solid #F2B544;border-radius:20px;box-shadow:0 1px 2px rgba(31,46,85,.06),0 12px 32px rgba(31,46,85,.08)}
#paywall .pw-free{display:inline-flex;align-items:center;min-height:32px;margin:0 0 12px;padding:4px 14px;border-radius:999px;background:#FFF8EA;border:1px solid #F2B544;font-weight:700;font-size:15px;color:#1F2E55}
#paywall .pw-free[hidden]{display:none}
#paywall .pw-one h2{margin:0;font:700 18px/1.3 "Lexend",system-ui,sans-serif;color:#1F2E55}
#paywall .pw-one .big{margin-top:6px;font:600 44px/1.05 "Fraunces",Georgia,serif;color:#1F2E55}
#paywall .pw-one .big small{font:500 17px "Lexend",system-ui,sans-serif;color:rgba(31,46,85,.72)}
#paywall .pw-one .per{margin:10px 0 0;font-size:16px;color:rgba(31,46,85,.8)}
#paywall .pw-year{margin:10px 0 0;font-size:15px;line-height:1.55;color:rgba(31,46,85,.72)}
#paywall .pw-year[hidden]{display:none}
#paywall .pw-year a{color:#1F2E55;font-weight:700;text-decoration:underline;text-underline-offset:3px}
#paywall .pw-one a.btn.btn-primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;margin-top:20px;border:0;border-radius:999px;background:#F2B544;color:#1F2E55;font:700 17px/1.2 "Lexend",system-ui,sans-serif;box-shadow:0 4px 0 #D99A2B,0 12px 32px rgba(242,181,68,.38);text-decoration:none}
#paywall .pw-notnow{margin:12px 0 0;text-align:center}
#paywall .pw-notnow a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-size:15px;font-weight:600;color:rgba(31,46,85,.78);text-decoration:underline;text-underline-offset:3px}
#paywall .pw-one .pw-trust{display:grid;grid-template-columns:1fr;gap:12px;margin:16px 0 0;padding:16px 0 0;border-top:1px solid rgba(31,46,85,.12)}
#paywall .pw-one .pw-trust li{font-size:14px;color:rgba(31,46,85,.78)}
#paywall .pw-one .pw-trust li b{font-size:15px;color:#1F2E55}
#paywall .pw-one .pw-trust .ico{width:36px;height:36px;background:#F4ECDC;color:#1F2E55}
#paywall .pw-one .pw-trust .ico svg{width:20px;height:20px}
#paywall .pw-one .pw-trust .ico-sym img{display:block}
#paywall .founding-head{max-width:520px;margin-left:auto;margin-right:auto}
@media (max-width:420px){#paywall .pw-one .pw-plan{padding:24px 18px 16px}#paywall .pw-one .big{font-size:40px}}

/* =====================================================================================================
   9. ONBOARDING: the privacy line with the lock on the name step
   ===================================================================================================== */
.ob-privacy{display:flex;align-items:center;gap:8px;margin:8px 0 4px;font-size:15px;line-height:1.45;color:rgba(31,46,85,.8)}
.ob-privacy img{flex:none;display:block}

/* =====================================================================================================
   10. THE READING CHECK (placement.html): the standard header in minimal mode (the logo, nothing else), and
       the disclosure rows under the button
   ===================================================================================================== */
nav.anp-nav-minimal{height:64px;min-height:64px;box-sizing:border-box;padding-top:0;padding-bottom:0;display:flex;align-items:center}
nav.anp-nav-minimal > .r{min-height:0;width:100%}
nav.anp-nav-minimal .anp-appbar-links,nav.anp-nav-minimal .anp-appbar-menu,nav.anp-nav-minimal .anp-switch-reader,nav.anp-nav-minimal a.menu{display:none!important}
.pl-disclose{margin-top:16px}
.pl-disclose details{border-top:1px solid rgba(31,46,85,.12)}
.pl-disclose details:last-child{border-bottom:1px solid rgba(31,46,85,.12)}
.pl-disclose summary{display:flex;align-items:center;min-height:48px;cursor:pointer;font-weight:600;font-size:16px;color:#1F2E55}
.pl-disclose details .subnote{margin:0 0 12px}

/* =====================================================================================================
   11. NOTHING UNDER 14PX on these pages (story captions, small print, footers)
   ===================================================================================================== */
.sm-cap-k,.pl-sa-k,.sc-k,.discl,footer,footer a,footer span{font-size:14px}

/* the phone's docked page buttons (storybook.js moves them beside #anp-dock, between Reading aids and "?") */
body > .sb-nav.sb-nav-docked{position:fixed;z-index:9999;top:auto;bottom:calc(6px + env(safe-area-inset-bottom,0px));transform:none;animation:none;transition:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
body > .sb-nav-docked.prev{left:64px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(31,46,85,.18);background:#fff;color:#1F2E55;font-size:26px;line-height:1}
body > .sb-nav-docked.next{left:118px;right:62px;width:auto;height:46px;border-radius:999px;border:0;background:#1F2E55;color:#fff;font:700 16px/1 "Lexend",system-ui,sans-serif;white-space:nowrap}
body > .sb-nav-docked:hover{transform:none}
body > .sb-nav-docked:focus-visible{outline:3px solid #F2B544;outline-offset:3px}
/* phones: tighter frames around the words so the words themselves stay big (the page scales to fit) */
@media (max-width:480px){
  .sb-lamp .sb-page-in{padding:14px 14px}
  .sb-lamp .sb-cc{padding:14px 12px 12px}
  .sb-lamp .sb-cc .youread{margin-bottom:6px}
  .sb-lamp .sb-page-body{gap:10px}
  .sb-lamp .sb-reread{margin-top:10px;padding-top:8px}
  .sb-lamp .sb-pp .k{margin-bottom:4px}
  .sb-lamp .sb-art{height:clamp(130px,22vh,200px)}
}

/* =====================================================================================================
   12. FRESH-EYES FIXES (Oct 14)
   ===================================================================================================== */
/* the tricky-word coach sits above the page buttons on wider screens */
@media (min-width:481px){body.sb-lock .anp-misscoach{bottom:88px}}
/* nothing under 14px: the night start's bookmark keeps its words for the harness but shows only the ribbon;
   the warm-up card's counter and hint; the setup strip's numbers; captions */
body.anp-lesson .nb-ribbon-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.anp-lesson .stim .count,body.anp-lesson .stim .hint{font-size:14px}
.anp-fn-strip .fn-dot{font-size:14px;width:26px;height:26px}
.pl-start-art .pl-sa-k,.ob-cap .ob-cap-k,.ob-cap-k,#paywall .sc-k,#paywall .story-cap .sc-k,.story-cap .sc-k{font-size:14px}
body.anp-lesson .eon-night{margin:16px 0 0;font:600 14px/1.3 "Lexend",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#FFE3A3}
body.anp-lesson .eon-night + .eon-h{margin-top:8px}
@media print{body.rp-lamp #note .rp-hero .rp-kicker,body.rp-lamp #note .rp-hero .rp-when,body.rp-lamp #note[data-look] .rp-hero .rp-kicker,body.rp-lamp #note[data-look] .rp-hero .rp-when{font-size:11pt!important}}
.anp-misscoach{border-left-color:#E9A93A}

/* Tire-kick Oct 15 (Joel: approved contrast pairs only, css/anp-tokens.css v3): on every page this pass dresses, the
   older muted ink (#4A4339) becomes the approved muted text #4B5674 and the ink on the gold button is the approved
   #1F2E55 (was the lantern ink #33240C). Reading text is unchanged (it is the ink, already approved). */
:root{--anp-ink-soft:#4B5674;--anp-lantern-ink:#1F2E55}