/* A New Page, DESIGN PASS OCT 7: the app at night and the family (2026-10-08, agent anp-night).
   Loaded AFTER program.css, design/anp.css, design/look.css and each page's own <style>, so these
   rules win on equal specificity. Presentation only: the family home, the night start and session
   cards, the finish, the weekly report, Settings, the certificate and postcard, and the shared
   story-moment pieces (story-moment.js). Tokens from design/anp.css; per-child look tokens from
   design/look.css ([data-look]). Every animation stops under prefers-reduced-motion.
   Desktop layouts start at 1100px (the book page-turn view stays centred). */

/* ================= shared story-moment pieces (story-moment.js) ================= */
.sm-fig{position:relative;margin:0;border-radius:var(--anp-radius,18px);overflow:hidden;background:var(--anp-night,#1F2E55)}
.sm-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--anp-night,#1F2E55)}
.sm-fig.is-tall .sm-frame{aspect-ratio:16/9}
/* the whole picture is always visible: a blurred copy fills the frame, the real one sits on top, contained */
.sm-frame .sm-blur{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;filter:blur(22px) brightness(.7) saturate(1.1);transform:scale(1.05)}
.sm-frame .sm-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* the caption card: cream, gold hairline, uppercase world label, one italic Fraunces line */
.sm-cap{position:relative;z-index:1;margin:-28px 12px 12px;max-width:min(560px,calc(100% - 24px));background:var(--anp-card-warm,#FFFDF8);border:1px solid var(--anp-lantern,#F2B544);border-radius:12px;padding:10px 14px 11px;box-shadow:0 2px 6px rgba(42,39,34,.12)}
.sm-cap-k{display:block;font:700 .75rem/1.3 var(--anp-font-ui,'Lexend',system-ui,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--anp-brand,#1F2E55)}
.sm-cap-t{display:block;margin-top:3px;font:italic 500 1rem/1.4 var(--anp-font-lamp-display,'Fraunces',Georgia,serif);color:var(--anp-ink,#26221C)}
.sm-hero,.sm-friend{display:inline-block;flex:none;border-radius:999px;overflow:hidden;background:var(--anp-parchment-deep,#EADFC8);border:3px solid var(--anp-card-warm,#FFFDF8);box-shadow:0 2px 6px rgba(42,39,34,.22)}
.sm-hero{width:64px;height:64px}
.sm-friend{width:44px;height:44px}
.sm-hero img,.sm-friend img{display:block;width:100%;height:100%;object-fit:cover}
/* the lantern: seven glow levels; level 0 rests at a soft glow and never goes out */
.sm-lantern{display:inline-flex;align-items:center;justify-content:center;width:30px;height:38px;flex:none;vertical-align:middle;--glow:.25}
.sm-lantern svg{width:24px;height:32px;overflow:visible}
.sm-l-halo{fill:var(--anp-lantern,#F2B544);opacity:calc(var(--glow) * .55)}
.sm-l-wire{fill:none;stroke:var(--anp-brand,#1F2E55);stroke-width:1.6;stroke-linecap:round}
.sm-l-cap{fill:var(--anp-brand,#1F2E55)}
.sm-l-glass{fill:var(--anp-lantern-tint,#FCF1D9);stroke:var(--anp-brand,#1F2E55);stroke-width:1.4}
.sm-l-flame{fill:var(--anp-lantern-deep,#E2A12F);opacity:calc(.45 + var(--glow) * .55)}
.sm-lantern[data-glow="0"]{--glow:.15}
.sm-lantern[data-glow="1"]{--glow:.28}
.sm-lantern[data-glow="2"]{--glow:.4}
.sm-lantern[data-glow="3"]{--glow:.52}
.sm-lantern[data-glow="4"]{--glow:.64}
.sm-lantern[data-glow="5"]{--glow:.76}
.sm-lantern[data-glow="6"]{--glow:.88}
.sm-lantern[data-glow="7"]{--glow:1}
.sm-lantern[data-glow="7"] .sm-l-glass{fill:#FFF3CC}

/* ================= family home (home.html) ================= */
/* the "?" sits in the header now, never over the cards */
.one-help.in-header{position:static;right:auto;bottom:auto;flex:none;box-shadow:none;margin-left:2px}
.one-help-sheet{top:72px;bottom:auto}
#app{padding-bottom:24px}
/* roster line: "Tonight: Maya ✓ · Theo ○" */
.home-roster{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:14px 0 0;padding:6px 14px;border-radius:999px;background:var(--hm-well,#F4ECDC);border:1px solid var(--hm-line,rgba(42,39,34,.12));font-size:var(--anp-fs-sm,.9375rem)}
.home-roster-k{font-weight:700;color:var(--hm-ink,#26221C);margin-right:2px}
.home-roster-sep{color:var(--hm-ink-soft,#4A4339)}
.home-roster-a{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 4px;font-weight:600;color:var(--hm-night,#1F2E55);text-decoration:none}
.home-roster-a:hover{text-decoration:underline}
.home-roster-a.done .home-roster-mk{color:var(--hm-moss,#3F7357);font-weight:800}
.home-roster-mk{color:var(--hm-ink-soft,#4A4339)}
/* the hero and friend on the reader's art */
.kid-art{position:relative}
.kid-duo{position:absolute;left:12px;bottom:10px;display:flex;align-items:flex-end;gap:0;z-index:1}
.kid-duo .sm-hero{width:60px;height:60px}
.kid-duo .sm-friend{width:42px;height:42px;margin-left:-10px}
.kid-duo.wave .sm-hero{animation:kdBob 1s cubic-bezier(.3,1.4,.5,1) .35s 1 both}
.kid-duo.wave .sm-friend img{animation:kdBlink .9s ease-in-out 1.3s 1 both;transform-origin:50% 45%}
@keyframes kdBob{0%{transform:translateY(0) rotate(0)}35%{transform:translateY(-8px) rotate(-6deg)}70%{transform:translateY(0) rotate(4deg)}100%{transform:none}}
@keyframes kdBlink{0%,100%{transform:scaleY(1)}45%,55%{transform:scaleY(.12)}}
/* labelled cover colours: a 24px dot inside a 44px target */
.cover-pick-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 8px;padding:6px 10px 0}
.cover-pick-label{font-size:var(--anp-fs-sm,.9375rem);font-weight:600;color:var(--hm-ink-soft,#4A4339)}
.cover-pick{display:flex;flex-wrap:wrap;justify-content:center;gap:0}
.cover-sw{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;border-radius:999px;cursor:pointer}
.cover-dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--hm-card,#FFFDF8);box-shadow:0 0 0 1px rgba(42,39,34,.28)}
.cover-sw.on .cover-dot{box-shadow:0 0 0 2px var(--hm-card,#FFFDF8),0 0 0 4px var(--hm-night,#1F2E55)}
.cover-sw:focus-visible{outline:3px solid var(--hm-night,#1F2E55);outline-offset:0}
.kid-card .who .sm-lantern{margin-left:auto}
.kid-card .who .done-pill{margin-left:6px}
.kid-morning,.kid-notice{margin:8px 0 0;font-size:var(--anp-fs-sm,.9375rem);color:var(--hm-ink,#26221C);line-height:1.5;padding:8px 12px;border-radius:12px;background:var(--hm-gold-tint,#FCF1D9)}
.kid-notice{background:var(--hm-night-tint,#E8ECF4)}
/* a reader card in its own look (look.css tokens): a teen's card is deep navy, a little one's warm cream */
.kid-card[data-look="older"]{background:var(--anp-night,#16213F);border-color:rgba(255,255,255,.08);color:#F3EEE3}
.kid-card[data-look="older"] .who h2,.kid-card[data-look="older"] .next,.kid-card[data-look="older"] .kid-morning{color:#F7F2E7}
.kid-card[data-look="older"] .who .age,.kid-card[data-look="older"] .cliff,.kid-card[data-look="older"] .weeknote,.kid-card[data-look="older"] .cover-pick-label,.kid-card[data-look="older"] .mins{color:#CFC8BA}
.kid-card[data-look="older"] .kid-world,.kid-card[data-look="older"] .weeknote a,.kid-card[data-look="older"] a.weeknote{color:#F2C46B}
.kid-card[data-look="older"] .kid-more{border-top-color:rgba(255,255,255,.14)}
.kid-card[data-look="older"] .kid-morning{background:rgba(235,170,44,.16)}
.kid-card[data-look="older"] .btn-quiet{background:transparent;color:#F7F2E7;border-color:rgba(255,255,255,.35)}
.kid-card[data-look="older"] .btn.ghost{color:#F7F2E7;border-color:rgba(255,255,255,.35)}
.kid-card[data-look="older"] .btn-gold{background:var(--anp-lantern,#EBAA2C)}
.kid-card[data-look="older"] .done-pill{background:transparent;color:#9FD6B5;border-color:#9FD6B5}
.kid-card[data-look="older"] .cover-dot{border-color:var(--anp-night,#16213F)}
.kid-card[data-look="littles"]{background:var(--anp-card-warm,#FFFBF3);border-radius:var(--anp-radius,20px)}
.kid-card[data-look="littles"] .kid-art{border-radius:var(--anp-radius,20px) var(--anp-radius,20px) 0 0}
.kid-row[data-look="older"]{background:var(--anp-night,#16213F);color:#F7F2E7}
.kid-row[data-look="older"] .kid-row-sub{color:#CFC8BA}
.kid-row[data-look="older"] .kid-row-go:not(.gold){color:#F2C46B}
/* "This week" and the next-episode teasers: desktop only */
.home-aside{display:none}
.home-week,.home-next{background:var(--hm-card,#FFFDF8);border:1px solid var(--hm-line,rgba(42,39,34,.12));border-radius:18px;box-shadow:var(--hm-shadow-1);padding:20px 22px;margin-top:16px}
.home-week h2,.home-next h2{font-family:var(--hm-display,'Fraunces',Georgia,serif);font-weight:600;font-size:var(--anp-fs-lg,1.25rem);color:var(--hm-night,#1F2E55);margin:0 0 8px}
.home-week-list{list-style:none;margin:0;padding:0}
.home-week-row{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--hm-line,rgba(42,39,34,.12))}
.home-week-row:first-child{border-top:0;padding-top:0}
.home-week-name{font-weight:700;color:var(--hm-ink,#26221C)}
.home-week-v{font-size:var(--anp-fs-sm,.9375rem);color:var(--hm-ink-soft,#4A4339);line-height:1.45}
.home-week-v:empty{display:none}
.home-teaser{position:relative;display:flex;align-items:flex-end;min-height:132px;border-radius:14px;overflow:hidden;margin-top:12px;background:var(--anp-night,#1F2E55)}
.home-teaser-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.home-teaser-bg.veiled{filter:blur(10px) brightness(.6);transform:scale(1.08)}
.home-teaser::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,20,40,0) 30%,rgba(14,20,40,.82) 100%)}
.home-teaser-t{position:relative;z-index:1;padding:12px 14px;color:#FBF8F1}
.home-teaser-k{display:block;font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#F7D58C}
.home-teaser-line{display:block;margin-top:2px;font:italic 500 1rem/1.4 var(--anp-font-lamp-display,'Fraunces',Georgia,serif)}

@media (min-width:1100px){
  #app.wrap{max-width:1240px}
  .home-dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 32px;align-items:start}
  .home-main{grid-column:1 / span 7;min-width:0}
  .home-aside{display:block;grid-column:8 / span 5;min-width:0;position:sticky;top:16px;margin-top:20px}
  .home-dash .kid-grid,.home-dash .kid-grid.one{max-width:none;grid-template-columns:minmax(0,1fr)}
  /* wide reader cards: art 40% on the left, Tonight and Start on the right */
  .home-dash .kid-grid .kid-card{display:grid;grid-template-columns:40% minmax(0,1fr);grid-template-rows:1fr auto}
  .home-dash .kid-grid .kid-card .kid-art{grid-column:1;grid-row:1;aspect-ratio:auto;min-height:240px;height:100%}
  .home-dash .kid-grid .kid-card .cover-pick-wrap{grid-column:1;grid-row:2;padding:6px 8px 10px}
  .home-dash .kid-grid .kid-card .kid-body{grid-column:2;grid-row:1 / span 2}
  .home-dash .kid-grid .kid-card.off-license,.home-dash .kid-grid .kid-card.license-choose{display:flex}
  /* three or more readers: a 2-up grid of cards (art on top) */
  .home-dash.many .kid-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-dash.many .kid-grid .kid-card{display:flex}
  .home-dash.many .kid-grid .kid-card .kid-art{aspect-ratio:16/9;min-height:0;height:auto}
  .home-dash .home-tile-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ================= night start (session.js startScreen) =================
   The injected #anp-night-css is appended to <head> at runtime, so these rules carry #app to win. */
#app .nb-spread.has-art{grid-template-columns:1fr}
#app .nb-art{min-height:0;background:var(--anp-night,#1F2E55)}
#app .nb-art .nb-fig{border-radius:0;background:transparent}
#app .nb-art .nb-fig .sm-frame{aspect-ratio:16/9}
#app .nb-art .nb-fig .sm-cap{margin:-30px 12px 12px}
#app .nb-art img.bg:not(.sm-img){position:static;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
#app .nb-art .sm-img.bg{position:absolute;inset:0;width:100%;height:100%;object-position:50% 50%;object-fit:contain}
#app .nb-art .world{z-index:2}
.nb-friend{position:absolute;top:10px;right:10px;z-index:2;display:flex;align-items:center;flex-direction:row-reverse;gap:8px;max-width:72%}
.nb-friend .sm-friend{width:48px;height:48px;margin-left:-10px}
.nb-duo{display:inline-flex;align-items:flex-end;flex:none}
.nb-friend .sm-hero{width:60px;height:60px}
.nb-friend-bub{background:var(--anp-card-warm,#FFFDF8);color:var(--anp-ink,#26221C);border-radius:14px;padding:6px 10px;font-size:.9375rem;font-weight:600;line-height:1.3;box-shadow:0 2px 6px rgba(0,0,0,.18)}
#app .nb-page{display:block}
#app .nb-ribbon{width:40px;height:66px;top:-2px;right:20px;display:flex;align-items:flex-start;justify-content:center;padding-top:9px;clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%)}
.nb-ribbon-t{font:700 .625rem/1.05 var(--anp-font-ui,'Lexend',system-ui,sans-serif);color:var(--anp-lantern-ink,#33240C);text-align:center;width:30px;letter-spacing:.02em}
#app .nb-page h2{padding-right:44px}
.nb-sound{font-weight:600;color:var(--anp-brand,#1F2E55)!important}
.nb-chapter{margin:10px 0 0;padding:8px 12px;border-radius:12px;background:var(--anp-lantern-tint,#FCF1D9);border:1px solid rgba(42,39,34,.12);color:var(--anp-ink,#26221C);font-size:.9375rem;line-height:1.4}
.nb-chapter-n{font-weight:700;color:var(--anp-brand,#1F2E55)}
.nb-chapter-star{font-family:var(--anp-font-lamp-display,'Fraunces',Georgia,serif);font-style:italic;font-weight:600}
[data-look="older"] #app .nb-ribbon .nb-ribbon-t{color:var(--anp-lantern-ink,#33240C)}
@media (min-width:760px){
  #app .nb-spread.has-art{grid-template-columns:1fr}
  #app .nb-art{min-height:0}
  #app .nb-art .nb-fig .sm-frame{aspect-ratio:21/9;max-height:460px}
}
@media (min-width:1100px){
  #app .nb-wrap{max-width:1120px}
  #app .nb-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px;align-items:start;padding:32px 36px 26px}
  #app .nb-left{grid-column:1}
  #app .nb-right{grid-column:2}
  #app .nb-page > .nb-foot{grid-column:1 / -1}
  #app .nb-right .nb-strip{margin-top:4px}
  /* the three parts with their times, said out loud on a big screen (no tap needed) */
  #app .nb-right .nb-stop .tip{position:static;opacity:1;transform:none;background:none;color:var(--anp-ink-soft,#57514A);white-space:normal;padding:0;font-size:.875rem;order:3;text-align:center;line-height:1.3}
  #app .nb-right .nb-strip li:first-child .tip,#app .nb-right .nb-strip li:last-child .tip{left:auto;right:auto}
  #app .nb-right .nb-stop{gap:6px}
  #app .nb-go .btn.full{margin-left:0}
  #app .nb-meta{text-align:left}
  /* session cards: the child's card centred-left at about 640px, the grown-up's script beside it at 68ch */
  body.anp-lesson #app.wrap{max-width:1240px}
  body.anp-lesson #app.wrap > .script{float:right;clear:right;width:min(68ch,calc(100% - 680px));margin:14px 0 14px 32px}
  body.anp-lesson #app.wrap > .card,body.anp-lesson #app.wrap > .stim,body.anp-lesson #app.wrap > div:not(.nb-wrap):not(.seg-head):not(.script),body.anp-lesson #app.wrap > .btn.full,body.anp-lesson #app.wrap > p{max-width:640px}
  body.anp-lesson #app.wrap > .nb-wrap{max-width:1120px}
}
/* QA 2026-10-08 item 126: on a phone the friend's speech bubble sat on top of the world pill. Under 420px the
   bubble drops below the portraits and the pair keeps to the right, clear of the pill. */
@media (max-width:419px){
  .nb-friend{flex-direction:column;align-items:flex-end;gap:6px;max-width:56%}
  .nb-friend-bub{font-size:.875rem;padding:5px 9px}
}
/* QA 2026-10-08 item 127: the session step bar at phone width shows the three icons and names only the
   current step ("Warm-up / Now"); the other names stay for screen readers. */
@media (max-width:419px){
  .seg-bar .seg-strip .nb-stop:not(.now) .lbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
}
/* the reading-aids button wears the friend's portrait */
.anp-aids-btn.has-friend{padding:0;overflow:hidden;background:var(--anp-card-warm,#FFFDF8)}
.anp-aids-btn.has-friend img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
/* night 1 Story tab: the world stays on screen */
.card.ns-world{padding-top:12px}
.ns-fig{margin:0 0 12px}
.ns-duo{display:flex;justify-content:center;align-items:flex-end;margin:-6px 0 8px}
.ns-duo .sm-friend{margin-left:-10px}

/* ================= the finish (celebrate.js overlay, dressed by session.js) ================= */
.cb-pal.has-art{font-size:1rem;filter:none}
/* QA 2026-10-08 item 135: one gold button while the finish overlay is open (session.js sets body.fin-open) */
body.fin-open #app button,body.fin-open #app .btn{visibility:hidden}
.fin-pop{display:flex;align-items:flex-end;justify-content:center;gap:0;position:relative;padding-bottom:4px}
.fin-pop .sm-hero{width:96px;height:96px;border-width:4px}
.fin-pop .sm-friend{width:72px;height:72px;margin-left:-14px;border-width:4px}
.fin-pop .sm-friend.hop{animation:finHop 1.1s cubic-bezier(.3,1.5,.5,1) .4s 3 both}
@keyframes finHop{0%,100%{transform:translateY(0)}40%{transform:translateY(-16px) rotate(-6deg)}60%{transform:translateY(0) rotate(3deg)}75%{transform:translateY(-5px)}}
.fin-stamp{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:74px;height:58px;margin-left:12px;border-radius:8px;background:var(--anp-card-warm,#FFFDF8);border:1.5px dashed rgba(42,39,34,.35);transform:rotate(-4deg);box-shadow:0 4px 12px rgba(0,0,0,.25)}
.fin-paw{width:26px;height:26px;fill:var(--anp-brand,#1F2E55);opacity:.85;animation:finStamp .5s cubic-bezier(.2,1.2,.4,1) 1s both}
.fin-stamp-t{font:700 .8125rem/1.1 var(--anp-font-ui,'Lexend',system-ui,sans-serif);color:var(--anp-brand,#1F2E55);margin-top:2px;animation:finInk .4s ease 1.25s both}
@keyframes finStamp{0%{transform:scale(2.2) translateY(-18px);opacity:0}70%{transform:scale(.9);opacity:1}100%{transform:scale(1);opacity:.85}}
@keyframes finInk{from{opacity:0}to{opacity:1}}
.fin-pop.older .sm-hero{width:84px;height:84px}
.fin-duo{display:flex;justify-content:center;align-items:flex-end;margin:0 0 8px}
.fin-duo .sm-hero{width:84px;height:84px}
.fin-duo .sm-friend{width:60px;height:60px;margin-left:-12px}
.fin-say{margin:4px auto 0;max-width:40ch;font-weight:600;color:var(--anp-ink,#26221C)}
/* the level-up / step-up screen (QA 2026-10-08 item 121): the hero and the chosen friend, the friend hops */
.lvl-duo{margin:4px 0 6px}
.lvl-duo .sm-hero{width:96px;height:96px}
.lvl-duo .sm-friend{width:68px;height:68px;margin-left:-14px}
.lvl-duo .sm-friend.hop{animation:finHop 1.1s cubic-bezier(.3,1.5,.5,1) .3s 2 both}
.lvl-head{font-family:var(--anp-font-lamp-display,'Fraunces',Georgia,serif)}
.lvl-world-img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:var(--anp-night,#1F2E55)}
/* Deep Check 3 (2026-10-10): the level-up ribbon, "Level 4 complete · Level 5 unlocked". A cream band
   between gold edges with gold swallowtail ends, navy ink (gold never carries the text). It unrolls
   from the middle once, 700ms ease-out; reduced motion: it is simply there. */
.lvl-worlds{max-width:100%}
.lvl-world{min-width:0}
.lvl-card{overflow-wrap:anywhere}
.lvl-ribbon{display:block;width:max-content;max-width:100%;margin:2px auto 12px;padding:0 16px}
.lvl-ribbon > span{display:block;position:relative;padding:7px 16px;background:var(--anp-lantern-tint,#FCF1D9);border-top:2px solid var(--anp-lantern,#F2B544);border-bottom:2px solid var(--anp-lantern,#F2B544);color:var(--anp-ink,#26221C);font:700 var(--anp-fs-sm,.9375rem)/1.35 var(--anp-font-ui,'Lexend',system-ui,sans-serif);letter-spacing:.01em;overflow-wrap:normal}
.lvl-ribbon > span::before,.lvl-ribbon > span::after{content:"";position:absolute;top:-2px;bottom:-2px;width:14px;background:var(--anp-lantern,#F2B544)}
.lvl-ribbon > span::before{right:100%;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,45% 50%)}
.lvl-ribbon > span::after{left:100%;clip-path:polygon(0 0,100% 0,55% 50%,100% 100%,0 100%)}
@media (prefers-reduced-motion:no-preference){
  .lvl-ribbon{animation:lvlUnroll .7s cubic-bezier(.22,1,.36,1) .1s both}
}
@keyframes lvlUnroll{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
.lvl-cert-row{margin:14px 0 0;text-align:center}
.lvl-cert-link{background:none;border:0;padding:0 6px;min-height:44px;font:600 var(--anp-fs-sm,.9375rem)/1.2 var(--anp-font-ui,'Lexend',system-ui,sans-serif);color:var(--anp-brand,#1F2E55);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lvl-cert-link:focus-visible{outline:3px solid var(--anp-brand,#1F2E55);outline-offset:3px;border-radius:6px}
/* the printed level certificate: only it prints, navy ink on white, one Letter page */
.lvl-cert{display:none}
/* Deep Check 3: empty and offline notes for ages 11 to 18 are one line on a navy card, no characters */
body[data-look="older"] .home-offline,body[data-look="older"] .anp-offline-note{background:var(--anp-night,#16213F);color:#F7F2E7;padding:12px 16px;border-radius:12px;text-align:left}
@media print{
  html.lvl-printing body > *:not(#lvl-cert),html.lvl-printing > *:not(body):not(head){display:none!important}
  html.lvl-printing,html.lvl-printing body{background:#fff!important;margin:0!important;padding:0!important}
  html.lvl-printing .lvl-cert{display:block!important;color:#1F2E55;font-family:var(--anp-font-ui,'Lexend',system-ui,sans-serif);text-align:center;border:2px solid #1F2E55;outline:1px solid #1F2E55;outline-offset:-8px;padding:.55in .6in .45in;break-inside:avoid;page-break-inside:avoid}
  .lvl-cert .lc-brand{margin:0;font-size:11pt;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
  .lvl-cert .lc-title{margin:6pt 0 14pt;font:600 30pt/1.1 var(--anp-font-lamp-display,'Fraunces',Georgia,serif);color:#1F2E55}
  .lvl-cert .lc-small{margin:0;font-size:12pt}
  .lvl-cert .lc-name{margin:6pt auto;max-width:90%;padding-bottom:4pt;border-bottom:1px solid #1F2E55;font:600 26pt/1.15 var(--anp-font-lamp-display,'Fraunces',Georgia,serif);overflow-wrap:anywhere}
  .lvl-cert .lc-deed{margin:0 0 14pt;font-size:13pt}
  .lvl-cert .lc-h{margin:10pt 0 4pt;font-size:11pt;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#1F2E55}
  .lvl-cert .lc-sounds{margin:0 auto;max-width:92%;font-size:11pt;line-height:1.5}
  .lvl-cert .lc-skills{margin:0 auto;max-width:92%;padding:0;list-style:none;text-align:left;font-size:10pt;line-height:1.35}
  .lvl-cert .lc-skills.two{column-count:2;column-gap:18pt}
  .lvl-cert .lc-skills li{margin:0 0 3pt;padding-left:12pt;position:relative;break-inside:avoid}
  .lvl-cert .lc-skills li::before{content:"";position:absolute;left:0;top:.5em;width:5pt;height:5pt;border:1px solid #1F2E55;border-radius:50%}
  .lvl-cert .lc-foot{display:flex;justify-content:space-between;margin-top:18pt;padding-top:6pt;border-top:1px solid #1F2E55;font-size:10pt}
}
/* the friend's handwritten note: the self-hosted Fraunces italic (no handwriting font is in /fonts and
   the security policy allows only self-hosted fonts) on a small tilted note card */
.fin-note{max-width:420px;margin:16px auto 0;padding:16px 20px 14px;background:#FFF8E6;border:1px solid rgba(42,39,34,.14);border-radius:6px;box-shadow:0 6px 16px rgba(42,39,34,.14);transform:rotate(-1.2deg);background-image:repeating-linear-gradient(180deg,transparent 0 27px,rgba(31,46,85,.10) 27px 28px)}
.fin-note-t{margin:0;font:italic 500 1.25rem/1.4 var(--anp-font-lamp-display,'Fraunces',Georgia,serif);color:#2B2A4C}
.fin-note-from{margin:6px 0 0;text-align:right;font:italic 600 1.0625rem/1.3 var(--anp-font-lamp-display,'Fraunces',Georgia,serif);color:#2B2A4C}

/* ================= weekly report (report.html) ================= */
.rp-hero.has-story{overflow:hidden}
.rp-hero .rp-story{border-radius:0}
.rp-hero .rp-story .sm-frame{aspect-ratio:16/9;max-height:440px}
.rp-hero .rp-story .sm-cap{margin:-30px 16px 0}
.rp-hero-disc{width:60px;height:60px;align-self:center}
.rp-hero.has-story .rp-hero-body{justify-content:flex-start}
.rp-hero.has-story #anp-report-switch{margin-left:auto}
/* the clipped green half-circles on the stat tiles: .rp-bar was an inline <span>, so its height and
   radius applied to broken inline fragments. It is a block now, and its fill is a block inside it. */
.rp-tile .rp-bar{display:block;position:relative;height:6px;overflow:hidden}
.rp-tile .rp-bar span{display:block;height:100%}
.rp-tile .rp-dots{flex-wrap:wrap}
.rp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.rp-cols{display:block}
.rp-print-side{display:none}
/* the sky strip: one mark per word that stuck, in the child's own world */
.rp-sky h2{margin-bottom:10px}
.rp-sky-strip{display:flex;flex-wrap:wrap;gap:2px;padding:14px 12px;border-radius:14px;background:linear-gradient(180deg,#1A2547 0%,#26346A 100%)}
.rp-sky[data-mark="leaf"] .rp-sky-strip{background:linear-gradient(180deg,#22402F 0%,#2F5A40 100%)}
.rp-sky-mark{position:relative;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.rp-sky-mark::before{content:"";display:block;transform:translateY(calc((var(--i,0) - 4) * 1.2px))}
.rp-sky-mark.m-ember::before{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#FFE3A1,#F29A38 55%,#C2551E);box-shadow:0 0 10px 3px rgba(242,154,56,.55)}
.rp-sky-mark.m-star::before{width:16px;height:16px;background:#FFE7A6;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);filter:drop-shadow(0 0 4px rgba(255,231,166,.8))}
.rp-sky-mark.m-leaf::before{width:14px;height:18px;background:linear-gradient(135deg,#B9E28C,#5E9E4B);border-radius:0 100% 0 100%;transform:rotate(calc(var(--i,0) * 9deg - 30deg))}
.rp-sky-mark.m-light::before{width:10px;height:10px;border-radius:50%;background:#FFF2C2;box-shadow:0 0 12px 4px rgba(255,226,140,.6)}
.rp-sky-mark.on{outline:2px solid #F7D58C;outline-offset:-4px}
.rp-sky-mark:focus-visible{outline:3px solid #F7D58C;outline-offset:-2px}
.rp-sky-word{min-height:1.6em;margin:8px 0 0;font:italic 600 1.125rem/1.4 var(--anp-font-lamp-display,'Fraunces',Georgia,serif);color:var(--anp-brand,#1F2E55)}
.rp-checkups-slot:empty{display:none}
/* the "?" sits in the report header now */
#anp-help-btn.in-header{position:static!important;box-shadow:none!important;margin-left:4px}
/* this child's look on their report section */
#note[data-look="older"] .rp-hero{background:var(--anp-night,#16213F);color:#F3EEE3}
#note[data-look="older"] .rp-hero .rp-title{color:#F7F2E7}
#note[data-look="older"] .rp-hero .rp-kicker{color:#F2C46B}
#note[data-look="older"] .rp-hero .rp-when{color:#CFC8BA}
#note[data-look="littles"] .rp-card,#note[data-look="littles"] .rp-tile,#note[data-look="littles"] .rp-hero{border-radius:20px}
@media print{
  .rp-hero .rp-story .sm-frame{max-height:1.6in}
  .rp-hero .rp-story .sm-blur{display:none}
  .rp-sky-strip{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rp-print-side{display:none!important}
}
@media (min-width:1100px){
  .rp-lamp #app.wrap{max-width:1240px}
  .rp-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 28px;align-items:start}
  .rp-col-l{grid-column:1 / span 7;min-width:0}
  .rp-col-r{grid-column:8 / span 5;min-width:0}
  .rp-col-l .rp-plain{margin-top:24px}
  .rp-col-l .rp-lines{max-width:68ch}
  .rp-col-r .rp-tiles{margin-top:24px}
  .rp-print-side{display:inline-flex;margin-top:16px;width:100%}
  .rp-print-plain{display:none}
}

/* ================= Settings ================= */
.set-story{position:relative;margin:4px 0 16px;border-radius:14px;overflow:hidden}
.set-story .sm-frame{aspect-ratio:16/9;max-height:220px}
.set-story .sm-cap{margin:-26px 10px 10px}
.kidrow .sm-hero{width:48px;height:48px;border-width:2px}
@media (min-width:1100px){
  .set-lamp .wrap{max-width:1240px}
  .set-lamp .set-layout{grid-template-columns:232px minmax(0,1fr)}
  .set-lamp .set-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
  .set-lamp .set-cards > .set-card{margin-top:0}
  .set-lamp .set-cards > :not(.set-card){grid-column:1 / -1}
}

/* ================= certificate and first-night postcard (certificate.html) ================= */
.cert-hero{width:96px;height:96px;border-radius:50%;overflow:hidden;margin:2px auto 10px;border:3px solid var(--cert-accent,#F2B544);box-shadow:0 0 0 4px var(--anp-card-warm,#FFFDF8);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.cert-hero img{display:block;width:100%;height:100%;object-fit:cover}
.cert.is-postcard .cert-art img{object-position:50% 25%}
@media print{.cert-hero{width:80px;height:80px}}

/* ================= free week over: each reader's card (story-moment.js mountFreeWeekOver, used by join.html) ================= */
.sm-fwo{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:16px 0}
.sm-reader{background:var(--anp-card-warm,#FFFDF8);border:1px solid rgba(42,39,34,.12);border-radius:var(--anp-radius,18px);overflow:hidden;box-shadow:0 1px 3px rgba(42,39,34,.08)}
.sm-reader .sm-fig{border-radius:0}
.sm-reader-body{padding:4px 16px 16px}
.sm-reader-who{display:flex;align-items:center;gap:10px;margin-top:8px}
.sm-reader-who .sm-hero{width:52px;height:52px}
.sm-reader-who .sm-friend{width:38px;height:38px;margin-left:auto}
.sm-reader-name{margin:0;font:600 var(--anp-fs-lg,1.25rem)/1.2 var(--anp-font-lamp-display,'Fraunces',Georgia,serif);color:var(--anp-ink,#26221C)}
.sm-reader-line{margin:8px 0 0;font-size:var(--anp-fs-base,1.0625rem);line-height:1.5;color:var(--anp-ink,#26221C)}
.sm-reader[data-look="older"]{background:var(--anp-night,#16213F);border-color:rgba(255,255,255,.08)}
.sm-reader[data-look="older"] .sm-reader-name,.sm-reader[data-look="older"] .sm-reader-line{color:#F7F2E7}
@media (min-width:720px){.sm-fwo{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}

/* ================= true history card (session.js trueHistoryCard, historical worlds only, 2026-10-08) ================= */
.anp-truehist{border-left:4px solid var(--anp-gold,#F4B73F)}
.sb-pp.anp-truehist{margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(244,183,63,.10)}
.anp-lesson .script.anp-truehist{border-left-color:var(--anp-gold,#F4B73F)}

/* ================= reduced motion ================= */
@media (prefers-reduced-motion:reduce){
  .kid-duo.wave .sm-hero,.kid-duo.wave .sm-friend img,.fin-pop .sm-friend.hop,.lvl-duo .sm-friend.hop,.fin-paw,.fin-stamp-t,.lvl-ribbon{animation:none!important}
  .fin-paw{opacity:.85}
}