/* LifeOS — pastel theme, v3. Everything tappable is at least 44px. The two steppers on the set logger are deliberately oversized: they are used ~18 times a session, standing, with tired arms. */ :root{ /* ── pastel palette ─────────────────────────────────────────────── */ --ink:#2f3340; --ink2:#5c6478; --ink3:#98a0b4; --line:#e9e6f4; --bg:#f8f6fc; --card:#ffffff; --accent:#6f7fdd; --accent-soft:#ecefff; --accent-line:#cfd6ff; --good:#4faa88; --good-soft:#e7f6ef; --good-line:#c2e6d6; --warn:#c9913f; --warn-soft:#fdf4e5; --warn-line:#f0dfbe; --bad:#cf7168; --bad-soft:#fdeeec; --bad-line:#f4d2ce; --violet:#9385d9; --violet-soft:#f1eefd; --violet-line:#ddd5f6; --rose:#dd8aa5; --rose-soft:#fdeef3; --rose-line:#f6d5e0; --teal:#5aa8b8; --teal-soft:#e8f5f8; --teal-line:#c8e6ec; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --r:16px; --topbar:rgba(248,246,252,.93); --scrim:rgba(47,51,64,.32); --toast:#2f3340; } /* ── dark, same pastel family, desaturated for a lit screen in a dim room ── Set on by app.js. Only the variables change; not one rule below knows which theme is active. */ html[data-theme="dark"]{ --ink:#e7e9f2; --ink2:#a6acc0; --ink3:#787f96; --line:#2b2e3b; --bg:#14151c; --card:#1d1f28; --accent:#8e9bee; --accent-soft:#232946; --accent-line:#3a416e; --good:#5fc19b; --good-soft:#182a25; --good-line:#2b453c; --warn:#ddb069; --warn-soft:#2a2418; --warn-line:#453a26; --bad:#e28d84; --bad-soft:#2c1e1d; --bad-line:#4a3130; --violet:#ad9eee; --violet-soft:#25233d; --violet-line:#3d3763; --rose:#eca3ba; --rose-soft:#2d1f28; --rose-line:#4a3341; --teal:#71c5d5; --teal-soft:#16292e; --teal-line:#294650; --topbar:rgba(20,21,28,.92); --scrim:rgba(0,0,0,.55); --toast:#2b2e3b; } html[data-theme="dark"] .exrow.done .tick, html[data-theme="dark"] .sumhead .tickbig{color:#14151c} html[data-theme="dark"] .units button.on, html[data-theme="dark"] .btn:not(.sec):not(.danger){color:#14151c} *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{height:100%} body{ margin:0;background:var(--bg);color:var(--ink);font-family:var(--font); line-height:1.5;-webkit-font-smoothing:antialiased; overscroll-behavior-y:none; -webkit-user-select:none;user-select:none; /* Kills the double-tap-to-zoom gesture document-wide. This is the fix for "tapping + quickly zooms the page" — iOS ignores user-scalable=no, but it respects touch-action. */ touch-action:manipulation; } button{font-family:inherit;border:0;background:none;color:inherit;cursor:pointer; touch-action:manipulation} /* ── app frame ─────────────────────────────────────────────────────── */ #app{display:flex;flex-direction:column;min-height:100%;max-width:560px;margin:0 auto} .topbar{ position:sticky;top:0;z-index:20;background:var(--topbar); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line); display:flex;align-items:center;gap:10px;padding:10px 14px; padding-top:calc(10px + env(safe-area-inset-top)); } .back{ width:38px;height:38px;border-radius:12px;background:var(--card);border:1px solid var(--line); display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--ink2);flex:0 0 auto; } .back[hidden]{display:none} .ttl{flex:1;min-width:0} .ttl h1{font-size:17px;font-weight:700;margin:0;letter-spacing:-.015em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ttl p{font-size:12px;color:var(--ink3);margin:1px 0 0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .themetog{ width:36px;height:36px;border-radius:12px;flex:0 0 auto; background:var(--card);border:1px solid var(--line);color:var(--ink2); font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center; transition:transform .18s cubic-bezier(.2,.9,.3,1.4),background .2s,color .2s; } .themetog:active{transform:scale(.9)} .themetog.spin{transform:rotate(360deg) scale(1)} .sync{flex:0 0 auto;font-size:11px;font-weight:700;padding:5px 11px;border-radius:20px; display:flex;align-items:center;gap:6px} .sync .d{width:7px;height:7px;border-radius:50%;background:currentColor} .sync.ok{background:var(--good-soft);color:var(--good)} .sync.pending{background:var(--warn-soft);color:var(--warn)} .sync.err{background:var(--bad-soft);color:var(--bad)} .sync.off{background:#eeeaf6;color:var(--ink3)} main{flex:1;padding:16px 14px calc(40px + env(safe-area-inset-bottom))} .screen[hidden]{display:none} /* ── screen transition ───────────────────────────────────────────────── app.js re-adds .in on every navigation, which restarts the animation. Going forward slides up, going back slides down, so the direction of travel is legible without thinking about it. The reverse modifier is called `nav-rev`, NOT `back`. `.back` is already the 38px back BUTTON — putting that class on a full-screen
collapsed the entire screen into a 38-pixel box. Keep this namespaced. */ .screen.in{animation:screenIn .28s cubic-bezier(.22,.85,.28,1) both} .screen.in.nav-rev{animation-name:screenBack} @keyframes screenIn{ from{opacity:0;transform:translate3d(0,10px,0)} to{opacity:1;transform:none} } @keyframes screenBack{ from{opacity:0;transform:translate3d(0,-8px,0)} to{opacity:1;transform:none} } /* Theme swaps shouldn't strobe. Only the big surfaces cross-fade; text and borders follow instantly so nothing looks smeared mid-transition. */ body,.topbar,.card,.kpi,.btn,.sessionbtn,.exrow,.stepper,.setrow,.sess, .stepper .pm,.units button,.themetog,.back{ transition:background-color .28s ease,border-color .28s ease,color .18s ease; } /* ── atoms ─────────────────────────────────────────────────────────── */ .h{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--ink3);margin:24px 0 10px} .h:first-child{margin-top:2px} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:14px 16px;margin-bottom:10px} .muted{color:var(--ink3);font-size:13px} .empty{text-align:center;color:var(--ink3);font-size:14px;padding:36px 20px;line-height:1.6} .btn{display:block;width:100%;border-radius:var(--r);padding:17px 16px; font-size:17px;font-weight:650;color:#fff;background:var(--accent); text-align:center;margin-bottom:10px;transition:transform .06s ease,opacity .15s} .btn:active{transform:scale(.985)} .btn:disabled{opacity:.4} .btn.sec{background:var(--card);color:var(--ink);border:1px solid var(--line)} .btn.violet{background:var(--violet)} .btn.good{background:var(--good)} .btn.danger{background:var(--card);color:var(--bad);border:1px solid var(--bad-line)} .btnrow{display:flex;gap:10px} .btnrow .btn{flex:1} .banner{border-radius:13px;padding:12px 15px;font-size:13.5px;margin-bottom:14px;line-height:1.55} .banner.bad{background:var(--bad-soft);color:#8a3a33;border:1px solid var(--bad-line)} .banner.warn{background:var(--warn-soft);color:#7d5610;border:1px solid var(--warn-line)} .banner b{display:block;margin-bottom:2px} /* ── home ──────────────────────────────────────────────────────────── */ .hello{padding:8px 2px 18px} .hello h2{font-size:27px;margin:0 0 5px;letter-spacing:-.03em;font-weight:750} .hello p{margin:0;font-size:14.5px;color:var(--ink2);line-height:1.5;max-width:34ch} .kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px} .kpi{border-radius:var(--r);padding:14px 15px;border:1px solid transparent} .kpi b{display:block;font-size:25px;font-weight:750;letter-spacing:-.03em; font-variant-numeric:tabular-nums;line-height:1.15} .kpi span{display:block;font-size:11.5px;font-weight:650;margin-top:3px;opacity:.82} .kpi.a{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)} .kpi.b{background:var(--rose-soft); border-color:var(--rose-line); color:var(--rose)} .kpi.c{background:var(--teal-soft); border-color:var(--teal-line); color:var(--teal)} .kpi.d{background:var(--violet-soft);border-color:var(--violet-line);color:var(--violet)} .kpi .sub{font-size:10.5px;font-weight:600;opacity:.7;margin-top:2px} /* ── session picker / rows ─────────────────────────────────────────── */ .sessionbtn{display:flex;align-items:center;gap:14px;width:100%;text-align:left; background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:15px 16px;margin-bottom:10px;transition:transform .06s ease} .sessionbtn:active{transform:scale(.99)} .sessionbtn .badge{width:46px;height:46px;border-radius:14px;flex:0 0 auto; display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:750; background:var(--accent-soft);color:var(--accent)} .sessionbtn:nth-child(2) .badge{background:var(--rose-soft);color:var(--rose)} .sessionbtn:nth-child(3) .badge{background:var(--teal-soft);color:var(--teal)} .sessionbtn:nth-child(4) .badge{background:var(--violet-soft);color:var(--violet)} .sessionbtn:nth-child(5) .badge{background:var(--warn-soft);color:var(--warn)} .sessionbtn .n{font-size:16.5px;font-weight:650;letter-spacing:-.01em} .sessionbtn .s{font-size:12.5px;color:var(--ink3);margin-top:1px} .sessionbtn .chev{margin-left:auto;color:var(--ink3);font-size:19px} .progress{display:flex;align-items:baseline;gap:8px;margin-bottom:14px; background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 15px} .progress .big{font-size:25px;font-weight:750;letter-spacing:-.02em} .exrow{display:flex;align-items:center;gap:13px;width:100%;text-align:left; background:var(--card);border:1px solid var(--line);border-radius:14px; padding:13px 15px;margin-bottom:9px;transition:transform .06s ease} .exrow:active{transform:scale(.99)} .exrow.done{background:var(--good-soft);border-color:var(--good-line)} .exrow .tick{width:28px;height:28px;border-radius:50%;flex:0 0 auto;border:1.6px solid var(--line); display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;background:var(--card)} .exrow.done .tick{background:var(--good);border-color:var(--good)} .exrow .mid{flex:1;min-width:0} .exrow .n{font-size:14.5px;font-weight:650;letter-spacing:-.01em;line-height:1.3} .exrow .s{font-size:12px;color:var(--ink3);margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .exrow .cnt{font-size:12px;font-weight:700;color:var(--ink3);flex:0 0 auto} .exrow.done .cnt{color:var(--good)} /* ── set logger ────────────────────────────────────────────────────── */ .lasttime{background:var(--violet-soft);border:1px solid var(--violet-line); border-radius:14px;padding:11px 14px;margin-bottom:12px} .lasttime .k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--violet);margin-bottom:3px} .lasttime .v{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums} .setlist{margin-bottom:12px} .setrow{display:flex;align-items:center;gap:11px;background:var(--card); border:1px solid var(--line);border-radius:13px;padding:10px 13px;margin-bottom:7px; font-variant-numeric:tabular-nums} .setrow .num{width:26px;height:26px;border-radius:9px;background:var(--bg);color:var(--ink2); display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;flex:0 0 auto} .setrow .v{flex:1;font-size:14.5px;font-weight:600;min-width:0} .setrow .st{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px} .setrow .st.pending{background:var(--warn-soft);color:var(--warn)} .setrow .st.sent{background:var(--good-soft);color:var(--good)} .setrow .st.error{background:var(--bad-soft);color:var(--bad)} .setrow .undo{font-size:12.5px;font-weight:700;color:var(--bad);padding:8px 4px 8px 8px} .stepper{background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:12px 14px 14px;margin-bottom:11px} .stepper .top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px} .stepper .lbl{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)} .stepper .hint{font-size:11.5px;color:var(--ink3)} .stepper .row{display:flex;align-items:center;gap:12px} .stepper .pm{width:66px;height:66px;border-radius:18px;background:var(--bg); border:1px solid var(--line);font-size:31px;font-weight:300;color:var(--ink);line-height:1; flex:0 0 auto;display:flex;align-items:center;justify-content:center; transition:transform .06s ease,background .1s} .stepper .pm:active{transform:scale(.94);background:var(--accent-soft)} .stepper .pm:disabled{opacity:.28} .stepper .val{flex:1;text-align:center;padding:6px 2px;border-radius:14px; transition:background .12s} .stepper .val:active{background:var(--accent-soft)} .stepper .val .n{font-size:40px;font-weight:750;letter-spacing:-.035em; font-variant-numeric:tabular-nums;line-height:1.05;display:block} .stepper .val .u{display:block;font-size:11.5px;font-weight:650;color:var(--ink3); letter-spacing:.07em;text-transform:uppercase;margin-top:2px} .stepper .val .tap{display:block;font-size:10px;color:var(--ink3);opacity:.65;margin-top:3px} .units{display:flex;gap:7px;margin-bottom:13px} .units button{flex:1;padding:13px 4px;border-radius:13px;background:var(--card); border:1px solid var(--line);font-size:13px;font-weight:650;color:var(--ink2)} .units button.on{background:var(--accent);border-color:var(--accent);color:#fff} /* ── keypad sheet ──────────────────────────────────────────────────── */ #pad{position:fixed;inset:0;z-index:80;display:none} #pad.show{display:block} #pad .scrim{position:absolute;inset:0;background:var(--scrim);backdrop-filter:blur(3px); animation:scrimIn .24s ease both} #pad .sheet{position:absolute;left:0;right:0;bottom:0;background:var(--bg); border-radius:26px 26px 0 0;padding:16px 14px calc(16px + env(safe-area-inset-bottom)); box-shadow:0 -10px 44px rgba(0,0,0,.22);max-width:560px;margin:0 auto; animation:sheetIn .3s cubic-bezier(.2,.9,.28,1.02) both} /* Closing is animated too — a sheet that vanishes instantly reads as a glitch. */ #pad.closing .scrim{animation:scrimOut .18s ease both} #pad.closing .sheet{animation:sheetOut .2s cubic-bezier(.4,0,.9,.5) both} @keyframes sheetIn{from{transform:translate3d(0,100%,0)}to{transform:none}} @keyframes sheetOut{from{transform:none}to{transform:translate3d(0,100%,0)}} @keyframes scrimIn{from{opacity:0}to{opacity:1}} @keyframes scrimOut{from{opacity:1}to{opacity:0}} #pad .keys button,#pad .done{animation:keyIn .3s cubic-bezier(.2,.9,.3,1) both} @keyframes keyIn{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}} #pad .lbl{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--ink3);text-align:center;margin-bottom:4px} #pad .readout{font-size:42px;font-weight:750;letter-spacing:-.035em;text-align:center; font-variant-numeric:tabular-nums;margin-bottom:14px;min-height:52px} #pad .readout span{font-size:15px;font-weight:600;color:var(--ink3);margin-left:6px} #pad .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} #pad .keys button{background:var(--card);border:1px solid var(--line);border-radius:15px; height:62px;font-size:25px;font-weight:600;transition:transform .06s ease,background .1s} #pad .keys button:active{transform:scale(.95);background:var(--accent-soft)} #pad .keys .wide{grid-column:span 1} #pad .done{margin-top:10px} /* ── history ───────────────────────────────────────────────────────── */ .sess{background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:13px 15px;margin-bottom:9px;width:100%;text-align:left} .sess .top{display:flex;align-items:baseline;gap:8px} .sess .d{font-size:14.5px;font-weight:700;letter-spacing:-.01em} .sess .tag{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px; background:var(--accent-soft);color:var(--accent);margin-left:auto} .sess .nums{font-size:12.5px;color:var(--ink3);margin-top:4px;font-variant-numeric:tabular-nums} .sess .exs{font-size:12px;color:var(--ink2);margin-top:6px;line-height:1.55} /* ── summary ───────────────────────────────────────────────────────── */ .sumhead{text-align:center;padding:22px 10px 18px} .sumhead .tickbig{width:64px;height:64px;border-radius:50%;background:var(--good-soft); color:var(--good);display:flex;align-items:center;justify-content:center; font-size:31px;margin:0 auto 12px;border:1px solid var(--good-line)} .sumhead h2{font-size:23px;margin:0 0 3px;letter-spacing:-.02em} .sumhead p{margin:0;color:var(--ink2);font-size:14px} .statrow{display:flex;gap:9px;margin-bottom:14px} .statrow .s{flex:1;background:var(--card);border:1px solid var(--line);border-radius:14px; padding:12px 8px;text-align:center} .statrow .s b{display:block;font-size:22px;font-weight:750;letter-spacing:-.02em; font-variant-numeric:tabular-nums} .statrow .s span{font-size:10.5px;color:var(--ink3);font-weight:650} /* ── toast ─────────────────────────────────────────────────────────── */ #toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom)); transform:translate(-50%,90px);background:var(--toast);color:#fff;font-size:13.5px;font-weight:600; padding:12px 18px;border-radius:24px;z-index:90;opacity:0; transition:transform .22s cubic-bezier(.2,.9,.3,1.2),opacity .2s; max-width:88vw;text-align:center;pointer-events:none} #toast.show{transform:translate(-50%,0);opacity:1} /* ── respect the system setting ──────────────────────────────────────── If the phone is set to reduce motion, everything still works — it just arrives instead of sliding. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important} }