/* 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}
.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)}
.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 */
.subjects{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:14px}
.subject{position:relative;display:flex;align-items:center;gap:14px;min-height:108px;padding:16px 18px;border-radius:30px;background:var(--c);color:var(--ink);text-decoration:none;box-shadow:var(--sh);transition:transform .15s}
.subject:active{transform:scale(.97)}
.subject-icon{flex:0 0 auto;width:66px;height:66px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-size:34px;line-height:1;box-shadow:var(--sh-sm)}
.subject-icon.read{font:700 30px/1 "Baloo 2",system-ui,sans-serif;color:var(--coral-2)}
.subject-name{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.subject-name strong{font:700 1.5rem/1.1 var(--display)}
.subject-stars{display:flex;align-items:center;gap:4px;font:700 1.05rem/1 var(--display);color:#6B4A00;background:linear-gradient(180deg,#FFE08A,var(--sun));padding:6px 12px 6px 8px;border-radius:999px}
.subject-stars .ico{width:18px;height:18px;color:#fff}
.subject.soon{opacity:.6;box-shadow:none;border:2px dashed rgba(63,58,90,.18)}
.soon-tag{position:absolute;top:10px;right:12px;font:600 .72rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:rgba(255,255,255,.8);padding:5px 9px;border-radius:999px}
.subject.soon .subject-name{padding-top:14px}
.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}