/* How is my child reading? A calm, parent-led check. No timer, no numbers. */
.note-line{display:inline-block;margin:0;padding:10px 16px;border-radius:12px;background:var(--white);border:1px solid var(--line);font-size:16px;color:var(--ink2);max-width:34em}
.cprog{list-style:none;display:flex;flex-wrap:wrap;gap:8px 28px;margin:0 0 34px;padding:0 0 12px;border-bottom:1px solid var(--line);font:500 17px/1.2 var(--display);color:var(--ink2)}
.cprog li[aria-current="step"]{color:var(--pine);box-shadow:inset 0 -3px 0 var(--butter);padding-bottom:12px;margin-bottom:-13px}
.tips{margin:8px 0 0;padding-left:1.2em}.tips li{margin:8px 0;max-width:30em}
.tick{display:flex;align-items:flex-start;gap:12px;font:400 17px/1.45 var(--body);cursor:pointer}
.tick input{width:24px;height:24px;margin:2px 0 0;flex:none;accent-color:var(--pine)}
.partline{margin:0 0 6px;font:700 15px/1.3 var(--body);color:var(--fjord)}
.cpart h2{font-size:clamp(28px,3.6vw,44px);margin-bottom:12px}
.ptip{margin:0 0 22px;padding:14px 18px;border-radius:14px;background:var(--mist);border:1px solid var(--line);max-width:46em}
.ptip b{display:block;margin-bottom:2px}
.ptip p{margin:0;font-size:16.5px}
/* the page the child reads */
.cpage{margin:0 0 26px;padding:clamp(20px,4vw,44px);background:#fffdf8;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);text-align:center}
.big{display:grid;gap:clamp(10px,2vw,22px)}
.big.l6{grid-template-columns:repeat(6,minmax(0,1fr))}
.big.l4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:640px){.big.l6{grid-template-columns:repeat(3,minmax(0,1fr))}.big.l4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.big span{display:block;padding:.1em .05em;border-radius:16px;background:var(--snow);border:1px solid var(--line);font:500 clamp(56px,11vw,112px)/1.2 var(--body);color:var(--pine)}
.big.words span{font-size:clamp(40px,7.4vw,84px)}
.sent{margin:0 auto;max-width:18em;font:500 clamp(30px,5vw,56px)/1.35 var(--body);color:var(--pine)}
.pass{margin:22px auto 0;max-width:24em;font:400 clamp(24px,3.6vw,38px)/1.6 var(--body);color:var(--pine);padding-top:22px;border-top:1px solid var(--line)}
.cpage .tag{margin:0 0 10px;font:700 14px/1.2 var(--body);color:var(--fjord)}
/* the parent marks */
.mark{margin:0 0 22px}
.mark h3{font-size:clamp(20px,2.2vw,25px);margin-bottom:10px}
.mrow{border:0;margin:0;padding:12px 0;border-top:1px solid var(--line);min-width:0}.mg{display:grid;grid-template-columns:minmax(90px,220px) 1fr;gap:10px 18px;align-items:center}.mrow .lab{font:500 24px/1.2 var(--body)}
.mrow:last-of-type{border-bottom:1px solid var(--line)}
.mrow .opts3{display:flex;flex-wrap:wrap;gap:8px}
.mrow label{position:relative;cursor:pointer}
.mrow input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.mrow label span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid #8a9a92;background:#fff;font:700 16px/1 var(--body);color:var(--pine)}
.mrow input:checked+span{background:var(--pine);border-color:var(--pine);color:var(--snow)}
.mrow input:focus-visible+span{outline:3px solid var(--fjord);outline-offset:2px}
@media (max-width:520px){.mg{grid-template-columns:1fr}.mrow .opts3 label{flex:1 1 0}.mrow .opts3 label span{width:100%;padding:0 6px;font-size:15px}}
.cnav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:12px}
.btn.link{background:none;border:0;box-shadow:none;min-height:44px;padding:0 6px;color:var(--ink2);text-decoration:underline;text-underline-offset:4px;font:700 16px/1 var(--body);cursor:pointer}
.cmsg{margin:0 0 12px;padding:12px 16px;border-radius:12px;background:#fff6e6;border:1.5px solid var(--clay2);font-weight:700;max-width:44em}
.cmsg[hidden]{display:none}
/* the child's games */
.cpage.child{padding:clamp(22px,4vw,48px)}
.ask{margin:0 0 20px;font:500 clamp(26px,4vw,44px)/1.25 var(--display);color:var(--pine)}
.tiles{display:grid;gap:clamp(10px,2vw,22px);justify-content:center}
.tiles.t4{grid-template-columns:repeat(4,minmax(0,1fr))}.tiles.t3{grid-template-columns:repeat(3,minmax(0,1fr))}.tiles.t2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px;margin-inline:auto}
@media (max-width:480px){.tiles.t4{grid-template-columns:repeat(2,minmax(0,1fr))}.tiles.t3{grid-template-columns:1fr}.tiles.t2{grid-template-columns:1fr}}
.tile{min-height:88px;padding:6px;border-radius:20px;border:2px solid #8a9a92;background:var(--snow);color:var(--pine);font:500 clamp(60px,12vw,120px)/1.15 var(--body);cursor:pointer;transition:transform .2s var(--ease),border-color .2s}
.tile:hover:not([disabled]){transform:translateY(-3px);border-color:var(--pine)}
.tile:focus-visible{outline:3px solid var(--fjord);outline-offset:3px}
.tile[disabled]{cursor:default;opacity:.75}
.tile.sel{opacity:1;border-color:var(--pine);background:var(--birch);box-shadow:inset 0 0 0 2px var(--pine)}
.tiles.words .tile{font-size:clamp(36px,7vw,72px)}
.tile.pic{padding:6px;font-size:0;line-height:0}.tile.pic svg{display:block;width:100%;height:auto;border-radius:14px}
.hear{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 28px;border-radius:999px;border:2px solid var(--pine);background:var(--white);color:var(--pine);font:700 20px/1 var(--body);cursor:pointer}
.hear:hover{background:var(--birch)}.hear:focus-visible{outline:3px solid var(--fjord);outline-offset:3px}
.hearnote{min-height:1.2em;margin:6px 0 18px}
.thanks{min-height:1.5em;margin:20px 0 0;font:500 24px/1.3 var(--display);color:var(--fjord)}
.cpage.child .sent{margin:0 0 22px}
.games{list-style:none;margin:0;padding:0;display:grid;gap:14px;text-align:left;counter-reset:g;max-width:520px;margin-inline:auto}
.games li{counter-increment:g;display:grid;grid-template-columns:48px 1fr;gap:0 14px;align-items:center}
.games li::before{content:counter(g);grid-row:span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--butter);font:600 24px/1 var(--display)}
.games b{font:500 24px/1.2 var(--display)}.games span{font-size:17px;color:var(--ink2)}
.noticed{border:0;margin:0 0 20px;padding:0;display:grid;gap:12px}
.noticed .tick{padding:10px 14px;border:1.5px solid var(--line);border-radius:14px;background:#fffdf8}
.noticed .other{margin-top:8px;max-width:560px}.noticed .other input{width:100%;min-height:50px;padding:10px 14px;font:400 17px/1.4 var(--body);border:1.5px solid #8a9a92;border-radius:12px}

/* the Phonido Reading Snapshot: a keepsake, A4 */
.snap{max-width:820px;margin:0 auto}
.snap-frame{position:relative;background:#fffdf8;border:1px solid var(--line);border-radius:6px;padding:clamp(18px,3.5vw,40px);box-shadow:var(--shadow);outline:2px solid var(--butter);outline-offset:-12px;color:var(--pine)}
.snap-head{text-align:center;padding:8px 0 18px;border-bottom:1px solid var(--line)}
.snap-star svg{width:30px;height:30px;display:inline-block;filter:drop-shadow(0 0 6px rgba(231,196,120,.7))}
.snap-kick{margin:6px 0 4px;font:700 13.5px/1.3 var(--body);letter-spacing:.06em;color:var(--fjord)}
.snap h2{font-size:clamp(28px,4.4vw,44px);margin:0 0 4px;line-height:1.1}
.snap-for{margin:6px 0 0;font-size:15px;color:var(--ink2)}
.snap-name{margin:0;font:600 clamp(40px,7vw,68px)/1.1 var(--display);color:var(--clay2)}
.snap-meta{margin:6px 0 0;font-size:15.5px;color:var(--ink2)}
.snap-sec{padding:18px 0 4px}
.snap-sec h3{font-size:clamp(20px,2.4vw,26px);margin:0 0 8px;color:var(--pine)}
.snap-sec p,.snap-sec li{font-size:17px;line-height:1.55}
.snap-sec ul{margin:6px 0 0;padding-left:1.25em}.snap-sec li{margin:5px 0}
.strengths li::marker{color:var(--clay)}
.bars{margin-top:6px}
.bars-head,.bar{display:grid;grid-template-columns:minmax(100px,150px) 1fr minmax(100px,130px);gap:12px;align-items:center}
.bars-head{font-size:13px;color:var(--ink2);font-weight:700;margin-bottom:4px}
.bars-head .bh{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}.bars-head i{font-style:normal}
.bar{padding:7px 0;border-top:1px solid var(--line)}
.bl{font:500 19px/1.2 var(--display)}
.track{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;height:20px}
.track i{border-radius:10px;border:1.5px solid #9aa89f;background:transparent}
.track i.on{background:var(--fjord);border-color:var(--fjord)}
.bw{font:700 15px/1.2 var(--body);color:var(--pine)}
@media (max-width:560px){.bars-head{display:none}.bar{grid-template-columns:1fr 1fr}.bar .track{grid-column:1/-1;order:3}.bw{text-align:right}}
.stonepath{list-style:none;margin:6px 0 0;padding:34px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;position:relative;counter-reset:none}
.stonepath::before{content:"";position:absolute;left:10%;right:10%;top:calc(34px + 21px);border-top:2px dotted #a9b2a4}
.stonepath li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;font-size:14.5px;margin:0}
.stonepath b{display:grid;place-items:center;width:52px;height:42px;border-radius:50% 50% 46% 46%/62% 62% 38% 38%;background:#fffdf8;border:1.5px solid var(--line);box-shadow:0 4px 0 var(--line);font:500 20px/1 var(--display);position:relative;z-index:1}
.stonepath li.past b{background:var(--butter);border-color:#d8b35e}
.stonepath li.here b{background:var(--pine);color:var(--snow);border-color:var(--pine)}
.stonepath li>span:not(.pin){margin-top:8px;font-weight:700;line-height:1.2}
.stonepath em{font-style:normal;font-size:13.5px;margin-top:2px;color:var(--clay2);font-weight:700}
.stonepath .pin{position:absolute;top:-34px;left:50%;transform:translateX(-50%);width:28px;height:28px}
.stonepath .pin svg{width:100%;height:100%;filter:drop-shadow(0 0 5px rgba(231,196,120,.8))}
.pathline{margin:12px 0 0;font:500 20px/1.3 var(--display);text-align:center}
.snap-sec.notice{margin-top:12px;padding:16px 20px 12px;border-radius:14px;background:#f6f1e6;border:1px solid var(--line)}
.snap-sec .support{font:500 19px/1.45 var(--display)}
.snap-sec .links{margin:8px 0}.snap-sec .quiet,.quiet{font-size:15.5px;color:var(--ink2)}
.snap-foot{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);text-align:center}
.snap-foot p{margin:0 0 4px;font-size:14px;color:var(--ink2)}.snap-foot .addr{font-size:13.5px}
.sendline{margin:16px auto 0;max-width:820px;font-size:16px;color:var(--ink2);text-align:center}
#s3 .acts{justify-content:center;margin-top:20px}
.printonly{display:none}
@media print{
 @page{size:A4;margin:7mm}
 html,body{background:#fff!important}
 body>*:not(main),main>*:not(#check){display:none!important}
 .skip,.noprint,.cprog,.cstep:not(#s3),#check noscript{display:none!important}
 .sec{padding:0!important;background:#fff!important}.wrap{padding:0!important;max-width:none!important}
 #s3{display:block!important}
 .snap{max-width:none}
 .snap-frame{box-shadow:none;border-radius:0;padding:8mm 9mm;outline-offset:-5px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .snap-sec{padding:5px 0 1px}.snap-sec p,.snap-sec li{font-size:9.5pt;line-height:1.32;max-width:none}.snap-sec li{margin:2px 0}.snap-sec h3{font-size:12pt;margin-bottom:3px}.snap-sec .support{font-size:10.5pt}.snap-sec .quiet,.quiet{font-size:9pt}
 .snap h2{font-size:21pt}.snap-name{font-size:28pt}.snap-head{padding:0 0 5px}.snap-meta,.snap-for{font-size:9.5pt}.snap-foot{margin-top:8px;padding-top:6px}.snap-foot p{font-size:8.5pt}.snap-frame{padding:6mm 8mm}
 .bar{padding:2px 0}.bl{font-size:10pt}.bw{font-size:9pt}.track{height:11px}.bars-head{font-size:8pt}
 .stonepath{padding-top:22px}.stonepath b{width:34px;height:28px;font-size:12pt}.stonepath::before{top:calc(22px + 14px)}.pathline{font-size:10.5pt;margin-top:5px}
 .stonepath li{font-size:8.5pt}.stonepath em{font-size:8pt}.pin{width:18px!important;height:18px!important;top:-22px!important}
 .track i.on,.stonepath li.past b,.stonepath li.here b{-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .printonly{display:block!important}
 .snap-sec.notice{padding:5px 10px 3px;margin-top:4px}.notice ul{columns:2;column-gap:18px}.notice li{break-inside:avoid}.notice p,.notice li{font-size:9pt!important;line-height:1.28!important}.notice .support{font-size:10pt!important}.notice h3{font-size:11pt!important;margin-bottom:2px!important}.snap-frame{outline-width:1px}
}
.snap-head p,.snap-foot p,.pathline{margin-inline:auto;max-width:none}
.snap-head p{margin-top:0}.snap-head .snap-for{margin-top:6px}
.snap h2:focus{outline:0}.snap h2:focus-visible{outline:0}
@media print{
 .snap-star svg{width:20px;height:20px}.snap h2{font-size:19pt}.snap-name{font-size:24pt}.snap-kick{margin:2px 0;font-size:9pt}
 .snap-sec{padding:3px 0 0}.snap-frame{padding:4mm 8mm}.bar{padding:1px 0}.stonepath{padding-top:18px}.stonepath::before{top:calc(18px + 14px)}.pin{top:-18px!important}
 .snap-sec li{margin:1px 0}.snap-sec h3{margin-bottom:2px}.snap-foot{margin-top:5px;padding-top:4px}
}
@media print{.snap-sec p{margin:0 0 .3em}.snap-sec ul{margin:2px 0 0}.snap-foot .addr{margin:0}.pathline{margin-top:2px}.stonepath li>span:not(.pin){margin-top:4px}}