Ayala

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_253":254,"_255":256},"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",10,"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/data.js","latestPath","fileId","9b22f13a-a816-11f1-89af-1607ee4eb77e","name","data.js","fileType","content","// Loads the generated skill set and answers the questions the screens ask of\n// it: what is age-appropriate, how to group it, what to work on next.\n\nlet DB = null;\n\nexport async function load() {\n if (DB) return DB;\n const res = await fetch('assets/skills.json');\n if (!res.ok) throw new Error(`skills.json: ${res.status}`);\n DB = await res.json();\n DB.byId = new Map(DB.skills.map((s) => [s.id, s]));\n return DB;\n}\n\nexport const db = () => DB;\nexport const byId = (id) => DB.byId.get(id);\n\nexport const DOMAIN_ORDER = ['speech', 'math', 'physical', 'social', 'executive'];\nexport const domainVar = (d) => `var(--d-${d})`;\nexport const domainName = (d, lang) => DB.domains[d][lang] ?? DB.domains[d].en;\n\n/* -------------------------------------------------------------------- age */\n\nexport function ageInMonths(birth, now = new Date()) {\n if (!birth) return 0;\n const b = new Date(birth);\n if (Number.isNaN(+b)) return 0;\n let m = (now.getFullYear() - b.getFullYear()) * 12 + (now.getMonth() - b.getMonth());\n if (now.getDate() < b.getDate()) m -= 1;\n return Math.max(0, m);\n}\n\n// Onboarding pre-selects the band the child is in right now — for a\n// 22-month-old that is ~120 cards, which is a scroll, not a slog.\nexport const isCurrentBand = (s, months) => s.fromMonths <= months && months < s.toMonths;\n\n// A wider window for browsing and for topping up goals once the current band\n// has been worked through: the band just gone, and the one coming up.\nconst NEAR = 6;\nexport const isNearAge = (s, months) =>\n isCurrentBand(s, months) ||\n (s.toMonths <= months && s.toMonths >= months - NEAR) ||\n (s.fromMonths > months && s.fromMonths <= months + NEAR);\n\nexport const relevantSkills = (months) =>\n DB.skills.filter((s) => s.kind === 'skill' && isCurrentBand(s, months));\n\n/* ---------------------------------------------------------------- sorting */\n\n// Lower is more worth working on now: skills in the current band first, then\n// ones whose band has passed (a gap), then ones coming up.\nexport function priority(s, months) {\n if (s.fromMonths <= months && months < s.toMonths) return 0;\n if (s.toMonths <= months) return 1 + (months - s.toMonths) / 12;\n return 2 + (s.fromMonths - months) / 12;\n}\n\n/** Suggest goals, spread across domains so a week never lands all on one. */\nexport function suggestGoals(state, months, count = 4, exclude = []) {\n const skip = new Set(exclude);\n // `goal: false` marks statements you observe rather than work towards\n // (\"cries when a parent leaves\") — checkable, but never a weekly goal.\n const open = (s) => s.kind === 'skill' && s.goal !== false && !state.can[s.id] && !skip.has(s.id);\n\n let pool = DB.skills.filter((s) => open(s) && state.tracked[s.id]);\n // As the child grows out of the set chosen at onboarding, reach into the\n // neighbouring bands rather than running out of goals.\n if (pool.length < count) {\n const extra = DB.skills.filter((s) => open(s) && !state.tracked[s.id] && isNearAge(s, months));\n pool = pool.concat(extra);\n }\n pool.sort((a, b) => priority(a, months) - priority(b, months));\n\n const byDomain = new Map();\n for (const s of pool) {\n if (!byDomain.has(s.domain)) byDomain.set(s.domain, []);\n byDomain.get(s.domain).push(s);\n }\n\n // Round-robin across domains, best-scoring first within each.\n const order = [...byDomain.keys()].sort(\n (a, b) => priority(byDomain.get(a)[0], months) - priority(byDomain.get(b)[0], months),\n );\n const out = [];\n for (let round = 0; out.length < count && round < 40; round++) {\n let added = false;\n for (const d of order) {\n const list = byDomain.get(d);\n if (list.length > round) { out.push(list[round]); added = true; }\n if (out.length >= count) break;\n }\n if (!added) break;\n }\n return out.map((s) => s.id);\n}\n\n/* --------------------------------------------------------------- grouping */\n\n/** [{ domain, category, items }] — domain order fixed, categories by first use. */\nexport function groupByCategory(skills, lang) {\n const groups = new Map();\n for (const s of skills) {\n const key = `${s.domain}|${s.category.ru}`;\n if (!groups.has(key)) {\n groups.set(key, { domain: s.domain, category: s.category[lang] ?? s.category.en, items: [] });\n }\n groups.get(key).items.push(s);\n }\n return [...groups.values()].sort(\n (a, b) => DOMAIN_ORDER.indexOf(a.domain) - DOMAIN_ORDER.indexOf(b.domain),\n );\n}\n\n/* ------------------------------------------------------------------- map */\n\n// A shared six-month axis. The workbook's bands differ by domain, so a skill\n// spanning 1–2 years genuinely covers both of its columns rather than being\n// forced into one.\nexport const AGE_COLS = [[0, 12], [12, 18], [18, 24], [24, 30], [30, 36], [36, 42], [42, 48]];\n\nconst spans = (s, [a, b]) => s.fromMonths < b && s.toMonths > a;\n\nlet MATRIX = null;\n/** [{ domain, category, cells: [[skill,…] × 7] }] — built once from the DB. */\nexport function matrix() {\n if (MATRIX) return MATRIX;\n const groups = new Map();\n for (const s of DB.skills) {\n if (s.kind !== 'skill') continue;\n const key = `${s.domain}|${s.category.ru}`;\n if (!groups.has(key)) {\n groups.set(key, { domain: s.domain, category: s.category, cells: AGE_COLS.map(() => []) });\n }\n const g = groups.get(key);\n AGE_COLS.forEach((col, i) => { if (spans(s, col)) g.cells[i].push(s); });\n }\n MATRIX = [...groups.values()].sort(\n (a, b) => DOMAIN_ORDER.indexOf(a.domain) - DOMAIN_ORDER.indexOf(b.domain),\n );\n return MATRIX;\n}\n\n/** The same grid collapsed to one row per domain. */\nexport function matrixByDomain() {\n return DOMAIN_ORDER.map((d) => {\n const rows = matrix().filter((r) => r.domain === d);\n return {\n domain: d,\n rows,\n cells: AGE_COLS.map((_, i) => [...new Set(rows.flatMap((r) => r.cells[i]))]),\n };\n });\n}\n\nexport function countsByDomain(state) {\n return DOMAIN_ORDER.map((d) => {\n const tracked = DB.skills.filter((s) => s.kind === 'skill' && s.domain === d && state.tracked[s.id]);\n const can = tracked.filter((s) => state.can[s.id]);\n return { domain: d, tracked: tracked.length, can: can.length };\n });\n}\n","createdAt",["D",1788495047024],"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":249,"_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":250,"_79":251,"_81":252,"_83":24},"tree",[186,192,193,194,195,196],"files",[186,187,188,189,190,191,192,193,194,195,196],"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":246,"_13":61,"_33":174,"_34":-5,"_23":24,"_138":-5,"_198":247,"_26":248},{"_41":242,"_31":233,"_29":229,"_133":171,"_39":40,"_38":237,"_135":57,"_36":243,"_13":61,"_33":174,"_34":-5,"_23":24,"_138":-5,"_198":244,"_26":245},{"_41":234,"_31":235,"_29":236,"_133":229,"_39":40,"_38":237,"_135":24,"_36":238,"_13":61,"_33":20,"_34":239,"_23":24,"_138":-5,"_198":240,"_26":241},{"_41":228,"_31":32,"_29":30,"_133":229,"_39":40,"_38":14,"_135":57,"_36":230,"_13":61,"_33":20,"_34":35,"_23":24,"_138":-5,"_198":231,"_26":232},{"_41":221,"_31":222,"_29":223,"_133":171,"_39":40,"_38":172,"_135":24,"_36":224,"_13":61,"_33":20,"_34":225,"_23":24,"_138":-5,"_198":226,"_26":227},{"_41":213,"_31":214,"_29":215,"_133":171,"_39":40,"_38":216,"_135":57,"_36":217,"_13":61,"_33":20,"_34":218,"_23":24,"_138":-5,"_198":219,"_26":220},{"_41":162,"_31":163,"_29":164,"_133":-5,"_39":40,"_38":165,"_135":57,"_36":210,"_13":61,"_33":20,"_34":167,"_23":24,"_138":-5,"_198":211,"_26":212},{"_41":154,"_31":155,"_29":55,"_133":-5,"_39":40,"_38":156,"_135":24,"_36":207,"_13":158,"_33":159,"_34":160,"_23":24,"_138":-5,"_198":208,"_26":209},{"_41":147,"_31":148,"_29":149,"_133":-5,"_39":40,"_38":150,"_135":57,"_36":204,"_13":61,"_33":20,"_34":152,"_23":24,"_138":-5,"_198":205,"_26":206},{"_41":140,"_31":141,"_29":142,"_133":-5,"_39":40,"_38":143,"_135":57,"_36":201,"_13":61,"_33":20,"_34":145,"_23":24,"_138":-5,"_198":202,"_26":203},{"_41":130,"_31":131,"_29":132,"_133":-5,"_39":40,"_38":134,"_135":57,"_36":197,"_13":61,"_33":20,"_34":137,"_23":24,"_138":-5,"_198":199,"_26":200},["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,214],"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,222],"47805841-09b9-4235-b0bc-85df4fde8947","1d35a998-6869-4f35-a1c5-0e90b07472b3",["D",1788495047024],[],[170,233,32],"js","f0493134-93fd-4c5a-a0ba-17b581258a8e","app.js","9adb4a24-a816-11f1-9b09-1607ee4eb77e",9,["D",1788495046586],"import { el, ICON, closeSheets } from './ui.js';\nimport { t, setLang } from './i18n.js';\nimport * as store from './store.js';\nimport * as data from './data.js';\nimport * as sync from './sync.js';\nimport { renderOnboarding } from './screens/onboarding.js';\nimport { renderWeek } from './screens/week.js';\nimport { renderProgress } from './screens/progress.js';\nimport { renderMap } from './screens/map.js';\nimport { renderLibrary } from './screens/library.js';\nimport { renderSettings } from './screens/settings.js';\n\nconst TABS = [\n { id: 'week', icon: ICON.week, render: renderWeek },\n { id: 'progress', icon: ICON.progress, render: renderProgress },\n { id: 'map', icon: ICON.map, render: renderMap },\n { id: 'library', icon: ICON.library, render: renderLibrary },\n { id: 'settings', icon: ICON.settings, render: renderSettings },\n];\n\nconst root = document.getElementById('app');\nlet tab = 'week';\nlet topbarEl = null; // the current top bar; the scroll listener below reads it\n\n// Registered once. Attaching inside render() would leak a listener per render,\n// each holding a detached header.\nconst onScroll = () => {\n if (topbarEl) topbarEl.dataset.scrolled = window.scrollY > 4 ? '1' : '0';\n};\n\nfunction render() {\n const s = store.get();\n // Sheets live on so they can sit above the tab bar; they have to be\n // cleaned up here or they outlive the screen that opened them.\n closeSheets();\n root.replaceChildren();\n root.removeAttribute('aria-busy');\n topbarEl = null;\n\n if (!s.onboarded) {\n root.append(renderOnboarding(() => { tab = 'week'; render(); }));\n return;\n }\n\n const active = TABS.find((x) => x.id === tab) ?? TABS[0];\n const { body, subtitle } = active.render(render);\n\n const topbar = el('header', { class: 'topbar' },\n el('div', { class: 'wrap', style: 'flex:1;min-width:0' },\n el('h1', {},\n tab === 'week' ? (s.child.name || t('appName')) : t(`nav.${tab}`),\n subtitle && el('span', { class: 'sub' }, subtitle),\n ),\n ),\n );\n\n const tabbar = el('nav', { class: 'tabbar' },\n ...TABS.map((x) =>\n el('button', {\n class: 'tab', type: 'button',\n 'aria-current': x.id === tab ? 'page' : null,\n onClick: () => { if (x.id !== tab) { tab = x.id; render(); window.scrollTo(0, 0); } },\n },\n el('span', { html: x.icon }),\n el('span', {}, t(`nav.${x.id}`)),\n ),\n ),\n );\n\n root.append(el('div', { class: 'shell' }, topbar, el('main', { class: 'main' }, body)), tabbar);\n\n // The top bar only grows a hairline once content has scrolled under it.\n topbarEl = topbar;\n onScroll();\n}\n\nasync function boot() {\n try {\n await data.load();\n } catch (err) {\n root.replaceChildren(el('p', { style: 'padding:40px;text-align:center' },\n `Could not load skills.json — ${err.message}`));\n return;\n }\n setLang(store.get().lang);\n window.addEventListener('scroll', onScroll, { passive: true });\n render();\n\n // Shared record, if this device has been given the passphrase.\n sync.start();\n sync.onStatus(() => { if (tab === 'settings') render(); });\n\n if ('serviceWorker' in navigator && location.protocol !== 'file:') {\n navigator.serviceWorker.register('sw.js').catch(() => { /* offline is a bonus, not a requirement */ });\n }\n}\n\nboot();\n",[],[170,233,235],"cf3c6138-f2f5-4e19-8653-2a7a163c5401",["D",1788495046586],[188,189],[170,233],["D",1788495043473],[187,190,191],[170],["D",1788494851578],{"_95":94,"_102":97},{"_95":94,"_96":97,"_98":97,"_18":53,"_99":100,"_101":24},{"_13":84,"_31":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"ctx",{"_77":-5,"_121":286,"_287":288,"_289":290,"_291":24,"_292":24,"_293":24,"_294":57,"_295":-5,"_296":-7,"_297":-7,"_298":61,"_299":24,"_300":24,"_301":-5,"_302":24,"_303":24,"_304":24,"_305":-5},"ENV",{"_257":258,"_259":260,"_261":85,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v10