/* ============================================================ MUI 2.0 — design system Warm illustrated companion · citrus-and-sky palette Type: Open Sans · Hero accent: orange #FC6B05 ============================================================ */ :root{ /* palette */ --orange:#FC6B05; --orange-2:#FF8A2B; --orange-wash:#FFEFE2; --yellow:#FFB62B; --yellow-wash:#FFF3DC; --green:#65B017; --green-2:#7CC52B; --green-wash:#EAF6DD; --sky:#99D8DB; --sky-deep:#3E9AA0; --sky-wash:#E4F4F5; --slate:#9BB7BB; --slate-wash:#EEF3F3; /* warm neutrals */ --bg:#FBF8F2; --bg-tint:#F4EFE6; --surface:#FFFFFF; --surface-2:#FAF6EE; --ink:#2E2A24; --ink-2:#7C7264; --ink-3:#AEA597; --hairline:#F0E9DC; --hairline-2:#E7DECE; /* status semantics */ --eligible:var(--green); --eligible-wash:var(--green-wash); --soon:var(--orange); --soon-wash:var(--yellow-wash); --deferred:var(--slate); --deferred-wash:var(--slate-wash); --waiting:#D98300; --waiting-wash:#FBEFD6; --health:var(--sky-deep);--health-wash:var(--sky-wash); /* ---- SEMANTIC STATUS TOKENS (single source of truth — light values) ---- Every status text colour, badge, dot, chart accent and chip routes through these so light + dark stay perfectly in sync. Each has a foreground tuned for contrast and a soft tinted -wash surface. Values are EXPLICIT per theme (no var() indirection — a custom property that points at another bakes its value at :root and would not re-resolve under [data-theme="dark"]). */ --success:#4d8a13; --success-wash:#EAF6DD; --warning:#D98300; --warning-wash:#FBEFD6; --alert:#E0490B; --alert-wash:#FFEFE2; --danger:#E5484D; --danger-wash:#FCEDEC; --info:#3E9AA0; --info-wash:#E4F4F5; --neutral:#5C7A80; --neutral-wash:#EEF3F3; --blood:#E5484D; /* accent / blood-drop red */ /* shape + depth */ --r-sm:14px; --r:18px; --r-lg:24px; --r-xl:30px; --sh-sm:0 1px 2px rgba(120,80,20,.05), 0 8px 18px -14px rgba(120,80,20,.4); --sh:0 2px 4px rgba(120,80,20,.05), 0 20px 38px -26px rgba(120,80,20,.5); --sh-pop:0 14px 30px -10px rgba(252,107,5,.45); --font:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;} /* iOS 26+ (Liquid Glass) tints the translucent status bar by sampling the page's ROOT colors — html/body must carry the app surface color or the system paints a white bar over installed PWAs. */ html,body{margin:0;padding:0;height:100%;background:var(--bg);} body{ font-family:var(--font); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } button{font-family:inherit; color:inherit;} .desk{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;} .device-scale{transform-origin:center center;flex:none;} /* ---------- app frame ---------- */ .tc-app{ position:absolute; inset:0; overflow:hidden; background:var(--bg); /* Re-declare color here so the whole app subtree re-resolves --ink under [data-theme="dark"]. body{color:var(--ink)} computes ONCE on (outside .screen) and descendants would otherwise inherit that baked light-ink value, leaving theme-agnostic text (e.g. .dname) dark in dark mode. */ color:var(--ink); display:flex; flex-direction:column; } .tc-scroll{position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;} .tc-scroll::-webkit-scrollbar{display:none;} .tc-page{padding:0 18px 132px;} .tc-page--top{padding-top:58px;} svg.ic{display:block; flex:none;} /* ---------- typography ---------- */ .t-display{font-size:27px; font-weight:800; letter-spacing:-.025em; line-height:1.04;} .h1{font-size:25px; font-weight:800; letter-spacing:-.02em; line-height:1.08;} .h2{font-size:19px; font-weight:800; letter-spacing:-.015em;} .sec-title{font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--ink); display:flex; align-items:center; gap:8px;} .eyebrow{font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);} .body{font-size:14px; font-weight:500; color:var(--ink-2); line-height:1.5;} .muted{color:var(--ink-3);} .num{font-feature-settings:"tnum"; letter-spacing:-.01em;} /* ---------- cards ---------- */ .card{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh); padding:18px;} .card-sm{background:var(--surface); border-radius:var(--r); box-shadow:var(--sh-sm); padding:15px;} .card-flat{background:var(--surface); border-radius:var(--r); border:1.5px solid var(--hairline); padding:15px;} /* ---------- section head ---------- */ .section{display:flex; justify-content:space-between; align-items:center; margin:24px 4px 12px;} .section .link{font-size:12.5px; font-weight:800; color:var(--orange); background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:3px; white-space:nowrap; flex:none;} .link{font-size:12.5px; font-weight:800; color:var(--orange); background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:3px;} .spark-tab{color:var(--yellow); flex:none;} .link{white-space:nowrap; flex:none;} .section .link-pill{background:linear-gradient(150deg,var(--orange),var(--orange-2)); color:#fff; padding:7px 13px 7px 10px; border-radius:999px; gap:4px; box-shadow:var(--sh-pop);} .section .link-pill:active{transform:scale(.95);} /* ---------- blob avatar ---------- */ .avatar-wrap{position:relative; flex:none; display:inline-block;} .avatar{position:relative; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; border-radius:46% 54% 62% 38% / 54% 42% 58% 46%; overflow:hidden;} .avatar.alt{border-radius:54% 46% 38% 62% / 46% 58% 42% 54%;} .avatar .ph{position:absolute; inset:0; background-size:cover; background-position:center;} .av-count{position:absolute; bottom:-4px; right:-4px; background:var(--surface); color:var(--orange); font-size:10.5px; font-weight:800; line-height:1; border-radius:999px; padding:2.5px 5.5px; box-shadow:0 2px 5px rgba(0,0,0,.15); border:1.5px solid var(--surface);} /* ---------- blood badge ---------- */ .blood{display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; border-radius:8px; padding:3px 7px; font-size:11px; line-height:1; letter-spacing:.01em;} /* ---------- status chip ---------- */ .chip-status{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:999px; white-space:nowrap;} /* ---------- pills / chips ---------- */ .chip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; background:var(--surface-2); border:1.5px solid var(--hairline-2); color:var(--ink-2); padding:7px 13px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:.15s;} .chip.on{background:var(--orange); border-color:transparent; color:#fff;} /* ---------- buttons ---------- */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; border:none; cursor:pointer; font-weight:800; border-radius:var(--r-sm); font-size:14.5px; padding:13px 18px; transition:transform .12s ease, box-shadow .2s, background .2s; color:var(--ink);} .btn:active{transform:scale(.97);} .btn-primary{background:linear-gradient(150deg,var(--orange),var(--orange-2)); color:#fff; box-shadow:var(--sh-pop);} .btn-ghost{background:var(--surface-2); border:1.5px solid var(--hairline-2); color:var(--ink);} .btn-soft{background:var(--orange-wash); color:var(--orange);} .icon-btn{display:inline-flex; align-items:center; justify-content:center; border:none; cursor:pointer; border-radius:13px; background:var(--surface-2); color:var(--ink-2); transition:.15s;} .icon-btn.call{background:var(--green-wash); color:#4d8a13;} .icon-btn.msg{background:var(--yellow-wash); color:var(--waiting);} /* ---------- list row ---------- */ .row{display:flex; align-items:center; gap:12px;} .between{display:flex; align-items:center; justify-content:space-between;} .drow{display:flex; align-items:center; gap:13px; padding:12px 0;} .drow + .drow{border-top:1.5px solid var(--hairline);} .dname{font-weight:800; font-size:15.5px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .dmeta{font-size:12.5px; font-weight:700; margin-top:1px;} /* ============================================================ THE HOME SCENE (Today hero illustration — variant-driven) ============================================================ */ .scene{position:relative; height:230px; overflow:hidden; background:linear-gradient(165deg,#FFFBF2 0%,#EAF7F4 52%,#D4EDEF 100%);} .scene--sunrise{background:linear-gradient(180deg,#FFF4E2 0%,#FFE7CC 56%,#FFD9B0 100%);} .scene--lagoon{background:linear-gradient(180deg,#EAF8FB 0%,#CDEFF6 52%,#AEE2EE 100%);} .scene--bloom{background:linear-gradient(165deg,#FBFCF3 0%,#F0F8E2 54%,#E2F2CC 100%);} .scene--midnight{background:linear-gradient(180deg,#20224a 0%,#2b2d57 55%,#3a3768 100%);} .scene-art{position:absolute; inset:0; width:100%; height:100%;} /* smooth settle-in when the hero illustration changes with the theme. Transform-only (never opacity:0) so the art is ALWAYS visible — even if the animation clock is paused (hidden tab, print/PDF/export capture). */ .scene-fade{position:absolute; inset:0; animation:sceneFadeIn .55s cubic-bezier(.22,1,.36,1);} @keyframes sceneFadeIn{from{transform:scale(1.05); filter:saturate(.6);} to{transform:scale(1); filter:saturate(1);}} @media (prefers-reduced-motion: reduce){ .scene-fade{animation:none;} } .scene-art .bob{animation:bob 6s ease-in-out infinite;} .scene-art .drift{animation:drift 16s ease-in-out infinite;} .scene-art .tw{animation:tw 3s ease-in-out infinite; transform-box:fill-box; transform-origin:center;} .scene-art .bird{animation:bird 5s ease-in-out infinite; transform-box:fill-box; transform-origin:center;} .scene-art .shoot{animation:shoot 8s ease-in infinite; opacity:0;} /* starry-night hero: greeting flips to light ink, scrim removed (works in any theme) */ .scene--midnight .hero-scrim{display:none;} .scene--midnight .home-top .sm{color:#C9C2DE !important; text-shadow:0 1px 12px rgba(0,0,0,.5) !important;} .scene--midnight .home-top .lg{color:#FBF4E8 !important; text-shadow:0 1px 14px rgba(0,0,0,.55) !important;} /* ---- Living sky: hero whose sky tracks the time of day ---- */ .scene--living{background:#EAF7F4;} .sky-art{position:absolute; inset:0; width:100%; height:100%;} .sky-tw{animation:skyTw 3.4s ease-in-out infinite;} @keyframes skyTw{0%,100%{opacity:.7}50%{opacity:.15}} .sky-drift{animation:skyDrift 26s ease-in-out infinite;} @keyframes skyDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(16px)}} .sky-bob{animation:skyBob 6s ease-in-out infinite; transform-box:fill-box; transform-origin:bottom center;} @keyframes skyBob{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}} .sky-rays{animation:skyRays 40s linear infinite;} @keyframes skyRays{to{transform:rotate(360deg)}} .sky-bird{animation:skyBirdMove 16s ease-in-out infinite;} @keyframes skyBirdMove{0%{transform:translate(-30px,8px)}100%{transform:translate(280px,-14px)}} .sky-fly{animation:skyFly var(--d,3s) ease-in-out infinite;} @keyframes skyFly{0%,100%{transform:translate(0,0); opacity:.5}33%{transform:translate(10px,-8px); opacity:1}66%{transform:translate(-6px,6px); opacity:.7}} /* night hero: greeting flips to light ink, scrim fades to nothing */ .home-hero--night .hero-scrim{display:none;} .home-hero--night .home-top .sm{color:#C9C2DE !important; text-shadow:0 1px 12px rgba(0,0,0,.5) !important;} .home-hero--night .home-top .lg{color:#FBF4E8 !important; text-shadow:0 1px 14px rgba(0,0,0,.55) !important;} @media (prefers-reduced-motion: reduce){ .sky-tw,.sky-drift,.sky-bob,.sky-rays,.sky-bird,.sky-fly{animation:none !important;} } /* ---- warm companion insight (Today) ---- */ .comp-card{position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:24px; padding:16px 17px 17px 19px; margin-bottom:14px; box-shadow:var(--sh-sm);} .comp-card.tap{cursor:pointer;} .comp-card.tap:active{transform:scale(.99);} .comp-bar{position:absolute; left:0; top:0; bottom:0; width:5px;} .comp-head{display:flex; align-items:center; gap:11px; margin-bottom:11px;} .comp-lead{font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;} .comp-line{margin:0; font-size:15px; line-height:1.52; font-weight:600; color:var(--ink); text-wrap:pretty;} .comp-cta{display:inline-flex; align-items:center; gap:3px; margin-top:10px; font-size:13px; font-weight:800; letter-spacing:-.01em;} /* ---- calm "Your numbers" grid (Today) ---- */ .numgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;} .numtile{text-align:left; background:var(--surface); border:1.5px solid var(--hairline); border-radius:18px; padding:12px 13px; cursor:pointer; font-family:inherit;} .numtile:active{transform:scale(.985);} .numtile-k{display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; margin-bottom:7px;} .numtile-dot{width:7px; height:7px; border-radius:999px; flex:none;} .numtile-v{font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .numtile-v small{font-size:11px; font-weight:700; color:var(--ink-3); letter-spacing:0;} .numtile-note{display:flex; align-items:center; gap:4px; margin-top:5px; font-size:11.5px; font-weight:700;} .numtile-pill{font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:999px; white-space:nowrap;} /* ---- daily tip (Today) ---- */ .tip-card{display:flex; gap:11px; align-items:flex-start; margin-top:14px; margin-bottom:14px;} button.tip-card{width:100%; text-align:left; border:none; font-family:inherit; cursor:pointer; transition:transform .12s ease, box-shadow .18s ease;} button.tip-card:active{transform:scale(.985);} .tip-leaf{width:38px; height:38px; flex:none; border-radius:12px; background:var(--yellow-wash); display:grid; place-items:center;} .tip-eyebrow{font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#B87A14; white-space:nowrap;} .tip-cat{margin-left:auto; font-size:10.5px; font-weight:700; color:var(--ink-3); white-space:nowrap;} .tip-text{margin:0; font-size:13.5px; line-height:1.52; font-weight:600; color:var(--ink); text-wrap:pretty;} .tip-text.clamp{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;} .tip-more{display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-size:12px; font-weight:800; color:var(--orange); letter-spacing:-.01em;} /* tip detail sheet */ .tipd-body{margin:0; font-size:15.5px; line-height:1.62; font-weight:600; color:var(--ink); text-wrap:pretty;} .tipd-action{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; margin-top:16px; padding:13px 15px; border:none; border-radius:14px; background:var(--surface-2); cursor:pointer; font-family:inherit;} .tipd-action .lab{display:inline-flex; align-items:center; gap:10px; font-size:13.5px; font-weight:800; color:var(--ink); letter-spacing:-.01em;} .tip-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:11px;} .tip-day{font-size:10.5px; font-weight:700; color:var(--ink-3);} .tip-next{display:inline-flex; align-items:center; gap:5px; border:none; background:none; cursor:pointer; font-family:inherit; font-size:12px; font-weight:800; color:var(--orange);} /* tip — "explain this for me" elaboration */ .tipd-deeper{margin-top:16px; padding:15px 16px; border-radius:16px; background:var(--yellow-wash); border:1px solid color-mix(in srgb, var(--warning) 22%, transparent);} .tipd-deeper-eyebrow{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#B87A14; margin-bottom:9px;} .tipd-deeper p{margin:0 0 9px; font-size:14.5px; line-height:1.6; font-weight:600; color:var(--ink); text-wrap:pretty;} .tipd-deeper p:last-child{margin-bottom:0;} .tipd-deeper-note{display:flex; gap:7px; margin-top:11px; padding-top:11px; border-top:1px solid color-mix(in srgb, var(--warning) 18%, transparent); font-size:11.5px; font-weight:600; color:var(--ink-3); line-height:1.45;} .home-hero{position:relative; height:300px; overflow:hidden;} .hero-scrim{position:absolute; top:0; left:0; right:0; height:150px; z-index:5; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.12) 55%, rgba(255,255,255,0) 100%);} .home-top{position:relative; z-index:10; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:62px 22px 0;} .home-top .sm{font-size:13.5px; font-weight:800; color:var(--ink-2); white-space:nowrap; text-shadow:0 1px 10px rgba(255,255,255,.7);} .home-top .lg{font-size:27px; font-weight:800; color:var(--ink); letter-spacing:-.025em; margin-top:2px; white-space:nowrap; display:flex; align-items:center; gap:9px; text-shadow:0 1px 12px rgba(255,255,255,.7);} .home-av{border:none; background:none; padding:0; cursor:pointer; flex:none; border-radius:16px; box-shadow:0 4px 14px -6px rgba(0,0,0,.28);} /* one-line insights (Today) */ .ins-list{display:flex; flex-direction:column; margin-bottom:8px; background:var(--surface); border-radius:20px; box-shadow:var(--sh-sm); overflow:hidden;} /* ---- AI smart briefing card ---- */ .ai-brief{position:relative; overflow:hidden; margin-bottom:10px; padding:15px 16px 13px; border-radius:22px; background:var(--surface); box-shadow:var(--sh-sm); border:1.5px solid var(--hairline);} .ai-brief::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--yellow),var(--orange));} .ai-head{display:flex; align-items:center; gap:8px; margin-bottom:9px;} .ai-badge{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; color:var(--orange); background:var(--orange-wash); padding:4px 9px 4px 7px; border-radius:999px;} .ai-spark{display:flex; animation:aiSpark 2.6s ease-in-out infinite; transform-origin:center;} @keyframes aiSpark{0%,100%{transform:scale(.85) rotate(0); opacity:.7}50%{transform:scale(1.1) rotate(18deg); opacity:1}} .ai-when{font-size:11px; font-weight:800; color:var(--ink-3); letter-spacing:.02em;} .ai-refresh{margin-left:auto; width:30px; height:30px; border-radius:10px; border:none; background:var(--surface-2); color:var(--ink-2); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; transition:.15s;} .ai-refresh:active{transform:scale(.92);} .ai-refresh.spin svg{animation:spin .9s linear infinite;} .ai-body{font-size:14.5px; line-height:1.5; font-weight:500; color:var(--ink); text-wrap:pretty;} .ai-body b{font-weight:800;} .ai-foot{display:flex; align-items:center; gap:6px; margin-top:11px; font-size:10.5px; font-weight:700; color:var(--ink-3); letter-spacing:.01em;} .ai-foot .dot{width:3px; height:3px; border-radius:999px; background:var(--ink-3); flex:none;} .ai-cta{display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; font-family:inherit; font-weight:800; font-size:13.5px; color:var(--orange); background:var(--orange-wash); padding:10px 14px; border-radius:13px;} .ai-cta:active{transform:scale(.98);} .ai-shimmer{height:13px; border-radius:7px; margin:7px 0; background:linear-gradient(90deg,var(--surface-2) 25%,var(--hairline) 37%,var(--surface-2) 63%); background-size:400% 100%; animation:shimmer 1.3s ease infinite;} @keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}} .ins-line{display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; border:none; background:none; cursor:pointer; font-family:inherit; padding:14px 15px;} .ins-line + .ins-line{border-top:1px solid var(--hairline);} .ins-line:active{background:var(--surface-2);} .ins-ic{flex:none; width:24px; height:24px; display:flex; align-items:center; justify-content:center; margin-top:1px;} .ins-tx{flex:1; min-width:0; font-size:14.5px; line-height:1.45; font-weight:500; color:var(--ink-2); text-wrap:pretty;} .ins-tx b{font-weight:800; color:var(--ink);} .ins-trend{flex:none; align-self:center; display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:800; padding:3px 8px 3px 6px; border-radius:999px; font-feature-settings:"tnum"; white-space:nowrap;} /* ---- smart focus card (Today) — one consolidated, prioritised insight + metric strip ---- */ .focus-card{position:relative; display:flex; flex-direction:column; width:100%; overflow:hidden; border-radius:22px; padding:15px 16px 15px 19px; margin-bottom:12px; box-shadow:var(--sh-sm);} .focus-bar{position:absolute; left:0; top:0; bottom:0; width:5px;} .focus-main{display:flex; align-items:flex-start; gap:13px; width:100%; text-align:left; border:none; background:none; font-family:inherit; padding:0;} .focus-main.tap{cursor:pointer;} .focus-main.tap:active{transform:scale(.99);} .focus-icon{width:42px; height:42px; flex:none; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-top:1px; box-shadow:0 2px 7px rgba(20,30,25,.07);} .focus-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;} .focus-eyebrow{font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;} .focus-title{font-size:16px; font-weight:800; letter-spacing:-.015em; color:var(--ink); line-height:1.22; text-wrap:pretty;} .focus-cap{font-size:13px; font-weight:600; color:var(--ink-2); line-height:1.5; text-wrap:pretty;} .focus-cta{display:inline-flex; align-items:center; gap:2px; margin-top:4px; font-size:13px; font-weight:800; letter-spacing:-.01em;} /* metric strip folded into the focus card */ .focus-stats{display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:14px; background:var(--hairline); border-radius:16px; overflow:hidden;} .fstat{display:flex; flex-direction:column; gap:6px; align-items:flex-start; background:var(--surface); border:none; outline:none; cursor:pointer; font-family:inherit; text-align:left; padding:11px 13px; transition:background .15s; min-width:0;} .fstat:active{background:var(--surface-2);} .fstat-k{display:flex; align-items:center; gap:6px; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;} .fstat-dot{width:6px; height:6px; border-radius:50%; flex:none;} .fstat-row{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; min-width:0;} .fstat-v{font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1.05; min-width:0; overflow:hidden; text-overflow:ellipsis;} .fstat-v small{font-size:10.5px; font-weight:700; color:var(--ink-3); letter-spacing:0;} .fstat-trend{display:inline-flex; align-items:center; gap:2px; font-size:10.5px; font-weight:800; padding:2px 6px 2px 4px; border-radius:999px; font-feature-settings:"tnum"; line-height:1.3;} .fstat-pill{font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; line-height:1.4; white-space:nowrap;} .fstat-sub{font-size:10.5px; font-weight:700; color:var(--ink-2);} /* chelation tile — one row per medicine */ .fstat-drugs{display:flex; flex-direction:column; gap:5px; width:100%; min-width:0;} .fstat-drug{display:flex; align-items:center; justify-content:space-between; gap:7px; min-width:0;} .fstat-drug-name{font-size:13.5px; font-weight:800; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} /* ---- redesigned insight metric cards (Today) ---- 3-tier hierarchy: eyebrow label · headline value · quiet caption. Consistent tinted icon chip + cleanly aligned trend chip. */ .insf{display:flex; flex-direction:column; gap:10px; margin-bottom:8px;} .insf-card{display:flex; align-items:flex-start; gap:13px; width:100%; text-align:left; border:none; outline:none; cursor:pointer; font-family:inherit; background:var(--surface); border-radius:20px; box-shadow:var(--sh-sm); padding:14px 15px; opacity:1; transition:transform .15s, box-shadow .2s;} .insf-card:active{transform:scale(.985);} .insf-chip{width:40px; height:40px; flex:none; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-top:1px;} .insf-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;} .insf-top{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:15px;} .insf-eyebrow{flex:1; min-width:0; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .insf-val{font-size:17px; font-weight:800; letter-spacing:-.015em; color:var(--ink); line-height:1.12; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .insf-cap{font-size:12.5px; font-weight:600; color:var(--ink-2); line-height:1.4; text-wrap:pretty;} .insf-trend{flex:none; display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:800; padding:3px 8px 3px 6px; border-radius:999px; font-feature-settings:"tnum"; white-space:nowrap;} /* chelation card — one card, a row per drug with a dose-status pill */ .insf-drugs{display:flex; flex-direction:column; gap:8px; margin-top:6px;} .insf-drug{display:flex; align-items:center; justify-content:space-between; gap:10px;} .insf-drug-name{font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .insf-pill{flex:none; font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; white-space:nowrap; letter-spacing:.01em;} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes tw{0%,100%{opacity:.35; transform:scale(.78)}50%{opacity:1; transform:scale(1.12)}} @keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(14px)}} @keyframes bird{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} @keyframes shoot{0%,78%{opacity:0; transform:translate(-12px,-7px)}81%{opacity:1}90%{opacity:1}100%{opacity:0; transform:translate(150px,74px)}} /* content sliding under the scene — a soft panel tucks over the illustration's lower edge */ .under-scene{position:relative; z-index:15; margin-top:-26px; padding:8px 18px 132px; background:var(--bg); border-radius:28px 28px 0 0; box-shadow:0 -10px 26px -16px rgba(120,80,20,.4);} /* hero countdown card */ .count-card{display:flex; align-items:center; justify-content:space-between; gap:14px;} .count-card .k{font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3);} .count-card .v{font-size:23px; font-weight:800; color:var(--ink); letter-spacing:-.02em; margin-top:3px; white-space:nowrap;} .count-card .s{font-size:13px; font-weight:800; color:var(--green); margin-top:4px; white-space:nowrap;} .ring{width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none;} .ring > i{width:51px; height:51px; border-radius:50%; background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:var(--orange); line-height:1;} .ring > i small{font-size:8px; font-weight:800; color:var(--ink-3); letter-spacing:.04em;} /* stat tiles */ .stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:11px;} .stat{position:relative; background:var(--surface); border:none; outline:none; border-radius:20px; padding:14px; overflow:hidden; box-shadow:var(--sh-sm); cursor:pointer; text-align:left;} .stat:focus,.stat:focus-visible{outline:none;} .stat .blob{position:absolute; width:64px; height:64px; right:-20px; top:-20px; opacity:.16; border-radius:46% 54% 62% 38% / 54% 42% 58% 46%;} .stat .n{font-size:25px; font-weight:800; letter-spacing:-.02em; position:relative;} .stat .l{font-size:11.5px; font-weight:800; color:var(--ink-3); margin-top:1px; position:relative; white-space:nowrap;} .stat-total{font-size:10px; font-weight:700; color:var(--ink-3); margin-top:3px; position:relative; white-space:nowrap; letter-spacing:.01em;} .pool-sub{display:flex; align-items:center; gap:5px; margin:-2px 0 11px; font-size:11.5px; font-weight:600; color:var(--ink-3); letter-spacing:.005em;} .pool-sub strong{font-weight:800; color:var(--ink-2);} /* pool — same-group focus */ .group-toggle{display:flex; align-items:center; gap:12px; margin-top:16px; padding:11px 14px; background:var(--surface); border-radius:16px; box-shadow:var(--sh-sm);} .group-toggle-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;} .group-toggle-txt .gt-title{font-size:13px; font-weight:800; color:var(--ink); letter-spacing:-.005em;} .group-toggle-txt .gt-sub{font-size:11px; font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums;} .switch{flex:none; width:44px; height:26px; border-radius:999px; border:none; cursor:pointer; padding:0; background:var(--hairline-2); transition:background .2s;} .switch.on{background:var(--orange);} .switch-knob{display:block; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transform:translateX(3px); transition:transform .2s;} .switch.on .switch-knob{transform:translateX(21px);} .mine-tag{flex:none; font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--orange); background:var(--orange-wash); padding:2px 7px; border-radius:999px;} .pool-card--mine{box-shadow:var(--sh-sm), inset 3px 0 0 var(--orange);} .pool-divider{display:flex; align-items:center; gap:11px; margin:6px 2px 14px; color:var(--ink-3);} .pool-divider::before,.pool-divider::after{content:""; flex:1; height:1px; background:var(--hairline);} .pool-divider span{font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;} /* health snapshot */ .health-row{display:flex; align-items:center; gap:14px;} .leaf{width:52px; height:52px; flex:none; border-radius:46% 54% 62% 38% / 54% 42% 58% 46%; background:linear-gradient(150deg,#C7ECF0,#99D8DB); display:flex; align-items:center; justify-content:center; color:var(--sky-deep);} .metric{flex:1;} .metric .k{font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3);} .metric .v{font-size:18px; font-weight:800; margin-top:2px; white-space:nowrap; letter-spacing:-.01em;} .metric .u{font-size:10px; font-weight:700; color:var(--ink-3);} /* home health-snapshot cards */ .snap-stack{display:flex; flex-direction:column; gap:11px; margin-bottom:8px;} .snap-card{display:flex; align-items:center; gap:13px; width:100%; text-align:left; border:none; cursor:pointer; font-family:inherit; padding:14px 14px 14px 13px; opacity:1; animation:snapIn .5s cubic-bezier(.22,1,.36,1) both; transition:transform .15s, box-shadow .15s;} @keyframes snapIn{from{transform:translateY(9px)}to{transform:translateY(0)}} .snap-card:nth-child(2){animation-delay:.05s;} .snap-card:nth-child(3){animation-delay:.1s;} .snap-card:nth-child(4){animation-delay:.15s;} .snap-card:active{transform:scale(.985);} .snap-leaf{width:46px; height:46px; border-radius:15px;} .snap-mid{flex:1; min-width:0;} .snap-k{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3);} .snap-v{font-size:19px; font-weight:800; color:var(--ink); letter-spacing:-.015em; margin-top:2px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .snap-u{font-size:11.5px; font-weight:800; color:var(--ink-3); letter-spacing:0;} .snap-meta{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:6px;} .snap-sub{font-size:11.5px; font-weight:700; color:var(--ink-2); white-space:nowrap;} .snap-chip{padding:4px 9px; font-size:10.5px;} .snap-dot{width:6px; height:6px; border-radius:999px; flex:none;} /* ============================================================ BOTTOM NAV ============================================================ */ .nav-wrap{position:absolute; left:0; right:0; bottom:0; z-index:60; padding:0 16px 18px; pointer-events:none;} .nav{pointer-events:auto; height:70px; display:flex; align-items:center; justify-content:space-around; border-radius:26px; background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.5)); backdrop-filter:blur(24px) saturate(185%); -webkit-backdrop-filter:blur(24px) saturate(185%); box-shadow:0 14px 34px -12px rgba(120,80,20,.38), inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.45); color:var(--ink-3);} .nav button{border:none; background:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; color:inherit; padding:6px 4px;} .nav .lbl{font-size:9.5px; font-weight:800; letter-spacing:.01em;} .nav .on{color:var(--orange);} .nav .plus{width:56px; height:56px; border-radius:19px; background:linear-gradient(150deg,var(--orange),var(--orange-2)); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-pop);} .nav .plus:active{transform:scale(.94);} /* ---------- toast ---------- */ .toast{position:absolute; left:50%; bottom:108px; transform:translateX(-50%); z-index:95; display:flex; align-items:center; gap:9px; padding:12px 18px; border-radius:999px; background:var(--ink); color:#fff; font-weight:800; font-size:13.5px; box-shadow:var(--sh); white-space:nowrap; animation:toastUp .35s cubic-bezier(.22,1,.36,1);} @keyframes toastUp{from{opacity:0; transform:translate(-50%,12px)}to{opacity:1; transform:translate(-50%,0)}} /* ---------- stagger entrance ---------- */ .stagger{animation:rise .5s cubic-bezier(.22,1,.36,1) backwards;} @keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:translateY(0)}} /* ---------- empty state ---------- */ .empty{text-align:center; padding:36px 22px; display:flex; flex-direction:column; align-items:center; gap:10px;} /* ---------- stub ---------- */ .stub{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:80px 30px; min-height:60vh;} /* ---------- phone frame — retired (2026-07, app ships full-bleed) ---------- The .phone bezel, fake .notch and mock .statusbar were preview chrome from the design phase. The JSX structure is unchanged; the rules below neutralise that chrome so .screen fills the real viewport like a native app, with real safe-area insets. On wide screens the app stays a centred phone-width column. */ .desk{align-items:stretch; width:100%; height:100vh; height:100dvh;} .device-scale{transform:none !important; width:100%; height:100%; display:flex; align-items:stretch; justify-content:center;} .phone{width:100%; height:100%; border-radius:0; background:transparent; padding:0; flex:1; box-shadow:none;} .screen{position:relative; width:100%; height:100%; border-radius:0; overflow:hidden; background:var(--bg);} .notch{display:none;} .statusbar{display:none;} .screen .tc-page--top{padding-top:calc(34px + env(safe-area-inset-top, 0px));} .screen .nav-wrap{padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));} .screen .sheet{padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px));} @media (min-width:560px){ .desk{align-items:center;} .phone{width:410px; height:min(100%, 900px); flex:none;} .screen{border-radius:24px; box-shadow:var(--sh);} } /* ---------- sheets ---------- */ .sheet-backdrop{position:absolute; inset:0; z-index:90; background:rgba(46,32,12,.34); backdrop-filter:blur(3px); display:flex; align-items:flex-end; animation:fade .25s ease;} .sheet{width:100%; max-height:88%; overflow-y:auto; background:var(--surface); border-radius:30px 30px 0 0; padding:10px 22px 28px; box-shadow:0 -20px 50px -20px rgba(46,32,12,.4); animation:sheetUp .34s cubic-bezier(.22,1,.36,1);} .sheet::-webkit-scrollbar{display:none;} .sheet-grip{width:42px; height:5px; border-radius:999px; background:var(--hairline-2); margin:0 auto 16px;} .sheet-title{font-size:20px; font-weight:800; letter-spacing:-.02em; margin-bottom:4px;} @keyframes fade{from{opacity:0}to{opacity:1}} @keyframes sheetUp{from{transform:translateY(40px)}to{transform:translateY(0)}} .qa-item{display:flex; align-items:center; gap:14px; padding:15px; border-radius:18px; background:var(--surface-2); border:1.5px solid var(--hairline); cursor:pointer; width:100%; transition:.15s;} .qa-item:active{transform:scale(.98);} .qa-ic{width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex:none;} /* ---------- forms ---------- */ .field{margin-bottom:15px;} .field-label{font-size:12.5px; font-weight:800; color:var(--ink-2); margin-bottom:7px; display:block; letter-spacing:.01em;} .input,.textarea{width:100%; font-family:inherit; font-size:16px; font-weight:600; color:var(--ink); background:var(--surface-2); border:1.5px solid var(--hairline-2); border-radius:14px; padding:13px 14px; outline:none; transition:border .2s, box-shadow .2s; -webkit-appearance:none; appearance:none;} .input:focus,.textarea:focus{border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-wash);} .textarea{resize:none; line-height:1.45;} .input::placeholder{color:var(--ink-3); font-weight:500;} select.input{cursor:pointer;} .input[type="date"]{cursor:pointer;} .input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;} /* ---------- segmented control ---------- */ .seg{display:flex; gap:4px; background:var(--surface-2); border:1.5px solid var(--hairline); border-radius:15px; padding:4px;} .seg button{flex:1; border:none; background:none; cursor:pointer; font-family:inherit; font-weight:800; font-size:13.5px; color:var(--ink-2); padding:9px 0; border-radius:11px; transition:.18s;} .seg button.on{background:var(--surface); color:var(--orange); box-shadow:var(--sh-sm);} .seg.tri button{font-size:12.5px; letter-spacing:-.01em; padding:9px 2px;} /* group-visibility seg: label + live count badge */ .seg button:has(.gv-label){display:flex; align-items:center; justify-content:center; gap:7px; padding:9px 4px;} .gv-label{letter-spacing:-.01em;} .gv-count{min-width:20px; height:19px; padding:0 6px; border-radius:999px; background:var(--surface-2); color:var(--ink-3); font-size:11.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;} .seg button.on .gv-count{background:var(--orange-wash); color:var(--orange);} .gv-sub{margin-top:8px; padding:0 3px; font-size:11.5px; font-weight:700; color:var(--ink-3); letter-spacing:-.005em;} /* ---------- me screen ---------- */ .me-head{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:16px 14px 14px; margin-bottom:8px; background:var(--surface); border-radius:var(--r); box-shadow:var(--sh-sm);} .me-id-info{display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0;} .me-id-nrow{display:flex; align-items:center; justify-content:center; gap:8px; min-width:0;} .me-id-name{font-weight:800; font-size:17.5px; letter-spacing:-.015em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.15;} .me-id-chips{display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;} .me-id-edit{position:absolute; top:11px; right:11px; width:32px; height:32px; flex:none; border-radius:10px; border:1.5px solid var(--hairline); background:var(--surface-2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .12s ease;} .me-id-edit:active{transform:scale(.93);} .me-row{display:flex; align-items:center; gap:13px; width:100%; padding:13px 0; background:none; border:none; cursor:pointer; font-family:inherit;} .me-ic{width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none;} .me-foot{display:flex; flex-direction:column; align-items:center; margin-top:30px;} /* ---------- switch ---------- */ .switch{width:48px; height:29px; border-radius:999px; background:var(--hairline-2); border:none; cursor:pointer; padding:0; position:relative; transition:.2s; flex:none;} .switch.on{background:var(--green);} .switch .knob{position:absolute; top:3px; left:3px; width:23px; height:23px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.2); transition:.2s;} .switch.on .knob{transform:translateX(19px);} /* ---------- modal helpers (restored functionality) ---------- */ .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;} .away-chip{display:inline-flex; align-items:center; font-size:9.5px; font-weight:900; letter-spacing:.04em; padding:2px 6px; border-radius:6px; background:var(--slate-wash); color:var(--sky-deep);} .pill{display:inline-flex; align-items:center; gap:5px; font-weight:800; border-radius:999px; white-space:nowrap;} .prow{display:flex; align-items:center; gap:12px; padding:11px 6px; border-radius:14px; transition:.15s;} .prow:active{background:var(--surface-2);} .dialog-backdrop{position:absolute; inset:0; z-index:95; background:rgba(46,32,12,.34); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:24px; animation:fade .25s ease;} .dialog{width:100%; background:var(--surface); border-radius:24px; padding:22px; box-shadow:0 24px 60px -18px rgba(46,32,12,.5); animation:sheetUp .3s cubic-bezier(.2,.8,.2,1);} .tray{overflow:hidden; transition:max-height .32s cubic-bezier(.2,.8,.2,1), opacity .25s ease;} .detail-sec{margin-top:16px;} .detail-sec .lbl{font-size:11.5px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px;} .stepper-btn{width:32px; height:32px; border-radius:10px; border:1.5px solid var(--hairline-2); background:var(--surface-2); color:var(--ink); font-size:19px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1;} .upload-drop{width:100%; border:1.5px dashed var(--hairline-2); background:var(--surface-2); border-radius:16px; padding:26px 16px; cursor:pointer; font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:8px;} /* ============================================================ LAGOON THEME — cool, calm twin of the warm citrus system. A light theme: same structure, but the warm-cream neutrals are re-pointed to cool slate-whites. The teal ACCENT is injected by the shell (themeDef.accent='lagoon'); this block only owns the neutral surfaces + ink + hairlines + cool shadows. Applied via [data-palette="lagoon"] on .screen so it never collides with the [data-theme="dark"] block. ============================================================ */ [data-palette="lagoon"]{ /* cool neutrals (low-chroma slate-whites) */ --bg:#F1F6F6; --bg-tint:#E5EDED; --surface:#FFFFFF; --surface-2:#EEF4F4; --ink:#1E2A2B; --ink-2:#5C7073; --ink-3:#94A7A9; --hairline:#E4ECEC; --hairline-2:#D4E0E0; /* shadows tinted cool slate instead of warm brown */ --sh-sm:0 1px 2px rgba(20,60,65,.05), 0 8px 18px -14px rgba(20,60,65,.38); --sh:0 2px 4px rgba(20,60,65,.05), 0 20px 38px -26px rgba(20,60,65,.46); } /* ============================================================ CRIMSON — a warm RED · GREEN · YELLOW theme. Keeps the warm cream neutrals; the red accent is injected by the shell (themeDef.accent='crimson'). This block retires the cool blue/teal informational family in favour of green, and turns the generic slate chips warm yellow, so the whole app — and especially the Me-page icon rows — reads in the three-colour trio instead of red·blue·slate. ============================================================ */ [data-palette="crimson"]{ /* blue/teal informational family → clean green */ --sky:#7FC98A; --sky-deep:#2F9E44; --sky-wash:#E7F6EA; --health:#2F9E44; --health-wash:#E7F6EA; --info:#2F9E44; --info-wash:#E7F6EA; /* generic slate chips (e.g. the Theme row) → warm yellow */ --slate:#D98300; --slate-wash:#FBEFD6; --neutral:#B07A12; --neutral-wash:#FBEFD6; /* keep the deferred donor status visually muted — don't let the slate→yellow remap make a paused donor look "due soon" */ --deferred:#A99C86; --deferred-wash:#F1ECE0; /* a hair more red in the page tint so cards sit on a warm rosé cream */ --bg:#FCF6F3; --bg-tint:#F6EBE6; --surface-2:#FBF1ED; --hairline:#F3E6E0; --hairline-2:#EAD7CF; } /* ============================================================ DARK MODE — warm charcoal twin of the citrus-and-sky system. Applied via [data-theme="dark"] on the phone .screen; child elements inherit the re-pointed CSS variables. ============================================================ */ [data-theme="dark"]{ /* lift accents a touch so they hold on charcoal */ --orange:#FF7A1F; --orange-2:#FF9A45; --green:#86CE3A; --green-2:#9BDC52; --sky-deep:#5FB8BE; --slate:#88A6AA; /* legacy status aliases re-resolved for dark (var() indirection from :root bakes the light value, so the colour tokens must be restated here) */ --eligible:#86CE3A; --soon:#FF7A1F; --deferred:#88A6AA; --health:#5FB8BE; /* warm-dark washes (status tints) */ --orange-wash:#3a2614; --yellow-wash:#3a3016; --green-wash:#243519; --sky-wash:#163230; --slate-wash:#262f2f; --soon-wash:#3a3016; --eligible-wash:#243519; --deferred-wash:#262f2f; --waiting:#E7A93C; --waiting-wash:#3a2c12; --health-wash:#163230; /* warm-dark neutrals */ --bg:#15130E; --bg-tint:#1d1a13; --surface:#211e17; --surface-2:#2a261d; --ink:#F2ECDF; --ink-2:#B6AC99; --ink-3:#827969; --hairline:#2c2820; --hairline-2:#393327; --sh-sm:0 1px 2px rgba(0,0,0,.45), 0 8px 18px -14px rgba(0,0,0,.7); --sh:0 2px 4px rgba(0,0,0,.45), 0 20px 38px -26px rgba(0,0,0,.8); /* ---- SEMANTIC STATUS TOKENS (dark values) ---- Foregrounds are lifted toward light so they hold AA contrast on the charcoal surfaces; the -wash surfaces are deep, low-chroma tints of the same hue so badges read as quiet fills, never glowing chips. All explicit (see the light block note on why indirection fails). */ --success:#9BDC52; --success-wash:#243519; --warning:#E7A93C; --warning-wash:#3A2C12; --alert:#FF8A4D; --alert-wash:#3A2614; --danger:#FF6B6F; --danger-wash:#3A1D1E; --info:#5FB8BE; --info-wash:#163230; --neutral:#9FB6BA; --neutral-wash:#262F2F; --blood:#FF6B6F; } [data-theme="dark"].screen{background:var(--bg);} /* dark mode: all cards take the lifted charcoal (matches the sign-out button) */ [data-theme="dark"] .card, [data-theme="dark"] .card-sm, [data-theme="dark"] .card-flat{background:#2a261d;} /* ---------- monitoring · inline expand + focus ---------- */ .mon-acc{display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s cubic-bezier(.4,0,.2,1);} .mon-acc.open{grid-template-rows:1fr;} .mon-acc > div{overflow:hidden; min-height:0;} @media (prefers-reduced-motion: reduce){ .mon-acc{transition:none;} } .mon-card{transition:box-shadow .25s, border-color .25s;} .mon-card.expanded{box-shadow:0 10px 30px -14px rgba(120,80,20,.4);} .mon-rowwrap{border-bottom:1px solid var(--hairline);} .mon-rowwrap:last-child{border-bottom:none;} .mon-rowwrap.expanded{margin:0 -14px; padding:0 14px; background:var(--surface-2); border-radius:14px;} /* brief highlight when a card is selected via search / insight / timeline */ @keyframes monFlash{ 0%{box-shadow:0 0 0 0 rgba(217,131,0,.0); background-color:rgba(217,131,0,.16);} 18%{box-shadow:0 0 0 3px rgba(217,131,0,.45); background-color:rgba(217,131,0,.14);} 100%{box-shadow:0 0 0 0 rgba(217,131,0,0); background-color:transparent;} } .mon-flash{animation:monFlash 2.3s ease-out;} .mon-card.mon-flash{border-radius:18px;} @media (prefers-reduced-motion: reduce){ .mon-flash{animation:none; outline:2px solid var(--orange); outline-offset:2px;} } [data-theme="dark"] .nav{background:linear-gradient(180deg, rgba(52,48,38,.62), rgba(33,30,23,.46)); box-shadow:0 14px 34px -12px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.08);} /* hero scrim fades the illustration into the dark page, not white */ [data-theme="dark"] .hero-scrim{ background:linear-gradient(180deg, rgba(21,19,14,0) 0%, rgba(21,19,14,.12) 55%, rgba(21,19,14,0) 100%);} [data-theme="dark"] .home-hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:120px; z-index:6; pointer-events:none; background:linear-gradient(180deg, rgba(21,19,14,0) 0%, var(--bg) 100%);} [data-theme="dark"] .home-top .sm{text-shadow:0 1px 12px rgba(0,0,0,.55);} [data-theme="dark"] .home-top .lg{text-shadow:0 1px 14px rgba(0,0,0,.6);} /* dialog backdrop a touch deeper over dark UI */ [data-theme="dark"] .dialog-backdrop{background:rgba(0,0,0,.55);} [data-theme="dark"] .switch .knob{background:#f2ecdf;} /* monitoring: AI reader pulse */ @keyframes monPulse{0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(.9); opacity:.6;}} .mon-pulse{animation:monPulse 1.1s ease-in-out infinite;} /* ============================================================ WELCOME · AUTH · ONBOARDING ============================================================ */ .wf{position:absolute; inset:0; display:flex; flex-direction:column; background:var(--bg); overflow:hidden;} .wf-scroll{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;} .wf-scroll::-webkit-scrollbar{display:none;} /* ---- splash ---- */ .wf-splash{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; background: radial-gradient(90% 60% at 50% 18%, rgba(252,107,5,.16) 0%, rgba(252,107,5,0) 60%), radial-gradient(80% 55% at 80% 78%, rgba(62,154,160,.18) 0%, rgba(62,154,160,0) 62%), radial-gradient(70% 50% at 15% 70%, rgba(229,72,77,.10) 0%, rgba(229,72,77,0) 60%), #FFFDF9; } .wf-splash-ring,.wf-splash-ring2{display:none;} .wf-splash-mark{margin-top:min(20vh,150px); flex:none;} .wf-brand{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; margin-top:6vh; padding:0 26px; box-sizing:border-box;} .wf-logo{width:172px; height:172px; display:grid; place-items:center; flex:none; margin-bottom:26px; filter:drop-shadow(0 14px 26px rgba(120,80,20,.18));} .wf-wordmark{font-size:46px; font-weight:800; letter-spacing:-.03em; color:var(--ink); line-height:1;} .wf-tagline{font-size:16px; font-weight:600; line-height:1.55; color:var(--ink); opacity:.72; margin-top:16px; margin-bottom:0; text-align:center; max-width:280px; text-wrap:pretty;} .wf-splash-foot{flex:none; width:100%; margin-top:auto; padding:0 26px calc(38px + env(safe-area-inset-bottom)); box-sizing:border-box; position:relative; z-index:2;} /* ---- auth ---- */ .wf-pad{padding:0 26px 30px;} .wf-auth-top{padding:64px 26px 18px; text-align:center;} .wf-auth-logo{width:58px; height:58px; border-radius:18px; background:linear-gradient(150deg,var(--orange),var(--orange-2)); display:grid; place-items:center; box-shadow:var(--sh-pop); margin:0 auto 16px;} .wf-h{font-size:25px; font-weight:800; letter-spacing:-.025em; line-height:1.1; color:var(--ink);} .wf-sub{font-size:14.5px; font-weight:600; color:var(--ink-2); line-height:1.5; margin-top:8px; text-wrap:pretty;} .wf-btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; border:none; cursor:pointer; font-family:inherit; font-weight:800; font-size:15.5px; padding:15px 18px; border-radius:16px; transition:transform .12s, box-shadow .2s;} .wf-btn:active{transform:scale(.98);} .wf-btn-primary{background:linear-gradient(150deg,var(--orange),var(--orange-2)); color:#fff; box-shadow:var(--sh-pop);} .wf-btn-google{background:var(--surface); color:var(--ink); border:1.5px solid var(--hairline-2); box-shadow:var(--sh-sm);} .wf-btn-ghost{background:var(--surface-2); color:var(--ink); border:1.5px solid var(--hairline-2);} .wf-or{display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--ink-3); font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;} .wf-or::before,.wf-or::after{content:''; flex:1; height:1.5px; background:var(--hairline);} .wf-switch{text-align:center; margin-top:22px; font-size:13.5px; font-weight:600; color:var(--ink-2);} .wf-switch button{background:none; border:none; cursor:pointer; font-family:inherit; font-weight:800; color:var(--orange); font-size:13.5px;} .wf-legal{text-align:center; font-size:11.5px; color:var(--ink-3); line-height:1.5; margin-top:18px; padding:0 8px;} /* ---- onboarding question screens ---- */ .wf-prog-row{display:flex; align-items:center; gap:13px; padding:54px 22px 8px;} .wf-back{width:38px; height:38px; flex:none; border-radius:12px; border:none; cursor:pointer; background:var(--surface-2); color:var(--ink-2); display:grid; place-items:center;} .wf-back:disabled{opacity:0; pointer-events:none;} .wf-prog{flex:1; height:7px; border-radius:999px; background:var(--hairline); overflow:hidden;} .wf-prog-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,var(--orange-2),var(--orange)); transition:width .4s cubic-bezier(.4,1.2,.5,1);} .wf-step-n{flex:none; font-size:12px; font-weight:800; color:var(--ink-3); font-variant-numeric:tabular-nums;} .wf-q{padding:14px 26px 0;} .wf-eyebrow{font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); margin-bottom:10px;} .wf-qtitle{font-size:25px; font-weight:800; letter-spacing:-.025em; line-height:1.14; color:var(--ink); text-wrap:balance;} .wf-qhint{font-size:13.5px; font-weight:600; line-height:1.55; color:var(--ink-2); margin-top:11px; text-wrap:pretty;} .wf-control{padding:26px 26px 10px;} .wf-foot{flex:none; padding:14px 26px calc(26px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:10px;} .wf-skip{background:none; border:none; cursor:pointer; font-family:inherit; font-weight:800; font-size:14px; color:var(--ink-3); padding:6px;} /* big tappable option list (sex, type, yes/no) */ .wf-opts{display:flex; flex-direction:column; gap:11px;} .wf-opt{display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer; font-family:inherit; background:var(--surface); border:1.5px solid var(--hairline-2); border-radius:18px; padding:16px 16px; transition:.16s; box-shadow:var(--sh-sm);} .wf-opt:active{transform:scale(.99);} .wf-opt.on{border-color:var(--orange); background:var(--orange-wash); box-shadow:0 0 0 3px var(--orange-wash);} .wf-opt-tick{margin-left:auto; width:24px; height:24px; flex:none; border-radius:50%; border:2px solid var(--hairline-2); display:grid; place-items:center; transition:.16s;} .wf-opt.on .wf-opt-tick{border-color:var(--orange); background:var(--orange);} .wf-opt-t{font-weight:800; font-size:15.5px; color:var(--ink); letter-spacing:-.01em;} .wf-opt-d{font-size:12.5px; font-weight:600; color:var(--ink-2); line-height:1.45; margin-top:2px;} .wf-bloodgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;} .wf-blood{padding:16px 0; border-radius:15px; border:1.5px solid var(--hairline-2); background:var(--surface); cursor:pointer; font-family:inherit; font-weight:800; font-size:17px; color:var(--ink); transition:.15s; box-shadow:var(--sh-sm);} .wf-blood.on{color:#fff; border-color:transparent;} /* finish screen */ .wf-finish{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px 30px calc(30px + env(safe-area-inset-bottom));} .wf-finish-art{margin-bottom:8px;} @media (prefers-reduced-motion: no-preference){ .wf-q,.wf-control{animation:wfStep .42s cubic-bezier(.22,1,.36,1) backwards;} .wf-control{animation-delay:.05s;} } @keyframes wfStep{from{opacity:0; transform:translateX(18px)}to{opacity:1; transform:translateX(0)}} /* ---- five-phase rail ---- */ .wf-prail{flex:1; display:flex; gap:7px;} .wf-pseg{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px;} .wf-pseg-bar{height:5px; border-radius:999px; background:var(--hairline); overflow:hidden;} .wf-pseg-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,var(--orange-2),var(--orange)); transition:width .4s cubic-bezier(.4,1.2,.5,1);} .wf-pseg-lbl{font-size:8px; font-weight:800; letter-spacing:.01em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .25s;} .wf-pseg.active .wf-pseg-lbl{color:var(--orange);} .wf-pseg.done .wf-pseg-lbl{color:var(--ink-2);} /* ---- consent ---- */ .wf-consent-list{display:flex; flex-direction:column; gap:14px;} .wf-consent-item{display:flex; gap:13px; align-items:flex-start;} .wf-consent-ic{width:34px; height:34px; flex:none; border-radius:11px; background:var(--orange-wash); display:grid; place-items:center;} .wf-consent-t{font-weight:800; font-size:14.5px; color:var(--ink); letter-spacing:-.01em;} .wf-consent-d{font-size:12.5px; font-weight:600; line-height:1.45; color:var(--ink-2); margin-top:2px; text-wrap:pretty;} .wf-doclinks{display:flex; align-items:center; gap:10px; margin:20px 0 18px; font-size:13px; color:var(--ink-3); font-weight:700;} .wf-doclinks button{background:none; border:none; cursor:pointer; font-family:inherit; font-weight:800; font-size:13px; color:var(--orange); text-decoration:underline; text-underline-offset:3px; padding:0;} .wf-check{display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left; cursor:pointer; font-family:inherit; background:var(--surface); border:1.5px solid var(--hairline-2); border-radius:16px; padding:15px 15px; transition:.16s; box-shadow:var(--sh-sm);} .wf-check.on{border-color:var(--orange); background:var(--orange-wash); box-shadow:0 0 0 3px var(--orange-wash);} .wf-check-box{width:24px; height:24px; flex:none; border-radius:7px; border:2px solid var(--hairline-2); background:var(--surface); display:grid; place-items:center; margin-top:1px; transition:.16s;} .wf-check.on .wf-check-box{border-color:var(--orange); background:var(--orange);} .wf-check-lbl{font-size:12.5px; font-weight:700; line-height:1.5; color:var(--ink); text-wrap:pretty;} /* ---- reminders / prefs ---- */ .wf-prefs{display:flex; flex-direction:column; gap:11px;} .wf-pref{display:flex; align-items:center; gap:13px; width:100%; background:var(--surface); border:1.5px solid var(--hairline-2); border-radius:18px; padding:14px 15px; box-shadow:var(--sh-sm);} .wf-pref-ic{width:38px; height:38px; flex:none; border-radius:12px; background:var(--orange-wash); display:grid; place-items:center;} .wf-pref-t{font-weight:800; font-size:14.5px; color:var(--ink); letter-spacing:-.01em;} .wf-pref-d{font-size:12px; font-weight:600; line-height:1.4; color:var(--ink-2); margin-top:2px; text-wrap:pretty;} /* ---- add medication (chelation step) ---- */ .wf-add{display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer; font-family:inherit; background:var(--surface); border:1.5px dashed var(--orange); border-radius:18px; padding:18px 16px; transition:.16s;} .wf-add:active{transform:scale(.99);} .wf-add-ic{width:42px; height:42px; flex:none; border-radius:13px; background:var(--orange-wash); display:grid; place-items:center;} .wf-add-t{font-weight:800; font-size:15px; color:var(--ink); letter-spacing:-.01em;} .wf-add-d{font-size:12.5px; font-weight:600; line-height:1.4; color:var(--ink-2); margin-top:2px;} .wf-medcard{display:flex; align-items:center; gap:13px; width:100%; background:var(--surface); border:1.5px solid var(--hairline-2); border-radius:18px; padding:14px 15px; box-shadow:var(--sh-sm);} /* ---- medical profile card header (Me) ---- */ .med-head{display:flex; align-items:center; gap:14px; width:100%; cursor:pointer; font-family:inherit; background:none; border:none; padding:16px 16px; text-align:left;} .med-head:active{background:var(--surface-2);} /* ============================================================ GENERAL TIMETABLE — expandable monitoring schedule ============================================================ */ .tt-wrap{background:var(--surface); border:1.5px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden;} .tt-head{display:flex; align-items:center; gap:12px; width:100%; padding:15px 15px; background:none; border:none; cursor:pointer; font-family:inherit; text-align:left;} .tt-head:active{background:var(--surface-2);} .tt-head-leaf{width:38px; height:38px; flex:none; border-radius:12px; background:var(--sky-wash); display:grid; place-items:center;} .tt-head-tx{flex:1; min-width:0;} .tt-head-title{display:block; font-weight:800; font-size:14.5px; letter-spacing:-.01em; color:var(--ink); line-height:1.25; text-wrap:pretty;} .tt-head-sub{display:block; font-size:11.5px; font-weight:700; color:var(--ink-3); margin-top:2px;} .tt-body{padding:0 13px 13px;} /* ---- overview summary ---- */ .tl-ov{background:linear-gradient(140deg, var(--sky-wash), var(--surface-2)); border:1.5px solid var(--hairline-2); border-radius:18px; padding:14px 15px; margin-bottom:12px;} .tl-ov-top{display:flex; align-items:center; gap:12px; justify-content:space-between;} .tl-ov-title{font-weight:800; font-size:15px; letter-spacing:-.01em; color:var(--ink); line-height:1.2;} .tl-ov-cap{font-size:12px; font-weight:600; color:var(--ink-2); margin-top:3px; text-wrap:pretty;} .tl-ring{width:54px; height:54px; flex:none; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--sky-deep) calc(var(--p)*1%), var(--hairline-2) 0);} .tl-ring span{width:42px; height:42px; border-radius:50%; background:var(--surface); display:grid; place-items:center; font-weight:800; font-size:15px; color:var(--sky-deep); font-feature-settings:"tnum";} .tl-ring small{font-size:9px; font-weight:800; margin-left:1px;} .tl-ov-bar{height:7px; border-radius:999px; background:var(--hairline-2); overflow:hidden; margin:12px 0;} .tl-ov-bar span{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--green), var(--green-2)); transition:width .4s;} .tl-ov-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;} .tl-ov-stat{background:var(--surface); border-radius:13px; padding:9px 4px; text-align:center;} .tl-ov-num{display:block; font-weight:800; font-size:20px; font-feature-settings:"tnum"; line-height:1;} .tl-ov-lab{display:block; font-size:9.5px; font-weight:700; color:var(--ink-2); margin-top:4px; letter-spacing:.01em;} /* ---- filter chips + controls ---- */ .tl-chips{display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; margin-bottom:10px;} .tl-chips::-webkit-scrollbar{display:none;} .tl-chips .chip{flex:none; white-space:nowrap;} .tl-controls{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px;} .tl-toggle{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; cursor:pointer; font-family:inherit; font-weight:800; font-size:12px; border:1.5px solid var(--hairline-2); background:var(--surface); color:var(--ink-2);} .tl-toggle.on{background:var(--sky-deep); border-color:var(--sky-deep); color:#fff;} .tl-link{background:none; border:none; cursor:pointer; font-family:inherit; font-weight:800; font-size:12px; color:var(--sky-deep); padding:4px;} /* ---- category accordions ---- */ .tl-list{display:flex; flex-direction:column; gap:9px;} .tl-cat{background:var(--surface); border:1.5px solid var(--hairline); border-radius:16px; overflow:hidden;} .tl-cat.open{border-color:var(--hairline-2); box-shadow:var(--sh-sm);} .tl-cat-head{display:flex; align-items:center; gap:11px; width:100%; padding:12px 13px; background:none; border:none; cursor:pointer; font-family:inherit; text-align:left;} .tl-cat-head:active{background:var(--surface-2);} .tl-cat-leaf{width:34px; height:34px; flex:none; border-radius:11px; background:var(--sky-wash); display:grid; place-items:center;} .tl-cat-tx{flex:1; min-width:0;} .tl-cat-name{display:block; font-weight:800; font-size:13.5px; letter-spacing:-.01em; color:var(--ink); line-height:1.2; text-wrap:pretty;} .tl-cat-sub{display:block; font-size:11px; font-weight:700; color:var(--ink-3); margin-top:2px;} .tl-cat-attn{flex:none; min-width:22px; height:22px; padding:0 7px; border-radius:999px; background:var(--orange); color:#fff; font-weight:800; font-size:11.5px; display:grid; place-items:center; font-feature-settings:"tnum";} /* accordion collapse animation */ .mon-acc{display:grid; grid-template-rows:0fr; transition:grid-template-rows .24s ease;} .mon-acc.open{grid-template-rows:1fr;} .mon-acc>div{overflow:hidden; min-height:0;} .tl-cat-body{display:flex; flex-direction:column; gap:8px; padding:2px 11px 12px;} /* ---- test card ---- */ .tl-test{background:var(--surface-2); border:1.5px solid var(--hairline); border-radius:13px; padding:11px 12px;} .tl-test-head{display:flex; align-items:center; gap:8px;} .tl-status-dot{width:9px; height:9px; flex:none; border-radius:50%;} .tl-test-name{flex:1; min-width:0; font-weight:800; font-size:13px; letter-spacing:-.01em; color:var(--ink); line-height:1.25; text-wrap:pretty;} .tl-badge{flex:none; font-size:10px; font-weight:800; letter-spacing:.01em; padding:3px 8px; border-radius:999px; white-space:nowrap;} /* cadence */ .tl-cad{display:flex; align-items:center; gap:9px; margin-top:9px;} .tl-cad-pill{flex:none; font-size:11px; font-weight:800; color:var(--sky-deep); background:var(--sky-wash); padding:3px 9px; border-radius:999px; white-space:nowrap;} .tl-track{position:relative; flex:1; min-width:0; height:12px; display:flex; align-items:center; gap:0; justify-content:space-between;} .tl-track-line{position:absolute; left:3px; right:3px; top:50%; height:2px; background:var(--hairline-2); border-radius:2px;} .tl-track-dot{position:relative; width:7px; height:7px; border-radius:50%; background:var(--hairline-2); flex:none;} .tl-track-dot.first{width:9px; height:9px; background:var(--sky-deep);} /* meta (last/next) */ .tl-meta{display:flex; gap:18px; margin-top:10px; padding-top:10px; border-top:1px solid var(--hairline);} .tl-meta-i{display:flex; flex-direction:column; gap:2px;} .tl-meta-k{font-size:10px; font-weight:700; color:var(--ink-3); letter-spacing:.02em;} .tl-meta-v{font-size:12.5px; font-weight:800; color:var(--ink); font-feature-settings:"tnum";} .tl-note{margin-top:9px; font-size:11px; font-weight:600; color:var(--ink-2); line-height:1.4; text-wrap:pretty; padding-left:10px; border-left:2px solid var(--hairline-2);} /* legend */ .tl-legend{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding:13px 4px 6px; font-size:11px; font-weight:700; color:var(--ink-2);} .tl-legend span{display:inline-flex; align-items:center; gap:5px;}