/* twins · app.css מערכת העיצוב המחייבת: DESIGN.md. בלוק הטוקנים מועתק משם כמו שהוא. שמות המחלקות הם שמות הרכיבים שם. שתי ערכות (בהיר / כהה, DESIGN 8). שום משטח רווי מעל 64x64 חוץ מהפלוס. מנפשים רק transform ו-opacity (והחלפת background-color במעבר ילד). */ @font-face{font-family:"Heebo";src:url("fonts/heebo-var-hebrew.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F} @font-face{font-family:"Heebo";src:url("fonts/heebo-var-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2011-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ===== TOKENS ===== Colour + elevation: both themes, verbatim from DESIGN.md 8.1 (design/round2/tokens.css). Static sets, no color-mix. is set before first paint by js/theme-boot.js; no attribute = dark. data-child also sits on .toast and .voice, so every light child block is written for html and for a nested element. */ /* ================= DARK (default) ================= */ :root,[data-theme="dark"]{ color-scheme:dark; /* ground, neutral (login, before a child is known): charcoal, not black */ --bg:#1D1C1A; --s1:#262422; --s2:#302D2A; --s3:#3B3834; --s4:#4A4641; --tray:#262422; --line:rgba(255,238,214,.10); --line-2:rgba(255,238,214,.19); /* ink */ --tx:#F2EEE8; --tx2:#BFB7AB; --tx3:#A69E92; /* identity: WHO. chrome only, never data (except the compare chart) */ --adam:#6CB4EE; --ivri:#86D08C; --child:#E4DACB; --child-ink:#14110C; --child-tint:rgba(228,218,203,.10); --child-line:rgba(228,218,203,.38); /* semantic: WHAT. data only, never chrome */ --c-feed:#E9A03E; --c-formula:#E9A03E; --c-breast:#F3DDB2; --c-feed-ink:#1B1206; --c-feed-tint:rgba(233,160,62,.14); --c-feed-line:rgba(233,160,62,.48); --c-sleep:#9A97C9; --c-sleep-tint:rgba(154,151,201,.22); --c-diaper:#B5AC9E; --danger:#EE7A62; --danger-tint:rgba(238,122,98,.14); --danger-line:rgba(238,122,98,.50); /* depth */ --shade:rgba(0,0,0,.45); --scrim:rgba(8,9,10,.62); --focus:rgba(242,238,232,.55); --e-toast:inset 0 0 0 1px var(--line-2),0 6px 14px var(--shade); --e-sheet:inset 0 1px 0 var(--line-2),0 -20px 60px rgba(0,0,0,.5); --e-fab:0 6px 16px var(--shade); } [data-child="adam"]{ --bg:#1E2327; --s1:#262C31; --s2:#30373D; --s3:#3B434A; --s4:#4A535B; --tray:#262C31; --line:rgba(214,236,255,.10); --line-2:rgba(214,236,255,.19); --child:#6CB4EE; --child-ink:#0B1218; --child-tint:rgba(108,180,238,.14); --child-line:rgba(108,180,238,.50)} [data-child="ivri"]{ --bg:#1F241D; --s1:#272D25; --s2:#31382E; --s3:#3C4439; --s4:#4B5447; --tray:#272D25; --line:rgba(222,255,224,.10); --line-2:rgba(222,255,224,.19); --child:#86D08C; --child-ink:#0C150D; --child-tint:rgba(134,208,140,.13); --child-line:rgba(134,208,140,.48)} /* ================= LIGHT ================= */ [data-theme="light"]{ color-scheme:light; /* ground, neutral: cool paper grey, never white */ --bg:#E3E5E7; --s1:#F4F5F6; --s2:#EBEDEF; --s3:#D6D9DC; --s4:#C6CACE; --tray:#F4F5F6; --line:rgba(26,29,33,.11); --line-2:rgba(26,29,33,.20); --tx:#1A1D21; --tx2:#42474D; --tx3:#5B6167; /* identity, one step deeper so the name and the save label read on a light ground */ --adam:#185D95; --ivri:#256730; --child:#2F3A45; --child-ink:#F3F5F7; --child-tint:rgba(47,58,69,.08); --child-line:rgba(47,58,69,.38); /* data: amber turns burnt-amber, cream turns honey, lavender turns indigo, grey turns warm slate */ --c-feed:#8F420B; --c-formula:#8F420B; --c-breast:#A47C28; --c-feed-ink:#FBF3EA; --c-feed-tint:rgba(143,66,11,.10); --c-feed-line:rgba(143,66,11,.42); --c-sleep:#5A55A0; --c-sleep-tint:rgba(90,85,160,.16); --c-diaper:#6E675D; --danger:#A42A18; --danger-tint:rgba(164,42,24,.10); --danger-line:rgba(164,42,24,.45); /* depth: shadows tinted to the ground, never black on light */ --shade:rgba(24,38,52,.16); --scrim:rgba(20,30,40,.34); --focus:rgba(26,29,33,.45); --e-toast:inset 0 0 0 1px var(--line-2),0 8px 20px var(--shade); --e-sheet:inset 0 1px 0 rgba(255,255,255,.7),0 -12px 40px rgba(24,38,52,.14); --e-fab:0 4px 12px var(--shade); } [data-theme="light"][data-child="adam"],[data-theme="light"] [data-child="adam"]{ --bg:#E0E6EB; --s1:#F3F6F8; --s2:#E9EEF2; --s3:#D2DAE1; --s4:#C1CBD4; --tray:#F3F6F8; --line:rgba(19,32,43,.11); --line-2:rgba(19,32,43,.20); --tx:#13202B; --tx2:#3C4A56; --tx3:#55626E; --child:#185D95; --child-ink:#F3F7FA; --child-tint:rgba(24,93,149,.10); --child-line:rgba(24,93,149,.45)} [data-theme="light"][data-child="ivri"],[data-theme="light"] [data-child="ivri"]{ --bg:#E0E7DE; --s1:#F3F6F1; --s2:#E9EFE7; --s3:#D3DCD0; --s4:#C2CDBE; --tray:#F3F6F1; --line:rgba(21,33,26,.11); --line-2:rgba(21,33,26,.20); --tx:#15211A; --tx2:#3D4C41; --tx3:#566459; --child:#256730; --child-ink:#F3F8F3; --child-tint:rgba(37,103,48,.10); --child-line:rgba(37,103,48,.45)} /* non-colour tokens (unchanged) */ :root{ /* type */ --ff:"Heebo",system-ui,-apple-system,sans-serif; --fs-hero:96px; --fs-hero-2:56px; --fs-display:72px; --fs-amount:52px; --fs-total:44px; --fs-field:40px; --fs-voice:30px; --fs-name:28px; --fs-key:26px; --fs-stat:24px; --fs-title:22px; --fs-lead:19px; --fs-row:17px; --fs-body:16px; --fs-meta:14px; --fs-axis:12px; --fw-r:400; --fw-m:500; --fw-s:600; --fw-b:700; --fw-x:800; --lh-tight:1; --lh-num:1.1; --lh-body:1.35; --tr-hero:-.035em; --tr-num:-.02em; --tr-title:-.01em; /* space, radius */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --gut:16px; --r-s:10px; --r-m:14px; --r-l:20px; --r-sheet:28px; --r-full:999px; /* sizes */ --hit:48px; --h-switch:72px; --h-tabbar:76px; --fab:60px; --h-row:64px; --h-key:52px; --h-save:56px; /* layers */ --z-top:10; --z-tabbar:20; --z-toast:25; --z-scrim:30; --z-sheet:40; --z-voice:50; --z-login:80; /* motion */ --d-press:120ms; --d-fast:160ms; --d-swap:140ms; --d-toast:260ms; --d-ind:320ms; --d-sheet:360ms; --d-life:8000ms; --ease-out:cubic-bezier(.23,1,.32,1); --ease-drawer:cubic-bezier(.32,.72,0,1); /* safe areas */ --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px); /* round 2 (DESIGN 8.4-8.5) */ --fs-giant:100px; --fs-giant-2:60px; --fw-giant:500; --r-tray:26px; } /* ---------- base ---------- */ *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{height:100%;margin:0;background:var(--bg);overflow:hidden} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;transition:background-color var(--d-ind) var(--ease-drawer)} body{font-family:var(--ff);color:var(--tx);font-size:var(--fs-body);line-height:var(--lh-body);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1;-webkit-font-smoothing:antialiased;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;touch-action:manipulation;-webkit-appearance:none;appearance:none} input{font:inherit;color:inherit;-webkit-user-select:text;user-select:text;-webkit-appearance:none;appearance:none} h1,h2,h3,p,ul{margin:0;padding:0} ul{list-style:none} bdi{unicode-bidi:isolate} svg.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block} ::selection{background:var(--s4);color:var(--tx)} :focus{outline:none} :focus-visible{outline:2px solid var(--focus);outline-offset:2px} .sheet:focus-visible,.wheel:focus-visible{outline:none} html.no-anim,html.no-anim *{transition:none!important} /* the app frame: everything is positioned inside it, so a wide window shows a phone-wide column and nothing escapes */ .app{position:fixed;inset:0;max-width:520px;margin-inline:auto;overflow:hidden;background:var(--bg);isolation:isolate;transition:background-color var(--d-ind) var(--ease-drawer)} .app.is-offline{--top-extra:37px} /* ---------- app header + child switch ---------- */ .top{position:absolute;inset:0 0 auto 0;z-index:var(--z-top);padding:var(--safe-t) var(--gut) 0;background:var(--bg);transition:background-color var(--d-ind) var(--ease-drawer)} .switch{position:relative;display:grid;grid-template-columns:1fr 1fr;height:var(--h-switch);border-bottom:1px solid var(--line)} .seg{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;text-align:start;height:var(--h-switch);padding-bottom:6px;min-width:0;overflow:hidden;transition:transform var(--d-press) var(--ease-out)} .seg:active{transform:scale(.98)} .seg .name{font-size:var(--fs-name);font-weight:var(--fw-x);line-height:var(--lh-num);letter-spacing:var(--tr-title);color:var(--tx3);transition:color var(--d-fast) ease} .seg .sub{display:flex;align-items:center;gap:6px;font-size:var(--fs-meta);color:var(--tx3);white-space:nowrap;min-height:19px} .seg .sub svg{width:15px;height:15px;color:var(--c-sleep)} .seg .sub{max-width:100%} .seg .sub span{min-width:0;overflow:hidden;text-overflow:ellipsis} .seg[aria-selected="true"] .sub{color:var(--tx2)} .seg[data-child="adam"][aria-selected="true"] .name{color:var(--adam)} .seg[data-child="ivri"][aria-selected="true"] .name{color:var(--ivri)} .seg .sub.flash{color:var(--tx)} .seg-ind{position:absolute;bottom:-1px;inset-inline-start:0;width:44px;height:3px;border-radius:2px;background:var(--child);transition:transform var(--d-ind) var(--ease-drawer),background-color var(--d-ind) ease} /* offline indicator: one quiet line under the switch, never a banner, never red */ .offline{display:flex;align-items:center;gap:8px;height:37px;font-size:var(--fs-meta);color:var(--tx2);border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden} .offline[hidden]{display:none} .offline svg{width:18px;height:18px;color:var(--tx3)} .offline span{min-width:0;overflow:hidden;text-overflow:ellipsis} /* ---------- screen ---------- */ .screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(var(--safe-t) + var(--h-switch) + var(--top-extra,0px)) var(--gut) calc(var(--safe-b) + var(--h-tabbar) + var(--sp-6));scrollbar-width:none;transition:opacity var(--d-swap) ease} .screen::-webkit-scrollbar{display:none} .screen.swap{opacity:0} .pushwrap{position:absolute;inset:0;transform-origin:50% 40%} .pushwrap.pushed{border-radius:22px;overflow:hidden;will-change:transform} /* ---------- hero: last feed ---------- */ .hero{padding:22px 0 0} .hero-label{font-size:var(--fs-body);color:var(--tx2);display:flex;align-items:center;gap:8px} .hero-label .live{width:8px;height:8px;border-radius:50%;background:var(--child);flex:none} .hero-nums{display:flex;align-items:baseline;justify-content:space-between;margin-top:4px;min-height:92px} .hero .big{display:flex;align-items:baseline;white-space:nowrap} .hero .big .num{font-size:var(--fs-giant);font-weight:var(--fw-giant);line-height:.92;letter-spacing:-.045em} .hero .big .num.sec{font-size:var(--fs-giant-2);letter-spacing:-.03em} .hero .big .num.just{font-size:var(--fs-hero-2);letter-spacing:var(--tr-num)} /* the gap between "2 שע׳" and "34 דק׳" sits on the unit (RTL), not on the dir=ltr numeral where inline-start flips */ .hero .big .unit:not(:last-child){margin-inline-end:12px} .hero .amt{white-space:nowrap} .hero .amt .num{font-size:44px;font-weight:var(--fw-r);line-height:var(--lh-tight);letter-spacing:-.03em} .hero .unit{font-size:19px;font-weight:var(--fw-m);color:var(--tx2);margin-inline-start:6px} .hero .amt .unit{font-size:var(--fs-body)} .hero-meta{margin-top:12px;font-size:var(--fs-body);color:var(--tx2);display:flex;gap:8px;align-items:center} .hero-meta .fd,.hero-meta > svg{color:var(--c-feed)} .hero-meta svg{width:20px;height:20px} .hero-note{margin-top:4px;font-size:15px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hero-actions{display:flex;gap:8px;margin-top:16px} .btn{height:var(--hit);padding:0 18px;border-radius:var(--r-m);font-size:var(--fs-body);font-weight:var(--fw-s);background:var(--s2);color:var(--tx);transition:transform var(--d-press) var(--ease-out)} .btn:active{transform:scale(.97)} .btn.primary{background:var(--child-tint);box-shadow:inset 0 0 0 1.5px var(--child-line);color:var(--child)} .btn.quiet{background:none;color:var(--tx2)} .hero.empty .hero-title{font-size:var(--fs-name);font-weight:var(--fw-x);line-height:1.2;margin-top:6px;letter-spacing:var(--tr-title)} .hero.empty p{color:var(--tx2);margin-top:8px;max-width:30ch} /* ---------- today summary + stat tiles ---------- */ .today{padding:18px 0 6px;border-top:1px solid var(--line)} .sec-head{display:flex;justify-content:space-between;align-items:baseline} .sec-head h2{font-size:var(--fs-body);font-weight:var(--fw-b)} .sec-head span{font-size:var(--fs-meta);color:var(--tx3)} .total{display:flex;align-items:baseline;gap:6px;margin-top:4px} .total .num{font-size:var(--fs-total);font-weight:var(--fw-s);letter-spacing:var(--tr-num);line-height:1.05} .total .unit{font-size:var(--fs-body);color:var(--tx2)} .meter{position:relative;height:4px;margin-top:10px;border-radius:2px;background:var(--s3)} .meter i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:2px;background:var(--c-feed)} .meter b{position:absolute;top:-5px;width:2px;height:14px;border-radius:1px;background:var(--tx2)} .stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px} .stat{padding:2px 0 12px;min-width:0} .stat > b{display:block;font-size:var(--fs-stat);font-weight:var(--fw-s);letter-spacing:-.015em;line-height:28px;white-space:nowrap} .stat > b.txt{font-size:var(--fs-lead);font-weight:var(--fw-m)} .stat > b small{font-size:var(--fs-meta);font-weight:var(--fw-m);color:var(--tx2);margin-inline:3px 5px;letter-spacing:0} .stat > span{display:block;font-size:var(--fs-meta);color:var(--tx3);white-space:nowrap} .stats .stat:nth-child(2){text-align:center} .stats .stat:nth-child(3){text-align:end} .stats .stat:nth-child(3) > b small:last-child{margin-inline-end:0} /* ---------- home, round 2 (DESIGN 8.3-8.5; markup as in design/round2/ref.src.html) ---------- */ /* quick actions: one row, natural widths, text only, wearing the tray's surface.
*/ .quick:not(button){display:flex;gap:8px;padding-top:20px;flex-wrap:nowrap} .quick:not(button) > button{height:var(--hit);padding:0 16px;border-radius:var(--r-m);background:var(--tray);font-size:var(--fs-body);font-weight:var(--fw-s);color:var(--tx);white-space:nowrap;flex:none;min-width:0;transition:transform var(--d-press) var(--ease-out),background-color var(--d-ind) var(--ease-drawer)} .quick:not(button) > button:active{transform:scale(.97);background:var(--s2)} /* the one stats line on home */ .todayline{display:flex;align-items:baseline;gap:18px;padding:22px 0 14px;font-size:var(--fs-body);color:var(--tx2);white-space:nowrap;overflow:hidden} .todayline b{font-size:18px;font-weight:var(--fw-s);color:var(--tx);margin-inline-end:4px} .todayline .k{color:var(--tx);font-weight:var(--fw-b)} .railbox{padding:6px 0 18px} /* the tray: the one surface change per screen. Ground = what is true now, tray = the record. Full bleed, rounded on top only, no border, no shadow. The two offset copies of its own box paint the ground under a short list down to the tab bar (a shadow is ink overflow: it adds no scroll length). */ .tray{position:relative;margin-inline:calc(var(--gut) * -1);padding:6px var(--gut) 40px;border-radius:var(--r-tray) var(--r-tray) 0 0;background:var(--tray);min-height:40vh;box-shadow:0 30vh 0 var(--tray),0 60vh 0 var(--tray);transition:background-color var(--d-ind) var(--ease-drawer)} .tray .list,.tray .empty-list{border-top:0} .tray .row:last-child{border-bottom:0} .tray .row-in{min-height:60px;padding:9px 0;background:var(--tray)} .tray .row-in:active{background:var(--s2)} .tray .row .ic svg{width:22px;height:22px} .tray .row .val b{font-size:var(--fs-lead);font-weight:var(--fw-s)} .tray .row .val.q b{font-size:var(--fs-body);font-weight:var(--fw-m);color:var(--tx2)} .tray-h{padding:12px 0 2px;font-size:var(--fs-meta);color:var(--tx3)} .tray .day-sep{padding:14px 0 4px} /* key-value rows inside a tray (trends) */ .kv{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;border-bottom:1px solid var(--line);font-size:var(--fs-body);color:var(--tx2)} .kv:last-child{border-bottom:0} .kv b{font-size:var(--fs-lead);font-weight:var(--fw-s);color:var(--tx)} .kv small{font-size:13px;color:var(--tx3);margin-inline-start:3px} /* ---------- timeline rows ---------- */ .list{border-top:1px solid var(--line)} .row{position:relative;border-bottom:1px solid var(--line);overflow:hidden;touch-action:pan-y} .row-in{position:relative;display:flex;align-items:center;gap:12px;min-height:var(--h-row);padding:10px 0;background:var(--bg);width:100%;text-align:start;touch-action:pan-y} .row-in:active{background:var(--s1)} .row .t{position:relative;width:48px;font-size:var(--fs-body);color:var(--tx2);font-weight:var(--fw-m);flex:none} .row .ic{color:var(--tx3)} .row.feed .ic{color:var(--c-feed)} .row.sleep .ic{color:var(--c-sleep)} .row .body{flex:1;min-width:0;display:flex;flex-direction:column} .row .ttl{font-size:var(--fs-row);font-weight:var(--fw-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .row .sub{font-size:var(--fs-meta);color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .row .sub.note{color:var(--tx2);white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2} .row .val{display:flex;align-items:baseline;gap:4px;flex:none} .row .val b{font-size:var(--fs-stat);font-weight:var(--fw-s);letter-spacing:-.015em} .row .val i{font-style:normal;font-size:13px;color:var(--tx3)} .row .val.q b{font-size:var(--fs-row);font-weight:var(--fw-m);color:var(--tx2)} .row .val.q b small{font-size:13px;color:var(--tx3);font-weight:var(--fw-r);margin-inline:3px 5px} .row .val.q b small:last-child{margin-inline-end:0} .row.pending .t::after{content:"";position:absolute;inset-inline-start:0;bottom:-10px;width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--tx3)} .row-del{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding-inline-end:20px;color:var(--danger);font-weight:var(--fw-s);background:var(--danger-tint)} .row.gone{transition:opacity 180ms ease 80ms;opacity:0} .day-sep{padding:18px 0 8px;font-size:var(--fs-meta);color:var(--tx3)} .empty-list{padding:28px 0;color:var(--tx3);font-size:15px;border-top:1px solid var(--line)} /* ---------- tab bar with the FAB cluster inside it: opaque, nothing floats over data ---------- */ .tabbar{position:absolute;inset:auto 0 0 0;z-index:var(--z-tabbar);height:calc(var(--h-tabbar) + var(--safe-b));padding:0 6px var(--safe-b);display:grid;grid-template-columns:1fr 1fr auto 1fr 1fr;align-items:center;background:var(--bg);border-top:1px solid var(--line);transition:background-color var(--d-ind) var(--ease-drawer)} .tab{position:relative;height:var(--h-tabbar);font-size:15px;font-weight:var(--fw-m);color:var(--tx3);transition:color var(--d-fast) ease} .tab[aria-current="page"]{color:var(--tx);font-weight:var(--fw-b)} .tab[aria-current="page"]::before{content:"";position:absolute;top:-1px;left:50%;width:28px;height:3px;margin-left:-14px;border-radius:2px;background:var(--child)} .fabs{display:flex;gap:12px;padding:0 8px} .fab{width:var(--fab);height:var(--fab);display:grid;place-items:center;border-radius:50%;box-shadow:var(--e-fab);transition:transform var(--d-press) var(--ease-out),background-color var(--d-ind) ease} .fab:active{transform:scale(.94)} .fab.plus{background:var(--child);color:var(--child-ink)} .fab.plus svg{width:28px;height:28px;stroke-width:2.4} .fab.mic{background:var(--s3);color:var(--tx);box-shadow:var(--e-fab),inset 0 0 0 1px var(--line-2)} .fab.mic svg{width:26px;height:26px} /* ---------- scrim + bottom sheet ---------- */ .scrim{position:absolute;inset:0;z-index:var(--z-scrim);background:var(--scrim);opacity:0;pointer-events:none} .scrim.on{pointer-events:auto} #sheets{position:absolute;inset:0;z-index:var(--z-sheet);pointer-events:none} .sheet{position:absolute;inset:auto 0 var(--kb,0px) 0;pointer-events:auto;display:flex;flex-direction:column;max-height:calc(100% - var(--safe-t) - 8px - var(--kb,0px) - var(--vvtop,0px));background:var(--s1);border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--e-sheet);padding:0 var(--gut) calc(var(--safe-b) + 12px);will-change:transform;touch-action:none;transition:background-color var(--d-ind) var(--ease-drawer)} .sheet > *{flex:none} .sheet > .sheet-body{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y} .sheet > .sheet-body::-webkit-scrollbar{display:none} .sheet-body > *{flex:none} .sheet.closing > :not(.grab):not(.sheet-head),.sheet.closing .sheet-head button{pointer-events:none} .sheet.kb{padding-bottom:12px} .sheet.kb .pad-zone,.sheet.kb .sleep-wheels,.sheet.kb .sheet-del{display:none} .grab{height:20px;display:grid;place-items:center;margin:0 calc(var(--gut) * -1);cursor:grab;touch-action:none} .grab i{width:38px;height:5px;border-radius:3px;background:var(--s4)} .sheet-head{display:flex;align-items:center;gap:12px;height:54px;margin-bottom:6px;touch-action:none} .sheet-head h2{font-size:var(--fs-title);font-weight:var(--fw-x);letter-spacing:var(--tr-title);white-space:nowrap} .sheet-head .x{margin-inline-start:auto;width:var(--hit);height:var(--hit);margin-inline-end:-12px;display:grid;place-items:center;color:var(--tx2);flex:none} /* segmented control (.mini = its compact form in sheet heads and wheel panes) */ .mini,.segmented{display:flex;background:var(--s2);border-radius:12px;padding:3px} .mini{margin-inline-start:4px} .mini button,.segmented button{height:var(--hit);min-width:64px;padding:0 14px;border-radius:9px;font-size:var(--fs-body);font-weight:var(--fw-s);color:var(--tx3);transition:background-color var(--d-fast) ease,color var(--d-fast) ease} .segmented button{flex:1} .mini button[aria-pressed="true"],.segmented button[aria-pressed="true"]{background:var(--s4);color:var(--tx)} .mini button[data-c="adam"][aria-pressed="true"]{color:var(--adam)} .mini button[data-c="ivri"][aria-pressed="true"]{color:var(--ivri)} /* dark: a child name on s4 is 3.5:1 (adam) / 4.3:1 (ivri). The name stays --tx (6.8:1) and the child colour moves to an underline */ :root:not([data-theme="light"]) .mini button[data-c][aria-pressed="true"]{color:var(--tx)} :root:not([data-theme="light"]) .mini button[data-c="adam"][aria-pressed="true"]{box-shadow:inset 0 -3px 0 var(--adam)} :root:not([data-theme="light"]) .mini button[data-c="ivri"][aria-pressed="true"]{box-shadow:inset 0 -3px 0 var(--ivri)} /* light: a child name on s4 is 4.2:1. The picked child sits on a raised light thumb instead (6:1 and up) */ [data-theme="light"] .mini button[data-c][aria-pressed="true"],[data-theme="light"] .segmented button[data-c][aria-pressed="true"]{background:var(--s1);box-shadow:0 1px 3px var(--shade),inset 0 0 0 1px var(--line)} /* ---------- add menu: context rows + one-tap chips ---------- */ .menu-row{display:flex;align-items:center;gap:12px;min-height:66px;border-top:1px solid var(--line)} .menu-row:first-of-type{border-top:0} .menu-main{flex:1;min-width:0;display:flex;align-items:center;gap:14px;min-height:66px;text-align:start;transition:opacity var(--d-press) ease} .menu-main:active{opacity:.7} .menu-main .ic{width:44px;height:44px;border-radius:var(--r-m);display:grid;place-items:center;background:var(--s2);color:var(--tx2);flex:none} .menu-main.feedish .ic{color:var(--c-feed)} .menu-main.sleepish .ic{color:var(--c-sleep)} .menu-main .lbl{font-size:var(--fs-lead);font-weight:var(--fw-s);min-width:0} .hint bdi{display:inline-block} .menu-main .hint{display:block;font-size:var(--fs-meta);font-weight:var(--fw-r);color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .menu-row .quick{height:var(--hit);padding:0 14px;border-radius:var(--r-m);background:var(--s3);font-size:15px;font-weight:var(--fw-s);color:var(--tx);white-space:nowrap;flex:none;transition:transform var(--d-press) var(--ease-out)} .menu-row .quick:active{transform:scale(.96)} /* ---------- feed sheet ---------- */ .amounts{display:grid;grid-template-columns:1fr 1fr;gap:10px} .afield{position:relative;height:86px;width:100%;border-radius:var(--r-l);background:var(--s2);padding:10px 14px;text-align:start;display:flex;flex-direction:column;justify-content:space-between;transition:box-shadow var(--d-fast) ease,background-color var(--d-fast) ease} .afield .lbl{font-size:15px;color:var(--tx2);font-weight:var(--fw-m);display:flex;align-items:center;gap:7px} .afield .lbl i{width:10px;height:10px;border-radius:3px;background:var(--c-formula)} .afield[data-field="breast"] .lbl i{background:var(--c-breast)} .afield .v{display:flex;align-items:baseline;gap:5px} .afield .v b{font-size:var(--fs-field);font-weight:var(--fw-s);line-height:1;letter-spacing:var(--tr-num);color:var(--tx3)} .afield .v i{font-style:normal;font-size:var(--fs-meta);color:var(--tx2)} .afield.has .v b{color:var(--tx)} .afield[aria-pressed="true"]{background:var(--c-feed-tint);box-shadow:inset 0 0 0 1.5px var(--c-feed-line)} .afield[aria-pressed="true"] .v b::after,.tg.focus b::after{content:"";display:inline-block;width:2px;height:30px;margin-inline-start:3px;background:var(--c-feed);vertical-align:-3px;animation:caret 1.1s steps(1) infinite} @keyframes caret{50%{opacity:0}} .afield-wrap .pane.static{position:static;margin-top:10px} .toggles{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:8px;margin-top:10px} /* toggle chip */ .tg{height:var(--hit);border-radius:var(--r-m);background:var(--s2);font-size:15px;font-weight:var(--fw-m);color:var(--tx2);display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;min-width:0;transition:background-color var(--d-fast) ease,color var(--d-fast) ease,transform var(--d-press) var(--ease-out)} .tg:active{transform:scale(.97)} .tg svg{width:18px;height:18px;stroke-width:2.4;display:none} .tg[aria-pressed="true"]{background:var(--s4);color:var(--tx)} .tg[aria-pressed="true"] svg{display:block} .tg b{font-weight:var(--fw-s)} .tg.focus{background:var(--c-feed-tint);box-shadow:inset 0 0 0 1.5px var(--c-feed-line)} .tg.focus svg{display:none} .tg.focus b::after{height:18px;vertical-align:-3px} /* text row: the label sits inside the 48px row and never disappears on input */ .textrow{display:flex;align-items:center;gap:10px;height:var(--hit);margin-top:10px;border-radius:var(--r-m);background:var(--s2);padding:0 14px} .textrow[hidden]{display:none} .textrows{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px} .textrows.two{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)} .textrows .textrow{margin-top:0} .textrow span{font-size:var(--fs-meta);color:var(--tx3);flex:none} .textrow input{flex:1;min-width:0;width:0;height:100%;background:none;border:0;outline:0;font-size:var(--fs-body);color:var(--tx);border-radius:0} .textrow input::placeholder{color:var(--tx3);opacity:1} .textrow:focus-within{box-shadow:inset 0 0 0 1.5px var(--line-2);background:var(--s3)} /* timeField */ .timerow{display:flex;gap:6px;margin-top:10px} .tnow{flex:1;min-width:0;height:56px;border-radius:var(--r-m);background:var(--s2);padding:0 12px;display:flex;flex-direction:column;justify-content:center;text-align:start;line-height:1.15;transition:background-color var(--d-fast) ease} .tnow small{font-size:13px;color:var(--tx2);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden} .tnow small .tnow-k{min-width:0;overflow:hidden;text-overflow:ellipsis} .tnow small em{width:6px;height:6px;border-radius:50%;background:var(--child);display:none;flex:none} .tnow.live small em{display:block} .tnow b{font-size:var(--fs-title);font-weight:var(--fw-s);letter-spacing:var(--tr-title)} .tnow[aria-expanded="true"]{background:var(--s3);box-shadow:inset 0 0 0 1.5px var(--line-2)} .chip{height:56px;width:50px;flex:none;border-radius:var(--r-m);background:var(--s2);font-size:var(--fs-row);font-weight:var(--fw-m);color:var(--tx2);direction:ltr;transition:background-color var(--d-fast) ease,color var(--d-fast) ease,transform var(--d-press) var(--ease-out)} .chip:active{transform:scale(.95)} .chip[aria-pressed="true"]{background:var(--s4);color:var(--tx)} /* amountField */ .pad-zone{position:relative;margin-top:10px;height:284px} .pad-zone.collapsible{height:0;margin-top:0;overflow:hidden} .pad-zone.collapsible.open{height:284px;margin-top:10px} .pane{position:absolute;inset:0;transition:opacity 180ms ease,transform 220ms var(--ease-out)} .pane[hidden]{display:block;opacity:0;pointer-events:none;transform:translateY(8px);visibility:hidden;transition:opacity 180ms ease,transform 220ms var(--ease-out),visibility 0s linear 180ms} .recents{display:flex;gap:6px;direction:ltr} .recents button{flex:1;min-width:48px;height:var(--hit);border-radius:var(--r-m);font-size:var(--fs-row);font-weight:var(--fw-m);color:var(--tx2);background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);transition:transform var(--d-press) var(--ease-out),background-color var(--d-fast) ease} .recents button:active{transform:scale(.95);background:var(--s3)} .recents button.step{color:var(--tx3);flex:.8} .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px;direction:ltr} .key{height:var(--h-key);border-radius:var(--r-m);background:var(--s3);font-size:var(--fs-key);font-weight:var(--fw-m);display:grid;place-items:center;transition:background-color var(--d-press) ease,transform var(--d-press) var(--ease-out)} .key:active{background:var(--s4);transform:scale(.97)} .key.ghost{background:transparent;color:var(--tx2)} .key.none{visibility:hidden} /* save: dark fill, child border and label. Never a bright slab */ .save{margin-top:12px;height:var(--h-save);border-radius:var(--r-l);background:var(--child-tint);box-shadow:inset 0 0 0 1.5px var(--child-line);color:var(--child);font-size:18px;font-weight:var(--fw-b);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 12px;transition:transform var(--d-press) var(--ease-out),opacity var(--d-fast) ease,background-color var(--d-ind) ease,color var(--d-ind) ease} .save .d{color:var(--tx);font-weight:var(--fw-s)} .save:active{transform:scale(.98)} .save[disabled]{opacity:.4} .save[disabled]:active{transform:none} /* edit sheet with the delete row: the keys give back 12px so the sheet does not scroll at 844 (keys stay above 48) */ .sheet.editing{--h-key:49px} .sheet.editing .pad-zone{height:272px} .sheet.editing .wheels{height:208px} .sheet.editing .wheels::before{top:82px} .sheet.editing .wheel{padding:82px 0} /* delete inside an edit sheet: quiet text, never a second slab */ .sheet-del{display:block;width:100%;height:var(--hit);margin-top:4px;margin-bottom:-8px;font-size:var(--fs-body);font-weight:var(--fw-m);color:var(--danger);border-radius:var(--r-m)} .sheet-del:active{background:var(--danger-tint)} /* time wheels */ .wheel-top{display:flex;align-items:center;justify-content:space-between;height:54px} .wheel-top .mini{margin:0} .wheel-top .reset{height:var(--hit);padding:0 6px;font-size:var(--fs-body);font-weight:var(--fw-s);color:var(--child)} .wheels{position:relative;height:220px;margin-top:10px;display:flex;justify-content:center;gap:10px;direction:ltr;border-radius:var(--r-l);background:var(--s2)} .wheels.short{height:176px} .wheels::before{content:"";position:absolute;inset:88px 14px auto;height:44px;border-radius:12px;background:var(--s4)} .wheels.short::before{top:66px} .wheels .colon{position:relative;align-self:center;font-size:30px;font-weight:var(--fw-s);line-height:44px;margin-top:-4px} .wheel{position:relative;width:96px;height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;padding:88px 0;touch-action:pan-y;-webkit-mask-image:linear-gradient(transparent,#000 36%,#000 64%,transparent);mask-image:linear-gradient(transparent,#000 36%,#000 64%,transparent)} .wheels.short .wheel{padding:66px 0} .wheel::-webkit-scrollbar{display:none} .wheel div{height:44px;line-height:44px;text-align:center;font-size:30px;font-weight:var(--fw-m);color:var(--tx3);scroll-snap-align:center} .wheel div.sel{color:var(--tx);font-weight:var(--fw-s)} /* ---------- sleep sheet ---------- */ .bigaction{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;height:72px;padding:0 18px;border-radius:var(--r-l);background:var(--s2);text-align:start;transition:transform var(--d-press) var(--ease-out)} .bigaction:active{transform:scale(.98)} .bigaction b{font-size:var(--fs-lead);font-weight:var(--fw-b);display:flex;align-items:center;gap:10px} .bigaction b svg{color:var(--c-sleep)} .bigaction span{font-size:var(--fs-meta);color:var(--tx3);margin-inline-start:34px} .or{margin:16px 0 8px;font-size:var(--fs-meta);color:var(--tx3)} .rfields{display:grid;grid-template-columns:1fr 1fr;gap:10px} .rfield{height:72px;border-radius:var(--r-l);background:var(--s2);padding:10px 14px;text-align:start;display:flex;flex-direction:column;justify-content:space-between;transition:background-color var(--d-fast) ease} .rfield small{font-size:13px;color:var(--tx2);white-space:nowrap} .rfield b{font-size:var(--fs-name);font-weight:var(--fw-s);line-height:1;letter-spacing:var(--tr-num)} .rfield[aria-pressed="true"]{background:var(--s3);box-shadow:inset 0 0 0 1.5px var(--line-2)} .readback{height:34px;display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:15px;color:var(--tx2)} .readback b{color:var(--tx);font-weight:var(--fw-s)} /* ---------- toast with action ---------- */ .toast{position:absolute;inset:auto var(--gut) calc(var(--safe-b) + var(--h-tabbar) + 12px);z-index:var(--z-toast);border-radius:var(--r-l);background:var(--s2);box-shadow:var(--e-toast);padding:14px 18px 14px 16px;overflow:hidden;opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;transition:opacity 200ms ease,transform var(--d-toast) var(--ease-out)} .toast::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--child)} .toast.on{opacity:1;transform:none;pointer-events:auto} .toast-k{display:flex;align-items:center;gap:8px;font-size:var(--fs-meta);color:var(--tx2)} .toast-k svg{width:18px;height:18px;stroke-width:2.4;color:var(--child)} .toast-t{margin-top:4px;font-size:21px;font-weight:var(--fw-s);letter-spacing:var(--tr-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .toast-t .who{color:var(--child)} .toast-h{margin-top:2px;font-size:var(--fs-meta);color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .toast-a{display:flex;gap:8px;margin-top:12px} .toast-a button{flex:1;height:var(--hit);border-radius:var(--r-m);font-size:var(--fs-row);font-weight:var(--fw-s);background:var(--s4);color:var(--tx);transition:transform var(--d-press) var(--ease-out)} .toast-a button:active{transform:scale(.97)} .toast .life{position:absolute;inset:auto 0 0 0;height:2px;background:var(--child);opacity:.7;transform-origin:100% 50%} /* ---------- login ---------- */ .login{position:fixed;inset:0;z-index:var(--z-login);display:flex;flex-direction:column;justify-content:center;max-width:520px;margin-inline:auto;padding:var(--safe-t) 24px calc(var(--safe-b) + 40px);background:var(--bg);overflow-y:auto} .login h1{font-size:40px;font-weight:var(--fw-x);letter-spacing:var(--tr-num);line-height:1.1} .login h1 span:first-child{color:var(--adam)} .login h1 span:last-child{color:var(--ivri)} .login .lead{margin-top:6px;color:var(--tx2)} .fld{display:block;margin-top:18px} .fld span{display:block;font-size:var(--fs-meta);color:var(--tx2);margin-bottom:6px} .fld input{width:100%;height:56px;border-radius:var(--r-m);background:var(--s2);border:0;outline:0;padding:0 16px;font-size:var(--fs-row);box-shadow:inset 0 0 0 1px var(--line);transition:background-color var(--d-fast) ease} .fld input:focus{box-shadow:inset 0 0 0 1.5px var(--line-2);background:var(--s3)} .fld.err input{box-shadow:inset 0 0 0 1.5px var(--danger-line)} /* light: a field on the ground is already the lightest surface; focus lifts it to s1 instead of sinking it to s3 */ [data-theme="light"] .fld input:focus{background:var(--s1)} .fld input:-webkit-autofill{-webkit-text-fill-color:var(--tx);-webkit-box-shadow:inset 0 0 0 1.5px var(--line-2),inset 0 0 0 100px var(--s2);caret-color:var(--tx)} .fld-err{margin-top:8px;font-size:var(--fs-meta);color:var(--danger);min-height:20px} .login .save{margin-top:14px} /* short phones (667px class): the keypad gives back 16px so the time row stays in view. Keys stay at the 48px floor */ @media (max-height:720px){ :root,.sheet.editing{--h-key:48px} .pad-zone,.pad-zone.collapsible.open,.sheet.editing .pad-zone{height:268px} .wheels,.sheet.editing .wheels{height:204px} .wheels::before,.sheet.editing .wheels::before{top:80px} .wheel,.sheet.editing .wheel{padding:80px 0} } /* 320px (Display Zoom on iPhone 12-15): tabs stay >= 48px wide, the sheet head keeps its close button on screen */ @media (max-width:359px){ :root{--fab:54px} .tabbar{padding-inline:0} .fabs{gap:8px;padding:0 4px} .tab{font-size:14px} .sheet-head{gap:8px} .sheet-head h2{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:20px} .sheet-head .x{margin-inline-end:0} .menu-main .hint{white-space:normal;line-height:1.25} .mini button{min-width:50px;padding:0 9px} .recents{gap:4px} .recents button{min-width:0} .tnow{padding:0 8px} .menu-row .quick{padding:0 10px;font-size:14px} /* home: the giant and its units scale together, and the three quick actions share the row instead of spilling */ .quick:not(button){gap:6px} .quick:not(button) > button{flex:1 1 auto;padding:0 8px;font-size:14px;overflow:hidden;text-overflow:ellipsis} .todayline{gap:12px;font-size:15px} .todayline b{font-size:17px} .hero .big .num{font-size:78px} .hero .big .num.sec{font-size:46px} .hero .big .unit{font-size:16px;margin-inline-start:4px} .hero .big .unit:not(:last-child){margin-inline-end:8px} .hero .amt .num{font-size:34px} .hero .amt .unit{font-size:14px;margin-inline-start:4px} .hero-nums{min-height:74px} .save{font-size:16px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:1ms!important;transition-delay:0s!important;animation:none!important} .toast{transform:none} }