${MONTHS[m]}

${leftText}

\n \n

`;\n\n if (!state.activities.length) {\n h += `\n

${pipsHTML(6, 2)}

Nothing budgeted yet.

Add something you want to do less, and give it an allowance of days for the month. Then spend them wisely.

\n \n

`;\n } else {\n h += `

`;\n state.activities.forEach((a, i) => {\n const spent = spentInMonth(a.id, y, m);\n const remaining = a.limit - spent;\n const over = remaining < 0;\n const markedToday = isMarked(tk, a.id);\n const animateIndex = punched === a.id ? spent - 1 : -1;\n const ofText = over\n ? `${-remaining} over`\n : `left of ${a.limit}`;\n h += (i > 0 ? `

` : \"\") + `\n

\n ${over ? 0 : remaining}\n ${ofText}\n

${pipsHTML(a.limit, spent, { animateIndex })}

\n \n

`;\n });\n h += `

\n `;\n }\n view.innerHTML = h;\n punched = null;\n }\n\n function renderCalendar() {\n const t = today();\n if (calY == null) { calY = t.getFullYear(); calM = t.getMonth(); }\n const y = calY, m = calM;\n const isCurrent = y === t.getFullYear() && m === t.getMonth();\n const atCurrent = isCurrent; // no browsing into the future\n const fdow = firstDayOfWeek();\n const first = new Date(y, m, 1).getDay();\n const lead = (first - fdow + 7) % 7;\n const n = daysIn(y, m);\n const tk = keyOf(t);\n\n let h = `\n

\n \n

${MONTHS[m]}${y}

\n \n

`;\n for (let i = 0; i < 7; i++) h += `

${DOW_SUN[(fdow + i) % 7]}

`;\n for (let i = 0; i < lead; i++) h += `

`;\n for (let d = 1; d <= n; d++) {\n const k = key(y, m, d);\n const ids = state.marks[k] || [];\n const dots = ids.map(id => activity(id)).filter(Boolean)\n .map(a => ``).join(\"\");\n const future = k > tk;\n h += ``;\n }\n h += `

`;\n\n if (state.activities.length) {\n h += `

${isCurrent ? \"So far this month\" : MONTHS[m] + \" totals\"}

`;\n state.activities.forEach(a => {\n const spent = spentInMonth(a.id, y, m);\n const over = spent > a.limit;\n h += `

\n \n ${esc(a.name)}\n ${spent} of ${a.limit}\n

`;\n });\n h += `

`;\n } else {\n h += `

Add an activity on the Today tab and its marks will show up here.

`;\n }\n view.innerHTML = h;\n }\n\n function render() {\n if (tab === \"today\") renderToday(); else renderCalendar();\n document.querySelectorAll(\".tab\").forEach(b => {\n const on = b.dataset.tab === tab;\n b.classList.toggle(\"is-active\", on);\n if (on) b.setAttribute(\"aria-current\", \"page\"); else b.removeAttribute(\"aria-current\");\n });\n }\n\n // ---------- Sheets -----------------------------------------------------\n\n const sheetRoot = document.getElementById(\"sheet-root\");\n let sheetCleanup = null;\n\n function openSheet(html, onMount) {\n closeSheet(true);\n sheetRoot.innerHTML = `

${html}

`;\n const sheet = sheetRoot.querySelector(\".sheet\");\n requestAnimationFrame(() => requestAnimationFrame(() => document.body.classList.add(\"sheet-open\")));\n const onKey = e => { if (e.key === \"Escape\") closeSheet(); };\n document.addEventListener(\"keydown\", onKey);\n sheetCleanup = () => document.removeEventListener(\"keydown\", onKey);\n if (onMount) onMount(sheet);\n }\n function closeSheet(immediate) {\n if (sheetCleanup) { sheetCleanup(); sheetCleanup = null; }\n document.body.classList.remove(\"sheet-open\");\n if (immediate) { sheetRoot.innerHTML = \"\"; return; }\n const s = sheetRoot.querySelector(\".sheet\");\n if (!s) return;\n setTimeout(() => { if (!document.body.classList.contains(\"sheet-open\")) sheetRoot.innerHTML = \"\"; }, 300);\n }\n\n function swatchesHTML(sel) {\n return COLORS.map(c => ``).join(\"\");\n }\n\n function activitySheet(existing) {\n const a = existing || { name: \"\", limit: 4, color: COLORS[state.activities.length % COLORS.length] };\n const isNew = !existing;\n openSheet(`\n

${isNew ? \"New activity\" : \"Edit activity\"}

${isNew ? \"Something you want to do less, and how many days a month you'll allow it.\" : \"Changes apply to every month.\"}

\n \n `, sheet => {\n const form = sheet.querySelector(\"#af\");\n const out = sheet.querySelector(\"#a-limit\");\n let limit = a.limit, color = a.color;\n sheet.querySelectorAll(\"[data-step]\").forEach(b => b.addEventListener(\"click\", () => {\n limit = clamp(limit + Number(b.dataset.step), 1, 31);\n out.innerHTML = `${limit}${limit === 1 ? \"day\" : \"days\"}`;\n }));\n sheet.querySelector(\"#a-colors\").addEventListener(\"click\", e => {\n const b = e.target.closest(\"[data-color]\"); if (!b) return;\n color = b.dataset.color;\n sheet.querySelectorAll(\".swatch-btn\").forEach(s => { const on = s.dataset.color === color; s.classList.toggle(\"is-on\", on); s.setAttribute(\"aria-pressed\", on); });\n });\n form.addEventListener(\"submit\", e => {\n e.preventDefault();\n const name = form.name.value.trim();\n if (!name) { form.name.focus(); return; }\n if (isNew) {\n state.activities.push({ id: uid(), name, limit, color, createdAt: Date.now() });\n askPersistence();\n } else {\n const target = activity(a.id);\n if (target) Object.assign(target, { name, limit, color });\n }\n save();\n closeSheet();\n render();\n toast(isNew ? \"Added\" : \"Saved\");\n });\n if (isNew) setTimeout(() => form.name.focus(), 320);\n });\n }\n\n function confirmDelete(id) {\n const a = activity(id); if (!a) return;\n openSheet(`\n

Delete ${esc(a.name)}?

Every day you marked for it will be removed too. This can't be undone.

\n \n \n

\n `);\n }\n\n function daySheet(k) {\n const [y, m, d] = k.split(\"-\").map(Number);\n const date = new Date(y, m - 1, d);\n const isToday = k === keyOf(today());\n const rows = state.activities.map(a => {\n const on = isMarked(k, a.id);\n const spent = spentInMonth(a.id, y, m - 1);\n const over = spent > a.limit;\n return ``;\n }).join(\"\");\n openSheet(`\n

${isToday ? \"Today\" : longDate(date)}

${isToday ? longDate(date) + \". \" : \"\"}Tap an activity to mark or unmark it for this day.

${rows || `

No activities yet.

\n `);\n }\n\n async function settingsSheet() {\n let persisted = null;\n try { if (navigator.storage && navigator.storage.persisted) persisted = await navigator.storage.persisted(); } catch (e) {}\n const standalone = window.matchMedia(\"(display-mode: standalone)\").matches || navigator.standalone === true;\n const markedDays = Object.keys(state.marks).length;\n openSheet(`\n

Backup

Your data lives only on this device. Copy a backup now and then, and paste it here to restore.

\n \n

${state.activities.length} ${state.activities.length === 1 ? \"activity\" : \"activities\"}, ${markedDays} marked ${markedDays === 1 ? \"day\" : \"days\"}.

\n Restore from a backup\n \n

\n \n

${standalone ? \"Installed as an app. \" : \"Running in the browser. Add to your home screen for the app experience and safer storage. \"}${persisted === true ? \"Storage is marked persistent.\" : persisted === false ? \"Storage is not marked persistent; a backup is a good idea.\" : \"\"}

\n `);\n }\n\n // ---------- Toast ------------------------------------------------------\n\n const toastEl = document.getElementById(\"toast\");\n let toastTimer;\n function toast(msg) {\n toastEl.textContent = msg;\n toastEl.classList.add(\"is-on\");\n clearTimeout(toastTimer);\n toastTimer = setTimeout(() => toastEl.classList.remove(\"is-on\"), 1600);\n }\n\n // ---------- Events -----------------------------------------------------\n\n document.querySelector(\".tabs\").addEventListener(\"click\", e => {\n const b = e.target.closest(\".tab\"); if (!b) return;\n tab = b.dataset.tab;\n if (tab === \"calendar\") { const t = today(); calY = t.getFullYear(); calM = t.getMonth(); }\n render();\n window.scrollTo(0, 0);\n });\n\n document.addEventListener(\"click\", e => {\n const el = e.target.closest(\"[data-action]\"); if (!el) return;\n const act = el.dataset.action, id = el.dataset.id;\n switch (act) {\n case \"add\": activitySheet(); break;\n case \"edit\": activitySheet(activity(id)); break;\n case \"delete\": confirmDelete(id); break;\n case \"delete-confirm\": {\n state.activities = state.activities.filter(a => a.id !== id);\n for (const k of Object.keys(state.marks)) {\n const list = state.marks[k].filter(x => x !== id);\n if (list.length) state.marks[k] = list; else delete state.marks[k];\n }\n save(); closeSheet(); render(); toast(\"Deleted\");\n break;\n }\n case \"toggle-today\": {\n const k = keyOf(today());\n const on = !isMarked(k, id);\n setMark(k, id, on);\n punched = on ? id : null;\n render();\n toast(on ? \"Marked for today\" : \"Unmarked\");\n break;\n }\n case \"settings\": settingsSheet(); break;\n case \"close\": closeSheet(); break;\n case \"cal-prev\": { calM--; if (calM < 0) { calM = 11; calY--; } render(); break; }\n case \"cal-next\": { calM++; if (calM > 11) { calM = 0; calY++; } render(); break; }\n case \"day\": daySheet(el.dataset.key); break;\n case \"toggle-day\": {\n const k = el.dataset.key;\n const on = !isMarked(k, id);\n setMark(k, id, on);\n // Update the row in place, then refresh the calendar behind it.\n const a = activity(id);\n const [y, m] = k.split(\"-\").map(Number);\n const spent = spentInMonth(id, y, m - 1);\n el.setAttribute(\"aria-pressed\", on);\n el.querySelector(\".pip\").className = \"pip \" + (on ? \"is-on just-punched\" : \"is-idle\");\n const meta = el.querySelector(\".meta\");\n meta.textContent = `${spent} of ${a.limit}`;\n meta.classList.toggle(\"is-over\", spent > a.limit);\n render();\n break;\n }\n case \"copy-backup\": {\n const text = JSON.stringify(state);\n const done = () => toast(\"Backup copied\");\n if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(text).then(done, () => fallbackCopy(text, done));\n else fallbackCopy(text, done);\n break;\n }\n case \"restore\": {\n const ta = document.getElementById(\"restore\");\n let parsed = null;\n try { parsed = JSON.parse(ta.value.trim()); } catch (e) {}\n if (!parsed || !Array.isArray(parsed.activities)) { toast(\"That doesn't look like a Leeway backup\"); ta.focus(); return; }\n state = normalize(parsed);\n save(); closeSheet(); render(); toast(\"Restored\");\n break;\n }\n }\n });\n\n function fallbackCopy(text, done) {\n const ta = document.createElement(\"textarea\");\n ta.value = text; ta.setAttribute(\"readonly\", \"\"); ta.style.position = \"fixed\"; ta.style.opacity = \"0\";\n document.body.appendChild(ta); ta.select(); ta.setSelectionRange(0, text.length);\n try { document.execCommand(\"copy\"); done(); } catch (e) { toast(\"Couldn't copy. Select the text manually.\"); }\n document.body.removeChild(ta);\n }\n\n // Re-render when the app is resumed on a new day.\n let lastDay = keyOf(today());\n document.addEventListener(\"visibilitychange\", () => {\n if (document.visibilityState !== \"visible\") return;\n const now = keyOf(today());\n if (now !== lastDay) { lastDay = now; if (tab === \"calendar\") { calY = null; } render(); }\n });\n\n // ---------- Boot -------------------------------------------------------\n\n load().then(() => {\n render();\n if (\"serviceWorker\" in navigator) {\n navigator.serviceWorker.register(\"sw.js\").catch(() => {});\n }\n });\n})();\n",[],[143,190],["D",1788575732541],[183],[143],["D",1788575734234],[],[150],"233884c4-118c-4e24-8660-4618279f991a","app.css","8cf60ff4-a8d2-11f1-8b36-1607ee4eb77e",6,["D",1788575768661],"/* Leeway — a ration ticket for the things you want to do less. */\n\n@font-face {\n font-family: \"Big Shoulders\";\n src: url(\"../fonts/BigShouldersDisplay-normal-500-900.woff2\") format(\"woff2\");\n font-weight: 500 900;\n font-display: swap;\n}\n@font-face {\n font-family: \"Familjen\";\n src: url(\"../fonts/FamiljenGrotesk-normal-400-700.woff2\") format(\"woff2\");\n font-weight: 400 700;\n font-display: swap;\n}\n@font-face {\n font-family: \"Familjen\";\n src: url(\"../fonts/FamiljenGrotesk-italic-400-700.woff2\") format(\"woff2\");\n font-weight: 400 700;\n font-style: italic;\n font-display: swap;\n}\n\n:root {\n --stock: #E4E9E3;\n --stock-2: #D7DED6;\n --stock-3: #C8D1C8;\n --ink: #1C2A22;\n --ink-2: #62716A;\n --rule: rgba(28, 42, 34, 0.32);\n --pen: #2F4FA8;\n --stamp: #C43D2A;\n --on-pen: #E4E9E3;\n\n --c-pen: #2F4FA8;\n --c-plum: #7A3B7C;\n --c-rust: #B8552E;\n --c-moss: #4E7A3A;\n --c-teal: #1F7278;\n --c-mustard: #A87F16;\n\n --display: \"Big Shoulders\", \"Arial Narrow\", \"Helvetica Neue\", Impact, sans-serif;\n --text: \"Familjen\", \"Helvetica Neue\", Arial, sans-serif;\n\n --sheet-radius: 22px;\n --pip: 22px;\n --pip-gap: 7px;\n\n color-scheme: light dark;\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --stock: #121A15;\n --stock-2: #1B2620;\n --stock-3: #27352D;\n --ink: #E4E9E3;\n --ink-2: #8C9B90;\n --rule: rgba(228, 233, 227, 0.3);\n --pen: #8DA6F0;\n --stamp: #F07A64;\n --on-pen: #121A15;\n\n --c-pen: #8DA6F0;\n --c-plum: #D08BD2;\n --c-rust: #F0956C;\n --c-moss: #9CCB7C;\n --c-teal: #6FC9CF;\n --c-mustard: #E4C25A;\n }\n}\n\n* { box-sizing: border-box; }\nhtml { -webkit-text-size-adjust: 100%; }\nbody {\n margin: 0;\n background: var(--stock);\n color: var(--ink);\n font-family: var(--text);\n font-size: 16px;\n line-height: 1.45;\n -webkit-font-smoothing: antialiased;\n overscroll-behavior-y: none;\n -webkit-tap-highlight-color: transparent;\n}\nbutton, input { font: inherit; color: inherit; }\nbutton { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }\n:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; border-radius: 4px; }\n\n/* ---- Shell ---------------------------------------------------------- */\n\n.app {\n min-height: 100dvh;\n display: flex;\n flex-direction: column;\n max-width: 540px;\n margin: 0 auto;\n}\n.view {\n flex: 1;\n padding: calc(env(safe-area-inset-top) + 20px) 20px 32px;\n}\n\n.tabs {\n position: sticky;\n bottom: 0;\n display: flex;\n background: var(--stock);\n border-top: 1px solid var(--rule);\n padding: 6px 12px calc(env(safe-area-inset-bottom) + 6px);\n}\n.tab {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2px;\n padding: 6px 0 4px;\n color: var(--ink-2);\n font-size: 12px;\n font-weight: 500;\n border-radius: 10px;\n}\n.tab svg { width: 26px; height: 26px; fill: currentColor; }\n.tab svg .ring { fill: none; stroke: currentColor; stroke-width: 1.8; }\n.tab.is-active { color: var(--ink); }\n.tab.is-active svg { color: var(--pen); }\n\n/* ---- Perforation (the tear line between tickets) -------------------- */\n\n.perf {\n height: 4px;\n background-image: radial-gradient(circle, var(--rule) 1.4px, transparent 1.6px);\n background-size: 9px 4px;\n background-repeat: repeat-x;\n background-position: 0 center;\n margin: 0 -20px;\n}\n\n/* ---- Header --------------------------------------------------------- */\n\n.head {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 22px;\n}\n.head h1 {\n margin: 0;\n font-family: var(--display);\n font-weight: 800;\n font-size: 50px;\n line-height: 0.95;\n letter-spacing: -0.005em;\n}\n.head p {\n margin: 8px 0 0;\n color: var(--ink-2);\n font-size: 15px;\n}\n.iconbtn {\n width: 40px; height: 40px;\n display: grid; place-items: center;\n border-radius: 50%;\n color: var(--ink-2);\n margin-top: 2px;\n}\n.iconbtn:active { background: var(--stock-2); }\n.iconbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }\n\n/* ---- Activity ticket ------------------------------------------------ */\n\n.tickets { display: flex; flex-direction: column; }\n\n.ticket {\n padding: 18px 0 20px;\n display: grid;\n grid-template-columns: 1fr auto;\n grid-template-areas:\n \"name count\"\n \"pips count\"\n \"act act\";\n column-gap: 14px;\n row-gap: 10px;\n align-items: start;\n}\n.ticket + .ticket { border-top: 0; }\n\n.ticket .name {\n grid-area: name;\n margin: 0;\n font-family: var(--display);\n font-weight: 700;\n font-size: 30px;\n line-height: 1;\n overflow-wrap: anywhere;\n padding-top: 4px;\n}\n.ticket .name button {\n font: inherit;\n text-align: left;\n color: inherit;\n padding: 2px 0;\n margin: -2px 0;\n}\n\n.count {\n grid-area: count;\n text-align: right;\n line-height: 1;\n min-width: 64px;\n}\n.count .n {\n display: block;\n font-family: var(--display);\n font-weight: 800;\n font-size: 64px;\n line-height: 0.85;\n color: var(--tint);\n font-variant-numeric: tabular-nums;\n}\n.count .of {\n display: block;\n margin-top: 6px;\n font-size: 13px;\n color: var(--ink-2);\n white-space: nowrap;\n}\n.count.is-over .n { color: var(--stamp); }\n.count.is-over .of { color: var(--stamp); font-weight: 600; }\n\n.pips {\n grid-area: pips;\n display: flex;\n flex-wrap: wrap;\n gap: var(--pip-gap);\n align-self: center;\n padding: 4px 0;\n}\n.pip {\n width: var(--pip);\n height: var(--pip);\n border-radius: 50%;\n background: var(--tint);\n position: relative;\n transition: transform 0.25s cubic-bezier(.2,.8,.3,1.4), background-color 0.2s;\n}\n.pip.is-spent {\n background: transparent;\n box-shadow: inset 0 0 0 3px var(--tint);\n}\n.pip.is-spent::after {\n content: \"\";\n position: absolute;\n inset: 6px;\n border-radius: 50%;\n background: var(--stock-3);\n opacity: 0.55;\n}\n.pip.is-over {\n background: var(--stamp);\n box-shadow: none;\n}\n.pip.is-over::before, .pip.is-over::after {\n content: \"\";\n position: absolute;\n inset: auto;\n left: 50%; top: 50%;\n width: 12px; height: 2.5px;\n background: var(--stock);\n border-radius: 2px;\n opacity: 1;\n}\n.pip.is-over::before { transform: translate(-50%, -50%) rotate(45deg); }\n.pip.is-over::after { transform: translate(-50%, -50%) rotate(-45deg); }\n\n.pip.just-punched { animation: punch 0.45s cubic-bezier(.2,.8,.3,1.3); }\n@keyframes punch {\n 0% { transform: scale(1); }\n 40% { transform: scale(0.55); }\n 100% { transform: scale(1); }\n}\n\n.actions {\n grid-area: act;\n display: flex;\n gap: 10px;\n align-items: center;\n}\n.mark {\n flex: 1;\n height: 46px;\n border-radius: 12px;\n border: 1.5px solid var(--ink);\n color: var(--ink);\n font-weight: 600;\n font-size: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n transition: background-color 0.15s, color 0.15s, transform 0.1s;\n}\n.mark:active { transform: scale(0.98); }\n.mark svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }\n.mark.is-marked {\n background: var(--stock-2);\n border-color: transparent;\n color: var(--tint);\n}\n@supports (color: color-mix(in srgb, red, blue)) {\n .mark.is-marked { background: color-mix(in srgb, var(--tint) 16%, transparent); }\n}\n.mark.is-marked.is-over { color: var(--stamp); }\n@supports (color: color-mix(in srgb, red, blue)) {\n .mark.is-marked.is-over { background: color-mix(in srgb, var(--stamp) 16%, transparent); }\n}\n\n/* ---- Add row & empty state ----------------------------------------- */\n\n.add-row {\n width: 100%;\n margin-top: 6px;\n padding: 18px 0;\n display: flex;\n align-items: center;\n gap: 12px;\n color: var(--pen);\n font-weight: 600;\n font-size: 16px;\n text-align: left;\n}\n.add-row .plus {\n width: 30px; height: 30px;\n flex: none;\n border-radius: 50%;\n border: 1.5px dashed currentColor;\n display: grid; place-items: center;\n}\n.add-row .plus svg {\n width: 16px; height: 16px;\n fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;\n}\n\n.empty {\n padding: 40px 0 20px;\n}\n.empty .illus { display: flex; gap: 8px; margin-bottom: 20px; }\n.empty h2 {\n font-family: var(--display);\n font-weight: 700;\n font-size: 34px;\n line-height: 1;\n margin: 0 0 10px;\n}\n.empty p { margin: 0 0 22px; color: var(--ink-2); max-width: 32ch; }\n\n.btn {\n height: 48px;\n padding: 0 22px;\n border-radius: 12px;\n background: var(--pen);\n color: var(--on-pen);\n font-weight: 600;\n font-size: 16px;\n display: inline-flex; align-items: center; justify-content: center; gap: 8px;\n}\n.btn:active { filter: brightness(0.92); }\n.btn.is-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }\n.btn.is-danger { background: transparent; color: var(--stamp); border: 1.5px solid var(--stamp); }\n.btn.is-block { width: 100%; }\n.btn[disabled] { opacity: 0.4; pointer-events: none; }\n\n/* ---- Calendar ------------------------------------------------------- */\n\n.cal-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 14px;\n}\n.cal-head h1 {\n margin: 0;\n font-family: var(--display);\n font-weight: 800;\n font-size: 40px;\n line-height: 1;\n text-align: center;\n}\n.cal-head h1 small {\n display: block;\n font-family: var(--text);\n font-weight: 400;\n font-size: 14px;\n color: var(--ink-2);\n margin-top: 6px;\n}\n.cal-nav {\n width: 44px; height: 44px;\n border-radius: 50%;\n display: grid; place-items: center;\n color: var(--ink);\n}\n.cal-nav:active { background: var(--stock-2); }\n.cal-nav[disabled] { color: var(--stock-3); pointer-events: none; }\n.cal-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n\n.grid {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 3px;\n}\n.dow {\n text-align: center;\n font-size: 12px;\n color: var(--ink-2);\n padding: 4px 0 6px;\n}\n.day {\n aspect-ratio: 1 / 1.15;\n border-radius: 10px;\n padding: 5px 5px 4px;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: space-between;\n font-size: 14px;\n font-variant-numeric: tabular-nums;\n color: var(--ink);\n text-align: left;\n transition: background-color 0.15s;\n}\n.day:active { background: var(--stock-2); }\n.day.is-pad { visibility: hidden; }\n.day.is-future { color: var(--ink-2); opacity: 0.45; pointer-events: none; }\n.day.is-today .num {\n background: var(--ink);\n color: var(--stock);\n border-radius: 50%;\n width: 22px; height: 22px;\n display: grid; place-items: center;\n margin: -3px 0 0 -3px;\n}\n.day.has-marks { background: var(--stock-2); }\n.day .dots {\n display: flex;\n flex-wrap: wrap;\n gap: 3px;\n min-height: 7px;\n max-width: 100%;\n}\n.day .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tint); }\n\n.month-summary { margin-top: 26px; }\n.month-summary h2 {\n font-family: var(--display);\n font-weight: 700;\n font-size: 26px;\n margin: 0 0 4px;\n line-height: 1;\n}\n.sum-row {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 0;\n border-bottom: 1px solid var(--rule);\n}\n.sum-row:last-child { border-bottom: 0; }\n.sum-row .swatch { width: 12px; height: 12px; border-radius: 50%; background: var(--tint); flex: none; }\n.sum-row .label { flex: 1; font-weight: 500; }\n.sum-row .val { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 15px; }\n.sum-row .val.is-over { color: var(--stamp); font-weight: 600; }\n.sum-row .val b { color: var(--ink); font-weight: 600; }\n.sum-row .val.is-over b { color: var(--stamp); }\n\n/* ---- Sheets --------------------------------------------------------- */\n\n.backdrop {\n position: fixed; inset: 0;\n background: rgba(10, 18, 14, 0.45);\n opacity: 0;\n transition: opacity 0.2s;\n z-index: 40;\n}\n.sheet {\n position: fixed;\n left: 0; right: 0; bottom: 0;\n margin: 0 auto;\n max-width: 540px;\n background: var(--stock);\n border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;\n padding: 10px 20px calc(env(safe-area-inset-bottom) + 20px);\n transform: translateY(100%);\n transition: transform 0.28s cubic-bezier(.2,.8,.2,1);\n z-index: 41;\n max-height: 88dvh;\n overflow-y: auto;\n box-shadow: 0 -1px 0 var(--rule);\n}\n.sheet-open .backdrop { opacity: 1; }\n.sheet-open .sheet { transform: translateY(0); }\n.grip {\n width: 36px; height: 4px; border-radius: 2px;\n background: var(--stock-3);\n margin: 0 auto 14px;\n}\n.sheet h2 {\n font-family: var(--display);\n font-weight: 700;\n font-size: 32px;\n line-height: 1;\n margin: 4px 0 4px;\n}\n.sheet .sub { margin: 0 0 16px; color: var(--ink-2); font-size: 15px; }\n\n.field { margin: 18px 0; }\n.field label {\n display: block;\n font-size: 14px;\n color: var(--ink-2);\n margin-bottom: 6px;\n}\n.input {\n width: 100%;\n height: 50px;\n padding: 0 14px;\n border-radius: 12px;\n border: 1.5px solid var(--rule);\n background: transparent;\n font-size: 17px;\n -webkit-appearance: none;\n}\n.input:focus { border-color: var(--pen); outline: none; }\n\n.stepper {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.stepper button {\n width: 50px; height: 50px;\n border-radius: 12px;\n border: 1.5px solid var(--rule);\n font-size: 24px;\n display: grid; place-items: center;\n}\n.stepper button:active { background: var(--stock-2); }\n.stepper output {\n flex: 1;\n text-align: center;\n font-family: var(--display);\n font-weight: 800;\n font-size: 44px;\n line-height: 1;\n font-variant-numeric: tabular-nums;\n}\n.stepper output small {\n display: block;\n font-family: var(--text);\n font-weight: 400;\n font-size: 13px;\n color: var(--ink-2);\n margin-top: 4px;\n}\n\n.swatches { display: flex; gap: 10px; flex-wrap: wrap; }\n.swatch-btn {\n width: 38px; height: 38px;\n border-radius: 50%;\n background: var(--tint);\n position: relative;\n border: 3px solid transparent;\n background-clip: padding-box;\n}\n.swatch-btn.is-on { box-shadow: 0 0 0 2px var(--ink); }\n\n.sheet-actions {\n display: flex;\n gap: 10px;\n margin-top: 22px;\n}\n.sheet-actions .btn { flex: 1; }\n\n/* Day sheet rows */\n.day-row {\n width: 100%;\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 14px 0;\n border-bottom: 1px solid var(--rule);\n text-align: left;\n}\n.day-row:last-of-type { border-bottom: 0; }\n.day-row .pip { flex: none; --pip: 28px; box-shadow: none; }\n.day-row .pip::after { display: none; }\n.day-row .pip.is-idle { background: transparent; border: 1.5px dashed var(--rule); }\n.day-row .pip.is-on { background: var(--tint); }\n.day-row .pip.is-on::after {\n display: block;\n content: \"\";\n position: absolute;\n inset: auto;\n left: 9px; top: 6px;\n width: 7px; height: 12px;\n border: solid var(--on-pen);\n border-width: 0 2.5px 2.5px 0;\n border-radius: 1px;\n background: none;\n opacity: 1;\n transform: rotate(45deg);\n}\n.day-row .label { flex: 1; font-weight: 500; font-size: 17px; }\n.day-row .meta { color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }\n.day-row .meta.is-over { color: var(--stamp); }\n\n/* Backup */\n.textarea {\n width: 100%;\n min-height: 110px;\n border-radius: 12px;\n border: 1.5px solid var(--rule);\n background: transparent;\n padding: 12px 14px;\n font: 13px/1.4 ui-monospace, Menlo, monospace;\n color: var(--ink);\n resize: vertical;\n}\n.textarea:focus { border-color: var(--pen); outline: none; }\n.note { font-size: 14px; color: var(--ink-2); margin: 6px 0 0; }\n.note b { color: var(--ink); font-weight: 600; }\n\n/* ---- Toast ---------------------------------------------------------- */\n\n.toast {\n position: fixed;\n left: 50%;\n bottom: calc(env(safe-area-inset-bottom) + 84px);\n transform: translate(-50%, 12px);\n background: var(--ink);\n color: var(--stock);\n padding: 10px 16px;\n border-radius: 999px;\n font-size: 14px;\n font-weight: 500;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s, transform 0.2s;\n z-index: 50;\n white-space: nowrap;\n}\n.toast.is-on { opacity: 1; transform: translate(-50%, 0); }\n\n/* ---- Motion preference --------------------------------------------- */\n\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after { transition: none !important; animation: none !important; }\n}\n\n@media (min-width: 600px) {\n body { background: var(--stock-2); }\n .app { background: var(--stock); min-height: 100dvh; box-shadow: 0 0 0 1px var(--rule); }\n}\n",[],[156,204],["D",1788575731036],[180],[156],"3bbca9e6-54b9-4826-b37f-a8f01326049f",["D",1788575771857],[],[162,32],["D",1788575735893],[178],[162],["D",1788575725849],{"_96":95,"_104":100},{"_96":95,"_97":98,"_99":100,"_18":54,"_101":102,"_103":24},{"_13":85,"_31":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"ctx",{"_78":-5,"_124":258,"_259":260,"_261":262,"_263":24,"_264":24,"_265":24,"_266":58,"_267":-5,"_268":-7,"_269":-7,"_270":62,"_271":24,"_272":24,"_273":-5,"_274":24,"_275":24,"_276":24,"_277":-5},"ENV",{"_229":230,"_231":232,"_233":86,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257},"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 · v8