/* HealthStreak Kids (1.20): the front door and the parents' page. Candy world colours, Fredoka for the brand,
   the grown-up styles (styles.css) for the parents' cards and sheets. */
body.ka {
  --ka-bg1: #FFF0F7; --ka-bg2: #EFE6FF; --ka-ink: #3B1450; --ka-ink2: #7A4A8C; --ka-pri: #FF3F9A; --ka-sec: #7B5CFF; --ka-acc: #FFC93C; --ka-line: #F6C7DF;
  --ka-font: "Fredoka", ui-rounded, system-ui, sans-serif;
  margin: 0; min-height: 100dvh; background: linear-gradient(170deg, var(--ka-bg1), var(--ka-bg2)); color: var(--ka-ink);
}
.ka-root { max-width: 560px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.ka-word { margin: 0; font: 700 40px/1 var(--ka-font); letter-spacing: -.02em; text-align: center; }
.ka-word b { color: var(--ka-pri); }
.ka-word-sm { font-size: 24px; text-align: left; }
.ka-lead { margin: 10px auto 18px; max-width: 34ch; text-align: center; font: 500 17px/1.4 var(--ka-font); color: var(--ka-ink2); }
.ka-parade { display: flex; justify-content: center; align-items: flex-end; gap: 2px; margin: 10px 0 8px; }
.ka-parade span { width: 78px; animation: ka-hop 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * .22s); }
.ka-parade .kc { width: 100%; height: auto; display: block; }
@keyframes ka-hop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-14px); } }
.ka-card { display: grid; gap: 10px; padding: 18px; margin-bottom: 14px; border-radius: 24px; background: #fff; box-shadow: 0 5px 0 var(--ka-line); font-family: var(--ka-font); }
.ka-card h2 { margin: 0; font-size: 21px; font-weight: 700; }
.ka-card p { margin: 0; color: var(--ka-ink2); line-height: 1.4; }
.ka-link input { min-height: 56px; padding: 0 16px; border-radius: 16px; border: 3px solid var(--ka-line); font: 700 24px var(--ka-font); letter-spacing: .14em; text-transform: uppercase; text-align: center; color: var(--ka-ink); background: var(--ka-bg1); }
.ka-link input:focus { outline: none; border-color: var(--ka-pri); }
.ka-btn { min-height: 56px; border: 0; border-radius: 18px; background: var(--ka-pri); color: #fff; font: 700 20px var(--ka-font); box-shadow: 0 5px 0 #b8216b; cursor: pointer; }
.ka-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #b8216b; }
.ka-err { min-height: 20px; color: #D63B5A !important; font-weight: 600; }
.ka-parent { background: color-mix(in srgb, #fff 70%, var(--ka-bg2)); }
.ka-fine { text-align: center; font: 500 13px var(--ka-font); color: var(--ka-ink2); }

/* the parents' page */
.ka-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ka-hi { font: 600 15px var(--ka-font); color: var(--ka-ink2); }
.ka-home .card { color: var(--spruce); }
.ka-race h3 small { font-weight: 400; font-size: 13px; opacity: .7; margin-left: 4px; }
.ka-lanes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ka-lanes li { display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--glacier); }
.ka-lanes li.is-me { box-shadow: inset 0 0 0 2px var(--ka-pri); }
.ka-place { font: 700 17px var(--ka-font); text-align: center; }
.ka-face { width: 40px; height: 34px; display: grid; place-items: center; }
.ka-face .kc-mini { width: 40px; height: 34px; }
.ka-face b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--ka-sec); color: #fff; font: 700 15px var(--ka-font); }
.ka-who strong { display: block; }
.ka-bar { display: block; height: 8px; margin-top: 4px; border-radius: 999px; background: #fff; overflow: hidden; }
.ka-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ka-pri), var(--ka-sec)); }
.ka-pct { font: 700 18px var(--ka-font); }
.ka-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .ka-parade span { animation: none; } }
.ka-card { width: 100%; box-sizing: border-box; min-width: 0; }
.ka-link input, .ka-link .ka-btn { width: 100%; min-width: 0; box-sizing: border-box; }