/* Account pages: sign in, sign up, choose or add a child. Tokens come from ek.css. */
body:not(.ek-play){background:radial-gradient(circle at 10% 0%,#FFF1C7 0,transparent 34%),radial-gradient(circle at 100% 18%,#E3F2FF 0,transparent 32%),radial-gradient(circle at 0% 100%,#FFE5EC 0,transparent 30%),var(--ground);min-height:100%}
.site{max-width:560px;margin:0 auto;padding-inline:max(16px,4vw);padding-block:calc(env(safe-area-inset-top,0px) + 18px) 48px;display:flex;flex-direction:column;gap:18px}
.site-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.site-brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;line-height:1.05}
.site-brand .chiku{width:44px}
.site-brand b{display:block;font:700 1.45rem/1 var(--display)}
.site-brand span{font-size:.88rem;font-weight:600;color:var(--ink-2)}
.site-hello{display:flex;align-items:flex-end;gap:12px;margin-top:6px}
.site-hello .bird{flex:0 0 auto;width:clamp(76px,20vw,112px)}
.site-hello .bubble{flex:1;min-width:0;background:var(--paper);border-radius:26px;border-bottom-left-radius:8px;padding:14px 18px;box-shadow:var(--sh);margin-bottom:14px}
.kid-hello{align-items:center;margin-top:0}
.kid-hello .bird{width:clamp(48px,12vw,64px)}
.kid-hello .bubble{padding:8px 14px;margin-bottom:0;border-bottom-left-radius:26px}
.site .kid-hello h1{font-size:clamp(1.15rem,5.2vw,1.6rem)}
.site h1{margin:0;font:700 clamp(1.8rem,6.4vw,2.6rem)/1.05 var(--display);color:var(--ink);text-wrap:balance}
.site .lead{margin:4px 0 0;font-size:1.05rem;font-weight:600;color:var(--ink-2)}
/* Sign-in, sign-up and password pages: one Chiku, a title, the form, one other way on */
.site-auth{max-width:440px;padding-top:calc(env(safe-area-inset-top,0px) + 32px);gap:16px}
.auth-hero{display:flex;flex-direction:column;align-items:center;text-align:center}
.auth-bird{display:block;width:clamp(84px,24vw,104px)}
.auth-brand{margin:4px 0 14px;font:700 1.5rem/1 var(--display);letter-spacing:.01em;color:var(--coral-2)}
.auth-brand b{font-weight:700}
.site-auth h1{font-size:clamp(1.8rem,7vw,2.3rem)}
.auth-sub{margin:6px 0 0;font-weight:600;color:var(--ink-2);line-height:1.35;max-width:32ch}
.field-link{align-self:flex-end;margin-top:-8px;padding:2px 0;font-weight:700;font-size:.95rem;color:var(--coral-2);text-decoration:none}
.field-link:hover{text-decoration:underline}
.btn.wide{width:100%;text-decoration:none}
.alt.quiet{font-size:.92rem}
.alt.quiet a{color:var(--ink-2)}
.panel-card{background:var(--paper);border-radius:30px;box-shadow:var(--sh-lift);padding:20px;display:flex;flex-direction:column;gap:14px}
.panel-card .btn{width:100%}
.errors{margin:0;padding:12px 16px;background:var(--oops);border-radius:18px;font-weight:600;color:#8A3340}
.errors ul{margin:4px 0 0;padding-left:20px}
.flash{margin:0;padding:12px 16px;border-radius:18px;font-weight:700;background:var(--hl);box-shadow:var(--sh-sm)}
.flash-alert{background:var(--oops);color:#8A3340}
.alt{margin:0;text-align:center;font-weight:600;color:var(--ink-2)}
.alt a,.link-btn{color:var(--coral-2);font-weight:700;text-decoration:none}
.alt a:hover,.link-btn:hover{text-decoration:underline}
.link-btn{background:var(--paper);border:0;padding:8px 16px;border-radius:999px;cursor:pointer;font-size:.95rem;box-shadow:var(--sh-sm)}
.kids{display:flex;flex-direction:column;gap:14px}
.kid{display:flex;align-items:center;gap:14px;background:var(--paper);border-radius:999px;box-shadow:var(--sh);padding:10px 22px 10px 10px;color:var(--ink);text-decoration:none;transition:transform .15s}
.kid:active{transform:scale(.97)}
.kid .face{flex:0 0 auto;width:62px;height:62px;border-radius:50%;background:linear-gradient(180deg,#FFF1C7,#FFE08A);display:grid;place-items:center;font-size:32px}
.kid .who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.kid strong{font:700 1.45rem/1.1 var(--display)}
.kid small{font-size:.95rem;font-weight:600;color:var(--sun-2)}
.kid .go{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#FF9DB6,var(--coral-2))}
.kid-row{display:flex;align-items:center;gap:12px}
.kid-row .kid{flex:1}
.kid-edit{font-weight:700;color:var(--ink-2);text-decoration:none;padding:8px}

/* Subject page: one big soft card per subject for her grade */
.empty-grade p{margin:0;font-size:1.05rem;line-height:1.45}
.empty-grade .btn{margin-top:4px}

/* Class picker on the child form */
.grades{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.grades legend{font-weight:700;margin-bottom:6px;padding:0}
.grades legend small{font-weight:600;color:var(--ink-2)}
.grade{position:relative;cursor:pointer}
.grade input{position:absolute;opacity:0;pointer-events:none}
.grade span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:78px;padding:6px 4px;border-radius:18px;background:var(--ground);border:2px solid transparent;text-align:center;line-height:1.1;transition:background .15s,border-color .15s}
.grade strong{font:600 1.05rem/1.1 var(--display)}
.grade small{font-size:.8rem;color:var(--ink-2)}
.grade em{font:600 .7rem/1 var(--display);font-style:normal;margin-top:4px;padding:3px 8px;border-radius:999px;background:#DDF5E8;color:var(--grass-2)}
.grade em.none{background:rgba(63,58,90,.08);color:var(--ink-3)}
.grade input:checked + span{background:var(--hl);border-color:var(--sun)}
.grade input:focus-visible + span{outline:3px solid var(--berry);outline-offset:2px}

.dev-course{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}

/* "Install the app" card (shared/_install.html.erb) */
.install{position:relative;display:flex;align-items:center;gap:12px;background:var(--paper);border-radius:26px;box-shadow:var(--sh);padding:12px 34px 12px 12px}
.install-icon{flex:0 0 auto;width:56px;height:56px;border-radius:14px;box-shadow:var(--sh-sm)}
.install-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.25;font-size:.92rem;font-weight:600;color:var(--ink-2)}
.install-text strong{font:700 1.12rem/1.15 var(--display);color:var(--ink)}
.install-text .hi{display:block}
.install-ios{margin:4px 0 0;color:var(--ink)}
.install-ios .share{width:1.15em;height:1.15em;vertical-align:-.2em;color:#2F7BF6}
.install-btn{flex:0 0 auto;min-height:46px;padding:6px 18px;font-size:1.05rem}
.install-close{position:absolute;top:4px;right:6px;border:0;background:none;padding:4px 8px;font-size:22px;line-height:1;color:var(--ink-3);cursor:pointer}

/* ---- Today's walk (children/show) ---- */
.kid-face{display:inline-block;margin-right:6px;font-size:.9em}
.today{display:flex;flex-direction:column;align-items:center;gap:14px;background:var(--paper);border-radius:30px;box-shadow:var(--sh-lift);padding:18px 16px 14px;margin-bottom:22px}
.stones{display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,18px)}
.stone{position:relative;width:clamp(52px,15vw,68px);height:clamp(52px,15vw,68px);border-radius:50%;display:grid;place-items:center;font-size:clamp(24px,7vw,32px);background:#F2EEF9;box-shadow:inset 0 -4px 0 rgba(63,58,90,.08);opacity:.75}
.stone .read{font:700 1em/1 "Baloo 2",system-ui,sans-serif;color:var(--coral-2)}
.stone.on{background:linear-gradient(180deg,#B7F0CF,var(--grass));opacity:1}
.stone.on::after{content:"✓";position:absolute;right:-4px;bottom:-4px;width:24px;height:24px;border-radius:50%;background:var(--grass-2);color:#fff;font:700 14px/24px var(--display);text-align:center;box-shadow:0 0 0 3px var(--paper)}
.stone.next{opacity:1;background:linear-gradient(180deg,#FFF1C7,var(--sun));box-shadow:0 0 0 4px rgba(255,201,77,.45);animation:stonebob 1.6s ease-in-out infinite}
/* on her page the subject stones are links: pictures she taps to pick a subject */
.stones.pick{gap:clamp(10px,4vw,22px);padding-bottom:18px}
.stones.pick .stone{width:clamp(62px,18vw,80px);height:clamp(62px,18vw,80px);font-size:clamp(28px,8vw,38px);opacity:1;text-decoration:none;color:var(--ink);transition:transform .15s}
.stones.pick .stone:active{transform:scale(.92)}
.stone-l{position:absolute;top:100%;margin-top:4px;left:50%;transform:translateX(-50%);white-space:nowrap;font:600 .78rem/1 var(--display);color:var(--ink-2)}
@keyframes stonebob{50%{transform:translateY(-5px)}}
.today-go{display:flex;align-items:center;gap:14px;width:100%;max-width:440px;padding:12px 22px 12px 12px;border-radius:999px;text-decoration:none;color:#fff;background:linear-gradient(180deg,#FF9DB6,var(--coral) 55%,var(--coral-2));box-shadow:0 14px 26px -12px rgba(244,95,134,.75)}
.today-play{flex:0 0 auto;width:64px;height:64px;border-radius:50%;background:#fff;color:var(--coral-2);display:grid;place-items:center}
.today-play svg{width:28px;height:28px}
.today-t{display:flex;flex-direction:column;gap:2px}
.today-t strong{font:700 1.5rem/1.05 var(--display)}
.today-t small{font-weight:700;opacity:.9}
.today-done{margin:0;font:700 1.15rem/1.3 var(--display);color:var(--ink);text-align:center}
.week{list-style:none;margin:0;padding:0;display:flex;gap:clamp(4px,1.8vw,10px)}
.week li{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:22px;opacity:.55;padding:4px 3px;border-radius:12px}
.week li small{font:700 .7rem/1 var(--display);color:var(--ink-2)}
.week li.hatched{opacity:1}
.week li.now{opacity:1;box-shadow:0 0 0 2px var(--sun)}
.chiku-sleepy .chiku-z{animation:snooze 2.4s ease-in-out infinite}
@keyframes snooze{0%{opacity:0;transform:translate(0,6px)}40%{opacity:1}100%{opacity:0;transform:translate(8px,-10px)}}

/* ---- avatars (child form) ---- */
.avatars{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.avatars legend{font-weight:700;margin-bottom:6px;padding:0}
.avatar input{position:absolute;opacity:0;pointer-events:none}
.avatar span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;font-size:28px;background:#F4F1FA;cursor:pointer;transition:transform .15s}
.avatar input:checked + span{background:linear-gradient(180deg,#FFF1C7,#FFE08A);box-shadow:0 0 0 3px var(--sun);transform:scale(1.08)}
.avatar input:focus-visible + span{outline:3px solid var(--coral-2);outline-offset:2px}

/* ---- press-and-hold links for grown-ups (grownup_controller.js) ---- */
[data-grownup]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;touch-action:none}
[data-grownup].holding{box-shadow:0 0 0 3px var(--sun);border-radius:999px;transition:box-shadow .9s}
.grownup-tip{position:absolute;z-index:50;width:192px;text-align:center;background:var(--ink);color:#fff;font:600 .85rem/1.2 var(--display);padding:8px 10px;border-radius:12px;box-shadow:var(--sh);pointer-events:none}
/* Account, privacy policy and delete-account pages */
.panel-title{margin:0;font:700 1.3rem/1.15 var(--display);color:var(--ink)}
.panel-card p{margin:0;line-height:1.45}
.panel-card .hi{display:block;margin-top:4px}
.legal{gap:10px}
.legal h1{font-size:clamp(1.7rem,6vw,2.2rem)}
.legal h2{margin:12px 0 0;font:700 1.2rem/1.2 var(--display);color:var(--ink)}
.legal ul,.legal ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:6px;line-height:1.45}
.legal-date{font-size:.9rem;font-weight:600;color:var(--ink-2)}
/* Admin, Account and Sign out still fit beside the brand on a phone */
@media (max-width:440px){
  .site-top{flex-wrap:wrap}
  .site-top-links{flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .site-top-links .link-btn{padding:7px 12px;font-size:.88rem}
}
/* "Report a problem" (shared/_report), on every page and in the lesson player */
.report{border:0;padding:0;border-radius:28px;background:var(--paper);color:var(--ink);box-shadow:var(--sh-lift);width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}
.report::backdrop{background:rgba(40,34,70,.45)}
.report-in{display:flex;flex-direction:column;gap:12px;padding:22px}
.report h2{margin:0;font:700 1.4rem/1.15 var(--display)}
.report-sub{margin:0;line-height:1.4;font-weight:600;color:var(--ink-2)}
.report-sub.small{font-size:.88rem;font-weight:500}
.report textarea{width:100%;border:2px solid var(--line);border-radius:18px;padding:10px 14px;font:inherit;font-weight:500;resize:vertical;min-height:96px;background:#fff;color:var(--ink)}
.report textarea:focus{outline:none;border-color:var(--berry);box-shadow:0 0 0 4px rgba(155,123,245,.18)}
.report-msg{margin:0;font-weight:700;color:var(--coral-2)}
.report-acts{display:flex;gap:10px;justify-content:flex-end}
.report-acts .btn{min-height:48px;font-size:17px}
.link-quiet{background:none;border:0;padding:0;font:inherit;color:var(--ink-2);text-decoration:underline;cursor:pointer}
.report-shot{display:flex;flex-direction:column;gap:8px}
.report-shot img{width:100%;max-height:180px;object-fit:contain;object-position:left top;border-radius:14px;border:2px solid var(--line);background:#fff}
.report-shot .opt{display:flex;align-items:center;gap:10px;font-weight:700}