/* A New Page, BEAUTY PASS (Batch 3, Part 9 B3 to B6), 2026-10-19. Loaded LAST on the pages it dresses, after
   /css/anp-age.css (the age palettes). Presentation only: no words, no ids, no flow change.
   Every colour is an age token (var(--age-*)) or an app token that anp-age.css re-points per age, so one rule reads
   right on the parent palette, the Littles pastels, the 5 to 10 map tones and the teen midnight.
   Rules: text AA everywhere; gold buttons keep navy text; pictures whole (contain), never cropped; nothing moves
   while words show (no animation in this file at all); the child's reading surface (.stim) is not touched. */

/* parent palette fallbacks for the age tokens (no child picked) */
:root,:root[data-age="parent"]{--age-bg-2:#F4ECDC;--age-bg-3:#EEF3EF;--age-accent:#2F5D4E;--age-edge:#D99A2B;--age-radius:20px}
/* in night mode the tinted surfaces follow the night tokens, so a light tint never sits under light words */
@media screen and (prefers-color-scheme: dark){:root[data-anp-app]:not([data-theme="light"]){--age-bg-2:var(--anp-parchment);--age-bg-3:var(--anp-card-warm);--age-accent:#7FD8C8}}
:root[data-anp-app][data-theme="dark"]{--age-bg-2:var(--anp-parchment);--age-bg-3:var(--anp-card-warm);--age-accent:#7FD8C8}
:root[data-anp-app][data-theme="dark"][data-age="teen"]{--age-bg-3:#1F2E55}

/* ===================================================================================================================
   THE READING CHECK (placement.html), Part 9 B5
   =================================================================================================================== */
/* the story card (left on a computer, a whole-picture band on a phone): the picture on a tinted mat, never cropped */
#app > .pl-start-art{background:var(--age-bg-2);border-radius:24px;padding:14px 14px 0;box-shadow:var(--age-shadow-card)}
#app > .pl-start-art .pl-sa-bg{border-radius:16px;object-fit:contain}
#app > .pl-start-art figcaption{background:transparent;border-top:0;color:var(--anp-ink);padding:12px 6px 16px}
#app > .pl-start-art .pl-sa-k{color:var(--anp-ink);letter-spacing:0;text-transform:none;font-size:15px}
#app > .pl-start-art .pl-sa-line{font:italic 500 22px/1.3 var(--anp-font-lamp-display,'Fraunces',Georgia,serif);color:var(--anp-ink)}
@media (max-width:1023px){
  #app > .pl-start-art{padding:10px 10px 0;border-radius:20px}
  #app > .pl-start-art .pl-sa-bg{max-height:180px}
  #app > .pl-start-art .pl-sa-line{font-size:19px}
}

/* the header card: the free / time line is a soft pill badge, the heading in Fraunces */
#app > .card:has(> h2.pl-h1){background:transparent;border:0;box-shadow:none;padding-left:0;padding-right:0}
#app > .card:has(> h2.pl-h1) > .k{display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;border-radius:999px;background:color-mix(in srgb,var(--age-accent) 14%,var(--anp-paper-lamp));color:var(--anp-ink);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none}
#app > .card:has(> h2.pl-h1) > h2.pl-h1{font-family:var(--anp-font-lamp-display,'Fraunces',Georgia,serif);font-weight:600;letter-spacing:-.01em;color:var(--anp-ink)}
#app > .card:has(> h2.pl-h1) > p{color:var(--anp-ink-soft);font-size:17px;line-height:1.6}

/* the form card: a tinted card, 52px fields with a clear edge, labels in ink (never grey on beige) */
#app > .card:has(#pl-age),#app > .card:has(#pl-name){background:var(--age-bg-3);border:0;border-radius:var(--age-radius);box-shadow:var(--age-shadow-card);padding:24px}
#app > .card:has(#pl-age) > .k,#app > .card:has(#pl-name) > .k{font:600 20px/1.3 var(--anp-font-lamp-display,'Fraunces',Georgia,serif);color:var(--anp-ink);letter-spacing:0;text-transform:none}
#app > .card:has(#pl-age) label,#app > .card:has(#pl-name) label{font-size:15px;font-weight:600;color:var(--anp-ink)}
#app > .card:has(#pl-age) input[type=text],#app > .card:has(#pl-age) input[type=number],#app > .card:has(#pl-age) select,
#app > .card:has(#pl-name) input[type=text],#app > .card:has(#pl-name) input[type=number],#app > .card:has(#pl-name) select{
  min-height:52px;border-radius:14px!important;border:2px solid color-mix(in srgb,var(--anp-ink) 22%,transparent)!important;background:var(--anp-card-warm);color:var(--anp-ink);font-size:17px}
#app > .card:has(#pl-age) input:focus-visible,#app > .card:has(#pl-age) select:focus-visible,#app > .card:has(#pl-name) input:focus-visible{outline:3px solid var(--age-accent)!important;outline-offset:2px;border-color:var(--anp-ink)!important}
#app > .card:has(#pl-age) .subnote:not(.pl-err),#app > .card:has(#pl-name) .subnote:not(.pl-err){font-size:15px;line-height:1.5;color:var(--anp-ink-soft)}

/* the main gold button: 56px, a gold edge under it, navy words (never gold on navy) */
#app > button.btn.full:not(.ghost),#app > a.btn.full:not(.ghost){min-height:56px;border-radius:999px;background:var(--anp-lantern,#F2B544);color:#1F2E55;box-shadow:0 4px 0 var(--age-edge)}

/* the two helpers become soft cards with a small book / pencil mark, not grey underlined rows */
#app .pl-disclose{display:grid;gap:12px;margin-top:18px}
#app .pl-disclose details{margin:0;background:var(--anp-card-warm);border-radius:18px;padding:4px 18px;box-shadow:var(--age-shadow-card)}
#app .pl-disclose details > summary{gap:12px;color:var(--anp-ink);font-size:15px;font-weight:600;text-decoration:none;list-style:none}
#app .pl-disclose details > summary::-webkit-details-marker{display:none}
#app .pl-disclose details > summary::before{content:"";flex:none;width:32px;height:32px;border-radius:50%;background-color:var(--age-bg-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2E55' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5c2.6-1 5.2-1 8 .8 2.8-1.8 5.4-1.8 8-.8v12.6c-2.6-1-5.2-1-8 .8-2.8-1.8-5.4-1.8-8-.8z'/%3E%3Cpath d='M12 6.3v12.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:18px}
#app .pl-disclose details + details > summary::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2E55' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 4.5l4 4L9 19H5v-4z'/%3E%3Cpath d='M13 7l4 4'/%3E%3C/svg%3E")}
#app .pl-disclose details[open]{padding-bottom:14px}

/* "Reading this after bedtime?": a calm card with a moon, not a button-shaped box */
#app > a.btn.full.ghost[href="join.html"]{display:flex!important;align-items:center;gap:14px;justify-content:flex-start;text-align:left;background:var(--age-bg-2)!important;border:0!important;box-shadow:none!important;color:var(--anp-ink)!important;border-radius:18px!important;padding:14px 18px!important;font-weight:500;text-decoration:none}
#app > a.btn.full.ghost[href="join.html"]::before{content:"";flex:none;width:36px;height:36px;border-radius:50%;background:#1F2E55 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.8 4.2a7.6 7.6 0 1 0 4 11.4 6.2 6.2 0 0 1-4-11.4z' fill='%23FFCF6E'/%3E%3C/svg%3E") center/20px no-repeat}

/* the progress path (B5): one small mark per word, filled as the words are marked; no extra screens or taps.
   5 to 10 map footprints, teen case-file ticks, parent palette plain dots. aria-hidden: the "word 3 of 8" line says it. */
#app .pl-dots{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:2px 0 10px;padding:0}
#app .pl-dots li{width:10px;height:10px;border-radius:50%;border:2px solid color-mix(in srgb,var(--anp-ink) 45%,transparent);background:transparent}
#app .pl-dots li.on{background:var(--age-accent);border-color:var(--age-accent)}
#app .pl-dots li.now{background:var(--anp-lantern,#F2B544);border-color:#1F2E55}
:root[data-age="kids"] #app .pl-dots li{width:9px;height:13px;border-radius:50% 50% 45% 45%}
:root[data-age="kids"] #app .pl-dots li:nth-child(even){transform:translateY(3px) rotate(8deg)}
:root[data-age="kids"] #app .pl-dots li:nth-child(odd){transform:rotate(-8deg)}
:root[data-age="teen"] #app .pl-dots li{width:4px;height:14px;border-radius:2px}

/* ===================================================================================================================
   THE APP HOME (home.html), Part 9 B6
   =================================================================================================================== */
/* Littles: a sky header band with a still rainbow arc above the greeting, like Play Time (no picture is cropped:
   the arc is drawn, not a photo). Static, behind the words. */
:root[data-age="littles"]:not([data-theme="dark"]) #app:has(> .home-dash){position:relative}
:root[data-age="littles"]:not([data-theme="dark"]) #app:has(> .home-dash)::before{content:"";position:absolute;z-index:-1;left:50%;top:0;width:100vw;height:300px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(120% 150% at 50% 135%,transparent 54%,rgba(244,143,143,.40) 54.5% 57%,rgba(255,200,87,.45) 57.5% 60%,rgba(126,200,140,.40) 60.5% 63%,rgba(120,180,240,.40) 63.5% 66%,rgba(170,140,220,.32) 66.5% 69%,transparent 69.5%),linear-gradient(180deg,var(--age-bg-2) 0,var(--age-bg-2) 55%,var(--age-bg) 100%)}

/* the cards under the scene: the age's card, the age radius and the soft two-layer depth */
:root[data-age="littles"] .home-aside > section,:root[data-age="kids"] .home-aside > section,
:root[data-age="littles"] .home-aside .fcx-card,:root[data-age="kids"] .home-aside .fcx-card{border-radius:var(--age-radius);box-shadow:var(--age-shadow-card);border-color:transparent}
/* the progress card carries an accent stripe in the age colour */
:root[data-age="littles"] .home-aside > .home-progress,:root[data-age="kids"] .home-aside > .home-progress,:root[data-age="teen"] .home-aside > .home-progress{box-shadow:inset 0 4px 0 var(--age-accent),var(--age-shadow-card)}
:root[data-age="kids"] .home-aside h2,:root[data-age="littles"] .home-aside h2{color:var(--anp-ink)}
/* the Littles reader card and the 5 to 10 tiles: the age tint, not grey-beige */
:root[data-age="littles"]:not([data-theme="dark"]) .home-dash .kid-grid{background:var(--age-bg-3);border-radius:var(--age-radius)}
:root[data-age="littles"]:not([data-theme="dark"]) .home-dash .kid-grid .kid-card{border-radius:calc(var(--age-radius) - 6px)}
/* the nights chip reads as a soft pill in the age wash */
:root[data-age="littles"]:not([data-theme="dark"]) .home-top .nights-chip{background:var(--anp-card-warm)}
/* teen: navy cards on midnight with the inner light edge (B3) */
:root[data-anp-app][data-age="teen"][data-theme="dark"] .home-aside > section,:root[data-anp-app][data-age="teen"][data-theme="dark"] .home-aside .fcx-card{border-radius:14px;border-color:rgba(255,248,236,.08)}
:root[data-anp-app][data-age="teen"][data-theme="dark"] .home-aside > section:not(.home-progress),:root[data-anp-app][data-age="teen"][data-theme="dark"] .home-aside .fcx-card{box-shadow:var(--age-shadow-card)}

/* night look (every teen, and anyone whose device is dark): the home's lower links kept day colours (gold-brown and
   navy on night navy, 1.2 to 2.4:1). They take the approved night pairs. */
@media screen and (prefers-color-scheme: dark){
  :root[data-anp-app]:not([data-theme="light"]) #app .home-dash a.home-tile,:root[data-anp-app]:not([data-theme="light"]) #app .home-dash .home-links a,:root[data-anp-app]:not([data-theme="light"]) #app .home-dash .grown-btn{color:var(--anp-on-night,#FFF8EC)!important}
  :root[data-anp-app]:not([data-theme="light"]) #app .home-dash .home-privacy,:root[data-anp-app]:not([data-theme="light"]) #app .home-dash .home-privacy *{color:var(--anp-on-night-muted,#D9D2C4)!important}
}
:root[data-anp-app][data-theme="dark"] #app .home-dash a.home-tile,:root[data-anp-app][data-theme="dark"] #app .home-dash .home-links a,:root[data-anp-app][data-theme="dark"] #app .home-dash .grown-btn{color:var(--anp-on-night,#FFF8EC)!important}
:root[data-anp-app][data-theme="dark"] #app .home-dash .home-privacy,:root[data-anp-app][data-theme="dark"] #app .home-dash .home-privacy *{color:var(--anp-on-night-muted,#D9D2C4)!important}

/* ===================================================================================================================
   STAGE 2: EVERY APP SCREEN (Part 9 B6). Same rule: tokens per age, nothing moves, pictures whole.
   =================================================================================================================== */
/* settings (already four groups with line icons): the age's card, radius and depth; toggles, ticks and sliders in the
   age accent (light ages); night keeps its own measured pairs */
:root[data-age="littles"] .set-lamp .set-group,:root[data-age="kids"] .set-lamp .set-group{background:var(--anp-card-warm);border-color:transparent;border-radius:var(--age-radius);box-shadow:var(--age-shadow-card)}
:root[data-age="littles"] .set-lamp .set-group-h h2,:root[data-age="kids"] .set-lamp .set-group-h h2{color:var(--anp-ink)}
:root[data-age] .set-lamp input[type=checkbox],:root[data-age] .set-lamp input[type=radio],:root[data-age] .set-lamp input[type=range]{accent-color:var(--age-accent)}
:root[data-age="littles"] .set-lamp .set-index,:root[data-age="kids"] .set-lamp .set-index{background:var(--anp-paper-lamp)}

/* the weekly report: big number cards carry an accent stripe in the age colour; the "more" tray on the age band.
   Print stays black on white (screen only). */
@media screen{
  :root[data-age="littles"] .rp-lamp .rp-card,:root[data-age="kids"] .rp-lamp .rp-card,:root[data-age="teen"] .rp-lamp .rp-card,
  :root[data-age="littles"] .rp-lamp .fcx-card,:root[data-age="kids"] .rp-lamp .fcx-card,:root[data-age="teen"] .rp-lamp .fcx-card{box-shadow:inset 0 4px 0 var(--age-accent),var(--age-shadow-card);border-radius:var(--age-radius)}
  :root[data-age="littles"]:not([data-theme="dark"]) .rp-lamp .rp-more,:root[data-age="kids"]:not([data-theme="dark"]) .rp-lamp .rp-more{background:var(--age-bg-2)}
  :root[data-age="littles"] .rp-lamp .rp-hero,:root[data-age="kids"] .rp-lamp .rp-hero{border-radius:var(--age-radius);box-shadow:var(--age-shadow-card)}
}

/* Our Adventures: the shelf sits on the age band (Littles sky, 5 to 10 map parchment, teen midnight) */
:root[data-age="littles"]:not([data-theme="dark"]) .adv-wall:not(.adv-wall--teen){--adv-wall:var(--age-bg-2);background:var(--age-bg-2)}
:root[data-age="kids"]:not([data-theme="dark"]) .adv-wall--kids,:root[data-age="kids"]:not([data-theme="dark"]) .adv-wall:not(.adv-wall--teen):not(.adv-wall--littles){background:linear-gradient(180deg,color-mix(in srgb,var(--kid-accent,#F2B544) 18%,var(--age-bg-2)),var(--age-bg-2) 70%)}
:root[data-age="teen"] .adv-wall--teen{background:#131C34 linear-gradient(180deg,#1F2E55,#131C34);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 40px rgba(0,0,0,.35)}

/* the child picker (which-reader.html): round reader faces, names 18px, on the parent palette */
:root[data-age] .chips .chip .face{border-radius:50%}:root[data-age] .chips .chip .nm{font-size:18px}

/* session start and end screens: the age's card radius and depth on the night start card (the world band is the
   world's own art); the reading surface (.stim, .story) is never touched here */
:root[data-age="littles"] body.anp-lesson .eon,:root[data-age="kids"] body.anp-lesson .eon{border-radius:var(--age-radius)}
/* night look: the story preview's "Already have an account? Sign in" kept navy link ink on midnight (1.3:1) */
@media screen and (prefers-color-scheme: dark){:root[data-anp-app]:not([data-theme="light"]) body.anp-lesson #app > p.subnote > a:not([class*="btn"]){color:var(--anp-on-night,#FFF8EC)!important}}
:root[data-anp-app][data-theme="dark"] body.anp-lesson #app > p.subnote > a:not([class*="btn"]){color:var(--anp-on-night,#FFF8EC)!important}
@media screen and (prefers-color-scheme: dark){:root[data-anp-app]:not([data-theme="light"]) .anp-fnbar a.anp-fn-signin{color:var(--anp-on-night,#FFF8EC)!important}}
:root[data-anp-app][data-theme="dark"] .anp-fnbar a.anp-fn-signin{color:var(--anp-on-night,#FFF8EC)!important}

/* ===================================================================================================================
   LOOK FIXES from the Oct 19 real-nights bug hunt (items 8, 9, 10 and the teen sound gym note)
   =================================================================================================================== */
/* 8: "New on your map tonight: k." / "One more stone on your map." sat cream on the light card (1.05:1). It now sits
   on its own small paper plate in night ink, so it reads on any card, day or night (12.9:1) */
html body.anp-lesson .wm-cap{display:block;width:fit-content;max-width:min(34ch,100%);padding:6px 14px;border-radius:999px;background:#FFF8EC!important;color:#1F2E55!important;box-shadow:0 1px 2px rgba(19,28,52,.10)}
/* 9: the keyboard hint on the night (teen) look: the approved night muted (#D9D2C4, 7 to 10:1), not day grey 2.5:1 */
@media screen and (prefers-color-scheme: dark){:root[data-anp-app]:not([data-theme="light"]) #app .anp-keyhint{color:var(--anp-on-night-muted,#D9D2C4)!important}}
:root[data-anp-app][data-theme="dark"] #app .anp-keyhint{color:var(--anp-on-night-muted,#D9D2C4)!important}
/* the sound gym card is a light mint card on every look: its words stay night ink (12.9:1), never cream on mint */
#app .card.anp-apa > p,#app .card.anp-apa .subnote,#app .card.anp-apa .subnote a,#app .card.anp-apa > div:not(.k){color:#13294B!important}
/* 10: a long ghost button never spills its second line onto the link under it; buttons scroll clear of the top bar */
#app .card.anp-apa > a.btn{height:auto!important;min-height:52px;white-space:normal;padding-top:12px;padding-bottom:12px;line-height:1.3;margin-bottom:10px}
#app .card.anp-apa > .subnote{position:relative;z-index:0;margin-top:6px}
#app a.btn,#app button.btn,#app .btn-gold{scroll-margin-top:96px}