/* A New Page, family home: WONDER AND PROGRESS (Oct 17 standard, J2 / J4 / W1 / W3 / W8). Pairs with home-wonder.js.
   Loaded after home-world.css. Still layers only: nothing here animates. Words never sit on a picture: every
   drawing and picture keeps its own cream strip with night ink under it. No gold text on navy or cream.
   Pairs used (all WCAG AA): #1F2E55 on #FFFDF8 / #FFF8EC 12.9:1, #4B5674 on #FFFDF8 7.3:1, #2E6B47 on #FFFDF8 6.4:1,
   #5E5A54 on #FBF8F1 6.4:1 (and 5.4:1 on the world-tinted paper). */

/* ---------- J2: the parent progress card ---------- */
.home-progress{background:#FFFDF8;border:1px solid rgba(31,46,85,.14);border-radius:18px;box-shadow:0 1px 3px rgba(42,39,34,.08);padding:18px 20px 16px;margin-top:16px;color:#1F2E55}
.home-progress h2{font-family:var(--hm-display,'Fraunces',Georgia,serif);font-weight:600;font-size:1.25rem;line-height:1.25;color:#1F2E55;margin:0 0 10px}
.home-progress .hp-row{padding:12px 0 4px;border-top:1px solid rgba(31,46,85,.12)}
.home-progress .hp-row:first-of-type{border-top:0;padding-top:0}
.home-progress .hp-name{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-weight:700;font-size:17px;color:#1F2E55}
.home-progress .hp-name::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--kid-accent,#F2B544);box-shadow:0 0 0 2px #FFFDF8,0 0 0 3px rgba(31,46,85,.25);flex:none}
.home-progress .hp-facts{margin:0;font-size:17px;line-height:1.55;color:#1F2E55}
.home-progress .hp-f{display:block}
.home-progress .hp-f[hidden]{display:none}
.home-progress .hp-f b{font-weight:700;color:#1F2E55;font-variant-numeric:tabular-nums}
.home-progress .hp-empty{margin:0;font-size:17px;line-height:1.5;color:#1F2E55;font-weight:600}
.home-progress .hp-one{margin:8px 0 0;font-size:15px;line-height:1.5;color:#4B5674}
.home-progress .hp-cadence{margin:12px 0 0;padding-top:10px;border-top:1px dashed rgba(31,46,85,.18);font-size:15px;line-height:1.5;color:#4B5674}
.home-progress .hp-chart{margin:10px 0 0}
.home-progress .hp-svg{display:block;width:100%;max-width:420px;height:auto;overflow:visible}
.home-progress .hp-grid{stroke:rgba(31,46,85,.12);stroke-width:1}
.home-progress .hp-axis{fill:#4B5674;font:600 15px/1 var(--anp-font-ui,'Lexend',system-ui,sans-serif)}
.home-progress .hp-area{fill:rgba(31,46,85,.06)}
.home-progress .hp-line{fill:none;stroke:#1F2E55;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.home-progress .hp-pt{fill:#1F2E55}
.home-progress .hp-pt--now{stroke:#FFFDF8;stroke-width:2}
.home-progress .hp-val{fill:#1F2E55;font:700 16px/1 var(--anp-font-ui,'Lexend',system-ui,sans-serif)}
.home-progress .hp-cap{margin:4px 0 0;font-size:15px;line-height:1.45;color:#4B5674}
.home-progress .hp-up{color:#2E6B47;font-weight:700}
/* in the computer's side column it is the first card there */
.home-aside .home-progress{margin-top:0}
.home-aside .home-checkup.in-aside + .home-progress,.home-aside .home-progress + .home-checkup{margin-top:16px}

/* ---------- W1: the nightly line, right under the greeting ---------- */
.home-top .hw-nightly{margin:6px 0 0;font-size:17px;line-height:1.45;font-weight:600;color:#1F2E55;max-width:56ch}
#app .hw-band .home-top .hw-nightly{display:inline-block;margin-top:8px;padding:6px 12px;border-radius:12px;background:#FFF8EC;color:#1F2E55;border:1px solid rgba(31,46,85,.14)}   /* on every world: its own cream strip, night ink (12.9:1), never on the scene's colours */
[data-lane="teen"] #app .hw-band .home-top .hw-nightly{border-radius:6px}

/* ---------- W3: time-of-day light on the home art (still colour layers) ---------- */
.hw-art-frame{position:relative;display:block;width:fit-content;max-width:calc(100% - 28px);margin:14px auto 0;border-radius:14px;overflow:hidden;line-height:0;box-shadow:0 4px 14px rgba(31,46,85,.18)}
html body #app .hw-hero .hw-art-frame .hw-hero-img{max-width:100%!important;margin:0!important;box-shadow:none!important;border-radius:0!important}
.hw-tod{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.hw-tod--day{display:none}
.hw-tod--morning{background:linear-gradient(180deg,rgba(255,222,186,.34) 0%,rgba(255,236,214,.12) 55%,rgba(200,226,255,.10) 100%);mix-blend-mode:soft-light}
.hw-tod--dusk{background:linear-gradient(180deg,rgba(255,150,72,.34) 0%,rgba(214,112,96,.20) 50%,rgba(84,62,140,.30) 100%);mix-blend-mode:soft-light}
.hw-tod--dusk::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,170,90,0) 40%,rgba(60,40,110,.16) 100%);mix-blend-mode:multiply}
.kid-art .hw-tod{z-index:1}

/* ---------- W3: the drawing that fills in as the child reads ---------- */
.hw-scene{margin:0;background:#FFF8EC;border:1px solid rgba(31,46,85,.14);border-radius:18px;padding:10px 10px 8px;color:#1F2E55;box-shadow:0 1px 3px rgba(42,39,34,.08)}
.hw-scene-svg{display:block;width:100%;height:auto;max-height:190px;border-radius:12px}
.hw-scene-cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:8px 4px 2px}
.hw-scene-k{font-family:var(--hm-display,'Fraunces',Georgia,serif);font-weight:600;font-size:17px;color:#1F2E55}
.hw-scene-n{font-size:15px;color:#4B5674;font-weight:600}
.hw-scene--teen{border-radius:10px}
.hw-scene--teen .hw-scene-svg{border-radius:6px}
.hw-scene--teen .hw-scene-k{font-family:var(--anp-font-ui,'Lexend',system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;font-size:15px}
/* inside the world scene: a right-hand column holds the drawing and the shelf */
#app .hw-side{display:flex;flex-direction:column;gap:16px;min-width:0}
/* the Littles: Nan's garden sits on the reader's card, above the Start row */
.kid-card .hw-scene--littles{margin:12px 0 0;border-radius:16px}

/* ---------- J4: one big Start, the child's own hero beside it ---------- */
#app .hw-band .hw-tonight .go .btn-gold{min-height:60px;font-size:19px;flex:1 1 230px}
#app .hw-band .hw-tonight .go .hw-go-duo{display:flex;align-items:flex-end;flex:none;margin:0}
#app .hw-band .hw-tonight .go .hw-go-duo .sm-hero{width:60px;height:60px}
#app .hw-band .hw-tonight .go .hw-go-duo .sm-friend{width:42px;height:42px;margin-left:-12px}
@media (max-width:360px){#app .hw-band .hw-tonight .go .hw-go-duo .sm-hero{width:48px;height:48px}#app .hw-band .hw-tonight .go .hw-go-duo .sm-friend{width:34px;height:34px}}

/* ---------- W8: the child's own colour ---------- */
.kid-card.has-accent{border-top:4px solid var(--kid-accent)}
#app .hw-band .hw-card.has-accent{border-top:4px solid var(--kid-accent)}
.home-tonight.has-accent{border-top:4px solid var(--kid-accent)}
/* the Littles: Nan's paw prints walk up to the Start button (still) */
.kid-card .go .lt-paws{flex:none;width:68px;height:36px;margin-right:-4px;align-self:center}

/* ---------- the Share tile's privacy line ---------- */
.home-privacy{display:flex;align-items:flex-start;justify-content:center;gap:8px;max-width:60ch;margin:12px auto 0;font-size:15px;line-height:1.45;color:#5E5A54;text-align:left}
.home-privacy img{flex:none;width:18px;height:18px;margin-top:2px}
.sheet .yeargrid.gen2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Start stays on the first screen with the nightly line in place: a 320 phone keeps the world-name strip slim and the
   picture whole but smaller; a computer with two or
   three readers in the scene lets the picture yield a little */
@media (max-width:360px){
  html body #app .hw-hero .hw-hero-copy{padding:4px 10px 6px!important}
  html body #app .hw-hero .hw-art-frame{margin-top:10px}
  html body #app .hw-hero .hw-art-frame .hw-hero-img{max-height:170px}   /* Part 8 257: the Start row lies on this picture, so the picture is tall enough to carry it */
  #app .hw-band .home-top .hw-nightly{font-size:15px;padding:4px 10px;margin-top:6px}
}
/* (Part 8 257: the readers' cards no longer sit side by side in the scene, so the picture keeps its full height) */
/* the no-account cards (Oct 17): tonight's picture whole on cream, one gold button, the fine print in #5E5A54 */
.home-free .home-free-pic{margin:-6px -4px 16px}
.home-free .home-free-img{display:block;max-width:100%;max-height:min(36vh,300px);width:auto;height:auto;margin:0 auto;object-fit:contain;border-radius:14px;box-shadow:0 4px 14px rgba(31,46,85,.18)}
html body #app .home-free p.home-free-fine{margin:10px auto 0;font-size:15px;line-height:1.45;color:#5E5A54}

/* =====================================================================================================================
   PART 8 (Oct 17 evening). Pairs used (all WCAG AA): #1F2E55 on #FFFDF8 / #FFF8EC 12.9:1, white on the navy scrim
   rgba(14,22,48,.9) over any picture 11:1 or better, #1F2E55 on gold #F2B544 7.4:1, #5E5A54 on #FBF8F1 6.4:1,
   #1F2A44 on the Littles honey cream #FFF6E6 12.6:1. Nothing here moves.
   ===================================================================================================================== */

/* ---------- 258: Reading Week, four nights, four circles ---------- */
.nights-chip.rw-meter{gap:10px}
.rw-meter .rw-dots{display:inline-flex;align-items:center;gap:6px;flex:none}
.rw-meter .rw-dot{display:block;box-sizing:border-box;width:14px;height:14px;border-radius:50%;border:2px solid #CFC8BA;background:transparent}
.rw-meter .rw-dot.on{background:#2F7D4F;border-color:#2F7D4F}
.rw-meter .rw-t{color:#1F2E55;font-weight:600}
.nights-chip.rw-meter{flex-wrap:wrap;white-space:normal;max-width:100%;height:auto;padding-top:4px;padding-bottom:4px;row-gap:2px}   /* a 320px phone: the dots, then the words under them */
html body #app .hw-band .nights-chip.rw-meter{background:#FFF8EC;border-color:rgba(31,46,85,.14);color:#1F2E55}

/* ---------- 257: ONE big Start, on the world picture, on a navy scrim ---------- */
.kid-grid.one{max-width:640px}
/* the computer's side-by-side card (design/pass-night.css) gives way: a Start card is picture on top, words under it */
html body .home-dash .kid-grid .kid-card.has-stage{display:flex;flex-direction:column}
html body .home-dash .kid-grid .kid-card.has-stage .kid-art{aspect-ratio:var(--ar,1.5);min-height:0;height:auto}
html body .home-dash .kid-grid .kid-card.has-stage .kid-body{grid-column:auto;grid-row:auto}
html body .home-dash .kid-grid .kid-card.has-stage .cover-pick-wrap{grid-column:auto;grid-row:auto}
.kid-art.is-stage{width:min(100%,calc(min(34vh,320px) * var(--ar,1.5)));aspect-ratio:var(--ar,1.5);margin:0 auto;background:#FFF8EC}
.kid-art.is-stage:not(.world-strip) > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.kid-art.is-stage.world-strip > img{object-fit:contain;background:#FFF8EC}
.hs-start{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;margin:0;padding:20px 12px 12px;
  background:linear-gradient(0deg,rgba(14,22,48,.94) 0,rgba(14,22,48,.9) 80%,rgba(14,22,48,0) 100%);box-sizing:border-box}
.hs-start .hs-who{flex:0 0 100%;min-width:0;margin:0;text-align:center;color:#FFFFFF;font:600 15px/1.3 var(--anp-font-ui,'Lexend',system-ui,sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-start .btn-gold,.hs-start .btn-quiet,.hs-start .btn.ghost{min-height:64px;flex:1 1 240px;max-width:460px;padding:0 22px;font-size:19px;line-height:1.2;text-align:center}
.hs-start .btn-gold{background:#F2B544;color:#1F2E55}
.hs-start .btn-gold:hover{background:#E2A12F;color:#1F2E55}
.hs-start .btn.ghost,.hs-start .btn-quiet{background:transparent;border:2px solid #FFFFFF;color:#FFFFFF}
.hs-start .mins{flex:0 0 100%;text-align:center;color:#FFFFFF;font-weight:600;font-size:15px}
/* the reader's own hero (and friend) stand on the picture, just above the scrim's left edge */
.hs-start .kid-duo{position:absolute;left:12px;bottom:calc(100% - 22px);display:flex;align-items:flex-end;margin:0;z-index:4}
.hs-start .kid-duo .sm-hero{width:56px;height:56px}
.hs-start .kid-duo .sm-friend{width:40px;height:40px;margin-left:-10px}
.hs-start .kid-duo.wave .sm-hero,.hs-start .kid-duo.wave .sm-friend img{animation:none!important}
/* Nan's still paw prints (W8) walk up to the Start row from the left edge of the picture, on a soft white pill so they show on any garden */
.hs-start .lt-paws{position:absolute;left:12px;bottom:calc(100% - 6px);width:76px;height:42px;margin:0;padding:3px 6px;box-sizing:border-box;border-radius:999px;background:rgba(255,253,248,.9)}
html body #app .hw-hero .hw-art-frame .hs-start{left:0;right:0;bottom:0}
html body #app .hw-hero.has-start .hw-art-frame{line-height:normal}
@media (max-width:420px){
  .hs-start{padding:22px 10px 10px}
  .hs-start .btn-gold,.hs-start .btn-quiet,.hs-start .btn.ghost{font-size:18px;padding:0 16px}
  .hs-start .kid-duo .sm-hero{width:46px;height:46px}
  .hs-start .kid-duo .sm-friend{width:32px;height:32px}
}

/* ---------- 257 / M3: the reader switcher (round face + name, the one on the page marked; nothing starts from here) ---------- */
.kid-list.home-switcher{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0;padding:0;background:none;border-radius:0}
.home-switcher .home-sw-k{flex:0 0 100%;margin:0;font:600 15px/1.3 var(--anp-font-ui,'Lexend',system-ui,sans-serif);color:#4B5674}
.home-switcher .kid-row{width:auto;min-height:52px;gap:8px;padding:5px 16px 5px 6px;border-radius:999px;background:#FFFDF8;border:1.5px solid rgba(31,46,85,.3);box-shadow:none;color:#1F2E55}
.home-switcher .kid-row:hover{border-color:#1F2E55}
.home-switcher .kid-row.is-selected{background:#1F2E55;border-color:#1F2E55;color:#FFFFFF}
.home-switcher .kid-row-name{font-family:var(--anp-font-ui,'Lexend',system-ui,sans-serif);font-weight:700;font-size:16px;line-height:1.2;color:inherit}
.home-switcher .kid-row-sub{font-size:15px;line-height:1.2;color:inherit;opacity:1}
.home-switcher .kid-row:not(.is-selected) .kid-row-sub{color:#4B5674}
.home-switcher .kid-thumb{position:relative;width:40px;height:40px;border-radius:999px;background:#E8ECF4;color:#1F2E55;font-size:1.15rem}
.home-switcher .kid-row.is-selected .kid-thumb{background:#FFF8EC}
.kid-thumb .kid-thumb-l{position:relative;z-index:0}
.kid-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#FFF8EC;z-index:1}
html body .next-reader{margin:8px 0 0;padding:6px 14px;background:#FFF8EC;border:1px solid rgba(31,46,85,.14);border-radius:12px;color:#1F2E55;font-size:15px;font-weight:600}
html body #app .hw-band .home-switcher .home-sw-k{color:var(--w-text,#1F2E55)}
html body #app .hw-band .next-reader{color:#1F2E55}

/* ---------- 263 / M4: "Next in the story" shows the world with no hero, the reader's own hero standing on it ---------- */
.home-teaser-pic{position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto;line-height:0}
.home-teaser-pic .teaser-hero{position:absolute;left:10px;bottom:10px;width:52px;height:52px}

/* ---------- $29 / 264: the Grown-ups menu ---------- */
.home-links{gap:0 16px}
.home-links .grown-btn{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 6px;border:0;background:none;color:#1F2E55;font:600 15px/1.2 var(--anp-font-ui,'Lexend',system-ui,sans-serif);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.grown-panel{box-sizing:border-box;max-width:440px;margin:6px auto 0;padding:12px 18px 14px;background:#FFFDF8;border:1px solid rgba(31,46,85,.18);border-radius:18px;color:#1F2E55;font-size:15px;line-height:1.5}
.grown-panel[hidden]{display:none}
.grown-panel .gm-k{margin:0 0 2px;font-weight:700;font-size:15px;color:#1F2E55}
.grown-panel .gm-plan{margin:0;font-size:15px;color:#1F2E55}
.grown-panel .gm-pay,.grown-panel .gm-link{display:flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:#1F2E55}
.grown-panel .gm-pay{text-decoration:underline;text-underline-offset:3px;font-weight:700}
.grown-panel .gm-link{border-top:1px solid rgba(31,46,85,.12);margin-top:6px}
.grown-panel .gm-cloud{border-top:1px solid rgba(31,46,85,.12);margin-top:6px;padding-top:6px}
.grown-panel .gm-cloud:empty{display:none}
.grown-panel .gm-cloud .backup-banner,.grown-panel .gm-cloud .sync-card{max-width:none;margin:0;padding:0;background:none;border:0;border-radius:0}
.grown-panel .anp-cloud{max-width:none}
.grown-panel .anp-cloud-note{font-size:15px;line-height:1.5;color:#1F2E55}
.grown-panel .anp-cloud-btn{min-height:44px;font-size:15px}
.grown-panel .anp-cloud-btn.ghost{background:#FFFDF8;color:#1F2E55;border:1.5px solid rgba(31,46,85,.3)}
.bk-top:empty{display:none}
.bk-top .anp-cloud-quiet,.anp-cloud-quiet{color:#5E5A54}

/* ---------- 256: Nan's little books (the Littles colours) ---------- */
.nan-books{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:16px;padding:14px 14px 16px;border-radius:20px;background:#FFF6E6;border:2px solid #F2B544;color:#1F2A44;text-align:center}
.nan-books .nb-shelf{width:min(100%,260px)}
.nan-books .nb-row{display:flex;align-items:flex-end;justify-content:center;gap:8px;min-height:84px;padding:0 6px}
.nan-books .nb-cover{display:block;flex:0 1 72px;min-width:0;margin-bottom:-3px;position:relative;z-index:1;border-radius:6px;background:#FFFDF8;box-shadow:0 6px 8px -5px rgba(42,39,34,.55)}
.nan-books .nb-cover img{display:block;width:100%;height:auto;object-fit:contain;border-radius:6px}
.nan-books .nb-plank{display:block;height:14px;border-radius:5px;background:linear-gradient(180deg,#DDA676,#C98B5A 45%,#A8703F);box-shadow:0 8px 10px -8px rgba(42,39,34,.6)}
.nan-books .nb-h{margin:0;font-family:'Baloo 2','Lexend',system-ui,sans-serif;font-weight:700;font-size:1.3rem;line-height:1.2;color:#1F2A44}
.nan-books .nb-s{margin:2px 0 8px;font-size:17px;line-height:1.5;color:#1F2A44;max-width:36ch}
.nan-books .nb-go{display:inline-flex;min-height:48px;background:#FFFDF8;color:#1F2A44;border:2px solid #1F2A44}

/* the Start row is on a navy scrim: its focus ring is white there (a navy ring would vanish) */
html body .hs-start :focus-visible,html body #app .hs-start :focus-visible,html body #app .hw-band .hs-start :focus-visible{outline:3px solid #FFFFFF;outline-offset:3px}

/* Part 13 item 442: a full board/map/garden that was finished tonight is dimmed and finished, with a small "Tomorrow" tag (picture still whole, caption text stays full contrast) */
.hw-scene--done .hw-scene-svg{opacity:.62;filter:saturate(.7)}
.hw-scene-tag{display:inline-block;padding:2px 10px;border-radius:999px;background:#FDEBC2;color:#1F2E55;border:1px solid rgba(31,46,85,.22);font-size:13px;font-weight:700;line-height:1.4}