/* ============================================================ Chores — a warm, soft board that changes with the time of day. Palettes are swapped by [data-daypart] on , set in JS. ============================================================ */ :root { --bg: #FBF3E7; --bg-2: #F5E9D7; --card: #FFFDF8; --ink: #3B3028; --ink-soft: #7A6A5C; --ink-faint: #A9968B; --line: #E8DAC6; --accent: #C4703F; /* terracotta */ --accent-2: #7A9A6B; /* sage */ --accent-3: #D9A441; /* honey */ --danger: #B4553F; --done: #7A9A6B; --shadow: 0 2px 0 rgba(59,48,40,.06), 0 8px 24px -12px rgba(59,48,40,.28); --radius: 18px; --ease: cubic-bezier(.22,1,.36,1); } html[data-daypart="morning"] { --bg: #FDF1E6; --bg-2: #F9E3D2; --card: #FFFCF7; --accent: #D2794A; --accent-2: #86A473; --line: #F0DCC9; } html[data-daypart="evening"] { --bg: #221D2B; --bg-2: #2C2536; --card: #322A3D; --ink: #F2E9DC; --ink-soft: #BFB0BE; --ink-faint: #8F8296; --line: #423854; --accent: #E2926A; --accent-2: #9BBE87; --accent-3: #E7BC63; --danger: #E08A72; --done: #9BBE87; --shadow: 0 2px 0 rgba(0,0,0,.18), 0 10px 28px -14px rgba(0,0,0,.7); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: Nunito, ui-rounded, "SF Pro Rounded", system-ui, sans-serif; font-size: 16px; -webkit-text-size-adjust: 100%; overscroll-behavior-y: contain; } body { min-height: 100dvh; background-image: radial-gradient(1200px 500px at 12% -10%, var(--bg-2), transparent 60%), radial-gradient(900px 420px at 100% 0%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 62%); background-attachment: fixed; transition: background-color .6s var(--ease), color .3s var(--ease); } h1, h2, .daylabel, .pick-card h2 { font-family: Fraunces, Georgia, serif; font-weight: 700; letter-spacing: -.01em; } .wrap { max-width: 760px; margin: 0 auto; padding: 18px 16px calc(72px + env(safe-area-inset-bottom)); } .hidden { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ---------------- header ---------------- */ .mast { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .mast-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .mast-right { display: flex; align-items: center; gap: 8px; } .plant-holder { width: 78px; height: 78px; flex: none; display: grid; place-items: center; } .plant { width: 100%; height: 100%; overflow: visible; } .greeting { min-width: 0; } .greeting h1 { margin: 0; font-size: 1.5rem; line-height: 1.15; } .greeting .sub { margin: 3px 0 0; color: var(--ink-soft); font-size: .92rem; } /* ---------------- the plant ---------------- */ .pot { fill: var(--accent); } .pot-rim { fill: color-mix(in oklab, var(--accent) 86%, #000 6%); } .soil { fill: color-mix(in oklab, var(--accent) 40%, #4A3728 60%); } .stem { stroke: var(--accent-2); stroke-width: 4.5; stroke-linecap: round; fill: none; } .leaf path, .bud ellipse { fill: var(--accent-2); } .leaf-r1 path, .leaf-r2 path { fill: color-mix(in oklab, var(--accent-2) 82%, #fff 18%); } .petal { fill: color-mix(in oklab, var(--accent-3) 70%, #fff 30%); } .pollen { fill: var(--accent-3); } .spark { fill: var(--accent-3); } .eye { fill: color-mix(in oklab, var(--ink) 70%, transparent); } .mouth { stroke: color-mix(in oklab, var(--ink) 70%, transparent); stroke-width: 1.6; fill: none; stroke-linecap: round; } /* Everything that grows starts hidden and scaled down at its own base. */ .plant [data-at] { opacity: 0; transform: scale(.4); transform-origin: 60px 92px; transition: opacity .5s var(--ease), transform .6s var(--ease); } .plant [data-at].on { opacity: 1; transform: scale(1); } .leaf-l1 { transform-origin: 59px 82px; } .leaf-r1 { transform-origin: 61px 76px; } .leaf-l2 { transform-origin: 59px 62px; } .leaf-r2 { transform-origin: 61px 56px; } .bloom, .bud { transform-origin: 60px 46px; } /* A droop at stage 0-1 that straightens as things get done. No history is involved — it reads today only, so yesterday can never make it wilt. */ .stem-group { transform-origin: 60px 96px; transition: transform .7s var(--ease); } .plant[data-stage="0"] .stem-group { transform: rotate(-9deg) translateY(3px); } .plant[data-stage="1"] .stem-group { transform: rotate(-5deg) translateY(1px); } .plant[data-stage="2"] .stem-group { transform: rotate(-2deg); } .plant[data-stage="4"] .sparkles .spark { animation: twinkle 2.4s var(--ease) infinite; } .plant[data-stage="4"] .spark.s2 { animation-delay: .5s; } .plant[data-stage="4"] .spark.s3 { animation-delay: 1.1s; } @keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } } .plant.cheer { animation: cheer .7s var(--ease); } @keyframes cheer { 0% { transform: scale(1) rotate(0); } 30% { transform: scale(1.1) rotate(-4deg); } 60% { transform: scale(1.04) rotate(3deg); } 100% { transform: scale(1) rotate(0); } } /* ---------------- progress ring ---------------- */ .ring-holder { position: relative; width: 52px; height: 52px; display: grid; place-items: center; } .ring { width: 52px; height: 52px; transform: rotate(-90deg); position: absolute; inset: 0; } .ring-bg { fill: none; stroke: var(--line); stroke-width: 5; } .ring-fg { fill: none; stroke: var(--accent-2); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 119.4; transition: stroke-dashoffset .55s var(--ease), stroke .3s var(--ease); } .ring-holder.complete .ring-fg { stroke: var(--accent-3); } .ring-text { position: relative; font-size: .72rem; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* ---------------- buttons & chips ---------------- */ button { font: inherit; color: inherit; cursor: pointer; } .icon-btn { width: 38px; height: 38px; border: 1px solid var(--line); background: var(--card); border-radius: 12px; font-size: 1.1rem; line-height: 1; display: grid; place-items: center; box-shadow: var(--shadow); transition: transform .15s var(--ease), background .2s; } .icon-btn:active { transform: scale(.94); } .tabs { display: flex; gap: 6px; background: color-mix(in oklab, var(--card) 70%, transparent); border: 1px solid var(--line); border-radius: 14px; padding: 4px; margin-bottom: 16px; } .tab { flex: 1; border: 0; background: transparent; padding: 9px 8px; border-radius: 10px; font-weight: 700; font-size: .9rem; color: var(--ink-soft); transition: background .2s, color .2s; } .tab[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); } .daybar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .daylabel { flex: 1; text-align: center; font-size: 1.05rem; border: 0; background: transparent; padding: 6px; border-radius: 10px; } .daylabel:hover { background: color-mix(in oklab, var(--card) 80%, transparent); } .toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .chip { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 14px; font-size: .87rem; font-weight: 700; color: var(--ink-soft); box-shadow: var(--shadow); transition: transform .15s var(--ease), background .2s, color .2s, border-color .2s; display: inline-flex; align-items: center; gap: 6px; } .chip:active { transform: scale(.95); } .chip[aria-pressed="true"] { background: color-mix(in oklab, var(--accent-3) 24%, var(--card)); border-color: color-mix(in oklab, var(--accent-3) 50%, var(--line)); color: var(--ink); } .chip-add { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 34%, var(--line)); } .chip-check { cursor: pointer; } .chip-check input { accent-color: var(--accent); } .ghost { border: 1px solid var(--line); background: transparent; border-radius: 10px; padding: 9px 14px; font-weight: 700; font-size: .88rem; color: var(--ink-soft); } .primary { border: 0; background: var(--accent); color: #fff; border-radius: 10px; padding: 10px 18px; font-weight: 800; font-size: .9rem; box-shadow: var(--shadow); } .primary:active { transform: scale(.97); } .danger { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 34%, var(--line)); } .hint { color: var(--ink-faint); font-size: .84rem; margin: 0 0 10px; } .bare-note { background: color-mix(in oklab, var(--accent-3) 16%, var(--card)); border: 1px solid color-mix(in oklab, var(--accent-3) 34%, var(--line)); border-radius: var(--radius); padding: 10px 14px; font-size: .88rem; color: var(--ink-soft); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bare-note button { border: 0; background: transparent; font-weight: 800; color: var(--accent); text-decoration: underline; padding: 0; } /* ---------------- lists ---------------- */ .group { margin-bottom: 20px; } .group-head { margin: 0 0 8px 2px; font-size: .78rem; font-family: Nunito, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); display: flex; align-items: center; gap: 6px; } .overdue .group-head { color: var(--accent); } .list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .chore { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; touch-action: pan-y; transition: transform .18s var(--ease), opacity .3s, box-shadow .2s; } /* Revealed under the row as you swipe it to the right. pointer-events:none is REQUIRED, not cosmetic: this spans the whole row (steps included) and, being absolutely positioned, hit-tests above the in-flow step list. Without it every step checkbox is unclickable — the overlay is invisible at opacity 0 but still swallows the pointer. */ .chore::before { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; padding-left: 22px; font-size: 1.3rem; font-weight: 800; color: #fff; background: var(--done); opacity: 0; pointer-events: none; } .chore.swiping::before { opacity: 1; } .chore-inner { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: var(--card); transition: transform .25s var(--ease); } .box { flex: none; width: 28px; height: 28px; border-radius: 9px; border: 2px solid color-mix(in oklab, var(--ink-faint) 55%, transparent); background: transparent; display: grid; place-items: center; padding: 0; transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); } .box svg { width: 16px; height: 16px; } .box path { stroke: #fff; stroke-width: 3.4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .28s var(--ease) .05s; } .chore.done .box { background: var(--done); border-color: var(--done); } .chore.done .box path { stroke-dashoffset: 0; } .chore-emoji { flex: none; font-size: 1.25rem; width: 1.6rem; text-align: center; } .chore-text { flex: 1; min-width: 0; } .chore-title { font-weight: 700; line-height: 1.25; position: relative; display: inline; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 62%; transition: background-size .32s var(--ease), color .32s var(--ease); } .chore.done .chore-title { background-size: 100% 2px; color: var(--ink-faint); } .chore.done .chore-emoji, .chore.done .chore-meta { opacity: .5; } .chore-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; font-size: .76rem; color: var(--ink-faint); } .chore-meta .tag { background: color-mix(in oklab, var(--accent-2) 16%, transparent); color: color-mix(in oklab, var(--accent-2) 78%, var(--ink)); border-radius: 999px; padding: 1px 8px; font-weight: 700; } .chore-meta .from { color: var(--accent); font-weight: 700; } .chore .more { flex: none; border: 0; background: transparent; color: var(--ink-faint); font-size: 1.2rem; line-height: 1; padding: 6px 4px; border-radius: 8px; } .chore .more:hover { background: var(--bg-2); color: var(--ink); } .chore.pop { animation: pop .42s var(--ease); } @keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(1.035); } 100% { transform: scale(1); } } .chore.dragging { opacity: .92; box-shadow: 0 18px 36px -12px rgba(0,0,0,.4); transform: scale(1.03); z-index: 5; } .chore.drag-ghost { opacity: .28; } .empty { text-align: center; padding: 34px 20px; color: var(--ink-soft); } .empty .big { font-size: 2.6rem; display: block; margin-bottom: 10px; } .empty p { margin: 0; font-size: 1.02rem; } /* ---------------- steps inside a chore ---------------- */ .steps-toggle { flex: none; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 4px 8px 4px 10px; color: var(--ink-soft); transition: background .18s, border-color .18s, color .18s; } .steps-toggle:hover { background: var(--bg-2); border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); color: var(--ink); } .steps-count { font-size: .74rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; } .steps-toggle .chev { font-size: 1rem; line-height: 1; transform: rotate(90deg); transition: transform .25s var(--ease); } .chore.open .steps-toggle .chev { transform: rotate(-90deg); } /* A finished group keeps its count legible rather than fading with the title. */ .chore.done .steps-toggle { border-color: color-mix(in oklab, var(--done) 45%, var(--line)); color: color-mix(in oklab, var(--done) 75%, var(--ink)); } /* Collapsed by default. Height animates via grid-template-rows, which — unlike max-height — needs no guessed pixel value, so it never clips a long list or leaves dead space under a short one. The wrapper holds exactly ONE child, because grid-template-rows only sizes the first row. */ .steps-wrap { position: relative; /* keeps the steps above the swipe overlay */ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); } .chore.open .steps-wrap { grid-template-rows: 1fr; } .steps { list-style: none; margin: 0; padding: 0 14px 0 52px; /* overflow:hidden is what lets the 0fr track clip this. Do NOT add min-height:0 here — it zeroes the track's content contribution on some engines and the list expands to nothing. */ overflow: hidden; } .chore.open .steps { padding-bottom: 12px; } .step { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid color-mix(in oklab, var(--line) 60%, transparent); } .step:first-child { border-top: 0; } .box-sm { width: 21px; height: 21px; border-radius: 7px; border-width: 2px; } .box-sm svg { width: 12px; height: 12px; } .box-sm path { stroke-width: 4; } .step-star { flex: none; margin-left: auto; border: 0; background: transparent; color: color-mix(in oklab, var(--ink-faint) 55%, transparent); font-size: .95rem; line-height: 1; padding: 6px 2px 6px 8px; border-radius: 8px; transition: color .18s, transform .15s var(--ease); } .step-star:hover { color: var(--accent-3); } .step-star:active { transform: scale(.85); } .step-star[aria-pressed="true"] { color: var(--accent-3); } .step.done .step-star { opacity: .5; } .step-title { flex: 1; min-width: 0; font-size: .88rem; line-height: 1.3; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 1.5px; background-position: 0 62%; transition: background-size .3s var(--ease), color .3s var(--ease); } .step.done .step-title { background-size: 100% 1.5px; color: var(--ink-faint); } .step.done .box-sm { background: var(--done); border-color: var(--done); } .step.done .box-sm path { stroke-dashoffset: 0; } @media (max-width: 480px) { .steps { padding-left: 46px; } .step { padding: 9px 0; } /* a comfortable thumb target */ } /* ---------------- week ---------------- */ .week { display: flex; flex-direction: column; gap: 10px; } .day-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); transition: border-color .2s, background .2s; } .day-col.today { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); } .day-col.drop-target { border-color: var(--accent-2); background: color-mix(in oklab, var(--accent-2) 12%, var(--card)); } .day-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); } .day-col.today .day-head { color: var(--accent); } .day-head .count { margin-left: auto; font-weight: 700; letter-spacing: 0; text-transform: none; } .day-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; min-height: 12px; } .wk-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 11px; background: var(--bg-2); font-size: .87rem; font-weight: 600; touch-action: pan-y; transition: transform .15s var(--ease), opacity .2s; } .wk-item.done { opacity: .45; text-decoration: line-through; } .wk-item .wk-emoji { flex: none; } .wk-item.dragging { box-shadow: 0 14px 28px -10px rgba(0,0,0,.45); transform: scale(1.04); z-index: 5; } .day-col .none { color: var(--ink-faint); font-size: .82rem; font-style: italic; } /* Seven columns need more room than a reading-width column gives them, so the week view alone widens the page. Every other view stays comfortably narrow. */ @media (min-width: 1000px) { body[data-view="week"] .wrap { max-width: 1120px; } } @media (min-width: 720px) { .week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: start; } /* Grid items default to min-width:auto, so a long chore title would push the seventh column off the edge. These three let the columns actually shrink. */ .day-col { padding: 10px 8px; min-width: 0; } .day-items { min-width: 0; } .day-head { flex-direction: column; gap: 0; align-items: flex-start; font-size: .68rem; } .day-head .count { margin-left: 0; } .wk-item { font-size: .76rem; padding: 6px 7px; gap: 5px; min-width: 0; } .wk-item .wk-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ---------------- all chores ---------------- */ .all-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .all-item { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); } .all-item.archived { opacity: .55; } .all-item .grow { flex: 1; min-width: 0; } .all-item .sched { font-size: .78rem; color: var(--ink-faint); margin-top: 2px; } .all-item .star { color: var(--accent-3); } /* ---------------- dialogs ---------------- */ .sheet { border: 0; padding: 0; background: transparent; max-width: 520px; width: calc(100% - 24px); margin: auto; } .sheet::backdrop { background: rgba(30,22,18,.45); backdrop-filter: blur(3px); } .sheet > form, .sheet > *:not(form) { } .sheet form, .sheet:not(:has(form)) { background: var(--card); border-radius: 22px; padding: 20px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); } .sheet.compact, .sheet.pick { background: var(--card); border-radius: 22px; padding: 20px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); } .sheet h2 { margin: 0 0 4px; font-size: 1.25rem; } .sheet .sub { margin: 0 0 14px; color: var(--ink-soft); font-size: .88rem; } .sheet[open] { animation: rise .28s var(--ease); } @keyframes rise { from { opacity: 0; transform: translateY(14px); } } .field { display: block; margin-bottom: 12px; } .field > span { display: block; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); margin-bottom: 4px; } .field > span em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; opacity: .8; } .field-row { display: flex; gap: 10px; align-items: flex-end; } .field-row .grow { flex: 1; } .emoji-field input { width: 62px; text-align: center; font-size: 1.2rem; } input[type="text"], input[type="number"], input[type="date"], input[type="password"], textarea, select { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; } input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, .chore:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; } textarea { resize: vertical; } .check-line { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; font-size: .9rem; } .check-line input { accent-color: var(--accent); width: 18px; height: 18px; margin-top: 1px; flex: none; } .check-line em { display: block; font-style: normal; font-size: .78rem; font-weight: 600; color: var(--ink-faint); margin-top: 3px; line-height: 1.35; } .check-line.unavailable { opacity: .62; } .check-line.unavailable input { pointer-events: none; } .rule { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 14px 0 8px; } .rule legend { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); padding: 0 6px; } .rule-part { margin-top: 12px; } .inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; font-weight: 600; } .inline input[type="number"] { width: 84px; } .inline select { width: auto; min-width: 96px; } .micro { font-size: .78rem; color: var(--ink-faint); margin: 8px 0 0; } .months-label { display: block; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); margin-bottom: 6px; } .months-label em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; } .dow, .months { display: flex; flex-wrap: wrap; gap: 6px; } .dow button, .months button { border: 1px solid var(--line); background: var(--bg); border-radius: 10px; padding: 8px 0; width: 42px; font-size: .8rem; font-weight: 700; color: var(--ink-soft); transition: background .18s, color .18s, border-color .18s, transform .15s var(--ease); } .months button { width: 46px; } .dow button[aria-pressed="true"], .months button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; } .dow button:active, .months button:active { transform: scale(.92); } .preset-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .mini { border: 1px dashed var(--line); background: transparent; border-radius: 999px; padding: 5px 11px; font-size: .76rem; font-weight: 700; color: var(--ink-soft); } .schedule-preview { margin: 12px 0 0; padding: 9px 12px; border-radius: 11px; background: color-mix(in oklab, var(--accent-2) 14%, transparent); color: color-mix(in oklab, var(--accent-2) 72%, var(--ink)); font-size: .87rem; font-weight: 700; } .err { background: color-mix(in oklab, var(--danger) 14%, transparent); color: var(--danger); border-radius: 11px; padding: 9px 12px; font-size: .87rem; font-weight: 700; margin: 12px 0 0; } .sheet-actions { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; } .sheet-actions .spacer { flex: 1; } .stack { display: flex; flex-direction: column; gap: 8px; } .stack button { text-align: left; border: 1px solid var(--line); background: var(--bg); border-radius: 13px; padding: 12px 14px; font-weight: 700; font-size: .93rem; transition: background .18s, border-color .18s, transform .15s var(--ease); } .stack button:hover { background: var(--bg-2); border-color: color-mix(in oklab, var(--accent) 34%, var(--line)); } .stack button:active { transform: scale(.985); } .stack button b { display: block; font-weight: 800; } .stack button em { display: block; font-style: normal; font-weight: 600; font-size: .8rem; color: var(--ink-faint); margin-top: 2px; } /* pick one */ .pick { text-align: center; } .pick-kicker { margin: 0; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); } .pick-card { padding: 20px 10px 6px; } .pick-emoji { font-size: 3.4rem; line-height: 1; margin-bottom: 10px; animation: bob 2.6s var(--ease) infinite; } @keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } } .pick-card h2 { font-size: 1.6rem; margin: 0 0 4px; } .pick-actions { flex-wrap: wrap; } /* ---------------- confetti ---------------- */ .confetti-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 999; } .confetto { position: absolute; top: -20px; will-change: transform, opacity; animation: fall var(--dur, 2.4s) linear forwards; } .confetto.round { border-radius: 50%; } .confetto.ribbon { border-radius: 2px; } .confetto.glyph { font-size: 20px; line-height: 1; } @keyframes fall { 0% { transform: translate3d(0,0,0) rotate(0deg); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate3d(var(--dx, 0px), 105vh, 0) rotate(var(--spin, 540deg)); opacity: 0; } } /* ---------------- toast ---------------- */ .toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: var(--bg); border-radius: 999px; padding: 11px 20px; font-size: .88rem; font-weight: 700; box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); z-index: 1000; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); animation: toast-in .3s var(--ease); } .toast button { border: 0; background: transparent; color: var(--accent-3); font-weight: 800; padding: 0; text-decoration: underline; } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 14px); } } /* ---------------- calm mode & reduced motion ---------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .08s !important; } } html[data-calm="1"] .confetti-layer { display: none; } html[data-calm="1"] .pick-emoji, html[data-calm="1"] .plant[data-stage="4"] .sparkles .spark { animation: none; } html[data-calm="1"] .chore.pop { animation: none; } /* ---------------- small screens ---------------- On a phone the header is pure chrome, so it gets out of the way: the list should start above the fold, not below a three-line greeting. */ @media (max-width: 480px) { .wrap { padding: 12px 14px calc(64px + env(safe-area-inset-bottom)); } .mast { gap: 10px; margin-bottom: 14px; } .plant-holder { width: 60px; height: 60px; } .greeting h1 { font-size: 1.15rem; } .greeting .sub { font-size: .83rem; } .ring-holder, .ring { width: 44px; height: 44px; } .icon-btn { width: 34px; height: 34px; } .tabs { margin-bottom: 12px; } .tab { font-size: .85rem; padding: 8px 4px; } .daybar { margin-bottom: 10px; } .chip { padding: 7px 12px; font-size: .82rem; } .toolbar { gap: 6px; margin-bottom: 12px; } .chore-inner { padding: 12px; gap: 10px; } }