/* App styles on top of theme/tokens.css (Space Explorers kit). Colors come from the kit tokens. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--space-900); color: var(--on-space); font-family: var(--font-body); font-size: var(--fs-body);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
input, select, textarea { -webkit-user-select: text; user-select: text; }
button { font-family: inherit; cursor: pointer; color: inherit; touch-action: manipulation; }
img { display: block; }
.ic { display: inline-grid; place-items: center; line-height: 1; }
.ic img { width: 100%; height: 100%; }
#app { min-height: 100vh; }
.boot { display: grid; place-items: center; height: 80vh; animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-14px); } }
.page { max-width: 920px; margin: 0 auto; padding: var(--space-4) max(var(--space-5), env(safe-area-inset-right)) max(var(--space-6), env(safe-area-inset-bottom)) max(var(--space-5), env(safe-area-inset-left)); }

/* ---------- header band + kid switcher ---------- */
.app-header { background-image: url('/theme/header/header-pattern.svg'); padding-top: env(safe-area-inset-top); border-bottom: 3px solid var(--space-600); }
.app-header .in { max-width: 920px; margin: 0 auto; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) max(var(--space-5), env(safe-area-inset-right)) var(--space-3) max(var(--space-5), env(safe-area-inset-left)); }
.kids { display: flex; gap: var(--space-3); flex: 1; overflow-x: auto; padding: 4px 4px 8px; scrollbar-width: none; }
.kids::-webkit-scrollbar { display: none; }
.kid-btn { flex: none; min-width: 104px; min-height: 124px; padding: 8px 10px 6px; border-radius: var(--radius-lg); border: var(--stroke) solid transparent;
  background: transparent; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--on-space-soft); transition: transform .1s; }
.kid-btn:active { transform: scale(.95); }
.kid-btn .av { width: 80px; height: 80px; border-radius: 50%; border: var(--stroke) solid var(--ink); background: var(--kid); overflow: hidden; font-size: 48px; display: grid; place-items: center; }
.kid-btn .av img { width: 100%; height: 100%; }
.kid-btn .nm { font: 600 20px/1.1 var(--font-display); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kid-btn .left { font: 600 14px/1 var(--font-display); color: var(--on-space-soft); min-height: 14px; }
.kid-btn.on { background: var(--space-700); border-color: var(--star-yellow); color: var(--on-space); }
.kid-btn.on .av { box-shadow: 0 0 0 4px var(--star-yellow); }
.hbtns { display: flex; gap: var(--space-3); flex: none; }
.hbtn { width: 64px; height: 64px; flex: none; border-radius: 50%; border: 3px solid var(--space-600); background: var(--space-700); font-size: 28px; display: grid; place-items: center; }
.hbtn:active { transform: translateY(2px); }

/* ---------- greeting + rewards ---------- */
.hello { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.hello .grow { flex: 1 1 280px; }
.hello h1 { margin: 0; font-size: var(--fs-2xl); font-weight: 700; }
.hello .sub { color: var(--on-space-soft); font: 600 var(--fs-lg)/1.3 var(--font-display); }
.pills { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.week { display: flex; gap: 8px; margin: 0 0 var(--space-3); }
.wd { width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--space-700); border: 3px solid var(--space-600); display: grid; place-items: center; font: 600 18px/1 var(--font-display); color: var(--on-space-soft); }
.wd img { width: 36px; height: 36px; }
.wd.done { background: var(--space-600); border-color: var(--star-yellow); }
.wd.today { border-color: var(--star-yellow); color: var(--on-space); }
.wd.missed { opacity: .55; }
.progress { height: 26px; background: var(--space-600); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: var(--space-4); }
.progress > i { display: block; height: 100%; background: var(--star-yellow); border-radius: var(--radius-pill); transition: width .5s cubic-bezier(.3,1.4,.5,1); }

/* ---------- chore list (one per row) ---------- */
.list { display: grid; gap: var(--space-4); }
.chore { width: 100%; text-align: left; min-height: 104px; cursor: pointer; font-family: var(--font-body); }
.chore:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.chore .icon { font-size: 52px; }
.chore .icon img { width: 64px; height: 64px; }
.chore .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.chore .label { font: 700 var(--fs-lg)/1.2 var(--font-body); }
.chore .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rw { display: inline-flex; align-items: center; gap: 4px; font: 600 18px/1 var(--font-display); color: var(--ink); background: #fff; border: 2px solid #D5DBF0; border-radius: var(--radius-pill); padding: 3px 10px 3px 4px; }
.rw img { width: 26px; height: 26px; }
.tag { font: 600 16px/1 var(--font-display); padding: 6px 10px; border-radius: var(--radius-pill); border: 2px solid var(--ink); }
.tag.week { background: var(--nebula-strong); color: #fff; }
.tag.late { background: var(--warning); color: var(--ink); }
.chore .check { margin: 0 0 0 auto; }
.chore .check.on { background: var(--success); }
.chore .check.on::after { transform: rotate(-45deg) scale(1); }
.chore.is-done .label { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--success); }
.chore.pending .check { border-style: dashed; }
.chore.is-done .check { margin-left: 10px; }
.undo-hint { flex: none; margin-left: auto; margin-right: -8px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font: 700 20px/1 var(--font-display); color: var(--success-text); background: #fff; border: 2px solid #BFE8CF; opacity: .9; }
.chore.uncheck { animation: unpop .4s ease-out; }
.chore.uncheck .check { animation: unspin .4s ease-out; }
@keyframes unpop { 0% { transform: scale(1); } 40% { transform: scale(.97); } 100% { transform: scale(1); } }
@keyframes unspin { 0% { transform: rotate(0) scale(1); background: var(--success); } 60% { transform: rotate(-90deg) scale(.85); } 100% { transform: rotate(0) scale(1); } }
@media (max-width: 600px) { .undo-hint { width: 28px; height: 28px; font-size: 16px; margin-right: -4px; } }
@media (prefers-reduced-motion: reduce) { .chore.uncheck, .chore.uncheck .check { animation: none; } }

.alldone { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); border-radius: var(--radius-lg); background: var(--star-yellow); color: var(--ink); border: var(--stroke) solid var(--ink); box-shadow: var(--shadow-pop); }
.alldone img { width: 64px; height: 64px; }
.alldone b { font: 700 var(--fs-xl)/1.1 var(--font-display); }
.alldone small { display: block; font: 700 18px/1.3 var(--font-body); }
.empty { text-align: center; padding: 60px 10px; font: 600 var(--fs-xl)/1.3 var(--font-display); color: var(--on-space-soft); }
.empty img { width: 140px; height: 140px; margin: 0 auto 10px; }
.offline { background: var(--warning); color: var(--ink); padding: 10px 16px; border-radius: var(--radius-md); font-weight: 700; margin-bottom: var(--space-3); border: 3px solid var(--ink); }

#toast { pointer-events: none; position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(220%); opacity: 0; background: var(--card); color: var(--ink); border: var(--stroke) solid var(--ink); box-shadow: var(--shadow-pop); padding: 14px 22px; border-radius: var(--radius-pill); font: 600 20px/1.2 var(--font-display); transition: transform .25s, opacity .25s; z-index: 10002; max-width: 90vw; }
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

.gate { text-align: center; padding: 70px 20px; font: 600 var(--fs-xl)/1.3 var(--font-display); }
.gate img { width: 140px; height: 140px; margin: 0 auto 16px; }

/* ---------- parent mode (light panel) ---------- */
.sheet { position: fixed; inset: 0; z-index: 40; background: var(--space-900); color: var(--ink); overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(30px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.sheet .wrap { max-width: 980px; margin: 0 auto; }
.sheet h2 { font-size: var(--fs-xl); margin: 6px 0 12px; color: var(--on-space); }
.sheet h3 { font: 600 22px/1.2 var(--font-display); margin: 4px 0 10px; }
.ptop { display: flex; align-items: center; gap: 10px; }
.ptop h2 { flex: 1; margin: 0; }
.tabs { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0; position: sticky; top: calc(-1 * max(12px, env(safe-area-inset-top))); background: var(--space-900); z-index: 2; scrollbar-width: none; }
.tab { min-height: 64px; padding: 0 18px; border-radius: var(--radius-pill); background: var(--space-700); color: var(--on-space); font: 600 19px/1 var(--font-display); border: 3px solid var(--space-600); white-space: nowrap; }
.tab.on { background: var(--star-yellow); color: var(--ink); border-color: var(--ink); }
.pbtn { min-height: 64px; padding: 0 22px; border-radius: var(--radius-pill); font: 600 20px/1 var(--font-display); background: var(--rocket-orange); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.pbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.pbtn.ghost { background: #fff; }
.pbtn.teal { background: var(--planet-teal); }
.pbtn.purple { background: var(--nebula-strong); color: #fff; }
.pbtn.warn { background: var(--warning); }
.pbtn.small { min-height: 56px; font-size: 17px; padding: 0 16px; }
.ptop .pbtn { background: var(--card); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pcard { background: var(--card); color: var(--ink); border-radius: var(--radius-lg); padding: 16px 18px; border: var(--stroke) solid var(--ink); margin-bottom: 16px; }
.line { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 2px solid #E3E8F7; min-height: 64px; }
.line:last-child { border-bottom: 0; }
.line .em { font-size: 36px; width: 48px; height: 48px; flex: none; }
.line .grow { flex: 1; min-width: 0; }
.line .sub { color: var(--ink-soft); font-size: 17px; }
.line .t { font-weight: 700; }
.muted { color: var(--ink-soft); }
.sheet > .wrap > p.muted { color: var(--on-space-soft); }
label.f { display: block; font-size: 18px; color: var(--ink-soft); margin: 14px 0 6px; font-weight: 700; }
input.in, select.in { width: 100%; min-height: 64px; border-radius: var(--radius-md); border: 3px solid var(--ink); padding: 0 16px; font: 700 22px var(--font-body); color: var(--ink); background: #fff; }
input.in:focus { outline: 4px solid var(--star-yellow); }
.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
.pick button { height: 72px; border-radius: var(--radius-md); background: #fff; border: 3px solid #D5DBF0; font-size: 36px; padding: 6px; display: grid; place-items: center; }
.pick button img { width: 52px; height: 52px; }
.pick.avatars { grid-template-columns: repeat(auto-fill, 96px); }
.pick.avatars button { width: 96px; height: 96px; border-radius: 50%; padding: 4px; }
.pick.avatars button img { width: 78px; height: 78px; }
.pick button.on { border-color: var(--ink); background: var(--star-yellow); }
.pick.colors button { font-size: 0; border-color: transparent; }
.pick.colors button.on { border-color: var(--ink); box-shadow: inset 0 0 0 4px #fff; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button { min-height: 64px; min-width: 64px; padding: 0 16px; border-radius: var(--radius-pill); background: #fff; border: 3px solid #D5DBF0; font: 600 19px/1 var(--font-display); color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.seg button img { width: 34px; height: 34px; border-radius: 50%; }
.seg button.on { background: var(--planet-teal); border-color: var(--ink); }
.kidchip { display: inline-flex; align-items: center; gap: 6px; font: 600 17px/1 var(--font-display); padding: 3px 10px 3px 3px; background: #E8EDFB; border-radius: var(--radius-pill); margin-right: 4px; }
.kidchip .f { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: var(--kid); overflow: hidden; border: 2px solid var(--ink); }
.kidchip .f img { width: 100%; height: 100%; }
.kidrow .av { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--ink); background: var(--kid); overflow: hidden; flex: none; }
.kidrow .av img { width: 100%; height: 100%; }
.balrow .bal { display: inline-flex; align-items: center; gap: 6px; font: 600 26px/1 var(--font-display); padding: 6px 16px 6px 6px; border-radius: var(--radius-pill); background: #E8EDFB; }
.balrow .bal img { width: 40px; height: 40px; }

/* PIN pad */
.pin { display: grid; place-items: center; min-height: 85vh; color: var(--on-space); }
.pin h2 { text-align: center; }
.pin .dots { display: flex; gap: 18px; margin: 18px 0 24px; justify-content: center; }
.pin .dots i { width: 26px; height: 26px; border-radius: 50%; border: 4px solid var(--on-space); }
.pin .dots i.on { background: var(--star-yellow); border-color: var(--star-yellow); }
.pin .pad { display: grid; grid-template-columns: repeat(3, 92px); gap: 16px; width: max-content; margin: 0 auto; }
.pin .pad button { height: 92px; border-radius: 50%; background: var(--card); color: var(--ink); font: 600 38px/1 var(--font-display); border: var(--stroke) solid var(--ink); box-shadow: var(--shadow-pop); }
.pin .pad button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.pin .err { color: var(--warning); min-height: 30px; font: 600 22px/1.2 var(--font-display); text-align: center; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-12px); } 40%, 80% { transform: translateX(12px); } }

/* history */
.hday { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 2px solid #E3E8F7; min-height: 56px; }
.hday:last-child { border-bottom: 0; }
.hday .d { font: 600 19px/1.1 var(--font-display); display: flex; align-items: center; gap: 4px; }
.hday .d img { width: 26px; height: 26px; }
.hday .ems { display: flex; flex-wrap: wrap; gap: 4px; font-size: 26px; }
.hday .ems .ic { width: 34px; height: 34px; }
.hday .money { text-align: right; font-size: 16px; white-space: nowrap; font-weight: 700; }
.hday.today .d { color: var(--rocket-orange); }
.plus { color: var(--success-text); } .minus { color: var(--warning-text); }

@media (max-width: 600px) {
  .page { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .app-header .in { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .kid-btn { min-width: 80px; min-height: 108px; padding: 6px 2px; }
  .kids { gap: 6px; }
  .hbtns { flex-direction: column; gap: 6px; }
  .kid-btn .av { width: 64px; height: 64px; font-size: 38px; }
  .kid-btn .nm { font-size: 17px; }
  .hello h1 { font-size: var(--fs-xl); }
  .list { gap: var(--space-3); }
  .chore { gap: 12px; padding: 12px 14px; }
  .chore .icon { width: 52px; height: 52px; font-size: 42px; line-height: 52px; }
  .chore .icon img { width: 52px; height: 52px; }
  .chore .label { font-size: 21px; }
  .wd { width: 40px; height: 40px; font-size: 16px; }
  .wd img { width: 30px; height: 30px; }
  .pill { font-size: var(--fs-lg); }
  .pill img { width: 34px; height: 34px; }
  .pin .pad { grid-template-columns: repeat(3, 84px); }
  .pin .pad button { height: 84px; }
  .hday { grid-template-columns: 72px 1fr; }
  .hday .money { grid-column: 2; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .progress > i, .kid-btn { transition: none; } .boot { animation: none; } }

/* device setup screen */
.pin.setup { min-height: 100vh; padding: max(24px, env(safe-area-inset-top)) 16px 24px; }
.setup-sub { color: var(--on-space-soft); margin: 0; }
.pin .pad span { display: block; }
.linkish { margin-top: 18px; background: none; border: 0; color: var(--on-space-soft); text-decoration: underline; font: 400 17px/1.3 var(--font-body); min-height: 44px; padding: 0 8px; }