/* It Adds Up kids app. Warm, calm, one thing at a time. */
body.kid { margin:0; background:var(--paper); color:var(--ink); font:17px/1.5 var(--font);
  padding: env(safe-area-inset-top) 0 calc(76px + env(safe-area-inset-bottom)); }
.kid * { box-sizing:border-box; }
.kid main { max-width:560px; margin:0 auto; padding:14px 16px 24px; display:grid; gap:14px; }
.kid h1, .kid h2, .kid .serif { font-family:var(--display); font-variation-settings:"SOFT" 100,"opsz" 144,"WONK" 0; font-weight:800; letter-spacing:-.015em; }
.kid h1 { font-size:38px; line-height:1.05; margin:0; }
.kid h2 { font-size:22px; line-height:1.15; margin:0 0 8px; }
.kid .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:0 1px 2px rgba(38,51,56,.04); }
.kid .card.soft { background:var(--celery-soft); border-color:#D7E0A8; }
.kid .card.note { background:var(--accent-soft); border-color:#CDD5F1; }
.kid .eyebrow { margin:0 0 4px; font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.kid .quiet { color:var(--muted); } .kid .small { font-size:14.5px; }
.kid .row { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.kid .err { color:var(--stop); font-size:15px; }
.kid .okline { color:var(--ok); font-weight:600; }

.kid button, .kid a.btn { font:inherit; font-size:15.5px; font-weight:600; padding:10px 16px; border-radius:12px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink); cursor:pointer; text-decoration:none; }
.kid button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.kid button.link { border:0; background:none; padding:4px 0; color:var(--accent); text-decoration:underline; text-underline-offset:3px; font-weight:600; }
.kid button:disabled { opacity:.45; cursor:default; }
.kid .buttons { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.kid input, .kid textarea, .kid select { width:100%; font:inherit; font-size:16px; padding:11px 12px; border:1px solid var(--line-strong); border-radius:12px;
  background:var(--paper); color:var(--ink); margin:6px 0; }
.kid label { display:block; font-size:14px; font-weight:600; margin-top:8px; }

/* top */
.kid .kidtop { display:flex; justify-content:space-between; align-items:center; }
.kid .hello { font-weight:600; color:var(--ink-2); }
.kid .avatar { width:36px; height:36px; border-radius:50%; background:var(--celery); color:var(--celery-ink); display:grid; place-items:center; font-weight:800; border:0; padding:0; }
.kid .date { color:var(--muted); margin-top:4px; }
.kid .progress { display:flex; align-items:center; gap:12px; margin-top:12px; }
.kid .pill { background:var(--sunk); border-radius:999px; padding:4px 12px; font-size:14px; font-weight:600; }
.kid .dots { display:flex; gap:5px; flex-wrap:wrap; }
.kid .dots i { width:14px; height:14px; border-radius:4px; border:2px solid var(--ink); }
.kid .dots i.on { background:var(--accent); border-color:var(--accent); }

/* task list */
.kid .tasks { display:grid; gap:8px; }
.kid .task { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px; font-weight:500; }
.kid .task .box { flex:none; width:24px; height:24px; border-radius:7px; border:2px solid var(--ink); display:grid; place-items:center; }
.kid .task.done .box { background:var(--accent); border-color:var(--accent); }
.kid .task.done .box::after { content:""; width:10px; height:6px; border:solid #fff; border-width:0 0 2.5px 2.5px; transform:rotate(-45deg) translate(1px,-1px); }
.kid .task.done .t { color:var(--muted); text-decoration:line-through; text-decoration-color:var(--line-strong); }
.kid .task .sub { display:block; font-size:13px; color:var(--muted); font-weight:500; text-decoration:none; }
.kid .task.lesson .box { border-style:dashed; border-color:var(--muted); }
.kid .task.lesson { background:var(--paper); }
.kid .task .when { margin-left:auto; font-size:13px; color:var(--muted); white-space:nowrap; }
.kid .more { display:flex; justify-content:flex-end; }

/* goal */
.kid .goal .big { font-family:var(--display); font-variation-settings:"SOFT" 100,"opsz" 144,"WONK" 0; font-weight:800; font-size:34px; line-height:1; }
.kid .track { height:12px; border-radius:99px; background:var(--sunk); margin-top:10px; overflow:hidden; }
.kid .track i { display:block; height:100%; border-radius:99px; background:var(--accent); }
.kid .jars { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.kid .jar { background:var(--paper); border-radius:14px; padding:12px; text-align:center; }
.kid .jar b { display:block; font-size:21px; }
.kid .item { padding:10px 0; border-bottom:1px solid var(--line); } .kid .item:last-child { border-bottom:0; }

/* challenge */
.kid .challenge { font-size:19px; font-weight:600; margin:6px 0; }
.kid .verse { font-style:italic; margin:4px 0 0; }

/* sheet */
.kid .sheet { position:fixed; inset:0; background:rgba(38,51,56,.35); display:flex; align-items:flex-end; justify-content:center; z-index:20; }
.kid .sheet .card { width:100%; max-width:560px; border-radius:22px 22px 0 0; padding:22px 18px calc(22px + env(safe-area-inset-bottom)); }

/* tabs */
.kidtabs { position:fixed; left:0; right:0; bottom:0; background:rgba(255,255,255,.96); border-top:1px solid var(--line); display:flex; justify-content:space-around;
  padding:8px 0 calc(8px + env(safe-area-inset-bottom)); backdrop-filter:blur(8px); z-index:10; }
.kidtabs button { font:inherit; font-size:15px; font-weight:600; background:none; border:0; color:var(--muted); padding:8px 18px; border-radius:12px; cursor:pointer; }
.kidtabs button[aria-current="page"] { color:var(--accent); background:var(--accent-soft); }

/* sign-in */
.kid .kidgate { margin-top:10vh; padding:28px 24px; }
.kid .kidgate .mark { margin-bottom:16px; }
.kid .kidgate .buttons button { width:100%; padding:13px; font-size:16px; }
.kid [hidden], .kidtabs[hidden] { display:none !important; }
.kid .task:disabled { opacity:1; cursor:default; }
.kid .jar b, .kid .jar span { display:block; }
.kid .jar b { font-size:21px; line-height:1.2; }
.kid .eyebrow { display:block; background:none; padding:0; border-radius:0; color:var(--muted); }
.kidtabs button { display:grid; justify-items:center; gap:2px; padding:6px 18px; }
.kidtabs svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.kid .mini-word { font-family:var(--display); font-variation-settings:"SOFT" 100,"opsz" 72,"WONK" 0; font-weight:850; font-size:22px; line-height:.88; letter-spacing:-.03em; color:var(--ink); }
.kid .mini-word.big { font-size:34px; margin-bottom:18px; }
.kid .avatar { width:44px; height:44px; font-size:18px; }
.kid h1 { font-size:42px; }