/* Lani English · Joyful Learning Journey · 2026-10-30
 * Presentation only: learner state, permissions, lessons and Firestore remain in existing modules.
 * Fonts use swap and Unicode-capable system fallbacks; never rely on emoji for essential information.
 */
:root{--joy-ink:#143b71;--joy-blue:#126bc8;--joy-border:#deebf7;--joy-soft:#f3faff}
body{font-family:"Nunito",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
.ipa,[lang="en"][data-ipa],.phonetic{font-family:"Noto Sans",ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif}
.ref-dashboard h1,.ref-dashboard h2,.ref-dashboard h3,.ml26-header h1,.ml26-garden h2{
 font-family:"Baloo 2","Nunito",ui-sans-serif,system-ui,sans-serif;line-height:1.19;
}
.layout-reference .sidebar .logo{flex-direction:row}
.layout-reference .logo,.layout-reference .nav-item,.ref-dashboard,.ml26{font-family:"Nunito",ui-sans-serif,system-ui,sans-serif}
.layout-reference .nav-item:focus-visible,.ref-dashboard a:focus-visible,.ml26 a:focus-visible{outline:3px solid #f5ad30;outline-offset:3px}
.ref-dashboard .ref-sky-copy{padding-top:82px}
.ref-dashboard .ref-sky-copy .joy-greeting{font-weight:850}
.ref-dashboard .ref-sky-copy .joy-greeting-vi{margin:6px auto 0;color:#13549d;font-size:clamp(.89rem,1.35vw,1.08rem);font-weight:800}
.ref-dashboard .ref-bird-hero{animation:joy-cloud-float 5s ease-in-out infinite}
.ref-dashboard .ref-sky:after{content:"";position:absolute;bottom:0;left:0;right:0;height:45px;pointer-events:none;
 background:linear-gradient(to top,#ccefc6aa,transparent)}
@keyframes joy-cloud-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ref-dashboard .ref-body{padding-bottom:34px}
.ref-dashboard .joy-today{
 position:relative;z-index:5;margin:-51px 1px 0;display:flex;flex-wrap:wrap;align-items:center;gap:18px;
 background:#fff;border:1px solid #e3effb;border-radius:25px;padding:19px 24px;
 box-shadow:0 12px 30px #1f6fae21
}
.ref-dashboard .joy-ring{width:88px;height:88px;flex:0 0 88px;position:relative}
.ref-dashboard .joy-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.ref-dashboard .joy-ring-label{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;line-height:1.04}
.ref-dashboard .joy-ring-label strong{font:800 1.7rem/1.05 "Baloo 2","Nunito",sans-serif;color:#133e74}
.ref-dashboard .joy-ring-label small{font-size:.73rem;color:#4f7491;font-weight:800}
.ref-dashboard .joy-today-copy{flex:1 1 280px;min-width:0}
.ref-dashboard .joy-eyebrow{display:inline-flex;background:#ffead5;color:#8c4a15;border-radius:99px;padding:4px 11px;font-size:.72rem;font-weight:900;letter-spacing:.04em}
.ref-dashboard .joy-today h2{font-size:clamp(1.15rem,2vw,1.48rem);color:#173c70;margin:7px 0 3px}
.ref-dashboard .joy-today p{margin:0;color:#52728c;font-size:.92rem;font-weight:700}
.ref-dashboard .joy-today-cta{min-height:49px;border-radius:999px;padding:11px 23px;background:#126bc8;color:#fff;display:inline-flex;gap:10px;align-items:center;justify-content:center;font-weight:850;box-shadow:0 4px 0 #0a5097;white-space:nowrap}
.ref-dashboard .joy-today-cta:hover{color:#fff;background:#0d59ab;transform:translateY(-1px)}
.ref-dashboard .joy-garden{margin:19px 0 0;background:#fff;border:1px solid #e3edf8;border-radius:26px;padding:22px;
 display:grid;grid-template-columns:minmax(205px,290px) minmax(0,1fr);gap:25px;box-shadow:0 7px 24px #1c629b10}
.ref-dashboard .joy-garden-art{position:relative;min-height:274px;border-radius:20px;overflow:hidden;
 background:linear-gradient(180deg,#d5efff 0%,#e2f6ed 70%,#eaf4dc 100%);display:flex;align-items:flex-end;justify-content:center}
.ref-dashboard .joy-garden-art .ef-sunflower-art{width:100%;max-width:292px;height:auto;filter:drop-shadow(0 7px 4px #5f8e7133)}
.ref-dashboard .joy-watering-can{position:absolute;width:110px;height:120px;object-fit:contain;right:0;bottom:1px;pointer-events:none}
.ref-dashboard .joy-garden-copy{min-width:0;display:flex;flex-direction:column;gap:9px}
.ref-dashboard .joy-garden-kicker{color:#317c4a;font-size:.74rem;font-weight:900;letter-spacing:.12em}
.ref-dashboard .joy-garden h2{font-size:clamp(1.45rem,2.3vw,1.86rem);color:#15376a;margin:0;line-height:1.2}
.ref-dashboard .joy-garden-message{background:#fff6cf;color:#745013;font-size:.89rem;font-weight:780;border-radius:15px;padding:10px 13px;margin:0;width:fit-content}
.ref-dashboard .joy-waterline{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.ref-dashboard .joy-waterline strong{font:800 1.45rem/1.1 "Baloo 2","Nunito",sans-serif;color:#10396d}
.ref-dashboard .joy-stage-pill{display:inline-flex;background:#eefbf1;border:1px solid #c9e8ce;border-radius:99px;color:#39784f;font-weight:800;font-size:.83rem;padding:5px 11px}
.ref-dashboard .joy-waterline small{font-weight:700;font-size:.81rem;color:#597891}
.ref-dashboard .joy-garden-meter{height:12px;background:#e7eef6;border-radius:99px;overflow:hidden}
.ref-dashboard .joy-garden-meter span{height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#f6b821,#ffd455)}
.ref-dashboard .joy-milestones{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:2px 0 0;padding:0;text-align:center}
.ref-dashboard .joy-milestones li{display:grid;justify-items:center;gap:2px;color:#68829d;min-width:0}
.ref-dashboard .joy-milestones .joy-stage-icon{border-radius:50%;background:#eff3f7;border:2px solid #d4e2ec;width:45px;height:45px;display:grid;place-items:center;font-size:1.45rem;opacity:.65;filter:grayscale(1)}
.ref-dashboard .joy-milestones li.reached .joy-stage-icon{background:#fff5c9;border-color:#efbe3d;filter:none;opacity:1}
.ref-dashboard .joy-milestones li.current .joy-stage-icon{border-color:#2c91d7;box-shadow:0 0 0 3px #2a8de022}
.ref-dashboard .joy-milestones b{font-size:.75rem;line-height:1.15;color:#4c6a81}
.ref-dashboard .joy-milestones small{font-size:.67rem;color:#658198}
.ref-dashboard .joy-garden-foot{font-size:.8rem;color:#5b798f;margin:0;line-height:1.5}
.ref-dashboard .joy-garden-foot a{font-weight:850}
.ref-dashboard .joy-garden-details{font-size:.8rem;color:#4a7190}
.ref-dashboard .joy-garden-details summary{cursor:pointer;width:fit-content;font-weight:800}
.ref-dashboard .joy-garden-details p{margin:7px 0 0;font-size:.79rem}
.ref-dashboard .ref-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:18px}
.ref-dashboard .ref-stat{border:5px solid #fff;min-height:153px;padding:16px 13px;border-radius:19px;box-shadow:0 5px 20px #1b608e0d}
.ref-dashboard .ref-stat.joy-streak{background:#eaf6ff}
.ref-dashboard .ref-stat.joy-time{background:#f3f0ff}
.ref-dashboard .ref-stat.joy-progress{background:#eefaf1}
.ref-dashboard .ref-stat-icon{width:44px;height:44px;border-radius:13px;background:#fff;display:grid;place-items:center;flex-shrink:0;font-size:1.6rem}
.ref-dashboard .ref-stat strong{font:800 clamp(1.4rem,2.6vw,2.3rem)/1.15 "Baloo 2","Nunito",sans-serif}
.ref-dashboard .ref-stat h2{font-family:"Nunito",sans-serif;font-size:.94rem;margin:4px 0 8px}
.ref-dashboard .ref-stat small{margin-top:8px;font-size:.77rem}
.ref-dashboard .joy-drop-row{display:flex;gap:5px;margin:6px 0 0;flex-wrap:wrap;font-size:1.2rem}
.ref-dashboard .joy-drop-row .future{opacity:.25;filter:grayscale(1)}
.ref-dashboard .joy-progress-pips{display:flex;justify-content:space-between;gap:5px;margin:8px 0 0;color:#597b8b;font-size:.7rem;font-weight:700}
.ref-dashboard .ref-lesson.comm .ref-lesson-category,.ref-dashboard .ref-lesson.pron .ref-lesson-category{padding:3px 11px;border-radius:100px;font-size:.82rem;align-self:flex-start}
.ref-dashboard .ref-lesson.comm .ref-lesson-category{background:#d9ebfd;color:#1357a0}
.ref-dashboard .ref-lesson.pron .ref-lesson-category{background:#ffe8d7;color:#925019}
.ref-dashboard .ref-lesson .button{border-radius:999px;box-shadow:0 3px 0 #0a569e;font-weight:800}
.ref-dashboard .ref-lesson.pron .button{background:#c8551b;box-shadow:0 3px 0 #a44111}
.ref-dashboard .ref-skill-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.ref-dashboard .ref-skill{min-height:208px;gap:10px;border:0;border-radius:23px;padding:18px;box-shadow:0 7px 22px #2869a00d}
.ref-dashboard .ref-skill.joy-sound{background:#ffe8d9}
.ref-dashboard .ref-skill.joy-speak{background:#dceefb}
.ref-dashboard .ref-skill.joy-words{background:#fff1c9}
.ref-dashboard .ref-skill-symbol{position:static;flex:0 0 62px;width:62px;height:62px;background:#fff!important;font-size:1.95rem}
.ref-dashboard .ref-skill-copy{padding-left:0;display:grid;gap:4px;min-height:0}
.ref-dashboard .ref-skill-copy strong{font:800 1.4rem/1.15 "Baloo 2","Nunito",sans-serif}
.ref-dashboard .ref-skill-copy>span{font-size:.87rem;line-height:1.5;font-weight:600}
.ref-dashboard .ref-skill-cta{margin:auto 0 0;width:100%;border-radius:999px;background:#156abd;color:#fff;min-height:42px;font-weight:800}
.ref-dashboard .ref-skill.joy-sound .ref-skill-cta{background:#bd4e20}
.ref-dashboard .ref-skill.joy-words .ref-skill-cta{background:#825909}
.ref-dashboard .ref-skill:hover{transform:translateY(-2px)}
/* My Learning uses the same rounded, joyful typographic system without altering learning data. */
.ml26-header{border-radius:24px}
.ml26-header h1{font-size:clamp(2rem,3vw,2.55rem)}
.ml26-stats .ml26-stat,.ml26 .ml26-section,.ml26 .ml26-tool{border-radius:21px}
.ml26 .ml26-section-header h2,.ml26 .ml26-tools-title{font-family:"Baloo 2","Nunito",sans-serif;font-weight:800}
.ml26 .ml26-garden{border-radius:25px;box-shadow:0 8px 24px #988a3210}
.ml26 .ml26-garden h2{font-size:clamp(1.38rem,2.25vw,1.85rem)}
.ml26 .ml26-lesson:hover,.ml26 .ml26-tool:hover{transform:translateY(-2px)}
/* Small screens: keep a single clear action, generous line height and no clipped text. */
@media(max-width:1150px){.ref-dashboard .ref-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.ref-dashboard .ref-stat.joy-progress{grid-column:1/-1}.ref-dashboard .ref-skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.ref-dashboard .joy-garden{grid-template-columns:minmax(190px,.8fr) minmax(0,1.2fr);gap:16px}.ref-dashboard .joy-garden-art{min-height:250px}}
@media(max-width:760px){.ref-dashboard .ref-sky-copy{padding-top:64px}.ref-dashboard .ref-sky-copy .joy-greeting-vi{display:none}.ref-dashboard .joy-today{margin:-36px 0 0;padding:15px;gap:11px}.ref-dashboard .joy-today-cta{width:100%}.ref-dashboard .joy-garden{grid-template-columns:1fr}.ref-dashboard .joy-garden-art{min-height:205px;max-height:220px}.ref-dashboard .joy-garden-art .ef-sunflower-art{max-width:240px}.ref-dashboard .joy-watering-can{width:95px}.ref-dashboard .ref-skill-grid{grid-template-columns:1fr}.ref-dashboard .ref-skill{min-height:160px}}
@media(max-width:520px){.ref-dashboard .ref-stats{grid-template-columns:1fr;gap:8px}.ref-dashboard .ref-stat.joy-progress{grid-column:auto}.ref-dashboard .ref-stat{min-height:0;flex-direction:row;padding:12px}.ref-dashboard .ref-stat strong{font-size:1.72rem}.ref-dashboard .joy-ring{width:77px;height:77px;flex-basis:77px}.ref-dashboard .joy-today h2{font-size:1.23rem}.ref-dashboard .joy-garden{padding:15px}.ref-dashboard .joy-garden h2{font-size:1.46rem}.ref-dashboard .joy-milestones .joy-stage-icon{width:38px;height:38px;font-size:1.2rem}.ref-dashboard .joy-milestones b{font-size:.68rem}.ref-dashboard .joy-milestones small{font-size:.61rem}.ref-dashboard .ref-section-head{align-items:flex-start;flex-wrap:wrap}.ref-dashboard .ref-all-lessons{font-size:.79rem}.ref-dashboard .ref-skill-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ref-dashboard .ref-bird-hero{animation:none}.ref-dashboard .ref-skill:hover,.ml26 .ml26-lesson:hover,.ml26 .ml26-tool:hover{transform:none}}