Ayala

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_350":351,"_352":353},"routes/_app.x.$handle.$name",{"_95":94,"_31":43,"_103":85,"_26":97,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":24,"_117":118,"_119":57,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",20,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":20,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","assets/js/screens/map.js","latestPath","fileId","9e659c8a-a816-11f1-b104-1607ee4eb77e","name","map.js","fileType","content","// Where she is against the norms: every skill laid out by area and by age.\n//\n// The comparison is spatial rather than a score — a dashed line marks her age,\n// so cells behind it should be filled and cells ahead are her future. A gap\n// behind the line is visible without computing anything.\n//\n// Colour carries one thing only, magnitude, in a single sequential ramp. Area\n// identity lives in the row label; the domain dot beside it is an accent, never\n// the sole carrier.\n\nimport { el, ICON, openSheet, haptic } from '../ui.js';\nimport { t, getLang, fmtBand } from '../i18n.js';\nimport * as store from '../store.js';\nimport { AGE_COLS, matrix, matrixByDomain, ageInMonths, domainName } from '../data.js';\n\nlet openDom = null; // which area is expanded, kept across re-renders\nlet showNumbers = false;\n\nconst bucket = (done, total) =>\n total === 0 ? 0 : done === 0 ? 0 : done >= total ? 5\n : done / total >= 0.75 ? 4 : done / total >= 0.5 ? 3 : done / total >= 0.25 ? 2 : 1;\n\nexport function renderMap(rerender) {\n const lang = getLang();\n const s = store.get();\n const months = ageInMonths(s.child.birth);\n const stat = (skills) => {\n const done = skills.filter((k) => s.can[k.id]).length;\n return { done, total: skills.length };\n };\n\n const grid = el('div', { class: 'mgrid', dataset: { numbers: showNumbers ? '1' : '0' } });\n\n const head = el('div', { class: 'mhead' },\n el('span', {}, t('map.area')),\n ...AGE_COLS.map(([a, b]) => el('span', {}, fmtBand(a, b))),\n );\n\n const cell = (skills, label, band) => {\n const { done, total } = stat(skills);\n const node = el('button', {\n type: 'button',\n class: 'mcell',\n dataset: total ? { v: String(bucket(done, total)) } : { v: '0', none: '1' },\n 'aria-pressed': 'false',\n 'aria-label': `${label}, ${band}: ${done}/${total}`,\n }, el('span', { class: 'frac' }, total ? `${done}/${total}` : ''));\n if (total) node.addEventListener('click', () => openCell(skills, label, band));\n return node;\n };\n\n const body = el('div', { class: 'mbody' });\n\n for (const d of matrixByDomain()) {\n const all = [...new Set(d.cells.flat())];\n const st = stat(all);\n const open = openDom === d.domain;\n\n const label = el('button', {\n type: 'button', class: 'mlabel', 'aria-expanded': String(open),\n onClick: () => { openDom = open ? null : d.domain; rerender(); },\n },\n el('i', { class: 'mcaret' }),\n el('i', { class: 'dot', style: `--dom: var(--d-${d.domain})` }),\n el('span', {}, domainName(d.domain, lang)),\n el('span', { class: 'n' }, `${st.done}/${st.total}`),\n );\n\n body.append(el('div', { class: 'mrow', dataset: { open: open ? '1' : '0' } },\n label,\n ...d.cells.map((skills, i) => cell(skills, domainName(d.domain, lang), fmtBand(...AGE_COLS[i]))),\n ));\n\n if (!open) continue;\n for (const r of matrix().filter((x) => x.domain === d.domain)) {\n const cs = stat([...new Set(r.cells.flat())]);\n const name = r.category[lang] ?? r.category.en;\n body.append(el('div', { class: 'mrow mrow--cat' },\n el('div', { class: 'mlabel' }, el('span', {}, name), el('span', { class: 'n' }, `${cs.done}/${cs.total}`)),\n ...r.cells.map((skills, i) => cell(skills, name, fmtBand(...AGE_COLS[i]))),\n ));\n }\n }\n\n const today = el('div', { class: 'mtoday', hidden: true }, el('b', {}, t('map.today')));\n body.append(today);\n grid.append(head, body);\n\n /* The columns are fr-based, so the marker is only knowable after layout.\n Measure the real cell, and re-measure whenever the card resizes. */\n const place = () => {\n const ci = AGE_COLS.findIndex(([a, b]) => months >= a && months < b);\n const target = body.querySelector('.mrow')?.querySelectorAll('.mcell')[ci];\n if (ci < 0 || !target) { today.hidden = true; return; }\n const [a, b] = AGE_COLS[ci];\n const cr = target.getBoundingClientRect();\n const br = body.getBoundingClientRect();\n if (!cr.width) { today.hidden = true; return; }\n today.style.left = `${cr.left - br.left + cr.width * ((months - a) / (b - a))}px`;\n today.hidden = false;\n };\n // The grid is not in the document yet when this returns, so placement has to\n // wait for layout. rAF is skipped entirely while the page is hidden, so a\n // timeout backs it up and the observer keeps it right through every resize.\n requestAnimationFrame(place);\n setTimeout(place, 0);\n if (typeof ResizeObserver !== 'undefined') new ResizeObserver(place).observe(grid);\n\n /** Tapping a square opens its skills — and here they are editable. */\n function openCell(skills, label, band) {\n openSheet((close) => {\n const list = el('ul', { class: 'stack' });\n const draw = () => {\n list.replaceChildren();\n const cur = store.get();\n const sorted = [...skills].sort((x, y) => (cur.can[y.id] ? 1 : 0) - (cur.can[x.id] ? 1 : 0));\n for (const k of sorted) {\n const on = Boolean(cur.can[k.id]);\n const row = el('button', {\n type: 'button', class: 'goal', style: `--dom: var(--d-${k.domain})`,\n dataset: { done: on ? '1' : '0' },\n onClick: () => { store.toggleCan(k.id); haptic(); draw(); rerender(); },\n },\n el('span', { class: 'tick', html: ICON.check }),\n el('span', { class: 'goal__body' },\n el('span', { class: 'goal__text' }, k.text[lang] ?? k.text.en),\n el('span', { class: 'goal__meta' }, `${k.category[lang] ?? k.category.en} · ${fmtBand(k.fromMonths, k.toMonths)}`),\n ),\n );\n list.append(row);\n }\n };\n draw();\n return el('div', { class: 'stack' },\n el('h3', { class: 'group__title' }, label),\n el('p', { class: 'small faint', style: 'margin-top:-6px' }, `${band} · ${t('map.tapToMark')}`),\n list,\n el('button', { class: 'btn btn--ghost btn--full', type: 'button', onClick: () => close() }, t('a.close')),\n );\n });\n }\n\n const numsBtn = el('button', {\n class: 'pill', type: 'button', 'aria-pressed': String(showNumbers),\n onClick: () => { showNumbers = !showNumbers; rerender(); },\n }, t('map.counts'));\n\n const body_ = el('div', { class: 'wrap wrap--wide stack' },\n el('div', { class: 'pillbar' }, numsBtn),\n el('div', { class: 'mapcard' },\n el('div', { class: 'mapscroll' }, grid),\n el('div', { class: 'mlegend' },\n el('span', { class: 'k' }, t('map.none'),\n el('span', { class: 'ramp' }, ...[0, 1, 2, 3, 4, 5].map((i) =>\n el('i', { style: i ? `background: var(--s${i})` : 'background: transparent' }))),\n t('map.all')),\n el('span', { class: 'k' }, el('span', { class: 'hatch' }), t('map.noSkills')),\n el('span', { class: 'k' }, el('span', { class: 'dash' }), t('map.today')),\n ),\n ),\n el('p', { class: 'small faint' }, t('map.foot')),\n );\n\n const everything = [...new Set(matrix().flatMap((r) => r.cells.flat()))];\n const st = stat(everything);\n return { body: body_, subtitle: t('map.sub', { a: st.done, b: st.total }) };\n}\n","createdAt",["D",1788495052531],"branchVersion","branchId","4727d397-7473-4f5a-89f0-4f8c4a62dfae","id","693af66c-1a12-4358-b9a7-aa44eee8b254","tracker",["D",1788494851578],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Ayala — developmental tracker (data is passphrase-gated)","imageUrl","4769dfb5-ba19-4eb9-8bd9-4e10d91fa4f5","pinnedFileId","2d0860e0-a816-11f1-a428-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a06a67-e57e-76cd-b711-2548a094569d","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":97},"org",{"_95":94,"_96":97,"_98":97,"_18":53,"_99":100,"_101":24},"branch",{"_13":84,"_31":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"isOwned",42,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","ayala","handle","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_41":42,"_31":43,"_36":346,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":347,"_79":348,"_81":349,"_83":24},"tree",[186,203,204,205,206,207],"files",[186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207],"counts",{"_176":61,"_177":158,"_178":61,"_179":180,"_181":182},"contents",[124,125,126,127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_41":169,"_31":170,"_29":171,"_133":-5,"_39":40,"_38":172,"_135":57,"_36":173,"_13":61,"_33":174,"_34":-5,"_23":24,"_138":-5,"_26":175},{"_41":162,"_31":163,"_29":164,"_133":-5,"_39":40,"_38":165,"_135":57,"_36":166,"_13":61,"_33":20,"_34":167,"_23":24,"_138":-5,"_26":168},{"_41":154,"_31":155,"_29":55,"_133":-5,"_39":40,"_38":156,"_135":24,"_36":157,"_13":158,"_33":159,"_34":160,"_23":24,"_138":-5,"_26":161},{"_41":147,"_31":148,"_29":149,"_133":-5,"_39":40,"_38":150,"_135":57,"_36":151,"_13":61,"_33":20,"_34":152,"_23":24,"_138":-5,"_26":153},{"_41":140,"_31":141,"_29":142,"_133":-5,"_39":40,"_38":143,"_135":57,"_36":144,"_13":61,"_33":20,"_34":145,"_23":24,"_138":-5,"_26":146},{"_41":130,"_31":131,"_29":132,"_133":-5,"_39":40,"_38":134,"_135":57,"_36":136,"_13":61,"_33":20,"_34":137,"_23":24,"_138":-5,"_26":139},"303cf857-691a-49f3-9cff-a889d4ec86b5","sw.js","98a90250-a816-11f1-af98-1607ee4eb77e","parentId",6,"latest",["D",1788495042886],"// Offline shell. Bumping CACHE invalidates everything from the previous build.\nconst CACHE = 'ayala-v5';\nconst ASSETS = [\n './',\n 'index.html',\n 'manifest.webmanifest',\n 'assets/app.css',\n 'assets/skills.json',\n 'assets/icon.svg',\n 'assets/icon-180.png',\n 'assets/icon-192.png',\n 'assets/icon-512.png',\n 'assets/js/app.js',\n 'assets/js/data.js',\n 'assets/js/i18n.js',\n 'assets/js/picker.js',\n 'assets/js/spring.js',\n 'assets/js/store.js',\n 'assets/js/sync.js',\n 'assets/js/ui.js',\n 'assets/js/screens/onboarding.js',\n 'assets/js/screens/week.js',\n 'assets/js/screens/progress.js',\n 'assets/js/screens/map.js',\n 'assets/js/screens/library.js',\n 'assets/js/screens/settings.js',\n];\n\nself.addEventListener('install', (e) => {\n e.waitUntil(caches.open(CACHE).then((c) => c.addAll(ASSETS)).then(() => self.skipWaiting()));\n});\n\nself.addEventListener('activate', (e) => {\n e.waitUntil(\n caches.keys()\n .then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k))))\n .then(() => self.clients.claim()),\n );\n});\n\n// Network-first so edits show up immediately, falling back to the cache when\n// the laptop serving this isn't reachable. `cache: 'no-store'` skips the\n// browser's own HTTP cache on the network attempt — otherwise a stale copy of\n// a just-edited file wins and the app looks broken after a change.\nself.addEventListener('fetch', (e) => {\n if (e.request.method !== 'GET') return;\n const url = new URL(e.request.url);\n // The shared record is never cached: a stale copy served offline would be\n // merged back over everyone else's changes.\n if (url.pathname.startsWith('/api/')) return;\n const fresh = url.origin === location.origin\n ? fetch(e.request, { cache: 'no-store' })\n : fetch(e.request);\n e.respondWith(\n fresh\n .then((res) => {\n // Only cache a good response. Caching a 404 or a 500 would replace the\n // working copy and leave the installed app permanently broken offline.\n if (res.ok && res.type !== 'opaque') {\n const copy = res.clone();\n caches.open(CACHE).then((c) => c.put(e.request, copy)).catch(() => {});\n }\n return res;\n })\n .catch(() => caches.match(e.request).then((hit) => hit ?? caches.match('index.html'))),\n );\n});\n","label",[131],"66e097a6-32ed-4372-ad8b-34b8bce16268","probe.txt","43d6b6fa-a816-11f1-ad5b-1607ee4eb77e",2,["D",1788494900586],"SIBLING-OK",[141],"990421e7-3158-4d58-9523-71310b14f195","manifest.webmanifest","981dc442-a816-11f1-b2d0-1607ee4eb77e",5,["D",1788495041985],"{\n \"name\": \"Ayala\",\n \"short_name\": \"Ayala\",\n \"description\": \"Развитие ребёнка 1–4 года: навыки, цели недели, прогресс.\",\n \"start_url\": \"./\",\n \"scope\": \"./\",\n \"display\": \"standalone\",\n \"orientation\": \"portrait\",\n \"background_color\": \"#f5f4f2\",\n \"theme_color\": \"#f5f4f2\",\n \"icons\": [\n { \"src\": \"assets/icon-180.png\", \"sizes\": \"180x180\", \"type\": \"image/png\" },\n { \"src\": \"assets/icon-192.png\", \"sizes\": \"192x192\", \"type\": \"image/png\", \"purpose\": \"any\" },\n { \"src\": \"assets/icon-512.png\", \"sizes\": \"512x512\", \"type\": \"image/png\", \"purpose\": \"any\" },\n { \"src\": \"assets/icon-maskable-512.png\", \"sizes\": \"512x512\", \"type\": \"image/png\", \"purpose\": \"maskable\" }\n ]\n}\n",[148],"86aafe0d-f866-4e1c-a01c-d3aa479431b1","main.tsx",3,["D",1788494901499],1,"http","\nexport default async function (req: Request) {\n const out: Record = {};\n try { out.readTextFile = (await Deno.readTextFile(\"probe.txt\")).trim(); } catch (e) { out.readTextFile = \"ERR \" + e.name; }\n try { out.relUrl = new URL(\"./probe.txt\", import.meta.url).href; } catch (e) { out.relUrl = \"ERR \" + e.name; }\n try { out.fetchRel = (await (await fetch(new URL(\"./probe.txt\", import.meta.url))).text()).trim().slice(0,40); } catch (e) { out.fetchRel = \"ERR \" + e.name; }\n out.cwd = (() => { try { return Deno.cwd(); } catch (e) { return \"ERR \" + e.name; } })();\n out.hasEnv = String(typeof Deno !== \"undefined\" && !!Deno.env);\n return Response.json(out);\n}\n",[155],"9b4bc597-e6d1-4cd2-8bd4-f4407e613749","index.html","97c9a22c-a816-11f1-b5df-1607ee4eb77e",4,["D",1788495041432],"\n\n\n\n\nAyala\n\n\n\n\n\n\n\n\n\n\n\n\n

\n\n\n\n",[163],"edeb7ede-2225-4a15-8007-90e0ee120bea","assets","3cff2f08-4803-4793-967c-e0045c5a91d9",7,["D",1788495043473],"directory",[170],"pulls","branches","forks","envVars",{"_183":158,"_185":61},"connections",{"_183":61,"_184":61},"count","unfilledCount","emptyCount",{"_41":169,"_31":170,"_29":171,"_133":-5,"_39":40,"_38":172,"_135":57,"_36":343,"_13":61,"_33":174,"_34":-5,"_23":24,"_138":-5,"_209":344,"_26":345},{"_41":339,"_31":248,"_29":242,"_133":171,"_39":40,"_38":300,"_135":57,"_36":340,"_13":61,"_33":174,"_34":-5,"_23":24,"_138":-5,"_209":341,"_26":342},{"_41":335,"_31":314,"_29":308,"_133":242,"_39":40,"_38":326,"_135":57,"_36":336,"_13":61,"_33":174,"_34":-5,"_23":24,"_138":-5,"_209":337,"_26":338},{"_41":331,"_31":32,"_29":30,"_133":308,"_39":40,"_38":14,"_135":57,"_36":332,"_13":61,"_33":20,"_34":35,"_23":24,"_138":-5,"_209":333,"_26":334},{"_41":323,"_31":324,"_29":325,"_133":308,"_39":40,"_38":326,"_135":24,"_36":327,"_13":61,"_33":20,"_34":328,"_23":24,"_138":-5,"_209":329,"_26":330},{"_41":315,"_31":316,"_29":317,"_133":308,"_39":40,"_38":318,"_135":57,"_36":319,"_13":61,"_33":20,"_34":320,"_23":24,"_138":-5,"_209":321,"_26":322},{"_41":305,"_31":306,"_29":307,"_133":308,"_39":40,"_38":309,"_135":24,"_36":310,"_13":61,"_33":20,"_34":311,"_23":24,"_138":-5,"_209":312,"_26":313},{"_41":297,"_31":298,"_29":299,"_133":242,"_39":40,"_38":300,"_135":24,"_36":301,"_13":61,"_33":20,"_34":302,"_23":24,"_138":-5,"_209":303,"_26":304},{"_41":289,"_31":290,"_29":291,"_133":242,"_39":40,"_38":292,"_135":57,"_36":293,"_13":61,"_33":20,"_34":294,"_23":24,"_138":-5,"_209":295,"_26":296},{"_41":281,"_31":282,"_29":283,"_133":242,"_39":40,"_38":284,"_135":24,"_36":285,"_13":61,"_33":20,"_34":286,"_23":24,"_138":-5,"_209":287,"_26":288},{"_41":273,"_31":274,"_29":275,"_133":242,"_39":40,"_38":276,"_135":57,"_36":277,"_13":61,"_33":20,"_34":278,"_23":24,"_138":-5,"_209":279,"_26":280},{"_41":265,"_31":266,"_29":267,"_133":242,"_39":40,"_38":268,"_135":57,"_36":269,"_13":61,"_33":20,"_34":270,"_23":24,"_138":-5,"_209":271,"_26":272},{"_41":257,"_31":258,"_29":259,"_133":242,"_39":40,"_38":260,"_135":24,"_36":261,"_13":61,"_33":20,"_34":262,"_23":24,"_138":-5,"_209":263,"_26":264},{"_41":249,"_31":250,"_29":251,"_133":242,"_39":40,"_38":252,"_135":24,"_36":253,"_13":61,"_33":20,"_34":254,"_23":24,"_138":-5,"_209":255,"_26":256},{"_41":239,"_31":240,"_29":241,"_133":242,"_39":40,"_38":243,"_135":57,"_36":244,"_13":61,"_33":20,"_34":245,"_23":24,"_138":-5,"_209":246,"_26":247},{"_41":232,"_31":233,"_29":234,"_133":171,"_39":40,"_38":172,"_135":24,"_36":235,"_13":61,"_33":20,"_34":236,"_23":24,"_138":-5,"_209":237,"_26":238},{"_41":224,"_31":225,"_29":226,"_133":171,"_39":40,"_38":227,"_135":57,"_36":228,"_13":61,"_33":20,"_34":229,"_23":24,"_138":-5,"_209":230,"_26":231},{"_41":162,"_31":163,"_29":164,"_133":-5,"_39":40,"_38":165,"_135":57,"_36":221,"_13":61,"_33":20,"_34":167,"_23":24,"_138":-5,"_209":222,"_26":223},{"_41":154,"_31":155,"_29":55,"_133":-5,"_39":40,"_38":156,"_135":24,"_36":218,"_13":158,"_33":159,"_34":160,"_23":24,"_138":-5,"_209":219,"_26":220},{"_41":147,"_31":148,"_29":149,"_133":-5,"_39":40,"_38":150,"_135":57,"_36":215,"_13":61,"_33":20,"_34":152,"_23":24,"_138":-5,"_209":216,"_26":217},{"_41":140,"_31":141,"_29":142,"_133":-5,"_39":40,"_38":143,"_135":57,"_36":212,"_13":61,"_33":20,"_34":145,"_23":24,"_138":-5,"_209":213,"_26":214},{"_41":130,"_31":131,"_29":132,"_133":-5,"_39":40,"_38":134,"_135":57,"_36":208,"_13":61,"_33":20,"_34":137,"_23":24,"_138":-5,"_209":210,"_26":211},["D",1788495042886],"children",[],[131],["D",1788494900586],[],[141],["D",1788495041985],[],[148],["D",1788494901499],[],[155],["D",1788495041432],[],[163],"3cae49b4-361a-4b26-87f8-0974e273fb99","icon.svg","9a4a6d60-a816-11f1-a2ce-1607ee4eb77e",8,["D",1788495045631],"",[],[170,225],"8be0a39a-c433-4373-a2c2-e9424c5c1da1","app.css","990f39e4-a816-11f1-bd2c-1607ee4eb77e",["D",1788495043473],"/* ===========================================================================\n Ayala — design tokens\n Motion follows Emil Kowalski's rules: custom curves only, transform/opacity\n only, named properties (never `all`), <300ms for UI, reduced-motion gentler\n rather than absent.\n =========================================================================== */\n\n:root {\n /* Curves — the built-in CSS easings are too weak to read as intentional. */\n --ease-out: cubic-bezier(0.23, 1, 0.32, 1);\n --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);\n --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);\n\n /* Durations, by element class (see the animate skill's duration table). */\n --t-press: 140ms;\n --t-tap: 170ms;\n --t-pop: 200ms;\n --t-sheet: 320ms;\n\n --bg: #f5f4f2;\n --bg-elev: #ffffff;\n --bg-sunken: #eceae6;\n --text: #16161a;\n --text-dim: #6c6a72;\n --text-faint: #9b9aa2;\n --line: rgb(22 22 26 / 0.09);\n --line-strong: rgb(22 22 26 / 0.16);\n --shadow-1: 0 1px 2px rgb(22 22 26 / 0.05), 0 1px 1px rgb(22 22 26 / 0.03);\n --shadow-2: 0 4px 16px rgb(22 22 26 / 0.08), 0 1px 3px rgb(22 22 26 / 0.05);\n --shadow-3: 0 -8px 40px rgb(22 22 26 / 0.16);\n --ink: #16161a; /* primary action */\n --on-ink: #ffffff;\n --tint: rgb(22 22 26 / 0.05);\n\n --d-speech: #d2603b;\n --d-math: #3f74cc;\n --d-physical: #2f9070;\n --d-social: #b44e91;\n --d-executive: #7a5cc4;\n\n /* Sequential ramp for the map. Magnitude gets one hue; the domain colours\n above stay on labels as identity. Count text takes a foreground per step\n because no single colour stays legible across a light-to-dark ramp. */\n --s1: #cde2fb; --s2: #9ec5f4; --s3: #6da7ec; --s4: #3987e5; --s5: #1c5cab;\n --f1: #10306b; --f2: #10306b; --f3: #10306b; --f4: #ffffff; --f5: #ffffff;\n --today: #b4442e;\n\n --r-card: 14px;\n --r-lg: 20px;\n --r-pill: 999px;\n\n --pad: 16px;\n --tabbar: 62px;\n\n --font: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Segoe UI\", Roboto,\n \"Helvetica Neue\", Arial, sans-serif;\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --bg: #141416;\n --bg-elev: #1d1d20;\n --bg-sunken: #0e0e10;\n --text: #f2f1f4;\n --text-dim: #a2a0a9;\n --text-faint: #6e6c75;\n --line: rgb(255 255 255 / 0.10);\n --line-strong: rgb(255 255 255 / 0.18);\n --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);\n --shadow-2: 0 4px 16px rgb(0 0 0 / 0.45);\n --shadow-3: 0 -8px 40px rgb(0 0 0 / 0.6);\n --ink: #f2f1f4;\n --on-ink: #16161a;\n --tint: rgb(255 255 255 / 0.07);\n\n --d-speech: #e8825c;\n --d-math: #6d9bf0;\n --d-physical: #4fb794;\n --d-social: #d976b5;\n --d-executive: #a084e8;\n\n --s1: #184f95; --s2: #256abf; --s3: #2a78d6; --s4: #5598e7; --s5: #9ec5f4;\n --f1: #eaf2fe; --f2: #eaf2fe; --f3: #eaf2fe; --f4: #0e1a2b; --f5: #0e1a2b;\n --today: #e08268;\n }\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\nhtml { -webkit-text-size-adjust: 100%; }\n\nbody {\n margin: 0;\n font-family: var(--font);\n font-size: 16px;\n line-height: 1.45;\n color: var(--text);\n background: var(--bg);\n -webkit-font-smoothing: antialiased;\n overscroll-behavior-y: none;\n}\n\nbutton { font: inherit; color: inherit; }\n\nh1, h2, h3, p, ul, ol { margin: 0; }\nul, ol { padding: 0; list-style: none; }\n\n:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }\n\n/* --------------------------------------------------------------- app frame */\n\n#app { min-height: 100dvh; }\n\n.shell {\n display: flex;\n flex-direction: column;\n min-height: 100dvh;\n padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));\n}\n\n.topbar {\n position: sticky;\n top: 0;\n z-index: 20;\n display: flex;\n align-items: center;\n gap: 10px;\n padding: calc(env(safe-area-inset-top) + 10px) var(--pad) 10px;\n background: color-mix(in srgb, var(--bg) 82%, transparent);\n backdrop-filter: saturate(180%) blur(18px);\n -webkit-backdrop-filter: saturate(180%) blur(18px);\n border-bottom: 1px solid transparent;\n transition: border-color var(--t-tap) var(--ease-out);\n}\n.topbar[data-scrolled=\"1\"] { border-bottom-color: var(--line); }\n\n.topbar h1 {\n flex: 1;\n min-width: 0;\n font-size: 20px;\n font-weight: 640;\n letter-spacing: -0.02em;\n}\n.topbar .sub { display: block; font-size: 12.5px; font-weight: 450; color: var(--text-dim); letter-spacing: 0; }\n\n.main { flex: 1; padding: 4px var(--pad) 28px; }\n\n.wrap { max-width: 760px; margin: 0 auto; }\n.wrap--wide { max-width: 1100px; }\n\n/* ------------------------------------------------------------------ tabbar */\n\n.tabbar {\n position: fixed;\n left: 0; right: 0; bottom: 0;\n z-index: 30;\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n padding-bottom: env(safe-area-inset-bottom);\n background: color-mix(in srgb, var(--bg) 84%, transparent);\n backdrop-filter: saturate(180%) blur(18px);\n -webkit-backdrop-filter: saturate(180%) blur(18px);\n border-top: 1px solid var(--line);\n}\n\n.tab {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 3px;\n height: var(--tabbar);\n padding: 0;\n border: 0;\n background: none;\n color: var(--text-faint);\n font-size: 10.5px;\n font-weight: 550;\n letter-spacing: 0.01em;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n /* Navigation is used many times a day — the animate skill's frequency gate\n says near-imperceptible or nothing. Colour only, no movement. */\n transition: color var(--t-tap) ease;\n}\n.tab svg { width: 22px; height: 22px; }\n.tab[aria-current=\"page\"] { color: var(--text); }\n\n/* ------------------------------------------------------------------ button */\n\n.btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n min-height: 46px;\n padding: 0 20px;\n border: 0;\n border-radius: var(--r-pill);\n background: var(--ink);\n color: var(--on-ink);\n font-size: 15.5px;\n font-weight: 570;\n letter-spacing: -0.01em;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: transform var(--t-press) var(--ease-out), opacity var(--t-press) ease;\n}\n/* An inline SVG with only a viewBox collapses to nothing inside a flex button. */\n.btn svg { width: 18px; height: 18px; flex: none; }\n.btn:active { transform: scale(0.97); }\n.btn[disabled] { opacity: 0.38; pointer-events: none; }\n.btn--ghost { background: var(--tint); color: var(--text); }\n.btn--quiet { background: none; color: var(--text-dim); font-weight: 520; min-height: 40px; padding: 0 12px; }\n.btn--full { width: 100%; }\n.btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; }\n\n@media (hover: hover) and (pointer: fine) {\n .btn:hover { opacity: 0.88; }\n .tab:hover { color: var(--text-dim); }\n}\n\n/* -------------------------------------------------------------- skill card */\n\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n gap: 9px;\n}\n@media (min-width: 640px) { .grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 11px; } }\n\n.card {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 6px;\n min-height: 92px;\n padding: 12px 12px 11px;\n border: 0;\n border-radius: var(--r-card);\n background: var(--bg-elev);\n box-shadow: var(--shadow-1);\n color: var(--text);\n text-align: left;\n overflow: hidden;\n font-size: 13.5px;\n line-height: 1.34;\n letter-spacing: -0.005em;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n -webkit-tap-highlight-color: transparent;\n /* Interruptible transitions, not keyframes — cards are toggled rapidly. */\n transition:\n transform var(--t-tap) var(--ease-out),\n box-shadow var(--t-tap) var(--ease-out),\n opacity var(--t-tap) ease;\n}\n\n.card__cat {\n font-size: 10.5px;\n font-weight: 640;\n letter-spacing: 0.03em;\n text-transform: uppercase;\n color: var(--dom, var(--text-faint));\n}\n/* Statements run from 5 to nearly 500 characters. In the triage grid they get\n clamped so a single long one doesn't stretch its whole row; the Library\n shows them in full. */\n.card__text {\n flex: 1;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 5;\n line-clamp: 5;\n overflow: hidden;\n}\n.card--full .card__text { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }\n.card__age {\n display: flex;\n align-items: center;\n gap: 5px;\n padding-right: 26px; /* clears the check badge sitting in the corner */\n font-size: 10.5px;\n font-weight: 520;\n color: var(--text-faint);\n font-variant-numeric: tabular-nums;\n}\n\n/* In the picker, \"off\" means removed from the set, so it recedes. In the\n library, \"off\" is just \"not yet\" — the normal state of most rows. */\n.card[data-on=\"0\"] { opacity: 0.5; }\n.card--browse[data-on=\"0\"] { opacity: 1; }\n.card--browse[data-on=\"0\"] .card__text { color: var(--text); }\n.card[data-on=\"1\"] {\n /* iOS Photos: a selected thumbnail settles slightly smaller than its slot. */\n transform: scale(0.965);\n background: color-mix(in srgb, var(--dom) 6%, var(--bg-elev));\n box-shadow: var(--shadow-2), inset 0 0 0 1.5px color-mix(in srgb, var(--dom) 50%, transparent);\n}\n.card:active { transform: scale(0.955); }\n.card[data-on=\"1\"]:active { transform: scale(0.94); }\n\n.card__check {\n position: absolute;\n right: 9px; bottom: 9px;\n width: 21px; height: 21px;\n display: grid;\n place-items: center;\n border-radius: 50%;\n background: var(--dom);\n color: #fff;\n opacity: 0;\n transform: scale(0.9);\n transition: transform var(--t-pop) var(--ease-out), opacity var(--t-pop) var(--ease-out);\n}\n.card[data-on=\"1\"] .card__check { opacity: 1; transform: scale(1); }\n.card__check svg { width: 12px; height: 12px; }\n\n.card--note {\n background: var(--bg-sunken);\n box-shadow: none;\n cursor: default;\n opacity: 1;\n font-size: 13px;\n color: var(--text-dim);\n}\n.card--note:active { transform: none; }\n\n/* Entrances stagger 30–80ms apart; anything longer reads as slow. */\n@media (prefers-reduced-motion: no-preference) {\n .stagger > * {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);\n transition-delay: calc(var(--i, 0) * 34ms);\n }\n @starting-style {\n .stagger > * { opacity: 0; transform: translateY(8px); }\n }\n}\n\n/* ------------------------------------------------------------------ groups */\n\n.group { margin: 0 0 22px; }\n\n.ob .group__head { top: 0; }\n\n.group__head {\n position: sticky;\n top: calc(env(safe-area-inset-top) + 52px);\n z-index: 10;\n display: flex;\n align-items: baseline;\n gap: 8px;\n padding: 12px 2px 9px;\n /* Solid, not a gradient — a fade lets a half-row of cards show through the\n heading and reads as a rendering fault rather than an effect. */\n background: var(--bg);\n}\n.group__title { font-size: 15px; font-weight: 640; letter-spacing: -0.015em; }\n.group__count { font-size: 12.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }\n.group__all {\n margin-left: auto;\n padding: 5px 11px;\n border: 0;\n border-radius: var(--r-pill);\n background: var(--tint);\n color: var(--text-dim);\n font-size: 12.5px;\n font-weight: 560;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: transform var(--t-press) var(--ease-out);\n}\n.group__all:active { transform: scale(0.95); }\n\n.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dom); flex: none; align-self: center; }\n.dot--xs { width: 5px; height: 5px; } /* marks a library row as tracked */\n\n/* ------------------------------------------------------------------- sheet */\n\n.scrim {\n position: fixed;\n inset: 0;\n z-index: 40;\n background: rgb(0 0 0 / 0.32);\n opacity: 1;\n transition: opacity var(--t-sheet) var(--ease-out);\n}\n@starting-style { .scrim { opacity: 0; } }\n.scrim[data-closing] { opacity: 0; }\n\n.sheet {\n position: fixed;\n left: 0; right: 0; bottom: 0;\n z-index: 41;\n max-height: 86dvh;\n display: flex;\n flex-direction: column;\n padding: 8px var(--pad) calc(env(safe-area-inset-bottom) + 18px);\n border-radius: var(--r-lg) var(--r-lg) 0 0;\n background: var(--bg-elev);\n box-shadow: var(--shadow-3);\n transform: translateY(0);\n /* Drawer curve from Ionic, per the design-eng skill. */\n transition: transform var(--t-sheet) var(--ease-drawer);\n}\n@starting-style { .sheet { transform: translateY(100%); } }\n.sheet[data-closing] { transform: translateY(100%); }\n/* The whole strip is the grab target, not just the visible pill. */\n.sheet__grab {\n height: 22px;\n margin-bottom: 4px;\n display: grid;\n place-items: center;\n cursor: grab;\n touch-action: none;\n}\n.sheet__grab::before {\n content: '';\n width: 36px;\n height: 5px;\n border-radius: var(--r-pill);\n background: var(--line-strong);\n}\n.sheet__grab:active { cursor: grabbing; }\n.sheet__body { overflow-y: auto; -webkit-overflow-scrolling: touch; }\n@media (min-width: 720px) {\n .sheet { left: 50%; right: auto; width: 560px; transform: translate(-50%, 0); border-radius: var(--r-lg); bottom: 24px; }\n @starting-style { .sheet { transform: translate(-50%, 110%); } }\n .sheet[data-closing] { transform: translate(-50%, 110%); }\n}\n\n/* ------------------------------------------------------------------ pieces */\n\n.stack { display: flex; flex-direction: column; gap: 12px; }\n.row { display: flex; align-items: center; gap: 10px; }\n.spacer { flex: 1; }\n.muted { color: var(--text-dim); }\n.faint { color: var(--text-faint); }\n.small { font-size: 13px; }\n.center { text-align: center; }\n\n.panel {\n padding: 16px;\n border-radius: var(--r-lg);\n background: var(--bg-elev);\n box-shadow: var(--shadow-1);\n}\n\n.field { display: flex; flex-direction: column; gap: 6px; }\n.field label { font-size: 13px; font-weight: 560; color: var(--text-dim); }\n.field input {\n width: 100%;\n min-height: 48px;\n padding: 0 14px;\n border: 1px solid var(--line-strong);\n border-radius: 12px;\n background: var(--bg-elev);\n color: var(--text);\n font: inherit;\n font-size: 16px; /* keeps iOS from zooming on focus */\n transition: border-color var(--t-tap) ease;\n}\n.field input:focus { outline: none; border-color: var(--ink); }\n\n.bar { height: 7px; border-radius: var(--r-pill); background: var(--tint); overflow: hidden; }\n.bar > i {\n display: block;\n height: 100%;\n border-radius: inherit;\n background: var(--dom, var(--ink));\n transform-origin: left center;\n transform: scaleX(var(--v, 0));\n transition: transform 280ms var(--ease-out);\n}\n\n.pillbar { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }\n.pillbar::-webkit-scrollbar { display: none; }\n.pill {\n flex: none;\n padding: 7px 13px;\n border: 0;\n border-radius: var(--r-pill);\n background: var(--tint);\n color: var(--text-dim);\n font-size: 13px;\n font-weight: 550;\n white-space: nowrap;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: transform var(--t-press) var(--ease-out), color var(--t-tap) ease, background-color var(--t-tap) ease;\n}\n.pill:active { transform: scale(0.95); }\n.pill[aria-pressed=\"true\"] { background: var(--ink); color: var(--on-ink); }\n\n/* --------------------------------------------------------------- goal item */\n\n.goal {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n width: 100%;\n padding: 14px;\n border: 0;\n border-radius: var(--r-card);\n background: var(--bg-elev);\n box-shadow: var(--shadow-1);\n text-align: left;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: transform var(--t-press) var(--ease-out), opacity var(--t-tap) ease;\n}\n.goal:active { transform: scale(0.98); }\n.goal[data-done=\"1\"] { opacity: 0.55; }\n.goal[data-done=\"1\"] .goal__text { text-decoration: line-through; text-decoration-color: var(--text-faint); }\n\n.tick {\n flex: none;\n width: 24px; height: 24px;\n margin-top: 1px;\n display: grid;\n place-items: center;\n border-radius: 50%;\n border: 2px solid var(--line-strong);\n color: #fff;\n transition: background-color var(--t-tap) var(--ease-out), border-color var(--t-tap) var(--ease-out);\n}\n.tick svg { width: 13px; height: 13px; opacity: 0; transform: scale(0.9); transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out); }\n.goal[data-done=\"1\"] .tick,\n.tick--on { background: var(--dom); border-color: var(--dom); }\n.goal[data-done=\"1\"] .tick svg,\n.tick--on svg { opacity: 1; transform: scale(1); }\n\n.goal__body { min-width: 0; }\n.goal__text { display: block; font-size: 14.5px; line-height: 1.4; }\n.goal__meta {\n display: block;\n margin-top: 5px;\n font-size: 11px;\n font-weight: 620;\n letter-spacing: 0.045em;\n text-transform: uppercase;\n color: var(--dom);\n}\n\n/* A goal sits beside its swap button, so it has to be shrinkable. */\n.goal-row { display: flex; align-items: flex-start; gap: 8px; }\n.goal-row .goal { flex: 1; min-width: 0; width: auto; }\n.goal-row .btn { flex: none; align-self: center; }\n\n/* ------------------------------------------------------------------- toast */\n\n.goal__carried {\n margin-left: 7px;\n padding: 2px 7px;\n border-radius: var(--r-pill);\n background: var(--tint);\n color: var(--text-dim);\n font-weight: 620;\n letter-spacing: 0.03em;\n}\n\n.toast {\n position: fixed;\n left: 50%;\n bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 14px);\n z-index: 50;\n display: flex;\n align-items: center;\n gap: 8px;\n max-width: min(420px, calc(100vw - 32px));\n padding: 11px 16px;\n border-radius: var(--r-pill);\n background: var(--ink);\n color: var(--on-ink);\n font-size: 14px;\n font-weight: 540;\n box-shadow: var(--shadow-2);\n transform: translate(-50%, 0);\n opacity: 1;\n /* Exits along the path it entered, so the motion reads as one object. */\n transition: transform var(--t-pop) var(--ease-out), opacity var(--t-pop) ease;\n}\n@starting-style { .toast { transform: translate(-50%, 12px); opacity: 0; } }\n.toast[data-closing] { transform: translate(-50%, 12px); opacity: 0; }\n\n/* -------------------------------------------------------------- onboarding */\n\n.ob { display: flex; flex-direction: column; min-height: 100dvh; }\n\n/* One motion per step change, not two: the step carries its own contents in,\n which is why the cards inside it no longer stagger separately. */\n.ob__step {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);\n}\n@starting-style {\n .ob__step[data-dir=\"fwd\"] { opacity: 0; transform: translateX(16px); }\n .ob__step[data-dir=\"back\"] { opacity: 0; transform: translateX(-16px); }\n}\n.ob__head { padding: calc(env(safe-area-inset-top) + 18px) var(--pad) 6px; }\n.ob__steps { display: flex; gap: 5px; margin-bottom: 18px; }\n.ob__steps i {\n height: 3px;\n flex: 1;\n border-radius: var(--r-pill);\n background: var(--line);\n transform-origin: left center;\n transition: background-color var(--t-sheet) var(--ease-out);\n}\n.ob__steps i[data-on=\"1\"] { background: var(--ink); }\n.ob__title { font-size: 25px; font-weight: 680; letter-spacing: -0.03em; line-height: 1.16; }\n.ob__lede { margin-top: 7px; font-size: 14.5px; color: var(--text-dim); line-height: 1.45; }\n.ob__body { flex: 1; padding: 14px var(--pad) 120px; }\n.ob__foot {\n position: fixed;\n left: 0; right: 0; bottom: 0;\n z-index: 20;\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px var(--pad) calc(env(safe-area-inset-bottom) + 12px);\n background: color-mix(in srgb, var(--bg) 88%, transparent);\n backdrop-filter: saturate(180%) blur(18px);\n -webkit-backdrop-filter: saturate(180%) blur(18px);\n border-top: 1px solid var(--line);\n}\n.ob__count { font-size: 13.5px; font-weight: 560; font-variant-numeric: tabular-nums; }\n\n/* Finishing a week is a once-a-week moment — the only place in this app that\n spends any of the delight budget. */\n.week__done {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);\n}\n@starting-style {\n .week__done { opacity: 0; transform: translateY(6px); }\n}\n\n.hint {\n display: flex;\n align-items: center;\n gap: 7px;\n padding: 9px 12px;\n margin-bottom: 12px;\n border-radius: 11px;\n background: var(--tint);\n font-size: 12.5px;\n color: var(--text-dim);\n line-height: 1.35;\n}\n\n/* While painting a selection the grid must not scroll under the finger.\n The flag lands on the picker root; touch-action resolves down the ancestor\n chain, so descendants inherit the lock. (A non-passive touchmove handler\n also calls preventDefault — touch-action alone can't be changed mid-gesture.) */\n.picker[data-painting=\"1\"] { touch-action: none; }\n\n/* ----------------------------------------------------------------- desktop */\n\n@media (min-width: 900px) {\n .shell { padding-bottom: 0; }\n .tabbar {\n top: 0; bottom: 0; right: auto;\n width: 216px;\n grid-template-columns: 1fr;\n grid-auto-rows: 46px;\n align-content: start;\n gap: 2px;\n padding: calc(env(safe-area-inset-top) + 72px) 12px 12px;\n border-top: 0;\n border-right: 1px solid var(--line);\n }\n .tab {\n flex-direction: row;\n justify-content: flex-start;\n gap: 11px;\n height: 46px;\n padding: 0 12px;\n border-radius: 11px;\n font-size: 14.5px;\n font-weight: 540;\n transition: color var(--t-tap) ease, background-color var(--t-tap) ease;\n }\n .tab[aria-current=\"page\"] { background: var(--tint); }\n .topbar, .main { padding-left: calc(216px + 28px); padding-right: 28px; }\n /* Left-aligned rather than centred, so the title and the content below it\n share one left edge whatever the screen's max-width is. */\n .wrap { margin: 0; }\n .ob__body, .ob__head, .ob__foot { padding-left: 28px; padding-right: 28px; }\n .ob__body > *, .ob__head > * { max-width: 900px; }\n .group__head { top: 62px; }\n .toast { left: calc(216px + 50%); bottom: 24px; }\n}\n\n/* ------------------------------------------------------------------- map */\n\n.mapcard { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); overflow: hidden; container-type: inline-size; }\n.mapscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }\n/* Columns share whatever width the card gets, each with a floor. No viewport\n breakpoint: the card, not the window, decides. */\n.mgrid { --cols: minmax(132px, 2.6fr) repeat(7, minmax(30px, 1fr)); min-width: 0; }\n\n.mhead { display: grid; grid-template-columns: var(--cols); border-bottom: 1px solid var(--line); }\n.mhead span { padding: 10px 2px 8px; min-width: 0; text-align: center; font-size: 10.5px; font-weight: 560; color: var(--text-faint); font-variant-numeric: tabular-nums; }\n.mhead span:first-child { text-align: left; padding-left: 14px; font-size: 10px; font-weight: 640; letter-spacing: 0.06em; text-transform: uppercase; }\n\n.mbody { position: relative; }\n.mrow { display: grid; grid-template-columns: var(--cols); border-bottom: 1px solid var(--line); }\n.mrow:last-child { border-bottom: 0; }\n.mrow--cat { background: var(--bg-sunken); }\n\n.mlabel {\n display: flex; align-items: center; gap: 7px;\n min-height: 40px; min-width: 0;\n padding: 0 8px 0 12px;\n border: 0; background: none; color: inherit;\n font: 500 13px/1.25 var(--font); text-align: left;\n -webkit-tap-highlight-color: transparent;\n}\nbutton.mlabel { cursor: pointer; }\n.mlabel > span { min-width: 0; overflow-wrap: break-word; hyphens: auto; }\n.mrow--cat .mlabel { padding-left: 26px; font-size: 12px; color: var(--text-dim); }\n.mcaret { flex: none; width: 8px; height: 8px; border-right: 1.6px solid var(--text-faint); border-bottom: 1.6px solid var(--text-faint); transform: rotate(-45deg); transition: transform 180ms var(--ease-out); }\n.mrow[data-open=\"1\"] .mcaret { transform: rotate(45deg); }\n.mlabel .n { margin-left: auto; padding-left: 6px; flex: none; white-space: nowrap; font-size: 10.5px; font-weight: 520; color: var(--text-faint); font-variant-numeric: tabular-nums; }\n\n.mcell {\n position: relative; min-width: 0; min-height: 40px;\n border: 0; border-left: 1px solid var(--line); padding: 0;\n background: transparent; cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: box-shadow var(--t-tap) var(--ease-out);\n}\n.mcell[data-v=\"1\"] { background: var(--s1); }\n.mcell[data-v=\"2\"] { background: var(--s2); }\n.mcell[data-v=\"3\"] { background: var(--s3); }\n.mcell[data-v=\"4\"] { background: var(--s4); }\n.mcell[data-v=\"5\"] { background: var(--s5); }\n.mcell[data-none=\"1\"] { cursor: default; }\n.mcell[data-none=\"1\"]::after { content: \"\"; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 6px); }\n.mcell[aria-pressed=\"true\"] { box-shadow: inset 0 0 0 2px var(--text); z-index: 2; }\n@media (hover: hover) and (pointer: fine) {\n .mcell:not([data-none=\"1\"]):hover { box-shadow: inset 0 0 0 2px var(--text); z-index: 2; }\n}\n.mcell .frac { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 560; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--t-tap) ease; }\n.mcell[data-v=\"1\"] .frac { color: var(--f1); } .mcell[data-v=\"2\"] .frac { color: var(--f2); }\n.mcell[data-v=\"3\"] .frac { color: var(--f3); } .mcell[data-v=\"4\"] .frac { color: var(--f4); }\n.mcell[data-v=\"5\"] .frac { color: var(--f5); } .mcell[data-v=\"0\"] .frac { color: var(--text-faint); }\n.mgrid[data-numbers=\"1\"] .frac { opacity: 1; }\n\n.mtoday { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--today); pointer-events: none; z-index: 3; }\n.mtoday[hidden] { display: none; }\n.mtoday b { position: absolute; top: 0; transform: translate(-50%, -100%); font-size: 9.5px; font-weight: 640; letter-spacing: 0.04em; color: var(--today); white-space: nowrap; }\n\n.mlegend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 11px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-dim); }\n.mlegend .k { display: inline-flex; align-items: center; gap: 6px; }\n.ramp { display: flex; }\n.ramp i { width: 20px; height: 11px; border: 1px solid var(--line); border-left-width: 0; }\n.ramp i:first-child { border-left-width: 1px; border-radius: 3px 0 0 3px; }\n.ramp i:last-child { border-radius: 0 3px 3px 0; }\n.mlegend .dash { width: 15px; border-top: 2px dashed var(--today); }\n.mlegend .hatch { width: 14px; height: 11px; border: 1px solid var(--line); border-radius: 3px; background-image: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 6px); }\n\n@container (max-width: 560px) {\n /* Wide enough that the long Russian area names wrap between words rather\n than breaking mid-word; the seven columns still fit a 375px phone. */\n .mgrid { --cols: minmax(146px, 2.6fr) repeat(7, minmax(27px, 1fr)); }\n .mlabel { font-size: 11.5px; padding-left: 9px; gap: 5px; }\n .mrow--cat .mlabel { padding-left: 18px; font-size: 11px; }\n .mlabel .n { display: none; }\n .mhead span { font-size: 9.5px; letter-spacing: -0.02em; }\n .mhead span:first-child { padding-left: 9px; font-size: 9.5px; }\n .mcell .frac { font-size: 9px; }\n}\n@container (max-width: 340px) {\n .mgrid { --cols: minmax(116px, 2.4fr) repeat(7, minmax(24px, 1fr)); }\n .mlabel { font-size: 11px; }\n}\n\n/* ---------------------------------------------------------- reduced motion */\n/* Fewer and gentler, not zero: colour and opacity stay, movement goes. */\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n transition-duration: 120ms !important;\n transition-timing-function: ease !important;\n animation: none !important;\n }\n .card[data-on=\"1\"], .card:active, .btn:active, .goal:active, .pill:active, .group__all:active { transform: none; }\n /* Keep the fade, drop the travel. */\n .ob__step, .week__done { transition-property: opacity !important; }\n .sheet { transition-property: opacity; }\n .stagger > * { transition-delay: 0ms !important; }\n}\n\n/* Exit faster than enter — the system responding should outpace the user\n deciding (design-eng: asymmetric enter/exit timing). */\n.sheet[data-closing], .scrim[data-closing] { transition-duration: 230ms; }\n.toast[data-closing] { transition-duration: 150ms; }\n",[],[170,233],"d0388067-e960-4c83-9cdf-3158e270e2f1","ui.js","9d60366a-a816-11f1-aaad-1607ee4eb77e","1d35a998-6869-4f35-a1c5-0e90b07472b3",16,["D",1788495050815],"// Small DOM helpers. No framework — the app is five screens.\n\nimport { spring, project, rubberBand, prefersReducedMotion } from './spring.js';\n\nexport function el(tag, props = {}, ...children) {\n const node = document.createElement(tag);\n for (const [k, v] of Object.entries(props ?? {})) {\n if (v == null || v === false) continue;\n if (k === 'class') node.className = v;\n else if (k === 'html') node.innerHTML = v;\n else if (k === 'text') node.textContent = v;\n else if (k === 'style') node.setAttribute('style', v);\n else if (k === 'dataset') Object.assign(node.dataset, v);\n else if (k.startsWith('on')) node.addEventListener(k.slice(2).toLowerCase(), v);\n else node.setAttribute(k, v === true ? '' : v);\n }\n for (const c of children.flat(9)) {\n if (c == null || c === false) continue;\n node.append(c.nodeType ? c : document.createTextNode(String(c)));\n }\n return node;\n}\n\nexport const clear = (node) => { while (node.firstChild) node.firstChild.remove(); return node; };\n\n/** Keep tracking when the pointer leaves the element. Throws for a pointer the\n * browser no longer knows about, which is not worth failing a gesture over. */\nexport const capture = (node, pointerId) => {\n try { node.setPointerCapture(pointerId); } catch { /* pointer already gone */ }\n};\n\nconst svg = (d, extra = '') =>\n ``;\n\nexport const ICON = {\n week: svg(''),\n progress: svg(''),\n map: svg(''),\n library: svg(''),\n settings: svg(''),\n check: svg('', 'stroke-width=\"3\"'),\n swap: svg(''),\n plus: svg(''),\n close: svg(''),\n chevron: svg(''),\n search: svg(''),\n};\n\n/* ------------------------------------------------------------------ toast */\n\nlet toastNode = null;\nlet toastTimer = null;\n\nexport function toast(message) {\n clearTimeout(toastTimer);\n if (toastNode) { toastNode.remove(); toastNode = null; }\n toastNode = el('div', { class: 'toast', role: 'status' }, message);\n document.body.append(toastNode);\n const node = toastNode;\n toastTimer = setTimeout(() => {\n node.dataset.closing = '1';\n node.addEventListener('transitionend', () => node.remove(), { once: true });\n setTimeout(() => node.remove(), 400);\n if (toastNode === node) toastNode = null;\n }, 2200);\n}\n\n/* ------------------------------------------------------------------ sheet */\n\nlet activeSheetClose = null;\n\n/** Dispose of any open sheet through its own teardown, which detaches the\n * document-level keydown handler. Removing the nodes directly would not. */\nexport function closeSheets({ instant = true } = {}) {\n activeSheetClose?.({ instant });\n activeSheetClose = null;\n}\n\nconst DISMISS_FRACTION = 0.4; // of sheet height, measured against the projected rest\nconst FLICK_VELOCITY = 550; // px/s downward that dismisses regardless of distance\nconst ENGAGE_SLOP = 6; // px of downward travel before a body drag takes over\n\n/** openSheet(build) — build(close) returns the sheet's body content. */\nexport function openSheet(build) {\n // Only one sheet at a time; a stale one left behind would keep its handlers.\n closeSheets();\n\n const scrim = el('div', { class: 'scrim' });\n const sheet = el('div', { class: 'sheet', role: 'dialog', 'aria-modal': 'true' });\n const grab = el('div', { class: 'sheet__grab' });\n const body = el('div', { class: 'sheet__body' });\n\n let removed = false;\n const remove = () => {\n if (removed) return;\n removed = true;\n document.removeEventListener('keydown', onKey);\n sheet.remove();\n scrim.remove();\n };\n\n /** The scripted close: hands back to the CSS transition. */\n const close = ({ instant = false } = {}) => {\n if (sheet.dataset.closing || removed) return;\n anim?.stop();\n anim = null;\n // End any gesture in flight, or the pointerup that follows would start a\n // fresh spring and drag the closing sheet back into view.\n dragging = false;\n pending = false;\n pointerId = null;\n if (activeSheetClose === close) activeSheetClose = null;\n if (instant) { remove(); return; }\n sheet.style.transition = '';\n sheet.style.transform = '';\n sheet.dataset.closing = '1';\n scrim.dataset.closing = '1';\n document.removeEventListener('keydown', onKey);\n setTimeout(remove, 260);\n };\n\n const onKey = (e) => { if (e.key === 'Escape') close(); };\n scrim.addEventListener('pointerdown', () => close());\n document.addEventListener('keydown', onKey);\n\n /* --------------------------------------------------------------- gesture */\n\n // On a wide screen the sheet is centred, so its resting transform already\n // carries an X offset that every drag frame has to preserve.\n const offsetX = () => (window.matchMedia('(min-width: 720px)').matches ? '-50%' : '0px');\n\n let anim = null; // running spring, if any\n let dragging = false; // tracking the finger 1:1\n let pending = false; // touched the body at scrollTop 0, not yet engaged\n let pointerId = null;\n let startY = 0;\n let baseY = 0; // where the sheet was when this gesture began\n let y = 0;\n let trail = []; // recent {t, y} samples, for release velocity\n let height = 1; // measured once per gesture, see measure()\n let tx = '0px'; // ditto for the centring offset on wide screens\n\n // Reading offsetHeight inside draw() would force a layout flush on every\n // frame, right after writing transform. Neither value changes mid-gesture.\n const measure = () => {\n height = sheet.offsetHeight || 1;\n tx = offsetX();\n };\n\n const draw = (value) => {\n y = value;\n sheet.style.transform = `translate(${tx}, ${value}px)`;\n scrim.style.opacity = String(Math.max(0, 1 - value / height));\n };\n\n const settle = () => {\n // Back to rest: drop the inline overrides so CSS owns the sheet again.\n sheet.style.transition = '';\n sheet.style.transform = '';\n scrim.style.opacity = '';\n y = 0;\n };\n\n /** Release into a spring — dismissing, or springing back to rest. */\n const release = (velocity) => {\n const h = height;\n const projected = y + project(velocity);\n const dismiss = velocity > FLICK_VELOCITY || projected > h * DISMISS_FRACTION;\n\n if (prefersReducedMotion()) {\n if (dismiss) { draw(h); scrim.style.opacity = '0'; setTimeout(remove, 120); }\n else settle();\n return;\n }\n\n anim = spring({\n from: y,\n to: dismiss ? h : 0,\n velocity,\n // Bounce is only earned when the gesture itself carried momentum.\n damping: dismiss ? 1 : Math.abs(velocity) > 60 ? 0.8 : 1,\n response: 0.3,\n onUpdate: draw,\n onRest: () => { anim = null; if (dismiss) remove(); else settle(); },\n });\n };\n\n const velocityFromTrail = () => {\n const now = performance.now();\n const recent = trail.filter((p) => now - p.t < 100);\n if (recent.length < 2) return 0;\n const a = recent[0];\n const b = recent[recent.length - 1];\n const dt = (b.t - a.t) / 1000;\n return dt > 0 ? (b.y - a.y) / dt : 0;\n };\n\n const engage = (e) => {\n dragging = true;\n pending = false;\n measure();\n trail = [{ t: performance.now(), y }];\n sheet.style.transition = 'none';\n capture(sheet, e.pointerId);\n };\n\n sheet.addEventListener('pointerdown', (e) => {\n if (pointerId !== null) return; // ignore extra fingers mid-drag\n if (e.button != null && e.button !== 0) return;\n if (e.target.closest('button, a, input, select, textarea')) return;\n\n pointerId = e.pointerId;\n startY = e.clientY;\n\n // An interrupted animation resumes from where it is, carrying its velocity.\n if (anim) {\n const { x, v } = anim.stop();\n anim = null;\n baseY = x;\n draw(x);\n engage(e);\n trail = [{ t: performance.now(), y: x }, { t: performance.now() + 1, y: x + v / 1000 }];\n return;\n }\n\n baseY = y;\n const inBody = body.contains(e.target);\n if (!inBody || body.scrollTop <= 0) {\n // The grab handle drags at once; the body waits to see which way you go,\n // so an upward flick still scrolls the list.\n if (inBody) pending = true;\n else engage(e);\n }\n });\n\n sheet.addEventListener('pointermove', (e) => {\n if (e.pointerId !== pointerId) return;\n const dy = e.clientY - startY;\n\n if (pending) {\n if (dy > ENGAGE_SLOP) engage(e);\n else if (dy < -ENGAGE_SLOP) { pending = false; pointerId = null; }\n else return;\n }\n if (!dragging) return;\n\n // Down tracks the finger exactly; up meets increasing resistance rather\n // than a wall.\n const raw = baseY + dy;\n draw(raw >= 0 ? raw : -rubberBand(-raw));\n trail.push({ t: performance.now(), y });\n if (trail.length > 8) trail.shift();\n });\n\n const end = (e) => {\n if (e.pointerId !== pointerId) return;\n pointerId = null;\n if (pending) { pending = false; return; }\n if (!dragging) return;\n dragging = false;\n release(velocityFromTrail());\n };\n\n sheet.addEventListener('pointerup', end);\n sheet.addEventListener('pointercancel', end);\n\n // Non-passive: while the sheet is following the finger the page must not\n // scroll underneath it.\n sheet.addEventListener('touchmove', (e) => { if (dragging) e.preventDefault(); }, { passive: false });\n\n body.append(build(close));\n sheet.append(grab, body);\n document.body.append(scrim, sheet);\n measure();\n activeSheetClose = close;\n return close;\n}\n\n/* ----------------------------------------------------------------- misc */\n\nexport const cssVar = (name) => getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n\n/** Ask the OS for a light tap, where the platform offers one. */\nexport function haptic(ms = 8) {\n if (navigator.vibrate) { try { navigator.vibrate(ms); } catch { /* ignore */ } }\n}\n",[],[170,248,240],"js","a0f4e083-f872-4a1f-8bba-1689db42a6ae","sync.js","9d1111d4-a816-11f1-b2d0-1607ee4eb77e",15,["D",1788495050292],"// Sync with the hosting val, so several people on several devices share one\n// record.\n//\n// The passphrase lives in localStorage on each device — typed once, per\n// person. It is never in the page source (the val is public); the server holds\n// the real value in an environment variable and this only ever sends it.\n//\n// Every pull merges rather than replaces, so a device that has been offline\n// cannot overwrite what anyone else recorded meanwhile. See store.merge.\n\nimport * as store from './store.js';\n\nconst PASS_KEY = 'ayala.sync.pass';\nconst ENDPOINT = '/api/state';\nconst PUSH_DEBOUNCE = 1500;\n\nlet status = 'off'; // off | ready | syncing | error | locked | unconfigured\nlet detail = '';\nconst watchers = new Set();\n\nexport const getStatus = () => ({ status, detail });\nexport const onStatus = (fn) => { watchers.add(fn); return () => watchers.delete(fn); };\nconst set = (s, d = '') => { status = s; detail = d; watchers.forEach((f) => f(getStatus())); };\n\nexport const passphrase = () => {\n try { return localStorage.getItem(PASS_KEY) ?? ''; } catch { return ''; }\n};\nexport function setPassphrase(v) {\n try { v ? localStorage.setItem(PASS_KEY, v) : localStorage.removeItem(PASS_KEY); } catch { /* ignore */ }\n set(v ? 'ready' : 'off');\n}\n\nasync function call(method, body) {\n const pass = passphrase();\n if (!pass) { set('off'); return null; }\n const res = await fetch(ENDPOINT, {\n method,\n headers: { authorization: `Bearer ${pass}`, ...(body ? { 'content-type': 'application/json' } : {}) },\n body: body ? JSON.stringify(body) : undefined,\n });\n if (res.status === 401) { set('locked', 'passphrase'); return null; }\n if (res.status === 429) { set('error', 'rate limited'); return null; }\n if (res.status === 503) { set('unconfigured'); return null; }\n if (!res.ok) { set('error', `http ${res.status}`); return null; }\n return res.json();\n}\n\n/** Fetch the shared record and fold it into this device's copy. */\nexport async function pull() {\n if (!passphrase()) return false;\n set('syncing');\n try {\n const out = await call('GET');\n if (!out) return false;\n if (out.record) store.mergeIn(out.record);\n set('ready');\n return true;\n } catch (err) {\n // Offline is normal for a PWA; it is not an error worth shouting about.\n set('error', String(err?.message ?? err));\n return false;\n }\n}\n\n/** Send this device's copy up. Always merge-then-push, never blind write. */\nexport async function push() {\n if (!passphrase()) return false;\n set('syncing');\n try {\n const remote = await call('GET');\n if (!remote) return false;\n const merged = remote.record ? store.mergeIn(remote.record) : store.get();\n const out = await call('PUT', { record: merged });\n if (!out) return false;\n set('ready');\n return true;\n } catch (err) {\n set('error', String(err?.message ?? err));\n return false;\n }\n}\n\nlet timer = null;\nconst schedulePush = () => {\n clearTimeout(timer);\n timer = setTimeout(() => { push(); }, PUSH_DEBOUNCE);\n};\n\n/** Pull once on open, then push on a quiet moment after each change. */\nexport function start() {\n if (!passphrase()) { set('off'); return; }\n set('ready');\n pull();\n store.subscribe(schedulePush);\n // Coming back to the app is the moment someone else's change is most likely\n // to be waiting.\n document.addEventListener('visibilitychange', () => { if (!document.hidden) pull(); });\n addEventListener('online', () => pull());\n}\n",[],[170,248,250],"e45eea25-4d73-4968-9d63-bbdf44c5691e","store.js","9cc31d58-a816-11f1-981e-1607ee4eb77e",14,["D",1788495049784],"// One child, one device — so localStorage is the whole persistence layer.\n// Everything lives under a single key so export/import is a straight copy.\n\nconst KEY = 'ayala.v1';\n\nconst EMPTY = {\n v: 1,\n lang: 'ru',\n child: { name: '', birth: '' },\n tracked: {}, // id -> true (the set chosen during onboarding)\n can: {}, // id -> ISO date (marked as \"can already do\")\n weeks: {}, // 'YYYY-Www' -> { goals: [id], done: { id: ISO } }\n onboarded: false,\n};\n\nconst listeners = new Set();\nlet state = load();\n\nfunction load() {\n try {\n const raw = localStorage.getItem(KEY);\n if (!raw) return structuredClone(EMPTY);\n const parsed = JSON.parse(raw);\n return { ...structuredClone(EMPTY), ...parsed };\n } catch {\n return structuredClone(EMPTY);\n }\n}\n\nfunction persist() {\n try {\n localStorage.setItem(KEY, JSON.stringify(state));\n } catch (err) {\n // Private mode, quota, or blocked site data: the app still works for this\n // session, it just won't survive a reload.\n console.warn('Could not save:', err);\n }\n}\n\nexport const get = () => state;\nexport const subscribe = (fn) => { listeners.add(fn); return () => listeners.delete(fn); };\n\nexport function update(fn) {\n const next = fn(state);\n if (next) state = next;\n state.updatedAt = new Date().toISOString();\n persist();\n listeners.forEach((l) => l(state));\n}\n\n/* ------------------------------------------------------------------ weeks */\n\n// ISO-8601 week key. Weeks start Monday, which is when goals roll over.\nexport function weekKey(d = new Date()) {\n const t = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));\n const day = t.getUTCDay() || 7; // Sunday counts as 7\n t.setUTCDate(t.getUTCDate() + 4 - day); // move to the week's Thursday\n const jan1 = new Date(Date.UTC(t.getUTCFullYear(), 0, 1));\n const week = Math.ceil(((t - jan1) / 86400000 + 1) / 7);\n return `${t.getUTCFullYear()}-W${String(week).padStart(2, '0')}`;\n}\n\n/** The most recent past week that actually had goals, or null. */\nexport function lastPlannedWeek() {\n const now = weekKey();\n const past = Object.keys(state.weeks).filter((k) => k < now && state.weeks[k].goals?.length).sort();\n return past.length ? { key: past.at(-1), ...state.weeks[past.at(-1)] } : null;\n}\n\n/** True once this week has a record — the guard that keeps rollover one-shot. */\nexport const weekPlanned = () => Boolean(state.weeks[weekKey()]);\n\nexport const thisWeek = () => state.weeks[weekKey()] ?? { goals: [], done: {} };\n\nexport function setWeek(patch) {\n update((s) => {\n const k = weekKey();\n const cur = s.weeks[k] ?? { goals: [], done: {} };\n const next = { ...cur, ...patch };\n // Setting something as a goal is the same as saying you track it, so the\n // progress totals stay honest when a goal came from outside the set.\n if (patch.goals) {\n s.tracked = { ...s.tracked };\n for (const id of patch.goals) s.tracked[id] = true;\n }\n s.weeks = { ...s.weeks, [k]: next };\n return s;\n });\n}\n\n/* --------------------------------------------------------------- mutators */\n\n/**\n * Apply a selection within a scope. Ids inside `scope` end up exactly as\n * `ids` says; anything outside is left alone. Re-running onboarding at a\n * later age therefore rewrites that age band without erasing what came\n * before — without a scope these would wipe the whole history.\n */\nfunction applyScoped(map, ids, scope, value) {\n const next = { ...map };\n for (const id of scope ?? Object.keys(next)) delete next[id];\n for (const id of ids) next[id] = value(id);\n return next;\n}\n\nexport function setTracked(ids, scope) {\n update((s) => {\n s.tracked = applyScoped(s.tracked, ids, scope, () => true);\n return s;\n });\n}\n\nexport function setCan(ids, scope) {\n update((s) => {\n const now = new Date().toISOString();\n s.can = applyScoped(s.can, ids, scope, (id) => s.can[id] ?? now);\n return s;\n });\n}\n\nexport function toggleCan(id, on) {\n update((s) => {\n const can = { ...s.can };\n if (on ?? !can[id]) can[id] = can[id] ?? new Date().toISOString();\n else delete can[id];\n s.can = can;\n return s;\n });\n}\n\nexport function toggleGoalDone(id) {\n update((s) => {\n const k = weekKey();\n const cur = s.weeks[k] ?? { goals: [], done: {} };\n const done = { ...cur.done };\n const can = { ...s.can };\n if (done[id]) {\n delete done[id];\n // Un-ticking is an explicit \"not yet\", so it has to undo the mastery\n // mark that ticking set — otherwise Progress keeps counting it.\n delete can[id];\n } else {\n done[id] = new Date().toISOString();\n // Completing a weekly goal is the same claim as \"she can do this\".\n can[id] = can[id] ?? done[id];\n }\n s.can = can;\n s.weeks = { ...s.weeks, [k]: { ...cur, done } };\n return s;\n });\n}\n\nconst WEEK_MS = 7 * 86400000;\nconst MAX_STREAK = 520; // ten years; a guard, not a real limit\n\nexport const streak = () => {\n const completed = (d) => Object.keys(state.weeks[weekKey(d)]?.done ?? {}).length > 0;\n let d = new Date();\n // The current week always has a record once rollover has run, so an empty\n // one means \"in progress\", not \"streak broken\" — step past it.\n if (!completed(d)) d = new Date(d - WEEK_MS);\n let n = 0;\n // Walking back a week at a time is what makes this adjacency-aware: a month\n // with no records ends the streak instead of being skipped over.\n while (n < MAX_STREAK && completed(d)) { n++; d = new Date(d - WEEK_MS); }\n return n;\n};\n\n/* ------------------------------------------------------------------ merge */\n\n/**\n * Combine two records without letting either side lose a mark.\n *\n * Last-write-wins is wrong here: mark three things on the phone, then save\n * from a laptop holding yesterday's copy, and the three marks vanish. Almost\n * everything in this shape merges cleanly instead:\n *\n * tracked union — anything either side tracks stays tracked\n * can union, keeping the EARLIER stamp; the first time she did\n * it is the true date, and a later device re-observing it\n * must not move the date forward\n * weeks[].done same, per week\n * weeks[].goals last-write-wins per week; losing a goal edit costs nothing,\n * losing a mastery mark costs the record\n * child/lang last-write-wins\n *\n * Order-independent, so it is safe against an eventually-consistent store and\n * safe to apply twice.\n */\nexport function merge(a, b) {\n const older = (x, y) => (!x ? y : !y ? x : x < y ? x : y);\n const newer = (x, y) => (!x ? y : !y ? x : x > y ? x : y);\n\n const weeks = {};\n for (const k of new Set([...Object.keys(a.weeks ?? {}), ...Object.keys(b.weeks ?? {})])) {\n const wa = a.weeks?.[k] ?? {};\n const wb = b.weeks?.[k] ?? {};\n const done = { ...wa.done };\n for (const [id, at] of Object.entries(wb.done ?? {})) done[id] = older(done[id], at);\n // Whichever week was touched most recently owns its goal list.\n const lastA = Object.values(wa.done ?? {}).sort().at(-1) ?? '';\n const lastB = Object.values(wb.done ?? {}).sort().at(-1) ?? '';\n const goals = (wb.goals && lastB >= lastA ? wb.goals : wa.goals) ?? wb.goals ?? [];\n const carried = (wb.goals && lastB >= lastA ? wb.carried : wa.carried) ?? [];\n weeks[k] = { goals, done, carried };\n }\n\n const can = { ...a.can };\n for (const [id, at] of Object.entries(b.can ?? {})) can[id] = older(can[id], at);\n\n return {\n ...a,\n ...b,\n child: (b.child?.birth ? b.child : a.child) ?? {},\n tracked: { ...a.tracked, ...b.tracked },\n can,\n weeks,\n onboarded: Boolean(a.onboarded || b.onboarded),\n updatedAt: newer(a.updatedAt, b.updatedAt) ?? new Date().toISOString(),\n };\n}\n\n/** Fold a remote record into the local one and persist the result. */\nexport function mergeIn(remote) {\n update((s) => merge(s, remote));\n return state;\n}\n\n/* ---------------------------------------------------------- export/import */\n\nexport function exportJSON() {\n return JSON.stringify(state, null, 2);\n}\n\nconst isMap = (o) => Boolean(o) && typeof o === 'object' && !Array.isArray(o);\n\n/** Throws `BAD_FILE` for anything that isn't one of our exports. Importing\n * replaces everything, so guessing here would silently destroy the data. */\nexport function importJSON(text) {\n let parsed;\n try { parsed = JSON.parse(text); } catch { throw new Error('BAD_FILE'); }\n if (!isMap(parsed)) throw new Error('BAD_FILE');\n\n const wrongShape = ['tracked', 'can', 'weeks', 'child']\n .some((k) => parsed[k] !== undefined && !isMap(parsed[k]));\n const ours = parsed.v === EMPTY.v\n || (isMap(parsed.tracked) && isMap(parsed.can) && isMap(parsed.weeks));\n if (wrongShape || !ours) throw new Error('BAD_FILE');\n\n update(() => ({ ...structuredClone(EMPTY), ...parsed }));\n}\n\nexport function reset() {\n update(() => structuredClone(EMPTY));\n}\n",[],[170,248,258],"6c7ccc88-72b6-4b62-b4d0-a59fd08ebaa7","spring.js","9c6fd80a-a816-11f1-af98-1607ee4eb77e",13,["D",1788495049231],"// A small spring integrator, parameterised the way Apple's design talks do it\n// (damping ratio + response) rather than mass/stiffness/damping.\n//\n// damping 1.0 = critically damped, settles without overshoot\n// 0.8 = a little bounce — only earn it with a gesture that carried\n// momentum, per apple-design\n// response roughly how long it takes to reach the target, in seconds\n//\n// It animates from wherever the value is now and accepts an initial velocity,\n// which is what makes a release continue at the finger's exact speed instead\n// of restarting from zero.\n\nconst REST_DISTANCE = 0.4; // px\nconst REST_VELOCITY = 8; // px/s\nconst MAX_FRAME = 0.064; // clamp dt so a backgrounded tab can't explode\nconst SUB_STEP = 0.004; // fixed sub-steps keep stiff springs stable\n\nexport function spring({ from, to, velocity = 0, damping = 1, response = 0.4, onUpdate, onRest }) {\n const w0 = (2 * Math.PI) / response;\n let x = from;\n let v = velocity;\n let last = performance.now();\n let raf = 0;\n let stopped = false;\n\n const frame = (now) => {\n if (stopped) return;\n const dt = Math.min((now - last) / 1000, MAX_FRAME);\n last = now;\n\n const steps = Math.max(1, Math.ceil(dt / SUB_STEP));\n const h = dt / steps;\n for (let i = 0; i < steps; i++) {\n const a = -w0 * w0 * (x - to) - 2 * damping * w0 * v;\n v += a * h;\n x += v * h;\n }\n\n if (Math.abs(x - to) < REST_DISTANCE && Math.abs(v) < REST_VELOCITY) {\n onUpdate(to, 0);\n stopped = true;\n onRest?.();\n return;\n }\n onUpdate(x, v);\n raf = requestAnimationFrame(frame);\n };\n\n raf = requestAnimationFrame(frame);\n\n return {\n /** Current value and velocity — what an interrupting gesture picks up from. */\n state: () => ({ x, v }),\n stop() { stopped = true; cancelAnimationFrame(raf); return { x, v }; },\n };\n}\n\n/**\n * Where a flick would come to rest, from UIScrollView's deceleration model.\n * Apple's `Designing Fluid Interfaces` sample code, verbatim.\n * @param velocity px/s\n */\nexport const project = (velocity, decelerationRate = 0.998) =>\n ((velocity / 1000) * decelerationRate) / (1 - decelerationRate);\n\n/** Resistance past a boundary — the further you pull, the less it gives. */\nexport const rubberBand = (offset, dimension = 400, constant = 0.55) =>\n (1 - 1 / ((offset * constant) / dimension + 1)) * dimension;\n\nexport const prefersReducedMotion = () =>\n window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n",[],[170,248,266],"59c8327e-9ec6-476b-9e43-ea99300e26d4","picker.js","9c1c9a28-a816-11f1-b2d0-1607ee4eb77e",12,["D",1788495048688],"// The multi-select grid.\n//\n// Modelled on the iOS Photos selection gesture, using the principles from the\n// apple-design skill: feedback lands on pointer-down (the press state), the\n// selection tracks the finger 1:1 while painting, and the gesture can be\n// reversed or interrupted at any point.\n//\n// Touch needs a short press before painting begins, because the same downward\n// drag is also how you scroll. Once painting starts we block scroll by calling\n// preventDefault on a non-passive touchmove — changing `touch-action` mid\n// gesture would not apply to the gesture already in flight. A mouse has no\n// such conflict, so it paints from the first move.\n\nimport { el, ICON, haptic, capture } from './ui.js';\nimport { fmtBand } from './i18n.js';\n\nconst HOLD_MS = 130; // press before painting begins (touch only)\nconst MOVE_SLOP = 10; // px of movement that still counts as \"held still\"\nconst EDGE = 72; // auto-scroll zone at the top and bottom edges\nconst EDGE_SPEED = 14; // px per frame at the very edge\n\nexport function createPicker({ groups, lang, selected, onChange, showCategory = false }) {\n const sel = selected instanceof Set ? selected : new Set(selected ?? []);\n const cards = new Map(); // id -> element\n // Window-level listeners outlive the grid unless something revokes them, and\n // a new picker is built on every onboarding step render.\n const ac = new AbortController();\n\n const grid = el('div', { class: 'picker' });\n\n const emit = () => onChange?.(sel);\n\n const paint = (id, on) => {\n if (on === sel.has(id)) return false;\n if (on) sel.add(id); else sel.delete(id);\n const node = cards.get(id);\n if (node) {\n node.dataset.on = on ? '1' : '0';\n node.setAttribute('aria-pressed', on ? 'true' : 'false');\n }\n return true;\n };\n\n /* ------------------------------------------------------------- rendering */\n\n for (const g of groups) {\n const gridEl = el('div', { class: 'grid' });\n const head = el('div', { class: 'group__head' },\n el('i', { class: 'dot', style: `--dom: var(--d-${g.domain})` }),\n el('h3', { class: 'group__title' }, g.category),\n el('span', { class: 'group__count' }),\n );\n const allBtn = el('button', { class: 'group__all', type: 'button' });\n head.append(allBtn);\n\n const ids = g.items.map((s) => s.id);\n const refreshHead = () => {\n const n = ids.filter((id) => sel.has(id)).length;\n head.querySelector('.group__count').textContent = `${n}/${ids.length}`;\n allBtn.textContent = n === ids.length ? '—' : '✓';\n allBtn.setAttribute('aria-label', n === ids.length ? 'Clear section' : 'Select section');\n };\n allBtn.addEventListener('click', () => {\n const on = ids.filter((id) => sel.has(id)).length !== ids.length;\n let changed = false;\n for (const id of ids) changed = paint(id, on) || changed;\n if (changed) { refreshHead(); emit(); haptic(); }\n });\n\n for (const [i, s] of g.items.entries()) {\n const card = el('button', {\n type: 'button',\n class: 'card',\n style: `--dom: var(--d-${s.domain}); --i: ${Math.min(i, 12)}`,\n dataset: { id: s.id, on: sel.has(s.id) ? '1' : '0' },\n 'aria-pressed': sel.has(s.id) ? 'true' : 'false',\n },\n showCategory && el('span', { class: 'card__cat' }, s.category[lang] ?? s.category.en),\n el('span', { class: 'card__text' }, s.text[lang] ?? s.text.en),\n el('span', { class: 'card__age' }, fmtBand(s.fromMonths, s.toMonths)),\n el('span', { class: 'card__check', html: ICON.check }),\n );\n cards.set(s.id, card);\n gridEl.append(card);\n }\n\n refreshHead();\n grid.append(el('section', { class: 'group' }, head, gridEl));\n g._refreshHead = refreshHead;\n }\n\n const refreshHeads = () => groups.forEach((g) => g._refreshHead?.());\n\n /* -------------------------------------------------------------- gesture */\n\n let mode = null; // 'on' | 'off' while painting\n let painting = false;\n let pending = null; // { id, x, y, timer, pointerId } before painting starts\n let touched = new Set(); // ids already painted in this gesture\n let autoScroll = 0;\n let rafId = 0;\n\n const cardAt = (x, y) => document.elementFromPoint(x, y)?.closest?.('.card');\n\n const startPaint = (id) => {\n painting = true;\n touched = new Set();\n mode = sel.has(id) ? 'off' : 'on';\n grid.dataset.painting = '1';\n applyAt(id);\n haptic(10);\n };\n\n const applyAt = (id) => {\n if (!id || touched.has(id)) return;\n touched.add(id);\n if (paint(id, mode === 'on')) { refreshHeads(); emit(); haptic(6); }\n };\n\n const stopPaint = () => {\n painting = false;\n mode = null;\n autoScroll = 0;\n delete grid.dataset.painting;\n if (rafId) { cancelAnimationFrame(rafId); rafId = 0; }\n };\n\n const clearPending = () => {\n if (pending?.timer) clearTimeout(pending.timer);\n pending = null;\n };\n\n const tickScroll = () => {\n rafId = 0;\n if (!painting || !autoScroll) return;\n window.scrollBy(0, autoScroll);\n rafId = requestAnimationFrame(tickScroll);\n };\n\n grid.addEventListener('pointerdown', (e) => {\n if (e.button != null && e.button !== 0) return;\n // One gesture at a time. A second finger landing mid-gesture used to\n // overwrite `pending` and orphan the first finger's hold timer, so both\n // cards toggled.\n if (pending || painting) return;\n const card = e.target.closest('.card');\n if (!card || card.classList.contains('card--note')) return;\n const id = card.dataset.id;\n\n if (e.pointerType === 'touch') {\n // Hold briefly, then paint. A tap still toggles on release.\n pending = {\n id, x: e.clientX, y: e.clientY, pointerId: e.pointerId,\n timer: setTimeout(() => { pending = null; startPaint(id); }, HOLD_MS),\n };\n } else {\n e.preventDefault();\n startPaint(id);\n capture(grid, e.pointerId);\n }\n });\n\n grid.addEventListener('pointermove', (e) => {\n if (pending) {\n // Moved before the hold completed — this is a scroll, not a selection.\n if (Math.hypot(e.clientX - pending.x, e.clientY - pending.y) > MOVE_SLOP) clearPending();\n return;\n }\n if (!painting) return;\n applyAt(cardAt(e.clientX, e.clientY)?.dataset.id);\n\n // Ease into an auto-scroll near the edges rather than stopping dead there.\n const top = e.clientY - EDGE;\n const bottom = e.clientY - (window.innerHeight - EDGE);\n autoScroll = top < 0 ? Math.round((top / EDGE) * EDGE_SPEED)\n : bottom > 0 ? Math.round((bottom / EDGE) * EDGE_SPEED) : 0;\n if (autoScroll && !rafId) rafId = requestAnimationFrame(tickScroll);\n });\n\n const end = (e) => {\n if (pending && e?.pointerId !== undefined && e.pointerId !== pending.pointerId) return;\n if (pending) {\n // Released before the hold completed: a plain tap.\n const id = pending.id;\n clearPending();\n if (paint(id, !sel.has(id))) { refreshHeads(); emit(); haptic(); }\n return;\n }\n if (painting) { e?.preventDefault?.(); stopPaint(); }\n };\n\n grid.addEventListener('pointerup', end);\n grid.addEventListener('pointercancel', () => { clearPending(); stopPaint(); });\n window.addEventListener('blur', () => { clearPending(); stopPaint(); }, { signal: ac.signal });\n\n // Non-passive so painting can suppress the page scroll under the finger.\n grid.addEventListener('touchmove', (e) => {\n if (painting) e.preventDefault();\n }, { passive: false });\n\n // The cards are

Diff · v20