/* MathKidoo parent-side shell (Bible V2 pages): the app theme, one file.
   Tokens are the same as src/parent.html's so the new pages sit beside it.
   MG-466 (1 Oct 2026): brought up to parent.html's own level — the fonts
   below are only USEFUL once the page actually loads them (see each page's
   <head>, copied from src/parent.html's own font block verbatim), card
   hierarchy, button press, chip look, entry motion and phone-width rules
   all read straight off src/parent.html and src/app.html's "mk-" styles. */
:root {
  --mk-purple:#7139D3; --mk-green:#10C05D; --mk-navy:#12266F; --mk-ground:#FAF7F2; --mk-ink:#1B1530;
  --mk-ink-soft:#5B5478; --mk-rule:#E8E2F2; --mk-tint:#F1ECF9; --danger:#C0392B;
  --font-display:'Nunito', system-ui, sans-serif; --font-body:'Source Sans 3', system-ui, sans-serif; --font-child:'Baloo 2', system-ui, sans-serif;
  --radius-md:14px; --radius-lg:20px; --radius-pill:999px; --press-purple:0 5px 0 #4A1F9C;
}
html, body { margin:0; padding:0; background:var(--mk-ground); }
body { font-family:var(--font-body); color:var(--mk-ink); -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
button { font-family:inherit; }
.mk-page { max-width:760px; margin:0 auto; padding:0 16px 48px; overflow-x:hidden; }
.mk-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--mk-rule); margin-bottom:18px; }
.mk-topbar img { height:36px; width:auto; }
.mk-topbar-title { font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--mk-navy); }
.mk-topbar-links a, .mk-back { font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--mk-navy); text-decoration:none; padding:8px 12px; border-radius:var(--radius-pill); background:var(--mk-tint); }
/* MG-478: at 360px the bar ran out of room — "Sign out" broke onto two lines
   and split its own pill, and a two-word title wrapped. A link is never
   wrapped; the title is the part that gives way, and the logo steps down a
   size on the narrowest phones. */
.mk-topbar > * { min-width:0; }
.mk-topbar-links { flex:none; }
.mk-topbar-links a, .mk-back { white-space:nowrap; display:inline-block; }
.mk-topbar-title { text-align:center; line-height:1.2; }
@media (max-width:380px) {
  .mk-topbar img { height:30px; }
  .mk-topbar-title { font-size:15px; }
  .mk-topbar-links a, .mk-back { padding:8px 10px; }
}
.mk-card { background:#fff; border:1px solid var(--mk-rule); border-radius:var(--radius-lg); padding:18px 20px; margin:0 0 14px; }
.mk-card h1 { font-family:var(--font-display); font-size:22px; margin:0 0 6px; color:var(--mk-navy); }
.mk-card h2 { font-family:var(--font-display); font-size:16px; margin:0 0 6px; color:var(--mk-navy); }
.mk-card p { margin:6px 0; color:var(--mk-ink-soft); line-height:1.5; }
.mk-chips { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px; }
.mk-chip { padding:8px 14px; border:0; border-radius:var(--radius-pill); background:var(--mk-tint); color:var(--mk-navy); font-family:var(--font-child); font-size:14px; font-weight:700; cursor:pointer; transition:transform .1s ease-out; }
.mk-chip.is-on { background:var(--mk-purple); color:#fff; }
.mk-chip:active { transform:translateY(1px); }
.mk-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px; }
.mk-tile { display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--mk-rule); border-radius:var(--radius-lg); padding:16px; transition:transform .1s ease-out; }
.mk-tile:active { transform:translateY(2px); }
.mk-tile b { display:block; font-family:var(--font-display); font-size:16px; color:var(--mk-navy); margin-bottom:4px; }
.mk-tile span { color:var(--mk-ink-soft); font-size:14px; }
.mk-btn { display:inline-block; border:0; border-radius:var(--radius-pill); padding:12px 22px; background:var(--mk-purple); color:#fff; font-family:var(--font-display); font-weight:800; font-size:15px; cursor:pointer; box-shadow:var(--press-purple); text-decoration:none; transition:transform .1s ease-out; }
.mk-btn:active { transform:translateY(4px); box-shadow:0 1px 0 #4A1F9C; }
.mk-btn.secondary { background:var(--mk-tint); color:var(--mk-navy); box-shadow:none; }
.mk-btn.secondary:active { transform:translateY(2px); box-shadow:none; }
.mk-btn:disabled { opacity:.55; cursor:wait; }
.mk-field { display:block; margin:10px 0; } .mk-field label { display:block; font-weight:700; font-size:13px; color:var(--mk-navy); margin-bottom:4px; }
.mk-field input, .mk-field select { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--mk-rule); border-radius:var(--radius-md); font:inherit; }
/* MG-478: a checkbox was the browser's own grey box. Theme colour, a size a
   thumb can hit, and its label lines up with it rather than sitting low. */
input[type="checkbox"] { accent-color:var(--mk-purple); width:20px; height:20px; vertical-align:-4px; cursor:pointer; }
.mk-field label:has(> input[type="checkbox"]) { display:flex; align-items:center; gap:10px; font-weight:700; cursor:pointer; }
.mk-badge { display:inline-block; padding:3px 10px; border-radius:var(--radius-pill); font-size:12px; font-weight:800; font-family:var(--font-display); background:var(--mk-tint); color:var(--mk-navy); }
.mk-badge.arith { background:#EAF3FF; color:#1E4FA3; } .mk-badge.tables { background:#E9F9EF; color:#0E7A3E; }
.mk-err { color:var(--danger); font-size:13px; margin-top:8px; min-height:18px; }
.mk-muted { color:var(--mk-ink-soft); font-size:13px; }
.mk-big { font-family:var(--font-display); font-size:34px; font-weight:900; color:var(--mk-navy); }
.mk-avatars { display:flex; flex-wrap:wrap; gap:8px; } .mk-avatars button { font-size:26px; width:48px; height:48px; border-radius:12px; border:2px solid transparent; background:var(--mk-tint); cursor:pointer; }
.mk-avatars button.is-on { border-color:var(--mk-purple); background:#fff; }

/* ---- MG-466: entry motion, the same restraint src/full/index.html's own
   .node.mk-point rule uses — keep the information (the card still appears),
   drop only the movement, for prefers-reduced-motion. Applied to elements
   that go from display:none to shown, which replays the animation exactly
   like a freshly-inserted node — so one class works for both a page's first
   paint and a screen a user steps onto later (onboarding's three screens). */
@keyframes mk-fade-up { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.mk-enter { animation:mk-fade-up .32s ease both; }
@media (prefers-reduced-motion:reduce) { .mk-enter { animation:none; } }

/* ---- MG-466: the home hero — the active child's own card, not a row in a list. */
.mk-hero { display:flex; align-items:center; gap:14px; }
.mk-hero-avatar { flex:none; width:72px; height:72px; border-radius:24px; background:var(--mk-purple); color:#fff; display:flex; align-items:center; justify-content:center; font-size:34px; }
.mk-hero-name { font-family:var(--font-display); font-size:20px; font-weight:900; color:var(--mk-navy); }
.mk-hero-meta { margin-top:4px; }
.mk-hero-cta { display:block; text-align:center; margin-top:16px; }

/* ---- MG-466: a plain-language section eyebrow, for "grouped sections"
   (settings) — same letter-spaced small-caps label src/app.html's own
   .mkhead already uses for a sub-heading above a group of rows. */
.mk-section-label { font-family:var(--font-display); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mk-ink-soft); margin:20px 2px 8px; }
.mk-section-label:first-of-type { margin-top:4px; }

/* ---- MG-466: the number-as-hero treatment (Goal plan). */
.mk-stat-hero { text-align:center; margin:10px 0 4px; }
.mk-stat-hero .mk-big { font-size:48px; line-height:1; }
.mk-stat-unit { font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--mk-ink-soft); margin-top:2px; }
.mk-week-row { display:flex; align-items:baseline; gap:8px; padding:10px 0; border-bottom:1px solid var(--mk-rule); flex-wrap:wrap; }
.mk-week-row:last-child { border-bottom:0; }
.mk-week-id { font-family:var(--font-display); font-weight:800; color:var(--mk-purple); font-size:13px; }